/* ============================================================
   숨트레이너 랜딩 — main.css
   상위: tokens.css (디자인 토큰 + a11y + base reset)
   문서: /DESIGN_SYSTEM.md (프로젝트 루트)
   ============================================================ */

/* ============================================================
   Hero §1 — 정적 master 이미지 단독 (overlay·모션 X)
   ============================================================ */

/* Hero Mast — 13px 브랜드 식별 노안 가독 */
.hero-mast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--text-2);
  white-space: nowrap;
  font-size: var(--t-caption);        /* 13px — 노안 가독 */
}
.hero-mast__brand {
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.04em;
}
.hero-mast__sep { color: var(--text-3); }
.hero-mast__role {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
/* mast 자체가 홈 링크일 때 underline 제거 + hover transition */
.hero-mast--link {
  text-decoration: none;
  transition: opacity 200ms var(--ease);
}
.hero-mast--link:hover { opacity: 0.85; }
.hero-mast--link:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Hero shared */
.hero {
  position: relative;
  overflow: hidden;
  /* video 로딩 전/실패 시 + reduced-motion fallback 으로 poster 표시 */
  background: url('../assets/videos/hero-poster-baseline.jpg') 68% center / cover no-repeat var(--steel-ink);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 68% center;    /* SpecRationale — 인물 우측 → 화면 안 */
  background-repeat: no-repeat;
  z-index: 0;
}
/* Hero <video> (호흡 cycle, autoplay muted loop playsinline).
   .hero__bg 와 동일 frame 점유, .hero__scrim 아래(z-index 0). */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;        /* 인물 우측 정렬 — bg 와 동일 */
  z-index: 0;
  pointer-events: none;                /* 위 콘텐츠 클릭 방해 X */
}
@media (prefers-reduced-motion: reduce) {
  /* 모션 민감 사용자는 정적 poster 만 노출 */
  .hero__video { display: none; }
}

/* Film grain overlay (inline SVG feTurbulence).
   1080p 영상의 stretch blur 를 noise pattern 으로 가림 (perceived sharpness ↑).
   §2 시나리오 silhouette 의 'fine silver film grain' 컨셉과 일관.
   scrim(z 1) 위에 얹어서 영상 전체에 grain texture. body(z 4+) 아래.
   pointer-events none — 클릭 방해 0. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.85 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  opacity: 0.22;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { opacity: 0.14; }
}

/* Mobile Hero */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    min-height: 100vh;
    padding: 28px var(--sp-xxl) var(--sp-xxxl);
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(19,20,24, 0.55) 0%,
      rgba(19,20,24, 0.20) 22%,
      rgba(19,20,24, 0.20) 42%,
      rgba(19,20,24, 0.72) 78%,
      rgba(19,20,24, 0.92) 100%);
    pointer-events: none;
  }
  .hero__mast { position: absolute; top: 28px; left: 24px; z-index: 5; }
  .hero__body {
    position: absolute;
    inset: auto 24px calc(32px + env(safe-area-inset-bottom)) 24px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
  }
  .hero__h2 {
    font-size: var(--t-sub);          /* 15px */
    font-weight: 500;
    color: var(--text-2);
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin: var(--sp-xs) 0 -2px;
  }
  .hero__h1 {
    font-size: var(--t-hero-web-m);   /* 38px */
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.18;
    letter-spacing: -0.035em;
    margin: 0;
  }
  .hero__mini {
    font-size: var(--t-mini);         /* 12px */
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
  }
  .hero__nav { display: none; }       /* 모바일 nav 비노출 */
  .hero__scrollhint { display: none; }
}

/* Desktop Hero */
@media (min-width: 769px) {
  .hero {
    min-height: 900px;
    padding: var(--sp-xxxl) var(--sp-chapter) var(--sp-chapter);
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(19,20,24, 0.86) 0%,
        rgba(19,20,24, 0.62) 32%,
        rgba(19,20,24, 0.18) 55%,
        rgba(19,20,24, 0.05) 75%,
        rgba(19,20,24, 0.10) 100%),
      linear-gradient(180deg,
        rgba(19,20,24, 0.42) 0%,
        rgba(19,20,24, 0.0) 18%,
        rgba(19,20,24, 0.0) 70%,
        rgba(19,20,24, 0.45) 100%);
    pointer-events: none;
  }
  /* Desktop hero nav — pill rail
     · subtle hairline + tinted bg 로 link list 묶어 visual weight 생성
     · underline-on-hover micro-interaction (좌→우 grow)
     · 내부/외부 link 차등: 외부는 hover 시 accent-gold dim underline
     · separator (li.hero__navlinks-sep) 로 사이트 내(증상/기능/인사이트) vs 외부(스토어) vs 메타(FAQ) 위계 */
  .hero__nav {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xxl);
    margin-bottom: var(--sp-mega);
  }
  .hero__navlinks {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--sp-xs) 6px;
    font-size: var(--t-caption);       /* 13px — hero 영상 톤에 맞게 가벼움 */
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: -0.005em;
    background: rgba(19, 20, 24, 0.42);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
  .hero__navlinks li { display: inline-flex; }
  .hero__navlinks a {
    position: relative;
    display: inline-block;
    padding: 6px var(--sp-md);
    border-radius: 999px;
    color: var(--text-2);
    transition: color 200ms var(--ease), background 200ms var(--ease);
  }
  .hero__navlinks a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms var(--ease);
    opacity: 0.5;
  }
  .hero__navlinks a:hover,
  .hero__navlinks a:focus-visible { color: var(--text-1); }
  .hero__navlinks a:hover::after,
  .hero__navlinks a:focus-visible::after { transform: scaleX(1); }
  .hero__navlinks a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
  }
  /* 외부 링크 차등 — hover 시 accent-gold dim underline (subtle "외부" 신호) */
  .hero__navlinks--ext:hover::after,
  .hero__navlinks--ext:focus-visible::after {
    background: var(--accent-gold);
    opacity: 0.7;
  }
  /* Separator — 사이트 내 vs 외부/메타 그룹 분리 (얇은 vertical hairline) */
  .hero__navlinks-sep {
    width: 1px;
    height: 12px;
    background: var(--hairline-2);
    margin: 0 var(--sp-xs);
  }
  .hero__body {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 600px;
    margin-top: var(--sp-mega);
  }
  .hero__h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-2);
    line-height: 1.55;
    letter-spacing: -0.01em;
  }
  .hero__h1 {
    font-size: var(--t-hero-web-d);   /* 88px */
    font-weight: 800;
    color: var(--text-1);             /* gradient 폐기, 단색 */
    line-height: 1.06;
    letter-spacing: -0.04em;
  }
  .hero__lede {
    font-size: 17px;
    color: var(--text-3);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.005em;
    max-width: 30ch;
  }
  .hero__cta {
    margin-top: var(--sp-card);
    display: flex;
    flex-direction: column;
    gap: var(--sp-card);
  }
  .hero__mini {
    font-size: var(--t-caption);      /* 13px */
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .hero__scrollhint {                 /* 아이콘 only 단순화 */
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    animation: scrollHintBob 2s var(--ease) infinite;
  }
  @keyframes scrollHintBob {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50%      { transform: translate(-50%, 6px); opacity: 1; }
  }
}

/* ============================================================
   Section 공통 — §2-§5 골격
   ============================================================ */
.section {
  position: relative;
  isolation: isolate;
  background: var(--bg-page);
}
@media (max-width: 768px) {
  .section { padding: 56px 24px; }
}
@media (min-width: 769px) {
  .section { padding: var(--sp-section) var(--sp-section); }
  .section__inner { max-width: 1248px; margin: 0 auto; }
  /* §5 (FAQ) padding-top 축소 — §4 후기 → §5 사이 빈 공백 회피 */
  #faq.section { padding-top: 64px; }
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-card);
  margin-bottom: var(--sp-xxxl);
}
@media (min-width: 769px) {
  .section__head { margin-bottom: var(--sp-jumbo); }
}

/* §4 master head: eyebrow → H2 → 짧은 부제 위계 강화 */
.section__head--mechanism {
  gap: var(--sp-lg);
}
@media (min-width: 769px) {
  .section__head--mechanism { gap: var(--sp-xl); margin-bottom: var(--sp-xxxl); }
}

.section__h {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;                  /* 한국어 dense, 2줄 hero */
  letter-spacing: -0.032em;           /* Pretendard 한국어 보정 */
  color: var(--text-1);
}
@media (min-width: 769px) {
  .section__h { font-size: 56px; line-height: 1.08; letter-spacing: -0.038em; }
}

/* §4 H2 어절별 clip-path mask reveal.
   word 컨테이너가 overflow:hidden, 내부 span 이 translateY(110%) → 0 으로 슬라이드 업.
   .is-in-view 클래스가 부모 [data-reveal] 에 토글되면 stagger 트리거. */
.section__h--reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.section__h--reveal .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 720ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
.is-in-view .section__h--reveal .word > span { transform: translateY(0); }
.is-in-view .section__h--reveal .word:nth-child(1) > span { transition-delay:  40ms; }
.is-in-view .section__h--reveal .word:nth-child(2) > span { transition-delay: 120ms; }
.is-in-view .section__h--reveal .word:nth-child(3) > span { transition-delay: 200ms; }
.is-in-view .section__h--reveal .word:nth-child(4) > span { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .section__h--reveal .word > span { transform: none; transition: none; }
}

.section__lede {
  font-size: 16px;                    /* 노안 정책 */
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.008em;           /* 한국어 dense 미세 보정 */
  max-width: 28ch;
}
@media (min-width: 769px) {
  .section__lede { font-size: 17px; max-width: 56ch; }
}

/* 짧은 부제 변종 (§4 master): H2 직접 해설, 굵기·색 강화 */
.section__lede--strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--text-1);
  max-width: none;
}
@media (min-width: 769px) {
  .section__lede--strong { font-size: 22px; line-height: 1.4; letter-spacing: -0.02em; }
}

/* Sub-heading — section__h(32) ↔ trust__head(16) 중간 단계 */
.section__subh {
  font-size: var(--t-subh-m);         /* 22px */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;            /* 한국어 dense */
  color: var(--text-1);
  margin-bottom: var(--sp-lg);
}
@media (min-width: 769px) {
  .section__subh { font-size: var(--t-subh-d); margin-bottom: var(--sp-xxl); }
}

.section__bridge {
  /* §4 후기 → §5 사이 호흡 확보 */
  margin-top: 40px;
  padding-top: var(--sp-xxl);
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.65;
  font-weight: 500;
}
@media (min-width: 769px) {
  .section__bridge { font-size: 17px; max-width: 50ch; }
}
.section__bridge em {
  font-style: normal;
  color: var(--text-1);
  font-weight: 600;
}

/* ============================================================
   §2 Problem — 위계 (evidence + verdict)
   ------------------------------------------------------------
   진단: H2 / 4 cards / bridge 가 모두 "중·약"으로 평탄.
   해결:
     - .scenarios--evidence : 카드 → "증거 list" 톤 (배경·padding·body 축소,
       no 번호 → 카드 + body 동등 align, 4 cards 가 H2 보다 가벼워지도록)
     - .problem__verdict   : section__bridge → "결론 peak" 톤 (32/48px,
       em 강조 + underline highlight, hairline 위에 띄움) — §3 solution__h 패턴 echo.
   결과: 강(verdict) ← 중(H2 + evidence) ← 약(eyebrow)
   HTML 은 항상 .scenarios--evidence 단일로만 사용. base .scenarios 룰셋 없음.
   ============================================================ */
.scenarios--evidence {
  /* 모바일: 1-col, bleed, hairline 분리 */
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 -24px;
  background: transparent;
  border-block: 1px solid var(--hairline);
}
/* 시나리오 카드 (documentary editorial 톤)
   모바일: 좌측 96px 이미지 + 우측 번호/body (horizontal dense)
   데스크탑: 상단 정사각 이미지 + 하단 번호/body (vertical card) */
.scenarios--evidence .scenario {
  background: transparent;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-lg);
  row-gap: var(--sp-xs);
  align-items: center;
  padding: var(--sp-lg) var(--sp-xxl);
  min-height: 0;
  border-bottom: 1px solid var(--hairline);
}
.scenarios--evidence .scenario:last-child {
  border-bottom: none;
}
.scenarios--evidence .scenario__img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  background: var(--bg-card);
}
.scenarios--evidence .scenario__no {
  grid-column: 2;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);    /* 한국어 자모 분리감 회피 */
  color: var(--text-3);
  opacity: 0.7;
  font-feature-settings: "tnum";
  align-self: end;
}
.scenarios--evidence .scenario__body {
  grid-column: 2;
  grid-row: 2;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-2);
  align-self: start;
}
@media (min-width: 769px) {
  .scenarios--evidence {
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    gap: 1px;
  }
  .scenarios--evidence .scenario {
    background: rgba(28, 30, 34, 0.5);
    display: flex;
    flex-direction: column;
    padding: var(--sp-xl) var(--sp-xl) var(--sp-xxl);
    min-height: 0;
    gap: var(--sp-card);
    border-bottom: none;
  }
  .scenarios--evidence .scenario__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .scenarios--evidence .scenario__body {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* Verdict — §2 의 peak (강). §3 solution__h 와 같은 "짧은 H2 + em 명사" 패턴.
   모바일 32px → H2(56px) 보다 작지만 위치·여백·em underline 으로 visual peak 확보.
   데스크탑 48px → H2(56px) 와 비등, 우측 여백이 H2 만큼 비어 시각적 무게 동등 이상. */
.problem__verdict {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--text-1);
  max-width: none;
}
.problem__verdict em {
  font-style: normal;
  font-weight: 800;
  color: var(--text-1);
  /* 핵심 명사 강조: 하단 underline highlight (steel-mid 톤) */
  background-image: linear-gradient(transparent 64%, rgba(150, 158, 168, 0.45) 64%, rgba(150, 158, 168, 0.45) 92%, transparent 92%);
  padding: 0 2px;
}
@media (min-width: 769px) {
  .problem__verdict {
    margin-top: var(--sp-chapter);
    padding-top: 40px;
    font-size: 48px;
    line-height: 1.16;
    letter-spacing: -0.036em;
    max-width: 22ch;
  }
}

/* ============================================================
   §3 Solution + 1차 CTA
   ============================================================ */
.solution {
  text-align: center;
  padding: 64px var(--sp-xxl) 72px;
}
@media (min-width: 769px) {
  .solution { padding: 100px var(--sp-section) 120px; }
}
.solution .section__head { align-items: center; margin-bottom: var(--sp-xxl); }
/* v2.59: §2 → §3 다리 small 글씨. "악순환의 고리" §2 verdict echo. */
.solution__problem {
  margin: 0 auto var(--sp-lg);
  font-size: var(--t-detail);          /* 14px */
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-align: center;
  max-width: 28ch;
}
@media (min-width: 769px) {
  .solution__problem {
    font-size: var(--t-sub);           /* 15px */
    margin-bottom: var(--sp-xl);
    max-width: 38ch;
  }
}

.solution__h {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-1);               /* gradient 폐기, 단색 */
  text-align: center;
}
@media (min-width: 769px) {
  .solution__h { font-size: 76px; line-height: 1.05; letter-spacing: -0.04em; }
}
.solution__h em {
  font-style: normal;
  color: var(--text-1);               /* gradient 폐기, 단색 */
  font-weight: 800;
}
.solution__sub {
  font-size: 17px;
  color: var(--text-2);
  font-weight: 500;
  line-height: 1.6;
  max-width: 28ch;
  margin: var(--sp-xxl) auto 40px;
}
@media (min-width: 769px) {
  .solution__sub { font-size: 20px; max-width: 38ch; margin: 28px auto 56px; }
}
.solution__sub em {
  font-style: normal;
  color: var(--text-1);
  font-weight: 600;
}
.solution__mini {
  margin-top: 18px;
  font-size: var(--t-caption);        /* 13px */
  color: var(--text-3);
  font-weight: 500;
}

/* ============================================================
   §4 Mechanism — lede + 모드 5 + 스크린샷 3 + 신뢰 3 + 후기 8
   ============================================================ */
/* section__head 아래 분리된 도입 본문.
   부제(.section__lede--strong) ↔ 본문(.mechanism__lede) 사이 hairline divider 로 위계 명확. */
.mechanism__lede {
  font-size: var(--t-sub);            /* 15px */
  color: var(--text-3);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 32ch;
  margin-top: 28px;
  margin-bottom: 40px;
  padding-top: var(--sp-xxl);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 769px) {
  .mechanism__lede {
    font-size: 17px;
    max-width: 64ch;
    margin-top: 36px;
    margin-bottom: var(--sp-chapter);
    padding-top: 28px;
  }
}
.mechanism__lede em {
  font-style: normal;
  color: var(--text-1);
  font-weight: 600;
}

/* §4.1~§4.4 sub-section heading — chapter marker + 짧은 강한 톤.
   구조: <h3> <span tag>§ 운동 중</span> 짧은 의문/명사구 </h3>
   - tag 는 eyebrow 톤 (한 줄, 작은 폰트, letter-spacing 보정), 카테고리 명시
   - subh 본체는 §3/§5 H2 처럼 짧고 강하게 — 시선 잡기 */
.mechanism__subh {
  display: block;
  margin-top: var(--sp-chapter);
  margin-bottom: var(--sp-lg);
  padding-top: var(--sp-xxxl);
  border-top: 1px solid var(--hairline);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.024em;
  color: var(--text-1);
}
@media (min-width: 769px) {
  .mechanism__subh {
    margin-top: 88px;
    margin-bottom: var(--sp-xl);
    padding-top: 36px;
    font-size: 34px;                  /* chapter 위계 강화 */
    letter-spacing: -0.028em;
  }
}
/* §4.1 (운동 중) sub-h 는 mechanism__lede 바로 다음에 오므로 상단 여백 축소 */
.mechanism__lede + .mechanism__subh {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* v2.48: .mechanism__subh-tag (§ 모드 선택 / § 운동 중 / § 누적 등) 폐기.
   chapter divider (border-top hairline + padding-top 32 + margin-top 64) 가 이미 강력한
   chapter 분리 → § 태그는 노이즈. H3 헤딩만으로 chapter 시작 충분히 명확. */

.mechanism__sublede {
  font-size: var(--t-detail);          /* 14px */
  line-height: 1.65;
  letter-spacing: -0.008em;            /* 한국어 dense */
  color: var(--text-3);
  font-weight: 500;
  max-width: 44ch;
  margin-bottom: var(--sp-xxxl);
}
@media (min-width: 769px) {
  .mechanism__sublede { font-size: var(--t-sub); margin-bottom: 40px; }
}

/* ============================================================
   §4 앱 스크린샷 3컷
   ============================================================ */
.screens {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xxxl);
  margin-bottom: var(--sp-jumbo);
}
/* 769~1023px(태블릿 포트레이트) 에서 3-col 강제 시 device bezel 비율이 깨짐.
   1024px(데스크탑) 부터만 3-col, 그 이하는 1-col stack 유지. */
@media (min-width: 1024px) {
  /* minmax(0, 1fr) — content min-content 무시, 균등 3-col 보장 */
  .screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xxxl); margin-bottom: 64px; }
}

/* §4 모드 그리드 preview (시안 SVG 5 카드 대체) */
.modes-preview {
  text-align: center;
  margin-bottom: 56px;
}
.modes-preview__caption {
  /* device 아래 figcaption 패턴 — margin-top */
  font-size: var(--t-detail);          /* 14px */
  color: var(--text-3);
  margin-top: var(--sp-card);
  font-weight: 500;
  letter-spacing: -0.005em;
}
@media (min-width: 769px) {
  .modes-preview__caption { font-size: var(--t-sub); margin-top: 18px; }
}

/* ============================================================
   Device frame — Modern flat mockup (no punch hole, thin bezel)
   crop된 화면(1080×2180) 비율 — 상단 status bar/하단 nav 제거됨
   ============================================================ */
.device {
  position: relative;
  display: block;                          /* inline-block에서 변경 — flex 자식의 width 100% 결정성 ↑ */
  width: 100%;
  max-width: 280px;
  margin: 0 auto;                          /* .screen 내부 중앙 정렬 (align-items 보조) */
  padding: 5px;
  background: #0a0b0d;                    /* image edge 색과 통일 — 외곽 흰색 줄 회피 */
  border-radius: 44px;                    /* iPhone 15 Pro 실 corner radius 가까이 */
  box-shadow: var(--sh-device);
}
@media (min-width: 769px) {
  .device { max-width: 300px; padding: 6px; border-radius: 47px; }
}
.modes-preview .device { max-width: 320px; }
@media (min-width: 769px) {
  .modes-preview .device { max-width: 360px; }
}

.device__bezel {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  background: #0a0b0d;
  aspect-ratio: 1080 / 2280;              /* 상단 100px 여백 추가 후 새 비율 */
}
@media (min-width: 769px) {
  .device__bezel { border-radius: 41px; }
}


.device__screen {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);      /* bezel 가장자리 흰선 제거 — 양옆/위아래 2px 확장 */
  height: calc(100% + 4px);
  max-width: none;              /* tokens.css 글로벌 `img { max-width: 100% }` override — calc width 보존 */
  object-fit: cover;
}


/* ============================================================
   호흡 사이클 6-phase sequence — §4.4 ② 정밀 alternation
   12s cycle: 들숨 20% → 35% → 70% → 날숨 70% → 30% → 0% (각 2s)
   동일 cycle 안에서 캡쳐 + CSS overlay로 상단 progress bar 가림
   ============================================================ */
.device__screen--p1,
.device__screen--p2,
.device__screen--p3,
.device__screen--p4,
.device__screen--p5,
.device__screen--p6 {
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* position/inset/size는 .device__screen base에서 inherit */
}
.device__screen--p1 { animation-name: phase1; }
.device__screen--p2 { animation-name: phase2; }
.device__screen--p3 { animation-name: phase3; }
.device__screen--p4 { animation-name: phase4; }
.device__screen--p5 { animation-name: phase5; }
.device__screen--p6 { animation-name: phase6; }

/* 각 phase 13% visible (~1.56s) + 4% fade transition (~0.48s) */
@keyframes phase1 {
  0%,   13%  { opacity: 1; }     /* 0-1.56s 들숨 20% */
  17%,  96%  { opacity: 0; }
  100%       { opacity: 1; }     /* loop restart */
}
@keyframes phase2 {
  0%,   13%  { opacity: 0; }
  17%,  30%  { opacity: 1; }     /* 2-3.6s 들숨 50% */
  33%,  100% { opacity: 0; }
}
@keyframes phase3 {
  0%,   30%  { opacity: 0; }
  33%,  46%  { opacity: 1; }     /* 4-5.52s 들숨 100% */
  50%,  100% { opacity: 0; }
}
@keyframes phase4 {
  0%,   46%  { opacity: 0; }
  50%,  63%  { opacity: 1; }     /* 6-7.56s 날숨 80% (시작) */
  67%,  100% { opacity: 0; }
}
@keyframes phase5 {
  0%,   63%  { opacity: 0; }
  67%,  80%  { opacity: 1; }     /* 8-9.6s 날숨 30% (후반) */
  83%,  100% { opacity: 0; }
}
@keyframes phase6 {
  0%,   80%  { opacity: 0; }
  83%,  96%  { opacity: 1; }     /* 10-11.52s 날숨 0% (완료) */
  100%       { opacity: 0; }
}

/* 상단 진행 인디케이터 — 이미지 자체에 #0A0B0D 페인트 처리 (PIL 가공).
   CSS overlay 방식은 phase 간 cross-fade 시 색 미스매치가 보여서 폐기.
   결과: 6 phase 이미지의 y=0..320 영역이 모두 동일 색으로 통일 → 자연 페이딩. */

@media (prefers-reduced-motion: reduce) {
  .device__screen--p1,
  .device__screen--p2,
  .device__screen--p3,
  .device__screen--p4,
  .device__screen--p5,
  .device__screen--p6 { animation: none; }
  .device__screen--p2,
  .device__screen--p3,
  .device__screen--p4,
  .device__screen--p5,
  .device__screen--p6 { opacity: 0; }    /* p1 들숨 20%만 정적 표시 */
}
.screen {
  display: flex;
  flex-direction: column;
  /* align-items 기본값 stretch — flex column cross-axis(가로) 풀폭 stretch.
     align-items: center 사용 시 자식이 content-width로 축소돼 device width:100%가 0에 가깝게 결정됨. */
  gap: 10px;
  width: 100%;                    /* grid cell 풀 폭 사용 — device max-width가 실제 크기 결정 */
}
/* 직계 img만 — .device__screen (.device 내부 img)는 영향 없음 */
.screen > img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.screen figcaption {
  font-size: var(--t-detail);          /* 14px */
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
}
@media (min-width: 769px) {
  .screen figcaption { font-size: var(--t-sub); }
}
.screens-disclaimer {
  /* figcaption 침범 회피, 시각적 종결감 확보 */
  margin-top: var(--sp-lg);
  margin-bottom: 56px;
  font-size: var(--t-mini);            /* 12px */
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   §4 신뢰 3카드
   ============================================================ */
/* §4.3 evidence — editorial line list (번호 01/02/03 + 3-col 데스크탑 grid + sequential reveal).
   이전 .trusts/.trust* 박스 카드 패턴 폐기. */
.evidence {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-xxl);
  max-width: 880px;
  border-top: 1px solid var(--hairline);
}
.evidence__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--sp-card);
  row-gap: 6px;
  padding: var(--sp-xxl) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
@media (min-width: 769px) {
  .evidence__item {
    grid-template-columns: 80px 1fr 200px;
    column-gap: var(--sp-xxxl);
    padding: 30px 0;
  }
}
.evidence__num {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
  /* sequential reveal */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 540ms cubic-bezier(0.16, 0.84, 0.30, 1),
              transform 540ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
@media (min-width: 769px) { .evidence__num { font-size: 14px; } }
.evidence__main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 540ms cubic-bezier(0.16, 0.84, 0.30, 1),
              transform 540ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
@media (min-width: 769px) {
  .evidence__main { grid-column: 2; }
}
.evidence__claim {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin: 0;
}
@media (min-width: 769px) {
  .evidence__claim { font-size: 18px; }
}
.evidence__body {
  font-size: var(--t-detail);          /* 14px */
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
@media (min-width: 769px) {
  .evidence__body { font-size: var(--t-sub); max-width: 56ch; }
}
.evidence__source {
  grid-column: 2;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  font-size: var(--t-mini);            /* 12px */
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: var(--sp-xs);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 540ms cubic-bezier(0.16, 0.84, 0.30, 1),
              transform 540ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
@media (min-width: 769px) {
  .evidence__source { grid-column: 3; margin-top: 0; }
}
/* v2.48: 평소 underline 제거 → hover 시에만 accent-gold underline (hero nav 패턴 일관).
   → "왜 효과가 있나요?" 섹션 가로 라인 노이즈 해소. */
.evidence__source a {
  color: var(--text-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.evidence__source a:hover,
.evidence__source a:focus-visible {
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold-dim);
}

/* Sequential reveal — item별 num → main → source 순 stagger */
.is-in-view.evidence .evidence__item:nth-child(1) .evidence__num,
.is-in-view .evidence .evidence__item:nth-child(1) .evidence__num    { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(1) .evidence__main,
.is-in-view .evidence .evidence__item:nth-child(1) .evidence__main   { transition-delay: 220ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(1) .evidence__source,
.is-in-view .evidence .evidence__item:nth-child(1) .evidence__source { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(2) .evidence__num,
.is-in-view .evidence .evidence__item:nth-child(2) .evidence__num    { transition-delay: 280ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(2) .evidence__main,
.is-in-view .evidence .evidence__item:nth-child(2) .evidence__main   { transition-delay: 380ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(2) .evidence__source,
.is-in-view .evidence .evidence__item:nth-child(2) .evidence__source { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(3) .evidence__num,
.is-in-view .evidence .evidence__item:nth-child(3) .evidence__num    { transition-delay: 440ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(3) .evidence__main,
.is-in-view .evidence .evidence__item:nth-child(3) .evidence__main   { transition-delay: 540ms; opacity: 1; transform: translateY(0); }
.is-in-view.evidence .evidence__item:nth-child(3) .evidence__source,
.is-in-view .evidence .evidence__item:nth-child(3) .evidence__source { transition-delay: 640ms; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .evidence__num, .evidence__main, .evidence__source {
    opacity: 1; transform: none; transition: none;
  }
}

.trust-footer {
  /* §4.4 mechanism__subh chapter marker 와 중복 회피 */
  font-size: var(--t-caption);         /* 13px */
  color: var(--text-3);
  margin: var(--sp-lg) 0 var(--sp-xxl);
}
.trust-footer a { color: var(--text-2); border-bottom: 1px solid var(--hairline); }

/* ============================================================
   §4.4 후기 — 3개 curated hero quote
   · metric column + 분포 막대 폐기 (8 × 5점 = 분포가 fake 같음)
   · 3개 reviews 모두 hero quote 톤 (양 < 질)
   · §4.3 evidence (라인 list) / §4.2 coach (아바타 메시지) 와 시각 구별
   ============================================================ */
.reviews__list {
  list-style: none;
  padding: 0;
  /* ★ inline baseline 정책 — 헤딩→첫 ★ 사이 24px (§4.1~§4.3 sublede 부재 보정).
     gap 모바일 40 / 데스크탑 48 — 카드 분리감 + ★ inline baseline 빽빽함 완화 */
  margin: var(--sp-sm) 0 var(--sp-xxl);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 769px) {
  .reviews__list { max-width: 800px; gap: var(--sp-jumbo); margin-top: var(--sp-md); }
}

.review {
  margin: 0;
  padding: 0;
}

.review__quote {
  margin: 0;
  padding: 0;
}
/* ★★★★★ 별점 inline — review 시그널.
   · 작은 아이콘 (모바일 13px / 데스크탑 15px) — 톤다운
   · display:block + margin-bottom 12px (★ → 제목 페어 spacing)
   · accent-gold 색 + letter-spacing 1px (5개 분리 가독성)
   · stagger 진입 애니메이션 (transform/opacity) */
.review__stars {
  display: block;
  margin: 0 0 var(--sp-md);
  font-size: 13px;
  line-height: 1;
  color: var(--accent-gold);
  letter-spacing: 1px;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: left center;
  transition:
    opacity 720ms cubic-bezier(0.16, 0.84, 0.30, 1),
    transform 720ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
@media (min-width: 769px) {
  .review__stars { font-size: 15px; margin-bottom: 14px; }
}
.is-in-view .review__stars { opacity: 0.95; transform: translateY(0) scale(1); }
/* 3 hero quote stagger — quote별 진입 지연 */
.is-in-view .review:nth-child(1) .review__stars { transition-delay:   0ms; }
.is-in-view .review:nth-child(2) .review__stars { transition-delay: 120ms; }
.is-in-view .review:nth-child(3) .review__stars { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .review__stars { opacity: 0.95; transform: none; transition: none; }
}

.review__title {
  /* ★ inline baseline 자연, 제목→본문 동일 페어 spacing */
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
@media (min-width: 769px) {
  .review__title { font-size: 26px; margin-bottom: var(--sp-md); }
}

/* Quote 타이틀 어절별 cascade reveal.
   JS 가 [data-words] 텍스트를 .w span 으로 split. inline-block + translateY 8→0 fade. */
.review__title[data-words] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 480ms cubic-bezier(0.16, 0.84, 0.30, 1),
    transform 480ms cubic-bezier(0.16, 0.84, 0.30, 1);
}
.is-in-view .review__title[data-words] .w {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .review__title[data-words] .w { opacity: 1; transform: none; transition: none; }
}

.review__body {
  margin: 0;
  font-size: var(--t-sub);             /* 15px */
  line-height: 1.7;
  color: var(--text-1);
  /* title cascade 끝난 후 부드러운 fade in */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 540ms cubic-bezier(0.16, 0.84, 0.30, 1) 480ms,
    transform 540ms cubic-bezier(0.16, 0.84, 0.30, 1) 480ms;
}
.is-in-view .review__body { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .review__body { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 769px) {
  .review__body { font-size: 17px; line-height: 1.65; }
}

.review__cite {
  /* ★/title/body 동일 rhythm — body(line-height 1.7) → cite 13~14px (소그룹 분리) */
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-card);
  font-size: var(--t-caption);         /* 13px */
  color: var(--text-3);
  letter-spacing: -0.005em;
}
@media (min-width: 769px) {
  .review__cite { font-size: var(--t-detail); margin-top: var(--sp-lg); }
}
.review__author {
  font-weight: 600;
  color: var(--text-2);
}
.review__sep {
  color: var(--text-4);
  font-weight: 400;
}
.review__tag {
  font-weight: 500;
}
/* 베타 D+숫자 시그널: monospace + tinted → "실측 일수" 톤 */
.review__days {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2);
  padding: 2px 7px;
  background: var(--bg-tinted);
  border-radius: 99px;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* ============================================================
   §5 Objection — FAQ + Final CTA
   ============================================================ */
.faq {
  border-top: 1px solid var(--hairline);
  margin: 0 0 var(--sp-jumbo);
}
/* FAQ → final-cta 사이 빈 검은띠 축소 */
@media (min-width: 769px) { .faq { margin: 0 0 40px; } }

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

/* <button aria-expanded> 의미적 구조 */
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-xxl) 0;
  background: transparent;
  border: 0;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
@media (min-width: 769px) { .faq__btn { padding: 28px 0; } }
.faq__q {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
@media (min-width: 769px) { .faq__q { font-size: 18px; } }
.faq__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 400;
  transition: transform 300ms var(--ease), background 300ms var(--ease);
}
.faq__btn[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  background: var(--bg-tinted);
  color: var(--text-1);
}
.faq__panel {
  font-size: var(--t-detail);          /* 14px */
  line-height: 1.75;
  color: var(--text-2);
  padding: 0 56px var(--sp-xxl) 0;
  max-width: 64ch;
  display: none;
}
.faq__btn[aria-expanded="true"] + .faq__panel { display: block; }
@media (min-width: 769px) {
  .faq__panel { font-size: 16px; padding-bottom: var(--sp-xxxl); }
}
.faq__panel em {
  font-style: normal;
  color: var(--text-1);
  font-weight: 600;
}

/* Final CTA — bottom safe spacing for sticky CTA */
.final-cta {
  text-align: center;
  padding: var(--sp-jumbo) 0 var(--sp-section);                /* sticky 가림 회피 */
  border-top: 1px solid var(--hairline);
}
@media (min-width: 769px) {
  /* FAQ→cta 공백 축소 + footer 와 호흡 확보 */
  .final-cta { padding: var(--sp-jumbo) 0 64px; }
}
.final-cta__h {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-1);                /* 단색 */
  margin-bottom: var(--sp-xxxl);
}
@media (min-width: 769px) {
  .final-cta__h { font-size: 64px; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: var(--sp-jumbo); }
}
.final-cta__mini {
  margin-top: var(--sp-xl);
  font-size: var(--t-caption);         /* 13px */
  color: var(--text-3);
  font-weight: 500;
}

/* ============================================================
   Footer — 브랜드 통일, copy contrast 격상
   ============================================================ */
.footer {
  text-align: center;
  padding: var(--sp-jumbo) var(--sp-xxl) calc(48px + env(safe-area-inset-bottom));
  background: var(--steel-ink);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 769px) { .footer { padding: var(--sp-mega) var(--sp-section); } }
.footer__brand {
  font-size: var(--t-sub);             /* 15px */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-1);
  margin-bottom: 6px;
}
.footer__tag {
  font-size: var(--t-caption);         /* 13px */
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.footer__nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-xxl);
  margin-top: var(--sp-xxl);
  font-size: var(--t-caption);         /* 13px */
  color: var(--text-3);
}
.footer__nav a:hover { color: var(--text-2); }
.footer__copy {
  margin-top: var(--sp-xl);
  font-size: var(--t-mini);            /* 12px — meta 라벨 */
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ============================================================
   Sticky CTA — 모바일 전용, glass-dock pill
   · safe-area-inset-bottom (Galaxy 제스처 영역 회피)
   · intrinsic-width pill (호흡 공간 ↑, full-width 막대 폐기)
   · nav 톤 통일: hairline + backdrop-blur + accent-gold ring
   · KPI 유지: Google Play 4-color icon 으로 intent 명확화, 흰색 base 유지 (visibility)
   ============================================================ */
.sticky-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));   /* 컨텐트와 호흡 공간 */
  z-index: 100;
  pointer-events: none;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.sticky-cta[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 769px) { .sticky-cta { display: none; } }

/* Glass-dock pill — intrinsic-width, lighter shadow, accent-gold dim ring */
.sticky-cta__btn {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-md) var(--sp-lg);
  /* full-width 폐기 → 내용에 맞춰 intrinsic, 하한만 보장 */
  min-width: 220px;
  max-width: calc(100% - 24px);
  background: linear-gradient(180deg, #FAFBFC 0%, #E4E6EA 100%);
  color: #131418;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 0;
  /* nav 톤 통일: 가벼운 lift + accent-gold dim ring */
  box-shadow:
    0 10px 28px -12px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--accent-gold-dim);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.sticky-cta__btn:hover,
.sticky-cta__btn:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.22),
    0 0 0 1.5px var(--accent-gold);
}
.sticky-cta__btn:focus-visible {
  /* Component canon: .cta:focus-visible (tokens.css) 와 동일 정책 sync. */
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}
.sticky-cta__btn:active { transform: translateY(0); }

.sticky-cta__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.sticky-cta__icon svg { width: 100%; height: 100%; display: block; }

.sticky-cta__label { white-space: nowrap; }

.sticky-cta__arrow {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(19, 20, 24, 0.08);
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.sticky-cta__btn:hover .sticky-cta__arrow,
.sticky-cta__btn:focus-visible .sticky-cta__arrow {
  transform: translateX(3px);
  background: rgba(19, 20, 24, 0.14);
}

/* ============================================================
   §4.3 stats-card — vanilla HTML/CSS + SVG (PNG 캡쳐 폐기).
   단독 카드, phone bezel 제거.
   ============================================================ */
.stats-card {
  /* max-width 480 — 위 phone mockup(.device max 320/360) 과 시각 너비 매칭.
     §4 안 visual continuity 회복. */
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  background: rgba(28, 30, 34, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-card);
}
@media (min-width: 769px) {
  .stats-card { padding: 36px; }
}

/* 탭 그룹 — 7일 / 한 달 (active) / 3개월 / 1년 */
.stats-card__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xs);
  padding: var(--sp-xs);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  margin-bottom: var(--sp-xxl);
}
.stats-card__tab {
  text-align: center;
  padding: var(--sp-md) var(--sp-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  border-radius: 8px;
  letter-spacing: -0.005em;
}
.stats-card__tab--active {
  background: rgba(255,255,255,0.08);
  color: var(--text-1);
}

/* Body — eyebrow / 25 세션 / 델타 / 차트 */
.stats-card__body { padding: var(--sp-xs) var(--sp-xs) 0; }
.stats-card__eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  margin: 0 0 var(--sp-sm);
  letter-spacing: -0.005em;
}
.stats-card__metric {
  display: flex;
  align-items: baseline;
  gap: var(--sp-lg);
  margin: 0 0 var(--sp-lg);
}
.stats-card__num {
  font-size: 88px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
@media (min-width: 769px) {
  .stats-card__num { font-size: 120px; }
}
.stats-card__unit {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.015em;
}
@media (min-width: 769px) {
  .stats-card__unit { font-size: 36px; }
}

/* 델타 badge */
.stats-card__delta {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: 0 0 28px;
}
.stats-card__delta-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--sp-md);
  background: rgba(127, 181, 156, 0.18);
  color: #C7E8D8;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  font-feature-settings: "tnum";
}
.stats-card__delta-label {
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: -0.005em;
}

/* SVG 그래프 */
.stats-card__chart {
  display: block;
  width: 100%;
  height: 140px;
  margin-top: var(--sp-xs);
}
@media (min-width: 769px) {
  .stats-card__chart { height: 180px; }
}

.stats-card__disclaimer {
  max-width: 720px;
  margin: var(--sp-md) auto 0;
  font-size: var(--t-mini);            /* 12px */
  color: var(--text-3);
  text-align: center;
  opacity: 0.7;
}

/* ============================================================
   §4.4 coach-block — calendar_card (월 view) + coach_message (한 마디) 2개 stack.
   ============================================================ */
.coach-block {
  /* max-width 480 — stats-card 와 동일, phone mockup 너비 매칭 */
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

/* --- 캘린더 카드 / 코칭 메시지 — 공통 elevation --- */
/* "앱 화면을 떼어와 띄운" elevation 패턴
   · linear-gradient: 상단 살짝 밝게 (light source from above)
   · inset top highlight: 광택감 (dark UI 에서 elevated 정석)
   · 2-layer box-shadow: 가까운 floor + 멀리 ambient → --sh-card-elevated
   · border: hairline-2 (10%) — 카드 윤곽 명확
   · padding 만 별도 (캘린더는 var(--sp-xxl) var(--sp-xl), 코칭은 비대칭) */
.calendar-card,
.coach-message {
  background: linear-gradient(180deg, rgba(38, 42, 48, 0.85) 0%, rgba(28, 30, 34, 0.85) 100%);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card-elevated);
}
.calendar-card {
  padding: var(--sp-xxl) var(--sp-xl);
}
@media (min-width: 769px) {
  .calendar-card { padding: var(--sp-xxxl) 28px; }
}
.calendar-card__title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 var(--sp-xl);
  letter-spacing: -0.01em;
}
.calendar-card__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--sp-md);
}
.calendar-card__weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.calendar-card__weekday--sun  { color: #E89B9B; }
.calendar-card__weekday--sat  { color: #9BB6E8; }
.calendar-card__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: var(--sp-sm);
  justify-items: center;
}
.calendar-card__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  font-feature-settings: "tnum";
  position: relative;
}
@media (min-width: 769px) {
  .calendar-card__day {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}
.calendar-card__day--empty { visibility: hidden; }
.calendar-card__day--done {
  background: #DDE6DC;       /* mint */
  color: #14201A;
}
.calendar-card__day--miss {
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
}
.calendar-card__day--selected::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--text-1);
}

/* --- 코칭 한마디 카드 --- */
/* elevation 본체는 위 selector 그룹에서 처리, padding 만 비대칭 유지 */
.coach-message {
  padding: var(--sp-xl) var(--sp-xl) 22px;
}
@media (min-width: 769px) {
  .coach-message { padding: var(--sp-xxl) 28px 26px; }
}
.coach-message__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-lg);
}
.coach-message__date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.coach-message__badge {
  display: inline-flex;
  padding: var(--sp-xs) 10px;
  background: rgba(127, 181, 156, 0.18);
  color: #C7E8D8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.coach-message__body {
  display: flex;
  gap: var(--sp-card);
  align-items: flex-start;
}
.coach-message__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}
.coach-message__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.coach-message__text { flex: 1; min-width: 0; }
.coach-message__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 var(--sp-sm);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
@media (min-width: 769px) {
  .coach-message__title { font-size: 20px; }
}
.coach-message__sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
}

/* ============================================================
   §4.2 "코치 한마디" — lock-screen metaphor.
   - 3장 notification stack (요일/시간 라벨 + SUUMT 브랜드 마크) + REPORT card
   - 시간 흐름(월 아침 → 화 오후 → 일 저녁) staggered arrival
   - IntersectionObserver `[data-reveal]` 트리거 → `.is-in-view` 토글
   ============================================================ */

.s42__lock {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Notification stack ---------------------------------------- */
.lock-stack {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 56px;
}
@media (min-width: 769px) {
  .lock-stack { margin-bottom: 72px; }
}

.lock-noti {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--sp-md);
  row-gap: 3px;
  align-items: center;

  padding: var(--sp-md) 14px 14px;
  border-radius: 14px;
  background: rgba(36, 39, 45, 0.78);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.55);

  opacity: 0;
  transform: translateY(-28px) scale(0.94);
  transform-origin: 50% -40%;
  transition:
    transform 720ms cubic-bezier(0.18, 1.15, 0.32, 1),
    opacity 540ms var(--ease);
  will-change: transform, opacity;
}
.lock-noti + .lock-noti {
  margin-top: -16px;
}
@media (min-width: 769px) {
  .lock-noti {
    grid-template-columns: 44px 1fr auto;
    column-gap: 14px;
    padding: 14px 18px var(--sp-lg);
    border-radius: 18px;
  }
  .lock-noti + .lock-noti { margin-top: -20px; }
}

/* layout slots ------------------------------------------- */
.lock-noti__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  align-self: center;
  flex-shrink: 0;
  background: #1a1625;            /* SUUMT brand backdrop */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.lock-noti__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (min-width: 769px) {
  .lock-noti__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

.lock-noti__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
@media (min-width: 769px) {
  .lock-noti__title { font-size: 15px; }
}

.lock-noti__time {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.35;
  align-self: center;
  white-space: nowrap;
}
@media (min-width: 769px) {
  .lock-noti__time { font-size: 11.5px; }
}

.lock-noti__body {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  letter-spacing: -0.012em;
}
@media (min-width: 769px) {
  .lock-noti__body { font-size: 13.5px; }
}

/* states — staggered arrival (triggered by parent .is-in-view) */
.s42__lock.is-in-view .lock-noti--1 {
  transform: translateY(0) scale(0.955);
  opacity: 0.72;
  transition-delay: 200ms;
}
.s42__lock.is-in-view .lock-noti--2 {
  transform: translateY(0) scale(0.98);
  opacity: 0.90;
  transition-delay: 600ms;
}
.s42__lock.is-in-view .lock-noti--3 {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 1000ms;
}

/* icon pulse on arrival ---------------------------------- */
@keyframes lockIconPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0.32), 0 0 0 1px rgba(255,255,255,0.05) inset; }
  45%  { transform: scale(1.10); box-shadow: 0 0 0 9px rgba(255,255,255,0),  0 0 0 1px rgba(255,255,255,0.16) inset; }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0),   0 0 0 1px rgba(255,255,255,0.05) inset; }
}
.s42__lock.is-in-view .lock-noti--1 .lock-noti__icon { animation: lockIconPulse 720ms 280ms var(--ease) both; }
.s42__lock.is-in-view .lock-noti--2 .lock-noti__icon { animation: lockIconPulse 720ms 680ms var(--ease) both; }
.s42__lock.is-in-view .lock-noti--3 .lock-noti__icon { animation: lockIconPulse 720ms 1080ms var(--ease) both; }

/* REPORT card -------------------------------------------- */
.lock-report {
  position: relative;
  padding: 26px 22px 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1A1D22 0%, #15171B 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 28px 56px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgba(127,181,156,0.05) inset;

  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease) 1500ms,
    transform 700ms cubic-bezier(0.2, 0.85, 0.25, 1) 1500ms;
}
.s42__lock.is-in-view .lock-report {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 769px) {
  .lock-report {
    padding: var(--sp-xxxl) 30px 36px;
    border-radius: 22px;
  }
}

.lock-report__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);    /* 한국어 자모 분리감 회피 */
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 18px;
}
@media (min-width: 769px) {
  .lock-report__eyebrow { margin-bottom: 22px; }
}

.lock-report__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin: 0 0 14px;
}

.lock-report__body {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 0;
}
@media (min-width: 769px) {
  .lock-report__body { font-size: 16px; }
}
.lock-report__body em {
  font-style: normal;
  color: var(--text-3);
  transition: color 720ms var(--ease) 2200ms;
}
.s42__lock.is-in-view .lock-report__body em {
  color: var(--mode-celadon);
}

/* prefers-reduced-motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lock-noti, .lock-noti__icon, .lock-report, .lock-report__body em {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .lock-report__body em { color: var(--mode-celadon) !important; }
}