/* Jupjup design system: calm, readable, one accent. Shared by the in-page UI
   (inside a shadow root), the deck web app and the popup. */
:host, :root {
  --kl-page: #f6f6f5;        /* app background */
  --kl-bg: #ffffff;          /* cards, panels */
  --kl-bg-2: #f0f0ee;        /* subtle fills */
  --kl-bg-3: #e5e5e2;
  --kl-fg: #22201c;
  --kl-fg-2: #5e5a52;
  --kl-fg-3: #8f8a80;
  --kl-line: #e3e3e0;
  --kl-accent: #1f7a45;      /* mine / primary actions */
  --kl-accent-fg: #ffffff;
  --kl-accent-soft: #e3f1e7;
  --kl-marker: #fdf0a6;      /* highlighter for the word being learned */
  --kl-learning: #c9820f;
  --kl-grammar: #5b5bd6;
  --kl-danger: #b4381f;
  --kl-particle: #2b6cb0;
  --kl-ending: #b4501f;
  --kl-infl: #7048b8;
  --kl-shadow: 0 10px 32px rgba(40, 32, 20, .14), 0 1px 3px rgba(40, 32, 20, .08);
  --kl-radius: 10px;
  --kl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --kl-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", var(--kl-sans);
}
/* Dark: follows the system unless Settings → Appearance picks Light or Dark (data-theme on <html> or the host) */
@media (prefers-color-scheme: dark) {
  :host(:not([data-theme="light"])), :root:not([data-theme="light"]) {
    --kl-page: #171614;
    --kl-bg: #201f1c;
    --kl-bg-2: #2a2825;
    --kl-bg-3: #34322e;
    --kl-fg: #f1eee7;
    --kl-fg-2: #bdb7ab;
    --kl-fg-3: #8c877d;
    --kl-line: #38352f;
    --kl-accent: #4fbf7d;
    --kl-accent-fg: #0d1a12;
    --kl-accent-soft: #1f3327;
    --kl-marker: #5a4f12;
    --kl-learning: #e7a83a;
    --kl-grammar: #a3a3f5;
    --kl-danger: #f08060;
    --kl-particle: #7fb0ef;
    --kl-ending: #f0996a;
    --kl-infl: #b99cf2;
    --kl-shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:host([data-theme="dark"]), :root[data-theme="dark"] {
  --kl-page: #171614;
  --kl-bg: #201f1c;
  --kl-bg-2: #2a2825;
  --kl-bg-3: #34322e;
  --kl-fg: #f1eee7;
  --kl-fg-2: #bdb7ab;
  --kl-fg-3: #8c877d;
  --kl-line: #38352f;
  --kl-accent: #4fbf7d;
  --kl-accent-fg: #0d1a12;
  --kl-accent-soft: #1f3327;
  --kl-marker: #5a4f12;
  --kl-learning: #e7a83a;
  --kl-grammar: #a3a3f5;
  --kl-danger: #f08060;
  --kl-particle: #7fb0ef;
  --kl-ending: #f0996a;
  --kl-infl: #b99cf2;
  --kl-shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

.kl-ko { font-family: var(--kl-ko); word-break: keep-all; overflow-wrap: anywhere; } /* Korean wraps between words, not inside one */

/* buttons: pill-shaped, plain by default, one filled primary */
.kl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  margin: 0;
  font: 600 13px/1 var(--kl-sans);
  border: 1px solid var(--kl-line);
  background: var(--kl-bg);
  color: var(--kl-fg);
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.kl-btn:hover { background: var(--kl-bg-2); }
.kl-btn.primary { background: var(--kl-accent); border-color: var(--kl-accent); color: var(--kl-accent-fg); }
.kl-btn.primary:hover { filter: brightness(1.06); }
.kl-btn.on { background: var(--kl-accent-soft); border-color: transparent; color: var(--kl-accent); }
.kl-btn.danger { color: var(--kl-danger); }
.kl-btn.icon { padding: 0 10px; }
.kl-btn:disabled { opacity: .55; cursor: default; filter: none; }
.kl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kl-link { font: inherit; font-size: 13px; background: none; border: 0; padding: 0; color: var(--kl-accent); cursor: pointer; text-decoration: none; }
.kl-link:hover { text-decoration: underline; }

/* small labels */
.kl-chip {
  display: inline-block;
  font: 600 11px/1 var(--kl-sans);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--kl-bg-2);
  color: var(--kl-fg-2);
}
.kl-chip.hot, .kl-chip.status-new { background: var(--kl-accent-soft); color: var(--kl-accent); }
.kl-chip.gram { background: color-mix(in srgb, var(--kl-grammar) 14%, transparent); color: var(--kl-grammar); }
.kl-chip.status-learning { background: color-mix(in srgb, var(--kl-learning) 16%, transparent); color: var(--kl-learning); }
.kl-chip.rare, .kl-chip.status-known { color: var(--kl-fg-3); }

.kl-section-title { font: 700 13px/1.2 var(--kl-sans); color: var(--kl-fg); margin: 20px 0 6px; }

/* the word being learned, marked like a highlighter */
.kl-target { background: var(--kl-marker); border-radius: 3px; padding: 0 2px; font-weight: 700; color: inherit; }

/* how a word is built: 먹 + 었 + 어요 */
.kl-morphs { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.kl-morph { font-family: var(--kl-ko); font-size: 14px; padding: 2px 7px; border-radius: 6px; background: var(--kl-bg-2); }
.kl-morph.lex { font-weight: 700; }
.kl-morph.particle { color: var(--kl-particle); }
.kl-morph.infl { color: var(--kl-infl); }
.kl-morph.ending { color: var(--kl-ending); }
.kl-plus { color: var(--kl-fg-3); font-size: 12px; }
.kl-morph-table { width: 100%; border-collapse: collapse; margin-top: 10px; font: 13px/1.45 var(--kl-sans); }
.kl-morph-table td { padding: 5px 8px 5px 0; vertical-align: top; border-top: 1px solid var(--kl-line); color: var(--kl-fg-2); }
.kl-morph-table td:first-child { font-family: var(--kl-ko); font-size: 15px; color: var(--kl-fg); white-space: nowrap; width: 1%; }