/* =========================================================
   Welling Post Language Switcher – FAB + Overlay
   v1.2.4  (FAB 자리 고정 + 자연스러운 스왑)
   ========================================================= */

/* FAB 컨테이너: 위치/히트영역 */
.wpls-fab {
  all: unset;
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 999999;           /* overlay(999998) 위 */
  width: 24px;
  height: 24px;
  display: block;            /* 내부를 절대배치로 겹침 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* FAB 내부 아이콘 2개(번역 아이콘 / X)를 '완전 겹침'
   -> 크기/위치를 동일하게 유지해 교체 시 움직임 없음 */
.wpls-fab__icon,
.wpls-fab__close {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;               /* 요청: 40 x 40 */
  height: 40px;
  transform: translate(-50%, -50%);   /* 컨테이너 중앙 정렬 */
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: opacity .18s ease, box-shadow .18s ease;
  will-change: opacity;
}

/* 번역 아이콘: PNG 원형 그대로 노출 */
.wpls-fab__icon {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
}

/* 호버 시 살짝 강조(이동 없이 그림자만 변경) */
.wpls-fab:hover .wpls-fab__icon {
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* X 버튼: 열림 상태에서만 보이도록 투명도만 교체 */
.wpls-fab__close {
  background: #0b24fa;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(11,36,250,.46);
  opacity: 0;                /* 기본 숨김 */
  pointer-events: none;      /* 클릭 방지 (닫힐 때까지) */
  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}

/* 열림 상태: 아이콘 숨김, X 표시 (위치/크기 변화 없음 → 점프 방지) */
html.wpls--open .wpls-fab__icon { opacity: 0; pointer-events: none; }
html.wpls--open .wpls-fab__close { opacity: 1; pointer-events: auto; }

/* ---------- Overlay ---------- */
.wpls-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  height: 100dvh;	 /* iOS Safari 에서 동적 툴바 포함 높이 */
  background: #0b24fa;       /* 요청 배경 */
  display: none;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;	  /* 스크롤 잠금 대비 */
}
.wpls-overlay[aria-hidden="false"] { display: flex; }
/* 구형 브라우저/폴백: dvh 미지원 시 100vh 유지 */
@supports not (height: 100dvh) {
  .wpls-overlay { height: 100vh; }
}
/* 안전영역(홈 인디케이터) 밑줄 흰색 방지 – 같은 배경으로 덧칠 */
.wpls-overlay::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: #0b24fa;
  pointer-events: none;
}

/* 중앙 모달 */
.wpls-modal {
  width: min(92vw, 560px);
  text-align: center;
  color: #fff;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.wpls-overlay[aria-hidden="false"] .wpls-modal {
  transform: translateY(0);
  opacity: 1;
}

/* 프리픽스 텍스트 */
.wpls-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 500;
  opacity: .92;
}

/* 언어 리스트 – 점 제거, 세로 배치, 타이포 고정 */
.wpls-list,
.wpls-list li {
  list-style: none !important;
  margin: 5px 0 !important;
  padding: 0 !important;
}
.wpls-list {
  display: grid;
  gap: 14px;
}
.wpls-list a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: .1px;
  display: inline-block;
  transition: opacity .15s ease, transform .15s ease;
}
.wpls-list a:hover { color: var(--title-base-color2) !important; transform: translateY(-1px); }

/* 배경 클릭 영역 */
.wpls-backdrop { position: fixed; inset: 0; }