/*
 * 나눔오피스 디자인 토큰 (D-011 "정밀한 오피스 테크 커머스") — SD-T1 개편
 * 근거: docs/reports/design-direction.md(D-011) · docs/reports/codex-kickoff.md §3 · design/BRIEF.md
 *
 * ⚠️ 브랜드색은 **잠정**(로고 추출값 — 대표 확정 전, design-direction §10·킥오프 §9).
 *    색 수치는 아래 "① 원천 팔레트" 한 곳에만 존재한다. 확정 시 이 블록만 교체하면 전 화면에 반영되고,
 *    대비 재측정 대상도 이 블록으로 한정된다.
 * ⚠️ 서체: 외부 폰트/CDN 로드 금지(킥오프 §3). Pretendard가 로컬/셀프호스트로 존재하면 우선 적용되고,
 *    없으면 시스템 한글 산세리프로 폴백한다.
 *
 * 구조: ① 원천 팔레트(색 수치) → ② 시맨틱 토큰(화면이 참조하는 계약) → ③ 스케일(타이포/간격/라디우스/그림자/모션/z)
 *   화면 CSS는 가급적 ②·③을 참조할 것. ①(--brand-*)을 직접 쓰면 색 확정 시 교체 지점이 흩어진다.
 */

:root {
  /* ═══ ① 원천 팔레트 (잠정 — 로고 추출, 대표 확정 대기) ═══════════ */
  --brand-blue: #0356a7; /* 주색 · 판매(BUY) 계열 */
  --brand-blue-strong: #024884; /* 블루 호버/활성(파생) */
  --brand-teal: #0e7c86; /* 렌탈(RENTAL) 계열 */
  --brand-teal-strong: #0b646c; /* 틸 호버/활성(파생) */
  --brand-red: #9c2427; /* 강조·경고 — 아껴서 사용 */
  --brand-red-strong: #7e1d20; /* 레드 호버/활성(파생) */

  /*
   * 중립 스케일 — 브랜드 블루그레이 계열로 재조정(토큰명은 기존 계약 유지, 값만 교체).
   * 앵커(BRIEF 지정값): 50=배경 · 200=라인 · 700=본문 · 900=잉크. 나머지는 그 사이 보간.
   */
  --color-white: #ffffff; /* BRIEF "서피스" */
  --color-gray-50: #f6f8fb; /* BRIEF "배경" */
  --color-gray-100: #eef2f7;
  --color-gray-200: #e4eaf1; /* BRIEF "라인" */
  --color-gray-300: #cfd8e3;
  --color-gray-400: #a9b6c5;
  --color-gray-500: #7e90a5; /* 폼 컨트롤 경계(흰 배경 3.27:1 — WCAG 1.4.11 충족) */
  --color-gray-600: #5a6b7c; /* 흰 텍스트 얹어도 5.48:1(품절 뱃지 등) */
  --color-gray-700: #4b5a6b; /* BRIEF "본문" */
  --color-gray-800: #2c3a49;
  --color-gray-900: #16202c; /* BRIEF "잉크" — 제목 */

  /* ═══ ② 시맨틱 토큰 (화면 CSS가 참조하는 계약) ═══════════════════ */

  /* 표면·텍스트 */
  --color-bg: var(--color-white); /* 본문·카드 바닥면 */
  --color-surface: var(--color-gray-50); /* 보조 패널(푸터·표 헤더·추천 바) */
  --color-canvas: var(--color-gray-50); /* 페이지 캔버스(섹션 배경 대비용) */
  --color-text: var(--color-gray-900); /* 제목·본문 기본 — 흰 배경 16.44:1 */
  --color-text-muted: var(--color-gray-700); /* 보조 텍스트 — 흰 배경 7.06:1 */
  --color-text-onbrand: var(--color-white); /* 브랜드색 위 텍스트 */

  /* 경계 — 장식 구분선과 컨트롤 경계를 분리(1.4.11은 컨트롤에만 3:1 요구) */
  --color-border: var(--color-gray-200); /* 장식용 1px 라인·카드 테두리 */
  --color-border-strong: var(--color-gray-500); /* 폼 입력 등 UI 컨트롤 경계(3:1) */

  /* 브랜드 역할 */
  --color-primary: var(--brand-blue); /* 주색(브랜드 일반) */
  --color-primary-strong: var(--brand-blue-strong);
  --color-rental: var(--brand-teal); /* 🔴 렌탈 = 틸 (D-011 §4 절대 원칙) */
  --color-rental-strong: var(--brand-teal-strong);
  --color-buy: var(--brand-blue); /* 🔴 판매 = 블루 (D-011 §4 절대 원칙) */
  --color-buy-strong: var(--brand-blue-strong);
  --color-accent: var(--brand-red); /* 포인트·뱃지 강조(아껴서) */
  --color-danger: var(--brand-red); /* 오류·필수 표기 — 흰 배경 7.79:1(텍스트 가능) */
  --color-danger-strong: var(--brand-red-strong);
  --color-danger-bg: #f7ebeb; /* 오류 블록 배경(레드 저채도) */
  --color-notice-bg: #eef3f9; /* 안내 블록 배경(블루 저채도) */

  /* 상태 */
  --color-muted-bg: var(--color-gray-200); /* 비활성 컨트롤 바닥 */
  --color-muted-fg: var(--color-gray-600); /* 비활성 컨트롤 글자 — 4.53:1 */
  --color-focus-ring: var(--brand-blue); /* :focus-visible 링 — 흰 배경 7.26:1 */

  /* ═══ ③ 스케일 ══════════════════════════════════════════════════ */

  /* 타이포: 폰트 스택(Pretendard 우선 · 외부 로드 없음 · 한글 폴백) */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans KR", "Segoe UI", Roboto, sans-serif;

  /* 타이포: 스케일 */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1rem; /* = base (기존 참조 호환) */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.375rem; /* 22px */
  --font-size-2xl: 1.75rem; /* 28px */
  --font-size-3xl: 2.25rem; /* 36px */
  --font-size-4xl: 2.75rem; /* 44px */
  --font-size-5xl: 3.5rem; /* 56px */
  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: 0;

  /* 간격(4/8px 그리드) */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-8: 3rem; /* 48 */
  --space-10: 3.5rem; /* 56 */
  --space-12: 4rem; /* 64 */
  --space-16: 6rem; /* 96 */

  /* 컨테이너 */
  --container-max: 1200px;
  --container-narrow: 640px;

  /* 라운드(카드 6~8px — design-direction §6) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* 그림자(절제 — 드롭다운/호버에만, 잉크 기반) */
  --shadow-hover: 0 2px 6px rgba(22, 32, 44, 0.08);
  --shadow-dropdown: 0 4px 12px rgba(22, 32, 44, 0.12);

  /* 모션(160~220ms — 추천/탭/필터 상태 변화에만) */
  --motion-duration: 180ms;
  --motion-ease: ease;

  /* z-index 레이어(충돌 방지 — 값 직접 기입 금지) */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-skip-link: 1000;

  /* 접근성(D-014 · WCAG 2.2 AA) */
  --focus-ring-width: 3px; /* 요구 2px 이상 */
  --focus-ring-offset: 2px;
  --touch-target-min: 44px;
}

/* 가격 등 숫자 흔들림 방지(등폭 숫자) — design-direction §6 */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* 최소 터치 타깃 유틸(D-014) — 링크/버튼에 부착 */
.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* 전역 포커스 링(D-014 · 2.4.11) — 키보드 포커스만, 흰 배경 7.26:1 */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* 모션 최소화 선호 존중 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}
/*
 * 스토어프런트 공통 컴포넌트 — SD-T1 (전 화면이 공유하는 계층)
 * design_tokens.css 의 시맨틱 토큰만 참조한다(색 수치 하드코딩 금지 — 브랜드색 확정 시 토큰만 교체).
 *
 * 🔴 소유 경계: 여기 정의된 컴포넌트(버튼·뱃지·카드·폼·flash·빈상태·페이지네이션·컨테이너)는
 *    **본 파일이 단일 정의처**다. 화면 전용 CSS(storefront_catalog/product/auth/...)는 이 위에
 *    화면 고유 배치만 얹을 것 — 같은 셀렉터를 재정의하면 이후 태스크끼리 충돌한다.
 *
 * 🔴 D-011 §4 절대 원칙: 렌탈=틸(--color-rental) / 판매=블루(--color-buy). 뱃지·버튼·가격 라벨에 일관 적용.
 *    색만으로 구분하지 않는다 — 뱃지는 항상 텍스트(RENTAL/BUY/중고/품절)를 병기한다(WCAG 1.4.1).
 *
 * 마크업 계약: product_trade_badge/_product_card 헬퍼·kaminari 기본 테마가 출력하는 클래스에 맞춘다.
 */

/* ══ 유틸: 컨테이너 ══════════════════════════════════════════════ */
.sf-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.sf-container--narrow {
  max-width: var(--container-narrow);
}

/* ══ 버튼 ════════════════════════════════════════════════════════
 * 두 크기 별칭: .sf-btn(중간) · .sf-cta(대형 CTA — 상세/폼 제출에 기존 뷰가 사용).
 * 변형: 주(primary)·보조(secondary·기본값)·렌탈(rental)·판매(buy)·비활성(disabled).
 * ⚠️ 헤더 진입 버튼 .sf-entry 는 chrome(application.css) 소유 — 여기서 정의하지 않는다(T2 경계).
 */
.sf-btn,
.sf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  line-height: var(--line-height-tight);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease);
}

/* 크기: .sf-btn 중간 / .sf-cta 대형 */
.sf-btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.sf-cta {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

/*
 * 보조(기본값) — 변형 클래스 없는 .sf-btn/.sf-cta 는 아웃라인 버튼이다.
 * (개편 전 .sf-cta 는 배경 없이 흰 글자만 지정해 흰 배경에서 보이지 않았다 — 여기서 해소)
 */
.sf-btn,
.sf-btn--secondary,
.sf-cta {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.sf-btn:hover,
.sf-btn--secondary:hover,
.sf-cta:hover {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
}

/* 주 · 판매(BUY) — 브랜드 블루 위 흰 텍스트 7.26:1 */
.sf-btn--primary,
.sf-btn--buy,
.sf-cta--buy {
  background: var(--color-buy);
  border-color: var(--color-buy);
  color: var(--color-text-onbrand);
}

.sf-btn--primary:hover,
.sf-btn--buy:hover,
.sf-cta--buy:hover {
  background: var(--color-buy-strong);
  border-color: var(--color-buy-strong);
}

/* 렌탈(RENTAL) — 틸 위 흰 텍스트 4.95:1 */
.sf-btn--rental,
.sf-cta--rental {
  background: var(--color-rental);
  border-color: var(--color-rental);
  color: var(--color-text-onbrand);
}

.sf-btn--rental:hover,
.sf-cta--rental:hover {
  background: var(--color-rental-strong);
  border-color: var(--color-rental-strong);
}

/* 비활성 — WCAG 대비 요구 면제 대상이나 가독성 확보(4.53:1) */
.sf-btn--disabled,
.sf-cta--disabled,
.sf-btn:disabled,
.sf-cta:disabled,
.sf-btn[aria-disabled="true"] {
  background: var(--color-muted-bg);
  border-color: var(--color-muted-bg);
  color: var(--color-muted-fg);
  cursor: not-allowed;
}

/* 크기 변형 */
.sf-btn--lg,
.sf-cta--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.sf-btn--sm {
  min-height: auto;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.sf-btn--block {
  display: flex;
  width: 100%;
}

/* ══ 뱃지 ════════════════════════════════════════════════════════
 * 마크업 계약: product_trade_badge 가 .sf-badge--rental("RENTAL")/.sf-badge--buy("BUY"/"중고"),
 * _product_card 가 .sf-badge--soldout("품절")을 출력한다. 색은 항상 텍스트와 병기(1.4.1).
 */
.sf-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: 0.02em;
  color: var(--color-text-onbrand);
  white-space: nowrap;
}

.sf-badge--rental {
  background: var(--color-rental); /* 🔴 렌탈 = 틸 */
}

.sf-badge--buy {
  background: var(--color-buy); /* 🔴 판매/중고 = 블루 */
}

.sf-badge--soldout {
  background: var(--color-gray-600); /* 흰 텍스트 5.48:1 */
}

.sf-badge--hot {
  background: var(--color-accent); /* 인기/강조 — 레드는 아껴서(D-011 §6) */
}

/* ══ 카드 ════════════════════════════════════════════════════════
 * 마크업 계약: app/views/shared/_product_card.html.erb
 */
.sf-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  transition: box-shadow var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease);
}

.sf-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-hover);
}

.sf-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.sf-card__thumb {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
}

.sf-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

.sf-card__noimg {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sf-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-3);
}

.sf-card__badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.sf-card__name {
  min-height: 2.5em;
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.sf-card__brand {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sf-card__price {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.sf-card--rental .sf-card__price {
  color: var(--color-rental);
}

.sf-card--buy .sf-card__price {
  color: var(--color-buy);
}

.sf-card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-card__action .sf-icon {
  width: 16px;
  height: 16px;
}

/* ══ 판매 카테고리 탐색 ═══════════════════════════════════════ */
.sf-sales-category-nav ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-sales-category-nav li {
  min-width: 0;
}

.sf-sales-category-nav li + li {
  border-left: 1px solid var(--color-border);
}

.sf-sales-category-nav__link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-3);
  min-height: 104px;
  padding: var(--space-4);
  color: var(--color-text);
  transition: color var(--motion-duration) var(--motion-ease),
    background-color var(--motion-duration) var(--motion-ease);
}

.sf-sales-category-nav__link:hover,
.sf-sales-category-nav__link.is-current {
  background: #eef4fa;
  color: var(--color-buy);
}

.sf-sales-category-nav__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #c4d4e3;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-buy);
}

.sf-sales-category-nav__icon .sf-icon {
  width: 23px;
  height: 23px;
}

.sf-sales-category-nav__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sf-sales-category-nav__copy strong,
.sf-sales-category-nav__copy small,
.sf-sales-category-nav__copy em {
  overflow-wrap: anywhere;
}

.sf-sales-category-nav__copy strong {
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.sf-sales-category-nav__copy small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-sales-category-nav__copy em {
  color: var(--color-buy);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

.sf-sales-category-nav__arrow {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
}

@media (max-width: 1020px) {
  .sf-sales-category-nav ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-sales-category-nav li:nth-child(4) {
    border-left: 0;
  }

  .sf-sales-category-nav li:nth-child(n + 4) {
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .sf-sales-category-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-sales-category-nav li:nth-child(odd) {
    border-left: 0;
  }

  .sf-sales-category-nav li:nth-child(4) {
    border-left: 1px solid var(--color-border);
  }

  .sf-sales-category-nav li:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .sf-sales-category-nav__link {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 90px;
    padding: var(--space-3);
  }

  .sf-sales-category-nav__icon {
    width: 36px;
    height: 36px;
  }

  .sf-sales-category-nav__arrow {
    display: none;
  }
}

/* ══ 폼 ══════════════════════════════════════════════════════════
 * 마크업 계약: .sf-field 안에 label/legend + 컨트롤. 오류 요약은 .sf-form-errors(role=alert).
 * 컨트롤 경계는 --color-border-strong(3:1) — 장식 라인(--color-border)은 대비 미달이라 컨트롤에 쓰지 않는다.
 */
.sf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.sf-field > label,
.sf-field > legend,
.sf-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.sf-field input[type="email"],
.sf-field input[type="password"],
.sf-field input[type="text"],
.sf-field input[type="tel"],
.sf-field input[type="number"],
.sf-field input[type="search"],
.sf-field select,
.sf-field textarea {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.sf-field textarea {
  min-height: calc(var(--touch-target-min) * 2);
  line-height: var(--line-height-normal);
  resize: vertical;
}

.sf-field input:disabled,
.sf-field select:disabled,
.sf-field textarea:disabled {
  background: var(--color-muted-bg);
  color: var(--color-muted-fg);
  cursor: not-allowed;
}

.sf-field input[aria-invalid="true"],
.sf-field select[aria-invalid="true"],
.sf-field textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.sf-field__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sf-field__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger); /* 흰 배경 7.79:1 */
}

/* 필수 표기 — 색만으로 전달하지 않도록 별표 기호를 함께 쓴다(1.4.1) */
.sf-required {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.sf-radio,
.sf-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  font-size: var(--font-size-base);
}

/* 오류 요약 블록(role="alert") */
.sf-form-errors {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-danger-bg);
  color: var(--color-text);
}

.sf-form-errors ul {
  margin: 0;
  padding-left: var(--space-4);
}

.sf-form-notice,
.sf-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-form-notice {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-primary);
  background: var(--color-notice-bg);
}

.sf-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.sf-back {
  margin-bottom: var(--space-4);
}

.sf-consents {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sf-consent {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.sf-consent__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.sf-consent__ver {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-consent__body {
  max-height: 160px;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-consent__body p:last-child {
  margin-bottom: 0;
}

.sf-consent__pii {
  padding: var(--space-4);
  background: var(--color-surface);
}

.sf-pii-notice {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
}

.sf-pii-notice dt {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.sf-pii-notice dd {
  margin: 0;
}

@media (max-width: 520px) {
  .sf-pii-notice {
    grid-template-columns: 1fr;
  }
}

/* ══ flash(notice/alert) ═════════════════════════════════════════
 * PRG 결과 통보용. 색만으로 구분되지 않도록 렌더 시 텍스트를 함께 제공하고 role 을 부여할 것
 * (notice → role="status", alert → role="alert"). 레이아웃 배선은 후속 태스크(chrome/장바구니) 몫.
 */
.sf-flash {
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border-left: 4px solid var(--color-border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.sf-flash--notice {
  border-left-color: var(--color-primary);
  background: var(--color-notice-bg);
}

.sf-flash--alert {
  border-left-color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* ══ 주문 접수 일시 정지 띠 (AP5-T1 / A16) ═══════════════════════════
 * shared/_orders_paused_notice — 레이아웃이 헤더 바로 아래 모든 페이지에 렌더(정지 중에만 존재).
 * 장바구니 요약의 안내(.sf-orders-paused__cart)는 .sf-flash--alert 위에 간격만 얹는다.
 */
.sf-orders-paused {
  border-top: 1px solid var(--color-danger);
  border-bottom: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-text);
}

.sf-orders-paused__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.sf-orders-paused__label {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.sf-orders-paused__cart {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--font-size-sm);
}

/* ══ 임시 비밀번호 안내 띠 (P10-RETAIN-6 X2) ══════════════════════
 * shared/_temporary_password_notice — 레이아웃이 헤더 아래 모든 페이지에 렌더(임시 비밀번호 중에만 존재).
 * 🔴 **막는 장치가 아니라 알리는 장치다.** 그래서 오류색(레드)이 아니라 안내색(블루)을 쓰고,
 *   닫기 버튼과 "바꾸러 가기" 버튼을 같은 줄에 둔다 — 길 없는 안내는 잔소리일 뿐이다.
 */
.sf-temp-password-notice {
  /* 🔴 AA2: 자기 쌓임 맥락을 갖는다 — 평범한 흐름의 어떤 요소도 이 띠를 덮지 못한다.
     사이트 팝업(.sf-site-popup, z-index 60)보다는 아래다. 진짜 모달은 덮는 것이 맞다. */
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  background: var(--color-notice-bg);
  color: var(--color-text);
}

.sf-temp-password-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.sf-temp-password-notice__text {
  margin: 0;
}

.sf-temp-password-notice__label {
  color: var(--color-primary-strong);
  font-weight: var(--font-weight-bold);
}

.sf-temp-password-notice__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 닫기는 눌러도 되고 안 눌러도 되는 것이라 버튼처럼 강조하지 않는다(밑줄 있는 보조 글). */
.sf-temp-password-notice__dismiss {
  /* 닫기도 손가락으로 누른다 — 최소 크기를 지킨다(WCAG 2.5.8). */
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}

.sf-temp-password-notice__dismiss:hover {
  color: var(--color-text);
}

/* ══ 빈 상태 ═════════════════════════════════════════════════════ */
.sf-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-empty__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.sf-empty p {
  margin: 0;
}

/* ══ 페이지네이션 ════════════════════════════════════════════════
 * 마크업 계약: kaminari 기본 테마 — nav.pagination > span.first/.prev/.page(.current)/.gap/.next/.last
 * (뷰가 .sf-pagination 으로 감싸는 경우와 그렇지 않은 경우 모두 대응)
 */
.sf-pagination {
  margin: var(--space-6) 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-6) 0;
  font-size: var(--font-size-sm);
}

.sf-pagination .pagination {
  margin: 0;
}

.pagination .page,
.pagination .first,
.pagination .prev,
.pagination .next,
.pagination .last {
  display: inline-flex;
}

.pagination a,
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--motion-duration) var(--motion-ease);
}

.pagination a:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

/* 현재 페이지 — 색 + 굵기 + aria-current 로 중복 전달 */
.pagination .current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-onbrand);
  font-weight: var(--font-weight-bold);
}

.pagination .gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  min-height: var(--touch-target-min);
  color: var(--color-text-muted);
}

/* AP5-T5 / A23: 주인을 못 찾은 입금 안내 — 놀라게 하지 않되 눈에 걸리게(경고색 아닌 안내 톤). */
.sf-unmatched-deposits {
  margin: var(--sf-space-6, 1.5rem) 0;
  padding: var(--sf-space-4, 1rem);
  border: 1px solid var(--sf-border, #e2e5ea);
  border-radius: var(--sf-radius-md, 10px);
  background: var(--sf-surface-muted, #f7f8fa);
}

.sf-unmatched-deposits__title {
  margin: 0 0 var(--sf-space-2, 0.5rem);
  font-size: 1rem;
  font-weight: 700;
}

.sf-unmatched-deposits__lead {
  margin: 0 0 var(--sf-space-3, 0.75rem);
  color: var(--sf-text-muted, #5a6270);
  font-size: 0.9rem;
}

.sf-unmatched-deposits__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sf-unmatched-deposits__table th,
.sf-unmatched-deposits__table td {
  padding: var(--sf-space-2, 0.5rem) var(--sf-space-3, 0.75rem);
  border-bottom: 1px solid var(--sf-border, #e2e5ea);
  text-align: left;
}

.sf-unmatched-deposits__table tbody tr:last-child td {
  border-bottom: 0;
}

/* AP5-T16 / A11: 사이트 공지 띠 — 주문 정지 띠와 같은 자리·같은 높이감(줄이 겹쳐도 화면이 흔들리지 않게).
   색은 관리자가 정하면 인라인 스타일이 덮어쓴다. */
.sf-site-banner--strip {
  background: var(--sf-brand-soft, #eef2ff);
  color: var(--sf-text, #1f2430);
  border-bottom: 1px solid var(--sf-border, #e2e5ea);
  font-size: 0.9rem;
}

.sf-site-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3, 0.75rem);
  margin: 0;
  padding: var(--sf-space-2, 0.5rem) var(--sf-space-4, 1rem);
}

.sf-site-banner__text {
  flex: 1;
  color: inherit;
}

.sf-site-banner__close {
  flex: none;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  /* 손가락으로 누를 수 있는 크기(WCAG 2.5.8 최소 24px) */
  min-width: 32px;
  min-height: 32px;
}

/* 팝업 — 화면 가운데. 모바일에서는 폭을 꽉 채우되 좌우 여백을 남긴다. */
.sf-site-popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sf-space-4, 1rem);
  background: rgba(15, 18, 25, 0.55);
}

/* 🔴 rework-1 / T16-4: 위의 display:flex 가 UA 의 [hidden]{display:none} 보다 우선해, 닫아도 오버레이가
   화면을 계속 가렸다(실브라우저 실측). hidden 이 붙으면 반드시 사라지게 명시한다 — 기존 관례
   (.sf-video__end[hidden] 등)와 같다. 띠는 지금 display 를 안 건드리지만 같은 함정을 미리 막아 둔다. */
.sf-site-popup[hidden] {
  display: none;
}

.sf-site-banner--strip[hidden] {
  display: none;
}

.sf-site-popup__panel {
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--sf-surface, #fff);
  border-radius: var(--sf-radius-lg, 14px);
  box-shadow: 0 18px 40px rgba(15, 18, 25, 0.25);
}

.sf-site-popup__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sf-radius-lg, 14px) var(--sf-radius-lg, 14px) 0 0;
}

.sf-site-popup__body {
  margin: 0;
  padding: var(--sf-space-4, 1rem);
  font-size: 0.95rem;
}

.sf-site-popup__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3, 0.75rem);
  padding: var(--sf-space-3, 0.75rem) var(--sf-space-4, 1rem);
  border-top: 1px solid var(--sf-border, #e2e5ea);
}

.sf-site-popup__dismiss {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2, 0.5rem);
  font-size: 0.9rem;
  color: var(--sf-text-muted, #5a6270);
}

.sf-site-popup__close {
  min-height: 40px;
  padding: 0 var(--sf-space-4, 1rem);
  border: 1px solid var(--sf-border, #e2e5ea);
  border-radius: var(--sf-radius-md, 10px);
  background: var(--sf-surface, #fff);
  cursor: pointer;
}

@media (max-width: 480px) {
  .sf-site-popup__panel { width: 100%; }
  .sf-site-popup__actions { flex-direction: column; align-items: stretch; }
}
/*
 * 스토어프론트 카탈로그 화면 전용 스타일 (SF-02/03/04) — P2-T6.
 * design_tokens.css 토큰만 참조(application.css·design_tokens.css는 수정하지 않음).
 */

/* ── 상품 그리드 ─────────────────────────────────────────────── */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

/* ── 상품 카드·거래유형 배지: storefront_components.css 소유(중복 정의 금지) ── */

/* ── 브레드크럼 ──────────────────────────────────────────────── */
.sf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sf-breadcrumb__list li:not(:first-child)::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-gray-400);
}

/* ── 섹션 헤더(더보기) ───────────────────────────────────────── */
.sf-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.sf-section__more {
  font-size: var(--font-size-sm);
  color: var(--color-buy);
}

/* ── 빈 상태(.sf-empty)·페이지네이션(.sf-pagination): storefront_components.css 소유 ── */
.sf-search-summary {
  color: var(--color-text-muted);
}

.sf-search-empty .sf-search--results {
  margin: var(--space-5) auto var(--space-3);
  background: var(--color-white);
  text-align: left;
}

.sf-search-empty > .sf-text-link {
  display: inline-flex;
  margin-top: var(--space-2);
}

.sf-catalog-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0 calc(var(--space-3) * -1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-catalog-status p {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.sf-catalog-status strong {
  color: var(--color-text);
}

.sf-catalog-status__sort {
  flex: 0 0 auto;
}

.sf-catalog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.sf-catalog-heading h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
}

.sf-catalog-heading > p {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-catalog-heading__label {
  margin: 0 0 var(--space-2);
  color: var(--color-rental);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-catalog-heading--buy .sf-catalog-heading__label {
  color: var(--color-buy);
}

.sf-catalog-heading--rental .sf-catalog-heading__label {
  color: var(--color-rental);
}

.sf-catalog-heading + .sf-sales-category-nav {
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-6);
}

.sf-catalog-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px 170px auto auto;
  align-items: end;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sf-catalog-filter > div {
  display: grid;
  gap: var(--space-1);
  align-self: center;
}

.sf-catalog-filter > div span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-catalog-filter label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.sf-catalog-filter select {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.sf-catalog-filter__reset {
  align-self: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 공급 확정 전 판매 카테고리 골격 ─────────────────────────── */
.sf-candidate-catalog {
  margin: var(--space-6) 0 var(--space-10);
}

.sf-candidate-catalog__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-top: 3px solid var(--color-buy);
  border-bottom: 1px solid var(--color-border);
}

.sf-candidate-catalog__intro h2 {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.sf-candidate-catalog__intro p {
  max-width: 760px;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.sf-candidate-catalog__status {
  display: grid;
  gap: var(--space-1);
  min-width: 190px;
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-border);
}

.sf-candidate-catalog__status strong {
  color: var(--color-buy);
}

.sf-candidate-catalog__status span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-candidate-catalog__criteria {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
}

.sf-candidate-catalog__criteria > strong {
  font-size: var(--font-size-lg);
}

.sf-candidate-catalog__criteria ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-candidate-catalog__criteria li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 72px;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-candidate-catalog__criteria li + li {
  border-left: 1px solid var(--color-border);
}

.sf-candidate-catalog__criteria li span {
  color: var(--color-buy);
  font-variant-numeric: tabular-nums;
}

.sf-candidate-catalog__products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sf-candidate-catalog__products article {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sf-candidate-catalog__products article > span {
  display: block;
  padding: var(--space-3) var(--space-4) 0;
  color: var(--color-buy);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-candidate-catalog__placeholder {
  display: grid;
  place-items: center;
  height: 180px;
  margin: var(--space-3) var(--space-4);
  border: 1px solid #d6e2ed;
  border-radius: var(--radius-md);
  background: #eef4fa;
  color: #6f8faa;
}

.sf-candidate-catalog__placeholder .sf-icon {
  width: 72px;
  height: 72px;
  stroke-width: 1.4;
}

.sf-candidate-catalog__products h3,
.sf-candidate-catalog__products article > p,
.sf-candidate-catalog__products dl {
  margin-right: var(--space-4);
  margin-left: var(--space-4);
}

.sf-candidate-catalog__products h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xl);
}

.sf-candidate-catalog__products article > p {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-candidate-catalog__products dl {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sf-candidate-catalog__products dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.sf-candidate-catalog__products dt {
  color: var(--color-text-muted);
}

.sf-candidate-catalog__products dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.sf-candidate-catalog__notice {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-5) 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-buy);
  background: #eef4fa;
}

.sf-candidate-catalog__notice > div {
  margin-right: auto;
}

.sf-candidate-catalog__notice p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-candidate-catalog__notice .sf-cta {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-5);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.sf-candidate-catalog > .sf-sales-category-nav {
  margin-top: var(--space-8);
}

/* ── 추천 결과 ───────────────────────────────────────────────── */
.sf-recommendation-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-5);
  padding: var(--space-6);
  border: 1px solid #d5e2eb;
  border-radius: var(--radius-lg);
  background: #eef4f8;
}

.sf-recommendation-hero__copy {
  align-self: center;
  padding: var(--space-5);
}

.sf-recommendation-hero__copy h1 {
  margin: 0;
  font-size: var(--font-size-4xl);
  line-height: 1.2;
  word-break: keep-all;
}

.sf-recommendation-hero__copy h1 span {
  color: var(--color-primary);
}

.sf-recommendation-hero__lead {
  max-width: 560px;
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
}

.sf-recommendation-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-6) 0 var(--space-5);
  border-top: 1px solid #cbd9e4;
  border-bottom: 1px solid #cbd9e4;
}

.sf-recommendation-criteria > div {
  min-width: 0;
  padding: var(--space-4) var(--space-3);
}

.sf-recommendation-criteria > div + div {
  border-left: 1px solid #cbd9e4;
}

.sf-recommendation-criteria dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-recommendation-criteria dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--font-weight-bold);
  word-break: keep-all;
}

.sf-recommendation-featured {
  display: grid;
  grid-template-columns: minmax(200px, 0.88fr) minmax(230px, 1.12fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-hover);
}

.sf-recommendation-featured__thumb {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 390px;
  padding: var(--space-5);
  background: var(--color-gray-100);
}

.sf-recommendation-featured__image {
  width: 100%;
  max-height: 350px;
  object-fit: contain;
}

.sf-recommendation-featured__thumb .sf-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

.sf-recommendation-featured__body {
  align-self: center;
  padding: var(--space-6);
}

.sf-recommendation-featured__body small {
  color: var(--color-rental);
  font-weight: var(--font-weight-bold);
}

.sf-recommendation-featured__body h2 {
  margin: var(--space-2) 0;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  word-break: keep-all;
}

.sf-recommendation-featured__price {
  margin: 0;
  color: var(--color-rental);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.sf-recommendation-featured__body ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-recommendation-featured__body li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  word-break: keep-all;
}

.sf-recommendation-featured__body li .sf-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-rental);
}

.sf-recommendation-featured__body .sf-cta {
  width: 100%;
  padding-right: var(--space-3);
  padding-left: var(--space-3);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.sf-recommend__disclaimer {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-notice-bg);
}

.sf-recommendation-more {
  margin-top: var(--space-8);
}

.sf-recommendation-more h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
}

.sf-recommendation-more .sf-section__head p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.sf-recommend__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-recommend__cta > div {
  display: grid;
  gap: var(--space-1);
  margin-right: auto;
}

.sf-recommend__cta > div span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-recommend__cta .sf-note {
  color: var(--color-text);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-recommendation-hero {
    grid-template-columns: 1fr;
  }

  .sf-recommendation-featured {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  }

  .sf-catalog-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-catalog-filter > div {
    grid-column: 1 / -1;
  }

  .sf-candidate-catalog__intro {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .sf-candidate-catalog__status {
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .sf-candidate-catalog__criteria {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .sf-catalog-heading {
    align-items: flex-start;
    margin-top: var(--space-4);
  }

  .sf-catalog-heading h1 {
    font-size: var(--font-size-2xl);
  }

  .sf-catalog-filter {
    grid-template-columns: 1fr;
  }

  .sf-catalog-filter > div {
    grid-column: auto;
  }

  .sf-catalog-filter .sf-btn {
    width: 100%;
  }

  .sf-catalog-status {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .sf-card__body {
    padding: var(--space-3);
  }

  .sf-card__name {
    min-height: 2.5em;
    font-size: var(--font-size-sm);
  }

  .sf-card__price {
    font-size: var(--font-size-base);
  }

  .sf-recommendation-hero {
    margin-top: var(--space-5);
    padding: var(--space-4);
  }

  .sf-recommendation-hero__copy {
    padding: var(--space-3);
  }

  .sf-recommendation-hero__copy h1 {
    font-size: var(--font-size-2xl);
  }

  .sf-recommendation-criteria {
    grid-template-columns: 1fr;
  }

  .sf-recommendation-criteria > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sf-recommendation-criteria > div + div {
    border-top: 1px solid #cbd9e4;
    border-left: 0;
  }

  .sf-recommendation-featured {
    grid-template-columns: 1fr;
  }

  .sf-recommendation-featured__thumb {
    min-height: 280px;
  }

  .sf-recommendation-featured__body {
    padding: var(--space-5);
  }

  .sf-recommend__cta {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-recommend__cta > div {
    margin-right: 0;
  }

  .sf-recommend__cta .sf-cta {
    width: 100%;
  }

  .sf-candidate-catalog__intro h2 {
    font-size: var(--font-size-2xl);
  }

  .sf-candidate-catalog__criteria ol,
  .sf-candidate-catalog__products {
    grid-template-columns: 1fr;
  }

  .sf-candidate-catalog__criteria li + li {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .sf-candidate-catalog__notice {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-candidate-catalog__notice > div {
    margin-right: 0;
  }

  .sf-candidate-catalog__notice .sf-cta {
    width: 100%;
  }
}
/* 상품 상세: 제품 확인과 렌탈/판매 전환을 분리한 정밀 커머스 레이아웃. */

.sf-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  gap: var(--space-10);
  margin: var(--space-5) 0 var(--space-12);
  align-items: start;
}

.sf-product__media {
  display: grid;
  gap: var(--space-3);
}

.sf-product__gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.sf-product__media-frame {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.sf-product__img,
.sf-product__noimg {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sf-product__media-note {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-product__img {
  object-fit: contain;
  padding: var(--space-5);
}

.sf-product__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.sf-product__info {
  position: sticky;
  top: var(--space-5);
}

.sf-product__info--flow {
  position: static;
}

.sf-product__badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.sf-product__name {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-3xl);
  line-height: 1.25;
}

.sf-product__brand {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.sf-product__summary {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.sf-product__price {
  margin: var(--space-2) 0;
  color: var(--color-buy);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.sf-product__rental-lead {
  margin: var(--space-4) 0 0;
  color: var(--color-rental);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.sf-sale-box,
.sf-rental-configurator {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sf-sale-box > div:first-child > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-sale-box--used {
  border-top: 3px solid var(--color-buy);
}

.sf-sale-box__notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-left: 3px solid var(--color-buy);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-sale-form {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sf-sale-form__quantity input {
  text-align: center;
}

.sf-sale-meta,
.sf-rental-summary dl,
.sf-rental-order__summary dl {
  margin: var(--space-5) 0 0;
}

.sf-sale-meta > div,
.sf-rental-summary dl > div,
.sf-rental-order__summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-sale-meta dt,
.sf-rental-summary dt,
.sf-rental-order__summary dt {
  color: var(--color-text-muted);
}

.sf-sale-meta dd,
.sf-rental-summary dd,
.sf-rental-order__summary dd {
  margin: 0;
  text-align: right;
}

.sf-rental-configurator {
  border-top: 3px solid var(--color-rental);
}

.sf-rental-configurator__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.sf-rental-configurator__head h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xl);
}

.sf-rental-configurator__head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-rental-configurator__head > span {
  flex: 0 0 auto;
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-rental-options {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) 0;
}

.sf-rental-plan-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-left: 3px solid var(--color-rental);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

.sf-rental-plan-state strong {
  color: var(--color-rental-strong);
}

.sf-rental-plan-state span {
  color: var(--color-text-muted);
}

.sf-rental-option {
  margin: 0;
  padding: 0;
  border: 0;
}

.sf-rental-option legend {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.sf-rental-option__choice {
  gap: var(--space-2);
}

.sf-rental-option__choice strong {
  font-size: inherit;
}

.sf-rental-option__delta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.sf-segmented input:checked + .sf-rental-option__choice .sf-rental-option__delta {
  color: var(--color-rental);
}

.sf-rental-service-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid #c9dedc;
  background: #f5fbfa;
  font-size: var(--font-size-sm);
}

.sf-rental-service-note strong {
  color: var(--color-rental-strong);
}

.sf-rental-service-note span {
  min-width: 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.sf-rental-service-note em {
  color: var(--color-rental);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.sf-rental-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-5);
  background: #edf8f7;
}

.sf-rental-summary > div > span,
.sf-rental-summary > div > small {
  display: block;
}

.sf-rental-summary > div > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-rental-summary > div > strong {
  display: block;
  margin: var(--space-1) 0;
  color: var(--color-rental);
  font-size: var(--font-size-3xl);
}

.sf-rental-summary > div > small {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.sf-rental-summary dl {
  margin: 0;
}

.sf-rental-summary dt {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sf-rental-summary dd {
  min-width: 0;
  word-break: keep-all;
}

.sf-rental-configurator__status {
  margin: var(--space-3) 0 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.sf-rental-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sf-rental-actions form,
.sf-rental-actions .sf-cta {
  width: 100%;
}

.sf-rental-configurator--empty {
  border-top-color: var(--color-rental);
  background: var(--color-surface);
}

.sf-rental-configurator--empty .sf-rental-configurator__eyebrow {
  color: var(--color-rental);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-rental-configurator--empty h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.sf-rental-configurator--empty > p {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-rental-configurator--empty ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  list-style-position: inside;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-product__section {
  margin: var(--space-12) 0;
}

.sf-product__description {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

/* SAMSUNG-GALLERY-1: 제조사 시리즈 공용 이미지 고지. 사진 바로 아래 — 무엇에 대한 안내인지 분명하게.
   경고가 아니라 안내이므로 danger 색이 아니라 muted 로 두되, 왼쪽 선으로 본문과 구분한다. */
.sf-gallery__notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.sf-gallery__notice strong { color: var(--color-text); }

/* MAKER-DETAIL-1: 제조사 공식 상세 자료.
   조각을 이어 붙여 **한 장처럼** 보여야 한다 — 조각 사이에 간격이나 선이 보이면 잘린 티가 난다.
   그래서 display:block + 여백 0 + vertical-align 제거(인라인 요소의 baseline 틈 방지). */
.sf-detail {
  margin: 0 auto;
  max-width: 1200px;
  font-size: 0;                 /* 조각 사이 공백 문자로 생기는 틈 제거 */
}

.sf-detail__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  vertical-align: top;
}

.sf-detail__source {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: right;
}

.sf-product__section > .sf-section__title {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
}

.sf-spec-table th,
.sf-spec-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.sf-spec-table th[scope="row"] {
  width: 30%;
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
}

/* AP5-T3: 상품정보제공고시 표 — 사양표와 같은 결(sf-spec-table 재사용), 구간 여백·제목 밑줄은 sf-product__section 과 동일.
   긴 값(주요 사양·A/S 안내)은 셀 안에서 줄바꿈되게 한다(가로 스크롤 금지). */
.sf-product-notice {
  margin: var(--space-12) 0;
}

.sf-product-notice > .sf-section__title {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-product-notice .sf-spec-table td {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.sf-richtext {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
}

.sf-richtext img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.sf-richtext table {
  max-width: 100%;
  border-collapse: collapse;
}

.sf-richtext th,
.sf-richtext td {
  overflow-wrap: anywhere;
}

.sf-richtext iframe,
.sf-richtext video {
  max-width: 100%;
}

/* 영상은 상품 사진 칼럼 안, 사진 바로 아래에 둔다.
   🔴 처음엔 후기 아래(페이지 93% 지점)에 있어 아무도 못 봤다(실측) — 판단에 쓰는 자료라 위로 올렸다. */
.sf-product__media .sf-product__video {
  margin-top: var(--space-6);
}

.sf-product__media .sf-product__video .sf-section__title {
  margin-bottom: var(--space-3);
}

.sf-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 760px;
}

.sf-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sf-video__fallback {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* VIDEO-END-1 — 파사드(클릭 후 로드) + 종료 카드.
   🔴 재생 전에는 유튜브로 요청이 나가지 않게 iframe 대신 이 버튼만 그린다.
   외부 썸네일(i.ytimg.com)을 쓰지 않는 이유: CSP img-src 를 넓히지 않으려는 것 + 브랜드 일관성. */
.sf-video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(140deg, #16233a 0%, #0c1524 100%);
  color: #fff;
  cursor: pointer;
}

.sf-video__facade:hover .sf-video__play,
.sf-video__facade:focus-visible .sf-video__play {
  transform: scale(1.06);
}

/* 재생 삼각형 — 아이콘 파일 없이 CSS 로만(자산 추가 없음). 터치 타깃 ≥44px(D-014 AA). */
.sf-video__play {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-primary, #1f6feb);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}

.sf-video__play::after {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

.sf-video__facade-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0 var(--space-4);
  text-align: center;
  word-break: keep-all;
}

.sf-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 🔴 종료 카드 — 영상이 끝나기 직전에 덮어 유튜브 추천 영상이 뜰 자리를 없앤다.
   iframe 위에 와야 하므로 z-index 를 준다(서버가 미리 렌더하고 JS 는 hidden 만 토글). */
.sf-video__end {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
  border-radius: var(--radius-md);
  background: rgba(9, 16, 28, 0.94);
  color: #fff;
}

.sf-video__end[hidden] {
  display: none;
}

.sf-video__end-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
}

.sf-video__end-phone {
  margin: 0;
}

.sf-video__end-tel {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.sf-video__end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.sf-video__end-btn {
  min-height: 44px; /* D-014 AA 터치 타깃 */
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.sf-video__end-btn--primary {
  border-color: transparent;
  background: var(--color-primary, #1f6feb);
}

/* 유튜브가 차단돼 재생을 시작하지 못한 경우 — 대체 링크를 눈에 띄게 올린다(깨진 화면 금지). */
.sf-video.is-video-failed .sf-video__facade {
  opacity: 0.6;
}

.sf-video.is-video-failed + .sf-video__fallback {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 1120px) {
  .sf-rental-summary {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .sf-rental-summary dl {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .sf-product {
    grid-template-columns: 1fr;
  }

  .sf-product__info {
    position: static;
  }
}

@media (max-width: 640px) {
  .sf-product {
    gap: var(--space-6);
    margin-top: var(--space-3);
  }

  .sf-product__name {
    font-size: var(--font-size-2xl);
  }

  .sf-sale-box,
  .sf-rental-configurator {
    padding: var(--space-4);
  }

  .sf-sale-form,
  .sf-rental-summary,
  .sf-rental-actions {
    grid-template-columns: 1fr;
  }

  .sf-rental-service-note {
    grid-template-columns: 1fr auto;
  }

  .sf-rental-service-note span {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sf-rental-plan-state {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .sf-rental-summary > div > strong {
    font-size: var(--font-size-2xl);
  }
}

/* ── TOP-BTN-1: 상품 상세 "맨 위로" 플로팅 버튼 ───────────────────────── */
/* 기본 숨김(진행적 향상) — Stimulus(scroll-top)가 스크롤 임계 초과 시 .is-visible 부여. */
.sf-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-5);
  z-index: 40;
  display: inline-grid;
  place-items: center;
  width: 48px;                 /* 터치 타깃 ≥44px */
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-onbrand);
  box-shadow: var(--shadow-dropdown);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;          /* 숨김 상태에서 탭 순서·포커스 제외 */
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.sf-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sf-to-top:hover {
  background: var(--color-primary-strong);
}

.sf-to-top__icon {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

/* 모바일(≤640px) — 우하단 여백 축소, 터치 타깃(≥44px) 유지, 콘텐츠 가림 최소. */
@media (max-width: 640px) {
  .sf-to-top {
    right: var(--space-3);
    bottom: var(--space-4);
    width: 44px;
    height: 44px;
  }
}

/* 모션 축소 선호 — 등장 애니메이션 제거(컨트롤러도 즉시 스크롤로 대응). */
@media (prefers-reduced-motion: reduce) {
  .sf-to-top {
    transform: none;
    transition: opacity 0.01s ease, visibility 0.01s ease;
  }
  .sf-to-top.is-visible {
    transform: none;
  }
}

/* ── REVIEW-UX-1 / 상품 후기 작성 폼(전폭·라벨 스택·모바일 무붕괴) ─────────────── */
.sf-review-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.sf-review-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sf-review-form__label {
  font-weight: 700;
  font-size: var(--font-size-sm, 0.9375rem);
  color: var(--color-text);
}

.sf-review-form__select {
  align-self: flex-start;
  min-width: 96px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-text);
  font-size: var(--font-size-base, 1rem);
}

.sf-review-form__textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  padding: var(--space-3);
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  resize: vertical;
}

.sf-review-form__select:focus-visible,
.sf-review-form__textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.sf-review-form__actions {
  display: flex;
  justify-content: flex-end;
}

.sf-review-form__submit {
  min-height: 46px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-onbrand);
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  cursor: pointer;
}

.sf-review-form__submit:hover {
  background: var(--color-primary-strong);
}

/* 모바일(≤640px) — 버튼 전폭, 셀렉트 넓게 */
@media (max-width: 640px) {
  .sf-review-form__actions {
    justify-content: stretch;
  }

  .sf-review-form__submit {
    width: 100%;
  }
}

/* AP5-T12: 공통 안내(배송·설치·A/S·교환/환불·결제/증빙) 아코디언 — 고시 표 아래. 구간 여백·제목 밑줄은 sf-product-notice 와
   동일, 토글은 FAQ 아코디언(sf-faqs__toggle)과 같은 결(+/− 표식·터치 타깃 ≥44px). 본문은 sf-richtext 를 재사용하되
   구간 안에서는 좌우 여백 없이 꽉 채운다. JS 로딩 전에는 전부 펼쳐져 있고(SSR), 로딩 뒤 첫 블록만 열린다. */
.sf-guide-blocks {
  margin: var(--space-12) 0;
}

.sf-guide-blocks > .sf-section__title {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-guide-blocks__item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-guide-blocks__q {
  margin: 0;
  font-size: var(--font-size-base);
}

.sf-guide-blocks__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: inherit;
  font-weight: var(--font-weight-bold);
  text-align: left;
  cursor: pointer;
}

.sf-guide-blocks__toggle::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--color-buy);
  font-size: var(--font-size-xl);
}

.sf-guide-blocks__toggle[aria-expanded="true"]::after {
  content: "−";
}

.sf-guide-blocks__body {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
}

.sf-guide-blocks__body.sf-richtext {
  max-width: none;
}

.sf-guide-blocks__body > :first-child {
  margin-top: 0;
}

.sf-guide-blocks__body > :last-child {
  margin-bottom: 0;
}
/*
 * 간편 복합기 추천 바·결과 전용 스타일 (D-011) — P2-T9. design_tokens 토큰만 참조.
 */

.sf-recommend {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-recommend__lead {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.sf-recommend__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

/* 폼 필드(.sf-field): storefront_components.css 소유(select 포함) */

.sf-recommend__note {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* 결과 화면 — 견적 아님 고지(강조) */
.sf-recommend__disclaimer {
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-accent); /* 황색은 배경/보더만(텍스트 금지 — D-014) */
  background: var(--color-gray-50);
  color: var(--color-text);
}

.sf-recommend__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
/*
 * 회원 인증 화면(SF-40/41/42) 전용 스타일 — P3-T6. design_tokens 토큰만 참조.
 */

.sf-auth {
  width: min(100%, 520px);
  margin: var(--space-8) auto var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-buy);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.sf-auth--wide {
  width: min(100%, 760px);
}

.sf-auth__header {
  margin-bottom: var(--space-6);
}

.sf-auth__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-buy);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-auth__lead {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.sf-auth__form .sf-cta {
  width: 100%;
}

.sf-auth__section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* 폼 필드(.sf-field)·라디오/체크박스: storefront_components.css 소유(중복 정의 금지) */

/* 개인/사업자 분기 — 사업자 라디오 선택 시에만 사업자 섹션 노출(순수 CSS, JS 없음) */
.sf-signup__business {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  gap: var(--space-4);
}

.sf-signup:has(input[name="member_type"][value="business"]:checked) .sf-signup__business {
  display: flex;
  flex-direction: column;
}

/* 오류 안내(.sf-form-errors, role=alert): storefront_components.css 소유 */

.sf-auth__alt {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sf-auth__alt a {
  color: var(--color-buy);
  font-weight: var(--font-weight-semibold);
}

.sf-auth__support {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-auth__reactivate {
  color: var(--color-rental);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 640px) {
  .sf-auth {
    margin-top: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
}
/* 회원 마이페이지 — 주문·렌탈 상담·증빙·회원정보를 같은 정보 구조로 묶는다. */

.sf-account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  margin: var(--space-4) 0 var(--space-10);
}

.sf-account-nav {
  align-self: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sf-account-nav__title {
  margin: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: var(--font-size-lg);
}

.sf-account-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-account-nav a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-account-nav li:last-child a {
  border-bottom: 0;
}

.sf-account-nav a:hover,
.sf-account-nav a[aria-current="page"] {
  background: var(--color-notice-bg);
  color: var(--color-buy);
  text-decoration: none;
}

.sf-account-content {
  min-width: 0;
}

.sf-account-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-account-head .sf-section__title,
.sf-account-head p {
  margin: 0;
}

.sf-account-head p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-orders__list,
.sf-inquiry-list,
.sf-order__items,
.sf-order__shipments,
.sf-inquiry-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-orders__list {
  border-top: 1px solid var(--color-border);
}

.sf-orders__list li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 72px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-orders__number {
  color: var(--color-buy);
  font-weight: var(--font-weight-bold);
}

.sf-orders__date,
.sf-order__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-order__summary,
.sf-inquiry-detail__meta,
.sf-profile-panel,
.sf-withdrawal-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-order__subtitle,
.sf-evidence__subtitle,
.sf-subsection__title {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
}

.sf-order__items li,
.sf-shipment,
.sf-inquiry-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-order__actions,
.sf-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.sf-inquiry-list {
  display: grid;
  gap: var(--space-4);
}

.sf-inquiry-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-badge--received,
.sf-badge--installed {
  background: var(--color-buy);
}

.sf-badge--contacting,
.sf-badge--quoted,
.sf-badge--contracted {
  background: var(--color-rental);
}

.sf-badge--on_hold {
  background: var(--color-gray-600);
}

.sf-badge--canceled {
  background: var(--color-danger);
}

.sf-inquiry-card__head,
.sf-inquiry-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-inquiry-card__body,
.sf-inquiry-detail__meta {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}

.sf-inquiry-card__body dt,
.sf-inquiry-detail__meta dt {
  color: var(--color-text-muted);
}

.sf-inquiry-card__body dd,
.sf-inquiry-detail__meta dd {
  margin: 0;
}

.sf-evidence__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.sf-evidence__table th,
.sf-evidence__table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.sf-evidence__table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.sf-evidence__form,
.sf-return__form,
.sf-profile-form,
.sf-withdrawal-form {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5);
}

.sf-profile-panel h2,
.sf-withdrawal-panel h2 {
  font-size: var(--font-size-lg);
}

.sf-profile-panel .sf-profile-form,
.sf-withdrawal-panel .sf-withdrawal-form {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.sf-withdrawal-panel {
  border-color: var(--color-danger);
}

.sf-withdrawal-list {
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .sf-account-layout,
  .sf-profile-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .sf-account-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-account-nav li:nth-child(odd) a {
    border-right: 1px solid var(--color-border);
  }

  .sf-orders__list li {
    grid-template-columns: 1fr auto;
  }

  .sf-orders__date {
    grid-column: 1 / -1;
  }

  .sf-evidence__table,
  .sf-evidence__table thead,
  .sf-evidence__table tbody,
  .sf-evidence__table tr,
  .sf-evidence__table th,
  .sf-evidence__table td {
    display: block;
  }

  .sf-evidence__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sf-evidence__table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .sf-evidence__table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .sf-evidence__table td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
  }
}

@media (max-width: 420px) {
  .sf-account-nav ul {
    grid-template-columns: 1fr;
  }

  .sf-account-nav li:nth-child(odd) a {
    border-right: 0;
  }

  .sf-account-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-inquiry-card__body,
  .sf-inquiry-detail__meta {
    grid-template-columns: 1fr;
  }
}
/* 회원 결제 흐름 — 단계와 입력을 한 화면에서 빠르게 훑을 수 있는 조밀한 주문서. */

.sf-checkout-page {
  width: min(100%, 820px);
  margin: var(--space-4) auto var(--space-12);
}

.sf-checkout__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sf-checkout__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-checkout__step + .sf-checkout__step {
  border-left: 1px solid var(--color-border);
}

.sf-checkout__step.is-current {
  background: var(--color-notice-bg);
  color: var(--color-buy);
}

.sf-checkout__step-number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
}

.sf-checkout {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-checkout__head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-checkout__head .sf-section__title,
.sf-checkout__head p {
  margin: 0;
}

.sf-checkout__head p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.sf-checkout__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.sf-checkout__form > fieldset,
.sf-checkout__form > .sf-checkout__actions,
.sf-checkout__form > .sf-cta,
.sf-checkout__form > .sf-payment__method {
  grid-column: 1 / -1;
}

.sf-checkout__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.sf-delivery__shipment,
.sf-payment__method {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sf-delivery__rate,
.sf-payment__method > .sf-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sf-delivery__rate:has(input:checked),
.sf-payment__method:has(input:checked) {
  border-color: var(--color-buy);
  background: var(--color-notice-bg);
}

.sf-delivery__cost {
  color: var(--color-buy);
  font-weight: var(--font-weight-bold);
}

.sf-payment__bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
}

.sf-payment__bank .sf-note {
  grid-column: 1 / -1;
}

.sf-checkout__review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.sf-checkout__review-section {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sf-checkout__review-section--items,
.sf-checkout__review-section--total {
  grid-column: 1 / -1;
}

.sf-checkout__subtitle {
  font-size: var(--font-size-base);
}

.sf-checkout__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-checkout__items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-checkout__total {
  margin: 0;
  color: var(--color-buy);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.sf-checkout--empty {
  max-width: 640px;
  margin: var(--space-8) auto;
  text-align: center;
}

@media (max-width: 640px) {
  .sf-checkout-page {
    margin-top: 0;
  }

  .sf-checkout__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .sf-checkout__step {
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2) var(--space-1);
    font-size: var(--font-size-xs);
  }

  .sf-checkout {
    padding: var(--space-5) var(--space-4);
  }

  .sf-checkout__form,
  .sf-payment__bank,
  .sf-checkout__review {
    grid-template-columns: 1fr;
  }

  .sf-checkout__form > *,
  .sf-payment__bank .sf-note,
  .sf-checkout__review-section {
    grid-column: 1;
  }

  .sf-checkout__actions .sf-cta {
    width: 100%;
  }
}

/* ── AP5-T14 / A14 · D-031 설치 정보(배송 단계 + 주문 확인) ──────────────────
   설치기사 방문을 골랐을 때만 나타나는 입력 묶음. 감추기는 Stimulus(install-fields)가
   [hidden] 으로 하고, 여기서는 보일 때의 배치만 정한다. */
.sf-install {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line, #e3e8ef);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, #f8fafc);
}

.sf-install[hidden] {
  display: none;
}

.sf-install__legend {
  padding: 0 var(--space-2);
  font-weight: 700;
}

.sf-install__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* 엘리베이터 선택은 라디오 두 개를 한 줄로. */
.sf-install__choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* 요청사항은 줄이 길어 한 행을 다 쓴다. */
/* 🔴 P10-FLOOR-UNKNOWN-1 — 층수 칸 아래의 "잘 모르겠음". 숫자 칸과 한 덩이로 보이게 붙이고,
   손가락으로 누를 수 있는 크기를 지킨다(--touch-target-min). 주차의 "잘 모르겠음" 과 같은 말이다. */
.sf-install__unknown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}

.sf-install__note {
  grid-column: 1 / -1;
}

.sf-install__summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.sf-install__summary > div {
  display: contents;
}

.sf-install__summary dt {
  color: var(--ink-muted, #52606d);
  font-size: 0.875rem;
}

.sf-install__summary dd {
  margin: 0;
}

.sf-form__hint {
  display: block;
  color: var(--ink-muted, #52606d);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.sf-form__error {
  margin: 0 0 var(--space-3);
  color: var(--danger, #b42318);
  font-size: 0.875rem;
}

@media (max-width: 720px) {
  .sf-install__grid {
    grid-template-columns: 1fr;
  }
}
/* 게시판·FAQ·법적 문서 — 읽기와 반복 업무에 초점을 둔 고객지원 화면. */

.sf-support-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-support-head .sf-section__title,
.sf-support-head p {
  margin: 0;
}

.sf-support-head p {
  color: var(--color-text-muted);
}

.sf-board,
.sf-post,
.sf-board-write,
.sf-guest-unlock,
.sf-faqs,
.sf-page {
  margin: var(--space-4) 0 var(--space-12);
}

.sf-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.sf-board__head .sf-section__title {
  margin: 0;
}

.sf-board__list {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sf-board__list th,
.sf-board__list td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.sf-board__list th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-board__list th:first-child {
  width: 48%;
}

.sf-board__list td:first-child a {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.sf-board__secret {
  color: var(--color-text-muted);
}

.sf-board-write,
.sf-guest-unlock {
  width: min(100%, 760px);
  margin-right: auto;
  margin-left: auto;
}

.sf-board-write__form,
.sf-guest-unlock__form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-board-write__actions,
.sf-guest-unlock__actions,
.sf-post__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.sf-board-write trix-editor {
  min-height: 240px;
  border-color: var(--color-border-strong);
  border-radius: var(--radius-md);
}

.sf-post {
  width: min(100%, 900px);
  margin-right: auto;
  margin-left: auto;
}

.sf-post__head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.sf-post__title {
  overflow-wrap: anywhere;
}

.sf-post__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-post__body {
  min-height: 220px;
  padding: var(--space-6) 0;
}

.sf-post__attachments,
.sf-post__answers {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.sf-post__answers {
  border-left: 4px solid var(--color-rental);
}

.sf-post__answer + .sf-post__answer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.sf-faqs__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.sf-faqs__filter a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-faqs__filter a.is-active,
.sf-faqs__filter a:hover {
  border-color: var(--color-buy);
  background: var(--color-notice-bg);
  color: var(--color-buy);
  text-decoration: none;
}

.sf-faqs__list {
  border-top: 1px solid var(--color-border);
}

.sf-faqs__item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-faqs__q {
  margin: 0;
}

.sf-faqs__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-align: left;
  cursor: pointer;
}

.sf-faqs__toggle::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--color-buy);
  font-size: var(--font-size-xl);
}

.sf-faqs__toggle[aria-expanded="true"]::after {
  content: "−";
}

.sf-faqs__direct {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.sf-faqs__detail {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
}

.sf-faqs__modified {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-faqs__cs {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-top: 3px solid var(--color-buy);
  background: var(--color-surface);
}

.sf-faqs__cs h2,
.sf-faqs__cs p {
  margin: 0;
}

.sf-page {
  width: min(100%, 860px);
  margin-right: auto;
  margin-left: auto;
}

.sf-page__head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sf-page__head p {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-page .sf-richtext {
  line-height: 1.8;
}

/* P9-T20: 이관 법적 문안의 조항·줄바꿈을 보존하고 긴 URL도 모바일 폭 안에서 접는다. */
.sf-page--legal .trix-content {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.sf-page .sf-richtext h2,
.sf-page .sf-richtext h3 {
  margin-top: var(--space-6);
}

@media (max-width: 700px) {
  .sf-support-head,
  .sf-board__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-board__list,
  .sf-board__list thead,
  .sf-board__list tbody,
  .sf-board__list tr,
  .sf-board__list th,
  .sf-board__list td {
    display: block;
  }

  .sf-board__list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sf-board__list tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .sf-board__list td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
  }

  .sf-board__list td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  .sf-faqs__cs {
    grid-template-columns: 1fr;
  }
}

/* ── ABOUT-2/4 / 회사 소개 이미지(대표 사진·전국 지점망 지도) — radius/그림자 톤 통일·반응형 ─── */
.sf-page__photo,
.sf-page__map {
  margin: 0 0 var(--space-5);
}

.sf-page__map {
  margin-top: var(--space-6);
}

.sf-page__photo-img,
.sf-page__map-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
}

/* ── ABOUT-4 / 회사 소개 디자인 폴리시(slug about 스코프 — 법적 페이지 무영향·토큰 재사용·신규 JS 0) ─── */
/* 표제(30년의 노하우) 강조 + 리드문(표제 직후 문단) 부각 */
.sf-page--about .sf-richtext h2 {
  margin-top: var(--space-7);
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  letter-spacing: -0.01em;
}

.sf-page--about .sf-richtext h2 + p {
  margin-top: var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

/* 절 표제(h3) 계층 — 좌측 브랜드 악센트 + 간격 */
.sf-page--about .sf-richtext h3 {
  margin-top: var(--space-7);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
  font-size: var(--font-size-lg);
}

/* 회사 정보 블록(본문 말미 목록) 카드화 */
.sf-page--about .sf-richtext ul {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  list-style: none;
}

.sf-page--about .sf-richtext ul li {
  padding: var(--space-1) 0;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .sf-page--about .sf-richtext ul {
    padding: var(--space-4);
  }

  .sf-page--about .sf-richtext h2 {
    font-size: var(--font-size-xl);
  }
}
/*
 * P4-T3 렌탈 상담 신청 화면(SF-06 → FL-A4). 폼/동의는 storefront_auth.css 의 .sf-field/.sf-consent/.sf-cta
 * 토큰 스타일을 재사용하고, 여기서는 상담 전용 컨테이너와 honeypot 숨김만 정의한다.
 */

.sf-inquiry {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
  border-top: 4px solid var(--color-rental);
}

.sf-inquiry__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.sf-inquiry__header h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-3xl);
}

.sf-inquiry__header > p:last-child {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-inquiry__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.sf-inquiry__form > fieldset,
.sf-inquiry__form > .sf-inquiry__context,
.sf-inquiry__form > .sf-consents,
.sf-inquiry__form > .sf-inquiry__actions,
.sf-inquiry__form > .sf-field:has(textarea) {
  grid-column: 1 / -1;
}

.sf-inquiry__context {
  padding: var(--space-4);
  background: var(--color-surface);
  border-left: 3px solid var(--color-rental);
  border-radius: var(--radius-md);
  margin: 0;
}

.sf-inquiry__lead {
  font-size: var(--font-size-lg);
  margin: var(--space-3) 0;
}

.sf-inquiry--complete {
  max-width: 760px;
  text-align: center;
}

.sf-inquiry__complete-note {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-left: 4px solid var(--color-rental);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: left;
}

.sf-inquiry__actions {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.sf-inquiry__actions p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-complete-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: #edf8f7;
  color: var(--color-rental);
}

.sf-complete-mark .sf-icon {
  width: 30px;
  height: 30px;
}

.sf-rental-order__summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.sf-rental-order__image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--color-surface);
}

.sf-rental-order__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-rental-order__summary h2 {
  margin-top: var(--space-3);
}

.sf-rental-order__amount {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: #edf8f7;
}

.sf-rental-order__amount span,
.sf-rental-order__amount small {
  display: block;
}

.sf-rental-order__amount strong {
  display: block;
  color: var(--color-rental);
  font-size: var(--font-size-2xl);
}

.sf-rental-order__amount small {
  color: var(--color-danger);
}

.sf-order-next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-order-next-steps li {
  padding: var(--space-5);
}

.sf-order-next-steps li + li {
  border-left: 1px solid var(--color-border);
}

.sf-order-next-steps span {
  color: var(--color-rental);
  font-weight: var(--font-weight-bold);
}

.sf-order-next-steps strong {
  display: block;
  margin: var(--space-3) 0 var(--space-2);
}

.sf-order-next-steps p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-bank-account {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  text-align: left;
}

.sf-bank-account dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.sf-bank-account dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.sf-complete-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* 필수 표기(.sf-required): storefront_components.css 소유 */

/*
 * honeypot — 사람 눈/스크린리더 흐름에서 제거하되 제출은 되게(off-screen).
 * display:none 은 일부 봇이 무시하므로 위치 이동으로 숨긴다.
 */
.sf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── FAQ/가이드 블록(P4-T7, geo-aeo) — 상담 CTA 하단 보조 정보 ────────── */
.sf-faq {
  max-width: var(--container-narrow, 640px);
  margin: var(--space-8, 3rem) auto 0;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-border, #e0e0e0);
  text-align: left;
}

@media (max-width: 640px) {
  .sf-inquiry {
    padding-top: var(--space-5);
  }

  .sf-inquiry__header h1 {
    font-size: var(--font-size-2xl);
  }

  .sf-inquiry__form,
  .sf-inquiry__actions {
    grid-template-columns: 1fr;
  }

  .sf-inquiry__form > * {
    grid-column: 1;
  }

  .sf-inquiry__actions .sf-cta {
    width: 100%;
  }

  .sf-rental-order__summary,
  .sf-order-next-steps {
    grid-template-columns: 1fr;
  }

  .sf-rental-order__image {
    max-width: 240px;
    margin: 0 auto;
  }

  .sf-order-next-steps li + li {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .sf-complete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.sf-faq__list {
  margin: var(--space-4) 0;
}

.sf-faq__item + .sf-faq__item {
  margin-top: var(--space-4);
}

.sf-faq__q {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.sf-faq__a {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted, #444);
  line-height: 1.6;
}

.sf-faq__subtitle {
  font-size: var(--font-size-md, 1rem);
  margin: var(--space-5) 0 var(--space-2);
}

.sf-faq__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sf-faq__links li + li {
  margin-top: var(--space-1);
}
/* 나눔오피스 홈: 브랜드 신뢰와 렌탈·구매 전환을 한 흐름으로 연결한다. */

.sf-home-page {
  background: var(--color-bg);
}

.sf-home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.sf-home-section-heading--row {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.sf-home-section-heading h2,
.sf-home-trust__heading h2,
.sf-home-story h2,
.sf-home-answers h2 {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.sf-home-section-heading p,
.sf-home-trust__heading p {
  max-width: 680px;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.sf-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.sf-text-link .sf-icon {
  width: 16px;
  height: 16px;
}

/* 첫 화면 */
.sf-home-hero {
  --hero-dwell: 5500ms;
  --hero-ease: cubic-bezier(0.2, 0.78, 0.22, 1);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: #eaf2fb;
  transition: background-color 420ms ease-out;
}

.sf-home-hero[data-theme="rental"] {
  background: #e8f4f3;
}

.sf-home-hero__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* HERO-VIDEO-1 / 원 테이크 쇼룸 배경 영상.
   기본은 숨김이고, 컨트롤러가 재생 가능하다고 판단했을 때만 .is-video 가 붙어 노출된다.
   → JS 없음·코덱 미지원·prefers-reduced-motion·좁은 화면 중 하나라도 걸리면 현행 정지 히어로가 그대로 폴백. */
.sf-home-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔴 상담사 머리끝이 영상 위에서 4% 지점이라 상단이 조금만 잘려도 머리가 날아간다(실측).
     상단 기준에 가깝게 붙여 어느 폭에서도 머리가 남게 한다. 잘리는 쪽은 바닥(여백)이다. */
  object-position: 50% 8%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-out;
}

.sf-home-hero.is-video .sf-home-hero__video {
  visibility: visible;
  opacity: 1;
}

/* 영상이 상품·상담사를 이미 보여주므로 정지 히어로의 시각 요소만 감춘다(카피·CTA·탭은 그대로 유지). */
.sf-home-hero.is-video .sf-home-hero__visual {
  visibility: hidden;
  opacity: 0;
}

/* 🔴 영상(2206×946 ≈ 2.33:1)이 고정 590px 띠보다 세로로 길어, 화면이 넓을수록 위아래가 크게 잘린다
   (1920px 에서 상단 12.8%·2560px 에서 20.8% 실측 → 상담사 머리 잘림). 영상 모드에서만 띠를 폭에 비례해
   키워 잘림을 최소화한다. 정지 히어로(폴백)의 590px 은 그대로 둔다. */
.sf-home-hero.is-video .sf-home-hero__frame {
  height: clamp(590px, 44vw, 880px);
}

/* 좌측 카피 가독성 확보용 스크림 — 영상의 빈 좌측을 밝게 눌러 본문 대비를 유지한다. */
.sf-home-hero.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 92%) 0%,
    rgb(255 255 255 / 74%) 34%,
    rgb(255 255 255 / 0%) 60%
  );
  pointer-events: none;
}

.sf-home-hero__frame {
  position: relative;
  z-index: 2;
  height: 590px;
}

.sf-home-hero__slide {
  --hero-theme: var(--color-buy);
  --hero-theme-strong: var(--color-buy-strong);
  position: absolute;
  inset: 0 var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
  align-items: center;
  gap: var(--space-6);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.sf-home-hero__slide--rental {
  --hero-theme: var(--color-rental);
  --hero-theme-strong: var(--color-rental-strong);
}

.sf-home-hero__slide.is-active,
.sf-home-hero__slide.is-entering,
.sf-home-hero__slide.is-leaving {
  visibility: visible;
}

.sf-home-hero__slide.is-active,
.sf-home-hero__slide.is-entering {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.sf-home-hero__slide.is-leaving {
  z-index: 1;
  pointer-events: none;
  animation: sf-hero-scene-fade-out 480ms ease-in both;
}

.sf-home-hero__copy {
  position: relative;
  z-index: 3;
  padding: 52px 0 112px;
}

.sf-home-hero__type {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 18px;
  padding: 0 var(--space-3);
  border-left: 3px solid var(--hero-theme);
  background: rgba(255, 255, 255, 0.76);
  color: var(--hero-theme-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-home-hero__headline {
  max-width: 650px;
  margin: 0;
  font-size: 3rem;
  line-height: 1.14;
  letter-spacing: 0;
  word-break: keep-all;
}

.sf-home-hero__headline span {
  color: var(--hero-theme);
}

.sf-home-hero__lead {
  max-width: 590px;
  margin: 22px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: 1.7;
  word-break: keep-all;
}

.sf-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 28px;
}

.sf-home-hero__actions .sf-cta {
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.sf-home-hero__actions .sf-cta:hover {
  text-decoration: none;
}

.sf-home-hero__visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.sf-home-hero__person {
  position: absolute;
  z-index: 4;
  bottom: 86px;
  width: auto;
  max-width: none;
  height: 468px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 22px 18px rgba(32, 56, 75, 0.16));
  transform-origin: center bottom;
}

.sf-home-hero__product-card {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(116, 145, 169, 0.32);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: 0 20px 36px rgba(32, 56, 75, 0.16);
  transform-origin: center center;
}

.sf-home-hero__product-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f5f6f7;
}

.sf-home-hero__visual--sale-new .sf-home-hero__person {
  right: 36px;
}

.sf-home-hero__visual--sale-new .sf-home-hero__product-card--primary {
  top: 118px;
  left: 10px;
  width: 330px;
  aspect-ratio: 1;
}

.sf-home-hero__visual--rental-care .sf-home-hero__person {
  left: -24px;
  height: 450px;
}

.sf-home-hero__visual--rental-care .sf-home-hero__product-card--primary {
  top: 112px;
  right: 2px;
  width: 340px;
  height: 350px;
}

.sf-home-hero__visual--rental-care .sf-home-hero__product-card img {
  object-fit: cover;
  object-position: 56% center;
  background: #edf2f5;
}

.sf-home-hero__visual--supplies .sf-home-hero__person {
  bottom: 82px;
  left: -34px;
  height: 448px;
}

.sf-home-hero__visual--supplies .sf-home-hero__product-card--primary {
  top: 112px;
  right: 0;
  width: 280px;
  aspect-ratio: 1;
}

.sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a,
.sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
  z-index: 3;
  width: 136px;
  aspect-ratio: 1;
}

.sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a {
  right: 236px;
  bottom: 118px;
}

.sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
  right: 90px;
  bottom: 104px;
}

.sf-home-hero__visual--rental-volume .sf-home-hero__person {
  bottom: 84px;
  left: -34px;
  height: 458px;
}

.sf-home-hero__visual--rental-volume .sf-home-hero__product-card--primary {
  top: 112px;
  right: 0;
  width: 330px;
  aspect-ratio: 1;
}

.sf-home-hero__product-note {
  position: absolute;
  z-index: 3;
  top: 84px;
  left: 0;
  min-width: 230px;
  padding: 14px 17px;
  border-left: 3px solid var(--hero-theme);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(32, 56, 75, 0.12);
}

.sf-home-hero__product-note small,
.sf-home-hero__product-note strong {
  display: block;
}

.sf-home-hero__product-note small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-home-hero__product-note strong {
  margin-top: var(--space-1);
  font-size: var(--font-size-base);
}

.sf-home-hero__visual--rental-care .sf-home-hero__product-note,
.sf-home-hero__visual--supplies .sf-home-hero__product-note,
.sf-home-hero__visual--rental-volume .sf-home-hero__product-note {
  top: 56px;
  right: 0;
  left: auto;
}

.sf-home-hero__controls {
  position: absolute;
  z-index: 6;
  right: var(--space-4);
  bottom: 24px;
  left: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
}

.sf-home-hero__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #c7d4df;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(32, 56, 75, 0.1);
}

.sf-home-hero__tab {
  --hero-tab-theme: var(--color-buy);
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-right: 1px solid #d8e1e9;
  background: transparent;
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
}

.sf-home-hero__tab[data-theme="rental"] {
  --hero-tab-theme: var(--color-rental);
}

.sf-home-hero__tab:last-child {
  border-right: 0;
}

.sf-home-hero__tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--hero-tab-theme);
  transform: scaleX(0);
  transform-origin: left;
}

.sf-home-hero__tab[aria-current="true"] {
  background: var(--color-bg);
  color: var(--color-text);
}

.sf-home-hero__tab[aria-current="true"]::after {
  animation: sf-hero-tab-progress var(--hero-dwell) linear forwards;
}

.sf-home-hero.is-paused .sf-home-hero__tab[aria-current="true"]::after {
  animation-play-state: paused;
}

.sf-home-hero__tab-number {
  color: var(--hero-tab-theme);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sf-home-hero__tab-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sf-home-hero__tab-label strong {
  overflow: hidden;
  color: inherit;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sf-home-hero__tab-label span {
  color: #728195;
  font-size: 0.6875rem;
}

.sf-home-hero__transport {
  display: flex;
  gap: 6px;
}

.sf-home-hero__icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--motion-duration) ease-out,
    border-color var(--motion-duration) ease-out,
    transform var(--motion-duration) ease-out;
}

.sf-home-hero__icon-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.sf-home-hero__icon-button .sf-icon {
  width: 19px;
  height: 19px;
}

.sf-home-hero__icon-button [hidden] {
  display: none;
}

.sf-home-hero__slide.is-leaving .sf-home-hero__copy {
  animation: sf-hero-copy-exit 260ms ease-in both;
}

.sf-home-hero__slide.is-entering .sf-home-hero__type,
.sf-home-hero__slide.is-entering .sf-home-hero__headline,
.sf-home-hero__slide.is-entering .sf-home-hero__lead,
.sf-home-hero__slide.is-entering .sf-home-hero__actions {
  animation: sf-hero-copy-rise 480ms var(--hero-ease) both;
}

.sf-home-hero__slide.is-entering .sf-home-hero__type {
  animation-delay: 120ms;
}

.sf-home-hero__slide.is-entering .sf-home-hero__headline {
  animation-delay: 260ms;
}

.sf-home-hero__slide.is-entering .sf-home-hero__lead {
  animation-delay: 330ms;
}

.sf-home-hero__slide.is-entering .sf-home-hero__actions {
  animation-delay: 400ms;
}

.sf-home-hero__slide--wipe.is-entering .sf-home-hero__product-card {
  animation: sf-hero-diagonal-reveal 760ms var(--hero-ease) 70ms both;
  will-change: clip-path, transform, opacity;
}

.sf-home-hero__slide--wipe.is-entering .sf-home-hero__person {
  animation: sf-hero-person-rise 760ms var(--hero-ease) 180ms both;
  will-change: transform, opacity;
}

.sf-home-hero__slide--fly.is-entering .sf-home-hero__product-card {
  animation: sf-hero-product-fly-in 760ms cubic-bezier(0.15, 0.9, 0.25, 1.05) both;
  will-change: transform, opacity;
}

.sf-home-hero__slide--fly.is-entering .sf-home-hero__person {
  animation: sf-hero-person-fly-in 780ms var(--hero-ease) 120ms both;
  will-change: transform, opacity;
}

.sf-home-hero__slide--fly.is-leaving .sf-home-hero__product-card,
.sf-home-hero__slide--fly.is-leaving .sf-home-hero__person {
  animation: sf-hero-product-fly-out 520ms ease-in both;
  will-change: transform, opacity;
}

.sf-home-hero__slide--dissolve.is-entering .sf-home-hero__product-card,
.sf-home-hero__slide--dissolve.is-entering .sf-home-hero__person {
  animation: sf-hero-dissolve-in 820ms ease-out both;
  will-change: filter, opacity, transform;
}

.sf-home-hero__slide--dissolve.is-entering .sf-home-hero__person {
  animation-delay: 120ms;
}

.sf-home-hero__slide--dissolve.is-entering .sf-home-hero__product-card--toner-a {
  animation-delay: 180ms;
}

.sf-home-hero__slide--dissolve.is-entering .sf-home-hero__product-card--toner-b {
  animation-delay: 260ms;
}

.sf-home-hero__slide--dissolve.is-leaving .sf-home-hero__product-card,
.sf-home-hero__slide--dissolve.is-leaving .sf-home-hero__person {
  animation: sf-hero-dissolve-out 500ms ease-in both;
  will-change: filter, opacity, transform;
}

.sf-home-hero__slide--kenburns.is-active .sf-home-hero__product-card--primary,
.sf-home-hero__slide--kenburns.is-entering .sf-home-hero__product-card--primary {
  animation: sf-hero-ken-burns var(--hero-dwell) ease-out both;
  will-change: transform;
}

.sf-home-hero__slide--kenburns.is-entering .sf-home-hero__person {
  animation: sf-hero-person-rise 760ms var(--hero-ease) 160ms both;
  will-change: transform, opacity;
}

.sf-home-hero__slide--kenburns.is-entering .sf-home-hero__product-note {
  animation: sf-hero-parallax-note 760ms var(--hero-ease) 230ms both;
}

@keyframes sf-hero-copy-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-hero-copy-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -12px, 0); }
}

@keyframes sf-hero-scene-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sf-hero-diagonal-reveal {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translate3d(24px, -12px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sf-hero-product-fly-in {
  from { opacity: 0; transform: translate3d(160px, -72px, 0) rotate(3deg) scale(0.92); }
  72% { opacity: 1; transform: translate3d(-8px, 4px, 0) rotate(-0.35deg) scale(1.01); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes sf-hero-product-fly-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  to { opacity: 0; transform: translate3d(-70px, 34px, 0) rotate(-2deg) scale(0.96); }
}

@keyframes sf-hero-person-rise {
  from { opacity: 0; transform: translate3d(0, 42px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes sf-hero-person-fly-in {
  from { opacity: 0; transform: translate3d(-90px, 30px, 0) rotate(-2deg) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes sf-hero-dissolve-in {
  from { opacity: 0; filter: blur(14px); transform: scale(0.98); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes sf-hero-dissolve-out {
  from { opacity: 1; filter: blur(0); transform: scale(1); }
  to { opacity: 0; filter: blur(10px); transform: scale(1.015); }
}

@keyframes sf-hero-ken-burns {
  from { opacity: 0; transform: translate3d(7px, 9px, 0) scale(0.97); }
  15% { opacity: 1; }
  to { opacity: 1; transform: translate3d(-5px, -4px, 0) scale(1.025); }
}

@keyframes sf-hero-parallax-note {
  from { opacity: 0; transform: translate3d(38px, -12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-hero-tab-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 판매 카테고리 허브 */
.sf-home-shop {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--color-bg);
}

.sf-home-shop__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.sf-home-shop__heading h2 {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.sf-home-shop__heading p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.sf-supplies-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 0.78fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid #c8d9e8;
  border-radius: var(--radius-md);
  background: #eef4fa;
}

.sf-supplies-search > div {
  display: grid;
  gap: var(--space-1);
}

.sf-supplies-search > div span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-supplies-search input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.sf-supplies-search .sf-cta {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-5);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.sf-supplies-search .sf-icon {
  width: 18px;
  height: 18px;
}

/* 상품 레일 */
.sf-home-products {
  padding: var(--space-8) 0 var(--space-10);
}

.sf-home-products--rental {
  background: var(--color-bg);
}

.sf-home-products--sale {
  border-top: 1px solid #dbe5ee;
  border-bottom: 1px solid #dbe5ee;
  background: #f3f7fb;
}

.sf-text-link--rental {
  color: var(--color-rental);
}

.sf-home-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.sf-home-product-slot,
.sf-home-product-slot .sf-card {
  height: 100%;
}

.sf-home-product-grid .sf-card__thumb {
  aspect-ratio: 4 / 3;
}

.sf-home-product-grid .sf-card__body {
  padding: var(--space-4);
}

.sf-home-product-grid .sf-card__name {
  min-height: 2.5em;
}

.sf-home-product-grid .sf-card__action {
  margin-top: var(--space-3);
}

.sf-home-products__empty {
  min-height: 180px;
  padding: var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.sf-home-products__empty strong {
  display: block;
  font-size: var(--font-size-lg);
}

.sf-home-products__empty p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.sf-home-products__empty--rental {
  border-color: #c9dedc;
  background: #eef8f7;
}

/* 소모품·중고 구매 컬렉션 */
.sf-home-purchase-groups {
  padding: var(--space-10) 0;
  border-top: 1px solid #dbe5ee;
  border-bottom: 1px solid #dbe5ee;
  background: #f3f7fb;
}

.sf-home-purchase-groups > .sf-container > .sf-home-section-heading > p {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-home-purchase-groups__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #cad9e6;
  border-bottom: 1px solid #cad9e6;
  background: var(--color-bg);
}

.sf-home-purchase-group {
  min-width: 0;
  padding: var(--space-5);
}

.sf-home-purchase-group + .sf-home-purchase-group {
  border-left: 1px solid #cad9e6;
}

.sf-home-purchase-group__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 74px;
  margin-bottom: var(--space-4);
}

.sf-home-purchase-group__heading h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.sf-home-purchase-group__heading p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-home-purchase-group__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.sf-home-purchase-group__products .sf-card,
.sf-home-purchase-group__products .sf-home-product-slot {
  height: 100%;
}

.sf-home-purchase-group__products .sf-card__name {
  min-height: 2.6em;
  font-size: var(--font-size-sm);
}

.sf-home-purchase-group__products .sf-card__price {
  font-size: var(--font-size-base);
}

/* 서비스 강점 */
.sf-home-trust {
  padding: var(--space-10) 0;
  background: #edf2f6;
}

.sf-home-trust__campaign {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-900);
  box-shadow: 0 16px 36px rgba(22, 32, 44, 0.16);
}

.sf-home-trust__campaign > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔴 HOME-TRUST-FIT: 글 뒤 어두운 바탕을 CSS 로 깐다.
   원래는 사진에 그려진 어두운 부분(사진 폭의 42% 지점에서 끝남)에만 기대고 있었는데,
   글상자는 그보다 넓어서 문구가 사진 위로 삐져나왔다(윈도우는 한글 글꼴이 더 넓어 더 심함).
   글꼴·언어·사진이 바뀌어도 글은 항상 어두운 바탕 위에 있도록 여기서 보장한다.
   기사 얼굴(약 69% 지점)은 건드리지 않게 62%에서 완전히 투명해진다. */
.sf-home-trust__campaign::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(22, 32, 44, 0.94) 0%,
    rgba(22, 32, 44, 0.92) 44%,
    rgba(22, 32, 44, 0.62) 52%,
    rgba(22, 32, 44, 0) 62%
  );
}

.sf-home-trust__disclosure {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(22, 32, 44, 0.64);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-size-xs);
}

/* 🔴 HOME-TRUST-FIT: 글이 닿는 가장 오른쪽 지점을 어두운 바탕(52%) 안쪽으로 묶는다.
   오른쪽 여백만 줄였다 — 글상자를 좁혔더니 상담 버튼 두 개가 세로로 쪼개졌다(실측 462px 필요, 449px 확보).
   제목 한 줄과 버튼 한 줄이 유지되는 폭은 남기고, 실제로 넘치던 본문 문단만 따로 좁힌다.
   🔴 word-break: keep-all — 한글은 기본값이면 낱말 가운데서 잘린다("만듭/니다"). 띄어쓰기에서만
   줄바꿈하게 해 윈도우처럼 글꼴이 넓은 환경에서도 줄이 험하게 깨지지 않는다. */
.sf-home-trust__campaign-copy {
  position: relative;
  z-index: 1;
  width: 48%;
  max-width: 560px;
  padding: var(--space-12) var(--space-6) 96px var(--space-10);
  color: var(--color-white);
  word-break: keep-all;
}

.sf-home-trust__campaign-copy > p:first-child {
  margin: 0 0 var(--space-4);
  color: #9adbd8;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.sf-home-trust__campaign-copy h2 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-4xl);
  line-height: 1.22;
}

.sf-home-trust__campaign-copy h2 span {
  color: #74d4cf;
}

.sf-home-trust__campaign-copy > strong {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--font-size-lg);
  line-height: 1.55;
}

.sf-home-trust__campaign-copy > p:not(:first-child) {
  max-width: 430px; /* HOME-TRUST-FIT: 본문이 가장 길어 사진 위로 먼저 넘치던 줄 */
  margin: var(--space-4) 0 0;
  color: #d8e1ea;
}

.sf-home-trust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.sf-cta--on-dark {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(22, 32, 44, 0.38);
  color: var(--color-white);
}

.sf-cta--on-dark:hover {
  border-color: var(--color-white);
  background: rgba(22, 32, 44, 0.62);
  color: var(--color-white);
}

.sf-home-trust__list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: -54px var(--space-5) 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: 0 12px 28px rgba(22, 32, 44, 0.12);
}

.sf-home-trust__list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5) var(--space-4);
}

.sf-home-trust__list li + li {
  border-left: 1px solid var(--color-border);
}

.sf-home-trust__list span {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sf-home-trust__list strong {
  display: block;
  line-height: 1.45;
  word-break: keep-all;
}

.sf-home-trust__list p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  word-break: keep-all;
}

.sf-home-trust .sf-home-trust__list {
  margin: -54px var(--space-5) 0;
}

/* 브랜드 스토리 */
.sf-home-story {
  padding: var(--space-10) 0;
}

.sf-home-story__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: var(--space-8);
}

.sf-home-story__copy {
  padding-right: var(--space-5);
}

.sf-home-story__copy h2 {
  font-size: var(--font-size-4xl);
}

.sf-home-story__copy > p {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
}

.sf-home-story__promise {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-rental);
  color: var(--color-text) !important;
  font-weight: var(--font-weight-semibold);
}

.sf-home-story .sf-text-link {
  margin-top: var(--space-5);
}

/* 한 장의 2x2 생성 이미지에서 각 장면을 안전하게 분리한다. */
.sf-scene-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
}

.sf-scene-frame img {
  display: block;
  width: 200%;
  max-width: none;
  height: auto;
}

.sf-scene-frame--story img {
  transform: translate(0, 0);
}

/* HOME-BRAND-VIDEO — story 구역 브랜드 영상.
   🔴 .sf-scene-frame 의 3:2 비율은 2×2 스프라이트 이미지 전용이다. 16:9 영상을 그대로 넣으면
      위아래가 잘려 자막과 인물이 사라진다 → 영상이 들어간 프레임만 16:9 로 덮어쓴다. */
.sf-home-story__player {
  aspect-ratio: 16 / 9;
  background: #0c1524;
}

.sf-home-story__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0c1524;
}

/* 파사드 — 누르기 전 화면. 포스터(대표 화면)는 video 의 poster 가 그리고,
   여기서는 그 위에 재생 버튼과 안내만 얹는다. 누르면 hidden 으로 사라진다. */
.sf-home-story__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(9, 16, 28, 0.12) 0%, rgba(9, 16, 28, 0.42) 100%);
  color: #fff;
  cursor: pointer;
}

.sf-home-story__facade[hidden] {
  display: none;
}

.sf-home-story__facade:hover .sf-home-story__play,
.sf-home-story__facade:focus-visible .sf-home-story__play {
  transform: scale(1.06);
}

/* 재생 삼각형 — 아이콘 파일 없이 CSS 로만. 터치 타깃 ≥44px(D-014 AA). */
.sf-home-story__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary, #1f6feb);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(9, 16, 28, 0.45);
  transition: transform 0.15s ease;
}

.sf-home-story__play::after {
  content: "";
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

.sf-home-story__facade-text {
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 0 var(--space-4);
  text-align: center;
  word-break: keep-all;
  text-shadow: 0 2px 10px rgba(9, 16, 28, 0.8);
}

.sf-scene-frame--install img {
  transform: translate(-50%, 0);
}

.sf-scene-frame--maintenance img {
  transform: translate(0, -50%);
}

.sf-scene-frame--handoff img {
  transform: translate(-50%, -50%);
}

/* 추천 도구 */
.sf-home-finder {
  padding: var(--space-10) 0;
  border-top: 1px solid #dbe6ef;
  border-bottom: 1px solid #dbe6ef;
  background: #f1f5f8;
}

.sf-finder-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  align-items: end;
  gap: var(--space-8);
}

.sf-finder-intro h2 {
  margin: 0;
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.sf-finder-intro p {
  max-width: 720px;
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
}

.sf-finder-intro > strong {
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-rental);
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  line-height: 1.45;
}

.sf-finder-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #cedbe6;
  border-bottom: 1px solid #cedbe6;
}

.sf-finder-criteria li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
}

.sf-finder-criteria li + li {
  border-left: 1px solid #cedbe6;
}

.sf-finder-criteria li > span {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sf-finder-criteria strong {
  display: block;
  line-height: 1.45;
  word-break: keep-all;
}

.sf-finder-criteria p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  word-break: keep-all;
}

.sf-finder-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-5);
}

.sf-finder-heading h3 {
  margin: 0;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.sf-finder-heading p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

.sf-finder-heading > p {
  max-width: 430px;
  margin: 0;
  font-size: var(--font-size-sm);
}

.sf-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}

.sf-finder__questions {
  display: grid;
  grid-template-columns: 1fr;
}

.sf-finder-row {
  display: grid;
  align-content: center;
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 0;
}

.sf-finder-row + .sf-finder-row {
  border-top: 1px solid var(--color-border);
}

.sf-finder-row legend {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.sf-finder-row legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.sf-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sf-segmented label {
  position: relative;
  cursor: pointer;
}

.sf-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sf-segmented span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-segmented input:checked + span {
  border-color: var(--color-rental);
  background: #edf8f7;
  color: var(--color-rental-strong);
}

.sf-segmented input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sf-finder__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  grid-template-areas:
    "copy product"
    "benefits benefits"
    "action action";
  align-content: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-left: 1px solid #c9dedc;
  background: #e5f3f2;
}

.sf-finder__result-copy {
  grid-area: copy;
  align-self: center;
}

.sf-finder__result-copy small,
.sf-finder__result-copy strong {
  display: block;
}

.sf-finder__result-copy small {
  color: var(--color-rental);
  font-weight: var(--font-weight-bold);
}

.sf-finder__result-copy strong {
  margin: var(--space-2) 0;
  font-size: var(--font-size-lg);
  line-height: 1.45;
  word-break: keep-all;
}

.sf-finder__result-copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-finder__product {
  grid-area: product;
  position: relative;
  align-self: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid #c9dedc;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.sf-finder__product img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -49%);
}

.sf-finder__product span {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
}

.sf-finder__benefits {
  grid-area: benefits;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0;
  list-style: none;
  border-top: 1px solid #c9dedc;
  border-bottom: 1px solid #c9dedc;
}

.sf-finder__benefits li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  word-break: keep-all;
}

.sf-finder__benefits .sf-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-rental);
}

.sf-finder__action {
  grid-area: action;
}

.sf-finder__action .sf-cta {
  width: 100%;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
  font-size: var(--font-size-base);
}

.sf-finder__action .sf-finder__note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* 서비스 현장 */
.sf-home-field {
  padding: var(--space-10) 0;
}

.sf-home-field__disclosure {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-home-field__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sf-field-scene {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.sf-field-scene .sf-scene-frame {
  border-radius: 0;
}

.sf-field-scene > div:last-child {
  padding: var(--space-4);
}

.sf-field-scene span {
  color: var(--color-rental);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.sf-field-scene h3 {
  margin: var(--space-2) 0;
  font-size: var(--font-size-lg);
}

.sf-field-scene p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* 렌탈 절차 */
.sf-home-process {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sf-process-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sf-process-list li {
  min-width: 0;
  padding: var(--space-5) var(--space-4);
}

.sf-process-list li + li {
  border-left: 1px solid var(--color-border);
}

.sf-process-list span {
  color: var(--color-rental);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.sf-process-list h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-base);
}

.sf-process-list p,
.sf-process-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sf-process-list p {
  margin: 0;
}

.sf-process-note {
  margin: var(--space-4) 0 0;
  font-weight: var(--font-weight-medium);
}

/* FAQ */
.sf-home-answers {
  padding: var(--space-10) 0;
  background: var(--color-gray-900);
  color: var(--color-white);
}

.sf-home-answers h2,
.sf-home-answers summary {
  color: var(--color-white);
}

.sf-home-answers__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-10);
}

.sf-home-answers__grid > div:first-child > p {
  color: var(--color-gray-300);
}

.sf-home-answers .sf-text-link {
  margin-top: var(--space-4);
  color: #86ddd4;
}

.sf-home-faq-list details {
  border-top: 1px solid var(--color-gray-700);
}

.sf-home-faq-list details:last-child {
  border-bottom: 1px solid var(--color-gray-700);
}

.sf-home-faq-list summary {
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.sf-home-faq-list details p {
  margin: 0;
  padding: 0 0 var(--space-4);
  color: var(--color-gray-300);
}

@media (max-width: 1080px) {
  .sf-home-hero__slide {
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  }

  .sf-home-hero__headline {
    font-size: 2.5rem;
  }

  .sf-home-hero__person {
    height: 408px;
  }

  .sf-home-hero__visual--sale-new .sf-home-hero__product-card--primary {
    width: 280px;
  }

  .sf-home-hero__visual--rental-care .sf-home-hero__product-card--primary {
    width: 300px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--primary {
    width: 242px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a,
  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
    width: 112px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a {
    right: 196px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
    right: 74px;
  }

  .sf-home-hero__visual--rental-volume .sf-home-hero__product-card--primary {
    width: 292px;
  }

  .sf-home-hero__tab-label span {
    display: none;
  }

  .sf-home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-supplies-search {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  }

  .sf-supplies-search > div {
    grid-column: 1 / -1;
  }

  .sf-home-trust__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-home-trust__list li:nth-child(4) {
    border-left: 0;
  }

  .sf-home-trust__list li:nth-child(n + 4) {
    border-top: 1px solid #cfdce8;
  }

  .sf-finder {
    grid-template-columns: 1fr;
  }

  .sf-finder__questions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-finder-row + .sf-finder-row {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .sf-finder__result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-areas:
      "copy product"
      "benefits benefits"
      "action action";
    align-items: stretch;
    gap: var(--space-4);
    border-top: 1px solid #c9dedc;
    border-left: 0;
  }
}

@media (max-width: 820px) {
  /* HERO-VIDEO-4: 좁은 화면은 세로(9:16) 전용 영상을 받는다(<source media>).
     세로 영상은 상단 45%가 비어 있어 카피가 그 위에 얹히므로, 스크림도 좌→우가 아니라 위→아래로 준다. */
  /* 🔴 세로 영상은 위 45%가 비어 있고 그 아래부터 제품·인물이다. 띠가 낮으면 피사체 시작점(285px)이
     카피 끝(297px)보다 위로 올라와 인물 얼굴을 버튼이 가린다(실측). 띠를 폭에 비례해 키워 여유를 만든다. */
  .sf-home-hero.is-video .sf-home-hero__frame {
    height: clamp(640px, 210vw, 860px);
  }

  /* 띠가 커지면 가로가 잘리는데, 잘리는 쪽이 인물(오른쪽)이 아니라 빈 바닥(왼쪽)이 되도록 민다. */
  .sf-home-hero.is-video .sf-home-hero__video {
    object-position: 70% 50%;
  }

  .sf-home-hero.is-video::after {
    background: linear-gradient(
      to bottom,
      rgb(255 255 255 / 90%) 0%,
      rgb(255 255 255 / 70%) 26%,
      rgb(255 255 255 / 0%) 46%
    );
  }

  .sf-home-section-heading,
  .sf-home-section-heading--row {
    display: block;
  }

  .sf-home-section-heading .sf-text-link {
    margin-top: var(--space-4);
  }

  .sf-home-shop__heading {
    display: block;
  }

  .sf-home-shop__heading .sf-text-link {
    margin-top: var(--space-4);
  }

  .sf-supplies-search {
    grid-template-columns: 1fr;
  }

  .sf-supplies-search > div {
    grid-column: auto;
  }

  .sf-home-purchase-groups__grid {
    grid-template-columns: 1fr;
  }

  .sf-home-purchase-group + .sf-home-purchase-group {
    border-top: 1px solid #cad9e6;
    border-left: 0;
  }

  .sf-home-hero__frame {
    height: 820px;
  }

  .sf-home-hero__slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(300px, 1fr);
    align-content: start;
    gap: 0;
  }

  .sf-home-hero__copy {
    padding: 42px 0 0;
  }

  .sf-home-hero__type {
    min-height: 26px;
    margin-bottom: 14px;
  }

  .sf-home-hero__headline {
    max-width: 520px;
    font-size: 2.25rem;
    line-height: 1.18;
  }

  .sf-home-hero__lead {
    max-width: 560px;
    margin-top: var(--space-4);
    font-size: var(--font-size-base);
    line-height: 1.62;
  }

  .sf-home-hero__actions {
    margin-top: var(--space-5);
  }

  .sf-home-hero__visual {
    min-height: 370px;
  }

  .sf-home-hero__person,
  .sf-home-hero__visual--rental-care .sf-home-hero__person,
  .sf-home-hero__visual--supplies .sf-home-hero__person,
  .sf-home-hero__visual--rental-volume .sf-home-hero__person {
    bottom: 136px;
    height: 278px;
  }

  .sf-home-hero__visual--sale-new .sf-home-hero__person {
    right: -20px;
  }

  .sf-home-hero__visual--rental-care .sf-home-hero__person {
    left: -28px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__person {
    left: -12px;
    height: 270px;
  }

  .sf-home-hero__visual--rental-volume .sf-home-hero__person {
    left: -20px;
  }

  .sf-home-hero__visual--sale-new .sf-home-hero__product-card--primary {
    top: 104px;
    left: 0;
    width: 214px;
  }

  .sf-home-hero__visual--rental-care .sf-home-hero__product-card--primary {
    top: 92px;
    right: -4px;
    width: 236px;
    height: 254px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--primary {
    top: 94px;
    right: -2px;
    width: 194px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a,
  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
    width: 84px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-a {
    right: 175px;
    bottom: 136px;
  }

  .sf-home-hero__visual--supplies .sf-home-hero__product-card--toner-b {
    right: 87px;
    bottom: 136px;
  }

  .sf-home-hero__visual--rental-volume .sf-home-hero__product-card--primary {
    top: 94px;
    right: -3px;
    width: 218px;
  }

  .sf-home-hero__product-note,
  .sf-home-hero__visual--rental-care .sf-home-hero__product-note,
  .sf-home-hero__visual--supplies .sf-home-hero__product-note,
  .sf-home-hero__visual--rental-volume .sf-home-hero__product-note {
    top: 30px;
    min-width: 190px;
    padding: 11px 13px;
  }

  .sf-home-hero__product-note strong {
    font-size: var(--font-size-sm);
  }

  .sf-home-hero__controls {
    bottom: var(--space-4);
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .sf-home-hero__transport {
    position: absolute;
    right: 0;
    bottom: 72px;
  }

  .sf-home-hero__icon-button {
    width: 40px;
    height: 40px;
  }

  .sf-home-hero__tab {
    grid-template-columns: 1fr;
    gap: 1px;
    min-height: 58px;
    padding: 9px 5px;
    text-align: center;
  }

  .sf-home-hero__tab-number {
    font-size: var(--font-size-sm);
  }

  .sf-home-hero__tab-label strong {
    font-size: 0.6875rem;
  }

  .sf-home-trust__campaign {
    display: grid;
    min-height: 0;
  }

  /* 세로로 쌓이는 화면에서는 글이 사진 위에 있지 않다 — 어두운 바탕을 덧씌우면 사진만 어두워진다. */
  .sf-home-trust__campaign::before {
    display: none;
  }

  .sf-home-trust__campaign > img {
    position: static;
    height: 420px;
    object-position: 72% center;
  }

  .sf-home-trust__campaign-copy {
    width: auto;
    max-width: none;
    padding: var(--space-8);
    background: var(--color-gray-900);
  }

  .sf-home-trust .sf-home-trust__list {
    margin-top: var(--space-4);
  }

  .sf-finder-intro {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .sf-finder-intro > strong {
    max-width: 520px;
  }

  .sf-finder-criteria {
    grid-template-columns: 1fr;
  }

  .sf-finder-criteria li + li {
    border-top: 1px solid #cedbe6;
    border-left: 0;
  }

  .sf-finder-heading {
    display: block;
  }

  .sf-finder-heading > p {
    max-width: 640px;
    margin-top: var(--space-3);
  }

  .sf-home-story__grid,
  .sf-home-answers__grid {
    grid-template-columns: 1fr;
  }

  .sf-home-story__copy {
    padding-right: 0;
  }

  .sf-finder__questions {
    grid-template-columns: 1fr 1fr;
  }

  .sf-finder-row:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--color-border);
  }

  .sf-finder-row:nth-child(2) {
    border-left: 0;
  }

  .sf-home-field__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf-field-scene:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  }

  .sf-process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sf-process-list li:nth-child(4) {
    border-left: 0;
  }

  .sf-process-list li:nth-child(n + 4) {
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .sf-home-section-heading {
    margin-bottom: var(--space-5);
  }

  .sf-home-section-heading h2,
  .sf-home-answers h2 {
    font-size: var(--font-size-2xl);
  }

  .sf-home-hero__copy {
    padding-top: 36px;
  }

  .sf-home-hero__headline,
  .sf-home-story__copy h2 {
    font-size: 2.125rem;
  }

  .sf-home-hero__lead {
    font-size: var(--font-size-base);
  }

  .sf-home-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sf-home-hero__actions .sf-cta {
    min-width: 0;
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    font-size: var(--font-size-sm);
  }

  .sf-home-hero__visual {
    min-height: 370px;
  }

  .sf-home-products,
  .sf-home-trust,
  .sf-home-finder,
  .sf-home-process,
  .sf-home-answers {
    padding: var(--space-8) 0;
  }

  .sf-home-story,
  .sf-home-field {
    padding: var(--space-10) 0;
  }

  .sf-home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .sf-home-product-grid .sf-card__body {
    padding: var(--space-3);
  }

  .sf-home-product-grid .sf-card__name {
    min-height: 0;
    font-size: var(--font-size-sm);
  }

  .sf-home-product-grid .sf-card__price {
    font-size: var(--font-size-base);
  }

  .sf-home-shop {
    padding-top: var(--space-6);
  }

  .sf-home-shop__heading h2 {
    font-size: var(--font-size-2xl);
  }

  .sf-supplies-search {
    padding: var(--space-4);
  }

  .sf-supplies-search .sf-cta {
    width: 100%;
  }

  .sf-home-purchase-group {
    padding: var(--space-4);
  }

  .sf-home-purchase-group__heading {
    display: block;
    min-height: 0;
  }

  .sf-home-purchase-group__heading .sf-text-link {
    margin-top: var(--space-3);
  }

  .sf-home-purchase-group__products {
    gap: var(--space-2);
  }

  .sf-home-trust__campaign > img {
    height: 300px;
    object-position: 76% center;
  }

  .sf-home-trust__campaign-copy {
    padding: var(--space-6) var(--space-5);
  }

  .sf-home-trust__campaign-copy h2 {
    font-size: 2rem;
  }

  .sf-home-trust__campaign-copy > strong {
    font-size: var(--font-size-base);
  }

  .sf-home-trust__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sf-home-trust__actions .sf-cta {
    width: 100%;
  }

  .sf-home-trust .sf-home-trust__list {
    margin-right: 0;
    margin-left: 0;
  }

  .sf-home-trust__list {
    grid-template-columns: 1fr;
  }

  .sf-home-trust__list li,
  .sf-home-trust__list li:nth-child(4) {
    border-left: 0;
  }

  .sf-home-trust__list li + li {
    border-top: 1px solid #cfdce8;
  }

  .sf-home-trust__list strong {
    min-height: 0;
  }

  .sf-home-story__grid {
    gap: var(--space-6);
  }

  .sf-finder-intro h2 {
    font-size: var(--font-size-2xl);
  }

  .sf-finder-intro > strong {
    padding-left: var(--space-4);
    font-size: var(--font-size-xl);
  }

  .sf-finder-criteria {
    margin-top: var(--space-6);
  }

  .sf-finder-criteria li {
    padding: var(--space-4) 0;
  }

  .sf-finder-heading {
    margin-top: var(--space-6);
  }

  .sf-finder-heading h3 {
    font-size: var(--font-size-xl);
  }

  .sf-finder__questions {
    grid-template-columns: 1fr;
  }

  .sf-finder-row:first-child {
    grid-column: auto;
    border-left: 0;
    border-bottom: 0;
  }

  .sf-finder-row:nth-child(2),
  .sf-finder-row:nth-child(3) {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .sf-finder__result {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .sf-finder__product {
    align-self: start;
  }

  .sf-finder__benefits {
    padding: var(--space-3) 0;
  }

  .sf-home-field__grid {
    grid-template-columns: 1fr;
  }

  .sf-field-scene:last-child {
    grid-column: auto;
    display: block;
  }

  .sf-process-list {
    grid-template-columns: 1fr;
  }

  .sf-process-list li,
  .sf-process-list li:nth-child(4) {
    border-left: 0;
  }

  .sf-process-list li + li {
    border-top: 1px solid var(--color-border);
  }

  .sf-home-answers__grid {
    gap: var(--space-6);
  }

  /* 모바일은 이동·회전 폭을 줄여 시각 부담과 렌더링 비용을 낮춘다. */
  @keyframes sf-hero-product-fly-in {
    from { opacity: 0; transform: translate3d(48px, -20px, 0) rotate(1deg) scale(0.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  }

  @keyframes sf-hero-product-fly-out {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(-28px, 12px, 0) scale(0.98); }
  }

  @keyframes sf-hero-ken-burns {
    from { opacity: 0; transform: translate3d(5px, 6px, 0) scale(0.98); }
    15% { opacity: 1; }
    to { opacity: 1; transform: translate3d(-3px, -2px, 0) scale(1.012); }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 🔴 HERO-FLASH-1: "애니메이션 줄이기" 폴백을 JS 에서 CSS 로 옮겼다.
     전에는 JS 가 is-video 를 붙일지 말지 판단해서, 그때까지 모두가 정지 히어로를 봤다(깜빡임).
     이제 서버가 처음부터 is-video 로 그리고, 움직임을 원치 않는 사람만 여기서 정지 히어로로 되돌린다.
     JS 를 기다리지 않으므로 이 사람들도 깜빡임 없이 처음부터 정지 히어로를 본다. */
  .sf-home-hero.is-video .sf-home-hero__video {
    visibility: hidden;
    opacity: 0;
  }

  .sf-home-hero.is-video .sf-home-hero__visual {
    visibility: visible;
    opacity: 1;
  }

  .sf-home-hero.is-video .sf-home-hero__frame {
    height: 590px; /* 영상 모드의 가변 높이(clamp)를 정지 히어로 기준으로 되돌린다 */
  }

  .sf-home-hero.is-video::after {
    content: none; /* 영상 위 가독성 스크림 — 정지 히어로에는 불필요 */
  }

  .sf-home-hero {
    transition-duration: 0ms;
  }

  .sf-home-hero__slide.is-entering .sf-home-hero__type,
  .sf-home-hero__slide.is-entering .sf-home-hero__headline,
  .sf-home-hero__slide.is-entering .sf-home-hero__lead,
  .sf-home-hero__slide.is-entering .sf-home-hero__actions,
  .sf-home-hero__slide.is-entering .sf-home-hero__product-card,
  .sf-home-hero__slide.is-entering .sf-home-hero__person,
  .sf-home-hero__slide.is-entering .sf-home-hero__product-note {
    animation-name: sf-hero-reduced-fade-in !important;
    animation-duration: 160ms !important;
    animation-delay: 0ms !important;
    transform: none;
    filter: none;
    clip-path: none;
  }

  .sf-home-hero__slide.is-leaving,
  .sf-home-hero__slide.is-leaving .sf-home-hero__copy,
  .sf-home-hero__slide.is-leaving .sf-home-hero__product-card,
  .sf-home-hero__slide.is-leaving .sf-home-hero__person {
    animation-name: sf-hero-reduced-fade-out !important;
    animation-duration: 160ms !important;
    animation-delay: 0ms !important;
    transform: none;
    filter: none;
    clip-path: none;
  }

  .sf-home-hero__slide--kenburns.is-active .sf-home-hero__product-card--primary {
    animation: none;
  }

  .sf-home-hero__tab[aria-current="true"]::after {
    animation: none;
    transform: scaleX(1);
  }

  .sf-home-hero__icon-button:hover {
    transform: none;
  }
}

@keyframes sf-hero-reduced-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sf-hero-reduced-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.sf-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-12);
}

.sf-cart-items {
  border-top: 1px solid var(--color-border);
}

.sf-cart-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-cart-item__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--color-surface);
}

.sf-cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-cart-item__media span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-cart-item__info h2 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-lg);
}

.sf-cart-item__info p {
  margin: 0;
  color: var(--color-text-muted);
}

.sf-cart-item__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.sf-cart-quantity {
  display: grid;
  grid-template-columns: 64px auto;
  gap: var(--space-2);
}

.sf-cart-quantity label {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sf-cart-quantity input {
  width: 64px;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.sf-cart-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.sf-cart-item__total {
  min-width: 110px;
  text-align: right;
  font-size: var(--font-size-lg);
}

.sf-cart-summary {
  position: sticky;
  top: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sf-cart-summary dl {
  margin: var(--space-5) 0;
}

.sf-cart-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.sf-cart-summary__total {
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.sf-cart-summary p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sf-cart-empty {
  min-height: 360px;
}

.sf-cart-empty .sf-icon {
  width: 42px;
  height: 42px;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .sf-cart-layout {
    grid-template-columns: 1fr;
  }

  .sf-cart-summary {
    position: static;
  }
}

@media (max-width: 640px) {
  .sf-cart-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .sf-cart-item__controls {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }

  .sf-cart-item__total {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
}
/*
 * 나눔오피스 스토어프론트 전역 스타일 매니페스트 (Sprockets — Propshaft 아님)
 * 로드 순서 = 토큰 → 공통 컴포넌트 → 화면 전용. 화면 CSS가 컴포넌트 위에 고유 배치만 얹는다.
 *













 */

/* ── 베이스 리셋 ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* 폼 컨트롤이 본문 서체를 물려받게(브라우저 기본 폰트 방지) */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
}

/* ── 타이포 위계(전역 기본값) ───────────────────────────────────
 * 클래스로 크기를 지정한 제목은 특정도상 이 규칙보다 우선하므로 영향받지 않는다.
 * 클래스 없는 맨 제목만 이 위계를 따른다(화면 간 일관성).
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-3);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

h4,
h5,
h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

p {
  margin: 0 0 var(--space-3);
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ── 본문 바로가기(skip link, D-014) — 포커스 시에만 노출 ──────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip-link);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  left: 0;
}

/* ── 레이아웃 골격 (.sf-container 는 storefront_components.css 소유) ─── */
.sf-main {
  min-height: 50vh;
  padding: var(--space-6) 0;
}

.sf-main--full {
  padding: 0;
}

.sf-flash-stack {
  padding-top: var(--space-4);
}

/* ── 헤더 ────────────────────────────────────────────────────── */
.sf-topbar {
  background: var(--color-gray-900);
  color: var(--color-gray-200);
  font-size: var(--font-size-xs);
}

.sf-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}

.sf-topbar p {
  margin: 0;
}

.sf-topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sf-topbar__meta strong {
  color: var(--color-white);
}

.sf-header {
  position: relative;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sf-header__desktop {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  min-height: 84px;
}

.sf-logo {
  display: inline-flex;
  align-items: center;
}

.sf-logo img {
  display: block;
  width: auto;
  height: 36px;
}

.sf-search {
  display: flex;
  width: min(100%, 520px);
  justify-self: center;
  min-width: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sf-search__input {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  border: 0;
}

.sf-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: var(--touch-target-min);
  padding: 0;
  border: 0;
  background: var(--color-gray-900);
  color: var(--color-white);
  cursor: pointer;
}

.sf-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.sf-header-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 54px;
  min-height: var(--touch-target-min);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.sf-header-action:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.sf-header-action--rental {
  color: var(--color-rental);
}

.sf-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.sf-cart-count {
  position: absolute;
  top: -2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 10px;
}

.sf-header__mobile {
  display: none;
}

.sf-gnb {
  border-top: 1px solid var(--color-border);
}

.sf-gnb__inner {
  display: flex;
  align-items: center;
  min-height: 52px;
  overflow-x: auto;
}

.sf-gnb__link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  border-bottom: 3px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.sf-gnb__link:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.sf-gnb__link--rental:hover {
  border-bottom-color: var(--color-rental);
  color: var(--color-rental);
}

.sf-gnb__spacer {
  flex: 1 0 var(--space-4);
}

.sf-gnb__link--utility {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ── 홈 골격 섹션(빈 상태 — 실데이터는 T6) ─────────────────────── */
.sf-section {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
}

.sf-section__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.sf-placeholder {
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── 푸터 ────────────────────────────────────────────────────── */
.sf-footer {
  margin-top: 0;
  padding: var(--space-12) 0 var(--space-6);
  background: var(--color-gray-900);
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
}

/* 🔴 P10-CONTACT-1: 열을 2개로 **못 박아 두면** 보증금 계좌 칸(credentials 로 켜지는 4번째)이
   다음 줄로 밀려 회사 소개 아래에 603px 폭으로 홀로 떨어진다(실측). auto-fit 은 칸 수에 맞춰
   열을 만들고 남으면 접으므로, 평소 3칸일 때 폭은 **종전과 완전히 같고**(603/235/235 실측)
   4칸일 때만 한 줄에 나란히 선다. */
.sf-footer__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.8fr) repeat(auto-fit, minmax(150px, 0.7fr));
  gap: var(--space-8);
}

.sf-footer__logo {
  width: auto;
  height: 34px;
  margin-bottom: var(--space-4);
}

.sf-footer__company > p {
  max-width: 560px;
}

.sf-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  list-style: none;
  padding: 0;
}

.sf-footer__links a,
.sf-footer__links span {
  color: var(--color-gray-300);
}

/* 🔴 P10-CONTACT-1(사용자 지시): 고객지원 칸이 옆 칸보다 아래로 튀어나와 보였다.
   칸의 박스 높이는 그리드가 이미 같게 맞춰 주지만, 안에 든 줄 수와 전화번호(큰 글씨)
   때문에 **내용의 끝나는 높이**가 달랐다. 그래서 남는 공간을 줄 사이로 나눠
   각 칸의 마지막 줄이 같은 높이에서 끝나게 한다. 🔴 링크를 지워 줄을 맞추지 않는다. */
.sf-footer__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.sf-footer__support > strong {
  margin-bottom: var(--space-2);
  color: var(--color-white);
}

.sf-footer__phone {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.sf-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-700);
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
}

.sf-footer__bottom address {
  font-style: normal;
}

.sf-footer__bottom p {
  flex: 0 0 auto;
}

/* ── 반응형(모바일 우선의 최소 대응) ───────────────────────────── */
@media (max-width: 900px) {
  .sf-topbar,
  .sf-header__desktop,
  .sf-gnb {
    display: none;
  }

  .sf-header__mobile {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 68px;
  }

  .sf-header__mobile .sf-logo {
    justify-self: center;
  }

  .sf-header__mobile .sf-logo img {
    height: 32px;
  }

  .sf-mobile-menu {
    position: static;
  }

  .sf-mobile-menu summary,
  .sf-mobile-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
  }

  .sf-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .sf-mobile-menu__panel {
    position: absolute;
    top: 68px;
    right: calc(var(--space-4) * -1);
    left: calc(var(--space-4) * -1);
    z-index: var(--z-dropdown);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: var(--shadow-dropdown);
  }

  .sf-mobile-search {
    display: flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .sf-mobile-search input {
    min-width: 0;
    flex: 1;
    min-height: var(--touch-target-min);
    padding: 0 var(--space-3);
    border: 0;
  }

  .sf-mobile-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border: 0;
    background: var(--color-gray-900);
    color: var(--color-white);
  }

  .sf-mobile-menu__panel nav {
    display: grid;
    margin-top: var(--space-4);
  }

  .sf-mobile-menu__panel nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
  }

  .sf-mobile-menu__panel nav .sf-icon {
    width: 18px;
    height: 18px;
  }

  .sf-mobile-menu__member {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .sf-mobile-actions {
    display: flex;
  }

  .sf-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sf-footer__company {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sf-footer {
    padding-top: var(--space-8);
  }

  .sf-footer__grid {
    grid-template-columns: 1fr;
  }

  .sf-footer__company {
    grid-column: auto;
  }

  .sf-footer__bottom {
    display: block;
  }

  .sf-footer__bottom p {
    margin-top: var(--space-4);
  }
}