/* 用途：共享韩语键盘样式；文件：public/assets/korean-keyboard.css。 */
/* 模块：共享韩语键盘样式。入口：public/assets/korean-keyboard.css。 */
/* 样式分区：.keyboard；维护此组件的布局、外观与交互状态。 */

.keyboard{border:1px solid var(--border);background:#ecefe8;border-radius:14px;margin-top:12px;padding:20px;max-width:740px;box-shadow:0 10px 25px #23392908}
/* 样式分区：.keyboard-heading；维护此组件的布局、外观与交互状态。 */
.keyboard-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.keyboard-heading strong{font-size:12px}.keyboard-heading span{font-size:10px;color:var(--muted);margin-left:10px}.keyboard-heading label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
/* 样式分区：.key-row；维护此组件的布局、外观与交互状态。 */
.key-row{display:flex;justify-content:center;gap:6px;margin:6px 0}
/* 样式分区：.key；维护此组件的布局、外观与交互状态。 */
.key{flex:1;max-width:56px;min-width:0;padding:7px 0;background:#fff;border:1px solid #dce1d4;border-bottom-width:3px;border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:19px;line-height:1.4}.key small{font-size:8px;color:#99a292}.key:hover{background:#f5f9ee}.key.wide{max-width:85px;font-size:11px;flex:1.5}.key.space{max-width:300px;flex:5;font-size:11px}.key.shifted{background:var(--green);color:white}
/* 样式分区：.keyboard-footer；维护此组件的布局、外观与交互状态。 */
.keyboard-footer{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:13px;gap:10px}
/* 样式分区：@media(max-width:760px)；维护此组件的布局、外观与交互状态。 */

@media(max-width:760px){.keyboard{padding:12px 8px}.key-row{gap:3px;margin:4px 0}.key{font-size:17px;border-radius:5px;padding:6px 0}.keyboard-heading span{display:none}.keyboard-heading label{font-size:9px}.keyboard-footer{font-size:8px}.keyboard-footer>span:last-child{display:none}}.keyboard-footer{align-items:center;flex-wrap:wrap}.keyboard-footer .text-link{margin:0;font-size:10px;white-space:nowrap}.key{touch-action:manipulation}

/* Mapping is a per-opening switch; defaults belong to input preferences. */
.keyboard .keyboard-heading{justify-content:flex-start;flex-wrap:wrap;gap:12px}.keyboard-heading>div:first-child{margin-right:auto}.keyboard .keyboard-mapping{display:flex;align-items:center;gap:9px;margin-left:auto}.keyboard .keyboard-mapping>span{margin:0;font-size:11px;white-space:nowrap}.keyboard .mapping-switch{position:relative;display:inline-block;width:44px;min-width:44px;height:26px;min-height:26px;padding:0;margin:0;border:0;border-radius:999px;background:#cdd3ce;cursor:pointer;transition:background .18s;box-shadow:inset 0 0 0 1px #00000006}.keyboard .mapping-switch:before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s}.keyboard .mapping-switch[aria-checked=true]{background:#34c759}.keyboard .mapping-switch[aria-checked=true]:before{transform:translateX(18px)}.keyboard .mapping-switch:focus-visible{outline:2px solid var(--green);outline-offset:3px}.keyboard-heading>.icon-button{flex-shrink:0}@media(max-width:480px){.keyboard .keyboard-heading>div:first-child{flex-basis:calc(100% - 42px);order:0}.keyboard-heading>.icon-button{order:1}.keyboard .keyboard-mapping{order:2;flex-basis:100%;justify-content:flex-end}.keyboard .keyboard-heading{gap:7px;margin-bottom:10px}}@media(prefers-reduced-motion:reduce){.keyboard .mapping-switch,.keyboard .mapping-switch:before{transition:none}}
.keyboard .keyboard-mapping>span{display:inline}
/* Shared floating Korean keyboard, used on public pages and inside admin dialogs. */
/* 样式分区：.ko-keyboard；维护此组件的布局、外观与交互状态。 */

.ko-keyboard{position:fixed;inset:auto auto max(12px,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);width:min(740px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:0;padding:18px;overflow:auto;overscroll-behavior:contain;z-index:2200;box-shadow:0 12px 55px #183f3730;color:var(--ink)}
.ko-keyboard::backdrop{background:transparent;pointer-events:none}
.ko-keyboard .keyboard-heading{margin-bottom:12px;flex-wrap:nowrap}
.ko-keyboard .keyboard-heading>div:first-child{min-width:0;flex:1}
.ko-keyboard .keyboard-heading strong{font-size:12px;white-space:nowrap}
.ko-keyboard .keyboard-mapping{margin-left:auto;flex-shrink:0}
.ko-keyboard .keyboard-mapping span{display:inline;margin:0;font-size:10px}
.ko-keyboard .ko-input-preview{padding:8px 12px;margin:0 0 10px;border:1px solid #d6dfce;border-radius:8px;background:#fff;font-size:18px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:68px;overflow:auto;color:var(--ink)}
.ko-keyboard .keyboard-footer{margin-top:10px;justify-content:flex-start}
.ko-keyboard .keyboard-footer .text-link{margin:0}
.ko-keyboard .key{min-height:44px}
@media(max-width:760px){.ko-keyboard{inset:auto auto max(8px,env(safe-area-inset-bottom)) 50%;width:calc(100vw - 16px);padding:12px 8px}.ko-keyboard .keyboard-heading{gap:8px;margin-bottom:10px}.ko-keyboard .keyboard-heading strong{font-size:11px}.ko-keyboard .keyboard-mapping{gap:6px}.ko-keyboard .keyboard-mapping span{font-size:9px}.ko-keyboard .ko-input-preview{font-size:16px;max-height:56px}.ko-keyboard .key{font-size:17px;padding:6px 0}.ko-keyboard .key.wide,.ko-keyboard .key.space{font-size:10px}}
@media(max-height:480px){.ko-keyboard{padding:8px}.ko-keyboard .keyboard-heading{margin-bottom:4px}.ko-keyboard .ko-input-preview{max-height:30px;padding:2px 8px;margin-bottom:3px}.ko-keyboard .key{min-height:32px;padding:2px 0}.ko-keyboard .key-row{margin:3px 0}.ko-keyboard .keyboard-footer{margin-top:3px}}

@media(max-width:480px){.ko-keyboard .keyboard-heading>div:first-child{flex-basis:auto;order:0;margin-right:0}.ko-keyboard .keyboard-mapping{flex-basis:auto;order:0}.ko-keyboard .keyboard-heading>.icon-button{order:0}}

/* 模块：键盘功能键排版。单行文字沿纵轴居中，字母键仍保留韩文字母与英文映射两层。 */
.ko-keyboard .key.wide,.ko-keyboard .key.space{justify-content:center;align-items:center}