@charset "utf-8";
/* ==========================================================================
   202609 더블마일팩 (doublemile) — 대한항공카드 9월 프로모션
   PC 기본 → tablet(max-1059) → mobile(max-599)
   ========================================================================== */

:root { font-size: 62.5%; }

/* 기본 폰트 일괄 적용 — 개별 요소에 font-size/line-height 지정 금지, 기본값과 다른 요소만 직접 지정 */
/* 단어 단위 줄바꿈 일괄 적용 — white-space: nowrap으로 줄바꿈 봉쇄 금지 */
.evt-wrap {
  font-size: 1.8rem;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: #051766;
  background-color: #f7f7f7;
}

.evt-wrap h3,
.evt-wrap h4,
.evt-wrap h5,
.evt-wrap h6,
.evt-wrap p {
  margin: 0;
  padding: 0;
}

.evt-wrap ul,
.evt-wrap ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evt-wrap img { display: block; width: 100%; height: auto; }

/* PC/모바일 분기 표시 (기본=PC) */
.evt-wrap .br-mo { display: none; }
.evt-wrap .mo-only { display: none; }

/* --------------------------------------------------------------------------
   HERO (KV — 배경/로고/텍스트 개별 퍼블리싱)
   -------------------------------------------------------------------------- */
.evt-wrap .evt-hero {
  position: relative;
  max-width: 120rem;
  width: 100%;
  margin: 0 auto;
  background-color: #ddf1fb;
}
.evt-hero .evt-hero__hd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem;
}
.evt-hero .evt-hero__logo-kal { width: 18.3rem; height: 2.8rem; }
.evt-hero .evt-hero__logo-hc { width: 14rem; height: 2.8rem; }
.evt-hero .evt-hero__body {
  position: absolute;
  left: 10.3rem;
  top: 13.2rem;
}
.evt-hero .evt-hero__sub { font-size: 4rem; line-height: 1.3; }
.evt-hero .evt-hero__tit { margin-top: 0.8rem; font-size: 7.2rem; line-height: 1.3; font-weight: 400; }

/* --------------------------------------------------------------------------
   CONTAINER (본문 화이트 카드)
   -------------------------------------------------------------------------- */
.evt-wrap .evt-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: 112.4rem;
  width: 100%;
  margin: 4rem auto;
  padding: 8rem 6.4rem;
  background-color: #fff;
  border-radius: 3.2rem;
}

/* --------------------------------------------------------------------------
   SECTION 1 : 더블마일팩이란?
   -------------------------------------------------------------------------- */
.evt-wrap .evt-intro {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
}
.evt-intro .evt-intro__visual { max-width: 30rem; width: 100%; flex-shrink: 0; }
.evt-intro .evt-intro__body { flex: 1; min-width: 0; }
.evt-intro .evt-intro__tit { font-size: 3.6rem; font-weight: 400; }
.evt-intro .evt-intro__desc { margin-top: 0.4rem; }
.evt-intro .evt-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.2rem;
}
.evt-intro .evt-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.evt-intro .evt-checklist__ico { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.evt-intro .evt-checklist__txt { min-width: 0; }

/* --------------------------------------------------------------------------
   SECTION 2 : 구독료 할인 이벤트
   -------------------------------------------------------------------------- */
.evt-wrap .evt-promo {
  display: flex;
  align-items: center;
  padding: 4rem 6.8rem 4rem 5rem;
  background-color: #e6e7ef;
  border-radius: 3.2rem;
}
.evt-promo .evt-promo__hd { max-width: 21.2rem; align-self: flex-start; margin-top: 0.2rem; /* Figma y41.5 — 상단 기준 배치 */ }
.evt-promo .evt-promo__tit { font-size: 3.6rem; font-weight: 400; }
.evt-promo .evt-promo__date { margin-top: 1.6rem; }
/* 티켓 직접 퍼블리싱(신축형) — 텍스트 줄수에 따라 세로 확장 (Image Asset 확장 variant 반영)
   Figma: bg #051766 / stroke 2px dashed [10,6] #EDEDED INSIDE / radius 12 / 우상단 12px 대각 컷+흰 폴드 24 / M 아이콘 96 (우 32·상 32) */
.evt-promo .evt-ticket {
  position: relative;
  max-width: 52rem;
  width: 100%;
  margin-left: auto; /* 시안 우측 기준 정렬(우측 여백 68px = padding-right 6.8rem) */
  flex-shrink: 0;
  min-height: 24rem;
  padding: 5.6rem 14rem 5.6rem 4.8rem; /* 우측은 아이콘 존(392~) 이전까지 텍스트 폭 확보 — 시안 desc 1줄(322px) 유지 */
  color: #ededed;
  background-color: #051766;
  border-radius: 1.2rem;
}
.evt-promo .evt-ticket__border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.evt-promo .evt-ticket__border-rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 1.1rem;
  stroke-width: 2;
  stroke-dasharray: 10 6; /* Figma dashPattern [10,6] */
}
.evt-promo .evt-ticket__notch {
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  width: 2.5rem;
  height: 2.5rem;
  /* 회전 불필요 — export 로컬 좌표가 시안 방향과 일치(8변환 diff 판정: 무회전 2.6 vs 기타 80+) */
}
.evt-promo .evt-ticket__ico {
  position: absolute;
  top: 3.2rem;
  right: 3.2rem;
  width: 9.6rem;
  height: 9.6rem;
}
/* flex 금지 — flex 아이템은 float(M 아이콘)와 상호작용하지 않아 협폭에서 겹침. block 줄박스로 float 자연 회피 */
.evt-promo .evt-ticket__price { overflow-wrap: normal; /* 금액 중간 분리 금지 — 협폭에서 float 아이콘 아래로 통째 하강 */ }
.evt-promo .evt-ticket__before { display: block; text-decoration: line-through; }
.evt-promo .evt-ticket__after { display: block; }
.evt-promo .evt-ticket__after { font-size: 3.6rem; font-weight: 400; }
.evt-promo .evt-ticket__desc { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   SECTION 3 : 더블마일팩 알아보기
   -------------------------------------------------------------------------- */
.evt-wrap .evt-about {
  display: flex;
  padding: 4rem 4.8rem;
  background-color: #fff;
  border: 0.2rem solid #051766; /* Figma stroke solid 2px */
  border-radius: 3.2rem;
}
.evt-about .evt-about__tit { width: 23.2rem; flex-shrink: 0; font-size: 3.6rem; font-weight: 400; }
.evt-about .evt-about__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
  max-width: 66.4rem;
}
.evt-about .evt-about__row { display: flex; align-items: flex-start; }
.evt-about .evt-about__label { width: 7.2rem; flex-shrink: 0; font-weight: 700; }
.evt-about .evt-about__cont {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.evt-about .evt-dash-list { color: #5e5e5e; }
.evt-about .evt-dash-list > li {
  position: relative;
  padding-left: 1.3rem;
}
.evt-about .evt-dash-list > li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
}
.evt-about .evt-about__note { display: block; }

/* --------------------------------------------------------------------------
   SECTION 4 : 더블마일팩 신청 방법
   -------------------------------------------------------------------------- */
.evt-wrap .evt-steps {
  display: flex;
  padding: 3.6rem 4.4rem 4rem 4.6rem;
  background-color: #fff;
  border: 0.2rem solid #051766;
  border-radius: 3.2rem;
}
.evt-steps .evt-steps__tit { width: 23rem; flex-shrink: 0; font-size: 3.6rem; font-weight: 400; }
.evt-steps .evt-steps__list { display: flex; gap: 4rem; flex: 1; min-width: 0; }
.evt-steps .evt-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
  min-width: 0;
  max-width: 31.6rem; /* 시안 316px 상한 — PC 협폭(1060~)에서 유동 축소로 넘침 방지 */
  padding: 3.2rem 3.2rem 4.8rem;
  background-color: #f7f7f7;
  border-radius: 2.4rem;
}
/* 스텝 사이 화살표 (장식) */
.evt-steps .evt-steps__item + .evt-steps__item::before {
  content: '';
  position: absolute;
  left: -3.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  background: url(./img/ico-chevron.svg) no-repeat center / contain;
}
.evt-steps .evt-steps__body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 16rem;
}
.evt-steps .evt-steps__stit { font-weight: 700; }
/* 텍스트 밑줄 강조 — box-shadow inset (02 2.4.4-2) */
.evt-steps .evt-hl {
  box-shadow: inset 0 -0.6rem 0 #57bbeb;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   CTA 버튼 — 04_link_button_guide.md 고정 CSS
   -------------------------------------------------------------------------- */
.btn-wrap {display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; align-items: center; text-align: center; margin: 5rem auto 0; width: 100%;}
.btn-wrap .evtbtn {display: flex; justify-content: center; align-items: center; column-gap: 0.8rem; text-align: center; background: transparent; border-radius: 5rem; border: 2px solid #051766; font-size: 1.8rem; color: #051766; font-weight: 400; min-width: 36rem; padding: 1.2rem 0; height: 5.1rem;}
.btn-wrap .evtbtn.primary {background: #57BBEB; border: 0; line-height: 1.5;}

.btn-wrap .evtbtn:hover,
.btn-wrap .evtbtn:focus {outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #051766;}
.btn-wrap .evtbtn:active {background: #051766; color: #fff;}
.btn-wrap .evtbtn:active::after {filter: brightness(0) invert(1);}
.evt-wrap .evt-link-button__icon {display: inline-block; vertical-align: top; width: 2.4rem; height: 2.4rem; flex-shrink: 0;}

/* 시안 오버라이드 — 버튼 hug 폭(px24 py12), PC/MO 버튼 분리(386 스킴): PC 좌 Default·우 Primary / MO Primary 상단 */
.evt-wrap .evt-btns { flex-direction: row; margin: 0 auto; }
.evt-wrap .evt-btns .evtbtn { min-width: auto; padding: 1.2rem 2.4rem; border-radius: 10rem; /* Figma rounded 100px */ }
.evt-wrap .evt-btns .evtbtn.mo-only { display: none; }

/* --------------------------------------------------------------------------
   SECTION 5 : 확인해 주세요 (유의사항)
   -------------------------------------------------------------------------- */
.evt-wrap .evt-notice {
  padding: 6rem 0;
  background-color: #252525;
  color: #fff;
}
.evt-notice .evt-notice__inner { max-width: 99.4rem; margin: 0 auto; }
.evt-notice .evt-notice__tit { font-size: 1.6rem; font-weight: 700; }
.evt-notice .evt-notice__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.6rem;
  font-size: 1.4rem;
}
.evt-notice .evt-notice__list {
  list-style: disc;
  padding-left: 2rem;
}
.evt-notice .evt-notice__list > li { margin: 0; }
.evt-notice .evt-notice__list > li.-bold { font-weight: 700; }
/* 대시 하위 목록 — 기호 행잉 인덴트 2rem 고정 (02 2.4.2-1) */
.evt-notice .evt-notice__dash {
  list-style: none;
  padding-left: 0; /* 시안: 대시가 불릿 텍스트 시작선(≈2rem)에 정렬 — li 텍스트 위치 그대로 사용 */
}
.evt-notice .evt-notice__dash > li {
  padding-left: 1rem;
  text-indent: -1rem;
}
.evt-notice .evt-notice__dash > li::before { content: '- '; }
.evt-notice .evt-notice__dash > li.-star::before { content: none; } /* 텍스트에 * 포함 */
/* 연회비 li 내부 간격 — Figma: 제목→리스트 4px, Visa군→Mastercard군 8px */
.evt-notice .evt-notice__list > li > b + .evt-notice__dash { margin-top: 0.4rem; }
.evt-notice .evt-notice__dash + .evt-notice__dash { margin-top: 0.8rem; }

/* ==========================================================================
   TABLET (600 ~ 1059) — 모바일 레이아웃 공유, 기본 폰트 1.6rem
   ========================================================================== */
@media screen and (max-width: 1059px) {
  .evt-wrap { font-size: 1.6rem; }
  .evt-wrap .br-pc { display: none; }
  .evt-wrap .br-mo { display: inline; }
  .evt-wrap .pc-only { display: none; }
  .evt-wrap .mo-only { display: inline; }

  /* HERO — 태블릿(768 기준): PC 콤프 0.64 스케일 (img_hero_md 시안 실측) */
  .evt-hero .evt-hero__hd { padding: 2.6rem; }
  .evt-hero .evt-hero__logo-kal { width: 11.7rem; height: 1.8rem; }
  .evt-hero .evt-hero__logo-hc { width: 9rem; height: 1.8rem; }
  .evt-hero .evt-hero__body { left: 6.6rem; top: 8.4rem; }
  .evt-hero .evt-hero__sub { font-size: 2.6rem; }
  .evt-hero .evt-hero__tit { margin-top: 0.5rem; font-size: 4.6rem; }

  .evt-wrap .evt-container {
    gap: 2rem;
    max-width: none;
    margin: 0;
    padding: 4rem 2rem;
    border-radius: 0;
  }

  /* SECTION 1 — 1059 이하 수직 전환 (사용자 정정). 태블릿 24px→28px */
  .evt-wrap .evt-intro {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .evt-intro .evt-intro__visual { max-width: 20rem; }
  .evt-intro .evt-intro__body {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .evt-intro .evt-intro__tit { font-size: 2.8rem; text-align: center; }
  .evt-intro .evt-intro__desc { margin-top: 0.8rem; text-align: center; }
  .evt-intro .evt-checklist {
    margin-top: 1.6rem;
    width: 100%;
  }
  .evt-intro .evt-checklist__item { align-items: flex-start; }

  /* SECTION 2 — 641~1059: 수평 정렬 유지(텍스트 좌·티켓 우), 640 이하 수직 전환(아래 max-640 블록) */
  .evt-wrap .evt-promo {
    padding: 3.2rem 2.4rem;
    border-radius: 1.6rem;
  }
  .evt-promo .evt-promo__hd { margin-top: 0; }
  .evt-promo .evt-promo__tit { font-size: 2.8rem; }
  .evt-promo .evt-promo__date { margin-top: 0.8rem; }
  /* 티켓 MO — Figma: stroke 1.5px [8,4] / radius 8 / 컷 9px·폴드 18 / 아이콘 56 (우 20·상 20) */
  .evt-promo .evt-ticket {
    max-width: 28.5rem;
    min-height: 16rem;
    padding: 2.4rem;
    border-radius: 0.8rem;
  }
  .evt-promo .evt-ticket__border-rect {
    x: 0.75px;
    y: 0.75px;
    width: calc(100% - 1.5px);
    height: calc(100% - 1.5px);
    rx: 0.725rem;
    stroke-width: 1.5;
    stroke-dasharray: 8 4;
  }
  .evt-promo .evt-ticket__notch { width: 1.9rem; height: 1.9rem; }
  /* 아이콘 float 전환 — 협폭(≤341)에서 텍스트가 아이콘을 자연 회피(줄박스 단축/하강)해 겹침 방지, 375 기준 위치 동일(우20·상20) */
  .evt-promo .evt-ticket__ico {
    position: static;
    float: right;
    width: 5.6rem;
    height: 5.6rem;
    margin: -0.4rem -0.4rem 0.8rem 0.8rem;
  }
  .evt-promo .evt-ticket__after { font-size: 2.8rem; }
  .evt-promo .evt-ticket__desc { margin-top: 0.4rem; }

  /* SECTION 3 — 1059 이하 수직 전환 (사용자 정정: about은 기존 1059 기준 유지) */
  .evt-wrap .evt-about {
    flex-direction: column;
    padding: 0;
    border-radius: 1.6rem;
    overflow: hidden;
  }
  /* Figma 자식 좌표는 border-box 기준 → padding = Figma 오프셋 − border 2px */
  .evt-about .evt-about__tit { width: auto; font-size: 2.8rem; padding: 2.2rem 1.8rem 0; }
  .evt-about .evt-about__list {
    gap: 1.6rem;
    max-width: none;
    padding: 2rem 1.8rem 2.2rem;
  }
  .evt-about .evt-about__row { flex-direction: column; gap: 0.4rem; }
  .evt-about .evt-about__label { width: auto; }
  .evt-about .evt-dash-list > li { padding-left: 1.2rem; }
  .evt-about .evt-dash-list > li + li { margin-top: 0.4rem; } /* MO 시안 대시 항목 간 4px (PC 없음) */

  /* SECTION 4 — 801~1059 섹션 수평 유지(타이틀 좌 16rem 보정), 800 이하 수직(아래 max-800 블록) */
  .evt-steps .evt-steps__tit { width: 16rem; font-size: 2.8rem; }
  /* 카드 목록은 600~1059 수평 유지(우향 화살표는 base 규칙), 599 이하 수직 전환 */
  .evt-steps .evt-steps__item {
    flex: 1;
    min-width: 0;
    gap: 0.4rem;
    padding: 2.4rem;
    border-radius: 0.8rem;
  }
  .evt-steps .evt-steps__body { gap: 0.8rem; min-height: 0; }
  /* Figma 바 위치(글리프 하단 겹침) 재현 — 하단 3px는 카드 배경색으로 상쇄해 4px 바를 3px 상향 */
  .evt-steps .evt-hl { box-shadow: inset 0 -0.3rem 0 #f7f7f7, inset 0 -0.7rem 0 #57bbeb; }

  /* CTA 버튼 — 1059 이하 수직 정렬·너비 100% + PC/MO 버튼 교체(386 스킴), 04 고정 MQ */
  .btn-wrap { margin: 4rem auto 0; max-width: 100%; }
  .btn-wrap .evtbtn { font-size: 1.6rem; min-width: auto; width: 100%; height: 4.8rem; }
  .evt-wrap .evt-btns { flex-direction: column; margin: 0 auto; }
  .evt-wrap .evt-btns .evtbtn { width: 100%; }
  .evt-wrap .evt-btns .evtbtn.pc-only { display: none; }
  .evt-wrap .evt-btns .evtbtn.mo-only { display: flex; }

  /* 유의사항 — MO 연회비 제목→리스트 gap 8px (PC 4px) */
  .evt-notice .evt-notice__list > li > b + .evt-notice__dash { margin-top: 0.8rem; }
  .evt-wrap .evt-notice { padding: 3rem 2rem; }
}

/* ==========================================================================
   ~800 — 신청방법 섹션 수직 전환 (800까지 타이틀 좌+카드 우 수평 유지)
   ========================================================================== */
@media screen and (max-width: 800px) {
  .evt-wrap .evt-steps {
    flex-direction: column;
    padding: 0;
    border-radius: 1.6rem;
    overflow: hidden;
  }
  /* Figma 자식 좌표는 border-box 기준 → padding = Figma 오프셋 − border 2px */
  .evt-steps .evt-steps__tit { width: auto; padding: 3rem 2.2rem 0; }
  .evt-steps .evt-steps__list {
    flex: none;
    padding: 2.4rem 2.2rem 2.2rem; /* Figma pt24는 border 미포함 세로 오프셋 유지 */
  }
}

/* ==========================================================================
   ~740 — HERO 텍스트 협폭 보정 (599 이하는 모바일 시안값이 우선 적용)
   ========================================================================== */
@media screen and (max-width: 740px) {
  .evt-hero .evt-hero__body { left: 4rem; top: 7.4rem; }
  .evt-hero .evt-hero__sub { font-size: 2.2rem; }
}

/* ==========================================================================
   ~599 — 수평→수직 전환 (구독료 할인·스텝 카드 목록)
   ========================================================================== */
@media screen and (max-width: 599px) {
  /* SECTION 4 카드 목록 수직 전환 */
  .evt-steps .evt-steps__list { flex-direction: column; gap: 3.2rem; }
  .evt-steps .evt-steps__item { flex: none; width: 100%; }
  .evt-steps .evt-steps__item + .evt-steps__item::before {
    left: 50%;
    top: -2.8rem;
    transform: translateX(-50%) rotate(90deg);
    width: 2.4rem;
    height: 2.4rem;
  }

  /* SECTION 2 수직 전환 */
  .evt-wrap .evt-promo { display: block; padding-bottom: 2.6rem; }
  .evt-promo .evt-ticket { margin-left: 0; margin-top: 2.4rem; }

}

/* ==========================================================================
   MOBILE (~599)
   ========================================================================== */
@media screen and (max-width: 599px) {
  /* 모바일 타이틀 24px 복귀 (태블릿 28px → MO 시안 24px) */
  .evt-intro .evt-intro__tit,
  .evt-promo .evt-promo__tit,
  .evt-about .evt-about__tit,
  .evt-steps .evt-steps__tit,
  .evt-promo .evt-ticket__after { font-size: 2.4rem; }

  .evt-wrap .evt-hero { max-width: none; }
  /* HERO — 모바일(375 시안) */
  .evt-hero .evt-hero__hd { padding: 2rem; }
  .evt-hero .evt-hero__logo-kal { width: 13.1rem; height: 2rem; }
  .evt-hero .evt-hero__logo-hc { width: 10rem; height: 2rem; }
  .evt-hero .evt-hero__body { left: 3.2rem; top: 7.6rem; }
  .evt-hero .evt-hero__sub { font-size: 2.4rem; }
  .evt-hero .evt-hero__tit { margin-top: 0.2rem; font-size: 4rem; }
}