/* OHREN Lab 사이트 스타일
   강조색은 아래 --accent 한 곳(첫 화면 3D 재질도 이 값을 읽는다 · hero/hero.js) */
@font-face{font-family:"Geist";src:url(fonts/geist-sans.woff) format("woff");font-weight:400 600;font-display:swap}
@font-face{font-family:"OHREN Sans";src:url(fonts/ohren-sans.woff) format("woff");font-weight:400 1000;font-display:swap}

:root{
  /* 격자 */
  --grid-columns:4; --grid-gutter:.5rem; --page-margin:1.25rem; --content-max:112.5rem; --header-height:6rem;
  /* 간격 */
  --gap-xl:8.125rem; --gap-lg:6.25rem; --gap-md:5rem;
  /* 글자 (모바일) */
  --fs-hero:min(41.5vw,11.4rem); --fs-d2xl:6.25rem; --fs-dxl:6.25rem; --fs-dl:3.29rem; --fs-h2:2.25rem; --fs-h3:2.25rem; --fs-h4:2rem; --fs-h6:1.375rem; --fs-body:1.125rem; --fs-nav:1rem; --fs-small:.875rem;
  --lh-display:.88; --lh-head:.9; --lh-body:1.6;
  --tr-hero:-.07em; --tr-display:-.05em; --tr-h4:-.04em; --tr-h6:-.01em; --tr-nav:-.03em;
  --fw:600; --fw-body:400;
  /* 색 — 무채색 + 강조 하나 */
  --ink:#0d0b0a; --paper:#ffffff; --cream:#f7f4ee; --cream-2:#faf8f4; --gray-2:#76726e; --gray-on-dark:#d5d2cf;
  --ink-20:rgb(13 11 10 / .2); --line:#0000004d; --line-strong:#000000b3;
  --accent:#2f6bff;
  /* 움직임 */
  --ease-soft:cubic-bezier(.625,.05,0,1); --ease-out:cubic-bezier(0,0,.2,1); --ease-ui-out:cubic-bezier(.23,1,.32,1);
  --ease-cursor:cubic-bezier(.75,0,.25,1);
  --t-press:.16s; --t-ui:.2s; --t-ui-slow:.3s; --t-overlay-in:.4s; --t-overlay-out:.2s; --t-btn-fill:.7s; --t-card-img:.5s;
  --radius-pill:999px; --radius-card:20px; --radius-img:8px;
  --page-light:var(--paper);
  --ff:"Geist","OHREN Sans",system-ui,sans-serif;
}
@media (min-width:48rem){ :root{ --grid-columns:8; } }
@media (min-width:64rem){ :root{
  --grid-columns:12; --grid-gutter:1rem; --page-margin:2.5rem; --header-height:4.375rem;
  --gap-xl:clamp(10.625rem,6.5rem + 6.44vw,13.75rem); --gap-lg:clamp(8.125rem,5.16rem + 4.64vw,10.375rem); --gap-md:clamp(6.375rem,4.23rem + 3.35vw,8rem);
  --fs-hero:min(28.5vw,17.8rem); --fs-d2xl:clamp(11.875rem,2.8rem + 14.18vw,18.75rem); --fs-dxl:clamp(9.125rem,4.67rem + 6.96vw,12.5rem);
  --fs-dl:clamp(7.625rem,4rem + 5.67vw,10.375rem); --fs-h2:clamp(4.125rem,2.31rem + 2.84vw,5.5rem); --fs-h3:clamp(3.25rem,2.43rem + 1.29vw,3.875rem);
  --fs-h4:clamp(2.5rem,2.01rem + .77vw,2.875rem); --fs-h6:clamp(1.5rem,1.34rem + .26vw,1.625rem); --fs-body:clamp(1.125rem,.96rem + .26vw,1.25rem);
} }

/* 테마 — 바탕은 body 하나가 검정 ↔ 흰으로 바뀐다. 제 바탕을 가진 구역은 data-own */
html[data-theme="dark"] body{--bg:var(--ink);--fg:#fff;--fg-2:var(--gray-on-dark);--fg-20:rgb(255 255 255 / .2);--ln:#ffffff4d;--ln-s:#ffffffb3}
html[data-theme="light"] body{--bg:var(--page-light);--fg:var(--ink);--fg-2:var(--gray-2);--fg-20:var(--ink-20);--ln:var(--line);--ln-s:var(--line-strong)}
body.is-cream{--page-light:var(--cream-2)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--ff);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);background:var(--bg);color:var(--fg);
  transition:background-color .6s var(--ease-ui-out),color .6s var(--ease-ui-out);-webkit-font-smoothing:antialiased;overflow-x:clip}
html.no-tr body,html.no-tr body *{transition:none!important}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
em{font-style:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html:lang(en) [data-l="ko"],html:lang(ko) [data-l="en"]{display:none}
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:-9999px;top:16px;z-index:200;background:#fff;color:var(--ink);padding:8px 14px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}

/* 글자 단계 — 600 한 굵기 · 음수 자간 · 행간 .88/.9 · cap-height 자르기 */
.hero-word,.d-2xl,.d-l,.h2,.h3,.h4,.h6,.cta-h,.foot-word{font-weight:var(--fw);text-box:trim-both cap alphabetic}
.d-2xl{font-size:var(--fs-d2xl);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.d-l{font-size:var(--fs-dl);line-height:var(--lh-head);letter-spacing:var(--tr-display)}
.h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:var(--tr-display)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:var(--tr-display)}
.h4{font-size:var(--fs-h4);line-height:var(--lh-head);letter-spacing:var(--tr-h4)}
.h6{font-size:var(--fs-h6);line-height:1.1;letter-spacing:var(--tr-h6)}
.lab{font-size:var(--fs-small);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--fg-2);margin-bottom:1.5rem}
.ac{color:var(--accent)}
/* KO: 한글은 라틴(-.05em 안팎)보다 덜 조인다(-.02em 안팎) · 큰 제목·여러 줄 글은 행간을 연다 · 제목은 줄 길이를 고르게.
   «OHREN.»(.hero-word)은 KO 페이지에서도 로마자라 라틴 값 그대로 둔다. */
html:lang(ko) .d-2xl,html:lang(ko) .d-l,html:lang(ko) .h2,html:lang(ko) .h3,html:lang(ko) .h4,html:lang(ko) .cta-h,html:lang(ko) .foot-word,html:lang(ko) .dh-word,html:lang(ko) .tr-t,html:lang(ko) .ov-nav a{letter-spacing:-.02em}
html:lang(ko) .d-l,html:lang(ko) .d-2xl{line-height:1.12}
html:lang(ko) .h2,html:lang(ko) .cta-h,html:lang(ko) .cta-long .cta-h{line-height:1.15}
html:lang(ko) .h3{line-height:1.3}
html:lang(ko) .h4{line-height:1.3}
html:lang(ko) .h6{line-height:1.45}
html:lang(ko) :is(.d-l,.h2,.cta-h,.dh-name,.lh-a-h){text-wrap:balance}
html:lang(ko) :is(.h3,.h4,.h6,.sc-items li,.lim li){text-wrap:pretty}
.fit{white-space:nowrap}

/* 머리 — 고정 70/96 · 투명 · 글자색이 아래 구역을 따라간다 */
.bar{position:fixed;inset:0 0 auto;height:var(--header-height);z-index:50;display:flex;align-items:center;gap:16px;padding:0 var(--page-margin);color:var(--bar-fg);transition:color .4s var(--ease-ui-out)}
.bar[data-tone="dark"]{--bar-fg:#fff}
.bar[data-tone="light"]{--bar-fg:var(--ink)}
.bar .nav a,.bar .lang{transition:color .4s var(--ease-ui-out)}
.bar .nav a[data-tone="dark"],.bar .lang[data-tone="dark"]{color:#fff}
.bar .nav a[data-tone="light"],.bar .lang[data-tone="light"]{color:var(--ink)}
.logo{font-weight:600;font-size:1.75rem;letter-spacing:-.05em;line-height:1;white-space:nowrap;color:var(--accent);transition:color .4s var(--ease-ui-out)}
/* 로고 «O·HREN_Lab·AI» — O 는 대문자 높이 × 1.06(바닥이 기준선 아래 3%) · AI 는 × .62(윗선이 대문자 윗선) · Geist 대문자 높이 .71em
   글자는 로고 밑 바탕이 어두우면 흰색(site.js 가 로고에 data-tone) · 밝은 면·흰 메뉴 겹 화면·JS 없음은 이전 로고 글자색(파랑) */
.logo img{display:inline-block;width:auto}
.logo-o{height:.7526em;vertical-align:-.0213em}
.logo-ai{height:.4402em;vertical-align:.2698em;margin-left:.12em}
.bar .logo[data-tone="dark"]{color:#fff}
.nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:46px}
.nav a{font-size:var(--fs-nav);letter-spacing:var(--tr-nav);line-height:1;padding:8px 0}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:20px}
.lang{display:inline-flex;gap:2px;font-size:var(--fs-small)}
.lang button{background:none;border:0;padding:6px 8px;cursor:pointer;opacity:.65;font-weight:600;letter-spacing:-.01em}
.lang button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.bar .menu-btn{display:none;margin-left:auto}

/* 알약 — 커서 들어온 점에서 원이 0 → 1 로 채운다(.7s) */
.pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 31.1px;border:0;border-radius:var(--radius-pill);font-size:1rem;font-weight:600;letter-spacing:-.03em;line-height:1;cursor:pointer;white-space:nowrap;transition:color .4s var(--ease-soft)}
.pill-w{background:#fff;color:var(--ink)}
.pill-k{background:var(--ink);color:#fff;height:69px;padding:0 28px;font-size:var(--fs-h6)}
.pill-c{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,300px);height:var(--d,300px);border-radius:50%;background:var(--accent);transform:translate(-50%,-50%) scale(0);transition:transform var(--t-btn-fill) var(--ease-soft);z-index:-1;pointer-events:none}
.pill.on{color:#fff}
.pill.on .pill-c{transform:translate(-50%,-50%) scale(1)}

/* 머리 뒤 3층 점진 흐림 */
.pblur{position:fixed;inset:0 0 auto;height:287px;z-index:40;pointer-events:none}
.pblur i{position:absolute;inset:0}
.pblur i:nth-child(1){-webkit-backdrop-filter:blur(1.791px);backdrop-filter:blur(1.791px);-webkit-mask:linear-gradient(#000 12.5%,transparent 50%);mask:linear-gradient(#000 12.5%,transparent 50%)}
.pblur i:nth-child(2){-webkit-backdrop-filter:blur(7.164px);backdrop-filter:blur(7.164px);-webkit-mask:linear-gradient(#000 0,transparent 37.5%);mask:linear-gradient(#000 0,transparent 37.5%)}
.pblur i:nth-child(3){-webkit-backdrop-filter:blur(28.656px);backdrop-filter:blur(28.656px);-webkit-mask:linear-gradient(#000 0,transparent 25%);mask:linear-gradient(#000 0,transparent 25%)}

/* 모바일 덮개 메뉴 */
.ov{position:fixed;inset:0;z-index:60;background:#fff;color:var(--ink);display:flex;flex-direction:column;padding:0 var(--page-margin) 28px;opacity:0;transition:opacity var(--t-overlay-in) var(--ease-ui-out)}
.ov[hidden]{display:none}
.ov.open{opacity:1}
.ov-top{height:var(--header-height);display:flex;align-items:center;justify-content:space-between}
.ov-x{width:48px;height:48px;border-radius:50%;border:1px solid rgba(0,0,0,.3);background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ov-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
.ov-nav{margin-top:24px}
.ov-nav a{display:block;font-size:2rem;font-weight:600;letter-spacing:-.04em;line-height:1;padding:14.5px 0}
.ov.open .ov-nav li{animation:ovIn .8s var(--ease-soft) both;animation-delay:calc(var(--i) * .1s + .12s)}
@keyframes ovIn{0%{opacity:0;transform:translateY(.6em);color:var(--accent)}45%{opacity:1;transform:none;color:var(--accent)}100%{opacity:1;transform:none;color:var(--ink)}}
.ov-bot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* 페이지 이동 전환 — 둥근 윗면으로 올라와 덮고 → 가는 페이지 이름 → 둥근 아랫면으로 빠진다 */
.tr{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.tr-p{--cap:min(30svh,260px);position:absolute;left:0;right:0;top:0;height:100%;background:var(--ink);transform:translateY(calc(100% + var(--cap)));display:grid;place-items:center}
.tr-p::before,.tr-p::after{content:"";position:absolute;left:-6%;right:-6%;height:calc(var(--cap) * 2);background:var(--ink);border-radius:50%}
.tr-p::before{top:calc(var(--cap) * -1)}
.tr-p::after{bottom:calc(var(--cap) * -1)}
.tr-t{position:relative;z-index:1;color:#fff;font-size:var(--fs-dl);font-weight:600;line-height:.9;letter-spacing:-.05em;opacity:0;transition:opacity .3s}
.tr.in .tr-p{animation:trIn .6s var(--ease-ui-out) forwards}
.tr.in .tr-t,.tr.out .tr-t{opacity:1}
.tr.out .tr-p{transform:none;animation:trOut 1.05s cubic-bezier(.65,0,.25,1) .35s forwards}
.tr.out .tr-t{animation:fadeOut .35s ease .3s forwards}
@keyframes trIn{from{transform:translateY(calc(100% + var(--cap)))}to{transform:none}}
@keyframes trOut{from{transform:none}to{transform:translateY(calc(-100% - var(--cap)))}}
@keyframes fadeOut{to{opacity:0}}
html.tr-arrive::before{content:"";position:fixed;inset:0;background:var(--ink);z-index:99;animation:trSafe 0s 2s forwards}
@keyframes trSafe{to{visibility:hidden}}

/* 큰 제목 등장 */
html.js .rv{opacity:0;transform:translateY(.3em);transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft)}
html.js .rv.in{opacity:1;transform:none}

/* 첫 화면 — 물체가 100svh 를 꽉 채우고, 거대 «OHREN.» 이 물체 아래쪽을 덮는다 */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-poster img{width:100%;height:100%;object-fit:cover}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.hero.gl .hero-cv{opacity:1}
.hero-txt{position:absolute;left:var(--page-margin);right:var(--page-margin);bottom:calc(var(--page-margin) + .25rem);z-index:2;animation:heroIn 1s var(--ease-out) .25s both}
.hero-word{font-size:var(--fs-hero);line-height:var(--lh-display);letter-spacing:var(--tr-hero);margin-left:-.04em}
.hero-h{max-width:min(100%,56.3rem);margin-top:1.6rem}
@keyframes heroIn{from{opacity:0}to{opacity:1}}

/* 선언 문장 */
.decl{padding:var(--gap-md) var(--page-margin)}
.decl .d-l{max-width:var(--content-max)}

/* 큰 문단 + 화살표 링크 · 이미지 자취 */
.intro{position:relative;padding:calc(var(--gap-md) * .35) var(--page-margin) var(--gap-md);display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gutter);overflow:clip}
.intro-l{grid-column:1/-1}
.intro .lab{font-size:var(--fs-h6);font-weight:600;letter-spacing:var(--tr-h6);line-height:1.1;color:var(--fg);margin-bottom:2rem}
.intro .lab::before{content:"";display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--accent);margin-right:.45em;vertical-align:.12em}
.quick{grid-column:1/-1;margin-top:3rem;display:grid;gap:.4rem;align-content:start}
@media (min-width:64rem){.intro-l{grid-column:1/9}.quick{grid-column:10/-1;margin-top:2.6rem}.intro-a .intro-l{grid-column:1/11}}
.fill .fl{display:block;background-image:linear-gradient(90deg,var(--fg) 0%,var(--fg) 40%,var(--accent) 50%,var(--fg-20) 60%,var(--fg-20) 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.trail-img{position:fixed;left:0;top:0;width:240px;height:auto;pointer-events:none;z-index:30;will-change:transform,opacity;border-radius:var(--radius-img)}
.alink{display:inline-flex;align-items:center;gap:.35em;font-size:var(--fs-h6);font-weight:600;letter-spacing:var(--tr-h6);line-height:1.1;padding:6px 0}
.arw{position:relative;display:inline-block;width:.78em;height:.78em;overflow:hidden;flex:none}
.arw svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;transition:transform .5s var(--ease-soft)}
.arw svg+svg{transform:translate(-110%,110%)}
a:hover .arw svg:first-child,a:focus-visible .arw svg:first-child{transform:translate(110%,-110%)}
a:hover .arw svg+svg,a:focus-visible .arw svg+svg{transform:none}

/* Our work — 기본은 세로로 쌓임 · .js-pin(≥1024)에서 가로 핀 */
.work{position:relative}
.work-pin{padding:var(--gap-md) var(--page-margin) 0}
.work-h{margin-bottom:2.5rem}
.work-track{display:grid;gap:var(--grid-gutter)}
.more-row{padding:2.5rem var(--page-margin) var(--gap-md)}
.wcard a{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#1a1816;color:#fff;height:100%}
.wc-pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1a1816}
.wc-pic img{width:100%;height:100%;object-fit:contain;transition:transform var(--t-card-img) var(--ease-out)}
.wcard a:hover .wc-pic img{transform:scale(1.05)}
.wc-txt{position:relative;z-index:1;padding:20px}
.wc-tag{font-size:var(--fs-small);font-weight:500;color:var(--gray-on-dark);margin-bottom:1rem}
.wc-ln{color:rgb(255 255 255 / .5);margin-top:.35em}
.wc-st{font-size:var(--fs-small);font-weight:500;color:var(--gray-on-dark);margin-top:1.2rem}
.pend{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:16px 20px;background:#1a1816 repeating-linear-gradient(135deg,rgb(255 255 255 / .035) 0 1px,transparent 1px 14px);color:rgb(255 255 255 / .62);font-size:var(--fs-small);font-weight:500}
.pend-t{position:relative;z-index:1;border:1px dashed rgb(255 255 255 / .35);border-radius:var(--radius-pill);padding:6px 12px;line-height:1.2}
.pend-n{position:absolute;right:.04em;top:-.06em;font-size:clamp(7rem,4rem + 12vw,22rem);font-weight:600;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgb(255 255 255 / .16);pointer-events:none}
@media (min-width:64rem){.pend-n{right:auto;left:52%;top:50%;transform:translateY(-50%)}.wc-pic.pend{justify-content:flex-end;padding:28px 40px}}
/* 홈 Selected projects 카드(.work) — 모든 폭에서 그림이 카드를 가득 덮고 글은 안쪽 왼쪽 아래(프로젝트 목록 카드는 그대로 contain)
   그림 자리: <1024 52% — 좁은 세로 카드에서도 3D 치아가 통째로 남는다 · ≥1024 는 아래 right 70%
   글은 흐름 안에서 카드 바닥에 붙는다(위아래 여백 --ty) — 세로 목록 카드는 «글 높이 + 여백» 아래로 줄지 않는다 */
.work .wcard a{display:flex;flex-direction:column;justify-content:flex-end}
.work .wc-pic{position:absolute;inset:0;aspect-ratio:auto}
.work .wc-pic img{object-fit:cover;object-position:52% 70%}
.work .wc-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(13 11 10 / .5) 0%,rgb(13 11 10 / 0) 40%)}
.work .wc-txt{--tx:20px;--ty:20px;position:relative;inset:auto;margin:var(--ty) var(--tx);padding:0}
/* 글 뒤 어둠 — 글 상자에 붙여 카드 높이와 상관없이 글 자리만 덮는다 · 아래·왼쪽이 진하고 위로 6rem · 오른쪽으로 16rem 에 걸쳐 옅어진다 */
.work .wc-txt::before{content:"";position:absolute;z-index:-1;left:calc(var(--tx) * -1);bottom:calc(var(--ty) * -1);top:-6rem;width:calc(100% + var(--tx) + 16rem);
  background:linear-gradient(0deg,rgb(13 11 10 / .94) 0%,rgb(13 11 10 / .88) calc(100% - 6rem),rgb(13 11 10 / 0) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgb(0 0 0 / .9) calc(100% - 16rem),transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgb(0 0 0 / .9) calc(100% - 16rem),transparent 100%)}
/* <1024 세로 목록: 카드 하나가 머리 아래 화면을 채운다(위아래 페이지 여백만 남김) · 글이 더 길면 글 높이 + 위아래 여백까지 늘어난다 */
@media (max-width:63.99rem){.work .wcard a{min-height:calc(100svh - var(--header-height) - var(--page-margin) * 2)}}
@media (min-width:64rem){
  .wcard a{display:block}
  .wc-pic{position:absolute;inset:0;aspect-ratio:auto}
  .wc-pic img{object-position:right center}
  .wc-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(26 24 22 / .96) 0%,rgb(26 24 22 / .82) 38%,rgb(26 24 22 / 0) 70%)}
  .wc-txt{position:absolute;left:40px;right:40px;bottom:36px;padding:0;max-width:58rem}
  .work-track .wcard,.pl .wcard{height:min(628px,calc(100svh - var(--header-height) - 2.5rem))}
  /* 홈 세로 목록(≥1024 · 핀 꺼짐 = 줄임 움직임 또는 낮은 화면): 같은 높이를 최소로 두고 글이 더 길면 늘어난다 */
  .work .wcard{height:auto}
  .work .wcard a{min-height:min(628px,calc(100svh - var(--header-height) - 2.5rem))}
  html.js-pin .work{height:var(--pin-h,auto)}
  html.js-pin .work-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:calc(var(--header-height) + 1rem) 0 var(--page-margin)}
  /* 홈 카드(≥1024): 글 자리 40·36px · 핀에선 카드가 제목 아래부터 화면 바닥(페이지 여백만 남김)까지 채운다
     그림 자리 right 70%: 카드가 그림보다 세로로 길면 왼쪽(채팅 칸)만 잘리고 3D 치아·단계 표가 남는다 · 가로로 길면 치아 전체가 보이는 범위(.34~.77)에서 위로 */
  .work .wc-txt{--tx:40px;--ty:36px}
  .work .wc-pic img{object-position:right 70%}
  html.js-pin .work-h{padding:0 var(--page-margin);margin-bottom:2.5rem}
  html.js-pin .work-track{flex:1 1 0;min-height:0;display:flex;gap:40px;padding:0 var(--page-margin);will-change:transform}
  /* 핀 카드 높이 = 제목 아래 남은 화면(최소 높이 없음) · 그 높이가 가장 긴 글 상자(카드 전부 · EN/KO 중 큰 쪽) + 위아래 여백보다 작으면 site.js 가 핀을 켜지 않는다(위 세로 목록) */
  html.js-pin .work-track .wcard{flex:0 0 min(calc(100vw - var(--page-margin) * 2),var(--content-max));height:auto}
  html.js-pin .work .wcard a{min-height:0}
}

/* How we work — 크림 큰 카드가 머리 밑에 붙고 다음 카드가 아래에서 올라와 덮는다(sticky · JS 없음) · 앞 카드는 위끝만 남는다 · 높이 식의 3 = 카드 넷 */
.how{padding:var(--gap-md) var(--page-margin)}
.how-list{--hc-step:1.25rem;--hc-max:30rem;display:grid;gap:var(--grid-gutter);margin:var(--gap-md) 0 2.5rem}
.hcard{position:sticky;top:calc(var(--header-height) + var(--i) * var(--hc-step));min-height:min(var(--hc-max),calc(100svh - var(--header-height) - 3 * var(--hc-step) - var(--page-margin)));
  background:var(--cream);color:var(--ink);padding:24px 20px;display:flex;flex-direction:column;gap:1.25rem;box-shadow:inset 0 1px 0 var(--line)}
.hc-num{color:var(--accent)}
.hc-d{margin-top:auto;max-width:40ch;line-height:1}
html:lang(en) .hc-d::first-letter{text-transform:uppercase}
@media (min-width:64rem){.how-list{--hc-step:2rem;--hc-max:690px}.hcard{padding:36px 40px;gap:2rem}}

/* 쌓이는 카드 — 카드가 위에 붙고 다음 카드가 덮는다 */
.stack{background:var(--page-light);color:var(--ink);padding:var(--gap-md) var(--page-margin) var(--gap-lg)}
.stack-list{display:grid;gap:var(--grid-gutter);margin-top:var(--gap-md);padding-bottom:20svh}
.scard{--sc-step:calc(var(--fs-h2) * .8 + 2.6rem);position:sticky;top:calc(var(--header-height) + var(--i) * var(--sc-step));background:var(--cream);color:var(--ink);padding:24px 20px;display:flex;flex-direction:column;gap:1.6rem;min-height:min(690px,calc(100svh - var(--header-height) - 3rem))}
.sc-num{color:var(--accent)}
.sc-lead{max-width:40ch}
.sc-h{font-size:var(--fs-h2);line-height:.95;letter-spacing:var(--tr-display)}
.sc-items{margin-top:auto;display:grid;gap:0 calc(var(--grid-gutter) * 2);grid-template-columns:1fr}
.sc-items li{border-top:1px solid var(--line);padding:16px 0 18px;font-size:clamp(1.375rem,1.05rem + .9vw,2.125rem);line-height:1.08;letter-spacing:-.025em}
html:lang(ko) .sc-items li{line-height:1.4;letter-spacing:-.02em}
@media (min-width:64rem){.scard{padding:36px 40px}.sc-h{max-width:16ch}.sc-items{grid-template-columns:1fr 1fr}}

/* 끝 CTA 둘 */
.ctas{display:grid;gap:var(--grid-gutter);padding:var(--gap-xl) var(--page-margin)}
@media (min-width:48rem){.ctas{grid-template-columns:1fr 1fr}}
.cta{position:relative;container-type:inline-size;display:flex;flex-direction:column;gap:1.25rem;min-height:23rem;padding:28px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.cta-c{background:var(--cream);border-color:var(--cream)}
.cta-tag{color:var(--accent);font-size:clamp(1.5rem,1.2rem + .6vw,2.02rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.cta-h{font-size:clamp(2.6rem,14.4cqi,7.8125rem);line-height:.9;letter-spacing:-.03em}
.cta-long .cta-h{font-size:clamp(2.2rem,8.4cqi,5rem);line-height:.95}
.cta-p{max-width:30ch;color:var(--gray-2)}
.cta-btn{margin-top:auto;width:60px;height:60px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background-color .2s,border-color .2s,color .2s}
.cta-btn .arw{width:22px;height:22px}
.cta:hover .cta-btn{background:var(--ink);border-color:var(--ink);color:#fff}

/* 꼬리 — 검정 · 거대 단어 · 앞 구역 아래에서 드러남(데스크톱) */
main{position:relative;z-index:1;background:var(--bg);transition:background-color .6s var(--ease-ui-out)}
.foot{position:relative;z-index:0;background:var(--ink);color:#fff;padding:var(--gap-md) var(--page-margin) 28px;overflow:hidden}
.foot-word{font-size:var(--fs-d2xl);line-height:var(--lh-display);letter-spacing:-.02em;margin:0 0 var(--gap-lg) -.03em}
.foot-cols{display:grid;gap:2rem;align-items:end}
.foot-nav{display:grid;gap:4px}
.foot-nav a{font-size:var(--fs-h6);font-weight:600;letter-spacing:var(--tr-h6);line-height:1.25;color:var(--cream)}
.foot-meta{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-small);color:var(--cream)}
@media (min-width:64rem){.foot-cols{grid-template-columns:6fr 3fr 3fr}.foot{position:sticky;bottom:0}}

/* 목록 페이지 첫 구역 — 거대 단어 + 아래쪽 정렬 */
.lh{min-height:min(652px,90svh);display:flex;flex-direction:column;justify-content:flex-end;gap:2rem;padding:calc(var(--header-height) + 4.4rem) var(--page-margin) var(--gap-md)}
.lh-a{min-height:min(760px,96svh)}
.lh-a-row{display:grid;gap:1.5rem;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr))}
.lh-a-h,.lh-a-row .lh-lead{grid-column:1/-1}
@media (min-width:64rem){.lh-a-h{grid-column:1/7}.lh-a-row .lh-lead{grid-column:7/-1;align-self:end}}
.lh-a-h{max-width:14ch}
.lh-lead{max-width:40ch;color:var(--fg-2)}
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{border:1px solid var(--ln-s);background:none;border-radius:var(--radius-pill);padding:10px 20px;font-weight:600;font-size:1rem;letter-spacing:-.03em;cursor:pointer;line-height:1}
.filter button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.plist{padding:var(--gap-md) var(--page-margin) var(--gap-lg)}
.pl{display:grid;gap:var(--grid-gutter)}
.pl .wcard{position:sticky;top:calc(var(--header-height) + var(--i) * 22px)}
.pl .wcard[hidden]{display:none}

/* 상세 */
.dh{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff}
.dh-media{position:absolute;inset:0}
.dh-media img,.dh-media video{display:block;width:100%;height:100%;object-fit:contain;object-position:center 30%}
.dh-media.pend{padding:calc(var(--header-height) + 16px) var(--page-margin)}
.dh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgb(13 11 10 / .55) 0%,rgb(13 11 10 / 0) 22%,rgb(13 11 10 / .55) 50%,rgb(13 11 10 / .94) 78%)}
.crumb{position:absolute;z-index:2;top:calc(var(--header-height) + 1rem);left:var(--page-margin);right:var(--page-margin);display:flex;gap:.4em;font-size:var(--fs-h6);font-weight:600;letter-spacing:var(--tr-h6);line-height:1.1;white-space:nowrap}
.crumb span:last-child{overflow:hidden;text-overflow:ellipsis;opacity:.6}
.dh-txt{position:absolute;z-index:2;left:var(--page-margin);right:var(--page-margin);bottom:calc(var(--page-margin) + .25rem);max-width:var(--content-max)}
.dh-word{font-size:var(--fs-dxl);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--tr-display);margin:0 0 2rem -.04em;text-box:trim-both cap alphabetic}
.dh-name{max-width:22ch}
.dh-line{margin-top:1.25rem;max-width:36ch;color:var(--gray-on-dark)}
/* 재생 칸 — 첫 화면 바로 아래 · 글자 겹침 없음 · 원본 비율 · 한 화면에 다 보이게 */
.play{background:var(--ink);padding:var(--gap-md) var(--page-margin)}
.play-in video{display:block;width:100%;max-width:min(1280px,calc((100svh - var(--header-height) - 3rem) * 1.6));height:auto;aspect-ratio:1280/800;margin:0 auto;background:#000;object-fit:contain}
.band{background:var(--cream-2);color:var(--ink);padding:var(--gap-md) var(--page-margin);display:grid;gap:2rem;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr))}
.band-l,.band-r{grid-column:1/-1}
@media (min-width:64rem){.band-l{grid-column:1/5}.band-r{grid-column:5/-1}.short .lab{grid-column:1/5}.short-list{grid-column:5/-1}}
.band .lab{color:var(--gray-2)}
.tpill{display:inline-block;margin:0 8px 8px 0;padding:8px 14px;border-radius:var(--radius-pill);background:#0000000d;font-size:var(--fs-small);font-weight:500;line-height:1.3}
.band-r .d-l{margin-bottom:2.5rem}
.band-r .h4{max-width:30ch}
.lim li{border-top:1px solid var(--line);padding:18px 0;max-width:48ch}
.short{padding:var(--gap-md) var(--page-margin);display:grid;gap:1rem;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr))}
.short .lab,.short-list{grid-column:1/-1}
.short-list li{border-top:1px solid var(--ln);padding:22px 0;max-width:32ch}
.shots{padding:0 var(--page-margin) var(--gap-md)}
.shots-in{display:grid;gap:var(--grid-gutter);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.shot-p{aspect-ratio:16/10;border-radius:var(--radius-img)}
.shots-note{margin:0 0 1rem;color:var(--gray-2)}
.shot-i{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#1a1816;border-radius:var(--radius-img)}
.result{padding:var(--gap-md) var(--page-margin)}
.rcards{display:grid;gap:var(--grid-gutter);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:3rem}
.rcard{background:var(--cream);color:var(--ink);padding:24px;display:flex;flex-direction:column;gap:2rem;justify-content:space-between;min-height:14rem;border-radius:var(--radius-img)}
@media (min-width:64rem){.rcard{padding:28px;min-height:22rem}}
.rc-num{color:var(--accent)}

/* About */
.wide{padding:0 var(--page-margin)}
.wide img{width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover}
.steps,.words{padding:var(--gap-md) var(--page-margin)}
.step-list,.word-list{margin-top:3rem}
.step-list li{display:grid;gap:1rem;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));border-top:1px solid var(--ln);padding:28px 0}
.st-num{grid-column:1/2;color:var(--accent)}
.step-list .h4{grid-column:2/-1;max-width:30ch}
@media (min-width:64rem){.step-list .h4{grid-column:4/-1}.st-num{grid-column:1/4}}
.word-list li{border-top:1px solid var(--ln);padding:28px 0;max-width:24ch}

/* 390 · 1023 까지: 메뉴 알약 + 덮개 */
@media (max-width:63.99rem){
  .nav,.bar-r{display:none}
  .bar .menu-btn{display:inline-flex;height:44px;padding:0 28px}
  .pblur{height:180px}
  .tr-t{font-size:var(--fs-h2)}
}

/* 움직임 줄이기 — 핀·전환·자취·채움을 끄고 정지 상태로(글은 다 보이게) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html.js .rv{opacity:1;transform:none}
  .fill .fl{background:none;-webkit-text-fill-color:currentColor}
  .hcard{position:relative;top:auto}
}

/* 긴 문단(h4 단계)만 행간을 1.0 으로 — 3~4줄 도입 문단보다 긴 글이라 .9 면 줄이 붙는다 */
.band-r p.h4,.short-list .h4,.step-list .h4,.cta-p,.sc-lead{line-height:1}
html:lang(ko) .band-r p.h4,html:lang(ko) .short-list .h4,html:lang(ko) .step-list .h4,html:lang(ko) .cta-p,html:lang(ko) .sc-lead{line-height:1.4}

/* 부드러운 스크롤 Lenis 1.3.23 — 패키지 lenis.css 에서 쓰는 줄만 옮김(MIT) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* 390 첫 화면 — 거대 «OHREN.» 아래 한 줄을 붙이고, 물체가 글 덩어리 위 남는 높이를 채우게 */
@media (max-width:47.99rem){
  .hero-h{margin-top:1rem;font-size:1.625rem}
  .dh-word{margin-bottom:1.25rem}
}