/* ============================================================================
   Flotic 회사 홈페이지 — 섹션별 스타일
   ============================================================================
   IA: Hero → Company Intro → Bok Product → Trust/Policies → Contact/Footer
   5섹션 카피·레이아웃·반응형(1024/768/480px) 구현 완료.
   앱 스크린샷 기반 폰 프레임 mockup·절제된 reveal 모션 적용 완료.
   ============================================================================ */

/* ── 제목계열 요소 — NoonnuBasicGothic 적용 ──────────────────────────────────
   본문은 Pretendard(body 기본값), 제목계열은 NoonnuBasicGothic.
   NoonnuBasicGothic은 Regular(400)만 CDN 제공되므로, weight 700/800/900은
   브라우저 synthetic bold로 렌더링됨. */
.hero__title,
.company-intro__lead,
.company-intro__para-title,
.bok-product__sub-title,
.bok-product__problem-title,
.bok-product__solution-step-title,
.bok-product__value-title,
.trust__pillar-title,
.trust__item-title,
.trust__policies-title,
.trust__disclaimer-title,
.contact-footer__cta-title,
.contact-footer__info-title,
.footer__col-title {
  font-family: var(--font-display);
}

/* ── 공통 헤더 (고정 네비게이션) ───────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

/* 헤더 3축 정렬 — brand(좌 1fr) · nav(중앙 자연폭) · actions(우 1fr).
   이전 space-between 은 양쪽 요소 폭(brand 워드마크 vs 언어토글)이 달라
   nav 가 시각적 중앙에서 밀려 보이는 원인이었다. brand·actions 에 동일 1fr 을
   주어 nav 가 두 equal column 사이에서 정확히 중앙에 오도록 보정.
   모바일(≤768px) 에서는 nav 가 position:fixed 로 flow 에서 빠지므로
   brand(좌)·actions(우) 만 남아 기존 토글 레이아웃을 그대로 유지한다. */
.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: var(--space-sm);
  font-size: var(--text-body-large);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-primary);
}

.site-header__brand:hover {
  color: var(--color-text-primary);
}

.site-header__brand-mark {
  /* Flotic CI 마크 — ci-mark.svg (마크만, 텍스트 없음).
     다크 모드에서는 흰색으로 전환(@media in SVG). */
  display: block;
  flex-shrink: 0;
  height: 32px;
  width: auto;
}

.site-header__brand-text {
  /* CI 마크 옆 회사명 — KO "플로틱 Flotic" / EN "Flotic".
     "Flotic" 영문 폰트는 Noto Sans JP SemiBold(600). */
  font-family: var(--font-brand);
  font-size: var(--text-body-large);
  font-weight: var(--weight-semi-bold);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-primary);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.site-header__nav-link {
  font-size: var(--text-body-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--motion-fast);
}

.site-header__nav-link:hover {
  color: var(--color-text-primary);
}

.site-header__nav-link.is-active {
  color: var(--color-primary-hover);
}

/* nav active 정제 — 데스크톱에서 활성 섹션에 언더라인 표시기.
   모바일 드롭다운(768px 이하)에서는 border-bottom 레이아웃과 충돌하지 않도록 미노출. */
@media (min-width: 769px) {
  .site-header__nav-link {
    position: relative;
  }

  .site-header__nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--motion-base);
  }

  .site-header__nav-link.is-active::after {
    transform: scaleX(1);
  }
}

/* 모바일 햄버거 토글 */
.site-header__toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.site-header__toggle-icon {
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  position: relative;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform var(--motion-fast);
}

.site-header__toggle-icon::before {
  top: -6px;
}

.site-header__toggle-icon::after {
  top: 6px;
}

@media (max-width: 768px) {
  .site-header__toggle {
    display: inline-flex;
  }

  /* 햄버거 → X 전환 (토글 버튼 .is-open 클래스) */
  .site-header__toggle.is-open .site-header__toggle-icon {
    background: transparent;
  }

  .site-header__toggle.is-open .site-header__toggle-icon::before {
    transform: rotate(45deg);
    top: 0;
  }

  .site-header__toggle.is-open .site-header__toggle-icon::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* 스크림 — 메뉴 패널 뒤 본문을 반투명 어둡게 처리하여 분리감 생성 */
  .site-header__nav-scrim {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-scrim-nav);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base);
    z-index: 99;
  }

  .site-header__nav-scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-base) var(--container-padding);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--motion-base), opacity var(--motion-base);
  }

  .site-header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__nav-link {
    padding-block: var(--space-md);
    font-size: var(--text-body);
    border-bottom: 1px solid var(--color-border);
  }

  /* 마지막 링크 border 제거 — 시각적 여백 */
  .site-header__nav-link:last-child {
    border-bottom: none;
  }
}

/* ── 언어 토글 (ko/en 전환) ─────────────────────────────────────────────── */
/* 헤더 우측 네비·햄버거 토글을 감싸는 액션 래퍼. 언어 토글과 햄버거를 한 축에 정렬. */
.site-header__actions {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* KO | EN 토글 — 절제된 텍스트 링크. 활성 언어는 primary 강조, 비활성은 링크. */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  letter-spacing: var(--tracking-body-small);
}

.lang-toggle__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--motion-fast);
}

.lang-toggle__link:hover {
  color: var(--color-primary-hover);
}

.lang-toggle__link--active {
  color: var(--color-primary-hover);
  cursor: default;
}

.lang-toggle__link--active:hover {
  color: var(--color-primary-hover);
}

.lang-toggle__sep {
  color: var(--color-text-secondary);
  user-select: none;
}

/* ── §1 Hero ─────────────────────────────────────────────────────────────── */
.hero {
  padding-top: calc(var(--header-height) + var(--space-hero));
  padding-bottom: var(--space-x7l);
  background: linear-gradient(
    180deg,
    var(--color-primary-well) 0%,
    var(--color-bg) 100%
  );
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
}

.hero__title {
  font-size: var(--text-display-extra);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  max-width: 22ch;
  /* eyebrow 제거(2026-07-12) 보정 — 제거된 eyebrow + gap 만큼 상단 여백 유지 */
  margin-top: calc(var(--space-xl) + var(--text-micro));
}

.hero__subtitle {
  font-size: var(--text-body-large);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  /* text-secondary(#4E5968)는 블루 톤 Hero 배경 위에서 대비가 약 5.6:1로
     본문 가독성이 떨어져 text-primary(#191F28)로 상향 — 대비 ~13.5:1.
     타이틀과의 위계는 size(48px vs 18px)·weight(900 vs 400)로 유지. */
  color: var(--color-text-primary);
  max-width: 52ch;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* 히어로 비주얼 — 실제 앱 화면 2장을 staggered 폰 프레임으로 배치.
   PC 홈페이지다운 레이아웃을 유지하되, 모바일 앱 소개 랜딩 느낌 절제. */
.hero__visual {
  width: 100%;
  max-width: 760px;
  margin-top: var(--space-x3l);
  display: flex;
  justify-content: center;
}

.hero__phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
}

/* 폰 프레임 mockup — 라운드 테두리 + 절제 그림자로 앱 화면을 담는 컨테이너 */
.phone-mockup {
  position: relative;
  margin: 0;
  border-radius: 28px;
  background: var(--color-surface);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  flex-shrink: 0;
}

.phone-mockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero: 두 폰을 살짝 겹쳐 배치 — 뒤 폰은 작게·살짝 회전 */
.hero__phones .phone-mockup--front {
  width: 240px;
  z-index: 2;
}

.hero__phones .phone-mockup--back {
  width: 200px;
  transform: rotate(-4deg) translateX(28px);
  opacity: 0.92;
  z-index: 1;
}

/* ── §1 Hero 반응형 ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--space-x5l));
    padding-bottom: var(--space-x5l);
  }

  .hero__title {
    font-size: var(--text-display-large);
    max-width: none;
  }

  .hero__subtitle {
    font-size: var(--text-body);
  }

  .hero__phones .phone-mockup--front {
    width: 200px;
  }

  .hero__phones .phone-mockup--back {
    width: 168px;
    transform: rotate(-4deg) translateX(20px);
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-headline-large);
  }

  .hero__cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero__cta-group .btn {
    width: 100%;
  }

  .hero__phones .phone-mockup--front {
    width: 168px;
  }

  .hero__phones .phone-mockup--back {
    width: 140px;
    transform: rotate(-4deg) translateX(14px);
  }
}

/* ── §2 Company Intro ────────────────────────────────────────────────────── */
.company-intro {
  background: var(--color-bg);
}

.company-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-x5l);
  align-items: center;
}

.company-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.company-intro__lead {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  color: var(--color-text-primary);
}

/* 단락 그룹 — 문제의식 / 왜 푸는지 / 지향 경험 */
.company-intro__paragraphs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.company-intro__para {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.company-intro__para-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-micro);
  color: var(--color-primary-hover);
  text-transform: none;
}

.company-intro__para-body {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

/* 실제 앱 화면 — 혜택 상세. 폰 프레임 mockup으로 담아 "정보가 정리되어 닿는" 과정 제시 */
.company-intro__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-intro__visual .phone-mockup {
  width: 260px;
}

/* ── §2 Company Intro 반응형 ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .company-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .company-intro__visual {
    order: -1;
  }

  .company-intro__visual .phone-mockup {
    width: 220px;
  }

  .company-intro__lead {
    font-size: var(--text-title);
  }
}

/* ── §3 Bok Product ──────────────────────────────────────────────────────── */
.bok-product {
  background: var(--color-surface);
}

/* 공통 소제목 — 문제·솔루션·가치 카드 블록 공용 */
.bok-product__sub-title {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--color-text-primary);
  text-align: center;
}

.bok-product__sub-lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 48ch;
  margin: var(--space-sm) auto 0;
}

/* 블록 간 세로 간격 */
.bok-product__problem,
.bok-product__solution,
.bok-product__values {
  margin-top: var(--space-x6l);
}

/* ── 3-1. 문제 섹션 ──────────────────────────────────────────────────────── */
.bok-product__problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.bok-product__problem-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.bok-product__problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.bok-product__problem-title {
  font-size: var(--text-body-large);
  font-weight: var(--weight-semi-bold);
  line-height: var(--leading-title);
  color: var(--color-text-primary);
}

.bok-product__problem-desc {
  font-size: var(--text-body-small);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .bok-product__problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bok-product__problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 3-2. 솔루션 섹션 ────────────────────────────────────────────────────── */
.bok-product__solution-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  max-width: 720px;
  margin-inline: auto;
}

.bok-product__solution-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-primary-well);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.bok-product__solution-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-body-large);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.bok-product__solution-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bok-product__solution-step-title {
  font-size: var(--text-body-large);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  color: var(--color-text-primary);
}

.bok-product__solution-step-desc {
  font-size: var(--text-body-small);
  line-height: var(--leading-body-small);
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .bok-product__solution-step {
    padding: var(--space-base) var(--space-lg);
  }
}

@media (max-width: 480px) {
  .bok-product__solution-step {
    padding: var(--space-md) var(--space-base);
    gap: var(--space-md);
  }

  .bok-product__solution-step-num {
    width: 32px;
    height: 32px;
    font-size: var(--text-body);
  }
}

/* ── 3-2b. 솔루션 보조 비주얼 — 신청 상태 조회 실화면 ──────────────────────── */
.bok-product__solution-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-x5l);
  text-align: center;
}

.bok-product__solution-shot .phone-mockup--sm {
  width: 220px;
  /* figcaption이 figure 안으로 들어왔으므로 overflow hidden 해제 —
     캡션이 폰 프레임 밖으로 자연스럽게 흐르도록. */
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.bok-product__solution-shot .phone-mockup--sm img {
  border-radius: 28px;
  box-shadow: var(--shadow-elevated);
}

.bok-product__solution-shot-caption {
  margin-top: var(--space-md);
  font-size: var(--text-body-small);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
  max-width: 44ch;
}

@media (max-width: 768px) {
  .bok-product__solution-shot .phone-mockup--sm {
    width: 190px;
  }
}

/* ── 3-3. 가치 카드 ──────────────────────────────────────────────────────── */
.bok-product__values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.bok-product__value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.bok-product__value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-well);
  color: var(--color-primary);
  flex-shrink: 0;
}

.bok-product__value-title {
  font-size: var(--text-body-large);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  color: var(--color-text-primary);
}

.bok-product__value-desc {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .bok-product__values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bok-product__values-grid {
    grid-template-columns: 1fr;
  }
}

/* ── §4 Trust / Policies ─────────────────────────────────────────────────── */
.trust {
  background: var(--color-bg);
}

/* ── 4-1. 신뢰 원칙 — 3 pillar ────────────────────────────────────────────── */
.trust__pillars {
  margin-bottom: var(--space-x6l);
}

.trust__pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.trust__pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.trust__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-well);
  color: var(--color-primary);
  flex-shrink: 0;
}

.trust__pillar-title {
  font-size: var(--text-body-large);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  color: var(--color-text-primary);
}

.trust__pillar-desc {
  font-size: var(--text-body-small);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
  .trust__pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .trust__pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 4-2. 정책 카드 ────────────────────────────────────────────────────────── */
.trust__policies-title {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.trust__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-well);
  color: var(--color-primary);
  flex-shrink: 0;
  margin-bottom: var(--space-xs);
}

.trust__item-title {
  font-size: var(--text-body-large);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
}

.trust__item-desc {
  font-size: var(--text-body-small);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
  flex-grow: 1;
}

.trust__item-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-primary-hover);
  margin-top: var(--space-sm);
  transition: color var(--motion-fast);
}

.trust__item-link:hover {
  color: var(--color-primary-hover);
}

/* 정책 URL 준비 상태 안내 — 미오픈 고지 */
.trust__policies-note {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  font-size: var(--text-caption);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
  text-align: center;
}

/* "준비 중" 배지 — 정책 카드 링크 옆 */
.trust__item-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  background: var(--color-amber);
  color: var(--color-on-primary);
  margin-left: var(--space-sm);
  vertical-align: middle;
}

/* 정책 링크 인라인 안내 — 클릭 시 토글 */
.policy-inline-notice {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-primary-well);
  font-size: var(--text-caption);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

/* 푸터 정책 링크용 인라인 안내 — 더 작게 */
.footer__col-list .policy-inline-notice {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: var(--text-micro);
}

@media (max-width: 768px) {
  .trust__grid {
    grid-template-columns: 1fr;
  }
}

/* ── 4-3. 비공식 안내 서비스 고지 (Trust 섹션 내 — 단일 노출) ─────────────── */
.trust__disclaimer {
  margin-top: var(--space-x6l);
  padding: var(--space-xxl) var(--space-x4l);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  border: 1px solid var(--color-border);
  text-align: center;
}

.trust__disclaimer-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-body-small);
}

.trust__disclaimer-body {
  font-size: var(--text-body-small);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: 72ch;
  margin: var(--space-sm) auto 0;
}

@media (max-width: 768px) {
  .trust__disclaimer {
    padding: var(--space-xl) var(--space-xxl);
  }

  .trust__disclaimer-body {
    max-width: 100%;
  }
}

/* ── §5 Contact / Footer ─────────────────────────────────────────────────── */
.contact-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-x6l) var(--space-xl);
}

/* ── 5-1. 문의 CTA ─────────────────────────────────────────────────────────── */
.contact-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-x5l);
}

.contact-footer__cta-title {
  font-size: var(--text-headline-large);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  color: var(--color-text-primary);
}

.contact-footer__cta-sub {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* ── 5-2. 연락처 정보 ──────────────────────────────────────────────────────── */
.contact-footer__info {
  padding-bottom: var(--space-x5l);
}

.contact-footer__info-title {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headline);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
}

.contact-footer__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}

.contact-footer__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.contact-footer__info-item--full {
  grid-column: 1 / -1;
}

.contact-footer__info-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-semi-bold);
  letter-spacing: var(--tracking-micro);
  color: var(--color-text-secondary);
}

.contact-footer__info-value {
  font-size: var(--text-body-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body-small);
  color: var(--color-text-primary);
  /* 주소("경기도 용인시 수지구 문인로 57, 3층 301 - 나025호(풍덕천동, 삼익상가)")
     등 긴 괄호 텍스트가 좁은 모바일 그리드 셀에서 한 어절로 묶여 넘치지 않도록
     base.css의 break-word에서 anywhere로 강화 — min-content 크기까지 반영. */
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .contact-footer__info-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 5-3. 푸터 본체 ────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-x5l);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-x5l);
}

.footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__brand-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-primary);
}

.footer__brand-mark {
  /* 푸터용 Flotic CI 마크 — ci-mark.svg (마크만, 텍스트 없음).
     헤더보다 여백이 넓은 푸터 맥락에 맞춰 살짝 더 크게. */
  display: block;
  height: 44px;
  width: auto;
}

.footer__brand-text {
  /* CI 워드마크 옆 한국어 상호명 — 워드마크 SVG에는 "Flotic" 영문만 있으므로
     한국어명 "플로틱(Flotic)"을 텍스트로 추가.
     "Flotic" 영문 폰트는 Noto Sans JP SemiBold(600). */
  font-family: var(--font-brand);
  font-size: var(--text-body-large);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-body-large);
}

.footer__brand-tagline {
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  max-width: 40ch;
}

.footer__col-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__col-link {
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  transition: color var(--motion-fast);
}

.footer__col-link:hover {
  color: var(--color-text-primary);
}

/* footer 컬럼 내 비-링크 텍스트(이메일 문의 등) — 링크와 동일한 시각적 크기/색상이되
   hover/transition 흔적 없이 일반 텍스트로 표시. */
.footer__col-text {
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
}

/* 사업자 정보 영역 — LegalEntityInfo 미러링 */
.footer__legal {
  margin-top: var(--space-x5l);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

.footer__legal-line {
  margin-bottom: var(--space-xs);
  /* 사업자 정보 한 줄에 여러 항목이 "|"로 이어지므로 모바일 폭에서
     긴 어절이 발생할 수 있어 base.css break-word에서 anywhere로 강화. */
  overflow-wrap: anywhere;
}

/* 비사칭 고지 — FloticBrand.unofficialServiceFootnoteKo 미러링 */
.footer__disclaimer {
  margin-top: var(--space-lg);
  padding: var(--space-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  font-size: var(--text-caption);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

/* 오픈소스 라이선스 고지 — 앱 FontLicensesHubBody 4종 미러
   항목명·순서·출처명·요약은 lib/core/utils/i18n/settings_strings.dart와 일치. */
.footer__fonts {
  margin-top: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  line-height: var(--leading-body-small);
  color: var(--color-text-secondary);
}

/* 아코디언 토글 버튼 — 제목 + chevron, 클릭 시 content 펼침/접힘. */
.footer__fonts-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.footer__fonts-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.footer__fonts-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.footer__fonts-chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}

.footer__fonts-toggle[aria-expanded="true"] .footer__fonts-chevron {
  transform: rotate(180deg);
}

.footer__fonts-content {
  margin-top: var(--space-md);
}

.footer__fonts-intro {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

.footer__fonts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__font-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__font-name {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
}

.footer__font-attr {
  overflow-wrap: anywhere;
}

.footer__font-summary {
  overflow-wrap: anywhere;
}

.footer__font-link {
  color: var(--color-primary-hover);
  text-decoration: none;
  white-space: nowrap;
}

.footer__font-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   약관 페이지 (policy-page) — terms.html / privacy.html / paid-terms.html
   ============================================================================ */

/* 전체 래퍼 */
.policy-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-xl) var(--space-x3l);
}

/* 뒤로 가기 링크 */
.policy-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: color var(--motion-base);
}

.policy-page__back:hover {
  color: var(--color-primary-hover);
}

.policy-page__back svg {
  flex-shrink: 0;
}

/* 페이지 헤더 */
.policy-page__header {
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.policy-page__eyebrow {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-primary-hover);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.policy-page__title {
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
}

.policy-page__meta {
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
}

/* 언어 전환 링크 */
.policy-page__lang {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--text-body-small);
}

.policy-page__lang-link {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.policy-page__lang-link:hover {
  text-decoration: underline;
}

.policy-page__lang-sep {
  color: var(--color-text-secondary);
}

/* 섹션 리스트 */
.policy-page__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* 각 조항 */
.policy-section {
  scroll-margin-top: 80px;
}

.policy-section__title {
  font-size: var(--text-headline);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
}

.policy-section__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 시행일자 블록 */
.policy-section--effective {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.policy-section--effective .policy-section__title {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.policy-section--effective .policy-section__body {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* 요금 표 — 유료서비스 약관 */
.policy-section__body ul,
.policy-section__body ol {
  padding-left: 1.25rem;
  margin: var(--space-sm) 0;
}

.policy-section__body li {
  margin-bottom: var(--space-xs);
}

/* 약관 간 이동 링크 */
.policy-page__related {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.policy-page__related-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.policy-page__related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.policy-page__related-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--motion-base), color var(--motion-base);
}

.policy-page__related-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 연락처 박스 */
.policy-contact-box {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.policy-contact-box__title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semi-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.policy-contact-box__row {
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.policy-contact-box__link {
  color: var(--color-primary-hover);
  text-decoration: none;
}

.policy-contact-box__link:hover {
  text-decoration: underline;
}

/* 반응형 */
@media (max-width: 768px) {
  .policy-page {
    padding: var(--space-xl) var(--space-md) var(--space-xxl);
  }

  .policy-page__title {
    font-size: var(--text-headline);
  }

  .policy-section__title {
    font-size: var(--text-body-large);
  }
}

/* 저작권 */
.footer__copyright {
  margin-top: var(--space-lg);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer__brand-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ============================================================================
   모션 정제 — 카드 hover elevation / border accent
   ============================================================================
   절제된 플랫 톤 유지: translateY lift 대신 box-shadow·border-color 변화만.
   reveal 의 transform 규칙(.reveal-on .reveal.is-visible)과 충돌하지 않도록
   hover 에 transform 은 쓰지 않는다(가벼운 elevation 변화). */

/* Bok Product — 문제 카드(border형): border accent + 미세 shadow */
.bok-product__problem-item {
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

.bok-product__problem-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow: var(--shadow-card);
}

/* Bok Product — 가치 카드: shadow card → elevated */
.bok-product__value-card {
  transition: box-shadow var(--motion-base);
}

.bok-product__value-card:hover {
  box-shadow: var(--shadow-elevated);
}

/* Trust — 신뢰 원칙 pillar: shadow card → elevated */
.trust__pillar {
  transition: box-shadow var(--motion-base);
}

.trust__pillar:hover {
  box-shadow: var(--shadow-elevated);
}

/* Trust — 정책 카드: shadow card → elevated */
.trust__item {
  transition: box-shadow var(--motion-base);
}

.trust__item:hover {
  box-shadow: var(--shadow-elevated);
}

/* Contact — 연락처 항목(border형): border accent */
.contact-footer__info-item {
  transition: border-color var(--motion-base);
}

.contact-footer__info-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}