/* mytempo.co.kr — shared styles
   컬러/타이포 토큰은 앱 실제 소스(constants/theme.ts, tailwind.config.js — 2026-07-31 프리미엄
   리디자인)와 동일하게 맞췄다. 이전엔 그 이전 세대 팔레트(#436437/#D4AF37, bg #FAF8F2)와
   시스템 폰트를 쓰고 있어 앱과 색이 미묘하게 어긋나 있었고, 브랜드 서체(Noto Sans KR / Space
   Grotesk)도 전혀 로드하지 않고 있었다.
   골드는 흰 배경 위 텍스트로 쓰면 대비가 기준 미달이라 텍스트 강조색은 --green으로 분리하고,
   골드는 막대·보더·데코 같은 채우기 용도로만 쓴다(앱의 onAccent 토큰과 같은 원칙). */

:root {
  --bg: #FBFAF6;
  --surface: #FFFFFF;
  --surface-2: #F2F0E8;
  --line: #E7E4D9;
  --track: #F0EEE6;
  --ink: #16211A;
  --muted: #5F6C5C;
  --subtle: #8A9382;
  --green: #3F6136;
  --green-deep: #2E4A24;
  --gold: #D9B84A;
  --gold-deep: #C9A431;
  --on-primary: #F2F5EE;
  --on-accent: #16211A;

  --container: 1080px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;

  --font-kr: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Space Grotesk', var(--font-kr);
}

/* 다크는 시스템 설정을 그대로 따른다(토글 없음) — 앱의 기본 동작과 동일.
   값은 앱 다크 팔레트(theme.ts darkColors)와 1:1 대응. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D110D;
    --surface: #161C15;
    --surface-2: #222A20;
    --line: #2C3629;
    --track: #232C21;
    --ink: #F2F5EE;
    --muted: #8A9782;
    --subtle: #5C6659;
    --green: #7ED45C;
    --green-deep: #4E8C39;
    --gold: #E9CE6C;
    --gold-deep: #E4C863;
    --on-primary: #0A0F09;
    --on-accent: #0A0F09;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-kr);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-word {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--muted);
}
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Sections ---------- */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h2.section-title {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  margin-bottom: 12px;
}
.section-sub {
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
  margin: 0 0 48px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--line);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 20px;
}
.hero p.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 460px;
  margin: 0 0 32px;
}
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--green-deep); }
.cta-note { font-size: 13px; color: var(--muted); }

/* ---------- Tempo Ring (hero visual) ----------
   앱의 시그니처 컴포넌트(components/TempoRing.tsx)를 웹으로 그대로 옮긴 것.
   트랙 위에 골드 링 전체 → 그 위로 백스윙 비율(3:1→75%)만큼 그린을 덮고,
   진행 점 하나가 그 비율을 실제로 돌며 "소리가 반복된다"는 감각을 전달한다.
   임의의 장식 아이콘이 아니라 앱 홈·연습 화면과 동일한 형태라 스크린샷 한 장으로도
   브랜드를 식별하게 하려는 의도(원본 주석과 동일). */
.ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring {
  width: min(300px, 78vw);
  height: min(300px, 78vw);
  position: relative;
}
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring-track { stroke: var(--track); }
.ring-gold { stroke: var(--gold); }
.ring-green { stroke: var(--green); }
.ring-dot-wrap {
  position: absolute;
  inset: 0;
  animation: ringSpin 2.6s linear infinite;
}
.ring-dot { fill: var(--ink); }
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 52px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ring-pulse — 앱의 HitRipple: 백스윙 시작(위쪽 점) · 탑(그린/골드 경계, 왼쪽 점) · 임팩트(위쪽 점, 다음 시작과 동일 지점)
   세 타이밍에 파형처럼 번졌다 사라지는 펄스. 도트 궤도(2.6s)와 같은 주기로 맞춘다. */
.ring-pulse {
  position: absolute;
  width: 11%;
  height: 11%;
  border-radius: 50%;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
}
.ring-pulse-top { top: 50%; left: 8%; }
.ring-pulse-start { background: var(--green); animation: ringPulseStart 2.6s linear infinite; }
.ring-pulse-top { background: var(--ink); animation: ringPulseTop 2.6s linear infinite; }
.ring-pulse-impact { background: var(--gold); animation: ringPulseImpact 2.6s linear infinite; }
@keyframes ringPulseStart {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
  13.5% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
  13.51%, 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
}
@keyframes ringPulseTop {
  0%, 74.9% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  75% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
  88.5% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
  88.51%, 100% { opacity: 0; }
}
@keyframes ringPulseImpact {
  0%, 86.4% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  86.5% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* ---------- Feature bento ----------
   기존엔 4개 카드가 전부 같은 크기였다(전형적인 "AI가 만든 4분할 기능 그리드").
   가장 구체적인 기능(내 스윙 등록 — 실제 데모 바가 있는 카드)을 크게 키워
   시각적 위계를 준다. */
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "f2 f2 f2"
    "f1 f3 f4";
  gap: 20px;
}
.grid-4 > .card:nth-child(1) { grid-area: f1; }
.grid-4 > .card:nth-child(2) { grid-area: f2; }
.grid-4 > .card:nth-child(3) { grid-area: f3; }
.grid-4 > .card:nth-child(4) { grid-area: f4; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.card-feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
}
.card .num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 14px;
}
.card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.card-feature h3 { font-size: 20px; }
.card-feature p { font-size: 15px; }

/* displayNumber — 앱과 동일 원칙: 비율 숫자가 주인공, 막대는 보조 */
.display-number {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 18px;
  margin-bottom: 0;
}
.tempo-bar-demo {
  margin-top: 10px;
  height: 16px;
  border-radius: 999px;
  background: var(--surface-2);
  display: flex;
  overflow: hidden;
  position: relative;
}
.tempo-bar-demo .bs { flex-basis: 75%; background: var(--green); }
.tempo-bar-demo .ds { flex: 1; background: var(--gold); }
.tempo-bar-demo .dot {
  position: absolute;
  top: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  animation: dotMove 1.4s linear infinite;
}
@keyframes dotMove {
  0% { left: 0%; transform: translateX(0); }
  100% { left: 100%; transform: translateX(-100%); }
}

/* ---------- Difference statement ----------
   기존의 "다른 앱들 vs mytempo" 2박스 대비 레이아웃은 AI 생성 SaaS 랜딩의
   대표적인 클리셰라 걷어냈다. 대신 문장 두 줄의 크기 대비로 같은 메시지를 전달한다. */
.difference { max-width: 720px; }
.difference .statement {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--muted);
  margin: 0 0 12px;
}
.difference .statement-accent {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.difference .statement-accent em {
  font-style: normal;
  color: var(--green);
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.trust-list li {
  font-size: 14px;
  color: var(--muted);
  padding-left: 22px;
  position: relative;
}
.trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.link-arrow {
  color: var(--green);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.link-arrow:hover { color: var(--green-deep); }

/* ---------- Pricing ----------
   기존엔 Lifetime 카드에 골드 그라데이션 + 강조 보더를 줘서 전형적인 "추천 플랜"
   업셀 박스처럼 보였다. 무료가 핵심 훈련 루프 전체라는 브랜드 원칙(구독 없음·
   과장 없음)과 맞지 않아 두 카드를 동일한 시각 무게로 맞추고, Lifetime은 작은
   태그로만 구분한다. */
.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.price-card .plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.price-card .plan {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.price-card .plan-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 8px;
}
.price-card .amount {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
}
.price-card .amount span { font-family: var(--font-kr); font-size: 14px; font-weight: 500; color: var(--muted); }
.price-card .desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.price-card li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.price-card li:first-child { border-top: none; }
.price-foot {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-links {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--muted);
}
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-copy {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Legal pages (privacy/terms) ---------- */
.legal-header {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--line);
}
.legal-header .eyebrow { margin-bottom: 10px; }
.legal-header h1 {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 800;
}
.legal-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
}
.legal-body {
  padding: 48px 0 96px;
  max-width: 720px;
}
.legal-body h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 12px;
}
.legal-body ul, .legal-body ol { padding-left: 20px; }
.legal-body strong { color: var(--ink); }
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .ring-wrap { order: -1; }
  .grid-4 { grid-template-columns: 1fr; grid-template-areas: "f2" "f1" "f3" "f4"; }
  .card-feature { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  section { padding: 64px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ring-dot-wrap, .tempo-bar-demo .dot,
  .ring-pulse-start, .ring-pulse-top, .ring-pulse-impact { animation: none; }
  .ring-pulse { opacity: 0; }
}