/* 버스 몰림 — 시안 스타일을 사이트 안으로. 사이트 공용 클래스(.btn .px-box 등)와 겹치는 이름은 .exp-bus 아래로 좁힘 */
.exp-bus { --red: #ff6b5b; --gold: #ffd23f; --cyan: #46c6ff; --chip: #141b30; --sub: #a9b6d6; }
.exp-bus * { box-sizing: border-box; }
.exp-bus .lab { display: grid; grid-template-columns: 960px 300px; gap: 20px; align-items: start; }
.exp-bus .main { min-width: 0; }
.exp-bus .stage-wrap { position: relative; width: 960px; height: 540px; }
.exp-bus .stage-box { position: absolute; left: 0; top: 0; width: 960px; height: 540px; overflow: hidden; background: #0b1020; transform-origin: 0 0; transform: scale(var(--k, 1));
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #2a3350;
  background-image: linear-gradient(#16203a 2px, transparent 2px), linear-gradient(90deg, #16203a 2px, transparent 2px); background-size: 20px 20px; }
.exp-bus canvas#stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; cursor: default; touch-action: manipulation; }
.exp-bus canvas#stage.hit { cursor: pointer; }
.exp-bus canvas#stage:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

/* 영상 layoutWide HUD 칩(1920 기준 36px → 18px, 모서리를 깎은 알약) */
.exp-bus .chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--text); background: var(--chip); padding: 3px 8px; white-space: nowrap;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px); }
.exp-bus .chip.gold { color: var(--gold); } .exp-bus .chip.cyanbg { background: var(--cyan); color: #0b1020; } .exp-bus .chip.red { background: var(--red); color: #0b1020; } .exp-bus .chip.goldbg { background: var(--gold); color: #0b1020; }
.exp-bus .chip em { font-style: normal; color: var(--cyan); }
/* 무대를 줄여 보여 줄 때도 글자는 실제 12px 밑으로 내려가지 않게 (--k = 무대 축소 비율) */
.exp-bus .chip.sm { font-size: max(13px, calc(12px / var(--k, 1))); padding: 2px 6px; }
.exp-bus #hud-tl { position: absolute; left: 50px; top: 30px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; width: 380px; }
.exp-bus #hud-tr { position: absolute; right: 60px; top: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.exp-bus #hud-tr .row { display: flex; gap: 7px; }
.exp-bus #mini { width: 224px; height: 32px; image-rendering: pixelated; display: block; }
.exp-bus #tags .tag, .exp-bus #lbls .lb { position: absolute; pointer-events: none; }
.exp-bus #tags .tag { transform: translate(-50%, -100%); }
.exp-bus #tags .tag.sel { outline: 2px solid var(--gold); }
.exp-bus #lbls .lb { transform: translateX(-50%); font-size: 24px; padding: 5px 12px; }
.exp-bus #lbls .lb.sm { font-size: max(13px, calc(12px / var(--k, 1))); padding: 2px 6px; }
.exp-bus #split { position: absolute; left: 477px; top: 27px; width: 6px; height: 486px; background: repeating-linear-gradient(var(--gold) 0 8px, transparent 8px 12px); display: none; pointer-events: none; }
.exp-bus .caption { position: absolute; left: 105px; right: 105px; bottom: 40px; text-align: center; font-weight: 700; font-size: 30px; line-height: 1.3; color: var(--text); padding: 12px 16px; background: rgba(7,10,20,.5); border-radius: 7px; pointer-events: none; }
.exp-bus .caption span { -webkit-text-stroke: 5.5px #000; paint-order: stroke fill; filter: drop-shadow(2.5px 3px 0 rgba(0,0,0,.85)); }
.exp-bus .caption b { color: var(--gold); }
.exp-bus .title-card { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; background: rgba(7,10,20,.5); animation: busTitleOut .4s steps(4) 2.4s forwards; }
.exp-bus .title-card div { font-weight: 700; font-size: 58px; line-height: 1.25; text-shadow: 5px 5px 0 #000, 0 0 24px rgba(0,0,0,.7); animation: busTitleIn .5s steps(5) both; }
.exp-bus .title-card em { font-style: normal; color: var(--gold); }
@keyframes busTitleIn { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes busTitleOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .exp-bus .title-card, .exp-bus .title-card div { animation: none; } .exp-bus .title-card { display: none; } }

.exp-bus .bar { margin-top: 18px; display: grid; gap: 12px; }
.exp-bus .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exp-bus .scrub { display: flex; align-items: center; gap: 12px; }
.exp-bus .scrub input { flex: 1; min-width: 0; }
.exp-bus .scrub .t { min-width: 112px; text-align: right; color: var(--cyan); font-weight: 700; font-size: 15px; }
.exp-bus .btn[aria-pressed=true] { background: var(--cyan); color: #04211f; }
.exp-bus .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-bus .seg.hold .btn[aria-pressed=true] { background: var(--gold); color: #1a1406; }
.exp-bus .busbtn i { width: 12px; height: 12px; display: inline-block; border: 2px solid #000; }
.exp-bus .busbtn[aria-pressed=true] { background: var(--panel2); color: var(--gold); outline: 2px solid var(--gold); }
.exp-bus .lbl { color: var(--sub); font-size: 13px; width: 100%; }
.exp-bus .hint { font-family: var(--read); font-size: 12px; color: var(--sub); line-height: 1.55; margin-top: 8px; }
.exp-bus .hint.warn { color: #ffd9de; background: #3a1620; padding: 8px 10px; }

.exp-bus .panel { padding: 16px 16px 14px; min-width: 0; }
.exp-bus .panel h2 { margin: 0 0 8px; font-size: 17px; color: var(--gold); }
.exp-bus .param { margin: 0 0 16px; }
.exp-bus .param .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.exp-bus .param label { font-size: 15px; font-weight: 700; }
.exp-bus .param .help { font-family: var(--read); font-size: 12px; color: var(--sub); margin: 2px 0 4px; line-height: 1.45; }
.exp-bus .param .val { display: flex; align-items: center; gap: 3px; }
.exp-bus .param input[type=number] { width: 66px; height: 34px; font: 700 15px var(--pix); text-align: right; color: var(--gold); background: #05070f; border: 2px solid var(--line2); padding: 0 6px; }
.exp-bus .param .unit { color: var(--sub); font-size: 13px; min-width: 26px; }
.exp-bus input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0; }
.exp-bus input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #05070f; border: 2px solid var(--line2); }
.exp-bus input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 26px; margin-top: -11px; background: var(--cyan); border: 3px solid #17506e; box-shadow: 2px 2px 0 #000; }
.exp-bus input[type=range]::-moz-range-track { height: 8px; background: #05070f; border: 2px solid var(--line2); }
.exp-bus input[type=range]::-moz-range-thumb { width: 14px; height: 22px; background: var(--cyan); border: 3px solid #17506e; border-radius: 0; }
.exp-bus input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.exp-bus .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-bus .presets button { font: 700 13px var(--pix); color: var(--text); background: var(--panel2); border: 2px solid var(--line2); padding: 4px 9px; min-height: 34px; cursor: pointer; }
.exp-bus .presets button[aria-pressed=true] { color: #1a1406; background: var(--gold); border-color: #b8921f; }
.exp-bus .presets button small { font-size: 11px; opacity: .85; }
.exp-bus .param.off { opacity: .5; }

.exp-bus .cmpbox { margin-top: 20px; padding: 12px 14px; }
.exp-bus .cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.exp-bus .cmp th, .exp-bus .cmp td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.exp-bus .cmp th:first-child, .exp-bus .cmp td:first-child { text-align: left; color: var(--sub); font-weight: 400; }
.exp-bus .cmp thead th { color: var(--text); font-size: 13px; }
.exp-bus .cmp td b { font-size: 16px; }
.exp-bus .cmp .cur { color: var(--gold); }
.exp-bus .capm, .exp-bus .hud-m { display: none; }

@media (max-width: 1340px) {
  .exp-bus .lab { grid-template-columns: minmax(0, 1fr); }
  .exp-bus .panel { max-width: 560px; width: 100%; }
  .exp-bus .stage-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* 휴대폰: 세로 무대(폭에 맞춰 늘어남) + 무대 위 칩·자막은 무대 아래로. 무대 위에는 12px 이상 글자만 남긴다 */
@media (max-width: 700px) {
  .exp-bus .stage-wrap { aspect-ratio: auto; height: auto; }
  .exp-bus .stage-box { position: relative; width: 100%; height: auto; transform: none; }
  .exp-bus #hud-tl, .exp-bus #hud-tr, .exp-bus #split, .exp-bus .caption, .exp-bus #lbls .lb.opt { display: none !important; }
  .exp-bus #tags .tag.chip, .exp-bus #lbls .lb.chip { font-size: 12px; padding: 2px 6px; }
  .exp-bus .title-card div { font-size: 30px; }
  .exp-bus .capm { display: block; margin-top: 12px; padding: 10px 12px; background: var(--bg2); box-shadow: 0 0 0 2px var(--line); font-weight: 700; font-size: 15px; line-height: 1.5; min-height: 4.2em; }
  .exp-bus .capm b { color: var(--gold); }
  .exp-bus .hud-m { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .exp-bus .hud-m .chip { justify-content: space-between; font-size: 13px; padding: 6px 9px; }
  .exp-bus .hud-m .chip b { font-size: 18px; color: var(--gold); }
  .exp-bus .scrub .t { min-width: 0; font-size: 13px; }
  .exp-bus .scrub { flex-wrap: wrap; }
  .exp-bus .scrub input { order: 3; flex-basis: 100%; }
  .exp-bus .scrub .t { margin-left: auto; }
  .exp-bus .panel { max-width: none; }
  .exp-bus .cmp { font-size: 13px; } .exp-bus .cmp td b { font-size: 15px; }
}