/*
 * 랜딩(/)에만 쓰는 스타일 — 공통 토큰과 머리·바닥은 styles.css에 있고, 이 파일은 그 위에 얹힌다.
 *
 * 밤하늘 머리는 라이트/다크 어느 쪽에서도 밤이다(그림이 밤이다). 그 아래 띠들은 공통 토큰을 그대로
 * 써서 시스템 설정을 따른다. 움직임은 두 별이 천천히 떠 있는 것 하나뿐이고, 움직임 줄이기를 켠
 * 기기에서는 멈춘다(styles.css의 prefers-reduced-motion 블록).
 *
 * 그림은 전부 같은 출처(/img)다 — _headers의 CSP가 img-src를 'self'로 잠근다.
 */

:root {
  --night: #0b1433;
  --night-deep: #070d24;
  --cream: #fff6e8;
  --cream-soft: #f3e3d2;
  --star: #ffdf9e;
  --gold: #eea23c;
  --gold-soft: rgba(238, 162, 60, 0.16);
  --shadow: 0 18px 40px rgba(43, 24, 16, 0.08), 0 2px 6px rgba(232, 115, 90, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

html {
  scroll-behavior: smooth;
}

.home h1,
.home h2,
.home h3 {
  letter-spacing: -0.02em;
}

/* ── 밤하늘 머리 ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
}

.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* 글자 자리의 대비 — 은하수가 밝은 가운데도 크림색 글자가 읽히게 위에서 눌러 준다. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(7, 13, 36, 0.72) 0%,
    rgba(7, 13, 36, 0.42) 38%,
    rgba(7, 13, 36, 0.18) 72%,
    rgba(7, 13, 36, 0) 100%
  );
}

.hero-moon {
  position: absolute;
  z-index: -1;
  top: 6.5rem;
  left: max(1.25rem, calc(50% - 31rem));
  width: clamp(3.5rem, 9vw, 6.5rem);
  height: auto;
  filter: drop-shadow(0 0 1.4rem rgba(255, 233, 184, 0.45));
}

.hero-in {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}

.site-head.on-night {
  margin-bottom: 0;
}

.site-head.on-night .brand,
.site-head.on-night nav a {
  color: var(--cream);
}

.site-head.on-night nav a:hover,
.site-head.on-night nav a:focus-visible {
  background: rgba(255, 246, 232, 0.16);
}

.hero-copy {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 7vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.hero-mark {
  width: clamp(7.5rem, 22vw, 11rem);
  height: auto;
  filter: drop-shadow(0 0 2.2rem rgba(255, 214, 150, 0.5));
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.45rem);
  }
}

.eyebrow {
  margin: 1.4rem 0 0;
  color: var(--star);
  font-size: 0.95rem;
  font-weight: 500;
}

.hero h1 {
  margin: 0.6rem 0 0;
  font-size: clamp(2rem, 7.4vw, 3.5rem);
  line-height: 1.25;
  text-shadow: 0 2px 22px rgba(7, 13, 36, 0.6);
}

.hero-sub {
  max-width: 31rem;
  margin: 1.1rem auto 0;
  color: var(--cream-soft);
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  text-shadow: 0 1px 12px rgba(7, 13, 36, 0.75);
}

/* 스토어 자리 — 아직 링크가 아니다. 버튼처럼 보이되 "곧 만나요"라고 말한다. 배지 그림은 쓰지 않는다. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}

.store {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 1 9.75rem;
  min-width: 7.5rem;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 246, 232, 0.42);
  border-radius: 1rem;
  background: rgba(9, 16, 44, 0.5);
  line-height: 1.3;
  text-align: left;
}

.store-name {
  color: var(--cream-soft);
  font-size: 0.8rem;
}

.store-soon {
  color: var(--cream);
  font-size: 1.05rem;
  font-weight: 700;
}

/* 구름 바닥 — 머리의 맨 아래에 걸친다. 좁은 화면에서는 구름이 너무 납작해지지 않게 폭을 넘겨 둔다. */
.hero-cloud {
  display: block;
  position: relative;
  left: 50%;
  width: max(100%, 46rem);
  max-width: 90rem;
  height: auto;
  margin-bottom: -2px;
  transform: translateX(-50%);
}

/* ── 띠 ─────────────────────────────────────────────────────────────────── */

.band {
  padding: clamp(3.25rem, 8vw, 5.5rem) 0;
}

.band-alt {
  background: var(--surface-alt);
}

.band-in {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.kicker {
  margin: 0;
  color: var(--primary-dark);
  font-size: 0.92rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .kicker {
    color: var(--primary);
  }
}

.band h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.6rem, 4.6vw, 2.35rem);
  line-height: 1.32;
}

.band h2.h-small {
  font-size: 1.2rem;
}

.band-lead {
  max-width: 40rem;
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-size: 1.05rem;
}

.band h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.45;
}

/* ── 세 박자 ─────────────────────────────────────────────────────────────── */

.beats {
  display: grid;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.beat {
  margin: 0;
}

.beat > p {
  margin: 0.4rem 0 0;
  color: var(--text-soft);
}

.beat-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 1.25rem 0 0.6rem !important;
  border-radius: 999px;
  background: var(--primary);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .beat-no {
    color: #2a110b !important;
  }
}

/* 작은 화면 그림 — 앱 화면을 찍은 것이 아니라 같은 말을 하는 그림이다(읽어 주는 기기에는 숨긴다). */
.demo {
  display: flex;
  align-items: center;
  min-height: 15.5rem;
  padding: 1.25rem;
  border-radius: 1.6rem;
  background: linear-gradient(160deg, var(--surface-alt), var(--primary-soft));
}

.demo-card {
  width: 100%;
  padding: 1.1rem;
  border: 1px solid var(--outline);
  border-radius: 1.2rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.pill-coral {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.pill-gold {
  background: var(--gold-soft);
  color: var(--accent-text);
}

.pill-soft,
.pill-lock {
  background: var(--surface-alt);
  color: var(--text-soft);
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .pill-coral {
    color: var(--primary);
  }
}

.demo-q {
  margin: 0.7rem 0 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
}

.demo-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}

.clock,
.spark {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

/* 시계 — 동그라미와 두 바늘. */
.clock {
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: linear-gradient(var(--primary), var(--primary)) 50% 28% / 2px 34% no-repeat,
    linear-gradient(var(--primary), var(--primary)) 68% 50% / 30% 2px no-repeat;
}

/* 반짝임 — 네 갈래 별. */
.spark {
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.ans {
  margin-top: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.9rem;
  background: var(--bg);
}

.demo-card > .ans:first-child {
  margin-top: 0;
}

.ans-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 500;
}

.ans-text {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* 닫힌 답 — 글자가 아니라 가려진 줄이다. 한 글자도 보이지 않는다는 말을 그대로 그린다. */
.bar {
  display: block;
  height: 0.62rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: repeating-linear-gradient(
    115deg,
    var(--outline) 0 0.5rem,
    var(--surface-alt) 0.5rem 1rem
  );
}

.bar-short {
  width: 58%;
}

.ans-writing {
  border: 1px solid var(--primary);
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--primary);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.demo-open {
  border-color: var(--gold);
}

/* ── 우리 별의 다섯 단계 ──────────────────────────────────────────────────── */

.defs {
  position: absolute;
}

.stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0.5rem 1.1rem;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, var(--night), #1a2a5e);
  color: var(--cream);
  list-style: none;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: clamp(0.78rem, 2.6vw, 0.92rem);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.stage-art {
  display: block;
  width: min(100%, 5.5rem);
}

.stage-art svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--star);
  stroke: var(--star);
}

.stage-art circle {
  stroke: none;
}

/* 단계가 오를수록 빛이 번진다 — 크기만이 아니라 밝기로도 자란다. */
.stage-1 svg {
  opacity: 0.8;
}

.stage-3 svg {
  filter: drop-shadow(0 0 0.3rem rgba(255, 223, 158, 0.45));
}

.stage-4 svg {
  filter: drop-shadow(0 0 0.6rem rgba(255, 223, 158, 0.7));
}

.stage-5 svg {
  filter: drop-shadow(0 0 0.8rem rgba(255, 223, 158, 0.8));
}

/* ── 방 꾸미기 ───────────────────────────────────────────────────────────── */

.split {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.split-copy p {
  margin: 0.5rem 0 0;
  color: var(--text-soft);
}

.rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rooms li {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--outline);
  border-radius: 1.2rem;
  background: var(--card);
}

.rooms img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 5;
  object-fit: cover;
}

.rooms p {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.6rem 0.8rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.rooms strong {
  font-weight: 500;
}

.rooms span {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* ── 작은 기능들 · 지키는 것들 ───────────────────────────────────────────── */

.features,
.cares {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.features li,
.cares li {
  margin: 0;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--outline);
  border-radius: 1.2rem;
  background: var(--card);
}

.features p,
.cares p {
  margin: 0.4rem 0 0;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.cares li {
  border-top: 3px solid var(--primary);
}

/* ── 요금 ───────────────────────────────────────────────────────────────── */

.pricing {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.plans,
.benefits {
  margin: 0;
  padding: 1.4rem 1.25rem;
  border: 1px solid var(--outline);
  border-radius: 1.4rem;
  background: var(--card);
}

.plans {
  box-shadow: var(--shadow);
}

.both {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
}

.both-stars {
  flex: none;
  width: 2.6rem;
}

.both-stars svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--gold);
  stroke: var(--gold);
}

.plan-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.plan {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 0.9rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline);
  border-radius: 1rem;
  background: var(--bg);
}

.plan-best {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.plan-name {
  font-weight: 700;
}

.plan-price {
  justify-self: end;
  font-size: 1rem;
}

.plan-price strong {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.plan-note {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font-size: 0.84rem;
}

.fine {
  margin: 1rem 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.7;
}

.fine a {
  white-space: nowrap;
}

.benefits {
  list-style: none;
}

.benefits li {
  position: relative;
  margin: 0;
  padding: 0.45rem 0 0.45rem 1.7rem;
  font-size: 0.98rem;
  line-height: 1.6;
}

.benefits li::before {
  content: "";
  position: absolute;
  top: 0.82rem;
  left: 0.1rem;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--primary);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.nowrap {
  white-space: nowrap;
}

/* ── 곧 만나요 ───────────────────────────────────────────────────────────── */

.band-night {
  background: radial-gradient(120% 140% at 50% 0%, #1b2b63 0%, var(--night) 55%, var(--night-deep) 100%);
  color: var(--cream);
  text-align: center;
}

.band-night .band-lead {
  margin-right: auto;
  margin-left: auto;
  color: var(--cream-soft);
}

.band-night a {
  color: var(--star);
}

.soon-mark {
  width: 6.5rem;
  height: auto;
  filter: drop-shadow(0 0 1.8rem rgba(255, 214, 150, 0.45));
}

/* ── 안내 링크 · 바닥 ────────────────────────────────────────────────────── */

.band-tight {
  padding-bottom: 2rem;
}

.links-grid {
  display: grid;
  gap: 0 0.75rem;
  margin-top: 1rem;
}

.foot-in footer {
  margin-top: 0;
  padding-bottom: 3rem;
}

/* ── 넓은 화면 ───────────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stages {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

@media (min-width: 60rem) {
  /* 세 그림의 높이가 달라도 번호·제목·설명이 같은 줄에 서게 한다 — 박자 하나가 네 줄을 차지하고,
   * 줄 높이는 세 박자가 함께 쓴다(subgrid). subgrid를 모르는 브라우저에서는 각자 제 높이로 선다. */
  .beats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: 0 1.75rem;
  }

  .beat {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    justify-items: start;
  }

  .demo {
    justify-self: stretch;
    min-height: 19rem;
  }

  .split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 3rem;
  }

  .features,
  .cares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .links-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .links-grid a {
    padding-right: 0.9rem;
    padding-left: 0.9rem;
  }
}

/* 320px 폭 — 머리 메뉴 세 개가 로고와 한 줄에 서지 못한다. 페이지 안쪽 고리 둘을 접는다(도움말은 남긴다). */
@media (max-width: 30rem) {
  .site-head.on-night nav a[href^="#"] {
    display: none;
  }
}