/* korean_keyboard.css - 한글 커스텀 키보드 (네오브루탈리즘) */

/* ===== 다크 테마 (기본) ===== */
.td-kb-wrap{background:#1a1a2e;padding:4px 2px 6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));flex-shrink:0;touch-action:none}
.td-kb-input{display:flex;align-items:center;justify-content:center;height:28px;width:50%;margin:0 auto 4px;padding:4px 10px;background:rgba(255,255,255,.1);border:2px solid #555;border-radius:6px;color:#fff;font-size:1.1em;font-weight:600;box-sizing:border-box;overflow:hidden}
.td-kb-cursor{display:inline-block;width:2px;height:1em;background:#FFCC00;margin-left:1px;animation:td-kb-blink 1s step-end infinite}
@keyframes td-kb-blink{50%{opacity:0}}
.td-kb-row{display:flex;gap:3px;justify-content:center;margin-bottom:3px;padding:0 2px;touch-action:none}
.td-kb-row2{padding:0 calc(2px + 5%)}
.td-kb-key{flex:1;max-width:none;height:44px;background:#333;border:2px solid #555;border-radius:6px;color:#fff;font-size:1.4em;font-weight:600;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.td-kb-key.td-kb-active{background:#FFCC00;color:#000;border-color:#000}
.td-kb-shift,.td-kb-backspace{flex:1.4;max-width:none;font-size:1em}
.td-kb-shift{margin-right:6px}
.td-kb-backspace{margin-left:6px}
.td-kb-shift.td-kb-shifted{background:#FFCC00;color:#000;border-color:#000}
.td-kb-enter{flex:1;max-width:100%;height:44px;background:#FF3366;border:2px solid #000;color:#fff;font-weight:800;font-size:1.15em;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.td-kb-symbol{flex:1;max-width:100%;height:44px;background:#444;border:2px solid #555;font-weight:700;font-size:1em;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.td-kb-symbol-back{flex:1;max-width:100%;height:44px;background:#444;border:2px solid #555;font-weight:700;font-size:1em;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.td-kb-sym-key{font-size:1.2em;font-weight:700}
.td-kb-newline{flex:1;max-width:100%;height:44px;background:#444;border:2px solid #555;font-weight:700;font-size:1em;box-shadow:2px 2px 0 rgba(0,0,0,.5)}

/* 하단 바 */
.td-kb-bottom-row{gap:3px;padding:0 2px;margin-bottom:0}
.td-kb-mode-key{flex:0 0 auto;width:auto;min-width:38px;padding:0 8px;height:44px;font-size:.95em;font-weight:700;background:#444;border:2px solid #555;border-radius:6px}
.td-kb-space-key{flex:3;height:44px;font-size:1em;font-weight:600;background:#333;border:2px solid #555;border-radius:6px}
.td-kb-newline-key{flex:0 0 auto;width:auto;min-width:50px;padding:0 10px;height:44px;font-size:.95em;font-weight:700;background:#FF3366;border:2px solid #000;color:#fff;border-radius:6px}
.td-kb-numsym,.td-kb-num{flex:1.4;max-width:none;font-size:.95em;font-weight:700;background:#444;border:2px solid #555}

/* ===== 라이트 테마 ===== */
.td-kb-light.td-kb-wrap{background:#FFFDF5;border-top:3px solid #000;padding:3px 1px 4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
.td-kb-light .td-kb-input{background:#fff;border:2px solid #000;color:#000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-cursor{background:#FF3366}
.td-kb-light .td-kb-key{background:#fff;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-key.td-kb-active{background:#FFCC00;color:#000}
.td-kb-light .td-kb-shift.td-kb-shifted{background:#FFCC00;color:#000}
.td-kb-light .td-kb-enter{background:#FF3366;color:#fff;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-symbol,.td-kb-light .td-kb-symbol-back{background:#eee;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-sym-key{background:#fff;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-mode-key{background:#eee;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-space-key{background:#fff;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-newline-key{background:#FF3366;color:#fff;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-newline{background:#eee;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}
.td-kb-light .td-kb-numsym,.td-kb-light .td-kb-num{background:#eee;color:#000;border:2px solid #000;box-shadow:2px 2px 0 #000}