.hangul-desk { --hangul-ink: #293d45; --hangul-muted: #4b606b; --hangul-line: #bdd0d5; --hangul-soft: #eef6f7; max-width: 940px; margin: 0 auto; color: var(--hangul-ink); }
.hangul-desk [hidden] { display: none !important; }
.hangul-desk p { line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
.hangul-desk h1, .hangul-desk h2, .hangul-desk h3 { color: var(--hangul-ink); }
.hangul-hero { margin: 28px 0; padding: clamp(24px, 5vw, 44px); background: var(--hangul-soft); border-top: 4px solid #3b6776; }
.hangul-hero .hangul-kicker { margin: 0 0 14px; font-size: .875rem; font-weight: 750; }
.hangul-hero h1 { margin: 0 0 18px; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.35; letter-spacing: -.045em; word-break: keep-all; }
.hangul-hero > p:last-child { margin: 0; font-size: 1.0625rem; color: var(--hangul-muted); }
.hangul-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.hangul-desk a { color: #285363; text-underline-offset: 3px; }
.hangul-jumps a { padding: 12px 16px; border: 1px solid #8ca7b0; background: #fff; border-radius: 4px; text-decoration: none; font-weight: 700; }
.hangul-workbench, .hangul-examples, .hangul-how { margin: 38px 0; padding-top: 24px; border-top: 2px solid #8ca7b0; scroll-margin-top: 90px; }
.hangul-desk h2 { margin: 0 0 12px; font-size: 1.375rem; line-height: 1.55; letter-spacing: -.03em; word-break: keep-all; }
.hangul-workbench > p, .hangul-examples > p, .hangul-how > p { color: var(--hangul-muted); }
.hangul-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.hangul-controls > div { min-width: 0; }
.hangul-desk label { display: block; margin: 0 0 8px; font-size: .9375rem; font-weight: 750; line-height: 1.6; }
.hangul-controls select { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--hangul-ink); background: #fff; border: 1px solid #7896a1; border-radius: 4px; font: inherit; font-size: 1.125rem; }
.hangul-result { display: grid; grid-template-columns: minmax(140px, .75fr) minmax(0, 1.25fr); gap: 16px; align-items: center; padding: 24px; border: 1px solid var(--hangul-line); background: #fff; }
.hangul-glyph { grid-row: span 2; display: block; font-size: clamp(5.5rem, 18vw, 9rem); line-height: 1.3; text-align: center; }
.hangul-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hangul-parts > div { min-width: 0; text-align: center; }
.hangul-parts dt { margin-bottom: 8px; color: var(--hangul-muted); font-size: .875rem; line-height: 1.6; }
.hangul-parts dd { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; line-height: 1.7; word-break: keep-all; }
.hangul-code { margin: 0; color: var(--hangul-muted); font-size: .875rem; text-align: center; }
.hangul-link-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; }
.hangul-link-tools a { padding: 12px 0; font-size: .9375rem; }
.hangul-desk button { min-height: 46px; padding: 11px 15px; color: #fff; background: #315e6e; border: 1px solid #315e6e; border-radius: 4px; font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.5; cursor: pointer; }
.hangul-desk button[aria-disabled="true"] { color: #536671; background: #edf1f3; border-color: #a6b9c2; cursor: default; }
.hangul-copy-status { margin: 10px 0; color: var(--hangul-muted); font-size: .875rem; }
.hangul-copy-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hangul-manual { margin: 16px 0; }
.hangul-manual input { width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px; color: var(--hangul-ink); background: #fff; border: 1px solid #7896a1; border-radius: 4px; font: inherit; font-size: .875rem; }
.hangul-note { color: var(--hangul-muted); font-size: .9375rem; }
.hangul-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hangul-example { min-width: 0; padding: 22px; border: 1px solid var(--hangul-line); background: #fff; scroll-margin-top: 90px; }
.hangul-example h3 { margin: 0 0 12px; font-size: 3rem; font-weight: 500; line-height: 1.3; }
.hangul-example p { margin: 10px 0; color: var(--hangul-muted); font-size: .9375rem; }
.hangul-example .hangul-example-parts { color: var(--hangul-ink); font-size: 1rem; font-weight: 700; }
.hangul-example button { margin-top: 10px; }
.hangul-back { display: inline-block; min-height: 44px; box-sizing: border-box; margin-top: 16px; padding: 11px 0; font-size: .9375rem; line-height: 1.6; }
.hangul-sources { margin: 34px 0; padding-top: 22px; border-top: 1px solid var(--hangul-line); color: var(--hangul-muted); }
.hangul-sources h2 { font-size: 1rem; }
.hangul-sources ul { padding-left: 22px; }
.hangul-sources li { margin: 8px 0; font-size: .875rem; line-height: 1.9; }
.hangul-sources p { font-size: .8125rem; }
.hangul-desk :is(a, button, select, input):focus-visible { outline: 3px solid #96601f; outline-offset: 4px; }
@media (max-width: 600px) {
  .hangul-controls { grid-template-columns: 1fr; gap: 16px; }
  .hangul-result { grid-template-columns: 1fr; padding: 18px; }
  .hangul-glyph { grid-row: auto; }
  .hangul-example-grid { grid-template-columns: 1fr; }
  .hangul-parts dd { font-size: 1.5rem; }
}