/* ─────────────────────────────────────────────────────────────
   랜딩 — templates/pages/landing.html 의 짝 (디자인 v3)

   시안 Tubeworker Landing v3 의 섹션 구성을 따릅니다:
   히어로 → 성과 지표 + 네이버 카페 → 지그재그 이유 → HOW 3카드 → 마무리 CTA.
   색·버튼·카드는 tokens.css 의 토큰/공용 클래스(.btn/.card)를 재사용합니다.
   ───────────────────────────────────────────────────────────── */

.lp { display: flex; flex-direction: column; }

.lp-accent { color: var(--accent); }

/* 스크롤 리빌 */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── 공용 섹션 타이포 ──
   width: 100% 가 반드시 필요합니다. 부모 .lp 는 flex column 인데 이 박스에 margin: 0 auto
   (교차축 auto 마진)가 걸려 있어 align-items: stretch 가 무효가 됩니다. 그러면 폭이
   '부모가 주는 폭' 이 아니라 '내용의 max-content' 로 정해져서, 안에 넓은 자식(후기 마퀴)이
   하나라도 있으면 섹션이 max-width 까지 부풀어 화면 밖으로 나갑니다. */
.lp-section {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 104px) clamp(20px, 5vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  max-width: 20ch;
}

.lp-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }

.lp-lede {
  margin: 18px 0 0;
  font-size: clamp(16px, 2vw, 17px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40ch;
}

.lp-fine {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ── 히어로 ── */
.lp-hero {
  position: relative;
  isolation: isolate;          /* 데코를 히어로 안에서만 겹치게 하는 stacking 컨텍스트 */
  width: 100%;                 /* .lp-section 과 같은 이유 — 위 주석 참고 */
  max-width: var(--container-hero);
  margin: 0 auto;
  /* 위 패딩만 살짝 키워 히어로 콘텐츠를 조금 아래로 내림 (기존 80~112 → 120~152). */
  padding: clamp(120px, 13.5vw, 152px) clamp(20px, 5vw, 28px) clamp(72px, 10vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── 히어로 배경 데코 — 나선 라인 + 소프트 퍼플 글로우 ──
   순수 CSS/인라인 SVG(외부 에셋 없음). 텍스트 뒤에서 은은하게 깔립니다.
   색은 토큰(--accent/--bg-glow)으로 라이트·다크 자동 대응, 가장자리는 mask 로 소멸. */
.lp-hero-deco {
  position: absolute;
  inset: 0;
  z-index: 0;                   /* 콘텐츠(z-index:1) 아래 */
  pointer-events: none;
  overflow: hidden;            /* 나선을 히어로 박스로 클립(버튼 그림자는 형제라 영향 없음) */
  /* 중심은 진하게, 가장자리로 갈수록 자연스레 사라지도록 */
  -webkit-mask-image: radial-gradient(125% 108% at 50% 44%, #000 40%, transparent 80%);
          mask-image: radial-gradient(125% 108% at 50% 44%, #000 40%, transparent 80%);
}

/* 중앙 소프트 글로우 */
.lp-hero-deco::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(820px, 116%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              var(--bg-glow) 0%,
              var(--bg-glow-soft) 32%,
              transparent 66%);
}

/* 나선 라인 */
.lp-hero-spiral {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(740px, 108%);
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  animation: lp-spiral-spin 90s linear infinite;   /* 아주 느린 회전 — 살아있되 차분하게 */
}

.lp-hero-spiral path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* 확대해도 선 굵기 유지 */
}

@keyframes lp-spiral-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 히어로 콘텐츠는 데코 위로 올립니다. */
.lp-hero > :not(.lp-hero-deco) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-spiral { animation: none; }
}

@media (max-width: 640px) {
  /* 모바일: 나선을 더 크게 깔되 mask 로 더 빨리 소멸시켜 텍스트 가독성 유지 */
  .lp-hero-spiral { width: 132%; }
  .lp-hero-deco {
    -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 72%);
            mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 72%);
  }
}

.lp-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
  color: var(--text);
}

.lp-hero-lede {
  margin: 24px 0 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 36ch;
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.lp-hero-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-muted);
}

.lp-hero-marks li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lp-hero-marks li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
}

/* 마무리 CTA 의 마크는 가운뎃점 구분(시안). */
.lp-hero-marks--center li::before { display: none; }
.lp-hero-marks--center li:not(:last-child)::after {
  content: "·";
  margin-left: 22px;
  color: var(--text-faint);
}

/* ── 후기 마퀴 (왼쪽으로 무한 흐름) ──
   카드 묶음(.lp-marquee-group)을 두 벌 깔고 트랙을 정확히 한 벌 폭만큼 왼쪽으로 옮깁니다.
   묶음마다 오른쪽 여백을 한 칸 붙여 두어 '한 벌 폭 = 트랙의 50%' 가 정확히 맞습니다.
   (여백을 트랙 gap 으로 주면 50% 가 반 칸씩 어긋나 이음매가 튑니다.) */
.lp-marquee {
  --lp-marquee-gap: 20px;
  --lp-marquee-w: 320px;    /* 카드 폭 — 높이는 가장 긴 후기에 맞춰 자동으로 통일 */
  --lp-marquee-speed: 40s;  /* 한 바퀴 도는 시간. 카드당 5초쯤이 자연스럽습니다 */

  /* 랜딩 본문 폭(.lp-section, 최대 1000px)에 맞춥니다 */
  width: 100%;
  max-width: 100%;
  min-width: 0;             /* flex 항목이 트랙 내용 폭만큼 늘어나지 않도록 */
  margin-top: 44px;

  /* position 이 static 이면 WebKit(iOS 사파리)이 애니메이션 중인 트랙을
     별도 레이어로 올리면서 overflow 를 무시해 화면 밖으로 삐져나갑니다.
     containing block 을 만들어 확실히 잘라냅니다. */
  position: relative;
  overflow: hidden;         /* 사파리 16 미만 대비 */
  overflow: clip;           /* 지원하면: 스크롤 컨테이너를 아예 만들지 않음 */

  /* 양 끝을 서서히 지워 잘린 카드가 튀지 않게 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lp-marquee-track {
  display: flex;
  width: max-content;
  animation: lp-marquee-scroll var(--lp-marquee-speed) linear infinite;
}

/* 읽고 싶을 때 멈출 수 있게 */
.lp-marquee:hover .lp-marquee-track,
.lp-marquee:focus-within .lp-marquee-track { animation-play-state: paused; }

@keyframes lp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.lp-marquee-group {
  display: flex;
  gap: var(--lp-marquee-gap);
  margin: 0 var(--lp-marquee-gap) 0 0;
  padding: 0;
  list-style: none;
}

.lp-marquee-card {
  flex: none;
  width: var(--lp-marquee-w);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 24px 24px 20px;
  text-align: left;
  display: flex;            /* 카드끼리 높이가 같아지고, 작성자 줄이 바닥에 붙습니다 */
}

.lp-review {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lp-review-body {
  flex: 1;                 /* 본문이 짧아도 작성자 줄은 카드 바닥에 정렬 */
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-body);
}

.lp-review-by {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--text-muted);
}

.lp-review-by cite { font-style: normal; font-weight: 600; color: var(--text); }

/* 모션을 줄이기로 한 사용자에게는 흐르지 않게 하고, 대신 손으로 밀어볼 수 있게.
   iOS 의 '동작 줄이기' 가 켜져 있으면 여기로 오므로, 가로로 끝까지 민 뒤 페이지까지
   끌려가지 않도록(스크롤 체이닝) overscroll-behavior 로 막습니다. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .lp-marquee-track { animation: none; }
  .lp-marquee-group[aria-hidden='true'] { display: none; }
}

/* ── 성과 지표 ── */
.lp-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 52px;
}

.lp-stat {
  padding: 8px 20px;
  text-align: center;
}
.lp-stat + .lp-stat { border-left: 1px solid var(--divider); }

.lp-stat-num {
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;      /* '14,000' 이 줄바꿈되지 않게 */
  color: var(--accent);
}

.lp-stat-unit { font-size: .5em; color: var(--text-faint); }

.lp-stat-label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted);
  word-break: keep-all;     /* 좁을 때 '누적 제작 / 영상' 처럼 어절 단위로만 접히게 */
}

/* 좁은 화면에서도 3열을 유지합니다. 하한은 320px(구형 SE·저가 안드로이드) 기준 —
   좌우 패딩 20px 을 빼면 칸당 약 93px 이라, 숫자·여백·라벨을 그 안에 맞춰 줄입니다.
   경계를 700px 로 잡은 이유: 기본 규칙의 숫자 하한이 38px 이라 '14,000개+' 가 약 142px 을
   먹는데, 칸 폭이 그만큼 확보되는 게 대략 600px 부터입니다. 여유를 두고 넘깁니다. */
@media (max-width: 700px) {
  .lp-stats { margin-top: 36px; }
  .lp-stat { padding: 8px clamp(6px, 2vw, 20px); }
  /* 5.6vw 는 678px 에서 38px 에 닿아, 경계 너머 기본 규칙(38px)과 자연스럽게 이어집니다. */
  .lp-stat-num { font-size: clamp(19px, 5.6vw, 38px); }
  .lp-stat-unit { font-size: .46em; }
  .lp-stat-label { margin-top: 7px; font-size: clamp(11.5px, 1.9vw, 14px); line-height: 1.35; }
}

/* ── 네이버 카페 채널 카드 ── */
.lp-channel {
  width: 100%;
  max-width: 760px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
  text-align: left;
  border-color: var(--border-strong);
}

/* min-width: 0 이 없으면 flex 항목의 자동 최소폭(min-content) 때문에 글이 줄어들지 못하고
   카드를 밀어내, 화살표가 밖으로 밀리거나 아래로 떨어집니다. */
.lp-channel-body {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lp-channel-text { min-width: 0; }

.lp-channel-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--naver);
  color: var(--naver-on);
  font-weight: 800;
  font-size: 18px;
}

/* 한글은 기본값(word-break: normal)이면 글자 단위로 아무 데서나 접힙니다.
   keep-all 로 어절 단위로만 접히게 해 '인증 보'/'기' 같은 어색한 줄바꿈을 막습니다. */
.lp-channel-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  word-break: keep-all;
}

.lp-channel-sub {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-muted);
  word-break: keep-all;
}

.lp-channel-arrow { flex: none; font-size: 20px; color: var(--text-muted); }

/* ── 지그재그 이유 행 ── */
.lp-reasons {
  width: 100%;
  max-width: 900px;
  margin-top: 44px;
  border-bottom: 1px solid var(--divider);
}

.lp-reason {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 48px;
  /* baseline 정렬 + 큰 숫자는 위 경계선을 넘어 겹칩니다 — start 로 각 칸 상단부터 쌓습니다. */
  align-items: start;
  padding: clamp(36px, 5vw, 52px) 0;
  border-top: 1px solid var(--divider);
  text-align: left;
}

.lp-reason--flip { grid-template-columns: 1.28fr 0.72fr; }

.lp-reason-index--right { text-align: right; }

/* 방식 변경: 외곽선(스트로크)은 굵은 글자에서 '4' 내부 획이 겹쳐 지저분했습니다.
   겹칠 획이 없는 채운(solid) 숫자로 바꿉니다 — 간결하고 확실합니다. */
.lp-reason-num {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--accent);
}

.lp-reason-tag {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lp-reason-body h3 {
  margin: 0;
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.22;
  color: var(--text);
}

.lp-reason-body p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-body);
  max-width: 46ch;
}

/* ── HOW 3카드 ── */
.lp-how {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.lp-how-card { text-align: left; }

.lp-how-num { font-size: 14px; font-weight: 700; color: var(--accent); }

.lp-how-card h3 {
  margin: 18px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.lp-how-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-body);
}

/* ── 마무리 CTA ── */
.lp-final {
  width: 100%;                 /* .lp-section 과 같은 이유 — 위 주석 참고 */
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: clamp(80px, 11vw, 104px) clamp(20px, 5vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-final-title {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.lp-final .btn { margin-top: 16px; }

/* ── 반응형 ── */
@media (max-width: 760px) {
  .lp-reason,
  .lp-reason--flip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .lp-reason-index--right { text-align: left; order: -1; }
  .lp-how { grid-template-columns: 1fr; }
  /* 세로 배치(flex-direction: column)를 쓰면 화살표가 글 아래로 떨어집니다.
     가로를 유지한 채 배지·여백·글자만 줄여 한 줄 안에 담습니다. */
  .lp-channel { gap: 12px; padding: 18px 16px; }
  .lp-channel-body { gap: 12px; }
  .lp-channel-badge { width: 38px; height: 38px; font-size: 16px; border-radius: var(--radius-md); }
  .lp-channel-title { font-size: 14.5px; }
  .lp-channel-sub { margin-top: 3px; font-size: 12px; }
  .lp-channel-arrow { font-size: 18px; }
  .lp-marquee { --lp-marquee-w: 272px; --lp-marquee-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}