/* WindStory 랜딩 재설계 공통 CSS — v2~v5 공유 토큰·컴포넌트.
   각 버전 템플릿은 이 파일을 링크한 뒤 자체 <style>로 테마(라이트/다크/웜/잉크)를 덧입힌다.
   원칙: 텍스트는 HTML(이미지에 굽지 않음), Pretendard 단일 폰트로 3언어 커버, 경량. */

/* ── Pretendard (한글+라틴 커버) ───────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  /* 4버전 공통 고정 토큰 (기존 index.html:39-42 승계) */
  --ds-accent: #4f46e5;
  --ds-accent-hover: #4338ca;
  --ds-accent-2: #7c3aed;
  --ds-text-strong: #111827;
  --ds-text-soft: #6b7280;
  --ds-text-mute: #9ca3af;
  --ds-radius: 16px;
  --ds-radius-lg: 24px;
  --ds-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', sans-serif;
  --ds-maxw: 1200px;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--ds-font); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
.ls-container { width: 100%; max-width: var(--ds-maxw); margin: 0 auto; padding: 0 24px; }
.ls-section { padding: 96px 0; }
@media (max-width: 768px) { .ls-section { padding: 64px 0; } }

/* 헤드라인 반응형 (clamp) */
.ls-h1 { font-size: clamp(34px, 6vw, 68px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.ls-h2 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.ls-lead { font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.ls-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ds-font); font-weight: 700; font-size: 16px; padding: 14px 26px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: all .2s var(--ds-ease);
  white-space: nowrap; }
.ls-btn-primary { background: var(--ds-accent); color: #fff; }
.ls-btn-primary:hover { background: var(--ds-accent-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(79,70,229,.28); }
.ls-btn-ghost { background: transparent; color: var(--ds-text-strong); border-color: #e2e8f0; }
.ls-btn-ghost:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ls-btn-lg { padding: 16px 32px; font-size: 17px; }

/* ── 공통 유틸 ─────────────────────────────────────────────────────────── */
.ls-grad-text { background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ls-tabnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.ls-muted { color: var(--ds-text-soft); }
.ls-center { text-align: center; }

/* 도트그리드 배경 (라이트) */
.ls-dotgrid { background-image: radial-gradient(#e7e9ee 1px, transparent 1px); background-size: 24px 24px; }
/* 블루프린트 라인 그리드 (다크) */
.ls-linegrid { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; }

/* ── 무한 마퀴 (스타일 갤러리) ────────────────────────────────────────── */
.ls-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ls-marquee-track { display: flex; gap: 16px; width: max-content; animation: ls-marquee 40s linear infinite; }
.ls-marquee:hover .ls-marquee-track { animation-play-state: paused; }
@keyframes ls-marquee { to { transform: translateX(-50%); } }

/* ── 스크롤 등장 애니 ─────────────────────────────────────────────────── */
.ls-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ds-ease), transform .7s var(--ds-ease); }
.ls-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  .ls-marquee-track { animation: none; }
  .ls-reveal { opacity: 1; transform: none; }
}

/* 모바일 하단 고정 CTA 바 */
.ls-mobile-cta { display: none; }
@media (max-width: 768px) {
  .ls-mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-top: 1px solid #eef0f4; }
  .ls-mobile-cta .ls-btn { flex: 1; }
}