/* =========================================================
   와썹 관리자 — 공통 부품 (design/theme.css 의 클래스 + 팝업 · 토스트)
   상태 클래스는 회원 사이트와 같이 is-active / is-open 을 써요.
   ========================================================= */

/* 글자 단계 */
.page-title { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; }
.section-title { font-size: 15px; line-height: 22px; font-weight: 700; }
.section-title.sm { font-size: 14px; }
.caption { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.label { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.kpi { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 13px; font-weight: 600; }
.num { font-weight: 600; font-variant-numeric: tabular-nums; }
.tn { font-variant-numeric: tabular-nums; }
.neg { color: var(--danger); font-weight: 600; }
.pos { color: var(--success); font-weight: 600; }
.muted { color: var(--ink-2); }
.link { color: var(--accent-text); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }

/* 면 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; min-width: 0; }
.card.warn-card { border-color: var(--danger-line); }
a.card { color: inherit; text-decoration: none; display: block; }
a.card:hover { background: var(--hover); }
.box { background: var(--raised); border-radius: var(--radius-md); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--hover); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn.icon { width: 32px; padding: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 칩 · 배지 */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.chip.wait { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.chip.off { border-style: dashed; color: var(--ink-3); background: transparent; }
.chip.solid { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip.risk { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.chip.lv { height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10px; }
.chip.xs { height: 18px; padding: 0 5px; font-size: 10px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.count[data-n="0"] { display: none; }

/* 표 — 좁은 화면에서는 min-width + 가로 스크롤 */
.tbl { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; min-width: var(--tbl-min, 0); border-collapse: collapse; }
.tbl th { background: var(--raised); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; text-align: left; padding: 10px 12px; white-space: nowrap; }
.tbl td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tr.risk, .tbl tr.risk:hover { background: var(--danger-soft); }
.tbl tr.risk .caption { color: var(--ink-2); }
.tbl tr.total, .tbl tr.total:hover { background: var(--raised); }
.tbl .r { text-align: right; }
.tbl b { font-weight: 600; }
.tbl tr[data-row-open] { cursor: pointer; }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]::after { content: " ↕"; color: var(--ink-3); }
.tbl th[aria-sort="ascending"]::after { content: " ↑"; color: var(--ink); }
.tbl th[aria-sort="descending"]::after { content: " ↓"; color: var(--ink); }
.tbl .acts { display: flex; gap: 4px; }
.tbl .ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* 입력 */
.inp { height: 36px; width: 100%; min-width: 0; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; }
.inp::placeholder { color: var(--ink-2); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* 탭 */
.tabs { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--raised); }
.tab { height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.tabs.sm { padding: 2px; }
.tabs.sm .tab { height: 28px; }
.qf { height: 34px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.qf.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.qf.risk { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.qf .n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.85; }

/* 막대 · 줄 */
.bar { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ink-2); }
.bar.bad > i { background: var(--danger); }
.line-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.line-row:last-child { border-bottom: 0; }
.line-row.strong { font-weight: 700; font-size: 13px; }
.line-row .r { text-align: right; }

/* 위험 묶음 (빨간 박스) */
.risk-box { background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius-md); padding: 10px 12px; }
.legend-risk { display: inline-block; width: 20px; height: 12px; border-radius: 3px; background: var(--danger-soft); border: 1px solid var(--danger-line); }

/* 팝업 — role="dialog", Esc · 바깥 누르기로 닫혀요 */
.modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); }
.modal.is-open { display: flex; }
.modal-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 14px; }
.modal-box.is-wide { max-width: 1080px; min-height: min(620px, calc(100vh - 48px)); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h2 { display: flex; align-items: center; gap: 8px; }
.modal-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* 필터 바 · 표 아래 줄 · 페이지 번호 · 범례 */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px; }
.filters .f-grow { flex: 1 1 240px; }
.filters .f-140 { flex: 0 1 140px; }
.filters .f-160 { flex: 0 1 160px; }
.filters .f-240 { flex: 0 1 240px; }
.filters .f-320 { flex: 0 1 320px; }
.filters .f-acts { display: flex; gap: 8px; margin-left: auto; }
.date-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.date-range .inp { min-width: 0; width: auto; flex: 1 1 120px; }   /* 시작일 ~ 종료일을 한 줄에 (아주 좁을 때만 줄바꿈) */
.qfs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.qfs > * { flex: none; }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tbl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.tbl-foot b, .caption b.ink { color: var(--ink); }
.pager { display: flex; gap: 4px; }
.legend { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.empty { padding: 28px 12px; text-align: center; color: var(--ink-3); white-space: normal; }
.tbl td.wrap { white-space: normal; }
.tbl .addr { color: var(--ink-2); }
.tbl .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tbl .sub-cap { white-space: normal; max-width: 220px; margin-left: auto; }

/* 알림 상자 (팝업 안 경고) */
.alert { border-radius: var(--radius-md); padding: 10px 12px; border: 1px solid var(--line-strong); }
.alert.risk { background: var(--danger-soft); border-color: var(--danger-line); }
.alert.risk > b { color: var(--danger); }
.alert .caption { margin-top: 2px; }
.alert.risk .caption { color: var(--ink-2); }
.step { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.step > b { font-size: 12px; }
.copy-row { display: flex; gap: 8px; }
.copy-row .box { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kv2 .box { padding: 12px; }
.kv2 .kpi { font-size: 18px; }
.kv2 .caption { color: var(--ink-2); }
.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inp.is-bad { border-color: var(--danger); }
.err { color: var(--danger); font-weight: 600; }
.radio-list { display: flex; flex-direction: column; gap: 6px; }
.radio-list label { display: flex; gap: 8px; align-items: center; }
.quick-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-box.is-mid { max-width: 620px; }
.modal-box.is-sm { max-width: 520px; }

/* 펼침 버튼 (표 안) */
.row-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.row-toggle::before { content: "›"; display: inline-block; width: 10px; color: var(--ink-3); transition: transform .15s; }
.row-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

/* 오른쪽 패널 (팝업과 같은 동작 · 오른쪽에 붙어 열려요) — .modal.is-side > .side-box */
.modal.is-side { padding: 0; justify-content: flex-end; align-items: stretch; }
.side-box { width: 920px; max-width: 100%; height: 100%; overflow-y: auto; background: var(--chrome); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.side-head { position: sticky; top: 0; z-index: 2; height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--chrome); }
.side-body { flex: 1 1 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* 밑줄 탭 (패널 안) */
.utabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
.utabs::-webkit-scrollbar { display: none; }
.utab { height: 40px; flex: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.utab:hover { color: var(--ink); }
.utab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* 켜고 끄기 (role="switch") */
.switch { width: 44px; height: 24px; flex: none; border-radius: 999px; border: 0; background: var(--danger); position: relative; cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; transition: left .15s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 23px; }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

/* 펼침 글자 버튼 (▾ / ▴) */
.xbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
.xbtn::after { content: "▾"; color: var(--ink-3); }
.xbtn[aria-expanded="true"]::after { content: "▴"; }
.xbtn b { color: var(--ink); }
.count.count-danger { background: var(--danger); color: var(--on-danger); }
.count.count-wait { background: var(--warn-soft); color: var(--warn); }
.switch.sm { width: 36px; height: 20px; }
.switch.sm::after { width: 14px; height: 14px; }
.switch.sm[aria-checked="true"]::after { left: 19px; }
.switch:disabled { opacity: 0.5; cursor: wait; }
.switch-cell { display: flex; align-items: center; gap: 8px; }
.switch-row { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inp.is-off { border-style: dashed; border-color: var(--line); background: transparent; text-align: center; }
.inp.is-off::placeholder { color: var(--ink-3); }
.btn-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.row-link { color: inherit; text-decoration: none; font-weight: 700; }
.row-link:hover { text-decoration: underline; }
.dim { opacity: 0.7; }
.chk { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 90; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-lg); background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 600; }

@media (max-width: 599px) {
  .modal { padding: 12px; }
  .modal-box { max-height: calc(100vh - 24px); padding: 16px; }
}