/* Sino-Korean word bridge (hanja/index.html); builds on app.css variables and vocab.css (.vset buttons) */
main { overflow-x: hidden; }
.hero p { overflow-wrap: anywhere; }
.hread { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hread-label { width: 100%; font-weight: 700; font-size: .85rem; }
.hread .vset { flex: 1 1 140px; font-size: .9rem; }
.hother { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--fg); }
.hquiz { margin-top: 12px; }
.hfilters { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.hfilters input, .hfilters select { width: 100%; min-height: 44px; }
.hlist { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.hcard { padding: 14px; }
.hhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hko { font-size: 1.5rem; font-weight: 850; word-break: keep-all; overflow-wrap: anywhere; }
.hchars { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.hc { display: grid; grid-template-columns: auto auto; grid-template-areas: "z f" "k k" "r r"; align-items: end; justify-items: center; column-gap: 2px;
  min-width: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.hc .hz { grid-area: z; font-size: 2rem; line-height: 1.15; font-weight: 600; }
.hc .hform { grid-area: f; font-size: .95rem; color: var(--muted); }
.hc .hks { grid-area: k; font-weight: 800; color: var(--accent); }
.hc .hrd { grid-area: r; font-size: .85rem; color: var(--fg); text-align: center; overflow-wrap: anywhere; }
.hc.nat { display: flex; align-items: center; min-width: 0; padding: 6px 4px; border-style: dashed; background: transparent; color: var(--muted); }
.hc.nat .hks { color: var(--muted); font-weight: 600; }
.hvr { color: var(--bad); font-weight: 800; margin-left: 1px; }
.hmean { margin: 6px 0; overflow-wrap: anywhere; }
.hsame summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--accent); min-height: 32px; }
.hrel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.hz.sm { font-size: 1.3rem; font-weight: 700; min-width: 1.6em; text-align: center; }
.hrel .chip { background: var(--card); font: inherit; font-size: .88rem; cursor: pointer; min-height: 36px; }
.hmore { width: 100%; }
.hsrc { margin-top: 18px; overflow-wrap: anywhere; }
.hchars.qz { justify-content: center; margin: 14px 0; }
.hchars.qz .hc { grid-template-areas: "z z" "r r"; min-width: 72px; }
.hchars.qz .hz { font-size: 2.6rem; }
@media (max-width: 380px) { .hc { min-width: 56px; padding: 5px 6px; } .hc .hz { font-size: 1.7rem; } .hfilters { grid-template-columns: 1fr; } }
.hgap { width: 8px; }