/* 파트너 관리자/포털 공용 디자인시스템 (모던 SaaS 라이트).
   테마: body.theme-admin(파랑) / body.theme-portal(청록) — 포인트색만 다름 */
:root{
  --bg:#f8fafc; --surface:#fff;
  --border:#e2e8f0; --border-soft:#eef2f6;
  --ink:#0f172a; --ink-2:#475569; --muted:#94a3b8;
  --good:#16a34a; --good-soft:#f0fdf4;
  --bad:#dc2626; --bad-soft:#fef2f2;
  --warn:#b45309; --warn-soft:#fffbeb;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.05);
  --shadow-lg:0 10px 32px rgba(15,23,42,.10);
}
body.theme-admin{ --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:#eff6ff; --accent-text:#1e40af; }
body.theme-portal{ --accent:#0d9488; --accent-strong:#0f766e; --accent-soft:#f0fdfa; --accent-text:#0f766e; }

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── 헤더 ─────────────────────────────── */
.top{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 24px; height:56px;
}
.top .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:var(--ink)}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px;
  background:var(--accent); color:#fff; font-weight:800; font-size:14px;
}
.top nav{display:flex; align-items:center; gap:4px}
.top nav a{color:var(--ink-2); text-decoration:none; font-size:13.5px; padding:6px 10px; border-radius:7px}
.top nav a:hover{background:var(--bg); color:var(--ink)}
.top nav .who{color:var(--muted); font-size:13px; margin-right:6px}

.wrap{max-width:1080px; margin:28px auto 60px; padding:0 20px}

/* ── 섹션 타이틀 ──────────────────────── */
h2.sec{font-size:16px; font-weight:700; color:var(--ink); margin:34px 0 12px}
h2.sec:first-child{margin-top:0}
h2.sec .sub{font-weight:400; font-size:13px; color:var(--muted); margin-left:6px}
h3.sec{font-size:14px; font-weight:600; color:var(--ink-2); margin:22px 0 8px}

/* ── 카드 ─────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card.pad{padding:16px 18px}

/* ── KPI 타일 ─────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0 6px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px}
.kpi .lb{font-size:12px; color:var(--ink-2); margin-bottom:4px}
.kpi .v{font-size:23px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink)}
.kpi .v .unit{font-size:13px; font-weight:500; color:var(--muted); margin-left:2px}

/* ── 테이블 ───────────────────────────── */
.card > table{width:100%}
table.tbl{border-collapse:collapse; width:100%; background:var(--surface); font-size:13.5px}
.tbl th{
  text-align:left; font-size:12px; font-weight:600; color:var(--ink-2);
  padding:10px 14px; border-bottom:1px solid var(--border); background:transparent; white-space:nowrap;
}
.tbl td{padding:10px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td, .tbl tr.hv:hover td{background:var(--bg)}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl th.num{text-align:right}
.tbl .empty{color:var(--muted); text-align:center; padding:26px 14px}

/* ── 상태 (색+라벨 병기) ───────────────── */
.st{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; white-space:nowrap}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.st.ok{color:var(--good)} .st.off{color:var(--bad)} .st.wait{color:var(--warn)}

/* ── 뱃지/필 (중립) ────────────────────── */
.pill{display:inline-block; background:var(--accent-soft); color:var(--accent-text); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:500; margin:1px 2px 1px 0}
.tag{display:inline-block; background:#f1f5f9; color:#334155; border-radius:6px; padding:1px 7px; font-size:12px; font-family:Consolas,ui-monospace,monospace}

/* ── 버튼 ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border:1px solid var(--accent); border-radius:8px;
  background:var(--accent); color:#fff; cursor:pointer; text-decoration:none;
  font-size:13.5px; font-weight:600; font-family:inherit; line-height:1.2;
}
.btn:hover{background:var(--accent-strong); border-color:var(--accent-strong)}
.btn.ghost{background:var(--surface); color:var(--ink-2); border-color:var(--border)}
.btn.ghost:hover{background:var(--bg); color:var(--ink)}
.btn.danger{background:var(--bad); border-color:var(--bad)}
.btn.sm{padding:5px 10px; font-size:12.5px; border-radius:7px}

/* ── 폼 ───────────────────────────────── */
input,select,textarea{
  padding:8px 11px; border:1px solid var(--border); border-radius:8px;
  font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--surface);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
input[readonly]{background:var(--bg); color:var(--ink-2)}
input[type=checkbox]{accent-color:var(--accent); width:14px; height:14px}
.field{margin:14px 0}
.field>label{display:block; font-weight:600; margin-bottom:5px; font-size:13px; color:var(--ink)}
.field .hint{color:var(--muted); font-size:12px; margin-top:4px}
.chkgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:3px 14px;
  max-height:190px; overflow:auto; border:1px solid var(--border); padding:10px 12px;
  border-radius:8px; background:var(--surface);
}
.chkgrid label{font-weight:400; font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.chkgrid label .code{color:var(--muted); font-size:11px}

/* ── 코드/자격증명 ─────────────────────── */
.cred{
  font-family:Consolas,ui-monospace,monospace; font-size:12.5px; line-height:1.8;
  background:#0f172a; color:#e2e8f0; padding:14px 18px; border-radius:var(--radius); word-break:break-all;
}
.cred b{color:#7dd3fc; font-weight:600}
code{background:var(--accent-soft); color:var(--accent-text); padding:1px 6px; border-radius:5px; font-family:Consolas,ui-monospace,monospace; font-size:12.5px}
pre{
  background:#0f172a; color:#e2e8f0; padding:14px 16px; border-radius:var(--radius);
  font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre-wrap;
  font-family:Consolas,ui-monospace,monospace;
}

/* ── 텍스트 유틸 ───────────────────────── */
.muted{color:var(--muted); font-size:12.5px}
.desc{color:var(--ink-2); font-size:13px; margin:6px 0 12px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spacer{flex:1}

/* ── 로그인 ───────────────────────────── */
body.login-page{display:flex; min-height:100vh; align-items:center; justify-content:center}
.login-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:36px 34px; width:340px;
}
.login-box .brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:6px; font-weight:700; font-size:16px}
.login-box .sub{text-align:center; color:var(--muted); font-size:12.5px; margin-bottom:22px}
.login-box input{width:100%; margin:5px 0}
.login-box button{width:100%; margin-top:14px; padding:10px}

/* ── API 문서 ─────────────────────────── */
.m{display:inline-block; color:#fff; font-weight:700; font-size:11px; padding:2px 8px; border-radius:5px; margin-right:7px; vertical-align:1px}
.m.get{background:#16a34a}.m.post{background:#2563eb}.m.patch{background:#d97706}.m.del{background:#dc2626}
.ep{font-family:Consolas,ui-monospace,monospace; font-weight:700; font-size:14px}