/*
 * 공통 스타일 — 전역 레이아웃(header/footer/main) 전용
 * 파일 구성: tokens.css(디자인 토큰) → common.css(본 파일) → components.css(공통 컴포넌트) → css/pages/{화면}.css(페이지별)
 * 요소 기본값 리셋(box-sizing·margin·padding·list-style 등)은 reset.css 로 분리, 아래 @import 로 전 페이지에 자동 적용
 *   (이 프로젝트는 layout-dialect 미사용 → 각 페이지가 head 에 css 를 하드코딩하므로, 모든 페이지가 로드하는 common.css 에서 @import 하는 것이 링크 누락 없는 유일한 단일 지점)
 * 신규 화면 스타일은 css/pages/ 하위에 kebab-case 로 작성한다 (기존 루트의 페이지 css 는 화면 작업 시 점진 이동)
 */
@import url("reset.css");

body {
  /* 짧은 페이지에서도 푸터가 화면 하단에 붙도록 (sticky footer) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-family-base);
  color: #222;
  line-height: 1.5;
}

/* 페이지 전체 배경을 섹션 그레이(#f3f3f3)로 — body 에 부여 (예: 야외예매·상영회신청) */
body.page-bg-section {
  background-color: var(--color-background-section);
}

.page-main {
  flex: 1;
  /* body가 column flex라 auto 마진이 shrink-to-fit을 유발 — 전폭 유지 */
  width: 100%;
}

/* ── 사이트 헤더 (Figma Header_CRFF 22:677) ─────────────────────
 * PC(1024px↑): 높이 100px · 좌 로고그룹 / 중앙 GNB(fill) / 우 액션
 *   1662px↓ 는 공간 부족 시 로고가 비율 유지하며 축소 (img height:auto — 가로만 눌리는 왜곡 방지)
 * Mobile(1023px↓): 높이 64px · 좌 로고 / 우 검색·햄버거 (메뉴 열림 시 X 토글)
 */
.site-header {
  position: sticky;   /* 상단 고정 (설계서 UT-01-1 "전 서브페이지 최상단 공통 고정") */
  top: 0;
  z-index: 100;   /* 2depth 메가메뉴가 본문 위로 오버레이 */
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-gray-10);   /* 시안 헤더 하단 1px #222 */
}

.site-header-inner {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 var(--spacing-40);
}

/* 로고 그룹 — CRFF 로고 | 구분선 | SCK 로고
 * 좌우 사이드(.site-header-logo / .site-header-actions)를 동일 flex:1 로 두면
 * 공간이 충분할 때(≈1662px↑) GNB 가 전체 폭 정중앙(시안 일치), 부족하면 겹침 없이 자연 밀림 */
.site-header-logo {
  display: flex;
  flex: 1;
  min-width: max-content; /* 로고는 자연 크기 이하로 축소 금지 — 공간 부족 시 우측(actions)이 양보 (2026-09-21: 로고 보호). 넓은 화면 중앙정렬 위해 grow(flex:1)는 유지. ≤1279는 아래 블록에서 min-width:0 재설정 */
  align-items: center;
  gap: var(--spacing-24);
}

/* 공간 부족 시(1024~1661) 로고 비율 유지 축소 — height 속성(36/40) 고정 탓에
 * flex 수축 + img{max-width:100%}(reset.css)가 가로만 찌그러뜨리던 것을 height:auto 로 교정 */
.site-header-logo-crff-pc,
.site-header-logo-sck img {
  height: auto;
}

.site-header-logo-crff {
  display: block;
  line-height: 0;
}

.site-header-logo-crff-mobile {
  display: none;
}

.site-header-logo-divider {
  width: 1px;
  height: 32px;
  background-color: var(--color-border);
}

.site-header-logo-sck {
  display: block;
  line-height: 0;
}
/* SCK 로고 SVG 는 문구가 자산 세로중심보다 약 1.5px 아래(빨간 새 아이콘이 문구보다 아래로 더 뻗어 콘텐츠 중심이 처짐).
 * 박스중앙 배치만으론 GNB 텍스트보다 문구가 내려가 보여, 문구 기준선을 GNB 에 맞춰 광학 보정한다 (CRFF-162). MO 는 이 로고가 숨김이라 무영향 */
.site-header-logo-sck img {
  transform: translateY(-1.5px);
}

/* GNB — 좌우 flex:1 사이드 사이 in-flow 배치.
 * 1662px↑ 에서 전체 폭 정중앙(1920 시안과 일치), 그 이하는 로고를 피해 겹침 없이 밀림 (2026-07-31 승인).
 * 1559px↓ 는 GNB 셀이 먼저 압축돼 공간을 양보하고(아래 "GNB 우선 압축" 블록),
 * 그래도 부족하면 로고가 비율 유지하며 축소 (2026-08-18 승인 — nav 우선 양보 + 왜곡 없는 축소) */
.site-header-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.site-header-menu {
  display: flex;
  gap: var(--spacing-16);
  list-style: none;
}

.site-header-menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;   /* 시안: 아이템 셀 고정 130px (5개 균일·pitch 146=130+16). 82px 는 안쪽 콘텐츠(텍스트+좌우24)일 뿐 셀은 130 고정 (Figma 701:271 metadata) */
  flex-shrink: 0; /* 셀 130 고정 — 공간 부족 시 콘텐츠폭 수축(소개·소식만 좁아짐) 방지, 로고·우측이 양보 (PC 디자인 균일 유지) */
  height: 100px;
  padding: 0 var(--spacing-24);   /* 좌우 24 (시안 px-24). 셀 고정폭+중앙정렬이라 텍스트는 셀 중앙, 긴 "야외 영화제 예매"만 130 살짝 초과 */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;   /* 시안 nowrap — 줄바꿈 방지 (Figma I60:1248;36:48;16:33) */
}

/* 양끝 항목 텍스트 정렬 — 시안(627:3693): 소개(첫)=우측(items-end)·소식(끝)=좌측(items-start), 중간 4개=중앙.
 * 130 셀 안에서 양끝 텍스트를 안쪽으로 붙여 전체 간격을 균형 있게 (중간은 justify-content:center 유지) */
.site-header-menu-item:first-child > .site-header-menu-link {
  justify-content: flex-end;
}
.site-header-menu-item:last-child > .site-header-menu-link {
  justify-content: flex-start;
}

/* ── 2depth 메가메뉴 (PC hover) — GNB hover 시 헤더 아래 전폭 바에 하위 메뉴 노출.
 * 시안 Header_2depth(60:1744) / 동작 eidf.co.kr 참고. MO 는 nav 가 숨겨져 자동 비노출(PC 전용) ── */
/* .site-header-menu-item 은 position:relative 를 두지 않는다 — 그래야 아래 2depth 바가
 * .site-header(전폭·relative) 기준으로 배치돼 EIDF 처럼 메뉴별 전폭 바가 된다. */
.site-header-menu-item:hover > .site-header-menu-link,
.site-header-menu-item:focus-within > .site-header-menu-link {
  color: var(--color-cta);   /* 활성 1depth 빨강 #d73026 */
}
/* 2depth = 메뉴별 전폭 바 (EIDF sub_toggle 방식). 각자 흰 바+링크를 담고 hover 시 0→68px 로 "순수 하강".
 * hover 한 메뉴 바가 active 고정 바 위로 내려온다. padding-left 는 JS(alignSubmenus)가 1depth 텍스트 아래로 맞춘다. */
.site-header-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;   /* padding-left 는 JS 가 각 1depth 아래로 지정 */
  list-style: none;
  white-space: nowrap;
  background-color: var(--color-background);
  border-top: 1px solid var(--color-gray-10);      /* 2depth 위 선 (시안 border-t) */
  border-bottom: 1px solid var(--color-gray-10);
  visibility: hidden;
  transition: height 0.5s ease, visibility 0s linear 0.5s;   /* 닫힐 때 높이 접힌 뒤 숨김 */
  z-index: 1;
}
.site-header-submenu.is-open {
  height: 68px;            /* 순수 하강 0→68 (단순 transition) */
  visibility: visible;
  transition: height 0.5s ease, visibility 0s linear 0s;
}
/* hover 한 비-active 메뉴 바는 active 고정 바 위로 (z 높임) */
.site-header-menu-item:not(.is-active) > .site-header-submenu.is-open {
  z-index: 2;
}
/* 2depth 고정 바(68) 활성 서브페이지 — absolute 바가 본문을 가리지 않도록 본문 하강 (시안 2054:24705: 바 아래 콘텐츠 시작)
 * 1280 미만은 모바일 헤더(바 없음)라 보정 제외 */
@media (min-width: 1280px) {
  body.has-submenu-bar main {
    padding-top: 68px;
  }
}
.site-header-submenu-link {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--spacing-16) 0 0;   /* 시안: 텍스트가 아이템 박스 좌측 끝(선행 패딩 0), 후행 16 → 항목 간 16px */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-20);   /* 시안 #333 */
  text-decoration: none;
  white-space: nowrap;
}
.site-header-submenu-link:hover {
  color: var(--color-cta);
}
/* (구) 공유 전폭 바 — 메뉴별 바로 대체하여 미사용 */
.site-header-submenu-backdrop {
  display: none;
}

/* 현재 페이지 섹션 active (PC 전용) — 1depth CTA색 + 현재 2depth 항목 CTA색.
 * JS(initSiteHeaderActiveNav)가 .is-active 부여. 2depth 바 노출/스왑/재개봉은 JS(initSiteHeaderSubmenuBar)가 제어. */
.site-header-menu-item.is-active > .site-header-menu-link {
  color: var(--color-cta);
}
.site-header-submenu-link.is-active {
  color: var(--color-cta);
}

/* 우측 액션 — 로그인(비로그인 고정) · 검색. 로그인 변형은 상태 연동 일감까지 hidden
 * flex:1 + flex-end = 좌측 로고와 대칭 사이드 (GNB 중앙 정렬의 기준) */
.site-header-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-16);
}

.site-header-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

/* display:flex 가 UA 의 [hidden] 규칙을 덮어쓰지 않도록 명시 (로그인 변형은 상태 연동 전 hidden 고정) */
.site-header-user[hidden] {
  display: none;
}

/* 아이콘 박스 — Figma 아이콘 프레임(shape 를 중앙에 담는 고정 박스) 재현 */
.site-header-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.site-header-icon-box--20 {
  width: 20px;
  height: 20px;
}

/* 로그아웃 pill 은 공통 .button--small (components.css — GeneralButton) 사용.
 * 비로그인 pill 은 '로그인 | 회원가입' 두 링크를 한 pill 에 담는 .site-header-auth (CRFF-229) —
 * .button--tertiary.button--small 톤(흰 배경·gray-10 1px 보더·radius full·h48·14/700) 재현.
 * 내부 패딩·구분선 치수는 시안 캡처 기준 근사값(Figma MCP 미연결) */
.site-header-auth {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  height: 48px;
  padding: 0 var(--spacing-20);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
}

.site-header-auth-link {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;
}

.site-header-auth-link:hover {
  color: var(--color-cta);
}

.site-header-auth-divider {
  flex-shrink: 0;
  width: 1px;
  height: 12px;
  background-color: var(--color-divider);
}

/* MO 메뉴 열림 시 X 왼쪽 '회원가입' — PC 미노출 (≤1279 블록에서 .is-menu-open 일 때만 표시) */
.site-header-join-mobile {
  display: none;
}

/* 검색 버튼 — PC: 48px 원형(검정 배경 · 흰 아이콘) / Mobile: 투명 터치영역 */
.site-header-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
  cursor: pointer;
}

.site-header-search-icon-mobile {
  display: none;
}

/* 햄버거/닫기 토글 · 모바일 메뉴 패널 — PC 에서는 미노출 */
.site-header-menu-toggle {
  display: none;
}

.site-header-mobile-menu {
  display: none;
}

/* ── GNB 우선 압축 (1559px↓) — 로고보다 nav 가 먼저 공간을 양보 ──
 * 로고 압축 시작점이 (뷰포트-794)/2 < 383 ⇒ 1560px 이므로, 그 직전부터
 * GNB 셀을 고정 130 → 콘텐츠 폭(패딩 16)·gap 16→8·폰트 18→16 로 압축 (nav 714→497 실측).
 * 로고 원본 크기(192/142) 유지 구간이 ≈1560 → ≈1343px 까지 연장되고,
 * 그 아래(1024~1342)도 축소 폭이 완화된다 (1024 실측 100/74 — 비율 유지 축소는 상단 height:auto) */
/* GNB 압축 (1559↓) — 로고는 보호(min-width:max-content), 우측(actions)·메뉴가 공간 양보.
 * 메뉴는 콘텐츠 폭으로 압축(6셀 균일 유지는 폭 부족으로 불가 — 로고392+메뉴860+버튼216 > 뷰포트).
 * 2depth 바 정렬은 JS(alignSubmenus)가 padding-left 로 처리 — 전폭(left:0) 유지 */
@media (max-width: 1559px) {
  .site-header-menu {
    gap: var(--spacing-8);
  }

  .site-header-menu-link {
    width: auto;
    padding: 0 var(--spacing-16);
    font-size: 16px;   /* 1depth 18 → 16 (2depth 16 과 동급) */
  }
}

/* CRFF-405 — 1280~1559 헤더 가로 넘침 방지. 로고는 보호(축소 제외), 좌우 여백·간격·GNB/우측 버튼을 압축해 총폭 수용.
 * 우측 버튼(user-name·logout)은 공통 .button--small(min-width 120 + padding 32)이 커서 이 구간에서만 압축. 긴 사용자명은 ellipsis. */
@media (min-width: 1280px) and (max-width: 1559px) {
  .site-header-inner {
    padding: 0 var(--spacing-24);   /* 40 → 24 */
  }

  .site-header-menu-link {
    padding: 0 var(--spacing-12);   /* 16 → 12 (GNB 폭 추가 압축) */
  }

  .site-header-actions,
  .site-header-user {
    gap: var(--spacing-8);          /* 16 → 8 */
  }

  /* components.css(후행 로드)의 .button--small(min-width120·padding32)을 이기려면 2클래스 특이도 필요 */
  .site-header-user .site-header-user-name,
  .site-header-user .site-header-logout {
    min-width: 0;                   /* .button--small min-width 120 해제 */
    padding: 0 var(--spacing-16);   /* .button--small padding 32 → 16 */
  }

  .site-header-user .site-header-user-name {
    max-width: 130px;               /* 긴 사용자명 상한 + ellipsis */
  }

  .site-header-user-name > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 모바일·태블릿 헤더 (≤1279) — 태블릿 시안(627:76267, 1024 프레임)도 모바일형(로고+검색+햄버거) */
@media (max-width: 1279px) {
  .site-header-inner {
    height: 64px;
    padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-16);
  }

  .site-header-logo {
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .site-header-logo-crff-pc,
  .site-header-logo-divider,
  .site-header-logo-sck {
    display: none;
  }

  .site-header-logo-crff-mobile {
    display: block;
  }

  /* 로그인·사용자 영역은 .button(components.css, 뒤에 로드)보다 특이성을 높여 숨김 유지 */
  .site-header-nav,
  .site-header-actions .site-header-auth,
  .site-header-actions .site-header-user {
    display: none;
  }

  .site-header-actions {
    gap: 0;
  }

  /* 메뉴 열림 + 비로그인: X 왼쪽 '회원가입' 텍스트 링크 (UT-01-M 캡처 — 16/700 heading 색, 터치영역 h56,
     X 아이콘과 간격 24 = 링크 pr16 + 토글 pl8) */
  .site-header.is-menu-open .site-header-join-mobile {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 var(--spacing-16);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-heading);
    text-decoration: none;
    white-space: nowrap;
  }

  /* 터치영역 56px 박스 안에 아이콘 좌측 배치 (시안: 검색 pl16 / 메뉴 pl8) */
  .site-header-search {
    width: 56px;
    height: 56px;
    padding-left: var(--spacing-16);
    justify-content: flex-start;
    border-radius: 0;
    background-color: transparent;
  }

  .site-header-search-icon-pc {
    display: none;
  }

  .site-header-search-icon-mobile {
    display: flex;
  }

  .site-header-menu-toggle {
    display: flex;
    align-items: center;
    width: 56px;
    height: 56px;
    padding-left: var(--spacing-8);
    border: none;
    background: none;
    cursor: pointer;
  }

  .site-header-toggle-icon-close {
    display: none;
  }

  /* 메뉴 열림 상태 — 검색 숨김 + 햄버거 → X (Figma MO menu 변형) */
  .site-header.is-menu-open .site-header-search {
    display: none;
  }

  .site-header.is-menu-open .site-header-toggle-icon-menu {
    display: none;
  }

  .site-header.is-menu-open .site-header-toggle-icon-close {
    display: block;
  }

  /* 열림 시 헤더를 뷰포트 상단 고정 — 패널이 fixed 풀스크린이라 스크롤 위치와 무관하게 로고+X 노출 (시안 open 상태는 헤더 하단 보더 없음) */
  .site-header.is-menu-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    border-bottom: none;
  }

  /* ── 모바일 메뉴 패널 (Figma UT-01-M 719:924 / 아코디언 462:1881) — 헤더(64) 아래 풀스크린 오버레이 ── */
  .site-header-mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding: 0 var(--spacing-16) var(--spacing-80);   /* 시안 content pb 80 (627:16074) */
    background-color: var(--color-background);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header-mobile-menu[hidden] {
    display: none;
  }

  /* 로그인 버튼 — bg #d73026·radius16, "로그인" Paperlogy Bold 22 흰색 + 흰 › (로그인 상태는 '홍길동 님' 변형 .site-header-mobile-user 공유) */
  .site-header-mobile-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: 80px;   /* 시안 로그인 프레임 고정 80 (719:929) */
    margin-top: var(--spacing-24);
    padding: var(--spacing-20) var(--spacing-16) var(--spacing-20) var(--spacing-24);
    background-color: var(--color-cta);
    border-radius: var(--radius-medium);
    text-decoration: none;
  }
  .site-header-mobile-login[hidden] {   /* display:flex 가 hidden 을 덮지 않도록 명시 (로그인 상태 변형 토글) */
    display: none;
  }
  .site-header-mobile-login-text {
    font-family: var(--font-family-display);   /* Paperlogy */
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-inverse);
  }
  .site-header-mobile-login-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--color-text-inverse);   /* 흰색 (인라인 픽셀 SVG currentColor) */
    transform: rotate(-90deg);   /* 픽셀 ∨ → › (dot-next) */
  }

  /* 아코디언 메뉴 — 각 항목 h64·padding16, Paperlogy ExtraBold 24 #222 + ∨(28) (신규 시안 627:16074 항목 간 구분선 없음)
   * flex-grow: 남는 세로 공간을 메뉴가 흡수해 SCK 푸터를 하단으로 밀어냄 (시안 menu 437 flex-grow, 627:16074) */
  .site-header-mobile-list {
    flex: 1 0 auto;
    margin-top: var(--spacing-24);
    list-style: none;
  }
  /* 단일 링크(하위 없는 1depth — 오리지널 필름)는 트리거와 동일 룩 */
  .site-header-mobile-single,
  .site-header-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    width: 100%;
    height: 64px;
    padding: var(--spacing-16);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
  }

  .site-header-mobile-single {
    text-decoration: none;
  }
  .site-header-mobile-trigger-text {
    font-family: var(--font-family-display);   /* Paperlogy */
    font-weight: 800;   /* ExtraBold */
    font-size: 24px;
    line-height: 1.35;
    color: var(--color-text-heading);
  }
  .site-header-mobile-trigger-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease;   /* 시안 픽셀 도트 셰브론(∨) img — #222 고정 */
  }
  .site-header-mobile-trigger[aria-expanded="true"] .site-header-mobile-trigger-icon {
    transform: rotate(180deg);   /* ∨ → ∧ (펼침) */
  }

  /* 2depth 펼침 패널 (462:1880) — 2px #222 보더·radius24 박스, 항목 16px Pretendard */
  .site-header-mobile-sub {
    padding-bottom: var(--spacing-8);
  }
  .site-header-mobile-sub[hidden] {
    display: none;
  }
  .site-header-mobile-sub-list {
    list-style: none;
    padding: var(--spacing-16) var(--spacing-24);
    border: 2px solid var(--color-text-heading);
    border-radius: var(--radius-large);   /* 24 */
  }
  .site-header-mobile-sub-link {
    display: block;
    padding: var(--spacing-8) 0;
    font-size: 16px;
    font-weight: 600;   /* Pretendard SemiBold — 기본(비활성) */
    line-height: 1.5;
    letter-spacing: -0.08px;
    color: var(--color-gray-50);   /* #6e6e6e */
    text-decoration: none;
  }
  .site-header-mobile-sub-link.is-active,
  .site-header-mobile-sub-link[aria-current="page"] {
    font-weight: 700;   /* Bold */
    color: var(--color-cta);   /* #d73026 활성 */
  }

  /* 2depth 없는 단일 1depth(오리지널 필름) 현재 페이지 active — 색상만 */
  .site-header-mobile-single.is-active .site-header-mobile-trigger-text {
    color: var(--color-cta);
  }

  /* 하단 세이브더칠드런 대표홈 — bg gray-95·radius16, 로고 + 회색 › (list flex-grow 로 하단 배치, 아래 여백은 패널 pb 80) */
  .site-header-mobile-sck {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-top: var(--spacing-24);
    padding: var(--spacing-16);
    background-color: var(--color-gray-95);   /* 시안 surface #f5f5f5 */
    border-radius: var(--radius-medium);
    text-decoration: none;
  }
  .site-header-mobile-sck-arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-gray-50);   /* 회색 › (인라인 SVG currentColor) */
  }

  /* 로그아웃 (로그인 상태 변형 627:16111 — TextButton "로그아웃" Pretendard Bold 14 #6e6e6e + › 16, 좌패딩 8) */
  .site-header-mobile-logout {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-shrink: 0;
    margin-top: var(--spacing-24);
    padding: 0 var(--spacing-8);
    border: none;
    background: none;
    cursor: pointer;
  }
  .site-header-mobile-logout[hidden] {
    display: none;
  }
  .site-header-mobile-logout-text {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.07px;
    color: var(--color-gray-50);   /* #6e6e6e */
  }
  .site-header-mobile-logout-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-gray-50);   /* 회색 › (인라인 SVG currentColor) */
  }
}

/* 태블릿(768~1279) 헤더 — 로고 좌 + SCK 로고 중앙 + 검색·햄버거 우 (h80) */
@media (min-width: 768px) and (max-width: 1279px) {
  .site-header-inner {
    position: relative;
    height: 80px;
    padding: 0 0 0 var(--spacing-20);
  }
  .site-header-logo-crff-pc { display: block; }
  .site-header-logo-crff-mobile { display: none; }
  /* 세이브더칠드런(SCK) 로고는 태블릿에서 숨김 (≤1279 기본 display:none 유지 — 가운데 재노출 제거) */
  .site-header-search {
    width: 70px;
    height: 70px;
    padding-left: var(--spacing-20);
  }
  .site-header-menu-toggle {
    width: 70px;
    height: 70px;
    padding-left: 10px;
  }
  .site-header-mobile-menu { top: 80px; }
}

/* ── 작품 검색 오버레이 (SE-9000, CRFF-46) ─────────────────────
 * 전 뷰포트 공통: 헤더 아래로 드롭다운(헤더 유지)·딤 없음(바깥 클릭 닫기용 투명 레이어).
 * 패널 top: PC 100 · 태블릿 80 · 모바일 64 (각 헤더 높이 아래) */
.site-search {
  position: fixed;
  inset: 0;
  z-index: 90;   /* 헤더(100) 아래 — 열린 상태에서도 헤더는 위에 유지 */
}
.site-search[hidden] {
  display: none;
}
body.site-search-open {
  overflow: hidden;
}
.site-search-scrim {
  position: absolute;
  inset: 0;
  background-color: transparent;   /* 딤 없음 — 바깥 클릭 닫기용 투명 레이어 */
}
.site-search-panel {
  position: absolute;
  top: 100px;   /* PC 헤더 높이 아래 */
  left: 0;
  right: 0;
  background-color: var(--color-background);
  /* 패널이 header 자식이라 header 자체 border-bottom 을 덮음 → 헤더 아래 선은 패널 border-top 으로(시안 border-t #222). 하단도 경계선 */
  border-top: 1px solid var(--color-gray-10);
  border-bottom: 1px solid var(--color-gray-10);
  padding: var(--spacing-24) var(--spacing-40) var(--spacing-64);   /* pt24 px40 pb64 */
}
.site-search-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.site-search-bar {
  display: flex;
  justify-content: flex-end;   /* 닫기 X 우측 */
}
.site-search-title-mobile {
  display: none;   /* 모바일 전용 */
}
.site-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.site-search-close img {
  display: block;
  width: 40px;
  height: 40px;
}
.site-search-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  width: 550px;
  margin: 0 auto;
}
.site-search-title {
  color: var(--color-text-heading);
  text-align: center;
}
.site-search-field {
  display: flex;
  gap: var(--spacing-8);
}
.site-search-input {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0 var(--spacing-16);
  border: 1px solid var(--color-border-button);   /* #9a9a9a */
  border-radius: var(--radius-medium);   /* 16 */
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-heading);
}
.site-search-input::placeholder {
  color: var(--color-text-secondary);   /* #6e6e6e */
  font-weight: 500;
}
/* 검색어 clear(X) — 브라우저 기본 X 대신 func-close 아이콘 (WSG 42:1289) */
.site-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: var(--color-text-heading);   /* #222 (아이콘 fill) */
  -webkit-mask: url('/images/icon/func-close.svg') no-repeat center / contain;
  mask: url('/images/icon/func-close.svg') no-repeat center / contain;
}

/* 태블릿(768~1279) — PC 와 동일 드롭다운, 패널 위치만 헤더 높이(80) 아래 */
@media (min-width: 768px) and (max-width: 1279px) {
  .site-search-panel { top: 80px; }
}

/* 모바일(≤767) — 헤더(64) 아래 드롭다운(헤더 유지). 닫기 X + 인풋행만(타이틀 생략) */
@media (max-width: 767px) {
  .site-search-panel {
    top: 64px;
    padding: var(--spacing-16);
  }
  .site-search-inner {
    width: auto;
    margin: 0;
  }
  .site-search-title {
    display: none;
  }
  .site-search-close img {
    width: 32px;
    height: 32px;
  }
  .site-search-input {
    height: 52px;
    border-radius: var(--radius-small);   /* 12 */
    font-size: 16px;   /* iOS 자동 줌 방지 15→16 (CRFF-251 A-1) */
  }
  .site-search-submit {
    height: 52px;
    padding: 0 var(--spacing-16);
  }
}

.page-main {
  max-width: var(--layout-content-width);
  margin: 0 auto;
  padding: 2rem var(--layout-margin);
}

/* 모바일 분기 — 브레이크포인트 1023px 고정 리터럴 (design-guide.md 레이아웃 규칙) */
@media (max-width: 1023px) {
  .page-main {
    padding: 1.5rem var(--layout-margin-mobile);
  }
}

/* FAB 노출 페이지(메인 제외) 공통 하단 여백 (Figma 967-11442, 검수 CRFF-201).
   FAB가 fixed 라 콘텐츠↔푸터 사이 흰 여백에 얹히므로, 콘텐츠→FAB(+) 와 FAB(↑)→푸터 간격을
   동시에 맞추려면 콘텐츠→푸터 = [콘텐츠→FAB] + [FAB 높이(토글+간격+탑)] + [FAB→푸터] 로 확보한다.
   PC(≥1024):    80 + 172(80+12+80) + 40 = 292
   태블릿(769~1023): 80 + 104(48+8+48)  + 40 = 224
   모바일(≤768):   40 + 104(48+8+48)  + 24 = 168
   FAB 자체 위치(푸터 위 40/24)는 fab.js footer-lift + --fab-footer-gap 이 담당.
   메인(<main class="main">)은 자체 하단 구성 유지라 제외. */
main:not(.main) {
  padding-bottom: 292px;
}
@media (max-width: 1023px) {
  main:not(.main) {
    padding-bottom: 224px;
  }
}
@media (max-width: 768px) {
  main:not(.main) {
    padding-bottom: 168px;
  }
}

/* ── 사이트 푸터 (Figma footer 57:890) ─────────────────────────
 * PC(1024px↑): 다크(#222) 전폭 · 상단 라운드 40 · 1행 링크+SNS / 2행 로고+사업자정보
 * Mobile(1023px↓): 세로 스택 중앙 정렬
 */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  /* 좌우 84px 는 스페이싱 스케일 외 시안 확정값 — 예외 승인(2026-07-31) */
  padding: var(--spacing-40) 84px var(--spacing-80);
  background-color: var(--color-gray-10);
  border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0;
  color: var(--color-text-inverse);
}

/* 1행 — 링크 메뉴(fill) + SNS */
.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;   /* 768~830 에서 메뉴+SNS 가 한 줄에 안 맞으면 SNS 를 아래 줄로 — 겹침 방지 (CRFF-426). 넓으면 한 줄 유지 */
  row-gap: var(--spacing-16);
  padding: var(--spacing-24) 0;
}

.site-footer-nav {
  flex: 1;
  min-width: 0;
}

.site-footer-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  list-style: none;
}

.site-footer-menu li {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

/* 링크 사이 세로 구분선 — 시안의 divider(1×16) 재현 */
.site-footer-menu li + li::before {
  content: "";
  width: 1px;
  height: 16px;
  background-color: var(--color-border-inverse);
}

.site-footer-menu-link {
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.18px;
  color: var(--color-text-inverse-soft);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer-menu-link--emphasis {
  font-weight: 600;
  color: var(--color-text-inverse);
}

.site-footer-sns {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-24);
  list-style: none;
}

.site-footer-sns-link {
  display: block;
  line-height: 0;
}

/* 2행 — 로고 + 사업자 정보 */
.site-footer-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-40);
}

.site-footer-logo {
  display: flex;
  align-items: center;
  height: 104px;
}

.site-footer-company {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-8);
  font-weight: 400;
}

.site-footer-company-lines p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.64px;
  color: var(--color-text-inverse-soft);
}

/* iOS가 전화번호를 자동 감지해 만드는 tel: 링크 — 시스템 파란색 대신 주변 텍스트 색 상속 (통화 연결 기능은 유지) */
.site-footer a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

.site-footer-company-name {
  color: var(--color-text-inverse);
}

.site-footer-copyright {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.56px;
  color: var(--color-text-inverse-soft);
}

/* 푸터 회사정보 줄바꿈 — 모바일에서만 노출 (전역 fragment라 페이지 .br-mo 와 분리) */
.site-footer-br-mo {
  display: none;
}

@media (max-width: 767px) {
  .site-footer {
    gap: 0;
    padding: var(--spacing-40) var(--spacing-16) var(--spacing-80);
  }

  .site-footer-top {
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-40);
  }

  .site-footer-nav {
    flex: none;
    width: 100%;
  }

  .site-footer-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-16) var(--spacing-24);   /* 줄바꿈 시 행 간격 16·열 간격 24 */
  }
  /* 메뉴가 줄바꿈되면 2번째 줄 첫 항목 앞에 세로 구분선이 고아로 노출됨 — 모바일은 구분선 제거하고 gap 으로만 구분 (CRFF-426) */
  .site-footer-menu li + li::before {
    display: none;
  }

  .site-footer-menu li {
    height: 28px;
  }

  .site-footer-menu-link {
    font-size: 14px;
    letter-spacing: -0.14px;
  }

  .site-footer-info {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
  }

  .site-footer-logo {
    height: 80px;
  }

  /* MO 로고 215.385×40 (PC 280×52 동일 비율 축소) */
  .site-footer-logo img {
    width: auto;
    height: 40px;
  }

  .site-footer-company {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .site-footer-company-lines p {
    font-size: 13px;
    letter-spacing: -0.52px;
  }

  .site-footer-br-mo {
    display: inline;
  }

  .site-footer-copyright {
    font-size: 12px;
    letter-spacing: -0.48px;
  }
}

/* GTM noscript iframe 숨김 (CRFF-22) — 표준 스니펫의 인라인 스타일을 컨벤션(인라인 스타일 금지)에 맞춰 클래스로 분리 */
.gtm-noscript-frame {
  display: none;
  visibility: hidden;
}

/* 메타 픽셀 noscript 폴백 img 숨김 (CRFF-419) — 인라인 style 금지 컨벤션에 맞춰 클래스로 분리 */
.meta-pixel-noscript {
  display: none;
}