/* ═══════════════════════════════════════════════════════════════════════════════
   라이선스 관리 — 기존 기능 부품을 업무 도우미(Codex) 디자인 체계로 입힌다 (2026-09-23 통합 개편)
   · 색·모서리·그림자는 app.css 의 토큰만 쓴다(--primary 청록, --nav 짙은 청록, --accent 주황 …)
   · 옛 style.css 의 **동작 규칙**(패널 표시, 드롭다운 위치, 트리 펼침, 표 고정 열, 모달)은 그대로 옮겼다.
     모양만 바꾸고 동작을 바꾸면 정한 규칙(역할별 화면·배정 흐름)이 깨진다.
   ═══════════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
.login-brand h1 { word-break: keep-all; }
.login-form .form-alert { margin-bottom: 0; }
body { font-size: 15px; }
h1, h2, h3 { margin: 0 0 8px; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.sm { font-size: 0.8em; }
.empty { color: var(--muted); padding: 18px 0; font-size: 0.86rem; }
.err { color: var(--danger); font-size: 0.85em; }

/* ── 뼈대: 사이드바 · 패널 ─────────────────────────────────────────────────── */
.primary-nav { gap: 3px; overflow-y: auto; }
.nav-group { margin: 16px 13px 6px; color: #6f918c; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.14em; }
.nav-group:first-child { margin-top: 0; }
.nav-item { width: 100%; cursor: pointer; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-item.active { background: var(--nav-soft); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item:focus-visible { outline: 2px solid #9ecfc8; outline-offset: 2px; }
.topbar-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.topbar .brand-label { margin-bottom: 4px; }
.tabs-toggle { display: none; min-width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-sm); }
.tabs-overlay { display: none; position: fixed; inset: 0; background: rgba(12, 28, 27, 0.45); z-index: 40; }
.tabs-overlay.open { display: block; }
.panel { display: none; }
.panel.active { display: block; animation: panel-in 0.18s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } }
.panels > .panel > * + * { margin-top: 16px; }

.notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 15px;
  border: 1px solid #f2dca6; border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning); font-size: 0.84rem; }

/* ── 카드 ─────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm); }
.card h2 { font-size: 1.12rem; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-head h2 .muted.sm { font-weight: 600; font-size: 0.72rem; margin-left: 4px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-note { margin: -4px 0 14px; color: var(--muted); font-size: 0.8rem; line-height: 1.6; max-width: 76ch; }
.count-pill { font-size: 0.74rem; font-weight: 800; color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 3px 10px; }

/* ── 버튼 ─────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--radius-md);
  padding: 0 14px; font-size: 0.82rem; font-weight: 750; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.btn:hover { background: var(--surface-subtle); border-color: var(--primary); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--surface); border-color: var(--line-strong); }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 0.76rem; border-radius: 9px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #185c56; border-color: #185c56; }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: #e3aaa1; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ── 입력 ─────────────────────────────────────────────────────────────────── */
/* 로그인 화면(.login-form)은 Codex 원래 입력칸을 쓴다 — 여기 규칙은 앱 안쪽에만 */
.app-shell input:not([type=checkbox]):not([type=radio]), .app-shell select, .app-shell textarea,
.modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea {
  width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 0.88rem; font-family: inherit; }
.app-shell textarea, .modal textarea { min-height: 80px; }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus, .modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.inp-sm { width: auto !important; min-height: 34px !important; padding: 4px 9px !important; font-size: 0.8rem !important; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); }
.chk-label { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.form-grid { display: flex; flex-direction: column; gap: 12px; }
.form-grid label, .card > label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 750; color: var(--muted); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ── 표 ───────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 0.72rem; font-weight: 850; border-bottom-color: var(--line-strong); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-subtle); }
table td:first-child, table th:first-child { width: 1%; white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--primary); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* 계정 표는 열 너비를 colgroup 으로 고정한다 — 옛 화면 2026-08-27 어긋남 수정을 그대로 둔다 */
.accounts-table { table-layout: fixed; }
.accounts-table .acct-id { word-break: break-all; }
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 12px;
  border: 1px solid #c9e3df; border-radius: var(--radius-md); background: var(--primary-soft); font-size: 0.8rem; }
.bulk-bar span { color: var(--primary); font-weight: 800; margin-right: 4px; }

/* ── 칩(상태 표시) ────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  background: var(--surface-subtle); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip-ok { background: var(--primary-soft); color: var(--primary); border-color: #c9e3df; }
.chip-warn { background: var(--danger-soft); color: var(--danger); border-color: #efc7be; }
.chip-btn { font: inherit; font-size: 0.72rem; cursor: pointer; }
.chip-btn:hover { filter: brightness(0.96); }
/* 계정 사용 현황 — 초록(미배정) / 노랑(일부) / 파랑(정원 다 참) / 빨강(폐기). 의미는 옛 화면과 같다 */
.usage-empty   { background: var(--primary-soft); color: var(--primary); border-color: #c9e3df; }
.usage-partial { background: var(--warning-soft); color: var(--warning); border-color: #f2dca6; }
.usage-full    { background: #e8eefb; color: #2f55a8; border-color: #cfdaf3; }
.usage-retired { background: var(--danger-soft); color: var(--danger); border-color: #efc7be; }
.license-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.license-chips .chip { font-size: 0.7rem; }
.badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-subtle); color: var(--muted); font-size: 0.72rem; }

/* ── 대시보드 ─────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 6px; }
.stat { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-subtle); text-align: left; }
.stat .k { font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.stat .v { font-size: 1.6rem; font-weight: 850; letter-spacing: -0.03em; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 0.82rem; }
.bar-row .label { width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bar-track { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.bar-fill.full { background: var(--danger); }
.bar-num { width: 60px; text-align: right; flex-shrink: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 기수 × 제품 매트릭스 — 옛 엑셀 배정 시트를 대체하는 표. 첫 열 고정 */
.matrix-table { font-size: 0.8rem; }
.matrix-table th, .matrix-table td { padding: 7px 9px; white-space: nowrap; }
.matrix-table th:first-child, .matrix-table td:first-child { position: sticky; left: 0; background: var(--surface); text-align: left; z-index: 1; }
.matrix-total-row td { border-top: 2px solid var(--line-strong); background: var(--surface-subtle); font-weight: 800; }
.matrix-cost-row td { color: var(--muted); font-size: 0.76rem; }
.matrix-cost-row td:first-child { background: var(--surface-subtle); }

/* ── 모달 ─────────────────────────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 14px 24px; overflow-y: auto; background: rgba(12, 28, 27, 0.48); backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 520px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 1.08rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.seat-list { display: flex; flex-direction: column; gap: 5px; max-height: 240px; overflow-y: auto; }
.seat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 9px; font-size: 0.84rem; }

/* ── 검색 목록(콤보) · 떠 있는 목록 ──────────────────────────────────────── */
.combo-wrap { position: relative; }
.combo-dropdown, .user-dropdown, .products-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.combo-dropdown { right: 0; }
.user-dropdown { min-width: 210px; padding: 4px; }
.products-dropdown { min-width: 230px; padding: 4px; }
.combo-group { position: sticky; top: 0; z-index: 1; padding: 7px 11px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em;
  color: var(--primary); background: var(--surface-subtle); border-bottom: 1px solid var(--line); }
.combo-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: 2px; }
.combo-item { display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--ink);
  padding: 8px 11px 8px 19px; font-size: 0.85rem; cursor: pointer; font-family: inherit; }
.combo-item:hover, .combo-item:focus-visible { background: var(--primary-soft); outline: none; }
.combo-item + .combo-group { margin-top: 2px; }
.user-dropdown-cell { position: relative; }
.user-dropdown-row, .products-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; font-size: 0.82rem; border-radius: 8px; white-space: nowrap; }
.user-dropdown-row:not(.muted):hover, .products-panel-row:hover { background: var(--surface-subtle); }
.products-panel-row { justify-content: flex-start; cursor: pointer; }
.products-panel-row input[type="checkbox"] { flex-shrink: 0; }

/* ── 계정 트리 표 — 제품이 여러 개인 계정은 접혀 있다가 같은 표의 진짜 행으로 펼쳐진다(옛 재설계 그대로) ── */
.acct-center { vertical-align: middle; }
.account-products-cell { position: relative; vertical-align: middle; min-width: 200px; }
.acct-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acct-id { font-weight: 750; }
.product-usage-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tree-toggle { font-weight: 800; }
.product-subrow td { background: var(--surface-subtle); }
.product-subrow-label { font-size: 0.8rem; color: var(--muted); padding-left: 4px; }

/* ── 알림 ─────────────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 520px);
  padding: 11px 17px; border-radius: var(--radius-md); background: var(--nav); color: #fff; font-size: 0.84rem; font-weight: 700; box-shadow: var(--shadow-lg); }
.toast.bad { background: var(--danger); }
.toast.ok { background: var(--primary); }

/* ── 새 화면: 한눈에 · 라이선스 달력 (통합으로 생긴 화면) ───────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem;
  font-weight: 800; background: var(--surface-subtle); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pill.is-ok { background: var(--primary-soft); color: var(--primary); border-color: #c9e3df; }
.pill.is-danger { background: var(--danger-soft); color: var(--danger); border-color: #efc7be; }
.pill.is-warning { background: var(--warning-soft); color: var(--warning); border-color: #f2dca6; }
td .sub { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 2px; font-weight: 500; }
tr.is-dim td { color: var(--muted); }
.attention-item.is-warning { border-color: #f2dca6; background: var(--warning-soft); }
.attention-item.is-info { border-color: var(--line); background: var(--surface-subtle); }
.attention-item span { color: var(--muted); font-size: 0.78rem; }
.day-block { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.day-block:last-child { border-bottom: 0; }
.day-block .d { font-weight: 850; font-size: 0.86rem; }
.day-block .d small { display: block; color: var(--muted); font-weight: 650; font-size: 0.72rem; }
.day-block.is-today .d { color: var(--primary); }
.need-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 4px 0; font-size: 0.82rem; }
.need-row strong { min-width: 150px; }
.need-row .who { color: var(--muted); font-size: 0.74rem; }
.unknown-note { color: var(--warning); font-size: 0.74rem; margin-top: 4px; }

/* ── 좁은 화면: 사이드바는 서랍으로 (메뉴가 10개라 가로줄로 두면 넘친다) ─── */
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; height: 100vh; z-index: 45;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 15px; transform: translateX(-100%); transition: transform 0.22s ease; }
  .sidebar.open { transform: none; box-shadow: 8px 0 36px rgba(0, 0, 0, 0.3); }
  .sidebar .sidebar-brand div, .sidebar .sidebar-status { display: flex; }
  .sidebar .sidebar-brand div { display: grid; }
  .sidebar .primary-nav { display: grid; justify-content: stretch; }
  .sidebar .sidebar-brand { padding: 0 4px 18px; }
  .sidebar .primary-nav { justify-content: stretch; align-content: start; }
  .sidebar .nav-item { min-height: 44px; padding: 0 13px; justify-content: flex-start; font-size: 0.86rem; }
  .sidebar .nav-item span { display: inline-block; width: 18px; }
  .sidebar .sidebar-status { margin-top: auto; }
  .tabs-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-area { padding: 18px 16px 48px; }
  .topbar { flex-wrap: wrap; }
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .day-block { grid-template-columns: 1fr; gap: 6px; }
  .need-row strong { min-width: 0; }
}
/* 원본은 620px 아래에서 로그아웃을 한 줄 전체로 늘린다 — 이 앱은 메뉴 단추가 제목 옆에 있어 한 줄에 둔다 */
@media (max-width: 620px) {
  .topbar { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .topbar .topbar-actions, .topbar .secondary-button { width: auto; }
  .topbar h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* 보정(2026-09-23 화면 점검) — 라디오·체크 줄은 가로로, 한 패널 안에 이어지는 카드는 간격을 둔다 */
.card > label.chk-label, .form-grid label.chk-label { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; }
input[type=radio] { width: 16px; height: 16px; accent-color: var(--primary); }
.panel .card + .card, .panel .card + div > .card:first-child { margin-top: 16px; }
.pw-field { display: flex; gap: 6px; align-items: center; }
.pw-field input { flex: 1; }
code, .pw-shown { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.84em; padding: 2px 6px; border-radius: 6px; background: var(--surface-subtle); border: 1px solid var(--line); }