/* 첫 진입 · 제목 글자 · 헤더 칸(모서리 꺾쇠·소리 막대·가운데 진행선) — 값은 metic 실측 */
:root{--intro-at:1150ms}

/* 첫 방문 로딩 — 점(0.5s) → 이름(0.6s, 0.26s 늦게) → 1.15s 에 판이 점 속으로 원을 그리며 닫힌다(0.76s) */
html.ld-on body{overflow:hidden}
.ld{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#121214;color:#f4f4f2}
.ld .mono{position:absolute;font-size:11px;color:#f4f4f299}
.ld__cap{left:var(--shell);top:24px}.ld__pct{left:var(--shell);bottom:24px;font-variant-numeric:tabular-nums}.ld__geo{right:var(--shell);bottom:24px}
.ld__mark{display:flex;align-items:baseline;font:700 clamp(2.5rem,8vw,5rem)/1 var(--wm);letter-spacing:-.03em}
.ld__wm{animation:ld-word .6s var(--ease) .26s both}
.ld__dot{display:block;width:.22em;height:.22em;margin-left:4px;border-radius:50%;background:var(--pt);animation:ld-dot .5s var(--ease) both}
@keyframes ld-dot{0%{opacity:0;transform:scale(.4)}}
@keyframes ld-word{0%{opacity:0;transform:translateX(12px)}}

/* 히어로 — 단어마다 0.09s 씩 늦게 흐림에서 또렷하게, 옆 글·단추는 아래에서 */
.hero-word{display:inline-block;transform-origin:0;white-space:nowrap}
.js .hero-word{animation:hero-focus 1.1s var(--ease) both;animation-delay:calc(var(--d,0ms) + .12s)}
.js.ld-on .hero-word{animation-delay:calc(var(--d,0ms) + var(--intro-at) + .35s)}
.js .hero-lead{animation:hero-rise .9s var(--ease) both;animation-delay:.64s}
.js.ld-on .hero-lead{animation-delay:calc(var(--intro-at) + .87s)}
@keyframes hero-focus{0%{opacity:0;filter:blur(14px);transform:translateY(.24em) scaleX(.88)}}
@keyframes hero-rise{0%{opacity:0;transform:translateY(1rem)}}
/* 커서 160px 안의 글자는 커서 쪽으로 끌려오고 굵어진다(--k 0→1) */
.kc{display:inline-block;font-weight:calc(700 + var(--k,0) * 200);transform:translate(calc(var(--dx,0) * 1px),calc(var(--dy,0) * 1px));transition:transform .35s var(--ease),font-weight .35s var(--ease)}

/* 헤더 칸 — 올리면 모서리에 빨간 꺾쇠 */
.ni{position:relative;display:flex;align-items:center;height:44px;padding:0 .8rem;border-radius:var(--pill);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:color .3s var(--ease),background-color .3s var(--ease)}
.ni--sq{width:44px;padding:0;justify-content:center}
.ni::before,.ni::after{content:"";position:absolute;width:7px;height:7px;border:0 solid var(--pt);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .45s var(--ease)}
.ni::before{left:.2rem;top:.45rem;border-width:1px 0 0 1px;transform:translate(-5px,-5px)}
.ni::after{right:.2rem;bottom:.45rem;border-width:0 1px 1px 0;transform:translate(5px,5px)}
.ni:hover::before,.ni:hover::after,.ni:focus-visible::before,.ni:focus-visible::after{opacity:1;transform:translate(0)}
.ni[aria-pressed=true].nv__lens::before,.ni[aria-pressed=true].nv__lens::after{border-color:#fff}

/* 소리 막대 — 켜져 있으면 네 줄이 엇갈려 출렁인다 */
.sb{display:flex;align-items:flex-end;gap:2px;height:13px}
.sb i{display:block;width:2px;height:3px;border-radius:1px;background:currentColor;transform-origin:50% 100%;transition:height .4s var(--ease)}
.sb.is-on i{animation:sb-bar 1.05s var(--ease) infinite alternate}
.sb.is-on i:nth-child(1){height:7px;animation-delay:-.4s}
.sb.is-on i:nth-child(2){height:12px;animation-delay:-.1s}
.sb.is-on i:nth-child(3){height:5px;animation-delay:-.75s}
.sb.is-on i:nth-child(4){height:10px;animation-delay:-.55s}
@keyframes sb-bar{0%{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* 가운데 — 내려가면 진행선과 지금 구간 이름 */
.nv__read{position:absolute;left:50%;display:flex;align-items:center;gap:12px;color:var(--ink);opacity:0;transform:translate(-50%,-6px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.nv.is-float .nv__read{opacity:1;transform:translate(-50%)}
.nv__prog{position:relative;display:block;width:72px;height:1px;background:var(--line);overflow:hidden}
.nv__prog span{position:absolute;inset:0;background:var(--pt);transform-origin:0;transform:scaleX(var(--rp,0))}

@media (max-width:900px){.nv__read{display:none}.nv__go{display:none}}
@media (prefers-reduced-motion:reduce){
  .ld{display:none}
  .hero-word,.hero-lead{animation:none!important}
  .sb.is-on i{animation:none}
}
/* 돋보기·설계도 원 속 복제 화면은 멈춘 그림 */
.lp__pg *,.lp__pg *::before,.lp__pg *::after{animation:none!important;transition:none!important}

/* 크기 상자 — data-x 요소에 올리면 빨간 테·모서리 점·이름과 크기(글자는 크기/줄간격·색까지) */
.xi{position:fixed;left:0;top:0;z-index:60;pointer-events:none;border:1px solid var(--pt);opacity:0;transition:opacity .2s var(--ease)}
.xi.is-on{opacity:1}
.xi>i{position:absolute;width:5px;height:5px;background:var(--pt)}
.xi>i:nth-child(1){left:-3px;top:-3px}.xi>i:nth-child(2){right:-3px;top:-3px}
.xi>i:nth-child(3){left:-3px;bottom:-3px}.xi>i:nth-child(4){right:-3px;bottom:-3px}
.xi__tags{position:absolute;left:-1px;bottom:calc(100% + 4px);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.xi.is-below .xi__tags{bottom:auto;top:calc(100% + 4px)}
.xi__tags span{display:flex;align-items:center;gap:10px;padding:2px 6px;font:500 10px/1.3 var(--mono);letter-spacing:.02em;white-space:nowrap}
.xi__name{color:#fff;background:var(--pt)}
.xi__font{color:var(--ink);background:var(--paper);border:1px solid color-mix(in srgb,var(--pt) 55%,transparent)}
.xi__font[hidden]{display:none}
.xi__font b{display:inline-block;width:8px;height:8px;margin-left:-6px;border:1px solid var(--line2)}