/* 공통 디자인 토큰 (디자인.md 3~5장) */
:root {
  --accent: #E9EA74;
  --accent-hover: #D4D55A;
  --accent-soft: #F6F7D4;
  --ink: #111111;
  --ink-2: #333333;
  --muted: #6B6B6B;
  --line: #E6E6E3;
  --bg: #FFFFFF;
  --bg-soft: #F5F5F3;
  --dark: #0E0F11;
  --dark-2: #1B1D21;
  --success: #1F8A4C;
  --warning: #B7791F;
  --danger: #D33A2C;
  --info: #2B6CB0;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; letter-spacing: -0.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* 버튼 (디자인.md 7.2) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  border: 1px solid transparent; background: none;
  font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: background .3s var(--ease-out), color .3s, border-color .3s, opacity .3s;
}
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-dark { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost-dark:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: #fff; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 상태 배지 (디자인.md 11.4) */
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #EDEDEB; color: var(--muted);
}
.badge-new { background: var(--accent); color: var(--ink); }
.badge-progress { background: #E3EDF9; color: var(--info); }
.badge-sentinq { background: #EEE8F8; color: #6B46C1; }
.badge-won, .badge-approved { background: #E3F3EA; color: var(--success); }
.badge-draft { background: #EDEDEB; color: var(--ink-2); }
.badge-pending { background: #FBF0DC; color: var(--warning); }
.badge-rejected, .badge-expired { background: #FBE5E2; color: var(--danger); }
.badge-sent { background: var(--ink); color: #fff; }

/* 로고 (디자인.md 6장) */
.logo-img { height: 40px; width: auto; mix-blend-mode: multiply; }
.logo-invert { filter: invert(1); mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
}