/* 홈(/) 초이스 모니터 섹션 스타일 (2026-11-01) — 모든 규칙을 #choiceSection 안에만 적용해 홈 CSS 와 섞이지 않게 한다.
 * 색·글꼴은 홈 다크 테마를 따른다. 720px 이하 = 폰. 애니메이션 이름은 ch- 로 시작. */
#choiceSection{--bg:#0F172A; --panel:#1E293B; --panel2:#172033; --line:#334155;
  --ink:#E2E8F0; --ink2:#94A3B8; --ink3:#64748B; --accent:#6366F1;
  --top:#F472B6; --star:#818CF8; --yellow:#FACC15;
  --ok:#4ADE80; --warn:#FB923C; --live:#F43F5E;}
#choiceSection *{box-sizing:border-box}
#choiceSection{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif}
#choiceSection .sub{color:var(--ink2);font-size:13px;margin-top:2px}
#choiceSection .head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#choiceSection .phase{display:inline-block;padding:4px 10px;border-radius:99px;font-size:13px;font-weight:600;background:#1e3a2e;color:var(--ok)}
#choiceSection .phase.overtime{background:#3b2a12;color:var(--warn)}
#choiceSection .phase.idle{background:var(--panel);color:var(--ink2)}
#choiceSection .strip{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink2);font-size:13px;margin:6px 0 16px}
#choiceSection .strip b{color:var(--ink);font-weight:600}
#choiceSection .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:5px;vertical-align:1px;animation:ch-blink 1.4s infinite}
@keyframes ch-blink{50%{opacity:.35}}
#choiceSection .search{display:flex;gap:8px;margin-bottom:10px}
#choiceSection .search input{flex:1;min-width:0;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
#choiceSection .search input:focus{outline:2px solid var(--accent);border-color:transparent}
#choiceSection #found{margin-bottom:16px}
#choiceSection .me{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;animation:ch-rise .35s both}
#choiceSection .me .nm{font-weight:700;font-size:16px}
#choiceSection .me .meta{color:var(--ink2);font-size:13px;margin:2px 0 8px}
#choiceSection .needs{display:flex;gap:8px;flex-wrap:wrap}
#choiceSection .need{font-size:13px;padding:4px 9px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
#choiceSection .need.in{border-color:transparent}
#choiceSection .lmline{color:var(--ink2);font-size:12px;margin-top:8px}
#choiceSection .lmline b.ok{color:var(--ok)}
#choiceSection .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
#choiceSection .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;border-top:3px solid var(--c);
      transition:transform .2s, box-shadow .2s;animation:ch-rise .45s both}
#choiceSection .card:hover{transform:translateY(-2px)}
#choiceSection .card.sel{outline:2px solid var(--c)}
#choiceSection .card.pulse{animation:ch-pulse 1.2s ease-out}
@keyframes ch-pulse{0%{box-shadow:0 0 0 0 var(--c)}100%{box-shadow:0 0 0 14px transparent}}
#choiceSection .card .t{font-weight:700;color:var(--c)}
#choiceSection .card .t small{color:var(--ink2);font-weight:400;margin-left:4px}
#choiceSection .card .cut{font-size:26px;font-weight:800;margin:4px 0 0;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
#choiceSection .card .u{color:var(--ink2);font-size:12px}
#choiceSection .card .row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);margin-top:6px}
#choiceSection .card .row b{color:var(--ink);font-variant-numeric:tabular-nums}
#choiceSection .card .row b.upc{color:var(--warn)}
#choiceSection .card .row b.dnc{color:var(--ok)}
#choiceSection .tbl{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#choiceSection .tbl h2{font-size:15px;margin:0;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--c)}
#choiceSection .r{display:grid;grid-template-columns:76px minmax(0,1fr) 112px 104px 128px;align-items:center;position:relative;background:var(--panel);
   border-bottom:1px solid #26334a;font-variant-numeric:tabular-nums}
#choiceSection .r>div{padding:9px 12px;text-align:right;white-space:nowrap;font-size:14px}
#choiceSection .r>div:nth-child(2){text-align:left;white-space:normal}
#choiceSection .r.hd>div{font-size:12px;color:var(--ink3);font-weight:500;padding-top:8px;padding-bottom:8px}
#choiceSection .r.hd{border-bottom:1px solid var(--line)}
#choiceSection .r.out>div{color:var(--ink2)}
#choiceSection .box{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#choiceSection .box.up .r:last-child{border-bottom:0}
#choiceSection .cutbar{display:flex;align-items:center;gap:10px;padding:5px 12px;background:var(--panel2);font-size:12px;font-weight:700;color:var(--c);position:relative;z-index:1}
#choiceSection .cutbar .lm{color:var(--ink2);font-weight:500}
#choiceSection .cutbar::before,#choiceSection .cutbar::after{content:"";flex:1;height:3px;
  background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 18px);background-size:36px 3px;animation:ch-dash 1.6s linear infinite}
@keyframes ch-dash{to{background-position:36px 0}}
#choiceSection .r.bump{animation:ch-bump 1.6s ease-out}
@keyframes ch-bump{0%{background:rgba(74,222,128,.28)}100%{background:transparent}}
#choiceSection .r.enter{animation:ch-fadein .5s both}
@keyframes ch-fadein{from{opacity:0}}
@keyframes ch-rise{from{opacity:0;transform:translateY(8px)}}
#choiceSection .rk{font-weight:700}
#choiceSection .mv{font-size:11px;margin-left:3px}
#choiceSection .mv.up{color:var(--ok)}
#choiceSection .mv.dn{color:var(--ink3)}
#choiceSection .nick{font-weight:600;word-break:break-all}
#choiceSection .live{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--live);border-radius:4px;padding:0 5px;margin-left:5px;vertical-align:1px;
      animation:ch-liveglow 1.8s ease-in-out infinite}
@keyframes ch-liveglow{50%{box-shadow:0 0 0 4px rgba(244,63,94,.25)}}
#choiceSection .plus{position:absolute;right:12px;top:2px;font-size:12px;font-weight:700;color:var(--ok);pointer-events:none;animation:ch-floatup 1.8s ease-out forwards}
@keyframes ch-floatup{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#choiceSection .sus{display:inline-block;font-size:11px;color:var(--warn);border:1px solid #7c4a1e;border-radius:4px;padding:0 4px;margin-left:5px;vertical-align:1px;cursor:help}
#choiceSection .gap.in{color:var(--ok)}
#choiceSection .gap.out{color:var(--warn);font-weight:700}
#choiceSection .tbl{position:relative}
#choiceSection .recenter{position:absolute;right:12px;bottom:12px;z-index:3;font:inherit;font-size:12px;font-weight:600;color:#0F172A;background:var(--c);
  border:0;border-radius:99px;padding:6px 12px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:ch-rise .25s both}
#choiceSection .note{color:var(--ink3);font-size:12px;margin-top:18px;line-height:1.7}
#choiceSection .err{color:var(--warn);font-size:13px}
#choiceSection .m-only{display:none}
@media (max-width:720px){
  #choiceSection .sub{font-size:12px}
  #choiceSection .head{margin-bottom:8px;gap:6px}
  #choiceSection .phase{font-size:12px;padding:3px 9px}
  #choiceSection .strip{font-size:12px;gap:4px 10px;margin:4px 0 10px}
  #choiceSection .d-only{display:none}
  #choiceSection .m-only{display:block;font-size:11px;color:var(--ink3);line-height:1.2}
  #choiceSection .search{margin-bottom:8px}
  #choiceSection .search input{padding:10px 12px;font-size:16px}
  #choiceSection .cards{gap:6px;margin-bottom:10px}
  #choiceSection .card{padding:9px 8px 8px;border-radius:10px}
  #choiceSection .card:hover{transform:none}
  #choiceSection .card .t{font-size:13px}
  #choiceSection .card .t small{display:block;margin:0;font-size:11px}
  #choiceSection .card .cut{font-size:17px;letter-spacing:-.3px;margin-top:2px}
  #choiceSection .card .u,#choiceSection .card .row:not(.keep){display:none}
  #choiceSection .card .row.keep{font-size:11px;margin-top:3px;gap:4px}
  #choiceSection .card .row.keep span{white-space:nowrap}
  #choiceSection .tbl{border-radius:12px}
  #choiceSection .tbl h2{font-size:14px;padding:10px 12px}
  #choiceSection .r{grid-template-columns:46px minmax(0,1fr) 78px 0 84px}
  #choiceSection .r>div{padding:7px 6px;font-size:13px}
  #choiceSection .r>div:first-child{padding-left:10px}
  #choiceSection .r>div:last-child{padding-right:10px}
  #choiceSection .r>div:nth-child(4){display:none}
  #choiceSection .r.hd>div{font-size:11px}
  #choiceSection .r .mv{display:block;margin:0;font-size:10px;line-height:1.1}
  #choiceSection .live{font-size:10px;padding:0 4px;margin-left:4px}
  #choiceSection .sus{font-size:10px;margin-left:4px}
  #choiceSection .cutbar{font-size:11px;padding:5px 10px;gap:6px}
  #choiceSection .recenter{right:10px;bottom:10px}
  #choiceSection .plus{right:8px}
  #choiceSection .me{padding:10px 12px}
  #choiceSection .me .nm{font-size:15px}
  #choiceSection .need{font-size:12px;padding:3px 8px}
  #choiceSection .note{font-size:11px}
}
#choiceSection .modal-box p,#choiceSection .closed,#choiceSection .note,#choiceSection .warnbox,#choiceSection .admin,#choiceSection .sub{word-break:keep-all;overflow-wrap:anywhere}
#choiceSection .home:hover{color:var(--ink2)}
#choiceSection .headr{display:flex;align-items:center;gap:8px}
#choiceSection .lockbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;min-width:32px;padding:0 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink2);cursor:pointer;font:inherit;font-size:12px;font-weight:600}
#choiceSection .lockbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#choiceSection .lockbtn .ic-open{display:none}
#choiceSection .lockbtn.on{color:#0F172A;background:var(--ok);border-color:transparent}
#choiceSection .lockbtn.on .ic-lock{display:none}
#choiceSection .lockbtn.on .ic-open{display:inline}
#choiceSection .lockbtn:focus-visible{outline:2px solid var(--accent)}
#choiceSection .unit{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px;background:var(--panel);color:var(--ink2);border:1px solid var(--line)}
#choiceSection .unit.ls{background:rgba(74,222,128,.14);color:var(--ok);border-color:transparent}
#choiceSection .warnbox{background:#3a1620;border:1px solid #7f1d2d;color:#FDA4AF;font-size:13px;padding:8px 12px;border-radius:10px;margin-bottom:8px}
#choiceSection .warnbox b{color:#fff}
#choiceSection .admin{background:#1f2a4a;border:1px solid #3b4a7a;color:#C7D2FE;font-size:13px;padding:6px 12px;border-radius:10px;margin-bottom:8px}
#choiceSection .closed{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;margin:8px 0 16px;animation:ch-rise .4s both}
#choiceSection .closed .big{font-size:18px;font-weight:700;margin-bottom:6px}
#choiceSection .closed .when{font-size:15px;color:var(--yellow);font-weight:700;margin:10px 0 4px}
#choiceSection .closed .small{color:var(--ink2);font-size:13px}
#choiceSection .modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
#choiceSection .modal[hidden]{display:none}
#choiceSection .modal-bg{position:absolute;inset:0;background:rgba(2,6,23,.66);animation:ch-fadein .2s both}
#choiceSection .modal-box{position:relative;width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);animation:ch-rise .25s both}
#choiceSection .modal-box h3{margin:0 0 6px;font-size:17px}
#choiceSection .modal-box p{margin:0 0 12px;color:var(--ink2);font-size:13px;line-height:1.6}
#choiceSection .modal-box p b{color:var(--ink)}
#choiceSection .modal-box input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
#choiceSection .modal-box input:focus{outline:2px solid var(--accent);border-color:transparent}
#choiceSection .modal-err{min-height:20px;color:var(--warn);font-size:12px;margin:6px 2px 4px}
#choiceSection .modal-btns{display:flex;justify-content:flex-end;gap:8px}
#choiceSection .modal-btns button{font:inherit;font-size:14px;font-weight:700;border:0;border-radius:10px;padding:9px 16px;cursor:pointer;background:var(--accent);color:#fff}
#choiceSection .modal-btns button.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line)}
#choiceSection .modal-btns button:disabled{opacity:.6;cursor:wait}
#choiceSection .shake{animation:ch-shake .35s}
@keyframes ch-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
#choiceSection .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:30;background:#0B1222;border:1px solid var(--line);color:var(--ink);
  font-size:13px;padding:9px 14px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:ch-rise .25s both;white-space:nowrap}
#choiceSection .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
#choiceSection .card{min-width:0;overflow:hidden}
@media (max-width:720px){
  #choiceSection .card .row.keep{flex-wrap:wrap;justify-content:space-between;column-gap:4px}
  #choiceSection .card .row.keep b{margin-left:auto}
  #choiceSection .headr{gap:6px}
  #choiceSection .lockbtn{height:30px;min-width:30px;padding:0 7px}
  #choiceSection .closed{padding:18px 14px}
}
@media (prefers-reduced-motion: reduce){
  #choiceSection *,#choiceSection *::before,#choiceSection *::after{animation:none !important;transition:none !important}
}
#choiceSection{padding:0 0 4rem;background:var(--background-color,#0F172A);font-size:15px;line-height:1.5}
#choiceSection .ch-wrap{max-width:800px;margin:0 auto}
#choiceSection .ch-headwrap{text-align:center;margin-bottom:14px}
#choiceSection .section-header{margin-bottom:.35rem}
#choiceSection .section-subtitle{margin-bottom:.6rem;font-size:.95rem}
#choiceSection .ch-badges{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
#choiceSection .strip{justify-content:center;margin:8px 0 14px}
#choiceSection .lock-button .fa-lock-open{display:none}
#choiceSection .lock-button.on{color:#22C55E}
#choiceSection .lock-button.on .fa-lock{display:none}
#choiceSection .lock-button.on .fa-lock-open{display:inline}
#choiceSection .lock-button.on:hover{background:#22C55E;color:#fff}
#choiceSection a.search-button{text-decoration:none}
#choiceSection .note{text-align:left}
#choiceSection .modal{z-index:2000}
#choiceSection .toast{z-index:2001}
#choiceSection.is-closed{padding-bottom:3rem}
#choiceSection.is-closed .ch-headwrap,#choiceSection.is-closed .note,#choiceSection.is-closed #ch-warn,#choiceSection.is-closed .strip{display:none}
#choiceSection .closed{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;text-align:center;
  padding:14px 16px;margin:0;border-radius:12px;background:var(--secondary-bg,#1E293B);border:1px solid var(--gray-light,#334155)}
#choiceSection .closed[hidden]{display:none}
#choiceSection .closed .ttl{font-weight:700;color:#E2E8F0}
#choiceSection .closed .msg{color:#94A3B8;font-size:14px;word-break:keep-all}
#choiceSection .closed .msg b{color:#FACC15}
#choiceSection .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
#choiceSection .card{min-width:0;overflow:hidden}
@media (max-width:720px){
  #choiceSection{padding-bottom:3rem}
  #choiceSection>.container{padding:0 12px}
  #choiceSection .card .row.keep{flex-wrap:wrap;justify-content:space-between;column-gap:4px}
  #choiceSection .card .row.keep b{margin-left:auto}
}
/* ── 되감기 (2026-11-01): 버튼 · 설명 모달 · 섹션 안 재생 막대 ── */
#choiceSection .ch-rw-btn{width:auto;gap:6px;padding:0 .75rem;font:inherit;font-size:.85rem;font-weight:700}
#choiceSection .rw-ctl{position:sticky;top:72px;z-index:5;display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"tag time . exit" "play range range speed";
  align-items:center;gap:8px 10px;padding:10px 12px;margin-bottom:10px;border-radius:12px;background:rgba(30,41,59,.96);border:1px solid var(--accent);
  box-shadow:0 8px 24px rgba(0,0,0,.35);animation:ch-rise .25s both}
#choiceSection .rw-ctl[hidden]{display:none}
#choiceSection .rw-tag{grid-area:tag;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent)}
#choiceSection .rw-time{grid-area:time;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
#choiceSection .rw-exit{grid-area:exit}
#choiceSection .rw-play{grid-area:play}
#choiceSection #ch-rwRange{grid-area:range;width:100%;min-width:0;accent-color:var(--accent)}
#choiceSection #ch-rwSpeed{grid-area:speed}
#choiceSection .rw-btn{height:32px;min-width:32px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer}
#choiceSection .rw-play{background:var(--accent);color:#fff;border-color:transparent}
#choiceSection .rw-exit{background:transparent;color:var(--ink2)}
/* 재생 중: 실시간 전용 정보(검색·방송 띠·경고·근접 인원)는 숨기고, 움직임은 장면 간격에 맞게 짧게 */
#choiceSection.is-replay .search,#choiceSection.is-replay #ch-found,#choiceSection.is-replay .strip,#choiceSection.is-replay #ch-warn,
#choiceSection.is-replay .card .row:last-child{display:none}
#choiceSection.is-replay .r.bump{animation-duration:.6s}
#choiceSection.is-replay .plus{animation-duration:.8s}
#choiceSection.is-replay .r>div:nth-child(4){color:var(--ink3)}
@media (min-width:721px){
  #choiceSection .rw-ctl{grid-template-columns:auto auto auto 1fr auto auto;grid-template-areas:"tag time play range speed exit"}
}
@media (max-width:720px){
  #choiceSection .ch-rw-btn span{font-size:.8rem}
  #choiceSection .rw-ctl{top:64px;padding:8px 10px}
  #choiceSection .rw-time{font-size:16px}
}