/* V1 — 빈 자리에서 시작 (캠페인형) · 풀블리드 hero, 큰 여백, 정적 */

.v1 .section { padding-block: clamp(84px, 12vw, 132px); }
.v1 .section-title { font-size: clamp(27px, 4.4vw, 42px); }
.v1 .section-sub { max-width: 540px; margin-top: 4px; }

/* ── 1 · HERO ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(560px, 90vh, 800px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.34) 60%, rgba(255,255,255,0) 82%);
}
.hero-inner { position: relative; padding-block: 72px; }
.hero-kicker {
  font-family: var(--ff-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary);
}
.hero-tagline {
  margin-top: 20px;
  font-size: clamp(52px, 10.5vw, 104px);
  font-weight: 500;
  color: var(--fg);
}
.hero-essence {
  margin-top: 26px;
  font-size: clamp(18px, 2.6vw, 23px);
  font-weight: 500;
  color: var(--fg);
  max-width: 21ch;
}
.hero-def {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted-fg);
  line-height: 1.72;
  max-width: 40ch;
}
.hero-act { margin-top: 36px; }
.hero-act .cta-sub { margin-top: 13px; }

/* reveal stagger — hero */
.hero .reveal:nth-child(1) { transition-delay: .05s; }
.hero .reveal:nth-child(2) { transition-delay: .14s; }
.hero .reveal:nth-child(3) { transition-delay: .26s; }
.hero .reveal:nth-child(4) { transition-delay: .36s; }
.hero .reveal:nth-child(5) { transition-delay: .46s; }

/* ── 2 · 빈 벽 리딩 ───────────────────────────────── */
.read-sample {
  margin-top: 52px;
  border: 1px solid var(--border);
  background: #fbfdfc;
  padding: 40px clamp(28px, 5vw, 56px);
}
.read-sample figcaption {
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--primary);
}
.read-sample p {
  margin-top: 18px;
  font-family: var(--ff-display);
  font-size: clamp(19px, 2.5vw, 24px);
  font-style: italic;
  line-height: 1.62;
  color: var(--fg);
  max-width: 42ch;
}
.read-sample-tag {
  display: block; margin-top: 18px;
  font-size: 13px; color: var(--muted-fg);
}
.read-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.read-card {
  padding: 38px 26px 44px;
  border-right: 1px solid var(--border);
}
.read-card:last-child { border-right: none; }
.read-no {
  font-family: var(--ff-display);
  font-size: 13px; font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
}
.read-title {
  margin-top: 18px;
  font-size: 18px; font-weight: 700;
  color: var(--fg);
}
.read-body {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.72;
}

/* ── 3 · How it works ────────────────────────────── */
.step-list {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.step { text-align: left; }
.step-no {
  font-size: 46px;
  font-weight: 400;
  color: var(--border);
}
.step-title {
  margin-top: 12px;
  font-size: 21px; font-weight: 700;
}
.step-body {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted-fg);
  line-height: 1.74;
  max-width: 30ch;
}

/* ── 4 · 무드 6종 ────────────────────────────────── */
.mood-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 36px;
}
.mood-title {
  margin-top: 22px;
  font-size: 19px; font-weight: 700;
}
.mood-body {
  margin-top: 9px;
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.72;
}

/* ── 5 · 실물 제작 ───────────────────────────────── */
.craft-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.craft-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--border);
}
.craft-text .section-title { font-size: clamp(25px, 3.6vw, 36px); }
.craft-text .lead { margin-top: 18px; }
.craft-list { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.craft-list li {
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.7;
  padding-left: 0;
}
.craft-list strong {
  display: block;
  font-size: 15px;
  color: var(--fg);
  font-weight: 700;
  margin-bottom: 2px;
}
.craft-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted-fg);
  line-height: 1.7;
}

/* ── 6 · Final CTA ───────────────────────────────── */
.final-cta {
  padding-block: clamp(110px, 16vw, 180px);
  text-align: center;
}
.final-title {
  font-size: clamp(46px, 9vw, 88px);
  font-weight: 500;
}
.final-sub {
  margin-top: 24px;
  font-size: 16px;
  color: var(--muted-fg);
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.72;
}
.final-cta .btn-xl { margin-top: 36px; }

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width: 900px) {
  .read-grid { grid-template-columns: repeat(2, 1fr); }
  .read-card:nth-child(2) { border-right: none; }
  .read-card:nth-child(1), .read-card:nth-child(2) { border-bottom: 1px solid var(--border); }
  .step-list { grid-template-columns: 1fr; gap: 40px; max-width: 420px; margin-inline: auto; }
  .mood-grid { grid-template-columns: repeat(2, 1fr); gap: 38px 28px; }
  .craft-inner { grid-template-columns: 1fr; gap: 40px; }
  .craft-photo { order: 2; }
}
@media (max-width: 560px) {
  .hero { min-height: 86vh; }
  .hero-veil {
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 46%, rgba(255,255,255,.5) 100%);
  }
  .hero-bg { object-position: 64% center; }
  .read-grid { grid-template-columns: 1fr; }
  .read-card { border-right: none; border-bottom: 1px solid var(--border); }
  .read-card:last-child { border-bottom: none; }
  .mood-grid { grid-template-columns: 1fr; gap: 36px; max-width: 340px; margin-inline: auto; }
}
