/* M1 — 현대적이고 절제된 시크 · 구겐하임 램프 · 텅스텐 구조체
   색을 쓰지 않는다. 흰 바탕·검정 글자·머리카락 같은 선만 남긴다.
   강조는 색이 아니라 크기와 여백으로 만든다. */
:root{
  --paper:#FFFFFF;
  --paper-2:#F7F7F6;
  /* 노출 콘크리트 — 거푸집에서 막 떼어낸 면의 회백 */
  --con:#EDECE8;
  --con-2:#E2E0DB;
  --con-3:#CFCCC6;
  --ink:#0B0B0B;
  --ink-2:#6E6E6E;
  --ink-3:#A6A6A4;
  --line:rgba(11,11,11,.10);
  --line-2:rgba(11,11,11,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:max(18px,calc((100vw - 1400px)/2));
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 콘크리트 낟알. opacity 는 0.03 이 상한이다. 넘기면 지저분해진다. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 관성 스크롤 ─────────────────────────────── */
.loco{position:fixed;top:0;left:0;width:100%;z-index:2;will-change:transform}
body.no-smooth{height:auto!important}
body.no-smooth .loco{position:static;transform:none!important}

/* ── 장면 ────────────────────────────────────── */
.scene{
  min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:44px var(--edge) 38px;text-align:center;
}
.eyebrow{
  margin:0 0 26px;font-family:var(--sans);font-weight:600;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
}
.intro h1{
  margin:0 0 26px;font-family:var(--sans);font-weight:800;
  /* 텅스텐 — 좁고 각진 대문자. 건축 그래픽의 얼굴이다. */
  font-stretch:70%;font-variation-settings:"wdth" 70;
  font-size:clamp(52px,15vw,150px);line-height:.86;letter-spacing:-.02em;
  text-transform:uppercase;
}
.intro h1 em{font-style:normal;color:var(--ink-3)}
.outro-scene h2{
  margin:0 0 18px;font-family:var(--sans);font-weight:700;
  font-size:clamp(20px,4.6vw,30px);line-height:1.45;letter-spacing:-.025em;
}
.intro-lede{
  margin:0;max-width:34ch;font-size:clamp(12.5px,3.2vw,14px);
  line-height:1.95;color:var(--ink-2);letter-spacing:-.005em;
}
.scroll-cue{
  margin:62px 0 0;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cue-line{width:1px;height:54px;background:var(--ink);opacity:.18;animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.55);opacity:.12}50%{transform:scaleY(1);opacity:.3}}

/* ── 구조 그리드 ────────────────────────────────
   건물의 기둥열. 보이라고 넣는 게 아니라 바닥이 평평하지 않게 하려고 넣는다. */
.loco::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(to right,
    var(--con-2) 0 1px, transparent 1px calc(100% / 6));
  opacity:.5;
}
.scene{position:relative;z-index:1}

/* ── 램프 난간 ──────────────────────────────────
   구겐하임은 층이 아니라 하나의 경사로다. 왼쪽 한 줄이 끝까지 이어지고,
   지금 어디쯤인지만 점으로 표시한다. */
.rampline{
  position:fixed;left:calc(var(--edge) + 24px);top:0;bottom:0;width:1px;
  background:var(--con-2);z-index:5;pointer-events:none;
}
.rampdot{
  position:fixed;left:calc(var(--edge) + 24px);width:7px;height:7px;
  margin-left:-3px;border-radius:50%;background:var(--paper);
  border:1px solid var(--ink);z-index:6;pointer-events:none;
  transition:top .5s var(--ease);
}
@media (max-width:640px){ .rampline,.rampdot{display:none} }

/* ── 룩 한 칸 ───────────────────────────────── */
.look{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:66px 14px 54px;
}
.viewer{
  /* 세로 공간을 먼저 쓰고 폭이 따라온다. 이 순서라야 인물이 커진다. */
  position:relative;height:min(calc(100svh - 250px), 76vh);width:auto;
  /* 9:16(0.5625) 대신 0.46 — 좌우 빈 배경만 잘리고 인물은 안 잘린다 */
  aspect-ratio:.46;max-width:94vw;user-select:none;overflow:hidden;
  transition:transform .8s var(--ease);
  /* 세로는 브라우저에 넘겨 스크롤이 살아 있고, 가로만 우리가 회전으로 쓴다.
     none 으로 막으면 사진 위에서 페이지가 안 내려간다. */
  touch-action:pan-y;cursor:grab;
}
.viewer.drag{cursor:grabbing}
/* 나선을 도는 만큼만 어긋난다. 눈치채면 과한 것이다. */
.look:nth-child(odd)  .viewer{transform:translateX(-2.5%)}
.look:nth-child(even) .viewer{transform:translateX(2.5%)}
.viewer img{width:100%;height:100%;object-fit:cover;display:block}

.look-caption{margin:34px 0 0;text-align:center;width:min(600px,92vw)}
.look-num{
  margin:0 auto 16px;font-family:var(--sans);font-weight:800;
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-2);
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--con-3);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.look-en{
  margin:0 0 9px;font-family:var(--sans);font-weight:800;
  font-stretch:76%;font-variation-settings:"wdth" 76;
  font-size:clamp(22px,5.8vw,36px);line-height:1.02;letter-spacing:-.012em;
  text-transform:uppercase;
}
.look-caption h2{
  margin:0 0 12px;font-family:var(--sans);font-weight:500;
  font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);
}
.look-desc{
  margin:0 auto 26px;max-width:38ch;font-size:12.5px;line-height:1.9;color:var(--ink-2);
}

/* 구성 — 선 하나로만 구획한다 */
.compose{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1px;
  width:min(600px,90vw);margin:0 auto 26px;
  background:var(--con-2);border:1px solid var(--con-2);
}
.compose figure{margin:0;background:var(--con)}
.compose img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:var(--con)}
.compose figcaption{
  padding:8px 6px 10px;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  background:var(--paper);text-align:center;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.compose .flat figcaption{color:var(--ink)}

.look-tools{display:flex;gap:8px;justify-content:center}
.tool{
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 22px;border-radius:0;
  border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tool:hover,.tool:focus-visible{background:var(--ink);color:var(--paper)}

/* ── 등장 ───────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* ── 상단 ───────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:7;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:22px var(--edge) 18px;
  background:linear-gradient(to bottom,var(--paper) 55%,rgba(255,255,255,0));
}
.brand{
  font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:-.01em;
  font-stretch:76%;font-variation-settings:"wdth" 76;
  display:flex;align-items:baseline;gap:9px;justify-self:start;text-transform:uppercase;
}
.brand small{font-weight:600;font-size:9px;letter-spacing:.24em;color:var(--ink-3)}
.counter{
  margin:0;justify-self:center;font-family:var(--sans);font-weight:600;
  font-size:10px;letter-spacing:.22em;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.counter #seenCount{color:var(--ink)}
.pilot{
  justify-self:end;font-family:var(--sans);font-weight:600;font-size:9px;
  letter-spacing:.24em;color:var(--ink-3);border:1px solid var(--line);padding:4px 9px;
}
.progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:8}
.progress i{display:block;height:100%;width:0;background:var(--ink);transition:width .1s linear}

/* ── 진열대 ─────────────────────────────────── */
.rail{position:fixed;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:7px}
.rail--l{left:max(10px,calc((100vw - 1400px)/2))}
.rail--r{right:max(10px,calc((100vw - 1400px)/2))}
.rail button{
  position:relative;width:62px;height:62px;padding:0;
  border:1px solid var(--con-2);background:var(--paper);cursor:pointer;overflow:hidden;
  transition:border-color .3s var(--ease),opacity .3s var(--ease);opacity:.5;
  backdrop-filter:blur(6px);
}
.rail button img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.rail button .n{
  position:absolute;left:0;right:0;bottom:3px;font-family:var(--sans);font-weight:800;
  font-size:8.5px;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.rail button:hover{opacity:.8}
.rail button[aria-current="true"]{opacity:1;border-color:var(--ink)}
.rail button.seen::after{
  content:"";position:absolute;right:4px;top:4px;width:3px;height:3px;background:var(--ink);
}
.rail button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* ── 크게 보기 ──────────────────────────────── */
.fs{
  position:fixed;inset:0;z-index:30;background:var(--paper);
  display:flex;align-items:center;justify-content:center;touch-action:none;
}
.fs[hidden]{display:none!important}   /* 없으면 투명 덮개가 모든 터치를 삼킨다 */
.fs img{
  max-width:100%;max-height:100%;display:block;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--s,1));
  transform-origin:center center;
}
.fs.ease img{transition:transform .24s var(--ease)}
.fs-close{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;z-index:2;
  width:38px;height:38px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-size:14px;cursor:pointer;
}
.fs-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 22px);margin:0;
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transition:opacity .6s ease;
}
.fs-hint.gone{opacity:0}

@media (max-width:640px){
  .brand small{display:none}
  .rail button{width:40px;height:40px}
  .look{padding:92px calc(var(--edge) + 48px) 44px}
  .viewer{max-width:min(252px,62vw);height:min(calc(100svh - 236px), 72vh)}
  .compose{grid-template-columns:1.25fr 1fr 1fr 1fr}
  .compose figcaption{font-size:7.5px;padding:6px 3px 8px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .loco{position:static!important;transform:none!important}
  body{height:auto!important}
  [data-reveal]{opacity:1;transform:none}
  *{animation:none!important}
}


/* ── 모델 전환 ──────────────────────────────── */
.mswitch{display:flex;gap:0;margin:38px 0 0;border:1px solid var(--con-2)}
.msw{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:13px 22px;border:0;border-right:1px solid var(--con-2);
  background:var(--paper);color:var(--ink-3);font-family:var(--sans);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);text-align:left;
}
.msw:last-child{border-right:0}
.msw-id{font-weight:800;font-size:10px;letter-spacing:.2em}
.msw-name{
  font-weight:600;font-size:9px;letter-spacing:.14em;
  font-stretch:80%;font-variation-settings:"wdth" 80;
}
.msw[aria-current="true"]{background:var(--ink);color:var(--paper)}
.msw:hover:not([aria-current="true"]){color:var(--ink)}


/* ── 제작 흐름 ──────────────────────────────── */
.howto{justify-content:center}
.steps{
  list-style:none;margin:0;padding:0;width:min(660px,90vw);
  border-top:1px solid var(--con-2);
}
.steps li{
  display:grid;grid-template-columns:52px 148px 1fr;align-items:baseline;gap:0 18px;
  padding:14px 4px;border-bottom:1px solid var(--con-2);text-align:left;
}
.s-n{
  font-family:var(--sans);font-weight:800;font-size:10px;letter-spacing:.2em;
  color:var(--ink-3);
}
.s-t{
  font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:-.01em;
  text-transform:uppercase;font-stretch:80%;font-variation-settings:"wdth" 80;
}
.s-d{font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.howto-close{
  margin:24px 0 0;font-family:var(--sans);font-weight:800;
  font-size:clamp(15px,3.4vw,21px);line-height:1.5;letter-spacing:-.02em;
  font-stretch:82%;font-variation-settings:"wdth" 82;
}
@media (max-width:640px){
  .steps li{grid-template-columns:38px 1fr;gap:2px 12px;padding:12px 2px}
  .s-d{grid-column:2}
  .s-t{font-size:14px}
  .s-d{font-size:11.5px}
}


/* ── 촬영 틀 ────────────────────────────────── */
.shoot-wrap{
  display:block;
  width:min(720px,92vw);text-align:left;
}
.frameguide{margin:0;display:flex;flex-direction:column;align-items:center;gap:11px}
.frameguide svg{width:158px;height:auto;display:block;background:var(--paper)}
.frameguide figcaption{
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.shoot-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--con-2)}
.shoot-steps li{
  display:grid;grid-template-columns:34px 1fr;gap:2px 12px;
  padding:10px 2px;border-bottom:1px solid var(--con-2);
}
.sh-n{
  grid-row:span 2;font-family:var(--sans);font-weight:800;font-size:10px;
  letter-spacing:.16em;color:var(--ink-3);padding-top:2px;
}
.shoot-steps b{
  font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:-.005em;
  text-transform:uppercase;font-stretch:82%;font-variation-settings:"wdth" 82;
}
.shoot-steps em{font-style:normal;font-size:11.5px;line-height:1.7;color:var(--ink-2)}
.shoot-close{
  margin:22px 0 0;font-family:var(--sans);font-weight:800;
  font-size:clamp(14px,3.2vw,19px);letter-spacing:-.02em;
  font-stretch:82%;font-variation-settings:"wdth" 82;
}
@media (max-width:640px){
  .shoot-steps{width:100%}
}


/* ── 회전 뷰어 ──────────────────────────────── */
.viewer video{width:100%;height:100%;object-fit:cover;display:block}
.viewer.drag{cursor:grabbing}
.affordance{
  position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;transition:opacity .5s ease;
}
.affordance.gone{opacity:0}
.aff-arrow{font-size:20px;line-height:1;color:var(--ink-3);animation:sway 2.4s ease-in-out infinite}
.aff-text{
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
@keyframes sway{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
.fs video{
  max-width:100%;max-height:100%;display:block;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--s,1));
  transform-origin:center center;
}
.fs.ease video{transition:transform .24s var(--ease)}
.fs [hidden]{display:none!important}




/* ── 무대 — 모델 하나가 한 화면. 아래로 가면 다음 모델 ─── */
.stage{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:58px 14px 128px;
}
.stage-model{
  margin:0 0 12px;font-family:var(--sans);font-weight:800;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
}
.rail{transition:opacity .4s var(--ease)}
/* 무대에서는 설명을 짧게 — 스크롤이 길어지지 않게 */
.stage .look-caption{margin:20px 0 0;width:min(560px,92vw)}
.stage .look-desc{margin:0 auto 18px;max-width:34ch;font-size:12px}
.stage .look-num{margin:0 auto 10px;width:30px;height:30px;font-size:9.5px}


/* ── 오른쪽 6슬롯 ───────────────────────────────
   부위가 여섯이면 세로로 길어진다. 진열대만 따로 스크롤시킨다. */
.rail--r{
  max-height:calc(100svh - 252px);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 0;
}
.rail--r::-webkit-scrollbar{display:none}
.rail--r .slot{flex:0 0 auto;position:relative}
.slot-tag{
  position:absolute;left:0;right:0;bottom:2px;
  font-family:var(--sans);font-size:6.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
  background:linear-gradient(to top,var(--paper) 62%,transparent);
  padding-top:4px;pointer-events:none;
}
/* 선택된 것은 검은 테두리, 나머지는 옅은 회색 */
.rail button{border-color:var(--con-2)}
.rail button[aria-current="true"]{border-color:var(--ink);opacity:1}
@media (max-width:640px){
  .rail--r{max-height:calc(100svh - 236px)}
  .slot-tag{font-size:5.5px}
}


/* ── 겹친 두 덱 ────────────────────────────────
   보이는 쪽과 다음 옷을 물고 대기하는 쪽. 자리를 바꾸는 데 한 프레임이면 된다. */
.viewer .deck{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;z-index:1;pointer-events:none;
}
.viewer .deck.on{opacity:1;z-index:2}
.viewer .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:3}
.viewer .still[hidden]{display:none!important}

/* ── 오른쪽 진열대 — 위에서부터 하나씩 입는다 ───
   안 입은 것은 물러나 있고, 입은 것만 색을 가진다. */
.rail--r .slot.wear{
  opacity:.28;filter:grayscale(1);
  transition:opacity .34s var(--ease),filter .34s var(--ease),border-color .34s var(--ease);
}
.rail--r .slot.wear[aria-current="true"]{opacity:1;filter:none;border-color:var(--ink)}
/* 다음에 누를 것 하나만 숨을 쉰다 */
.rail--r .slot.wear.next{opacity:.6;filter:grayscale(.45)}
.rail--r .slot.wear.next::after{
  content:"";position:absolute;inset:-3px;
  border:1px dashed var(--ink-3);pointer-events:none;
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.95}}

/* 맨 아래 — 처음 돌 때의 완성된 모습. 언제든 여기로 돌아온다. */
.rail--r .slot.origin{
  margin-top:13px;opacity:.45;
  transition:opacity .34s var(--ease),border-color .34s var(--ease);
}
.rail--r .slot.origin::before{
  content:"";position:absolute;left:12%;right:12%;top:-8px;
  height:1px;background:var(--con-2);
}
.rail--r .slot.origin[aria-current="true"]{opacity:1;border-color:var(--ink)}

/* 아직 그 단계 영상이 없을 때 — 눌렸다는 것만 알린다 */
.rail button.pending{animation:nudge .45s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* 단계 착장이 들어간 모델에만 다는 표시 */
.stage-model .badge{
  display:inline-block;margin-left:10px;padding:2px 7px;
  border:1px solid var(--con-2);font-size:8.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  vertical-align:1px;
}

/* 누른 직후 — 갈아입는 데 1초 남짓 걸린다. 눌렸다는 것을 바로 알린다. */
.rail--r .slot.busy{opacity:1;filter:none;border-color:var(--ink)}
.rail--r .slot.busy::after{
  content:"";position:absolute;inset:-3px;border:1px solid var(--ink);
  pointer-events:none;animation:pulse .7s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* 방금 걸친 것 — 옷만 바뀌고 이름이 없으면 구경으로 끝난다 */
.just{
  margin:0;min-height:14px;
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.just.on{opacity:1;transform:none}
/* 알아서 입기 */
.tool.autobtn{margin-right:8px}
.tool.autobtn.running{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ── 단계 스크러버 ──────────────────────────────
   밀어서 앞뒤로. 눌러도 되고 끌어도 된다. */
.scrub{
  position:relative;width:min(300px,72vw);height:32px;margin:0;
  touch-action:none;cursor:pointer;user-select:none;
}
.scrub-line,.scrub-fill{
  position:absolute;left:0;top:15px;height:1px;pointer-events:none;
}
.scrub-line{width:100%;background:var(--con-2)}
.scrub-fill{width:0;background:var(--ink);transition:width .34s var(--ease)}
.scrub.ghosting .scrub-fill{transition:width .08s linear}
.scrub-dots{
  position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;
}
.sdot{
  width:22px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sdot::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--paper);border:1px solid var(--con-2);
  transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
}
.sdot.past::before{background:var(--ink);border-color:var(--ink)}
.sdot[aria-current="true"]::before{
  background:var(--ink);border-color:var(--ink);transform:scale(2.1);
}
.scrub.ghosting .sdot[aria-current="true"]::before{transform:scale(1.7);opacity:.55}

/* ── 찜 · 공유 ──────────────────────────────── */
.tool.savebtn.saved{border-color:var(--ink);color:var(--ink)}
.savedchip{
  margin:0;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.14em;color:var(--ink-3);
}
.savedchip[hidden]{display:none!important}
@media (max-width:640px){
  .scrub{width:min(260px,80vw)}
  .look-tools{flex-wrap:wrap;justify-content:center;gap:6px}
}

/* ── 화면 아래 고정 조작바 ──────────────────────
   모델을 크게 두면 조작부가 첫 화면 밖으로 밀린다. 바닥에 붙여 늘 보이게 한다. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 12px calc(13px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 56%,transparent);
  pointer-events:none;
}
.dock > *{pointer-events:auto}
.dock[hidden]{display:none!important}
.dock-auto{
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:10px 26px;border-radius:0;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.dock-auto:hover,.dock-auto:focus-visible{background:var(--ink);color:var(--paper)}
.dock-auto.running{background:var(--ink);color:var(--paper)}
@media (max-width:640px){
  .dock{gap:6px;padding:16px 10px calc(10px + env(safe-area-inset-bottom))}
  .dock-auto{padding:9px 20px;font-size:9px}
}

/* ── 회전 영상이 아직 없는 무대 ─────────────────────────
   도는 척하지 않는다. 전신컷 한 장을 그대로 세우고,
   오른쪽 여섯 부위는 눌러서 크게 보는 것으로만 쓴다. */
.stage-model .badge--soon{
  border-style:dashed;color:var(--ink-3);opacity:.72;
}
.viewer--still{cursor:default}
.rail--r .slot.shown{
  opacity:.92;
  transition:opacity .28s var(--ease),border-color .28s var(--ease);
}
.rail--r .slot.shown:hover,
.rail--r .slot.shown:focus-visible{opacity:1;border-color:var(--ink)}
@media (hover:none){ .rail--r .slot.shown{opacity:1} }

/* 끝까지 본 사람에게 나갈 문 하나 — 지금까지는 막다른 길이었다 */
.outro-exit { margin: 34px 0 0; font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; }
.outro-exit a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--con-2); padding-bottom: 3px; }
.outro-exit a:hover { color: var(--ink); border-color: var(--ink); }

/* ── 룩북 푸터 ──────────────────────────────────────────
   본체가 되려면 사업자 표시를 지고 가야 한다. 화면 톤은 그대로,
   글자만 작게 눕힌다 — 룩이 끝난 뒤에 읽는 자리다. */
.lb-foot{
  border-top:1px solid var(--line-2);
  background:var(--paper-2);
  padding:52px var(--edge) 64px;
}
.lb-foot-in{max-width:1400px;margin:0 auto}
.lb-foot-brand{
  margin:0 0 22px;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.34em;color:var(--ink-3);
}
.lb-foot-biz{margin:0 0 16px;font-size:12px;line-height:1.95;color:var(--ink-2)}
.lb-foot-biz b{color:var(--ink);font-weight:700}
.lb-foot-biz a{color:var(--ink-2)}
.lb-foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 20px;font-size:12px}
.lb-foot-links a{
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--con-2);padding-bottom:2px;
}
.lb-foot-links a:hover{color:var(--ink);border-color:var(--ink)}
.lb-foot-note{
  margin:0;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.85;color:var(--ink-3);max-width:70ch;
}
.lb-foot-note b{color:var(--ink-2)}
@media (max-width:640px){
  .lb-foot{padding:40px var(--edge) 52px}
  .lb-foot-biz,.lb-foot-links{font-size:11.5px}
}

/* ── 넓은 화면: 무대 한 칸을 한 화면에 ───────────────────────
   세로로 쌓으면 모델(570) + 설명·버튼(209) + 라벨(20) + 상하 여백(186)
   = 1017px 라 820px 화면에 안 들어왔다. 다섯 도시가 전부 넘쳤다.
   가로로 두면 높이가 모델 높이로 떨어진다 (실측 1017 → 776).
   좁은 화면은 옆에 놓을 자리가 없어 기존 세로 쌓기 그대로. */
@media (min-width:900px) and (min-height:560px){
  .stage{
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(260px,340px);
    grid-template-areas:"model model" "viewer caption";
    align-content:center;align-items:center;justify-content:center;
    column-gap:clamp(28px,4vw,64px);
    padding:58px clamp(24px,5vw,80px) 96px;
  }
  .stage .stage-model{grid-area:model;justify-self:center}
  .stage [data-viewer]{grid-area:viewer;justify-self:end}
  .stage .look-caption{
    grid-area:caption;margin:0;width:auto;text-align:left;justify-self:start;
  }
  .stage .look-desc{margin:0 0 18px;max-width:32ch}
  .stage .look-num{margin:0 0 10px}
  .stage .look-tools{justify-content:flex-start}
}

/* AI 가상인물 표시 — 공정위 심사지침 Ⅴ.5(2026-06-01 신설).
   "가상인물이 등장하는 동안 가상인물과 근접한 위치에" 라서 영상 위에 얹는다.
   지침이 요구하는 건 '명확하고 쉽게 인식'이지 눈에 띄는 것이 아니므로 톤은 낮춘다. */
.ai-tag{
  position:absolute;top:10px;left:10px;z-index:4;pointer-events:none;
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  padding:3px 7px;border-radius:3px;
  background:rgba(10,12,18,.6);color:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(2px);
}
.lead-frame{position:relative}

/* ── 폰: 무대 한 칸을 짧게 ───────────────────────────────
   실측(375×812, 2026-09-07): 무대 한 칸 1050px 인데 화면은 812.
   내역은 위 여백 58 · 라벨 20 · 모델 576 · 설명 235 · 아래 여백 128.
   아래 128 은 고정 하단바를 비켜주려던 값인데 지금 그런 바가 없다
   (고정 요소는 topbar·progress·좌우 레일뿐). 그만큼이 그냥 빈 공간이었다. */
@media (max-width:640px){
  .stage{padding:40px 12px 48px}
  .stage .look-caption{margin-top:14px}
  .stage .look-desc{margin-bottom:12px}
  .stage .look-tools{gap:6px}
}