/* DEBOX motion — 모션 시스템 전용 스타일. 숨김 초기 상태는 html.mo(모션 번들이 실제로 로드될 때만) 아래에서만 적용되고,
   html.hf-late(2.6초 안에 모션 JS 가 안 오면) · html.mo.hf-fail · 감속 모션에서는 모두 즉시 완성 상태로 보인다. 위치 · 크기는 transform · opacity · clip-path · stroke 만 움직인다. */

/* ── Hero: DEBOX Frame Reveal ───────────────────────── */
.hf{position:absolute;inset:0;z-index:1;pointer-events:none;display:none}
html.mo .hero:not(.hf-done) .hf{display:block}
.hf-panels{position:absolute;inset:0;display:flex}
.hf-p{flex:1 1 0;background:rgba(5,5,7,.93);transform-origin:50% 0;will-change:transform}
@media(max-width:720px){.hf-p:nth-child(n+7){display:none}}
.hf-svg{position:absolute;left:50%;top:50%;width:min(62vw,720px);height:auto;transform:translate(-50%,-56%);overflow:visible}
.hf-frame{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;vector-effect:non-scaling-stroke}
html.mo .hero:not(.hf-done):not(.hf-on) .hf-frame{opacity:0}   /* JS 가 그리기 시작할 때까지 숨김 */
html.mo .hero:not(.hf-done) .hero-en .hl > span,html.mo .hero:not(.hf-done) .hero-top,html.mo .hero:not(.hf-done) .hero-row,html.mo .hero:not(.hf-done) .hero-cap{opacity:0}
.hero-en .hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-en .hl > span{display:inline-block;will-change:transform,opacity}
html.hf-late .hero .hf,html.hf-fail .hero .hf{display:none!important}
html.hf-late .hero .hero-en .hl > span,html.hf-late .hero .hero-top,html.hf-late .hero .hero-row,html.hf-late .hero .hero-cap,html.hf-fail .hero .hero-en .hl > span,html.hf-fail .hero .hero-top,html.hf-fail .hero .hero-row,html.hf-fail .hero .hero-cap{opacity:1!important;transform:none!important}

/* ── Process Experience ─────────────────────────────── */
.pe-wrap{display:none}
html.pe-on .pe-wrap{display:block}
html.pe-on .proc{display:none}
.pe-wrap{position:relative}
.pe{position:sticky;top:calc(var(--hd) + 12px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(20px,3vw,40px) 0 clamp(28px,4vw,56px)}
.pe-rail{grid-column:1/-1;position:relative;display:flex;gap:4px;padding-bottom:14px}
.pe-rail::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--line)}
.pe-rail-fill{position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--blue2);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--ease)}
.pe-tab{font:600 11.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:none;border:0;padding:10px 12px 10px 0;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:color .3s;flex:1 1 0;text-align:left;min-width:0}
.pe-tab i{font-style:normal;color:var(--blue2)}
.pe-tab small{font:500 11px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-tab:hover,.pe-tab[aria-pressed="true"]{color:var(--ink)}
.pe-tab:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;border-radius:4px}
.pe-text{min-width:0}
.pe-copy .lbl{margin-bottom:14px}
.pe-copy h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.035em;margin-bottom:14px}
.pe-copy p{color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.65;max-width:38ch}
.pe-copy dl{display:grid;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pe-copy dt{font:600 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.pe-copy dd{font-size:14px;color:var(--muted);line-height:1.55}
.pe-scene{position:relative;border:1px solid var(--line);border-radius:var(--rl);background:radial-gradient(60% 70% at 50% 40%,rgba(59,66,249,.06),rgba(5,5,7,0)),var(--sf);overflow:hidden;aspect-ratio:8/5}
.pe-svg{position:absolute;inset:0;width:100%;height:100%;font-family:var(--disp)}
.pe-g{visibility:hidden;transform-box:fill-box;transform-origin:center}
.pe-g *{transform-box:fill-box;transform-origin:center}
.pe-line{fill:none;stroke:#4a4a56;stroke-width:1.2}
.pe-frame{fill:none;stroke:rgba(244,244,246,.85);stroke-width:1.4}
.pe-acc{stroke:var(--blue);fill:none;stroke-width:1.6}
.pe-cell{fill:rgba(255,255,255,.04);stroke:#3a3a44;stroke-width:1}
.pe-fill{fill:rgba(59,66,249,.16);stroke:var(--blue);stroke-width:1}
.pe-lb{fill:#a6a6b0;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.pe-t{fill:#8b8b96;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.pe-mark rect{fill:var(--blue)}
.pe-mark text{fill:#fff;font-size:9px;letter-spacing:.14em;font-weight:600}
.pe-dot{fill:var(--blue2)}
.pe-ctl{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pe-play{font:500 11.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:10px 14px;border:1px solid var(--line2);border-radius:999px;background:transparent;cursor:pointer;transition:border-color .3s,background .3s}
.pe-play:hover,.pe-play[aria-pressed="true"]{border-color:var(--ink)}
.pe-play[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pe-play:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.pe-status{font:500 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
@media(max-width:900px){
  .pe{grid-template-columns:1fr;gap:18px;top:calc(var(--hd) + 8px)}
  .pe-scene{aspect-ratio:4/3}
  .pe-tab small{display:none}
  .pe-copy dl{display:none}
}

/* ── Work: 카드 hover(1.015~1.03) · 프레임 line reveal · 상세 shared view ── */
.wk-media::before{content:"";position:absolute;inset:0;z-index:3;border:1px solid rgba(255,255,255,.55);border-radius:inherit;opacity:0;transform:scale(.985);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
@media(hover:hover) and (pointer:fine){
  html.mo .wk:hover .wk-media img:not(.wk-bg),html.mo .wk-media:focus-visible img:not(.wk-bg){transform:scale(1.03) translateY(-3px)}
  html.mo .wk:hover .wk-media::before,html.mo .wk-media:focus-visible::before{opacity:1;transform:none}
}
.wk-media img:not(.wk-bg){transition-duration:.6s}
.wk:active .wk-media{transform:scale(.995)}
@view-transition{navigation:auto}
.vt-hero{view-transition-name:dbx-hero}
::view-transition-old(dbx-hero),::view-transition-new(dbx-hero){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}

/* ── Case Study 진행선 ─────────────────────────────── */
.cp{display:none}
html.cp-on .cp{display:block;position:fixed;left:clamp(10px,1.4vw,22px);top:50%;transform:translateY(-50%);height:min(46vh,420px);z-index:20;width:12px}
.cp-svg{position:absolute;left:5px;top:0;width:2px;height:100%;overflow:visible}
.cp-bg{stroke:var(--line2);stroke-width:2}
.cp-fg{stroke:var(--blue2);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .25s linear}
.cp-list{position:absolute;left:0;top:0;height:100%;margin:0;padding:0;list-style:none}
.cp-list li{position:absolute;left:0;transform:translateY(-50%)}
.cp-list a{display:block;width:12px;height:12px;border-radius:50%;position:relative;color:transparent;font-size:0}
.cp-list a::before{content:"";position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--dim);transition:transform .3s,background .3s}
.cp-list li.on a::before{background:var(--blue2);transform:scale(1.5)}
.cp-list a:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
.cp-cur{position:absolute;left:22px;bottom:-28px;white-space:nowrap;font:500 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
html:not(.cp-on) .cp-static{display:block}
html.cp-on .cp-static{display:none}
@media(max-width:900px){html.cp-on .cp{display:none}html.cp-on .cp-static{display:block}}
.cp-static{margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r)}
.cp-static ol{margin:0;padding-left:18px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted)}

/* ── 과정 블록 이미지 reveal (스크롤 등장과 같은 규칙) ─── */
html.mo .pb-image.rv img,html.mo .pb-gallery.rv figure{clip-path:inset(0 0 8% 0 round 8px);transition:clip-path .8s var(--ease)}
html.mo .pb-image.rv.in img,html.mo .pb-gallery.rv.in figure{clip-path:inset(0 0 0 0 round 8px)}

/* ── 감속 모션 · 모션 끔: 모든 것이 즉시 완성 상태 ─────── */
@media(prefers-reduced-motion:reduce){
  .hf{display:none!important}.hero-en .hl > span,.hero-top,.hero-row,.hero-cap{opacity:1!important;transform:none!important}
  .pe-wrap{display:none!important}.proc{display:grid!important}
  .cp{display:none!important}.cp-static{display:block!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}