/* landing3d.css — 3D 리빌드 프로토타입 (밝은 핑크 공간 + 스크롤 스토리)
   원칙: 다크 금지 — 루미 라이트(화이트→핑크) 위에 3D 깊이만 얹는다. */

html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  color: var(--ink, #1d1d1f);
  /* 밝은 무대 — 흰빛에서 핑크로 떨어지는 부드러운 공간감 */
  background:
    radial-gradient(120% 90% at 85% -10%, #ffe3ec 0%, rgba(255, 227, 236, 0) 55%),
    radial-gradient(110% 80% at -10% 110%, #ffeef3 0%, rgba(255, 238, 243, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fff6f9 100%);
  min-height: 100%;
}

.l3d-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.l3d-track { position: relative; z-index: 2; height: 520vh; }

.l3d-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  z-index: 3;
}
.l3d-logo {
  font-weight: 800; font-size: 26px; letter-spacing: -0.02em;
  background: linear-gradient(105deg, #ff8ba7, #ffb86b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-decoration: none;
}
.l3d-nav { display: flex; align-items: center; gap: 8px; }
.l3d-nav a {
  text-decoration: none; font-size: 14px; font-weight: 700;
  border-radius: 999px; padding: 8px 16px;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.l3d-nav__beta {
  color: #fff;
  background: linear-gradient(105deg, #ff5c8a, #ff8ba7);
  box-shadow: 0 6px 16px rgba(255, 92, 138, 0.28);
}
.l3d-nav__login { color: #8a7b82; }
@media (hover: hover) {
  .l3d-nav__beta:hover { box-shadow: 0 8px 22px rgba(255, 92, 138, 0.4); }
  .l3d-nav__login:hover { color: #ff5c8a; background: #fff1f5; }
}

/* 비트 텍스트 — 고정 오버레이, JS 가 진행도에 따라 페이드 */
.l3d-beat {
  position: fixed;
  left: 50%;
  bottom: clamp(48px, 12vh, 120px);
  transform: translateX(-50%) translateY(14px);
  width: min(92vw, 560px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms ease;
  z-index: 2;
}
.l3d-beat.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.l3d-title {
  font-size: clamp(34px, 9vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 900;
  margin: 0 0 14px;
  word-break: keep-all;
}
.l3d-title em, .l3d-h2 em {
  font-style: normal;
  background: linear-gradient(105deg, #ff5c8a, #ff8ba7 55%, #ffb86b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.l3d-h2 {
  font-size: clamp(26px, 6.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin: 0 0 12px;
  word-break: keep-all;
}
.l3d-sub {
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.6;
  color: #8a7b82;
  margin: 0;
  word-break: keep-all;
}
.l3d-scroll-hint {
  margin-top: 22px;
  font-size: 20px;
  color: #ff8ba7;
  animation: l3dBob 1.6s ease-in-out infinite;
}
@keyframes l3dBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.l3d-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 15px 30px;
  border-radius: 999px;
  background: linear-gradient(105deg, #ff5c8a, #ff8ba7 60%, #ffb86b);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(255, 92, 138, 0.35);
}

.l3d-fallback[hidden] { display: none; }
.l3d-fallback {
  /* 흐름 요소 — 본편을 덮지 않고 위에 얹히는 정적 히어로 (3D 불가 시) */
  position: relative; z-index: 2;
  min-height: 62vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 13vh 24px 7vh;
}
.l3d-fallback .l3d-cta { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .l3d-scroll-hint { animation: none; }
}

/* ════════ 2~5장 본편 (3D 스토리 뒤 일반 스크롤) ════════ */
.l3-body { position: relative; z-index: 2; padding: 8vh 0 0; }

.l3s {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) 22px;
  text-align: center;
}
.l3s[data-rv] { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 600ms ease; }
.l3s.is-in { opacity: 1; transform: none; }

.l3s-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  color: #ff5c8a; margin: 0 0 10px;
}
.l3s-title {
  font-size: clamp(26px, 6.6vw, 42px);
  line-height: 1.18; letter-spacing: -0.03em; font-weight: 900;
  margin: 0 0 12px; word-break: keep-all;
}
.l3s-title em { font-style: normal; background: linear-gradient(105deg, #ff5c8a, #ff8ba7 55%, #ffb86b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l3s-sub { font-size: clamp(14px, 3.7vw, 17px); color: #8a7b82; margin: 0 0 18px; word-break: keep-all; }
.l3s-note { font-size: 12.5px; color: #b9aab1; margin: 14px 0 0; word-break: keep-all; }

/* 공용 카드 결 */
.l3-report, .l3-demo, .l3-price {
  background: #fff;
  border: 1px solid #f3e2e9;
  border-radius: 22px;
  box-shadow: 0 22px 54px rgba(180, 110, 135, 0.13);
  text-align: left;
  overflow: hidden;
}

/* ── 2장 리포트 ── */
.l3-report { padding: 18px; }
.l3-report__verdict { background: #fff1f5; border: 1px solid #ffd3e0; border-radius: 14px; padding: 12px 14px; }
.l3-report__vrow { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; margin-top: 6px; word-break: keep-all; }
.l3-report__vrow:first-child { margin-top: 0; }
.l3-report__vk { flex-shrink: 0; min-width: 58px; font-weight: 800; color: #ff5c8a; }
.l3-report__vrow--gap .l3-report__vk { color: #3c3137; }
.l3-report__vrow--gap span:last-child { font-weight: 700; }
.l3-report__cmp { margin: 14px 2px 0; }
.l3-report__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; padding: 9px 6px; font-size: 13.5px; border-bottom: 1px solid #f7ecf1; align-items: center; }
.l3-report__row:last-child { border-bottom: none; }
.l3-report__row span { color: #8a7b82; }
.l3-report__row b { font-weight: 700; color: #b9aab1; text-align: right; }
.l3-report__row b.is-theirs { color: #ff4d80; font-weight: 800; }
.l3-report__todo { margin-top: 12px; }
.l3-report__todo-label { font-size: 12px; font-weight: 800; color: #b07b1f; background: #fff3d6; display: inline-block; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px; }
.l3-report__idea { display: flex; align-items: center; gap: 12px; background: #faf4f6; border-radius: 14px; padding: 12px 14px; }
.l3-report__idea-title { font-size: 14px; font-weight: 800; }
.l3-report__idea-sub { font-size: 12.5px; color: #8a7b82; margin-top: 2px; word-break: keep-all; }
.l3-report__idea-go { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 800; color: #ff5c8a; }

/* ── 3장 데모 ── */
.l3-demo { padding: 16px 16px 18px; }
.l3-demo__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.l3-demo__avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff8ba7, #ffb86b); }
.l3-demo__handle { font-weight: 800; font-size: 14px; }
.l3-demo__badge { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #00713c; background: #e8f5ee; padding: 5px 10px; border-radius: 100px; }
.l3-demo__photo { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.l3-demo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l3-demo__actions { display: flex; align-items: center; gap: 14px; padding: 12px 2px 0; }
.l3-demo__icon { width: 24px; height: 24px; color: #3c3137; }
.l3-demo__icon--like { color: #ff4d6d; }
.l3-demo__icon--save { margin-left: auto; }
.l3-demo__likes { font-size: 13.5px; font-weight: 800; color: #3c3137; padding: 6px 2px 0; }
.l3-demo__cap { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; font-size: 14px; line-height: 1.5; }
.l3-demo__line { opacity: 0; animation: l3CapIn 7s ease infinite; word-break: keep-all; }
.l3-demo__line--1 { animation-delay: 0.4s; }
.l3-demo__line--2 { animation-delay: 1.1s; }
.l3-demo__line--3 { animation-delay: 1.8s; color: #ff5c8a; font-weight: 700; }
@keyframes l3CapIn {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-4px); }
}
.l3-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 18px 0 0; counter-reset: l3step; }
.l3-steps li {
  counter-increment: l3step;
  flex: 1; background: #fff; border: 1px solid #f3e2e9; border-radius: 14px;
  padding: 30px 10px 12px; font-size: 12.5px; color: #8a7b82; position: relative; word-break: keep-all;
}
.l3-steps li b { color: #3c3137; }
.l3-steps li::before {
  content: counter(l3step);
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #ff5c8a; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ── 4장 — 지금 방법 vs 루미 (3카드) ── */
.l3-vs { display: flex; flex-direction: column; gap: 12px; }
.l3-vs__card {
  background: #fff; border: 1px solid #f3e2e9; border-radius: 18px;
  box-shadow: 0 14px 34px rgba(180, 110, 135, 0.10);
  padding: 16px 18px; text-align: left;
}
.l3-vs__way { font-size: 15px; font-weight: 800; color: #3c3137; margin-bottom: 7px; }
.l3-vs__pain {
  font-size: 13px; color: #b9aab1; margin-bottom: 11px; padding-bottom: 11px;
  border-bottom: 1px dashed #f0dde4; word-break: keep-all;
}
.l3-vs__lumi { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; color: #3c3137; word-break: keep-all; line-height: 1.5; }
.l3-vs__lumi b {
  flex-shrink: 0; color: #fff; background: linear-gradient(105deg, #ff5c8a, #ff8ba7);
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 100px;
  align-self: flex-start; position: relative; top: 1px;
}

/* ── 5장 요금 ── */
.l3-price { padding: 22px 20px; text-align: center; border-color: #ffc2d2; }
.l3-price__list { list-style: none; padding: 0; margin: 0 0 18px; text-align: left; }
.l3-price__list li { font-size: 14px; padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid #faf0f4; word-break: keep-all; }
.l3-price__list li:last-child { border-bottom: none; }
.l3-price__list li::before { content: '✓'; position: absolute; left: 4px; color: #ff5c8a; font-weight: 800; }
.l3-price__hint { font-size: 12px; color: #b9aab1; margin: 10px 0 0; }
.l3-cta {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(105deg, #ff5c8a, #ff8ba7 60%, #ffb86b);
  color: #fff; font-weight: 800; font-size: 16px; text-decoration: none;
  box-shadow: 0 12px 30px rgba(255, 92, 138, 0.32);
}
.l3-cta--big { font-size: 18px; padding: 16px 34px; }

/* ── FAQ ── */
.l3-faq { text-align: left; }
.l3-faq__item { background: #fff; border: 1px solid #f3e2e9; border-radius: 14px; margin-bottom: 8px; padding: 0 16px; }
.l3-faq__item summary { cursor: pointer; font-size: 14.5px; font-weight: 700; padding: 14px 0; list-style: none; position: relative; padding-right: 26px; word-break: keep-all; }
.l3-faq__item summary::-webkit-details-marker { display: none; }
.l3-faq__item summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: #ff8ba7; font-weight: 800; font-size: 18px; }
.l3-faq__item[open] summary::after { content: '–'; }
.l3-faq__item p { font-size: 13.5px; color: #8a7b82; line-height: 1.65; margin: 0 0 14px; word-break: keep-all; }

.l3s--final { padding-bottom: 28px; }

.l3-foot {
  text-align: center; font-size: 11.5px; color: #c4b4bc; line-height: 1.8;
  padding: 26px 20px 46px;
}
.l3-foot__links a { color: #a8959f; text-decoration: none; }

/* 2장 — 콘텐츠 비결 (분석 강화 반영) */
.l3-report__content { margin-top: 14px; }
.l3-report__secret { font-size: 13.5px; font-weight: 800; background: #fff7ed; border: 1px solid #ffe3c2; color: #8a5a1f; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; word-break: keep-all; line-height: 1.5; }
.l3-mix { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.l3-mix > span:first-child { flex: 0 0 86px; color: #8a7b82; }
.l3-mix__bar { flex: 1; height: 7px; background: #faf0f4; border-radius: 4px; overflow: hidden; }
.l3-mix__fill { display: block; height: 100%; background: linear-gradient(90deg, #ffb3c6, #ff5c8a); border-radius: 4px; }
.l3-mix__fill--60 { width: 60%; }
.l3-mix__fill--25 { width: 25%; }
.l3-mix__fill--15 { width: 15%; }
.l3-mix > b { flex: 0 0 34px; text-align: right; color: #ff4d80; font-size: 12px; }
.l3-report__cs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.l3-report__cs span { font-size: 11.5px; font-weight: 700; color: #ff5c8a; background: #fff1f5; border: 1px solid #ffd3e0; padding: 4px 9px; border-radius: 100px; }

/* ── 후기 (사용 예시) 무한 회전 캐러셀 ── */
.l3s--rev { padding-bottom: 16px; }
.l3-rev {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 14px;
  padding: 2px 0 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.l3-rev__row { overflow: hidden; }
.l3-rev__track { display: flex; gap: 14px; width: max-content; animation: l3RevScroll 64s linear infinite; }
.l3-rev__row--rev .l3-rev__track { animation-direction: reverse; animation-duration: 80s; }
.l3-rev:hover .l3-rev__track { animation-play-state: paused; }
@keyframes l3RevScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.l3-rev__card {
  flex: 0 0 auto; width: 250px; box-sizing: border-box;
  background: #fff; border: 1px solid #f3e2e9; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(180, 110, 135, 0.10);
  padding: 16px 18px; text-align: left;
}
.l3-rev__q { font-size: 14px; line-height: 1.55; color: #3c3137; margin: 0 0 12px; word-break: keep-all; }
.l3-rev__w { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: #8a7b82; }
.l3-rev__a { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff8ba7, #ffb86b); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .l3-rev__track { animation: none; }
  .l3-rev__row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .l3-rev { -webkit-mask-image: none; mask-image: none; }
}