/* =============================================================================
   promo-260804.css (N4a) — 스탬프 투어 프로모션 페이지 전용 스타일
   대상 : /Event/2026/2026_0804  (S1~S5 + 지도 + 하단 CTA + 반응형)

   설계 정본 : docs/promo-260804/10_DESIGN.md  §5 반응형 / §6-1 대체텍스트
   디자인    : docs/promo-260804/02_FIGMA_SPEC.md §2 (섹션 레이아웃)

   ▣ 이 파일이 cshtml 인라인 <style> 이 아닌 이유
     cshtml 안에서는 미디어쿼리를 @@media 로 이스케이프해야 하고, 한 글자만 틀려도
     런타임 Razor 컴파일 오류로 운영에서 500 이 난다. 별도 .css 는 Razor 를 타지 않는다.

   ▣ 이미지 경로는 절대경로다
     이 CSS 는 /Asset/css/ 에 있고 이미지는 이벤트 뷰 폴더에 co-location 되어 있어
     상대경로가 성립하지 않는다. (Areas/Main/Views/web.config 의 BlockViewHandler 는
     *.cshtml 만 404 로 막으며 이미지는 정상 서빙된다)
   ============================================================================= */

/* 스크린리더 전용 텍스트 — floating/popup css 에도 동일 정의가 있다(로드 조합이 달라서) */
.st-blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#stampTourPage {
  position: relative;
  overflow-x: hidden;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #313D27;
  background: #FFFFFF;
  -webkit-text-size-adjust: 100%;
}
#stampTourPage img { max-width: 100%; display: block; }
#stampTourPage picture { display: block; }

/* 포커스 인디케이터 — 기존 관례(renewal-components.css:272-274) 재사용.
   시안에 focus 상태가 없어 신규 정의가 필수다(설계 §6-4). */
#stampTourPage .st-cta:focus,
#stampTourPage .st-dot:focus,
#stampTourPage .st-carousel-nav:focus {
  outline: 2px solid #6F8F56;
  outline-offset: 2px;
}
#stampTourPage .st-cta:focus:not(:focus-visible),
#stampTourPage .st-dot:focus:not(:focus-visible),
#stampTourPage .st-carousel-nav:focus:not(:focus-visible) { outline: none; }
#stampTourPage .st-cta:focus-visible,
#stampTourPage .st-dot:focus-visible,
#stampTourPage .st-carousel-nav:focus-visible {
  outline: 2px solid #6F8F56;
  outline-offset: 2px;
}

/* =============================================================================
   S1 히어로 (Figma 44:189 — 1920×1400, padding 100px 0, 배경 BG_pc 1920×1401)

   "나의 탐험 여권 현황" 패널은 배경 이미지에 구워진 **정적 예시**다(오너 확정 #11).
   오버레이 렌더링·진행바 채움·N/6 동적 표시는 전부 범위 밖이다.

   비율 고정 박스(padding-top) + 자식 % 절대배치라 어느 폭에서도 시안 구도가 유지된다.
   ============================================================================= */
.st-hero {
  position: relative;
  width: 100%;
  padding-top: 72.9167%;                /* 1400 / 1920 */
  background-color: #F5F1E1;            /* 배경 이미지 가장자리 실측색 — 이음매 제거 */
  background-image: url('/Areas/Main/Views/Event/2026/2026_0804/images/main_bg_pc.png?v1');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  overflow: hidden;                     /* 배경 1401 vs 섹션 1400 — Figma overflow:clip */
}
.st-hero-title {
  position: absolute;
  left: 50%;
  top: 7.1429%;                         /* padding-top 100 / 1400 */
  width: 28.4896%;                      /* 547 / 1920 */
  transform: translateX(-50%);
}
.st-hero-title img { width: 100%; height: auto; }

/* 하단 CTA 플로팅 (Figma 44:169 — 560×96, radius 24, top 1224, drop-shadow 2겹) */
.st-hero-cta {
  position: absolute;
  left: 50%;
  top: 87.4286%;                        /* 1224 / 1400 */
  width: 29.1667%;                      /* 560 / 1920 */
  /* ⚠ KWCAG 컨트롤 크기(≥44px). 이미지 비율이 560:96 이므로 높이 44px 을 얻으려면
     폭이 최소 44×560/96 = 257px 이어야 한다. 768px 뷰포트에서 29.17% = 224px → 38px 로
     미달이었다. 280px 상한을 두면 높이 48px 가 보장된다. */
  min-width: 280px;
  transform: translateX(-50%);
}
.st-cta {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 24px;
  cursor: pointer;
  filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.08)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
  transition: transform .18s ease;
}
.st-cta img { width: 100%; height: auto; border-radius: 24px; }
.st-cta:hover { transform: translateY(-2px); }
.st-cta.is-disabled { cursor: default; opacity: .45; filter: none; pointer-events: none; }

/* 기간 시작 전 / 종료 후 안내 배너 (설계 §4-6) */
.st-notice {
  margin: 0;
  padding: 18px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.4px;
  text-align: center;
  color: #22291F;
  background: #FFF7D6;
  border-bottom: 2px solid #EBD47A;
}

/* =============================================================================
   S2 Content1 — WHAT'S NEW 캐러셀
   Figma 44:197 — 1920×1217, bg #9FB88C, padding 99px 0, overflow clip.
   슬라이드 720×770 3장, gap 20, 중앙 opacity 1.0 / 좌우 0.2 인 peek 캐러셀.
   ============================================================================= */
.st-sec1 { padding: 99px 0; background: #9FB88C; overflow: hidden; }
/* ⚠ 폭은 **원본 픽셀(587)을 상한**으로 둔다. 설계 §5-2 는 "비율 축소"만 허용하며 확대는 금지다.
   (예전처럼 ≤1023 에서 width:72% 로 두면 1023px 뷰포트에서 736px = 1.25배 업스케일된다) */
.st-sec1-title { width: 587px; max-width: 100%; margin: 0 auto 36px; }

.st-carousel { position: relative; }
.st-carousel-track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.st-slide {
  flex: 0 0 720px;
  width: 720px;
  /* ⚠ 원본 720px 상한. 아래 반응형의 vw 폭이 720 을 넘어가도 확대되지 않는다.
     (이 상한이 없으면 1585px 뷰포트에서 56vw = 887px = 1.25배 업스케일된다 — 1440·1600 은 최빈 해상도다) */
  max-width: 720px;
  opacity: .2;
  transition: opacity .35s ease;
}
.st-slide.is-active { opacity: 1; }
.st-slide img { width: 100%; height: auto; }

/* 좌우 화살표 — 시안엔 없으나 키보드 전용 사용자를 위해 실제 <button> 으로 제공(§6-4) */
.st-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #313D27;
  font-size: 26px;
  line-height: 56px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.st-carousel-nav--prev { left: 24px; }
.st-carousel-nav--next { right: 24px; }
.st-carousel-nav:hover { background: #FFFFFF; }

.st-dots { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.st-dot {
  width: 24px;                          /* 히트박스 24×24 — KWCAG 컨트롤 크기 충족 */
  height: 24px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent url('/Areas/Main/Views/Event/2026/2026_0804/images/indicator_default.svg') no-repeat 50% 50%;
  background-size: 12px 12px;           /* 시안 글리프 12×12 는 유지 */
}
.st-dot.is-active {
  background-image: url('/Areas/Main/Views/Event/2026/2026_0804/images/indicator_active.svg');
}

/* =============================================================================
   S3 Content2 — 이벤트 참여 방법
   Figma 44:264 — 1920×1211, bg #F5F1E1, padding 100px 0 240px.
   하단 240px 은 지도가 겹쳐 올라오는 자리다.
   ============================================================================= */
.st-sec2 { position: relative; padding: 100px 0 240px; background: #F5F1E1; }
.st-sec2-body { width: 800px; max-width: 100%; margin: 0 auto; }

/* -----------------------------------------------------------------------------
   S4 탐험 지도 (Figma 65:12 — 946×288, S3→S5 경계를 가로지름)
   ⚠ 순수 장식이다. 클릭 이동·핫스팟·현위치 표시 없음(설계 §4-3-5 / D20).
   ----------------------------------------------------------------------------- */
.st-map {
  position: absolute;
  left: 50%;
  bottom: -74px;                        /* Content3 쪽으로 내려앉아 경계를 가로지른다 */
  z-index: 2;
  width: 946px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  pointer-events: none;                 /* 장식이므로 아래 요소의 클릭을 가로막지 않는다 */
}
.st-map img { width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .16)); }

/* =============================================================================
   S5 Content3 — 특별한 혜택 (Figma 44:273 — 1920×690, bg #EBD47A)
   ============================================================================= */
.st-sec3 { padding: 100px 0; background: #EBD47A; }
.st-sec3-inner {
  width: 720px;                         /* 이미지 폭과 동일 — 주석 2행의 정렬축을 맞추기 위함 */
  max-width: 100%;
  margin: 0 auto;
}

/* ★ 하단 주석 2행 — 라이브 텍스트 (오너 확정 #12 / 설계 §6-1-2)
   1행은 이미지(55:214)에 구워져 있고 2행만 코드로 얹는다. 위계가 같아 보여야 한다.

   색 #726E44 = flow_content3_body.png 의 주석 글리프 픽셀 실측값.
     투명 원본에서 이 텍스트는 #22291F @ alpha 153/255(60%) 였고,
     #EBD47A 위에 합성하면 정확히 rgb(114,110,68) = #726E44 가 된다 → O20 해소.
   ⚠ 대비비 3.53:1 — 큰 텍스트(≥18pt) 기준 3:1 은 충족하나 모바일 축소 구간은 기준 미만이다.
     위계 일치(오너 요구)를 우선했다.

   크기는 **실제 화면 육안 대조**로 정한다(2026-08-04, 오너 2회 반려 후 확정).
     잉크 폭 역산(19.0px)은 폰트 힌팅·자간 처리 때문에 시각 크기와 어긋나 두 번 빗나갔다.
     ⇒ dev 실렌더에서 20/21/22/23/24px 를 차례로 적용해 이미지 1행과 나란히 비교한 결과를 채택.
   margin-top 은 이미지 하단 여백 3px + 조판 행간 연속성에서 역산한 값이다. */
.st-sec3-note {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.4px;
  text-align: center;
  color: #726E44;
  word-break: keep-all;
}

/* 종료 안내 (오너 확정 (a)안) — periodState 가 CLOSED 일 때만 JS 가 노출한다.
   혜택 안내가 래스터 이미지라 종료 후에도 그대로 보이므로, 그 바로 아래에서 무효임을 알린다.

   위계 설계: 주석 2행과 **패밀리·크기·행간·자간·정렬을 전부 동일**하게 두어 같은 문단으로 읽히되,
     굵기(700)와 색(#22291F 본문 토큰)으로만 구분해 "안내가 아니라 상태 고지"임을 드러낸다.
     #22291F on #EBD47A 대비비 = 10.1:1 (주석 2행의 3.53:1 대비 확실히 두드러진다).
   간격: 주석 2행이 이미지 1행과 한 문단으로 붙는 4px 인 것과 달리, 이 줄은 **별개 진술**이라
     문단 간 간격 12px 을 준다(24px/32px 조판 기준 약 0.4행). */
.st-sec3-closed {
  margin: 12px 0 0;
  font-size: 20px;                     /* 주석 2행과 동일 스케일(실측 역산 20px) */
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.4px;
  text-align: center;
  color: #22291F;
  word-break: keep-all;
}

/* =============================================================================
   반응형 (프로젝트 브레이크포인트 375 / 768 / 1024 / 1920)
   모바일 시안이 없으므로 개발 재량(오너 확정 #9). 게이트는 "가로 스크롤 0".
   ============================================================================= */
@media (max-width: 1919px) {
  .st-slide { flex-basis: 56vw; width: 56vw; }
}

@media (max-width: 1279px) {
  .st-sec1 { padding: 72px 0; }
  .st-sec2 { padding: 72px 0 200px; }
  .st-sec3 { padding: 72px 0; }
  .st-map { bottom: -60px; }
  .st-carousel-nav--prev { left: 12px; }
  .st-carousel-nav--next { right: 12px; }
}

@media (max-width: 1023px) {
  .st-sec2-body,
  .st-sec3-inner { padding: 0 24px; box-sizing: border-box; }
  .st-map { max-width: calc(100% - 48px); bottom: -44px; }
  .st-slide { flex-basis: 62vw; width: 62vw; }
  /* 이 구간은 .st-sec3-inner 가 좌우 24px 패딩을 먹어 이미지가 672px(0.933배)로 줄어든다.
     이미지 안 주석도 같은 비율로 작아지므로 라이브 텍스트도 20 × 0.933 ≈ 18px 로 맞춘다. */
  .st-sec3-note { font-size: 18px; line-height: 26px; letter-spacing: -0.36px; }
  .st-sec3-closed { font-size: 18px; line-height: 26px; letter-spacing: -0.36px; margin-top: 10px; }
}

@media (max-width: 767px) {
  /* 히어로 — BG_mo(800×1401) 로 교체.
     375px 뷰포트의 2.13배라 이 한 장이 사실상 @2x 역할을 한다. */
  .st-hero {
    padding-top: 175.125%;              /* 1401 / 800 */
    background-image: url('/Areas/Main/Views/Event/2026/2026_0804/images/main_bg_mo.png?v1');
  }
  .st-hero-title {
    top: 4.3%;
    width: 68%;                         /* 여권 패널 상단(≈y 655/1401) 위 여백 안에 들어간다 */
  }
  /* 하단 CTA — 절대배치 해제, 히어로 아래 정적 흐름으로 전환 */
  .st-hero-cta {
    position: static;
    width: auto;
    padding: 0 16px 32px;
    background: #F5F1E1;                /* 히어로 배경 가장자리색과 동일 → 이음매 없음 */
    transform: none;
  }
  .st-cta { max-width: 420px; margin: 0 auto; }

  .st-sec1 { padding: 48px 0; }
  .st-sec1-title { max-width: calc(100% - 32px); margin-bottom: 24px; }
  .st-sec2 { padding: 48px 0 40px; }
  .st-sec3 { padding: 48px 0 56px; }
  .st-sec2-body,
  .st-sec3-inner { padding: 0 16px; }

  /* 캐러셀 — peek 제거, 1장 노출 + 스와이프 */
  .st-carousel-track { gap: 12px; }
  .st-slide { flex-basis: calc(100vw - 32px); width: calc(100vw - 32px); opacity: 1; }
  .st-carousel-nav { width: 44px; height: 44px; margin-top: -22px; font-size: 20px; line-height: 44px; }
  .st-carousel-nav--prev { left: 4px; }
  .st-carousel-nav--next { right: 4px; }

  /* 지도 — 절대배치 해제. 겹침 레이아웃은 좁은 폭에서 깨진다.
     장식이므로 흐름 배치로 내려도 기능 손실이 없다. */
  .st-map {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 0;
    transform: none;
    pointer-events: auto;              /* 흐름 배치로 내려오면 가로 스크롤을 받아야 한다 */
  }
  .st-map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .st-map-scroll img { min-width: 560px; }

  .st-sec3-note { font-size: 14px; line-height: 22px; letter-spacing: -0.28px; }
  .st-sec3-closed { font-size: 14px; line-height: 22px; letter-spacing: -0.28px; margin-top: 8px; }
  .st-notice { font-size: 15px; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-carousel-track,
  .st-slide,
  .st-cta { transition: none !important; }
}