/* 동물병원비교닷컴 (petbi.kr) — 지면 공용 스타일
   ★ 요양원비교닷컴과 **다른 결**로 간다(사장님 지시 2026-09-03).
     그쪽: 아이보리 바탕 · 청록 · 둥근 카드 · 사진 위 떠 있는 카드 · 좌우 분할 히어로.
     이쪽: 쿨그레이 바탕 · 감청(네이비) + 앰버 · 각진 테두리 · 전폭 밴드 · 가운데 정렬 히어로.
   ★ 다크모드는 두지 않는다. 브라우저 설정에 끌려가 팔레트가 뒤집히는 사고를 함대에서 겪었다. */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface2:#EEF2F6; --ground2:#E4EAF0;
  --ink:#0F1720; --ink2:#3B4855; --muted:#6B7A89;
  --line:#DDE4EB; --line2:#EAEFF4;
  --brand:#123A63; --brand-d:#0A2743; --brand-soft:#E7EEF6; --brand-line:#B9CCE1;
  --accent:#E8951C; --accent-soft:#FDF1DC; --accent-d:#B96F08;
  --ok:#12805C; --hi:#C8452B;
  --r:10px; --r-sm:6px;
  --shadow-s:0 1px 2px rgba(15,23,32,.04);
  --shadow:0 2px 6px rgba(15,23,32,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;
  font-family:Pretendard,'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  word-break:keep-all}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.34;margin:0;letter-spacing:-.025em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
main{min-height:60vh;padding-bottom:64px}
.num,.n{font-variant-numeric:tabular-nums}

/* ── 상단바 — 로고·내비가 왼쪽, 검색과 행동 버튼이 오른쪽 ────────── */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.tb-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--brand);letter-spacing:-.035em;flex:0 0 auto}
.logo .lg-ic{width:26px;height:26px;color:var(--accent)}
.logo b{font-weight:800}
.logo span{color:var(--muted);font-weight:700}
.tb-nav{display:flex;gap:20px;font-size:15px;font-weight:600;color:var(--ink2)}
.tb-nav a{padding:4px 0;border-bottom:2px solid transparent}
.tb-nav a:hover{color:var(--brand);border-bottom-color:var(--accent)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0}
.tb-search{display:flex;min-width:0}
.tb-search input{width:190px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--surface);font-size:14.5px;font-family:inherit}
.tb-search input:focus{outline:none;border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-soft)}
.tb-search button{padding:8px 13px;border:1px solid var(--brand);background:var(--brand);color:#fff;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.tb-cta{padding:8px 14px;border-radius:var(--r-sm);background:var(--accent);color:#111;font-weight:800;font-size:14px;white-space:nowrap}
.tb-cta:hover{background:var(--accent-d);color:#fff}
@media (max-width:940px){
  .tb-in{height:auto;padding:10px 20px;flex-wrap:wrap;gap:10px 16px}
  .tb-nav{order:3;flex-basis:100%;overflow-x:auto;white-space:nowrap;gap:16px;font-size:14px;padding-bottom:2px}
  .tb-right{gap:7px}
  .tb-search input{width:130px}
}

/* ── 히어로 — 감청 밴드. 사진은 별도 밴드가 아니라 **배경으로 은은하게** 깐다.
   (전폭 사진 밴드로 따로 두니 히어로와 따로 놀았다 — 사장님 지적 2026-09-03) ── */
.hero{position:relative;background:#123A63;color:#fff;border-bottom:3px solid var(--accent);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background-image:image-set(url('/static/img/hero.webp') type('image/webp'), url('/static/img/hero.jpg') type('image/jpeg'));
  background-image:-webkit-image-set(url('/static/img/hero.webp') type('image/webp'), url('/static/img/hero.jpg') type('image/jpeg'));
  background-size:cover;background-position:64% 38%;opacity:.38;filter:saturate(.85)}
/* 사진 위에 감청 장막을 한 겹 더 덮어 글자 대비를 지킨다(흰 글자 기준 4.5:1 이상) */
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,58,99,.62) 0%,rgba(12,43,75,.82) 52%,rgba(10,39,67,.93) 100%)}
.hero-in{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:76px 20px 64px;text-align:center}
@media (max-width:620px){.hero-in{padding:52px 20px 44px}.hero::before{background-position:62% 42%;opacity:.26}}
.hero .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:#F7D9A6;background:rgba(232,149,28,.18);border:1px solid rgba(232,149,28,.45);
  padding:5px 13px;border-radius:999px;margin-bottom:20px}
.hero h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.24;color:#fff;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal;color:var(--accent);border-bottom:4px solid rgba(232,149,28,.5);padding-bottom:2px}
.hero p.sub{margin:16px auto 26px;font-size:17px;color:#D3E0EC;max-width:52ch;line-height:1.7}
.hero-search{display:flex;gap:0;max-width:min(560px,100%);margin:0 auto}
.hero-search input{flex:1 1 auto;min-width:0;padding:15px 18px;border:2px solid #fff;border-right:0;
  border-radius:var(--r) 0 0 var(--r);font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.hero-search input:focus{outline:none}
.hero-search button{padding:15px 26px;border:2px solid var(--accent);background:var(--accent);color:#10202F;
  border-radius:0 var(--r) var(--r) 0;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.hero-search button:hover{background:#F5A93A;border-color:#F5A93A}
.hero-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.hero-chips .lb{font-size:13.5px;color:#A8BED2;align-self:center;margin-right:2px}
.hero-chips a{font-size:14px;padding:6px 13px;border-radius:999px;color:#E4EDF6;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.10);font-weight:600}
.hero-chips a:hover{background:#fff;color:var(--brand);border-color:#fff}
/* 히어로 하단 신뢰 지표 한 줄 — 전폭 사진 밴드에 있던 문장을 여기로 옮겼다 */
.hero-trust{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  font-size:14px;color:#C6D6E5}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.hero-trust i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* 히어로 아래 가격 스트립 — 이 사이트가 다루는 숫자를 첫 화면에서 바로 보여준다 */
.pstrip{background:var(--brand-d);border-bottom:1px solid rgba(255,255,255,.08)}
.pstrip-in{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pstrip a{padding:16px 14px;border-right:1px solid rgba(255,255,255,.10);display:block;text-align:center}
.pstrip a:last-child{border-right:0}
.pstrip a:hover{background:rgba(255,255,255,.06)}
.pstrip .k{font-size:12.5px;color:#9FB6CC;font-weight:600}
.pstrip .v{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.pstrip .s{font-size:11.5px;color:#7E97AF;margin-top:2px}
@media (max-width:620px){
  .pstrip-in{grid-template-columns:repeat(2,1fr)}
  .pstrip a{border-bottom:1px solid rgba(255,255,255,.10)}
}

/* ── 섹션 ───────────────────────────────────────────── */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:52px 0 4px}
.sec-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em;padding-left:12px;border-left:4px solid var(--accent)}
.sec-head .more{font-size:14px;font-weight:700;color:var(--brand)}
.sec-head .more:hover{color:var(--accent-d)}
.lede{color:var(--ink2);margin:10px 0 18px;font-size:16px;line-height:1.7}
.ph{padding:6px 0 2px}
.ph h1{font-size:29px;letter-spacing:-.035em;font-weight:800}
.ph p{margin:10px 0 0;color:var(--ink2);font-size:16px}
@media (max-width:640px){.ph h1{font-size:23px}}
h1{font-size:29px;letter-spacing:-.035em;font-weight:800}
.sec{margin:34px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-h h2{font-size:21px;font-weight:800;letter-spacing:-.03em;padding-left:12px;border-left:4px solid var(--accent)}
.sec-h .more{font-size:14px;font-weight:700;color:var(--brand)}
.sec-sub{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.crumb{font-size:13px;color:var(--muted);padding:18px 0 6px;display:flex;gap:6px;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.crumb span{color:var(--line)}

/* ── 숫자 요약 — 얇은 구분선의 가로 배열 ──────────────── */
.stats{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);margin:18px 0 6px;overflow:hidden}
.stats div{flex:1 1 150px;padding:15px 18px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats .k{font-size:12.5px;color:var(--muted);font-weight:600}
.stats .v{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.35;color:var(--brand);font-variant-numeric:tabular-nums}
.stats div.acc .v{color:var(--accent-d)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.tile{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tile .k{font-size:12.5px;color:var(--muted);font-weight:600}
.tile .v{font-size:21px;font-weight:800;color:var(--brand);margin-top:3px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ── 3단 설명 — 카드가 아니라 번호를 크게 쓴 가로 목록 ── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.step-card{padding:22px 22px 20px;border-right:1px solid var(--line)}
.step-card:last-child{border-right:0}
@media (max-width:820px){.step-card{border-right:0;border-bottom:1px solid var(--line)}.step-card:last-child{border-bottom:0}}
.step-card .num{font-size:13px;font-weight:800;color:var(--accent-d);letter-spacing:.08em;margin-bottom:10px}
.step-card h3{margin:0 0 7px;font-size:17px;letter-spacing:-.025em}
.step-card p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.7}

/* ── 격자 카드 — 각지고 테두리 위주 ─────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:10px;margin-top:14px}
.gcell{display:block;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.gcell:hover{border-color:var(--brand);background:#fff}
.gcell .t{font-weight:700;font-size:15.5px}
.gcell .d{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:3px}
.gcell .big{font-size:23px;font-weight:800;color:var(--brand);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.gcell.photo-card{padding:0;overflow:hidden;border-radius:var(--r)}
.photo-card picture{display:block;line-height:0}
.photo-card img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--ground2)}
.pc-body{padding:14px 16px 16px}
.pc-body .t{font-weight:700;font-size:16px;line-height:1.45}
.pc-body .d{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:6px}

/* ── 표 ─────────────────────────────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
table.t th,table.t td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap}
table.t th{background:var(--brand);color:#fff;font-weight:700;font-size:13px;position:sticky;top:0;border-bottom:0}
table.t th:first-child,table.t td:first-child{text-align:left;white-space:normal;min-width:150px}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--surface2)}
table.t td.num{font-variant-numeric:tabular-nums}
table.t .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:500}
.cat-row td{background:var(--surface2);font-weight:800;color:var(--brand);text-align:left;font-size:13px;letter-spacing:.02em}
.up{color:var(--hi);font-weight:700}
.down{color:var(--ok);font-weight:700}
.flat{color:var(--muted)}
.nodata{color:var(--muted);font-size:14px}

/* ── 배지 ───────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12.5px;font-weight:700;border:1px solid}
.badge.b-low{background:#E8F5EF;border-color:#BEE0D0;color:var(--ok)}
.badge.b-high{background:#FBEAE5;border-color:#F0C7BB;color:var(--hi)}
.badge.b-mid{background:var(--surface2);border-color:var(--line);color:var(--muted)}
.badge.b-brand{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}

/* ── 목록(병원) ─────────────────────────────────────── */
.list{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.item{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-bottom:1px solid var(--line2)}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface2)}
.item .nm{font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.item .nm:hover{color:var(--brand)}
.item .ad{color:var(--muted);font-size:13.5px;margin-top:3px}
.item .meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px}
.item .rt{margin-left:auto;text-align:right;flex:0 0 auto}
.tel{display:inline-block;padding:7px 13px;border:1px solid var(--brand-line);border-radius:var(--r-sm);
  color:var(--brand);font-weight:700;font-size:14px;background:var(--brand-soft);font-variant-numeric:tabular-nums}
.tel:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
@media (max-width:640px){.item{flex-wrap:wrap}.item .rt{margin-left:0;width:100%}}

/* ── 알림 박스 ──────────────────────────────────────── */
.note{padding:14px 16px;border-radius:var(--r-sm);background:var(--accent-soft);
  border:1px solid #F2DFBB;border-left:4px solid var(--accent);color:#6B4A11;font-size:14.5px;margin:18px 0}
.note.brand{background:var(--brand-soft);border-color:var(--brand-line);border-left-color:var(--brand);color:var(--brand-d)}
.note b{font-weight:700}

/* ── 버튼·폼 ────────────────────────────────────────── */
.btn{display:inline-block;padding:11px 18px;border-radius:var(--r-sm);background:var(--brand);color:#fff;
  font-weight:700;border:1px solid var(--brand);cursor:pointer;font-size:15px;font-family:inherit}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.ghost{background:var(--surface);color:var(--brand);border-color:var(--brand-line)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.acc{background:var(--accent);border-color:var(--accent);color:#10202F}
.btn.acc:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.form{display:grid;gap:12px;max-width:560px}
.form label{font-weight:600;font-size:14.5px;display:block;margin-bottom:5px;color:var(--ink2)}
.form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:15.5px;font-family:inherit;background:var(--surface)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brand)}
.form textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chip{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:14px;font-weight:600;color:var(--ink2)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
select{max-width:100%}

/* ── 페이지네이션 ───────────────────────────────────── */
.pager{display:flex;gap:5px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.pager a,.pager span{padding:8px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── 지역 배너 · CTA 밴드 ───────────────────────────── */
.banner{position:relative;border-radius:var(--r);overflow:hidden;margin:14px 0 4px;line-height:0;border:1px solid var(--line)}
.banner img{width:100%;height:auto;display:block;aspect-ratio:1600/360;object-fit:cover}
.banner-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 min(6%,40px);line-height:1.6;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.05) 76%)}
.banner-txt b{font-size:clamp(17px,2.2vw,21px);letter-spacing:-.03em;color:var(--brand)}
.banner-txt span{font-size:clamp(13px,1.5vw,14.5px);color:var(--ink2);max-width:46ch}
@media (max-width:620px){
  .banner img{aspect-ratio:16/9}
  .banner-txt{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 58%,rgba(255,255,255,.45) 100%)}
}
/* CTA — 사진 위 그라디언트가 아니라 앰버 밴드. 그쪽 사이트와 가장 크게 갈리는 지점이다. */
.cta-banner{display:flex;align-items:center;gap:26px;margin:40px 0 6px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid #F0DCB6;border-left:5px solid var(--accent);
  padding:24px 28px;line-height:1.6}
.cta-banner picture{flex:0 0 210px;line-height:0;border-radius:var(--r-sm);overflow:hidden}
.cta-banner img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.cta-txt{display:flex;flex-direction:column;gap:6px}
.cta-txt b{font-size:clamp(18px,2.2vw,22px);color:var(--brand-d);letter-spacing:-.03em}
.cta-txt span{font-size:15px;color:#6B4A11;max-width:52ch}
.cta-txt em{font-style:normal;font-weight:800;font-size:15px;color:#10202F;background:var(--accent);
  padding:9px 18px;border-radius:var(--r-sm);align-self:flex-start;margin-top:6px}
.cta-banner:hover .cta-txt em{background:var(--accent-d);color:#fff}
@media (max-width:720px){
  .cta-banner{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .cta-banner picture{flex:none}
}

/* ── 지도 ───────────────────────────────────────────── */
#map{width:100%;height:440px;border-radius:var(--r);border:1px solid var(--line);background:var(--ground2)}
.map-fallback{padding:16px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface);color:var(--muted);font-size:14.5px}

/* ── 본문(가이드) ───────────────────────────────────── */
.prose{font-size:16.5px;line-height:1.85;color:var(--ink2)}
.prose p{margin:0 0 16px}
.prose p.g-intro{font-size:17.5px;color:var(--ink);line-height:1.8}
.prose h2{font-size:21px;margin:40px 0 12px;color:var(--ink);letter-spacing:-.03em;scroll-margin-top:80px;
  padding-left:12px;border-left:4px solid var(--accent)}
.prose h3{font-size:18px;margin:26px 0 8px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:6px 0}
.prose blockquote{margin:18px 0;padding:12px 16px;border-left:4px solid var(--brand-line);
  background:var(--brand-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--brand-d)}
.prose .gtable{margin:8px 0 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.prose .gtable table{margin:0;width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto;white-space:nowrap}
.prose .gtable caption{caption-side:top;text-align:left;padding:14px 18px 10px;font-weight:800;font-size:15px;color:var(--brand)}
.prose .gtable th,.prose .gtable td{padding:10px 18px;border:0;border-bottom:1px solid var(--line2);text-align:left}
.prose .gtable thead th{background:var(--surface2);color:var(--brand);font-size:12.5px;font-weight:700}
.prose .gtable tbody tr:last-child td{border-bottom:0}
.prose .gtable td{font-variant-numeric:tabular-nums}
.prose .gtable figcaption{padding:12px 18px 14px;font-size:12.5px;color:var(--muted);line-height:1.65;
  background:var(--surface2);border-top:1px solid var(--line2);white-space:normal}
.prose .g-links{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r);padding:16px 18px;margin:30px 0 0}
.prose .g-links b{display:block;font-size:14px;color:var(--brand);margin-bottom:9px}
.prose .g-links ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose .g-links a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.toc{padding:16px 20px;border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--surface);margin:0 0 26px}
.toc b{display:block;margin-bottom:8px;font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.toc ol{margin:0;padding-left:20px;font-size:15px;color:var(--ink2)}
.toc a:hover{color:var(--brand)}
.faq{margin-top:32px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:0;margin-bottom:8px;overflow:hidden}
.faq summary{font-weight:700;cursor:pointer;font-size:16px;padding:14px 18px;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent-d);font-size:19px;font-weight:800;flex:none}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details[open] summary::after{content:'−'}
.faq p{margin:0;padding:14px 18px;color:var(--ink2);font-size:15.5px;line-height:1.8}

/* ── 계산기 ─────────────────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:start}
@media (max-width:860px){.calc-grid{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.calc-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}
.calc-row:last-child{border-bottom:0}
.calc-row[hidden]{display:none}
.calc-row .nm{flex:1;font-size:15px}
.calc-row .pr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;min-width:82px;text-align:right}
.calc-row input[type=number]{width:64px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  text-align:center;font-family:inherit;font-size:15px}
.calc-total{position:sticky;top:78px;border-top:3px solid var(--accent)}
.calc-total .big{font-size:33px;font-weight:800;color:var(--brand);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{padding:8px 15px;border:0;background:var(--surface);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink2)}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}

/* ── 푸터 ───────────────────────────────────────────── */
footer.site{border-top:3px solid var(--accent);background:var(--brand-d);color:#B9CCE1;padding:36px 0 42px;margin-top:48px}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
.ft-logo{font-weight:800;font-size:18px;color:#fff;letter-spacing:-.035em}
.ft-logo b{color:var(--accent)}
.ft-desc{color:#93AAC2;font-size:14px;margin:8px 0 0;max-width:380px;line-height:1.7}
footer.site h4{font-size:13px;color:#fff;margin-bottom:10px;letter-spacing:.02em}
footer.site a{display:block;font-size:14px;color:#B9CCE1;padding:3px 0}
footer.site a:hover{color:var(--accent)}
.ft-bottom{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#7E97AF}
@media (max-width:760px){.ft-cols{grid-template-columns:1fr 1fr}.ft-cols>div:first-child{grid-column:1/-1}}