/* im — Design System Tokens
 * 평가시스템 리뉴얼: 엔터프라이즈 클린 (Linear/Notion 영향)
 * Primary: Violet 600 (#7C3AED)
 */

:root {
  /* — Color: Neutrals (Slate) — */
  --c-bg: #FAFAFB;
  --c-surface: #FFFFFF;
  --c-surface-2: #F6F6F8;
  --c-surface-3: #F0F0F3;
  --c-border: #E6E6EC;
  --c-border-strong: #D5D5DE;
  --c-divider: #EFEFF3;

  --c-text: #18181B;
  --c-text-2: #3F3F46;
  --c-text-3: #71717A;
  --c-text-4: #A1A1AA;
  --c-text-on-primary: #FFFFFF;

  /* — Color: Brand (Violet) — */
  --c-primary-50: #F5F3FF;
  --c-primary-100: #EDE9FE;
  --c-primary-200: #DDD6FE;
  --c-primary-300: #C4B5FD;
  --c-primary-400: #A78BFA;
  --c-primary-500: #8B5CF6;
  --c-primary-600: #7C3AED;
  --c-primary-700: #6D28D9;
  --c-primary-800: #5B21B6;
  --c-primary-900: #4C1D95;

  /* — Color: Semantic — */
  --c-success: #16A34A;
  --c-success-bg: #F0FDF4;
  --c-success-border: #BBF7D0;

  --c-warning: #D97706;
  --c-warning-bg: #FFFBEB;
  --c-warning-border: #FDE68A;

  --c-danger: #DC2626;
  --c-danger-bg: #FEF2F2;
  --c-danger-border: #FECACA;

  --c-info: #0284C7;
  --c-info-bg: #F0F9FF;
  --c-info-border: #BAE6FD;

  /* — Score scale (조정 표시용) — */
  --c-score-low: #DC2626;     /* 조정 필요 (붉은색) */
  --c-score-mid: #D97706;
  --c-score-high: #16A34A;
  --c-score-done: #2563EB;    /* 조정 완료 (푸른색) */

  /* — Radius — */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  /* — Spacing — */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* — Shadows — */
  --shadow-xs: 0 1px 2px rgba(16, 17, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 17, 26, 0.06), 0 1px 3px rgba(16, 17, 26, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 17, 26, 0.04), 0 4px 12px rgba(16, 17, 26, 0.06);
  --shadow-lg: 0 4px 12px rgba(16, 17, 26, 0.06), 0 12px 32px rgba(16, 17, 26, 0.10);
  --shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.18);

  /* — Type — */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-xs: 11px;
  --t-sm: 12px;
  --t-base: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 18px;
  --t-2xl: 22px;
  --t-3xl: 28px;
  --t-4xl: 36px;

  /* — Layout — */
  --sidebar-w: 240px;
  --topbar-h: 52px;
}

/* Pretendard (한국어 친화 시스템 폰트) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* — Base — */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "tnum";
  letter-spacing: -0.005em;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* — Reusable utility classes — */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 120ms, border-color 120ms, transform 60ms;
  white-space: nowrap;
}
.btn:hover { background: var(--c-surface-2); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn--primary {
  background: var(--c-primary-600);
  border-color: var(--c-primary-600);
  color: #fff;
}
.btn--primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--c-text-2); }
.btn--ghost:hover { background: var(--c-surface-2); }
.btn--sm { height: 26px; padding: 0 9px; font-size: var(--t-sm); }
.btn--lg { height: 38px; padding: 0 16px; font-size: var(--t-md); }
.btn--icon { width: 28px; padding: 0; }
.btn--danger { color: var(--c-danger); }
.btn--danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger-border); }

/* Inputs */
.input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  transition: border-color 120ms, box-shadow 120ms;
}
.input:focus { outline: none; border-color: var(--c-primary-600); box-shadow: var(--shadow-focus); }
.input::placeholder { color: var(--c-text-4); }
textarea.input { padding: 8px 10px; height: auto; min-height: 64px; resize: vertical; line-height: 1.55; }

/* Card */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  font-size: var(--t-xs); font-weight: 500;
  border-radius: 999px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
}
.badge--primary { background: var(--c-primary-100); color: var(--c-primary-700); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info { background: var(--c-info-bg); color: var(--c-info); }
.badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Status pill (상태값 — 평가전, 저장, 평가제출, 조정완료, 피드백완료, 평가완료) */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  font-size: var(--t-xs); font-weight: 500;
  border-radius: 999px;
  background: var(--c-surface-3);
  color: var(--c-text-2);
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-text-4);
}
.status--draft::before { background: var(--c-text-4); }
.status--saving { background: var(--c-info-bg); color: var(--c-info); }
.status--saving::before { background: var(--c-info); }
.status--submitted { background: var(--c-primary-100); color: var(--c-primary-700); }
.status--submitted::before { background: var(--c-primary-600); }
.status--adjusted { background: #DBEAFE; color: #1D4ED8; }
.status--adjusted::before { background: #2563EB; }
.status--done { background: var(--c-success-bg); color: var(--c-success); }
.status--done::before { background: var(--c-success); }
.status--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.status--warning::before { background: var(--c-warning); }

/* Chip (filter / tab-ish) */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 999px;
  font-size: var(--t-sm); color: var(--c-text-2); font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
}
.chip:hover { background: var(--c-surface-2); }
.chip[aria-selected="true"] {
  background: var(--c-primary-50);
  color: var(--c-primary-700);
  border-color: var(--c-primary-200);
}

/* Table reset */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-base);
}
.table th, .table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-divider);
}
.table th {
  font-weight: 500;
  color: var(--c-text-3);
  font-size: var(--t-sm);
  background: var(--c-surface-2);
}
.table tbody tr:hover { background: var(--c-surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* Section header */
.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.section-h h2 { font-size: var(--t-lg); font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.section-h p { font-size: var(--t-sm); color: var(--c-text-3); margin: 0; }

/* Mono number */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Scrollbar */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); background-clip: padding-box; border: 2px solid transparent; }

/* Subtle dot grid for canvas backgrounds */
.dotgrid {
  background-image: radial-gradient(var(--c-border) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Keyboard hint */
kbd {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-text-3);
}

/* Icon (lucide-style stroke) */
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 20px; height: 20px; }
.icon--sm { width: 14px; height: 14px; }

/* Focus outline reset where we use box-shadow */
:focus { outline: none; }

/* Animations */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-surface-3) 50%, var(--c-surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-sm);
}