/* 소방 이미지 참조 이미지 절(01~04A)의 접힌 표지와 펼친 장면 — 움직임은 assets/fire-uniforms-scene.js. 색은 토큰만(래칫 0).
   스크립트가 없으면 <details> 가 원래 목록을 접고 펼친다(표지 그림·장면 없음). */

/* ── 접힌 표지 */
.uf-fold{margin-top:6px}
.uf-fold-sum{list-style:none;display:flex;align-items:center;gap:22px;min-height:64px;padding:18px 22px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.uf-fold-sum::-webkit-details-marker{display:none}
.uf-fold-sum:hover{border-color:var(--ember);box-shadow:var(--shadow-hover)}
.uf-fold-sum:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.uf-fold-text{display:grid;gap:4px;min-width:0;flex:1}
.uf-fold-text b{font-size:17px;letter-spacing:-.02em;color:var(--txt)}
.uf-fold-meta{font-size:12.5px;color:var(--txt-dim)}
.uf-fold-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:999px;background:var(--ember);color:var(--on-accent);font-size:13.5px;font-weight:700}
.uf-fold-cta::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.uf-fold[open] > .uf-fold-sum .uf-fold-cta{background:transparent;color:var(--txt);border:1px solid var(--glass-line)}
.uf-fold[open] > .uf-fold-sum .uf-fold-cta::after{transform:translateY(2px) rotate(-135deg)}
.uf-fold[open] > .uf-fold-sum{border-bottom-left-radius:6px;border-bottom-right-radius:6px}
/* 부채꼴 대표 그림 — 마우스를 올리면 펼쳐진다 */
.uf-fan{position:relative;flex:0 0 260px;height:96px}
.uf-fan-card{position:absolute;left:50%;top:6px;width:64px;height:84px;margin-left:-32px;border-radius:9px;overflow:hidden;background:var(--chip);border:1px solid var(--glass-line);box-shadow:var(--shadow-card);transform:translateX(calc(var(--i) * 26px)) rotate(calc(var(--i) * 6deg));transform-origin:50% 120%;transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.uf-fan-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.uf-fan-card.is-wide{width:96px;height:66px;margin-left:-48px;top:18px}
.uf-fan-card.is-wide img{object-fit:contain;object-position:50% 50%}
.uf-fold-sum:hover .uf-fan-card,.uf-fold-sum:focus-visible .uf-fan-card{transform:translateX(calc(var(--i) * 40px)) rotate(calc(var(--i) * 3deg)) translateY(-6px)}
.uf-fold[open] .uf-fan{display:none}
.uf-fold-body{padding-top:22px}

/* 장면이 있으면 원래 목록은 숨기고, '목록으로 보기'면 장면을 숨긴다 */
.uf-fold.has-scene:not(.show-list) > .uf-fold-body > :not(.uf-scene):not(.uf-ladder):not(.uf-about){display:none}
/* 목록으로 볼 때는 전환 단추 줄(.uf-scene-toggle)만 남긴다 */
.uf-fold.has-scene.show-list > .uf-fold-body > :is(.uf-scene,.uf-ladder) > :not(.uf-scene-toggle){display:none}
.uf-scene-toggle{display:flex;justify-content:flex-end;margin:0}
.uf-fold.has-scene.show-list > .uf-fold-body > :is(.uf-scene,.uf-ladder){margin-bottom:24px}

/* ── 장면: 무대 + 설명 */
.uf-scene{display:grid;gap:16px}
.uf-scene-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center}
.uf-stage{position:relative;border-radius:18px;padding:18px;background:radial-gradient(ellipse at 50% 92%,rgba(var(--shade-rgb),.16),transparent 55%),var(--chip);border:1px solid var(--glass-line);box-shadow:var(--shadow-card)}
.uf-stage-view{position:relative;aspect-ratio:var(--ar,3 / 2);max-height:min(62vh,620px);margin:0 auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.uf-stage-view.is-drag{cursor:grabbing}
.uf-stage-view:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:10px}
.uf-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.uf-stage-hint{position:absolute;left:18px;bottom:14px;padding:5px 10px;border-radius:999px;background:rgba(var(--black-rgb),.55);color:rgb(var(--white-rgb));font-size:11.5px;pointer-events:none}
.uf-stage-hint[hidden]{display:none}
.uf-stage-count{position:absolute;right:18px;top:14px;font-size:12px;font-weight:700;color:var(--chip-ink);font-variant-numeric:tabular-nums}
.uf-scene-side{display:grid;align-content:center;gap:12px;min-width:0}
.uf-scene-name{font-size:24px;letter-spacing:-.03em;line-height:1.3;color:var(--txt)}
.uf-scene-desc{font-size:14px;line-height:1.8;color:var(--read)}
.uf-scene-desc[hidden],.uf-scene-views[hidden]{display:none}
.uf-scene-views,.uf-scene-groups{display:flex;flex-wrap:wrap;gap:6px}
.uf-scene-views button,.uf-scene-groups button{font:inherit;font-size:13px;min-height:38px;padding:8px 14px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--read);cursor:pointer}
.uf-scene-views button[aria-pressed=true],.uf-scene-groups button[aria-pressed=true]{border-color:var(--ember);color:var(--ember);background:rgba(var(--ember-rgb),.08)}
.uf-scene-views button:focus-visible,.uf-scene-groups button:focus-visible,.uf-rail-item:focus-visible,.uf-ladder-stops button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.uf-scene-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.uf-scene-acts .uf-button{min-height:42px;padding:9px 16px}
.uf-scene-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 항목 줄 — 옆으로 넘긴다 */
.uf-scene-rail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.uf-rail-item{flex:0 0 112px;display:grid;gap:6px;padding:6px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--read);font:inherit;font-size:12px;line-height:1.35;text-align:left;cursor:pointer;scroll-snap-align:start;transition:border-color .2s,transform .2s}
.uf-rail-item[hidden]{display:none}
.uf-rail-item img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--chip);border-radius:8px}
.uf-rail-item span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.uf-rail-item:hover{border-color:var(--ember);transform:translateY(-2px)}
.uf-rail-item[aria-pressed=true]{border-color:var(--ember);box-shadow:0 0 0 2px rgba(var(--ember-rgb),.35);color:var(--txt)}

/* ── 계급 사다리 */
.uf-ladder{display:grid;gap:16px}
.uf-ladder-stage{display:grid;justify-items:center;gap:10px;padding:26px 18px 18px;border-radius:18px;background:var(--chip);border:1px solid var(--glass-line);box-shadow:var(--shadow-card)}
.uf-ladder-img{display:grid;place-items:center;width:min(440px,100%);aspect-ratio:3 / 2}
.uf-ladder-img img{max-width:100%;max-height:100%;object-fit:contain}
.uf-ladder-name{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--chip-ink)}
/* 계급 막대 — 지나온 계급까지 불꽃색으로 찬다 */
.uf-ladder-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;margin:6px 0;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--amber),var(--ember)) 0 0/var(--p,0%) 100% no-repeat,rgba(var(--ink-rgb),.12)}
.uf-ladder-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ember);border:3px solid rgb(var(--white-rgb));box-shadow:var(--shadow-card)}
.uf-ladder-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ember);border:3px solid rgb(var(--white-rgb))}
.uf-ladder-range:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.uf-ladder-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.uf-ladder-stops button{width:100%;min-height:40px;font:inherit;font-size:12.5px;border:1px solid var(--glass-line);border-radius:9px;background:transparent;color:var(--txt-dim);cursor:pointer}
.uf-ladder-stops button.is-past{color:var(--read);border-color:rgba(var(--ember-rgb),.35)}
.uf-ladder-stops button[aria-current=true]{color:var(--on-accent);background:var(--ember);border-color:var(--ember);font-weight:700}

@media(max-width:900px){.uf-scene-main{grid-template-columns:1fr}.uf-stage-view{max-height:56vh}}
@media(max-width:620px){
  .uf-fold-sum{flex-wrap:wrap;gap:12px;padding:14px}
  .uf-fan{flex:1 0 100%;height:84px;order:-1}
  .uf-fan-card{width:54px;height:72px;margin-left:-27px}
  .uf-scene-name{font-size:20px}
  .uf-rail-item{flex-basis:96px}
  .uf-ladder-stops{grid-template-columns:repeat(4,minmax(0,1fr))}
  .uf-ladder-name{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.uf-fan-card,.uf-fold-sum,.uf-rail-item,.uf-fold-cta::after{transition:none}}
@media print{.uf-fold-sum{display:none}.uf-scene,.uf-ladder{display:none}.uf-fold-body > *{display:revert !important}}