/* 바쿠다 운영 콘솔 — 비취(jade) + 감(persimmon) 팔레트, 라이트/다크 모두 지원 */
.ops {
  --o-bg: #F3F2EC;
  --o-surface: #FFFFFF;
  --o-surface-2: #F8F7F2;
  --o-line: #E3E0D6;
  --o-line-strong: #CFCBBE;
  --o-ink: #1C1B18;
  --o-ink-2: #45433C;
  --o-muted: #77736A;
  --o-primary: #17765A;
  --o-primary-ink: #FFFFFF;
  --o-primary-soft: #E2F2EA;
  --o-accent: #E2603A;
  --o-accent-soft: #FCE9E1;
  --o-warn: #9A6410;
  --o-warn-soft: #FBF0D6;
  --o-warn-line: #E9C46A;
  --o-danger: #B93A26;
  --o-danger-soft: #FBE7E3;
  --o-info: #3F64A8;
  --o-info-soft: #E5ECF8;
  --o-shadow: 0 1px 2px rgba(28, 27, 24, .05), 0 4px 14px rgba(28, 27, 24, .05);
  --o-radius: 14px;
  color-scheme: light;
}
:root:not([data-theme="light"]) .ops {
  --o-bg: #111210;
  --o-surface: #191A17;
  --o-surface-2: #20221E;
  --o-line: #2E302B;
  --o-line-strong: #41443D;
  --o-ink: #EEEDE6;
  --o-ink-2: #C9C7BD;
  --o-muted: #9A978C;
  --o-primary: #4CC593;
  --o-primary-ink: #0C1A13;
  --o-primary-soft: rgba(76, 197, 147, .14);
  --o-accent: #FF8B64;
  --o-accent-soft: rgba(255, 139, 100, .14);
  --o-warn: #F1C062;
  --o-warn-soft: rgba(241, 192, 98, .13);
  --o-warn-line: rgba(241, 192, 98, .45);
  --o-danger: #FF7B66;
  --o-danger-soft: rgba(255, 123, 102, .13);
  --o-info: #8EAEEF;
  --o-info-soft: rgba(142, 174, 239, .14);
  --o-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

.ops { background: var(--o-bg); color: var(--o-ink); font-family: var(--sans, system-ui, sans-serif); min-height: 70vh; }
.ops * { box-sizing: border-box; }
.ops-in { max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; }
@media (max-width: 640px) { .ops-in { padding: 18px 16px 64px; } }

/* 헤더 */
.ops-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ops-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--o-primary); text-transform: uppercase; }
.ops-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--o-primary); box-shadow: 0 0 0 4px var(--o-primary-soft); }
.ops-head h1 { margin: 6px 0 4px !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 800 !important; letter-spacing: -.035em; color: var(--o-ink) !important; font-family: inherit !important; line-height: 1.15; }
.ops-head p { margin: 0 !important; color: var(--o-muted) !important; font-size: 13.5px !important; font-weight: 600; }
.ops-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 버튼·입력 */
.ops .ob { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--o-line-strong); background: var(--o-surface); color: var(--o-ink); font: 700 13px var(--sans, system-ui); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .12s, border-color .12s, transform .12s; }
.ops .ob:hover:not(:disabled) { border-color: var(--o-primary); background: var(--o-surface-2); }
.ops .ob:active:not(:disabled) { transform: translateY(1px); }
.ops .ob.pri { background: var(--o-primary); border-color: var(--o-primary); color: var(--o-primary-ink); }
.ops .ob.pri:hover:not(:disabled) { filter: brightness(1.08); background: var(--o-primary); }
.ops .ob.acc { background: var(--o-accent); border-color: var(--o-accent); color: #fff; }
.ops .ob.dan { background: var(--o-danger-soft); border-color: transparent; color: var(--o-danger); }
.ops .ob.dan:hover:not(:disabled) { border-color: var(--o-danger); background: var(--o-danger-soft); }
.ops .ob.ghost { background: transparent; border-color: transparent; color: var(--o-ink-2); }
.ops .ob.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.ops .ob:disabled { opacity: .45; cursor: default; }
.ops .ob svg { width: 15px; height: 15px; flex: none; }
.ops .oi { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--o-line-strong); background: var(--o-surface); color: var(--o-ink); font: 600 13.5px var(--sans, system-ui); min-width: 0; }
.ops .oi.sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.ops .oi:focus, .ops .ob:focus-visible, .ops textarea:focus { outline: 2px solid var(--o-primary); outline-offset: 1px; border-color: var(--o-primary); }
.ops .oi::placeholder { color: var(--o-muted); }
.ops textarea.oi { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; width: 100%; }

.ops-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--o-ink-2); cursor: pointer; user-select: none; }
.ops-switch input { appearance: none; width: 34px; height: 20px; border-radius: 99px; background: var(--o-line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.ops-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ops-switch input:checked { background: var(--o-primary); }
.ops-switch input:checked::after { transform: translateX(14px); }

/* 탭 내비 */
.ops-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; padding: 6px; margin: 0 0 20px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: var(--o-shadow); overflow-x: auto; scrollbar-width: none; }
.ops-nav::-webkit-scrollbar { display: none; }
.ops-nav button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--o-ink-2); font: 700 14px var(--sans, system-ui); cursor: pointer; }
.ops-nav button:hover { background: var(--o-surface-2); color: var(--o-ink); }
.ops-nav button.on { background: var(--o-ink); color: var(--o-bg); }
.ops-nav .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--o-accent); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.ops-nav .cnt[hidden] { display: none; }

.ops-panel[hidden] { display: none !important; }

/* 카드·섹션 */
.ops-card { background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); box-shadow: var(--o-shadow); padding: 20px 22px; margin-bottom: 18px; }
@media (max-width: 640px) { .ops-card { padding: 16px; } }
.ops-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.ops-card-h h2 { margin: 0 !important; font-size: 16.5px !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--o-ink) !important; font-family: inherit !important; }
.ops-card-h .sub { font-size: 12.5px; color: var(--o-muted); font-weight: 600; }
.ops-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ops-2col > .ops-card { margin-bottom: 0; }
@media (max-width: 900px) { .ops-2col { grid-template-columns: 1fr; } }
.ops-mb { margin-bottom: 18px; }

/* 세그먼트 탭 */
.ops-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--o-surface-2); border: 1px solid var(--o-line); }
.ops-seg button { border: 0; background: transparent; color: var(--o-muted); font: 700 12.5px var(--sans, system-ui); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.ops-seg button:hover { color: var(--o-ink); }
.ops-seg button.on { background: var(--o-surface); color: var(--o-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* 기간 바 */
.ops-period { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ops-period strong { font-size: 14px; font-weight: 800; color: var(--o-ink); margin-right: 4px; }

/* KPI */
.ops-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 960px) { .ops-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ops-kpis { grid-template-columns: 1fr; } }
.ops-kpi { position: relative; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); padding: 18px 20px; box-shadow: var(--o-shadow); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ops-kpi::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kc, var(--o-primary)); }
.ops-kpi .k { font-size: 13px; font-weight: 700; color: var(--o-muted); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ops-kpi .v { font-size: clamp(28px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--o-ink); font-variant-numeric: tabular-nums; }
.ops-kpi .v small { font-size: 15px; font-weight: 700; color: var(--o-muted); margin-left: 3px; letter-spacing: 0; }
.ops-kpi .s { font-size: 12.5px; font-weight: 600; color: var(--o-muted); }
.ops-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ops-delta.up { background: var(--o-primary-soft); color: var(--o-primary); }
.ops-delta.down { background: var(--o-danger-soft); color: var(--o-danger); }
.ops-delta.flat { background: var(--o-surface-2); color: var(--o-muted); }

/* 처리할 일 */
.ops-todo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 760px) { .ops-todo { grid-template-columns: 1fr; } }
.ops-todo button { text-align: left; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--o-line); background: var(--o-surface); color: var(--o-ink); cursor: pointer; font: inherit; transition: border-color .12s, transform .12s; }
.ops-todo button:hover { border-color: var(--o-primary); transform: translateY(-1px); }
.ops-todo .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ops-todo .hot .ic { background: var(--o-accent-soft); color: var(--o-accent); }
.ops-todo .ok .ic { background: var(--o-primary-soft); color: var(--o-primary); }
.ops-todo b { display: block; font-size: 14px; font-weight: 800; }
.ops-todo span.d { display: block; font-size: 12.5px; color: var(--o-muted); font-weight: 600; margin-top: 2px; }

/* 추이 차트 */
.ops-chart { position: relative; width: 100%; }
.ops-chart svg { display: block; width: 100%; height: 240px; overflow: visible; }
.ops-chart .grid line { stroke: var(--o-line); stroke-width: 1; }
.ops-chart .ax text { fill: var(--o-muted); font-size: 11px; font-weight: 600; font-family: var(--sans, system-ui); }
.ops-chart .area { opacity: .16; }
.ops-chart .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ops-chart .hv line { stroke: var(--o-line-strong); stroke-dasharray: 3 3; }
.ops-chart .tip { position: absolute; pointer-events: none; transform: translate(-50%, -110%); background: var(--o-ink); color: var(--o-bg); padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.ops-chart .tip[hidden] { display: none; }
.ops-chart .tip em { font-style: normal; opacity: .7; font-weight: 600; margin-right: 6px; }
.ops-chart-sum { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--o-muted); font-weight: 600; }
.ops-chart-sum b { color: var(--o-ink); font-variant-numeric: tabular-nums; }

/* 막대 순위 */
.ops-bars { display: grid; gap: 12px; }
.ops-bar .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.ops-bar .nm { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--o-ink); min-width: 0; }
.ops-bar .nm span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-bar .rk { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--o-surface-2); color: var(--o-muted); flex: none; }
.ops-bar:nth-child(-n+3) .rk { background: var(--o-primary); color: var(--o-primary-ink); }
.ops-bar .val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--o-ink); white-space: nowrap; }
.ops-bar .val em { font-style: normal; color: var(--o-muted); font-weight: 600; font-size: 12px; margin-left: 4px; }
.ops-bar .tr { height: 8px; border-radius: 99px; background: var(--o-surface-2); overflow: hidden; }
.ops-bar .tr i { display: block; height: 100%; border-radius: 99px; background: var(--o-primary); }
.ops-bar:nth-child(n+4) .tr i { background: var(--o-line-strong); }
.ops-empty { color: var(--o-muted); font-size: 13.5px; margin: 6px 0; text-align: center; padding: 18px 8px; }

/* 표 */
.ops-tbl-wrap { overflow: auto; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-surface); }
.ops-tbl-wrap.tall { max-height: 520px; }
.ops-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ops-tbl th { position: sticky; top: 0; z-index: 2; background: var(--o-surface-2) !important; color: var(--o-muted) !important; font-size: 12px; font-weight: 800; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--o-line); white-space: nowrap; letter-spacing: .01em; }
.ops-tbl td { padding: 11px 12px; border-bottom: 1px solid var(--o-line); color: var(--o-ink) !important; vertical-align: middle; background: var(--o-surface); }
.ops-tbl tbody tr:last-child td { border-bottom: 0; }
.ops-tbl tbody tr:hover td { background: var(--o-surface-2); }
.ops-tbl tr.pend td { background: var(--o-warn-soft); }
.ops-tbl tr.pend td:first-child { box-shadow: inset 3px 0 0 var(--o-warn-line); }
.ops-tbl td.r, .ops-tbl th.r { text-align: right; }
.ops-tbl td.act { white-space: nowrap; width: 1%; }
.ops-tbl td.act .ops-row { flex-wrap: nowrap; }
.ops-tbl .id { color: var(--o-muted); font-family: var(--mono, ui-monospace, monospace); font-size: 12px; white-space: nowrap; }
.ops-tbl .strong { font-weight: 800; }
.ops-tbl .mute { color: var(--o-muted); }
.ops-tbl .nowrap { white-space: nowrap; }
.ops-tbl tr.click { cursor: pointer; }
.ops-tbl tr.detail td { background: var(--o-surface-2); padding: 14px 16px 16px; }
.ops-tbl tr.detail .body { white-space: pre-wrap; line-height: 1.6; font-size: 13.5px; color: var(--o-ink-2); margin: 0 0 10px; }
.ops-tbl tr.is-today td:first-child b { color: var(--o-primary); }

.ops-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--o-surface-2); color: var(--o-ink-2); border: 1px solid var(--o-line); }
.ops-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.ops-badge.ok { background: var(--o-primary-soft); color: var(--o-primary); border-color: transparent; }
.ops-badge.wait { background: var(--o-warn-soft); color: var(--o-warn); border-color: var(--o-warn-line); }
.ops-badge.no { background: var(--o-danger-soft); color: var(--o-danger); border-color: transparent; }
.ops-badge.info { background: var(--o-info-soft); color: var(--o-info); border-color: transparent; }
.ops-badge.plain::before { display: none; }

/* 크레딧 관리 */
.ops-grant { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(200px, 1fr) minmax(220px, 1fr); gap: 16px; align-items: end; }
@media (max-width: 900px) { .ops-grant { grid-template-columns: 1fr; } }
.ops-lbl { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--o-ink-2); min-width: 0; }
.ops-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ops-row .oi { flex: 1 1 120px; }
.ops-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.ops-chips span { font-size: 12.5px; font-weight: 700; color: var(--o-muted); margin-right: 4px; }
.ops-target { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--o-surface-2); border: 1px dashed var(--o-line-strong); font-size: 13px; color: var(--o-ink-2); font-weight: 600; }
.ops-target[hidden] { display: none; }
.ops-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--o-primary-soft); color: var(--o-primary); }
.ops-msg.err { background: var(--o-danger-soft); color: var(--o-danger); }
.ops-msg[hidden] { display: none; }

/* 상담 */
.ops-chat { display: grid; gap: 10px; }
.ops-chat-item { border: 1px solid var(--o-line); border-radius: 12px; padding: 14px 16px; background: var(--o-surface); }
.ops-chat-item.open { border-color: var(--o-warn-line); background: var(--o-warn-soft); }
.ops-chat-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--o-muted); font-weight: 600; margin-bottom: 8px; }
.ops-chat-q { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--o-ink); margin: 0; }
.ops-chat-a { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--o-primary-soft); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; color: var(--o-ink); }
.ops-chat-a b { color: var(--o-primary); display: block; font-size: 12px; margin-bottom: 4px; }
.ops-chat-form { margin-top: 10px; display: grid; gap: 8px; }
.ops-chat-form .ops-row { justify-content: flex-end; }

.ops-foot-note { font-size: 12px; color: var(--o-muted); margin: 10px 2px 0; font-weight: 600; }
.ops-lock { text-align: center; padding: 56px 20px; }
.ops-lock h1 { margin: 0 0 10px !important; font-size: 24px !important; color: var(--o-ink) !important; }
.ops-lock p { color: var(--o-muted); margin: 0 0 20px; }
.ops-skel { display: inline-block; width: 70%; height: 1em; border-radius: 6px; background: linear-gradient(90deg, var(--o-surface-2), var(--o-line), var(--o-surface-2)); background-size: 200% 100%; animation: opsSk 1.2s infinite linear; }
@keyframes opsSk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ops-skel { animation: none; } .ops-todo button, .ops .ob { transition: none; } }