/* ============================================================
   사소한 연정사 — Tokens & Base
   ============================================================ */
:root {
  /* color */
  --ink: #0A0A0A;
  --ink-2: #101010;
  --off: #1B1B1B;
  --paper: #FAFAFA;
  --gold: #D4A574;       /* 베이지 골드 (시그너처 강조색) */
  --gold-2: #9B7E4F;     /* 깊은 베이지 (hover, 작은 텍스트 contrast 강화) */
  --gold-3: #C9B17A;     /* 따뜻한 베이지 (보조 강조) */
  --gold-deep: #9B7E4F;  /* alias of --gold-2 (가독성) */
  --yellow: #FFFFFF;     /* 미니멀: 큰 면적 노랑 대신 화이트 */
  --gray-600: #666666;
  --gray-400: #9A9A9A;
  --gray-300: #D4D4D4;
  --gray-200: #E6E6E6;
  /* line tokens — 베이지 골드 시그너처에 맞춘 라인 컬러 */
  --line-dark: rgba(255,255,255,0.18);
  --line-dark-2: rgba(255,255,255,0.08);
  --line-light: rgba(212,165,116,0.4);
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.07);

  /* type */
  --font-base: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  /* mono fallback에 Pretendard 추가 — JetBrains Mono는 한글 글리프 미포함이라
     한글 라벨이 시스템 monospace로 떨어져 사람마다 다르게 보임. Pretendard로
     명시적 폴백을 두면 모든 환경에서 동일한 한글 글리프 사용. */
  --font-mono: "JetBrains Mono", "Pretendard Variable", "Pretendard", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
/* base html에는 overflow-x: hidden 적용 안 함 — 데스크톱 fullpage 시스템이 작동하려면
   html 자체가 default(visible)이어야. 단일 차원만 hidden 지정 시 W3C spec에 의해
   다른 차원이 auto로 강제 변환되어 html이 scrollable해지고, body의 fullpage wheel
   handler가 가로채는 wheel 이벤트가 html scroll로 새어나가 fullpage 망가짐.
   가로 스크롤 차단은 모바일 매체쿼리 안에서만 처리 (line 3514 일대). */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  background: var(--ink);
  color: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* fullpage controls scroll */
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* 2026-05-18 a11y: skip-to-content 링크 — 평시 화면 밖, 포커스 시 좌상단 노출 */
.skip-link {
  position: fixed;
  top: -40px;
  left: 12px;
  z-index: 999999;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--gold);
  transition: top 180ms ease;
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--gold); outline-offset: 2px; }

/* numbers */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Fullpage stage
   ============================================================ */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.stage-track {
  position: absolute;
  inset: 0;
  transition: transform 900ms cubic-bezier(0.83, 0, 0.17, 1);
  will-change: transform;
}
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.section.dark   { background: var(--ink); color: var(--paper); }
.section.darker { background: #060606; color: var(--paper); }
.section.light  { background: var(--paper); color: var(--ink); }
.section.yellow { background: var(--yellow); color: var(--ink); }

.container {
  position: relative;
  width: min(1400px, calc(100vw - 160px));
  margin: 0 auto;
  height: 100%;
}

/* ============================================================
   Top nav
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: 72px;
  display: flex; align-items: center;
  padding: 0 56px;
  /* 불투명 처리 (2026-05-12) — 기존엔 background 없어 뒤 콘텐츠가 그대로 비침.
     베이지 paper 배경 + ink 텍스트 + 하단 라인으로 헤더 영역을 시각적으로 분리.
     on-yellow / on-light modifier도 color는 그대로 ink. */
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line-light);
  transition: color 600ms ease, background 600ms ease, border-color 600ms ease;
  pointer-events: none;
  /* 좁은 viewport(<375) 안전망 (2026-05-12 A수정) — fixed + left:0/right:0이라
     viewport 폭 따라가지만 일부 모바일에서 viewport 계산 어긋날 때 햄버거가
     화면 밖으로 잘리던 문제 방어. box-sizing은 글로벌 룰로 이미 border-box. */
  max-width: 100vw;
  box-sizing: border-box;
}
.nav.on-yellow { color: var(--ink); }
.nav.on-light  { color: var(--ink); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; pointer-events: auto;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  letter-spacing: -0.04em; font-weight: 800;
  font-size: 18px;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: currentColor;
  color: var(--gold);               /* 베이지 골드 시그너처 */
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.brand-mark span { color: var(--ink); }
.nav.on-yellow .brand-mark { color: var(--gold); }
.nav.on-yellow .brand-mark span { color: var(--ink); }
.brand-en {
  font-size: 11px; letter-spacing: 0.24em;
  font-weight: 500; opacity: 0.6;
  margin-left: 4px;
}
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  color: inherit; text-decoration: none;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  padding: 4px 0;
  opacity: 0.8;
  transition: opacity 200ms ease, color 200ms ease;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }
.nav-cta {
  font-size: 12px; font-weight: 700;
  padding: 10px 18px;
  letter-spacing: 0.04em;
  border: 0;                            /* 2026-05-08 테두리 제거 */
  background: transparent;
  color: var(--ink);                    /* 2026-05-04 글자 검정 */
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.nav-cta:hover { background: var(--gold); }
.nav-cta:hover span { color: #fff; }
.nav.on-yellow .nav-cta { color: var(--ink); }
.nav.on-yellow .nav-cta:hover span,
.nav.on-light .nav-cta:hover span { color: #fff; }
.nav.dark-host .nav-cta { color: #fff; }
.nav.dark-host .nav-cta:hover { background: var(--gold); }
.nav.dark-host .nav-cta:hover span { color: #fff; }

/* progress dots */
.dots {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: auto;
}
.dot {
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 300ms ease;
  position: relative;
}
.dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
  font-weight: 500;
}
.dot:hover::after { opacity: 1; }
.dot.active { background: var(--gold); height: 22px; }
.dots.on-light .dot { background: rgba(0,0,0,0.18); }
.dots.on-light .dot.active { background: var(--ink); }
.dots.on-light .dot::after { color: rgba(0,0,0,0.55); }
.dots.on-yellow .dot { background: rgba(0,0,0,0.25); }
.dots.on-yellow .dot.active { background: var(--ink); }
.dots.on-yellow .dot::after { color: rgba(0,0,0,0.7); }

/* ============================================================
   Hero
   ============================================================ */
.hero { background: #FDDA02; }   /* 사진 노란 배경(#FDDA02) 정확히 매칭 — seamless */
.hero-stage {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
}
/* ============================================================
   2026-05-08 hero-banner: 이미지 비율 고정 래퍼.
   PC는 1949/807 비율로 banner 박스 잡음 → 안에 image와 텍스트 오버레이가
   같은 좌표계에서 정렬됨. 모바일은 비율 강제 안 함 (모바일 이미지 사용).
   ============================================================ */
.hero-banner {
  position: relative;
  /* 모바일 기본: 비율 강제 안 하고 stage 채움 */
  width: 100%;
  height: 100%;
}
@media (min-width: 701px) {
  .hero-banner {
    /* PC 한정: 이미지 비율 잡고, viewport 가로/세로 중 작은 쪽에 fit */
    width: min(100%, calc(100vh * 1949 / 807));
    height: auto;
    aspect-ratio: 1949 / 807;
    max-width: 100%;
    max-height: 100%;
    /* 텍스트 오버레이 폰트 사이즈를 cqw로 잡기 위함 */
    container-type: inline-size;
  }
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;       /* 모바일은 비율 다른 이미지 fit */
  object-position: center;
}
@media (min-width: 701px) {
  /* PC는 banner 비율이 이미지 비율과 동일 → cover로 빈틈 없이 채움 (실질 잘림 없음) */
  .hero-photo { object-fit: cover; }
}

/* ============================================================
   hero-banner 텍스트 오버레이 — 이미지 안의 "연애는 / 연정사" 픽셀 정렬
   bbox 측정값 (1949×807 기준):
     "연애는" 그룹: x=75-479 y=212-362 → left 3.85%, top 26.27%
     "연정사" 그룹: x=1434-1865 y=212-366 → right 4.31%, top 26.27%
     큰 글자 시각 height 150px → font-size ≈ 208px (cap_ratio ~0.72)
                              → 208/1949 = 10.67% of W → 10.67cqw
     작은 "는" 글자 87px → 87/150 = 0.58 of big char → font-size ≈ 0.582em (relative)
   ============================================================ */
.hb-text {
  display: none;  /* 기본: 안 보임 (모바일 등) */
}
@media (min-width: 701px) {
  .hb-text {
    display: block;
    position: absolute;
    /* 2026-05-08 user 요청: 양쪽 모두 더 위로 (26.27% → 21.20%, 5.07% up ≈ 41px) */
    top: 21.20%;
    z-index: 3;
    font-family: var(--font-base);  /* Pretendard Variable */
    font-weight: 900;
    font-size: 10.67cqw;            /* container width 비례 */
    color: #140A06;                  /* 이미지 텍스트 샘플 평균 */
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
    /* font-stretch / font-style 명시 (Variable font 안정 렌더) */
    font-stretch: normal;
    font-style: normal;
    pointer-events: auto;
    /* 2026-05-08 그림자 효과 — 시안1 캠페인 스타일 (offset, 0 blur, 18% 검정) */
    text-shadow: 0.4cqw 0.5cqw 0 rgba(0,0,0,0.18);
  }
  /* 2026-05-08 좌측은 살짝 좌측으로 (3.85% → 3.30%) */
  .hb-text-l { left: 3.30%; }
  .hb-text-r { right: 3.80%; }
  /* 2026-05-08 글자 단위 transform 위해 inline-block + bottom-center origin */
  .hb-char {
    display: inline-block;
    transform-origin: bottom center;
    will-change: transform;
  }
  /* 작은 "는" — 큰 글자의 ~58% */
  .hb-small {
    font-size: 0.582em;
    letter-spacing: -0.02em;
    margin-left: 0.06em;
    /* 베이스라인 정렬: 작은 글자가 큰 글자 baseline에 맞춰 떠 있음 */
    vertical-align: baseline;
  }
}
/* 2026-05-08 통통 튀는 Y 로고 — body 직속 fixed (nav z-index 위로) */
.hb-mark-bounce {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;        /* JS에서 banner 너비 비례로 동적 설정 */
  height: 60px;
  object-fit: contain;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
@media (max-width: 700px) {
  .hb-mark-bounce { display: none; }
}
.hero-sub {
  position: absolute;
  left: 56px; bottom: 56px;
  z-index: 4;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.01em;
  font-weight: 500;
  line-height: 1.5;
  max-width: 320px;
}
.hero-sub strong { font-weight: 800; }
.hero-meta {
  position: absolute;
  right: 56px; bottom: 56px;
  z-index: 4;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  display: flex; gap: 18px; align-items: center;
}
.hero-meta .sep {
  width: 28px; height: 1px; background: var(--ink); opacity: 0.6;
}
.hero-scroll {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  z-index: 4;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.3em;
  font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0.7;
}
.hero-scroll-line {
  width: 1px; height: 36px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute; left: 0; top: -100%;
  width: 100%; height: 60%;
  background: var(--yellow);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -60%; }
  100% { top: 100%; }
}

/* ============================================================
   Generic section header
   ============================================================ */
.kicker {
  /* 섹션 라벨 ("브랜드 선언", "카테고리 비교" 등) — 11→14px.
     숫자 prefix 제거(2026-05-12) 후 라벨 자체에 시각 무게 부여.
     letter-spacing 축소(0.24→0.14em)로 한글 가독성 ↑. */
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px; background: var(--gold);
}
.section.light .kicker { color: var(--ink); }
.section.light .kicker::before { background: var(--ink); }

.eyebrow-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.section.light .eyebrow-num { color: rgba(0,0,0,0.4); }

.h-display {
  font-weight: 900;
  font-size: clamp(56px, 6.5vw, 112px);
  letter-spacing: -0.05em;
  line-height: 0.96;
  margin: 0;
}
.h-2 {
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin: 0;
}
.body-lg {
  font-size: 17px; line-height: 1.7;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  letter-spacing: -0.01em;
}
.section.light .body-lg { color: rgba(0,0,0,0.7); }

/* ============================================================
   Section 2: Manifesto
   ============================================================ */
.manifesto {
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(212,165,116,0.10), transparent 60%),
    radial-gradient(50% 70% at 10% 80%, rgba(212,165,116,0.06), transparent 60%),
    var(--ink);
}
.manifesto-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 80px;
  gap: 80px;
}
.manifesto-left { padding-left: 80px; }
.manifesto-stanza {
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.95);
}
.manifesto-stanza p { margin: 0 0 28px; }
.manifesto-stanza .mute { color: rgba(255,255,255,0.4); font-weight: 500; }

/* 2026-05-07 단색 베이지 골드 강조 (.gold) — 그라데이션 대신 일관된 단색 */
.gold {
  color: var(--gold);
  font-weight: 800;
}

/* 2026-05-04 manifesto 우측 영상 (브랜드 선언 우측) — 시안3 패턴: 클릭 시 모달 */
.manifesto-video-wrap {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vh, 640px);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.manifesto-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
/* CTA 버튼 ('영상 이어서 보기') */
.manifesto-video-cta {
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.manifesto-video-cta:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.35);
}
.manifesto-video-cta .mvc-ring {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.manifesto-video-cta .mvc-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 2026-05-04 비디오 모달 (시안3 그대로 차용) */
.vmodal {
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.vmodal.is-open { display: flex; }
.vmodal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: vmodal-bg 0.25s ease forwards;
  cursor: pointer;
}
.vmodal-frame {
  position: relative; z-index: 1;
  width: min(1080px, 100%);
  aspect-ratio: 16/9;
  max-height: calc(100vh - 60px);
  background: #000; border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
  transform: scale(0.96); opacity: 0;
  animation: vmodal-frame 0.32s cubic-bezier(0.18,0.9,0.32,1.18) forwards;
}
.vmodal-frame video {
  width: 100%; height: 100%; display: block;
  background: #000;
}
.vmodal-close {
  position: absolute; right: -2px; top: -52px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.vmodal-close:hover { background: rgba(255,255,255,0.22); }
@keyframes vmodal-bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmodal-frame {
  to { transform: scale(1); opacity: 1; }
}
@media (max-width: 720px) {
  .vmodal { padding: 14px; }
  .vmodal-close { top: 8px; right: 8px; background: rgba(0,0,0,0.5); }
  .manifesto-video-cta .mvc-label { display: none; }
  .manifesto-video-cta { padding: 8px; }
}

.manifesto-right {
  display: flex; flex-direction: column; gap: 32px;
  padding-right: 40px;
  /* 영상 단독 배치 시 정중앙 정렬 */
  justify-content: center;
}
.manifesto-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.manifesto-figure {
  border: 1px solid var(--line-dark);
  padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.manifesto-figure .num {
  font-weight: 900;
  font-size: 88px;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #aaa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.manifesto-figure .num .unit {
  font-size: 32px;
  font-weight: 700;
  margin-left: 4px;
  background: none; -webkit-text-fill-color: rgba(255,255,255,0.6);
}
.manifesto-figure .lbl {
  font-size: 13px; color: rgba(255,255,255,0.55);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.manifesto-fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================
   Section 3: 3사 비교
   ============================================================ */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  padding: 96px 0 80px;
}
.compare-head {
  text-align: center;
  margin-bottom: 56px;
}
.compare-head .h-2 { margin-top: 18px; max-width: 14ch; margin-left: auto; margin-right: auto; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.compare-col {
  padding: 36px 30px;
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  min-height: 380px;
}
.compare-col:last-child { border-right: 0; }
.compare-col.center {
  background: linear-gradient(180deg, rgba(212,165,116,0.08), rgba(212,165,116,0.02));
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  margin: -1px -1px;
}
.compare-col .col-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.compare-col.center .col-tag { color: var(--gold); }
.compare-col .col-name {
  font-weight: 800; font-size: 24px; letter-spacing: -0.03em;
}
.compare-col .col-tagline {
  font-size: 13px; color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
  line-height: 1.5;
}
.compare-col.center .col-tagline { color: rgba(255,255,255,0.85); }
.compare-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px dashed var(--line-dark-2);
  font-size: 13px;
}
.compare-row:first-of-type { border-top: 0; }
.compare-row .k {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.compare-row .v {
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.01em;
}
.compare-col.center .compare-row .v { color: #fff; font-weight: 600; }

/* ============================================================
   Section 4: 차별점 (chips + bg)
   ============================================================ */
.diff {
  background: var(--ink);
  position: relative;
}
/* ============================================================
   Section 7: Quiz
   ============================================================ */
.quiz {
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(212,165,116,0.16), transparent 60%),
    radial-gradient(50% 70% at 10% 80%, rgba(254,222,1,0.10), transparent 60%),
    var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* stage left wider, aside right */
  align-items: stretch;
  height: 100%;
}
.quiz-stage { order: 1; }
.quiz-aside {
  order: 2;
  padding: 96px 64px;
  display: grid;
  grid-template-rows: 1fr auto;   /* top spacer + bottom 6 TYPES */
  border-right: 0;
  border-left: 1px solid var(--line-light);
  background: var(--yellow);
}
.quiz-aside > *:first-child { align-self: center; }   /* heading block centered vertically */
.quiz-aside > *:last-child  { align-self: end; }      /* 6 TYPES stays at bottom */
.quiz-stage {
  padding: 96px 80px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.quiz-progress {
  height: 1px; background: rgba(0,0,0,0.1);
  margin-bottom: 40px; position: relative;
}
.quiz-progress > span {
  position: absolute; left: 0; top: 0; height: 1px;
  background: var(--ink); transition: width 400ms ease;
}
.quiz-q-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em;
  color: rgba(0,0,0,0.5);
  margin-bottom: 16px;
  font-weight: 500;
}
.quiz-q {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0 0 36px;
  max-width: 22ch;
}
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line-light);
  background: #fff;
  text-align: left;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: all 200ms ease;
  cursor: pointer;
  position: relative;
}
.quiz-option .marker {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(0,0,0,0.4);
  border: 1px solid var(--line-light);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.quiz-option:hover {
  border-color: var(--ink);
  background: #fff;
}
.quiz-option:hover .marker { background: var(--ink); color: #fff; border-color: var(--ink); }
.quiz-option.selected {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.quiz-option.selected .marker {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}
.quiz-foot {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(0,0,0,0.5);
}
.quiz-foot button {
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--ink); color: var(--ink);
  font-size: 12px; letter-spacing: 0.04em; font-weight: 700;
  transition: all 200ms ease;
}
.quiz-foot button:hover { background: var(--ink); color: var(--paper); }
.quiz-foot button:disabled { opacity: 0.3; pointer-events: none; }

.quiz-aside-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em; color: rgba(0,0,0,0.5);
  margin-bottom: 20px;
}
.quiz-aside-h {
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1; margin: 0 0 24px;
}
.quiz-aside-b {
  font-size: 15px; line-height: 1.7; color: rgba(0,0,0,0.65);
  margin-bottom: 36px;
  max-width: 32ch;
}
.quiz-aside-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--line-light);
}
.quiz-type-cell {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  border-right: 1px solid var(--line-light);
  font-size: 12px; letter-spacing: -0.01em;
  font-weight: 500;
  color: rgba(0,0,0,0.7);
  padding-left: 14px;
}
.quiz-type-cell:nth-child(even) { border-right: 0; padding-left: 18px; }
.quiz-type-cell .code {
  font-family: var(--font-mono); color: var(--gold);
  font-size: 10px; letter-spacing: 0.18em;
  margin-right: 8px;
}

/* Result modal */
/* Quiz result modal — scoped to the quiz section, brand light tone */
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(247, 242, 232, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
.modal-bg.show { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  width: min(880px, 100%);
  max-height: calc(100vh - 140px);
  overflow: auto;
  position: relative;
  color: var(--ink);
  box-shadow:
    0 40px 80px -24px rgba(0,0,0,0.28),
    0 12px 28px -6px rgba(0,0,0,0.12);
  animation: chipPop 320ms cubic-bezier(0.18, 0.9, 0.32, 1.18);
}
.modal-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  min-height: 480px;
}
.modal-cover {
  background: var(--yellow);
  padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  position: relative; overflow: hidden;
}
.modal-cover::after {
  content: ""; position: absolute;
  right: -80px; bottom: -80px;
  width: 320px; height: 320px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
}
.modal-cover-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em; font-weight: 600;
  opacity: 0.7;
}
.modal-cover-code {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.16em;
  margin-top: auto; font-weight: 600;
  opacity: 0.55;
}
.modal-cover-name {
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 900; letter-spacing: -0.05em; line-height: 0.96;
  margin: 12px 0 8px;
}
.modal-cover-tagline {
  font-size: 15px; letter-spacing: -0.01em; font-weight: 600;
  max-width: 22ch;
  opacity: 0.78;
}
.modal-body {
  padding: 40px;
  background: #fff;
  color: var(--ink);
}
.modal-body h4 {
  font-size: 11px; letter-spacing: 0.22em; font-family: var(--font-mono);
  color: var(--gold-deep, #9B7E4F); margin: 0 0 14px; font-weight: 600;
  text-transform: uppercase;
}
.modal-body .modal-h {
  font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.22;
  margin: 0 0 18px; max-width: 22ch;
  color: var(--ink);
}
.modal-body p {
  color: rgba(0,0,0,0.68); line-height: 1.7; font-size: 14px;
  margin: 0 0 14px;
}
.modal-traits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 24px 0;
  border-top: 1px solid var(--line-light);
}
.modal-trait {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 13px;
}
.modal-trait:nth-child(odd) { padding-right: 14px; }
.modal-trait:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line-light); }
.modal-trait .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: rgba(0,0,0,0.45);
  margin-bottom: 4px; font-weight: 600;
  text-transform: uppercase;
}
.modal-trait .v { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.modal-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--yellow);
  border: 0;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 12px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.modal-cta:hover { background: var(--gold-deep, #9B7E4F); color: #fff; transform: translateY(-2px); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: var(--ink);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  z-index: 4;
  transition: background 200ms ease;
}
.modal-close:hover { background: rgba(0,0,0,0.10); }

@media (max-width: 768px) {
  .modal-grid { grid-template-columns: 1fr; }
  .modal-cover { padding: 32px; }
  .modal-body { padding: 32px; }
  .modal-trait:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ============================================================
   Section 8: 후기 (cinematic)
   ============================================================ */
.reviews {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.55) 80%),
    linear-gradient(180deg, #B89545, #8C6A28);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.reviews::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 70% at 30% 30%, rgba(255,210,80,0.35), transparent 60%),
    radial-gradient(50% 80% at 80% 70%, rgba(120,80,20,0.5), transparent 60%);
  z-index: 0;
}
.reviews-noise {
  position: absolute; inset: 0;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.05) 2px 3px);
  z-index: 1;
  pointer-events: none;
}
.reviews-content {
  position: relative; z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 96px 80px 60px;
  gap: 48px;
}
.reviews-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.reviews-head h2 { color: #fff; max-width: 16ch; }
.reviews-head .body-lg { color: rgba(255,255,255,0.78); max-width: 36ch; }

.reviews-track {
  display: flex; gap: 24px;
  overflow: hidden;
  position: relative;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
.review-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform 600ms cubic-bezier(0.22, 0.6, 0.2, 1), opacity 400ms ease;
  cursor: pointer;
}
.review-card:hover { transform: translateY(-6px); }
.review-photo {
  height: 180px;
  background-size: cover; background-position: center;
  filter: saturate(0.95);
}
.review-quote {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.32;
  color: #fff;
  flex: 1;
}
.review-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.65);
}
.reviews-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.reviews-foot .pager { display: flex; gap: 8px; }
.pager-btn {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: #fff; font-size: 14px;
  transition: all 200ms ease;
}
.pager-btn:hover { background: #fff; color: var(--ink); }
.reviews-counter {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
}
.reviews-counter b { color: #fff; font-weight: 700; }

/* ============================================================
   Section 9: Signup form
   ============================================================ */
/* 2026-05-04 signup 섹션 — 검정 → 화이트 배경 (사장님 요청) */
.signup {
  background: var(--paper);
  color: var(--ink);
  position: relative; overflow: hidden;
}
.signup-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(212,165,116,0.10), transparent 60%),
    radial-gradient(70% 80% at 0% 80%, rgba(212,165,116,0.06), transparent 60%);
}
.signup-noise {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025), transparent 60%);
}
.signup-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
  height: 100%;
  padding: 96px 80px;
}
.signup-left { display: flex; flex-direction: column; gap: 32px; color: var(--ink); }
.signup-left .body-lg { max-width: 36ch; color: rgba(0,0,0,0.7); }
.signup-quote {
  border-left: 1px solid var(--gold);
  padding-left: 18px;
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  letter-spacing: -0.01em;
  line-height: 1.6;
  max-width: 36ch;
}
.signup-quote b { color: var(--gold-deep); font-weight: 600; }
.signup-card {
  border: 1px solid var(--line-light);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 40px;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.10);
}
.signup-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 6px;
}
.signup-card-head .h {
  /* 폼 카드 헤딩 "무료 상담 신청" — 18→24px (한글 임팩트 ↑) */
  font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink);
}
.signup-card-head .meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: rgba(0,0,0,0.45);
}
.signup-row { display: grid; gap: 8px; }
.signup-row label {
  /* 폼 라벨 (이름·연락처·출생년도 등) — 10→14px, letter-spacing 축소.
     mono 폰트가 한글 글리프 없어 시스템 폴백으로 떨어졌을 때 너무 작아 보이던
     문제 해결. font-family는 mono 유지하되 fallback 체인에 Pretendard 추가됨. */
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.08em;
  color: rgba(0,0,0,0.7);
  font-weight: 500;
  font-weight: 500;
}
.signup-row label .req { color: var(--gold-deep); margin-left: 4px; }
.signup-row .input,
.signup-row select,
.signup-row textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  color: var(--ink);
  font-size: 15px;
  padding: 10px 0;
  outline: none;
  letter-spacing: -0.01em;
  transition: border-color 200ms ease;
}
.signup-row .input::placeholder,
.signup-row textarea::placeholder { color: rgba(0,0,0,0.3); }
.signup-row .input:focus,
.signup-row select:focus,
.signup-row textarea:focus { border-color: var(--gold); }
.signup-row select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 8px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
.signup-row select option { background: #fff; color: var(--ink); }
.signup-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.signup-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.signup-pill {
  padding: 8px 12px;
  border: 1px solid var(--line-light);
  background: transparent;
  color: rgba(0,0,0,0.7);
  font-size: 12px; letter-spacing: -0.01em;
  font-weight: 500;
  transition: all 180ms ease;
}
.signup-pill:hover { border-color: var(--line-light); color: var(--ink); }
.signup-pill.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.signup-submit {
  margin-top: 6px;
  padding: 18px 22px;
  background: var(--gold);
  color: #fff;
  border: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 15px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 200ms ease, color 200ms ease;
}
.signup-submit:hover { background: var(--gold-2); color: #fff; }
.signup-submit .arrow { font-size: 20px; }
.signup-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 11px; color: rgba(0,0,0,0.55); letter-spacing: -0.01em; line-height: 1.5; }
.signup-agree input { accent-color: var(--gold); margin-top: 1px; }
.signup-agree b { color: rgba(0,0,0,0.85); font-weight: 600; }
/* 2026-05-20 (E) 약관 본문 링크 — 새 창 표시. 밑줄 + 호버 골드. */
.signup-agree-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,0,0,0.35);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
.signup-agree-link:hover {
  color: var(--gold-deep);
  text-decoration-color: var(--gold);
}

/* ============================================================
   Section 10: 검증 marquee
   ============================================================ */
.verify {
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 0 0 60px;
  gap: 32px;
}
.verify .container { width: min(1400px, calc(100vw - 160px)); }
.verify-head .h-2 { max-width: 18ch; }
.verify-head {
  background: var(--yellow);
  padding: 96px clamp(80px, 8vw, 140px) 56px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
.verify-head .kicker { color: var(--ink); opacity: 0.55; }
.verify-head .kicker::before { background: var(--ink); opacity: 0.55; }
.verify-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line-light);
  padding-top: 18px;
}
.verify-stat .n {
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.verify-stat .l { font-size: 12px; color: rgba(0,0,0,0.65); margin-top: 8px; letter-spacing: -0.01em; }

.marquee {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  margin-top: 8px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.marquee-track {
  display: flex; gap: 22px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track.paused { animation-play-state: paused; }
/* 3중 복제(JS pass=3)에 맞춰 -33.333% 이동 — 첫 1/3 사라지고 다음 1/3이 동일
   자리에 와서 무한 루프 시각적 끊김 없음. 기존 -50%(2중 복제)에서 변경. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* 2026-05-08 PC 한정 — 인증 marquee 두 줄 (위: 우측 흐름, 아래: 좌측 흐름) + 카드 작게
   .verify section이 height:100vh라 두 줄이 들어가도록 verify-head padding/카드 사이즈 압축
   nav 높이(72px)와 겹치지 않도록 verify-head padding-top 96px로 확보 */
@media (min-width: 701px) {
  /* verify section 영역 압축 */
  .verify {
    gap: 10px;
    padding: 0 0 12px;
  }
  .verify-head {
    /* nav 72px 아래로 안전하게 콘텐츠 시작 */
    padding: 92px clamp(80px, 8vw, 140px) 16px;
    gap: 28px;
  }
  .verify-stat .n {
    font-size: 36px;
  }
  .verify-stat .l {
    font-size: 11px;
    margin-top: 4px;
  }

  /* marquee 두 줄 */
  .marquee {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
    margin-top: 0;
  }
  /* gap 12 → 36px (2026-05-12 v2) — 카드 간격을 넓혀 한 화면에 동시 노출되는
     카드 수를 ~9 → ~5장으로 줄임. 6개 unique × 3중 복제 cycle에서 시작점이
     화면 밖에 머무는 시간이 길어져 사용자가 패턴 반복을 인식하기 어려움.
     동시에 카드 한 장 한 장이 숨을 쉬는 여백이 생겨 페이스도 차분해짐. */
  .marquee-track {
    gap: 36px;
  }
  .marquee-track-top {
    animation: marquee 36s linear infinite reverse; /* reverse → 우측 흐름. 속도 28→36s로 늦춤 */
  }
  .marquee-track-bottom {
    animation: marquee 42s linear infinite;         /* 좌측 흐름. 32→42s로 늦춤, top과 6s 차이 → 동기화 방지 */
  }

  /* 데스크톱 압축 카드 — 리디자인 (2026-05-12).
     외곽 wrapper 제거, 이미지 raw 노출, 살짝 작은 사이즈로 마퀴 다양성 ↑. */
  .cert {
    width: 132px;
    /* height auto — 이미지 비율에 맞춰 자연스럽게 (큰 wrapper 강제 없음) */
  }
  .cert-image {
    height: 168px;     /* 인증서 한 장 가독성 유지하는 최소 높이 */
  }
  .cert-title { font-size: 11px; }
  .cert-badge { font-size: 7px; letter-spacing: 0.12em; padding: 3px 8px; }
}

/* ─── 카드: 외곽 wrapper 제거 (2026-05-12 리디자인) ───────────────────
   기존엔 .cert에 background:#fff + border + padding:22px + ::before 골드
   inner-border = 큰 흰 카드 wrapper. 또 .cert-image에도 background+border가
   있어 이미지가 두 겹의 박스 안에 갇힘. 모두 제거 — 이미지가 종이처럼 떠 있고
   그 아래 제목 + 알약 뱃지(영문 분류 라벨)만 노출. */
.cert {
  flex: 0 0 auto;
  width: 180px;
  display: flex; flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease;
}
.cert:hover { transform: translateY(-3px); }
.cert:hover .cert-image img { transform: scale(1.03); }

/* 인증서 이미지 — 종이처럼 자연스럽게 떠있음.
   배경/보더 없이 살짝의 drop-shadow + 미세 border-radius로 「실제 종이」 질감. */
.cert-image {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px -8px rgba(0, 0, 0, 0.12);
  background: #fff;            /* 인증서 PNG가 투명 영역 가지면 종이 느낌 위해 흰 패딩 */
  height: 240px;
}
.cert-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 메타: 제목 + 구분 뱃지 — 세로 stack, 좌측 정렬 */
.cert-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
  padding: 0 2px;
}
.cert-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: left;
  margin: 0;
  color: var(--ink);
  line-height: 1.3;
}

/* 구분 뱃지 — 알약 형태, 골드 외곽 + 골드 텍스트, mono 영문.
   이전 `.cert-tag` 의 일반 텍스트 → 뱃지로 시각 무게 ↑.
   브랜드 골드 톤이라 페이지 톤과 자연스럽게 통일. */
.cert-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 10px;
  border: 1px solid rgba(212, 165, 116, 0.5);
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.06);
  white-space: nowrap;
}

/* ============================================================
   Section 11: CTA + Footer (combined)
   Per brief: yellow allowed at end CTA. Combine CTA at top, footer below.
   ============================================================ */
.endcta {
  background: var(--yellow);
  color: var(--ink);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
}
.endcta-top {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  align-items: center;
  gap: 60px;
  padding: 96px 80px 48px;
}
.endcta-h {
  font-weight: 900;
  font-size: clamp(72px, 9vw, 168px);
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-shadow: 5px 6px 0 rgba(0,0,0,0.12);
  margin: 0;
}
.endcta-side { display: flex; flex-direction: column; gap: 20px; }
.endcta-side .body-lg { color: rgba(0,0,0,0.7); max-width: 36ch; }
.endcta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-solid {
  background: var(--gold);             /* 골드 배경 + 화이트 텍스트 */
  color: #fff;
  border: 0;
  padding: 18px 24px;
  font-weight: 800; font-size: 14px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background 200ms ease;
  text-decoration: none;
}
.btn-solid:hover { background: var(--gold-2); }
.btn-line {
  background: transparent;
  color: var(--gold);                  /* 골드 테두리 + 골드 글자 */
  border: 1.5px solid var(--gold);
  padding: 17px 22px;
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  transition: all 200ms ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
}
.btn-line:hover { background: var(--gold); color: #fff; }

.footer {
  background: #1B1B1B;                               /* 2026-05-04 어두운 회색 배경 */
  color: rgba(255,255,255,0.72);
  padding: 56px 80px 36px;
  font-size: 12px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;        /* 4컬럼: 회사정보 + LEGAL + SUPPORT + COMPANY */
  gap: 40px;
  letter-spacing: -0.01em;
}
/* 고객센터 — footer-bottom 우측 배치 (2026-05-20 M2: divider 제거 + 우하단 이동) */
.footer-contact {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
  text-align: right;
}
.footer-contact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.footer-contact-num {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 200ms ease;
}
.footer-contact-num:hover { color: var(--gold); }
.footer .brand { color: #fff; margin-bottom: 16px; }
/* footer 안의 Y 마크는 흰색 */
.footer .brand-mark.brand-mark-img,
.footer .footer-brand-mark,
.footer-brand-mark {
  background-color: #fff !important;
}
.footer h5 {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.85);
  margin: 0 0 14px;
  font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .link-pending { color: inherit; opacity: 0.65; cursor: not-allowed; }
.footer-row { line-height: 1.7; }
.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 20px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2,0.7,0.2,1); }
.section.active .reveal { opacity: 1; transform: none; }
.section.active .reveal.d1 { transition-delay: 80ms; }
.section.active .reveal.d2 { transition-delay: 180ms; }
.section.active .reveal.d3 { transition-delay: 280ms; }
.section.active .reveal.d4 { transition-delay: 380ms; }
.section.active .reveal.d5 { transition-delay: 480ms; }
.section.active .reveal.d6 { transition-delay: 580ms; }
.section.active .reveal.d7 { transition-delay: 680ms; }

/* ============================================================
   Mobile drawer (kept simple — desktop-first per brief 1920)
   ============================================================ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .container { width: calc(100vw - 40px); }
  .manifesto-grid { grid-template-columns: 1fr; padding: 96px 24px; gap: 32px; }
  .manifesto-left { padding-left: 0; }
  .compare-grid { grid-template-columns: 1fr; }
  .diff-content { grid-template-columns: 1fr; padding: 96px 24px; gap: 40px; }
  .quiz { grid-template-columns: 1fr; }
  .signup-grid { grid-template-columns: 1fr; padding: 96px 24px; }
  .endcta-top { grid-template-columns: 1fr; padding: 96px 24px 48px; }
  .footer { grid-template-columns: 1fr 1fr; padding: 48px 24px; }
  .reviews-content { padding: 80px 24px; }
  .review-card { flex: 0 0 80%; }
}

/* ============================================================
   USER OVERRIDES — keep at end of file
   ============================================================ */

/* (1) Hero yellow ↔ banner image background match
   2026-05-04 노란색 미니멀화 — 화이트로 변경 */
:root { --yellow: #FFFFFF; }

/* (2) Brand logo: image mark + restructured text */
.nav { height: 100px; }
.brand {
  color: inherit;                         /* 텍스트는 nav 색상(검정/흰색) 따름 — 2026-05-04 원복 */
  text-decoration: none;
  font-size: 22px;
  gap: 14px;
}
/* 2026-05-04 로고 마크 — img → span + mask 방식
   y-mark-trans.png를 마스크로 사용하고 배경색을 var(--ink) 검정으로 채움 */
.brand-mark.brand-mark-img {
  display: inline-block;
  width: 84px;
  height: 84px;
  background-color: var(--ink);            /* 검정 Y */
  -webkit-mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
  mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
  border-radius: 4px;
  padding: 0;
  transition: background-color 400ms ease;
  filter: none;
}
/* dark 섹션 (signup/reviews 등) 위에서는 흰색 Y로 */
.nav.dark-host .brand-mark.brand-mark-img {
  background-color: #fff;
  filter: none;
}
.brand-name {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.brand-by {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0.6;
  margin-left: 8px;
}
.brand-en {
  font-size: 12px;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
}
.brand-en::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  margin-right: 10px;
  opacity: 0.5;
}

/* (Nav links font-size +20%) */
.nav-links a { font-size: 16px; }

/* ============================================================
   (7) Mobile nav + Hero footer overlap fix
   ============================================================ */
@media (max-width: 900px) {
  .nav {
    height: 80px;
    padding: 0 16px;
  }
  .nav-inner { gap: 10px; }
  .brand {
    font-size: 19px;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0;
  }
  .brand-mark.brand-mark-img {
    width: 56px;
    height: 56px;
  }
  .brand-name { white-space: nowrap; }
  .brand-by {
    white-space: nowrap;
    margin-left: 6px;
  }
  .brand-en { display: none; }
  .nav-cta {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Hero hint + meta — stack vertically, no overlap */
  .hero-sub {
    left: 24px;
    right: 24px;
    bottom: 96px;
    max-width: none;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
  }
  .hero-meta {
    left: 24px;
    right: 24px;
    bottom: 52px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 10px;
    gap: 12px;
  }
  .hero-scroll { bottom: 18px; }
}

/* ============================================================
   (3) 03 Compare — REFINED LIGHT context
   ============================================================ */

/* Section background — paper + radial only; yellow lives on .compare-head itself */
.section.light[data-label="COMPARE"] {
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(212,165,116,0.16), transparent 60%),
    radial-gradient(50% 70% at 10% 80%, rgba(254,222,1,0.10), transparent 60%),
    var(--paper);
}

/* Layout: split — 3-column compare on left, head on right.
   Section padding-top/bottom = 0 so the head's yellow background fills the FULL section height. */
.section.light .compare {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-content: stretch;
  align-items: stretch;
  gap: 80px;
  padding: 0 0 0 80px;
  margin: 0;
  height: 100%;
}
.section.light .compare-grid {
  order: 1;
  align-self: center;
  padding: 170px 0 60px;     /* keeps cards clear of the fixed nav */
}
.section.light .compare-head {
  order: 2;
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 170px clamp(60px, 7vw, 120px) 60px;
  margin: 0;
  text-align: left;
  border-radius: 0;
  height: 100%;              /* full vertical fill */
}
.section.light .compare-head .h-2 { max-width: 18ch; }
.section.light .compare-head .body-lg { max-width: 30ch; }
.section.light .compare-head {
  text-align: left;
  margin-bottom: 0;
  justify-self: center;   /* place head block in horizontal center of yellow column */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.section.light .compare-head .kicker { color: var(--gold); }
.section.light .compare-head .h-2 {
  color: var(--ink);
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.04em;
  font-weight: 900;
  line-height: 1.08;
  max-width: 16ch;
  margin: 12px 0 0;
}
.section.light .compare-head .body-lg {
  color: rgba(0,0,0,0.65);
  font-size: 15px;
  line-height: 1.7;
  margin: 16px 0 0;
  max-width: 30ch;
}

/* Grid: 3-column compare cards now sit on right side */
.section.light .compare-grid {
  border: 0;
  gap: 14px;
  padding: 0;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .section.light .compare {
    grid-template-columns: 1fr;
    padding: 120px 0 40px;
    gap: 36px;
  }
  .section.light .compare-head { text-align: left; }
}

/* Side columns — muted ghost cards */
.section.light .compare-col {
  background: rgba(0,0,0,0.025);
  border: 1px solid var(--line-light);
  border-right: 1px solid var(--line-light);
  border-radius: 18px;
  padding: 36px 28px;
  min-height: 460px;
  transition: transform 280ms ease, background 280ms ease;
}
.section.light .compare-col:hover {
  transform: translateY(-3px);
  background: rgba(0,0,0,0.04);
}
.section.light .compare-col .col-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: rgba(0,0,0,0.5);
  font-weight: 600;
  margin-bottom: 6px;
}
.section.light .compare-col .col-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(0,0,0,0.75);
}
.section.light .compare-col .col-tagline {
  font-size: 13px;
  color: rgba(0,0,0,0.5);
  line-height: 1.55;
  margin-bottom: 22px;
  min-height: 42px;
}
.section.light .compare-row {
  border-top: 1px solid var(--line-light);
  padding: 16px 0;
  grid-template-columns: 88px 1fr;
}
.section.light .compare-row:first-of-type {
  border-top: 1px solid var(--line-light);
}
.section.light .compare-row .k {
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: -0.005em;
  color: rgba(0,0,0,0.6);
  font-weight: 600;
}
.section.light .compare-row .v {
  color: rgba(0,0,0,0.72);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* === CENTER 사소한 — elevated yellow card === */
.section.light .compare-col.center {
  background: var(--yellow);
  border: 0;
  border-radius: 22px;
  margin: -20px 0;                 /* elevate visually */
  padding: 52px 34px;
  box-shadow:
    0 36px 56px -28px rgba(0,0,0,0.22),
    0 8px 22px -10px rgba(0,0,0,0.10);
  position: relative;
  z-index: 2;
  transition: transform 280ms ease;
}
.section.light .compare-col.center:hover { transform: translateY(-4px); }

/* Y mark watermark, top-right of center card */
.section.light .compare-col.center::after {
  content: "";
  position: absolute;
  top: 22px; right: 22px;
  width: 30px; height: 30px;
  background: url('assets/y-mark.webp') center/contain no-repeat;
  opacity: 0.95;
}

.section.light .compare-col.center .col-tag {
  color: var(--ink);
  opacity: 0.65;
  font-weight: 700;
}
.section.light .compare-col.center .col-name {
  color: var(--ink);
  font-size: 30px;
}
.section.light .compare-col.center .col-tagline {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.section.light .compare-col.center .compare-row {
  border-top: 1px solid var(--line-light);
}
.section.light .compare-col.center .compare-row:first-of-type {
  border-top: 1px solid var(--line-light);
}
.section.light .compare-col.center .compare-row .k {
  color: rgba(0,0,0,0.65);
}
.section.light .compare-col.center .compare-row .v {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section.light .compare-col.center .compare-row .v::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ink);
  flex-shrink: 0;
}

/* mobile: stack, undo elevation */
@media (max-width: 900px) {
  .section.light .compare-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .section.light .compare-col { min-height: auto; padding: 28px 22px; }
  .section.light .compare-col.center {
    margin: 0;
    padding: 32px 24px;
  }
}

/* ============================================================
   (4) 04 Difference — REDESIGN: header + 2×2 tone tiles
   ============================================================ */
.section.diff {
  background:
    linear-gradient(to right, var(--yellow) 0%, var(--yellow) 42%, transparent 42%),
    radial-gradient(60% 80% at 80% 20%, rgba(212,165,116,0.16), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(254,222,1,0.10), transparent 60%),
    var(--paper);
  color: var(--ink);
}
.section.diff .diff-v2 {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
  padding: 130px 80px 60px;
  max-width: 1500px;
  margin: 0 auto;
}

/* LEFT — header */
.section.diff .diff-v2-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 480px;
}
.section.diff .diff-v2-head .kicker { color: var(--gold); }
.section.diff .diff-v2-headline {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .section.diff .diff-v2-headline { white-space: normal; }
}
/* "네 가지 약속" — solid gold (단색) */
.section.diff .diff-v2-headline .gold {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  font-weight: 900;
  letter-spacing: -0.04em;
}
.section.diff .diff-v2-stats {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
}
.section.diff .dv2-stat-sep {
  width: 1px;
  background: rgba(0,0,0,0.12);
}
.section.diff .dv2-stat {
  display: flex; flex-direction: column; gap: 6px;
}
.section.diff .dv2-stat-num {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.section.diff .dv2-stat-num .u {
  font-size: 16px;
  font-weight: 600;
  margin-left: 4px;
  color: rgba(0,0,0,0.45);
  letter-spacing: -0.01em;
}
.section.diff .dv2-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(0,0,0,0.5);
  font-weight: 600;
  text-transform: uppercase;
}

/* RIGHT — 4 tiles in manifesto-figure style (clean, hover yellow) */
/* 2026-05-04 차별점 캐러셀 (4-슬라이드, 시안3 패턴) */
.section.diff .diff-carousel {
  position: relative;
  height: clamp(420px, 70vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section.diff .diff-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
.section.diff .diff-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.section.diff .diff-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.section.diff .diff-img {
  position: relative;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f0ece4;
  /* 기본: 미세 떠 있는 그림자. 호버 시 lift + 더 깊은 그림자 */
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.30);
  cursor: pointer;
  transition: transform 480ms cubic-bezier(0.22, 0.6, 0.2, 1),
              box-shadow 480ms cubic-bezier(0.22, 0.6, 0.2, 1);
  will-change: transform, box-shadow;
}
/* 호버: 카드 자체 살짝 들어올림(scale + lift) + 더 깊고 멀리 퍼진 그림자.
   이미지 내부 <img>도 별도 scale 적용해 카드는 lift, 내부 이미지는 확대되어
   「액자가 떠 있고 사진이 줌인되는」 입체감. */
.section.diff .diff-img:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow:
    0 36px 80px -24px rgba(0, 0, 0, 0.42),
    0 12px 28px -12px rgba(0, 0, 0, 0.18);
}
.section.diff .diff-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 800ms cubic-bezier(0.22, 0.6, 0.2, 1);
  will-change: transform;
}
.section.diff .diff-img:hover img {
  transform: scale(1.06);  /* 내부 이미지 줌 — overflow:hidden으로 자연스럽게 크롭 */
}
.section.diff .diff-img-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
}
.section.diff .diff-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 0 8px;
}
.section.diff .diff-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 600;
}
.section.diff .diff-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.section.diff .diff-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
  margin: 0;
}
.section.diff .diff-desc b { color: var(--ink); font-weight: 700; }
.section.diff .diff-tag-row {
  margin-top: 8px;
}
.section.diff .diff-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 600;
}

/* Controls */
.section.diff .diff-controls {
  display: flex; align-items: center; gap: 24px;
  flex-shrink: 0;
}
/* 하단 4개 막대 + 차오르는 progress (2026-05-12 v3).
   기존 active dot 폭 확장(28→44px) 효과 제거. 모든 dot 36×3 고정 + active 막대 안에서
   왼쪽→오른쪽으로 inkblack fill이 차오름. JS가 .dot-fill span을 동적으로 inject
   하고 transform: scaleX(0→1)을 10s linear로 제어. */
.section.diff .diff-dots {
  display: flex; gap: 10px;
}
.section.diff .diff-dots button {
  position: relative;
  width: 36px; height: 3px;
  background: rgba(0,0,0,0.15);
  border: 0;
  cursor: pointer;
  padding: 0;
  overflow: hidden;            /* fill이 막대 밖으로 새지 않도록 */
  border-radius: 1.5px;
  transition: background 0.25s ease;
}
.section.diff .diff-dots button:hover { background: rgba(0,0,0,0.25); }
/* 지난 카드 dot — 회색 유지 (검정 채움 제거, 2026-05-12 v4).
   active dot만 검정 fill로 차오르고 나머지(지난·미래)는 모두 회색. */
/* fill: JS가 만든 span. 막대 안에서 좌→우 차오름. */
.section.diff .diff-dot-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  border-radius: inherit;
}
.section.diff .diff-arrows {
  display: flex; gap: 6px;
}
.section.diff .diff-arrows button {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-light);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.section.diff .diff-arrows button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.section.diff .diff-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(0,0,0,0.45);
  margin-left: auto;
  font-weight: 500;
}
.section.diff .diff-counter b {
  color: var(--ink);
  font-weight: 700;
}

/* 일시정지 토글 — prev/next 화살표와 동일 스타일 (2026-05-12 v3).
   .diff-arrows 자식 button[id="diff-autoplay"]은 위의 .diff-arrows button 룰을
   그대로 상속 받음. 아이콘 ⏸/▶ 토글만 추가 정의. */
.section.diff .diff-arrows #diff-autoplay {
  /* display 명시 — 두 SVG가 부모 inline-flex 안에서 가운데 정렬 */
  display: inline-flex; align-items: center; justify-content: center;
}
.section.diff .diff-arrows #diff-autoplay .icon-play  { display: none; }
.section.diff .diff-arrows #diff-autoplay .icon-pause { display: block; }
.section.diff .diff-arrows #diff-autoplay.paused .icon-play  { display: block; }
.section.diff .diff-arrows #diff-autoplay.paused .icon-pause { display: none; }

@media (max-width: 1100px) {
  .section.diff .diff-slide { grid-template-columns: 1fr; gap: 16px; }
  .section.diff .diff-img { height: 240px; }
  .section.diff .diff-carousel { height: auto; }
  .section.diff .diff-stage { min-height: 540px; }
}

@media (max-width: 1100px) {
  .section.diff .diff-v2 {
    grid-template-columns: 1fr;
    padding: 100px 32px 32px;
    gap: 40px;
    align-items: start;
  }
}
@media (max-width: 600px) {
  .section.diff .diff-v2-stats { gap: 16px; padding-top: 18px; }
  .section.diff .dv2-stat-num { font-size: 34px; }
}


/* ============================================================
   (12) Cert Lightbox Modal
   ============================================================ */
.cert-modal {
  position: fixed; inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.cert-modal.open { display: flex; }
.cert-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 20, 20, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: chipFade 220ms ease;
}
.cert-modal-close {
  position: fixed;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
  transition: background 200ms ease;
}
.cert-modal-close:hover { background: rgba(255,255,255,0.1); }

.cert-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: min(900px, 92vw);
  max-height: 88vh;
  animation: chipPop 320ms cubic-bezier(0.18, 0.9, 0.32, 1.18);
}
.cert-modal-imgwrap {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow:
    0 50px 80px -20px rgba(0,0,0,0.6),
    0 16px 36px -10px rgba(0,0,0,0.4);
  max-height: calc(88vh - 100px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-modal-img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 132px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.cert-modal-caption {
  text-align: center;
  color: #fff;
}
.cert-modal-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cert-modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
}
.cert-modal-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 600;
  margin-top: 6px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .cert-modal-imgwrap { padding: 10px; border-radius: 10px; }
  .cert-modal-title { font-size: 18px; }
}

/* ============================================================
   (11) 07 Reviews — split: cards LEFT | yellow head RIGHT
   ============================================================ */
.section.light.reviews {
  background: var(--paper);
  color: var(--ink);
}
.section.light.reviews::before { display: none; }
.section.light.reviews .reviews-noise { display: none; }

.section.light.reviews .reviews-content {
  display: grid;
  grid-template-columns: 0.7fr 1fr;          /* 좌(타이틀) 좁게 / 우(카드) 넓게 — 2026-05-04 좌우 swap */
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 0;
  height: 100%;
}

/* LEFT — light head (타이틀 블록) */
.section.light.reviews .reviews-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: #fff;                          /* 2026-05-04 화이트 배경 (사장님 요청) */
  color: var(--ink);
  padding: 96px clamp(48px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  border-right: 1px solid var(--line-light);
  margin: 0;
  text-align: left;
}
.section.light.reviews .reviews-head > * { margin: 0; }
.section.light.reviews .reviews-head .kicker {
  color: var(--ink);
  opacity: 0.55;
}
.section.light.reviews .reviews-head .kicker::before {
  background: var(--ink);
  opacity: 0.55;
}
.section.light.reviews .reviews-head h2 {
  color: var(--ink);
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.045em;
  font-weight: 900;
  line-height: 1.08;
  max-width: 14ch;
  word-break: keep-all;
}
.section.light.reviews .reviews-head .body-lg {
  color: rgba(0,0,0,0.7);
  font-size: 15px;
  line-height: 1.7;
  max-width: 32ch;
  word-break: keep-all;
}

/* RIGHT — cards track (후기 카드) */
.section.light.reviews .reviews-track {
  grid-column: 2;                            /* 우측으로 이동 */
  grid-row: 1;
  padding: 96px 80px 24px 56px;
  align-items: center;
}
.section.light.reviews .reviews-foot {
  grid-column: 2;                            /* 우측으로 이동 */
  grid-row: 2;
  padding: 0 80px 56px 56px;
}

@media (max-width: 1100px) {
  .section.light.reviews .reviews-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .section.light.reviews .reviews-head {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
    padding: 80px 24px 32px;
  }
  .section.light.reviews .reviews-track {
    grid-column: 1;
    grid-row: 2;
    padding: 32px 24px 16px;
  }
  .section.light.reviews .reviews-foot {
    grid-column: 1;
    grid-row: 3;
    padding: 0 24px 56px;
  }
}
.section.light.reviews .review-card {
  background: #fff;
  border: 1px solid var(--line-light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition:
    transform 280ms ease,
    background 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.section.light.reviews .review-card::before {
  content: "“";
  font-family: 'JetBrains Mono', Georgia, serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 0.6;
  color: var(--yellow);
  margin-bottom: -8px;
  align-self: flex-start;
  transition: color 280ms ease;
}
.section.light.reviews .review-card:hover {
  background: var(--yellow);
  border-color: var(--line-light);
  transform: translateY(-4px);
  box-shadow:
    0 22px 40px -18px rgba(0,0,0,0.20),
    0 6px 16px -6px rgba(0,0,0,0.10);
}
.section.light.reviews .review-card:hover::before {
  color: var(--ink);
}

/* 2026-05-19 leftmost (현재 보고 있는) 카드 강조 — 확대 + 들어 올림 + gold accent.
   - `body.is-mobile .reveal { transform: none !important }`를 이기기 위해 transform에도 !important.
   - 데스크탑/모바일 모두 동일하게 강조. */
.section.light.reviews .review-card.reveal.is-focused {
  border-color: var(--gold);
  background: #fffdf6;
  box-shadow:
    0 24px 48px -18px rgba(201, 160, 98, 0.42),
    0 6px 16px -6px rgba(0, 0, 0, 0.10);
  transform: scale(1.045) translateY(-4px) !important;
  z-index: 2;
}
.section.light.reviews .review-card.is-focused::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  border-radius: 16px 0 0 16px;
}
.section.light.reviews .review-card.is-focused::before {
  color: var(--gold);
}
/* hover가 is-focused 위로 올라가도 자연스럽게 — scale 유지 + 더 들어 올림 */
.section.light.reviews .review-card.reveal.is-focused:hover {
  transform: scale(1.045) translateY(-8px) !important;
}

/* hide placeholder photo block — quote-led card */
.section.light.reviews .review-photo { display: none; }

.section.light.reviews .review-quote {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.012em;
  word-break: keep-all;
  flex: 1;
  margin: 0;
}
/* 2026-05-20 v2 review meta — name·age·job·specialty + match_type 분리 표시 */
.section.light.reviews .review-meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: rgba(0,0,0,0.55);
}
.section.light.reviews .review-meta-person {
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.section.light.reviews .review-meta-person b { font-weight: 800; }
.section.light.reviews .review-meta-person .sep {
  color: rgba(0,0,0,0.30);
  font-weight: 500;
}
.section.light.reviews .review-meta-method {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}
.section.light.reviews .review-card:hover .review-meta { color: rgba(0,0,0,0.7); }
.section.light.reviews .review-card:hover .review-meta-method { color: rgba(0,0,0,0.65); }
.section.light.reviews .pager-btn {
  border-color: var(--line-light);
  background: transparent;
  color: var(--ink);
  border-radius: 50%;
}
.section.light.reviews .pager-btn:hover {
  background: var(--ink);
  color: #fff;
}
.section.light.reviews .reviews-counter {
  color: rgba(0,0,0,0.55);
}
.section.light.reviews .reviews-counter b {
  color: var(--ink);
}

/* ============================================================
   (8) 02 Brand Manifesto — LIGHT context (split: yellow | paper+radial)
   ============================================================ */
.section.light.manifesto {
  background:
    linear-gradient(to right, var(--yellow) 0%, var(--yellow) 42%, transparent 42%),
    radial-gradient(60% 80% at 80% 30%, rgba(212,165,116,0.18), transparent 60%),
    radial-gradient(50% 70% at 10% 80%, rgba(254,222,1,0.10), transparent 60%),
    var(--paper);
}
.section.light.manifesto .kicker { color: var(--gold); }
.section.light.manifesto .manifesto-stanza { color: var(--ink); }
.section.light.manifesto .manifesto-stanza .mute { color: rgba(0,0,0,0.4); }

/* "운에 맡깁니다." / "전략과 시스템." — solid gold (단색) */
.section.light.manifesto .manifesto-stanza .gold {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  font-weight: 900;
  letter-spacing: -0.04em;
  padding: 0;
}
.section.light.manifesto .manifesto-tag { color: var(--gold-deep); }
.section.light.manifesto .manifesto-figure {
  border-color: var(--line-light);
  min-height: 170px;
  height: 100%;
  overflow: hidden;
  background: transparent;
  cursor: default;
  transition:
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.section.light.manifesto .manifesto-figure:hover {
  background: var(--yellow);
  border-color: var(--line-light);
  transform: translateY(-3px);
  box-shadow:
    0 22px 40px -18px rgba(0,0,0,0.20),
    0 6px 16px -6px rgba(0,0,0,0.10);
}
.section.light.manifesto .manifesto-figure:hover .lbl {
  color: rgba(0,0,0,0.72);
}
.section.light.manifesto .manifesto-figure:hover .num .unit {
  -webkit-text-fill-color: rgba(0,0,0,0.7);
}
.section.light.manifesto .manifesto-fig-row { align-items: stretch; }
.section.light.manifesto .manifesto-figure .num {
  white-space: nowrap;
  font-size: clamp(48px, 5vw, 72px);
}
.section.light.manifesto .manifesto-figure .num .unit {
  font-size: 0.42em;
}
.section.light.manifesto .manifesto-figure .lbl {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.section.light.manifesto .manifesto-figure .num {
  background: linear-gradient(180deg, var(--ink), #888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section.light.manifesto .manifesto-figure .num .unit {
  -webkit-text-fill-color: rgba(0,0,0,0.55);
}
.section.light.manifesto .manifesto-figure .lbl { color: rgba(0,0,0,0.55); }

/* ============================================================
   Footer brand — 2026-05-04 어두운 배경에 흰 Y마크 + 흰 텍스트
   ============================================================ */
.footer .footer-brand-mark {
  width: 36px;
  height: 36px;
  background: #fff !important;
  filter: none;
  border-radius: 0;
  padding: 0;
}
.footer .brand {
  font-size: 18px;
  gap: 12px;
}
.footer .brand-name { color: #fff; }
.footer .brand-by { color: rgba(255,255,255,0.55); }

/* ============================================================
   Kicker on YELLOW surfaces — unified, legible (overrides earlier rules)
   ============================================================ */
.section.light.manifesto .kicker,
.section.light .compare-head .kicker,
.section.diff .diff-v2-head .kicker,
.verify-head .kicker {
  color: var(--ink);
  opacity: 0.72;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.section.light.manifesto .kicker::before,
.section.light .compare-head .kicker::before,
.section.diff .diff-v2-head .kicker::before,
.verify-head .kicker::before {
  background: var(--ink);
  opacity: 0.72;
}
/* 2026-05-04 reviews-head — 화이트 배경 + ink kicker (위 그룹에 다시 합류) */
.section.light.reviews .reviews-head .kicker {
  color: var(--ink);
  opacity: 0.72;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.section.light.reviews .reviews-head .kicker::before {
  background: var(--ink);
  opacity: 0.72;
}
.quiz-aside .quiz-aside-tag {
  color: rgba(0,0,0,0.72);
  font-weight: 600;
}

/* ============================================================
   Brand Intro Splash — char-by-char reveal + morph to nav
   ============================================================ */
.brand-intro {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2026-05-08 인트로 1.8× 가속: 700/500 → 389/278 */
  transition: background 389ms ease, opacity 278ms ease;
  will-change: opacity, background;
}
.brand-intro.morph { background: transparent; }
.brand-intro.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 400 → 222 */
  transition: opacity 222ms ease, visibility 0s linear 222ms;
}
.brand-intro-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  transform-origin: top left;
  /* 900 → 500 */
  transition: transform 500ms cubic-bezier(0.6, 0, 0.32, 1);
  will-change: transform;
}
.brand-intro-mark {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(0.94);
  /* 800ms 100ms → 444ms 56ms */
  animation: brandMarkIn 444ms cubic-bezier(0.18, 0.9, 0.32, 1.18) 56ms forwards;
}
@keyframes brandMarkIn {
  to { opacity: 1; transform: none; }
}
.brand-intro-text {
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand-intro-text .kr {
  font-family: var(--font-base);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.brand-intro-text .kr .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  /* 700 → 389 */
  animation: charIn 389ms cubic-bezier(0.18, 0.9, 0.32, 1.18) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: none; }
}
/* 1.55 → 0.86 / 1.68 → 0.93 / 1.81 → 1.01 */
.brand-intro-text .ch1 { animation-delay: 0.86s; }
.brand-intro-text .ch2 { animation-delay: 0.93s; }
.brand-intro-text .ch3 { animation-delay: 1.01s; }
.brand-intro-text .kr .by {
  font-size: 0.36em;
  font-weight: 500;
  opacity: 0;
  letter-spacing: -0.005em;
  margin-left: 12px;
  /* 600 / 2.05s → 333 / 1.14s (1.8× 가속) → duration ×1.4 = 466ms (by/since/dash만 천천히) */
  animation: byIn 466ms ease 1.14s forwards;
}
@keyframes byIn { to { opacity: 0.6; } }
.brand-intro-line {
  width: 0;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  /* 500 / 2.9s → 278 / 1.61s → duration ×1.4 = 389ms */
  animation: lineGrow 389ms cubic-bezier(0.6, 0, 0.4, 1) 1.61s forwards;
}
@keyframes lineGrow {
  to { opacity: 0.5; width: 44px; }
}
.brand-intro-text .en {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.brand-intro-text .en .ch,
.brand-intro-text .en .sp {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  /* 500 → 278 (1.8× 가속) → duration ×1.4 = 389ms (SINCE 2015 글자만 천천히 그려지게) */
  animation: charIn 389ms cubic-bezier(0.18, 0.9, 0.32, 1.18) forwards;
}
/* 3.20-3.87 → 1.78-2.15 (모두 1.8× 가속) */
.brand-intro-text .en .e1 { animation-delay: 1.78s; }
.brand-intro-text .en .e2 { animation-delay: 1.82s; }
.brand-intro-text .en .e3 { animation-delay: 1.87s; }
.brand-intro-text .en .e4 { animation-delay: 1.91s; }
.brand-intro-text .en .e5 { animation-delay: 1.96s; }
.brand-intro-text .en .sp { animation-delay: 1.97s; }
.brand-intro-text .en .e6 { animation-delay: 2.02s; }
.brand-intro-text .en .e7 { animation-delay: 2.06s; }
.brand-intro-text .en .e8 { animation-delay: 2.11s; }
.brand-intro-text .en .e9 { animation-delay: 2.15s; }
.brand-intro-text .en {
  /* keep parent opacity full so kids transition show */
  opacity: 0.7;
}

@media (max-width: 700px) {
  /* 모바일: 로고 + 텍스트 같은 row (좌: 마크, 우: 연정사 텍스트 + SINCE 2015) */
  .brand-intro-inner {
    gap: 14px;
    flex-direction: row;
    align-items: center;
  }
  .brand-intro-mark {
    width: 72px;
    height: 72px;
    /* 2026-05-08 근본 원인:
       모바일에서 .brand-intro-text가 column 레이아웃 (kr 위, en 아래) →
       text-block 기하 중심이 kr과 en 사이에 위치 (kr 중심보다 ~10px 아래).
       align-items: center가 mark center와 text-block center를 맞추니
       시각적으로 "연정사" 글자가 mark보다 ~10px 위로 떠 보임.
       → mark를 같은 만큼 위로 끌어올려 kr 중심과 정렬.
       position: relative + top 사용 (transform 애니메이션과 충돌 없음, layout 영향 없음). */
    position: relative;
    top: -10px;
  }
  .brand-intro-text {
    flex-direction: column;       /* row 안에서 kr 위, en 아래 stack */
    align-items: flex-start;
    gap: 6px;
  }
  .brand-intro-text .kr { font-size: 30px; }
  .brand-intro-line { display: none; }
  .brand-intro-text .en { font-size: 10px; letter-spacing: 0.18em; }
}

/* 2026-05-04 brand intro 글자 단위 morph: 연애정보회사 → 연정사 */
.brand-intro-text .kr-morph {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-base);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-intro-text .kr-morph .ch {
  display: inline-block;
  opacity: 0;
  vertical-align: baseline;
}
/* keep chars: stay through entire intro
   2026-05-08 인트로 1.8× 가속: 모든 delay/duration ÷ 1.8 */
.brand-intro-text .kr-morph .ch.keep {
  /* 650 → 361 */
  animation: morphCharIn 361ms cubic-bezier(0.18, 0.9, 0.32, 1.18) forwards;
}
/* 0.20/0.32/0.56 → 0.11/0.18/0.31 */
.brand-intro-text .kr-morph .ch.k1 { animation-delay: 0.11s; }
.brand-intro-text .kr-morph .ch.k2 { animation-delay: 0.18s; }
.brand-intro-text .kr-morph .ch.k3 { animation-delay: 0.31s; }
@keyframes morphCharIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* drop chars: stagger entry (개별), 그 후 collapse는 모두 같은 시점에 동시 발생 */
.brand-intro-text .kr-morph .ch.drop {
  width: 1em;
  text-align: center;
  overflow: hidden;
  animation-name: morphCharIn, morphCharCollapse;
  /* 650 / 1100 → 361 / 611 */
  animation-duration: 361ms, 611ms;
  animation-timing-function:
    cubic-bezier(0.18, 0.9, 0.32, 1.18),
    cubic-bezier(0.4, 0, 0.25, 1);
  animation-fill-mode: forwards, forwards;
  /* 두 번째 delay (collapse 시작 시각)는 모든 drop이 0.83s로 동일 (1.5/1.8) */
  animation-delay: 0s, 0.83s;
}
/* 0.26/0.44/0.50 → 0.14/0.24/0.28 */
.brand-intro-text .kr-morph .ch.d1 { animation-delay: 0.14s, 0.83s; }
.brand-intro-text .kr-morph .ch.d2 { animation-delay: 0.24s, 0.83s; }
.brand-intro-text .kr-morph .ch.d3 { animation-delay: 0.28s, 0.83s; }
@keyframes morphCharCollapse {
  0%   { opacity: 1; width: 1em; transform: none; }
  22%  { opacity: 0; width: 1em; transform: translateY(-2px); }   /* 0.18s — fade out */
  32%  { opacity: 0; width: 1em; transform: translateY(-2px); }   /* 0.27s — brief hold */
  100% { opacity: 0; width: 0;   transform: translateY(-2px); }   /* 0.83s — slow collapse */
}
/* by 사소한 — drop이 모두 collapse된 후 등장 */
.brand-intro-text .kr-morph .by-after {
  display: inline-block;
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-left: 12px;
  opacity: 0;
  /* 600 / 2.75s → 333 / 1.53s (1.8× 가속) → duration ×1.4 = 466ms (by 사소한만 천천히) */
  animation: morphByIn 466ms ease 1.53s forwards;
}
@keyframes morphByIn {
  to { opacity: 0.6; }
}

@media (max-width: 700px) {
  .brand-intro-text .kr-morph { font-size: 28px; }   /* row 레이아웃에 맞춰 38 → 28 (가로 폭 절약) */
}

/* ============================================================
   2026-05-07 모바일 통합 최적화 (≤900px / ≤600px / ≤414px)
   ============================================================
   전략:
   1. body.is-mobile → fullpage scroll 비활성, 자연 스크롤 폴백
   2. 햄버거 nav, dots 숨김
   3. 섹션별 패딩/폰트/그리드 1열 변환
   4. iOS 100vh 이슈 회피 (min-height: 100svh fallback)
   ============================================================ */

/* ===== 1) 모바일 자연 스크롤 (snap 제거 — 2026-05-08 PC식 딱딱 넘기기 비활성) =====
   주의: 모바일에서 실제 페이지 스크롤은 html에서 발생.
   anchor 클릭 시 nav(80px) 아래에 섹션이 안착하도록 scroll-padding-top만 유지.
   scroll-behavior: smooth 제거 — iOS Safari momentum 스크롤 + 방향 반전 시
   smooth 보간이 꼬여 화면이 갑자기 점프하는 버그 방지.
   anchor 클릭 시의 부드러운 이동은 JS의 scrollIntoView({ behavior: 'smooth' })로 처리. */
@media (max-width: 900px) {
  html {
    scroll-padding-top: 80px;        /* nav(80px) 오프셋 → 앵커 점프 시 kicker 가려짐 방지 */
    overscroll-behavior-y: contain;  /* 끝점 rubber-band 바운스 차단 (iOS) */
  }
  body {
    /* base body에 overflow: hidden 해제. html 스크롤 살리기 */
    overflow: visible !important;
    height: auto !important;
    overscroll-behavior-y: contain;
  }
}
body.is-mobile {
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: #fff !important;
}
/* Drawer 열렸을 때 body scroll lock — .is-mobile의 overflow:auto !important를 덮어씀 */
body.no-scroll,
body.is-mobile.no-scroll {
  overflow: hidden !important;
  height: 100vh;
  height: 100svh;
}
body.is-mobile .stage {
  position: static !important;
  height: auto !important;
  width: 100%;
  overflow: visible !important;
  background: #fff !important;
}
body.is-mobile .stage-track {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  height: auto !important;
  display: block !important;
  transition: none !important;
  background: #fff !important;
}
body.is-mobile .section {
  position: relative !important;
  height: auto !important;
  /* min-height: 100vh 제거 (2026-05-12) — 각 섹션이 정확히 viewport 한 장
     이라 자연 스크롤에서도 섹션 단위로 끊겨 보이는 시각적 snap 효과 발생.
     콘텐츠 기반 높이로 풀어 자연스러운 흐름. 각 섹션의 시각적 단락은 padding과
     배경 톤 변화로 유지 (배경 색은 line 3207-3216 참조). */
  overflow: visible !important;
  width: 100%;
  /* 2026-05-08 scroll-snap-align 제거 — PC식 딱딱 넘기기 비활성 (자연 스크롤) */
  /* 2026-05-19 (E) 섹션 간 시각적 갭 — 자연 스크롤에서 구간 구분 강화.
     viewport 폭에 따라 48~72px 반응형. 모든 컨텐츠 섹션이 흰 배경이라
     padding-bottom의 whitespace로 구간 분리. 다음 섹션 padding-top과 합쳐
     총 ~64-88px visual gap 확보. */
  padding-bottom: clamp(48px, 9vw, 72px) !important;
}
/* HERO는 min-height: 100vh 풀스크린 + hero-scroll이 하단 absolute라
   추가 padding-bottom 시 노랑 배경 하단에 흰 공간 끼어 들어감 → 0 유지 */
body.is-mobile .section.yellow.hero {
  padding-bottom: 0 !important;
}
/* CTA + Footer 섹션은 footer가 자체 padding 충분 → 추가 X */
body.is-mobile .section.endcta {
  padding-bottom: 0 !important;
}

/* 모바일: container의 좁은 폭 (calc(100vw - 160px)) 해제 — 전 화면 사용 */
body.is-mobile .container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0;
}

/* CRITICAL 모바일 가시성: .reveal 항상 보이게 (.section.active 의존 해제) */
body.is-mobile .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* CRITICAL: 데스크톱에서 absolute 였던 manifesto-grid를 모바일에선 자연 flow로 */
body.is-mobile .manifesto-grid {
  position: relative !important;
  inset: auto !important;
}
/* hero-stage / diff-bg / signup-bg 등 데코는 absolute 유지 (콘텐츠 아님) */

/* 모바일: 다크/이상 배경 섹션 → 화이트 통일 (Hero & CTA만 노랑 유지) */
body.is-mobile .manifesto,
body.is-mobile .section.light.manifesto,
body.is-mobile .section.diff,
body.is-mobile .section.dark,
body.is-mobile .section.darker,
body.is-mobile .section.light {
  background: #fff !important;
  color: var(--ink) !important;
}
body.is-mobile .section.yellow.hero { background: #FDDA02 !important; color: var(--ink) !important; }
body.is-mobile .section.endcta { background: #fff !important; color: var(--ink) !important; }

/* 화이트 배경 강제 시 — 어두운 배경 가정한 텍스트 색상 정정 */
body.is-mobile .manifesto-stanza,
body.is-mobile .section.light.manifesto .manifesto-stanza {
  color: var(--ink) !important;
}
body.is-mobile .manifesto-stanza .mute,
body.is-mobile .section.light.manifesto .manifesto-stanza .mute {
  color: rgba(0,0,0,0.4) !important;
}
body.is-mobile .manifesto-stanza p { color: var(--ink) !important; }

/* 모바일에서 dots 숨김 (햄버거로 대체) */
body.is-mobile .dots {
  display: none !important;
}

/* ===== 2) Hamburger nav (≤900px만 노출) ===== */
.nav-burger { display: none; }
.nav-drawer { display: none; }

@media (max-width: 900px) {
  /* 모바일 nav: 항상 솔리드 화이트 가로바 — 배경/콘텐츠 영향 없음 */
  body.is-mobile .nav,
  body.is-mobile .nav.on-yellow,
  body.is-mobile .nav.on-light,
  body.is-mobile .nav.dark-host {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    color: var(--ink) !important;
    pointer-events: auto;
  }
  /* Y 로고 마크는 화이트 배경에서 검정 톤 유지 */
  body.is-mobile .nav .brand-mark.brand-mark-img {
    background-color: var(--ink) !important;
  }

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    border: 0;                          /* 테두리 제거 */
    background: transparent;
    cursor: pointer;
    margin-left: 8px;
    z-index: 81;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 240ms ease, opacity 200ms ease;
  }
  .nav.dark-host .nav-burger span { background: #fff; }
  .nav-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.on span:nth-child(2) { opacity: 0; }
  .nav-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.97);
    z-index: 90;
    padding: 88px 28px 32px;
    gap: 8px;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
  }
  .nav-drawer.open {
    transform: translateX(0);
  }
  .nav-drawer a {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    letter-spacing: -0.02em;
  }
  .nav-drawer a:hover { color: var(--gold); }
  .nav-drawer .nav-drawer-cta {
    margin-top: 24px;
    background: var(--gold);
    color: #fff;
    padding: 18px 20px;
    border-radius: 999px;
    border-bottom: 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: -0.01em;
  }
  .nav-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }

  /* 데스크톱 nav-links 숨김은 기존 규칙에 있음. CTA도 모바일에서 햄버거 안으로 이동 */
  .nav-cta { display: none; }
  .nav .brand-mark.brand-mark-img { width: 36px; height: 36px; }
  .nav-inner { padding: 12px 16px; }
}

/* ===== 3) ≤900px 공통 — fullpage 비활성 + 폰트/패딩 조정 ===== */
@media (max-width: 900px) {
  /* 본문 폰트 안정화 */
  html, body { -webkit-text-size-adjust: 100%; }

  /* HERO — 사진 contain + 노란 배경 seamless. 사진은 ~10% 위로 (object-position) */
  .hero { background: #FDDA02; min-height: 100vh; min-height: 100svh; }
  .hero-photo {
    object-fit: contain;
    object-position: center 38%;     /* 50% 가운데보다 위로 ~12% — 텍스트 영역 확보 */
  }
  /* hero-sub 노란 가로바 — 좌우 풀폭 + sub 안쪽에 meta 영역 확보 */
  .hero-sub {
    position: absolute;
    left: 0 !important; right: 0 !important;
    bottom: 76px;                 /* element 하단까지 가져오고 padding-bottom으로 meta 자리 확보 */
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(253,218,2,0.9) 22%, #FDDA02 48%);
    padding: 30px 22px 36px;      /* padding-bottom 36px 안에 meta가 absolute로 들어옴 */
    max-width: none;
    z-index: 4;
  }
  /* hero-meta — sub TEXT 바로 밑 (sub element의 padding-bottom 영역 안에 z-index로 위치) */
  .hero-meta {
    position: absolute;
    left: 0 !important; right: 0 !important;
    bottom: 84px;                 /* sub element 안쪽 padding-bottom 영역 (76+~22 → sub TEXT 직하) */
    justify-content: center;
    font-size: 10px;
    text-align: center;
    padding: 0 22px;
    z-index: 5;                   /* sub gradient 위로 */
  }
  /* hero-scroll — 정중앙 + scroll-line 짧게 → meta와 영역 절대 안 겹침 */
  .hero-scroll {
    bottom: 18px;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: max-content;
    transform: none !important;
    font-size: 9px;
    letter-spacing: 0.22em;
    gap: 6px !important;
  }
  .hero-scroll-line {
    height: 16px !important;      /* 데스크톱 36px → 모바일 16px (영역 다이어트) */
  }

  /* MANIFESTO — kicker가 nav 바로 아래에 오게 padding-top 16px */
  .section.light.manifesto .manifesto-grid,
  .manifesto-grid {
    grid-template-columns: 1fr;
    padding: 16px 22px 24px;             /* top 56 → 16 (kicker가 nav 바로 아래) */
    gap: 14px;
    height: auto !important;
    align-content: start;                 /* 위쪽 packing */
  }
  .section.light.manifesto .manifesto-left,
  .manifesto-left { padding-left: 0; }
  .section.light.manifesto .manifesto-stanza,
  .manifesto-stanza {
    font-size: clamp(19px, 4.8vw, 26px);  /* 22-32 → 19-26 (작게) */
    line-height: 1.22;
  }
  .section.light.manifesto .manifesto-stanza p,
  .manifesto-stanza p { margin-bottom: 12px; }   /* 18 → 12 */
  .section.light.manifesto .manifesto-tag { font-size: 9px; letter-spacing: 0.24em; }
  .manifesto-video-wrap {
    height: clamp(160px, 26vh, 230px);   /* 220-320 → 160-230 (60-90px 절약) */
    border-radius: 10px;
  }

  /* COMPARE — 모바일: 데스크톱 카드 그리드 hide, 행 단위 비교표 표시 + 헤더 위로 */
  .section.light .compare {
    display: flex !important;          /* grid 해제하고 flex column으로 — 순서 명확히 */
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    height: auto !important;
    width: 100%;
  }
  .section.light .compare-head {
    order: 0 !important;
    padding: 16px 22px 4px !important;   /* kicker가 nav 바로 아래 */
    height: auto !important;
    text-align: center;
    background: #fff !important;
  }
  .section.light .compare-head .h-2 {
    max-width: 16ch !important;
    margin: 8px auto 0;
    font-size: clamp(20px, 5.2vw, 26px) !important;   /* 22-28 → 20-26 (살짝 작게) */
    letter-spacing: -0.04em;
    line-height: 1.12;
  }
  .section.light .compare-head .body-lg {
    max-width: 28ch !important;
    margin: 8px auto 0;
    font-size: 12px !important;          /* 12.5 → 12 */
    line-height: 1.5;
    color: rgba(0,0,0,0.6) !important;
  }
  .section.light .compare-head .kicker {
    font-size: 10px !important;
    color: var(--gold-deep) !important;
  }
  /* 데스크톱 카드 그리드는 모바일에서 hide */
  .section.light .compare-grid { display: none !important; }
  /* 모바일 전용 행 단위 비교표 보이게 */
  body.is-mobile .compare-mobile { display: block !important; }

  /* DIFFERENCE 캐러셀 — kicker가 nav 바로 아래 */
  .section.diff .diff-v2 { padding: 16px 22px 20px; gap: 12px; height: auto !important; grid-template-columns: 1fr !important; align-content: start !important; }
  .section.diff .diff-v2-head { padding-bottom: 0; }
  .section.diff .diff-v2-headline { font-size: clamp(22px, 5.8vw, 30px); line-height: 1.14; }
  .section.diff .diff-v2-stats { gap: 14px; margin-top: 10px; }
  .section.diff .dv2-stat-num { font-size: 24px; }
  .section.diff .dv2-stat-lbl { font-size: 9.5px; }
  .section.diff .diff-carousel { height: auto !important; min-height: 0; gap: 12px; }
  .section.diff .diff-stage {
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  .section.diff .diff-slide {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-template-columns: 1fr !important;
    gap: 10px;                          /* 14 → 10 */
  }
  .section.diff .diff-slide.is-active { display: grid !important; }
  .section.diff .diff-img {
    height: clamp(140px, 28vw, 200px) !important;   /* 180-260 → 140-200 */
  }
  .section.diff .diff-body {
    padding: 2px 4px 0;
    justify-content: flex-start !important;
    gap: 6px !important;               /* 10 → 6 */
  }
  .section.diff .diff-kicker { font-size: 9px; letter-spacing: 0.16em; }
  .section.diff .diff-title { font-size: 18px; line-height: 1.16; }    /* 22 → 18 */
  .section.diff .diff-desc { font-size: 12px; line-height: 1.5; }      /* 13 → 12 */
  .section.diff .diff-tag { font-size: 9.5px; padding: 5px 12px; }
  .section.diff .diff-controls { padding-top: 10px; }
  .section.diff .diff-arrows button { width: 44px; height: 44px; }
  .section.diff .diff-counter { font-size: 11px; }
  /* 타이머 막대 — 모바일에서 더 얇게 + 짧게 (2026-05-12).
     데스크톱 36×3 → 모바일 24×2. padding 8px 0은 터치 영역만 유지 (시각 막대만 축소). */
  .section.diff .diff-dots button {
    padding: 8px 0;
    width: 24px;
    height: 2px;
    border-radius: 1px;
  }
  .section.diff .diff-dots { gap: 8px; }
  .section.diff .diff-arrows button:active,
  .section.diff .diff-arrows button:focus-visible {
    background: var(--ink); color: #fff;
  }

  /* ─── 모바일 가로 스크롤 차단 안전망 (2026-05-12, v3 — overscroll fix) ───
     base `body { overflow: hidden }`는 데스크톱 fullpage용. 모바일에선 자연
     세로 스크롤이 필요하므로 overflow-y: auto 명시 + overflow-x만 hidden.
     overscroll-behavior: auto 강제 — 어디선가 'contain' 적용되어 일부 Chrome
     환경에서 native wheel scroll이 root scroller에서 무력화되던 문제 차단. */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    max-width: 100vw;
  }
  body.is-mobile .stage-track,
  body.is-mobile .section,
  .section.diff .diff-v2,
  .section.diff .diff-v2-head,
  .section.diff .diff-v2-stats,
  .section.diff .diff-carousel,
  .section.diff .diff-stage,
  .section.diff .diff-slide,
  .section.diff .diff-img,
  .section.diff .diff-body {
    max-width: 100%;
    min-width: 0;
  }
  /* marquee의 100vw는 모바일에서 100% (viewport scrollbar 폭 차이 차단) */
  .marquee {
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* nav-drawer는 transform: translateX로 viewport 밖에 머무는데 width:100% 강제 */
  .nav-drawer { width: 100% !important; max-width: 100vw; }

  /* Quiz 결과 모달 — 모바일에서 inline 표시 (2026-05-19).
     기존: position: fixed + 블러 백드롭 → 화면 전체 overlay.
     변경: position: static → .quiz-stage 안에서 질문 영역을 그대로 대체.
     블러/패딩 제거 → 위쪽 quiz-aside / 진행 바와 자연스럽게 연속. */
  .modal-bg {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: block !important;
    opacity: 1 !important;  /* 인라인이라 transition 페이드 효과 불필요 */
  }
  /* modal 자체 — 모바일에서 단일 컬럼 + quiz-stage 폭 fit + 컴팩트 */
  .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-width: 1px !important;
    border-radius: 14px !important;
    box-shadow:
      0 12px 28px -10px rgba(0,0,0,0.14),
      0 4px 10px -2px rgba(0,0,0,0.06) !important;
    animation: none !important;  /* fixed overlay용 pop 애니메이션 제거 */
  }
  .modal-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  /* cover / body 패딩 다운시프트 — 인라인 폭 fit */
  .modal-cover { padding: 22px 22px 20px !important; }
  .modal-cover-name { font-size: 36px !important; line-height: 1.0 !important; }
  .modal-cover-tagline { font-size: 13px !important; margin-top: 6px !important; }
  .modal-body { padding: 22px !important; gap: 12px !important; }
  .modal-body h4 { font-size: 10px !important; }
  .modal-body .modal-h { font-size: 18px !important; line-height: 1.3 !important; }
  .modal-body p { font-size: 13px !important; line-height: 1.65 !important; }
  .modal-traits { gap: 10px !important; }
  .modal-trait .k { font-size: 9.5px !important; }
  .modal-trait .v { font-size: 13px !important; }
  .modal-cta { padding: 14px 18px !important; font-size: 13px !important; margin-top: 4px !important; }
  .modal-close { top: 10px !important; right: 10px !important; width: 30px !important; height: 30px !important; font-size: 16px !important; }

  /* 2026-05-19 (D) 후기 카드 그림자 잘림 방지 — reviews-track 상하 패딩 확장.
     `.reviews-track { overflow: hidden }` 이 좌우 카드 클립용으로 필수지만
     그림자(box-shadow: 0 24px 48px -18px ...)가 카드 위로 ~42px, 아래로 ~54px 뻗고
     scale(1.045) offset이 위아래로 ~4px 추가 → 위 46px, 아래 58px buffer 필요.
     padding 16px 안쪽으로 잘림 방지 위해 상하 모두 여유 있게. */
  .section.light.reviews .reviews-track {
    padding: 64px 24px 64px !important;
  }

  /* 2026-05-19 (E) quiz 하단 32px override 제거 — body.is-mobile .section의
     통합 clamp(48px, 9vw, 72px) padding-bottom으로 흡수. */

  /* QUIZ — 패딩 + 폰트 다운 (컴팩트), kicker가 nav 바로 아래.
     min-height 제거 (2026-05-12) — 콘텐츠 기반 height로 풀어 quiz 카드 아래
     큰 빈 공간 제거. */
  .quiz {
    grid-template-columns: 1fr;
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
  }
  .quiz-stage { padding: 16px 22px 20px !important; height: auto !important; }
  .quiz-aside {
    padding: 16px 22px 28px !important;
    height: auto !important;
    grid-template-rows: auto auto auto !important;   /* 1fr auto → 3행 모두 auto (description / 6 TYPES / 시작 버튼) */
    align-content: start !important;
    gap: 18px;
  }
  .quiz-aside > *:first-child,
  .quiz-aside > *:nth-child(2) {
    align-self: start !important;
  }
  /* 시작 버튼 — 6 TYPES 아래에 배치 (마지막 행) */
  .quiz-aside > .quiz-start-btn {
    align-self: stretch !important;
    justify-self: start;
    margin-top: 4px;
  }
  /* 시작 버튼 (모바일 전용) */
  .quiz-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 16px 28px;
    background: var(--gold);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(155,126,79,0.5);
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  }
  .quiz-start-btn span {
    font-size: 16px;
    transition: transform 200ms ease;
  }
  .quiz-start-btn:hover,
  .quiz-start-btn:active {
    background: var(--gold-deep);
    box-shadow: 0 12px 24px -10px rgba(155,126,79,0.6);
    transform: translateY(-1px);
  }
  .quiz-start-btn:hover span,
  .quiz-start-btn:active span {
    transform: translateX(4px);
  }
  /* 시작 후: aside 완전히 숨김 (stage만 노출 — 한 화면 fit) */
  body.is-mobile .quiz-aside.is-started { display: none !important; }
  .quiz-aside-h { font-size: clamp(26px, 6.8vw, 36px); }
  .quiz-q { font-size: clamp(20px, 5.2vw, 28px); max-width: none; }
  .quiz-options { gap: 8px; }
  .quiz-option { padding: 12px 14px; font-size: 14px; min-height: 48px; }
  .quiz-aside-types { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quiz-aside-types .qt-card { padding: 12px; font-size: 11px; }

  /* REVIEWS — kicker가 nav 바로 아래 + grid rows auto로 콘텐츠 위쪽 packing */
  .section.light.reviews .reviews-content {
    padding: 16px 22px 24px;
    height: auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
    align-content: start !important;
  }
  /* reviews-head 자체에 padding 96px + justify-content: center 풀어주기 — 콘텐츠 위로 끌어올림 */
  .section.light.reviews .reviews-head {
    padding: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    grid-row: auto !important;
  }
  .section.light.reviews .reviews-head h2 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.15 !important;
  }
  .section.light.reviews .reviews-head .body-lg {
    font-size: 12px !important;
    line-height: 1.5;
  }
  .section.light.reviews { height: auto !important; }
  .section.light.reviews .reviews-head { gap: 16px; }
  .section.light.reviews .reviews-head h2 { font-size: clamp(22px, 5.5vw, 28px) !important; }
  .section.light.reviews .reviews-head .body-lg { font-size: 12px !important; line-height: 1.5; }
  .section.light.reviews .review-card {
    padding: 18px 18px !important;       /* 22 → 18 */
  }
  .section.light.reviews .review-photo { height: 130px !important; }   /* 180 → 130 */
  .section.light.reviews .review-quote { font-size: 13px; line-height: 1.5; }
  .section.light.reviews .review-meta { font-size: 10.5px; }
  .section.light.reviews .reviews-foot { padding-top: 12px; }

  /* VERIFY — head 1열 + stats 컴팩트 + cert 작게 + 섹션 자체 gap/padding 다이어트.
     2026-05-19 (E) padding 단축형이 .section의 padding-bottom clamp 통합 룰을 덮어쓰던 문제 →
     padding-top/left/right만 명시하고 bottom은 .section의 통합 룰에 위임. */
  body.is-mobile .verify {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 10px !important;                  /* 32 → 10 (footer 텍스트 marquee에 가깝게) */
    grid-template-rows: auto auto auto !important;   /* 1fr 풀고 콘텐츠 위로 packing */
  }
  body.is-mobile .marquee {
    padding: 14px 0 !important;          /* 24 → 14 */
    margin-top: 4px !important;
  }
  .section.light.verify .verify-head,
  .verify-head {
    grid-template-columns: 1fr;
    padding: 16px 22px 10px;             /* top 56 → 16 (kicker가 nav 바로 아래) */
    gap: 10px;
  }
  .section.light.verify .verify-head .h-2,
  .verify-head .h-2 { font-size: clamp(22px, 5.6vw, 28px); }
  .verify-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
  .verify-stat .n { font-size: 24px; }
  .verify-stat .l { font-size: 9.5px; line-height: 1.3; }
  .cert {
    width: clamp(130px, 46vw, 170px);
    height: clamp(170px, 56vw, 220px);
  }
  .marquee-track { animation-duration: 40s; }
  /* 섹션 하단 footer 텍스트 컴팩트 */
  body.is-mobile .section.light.verify > .container:last-child {
    padding: 0 22px;
    font-size: 9.5px !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    line-height: 1.4;
  }
  body.is-mobile .section.light.verify > .container:last-child > span:last-child {
    display: none;                       /* "HOVER TO PAUSE →" — 모바일 hover 없으니 hide */
  }

  /* SIGNUP — kicker가 nav 바로 아래 + 콘텐츠 위쪽 정렬 */
  .section.light .signup-grid,
  .signup-grid {
    grid-template-columns: 1fr;
    padding: 16px 22px 16px;             /* top 28 → 16 */
    gap: 10px;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
    align-content: start !important;
  }
  /* 카드 — padding/gap 미세 다이어트 */
  .signup-card {
    padding: 14px 16px !important;       /* 20+18 → 14+16 (-12) */
    gap: 6px !important;                  /* 10 → 6 (-24 over 6 gaps) */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  .signup-card-head {
    padding-bottom: 10px !important;     /* 18 → 10 */
    margin-bottom: 0 !important;          /* 6 → 0 */
  }
  .signup-card-head .h { font-size: 16px !important; }
  .signup-card-head .meta { font-size: 9.5px !important; }
  .signup-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signup-row {
    gap: 2px !important;                 /* 4 → 2 */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  /* 폼 라벨 — 데스크톱 14px 통일 (2026-05-12 A수정).
     이전 10px override가 데스크톱 룰(1267 라인)을 덮어 모바일 가독성 ↓ 문제.
     letter-spacing도 데스크톱 룰(0.08em) 그대로 상속. */
  .signup-row label { font-size: 14px; letter-spacing: 0.08em; }
  /* 폼 입력 필드 — 터치 권장 44px 충족 (2026-05-12 A수정).
     iOS 자동 줌 방지 위해 font-size 16px 유지 + padding 늘려 높이 ≥ 44px 확보.
     line-height 1.4 가정 시 16 × 1.4 ≈ 22.4 + padding 11×2 = 44.4px. */
  .signup-row .input,
  .signup-row select,
  .signup-row textarea {
    font-size: 16px !important;
    padding: 11px 0 !important;          /* 7 → 11 (높이 44px+ 확보) */
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .signup-pills { gap: 6px; padding-top: 2px; }
  /* 시간대 선택 칩 (평일 오전·오후·저녁·주말) — 터치 권장 44px 충족.
     padding 11px로 늘려 높이 ~40-44px 확보. */
  .signup-pill {
    padding: 11px 9px;                   /* 7 → 11 */
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex: 1 1 auto;
    min-width: calc(50% - 3px);
    text-align: center;
  }
  .signup-agree {
    font-size: 10.5px !important;
    line-height: 1.45;
    gap: 6px !important;
    padding-top: 2px;
  }
  .signup-submit {
    padding: 12px 20px !important;       /* 14 22 → 12 20 */
    font-size: 13px;
    margin-top: 2px;
  }
  .signup-quote { font-size: 11.5px; padding-left: 10px; max-width: none; line-height: 1.45; }
  /* 헤더 (왼쪽 카피 영역) — 컴팩트 */
  .section.light .signup-grid > div:first-child h2 {
    font-size: clamp(20px, 5vw, 26px) !important;
    margin-top: 4px !important;
  }
  .section.light .signup-grid > div:first-child p {
    font-size: 12.5px !important;
    line-height: 1.5;
    margin: 6px 0 8px !important;
  }
  .section.light .signup-grid > div:first-child .kicker {
    font-size: 10px !important;
  }

  /* CTA — kicker가 nav 바로 아래 */
  .endcta-top {
    grid-template-columns: 1fr;
    padding: 16px 22px 12px;             /* top 48 → 16 */
    gap: 12px;
    align-content: start !important;
  }
  .endcta-h {
    font-size: clamp(34px, 9.5vw, 64px) !important;   /* 40-88 → 34-64 (확실히 작게) */
    text-shadow: 2px 3px 0 rgba(0,0,0,0.10);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }
  .endcta-side .body-lg { max-width: 30ch; font-size: 12.5px; line-height: 1.55; }
  .endcta-actions {
    padding: 0 22px 28px;
    flex-direction: row;                  /* column → row (한 열에 2개 버튼) */
    gap: 8px;
  }
  .endcta-actions .btn-solid,
  .endcta-actions .btn-line {
    width: auto;
    flex: 1 1 0;                          /* 균등 분배 */
    justify-content: center;
    padding: 10px 12px;                   /* 13 18 → 10 12 (세로 컴팩트) */
    font-size: 12px;
    min-height: 0;
    white-space: nowrap;
  }
  .endcta-actions .btn-solid span,
  .endcta-actions .btn-line span { font-size: 13px; }

  /* FOOTER — 1-2열 + bottom 세로 배치 (한 화면 fit 위해 컴팩트) */
  .footer {
    grid-template-columns: 1fr 1fr;
    padding: 28px 22px 18px;             /* 48 24 → 28 18 */
    gap: 18px;                            /* 28 → 18 */
    font-size: 11px;
  }
  .footer > div:first-child {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    font-size: 9px;
  }
  /* 모바일에서는 고객센터를 좌측 정렬 (footer-bottom이 column-stack이므로) */
  .footer-bottom .footer-contact {
    align-items: flex-start;
    text-align: left;
    margin-top: 4px;
  }
  .footer h5 { font-size: 11px; }
  .footer ul { font-size: 13px; }

  /* MODALS — dvh + close 버튼 터치 타겟 */
  .vmodal-frame { max-height: calc(100svh - 60px); }
  .cert-modal-content { max-height: 88svh; }
  .modal { max-height: calc(100svh - 80px); }
  .modal-close,
  .vmodal-close,
  .cert-modal-close,
  .chip-modal-close { min-width: 44px; min-height: 44px; }
}

/* ===== 4) ≤600px — small phone 추가 다운시프트 ===== */
@media (max-width: 600px) {
  .brand-intro-text .kr-morph { font-size: 30px; }
  .brand-intro-mark { width: 80px; height: 80px; }

  /* HERO 텍스트 글자 사이즈 */
  .hero-sub { font-size: 12px; bottom: 92px; }
  .hero-meta { font-size: 9px; bottom: 56px; gap: 10px; }
  .hero-meta .sep { display: none; }

  /* COMPARE 카드 폰트 미세 다운 */
  .compare-col { font-size: 14px; }

  /* SIGNUP pill 4개를 한 줄에 좁게 */
  .signup-pill { padding: 9px 8px; font-size: 11px; min-width: calc(50% - 3px); }

  /* DIFF stats 한 줄 → 2 줄로 */
  .diff-v2-stats { flex-wrap: wrap; }

  /* 인증서 marquee 더 작게 */
  .cert {
    width: clamp(140px, 60vw, 180px);
    height: clamp(190px, 80vw, 240px);
  }

  /* CERT MODAL — 패딩 여유 */
  .cert-modal-imgwrap { padding: 6px; }
  .cert-modal { padding: 16px; }
  .cert-modal-content { padding: 0; gap: 12px; }
  .cert-modal-caption { padding: 0 4px; }

  /* QUIZ Result Modal — 작은 화면 케어 */
  .modal-cover, .modal-body { padding: 20px; }
  .modal-cover-name { font-size: clamp(28px, 8vw, 40px); }
  .modal-cover::after { display: none; }

  /* FOOTER 1열 */
  .footer { grid-template-columns: 1fr; gap: 24px; }
  .footer > div:first-child { grid-column: 1; }
}

/* ===== 5) 매우 작은 화면 (≤360px) — 최소 보호 ===== */
@media (max-width: 360px) {
  .brand-intro-text .kr-morph { font-size: 26px; }
  .nav-inner { padding: 10px 12px; gap: 8px; }
  .nav .brand-mark.brand-mark-img { width: 32px; height: 32px; }
  .brand-name { font-size: 16px; }
  .brand-by { font-size: 8px; }
  .endcta-h { font-size: 38px !important; }
}

/* ===== Compare Mobile — 매트릭스 비교표 (한 화면 fit, 프리미엄 톤) ===== */
.compare-mobile { display: none; }   /* 데스크톱 기본 hide */

@media (max-width: 900px) {
  .compare-mobile {
    display: block;
    padding: 4px 16px 48px;
    width: 100%;
  }
  .cm-grid {
    display: grid;
    grid-template-columns: minmax(50px, 14%) 1fr 1.4fr 1fr;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow:
      0 1px 0 rgba(0,0,0,0.02) inset,
      0 24px 48px -28px rgba(0,0,0,0.18),
      0 8px 20px -16px rgba(212,165,116,0.18);
    font-family: var(--font-base);
    font-size: 11.5px;
    line-height: 1.32;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
    position: relative;
  }
  .cm-cell {
    padding: 10px 6px;                   /* 12 → 10 (60px 절약, 6행 × 2px 양쪽) */
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }
  /* 첫 행은 위 테두리 없음 */
  .cm-grid > .cm-cell:nth-child(-n+4) { border-top: 0; }

  .cm-empty { background: transparent; border-right: 1px solid rgba(0,0,0,0.06); }

  /* 헤더 셀 */
  .cm-head {
    background: rgba(0,0,0,0.025);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    color: rgba(0,0,0,0.55);
    font-weight: 600;
    padding: 14px 4px 12px;
    line-height: 1.25;
    border-right: 1px solid rgba(0,0,0,0.04);
  }
  .cm-head:last-child { border-right: 0; }
  .cm-head-num {
    display: block;
    font-size: 8.5px;
    opacity: 0.55;
    margin-bottom: 3px;
    letter-spacing: 0.18em;
  }

  /* 핵심: 연정사 헤더 — 골드 그라데이션, 살짝 위로 돌출 (크라운 효과) */
  .cm-head-pri {
    background:
      linear-gradient(180deg, var(--gold) 0%, #B89251 100%);
    color: #fff;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 14px 4px 12px;
    position: relative;
    z-index: 2;
    box-shadow:
      0 -1px 0 rgba(212,165,116,0.35),
      0 6px 16px -6px rgba(155,126,79,0.45);
    border: 0;
  }
  /* 연정사 헤더의 ★ → 실제 Y 로고 마크 (mask + 흰색) */
  .cm-logo {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 4px;
    background-color: #fff;
    -webkit-mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
    mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
  }
  .cm-head-name {
    display: block;
    font-size: 13px;
    font-weight: 800;
  }

  /* 속성(좌측) — mono, 작고 묵직 */
  .cm-attr {
    background: rgba(0,0,0,0.025);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.55);
    font-weight: 600;
    border-right: 1px solid rgba(0,0,0,0.06);
    padding: 12px 4px;
  }

  /* 값 셀 공통 */
  .cm-val {
    padding: 14px 6px;
    border-right: 1px solid rgba(0,0,0,0.04);
  }
  .cm-val:last-child { border-right: 0; }

  /* 좌·우 (보조) — 흐릿하게 — 연정사로 시선 유도 */
  .cm-side {
    color: rgba(0,0,0,0.55);
    font-weight: 500;
    font-size: 11px;
  }

  /* 연정사 (가운데, 강조) — 그라데이션 배경 + 짙은 잉크 텍스트 */
  .cm-pri {
    color: var(--ink);
    font-weight: 700;
    font-size: 12px;
    background: linear-gradient(180deg,
      rgba(212,165,116,0.13) 0%,
      rgba(212,165,116,0.06) 100%);
    border-right: 1px solid rgba(212,165,116,0.18);
    border-left: 1px solid rgba(212,165,116,0.18);
    position: relative;
  }
  .cm-pri-strong b {
    font-size: 16px;
    color: var(--gold-deep);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-right: 2px;
  }

  /* 풋 — 닫는 한 줄 카피 */
  .cm-foot {
    margin: 16px 4px 0;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(212,165,116,0.1), rgba(212,165,116,0.02));
    border-left: 2px solid var(--gold);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(0,0,0,0.7);
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .cm-foot b { color: var(--gold-deep); font-weight: 800; }
  /* 풋 좌측의 골드 로고 (★ 대신 Y 로고 미니) */
  .cm-foot-logo {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--gold);
    -webkit-mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
    mask: url('assets/y-mark-trans.webp') center / contain no-repeat;
  }
}

/* 작은 화면 (≤380) — 글자 한 단계 더 다이어트 */
@media (max-width: 380px) {
  .cm-grid { font-size: 10.5px; }
  .cm-head { font-size: 9px; padding: 12px 3px 10px; }
  .cm-head-pri { font-size: 12px; }
  .cm-head-name { font-size: 12px; }
  .cm-attr { font-size: 9px; padding: 10px 3px; }
  .cm-val { padding: 12px 4px; }
  .cm-side { font-size: 10px; }
  .cm-pri { font-size: 11px; }
  .cm-pri-strong b { font-size: 14px; }
}

/* ===== 6) 가로 모드 짧은 viewport (height < 480) — intro/hero scroll 영역 보호 ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .brand-intro-inner { gap: 12px !important; flex-direction: row !important; }
  .brand-intro-mark { width: 60px !important; height: 60px !important; }
  .brand-intro-text .kr-morph { font-size: 28px !important; }
  .hero-sub, .hero-meta { display: none; }
  .hero-scroll { bottom: 8px; }
}