/* ============ Keyword Alerter — design system ============ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* indigo / navy accent (calm) */
  --accent:        #4f54d6;
  --accent-press:  #4146bd;
  --accent-soft:   #eceefc;
  --accent-ink:    #3a3fb0;

  --pos: #e1483c;   /* 상승=빨강 (KR convention) */
  --neg: #1f6fe0;   /* 하락=파랑 */
  --warn: #c98a16;

  /* light theme (default) */
  --page:    #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --raised:  #ffffff;
  --border:  #eceef1;
  --border-2:#e3e6ea;
  --ink:     #15171c;
  --ink-2:   #4a4f59;
  --ink-3:   #868d99;
  --ink-4:   #aab1bc;
  --chip:    #f1f3f5;
  --chip-ink:#5a616c;
  --shadow-sm: 0 1px 2px rgba(20,23,33,.05), 0 1px 3px rgba(20,23,33,.04);
  --shadow-md: 0 4px 16px rgba(20,23,33,.07), 0 1px 4px rgba(20,23,33,.04);
  --shadow-lg: 0 16px 48px rgba(20,23,33,.13), 0 4px 12px rgba(20,23,33,.06);
  --accent-shadow: 0 4px 14px rgba(79,84,214,.30);
}

[data-theme="dark"] {
  --accent:        #7c80f2;
  --accent-press:  #6b6fe6;
  --accent-soft:   #20223a;
  --accent-ink:    #aab0ff;

  --pos: #ff6b5e;
  --neg: #5b9bff;
  --warn: #e0a93a;

  --page:    #0c0e13;
  --surface: #14161d;
  --surface-2: #181b23;
  --raised:  #1a1d26;
  --border:  #23262f;
  --border-2:#2c303b;
  --ink:     #f0f2f6;
  --ink-2:   #b6bcc8;
  --ink-3:   #7d8593;
  --ink-4:   #565d6a;
  --chip:    #20232c;
  --chip-ink:#aeb5c1;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.55);
  --accent-shadow: 0 4px 16px rgba(124,128,242,.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  transition: background .35s ease, color .35s ease;
}

#root { min-height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
a { color: inherit; }
::selection { background: var(--accent-soft); }

/* scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; border: 3px solid transparent; }

/* ===== shared primitives ===== */
.app-shell { max-width: 760px; margin: 0 auto; padding: 0 18px 96px; }
.app-shell.narrow { max-width: 480px; }

.fade-in { animation: fadeIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fadeIn { from { transform: translateY(9px); } to { transform: none; } }
.pop-in { animation: popIn .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes popIn { from { transform: translateY(12px) scale(.99); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}