/* Language switcher — compact dropdown that scales to N locales without
   growing horizontally. Current language pill (globe + short label + chev),
   click opens a vertical menu beneath it. */

.kf-lang {
  position: fixed;
  /* The Contact-us FAB used to live in this top-right slot; we removed it
     (the chatbot widget covers the same job) and reclaimed the spot for the
     language switcher. */
  top: 22px;
  right: 22px;
  z-index: 10010;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans KR", "Noto Sans SC", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.kf-lang__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: #2a2e25;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.kf-lang__current:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.kf-lang__globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7cb436;
}

.kf-lang__short {
  display: inline-block;
  min-width: 22px;
  text-align: left;
}

.kf-lang__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b6f63;
  transition: transform 0.18s ease;
}

.kf-lang--open .kf-lang__chev {
  transform: rotate(180deg);
}

.kf-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.kf-lang--open .kf-lang__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.kf-lang__menu[hidden] {
  display: flex; /* override [hidden] so transition runs */
}

.kf-lang--open .kf-lang__menu[hidden] {
  /* hidden attribute is cleared by JS on open; this rule is just a safety. */
}

.kf-lang__item {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  color: #2a2e25;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
  font-weight: 500;
}

.kf-lang__item:hover {
  background: rgba(124, 180, 54, 0.1);
  color: #4f7e1f;
}

.kf-lang__item--active {
  background: #7cb436;
  color: #fff;
  font-weight: 600;
}

.kf-lang__item--active:hover {
  background: #6ea22f;
  color: #fff;
}

/* CJK locales: bump font-size a touch for legibility in the menu */
html[data-lang="zh"] .kf-lang__item,
html[data-lang="ja"] .kf-lang__item {
  font-size: 13px;
}

/* Mobile: same top-right slot the Contact-us FAB used to occupy. Dropdown
   opens downward (menu sits below the pill, right-aligned). */
@media (max-width: 767px) {
  .kf-lang {
    top: 12px;
    right: 14px;
    font-size: 11px;
  }
  .kf-lang__current {
    height: 30px;
    padding: 0 10px 0 8px;
    gap: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  }
  .kf-lang__menu {
    min-width: 150px;
  }
}

/* Hide while the inquiry modal or chatbot panel is open — avoid stacking
   conflicts. */
body.kf-modal-open .kf-lang,
body.kc-open .kf-lang {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* CJK typography baseline — applies to all elements on /zh and /ja pages. */
html[data-lang="zh"] body,
html[data-lang="ja"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "Noto Sans JP",
    "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
}

/* ZH: allow line breaks between any CJK characters (natural ZH behavior). */
html[data-lang="zh"] {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

/* JA: default line-break behavior across the page. Scope keep-all to the
   cert heading/long-prose elements only — applying it page-wide breaks
   Latin word wrapping in grid containers, buttons, and Webflow blocks. */
html[data-lang="ja"] {
  overflow-wrap: break-word;
  line-break: strict;
}
/* `keep-all` only on the cert/info heading cells that had the 設|け mid-verb
   break on mobile. `.text1-4.oppo-normal` is the class found during QA. */
html[data-lang="ja"] .text1-4.oppo-normal,
html[data-lang="ja"] .swiper-item-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* CJK text balance — apply to every translatable element. text-wrap: balance
   redistributes characters across lines so the last line isn't an orphan
   (e.g. avoids "...defends sweets / ぎます" where only 2 chars dangle). */
html[data-lang="zh"] [data-i18n],
html[data-lang="ja"] [data-i18n] {
  text-wrap: balance;
}

html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3,
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] h3 {
  text-wrap: balance;
}

/* Language suggestion toast — only injected on the English (root) page.
   Inline script in the page detects browser language; if it matches one of
   the supported non-English locales, it populates and reveals this card.
   Dismiss is persisted in localStorage so the user only sees it once. */
.kf-suggest {
  position: fixed;
  top: 50%;
  right: 22px;
  z-index: 10009;
  width: 280px;
  padding: 14px 16px 14px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans KR", "Noto Sans SC", "Noto Sans JP", "SF Arabic",
    "Geeza Pro", sans-serif;
  opacity: 0;
  transform: translate(20px, -50%);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.kf-suggest--show {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}

.kf-suggest__msg {
  font-size: 14px;
  font-weight: 500;
  color: #2a2e25;
  line-height: 1.45;
  margin: 0 22px 12px 0;
}

.kf-suggest__actions {
  display: flex;
  gap: 8px;
}

.kf-suggest__btn {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  padding: 0 10px;
  white-space: nowrap;
}

.kf-suggest__btn--primary {
  background: #7cb436;
  color: #fff;
}
.kf-suggest__btn--primary:hover { background: #6ea22f; }

.kf-suggest__btn--ghost {
  background: transparent;
  color: #5a5e51;
  border-color: rgba(0, 0, 0, 0.12);
}
.kf-suggest__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #2a2e25;
}

.kf-suggest__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #9aa092;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.kf-suggest__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #2a2e25;
}

@media (max-width: 767px) {
  .kf-suggest {
    top: auto;
    /* Sit above the chatbot FAB (bottom: 1rem, height: 54px → ~70px) with
       breathing room. Span the viewport width minus side margins. */
    bottom: 88px;
    right: 12px;
    left: 12px;
    width: auto;
    transform: translateY(20px);
  }
  .kf-suggest--show {
    transform: translateY(0);
  }
}

/* Hide when overlays are open so it doesn't fight for attention. */
body.kf-modal-open .kf-suggest,
body.kc-open .kf-suggest {
  opacity: 0 !important;
  pointer-events: none !important;
}