/* WAS — 레퍼런스(aristidebenoist.com) 구조를 그대로 옮긴 판. 값은 레퍼런스 실측, 코드는 자체 작성. */
@font-face{font-family:"WAS Contrast";src:url(fonts/was-contrast.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027}
@font-face{font-family:"WAS Arrow";src:url(fonts/arrow.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+2190-2199}
@font-face{font-family:"HG Ggodic";src:url(fonts/hg-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"HG Ggodic";src:url(fonts/hg-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"HG Ggodic";src:url(fonts/hg-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Pretendard";src:url(fonts/pret-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Pretendard";src:url(fonts/pret-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pretendard";src:url(fonts/pret-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-300.woff2) format("woff2");font-weight:300;font-display:swap}

:root{
  --bg:#141414;--fg:#E4E4DE;--fg2:#B2B2AB;--lime:#A6F500;--ink:#070707;
  --display:"WAS Contrast","Barlow Condensed",sans-serif;
  --kr:"HG Ggodic","Pretendard",sans-serif;
  --sans:"WAS Arrow","Pretendard",system-ui,sans-serif;
  --o:cubic-bezier(.23,1,.32,1);
  --col:cubic-bezier(.25,.46,.45,.94);
}
html{background:var(--bg);color:var(--fg);transition:background-color .6s var(--col),color .6s var(--col);-webkit-text-size-adjust:100%}
/* 누른 작업물의 색(--pbg·--pfg·--pfg2·--wm 은 main.js 의 tint() 가 그 판의 data-bg 로 채움) */
html.in,html.w{--fg:var(--pfg,#E4E4DE);--fg2:var(--pfg2,#B2B2AB);background:var(--pbg,#141414);color:var(--fg)}
html.a{--fg:#E4E4DE;--fg2:#B2B2AB;background:#141414;color:#E4E4DE}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font:400 12px/14px var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh;height:100dvh;position:relative;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
button{appearance:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-transform:inherit}
i{font-style:normal}
img,video{display:block}
ul{list-style:none}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* 올라오며 등장하는 글자 */
.r{display:block;overflow:hidden}
.r>*{display:block;transform:translate3d(0,101%,0);transition:transform .9s var(--o)}
html.ready .r>*{transform:none}

/* 로더(v38: 화면 한가운데, 두 줄 가운데 맞춤): 슬로건 두 줄이 올라오고(html.ld), 다 실리면 라임 점이 찍히고(html.dot), 준비되면 위로 빠진다(html.ready). 숫자 없음.
   글자 크기는 main.js 의 fitLoad() 가 ABOUT 제목과 같은 값으로 준다. 마스크(.r)는 line-height 1 로 두고 둘째 줄을 -.253em 당겨 .747 줄간격을 낸다(마스크를 .747 로 두면 글자 밑이 잘린다) */
#load{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-family:var(--display);font-weight:500;line-height:1;letter-spacing:-.02em;text-transform:uppercase;pointer-events:none}
#load .r+.r{margin-top:-.253em}
#load .r>*{transition:transform .8s var(--o)}
html.ld #load .r>*{transform:none}
html.ld #load .r:nth-child(2)>*{transition-delay:.08s}
#load i{color:var(--lime);display:inline-block;opacity:0;transform:scale(.5);transition:opacity .35s var(--o),transform .5s var(--o)}
html.dot #load i{opacity:1;transform:none}
html.ready #load .r>*{transform:translate3d(0,-110%,0);transition-delay:0s}
html.ready #load .r:nth-child(2)>*{transition-delay:.06s}

/* 리본 심볼(v32): symbol-white.svg 를 마스크로 써 글자색(currentColor)을 따른다(밝은 작품 바탕에선 검정).
   로더 심볼(#ls)은 왼쪽 아래에서 왼쪽→오른쪽으로 그려지고(html.ld), 준비되면 위로 빠진다(html.ready). 그 자리에 #n2 가 올라온다 */
.sym{display:block;background:currentColor;-webkit-mask:url(brand/symbol-white.svg) center/contain no-repeat;mask:url(brand/symbol-white.svg) center/contain no-repeat}
#ls{position:absolute;left:50px;bottom:48px;z-index:7;pointer-events:none}
#ls .sym{width:113px;height:60px;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--o) .3s,transform .8s var(--o)}
html.ld #ls .sym{clip-path:inset(0 0 0 0)}
html.ready #ls .sym{transform:translate3d(0,-110%,0);transition-delay:0s}

/* 상단·하단 글자 */
#hd{position:absolute;inset:0;z-index:8;pointer-events:none}
#hd>*{pointer-events:auto}
#n0{position:absolute;top:35px;left:38px}
#n0 img{height:40px;width:auto;transition:filter .9s var(--o)}
#n0 .r>*{transition:transform .9s var(--o) .15s,filter .9s var(--o)}
html.in #n0 img,html.w #n0 img{filter:brightness(var(--wm,1))}
html.a #n0 .r>*{transform:translate3d(0,101%,0);transition-delay:0s}

.n1{position:absolute;top:40px;right:50px;height:34px;font-size:12px;line-height:34px;letter-spacing:-.02em;text-transform:uppercase}
.n1 button{position:absolute;top:0;right:0;line-height:34px}
.n1 .r>*{transition-delay:.2s}
.lb{position:relative;display:block}
.line{position:absolute;left:0;right:0;bottom:8px;height:2px;background:currentColor}
@keyframes sweep{0%{transform-origin:right;transform:scaleX(1)}49%{transform-origin:right;transform:scaleX(0)}50%{transform-origin:left;transform:scaleX(0)}100%{transform-origin:left;transform:scaleX(1)}}
#n1-1{pointer-events:none}
#n1-1 .r>*{transform:translate3d(0,101%,0)}
html.a #n1-1{pointer-events:auto}
html.a #n1-1 .r>*{transform:none}
html.a #n1-0{pointer-events:none}
html.a #n1-0 .r>*{transform:translate3d(0,101%,0);transition-delay:0s}

#n2{position:absolute;bottom:48px;left:50px;font-size:10px;line-height:10px;text-transform:uppercase}
#n2 .r:nth-child(1)>*{transition-delay:.25s}
#n2 .r:nth-child(2)>*{transition-delay:.3s}
#n3{position:absolute;bottom:47px;right:50px;text-align:right;text-transform:uppercase}
#n3 .r:nth-child(1)>*{transition-delay:.25s}
#n3 .r:nth-child(2)>*{transition-delay:.3s}
#n3 a,#n3 button{display:inline-block;position:relative;line-height:14px}
#n3 i{display:inline-block;width:0;overflow:visible;margin-left:.3em;opacity:0;transform:translate3d(-3px,3px,0);transition:opacity .4s var(--o),transform .4s var(--o)}
html.a #n3 .r>*{transform:translate3d(0,101%,0);transition-delay:0s}

/* 위 가운데 눈금: 판마다 1px. 자리·높이·너비·투명도는 main.js 의 ticksFrame() 이 매 프레임 준다(줄이 움직이면 물결, in 모드면 현재 눈금이 16:9 상자, 재생 화면에선 맨 위 반 높이).
   속을 비운 1px 테두리라 폭이 1px 일 땐 꽉 찬 선, 상자가 되면 빈 테두리로 자연히 바뀐다. top 은 main.js 의 TK.top 과 같은 값 */
#pg{position:absolute;top:48px;left:50%;width:0;height:14px;z-index:8;opacity:0;transition:opacity .9s var(--o) .5s}
html.ready #pg{opacity:1}
html.a #pg{opacity:0;transition-delay:0s;pointer-events:none}
html.w #pg{pointer-events:none}
#pg i{position:absolute;left:0;top:0;width:1px;height:14px;box-shadow:inset 0 0 0 1px currentColor;opacity:.2;cursor:pointer;will-change:transform}
#pg i::before{content:"";position:absolute;inset:-6px -4px}/* 손가락 자리 */
@media (max-width:700px){#pg{display:none}}

/* 작업물 판 한 줄 */
#row{position:absolute;inset:0;z-index:2;perspective:120vh;will-change:transform}/* 판의 rotateY·translateZ 가 원근을 갖게. main.js 의 P 와 같은 값 */
/* 가만히 있을 땐 흑백·흐림, 가운데로 오거나 마우스를 올리면 색이 돌아오고, 줄이 움직이면 판이 세로 띠(main.js 의 S 개)로 나뉘어 언덕·잔물결 표면 위에서 휜다.
   투명도·흑백은 판이 아니라 띠마다 준다(판에 opacity·filter·overflow 를 두면 3D 가 납작해진다).
   v40: 띠에도 filter 를 두지 않는다(띠마다 GPU 가 따로 그려 렉). 흑백 바탕 위 색·밝은·검은 겹(b)의 opacity 로 같은 셈을 낸다 */
.p{position:absolute;top:0;left:0;display:block;visibility:hidden;will-change:transform;cursor:pointer;transform:translate3d(0,0,0);transform-style:preserve-3d}
.p,.p img,.p video{-webkit-user-drag:none}/* v33 마우스로 끌 때 링크·그림을 브라우저가 집어 들지 않게 */
html.g,html.g *,html.g #pg i{cursor:grabbing}/* v33 끄는 동안 */
/* v35 라임 점 커서. 18px 원을 줄여 쓰고(기본 .56 ≈ 10px) 판·링크 위에서 제 크기로 — 커질 때 흐려지지 않게. WATCH 화면은 유튜브 창이라 기본 커서 */
#cur{position:fixed;left:0;top:0;z-index:30;display:none;pointer-events:none}
#cur::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(7,7,7,.2);opacity:0;transform:scale(.3);transition:transform .25s var(--o),opacity .2s var(--o)}
html.cur #cur{display:block}
html.cur.w #cur{display:none}
html.cur:not(.w),html.cur:not(.w) *{cursor:none!important}
html.cur-on #cur::before{opacity:1;transform:scale(.56)}
html.cur-on.ch #cur::before{transform:scale(1)}
html.cur-on.cd #cur::before,html.cur-on.g #cur::before{transform:scale(.4)}
.p .sw{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.p .sw i{position:absolute;left:0;top:0;height:100%;background:#000 no-repeat;opacity:0;will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}
.p .sw b{position:absolute;inset:0;background-repeat:no-repeat;background-size:inherit;background-position:inherit;display:none;opacity:0;will-change:opacity;backface-visibility:hidden}
.p .sw b.k{background:#000}
.p .pm{position:absolute;inset:0;overflow:hidden;transform:translateZ(.5px)}/* 띠 위에 겹치는 마우스 올림 클립. in 모드(.f)에선 통그림까지 */
.p .pm img,.p .pm video{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.p .pm img{opacity:0}
.p.f .pm img{opacity:1}
.p.f .sw,.p.b .pm{visibility:hidden}
.p video{opacity:0;transition:opacity .5s var(--o)}
.p.v video{opacity:1}
.p .pb,.p .pt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 상태 화면 */
.st{position:absolute;inset:0;z-index:4;visibility:hidden}
.st.on{visibility:visible}
#in{pointer-events:none}
#in .e{pointer-events:auto}
#a,#w{pointer-events:none}
#a.on,#w.on{pointer-events:auto}

/* 큰 제목 */
/* 글자는 아래에서만 가려지며 올라온다. 옆·위는 열어 둬서 획이 안 잘린다(상자 높이는 main.js 의 placeTitle 이 잉크 높이로 맞춤) */
.t{position:absolute;left:38px;width:calc(100vw - 76px);display:flex;justify-content:space-between;clip-path:inset(-1em -.5em 0 -.5em);font-family:var(--display);font-weight:500;line-height:1;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:5}
.t.k{font-family:var(--kr);font-weight:700;letter-spacing:-.04em}
.t.n{justify-content:flex-start}
.tb.n{justify-content:flex-end}
.t[hidden]{display:none}
.t span{display:block;transform:translate3d(0,110%,0);transition:transform .9s var(--o);transition-delay:var(--d,0s)}
.tv .t span{transform:none}
#w .t{z-index:0}

/* WATCH */
.e{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-transform:uppercase;font-size:12px;letter-spacing:-.02em;z-index:6}
.e-t{line-height:34px}
.e-k{font-family:var(--kr);font-weight:500;font-size:12px;line-height:20px;min-height:20px;color:var(--fg2);text-transform:none;letter-spacing:-.01em;margin-bottom:2px}/* 그 작품의 한글 이름(a.p 의 .pt). main.js 가 채움 */
.e-y{width:30px;height:16px;margin-bottom:8px}/* 맨 위 리본 심볼(v32). .sym 마스크 */
.e .r>*{transform:translate3d(0,101%,0)}
.on .e .r>*{transform:none;transition-delay:.1s}
.on .e .r+.r>*{transition-delay:.16s}
.on .e .r+.r+.r>*{transition-delay:.22s}
.e-l{display:block;width:1px;height:56px;background:currentColor;transform:scaleY(0);transform-origin:top;transition:transform .7s var(--o) .2s}
.on .e-l{transform:none}
.e-s{font-family:var(--sans);font-size:14px;line-height:14px;opacity:0;transform:translate3d(0,-8px,0);transition:opacity .5s var(--o) .4s,transform .5s var(--o) .4s}
.on .e-s{opacity:1;transform:none}

/* 재생 화면 */
#w-l{position:absolute;left:50%;top:50%;width:69.61vw;height:39.157vw;transform:translate(-50%,-50%) scale(.96);opacity:0;background:#000;z-index:1;overflow:hidden;transition:transform .9s var(--o),opacity .9s var(--o)}
@media (min-aspect-ratio:1660/1200){#w-l{width:96.2963vh;height:54.1667vh}}
#w.on #w-l{transform:translate(-50%,-50%);opacity:1;transition-delay:.15s}
#w-m,#w-m iframe,#w-m video{position:absolute;inset:0;width:100%;height:100%;border:0}
#w-m video{background:#000;object-fit:contain}
#p,#v{position:absolute;left:50%;display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:34px;letter-spacing:-.02em;text-transform:uppercase;z-index:6;opacity:0;transform:translate3d(-50%,10px,0);transition:opacity .7s var(--o),transform .7s var(--o)}
#p{top:49px}
#v{bottom:48px}
#w.on #p,#w.on #v{opacity:1;transform:translate3d(-50%,0,0);transition-delay:.3s}
#p-s{position:relative;display:block;width:12px;height:12px;margin-top:3px;transition:transform .5s var(--o)}
#p-s::before,#p-s::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transform:rotate(45deg)}
#p-s::after{transform:rotate(-45deg)}
#v i{font-family:var(--sans);font-size:14px;line-height:20px;transition:transform .4s var(--o)}
#v[hidden]{display:none}

/* 소개 */
#a-left{position:absolute;left:50px;top:49px;right:50px}
#a-nif-w{font-family:var(--display);font-weight:500;line-height:.747;letter-spacing:-.02em;text-transform:uppercase;font-size:calc(13.33vh + 100px)}
@media (min-height:750px){#a-nif-w{font-size:calc(15vh + 100px)}}
@media (min-height:850px){#a-nif-w{font-size:calc(17.5vh + 100px)}}
.nl{display:block;white-space:nowrap}
.nl i{color:var(--lime)}
#a-p{padding-top:7.5vh;max-width:330px;font-weight:300;font-size:12px;line-height:1.7;letter-spacing:0}
#a-p .by{margin-top:1.6em;font-size:11px;line-height:1.5;text-transform:uppercase;color:var(--fg2)}
#a-social{position:absolute;left:50px;bottom:calc(6.667vh + 50px);text-transform:uppercase;line-height:14px}
#a-social i{margin-left:.3em}
#a-social .who{display:block;color:var(--fg2);text-transform:none;font-size:10px;line-height:14px}
#a-list{position:absolute;right:50px;bottom:calc(10.83vh + 50px);display:flex;font-size:11px;line-height:14px;text-transform:uppercase}
#a-list .col{width:230px}
#a-list .col:last-child{width:260px}
#a-list h2{font-size:11px;font-weight:400;color:var(--fg2);margin-bottom:14px}
#a-list ul+h2{margin-top:28px}
@media (max-width:1250px){#a-list .col:nth-child(3){display:none}}
@media (max-width:1050px){#a-list{display:none}}
#a-rights{position:absolute;right:50px;bottom:48px;text-align:right;font-size:10px;line-height:10px;text-transform:uppercase}
#a>*{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--o),transform .9s var(--o)}
#a.on>*{opacity:1;transform:none}
#a.on>*:nth-child(2){transition-delay:.08s}
#a.on>*:nth-child(3){transition-delay:.16s}
#a.on>*:nth-child(4){transition-delay:.24s}

/* 마우스 있을 때만 */
@media (hover:hover) and (pointer:fine){
  .lb:hover .line{animation:sweep .7s var(--col)}
  #n3 a:hover i{opacity:1;transform:none}
  .e:hover .e-s{transform:translate3d(0,4px,0);transition-delay:0s}
  #p:hover #p-s{transform:rotate(90deg)}
  #v:hover i{transform:translate3d(2px,-2px,0)}
}

/* v36 휴대폰(760px 이하): 데스크톱과 같은 판 한 줄·in·재생 화면. 여백만 50px → 20px, 바닥은 홈 표시줄만큼 띄운다 */
@media (max-width:760px){
  html{overscroll-behavior:none}
  #row{touch-action:none}
  #ls{left:20px;bottom:calc(24px + env(safe-area-inset-bottom))}
  #ls .sym{width:75px;height:40px}
  #n0{top:20px;left:20px}
  #n0 img{height:28px}
  .n1{top:17px;right:20px}
  #n2{left:20px;bottom:calc(24px + env(safe-area-inset-bottom));line-height:14px}/* 오른쪽 #n3 과 같은 14px 줄 간격 → 두 줄이 줄마다 나란히 */
  #n3{right:20px;bottom:calc(24px + env(safe-area-inset-bottom))}
  /* 좁은 화면에선 in·재생 때 바닥 글자가 WATCH 와 겹치니 숨긴다 */
  html.in #n2 .r>*,html.w #n2 .r>*,html.in #n3 .r>*,html.w #n3 .r>*{transform:translate3d(0,101%,0);transition-delay:0s}
  .t{left:20px;width:calc(100vw - 40px)}
  .e{bottom:calc(24px + env(safe-area-inset-bottom))}
  .e-l{height:32px}
  #w-l{width:calc(100vw - 40px);height:calc((100vw - 40px) * .5625)}
  #p{top:17px}
  #v{bottom:calc(24px + env(safe-area-inset-bottom))}
  #a-left{top:64px;left:20px;right:20px}
  #a-social{left:20px;bottom:calc(64px + env(safe-area-inset-bottom))}
  #a-rights{right:20px;bottom:calc(24px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}