/* U-Draw 브랜드 토큰 — Drafting paper(라이트) / Plotter night(다크).
   redline = AI가 쓰는 것(제안 · 주 행동) · trace = 읽는 것(판독 · 출처 링크 · 포커스) */
:root{
  --paper:#f4f1ea;--raised:#fbf9f4;--sunken:#eae5d9;--grid:#dcd5c5;--grid-soft:#ebe6da;--rule:#8c8471;
  --ink:#333232;--muted:#5e6066;--field:#d6d6d6;
  --redline:#e5482a;--redline-ink:#c43a1e;--redline-deep:#a3301b;--redline-fill:#c43a1e;--on-redline:#fff;--redline-tint:#fadcd3;
  --trace:#0b7372;--trace-tint:#d3ebe8;
  --ok:#2f6b2f;--ok-tint:#dce8d6;
  --display:Archivo,"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#14161a;--raised:#1c1f24;--sunken:#0e1013;--grid:#2a2e35;--grid-soft:#1c1f24;--rule:#666c78;
  --ink:#d6d6d6;--muted:#9a9ca3;--field:#333232;
  --redline:#ff6a45;--redline-ink:#ff8a6b;--redline-deep:#ff8a6b;--redline-fill:#ff6a45;--on-redline:#14161a;--redline-tint:#3a1c15;
  --trace:#3ec6c0;--trace-tint:#10302f;
  --ok:#7ccf7c;--ok-tint:#15301a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--paper);color:var(--ink);font:16px/26px var(--sans);word-break:keep-all;overflow-wrap:anywhere;
  background-image:linear-gradient(var(--grid-soft) 1px,transparent 1px),linear-gradient(90deg,var(--grid-soft) 1px,transparent 1px);background-size:24px 24px}
img,svg{max-width:100%;height:auto}
a{color:var(--redline-ink);text-underline-offset:3px}
a:hover{color:var(--ink)}
a[href^="/assets/real/"],a[href^="https://github.com/"],a[href^="https://arxiv.org/"]{color:var(--trace)}
:focus-visible{outline:2px solid var(--trace);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
h1{font-family:var(--display);font-stretch:118%;font-weight:700;font-size:clamp(32px,5.6vw,58px);line-height:1.12;letter-spacing:-.02em;margin:.25em 0 .45em}
h2{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(24px,3.4vw,34px);margin:2.4em 0 .7em;padding-top:14px;border-top:1.5px solid var(--ink)}
h3{font-size:20px;line-height:28px;font-weight:600;margin:1.3em 0 .35em}
.lead{font-size:clamp(17px,2.1vw,19px);line-height:1.65;color:var(--muted);max-width:44em}
section,[id]{scroll-margin-top:88px}
/* 도면 시트처럼 절마다 번호를 단다 */
main{counter-reset:sec}
main>section:not(.hero):not(.evidence){counter-increment:sec}
main>section:not(.hero)>h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:6px;font:500 12px/16px var(--mono);letter-spacing:.08em;color:var(--muted)}
/* 머리 · 꼬리 */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--grid)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:60px}
.brand{display:inline-flex;align-items:center;color:var(--ink);margin-right:auto;padding:4px 0}
.logo{display:block;width:auto;height:28px}
.logo .fil{stroke:var(--redline)}
.top ul{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;list-style:none;margin:0;padding:0}
.top a{color:var(--muted);text-decoration:none;font-size:15px}
.top a:hover,.top a[aria-current=page]{color:var(--ink)}
.top a[aria-current=page]{font-weight:600;box-shadow:inset 0 -2px 0 var(--redline)}
.cta,.btn{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:2px;background:var(--raised);color:var(--ink)!important;font-weight:600;text-decoration:none}
.top .cta{height:32px;padding:0 12px;border-color:var(--redline-ink);color:var(--redline-ink)!important;background:transparent;box-shadow:none}
.btn{min-height:46px;padding:0 20px;margin:4px 8px 4px 0;font-size:15px}
.btn:hover{border-color:var(--ink)}
.btn.solid{background:var(--redline-fill);border-color:var(--redline-fill);color:var(--on-redline)!important}
.btn.solid:hover{background:var(--redline-deep);border-color:var(--redline-deep)}
.foot{margin-top:96px;border-top:1.5px solid var(--ink);background:var(--raised);padding:0 0 40px}
.fine{font-size:13px;line-height:21px;color:var(--muted)}
.tblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border:1.5px solid var(--ink);border-top:0;margin-bottom:20px}
.tblock>div{padding:12px 14px;border-top:1.5px solid var(--ink);border-right:1px solid var(--grid);min-width:0}
.tblock .k{display:block;font:500 11px/16px var(--mono);letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.tblock .v{font-size:17px;font-weight:600}
.endorse{display:block;height:30px;width:auto;color:var(--ink)}
.endorse .fil{stroke:var(--redline)}
.endorse .sep{stroke:var(--grid)}
.endorse .fld{fill:var(--field)}
.endorse .mk{fill:var(--ink)}
/* 첫 화면 무대 띠 */
.stagebar{margin:4px 0 16px;border:1px solid var(--grid);background:var(--raised);padding:10px 12px}
.stagebar .k{margin:0 0 8px;font:500 12px/16px var(--mono);letter-spacing:.06em;color:var(--muted)}
.stagebar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.stagebar li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;line-height:20px;padding-left:10px;border-left:2px solid var(--ink)}
.stagebar li+li{position:relative}
/* 마일스톤 카드 */
.milestones .card{position:relative}
.milestones .mk{display:inline-block;font:600 12px/16px var(--mono);letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.milestones ul{margin:.4em 0;padding-left:1.1em}
/* 읽기 · 쓰기 · 재기 표지 */
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:2px;font:500 11px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;vertical-align:middle}
.tag::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.tag[data-kind=read]{background:var(--trace-tint);color:var(--trace)}
.tag[data-kind=write]{background:var(--redline-tint);color:var(--redline-deep)}
.tag[data-kind=check]{background:var(--ok-tint);color:var(--ok)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
/* 조각 */
.hero{padding:48px 0 8px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
@media(min-width:860px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.card{background:var(--raised);border:1px solid var(--grid);border-radius:4px;padding:16px 18px;min-width:0}
.card h3{margin-top:0}
.card>.tag{margin-bottom:10px}
a.card{color:inherit;text-decoration:none;border-color:var(--rule)}
a.card:hover{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--redline)}
.real,.concept{position:relative;margin:0;background:#fff;border:1.5px solid var(--ink);border-radius:0;padding:28px 12px 12px;min-width:0;color:#333232}
/* 실물은 부품이 어두운 바탕(--paper dark)으로 그린 그대로라 틀도 어둡다 */
.real{background:#000;border-color:#000;color:#d6d6d6}
.real::before{content:"실물 출력";position:absolute;left:12px;top:7px;font:500 11px/14px var(--mono);letter-spacing:.08em;color:#9a9ca3}
.concept{border-style:dashed;padding-top:12px}
.real figcaption,.concept figcaption{color:#5e6066;font-size:13px;line-height:20px;margin-top:8px}
.real figcaption{color:#c9cbd0}
.concept a{color:#0b7372}
.real a{color:#3ec6c0}
.gallery{align-items:start}
.gallery .real img{display:block;width:100%;height:240px;object-fit:contain}
.excerpt{background:var(--sunken);border:1px solid var(--grid);border-radius:4px;padding:12px 14px;font:13px/20px var(--mono);overflow-x:auto;max-width:100%;margin:8px 0}
.excerpt mark{background:var(--trace-tint);color:inherit;border-radius:2px;box-shadow:inset 2px 0 0 var(--trace)}
.flow,.steps{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px}
.flow{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));counter-reset:f}
.flow li,.steps li{background:var(--raised);border:1px solid var(--grid);border-top:3px solid var(--ink);border-radius:0;padding:10px 14px 12px;counter-increment:f}
.steps li{border-top-width:1px;border-left:3px solid var(--ink)}
.flow li::before{content:counter(f,decimal-leading-zero);font:500 12px/18px var(--mono);letter-spacing:.08em;color:var(--muted);display:block}
.flow li[data-kind=read]{border-top-color:var(--trace)}
.flow li[data-kind=write]{border-top-color:var(--redline)}
.steps li[data-kind=read]{border-left-color:var(--trace)}
.steps li[data-kind=write]{border-left-color:var(--redline)}
.steps li[data-kind=check]{border-left-color:var(--ok)}
.steps li[data-kind=plan]{border-left-style:dashed;border-left-color:var(--muted)}
.steps{counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero) "  ";font:500 13px var(--mono);color:var(--muted)}
.grid2>*,.layers>*,.steps>*,.flow>*,.cards>*,.tiers>*,.boundary>*{min-width:0}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.tiers .card:nth-child(3){border:1.5px solid var(--ink)}
.layers{display:grid;gap:8px;max-width:680px}
.layers div{background:var(--raised);border:1px solid var(--grid);border-radius:4px;padding:12px 14px}
.layers .ai{border-left:3px solid var(--redline)}
.layers .det{border-left:3px solid var(--ink)}
.boundary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.zone{border:1.5px dashed var(--rule);border-radius:0;padding:16px;background:var(--raised)}
.zone ul{margin:.4em 0 0;padding-left:1.1em}
.outside{margin-top:12px;color:var(--muted);font-size:15px}
.faq dt{font-weight:600;margin-top:16px}
.faq dd{margin:4px 0 0}
.faq b{color:var(--ink)}
table{border-collapse:collapse;width:100%;background:var(--raised)}
.table{overflow-x:auto;max-width:100%}
th,td{border:1px solid var(--grid);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--sunken);font-weight:600;font-size:14px}
/* 첫 화면 — 도면 틀 위의 도식 */
.hero.home{padding-top:40px}
.sheet{position:relative;margin:0;background:var(--raised);border:1.5px solid var(--ink);padding:12px;
  background-image:linear-gradient(var(--grid-soft) 1px,transparent 1px),linear-gradient(90deg,var(--grid-soft) 1px,transparent 1px);background-size:16px 16px}
.sheet svg{display:block;width:100%;height:auto}
.sheet figcaption{font-size:13px;line-height:20px;color:var(--muted);margin-top:8px}
.dia .geo{fill:none;stroke:var(--ink);stroke-width:1.5}
.dia .dim{fill:none;stroke:var(--muted);stroke-width:1}
.dia .tb{fill:none;stroke:var(--ink);stroke-width:1.2}
.dia .ttx{fill:var(--muted);font:11px var(--mono);letter-spacing:.06em}
.dia .ttv{fill:var(--ink);font:500 12px var(--mono)}
.dia .rd{fill:none;stroke:var(--trace);stroke-width:1.3;stroke-dasharray:4 3}
.dia .rdt{fill:var(--trace);font:500 12px var(--mono)}
.dia .wr{fill:none;stroke:var(--redline);stroke-width:2.4;stroke-linecap:round}
.dia .wrt{fill:var(--redline-ink);font:500 12px var(--mono)}
.dia .ck{fill:var(--ok);font:600 12px var(--mono);letter-spacing:.06em}
.dia .scan{fill:var(--trace);opacity:0}
.dia .lab{fill:var(--muted);font:500 11px var(--mono);letter-spacing:.1em}
.evidence{margin-top:24px;align-items:start}
.evidence .real img{display:block;width:100%;height:auto}
@media screen and (prefers-reduced-motion:no-preference){
  .dia .scan{animation:dscan 10s cubic-bezier(.4,0,.2,1) infinite both}
  .dia .r1,.dia .r2{opacity:0;animation:dread 10s linear infinite both}
  .dia .r2{animation-delay:.5s}
  .dia .w1{stroke-dasharray:76;stroke-dashoffset:76;animation:dwrite 10s cubic-bezier(.2,.7,.2,1) infinite both}
  .dia .w2{opacity:0;animation:dlate 10s linear infinite both}
  .dia .c1{opacity:0;animation:dcheck 10s linear infinite both}
}
@keyframes dscan{0%{transform:translateX(0);opacity:0}2%{opacity:.85}22%{transform:translateX(400px);opacity:.85}25%,100%{transform:translateX(400px);opacity:0}}
@keyframes dread{0%,6%{opacity:0}10%{opacity:1}88%{opacity:1}95%,100%{opacity:0}}
@keyframes dwrite{0%,32%{stroke-dashoffset:76;opacity:1}44%{stroke-dashoffset:0}88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes dlate{0%,42%{opacity:0}47%{opacity:1}88%{opacity:1}95%,100%{opacity:0}}
@keyframes dcheck{0%,56%{opacity:0}60%{opacity:1}88%{opacity:1}95%,100%{opacity:0}}
/* 404 — 로고가 그려진다 */
.mark404{width:min(220px,50vw);height:auto;color:var(--ink);margin-top:24px}
.mark404 .fil{stroke:var(--redline)}
@media screen and (prefers-reduced-motion:no-preference){
  .mark404 .stem{stroke-dasharray:26;stroke-dashoffset:26;animation:lstem .8s cubic-bezier(.2,.7,.2,1) forwards}
  .mark404 .arc{stroke-dasharray:44;stroke-dashoffset:44;animation:lstem 1s cubic-bezier(.2,.7,.2,1) .6s forwards}
  .mark404 .x{opacity:0;animation:lx .4s ease-out 1.5s forwards}
}
@keyframes lstem{to{stroke-dashoffset:0}}
@keyframes lx{to{opacity:1}}
/* reveal: JS가 있을 때만 숨기고, 동작 줄이기면 숨기지 않는다 */
@media screen and (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
  html.js [data-reveal].in{opacity:1;transform:none}
}
@media print{[data-reveal]{opacity:1!important;transform:none!important}.top{position:static}}
/* 흰 틀 안에서는 다크 모드여도 라이트 값을 쓴다 */
.concept{--muted:#5e6066;--ink:#333232;--redline-ink:#c43a1e;--trace:#0b7372}