/* =========================================================
   교과서 여행 지도 — P0 UX 인터랙션 보강 CSS (WP-D)
   담당 범위: 모달 접근성 / 모바일 바텀시트 / 히어로 CTA 위계 /
             이미지 폴백 / 빈 상태 카드
   css/main.css는 다른 작업(WP-C)에서 리팩터 중이므로 이 파일에서만 다룬다.
   ========================================================= */

/* ---------------- 모달 열림 상태: 배경 스크롤 잠금 ---------------- */
body.modal-open { overflow: hidden; }

/* ---------------- 이미지 로드 실패 폴백 (지역색 배경 + 지역명) ---------------- */
.img-fallback {
  width: 100%;
  height: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  padding: 8px;
  border-radius: inherit;
}

/* ---------------- 필터 결과 빈 상태 ---------------- */
.cards-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  font-size: 1rem;
  font-weight: 600;
}

/* ---------------- 히어로 CTA 위계 ----------------
   ① btn-hero-primary: 무료 미션북 받기 (주 CTA)
   ② btn-hero-secondary: 지도로 떠나기 (보조)
   ③ btn-hero-ghost: 사이트 소개 듣기 (텍스트 링크 수준) */
.btn-hero-primary {
  background: var(--accent-500, #f59e0b);
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .35);
}
.btn-hero-secondary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 13px 24px;
}
.btn-hero-ghost {
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 10px 6px;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: .9;
}
.btn-hero-primary:hover { box-shadow: 0 14px 30px rgba(245, 158, 11, .45); }
.btn-hero-secondary:hover { background: rgba(255, 255, 255, .2); }
.btn-hero-ghost:hover { opacity: 1; }

/* ---------------- 모바일 바텀시트 (≤900px) ----------------
   상태 클래스: is-peek(최소 노출) / is-half(반 펼침, 기본) / is-full(전체)
   데스크톱(>900px)에서는 이 미디어쿼리 밖에서 패널을 건드리지 않는다. */
.sheet-handle { display: none; }

@media (max-width: 900px) {
  .region-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 85vh;
    height: auto;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(11, 18, 32, .18);
    overscroll-behavior: contain;
    z-index: 1200;
    overflow-y: auto;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    transform: translateY(calc(100% - 120px));
  }
  .region-panel:not(.open) { display: none; transform: translateY(100%); }
  .region-panel.open.is-peek { transform: translateY(calc(100% - 120px)); }
  .region-panel.open.is-half { transform: translateY(35%); }
  .region-panel.open.is-full { transform: translateY(0); }

  .sheet-handle {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px auto 4px;
    width: 36px;
    height: 4px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(15, 23, 42, .25);
    z-index: 2;
  }
}

/* =========================================================
   P1-A 아이콘 시스템 (WP: 아이콘·홈 IA 재편)
   이모지를 대체하는 인라인 SVG 아이콘 공통 스타일
   ========================================================= */
.ico {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  flex: none;
  display: inline-block;
}
.ico-lg { width: 24px; height: 24px; }
.ico-sm { width: 14px; height: 14px; }
.ico-xl { width: 32px; height: 32px; }

/* 버튼·칩·헤딩 안 아이콘과 텍스트 사이 간격 */
.btn .ico,
.nav-btn .ico,
.mode-btn .ico,
.chip .ico,
h2 .ico,
h3 .ico,
.brand .ico { margin-right: 6px; }

/* 브랜드 로고: 나침반+책 결합 마크 */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark .ico { width: 28px; height: 28px; margin-right: 0; }

/* ---------------- 홈 IA 재편: 지역 둘러보기 접힘 ---------------- */
.region-explore { margin-top: 8px; }
.region-explore > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  padding: 12px 4px;
}
.region-explore > summary::-webkit-details-marker { display: none; }
.region-explore > summary .ico { transition: transform .2s ease; }
.region-explore[open] > summary .ico.chev { transform: rotate(90deg); }

/* ---------------- 오늘의 활동 가로 스크롤 스트립 ---------------- */
.today-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.today-strip > * {
  flex: 0 0 auto;
  min-width: 260px;
  scroll-snap-align: start;
}

/* ---------------- SEO FAQ 접힘(밝은 배경) ---------------- */
.faq-fold { background: transparent; }
.faq-fold summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  padding: 10px 4px;
}
.faq-fold summary::-webkit-details-marker { display: none; }

/* #about .seo-faq 전체를 다크 → 라이트 배경으로 전환(FAQ를 details로 접었을 때 사용).
   기존 .seo-faq 규칙(css/main.css)은 어두운 배경 기준 흰 글자 색을 쓰므로,
   .faq-fold-wrap이 붙으면 전부 밝은 배경/어두운 글자로 재정의한다. */
.seo-faq.faq-fold-wrap { background: var(--surface-0); color: var(--ink-700); }
.seo-faq.faq-fold-wrap h2,
.seo-faq.faq-fold-wrap h3,
.seo-faq.faq-fold-wrap strong { color: var(--ink-900); }
.seo-faq.faq-fold-wrap p { color: var(--ink-700); }
.seo-faq.faq-fold-wrap em { color: var(--accent-600, var(--accent-500)); }
.seo-faq.faq-fold-wrap .seo-faq-note {
  border-top: 1px solid var(--line);
  color: var(--ink-500);
}
.seo-faq.faq-fold-wrap .faq-fold summary { color: var(--ink-900); font-size: var(--fs-md); }