:root {
  --bg: #f7f5ff;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #efe9ff 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 10%, #fde8f4 0%, transparent 55%);
  --card: #ffffff;
  --ink: #1c1830;
  --muted: #6b6680;
  --line: #e7e3f4;
  --accent: #6d4aff;
  --accent-soft: #efeaff;
  --hot: #ff5a8a;
  --shadow: 0 1px 2px rgba(28,24,48,.06), 0 8px 24px -12px rgba(28,24,48,.18);
  --radius: 16px;
}
/* ===== 3-way theme (Light/Dark/System) — base :root above = native LIGHT. Opposite (dark) WCAG-aware auto-generated (contrast-solving ink/accent vs worst-case surface). ===== */
:root[data-theme="dark"]{
  --bg: #17151e;
  --card: #2d2d2d;
  --ink: #bdb7db;
  --muted: #9894aa;
  --line: rgba(255,255,255,0.12);
  --accent: #886bff;
  --accent-soft: #8d69ff;
  --hot: #ff1d5f;
}












* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg) var(--bg-grad) fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

main { max-width: 760px; margin: 0 auto; padding: 0 18px 80px; }

/* Header */
.site { max-width: 760px; margin: 0 auto; padding: 28px 18px 14px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { font-size: 26px; line-height: 1; }
.brand-name {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: -.02em;
}
.brand-tag { margin: 4px 0 0 36px; color: var(--muted); font-size: 14px; }

/* Composer */
.composer {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-top: 8px;
}
.title-input, .note-input {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: inherit; color: var(--ink); resize: none;
}
.title-input { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.title-input::placeholder { color: #b3aecb; font-weight: 700; }
.note-input { font-size: 14px; margin-top: 6px; color: var(--ink); }
.note-input::placeholder { color: #b9b5cc; }
.composer-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.tag-pick { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

/* Buttons */
.btn {
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  border-radius: 10px; padding: 9px 18px; border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(109,74,255,.6); }
.btn.primary:hover { background: #5c39f0; }

/* Tag chips (picker + filters) */
.chip {
  font-family: inherit; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 5px 12px; transition: all .12s ease; white-space: nowrap;
}
.chip[aria-checked="true"], .chip.active {
  background: var(--accent-soft); border-color: #cfc4ff; color: var(--accent);
}
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.stat .num { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat .num small { font-size: 13px; color: var(--muted); font-weight: 500; }

/* Controls */
.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sort { display: flex; gap: 4px; background: #efecf9; border-radius: 10px; padding: 3px; }
.sort-btn {
  font-family: inherit; cursor: pointer; border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 8px;
}
.sort-btn.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* Board */
.board { display: grid; gap: 12px; }
@media (min-width: 620px) { .board { grid-template-columns: 1fr 1fr; } }

.idea {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; display: flex; gap: 14px;
  animation: pop .22s ease backwards;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }

.vote {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #faf9ff; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 4px; min-width: 52px; cursor: pointer; user-select: none;
  transition: all .12s ease; font-family: inherit;
}
.vote:hover { border-color: #cfc4ff; }
.vote .arrow { font-size: 16px; line-height: 1; }
.vote .count { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; }
.vote.voted { background: linear-gradient(180deg,#fff0f5,#ffe3ee); border-color: #ffc1d6; color: var(--hot); }
.vote.voted .arrow { transform: translateY(-1px); }

.idea-body { flex: 1; min-width: 0; }
.idea-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.idea-note { font-size: 13.5px; color: var(--muted); margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
.idea-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.idea-meta .when { font-size: 11.5px; color: #a39ebb; margin-left: auto; }
.tag-badge { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.del {
  background: none; border: none; cursor: pointer; color: #c2bdd6; font-size: 13px;
  padding: 2px 4px; border-radius: 6px; font-family: inherit;
}
.del:hover { color: var(--hot); background: #fff0f5; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; font-size: 14px; }

/* Footer */
.site-foot {
  max-width: 760px; margin: 0 auto; padding: 22px 18px 32px;
  display: flex; align-items: center; gap: 12px; color: #a39ebb; font-size: 12.5px;
}
.link-btn { background: none; border: none; color: #a39ebb; cursor: pointer; font-family: inherit; font-size: 12.5px; text-decoration: underline; margin-left: auto; }
.link-btn:hover { color: var(--hot); }
/* Mobile: keep the right-anchored reset link clear of the fixed ⭐응원 FAB corner. */
@media (max-width: 560px) {
  .site-foot { padding-right: 84px; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1c1830; color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 13.5px;
  font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* i18n language switcher — 헤더에 통합. 라이트 톤에 맞춰 런타임 기본값을 덮어쓴다. */
.site .i18n-switch {
  --i18n-switch-bg: rgba(255, 255, 255, 0.7);
  --i18n-switch-border: var(--line);
  --i18n-switch-fg: var(--ink);
  --i18n-switch-active-bg: var(--accent-soft);
  --i18n-switch-active-fg: var(--accent);
  --i18n-switch-menu-bg: var(--card);
  --i18n-switch-menu-border: var(--line);
  --i18n-switch-shadow: 0 8px 24px rgba(28, 24, 48, 0.14);
}
.brand-tag { flex: 1; }

/* dark-mode override for hardcoded light panels (refinement) */
:root[data-theme="dark"] .sort{ background: rgba(255,255,255,.06); }