/* =============================================================================
   stamp-tour-floating.css (N4c) — 플로팅 탐험 여권 버튼 · N/6 배지 · 토스트

   설계 정본 : docs/promo-260804/10_DESIGN.md §4-2 (플로팅 UI · z-index)
   디자인    : 02_FIGMA_SPEC.md §3-6 (FloatingBtn 110×128, 아이콘 64×82, 라벨 14px)

   ▣ z-index 는 9997 로 고정한다
     실측 티어(renewal-components.css:1077):
       TIUM 챗봇 999999 > 메가메뉴 10000 > 롤링팝업·딤 9999/9998 > 탭바·FAB 9997
     9998 이상으로 올리면 롤링팝업·딤·메가메뉴를 가린다.

   ▣ .rnw-fab-stack 을 수정하지 않는다
     기존 FAB 스택 내부에 항목을 끼워 넣으면 _MobileChatFab.cshtml 과
     renewal-components.css 를 건드려 전 사이트 회귀 위험이 생긴다.
     → 별도 position:fixed 컨테이너로 좌표를 계산해 그 위에 얹는다(설계 D7).

   🚨 스택은 버튼이 **2개**다 (2026-08-04 dev 실측으로 확인)
     _MobileChatFab.cshtml 안에 챗봇 + 빠른상담 2개가 있고, 빠른상담은 기본 hidden 이지만
     _LayoutMain.cshtml:109 가 _QuickConsultSheet.cshtml 을 /Main 전역 include 하므로
     renewal-nav.js 가 시트 존재를 감지해 hidden 을 해제한다 ⇒ 사실상 전 페이지에서 2개.
     또 스택은 ≤767 과 ≥768 **양쪽 미디어쿼리에서 모두 display:flex** 다(PC 에도 뜬다).

     dev 실측(1600×831, 로그인·참여 회원):
       .rnw-fab-stack  height 156 (72 + gap 12 + 72), bottom offset 24  → 화면 하단 24~180 점유
       구 .st-fab      bottom 108, height 136                          → 72px 겹침 (오너 신고와 일치)

   ▣ 좌표는 CSS 상수가 아니라 **JS 실측**이 정본이다
     stamp-tour-core.js 의 layoutFloating() 이 .rnw-fab-stack 의 getBoundingClientRect() 를
     읽어 `여권 bottom = 스택 하단 오프셋 + 스택 높이 + 12` 로 계산해 인라인 style 로 덮어쓴다.
     아래 CSS 값은 **JS 가 실패해도 겹치지 않는 안전 기본값**(버튼 2개 기준)이다.
     상수를 2개분으로 고정하지 않고 실측을 쓰는 이유 — 빠른상담이 hidden 인 페이지에서 빈 공간이
     생기지 않게 하고, 나중에 FAB 가 하나 더 늘어도 자동으로 따라가게 하기 위함.
   ============================================================================= */

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

.st-fab {
  position: fixed;
  right: 24px;
  /* 안전 기본값 = 스택 24 + 버튼72 + gap12 + 버튼72 + gap12 = 192.
     JS 실측이 성공하면 인라인 style 이 이 값을 덮어쓴다. */
  bottom: 192px;
  /* ⚠ 스택과 동률(9997)이면 겹칠 때 문서 순서에 따라 승자가 갈린다.
     한 단계 낮춰 9996 으로 둔다 — 만에 하나 겹치더라도 **기존 사이트 기능(챗봇·빠른상담)이
     프로모션 위젯에 가려지지 않도록** 하는 쪽이 안전하다. 설계 §4-2 티어(<9998) 유지. */
  z-index: 9996;
}
/* 스택이 아예 없거나 display:none 인 페이지 — JS 가 이 클래스를 붙인다.
   (.st-fab 와 특이도가 같으므로 반드시 뒤에 선언해야 이긴다) */
.st-fab.st-fab--nostack { bottom: 24px; }
.st-fab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 110px;
  padding: 12px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: center;
  cursor: pointer;
}
.st-fab-btn:focus { outline: 2px solid #6F8F56; outline-offset: 2px; }
.st-fab-btn:focus:not(:focus-visible) { outline: none; }
.st-fab-btn:focus-visible { outline: 2px solid #6F8F56; outline-offset: 2px; }

.st-fab-icon { position: relative; width: 64px; height: 82px; }
.st-fab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .2));
  transition: transform .18s ease;
}
.st-fab-btn:hover .st-fab-icon img { transform: translateY(-2px); }

.st-fab-label {
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;             /* ⚠ 여권만 -0.28. TIUM·빠른상담은 +0.28 이다 */
  color: #111111;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .8);
}

/* 수량 배지 — 시안에 없는 신규 요소(§9 O23).
   신규 디자인을 최소화하기 위해 pill 토큰(#FFF7D6 / radius 100)을 재사용한다. */
.st-fab-badge {
  position: absolute;
  right: -12px;
  top: -6px;
  min-width: 44px;
  height: 26px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1.5px solid #6F8F56;
  border-radius: 100px;
  background: #FFF7D6;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 23px;
  letter-spacing: -0.28px;
  color: #6F8F56;
  text-align: center;
  white-space: nowrap;
}

/* 스탬프 획득 토스트 — 목적지 도착 시 서버가 찍은 결과를 알린다(낙관적 표시 아님) */
.st-toast {
  position: fixed;
  right: 24px;
  /* 여권 위. 기본값 = 여권 기본 192 + 여권 높이 136 + gap 12 = 340.
     JS(layoutToast())가 여권을 실측해 인라인 style 로 덮어쓰며,
     여권이 재배치될 때마다 layoutFloating() 이 토스트도 함께 다시 계산한다. */
  bottom: 340px;
  z-index: 10003;
  /* 🚨 절대 제거 금지 — 토스트는 알림일 뿐 클릭 대상이 아니다.
     이 한 줄이 없어서 토스트가 여권 FAB 중앙을 덮어 클릭을 먹었다(2026-08-04 P1,
     overlapY 52px · elementFromPoint 가 토스트를 반환). 표시 중에도 클릭은 아래 요소로
     통과해야 하며, JS 는 페이드아웃 후 DOM 에서도 제거한다(이중 방어). */
  pointer-events: none;
  max-width: 320px;
  padding: 14px 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #22291F;
  color: #FFFFFF;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.st-toast.is-open { opacity: 1; transform: translateY(0); }

/* =============================================================================
   반응형
   ============================================================================= */
@media (max-width: 767px) {
  /* ≤767 스택: bottom calc(88 + safe-area) = 탭바 72 + 여백 16. 높이 156(버튼 2개).
     ⇒ 여권 안전 기본값 = 88 + 156 + 12 = 256 (+ safe-area) */
  .st-fab {
    right: 16px;
    bottom: calc(256px + env(safe-area-inset-bottom, 0px));
  }
  /* 스택 없는 페이지 — 탭바(72) + 여백(16)만 피한다 */
  .st-fab.st-fab--nostack {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .st-fab-btn { width: 84px; padding: 8px 0; }
  .st-fab-icon { width: 48px; height: 62px; }
  .st-fab-label { font-size: 12px; line-height: 18px; }
  .st-fab-badge { right: -14px; min-width: 38px; height: 22px; font-size: 12px; line-height: 19px; }
  /* 여권 기본 256 + 여권 높이(모바일 ≈102) + gap 12 = 370 */
  .st-toast {
    right: 16px;
    left: 16px;
    bottom: calc(370px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-toast,
  .st-fab-icon img { transition: none !important; }
}