/* ==========================================================================
   Jev × CMDS · jev.cmdspace.work · site.css
   CMDSPACE v4.3 standard: CMDS Green #134538 (light accent) / CMDS Pink #E985A2
   (dark accent), --accent-on for text on accent, SF Pro + Pretendard.
   Continuity: component styles ported from labs.cmdspace.work/jev/ (2026-09-26).
   Theme: [data-theme] set before paint by the inline head script (saved choice,
   else OS setting). The media-query block is the no-JS fallback.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --cmds-green:#134538; --cmds-green-hover:#1d5c4b; --cmds-pink:#E985A2;
  --accent:var(--cmds-green); --accent-on:#ffffff;
  --bg:#fafaf8; --bg-elev:#ffffff; --bg-subtle:#f1f1ec;
  --fg:#1b1b1b; --fg-muted:#55605b; --fg-subtle:#8a948f; --border:#e3e5e0;
  --code-bg:#14201b; --code-fg:#e8efe9;
  --font-sans:"SF Pro Display","SF Pro Text","Pretendard Variable","Pretendard",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,monospace;
  --wrap:900px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --accent:var(--cmds-pink); --accent-on:#1b1b1b;
  --bg:#161715; --bg-elev:#1f211e; --bg-subtle:#242622;
  --fg:#f2f2ef; --fg-muted:#b3bab5; --fg-subtle:#7d857f; --border:#33362f;
  --code-bg:#0f120f; --code-fg:#e6e9e4;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:var(--cmds-pink); --accent-on:#1b1b1b;
    --bg:#161715; --bg-elev:#1f211e; --bg-subtle:#242622;
    --fg:#f2f2ef; --fg-muted:#b3bab5; --fg-subtle:#7d857f; --border:#33362f;
    --code-bg:#0f120f; --code-fg:#e6e9e4;
    color-scheme:dark;
  }
}

/* ---------- 2. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(max-width:520px){.wrap{padding:0 16px}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.accent-word{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:10px;z-index:60;background:var(--accent);color:var(--accent-on);padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none}
.skip:focus{left:12px}

/* ---------- 3. Header ---------- */
.site-header{padding:12px 0;border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;letter-spacing:-0.01em;white-space:nowrap;flex:none}
.mark img{width:28px;height:28px;border-radius:50%;object-fit:contain}
.mark b{color:var(--accent);font-weight:800}
:root[data-theme="dark"] .mark img{box-shadow:0 0 0 1px var(--border)}
.navlinks{display:flex;align-items:center;gap:4px;font-size:13.5px;color:var(--fg-muted);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;flex:1 1 auto;justify-content:flex-end}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{text-decoration:none;padding:6px 11px;border-radius:999px;white-space:nowrap}
.navlinks a:hover{color:var(--accent);background:var(--bg-subtle)}
.navlinks a[aria-current="page"]{background:var(--accent);color:var(--accent-on);font-weight:650}
.tgl{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);cursor:pointer;display:grid;place-items:center;font:inherit}
.tgl:hover{border-color:var(--accent);color:var(--accent)}
.tgl svg{width:15px;height:15px}
.tgl .sun{display:none}
:root[data-theme="dark"] .tgl .sun{display:block}
:root[data-theme="dark"] .tgl .moon{display:none}
@media(max-width:640px){
  .bar{flex-wrap:wrap;row-gap:8px}
  .navlinks{order:3;flex:1 1 100%;justify-content:flex-start;margin:0 -4px}
}

/* ---------- 4. Ported components (labs.cmdspace.work/jev/) ---------- */
.hero{padding:64px 0 40px}
.kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
h1{font-size:clamp(34px,6vw,60px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;margin-bottom:20px;text-wrap:pretty}
h1 .accent-word{color:var(--accent)}
.lede{font-size:18px;color:var(--fg-muted);max-width:720px;text-wrap:pretty}
.lede b{color:var(--fg)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.btn.primary:hover{color:var(--accent-on);filter:brightness(1.08)}
.byline{margin-top:22px;font-size:13.5px;color:var(--fg-subtle)}
.byline b{color:var(--fg-muted);font-weight:600}

h2{font-size:clamp(22px,3.2vw,28px);font-weight:760;letter-spacing:-0.025em;margin:64px 0 8px;scroll-margin-top:84px;text-wrap:pretty}
h2 .sn{font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;color:var(--accent);display:block;margin-bottom:8px;text-transform:uppercase;font-weight:600}
h3{font-size:18px;font-weight:720;letter-spacing:-0.015em;margin:30px 0 8px;scroll-margin-top:84px}
.h2sub{font-size:15px;color:var(--fg-subtle);margin-bottom:20px;max-width:760px;text-wrap:pretty}
p.body{font-size:16px;color:var(--fg-muted);margin:12px 0;max-width:780px;text-wrap:pretty}
p.body b{color:var(--fg)}
p.body code,li code,td code{font-family:var(--font-mono);font-size:0.9em;background:var(--bg-subtle);padding:1px 6px;border-radius:5px;color:var(--fg)}
ul.plain{margin:10px 0 10px 20px;color:var(--fg-muted);max-width:780px}
ul.plain li{margin:6px 0;text-wrap:pretty}
ul.plain b{color:var(--fg)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.cards,.cards.two{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:20px 22px;text-decoration:none;min-width:0;overflow-wrap:anywhere}
a.card{transition:border-color .15s}
a.card:hover{border-color:var(--accent)}
.card .n{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;color:var(--accent);text-transform:uppercase;margin-bottom:8px}
.card .t{font-size:17px;font-weight:720;letter-spacing:-0.015em;margin-bottom:6px;text-wrap:pretty}
.card .d{font-size:14px;color:var(--fg-muted);text-wrap:pretty}
.card .big{font-size:34px;font-weight:800;letter-spacing:-0.03em;color:var(--accent);line-height:1.1;margin:4px 0 6px;font-variant-numeric:tabular-nums}

.big-quote{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--bg-elev));border-radius:18px;padding:26px 28px;margin:22px 0;font-size:17.5px;line-height:1.6;text-wrap:pretty}
.big-quote b{color:var(--accent)}
.note{border:1px solid var(--border);border-radius:14px;background:var(--bg-subtle);padding:16px 20px;font-size:14.5px;color:var(--fg-muted);margin:18px 0;text-wrap:pretty}
.note b{color:var(--fg)}
.note a{color:var(--accent);font-weight:600}
.callout{border-left:3px solid var(--accent);padding:6px 0 6px 18px;margin:20px 0;font-size:15.5px;color:var(--fg);max-width:780px;text-wrap:pretty}
.callout .lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.callout .sub{color:var(--fg-muted);font-size:14.5px;display:block;margin-top:4px}

.tbox{border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{text-align:left;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-subtle);font-weight:650;padding:11px 14px;border-bottom:2px solid var(--border);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--fg-muted);vertical-align:top;text-wrap:pretty}
td b,td strong{color:var(--fg)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hl td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.tcap{font-size:12.5px;color:var(--fg-subtle);margin:-8px 0 16px}
table.wide{min-width:780px}

.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
@media(max-width:860px){.layers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.layers{grid-template-columns:1fr}}
.layer{border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative}
.layer .pill{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--accent-on);font-weight:700}
.layer.jev{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.layer h4{font-size:16px;font-weight:750;letter-spacing:-0.01em}
.layer .yes,.layer .no{font-size:13px;color:var(--fg-muted);line-height:1.5}
.layer .yes::before{content:"맡기는 것";display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:3px}
.layer .no::before{content:"맡기지 않는 것";display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:3px}
.layer .rule{margin-top:auto;padding-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--fg-subtle)}

.codebox{position:relative;border-radius:14px;background:var(--code-bg);margin:16px 0;overflow:hidden;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent)}
.codebox pre{font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--code-fg);padding:20px 22px;overflow-x:auto;white-space:pre}
.codebox .c{color:#8aa39a}
.codebox .k{color:#b8e6d0}
:root[data-theme="dark"] .codebox .k{color:var(--cmds-pink)}
.copybtn{position:absolute;top:10px;right:10px;font:inherit;font-size:12px;font-weight:650;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--code-fg) 25%,transparent);background:transparent;color:var(--code-fg);cursor:pointer;opacity:.6;transition:.15s}
.copybtn:hover{opacity:1;border-color:var(--accent)}
.copybtn.ok{background:var(--accent);color:var(--accent-on);border-color:var(--accent);opacity:1}
@media(max-width:640px){.copybtn+pre{padding-top:46px}}

.steps{counter-reset:s;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0}
.step{border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:18px 20px 18px 62px;position:relative;min-width:0;overflow-wrap:anywhere}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-on);font-weight:800;display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.step.zero::before{content:"0"}
.step .t{font-size:16px;font-weight:720;margin-bottom:4px;letter-spacing:-0.01em}
.step .d{font-size:14px;color:var(--fg-muted);text-wrap:pretty}

.gloss{text-decoration:none;border-bottom:1px dotted var(--accent);cursor:help;position:relative}
.gloss:hover::after,.gloss:focus::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:30;background:var(--fg);color:var(--bg);font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:9px;width:max-content;max-width:min(320px,80vw);font-weight:400;white-space:normal;letter-spacing:0;text-transform:none;box-shadow:0 6px 24px rgba(0,0,0,.18)}

.ev{display:block;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:22px 24px;text-decoration:none;transition:border-color .15s}
.ev:hover{border-color:var(--accent)}
.ev .when{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--accent);margin-bottom:6px;text-transform:uppercase}
.ev .t{font-size:18px;font-weight:720;letter-spacing:-0.015em;margin-bottom:6px}
.ev .d{font-size:14px;color:var(--fg-muted);text-wrap:pretty}
.ev ul{margin:10px 0 0 18px;font-size:13.5px;color:var(--fg-muted)}
.ev .go{display:inline-flex;margin-top:14px}
.ev.bio{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-elev))}

.basis{margin-top:56px;border:1px solid var(--border);border-radius:16px;padding:18px 22px;font-size:13.5px;color:var(--fg-muted);background:var(--bg-subtle)}
.basis b{color:var(--fg)}
.basis .v{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);margin-top:8px}

/* v1.1 components: glossary, primitives, workflow, showcase, timeline */
.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.gl.one{grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){.gl{grid-template-columns:minmax(0,1fr)}}
.term{border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:18px 20px;min-width:0;overflow-wrap:anywhere;scroll-margin-top:84px}
.term .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.term .nm{font-family:var(--font-mono);font-size:17px;font-weight:750;color:var(--accent)}
.term .ko{font-size:13px;color:var(--fg-subtle)}
.term .lay{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:var(--fg-subtle)}
.term .def{font-size:15px;color:var(--fg);margin-bottom:6px;text-wrap:pretty}
.term .ex{font-size:13.5px;color:var(--fg-muted);text-wrap:pretty}
.term .ex code,.term .warn code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-subtle);padding:1px 5px;border-radius:5px;color:var(--fg)}
.term .warn{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--fg-subtle);text-wrap:pretty}
.term .warn::before{content:"주의 · ";color:var(--accent);font-weight:700}
.gl-group{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);margin:26px 0 -4px}

/* primitive anatomy cards */
.prims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
@media(max-width:860px){.prims{grid-template-columns:minmax(0,1fr)}}
.prim{border:1px solid var(--border);border-radius:18px;background:var(--bg-elev);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.prim .top{display:flex;align-items:center;justify-content:space-between}
.prim .nm{font-size:22px;font-weight:800;letter-spacing:-.02em}
.prim .q{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.prim .ask{font-size:14px;color:var(--fg-muted);text-wrap:pretty}
.prim .ask b{color:var(--fg)}
.viz{border:1px solid var(--border);border-radius:12px;background:var(--bg-subtle);padding:14px}
.viz .cap{font-size:12px;color:var(--fg-subtle);margin-bottom:8px}
.gauge{position:relative;height:14px;border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,transparent);margin:18px 0 22px}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--accent)}
.gauge .th{position:absolute;top:-8px;bottom:-8px;width:2px;background:var(--fg)}
.gauge .th span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10.5px;white-space:nowrap;color:var(--fg-muted)}
.gends{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--fg-subtle);margin-top:-12px}
.gends b{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.gauge .val{position:absolute;top:18px;font-family:var(--font-mono);font-size:11.5px;color:var(--fg);transform:translateX(-50%)}
.gauge .ends{position:absolute;top:18px;font-size:10.5px;color:var(--fg-subtle)}
.bars{display:grid;gap:6px}
.brow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) 38px;gap:8px;align-items:center;font-size:12.5px}
.brow .lb{color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .tr{height:10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,transparent);position:relative;overflow:hidden}
.brow .tr i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px}
.brow.win .tr i{background:var(--accent)}
.brow.win .lb{color:var(--fg);font-weight:700}
.brow .p{font-family:var(--font-mono);font-size:11.5px;text-align:right;color:var(--fg-muted)}
.ladder{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0 26px}
.ladder div{font-size:11.5px;text-align:center;padding:8px 4px;border-radius:8px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg-muted)}
.ladder .mk{position:absolute;bottom:-22px;transform:translateX(-50%);font-family:var(--font-mono);font-size:11.5px;color:var(--accent);font-weight:700;white-space:nowrap}
.ladder .mk::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:8px;background:var(--accent)}
.prim .out{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-muted);background:var(--bg-subtle);border-radius:8px;padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.prim .use{font-size:13px;color:var(--fg-muted);text-wrap:pretty}
.prim .use b{color:var(--fg)}

/* workflow diagram */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;margin:22px 0 10px;counter-reset:f}
@media(max-width:860px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.flow{grid-template-columns:minmax(0,1fr)}}
.fnode{position:relative;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);padding:16px 16px 14px;min-width:0;overflow-wrap:anywhere}
.fnode::before{counter-increment:f;content:counter(f);position:absolute;top:-11px;left:14px;width:22px;height:22px;border-radius:7px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.fnode::after{content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--fg-subtle);font-weight:700}
.fnode.end::after{display:none}
.fnode.dn::after,.fnode.lf::after{right:auto;top:auto}
/* desktop: snake 1→4 then ↓ then 5←8 */
@media(min-width:861px){
.fnode:nth-child(1){grid-area:1/1}.fnode:nth-child(2){grid-area:1/2}.fnode:nth-child(3){grid-area:1/3}.fnode:nth-child(4){grid-area:1/4}
.fnode:nth-child(5){grid-area:2/4}.fnode:nth-child(6){grid-area:2/3}.fnode:nth-child(7){grid-area:2/2}.fnode:nth-child(8){grid-area:2/1}
.fnode:nth-child(4)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}
.fnode:nth-child(5)::after,.fnode:nth-child(6)::after,.fnode:nth-child(7)::after{content:"←";right:auto;left:-24px}}
/* tablet: 2-col snake */
@media(max-width:860px) and (min-width:521px){
.fnode:nth-child(1){grid-area:1/1}.fnode:nth-child(2){grid-area:1/2}.fnode:nth-child(3){grid-area:2/2}.fnode:nth-child(4){grid-area:2/1}
.fnode:nth-child(5){grid-area:3/1}.fnode:nth-child(6){grid-area:3/2}.fnode:nth-child(7){grid-area:4/2}.fnode:nth-child(8){grid-area:4/1}
.fnode:nth-child(2)::after,.fnode:nth-child(4)::after,.fnode:nth-child(6)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}
.fnode:nth-child(3)::after,.fnode:nth-child(7)::after{content:"←";right:auto;left:-24px}}
@media(max-width:520px){.fnode::after{content:"↓";right:auto;left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}}
.fnode .who{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--fg-muted);margin:4px 0 8px}
.fnode.jev{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.fnode.jev .who{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.fnode.human .who{border-style:dashed;color:var(--fg)}
.fnode .t{font-size:15.5px;font-weight:740;letter-spacing:-.01em;margin-bottom:4px}
.fnode .d{font-size:13px;color:var(--fg-muted);text-wrap:pretty}
.fnode .d code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-subtle);padding:1px 5px;border-radius:5px;color:var(--fg)}
.loopback{border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--fg-muted);margin:8px 0 18px;text-wrap:pretty}
.loopback b{color:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--fg-subtle);margin:8px 0}
.walk{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:16px 0;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--bg-elev)}
.wrow{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--border)}
.wrow:last-child{border-bottom:none}
@media(max-width:560px){.wrow{grid-template-columns:minmax(0,1fr)}}
.wrow .k{padding:13px 16px;background:var(--bg-subtle);font-size:13px;font-weight:700;color:var(--fg)}
.wrow .k small{display:block;font-weight:400;color:var(--fg-subtle);font-family:var(--font-mono);font-size:11px}
.wrow .v{padding:13px 16px;font-size:14px;color:var(--fg-muted);min-width:0;overflow-wrap:anywhere;text-wrap:pretty}
.wrow .v b{color:var(--fg)}
.wrow .v code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-subtle);padding:1px 5px;border-radius:5px;color:var(--fg)}
.verdict{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;margin-right:4px}
.verdict.hum{border:1px dashed var(--fg-muted);color:var(--fg)}
.verdict.ok{background:var(--accent);color:var(--accent-on)}
.verdict.obs{border:1px solid var(--border);color:var(--fg-muted)}

/* showcase card news */
.sc-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.sc-meta .k{border:1px solid var(--border);border-radius:14px;background:var(--bg-elev);padding:12px 16px;min-width:140px;flex:1 1 140px}
.sc-meta .k .big{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.15}
.sc-meta .k .d{font-size:12.5px;color:var(--fg-muted)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 14px}
.filters button{font:inherit;font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg-muted);cursor:pointer}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.cn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:860px){.cn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cn{grid-template-columns:minmax(0,1fr)}}
.cnc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;background:var(--bg-elev);text-decoration:none;overflow:hidden;min-height:300px;min-width:0;transition:border-color .15s,transform .15s}
.cnc:hover{border-color:var(--accent);transform:translateY(-2px)}
.cnc[hidden]{display:none}
.cnc .band{display:flex;justify-content:space-between;gap:8px;padding:11px 16px;background:var(--bg-subtle);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle)}
.cnc .band .new{color:var(--accent);font-weight:700}
.cnc .body{padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;overflow-wrap:anywhere}
.cnc .ttl{font-size:19px;font-weight:780;letter-spacing:-.02em;line-height:1.25;color:var(--fg);text-wrap:pretty}
.cnc .stat{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.cnc .stat small{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--fg-subtle);margin-top:2px}
.cnc .what{font-size:13.5px;color:var(--fg-muted);text-wrap:pretty}
.cnc .how{font-size:12.5px;color:var(--fg-subtle);text-wrap:pretty}
.cnc .how b{color:var(--fg-muted)}
.cnc .foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px dashed var(--border)}
.cnc .by{margin-left:auto;font-size:12px;color:var(--fg-subtle)}
.pr{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:6px;border:1px solid var(--accent);color:var(--accent)}
.pr.inf{border-style:dashed;opacity:.8}
.pr.inf::after{content:"?";margin-left:2px}
.pr.na{border:1px dashed var(--border);color:var(--fg-subtle);font-weight:500}
.official{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-elev))}
.tl{margin:14px 0;border-left:2px solid var(--border);padding-left:18px}
.tl .it{position:relative;margin:0 0 14px;font-size:14px;color:var(--fg-muted);text-wrap:pretty}
.tl .it::before{content:"";position:absolute;left:-24px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl .it b{color:var(--fg)}
.tl .dt{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-right:6px}
.tl a{color:var(--accent)}

/* ---------- 5. Site-level additions ---------- */
/* Korean line breaking for display text */
h1,h2,h3,.lede,.thesis-sub,.kicker{word-break:keep-all;overflow-wrap:break-word}
h1{text-wrap:balance}
.thesis-sub{font-size:clamp(19px,2.6vw,24px);font-weight:680;letter-spacing:-0.02em;color:var(--fg);margin:-4px 0 18px;text-wrap:balance}

/* Visible author line on article pages */
.byline{margin-top:22px;font-size:13.5px;color:var(--fg-subtle);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.byline .who{color:var(--fg-muted);font-weight:600}
.byline a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border)}
.byline a:hover{color:var(--accent);border-color:var(--accent)}
.byline time{font-variant-numeric:tabular-nums}

/* Long-form body rendered from content/*.md at integration */
.prose{max-width:780px}
.prose>*+*{margin-top:14px}
.prose p,.prose li{color:var(--fg-muted);text-wrap:pretty}
.prose b,.prose strong{color:var(--fg)}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:6px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-subtle);padding:1px 6px;border-radius:5px;color:var(--fg)}
.prose blockquote{border:1px solid var(--border);background:var(--bg-subtle);border-radius:14px;padding:14px 18px;color:var(--fg-muted)}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--border);margin:36px 0}

/* Page map cards (home) */
.pagemap{margin:8px 0 0}
.pagemap .card .t{display:flex;align-items:center;gap:8px}
.pagemap .card .t::after{content:"→";margin-left:auto;color:var(--fg-subtle);font-weight:600}
.pagemap a.card:hover .t::after{color:var(--accent)}

/* Download / resource list (practice) */
.files{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);overflow:hidden;margin:16px 0}
.files li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:4px 16px;padding:12px 18px;border-bottom:1px solid var(--border);font-size:14px;color:var(--fg-muted)}
.files li:last-child{border-bottom:none}
.files a{font-family:var(--font-mono);font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.files a:hover{text-decoration:underline}
@media(max-width:560px){.files li{grid-template-columns:minmax(0,1fr)}}

/* Upcoming events + bio card (labs convention) */
.upcoming{margin-top:80px;padding-top:8px;border-top:1px solid var(--border)}
.upcoming h2{margin-top:48px}
.upcoming .ev .place{margin-top:8px}
.upcoming .cards{margin-top:4px}

/* Footer */
.site-footer{margin-top:56px;padding:32px 0 56px;border-top:1px solid var(--border);font-size:13.5px;color:var(--fg-subtle)}
.foot-top{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.lockup{display:inline-flex;align-items:center}
.lockup img{height:24px;width:auto;display:block}
.brand-dark{display:none!important}
:root[data-theme="dark"] .brand-light{display:none!important}
:root[data-theme="dark"] .brand-dark{display:block!important}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot-nav a{text-decoration:none;color:var(--fg-muted)}
.foot-nav a:hover,.foot-nav a[aria-current="page"]{color:var(--accent)}
.foot-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-meta a{color:var(--accent);text-decoration:none;font-weight:600}
.foot-meta a:hover{text-decoration:underline}
.foot-note{margin-top:10px;max-width:760px;text-wrap:pretty}
.foot-copy{margin-top:10px;font-family:var(--font-mono);font-size:12px}

/* No-JS fallback for theme-dependent swaps */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tgl .sun{display:block}
  :root:not([data-theme="light"]) .tgl .moon{display:none}
  :root:not([data-theme="light"]) .brand-light{display:none!important}
  :root:not([data-theme="light"]) .brand-dark{display:block!important}
  :root:not([data-theme="light"]) .mark img{box-shadow:0 0 0 1px var(--border)}
  :root:not([data-theme="light"]) .codebox .k{color:var(--cmds-pink)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .cnc:hover{transform:none}
}
@media print{
  .site-header,.skip,.tgl,.upcoming,.copybtn{display:none!important}
  body{background:#fff;color:#000}
  a{text-decoration:underline}
}