/* Checku 정적 페이지 공통 스타일 — checku.net
 *
 * Sections:
 *   1. Tokens (CSS vars)
 *   2. Base (html/body/typography)
 *   3. Shared layout (header / footer / container — privacy/terms/account-deletion 공용)
 *   4. Landing only (body.landing 스코프 — hero, feature 섹션, grid, CTA)
 *   5. Responsive (≤768px)
 */

:root {
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --brand:     #dc2626;
  --brand-700: #991b1b;
  --brand-50:  #fef2f2;
  --self-50:   #fefce8;
  --self-500:  #facc15;
  --surface:   #fafafa;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.10);
  --shadow-phone: 0 20px 40px -16px rgba(15,23,42,0.25), 0 8px 16px -8px rgba(15,23,42,0.15);
  --radius-card: 16px;
  --radius-phone: 32px;
}

/* ===== 2. Base ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  color: var(--slate-900);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ===== 3. Shared header / footer / container — 기존 privacy/terms 호환 유지 ===== */
header.site {
  border-bottom: none;
  padding: 10px 20px;
  background: rgba(255,255,255,0.78);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 28px -18px rgba(15, 23, 42, 0.12);
}
header.site .inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.site a.logo {
  font-weight: 800;
  color: var(--slate-900);
  font-size: 24px;
  text-decoration: none;
  letter-spacing: -0.5px;
}
header.site nav { display: inline-flex; align-items: center; gap: 8px; }
header.site nav a {
  font-size: 14px;
  color: var(--slate-600);
  text-decoration: none;
}
header.site nav a:hover { color: var(--slate-900); }
header.site nav a.nav-link {
  font-weight: 600;
  padding: 10px 14px;
  color: var(--slate-700);
  border-radius: 999px;
  transition: background 0.15s ease;
}
header.site nav a.nav-link:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
header.site nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--slate-100);
  color: var(--slate-900);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
  transition: background 0.15s ease, transform 0.15s ease;
}
header.site nav a.nav-cta:hover {
  background: var(--slate-200);
  color: var(--slate-900);
}
header.site nav a.nav-cta svg { transition: transform 0.18s ease; }
header.site nav a.nav-cta:hover svg { transform: translateX(2px); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* privacy/terms 용 — body는 .landing 없을 때 */
body:not(.landing) h1 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
body:not(.landing) .subtitle {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0 0 24px;
}
body:not(.landing) h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 32px 0 10px;
  color: var(--slate-900);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--slate-200);
}
body:not(.landing) p,
body:not(.landing) .body {
  font-size: 14.5px;
  color: var(--slate-700);
  margin: 8px 0;
  white-space: pre-line;
}
.note {
  background: var(--slate-50);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: var(--slate-600);
  margin-top: 36px;
}
footer.site {
  border-top: 1px solid var(--slate-200);
  padding: 32px 20px 48px;
  margin-top: 0;
  background: #ffffff;
}
footer.site .inner {
  max-width: 1120px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.85;
}
footer.site a {
  color: var(--slate-500);
  text-decoration: none;
  margin-right: 16px;
}
footer.site a:hover { color: var(--slate-900); }
.footer-meta {
  display: inline-block;
  margin-top: 8px;
  color: var(--slate-400);
  font-size: 12px;
}

/* ===== Scroll reveal — viewport 진입 시 fade-up ===== */
.landing .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.landing .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Grid 6 tiles — stagger */
.landing .features-grid .tile.reveal:nth-child(2) { transition-delay: 0.08s; }
.landing .features-grid .tile.reveal:nth-child(3) { transition-delay: 0.16s; }
.landing .features-grid .tile.reveal:nth-child(4) { transition-delay: 0.10s; }
.landing .features-grid .tile.reveal:nth-child(5) { transition-delay: 0.18s; }
.landing .features-grid .tile.reveal:nth-child(6) { transition-delay: 0.26s; }
/* Feature section — text + mockup 약간 시차 */
.landing .feature .feature-mockup.reveal { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .landing .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== 4. Landing (body.landing) ===== */

body.landing main {
  display: block;
}

/* 공통 — eyebrow / buttons */
.landing .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 16px;
}

.landing .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}
.landing .btn:active { transform: translateY(1px); }
.landing .btn-primary {
  background: var(--slate-500);
  color: #fff;
}
.landing .btn-primary:hover { background: var(--slate-600); color: #fff; }
.landing .btn-secondary {
  background: var(--slate-900);
  color: #fff;
}
.landing .btn-secondary:hover { background: var(--slate-700); }
.landing .btn-disabled {
  background: var(--slate-100);
  color: var(--slate-500);
  cursor: not-allowed;
}

.landing .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.landing .cta-row.centered { justify-content: center; }

/* Official store badges — Apple/Google 브랜드 가이드라인 준수 (이미지 변형 금지, clear space 유지) */
.landing .store-badges {
  align-items: center;
  gap: 14px;
}
/* 사용자가 직접 다운로드한 배지 이미지 사용 (assets/google-play.png, assets/app-store.png) */
.landing .store-img-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.18s ease;
  position: relative;
  /* button 기본 스타일 리셋 (App Store 버튼) */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.landing .store-img-link:hover { transform: translateY(-2px); }
.landing .store-img {
  display: block;
  /* 이미지 원본 사이즈 그대로 */
}

/* App Store 클릭 시 토스트 */
.landing .coming-soon-toast,
body .coming-soon-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  box-shadow: 0 10px 28px -8px rgba(15,23,42,0.4);
}
.landing .coming-soon-toast.show,
body .coming-soon-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* App Store 미출시 안내 — Apple 가이드라인상 배지 시각 변형 금지. 클릭 비활성 + 라벨만 추가 */
.landing .store-badge-soon {
  cursor: default;
  pointer-events: none;
}
.landing .store-badge-soon .soon-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--slate-500);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
/* Final CTA 아래 웹 시작 보조 라인 — .cta-final p보다 specificity 높여 margin-top 적용 */
.landing .cta-final .cta-web-line {
  margin-top: 64px;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--slate-400);
}
/* Final CTA(어두운 bg)에서 배지 이미지 투명 → 배경과 자연스럽게 어울림 */
.landing .cta-final .store-img {
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.landing .cta-final .store-img-link:hover .store-img { opacity: 1; }
.landing .cta-web-line a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 3px;
}
.landing .cta-web-line a:hover { text-decoration-color: #fff; }

/* 4.1 Hero */
.landing .hero {
  background: #ffffff;
  padding: 40px 20px 0;
  overflow: hidden;
  position: relative;
}
.landing .hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 420px;   /* row 고정 → 폰이 row 너머로 overflow 되어 잘림 */
  gap: 56px;
  align-items: start;
}
.landing .hero-text {
  align-self: stretch;         /* hero 전체 높이 채우기 */
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 0;
}
/* lead 부터 auto 마진 → eyebrow+quote는 위, lead+CTA는 바닥으로 분리 */
.landing .hero-text .lead { margin-top: auto; }
.landing .hero-text h1 {
  font-size: 52px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--slate-900);
  margin: 0 0 20px;
}
.landing .hl {
  color: var(--slate-900);
  font-weight: 800;
}
.landing .lead-pre {
  color: var(--slate-900);
  font-weight: 700;
  font-size: 1.05em;
}

/* Rotating context — two separate slate pills (누구 / 언제) */
.landing .hero-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.landing .hero-context.fading {
  opacity: 0;
  transform: translateY(-4px);
}
.landing .ctx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  padding: 9px 18px;
  border-radius: 999px;
  line-height: 1.2;
}
.landing .ctx-who {
  background: var(--slate-200);
  color: var(--slate-900);
}
.landing .ctx-when {
  background: var(--slate-100);
  color: var(--slate-600);
}
.landing .ctx-when::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--slate-400);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Rotating big quote h1 */
.landing .hero-quote {
  font-size: 52px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--slate-900);
  margin: 0 0 28px;
  min-height: 2.4em;   /* 1~2 lines stable */
  display: flex;
  align-items: flex-start;
  gap: 4px;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.landing .hero-quote.fading {
  opacity: 0;
  transform: translateY(8px);
}
.landing .hero-quote .quote-mark {
  font-family: 'Pretendard', serif;
  color: var(--slate-900);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.landing .hero-quote .quote-mark.left { margin-right: 2px; }
.landing .hero-quote .quote-mark.right { margin-left: 2px; }

.landing .hero-text .lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-600);
  margin-top: auto;        /* eyebrow+quote는 위 / lead+CTA는 row 바닥으로 분리 */
  margin-bottom: 32px;
  font-weight: 400;
}
.landing .hero-meta {
  margin-top: 24px;
  font-size: 13px;
  color: var(--slate-400);
}
.landing .hero-mockup {
  display: flex;
  justify-content: flex-end;   /* 폰을 오른쪽 끝으로 정렬 */
  align-items: flex-start;     /* 폰을 row 상단부터 시작 — 779px 폰이 row를 넘어 자연 overflow */
}
.landing .hero-mockup .phone {
  transform: none;             /* 회전 제거 */
}
.landing .hero-mockup .phone:hover { transform: none; }
.landing .hero-mockup .phone img { width: 360px; }

/* Phone mockup — prototype의 .frame이 이미 완전한 폰 (bg-black + rounded-[44px] + notch).
 * .phone wrapper는 그림자·회전·hover만 담당 (베젤·라운드 없음). */
.landing .phone {
  display: inline-block;
  filter: drop-shadow(0 18px 36px rgba(15,23,42,0.14)) drop-shadow(0 4px 10px rgba(15,23,42,0.06));
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
  line-height: 0;
}
.landing .phone:hover { transform: rotate(0deg); }
.landing .phone img {
  display: block;
  width: 280px;
  height: auto;
  /* puppeteer 캡처 PNG는 .frame의 rounded-[44px] 모양으로 진짜 투명 코너. CSS border-radius 불필요. */
}
.landing .feature-mockup .phone img { width: 260px; }

/* 4.2 Hook */
.landing .hook {
  background: #ffffff;
  padding: 140px 20px;
  text-align: center;
}
.landing .hook-inner {
  max-width: 760px;
  margin: 0 auto;
}
.landing .hook-line {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.4;
  color: var(--slate-900);
  margin: 0 0 8px;
}
.landing .hook-line:last-child {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 40px;
}
.landing .hook-line.muted {
  color: var(--slate-400);
  font-weight: 600;
}
.landing .hook-line s {
  color: var(--slate-300);
  text-decoration-color: var(--slate-300);
  text-decoration-thickness: 2px;
}

/* 4.2.5 DEMO banner — animated message → 했어 → 인증샷 */
.landing .demo {
  background: linear-gradient(180deg, #ffffff 0%, var(--slate-50) 50%, #ffffff 100%);
  padding: 140px 20px 120px;
}
.landing .demo-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.landing .demo-head { margin-bottom: 48px; }
.landing .demo-head h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--slate-900);
}
.landing .demo-sub {
  font-size: 16px;
  color: var(--slate-500);
  margin: 0;
}

.landing .demo-stage {
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  padding: 36px 32px 40px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 24px 48px -16px rgba(15,23,42,0.15);
  max-width: 560px;
  margin: 0 auto;
}

/* 3-step rail */
.landing .demo-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 32px;
}
.landing .rail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-400);
  letter-spacing: -0.2px;
  transition: color 0.35s ease;
  white-space: nowrap;
}
.landing .rail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate-200);
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.landing .rail-line {
  flex: 1;
  height: 2px;
  background: var(--slate-200);
  border-radius: 2px;
}
.landing .demo-stage[data-step="1"] .rail-step[data-step="1"],
.landing .demo-stage[data-step="2"] .rail-step[data-step="1"],
.landing .demo-stage[data-step="2"] .rail-step[data-step="2"],
.landing .demo-stage[data-step="3"] .rail-step { color: var(--slate-900); }

.landing .demo-stage[data-step="1"] .rail-step[data-step="1"] .rail-dot,
.landing .demo-stage[data-step="2"] .rail-step[data-step="1"] .rail-dot,
.landing .demo-stage[data-step="2"] .rail-step[data-step="2"] .rail-dot,
.landing .demo-stage[data-step="3"] .rail-step .rail-dot {
  background: var(--slate-900);
  box-shadow: 0 0 0 4px var(--slate-100);
}
.landing .demo-stage[data-step="2"] .rail-step[data-step="2"] .rail-dot,
.landing .demo-stage[data-step="3"] .rail-step[data-step="3"] .rail-dot {
  transform: scale(1.2);
}

/* The big card — height fixed, proof는 absolute overlay로 카드 크기 안 변함 */
.landing .demo-card {
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--slate-100);
  border-radius: 20px;
  padding: 22px 22px 20px;
  transition: transform 0.4s ease;
  position: relative;
  min-height: 220px;
}

.landing .demo-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.landing .demo-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-700);
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.landing .demo-from-block { flex: 1; min-width: 0; }
.landing .demo-from {
  font-size: 13px;
  margin: 0;
  color: var(--slate-700);
  line-height: 1.3;
}
.landing .demo-from b { color: var(--slate-900); }
.landing .demo-sub-from { color: var(--slate-500); }
.landing .demo-time {
  font-size: 11px;
  color: var(--slate-400);
  margin: 2px 0 0;
}
.landing .demo-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-600);
  flex-shrink: 0;
}

.landing .demo-msg {
  font-size: 22px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 20px;
  line-height: 1.4;
  letter-spacing: -0.4px;
}

.landing .demo-actions {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
}
.landing .demo-actions button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 8px;
  border-radius: 12px;
  border: 0;
  cursor: default;
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
/* Step 1 (메시지 도착): 3 버튼 모두 동일 회색, 했어 빨강 아님 */
.landing .da-done,
.landing .da-gray {
  background: var(--slate-100);
  color: var(--slate-500);
  box-shadow: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.25s ease, transform 0.18s ease;
}

/* Step 2 + Step 3 (확인 버튼·인증샷): da-done 빨강 + ripple */
.landing .demo-stage[data-step="2"] .da-done,
.landing .demo-stage[data-step="3"] .da-done {
  background: var(--brand);
  color: #ffffff;
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 6px 16px -4px rgba(220,38,38,0.45), 0 0 0 6px rgba(220,38,38,0.10);
  animation: daTap 0.5s ease-out;
}
@keyframes daTap {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(1px) scale(0.94); box-shadow: 0 4px 12px -4px rgba(220,38,38,0.5), 0 0 0 10px rgba(220,38,38,0.18); }
  100% { transform: translateY(1px) scale(0.97); box-shadow: 0 6px 16px -4px rgba(220,38,38,0.45), 0 0 0 6px rgba(220,38,38,0.10); }
}

/* Proof reveal — Option A: 사진 카드 미리보기 (dim overlay 위 흰 카드) */
.landing .demo-proof {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.landing .demo-stage[data-step="3"] .demo-proof {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

/* ============================================
   Option D (BACKUP — 카드 콘텐츠 대체):
   .demo-proof { position: absolute; inset: 22px 22px 20px; top: 76px; background: #fff;
     border-radius: 14px; flex-direction: column; }
   step 3: .demo-msg, .demo-actions { opacity: 0 } (페이드 아웃)
   .proof-photo-big { gradient block, flex:1 } / .proof-status { ✓ + text }
   ============================================ */
/* ============================================
   Option C (BACKUP — 스탬프 도장):
   .demo-proof { inset:0; background: rgba(15,23,42,0.18); flex-direction: column; }
   .proof-stamp { 110x110 brand red circle + ✓ + rotate(-12deg) + 흰 5px 테두리 }
   .proof-stamp-label { 흰 pill, brand color, rotate(-3deg) }
   @keyframes stampIn: 0% rotate(-30deg) scale(2.2) → 60% scale(0.92) → 100% rotate(-12deg) scale(1)
   ============================================ */
/* Proof Option A — 흰 카드 + 사진 placeholder + 텍스트 */
.landing .proof-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 22px 16px;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,0.30), 0 2px 6px rgba(15,23,42,0.12);
  text-align: center;
  min-width: 200px;
  max-width: 80%;
}
/* step 3 진입 시에만 pop-in 애니메이션 → swap 시 재트리거 없음 */
.landing .demo-stage[data-step="3"] .proof-card {
  animation: proofIn 0.4s ease-out;
}
@keyframes proofIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.landing .proof-photo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.landing .proof-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.landing .proof-sub {
  font-size: 12px;
  color: var(--slate-500);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}
.landing .proof-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Fade between examples — proof도 한 번에 사라지도록 */
.landing .demo-stage.swapping .demo-card {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.landing .demo-stage.swapping .demo-proof {
  opacity: 0;
  transition: opacity 0.18s ease;
}
/* swap 중 da-done을 미리 slate로 → 다음 사이클 step 1에서 빨강 깜박임 방지 */
.landing .demo-stage.swapping .da-done {
  background: var(--slate-100) !important;
  color: var(--slate-500) !important;
  transform: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Chips below */
.landing .demo-chips-label {
  margin-top: 40px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.landing .demo-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.landing .demo-chips li {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 8px 14px 8px 6px;
  font-size: 13px;
  color: var(--slate-700);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}
.landing .dc-from {
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

/* 4.3 Feature sections */
.landing .feature {
  padding: 140px 20px 0;       /* 섹션 상단 여유 더 시원하게 */
  background: #ffffff;
  overflow: hidden;
}
.landing .feature.alt-bg {
  background: var(--slate-50);
}
.landing .feature-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 340px;   /* row 고정 → 폰이 row를 넘어 잘림 (약 절반 가시) */
  gap: 64px;
  align-items: center;
  padding-bottom: 0;
}
.landing .feature.reverse .feature-inner {
  direction: rtl;
}
.landing .feature.reverse .feature-inner > * {
  direction: ltr;
}
.landing .feature-text h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--slate-900);
}
.landing .feature-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-600);
  margin: 0 0 24px;
}
.landing .bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.landing .bullets li {
  font-size: 15px;
  color: var(--slate-700);
  padding: 8px 0 8px 28px;
  position: relative;
}
.landing .bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 18px; height: 18px;
  background: var(--slate-100);
  border-radius: 50%;
}
.landing .bullets li::after {
  content: '';
  position: absolute;
  left: 5px; top: 19px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--slate-700);
  border-bottom: 2px solid var(--slate-700);
  transform: rotate(-45deg);
}
.landing .feature-mockup {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: start;
  margin-top: 32px;            /* 텍스트 상단과 딱 맞추지 않고 status bar 높이만큼 아래로 */
}
.landing .feature-mockup .phone {
  transform: none;             /* 회전 제거 */
  filter: none;                /* 베젤 없는 screen이라 drop-shadow 대신 img box-shadow 사용 */
}
.landing .feature-mockup .phone:hover { transform: none; }
.landing .feature-mockup .phone { width: 90%; }
.landing .feature-mockup .phone img {
  width: 100%;                 /* .phone (90%) 안에서 가득 → 결과적으로 column의 90% */
  height: 342px;               /* 380 × 0.9 ≈ 342 */
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 20px 48px -16px rgba(15,23,42,0.22);
  border: 1px solid var(--slate-100);
}
/* TOGETHER 섹션: 그룹 응답 화면 — 위쪽 더 잘리고 멤버 리스트(체크 아이콘) 노출 */
.landing .feature-mockup .phone img.group-cap {
  object-position: center 56%;
}

/* CHECK 섹션: 왼쪽 정렬 + row 바닥 정렬 (하단선=row 바닥, 상단=H2 라인) */
.landing .feature-mockup:has(img.proof-cap) {
  justify-content: flex-start;
  align-self: end;
  margin-top: 0;
}
.landing .feature-mockup .phone img.proof-cap {
  width: 90%;
  max-width: 420px;
  height: 300px;               /* row 340 - H2 시작 위치(~32~40) ≈ 300 */
  object-fit: cover;
  object-position: bottom;
  display: block;
  margin: 0;
  box-shadow: none;
  border: none;
  border-radius: 12px 12px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 95%, transparent 100%);
}

/* 4.4 Grid section */
.landing .grid-section {
  padding: 140px 20px;
  background: var(--slate-50);
}
.landing .grid-section.alt-bg { background: var(--slate-50); }
.landing .grid-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.landing .grid-head {
  text-align: center;
  margin-bottom: 48px;
}
.landing .grid-head h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0;
  color: var(--slate-900);
}
.landing .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.landing .tile {
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}
.landing .tile svg {
  color: var(--slate-700);
  margin-bottom: 16px;
}
.landing .tile h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--slate-900);
}
.landing .tile p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-500);
  margin: 0;
}

/* 4.5 Final CTA */
.landing .cta-final {
  background: var(--slate-900);
  padding: 140px 20px;
  text-align: center;
  color: #fff;
}
.landing .cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.landing .cta-final h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
}
.landing .cta-final p {
  font-size: 17px;
  color: var(--slate-400);
  margin: 0 0 32px;
}
.landing .cta-final .btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.landing .cta-final .btn-secondary:hover {
  background: rgba(255,255,255,0.2);
}

/* ===== 5. Responsive (≤ 768px) ===== */
@media (max-width: 768px) {
  /* === 헤더 === */
  header.site { padding: 8px 16px; }
  header.site a.logo { font-size: 20px; }
  header.site nav { gap: 6px; }
  header.site nav a.nav-link { padding: 8px 10px; font-size: 13px; }
  header.site nav a.nav-cta { padding: 8px 12px; font-size: 13px; }

  /* === Hero === */
  .landing .hero { padding: 40px 20px 32px; }
  .landing .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;       /* 데스크탑 420px 행 풀기 */
    gap: 32px;
    min-height: 0;
    align-items: stretch;
  }
  .landing .hero-text {
    align-self: auto;
    display: block;                  /* 데스크탑 flex column 풀기 */
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
  }
  .landing .hero-text .lead { margin-top: 20px; }
  .landing .hero-context { gap: 6px; margin-bottom: 16px; }
  .landing .ctx-pill { padding: 7px 14px; font-size: 13px; }
  .landing .hero { padding-bottom: 0; overflow: hidden; }
  .landing .hero-mockup {
    margin-top: 0;
    justify-content: center;
    align-items: flex-start;
    max-height: 420px;
    overflow: hidden;
  }
  .landing .hero-mockup .phone img { width: 280px; }
  .landing .hero-quote .quote-mark { font-size: 0.9em; }
  .landing .hero-text h1 { font-size: 38px; letter-spacing: -1px; }
  .landing .hero-quote { font-size: 32px; letter-spacing: -0.8px; min-height: 3em; }
  .landing .hero-context { font-size: 12px; }
  .landing .hero-text .lead { font-size: 15px; }
  .landing .cta-row { justify-content: center; }

  .landing .hook { padding: 64px 20px; }
  .landing .hook-line { font-size: 22px; line-height: 1.45; }
  .landing .hook-line:last-child { font-size: 26px; margin-top: 20px; }

  .landing .demo { padding: 64px 20px; }
  .landing .demo-head { margin-bottom: 32px; }
  .landing .demo-head h2 { font-size: 28px; }
  .landing .demo-stage { padding: 24px 20px 28px; border-radius: 22px; }
  .landing .demo-rail { gap: 4px; margin-bottom: 22px; }
  .landing .rail-step { font-size: 10px; gap: 5px; }
  .landing .rail-dot { width: 8px; height: 8px; }
  .landing .demo-card { padding: 18px 16px; }
  .landing .demo-msg { font-size: 18px; }
  .landing .demo-actions button { font-size: 13px; padding: 11px 6px; }
  .landing .demo-chips li { font-size: 12px; padding: 6px 12px 6px 5px; }

  /* === Feature 섹션 === */
  .landing .feature { padding: 64px 20px 0; overflow: hidden; }   /* 폰 바닥 잘리도록 overflow hidden */
  .landing .feature-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;        /* 데스크탑 340px row 풀기 */
    gap: 28px;
    text-align: left;
    padding-bottom: 0;
  }
  .landing .feature.reverse .feature-inner { direction: ltr; }
  .landing .feature-mockup {
    order: 2;                          /* 텍스트 → 이미지 순서로 */
    align-items: flex-start;
    align-self: auto;
    margin-top: 8px;
    margin-bottom: 0;
    justify-content: center;
    max-height: 280px;                 /* 폰 상단만 보이게 (데스크탑과 동일 효과) */
    overflow: hidden;
  }
  .landing .feature-mockup .phone img { width: auto; max-width: 100%; height: auto; }
  /* CHECK 섹션 proof-cap 이미지 모바일 사이즈 */
  .landing .feature-mockup .phone img.proof-cap {
    width: 100%;
    max-width: 360px;
    height: 240px;
    border-radius: 8px;
  }
  /* TOGETHER 섹션 group-cap — 멤버 리스트/체크 영역이 보이도록 object-position 적용 */
  .landing .feature-mockup .phone img.group-cap {
    width: 100%;
    max-width: 360px;
    height: 280px;
    object-fit: cover;
    object-position: center 65%;
    border-radius: 8px;
  }
  .landing .feature-text h2 { font-size: 28px; line-height: 1.25; }
  .landing .feature-text p { font-size: 15px; }
  .landing .bullets li { font-size: 14px; }

  /* === Grid 6 tiles === */
  .landing .grid-section { padding: 64px 20px; }
  .landing .grid-head h2 { font-size: 28px; }
  .landing .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .landing .tile { padding: 22px 20px; }

  /* === Final CTA === */
  .landing .cta-final { padding: 64px 20px; }
  .landing .cta-final h2 { font-size: 26px; }
  .landing .cta-final p { font-size: 15px; }
  .landing .cta-final .cta-web-line { margin-top: 40px; font-size: 13px; }

  /* === 폰 mockup 공통 (hero·feature 외 일반) === */
  .landing .phone img { width: 240px; }

  /* === 스토어 배지 — 모바일에서 좁은 화면 대응 */
  .landing .cta-row { gap: 10px; flex-wrap: wrap; }
  .landing .store-img { max-width: 100%; height: auto; }

  /* === Coming soon 토스트 === */
  .coming-soon-toast { bottom: 24px; padding: 12px 18px; font-size: 13px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .landing .features-grid { grid-template-columns: repeat(2, 1fr); }
  .landing .hero-text h1 { font-size: 44px; }
  .landing .hero-quote { font-size: 42px; }
}

/* prefers-reduced-motion: 애니메이션 줄임 */
@media (prefers-reduced-motion: reduce) {
  .landing .demo-stage .demo-card,
  .landing .demo-stage .demo-proof,
  .landing .demo-stage .da-done,
  .landing .rail-step,
  .landing .rail-dot {
    transition: none !important;
    animation: none !important;
  }
}