/*
 * 공통 컴포넌트 스타일 — 버튼·배지·폼 등 화면 간 재사용 UI
 * 규칙: 색상은 tokens.css 의 CSS 변수만 사용, 페이지 한정 스타일은 css/pages/ 로
 * 로드 순서: tokens.css → common.css → components.css (fragments/layout.html)
 * 마크업 fragment 짝: templates/fragments/components.html · 인벤토리: design-guide.md §11 (신규 등재 시 표 갱신 필수)
 * 구성: 단일 파일 + 섹션 주석 구획 (1,500줄 초과 시 분할 재논의 — javascript-frontend-conventions.md)
 */

/* 스크린리더 전용(시각 숨김) — 캐러셀 등에서 페이지 h1 을 1개로 유지할 때 사용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 스킵 네비게이션 — 키보드/스크린리더 사용자가 반복 영역(헤더·GNB) 건너뛰고 본문(#main)으로 (KWCAG 2.4.1 A등급, CRFF-193)
 * 평소엔 화면 밖, 포커스 시 좌상단 노출. 색상값은 디자이너 확정 대기 — 토큰 기반 임시값 */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;   /* 헤더(100)·팝업(1000)보다 위 */
}
.skip-nav:focus {
  left: 0;
  width: auto;
  height: auto;
  padding: 12px 16px;   /* 최소 터치/클릭 높이 44px 확보 */
  background: var(--color-background, #fff);
  color: var(--color-text, #111);
  outline: 2px solid currentColor;
}

/* 2줄 클램프 + 말줄임표 — 긴 텍스트(공백 없는 영문 포함) 오버플로우 방지 (CRFF-211)
 * overflow-wrap:anywhere 로 끊김 없는 문자열도 분절 → 2줄 초과분은 … 처리 */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 표준 line-clamp 병기 금지 — display 를 flow-root 로 계산시켜 3번째 줄 비침 (CRFF-211) */
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── 버튼 (Figma GeneralButton 46:2835 — design-guide §11) ─────────
 * 조합: .button + 위계(--primary CTA레드 / --secondary 블랙 / --tertiary 아웃라인) + 크기(--xlarge~--small)
 * Device PC/MO 변형은 클래스가 아니라 1023px 미디어쿼리로 흡수. <button>·<a> 겸용 (a 비활성은 .is-disabled)
 * 아이콘: .button-icon (currentColor mask — 상태 텍스트 색 자동 추종, 색상별 SVG 자산 불필요)
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button:disabled,
.button.is-disabled {
  cursor: default;
  pointer-events: none;
}

/* 위계 */
.button--primary {
  background-color: var(--color-cta);
  color: var(--color-text-inverse);
}

.button--secondary {
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

.button--tertiary {
  background-color: var(--color-background);
  border: 1px solid var(--color-gray-10);
  color: var(--color-text-heading);
}

/* 상태 — hover: primary·secondary 는 딤 20% 오버레이, tertiary 는 배경 회색 전환 */
.button--primary:hover,
.button--secondary:hover {
  background-image: linear-gradient(var(--color-dim-20), var(--color-dim-20));
}

.button--tertiary:hover {
  background-color: var(--color-background-section);
}

.button--primary:disabled,
.button--primary.is-disabled {
  background-color: var(--color-primary-90);
  color: var(--color-primary-50);
}

.button--secondary:disabled,
.button--secondary.is-disabled {
  background-color: var(--color-background-section);
  color: var(--color-text-caption);
}

.button--tertiary:disabled,
.button--tertiary.is-disabled {
  background-color: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-gray-85);
}

/* 크기 (PC 기본 — MO 는 하단 미디어쿼리) */
.button--xlarge {
  height: 80px;
  min-width: 160px;
  padding: 0 var(--spacing-40);
  font-size: 22px;
  line-height: 1.5;
}

.button--large {
  height: 64px;
  min-width: 135px;
  padding: 0 var(--spacing-32);
  font-size: 18px;
  line-height: 1.33;
}

.button--medium {
  height: 56px;
  min-width: 135px;
  padding: 0 var(--spacing-32);
  font-size: 16px;
  line-height: 1.5;
}

.button--small {
  height: 48px;
  min-width: 120px;
  padding: 0 var(--spacing-32);
  font-size: 14px;
  line-height: 1.5;
}

/* SNS 브랜드 — 카카오/네이버 (로그인 JI-8100). 아이콘은 absolute 좌측 40, 텍스트는 전체 중앙
 * 시안 특이(보고): 카카오 opacity 0.9 는 실수 추정 미적용, 카카오/네이버 gap·패딩 상이는 absolute 배치로 무의미 */
.button--kakao,
.button--naver {
  position: relative;
}

.button--kakao {
  background-color: var(--color-kakao);
  color: var(--color-text-heading);
}

.button--naver {
  background-color: var(--color-naver);
  color: var(--color-text-inverse);
}

.button-brand-icon {
  position: absolute;
  left: var(--spacing-40);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
}

/* 아이콘 슬롯 — XLarge 24px / 그 외 20px, currentColor mask */
.button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--button-icon-mask) no-repeat center / contain;
  mask: var(--button-icon-mask) no-repeat center / contain;
}

.button--xlarge .button-icon {
  width: 24px;
  height: 24px;
}

.button-icon--plus {
  --button-icon-mask: url("../images/common/ico-plus.svg");
}

.button-icon--next {
  --button-icon-mask: url("../images/common/ico-arrow-next.svg");
}

.button-icon--share {
  --button-icon-mask: url("../images/common/ico-share.svg");
}

.button-icon--play {
  --button-icon-mask: url("../images/icon/func-play.svg");
}

.button-icon--minus {
  --button-icon-mask: url("../images/icon/func-minus.svg");
}

/* ── 스텝퍼 (Figma steper·UtilityButton 1137:6515 — 수량 증감 컨트롤) ──
 * 구조: .stepper > button.stepper-btn.stepper-btn--minus + .stepper-value + button.stepper-btn.stepper-btn--plus
 * 40×40 버튼(radius 8) + 값 60폭 중앙정렬. disabled = 회색 배경 + 회색 아이콘.
 * 접근성: 버튼 aria-label(증가/감소), 값은 화면 리더용 aria-live 권장 (사용처에서 부여) */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.stepper-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xsmall);
  background-color: var(--color-background);
  cursor: pointer;
}

.stepper-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--color-text-heading);
  -webkit-mask: var(--stepper-btn-icon) no-repeat center / contain;
  mask: var(--stepper-btn-icon) no-repeat center / contain;
}

.stepper-btn--minus {
  --stepper-btn-icon: url("../images/icon/func-minus.svg");
}

.stepper-btn--plus {
  --stepper-btn-icon: url("../images/icon/func-plus.svg");
}

.stepper-btn:disabled,
.stepper-btn.is-disabled {
  background-color: var(--color-background-section);
  cursor: not-allowed;
}

.stepper-btn:disabled::before,
.stepper-btn.is-disabled::before {
  background-color: var(--color-disabled);   /* 시안 disabled 아이콘 #ccc */
}

.stepper-value {
  min-width: 60px;
  width: 60px;
  padding: 0 var(--spacing-12);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-heading);
}

@media (max-width: 1023px) {
  .button--xlarge {
    height: 64px;
    min-width: 144px;
    padding: 0 var(--spacing-24);
    font-size: 16px;
    line-height: 1.5;
  }

  /* SNS 브랜드 아이콘 — MO 24px·left 24 (PC 32·left 40 대비 축소, 시안 627:31123/31127) */
  .button-brand-icon {
    left: var(--spacing-24);
    width: 24px;
    height: 24px;
  }

  .button--large {
    height: 52px;
    min-width: 124px;
    padding: 0 var(--spacing-24);
    font-size: 15px;
    line-height: 1.5;
  }

  .button--medium {
    height: 48px;
    min-width: 124px;
    padding: 0 var(--spacing-24);
    font-size: 14px;
    line-height: 1.43;
  }

  .button--small {
    height: 44px;
    min-width: 124px;
    padding: 0 var(--spacing-24);
    font-size: 14px;
    line-height: 1.43;
  }
}

/* ── 페이지 헤드라인 — 센터형 페이지 타이틀 (로그인 JI-8100·회원가입 JI-8200 공통 패턴) ──
 * Paperlogy 800 48px, MO 38px(회원가입 모바일 시안 실측 2026-08-04) — 로그인 등은 login-headline 에서 32 */
.page-headline {
  font-family: var(--font-family-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-heading);
  text-align: center;
}

/* ── 페이지 서브텍스트 — 헤드라인 아래 안내문 (JI-8200·8230 공통 패턴) ── */
.page-sub {
  margin-top: var(--spacing-16);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

/* ── 폼 섹션 헤더 — 가입 폼 등 섹션 구분 타이틀 (JI-8230~ 공통) ── */
.form-section-title {
  padding: var(--spacing-16) 0;
  border-bottom: 2px solid var(--color-gray-10);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-heading);
}

/* ── 폼 사이드 버튼 (Figma FormButton — 인풋 옆 사각 버튼: 주소검색 등) ── */
.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 64px;
  min-width: 80px;
  padding: 0 var(--spacing-24);
  border: none;
  border-radius: var(--radius-medium);
  background-color: var(--color-gray-10);
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-inverse);
  cursor: pointer;
}

/* ── 약관 동의 블록 (가입 폼 3종 공통 — JI-8230 실측)
 * 구조: .terms-agree-all(전체동의 강조 행) + .terms-agree-list > .terms-agree-item(+.terms-agree-channels) + .terms-agree-note
 * 행 내 Check↔화살표 gap 10 은 시안 원값. 화살표는 currentColor mask (#222)
 */
.terms-agree-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-20) var(--spacing-16);
  border-radius: var(--radius-small);
  background-color: var(--color-background-section);
}

.terms-agree-all .form-check {
  flex: 1;
  min-width: 0;
}

.terms-agree-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background-color: var(--color-gray-10);
  -webkit-mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
  mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
  cursor: pointer;
}

.terms-agree-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  margin-top: var(--spacing-24);
  padding: 0 var(--spacing-16);
}

.terms-agree-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.terms-agree-item .form-check {
  flex: 1;
  min-width: 0;
}

/* 뱃지+라벨 묶음 (뱃지↔라벨 gap 4) */
.terms-agree-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* 수신채널 하위 체크 — 들여쓰기 40, 라벨 Regular */
.terms-agree-channels {
  display: flex;
  gap: var(--spacing-24);
  margin-top: var(--spacing-16);
  padding-left: var(--spacing-40);
}

.terms-agree-channels .form-check {
  font-weight: 400;
}

.terms-agree-note {
  margin-top: var(--spacing-24);
  padding: 0 var(--spacing-16);
  font-size: 16px;
}

/* ── 상태 안내 블록 — 일러스트+타이틀+설명 센터형 (본인인증 JI-8210·가입완료 JI-8260 공통 패턴) ── */
.page-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  text-align: center;
}

.page-state-visual {
  width: 140px;
  height: 140px;
}

/* 타이틀+설명 묶음 (일러스트와 16, 내부 8) */
.page-state-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.page-state-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-subtitle);
}

.page-state-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* display 변형 — 완료·축하 상태 (가입완료 JI-8260 등록 2026-08-03): 일러스트↔텍스트 12, 타이틀 Paperlogy 32 */
.page-state--display {
  gap: var(--spacing-12);
}

.page-state--display .page-state-title {
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
}

/* 모바일 — 일러스트 120·설명 15·gap 8 (본인인증 700:10163·완료 710:14360 실측 2026-08-04)
 * 완료(display) 전용: 타이틀 Paperlogy 30/lh1.2·타이틀↔설명 12 */
@media (max-width: 1023px) {
  .page-state {
    gap: var(--spacing-8);
  }

  .page-state-visual {
    width: 120px;
    height: 120px;
  }

  .page-state-desc {
    font-size: 15px;
  }

  .page-state--display {
    gap: var(--spacing-8);
  }

  .page-state--display .page-state-title {
    font-size: 30px;
    line-height: 1.2;
  }

  .page-state--display .page-state-text {
    gap: var(--spacing-12);
  }
}

/* ── 라벨 구분선 — 점선+텍스트+점선 (SNS 로그인 등) ──
 * <p class="divider-title">SNS 로그인</p> — 타이포 크기는 사용처에서. gap 10px 는 시안 원값(스케일 외 — 질의) */
.divider-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  color: var(--color-text-heading);
  text-align: center;
}

.divider-title::before,
.divider-title::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--color-dim-20);
}

@media (max-width: 1023px) {
  /* MO 헤드라인 기본 = 회원가입 38(모바일 시안 700:10689 실측 2026-08-04). 로그인 등 긴 문장은 화면 CSS에서 축소(login-headline 32) */
  .page-headline {
    font-size: 38px;
  }

  .page-sub {
    font-size: 15px;
  }
}

/* ── 텍스트 버튼 (Figma TextButton 46:4385 — 로그인 링크행 등) ──────
 * <a>/<button> 겸용 텍스트형 링크. 행 구분선은 사용처에서 .text-button-divider */
.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Bold 변형 — Body2/Bold 18/1.33 (기존가입안내 JI-8270 등록 2026-08-03) */
.text-button--bold {
  font-weight: 700;
  line-height: 1.33;
}

/* 밑줄 변형 — 보조 안내 링크(비밀번호 재설정 안내·웹 회원 탈퇴 등, Figma TextButton 375:613 밑줄형).
 * 14/보조색 + 하단선(line-height 박스 + 2px gap ≈ offset 6). 사용처는 위치만 지정. */
.text-button--underline {
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* 우측 화살표 20 — mask + currentColor (상태색 추종) */
.text-button-arrow {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
  -webkit-mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
}

.text-button-divider {
  width: 1px;
  height: 20px;
  background-color: var(--color-dim-20);
}

/* ── 탭 (Figma Tab 60:143 — design-guide §11) ─────────────────────
 * 형태 2종: .tab--bar(large — PC 필터 바 / MO 언더라인) · .tab--chip(small — 칩)
 * PC↔MO 는 1023px 분기에서 자동 전환 (bar 형은 비주얼 구조 자체가 바뀜 — 시안 정의)
 * 마크업: SSR 필터 = <a> + aria-current(기본) / JS 패널 전환 = <button> + .is-active 겸용
 *   <nav class="tab tab--bar" aria-label="…"><ul class="tab-list"><li><a class="tab-link" aria-current="page">…
 * MO 는 가로 스크롤 + 엣지 그라디언트(CSS 오버레이, JS 불요)
 */
.tab {
  position: relative;
}

.tab-list {
  display: flex;
  list-style: none;
}

.tab-list li {
  display: flex;
}

.tab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-family: var(--font-family-base);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

/* bar 형 (PC) — 회색 바탕 바, 선택 항목 검정 필 */
.tab--bar .tab-list {
  width: 100%;
  padding: var(--spacing-4);
  background-color: var(--color-background-section);
  border-radius: var(--radius-medium);
}

.tab--bar .tab-list li {
  flex: 1;
  min-width: 0;
}

.tab--bar .tab-link {
  flex: 1;
  height: 64px;
  min-width: 144px;
  padding: 0 var(--spacing-16);
  border-radius: var(--radius-medium);
  font-size: 18px;
  line-height: 1.33;
  color: var(--color-text-body);
}

.tab--bar .tab-link[aria-current],
.tab--bar .tab-link.is-active {
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

/* chip 형 (PC) — 아웃라인 칩, 선택 시 2px 검정 보더 */
.tab--chip .tab-list {
  gap: var(--spacing-8);
}

.tab--chip .tab-link {
  height: 52px;
  min-width: 144px;
  padding: 0 var(--spacing-24);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-button);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.tab--chip .tab-link[aria-current],
.tab--chip .tab-link.is-active {
  border: 2px solid var(--color-gray-10);
  color: var(--color-text-heading);
}

/* segment 형 (Figma tab_large 77:2865 / tab_MO 77:2922 — CRFF-51 공통 승격)
 * PC 회색 바탕 세그먼트 바(h72·필 16) ↔ MO 등분 채움 칩(pill·2줄 허용 lh1.3).
 * 기존 community-tab(화면 스코프)과 동일 시안 계열 — 치환은 후속 */
.tab--segment .tab-list {
  width: 100%;
  padding: var(--spacing-4);
  background-color: var(--color-background-section);
  border-radius: var(--radius-medium);
}

.tab--segment .tab-list li {
  flex: 1;
  min-width: 144px;
}

.tab--segment .tab-link {
  flex: 1;
  height: 72px;
  padding: var(--spacing-6) var(--spacing-16);
  border-radius: var(--radius-medium);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.tab--segment .tab-link[aria-current],
.tab--segment .tab-link.is-active {
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

@media (max-width: 1023px) {
  /* 공통 — 가로 스크롤 (스크롤바 숨김) + 엣지 그라디언트 */
  .tab .tab-list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab .tab-list::-webkit-scrollbar {
    display: none;
  }

  .tab::before,
  .tab::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
  }

  .tab::before {
    left: 0;
    background: linear-gradient(to right, var(--color-background), transparent);
  }

  .tab::after {
    right: 0;
    background: linear-gradient(to left, var(--color-background), transparent);
  }

  /* bar 형 → 언더라인형으로 구조 전환 (시안 MO large) */
  .tab--bar {
    border-bottom: 1px solid var(--color-border);
  }

  .tab--bar .tab-list {
    gap: var(--spacing-16);
    padding: 0 var(--spacing-16);
    background: none;
    border-radius: 0;
    margin-bottom: -1px;   /* 아이템 밑선이 컨테이너 구분선을 덮도록 */
  }

  .tab--bar .tab-list li {
    flex: none;
  }

  .tab--bar .tab-link {
    flex: none;
    align-items: flex-end;
    height: 56px;
    min-width: 0;
    padding: 0 0 var(--spacing-20);
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-button);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .tab--bar .tab-link[aria-current],
  .tab--bar .tab-link.is-active {
    background: none;
    border-bottom: 2px solid var(--color-gray-10);
    color: var(--color-text-heading);
  }

  /* chip 형 (MO) — 채움 칩 */
  .tab--chip .tab-list {
    gap: var(--spacing-6);
    padding: var(--spacing-8) var(--spacing-16);
  }

  .tab--chip .tab-link {
    height: 44px;
    min-width: 72px;
    padding: 0 var(--spacing-16);
    border: none;
    background-color: var(--color-background-section);
    font-size: 14px;
    line-height: 1.43;
    color: var(--color-text-body);
  }

  .tab--chip .tab-link[aria-current],
  .tab--chip .tab-link.is-active {
    border: none;
    background-color: var(--color-gray-10);
    color: var(--color-text-inverse);
  }

  /* 세그먼트 탭은 태블릿까지 균등 세그먼트 유지 → 칩 전환은 아래 ≤767 블록에서만 */
}

/* 세그먼트 탭 — 태블릿(768~1023)은 시안 tab_large(균등 세그먼트) 유지: 공통 스크롤/엣지 그라디언트 무효화 */
@media (min-width: 768px) and (max-width: 1023px) {
  .tab--segment .tab-list {
    overflow-x: visible;
  }
  .tab--segment::before,
  .tab--segment::after {
    content: none;
  }
}

/* 세그먼트 탭 — 모바일(≤767)만 tab_MO(등분 채움 칩)로 전환 (시안 tab_MO: flex fill + 2줄 lh1.3)
 * 활성 칩(nowrap)은 1줄 폭 확보(hug), 비활성 칩이 남은 폭을 나누며 2줄로 양보 (시안 배치) */
@media (max-width: 767px) {
  .tab--segment .tab-list {
    gap: var(--spacing-8);
    padding: 0 var(--spacing-16);
    background: none;
    border-radius: 0;
  }

  .tab--segment .tab-list li {
    flex: 1 1 0;
    min-width: 0;
  }

  .tab--segment .tab-list li:has(> .tab-link[aria-current]),
  .tab--segment .tab-list li:has(> .tab-link.is-active) {
    flex: 0 0 auto;
  }

  .tab--segment .tab-link {
    height: 52px;
    padding: var(--spacing-8) var(--spacing-20);
    border: 1px solid var(--color-border-button);
    border-radius: var(--radius-full);
    background-color: var(--color-background-section);
    font-size: 14px;
    line-height: 1.3; /* 시안: 좁은 칩 2줄 줄바꿈 허용 */
    white-space: normal;
    word-break: keep-all; /* 시안 고정 개행과 동일하게 단어(공백) 단위 줄바꿈 — 글자 중간 분리 방지 */
  }

  .tab--segment .tab-link[aria-current],
  .tab--segment .tab-link.is-active {
    border-color: var(--color-gray-10);
    white-space: nowrap; /* 시안: 활성 칩은 1줄 고정 */
  }
}

/* ── 모달/팝업 (Figma Popup 46:5270 — design-guide §11) ─────────
 * 구조: .modal-overlay(딤·중앙 배치) > .modal(컨테이너) > .modal-header / .modal-body(스크롤) / .modal-actions
 * 폭: 기본 360 + --480/--520/--880 (PC 스펙 4단계) — MO(1023px↓)는 전부 full(좌우 16) · max-h 506
 * Alert: .modal--alert (헤더 없음, 타이틀+메시지+버튼 1~2) — 버튼은 .button--small 그대로
 * 동작: js/components/modal.js — data-modal-open="#id" / data-modal-close, ESC·딤 클릭 닫기
 * 접근성: .modal 에 role="dialog" aria-modal="true" aria-labelledby + tabindex="-1"
 * ⚠️ 레거시 .crff-modal-overlay(member.css)와 별개 — member 화면 리뉴얼 시 본 컴포넌트로 치환
 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-16);
  background-color: var(--color-dim-modal);
}

.modal-overlay.is-open {
  display: flex;
}

/* 모달 열림 동안 배경 페이지 스크롤 잠금 (modal.js 가 body 에 토글) */
body.is-modal-open {
  overflow: hidden;
}

.modal {
  display: flex;
  flex-direction: column;
  outline: none;   /* 프로그램적 포커스(tabindex=-1) 컨테이너 링 제거 — 내부 포커서블은 링 유지 */
  width: 360px;
  max-width: 100%;
  min-height: 180px;
  max-height: 840px;
  overflow: hidden;
  background-color: var(--color-background);
  border-radius: var(--radius-large);
}

.modal--480 {
  width: 480px;
}

.modal--520 {
  width: 520px;
}

.modal--880 {
  width: 880px;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-16) var(--spacing-16) var(--spacing-24);
}

.modal-title {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;   /* 타이틀 없는 헤더(이미지 팝업 등)에서도 우측 고정 */
  border: none;
  background: none;
  cursor: pointer;
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--spacing-24);
}

.modal-body:last-child {
  padding-bottom: var(--spacing-32);
}

/* 본문 콘텐츠 헬퍼 — 시안 반복 패턴 (타이틀·설명·안내 카드) */
.modal-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: center;
}

.modal-desc {
  margin-top: var(--spacing-16);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

/* 오류 안내 변형 — text/system/error (가입 실패 JI-8240-P2 등록 2026-08-03) */
.modal-desc--error {
  color: var(--color-error-text);
}

/* 팝업 내 안내 카드 (가입 실패 JI-8240-P2 등록 2026-08-03) */
.modal-card {
  margin-top: var(--spacing-12);
  padding: var(--spacing-16);
  border-radius: var(--radius-small);
  background-color: var(--color-background-section);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  text-align: center;
}

.modal-note {
  margin-top: var(--spacing-24);
  padding: var(--spacing-24);
  background-color: var(--color-background-section);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  color: var(--color-text-secondary);
}

.modal-note p {
  display: flex;
  gap: var(--spacing-4);
}

/* 불릿 도트 3px — 첫 줄 중앙 높이 정렬 */
.modal-note p::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-secondary);
}

/* 버튼 영역 — 일반: 본문과 48 간격 / --fixed: 스크롤 본문 위 고정 + 상단 그라디언트 */
.modal-actions {
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-48) var(--spacing-24) var(--spacing-32);
}

.modal-actions--fixed {
  position: relative;
  padding: var(--spacing-16);
  padding-bottom: var(--spacing-24);
  background-color: var(--color-background);
}

.modal-actions--fixed::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to top, var(--color-background), transparent);
  pointer-events: none;
}

/* 팝업 버튼 치수 — 시안: PC Medium(56) / MO Large(52) 교차 조합이라 모달 스코프에서 강제 */
.modal-actions .button {
  flex: 1;
  min-width: 0;
  height: 56px;
  font-size: 16px;
}

/* 세로 스택 변형 — SNS 로그인 유도 팝업 (JI-8240-P1 등록 2026-08-03) */
.modal-actions--stack {
  flex-direction: column;
}

.modal-actions--stack .button {
  flex: none;
  width: 100%;
}

/* 팝업 내 브랜드 버튼 아이콘 — 24 / left 32 (JI-8240-P1, 페이지 XLarge 는 32 / left 40) */
.modal-actions .button-brand-icon {
  left: var(--spacing-32);
  width: 24px;
  height: 24px;
}

/* Alert — 헤더 없는 소형 알림 (PC 320·min160 / MO min140, 스펙 텍스트 280 은 데모 실물 320 과 불일치 — 실물 채택) */
.modal--alert {
  width: 320px;
  min-height: 160px;
  padding: var(--spacing-40) var(--spacing-24) var(--spacing-24);
  gap: var(--spacing-32);
}

.modal-alert-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: center;
  word-break: keep-all; /* 공통 알림 문구(crffModal.alert/confirm)가 320px 카드에서 글자 중간 분리 없이 단어 단위로 줄바꿈 */
}

.modal-alert-message {
  margin-top: var(--spacing-8);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
}

.modal--alert .modal-body {
  flex: 1;
  padding: 0;
}

.modal--alert .modal-actions {
  padding: 0;
}

.modal--alert .modal-actions .button {
  height: 48px;
  font-size: 14px;
}

/* 공통 알림·확인 팝업(modal.js crffModal.alert/confirm) — alert 모드에서 취소 버튼 숨김.
   .button 의 display:inline-flex 가 UA 의 [hidden] 규칙을 덮으므로 명시 (common.css .site-header-user[hidden] 과 동일 사유) */
.modal--alert .modal-actions .button[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .modal,
  .modal--480,
  .modal--520,
  .modal--880 {
    width: 100%;
    max-height: 506px;
  }

  .modal-header {
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-24);
    min-height: 72px;
  }

  .modal-title {
    font-size: 18px;
    line-height: 1.2;
  }

  .modal-body {
    padding-top: var(--spacing-12);
  }

  .modal-desc {
    font-size: 15px;
  }

  .modal-actions .button {
    height: 52px;
    font-size: 15px;
  }

  .modal--alert {
    width: 320px;
    min-height: 140px;
    gap: var(--spacing-24);
  }

  .modal-alert-title {
    font-size: 18px;
    line-height: 1.2;
  }

  .modal--alert .modal-actions .button {
    height: 44px;
    font-size: 14px;
  }
}

/* ── 바텀시트 (Figma Popup 46:5270 · Bottom Sheet 보드) ─────────────
 * modal 확장: <div class="modal-overlay modal-overlay--sheet"><div class="modal modal--sheet">…
 * 헤더/바디/액션·modal.js(data-modal-open/close) 전부 재사용. 옵션 리스트형은 .modal-sheet-option
 * Home indicator(iOS 목업)는 구현 제외. 시안 본문↔버튼 gap 32(일반)/24(고정) 불일치 — 일반 32 채택
 */
.modal-overlay--sheet {
  align-items: flex-end;
  padding: 0;
}

.modal--sheet {
  width: 100%;
  max-width: none;
  min-height: 200px;
  max-height: 600px;
  border-radius: var(--radius-large) var(--radius-large) 0 0;
}

/* 시트 헤더는 디바이스 무관 MO 팝업 헤더 스펙 (pl24·py8·타이틀 18/1.2) */
.modal--sheet .modal-header {
  min-height: 72px;
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-24);
}

.modal--sheet .modal-title {
  font-size: 18px;
  line-height: 1.2;
}

.modal--sheet .modal-body {
  padding: 0 var(--spacing-16);
}

/* 옵션 리스트형 — 행이 시트 좌우 끝까지 (body 패딩 제거) */
.modal-body.modal-body--flush {
  padding: 0;
}

.modal--sheet .modal-actions {
  padding: var(--spacing-32) var(--spacing-16) var(--spacing-24);
}

.modal--sheet .modal-actions--fixed {
  padding: var(--spacing-16);
  padding-bottom: var(--spacing-24);
}

.modal--sheet .modal-actions .button {
  height: 52px;
  font-size: 14px;
  line-height: 1.43;
}

.modal-sheet-option {
  display: flex;
  width: 100%;
  padding: var(--spacing-16);
  border: none;
  background: none;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-text-body);
  text-align: left;
  cursor: pointer;
}

.modal-sheet-option:hover,
.modal-sheet-option[aria-selected="true"] {
  background-color: var(--color-background-section);
}

.modal-sheet-option[aria-selected="true"] {
  font-weight: 600;
  color: var(--color-text-heading);
}

/* ── 반응형 시트 — PC 중앙 모달 / MO 바텀시트 ──────────────────────────
 * PC/MO 형태가 다른 팝업(비번변경 MY-7100 등)용. PC 는 기본 .modal(폭 클래스 조합), MO(1023px↓)만 바텀시트로 전환.
 * MO 스펙: Width full · Height Min 200 / Max 600 (초과 시 .modal-body 스크롤, 헤더·액션 고정)
 * <div class="modal-overlay modal-overlay--sheet-mo"><div class="modal modal--sheet-mo">…
 */
@media (max-width: 1023px) {
  .modal-overlay--sheet-mo {
    align-items: flex-end;
    padding: 0;
  }
  .modal--sheet-mo {
    width: 100%;
    max-width: none;
    min-height: 200px;
    max-height: 600px;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
  }
  .modal--sheet-mo .modal-actions {
    padding: var(--spacing-32) var(--spacing-16) var(--spacing-24);
  }
}

/* ── 페이지 하단 액션 바 (Figma MO_fullPopup 패턴) ──────────────────
 * 전체화면(약관·동의 등) 하단 버튼 영역 — 모달 아님, 페이지 레이아웃에 조립
 * 시안 헤더 blur 효과(backdrop 10px)는 전역 헤더 변경이라 미적용 (디자이너 협의 대상)
 */
.page-actions {
  display: flex;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-16);
}

.page-actions--vertical {
  flex-direction: column;
  gap: var(--spacing-12);
}

.page-actions .button {
  flex: 1;
  min-width: 0;
  height: 52px;
  font-size: 14px;
  line-height: 1.43;
}

.page-actions--vertical .button {
  flex: none;
  width: 100%;
}

/* ── 캐러셀 팝업 (Figma 다중/이미지 다중 팝업) ──────────────────────
 * Swiper(js/library/swiper-bundle.min.js + css/library) 필요 — 사용 화면이 로드·init 한다:
 *   <div class="modal-overlay"><div class="modal-carousel(--image)">
 *     <div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><div class="modal">…
 *     </div><button class="modal-carousel-nav modal-carousel-nav--prev">…(--image 만)
 *     <div class="swiper-pagination"></div></div>
 * 도트 비활성 색 --color-dim-white-20 (딤 배경 위 전제)
 */
.modal-carousel {
  position: relative;
  width: 360px;
  max-width: 100%;
}

.modal-carousel .modal {
  width: 100%;
}

.modal-carousel .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
}

.modal-carousel .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-white-20);
  opacity: 1;
  transition: width 0.15s;
}

.modal-carousel .swiper-pagination-bullet-active {
  width: 32px;
  background-color: var(--color-background);
}

/* 이미지형 — 카드 520, 헤더는 투명 오버레이, 좌우 유리 화살표 */
.modal-carousel--image {
  width: 520px;
}

.modal-carousel--image .modal {
  position: relative;
  min-height: 0;
}

.modal-carousel--image .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: none;
}

.modal-carousel--image .modal-slide-image {
  display: block;
  width: 100%;
  height: 580px;
  object-fit: cover;
}

.modal-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius-full);   /* 시안 699.3px → full 정규화 */
  background-color: var(--color-dim-white-20);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.modal-carousel-nav--prev {
  left: var(--spacing-24);
}

.modal-carousel-nav--next {
  right: var(--spacing-24);   /* 시안 우측 14 는 좌 24 와 비대칭 — 24 대칭 채택 (보고) */
}

.modal-carousel-nav--prev img {
  transform: scaleX(-1);
}

/* ── 공지 팝업 (UT-03 743:53153) — 이미지 캐러셀 + 오늘그만보기/닫기 + 자동롤링·정지/재생 ──
 * 기존 .modal-carousel 상속. 사이트 진입 시 자동 노출(쿠키 미보유 시), 동작은 js/components/notice-popup.js.
 * <div class="modal-overlay"><div class="modal-carousel modal-carousel--notice">
 *   <div class="swiper">…슬라이드(a>img.modal-notice-image)…</div>
 *   <div class="modal-notice-indicator"><div class="swiper-pagination"></div><button class="modal-notice-play"></button></div>
 *   <div class="modal-notice-actions"><button …--tertiary data-popup-hide-today>오늘 그만 보기</button><button …--secondary data-modal-close>닫기</button></div> */
.modal-carousel--notice {
  width: 360px;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-32);
  border-radius: var(--radius-large);   /* 24 */
  background-color: var(--color-background);
}

.modal-notice-slides {
  border-radius: var(--radius-small);   /* 12 */
  overflow: hidden;
}

.modal-notice-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;   /* 정책 UT-03 1-1: 모바일 최적화 4:5(세로) */
  object-fit: cover;
  background-color: var(--color-background-section);   /* #f3f3f3 — 이미지 없거나 비율 상이 시 여백 */
}

/* 인디케이터(다크 도트) + 정지/재생 — 흰 박스 위 */
.modal-notice-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
}

.modal-carousel--notice .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  width: auto;
  margin: 0;
}

.modal-carousel--notice .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-20);   /* rgba(0,0,0,0.2) 비활성 */
  opacity: 1;
  transition: width 0.15s;
}

.modal-carousel--notice .swiper-pagination-bullet-active {
  width: 32px;
  background-color: var(--color-text-heading);   /* #222 활성 pill */
}

.modal-notice-play {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);   /* 정지/재생 아이콘 톤 */
}

.modal-notice-play::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--modal-notice-play-icon, url("../images/icon/func-pause.svg")) no-repeat center / contain;
  mask: var(--modal-notice-play-icon, url("../images/icon/func-pause.svg")) no-repeat center / contain;
}

.modal-notice-play.is-paused {
  --modal-notice-play-icon: url("../images/icon/func-play.svg");
}

/* 하단 2버튼 (오늘 그만 보기 / 닫기) — 각 flex:1, .button--medium */
.modal-notice-actions {
  display: flex;
  gap: var(--spacing-8);
  margin-top: var(--spacing-48);
}

.modal-notice-actions .button {
  flex: 1 0 0;
  min-width: 0;
}

@media (max-width: 1023px) {
  .modal-carousel,
  .modal-carousel--image {
    width: 100%;
  }

  .modal-carousel--image .modal-slide-image {
    height: auto;
    aspect-ratio: 520 / 580;
  }
}

/* ── 이미지 상세보기 팝업 (UT-13 627:8474 가로 / 822:24735 세로) ──────────
 * 단일 .modal--880 안에 Swiper(메인 + 썸네일 thumbs) 로 구성된 이미지 뷰어.
 * Swiper(js/library/swiper-bundle) 필요 — 사용 화면이 로드·init(메인+thumbs 연결).
 * 구조:
 *   <div class="modal-overlay"><div class="modal modal--880 modal-gallery(--portrait)">
 *     <div class="modal-header">…타이틀 + .modal-close…</div>
 *     <div class="modal-gallery-body">
 *       <div class="modal-gallery-stage">
 *         <div class="swiper modal-gallery-main"><div class="swiper-wrapper">
 *           <div class="swiper-slide"><img class="modal-gallery-image"></div>…</div></div>
 *         <button class="modal-gallery-nav modal-gallery-nav--prev">…</button> +next
 *         <p class="modal-gallery-counter"><span class="modal-gallery-counter-current">1</span> / N</p>
 *       </div>
 *       <div class="swiper modal-gallery-thumbs"><div class="swiper-wrapper">
 *         <div class="swiper-slide modal-gallery-thumb"><img></div>…</div></div>
 *     </div></div></div>
 * PC 전용(모바일 시안 후속). 세로 변형은 --portrait (썸네일 88×110·스테이지 800).
 */
.modal-gallery {
  height: 800px;   /* 시안 627:8476 카드 800 (가로) — 스테이지가 이미지블록(494)보다 커져 상하 밴드 발생 */
  max-height: calc(100vh - var(--spacing-80));   /* 뷰포트 넘지 않게 */
}

.modal-gallery--portrait {
  height: 1071px;   /* 시안 822:24744 (세로) */
}

.modal-gallery-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--spacing-24);            /* 스테이지↔썸네일 (시안 body gap-24) */
  padding-bottom: var(--spacing-32); /* 카드 하단 여백 (시안 body pb-32) */
}

/* 메인 이미지 스테이지 — 다크 영역(flex 채움), 이미지블록을 가운데 배치해 상하 다크 여백 */
.modal-gallery-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-black);
}

/* 이미지 블록 — 시안 627:8480 (가로 494 고정, 스테이지보다 작아 상하 밴드 발생). nav/카운터 기준 박스 */
.modal-gallery-main {
  position: relative;
  width: 100%;
  height: 494px;
}

.modal-gallery--portrait .modal-gallery-main {
  height: 698px;      /* 세로 이미지 영역 (시안 822:24883 560×698) — 스테이지(flex) 안 가운데 → 상하 밴드 */
  max-height: 100%;   /* 스테이지보다 크면(작은 뷰포트) 채움 */
}

.modal-gallery-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.modal-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 가로=꽉참, 세로=좌우 레터박스 */
}

/* 세로 포스터 — 폭 auto(이미지 박스=포스터)로 라운드가 실제 이미지에 적용 (시안 822:24883 rounded 26.88 ≈ radius-large 24) */
.modal-gallery--portrait .modal-gallery-image {
  width: auto;
  max-width: 100%;
  height: 100%;
  border-radius: var(--radius-large);
}

/* 좌우 유리 화살표 (IconButton_80) */
.modal-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-40);   /* 시안 0.3 → 기존 화살표 딤 0.4 재사용(0.1 미세차) */
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.modal-gallery-nav--prev {
  left: var(--spacing-40);
  --modal-gallery-nav-icon: url("../images/icon/func-paginationPrev.svg");
}

.modal-gallery-nav--next {
  right: var(--spacing-40);
  --modal-gallery-nav-icon: url("../images/icon/func-paginationNext.svg");
}

.modal-gallery-nav::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--color-background);   /* 흰 아이콘 */
  -webkit-mask: var(--modal-gallery-nav-icon) no-repeat center / contain;
  mask: var(--modal-gallery-nav-icon) no-repeat center / contain;
}

.modal-gallery-nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

/* 카운터 pill (우하단 유리) */
.modal-gallery-counter {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 44px;
  padding: 0 var(--spacing-20);
  border-radius: var(--radius-full);
  background-color: var(--color-dim-white-20);
  backdrop-filter: blur(20px);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-disabled);   /* /전체 톤 #ccc */
}

.modal-gallery-counter-current {
  font-weight: 700;
  color: var(--color-background);   /* 현재 = 흰 Bold */
}

/* 썸네일 스트립 */
/* .modal-gallery 프리픽스 — swiper-bundle 의 .swiper{padding:0}(뒤 로드) 오버라이드 */
.modal-gallery .modal-gallery-thumbs {
  flex: 0 0 auto;
  width: 100%;
  padding: var(--spacing-16);
  background-color: var(--color-background);
}

/* .modal-gallery-thumbs 스코프로 특정성 상향 — swiper-bundle 의 .swiper-slide{width:100%} 오버라이드 */
.modal-gallery-thumbs .modal-gallery-thumb {
  width: 120px;   /* 가로 변형 */
  height: 88px;
  border-radius: var(--radius-small);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.modal-gallery--portrait .modal-gallery-thumbs .modal-gallery-thumb {
  width: 88px;   /* 세로 변형 */
  height: 110px;
}

.modal-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-gallery-thumb.swiper-slide-thumb-active {
  border: 3px solid var(--color-cta);   /* 활성 = 레드 3px */
}

/* 이미지 상세보기 — 모바일 풀스크린 (시안 699:13999 가로 / 822:25059 세로) */
@media (max-width: 1023px) {
  .modal-overlay:has(.modal-gallery) {
    padding: 0;   /* 풀스크린 — 좌우16 제거 */
  }

  .modal-gallery {
    width: 100%;
    height: 100dvh;
    max-height: none;   /* .modal--880 모바일 max-height:506 무효화 */
    border-radius: 0;
  }

  /* 모바일: PC 카드 여백(스테이지↔썸네일 gap·하단 pb) 제거 — 풀스크린은 area+list 밀착 (시안 699:13999) */
  .modal-gallery-body {
    gap: 0;
    padding-bottom: 0;
  }

  /* 이미지블록도 스테이지 채움 → 상하 밴드 없이 전체 사용 (밴드는 PC 고정높이 전용) */
  .modal-gallery-main,
  .modal-gallery--portrait .modal-gallery-main {
    height: 100%;
  }

  /* 모바일은 좌우 화살표 없음 — 썸네일 탭·스와이프로 이동 (시안 arrows hidden) */
  .modal-gallery-nav {
    display: none;
  }

  /* 카운터 모바일 — h32·14 (시안 699:14009) */
  .modal-gallery-counter {
    height: 32px;
    font-size: 14px;
  }
}

/* ── 폼 (Figma Form 43:1834 — design-guide §11) ─────────────────────
 * 구조: .form-field > .form-label(+.form-required|.form-badge) + 컨트롤 + .form-caption(--success/--error)
 * 컨트롤: .form-input(--small) · .form-textarea-box(카운터 — form.js) · .form-check · .form-radio ·
 *         .form-radio-box(>label.form-radio-box-item>input+span) · .form-toggle(>input+span)
 * 상태: :focus/:disabled/[readonly] CSS 흡수, complete=입력값 색상으로 자연 표현 (클래스 불요)
 * PC/MO 는 1023px 분기 자동 전환. 접근성: label for/id 연결, 오류 캡션은 aria-describedby 연결
 * ⚠️ 도형 특수값(체크 1.2px/4.8px·뱃지 6px·토글 600px·라디오 disable #aaa)은 시안 원값 예외 승인(2026-08-03)
 * ⚠️ 레거시 member.css 폼과 별개 — member 화면 리뉴얼 시 치환
 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.form-required {
  color: var(--color-cta);
}

/* 필수/선택 뱃지 (Figma leq) — radius 6px 시안 원값 예외 */
.form-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-cta);
  border-radius: 6px;
  background-color: var(--color-background);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-cta);
}

.form-badge--optional {
  border-color: var(--color-border-button);
  color: var(--color-text-caption);
}

/* 텍스트 입력 — h64(PC L), 상태는 의사클래스 흡수 */
.form-input {
  width: 100%;
  height: 64px;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-text-heading);
  /* iOS Safari 네이티브 인풋 박스 덧그림 방지 (전 화면 폼 인풋 공통) — CRFF-249 */
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder {
  color: var(--color-text-secondary);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-gray-10);
}

.form-input:disabled {
  background-color: var(--color-background-section);
  color: var(--color-text-secondary);
}

.form-input[readonly] {
  background-color: var(--color-background-section);
}

.form-input--small {
  height: 56px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.14px;
}

/* clear 버튼 — 값이 있고 포커스일 때 form.js 가 노출 */
.form-input-wrap {
  position: relative;
}

.form-input-wrap .form-input {
  padding-right: var(--spacing-48);
}

.form-input-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: var(--spacing-16);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: url("../images/common/ico-input-clear.svg") no-repeat center / contain;
  cursor: pointer;
}

.form-input-clear.is-visible {
  display: block;
}

/* 비밀번호 표시 토글(눈) — <div class="form-input-wrap"><input type="password"><button class="form-input-toggle">…
 * form.js 가 type password↔text 전환 + is-visible 아이콘 스왑 */
.form-input-toggle {
  position: absolute;
  top: 50%;
  right: var(--spacing-16);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: url("../images/common/ico-eye-on.png") no-repeat center / contain;   /* 숨김 상태 = 빗금 눈 (PNG — 구 SVG export 오류로 교체 2026-08-31) */
  cursor: pointer;
}

.form-input-toggle.is-visible {
  background-image: url("../images/common/ico-eye.png");   /* 표시 상태 = 뜬 눈 */
}

/* textarea — 박스 안에 본문 + 우하단 글자수 카운터 (form.js) */
.form-textarea-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  height: 200px;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
}

.form-textarea-box:focus-within {
  border-color: var(--color-gray-10);
}

.form-textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  background: none;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-text-heading);
}

.form-textarea::placeholder {
  color: var(--color-text-secondary);
}

/* 카운터 letter-spacing -0.5px 는 시안 원값 (타이포 이질값 — 보고) */
.form-textarea-count {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
  text-align: right;
}

/* 캡션 — 3px 불릿 + 본문, 색 변형은 System 05 텍스트 토큰 */
.form-caption {
  display: flex;
  gap: var(--spacing-4);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-caption);
}

.form-caption::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  margin-top: 9px;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

/* display:flex 가 UA [hidden] 을 덮지 않도록 명시 (오류 캡션 조건 노출용) */
.form-caption[hidden] {
  display: none;
}

.form-caption--success {
  color: var(--color-success-text);
}

.form-caption--error {
  color: var(--color-error-text);
}

/* small 필드의 캡션은 13px (시안 PC small 캡션 13) */
.form-field:has(.form-input--small) .form-caption {
  font-size: 13px;
}

/* 체크박스 — <label class="form-check"><input type="checkbox"><span>라벨</span></label>
 * 도형 1.2px/4.8px 는 시안 원값 예외 */
.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  cursor: pointer;
}

/* 도형 20×20·r4 — WSG PC 변형(24/1.2/4.8)은 1.2배 오스케일로 판정(WSG MO·로그인 실화면 시안 모두 20, 2026-08-03 정정) */
.form-check input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--color-border-button);
  border-radius: 4px;
  background-color: var(--color-background);
  cursor: pointer;
}

.form-check input:checked {
  border: none;
  background: var(--color-cta) url("../images/common/ico-check.svg") no-repeat center / contain;
}

.form-check input:disabled:checked {
  background-color: var(--color-background-section);
}

.form-check input:disabled ~ span {
  color: var(--color-text-secondary);
}

/* 라디오 — 구조 동일. selected 는 6px 레드 링(내부 흰 8px), disable 링 #aaa 는 팔레트 외 시안 원값 예외 */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  cursor: pointer;
}

.form-radio input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
}

.form-radio input:checked {
  border: 6px solid var(--color-cta);
}

.form-radio input:disabled:checked {
  border-color: #aaaaaa;
}

.form-radio input:disabled ~ span {
  color: var(--color-disabled);
}

/* 박스형 라디오 그룹 — <div class="form-radio-box"><label class="form-radio-box-item"><input type="radio"><span>1일</span></label>… */
.form-radio-box {
  display: flex;
  gap: var(--spacing-8);
}

.form-radio-box-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 56px;
  height: 56px;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-small);
  background-color: var(--color-background);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-caption);
  text-align: center;
  cursor: pointer;
}

.form-radio-box-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.form-radio-box-item:has(input:checked) {
  border: 2px solid var(--color-gray-10);
  color: var(--color-text-heading);
}

.form-radio-box-item:has(input:focus-visible) {
  outline: 2px solid var(--color-gray-10);
  outline-offset: 2px;
}

.form-radio-box-item.is-readonly {
  background-color: var(--color-background-section);
  color: var(--color-text-heading);
  pointer-events: none;
}

/* 토글 — <label class="form-toggle"><input type="checkbox"><span class="form-toggle-slider"></span></label>
 * 트랙 radius 600px 는 시안 원값 예외 */
.form-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.form-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.form-toggle-slider {
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: 600px;
  background-color: var(--color-disabled);
  transition: background-color 0.2s;
}

.form-toggle-slider::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  transition: left 0.2s;
}

.form-toggle input:checked + .form-toggle-slider {
  background-color: var(--color-gray-10);
}

.form-toggle input:checked + .form-toggle-slider::after {
  left: 28px;
}

.form-toggle input:focus-visible + .form-toggle-slider {
  outline: 2px solid var(--color-gray-10);
  outline-offset: 2px;
}

/* 조회 전용 토글(disabled) — 마이페이지 SNS 로그인 연동 표시(CRFF-179) 등 상태만 보여주고 조작은 막는 경우 */
.form-toggle:has(input:disabled) {
  cursor: not-allowed;
}

.form-toggle input:disabled + .form-toggle-slider {
  opacity: 0.5;
}

/* 드롭다운 (커스텀 셀렉트 — js/components/select.js 짝, ARIA listbox)
 * <div class="form-select"><button class="form-select-trigger" aria-haspopup="listbox" aria-expanded="false">
 *   <span class="form-select-value" data-placeholder="선택">선택</span><span class="form-select-arrow"></span></button>
 *   <ul class="form-select-panel" role="listbox"><li><button type="button" class="form-select-option" role="option" data-value="…">…</button></li>…</ul>
 *   <input type="hidden" name="…"></div>
 * 패널-트리거 간격 4px 는 시안 부재로 협의값(2026-08-03) — 디자이너 확인 항목 */
.form-select {
  position: relative;
}

.form-select-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  height: 64px;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}

.form-select-trigger.is-filled {
  color: var(--color-text-heading);
}

.form-select.is-open .form-select-trigger {
  border-color: var(--color-gray-10);
}

.form-select-trigger:disabled {
  background-color: var(--color-background-section);
  cursor: default;
}

.form-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* chevron — 전 상태 #222 단일색 자산, 열림 시 180° 회전 */
.form-select-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url("../images/common/ico-chevron-down.svg") no-repeat center / contain;
  transition: transform 0.15s;
}

.form-select.is-open .form-select-arrow {
  transform: rotate(180deg);
}

.form-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-4));
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: var(--spacing-12);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  box-shadow: var(--shadow-panel);
  list-style: none;
}

.form-select.is-open .form-select-panel {
  display: block;
}

.form-select-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-4) var(--spacing-16);
  border: none;
  border-radius: var(--radius-xsmall);
  background: none;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-caption);
  text-align: left;
  cursor: pointer;
}

.form-select-option:hover,
.form-select-option:focus-visible {
  background-color: var(--color-background-section);
}

.form-select-option[aria-selected="true"] {
  padding-right: var(--spacing-12);
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-heading);
}

/* small — PC h56·14px (MO 치수는 미디어쿼리) */
.form-select--small .form-select-trigger {
  height: 56px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.form-select--small .form-select-arrow {
  width: 20px;
  height: 20px;
}

@media (max-width: 1023px) {
  .form-label {
    font-size: 14px;
  }

  .form-input {
    height: 52px;
    border-radius: var(--radius-small);
    /* iOS WKWebView(카톡 인앱 등)는 포커스 input 폰트 <16px 이면 자동 줌인 — 시안(15) 대비 1px 상향으로 줌 방지 (CRFF-251 A-1) */
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.15px;
  }

  .form-input--small {
    height: 48px;
    font-size: 16px;   /* iOS 자동 줌 방지 14→16 (CRFF-251 A-1) */
    line-height: 20px;
    letter-spacing: -0.14px;
  }

  /* MO textarea: 시안(43:2219)상 radius 16·h200 은 PC 와 동일, 본문 타이포만 16/20 (iOS 자동 줌 방지 14→16, CRFF-251 A-1) */
  .form-textarea {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.14px;
  }

  /* MO 체크 라벨 15px (도형은 PC/MO 공통 20) */
  .form-check {
    font-size: 15px;
  }

  .form-badge {
    font-size: 12px;
  }

  /* MO 폼 사이드 버튼 — 인풋 MO 높이(52)와 정합, 폰트 16(모바일 시안 실측 2026-08-04) */
  .form-button {
    height: 52px;
    font-size: 16px;
  }

  /* MO 드롭다운 — 트리거 h52/48·r12·15/14px, 패널 max280, 옵션 h44·16px */
  .form-select-trigger {
    height: 52px;
    border-radius: var(--radius-small);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.15px;
  }

  .form-select--small .form-select-trigger {
    height: 48px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.14px;
  }

  .form-select-arrow {
    width: 20px;
    height: 20px;
  }

  .form-select-panel {
    max-height: 280px;
  }

  .form-select-option {
    min-height: 44px;
    font-size: 16px;
  }

  .form-caption {
    font-size: 13px;
  }

  .form-caption::before {
    margin-top: 8px;
  }

  .form-radio-box-item {
    height: 52px;
    font-size: 15px;
  }

  /* MO 폼 섹션 타이틀 — 28→24 (모바일 시안 실측 2026-08-04) */
  .form-section-title {
    font-size: 24px;
    line-height: 1.2;
  }
}

/* ── 팝업 헤더 (Figma Header_CRFF 22:677 · MO popup 변형) ─────────
 * 전체화면 팝업/모달 상단바 — 좌 타이틀 + 우 닫기(X)
 * 사용처 예: 개인정보 수집 및 이용동의서 등 모바일 전체화면 팝업
 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-left: var(--spacing-16);
  background-color: var(--color-background);
}

.popup-header-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.popup-header-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: var(--spacing-16);
  padding: var(--spacing-4) 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* ── flag 배지 (Figma WSG PC_flag 195:1598 / MO_flag 234:2436) ──────────────
   상태/속성 라벨용 pill 배지. 색은 계열 모디파이어로 지정, 텍스트는 콘텐츠.
   WSG 프리셋: 예매완료=pink · 접수=yellow · 취소=gray · 완료=blue (타 사용처는 색 자유 선택).
   시안 변형별 px/radius 미세 불일치(px16/24·rounded 800/999)는 pill·px24(PC)/16(MO)로 정규화.
   width 는 콘텐츠 기준(시안 고정 w104/80 은 텍스트별 가변 재사용 위해 미적용). */
.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  height: 40px;
  padding: 0 var(--spacing-24);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.flag--pink {
  background-color: var(--color-pink-60);
  border-color: var(--color-pink-40);
}

.flag--yellow {
  background-color: var(--color-yellow-60);
  border-color: var(--color-yellow-40);
}

.flag--gray {
  background-color: var(--color-background-section);
  border-color: var(--color-border);
}

.flag--blue {
  background-color: var(--color-blue-80);
  border-color: var(--color-blue-40);
}

/* red — 공지 강조 (소식 NW-6100 PC_flag 공지 변형, CRFF-53 등록) */
.flag--red {
  background-color: var(--color-cta);
  border-color: var(--color-yellow-40);
  color: var(--color-text-inverse);
}

@media (max-width: 1023px) {
  .flag {
    height: 32px;
    padding: 0 var(--spacing-16);
    font-size: 12px;
  }
}

/* ── 아코디언 (Figma WSG List 294:299) ──────────────────────────────
   Q + 질문 + chevron 행, 펼침 시 답변. FAQ 등 재사용. 개폐는 components/accordion.js.
   PC: 행 h80·질문18·Q24·답변16 / 태블릿·MO: 질문16·Q28·답변15 (@media 로 전환). */
.accordion {
  width: 100%;
}
.accordion-question {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
  min-height: 80px;
  padding: 0 var(--spacing-40);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.accordion-q {
  flex-shrink: 0;
  width: 20px;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  color: var(--color-cta);
  text-align: center;
}
.accordion-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accordion-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.accordion-question[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}
.accordion-answer {
  padding: 0 calc(var(--spacing-40) + var(--spacing-32)) var(--spacing-32);
}
.accordion-answer p {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
}
/* 리치 에디터 목록 — BO FAQ 답변의 <ul><li> 를 문단과 같은 서체로, 브라우저 기본 margin·40px 들여쓰기 제거 (CRFF-232) */
.accordion-answer ul,
.accordion-answer ol {
  margin: 0;
  padding-left: var(--spacing-20);
}
.accordion-answer li {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
  list-style: disc outside;
}
.accordion-answer ol li {
  list-style-type: decimal;
}

@media (max-width: 1023px) {
  .accordion-question {
    gap: var(--spacing-16);
    padding: 0 var(--spacing-16);
  }
  .accordion-q {
    width: 22px;
    font-size: 28px;
  }
  .accordion-title {
    font-size: 16px;   /* 태블릿·모바일 질문 16 (시안 627:40184) */
  }
  .accordion-chevron {
    width: 20px;
    height: 20px;
  }
  .accordion-answer {
    padding: 0 var(--spacing-16) var(--spacing-24) var(--spacing-48);
  }
  .accordion-answer p,
  .accordion-answer li {
    font-size: 15px;
  }
}

/* ── 등급 배지 (Figma WSG badge 189:1372) ──────────────────────────
   전체/12/15/CC·수어·휠체어 — 원+심볼 통짜 SVG(images/badge/badge-*.svg)를 img 로 배치.
   시안이 등급 글자를 전용 폰트(Assacom FreeGothic)로 렌더해 폰트 대신 평면화 SVG 사용. 크기만 클래스로. */
.badge-rating {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.badge-rating--sm {
  width: 30px;
  height: 30px;
}

/* ── 속성 배지 badge_property (Figma WSG 173:766) ──────────────────
   라벨 pill. (아이콘/로고 +) 텍스트. type(Line/fill) × color(8색) = 16변형.
   PC: Body4/Bold 16 · h40 · 보더 2px · radius full. MO: Caption1/Bold 13 · h28 · 보더 1px.
   시안 특수 패딩(PC 23.75·12/20 / MO 8/14)은 pill·토큰(PC px24 / MO px12)으로 정규화. */
.badge-property {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 40px;
  padding: 0 var(--spacing-24);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-heading);
  white-space: nowrap;
}

/* type — color 모디파이어가 공급하는 line(밝은톤 40)/fill(강조 60) 두 색을 소비 */
.badge-property--line {
  background-color: var(--color-background);
  border-color: var(--badge-property-line, var(--color-cta));
  color: var(--color-text-heading);
}

.badge-property--fill {
  background-color: var(--badge-property-fill, var(--color-cta));
  border-color: transparent;
  color: var(--badge-property-fill-text, var(--color-text-heading));
}

/* color — 8색. line=40(라인), fill=60(배경). primary·black 은 fill 텍스트 반전 */
.badge-property--primary {
  --badge-property-line: var(--color-cta);
  --badge-property-fill: var(--color-cta);
  --badge-property-fill-text: var(--color-text-inverse);
}
.badge-property--red {
  --badge-property-line: var(--color-red-40);
  --badge-property-fill: var(--color-red-60);
}
.badge-property--pink {
  --badge-property-line: var(--color-pink-40);
  --badge-property-fill: var(--color-pink-60);
}
.badge-property--green {
  --badge-property-line: var(--color-green-40);
  --badge-property-fill: var(--color-green-60);
}
.badge-property--yellow {
  --badge-property-line: var(--color-yellow-40);
  --badge-property-fill: var(--color-yellow-60);
}
.badge-property--blue {
  --badge-property-line: var(--color-blue-40);
  --badge-property-fill: var(--color-blue-60);
}
.badge-property--grey {
  --badge-property-line: var(--color-border);              /* #ddd — 시안 line/divider/standard */
  --badge-property-fill: var(--color-background-section);  /* #f3f3f3 */
}
.badge-property--black {
  --badge-property-line: var(--color-text-heading);
  --badge-property-fill: var(--color-text-heading);
  --badge-property-fill-text: var(--color-text-inverse);
}

/* 의미 별칭 — 실사용 프리셋(기존 사용처 유지): award=green fill, film=primary line */
.badge-property--award {
  background-color: var(--color-green-60);
}

.badge-property--film {
  background-color: var(--color-background);
  border-color: var(--color-cta);
}

.badge-property-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* 수상 배지 트로피 — filled(func-trophy-filled) + currentColor 마스크로 뱃지 텍스트색 따라 반전
   (WSG 398:1202: 대상·최우수상=흰 트로피 / 우수상·관객상·아동감독상=검정 트로피) */
.badge-property-icon--trophy {
  background-color: currentColor;
  -webkit-mask: url("../images/icon/func-trophy-filled.svg") no-repeat center / contain;
  mask: url("../images/icon/func-trophy-filled.svg") no-repeat center / contain;
}

.badge-property-logo {
  flex-shrink: 0;
  width: auto;
  height: 24px;   /* crff 심볼(로고+캐릭터) — 시안 603:3522 26×24 */
}

@media (max-width: 1023px) {
  .badge-property {
    gap: var(--spacing-2);
    height: 28px;
    padding: 0 var(--spacing-12);
    border-width: 1px;
    font-size: 13px;
  }
  .badge-property-icon {
    width: 14px;
    height: 14px;
  }
  .badge-property-logo {
    height: 16px;
  }
}

/* ── 영화 태그 행 movie-tags — 영화 카드 공통(수상작·특별전·오리지널 필름·공동체 상영회, 2026-09-29) ──
   '# 태그' 텍스트 나열, 줄바꿈 허용. 글꼴은 타이포 유틸(type-body-4-regular: PC 16 / MO 14)이 공급.
   ※ Figma MCP 미연결 상태에서 시안 캡처로 추정한 값(본문색 gray-40 · 항목 간격 16) — 시안 확인 시 보정. */
.movie-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-body);
}

.movie-tags-item {
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .movie-tags {
    gap: var(--spacing-2) var(--spacing-12);
  }
}

/* ── 타이포 유틸 (Figma 타이포 가이드 13:10 — design-guide §10) ────────────
   .type-{역할}-{번호}[-{weight}]. PC 기본값 + 1023px 에서 MO 치수 자동 전환.
   - line-height 는 Figma 변수 정본(제목 135% / 본문 150%, MO 일부 상이).
   - letter-spacing 은 시안 다수값 -0.5px 일괄 (일부 0 은 0.5px 극미차라 생략, 필요 시 조정).
   - Display 2 는 가이드에 MO 대응 없음 → MO 에선 화면이 heading-1 등으로 교체(여기선 PC 값 유지).
   - 화면 CSS 의 개별 font 직입을 대체 — 신규/리팩터링 시 이 클래스를 우선 사용. */

/* Display (Paperlogy) — 랜딩·히어로 대형 타이틀 */
.type-display-1,
.type-display-2 {
  font-family: var(--font-family-display);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
}
.type-display-1 { font-size: 72px; }
.type-display-2 { font-size: 56px; }

/* Heading (Paperlogy 800) — 섹션 제목 */
.type-heading-1,
.type-heading-2 {
  font-family: var(--font-family-display);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
}
.type-heading-1 { font-size: 40px; }
.type-heading-2 { font-size: 32px; }

/* Title (Pretendard 700) — 컴포넌트 제목 */
.type-title-1,
.type-title-2,
.type-title-3 {
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.5px;
}
.type-title-1 { font-size: 30px; }
.type-title-2 { font-size: 28px; }
.type-title-3 { font-size: 24px; }

/* Body (Pretendard) — 본문. size·lh 공유 + weight 3종 */
.type-body-1-bold, .type-body-1-semibold, .type-body-1-regular,
.type-body-2-bold, .type-body-2-semibold, .type-body-2-regular,
.type-body-3-bold, .type-body-3-semibold, .type-body-3-regular,
.type-body-4-bold, .type-body-4-semibold, .type-body-4-regular {
  font-family: var(--font-family-base);
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.type-body-1-bold, .type-body-2-bold, .type-body-3-bold, .type-body-4-bold { font-weight: 700; }
.type-body-1-semibold, .type-body-2-semibold, .type-body-3-semibold, .type-body-4-semibold { font-weight: 600; }
.type-body-1-regular, .type-body-2-regular, .type-body-3-regular, .type-body-4-regular { font-weight: 400; }
.type-body-1-bold, .type-body-1-semibold, .type-body-1-regular { font-size: 22px; }
.type-body-2-bold, .type-body-2-semibold, .type-body-2-regular { font-size: 20px; }
.type-body-3-bold, .type-body-3-semibold, .type-body-3-regular { font-size: 18px; }
.type-body-4-bold, .type-body-4-semibold, .type-body-4-regular { font-size: 16px; }

/* Caption (Pretendard) — 보조 텍스트 */
.type-caption-1-bold, .type-caption-1-regular,
.type-caption-2-bold, .type-caption-2-regular {
  font-family: var(--font-family-base);
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.type-caption-1-bold, .type-caption-2-bold { font-weight: 700; }
.type-caption-1-regular, .type-caption-2-regular { font-weight: 400; }
.type-caption-1-bold, .type-caption-1-regular { font-size: 14px; }
.type-caption-2-bold, .type-caption-2-regular { font-size: 13px; }

@media (max-width: 1023px) {
  /* Display 1 은 MO 에서 Paperlogy 7 Bold(700)·44px (Display 2 는 MO 미대응 — PC 유지) */
  .type-display-1 { font-size: 44px; font-weight: 700; letter-spacing: 0; }

  /* Heading·Title 은 MO 에서 크기·행간 축소 */
  .type-heading-1 { font-size: 30px; line-height: 1.35; }
  .type-heading-2 { font-size: 24px; line-height: 1.35; }
  .type-title-1 { font-size: 28px; }
  .type-title-2 { font-size: 24px; }
  .type-title-3 { font-size: 20px; line-height: 1.5; }

  .type-body-1-bold, .type-body-1-semibold, .type-body-1-regular { font-size: 18px; }
  .type-body-2-bold, .type-body-2-semibold, .type-body-2-regular { font-size: 16px; }
  .type-body-3-bold, .type-body-3-semibold, .type-body-3-regular { font-size: 15px; }
  .type-body-4-bold, .type-body-4-semibold, .type-body-4-regular { font-size: 14px; }
  .type-caption-1-bold, .type-caption-1-regular { font-size: 13px; }
  .type-caption-2-bold, .type-caption-2-regular { font-size: 12px; }
}

/* ── 아이콘 유틸 (design-guide §11) ────────────────────────────────
   단색 아이콘(static/images/icon/*.svg)을 mask + currentColor 로 배치 — 텍스트색 상속.
   개별: 인라인 `style="--icon:url(/images/icon/func-search.svg)"` 또는 화면 CSS 에서 --icon 지정.
   다색 아이콘(로고·모티프)은 이 유틸 대신 <img> 사용. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.icon--20 { width: 20px; height: 20px; }
.icon--32 { width: 32px; height: 32px; }

/* ── 토스트 (완료·안내 알림 — 자동 사라짐, MY-7400 T1 첫 사용처) ──────────────
   동작: js/components/toast.js (data-toast 위임 + window.crffToast.show).
   ⚠️ 알림 UX 정책 대기 항목 — 사라짐 시간·위치 기본값은 임시(정책 확정 시 조정).
   ⚠️ Figma T1 노드(플랜 1020:23632/1040:27771) 미해석으로 bg·radius·padding 은 토큰 근사 — 시각검증 시 대조. */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1100;
  width: 320px;   /* 시안 MO_tost 고정 폭 320 (좌우 35 여백) */
  max-width: calc(100% - var(--spacing-32));
  min-height: 80px;   /* 시안 PC_tost min-h 80 */
  padding: var(--spacing-24);   /* 시안 MO_tost p-24 (전체) */
  border-radius: var(--radius-medium);
  background-color: var(--color-gray-10);
  /* 시안 PC_tost 엔 그림자 없음 (box-shadow 제거) */
  font-family: var(--font-family-base);
  font-weight: 700;   /* Bold (시안 MO Title 3) */
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-inverse);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── 안내 박스 (Figma InfoBox 819:5731 — 내 정보 MY-7100 첫 사용처) ──────────────
 * 회색 배경 안내문 + 우측 pill 링크(대표사이트 바로가기 등). PC 는 좌우 배치, MO 는 세로 스택.
 * <div class="info-box"><p class="info-box-text">…</p><a class="info-box-link">…<span class="info-box-arrow"></span></a></div> */
.info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--spacing-40) var(--spacing-28);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}

.info-box-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
}

.info-box-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--spacing-4);
  height: 40px;
  padding: 0 var(--spacing-16) 0 var(--spacing-24);
  border: 1px solid var(--color-text-heading);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;
}

.info-box-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
  mask: url("../images/common/ico-arrow-next.svg") no-repeat center / contain;
}

@media (max-width: 1023px) {
  /* MO: 테두리 없음·radius 12·gap 32 (시안 845:19219) */
  .info-box {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-32);
    padding: var(--spacing-24);
    border: none;
    border-radius: var(--radius-small);
  }

  /* MO: 링크 우측·소형(h32·13px·pl16 pr14) */
  .info-box-link {
    align-self: flex-end;
    height: 32px;
    padding: 0 14px 0 var(--spacing-16);
    font-size: 13px;
  }
}

/* ── 서브 히어로 (Figma PC_Sub_top 529:4081 / MO_Sub_top 532:5661 — CRFF-51 공통 승격)
 * 서브 페이지 상단 레드 배너 — 배경은 페이지별 합성 SVG(레드+일러스트+딤, community 관례).
 * 페이지 CSS 가 --sub-hero-bg(PC)·--sub-hero-bg-mo(MO) url 을 공급한다.
 * 마크업: components :: sub-hero(title, sub). 기존 community/outdoor 화면 치환은 후속 (2026-08-19 승격 합의) */
.sub-hero {
  padding: var(--spacing-56) var(--spacing-40);
}

.sub-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 580px;
  padding: var(--spacing-56) var(--spacing-80);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
  background: var(--sub-hero-bg) center / cover no-repeat;
  overflow: hidden;
}

.sub-hero-headline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
}

.sub-hero-title,
.sub-hero-sub {
  color: var(--color-text-inverse);
}

/* ── FAB — UT-10 플로팅 버튼 (Figma 627:3694 PC / 627:15004 MO — CRFF-52 승격, 구 CRFF-51 fab)
 * 우측 하단 고정(fixed). 바로가기 액션(상시) + TOP(1화면 스크롤 시 등장) + 푸터 도달 시 리프트.
 * 동작: js/components/fab.js. 액션은 fragment 파라미터로 주입(없으면 TOP 만) */
.fab {
  position: fixed;
  right: var(--spacing-40);
  bottom: var(--spacing-80);   /* 하단 마진 PC·태블릿 80 / MO 40 (검수 2026-09-04) */
  --fab-footer-gap: 40px;      /* 푸터 도달 시 FAB 하단이 푸터 위에서 멈출 간격 — PC·태블릿 40 / MO 24 (Figma 967-11442). fab.js footer-lift 참조 */
  z-index: 100;
  transform: translateY(calc(-1 * var(--fab-lift, 0px)));
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  .fab {
    --fab-footer-gap: 24px;
  }
}

.fab-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-16);   /* 액션그룹 ↔ 컨트롤 */
}

/* 바로가기 드롭다운 카드 — ＋토글로 펼침(접힘 기본) */
.fab-actions {
  display: none;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 220px;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-gray-10);
  border-radius: 32px;   /* 시안 raw — radius 토큰 스케일에 32 없음 */
  background-color: var(--color-background);
  box-shadow: 0 0 2px rgba(18, 20, 33, 0.08), 0 16px 24px rgba(18, 20, 33, 0.12);
}

.fab.is-expanded .fab-actions { display: flex; }

/* 드롭다운 항목 — 예매(빨강 pill) / 투표(평문) */
.fab-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 48px;
  padding: var(--spacing-4) var(--spacing-16);
  border-radius: var(--radius-xsmall);   /* 8 */
  text-decoration: none;
}

/* 펼침 액션 — 기본 전 항목 동일(검정 텍스트·아이콘), hover 시 액티브 레드 (검수 2026-08-31: 상시 빨강 제거) */
.fab-action:hover {
  background-color: var(--color-cta);
  border-radius: var(--radius-full);
}

.fab-action:hover .fab-action-label {
  font-weight: 600;
  color: var(--color-text-inverse);
}

.fab-action:hover .fab-action-icon {
  filter: brightness(0) invert(1);   /* img 아이콘 흰색 전환 */
}

.fab-action-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  filter: brightness(0);   /* 아이콘 검정 통일 (info-ticket 은 흰색 원본) */
}

.fab-action-label {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  white-space: nowrap;
}

/* 컨트롤 — ＋/− 토글 + TOP */
.fab-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-12);
}

/* 토글 — 접힘 ＋(빨강·흰 아이콘) / 펼침 −(회색·어두운 아이콘) */
/* 토글 상태 (시안 627:8521): 기본 흰배경+#222 보더 / hover 빨강+흰 아이콘 / 펼침 회색 */
.fab-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
}

.fab-toggle::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--color-gray-10);
  -webkit-mask: url("../images/icon/func-plus.svg") no-repeat center / contain;
  mask: url("../images/icon/func-plus.svg") no-repeat center / contain;
}

.fab-toggle:hover {
  border-color: var(--color-cta);
  background-color: var(--color-cta);
}

.fab-toggle:hover::before {
  background-color: var(--color-text-inverse);
}

.fab.is-expanded .fab-toggle {
  background-color: var(--color-gray-90);
  border: 1px solid var(--color-gray-10);
}

.fab.is-expanded .fab-toggle::before {
  background-color: var(--color-gray-10);
  -webkit-mask-image: url("../images/icon/func-minus.svg");
  mask-image: url("../images/icon/func-minus.svg");
}

/* TOP — 1화면 스크롤 시 등장. 미노출 시 공간도 접어 +버튼이 하단에 붙는다 (검수 2026-09-04) */
.fab-top {
  display: none;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, display 0.2s ease allow-discrete;
}

.fab.is-scrolled .fab-top {
  display: flex;
  opacity: 1;
}

/* display none→flex 전환에도 페이드 인 (미지원 브라우저는 즉시 노출) */
@starting-style {
  .fab.is-scrolled .fab-top {
    opacity: 0;
  }
}

.fab-top::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--color-gray-10);
  -webkit-mask: url("../images/icon/func-arrowTop.svg") no-repeat center / contain;
  mask: url("../images/icon/func-arrowTop.svg") no-repeat center / contain;
}

@media (max-width: 1023px) {
  .sub-hero {
    padding: var(--spacing-16);
  }

  .sub-hero-inner {
    justify-content: center;
    height: auto;
    min-height: 280px;
    padding: 0 var(--spacing-16);
    border-radius: var(--radius-large);
    background-image: var(--sub-hero-bg-mo); /* MO 합성(그라디언트 딤 포함) */
    background-position: top center;
  }

  .sub-hero-headline {
    align-items: center;
    width: 100%;
    padding: var(--spacing-80) 0;
    gap: var(--spacing-8);
    text-align: center;
    filter: drop-shadow(0 4px 50px rgba(0, 0, 0, 0.25)); /* 시안 원값 */
  }

  .sub-hero-title {
    font-size: 32px; /* 시안 MO 32 — display-2 는 MO 미대응 스케일이라 개별 지정 */
  }

  .sub-hero-sub {
    font-size: 16px; /* 시안 MO 16 (body-1 MO 18과 상이 — 개별 지정) */
  }

  .fab {
    right: var(--spacing-8);   /* 우측 8 시안 원값 (MO 표준 16과 상이 — 2026-08-19 raw 유지 합의) */
  }

  /* MO는 토글·TOP만 축소 — 드롭다운·색상·동작은 베이스 상속 */
  .fab-group { gap: var(--spacing-12); }
  .fab-controls { gap: var(--spacing-8); }
  .fab-toggle { width: 48px; height: 48px; }
  .fab-toggle::before { width: 24px; height: 24px; }
  .fab-top { width: 48px; height: 48px; }
  .fab-top::before { width: 24px; height: 24px; }
}

/* 모바일 — 하단 마진 40 (태블릿 768~1023 은 PC 와 같은 80 유지) */
@media (max-width: 767px) {
  .fab {
    bottom: var(--spacing-40);
  }
}

/* ── 섹션 헤드라인 (Figma 627:3314 — 메인/목록 섹션 공통 CRFF-52) ─────────
   타이틀(display-2, MO heading-1) + 서브(body-2) + 더보기(검정 원형 + func-plus).
   컨테이너(섹션)가 좌우 여백(PC 40 / MO 16)을 제공하고, 헤드라인은 시안 pl-12(PC)만 더한다. */
.section-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--spacing-12);   /* 시안 pl-12 (PC) */
}

.section-headline-group {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  word-break: break-word;
}

.section-headline-title {   /* type-display-2(56) 기반 — MO 만 heading-1(30) 로 축소 */
  color: var(--color-text-heading);
}

.section-headline-sub {
  color: var(--color-text-body);
}

.section-headline-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

.section-headline-more-icon {
  width: 48px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask: url("/images/icon/func-plus.svg") no-repeat center / contain;
  mask: url("/images/icon/func-plus.svg") no-repeat center / contain;
}

@media (max-width: 767px) {
  .section-headline {
    padding-left: 0;   /* MO 는 섹션 좌우 패딩 16 만 (시안 px-16) */
  }
  .section-headline-group {
    gap: var(--spacing-8);
  }
  .section-headline-title {
    font-size: 30px;   /* MO heading-1 (display-2 는 MO 미대응) */
  }
  .section-headline-sub {
    color: var(--color-text-subtitle);   /* 시안 MO 서브 #333 */
  }
  .section-headline-more {
    width: 52px;
    height: 52px;
  }
  .section-headline-more-icon {
    width: 20px;
    height: 20px;
  }
}

/* ── 공유하기 팝업 (UT-11, CRFF-46) — modal 재사용. SNS 4개 + URL 복사. PC 중앙 360 / MO(≤767) 하단 시트 ── */
.share-modal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-40);
  padding-top: var(--spacing-24);   /* 헤더 pb16 + 24 = 시안 40 */
}
.share-sns {
  display: flex;
  justify-content: center;
  gap: var(--spacing-24);
  width: 100%;
  list-style: none;
}
.share-sns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.share-sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.share-sns-icon--kakao {
  background-color: var(--color-kakao);   /* 시안 #ffe12c ≈ 토큰 카카오옐로 — 브랜딩 일관성 위해 토큰 사용 */
}
.share-sns-icon--dark {
  background-color: var(--color-gray-10);   /* #222 */
}
.share-sns-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);   /* #6e6e6e */
}
.share-copy {
  gap: var(--spacing-4);   /* func-link 아이콘 ↔ 텍스트 */
}
.share-copy .icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  /* 시안 627:16963 = 센터센터(바텀시트 아님) → base 모달 중앙정렬(MO full−16) 그대로 사용. 버튼 풀폭·h52 */
  .share-copy {
    width: 100%;   /* 시안 MO 풀폭 */
    height: 52px;  /* 시안 MO 버튼 h52 (PC 48) */
  }
}

/* ── 댓글 모듈 (UT-07 — CRFF-172 2단계, movie-detail 전용 → 공용 승격) ──────────
 * fragments/comment.html(comment-section) + js/components/comment.js 전용 스타일.
 * 원 시안: 영화 상세 PC 627:6322 / MO 627:16732(댓글 영역) — 승격 전과 시각 동일.
 */
.comment-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.comment-section-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.comment-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.comment-count {
  color: var(--color-cta);
}

.comment-form {
  display: flex;
  gap: var(--spacing-16);
  height: 80px;
  align-items: stretch;
}

/* 비로그인 안내 — 댓글 작성 폼 대신 노출 */
.comment-login-notice {
  padding: var(--spacing-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background-section);
  color: var(--color-text-body);
  text-align: center;
}

.comment-login-notice a {
  color: var(--color-cta);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 목록 상태(빈 목록·에러) 안내 */
.comment-state {
  color: var(--color-text-secondary);
  text-align: center;
}

.comment-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-border-button);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  resize: none;
}

.comment-input::placeholder {
  color: var(--color-text-secondary);
}

.comment-submit {
  flex-shrink: 0;
  min-width: 80px;
  padding: 0 var(--spacing-24);
  border: 0;
  border-radius: var(--radius-medium);
  background-color: var(--color-gray-10);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  justify-content: center;
  padding: var(--spacing-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
}

.comment-item--mine {
  border: 2px solid var(--color-gray-10);
}

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-author {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  line-height: 24px;
}

.comment-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-heading);
}

.comment-date {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.comment-controls {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
}

.comment-controls .text-button {
  font-size: 16px;
  color: var(--color-text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.comment-controls .text-button-divider {
  width: 1px;
  height: 16px;
  background-color: var(--color-gray-80);
}

.comment-body {
  display: flex;
  gap: var(--spacing-16);
  align-items: center;
}

.comment-text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
}

/* 하트(공감) 인라인 버튼 */
.comment-like {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-2);
  height: 40px;
  padding: 0 var(--spacing-16) 0 var(--spacing-12);
  align-items: center;
  border: 1px solid var(--color-gray-80);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
}

.comment-like::before {
  content: '';
  width: 28px;
  height: 28px;
  background-color: var(--color-cta);
  mask: url("../images/icon/func-favorit-selected.svg") no-repeat center / contain;
}

.comment-like-count {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-cta);
}

.comment-like--empty::before {
  mask-image: url("../images/icon/func-favorit.svg");
  background-color: var(--color-gray-80);
}

.comment-like--empty .comment-like-count {
  color: var(--color-gray-80);
}

/* 수정 모드 — 인라인 입력 + 수정 버튼 */
.comment-edit {
  display: none;
  gap: var(--spacing-16);
  align-items: stretch;
}

.comment-item.is-editing .comment-body { display: none; }
.comment-item.is-editing .comment-edit { display: flex; }

.comment-edit-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-medium);
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.comment-edit-submit {
  flex-shrink: 0;
  min-width: 64px;
  height: 56px;
  padding: 0 var(--spacing-16);
  border: 0;
  border-radius: var(--radius-small);
  background-color: var(--color-gray-10);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-inverse);
  cursor: pointer;
}

/* 더보기 버튼 래퍼 — [hidden] 이 display:flex 보다 우선(CRFF-174 — 댓글 0건인데도 더보기 노출되던 버그) */
.comment-more {
  display: flex;
  justify-content: center;
}

.comment-more[hidden] {
  display: none;
}

.comment-more .button {
  padding-left: var(--spacing-24);
}

@media (max-width: 1279px) {
  .comment-section-title {
    font-size: 28px;
  }

  .comment-form {
    flex-direction: column;
    height: auto;
    gap: var(--spacing-8);
  }

  .comment-input {
    flex: none;   /* PC 룰 flex:1(basis 0)이 고정 높이를 무효화하지 않게 */
    height: 120px;
    font-size: 16px;   /* iOS 자동 줌 방지 14→16 (CRFF-251 A-1, textarea) */
    line-height: 20px;
  }

  .comment-submit {
    height: 52px;
  }

  .comment-item {
    border-color: var(--color-border-button);   /* 시안 MO #9a9a9a (PC #ddd 상이 — 미확인 목록 #10) */
  }

  .comment-item--mine {
    border: 1px solid var(--color-gray-10);
  }

  .comment-body {
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-start;
  }

  .comment-text {
    font-size: 15px;
  }

  .comment-controls .text-button {
    font-size: 14px;
  }

  .comment-like {
    height: auto;
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-12);
  }

  .comment-like::before {
    width: 20px;
    height: 20px;
  }

  .comment-like-count {
    font-size: 12px;
    line-height: normal;
  }

  .comment-edit {
    flex-direction: column;
    gap: var(--spacing-12);
  }

  .comment-edit-input {
    height: 120px;
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--radius-small);
    font-size: 16px;   /* iOS 자동 줌 방지 15→16 (CRFF-251 A-1) */
    line-height: 22px;
  }

  .comment-edit-submit {
    width: 100%;
    height: 48px;
    font-size: 14px;
  }
}

/* ── 로딩 스피너 (제공 에셋 spinner.png 를 CSS 회전) ──────────────────────────
 * 인라인: <span class="spinner"> — 크기 spinner--sm(24) / 기본(48) / spinner--lg(64)
 * 오버레이: .spinner-overlay (딤+중앙, 부모 position:relative 필요) / --fixed (전체화면)
 *   표시 토글은 모달과 동일하게 .is-open (기본 display:none) — JS 로 add/remove
 * fragment: fragments/components :: spinner(size) / spinner-overlay(fixed)
 * 접근성: prefers-reduced-motion 시 회전 완화 */
.spinner {
  display: inline-block;
  width: var(--spinner-size, 48px);
  height: var(--spinner-size, 48px);
  background: url("../images/common/spinner.png") no-repeat center / contain;
  animation: spinner-rotate 0.9s linear infinite;
}

.spinner--sm {
  --spinner-size: 24px;
}

.spinner--lg {
  --spinner-size: 64px;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 스크린리더 전용 로딩 텍스트 (시각적으로 숨김) */
.spinner-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spinner-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background-color: var(--color-dim-20);
}

.spinner-overlay.is-open {
  display: flex;
}

.spinner-overlay--fixed {
  position: fixed;
  z-index: 1000;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

/* ─────────────────────────────────────────────
   카카오맵 임베드 (CRFF-224) — js/components/kakao-map.js 공용
   지도 컨테이너([data-kakao-map])의 폴백 상태 스타일은 각 화면 CSS 가 담당하고,
   여기서는 지도 로드 후 공통으로 필요한 것(마커 말풍선)만 둔다.
   ───────────────────────────────────────────── */
.kakao-map-overlay {
  display: inline-block;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-medium);
  background-color: var(--color-text-heading);
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}