/* ================================================================
   common.css — 사이트 공통 스타일
   :root variables, reset, typography, panic-bar, page-nav,
   mode-toggle, emergency-bar, page-header, print base, btn-top
   ================================================================ */

/* ── CSS Variables ───────────────────────────────────────────── */
:root {
  --bg:#f5f3ee; --bg2:#edeae2; --surface:#ffffff; --surface2:#faf8f4;
  --navy:#1F3864; --navy-mid:#2a4a80;
  --gold:#b8860b; --gold-light:#d4a017;
  --text:#1a1a2e; --text-sub:#4a5568; --text-muted:#8a95a3;
  --border:#ddd8c8; --shadow:0 2px 16px rgba(30,40,80,.08);
  --panic-bg:#1F3864; --panic-fg:rgba(255,255,255,.5);
  --emergency-bg:#7f1d1d;
  --counter-bg:rgba(255,255,255,.12);
}
[data-theme="dark"] {
  --bg:#0d1b35; --bg2:#0a1528; --surface:#faf8f3; --surface2:#f0ece2;
  --navy:#1F3864; --navy-mid:#162544;
  --gold:#c9a84c; --gold-light:#e8c97a;
  --text:#1a1a2e; --text-sub:#4a5568; --text-muted:#8a95a3;
  --border:#ddd8c8; --shadow:0 4px 24px rgba(0,0,0,.25);
  --panic-bg:#162544; --panic-fg:rgba(255,255,255,.45);
  --counter-bg:rgba(255,255,255,.08);
}

/* ── Reset & Base ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans KR',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.75;
  transition:background .25s,color .25s;
}

/* ── Panic 바 ────────────────────────────────────────────────── */
.panic-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:var(--panic-bg);
  border-bottom:1px solid rgba(201,168,76,.15);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:48px;gap:12px;
  transition:background .25s;
}
.panic-bar-left{display:flex;align-items:center;gap:10px}
.panic-bar-right{display:flex;align-items:center;gap:8px}
.site-id{
  font-size:.7rem;font-weight:600;
  color:var(--panic-fg);letter-spacing:.1em;
}

/* ── 페이지 내비게이션 ───────────────────────────────────────── */
.page-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.page-nav-link{
  font-size:.68rem;font-weight:500;
  color:rgba(255,255,255,.55);text-decoration:none;
  padding:3px 10px;border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  transition:all .18s;white-space:nowrap;
}
.page-nav-link:hover{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.page-nav-link.current{color:var(--gold-light);border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.1)}
@media(max-width:560px){.page-nav{display:none}}

/* ── 모드 토글 / 패닉 버튼 ──────────────────────────────────── */
.mode-toggle{
  font-size:.75rem;padding:4px 10px;
  background:var(--counter-bg);
  border:1px solid rgba(255,255,255,.12);border-radius:4px;
  cursor:pointer;color:rgba(255,255,255,.6);
  transition:all .2s;
}
.mode-toggle:hover{background:rgba(255,255,255,.18);color:#fff}
.panic-btn{
  font-size:.7rem;font-weight:600;
  background:rgba(220,38,38,.15);color:rgba(255,255,255,.6);
  border:1px solid rgba(220,38,38,.3);border-radius:4px;
  padding:4px 12px;cursor:pointer;letter-spacing:.04em;transition:all .2s;
}
.panic-btn:hover{background:#dc2626;color:#fff;border-color:#dc2626}

/* ── 공통 페이지 헤더 ────────────────────────────────────────── */
.page-header{
  margin-top:48px;
  background:linear-gradient(150deg,#1F3864 0%,#2a4a80 100%);
  padding:40px 24px 32px;text-align:center;
  position:relative;overflow:hidden;
}
[data-theme="dark"] .page-header{background:linear-gradient(160deg,#162544 0%,#0d1b35 100%)}
.page-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(201,168,76,.08) 0%,transparent 70%);
  pointer-events:none;
}
.page-eyebrow{
  font-size:.68rem;font-weight:500;letter-spacing:.18em;
  color:var(--gold-light);text-transform:uppercase;margin-bottom:10px;opacity:.85;
}
.page-title{
  font-family:'Noto Serif KR',serif;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:700;
  color:#fff;line-height:1.35;margin-bottom:8px;
}
.page-title span{color:var(--gold-light)}
.page-desc{
  font-size:.83rem;color:rgba(255,255,255,.5);
  max-width:540px;margin:0 auto;line-height:1.7;
}
.header-meta{
  margin-top:18px;display:flex;align-items:center;
  justify-content:center;gap:10px;flex-wrap:wrap;
}
.header-badge{
  font-size:.67rem;
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);
  color:var(--gold-light);border-radius:20px;padding:4px 13px;letter-spacing:.05em;
}
.header-nav{
  margin-top:16px;display:flex;align-items:center;
  justify-content:center;gap:10px;flex-wrap:wrap;
}
.nav-link{
  font-size:.76rem;font-weight:600;
  color:rgba(255,255,255,.7);text-decoration:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;padding:6px 16px;transition:all .2s;letter-spacing:.02em;
}
.nav-link:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.4)}
.notice-box{
  max-width:680px;margin:16px auto 0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:12px 18px;
  font-size:.76rem;color:rgba(255,255,255,.55);line-height:1.7;text-align:left;
}
.notice-box strong{color:rgba(255,255,255,.75)}

/* ── 긴급 상담 바 ────────────────────────────────────────────── */
.emergency-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:var(--emergency-bg);
  border-top:1px solid rgba(255,255,255,.15);
  padding:7px 20px;
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;
}
.emergency-label{
  font-size:.7rem;font-weight:700;
  color:rgba(255,255,255,.7);letter-spacing:.05em;
}
.emergency-item{
  font-size:.72rem;font-weight:500;
  color:#fff;display:flex;align-items:center;gap:5px;
}
.emergency-item a{color:#fca5a5;font-weight:700;text-decoration:none}
.emergency-item a:hover{text-decoration:underline}
.emergency-close{
  position:absolute;right:12px;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.4);font-size:.9rem;padding:2px 4px;
}
.emergency-close:hover{color:#fff}

/* ── 맨 위로 버튼 ────────────────────────────────────────────── */
.btn-top{
  position:fixed;bottom:56px;left:18px;z-index:400;
  font-size:.8rem;font-weight:700;
  background:var(--navy);color:#fff;
  border:none;border-radius:50%;
  width:38px;height:38px;cursor:pointer;
  box-shadow:0 3px 12px rgba(31,56,100,.35);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .2s;
}
.btn-top.visible{opacity:1;pointer-events:auto}
.btn-top:hover{transform:translateY(-3px)}
[data-theme="dark"] .btn-top{background:var(--gold);color:var(--bg)}

/* ── A4 인쇄 버튼 ────────────────────────────────────────────── */
.btn-print{
  position:fixed;bottom:50px;right:18px;z-index:400;
  font-size:.7rem;font-weight:600;
  background:var(--navy);color:#fff;
  border:none;border-radius:20px;padding:7px 14px;
  cursor:pointer;box-shadow:0 3px 12px rgba(31,56,100,.3);
  transition:transform .15s,box-shadow .15s;
}
.btn-print:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(31,56,100,.4)}
[data-theme="dark"] .btn-print{background:var(--gold);color:var(--bg)}

/* ── 사이트 푸터 ─────────────────────────────────────────────── */
.site-footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:22px;text-align:center;
  font-size:.69rem;color:var(--text-muted);line-height:1.9;
  margin-bottom:44px;transition:background .25s;
}
[data-theme="dark"] .site-footer{background:var(--navy-mid)}

/* ── 검색 강조 (mark) ────────────────────────────────────────── */
mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
[data-theme="dark"] mark{background:#854d0e;color:#fef3c7}

/* ── 공통 인쇄 규칙 ──────────────────────────────────────────── */
@media print {
  .panic-bar,.search-section,.filter-bar,.sidebar,
  .btn-print,.action-toggle,.tag-list,.emergency-bar,
  .mode-toggle,.share-btn,.page-nav,.mobile-toc-btn,
  .mobile-toc-overlay,.btn-top,.step-indicator,
  .toc-sidebar,.btn-reset,.btn-share,.progress-wrap,
  .result-wrap{display:none!important}
  body{background:#fff;color:#000;font-size:10.5pt}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ccc;margin-bottom:10pt}
  @page{margin:2cm;size:A4}
}