/*
 * 공개 쪽 공통 — 서비스 소개(/about) · 이용약관(/terms) · 개인정보처리방침(/privacy) · 계정 삭제(/withdraw).
 * 머리 · 바닥(_common/public-header.jspf · public-footer.jspf)과 쪽마다 쓰는 공통 조각. 바닥 안쪽은 메인(/)도 함께 쓴다.
 * 색 토큰은 메인(landing.jsp .lp-page)과 같은 값. 시안: docs/mockup/public-2026-10(2026-10-21 사용자가 B 를 고름)
 * 외부 글꼴을 부르지 않는다(실서비스 메인과 같게)
 */
:root {
	--pb-bg:#0d1117; --pb-bg2:#161b22; --pb-bg3:#1c2128;
	--pb-t1:#e6edf3; --pb-t2:#bcc4ce; --pb-t3:#97a0ab; --pb-bd:rgba(240,246,252,.10); --pb-bd2:rgba(240,246,252,.17);
	--pb-brand:#2dd4bf; --pb-brand2:#0e9384; --pb-cyan:#39c5cf; --pb-red:#f85149; --pb-amber:#d29922;
	--pb-font:'Noto Sans KR', system-ui, sans-serif; --pb-mono:'JetBrains Mono', ui-monospace, monospace;
}

/* 본문 바로가기 — 키보드로 올 때만 보인다(반복 영역 건너뛰기, 2026-10-22). 본문은 id="main" */
.pb-skip { position:absolute; left:16px; top:-60px; z-index:200; padding:10px 16px; border-radius:8px;
	background:var(--pb-brand); color:#04211c; font:700 14px/1.2 var(--pb-font); text-decoration:none; transition:top .15s; }
.pb-skip:focus { top:12px; outline:2px solid #fff; outline-offset:2px; }
#main:focus { outline:none; }   /* 건너뛴 자리 — 초점만 옮기고 테두리는 그리지 않는다 */

/* 머리 */
.pb-head { position:sticky; top:0; z-index:100; background:rgba(13,17,23,.80); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid var(--pb-bd); font-family:var(--pb-font); -webkit-font-smoothing:antialiased; }
.pb-head *, .pb-foot * { box-sizing:border-box; }
.pb-in { max-width:1200px; margin:0 auto; padding:0 40px; }
.pb-head .pb-in { height:64px; display:flex; align-items:center; gap:28px; }
.pb-head a { color:inherit; text-decoration:none; }
.pb-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; color:var(--pb-t1); }
.pb-logo { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg, var(--pb-brand), var(--pb-brand2)); box-shadow:0 4px 14px rgba(45,212,191,.35); }
.pb-logo svg { width:22px; height:22px; }
.pb-name b { display:block; font-size:16px; letter-spacing:-.4px; line-height:1; }
.pb-name span { font-size:11px; color:var(--pb-t2); }
.pb-nav { margin-left:auto; display:flex; gap:24px; font-size:14px; color:var(--pb-t2); }
.pb-nav a { position:relative; }
.pb-nav a:hover, .pb-nav a[aria-current] { color:var(--pb-t1); }
.pb-nav a[aria-current]::after { content:''; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--pb-brand); border-radius:2px; }
.pb-login { padding:8px 18px; border-radius:999px; background:var(--pb-brand); color:#04211c !important; font-size:14px; font-weight:700; white-space:nowrap; }

/* 바닥 — 바깥 틀(.pb-foot)은 소개 · 문서 쪽, 안쪽(.pb-who · .pb-foot-nav)은 메인도 쓴다 */
.pb-foot { border-top:1px solid var(--pb-bd); background:var(--pb-bg); font-family:var(--pb-font); }
.pb-foot .pb-in { padding-top:26px; padding-bottom:30px; display:flex; flex-wrap:wrap; gap:14px 16px; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--pb-t3); }
.pb-who { display:inline-flex; align-items:center; gap:8px; }
.pb-who img { width:20px; height:20px; }
.pb-foot-nav { display:flex; flex-wrap:wrap; gap:16px; }
.pb-foot a { color:inherit; text-decoration:none; }
.pb-foot a:hover { color:var(--pb-t1); }

/* 쪽 공통 조각 */
.pb-eyebrow { font-family:var(--pb-mono); font-size:12px; letter-spacing:2px; color:var(--pb-cyan); }
.pb-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-size:15px; font-weight:700; text-decoration:none; transition:transform .18s, background .2s; }
.pb-btn-pri { background:var(--pb-brand); color:#04211c; box-shadow:0 8px 22px rgba(45,212,191,.28); }
.pb-btn-pri:hover { transform:translateY(-2px); }
.pb-btn-ghost { background:rgba(255,255,255,.06); border:1px solid var(--pb-bd2); color:var(--pb-t1); }
.pb-btn-ghost:hover { background:rgba(255,255,255,.12); }
.pb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pb-chips span { font-size:12px; padding:3px 9px; border-radius:6px; background:rgba(45,212,191,.10); color:var(--pb-brand); font-weight:600; }
.pb-chips span.off { background:rgba(240,246,252,.06); color:var(--pb-t3); }

/* 좁은 화면 — 메뉴를 숨기지 않고 둘째 줄로(약관 · 방침 사이를 위에서 오갈 수 있게) */
@media (max-width:900px) {
	.pb-in { padding:0 20px; }
	.pb-head .pb-in { height:auto; flex-wrap:wrap; gap:0 12px; padding-top:12px; }
	.pb-login { margin-left:auto; padding:7px 16px; font-size:13.5px; }
	.pb-nav { order:3; flex-basis:100%; margin:0; gap:20px; padding:10px 0 12px; font-size:13.5px; overflow-x:auto; white-space:nowrap; }
	.pb-nav a[aria-current]::after { bottom:-12px; }
}
@media (max-width:420px) { .pb-in { padding:0 16px; } .pb-name span { display:none; } }
@media (prefers-reduced-motion:reduce) { .pb-btn, .pb-skip { transition:none; } }