/* =========================================================
   방송 콘솔 (#/studio) — 운영자 화면
   ========================================================= */
.st { max-width: 1720px; margin: 0 auto; padding: 0 20px 90px; }
.st kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font: 700 13px/1 var(--f-cond); letter-spacing: .04em; color: var(--ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .16); vertical-align: middle; }
.st .btn-volt kbd { color: var(--volt-ink); background: rgba(0, 0, 0, .1); box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .2); }

/* 상단 바 */
.st-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin: 0 -20px; padding: 12px 20px; background: rgba(8, 17, 46, .93); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line); }
.st-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.st-brand .logo-mark { width: 22px; height: 30px; }
.st-brand .logo-ko { font-size: 23px; }
.st-title { padding-left: 10px; border-left: 1px solid var(--line-2); font-weight: 800; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.st-ctl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.st-sw { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.st-sw small { color: var(--ink-3); font-weight: 600; }
.st-air b { font: 700 16px/1 var(--f-cond); letter-spacing: .12em; color: var(--ink-3); }
.st-air.on b { color: var(--live); }
.st-air .toggle input:checked + i { background: var(--live); }
.st-view { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.st-view b { font: 700 18px/1 var(--f-cond); color: var(--ink); }
.st-obs { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; min-width: 0; max-width: 640px; margin-left: auto; }
.st-obs-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.st-obs-l .ic { color: var(--volt); }
.st-url { flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: 600 14px var(--f-cond); letter-spacing: .02em; color: var(--ink-2); }
.st-cust { flex: none; }

/* 진행 모드 안내 */
.st-mode { margin: 14px 0; }
.st-mode-in { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 11px 14px; border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.st-mode-in .ic { width: 18px; height: 18px; }
.st-mode-in b { color: var(--ink); }
.st-mode-in.auto { background: rgba(110, 168, 255, .12); box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .32); }
.st-mode-in.auto .ic { color: #6EA8FF; }
.st-mode-in.manual { background: rgba(59, 224, 164, .1); box-shadow: inset 0 0 0 1px rgba(59, 224, 164, .32); }
.st-mode-in.manual .ic { color: var(--ok); }
.st-mode-in.off { background: rgba(255, 61, 90, .12); box-shadow: inset 0 0 0 1px rgba(255, 61, 90, .38); }
.st-mode-in.off .ic { color: var(--live); }

/* 3단 그리드 */
.st-grid { display: grid; gap: 16px; grid-template-columns: 330px minmax(0, 1fr) 380px; grid-template-areas: 'queue main side'; align-items: start; }
.st-main { grid-area: main; min-width: 0; padding: 18px 20px 20px; }
.st-queue { grid-area: queue; position: sticky; top: 76px; display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 92px); }
.st-side { grid-area: side; display: grid; gap: 14px; min-width: 0; }
.st-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-phase { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.st-empty { padding: 12px 4px; color: var(--ink-3); font-size: 13.5px; }

/* 현재 개봉 */
.st-who { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.st-who .av { --s: 54px; font-size: 22px; }
.st-who-t { min-width: 0; }
.st-who-t b { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 20px; font-weight: 900; line-height: 1.3; }
.st-who-t > span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.st-who-t .st-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.st-kw { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 210, 63, .1); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .38); }
.st-kw small { display: block; font-size: 12px; font-weight: 800; color: var(--volt); }
.st-kw b { display: block; margin-top: 2px; font-size: clamp(20px, 2.1vw, 28px); font-weight: 900; line-height: 1.3; color: var(--volt-2); }
.st-prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.st-prog .pack-ct { flex: none; font-size: 18px; }
.st-prog-s { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.st-idle { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; padding: 18px; border-radius: 14px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px var(--line); }
.st-idle > .ic { width: 28px; height: 28px; color: var(--ink-3); }
.st-idle b { font-size: 17px; }
.st-idle p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }

.st-pack { margin-top: 16px; padding: 20px 16px 14px; border-radius: 16px; background: radial-gradient(ellipse 80% 90% at 50% 60%, #17406A, #0A1A30 80%); box-shadow: inset 0 0 0 1px var(--line); }
.st-slots { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 30px); }
.st-slot { position: relative; display: grid; justify-items: center; gap: 9px; }
.st-slot .tcg { --w: clamp(84px, 9vw, 132px); }
.st-slot > span { font: 700 13px/1 var(--f-cond); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.st-slot.is-hit > span { color: var(--volt); }
.st-slot.is-hit .tcg { box-shadow: 0 0 0 3px var(--volt), 0 0 34px rgba(255, 210, 63, .55); }
.st-slot.enter .tcg { animation: dealIn .45s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: var(--d, 0ms); }
.st-ghost { opacity: .32; }
.st-pack-cap { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--ink-2); }

.st-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.st-actions .btn { height: 60px; font-size: 17px; }
.st-actions .btn .ic { width: 20px; height: 20px; }

/* 히트 등록 */
.st-hit { margin-top: 20px; }
.st-hit-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.st-hit-h p { margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.st-find { width: 230px; height: 38px; font-size: 13.5px; }
.st-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; max-height: 312px; margin-top: 10px; padding: 2px; overflow-y: auto; scrollbar-width: thin; }
.st-chip { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 9px 11px; border-radius: 12px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, transform .1s; }
.st-chip:hover { background: rgba(255, 255, 255, .09); }
.st-chip:active { transform: scale(.98); }
.st-chip[disabled] { opacity: .38; pointer-events: none; }
.st-chip kbd { grid-row: 1 / 3; }
.st-chip kbd.nokey { visibility: hidden; }
.st-chip .rchip { grid-row: 1 / 3; }
.st-chip b { grid-column: 3; grid-row: 1; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chip .rchip { grid-column: 2; }
.st-chip-no { grid-column: 3; font: 600 12.5px/1.2 var(--f-cond); letter-spacing: .04em; color: var(--ink-3); }
.st-chip em { grid-column: 4; grid-row: 1 / 3; font: 700 14px/1 var(--f-cond); font-style: normal; color: var(--ink-2); }
.st-r-SAR, .st-r-MUR { box-shadow: inset 0 0 0 1px rgba(255, 122, 198, .5); }
.st-r-UR { box-shadow: inset 0 0 0 1px rgba(232, 182, 76, .55); }

/* 이번 주문 기록 */
.st-res { margin-top: 18px; }
.st-res-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.st-res-h span { font-size: 13px; color: var(--ink-3); }
.st-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 6px; scrollbar-width: thin; }
.st-strip .st-empty { padding: 4px 2px; }
.st-rp { flex: none; display: grid; gap: 5px; padding: 7px; border-radius: 10px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px var(--line); }
.st-rp.hit { border: 1.5px solid transparent; box-shadow: none; background: linear-gradient(rgba(10, 20, 56, .95), rgba(10, 20, 56, .95)) padding-box, var(--holo) border-box; }
.st-rp > span { font: 700 12px/1 var(--f-cond); letter-spacing: .08em; color: var(--ink-3); }
.st-rp > div { display: flex; gap: 4px; }
.st-rp .tcg { --w: 34px; box-shadow: none; }
.st-keys { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.st-keys > .ic { width: 18px; height: 18px; }
.st-keys span { display: inline-flex; align-items: center; gap: 6px; }

/* 대기열 */
.st-queue .st-h { padding: 16px 16px 10px; flex: none; }
.st-qsum { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.st-qlist { flex: 1; min-height: 0; display: grid; align-content: start; gap: 6px; padding: 0 10px 12px; overflow-y: auto; scrollbar-width: thin; }
.st-q { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); }
.st-q.first { background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-q.mine { background: rgba(255, 210, 63, .09); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .42); }
.st-qn { font: 700 20px/34px var(--f-cond); color: var(--ink-3); text-align: center; }
.st-q.first .st-qn { color: var(--volt); }
.st-qt { min-width: 0; }
.st-qt b { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 14px; }
.st-qt > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.st-qkw { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--volt-2); }
.st-qr { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.st-done { flex: none; padding: 10px 10px 12px; border-top: 1px solid var(--line); }
.st-done-h { padding: 0 4px 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
.st-dn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%; padding: 7px 6px; border-radius: 9px; text-align: left; font-size: 13px; }
.st-dn:hover { background: rgba(255, 255, 255, .06); }
.st-dn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dn b { font: 700 13px var(--f-cond); color: var(--ink-2); }
.st-dn time { font: 600 12.5px var(--f-cond); color: var(--ink-4); }

/* 오른쪽 박스 */
.st-box { padding: 14px 16px 16px; }
.st-box .st-h h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; }
.st-box .st-h h3 .ic { color: var(--volt); }
.st-box .more .ic { width: 14px; height: 14px; margin-left: 3px; }
.st-form { display: grid; gap: 10px; margin-top: 12px; }
.st-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-form .field > .lbl { font-size: 12px; }
.st-form .input, .st-row .input { height: 40px; padding: 0 10px; font-size: 14px; }
.st-side select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; background: rgba(0, 0, 0, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4BFE2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.st-side select.input option { background: var(--n-850); color: var(--ink); }
.st-dl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-dl-prev { font-size: 13px; color: var(--ink-2); }
.st-dl-prev b { color: var(--volt); }
.st-row { margin-top: 12px; }
.st-presets { margin-top: 8px; }
.st-live-box { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.st-lb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-lb-h > b { font: 700 22px/1 var(--f-cond); letter-spacing: .03em; }
.st-live-box .deal-bar i { background: var(--live); }
.st-nt b { font-size: 15px; }
.st-note { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.st-pred-bar { height: 8px; border-radius: 4px; overflow: hidden; background: #FF7A8E; }
.st-pred-bar i { display: block; height: 100%; background: #6EA8FF; }
.st-pred-l { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.st-gauge { margin-top: 12px; }
.st-ovp { position: relative; aspect-ratio: 16 / 9; margin-top: 12px; overflow: hidden; border-radius: 12px; background: #02050F; box-shadow: inset 0 0 0 1px var(--line); }
.st-ovp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.st-log { display: grid; max-height: 330px; margin-top: 10px; overflow-y: auto; scrollbar-width: thin; }
.st-lg { display: grid; grid-template-columns: 58px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 2px; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 13px; }
.st-lg:first-child { border-top: 0; }
.st-lg time { font: 600 13px/1 var(--f-cond); letter-spacing: .02em; color: var(--ink-3); }
.st-tpl { padding: 2px 7px; border-radius: 5px; background: rgba(254, 229, 0, .14); color: #FEE500; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.st-lg b { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ph { margin-left: 6px; font: 600 12.5px var(--f-cond); color: var(--ink-4); }
.st-lg em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ok); white-space: nowrap; }

/* 반응형 */
@media (max-width: 1279px) {
  .st-obs-l span { display: none; }
  .st-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'main main' 'queue side'; }
  .st-queue { position: static; max-height: 720px; }
}
@media (max-width: 760px) {
  .st { padding: 0 14px 96px; }
  .st-bar { position: static; margin: 0 -14px; padding: 10px 14px; gap: 10px 14px; }
  .st-cust { order: 1; margin-left: auto; }
  .st-ctl { order: 2; flex-basis: 100%; gap: 10px 16px; }
  .st-obs { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .st-obs-l span { display: none; }
  .st-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main' 'queue' 'side'; }
  .st-main { padding: 14px 14px 16px; }
  .st-actions { grid-template-columns: minmax(0, 1fr); }
  .st-actions .btn { height: 56px; }
  .st-find { width: 100%; }
  .st-chips { grid-template-columns: minmax(0, 1fr); }
  .st-prog { flex-wrap: wrap; }
  .st-prog .tk-bar { flex-basis: 100%; order: 3; }
  .st-form-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: none) {
  .st-keys { display: none; }
}