/* ─────────────────────────────────────────────────────────────
   이어톡 — 공통 디자인 토큰 (라이트 + 모노크롬, Filament 톤)
   ───────────────────────────────────────────────────────────── */
:root {
  /* Neutrals */
  --c-bg:        #f7f7f8;
  --c-surface:   #ffffff;
  --c-surface-2: #fafafa;
  --c-border:    #e5e7eb;
  --c-border-2:  #d4d4d8;
  --c-text:      #18181b;
  --c-text-2:    #52525b;
  --c-text-3:    #a1a1aa;

  /* Brand accents — 페이지마다 --accent로 override */
  --c-accent:        #18181b;
  --c-accent-soft:   #f4f4f5;
  --c-accent-text:   #ffffff;

  /* Semantic */
  --c-success: #10b981;
  --c-warn:    #f59e0b;
  --c-danger:  #ef4444;
  --c-info:    #3b82f6;

  /* Radius / shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);

  /* Type */
  --font-sans: "Noto Sans KR", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Reset light */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--c-border-2); background: var(--c-surface); color: var(--c-text);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--c-surface-2); }
.btn-primary {
  background: var(--c-accent); color: var(--c-accent-text); border-color: var(--c-accent);
}
.btn-primary:hover { filter: brightness(1.1); background: var(--c-accent); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   Cards / Inputs
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px; }

.input, .select, .textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  color: var(--c-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 15%, transparent);
}
.textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--c-text-2); margin-bottom: 6px; }

/* ─────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.badge-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-warn    { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-danger  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ─────────────────────────────────────────────────────────────
   Layout helpers
   ───────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.stack > * + * { margin-top: var(--gap, 12px); }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.muted { color: var(--c-text-2); }
.tiny  { font-size: 11px; color: var(--c-text-3); }

/* Page padding (when debug bar is mounted) */
body.has-debug-bar { padding-top: 60px; }