/* ── Landing Page Styles ── */

/* Smooth scroll for anchor links */
html:has(#landing-root) {
  scroll-behavior: smooth;
}

/* Korean copy: never break inside a word (어절 분리 금지) */
#landing-root {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Brand Clay 시맨틱 쌍 (brand-renewal 2026-08-23) ──
   원시 스케일은 tokens.css :root --color-clay-* (모드 무관 재료).
   application.css .dark 블록은 건드리지 않는다(토큰 검사기 원장 보호) —
   다크 쌍은 여기의 .dark #landing-root / [data-landing-theme="dark"] 로만.
   🔴 --brand-solid(히어로·CTA 밴드 클레이 블록)는 다크에서도 clay500 유지 —
   블록 위 글자가 크림 고정이라 "밝은 면+어두운 글자" 반전 대상이 아니다. */
#landing-root {
  --brand-solid: var(--color-clay-500);            /* 히어로·CTA 밴드 포스터 블록 (모드 무관) */
  --brand-solid-hover: var(--color-clay-600);
  --brand-cream: var(--color-clay-100);            /* 크림 = 아이콘 스트로크 (모드 무관) */
  --brand-on-solid: var(--color-clay-100);         /* 클레이 블록 위 글자 = 크림 */
  --brand-fill: var(--color-clay-500);             /* 소형 채움(스텝 번호·칩) — 다크는 밝은 면 */
  --brand-fill-hover: var(--color-clay-600);
  --brand-on-fill: var(--color-clay-100);          /* 채움 위 글자 — 다크는 어두운 글자로 반전 */
  --brand-text: var(--color-clay-700);             /* 크림·표면 위 브랜드 글자 */
  --brand-eyebrow: var(--color-clay-500);          /* 섹션 eyebrow */
  --brand-tint: var(--color-clay-50);              /* 옅은 브랜드 틴트 면 */
  --brand-tint-strong: var(--color-clay-100);
  --brand-court-line: rgba(245, 230, 211, 0.35);   /* 코트 라인 = 크림 35% (모드 무관) */
}
/* 다크 쌍의 키는 data-landing-theme 하나만 — `.dark #landing-root` 를 함께 걸면
   문서가 다크로 시작한 뒤 랜딩 토글을 라이트로 바꿔도 .dark 규칙이 계속 이겨
   라이트 쌍이 적용되지 않는다(codex P2, 2026-08-23). 초기 동기화는
   landing_theme_controller 의 connect() 가 attribute 를 세팅해서 담당한다. */
#landing-root[data-landing-theme="dark"] {
  --brand-fill: #d9875a;          /* clay400 상당 — 다크는 면을 밝히고 글자를 어둡게 (§1.12-1) */
  --brand-fill-hover: var(--color-clay-400);
  --brand-on-fill: var(--color-clay-900);
  --brand-text: #d9875a;
  --brand-eyebrow: #d9875a;
  --brand-tint: #2a1a12;
  --brand-tint-strong: #3a2418;
}

/* ── 마케팅 표면 시맨틱 쌍 --lp-* (T5, 2026-08-23) ──
   출처 = landing_theme_controller 가 인라인으로 덮어쓰던 값 그대로 이전.
   랜딩의 네이비 다크 팔레트는 제품 .dark 토큰 체계와 별개인 마케팅 정체성이라
   --brand-*(클레이) 와 네임스페이스를 분리한다(--lp = landing page).
   인라인 style 이 CSS 를 이기던 구조를 걷어내 뷰의 hex/rgba 를 0 으로 만든다.
   🔴 다크 쌍의 키는 --brand-* 와 동일하게 data-landing-theme 하나만 (위 주석의 codex P2). */
#landing-root {
  --lp-canvas: #fff;                          /* 루트 캔버스 */
  --lp-section: transparent;                  /* 기본 섹션 — 라이트는 캔버스 통과 */
  --lp-surface-alt: #f8fafc;                  /* 교대 섹션 면 */
  --lp-card: #fff;                            /* 카드 면 */
  --lp-card-line: #f1f5f9;                    /* 카드 선 */
  --lp-nav-bg: rgba(255, 255, 255, 0.9);      /* NAV 반투명 면 */
  --lp-nav-line: rgba(0, 0, 0, 0.06);
  --lp-nav-link: #6b7280;                     /* NAV 보조 링크 — 라이트만 body 톤, 다크는 muted 로 합류(기존 동작 보존) */
  --lp-heading: #111;
  --lp-body: #6b7280;
  --lp-muted: #9ca3af;
  --lp-btn2-bg: rgba(0, 0, 0, 0.04);          /* 2차 버튼(흰 면 위 스토어 버튼) */
  --lp-btn2-line: rgba(0, 0, 0, 0.08);
  --lp-btn2-text: #4b5563;
  --lp-toggle-bg: #fff;                       /* 테마 토글 FAB */
  --lp-toggle-line: rgba(0, 0, 0, 0.1);
  --lp-footer-bg: transparent;
  --lp-footer-line: #e2e8f0;

  /* 모드 무관(라이트/다크 동일) — 컨트롤러가 덮어쓰지 않았던 정적 값 그대로 이전.
     이 셋만 다크 쌍이 없다: 기존 렌더를 바꾸지 않기 위함이며 새 값을 만들지 않는다. */
  --lp-divider: #f1f5f9;                      /* 기능 행 구분선 (FEATURES) */
  --lp-divider-strong: #e2e8f0;               /* 기능 행 구분선 (교대 섹션) */
  --lp-copyright: #d1d5db;                    /* 푸터 저작권 */

  /* 클레이 포스터 블록(히어로·CTA 밴드) 위 크림 알파 — 모드 무관.
     --brand-cream(불투명 크림)의 알파 파생이라 --brand-* 선언은 건드리지 않는다. */
  --lp-cream-fill: rgba(245, 230, 211, 0.08); /* 크림 외곽선 버튼 채움 */
  --lp-cream-badge: rgba(245, 230, 211, 0.12);
  --lp-cream-badge-line: rgba(245, 230, 211, 0.3);
  --lp-cream-line: rgba(245, 230, 211, 0.35); /* = --brand-court-line 과 같은 35% */
  --lp-cream-soft: rgba(245, 230, 211, 0.6);  /* 신뢰 배지·보조 문구 */
  --lp-cream-strong: rgba(245, 230, 211, 0.78); /* 포스터 본문 */
}
#landing-root[data-landing-theme="dark"] {
  --lp-canvas: #0c1222;
  --lp-section: #0c1222;
  --lp-surface-alt: #131c30;
  --lp-card: #131c30;
  --lp-card-line: rgba(255, 255, 255, 0.06);
  --lp-nav-bg: rgba(12, 18, 34, 0.9);
  --lp-nav-line: rgba(255, 255, 255, 0.06);
  --lp-nav-link: rgba(241, 245, 249, 0.3);
  --lp-heading: #f1f5f9;
  --lp-body: rgba(241, 245, 249, 0.5);
  --lp-muted: rgba(241, 245, 249, 0.3);
  --lp-btn2-bg: rgba(255, 255, 255, 0.06);
  --lp-btn2-line: rgba(255, 255, 255, 0.1);
  --lp-btn2-text: rgba(255, 255, 255, 0.7);
  /* 다크 토글 면은 앱 .dark 카드(#262231)에 정렬 — 나머지 네이비는 마케팅 팔레트 (T1 주석 유지) */
  --lp-toggle-bg: #262231;
  --lp-toggle-line: rgba(255, 255, 255, 0.1);
  --lp-footer-bg: #0c1222;
  --lp-footer-line: rgba(255, 255, 255, 0.06);
}

/* --lp-* 소비 유틸 — 뷰는 인라인 style 대신 이 클래스만 쓴다 */
#landing-root { background: var(--lp-canvas); }

.lp-nav {
  background: var(--lp-nav-bg);
  border-bottom: 1px solid var(--lp-nav-line);
}
.lp-nav-link { color: var(--lp-nav-link); }
.lp-section { background: var(--lp-section); }
.lp-surface-alt { background: var(--lp-surface-alt); }
.lp-card {
  background: var(--lp-card);
  border-color: var(--lp-card-line);
}
.lp-heading { color: var(--lp-heading); }
.lp-body { color: var(--lp-body); }
.lp-muted { color: var(--lp-muted); }
.lp-copyright { color: var(--lp-copyright); }
.lp-divider { border-top: 1px solid var(--lp-divider); }
.lp-divider-strong { border-top: 1px solid var(--lp-divider-strong); }
.lp-footer {
  background: var(--lp-footer-bg);
  border-top: 1px solid var(--lp-footer-line);
}
.lp-btn2 {
  background: var(--lp-btn2-bg);
  border: 1px solid var(--lp-btn2-line);
  color: var(--lp-btn2-text);
}
.lp-toggle {
  background: var(--lp-toggle-bg);
  border-color: var(--lp-toggle-line);
}

/* 클레이 포스터 블록 위 크림 요소 — 모드 무관 */
.lp-poster-badge {
  background: var(--lp-cream-badge);
  border: 1px solid var(--lp-cream-badge-line);
  color: var(--brand-cream);
}
.lp-poster-body { color: var(--lp-cream-strong); }
.lp-poster-note { color: var(--lp-cream-soft); }
.lp-btn-cream-outline {
  background: transparent;
  border: 1px solid var(--lp-cream-line);
  color: var(--brand-cream);
}
.lp-btn-cream-fill {
  background: var(--lp-cream-fill);
  border: 1px solid var(--lp-cream-line);
  color: var(--brand-cream);
}

/* 코트 라인 모티프 — 클레이 블록 위 크림 선 (히어로·CTA 밴드) */
.landing-court {
  position: relative;
  overflow: hidden;
}
.landing-court::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid var(--brand-court-line);
  border-radius: 6px;
  pointer-events: none;
}
.landing-court::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  border-top: 2px solid var(--brand-court-line);
  pointer-events: none;
}
.landing-court > * {
  position: relative;
  z-index: 1;
}

/* 히어로·CTA 밴드 강조어 — 크림 유지 + 코트 라인 밑줄 */
.landing-hero-accent {
  color: var(--brand-cream);
  text-decoration: underline;
  text-decoration-color: rgba(245, 230, 211, 0.45);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
@media (min-width: 1024px) {
  .landing-court::before {
    inset: 28px;
  }
  .landing-court::after {
    left: 28px;
    right: 28px;
  }
}

/* App store download buttons (App Store / Google Play) */
.landing-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.875rem;
  padding: 0.5rem 1.25rem;
  min-height: 52px;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.landing-store-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Scroll reveal */
.landing-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-reveal-delay-1 { transition-delay: 0.1s; }
.landing-reveal-delay-2 { transition-delay: 0.2s; }

/* Feature number label */
.landing-feature-num {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  /* brand-renewal 2026-08-23: eyebrow 는 클레이 (라이트 clay500 / 다크 #d9875a) */
  color: var(--brand-eyebrow);
}

/* Device frame for GIFs */
.landing-device-frame {
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
}
.landing-device-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent);
}
.landing-device-frame img,
.landing-device-frame video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Dark theme device frame
   🔴 글로우는 primary-600 이다. 이 규칙 자체는 예전부터 있었지만 landing_theme_controller
   가 인라인으로 rgba(5,150,105,.08)=primary-600 을 덮어써서 실제로는 600 이 보였다.
   인라인 스타일링을 걷어낸 지금 var(--color-primary)(=500)를 그대로 두면 글로우 색이
   조용히 바뀐다 — 이전과 같은 화면을 유지하려고 600 으로 고정한다(codex P2, 2026-08-23).
   셀렉터도 #landing-root 로 스코프한다 — 다크 쌍의 키는 이 한 형태뿐이라는 규칙(위 주석). */
#landing-root[data-landing-theme="dark"] .landing-device-frame {
  background: #131c30;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 120px color-mix(in srgb, var(--color-primary-600) 8%, transparent);
}
#landing-root[data-landing-theme="dark"] .landing-device-frame::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary-600) 30%, transparent), transparent);
}

/* CTA shimmer */
.landing-cta-btn {
  position: relative;
  overflow: hidden;
}
.landing-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: landing-shimmer 3s ease-in-out infinite;
}
@keyframes landing-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Float badge */
@keyframes landing-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.landing-float { animation: landing-float 3s ease-in-out infinite; }

/* Section spacing for CTA areas */
.landing-cta-actions {
  margin-top: 2.75rem;
}

@media (min-width: 640px) {
  .landing-cta-actions {
    gap: 1.25rem;
  }

  .landing-cta-link {
    min-width: 12rem;
  }
}

/* Feature rows with GIF + text */
.landing-feature-row {
  gap: 3rem;
}
.landing-feature-row--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem 3.5rem;
}

/* SPORTS cards */
.landing-sports-grid {
  column-gap: 1.25rem;
}

@media (min-width: 1024px) {
  .landing-cta-actions {
    gap: 1.5rem;
  }

  .landing-cta-link {
    min-width: 13.5rem;
    padding-inline: 3rem;
  }

  .landing-feature-row {
    gap: 5rem;
  }

  .landing-feature-row--wide {
    gap: 5rem 5.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-sports-grid {
    column-gap: 1.5rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landing-reveal,
  .landing-reveal * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}