/* 결정 도우미 전용 CSS (2026-10-14). 모드·무대(릴·결과·경기 카드)·후보 목록·뽑힌 기록 막대·대진표 dh-*. 공용 부품은 assets/v2.css.
   움직임(R45): 릴은 JS 가 transform 전환(cubic-bezier(.16,1,.3,1))으로 돌리고 멈출 때 결과 글자가 살짝 커졌다 돌아옴(dh-pop), 기록 막대는 너비 전환, 경기 카드는 고른 쪽이 채워졌다 넘어감. 동작 줄이기면 모두 끔. */
.dh{container:dh / inline-size}
.dh [hidden]{display:none !important}
.dh-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dh-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.dh-top .dh-help{flex-basis:100%;margin-top:2px}
.dh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.dh-stage{display:flex;flex-direction:column;padding:18px;min-width:0;border-right:1px solid var(--soft)}
/* 릴: 창 3칸, 가운데 칸이 결과. 띠는 위 여백 한 칸을 두고 translateY(−k칸)으로 k번째 후보를 가운데에 둔다 */
.dh-reelbox{position:relative;--cell:46px;height:calc(var(--cell) * 3);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.dh-reel{height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%)}
.dh-strip{display:flex;flex-direction:column;padding-top:var(--cell);will-change:transform,filter}
.dh-strip span{display:block;height:var(--cell);line-height:var(--cell);padding:0 16px;text-align:center;font-family:var(--sans);font-size:17px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 가운데 칸: 뽑기 전·회전 중은 흐린 점선 띠, 멈추면(is-win) 색 띠 + 양쪽 화살표 + 이름 진하게 → 아래 결과(뽑힌 후보 · 릴 가운데 칸)와 짝이 맞게 */
.dh-reelbox.is-win .dh-strip span.is-on{color:var(--ink);font-weight:800}
.dh-reel-line{position:absolute;left:10px;right:10px;top:var(--cell);height:var(--cell);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);pointer-events:none;transition:background .3s ease,border-color .3s ease}
.dh-reelbox.is-win .dh-reel-line{border-style:solid;border-color:var(--accent);background:var(--accent-wash)}
.dh-reel-line::before,.dh-reel-line::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent;opacity:0;transition:opacity .3s ease}
.dh-reel-line::before{left:6px;border-left:9px solid var(--accent)}
.dh-reel-line::after{right:6px;border-right:9px solid var(--accent)}
.dh-reelbox.is-win .dh-reel-line::before,.dh-reelbox.is-win .dh-reel-line::after{opacity:1}
.dh-result.is-picked .v2-label{color:var(--accent)}
.dh-result{display:flex;flex-direction:column;align-items:center;gap:2px;margin:14px 0 10px;text-align:center;min-height:76px}
.dh-result b{font-family:var(--sans);font-size:clamp(24px,5vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.dh-stage.is-spin .dh-result b{color:var(--muted)}
.dh-result.is-decided b{color:var(--accent)}
.dh-result.is-empty b{font-size:16px;font-weight:600;letter-spacing:0;color:var(--muted)}
.dh-result span:last-child{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.dh-result.is-pop b{animation:dh-pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes dh-pop{0%{transform:scale(.92);opacity:.6}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.dh-ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.dh-main{min-width:120px;justify-content:center}
.dh-foot{display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:14px}
.dh-foot .v2-status:empty{display:none}
/* 전체 화면(R46): 무대 패널만 키움. Fullscreen API 가 없으면 .is-full 고정 보기 */
.dh-fullhint{display:none;margin:14px 0 0;text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.dh-stage:fullscreen,.dh-stage.is-full{justify-content:center;width:100%;height:100%;padding:24px;border:0;background:var(--paper);overflow:auto}
.dh-stage.is-full{position:fixed;inset:0;z-index:1000}
.dh-stage:fullscreen .dh-pick,.dh-stage.is-full .dh-pick,.dh-stage:fullscreen .dh-tour,.dh-stage.is-full .dh-tour,.dh-stage:fullscreen .dh-foot,.dh-stage.is-full .dh-foot,.dh-stage:fullscreen .dh-fullhint,.dh-stage.is-full .dh-fullhint{width:min(100%,820px);margin-left:auto;margin-right:auto}
.dh-stage:fullscreen .dh-reelbox,.dh-stage.is-full .dh-reelbox{--cell:clamp(56px,9vmin,84px)}
.dh-stage:fullscreen .dh-strip span,.dh-stage.is-full .dh-strip span{font-size:clamp(22px,3.6vmin,34px)}
.dh-stage:fullscreen .dh-result b,.dh-stage.is-full .dh-result b{font-size:clamp(32px,6vmin,64px)}
.dh-stage:fullscreen .dh-result.is-empty b,.dh-stage.is-full .dh-result.is-empty b{font-size:clamp(18px,2.6vmin,24px)}
.dh-stage:fullscreen .dh-card,.dh-stage.is-full .dh-card{min-height:clamp(140px,26vmin,240px);font-size:clamp(20px,3.4vmin,32px)}
.dh-stage:fullscreen .dh-fullhint,.dh-stage.is-full .dh-fullhint{display:block}
.dh-stage:fullscreen .dh-foot,.dh-stage.is-full .dh-foot{margin-top:18px;justify-content:center}
html.dh-noscroll{overflow:hidden}
/* 토너먼트 경기: 두 카드 */
.dh-tour-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 10px}
.dh-tour-prog{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dh-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch}
.dh-card{display:flex;align-items:center;justify-content:center;min-height:104px;padding:14px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:clamp(16px,2.4vw,20px);font-weight:700;line-height:1.3;color:var(--ink);text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .15s ease,background .15s ease,color .15s ease}
.dh-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.dh-card:focus-visible{outline:0;box-shadow:0 0 0 3px var(--accent-wash),0 0 0 5px var(--accent)}
.dh-card.is-picked{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.dh-vs{align-self:center;font-family:var(--sans);font-size:12px;font-weight:700;font-style:normal;color:var(--muted)}
.dh-tour-hint{margin-top:10px;min-height:1.55em}
.dh-tour-result{margin-top:4px}
.dh-tour .dh-ctrl{margin-top:12px;justify-content:flex-start}
/* 후보 목록 */
.dh-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.dh-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.dh-count{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dh-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dh-list li{display:grid;grid-template-columns:20px minmax(0,1fr) var(--v2-ctl,42px);gap:8px;align-items:center}
.dh-no{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.dh-in input{text-align:left;font-weight:600;font-variant-numeric:normal}
.dh-x{width:var(--v2-ctl,42px);padding:0;justify-content:center}
.dh-x:disabled{opacity:.35;cursor:default}
.dh-acts{display:flex;gap:8px;flex-wrap:wrap}
.dh-presets{display:flex;flex-direction:column;gap:6px}
/* 아래 상자: 뽑힌 기록·대진표 */
.dh-box{padding:14px 18px 16px;border-top:1px solid var(--soft);min-width:0}
.dh-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 8px}
.dh-headhint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.dh-stats{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.dh-stats:empty{display:none}
.dh-stats li{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) auto;gap:8px;align-items:center;font-family:var(--sans);font-size:12.5px}
.dh-stats .nm{display:flex;align-items:center;gap:6px;min-width:0;font-weight:650;color:var(--ink)}
.dh-stats .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-stats li.is-skipped .nm{color:var(--muted)}
.dh-stats .bar{height:12px;border-radius:3px;background:var(--soft);overflow:hidden}
.dh-stats .bar b{display:block;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1)}
.dh-stats li.is-skipped .bar b{background:var(--muted)}
.dh-stats .v{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-tag{display:inline-block;flex:none;padding:1px 6px;border-radius:9px;font-size:10.5px;font-weight:700;font-style:normal;background:var(--wash);color:var(--muted);vertical-align:1px}
.dh-tag.is-decided{background:var(--fill);color:var(--on-fill)}
.dh-skip{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--radius)}
.dh-skip .dh-help{flex:1 1 240px}
.dh-bracket{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(136px,1fr);gap:10px;overflow-x:auto;padding-bottom:4px}
.dh-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.dh-colh{margin:0;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.dh-pair{display:grid;gap:4px;padding:4px 0 4px 6px;border-left:2px solid var(--soft);transition:border-color .25s ease}
.dh-pair.is-live{border-color:var(--accent)}
.dh-chip{padding:7px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;transition:background .25s ease,border-color .25s ease,color .25s ease}
.dh-chip.is-tbd{color:var(--muted);border-style:dashed;text-align:center}
.dh-chip.is-live{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}
.dh-chip.is-out{color:var(--muted);text-decoration:line-through;opacity:.7}
.dh-chip.is-win{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.dh-chip small{display:block;font-size:10.5px;font-weight:600;opacity:.8}
@media (prefers-reduced-motion:reduce){
  .dh-result.is-pop b{animation:none}
  .dh-stats .bar b,.dh-card,.dh-chip,.dh-pair,.dh-reel-line,.dh-reel-line::before,.dh-reel-line::after{transition:none}
  .dh-card:hover{transform:none}
}
@container dh (max-width:720px){
  .dh-grid{display:flex;flex-direction:column}
  .dh-stage{border-right:0;border-bottom:1px solid var(--soft)}
}
@container dh (max-width:420px){
  .dh-top,.dh-stage,.dh-set,.dh-box{padding-left:12px;padding-right:12px}
  .dh-stats li{grid-template-columns:minmax(0,96px) minmax(0,1fr) auto}
  .dh-match{grid-template-columns:minmax(0,1fr)}
  .dh-vs{justify-self:center}
}