/* -------------------------------------------------
   플로팅 언어 선택 버튼 래퍼
------------------------------------------------- */
#langFloatingWrapper {
  position: fixed;
  bottom: 220px;          /* 화면 하단에서 띄우기 */
  left: 50%;              /* 화면 가로 중앙으로 */
  transform: translateX(-50%); /* 자신의 너비 절반만큼 왼쪽으로 이동 */
  z-index: 1001;
  display: flex;
  flex-direction: column-reverse; /* 토글 버튼이 맨 아래, 옵션들이 위에 쌓임 */
  align-items: center;    /* 내부 버튼/리스트도 중앙 정렬 */
  user-select: none;
}


/* -------------------------------------------------
   언어 변경 토글 버튼 (더 크게, 파란색, 완전 둥글게)
------------------------------------------------- */
.floating-btn {
  background-color: #007AFF;      /* iOS 기본 파란색 */
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;          /* 완전히 둥글게 */
  padding: 20px 28px;             /* 크기 크게 */
  font-size: 1.8rem;              /* 폰트 크기 더 키움 */
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 360px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s, transform 0.1s;
  justify-content: center;
  pointer-events: auto;
}

/* Hover/Focus 시 색상 진해짐 */
.floating-btn:hover,
.floating-btn:focus {
  background-color: #005BBB;
}

/* 눌린 효과 (active) */
.floating-btn:active {
  transform: scale(0.96);
}

/* -------------------------------------------------
   언어 목록 컨테이너 (pill 모양, 옵션들이 위쪽에 보임)
------------------------------------------------- */
.lang-list {
  margin-bottom: 8px;     /* 토글 버튼과 간격 */
  display: flex;
  flex-direction: column;
  gap: 8px;               /* 옵션 간격 */
}

/* 숨김 */
.hidden {
  display: none !important;
}

/* -------------------------------------------------
   개별 언어 버튼: 좌측에 국기 아이콘이 완전 원형으로, 버튼 모서리와 딱 맞닿도록
------------------------------------------------- */
.lang-btn {
  background-color: #FFFFFF;
  color: #212121;
  border: 2px solid #007AFF;      /* 파란색 테두리 */
  border-radius: 9999px;           /* 완전히 둥글게 */
  position: relative;              /* 내부에 flag를 절대 위치로 배치 */
  padding-left: 56px;              /* 국기 너비(40px) + 좌우 여백(16px) */
  padding-right: 28px;
  width: 360px;
  height: 80px;                   /* 옵션 버튼과 동일한 고정 너비 */
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 700;                /* 텍스트 굵게 */
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s, transform 0.1s;
  overflow: hidden;
}

/* Hover/Focus 시 배경이 연한 회색 */
.lang-btn:hover,
.lang-btn:focus {
  background-color: #F0F0F0;
}

/* 클릭 시 눌린 효과 */
.lang-btn:active {
  transform: scale(0.96);
}

/* -------------------------------------------------
   원형 국기 아이콘 래퍼: 버튼 내부 왼쪽에 완전 원형으로 배치
   버튼의 왼쪽 테두리와 딱 맞닿도록 left: 0 사용
------------------------------------------------- */
.lang-btn .flag {
  padding-top: 20px;
  padding-bottom: 20px;
  width: auto;
  height: 96px;
  overflow: hidden;
  background-color: transparent;
  box-sizing: border-box;

  /* 부드럽고 선명한 스케일링 */
  image-rendering: auto;               /* 표준: 브라우저 기본 보간 사용 */
  -ms-interpolation-mode: bicubic;     /* IE: bicubic 보간으로 부드럽게 */
  
  /* img 태그라면 아래를 추가해도 좋습니다 */
  object-fit: contain;
  object-position: center;
}


/* -------------------------------------------------
   실제 국기 이미지: .flag 내부에 꽉 차게 하여 동그란 효과
------------------------------------------------- */
.lang-btn .flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------
   언어 텍스트: padding-left 덕분에 자동으로 국기 오른쪽에 표시
   추가 마진 불필요
------------------------------------------------- */
.lang-btn .lang-text {
  /* 특별한 여백 처리 불필요. padding-left이 충분히 확보됨 */
  margin-left: 24px;
}

/* -------------------------------------------------
   모바일/터치스크린 터치 영역 확보
------------------------------------------------- */
.lang-btn {
  touch-action: manipulation;
}