/* ━━━━━━━━━━━━━━━ FT (First-Time) Mode Styles ━━━━━━━━━━━━━━━
   가이드 모드 위에 spotlight overlay를 덧입히는 별도 시스템.
   모든 식별자에 ft- prefix. 기존 가이드/자유 모드 스타일과 격리. */

#ft-overlay { position:fixed; inset:0; z-index:300; pointer-events:none; transition:opacity 0.3s; }
#ft-overlay.ft-hidden { display:none; }
/* × 또는 spotlight target click → 이번 step의 ft 전체 hide (dim + tip + spotlight).
   사용자가 모달/sheet 작업 중 노란 테두리도 거슬림. 다음 step에서 자동 재표시. */
/* ×(close) dismiss: dim+tip 만 hide, spotlight 유지 (사용자가 캔버스 확인) */
#ft-overlay.ft-dismissed .ft-dim { display: none !important; }
#ft-overlay.ft-dismissed .ft-tip { display: none !important; }
/* #231: sheet 열림 시 전체 ft-overlay hide (spotlight 포함) */
#ft-overlay.ft-sheet-blocked .ft-dim,
#ft-overlay.ft-sheet-blocked .ft-tip,
#ft-overlay.ft-sheet-blocked .ft-spotlight { display: none !important; }
/* dim 4분할 — spotlight 영역만 hole, 클릭 통과 */
#ft-overlay .ft-dim {
  position:absolute;
  background:rgba(61,42,26,0.40);       /* 디자인 D1: 0.55 → 0.40 + 따뜻한 갈색 톤 (베이지+코랄과 조화, 캔버스 톤 보존) */
  pointer-events:auto;
  transition: top 0.45s cubic-bezier(0.4,0,0.2,1),
              left 0.45s cubic-bezier(0.4,0,0.2,1),
              width 0.45s cubic-bezier(0.4,0,0.2,1),
              height 0.45s cubic-bezier(0.4,0,0.2,1);
}
/* 디자인 P1-3: reduced-motion 대응 */
@media (prefers-reduced-motion: reduce) {
  .ft-spotlight { animation: none !important; }
  #ft-overlay .ft-dim { transition: none !important; }
  .ft-tip { transition: none !important; }
}
.ft-spotlight {
  position:fixed; z-index:2;
  border:2.5px solid #FF6B6B; border-radius:12px;       /* 디자인 D4: 노랑 → 코랄 통일 */
  box-shadow: 0 0 28px rgba(255,107,107,0.7), inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events:none;
  transition: top 0.45s cubic-bezier(0.4,0,0.2,1), left 0.45s cubic-bezier(0.4,0,0.2,1), width 0.45s cubic-bezier(0.4,0,0.2,1), height 0.45s cubic-bezier(0.4,0,0.2,1);
  animation: ft-pulse 1.8s ease-in-out infinite;
}
@keyframes ft-pulse {
  0%,100% { box-shadow: 0 0 24px rgba(255,107,107,0.65), inset 0 0 0 1px rgba(255,255,255,0.4); }
  50%     { box-shadow: 0 0 40px rgba(255,107,107,0.95), inset 0 0 0 1px rgba(255,255,255,0.6); }
}
.ft-tip {
  position:fixed; z-index:3;
  background:#FFFFFF; color:#332F2B;
  padding:10px 14px 10px; border-radius:14px;
  width: min(280px, calc(100vw - 32px));    /* 디자인 P2-2: 240→280 한국어 줄바꿈 완화 */
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  /* 말풍선 본체는 터치를 막지 않음 — 캔버스 위에 떠도 아래 사진 조작/제스처 통과.
     spotlight(캔버스)가 hole 이라 탭이 그대로 캔버스로 감. × 버튼만 auto 로 되살림. */
  pointer-events:none;
  transition: top 0.45s cubic-bezier(0.4,0,0.2,1), left 0.45s cubic-bezier(0.4,0,0.2,1);
}
.ft-tip::before {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
}
.ft-tip.ft-arrow-up::before { top:-8px; border-bottom:8px solid #FFFFFF; }
.ft-tip.ft-arrow-down::before { bottom:-8px; border-top:8px solid #FFFFFF; }
.ft-tip .ft-tip-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.ft-tip .ft-step-tag {
  display:inline-block; background:#FFF0EE; color:#FF6B6B;   /* 디자인 D4: 노랑 → 베이지+코랄 (코랄 통일) */
  font-size:12px; font-weight:800; padding:2px 8px; border-radius:10px;
  letter-spacing:0.3px;
}
.ft-tip .ft-tip-close {
  background:transparent; border:none; color:#BCB4A8;
  width:24px; height:24px; padding:0;
  font-size:18px; font-weight:700; cursor:pointer;
  font-family:inherit; line-height:1;
  pointer-events:auto;   /* 본체는 none 이지만 × 는 눌려야 함 */
}
.ft-tip .ft-tip-close:hover { color:#332F2B; }
.ft-tip .ft-tip-title { font-size:13px; font-weight:800; margin-bottom:3px; line-height:1.3; }
.ft-tip .ft-tip-desc { font-size:11.5px; color:#6B665F; line-height:1.5; margin-bottom:6px; }
.ft-tip .ft-tip-desc strong { color:#FF6B6B; }
.ft-tip .ft-tip-hint {
  font-size:10.5px; color:#B88800; font-weight:700;       /* 디자인 D4: F5B800 → B88800 (약간 약하게, hint 강도 톤다운) */
  background:#FFF8E5; padding:5px 8px; border-radius:8px;
  text-align:center;
}

/* legacy .ft-toggle-bar / .ft-toggle 블록은 chip 통합으로 제거됨 (디자인 P2-6). */

/* chip — 가이드 header 안 inline. ON/OFF 토글 한 자리. ft 모드 활성 시 항상 표시. */
#ft-hint-dock {
  display: none;
  /* 사용성 P0-1: 헤더 안 → 우상단 fixed (헤더 title 가리지 않게) */
  /* #234 fix: AdMob native banner가 WebView 상단을 덮으므로 banner 아래로 띄움 */
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--admob-banner-height, 60px) + 8px);
  right: 12px;
  z-index: 400;                       /* ft-overlay(300)보다 위 */
  background: #FFFFFF;
  border: 1px solid #E0D5C0;
  border-radius: 18px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 800;
  color: #332F2B;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s, border-color 0.2s;
}
#ft-hint-dock::before {
  content: '';
  position: absolute;
  inset: -4px;
}
#ft-hint-dock .ft-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5BC97A;                      /* 기본 ON = 초록 */
  box-shadow: 0 0 0 2px rgba(91,201,122,0.18);
  flex-shrink: 0;
}
/* OFF 상태: 노란 강조로 사용자에게 "켜기 가능" 어필 */
#ft-hint-dock.ft-off {
  background: #FFD15C;
  border-color: #E5A800;
  color: #5a3e00;
  box-shadow: 0 2px 6px rgba(229,168,0,0.3);
}
#ft-hint-dock.ft-off .ft-chip-dot {
  background: #BCB4A8;
  box-shadow: none;
}
/* ft 모드 활성 시 chip 항상 표시 */
body.ft-active #ft-hint-dock { display: inline-flex; }
/* #3/#4: 모달/시트 열림 시 chip + ft 자체 hide (시각 정리) */
body.modal-open #ft-hint-dock { display: none !important; }
body.modal-open #ft-overlay { display: none !important; }
/* chip이 가이드 헤더 우상단을 가리므로 gs-title/gs-sub 자체를 hide — ft tip이 모든 안내 담당 */
body.ft-active #gs-title,
body.ft-active #gs-sub { display: none !important; }
/* #12: step 1 ft-tip의 "1 / 9" step tag 중복 제거 (헤더 progress와 중복) */
body.ft-active .ft-step-tag { display: none; }
.ft-mini-btn { display: none; }  /* legacy */

/* z-index 트릭 안 씀 — stacking context 분리로 무용지물.
   대신 ft-mode.js에서 dim 4분할 좌표를 header 아래 ~ footer 위까지만 설정.
   header/footer 영역은 자연스럽게 dim 없음 = 클릭 가능. */

/* footer flex 사이 빈 공간이 click intercept하는 문제 fix.
   footer 자체 pointer-events:none, 자식 button/span만 auto.
   + button에 명시적 stacking context (z-index) — hit-test 우선 보장. */
body.ft-active #guided-shell > footer {
  pointer-events: none;
}
body.ft-active #guided-shell > footer > * {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
/* header도 동일 (혹시 모를 동일 문제 대비) */
body.ft-active #guided-shell > header {
  pointer-events: none;
}
body.ft-active #guided-shell > header > * {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
/* header 안 inner div의 자식 (홈/chip 등)도 auto */
body.ft-active #guided-shell > header > * > * {
  pointer-events: auto;
}

/* 감사 F3 — 가이드모드 토스트 위치: body.mobile .toast 는 top 78px(배너 아래) 고정인데,
   가이드 헤더의 장식/안내 칩이 정확히 그 자리(≈80~110px)라 토스트가 칩을 덮는다.
   가이드 흐름은 토스트 빈도가 높음(사진/말풍선/스티커 추가·삭제·힌트) → 헤더 아래로 내림.
   #toast id 셀렉터라 body.mobile .toast(!important, 클래스 2개)보다 특이도 우위. */
/* ★2026-09-27: 122px 고정이 새 가이드 헤더(홈·단계·제목·부제)의 부제를 정확히 덮었다.
   셸 상단(배너 높이를 따름) 아래 헤더 블록(~96px)을 지난 자리로 내린다. 이 규칙이 정본 —
   index.html 의 body.mobile.guided-mode .toast 는 특이도에서 져서 효과가 없었다(최종 검수 '거짓'). */
body.guided-mode #toast {
  top: calc(env(safe-area-inset-top) + max(60px, var(--admob-banner-height, 70px) + var(--banner-gap, 10px)) + 96px) !important;
  word-break: keep-all;
  bottom: auto !important;
}
/* ★2026-09-29 (G-UX-03): 위 자리(헤더 바로 아래)는 캔버스의 테마 제목 줄이라 작품 글자를 덮었다.
   app-toast.js 가 하단 패널(#gs-action-area) 바로 위 좌표를 --gs-toast-top 으로 넣는다(없으면 위 규칙). */
body.guided-mode #toast[style*="--gs-toast-top"] {
  top: var(--gs-toast-top) !important;
}
body.guided-mode #toast.show { transform: translateX(-50%) !important; }
/* UX2-04·F-UX-04: 자유 모드 토스트는 액션바 바로 위(app-toast.js 가 좌표를 넣는다) — 헤더 되돌리기 줄을 덮지 않게 */
body.mobile:not(.guided-mode) #toast[style*="--gs-toast-top"] { top: var(--gs-toast-top) !important; bottom: auto !important; }
body.mobile:not(.guided-mode) #toast[style*="--gs-toast-top"].show { transform: translateX(-50%) !important; }

/* ★2026-09-29 (G-UX-07): 44px 터치 — 보이는 크기는 그대로, 히트만 넓힌다.
   [홈] 39×44 → 가로 44 보장(인라인 min-width) + 위아래 확장. 사진 비율 칩(높이 32)은 가로 스크롤 줄이
   세로를 자르므로 줄 안쪽 6px 여백을 주고 같은 만큼 음수 마진으로 되갚은 뒤 ::after 로 44 까지. */
#gs-home::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
#gs-ratio-chips { padding-top: 6px; padding-bottom: 6px; margin-top: -6px; margin-bottom: -6px; }
#gs-ratio-chips .gs-ratio-chip { position: relative; }
#gs-ratio-chips .gs-ratio-chip::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

/* G-FN-09: 가이드 사진 [삭제] 뒤 되돌리기 안내 (app-toast.js toastUndo) */
#undo-snack {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  z-index: 9001; display: none; align-items: center; gap: 12px;
  max-width: calc(100% - 32px); box-sizing: border-box;
  background: #2A2724; color: #FFF9F2; border-radius: 12px;
  padding: 4px 4px 4px 16px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18); word-break: keep-all;
}
#undo-snack.show { display: flex; }
/* N-3: 패널 위에 겹칠 수 있으므로 글자 부분은 아래로 통과, [되돌리기]만 눌린다 */
#undo-snack { pointer-events: none; }
#undo-snack .us-btn { pointer-events: auto; }
#undo-snack[style*="--gs-toast-top"] { top: var(--gs-toast-top); bottom: auto; }
#undo-snack .us-btn {
  flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 0 14px;
  background: transparent; border: none; border-radius: 10px;
  color: #F5B800; font-weight: 800; font-size: 13px; font-family: inherit; cursor: pointer;
}

/* 폴리시 D (Codex 리뷰): 저장 단계는 결과물이 주인공 — 딤을 약하게 해서
   노란 CTA+툴팁+딤이 겹쳐 CTA 가 주인공이 되는 순간을 완화. */
body[data-gs-step="save"] #ft-overlay .ft-dim {
  background: rgba(61, 42, 26, 0.18);
}