/* Device-local UI typography; practice and annotation fonts remain independent. */
@font-face{font-family:'XiXi Site WenKai Hangul';src:url('/static/fonts/xixi/XiXi-LXGW-WenKai-KR-Hangul.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF,U+302E-302F}
@font-face{font-family:'XiXi Simplified UI';src:url('/static/fonts/xixi/XiXi-NotoCJK-SC-UI-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+20000-323AF}
@font-face{font-family:'XiXi Simplified UI';src:url('/static/fonts/xixi/XiXi-NotoCJK-SC-UI-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+20000-323AF}
:is(#typographySettingsCard,#appearanceSettingsCard) .typography-option + .typography-option{margin-top:20px;padding-top:18px;border-top:1px solid #cbd5e1}
#typographySettingsCard > .typography-option:last-child > .settings-row:last-child{margin-bottom:0}
.theme-dark :is(#typographySettingsCard,#appearanceSettingsCard) .typography-option + .typography-option{border-color:#475569}
#uiFontSettings .settings-row{flex-wrap:wrap;gap:8px}
.ui-font-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#uiFontSettings .ui-font-heading h3{margin:0}
#uiFontSettings .ui-font-mode-row{justify-content:flex-start;flex-wrap:nowrap}
.ui-font-mode-row #uiFontMode{flex:0 1 300px;width:300px;min-width:0}
.ui-font-mode-row .ui-font-size-control{flex:0 0 auto}
.ui-font-size-control{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#64748b;font-size:.85rem}
.ui-font-size-control input{width:64px;min-width:64px;padding:6px 7px;text-align:center;font:inherit;color:inherit}
.theme-dark .ui-font-size-control{color:#cbd5e1}
#uiFontMode{max-width:100%;min-width:0}
#uiFontName{width:min(300px,100%);max-width:100%;min-width:0}
#uiFontHelp,#uiFontStatus{font-size:.8rem;line-height:1.5;color:#64748b;margin-top:8px}
.theme-dark #uiFontHelp,.theme-dark #uiFontStatus{color:#94a3b8}
#uiFontPreview{padding:12px;border:1px dashed #94a3b8;border-radius:8px;margin-top:10px;overflow-wrap:anywhere}
html[data-ui-font] :is(body,button,input,select,textarea,#accountSettingsSection,.official-operator-badge,.realtime-duel-offscreen-badge,.language-welcome,#practiceDictionaryMenu,#chatExternalLinkDialog,.chat-qr-link,.xixi-helper-controls,.xixi-helper-collapse,.chat-room-unread,#xixiRecordSummary){font-family:var(--xixi-ui-font)!important}
html[data-ui-font] :is(.line-input,.prep-input,#persistentImeEditor){font-family:var(--pf)!important}
html[data-ui-font] :is(.line-input,#persistentImeEditor).xixi-old-hangul-font-context{font-family:'XiXi Practice Old Hangul',var(--pf)!important}
html .xixi-simplified-ui,html .xixi-simplified-ui :is(button,input,select,textarea,td,th,.practice-text-title,.line-original,.line-input){font-family:var(--xixi-ui-hans-font)!important}
html[data-ui-font] .xixi-simplified-ui :is(button,input,select,textarea,#textSearchInput,td,th,.practice-text-title,.line-original,.line-input){font-family:var(--xixi-ui-hans-font)!important}

.ui-font-script-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ui-font-script-row label{min-width:110px;font-weight:600}
.ui-font-script-row input{width:min(260px,100%);max-width:100%;min-width:0}
.ui-font-script-sample{overflow-wrap:anywhere;max-width:100%}
#uiFontScriptHelp{font-size:.8rem;line-height:1.5;margin-top:12px;color:#64748b}
.theme-dark #uiFontScriptHelp{color:#94a3b8}

.xixi-font-combo{position:relative;display:inline-flex;align-items:stretch;max-width:100%;min-width:0;width:min(300px,100%)}
.xixi-font-combo input{width:100%!important;padding-right:38px!important;box-sizing:border-box}
.xixi-font-combo-arrow{position:absolute;inset:1px 1px 1px auto;width:34px;padding:7px!important;display:grid;place-items:center;background:transparent;color:inherit;border:0;border-radius:0}
.xixi-font-combo-arrow svg{width:16px;height:16px;pointer-events:none}
.xixi-font-candidates{position:absolute;top:100%;left:0;right:0;z-index:12060;max-height:min(240px,40dvh);overflow:auto;overscroll-behavior:contain;border:1px solid #94a3b8;border-radius:8px;background:var(--card-bg,#fff);color:var(--text-color,#172038);box-shadow:0 4px 12px #0003}
.xixi-font-candidates button{display:block;width:100%;text-align:start;padding:8px 12px;border:0;background:transparent;color:inherit;font:inherit;overflow-wrap:anywhere}
.xixi-font-candidates button:is(.active,:hover){background:#4967df33}