/* Aeternaxis — 원고(manuscript) 레이아웃.
   페이지 왼쪽 여백과 본문 사이에 고정된 세로축이 있고, 문단마다 축 위에 상태 점과 여백 메모가 붙는다. */
:root{
  --paper:#eef0ec;
  --sheet:#f8f9f6;
  --ink:#121418;
  --ink-2:#4b525d;
  --ink-3:#868d97;
  --rule:#d3d8d9;
  --pen:#cf3329;
  --pen-wash:#f6dcd8;
  --blue:#1f3fae;
  --blue-wash:#dde4f7;
  --term:#121418;
  --serif:"Newsreader","Hahmlet",Georgia,serif;
  --sans:"IBM Plex Sans","IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --hand:"Caveat","Nanum Pen Script",cursive;
  --stage-lit:#eef0ec; --stage-dim:#b4b8b1;
  --mg:300px; --gut:64px; --col:720px; --ax:-10px;
  --ease:cubic-bezier(.22,.8,.24,1);
}
:lang(ko){--hand:"Nanum Pen Script","Caveat",cursive}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1113; --sheet:#16191c; --ink:#e9eae6; --ink-2:#b2b8bf; --ink-3:#7c838d; --rule:#2b3036;
    --pen:#ff6b5e; --pen-wash:#3b2220; --blue:#93a9ff; --blue-wash:#1e2645; --term:#08090b;
    --stage-lit:#3a3f45; --stage-dim:#0f1113;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1113; --sheet:#16191c; --ink:#e9eae6; --ink-2:#b2b8bf; --ink-3:#7c838d; --rule:#2b3036;
  --pen:#ff6b5e; --pen-wash:#3b2220; --blue:#93a9ff; --blue-wash:#1e2645; --term:#08090b;
  --stage-lit:#3a3f45; --stage-dim:#0f1113;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden}
:lang(ko) body,body:lang(ko){word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue-wash)}

/* the axis */
.axis{position:fixed;top:0;bottom:0;left:var(--ax);width:2px;margin-left:-1px;background:var(--ink);z-index:1;transform-origin:top;pointer-events:none}
.boot .axis{transform:scaleY(0)}
.axis{transition:transform 1.3s cubic-bezier(.7,0,.2,1)}

.page{max-width:calc(var(--mg) + var(--gut) + var(--col) + 80px);margin:0 auto;padding:0 32px;position:relative;z-index:2}
.row{display:grid;grid-template-columns:var(--mg) var(--gut) minmax(0,var(--col));position:relative}
.row>.mg{grid-column:1;text-align:right;padding-right:6px}
.row>.ax{grid-column:2;position:relative}
.row>.tx{grid-column:3;min-width:0}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 97%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .row{height:76px;align-items:center}
.tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;font-family:var(--mono);font-size:12px;line-height:1;color:var(--ink-3);white-space:nowrap;transition:opacity .4s}
.on-stage .top .tools{opacity:0;pointer-events:none}
.tools-m{display:none}
.ledger{display:inline-flex;gap:12px}
.ledger b{font-weight:500;color:var(--ink)}
.ledger .lr b{color:var(--pen)}
.ledger .lk b{color:var(--blue)}
.ledger b.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}
.logo{display:block;position:relative;width:56px;height:56px;margin-left:calc(var(--gut) / 2 - 28px);padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .5s cubic-bezier(.3,1.35,.4,1)}
.logo2d{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);overflow:visible;transition:color .4s .1s}
.logo3d{position:absolute;inset:0;background:url(/assets/ax-sprite.webp) 0 0/600% 600% no-repeat;background-position:calc(var(--fx,0) * 20%) calc(var(--fy,0) * 20%);opacity:0}
.gl:not(.docked) .top .logo{visibility:hidden}
.ax-fly{position:fixed;left:0;top:0;z-index:31;pointer-events:none;color:var(--ink);visibility:hidden;overflow:visible}
.gl.folded .stage-gl{visibility:hidden}
.spec3d{background:none!important;cursor:pointer}
.spec3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spec2d{position:absolute;left:7.3%;top:7.3%;width:85.4%;height:85.4%;color:var(--ink);overflow:visible;opacity:0;pointer-events:none}
.spec3d:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.spec3d.grabbing{cursor:grabbing}
.logo.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
.top .tx{display:flex;align-items:center;justify-content:space-between;gap:18px}
.word{font-family:var(--serif);font-size:25px;letter-spacing:-.01em;text-decoration:none;line-height:1}
.nav{display:flex;align-items:center;gap:20px;font-size:14px;color:var(--ink-2)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
.xray{font:inherit;color:var(--ink-2);background:transparent;border:0;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.xray::before{content:"";width:9px;height:9px;border-radius:2px;border:1.5px solid var(--blue);transition:background .2s}
.xray:hover{color:var(--ink)}
.xray[aria-pressed="true"]{color:var(--blue)}
.xray[aria-pressed="true"]::before{background:var(--blue)}

/* hero */
.hint svg{display:block;margin:6px 0 0 auto;width:70px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round}

/* guarded paragraphs */
.g-row{padding:0 0 34px;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .g-row.pre{opacity:0;transform:translateY(18px)}
.g-row .tx p{margin:0;font-family:var(--serif);font-size:25px;line-height:1.55;letter-spacing:-.005em;border-radius:4px;padding:2px 10px;margin-left:-10px;transition:background .3s,box-shadow .3s;cursor:text;outline:none;white-space:pre-wrap}
:lang(ko) .g-row .tx p{font-size:21px;line-height:1.85;letter-spacing:-.01em}
.g-row .tx p:hover{background:color-mix(in srgb,var(--sheet) 70%,transparent)}
.g-row .tx p:focus{background:var(--sheet);box-shadow:0 0 0 1px var(--rule),0 12px 30px -20px rgba(0,0,0,.35)}
.g-row .tx p.flash{animation:flash 1s ease}
@keyframes flash{0%{background:var(--pen-wash)}100%{background:transparent}}
.g-row .tx p.flash-ok{animation:flashok 1.2s ease}
@keyframes flashok{0%{background:var(--blue-wash)}100%{background:transparent}}
.dot{position:absolute;left:50%;top:15px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:background .3s,border-color .3s,transform .3s}
:lang(ko) .dot{top:14px}
.is-busy .dot{border-color:var(--blue);transform:scale(1.3)}
.is-kept .dot{background:var(--blue);border-color:var(--blue)}
.is-reverted .dot{background:var(--pen);border-color:var(--pen)}
.is-reverted .dot{animation:ping .8s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pen) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.mg .lab{display:block;font-family:var(--hand);font-size:30px;line-height:1;color:var(--ink);margin:4px 0 10px}
:lang(ko) .mg .lab{font-size:32px}
.mg .pno{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:9px}
.g-row.sec{padding-top:56px}
.note{margin-top:10px;min-height:1px}
.note .h{display:block;font-family:var(--hand);font-size:31px;line-height:1.05}
:lang(ko) .note .h{font-size:30px}
.note .d{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink-2);word-break:break-word}
.note.revert .h{color:var(--pen)}
.note.keep .h{color:var(--blue)}
.note.live .h{color:var(--ink-3)}
.note .w{display:inline-block;white-space:nowrap}
.note .c{display:inline-block;animation:write .22s cubic-bezier(.4,.1,.5,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ghost edit */
.ed{border-radius:3px;transition:background .3s,color .3s}
.ed.sel{background:var(--blue-wash);box-shadow:0 0 0 2px var(--blue-wash)}
.ed.typing{background:var(--blue-wash)}
.ed.typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--blue);vertical-align:-.12em;margin-left:1px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ed.bad{color:var(--pen);background:var(--pen-wash);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--pen)}
.ed.kept{background:var(--blue-wash)}
.ed.back{color:var(--ink);background:transparent;text-decoration:none}

/* x-ray */
.px{border-bottom:1.5px solid var(--blue);background:color-mix(in srgb,var(--blue-wash) 75%,transparent);border-radius:2px;position:relative}
.px[data-k]::after{content:attr(data-k);position:absolute;left:0;top:-1.5em;font-family:var(--mono);font-size:10.5px;line-height:1;color:var(--blue);white-space:nowrap;pointer-events:none;opacity:.9}
body.xray-on .g-row .tx p{line-height:1.9}
:lang(ko) body.xray-on .g-row .tx p{line-height:2.1}

/* specimens under product paragraphs */
.meta{margin:12px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 16px}
.meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.meta a:hover{border-color:var(--ink)}
.term{margin:16px 0 0;background:var(--term);color:#dfe3e8;border-radius:6px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow-x:auto;white-space:pre;max-width:520px}
.term .c{color:#7d8590}
.term .p{color:#93a9ff}

/* credit, sign-off, footer */
.credit{margin-top:12px;font-family:var(--hand);font-size:22px;line-height:1.15;color:var(--ink-2)}
:lang(ko) .credit{font-size:23px}
.credit a{text-underline-offset:3px}
.sign{margin:22px 0 0;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-2)}
.sign a{color:var(--ink)}
.foot{padding:90px 0 70px}
.foot .tx{font-size:13px;color:var(--ink-3);line-height:1.7;border-top:1px solid var(--rule);padding-top:20px}
.foot .tx p{margin:0 0 10px;max-width:46em}
.foot .links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.try{font:inherit;font-size:13px;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  :root{--mg:220px;--gut:56px}
  .g-row .tx p{font-size:23px}
}
@media (max-width:820px){
  :root{--mg:0px;--gut:36px}
  .page{padding:0 16px 0 10px}
  .row{grid-template-columns:var(--gut) minmax(0,1fr)}
  .row>.ax{grid-column:1;grid-row:1}
  .row>.tx{grid-column:2;grid-row:1}
  .row>.mg{grid-column:2;grid-row:2;text-align:left;padding:0}
  .g-row>.mg{display:flex;flex-direction:column}
  .g-row .mg .lab{order:-1}
  .g-row.sec .mg{grid-row:1}
  .g-row.sec .tx{grid-row:2}
  .g-row.sec .ax{grid-row:2}
  .mg .pno{display:none}
  .top .row{height:64px}
  .top .mg{display:none}
  .word{font-size:21px}
  .nav .opt{display:none}
  .nav{gap:12px}
  .tools-m{display:flex;justify-content:flex-start;margin:0 0 14px}
  .g-row .tx p,:lang(ko) .g-row .tx p{font-size:19px;line-height:1.7}
  .g-row{padding-bottom:28px}
  .g-row.sec{padding-top:36px}
  .hint svg{display:none}
  .note{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* name specimen: the same sprite, larger; drag to turn */
.spec3d{display:block;position:relative;width:180px;height:180px;margin:18px 0 0 -20px;user-select:none;-webkit-user-select:none;background:url(/assets/ax-sprite.webp) 0 0/600% 600% no-repeat;background-position:calc(var(--fx,0) * 20%) calc(var(--fy,0) * 20%);cursor:grab;touch-action:pan-y}


}
.g-row{scroll-margin-top:96px}
:lang(ko) .sign{font-style:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo3d,:root:not([data-theme="light"]) .spec3d{background-image:url(/assets/ax-sprite-dark.webp)}}
:root[data-theme="dark"] .logo3d,:root[data-theme="dark"] .spec3d{background-image:url(/assets/ax-sprite-dark.webp)}

/* 첫 화면: WebGL 무대 */
.stage{--scene:110vh;position:relative;height:calc(100vh + var(--scene));height:calc(100svh + var(--scene));margin-top:-76px}
.stage-pin{position:sticky;top:0;z-index:15;height:100vh;height:100svh;min-height:540px;pointer-events:none}
html:not(.gl) .stage{--scene:0px}
.gl .home main,.gl body.home>main{margin-top:-42vh;margin-top:-42svh}
.home .lead{padding:0 0 8px}
.gl .home .axis,.gl body.home .axis{transition:none}
.stage-gl{display:none}
.gl .stage-gl{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10;touch-action:pan-y;cursor:grab}
.grabbing .stage-gl{cursor:grabbing}
.docked .stage-gl{visibility:hidden}
html:not(.on-stage) .stage-gl{pointer-events:none}
.no-gl .stage{background:var(--paper) url(/assets/ax-poster.jpg) center/cover no-repeat}
.stage-ui{position:absolute;left:0;right:0;bottom:8vh;z-index:15;pointer-events:none}
.stage-ui .row{align-items:end}
.stage h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.2vw,78px);line-height:1;letter-spacing:-.025em;width:min(900px,calc(100vw - var(--ax) - 48px))}
:lang(ko) .stage h1{font-size:clamp(34px,4.6vw,66px);line-height:1.2;letter-spacing:-.035em;font-weight:300}
.stage h1 span{display:block}
.stage h1 em{font-style:italic}
:lang(ko) .stage h1 em{font-style:normal;color:var(--ink-3)}
/* 제목은 축에서 뽑혀 나오듯: 축 쪽 가장자리부터 드러나며 흐림이 걷힌다 */
.stage h1 .ln{will-change:transform}
.stage h1 .li{display:block;clip-path:inset(-12% -6% -24% -2%);transition:clip-path 1.25s cubic-bezier(.65,0,.2,1) 1.75s,transform 1.5s cubic-bezier(.16,1,.3,1) 1.75s,filter 1s ease 1.8s,opacity .5s 1.75s}
.stage h1 .ln+.ln .li{transition-delay:1.95s,1.95s,2s,1.95s}
.boot .stage h1 .li{clip-path:inset(-12% 100% -24% -2%);transform:translateX(-.45em);filter:blur(7px);opacity:0}
.stage .mg{pointer-events:auto;padding-right:28px;text-align:right}
.stage .mg>*{will-change:transform,opacity}
.stage .drag{margin:0 0 10px;font-family:var(--hand);font-size:23px;line-height:1.15;color:var(--blue)}
.stage .drag span{display:inline-block;clip-path:inset(-20% -4% -30% -4%);transition:clip-path 1s cubic-bezier(.65,0,.2,1) 2.35s}
.boot .stage .drag span{clip-path:inset(-20% -4% -30% 100%)}
:lang(ko) .stage .drag{font-size:25px}
.mats{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.mats button{position:relative;width:26px;height:26px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:transform .5s cubic-bezier(.3,1.6,.4,1),opacity .5s,translate .5s}
.mats button::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1px solid var(--ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.4,1)}
.mats button[aria-pressed="true"]::after{opacity:1;transform:none}
.mats button:hover{transform:translateY(-2px)}
.mats .sw{width:14px;height:14px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.mat-name{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-right:8px;transition:opacity .5s 2.4s}
.mat-name.swap{animation:matin .45s cubic-bezier(.2,1,.3,1)}
@keyframes matin{from{opacity:0;transform:translateY(6px)}}
.boot .mat-name{opacity:0}
/* 재질 점은 축에서 하나씩 굴러 나온다 */
.mats button{transition-delay:0s,0s,0s}
.boot .mats button{opacity:0;translate:calc(28px + var(--k,0) * 30px) 0;transform:scale(.3)}
.mats button:nth-of-type(1){--k:4}.mats button:nth-of-type(2){--k:3}.mats button:nth-of-type(3){--k:2}.mats button:nth-of-type(4){--k:1}.mats button:nth-of-type(5){--k:0}
html:not(.boot) .mats button{transition:transform .5s cubic-bezier(.3,1.6,.4,1),opacity .4s ease calc(2.45s + (4 - var(--k)) * .07s),translate .9s cubic-bezier(.16,1,.3,1) calc(2.45s + (4 - var(--k)) * .07s)}
.sw0{background:linear-gradient(135deg,#e9f6f7,#a9cfd4 55%,#f4fbfb)}
.sw1{background:linear-gradient(135deg,#f2f3f5,#8b9098 50%,#d9dce0)}
.sw2{background:radial-gradient(circle at 35% 30%,#fff,#e2dfd8 70%)}
.sw3{background:radial-gradient(circle at 35% 30%,#555,#0b0c0e 60%)}
.sw4{background:radial-gradient(circle at 35% 30%,#ff8a7e,#c4271e 60%,#7d130d)}
.stage-caps{position:fixed;inset:0;z-index:15;pointer-events:none}
html:not(.gl) .stage-caps{display:none}
.stage-cap{position:absolute;left:0;top:0;opacity:0;will-change:transform}
.stage-cap>span{display:block;transform:translateX(-50%);white-space:nowrap;font-family:var(--hand);font-size:24px;color:var(--blue)}
.stage-cap i{font-style:normal}
.stage-cap b{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--ink);margin-left:4px}
.gl:not(.on-stage):not(.docked) .stage-gl{z-index:30}
.on-stage .top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.gl.on-stage .axis{opacity:0}
.axis{transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .4s}
.lead{padding:96px 0 8px}
.lead .hint{display:block;font-family:var(--hand);font-size:24px;line-height:1.15;color:var(--blue)}
:lang(ko) .lead .hint{font-size:26px}
@media (max-width:820px){
  .stage{margin-top:-64px;--scene:90vh}
  .stage-ui{bottom:5vh}
  .stage-ui .row{grid-template-columns:var(--gut) minmax(0,1fr)}
  .stage .mg{grid-row:2;grid-column:2;text-align:left;padding:18px 0 0}
  .mats{justify-content:flex-start}
  .stage .drag{font-size:21px}
  .stage-cap>span{font-size:19px}
  .stage-cap b{font-size:21px}
  .lead{padding:56px 0 0}
  .lead .mg{grid-column:2}
  .logo{width:40px;height:40px;margin-left:calc(var(--gut) / 2 - 20px)}
  .top .word{margin-left:4px}
}

/* ====================================================================
   공통 틀: 축이 부풀어 생기는 목차, 페이지 전환의 먹, 러닝 헤드, 바닥글
   ==================================================================== */
html{scrollbar-gutter:stable;overflow-x:clip}
body{overflow-x:clip}
.ink{position:fixed;inset:0;z-index:40;background:var(--ink);visibility:hidden;pointer-events:none;clip-path:inset(0 100% 0 0);will-change:clip-path}
.ax-in .ink{visibility:visible;clip-path:none}
.ax-in .ink,.arriving .ink{z-index:60}
.leaving .top,.leaving .index{opacity:0;transition:opacity .18s}
.leaving .top .logo{transition:none}
.leaving{cursor:progress}
.veil{position:fixed;inset:0;z-index:61;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none;visibility:hidden;color:var(--paper)}
.ax-in .veil,.leaving .veil,.arriving .veil{visibility:visible}
.veil-mark{display:block;width:132px;height:132px;overflow:visible;color:var(--paper);will-change:transform;transition:color .5s .3s}
.arrived .veil-mark{color:var(--ink)}
.leaving .veil-mark{animation:vin .34s cubic-bezier(.3,1.5,.4,1) .04s both}
@keyframes vin{from{opacity:0;transform:scale(.4) rotate(-24deg)}}
.veil-label{margin:0;font-family:var(--serif);font-size:24px;line-height:1.2;letter-spacing:-.01em;opacity:0;transform:translateY(10px);transition:opacity .2s .1s,transform .35s cubic-bezier(.2,1,.3,1) .1s}
.leaving .veil-label,.ax-in .veil-label,.arriving .veil-label{opacity:1;transform:none}
.arrived .veil-label{opacity:0;transform:translateY(-8px);transition:opacity .15s,transform .3s}
.arriving .axis{transition:none;transform:none}
.axis.pulse{animation:axpulse .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes axpulse{0%{transform:scaleX(3.5)}100%{transform:scaleX(1)}}
.fresh main .r:first-child .tx>*,.fresh main .r:first-child .mg>*{animation:rise .6s cubic-bezier(.16,1,.3,1) both}
.fresh main .r:first-child .tx>:nth-child(2){animation-delay:.05s}
.fresh main .r:first-child .tx>:nth-child(3){animation-delay:.1s}
.fresh main .r:first-child .tx>:nth-child(n+4){animation-delay:.14s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

/* 목차 */
.ix-scrim{position:fixed;inset:0;z-index:39;display:none}
.idx-open .ix-scrim{display:block}
.idx-open .top{z-index:41;background:linear-gradient(to right,transparent calc(var(--ixw) + 1px),color-mix(in srgb,var(--paper) 94%,transparent) calc(var(--ixw) + 1px));backdrop-filter:none;-webkit-backdrop-filter:none}
.top .mg{transition:opacity .3s}
.idx-anim .top .mg{opacity:0}
.idx-open .top .logo{transform:translateX(calc(var(--ixw) - var(--ax) - 46px))}
.idx-open .top .logo2d{color:var(--paper)}
.gl.idx-open .top .logo{visibility:visible}
main,.site-foot,.stage-ui,.top .tx{transition:transform .55s cubic-bezier(.3,1.15,.4,1),opacity .35s}
.idx-open main,.idx-open .site-foot,.idx-open .stage-ui{transform:translateX(var(--push));opacity:.3}
.idx-open .top .tx{transform:translateX(var(--push))}
.index{position:fixed;left:0;top:0;bottom:0;width:calc(var(--ixw) + 14px);z-index:42;color:var(--paper);pointer-events:none}
.index[hidden]{display:none}
.ix-in{position:absolute;left:0;right:0;top:86px;bottom:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:18px 54px 40px 20px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;pointer-events:auto}
.ix-in::-webkit-scrollbar{display:none}
.st{opacity:0;transform:translateX(30px);transition:opacity .2s,transform .3s}
.idx-open .st{opacity:1;transform:none;transition:opacity .4s var(--ease) calc(.1s + var(--i,0) * .028s),transform .6s cubic-bezier(.16,1,.3,1) calc(.1s + var(--i,0) * .028s)}
.ix-k{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 52%,var(--ink))}
.ix-pages,.ix-here{list-style:none;margin:0 0 34px;padding:0}
.ix-pages li{position:relative;margin:0 0 20px}
.ix-pages a{display:block;text-decoration:none;color:var(--paper)}
.ix-pages b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.015em;transition:transform .5s cubic-bezier(.2,1,.3,1)}
.ix-pages .n{font-family:var(--mono);font-size:11px;letter-spacing:.04em;vertical-align:top;margin-right:10px;color:color-mix(in srgb,var(--paper) 50%,var(--ink));position:relative;top:4px}
.ix-pages i{display:block;margin-top:5px;font-style:normal;font-family:var(--hand);font-size:22px;line-height:1.1;color:color-mix(in srgb,var(--paper) 62%,var(--ink))}
:lang(ko) .ix-pages i{font-size:23px}
.ix-pages a:hover b,.ix-pages a:focus-visible b{transform:translateX(-8px)}
.ix-dot{position:absolute;right:-39.5px;top:13px;width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper);transition:background .3s,transform .4s cubic-bezier(.3,1.6,.4,1);pointer-events:none}
.ix-pages li:hover .ix-dot,.ix-pages a:focus-visible+.ix-dot{background:var(--paper);transform:scale(1.25)}
.ix-pages li:has(a[aria-current]) .ix-dot{background:var(--pen)}
.ix-here li{position:relative;margin:0 0 6px}
.ix-here a{font-size:15px;color:color-mix(in srgb,var(--paper) 75%,var(--ink));text-decoration:none}
.ix-here a:hover,.ix-here a.on{color:var(--paper)}
.ix-here a.on::before{content:"→ ";color:var(--pen)}
.ix-tick{position:absolute;right:-42px;top:50%;width:8px;height:2px;margin-top:-1px;background:var(--paper);opacity:.5}
.ix-here li:has(a.on) .ix-tick{opacity:1;width:14px;right:-42px}
.ix-foot{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:13px}
.ix-foot p{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 14px}
.ix-foot a{color:color-mix(in srgb,var(--paper) 78%,var(--ink));text-decoration:none}
.ix-foot a:hover,.ix-foot a[aria-current]{color:var(--paper)}
.ix-lang a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.ix-theme{gap:4px!important}
.ix-theme button{font:inherit;font-size:12px;color:var(--paper);background:transparent;border:1px solid color-mix(in srgb,var(--paper) 35%,var(--ink));border-radius:99px;padding:4px 11px;cursor:pointer}
.ix-theme button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.index :focus-visible{outline-color:var(--paper)}

/* 목차 버튼 */
.ixbtn{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;padding:6px 13px 6px 11px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.ixbtn svg{width:8px;height:14px;stroke:currentColor;stroke-width:1.6;fill:currentColor;display:block}
.ixbtn:hover,.ixbtn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.nav a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* 러닝 헤드 */
.runhead{display:block;text-align:right;font-family:var(--hand);font-size:27px;line-height:1;color:var(--ink-2)}
:lang(ko) .runhead{font-size:29px}
.runhead .w{white-space:pre}
.runhead .c{display:inline-block;animation:write .22s cubic-bezier(.4,.1,.5,1) both;animation-delay:calc(var(--i) * 38ms)}

/* 바닥글: 축은 여기서 마크로 끝난다 */
.site-foot{position:relative;z-index:2;margin-top:40px}
.site-foot .row{align-items:stretch}
.site-foot .mg{padding-top:96px}
.endnote{margin:0;font-family:var(--hand);font-size:24px;line-height:1.1;color:var(--ink-3)}
:lang(ko) .endnote{font-size:26px}
.endmark{position:relative;background:linear-gradient(to bottom,transparent 0 176px,var(--paper) 176px)}
.endmark svg{position:absolute;left:50%;top:80px;width:96px;height:96px;margin-left:-48px;color:var(--ink);overflow:visible}
.site-foot .tx{padding:92px 0 64px 26px;font-size:13.5px;color:var(--ink-3)}
.fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:22px;padding-bottom:30px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.fcols h2{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fcols a{display:block;margin:0 0 6px;color:var(--ink);text-decoration:none;font-size:14.5px;overflow-wrap:anywhere}
.fcols a:hover{text-decoration:underline;text-underline-offset:3px}
.fine{margin:0 0 8px;line-height:1.7;max-width:52em}
.fine a{color:var(--ink-2)}
.demo-note{padding:40px 0 0}
.demo-note .tx{font-size:13px;color:var(--ink-3);line-height:1.7;max-width:46em}
.demo-note p{margin:0 0 8px}

/* ====================================================================
   하위 페이지: 같은 원고 격자, 문단마다 축 위의 점과 여백 이름표
   ==================================================================== */
.sub{padding-top:20px}
.r{padding:0 0 30px}
.r.sec{padding-top:64px}
.r.tight{padding-bottom:6px}
.r .dot{top:13px}
.r .lab{font-size:30px}
.hero-row{padding:96px 0 38px}
.hero-row .dot{top:24px;background:var(--ink)}
.ph{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.2vw,58px);line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
:lang(ko) .ph{font-weight:300;font-size:clamp(30px,3.5vw,48px);line-height:1.3;letter-spacing:-.035em;font-family:"Hahmlet",var(--serif)}
.lede{margin:22px 0 0;font-family:var(--serif);font-size:23px;line-height:1.55;color:var(--ink-2);max-width:34em}
:lang(ko) .lede{font-size:19.5px;line-height:1.85;font-family:"Hahmlet",var(--serif)}
.lede.sm{font-size:17px}
.body{margin:0 0 14px;font-family:var(--serif);font-size:21px;line-height:1.6}
:lang(ko) .body{font-size:18px;line-height:1.9;font-family:"Hahmlet",var(--serif)}
.body.sm{font-size:17px;margin-top:14px;color:var(--ink-2)}
:lang(ko) .body.sm{font-size:16px}
.body code,.step-t code,.aside-p code,.spec code{font-family:var(--mono);font-size:.82em;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;padding:1px 5px}
.aside{margin:10px 0 0;font-family:var(--hand);font-size:22px;line-height:1.15;color:var(--blue)}
:lang(ko) .aside{font-size:24px}
.aside-p{margin:16px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.fine-p{margin:22px 0 0;font-size:13px;line-height:1.7;color:var(--ink-3);max-width:46em}
.r .meta{margin-top:18px}
.r .term{max-width:100%}
.term.wide{max-width:100%}
.lab.sm{font-size:25px!important;margin:0}
:lang(ko) .lab.sm{font-size:27px!important}

/* 판(plate): 축을 가로질러 페이지 폭 전체를 쓰는 실험대 */
.plate{padding:8px 0 20px}
.plate>.ax{display:none}
.plate>:not(.ax){grid-column:1/-1}

/* 축 위의 단계 */
.step{padding:0 0 2px}
.step .tx{min-height:46px}
.step-t{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);padding-top:6px}
.step .lab.sm{padding-top:2px}
.step .dot{top:11px}
.step .dot.gate{width:15px;height:15px;margin-left:-7.5px;top:9px;border-radius:2px;transform:rotate(45deg);background:var(--ink)}
.step.ok .dot{background:var(--blue);border-color:var(--blue)}
.step.ok .lab{color:var(--blue)}
.step.no .dot{background:var(--pen);border-color:var(--pen)}
.step.no .lab{color:var(--pen)}
.step.wip .dot{border-style:dashed;background:var(--paper)}
.step.gate .step-t{color:var(--ink)}
.flow{position:relative;padding-top:12px}
.token{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--paper) 85%,transparent);opacity:0;z-index:3;pointer-events:none}
.token.pass{background:var(--blue)}
.token.fail{background:var(--pen)}
.step.hit .dot{animation:hit2 .5s cubic-bezier(.3,1.6,.4,1)}
.step.hit .dot.gate{animation:hitg .5s cubic-bezier(.3,1.6,.4,1)}
@keyframes hit2{50%{transform:scale(1.6)}}
@keyframes hitg{50%{transform:rotate(45deg) scale(1.5)}}

/* 표 */
.spec{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:15px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:9px 14px 9px 0;border-bottom:1px solid var(--rule)}
.spec th{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
.spec td:first-child{white-space:nowrap;color:var(--ink-2)}
.spec .ex{font-family:var(--serif);font-size:16px}
.spec .y{color:var(--pen);background:var(--pen-wash);border-radius:2px;padding:0 2px}
.spec .x{color:var(--blue);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px}
.codes-t td:nth-child(3){white-space:nowrap}
.nums td{font-size:14.5px}
.nums td.v{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.nums td:last-child{color:var(--ink-3)}

/* Rigorloom: 문서 작업 */
.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:20px 0 0}
.ops h3{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:19px}
.ops p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.files{margin:24px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);line-height:2;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:12px 16px;overflow-x:auto;white-space:pre}
.files .lock{color:var(--blue)}
.files .new{color:var(--ink-3)}
.surfaces{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.surfaces div{border:1px solid var(--rule);border-radius:99px;padding:6px 14px;font-size:13.5px;display:flex;gap:8px;align-items:baseline}
.surfaces span{color:var(--ink-3);font-size:12.5px}

/* Rigorloom: 검사대 */
.bench{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid var(--rule);background:var(--sheet);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -48px rgba(0,0,0,.45)}
.sheet-doc{position:relative;padding:34px 34px 26px 64px;border-right:1px solid var(--rule);background:repeating-linear-gradient(to bottom,transparent 0 33px,color-mix(in srgb,var(--rule) 55%,transparent) 33px 34px);background-position:0 70px;word-break:keep-all}
.sheet-doc::before{content:"";position:absolute;top:0;bottom:0;left:44px;width:1px;background:var(--pen);opacity:.45}
.filename{font-size:13px;color:var(--ink-3);margin:0 0 18px;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono)}
.para{font-family:var(--serif);font-size:18px;line-height:34px;margin:0 0 34px;position:relative}
.para .pno{position:absolute;left:-46px;top:0;width:30px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.para.dim{color:var(--ink-3)}
.para.target .was{display:none}
.para.target.reverted .live{display:block;color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--pen)}
.para.target.reverted .was{display:inline}
.para .tag{display:none;margin-left:6px;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--pen);border:1.5px solid var(--pen);padding:0 6px;line-height:20px;vertical-align:2px;border-radius:2px}
.para.target.reverted .tag{display:inline-block}
.para.flash{animation:flash .9s ease-out}
.tok{border-bottom:1.5px solid transparent}
.tok.same{border-bottom-color:var(--blue)}
.tok.diff{background:var(--pen-wash);color:var(--pen);border-bottom-color:var(--pen)}
.verifier{display:flex;flex-direction:column;min-width:0}
.vhead{padding:22px 24px 16px;border-bottom:1px solid var(--rule)}
.vhead h3{margin:0;font-family:var(--serif);font-weight:500;font-size:20px}
.vhead p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.presets{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.presets button,.codes button{font:inherit;font-size:13px;padding:5px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:99px}
.presets button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.editor{padding:14px 24px;border-bottom:1px solid var(--rule)}
.editor label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px;font-family:var(--mono)}
.editor textarea{width:100%;min-height:116px;resize:vertical;font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:10px 12px;word-break:keep-all}
.audit{width:100%;border-collapse:collapse;font-size:13.5px}
.audit th{text-align:left;font-weight:400;font-family:var(--mono);color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--rule);font-size:11.5px}
.audit td{padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent);vertical-align:top}
.audit td:first-child,.audit th:first-child{padding-left:24px}
.audit td:first-child{white-space:nowrap;color:var(--ink-2)}
.audit td:last-child,.audit th:last-child{padding-right:24px;text-align:right;white-space:nowrap}
.audit code{font-family:var(--sans);font-size:13px;word-break:break-all}
.audit tr.bad td{background:var(--pen-wash)}
.audit tr.bad td:last-child{color:var(--pen);font-weight:500}
.audit tr.ok td:last-child{color:var(--blue)}
.audit tr.none td{color:var(--ink-3);white-space:normal}
.verdict{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-top:1px solid var(--rule)}
.verdict p{margin:0;font-size:13.5px;color:var(--ink-2)}
.stamp{flex:none;font-family:var(--hand);font-size:30px;line-height:1;padding:4px 14px 2px;border:2px solid currentColor;border-radius:4px;transform:rotate(-3deg)}
.stamp.keep{color:var(--blue)}
.stamp.revert{color:var(--pen)}
.stamp.hit{animation:stamp .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:rotate(-3deg) scale(1.4);opacity:0}100%{transform:rotate(-3deg) scale(1);opacity:1}}

/* ratchet-cli: 시뮬레이션 */
.rsim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border:1px solid var(--rule);background:var(--sheet);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -48px rgba(0,0,0,.45)}
.queue{list-style:none;margin:0;padding:30px 24px 30px 58px;position:relative;border-right:1px solid var(--rule);font-family:var(--mono);font-size:13.5px}
.queue::before{content:"";position:absolute;left:36px;top:30px;bottom:30px;width:2px;margin-left:-1px;background:var(--ink)}
.queue li{position:relative;padding:8px 0 22px;color:var(--ink-3);transition:color .3s}
.q-dot{position:absolute;left:-28px;top:11px;width:11px;height:11px;border-radius:50%;background:var(--sheet);border:2px solid var(--ink);transition:background .3s,transform .4s cubic-bezier(.3,1.6,.4,1)}
.queue li.cur{color:var(--ink)}
.queue li.cur .q-dot{border-color:var(--blue);transform:scale(1.3)}
.queue li.locked{color:var(--ink-2)}
.queue li.locked .q-dot{background:var(--ink)}
.queue li.locked::after{content:"✓";position:absolute;left:-45px;top:6px;font-size:12px;color:var(--blue)}
.queue li.q-end{font-weight:500}
.queue li.q-end.cur{color:var(--blue)}
.q-n{color:var(--ink-3)}
.pawl{position:absolute;left:12px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--pen);transition:top .5s cubic-bezier(.3,1.5,.4,1)}
.pawl.jam{animation:jam .45s}
@keyframes jam{25%{transform:translateY(-5px)}50%{transform:translateY(3px)}75%{transform:translateY(-2px)}}
.rsim-main{padding:24px;min-width:0}
.val{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.vn{font-family:var(--mono);font-size:13px;min-width:62px}
.codes{display:flex;gap:4px;flex-wrap:wrap}
.codes button{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;font-size:12px}
.codes button b{font-family:var(--mono);font-weight:500}
.codes button span{color:var(--ink-3)}
.codes button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.codes button[aria-pressed="true"] span{color:color-mix(in srgb,var(--paper) 70%,var(--ink))}
.cfg{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 0;font-size:13px}
.cfg label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.cfg input{accent-color:var(--blue);width:15px;height:15px;margin:0}
.cfg code{font-family:var(--mono);font-size:12.5px}
.rsim-go{display:flex;align-items:center;gap:16px;margin:18px 0 0}
.submit{font:inherit;font-family:var(--mono);font-size:13.5px;color:#dfe3e8;background:var(--term);border:0;border-radius:6px;padding:9px 16px;cursor:pointer}
.submit .p{color:#93a9ff}
.submit:active{transform:translateY(1px)}
.out{margin-top:14px;min-height:118px;max-width:100%;white-space:pre-wrap}
.out .ok{color:#93a9ff}
.out .bad{color:#ff8b80}
.out .dim{color:#7d8590}

/* 로고: A에서 X로 */
.morph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px;border:1px solid var(--rule);background:var(--sheet);border-radius:8px;padding:34px 40px;position:relative;overflow:hidden}
.morph-svg,.morph-guide{grid-column:1;grid-row:1;width:100%;max-width:400px;aspect-ratio:1;justify-self:center;overflow:visible;color:var(--ink)}
.morph-guide{color:var(--blue);pointer-events:none}
.morph-guide .g{fill:none;stroke:currentColor;stroke-width:.008}
.morph-guide .g.d{stroke-dasharray:.03 .025}
.morph-guide text{fill:currentColor;font-family:var(--hand);font-size:.13px}
.morph-guide .pt{fill:var(--sheet);stroke:currentColor;stroke-width:.012}
.morph-ui{grid-column:2;grid-row:1}
.morph-ui label{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 10px}
.morph-ui input{width:100%;accent-color:var(--ink);margin:0}
.ticks{display:flex;justify-content:space-between;font-family:var(--hand);font-size:23px;color:var(--ink-2);margin-top:4px}
.readout{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--ink-2);margin:18px 0 0;white-space:pre}
.readout b{color:var(--ink);font-weight:500}
.spec3d.big{width:300px;height:300px;margin:6px 0 0 -40px}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
.swatch{font:inherit;text-align:left;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);cursor:pointer;position:relative}
.swatch .chip{grid-row:1/4;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--sw) 50%,var(--sw-d) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)}
.swatch b{font-family:var(--serif);font-weight:500;font-size:18px}
.swatch .hx{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);display:flex;gap:10px;flex-wrap:wrap}
.swatch .use{font-size:12.5px;color:var(--ink-3)}
.swatch.copied::after{content:attr(data-msg);position:absolute;right:12px;top:10px;font-family:var(--hand);font-size:20px;color:var(--blue)}
.types{display:flex;flex-direction:column;gap:6px}
.type{border-bottom:1px solid var(--rule);padding:10px 0 12px}
.spec-line{margin:0;font-size:34px;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.tname{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.tname b{font-weight:500;color:var(--ink-2)}
.dl{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dl a{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--rule);border-radius:8px;text-decoration:none;background:var(--sheet);height:100%}
.dl a:hover{border-color:var(--ink)}
.dl code{font-family:var(--mono);font-size:12.5px}
.dl span:last-child{font-size:12.5px;color:var(--ink-3)}
.fprev{display:block;height:84px;border-radius:5px;margin-bottom:6px;background:#eef0ec center/56px no-repeat}
.fprev.dark{background-color:#0f1113}

/* 404 */
.lost .hero-row{padding-top:60px}
.lost-mark{width:200px;height:200px;margin:0 0 26px -100px;position:relative;left:calc(var(--gut) / -2)}
.lost-mark svg{width:100%;height:100%;overflow:visible;color:var(--ink)}
.lost .lede+.lede{margin-top:10px}
.lost .hero-row>.mg{padding-top:200px}
@media (max-width:820px){.lost .hero-row>.mg{padding-top:0;display:block}.lost .hero-row .aside{display:inline;margin-right:8px}}

@media (max-width:1100px){
  .ops{grid-template-columns:1fr}
  .bench,.rsim{grid-template-columns:1fr}
  .sheet-doc{border-right:0;border-bottom:1px solid var(--rule)}
  .queue{border-right:0;border-bottom:1px solid var(--rule)}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols>div:last-child{grid-column:1/-1}
  .fcols>div:last-child a{display:inline-block;margin-right:18px}
}
@media (max-width:820px){
  .r>.mg,.hero-row>.mg{grid-column:2;grid-row:1;text-align:left;padding:0 0 4px}
  .r>.ax{grid-row:2}
  .r>.tx{grid-row:2}
  .r .mg .pno{display:block;margin:0 0 6px}
  .r.sec{padding-top:44px}
  .hero-row{padding:52px 0 26px}
  .hero-row .mg{display:flex;align-items:baseline;gap:12px}
  .hero-row .lab{margin:0 0 8px}
  .step>.mg{grid-row:1}
  .step .tx{min-height:0;padding-bottom:12px}
  .step-t{padding-top:0}
  .step .dot{top:-24px}
  .body{font-size:19px}
  .lede{font-size:19px}
  .plate{padding:6px 0 16px}
  .sheet-doc{padding:24px 16px 20px 44px}
  .sheet-doc::before{left:30px}
  .para{font-size:16.5px}
  .para .pno{left:-40px;width:26px}
  .vhead,.editor,.verdict,.rsim-main{padding-left:16px;padding-right:16px}
  .audit td,.audit th{padding-left:8px;padding-right:8px}
  .audit td:first-child,.audit th:first-child{padding-left:16px}
  .audit td:last-child,.audit th:last-child{padding-right:16px}
  .queue{padding:22px 16px 10px 52px}
  .queue::before{left:30px;top:22px;bottom:22px}
  .pawl{left:6px}
  .spec td:first-child{white-space:normal}
  .spec .ex{font-size:15px}
  .morph{grid-template-columns:1fr;padding:22px 18px}
  .morph-ui{grid-column:1;grid-row:2}
  .morph-svg,.morph-guide{max-width:280px}
  .swatches{grid-template-columns:1fr}
  .spec-line{font-size:26px}
  .spec3d.big{width:220px;height:220px;margin:6px 0 0 -16px}
  .ixbtn .t{display:none}
  .ixbtn{padding:8px 11px}
  .ix-pages b{font-size:30px}
  .ix-in{padding-left:16px}
  .site-foot .row{grid-template-columns:var(--gut) minmax(0,1fr)}
  .site-foot .mg{grid-column:2;grid-row:1;padding-top:84px;text-align:left}
  .site-foot .ax{grid-column:1;grid-row:1/3}
  .site-foot .tx{grid-column:2;grid-row:2;padding:24px 0 56px}
  .endmark{background:linear-gradient(to bottom,transparent 0 136px,var(--paper) 136px)}
  .endmark svg{width:64px;height:64px;margin-left:-32px;top:72px}
  .fcols{gap:18px}
  .lost-mark{width:150px;height:150px;margin-left:0;left:0}
  .tour-wrap{overflow-x:auto}
}

/* 판정 글자: 축 위의 점이 A(반영, 파랑) 또는 X(되돌림, 빨강)로 */
.vglyph{position:absolute;left:50%;top:3px;width:36px;height:36px;margin-left:-18px;color:var(--blue);overflow:visible;pointer-events:none}
.vglyph g{stroke:var(--paper);stroke-width:.22;paint-order:stroke;stroke-linejoin:round}
:lang(ko) .vglyph{top:2px}
.is-reverted .vglyph{color:var(--pen)}
.g-row .dot{transition:background .3s,border-color .3s,transform .35s cubic-bezier(.3,1.6,.4,1),opacity .2s}
.has-glyph .dot{transform:scale(0);opacity:0}
.is-reverted.has-glyph .dot{animation:none}
@media (max-width:820px){.vglyph{top:3px;width:30px;height:30px;margin-left:-15px}}
.g-row:not(.has-glyph) .vglyph{opacity:0;transition:opacity .2s}