:root{
  --bg:#f7f8f9;--card:#ffffff;--line:#e4e7eb;--text:#1a2029;--muted:#66717f;
  --brand:#1f6f8b;--brand-2:#e8f2f6;--accent:#ff3b5c;--radius:12px;
  --sym:#fdecef;--sym-t:#b5123a;--region:#e6f1ff;--region-t:#1b4fa0;--tx:#e9f8ef;--tx-t:#166b3a;
  --site:#fff4e5;--site-t:#9a4b00;--fascia:#f1ebff;--fascia-t:#5b2fa8;--struct:#eef1f4;--struct-t:#3b4652;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1318;--card:#171c23;--line:#262d37;--text:#e6ecf5;--muted:#93a0b1;--brand:#5fb3d3;--brand-2:#14262f;
    --sym:#3a1620;--sym-t:#ff8aa3;--region:#132542;--region-t:#8ab8ff;--tx:#12301e;--tx-t:#7fdba1;
    --site:#3a2610;--site-t:#ffb86b;--fascia:#251a3d;--fascia-t:#c4a6ff;--struct:#222a33;--struct-t:#c3ccd6;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Noto Sans KR",Roboto,sans-serif;font-size:16px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
img{max-width:100%;height:auto}

/* header */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand))}
.brand b{display:block;font-size:15px;letter-spacing:-.2px;line-height:1.2}
.brand small{display:block;color:var(--muted);font-size:11.5px}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:8px;color:var(--text);font-weight:500}
.nav a:hover{background:var(--brand-2);text-decoration:none}
.nav a.is-active{background:var(--brand);color:#fff}
main{min-height:60vh;padding:28px 16px 48px}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:24px 0}
.foot p{margin:4px 0}

/* home */
.hero{padding:36px 0 20px}
.hero h1{font-size:32px;margin:0 0 6px;letter-spacing:-.5px}
.hero p{color:var(--muted);margin:0 0 18px;font-size:17px}
.hero-links{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn .n{background:#ffffff33;border-radius:999px;padding:0 8px;font-size:13px}
.btn-ghost{background:var(--brand-2);color:var(--brand)}
.home-sec{margin-top:28px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.sec-head h2{margin:0;font-size:20px}

/* page head */
.page-head{margin-bottom:20px}
.page-head h1{font-size:28px;margin:4px 0 6px;letter-spacing:-.4px;line-height:1.3}
.page-sub{color:var(--muted);margin:0;font-size:14px}
.crumbs{font-size:13px;color:var(--muted)}
.badge{display:inline-block;vertical-align:middle;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:8px}
.badge-sample{background:#fff1c2;color:#7a5200}
@media (prefers-color-scheme:dark){.badge-sample{background:#4a3a08;color:#ffd979}}

/* chips */
.chip{display:inline-block;font-size:12.5px;padding:2px 9px;border-radius:999px;margin:2px 4px 2px 0;background:var(--struct);color:var(--struct-t);white-space:nowrap}
.chip-sym{background:var(--sym);color:var(--sym-t)}
.chip-region{background:var(--region);color:var(--region-t)}
.chip-tx{background:var(--tx);color:var(--tx-t)}
.chip-site{background:var(--site);color:var(--site-t)}
.chip-fascia{background:var(--fascia);color:var(--fascia-t)}
.chip-care{background:var(--brand-2);color:var(--brand)}
.chip-filter{border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font:inherit;font-size:13px;padding:5px 12px}
.chip-filter.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* filters + cards */
.filters{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.search{font:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);width:100%;max-width:420px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;color:var(--text);transition:.15s}
.card:hover{text-decoration:none;border-color:var(--brand);box-shadow:0 6px 20px #0000000f;transform:translateY(-1px)}
.card[hidden]{display:none}
.card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.card h3{margin:0 0 6px;font-size:17px;line-height:1.35}
.card-cc{margin:0;color:var(--muted);font-size:14px}
.card-outcome{margin:8px 0 0;font-size:13.5px;color:var(--tx-t)}
.q-mark,.a-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-weight:800;font-size:14px;margin-right:8px;vertical-align:-2px;flex:none}
.q-mark{background:var(--region);color:var(--region-t)}
.a-mark{background:var(--tx);color:var(--tx-t)}
.empty-note{color:var(--muted);text-align:center;padding:30px 0}

/* case meta */
.meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px;margin:0 0 24px}
.meta>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline;min-width:0}
.meta>div.wide{grid-column:1/-1}
.meta dt{color:var(--muted);font-size:13px;font-weight:600}
.meta dd{margin:0;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.meta small{color:var(--muted)}

/* prose */
.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 22px 14px;font-size:16px}
.prose h2{font-size:20px;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.prose h3{font-size:17px;margin:18px 0 6px}
.prose p{margin:10px 0}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:4px 0}
.prose blockquote{margin:12px 0;padding:8px 14px;border-left:4px solid var(--brand);background:var(--brand-2);border-radius:0 8px 8px 0}
.prose blockquote p{margin:4px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;margin:12px 0}
.prose th,.prose td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--bg)}
.prose code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:.92em}
.prose pre{background:var(--bg);padding:12px;border-radius:8px;overflow:auto}
.prose img{border-radius:8px}
.page-foot{margin-top:20px}
.disclaimer{color:var(--muted);font-size:13px;border-top:1px dashed var(--line);padding-top:12px}
.tags{margin:14px 0 0}

/* qna */
.q-box,.a-box{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.q-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.q-box p{margin:0;font-size:17px;font-weight:600;line-height:1.5}
.a-box{flex-direction:column;gap:6px}
.a-box .a-mark{margin:0 0 2px}
.a-box .prose{width:100%}
.answered-by{color:var(--muted);font-size:13.5px;margin:6px 0 0 4px}

/* figures (fascia viewer) */
.figures{margin-bottom:24px}
.figures h2{font-size:20px;margin:0 0 10px}
.fv{margin:0 0 18px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;align-items:start}
.fv-stage{position:relative;line-height:0;background:#fff;border-radius:8px;overflow:hidden}
.fv-stage img{display:block;width:100%;height:auto}
.fv-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-side figcaption{font-size:14px;color:var(--muted);margin:0 0 8px;line-height:1.5}
.fv-legend{list-style:none;margin:0;padding:0}
.fv-legend li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;padding:6px 6px;border-radius:8px;font-size:14px;cursor:default}
.fv-legend li.is-hl,.fv-legend li:hover{background:var(--bg)}
.fv-key{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;border-radius:7px;background:var(--c);color:#fff;font-weight:800;font-size:13px;text-shadow:0 0 2px #0006}
.fv-desc{line-height:1.5}
.fv svg .fv-shape{transition:opacity .15s}
.fv svg.has-hl .fv-shape:not(.is-hl){opacity:.28}
.fv svg .fv-shape{cursor:pointer}
@media (max-width:760px){
  .fv{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .meta>div{grid-template-columns:84px 1fr}
  .nav a{padding:8px 10px}
}