/* ===== pages/index.css ===== */
.page-index main.container {
  padding-bottom: 40px;
}

.page-index .landing-stage {
  margin-top: 18px;
}

.page-index .landing-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 28px;
  padding: 32px 28px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),
    radial-gradient(circle at bottom right, rgba(59, 91, 219, 0.14), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.page-index .landing-hero-shell {
  display: flex;
  justify-content: center;
}

.page-index .landing-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 760px);
  text-align: center;
}

.page-index .landing-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-index .landing-title {
  margin: 18px 0 14px;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.04em;
  color: #0f172a;
  font-weight: 900;
}

.page-index .landing-title span {
  color: #2563eb;
}

.page-index .landing-description {
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(15, 23, 42, 0.72);
  word-break: keep-all;
}

.page-index .landing-country-row {
  width: 100%;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.page-index .landing-country-row .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 14px 22px 14px 20px;
  border-radius: 999px;
  border: 1.5px solid #dbe4ff;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

.page-index .landing-country-row .chip::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: #f5f5f5;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}

.page-index .landing-country-row .chip[data-country="Japan"]::before {
  background-image: url("/data/images/flag/japan.png?v=2");
}

.page-index .landing-country-row .chip[data-country="Korea"]::before {
  background-image: url("/data/images/flag/south-korea.png?v=2");
}

.page-index .landing-country-row .chip[data-country="Vietnam"]::before {
  background-image: url("/data/images/flag/vietnam.png?v=2");
}

.page-index .landing-country-row .chip[data-country="Taiwan"]::before {
  background-image: url("/data/images/flag/taiwan.png?v=2");
}

.page-index .landing-country-row .chip[data-country="Thailand"]::before {
  background-image: url("/data/images/flag/thailand.png?v=2");
}

.page-index .landing-country-row .chip[data-country="Philippines"]::before {
  background-image: url("/data/images/flag/philippines.png?v=2");
}

.page-index .landing-country-row .chip.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 75%, #1e3a8a 100%);
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}

.page-index .landing-country-row .chip.active::before {
  /* DO NOT use `background` shorthand here — it would reset the flag
     image set by the country-specific selectors above. Set only
     background-color (transparent so the flag stays at full saturation)
     and strengthen the ring to mark the active state. */
  background-color: transparent;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 0 2px rgba(255, 255, 255, 0.35);
}

.page-index .landing-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}

.page-index .landing-guide-btn,
.page-index .landing-coupon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.page-index .landing-guide-btn {
  border: 1.5px solid #2563eb;
  background: #fff;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.page-index .landing-guide-btn:hover,
.page-index .landing-coupon-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.page-index .landing-coupon-btn {
  border: 1px solid rgba(255, 90, 60, 0.18);
  background: linear-gradient(135deg, #ff6a3d 0%, #ff4b2b 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(255, 90, 60, 0.22);
}

.page-index .landing-example {
  margin-top: 22px;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.page-index .landing-city-panel {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.page-index .japan-city-explorer {
  width: 100%;
}

.page-index .japan-city-explorer-intro {
  margin-bottom: 0;
}

.page-index .japan-city-explorer-body {
  margin-top: 2px;
}

.page-index .japan-city-explorer-head {
  text-align: left;
  margin-bottom: 14px;
}

.page-index .japan-city-explorer-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #0f172a;
  font-weight: 900;
}

.page-index .japan-city-explorer-subtitle {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.62);
  word-break: keep-all;
}

.page-index .japan-city-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.page-index .japan-city-search-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.9;
}

.page-index .japan-city-search input {
  width: 100%;
  border: none;
  background: transparent;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  padding: 0;
}

.page-index .japan-city-search input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}

.page-index .japan-city-popular-block,
.page-index .japan-city-group-panel,
.page-index .japan-city-search-results {
  margin-top: 18px;
}

.page-index .japan-city-block-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #6b7280;
}

.page-index .popular-city-grid {
  display: grid;
  grid-template-columns: repeat(var(--popular-city-count, 8), minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
  width: 100%;
  align-items: stretch;
}

.page-index .popular-city-card {
  min-width: 0;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 8px;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  position: relative;
}

.page-index .popular-city-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.page-index .popular-city-card.active {
  background: linear-gradient(180deg, #4f68e4 0%, #3f56d8 100%);
  border-color: #3f56d8;
  color: #fff;
  box-shadow: 0 16px 32px rgba(79, 104, 228, 0.28);
}

.page-index .popular-city-card.has-selection {
  border-color: rgba(37, 99, 235, 0.4);
}

.page-index .popular-city-card.active.has-selection {
  border-color: rgba(255, 255, 255, 0.55);
}

.page-index .popular-city-card-icon {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-index .popular-city-card-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.page-index .popular-city-card-label {
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  word-break: keep-all;
  text-align: center;
}

.page-index .popular-city-card-caret {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 8px;
  font-weight: 800;
  opacity: 0.8;
}

.page-index .japan-city-group-panel,
.page-index .japan-city-search-results {
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
}

.page-index .japan-city-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #2563eb;
}

.page-index .japan-city-group-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.5;
}

.page-index .japan-city-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.page-index .japan-city-chip {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: #fff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

.page-index .japan-city-chip:hover {
  background: #eff6ff;
}

.page-index .japan-city-chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.page-index .japan-city-chip.primary {
  border-color: rgba(37, 99, 235, 0.28);
}

.page-index .japan-city-chip.primary.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.page-index .japan-city-empty {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.56);
}

/* === Korea city explorer (광역시/도 cards) === */
.page-index .korea-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 0;
}
.page-index .korea-type-tab {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.page-index .korea-type-tab > * { line-height: 1; }
.page-index .korea-type-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}
.page-index .korea-type-tab.active {
  background: linear-gradient(180deg, #4f68e4 0%, #3f56d8 100%);
  border-color: #3f56d8;
  color: #fff;
  box-shadow: 0 16px 32px rgba(79, 104, 228, 0.28);
}
.page-index .korea-type-tab::after {
  content: "▾";
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 9px;
  font-weight: 800;
  opacity: 0.5;
}
.page-index .korea-type-tab.active::after { opacity: 0.85; }
.page-index .korea-type-tab-icon {
  /* 일부 환경에서 흑백 글리프로 렌더링되는 문제 방지 — 컬러 이모지 폰트 강제 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color",
               "Android Emoji", sans-serif;
  font-style: normal;
  -webkit-font-feature-settings: "liga" off;
  font-feature-settings: "liga" off;
}

.page-index .korea-region-tabs-wrap {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 2px solid #f0f0f0;
  margin: 0 -2px 16px;
  position: relative;
}
.page-index .korea-region-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px;
  flex: 1;
  min-width: 0;
}
.page-index .korea-region-tabs::-webkit-scrollbar {
  display: none;
}
.page-index .korea-tab-arrow {
  flex-shrink: 0;
  width: 32px;
  background: #eef4ff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  color: #2563eb;
  z-index: 2;
  position: relative;
  transition: opacity 0.15s, background 0.12s;
}
.page-index .korea-tab-arrow:hover {
  background: #dbe4ff;
}
.page-index .korea-tab-arrow:active {
  background: #c5d0ff;
}
.page-index .korea-tab-arrow.left {
  border-right: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: 2px 0 4px rgba(37, 99, 235, 0.04);
}
.page-index .korea-tab-arrow.right {
  border-left: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: -2px 0 4px rgba(37, 99, 235, 0.04);
}
.page-index .korea-tab-arrow.hidden {
  opacity: 0.3;
  pointer-events: none;
}
.page-index .korea-region-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px 10px;
  min-width: 60px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.page-index .korea-region-tab .tab-icon {
  font-size: 18px;
}
.page-index .korea-region-tab .tab-name {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  white-space: nowrap;
}
.page-index .korea-region-tab.active {
  background: #2563eb;
  border-radius: 10px 10px 0 0;
  border-bottom-color: #2563eb;
}
.page-index .korea-region-tab.active .tab-name {
  color: #fff;
  font-weight: 700;
}

.page-index .japan-city-selection-summary {
  margin: 18px 2px 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.62);
  text-align: left;
  word-break: keep-all;
}

.page-index .japan-city-selection-summary strong {
  color: #2563eb;
  font-weight: 900;
}

.page-index .landing-city-panel .city-section {
  margin-top: 0;
}

.page-index .landing-city-panel .city-row {
  justify-content: center;
  gap: 10px;
}

.page-index .landing-city-panel .footer-cta {
  margin-top: 20px;
}

.page-index .landing-example-header {
  text-align: center;
  margin-bottom: 18px;
}

.page-index .landing-example-kicker {
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-index .landing-example-header h2 {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.25;
  color: #0f172a;
}

.page-index .landing-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-index .landing-preview-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.page-index .landing-preview-card-blue {
  background: linear-gradient(180deg, #eef3ff 0%, #ffffff 100%);
}

.page-index .landing-preview-card-warm {
  background: linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
}

.page-index .landing-preview-icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.page-index .landing-preview-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.page-index .landing-preview-card h3 {
  margin: 14px 0 12px;
  font-size: 20px;
  color: #0f172a;
  font-weight: 900;
}

.page-index .landing-preview-route {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.page-index .landing-preview-route li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.78);
  font-weight: 600;
}

.page-index .landing-preview-route li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.page-index .home-howto-v3 {
  margin-top: 22px;
  padding: 36px 20px 40px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.page-index .home-howto-v3 .howto-v3-title {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.5px;
  margin-bottom: 28px;
  text-align: center;
}

.page-index .home-howto-v3 .howto-v3-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 390px;
  margin: 0 auto;
}

.page-index .home-howto-v3 .howto-v3-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: #f8f9ff;
  border-radius: 16px;
  border: 1.5px solid #e8eeff;
  text-align: center;
}

.page-index .home-howto-v3 .howto-v3-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3B5BDB;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-index .home-howto-v3 .howto-v3-step-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.page-index .home-howto-v3 .howto-v3-step-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
}

.page-index .home-howto-v3 .howto-v3-arrow {
  text-align: center;
  font-size: 18px;
  color: #b0bbee;
  padding: 2px 0;
}

.page-index .home-howto-v3 .howto-v3-step-3 + .howto-v3-arrow {
  position: relative;
  z-index: 2;
}

.page-index .home-howto-v3 .howto-v3-step-3 {
  background: #3B5BDB;
  border-color: #3B5BDB;
}

.page-index .home-howto-v3 .howto-v3-step-3 .howto-v3-num {
  background: #fff;
  color: #3B5BDB;
}

.page-index .home-howto-v3 .howto-v3-step-3 .howto-v3-step-title {
  color: #fff;
}

.page-index .home-howto-v3 .howto-v3-step-3 .howto-v3-step-desc {
  color: rgba(255, 255, 255, 0.75);
}

.page-index .home-howto-v3 .howto-v3-video {
  margin-top: -36px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.page-index .home-howto-v3 .howto-v3-video video {
  width: 100%;
  display: block;
  margin-top: -40px;
}

/* Non-Korean MP4s lack the top whitespace baked into the Korean source,
   so the negative margins above pull them flush against Step 3. Reset
   the negative margins so spacing matches what Korean visually achieves. */
.page-index .home-howto-v3 .howto-v3-video.howto-v3-video--flush {
  margin-top: 16px;
}

.page-index .home-howto-v3 .howto-v3-video.howto-v3-video--flush video {
  margin-top: 0;
}

.page-index .topbar {
  /* position and background handled by base.css (fixed header) */
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.page-index .hero h1 {
  font-size: 32px;
  margin: 40px 0 20px;
  text-align: center;
  font-weight: 800;
  word-break: keep-all;
}

.page-index .subtitle {
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
}

.page-index .country-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-index .city-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-index .spacer-box {
  min-height: 110px;
  height: auto;
  border: 1px dashed #ddd;
  border-radius: 12px;
  margin: 18px 0 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* For map rounded corners */
}

#map-container {
  width: 100%;
  height: 400px;
  display: none;
  /* Toggled by JS */
}

/* Korea city-stage photo preview (replaces the map for Korea). */
.korea-city-image-preview {
  width: 100%;
  height: 400px;
  display: none;
  /* Toggled by JS */
}
.korea-city-image-preview .kcip-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  border-radius: 12px;
}
.korea-city-image-preview .kcip-pic,
.korea-city-image-preview .kcip-pic img {
  width: 100%;
  height: 100%;
  display: block;
}
.korea-city-image-preview .kcip-pic img {
  object-fit: cover;
  border-radius: 12px;
}

body.page-index #heroV2Root .nav-inner {
  justify-content: flex-start;
  gap: 12px;
}

body.page-index #heroV2Root .nav-actions {
  margin-left: auto;
}

/* Hero navigation layout contract
   --------------------------------
   Desktop/compact-desktop navigation is always one physical row. Fixed-width
   action groups must never shrink their labels into two lines; spacing and the
   FX ticker compact first, then the whole link menu moves behind the hamburger
   below 1024px. */
body.page-index #heroV2Root .nav-inner {
  box-sizing: border-box;
  min-height: 80px;
  flex-wrap: nowrap;
}

body.page-index #heroV2Root .nav-menu,
body.page-index #heroV2Root .nav-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Keep the exchange-rate control, but remove its non-essential status dot
   from the homepage so it is not read as a notification badge. */
body.page-index #heroV2Root .home-fx-state-indicator {
  display: none;
}

body.page-index #heroV2Root .nav-link,
body.page-index #heroV2Root .nav-mypage,
body.page-index #heroV2Root .lang-dropdown .lang-trigger {
  white-space: nowrap;
}

/* Responsive padding and type changes must settle before the resize fitter
   measures the single navigation row. Keep only the visual hover transition. */
body.page-index #heroV2Root .nav-link {
  transition: background 0.2s, color 0.2s;
}

body.page-index #heroV2Root .lang-dropdown,
body.page-index #heroV2Root .btn-login,
body.page-index #heroV2Root .nav-toggle {
  transform: none;
}

#heroV2Root .nav-brand-stack {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 0 0 auto;
}

#heroV2Root .seoul-weather-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  height: 34px;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

#heroV2Root .navbar.scrolled .seoul-weather-chip {
  background: #fff;
  border-color: #e5e7eb;
  color: #111827;
  box-shadow: none;
}

#heroV2Root .seoul-weather-chip > * {
  flex: 0 0 auto;
}

#heroV2Root .seoul-weather-chip .weather-icon {
  font-size: 16px;
  line-height: 1;
}

#heroV2Root .seoul-weather-chip .weather-time,
#heroV2Root .seoul-weather-chip .weather-temp {
  font-variant-numeric: tabular-nums;
}

#heroV2Root .seoul-weather-chip .weather-time {
  opacity: 0.92;
}

#heroV2Root .seoul-weather-chip .weather-temp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#heroV2Root .seoul-weather-chip[data-state="offline"] {
  opacity: 0.72;
}

/* Mobile hamburger menu (hero v2 nav). The template renders a .nav-toggle
   button; index.js toggles `.nav-open` on the navbar and this shows the nav
   links as a dropdown panel on small screens. */
@media (max-width: 1100px) {
  #heroV2Root .seoul-weather-chip .weather-city {
    display: none;
  }
}

/* Compact desktop: preserve all menu labels, but reclaim horizontal space in
   a controlled way. 1024px remains a valid one-line desktop layout. */
@media (min-width: 1024px) and (max-width: 1319px) {
  body.page-index #heroV2Root .nav-inner {
    gap: 16px;
  }

  body.page-index #heroV2Root .nav-menu {
    gap: 2px;
  }

  body.page-index #heroV2Root .nav-link {
    padding-inline: 10px;
    font-size: 14px;
  }

  body.page-index #heroV2Root .nav-actions {
    gap: 5px;
  }
}

/* The desktop fit keeps the original row intact, first using the existing
   compact ₩ ticker before scaling the complete row if that is still needed. */
body.page-index #heroV2Root .navbar.nav-fit-compact .home-fx-ticker summary {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

body.page-index #heroV2Root .navbar.nav-fit-compact .home-fx-inline {
  display: none;
}

body.page-index #heroV2Root .navbar.nav-fit-compact .home-fx-compact {
  display: block;
}

/* Tablet/mobile: the primary links move into the hamburger panel. Keep the
   brand and actions on one row, with no wrapped labels or vertical offsets. */
@media (max-width: 1023px) {
  body.page-index #heroV2Root .nav-menu {
    display: none;
  }

  body.page-index #heroV2Root .nav-toggle {
    display: flex;
  }

  body.page-index #heroV2Root .nav-mypage {
    padding: 8px 10px;
    gap: 0;
  }

  body.page-index #heroV2Root .nav-mypage-label,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger > span {
    display: none;
  }

  body.page-index #heroV2Root .nav-mypage-icon,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger svg {
    width: 20px;
    height: 20px;
  }

  body.page-index #heroV2Root .lang-dropdown .lang-trigger {
    padding: 8px 10px;
    gap: 0;
  }

  body.page-index #heroV2Root .nav-inner {
    gap: 10px;
  }

  body.page-index #heroV2Root .nav-actions {
    gap: 4px;
  }
}

@media (max-width: 767px) {
  #heroV2Root .seoul-weather-chip > * {
    transform: translateX(-1px);
  }

  body.page-index #heroV2Root .nav-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  body.page-index #heroV2Root .nav-brand-stack {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  body.page-index #heroV2Root .nav-actions {
    flex: 0 0 auto;
    align-self: center;
    padding-top: 0;
  }

  #heroV2Root .seoul-weather-chip {
    display: inline-flex;
    height: 36px;
    gap: 3px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 11px;
    box-shadow: none;
    margin-inline-start: auto;
    margin-inline-end: 8px;
  }

  #heroV2Root .seoul-weather-chip .weather-icon {
    font-size: 15px;
  }

  #heroV2Root .seoul-weather-chip .weather-city,
  #heroV2Root .seoul-weather-chip .weather-temp-sep,
  #heroV2Root .seoul-weather-chip [data-weather-temp-f] {
    display: none;
  }
}

@media (max-width: 400px) {
  body.page-index #heroV2Root .nav-brand-stack {
    gap: 0;
  }

  body.page-index #heroV2Root .nav-inner {
    gap: 0;
    min-height: 64px;
  }

  body.page-index #heroV2Root .nav-actions {
    gap: 2px;
  }

  body.page-index #heroV2Root .nav-mypage,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger {
    padding: 6px 8px;
  }

  body.page-index #heroV2Root .nav-mypage-icon,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger svg {
    width: 18px;
    height: 18px;
  }

  #heroV2Root .seoul-weather-chip {
    height: 32px;
    gap: 2px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: -0.5px;
  }

  #heroV2Root .seoul-weather-chip .weather-icon {
    font-size: 14px;
  }

}

@media (max-width: 359px) {
  body.page-index #heroV2Root .nav-brand-stack {
    gap: 0;
  }

  #heroV2Root .seoul-weather-chip {
    height: 22px;
    gap: 1px;
    padding: 0 2px;
    font-size: 8px;
    letter-spacing: normal;
  }

  #heroV2Root .seoul-weather-chip .weather-icon {
    font-size: 11px;
  }

  #heroV2Root .seoul-weather-chip .weather-time {
    display: none;
  }
}

@media (max-width: 374px) {
  #heroV2Root .seoul-weather-chip {
    margin-inline-end: 2px;
  }
}

@media (min-width: 401px) and (max-width: 419px) {
  body.page-index #heroV2Root .logo {
    font-size: 17px;
  }

  body.page-index #heroV2Root .nav-actions {
    gap: 2px;
  }

  body.page-index #heroV2Root .nav-mypage,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger {
    padding: 6px 8px;
  }

  body.page-index #heroV2Root .nav-mypage-icon,
  body.page-index #heroV2Root .lang-dropdown .lang-trigger svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 420px) and (max-width: 423px) {
  body.page-index #heroV2Root .logo {
    font-size: 17px;
  }
}

@media (max-width: 1023px) {
  body.page-index #heroV2Root .navbar.nav-open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 6px 18px 16px;
    gap: 0;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
    border-top: 1px solid #eef0f3;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 200;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-link {
    color: #1f2937;
    padding: 14px 6px;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 0;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-dropdown {
    position: static;
    display: block;
    width: 100%;
  }
  /* Accordion: the "여행 편의" submenu is collapsed by default in compact/mobile
     navigation and expands only when its dropdown has .open (toggled by index.js). */
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-dropdown-trigger::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-dropdown.open .nav-dropdown-trigger::after {
    transform: rotate(-135deg);
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-submenu {
    display: none;
    position: static;
    margin: 0;
    padding: 2px 0 8px 10px;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-dropdown.open .nav-submenu {
    display: block;
  }
  body.page-index #heroV2Root .navbar.nav-open .nav-menu .nav-suboption {
    color: #4b5563;
    padding: 10px 6px;
    white-space: normal;
  }
}

/* Hamburger visibility: once the hero nav turns white on scroll, the white
   bars/border disappear. Give the 3 bars a blue color + blue border so the
   menu button stays clearly visible against the white navbar. */
#heroV2Root .navbar.scrolled .nav-toggle {
  color: #2563eb;
  background: #fff;
  border: 1.5px solid #2563eb;
}
#heroV2Root .navbar.scrolled .nav-toggle:hover {
  background: #eff6ff;
}

/* Category panel header → top bar with a Back button (button injected by JS). */
.all-panel .panel-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
  gap: 6px;
}
.all-panel .panel-title { flex: 1; text-align: left; }
.all-panel .panel-back {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-left: -6px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1f2937;
  transition: background .2s;
}
.all-panel .panel-back:hover { background: #f3f4f6; }
.all-panel .panel-back svg { width: 22px; height: 22px; }

/* index page chip colors (blue) */
.page-index .chip {
  border: 1px solid #2563eb;
  background: #eff6ff;
  color: #1e40af;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(2px);
}

.page-index .chip:hover {
  background: #dbeafe;
}

.page-index .chip.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* big CTA */
.page-index .primary.large {
  padding: 14px 18px;
  border-radius: 12px;
  border: 0;
  background: #2563eb;
  color: #fff;
  min-width: 240px;
  font-weight: 600;
}

.page-index .primary.large:hover {
  background: #1d4ed8;
}

.page-index .primary.large:disabled {
  background: #9db8f7;
}

/* CTA wrapper */
.page-index .footer-cta {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 3;
}

.page-index .footer-cta .go-plan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-index .footer-cta .primary.large {
  position: relative;
  z-index: 3;
}

/* Background image layer */


/* ensure UI above overlay */
.page-index main {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .page-index .popular-city-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .page-index .landing-stage {
    margin-top: 10px;
  }

  .page-index .landing-hero {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .page-index .landing-hero-shell {
    gap: 22px;
  }

  .page-index .landing-copy {
    align-items: center;
    text-align: center;
  }

  .page-index .landing-description {
    font-size: 15px;
  }

  .page-index .landing-country-row {
    justify-content: center;
  }

  .page-index .landing-country-row .chip {
    width: 100%;
    justify-content: center;
  }

  .page-index .landing-cta-group {
    width: 100%;
    flex-direction: column;
  }

  .page-index .landing-guide-btn,
  .page-index .landing-coupon-btn {
    width: 100%;
  }

  .page-index .home-howto-v3 {
    padding: 28px 16px 32px;
  }

  .page-index .landing-example {
    padding: 22px 16px;
  }

  .page-index .japan-city-explorer-title {
    font-size: 24px;
  }

  .page-index .japan-city-explorer-subtitle {
    font-size: 14px;
  }

  .page-index .japan-city-search {
    min-height: 54px;
    padding: 0 14px;
    border-radius: 16px;
  }

  .page-index .popular-city-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .page-index .popular-city-card {
    min-height: 68px;
    padding: 8px 4px 8px;
    border-radius: 12px;
  }

  .page-index .popular-city-card-icon {
    font-size: 19px;
  }

  .page-index .popular-city-card-label {
    font-size: 10px;
  }

  .page-index .japan-city-group-panel,
  .page-index .japan-city-search-results {
    padding: 16px 14px 14px;
    border-radius: 16px;
  }

  .page-index .japan-city-chip-row {
    gap: 8px;
  }

  .page-index .japan-city-chip {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .page-index .landing-preview {
    gap: 10px;
  }

  .page-index .landing-preview-card {
    border-radius: 18px;
    padding: 16px 12px 14px;
  }

  .page-index .landing-preview-icon {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .page-index .landing-preview-badge {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .page-index .landing-preview-card h3 {
    margin: 10px 0 8px;
    font-size: 17px;
  }

  .page-index .landing-preview-route {
    gap: 8px;
  }

  .page-index .landing-preview-route li {
    padding-left: 16px;
    font-size: 12px;
    line-height: 1.4;
  }

  .page-index .landing-preview-route li::before {
    top: 6px;
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }


  .page-index .chip {
    padding: 8px 10px;
  }

  .page-index .hero h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .page-index .footer-cta .primary.large {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    margin: 0 auto;
  }
}


/* Travel Guide Section */
.page-index .guide-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

.page-index .guide-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-index .guide-header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
}

.page-index .guide-header-copy {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

.page-index .guide-more-btn {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 172px;
  border: 1px solid #1d4ed8;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 72%, #1e3a8a 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.14s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.page-index .guide-more-btn::after {
  content: "";
}

.page-index .guide-more-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.page-index .guide-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.page-index .guide-more-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.page-index .guide-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-index .guide-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #111;
}

.page-index .guide-subtitle {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* Guide Grid - 3 Columns Always (until mobile) */
.page-index .guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Force 3 columns */
  gap: 16px;
  /* Smaller gap */
  padding: 0 10px;
}

/* Guide Card - Compact Vibe */
.page-index .guide-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  /* Slightly less rounded */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.page-index .guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Card Image Area */
.page-index .guide-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  /* Widescreen ratio */
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.page-index .guide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.page-index .guide-card:hover .guide-img-wrap img {
  transform: scale(1.05);
}

/* Badge on Image */
.page-index .guide-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Card Content - Compact padding */
.page-index .guide-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta info */
.page-index .guide-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  align-items: center;
}

.page-index .guide-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.page-index .guide-meta svg {
  width: 12px;
  height: 12px;
  fill: #999;
}

/* Title & Desc */
.page-index .guide-card h3 {
  font-size: 16px;
  /* Smaller title */
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-index .guide-card p {
  font-size: 13px;
  /* Smaller body */
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Only 2 lines of text */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.page-index .guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  font-size: 12px;
}

.page-index .guide-link {
  color: #2563eb;
  font-weight: 600;
  font-size: 12px;
}

/* Responsiveness */
@media (max-width: 768px) {
  .page-index .guide-header-top {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .page-index .guide-more-btn {
    width: 80%;
    min-width: 0;
    align-self: center;
  }

  /* On tablets, keep 3 columns but maybe horizontal scroll if too tight? 
     Or just stacked. The user wants "single line".
     Let's try horizontal scroll for small screens to keep "single line" concept? 
     Or just let them grid. 
     For now, enforcing grid columns might be too small on phone.
     Let's just scale down columns on very small screens.
  */
  .page-index .guide-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cols even on tablet */
    gap: 10px;
  }
}

@media (max-width: 500px) {

  /* On mobile, standard stack */
  .page-index .guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .page-index .landing-preview-card {
    padding: 14px 10px 12px;
  }

  .page-index .landing-preview-card h3 {
    font-size: 15px;
  }

  .page-index .landing-preview-route li {
    font-size: 11px;
  }
}

/* CSS for smooth map transitions */
.map-smooth-transition .jvm-regions-group,
.map-smooth-transition .jvm-markers-group,
.map-smooth-transition .jvm-group,
.map-smooth-transition g {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.legacy-inline-plan-actions {
  display: none !important;
}

/* ── 면세 환급 CTA 버튼 & 피커 ── */
.page-index .landing-taxfree-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 10px;
}
.page-index .landing-taxfree-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid #3B82F6;
  background: #3B82F6;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
  transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.page-index .landing-taxfree-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.page-index .taxfree-chevron {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 12px;
  margin-left: 2px;
}
.page-index .landing-taxfree-picker {
  display: none;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.page-index .landing-taxfree-picker.open {
  display: flex;
  flex-direction: row;
}
.page-index .taxfree-pick-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  text-decoration: none;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: border-color 0.15s, background 0.15s;
}
.page-index .taxfree-pick-item:hover {
  border-color: #3B82F6;
  background: #f0f5ff;
}
.page-index .taxfree-flag-img {
  width: 32px;
  height: auto;
  border-radius: 3px;
}
.page-index .landing-tripcalc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid #34d399;
  background: #34d399;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(52, 211, 153, 0.12);
  transition: transform 0.15s ease, filter 0.18s ease;
}
.page-index .landing-tripcalc-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.page-index .landing-language-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid #F59E0B;
  background: #F59E0B;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.16);
  transition: transform 0.15s ease, filter 0.18s ease;
}
.page-index .landing-language-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.page-index .landing-checklist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid #EC4899;
  background: #EC4899;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.18);
  transition: transform 0.15s ease, filter 0.18s ease;
}
.page-index .landing-checklist-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.page-index .landing-emergency-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid #DC2626;
  background: #DC2626;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.2);
  transition: transform 0.15s ease, filter 0.18s ease;
}
.page-index .landing-emergency-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* ── New card-style menu (coupon / tripcalc / language / checklist / emergency / taxfree) ── */
.page-index .landing-cta-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 24px;
  justify-content: stretch;
}
.page-index .landing-menu-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  color: #1f2937;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.page-index .landing-menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  background: var(--menu-card-soft, transparent);
}
.page-index .landing-menu-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.page-index .landing-menu-card:hover::before {
  opacity: 1;
}
.page-index .menu-card-wide {
  grid-column: 1 / -1;
}
.page-index .menu-card-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--menu-card-gradient, linear-gradient(135deg, #6b7280, #374151));
  color: #fff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 6px 14px var(--menu-card-shadow, rgba(15, 23, 42, 0.18));
}
.page-index .menu-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.page-index .menu-card-label {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.page-index .menu-card-label-stacked {
  text-align: center;
  display: inline-block;
  align-self: flex-start;
  width: auto;
}
.page-index .menu-card-checklist .menu-card-label-stacked {
  text-align: left;
}
.page-index .menu-card-sub {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}
.page-index .menu-card-coupon {
  --menu-card-gradient: linear-gradient(135deg, #FB923C 0%, #F43F5E 100%);
  --menu-card-shadow: rgba(244, 63, 94, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(255, 237, 213, 0.7), rgba(255, 228, 230, 0.7));
}
.page-index .menu-card-tripcalc {
  --menu-card-gradient: linear-gradient(135deg, #34D399 0%, #14B8A6 100%);
  --menu-card-shadow: rgba(20, 184, 166, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(209, 250, 229, 0.7), rgba(204, 251, 241, 0.7));
}
.page-index .menu-card-language {
  --menu-card-gradient: linear-gradient(135deg, #FBBF24 0%, #F97316 100%);
  --menu-card-shadow: rgba(249, 115, 22, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(254, 243, 199, 0.7), rgba(255, 237, 213, 0.7));
}
.page-index .menu-card-checklist {
  --menu-card-gradient: linear-gradient(135deg, #F472B6 0%, #F43F5E 100%);
  --menu-card-shadow: rgba(244, 63, 94, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(252, 231, 243, 0.7), rgba(255, 228, 230, 0.7));
}
.page-index .menu-card-emergency {
  --menu-card-gradient: linear-gradient(135deg, #EF4444 0%, #E11D48 100%);
  --menu-card-shadow: rgba(225, 29, 72, 0.3);
  --menu-card-soft: linear-gradient(135deg, rgba(254, 226, 226, 0.7), rgba(255, 228, 230, 0.7));
}
.page-index .menu-card-medical {
  --menu-card-gradient: linear-gradient(135deg, #EC4899 0%, #DC2626 100%);
  --menu-card-shadow: rgba(220, 38, 38, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(252, 231, 243, 0.7), rgba(254, 226, 226, 0.7));
}
.page-index .menu-card-running {
  --menu-card-gradient: linear-gradient(135deg, #84CC16 0%, #16A34A 100%);
  --menu-card-shadow: rgba(22, 163, 74, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(236, 252, 203, 0.7), rgba(220, 252, 231, 0.7));
}
.page-index .menu-card-taxfree {
  --menu-card-gradient: linear-gradient(135deg, #3B82F6 0%, #4F46E5 100%);
  --menu-card-shadow: rgba(79, 70, 229, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(219, 234, 254, 0.7), rgba(224, 231, 255, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #0f172a;
}
.page-index .menu-card-exchange {
  --menu-card-gradient: linear-gradient(135deg, #5B66E8 0%, #7C5CE8 100%);
  --menu-card-shadow: rgba(91, 102, 232, 0.28);
  --menu-card-soft: linear-gradient(135deg, rgba(238, 240, 254, 0.7), rgba(232, 220, 252, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #0f172a;
}
.page-index button.landing-menu-card {
  background: rgba(255, 255, 255, 0.78);
}
.page-index .taxfree-chevron {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 14px;
  transition: transform 0.2s ease;
}

/* Tax-free wrap now participates in the grid and carries its own submenu */
.page-index .landing-taxfree-wrap,
.page-index .landing-coupon-wrap,
.page-index .landing-exchange-wrap {
  /* Hoist the button + picker directly into the parent grid. Otherwise the
     wrap occupies one cell next to the emergency card, and opening the picker
     stretches that whole row — pulling the emergency card taller along with
     the taxfree button. With display:contents, the button takes the cell next
     to emergency and the picker drops onto its own full-width row below. */
  display: contents;
}
.page-index .landing-taxfree-picker,
.page-index .landing-coupon-picker,
.page-index .landing-exchange-picker {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.page-index .landing-taxfree-picker.open,
.page-index .landing-coupon-picker.open,
.page-index .landing-exchange-picker.open {
  display: grid;
}
.page-index .taxfree-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(226, 232, 240, 0.9);
  text-decoration: none;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.page-index .taxfree-pick-item:hover {
  transform: translateY(-1px);
  border-color: #6366f1;
  box-shadow: 0 5px 12px rgba(99, 102, 241, 0.14);
}
.page-index .taxfree-flag-img {
  width: 20px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Mobile: keep 2 columns (3 rows x 2 cols) but tighten spacing */
@media (max-width: 640px) {
  .page-index .landing-cta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .page-index .landing-menu-card {
    min-height: 68px;
    padding: 12px;
    gap: 10px;
  }
  .page-index .menu-card-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
    border-radius: 11px;
  }
  .page-index .menu-card-label {
    font-size: 13px;
  }
  .page-index .menu-card-sub {
    font-size: 11px;
  }
  .page-index .taxfree-chevron {
    font-size: 13px;
  }
}

/* ============================================================
   Hero card override (PC) — 슬라이드쇼 위에서 카드 배경/그림자 제거
   PC(>=641px)에서만 .landing-hero의 하늘색 카드(radial gradient +
   border + shadow)를 없애 흰 배경으로. 모바일은 기존 디자인 유지.
   ============================================================ */
@media (min-width: 641px) {
  .page-index .landing-hero {
    background: #ffffff;
    border-color: transparent;
    box-shadow: none;
  }
}

/* ============================================================
   PC 풀폭(full-bleed) 히어로
   768px 이상에서 .landing-hero가 부모 .container의 max-width 980px
   제약을 뚫고 viewport 좌우 끝까지 확장. 슬라이드쇼가 viewport 전체
   가로폭을 채우도록 함. .page-index 한정 overflow-x:hidden으로
   가로 스크롤바 부작용 방지.
   ============================================================ */
@media (min-width: 768px) {
  /* COUNTRY 단계(hero/풀-블리드 카드 노출 중)에만 overflow-x:hidden 으로 풀-블리드
     음수 margin이 만드는 가로 스크롤바 차단. CITY/PLAN 단계에서는 hero/cat/how
     모두 display:none 이고, overflow-x:hidden 이 세로 스크롤바와 결합 시 컨테이너
     를 살짝 왼쪽으로 미는 부작용을 만들어 제외. */
  body.page-index:not(.show-stage-topbar):not(.basket-active) {
    overflow-x: hidden;
  }

  .page-index .landing-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding-left: max(28px, calc((100vw - 980px) / 2));
    padding-right: max(28px, calc((100vw - 980px) / 2));
    /* 회색 줄 ~ 슬라이드 상단 사이 흰 공백(약 36px) 제거:
       margin-collapsing으로 .landing-stage(+18)와 합쳐져 결과 -18,
       container padding-top 18을 더하면 .landing-hero 상단이 y=75
       (= topbar 회색 줄 바로 아래)에 도달. 콘텐츠는 padding-top을
       32 → 68로 +36 보정해 시각 위치 동일 유지. */
    margin-top: -36px;
    padding-top: 68px;
  }
}

/* ============================================================
   Split /country page (URL_SPLIT). body.split-country is emitted only when
   pgle_page == 'country'. Render the country/city selection as a centered
   980px column (= .container, the same width as /dates) instead of the
   landing's full-bleed marketing hero. The marketing hero (#heroV2Root) is
   already hidden by syncHeroVisibility (heroShow=false on /country).
   ============================================================ */
body.split-country .landing-hero {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 980px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-top: 0 !important;
}
body.split-country .landing-city-panel,
body.split-country .popular-city-grid {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Drop the full-bleed (100vw) hero slideshow background on the stage page. */
body.split-country .hero-slide-stack { display: none !important; }

/* ============================================================
   Hero slideshow (5 slides)
   - PC/태블릿(>=768px) 전용: 타이틀/국가선택 뒤로 풀폭 크로스페이드 배경.
   - 모바일: .hero-slide-stack 숨김(기존 디자인 유지).
   - 이미지: /static/img/hero_slideshow/1~5.png
   - 사용자 요청: blur 제거(흐림 없이 선명하게).
   ============================================================ */
.page-index .hero-slide-stack {
  display: none;
}

@media (min-width: 768px) {
  .page-index .landing-hero-slideshow {
    position: relative;
    isolation: isolate;
    align-self: stretch;
    width: auto;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .page-index .hero-slide-stack {
    display: block;
    position: absolute;
    /* 풀-블리드: 부모 폭과 무관하게 viewport 끝까지 채움 */
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    /* 위쪽 흰 공백(.landing-hero padding-top 68px + border 1px = 69px)
       만큼만 슬라이드 영역을 위로 늘림. .landing-hero overflow:hidden가
       hero 박스 상단(=회색 줄)에서 정확히 클리핑해 줌. 아래는 그대로. */
    top: -69px;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
    background: #1f2937; /* 이미지 로드 전 fallback */
  }

  .page-index .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* blur 없음. 흰 텍스트 가독성 위해 brightness만 약간 낮춤 */
    filter: brightness(0.62) saturate(1.05);
    opacity: 0;
    will-change: opacity;
    /* 5장 × 7초 = 35초 한 사이클 */
    animation: pgle-hero-slideshow-5 35s ease-in-out infinite;
  }

  .page-index .hero-slide-1 {
    background-image: url("../../img/hero_slideshow/1.png");
    animation-delay: 0s;
  }
  .page-index .hero-slide-2 {
    background-image: url("../../img/hero_slideshow/2.png");
    animation-delay: 7s;
  }
  .page-index .hero-slide-3 {
    background-image: url("../../img/hero_slideshow/3.png");
    animation-delay: 14s;
  }
  .page-index .hero-slide-4 {
    background-image: url("../../img/hero_slideshow/4.png");
    animation-delay: 21s;
  }
  .page-index .hero-slide-5 {
    background-image: url("../../img/hero_slideshow/5.png");
    animation-delay: 28s;
  }

  /* 5슬라이드 × 7초 = 35초. 각 슬라이드 (20% 구간 차지):
       0~3%   페이드 인
       3~17%  유지
       17~20% 페이드 아웃
       20~100% 투명 대기 */
  @keyframes pgle-hero-slideshow-5 {
    0%, 100% { opacity: 0; }
    3%       { opacity: 1; }
    17%      { opacity: 1; }
    20%      { opacity: 0; }
  }

  /* 슬라이드쇼 위 텍스트: 흰색 + 그림자로 사진 위 가독성 확보 */
  .page-index .landing-hero-slideshow .landing-title {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
  }
  .page-index .landing-hero-slideshow .landing-title span {
    color: #bfdbfe;
  }

  .page-index .landing-hero-slideshow .landing-country-row {
    position: relative;
    z-index: 1;
  }

  /* 국가 chip을 반투명 흰색 → 어두운 배경 위에서도 잘 보이게 */
  .page-index .landing-hero-slideshow .landing-country-row .chip {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  /* "모션 줄이기" 설정 시 애니메이션 정지 + 첫 장만 표시 */
  @media (prefers-reduced-motion: reduce) {
    .page-index .hero-slide {
      animation: none;
      opacity: 0;
    }
    .page-index .hero-slide-1 {
      opacity: 1;
    }
  }
}