/* CALLCENTER 고객센터 페이지 공용 스타일 · v0.1 · 2026-10-19
   목적: 번호를 찾아온 사람이 3초 안에 걸 수 있게. 모바일 우선, 자동광고 방해 없음(div/ul로 본문 가두지 않음). */

:root{
  --bg:#ffffff; --fg:#1b1f24; --muted:#5b6470; --line:#e5e8ec;
  --brand:#0b5fff; --brand-dk:#0747c2; --brand-soft:#eef4ff;
  --ok:#0f8a4a; --ok-soft:#e8f6ee; --warn:#b35c00; --warn-soft:#fff4e5;
  --mark:#fff2a8; --radius:12px; --max:760px;
  font-size:17px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#111418; --fg:#e8ebef; --muted:#9aa4b1; --line:#2a2f36;
         --brand:#7aa7ff; --brand-dk:#9dbdff; --brand-soft:#1a2440;
         --ok:#5fd08d; --ok-soft:#14301f; --warn:#f0a553; --warn-soft:#3a2810; --mark:#5b4f00; }
}

html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  line-height:1.8; word-break:keep-all; }
.cs-page{ max-width:var(--max); margin:0 auto; padding:20px 16px 56px; }

h1{ font-size:1.6rem; line-height:1.3; margin:8px 0 14px; letter-spacing:-.01em; }
h2{ font-size:1.28rem; line-height:1.35; margin:44px 0 16px; padding:0 0 0 14px; border:0; border-left:5px solid var(--brand); letter-spacing:-.01em; font-weight:800; position:relative; }
h2::after{ content:""; display:block; height:1px; background:var(--line); margin:10px 0 0 -14px; }
h3{ font-size:1.05rem; margin:24px 0 8px; font-weight:700; }
p{ margin:0 0 20px; }
.intro p, .intro{ margin-bottom:0; }
.intro + .intro{ margin-top:10px; }
a{ color:var(--brand); text-underline-offset:3px; }
a:hover{ color:var(--brand-dk); }
mark{ background:var(--mark); color:inherit; padding:0 .2em; border-radius:4px; font-weight:700; }
strong{ font-weight:700; }

/* 인트로: 첫 문단이 답이다 */
.intro{ font-size:1.06rem; padding:14px 16px; margin-bottom:14px; background:var(--brand-soft); border-left:4px solid var(--brand); border-radius:0 var(--radius) var(--radius) 0; }

/* 번호 카드 */
.quick-card{ margin:20px 0 8px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.quick-card h2{ margin:0 0 12px; padding:0; border:0; font-size:1.05rem; color:var(--muted); font-weight:600; }
.quick-card h2::after, .related h2::after{ display:none; }
.num-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.num-table th{ text-align:left; font-weight:600; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); font-size:.85rem; }
.num-table td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.num-table tr:last-child td{ border-bottom:0; }
.num-table td:nth-child(2) a{ font-weight:800; font-size:1.08rem; font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
.num-table tr.main td{ background:var(--brand-soft); }
.num-table tr.main td:first-child{ border-radius:8px 0 0 8px; }
.num-table tr.main td:last-child{ border-radius:0 8px 8px 0; }
@media (max-width:560px){
  .num-table thead{ display:none; }
  .num-table tr{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 6px; border-bottom:1px solid var(--line); }
  .num-table td{ display:block; padding:0; border:0; }
  .num-table td:first-child{ grid-column:1/3; font-size:.9rem; color:var(--muted); }
  .num-table td:nth-child(2){ grid-column:1; }
  .num-table td:nth-child(3), .num-table td:nth-child(4){ grid-column:2; text-align:right; font-size:.9rem; }
  .num-table tr.main td{ background:transparent; }
  .num-table tr.main{ background:var(--brand-soft); border-radius:8px; }
}

/* 버튼 */
.actions{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 8px; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); font:inherit; font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer; }
.btn:hover{ border-color:var(--brand); color:var(--brand); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-dk); color:#fff; }
.btn.primary::before{ content:"📞"; }
.btn.fav{ margin-left:auto; }
.btn.fav.on{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.verified{ margin:6px 0 0; font-size:.84rem; color:var(--muted); }
.verified::before{ content:"✓ "; color:var(--ok); font-weight:700; }

/* 본문 리스트 */
.steps{ counter-reset:s; list-style:none; padding:0; margin:0 0 14px; }
.steps li{ counter-increment:s; position:relative; padding:8px 0 8px 42px; border-bottom:1px dashed var(--line); }
.steps li::before{ content:counter(s); position:absolute; left:0; top:8px; width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800; font-size:.9rem; display:grid; place-items:center; }
.guide{ list-style:none; padding:0; margin:0 0 14px; }
.guide li{ padding:12px 14px; margin:0 0 10px; line-height:1.7; border:1px solid var(--line); border-radius:10px; }
.guide li strong{ display:block; margin-bottom:2px; color:var(--brand-dk); }

/* FAQ */
.faq{ margin:0 0 14px; }
.faq dt{ font-weight:700; margin:16px 0 4px; padding-left:26px; position:relative; }
.faq dt::before{ content:"Q"; position:absolute; left:0; top:0; color:var(--brand); font-weight:900; }
.faq dd{ margin:0 0 6px 26px; color:var(--fg); }

/* 관련·출처 */
.related{ margin-top:28px; padding:14px 16px; background:var(--brand-soft); border-radius:var(--radius); }
.related h2{ margin:0 0 8px; padding:0; border:0; font-size:1.05rem; }
.related p{ margin:0; }
.source{ margin-top:28px; padding-top:14px; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted); }

/* 모바일 하단 고정 전화 바 */
.callbar{ position:fixed; left:0; right:0; bottom:0; display:none; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(0,0,0,.08); z-index:50; }
.callbar a{ flex:1; justify-content:center; }
@media (max-width:640px){ .callbar{ display:flex; } .cs-page{ padding-bottom:96px; } }

@media print{ .actions,.callbar,.btn.fav{ display:none!important; } .quick-card{ box-shadow:none; } }

/* v0.2 공통 헤더·푸터·홈·허브 (2026-10-20) */
.site-hd{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.site-hd .in{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.logo{font-weight:900;text-decoration:none;color:var(--fg);letter-spacing:-.02em}.logo b{color:var(--brand)}
.site-hd nav{margin-left:auto;display:flex;gap:12px;font-size:.88rem}.site-hd nav a{color:var(--muted);text-decoration:none}
.search{position:relative;margin:6px 0 4px}.search input{width:100%;box-sizing:border-box;font:inherit;font-size:1.05rem;padding:14px 16px 14px 44px;border:2px solid var(--brand);border-radius:999px;background:var(--bg);color:var(--fg)}
.search::before{content:"🔍";position:absolute;left:16px;top:14px}
.sugg{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);display:none}.sugg.on{display:block}
.sugg li a{display:flex;justify-content:space-between;padding:10px 16px;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line)}.sugg li a span{color:var(--muted);font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}.chips a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--fg);font-size:.92rem}.chips a:hover{border-color:var(--brand);color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 10px}@media(min-width:600px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{display:block;padding:14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--fg);line-height:1.4}.card:hover{border-color:var(--brand)}
.card .ic{font-size:1.5rem;display:block;margin-bottom:6px}.card b{display:block}.card small{color:var(--muted);font-size:.82rem}
.olist{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 10px;padding:0;list-style:none}@media(min-width:600px){.olist{grid-template-columns:1fr 1fr;column-gap:20px}}
.olist li a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg)}
.olist li a::after{content:"›";color:var(--muted);font-size:1.3rem}.olist .tag{font-size:.75rem;color:var(--ok);background:var(--ok-soft);padding:1px 7px;border-radius:999px;margin-left:6px}
.banners{display:grid;gap:10px;grid-template-columns:1fr;margin:0 0 10px}@media(min-width:600px){.banners{grid-template-columns:repeat(3,1fr)}}
.banners a{display:block;padding:16px;border-radius:var(--radius);background:var(--brand-soft);text-decoration:none;color:var(--fg);line-height:1.45}.banners b{display:block;color:var(--brand-dk);font-size:1.05rem}.banners small{color:var(--muted)}
.mine{padding:12px 14px;border:1px dashed var(--warn);border-radius:var(--radius);background:var(--warn-soft);margin:16px 0}.mine h2{margin:0 0 6px;padding:0;border:0;font-size:1rem}.mine h2::after{display:none}

.crumb{font-size:.85rem;color:var(--muted);margin:4px 0}.crumb a{color:var(--muted)}
.site-ft{border-top:1px solid var(--line);margin-top:30px;padding:20px 16px 40px;font-size:.84rem;color:var(--muted)}.site-ft .in{max-width:var(--max);margin:0 auto}.site-ft a{color:var(--muted);margin-right:12px}
.cs-page input,.cs-page select,.cs-page textarea{box-sizing:border-box;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}.btn.primary.noic::before{content:none}