/* =========================================================
   SYNC-T 랜딩 페이지 전용 스타일
   ========================================================= */

.st-landing {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* ── Header ── */
.st-header {
  padding: var(--sp-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.st-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fz-sm);
  color: var(--txt-dim);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.st-back:hover {
  background: var(--bg-glass-hi);
  color: var(--txt);
}

.st-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fz-sm);
  font-weight: 600;
  color: var(--txt);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.st-share-btn:hover {
  background: var(--bg-glass-hi);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.st-share-btn:active { transform: scale(0.96); }

/* ── Hero ── */
.st-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-5) 0 var(--sp-7);
  gap: var(--sp-6);
}

.st-pentagon-host {
  width: 280px;
  max-width: 70vw;
  aspect-ratio: 1;
  position: relative;
}

.st-hero-text {
  max-width: 360px;
}

.st-eyebrow {
  font-size: var(--fz-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--txt-dim);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.st-display {
  /* 폭에 맞춰 자동 축소 — 'sub heading'이 항상 한 줄 들어가도록 */
  font-size: clamp(24px, 7.2vw, 44px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin-bottom: var(--sp-4);
  word-break: keep-all;
}

.st-gradient-text {
  background: linear-gradient(135deg, var(--c-real) 0%, var(--c-ideal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  white-space: nowrap;        /* "그 사이의 거리는?" 항상 한 줄 */
}

.st-hero-desc {
  font-size: var(--fz-md);
  line-height: var(--lh-normal);
  color: var(--txt-dim);
}
.st-hero-desc em {
  font-style: normal;
  color: var(--c-ideal);
  font-weight: 600;
}

/* ── CTA 블록 ── */
.st-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.st-btn-hero {
  font-size: var(--fz-lg);
  padding: var(--sp-4) var(--sp-7);
  border-radius: var(--r-pill);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
}

.st-cta-meta {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fz-sm);
  color: var(--txt-mute);
}
.st-cta-meta span:nth-child(even) { color: var(--txt-mute); opacity: 0.5; }

/* ── 섹션 일반 ── */
.st-section {
  margin: var(--sp-7) 0;
}
.st-section-title {
  text-align: center;
  margin-bottom: var(--sp-5);
}

/* ── 차별점 리스트 ── */
.st-diff-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.st-diff-item {
  position: relative;
  padding: var(--sp-5);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--dur-base) var(--ease-out);
}
.st-diff-item:hover {
  background: var(--bg-glass-hi);
  border-color: var(--border-hi);
  transform: translateY(-2px);
}

.st-diff-num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  color: var(--txt-mute);
  letter-spacing: 0.1em;
}

.st-diff-title {
  font-size: var(--fz-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-2);
  background: linear-gradient(135deg, var(--c-real) 30%, var(--c-ideal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.st-diff-desc {
  font-size: var(--fz-sm);
  color: var(--txt-dim);
  line-height: var(--lh-normal);
}
.st-diff-desc em {
  font-style: normal;
  color: var(--txt);
  font-weight: 600;
}

/* ── 카운터 ── */
.st-counter-section {
  text-align: center;
}
.st-counter-text {
  font-size: var(--fz-md);
  color: var(--txt-dim);
}
.st-counter-text span {
  font-weight: 800;
  color: var(--txt);
  font-family: var(--font-mono);
}

/* ── Bottom CTA ── */
.st-bottom-cta {
  margin: var(--sp-7) 0 var(--sp-6);
}
.st-bottom-cta .st-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}
.st-bottom-cta h2 { margin-bottom: 0; }

/* ── Footer ── */
.st-footer {
  padding: var(--sp-7) 0 var(--sp-9);
  text-align: center;
  font-size: var(--fz-xs);
  color: var(--txt-mute);
  line-height: var(--lh-normal);
}
.st-footer p { margin: var(--sp-1) 0; }

/* =========================================================
   Quick badge — "SYNC-T가 다른 점" 4개를 한 줄로 압축
   (베타 피드백 #1: 첫 화면 SYNC 강조 / 추상적 글 설명 → 핵심 한 줄)
   ========================================================= */
.st-quick-badge {
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-3);
  background: linear-gradient(135deg,
    rgba(106, 78, 199, 0.18),
    rgba(255, 138, 101, 0.18));
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.st-quick-badge p {
  margin: 0;
  font-size: var(--fz-sm);
  font-weight: 600;
  color: var(--txt);
  word-break: keep-all;
}

/* =========================================================
   5축 알파벳 카드 섹션 — SYNC-T 핵심 시스템 노출
   (베타 피드백 #1·#2·#3: 알파벳 직관 + 한글 키워드 + ↔ 표기)
   ========================================================= */
.st-axis-section {
  padding: var(--sp-6) 0 var(--sp-5);
}
.st-axis-section-desc {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--fz-sm);
  color: var(--txt-dim);
  text-align: center;
  word-break: keep-all;
  line-height: var(--lh-snug);
}
.st-axis-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.st-axis-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* 양극단 컬러를 옅은 그라디언트로 — axisConfigs 토큰 활용, 카드별 고유 분위기 */
.st-axis-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, var(--axis-left, transparent), transparent 65%),
    radial-gradient(circle at 100% 50%, var(--axis-right, transparent), transparent 65%);
  opacity: 0.14;
  pointer-events: none;
}
.st-axis-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hi);
}
.st-axis-card > * { position: relative; z-index: 1; }

/* 큰 알파벳 — 1순위 강조 (좌우 컬러 대비) */
.st-axis-letters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.st-axis-letters .left  { color: var(--axis-left, var(--txt)); }
.st-axis-letters .right { color: var(--axis-right, var(--txt)); }
.st-axis-letters .sep {
  font-size: 0.6em;
  color: var(--txt-mute);
  font-weight: 500;
}

/* 영어 풀네임 — 보조 (mono, dim) */
.st-axis-en {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--fz-xs);
  color: var(--txt-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

/* 한글 키워드 — 카드의 시각적 주인공 (가독성 우선) */
.st-axis-ko {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.st-axis-ko strong {
  font-size: var(--fz-lg);
  font-weight: 700;
  color: var(--txt);
  letter-spacing: var(--tracking-tight);
}
.st-axis-ko em {
  font-style: normal;
  font-size: var(--fz-xs);
  color: var(--txt-mute);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 한 줄 설명 */
.st-axis-desc {
  margin: 0;
  font-size: var(--fz-sm);
  color: var(--txt-dim);
  line-height: var(--lh-snug);
  word-break: keep-all;
}

/* ── Tablet/Desktop ── */
@media (min-width: 540px) {
  .st-axis-cards { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
@media (min-width: 768px) {
  .st-landing { max-width: 720px; }
  .st-hero { padding: var(--sp-9) 0; }
  .st-pentagon-host { width: 360px; }
  .st-display { font-size: 56px; }
  /* 5장 카드 — 6칸 그리드로 첫 줄 3장(각 2칸), 둘째 줄 2장(각 2칸 + 좌우 1칸 공백)
     CB가 FA 아래 위치 + 둘째 줄이 자연스럽게 가운데 정렬됨 */
  .st-axis-cards { grid-template-columns: repeat(6, 1fr); }
  .st-axis-card { grid-column: span 2; }
  .st-axis-card:nth-child(4) { grid-column: 2 / span 2; }
  .st-axis-card:nth-child(5) { grid-column: 4 / span 2; }
}