/* MLAPI Cap Manager — 카카오 공식 컬러 토큰 (kookies-dash feat/front-uiux 와 동일 체계)
   규칙: --brand(노랑)은 면색 전용. 글자·아이콘·선에는 쓰지 않는다. 노랑 위 글자는 --on-brand(검정).
   노랑 계열 글자가 필요하면 --brand-text 만. 상태색은 --ok/--warn/--bad + -bg/-text.
   다크 값은 [data-theme="dark"] 와 prefers-color-scheme 두 곳에 동일하게 둔다(한쪽만 고치지 말 것). */
:root {
  /* 타이포 — 카카오 디자인 패턴 공용 규약 (kakaotechcampus/design-system/ — README.md 규약, tokens.css 토큰 원본)
     display=제목·KPI 숫자 / text=본문·표·폼 / mono=코드·ID·시각. 두 얼굴을 한 줄에 섞지 않는다. */
  --font-display:'IBM Plex Sans KR','Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
  --font-text:'Pretendard','IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: light;
  --brand:#FEE500; --brand-hover:#FEE52B; --brand-active:#E5CE00;
  --brand-tint:#FFF8B8; --brand-tint-soft:#FFFBE0; --brand-text:#5C5300; --on-brand:#191919;
  --ink:#191919; --ink-strong:#191919; --ink-2:#555555; --ink-3:#6B6B6B;
  --surface:#FFFFFF; --surface-2:#FAFAFA; --bg:#F5F5F5; --th-bg:#FAFAFA;
  --line:#F0F0F0; --line-strong:#D9D9D9; --control-border:#BDBDBD;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --ok:#0FAF9A; --ok-bg:#E2F7F3; --ok-text:#0B7365;
  --warn:#F97316; --warn-bg:#FFEDD5; --warn-text:#C2410C;
  --bad:#E85C6A; --bad-bg:#FCEBED; --bad-text:#BC2A3B;
  --none:#A0A0A0; --none-bg:#F0F0F0; --none-text:#555555;
  --info:#2563EB; --info-bg:#E0F0FE; --info-text:#1D4ED8;
  --focus:#191919; --focus-outer:#FEE500;
  --radius:14px; --radius-sm:10px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:#FEE500; --brand-hover:#FFEA51; --brand-active:#E5CE00;
  --brand-tint:#332E00; --brand-tint-soft:#272500; --brand-text:#FFD84D; --on-brand:#191919;
  --ink:#ECECEC; --ink-strong:#FFFFFF; --ink-2:#B4B4BC; --ink-3:#8A8A92;
  --surface:#232327; --surface-2:#2A2A2E; --bg:#1A1A1D; --th-bg:#2A2A2E;
  --line:#303035; --line-strong:#45454C; --control-border:#6E6E76;
  --shadow:0 4px 12px rgba(0,0,0,.45);
  --ok:#4FD98A; --ok-bg:#15301F; --ok-text:#7BE3A8;
  --warn:#FB923C; --warn-bg:#3A2410; --warn-text:#FDBA74;
  --bad:#FF7676; --bad-bg:#3A1A1A; --bad-text:#FF9B9B;
  --none:#6E6E76; --none-bg:#2A2A2E; --none-text:#B4B4BC;
  --info:#6BA8F5; --info-bg:#122A3F; --info-text:#9CC5F8;
  --focus:#FEE500; --focus-outer:#191919;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand:#FEE500; --brand-hover:#FFEA51; --brand-active:#E5CE00;
    --brand-tint:#332E00; --brand-tint-soft:#272500; --brand-text:#FFD84D; --on-brand:#191919;
    --ink:#ECECEC; --ink-strong:#FFFFFF; --ink-2:#B4B4BC; --ink-3:#8A8A92;
    --surface:#232327; --surface-2:#2A2A2E; --bg:#1A1A1D; --th-bg:#2A2A2E;
    --line:#303035; --line-strong:#45454C; --control-border:#6E6E76;
    --shadow:0 4px 12px rgba(0,0,0,.45);
    --ok:#4FD98A; --ok-bg:#15301F; --ok-text:#7BE3A8;
    --warn:#FB923C; --warn-bg:#3A2410; --warn-text:#FDBA74;
    --bad:#FF7676; --bad-bg:#3A1A1A; --bad-text:#FF9B9B;
    --none:#6E6E76; --none-bg:#2A2A2E; --none-text:#B4B4BC;
    --info:#6BA8F5; --info-bg:#122A3F; --info-text:#9CC5F8;
    --focus:#FEE500; --focus-outer:#191919;
  }
}

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font-text);
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; }
h1,h2,h3 { margin:0; font-family:var(--font-display); line-height:1.25; color:var(--ink-strong); letter-spacing:-.03em; }
h1 { font-size:22px; font-weight:700; } h2 { font-size:16px; font-weight:700; } h3 { font-size:14px; font-weight:700; }
a { color:inherit; }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-outer); border-radius:6px; }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--brand); color:var(--on-brand);
  padding:8px 12px; border-radius:8px; font-weight:700; z-index:100; }
.skip-link:focus { left:12px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden] { display:none !important; }

/* ---------- header ---------- */
.topbar { height:6px; background:var(--brand); }
.header { display:flex; align-items:center; gap:14px; padding:16px 28px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.brand img { height:34px; width:auto; display:block; }
.brand .titles { min-width:0; }
.brand .sub { font-size:12px; color:var(--ink-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav { display:flex; gap:4px; margin-left:12px; background:var(--surface-2); border-radius:12px; padding:4px; }
.nav a { padding:8px 14px; border-radius:9px; text-decoration:none; font-weight:600; color:var(--ink-2); min-height:40px; display:inline-flex; align-items:center; }
.nav a[aria-current="page"] { background:var(--brand); color:var(--on-brand); }
.nav a:not([aria-current]):hover { color:var(--ink-strong); background:var(--surface); }
.header .spacer { flex:1; }
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-strong); font-size:13px;
  font-weight:600; cursor:pointer; min-height:40px; transition:background .15s,border-color .15s,color .15s; }
.btn:hover { border-color:var(--ink-3); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.btn.primary:hover { background:var(--brand-hover); }
.btn.danger { border-color:var(--bad); color:var(--bad-text); }
.btn.danger:hover { background:var(--bad); color:#fff; }
.btn.ghost { border-color:transparent; background:transparent; color:var(--ink-2); }
.btn.icon { width:40px; padding:0; justify-content:center; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* ---------- layout ---------- */
main { max-width:1200px; margin:0 auto; padding:20px 28px 56px; }
.section { margin-top:22px; }
.section-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
/* 관리 콘솔 탭 — 선택 상태는 색만이 아니라 밑줄로도 구분한다(색각 접근성). */
.tabs { display:flex; gap:2px; margin-top:22px; border-bottom:1px solid var(--line-strong); overflow-x:auto; }
.tabs button { border:none; background:transparent; color:var(--ink-2); cursor:pointer; font-weight:600; font-size:14px;
  padding:10px 14px; min-height:44px; white-space:nowrap; border-bottom:3px solid transparent; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tabs button:hover { background:var(--surface-2); color:var(--ink-strong); }
.tabs button[aria-selected="true"] { color:var(--ink-strong); border-bottom-color:var(--brand); background:var(--brand-tint-soft); }
.sub-h { font-size:14.5px; font-weight:700; color:var(--ink-strong); margin:20px 0 8px; }
.section-head .meta { color:var(--ink-3); font-size:12.5px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.stat { padding:14px 16px; min-height:82px; display:flex; flex-direction:column; justify-content:center; }
.stat .label { font-size:12px; color:var(--ink-2); }
.stat .value { font-size:22px; font-weight:800; color:var(--ink-strong); margin-top:2px; font-variant-numeric:tabular-nums; }
.stat .value.warn { color:var(--warn-text); } .stat .value.bad { color:var(--bad-text); }
.stat .hint { font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.banner { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px;
  border:1px solid; margin-bottom:14px; }
.banner.info { background:var(--info-bg); border-color:transparent; color:var(--info-text); }
.banner.warn { background:var(--warn-bg); border-color:transparent; color:var(--warn-text); }
.banner.brand { background:var(--brand-tint-soft); border-color:var(--brand-tint); color:var(--brand-text); }
.banner.bad { background:var(--bad-bg); border-color:transparent; color:var(--bad-text); }
.note { font-size:12.5px; color:var(--ink-3); margin:8px 0 0; }

/* ---------- table ---------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; background:var(--surface); font-size:13.5px; }
th,td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { background:var(--th-bg); color:var(--ink-2); font-weight:600; font-size:12px; letter-spacing:.2px; white-space:nowrap; }
tbody tr:last-child td { border-bottom:none; }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 토큰 3열은 한 묶음 — 묶음 머리글은 가운데, 하위 머리글은 한 단 낮춰 종속 관계를 보인다. */
th.grp { text-align:center; border-bottom-color:var(--line-strong); }
th.sub { font-size:11px; font-weight:500; color:var(--ink-3); padding-top:4px; padding-bottom:8px; }
/* 묶음 양 끝에 옅은 경계 — 바로 왼쪽의 금액 열과 섞이지 않게. */
td.tok:first-of-type, th.sub:first-of-type { border-left:1px solid var(--line); }
td.tok:last-of-type, th.sub:last-of-type { border-right:1px solid var(--line); }
.empty { padding:28px; text-align:center; color:var(--ink-3); }
.bar { position:relative; background:var(--none-bg); border-radius:6px; height:10px; min-width:120px; overflow:hidden; }
.bar > i { position:absolute; inset:0 auto 0 0; border-radius:6px; background:var(--ok); }
.bar.warn > i { background:var(--warn); } .bar.exceeded > i { background:var(--bad); }
.bar-label { display:flex; align-items:center; gap:8px; }
.bar-label small { color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge.ok { background:var(--ok-bg); color:var(--ok-text); }
.badge.warn { background:var(--warn-bg); color:var(--warn-text); }
.badge.exceeded { background:var(--bad-bg); color:var(--bad-text); }
.badge.none { background:var(--none-bg); color:var(--none-text); }
.badge.brand { background:var(--brand-tint); color:var(--brand-text); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--line); font-size:12px; color:var(--ink-2); }
.mono { font-family:var(--font-mono); font-size:12px; }

/* ---------- toolbar / forms ---------- */
.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; margin-bottom:12px; }
.seg { display:flex; background:var(--surface-2); border-radius:11px; padding:3px; gap:2px; }
.seg button { border:none; background:transparent; color:var(--ink-2); padding:7px 12px; border-radius:8px; font-weight:600; cursor:pointer; min-height:36px; }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink-strong); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.field { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],select,textarea {
  border:1.5px solid var(--control-border); background:var(--surface); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:13px; min-height:40px; color:var(--ink); }
textarea { min-height:96px; resize:vertical; }
.search { min-width:200px; }

/* ---------- detail view (hash route) ---------- */
.detail-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.detail-head .back { order:-1; }
.detail-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.member-list { display:grid; gap:10px; }
.member { padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center; }
.member .who { font-weight:700; }
.member .who small { font-weight:500; color:var(--ink-3); margin-left:6px; }
.member .spent { font-variant-numeric:tabular-nums; text-align:right; }
.member .keys { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.member .keys .chip.off { opacity:.55; text-decoration:line-through; }
.group { margin-bottom:14px; }
.group summary { cursor:pointer; padding:12px 14px; font-weight:700; display:flex; align-items:center; gap:10px; list-style:none; }
.group summary::-webkit-details-marker { display:none; }
.group summary .meta { margin-left:auto; color:var(--ink-3); font-weight:500; font-size:12.5px; }
.group[open] summary { border-bottom:1px solid var(--line); }

/* ---------- dialog / misc ---------- */
dialog { border:1px solid var(--line-strong); border-radius:var(--radius); padding:18px 20px; max-width:26rem; background:var(--surface); color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.4); }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.sweep-out { background:#0f1117; color:#d6d9e0; border-radius:var(--radius-sm); padding:12px; font-size:12px; max-height:18rem; overflow:auto; white-space:pre-wrap; }
.blocked { background:var(--bad-bg); color:var(--bad-text); padding:8px 12px; border-radius:8px; font-size:12.5px; margin-top:8px; }
.pill-active { background:var(--brand); color:var(--on-brand); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:700; }
.form-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; margin-top:8px; font-size:13px; min-height:58px; }
.table-wrap table tbody:empty::after, td.empty { min-height:44px; }
.login { max-width:26rem; margin:8vh auto; padding:22px 24px; }
.login h1 { margin-bottom:6px; }
.login p { color:var(--ink-2); margin:0 0 12px; font-size:13px; }
.login form { display:grid; gap:10px; }
/* ---- 명시적 새로고침 ---- */
/* 마지막 갱신 시각·소요. 헤더에서 폭을 많이 먹지 않게 작게. */
.stamp { font-size:12px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; }
/* 헤더는 한 줄 flex 라 고정 폭 요소가 늘면 좁은 화면에서 밀린다. 갱신 시각은 부가 정보이므로
   버튼보다 먼저 접는다 — 버튼은 남아야 기능에 닿을 수 있다. */
@media (max-width:1024px) { .stamp { display:none; } }
.stamp.bad { color:var(--bad-text); }
#refreshBtn[aria-busy="true"] span { display:inline-block; animation:spin 900ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 진행률을 알 수 없으므로 **부정형** 막대 — 가짜 퍼센트를 그리지 않는다.
   헤더가 sticky 라 그 바로 아래에 붙여 화면을 밀지 않게 한다. */
.refresh-bar { position:sticky; top:0; z-index:19; height:3px; background:var(--line);
  overflow:hidden; }
.refresh-bar i { display:block; height:100%; width:40%; background:var(--brand);
  animation:slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform:translateX(-100%); } 100% { transform:translateX(350%); } }

@media (max-width:720px) {
  .header { padding:12px 14px; flex-wrap:wrap; } main { padding:14px 14px 48px; }
  .brand .sub { display:none; } .nav { margin-left:0; order:3; width:100%; justify-content:space-between; }
  .member { grid-template-columns:1fr; } .member .spent { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  /* 움직임만 없애고 막대 자체는 남긴다 — 진행 중이라는 사실은 계속 보여야 한다. */
  #refreshBtn[aria-busy="true"] span, .refresh-bar i { animation:none !important; }
  .refresh-bar i { width:100%; opacity:.55; }
}