/* app.css — 전체 스타일 (라이트 · 실무 콘솔 톤) */
* { box-sizing: border-box; }
:root {
  --bg:#F4F6F8; --panel:#fff; --border:#D9DEE4; --text:#1F2937; --muted:#6B7280;
  --accent:#1F6E43; --accent2:#0B6BAF; --bad:#B91C1C; --amber:#B45309;
}
html,body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif; font-size:13px; }
button { font-family:inherit; font-size:12px; padding:6px 12px; border:1px solid var(--border);
  border-radius:4px; background:#fff; cursor:pointer; }
button:hover { background:#F0F2F5; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { background:#175634; }
button.danger { color:var(--bad); border-color:#E5B4B4; }
input, select, textarea { font-family:inherit; font-size:12px; padding:6px 8px;
  border:1px solid var(--border); border-radius:4px; background:#fff; color:var(--text); }
.muted { color:var(--muted); }
.err { color:var(--bad); font-size:12px; min-height:16px; margin-top:6px; }

/* ===== 좌측 사이드바 레이아웃 (2026-08-19) ===== */
.badge-demo { background:#FEF3C7; color:#92400E; font-size:10px; padding:1px 7px; border-radius:10px; font-weight:700; }
.role-chip { color:#fff; font-size:10px; font-weight:700; padding:2px 9px; border-radius:10px; }
.role-master { background:var(--accent); }
.role-manager { background:#B3741A; }
.role-client { background:var(--accent2); }
.role-client_member { background:#6B7280; }

.layout { display:flex; min-height:100vh; }
.sidebar { width:220px; flex-shrink:0; background:#1F2937; color:#E5E7EB;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side-brand { padding:16px 16px 12px; border-bottom:1px solid #374151; }
.side-title { font-weight:700; font-size:15px; color:#fff; line-height:1.3; }
.side-ver { font-size:10px; color:#9CA3AF; margin-top:3px; }
.side-nav { flex:1; overflow-y:auto; padding:8px 0; }
.nav-group { margin-bottom:6px; }
.nav-group-t { font-size:10px; color:#9CA3AF; font-weight:700; padding:8px 16px 4px; letter-spacing:.03em; }
.nav-item { display:block; width:100%; text-align:left; border:none; background:transparent; color:#D1D5DB;
  padding:9px 16px; font-size:13px; border-radius:0; cursor:pointer; border-left:3px solid transparent; }
.nav-item:hover { background:#374151; color:#fff; }
.nav-item.active { background:#111827; color:#fff; font-weight:700; border-left-color:var(--accent); }
.side-user { padding:12px 16px; border-top:1px solid #374151; }
.side-user button { background:#374151; color:#E5E7EB; border-color:#4B5563; }
.side-user button:hover { background:#4B5563; }
main#tab-body { flex:1; padding:16px 22px 60px; max-width:1600px; overflow-x:hidden; }
#side-toggle { display:none; position:fixed; top:10px; left:10px; z-index:50;
  background:#1F2937; color:#fff; border:none; width:40px; height:40px; border-radius:8px; font-size:18px; }

@media (max-width:820px){
  .sidebar { position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:transform .2s; box-shadow:2px 0 12px rgba(0,0,0,.3); }
  .sidebar.open { transform:translateX(0); }
  #side-toggle { display:block; }
  main#tab-body { padding:56px 12px 60px; }
}

/* 카드/표 */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-bottom:12px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:10px 12px; }
.card .lb { font-size:11px; color:var(--muted); }
.card .v { font-size:19px; font-weight:700; margin-top:2px; }
.card.green .v { color:var(--accent); } .card.red .v { color:var(--bad); }
.card.amber .v { color:var(--amber); } .card.blue .v { color:var(--accent2); }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
  background:#fff; border:1px solid var(--border); border-radius:6px; padding:8px 10px; }
.toolbar .sp { flex:1; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px; margin-bottom:12px; }
.panel h3 { margin:0 0 10px; font-size:13px; }
.tbl-wrap { background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:auto; margin-bottom:12px; }
table { border-collapse:collapse; width:100%; font-size:12px; }
th { background:#F0F2F5; text-align:left; font-size:11px; color:#374151; position:sticky; top:0; }
th, td { border-bottom:1px solid #EDF0F3; padding:7px 9px; white-space:nowrap; }
td.wrap { white-space:normal; max-width:260px; overflow-wrap:anywhere; }
tr:hover td { background:#FAFBFC; }
.num { text-align:right; font-variant-numeric:tabular-nums; }

/* 상태 배지/셀렉트 */
select.status { font-weight:700; border-radius:3px; padding:3px 6px; font-size:11px; }
select.status.valid { background:#E7F3EB; color:#166534; border-color:#8FC3A2; }
select.status.noanswer { background:#FEF3C7; color:#92400E; border-color:#E4C56E; }
select.status.wrongnum, select.status.duplicate, select.status.dead { background:#FDE8E8; color:#991B1B; border-color:#E4A0A0; }
select.status.cancel { background:#E5E7EB; color:#374151; border-color:#B7BCC4; }
select.status.unable { background:#F0E3D3; color:#7A4B12; border-color:#D4B48C; }
.pill { display:inline-block; font-size:10px; font-weight:700; border-radius:9px; padding:1px 7px; }
.pill.dup { background:#FDE8E8; color:#991B1B; }
.pill.destroyed { background:#E5E7EB; color:#6B7280; }
.pill.ok { background:#E7F3EB; color:#166534; }
.pill.fail { background:#FDE8E8; color:#991B1B; }
.pill.bot { background:#EDE9FE; color:#5B21B6; }
.pill.lead { background:#DBEAFE; color:#1E40AF; }

/* 로그인 */
.login-card { max-width:420px; margin:70px auto; background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:28px; display:flex; flex-direction:column; gap:10px; text-align:center; }
.login-card h2 { margin:0; }
.role-btns { display:flex; flex-direction:column; gap:8px; }
.role-btns button { padding:12px; font-size:13px; }

/* 토스트 */
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:#1F2937; color:#fff; padding:9px 16px; border-radius:6px; font-size:12px;
  opacity:0; pointer-events:none; transition:all .2s; z-index:99; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.bad { background:var(--bad); }
#toast.bad.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* 코드 발급 박스 */
textarea.code { width:100%; font-family:Consolas,monospace; font-size:11px; min-height:110px; background:#F8FAFC; }
.pagin { display:flex; gap:4px; align-items:center; padding:8px; }
.pagin button.cur { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (max-width:760px){ main{padding:10px 8px 60px} th,td{padding:6px 6px} }

/* 도움말 버튼(?) + 팝오버 */
.help-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; padding:0; margin-left:5px; border-radius:50%;
  border:1px solid var(--border); background:#EEF2F6; color:var(--muted);
  font-size:11px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle;
}
.help-btn:hover { background:#4F46E5; color:#fff; border-color:#4F46E5; }
.help-pop {
  position:absolute; z-index:9999; max-width:340px; width:max-content;
  background:#fff; color:var(--text); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18);
  padding:14px 16px 14px; font-size:12px; line-height:1.6;
}
.help-pop h4 { margin:0 0 6px; font-size:13px; }
.help-pop code { background:#F1F3F5; padding:1px 5px; border-radius:4px; font-size:11px; }
.help-pop ul { margin:6px 0; padding-left:18px; }
.help-pop li { margin:3px 0; }
.help-pop-x {
  position:absolute; top:8px; right:10px; cursor:pointer; color:var(--muted);
  font-size:13px; line-height:1;
}
.help-pop-x:hover { color:var(--text); }