/* ============================================================
   킹수학(King's Math) 다국어 언어 선택 UI 전용 스타일시트
   - 게임 본체(styles.css)와 완전히 독립적으로 운영됩니다.
   - 이 파일은 #langTriggerWrap / #langModal / #langToast 내부만 다루며,
     styles.css와 클래스/셀렉터가 절대 겹치지 않도록 모두 lg-/lang 접두사를 사용합니다.
   ============================================================ */

#langTriggerWrap,
#langModal,
#langToast {
  --lg-font: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo",
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--lg-font);
}

/* 요구사항 10: 모달 내부 박스 사이징 강제 보정 */
#langModal, #langModal * {
  box-sizing: border-box !important;
}
#langTriggerWrap, #langTriggerWrap *,
#langToast, #langToast * {
  box-sizing: border-box;
}

/* ---------------- Trigger Button (우측 상단 지구본 버튼) ---------------- */
#langTriggerWrap {
  position: fixed;
  top: clamp(10px, 1.6vh, 18px);
  right: clamp(10px, 1.6vw, 22px);
  z-index: 99999;
}

#langTriggerWrap.lg-hidden {
  display: none !important;
}

#langTriggerBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 24, 34, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  color: #e5e7eb;
  font-family: var(--lg-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  line-height: 1;
}

#langTriggerBtn:hover { background: rgba(38, 44, 60, 0.92); border-color: rgba(255, 255, 255, 0.32); }
#langTriggerBtn:active { transform: scale(0.96); }

#langTriggerBtn .lg-icon-globe { color: #ffd700; font-size: 14px; }
#langTriggerBtn .lg-chevron { color: #9ca3af; font-size: 10px; }

.lg-flag {
  width: 20px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: block;
}

#langCurrentName {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  #langCurrentName { display: none; }
}

/* ---------------- Modal Overlay ---------------- */
#langModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 8, 14, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

#langModal.lg-active {
  opacity: 1;
  visibility: visible;
}

#langModalPanel {
  width: 100%;
  max-width: 720px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #12141c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

#langModal.lg-active #langModalPanel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.lg-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.lg-panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-panel-title .lg-icon-lang { color: #ffd700; }

.lg-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: var(--lg-font);
  transition: background-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.lg-close-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.lg-search-wrap {
  position: relative;
  padding: 14px 20px 8px;
  flex-shrink: 0;
}

.lg-search-icon {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 13px;
  pointer-events: none;
}

#langSearchInput {
  width: 100%;
  background: #1b1e29;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--lg-font);
  font-size: 13px;
  border-radius: 12px;
  padding: 11px 14px 11px 34px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#langSearchInput::placeholder { color: #6b7280; }
#langSearchInput:focus {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}

.lg-grid-wrap {
  overflow-y: auto;
  padding: 12px 20px 20px;
  flex: 1;
}

.lg-grid-wrap::-webkit-scrollbar { width: 8px; }
.lg-grid-wrap::-webkit-scrollbar-track { background: rgba(31, 41, 55, 0.4); border-radius: 4px; }
.lg-grid-wrap::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
.lg-grid-wrap::-webkit-scrollbar-thumb:hover { background: #6b7280; }

.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.lg-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  text-align: left;
}
.lg-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); }
.lg-card.lg-selected { background: rgba(255, 215, 0, 0.08); border-color: #ffd700; }

.lg-card-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lg-card-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lg-card-native {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-card.lg-selected .lg-card-native { color: #ffd700; }

.lg-card-en {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lg-card-check {
  color: #ffd700;
  font-size: 15px;
  flex-shrink: 0;
}

.lg-no-result {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #6b7280;
  text-align: center;
}
.lg-no-result.lg-show { display: flex; }
.lg-no-result .lg-icon-frown { font-size: 34px; margin-bottom: 10px; }
.lg-no-result p { margin: 0; font-size: 13px; }

/* ---------------- Toast ---------------- */
#langToast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1b1e29;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
  max-width: 320px;
}
#langToast.lg-show {
  transform: translateY(0);
  opacity: 1;
}
#langToast .lg-icon-check { color: #22c55e; font-size: 15px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   요구사항 6 / 14: Font Awesome 아이콘 폰트 깨짐(네모 □) 방지 예외 처리
   위쪽에서 지정한 --lg-font(일반 텍스트 폰트)가 fa- 아이콘에는
   절대 적용되지 않도록 아이콘 요소에 아이콘 전용 폰트를 강제 고정한다.
   ---------------------------------------------------------------- */
#langTriggerWrap i[class*="fa-"],
#langModal i[class*="fa-"],
#langToast i[class*="fa-"] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block;
}
#langTriggerWrap i.fa-brands,
#langModal i.fa-brands,
#langToast i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}