/* 하위 페이지(도움말 · 고객지원 · 이용약관 · 개인정보처리방침) — 틀은 call.css · 가이드 docs/13 v1.4 · 구조 = docs/18 §5 */
.pg { padding-top: 68px; }
.pg-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3.5vw, 48px); border-bottom: var(--hair) solid var(--c-line); }
.pg-hero h1 { font: var(--t-h2); letter-spacing: var(--ls-h2); margin: var(--s-4) 0 0; text-wrap: balance; }
.pg-hero .c-lead { margin: var(--s-4) 0 0; max-width: var(--w-text); color: var(--c-ink-700); }
.pg-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; padding: 0; list-style: none; font: var(--t-small); color: var(--c-ink-500); }
.pg-meta b { font-weight: 600; color: var(--c-ink-700); }
.pg-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s-8); padding-top: var(--s-8); padding-bottom: var(--section-y); }
.pg-toc { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; }
.pg-toc b { font: var(--t-label-ko); color: var(--c-ink-500); margin-bottom: var(--s-3); }
.pg-toc a { padding: 8px 12px; border-left: 2px solid var(--c-line); color: var(--c-ink-500); font: 500 14.5px/1.4 var(--f-sans); text-decoration: none; transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease); }
.pg-toc a:hover { color: var(--c-ink-900); }
.pg-toc a.is-on { border-color: var(--c-ink-900); color: var(--c-ink-900); }
.pg-doc { max-width: 780px; min-width: 0; }
.pg-sec { padding-bottom: var(--s-8); scroll-margin-top: 92px; }
.pg-sec > h2 { font: var(--t-h3); letter-spacing: var(--ls-h2); margin: 0 0 var(--s-4); text-wrap: balance; }
.pg-sec > h2 small { display: block; margin-bottom: var(--s-2); font: var(--t-label); letter-spacing: var(--ls-label); color: var(--c-ink-500); }
.pg-sec h3 { font: var(--t-strong); color: var(--c-ink-900); margin: var(--s-6) 0 var(--s-2); }
.pg-sec p, .pg-sec li { font: var(--t-body); color: var(--c-ink-700); }
.pg-sec p { margin: 0 0 var(--s-4); }
.pg-sec ul, .pg-sec ol { margin: 0 0 var(--s-4); padding-left: 1.2em; }
.pg-sec li { margin-bottom: var(--s-2); }
.pg-sec code { font: var(--t-label); font-size: 13px; letter-spacing: 0; background: var(--c-sand); padding: 2px 6px; border-radius: var(--r-sm); color: var(--c-ink-900); }
.pg-sec a { color: var(--c-ink-900); text-underline-offset: 3px; }
.pg-sec a:hover { color: var(--c-accent); }
.pg-sec strong { color: var(--c-ink-900); font-weight: 600; }
.pg-note { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--c-sand); border-radius: var(--r-md); }
.pg-note > :last-child { margin-bottom: 0; }
.pg-note b { font-weight: 600; color: var(--c-ink-900); }
.pg-steps { list-style: none; padding: 0 !important; counter-reset: st; }
.pg-steps li { position: relative; padding: 0 0 0 52px; margin: 0 0 var(--s-5); counter-increment: st; }
.pg-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: var(--t-label); font-size: 13px; letter-spacing: .04em; color: var(--c-ink-500); border: var(--hair) solid var(--c-line); border-radius: var(--r-pill); width: 36px; height: 28px; display: grid; place-items: center; }
.pg-steps li > b { display: block; font: var(--t-strong); color: var(--c-ink-900); margin-bottom: 2px; }
.pg-steps li > span, .pg-steps li > p { display: block; margin: 0; }
.pg-tw { overflow-x: auto; margin: 0 0 var(--s-5); border: var(--hair) solid var(--c-line); border-radius: var(--r-md); background: var(--c-white); }
.pg-tbl { width: 100%; border-collapse: collapse; min-width: 480px; }
.pg-tbl th, .pg-tbl td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: var(--hair) solid var(--c-line-soft); font: var(--t-small); color: var(--c-ink-700); }
.pg-tbl th { font-weight: 600; color: var(--c-ink-900); background: var(--c-paper); white-space: nowrap; }
.pg-tbl tr:last-child th, .pg-tbl tr:last-child td { border-bottom: 0; }
.pg-tbl--kv th { width: 30%; }
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: 0 0 var(--s-5); }
.pg-card { padding: var(--s-5); background: var(--c-white); border: var(--hair) solid var(--c-line); border-radius: var(--r-md); }
.pg-card h3 { margin-top: 0; }
.pg-card > :last-child { margin-bottom: 0; }
.pg-card .tag { display: inline-block; margin-bottom: var(--s-3); font: var(--t-label-ko); color: var(--c-ok); }
.pg-card .tag.is-keep { color: var(--c-ink-500); }
.pg-mail { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 17px/1 var(--f-sans); color: var(--c-ink-900) !important; }
.pg-card--qr { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-4); }
.pg-qr { flex: none; width: 104px; height: 104px; border-radius: 8px; border: 1px solid var(--c-line); background: #fff; }
@media (max-width: 520px) { .pg-card--qr { flex-direction: column-reverse; align-items: flex-start; } }
.pg-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.pg-foot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--hair) solid var(--c-line); font: var(--t-small); color: var(--c-ink-500); }
.pg-foot p { font: var(--t-small); margin: 0 0 var(--s-2); }
@media (max-width: 859px) {
  .pg { padding-top: 60px; }
  .pg-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-top: var(--s-6); }
  .pg-toc { position: static; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--s-2); overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; }
  .pg-toc::-webkit-scrollbar { display: none; }
  .pg-toc b { flex: none; margin: 0 var(--s-1) 0 0; }
  .pg-toc a { flex: none; white-space: nowrap; border: var(--hair) solid var(--c-line); border-radius: var(--r-pill); padding: 8px 14px; }
  .pg-toc a.is-on { border-color: var(--c-ink-900); }
  .pg-two { grid-template-columns: minmax(0, 1fr); }
}
/* 하위 페이지 푸터는 CTA 없이 푸터만 — 어두운 면 */
.s9--foot { padding-top: var(--s-5); }
.s9--foot .s9-foot { border-top: 0; }
@media (max-width: 859px) { .s9-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .s9-brand { grid-column: 1 / -1; } }

/* ── 수정 표시(검토용 · 배포판에서 제거 — tools/build_pages.py REVIEW) ── */
ins.rv-ins { text-decoration: none; background: rgba(45, 179, 111, .17); box-shadow: inset 0 -1.5px 0 #2DB36F; border-radius: 2px; }
del.rv-del { color: #A8321F; background: rgba(197, 58, 35, .08); text-decoration: line-through; text-decoration-thickness: 1.2px; border-radius: 2px; }
mark.rv-q { color: inherit; background: rgba(240, 180, 41, .30); box-shadow: inset 0 -1.5px 0 #B07A00; border-radius: 2px; }
mark.rv-q::after { content: "?"; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; background: #B07A00; color: #fff; font: 700 10px/1 var(--f-sans); vertical-align: 2px; }
body.rv-off ins.rv-ins, body.rv-off mark.rv-q { background: none; box-shadow: none; }
body.rv-off mark.rv-q::after { display: none; }
body.rv-off del.rv-del { display: none; }
.rv-key { position: fixed; right: 16px; bottom: 16px; z-index: 55; max-width: 330px; padding: 12px 14px; border-radius: 14px; background: #26272B; color: #fff; font: 500 12.5px/1.5 var(--f-sans); box-shadow: var(--sh-2); }
.rv-key b { display: block; margin-bottom: 6px; font-weight: 600; }
.rv-key span { display: block; }
.rv-key i { font-style: normal; padding: 0 4px; border-radius: 2px; color: #101113; }
.rv-key .k1 { background: #6fdca3; } .rv-key .k2 { background: #f1a79b; text-decoration: line-through; } .rv-key .k3 { background: #f4cf6d; }
.rv-key button { all: unset; cursor: pointer; margin-top: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: #3a3b40; }
.rv-key button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 859px) { .rv-key { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 8px 12px; } .rv-key span { display: inline; margin-right: 8px; } }
@media print { .rv-key { display: none; } }

/* 앱 WebView(약관 · 방침) — 머리글 · 푸터 숨김. 판별은 build_pages.py WV */
.is-webview .s-hd, .is-webview .s-skip, .is-webview .s9--foot { display: none; }
.is-webview .pg { padding-top: 0; }

/* 떠 있는 문의 버튼(도움말 · 고객지원 · 데스크톱만) — 누르면 컨택콜 QR 카드 · 푸터가 보이면 숨김 */
.ask-fab { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: none; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease); }
@media (min-width: 860px) { .ask-fab { display: flex; } }
.ask-fab.is-away { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.ask-fab__btn { all: unset; box-sizing: border-box; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ink-900); color: var(--c-white); box-shadow: 0 6px 20px rgba(31, 32, 35, .22); }
.ask-fab__btn:hover { background: #000; }
.ask-fab__btn:focus-visible { outline: 2px solid var(--c-ink-900); outline-offset: 3px; }
.ask-fab__card { order: -1; width: 232px; padding: 16px; display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--c-white); border: var(--hair) solid var(--c-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(31, 32, 35, .16); }
.ask-fab__card[hidden] { display: none; }
.ask-fab__card b { font-weight: 600; }
.ask-fab__card small { color: var(--c-ink-700); font-size: 12.5px; line-height: 1.5; }
.ask-fab__card a { color: var(--c-ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.is-webview .ask-fab { display: none; }
@media print { .ask-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .ask-fab { transition: none; } }

/* 앱 받기 — 홈 9막과 같은 규격: App Store 공식 배지(높이 48) + Android 준비 중 */
.pg-cta--stores { align-items: center; gap: var(--s-4); }
.pg-cta--stores img { height: 48px; width: auto; display: block; }
.pg-soon { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 8px; border: var(--hair) dashed var(--c-line-strong, var(--c-line)); color: var(--c-ink-700); font: 500 15px/1 var(--f-sans); white-space: nowrap; }
@media (max-width: 859px) { .pg-cta--stores { gap: var(--s-3); } .pg-cta--stores img { height: 44px; } .pg-soon { height: 44px; padding: 0 16px; font-size: 14px; } }