/* RT-TXT-061 — Hangul Jamo Decomposer & Korean Keyboard Converter.
 * Colour rule (docs/contrast-conventions.md): values inside the navy
 * --rt-result-bg box use --rt-result-ink, labels --rt-result-muted; everything
 * on the light surfaces uses --rt-ink / --rt-ink-soft. Nothing crosses over.
 * Spacing tokens are a 4px scale: --rt-s-3 is 12px, --rt-s-4 is 16px. */

.hj-form { display: flex; flex-direction: column; gap: var(--rt-s-4); min-width: 0; }

.hj-panel { border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-card); background: var(--rt-surface); min-width: 0; }
.hj-panel-head { padding: var(--rt-s-3) var(--rt-s-4); border-bottom: 1px solid var(--rt-hairline); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.hj-panel-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--rt-ink); }
.hj-panel-note { font-size: 12.5px; color: var(--rt-ink-soft); }
.hj-panel-body { padding: var(--rt-s-4); display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.hj-label { font-family: var(--rt-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--rt-ink-muted); }
.hj-muted { margin: 0; color: var(--rt-ink-soft); font-size: 13px; }

.hj-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px; border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-button);
    background: var(--rt-surface); color: var(--rt-ink);
    font-size: 20px; line-height: 1.5;
}
.hj-area { resize: vertical; font-size: 17px; }
.hj-input:focus, .hj-select:focus { outline: none; border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--rt-accent-soft); }

.hj-samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hj-samples-label { font-size: 11px; color: var(--rt-ink-soft); margin-right: 2px; }
.hj-chip {
    padding: 5px 11px; border-radius: var(--rt-r-chip); cursor: pointer;
    border: 1px solid var(--rt-hairline); background: var(--rt-surface-2);
    color: var(--rt-ink); font-size: 13px;
    transition: border-color 140ms ease, background 140ms ease;
}
.hj-chip:hover { border-color: var(--rt-accent); background: var(--rt-surface); }

/* ── syllable cards (light) ───────────────────────────────────────────────── */
.hj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; min-width: 0; }
.hj-card { border: 1px solid var(--rt-hairline); border-radius: 10px; padding: 10px 12px; background: var(--rt-surface-2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hj-card-head { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--rt-hairline); padding-bottom: 6px; }
.hj-syl { font-size: 36px; line-height: 1.1; color: var(--rt-ink); }
.hj-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hj-code { font-family: var(--rt-font-mono); font-size: 12px; color: var(--rt-ink); background: none; padding: 0; }
.hj-uname { font-family: var(--rt-font-mono); font-size: 10.5px; color: var(--rt-ink-soft); overflow-wrap: anywhere; }
.hj-row { display: grid; grid-template-columns: 52px 26px 1fr auto; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--rt-ink); }
.hj-role { font-size: 11px; color: var(--rt-ink-soft); }
.hj-jamo { font-size: 18px; }
.hj-meta { font-size: 12px; color: var(--rt-ink-soft); min-width: 0; overflow-wrap: anywhere; }
.hj-kname { color: var(--rt-ink); }
.hj-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--rt-ink-soft); border-top: 1px solid var(--rt-hairline); padding-top: 6px; }
.hj-letters { color: var(--rt-ink); letter-spacing: .08em; }
.hj-keys { font-family: var(--rt-font-mono); }
.hj-note { margin: 0; font-size: 12px; color: var(--rt-ink-soft); }

/* ── build a syllable (navy result) ───────────────────────────────────────── */
.hj-build { display: flex; flex-wrap: wrap; gap: var(--rt-s-3); align-items: flex-end; }
.hj-pick { display: flex; flex-direction: column; gap: 4px; }
.hj-select {
    min-width: 88px; padding: 8px 10px; border: 1px solid var(--rt-hairline); border-radius: var(--rt-r-button);
    background: var(--rt-surface); color: var(--rt-ink); font-size: 18px;
}
.hj-built { flex: 1 1 260px; background: var(--rt-result-bg); border-radius: var(--rt-r-card); padding: 8px 14px; display: flex; gap: 14px; align-items: center; min-height: 64px; box-sizing: border-box; min-width: 0; }
.hj-built-char { font-size: 40px; line-height: 1; color: var(--rt-result-ink); }
.hj-built-math { font-family: var(--rt-font-mono); font-size: 12px; line-height: 1.5; color: var(--rt-result-muted); overflow-wrap: anywhere; min-width: 0; }

/* ── keyboard (navy result) ───────────────────────────────────────────────── */
.hj-kbd-out { background: var(--rt-result-bg); border-radius: var(--rt-r-card); padding: var(--rt-s-3) var(--rt-s-4); min-height: 84px; box-sizing: border-box; min-width: 0; }
.hj-kbd-dir { display: block; font-size: 12px; color: var(--rt-result-muted); }
.hj-kbd-text {
    margin: 4px 0 0; font-size: 22px; line-height: 1.45; color: var(--rt-result-ink);
    overflow-wrap: anywhere; cursor: pointer; border-radius: 6px; padding: 1px 4px;
}
.hj-kbd-text:hover, .hj-kbd-text:focus { outline: none; box-shadow: 0 0 0 2px rgba(246, 244, 239, .28); }
.hj-kbd-text[data-copied]::after { content: ' ✓ copied'; font-size: 12px; color: var(--rt-result-muted); }

/* A run the keyboard panel converted inside mixed text. Underlined in the
   result ink itself, so no second colour enters the navy box. */
.hj-conv { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Hangul the page does not model (archaic letters, fillers, Old Hangul): shown
   with its reason, marked by a dashed border rather than a new colour. */
.hj-card-off { border-style: dashed; }

.hj-stamp { font-size: 11.5px; color: var(--rt-ink-soft); line-height: 1.6; margin: 0; }

/* CLS floor for the default input ("닭갈비 퓛", four cards), which app.js renders
   after first paint. MEASURED 2026-09-27: 420px in two columns (1280 and 768),
   816px in one (375) — the grid drops to one column below ~546px. Released by
   app.js on the first edit, a user-initiated shift. */
.hj-cards.hj-reserve { min-height: 416px; }
@media (max-width: 540px) { .hj-cards.hj-reserve { min-height: 812px; } }