/* ==========================================================================
   HANSY portfolio — 토큰 7개: bg · ink · acc · font · ratio · u · motion(dur+ease)
   그 외 모든 값은 파생(color-mix · 비율 거듭제곱 · unit 배수). 하드코딩 금지.
   ========================================================================== */
:root{
  --bg:#ffffff;
  --ink:#0e0e10;
  --acc:#cc1433;
  --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ratio:1.3;
  --u:8px;
  --dur:400ms; --ease:cubic-bezier(.32,.72,0,1);
}
:root,body,.theater,.pip{
  /* 색 파생 */
  --ink-2:color-mix(in oklab,var(--ink) 60%,transparent);
  --ink-3:color-mix(in oklab,var(--ink) 12%,transparent);
  --ink-4:color-mix(in oklab,var(--ink) 5%,transparent);
  --bg-glass:color-mix(in oklab,var(--bg) 82%,transparent);
  --shadow:0 2px 12px color-mix(in oklab,var(--ink) 14%,transparent);
  --shadow-lg:0 18px 50px color-mix(in oklab,var(--ink) 28%,transparent);
  --ring:inset 0 0 0 1px color-mix(in oklab,var(--ink) 6%,transparent);
  /* 글자 파생 (body 16 고정) */
  --t-micro:calc(1rem / var(--ratio));
  --t-body:1rem;
  --t-h:calc(1rem * var(--ratio));
  --t-title:calc(1rem * var(--ratio) * var(--ratio));
  --t-disp:calc(1rem * var(--ratio) * var(--ratio) * var(--ratio));
  --t-hero:clamp(calc(1rem * var(--ratio) * var(--ratio) * var(--ratio)),4.2vw,calc(1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
  /* 간격 파생 (unit × 피보나치, 반 단위 1개) */
  --s05:calc(var(--u)/2);--s1:var(--u);--s2:calc(var(--u)*2);--s3:calc(var(--u)*3);--s5:calc(var(--u)*5);--s8:calc(var(--u)*8);--s13:calc(var(--u)*13);
  --r:var(--u);--r2:calc(var(--u)*1.5);
  --d-micro:calc(var(--dur)/4);--d-half:calc(var(--dur)/2);
  --t-sm:calc((var(--t-body) + var(--t-micro)) / 2);
  --tap:calc(var(--u)*5.5);
  --nav-h:calc(var(--u)*7);
}
@media (prefers-reduced-motion:reduce){:root,body{--dur:0ms}}
/* 변주: 테마 · 템포 (미리보기 선택용, 확정 후 기본값으로 고정) */
body[data-theme="dark"],body[data-theme="home-dark"].home{--bg:#0b0b0d;--ink:#f2f0ea;--shadow:0 2px 12px color-mix(in oklab,#000 60%,transparent);--shadow-lg:0 18px 50px color-mix(in oklab,#000 80%,transparent)}
body[data-tempo="fast"]{--dur:280ms}
body[data-tempo="slow"]{--dur:520ms}
.theater,.pip{--bg:#0b0b0d;--ink:#f2f0ea;--shadow:0 2px 12px color-mix(in oklab,var(--bg) 60%,transparent);--shadow-lg:0 18px 50px color-mix(in oklab,var(--bg) 80%,transparent)}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light only;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.55;word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100dvh}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--s05)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--s5)}
@media (max-width:760px){.wrap{padding-inline:var(--s2)}}
.ic{width:calc(var(--u)*2.5);height:calc(var(--u)*2.5);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:var(--s2);height:var(--s2)}
.ic.lg{width:var(--s3);height:var(--s3)}

/* ---- 내비 ---- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:40;background:var(--bg-glass);backdrop-filter:saturate(1.4) blur(20px);-webkit-backdrop-filter:saturate(1.4) blur(20px);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav.sc{border-bottom-color:var(--ink-3)}
.home .nav:not(.sc){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav .in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2)}
.nav .lg{font-weight:700;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.nav .lg small{font-weight:400;font-size:inherit;color:var(--ink-2);letter-spacing:.06em;margin-left:var(--s1)}
.nav .tabs{display:flex;gap:var(--s3);font-size:var(--t-body);color:var(--ink-2);white-space:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.nav .tabs::-webkit-scrollbar{display:none}
.nav .tabs a{position:relative;padding:calc(var(--u)*2) 0;font-weight:500;transition:color var(--d-micro) var(--ease)}
.nav .tabs a:hover{color:var(--ink)}
.nav .tabs a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav .tabs a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc)}
.nav .cta{justify-self:end}
.btn{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-body);font-weight:600;line-height:1;padding:var(--s1) var(--s2);min-height:var(--s5);border-radius:999px;background:var(--ink);color:var(--bg);transition:opacity var(--d-micro) var(--ease),transform var(--d-micro) var(--ease);white-space:nowrap}
.btn:hover{opacity:.88}.btn:active{transform:scale(.97)}
.btn.acc{background:var(--acc);color:#fff}
.btn.ghost{background:var(--ink-4);color:var(--ink)}
.btn.sm{font-size:var(--t-micro);min-height:var(--s3);padding:var(--s05) var(--s2)}
@media (max-width:760px){.nav .in{grid-template-columns:auto 1fr auto}.nav .lg small{display:none}.nav .tabs{gap:var(--s2);font-size:var(--t-micro)}.nav .cta .btn span{display:none}}

main{padding-top:var(--nav-h);animation:pagein calc(var(--dur)*1.5) var(--ease) both}
.home main{padding-top:0}
@keyframes pagein{from{opacity:0;transform:translateY(var(--s1))}to{opacity:1;transform:none}}

/* ---- 빌보드 ---- */
.bb{position:relative;height:clamp(56vh,56.25vw,82vh);min-height:520px;overflow:hidden;background:var(--ink)}
.bb .slide{position:absolute;inset:0;opacity:0;transition:opacity calc(var(--dur)*2) var(--ease);pointer-events:none}
.bb .slide.on{opacity:1;pointer-events:auto}
.bb .art{position:absolute;inset:0}
.bb .art img,.bb .art video{width:100%;height:100%;object-fit:cover;object-position:center}
.bb .art img{transform:scale(1.04);transition:transform calc(var(--dur)*20) linear}.bb .slide.on .art img{transform:scale(1)}
.bb .art video{position:absolute;inset:0;opacity:0;transition:opacity calc(var(--dur)*1.5) var(--ease)}
.bb .art video.on{opacity:1}
.bb .art.portrait img,.bb .art.portrait video{object-fit:contain;object-position:68% 50%}
.bb .frame:after{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h)*2.2);background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 80%,transparent),transparent);pointer-events:none;z-index:1}
.bb .frame{position:relative;height:100%}
.bb .art.portrait .blur{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(56px) saturate(1.3);transform:scale(1.1);opacity:.9}
.bb .veil{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,color-mix(in oklab,var(--bg) 92%,transparent) 12%,color-mix(in oklab,var(--bg) 55%,transparent) 30%,transparent 55%)}
.bb .tx{position:absolute;left:0;right:0;bottom:var(--s5)}
.bb .tx .who,.bb .tx .k,.bb .tx h1,.bb .tx .one,.bb .tx .bt{opacity:0;transform:translateY(var(--s1));transition:opacity calc(var(--dur)*1.5) var(--ease),transform calc(var(--dur)*1.5) var(--ease)}
.bb .slide.on .tx .who,.bb .slide.on .tx .k,.bb .slide.on .tx h1,.bb .slide.on .tx .one,.bb .slide.on .tx .bt{opacity:1;transform:none}
.bb .slide.on .tx .k{transition-delay:calc(var(--dur)*.25)}.bb .slide.on .tx h1{transition-delay:calc(var(--dur)*.4)}.bb .slide.on .tx .one{transition-delay:calc(var(--dur)*.55)}.bb .slide.on .tx .bt{transition-delay:calc(var(--dur)*.7)}
.bb .tx .in{display:grid;grid-template-columns:minmax(0,720px) 1fr;align-items:end;gap:var(--s3)}
.bb .who{font-size:var(--t-h);font-weight:500;letter-spacing:-.01em;margin-bottom:var(--s3);text-wrap:balance;max-width:40ch}
.bb .k{font-size:var(--t-micro);color:var(--ink-2);font-weight:600;margin-bottom:var(--s05)}
.bb h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.bb .one{font-size:var(--t-h);font-weight:400;color:var(--ink-2);margin-top:var(--s1);max-width:40ch}
.bb .bt{display:flex;gap:var(--s1);margin-top:var(--s3)}
.bb .bt .btn{min-height:calc(var(--u)*6);padding:var(--s1) var(--s3)}
.bb .bt .btn.ghost{background:color-mix(in oklab,var(--ink) 8%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bb .dots{justify-self:end;display:flex;gap:var(--s05);align-items:center}
.bb .dots button[data-i]{position:relative;width:var(--s2);height:var(--s05);border-radius:var(--s05);background:var(--ink-3);overflow:hidden;transition:background var(--d-micro) var(--ease),width var(--d-micro) var(--ease)}
.bb .dots button[data-i].on{width:var(--s5)}
.bb .dots button[data-i] i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);border-radius:inherit}
.bb .dots button[data-i].on i{transition:width var(--bbd,8000ms) linear}
.bb .dots button[data-i].on.go i{width:100%}
.bb .dots button[data-i]:hover{background:var(--ink-2)}
.bb .dots .pp{width:var(--s3);height:var(--s3);border-radius:50%;background:none;color:var(--ink-2);margin-left:var(--s1);display:grid;place-items:center}
.bb .dots .snd{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;margin-left:var(--s1);box-shadow:var(--ring)}
.bb .bt .btn:not(.ghost){background:var(--ink);color:var(--bg)}
/* 변주 B: 카드형 */
body[data-bb="card"] .bb{height:auto;min-height:0;background:transparent;padding-top:calc(var(--nav-h) + var(--s3))}
body[data-bb="card"] .bb .frame{position:relative;max-width:1360px;margin:0 auto;padding-inline:var(--s5);aspect-ratio:21/9;min-height:420px}
body[data-bb="card"] .bb .slide{inset:0 var(--s5);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow-lg)}
body[data-bb="card"] .bb .veil{background:linear-gradient(to top,color-mix(in oklab,#0e0e10 78%,transparent),color-mix(in oklab,#0e0e10 8%,transparent) 55%,transparent)}
body[data-bb="card"] .bb .tx{--ink:#f2f0ea;--ink-2:color-mix(in oklab,#f2f0ea 78%,transparent);--ink-3:color-mix(in oklab,#f2f0ea 28%,transparent);left:var(--s5);right:var(--s5);bottom:var(--s3)}
body[data-bb="card"] .bb .tx .in{padding-inline:var(--s5)}
body[data-bb="card"] .bb .who{display:none}
@media (max-width:760px){
  .bb{height:auto;aspect-ratio:4/5;min-height:0;max-height:82vh}
  .bb .veil{background:linear-gradient(to top,var(--bg) 0%,color-mix(in oklab,var(--bg) 94%,transparent) 22%,color-mix(in oklab,var(--bg) 45%,transparent) 42%,transparent 62%)}
  .bb .tx{bottom:var(--s3)}.bb .tx .in{grid-template-columns:1fr}.bb .dots{justify-self:start}.bb .one{font-size:var(--t-body)}.bb .who{font-size:var(--t-body);margin-bottom:var(--s2)}
  .bb .bt .btn{min-height:var(--s5);padding:var(--s1) var(--s2)}
  body[data-bb="card"] .bb .frame{aspect-ratio:4/5;min-height:0;padding-inline:var(--s2)}body[data-bb="card"] .bb .slide{inset:0 var(--s2)}body[data-bb="card"] .bb .tx{left:var(--s2);right:var(--s2)}body[data-bb="card"] .bb .tx .in{padding-inline:var(--s2)}
}

/* ---- 행(선반) ---- */
.row{padding-top:var(--s8)}
.bb + .row{padding-top:var(--s5)}
.row:last-of-type{padding-bottom:var(--s5)}
.row .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
.row .hd h2{font-size:var(--t-h);font-weight:700;letter-spacing:-.02em}
.row .hd a{font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.row .hd a:hover{color:var(--ink)}
.row .trk{position:relative}
.row .sc{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--s5);padding:var(--s05) var(--s5) var(--s1);margin-inline:calc(var(--s5) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
.row .sc::-webkit-scrollbar{display:none}
@media (max-width:760px){.row .sc{scroll-padding-left:var(--s2);padding-inline:var(--s2);margin-inline:calc(var(--s2) * -1)}}
.row .ar{position:absolute;top:0;bottom:var(--s1);width:var(--s8);display:grid;place-items:center;opacity:0;transition:opacity var(--d-micro) var(--ease);z-index:2;pointer-events:none}
.row .ar button{width:var(--s5);height:var(--s5);border-radius:50%;background:var(--bg);box-shadow:var(--shadow);display:grid;place-items:center;pointer-events:auto}
.row .ar.l{left:calc(var(--s5) * -1)}.row .ar.r{right:calc(var(--s5) * -1)}
.row .trk:hover .ar.can,.row .trk:focus-within .ar.can{opacity:1}
@media (hover:none){.row .ar{display:none}}

/* ---- 카드 ---- */
.card{scroll-snap-align:start;flex:0 0 auto;width:var(--cw,200px);text-align:left;color:inherit;display:block}
.card .art{position:relative;aspect-ratio:var(--ca,1/1);border-radius:var(--r);overflow:hidden;background:var(--ink-4);box-shadow:var(--shadow),var(--ring);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:0s;will-change:transform}
.card .art img,.card .art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.ui .art img{object-position:left top}
.card .art video{opacity:0;transition:opacity var(--d-half) var(--ease)}
.card .art video.on{opacity:1}
.card .art .pl{position:absolute;right:var(--s1);bottom:var(--s1);width:var(--s5);height:var(--s5);border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;opacity:0;transform:translateY(var(--s05));transition:opacity var(--d-micro) var(--ease),transform var(--d-micro) var(--ease);box-shadow:var(--shadow)}
.card:hover .art,.card:focus-visible .art{box-shadow:var(--shadow-lg),var(--ring);transform:translateY(calc(var(--s05) * -1)) scale(1.025);transition-delay:calc(var(--dur)*.3)}
.card .t{transition:color var(--d-micro) var(--ease)}.card:hover .t{color:var(--ink)}
.card:hover .art .pl,.card:focus-visible .art .pl{opacity:1;transform:none}
.card .t{font-size:var(--t-sm);font-weight:600;margin-top:var(--s1);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .s{font-size:var(--t-micro);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.wide{--cw:304px;--ca:16/9}
.card.sq{--cw:200px;--ca:1/1}
.card.tall{--cw:calc(var(--u)*21.5);--ca:9/16}
.row.mix{--rh:calc(var(--u)*26)}
.row.mix .card{width:calc(var(--rh) * var(--ar,1.7778));min-width:calc(var(--u)*14)}
.row.mix .card .art{aspect-ratio:auto;height:var(--rh);width:calc(var(--rh) * var(--ar,1.7778))}
.row.mix .sc{align-items:flex-start}
@media (max-width:760px){.row.mix{--rh:calc(var(--u)*21)}}
.card .art video{object-fit:contain;background:#0b0b0d}
.card .art iframe.yt{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity var(--d-half) var(--ease)}.card .art iframe.yt.on{opacity:1}
body[data-card="sq"] .card{--cw:200px;--ca:1/1}
body[data-card="wide"] .card{--cw:304px;--ca:16/9}
body[data-card="sq"] .card .art img,body[data-card="wide"] .card .art img{object-position:center top}
body[data-card="sq"] .row.mix .card,body[data-card="sq"] .row.mix .card .art{width:var(--rh)}body[data-card="wide"] .row.mix .card,body[data-card="wide"] .row.mix .card .art{width:calc(var(--rh) * 1.7778)}
@media (max-width:760px){.card.wide{--cw:264px}.card.sq{--cw:152px}.card.tall{--cw:calc(var(--u)*16.5)}body[data-card="sq"] .card{--cw:152px}body[data-card="wide"] .card{--cw:236px}}
.card .art.ph{display:grid;place-items:end start;padding:var(--s2);background:linear-gradient(135deg,color-mix(in oklab,var(--ink) 8%,transparent),color-mix(in oklab,var(--ink) 3%,transparent))}
.card .art.ph .pt{font-size:var(--t-micro);font-weight:600;color:var(--ink-2);letter-spacing:.04em}
/* 변주 B: 확대+정보 */
body[data-hover="expand"] .card:hover .art{transform:scale(1.03)}
body[data-hover="expand"] .card:hover .art:after{content:attr(data-info);position:absolute;left:0;right:0;bottom:0;padding:var(--s5) var(--s2) var(--s1);font-size:var(--t-micro);color:#f2f0ea;background:linear-gradient(to top,color-mix(in oklab,#0e0e10 80%,transparent),transparent);line-height:1.35}

/* 변주 C: 확장 카드(팝오버) */
.pop{position:fixed;z-index:50;width:var(--pw,300px);border-radius:var(--r2);overflow:hidden;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-lg),var(--ring);opacity:0;transform:scale(.72);transform-origin:center;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none;visibility:hidden}
.pop.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.pop .art{position:relative;aspect-ratio:var(--pa,16/9);background:var(--ink-4);overflow:hidden}
.pop .art img,.pop .art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop .art video{opacity:0;transition:opacity calc(var(--dur)*.75) var(--ease)}.pop .art video.on{opacity:1}
.pop .bd{padding:var(--s2) var(--s2) var(--s2)}
.pop .bd .t{font-weight:700;font-size:var(--t-body);line-height:1.3;letter-spacing:-.01em}
.pop .bd .s{font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s05)}
.pop .bd .o{font-size:var(--t-micro);margin-top:var(--s1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop .bd .bt{display:flex;gap:var(--s1);margin-top:var(--s2)}
.pop .bd .btn{min-height:var(--s5);padding:var(--s05) var(--s2);font-size:var(--t-micro)}
body[data-hover="pop"] .card:hover .art{transform:none;box-shadow:var(--shadow),var(--ring)}

/* ---- 섹션 공통 ---- */
.sec{padding-block:var(--s8)}
.pg-h{font-size:var(--t-disp);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--s5)}
.sub{color:var(--ink-2);font-size:var(--t-micro)}
footer{padding:var(--s5) 0 var(--s13);color:var(--ink-2);font-size:var(--t-micro);border-top:1px solid var(--ink-3);margin-top:var(--s8)}
footer .in{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
footer a:hover{color:var(--ink)}
.rd{display:inline-block;width:calc(var(--n)*1ch);height:.78em;background:#0e0e10;box-shadow:inset 0 0 0 1px color-mix(in oklab,#f2f0ea 22%,transparent);vertical-align:-.08em;border-radius:1px}
.theater .rd{animation:rdfill var(--dur) var(--ease) both;animation-delay:calc(var(--dur)/2)}
@keyframes rdfill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---- 라이브러리 (works) ---- */
.lib{display:grid;grid-template-columns:240px 1fr;gap:var(--s5);align-items:start}
.rail{position:sticky;top:calc(var(--nav-h) + var(--s3));font-size:var(--t-body)}
.rail h4{font-size:var(--t-micro);color:var(--ink-2);font-weight:600;margin:var(--s3) 0 var(--s1)}
.rail h4:first-child{margin-top:0}
.rail button{display:flex;width:100%;justify-content:space-between;align-items:center;padding:var(--s1) var(--s2);border-radius:var(--r);color:var(--ink);text-align:left;transition:background var(--d-micro) var(--ease);font-size:var(--t-body)}
.rail button small{color:var(--ink-2);font-size:var(--t-micro);font-variant-numeric:tabular-nums}
.rail button:hover{background:var(--ink-4)}
.rail button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rail button[aria-pressed="true"] small{color:color-mix(in oklab,var(--bg) 70%,transparent)}
.lib .tb{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
.lib .tb .cnt{font-size:var(--t-micro);color:var(--ink-2)}
.seg{display:inline-flex;background:var(--ink-4);border-radius:var(--r);padding:var(--s05);font-size:var(--t-micro)}
.seg button{padding:var(--s05) var(--s2);border-radius:calc(var(--r) - var(--s05));color:var(--ink-2);font-weight:500;min-height:var(--s3)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:0 var(--s2);align-items:start}
.grid.ms{grid-auto-rows:var(--u);grid-auto-flow:dense}
.grid .card{width:auto;padding-bottom:var(--s3)}
.list{display:flex;flex-direction:column}
.list .li{display:grid;grid-template-columns:var(--s5) var(--s8) 1fr 180px 120px var(--s8);gap:var(--s2);align-items:center;padding:var(--s1) 0;border-bottom:1px solid var(--ink-3);text-align:left;width:100%;font-size:var(--t-body);transition:background var(--d-micro) var(--ease)}
.list .li:hover{background:var(--ink-4)}
.list .li .n{color:var(--ink-2);font-size:var(--t-micro);font-variant-numeric:tabular-nums;text-align:center}
.list .li .th{width:var(--s8);aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--ink-4)}
.list .li .th img{width:100%;height:100%;object-fit:cover}
.list .li .t{font-weight:600}
.list .li .t small{display:block;font-weight:400;color:var(--ink-2);font-size:var(--t-micro)}
.list .li .m{color:var(--ink-2);font-size:var(--t-micro)}
.list .li .y{color:var(--ink-2);font-size:var(--t-micro);text-align:right;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:var(--s05);flex-wrap:wrap}
.chip{font-size:var(--t-sm);padding:var(--s05) var(--s1);border:1px solid var(--ink-3);border-radius:999px;color:var(--ink-2);white-space:nowrap;min-height:var(--s3);display:inline-flex;align-items:center}
@media (max-width:980px){.lib{grid-template-columns:1fr}.rail{position:static;display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s1)}.rail h4{display:none}.rail button{width:auto;white-space:nowrap;border:1px solid var(--ink-3);border-radius:999px;padding:var(--s05) var(--s2);font-size:var(--t-micro)}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.list .li{grid-template-columns:var(--s3) var(--s5) 1fr var(--s5)}.list .li .m,.list .li .c{display:none}}

/* ---- 도구 런처 ---- */
.tl{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s5);align-items:start}
.trail{position:sticky;top:calc(var(--nav-h) + var(--s2));display:flex;flex-direction:column;gap:var(--s05)}
.trail .ti{display:grid;grid-template-columns:calc(var(--u)*8) 1fr;gap:var(--s1);align-items:center;padding:var(--s1);border-radius:var(--r);text-align:left;color:var(--ink);transition:background var(--d-micro) var(--ease)}
.trail .ti img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:var(--s05);background:var(--ink-4);box-shadow:var(--ring)}
.trail .ti b{display:block;font-weight:600;font-size:var(--t-sm);line-height:1.3}.trail .ti small{display:block;color:var(--ink-2);font-size:var(--t-micro);margin-top:2px}
.trail .ti:hover{background:var(--ink-4)}.trail .ti[aria-pressed="true"]{background:var(--ink);color:var(--bg)}.trail .ti[aria-pressed="true"] small{color:color-mix(in oklab,var(--bg) 70%,transparent)}
.tmain{min-width:0}
.tbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s1);min-height:var(--s5)}
.tbar .chips{display:flex;gap:var(--s05);flex-wrap:wrap}.tbar .r{display:flex;gap:var(--s1)}.tbar .chip{cursor:pointer}.tbar .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tstage{position:relative;aspect-ratio:16/10;border-radius:var(--r2);overflow:hidden;background:#0b0b0d;box-shadow:var(--shadow-lg),var(--ring)}
.tstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.tstage .tmob{display:none}
.tdesc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--ink-3)}
.tdesc h2{font-size:var(--t-title);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tdesc .one{font-size:var(--t-h);font-weight:500;line-height:1.45;margin-top:var(--s1);letter-spacing:-.01em}
.tdesc .what{margin-top:var(--s2);padding-left:1.1em;display:grid;gap:var(--s05);font-size:var(--t-body);line-height:1.5}
.tdesc .try{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ink-2)}
.tdesc .proof{display:flex;flex-wrap:wrap;gap:var(--s05)}.tdesc .proof .chip{color:var(--ink);border-color:var(--ink-2);font-weight:600}
.tdesc .meta-tbl{font-size:var(--t-sm);display:grid;grid-template-columns:auto 1fr;gap:var(--s05) var(--s2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--ink-3)}.tdesc .meta-tbl span{color:var(--ink-2)}.tdesc .meta-tbl b{font-weight:500}
.tdesc .lk{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
@media (max-width:980px){.tl{grid-template-columns:1fr}.trail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s1)}.trail .ti{grid-template-columns:1fr;width:calc(var(--u)*20);flex:none}.trail .ti img{display:none}.tdesc{grid-template-columns:1fr}}
@media (max-width:760px){.tstage{aspect-ratio:auto;height:70dvh}}

/* ---- 이력서 ---- */
.cvw{max-width:calc(880px + var(--s5) * 2)}
.cv .idc{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.cv .idc img{width:calc(var(--u)*13);height:calc(var(--u)*17);object-fit:cover;border-radius:var(--r)}
.cv .nm{font-size:var(--t-disp);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.cv .jb{font-size:var(--t-h);margin-top:var(--s05)}.cv .em{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s05)}.cv .em a:hover{color:var(--ink)}.cv .base{font-size:var(--t-sm);color:var(--ink-2);margin-top:2px}
.cv .tag{font-size:var(--t-title);font-weight:600;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.cv .ds{color:var(--ink-2);line-height:1.6;margin-top:var(--s1);max-width:66ch}
.cv h3{font-size:var(--t-h);font-weight:700;letter-spacing:-.02em;margin:var(--s5) 0 var(--s1);display:flex;align-items:baseline;gap:var(--s1)}.cv h3 small{font-size:var(--t-sm);color:var(--ink-2);font-weight:500}
.cv table{width:100%;border-collapse:collapse}
.cv td{padding:var(--s1) 0;border-top:1px solid var(--ink-3);vertical-align:top;line-height:1.5;font-size:var(--t-body)}
.cv td.d{width:calc(var(--u)*17);color:var(--ink-2);font-size:var(--t-sm);white-space:nowrap;font-variant-numeric:tabular-nums;padding-right:var(--s2);padding-top:calc(var(--s1) + 2px)}
.cv td b{font-weight:600}.cv td .sm{display:block;color:var(--ink-2);font-size:var(--t-sm);margin-top:2px}
.cv table.skills td.d{color:var(--ink);font-weight:600;font-size:var(--t-body)}
.cv details{margin-top:var(--s1)}.cv summary{cursor:pointer;font-size:var(--t-sm);color:var(--ink-2);padding:var(--s1) 0}
@media (max-width:760px){.cv td.d{width:calc(var(--u)*11)}.cv .idc img{width:calc(var(--u)*10);height:calc(var(--u)*13)}}
@media print{.cv td{font-size:11px}}

/* ---- 상영관 ---- */
.theater{outline:none;position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
.theater.on{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease)}
.theater .stage,.theater .panel{transition:opacity calc(var(--dur)*1.5) var(--ease),transform calc(var(--dur)*1.5) var(--ease)}
.theater:not(.on) .stage{opacity:0;transform:translateY(var(--s2)) scale(.985)}.theater:not(.on) .panel{opacity:0;transform:translateX(var(--s2))}
.theater.on .panel{transition-delay:calc(var(--dur)*.2)}
.theater .bgart{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(80px) saturate(1.2);opacity:.22;transform:scale(1.1)}
.theater .veil{position:absolute;inset:0;background:color-mix(in oklab,var(--bg) 78%,transparent)}
.theater .top{position:absolute;left:0;right:0;top:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s3);z-index:3;font-size:var(--t-micro);color:var(--ink-2);transition:opacity var(--dur) var(--ease)}
.theater .top b{color:var(--ink);font-weight:600}
.theater .top .r{display:flex;gap:var(--s1)}
.theater .ib{display:inline-grid;place-items:center;width:var(--s5);height:var(--s5);border-radius:50%;background:var(--ink-4);color:var(--ink);transition:background var(--d-micro) var(--ease)}
.theater .ib:hover{background:var(--ink-3)}
.theater .lay{position:absolute;inset:var(--nav-h) 0 0 0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s3);padding:var(--s2) var(--s5) var(--s3);z-index:2}
.theater .stage{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0}
.theater .vw{position:relative;margin:0 auto;max-width:100%;max-height:calc(100dvh - var(--nav-h) - 160px);aspect-ratio:var(--va,16/9);border-radius:var(--r2);overflow:hidden;background:#0b0b0d;box-shadow:var(--shadow-lg);width:min(100%,calc((100dvh - var(--nav-h) - 160px) * var(--vr,1.7778)))}
.theater .vw video,.theater .vw iframe,.theater .vw img{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b0b0d}
.theater .vw img{object-fit:contain}
.theater .vw .big{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);background:color-mix(in oklab,var(--bg) 30%,transparent);opacity:0;transition:opacity var(--d-micro) var(--ease)}
.theater .vw .big .ic{width:var(--s8);height:var(--s8)}
.theater .vw.paused .big{opacity:1}
.theater .vw .big .ic{transition:transform var(--dur) var(--ease);transform:scale(.9)}.theater .vw.paused .big .ic{transform:none}
.theater .vw .ph{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s5);color:var(--ink);font-size:var(--t-title);font-weight:700;letter-spacing:-.02em;text-align:center;text-wrap:balance}
.theater .vw .open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.theater .vw .next{position:absolute;right:var(--s2);bottom:var(--s2);width:280px;background:color-mix(in oklab,var(--bg) 88%,transparent);color:var(--ink);border-radius:var(--r);padding:var(--s1);display:flex;opacity:0;visibility:hidden;transform:translateY(var(--s2));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);align-items:center;gap:var(--s1);font-size:var(--t-micro);box-shadow:var(--shadow-lg);cursor:pointer;text-align:left;backdrop-filter:blur(12px)}
.theater .vw .next.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.theater .vw .next img{width:calc(var(--u)*11);height:calc(var(--u)*6.2);object-fit:cover;border-radius:var(--s05);flex:none}
.theater .vw .next span{min-width:0;flex:1}
.theater .vw .next small{display:block;color:var(--ink-2)}
.theater .vw .next b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theater .vw .next .cd{width:var(--s3);height:var(--s3);border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--acc) calc(var(--p,0)*1%),var(--ink-3) 0)}
.theater .vw .next .cancel{width:var(--s3);height:var(--s3);background:none}
.theater .meta{transition:opacity var(--dur) var(--ease);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);margin:var(--s2) auto 0;width:min(100%,calc((100dvh - var(--nav-h) - 160px) * var(--vr,1.7778)))}
.theater .meta h1{font-size:var(--t-title);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.theater .meta .s{font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theater .meta .y{font-size:var(--t-micro);color:var(--ink-2);white-space:nowrap}
.theater .ctl{transition:opacity var(--dur) var(--ease);margin:var(--s1) auto 0;width:min(100%,calc((100dvh - var(--nav-h) - 160px) * var(--vr,1.7778)))}
.theater .pg{position:relative;height:3px;background:var(--ink-3);border-radius:2px;cursor:pointer;transition:height var(--d-micro) var(--ease)}
.theater .pg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);border-radius:2px}
.theater .pg:hover,.theater .pg:focus-visible{height:6px}
.theater .pg i:after{content:'';position:absolute;right:calc(var(--u)*-.75);top:50%;width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;background:var(--acc);transform:translateY(-50%) scale(0);transition:transform var(--d-micro) var(--ease)}.theater .pg:hover i:after,.theater .pg:focus-visible i:after{transform:translateY(-50%) scale(1)}
.theater .tm{display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s05);font-variant-numeric:tabular-nums}
.theater .bt{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s05);flex-wrap:wrap}
.theater .bt .tr{display:flex;align-items:center;gap:var(--s2);margin:0 auto}
.theater .bt .ib{background:none}
.theater .bt .ib.pp{width:calc(var(--u)*6);height:calc(var(--u)*6)}
.theater .bt .ib.pp .ic{width:var(--s3);height:var(--s3)}
.theater .bt .chips{margin-left:auto}
.theater .chip{border-color:color-mix(in oklab,var(--ink) 25%,transparent);color:var(--ink-2);cursor:pointer}
.theater .chip:hover{color:var(--ink)}
.theater .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.theater .panel{background:color-mix(in oklab,var(--bg) 72%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--r2);box-shadow:var(--shadow),var(--ring);padding:var(--s2) var(--s3) var(--s3);overflow:auto;min-height:0;scrollbar-width:thin}
.theater .panel .seg{display:none}
.theater .panel .spec{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);font-size:var(--t-body);line-height:1.45;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--ink-3)}.theater .panel .spec span{color:var(--ink-2);font-size:var(--t-sm);padding-top:2px;white-space:nowrap}.theater .panel .spec b{font-weight:500}
.theater .panel .hl{margin-top:var(--s2);padding:var(--s1) var(--s2);border-left:2px solid var(--acc);font-size:var(--t-body);line-height:1.45}
.theater .panel .seg button{flex:1}
.theater .panel .lead{font-size:var(--t-h);font-weight:500;line-height:1.4;margin-bottom:var(--s2);letter-spacing:-.01em}
.theater .blk{display:grid;grid-template-columns:var(--s8) 1fr;gap:var(--s1);padding:var(--s1) 0;border-top:1px solid var(--ink-3);font-size:var(--t-body);line-height:1.5}
.theater .blk b{font-size:var(--t-micro);color:var(--ink-2);padding-top:2px;font-weight:600}
.theater .panel h5{font-size:var(--t-micro);color:var(--ink-2);margin:var(--s2) 0 var(--s05);font-weight:600}
.theater .m{display:grid;grid-template-columns:1fr auto;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--ink-3);font-size:var(--t-body)}
.theater .m span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.theater .m .ok{color:var(--ink)}
.theater .q button{display:grid;grid-template-columns:var(--s3) 1fr auto;gap:var(--s1);width:100%;text-align:left;padding:var(--s1) 0;border-bottom:1px solid var(--ink-3);font-size:var(--t-body);align-items:center;color:var(--ink)}
.theater .q button .n{color:var(--ink-2);font-size:var(--t-micro);font-variant-numeric:tabular-nums}
.theater .q button .d{color:var(--ink-2);font-size:var(--t-micro);font-variant-numeric:tabular-nums}
.theater .q button small{display:block;color:var(--ink-2);font-size:var(--t-micro);font-weight:400}
.theater .q button:hover{background:var(--ink-4)}
.theater .legend{font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s2)}
.theater .ext{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.theater .meta-tbl{font-size:var(--t-micro);color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:var(--s05) var(--s2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--ink-3)}
.theater .meta-tbl b{color:var(--ink);font-weight:500}
.theater.idle .top,.theater.idle .ctl,.theater.idle .meta{opacity:0;pointer-events:none}
.theater.idle{cursor:none}
/* 변주 B: 시네마(패널 서랍) */
body[data-stage="wide"] .theater .lay{display:flex;flex-direction:column;gap:var(--s5);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:var(--s8)}
body[data-stage="wide"] .theater .stage{flex:none;min-height:calc(100dvh - var(--nav-h) - var(--s5))}
body[data-stage="wide"] .theater .vw,body[data-stage="wide"] .theater .meta,body[data-stage="wide"] .theater .ctl{max-height:calc(100dvh - var(--nav-h) - 136px);width:min(100%,calc((100dvh - var(--nav-h) - 136px) * var(--vr,1.7778)))}
body[data-stage="wide"] .theater .panel{width:min(100%,880px);margin:0 auto;flex:none;overflow:visible;transform:none;opacity:1;visibility:visible}
body[data-stage="wide"] .theater .infob{display:inline-grid}
.theater .infob{display:none;font-weight:700;font-style:italic;font-family:Georgia,serif;font-size:var(--t-body)}
.theater.info .infob{background:var(--ink);color:var(--bg)}
@media (max-width:1100px){.theater .lay{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;overflow:auto;padding:var(--s2) var(--s2) var(--s3)}.theater .panel{overflow:visible}.theater .stage{justify-content:flex-start}.theater .vw,.theater .meta,.theater .ctl{max-width:100%;width:min(100%,calc(60dvh * var(--vr,1.7778)))}.theater .vw{max-height:60dvh}}
@media (max-width:760px){.theater .ib{width:var(--tap);height:var(--tap)}.theater .meta h1{font-size:var(--t-h)}.theater .bt .chips{margin-left:0;width:100%}.theater .lay{padding-inline:var(--s2)}.theater .top{padding-inline:var(--s2)}}

/* ---- PiP ---- */
.pip{position:fixed;right:var(--s3);bottom:var(--s5);width:320px;z-index:55;border-radius:var(--r2);overflow:hidden;background:var(--bg);box-shadow:var(--shadow-lg);display:none;color:var(--ink)}
.pip.on{display:block;animation:pipin var(--dur) var(--ease)}
body[data-pip="left"] .pip{right:auto;left:var(--s3)}
@keyframes pipin{from{transform:translateY(var(--s2));opacity:0}to{transform:none;opacity:1}}
.pip video{width:100%;aspect-ratio:var(--va,16/9);object-fit:contain;background:var(--bg);max-height:60vh;cursor:pointer}
.pip .bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:var(--s1);background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 70%,transparent),transparent);font-size:var(--t-micro);opacity:0;transition:opacity var(--d-micro) var(--ease)}
.pip:hover .bar,.pip:focus-within .bar{opacity:1}
@media (hover:none){.pip .bar{opacity:1}}
.pip .bar b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.pip .bar .ib{width:var(--s3);height:var(--s3);border-radius:50%;background:var(--ink-4);display:inline-grid;place-items:center;color:var(--ink);margin-left:var(--s05)}
.pip .pg{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink-3)}
.pip .pg i{display:block;height:100%;background:var(--acc);width:0}
@media (max-width:760px){.pip{width:min(60vw,240px);right:var(--s2);bottom:var(--s2)}}

/* ---- 시안 패널(?dev 또는 미리보기) ---- */
.vp{position:fixed;right:var(--s2);bottom:var(--s2);z-index:70;font-size:var(--t-micro)}
.vp .vpb{display:inline-flex;align-items:center;gap:var(--s05);padding:var(--s1) var(--s2);border-radius:999px;background:#0e0e10;color:#f2f0ea;font-weight:600;box-shadow:var(--shadow-lg)}
.vp .vpp{position:absolute;right:0;bottom:calc(100% + var(--s1));width:300px;max-height:min(70vh,640px);overflow:auto;background:#0e0e10;color:#f2f0ea;border-radius:var(--r2);padding:var(--s2);box-shadow:var(--shadow-lg);display:none;flex-direction:column;gap:var(--s2);scrollbar-width:thin}
.vp.on .vpp{display:flex}
.vp h5{font-size:var(--t-micro);font-weight:600;color:color-mix(in oklab,#f2f0ea 60%,transparent);margin-bottom:var(--s05)}
.vp .opt{display:grid;grid-template-columns:auto 1fr;gap:var(--s1);align-items:start;padding:var(--s05) 0;cursor:pointer}
.vp .opt input{margin-top:3px;accent-color:#cc1433}
.vp .opt b{font-weight:600}.vp .opt small{display:block;color:color-mix(in oklab,#f2f0ea 55%,transparent);line-height:1.35}
.vp .sum{border-top:1px solid color-mix(in oklab,#f2f0ea 18%,transparent);padding-top:var(--s1);display:flex;justify-content:space-between;align-items:center;gap:var(--s1)}
.vp .sum code{font:inherit;color:color-mix(in oklab,#f2f0ea 75%,transparent);word-break:break-all}
.vp .sum button{padding:var(--s05) var(--s1);border-radius:999px;background:#f2f0ea;color:#0e0e10;font-weight:600;white-space:nowrap}
@media (max-width:760px){.vp .vpp{width:min(300px,calc(100vw - var(--s5)))}}
/* ---- dev 스위치(?dev) ---- */
.dev{position:fixed;left:var(--s2);bottom:var(--s2);z-index:70;background:color-mix(in oklab,#0e0e10 92%,transparent);color:#f2f0ea;border-radius:var(--r);padding:var(--s1) var(--s2);font-size:var(--t-micro);display:none;gap:var(--s1);flex-direction:column;box-shadow:var(--shadow-lg)}
.dev.on{display:flex}
.dev label{display:flex;justify-content:space-between;gap:var(--s2);align-items:center}
.dev select{font:inherit;background:transparent;color:inherit;border:1px solid color-mix(in oklab,#f2f0ea 25%,transparent);border-radius:var(--s05);padding:2px var(--s05)}