/* Melanoir — 공통 언어 선택 FAB (Shell 다크 / 제품 상세 라이트) */

.melanoir-lang-dropdown,
.mela-lang-dropdown {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 10000;
  padding-top: 20px;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.melanoir-lang-trigger,
.mela-lang-trigger {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 16.7px;
  border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.melanoir-lang-menu,
.mela-lang-menu {
  position: absolute;
  bottom: 68px;
  right: 0;
  border-radius: 20px;
  padding: 10px;
  display: none;
  flex-direction: column;
  min-width: 170px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.melanoir-lang-menu::after,
.mela-lang-menu::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
}

.melanoir-lang-dropdown:hover .melanoir-lang-menu,
.melanoir-lang-dropdown.is-open .melanoir-lang-menu,
.mela-lang-dropdown:hover .mela-lang-menu,
.mela-lang-dropdown.is-open .mela-lang-menu {
  display: flex;
}

.melanoir-lang-item,
.mela-lang-item {
  padding: 14px 20px;
  text-decoration: none;
  font-size: 17.7px;
  border-radius: 14px;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
  white-space: nowrap;
}

/* —— 라이트 (제품 상세 · 흰 배경) —— */
.melanoir-lang--light .melanoir-lang-trigger,
.melanoir-lang--light .mela-lang-trigger,
.mela-wrapper .melanoir-lang-trigger,
.mela-wrapper .mela-lang-trigger {
  background: #ffffff;
  border-color: #d2d2d7;
  color: #1d1d1f !important;
}

.melanoir-lang--light .melanoir-lang-menu,
.melanoir-lang--light .mela-lang-menu,
.mela-wrapper .melanoir-lang-menu,
.mela-wrapper .mela-lang-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d2d2d7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.melanoir-lang--light .melanoir-lang-item,
.melanoir-lang--light .mela-lang-item,
.mela-wrapper .melanoir-lang-item,
.mela-wrapper .mela-lang-item {
  color: #1d1d1f !important;
}

.melanoir-lang--light .melanoir-lang-item:hover,
.melanoir-lang--light .mela-lang-item:hover,
.mela-wrapper .melanoir-lang-item:hover,
.mela-wrapper .mela-lang-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1d1d1f !important;
}

.melanoir-lang--light .melanoir-lang-item.active,
.melanoir-lang--light .mela-lang-item.active,
.mela-wrapper .melanoir-lang-item.active,
.mela-wrapper .mela-lang-item.active {
  color: #0071e3 !important;
  font-weight: 700;
}

/* —— 다크 (Shell · 랜딩/제품 목록) —— */
.melanoir-lang--dark .melanoir-lang-trigger,
.melanoir-lang--dark .mela-lang-trigger {
  background: rgba(12, 12, 16, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f3f4f8 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.melanoir-lang--dark .melanoir-lang-menu,
.melanoir-lang--dark .mela-lang-menu {
  background: rgba(12, 12, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.melanoir-lang--dark .melanoir-lang-item,
.melanoir-lang--dark .mela-lang-item {
  color: rgba(243, 244, 248, 0.92) !important;
}

.melanoir-lang--dark .melanoir-lang-item:hover,
.melanoir-lang--dark .mela-lang-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.melanoir-lang--dark .melanoir-lang-item.active,
.melanoir-lang--dark .mela-lang-item.active {
  color: #fff !important;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
}

/* Shell 페이지 — CJK 본문 가독 */
html[lang="ja"] body .shell-i18n-prose,
html[lang="zh-CN"] body .shell-i18n-prose,
html[lang="zh"] body .shell-i18n-prose {
  text-transform: none;
  font-family: var(--shell-font-ko, "Pretendard", sans-serif);
  letter-spacing: 0;
  word-break: normal;
  line-height: 1.55;
}

html[lang="ja"] body .topbar-hire,
html[lang="zh-CN"] body .topbar-hire,
html[lang="zh"] body .topbar-hire,
html[lang="ja"] body .melanoir-hire-fab,
html[lang="zh-CN"] body .melanoir-hire-fab,
html[lang="zh"] body .melanoir-hire-fab {
  text-transform: none;
}

@media (max-width: 768px) {
  .melanoir-lang-dropdown,
  .mela-lang-dropdown {
    right: 16px !important;
    bottom: 16px !important;
  }

  .melanoir-lang-trigger,
  .mela-lang-trigger {
    width: 52px !important;
    height: 52px !important;
    font-size: 14px !important;
  }

  .melanoir-lang-item,
  .mela-lang-item {
    font-size: 15px !important;
    padding: 12px 16px !important;
  }
}