/* ===== TBNC — The Bear & Company ===== */

/* ============ 폰트: Paperlogy (primary) — 2026-05-08 ============
   ttf 9 weights (1Thin~9Black), 사용자 요청 — 모던 한글 산세리프.
   A2Z는 fallback chain에 유지. */
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-3Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-4Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-5Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-6SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-7Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-8ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('fonts/Paperlogy-1.001/Paperlogy-9Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

/* A2Z — fallback (legacy weight references, subset to actually-used) */
@font-face {
  font-family: 'A2Z';
  src: url('fonts/A2Z-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'A2Z';
  src: url('fonts/A2Z-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'A2Z';
  src: url('fonts/A2Z-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'A2Z';
  src: url('fonts/A2Z-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'A2Z';
  src: url('fonts/A2Z-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}

:root {
  --gold: #C9A84C;
  --gold-light: #E5D08A;
  --gold-dark: #A88A3A;
  --gold-100: #F5EFD9;

  /* 다크 테마 기본 토큰 */
  --bg: #0A0A0A;
  --bg-elevated: #141414;
  --bg-card: #1A1A1A;
  --bg-card-hover: #1F1F1F;
  --text: #FAFAF7;
  --text-muted: #8A8A8A;
  --text-dim: #5A5A5A;
  --border: #262626;
  --border-strong: #333333;
  --accent: var(--gold);

  /* ===== 모바일 타이포 토큰 (iPhone 17 Pro 393pt 기준 — 2026-05-07 P0 픽스) ===== */
  /* 위계: H1(hero) > H2-CTA(cta-band) > H2(section-title) > H3(quote/author) */
  --fs-h1-mobile:    clamp(29px, 8.3vw, 39px);   /* hero·ebook·service-detail (2026-05-07: +1px) */
  --fs-h2-mobile:    clamp(22px, 6.4vw, 28px);  /* section-title */
  --fs-cta-mobile:   clamp(24px, 7vw, 32px);    /* cta-band-title — hero급 강조 */
  --fs-h3-mobile:    clamp(20px, 5.6vw, 24px);  /* phil-quote, author, guarantee */
  --fs-body-mobile:  16px;
  --fs-sub-mobile:   14.5px;
  --fs-meta-mobile:  12px;

  /* 모바일 간격 */
  --space-section-mobile: clamp(64px, 12vw, 96px);

  /* iOS 세이프 에어리어 (Dynamic Island, Home Indicator) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* 터치 타겟 (WCAG 2.5.5 — Phase 2부터 사용) */
  --touch-min: 44px;
}

[data-theme="cream"] {
  --bg: #F5F0E6;
  --bg-elevated: #FAFAF7;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAFAF7;
  --text: #1A1612;
  --text-muted: #4A4A4A;
  --text-dim: #8A8A8A;
  --border: #E8E2D2;
  --border-strong: #C7C7C7;
  --accent: #B8995A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  /* Paperlogy primary, A2Z 폴백, 시스템 한글 산세리프 폴백 — 2026-05-08 */
  font-family: 'Paperlogy', 'A2Z',
               -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic',
               'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============ 엣지 글로우 (Claude Crail) ============ */
.hb-border {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  --hb-color: #D97757; /* Claude Crail */
  --hb-thickness: 16px;
}
.hb-edge {
  position: absolute;
  animation: hb-beat 3s ease-in-out infinite;
  mix-blend-mode: screen;
}
/* 상하: 가로 전체, 안쪽으로 페이드 */
.hb-top, .hb-bottom {
  left: 0; right: 0; height: var(--hb-thickness);
}
.hb-top {
  top: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--hb-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--hb-color) 50%, transparent) 30%,
    color-mix(in srgb, var(--hb-color) 18%, transparent) 60%,
    transparent 100%
  );
}
.hb-bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--hb-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--hb-color) 50%, transparent) 30%,
    color-mix(in srgb, var(--hb-color) 18%, transparent) 60%,
    transparent 100%
  );
}
/* 좌우: 세로 전체, 안쪽으로 페이드 */
.hb-left, .hb-right {
  top: 0; bottom: 0; width: var(--hb-thickness);
}
.hb-left {
  left: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--hb-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--hb-color) 50%, transparent) 30%,
    color-mix(in srgb, var(--hb-color) 18%, transparent) 60%,
    transparent 100%
  );
}
.hb-right {
  right: 0;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--hb-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--hb-color) 50%, transparent) 30%,
    color-mix(in srgb, var(--hb-color) 18%, transparent) 60%,
    transparent 100%
  );
}

/* 부드러운 그라데이션 펄스 */
@keyframes hb-beat {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.85; }
}

/* 4면 시차로 자연스러움 부여 */
.hb-top    { animation-delay: 0s;    }
.hb-right  { animation-delay: 0.6s;  }
.hb-bottom { animation-delay: 1.2s;  }
.hb-left   { animation-delay: 1.8s;  }

@media (prefers-reduced-motion: reduce) {
  .hb-edge { animation: none; opacity: 0.45; }
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  /* 2026-05-06: justify-content space-between 제거 → margin-right:auto on logo + 통일 gap 으로 등간격 구현 */
  gap: clamp(16px, 2.4vw, 40px);
  /* 좌우 패딩 유동화 + iOS 노치/Dynamic Island 회피 (env safe-area-inset-top) — 2026-05-07 P0-3 */
  padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px));
  padding-right: max(clamp(20px, 3.5vw, 48px), env(safe-area-inset-right, 0px));
  padding-bottom: 20px;
  padding-left: max(clamp(20px, 3.5vw, 48px), env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}
.nav.scrolled {
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
  padding-bottom: 14px;
  border-bottom-color: var(--border);
}
.nav-logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  /* 2026-05-06: 로고를 좌측 끝에 고정, 나머지 우측 클러스터 등간격 정렬 */
  margin-right: auto;
}
.nav-logo span { color: var(--accent); }
.nav-links {
  display: flex;
  /* 좁은 화면에서 자동으로 줄어드는 유동값 — .nav 부모 gap과 동일 */
  gap: clamp(16px, 2.4vw, 40px);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  /* 2026-05-06: margin-left:auto 제거 → 로고의 margin-right:auto가 같은 역할 수행, 등간격 유지 */
  margin-right: clamp(16px, 2vw, 32px);
  white-space: nowrap;
}
.nav-links a { white-space: nowrap; flex-shrink: 0; }
.nav-links a {
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 좁은 화면에서 패딩·폰트가 자동으로 줄어듦 */
  padding: 10px clamp(12px, 1.5vw, 22px);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--accent);
  color: var(--bg);
}
/* nav-cta 화살표 제거됨 (사용자 요청) */

/* ============ HERO ============ */
.hero {
  /* iOS Safari 주소창 토글 점프 방지 — 100vh fallback + small/dynamic vh */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 140px 48px 100px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
/* Hero pretitle — eyebrow와 헤드라인 사이의 보조 라인 */
.hero-pretitle {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 28px;
}
.hero-pretitle .accent { color: var(--accent); font-weight: 700; }

.hero-title {
  /* 2026-05-06: 사용자 요청으로 .section-title과 동일하게 통일 (clamp 40px~64px / 5vw) */
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 36px;
}
.hero-title .accent { color: var(--accent); }
.hero-title .em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.hero-title .em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 0.18em;
  background: var(--accent);
  opacity: 0.22;
  z-index: -1;
}
.hero-sub {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 48px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 80px;
  justify-content: center;     /* 가운데 정렬 */
}
/* Hero 영역 두 CTA 박스 동일 폭 + 텍스트 가운데 */
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  min-width: 220px;
  justify-content: center;
}

/* Hero 본문(eyebrow / pretitle / title / sub) 가운데 정렬 */
.hero-grid > div { text-align: center; }
.hero-grid .hero-sub { margin-left: auto; margin-right: auto; }
/* 메트릭 박스 정렬은 .metric 룰에서 직접 처리 (가운데 정렬) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}
[data-theme="cream"] .btn-primary { color: #FAFAF7; background: #1A1612; }
[data-theme="cream"] .btn-primary:hover { background: var(--accent); color: #1A1612;}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;          /* btn-primary와 동일 패딩으로 박스 통일 */
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* hero metrics */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
.metric {
  padding: 0 24px;
  border-left: 1px solid var(--border);
  text-align: center;     /* 4영역 각각 가운데 정렬 (사용자 요청) */
}
.metric:first-child { border-left: none; }
.metric-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.metric-value .unit {
  color: var(--accent);
  font-size: 22px;
  margin-left: 4px;
}
.metric-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* hero ornament — 큰 배경 TBNC 워드마크 */
.hero-mark {
  position: absolute;
  right: -80px;
  bottom: -80px;
  font-size: clamp(280px, 40vw, 560px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  line-height: 1;
}
[data-theme="cream"] .hero-mark { opacity: 0.04; }

/* .hero-vline 룰 제거됨 (사용자 요청, 2026-05-05) */

/* ============ 섹션 헤더 공통 ============ */
.section {
  padding: 140px 48px;
  position: relative;
}
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.section-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 24px;
  max-width: 900px;
}
.section-sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.65;
  margin-bottom: 80px;
}

/* ============ SERVICES ============ */
.services {
  background: var(--bg);
}
.service-row {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
  position: relative;
  transition: background 0.3s ease;
}
.service-row:last-of-type { border-bottom: 1px solid var(--border); }
.service-row::before {
  content: '';
  position: absolute;
  left: 0; top: 48px;
  width: 2px; height: calc(100% - 96px);
  background: var(--accent);
  opacity: 0.6;
  transition: opacity 0.3s ease, height 0.3s ease;
}
.service-row:hover::before { opacity: 1; }

.service-head {
  padding-left: 32px;
}
.service-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}
/* .service-icon 룰 제거됨 (사용자 요청 — 서비스 영역 아이콘 삭제) */
.service-title-ko {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.service-title-en {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.service-body {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.service-row:hover .service-body {
  background: var(--bg-card-hover);
  border-color: var(--border);
}
.service-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
.service-item .check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 4px;
  color: var(--accent);
}
.service-item .lbl {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}
.service-item .note {
  color: var(--text-muted);
  font-size: 13px;
  margin-left: 4px;
}
.service-item .pill {
  display: inline-block;
  background: var(--gold);
  color: #0A0A0A;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 6px;
  vertical-align: 1px;
}

/* service-row 우측 상단 "자세히" 링크 (홈 → 상세 페이지 이동) */
/* 2026-05-06: service-head 좌측에 박스형 CTA — 'service-more' (텍스트+화살표)는 deprecated */
.service-more-box {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 28px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.service-more-box:hover {
  background: var(--accent);
  color: var(--bg);
}

.service-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
  align-self: flex-start;
  transition: gap 0.2s ease;
}
.service-more:hover { gap: 14px; }
.service-more::after { content: '→'; font-size: 14px; }

/* ============ TESTIMONIALS ============ */
.testimonials-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}
.testimonials-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 56px 36px 32px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.testimonial-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.5s ease;
}
.testimonial-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--bg-card-hover);
  transform: translateY(-4px);
}
.testimonial-card:hover::before { height: 100%; }

.t-quote-mark {
  position: absolute;
  top: 22px;
  right: 32px;
  font-family: Georgia, serif;
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

.t-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  flex: 1;
  word-break: keep-all;
  text-wrap: pretty;
}

.t-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.t-meta { display: flex; flex-direction: column; gap: 2px; }
.t-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.t-sub {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.005em;
}

.t-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 12px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 2px;
}
.t-tag::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--accent);
}

@media (max-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card { min-height: 0; padding: 48px 28px 28px; }
  .t-quote-mark { font-size: 64px; top: 16px; right: 24px; }
}

/* 흐려진 추가 사례 — 비공개 사례 시각적 암시 (사용자 요청) */
.testimonials-blurred {
  margin-top: 24px;
  position: relative;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.25) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.25) 75%, transparent 100%);
}
.testimonials-blurred .testimonials-grid {
  margin-top: 0;
  filter: blur(4px) saturate(0.85);
  opacity: 0.82;
}
.testimonials-locked {
  text-align: center;
  margin-top: -80px;
  padding: 0 0 24px;
  position: relative;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.testimonials-locked::before,
.testimonials-locked::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--text-dim);
  vertical-align: middle;
  margin: 0 12px;
}

/* ============ PHILOSOPHY ============ */
.philosophy {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 160px 48px;
  position: relative;
  overflow: hidden;
}
.phil-quote {
  max-width: 100%;
  margin: 0;
  font-size: clamp(22px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  position: relative;
}
/* .phil-quote::before 큰 따옴표 제거됨 (사용자 요청) */
.phil-quote .accent { color: var(--accent); }

/* Philosophy 디테일 블록 */
.phil-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.phil-detail {
  margin: 64px auto 0;
  padding: 32px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 760px;
  text-align: center;
}
.phil-detail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--accent);
}
.phil-detail-lead {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  /* 텍스트 밑 금색 밑줄 (사용자 요청) */
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.phil-detail .accent { color: var(--accent); font-weight: 600; }

.phil-pillars {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
.pillar {
  padding: 24px 16px;
  border-right: 1px solid var(--border);
  text-align: center;     /* 3 Pillars 가운데 정렬 (사용자 요청) */
}
.pillar:last-child { border-right: none; }
.pillar-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.pillar-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pillar-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  white-space: pre-line;
}

/* ============ ABOUT ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 96px;
  align-items: start;
}

/* ============ CTA BAND ============ */
.cta-band {
  padding: 120px 48px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border);
}
.cta-band-title {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}
.cta-band-title .accent { color: var(--accent); }
.cta-band-sub {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--bg);
  padding: 80px 48px 32px;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
.footer-brand .logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-brand .logo span { color: var(--accent); }
.footer-brand p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 320px;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.footer-bottom-links { display: flex; gap: 32px; }
.footer-bottom a { color: var(--text-dim); transition: color 0.2s ease; }
.footer-bottom a:hover { color: var(--text); }

/* 사업자 정보 (전자상거래법 표기) — 2026-05-08 */
.footer-legal {
  max-width: 1280px;
  margin: 0 auto 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.footer-legal span { white-space: nowrap; }
.footer-legal span.addr { white-space: normal; }
@media (max-width: 720px) {
  .footer-legal { gap: 4px 12px; font-size: 11px; padding-top: 20px; margin-bottom: 14px; }
  .footer-legal span { white-space: normal; }
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 56px 48px 48px;
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 64px;
  background: var(--accent);
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.modal-close:hover { background: var(--bg-card); color: var(--text); }
.modal-eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.modal-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.modal-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.form-row label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.form-row input, .form-row select, .form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-row textarea { resize: vertical; min-height: 88px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal .btn-primary { width: 100%; justify-content: center; margin-top: 12px; padding: 16px; }
.modal-disclaimer {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 16px;
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ SERVICE DETAIL PAGES (4개 공통) ============ */
/* 서비스 상세 페이지 공통 컴포넌트 — 디자인 토큰은 그대로 공유 */

.service-hero {
  min-height: 70vh;
  padding: 160px 48px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.service-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}
.service-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.service-num::before,
.service-num::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
.service-detail-title {
  /* 2026-05-06: 한글 단어 단위 줄바꿈(keep-all)로 "요." 외톨이 방지 + max 80→64px로 2줄 안착 */
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin-bottom: 20px;
}
.service-detail-title .accent { color: var(--accent); }
.service-detail-en {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 36px;
}
.service-detail-lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 48px;
  word-break: keep-all;
}
.service-mark {
  position: absolute;
  right: -80px;
  bottom: -80px;
  font-size: clamp(280px, 38vw, 520px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  line-height: 1;
}

/* 비교 — Pain ↔ TBNC 방식 */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
  align-items: stretch;
}
.compare-card {
  padding: 48px 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  transition: border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.compare-card.good {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}
.compare-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--text-dim);
}
.compare-card.good .compare-label { color: var(--accent); }
.compare-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  line-height: 1.35;
  word-break: keep-all;
}
.compare-card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  word-break: keep-all;
}
.compare-card ul {
  margin-top: 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-card li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  padding-left: 18px;
  position: relative;
}
.compare-card li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}
.compare-card.good li::before { color: var(--accent); }

/* 모듈 그리드 */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.modules-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.module-card {
  padding: 36px 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.module-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.4s ease;
}
.module-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}
.module-card:hover::before { height: 100%; }
.module-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.module-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  line-height: 1.35;
  word-break: keep-all;
}
.module-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  word-break: keep-all;
}
.module-list {
  margin-top: 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-list li {
  font-size: 13px;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
  line-height: 1.55;
}
.module-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
}

/* 프로세스 4단계 */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-step {
  padding: 40px 28px;
  border-right: 1px solid var(--border);
  position: relative;
}
.process-step:last-child { border-right: none; }

/* P2 #9 시각 도식화 — 단계 사이 골드 화살표 연결 (desktop) */
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  border-right: 1.5px solid var(--accent);
  border-top: 1.5px solid var(--accent);
  background: var(--bg);
  z-index: 2;
}
@media (max-width: 1080px) {
  .process-step:not(:last-child)::after { display: none; }
}

.process-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* P2 #9 — 번호 옆 작은 골드 배지 라인 (시각적 강조) */
.process-num::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.process-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.process-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  word-break: keep-all;
}

/* FAQ */
.faq-list {
  margin-top: 64px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  word-break: keep-all;
}
.faq-q::before {
  content: 'Q.';
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.faq-a {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.78;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  word-break: keep-all;
}
.faq-a::before {
  content: 'A.';
  color: var(--text-dim);
  font-weight: 700;
  flex-shrink: 0;
  padding-top: 1px;
}

/* 백 링크 — 별도 라인 (다음 요소와 가로로 합쳐지지 않도록 block 흐름) */
.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 0 auto 32px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--accent); }
.back-link::before { content: '←'; font-size: 14px; }

/* ALL IN ONE 패키지 — 시그니처 섹션 */
.package-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.package-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.package-section .section-inner { position: relative; z-index: 1; }

.package-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 2px;
}

.package-card {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-card));
}
.package-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.package-card .module-num {
  letter-spacing: 0.3em;
  font-weight: 700;
}

.package-cta {
  margin-top: 64px;
  text-align: center;
  padding: 48px 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.package-cta-text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 24px;
  word-break: keep-all;
}
.package-cta-text .accent { color: var(--accent); font-weight: 600; }
.package-cta .btn-primary { min-width: 240px; justify-content: center; }

/* 2026-05-06: ALL IN ONE 패키지 가격 블록 + 다중 CTA */
.package-pricing-block {
  margin: 32px auto 28px;
  padding: 24px 32px;
  display: inline-block;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
.package-pricing-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.package-pricing-text {
  font-size: 38px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.package-pricing-text .unit {
  font-size: 22px;
  font-weight: 700;
  margin-left: 4px;
}
.package-pricing-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 10px;
}
.package-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.package-cta-actions .btn-primary,
.package-cta-actions .btn-ghost {
  min-width: 200px;
  justify-content: center;
}

/* ============ PREMIUM PDP (기업인증 패키지 페이지) ============ */

/* 인증 비교 표 — 항목/벤처/이노비즈/메인비즈 */
.cert-table {
  margin-top: 64px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-card);
}
.cert-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  /* 2026-05-06: 행 자체에 동일 높이 강제 — 셀 콘텐츠 길이에 따른 행 변동 제거 */
  min-height: 84px;
}
.cert-table-row:last-child { border-bottom: none; }
.cert-table-row.head {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card-hover));
  font-weight: 700;
}
.cert-table-cell {
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  border-right: 1px solid var(--border);
  color: var(--text);
  word-break: keep-all;
  /* 텍스트 가운데 정렬 + 셀 안에서 세로 가운데 (행 높이 균등화) */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.cert-table-cell:last-child { border-right: none; }
.cert-table-cell.label {
  color: var(--text-muted);
  font-weight: 500;
  background: color-mix(in srgb, var(--accent) 2%, var(--bg-card));
}
.cert-table-row.head .cert-table-cell {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}
.cert-table-cell .stars { color: var(--accent); letter-spacing: 0.1em; }
.cert-table-cell .dim { color: var(--text-dim); }

/* PDP 그리드 — 3개 큰 카드 */
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
  align-items: stretch;
}
.pdp-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 48px 36px 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.pdp-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.5s ease;
}
.pdp-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-4px);
}
.pdp-card:hover::before { height: 100%; }

.pdp-card.featured {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}
.pdp-card.featured::before { height: 100%; }

.pdp-tier-badge {
  position: absolute;
  top: 0; right: 24px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: 0 0 2px 2px;
}

.pdp-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.pdp-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.pdp-tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
  word-break: keep-all;
}

.pdp-perks {
  margin: 24px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pdp-perks li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 22px;
  position: relative;
  word-break: keep-all;
}
.pdp-perks li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 1px;
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
}

.pdp-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pdp-package-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.pdp-package-list li {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.pdp-package-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
}

.pdp-specs {
  margin-top: 8px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-spec-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.pdp-spec-row .key {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
  padding-top: 2px;
}
.pdp-spec-row .val { color: var(--text); word-break: keep-all; }

.pdp-pricing {
  margin-top: auto;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp-pricing-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.pdp-pricing-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.pdp-pricing-sub {
  font-size: 12px;
  color: var(--text-dim);
  /* 2026-05-06: -8px → 8px (가격과 할부 안내 사이 시각적 호흡 확보) */
  margin-top: 8px;
}
.pdp-card .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 13px;
}
.pdp-card .btn-ghost {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 13px;
}

/* Why 3컬럼 (인증의 가치) */
.why-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.why-cert-item {
  padding: 36px 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  text-align: center;
  transition: border-color 0.3s ease;
}
.why-cert-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.why-cert-icon {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.why-cert-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.why-cert-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .why-cert-grid { grid-template-columns: 1fr; }
  .cert-table-row { grid-template-columns: 1fr; }
  .cert-table-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .cert-table-cell:last-child { border-bottom: none; }
  .cert-table-row.head { display: none; }
  .cert-table-cell.label::after { content: ' →'; color: var(--accent); }
}

/* 긴급성 띠 — 페이지 상단 narrow bar (nav fixed 아래에 정확히 위치) */
.cert-urgency {
  margin-top: 80px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.cert-urgency .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 10px;
  animation: cert-pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes cert-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* 앵커 네비 (sticky — nav fixed 아래에 붙도록 top: 64px) */
.cert-anchor-nav {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* section-title 한 줄/두 줄 강제 utility */
.section-title.one-line {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(28px, 3.6vw, 48px);
}
.section-title.two-line {
  max-width: 1100px;
  font-size: clamp(28px, 3.6vw, 48px);
  word-break: keep-all;
}
@media (max-width: 720px) {
  .section-title.one-line { white-space: normal; font-size: clamp(24px, 6vw, 36px); }
  .section-title.two-line { font-size: clamp(22px, 5.5vw, 34px); }
}
.cert-anchor-nav a {
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}
.cert-anchor-nav a:hover { color: var(--accent); }
.cert-anchor-nav a + a::before {
  content: '·';
  position: absolute;
  left: -18px;
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .cert-anchor-nav { gap: 16px; padding: 12px 16px; font-size: 12px; flex-wrap: wrap; }
  .cert-anchor-nav a + a::before { display: none; }
}

/* 강사 / 권위자 섹션 */
.author-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.author-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}
.author-portrait {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg-card)) 0%, var(--bg-card) 60%);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.author-portrait::before {
  content: 'JW';
  position: absolute;
  top: 24px; right: 28px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.author-portrait .silhouette {
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.04;
  line-height: 0.85;
  position: absolute;
  bottom: -20px;
  left: -8px;
}
.author-portrait .role {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.author-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.author-name {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
}
.author-name .accent { color: var(--accent); }
.author-tagline {
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
  word-break: keep-all;
}
.author-credentials {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.author-credentials li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
  word-break: keep-all;
}
.author-credentials li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
@media (max-width: 1024px) {
  .author-grid { grid-template-columns: 1fr; gap: 32px; }
  .author-portrait { aspect-ratio: 3 / 2; max-height: 320px; }
  .author-credentials { grid-template-columns: 1fr; }
}

/* 환불·보증 약속 박스 */
.guarantee-box {
  margin-top: 48px;
  padding: 40px 36px;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  text-align: center;
  position: relative;
}
.guarantee-stamp {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 18px;
}
.guarantee-title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.3;
  word-break: keep-all;
}
.guarantee-title .accent { color: var(--accent); }
.guarantee-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
  word-break: keep-all;
}
.guarantee-fineprint {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.55;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  word-break: keep-all;
}

/* Disclaimer 박스 */
.disclaimer-box {
  margin-top: 64px;
  padding: 32px 28px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: var(--bg-card);
}
.disclaimer-box h4 {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.disclaimer-box ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disclaimer-box li {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  padding-left: 14px;
  position: relative;
  word-break: keep-all;
}
.disclaimer-box li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--text-dim);
}

/* ============ E-BOOK / E-PRODUCT 공통 Hero ============ */
/* (ebook.html, e-product.html 두 페이지 모두 사용) */
.ebook-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 140px 48px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ebook-mark {
  position: absolute;
  right: -80px;
  bottom: -80px;
  font-size: clamp(280px, 40vw, 560px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  line-height: 1;
}
.ebook-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.ebook-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 32px;
  justify-content: center;
}
.ebook-eyebrow::before,
.ebook-eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
.ebook-title {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.ebook-title .accent { color: var(--accent); }
.ebook-sub {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ebook-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 48px;
}
.ebook-status .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: ebook-pulse 1.6s ease-in-out infinite;
}
@keyframes ebook-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.ebook-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.ebook-actions .btn-primary,
.ebook-actions .btn-ghost { min-width: 200px; justify-content: center; }

/* ebook.html 전용 — 예정 카드 그리드 (legacy, e-product에서는 사용 X) */
.ebook-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 96px auto 0;
  padding: 0 48px;
}
.ebook-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 36px 28px 32px;
  border-radius: 4px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.ebook-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.5s ease;
}
.ebook-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}
.ebook-card:hover::before { height: 100%; }
.ebook-card .num {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.ebook-card h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-bottom: 12px;
}
.ebook-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 24px;
  word-break: keep-all;
}
.ebook-card .tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-transform: uppercase;
}
@media (max-width: 1080px) {
  .ebook-list { grid-template-columns: 1fr 1fr; padding: 0 32px; }
}
@media (max-width: 720px) {
  .ebook-hero { padding: 120px 20px 80px; }
  .ebook-list { grid-template-columns: 1fr; padding: 0 20px; gap: 12px; margin-top: 64px; }
}

/* ============ E-PRODUCT 페이지 ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}
.product-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  /* 2026-05-06: 쇼핑몰 스타일 — 커버 + 정보 + 푸터 3구획. padding은 내부 zone에 위임 */
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.product-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.5s ease;
}
.product-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}
.product-card:hover::before { height: 100%; }
/* 2026-05-06: 쇼핑몰 스타일 — Cover 영역 (상단 비주얼) */
.product-cover {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-cover::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.product-cover-mark {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
}
.product-cover-tag {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.product-cover-num {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
}

/* Body (정보 영역) */
.product-body {
  padding: 24px 28px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Foot (가격 + 버튼 영역) */
.product-foot {
  padding: 16px 28px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.product-price-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.product-price-value {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.product-buy-btn {
  width: 100%;
  padding: 13px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: inherit;
}
.product-buy-btn:hover {
  background: var(--accent);
  color: #0A0A0A;
}

.product-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.product-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin-bottom: 12px;
  /* 데스크톱(3컬럼)에서 한 줄 강제 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1024px) {
  /* 1컬럼 — 카드 폭 충분, 자연 줄바꿈 + 폰트 원래대로 */
  .product-name {
    white-space: normal;
    overflow: visible;
    font-size: 22px;
    word-break: keep-all;
  }
}
.product-tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  word-break: keep-all;
}
.product-spec {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-spec-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.product-status {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 2px;
}

/* 시그니처 eBook — 단독 큰 카드 (정책자금 끝장내기) */
.featured-ebook-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.featured-ebook {
  margin-top: 56px;
  padding: 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border-radius: 4px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
}
.featured-ebook-cover {
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.featured-ebook-cover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--accent);
}
.featured-ebook-cover .cover-tag {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 8px;
}
.featured-ebook-cover .cover-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
  margin-left: 8px;
  word-break: keep-all;
}
.featured-ebook-cover .cover-foot {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-left: 8px;
}

.featured-ebook-content { display: flex; flex-direction: column; gap: 20px; }
.featured-ebook-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
}
.featured-ebook-title {
  /* 두 줄에 정확히 떨어지도록 폰트 축소 (첫 줄: 소상공인을 위한 정책자금의 처음부터 끝까지.) */
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  word-break: keep-all;
  margin: 0;
}
.featured-ebook-title .accent { color: var(--accent); }
.featured-ebook-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  word-break: keep-all;
}
.featured-ebook-bullets {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.featured-ebook-bullets li {
  font-size: 13px;
  color: var(--text);
  padding-left: 20px;
  position: relative;
  word-break: keep-all;
  line-height: 1.6;
}
.featured-ebook-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
}
.featured-ebook-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.featured-ebook-cta .btn-primary { min-width: 200px; justify-content: center; }
.featured-ebook-meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.featured-ebook-update {
  margin-top: 16px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
  font-weight: 600;
  word-break: keep-all;
}
.featured-ebook-update strong {
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: 1fr; }
  .featured-ebook { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
  .featured-ebook-cover { aspect-ratio: 5 / 3; max-height: 240px; }
  .featured-ebook-bullets { grid-template-columns: 1fr; }
}


/* 시그니처 패키지 — 소상공인 5업종 */
.industries-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 56px;
}
.industry-card {
  /* 2026-05-06: 쇼핑몰 스타일 — 커버 + 정보 + 알림버튼 3구획 */
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.industry-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-3px);
}
.industry-cover {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 35% 35%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.industry-cover-mark {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.industry-cover-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.industry-cover-num {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
}
.industry-body {
  padding: 18px 14px 14px;
  flex-grow: 1;
}
.industry-foot {
  padding: 0 14px 14px;
}
.industry-buy-btn {
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.industry-buy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.industry-num {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.industry-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  word-break: keep-all;
}
.industry-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  word-break: keep-all;
}

.product-bundle {
  margin-top: 40px;
  padding: 36px 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.bundle-item {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.bundle-item strong {
  display: block;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .product-bundle { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .product-bundle { grid-template-columns: 1fr; }
}

/* Sticky Footer CTA */
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  /* P0-7: iOS Home Indicator 회피 (env safe-area-inset-bottom) */
  padding-top: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.sticky-cta-bar.visible { display: flex; transform: translateY(0); justify-content: center; align-items: center; gap: 20px; }
.sticky-cta-text {
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.sticky-cta-text .accent { color: var(--accent); font-weight: 700; }
.sticky-cta-bar .btn-primary { padding: 12px 24px; font-size: 13px; min-width: 200px; }
@media (max-width: 720px) {
  .sticky-cta-bar {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    flex-direction: column;
    gap: 6px;
  }
  .sticky-cta-text { font-size: 12px; }
  .sticky-cta-bar .btn-primary { width: 100%; min-width: 0; padding: 10px; min-height: 44px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .nav, .hero, .section, .footer, .cta-band, .philosophy { padding-left: 32px; padding-right: 32px; }
  .service-row { grid-template-columns: 1fr; gap: 24px; }
  .service-head { padding-left: 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .phil-pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 0; }
  .pillar:last-child { border-bottom: none; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .metric:nth-child(3) { padding-left: 0; border-left: none; }
  .compare-grid { grid-template-columns: 1fr; }
  .modules-grid, .modules-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2n) { border-right: none; }
  .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
/* ============ MOBILE — iPhone / Galaxy 표준 (360~430px) ============ */
@media (max-width: 720px) {
  /* nav — iOS safe-area-inset 적용 (Dynamic Island 회피) */
  .nav {
    padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: 14px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
  .nav.scrolled {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px));
    padding-bottom: 12px;
  }
  .nav-links { display: none; }
  .nav-cta { padding: 8px 12px; font-size: 11px; letter-spacing: 0.04em; }
  .nav-logo { font-size: 16px; }

  /* 본문 좌우 padding 통일 */
  .hero, .section, .footer, .cta-band, .philosophy { padding-left: 20px; padding-right: 20px; }

  /* 본문 상하 padding 줄임 (140px → 80px) */
  .section { padding-top: 80px; padding-bottom: 80px; }
  .cta-band { padding-top: 80px; padding-bottom: 80px; }
  .philosophy { padding-top: 100px; padding-bottom: 100px; }
  .footer { padding-top: 60px; padding-bottom: 24px; }

  /* Hero (홈) */
  .hero { padding: 100px 20px 60px; min-height: auto; }
  .hero-title { font-size: clamp(26px, 7vw, 40px); }
  .hero-eyebrow { margin-bottom: 24px; }
  .hero-pretitle { font-size: 17px; margin-bottom: 22px; }
  .hero-sub { font-size: 16px; margin-bottom: 36px; line-height: 1.7; }
  .hero-actions { margin-bottom: 56px; gap: 12px; flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { min-width: 0; width: 100%; padding: 16px; }

  /* Hero metrics — 2x2 그리드 */
  .hero-metrics { gap: 24px 0; padding-top: 32px; grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 0 12px; border-left: none; }
  .metric:nth-child(2n) { border-left: 1px solid var(--border); }
  .metric-value { font-size: 26px; }
  .metric-value .unit { font-size: 17px; }
  .metric-label { font-size: 11px; letter-spacing: 0.1em; }

  /* 서비스 상세 Hero */
  .service-hero { padding: 100px 20px 60px; min-height: auto; }
  .service-detail-title { font-size: clamp(26px, 7vw, 38px); }
  .service-detail-lead { font-size: 15px; margin-bottom: 32px; }
  .service-num { letter-spacing: 0.2em; font-size: 11px; margin-bottom: 24px; }
  .service-detail-en { font-size: 12px; letter-spacing: 0.22em; margin-bottom: 28px; }

  /* 섹션 헤더 */
  .section-title { font-size: clamp(26px, 7vw, 40px); }
  .section-sub { font-size: 15px; margin-bottom: 56px; line-height: 1.7; }
  .section-eyebrow { letter-spacing: 0.2em; margin-bottom: 20px; }

  /* CTA Band */
  .cta-band-title { font-size: clamp(24px, 7vw, 36px); }
  .cta-band-sub { font-size: 15px; margin-bottom: 32px; }
  .cta-band .btn-primary { width: 100%; padding: 16px; justify-content: center; }

  /* 카드 패딩 통일 */
  .module-card { padding: 28px 22px; }
  .pdp-card { padding: 36px 24px 24px; }
  .product-card { padding: 32px 24px 24px; }
  .testimonial-card { min-height: 0; padding: 40px 24px 24px; }
  .compare-card { padding: 28px 22px; }
  .compare-card h3 { font-size: 19px; }
  .package-card { padding: 28px 22px; }
  .package-cta { padding: 28px 20px; margin-top: 48px; }
  .package-cta-text { font-size: 15px; }
  .package-cta .btn-primary { width: 100%; min-width: 0; }

  /* 그리드 */
  .modules-grid, .modules-grid.cols-3 { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--border); padding: 32px 24px; }
  .process-step:last-child { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* Form / Modal */
  .form-grid-2 { grid-template-columns: 1fr; }
  .modal { padding: 40px 22px 28px; }
  .modal-title { font-size: 24px; }

  /* Philosophy */
  .phil-quote::before { font-size: 120px; left: -20px; top: -50px; }
  .phil-quote { font-size: clamp(20px, 5.5vw, 32px); }
  .phil-detail { padding-top: 24px; gap: 12px; font-size: 15px; max-width: 100%; }
  .phil-detail-lead { font-size: 16px; }
  .phil-detail-lead { text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
  .phil-pillars { margin-top: 64px; padding-top: 32px; }
  .pillar { padding: 20px 0; }

  /* About */
  .about-grid { gap: 32px; }

  /* Service 카드 row (홈 services) */
  .service-row { padding: 32px 0; }
  .service-head { padding-left: 22px; }
  .service-title-ko { font-size: 24px; }
  .service-body { padding: 28px 24px; }

  /* Cert 페이지 — anchor nav, urgency */
  /* nav 높이(~68-118px with safe-area) + 8px 호흡 — 텍스트 가림 방지 */
  .cert-urgency {
    font-size: 11px;
    padding: 10px 16px;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin-top: calc(76px + env(safe-area-inset-top, 0px));
  }
  .cert-anchor-nav { gap: 12px; padding: 10px 16px; font-size: 11px; flex-wrap: wrap; top: 50px; }
  .cert-anchor-nav a + a::before { display: none; }

  /* Cert PDP cards */
  .pdp-grid { gap: 16px; }
  .pdp-tier-badge { right: 14px; padding: 4px 10px; font-size: 9px; letter-spacing: 0.18em; }
  .pdp-name { font-size: 22px; }
  .pdp-pricing-text { font-size: 14px; }
  .pdp-pricing-text[style*="font-size: 28px"] { font-size: 24px !important; }

  /* Cert 컨설턴트 섹션 */
  .author-name { font-size: clamp(24px, 7vw, 30px); }
  .author-credentials { gap: 8px; }
  .author-credentials li { font-size: 13px; }
  .author-credentials li[style] { white-space: normal !important; }

  /* Cert 비교 표 (모바일에선 1열로 재구성됨) */
  .cert-table-cell { padding: 16px 20px; min-height: 0; text-align: left; display: block; }

  /* Guarantee */
  .guarantee-box { padding: 32px 22px; }
  .guarantee-title { font-size: clamp(22px, 6vw, 28px); }

  /* Disclaimer */
  .disclaimer-box { padding: 24px 20px; }

  /* Featured eBook (정책자금 끝장내기) */
  .featured-ebook { padding: 32px 20px; gap: 24px; }
  .featured-ebook-title { font-size: clamp(20px, 5.5vw, 26px); }
  .featured-ebook-text { font-size: 14px; }
  .featured-ebook-bullets li { font-size: 12.5px; }
  .featured-ebook-update {
    padding: 10px 14px;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Industries (5업종) */
  .industry-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .industry-card { padding: 24px 14px; }
  .industry-name { font-size: 16px; }
  .industry-sub { font-size: 11px; }
  .product-bundle { padding: 24px 16px; gap: 12px; }
  .bundle-item { font-size: 12px; }

  /* eBook / E-Product Hero */
  .ebook-hero { padding: 100px 20px 60px; min-height: auto; }
  .ebook-title { font-size: clamp(26px, 7vw, 40px); }
  .ebook-sub { font-size: 15px; margin-bottom: 36px; }
  .ebook-status { padding: 12px 18px; font-size: 12px; margin-bottom: 36px; }
  .ebook-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .ebook-actions .btn-primary, .ebook-actions .btn-ghost { width: 100%; min-width: 0; padding: 16px; }

  /* Edge glow 두께 줄임 */
  .hb-border { --hb-thickness: 12px; }

  /* Sticky CTA bar (cert 페이지) */
  .sticky-cta-bar { padding: 10px 14px; }
  .sticky-cta-text { font-size: 12px; }

  /* Footer */
  .footer-brand p { font-size: 12px; }
  .footer-col h4 { font-size: 11px; }
  .footer-col a { font-size: 13px; }
}

/* ============ EXTRA SMALL — iPhone SE / 좁은 Galaxy (≤480px) ============ */
@media (max-width: 480px) {
  /* nav 더 좁게 — safe-area-inset 유지 */
  .nav {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: 12px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }
  .nav.scrolled {
    padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 4px));
    padding-bottom: 10px;
  }
  /* 터치 타겟 44px 보장 (P1-9) */
  .nav-cta { padding: 9px 14px; font-size: 10.5px; letter-spacing: 0.02em; min-height: 36px; display: inline-flex; align-items: center; }
  .nav-logo { font-size: 15px; }

  /* 좌우 패딩 더 좁게 */
  .hero, .section, .footer, .cta-band, .philosophy { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .cta-band { padding-top: 64px; padding-bottom: 64px; }
  .philosophy { padding-top: 80px; padding-bottom: 80px; }

  /* Hero 폰트 더 줄임 */
  .hero { padding: 96px 16px 56px; }
  .hero-title { font-size: clamp(22px, 8vw, 32px); }
  .hero-pretitle { font-size: 15px; }
  .hero-sub { font-size: 14.5px; }

  /* Service 상세 Hero */
  .service-hero { padding: 96px 16px 56px; }
  .service-detail-title { font-size: clamp(22px, 8vw, 30px); }
  .service-detail-lead { font-size: 14px; }

  /* 섹션 헤더 */
  .section-title { font-size: clamp(22px, 8vw, 32px); }
  .section-sub { font-size: 14px; margin-bottom: 48px; }

  /* CTA Band */
  .cta-band-title { font-size: clamp(22px, 8vw, 32px); }
  .cta-band-sub { font-size: 14px; }

  /* Hero metrics */
  .metric { padding: 0 8px; }
  .metric-value { font-size: 22px; }
  .metric-value .unit { font-size: 15px; }
  .metric-label { font-size: 10.5px; letter-spacing: 0.08em; }

  /* 카드 패딩 더 좁게 */
  .module-card, .package-card, .compare-card { padding: 24px 18px; }
  .pdp-card { padding: 32px 22px 22px; }
  .product-card { padding: 28px 20px 20px; }
  .testimonial-card { padding: 32px 20px 20px; }
  .pdp-name { font-size: 20px; }
  .product-name { font-size: 18px; }

  /* Modal */
  .modal { padding: 32px 16px 20px; }
  .modal-title { font-size: 22px; }

  /* Philosophy quote */
  .phil-quote { font-size: clamp(18px, 6vw, 28px); }
  .phil-quote::before { font-size: 100px; left: -10px; top: -40px; }

  /* Industries */
  .industry-card { padding: 20px 12px; }
  .industry-name { font-size: 15px; }

  /* Featured eBook */
  .featured-ebook { padding: 28px 16px; }
  .featured-ebook-title { font-size: clamp(18px, 5.5vw, 24px); }
  .featured-ebook-cover { padding: 24px 20px; }
  .featured-ebook-cover .cover-title { font-size: 18px; }

  /* Cert 페이지 */
  .cert-urgency {
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    margin-top: calc(70px + env(safe-area-inset-top, 0px));
  }
  .cert-anchor-nav { padding: 8px 12px; font-size: 10px; gap: 10px; }
  .pdp-tier-badge { font-size: 8.5px; padding: 3px 8px; }

  /* Service row */
  .service-head { padding-left: 18px; }
  .service-title-ko { font-size: 22px; }
  .service-body { padding: 24px 20px; }

  /* Footer */
  .footer { padding-top: 48px; padding-bottom: 20px; }
  .footer-col a { font-size: 12.5px; }

  /* Edge glow 더 가늘게 */
  .hb-border { --hb-thickness: 10px; }
}

/* ==========================================================
   AUTH (signup / login) — 회원 시스템
   ========================================================== */

/* nav 우측 인증 슬롯 */
.nav-auth {
  display: flex;
  align-items: center;
  /* 2026-05-06: nav-links와 동일 gap으로 통일 — 등간격 정렬 */
  gap: clamp(16px, 2.4vw, 40px);
  flex-shrink: 0;
}
.nav-auth-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-auth-link:hover { color: var(--gold); }
.nav-auth-cta {
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--gold);
}
.nav-auth-cta:hover {
  background: var(--gold);
  color: #0A0A0A;
}
.nav-auth-greeting {
  color: var(--text);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* CRM 메뉴 (role==='member' 일 때만 동적 추가) */
.nav-links .crm-link {
  color: var(--gold) !important;
  font-weight: 600;
  position: relative;
}
.nav-links .crm-link::before {
  content: "●";
  margin-right: 4px;
  font-size: 6px;
  vertical-align: middle;
  color: var(--gold);
}

/* 인증 페이지 본체 */
.auth-shell {
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
  min-height: calc(100dvh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
}
.auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 56px 48px;
  position: relative;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(140deg, rgba(201,168,76,0.5), transparent 40%, transparent 60%, rgba(201,168,76,0.2)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.auth-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.auth-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--text);
}
.auth-sub {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 36px;
}

.auth-form .form-row { margin-bottom: 16px; }
.auth-form .form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.auth-form input,
.auth-form select {
  width: 100%;
  padding: 13px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(201,168,76,0.04);
}
.auth-form .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 24px;
  cursor: pointer;
}
.auth-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }

.auth-submit {
  width: 100%;
  padding: 15px;
  font-size: 14.5px;
  border-radius: 10px;
  margin-top: 4px;
}
.auth-submit:disabled { opacity: .55; cursor: not-allowed; }

.auth-message {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 8px;
  min-height: 0;
}
.auth-message:empty { display: none; }
.auth-message.success {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
}
.auth-message.error {
  background: rgba(229,99,99,0.08);
  border: 1px solid rgba(229,99,99,0.25);
  color: #E47373;
}

.auth-helper {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-helper a {
  color: var(--gold);
  text-decoration: none;
  margin-left: 6px;
  font-weight: 500;
}
.auth-helper a:hover { text-decoration: underline; }
.auth-helper .dot-sep { margin: 0 8px; color: var(--text-dim); }

/* 모바일 */
@media (max-width: 720px) {
  .auth-shell { padding: 96px 18px 60px; }
  .auth-card { padding: 40px 26px; border-radius: 16px; }
  .auth-form .form-grid-2 { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .nav-auth-greeting { display: none; }
}
@media (max-width: 480px) {
  .auth-card { padding: 32px 20px; }
  .auth-title { font-size: 22px; }
  .auth-sub { font-size: 13.5px; }
}

/* ==========================================================
   Checkout / Download — 결제·다운로드 흐름 페이지 공통
   ========================================================== */
.checkout-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 132px 24px 80px;
}

.checkout-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 6px 36px rgba(0,0,0,.18);
  text-align: center;
}
.checkout-card + .checkout-card { margin-top: 24px; }
/* 폼·요약 박스만 다시 좌측 정렬 (input/label 가독성 보존) */
.checkout-card .auth-form,
.checkout-card .checkout-summary { text-align: left; }
/* CTA 링크(inline-flex)가 가운데로 */
.checkout-card .auth-submit { margin-left: auto; margin-right: auto; }

.checkout-summary {
  margin: 24px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 4px;
  font-size: 14px;
  color: var(--text);
}
.checkout-summary-row + .checkout-summary-row { border-top: 1px solid rgba(255,255,255,.04); }
.checkout-summary-row .label { color: var(--text-muted); font-size: 13px; letter-spacing: .02em; }
.checkout-summary-row .value { font-weight: 500; font-family: var(--font-mono, monospace); }
.checkout-summary-row .value.strike { text-decoration: line-through; color: var(--text-dim); font-weight: 400; }
.checkout-summary-row.total { padding: 18px 4px; }
.checkout-summary-row.total .label { color: var(--text); font-size: 14px; font-weight: 600; }
.checkout-summary-row.total .value { font-size: 22px; font-weight: 700; color: var(--gold); font-family: inherit; }

.toss-payment-method,
.toss-agreement { margin-top: 18px; }
.toss-agreement { margin-bottom: 8px; }

.checkout-disclaimer {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  text-align: center;
}
.checkout-disclaimer a { color: var(--text-muted); text-decoration: underline; }

/* ==========================================================
   My Page (마이페이지)
   ========================================================== */
.my-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 132px 24px 80px;
}
.my-header { margin-bottom: 36px; text-align: left; }
.my-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--text);
  letter-spacing: -.01em;
}
.my-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.7;
}
.my-orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.my-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease;
}
.my-order-row:hover { border-color: rgba(212,175,55,.4); }
.my-order-main { flex: 1; min-width: 0; }
.my-order-product { font-weight: 600; font-size: 15.5px; margin-bottom: 6px; color: var(--text); }
.my-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.my-order-id { font-family: var(--font-mono, monospace); }
.my-order-amount { color: var(--text); font-weight: 500; }
.my-order-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.my-order-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  letter-spacing: .02em;
}
.my-order-status.ok { color: #7CCB7E; border-color: rgba(124,203,126,.3); background: rgba(124,203,126,.07); }
.my-order-status.pending { color: #D4AF37; border-color: rgba(212,175,55,.3); background: rgba(212,175,55,.07); }
.my-order-status.err { color: #E55A4C; border-color: rgba(229,90,76,.3); background: rgba(229,90,76,.07); }
.my-order-action {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease;
}
.my-order-action:hover { opacity: .85; }
.my-order-action.disabled {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  cursor: not-allowed;
}

/* ==========================================================
   Auth — Google OAuth 버튼 + 구분선
   ========================================================== */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.btn-google:hover { background: #f5f5f5; }
.btn-google:disabled { opacity: .6; cursor: not-allowed; }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================
   모바일 보정 — 결제·마이페이지
   ========================================================== */
@media (max-width: 720px) {
  .checkout-shell { padding: 110px 16px 60px; }
  .checkout-card { padding: 36px 24px; border-radius: 16px; }
  .checkout-summary-row.total .value { font-size: 19px; }

  .my-shell { padding: 110px 16px 60px; }
  .my-order-row { flex-direction: column; align-items: flex-start; padding: 18px 18px; }
  .my-order-side { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .checkout-card { padding: 28px 18px; }
  .checkout-summary-row { padding: 12px 2px; font-size: 13px; }
  .my-order-product { font-size: 14.5px; }
}

/* ==========================================================
   모바일 햄버거 네비 + 헤딩 가독성 보강
   (auth.js가 .nav 안에 .nav-hamburger + .nav-mobile-overlay 자동 삽입)
   ========================================================== */

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nav-hamburger svg { width: 20px; height: 20px; pointer-events: none; }
.nav-hamburger:hover { background: rgba(212,175,55,.08); }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  padding: 24px 24px 40px;
  overflow-y: auto;
  flex-direction: column;
}
.nav-mobile-overlay.open {
  display: flex;
  animation: nav-mobile-in .18s ease;
}
@keyframes nav-mobile-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.nav-mobile-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-mobile-close svg { width: 18px; height: 18px; pointer-events: none; }

.nav-mobile-section {
  border-bottom: 1px solid var(--border);
  padding: 8px 0 16px;
  margin-bottom: 8px;
}
.nav-mobile-section:last-child { border-bottom: none; margin-bottom: 0; }
.nav-mobile-overlay a,
.nav-mobile-overlay button[data-mobile-action] {
  display: block;
  width: 100%;
  padding: 14px 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-mobile-overlay a:hover,
.nav-mobile-overlay button[data-mobile-action]:hover { color: var(--accent); }
.nav-mobile-overlay .nav-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  margin-top: 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 4px;
  text-align: center;
}
.nav-mobile-overlay .nav-mobile-cta:hover {
  background: var(--accent);
  color: var(--bg);
}
body.nav-mobile-open { overflow: hidden; }

/* ===== 720px 이하 모바일 nav + 헤딩 보강 ===== */
@media (max-width: 720px) {
  .nav {
    gap: 12px;
    padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: 14px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }
  .nav.scrolled {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px));
    padding-bottom: 12px;
  }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-auth { display: none !important; }
  .nav-hamburger { display: inline-flex; }

  /* Hero 헤딩 — 모바일에서 줄바꿈 자연스럽게 */
  .hero-title {
    font-size: clamp(28px, 7.2vw, 42px) !important;
    line-height: 1.25 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 섹션 헤딩 — "팅" 한 글자 떨어지는 문제 방지 */
  .section-title,
  .section-title.one-line,
  .section-title.two-line,
  .auth-title,
  .pb-section-title {
    font-size: clamp(22px, 5.8vw, 32px) !important;
    line-height: 1.3 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 페이지 일반 헤딩 — 의미 단위 줄바꿈 */
  h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }

  /* 서비스 카드 항목 옆 RECOMMENDED/BENCHMARKING 배지 — 항목 아래로 이동 */
  .pill {
    display: inline-block;
    margin-left: 0;
    margin-top: 6px;
    font-size: 10.5px;
    padding: 3px 8px;
    white-space: nowrap;
  }
  ul li > div,
  .service-perks li > div,
  .pdp-perks li > div { line-height: 1.5; }
}
@media (max-width: 380px) {
  .nav-logo { font-size: 16px; }
  .hero-title { font-size: clamp(24px, 7vw, 32px) !important; }
}

/* ==========================================================
   모바일: 후기(testimonials) 한 줄 가로 마키 (우→좌 무한 흐름)
   auth.js의 setupTestimonialsMarquee()가 자식을 한 번 복제해서 seamless loop
   ========================================================== */
@media (max-width: 720px) {
  .testimonials-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    padding: 0 !important;
    overflow: hidden;
    width: 100vw;
    /* 부모 max-width를 무시하고 화면 풀폭으로 흘러나가게 */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    align-items: stretch;
    animation: testimonials-marquee 22s linear infinite;
    will-change: transform;
  }
  .testimonials-grid .testimonial-card {
    flex: 0 0 84%;
    min-width: 280px;
    max-width: 360px;
    margin: 0;
    min-height: auto;
  }
  .testimonials-grid:active { animation-play-state: paused; }

  /* 흐려진 추가 사례 — 마키 활성화 시 시각적 충돌 방지로 모바일에서 숨김 */
  .testimonials-blurred { display: none; }
  .testimonials-locked { display: none; }
}
@keyframes testimonials-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================
   모바일 CTA Band 헤딩 — 2줄 강제 ("지금이 다음 10년을 설계할 / 가장 빠른 시기입니다")
   ========================================================== */
@media (max-width: 720px) {
  .cta-band-title {
    font-size: clamp(20px, 5.6vw, 26px) !important;
    line-height: 1.4 !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: 0 8px;
  }
}
@media (max-width: 480px) {
  .cta-band-title {
    font-size: clamp(18px, 5.2vw, 22px) !important;
  }
}

/* ==========================================================
   P0~P3 모바일 UI 종합 보강 (worklist 2026-05-07)
   - 데스크톱 변경 없음, 모바일 미디어쿼리 + 글로벌 안전망만
   ========================================================== */

/* §0 글로벌 안전망 — 박스 모델 + 가로 스크롤 차단 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* §6 접근성 — 포커스 링 + 모션 감소 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .testimonials-grid { animation: none !important; }
}

@media (max-width: 720px) {
  /* §2-2 카운터(stats) — 단위 베이스라인 + 사이즈 정리 */
  .metric-value { font-size: clamp(28px, 8vw, 40px); font-weight: 700; line-height: 1.1; }
  .metric-value .unit {
    font-size: 0.55em;
    vertical-align: baseline;
    margin-left: 2px;
    font-weight: 600;
    color: var(--accent);
  }
  .metric-label { font-size: 12px; letter-spacing: 0.06em; }
  .hero-metrics { gap: 16px 24px; }

  /* §2-4 후기 카드 가독성 안전망 (marquee로 전환됐지만 백업) */
  .testimonial-card { opacity: 1 !important; transform: none !important; }

  /* §3-2 서비스/PB Hero CTA 버튼 통일 */
  .service-hero .btn-primary,
  .service-hero .btn-ghost,
  .pb-hero .btn-primary,
  .pb-hero .btn-ghost,
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
  }

  /* §3-4 단계 숫자 위계 */
  .step-number, .pb-step-num, .module-num {
    font-size: 30px !important;
    line-height: 1;
  }

  /* §4-1 [Critical] 프로모션 urgency 바 — 잘림 해소 */
  .pb-urgency-text {
    white-space: normal !important;
    text-align: center;
    line-height: 1.45;
    font-size: 12px;
    padding: 0 12px;
    word-break: keep-all;
  }
  .pb-urgency-bar { padding: 8px 16px !important; }

  /* §4-3 [Critical] 하단 sticky CTA — 버튼 잘림 방지 */
  .pb-sticky-footer,
  .sticky-cta-bar {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    padding: 12px 16px !important;
    flex-wrap: nowrap;
  }
  .pb-sticky-info,
  .sticky-cta-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .pb-sticky-title { font-size: 13px; line-height: 1.3; }
  .pb-sticky-mini-countdown { font-size: 11px; }
  .pb-sticky-cta {
    flex: 0 0 auto;
    min-width: 110px;
    min-height: 44px;
    white-space: nowrap;
    padding: 10px 14px !important;
    font-size: 14px;
  }

  /* §4-4 [Critical] 비교 표 — 모바일 1열 세로 */
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .compare-card { width: 100%; word-break: keep-all; }
  .compare-label { font-size: 13px; }

  /* §5 폼 인풋 (signup/login/checkout) */
  .auth-form input,
  .auth-form select,
  .auth-form textarea {
    min-height: 48px;
    font-size: 15px;
    border-radius: 10px;
  }
  .auth-form input::placeholder { color: rgba(255, 255, 255, 0.35); }
  .btn-google { min-height: 52px; border-radius: 12px; }

  /* 터치 타겟 최소 44x44 (텍스트 링크 제외) */
  .btn-primary, .btn-ghost, .btn-google,
  .nav-hamburger, .nav-mobile-close,
  button[type="submit"], button[type="button"] {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  /* §1-4 모바일 폰트 위계 — 글로벌 헤딩 */
  h1, h2, h3, p { word-break: keep-all; overflow-wrap: anywhere; }

  /* 카운터 추가 축소 */
  .metric-value { font-size: clamp(24px, 7.5vw, 32px); }

  /* sticky CTA 버튼 텍스트 한 단계 더 컴팩트 */
  .pb-sticky-cta { min-width: 96px; font-size: 13px; padding: 9px 12px !important; }
  .pb-sticky-title { font-size: 12px; }
}

/* ==========================================================
   모바일 CORE SERVICES — 4개 카드 2x2 격자 (perks 숨김, 더 알아보기만)
   ========================================================== */
@media (max-width: 720px) {
  #services .section-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    /* 2026-05-07: 4 카드 동일 높이 — 모든 행 1fr 균등 분할 */
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  /* 섹션 헤더(eyebrow + h2 + sub)는 풀폭 */
  #services .section-inner > .reveal:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  /* 카드 — 컴팩트 + 균형 */
  #services .service-row {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-elevated, rgba(255, 255, 255, 0.025));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-left: 2px solid var(--accent);
    border-radius: 10px;
    padding: 20px 14px;
    margin: 0;
    /* min-height 제거 → grid-auto-rows: 1fr이 책임 (4 카드 동일 높이) */
    min-height: 0;
    height: 100%;
  }
  #services .service-head {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  #services .service-num {
    font-size: 10.5px;
    color: var(--accent);
    letter-spacing: 0.18em;
    font-weight: 600;
    /* "01" 단독 표기로 변경됨 — 독립 라벨 톤 강화 */
  }
  #services .service-title-ko {
    /* 가용폭 ~140pt 안에 9자 한글 1줄 수용 — clamp 유연 폭 */
    font-size: clamp(13px, 3.7vw, 15px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  #services .service-title-en {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* perks 리스트 숨김 — 격자에서 컴팩트 유지 */
  #services .service-body { display: none !important; }
  /* 더 알아보기 버튼 */
  #services .service-more-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
  }
  #services .service-more-box:hover,
  #services .service-more-box:active {
    background: var(--accent);
    color: var(--bg);
  }
}
@media (max-width: 380px) {
  #services .section-inner { gap: 10px; }
  /* min-height 제거 — grid-auto-rows: 1fr 유지 (균등 분할) */
  #services .service-row { padding: 18px 12px; min-height: 0; }
  #services .service-title-ko { font-size: clamp(12.5px, 3.6vw, 14px); }
  #services .service-more-box { font-size: 11px; padding: 8px 10px; }
}

/* ==========================================================
   §2-5 / §2-6 한 글자 줄바꿈 ("잇습니/다", 따옴표 분리) 방지
   720px 이하에서 본문 p / 인용 / about 본문에 keep-all 강제
   ========================================================== */
@media (max-width: 720px) {
  /* 모든 본문 p — 의미 단위 줄바꿈 */
  p { word-break: keep-all; overflow-wrap: anywhere; }

  /* PHILOSOPHY 인용 — 닫는 따옴표 본문과 분리 방지 */
  .phil-detail-lead,
  .phil-quote {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* ABOUT 본문 (inline style p) — 우선순위 보강 */
  #about p,
  .about-grid p,
  .about-grid h2 {
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
}

/* ==========================================================
   2026-05-07 P0 픽스 — 모바일 헤딩 위계·배경 워터마크·CTA 강조
   - hero/ebook/service-detail-title은 H1 토큰 (--fs-h1-mobile)
   - section-title은 H2 토큰 (--fs-h2-mobile) — hero보다 작게
   - cta-band-title은 CTA 토큰 (--fs-cta-mobile) — 최종 CTA 강조
   - phil-quote/author/guarantee는 H3 토큰 (--fs-h3-mobile)
   - 배경 워터마크 (.hero-mark/.service-mark/.ebook-mark) 모바일 축소
   ========================================================== */
@media (max-width: 720px) {
  /* P0-1 헤딩 위계 — H1 (hero급) */
  .hero-title,
  .ebook-title,
  .service-detail-title,
  .pb-hero-title,
  .cert-hero-title {
    font-size: var(--fs-h1-mobile) !important;
    line-height: 1.2 !important;
  }

  /* P0-1 헤딩 위계 — H2 (section-title) — hero보다 한 단계 작게 */
  .section-title {
    font-size: var(--fs-h2-mobile) !important;
    line-height: 1.25 !important;
  }
  .section-title.one-line { font-size: var(--fs-h2-mobile) !important; }
  .section-title.two-line { font-size: var(--fs-h2-mobile) !important; }

  /* P0-5 CTA Band — 최종 CTA는 hero급 강조 */
  .cta-band-title {
    font-size: var(--fs-cta-mobile) !important;
    line-height: 1.25 !important;
  }

  /* H3 (인용 / 컨설턴트 / 보증 / featured) */
  .phil-quote,
  .author-name,
  .guarantee-title,
  .featured-ebook-title,
  .pb-author-name {
    font-size: var(--fs-h3-mobile) !important;
    line-height: 1.3 !important;
  }

  /* P0-6 배경 워터마크 — 393pt에서 280px(71% 점유) 너무 큼 */
  .hero-mark,
  .service-mark,
  .ebook-mark {
    font-size: clamp(120px, 38vw, 200px) !important;
    opacity: 0.02 !important;
    right: -40px !important;
    bottom: -40px !important;
  }

  /* P1-1 인용 마크 (.t-quote-mark) — 64px 너무 큼 → 40px */
  .t-quote-mark {
    font-size: 40px !important;
    top: 12px !important;
    right: 18px !important;
  }
}

@media (max-width: 480px) {
  /* 480에서 추가 미세 조정 (변수는 clamp이라 자동 축소되지만, 일관성 위해 명시) */
  .hero-title,
  .ebook-title,
  .service-detail-title,
  .pb-hero-title,
  .cert-hero-title { line-height: 1.2 !important; }

  /* 배경 워터마크 더 축소 */
  .hero-mark,
  .service-mark,
  .ebook-mark {
    font-size: clamp(100px, 36vw, 160px) !important;
    right: -20px !important;
    bottom: -20px !important;
  }

  .t-quote-mark { font-size: 36px !important; }
}

/* ==========================================================
   2026-05-07 P1 픽스 — UX 폴리싱 (모바일)
   ========================================================== */

/* P1-8 prefers-reduced-motion — 0.001ms hack 대신 깔끔한 비활성 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .testimonials-grid { animation: none !important; }
  .hb-edge { animation: none !important; }
}

/* P1-4 hover 가드 — 터치 디바이스에서 호버 transition 일괄 비활성 */
@media (hover: none) {
  /* 호버 의존 transition만 차단 (transform/opacity 등 의도적 모션은 유지) */
  a, button, .module-card, .compare-card, .pdp-card, .package-card,
  .testimonial-card, .product-card, .industry-card, .service-row {
    transition-property: opacity, color, background-color, border-color;
    transition-duration: 0.18s;
  }
  /* 호버 시각효과 직접 비활성 */
  .module-card:hover, .compare-card:hover, .pdp-card:hover,
  .package-card:hover, .testimonial-card:hover,
  .product-card:hover, .industry-card:hover {
    transform: none !important;
  }
}

@media (max-width: 720px) {
  /* P1-7 Hero metrics 2x2 — padding/border 정리 (border-left와 padding 8px 충돌 해소) */
  .hero-metrics .metric { padding: 0 16px; }

  /* P1-10 modal-title — sticky CTA(21.6)와 동일하던 22px → 24px (위계 회복) */
  .modal-title { font-size: 24px !important; }

  /* P1-2/11 author-portrait placeholder 텍스트 — 모바일 64→56px 더 컴팩트 */
  .pb-author-portrait { font-size: 56px !important; }
}

@media (max-width: 480px) {
  /* P1-5 industry-grid — 480에서 2-col → 1-col (카드 폭 178pt 너무 좁음) */
  .industry-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .industry-card { padding: 28px 20px; min-height: 0; }
  .industry-name { font-size: 17px; }

  /* P1-2/11 author-portrait — 480에서 더 작게 */
  .pb-author-portrait { font-size: 48px !important; }
}

/* ==========================================================
   2026-05-07 P2 픽스 — 디테일 폴리싱
   ========================================================== */

/* P2-3 letter-spacing 한글 자간 완화 (-0.02em → -0.015em) */
@media (max-width: 720px) {
  .hero-title,
  .section-title,
  .ebook-title,
  .service-detail-title,
  .pb-hero-title,
  .cert-hero-title {
    letter-spacing: -0.015em;
  }
}

/* P2-4 .hb-border edge glow — 모바일에서 더 가늘게 + 합성 비용 절감 */
@media (max-width: 720px) {
  .hb-border { --hb-thickness: 8px; }
}
@media (max-width: 480px) {
  .hb-border { --hb-thickness: 6px; }
  /* P2-6 mix-blend-mode: screen → normal + opacity (Safari 모바일 합성 비용) */
  .hb-edge { mix-blend-mode: normal; opacity: 0.45; }
}

/* P2-5 backdrop-filter blur(14) → blur(8) (Safari 모바일 GPU) */
@media (max-width: 720px) {
  .sticky-cta-bar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* P2-7 (revised 2026-05-08): testimonials — 자동 마키 폐기 + scroll-snap 전환
   사용자 2회 보고 "잘림 / 흘러가다 안 보임" → 자동 스크롤 자체 제거.
   모바일 표준: 사용자가 좌우 스와이프, 카드 한 장씩 중앙 정렬 (snap). */
@media (max-width: 720px) {
  .testimonials-grid {
    /* 자동 애니메이션 제거 */
    animation: none !important;
    /* 사용자 스와이프 가능 */
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 좌우 패딩으로 첫/마지막 카드도 가운데 올 수 있게 */
    scroll-padding: 0 16px;
    padding: 0 16px 8px !important;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }

  .testimonials-grid .testimonial-card {
    /* 한 장씩 — viewport 거의 풀폭, max 380으로 데스크톱 폭 제한 */
    flex: 0 0 calc(100vw - 56px) !important;
    min-width: 0 !important;
    max-width: 380px !important;
    scroll-snap-align: center;
    margin: 0;
    min-height: auto;
  }
}

/* P2-8 .section-sub vs body 위계 분리 (14 vs 16 → 13.5 vs 16) */
@media (max-width: 720px) {
  .section-sub { font-size: 13.5px; line-height: 1.65; }
}

/* P2-9 Footer 접근성 — 작은 텍스트 한 단계 상향 */
@media (max-width: 480px) {
  .footer-col h4 { font-size: 12px !important; }
  .footer-col a { font-size: 14px !important; }
  .footer-brand p { font-size: 13px !important; }
}

/* P2-10 .cert-urgency 가독성 + 2026-05-08 nav 높이 회피
   nav가 urgency 바 윗부분 가리던 문제 해소 */
@media (max-width: 480px) {
  .cert-urgency {
    padding: 10px 14px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ==========================================================
   2026-05-07 cert-table — 모바일에서도 4-col 비교 유지 (사용자 요청)
   기존 @1024px 룰이 1열로 collapse 했으나, 사용자가 비교 표를 원함 → 4-col 복구
   ========================================================== */
@media (max-width: 720px) {
  /* 비교 표 컨테이너 가로 스크롤 안전망 (텍스트 너무 길 때) */
  .cert-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 4-col 그리드 강제 — 라벨 작게, 3개 인증 동등 */
  .cert-table-row {
    grid-template-columns: 0.85fr 1fr 1fr 1fr !important;
    min-height: 0 !important;
    min-width: 320px;  /* 가로 스크롤 트리거 시 최소 폭 */
  }
  /* 헤드 행 다시 보여주기 (기존 @1024에서 display: none) */
  .cert-table-row.head { display: grid !important; }
  .cert-table-row.head .cert-table-cell {
    font-size: 9.5px !important;
    padding: 10px 6px !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
  }
  /* 셀 — 컴팩트 + 가독 */
  .cert-table-cell {
    padding: 10px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    display: block !important;
  }
  .cert-table-cell:last-child { border-right: none !important; }
  /* 라벨 셀 — 좌측 정렬 + 화살표 제거 */
  .cert-table-cell.label {
    text-align: left !important;
    font-size: 10px !important;
    padding-left: 8px !important;
  }
  .cert-table-cell.label::after { content: '' !important; }
  /* 별표 사이즈 */
  .cert-table-cell .stars { font-size: 11px; letter-spacing: 0.05em; }
}
@media (max-width: 480px) {
  /* 480에서 더 컴팩트 (393pt iPhone 17 Pro 대응) */
  .cert-table-row { grid-template-columns: 0.7fr 1fr 1fr 1fr !important; }
  .cert-table-cell { padding: 8px 4px !important; font-size: 9.5px !important; line-height: 1.4 !important; }
  .cert-table-cell.label { font-size: 9px !important; padding-left: 6px !important; }
  .cert-table-row.head .cert-table-cell { font-size: 8.5px !important; padding: 8px 3px !important; letter-spacing: 0.02em !important; }
}

/* ==========================================================
   2026-05-08 PDP 카드 모바일 압축 (사용자 요청)
   - 데스크톱(>720) 변경 없음 — @media 안에서만
   - 인증 패키지 3카드(벤처/이노비즈/메인비즈)가 모바일에서 너무 큼
   ========================================================== */
@media (max-width: 720px) {
  /* 카드 외곽 — padding 절반 + gap 축소 */
  .pdp-grid { gap: 14px !important; margin-top: 36px !important; }
  .pdp-card {
    padding: 24px 18px 18px !important;
    border-radius: 8px;
  }

  /* 헤더 영역 — eyebrow / name / tagline 축소 */
  .pdp-tier-badge {
    right: 14px !important;
    padding: 4px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }
  .pdp-eyebrow { font-size: 9.5px !important; letter-spacing: 0.22em !important; margin-bottom: 10px !important; }
  .pdp-name { font-size: 18px !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
  .pdp-tagline { font-size: 12.5px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }

  /* 핵심 혜택 / 패키지 구성 라벨 + 리스트 — 폰트 1단계 축소 */
  .pdp-section-label { font-size: 9.5px !important; letter-spacing: 0.18em !important; margin-bottom: 8px !important; }
  .pdp-perks { margin: 14px 0 !important; padding: 14px 0 !important; gap: 7px !important; }
  .pdp-perks li { font-size: 12px !important; padding-left: 18px !important; line-height: 1.5 !important; }
  .pdp-perks li::before { font-size: 11px !important; }
  .pdp-package-list { gap: 4px !important; margin-bottom: 14px !important; }
  .pdp-package-list li { font-size: 11.5px !important; padding-left: 12px !important; line-height: 1.5 !important; }

  /* 가격 영역 — 컴팩트 */
  .pdp-pricing { padding: 14px 0 !important; gap: 10px !important; }
  .pdp-pricing-label { font-size: 9.5px !important; letter-spacing: 0.18em !important; }
  .pdp-pricing-text { font-size: 14px !important; }
  /* 인라인 스타일로 28px 적용된 할인가 → 모바일에선 22px */
  .pdp-pricing-text[style*="font-size: 28px"] { font-size: 22px !important; }
  .pdp-pricing-sub { font-size: 11px !important; margin-top: 4px !important; }

  /* 버튼 — padding/font 축소 (44px touch min은 유지) */
  .pdp-card .btn-primary,
  .pdp-card .btn-ghost {
    padding: 12px !important;
    font-size: 12.5px !important;
    min-height: 44px;
  }
}

/* iPhone SE / 좁은 Galaxy — 추가 압축 */
@media (max-width: 480px) {
  .pdp-card { padding: 20px 14px 14px !important; }
  .pdp-name { font-size: 17px !important; }
  .pdp-tagline { font-size: 12px !important; margin-bottom: 12px !important; }
  .pdp-perks { margin: 12px 0 !important; padding: 12px 0 !important; gap: 6px !important; }
  .pdp-perks li { font-size: 11.5px !important; padding-left: 16px !important; }
  .pdp-package-list li { font-size: 11px !important; }
  .pdp-pricing-text[style*="font-size: 28px"] { font-size: 20px !important; }
  .pdp-card .btn-primary,
  .pdp-card .btn-ghost { padding: 11px !important; font-size: 12px !important; }
}

/* ==========================================================
   2026-05-08 e-product 쇼핑몰 카탈로그 — 사용자 요청
   "카테고리 + 네모 직사각형 카드 → 클릭 시 상세 페이지"
   ========================================================== */

/* Hero — 단순 중앙 정렬 (PDP 격식 제거) */
.shop-hero {
  padding: clamp(96px, 14vw, 160px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 80px);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.shop-hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.shop-hero-eyebrow::before, .shop-hero-eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}
.shop-hero h1 {
  font-size: clamp(28px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 20px;
  word-break: keep-all;
}
.shop-hero h1 .accent { color: var(--accent); }
.shop-hero p {
  font-size: clamp(14.5px, 1.4vw, 17px);
  color: var(--text-muted);
  line-height: 1.7;
  word-break: keep-all;
  max-width: 640px;
  margin: 0 auto;
}

/* Category section — 카테고리별 헤더 + 그리드 */
.shop-category {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
  max-width: 1280px;
  margin: 0 auto;
}
.shop-category + .shop-category {
  border-top: 1px solid var(--border);
}
.shop-category-head {
  margin-bottom: clamp(28px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.shop-category-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.shop-category-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.shop-category h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 8px;
  color: var(--text);
}
.shop-category-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  word-break: keep-all;
}
.shop-category-count {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 직사각형 카드 그리드 */
.ebook-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* 단일 카드 — 직사각형 비율 (커버 + 본문) */
.ebook-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
}
.ebook-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.ebook-card.disabled {
  cursor: pointer; /* still clickable for modal */
}
.ebook-card.disabled:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* Cover (상단 비주얼 — 책 표지 비율 3:4) */
.ebook-card-cover {
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--bg-card)), var(--bg-card-hover));
  border-bottom: 1px solid var(--border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ebook-card-cover::after {
  /* 좌측 골드 사이드 밴드 — 책 등 느낌 */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.ebook-card.disabled .ebook-card-cover {
  background:
    linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  opacity: 0.78;
}
.ebook-card.disabled .ebook-card-cover::after {
  background: var(--text-dim);
}
.ebook-card-cover-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.ebook-card-cover-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.25;
  word-break: keep-all;
}
.ebook-card.disabled .ebook-card-cover-title {
  color: var(--text-muted);
}
.ebook-card-cover-foot {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Body (하단 본문 — 제목 + 메타 + 액션) */
.ebook-card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.ebook-card-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.35;
  word-break: keep-all;
}
.ebook-card-meta {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ebook-card-meta .price {
  color: var(--accent);
  font-weight: 700;
}
.ebook-card-meta .strike {
  text-decoration: line-through;
  color: var(--text-dim);
  font-size: 12px;
  margin-right: 6px;
}
.ebook-card-action {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.ebook-card:hover .ebook-card-action { gap: 10px; }
.ebook-card.disabled .ebook-card-action { color: var(--text-muted); }

/* 모바일 — grid 컬럼 수 명시 (auto-fill 보다 정확) */
@media (max-width: 720px) {
  .ebook-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .ebook-card-cover { padding: 18px 16px; }
  .ebook-card-cover-title { font-size: 16px; }
  .ebook-card-body { padding: 14px 16px; gap: 6px; }
  .ebook-card-title { font-size: 14px; }
  .ebook-card-meta { font-size: 11.5px; }
  .ebook-card-action { font-size: 11.5px; padding-top: 10px; }
  .shop-category-head { gap: 12px; }
  .shop-category-count { font-size: 11px; }
}
@media (max-width: 480px) {
  .ebook-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ebook-card-cover { padding: 14px 12px; }
  .ebook-card-cover-tag { font-size: 9px; letter-spacing: 0.16em; }
  .ebook-card-cover-title { font-size: 14px; }
  .ebook-card-cover-foot { font-size: 9px; }
  .ebook-card-body { padding: 12px 12px; }
  .ebook-card-title { font-size: 13px; }
  .ebook-card-meta { font-size: 11px; }
  .ebook-card-action { font-size: 11px; }
}

/* ==========================================================
   2026-05-08 signup 가입 인센티브 배너 (P2 #10)
   회원가입 시 정책자금 e-book 5,000원 할인 쿠폰
   ========================================================== */
.signup-incentive {
  margin: 20px 0 24px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.signup-incentive::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.signup-incentive-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}
.signup-incentive-body {
  flex: 1 1 auto;
  min-width: 0;
}
.signup-incentive-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.signup-incentive-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  word-break: keep-all;
}
.signup-incentive-text strong {
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 480px) {
  .signup-incentive { padding: 14px 16px; gap: 12px; }
  .signup-incentive-icon { width: 32px; height: 32px; font-size: 16px; }
  .signup-incentive-text { font-size: 12.5px; }
}