/* ─────────────────────────────────────────────────────────────────────────
   references.css — Referenzen-Seite
   Nutzt vorhandene Custom Properties mit Fallbacks (final abzugleichen mit
   colors.css / vocab.css). Eigene Tokens hier oben, damit der Abgleich leicht ist.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --ref-native: #b8473a;        /* 고유어 — Terrakotta, klar vom Akzentblau getrennt */
  --ref-sino:   var(--accent);  /* 한자어 — Akzentblau aus colors.css */
  --ref-line:   var(--line);
  --ref-ink:    var(--ink);
  --ref-ink-60: var(--ink-60);
  --ref-ink-38: var(--ink-38);
}
@media (prefers-color-scheme: dark) {
  :root { --ref-native: #e0826f; } /* hellerer Ton fürs Dark-Theme */
}

/* ── Ausklappbare Abschnitte (<details>/<summary>) ───────────────────────── */
.ref-section { margin: 0; border-top: 1px solid var(--ref-line); }
.ref-section:last-of-type { border-bottom: 1px solid var(--ref-line); }

summary.ref-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem .25rem;
  margin: 0;
}
summary.ref-section-head::-webkit-details-marker { display: none; }
summary.ref-section-head:hover { background: var(--paper-2, rgba(0,0,0,.02)); }

.ref-sum-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ref-sum-title h2 { margin: 0; }
.ref-sum-ko { font-size: 14px; color: var(--ref-ink-38); }

.ref-sum-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  color: var(--ref-ink-38);
  transition: transform .2s ease;
}
.ref-sum-arrow::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
details[open] > summary .ref-sum-arrow { transform: rotate(180deg); }
summary.ref-section-head:hover .ref-sum-arrow { color: var(--ref-ink-60); }

.ref-section-body { padding: .25rem .25rem 1.5rem; }
.ref-section-body .ref-intro { margin-bottom: 1rem; }
.ref-intro {
  margin: 0;
  color: var(--ref-ink-60);
  font-size: 14px;
  max-width: 60ch;
}
.ref-sub-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ref-ink-38);
  margin: 1rem 0 .4rem;
}
.ref-sub-label:first-of-type { margin-top: 0; }

/* ── Badges (Zahlsystem) ─────────────────────────────────────────────────── */
.ref-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.ref-badge--native { background: var(--ref-native); }
.ref-badge--sino   { background: var(--ref-sino); }

/* ── Zahlsysteme ─────────────────────────────────────────────────────────── */
.ref-systems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.ref-system { padding: 1.25rem; }
.ref-system-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.ref-system-head h3 { margin: 0; }

.ref-num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
}
.ref-num-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: var(--paper-2, rgba(0,0,0,.02));
}
.ref-num-val { font-size: 11px; color: var(--ref-ink-38); }
.ref-num-ko  { font-size: 17px; font-weight: 700; color: var(--ref-ink); }

.ref-attr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--ref-line);
}
.ref-attr-label { font-size: 12px; color: var(--ref-ink-60); }
.ref-attr-pair  { font-size: 15px; }
.ref-attr-pair b { color: var(--ref-native); }
.ref-system--sino .ref-attr-pair b { color: var(--ref-sino); }

.ref-usage { margin: .25rem 0 0; padding-left: 1.1rem; }
.ref-usage li { font-size: 14px; margin: .15rem 0; color: var(--ref-ink); }

.ref-note {
  margin: .75rem 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ref-ink-60);
}

.ref-mixed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--ref-sino);
  border-radius: 6px;
  background: var(--paper-2, rgba(0,0,0,.03));
}
.ref-mixed-ko   { font-size: 20px; font-weight: 700; }
.ref-mixed-de   { font-size: 15px; color: var(--ref-ink-60); }
.ref-mixed-note { flex-basis: 100%; font-size: 13px; color: var(--ref-ink-60); }

/* ── Zählwörter-Tabelle ──────────────────────────────────────────────────── */
.ref-table-wrap { padding: .5rem .5rem; overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ref-ink-38);
  font-weight: 700;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--ref-line);
}
.ref-table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--ref-line);
  vertical-align: top;
  font-size: 14px;
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-counter-ko { font-size: 18px; font-weight: 700; white-space: nowrap; }
.ref-counter-ex { display: flex; flex-direction: column; gap: 1px; }
.ref-counter-ex-ko   { font-weight: 600; }
.ref-counter-ex-de   { font-size: 13px; color: var(--ref-ink-60); }
.ref-counter-ex-note { font-size: 12px; color: var(--ref-ink-38); }

/* ── Vokabelpaare ────────────────────────────────────────────────────────── */
.ref-pair-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.ref-pair-group { padding: 1.1rem 1.25rem; }
.ref-pair-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.ref-pair-head h3 { margin: 0; font-size: 16px; }
.ref-pair-ko { font-size: 13px; color: var(--ref-ink-38); }

.ref-pairs { display: flex; flex-direction: column; }
.ref-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--ref-line);
}
.ref-pair:last-child { border-bottom: none; }
.ref-pair-a { text-align: right; font-size: 16px; font-weight: 600; }
.ref-pair-b { text-align: left;  font-size: 16px; font-weight: 600; }
.ref-pair-sep { color: var(--ref-ink-38); font-size: 13px; }
.ref-pair-de {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: var(--ref-ink-60);
}

/* ── Wortlisten (Lagewörter, Farben, Persönlichkeit, Zeit) ──────────────────── */
.ref-wl { padding: 1.1rem 1.25rem; }
.ref-wl-group + .ref-wl-group { margin-top: .25rem; }
.ref-wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}
.ref-wl-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: .5rem .65rem;
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: var(--paper-2, rgba(0,0,0,.02));
}
.ref-wl-ko { font-size: 16px; font-weight: 600; color: var(--ref-ink); }
.ref-wl-de { font-size: 13px; color: var(--ref-ink-60); }

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .ref-table th:nth-child(3),
  .ref-table td:nth-child(3) { display: none; } /* "Wofür"-Spalte auf Schmal ausblenden */
  .ref-num-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .ref-wl-grid  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   ERGÄNZUNGEN v2 — Lernknöpfe, Farb-Swatches, Zählwort-Karten, Partikel
   ───────────────────────────────────────────────────────────────────────── */

/* ── Karteikarten-Lernknopf ─────────────────────────────────────────────── */
.ref-learn-wrap { margin: 0 0 1rem; }
.ref-learn-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--accent); background: transparent;
  color: var(--accent); font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ref-learn-btn:hover { background: var(--accent); color: #fff; }
.ref-learn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ref-learn-icon { font-size: 15px; line-height: 1; }
.ref-learn-count {
  font-size: 12px; font-weight: 700; padding: .05rem .45rem;
  border-radius: 999px; background: var(--paper-2, rgba(0,0,0,.06));
  color: var(--ref-ink-60);
}
.ref-learn-btn:hover .ref-learn-count { background: rgba(255,255,255,.25); color: #fff; }

/* ── Zählwörter als Karten (statt Tabelle) ──────────────────────────────── */
.ref-counter-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ref-counter-card {
  padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.ref-counter-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.ref-counter-for { font-size: 13px; font-weight: 600; color: var(--ref-ink-60); }
.ref-counter-desc {
  margin: .1rem 0 .2rem; font-size: 13px; line-height: 1.5; color: var(--ref-ink);
}
.ref-counter-card .ref-counter-ex {
  border-top: 1px solid var(--ref-line); padding-top: .45rem; margin-top: .1rem;
}

/* ── Farben: eingefärbte Kacheln (Light + Dark) ─────────────────────────── */
.ref-wl-grid--colors { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ref-color {
  /* Echte Swatch-Farbe als Gradient ("Bild") statt solider background-color:
     Samsung Internets Force-Dark dunkelt Hintergrund-FARBEN ab (Gelb -> Braun),
     lässt Hintergrund-BILDER/Gradients aber unangetastet. Damit bleibt die Farbe
     in allen Browsern korrekt – unabhängig von Nutzereinstellungen. */
  background-color: var(--swatch, #ccc) !important;                              /* Fallback */
  background-image: linear-gradient(var(--swatch, #ccc), var(--swatch, #ccc)) !important;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.ref-color--ondark  .ref-wl-ko,
.ref-color--ondark  .ref-wl-de { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ref-color--onlight .ref-wl-ko,
.ref-color--onlight .ref-wl-de { color: #1a1a1a; }
.ref-color .ref-wl-de { opacity: .9; }
@media (prefers-color-scheme: dark) {
  .ref-color { border-color: rgba(255,255,255,.22); }
}

/* ── Partikel ───────────────────────────────────────────────────────────── */
.ref-part-groups { display: grid; gap: 1rem; }
.ref-part-group  { padding: 1.1rem 1.25rem; }
.ref-part-rows   { display: flex; flex-direction: column; }
.ref-part-row {
  display: grid; grid-template-columns: 72px 1fr; gap: .4rem .9rem;
  padding: .65rem 0; border-bottom: 1px solid var(--ref-line); align-items: start;
}
.ref-part-row:last-child { border-bottom: none; }
.ref-part-ko   { font-size: 17px; font-weight: 700; color: var(--ref-ink); white-space: nowrap; }
.ref-part-main { display: flex; flex-direction: column; gap: 2px; }
.ref-part-de   { font-size: 14px; font-weight: 600; color: var(--ref-ink); }
.ref-part-reg {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  color: var(--ref-ink-60); background: var(--paper-2, rgba(0,0,0,.05));
  padding: .05rem .4rem; border-radius: 4px; margin: 1px 0 2px;
}
.ref-part-ex-ko { font-size: 14px; color: var(--ref-ink); margin-top: 1px; }
.ref-part-ex-de { font-size: 12px; color: var(--ref-ink-60); }

@media (max-width: 560px) {
  .ref-counter-grid { grid-template-columns: 1fr; }
  .ref-part-row     { grid-template-columns: 56px 1fr; }
}