/* ─────────────────────────────────────────────────────────────
   꼬꼬비즈 디자인 시스템  v2 (2026-09)
   토큰 → 타이포 → 레이아웃 → 컴포넌트 → 반응형 → 인쇄
   브랜드 색은 config.php 'brand' 로 --brand / --accent 만 덮어쓴다.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#F4F5F8; --panel:#FFFFFF; --panel2:#F8F9FB; --line:#E5E7EC; --line2:#EEF0F4;
  --tx:#0F172A; --tx2:#4B5565; --tx3:#8B94A5;
  --ink:#0E1B33; --ink-tx:#FFFFFF;
  --brand:#2B4FD8; --brand-h:#2140B8; --brand-s:#EBF0FF; --brand-t:#C9D6FF;
  --accent:#FF6A3D; --accent-s:#FFEFE8;
  --ok:#159A5F; --ok-s:#E6F6EE;
  --warn:#C27A00; --warn-s:#FFF4E0;
  --bad:#D6404A; --bad-s:#FDECEE;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 30px -14px rgba(15,23,42,.18);
  --shadow-lg:0 30px 70px -28px rgba(15,23,42,.4);
  --r:14px; --r-sm:10px; --r-lg:20px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0B0F17; --panel:#121826; --panel2:#171E2E; --line:#242C3D; --line2:#1C2333;
  --tx:#E7EBF3; --tx2:#A3ADBF; --tx3:#6F7A8E;
  --ink:#E7EBF3; --ink-tx:#0E1B33;
  --brand:#6D8CFF; --brand-h:#8AA3FF; --brand-s:#1A2440; --brand-t:#2B3C6B;
  --accent:#FF7E58; --accent-s:#34211B;
  --ok:#3CCB8A; --ok-s:#11291F; --warn:#F0A63A; --warn-s:#2E2312; --bad:#FF6B75; --bad-s:#33191C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ── 리셋 · 타이포 ── */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--font); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 0;
  word-break:keep-all; overflow-wrap:break-word;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
b,strong{ font-weight:700; }
h1,h2,h3,h4{ letter-spacing:-.01em; }
svg.ic{ flex:0 0 auto; vertical-align:-3px; }
button{ font-family:inherit; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; }
::selection{ background:var(--brand-t); }

/* ── 로고 ── */
.kb-logo{ display:inline-flex; align-items:center; gap:9px; color:var(--tx); text-decoration:none !important; font-weight:700; letter-spacing:-.02em; }
.kb-logo .kb-word{ font-size:17px; line-height:1; }
.kb-mark{ display:block; border-radius:28%; flex:0 0 auto; }

/* ── 상단바 ── */
header.top{
  position:sticky; top:0; z-index:30; background:var(--panel);
  border-bottom:1px solid var(--line); padding:0 22px; min-height:60px;
  display:flex; align-items:center; gap:14px;
}
html[data-theme="dark"] header.top{ background:rgba(18,24,38,.92); backdrop-filter:blur(10px); }
header.top .brandcol{ display:flex; align-items:center; gap:14px; min-width:0; }
header.top .metaline{ color:var(--tx3); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; padding-left:14px; border-left:1px solid var(--line); line-height:1.3; }
header.top .evpick{ display:flex; align-items:center; gap:8px; }
header.top .evpick label{ font-size:11.5px; font-weight:600; color:var(--tx3); letter-spacing:.02em; }
header.top .evpick select{ width:auto; max-width:240px; padding:6px 30px 6px 10px; font-size:13px; font-weight:600; border-radius:9px; }
header.top .sp{ flex:1; }
header.top nav{ display:flex; align-items:center; gap:2px; }
header.top nav a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--tx2); font-weight:600; font-size:13px;
  padding:8px 11px; border-radius:9px; transition:background .15s, color .15s; white-space:nowrap;
}
header.top nav a:hover{ background:var(--panel2); color:var(--tx); text-decoration:none; }
header.top nav a.on{ background:var(--brand-s); color:var(--brand); }
header.top nav a.home{ color:var(--tx3); padding-right:9px; margin-right:6px; border-right:1px solid var(--line); border-radius:9px 0 0 9px; }
header.top nav a.home span{ display:none; }
header.top .greet{ font-size:12.5px; color:var(--tx3); white-space:nowrap; }
header.top .greet b{ color:var(--tx); }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--line); background:var(--panel); color:var(--tx2);
  border-radius:9px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.iconbtn:hover{ border-color:var(--brand-t); color:var(--brand); background:var(--brand-s); }

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-sm); padding:20px 22px; margin-bottom:16px;
}
.card h2{ margin:0 0 14px; font-size:15px; font-weight:700; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; line-height:1.4; }
.card h2 .sub{ font-weight:400; font-size:12.5px; color:var(--tx3); }
.card h2 .sub b{ font-weight:600; }
.card h2 .lt{ font-weight:500; font-size:12px; color:var(--tx3); margin-left:auto; }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.toolbar .sp{ flex:1; }
.toolbar .note{ font-size:12.5px; color:var(--tx3); }
.toolbar input:not([type=number]){ width:220px; }
.toolbar select{ width:auto; }
.inl{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tx2); }
.inl input[type=number]{ width:62px; padding:5px 8px; font-size:13px; }

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

/* ── KPI ── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:16px; }
.kpi{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-sm); padding:16px 18px 14px;
}
.kpi .lab{ font-size:12.5px; color:var(--tx2); font-weight:600; display:flex; align-items:center; gap:7px; }
.kpi .lab::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-s); }
.kpi.ok .lab::before{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-s); }
.kpi.bad .lab::before{ background:var(--bad); box-shadow:0 0 0 3px var(--bad-s); }
.kpi.warn .lab::before{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-s); }
.kpi .big{ font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:6px; letter-spacing:-.03em; line-height:1.1; }
.kpi .sub{ font-size:12px; color:var(--tx3); margin-top:4px; }

/* ── 표 ── */
table{ width:100%; border-collapse:collapse; font-size:13.2px; }
th,td{ padding:10px 10px; border-bottom:1px solid var(--line2); text-align:left; vertical-align:middle; }
th{ font-size:11.5px; color:var(--tx3); font-weight:600; letter-spacing:.02em; white-space:nowrap; background:transparent; border-bottom:1px solid var(--line); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.c,th.c{ text-align:center; }
tbody tr{ transition:background .12s; }
tbody tr:hover{ background:var(--panel2); }
tbody tr:last-child td{ border-bottom:none; }
.tablewrap{ overflow-x:auto; margin:0 -6px; padding:0 6px; }
td .muted{ color:var(--tx3); font-size:11.5px; }

/* ── 배지 ── */
.chip{
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:7px; font-size:11.5px;
  font-weight:600; white-space:nowrap; line-height:1.3; background:var(--panel2); color:var(--tx2);
}
.chip.ok{ color:var(--ok); background:var(--ok-s); }
.chip.warn{ color:var(--warn); background:var(--warn-s); }
.chip.bad{ color:var(--bad); background:var(--bad-s); }
.chip.info{ color:var(--brand); background:var(--brand-s); }
.chip.gray{ color:var(--tx3); background:var(--panel2); }
.chip .ic{ width:12px; height:12px; }

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

/* ── 버튼 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--panel); color:var(--tx);
  border-radius:var(--r-sm); padding:0 13px; height:36px; font-size:13.5px; font-weight:600; cursor:pointer;
  text-decoration:none !important; transition:background .15s, border-color .15s, color .15s, transform .05s; white-space:nowrap;
}
.btn:hover{ background:var(--panel2); border-color:#D3D8E2; color:var(--tx); }
html[data-theme="dark"] .btn:hover{ border-color:#34405A; }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-h); border-color:var(--brand-h); color:#fff; }
.btn.ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.ok:hover{ filter:brightness(1.06); color:#fff; }
.btn.danger{ background:var(--panel); border-color:var(--line); color:var(--bad); }
.btn.danger:hover{ background:var(--bad-s); border-color:var(--bad-s); color:var(--bad); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--tx2); }
.btn.ghost:hover{ background:var(--panel2); }
.btn.sm{ height:30px; padding:0 10px; font-size:12.5px; border-radius:8px; gap:5px; }
.btn.sm .ic{ width:13px; height:13px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn .ic{ width:15px; height:15px; }

/* ── 폼 ── */
input,select,textarea{
  font-family:inherit; font-size:13.5px; color:var(--tx); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 11px; width:100%; line-height:1.4;
  transition:border-color .15s, box-shadow .15s;
}
select{ appearance:none; -webkit-appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B94A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:14px; }
input::placeholder,textarea::placeholder{ color:var(--tx3); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-s); }
input[type=radio],input[type=checkbox]{ width:auto; accent-color:var(--brand); margin:0 4px 0 0; vertical-align:-1px; }
label.f{ display:block; font-size:12px; color:var(--tx2); font-weight:600; margin:0 0 5px; }
label.f .req{ color:var(--bad); }
.row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
textarea{ resize:vertical; }

/* ── 진행 바 ── */
.bar{ height:8px; border-radius:99px; background:var(--line2); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .4s ease; }
.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:32px 12px; font-size:13.5px; line-height:1.7; }
.empty .ic{ display:block; margin:0 auto 8px; width:28px; height:28px; color:var(--tx3); opacity:.7; }

/* ── 모달 ── */
.modalWrap[hidden]{ display:none; }           /* hidden 이 display:flex 를 이기도록 반드시 필요 */
.modalWrap{
  position:fixed; inset:0; z-index:80; background:rgba(8,12,24,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); width:min(620px,100%);
  max-height:88vh; overflow:auto; padding:22px 24px;
  animation:kb-pop .18s ease-out;
}
@keyframes kb-pop{ from{ opacity:0; transform:translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }
.modal h3{ margin:0 0 14px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.modal p.desc{ color:var(--tx2); font-size:13px; margin:-6px 0 14px; }
.modal .foot{ display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

/* ── 토스트 ── */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--ink-tx); padding:11px 18px; 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:var(--shadow-lg);
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── 이용 안내 (details) ── */
.guide{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.guide summary{ cursor:pointer; padding:14px 20px; font-size:14.5px; font-weight:700; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.guide summary::-webkit-details-marker{ display:none; }
.guide summary .ic{ color:var(--brand); }
.guide summary .gs{ font-size:12px; font-weight:500; color:var(--tx3); }
.guide summary::after{ content:""; margin-left:auto; width:16px; height:16px; opacity:.6;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s; }
.guide[open] summary::after{ transform:rotate(180deg); }
.guide .gbody{ padding:0 20px 18px; display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.guide .gitem{ font-size:13.2px; line-height:1.65; color:var(--tx2); padding:12px 14px; border:1px solid var(--line2); border-radius:11px; background:var(--panel2); }
.guide .gitem b{ display:block; color:var(--tx); font-size:13.5px; margin-bottom:3px; }
.guide .gitem u{ text-decoration:none; font-weight:600; color:var(--tx); }
.guide .gitem code{ font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:0 5px; }
.guide .gtip{ grid-column:1 / -1; font-size:13.2px; line-height:1.6; padding:12px 14px; border-radius:11px; background:var(--brand-s); color:var(--tx); border:1px solid var(--brand-t); }
.guide .gtip b{ color:var(--brand); }
@media(max-width:900px){ .guide .gbody{ grid-template-columns:1fr; } }

/* ── 키 코드 ── */
.keybox{ background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-size:13px; user-select:all; }

/* ── 반응형 ── */
@media(max-width:1180px){ header.top .metaline{ display:none; } }
@media(max-width:960px){
  header.top nav a span{ display:none; }
  header.top nav a{ padding:8px 9px; }
  header.top .greet{ display:none; }
}
@media(max-width:760px){
  header.top{ flex-wrap:wrap; padding:10px 14px; row-gap:8px; }
  header.top .evpick{ order:5; width:100%; }
  header.top .evpick select{ max-width:none; width:100%; }
  header.top nav{ order:10; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  header.top nav a span{ display:inline; }
  main{ padding:14px 12px; }
  .card{ padding:16px 14px; }
  th,td{ padding:9px 7px; }
  .kpis{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi .big{ font-size:24px; }
  .modal{ padding:18px 16px; }
  .toolbar input:not([type=number]){ width:100%; }
  #toast{ width:max-content; max-width:92vw; text-align:center; }
}
@media(max-width:420px){ .kb-logo .kb-word{ font-size:16px; } }

/* ── 인쇄 ── */
@media print{
  header.top, .noprint, #toast{ display:none !important; }
  body{ background:#fff; }
  .card, .kpi{ box-shadow:none; break-inside:avoid; }
}

/* ── 전화 링크 (운영 관리 표 · 전시자 화면) ── */
a.tel{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--brand); text-decoration:none; }
a.tel:hover{ text-decoration:underline; }