/* 02 디렉터(design/landing-v5, 2026-10-22 사용자 "기획 · 아트 · 개발 · 사운드 · QA · 출시 단어들을 배경에 나열해놓고, 먼지처럼 스르르륵 사라지면서
   그 먼지들이 디렉터라는 큰 글씨로 다시 재구성"): 머리말 아래 무대(.l5-dir-stage)에 분야 낱말 무리 여섯, 그 위 캔버스(먼지), 가운데 큰 「디렉터」.
   움직임은 director.js(l5.js 가 섹션을 켜고 끌 때 on · off). 스크립트가 없거나 움직임 줄이기 · ?still 이면 마지막 장면(큰 글씨만)으로 보인다.
   빨강은 제목의 「디렉터」와 큰 「디렉터」(2026-10-22 사용자 "디렉터에 빨간색 강조 넣어주시고"). 「디」 위 왕관은 사용자 지시로 뺀 그대로다. */

/* 섹션은 한 화면 그대로, 무대가 머리말 아래 남은 높이를 다 쓴다 */
.l5-sec.l5-dir{--dir-pad:clamp(32px,6vh,88px);padding-block:var(--dir-pad)}
.l5-dir .l5-in{display:flex;flex-direction:column;height:calc(100vh - var(--head) - 2 * var(--dir-pad))}
.l5-dir .l5-hd{flex:none;max-width:none}
.l5-dir-stage{position:relative;flex:1;min-height:0;margin-top:clamp(20px,3.6vh,44px);container-type:size}

/* 분야 낱말 무리(2026-10-22 사용자 "글씨 자체를 더 키워주시고, 큰 주제들은 각 영역에 가운데"): 무대를 두 줄 × 세 칸으로 나눠 칸마다 분야 이름을 가운데,
   그 둘레에 낱말을 흩어 놓는다. 낱말 자리(--x · --y, 모바일 --mx · --my, 칸에 대한 %)는 실제 글꼴 너비로 겹치지 않게 미리 잡아 둔 값이다.
   글자 크기는 무대 높이 · 폭 가운데 작은 쪽을 따른다(1440×900 무대 1176×543 에서 분야 36px · 낱말 16 ~ 21px) */
.l5-dir-words,.l5-dir-wi{position:absolute;inset:0}
.l5-dir-g{position:absolute;left:var(--gx);top:var(--gy);width:33.333%;height:50%;margin:0;color:var(--t5);line-height:1.15}
.l5-dir-g1{--gx:0%;--gy:0%}.l5-dir-g2{--gx:33.333%;--gy:0%}.l5-dir-g3{--gx:66.667%;--gy:0%}
.l5-dir-g4{--gx:0%;--gy:50%}.l5-dir-g5{--gx:33.333%;--gy:50%}.l5-dir-g6{--gx:66.667%;--gy:50%}
.l5-dir-g b,.l5-dir-g span{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);white-space:nowrap}
.l5-dir-g b{color:var(--t3);font-size:min(6.63cqh,3.06cqw);font-weight:800;letter-spacing:-.03em}
.l5-dir-g span{font-weight:560;letter-spacing:-.015em}
.l5-dir-g .s1{font-size:min(2.95cqh,1.36cqw);color:#4A4A52}
.l5-dir-g .s2{font-size:min(3.31cqh,1.53cqw);color:#5A5A63}
.l5-dir-g .s3{font-size:min(3.87cqh,1.79cqw);font-weight:650;color:var(--t4)}

/* 먼지 캔버스는 무대보다 64px 넓게(흩어지는 먼지가 무대 끝에서 잘리지 않게) */
.l5-dir-cv{position:absolute;left:-64px;top:-64px;width:calc(100% + 128px);height:calc(100% + 128px);pointer-events:none}

/* 큰 「디렉터」: 무대 가운데, 무대 폭 · 높이에 맞춘 크기(컨테이너 단위) */
.l5-dir-big{position:absolute;inset:0;display:grid;place-items:center;margin:0;pointer-events:none}
/* 2026-10-22 사용자 "디렉터에 빨간색 강조": 제목의 「디렉터」와 큰 글씨를 브랜드 빨강으로. 완성 뒤 빛이 은은하게 번진다(01 섹션 AI 와 같은 빛) */
.l5-dir-t{color:var(--ac);font-size:min(25cqw,64cqh);font-weight:900;line-height:1;letter-spacing:-.045em;white-space:nowrap;text-shadow:0 0 .3em rgba(255,65,85,.3)}

/* 마지막 장면(기본): 배경 낱말은 모두 숨기고 완성된 「디렉터」만 둔다 */
.l5-dir-words{visibility:hidden}

@media (max-width:759px){
  .l5-sec.l5-dir{--dir-pad:72px}
  .l5-dir .l5-in{height:auto}
  .l5-dir-stage{flex:none;height:460px}
  /* 모바일: 세 줄 × 두 칸, 칸마다 낱말 다섯 */
  .l5-dir-g{width:50%;height:33.333%}
  .l5-dir-g1{--gx:0%;--gy:0%}.l5-dir-g2{--gx:50%;--gy:0%}.l5-dir-g3{--gx:0%;--gy:33.333%}
  .l5-dir-g4{--gx:50%;--gy:33.333%}.l5-dir-g5{--gx:0%;--gy:66.667%}.l5-dir-g6{--gx:50%;--gy:66.667%}
  .l5-dir-g span{left:var(--mx);top:var(--my)}
  .l5-dir-g .is-x{display:none}
  .l5-dir-g b{font-size:6.29cqw}
  .l5-dir-g .s1{font-size:3.57cqw}
  .l5-dir-g .s2{font-size:3.86cqw}
  .l5-dir-g .s3{font-size:4.29cqw}
  .l5-dir-t{font-size:min(30cqw,60cqh)}
}

/* ── 움직임(director.js 가 섹션에 장면 이름을 붙인다): 처음엔 낱말만, is-dir-dust 부터 낱말 · 먼지 · 채워지는 글씨는 캔버스가 그리고(DOM 은 숨김),
   is-dir-big 에서 DOM 글씨로 바로 바꾼다(캔버스가 같은 Pretendard 글씨를 다 그린 뒤라 전환 없이 바꾼다). 낱말은 끝까지 숨겨 둔다 ── */
@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-dir-words{visibility:visible}
  .l5-js .l5-dir.is-dir-dust .l5-dir-words{visibility:hidden}
  .l5-js .l5-dir-big{opacity:0}
  .l5-js .l5-dir.is-dir-big .l5-dir-big{opacity:1}
  /* 캔버스 글씨에는 빛이 없어서, 바꿔 끼운 뒤에 빛을 천천히 켠다 */
  .l5-js .l5-dir:not(.is-dir-done) .l5-dir-t{text-shadow:none}
  .l5-js .l5-dir.is-dir-done .l5-dir-t{transition:text-shadow 1s var(--ease,ease) .1s}
}