/* 17-4 자율 대전 UI(ds 8-7): 진행 스위치 · 멈추기 · 해설 티커 · 다음 행동 예고 · 관전 결과 */
.auto-wrap{display:flex;align-items:center;min-width:0;padding:4px 0}
.auto-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 14px 4px 4px;border:0;border-radius:var(--ui-r-pill);background:none;color:var(--ui-ink-strong);font:inherit;text-align:left;cursor:pointer}
.auto-toggle:focus-visible{outline:3px solid var(--ui-ink-strong);outline-offset:2px}
.auto-toggle:disabled{cursor:not-allowed;opacity:.7}
.auto-track{position:relative;flex:none;box-sizing:border-box;width:52px;height:32px;border-radius:var(--ui-r-pill);border:2px solid var(--ui-line);background:var(--ui-panel-sunk)}
.auto-track i{position:absolute;top:1px;left:1px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 0 var(--ui-step-color);transition:transform 120ms var(--ui-ease-out)}
.auto-toggle[aria-checked=true] .auto-track{background:var(--ui-leaf);border-color:var(--ui-leaf-step)}
.auto-toggle[aria-checked=true] .auto-track i{transform:translateX(20px);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b2c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.auto-text strong{display:block;font-size:15px;font-weight:900;line-height:1.25}
.auto-text small{display:block;font-size:12px;font-weight:800;line-height:1.3;color:var(--ui-ink-soft)}
/* 자율 진행 중: 명령 4버튼 자리 = [멈추기][해설][다음 행동] */
#battle-view[data-auto] .skill-buttons{display:none}
.auto-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px}
.auto-stop{--step:4px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:48px;padding:0 18px;border:3px solid var(--ui-rim);border-radius:var(--ui-r-pill);background:#cfe9fb;box-shadow:0 var(--step) 0 var(--ui-sky-step);color:var(--ui-ink-strong);font:inherit;font-size:17px;font-weight:900;white-space:nowrap;cursor:pointer;transition:transform var(--ui-t-release) var(--ui-ease-out),box-shadow var(--ui-t-release) var(--ui-ease-out)}
.auto-stop svg{width:20px;height:20px;flex:none}
.auto-stop:active{transform:translateY(2px);--step:2px}
@media(hover:hover){.auto-stop:not([data-state=stopping]):hover{transform:translateY(-2px);--step:6px}}
.auto-stop[data-state=stopping]{--step:0px;opacity:.8;cursor:default;font-size:15px}
.auto-stop:focus-visible{outline:3px solid var(--ui-ink-strong);outline-offset:3px}
.commentary{position:relative;display:flex;align-items:center;box-sizing:border-box;min-width:0;min-height:64px;padding:14px 14px 10px;border:2px solid var(--ui-line);border-radius:16px;background:#fff}
.commentary-tab{position:absolute;top:0;left:14px;transform:translateY(-50%);display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--ui-r-pill);background:var(--ui-leaf);color:var(--ui-ink-strong);font-size:11px;font-weight:900}
.commentary-line{margin:0;min-width:0;font-size:16px;font-weight:800;line-height:1.4;color:var(--ui-ink-strong);word-break:keep-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.auto-next-move{--c:var(--ui-leaf);--c-deep:var(--ui-leaf-deep);--c-tint:var(--ui-leaf-tint);display:flex;align-items:center;gap:8px;min-width:0}
.auto-next-move[data-action=guard]{--c:var(--ui-sky);--c-deep:var(--ui-sky-deep);--c-tint:var(--ui-sky-tint)}
.auto-next-move[data-action=evade]{--c:var(--ui-sun);--c-deep:var(--ui-sun-deep);--c-tint:var(--ui-sun-tint)}
.auto-next-move[data-action=special]{--c:var(--ui-berry);--c-deep:var(--ui-berry-deep);--c-tint:var(--ui-berry-tint)}
.auto-next-icon{flex:none;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border-radius:50%;border:3px solid var(--ui-mine-edge);background:var(--c-tint);color:var(--c-deep)}
.auto-next-icon::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ia) center/contain no-repeat;mask:var(--ia) center/contain no-repeat}
.auto-next-icon[data-action=attack]{--ia:var(--ic-attack)}.auto-next-icon[data-action=guard]{--ia:var(--ic-guard)}.auto-next-icon[data-action=evade]{--ia:var(--ic-evade)}.auto-next-icon[data-action=special]{--ia:var(--ic-special)}
.auto-next-text{display:grid;line-height:1.2}
.auto-next-text small{font-size:11px;font-weight:800;color:var(--ui-ink-soft)}
.auto-next-text b{font-size:15px;font-weight:900;color:var(--ui-ink-strong);white-space:nowrap}
/* 8-7-4 관전 결과: 별 스탬프 자리 알약 + 다음 판 카운트다운 */
.watch-pill{display:none}
#battle-result[data-watch] .watch-pill{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;box-sizing:border-box;height:40px;margin:4px auto 14px;padding:0 16px;border:2px dashed var(--ui-sky);border-radius:var(--ui-r-pill);background:var(--ui-sky-tint);color:var(--ui-sky-deep);font-size:15px;font-weight:900}
.watch-pill svg{width:18px;height:18px;flex:none}
.auto-countdown{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;margin-top:16px;text-align:left}
.auto-count-text{font-size:14px;font-weight:800;color:var(--ui-ink-soft)}
.auto-count-text b{font-variant-numeric:tabular-nums;color:var(--ui-ink-strong)}
.auto-count-bar{grid-column:1/-1;display:block;height:6px;border-radius:var(--ui-r-pill);background:var(--ui-panel-sunk);overflow:hidden}
.auto-count-bar>i{display:block;width:100%;height:100%;background:var(--ui-leaf)}
@media(max-width:540px){
  .auto-panel{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .auto-panel .commentary{grid-column:1/-1;grid-row:1;min-height:56px}
  .auto-panel .auto-stop{grid-row:2;min-height:44px}
  .auto-panel .auto-next-move{grid-row:2}
  .commentary-line{font-size:14px}
  .auto-toggle{padding-right:8px}
  #battle-result[data-watch] .watch-pill{height:36px;font-size:13px}
}
/* 방송 슬림 바(77,941 1366×96): [멈추기 150×74] 16 [해설 32px 최대 2줄] 16 [예고 180×74] */
body[data-broadcast] .auto-panel{position:absolute;left:77px;top:941px;width:1366px;height:96px;box-sizing:border-box;margin:0;padding:8px 12px;grid-template-columns:150px minmax(0,1fr) 180px;gap:16px;background:var(--ui-panel-hud);border:3px solid var(--ui-rim);border-radius:24px;box-shadow:0 4px 0 var(--ui-step-color)}
body[data-broadcast] .auto-panel .auto-stop{width:150px;height:74px;padding:0 10px;font-size:26px;gap:8px}
body[data-broadcast] .auto-panel .auto-stop svg{width:32px;height:32px}
body[data-broadcast] .auto-panel .auto-stop[data-state=stopping]{font-size:22px}
body[data-broadcast] .auto-panel .commentary{position:static;min-height:0;height:74px;padding:0;border:0;background:none}
body[data-broadcast] .auto-panel .commentary-tab{top:0;left:192px;height:28px;padding:0 12px;font-size:20px}
body[data-broadcast] .auto-panel .commentary-line{font-size:32px;line-height:36px}
body[data-broadcast] .auto-panel .auto-next-move{gap:10px}
body[data-broadcast] .auto-panel .auto-next-icon{width:64px;height:64px}
body[data-broadcast] .auto-panel .auto-next-icon::before{width:34px;height:34px}
body[data-broadcast] .auto-panel .auto-next-text small{font-size:20px}
body[data-broadcast] .auto-panel .auto-next-text b{font-size:26px}
@media(prefers-reduced-motion:reduce){.auto-track i,.auto-stop{transition:none}.auto-stop:is(:hover,:active){transform:none}.auto-count-bar{display:none}}