/* 요양지도 — 12장 디자인 브리프
   "새벽 두 시, 병원 대기실 의자에서, 지친 50대가 한 손으로 보는 화면"
   본문 17px 이상 / 줄간격 1.7 이상 / 대비비 4.5:1 이상 / 터치영역 44px 이상
   팝업·자동재생·가로스크롤 없음 */

:root{
  --ground:#F4F2EE;      /* 순백이 아닌, 아주 옅은 따뜻한 회색 */
  --surface:#FBFAF8;
  --surface-2:#EDEAE4;
  --ink:#23211E;         /* 짙은 먹색 */
  --ink-2:#55514A;
  --ink-3:#837E75;
  --rule:#D9D4CB;
  --rule-soft:#E6E2DA;
  --accent:#2E5A56;      /* 낮은 채도의 짙은 청록 */
  --accent-soft:#DCE7E5;
  --sand:#A8935F;
  --ad:#8A6420;          /* 광고 표시 전용색 — 다른 곳에 쓰지 않는다 */
  --ad-soft:#F3ECDD;

  --serif:"Gowun Batang","Apple SD Gothic Neo","Nanum Myeongjo",serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#191817; --surface:#211F1D; --surface-2:#2B2926;
    --ink:#EAE6DF; --ink-2:#B5AFA5; --ink-3:#878177;
    --rule:#3A3733; --rule-soft:#2F2C29;
    --accent:#7FB3AB; --accent-soft:#22332F;
    --sand:#BFA872; --ad:#C79A47; --ad-soft:#332A1A;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.1rem}
img{max-width:100%}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}

/* ── 상단 ───────────────────────────────── */
header.site{border-bottom:1px solid var(--rule);background:var(--surface)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
     min-height:56px;padding:.5rem 0}
.logo{font-family:var(--serif);font-size:1.35rem;font-weight:700;
      color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--accent)}
.bar nav{display:flex;gap:.2rem}
.bar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;
           font-size:.95rem;text-decoration:none;color:var(--ink-2);border-radius:2px}
.bar nav a:hover{background:var(--surface-2);color:var(--ink)}

/* ── 여정 지도 (12-4 시그니처) ───────────── */
.journey{background:var(--surface-2);border-bottom:1px solid var(--rule)}
.journey ol{list-style:none;display:flex;margin:0;padding:.55rem 0;gap:0;
            overflow-x:auto;scrollbar-width:none}
.journey ol::-webkit-scrollbar{display:none}
.journey li{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
            font-size:.86rem;color:var(--ink-3);white-space:nowrap}
.journey li+li::before{content:"";width:14px;height:1px;background:var(--rule);display:block}
.journey li.on{color:var(--accent);font-weight:600}
.journey li.on b{border-bottom:2px solid var(--accent);padding-bottom:2px;font-weight:600}

/* ── 기준일·출처 고정 (GEO) ───────────────── */
.stamp{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);
       padding:.6rem 0;border-bottom:1px solid var(--rule-soft);line-height:1.6}
.stamp a{color:var(--ink-3)}

main{padding:1.6rem 0 4rem}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.65rem,5.5vw,2.3rem);
   line-height:1.3;margin:0 0 .6rem;text-wrap:balance;letter-spacing:-.01em}
h2{font-family:var(--serif);font-weight:700;font-size:1.35rem;line-height:1.4;
   margin:2.4rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--rule)}
h3{font-size:1.05rem;font-weight:600;margin:1.6rem 0 .5rem}
p{margin:0 0 1rem}
.lede{color:var(--ink-2);font-size:1.05rem;margin-bottom:1.6rem}
ul.plain{list-style:none;padding:0;margin:0}

/* ── 버튼 ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;
     min-height:52px;padding:0 1.4rem;font-size:1.02rem;font-weight:600;
     font-family:var(--sans);background:var(--accent);color:#fff;
     border:none;border-radius:3px;text-decoration:none;cursor:pointer;width:100%}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

/* ── 카드형 큰 진입구 ─────────────────────── */
.entries{display:grid;gap:.9rem;margin:1.4rem 0 2rem}
.entry{display:block;background:var(--surface);border:1px solid var(--rule);
       padding:1.15rem 1.2rem;text-decoration:none;color:var(--ink);border-radius:3px}
.entry:hover{border-color:var(--accent)}
.entry b{display:block;font-size:1.12rem;font-weight:600;margin-bottom:.2rem}
.entry span{color:var(--ink-2);font-size:.94rem}

/* ── 목록 (카드 그리드 아님 — 12-3) ────────── */
.list{list-style:none;padding:0;margin:1.2rem 0 0;border-top:1px solid var(--rule)}
.list li{border-bottom:1px solid var(--rule-soft)}
.list a{display:flex;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;
        min-height:60px;padding:.85rem .2rem;text-decoration:none;color:var(--ink)}
.list a:hover{background:var(--surface)}
.list .nm{font-size:1.05rem;font-weight:500;flex:1 1 14rem;line-height:1.45}
.list .meta{font-size:.87rem;color:var(--ink-3);font-family:var(--mono);
            font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 필터 칩 ──────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 0}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
         font-size:.92rem;text-decoration:none;color:var(--ink-2);
         background:var(--surface);border:1px solid var(--rule);border-radius:2px}
.chips a.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.chips a .n{font-family:var(--mono);opacity:.75;margin-left:.4rem;font-size:.85rem}

/* ── 폼 ───────────────────────────────────── */
form.calc{background:var(--surface);border:1px solid var(--rule);
          padding:1.2rem;border-radius:3px;margin:1.2rem 0}
.field{margin-bottom:1.2rem}
.field label{display:block;font-weight:600;margin-bottom:.45rem;font-size:1rem}
.field .hint{font-size:.88rem;color:var(--ink-3);margin:-.25rem 0 .5rem;line-height:1.55}
select,input[type=number]{
  width:100%;min-height:52px;padding:0 .8rem;font-size:1.05rem;font-family:var(--sans);
  color:var(--ink);background:var(--ground);border:1.5px solid var(--rule);border-radius:3px}
.radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.45rem}
.radios label{display:flex;align-items:center;justify-content:center;min-height:52px;
              border:1.5px solid var(--rule);border-radius:3px;background:var(--ground);
              cursor:pointer;font-size:1rem;font-weight:500;margin:0}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios input:checked+span{color:#fff}
.radios label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.radios label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}

/* ── 결과 ─────────────────────────────────── */
.result{background:var(--surface);border:1px solid var(--rule);
        border-left:5px solid var(--accent);padding:1.3rem 1.2rem;margin:1.4rem 0}
.result .big{font-family:var(--mono);font-size:clamp(1.9rem,8vw,2.6rem);font-weight:500;
             color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.result .cap{font-size:.92rem;color:var(--ink-2);margin-top:.3rem}
.breakdown{list-style:none;padding:0;margin:1.2rem 0 0;border-top:1px solid var(--rule-soft)}
.breakdown li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
              border-bottom:1px solid var(--rule-soft);font-size:.97rem}
.breakdown .v{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown li.sum{font-weight:600;border-bottom:none;padding-top:.8rem}

/* ── 표 ───────────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);margin:1.1rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:22rem}
th,td{padding:.62rem .75rem;text-align:left;border-bottom:1px solid var(--rule-soft)}
thead th{background:var(--surface-2);font-size:.82rem;font-weight:600;
         color:var(--ink-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
          white-space:nowrap}

/* ── 안내 상자 ────────────────────────────── */
.note{border-left:3px solid var(--rule);padding:.1rem 0 .1rem 1rem;margin:1.2rem 0;
      color:var(--ink-2);font-size:.95rem}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--sand)}

/* ── 광고 지면 (5장·6장: "광고" 표시 필수) ── */
.adslot{border:1px dashed var(--ad);background:var(--ad-soft);padding:1rem 1.1rem;
        margin:1.6rem 0;border-radius:3px}
.adslot .tag{display:inline-block;font-family:var(--mono);font-size:.7rem;
             letter-spacing:.1em;color:var(--ad);border:1px solid var(--ad);
             padding:.05rem .4rem;margin-bottom:.5rem}
.adslot p{margin:0;color:var(--ink-2);font-size:.95rem}
.adslot .empty{color:var(--ink-3);font-size:.92rem}

/* ── 하단 ─────────────────────────────────── */
footer.site{border-top:1px solid var(--rule);background:var(--surface);
            padding:1.6rem 0 3rem;font-size:.88rem;color:var(--ink-3);line-height:1.8}
footer.site a{color:var(--ink-2)}
.crumb{font-size:.88rem;color:var(--ink-3);margin:0 0 .9rem}
.crumb a{color:var(--ink-3)}
.empty-state{background:var(--surface);border:1px solid var(--rule);
             padding:1.6rem 1.2rem;text-align:center;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 두괄식 답변 블록 (AI 인용은 페이지 앞부분에서 주로 나온다) ── */
.answer{
  background:var(--surface); border:1px solid var(--rule);
  border-left:5px solid var(--accent); padding:1.15rem 1.2rem; margin:1.2rem 0 1.6rem;
}
.answer p{margin:0 0 .6rem}
.answer p:last-child{margin-bottom:0}
.answer .answer-src{
  font-family:var(--mono); font-size:.76rem; color:var(--ink-3);
  line-height:1.65; margin-top:.7rem;
}
.answer code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:.05em .3em}

/* ── 질문·답 ─────────────────────────────── */
.qa{border-top:1px solid var(--rule-soft); padding-top:1rem; margin-top:1.2rem}
.qa h3{margin:0 0 .4rem; font-size:1.03rem}
.qa p{margin:0; color:var(--ink-2)}

footer.site .upd{
  font-family:var(--mono); font-size:.76rem; color:var(--ink-3); margin-top:1rem;
}