/* ============================================================
   Langues — Cahier coréen
   Système visuel : papier / cahier chaud, encre burgundy, ocre
   ============================================================ */

:root {
  /* Paper & ink */
  --paper:        #faf5e9;
  --paper-2:      #f5eedd;   /* recessed paper */
  --card:         #fffdf7;
  --card-2:       #fcf7ec;
  --rose:         #f8e7ea;   /* soft tinted surface */
  --rose-line:    #efd3d8;

  --ink:          #3a322a;   /* body */
  --ink-soft:     #6f6354;   /* secondary text */
  --ink-faint:    #9a8e7b;   /* tertiary / meta */
  --rule:         #e8dcc1;   /* hairline borders / ruled lines */
  --rule-soft:    #f0e7d3;

  /* Accent — user color swatch (primary action) */
  --accent:       #b8554a;
  --accent-deep:  #8f3e36;
  --accent-tint:  #f5e4df;
  --accent-line:  #e5c5bd;

  /* Ochre — eyebrows / markers */
  --ochre:        #9c7a1e;
  --ochre-soft:   #b89a45;

  /* Semantic (used sparingly, all low chroma) */
  --good:         #5c7a5b;
  --good-tint:    #e8efe5;
  --warn:         #a8642e;
  --warn-tint:    #f4e7da;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --kr:    "Noto Sans KR", system-ui, sans-serif;
  --kr-serif: "Noto Serif KR", "Newsreader", serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Density scale (overridden by data-density) */
  --gap:        24px;
  --gap-lg:     40px;
  --pad-card:   24px;
  --radius:     16px;
  --radius-sm:  11px;

  --shadow-card: 0 1px 2px rgba(80,60,30,0.04), 0 6px 18px -12px rgba(80,55,25,0.18);
  --shadow-pop:  0 18px 50px -22px rgba(70,45,20,0.4);
}

[data-density="aere"] {
  --gap: 30px; --gap-lg: 52px; --pad-card: 30px; --radius: 18px;
}
[data-density="compact"] {
  --gap: 16px; --gap-lg: 26px; --pad-card: 17px; --radius: 13px; --radius-sm: 9px;
}

/* Accent variants */
[data-accent="corail"],
[data-accent="burgundy"]  { --accent:#b8554a; --accent-deep:#8f3e36; --accent-tint:#f5e4df; --accent-line:#e5c5bd; }
[data-accent="indigo"],
[data-accent="bleu"]      { --accent:#4a5d99; --accent-deep:#394878; --accent-tint:#e4e8f4; --accent-line:#c6cde5; }
[data-accent="vert"]      { --accent:#4f6f5a; --accent-deep:#3f5a49; --accent-tint:#e7efe7; --accent-line:#cadbcd; }
[data-accent="ambre"],
[data-accent="terre"]     { --accent:#a87422; --accent-deep:#825a1b; --accent-tint:#f4ead8; --accent-line:#e2cda6; }
[data-accent="rose"]      { --accent:#b75c7a; --accent-deep:#8f425d; --accent-tint:#f4e3e9; --accent-line:#e2c1cc; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  /* ruled-paper texture: faint horizontal rules + warm wash */
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px);
  background-size: 100% 34px;
  background-position: 0 -1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
}

::selection { background: var(--accent-tint); }

/* ---- Type primitives ---- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--accent-deep); margin: 0; line-height: 1.08; }
.serif { font-family: var(--serif); }
.kr { font-family: var(--kr); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

a { color: inherit; }

/* ---- Buttons ---- */
.btn {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  border-radius: 999px;
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .52;
}
.btn:disabled:hover {
  background: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #fdf3f0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px -14px var(--accent);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-secondary {
  background: var(--card);
  color: var(--accent-deep);
  border-color: var(--accent-line);
}
.btn-secondary:hover { background: var(--accent-tint); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 9px 14px;
}
.btn-ghost:hover { background: var(--card-2); color: var(--ink); }

.btn-danger {
  background: transparent;
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, var(--rule));
}
.btn-danger:hover { background: var(--warn-tint); }

.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-lg { padding: 15px 30px; font-size: 19px; }

button { font-family: inherit; }

/* ---- Card ---- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* hide scrollbars on inner rails but keep scroll */
.no-sb { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.no-sb::-webkit-scrollbar { width: 7px; height: 7px; }
.no-sb::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 9px; }

/* focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-soft);
  border: 1px solid var(--rule);
}

/* ---- Korean input helper ---- */
.ko-keyboard {
  display: grid;
  gap: 8px;
  width: 100%;
}
.ko-keyboard-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
}
.ko-keyboard-toggle .kr {
  color: var(--accent-deep);
  font-size: 15px;
}
.ko-keyboard-panel {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--card-2);
}
.ko-keyboard-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 6px;
}
.ko-key {
  min-height: 39px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--accent-deep);
  cursor: pointer;
  font-size: 21px;
  font-weight: 700;
}
.ko-key:active {
  transform: translateY(1px);
  background: var(--accent-tint);
}
.ko-key-action {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.ko-key-action-on {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-color: var(--accent-line);
}
.ko-keyboard-compact .ko-key {
  min-height: 34px;
  font-size: 18px;
}
textarea.kr,
input.kr {
  ime-mode: active;
}

/* Base state fully visible. Entrance animates transform ONLY — never opacity —
   so even if a headless capture freezes the animation at t=0, content stays visible. */
.fade-up { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp { from { transform: translateY(9px);} to {transform:none;} }
  .fade-up { animation: fadeUp .45s cubic-bezier(.2,.7,.2,1) both; }
}

/* Skeleton shimmer */
.sk { background: linear-gradient(100deg, var(--rule-soft) 30%, var(--card-2) 50%, var(--rule-soft) 70%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .sk { animation: shimmer 1.4s linear infinite; }
}

/* ---- Dark theme (warm ink-on-charcoal, keeps the notebook feel) ---- */
[data-theme="dark"] {
  --paper:#211d18; --paper-2:#1b1813; --card:#2a251f; --card-2:#241f1a;
  --rose:#2e2228; --rose-line:#3d2d33;
  --ink:#ece3d4; --ink-soft:#b6a991; --ink-faint:#8a7d68;
  --rule:#3a332a; --rule-soft:#2c271f;
  --accent:#d98a96; --accent-deep:#e7a9b2; --accent-tint:#352128; --accent-line:#4a3138;
  --ochre:#cdab6a; --ochre-soft:#b89a45;
  --good:#86a87f; --good-tint:#26302a; --warn:#cf9663; --warn-tint:#352a20;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 22px -14px rgba(0,0,0,0.6);
  --shadow-pop: 0 18px 50px -22px rgba(0,0,0,0.7);
}
[data-theme="dark"] body { background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px); }
[data-theme="dark"][data-accent="corail"],
[data-theme="dark"][data-accent="burgundy"] { --accent:#df8b7f; --accent-deep:#f0aa9f; --accent-tint:#35241f; --accent-line:#52362f; }
[data-theme="dark"][data-accent="indigo"],
[data-theme="dark"][data-accent="bleu"]     { --accent:#9aa8ea; --accent-deep:#bac4ff; --accent-tint:#22283c; --accent-line:#353d5d; }
[data-theme="dark"][data-accent="vert"]     { --accent:#91b88f; --accent-deep:#b1d2ac; --accent-tint:#233025; --accent-line:#344937; }
[data-theme="dark"][data-accent="ambre"],
[data-theme="dark"][data-accent="terre"]    { --accent:#d6ae63; --accent-deep:#edcb86; --accent-tint:#352b1b; --accent-line:#554128; }
[data-theme="dark"][data-accent="rose"]     { --accent:#e396b1; --accent-deep:#f2b4ca; --accent-tint:#35232c; --accent-line:#523546; }