/* 저글링 — 영상(PixelJugglingV1)의 남색 모눈·알약 칩·외곽선 자막을 화면 해상도로. 전부 .exp-jug 아래로 범위를 좁힘. */
.exp-jug { --jgold: #ffd23f; --jcyan: #46c6ff; --jred: #ff6b5b; --jgreen: #5be3a0; --jsub: #8fa0c8; --jpanel: #070a14; }
.exp-jug .lab { display: grid; grid-template-columns: 960px 300px; gap: 20px; align-items: start; }
.exp-jug .left { min-width: 0; }
.exp-jug .stage-box { position: relative; width: 960px; height: 540px; background: #0b1020; overflow: hidden; box-shadow: 0 0 0 4px #000, 0 0 0 8px #3a4870, 8px 8px 0 8px #000; }
.exp-jug canvas#stage { width: 960px; height: 540px; image-rendering: pixelated; display: block; }

/* 영상 Chip: 알약 모양, 바탕 #070a14 */
.exp-jug .jchip { position: absolute; font-weight: 700; font-size: 15px; color: var(--text); background: var(--jpanel); border-radius: 999px; padding: 5px 14px; white-space: nowrap; line-height: 1.2; box-shadow: 0 0 0 2px #1b2745; }
.exp-jug .jchip.gold { color: var(--jgold); }
.exp-jug .jchip.key b { color: var(--jgold); font-size: 17px; }
.exp-jug .jchip .bad, .exp-jug .bad { color: var(--jred); }
.exp-jug #ov { position: absolute; inset: 0; pointer-events: none; }
/* 영상 Label: 굵은 외곽선 글자를 그림 위에 직접 */
.exp-jug .jl { position: absolute; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--jsub); -webkit-text-stroke: 5px #000; paint-order: stroke fill; transform: translate(-50%, -100%); }
.exp-jug .jl.tick { transform: translate(0, -50%); font-size: 12px; -webkit-text-stroke: 4px #000; color: #6f82b4; }
.exp-jug .jl.ref { color: var(--jsub); font-size: 13px; }
.exp-jug .jl.peak { color: var(--jgold); transform: translate(0, -100%); font-size: 14px; }
.exp-jug .jbig { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); font-size: 128px; font-weight: 700; line-height: 1; color: var(--jred); -webkit-text-stroke: 14px #000; paint-order: stroke fill; pointer-events: none; }
.exp-jug .jbig[hidden] { display: none; }
.exp-jug .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(rgba(7,10,20,0), rgba(7,10,20,.5) 40%, rgba(7,10,20,.5) 78%, rgba(7,10,20,.35)); pointer-events: none; }
.exp-jug .caption { position: absolute; left: 70px; right: 70px; bottom: 18px; text-align: center; font-weight: 700; font-size: 25px; line-height: 1.38; color: var(--text); -webkit-text-stroke: 6px #000; paint-order: stroke fill; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.85)); min-height: 2.76em; }
.exp-jug .caption b { color: var(--jgold); }
.exp-jug .title-card { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; background: rgba(7,10,20,.45); animation: jtitleOut .4s steps(4) 2.6s forwards; }
.exp-jug .title-card div { font-weight: 700; font-size: 54px; line-height: 1.3; -webkit-text-stroke: 9px #000; paint-order: stroke fill; filter: drop-shadow(5px 5px 0 #000); animation: jtitleIn .5s steps(5) both; }
.exp-jug .title-card em { font-style: normal; color: var(--jgold); }
@keyframes jtitleIn { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jtitleOut { to { opacity: 0; visibility: hidden; } }

/* 정리 칸 */
.exp-jug .calc { margin-top: 22px; padding: 14px 20px 16px; }
.exp-jug .calc h2 { margin: 0 0 10px; font-size: 18px; }
.exp-jug .calc h2 small { font-size: 14px; color: var(--jsub); font-weight: 400; margin-left: 8px; }
.exp-jug .eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-weight: 700; font-size: 28px; line-height: 1.3; }
.exp-jug .eq .op { color: var(--jsub); }
.exp-jug .eq b { font-size: 30px; }
.exp-jug .eq .c-f { color: var(--jcyan); } .exp-jug .eq .c-d { color: var(--jgreen); } .exp-jug .eq .c-h { color: var(--jgold); }
.exp-jug .eq .c-v { color: var(--jcyan); } .exp-jug .eq .c-n { color: var(--jgold); } .exp-jug .eq b.bad { color: var(--jred); }
.exp-jug .eq .ans { color: var(--jsub); font-size: 16px; font-weight: 400; }
.exp-jug .verdict { margin-top: 10px; font-family: var(--read); font-size: 15px; line-height: 1.6; color: #d6deef; }
.exp-jug .verdict.no { color: #ffd2cb; }
.exp-jug .verdict b.okc { color: var(--jgreen); } .exp-jug .verdict b.badc { color: var(--jred); }
.exp-jug .rows { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px; }
.exp-jug .rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #2c3a5c; font-size: 14px; }
.exp-jug .rows dt { color: var(--jsub); margin: 0; } .exp-jug .rows dt small { font-size: 11px; opacity: .8; }
.exp-jug .rows dd { margin: 0; font-weight: 700; white-space: nowrap; }
.exp-jug .rows .hl dd { color: var(--jgold); font-size: 17px; }
.exp-jug .rows dd.bad { color: var(--jred); }

/* 조건 패널 */
.exp-jug .panel { width: 300px; min-width: 0; padding: 14px 16px 18px; }
.exp-jug .panel h2 { margin: 0 0 8px; font-size: 18px; text-align: center; }
.exp-jug .param { margin: 4px 0 14px; }
.exp-jug .param[hidden] { display: none; }
.exp-jug .param .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.exp-jug .param label { font-size: 16px; font-weight: 700; }
.exp-jug .param label .lsub { display: block; font-size: 11px; font-weight: 400; color: var(--jsub); line-height: 1.3; }
.exp-jug .param .help { font-family: var(--read); font-size: 12px; color: var(--sub); margin: 3px 0 6px; line-height: 1.45; }
.exp-jug .param .val { display: flex; align-items: center; gap: 3px; }
.exp-jug .param input[type=number], .exp-jug .param input[type=text] { width: 70px; height: 34px; font: 700 16px "Galmuri11", sans-serif; text-align: right; color: var(--jgold); background: #070a14; border: 2px solid #3a4870; padding: 0 6px; }
.exp-jug .param input[type=text] { width: 120px; text-align: left; letter-spacing: 1px; }
.exp-jug .param input:disabled { opacity: .45; }
.exp-jug .param input.bad { border-color: var(--jred); }
.exp-jug .param .unit { color: var(--jgold); font-weight: 700; }
.exp-jug .param input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
.exp-jug .param input[type=range]:disabled { opacity: .4; cursor: default; }
.exp-jug .param input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #070a14; border: 2px solid #3a4870; }
.exp-jug .param input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 26px; margin-top: -10px; background: var(--jgold); border: 3px solid #6e5414; box-shadow: 2px 2px 0 #000; }
.exp-jug .param input[type=range]::-moz-range-track { height: 10px; background: #070a14; border: 2px solid #3a4870; }
.exp-jug .param input[type=range]::-moz-range-thumb { width: 18px; height: 24px; background: var(--jgold); border: 3px solid #6e5414; border-radius: 0; }
.exp-jug .param input:focus-visible, .exp-jug button:focus-visible { outline: 3px solid var(--jcyan); outline-offset: 2px; }
.exp-jug .ferr { font-family: var(--read); font-size: 12px; color: var(--jred); line-height: 1.45; }
.exp-jug .ferr:empty { display: none; }
.exp-jug .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-jug .presets button, .exp-jug .seg button { font: 700 13px "Galmuri11", sans-serif; color: var(--text); background: #141c33; border: 2px solid #3a4870; padding: 5px 8px; min-height: 34px; min-width: 34px; cursor: pointer; }
.exp-jug .presets button:disabled { opacity: .4; cursor: default; }
.exp-jug .presets button[aria-pressed=true], .exp-jug .seg button[aria-pressed=true] { color: #1a1406; background: var(--jgold); border-color: #c99a1e; }
.exp-jug .presets button small, .exp-jug .seg button small { font-size: 10px; opacity: .8; }
.exp-jug .seg { display: flex; gap: 0; }
.exp-jug .seg button { flex: 1; padding: 5px 4px; }
.exp-jug .hint { font-family: var(--read); font-size: 12px; color: var(--sub); text-align: center; margin-top: 8px; }
.exp-jug .btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.exp-jug button.chipbtn { cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text); background: #1a2440; border: 3px solid #3a4870; box-shadow: inset 0 3px 0 #2c3a5c, 3px 3px 0 #000; padding: 8px 12px; min-height: 44px; }
.exp-jug button.chipbtn.go { color: #1a1406; background: var(--jgold); border-color: #c99a1e; box-shadow: inset 0 3px 0 #ffe07a, 3px 3px 0 #000; }
.exp-jug button.chipbtn[aria-pressed=true]:not(.go) { color: var(--jgold); border-color: var(--jgold); }
.exp-jug button.chipbtn:active { transform: translate(2px, 2px); box-shadow: inset 0 3px 0 #2c3a5c, 1px 1px 0 #000; }
.exp-jug .save { width: 100%; }
.exp-jug .hud-m { display: none; }

@media (max-width: 1340px) {
  .exp-jug .lab { grid-template-columns: minmax(0, 1fr); }
  .exp-jug .panel { width: auto; max-width: 560px; }
  .exp-jug .stage-wrap { width: 100%; aspect-ratio: 16 / 9; position: relative; }
  .exp-jug .stage-box { transform-origin: 0 0; transform: scale(var(--k, 1)); position: absolute; }
}
@media (max-width: 700px) {
  /* 무대 위 작은 글자는 무대 밖(아래 HUD)으로 뺀다. 남기는 건 11px 이상으로 보이게 키운 자막·제목뿐 */
  .exp-jug .jchip, .exp-jug #ov { display: none; }
  .exp-jug .stage-wrap { aspect-ratio: 4 / 5; }
  .exp-jug .stage-box.portrait { width: 480px; height: 600px; }
  .exp-jug .stage-box.portrait canvas#stage { width: 480px; height: 600px; }
  .exp-jug .caption { font-size: 25px; left: 16px; right: 16px; bottom: 16px; }
  .exp-jug .title-card div { font-size: 40px; }
  .exp-jug .jbig { font-size: 110px; top: 20%; }
  .exp-jug .shade { height: 140px; }
  .exp-jug .hud-m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .exp-jug .hud-m .hc { background: var(--jpanel); border-radius: 12px; padding: 6px 4px; text-align: center; box-shadow: 0 0 0 2px #1b2745; min-width: 0; }
  .exp-jug .hud-m .hc span { display: block; font-size: 12px; color: var(--jsub); }
  .exp-jug .hud-m .hc b { display: block; font-size: 19px; color: var(--jgold); white-space: nowrap; }
  .exp-jug .hud-m .hc b.bad { color: var(--jred); }
  .exp-jug .calc { padding: 12px 14px 14px; }
  .exp-jug .eq { font-size: 20px; gap: 4px 8px; } .exp-jug .eq b { font-size: 22px; }
  .exp-jug .rows { grid-template-columns: 1fr; }
}