/* IN MOTION — Edition 01
   テーマは looks.json の theme で切り替える（dark: 夜のランウェイ / light: 明るいスタジオ） */

:root {
  --top-h: 52px;
  --grain-opacity: 0.07;
  --grain-shift: 2%;
  --tick-h: 30px;
  --rail-w: 316px;
  --ar: 16 / 9;
  --ar-num: 1.7778;
  --font-sans: "Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body[data-theme="dark"] {
  --bg: #07090d;
  --bg2: #0c1016;
  --ink: #e8ecf1;
  --sub: #8a94a2;
  --line: rgba(232, 236, 241, 0.15);
  --accent: #ea7048;
  --accent-text: #f08a64;
  --paper: #ecebe6;
  --paper-ink: #141518;
  --paper-sub: #5d6168;
  --hud: #eef1f5;
  --hud-sub: rgba(238, 241, 245, 0.62);
  --hud-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  --cell: #0b0d11;
  --vignette: rgba(0, 0, 0, 0.42);
  --halftone: 0.34;
  --glass: rgba(10, 14, 20, 0.38);
  --glass-line: rgba(255, 255, 255, 0.14);
}

body[data-theme="light"] {
  --bg: #dde1e4;
  --bg2: #cfd3d6;
  --ink: #111215;
  --sub: #555c64;
  --line: rgba(17, 18, 21, 0.16);
  --accent: #e2643c;
  --accent-text: #b8461f;
  --paper: #f7f6f2;
  --paper-ink: #141518;
  --paper-sub: #5d6168;
  --hud: #111215;
  --hud-sub: rgba(17, 18, 21, 0.62);
  --hud-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  --cell: #141518;
  --vignette: rgba(40, 44, 50, 0.16);
  --halftone: 0.16;
  --glass: rgba(255, 255, 255, 0.4);
  --glass-line: rgba(255, 255, 255, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -40px; z-index: 30; background: var(--accent); color: #111; padding: 8px 12px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- 上の帯 */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  height: var(--top-h);
  display: flex; align-items: center; gap: 22px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand { margin: 0; font: 600 15px/1 var(--font-sans); letter-spacing: 0.24em; }
.edition { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--sub); }
.live { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); }
body.is-live .live-dot { background: var(--accent); animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------------------------------------------------------------- 舞台 */

.show {
  position: fixed; inset: var(--top-h) 0 var(--tick-h) 0;
  display: block;
}
.stage {
  position: relative; min-width: 0; min-height: 0;
  height: 100%;
  display: grid; place-items: center;
  container-type: size;
}
.screen {
  position: relative;
  aspect-ratio: var(--ar);
  width: min(100cqw, calc(100cqh * var(--ar-num)));
  overflow: hidden;
  background: var(--bg2);
  container-type: inline-size;
  container-name: screen;
}
.layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.layer.is-front { z-index: 1; }
.still { z-index: 2; }
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 14cqi var(--vignette);
}

/* 粒子・網点・フラッシュ */
.fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0.55px, transparent 1.25px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: var(--halftone);
}
.grain {
  position: absolute; inset: -40%;
  background-size: 160px 160px;
  opacity: var(--grain-opacity, 0.07); mix-blend-mode: overlay;
  animation: grain 1.6s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(calc(var(--grain-shift, 2%) * -1), calc(var(--grain-shift, 2%) * 0.5)); }
  40% { transform: translate(calc(var(--grain-shift, 2%) * 0.67), calc(var(--grain-shift, 2%) * -0.83)); }
  60% { transform: translate(calc(var(--grain-shift, 2%) * -0.5), calc(var(--grain-shift, 2%) * -0.33)); }
  80% { transform: translate(calc(var(--grain-shift, 2%) * 0.83), calc(var(--grain-shift, 2%) * 0.67)); }
  100% { transform: translate(0, 0); }
}
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.flash.is-on { animation: flash 0.5s ease-out; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: 0.5; } 26% { opacity: 0.05; } 36% { opacity: 0.3; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- 画面の上の表示 */

.hud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  color: var(--hud); text-shadow: var(--hud-shadow);
  font-size: clamp(9px, 1.25cqi, 12px);
}
.crop { position: absolute; width: 14px; height: 14px; border: 0 solid var(--hud-sub); }
.crop.tl { left: 10px; top: 10px; border-width: 1px 0 0 1px; }
.crop.tr { right: 10px; top: 10px; border-width: 1px 1px 0 0; }
.crop.bl { left: 10px; bottom: 10px; border-width: 0 0 1px 1px; }
.crop.br { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }

.ruler {
  position: absolute; left: 12px; top: 14%; bottom: 14%;
  display: flex; flex-direction: column; justify-content: space-between;
  font: 400 0.8em/1 var(--font-mono); color: var(--hud-sub);
}
.ruler span { display: flex; align-items: center; gap: 4px; }
.ruler span::before { content: ""; width: 6px; border-top: 1px solid var(--hud-sub); }
.ruler span:nth-child(3n + 1)::before { width: 10px; border-color: var(--hud); }

.hud-tl { position: absolute; left: 32px; top: 16px; letter-spacing: 0.12em; }
.hud-tr {
  position: absolute; right: 18px; top: 14px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.collection { letter-spacing: 0.14em; }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.wave i { width: 2px; height: 30%; background: var(--hud-sub); animation: wave 1.1s ease-in-out infinite alternate; }
@keyframes wave { to { height: 100%; } }
body.is-paused .wave i, body.is-paused .grain { animation-play-state: paused; }

.flap { display: flex; align-items: stretch; gap: 3px; }
.flap-cell {
  position: relative; display: grid; place-items: center;
  width: clamp(18px, 2.6cqi, 30px); height: clamp(24px, 3.6cqi, 42px);
  background: var(--cell); color: var(--accent);
  font: 500 clamp(15px, 2.4cqi, 28px)/1 var(--font-mono);
  text-shadow: none; perspective: 200px;
}
.flap-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.flap-cell b { font-weight: 500; display: block; }
.flap-cell b.is-flip { animation: flip 0.24s ease-out; }
@keyframes flip { from { transform: rotateX(-88deg); opacity: 0.3; } to { transform: none; opacity: 1; } }
.flap-label {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding-left: 6px; letter-spacing: 0.14em; font-size: 0.92em; text-align: left;
}

.caption {
  position: absolute; left: 32px; top: 12%; margin: 0; max-width: 56%;
  font: 600 clamp(18px, 4.1cqi, 46px)/1.04 var(--font-sans);
  letter-spacing: -0.02em;
}
.caption .w { display: inline-block; opacity: 0; transform: translateY(0.18em); transition: opacity 0.18s, transform 0.18s; }
.caption .w.is-in { opacity: 1; transform: none; }
.caption .w.is-accent { color: var(--accent-text); }
.caption.is-out .w { opacity: 0; transition-duration: 0.3s; }
body[data-orient="portrait"] .caption { max-width: 40%; }

.bracket {
  position: absolute; opacity: 0; transition: opacity 0.3s;
  --c: var(--hud); --l: 16px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l) no-repeat;
}
.bracket.is-on { opacity: 1; }
.bracket-label {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 4px;
  padding: 2px 5px; font-size: 0.86em; letter-spacing: 0.1em; white-space: nowrap;
  background: var(--paper); color: var(--paper-ink); text-shadow: none;
}

.tag {
  position: absolute; right: 18px; bottom: 14%;
  width: clamp(118px, 19cqi, 196px);
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 12px 10px;
  background: var(--paper); color: var(--paper-ink); text-shadow: none;
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(10px) rotate(-3deg);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tag.is-on { opacity: 1; transform: rotate(-3deg); }
.tag-hole { position: absolute; left: 12px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg2); }
.tag-brand { font-size: 0.8em; letter-spacing: 0.12em; color: var(--paper-sub); }
.tag-look { font: 600 clamp(15px, 2.4cqi, 24px)/1 var(--font-display); letter-spacing: 0.02em; }
.tag-name { font: 600 clamp(10px, 1.3cqi, 13px)/1.35 var(--font-sans); }
.tag-en { font-size: 0.78em; color: var(--paper-sub); text-transform: uppercase; letter-spacing: 0.06em; }
.tag-code svg { display: block; width: 100%; height: clamp(18px, 3cqi, 30px); margin-top: 4px; }
.tag-code span { display: block; font: 400 0.72em var(--font-mono); letter-spacing: 0.14em; margin-top: 2px; }
.tag-care { display: flex; gap: 6px; margin-top: 2px; }
.tag-care svg { width: 14px; height: 14px; }

.status {
  position: absolute; left: 32px; bottom: 20px; margin: 0; max-width: 64%;
  font: 500 clamp(12px, 1.7cqi, 18px)/1.3 var(--font-sans);
}
.status .w { opacity: 0; transition: opacity 0.16s; }
.status .w.is-in { opacity: 1; }
.status .w.is-accent { color: var(--accent-text); }
.hud-br { position: absolute; right: 18px; bottom: 16px; letter-spacing: 0.1em; }

@container screen (max-width: 560px) {
  .ruler, .wave, .tag-care, .collection { display: none; }
  .hud-tl, .caption, .status { left: 18px; }
  .caption { top: 14%; max-width: 70%; }
  .tag { width: 34cqi; right: 12px; bottom: 16%; padding: 16px 9px 8px; }
  .tag-en, .tag-name { display: none; }
  body[data-orient="landscape"] .tag, body[data-orient="landscape"] .bracket-label { display: none; }
  body[data-orient="landscape"] .caption { top: 24%; font-size: clamp(14px, 4.6cqi, 22px); }
}

/* ---------------------------------------------------------------- 服の選択 */

/* 映像の右側の余白に重ねる、すりガラスのパネル */
.rail {
  position: absolute; z-index: 6;
  top: 20px; right: 20px; bottom: 20px; width: var(--rail-w);
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 20px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
/* 横長の映像では、右側の表示をガラスの手前まで寄せる */
body[data-orient="landscape"] .hud-tr,
body[data-orient="landscape"] .tag,
body[data-orient="landscape"] .hud-br { right: calc(var(--rail-w) + 44px); }
body[data-orient="landscape"] .crop.tr, body[data-orient="landscape"] .crop.br { right: calc(var(--rail-w) + 36px); }
.rail-head h2 { margin: 0 0 8px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.16em; }
.rail-help { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink); opacity: 0.78; }
.looks { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 3px 4px 2px; }

.look-card {
  position: relative; flex: 0 0 auto;
  background: var(--paper); color: var(--paper-ink);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
  transition: transform 0.2s;
}
.look-card::before { content: ""; position: absolute; left: 11px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); z-index: 1; }
.look-pick {
  appearance: none; border: 0; background: none; width: 100%;
  display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px;
  padding: 12px 12px 12px 12px; text-align: left; color: inherit;
}
.look-pick img { width: 86px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: #c9c9c6; display: block; }
.look-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }
.look-no { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--paper-sub); }
.look-name { font: 600 14px/1.4 var(--font-sans); }
.look-en { font: 400 10px/1.4 var(--font-mono); color: var(--paper-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.look-state { margin-top: auto; min-height: 16px; padding-right: 44px; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.1em; display: flex; align-items: center; gap: 6px; }
.look-state::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--paper-sub); border-radius: 50%; }
.look-card.is-wearing .look-state::before { background: var(--accent); border-color: var(--accent); }
.look-card.is-next .look-state::before { border-color: var(--accent); animation: blink 1s steps(2, jump-none) infinite; }
.look-card.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.look-card.is-selected .look-pick img { outline: 2px solid var(--accent); outline-offset: -2px; }
.look-more {
  position: absolute; right: 12px; bottom: 10px;
  appearance: none; border: 0; background: none; color: var(--paper-sub);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; padding: 4px 2px; min-height: 24px;
  text-decoration: underline; text-underline-offset: 3px;
}
.look-more:hover { color: var(--paper-ink); }
.look-pick:hover img { filter: contrast(1.05) brightness(1.03); }
.look-card:has(.look-pick:active) { transform: scale(0.99); }
.look-card.is-unready .look-pick { opacity: 1; cursor: not-allowed; }
.look-card.is-unready .look-pick img,
.look-card.is-unready .look-pick:hover img { filter: grayscale(1) brightness(1.1); opacity: 0.45; }
.look-card.is-unready .look-name,
.look-card.is-unready .look-en { opacity: 0.5; }
.look-card.is-unready .look-state { color: var(--paper-sub); }
.look-card.is-unready .look-state::before { border-style: dashed; }

body.has-garments .looks { gap: 15px; }
.garment-group h3 { margin: 0 0 9px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.2em; }
.garment-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.has-garments .look-card { min-width: 0; background: transparent; color: var(--ink); border: 1px solid transparent; clip-path: none; }
body.has-garments .look-card::before { display: none; }
body.has-garments .look-pick { display: flex; flex-direction: column; gap: 5px; padding: 5px 6px 30px; height: 100%; }
body.has-garments .look-pick img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: transparent; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s cubic-bezier(.2,.8,.2,1); }
body.has-garments .look-pick:hover:not(:disabled) img, body.has-garments .look-pick:focus-visible:not(:disabled) img { transform: translateY(-6px) scale(1.04) rotate(-1deg); filter: drop-shadow(0 16px 20px rgba(0,0,0,.45)); }
body.has-garments .look-meta { gap: 3px; padding: 0; }
body.has-garments .look-no, body.has-garments .look-en { color: var(--sub); font: 400 10px/1.4 var(--font-mono); }
body.has-garments .look-no { position: relative; letter-spacing: .14em; }
body.has-garments .look-pick:hover:not(:disabled) .look-no, body.has-garments .look-pick:focus-visible:not(:disabled) .look-no { color: var(--ink); }
body.has-garments .look-name { font-size: 12px; line-height: 1.35; }
body.has-garments .look-state { padding: 2px 0 0; margin: 0; font-size: 9px; }
body.has-garments .look-reason { color: var(--sub); font-size: 9px; line-height: 1.3; }
body.has-garments .look-pick:disabled { cursor: not-allowed; opacity: .55; }
body.has-garments .look-more { right: 8px; bottom: 5px; color: var(--sub); }
body.has-garments .look-card.is-selected { border-color: var(--accent); box-shadow: none; }
body.has-garments .look-card.is-selected::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--accent); }
body.has-garments .look-card.is-selected .look-no { padding-left: 11px; }
body.has-garments .look-card.is-selected .look-no::before { content: ""; position: absolute; left: 0; top: .4em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body.has-garments .look-card.is-selected .look-pick img { outline: none; }
body.has-garments .tag-name { white-space: pre-line; }
body.has-garments .detail-media { background: #e8e7e2; }
body.has-garments .detail-media img { object-fit: contain; }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.auto { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; cursor: pointer; min-height: 32px; }
.auto input { appearance: none; margin: 0; width: 30px; height: 16px; border-radius: 8px; background: var(--line); position: relative; cursor: pointer; transition: background 0.2s; }
.auto input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform 0.2s; }
.auto input:checked { background: var(--accent); }
.auto input:checked::after { transform: translateX(14px); background: #fff; }
.ctl {
  appearance: none; border: 1px solid var(--line); background: none;
  font: 500 12px/1 var(--font-sans); padding: 9px 14px; min-height: 36px;
}
.ctl:hover:not(:disabled) { border-color: var(--ink); }
.rail-note { margin: 0; font-size: 11px; line-height: 1.6; color: var(--sub); }
.rail-note:empty { display: none; }

/* ---------------------------------------------------------------- 下の流れる文字 */

.ticker {
  position: fixed; inset: auto 0 0 0; z-index: 5;
  height: var(--tick-h);
  display: flex; align-items: center; overflow: hidden;
  border-top: 1px solid var(--line); background: var(--bg);
}
.ticker-track {
  display: flex; width: max-content; white-space: nowrap;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--sub);
  animation: marquee 90s linear infinite;
}
.ticker-track span { padding: 0 16px; }
.ticker-track .star { color: var(--accent); padding: 0; }
.ticker-track b { color: var(--ink); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }
body.is-paused .ticker-track { animation-play-state: paused; }

/* ---------------------------------------------------------------- 読み込み中 */

.intro {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.6s, visibility 0.6s;
}
.intro.is-done { opacity: 0; visibility: hidden; }
.intro-inner { width: min(88vw, 760px); }
.intro-eyebrow { margin: 0; font-size: 11px; letter-spacing: 0.16em; color: var(--sub); }
.intro-title {
  margin: 0.18em 0 0.28em;
  font: 600 clamp(72px, 15vw, 188px)/0.84 var(--font-display);
  letter-spacing: -0.005em; text-transform: uppercase;
}
.intro-meter { display: flex; align-items: center; gap: 16px; }
.intro-bar { flex: 1; height: 5px; background: var(--line); position: relative; }
.intro-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width 0.25s; }
.intro-pct { min-width: 5ch; text-align: right; font-size: 14px; color: var(--accent-text); }
.intro-note { margin: 18px 0 0; font-size: 13px; color: var(--sub); }
.intro-start {
  margin-top: 22px; appearance: none; border: 0; background: var(--accent); color: #111;
  font: 600 15px/1 var(--font-sans); letter-spacing: 0.04em; padding: 16px 26px; min-height: 48px;
}

/* ---------------------------------------------------------------- 詳細 */

.detail {
  border: 0; padding: 0; width: min(920px, 94vw); max-height: 92vh;
  background: var(--paper); color: var(--paper-ink);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.detail[open] { display: grid; }
.detail::backdrop { background: rgba(5, 6, 8, 0.74); }
.detail-media { position: relative; background: #c9c9c6; min-height: 0; }
.detail-media img, .spin { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.spin { background-repeat: no-repeat; cursor: grab; touch-action: pan-y; user-select: none; }
.spin:active { cursor: grabbing; }
.detail-thumbs { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.detail-thumbs button { appearance: none; border: 1px solid rgba(0, 0, 0, 0.3); background: var(--paper); font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; padding: 7px 9px; min-height: 30px; }
.detail-thumbs button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.detail-body { padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.detail-look { margin: 0; font-size: 11px; letter-spacing: 0.16em; color: var(--paper-sub); }
.detail h2 { margin: 0; font: 600 24px/1.35 var(--font-sans); }
.detail-en { margin: 0; font-size: 11px; color: var(--paper-sub); text-transform: uppercase; letter-spacing: 0.06em; }
.detail-caption { margin: 8px 0 0; font: 600 30px/1.05 var(--font-display); text-transform: uppercase; }
.detail-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 18px; }
.wear { appearance: none; border: 0; background: var(--paper-ink); color: var(--paper); font: 600 14px/1 var(--font-sans); padding: 14px 20px; min-height: 44px; }
.wear:disabled { opacity: 0.45; }
.detail .ctl { border-color: rgba(0, 0, 0, 0.25); color: var(--paper-ink); }
.detail-note { margin: 0; font-size: 11px; color: var(--paper-sub); }
.noscript { position: fixed; inset: auto 0 40% 0; z-index: 30; text-align: center; }

/* ---------------------------------------------------------------- 狭い画面 */

@media (max-width: 899px) {
  body { overflow: auto; }
  .topbar { position: sticky; top: 0; height: 46px; padding: 0 16px; gap: 14px; }
  .edition { display: none; }
  .show { position: static; display: block; }
  .stage { padding: 0; display: block; container-type: normal; }
  .screen { width: 100%; max-height: 72svh; margin: 0 auto; width: min(100%, calc(72svh * var(--ar-num))); }
  .rail { position: static; width: auto; border: 0; box-shadow: none; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px 16px 20px; gap: 12px; }
  body[data-orient="landscape"] .hud-tr, body[data-orient="landscape"] .tag, body[data-orient="landscape"] .hud-br { right: 18px; }
  body[data-orient="landscape"] .crop.tr, body[data-orient="landscape"] .crop.br { right: 10px; }
  .looks { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .look-card { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
  body.has-garments .looks { flex-direction: column; overflow: visible; }
  .garment-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px; }
  body.has-garments .look-card { flex: 0 0 min(44%, 180px); scroll-snap-align: start; }
  .ticker { position: static; }
  .detail { grid-template-columns: 1fr; overflow: auto; }
  .detail-media img, .spin { aspect-ratio: 1 / 1; }
  .detail-body { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .wave i, .ticker-track, body.is-live .live-dot, .look-card.is-next .look-state::before { animation: none; }
  .flash { display: none; }
  .caption .w, .status .w, .tag, .bracket, .intro { transition: none; }
  .flap-cell b.is-flip { animation: none; }
  body.has-garments .look-pick img { transition: none; }
  body.has-garments .look-pick:hover:not(:disabled) img, body.has-garments .look-pick:focus-visible:not(:disabled) img { transform: none; }
}


/* Two wardrobe rails, with three independently selectable garments per rail. */
body.has-garments { --rail-w: 410px; --grain-opacity: 0; --halftone: 0; }
body.has-garments .grain { display: none; }
body.has-garments .caption { top: auto; bottom: 58px; left: 32px !important; max-width: calc(100% - var(--rail-w) - 72px) !important; font-size: 12px; }
body.has-garments .rail { padding: 18px 14px 14px; gap: 12px; background: rgba(239,238,233,.93); color: #222725; --ink: #222725; --sub: #72766f; --line: rgba(30,35,30,.18); --accent: #976940; --accent-text: #976940; }
body.has-garments .looks { gap: 12px; overflow: auto; }
body.has-garments .controls { gap: 8px; flex-wrap: wrap; }
#music { font-size: 10px; white-space: nowrap; }
.garment-group h3 { margin: 0 0 6px; color: #656b63; }
.garment-row { position: relative; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding-top: 0; }
.garment-row::before { content: ""; position: absolute; z-index: 1; top: 7px; left: 0; right: 0; height: 7px; border-radius: 6px; background: linear-gradient(#676e70,#eef0ee 42%,#909697 70%,#4b5355); box-shadow: 0 2px 4px #0002; }
.garment-row::after { content: ""; position: absolute; top: 1px; left: -3px; right: -3px; height: 19px; border-left: 8px solid #9ca09d; border-right: 8px solid #9ca09d; border-radius: 7px; pointer-events: none; }
body.has-garments .look-card { overflow: visible; }
body.has-garments .look-pick { display: grid; position: relative; height: 197px; padding: 0 3px 23px; grid-template-columns: 1fr; grid-template-rows: 128px 42px; gap: 3px; perspective: 600px; }
.rack-view { position: absolute; inset: 0 0 auto; width: 100%; height: 128px; pointer-events: none; }
.rack-ready::before, .rack-ready::after { display: none; }
.rack-ready .hanger, body.has-garments .rack-ready .look-pick img { visibility: hidden; }
.rack-ready .look-card { z-index: 1; }
.hanger { position: absolute; z-index: 2; top: -9px; left: 8%; width: 84%; height: 45px; filter: drop-shadow(0 3px 2px #0002); transition: transform .24s; }
body.has-garments .look-pick img { height: 84px; aspect-ratio: auto; filter: drop-shadow(4px 8px 7px #0003); transform: rotateY(-18deg); }
body.has-garments .look-pick:hover:not(:disabled) img, body.has-garments .look-pick:focus-visible:not(:disabled) img, body.has-garments .look-card.is-selected img { transform: rotateY(0) translateY(-4px); filter: drop-shadow(4px 12px 10px #0004); }
body.has-garments .look-pick:hover:not(:disabled) .hanger, body.has-garments .look-pick:focus-visible:not(:disabled) .hanger { transform: translateY(-4px); }
body.has-garments .look-meta { align-items: center; text-align: center; padding-top: 0; gap: 2px; }
body.has-garments .look-no, body.has-garments .look-state, body.has-garments .look-reason { display: none; }
body.has-garments .look-name { font-size: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.has-garments .look-en { font-size: 9px; }
body.has-garments .look-more { right: 50%; transform: translateX(50%); white-space: nowrap; }
body.has-garments .look-card.is-selected { border-color: transparent; }
@media (max-width: 899px) {
  body.has-garments .rail { padding: 20px 16px; }
  .garment-row { display: grid; overflow: visible; }
  body.has-garments .look-pick img { height: 84px; }
  body.has-garments .caption { max-width: calc(100% - 64px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hanger { transition: none; }
  body.has-garments .look-pick:hover:not(:disabled) .hanger { transform: none; }
}

.tag-eyebrow, .tag-pair { display: none; }
body.has-garments .tag {
  display: flex; top: 21%; bottom: auto; width: clamp(140px, 18cqi, 200px);
  padding: 14px; gap: 8px; clip-path: none; transform: none;
  background: rgba(239,238,233,.94); border: 1px solid rgba(30,35,30,.18);
  box-shadow: 0 8px 24px #0001;
}
body.has-garments .tag-hole, body.has-garments .tag-brand,
body.has-garments .tag-code, body.has-garments .tag-care { display: none; }
body.has-garments .tag-eyebrow { display: block; font-size: 10px; color: #656b63; letter-spacing: .06em; }
body.has-garments .tag-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; padding: 8px 0; border-block: 1px solid #22272518; }
.tag-pair figure { margin: 0; min-width: 0; text-align: center; }
.tag-pair img { display: block; width: 100%; height: 78px; object-fit: contain; filter: drop-shadow(1px 3px 2px #0002); }
.tag-pair figcaption { margin-top: 5px; font-size: 8px; color: #72766f; letter-spacing: .1em; }
.tag-plus { color: #976940; font-size: 14px; }
body.has-garments .tag-name { display: block; white-space: pre-line; font-size: 10px; font-weight: 500; line-height: 1.6; }
body.has-garments .tag-en { display: block; font: 400 8px var(--font-mono); }
@media (max-width: 899px) {
  body.has-garments .tag { right: 18px; top: 20%; width: clamp(140px, 28cqi, 200px); padding: 10px; gap: 6px; }
  .tag-pair img { height: 64px; }
  body.has-garments .hud-tr, body.has-garments .hud-br { display: none; }
  body.has-garments .caption { max-width: calc(100% - 220px) !important; }
}
@container screen (max-width: 560px) {
  body.has-garments .tag { right: 12px; top: 23%; width: 34cqi; padding: 8px; gap: 5px; }
  body.has-garments .tag-name { display: none; }
  .tag-pair { gap: 3px; }
  .tag-pair img { height: 48px; }
  body.has-garments .tag-eyebrow { font-size: 8px; letter-spacing: 0; }
}