/* 소방 이미지 '소방 제복 이미지 생성기'(#dressing) 2판 — 장비 칸·마네킹(겹 쌓기)·장비함. 마크업은 builders/fire-uniforms-dressing.js 가 BUILD:UFDRESSING 에 넣고,
   움직임은 assets/fire-uniforms-dressing.js. 판은 다크 섬(.theme-dark — 계기 화면이라 라이트에서도 어둡다), 색은 토큰만(래칫 0).
   빈 칸은 장비 보관함 벽의 공구 자리 표시처럼 윤곽만, 장비의 분류는 분류 색(--fam)으로 칸·이름·띠에 같은 색을 쓴다. */
.dr{padding-top:56px;scroll-margin-top:90px}
.dr-panel{position:relative;padding:30px;border:1px solid var(--glass-line);border-radius:18px;color:var(--txt);
  background:repeating-linear-gradient(135deg,rgba(var(--ink-rgb),.018) 0 2px,transparent 2px 12px),linear-gradient(180deg,var(--bg-2),var(--bg));box-shadow:var(--shadow-card)}
[data-family=uniforms]{--fam:var(--blue);--fam-rgb:var(--blue-rgb)}
[data-family=role-uniforms]{--fam:var(--green);--fam-rgb:var(--green-rgb)}
[data-family=fire-ppe]{--fam:var(--ember);--fam-rgb:var(--ember-rgb)}

.dr-head{max-width:820px;margin-bottom:26px}
.dr-head h2{font-size:28px;letter-spacing:-.035em;line-height:1.3}
.dr-head p{margin-top:10px;font-size:14px;line-height:1.85;color:var(--read)}

.dr-body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:30px;align-items:start}

/* 마네킹과 장비 칸 — 왼쪽 넷(머리·얼굴·복장·겉옷), 오른쪽 넷(조끼·등·손·발) */
.dr-doll{display:grid;grid-template-columns:78px minmax(0,1fr) 78px;grid-template-areas:"tools tools tools" "l stage r" ". views .";gap:14px 16px;align-items:center}
/* 고친 순서 — 이전·다음·초기화(2026-10-26 운영자 '눈에 띄는 위치에 초기화 버튼이 없다. 이전, 이후도 없다') */
.dr-tools{grid-area:tools;display:flex;justify-content:center;gap:8px}
.dr-tools[hidden]{display:none}
.dr-tools button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--glass-line);border-radius:999px;background:rgba(var(--ink-rgb),.05);color:var(--txt);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.dr-tools button:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.dr-tools button:disabled{opacity:.38;cursor:not-allowed}
.dr-tools button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.dr-tools svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dr-tools [data-dr-reset]{border-color:rgba(var(--ember-rgb),.55)}
.dr-slots{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dr-slots-l{grid-area:l}
.dr-slots-r{grid-area:r}
.dr-slot{position:relative;display:grid;place-items:center;width:78px;height:78px;padding:0;border:1px dashed rgba(var(--ink-rgb),.24);border-radius:12px;background:rgba(var(--ink-rgb),.035);color:var(--txt-faint);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.dr-slot:hover,.dr-slot[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
.dr-slot:focus-visible,.dr-item:focus-visible,.dr-views button:focus-visible,.dr-filter button:focus-visible,.dr-btn:focus-visible,.dr-sets a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.dr-outline{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.dr-slot.is-on{border-style:solid;border-color:var(--fam);box-shadow:inset 0 0 0 1px var(--fam),0 0 18px rgba(var(--fam-rgb),.22);background:var(--chip)}
.dr-slot.is-on .dr-outline{display:none}
.dr-slot-item{position:absolute;inset:4px;border-radius:8px;overflow:hidden}
.dr-slot-item:empty{display:none}
.dr-slot-label{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:11px;color:var(--txt-dim);white-space:nowrap}
.dr-slots li{padding-bottom:14px}
.dr-slot.is-flash{animation:dr-flash .7s ease-out}
/* 규칙에 맞지 않아 입히지 않았을 때 — 칸이 짧게 흔들린다 */
.dr-slot.is-refused{animation:dr-shake .42s ease-in-out;border-color:var(--diff-advanced)}
@keyframes dr-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes dr-flash{0%{box-shadow:inset 0 0 0 1px var(--fam),0 0 0 0 rgba(var(--amber-rgb),.7)}100%{box-shadow:inset 0 0 0 1px var(--fam),0 0 0 14px rgba(var(--amber-rgb),0)}}

.dr-stage{grid-area:stage;margin:0;min-width:0}
.dr-frame{position:relative;aspect-ratio:2/3;max-height:640px;margin:0 auto;border-radius:14px;overflow:hidden;background:var(--chip);border:1px solid rgba(var(--ink-rgb),.16);box-shadow:0 0 0 6px rgba(var(--ink-rgb),.03),0 24px 60px rgba(var(--shade-rgb),.45);perspective:1400px}
/* 겹 쌓기 — 바탕 그림은 틀 전체, 장비 겹은 layers.json 의 자리 비율(left·top·width·height 를 스크립트가 넣는다) */
.dr-stack{position:absolute;inset:0;backface-visibility:hidden}
.dr-stack img{position:absolute;display:block;max-width:none}
.dr-stack .dr-base{inset:0;width:100%;height:100%;object-fit:cover}
/* 끌어다 놓을 때 — 장비가 들어갈 부위에 빛 */
.dr-frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle at calc(var(--rx,.5)*100%) calc(var(--ry,.3)*100%),rgba(var(--amber-rgb),.42),rgba(var(--amber-rgb),.08) 24%,transparent 46%)}
.dr-frame.is-target{border-color:var(--amber)}
.dr-frame.is-target::after{opacity:1}
.dr-ring{position:absolute;left:calc(var(--rx,.5)*100%);top:calc(var(--ry,.3)*100%);width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid var(--amber);border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 22px rgba(var(--amber-rgb),.6),inset 0 0 12px rgba(var(--amber-rgb),.4)}
.dr-stage figcaption{display:flex;justify-content:center;gap:8px;margin-top:12px;font-size:13px;color:var(--read)}
.dr-view-now{color:var(--txt-dim)}

.dr-views{grid-area:views;display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.dr-views[hidden],.dr-filter[hidden]{display:none}
.dr-views button,.dr-filter button{font:inherit;font-size:12.5px;min-height:36px;padding:7px 12px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--read);cursor:pointer}
.dr-views button[aria-pressed=true],.dr-filter button[aria-pressed=true]{border-color:var(--amber);color:var(--amber);background:rgba(var(--amber-rgb),.08)}
.dr-views button:disabled{opacity:.35;cursor:not-allowed}

/* 장비함 — 12칸 격자, 작은 장비 2×2·옷 2×3. 칸 높이는 장비함을 감싼 .dr-side 의 폭(cqw)에서 — 장비함 자신에 걸면 자기 속성에는 닿지 않는다 */
.dr-side{display:grid;gap:16px;min-width:0;container-type:inline-size}
.dr-bag,.dr-slots{user-select:none;-webkit-user-select:none}
.dr-filter{display:flex;flex-wrap:wrap;gap:6px}
.dr-bag{--cols:12;--gap:5px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((100cqw - 18px - (var(--cols) - 1)*var(--gap))/var(--cols));scrollbar-gutter:stable;grid-auto-flow:row dense;gap:var(--gap);max-height:560px;overflow:auto;padding:8px;border:1px solid var(--glass-line);border-radius:12px;scrollbar-width:thin;
  background:linear-gradient(rgba(var(--ink-rgb),.05) 1px,transparent 1px) 0 0/100% 24px,rgba(var(--black-rgb),.25)}
.dr-item{--ar:1;position:relative;display:block;grid-column:span 2;grid-row:span 2;border-radius:9px;overflow:hidden;background:var(--chip);border:1px solid rgba(var(--ink-rgb),.14);box-shadow:inset 0 3px 0 var(--fam);cursor:grab;touch-action:manipulation;transition:transform .15s,border-color .15s,opacity .2s}
.dr-item:is([data-slot=base],[data-slot=outer],[data-slot=vest],[data-slot=back]){--ar:.667;grid-row:span 3}
/* 지금 복장에 씌울 수 없는 머리 장비(규칙) — 흐리게, 대각선 한 줄 */
.dr-item.is-blocked{opacity:.45;filter:grayscale(.7)}
.dr-item.is-blocked::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(var(--white-rgb),.7) 50%,transparent calc(50% + 1px))}
.dr-item:hover{border-color:var(--fam);transform:translateY(-2px)}
.dr-item.is-on{border-color:var(--fam);box-shadow:inset 0 3px 0 var(--fam),0 0 0 2px var(--fam)}
.dr-item.is-on::before{content:"착용";position:absolute;z-index:2;top:6px;right:6px;padding:1px 6px;border-radius:5px;background:var(--fam);color:var(--on-accent);font-size:10.5px;font-weight:700}
.dr-bag.is-filtered .dr-item:not(.is-match){display:none}
.dr-item.is-dragging{opacity:.35}
.dr-item-name{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:16px 6px 5px;font-size:10.5px;line-height:1.3;font-weight:650;color:rgb(var(--white-rgb));background:linear-gradient(transparent,rgba(var(--black-rgb),.78));word-break:keep-all}

/* 그림 한 장의 한 부위를 확대한 아이콘 — 가운데(--x,--y 그림 비율)를 칸 가운데에, 배율 --z. 그림은 2:3, 칸의 가로/세로 비 --ar */
.dr-ico{position:absolute;inset:0;overflow:hidden}
.dr-ico img{position:absolute;max-width:none;height:auto;width:calc(var(--z)*100%);left:calc(50% - var(--x)*var(--z)*100%);top:calc(50% - var(--y)*var(--z)*150%*var(--ar))}
.dr-ico.is-photo img{inset:0;width:100%;height:100%;object-fit:contain;padding:6%}
.dr-slot .dr-ico{--ar:1}

.dr-ghost{position:fixed;z-index:90;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:12px;overflow:hidden;pointer-events:none;background:var(--chip);border:2px solid var(--amber);box-shadow:0 18px 40px rgba(var(--shade-rgb),.5);transform:rotate(-4deg)}
.dr-ghost .dr-ico{--ar:1}

/* 지금 차림 */
.dr-outfit{padding:18px 20px;border:1px solid var(--glass-line);border-radius:12px;background:rgba(var(--ink-rgb),.03)}
.dr-outfit-name{font-size:12.5px;color:var(--txt-dim)}
.dr-worn{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dr-worn a{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;border:1px solid var(--glass-line);border-left:3px solid var(--fam);border-radius:7px;font-size:13px;font-weight:600;color:var(--txt)}
.dr-worn a:hover{border-color:var(--fam)}
.dr-outfit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dr-btn{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--glass-line);border-radius:9px;background:rgba(var(--ink-rgb),.04);color:var(--txt);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dr-btn:hover{border-color:var(--amber)}
.dr-btn.is-primary{background:var(--ember);border-color:var(--ember);color:var(--on-accent)}
.dr-btn.is-primary:hover{background:var(--plasma)}
.dr-btn[hidden]{display:none}
.dr-status{margin-top:10px;min-height:1.6em;font-size:12.5px;line-height:1.65;color:var(--amber)}

/* 조합 규칙 */
.dr-rules{margin-top:24px;padding:16px 20px;border:1px solid var(--glass-line);border-radius:12px;background:rgba(var(--amber-rgb),.04)}
.dr-rules-title{font-size:12.5px;font-weight:700;color:var(--amber)}
.dr-rules ol{margin:8px 0 0;padding-left:20px;font-size:13.5px;line-height:1.8;color:var(--txt)}
.dr-rules-note{margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--txt-dim)}

/* 페이지의 차림 그림과 같은 조합 — 한 번에 갈아입기 */
.dr-sets{margin-top:26px;padding-top:18px;border-top:1px solid var(--glass-line)}
.dr-sets-title{font-size:12.5px;color:var(--txt-dim);margin-bottom:10px}
.dr-sets ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dr-sets a{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border:1px solid var(--glass-line);border-left:3px solid var(--fam);border-radius:7px;font-size:12.5px;color:var(--read)}
.dr-sets a:hover{color:var(--txt);border-color:var(--fam)}
.dr-sets a[aria-current=true]{color:var(--txt);background:rgba(var(--fam-rgb),.12);border-color:var(--fam)}
.dr-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px;color:var(--txt-dim)}
.dr-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;background:var(--fam);vertical-align:-1px}

/* 장비 설명 — 칸 위에 떠 있는 카드 */
.dr-tip{position:fixed;z-index:80;max-width:280px;padding:13px 15px;border:1px solid rgba(var(--fam-rgb),.6);border-radius:10px;background:var(--bg-2);box-shadow:var(--shadow-pop);pointer-events:none;font-size:12.5px;line-height:1.65;color:var(--read)}
.dr-tip[hidden]{display:none}
.dr-tip b{display:block;font-size:15px;color:var(--fam);margin-bottom:4px}
.dr-tip span{display:block;color:var(--txt-dim)}
.dr-tip em{display:block;margin-top:6px;font-style:normal;color:var(--txt)}

@media(max-width:1100px){.dr-body{grid-template-columns:minmax(0,1fr)}.dr-frame{max-height:600px}.dr-bag{--cols:16;max-height:none}}
/* 휴대폰 — 마네킹과 장비함이 한 화면에 들어오게: 칸 여덟은 넷씩 두 줄(이름은 숨기고 윤곽과 aria-label 로), 장비함은 옆으로 넘기는 한 줄 */
@media(max-width:760px){
  .dr{padding-top:36px}
  .dr-panel{padding:20px 16px}
  .dr-head h2{font-size:24px}
  .dr-head p{font-size:13.5px}
  .dr-head br{display:none}
  .dr-doll{grid-template-columns:auto;grid-template-areas:"tools" "stage" "views" "l" "r";justify-content:center;gap:8px 5px}
  .dr-tools button{min-height:38px;padding:7px 12px}
  .dr-frame{max-height:56svh;max-width:min(347px,calc(56svh*2/3))}
  .dr-slots{grid-auto-flow:column;justify-content:center;gap:8px}
  .dr-slots li{padding-bottom:0}
  .dr-slot{width:48px;height:48px;border-radius:9px}
  .dr-slot-label{display:none}
  .dr-slot-item{inset:3px;border-radius:6px}
  .dr-outline{width:24px;height:24px}
  .dr-bag{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:6px;scroll-snap-type:x proximity;background:rgba(var(--black-rgb),.25)}
  .dr-item,.dr-item:is([data-slot=base],[data-slot=outer],[data-slot=vest],[data-slot=back]){--ar:1;flex:0 0 88px;height:88px;scroll-snap-align:start}
  .dr-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .dr-filter button{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.dr-slot,.dr-item,.dr-frame::after{transition:none}.dr-slot.is-flash,.dr-slot.is-refused{animation:none}}