/* ============================================================
   kwjin.dev — G-1 skin (dark only)
   fonts: Black Han Sans (display, subset) + Ubuntu Sans Mono (mono)
   ============================================================ */

@font-face{
  font-family:"UbuntuSansMonoEmbed";
  src:url("/assets/UbuntuSansMono.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"BlackHanSansEmbed";
  src:url("/assets/BlackHanSans-subset.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ============ tokens ============ */
:root{
  color-scheme:dark;

  --bg:#0A0F10;
  --surface:#0E1518;
  --surface-2:#121A1D;
  --ink:#E3EDEF;
  --bright:#F2F8F9;
  --ink-2:#8CA1A6;
  --ink-3:#5E6E71;
  --line:#1C282A;
  --line-strong:#2B3A3D;
  --stroke:#3E5459;

  --accent:#C48229;
  --accent-ink:#C48229;
  --accent-soft:#241B10;
  --on-accent:#0A0F10;
  --on-accent-2:#33250A;

  --secondary:#22A2B3;
  --signal:#22A2B3;
  --good:#22A2B3;
  --bad:#DE7B62;

  /* chart pair — verified dark duo, do not change */
  --c1:#22A2B3;
  --c2:#C48229;
  --c-base:#54666A;
  --grid:#1C282A;

  --pad:clamp(18px,4vw,40px);

  --font-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --font-mono:"UbuntuSansMonoEmbed",ui-monospace,SFMono-Regular,Menlo,Consolas,"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",monospace;
  /* 디스플레이 글꼴은 본문 글꼴과 동일. 굵기는 각 규칙에서 700으로 준다.
     @font-face BlackHanSansEmbed와 woff2 파일은 남겨 두되 아무도 참조하지 않으므로 다운로드되지 않는다. */
  --font-display:var(--font-body);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent-ink) 34%,transparent)}
a:hover{border-bottom-color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
p{margin:0}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.3;letter-spacing:-.01em;font-weight:400}
ul{margin:0;padding:0;list-style:none}

/* ============ shell ============ */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
section{scroll-margin-top:60px}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.04em;color:var(--ink-3);
}

/* ============ top bar ============ */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:48px;min-width:0}
.topbar .brand{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;
  color:var(--ink-2);border:0;white-space:nowrap;
}
.topbar .brand:hover{color:var(--accent)}
.topbar .mailtop{
  margin-left:auto;font-family:var(--font-mono);font-size:.75rem;
  color:var(--ink-2);border:0;white-space:nowrap;
}
.topbar .mailtop:hover{color:var(--accent)}
.navlinks{display:flex;gap:16px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;
  color:var(--ink-3);border:0;white-space:nowrap;
}
.navlinks a:hover,.navlinks a[aria-current="true"]{color:var(--accent)}

/* ============ hero (G-1) ============ */
.hero-g{padding:clamp(34px,6vw,58px) var(--pad) 0}
.hero-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,44px);margin-bottom:clamp(22px,3.4vw,30px);
}
.hero-name{display:flex;flex-direction:column;gap:6px;min-width:0}
.name{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,5.2vw,3.25rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--bright);
}
.name-role{
  font-family:var(--font-body);font-weight:400;
  font-size:.875rem;line-height:1.5;letter-spacing:.01em;
  color:var(--ink-2);
}
.pitch-g{
  max-width:46ch;text-align:left;
  font-size:.875rem;line-height:1.78;color:var(--ink-2);
}

/* numbers band */
.statband{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.sb{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 16px 14px 0;border-bottom:1px solid var(--line);min-width:0;
}
.sb:last-child{padding-right:0}
.sb .k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;color:var(--ink-3)}
.sb .v{
  font-family:var(--font-mono);font-size:clamp(1.05rem,2.4vw,1.375rem);
  line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;
}
.sb .v em{font-style:normal;font-size:.75rem;color:var(--ink-2)}
.sb.hi .v{color:var(--accent)}
@media (max-width:680px){
  .hero-top{flex-direction:column;align-items:stretch;gap:16px}
  .pitch-g{text-align:left;max-width:none}
  .statband{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .sb:nth-child(2n){padding-right:0}
}
@media (max-width:400px){.statband{grid-template-columns:minmax(0,1fr)}.sb{padding-right:0}}

/* ============ section heads ============ */
.sec{
  margin-top:clamp(40px,6vw,64px);
  padding:clamp(26px,4vw,38px) var(--pad) 0;
  border-top:1px solid var(--line);
}
.sechead{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.sechead .eyebrow{color:var(--ink-3)}
.sechead h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2.7vw,1.5rem);line-height:1.38;color:var(--bright);
}
.sechead .lede{color:var(--ink-2);max-width:64ch;font-size:.9375rem}

/* ============ project table (G-1) ============ */
.ptable{display:flex;flex-direction:column}
.prow:first-child{border-top:1px solid var(--line)}
.prow{
  display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,260px) 132px;
  gap:20px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);border-left:0;border-right:0;
  margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);
  transition:background-color .16s ease,color .16s ease;
}
.prow .pn{
  font-family:var(--font-mono);font-size:1rem;font-weight:600;line-height:1;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.prow .pt{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,2.1vw,1.3rem);
  line-height:1.3;color:var(--bright);min-width:0;
}
.prow .pm{
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;min-width:0;
}
.prow .ps{
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-2);
  text-align:right;white-space:nowrap;
}
.prow .ps.now{color:var(--accent)}

/* 조용한 호버 — 배경만 한 단계 밝히고 제목 글자색만 강조색으로 */
.prow:hover,.prow:focus-visible{background:var(--surface-2);border-bottom-color:var(--line-strong)}
.prow:hover .pt,.prow:focus-visible .pt{color:var(--accent)}
.prow:hover .pn,.prow:focus-visible .pn{color:var(--ink-2)}
.prow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}

@media (max-width:820px){
  .prow{grid-template-columns:44px minmax(0,1fr) 120px;gap:8px 14px}
  .prow .pm{grid-column:2;font-size:.6875rem}
  .prow .ps{grid-column:3;grid-row:1;align-self:center}
}
@media (max-width:520px){
  .prow{grid-template-columns:40px minmax(0,1fr);gap:6px 12px;padding-top:14px;padding-bottom:14px}
  .prow .ps{grid-column:2;grid-row:2;text-align:left;font-size:.6875rem}
  .prow .pm{grid-column:2;grid-row:3}
}

/* ============ approach (3 principles) ============ */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,30px)}
.pillar{padding:18px 0 4px;border-top:1px solid var(--line)}
.pillar .n{
  display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--accent);margin-bottom:10px;
}
.pillar h3{font-family:var(--font-display);font-weight:700;font-size:.9375rem;line-height:1.5;color:var(--bright);margin-bottom:9px}
.pillar p{font-size:.875rem;line-height:1.75;color:var(--ink-2)}
.pillar .ex{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:.8125rem;color:var(--ink-3);line-height:1.65}
@media (max-width:820px){.pillars{grid-template-columns:minmax(0,1fr)}}

/* ============ figure panels ============ */
.panel{background:var(--surface);border:1px solid var(--line);padding:clamp(18px,3.2vw,28px)}
.panel-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.panel-sub{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);margin-bottom:20px}
.note{
  margin-top:16px;padding:11px 13px;background:var(--surface-2);
  border-left:2px solid var(--accent);
  font-size:.8125rem;line-height:1.7;color:var(--ink-3);
}

/* ============ history — compact mono table ============ */
.timeline{border-top:1px solid var(--line)}
.tl{
  display:grid;grid-template-columns:168px minmax(0,1fr);gap:5px 22px;
  padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.tl .when{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl.now .when{color:var(--accent)}
.tl .what{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl .what h4{font-family:var(--font-body);font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.45}
.tl .what h4 a{color:var(--bright);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.tl .what h4 a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.tl .what p{font-size:.8125rem;line-height:1.72;color:var(--ink-2)}
@media (max-width:680px){.tl{grid-template-columns:minmax(0,1fr);gap:3px}}

/* ============ stack — hairline list ============ */
.stackgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,30px)}
.stackcol{padding:16px 0 4px;border-top:1px solid var(--line)}
.stackcol h3{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--accent);margin-bottom:10px}
.stackcol li{font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line)}
.stackcol li:last-child{border-bottom:0}
@media (max-width:760px){.stackgrid{grid-template-columns:minmax(0,1fr)}}

/* ============ papers — hairline list ============ */
.papers{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.paper{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);
}
.paper .badge{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line-strong);padding:1px 7px;white-space:nowrap;
}
.paper .ti{font-size:.9062rem;line-height:1.6;color:var(--ink);min-width:0}
.paper .ti a{color:var(--bright)}
.paper .ti a:hover{color:var(--accent)}
.paper .ti span{display:block;font-family:var(--font-mono);color:var(--ink-3);font-size:.75rem;margin-top:3px}
@media (max-width:560px){.paper{grid-template-columns:minmax(0,1fr)}}

/* ============ stat tiles (project pages) ============ */
.stats{margin-top:clamp(22px,4vw,30px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:var(--surface);padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat .k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;color:var(--ink-3)}
.stat .v{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:-.01em;line-height:1.2;color:var(--ink);
}
.stat .v em{font-style:normal;color:var(--ink-2);font-size:.78em}
.stat .d{font-size:.8125rem;line-height:1.55;color:var(--ink-3)}
@media (max-width:820px){.stats,.stats.three,.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.stats,.stats.three,.stats.two{grid-template-columns:minmax(0,1fr)}}

/* ============ project page hero ============ */
.phero{padding:clamp(32px,6vw,54px) var(--pad) 0}
.phero .eyebrow{display:block;margin-bottom:14px}
.ptitle{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.55rem,4.1vw,2.25rem);line-height:1.28;letter-spacing:-.015em;
  color:var(--bright);max-width:24ch;
}
.pmeta{
  margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);
}
.live{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  padding:0 7px;
}

.factsheet{
  margin-top:24px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto minmax(0,1fr);
}
.factsheet dt{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--ink-3);padding:12px 20px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.factsheet dd{
  margin:0;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:.875rem;line-height:1.7;color:var(--ink-2);
}
@media (max-width:600px){
  .factsheet{grid-template-columns:minmax(0,1fr)}
  .factsheet dt{border-bottom:0;padding-bottom:0}
  .factsheet dd{padding-top:4px}
}

/* ============ prose blocks (problem → approach → result) ============ */
.blocks{display:flex;flex-direction:column;gap:clamp(26px,4vw,38px)}
.block h4{
  font-family:var(--font-body);font-size:1.0625rem;font-weight:700;color:var(--bright);
  margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px 11px;align-items:baseline;
}
.block h4 .bn{font-family:var(--font-mono);font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.block h4 .when{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-3);font-weight:400;letter-spacing:.03em}
.block > p{font-size:.9375rem;line-height:1.8;color:var(--ink-2);max-width:72ch}
.block > p + p{margin-top:11px}
.block > p b{color:var(--ink);font-weight:600}
.pab{display:flex;flex-direction:column;gap:8px}
.pab > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;font-size:.9375rem;line-height:1.78}
.pab .tag{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;font-weight:600;
  color:var(--ink-3);padding-top:5px;white-space:nowrap;
}
.pab .tag.r{color:var(--accent)}
.pab p{color:var(--ink-2)}
.pab p b{color:var(--ink);font-weight:600}
.blist{display:flex;flex-direction:column;gap:9px;font-size:.9375rem;line-height:1.78;color:var(--ink-2)}
.blist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px}
.blist li::before{content:"";width:5px;height:5px;background:var(--accent);margin-top:12px}
.blist b{color:var(--ink);font-weight:600}
code{font-family:var(--font-mono);font-size:.85em;background:var(--surface-2);padding:1px 5px;border:1px solid var(--line);color:var(--ink-2)}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
table.data{border-collapse:collapse;width:100%;min-width:340px;font-size:.875rem;background:var(--surface)}
table.data th,table.data td{padding:9px 13px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left;white-space:normal}
table.data thead th{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--ink-3);font-weight:600;background:var(--surface-2);
}
table.data tbody td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.data tbody td:first-child{font-family:var(--font-body);color:var(--ink-2)}
table.data tr:last-child td{border-bottom:0}
table.data tr.win td{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink);font-weight:600}
table.data tr.lose td{color:var(--ink-3)}

/* ============ media placeholders ============ */
.media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.media .wide{grid-column:1 / -1}
@media (max-width:700px){.media{grid-template-columns:minmax(0,1fr)}}
.ph{
  border:1px dashed var(--line-strong);background:var(--surface);
  min-height:190px;padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
}
.ph svg{display:block;opacity:.6}
.ph .ph-k{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--accent)}
.ph .ph-t{font-size:.875rem;line-height:1.65;color:var(--ink-2);max-width:42ch}
.ph .ph-n{font-family:var(--font-mono);font-size:.6875rem;color:var(--ink-3)}

/* ============ pitch (project pages) ============ */
.pitch{margin-top:20px;max-width:62ch;font-size:1rem;line-height:1.85;color:var(--ink-2)}
.pitch strong{color:var(--ink);font-weight:600}

/* ============ footer ============ */
footer{margin-top:clamp(48px,7vw,76px);border-top:1px solid var(--line);padding:20px 0 44px}
.foot{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.9;color:var(--ink-3);
}
.foot .stackline{min-width:0}
.foot .footmeta{text-align:right}
.foot a{color:var(--ink-2);border:0}
.foot a:hover{color:var(--accent)}
@media (max-width:680px){.foot .footmeta{text-align:left}}

/* back to index — project pages */
.backrow{margin-top:clamp(44px,6vw,68px);border-top:1px solid var(--line);padding-top:20px}
.backlink{
  display:inline-flex;align-items:center;gap:9px;border-bottom:0;
  font-family:var(--font-mono);font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--accent);
}
.backlink .arw{display:inline-block;transition:transform .18s ease}
.backlink:hover .arw{transform:translateX(-4px)}
.siblings{margin-top:14px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.siblings a{
  border:0;border-bottom:1px solid var(--line);padding:11px 0;
  font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);
  transition:color .16s ease,padding-left .16s ease;
}
.siblings a:hover{color:var(--accent);padding-left:8px}
.backrow + footer{margin-top:34px}

/* ============================================================
   notes + side projects (2026-09-01)
   ============================================================ */

/* main page top bar: nav sits next to the mail link, not apart from it.
   the mail link never shrinks; the nav scrolls instead on very narrow screens. */
.topbar .navlinks + .mailtop{margin-left:0;flex:none}

/* ============ side projects (main page) ============ */
.spgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (max-width:760px){.spgrid{grid-template-columns:minmax(0,1fr)}}
.spcard{
  background:var(--surface);padding:clamp(18px,3vw,26px);
  display:flex;flex-direction:column;gap:11px;min-width:0;
}
.spcard .sptop{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px}
.spcard h3{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.4;color:var(--bright)}
#side .lede a{white-space:nowrap}
.spcard .sptag{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--accent);white-space:nowrap;
}
.spcard p{font-size:.875rem;line-height:1.78;color:var(--ink-2)}
.splinks{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px 18px}
.splinks a{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;
  color:var(--accent);border-bottom:1px solid transparent;
}
.splinks a:hover{border-bottom-color:var(--accent)}

/* ============ notes — list ============ */
.notelist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.nrow{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 20px;align-items:start;
  margin:0 calc(-1 * var(--pad));
  padding:20px var(--pad) 22px calc(var(--pad) - 2px);
  border-bottom:1px solid var(--line);border-left:2px solid transparent;
  transition:background-color .16s ease,border-color .16s ease;
}
.nrow .nn{
  font-family:var(--font-mono);font-size:1rem;font-weight:600;line-height:1.6;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
  transition:color .16s ease;
}
.nbody{display:flex;flex-direction:column;gap:8px;min-width:0}
.nmeta{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.nt{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,2.2vw,1.25rem);
  line-height:1.45;color:var(--bright);transition:color .16s ease;
  word-break:keep-all;overflow-wrap:break-word;
}
.nd{font-size:.875rem;line-height:1.78;color:var(--ink-2);max-width:64ch}
.ntags{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.02em;color:var(--ink-3)}
.nrow:hover,.nrow:focus-visible{background:var(--surface);border-left-color:var(--accent)}
.nrow:hover .nt,.nrow:focus-visible .nt{color:var(--accent)}
.nrow:hover .nn,.nrow:focus-visible .nn{color:var(--accent)}
.nrow:focus-visible{outline:2px solid var(--bright);outline-offset:-2px}
@media (max-width:560px){
  .nrow{grid-template-columns:40px minmax(0,1fr);gap:0 14px}
  .nrow .nn{font-size:.9375rem}
}

.notesub{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);
}
.notesub a{color:var(--ink-2);border-bottom:1px solid transparent}
.notesub a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ============ notes — article ============ */
.post{padding:clamp(32px,6vw,54px) var(--pad) 0}
.posthead{max-width:68ch;padding-bottom:22px;border-bottom:1px solid var(--line)}
.posthead .eyebrow{display:block;margin-bottom:14px}
.posttitle{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4375rem,3.8vw,2rem);line-height:1.36;letter-spacing:-.015em;
  color:var(--bright);word-break:keep-all;overflow-wrap:break-word;
}
.postmeta{
  margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.postinfo{
  margin-top:20px;padding:12px 14px;background:var(--surface-2);
  border-left:2px solid var(--accent);
  font-size:.875rem;line-height:1.75;color:var(--ink-2);
}
.postinfo b{color:var(--ink);font-weight:600}

.prose{max-width:68ch;margin-top:clamp(24px,4vw,34px);word-break:keep-all;overflow-wrap:break-word}
.prose p{font-size:1.0625rem;line-height:1.9;color:var(--ink-2)}
.prose p + p{margin-top:1.05em}
.prose h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.0625rem,2.5vw,1.3125rem);line-height:1.5;color:var(--bright);
  margin-top:clamp(36px,5.4vw,52px);padding-top:18px;margin-bottom:16px;
  border-top:1px solid var(--line);
}
.prose h2 + p{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font-size:.84em}
.postfoot{
  max-width:68ch;margin-top:clamp(32px,5vw,44px);padding-top:20px;
  border-top:1px solid var(--line);font-size:.9375rem;line-height:1.8;color:var(--ink-2);
}
.postfoot b{color:var(--ink);font-weight:600}

/* 한글 제목은 어절 단위로 줄바꿈 — 모바일에서 단어 중간이 끊기지 않게 */
.ptitle,.prow .pt{word-break:keep-all}

/* 실제 화면 캡처 — 공개 데이터로 촬영한 스크린샷 (2026-10-13) */
.shot{margin:0;border:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:11px 14px;font-size:.8125rem;line-height:1.65;color:var(--ink-2);word-break:keep-all}
.shot figcaption b{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--accent);margin-bottom:4px;font-weight:600}
.media-note{margin-top:12px;font-size:.8125rem;color:var(--ink-3);word-break:keep-all}

/* 전후 비교 막대 (프로젝트 페이지 공용) */
.cmpbars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;margin-top:8px}
.cmpbars .lbl{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);text-align:right}
.cmpbars .pair{display:flex;flex-direction:column;gap:3px}
.cmpbars .bar{display:flex;align-items:center;gap:8px;height:15px}
.cmpbars .fill{height:100%;min-width:2px}
.cmpbars .val{font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.cmpbars .after .val{color:var(--ink);font-weight:600}
.cmpbars .delta{color:var(--good)}
.cmplegend{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 4px;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-2)}
.cmplegend span{display:flex;align-items:center;gap:7px}
.cmplegend i{width:12px;height:12px;display:block}
.framefig{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
@media (max-width:760px){.framefig{grid-template-columns:minmax(0,1fr)}}
.framefig figure{margin:0;border:1px solid var(--line);background:var(--surface-2);padding:14px}
.framefig svg{display:block;width:100%;height:auto}
.framefig svg text{font-family:var(--font-mono)}
.framefig figcaption{margin-top:10px;font-size:.8125rem;line-height:1.65;color:var(--ink-2);word-break:keep-all}
.framefig figcaption b{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--accent);margin-bottom:4px;font-weight:600}
.shot > a{display:block}
.shot > a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ============ 2026-10-16 마감 손질 (Refero 반-AI-티 규칙 · Vercel Web Interface Guidelines) ============
   append only — 위 규칙을 덮어쓴다. 메인 전용 인라인 규칙은 index.html <style>에서 같은 기준으로 고쳤다. */

/* 1) 보조 글자색 대비: #5E6E71(바탕별 3.3~3.6:1) → #768A8E(가장 밝은 면 surface-2에서도 4.87:1) */
:root{--ink-3:#768A8E}

/* 2) 10~11px 글자를 12px로. 작은 글자에는 자간 .02em 이상 */
.eyebrow,.sb .k,.pillar .n,.tl .when,.stackcol h3,.paper .badge,.stat .k,.live,
.factsheet dt,.block h4 .when,.pab .tag,table.data thead th,.ph .ph-k,.ph .ph-n,
.foot,.spcard .sptag,.nmeta,.ntags,.shot figcaption b,.framefig figcaption b{font-size:.75rem}
.ph .ph-n,.foot{letter-spacing:.02em}
@media (max-width:820px){.prow .pm{font-size:.75rem}}
@media (max-width:520px){.prow .ps{font-size:.75rem}}

/* 3) 숫자 칸은 상호작용이 없으므로 상자 대신 메인 숫자 띠(.statband)와 같은 괘선으로 */
.stats{gap:0;background:none;border:0;border-top:2px solid var(--ink)}
.stat{background:none;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}

/* 4) 줄바꿈: 제목급은 균형, 본문 단락은 마지막 줄 외톨이 방지 */
.panel-title,.ptitle,.prow .pt{text-wrap:balance}
.pitch-g,.pitch,.sechead .lede,.block > p,.pab p,.blist li,.stat .d,.pillar p,
.shot figcaption,.framefig figcaption,.prose p{text-wrap:pretty}

/* 5) 본문 바로가기 — 키보드 포커스 때만 보인다 */
.skip{
  position:absolute;left:var(--pad);top:-48px;z-index:30;
  padding:6px 10px;background:var(--accent);color:var(--on-accent);border:0;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;
}
.skip:focus{top:8px}
main{scroll-margin-top:60px}

/* 6) 한글은 어절 단위로 줄바꿈(단어 중간 끊김 방지), 넘치는 긴 토큰만 강제로 끊는다 */
body{word-break:keep-all;overflow-wrap:break-word}