/* ===== 공용 디자인 시스템 (모든 계산기 공유) ===== */
:root{
  --bg:#f3f6f4; --surface:#ffffff; --surface-2:#f7faf8;
  --ink:#16211c; --muted:#5d6b64; --faint:#8a978f;
  --line:#e4eae7; --line-strong:#d3ddd8;
  --accent:#12936a; --accent-ink:#0c7150; --accent-soft:#dcf0e8;
  --principal:#9aa9a2; --tax:#d08a2a; --warn:#c0552a;
  --shadow:0 1px 2px rgba(16,40,30,.05), 0 10px 26px -14px rgba(16,40,30,.16);
  --radius:16px; --radius-sm:12px;
}
/* 다크 변수 (수동 선택 시) */
:root[data-theme="dark"]{
  --bg:#0e1512; --surface:#18211d; --surface-2:#141c18;
  --ink:#e9efec; --muted:#9daba4; --faint:#7c8a83;
  --line:#28322d; --line-strong:#37433c;
  --accent:#3cc290; --accent-ink:#57d0a3; --accent-soft:#123027;
  --principal:#5c6b64; --tax:#dca842; --warn:#e0805a;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.7);
}
/* 시스템 다크 (수동 선택 없을 때만 자동 적용) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#0e1512; --surface:#18211d; --surface-2:#141c18;
    --ink:#e9efec; --muted:#9daba4; --faint:#7c8a83;
    --line:#28322d; --line-strong:#37433c;
    --accent:#3cc290; --accent-ink:#57d0a3; --accent-soft:#123027;
    --principal:#5c6b64; --tax:#dca842; --warn:#e0805a;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.7);
  }
}
/* 다크모드 토글 버튼 */
.theme-toggle{background:none; border:none; cursor:pointer; font-size:1.15rem; line-height:1; padding:6px; border-radius:9px; transition:background .15s}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle.floating{position:fixed; top:14px; right:16px; z-index:60; width:42px; height:42px;
  background:var(--surface); border:1px solid var(--line); border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.15)}

/* 상단 네비게이션 바 (카테고리 드롭다운) */
.topnav{position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line)}
.topnav-inner{max-width:960px; margin:0 auto; display:flex; align-items:center; gap:6px; padding:8px 14px}
.nav-home{display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--accent-ink); white-space:nowrap; font-size:.95rem; flex-shrink:0}
.nav-logo{width:22px; height:22px; display:block}
.nav-cats{display:flex; flex-wrap:wrap; gap:2px; flex:1}
.nav-cat{position:relative}
.nav-cat-btn{display:inline-block; background:none; border:none; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600; color:var(--ink); text-decoration:none; padding:7px 9px; border-radius:8px; white-space:nowrap}
.nav-cat-btn:hover{background:var(--surface-2); color:var(--accent-ink)}
/* 계산기 이야기 — 오른쪽으로 분리 + 앞에 구분선(|) + 로고색(초록) */
.nav-story-wrap{margin-left:auto}
.nav-cat-btn.nav-story{position:relative; color:var(--accent-ink); font-weight:700; margin-left:14px}
.nav-cat-btn.nav-story::before{content:''; position:absolute; left:-7px; top:22%; bottom:22%; width:1px; background:var(--line)}
.nav-cat-btn.nav-story:hover{background:var(--surface-2); color:var(--accent-ink)}
.nav-drop{position:absolute; top:calc(100% + 4px); left:0; min-width:190px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; max-height:70vh; overflow-y:auto; z-index:60}
.nav-cat.open .nav-drop{display:block}
@media (hover:hover){ .nav-cat:hover .nav-drop{display:block} }
.nav-drop a{display:block; padding:9px 12px; border-radius:8px; font-size:.9rem; color:var(--ink); white-space:nowrap}
.nav-drop a:hover{background:var(--accent); color:#fff}
.topnav .theme-toggle{flex-shrink:0; margin-left:auto}
/* 모바일: 카테고리를 줄바꿈 대신 가로 스크롤(한 줄 유지). 드롭다운은 숨기고 탭하면 바로 해당 섹션으로 이동 */
@media (max-width:700px){
  .topnav-inner{gap:4px; padding:7px 10px}
  .nav-home{font-size:.88rem}
  .nav-cats{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav-cats::-webkit-scrollbar{display:none}
  .nav-cat-btn{font-size:.82rem; padding:7px 8px}
  .nav-drop{display:none !important}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:600px; margin:0 auto; padding:0 18px 60px}
.wrap.hub{max-width:960px}   /* 홈(카드 목록)은 넓게 — 상단바 폭과 맞춤 */

/* 상단바 */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line); padding:12px 18px; margin-bottom:22px}
.topbar-inner{max-width:600px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.back{display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--muted); padding:6px 10px; border-radius:8px}
.back:hover{background:var(--surface-2); color:var(--ink)}
.brand{font-size:.85rem; font-weight:800; color:var(--accent-ink); letter-spacing:-.01em}

/* 계산기 헤더 */
.calc-head{text-align:center; margin-bottom:22px}
.calc-head h1{font-size:1.5rem; font-weight:800; margin:0 0 4px; letter-spacing:-.02em}
.calc-head .sub{color:var(--muted); font-size:.9rem; margin:0}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:14px}

/* 세그먼트 토글 */
.seg{display:flex; gap:5px; background:var(--surface-2); padding:4px; border-radius:var(--radius-sm); margin-bottom:18px}
.seg button{flex:1; border:none; background:transparent; padding:10px 4px; border-radius:9px; font:inherit; font-size:.83rem; font-weight:700; color:var(--muted); cursor:pointer; transition:all .15s}
.seg button.on{background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* 입력 필드 */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.field-top label{font-size:.9rem; font-weight:600; min-width:0}
.val-box{display:flex; align-items:center; gap:5px; flex-shrink:0}
.val{width:130px; min-width:96px; max-width:100%; box-sizing:border-box; text-align:right; background:var(--bg); border:1.5px solid var(--line); border-radius:9px; padding:7px 11px;
  color:var(--accent-ink); font-size:1.1rem; font-weight:800; font-family:ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;
  transition:border-color .15s, background .15s;}
.val:focus{outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%, transparent)}
.unit{font-size:.85rem; color:var(--muted); font-weight:600}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--line-strong); outline:none; margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); cursor:pointer}
.hint{font-size:.72rem; color:var(--faint); margin-top:5px}

/* 결과 */
.result{background:linear-gradient(160deg,var(--accent-soft),transparent); border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.result-label{font-size:.82rem; color:var(--muted); font-weight:600; text-align:center}
.result-big{text-align:center; font-size:2rem; font-weight:900; color:var(--accent-ink); letter-spacing:-.02em; margin:4px 0 2px; font-variant-numeric:tabular-nums}
.result-note{text-align:center; font-size:.8rem; color:var(--muted); margin-bottom:16px; min-height:1em}
.breakdown{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.bd{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; text-align:center}
.bd.wide{grid-column:1 / -1; background:var(--surface-2)}
.bd .k{font-size:.75rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:5px}
.bd .k .dot{width:9px; height:9px; border-radius:3px; display:inline-block}
.bd .v{font-size:1.02rem; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums}

/* 차트 */
.chart-title{font-size:.85rem; font-weight:700; margin:0 0 4px}
.legend{display:flex; gap:14px; margin-bottom:10px; font-size:.75rem; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:5px}
.legend .dot{width:10px; height:10px; border-radius:3px}
canvas{width:100%; height:auto; display:block}

footer{text-align:center; color:var(--faint); font-size:.75rem; margin-top:20px; line-height:1.7}
footer a{color:var(--muted); text-decoration:underline}

/* ===== 허브(메인) ===== */
.hub-hero{text-align:center; padding:44px 0 30px}
.hub-hero .logo{font-size:2.6rem; margin-bottom:10px; line-height:0}
.hub-hero .logo img{width:72px; height:72px; display:inline-block}
.hub-hero h1{font-size:1.9rem; font-weight:900; letter-spacing:-.02em; margin:0 0 6px}
.hub-hero h1 .accent{color:var(--accent-ink)}
.hub-hero p{color:var(--muted); font-size:.95rem; margin:0}

.cat{margin-bottom:28px}
.cat-title{position:relative; display:inline-flex; align-items:center; gap:8px; font-size:1rem; font-weight:800; margin:0 0 14px; padding-bottom:9px}
/* 대분류 밑줄 — 카테고리별 색 그라디언트 언더라인 (라이트: 깔끔 / 다크: 은은한 네온) */
.cat-title::after{content:''; position:absolute; left:0; bottom:0; width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cat-c,var(--accent)), transparent)}
@media (prefers-color-scheme:dark){ .cat-title::after{box-shadow:0 0 10px color-mix(in srgb, var(--cat-c,var(--accent)) 70%, transparent)} }
:root[data-theme="dark"] .cat-title::after{box-shadow:0 0 10px color-mix(in srgb, var(--cat-c,var(--accent)) 70%, transparent)}
:root[data-theme="light"] .cat-title::after{box-shadow:none}
/* 카테고리별 색 (홈 섹션 순서: 금융/투자/급여·노동/부동산·세금/건강/생활/반려동물/기타) */
#cat-0{--cat-c:#10b981} /* 금융 */
#cat-1{--cat-c:#3b82f6} /* 투자 */
#cat-2{--cat-c:#f59e0b} /* 급여·노동 */
#cat-3{--cat-c:#8b5cf6} /* 부동산·세금 */
#cat-4{--cat-c:#f43f5e} /* 건강 */
#cat-5{--cat-c:#06b6d4} /* 생활 */
#cat-6{--cat-c:#ec4899} /* 반려동물 */
#cat-7{--cat-c:#6366f1} /* 기타 */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
/* 넓은 화면에서는 카드가 자동으로 여러 열로 채워짐 */
@media (min-width:700px){ .calc-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:12px} }
.calc-card{display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow); transition:transform .18s, border-color .18s}
.calc-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.calc-card .ic{font-size:1.5rem; margin-bottom:6px}
.calc-card .nm-sub{display:block; font-size:.72rem; font-weight:700; color:var(--cat-c,var(--accent)); margin-bottom:2px; word-break:keep-all}
.calc-card .nm{font-size:.95rem; font-weight:700; word-break:keep-all; line-height:1.35}
.calc-card .ds{font-size:.76rem; color:var(--faint); word-break:keep-all; margin-top:1px}
.calc-card.soon{opacity:.5; pointer-events:none; align-items:center; justify-content:center; text-align:center; color:var(--faint); font-size:.82rem; grid-column:1 / -1; padding:22px}

/* 본문(소개·개인정보처리방침 등) */
.prose{line-height:1.75; color:var(--ink); font-size:.95rem}
.prose h2{font-size:1.05rem; margin:22px 0 8px; color:var(--accent-ink)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px; padding-left:20px}
.prose li{margin:5px 0}
.prose a{color:var(--accent-ink); word-break:break-all}
.prose strong{font-weight:800}
.prose .upd{color:var(--faint); font-size:.85rem; margin-top:20px}

/* 전역 하단 링크 (common.js가 모든 페이지에 자동 삽입) */
.site-links{max-width:680px; margin:0 auto; padding:20px 16px 44px; text-align:center; font-size:.82rem; color:var(--muted)}
.site-links a{color:var(--muted); text-decoration:none; margin:0 7px; white-space:nowrap}
.site-links a:hover{color:var(--accent-ink); text-decoration:underline}

/* 계산기 하단 설명 (드롭다운/아코디언) */
.info{margin:6px 0 0}
.info details{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:10px}
.info summary{list-style:none; cursor:pointer; padding:15px 18px; font-weight:700; font-size:.98rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:10px}
.info summary::-webkit-details-marker{display:none}
.info summary::after{content:'▾'; color:var(--muted); transition:transform .2s; flex-shrink:0}
.info details[open] summary::after{transform:rotate(180deg)}
.info summary:hover{color:var(--accent-ink)}
.info-body{padding:0 18px 16px; line-height:1.75; font-size:.92rem; color:var(--ink)}
.info-body p{margin:0 0 10px} .info-body p:last-child{margin-bottom:0}
.info-body ul{margin:0 0 10px; padding-left:18px} .info-body li{margin:4px 0}
.info-body strong{font-weight:800; color:var(--accent-ink)}
.info-body .q{font-weight:700; margin-top:10px}
.info-body table,.prose table{width:100%; border-collapse:collapse; margin:4px 0 10px; font-size:.9rem}
.info-body th,.info-body td,.prose th,.prose td{border:1px solid var(--line); padding:6px 9px; text-align:left}
.info-body th,.prose th{background:var(--surface-2); font-weight:700}
/* 이야기 본문의 표는 좁은 화면에서 가로 스크롤 */
.prose table{display:block; overflow-x:auto; white-space:nowrap}
@media (min-width:520px){ .prose table{display:table; white-space:normal} }
.related{margin-top:16px}
.related-t{display:block; font-size:.85rem; color:var(--muted); margin-bottom:9px; font-weight:700}
.related a{display:inline-block; margin:0 7px 7px 0; padding:7px 13px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:.85rem; color:var(--ink); text-decoration:none; transition:background .15s, color .15s, border-color .15s}
.related a:hover{background:var(--accent); color:#fff; border-color:var(--accent)}

/* 결과 공유·복사 버튼 */
.result-actions{display:flex; gap:8px; margin-top:16px}
.result-actions button{flex:1; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2);
  color:var(--ink); font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.result-actions button:hover,.result-actions button:active{background:var(--accent); color:#fff; border-color:var(--accent)}

/* 토스트 알림 */
.toast{position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--surface); padding:11px 20px; border-radius:999px; font-size:.88rem; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s, transform .2s, visibility .2s; z-index:100}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

/* 카테고리 바로가기 칩 */
html{scroll-behavior:smooth}
.hub-search{margin:2px 0 18px}
.hub-search input{width:100%; box-sizing:border-box; background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--ink); font-size:1rem; font-family:inherit; transition:border-color .15s, box-shadow .15s}
.hub-search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%, transparent)}
section.cat{scroll-margin-top:64px}

@media (max-width:380px){ .calc-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important} html{scroll-behavior:auto}}

/* 맨 위로 버튼 (common.js가 모든 페이지에 자동 삽입) */
.gotop{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff; border:none; font-size:1.35rem; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s, transform .2s, visibility .2s, background .15s; z-index:50}
.gotop.show{opacity:1; visibility:visible; transform:translateY(0)}
.gotop:hover{background:var(--accent-ink)}
@media (max-width:480px){ .gotop{right:14px; bottom:14px; width:42px; height:42px} }

/* 하단 저작권 */
.copyright{margin-top:10px; font-size:.78rem; color:var(--faint); letter-spacing:.2px}

/* ===== 이스터에그: 주판 로고 → 간단 계산기 ===== */
.egg-trigger{cursor:pointer; user-select:none; transition:transform .15s}
.egg-trigger:hover{transform:scale(1.12) rotate(-6deg)}
.egg-trigger:active{transform:scale(.96)}
.eggmodal{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; animation:eggIn .16s ease-out}
@keyframes eggIn{from{opacity:0} to{opacity:1}}
.eggbox{width:100%; max-width:320px; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.3); padding:16px; animation:eggUp .18s ease-out}
@keyframes eggUp{from{transform:translateY(12px) scale(.97)} to{transform:none}}
.eggtop{display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:.95rem; margin-bottom:12px}
.eggclose{background:var(--surface-2); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  width:30px; height:30px; border-radius:9px; font-size:.9rem; line-height:1; display:grid; place-items:center}
.eggclose:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.eggdisp{background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px; text-align:right; overflow:hidden}
.eggsub{font-size:.78rem; color:var(--muted); min-height:1.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eggnum{font-size:1.9rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow-x:auto; scrollbar-width:none}
.eggnum::-webkit-scrollbar{display:none}
.eggpad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.eggkey{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  font:inherit; font-size:1.15rem; font-weight:700; padding:14px 0; border-radius:13px; transition:transform .08s, background .12s}
.eggkey:hover{background:var(--line)}
.eggkey:active{transform:scale(.93)}
.eggkey.fn{font-size:1rem; color:var(--muted)}
.eggkey.op{background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent-ink)}
.eggkey.eq{background:var(--accent); color:#fff; border-color:var(--accent)}
.eggkey.wide{grid-column:span 2}
.eggfoot{margin-top:11px; text-align:center; font-size:.74rem; color:var(--faint)}
@media (max-width:380px){ .eggkey{padding:12px 0; font-size:1.05rem} .eggnum{font-size:1.6rem} }

/* ===== 계산기 이야기 ===== */
.story-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:700px){ .story-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px} }
.story-card{display:flex; flex-direction:column; min-height:120px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; transition:transform .12s, border-color .12s}
.story-card:hover{transform:translateY(-2px); border-color:var(--accent)}
.story-card .ic{font-size:1.4rem; display:block; margin-bottom:6px}
.story-card .nm{display:block; font-weight:800; font-size:.98rem; color:var(--ink); line-height:1.4; margin-bottom:4px}
.story-card .ds{display:block; font-size:.83rem; color:var(--muted); line-height:1.5}
/* 계산기 페이지에 붙는 이야기 링크 배너 */
.story-link{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--accent-soft),transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%, transparent); border-radius:var(--radius);
  padding:14px 16px; margin:18px 0 0; transition:transform .12s}
.story-link:hover{transform:translateY(-2px)}
.story-link .sl-ic{font-size:1.5rem; flex-shrink:0}
.story-link .sl-tx{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.story-link .sl-tx strong{font-size:.92rem; font-weight:800; color:var(--accent-ink); line-height:1.35}
.story-link .sl-tx span{font-size:.79rem; color:var(--muted); line-height:1.4}
.story-link .sl-go{font-size:1.1rem; color:var(--accent-ink); flex-shrink:0}
/* 이야기 본문 */
/* 이야기 대표 이미지 — 파일 있으면 뜨고, 없으면(onerror) figure째 사라짐 */
.story-figure{margin:0 0 22px}
.story-cover{display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow); background:var(--surface-2)}
.story-figure figcaption{margin-top:8px; font-size:.82rem; color:var(--muted); text-align:center; line-height:1.5}
.story-hero{text-align:center; margin:8px 0 26px}
.story-hero .kicker{font-size:.78rem; font-weight:700; color:var(--accent-ink); letter-spacing:.06em; text-transform:uppercase}
.story-hero h1{font-size:1.55rem; font-weight:900; margin:8px 0 8px; letter-spacing:-.02em; line-height:1.35}
.story-hero .lead{color:var(--muted); font-size:.92rem; margin:0}
.prose blockquote{margin:16px 0; padding:14px 16px; background:var(--surface-2);
  border-left:3px solid var(--accent); border-radius:0 10px 10px 0; color:var(--muted); font-size:.9rem}
.prose .src{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--faint)}
.prose .src a{color:var(--muted)}

/* 검색 별칭 등 화면엔 숨기되 검색·스크린리더엔 잡히는 텍스트 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}