/* 마법 시전 장면 TV: 마법 도감(/spells) · 직업 공략 마법 탭에서만 불러옴 (예전엔 dnd2.css 에 있어 모든 화면이 받았음). 색 변수 --tv-* 는 dnd2.css :root */
/* ===== 마법 시전 장면 TV: 마법 도감(/spells) · 직업 공략 마법 탭의 시전 장면 창 공용 (그리기는 js/spell-tv.js) ===== */
@keyframes sp-blink { 50% { opacity: 0; } }
.sp-tv { padding: 18px 18px var(--sp-2); background: linear-gradient(180deg, var(--tv-body), var(--tv-body-lo)); border: 1px solid var(--tv-line); border-radius: 26px; box-shadow: var(--shadow-hover); }
.sp-tv__foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 6px 2px; font-family: 'Bebas Neue', var(--font-display); font-size: var(--fs-md); letter-spacing: var(--ls-caps); color: var(--muted); }
.sp-tv__foot span:last-child, .sp-tv__name { margin-left: auto; }
/* 효과음 (마법 도감만, js/spells.js): TV 아래 오른쪽 스피커(끄기/켜기) + 크기 막대. 콤보 영상 소리 조절(.cx-vol)과 같은 모양을 TV 몸체 색으로 */
.sp-vol { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.sp-vol:empty { display: none; }
.sp-vol__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.sp-vol__btn:hover { color: var(--text); }
.sp-vol__btn[aria-pressed="true"] { color: var(--muted); opacity: .7; }
.sp-vol__btn svg { width: 20px; height: 20px; }
.sp-vol__btn:focus-visible, .sp-vol__bar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
.sp-vol__bar { width: 88px; height: 4px; margin: 0 8px 0 0; border-radius: 2px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--tv-led) var(--p, 50%), var(--tv-line) var(--p, 50%)); cursor: pointer; }
.sp-vol__bar::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--tv-body); }
.sp-vol__bar::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--text); }
@media (max-width: 420px) { .sp-tv__name { display: none; } .sp-vol { margin-left: auto; } }
/* 장면 고르기: 화면 왼쪽 위 옛 TV 메뉴(OSD) 초록 글씨, 고른 줄 앞에 ▶ 깜빡임 (장면이 둘 이상인 주문만, docs/scene-sian 시안 E) */
.sp-osd { position: absolute; left: 14px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 6px 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(var(--tv-led-rgb), .28); border-radius: 10px; box-shadow: 0 0 10px rgba(var(--tv-led-rgb), .12), inset 0 0 8px rgba(var(--tv-led-rgb), .06); }
.sp-osd button { display: flex; align-items: center; gap: 6px; padding: 1px 4px; font-family: 'Bebas Neue', var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: rgba(var(--tv-led-rgb), .55); text-align: left; text-shadow: 0 0 6px rgba(var(--tv-led-rgb), .4); background: none; border: 0; cursor: pointer; }
.sp-osd button span { font-family: var(--font); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0; }
.sp-osd button::before { content: '▶'; font-size: 10px; color: transparent; text-shadow: none; }
.sp-osd button:hover { color: rgba(var(--tv-led-rgb), .85); }
.sp-osd button[aria-pressed="true"] { color: var(--tv-led); }
.sp-osd button[aria-pressed="true"]::before { color: var(--tv-led); text-shadow: inherit; animation: sp-blink .8s steps(2) infinite; }
.sp-led { width: 9px; height: 9px; border-radius: 50%; background: var(--tv-led); box-shadow: 0 0 8px var(--tv-led); }
/* 브라운관: 둥근 유리 · 가장자리 어둡게 · 주사선 · 유리 반사 · 주문을 바꾸면 켜지듯 펴짐 */
.sp-crt { position: relative; display: grid; place-items: center; min-height: 300px; padding: 26px 22px; overflow: hidden; border-radius: 30px / 22px; background: radial-gradient(120% 120% at 50% 50%, var(--tv-glass-hi) 0%, var(--tv-glass) 70%); box-shadow: inset 0 0 90px var(--tv-glass), 0 0 0 4px var(--art-bg-deep); }
/* 시전 장면 무대 (js fitStage 가 높이 · 그림 위치 · 크기를 정함): 모든 장면 같은 배율, 발끝을 같은 줄에 */
.sp-crt.staged { display: block; min-height: 0; padding: 0; }
.sp-crt img.sp-anim { position: absolute; max-width: none; max-height: none; height: auto; }
/* 동영상 장면(효과음 든 mp4, spell-tv.js): 검은 바탕을 비치게(screen) 해 그림 장면과 똑같이 */
.sp-crt video.sp-anim { position: absolute; z-index: 1; max-width: none; height: auto; image-rendering: pixelated; mix-blend-mode: screen; animation: sp-on .45s ease-out; }
.sp-crt img { color: transparent; font-size: 0; } /* 그림이 읽히기 전 폰 브라우저가 대체 글자(alt '… 시전 장면')를 하얗게 먼저 찍던 것. 화면 읽기용 alt 는 그대로 */
.sp-crt img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 360px; object-fit: contain; image-rendering: pixelated; animation: sp-on .45s ease-out; }
/* 장면 반복(spell-tv.js play): 바퀴마다 다시 넣은 그림은 켜짐 효과 없이, 다시 넣는 한 박자 동안은 캔버스(.sp-anim-ph)가 옛 그림 대신 */
.sp-crt img.sp-again, .sp-crt .sp-anim-ph { animation: none; }
.sp-crt .sp-anim-ph { position: absolute; z-index: 1; height: auto; image-rendering: pixelated; }
.sp-crt::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, var(--tv-glass) 110%); }
.sp-crt::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(165deg, var(--tv-glare) 0%, transparent 30%); animation: sp-flicker 7s infinite; }
@keyframes sp-on { 0% { transform: scaleY(.03); filter: brightness(3) saturate(0); } 70% { transform: scaleY(1); filter: brightness(1.4); } 100% { transform: none; } }
@keyframes sp-flicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; } 98% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sp-crt img, .sp-crt video, .sp-crt::after, .sp-osd button::before { animation: none; } }