/* =============================================================================
   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;
}

/* ★ 혜택 2 카드 — 부제 라이브 텍스트 + 강의 소개 링크 (2026-08-05 추가)

   카드 2장과 그 안 카피는 전부 flow_content3_body.png(720×490) 에 구워져 있어
   클릭할 DOM 노드가 없다. 이미지 재작업 없이 **원본 픽셀 좌표를 % 로 환산한
   절대배치 오버레이**로 히트영역과 부제 한 줄을 얹는다(오너 확정).

   ▣ 원본 PNG 실측 좌표 (Pillow 픽셀 판독, 720×490)
     혜택2 카드            x 370~719 / y 170~429
                            (배경 #EBD47A 경계 실측 — 369·169·430 은 안티에일리어싱)
     "20만원 상당…" 잉크    x 414~678 / 하단 y 389
     ⇒ 카드 하단 여백 y 390~429 (40px) 안에 부제를 넣는다.

   ▣ % 환산
     left   370/720 = 51.3889%     top    170/490 = 34.6939%
     right  카드 우변 = 이미지 우변 → 0
     bottom (490-430)/490 = 12.2449%
     부제 top  400/490 = 81.6327% (여백 중앙 정렬 — 행높이 19.6px → y 400~419.6,
                                     카드 하단까지 10.4px 여유)
     ⚠ 높이는 height % 가 아니라 top+bottom 으로 잡는다. 컨테이닝 블록 높이가
       콘텐츠 유래일 때 height:% 만 예외 규칙을 타기 때문이다.

   ▣ 폰트는 이미지 축소율과 함께 움직여야 카드 밖으로 넘치지 않는다.
     .st-sec3-inner 의 실콘텐츠 폭(=이미지 폭) 기준 720px 에서 14px 을 기준으로
     구간별로 환산한다. 좌표는 % 라 자동 추종한다.
     line-height · letter-spacing 은 무단위/em 으로 두어 폰트를 따라가게 한다.

   ▣ 색 #313D27 = 페이지 본문 토큰(#stampTourPage 의 color) 그대로다.
     부제 자리의 카드 배경 실측값 #FCF9ED 대비 **10.90:1**,
     ≤767px 에서 노란 배경(#EBD47A) 으로 나와도 **7.79:1** 로 둘 다 4.5:1 을 넘는다.
     ⚠ 위 .st-sec3-note 의 #726E44 를 재사용하지 않은 이유 — 그 색은 노란 배경에서
       3.53:1 로 기준 미달이며(기존 부채), 이 줄은 그 부채를 답습하지 않는다.
       위계는 명도가 아니라 **크기와 * 마커**로 드러낸다. */
.st-sec3-fig { position: relative; }

/* 🚨 오버레이 좌표는 전부 % 이므로 **이 박스의 높이가 이미지 높이와 같다**는 불변식에 기댄다.
   그런데 :39 의 `#stampTourPage img` 는 max-width 만 주고 height 를 건드리지 않아,
   컨테이너가 720px 미만이 되는 구간(≤1023px)에서 높이가 490px 로 남으면 이미지가
   세로로 늘어나고 오버레이가 카드에서 흘러내린다.
   지금은 사이트 전역 responsive 번들의 `img { height:auto }` 가 이를 막아주고 있지만,
   **다른 파일의 규칙에 이 페이지의 정합성을 맡기지 않는다.** 이 파일이 이미
   .st-hero-title img · .st-cta img · .st-slide img · .st-map img 에 같은 선언을 하고 있고,
   혜택 이미지만 빠져 있었다. 렌더 결과는 현행과 동일하다(운영 실측 672×457 로 확인). */
.st-sec3-fig img { width: 100%; height: auto; }

.st-sec3-b2sub {
  position: absolute;
  left: 51.3889%;                      /* 370 / 720 */
  right: 0;
  top: 81.6327%;                       /* 400 / 490 */
  margin: 0;
  padding: 0 2.7778%;                  /* 20 / 720 — 카드 안쪽 여백(% 라 비례 축소) */
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  color: #313D27;
  word-break: keep-all;
}

/* 카드 전체 히트영역. 색이 없는 투명 링크라 보이는 모양은 변하지 않는다.
   DOM 순서상 .st-sec3-b2sub 뒤에 오므로 부제 위를 덮어 글자 위 클릭도 링크로 간다.
   ※ 아래 .st-sec3-note 는 .st-sec3-fig 밖에 있어 이 오버레이가 덮지 않는다. */
.st-sec3-b2link {
  position: absolute;
  left: 51.3889%;                      /* 370 / 720 */
  right: 0;
  top: 34.6939%;                       /* 170 / 490 */
  bottom: 12.2449%;                    /* (490 - 430) / 490 */
  border-radius: 16px;                 /* 카드 모서리 실측 R16 — 포커스 링 모양을 맞춘다 */
}
/* 포커스 인디케이터 — 위 .st-cta · .st-dot 과 동일 패턴(기존 선택자를 건드리지 않고
   같은 규칙을 이 블록에만 따로 둔다). 투명 오버레이라 이게 없으면
   키보드 사용자가 초점 위치를 전혀 알 수 없다. */
#stampTourPage .st-sec3-b2link:focus { outline: 2px solid #6F8F56; outline-offset: 2px; }
#stampTourPage .st-sec3-b2link:focus:not(:focus-visible) { outline: none; }
#stampTourPage .st-sec3-b2link:focus-visible { outline: 2px solid #6F8F56; outline-offset: 2px; }

/* 종료 안내 (오너 확정 (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; }
  /* 이 구간은 이미지 폭이 672px(=720-48) 로 **고정** 축소된다(패딩 24px × 2).
     부제도 같은 배율로 — 14 × 672/720 = 13.07px. */
  .st-sec3-b2sub { font-size: 13.07px; }
}

@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; }

  /* 부제 — 카드 안 오버레이를 **해제**하고 이미지 아래 전폭 1줄로 내린다.
     근거: 이 구간의 이미지 폭은 100vw-32px 라 375px 뷰포트에서 343px → 카드는 167px
     밖에 안 된다. 비례 폰트는 14 × 343/720 = **6.7px** 로 판독 불가이고,
     판독 하한(12px)을 주면 가로로 넘쳐 2줄이 되며(텍스트 약 197px > 카드 167px)
     카드 하단 여백(40px × 0.476 = 19px)을 초과해 카드 밖으로 흘러내린다.
     ⇒ 카드 안에서는 어떤 크기로도 성립하지 않는다.
     링크 히트영역(.st-sec3-b2link)은 카드 그대로 둔다 — 375px 에서도 167×124px 라
     터치 타겟 44px 을 훨씬 넘는다.
     ⚠ top:100% 는 .st-sec3-fig(=이미지) 높이 기준이다. 부제를 계속 absolute 로
       두어야 fig 높이 = 이미지 높이 불변식이 유지되고 링크 좌표가 안 틀어진다
       (흐름 배치로 바꾸면 fig 가 길어져 오버레이가 카드 아래로 밀린다).
       그만큼의 자리는 아래 .st-sec3-note 의 margin-top 으로 확보한다. */
  .st-sec3-b2sub {
    left: 0;
    top: 100%;
    padding: 0;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.28px;
  }
  /* 위 부제 1줄(8px + 22px = 30px)이 들어갈 자리 + 아래 여백 8px = 38px.
     기본값 4px 은 이미지에 구워진 ※ 1행에 붙이려는 값이었다. */
  .st-sec3-note { margin-top: 38px; }
  .st-notice { font-size: 15px; padding: 14px 16px; }
}

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