/* ============================================================
   MOONGI PORTFOLIO v2 — layout & states
   리그 치수는 tools/slice_rig.py 출력과 동기화:
     figure 1058 x 2100 / neck 917  →  머리 43.667%, 몸통 56.333%
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--steel-900);
  color: var(--text);
  font-family: var(--f-kr);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: color var(--t-slow) var(--ease-out);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.display { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.dim { color: var(--steel-300); }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,0.045), transparent 62%),
    radial-gradient(70% 60% at 50% 100%, var(--signal-soft), transparent 70%);
  transition: background var(--t-slow) var(--ease-out);
}

/* 배경 벌집 그리드 — 화면 전체. #shell(z-index:1) 뒤, body 배경 위. */
#hexgrid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-out);
}
/* 전환 중에도 그리드는 계속 돈다.
   예전엔 영상의 검은 배경이 그리드를 사각형으로 가려서 전환 동안 그리드를 재웠는데,
   그리드가 사라지는 게 더 눈에 띄었다. 근본 해결은 영상에 알파를 넣는 것이다. */

/* ============================================================
   S(-1) — GATE : 소리를 켜기 위한 최소 탭.
   브라우저는 사용자 제스처 없이는 소리 있는 자동재생을 막는다 — 코드로
   우회할 수 없는 플랫폼 정책이라, 부팅 전에 탭 한 번을 요구한다.
   ============================================================ */
#gate {
  position: fixed; inset: 0; z-index: 300;
  background: var(--steel-900);
  /* place-items만 쓰면 두 행이 컨테이너를 반씩 나눠 갖고 각자 칸 안에서만
     가운데로 간다 — 버튼이 위쪽 1/4에 뜬다. 트랙 묶음 자체를 중앙에 두려면
     place-content가 있어야 한다. */
  display: grid; place-items: center; place-content: center; gap: 18px;
  transition: opacity 460ms var(--ease-out), visibility 460ms;
}
body[data-state='boot'][data-gate='open'] #gate,
body:not([data-state='boot']) #gate { opacity: 0; visibility: hidden; pointer-events: none; }

#gate-btn {
  position: relative;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
#gate-btn:hover { border-color: var(--signal); transform: scale(1.04); }
#gate-btn .gate-label { color: var(--text-strong); letter-spacing: 0.14em; }
.gate-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--signal);
  opacity: 0.5;
  animation: gateRing 2.6s var(--ease-io) infinite;
}
@keyframes gateRing {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* 힌트가 흐름에 있으면 버튼+힌트 묶음이 중앙에 놓여 버튼이 그만큼 위로 밀린다.
   버튼 자체가 정중앙이어야 하므로 힌트는 흐름에서 빼서 아래에 띄운다.
   (80px = 버튼 반지름 48 + 링 확장 여유) */
#gate-hint {
  color: var(--steel-500);
  position: absolute; top: 50%; margin-top: 80px;
}

/* ============================================================
   00 — BOOT (S0) : 정면 워크인 영상
   ============================================================ */

/* 변신 영상은 알파가 아니라 사이트 배경색(#0A0C0F)을 구운 mp4다.
   VP9 알파로 시도했다가 화질(특히 얼굴)이 안 나와서 포기했다 — 배경을
   지우는 대신 렌더 시점에 같은 색 위에 합성해 구웠다. 그래서 #boot도
   완전 불투명으로 둔다 (전엔 그리드가 비치게 반투명이었다). */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: var(--steel-900);
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
body[data-state='armored'] #boot,
body[data-state='xray']    #boot,
body[data-state='unmasked'] #boot { opacity: 0; visibility: hidden; }

#boot-stage { position: absolute; inset: 0; overflow: hidden; }

/* left/top/width 는 boot.js 가 메인 로봇을 실측해 덮어쓴다.
   영상 프레임 안에서 로봇이 차지하는 비율(높이 78%, 발끝 94%)을 기준으로
   역산해야 부팅 마지막 프레임이 메인 로봇에 정확히 겹친다. */
#boot-video {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: auto; height: 100%;
  object-fit: contain;
}

#boot-console {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px clamp(20px, 4vw, 48px) 26px;
  display: grid; gap: 12px;
  background: linear-gradient(transparent, var(--steel-900) 46%);
}
#boot-log { min-height: 66px; display: grid; align-content: end; gap: 2px; }
#boot-log span { color: var(--steel-300); opacity: 0; animation: logIn 300ms var(--ease-out) forwards; }
#boot-log span b { color: var(--signal); font-weight: 400; }
@keyframes logIn { to { opacity: 1; } }

#boot-meter { display: flex; align-items: center; gap: 14px; }
#boot-track { flex: 1; height: 2px; background: var(--steel-700); position: relative; overflow: hidden; }
#boot-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--signal); transition: width 180ms linear; }
#boot-pct { font-family: var(--f-data); font-size: 11px; color: var(--text-strong); min-width: 44px; text-align: right; }

/* ============================================================
   MAIN SHELL
   ============================================================ */

#shell {
  position: relative; z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: var(--nav-h) var(--band-h) 1fr var(--bar-h);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
body:not([data-state='boot']) #shell { opacity: 1; }

#nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
#nav .brand { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--text-strong); }
#nav .brand em { font-style: normal; color: var(--signal); }
#nav .right { display: flex; align-items: center; gap: 20px; }

#main {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr var(--rail-w);
  min-height: 0;
}

.rail {
  padding: 22px clamp(14px, 1.6vw, 22px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 14px;
}
#rail-left  { border-right: 1px solid var(--line); }
#rail-right { border-left: 1px solid var(--line); }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

/* ---------- 좌 : IDENTITY ---------- */

.id-item { border: 1px solid var(--line); background: var(--panel); transition: border-color var(--t-fast); }
.id-item:hover { border-color: var(--line-2); }
.id-item[aria-expanded='true'] { border-color: var(--signal); }

.id-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px; text-align: left; }
.id-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel-500); flex: none; transition: background var(--t-fast), box-shadow var(--t-fast); }
.id-item[aria-expanded='true'] .id-dot { background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.id-btn .k { color: var(--text-strong); font-weight: 600; }
.id-btn .e { margin-left: auto; }

.id-card { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.id-item[aria-expanded='true'] .id-card { grid-template-rows: 1fr; }
.id-card > div { overflow: hidden; }
.id-card p { padding: 0 14px 14px; color: var(--text); font-size: 13px; }
.id-card ul { padding: 0 14px 14px 30px; display: grid; gap: 5px; }
.id-card li { font-size: 12.5px; color: var(--steel-300); }

/* ---------- 우 : WORK ---------- */

.work-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 12px;
  border: 1px solid transparent; border-bottom-color: var(--line);
  transition: background var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);
}
.work-item:hover { background: var(--panel); border-color: var(--line-2); padding-left: 18px; }
.work-item .n { font-family: var(--f-mono); font-size: 10px; color: var(--steel-500); }
.work-item .t { color: var(--text-strong); font-weight: 500; }
.work-item .c { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--signal); }

/* ============================================================
   중앙 — ROBOT STAGE
   ============================================================ */

#stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }


/* 조리개 안에서 드러나는 다른 상태 (x-ray) */
#stage-reveal {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 0 0, 0 0);   /* rig.js가 갱신 */
  opacity: 0;
  transition: opacity 140ms linear;
  z-index: 3;
  display: grid; place-items: center;
}
body[data-state='xray'] #stage-reveal { opacity: 1; }
#reveal-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent calc(84% - 1px), rgba(28,27,25,.22) 84%, transparent calc(84% + 1px)),
    radial-gradient(58% 42% at 50% 84%, rgba(243,148,75,.28), transparent 70%),
    radial-gradient(96% 76% at 50% 38%, #fdf9f1, #f1e5d1 62%, #dcc7a8);
}
/* x-ray는 로봇과 같은 키·같은 발끝 위치로 겹쳐야 한다.
   #rig-wrap 과 동일한 height 규칙을 쓰고 하단을 맞춘다. */
/* x-ray 리그 — #rig-wrap 과 완전히 같은 치수·정렬·변형을 쓴다.
   (#stage-reveal 이 place-items:center 이므로 흐름 배치로 두면 중앙에 온다) */
#reveal-wrap {
  position: relative;
  height: clamp(320px, 74vh, 1100px);
  max-height: 88%;
  aspect-ratio: 1058 / 2100;
  transform: translateX(var(--walk-x, 0px));
  transition: transform 900ms var(--ease-io);
}
#xray-body {
  position: absolute; left: 0; top: 43.667%;
  width: 100%; height: 56.333%;
  transform: translateX(var(--body-x, 0px));
  object-fit: contain;
}
#xray-head {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 43.667%;
  transform-origin: 50% 97.2%;
  transform: rotate(var(--head-rot, 0deg)) translate(var(--head-x, 0px), var(--head-y, 0px));
}
#xray-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

#reveal-frame {
  position: absolute; inset: 0;
  /* SVG는 replaced element라 inset:0만으로는 안 늘어난다(기본 300x150).
     명시하지 않으면 테두리·코너 브래킷이 통째로 잘린다. */
  width: 100%; height: 100%;
  pointer-events: none; z-index: 4;
  opacity: 0;
  transition: opacity 140ms linear;
}
body[data-state='xray'] #reveal-frame { opacity: 1; }
#rf-poly    { fill: none; stroke: var(--ink); stroke-width: 1.5; }
#rf-corners { fill: none; stroke: var(--orange-hot); stroke-width: 2.5; stroke-linecap: square; }
#rf-scan    { stroke: var(--orange-hot); stroke-width: 1; opacity: .55; }

#stage-floor {
  position: absolute; left: 6%; right: 6%; bottom: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
}

/* ---------- 리그 ---------- */

#rig-wrap {
  position: relative; z-index: 2;
  height: clamp(320px, 74vh, 1100px);
  max-height: 88%;
  aspect-ratio: 1058 / 2100;
  transform: translateX(var(--walk-x, 0px));
  transition: transform 900ms var(--ease-io);
  cursor: none;
}

#rig { position: absolute; inset: 0; }

/* 몸통: 머리의 40%만 따라간다 — 기계는 목만 돈다 */
#rig-body {
  position: absolute; left: 0; top: 43.667%;
  width: 100%; height: 56.333%;
  transform: translateX(var(--body-x, 0px));
  will-change: transform;
}

/* 머리: 목을 축으로 회전 */
#rig-head {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 43.667%;
  transform-origin: 50% 97.2%;
  transform: rotate(var(--head-rot, 0deg)) translate(var(--head-x, 0px), var(--head-y, 0px));
  will-change: transform;
}
#rig-head img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 각도 스프라이트 — rig.js가 --w-l / --w-c / --w-r 로 가중치를 준다.
   전환을 CSS transition에 맡기면 커서를 빠르게 움직일 때 밀린다. */
.head-sprite { opacity: 0; }
#head-turn-l { opacity: var(--w-l, 0); }
#head-closed { opacity: var(--w-c, 1); }
#head-turn-r { opacity: var(--w-r, 0); }

/* 마스크가 열리면 각도 스프라이트는 물러나고 정면 열림 컷만 남는다.
   ※ .head-sprite 로 끄면 안 된다 — 위의 #id 규칙이 특이도에서 이겨
      옆모습이 열린 얼굴 위에 그대로 남는다. 같은 ID 선택자로 눌러야 한다. */
#head-open { opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
body[data-state='unmasked'] #head-open { opacity: 1; }
body[data-state='unmasked'] #head-turn-l,
body[data-state='unmasked'] #head-closed,
body[data-state='unmasked'] #head-turn-r { opacity: 0; }

/* 마스크 전환 영상 — 재생 중에만 리그를 덮는다.
   위치/크기는 rig.js가 #rig-wrap을 실측해 덮어쓴다(컨테이너 종횡비가 달라
   CSS %로는 안 맞는다). 리그는 영상이 '실제로 진행된 뒤'에만 숨긴다 —
   먼저 숨기면 재생 실패 시 로봇이 몇 초간 사라진다. */
.lift-vid {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  height: 128.2%; width: auto;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms linear;
  z-index: 5;
}
/* 재생 중인 쪽만 보인다 — rig.js가 data-lift 에 open/close 를 넣는다 */
body[data-lift='open']  #lift-open  { opacity: 1; }
body[data-lift='close'] #lift-close { opacity: 1; }
body[data-video-live='1'] #rig { opacity: 0; }

/* 클릭 반응 — 그 방향으로 무게를 싣는다 */
#rig-wrap.step-l #rig { animation: stepL 620ms var(--ease-out); }
#rig-wrap.step-r #rig { animation: stepR 620ms var(--ease-out); }
@keyframes stepL {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(-26px) rotate(-2.4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes stepR {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(26px) rotate(2.4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

#stage-caption {
  position: absolute; bottom: 4%; left: 0; right: 0; z-index: 6;
  text-align: center; display: grid; gap: 6px;
  pointer-events: none;
}
#stage-caption .line { color: var(--text-strong); font-size: 13px; }
#stage-caption .hint { color: var(--steel-500); }
body[data-state='unmasked'] #stage-caption .hint { color: var(--signal); }

#mask-btn {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); backdrop-filter: blur(8px);
  transition: border-color var(--t-fast), color var(--t-fast);
}
#mask-btn:hover { border-color: var(--signal); color: var(--text-strong); }
#mask-btn::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
  animation: pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

#cursor {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--signal);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
body[data-hovering-rig='1'] #cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--signal-soft); }

/* ============================================================
   하단 HUD
   ============================================================ */

#hud {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
  padding: 0 clamp(16px, 3vw, 32px);
  border-top: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
}
#hud .kv { display: flex; gap: 7px; }
/* 값은 실시간으로 바뀐다 — 폭이 흔들리지 않게 진짜 모노 */
#hud .kv b { font-weight: 400; color: var(--signal); font-family: var(--f-data); }
#hud .spacer { margin-left: auto; }

/* ============================================================
   반응형
   ============================================================ */

@media (max-width: 1080px) { :root { --rail-w: 220px; } }

@media (max-width: 860px) {
  body { overflow-y: auto; }
  /* 행 개수는 #shell 의 자식 수와 반드시 같아야 한다.
     밴드를 추가하고 여기를 3행으로 두는 바람에 행이 한 칸씩 밀려
     밴드가 370px 를 먹고 본문이 34px 로 찌그러졌었다. */
  #shell {
    height: auto; min-height: 100%;
    grid-template-rows: var(--nav-h) var(--band-h) auto var(--bar-h);
  }
  #main { grid-template-columns: 1fr; }
  #stage { order: -1; height: 54vh; }
  /* 모바일에선 레일이 세로로 쌓이므로 높이를 가둘 이유가 없다.
     데스크톱의 overflow 스크롤을 그대로 두면 내용이 잘린다. */
  .rail { overflow: visible; height: auto; }
  #rail-left, #rail-right { border: 0; border-top: 1px solid var(--line); }
  #hud { position: sticky; bottom: 0; background: var(--steel-900); z-index: 50; }

  /* 밴드 — 좁은 화면에서 간격이 과해 한 항목만 보인다 */
  #band .bd { padding: 0 26px; gap: 8px; }
  #band .bd b { font-size: 15px; }
  #band .bd.hero b { font-size: 17px; }
  #band .bd i { font-size: 9px; letter-spacing: 0.16em; }
}

/* ============================================================
   좌측 레일 — RECEIPTS · TEACHING · COLLABS
   ============================================================ */
.rail-block { margin-top: 26px; }
.rail-block .rail-head { margin-bottom: 10px; }

#receipts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc {
  background: var(--panel); border: 1px solid var(--line);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.rc b { color: var(--text-strong); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.rc span { font-size: 9px; letter-spacing: 0.12em; }

.tc { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tc:last-child { border-bottom: 0; }
.tc .org { font-size: 10px; color: var(--signal); letter-spacing: 0.1em; }
.tc .tt { font-size: 12px; color: var(--text); line-height: 1.45; }

#brands-line { font-size: 11px; line-height: 1.8; color: var(--text); }

/* ============================================================
   WORK 확장 패널 — 우측에서 슬라이드 인
   ============================================================ */
#work-panel {
  position: fixed; top: var(--nav-h); right: 0; bottom: var(--bar-h);
  width: min(720px, 92vw); z-index: 60;
  background: var(--steel-800); border-left: 1px solid var(--line-2);
  transform: translateX(102%); transition: transform 0.5s var(--ease-out);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
}
#work-panel[aria-hidden="false"] { transform: translateX(0); }

#work-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 22px 26px 16px; border-bottom: 1px solid var(--line);
}
#work-panel-head h2 { color: var(--text-strong); font-size: 22px; font-weight: 600; margin: 4px 0; }
#work-panel-head #wp-note { font-size: 11px; max-width: 46ch; line-height: 1.6; }
#wp-close {
  background: none; border: 1px solid var(--line-2); color: var(--text);
  padding: 8px 14px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
#wp-close:hover { border-color: var(--signal); color: var(--signal); }

#wp-grid {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content;
  gap: 14px; padding: 20px 26px 26px; align-content: start;
}
.wp-card { background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.wp-card.has-video { grid-column: span 2; }
.wp-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.wp-meta { padding: 13px 15px 15px; }
.wp-meta h3 { color: var(--text-strong); font-size: 14px; font-weight: 600; }
.wp-meta p { font-size: 12px; color: var(--text); margin-top: 4px; line-height: 1.5; }
.badge {
  font-style: normal; font-size: 9px; letter-spacing: 0.1em; color: var(--steel-300);
  border: 1px solid var(--line-2); padding: 1px 6px; margin-left: 6px; vertical-align: 2px;
}
.badge.hot { color: var(--signal); border-color: var(--signal); }

@media (max-width: 820px) {
  #wp-grid { grid-template-columns: 1fr; }
  .wp-card.has-video { grid-column: span 1; }
}

/* CPP 태그 — 개별 협업(BRANDS)과 성격이 달라 칩 형태로 구분 */
#cpp-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cpp-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text); border: 1px solid var(--line-2);
  padding: 4px 9px; white-space: nowrap;
}
.cpp-tag:hover { border-color: var(--signal); color: var(--signal); }

/* 영상은 네이티브 컨트롤로 개별 재생·정지·스크럽·볼륨.
   컨트롤 바는 카드에 올렸을 때만 보이게 해서 평소엔 영상만 남는다. */
.wp-card { position: relative; }
.wp-card video::-webkit-media-controls-panel { opacity: 0; transition: opacity var(--t-fast); }
.wp-card:hover video::-webkit-media-controls-panel { opacity: 1; }

/* ============================================================
   채널 실측 밴드 — nav 바로 밑. 하단 HUD 에 두면 글자가 작고
   시선이 안 가서 아무도 안 읽는다. 좌우로 왕복하며 흐른다.
   ============================================================ */
#band {
  height: var(--band-h);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(127,232,255,0.05), transparent);
  display: flex; align-items: center; overflow: hidden;
}
#band-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  /* 왕복 거리(--band-sweep)는 ui.js 가 트랙폭−밴드폭으로 실측해 넣는다 */
  animation: bandSweep 11s var(--ease-io) infinite alternate;
}
@keyframes bandSweep {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--band-sweep, 0px))); }
}
/* 항목 하나하나가 떨어져 보여야 한다 — 촘촘하면 숫자가 뭉쳐 안 읽힌다.
   구분선 대신 넉넉한 여백 + 점 하나로 끊는다. */
#band .bd {
  display: inline-flex; align-items: baseline; gap: 11px;
  /* 한 세트(4개)가 밴드 폭을 채워야 같은 수치가 한 화면에 두 번 안 보인다.
     간격이 좁으면 다음 세트 앞부분이 같이 보여서 '반복'으로 읽힌다. */
  padding: 0 clamp(48px, 6vw, 96px); font-family: var(--f-mono); position: relative;
}
#band .bd + .bd::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: var(--steel-500);
}
#band .bd i {
  font-style: normal; font-size: 10px; letter-spacing: 0.22em;
  color: var(--steel-200);
}
#band .bd b { font-size: 16px; font-weight: 500; color: var(--text-strong); letter-spacing: 0.02em; }
#band .bd.hero b { font-size: 19px; color: var(--signal); text-shadow: 0 0 18px var(--signal-soft); }
#band .bd.hero i { color: var(--signal); }
@media (prefers-reduced-motion: reduce) { #band-track { animation: none; } }

/* TEACHING 압축 — 레일이 넘치지 않게 */
.tc { padding: 6px 0; }
.tc .tt { font-size: 11.5px; line-height: 1.4; }

/* 좌측 아이덴티티 카드 압축 (본캐 카드가 315px로 레일의 최대 소비자였다) */
.id-card p { font-size: 12px; line-height: 1.5; }
.id-card ul { font-size: 11.5px; line-height: 1.5; }

/* ============================================================
   레일 밀도 — 블록이 늘면서 좌 723px / 우 840px 로 넘쳐
   아래쪽 내용(강의·CPP·협업)이 화면 밖으로 밀렸다.
   스크롤로 숨기면 없는 것과 같으므로 밀도로 해결한다. 목표 624px.
   ============================================================ */
.rail { gap: 10px; padding-top: 18px; padding-bottom: 18px; }

/* 좌 : 본캐 카드가 최대 소비자(298px).
   주의 — .id-card > div 에 padding 을 주면 기존 p/ul 의 padding 위에 더해져
   카드가 오히려 커진다(298→347 로 늘렸다가 되돌림). p/ul 쪽을 직접 줄인다. */
.id-btn { padding: 9px 13px; }
.id-card p  { padding: 0 13px 8px; font-size: 11.5px; line-height: 1.45; }
.id-card ul { padding: 0 13px 11px 26px; gap: 3px; font-size: 11px; line-height: 1.4; }
.id-card li { font-size: 11px; }

/* 우 : WORK 8행 × 50px = 403px */
.work-item { padding-top: 9px; padding-bottom: 9px; }
.work-item .t { font-size: 13px; }
#brands-line { font-size: 10.5px; line-height: 1.65; }

/* 우측 레일 마무리 압축 — WORK + CPP + COLLABS 가 732px 였다 (한계 624px) */
#rail-right .rail-block { margin-top: 4px; }
#rail-right .rail-head { padding-bottom: 7px; }
.cpp-tag { font-size: 9.5px; padding: 3px 7px; }
#cpp-list { gap: 5px; }

/* 세로 영상(모바일 화면 녹화)은 16:9 카드에서 위아래가 잘려 가운데 띠만 남는다.
   ui.js 가 videoHeight > videoWidth 인 것만 .portrait 를 붙인다.
   한 칸만 차지하게 두고 카드 비율 자체를 세로로. */
.wp-card.has-video.portrait { grid-column: span 1; }
.wp-card.portrait video { aspect-ratio: 9 / 16; }
@media (max-width: 820px) {
  .wp-card.portrait video { aspect-ratio: 3 / 4; }
}

/* 카테고리가 8개로 늘어 우측 레일이 다시 넘쳤다 (666px, 한계 624px) */
#rail-right .work-item { padding-top: 7px; padding-bottom: 7px; }
#rail-right .rail-block { margin-top: 2px; }


/* 상단 밴드(38px)가 생기면서 좌측 레일이 다시 넘쳤다 */
#rail-left .id-btn { padding-top: 8px; padding-bottom: 8px; }
#rail-left .tc { padding: 5px 0; }
#rail-left .rail-block { margin-top: 2px; }

/* ============================================================
   모바일 마무리 — 반드시 파일 끝에 둘 것.
   #work-panel 기본 규칙이 이 파일 뒤쪽에 있어서, 위쪽 미디어쿼리에
   같은 내용을 써두면 특이성이 같아 나중 규칙에 진다.
   ============================================================ */
@media (max-width: 860px) {
  /* 패널이 전체를 덮되 밴드는 남겨 채널 수치가 계속 보이게 */
  #work-panel {
    top: calc(var(--nav-h) + var(--band-h));
    width: 100%;
    box-shadow: none;
    border-left: 0;
  }
  #work-panel-head { padding: 16px 18px 12px; }
  #work-panel-head h2 { font-size: 19px; }
  #wp-grid { padding: 14px 18px 24px; gap: 12px; }
  /* 좁은 화면에선 가로/세로 모두 한 칸 — 세로를 9:16 로 두면 화면을 넘긴다 */
  .wp-card.has-video, .wp-card.has-video.portrait { grid-column: span 1; }
  .wp-card.portrait video { aspect-ratio: 3 / 4; }
}