/* 꼬꼬비즈 - 공통 스타일 (업무용 앱 표준 디자인) */

:root{
  --bg:#f4f6fa; --panel:#fff; --panel2:#fbfcfe; --line:#e4e8ef;
  --tx:#131a26; --tx2:#5c6779; --tx3:#8b95a6;
  --brand:#2563eb; --brand-s:#eef3ff;
  --ok:#0f9d63;   --ok-s:#e8f8f1;
  --warn:#c98200;  --warn-s:#fdf4e3;
  --bad:#d93a3a;  --bad-s:#fdeded;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);
  --r:14px;
}
html[data-theme="dark"]{
  --bg:#0e1116; --panel:#161a22; --panel2:#1b2029; --line:#272d38;
  --tx:#e8ecf3; --tx2:#a4aebf; --tx3:#7b8598; --brand:#5b8cff; --brand-s:#1b2740;
  --ok:#35c98d; --ok-s:#122b22; --warn:#e8a33d; --warn-s:#2c2415; --bad:#ff6b6b; --bad-s:#331a1c;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Noto Sans KR",sans-serif;
  font-size:14px; line-height:1.6;
}
a{ color:var(--brand); }

/* ── 헤더 ── */
header.top{
  position:sticky; top:0; z-index:30; background:var(--panel);
  border-bottom:1px solid var(--line); padding:12px 22px;
  display:flex; align-items:center; gap:14px;
}
header.top .logo{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
header.top .logo .dot{ color:var(--brand); }
header.top .metaline{ color:var(--tx2); font-size:12.5px; }
header.top .sp{ flex:1; }
header.top nav a{
  text-decoration:none; color:var(--tx2); font-weight:600; font-size:13px;
  padding:7px 12px; border-radius:9px;
}
header.top nav a:hover{ background:var(--brand-s); color:var(--brand); }
header.top nav a.on{ background:var(--brand-s); color:var(--brand); }

.iconbtn{
  border:1px solid var(--line); background:var(--panel2); color:var(--tx);
  border-radius:9px; padding:7px 11px; cursor:pointer; font-size:14px;
}
.iconbtn:hover{ border-color:var(--brand); }

main{ max-width:1500px; margin:0 auto; padding:22px; }

/* ── 카드 ── */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px;
}
.card h2{ margin:0 0 14px; font-size:15.5px; display:flex; align-items:baseline; gap:9px; }
.card h2 .sub{ font-weight:500; font-size:12.5px; color:var(--tx3); }

.two{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
@media(max-width:1080px){ .two{ grid-template-columns:1fr; } }

/* ── KPI ── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px; }
.kpi{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:15px 18px 15px 22px; overflow:hidden;
}
.kpi::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand); }
.kpi.ok::after{ background:var(--ok); } .kpi.bad::after{ background:var(--bad); }
.kpi.warn::after{ background:var(--warn); }
.kpi .lab{ font-size:12.5px; color:var(--tx2); font-weight:600; }
.kpi .big{ font-size:27px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.02em; }
.kpi .sub{ font-size:12px; color:var(--tx3); }

/* ── 표 ── */
table{ width:100%; border-collapse:collapse; font-size:13.2px; }
th,td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th{ font-size:12px; color:var(--tx2); font-weight:700; background:var(--panel2); white-space:nowrap; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.c,th.c{ text-align:center; }
tbody tr:hover{ background:var(--panel2); }
.tablewrap{ overflow-x:auto; }

/* ── 배지 ── */
.chip{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px;
  font-weight:700; border:1px solid; white-space:nowrap;
}
.chip.ok{ color:var(--ok); border-color:var(--ok); background:var(--ok-s); }
.chip.warn{ color:var(--warn); border-color:var(--warn); background:var(--warn-s); }
.chip.bad{ color:var(--bad); border-color:var(--bad); background:var(--bad-s); }
.chip.info{ color:var(--brand); border-color:var(--brand); background:var(--brand-s); }
.chip.gray{ color:var(--tx3); border-color:var(--line); background:var(--panel2); }

/* 매칭 근거 배지 */
.why{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.why span{
  font-size:11px; padding:2px 8px; border-radius:7px;
  background:var(--brand-s); color:var(--brand); border:1px solid var(--brand);
}
.why span.w{ background:var(--warn-s); color:var(--warn); border-color:var(--warn); }

/* ── 버튼 ── */
.btn{
  border:1px solid var(--line); background:var(--panel2); color:var(--tx);
  border-radius:9px; padding:7px 13px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn:hover{ border-color:var(--brand); color:var(--brand); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ filter:brightness(1.08); color:#fff; }
.btn.ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.ok:hover{ filter:brightness(1.08); color:#fff; }
.btn.danger{ background:var(--bad-s); border-color:var(--bad); color:var(--bad); }
.btn.sm{ padding:4px 9px; font-size:12px; }

input,select,textarea{
  font-family:inherit; font-size:13.5px; color:var(--tx); background:var(--panel);
  border:1px solid var(--line); border-radius:9px; padding:8px 11px; width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-s);
}
label.f{ display:block; font-size:12px; color:var(--tx2); font-weight:600; margin:0 0 4px; }
.row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

/* ── 진행 바 ── */
.bar{ height:9px; border-radius:99px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--brand); }
.bar > i.ok{ background:var(--ok); } .bar > i.warn{ background:var(--warn); } .bar > i.bad{ background:var(--bad); }

/* ── 빈 상태 ── */
.empty{ text-align:center; color:var(--tx3); padding:34px 12px; font-size:13.5px; }

/* ── 모달 ── */
.modalWrap[hidden]{ display:none; }           /* hidden 이 display:flex 를 이기도록 반드시 필요 */
.modalWrap{
  position:fixed; inset:0; z-index:80; background:rgba(10,14,20,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5); width:min(620px,100%);
  max-height:86vh; overflow:auto; padding:20px 22px;
}
.modal h3{ margin:0 0 14px; font-size:16px; }
.modal .foot{ display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }

/* ── 모바일 반응형 ── */
@media(max-width:760px){
  header.top{ flex-wrap:wrap; padding:10px 14px; row-gap:8px; }
  header.top .metaline{ font-size:11.5px; }
  header.top nav{
    order:10; width:100%; display:flex; gap:4px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  header.top nav a{ padding:7px 11px; white-space:nowrap; }
  header.top #evsel{ max-width:46vw; font-size:12.5px; }
  main{ padding:14px 12px; }
  .card{ padding:14px 14px; }
  .card h2{ flex-wrap:wrap; }
  th,td{ padding:8px 7px; }
  .kpis{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi .big{ font-size:23px; }
  .modal{ padding:16px 16px; }
  #toast{ width:max-content; max-width:92vw; text-align:center; }
}
@media(max-width:420px){
  .kpis{ grid-template-columns:1fr 1fr; }
  header.top .logo{ font-size:16px; }
}

/* ── 토스트 ── */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#131a26; color:#fff; padding:11px 20px; border-radius:11px;
  font-size:13.5px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:200; box-shadow:0 8px 30px -8px rgba(0,0,0,.5);
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }