/* 웹폰트 네트워크 요청 없이 OS의 한글·라틴·중국어·일본어 글꼴을 사용합니다. */
:root { --game-text-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Microsoft YaHei", "Yu Gothic UI", "Meiryo", sans-serif; }
html[data-game-locale] body, html[data-game-locale] button, html[data-game-locale] input, html[data-game-locale] select, html[data-game-locale] textarea { font-family: var(--game-text-font); }
html[data-game-locale="en"] .dialog-title, html[data-game-locale="en"] .dialog-button, html[data-game-locale="en"] .mode-button { letter-spacing: normal; }
[data-game-locale] { min-width: 0; max-width: 100%; font-size: 16px; }
html[data-game-locale] .setting-row select[data-game-locale] { width: min(100%, 11rem); }
html[data-game-locale] .dialog-button { overflow-wrap: anywhere; }
.battle-notice-live { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
html[data-i18n-state="choose"] body > :not([data-locale-picker]), html[data-i18n-state="pending"] body > :not(.locale-load-retry) { visibility: hidden; }
html[data-i18n-state="pending"][data-i18n-slow]::after { content: ""; position: fixed; top: 50%; left: 50%; width: 24px; height: 24px; border: 3px solid #7c8899; border-top-color: #ffe09c; border-radius: 50%; }
.locale-picker { position: fixed; inset: 0; z-index: 2147483646; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background: #121b27; color: #f5eddd; font-family: var(--game-text-font); }
.locale-picker h1 { margin: 0 auto auto; padding-top: 1rem; max-width: 100%; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; font-weight: 600; }
.locale-picker-options { display: flex; flex-direction: column; gap: 0; width: min(100%,36rem); margin: 0 auto; }
.locale-picker-option { box-sizing: border-box; margin-bottom: 8px; min-height: 56px; border: 1px solid #7c8899; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; background: #243145; color: #f5eddd; font: inherit; line-height: 1.3; cursor: pointer; }
.locale-picker-option:last-child { margin-bottom: 0; }
.locale-picker-option strong { font-size: 1.1rem; font-weight: 650; }
.locale-picker-option span { font-size: .85rem; overflow-wrap: anywhere; }
.locale-picker-option[data-suggested] { border-color: #e6bb68; background: #35435a; }
.locale-picker-option:focus-visible, .locale-picker h1:focus { outline: 3px solid #ffe09c; outline-offset: 3px; }
.locale-picker-option:active { background: #495b74; }
.locale-picker-option:disabled { opacity: .7; cursor: progress; }
.locale-picker-status { min-height: 1.3em; margin: 0 auto; line-height: 1.3; }
.locale-picker[data-hand="left"] .locale-picker-options { margin-left: 0; }
.locale-picker[data-hand="right"] .locale-picker-options { margin-right: 0; }
.locale-storage-notice, .locale-load-retry { position: fixed; z-index: 2147483645; left: 16px; right: 16px; bottom: max(12px,env(safe-area-inset-bottom)); margin: 0 auto; max-width: 36rem; padding: 12px; background: #243145; color: #f5eddd; border: 1px solid #e6bb68; border-radius: 8px; font-family: var(--game-text-font); }
.locale-load-retry button { min-height: 44px; font: inherit; }
@media (orientation: landscape) {
  .locale-picker { justify-content: center; gap: 12px; }
  .locale-picker h1 { margin: 0 auto; padding: 0; }
  .locale-picker-options { flex-direction: row; flex-wrap: wrap; }
  .locale-picker-option { flex: 0 0 calc(50% - 8px); margin: 4px; }
  .locale-picker-option:last-child { margin-bottom: 4px; }
}
@media (max-height: 400px) {
  .locale-picker { padding-top: max(12px,env(safe-area-inset-top)); padding-bottom: max(12px,env(safe-area-inset-bottom)); gap: 8px; }
  .locale-picker-option { padding: 8px 12px; }
}
