.hangul-page {padding:23px 0 70px}
.hangul-intro {padding:25px 28px;border:1px solid #e6ebf3;border-radius:14px;background:linear-gradient(115deg,#fff 58%,#fff2ed);box-shadow:var(--shadow)}
.hangul-eyebrow {font-size:10px;font-weight:850;color:#c96d64;letter-spacing:1.2px}
.hangul-intro h1 {font-size:28px;line-height:1.4;letter-spacing:-.8px;margin-top:6px}
.hangul-intro h1 span {color:#c86d63;font-size:23px}
.hangul-intro p {margin-top:7px;color:#7f8da1;font-size:12px}
.hangul-intro-pills {display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.hangul-intro-pills span {background:#f2f5fa;border:1px solid #e6eaf3;border-radius:6px;padding:5px 9px;color:#637b9e;font-size:11px}
.hangul-layout {display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:17px;align-items:start;margin-top:17px}
.hangul-workspace {min-width:0;display:grid;gap:17px}
.hangul-panel,.hangul-sidebox,.hangul-help {background:#fff;border:1px solid #e5eaf3;border-radius:13px;box-shadow:0 3px 20px rgba(36,55,83,.03)}
.hangul-panel {padding:21px 24px}
.hangul-panel-heading {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:11px}
.hangul-panel-heading>div {display:flex;align-items:center;gap:8px}
.hangul-panel-heading h2 {font-size:17px;letter-spacing:-.4px}
.hangul-step {display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#eef3fa;color:#5273a9;font-size:11px;font-weight:850}
.hangul-hint-badge {font-size:10px;color:#628d6c;background:#edf7ef;border-radius:13px;padding:5px 9px}
.hangul-private {font-size:10px;color:#789d81;background:#edf6f1;border-radius:13px;padding:5px 9px}
.hangul-panel-desc {color:#8592a6;font-size:12px;line-height:1.7;margin-bottom:15px}
.hangul-label {display:block;color:#526989;font-size:12px;font-weight:800;margin-bottom:7px}
.hangul-label span {font-size:10px;color:#9eaabe;font-weight:500}
.hangul-roman-input,.hangul-editor {width:100%;display:block;min-height:115px;border:1px solid #dce5f0;background:#fafcff;border-radius:10px;resize:vertical;padding:13px 15px;outline:none;font-size:17px;line-height:1.75;color:#304663}
.hangul-editor {font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Malgun Gothic",sans-serif;font-size:22px;min-height:135px}
.hangul-roman-input:focus,.hangul-editor:focus {border-color:#88a5d2;box-shadow:0 0 0 3px #eaf0fb}
.hangul-controls,.hangul-editor-footer {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:11px}
.hangul-controls>div,.hangul-editor-actions {display:flex;gap:7px;flex-wrap:wrap}
.hangul-count {font-size:11px;color:#97a3b4}
.hangul-btn {display:inline-flex;justify-content:center;align-items:center;gap:5px;border:1px solid #dfe5ef;border-radius:8px;padding:8px 11px;min-height:37px;background:#fff;color:#506b8d;font-size:12px;font-weight:800}
.hangul-btn:hover {background:#f4f7fc}
.hangul-btn-primary {background:#3e64a4;border-color:#3e64a4;color:#fff}
.hangul-btn-primary:hover {background:#31558f}
.hangul-preview-wrap {border:1px solid #e2eaf5;border-radius:10px;background:#f6f9ff;padding:13px 14px;margin-top:14px}
.hangul-preview-heading {display:flex;justify-content:space-between;align-items:baseline;gap:9px}
.hangul-preview-heading strong {font-size:12px;color:#4d6691}
.hangul-preview-heading small {font-size:10px;color:#9aa9bb}
.hangul-preview {color:#304d78;font-size:21px;min-height:46px;line-height:1.7;margin-top:7px;white-space:pre-wrap;overflow-wrap:anywhere}
.hangul-preview.is-empty {font-size:12px;color:#a0adbe;line-height:2.5}
.hangul-convert-actions {margin-top:11px;display:flex}
.hangul-convert-actions>.hangul-btn {width:100%;padding:11px;font-size:13px}
.hangul-note {font-size:11px;color:#9aa6b7;line-height:1.8;margin-top:13px}
.hangul-note strong {color:#627995}
.hangul-board-heading {margin:16px 0 9px}
.hangul-board-heading h3 {font-size:13px;color:#4b6589}
.hangul-board-heading span {font-size:11px;color:#95a4b7;font-weight:500}
.hangul-key-grid {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.hangul-key {border:1px solid #e2e8f1;border-radius:8px;background:#fafcff;min-height:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:5px 1px}
.hangul-key:hover {border-color:#a4bde2;background:#eef5ff}
.hangul-key strong {font-size:22px;font-weight:750;line-height:1.25;color:#2e4d7b}
.hangul-key small {font-size:10px;color:#91a0b5}
.hangul-board-actions {display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.hangul-board-actions .hangul-btn {flex:1}
.hangul-phrase-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hangul-phrase {display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;min-width:0;padding:12px;background:#fafcff;border:1px solid #e7edf5;border-radius:9px}
.hangul-phrase:hover {background:#f0f6fe;border-color:#bed0eb}
.hangul-phrase strong {color:#34557f;font-size:15px}
.hangul-phrase span {color:#71869d;font-size:11px}
.hangul-phrase small {color:#9aa9ba;font-size:10px;overflow-wrap:anywhere}
.hangul-aside {display:grid;gap:15px}
.hangul-sidebox {padding:19px}
.hangul-sidebox h2 {font-size:15px;color:#41597b;margin-bottom:13px}
.hangul-sidebox p {font-size:11px;color:#8696a9;line-height:1.75}
.hangul-sidebox p strong {color:#516b90}
.hangul-example-list {display:grid;gap:11px}
.hangul-example-list>div {border-bottom:1px solid #edf1f6;padding-bottom:10px}
.hangul-example-list>div:last-child {border:0;padding-bottom:0}
.hangul-example-list code {display:block;font-size:11px;color:#56749c;background:none;padding:0}
.hangul-example-list strong {display:block;color:#2b476a;font-size:18px;margin-top:3px}
.hangul-example-list span {display:block;color:#92a1b3;font-size:10px}
.hangul-build-example {display:flex;align-items:center;justify-content:space-between;gap:3px;margin:13px 0}
.hangul-build-example span,.hangul-build-example strong {border-radius:7px;background:#f0f5fb;color:#44699b;padding:7px 10px;font-size:18px}
.hangul-build-example strong {background:#3e64a4;color:#fff}
.hangul-build-example b {color:#a3afbf;font-size:12px}
.hangul-help {padding:21px 24px;margin-top:17px}
.hangul-help h2 {font-size:17px;margin-bottom:12px}
.hangul-help details {padding:11px 0;border-bottom:1px solid #edf1f7}
.hangul-help details:last-child {border:0}
.hangul-help summary {font-size:12px;font-weight:800;color:#486385;cursor:pointer}
.hangul-help p {font-size:11px;line-height:1.8;margin-top:7px;color:#8291a6}
.hangul-manual {position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #ddd;box-shadow:0 6px 25px #d6dde9;width:min(540px,calc(100% - 30px));z-index:99;padding:15px}
.hangul-manual p {font-size:12px}
.hangul-manual textarea {width:100%;margin-top:8px;padding:8px}
@media(max-width:920px) {.hangul-layout {grid-template-columns:1fr}.hangul-aside {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px) {.hangul-page {padding:15px 0 42px}.hangul-intro {padding:18px 17px}.hangul-intro h1 {font-size:23px}.hangul-intro h1 span {font-size:21px}.hangul-panel {padding:17px 13px}.hangul-panel-heading h2 {font-size:16px}.hangul-panel-desc {font-size:11px}.hangul-key-grid {grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.hangul-key {min-height:54px}.hangul-key strong {font-size:21px}.hangul-phrase-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hangul-aside {grid-template-columns:1fr}.hangul-btn {font-size:11px}.hangul-editor {font-size:21px}}
@media(max-width:370px) {.hangul-key-grid {grid-template-columns:repeat(6,minmax(0,1fr))}.hangul-editor-actions {width:100%}.hangul-editor-actions .hangul-btn {flex:1}}