@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@600;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

* { font-family: var(--font-pretendard); }
h1, h2, h3 { font-family: var(--font-ibm-plex), var(--font-pretendard), sans-serif; }

section { margin: 0px; word-break: keep-all; overflow-wrap: break-word; }

body, html { overflow-x: hidden; margin: 0px; word-break: keep-all; overflow-wrap: break-word; background-color: var(--color-bg-body); }

p { margin-block-start: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-sm); }
li, ul { margin: 0px; padding-inline-start: 0px; }
a { color: var(--color-text-secondary); text-decoration-line: none; }

/* 타이포그래피 스케일 */
h1  { font-size: var(--text-display-xxl-size); font-weight: var(--text-display-xxl-weight); line-height: var(--text-display-xxl-lh); margin-block-start: 0px; margin-block-end: 6px; color: var(--color-text-primary); }
h2  { font-size: var(--text-display-xl-size);  font-weight: var(--text-display-xl-weight);  line-height: var(--text-display-xl-lh);  margin-block-start: 0px; margin-block-end: 2px; color: var(--color-text-primary); }
h3  { font-size: var(--text-heading-l-size);   font-weight: var(--text-heading-l-weight);   line-height: var(--text-heading-l-lh);   text-align: center; }
.b1 { font-size: var(--text-body-l-size);      font-weight: var(--text-body-l-weight);      line-height: var(--text-body-l-lh);      color: var(--color-text-primary); }
.b2 { font-size: var(--text-body-l-size);      font-weight: 700;                            line-height: var(--text-body-l-lh);      color: var(--color-text-primary); }
.b3 { font-size: var(--text-body-l-size);      font-weight: var(--text-body-l-weight);      line-height: var(--text-body-l-lh);      text-decoration-line: underline; color: var(--color-text-secondary); }
.c1 { font-size: var(--text-body-s-size);      font-weight: var(--text-body-s-weight);      line-height: var(--text-body-s-lh);      color: var(--color-text-secondary); }
.c2 { font-size: var(--text-label-l-size);     font-weight: var(--text-label-l-weight);     line-height: var(--text-label-l-lh);     color: var(--color-text-secondary); }


.container_mo { background: inherit; }
.inner { margin: 0; padding: 0 var(--space-xl); }

.container_mo img { display: block; }
.inner img { display: block; }

/* 기기 분기 이미지_MO ✂️ */
#img_mo { display: block; }
#img_pc { display: none; }


/* 유튜브 임베드 ✂️ */
.video-wrap { position: relative; padding-bottom: 56.25%; padding-top: var(--space-xxl); height: 0; overflow: hidden; }
.video-wrap iframe,
.video-wrap object,
.video-wrap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 플로팅 버튼 ✂️ */
.btn_f {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: var(--space-xs) var(--space-xl) var(--space-xl);
  padding-bottom: calc(var(--space-xl) + constant(safe-area-inset-bottom));
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
}

/* 플로팅 버튼 — 공유하기 포함 variant (좌: 정사각형 고정 / 우: 나머지 전체) ✂️ */
.btn_f--with-share { display: flex; align-items: stretch; gap: var(--space-sm); }
.btn_f__share {
  flex: none;
  width: 64px;  /* 높이와 동일 — 1:1 정사각형 */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--color-button-secondary);
  color: var(--color-white);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn_f--with-share .btn { flex: 1 1 0; width: auto; }


/* 버튼 ✂️ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 64px;
  padding: 0 var(--space-xl);
  border-radius: var(--radius-12);
  border: none;
  font-family: var(--font-ibm-plex), var(--font-pretendard), sans-serif;
  font-size: var(--text-heading-m-size);
  font-weight: var(--text-heading-m-weight);
  line-height: var(--text-heading-m-lh);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn--filled   { background: var(--color-primary); color: var(--color-white); } /* 컬러 버튼 → 항상 흰 텍스트 */
.btn--outlined { background: transparent; color: var(--color-text-accent); border: 1px solid var(--color-primary); }
.btn--inactive { background: var(--color-border-strong); color: var(--color-white); pointer-events: none; }
.btn--text     { display: inline; background: transparent; color: var(--color-text-accent); height: auto; padding: 0; width: auto; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; vertical-align: baseline; text-decoration: underline; text-underline-offset: 2px; border: none; border-radius: 0; }
.btn__icon     { flex-shrink: 0; }


/* 히어로 섹션 ✂️ */
.hero {
  background: var(--color-primary);
  padding: calc(var(--space-section-lg) + var(--space-section)) 0 var(--space-section-lg);
}
.hero h1 { color: var(--color-white); font-size: var(--text-display-hero-size); } /* 히어로 h1만 예외적으로 40px */
.hero__label {
  display: block;
  font-size: var(--text-label-l-size);
  font-weight: var(--text-label-l-weight);
  line-height: var(--text-label-l-lh);
  color: rgba(255, 255, 255, 0.65); /* text-inverse @ 65% — 컬러 배경 전용, 토큰 미정의 */
  margin-bottom: var(--space-sm);
}
.hero__sub {
  font-size: var(--text-body-l-size);
  font-weight: var(--text-body-l-weight);
  line-height: var(--text-body-l-lh);
  color: rgba(255, 255, 255, 0.8); /* text-inverse @ 80% — 컬러 배경 전용, 토큰 미정의 */
  margin-top: var(--space-xs);
  padding: 0;
  margin-bottom: 0;
}


/* DS 프리뷰 툴바 (preview.html 전용 — 배포 페이지 미사용) ✂️ */
.ds-toolbar {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  gap: var(--space-hairline);
  padding: 0 var(--space-md);
  overflow-x: auto;
  height: 36px;
}
.ds-toolbar__label {
  font-size: var(--text-label-s-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  padding-right: var(--space-xs);
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-toolbar a {
  font-size: var(--text-body-s-size);
  color: var(--color-border-strong);
  padding: 0 var(--space-xs);
  line-height: 36px;
  white-space: nowrap;
  text-decoration: none;
}
.ds-toolbar a:hover { color: var(--color-text-inverse); }
.ds-toolbar__sep {
  width: var(--space-hairline);
  height: var(--space-sm);
  background: var(--color-border-strong);
  margin: 0 var(--space-xxs);
  flex-shrink: 0;
  opacity: 0.3;
}


/* 배지·레이블 ✂️ */
.badge {
  display: inline-block;
  font-size: var(--text-label-m-size);
  font-weight: var(--text-label-m-weight);
  line-height: var(--text-label-m-lh);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-8);
  align-self: flex-start; /* flex 컨테이너 안에서 텍스트 너비에 맞게 수축 */
}
.badge--filled   { background: var(--color-bg-subtle); color: var(--color-text-accent); }
.badge--outlined { background: transparent; color: var(--color-text-accent); border: 1px solid var(--color-primary); }
.badge--basic    { background: var(--color-bg-section); color: var(--color-text-secondary); }


/* 쿠폰 카드 ✂️ */
.coupon {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0; /* <figure> UA 기본 margin-inline:40px 제거 */
}
.coupon--sm { max-width: 300px; }
.coupon--sm .coupon__body { padding: var(--space-lg) var(--space-xl); }
.coupon--sm .coupon__value { white-space: nowrap; }
.coupon__shape { display: block; width: 100%; height: auto; }
.coupon__path  { fill: var(--color-bg-white); stroke: var(--color-border); stroke-width: 1; }
.coupon__body  {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 65.8%;
  padding: var(--space-xl) var(--space-xxl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coupon__label {
  font-size: var(--text-body-l-size);
  font-weight: var(--text-body-l-weight);
  line-height: var(--text-body-l-lh);
  color: var(--color-text-secondary);
  margin: 0;
  padding-bottom: 0;
}
.coupon__text { display: flex; flex-direction: column; gap: var(--space-xxs); }
.coupon__text .badge { align-self: flex-start; }
.coupon__text .badge + p { margin-top: var(--space-xs); } /* badge 뒤 value에 8px 추가 → gap 4px + 8px = 12px */
.coupon__value {
  font-family: var(--font-ibm-plex), var(--font-pretendard), sans-serif;
  font-size: var(--text-display-xxl-size);
  font-weight: var(--text-display-xxl-weight);
  line-height: var(--text-display-xxl-lh);
  color: var(--color-text-primary);
  margin: 0;
}
.coupon__value--text {
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-lh);
}
.coupon__logo { height: 18px; width: auto; display: block; align-self: flex-start; }


/* 콜아웃 ✂️ */
/* 기획 키워드: "callout", "유의사항 박스", "안내 박스", "정보 강조"
   CSS 의존: variables.css (--color-status-*)
   variants: (기본 = Basic), --info, --success, --caution, --warning */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-12);
  background-color: var(--color-bg-section);
}
.callout__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text-secondary);
  color: var(--color-white);
}
.callout__body {
  flex: 1;
  min-width: 0;
  font-size: var(--text-body-m-size);
  font-weight: var(--text-body-m-weight);
  line-height: var(--text-body-m-lh);
  color: var(--color-text-primary);
}
.callout__body > * { margin: 0; padding-bottom: 0; }
.callout__body > * + * { margin-top: var(--space-xxs); }
.callout__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  text-decoration: none;
}
/* Callout — variants */
.callout--info    { background-color: var(--color-status-info-bg); }
.callout--info    .callout__icon { background-color: var(--color-status-info); }
.callout--success { background-color: var(--color-status-positive-bg); }
.callout--success .callout__icon { background-color: var(--color-status-positive); }
.callout--caution { background-color: var(--color-status-caution-bg); }
.callout--caution .callout__icon { background-color: var(--color-status-caution); }
.callout--warning { background-color: var(--color-status-negative-bg); }
.callout--warning .callout__icon { background-color: var(--color-negative); }


/* 액센트 팁 ✂️ */
/* 기획 키워드: "tip", "accent tip", "강조 안내", "부가 정보"
   CSS 의존: variables.css
   랜딩페이지에서는 accent tip만 사용 (info tip 미구현)
   말풍선 형태: dark pill + 아래 방향 꼬리 */
.tip--accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--gray-1000);
  color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-label-l-size);
  font-weight: 600;
  line-height: var(--text-label-l-lh);
}
.tip--accent::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 20px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--gray-1000);
}


/* (archive) 플로팅 버튼 텍스트형 ✂️ */
/* .btn_f {
  position: fixed;
  background-color: #0078FF;
  font-size: 14pt;
  color: #fff;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  border-radius: 12px;
  margin: 14px;
  margin-bottom: 14px;
  padding: 24px calc(constant(safe-area-inset-bottom) + 12px);
  padding: 24px calc(env(safe-area-inset-bottom) + 12px);
  z-index: 999;
} */


/* 딤처리 오버레이 */
.deactivation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay);
  z-index: 9999;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  line-height: 1.6;
  font-weight: bold;
  color: var(--color-bg-white);
  text-align: center;
  padding: var(--space-lg);
}

/* 탭 네비게이션 ✂️ */
.tab-container {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  z-index: 10;
}

.tab-container.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#observe-target {
  height: 1px;
}

.tab {
  flex: 1;
  padding: 14px 10px;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.tab:hover {
  color: var(--color-text-dark);
  border-bottom: 3px solid var(--color-primary);
  font-weight: 500;
}

.tab.active {
  font-weight: 500;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-text-dark);
}


/* 캐러셀 슬라이드 ✂️ */
/* [id^="slide"] : slide01, slide02 ... 등 여러 슬라이드 섹션에 동일하게 적용 */
[id^="slide"] { background-color: var(--color-bg-section); padding-top: calc(var(--space-section) - var(--space-xxs)); padding-bottom: var(--space-section-lg); }

.swiper-container { width: 100%; height: auto; z-index: 98; }
.swiper-wrapper { width: 100%; height: auto; margin: 0px; }
.swiper-slide { width: 100%; text-align: center; display: flex; justify-content: center; }
:root { --swiper-theme-color: #fff; }

.swiper-pagination-bullet { width: var(--space-xs); height: var(--space-xs); margin: var(--space-hairline); background: var(--color-bullet-default); }
.swiper-pagination-bullet-active { width: var(--space-xs); height: var(--space-xs); margin: var(--space-hairline); background: var(--color-primary); }
.swiper-pagination { display: block; position: relative; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10; padding-top: var(--space-lg); padding-bottom: var(--space-xxl); }


/* 유의사항 ✂️ */
#notice { background: var(--color-bg-section); padding: calc(var(--space-section) - var(--space-xxs)) 0 var(--space-floating-clearance) 0; }
.container_notice > .c2 { margin-block-start: 0; } /* notice 제목 p 태그 상단 마진 초기화 */
.check-list { padding-inline-start: var(--space-lg); padding-top: var(--space-sm); }
.check-list li { margin-top: var(--space-xxs); line-height: 20px; text-align: left; position: relative; }
.check-list ul { list-style-type: disc; }


/* FAQ 아코디언 ✂️ */
.accordion-menu { list-style: none; padding: 0; margin: var(--space-xl) 0 0; border-top: 1px solid var(--color-border); }
.accordion-menu > li { border-bottom: 1px solid var(--color-border); }
.dropdownlink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-size: var(--text-heading-s-size);
  font-weight: var(--text-heading-s-weight);
  line-height: var(--text-heading-s-lh);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.dropdownlink::after { content: '+'; font-size: var(--text-heading-l-size); font-weight: 400; color: var(--color-text-secondary); flex-shrink: 0; }
.accordion-menu > li.open .dropdownlink::after { content: '−'; }
.submenuItems { display: none; list-style: none; padding: 0; margin: 0; }
.submenuItems li { padding-bottom: var(--space-lg); }
.submenuItems p { margin: 0; padding: 0; color: var(--color-text-secondary); font-size: var(--text-body-m-size); font-weight: var(--text-body-m-weight); line-height: var(--text-body-m-lh); }


/* 특징·혜택 카드 ✂️ */
.feature-cards { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); }
.feature-card { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-16); padding: var(--space-xl); overflow: hidden; }
.feature-card__badge { display: inline-block; background: var(--color-bg-subtle); color: var(--color-text-accent); font-size: var(--text-label-m-size); font-weight: var(--text-label-m-weight); line-height: var(--text-label-m-lh); padding: var(--space-xxs) var(--space-xs); border-radius: var(--radius-8); margin-bottom: var(--space-sm); }
.feature-card__title { font-size: var(--text-heading-m-size); font-weight: var(--text-heading-m-weight); line-height: var(--text-heading-m-lh); color: var(--color-text-primary); margin: 0 0 var(--space-xs); font-family: var(--font-ibm-plex), var(--font-pretendard), sans-serif; text-align: left; }
.feature-card__desc { font-size: var(--text-body-m-size); font-weight: var(--text-body-m-weight); line-height: var(--text-body-m-lh); color: var(--color-text-secondary); margin: 0; padding: 0; }
.feature-card__img { display: block; width: 100%; margin-top: var(--space-lg); border-radius: var(--radius-8); }

/* 특징·혜택 카드 — 가로 배열 ✂️ */
.feature-card--horizontal { display: flex; flex-direction: row; align-items: center; gap: var(--space-xl); }
.feature-card--horizontal .feature-card__img { width: 120px; flex-shrink: 0; margin-top: 0; }
.feature-card--horizontal .feature-card__body { flex: 1; min-width: 0; }

/* 특징·혜택 카드 — 2열 그리드 ✂️ */
/* .feature-cards에 추가 클래스로 사용. gap/margin-top은 .feature-cards에서 상속 */
.feature-cards--2col { display: grid; grid-template-columns: repeat(2, 1fr); }

/* 특징·혜택 카드 — 박스 없는 구분선형 ✂️ */
/* .feature-cards에 feature-cards--flat 추가 클래스로 사용. 리스트형 항목 나열에 적합 */
.feature-cards--flat { gap: 0; }
.feature-cards--flat .feature-card { background: transparent; border: none; border-radius: 0; padding: var(--space-section-sm) 0; border-bottom: 1px solid var(--color-border); overflow: visible; }
.feature-cards--flat .feature-card:last-child { border-bottom: none; }

/* 특징·혜택 카드 — 추가 element 클래스 ✂️ */
.feature-card__period { font-size: var(--text-body-s-size); font-weight: var(--text-body-s-weight); line-height: var(--text-body-s-lh); color: var(--color-text-secondary); margin: 0 0 var(--space-xs); }
.feature-card__note { font-size: var(--text-body-s-size); font-weight: var(--text-body-s-weight); line-height: var(--text-body-s-lh); color: var(--color-text-muted); margin: var(--space-xs) 0 0; }

/* 특징·혜택 카드 — 단계형 (텍스트 좌, 이미지 우, 박스 카드) ✂️ */
/* .feature-cards에 feature-cards--steps 추가. feature-card--horizontal 구조 필수 */
/* DOM 순서: feature-card__body(텍스트) 먼저 → 텍스트 좌/이미지 우 자동 배치 */
.feature-cards--steps .feature-card__img { width: 120px; height: 140px; border-radius: var(--radius-8); background: var(--color-bg-section); flex-shrink: 0; margin-top: 0; object-fit: cover; }
.feature-cards--steps .feature-card__title { font-size: var(--text-heading-s-size); font-weight: var(--text-heading-s-weight); line-height: var(--text-heading-s-lh); }


/* 반응형 대응 */

@media (min-width: 640px) {
  .b1 { font-size: 18px; }
  .b2 { font-size: 18px; }
  .b3 { font-size: 18px; }
  .c1 { font-size: var(--text-body-l-size); }

  .inner { margin-left: 12%; margin-right: 12%; padding: 0; }

  /* 플로팅버튼 PC — margin 값은 inner와 동일하게 */
  .btn_f { margin-left: 12%; margin-right: 12%; padding-left: 0; padding-right: 0; }

  /* 기기 분기 이미지_PC */
  #img_pc { display: block; }
  #img_mo { display: none; }

  #notice { padding-bottom: calc(var(--space-floating-clearance) + var(--space-xxxl)); padding-top: calc(var(--space-section-lg) + var(--space-lg)); padding-left: 6%; padding-right: 6%; }
  #notice p { margin-top: var(--space-section-lg); }
  .check-list li { margin-top: 15px; }

  .tab-container.fixed { position: fixed; top: 0; left: 12%; right: 12%; }

}

@media (min-width: 960px) {
  .inner { margin-left: 24%; margin-right: 24%; }
  .btn_f { margin-left: 24%; margin-right: 24%; }
  .tab-container.fixed { position: fixed; top: 0; left: 24%; right: 24%; }
}

@media (min-width: 1200px) {
  .inner { margin-left: 30%; margin-right: 30%; }
  .btn_f { margin-left: 30%; margin-right: 30%; }
  .tab-container.fixed { position: fixed; top: 0; left: 30%; right: 30%; }
}

@media (min-width: 1440px) {
  .inner { margin-left: 34%; margin-right: 34%; }
  .btn_f { margin-left: 34%; margin-right: 34%; }
  .tab-container.fixed { position: fixed; top: 0; left: 34%; right: 34%; }
}


/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/