/* ==========================================================================
   GrowLog — Landing
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-16);
}

/* 배경 장식: 은은한 초록 빛 2개 + 위로 자라는 성장 곡선 */
.hero__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow {
  position: absolute;
  width: 46vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(63 125 99 / 0.14), transparent);
}
.hero__glow--a { top: -18vmax; right: -12vmax; }
.hero__glow--b { bottom: -26vmax; left: -16vmax; background: radial-gradient(closest-side, rgb(201 215 168 / 0.28), transparent); }
.hero__growth { position: absolute; inset: 0; display: none; width: 100%; height: 100%; color: var(--c-primary); }
/* 좁은 화면은 히어로가 세로로 길어 곡선이 수직에 가까워지므로 넓은 화면에서만 그린다 */
@media (min-width: 1024px) { .hero__growth { display: block; } }
@media (prefers-color-scheme: dark) {
  .hero__glow { background: radial-gradient(closest-side, rgb(124 196 156 / 0.1), transparent); }
  .hero__glow--b { background: radial-gradient(closest-side, rgb(124 196 156 / 0.06), transparent); }
}
.hero__growth-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-opacity: 0.45;
  vector-effect: non-scaling-stroke;
}
/* 곡선을 따라 위로 타고 오르는 빛 (모션 허용 시에만 보임) */
.hero__growth-spark {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0.06 1;
  stroke-dashoffset: 0.06;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
/* 노트 종이 느낌의 가로줄 배경 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, var(--c-line) 39px 40px);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
  opacity: 0.7;
}

.hero__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.hero__eyebrow .icon { color: var(--c-primary); width: 18px; height: 18px; }

/* 한 줄씩 아래에서 올라오도록 줄마다 가리는 틀 */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__line > span { display: inline-block; }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.hero__desc {
  max-width: 34rem;
  margin-top: var(--sp-5);
  color: var(--c-ink-2);
  font-size: var(--fs-lg);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
}
.hero__points li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.hero__points .icon { width: 16px; height: 16px; color: var(--c-primary); }

/* 히어로 화면 미리보기 — 카드 4장을 겹쳐 배치 */
.hero__visual {
  position: relative;
  display: grid;
  gap: var(--sp-3);
}

.mock-card {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}
.mock-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mock-card__title { font-weight: 700; }
.mock-card__date { color: var(--c-ink-3); font-size: var(--fs-xs); }
.mock-card__goal { display: block; margin: var(--sp-3) 0 var(--sp-4); font-weight: 700; }
.mock-card__label { color: var(--c-primary-text); font-size: var(--fs-xs); font-weight: 700; }
.mock-card--note p { margin-top: var(--sp-1); font-size: var(--fs-sm); }

.mock-card--streak {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  justify-self: start;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}
.mock-card__flame {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.mock-card__flame .icon { width: 20px; height: 20px; }

.mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.mock-stats > div {
  display: grid;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
}
.mock-stats strong { font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; }
.mock-stats small { font-size: var(--fs-sm); font-weight: 600; margin-left: 1px; }
.mock-stats span { color: var(--c-ink-2); font-size: var(--fs-xs); }

/* 히트맵: 열 = 주, 행 = 요일 */
.mock-heatmap {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.mock-heatmap i {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--c-heat-0);
}
.mock-heatmap i[data-level="1"] { background: var(--c-heat-1); }
.mock-heatmap i[data-level="2"] { background: var(--c-heat-2); }
.mock-heatmap i[data-level="3"] { background: var(--c-heat-3); }
.mock-heatmap--wide { gap: 3px; }
.mock-card--main .mock-heatmap { grid-template-rows: repeat(7, 14px); }
.mock-card--main .mock-heatmap i { aspect-ratio: auto; }

@media (min-width: 1024px) {
  .hero { padding: var(--sp-16) 0 var(--sp-24); }
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: var(--sp-16); }

  .hero__visual {
    display: block;
    height: 500px;
  }
  .mock-card { position: absolute; }
  .mock-card--main { top: 48px; left: 8%; right: 0; }
  .mock-card--goal { left: -4%; bottom: 20px; width: 290px; }
  .mock-card--streak { top: 0; right: 4%; }
  .mock-card--note { right: -2%; bottom: 0; width: 250px; }

  .mock-card--main { z-index: 1; }
  .mock-card--goal, .mock-card--note { z-index: 2; }
  .mock-card--streak { z-index: 3; }
}

.mock-card__saved {
  display: inline-flex;
  margin-left: var(--sp-1);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-size: 11px;
  opacity: 0;
}
.mock-card--note p { min-height: 3.2em; }

/* ==========================================================================
   히어로 모션 — "기록이 쌓여 성장이 된다"
   1) 제목이 한 줄씩 올라오고 형광펜이 그어진다
   2) 성장 곡선이 왼쪽 아래에서 오른쪽 위로 그려진다
   3) 카드가 튀어오르듯 놓이고, 히트맵 칸이 오래된 날부터 차례로 채워진다
   4) 숫자 · 진행률이 0부터 올라가고, 이후 '오늘의 기록'이 계속 새로 쓰인다
   모션을 줄이도록 설정한 사용자에게는 처음부터 완성된 화면을 보여준다.
   (반복 모션은 히어로가 화면 밖이거나 탭이 숨겨지면 멈춘다)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__line > span { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; }
  .js .hero__line + .hero__line > span { animation-delay: 140ms; }
  .js .hero .marker {
    background-size: 0% 34%;
    animation: marker-draw 700ms var(--ease-out) 750ms forwards;
  }
  .js .hero__eyebrow { animation: rise 600ms var(--ease-out) both; }
  .js .hero__eyebrow .icon { transform-origin: 50% 100%; animation: sprout 900ms var(--ease-spring) 200ms both; }
  .js .hero__desc { animation: rise 700ms var(--ease-out) 450ms both; }
  .js .hero__cta { animation: rise 700ms var(--ease-out) 580ms both; }
  .js .hero__points { animation: rise 700ms var(--ease-out) 700ms both; }

  .js .hero__growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2200ms var(--ease-in-out) 300ms forwards; }
  .js .hero__growth-area { opacity: 0; animation: fade 1400ms ease 1300ms forwards; }
  .js .hero__growth-spark { animation: spark 3600ms var(--ease-in-out) 2600ms infinite; }
  .js .hero__glow--a { animation: drift-a 16s ease-in-out infinite alternate; }
  .js .hero__glow--b { animation: drift-b 20s ease-in-out infinite alternate; }

  /* 카드: 등장(opacity · scale · rotate) / 떠 있기(transform) / 마우스 · 스크롤 깊이(translate)를 서로 다른 속성으로 나눠 겹치지 않게 한다 */
  .js .hero .mock-card {
    animation: card-in 900ms var(--ease-spring) both, bob 7s ease-in-out infinite alternate;
    animation-delay: var(--in, 250ms), calc(var(--in, 250ms) + 900ms);
    translate: calc(var(--px, 0) * var(--depth, 10px)) calc(var(--py, 0) * var(--depth, 10px) - var(--sy, 0) * var(--lift, 40px));
    transition: translate 600ms var(--ease-out);
  }
  .js .hero .mock-card--main { --in: 250ms; --depth: 8px; --lift: 30px; animation-duration: 900ms, 9s; }
  .js .hero .mock-card--goal { --in: 520ms; --depth: 22px; --lift: 90px; animation-duration: 900ms, 6s; }
  .js .hero .mock-card--streak { --in: 700ms; --depth: 28px; --lift: 130px; animation-duration: 900ms, 5s; }
  .js .hero .mock-card--note { --in: 860ms; --depth: 18px; --lift: 70px; animation-duration: 900ms, 7.5s; }

  /* 히트맵: 열(주) · 행(요일) 순서로 물결처럼 채워진다 */
  .js .hero .mock-heatmap i {
    scale: 0;
    animation: cell-in 520ms var(--ease-spring) forwards;
    animation-delay: calc(700ms + var(--c, 0) * 60ms + var(--r, 0) * 22ms);
  }
  .js .hero .mock-heatmap i.is-bump { animation: cell-in 520ms var(--ease-spring) forwards, bump 700ms var(--ease-spring); }

  .js .hero .mock-card__flame .icon { transform-origin: 50% 90%; animation: flicker 1.8s ease-in-out infinite alternate; }
  .js .hero .mock-card__flame::after { animation: ring 2.4s ease-out 1.6s infinite; }
  .js .hero .mock-card__saved.is-on { animation: saved 1800ms var(--ease-out); }
  .js .hero [data-typing].is-typing::after { animation: caret 900ms steps(1) infinite; }

  /* 화면 밖에서는 반복 모션을 멈춘다 */
  .hero.is-offscreen *, .hero.is-offscreen *::after { animation-play-state: paused !important; }
}

.mock-card__flame { position: relative; }
.mock-card__flame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--c-primary);
  opacity: 0;
}
.mock-heatmap i { position: relative; }
.hero .mock-heatmap i.is-today::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--c-ink);
  border-radius: 5px;
}
[data-typing].is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--c-primary);
  vertical-align: -0.15em;
}

/* 1024~1199px: 미리보기 폭이 좁아 아래 두 카드가 겹치지 않도록 줄인다 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mock-card--goal { width: 240px; }
  .mock-card--note { width: 230px; }
}

@keyframes line-up { to { transform: none; } }
@keyframes marker-draw { to { background-size: 100% 34%; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sprout { from { transform: scale(0) rotate(-20deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spark { 0% { opacity: 0; stroke-dashoffset: 0.06; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes fade { to { opacity: 1; } }
@keyframes drift-a { to { transform: translate(-6vmax, 5vmax) scale(1.12); } }
@keyframes drift-b { to { transform: translate(8vmax, -4vmax) scale(0.9); } }
@keyframes card-in { from { opacity: 0; scale: 0.88; rotate: -4deg; } }
@keyframes bob { to { transform: translateY(-10px); } }
@keyframes cell-in { to { scale: 1; } }
@keyframes bump { 40% { transform: scale(1.7); } }
@keyframes flicker { 0% { transform: scale(1) rotate(-3deg); } 100% { transform: scale(1.12) rotate(3deg); } }
@keyframes ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes saved { 0% { opacity: 0; transform: translateY(4px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Section 공통 ---------- */
.section { padding: var(--sp-16) 0; }
@media (min-width: 1024px) {
  .section { padding: var(--sp-24) 0; }
}

.section-head { max-width: 640px; margin-bottom: var(--sp-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__eyebrow {
  margin-bottom: var(--sp-3);
  color: var(--c-primary-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-head__title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; }
.section-head__desc { margin-top: var(--sp-4); color: var(--c-ink-2); font-size: var(--fs-lg); }

/* ---------- Why ---------- */
/* 원본 랜딩의 짙은 초록(#142C22) 반전 섹션 */
.section--why {
  background: var(--c-deep);
  color: var(--c-bg);
}
.section--why .section-head__eyebrow,
.pain__num { color: var(--c-accent); }
.section--why .section-head__desc { color: color-mix(in srgb, var(--c-bg) 72%, transparent); }

.pain-list { display: grid; gap: var(--sp-4); }
.pain {
  padding: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--c-bg) 16%, transparent);
  border-radius: var(--radius-lg);
}
.pain__num {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pain__title { font-size: var(--fs-xl); font-weight: 700; }
.pain__desc { margin-top: var(--sp-3); color: color-mix(in srgb, var(--c-bg) 72%, transparent); }

@media (min-width: 768px) {
  .pain-list { grid-template-columns: repeat(3, 1fr); }
}

/* 다크 모드에서는 반전 섹션 대신 한 톤 밝은 면을 쓴다 */
@media (prefers-color-scheme: dark) {
  .section--why { background: var(--c-surface); color: var(--c-ink); }
  .section--why .section-head__eyebrow,
  .pain__num { color: var(--c-primary-text); }
  .section--why .section-head__desc,
  .pain__desc { color: var(--c-ink-2); }
  .pain { border-color: var(--c-line); }
}

/* ---------- Features ---------- */
.feature {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--c-line);
}
.feature__num {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.feature__title { font-size: var(--fs-2xl); font-weight: 800; }
.feature__desc { margin-top: var(--sp-4); color: var(--c-ink-2); }
.feature__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.feature__list li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.feature__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: var(--sp-8) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--c-surface-2);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .feature { grid-template-columns: 1fr 1.1fr; gap: var(--sp-16); padding: var(--sp-16) 0; }
  .feature--reverse .feature__copy { order: 2; }
  .feature__visual { min-height: 380px; }
}

/* 기능 미리보기: 목표 카드 */
.mock-goal {
  position: relative;
  z-index: 1;
  width: min(100%, 360px);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}
.mock-goal__top { display: flex; justify-content: space-between; align-items: center; }
.mock-goal__title { display: block; margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; }
.mock-goal__desc { margin: var(--sp-1) 0 var(--sp-4); color: var(--c-ink-2); font-size: var(--fs-sm); }
.mock-goal__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
}
.mock-goal__foot strong { color: var(--c-primary-text); }
.mock-goal--back {
  position: absolute;
  z-index: 0;
  width: min(80%, 300px);
  transform: translate(18%, -78%) rotate(4deg);
  opacity: 0.85;
}

/* 기능 미리보기: 기록 */
.mock-record {
  width: min(100%, 380px);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}
.mock-record .segmented__btn { min-height: 30px; cursor: default; }
.mock-record__title { display: block; margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 700; }
.mock-record__list { display: grid; gap: var(--sp-3); }
.mock-record__list > div { padding-left: var(--sp-3); border-left: 3px solid var(--c-primary); }
.mock-record__list dt { color: var(--c-primary-text); font-size: var(--fs-xs); font-weight: 700; }
.mock-record__list dd { margin: 0; font-size: var(--fs-sm); }
.mock-record__level { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-4); color: var(--c-ink-2); font-size: var(--fs-xs); }
.mock-record__level span { margin-right: var(--sp-2); }
.mock-record__level i { width: 22px; height: 8px; border-radius: 4px; background: var(--c-primary); }
.mock-record__level i.is-on { background: var(--c-danger); }

/* 기능 미리보기: 타임라인 */
.mock-timeline {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  width: min(100%, 400px);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
}
.mock-timeline li { display: grid; grid-template-columns: 64px 14px 1fr; gap: var(--sp-3); align-items: center; }
.mock-timeline__date { color: var(--c-ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mock-timeline__dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-line-strong); }
.mock-timeline__dot.is-record { background: var(--c-primary); }
.mock-timeline__dot.is-goal { background: var(--c-success); }
.mock-timeline em { color: var(--c-success-text); font-style: normal; font-size: var(--fs-xs); font-weight: 700; margin-left: var(--sp-1); }
.mock-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: calc(var(--sp-5) + 64px + var(--sp-3) + 6px);
  width: 2px;
  background: var(--c-line);
}

/* 기능 미리보기: 대시보드 */
.mock-dash {
  width: min(100%, 440px);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}

/* ---------- Journey ---------- */
.journey {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  counter-reset: step;
}
.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--sp-4);
  counter-increment: step;
}
.journey__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-primary-text);
  position: relative;
  z-index: 1;
}
.journey__icon .icon { width: 24px; height: 24px; }
.journey__step:last-child .journey__icon { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.journey__title { align-self: end; font-size: var(--fs-lg); font-weight: 700; }
.journey__title::before { content: '0' counter(step) ' '; color: var(--c-ink-3); font-size: var(--fs-sm); font-weight: 600; }
.journey__desc { color: var(--c-ink-2); font-size: var(--fs-sm); }

@media (min-width: 1024px) {
  .journey { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  .journey__step { grid-template-columns: 1fr; row-gap: var(--sp-2); justify-items: center; text-align: center; }
  .journey__icon { grid-row: auto; width: 72px; height: 72px; margin-bottom: var(--sp-3); }
  .journey__icon .icon { width: 30px; height: 30px; }
  .journey__title::before { display: block; }
}

/* ---------- CTA ---------- */
.section--cta { padding-top: 0; }
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--c-primary);
  color: var(--c-on-primary);
  text-align: center;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 60px solid rgb(255 255 255 / 0.18);
  pointer-events: none;
}
.cta-band__title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; }
.cta-band__desc { margin-bottom: var(--sp-4); font-size: var(--fs-lg); }
.cta-band .btn--dark { background: var(--c-deep); color: #f7f8f5; }
.cta-band .btn--dark:hover { background: #1f4032; }

/* ---------- 페이지 진행 막대 (모션 허용 시에만 보임) ---------- */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: none;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Why: 흐르는 키워드 띠 ---------- */
.section--why { position: relative; overflow: hidden; }
.section--why > .container { position: relative; z-index: 1; }
.marquee {
  position: absolute;
  top: var(--sp-6);
  left: 0;
  width: 100%;
  overflow: hidden;
  color: var(--c-accent);
  font-size: clamp(4rem, 2rem + 9vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  opacity: 0.09;
  pointer-events: none;
}
.marquee__track { display: inline-flex; gap: 0.5em; padding-right: 0.5em; }
.marquee__track span::before { content: attr(data-word); }
@media (prefers-color-scheme: dark) { .marquee { color: var(--c-primary); opacity: 0.07; } }
.pain__num { font-size: 2rem; line-height: 1; letter-spacing: -0.04em; }

/* ---------- 줄 단위 등장 제목 ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: inline-block; }

/* ---------- Features: 큰 배경 번호 ---------- */
.feature__bg-num {
  position: absolute;
  right: -0.04em;
  bottom: -0.22em;
  z-index: 0;
  color: var(--c-primary);
  font-size: clamp(8rem, 5rem + 12vw, 15rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  opacity: 0.09;
  pointer-events: none;
}
/* 장식 숫자는 글자가 아닌 생성 콘텐츠로 넣어 읽기 · 대비 검사 대상에서 뺀다 */
.feature__bg-num::before { content: attr(data-num); }
.feature__visual > :not(.feature__bg-num, .mock-goal--back) { position: relative; z-index: 1; }

/* ---------- Journey: 스크롤에 따라 채워지는 성장 경로 ---------- */
.journey-wrap { position: relative; }
.journey__track {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--c-line-strong) 0 6px, transparent 6px 12px);
}
.journey__fill {
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  transform: scaleY(var(--p, 1));
  transform-origin: 50% 0;
}
.journey__walker {
  position: absolute;
  top: calc(var(--p, 1) * 100%);
  left: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-primary) 22%, transparent);
  transform: translate(-50%, -50%);
}
.journey__walker .icon { width: 16px; height: 16px; }
.journey__step.is-active .journey__icon { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
@media (min-width: 1024px) {
  .journey__track {
    top: 36px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--c-line-strong) 0 6px, transparent 6px 12px);
  }
  .journey__fill { transform: scaleX(var(--p, 1)); transform-origin: 0 50%; }
  .journey__walker { top: 50%; left: calc(var(--p, 1) * 100%); }
}

/* ---------- CTA: 떠오르는 기록 칸 ---------- */
.cta-band > :not(.cta-band__cells) { position: relative; z-index: 1; }
.cta-band__cells { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta-band__cells i {
  position: absolute;
  bottom: -40px;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--c-accent);
  opacity: 0;
}
.cta-band__cells i:nth-child(3n) { width: 26px; background: rgb(255 255 255 / 0.4); }
.cta-band__cells i:nth-child(3n + 1) { width: 12px; background: var(--c-deep); }
.cta-band__cells i:nth-child(1) { left: 4%; --d: 0s; --t: 7s; }
.cta-band__cells i:nth-child(2) { left: 11%; --d: 2.2s; --t: 9s; }
.cta-band__cells i:nth-child(3) { left: 18%; --d: 4.1s; --t: 8s; }
.cta-band__cells i:nth-child(4) { left: 26%; --d: 1.2s; --t: 10s; }
.cta-band__cells i:nth-child(5) { left: 33%; --d: 5.5s; --t: 7.5s; }
.cta-band__cells i:nth-child(6) { left: 41%; --d: 3s; --t: 9.5s; }
.cta-band__cells i:nth-child(7) { left: 48%; --d: 0.6s; --t: 8.5s; }
.cta-band__cells i:nth-child(8) { left: 56%; --d: 4.8s; --t: 7s; }
.cta-band__cells i:nth-child(9) { left: 63%; --d: 1.8s; --t: 10s; }
.cta-band__cells i:nth-child(10) { left: 70%; --d: 6.2s; --t: 8s; }
.cta-band__cells i:nth-child(11) { left: 77%; --d: 2.8s; --t: 9s; }
.cta-band__cells i:nth-child(12) { left: 84%; --d: 0.3s; --t: 7.5s; }
.cta-band__cells i:nth-child(13) { left: 90%; --d: 3.6s; --t: 8.5s; }
.cta-band__cells i:nth-child(14) { left: 96%; --d: 5s; --t: 9.5s; }
.cta-band .btn { position: relative; overflow: hidden; transition: translate 350ms var(--ease-out), background-color var(--dur-fast); }

/* ==========================================================================
   섹션 모션 — 히어로의 "기록이 쌓여 성장이 된다"를 페이지 끝까지 잇는다
   Why       흐릿한 단어가 하나씩 선명해지고(보이지 않던 성장), 흩어진 메모 카드가 스크롤에 맞춰 한 줄로 정렬
   Features  패널이 열리듯 펼쳐지고 화면 조각이 튀어올라 놓인 뒤, 기능별로 실제 동작(진행률 · 기록 작성 · 타임라인 · 히트맵)을 재생
   Journey   스크롤에 맞춰 성장 경로가 채워지고 새싹이 이동하며, 지나간 단계가 하나씩 켜진다
   CTA       띠가 커지며 다가오고, 기록 칸이 계속 떠오른다. 버튼은 마우스를 살짝 따라온다
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .scroll-progress { display: block; }

  /* Why */
  .js .marquee__track { animation: marquee 28s linear infinite; }
  .js [data-split="words"] .word {
    display: inline-block;
    opacity: 0.1;
    filter: blur(10px);
    transform: translateY(0.35em);
    transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .js [data-split="words"].is-in .word { opacity: 1; filter: none; transform: none; }
  .js .pain-list .pain {
    translate: calc((1 - var(--p, 1)) * var(--sx, 0px)) calc((1 - var(--p, 1)) * var(--sy, 0px));
    rotate: calc((1 - var(--p, 1)) * var(--sr, 0deg));
  }
  .js .pain-list .pain:nth-child(1) { --sx: -80px; --sy: 110px; --sr: -10deg; }
  .js .pain-list .pain:nth-child(2) { --sx: 10px; --sy: 190px; --sr: 7deg; }
  .js .pain-list .pain:nth-child(3) { --sx: 90px; --sy: 80px; --sr: 12deg; }
  .js .pain-list.is-in .pain__num { animation: num-pop 800ms var(--ease-spring) both; }
  .js .pain-list.is-in .pain:nth-child(2) .pain__num { animation-delay: 150ms; }
  .js .pain-list.is-in .pain:nth-child(3) .pain__num { animation-delay: 300ms; }

  /* 줄 단위 제목 (Features · CTA) */
  .js .split-line > span { transform: translateY(105%); transition: transform 1000ms var(--ease-out); }
  .js .split-line + .split-line > span { transition-delay: 140ms; }
  .js .is-in .split-line > span,
  .js .split-lines.is-in .split-line > span { transform: none; }

  /* Features: 공통 등장 */
  .js [data-feature] .feature__copy > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .js [data-feature] .feature__copy > :nth-child(2) { transition-delay: 90ms; }
  .js [data-feature] .feature__copy > :nth-child(3) { transition-delay: 180ms; }
  .js [data-feature] .feature__copy > :nth-child(4) { transition-delay: 270ms; }
  .js [data-feature].is-in .feature__copy > * { opacity: 1; transform: none; }
  .js [data-feature] .feature__list li { scale: 0.6; opacity: 0; transition: scale 600ms var(--ease-spring), opacity 400ms ease; }
  .js [data-feature] .feature__list li:nth-child(1) { transition-delay: 450ms; }
  .js [data-feature] .feature__list li:nth-child(2) { transition-delay: 540ms; }
  .js [data-feature] .feature__list li:nth-child(3) { transition-delay: 630ms; }
  .js [data-feature].is-in .feature__list li { scale: 1; opacity: 1; }

  .js [data-feature] .feature__visual {
    clip-path: inset(14% 10% 14% 10% round 40px);
    transition: clip-path 1200ms var(--ease-out);
  }
  .js [data-feature].is-in .feature__visual { clip-path: inset(0 round var(--radius-lg)); }
  .js [data-feature] .feature__visual > :not(.feature__bg-num) {
    opacity: 0;
    scale: 0.82;
    rotate: -4deg;
    translate: 0 calc((1 - var(--p, 1)) * 60px);
    transition: opacity 600ms ease 250ms, scale 900ms var(--ease-spring) 250ms, rotate 900ms var(--ease-spring) 250ms;
  }
  .js [data-feature].is-in .feature__visual > :not(.feature__bg-num) { opacity: 1; scale: 1; rotate: 0deg; }
  .js [data-feature] .feature__bg-num {
    opacity: 0;
    translate: 0 calc((0.6 - var(--p, 1)) * 160px);
    transition: opacity 1200ms ease 200ms;
  }
  .js [data-feature].is-in .feature__bg-num { opacity: 0.09; }

  /* 01 목표: 뒤 카드가 휘어 들어오고 D-day 가 두근거린다 */
  .js [data-feature="goal"] .feature__visual > .mock-goal.mock-goal--back { rotate: -24deg; transition-delay: 650ms; }
  .js [data-feature="goal"].is-in .feature__visual > .mock-goal.mock-goal--back { opacity: 0.85; rotate: 0deg; }
  .js [data-feature="goal"].is-in .mock-goal__foot strong { display: inline-block; animation: beat 1.6s ease-in-out 2s infinite; }

  /* 02 기록: 문장이 써지고 체감 난이도 막대가 차오른다 */
  .js [data-feature="record"] .mock-record__list dd { clip-path: inset(0 100% 0 0); transition: clip-path 1300ms steps(26) 700ms; }
  .js [data-feature="record"] .mock-record__list > div + div dd { transition-delay: 1900ms; }
  .js [data-feature="record"].is-in .mock-record__list dd { clip-path: inset(0); }
  .js [data-feature="record"] .mock-record__list > div { border-left-color: var(--c-line); transition: border-color 500ms ease 700ms; }
  .js [data-feature="record"] .mock-record__list > div + div { transition-delay: 1900ms; }
  .js [data-feature="record"].is-in .mock-record__list > div { border-left-color: var(--c-primary); }
  .js [data-feature="record"] .mock-record__level i { scale: 0 1; transform-origin: 0 50%; transition: scale 500ms var(--ease-spring); }
  .js [data-feature="record"] .mock-record__level i:nth-of-type(1) { transition-delay: 3200ms; }
  .js [data-feature="record"] .mock-record__level i:nth-of-type(2) { transition-delay: 3350ms; }
  .js [data-feature="record"] .mock-record__level i:nth-of-type(3) { transition-delay: 3500ms; }
  .js [data-feature="record"].is-in .mock-record__level i { scale: 1 1; }

  /* 03 타임라인: 세로선이 그어지고 항목이 차례로 들어와 점이 찍힌다 */
  .js [data-feature="timeline"] .mock-timeline::before { scale: 1 0; transform-origin: 50% 0; transition: scale 1400ms var(--ease-in-out) 400ms; }
  .js [data-feature="timeline"].is-in .mock-timeline::before { scale: 1 1; }
  .js [data-feature="timeline"] .mock-timeline li { opacity: 0; translate: 40px 0; transition: opacity 500ms ease, translate 700ms var(--ease-out); }
  .js [data-feature="timeline"] .mock-timeline__dot { scale: 0; transition: scale 500ms var(--ease-spring); }
  .js [data-feature="timeline"] .mock-timeline li:nth-child(1), .js [data-feature="timeline"] .mock-timeline li:nth-child(1) .mock-timeline__dot { transition-delay: 500ms; }
  .js [data-feature="timeline"] .mock-timeline li:nth-child(2), .js [data-feature="timeline"] .mock-timeline li:nth-child(2) .mock-timeline__dot { transition-delay: 800ms; }
  .js [data-feature="timeline"] .mock-timeline li:nth-child(3), .js [data-feature="timeline"] .mock-timeline li:nth-child(3) .mock-timeline__dot { transition-delay: 1100ms; }
  .js [data-feature="timeline"] .mock-timeline li:nth-child(4), .js [data-feature="timeline"] .mock-timeline li:nth-child(4) .mock-timeline__dot { transition-delay: 1400ms; }
  .js [data-feature="timeline"].is-in .mock-timeline li { opacity: 1; translate: 0 0; }
  .js [data-feature="timeline"].is-in .mock-timeline__dot { scale: 1; }
  .js [data-feature="timeline"].is-in .mock-timeline li:first-child .mock-timeline__dot { animation: dot-ring 2s ease-out 2s infinite; }

  /* 04 대시보드: 히트맵 물결 + 숫자 카운트업(JS) */
  .js [data-feature="dash"] .mock-heatmap i { scale: 0; }
  .js [data-feature="dash"].is-in .mock-heatmap i {
    animation: cell-in 520ms var(--ease-spring) forwards;
    animation-delay: calc(500ms + var(--c, 0) * 55ms + var(--r, 0) * 20ms);
  }

  /* Journey */
  .js .journey__walker { animation: walker 1.6s ease-in-out infinite alternate; }
  .js .journey__step .journey__icon { transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease; }
  /* 아직 지나지 않은 단계는 흐린 글자색으로 (투명도 대신 색을 바꿔 명도 대비 유지) */
  .js .journey__step:not(.is-active) .journey__title,
  .js .journey__step:not(.is-active) .journey__desc { color: var(--c-ink-3); transform: translateY(10px); }
  .js .journey__step .journey__title,
  .js .journey__step .journey__desc { transition: color 600ms ease, transform 600ms var(--ease-out); }
  .js .journey__step:last-child:not(.is-active) .journey__icon { border-color: var(--c-line-strong); background: var(--c-surface); color: var(--c-primary-text); }
  .js .journey__step.is-active .journey__icon { animation: step-pop 700ms var(--ease-spring); }
  .js .journey__step:last-child.is-active .journey__icon { animation: step-pop 700ms var(--ease-spring), glow 2.4s ease-in-out 700ms infinite; }

  /* CTA */
  .js .cta-band {
    scale: calc(0.86 + var(--p, 1) * 0.14);
    border-radius: calc(var(--radius-lg) + (1 - var(--p, 1)) * 60px);
  }
  .js .cta-band__cells { display: block; }
  .js .cta-band__cells i { animation: cell-rise var(--t, 8s) linear var(--d, 0s) infinite; }
  .js .cta-band::after { animation: ring-breathe 9s ease-in-out infinite alternate; }
  .js .cta-band__desc, .js .cta-band .btn { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out) 450ms, transform 700ms var(--ease-out) 450ms; }
  .js .cta-band .btn { transition: opacity 700ms var(--ease-out) 600ms, transform 700ms var(--ease-out) 600ms, translate 350ms var(--ease-out), background-color var(--dur-fast); }
  .js .cta-band.is-in .cta-band__desc, .js .cta-band.is-in .btn { opacity: 1; transform: none; }
  .js .cta-band .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: shine 3.2s ease-in-out 1.5s infinite;
  }
}

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes num-pop { from { opacity: 0; transform: translateY(20px) scale(0.6); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes dot-ring { 0% { box-shadow: 0 0 0 1px var(--c-line-strong), 0 0 0 0 color-mix(in srgb, var(--c-primary) 50%, transparent); } 100% { box-shadow: 0 0 0 1px var(--c-line-strong), 0 0 0 12px transparent; } }
@keyframes walker { to { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c-primary) 8%, transparent); } }
@keyframes step-pop { 40% { transform: scale(1.22); } }
@keyframes glow { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-primary) 20%, transparent); } }
@keyframes cell-rise { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 12% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-460px) rotate(160deg); } }
@keyframes ring-breathe { to { transform: scale(1.25) translate(-30px, -20px); } }
@keyframes shine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }

/* ---------- 스크롤 등장 효과 (JS 동작 + 모션 허용 시에만) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}