/* design-lang-kit.css — 재사용 컴포넌트 클래스 라이브러리
 * 계약 토큰(20 시맨틱 + --radius/--font-sans)에만 의존 → 테마 CSS(build/<theme>.css)를
 * 앞에 깔면 어떤 테마든 그대로 입혀진다. 소비: <link build/<theme>.css> + <link 이 파일> + 클래스 사용.
 * status(ok/warn) 어휘는 아직 계약 미수록 → 여기서 잠정 제공(라이트/다크 둘 다). 계약 채택 시 이관.
 */
:root{
  --ok:#0E9F6E; --ok-bg:#E5F6EE; --warn:#D98A00; --warn-bg:#FBF1DF; --dng-bg:#FCEEEE;
  --kit-rb:calc(var(--radius, 0.75rem) - 4px);   /* control radius = card - 4 */
}
.dark{
  --ok:#34D399; --ok-bg:#11271F; --warn:#FBBF24; --warn-bg:#2A2310; --dng-bg:#2A1518;
}
.dl{ font-family:var(--font-sans, system-ui, sans-serif); color:var(--foreground); letter-spacing:-.01em }

/* ── Button ───────────────────────────────── */
.btn{height:38px;padding:0 16px;border:1px solid transparent;border-radius:999px;font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-sans)}
.btn .ic{width:16px;height:16px}
.btn.pri{background:var(--primary);color:var(--primary-foreground)}
.btn.sec{background:var(--card);color:var(--foreground);border-color:var(--border)}
.btn.gho{background:transparent;color:var(--primary)}
.btn.dng{background:var(--destructive);color:#fff}
.btn.sm{height:30px;padding:0 12px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── Input ────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:6px;max-width:280px}
.fld label{font-size:12px;font-weight:600;color:var(--muted-foreground)}
.inp{position:relative}
.inp input{width:100%;height:38px;padding:0 12px;border:1px solid var(--input,var(--border));border-radius:var(--kit-rb);background:var(--card);font:inherit;font-size:13px;color:var(--foreground);outline:none;font-family:var(--font-sans)}
.inp.ico input{padding-left:36px}
.inp input:focus{border-color:var(--ring,var(--primary));box-shadow:0 0 0 3px var(--accent)}
.inp .si{position:absolute;left:11px;top:10px;color:var(--muted-foreground);opacity:.7}

/* ── Badge / Pill ─────────────────────────── */
.pill{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.pill .o{width:6px;height:6px;border-radius:50%}
.pill.run{background:var(--accent);color:var(--accent-foreground)}.pill.run .o{background:var(--primary)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.ok .o{background:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.warn .o{background:var(--warn)}
.pill.fail{background:var(--dng-bg);color:var(--destructive)}.pill.fail .o{background:var(--destructive)}
.cnt{font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:var(--primary-foreground);display:inline-flex;align-items:center;justify-content:center}

/* ── Card / KPI ───────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;color:var(--card-foreground)}
.card .ct{font-size:14px;font-weight:600;margin-bottom:6px}
.card .cb{font-size:13px;color:var(--muted-foreground);line-height:1.5}
.kc .kt{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.kc .ki{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--primary);display:grid;place-items:center}.kc .ki .ic{width:17px;height:17px}
.kc .kl{font-size:12px;color:var(--muted-foreground)}
.kc .kv{font-size:24px;font-weight:700;letter-spacing:-.02em}
.kc .kd{font-size:11.5px;font-weight:600;color:var(--ok);margin-top:6px;display:flex;align-items:center;gap:4px}.kc .kd .ic{width:14px;height:14px}
.kc .kd.dn{color:var(--destructive)}

/* ── Table ────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tr{display:flex;align-items:center;gap:11px;padding:11px 15px;font-size:13px;color:var(--foreground)}
.tr.h{font-size:11px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.03em;background:var(--muted)}
.tr+.tr{border-top:1px solid var(--border)}
.tr .col2{margin-left:auto}

/* ── Avatar ───────────────────────────────── */
.av{flex:none;border-radius:50%;background:var(--accent);color:var(--primary);display:inline-grid;place-items:center;font-weight:700;font-family:var(--font-sans)}
.av.s{width:26px;height:26px;font-size:11px}.av.m{width:34px;height:34px;font-size:13px}.av.l{width:44px;height:44px;font-size:16px}

/* ── Command palette ──────────────────────── */
.pal-box{background:var(--popover);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.18);overflow:hidden;color:var(--popover-foreground)}
.pal-box .ph{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border);color:var(--muted-foreground);font-size:13px}
.pal-box .pcat{font-size:10px;font-weight:700;color:var(--muted-foreground);opacity:.7;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px 3px}
.pal-box .pi{display:flex;align-items:center;gap:11px;padding:9px 12px;font-size:13px}
.pal-box .pi .ic{width:16px;height:16px;color:var(--muted-foreground)}
.pal-box .pi.on{background:var(--accent);color:var(--accent-foreground)}.pal-box .pi.on .ic{color:var(--primary)}

/* ── Sidebar nav ──────────────────────────── */
.navbox{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:9px}
.nav{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:11px;font-size:13px;color:var(--muted-foreground)}
.nav.on{background:var(--accent);color:var(--primary);font-weight:600}

/* ── Switch ───────────────────────────────── */
.sw{width:42px;height:24px;border-radius:999px;background:var(--border);position:relative;cursor:pointer;transition:background .15s}
.sw.on{background:var(--primary)}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on i{left:21px}

.ic{width:18px;height:18px;flex:none;stroke-width:2}

/* ── 상태 완성(8-state: hover·loading·error·empty) — 소비자가 각자 빠뜨리던 것을 kit이 공급 */
.btn.pri:hover{filter:brightness(1.09)}.btn.sec:hover{background:var(--muted)}
.btn.gho:hover{background:var(--accent)}.btn.dng:hover{filter:brightness(1.09)}
.nav:hover:not(.on){background:var(--muted);color:var(--foreground)}
.tr:hover:not(.h){background:var(--muted)}
.pal-box .pi:hover:not(.on){background:var(--muted)}
/* loading — .btn.ld: 스피너 표시 + 입력 차단 */
.btn.ld{pointer-events:none;opacity:.75;position:relative}
.btn.ld::before{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dl-spin .7s linear infinite}
@keyframes dl-spin{to{transform:rotate(360deg)}}
/* skeleton — 로딩 중 자리 표시(.skel) */
.skel{background:var(--muted);border-radius:var(--kit-rb);position:relative;overflow:hidden;color:transparent !important;user-select:none}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:dl-shimmer 1.4s ease infinite}
@keyframes dl-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* error — .inp.err + .fld .emsg: 인라인 검증(색+테두리+텍스트, 색에만 의존 X) */
.inp.err input{border-color:var(--destructive)}
.inp.err input:focus,.inp.err input:focus-visible{border-color:var(--destructive);box-shadow:0 0 0 3px var(--dng-bg)}
.fld .emsg{font-size:11.5px;font-weight:500;color:var(--destructive);display:flex;align-items:center;gap:5px}.fld .emsg .ic{width:13px;height:13px}
/* empty — 0건 상태 블록(행복경로만 만들지 않기) */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted-foreground)}
.empty .ic{width:22px;height:22px;opacity:.6}
.empty .et{font-size:13px;font-weight:600;color:var(--foreground)}
.empty .ed{font-size:12px;line-height:1.5}
/* pill 대기(회색) — 실소비(ai-fleet 상태어휘: 대기·할당·실행·완료·실패) 보완 */
.pill.off{background:var(--muted);color:var(--muted-foreground)}.pill.off .o{background:var(--muted-foreground)}

/* ── a11y ─────────────────────────────────── */
/* 키보드 포커스만 링 표시(WCAG 2.4.7·2.4.11) — 마우스 클릭엔 안 뜸(:focus-visible) */
.btn:focus-visible,.sw:focus-visible,.nav:focus-visible,.pal-box .pi:focus-visible,.tr:focus-visible,.av:focus-visible{
  outline:2px solid var(--ring,var(--primary));outline-offset:2px}
.inp input:focus-visible{border-color:var(--ring,var(--primary));box-shadow:0 0 0 3px var(--accent)}
/* 모션 민감 사용자 존중(WCAG 2.3.3) — 애니·전환 즉시 완료 */
@media (prefers-reduced-motion: reduce){
  .sw,.sw i,.btn,.nav,.pal-box .pi{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .skel::after{animation:none}          /* 시머 정지(정적 skeleton으로 충분) */
  .btn.ld::before{animation-duration:1.6s !important;animation-iteration-count:infinite !important}  /* 스피너=필수 피드백이라 유지, 느리게 */
}