/* 🧰 운영 도구 탭(panels/tools_ops.js · panels/ops/*) — 무대 · 공지 · 후원 콘솔 · 모금함 · 계좌/화면 · 영상/노래방
   + 대기함(pending.js)의 퇴근 · 탈출 카드 · [🏺 모금함] 단추.
   색은 controller.css 의 변수(--accent · --line · --muted …)만 쓴다. 바깥(CDN) 없음. */

.ops { display: flex; flex-direction: column; gap: 14px; }
.ops-blk { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.16); border: 1px solid var(--line-soft); min-width: 0; }
.ops-bh { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.ops-bh h3 { font-size: 16px; font-weight: 800; margin: 0; }
.ops-sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.ops-bh .ops-mini { margin-left: auto; }
.ops-now { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--text); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ops-now b { font-weight: 900; }
.ops-now.off { background: rgba(255, 255, 255, 0.05); border-color: var(--line-soft); color: var(--muted); }
.ops-now a { color: var(--accent-hi); font-weight: 800; text-decoration: none; }
.ops-dim { color: var(--muted); font-weight: 600; }
.ops-hint { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.5; }
.ops-hint.inline { display: inline; }
.ops-hint.good { color: var(--good); font-weight: 700; }
.ops-hint.bad { color: var(--bad); font-weight: 700; }
.ops-note { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.ops-note.gold { background: rgba(255, 179, 107, 0.07); border: 1px solid rgba(255, 179, 107, 0.22); color: var(--muted); }
.ops-note.gold b { color: var(--gold); }
.ops-note.warn { background: rgba(245, 165, 36, 0.12); border: 1px solid rgba(245, 165, 36, 0.35); color: #ffd28a; font-weight: 700; }
.ops-lbl { color: var(--muted); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.ops-lbl-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.ops-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ops-row.wrap { flex-wrap: wrap; }
.ops-row.end { justify-content: flex-end; }
.ops-row > span { color: var(--muted); font-weight: 700; font-size: 14px; }
.ops .grow { flex: 1 1 220px; min-width: 0; }
.ops-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ops-grid2, .ops-grid3 { display: grid; gap: 10px; }
.ops-grid2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ops-grid3 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.9fr); }
.ops-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.ops-field input { width: 100%; }

/* 입력칸 — controller.css 는 text · password 만 꾸민다 */
.ops input[type=number], .ops .ops-select, .ops .ops-ta {
    height: 46px; min-width: 0; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--input); color: var(--text);
    padding: 0 12px; font: inherit; font-size: 16px; font-weight: 600;
}
.ops .ops-ta { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.45; width: 100%; }
.ops .ops-select { padding-right: 8px; cursor: pointer; max-width: 100%; }
.ops .ops-select option { background: #2b221d; color: var(--text); }
.ops input[type=number]:focus, .ops .ops-select:focus, .ops .ops-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ops .ops-num.w-s { width: 78px; text-align: right; }
.ops .btn.wait { opacity: 0.6; cursor: progress; }
.ops .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

/* 무대 — 한 번에 하나 */
.ops-seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ops-segb {
    min-height: 46px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
    color: var(--text); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.ops-segb:hover { background: rgba(255, 255, 255, 0.12); }
.ops-segb.on { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: 0 6px 18px rgba(240, 123, 63, 0.3); }
.ops-segb[data-stage=none].on { background: rgba(255, 255, 255, 0.2); color: var(--text); box-shadow: none; }
.ops-segb.wait, .ops-chip.wait { opacity: 0.6; cursor: progress; }

/* 켜고 끄는 칩 */
.ops-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-chips.inline { display: inline-flex; gap: 6px; }
.ops-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.ops-chip i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); flex: none; }
.ops-chip:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.ops-chip.on { background: rgba(61, 220, 132, 0.14); border-color: rgba(61, 220, 132, 0.45); color: #c8f7dc; }
.ops-chip.on i { background: var(--good); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2); }
.ops-chip.sm { min-height: 34px; padding: 0 11px; font-size: 13.5px; }
.ops-chip.sm.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }

/* 스위치 */
.ops-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; font-size: 15px; user-select: none; min-height: 44px; }
.ops-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ops-slider { position: relative; width: 50px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid var(--line); transition: background 0.15s ease; flex: none; }
.ops-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.ops-switch input:checked + .ops-slider { background: var(--good); border-color: transparent; }
.ops-switch input:checked + .ops-slider::after { transform: translateX(20px); }
.ops-switch input:focus-visible + .ops-slider { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* 작은 네모 단추(↑ ↓ 지금 🗑 ✕ ↻) */
.ops-mini {
    min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
    color: var(--text); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.ops-mini:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); }
.ops-mini:disabled { opacity: 0.35; cursor: default; }
.ops-mini.go { color: var(--gold); border-color: rgba(255, 179, 107, 0.4); }
.ops-mini.del { color: #ff9e9e; border-color: rgba(255, 107, 107, 0.35); }

/* 공지 목록 */
.ntc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ntc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ntc-n { color: var(--dim); font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.ntc-row input { width: 100%; }
.ntc-b { display: flex; gap: 6px; }
.ntc-add { margin-top: 4px; }

/* 모금함 */
.fj-big { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 4px 4px 0; }
.fj-total { font-size: 34px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -1px; }

/* 고액 영상 */
.av-rows { display: flex; flex-direction: column; gap: 8px; }
.av-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 96px auto 40px; gap: 8px; align-items: center; }
.av-row input { width: 100%; }
.av-play { justify-content: flex-start; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; }
.av-badge { font-size: 12.5px; font-weight: 800; white-space: nowrap; text-align: center; }
.av-badge.file { color: var(--good); }
.av-badge.yt { color: var(--warn); }
.av-badge.none { color: var(--dim); }
.av-row .ops-mini[hidden] { display: block !important; visibility: hidden; }

/* 후원 콘솔 */
.con-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.con-amt { font-size: 22px !important; font-weight: 900 !important; height: 54px !important; font-variant-numeric: tabular-nums; }
.con-info { margin: -4px 2px 0; min-height: 20px; font-size: 13.5px; font-weight: 700; color: var(--muted); line-height: 1.5; }
.con-info.small { color: var(--gold); }
.con-info.exact { color: var(--good); }
.con-info.roundup { color: #ffd28a; }
.con-info.bad { color: var(--bad); }
.con-ledger { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft); color: var(--muted); font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.con-ledger input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.con-ledger b { color: var(--text); }
.pv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 16px; text-align: center; border-radius: 16px; background: radial-gradient(420px 220px at 50% -20%, var(--accent-soft), transparent 70%), rgba(0, 0, 0, 0.2); }
.pv-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; color: var(--accent-hi); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.pv-imgwrap { width: 148px; height: 148px; border-radius: 18px; overflow: hidden; background: #120e0c; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 4px; }
.pv-img { width: 100%; height: 100%; object-fit: cover; }
.pv-empty { color: var(--dim); font-size: 12.5px; line-height: 1.6; padding: 0 14px; }
.pv-title { font-size: 16px; font-weight: 900; }
.pv-line { margin: 0; font-size: 15px; }
.pv-line .gold { color: var(--gold); }
.pv-msg { margin: 0; max-width: 320px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.con-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.con-sig {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 6px 10px; border-radius: 12px;
    border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.con-sig b { color: var(--gold); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.con-sig span { font-size: 12.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-sig:hover { background: rgba(255, 255, 255, 0.1); }
.con-sig.on { border-color: var(--accent); background: var(--accent-soft); }

/* 대기함 — 퇴근 · 탈출 카드 · 모금함 단추(pending.js) */
.pcard.offwork { background: #fff8ec; box-shadow: inset 0 0 0 2px #f5c06b, 0 10px 24px rgba(0, 0, 0, 0.16); }
.pcard.offwork .pc-amt { color: #a2600b; }
.pcard .tag.off { background: #ffe9c2; color: #8a4f00; }
.pcard .btn.jar { background: #fff4df; border-color: #f0c77a; color: #8a5a00; }
.pcard .btn.jar:hover:not(:disabled) { background: #ffe9c2; }

/* 폰 · 좁은 칸 */
@media (max-width: 1100px) {
    .con-grid { grid-template-columns: minmax(0, 1fr); }
    .con-pv { order: -1; }
    .pv-card { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: left; padding-top: 34px; }
    .pv-imgwrap { width: 96px; height: 96px; }
}
@media (max-width: 899px) {
    .ops-blk { padding: 12px; }
    .ops-grid2, .ops-grid3 { grid-template-columns: minmax(0, 1fr); }
    .ops-seg { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .av-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'play badge clear' 'input input up'; }
    .av-row .av-play { grid-area: play; }
    .av-row input { grid-area: input; }
    .av-row .av-badge { grid-area: badge; }
    .av-row .btn:not(.av-play) { grid-area: up; }
    .av-row .ops-mini { grid-area: clear; }
    .ntc-row { grid-template-columns: 22px minmax(0, 1fr); }
    .ntc-b { grid-column: 2; justify-content: flex-end; }
    .ops .ops-num.w-s { width: 68px; }
    .fj-total { font-size: 28px; }
}

/* 🤖 진행봇 — 스위치 줄 · 안내 줄 */
.ab-list { display: flex; flex-direction: column; gap: 6px; }
.ab-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; cursor: pointer; }
.ab-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }
.ab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ab-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ab-num { width: 76px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.ops-bot input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gold); }

/* 🕹️ 버전 */
.ver-now { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); }
.ver-now.pinned { border-color: rgba(255, 204, 0, 0.55); }
.ver-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ver-big b { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: -0.5px; }
.ver-big span { font-weight: 800; overflow-wrap: anywhere; }
.ver-pin { margin: 4px 0 0; color: var(--gold); font-weight: 800; font-size: 13.5px; }
.ver-ok { margin: 4px 0 0; color: #5fd99a; font-weight: 800; font-size: 13.5px; }
.ver-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ver-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; min-width: 0; }
.ver-row.now { border-color: rgba(46, 204, 113, 0.5); background: rgba(46, 204, 113, 0.1); }
.ver-lbl { flex: none; min-width: 52px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; }
.ver-row.now .ver-lbl { color: #8ff0b0; }
.ver-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ver-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ver-new { color: var(--accent, var(--gold)); font-style: normal; font-weight: 800; }
.ver-noui { color: #ff7b7b; font-style: normal; font-weight: 800; }
.ver-here { flex: none; color: #5fd99a; font-weight: 900; font-size: 12.5px; }

/* 📦 옛 설정 옮기기 */
.mg-what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-migrate input[type="file"] { max-width: 100%; color: var(--muted); }

/* 🖥️ 시스템 */
.sys-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.sys-dl dt { color: var(--muted); font-weight: 700; }
.sys-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.sys-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sys-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.sys-toon { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; }
.sys-toon span { color: var(--muted); font-weight: 700; }
.sys-toon b { overflow-wrap: anywhere; }
.sys-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow: auto; }
.sys-ev li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.07); min-width: 0; }
.sys-ev code { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }