/* ============================================================
   Main homepage — SK Telecom Roaming (MA001)
   Tokens & layout aligned to Figma 64:9778 (PC) / 64:10037 (MO)
   ============================================================ */

.page-main {
  --color-skt-red: #ea002c;
  --nav-link-active-color: #ea002c;
  --color-text-primary: #000000;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-border-light: #dddddd;
  --color-bg-page: #ffffff;
  --color-bg-muted: #f3f5f6;
  --color-bg-hero: #f3f5f6;
  --color-bg-footer: #f3f5f6;
  --color-floating-pill: #000000;
  --color-floating-chat: #333333;
  --font-stack: var(--font-family-sans);
  --font-size-body: 16px;
  --line-height-body: 24px;
  --letter-tight: -0.01em;
  --header-height: 64px;
  --container-max: 1280px;
  --gutter-desktop: 40px;
  --gutter-mobile: 20px;
  --grid-gap: 10px;
  --radius-pill: 36px;
  --radius-tab: 4px;
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
  /* Sticky floating bar inset from viewport bottom/right (see .floating-bar-rail) */
  --floating-bar-inset: var(--gutter-desktop);
  --footer-padding-y: 30px;
  --footer-padding-x: 50px;
  --footer-stack-gap: 60px;
  --footer-top-inner-gap: 30px;
  --footer-meta-groups-gap: 30px;
  --footer-meta-item-gap: 10px;
  --footer-m-padding: 20px;
  --footer-m-stack-gap: 40px;
  --footer-m-logo-meta-gap: 30px;
  --footer-m-nav-row-gap: 10px;
  --footer-m-content-inset: 4px;
  --footer-m-link-size: 14px;
  --footer-m-link-leading: 22px;
  font-family: var(--font-stack);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   Page shell
   ---------------------------------------------------------- */
.page-main .header__submenu {
  top: var(--header-stack-height, var(--header-height));
}

.page-main__content {
  position: relative;
  width: 100%;
  padding-top: var(--header-stack-height, var(--header-height));
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* T로밍 배너+헤더가 문서 흐름에 있으므로 고정 헤더용 상단 패딩 불필요 */
.page-main:has(> .troaming-banner) .page-main__content {
  padding-top: 0;
}

/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */

.hero__container {
  box-sizing: border-box;
  max-width: calc(var(--container-max));
  margin: 0 auto;
  padding: 80px 0;
}

.hero__eyebrow {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: var(--letter-tight);
  /* Figma MA001 eyebrow(3597:22129)=#EA002C — 전역 --color-skt-red(#ea002c) 토큰 통일은 디자인팀 판단 대기, 히어로만 스코프 정합 */
  color: var(--nav-link-active-color);
}

.hero__headline {
  margin: 0;
  max-width: 1180px;
  /* Figma MA001 히어로 타이틀 — PC(3597:22130) 40px/lh52, MO(3597:23037) 30px/lh42. 데스크톱 블록에서 lh 1.3 재지정 */
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--letter-tight);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------
   Product pill tabs (eSIM / SIM) — Figma 64:9792
   ---------------------------------------------------------- */
.showcase__pill-tabs {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 30px;
  padding: 0;
  background: #f3f5f6;
  border-radius: 60px;
  overflow: hidden;
}

.showcase__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 67px;
  height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  cursor: pointer;
  font-family: inherit;
}

.showcase__pill--active {
  background: #000;
  color: #fff;
  font-weight: 700;
}

.showcase__pill:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 2px;
}

/* Legacy quick-nav (unused after MA001 redesign) */
.showcase__tab-bar.quick-nav {
  display: none;
}

.quick-nav__list {
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin: 0;
  
  padding: 0;
  list-style: none;
}

.quick-nav__item {
  margin: 0;
}

.quick-nav__tab {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 64px;
  margin: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary);
  text-decoration: none;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.quick-nav__tab .quick-nav__label {
  font-weight: 400;
  border-bottom: 3px solid transparent; /* Tạo khung border trước */
  transition: border-color 0.18s ease;
  padding-bottom: 2px; /* Khoảng cách nhỏ giữa chữ và border nếu cần */
}

/* .quick-nav__tab:hover,
.quick-nav__tab:focus-visible {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
  text-decoration: none;
} */

.quick-nav__tab:hover .quick-nav__label,
.quick-nav__tab:focus-visible .quick-nav__label {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color); /* Chỉ border cho label */
  font-weight: 400;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

.quick-nav__tab--active .quick-nav__label {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
  font-weight: 400;
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
}

.quick-nav__tab:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 4px;
}

.quick-nav__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
}

.quick-nav__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quick-nav__label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: var(--letter-tight);
  white-space: nowrap;
}

.showcase__panel {
  margin-top: 0;
}

/* ----------------------------------------------------------
   Shared: section container
   ---------------------------------------------------------- */
.showcase,
.coupon-section,
.events-section,
.reasons-section {
  padding: 60px 0;
}

/* 폐지 섹션 (Figma MA001: promo-dual / benefit 제거) */
.promo-dual,
.benefit-section {
  display: none !important;
}

.showcase__container,
.promo-dual__container,
.coupon-section__container,
.benefit-section__container,
.events-section__container,
.reasons-section__container {
  box-sizing: border-box;
  max-width: calc(var(--container-max));
  margin: 0 auto;
  /* padding: 0 var(--gutter-desktop); */
}

.reasons-section__container{
  padding: 40px 0px 60px 0px;
}

/* ----------------------------------------------------------
   Showcase (eSIM product row)
   ---------------------------------------------------------- */
.showcase {
  padding-top: 60px;
}

.showcase--recommend {
  padding-top: 0;
}

.showcase__track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth; 
  
  &::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;

  -ms-overflow-style: none;
}

.showcase__header {
  margin-bottom: 30px;
}

.showcase--recommend .showcase__header {
  margin-bottom: 30px;
}

.showcase__title {
  margin: 80px 0 10px;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: var(--letter-tight);
  word-break: keep-all;
}

.showcase__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.showcase__lead {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
  letter-spacing: var(--letter-tight);
}

.showcase__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  white-space: nowrap;
}

.showcase__more:hover,
.showcase__more:focus-visible {
  color: var(--color-text-primary);
  text-decoration: none;
}

.showcase__carousel {
  position: relative;
}

.showcase__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.showcase__slide {
  margin: 0;
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.showcase__controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.showcase__control {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 100%;
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.showcase__control:disabled {
  opacity: 0.15;
  cursor: not-allowed;
}

/* .showcase__control:not(:disabled):hover,
.showcase__control:not(:disabled):focus-visible {
  border-color: #000;
} */

.showcase__control::before,
.coupon-section__control::before,
.benefit-section__control::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_black.svg") center / contain no-repeat;
}

.showcase__control--prev::before,
.coupon-section__control--prev::before,
.benefit-section__control--prev::before {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------
   Product card — Figma 64:9798~
   ---------------------------------------------------------- */
.product-card {
  height: 100%;
  background: var(--color-bg-page);
  overflow: visible;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 15px;
  text-decoration: none;
  color: inherit;
}

.product-card__media {
  aspect-ratio: 292.5 / 210;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5f6;
}

.product-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px;
  flex: 1;
}

.product-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  color: #000;
}

.product-card__network {
  font-weight: 400;
}

.product-card__network--bold {
  font-weight: 700;
}

.product-card__sep {
  display: block;
  width: 1px;
  height: 12px;
  flex-shrink: 0;
  background-color: var(--color-border-light);
}

.product-card__duration {
  font-weight: 400;
}

.product-card__price {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--letter-tight);
}

.product-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: var(--letter-tight);
  color: #000;
  word-break: keep-all;
}

.product-card--compact .product-card__body {
  gap: 5px;
}

.product-card--compact .product-card__link {
  gap: 15px;
}

/* Mobile CTA = text link; PC (≥1280) = black pill — Figma MO/PC 차이 */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 10px 8px 15px;
  background: #000;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  text-decoration: none;
}

.product-card__cta-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_white.svg") center / contain no-repeat;
}

.product-card__link:hover .product-card__cta,
.product-card__link:hover .product-card__cta-text,
.benefit-card__link:hover .benefit-card__cta,
.benefit-card__link:hover .benefit-card__cta-text {
  text-decoration: none;
}

/* ----------------------------------------------------------
   Promo dual
   ---------------------------------------------------------- */
.promo-dual__container {
  display: grid;
  /* 모바일(base)=고궁 1개 풀폭, 데스크톱 미디어에서 2열 복원 */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* Figma MMA001(3597:23117): 모바일 프로모는 고궁 1개만 — 다이소 배너는 데스크톱 전용(다이소는 이벤트 섹션 카드로 노출 유지) */
.promo-dual__container .promo-banner:nth-of-type(2) {
  display: none;
}

.promo-banner {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 260px);
  align-items: stretch;
  min-height: 160px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right !important;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.promo-banner__content {
  position: relative;
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
}

.promo-banner__title {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: white;

  letter-spacing: var(--letter-tight);
}

.promo-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
}

.promo-banner__link-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_white.svg") center / contain no-repeat;
}

.promo-banner:hover,
.promo-banner:focus-visible {
  color: inherit;
}

.promo-banner:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   Coupon section
   ---------------------------------------------------------- */
.coupon-section__container, .benefit-section__container, .showcase-panel{
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}

.coupon-section__title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 44px;
  font-weight: 700;
  word-break: keep-all;
}

.br-mobile {
  display: none;
}

.coupon-section__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.coupon-section__lead {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.coupon-section__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

.coupon-section__more:hover,
.coupon-section__more:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* 지역 칩 가로 스크롤 래퍼 — en 등 긴 번역 라벨이 뷰포트를 넘어도 문서 가로 오버플로(iOS 좌우 흔들림)가 생기지 않도록 내부 스크롤로 흡수 */
.coupon-section__tabs-scroll {
  display: none;
}

.coupon-section__tabs-scroll::-webkit-scrollbar {
  display: none;
}

.filter-tabs {
  display: flex;
  gap: 0;
  background-color: #f3f5f6;
  border-radius: 60px;
  width: fit-content;
}

.filter-tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  min-height: 48px;
  padding: 0 20px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  border-radius: 60px;
  letter-spacing: var(--letter-tight);
  cursor: pointer;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.filter-tabs__tab:last-child {
  border-right-width: 1px;
}

.filter-tabs__tab--active {
  background: var(--color-text-primary);
  color: #fff;
  border-color: var(--color-text-primary);
}

.filter-tabs__tab:focus-visible {
  outline: 2px solid var(--color-skt-red);
  outline-offset: 2px;
}

.filter-tabs--dense .filter-tabs__tab {
  padding-inline: 20px;
}

.coupon-section__carousel {
  position: relative;
}

.coupon-section__track {
  &::-webkit-scrollbar {
    display: none;
}

-ms-overflow-style: none;  
scrollbar-width: none; 
}

.coupon-section__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.coupon-section__slide {
  margin: 0;
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.coupon-section__slide[hidden] {
  display: none !important;
}

.coupon-section__carousel.is-unpaged .coupon-section__controls {
  display: none;
}

.coupon-section__carousel.is-unpaged .coupon-section__track {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.coupon-section__controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.coupon-section__control {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 100%;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.coupon-section__control:disabled {
  opacity: 0.15;
  cursor: not-allowed;
}

.coupon-card {
  border-radius: 12px;
  overflow: hidden;
}

.coupon-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.coupon-card__media {
  aspect-ratio: 292.5 / 210;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5f6;
}

.coupon-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coupon-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 10px 0;
}

.coupon-card__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  color: #000;
}

.coupon-card__sep {
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-border-light);
}

.coupon-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  color: #000;
}

.coupon-card__more-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_black.svg") center / contain no-repeat;
}

.coupon-card__more-text {
  color: #000;
}

/* EN/JA: "See details" / "詳しく見る" 가 좁은 푸터에서 줄바꿈되어 깨지므로 화살표만 표시 */
html[lang="en"] .coupon-card__more .coupon-card__more-text,
html[lang="ja"] .coupon-card__more .coupon-card__more-text {
  display: none;
}

html[lang="en"] .coupon-card__more,
html[lang="ja"] .coupon-card__more {
  gap: 0;
}

.coupon-card--more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 292.5 / 210; /* 쿠폰 썸네일(.coupon-card__media)과 동일 */
  padding: 20px;
  background: #f3f5f6;
  border-radius: 12px;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
}

.coupon-card--more:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   Benefit section
   ---------------------------------------------------------- */

.benefit-section__title {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 44px;
  font-weight: 700;
  word-break: keep-all;
}

.benefit-section__lead {
  color: var(--color-text-primary);
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.benefit-section__carousel {
  position: relative;
  margin-top: 24px;
}

.benefit-section__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.benefit-section__track::-webkit-scrollbar {
  display: none;
}

.benefit-section__slide {
  margin: 0;
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.benefit-section__slide[hidden] {
  display: none !important;
}

.benefit-section__carousel.is-unpaged .benefit-section__controls {
  display: none;
}

.benefit-section__carousel.is-unpaged .benefit-section__track {
  overflow-x: hidden;
  scroll-snap-type: none;
}

.benefit-card {
  overflow: hidden;
  background: #fff;
  height: 100%;
}

.benefit-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.benefit-card__media {
  aspect-ratio: 292.5 / 210;
  width: 100%;
  background: linear-gradient(135deg, #fff0f0, #ffd6d6);
}

.benefit-card__body {
  padding: 20px 10px 0;
  flex: 1;
  /* Figma MA001 혜택카드(3597:22594): 타이틀(24 Bold) 상단 → 메타(기간 ǀ 가격, 16 블랙) 하단 */
  display: flex;
  flex-direction: column;
}

.benefit-card__title {
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
}

.benefit-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-primary);
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 24px;
}

.benefit-card__meta-divider {
  width: 1px;
  height: 12px;
  background: #ddd;
}

.benefit-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 16px 10px 20px;
  min-height: 40px;
  padding: 0 10px 0 15px;
  background: #000;
  color: #fff;
  border-radius: 20px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  align-self: flex-start;
  text-decoration: none;
}

.benefit-card__cta-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_white.svg") center / contain no-repeat;
}

.benefit-section__controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.benefit-section__control {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 100%;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.benefit-section__control:disabled {
  opacity: 0.15;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   Events
   ---------------------------------------------------------- */
.events-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

.events-section__title {
  margin: 0;
  font-size: 28px;
  line-height: 44px;
  font-weight: 700;
  word-break: keep-all;
}

.events-section__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
}

.events-section__more-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_black.svg") center / contain no-repeat;
}

.events-section__more:hover,
.events-section__more:focus-visible {
  color: inherit;
  text-decoration: none;
}

.events-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.event-banner {
  position: relative; /* __cover(동적 캠페인 풀커버 링크)의 absolute 기준 */
  display: grid;
  grid-template-columns: 1fr minmax(140px, 260px);
  align-items: stretch;
  box-sizing: border-box;
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right !important;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 동적 캠페인 카드(벨트배너 이관): 배너 이미지가 카드 전면을 채우고 전체가 링크 */
.event-banner__cover {
  position: absolute;
  inset: 0;
}

.event-banner__content {
  position: relative;
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: white;
  justify-content: space-between;
}

.event-banner__title {
  margin: 0;
  max-width: 285px;
  color: white;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}

html[lang="en"] .event-banner__title {
  max-width: 360px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.event-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
}

.event-banner__link-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("../../assets/icons/ic20_arrow_right_white.svg") center / contain no-repeat;
}

.event-banner:hover,
.event-banner:focus-visible {
  color: inherit;
}

.event-banner:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 2px;
}

.event-banner--no-cta .event-banner__content {
  justify-content: flex-start;
}

/* ----------------------------------------------------------
   Reasons
   ---------------------------------------------------------- */
.reasons-section {
  background: var(--color-bg-page);
  padding-bottom: 120px;
}

.reasons-section__title {
  margin: 0 0 48px;
  /* max-width: 400px; */
  font-size: 28px;
  line-height: 44px;
  font-weight: 700;
  word-break: keep-all;
}

.reasons-section__carousel {
  position: relative;
}

.reasons-section__list {
  display: flex;
  gap: var(--grid-gap);
  padding: 90px 0 8px; /* Thêm 60px (hoặc hơn) ở phía trên */
  margin-top: -60px;    /* Dùng margin âm để bù lại khoảng cách nếu cần thiết */
  overflow-x: auto;
  overflow-y: visible; /* Cho phép hiển thị nội dung trồi ra ngoài theo trục Y */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reasons-section__list::-webkit-scrollbar {
  display: none;
}

.reasons-section__list.drag-scroll--dragging {
  scroll-behavior: auto;
}

.reasons-section__list.drag-scroll--dragging,
.reasons-section__list.drag-scroll--dragging * {
  user-select: none;
}

.reasons-section__list:focus-visible {
  outline: 2px solid var(--color-skt-red);
  outline-offset: 4px;
  position: relative;
}

.reasons-section__item {
  margin: 0;
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

.reason-card {
  padding: 156px 30px 30px;
  text-align: left;
  border-radius: 12px;
  position: relative;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: flex-start;
  overflow: visible;
}

html[lang="en"] .reason-card,
html[lang="ja"] .reason-card {
  padding-top: 132px;
}

.reason-card__visual {
  position: absolute;
  top: -2%;
  left: 49%;
  transform: translate(-32%, -26%);
  width: 75%;
  height: 75%;
  object-fit: cover;
  object-position: center;
}

.reason-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.reason-card--speed  {
  background-color: #FFFCE0;
}

.reason-card--booth  {
  background-color: #E5F4FF;
}

.reason-card--users  {
  background-color: #FFE8F1;
}

.reason-card--price  {
  background-color: #E4F5E8;
}

.reason-card__heading {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.24px;
  color: #000;
  word-break: keep-all;
  min-height: 72px;
}

.reason-card__title {
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
}

.reason-card__title-sub-1 {
  color: #CE7C00;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.24px;
}

.reason-card__title-sub-2 {
  color: #0A5992; 
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.24px;
}

.reason-card__title-sub-3 {
  color: #BA2B63; 
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.24px;
}

.reason-card__title-sub-4 {
  color: #1C7530; 
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.24px;
}

.reason-card__text {
  font-size: 14px;
  line-height: 22px;
  text-align: start;
  color: var(--color-text-primary);
  min-height: 88px;
}

.padding-x{
  padding-left: 10px;
  padding-right: 10px;
}

.coupon-section__controls, .benefit-section__controls, .showcase__controls {
  margin-top: 30px;
}

@media (max-width: 1279.98px) {
  /* 한글만 어절(띄어쓰기) 단위로 줄바꿈. 너무 긴 토큰은 overflow-wrap으로 안전 브레이크 */
  html[lang="ko"] .page-main__content {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .page-main {
    --floating-bar-inset: var(--gutter-mobile);
  }

  .showcase__header {
    margin-bottom: 20px;
  }

  .coupon-section__controls, .benefit-section__controls, .showcase__controls {
    margin-top: 20px;
    justify-content: flex-end;
  }

  .coupon-section__container, .benefit-section__container{
    gap: 30px;
  }

  .padding-x{
    padding-left: 4px;
    padding-right: 4px;
  }

  .promo-banner {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
  }

  .hero__eyebrow{
    display: none;
  }

  .promo-banner__title{
    font-size: 18px;
  }

  .event-banner__title{
    font-size: 20px;
  }

  .showcase__title, .coupon-section__title, .benefit-section__title, .events-section__title, .reasons-section__title{
    font-size: 26px;
    line-height: 40px;
  }

  .showcase__title {
    margin-top: 40px;
  }

  .quick-nav__list{
    justify-content: space-between;
  }
  /* .showcase__tab-bar.quick-nav {
    margin-bottom: 30px;
  } */

  .quick-nav__list{
    gap: 10px;
  }
  .page-main__content {
    padding-left: 0px;
    padding-right: 0px;
  }

.showcase__track {
  display: flex;
  flex-wrap: nowrap;    
  overflow-x: auto;      
  
  &::-webkit-scrollbar {
      display: none;
  }

  -ms-overflow-style: none;  
  scrollbar-width: none; 
}

  .showcase__slide,
  .coupon-section__slide,
  .benefit-section__slide {
    flex: 0 0 calc((100% - 10px) / 2);
  }

  .hero__container,
  .showcase__container,
  .promo-dual__container,
  .coupon-section__container,
  .benefit-section__container,
  .events-section__container,
  .reasons-section__container {
    padding-inline: var(--gutter-mobile);
  }

  .hero__container{
    padding:60px 20px;
  }

  .text-sm-mobile {
    font-size: 14px !important; 
    line-height: 22px;
  }

  .showcase__header-row{
    gap:10px;
  }

  .text-lg-mobile {
    font-size: 22px !important; 
  }

  .filter-tabs__tab {
    min-height: 40px;
    padding: 13px 16px;
    font-size: 14px;
    line-height: 22px;
  }

  .filter-tabs--dense .filter-tabs__tab {
    padding-inline: 16px;
  }

  .product-card__desc {
    font-size: 14px;
    line-height: 22px;
  }

  .product-card__meta {
    font-size: 14px;
    line-height: 22px;
    gap: 10px;
  }

  .product-card__cta {
    min-height: 36px;
    padding: 6px 8px 6px 12px;
    font-size: 14px;
    line-height: 22px;
    background: #000;
    border-radius: 20px;
    color: #fff;
  }

  .benefit-card__cta {
    min-height: 36px;
    padding: 0 10px 0 15px;
    font-size: 14px;
    line-height: 22px;
  }

  .benefit-section__lead {
    font-size: 14px;
    line-height: 22px;
  }

  .benefit-card__title {
    font-size: 22px;
    line-height: 32px;
  }

  .benefit-card__meta {
    font-size: 14px;
    line-height: 22px;
  }

  .benefit-card__body {
    padding: 15px 4px 0;
  }

  .benefit-card__cta {
    margin: 10px 0 0;
    gap: 2px;
  }

  .coupon-card__footer {
    padding: 10px 4px 0;
  }

  .product-card__cta-icon,
  .benefit-card__cta-icon,
  .coupon-card__more-icon {
    width: 16px;
    height: 16px;
  }

  .quick-nav__tab {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }

  .quick-nav__label{
    max-width: 72.5px;
    text-align: center;
    text-wrap: wrap;
  }

  .promo-banner__content{
    padding: 20px;
    justify-content: space-between;

    background-position: 80% center !important;
  }
  .promo-dual__container,
  .events-section__grid {
    grid-template-columns: 1fr;
  }

  .promo-banner,
  .event-banner {
    grid-template-columns: 1fr;
  }
.event-banner__content{
  padding: 20px;
  justify-content: space-between;
}
  .event-banner {
    grid-template-columns: 1fr;
    background-size: cover;
    justify-content: center;
    background-position: right !important;
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    border-radius: 8px;
  }
  .event-banner__title {
   font-size: 18px;
   line-height: 26px;
  }

  .coupon-card__tags {
    font-size: 14px;
    line-height: 22px;
  }

  .event-banner__link,
  .promo-banner__link,
  .coupon-card__more,
  .events-section__more {
    gap: 2px;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
  }

  .event-banner__link-icon,
  .promo-banner__link-icon {
    width: 16px;
    height: 16px;
  }

  .reason-card {
    max-height: 290px;
    padding: 130px 20px 20px;
    border-radius: 8px;
  }

  html[lang="en"] .reason-card,
  html[lang="ja"] .reason-card {
    padding-top: 108px;
  }

  .reason-card__heading,
  .reason-card__title,
  .reason-card__title-sub-1,
  .reason-card__title-sub-2,
  .reason-card__title-sub-3,
  .reason-card__title-sub-4 {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.22px;
  }

  .reason-card__heading {
    min-height: 64px;
  }

  .reason-card__text {
  }

  .button-control__sm {
    width: 40px;
    height: 40px;
  }

  .button-control__sm::before {
    width: 20px;
    height: 20px;
  }

  .showcase__track,
  .coupon-section__track,
  .benefit-section__track {
    display: flex;
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }

    
  .events-section{
    padding: 40px 0;
  }

  .showcase__slide,
  .coupon-section__slide,
  .benefit-section__slide {
    flex: 0 0 min(85vw, 240px);
    scroll-snap-align: start;
  }

  .floating-bar__pill {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: center;
    min-height: 48px;
    height: 48px;
    gap: 24px;
    padding: 0 20px;
  }

  .floating-bar__chat {
    flex-shrink: 0;
  }

  

  

  

  

  

  

  

  

  

  

  
}

@media (min-width: 1280px) {
  .page-main {
    --floating-bar-inset: var(--gutter-desktop);
  }

          .page-main__content {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero__container,
  .showcase__container,
  .promo-dual__container,
  .coupon-section__container,
  .benefit-section__container,
  .events-section__container,
  .reasons-section__container {
    padding-inline: 0;
  }

  .hero__eyebrow {
    display: block;
  }

  .hero__headline {
    /* PC(Figma 3597:22130): 40px 기준 lh52 */
    line-height: 1.3;
  }

  .promo-dual__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-dual__container .promo-banner:nth-of-type(2) {
    display: grid;
  }

  .showcase__header {
    margin-bottom: 30px;
  }

  .showcase__title,
  .coupon-section__title,
  .benefit-section__title,
  .events-section__title,
  .reasons-section__title {
    font-size: 32px;
    line-height: 44px;
  }

  .coupon-section__controls,
  .benefit-section__controls,
  .showcase__controls {
    margin-top: 30px;
  }

  .padding-x {
    padding-left: 10px;
    padding-right: 10px;
  }

  .product-card__body {
    padding: 0 10px;
  }

  /* PC CTA = black pill button (Figma 64:9810) */
  .product-card__cta {
    min-height: 40px;
    padding: 8px 10px 8px 15px;
    background: #000;
    border-radius: 20px;
    color: #fff;
  }

  .product-card__cta-icon {
    background-image: url("../../assets/icons/ic20_arrow_right_white.svg");
  }

  .showcase__track,
  .coupon-section__track,
  .benefit-section__track,
  .reasons-section__list {
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0;
  }

  .showcase__slide,
  .coupon-section__slide,
  .benefit-section__slide,
  .reasons-section__item {
    flex: 0 0 calc((100% - 30px) / 4);
  }

  /* 데스크톱 쿠폰: 모바일 2행 그리드 해제, 1행 flex 캐러셀 복원 */
  .coupon-section__track {
    display: flex;
  }

  .events-section {
    padding: 60px 0;
  }

  .events-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promo-banner,
  .event-banner {
    grid-template-columns: 1fr minmax(140px, 260px);
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    background-position: right !important;
  }

  .promo-banner__content {
    padding: 30px;
    justify-content: center;
    background-position: right center !important;
  }

  .promo-banner__title {
    font-size: 20px;
  }

  .event-banner__content {
    padding: 30px;
    justify-content: space-between;
  }

  .event-banner__title {
    font-size: 20px;
  }

  .reason-card {
    max-height: 340px;
  }

  .button-control__sm {
    width: 48px;
    height: 48px;
  }

  .button-control__sm::before {
    width: 20px;
    height: 20px;
  }

  .text-sm-mobile {
    font-size: 16px !important;
  }

  .text-lg-mobile {
    font-size: 24px !important;
  }

  .filter-tabs button {
    font-size: 16px;
  }

  .floating-bar__pill {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    min-height: 56px;
    height: 56px;
    gap: 30px;
    padding: 0 40px;
  }

  .floating-bar__chat {
    flex-shrink: 0;
  }

  .floating-bar__sns-panel {
    width: 56px;
    padding: 0;
  }

  .floating-bar__sns-list {
    gap: 10px;
  }

  

  

  

  

  

  

  

  

  

  

  

}

/* 해상도 가이드 MO 1279: eSIM/쿠폰/혜택 4열, 화살표 유지 */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .showcase__slide,
  .coupon-section__slide,
  .benefit-section__slide,
  .reasons-section__item {
    flex: 0 0 calc((100% - 30px) / 4);
    max-width: none;
  }
}

/* 해상도 가이드 MO 360: 쿠폰 2행 가로 슬라이드, 그 외 섹션은 1장 + peek */
@media (max-width: 767.98px) {
  /* MMA001: 이벤트 배너 320×140, 고궁패스는 PC만 */
  .event-banner {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    border-radius: 8px;
  }

  .events-section__grid > .event-banner--pc-only {
    display: none;
  }

  /* 타이틀/탭은 좌우 거터 유지. 슬라이드만 오른쪽 화면 끝까지 bleed */
  .showcase__carousel,
  .coupon-section__carousel,
  .benefit-section__carousel,
  .reasons-section__carousel {
    box-sizing: border-box;
    min-width: 0;
    width: calc(100% + var(--gutter-mobile));
    max-width: none;
    margin-right: calc(-1 * var(--gutter-mobile));
  }

  .showcase__carousel,
  .coupon-section__carousel,
  .benefit-section__carousel {
    overflow: hidden;
  }

  .showcase__controls,
  .coupon-section__controls,
  .benefit-section__controls {
    padding-right: var(--gutter-mobile);
  }

  .showcase__track,
  .benefit-section__track,
  .reasons-section__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .showcase__slide,
  .benefit-section__slide,
  .reasons-section__item {
    flex: 0 0 calc(100% * 240 / 340);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }

  .reasons-section__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--grid-gap);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 60px 0 8px;
    margin-top: -40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .reasons-section__list::-webkit-scrollbar {
    display: none;
  }

  /* 마지막 카드 뒤에 화면 끝 20px 거터 (flex gap 상쇄) */
  .showcase__track::after,
  .benefit-section__track::after,
  .reasons-section__list::after {
    content: "";
    flex: 0 0 calc(var(--gutter-mobile) - var(--grid-gap));
  }

  /* MMA001: 2행 × N열 가로 슬라이드, 카드 240 / 트랙 340 → 다음 열 90px peek */
  .coupon-section__track {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--coupon-cols, 4), calc(100% * 240 / 340));
    grid-auto-columns: calc(var(--gutter-mobile) - var(--grid-gap));
    column-gap: var(--grid-gap);
    row-gap: 20px;
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0;
  }

  .coupon-section__slide {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
  }

  /* 2행 칸을 차지하지 않고, 마지막 열 뒤에만 20px 거터 */
  .coupon-section__track::after {
    content: "";
    grid-column: calc(var(--coupon-cols, 4) + 1);
    grid-row: 1;
    width: calc(var(--gutter-mobile) - var(--grid-gap));
    height: 0;
    pointer-events: none;
  }

  .coupon-card--more {
    min-height: 0;
    width: 100%;
    aspect-ratio: 240 / 172;
    padding: 0;
    gap: 2px;
    font-size: 14px;
    line-height: 22px;
    border-radius: 12px;
  }

  .coupon-section__header-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  .events-section__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  .br-mobile {
    display: block;
  }

  /* PC에서만 슬라이드 없음. 360에선 1+peek 이라 화살표·스와이프 유지 */
  .coupon-section__carousel.is-unpaged .coupon-section__controls,
  .benefit-section__carousel.is-unpaged .benefit-section__controls {
    display: flex;
  }

  .coupon-section__carousel.is-unpaged .coupon-section__track,
  .benefit-section__carousel.is-unpaged .benefit-section__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .coupon-section__carousel,
  .benefit-section__carousel {
    margin-top: -10px;
  }
}

@media (max-width: 1279.98px) {
  html[lang="en"] .event-banner__title,
  html[lang="ja"] .event-banner__title {
    max-width: 280px;
    overflow-wrap: break-word;
  }

  html[lang="en"] .event-banner__title {
    font-size: 16px;
    line-height: 22px;
    word-break: normal;
    max-width: 280px;
  }

  html[lang="ja"] .event-banner__title {
    font-size: 18px;
    line-height: 26px;
    word-break: keep-all;
  }

  html[lang="en"] .event-banner__content,
  html[lang="ja"] .event-banner__content {
    gap: 10px;
  }
}