/* =========================
   Language Switch (PC=원본, 좁아지면만 축소)
   기준폭: 1400px
========================= */
:root { --base: 1400; }

/* 언어 선택 영역 */
.lang-switch {
  position: absolute;
  /* 원본: top:20px, left:30px → 창이 좁아지면만 축소 */
  top:  calc( min(20px, calc(20 / var(--base) * 100vw)) + env(safe-area-inset-top) );
  left: calc( min(30px, calc(30 / var(--base) * 100vw)) + env(safe-area-inset-left) );
  display: flex;
  gap:   min(10px, calc(10 / var(--base) * 100vw));
  z-index: 10;
}

/* 공통 버튼 */
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:      min(10px, calc(10 / var(--base) * 100vw));
  /* 원본: width:160px, padding:8px 20px, font-size:15px */
  width:    min(160px, calc(160 / var(--base) * 100vw));
  padding:  min(8px,  calc( 8 / var(--base) * 100vw))
            min(20px, calc(20 / var(--base) * 100vw));
  border-radius: 999px; /* 모양 유지용 */
  font-family: 'ONE-Mobile-POP', sans-serif;
  font-size: min(15px, calc(15 / var(--base) * 100vw));
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* 테마 컬러는 기존과 동일 */
}

/* 비활성 버튼 (기본) */
.lang-btn:not(.active) {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid #804800;
  color: #777;
}

/* 활성 버튼 (선택됨) */
.lang-btn.active {
  background-color: #804800;
  color: #fff;
  border: none;
}

/* 아이콘 공통 스타일 */
.lang-btn .lang-icon {
  /* 원본: 32px, 폰트 18px → 축소만 */
  width:      min(32px, calc(32 / var(--base) * 100vw));
  height:     min(32px, calc(32 / var(--base) * 100vw));
  border-radius: 50%;
  font-weight: bold;
  font-size:  min(18px, calc(18 / var(--base) * 100vw));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 아이콘: 한글 */
.lang-icon.kor {
  background-color: #FFD56F;
  color: #804800;
}

/* 아이콘: 영어 */
.lang-icon.eng {
  background-color: #FFD56F;
  color: #804800;
}

/* 활성화 상태에서도 아이콘 색상 유지 */
.lang-btn.active .lang-icon.kor {
  background-color: #FFD56F;
  color: #804800;
}
.lang-btn.active .lang-icon.eng {
  background-color: #FFD56F;
  color: #804800;
}


/* anchor reset for language buttons */
a.lang-btn { text-decoration: none; color: inherit; }

a.lang-btn:focus { text-decoration: none; color: inherit; }
