/*
 * partners.seollein.kr — 광고 상품 안내와 그 앞을 막는 초대 코드 화면.
 *
 * 이 지면만 aside.com 의 룩을 따라갑니다. 흰 바탕 · 소프트 파스텔 그라데이션 ·
 * 굵은 산세리프 중앙 선언문 · 검정 알약 CTA · 회색 카드 패널 · 검정 밴드 하나.
 * 콘텐츠(상품·가격·카피)만 설레인 것이고 비주얼 언어는 레퍼런스를 따릅니다.
 *
 * 전역 토큰(종이·먹색·와인)은 건드리지 않습니다. 아래 --lp-* 는 이 페이지
 * 안에서만 사는 자체 팔레트라, 다른 화면에는 한 픽셀도 영향이 없습니다.
 * 간격·타이포 눈금은 전역 토큰을 그대로 씁니다.
 */

html body:has(.landing-page) {
  height: auto;
  min-height: 100%;
}

.landing-page {
  /* 레퍼런스에서 뽑은 팔레트 — 이 페이지 스코프 전용 */
  --lp-bg: #ffffff;
  --lp-panel: #f5f5f5;
  --lp-ink: #101014;
  --lp-body: #6b7280;
  --lp-muted: #9ca3af;
  --lp-line: rgb(16 16 20 / 8%);
  --lp-accent: #1a73e8;
  --lp-dark: #0d0d10;

  /* 파스텔 — 히어로 하늘과 카드 썸네일 */
  --lp-sky: #87e9ff;
  --lp-sky-soft: #d8f6ff;
  --lp-pink: #fde6ea;
  --lp-aqua: #b2e3e9;
  --lp-mint: #e4f5ee;
  --lp-lilac: #ece4f8;

  --lp-text: 660px;   /* 읽는 글줄 */
  --lp-wide: 1120px;  /* 카드 그리드 */
  --page-gutter: var(--space-5);

  overflow-x: clip;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--font-sans);
}

.landing-page :where(a, button):focus-visible {
  border-radius: var(--radius-2);
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
}

/* ── 공통 조판 ────────────────────────────────────────────── */

.lp-hero__body,
.lp-section__head,
.lp-dark,
.lp-final__band {
  text-align: center;
}

/*
 * 헤드라인은 전부 굵은 산세리프. 자간을 조이고 행간은 넉넉히 둡니다.
 * 줄바꿈은 마크업의 <br> 로 직접 잡습니다. text-wrap: balance 를 같이 걸면
 * 브라우저가 그 위에 한 번 더 나눠 세 줄이 되므로 쓰지 않습니다.
 */
.lp-hero__title,
.lp-section__head h2,
.lp-dark h2,
.lp-final__band h2 {
  margin: 0;
  font-weight: var(--weight-display);
  letter-spacing: -0.035em;
  line-height: 1.22;
  word-break: keep-all;
}

/* 좌측 작은 파란 라벨 — 레퍼런스의 섹션 진입 신호 */
.lp-eyebrow {
  margin: 0;
  color: var(--lp-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.lp-eyebrow--on-dark {
  color: #7fb4f5;
}

/* ── 검정 알약 CTA ────────────────────────────────────────── */

.lp-pill {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  background: var(--lp-dark);
  color: #ffffff;
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.lp-pill:hover {
  background: #26262c;
  transform: translateY(-1px);
}

.lp-pill--sm {
  min-height: 38px;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
}

/* ── 히어로 ───────────────────────────────────────────────── */

/*
 * 하늘. 사진 대신 흰 구름을 라디얼로 몇 겹 얹어 만듭니다. 아래로 갈수록
 * 흰 바탕에 녹아들어야 스크린샷 카드가 종이 위에 뜬 것처럼 보입니다.
 */
.lp-hero {
  padding-bottom: var(--space-10);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  background:
    radial-gradient(58% 38% at 18% 26%, rgb(255 255 255 / 88%) 0%, transparent 62%),
    radial-gradient(48% 32% at 78% 16%, rgb(255 255 255 / 80%) 0%, transparent 64%),
    radial-gradient(64% 42% at 62% 46%, rgb(255 255 255 / 78%) 0%, transparent 66%),
    radial-gradient(86% 54% at 30% 62%, rgb(255 255 255 / 92%) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-sky) 0%, #a8edff 34%, var(--lp-sky-soft) 62%, var(--lp-bg) 88%);
}

.lp-nav {
  display: flex;
  max-width: var(--lp-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--page-gutter);
  align-items: center;
  justify-content: space-between;
}

/* 로고 자리만 브랜드 워드마크를 그대로 둡니다. */
.lp-nav__logo {
  color: var(--lp-ink);
  font-family: var(--font-serif-logo);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: var(--weight-strong);
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
}

.lp-hero__body {
  /* 헤드라인이 <br> 대로 두 줄에 서려면 글줄 폭보다 조금 넓어야 합니다. */
  max-width: 780px;
  margin-inline: auto;
  padding: var(--space-9) var(--page-gutter) 0;
}

/* 헤드라인 위 작은 반투명 알약 — 레퍼런스의 'Backed by' 배지 자리 */
.lp-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 0 0 var(--space-6);
  padding: 0 var(--space-4);
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 62%);
  color: var(--lp-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.lp-hero__title {
  font-size: var(--text-3xl);
}

.lp-hero__lead {
  margin: var(--space-5) auto 0;
  max-width: 42ch;
  color: #3f4550;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

.lp-hero__body .lp-pill {
  margin-top: var(--space-7);
}

/* 앱 화면은 하늘 아래쪽에 걸쳐 떠 있습니다. */
.lp-hero__shot {
  display: flex;
  margin: var(--space-9) 0 0;
  justify-content: center;
}

.lp-hero__shot img {
  width: 288px;
  height: auto;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgb(16 16 20 / 16%), 0 4px 12px rgb(16 16 20 / 6%);
}

/* ── 소개 — 좌측 라벨 + 우측 본문 ─────────────────────────── */

.lp-intro {
  display: grid;
  gap: var(--space-5);
  max-width: var(--lp-wide);
  margin: 0 auto;
  padding: var(--space-12) var(--page-gutter) 0;
}

.lp-intro__body p {
  margin: 0;
  color: var(--lp-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

.lp-intro__body p + p {
  margin-top: var(--space-5);
}

.lp-intro__body strong {
  color: var(--lp-ink);
  font-weight: var(--weight-display);
}

/* ── 섹션 ─────────────────────────────────────────────────── */

.lp-section {
  padding-top: var(--space-12);
}

.lp-section__head {
  max-width: var(--lp-text);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.lp-section__head h2 {
  font-size: var(--text-2xl);
}

.lp-section__head p {
  margin: var(--space-5) auto 0;
  color: var(--lp-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  word-break: keep-all;
}

/* ── 상품 카드 — 회색 패널 + 그 아래 캡션 ─────────────────── */

.lp-cards {
  display: grid;
  gap: var(--space-9) var(--space-6);
  max-width: var(--lp-wide);
  margin: var(--space-9) auto 0;
  padding-inline: var(--page-gutter);
  list-style: none;
}

/*
 * 패널 안에서 앱 화면은 위쪽만 보이고 아래가 잘립니다. 폰 화면을 통째로
 * 넣으면 카드가 세로로 길어져 그리드 리듬이 무너집니다.
 */
.lp-card__panel {
  display: flex;
  overflow: hidden;
  height: 260px;
  margin: 0;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-7);
  border-radius: 20px;
  background: var(--lp-panel);
}

.lp-card__panel--pink  { background: linear-gradient(150deg, var(--lp-pink) 0%, #f7eef6 55%, var(--lp-panel) 100%); }
.lp-card__panel--aqua  { background: linear-gradient(150deg, var(--lp-aqua) 0%, #dff2f6 55%, var(--lp-panel) 100%); }
.lp-card__panel--mint  { background: linear-gradient(150deg, var(--lp-mint) 0%, #eef7f2 55%, var(--lp-panel) 100%); }
.lp-card__panel--lilac { background: linear-gradient(150deg, var(--lp-lilac) 0%, #f2eefa 55%, var(--lp-panel) 100%); }

.lp-card__panel img {
  width: 200px;
  height: auto;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgb(16 16 20 / 14%);
}

.lp-card__caption {
  padding-top: var(--space-5);
}

.lp-card__line {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.lp-card__line h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.lp-card__price {
  margin: 0;
  flex: 0 0 auto;
  color: var(--lp-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lp-card__price span {
  margin-right: var(--space-1);
  color: var(--lp-muted);
  font-size: var(--text-xs);
}

.lp-card__price strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
}

.lp-card__flag {
  display: inline-block;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgb(26 115 232 / 10%);
  color: var(--lp-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
}

.lp-card__summary {
  margin: var(--space-3) 0 0;
  color: var(--lp-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

/*
 * 가격 내역 — 항목 ⋯⋯ 금액. 점선은 사이에 남는 만큼만 늘어납니다.
 * 카드 안에서 조용히 읽혀야 해서 작은 글자 + tabular 숫자로만 둡니다.
 */
.lp-card__breakdown {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}

.lp-card__breakdown > div {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.lp-card__breakdown > div::before {
  order: 1;
  flex: 1 1 auto;
  height: 0;
  align-self: center;
  border-bottom: 1px dotted rgb(16 16 20 / 20%);
  content: "";
}

.lp-card__breakdown dt {
  color: var(--lp-body);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.lp-card__breakdown dd {
  order: 2;
  margin: 0;
  color: var(--lp-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

/*
 * ── 비교 — 이 지면의 심장 ─────────────────────────────────
 * 같은 항목이 좌우로 맞붙는 대조표입니다. 우열은 말하지 않고 항목만 적고,
 * 설레인 열만 옅은 파란 바탕으로 살짝 앞세웁니다.
 */
.lp-visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-matrix__scroll {
  overflow-x: auto;
  max-width: var(--lp-wide);
  margin: var(--space-8) auto 0;
  padding-inline: var(--page-gutter);
  -webkit-overflow-scrolling: touch;
}

.lp-matrix {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.lp-matrix th,
.lp-matrix td {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--lp-line);
  vertical-align: top;
  word-break: keep-all;
}

.lp-matrix thead th {
  color: var(--lp-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.lp-matrix tbody th,
.lp-matrix tfoot th {
  width: 1%;
  color: var(--lp-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.lp-matrix tbody td {
  color: var(--lp-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* 설레인 열 — 옅은 파란 바탕으로 시선만 먼저 닿게 합니다. */
.lp-matrix .lp-matrix__ours {
  background: rgb(26 115 232 / 5%);
  color: var(--lp-ink);
}

.lp-matrix thead .lp-matrix__ours {
  color: var(--lp-accent);
  border-radius: 12px 12px 0 0;
}

.lp-matrix tfoot .lp-matrix__ours {
  border-radius: 0 0 12px 12px;
}

/* 마지막 줄이 값입니다. 항목을 훑고 내려오면 결론처럼 놓입니다. */
.lp-matrix tfoot th,
.lp-matrix tfoot td {
  padding-top: var(--space-5);
  border-bottom: 0;
  color: var(--lp-ink);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-display);
  line-height: 1.5;
}

.lp-matrix tfoot .lp-matrix__ours {
  color: var(--lp-accent);
}

/* 광고비 밴드 아래 붙는 '+ 소재 제작비' — 금액이 아니라 항목 표시입니다. */
.lp-compare__plus {
  display: block;
  margin-top: var(--space-1);
  color: var(--lp-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0;
}

/* 전환 표 아래 마무리 한 줄. */
.lp-turn__a {
  max-width: var(--lp-wide);
  margin: var(--space-6) auto 0;
  padding-inline: var(--page-gutter);
  color: var(--lp-ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.55;
  word-break: keep-all;
}

.lp-turn__a strong {
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-display);
}

/*
 * 모바일 — 390px 에서 3열을 유지하면 글자가 한 자씩 끊깁니다.
 * 행마다 카드로 풀어 항목명을 제목으로 세우고, 두 값을 위아래로 놓습니다.
 * 머리글이 사라지므로 각 값 위에 data-col 라벨을 붙입니다.
 */
@media (max-width: 700px) {
  .lp-matrix__scroll {
    overflow-x: visible;
  }

  .lp-matrix,
  .lp-matrix tbody,
  .lp-matrix tfoot,
  .lp-matrix tr,
  .lp-matrix th,
  .lp-matrix td {
    display: block;
  }

  .lp-matrix thead {
    display: none;
  }

  .lp-matrix tr {
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border-radius: 16px;
    background: var(--lp-panel);
  }

  .lp-matrix tfoot tr {
    margin-bottom: 0;
  }

  .lp-matrix tbody th,
  .lp-matrix tfoot th {
    width: auto;
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-ink);
    font-size: var(--text-md);
    font-weight: var(--weight-display);
    letter-spacing: -0.025em;
    white-space: normal;
  }

  .lp-matrix td {
    padding: var(--space-4) 0 0;
    border-bottom: 0;
  }

  /* 카드 안에서는 열 이름이 값의 머리글이 됩니다. */
  .lp-matrix td::before {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--lp-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    content: attr(data-col);
  }

  /* 설레인 값은 바탕이 아니라 왼쪽 파란 줄로 구분합니다. */
  .lp-matrix .lp-matrix__ours {
    padding-left: var(--space-4);
    border-left: 2px solid rgb(26 115 232 / 35%);
    border-radius: 0;
    background: transparent;
  }

  .lp-matrix .lp-matrix__ours::before {
    color: var(--lp-accent);
  }

  .lp-matrix tfoot td {
    font-size: var(--text-lg);
  }
}

/* 계산 근거 — 표 바로 아래 작은 글씨 한 줄. */
.lp-compare__basis {
  max-width: var(--lp-wide);
  margin: var(--space-5) auto 0;
  padding-inline: var(--page-gutter);
  color: var(--lp-muted);
  font-size: var(--text-2xs);
  line-height: var(--leading-body);
  word-break: keep-all;
}

/* 단서 — 시세표와 떨어지면 안 되므로 바로 아래에 붙입니다. */
.lp-compare__caveat {
  max-width: var(--lp-wide);
  margin: var(--space-3) auto 0;
  padding-inline: var(--page-gutter);
  color: var(--lp-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  word-break: keep-all;
}

.lp-card__includes {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.lp-card__includes li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--lp-body);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  word-break: keep-all;
}

.lp-card__includes svg {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--lp-muted);
}

/* ── 검정 밴드 — 지면에서 유일한 다크 섹션 ────────────────── */

.lp-dark {
  margin: var(--space-12) auto 0;
  max-width: calc(var(--lp-wide) + var(--space-10));
  padding: var(--space-11) var(--space-6);
  border-radius: 24px;
  background: radial-gradient(90% 120% at 50% 120%, #16324a 0%, var(--lp-dark) 62%);
  color: #ffffff;
}

.lp-dark .lp-eyebrow {
  margin-bottom: var(--space-5);
}

.lp-dark h2 {
  font-size: var(--text-2xl);
}

.lp-dark > p {
  margin: var(--space-5) auto 0;
  color: rgb(255 255 255 / 62%);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  word-break: keep-all;
}

/* ── 진행 방식 ────────────────────────────────────────────── */

.lp-steps {
  display: grid;
  gap: var(--space-7);
  max-width: var(--lp-wide);
  margin: var(--space-9) auto 0;
  padding-inline: var(--page-gutter);
  list-style: none;
}

.lp-steps li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--lp-line);
}

.lp-steps__num {
  color: var(--lp-accent);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-display);
  letter-spacing: 0.02em;
}

.lp-steps h3 {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  letter-spacing: -0.025em;
}

.lp-steps p {
  margin: var(--space-2) 0 0;
  color: var(--lp-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

/* ── 마지막 밴드 — 아래에서 올라오는 파란 빛 ──────────────── */

.lp-final {
  max-width: calc(var(--lp-wide) + var(--space-10));
  margin: var(--space-12) auto 0;
  padding-inline: var(--page-gutter);
}

.lp-final__band {
  padding: var(--space-11) var(--space-6);
  border-radius: 24px;
  background:
    radial-gradient(46% 58% at 50% 104%, #2f8ef0 0%, rgb(120 190 250 / 55%) 34%, transparent 68%),
    linear-gradient(180deg, #eef8ff 0%, #e2f2fe 100%);
}

.lp-final__band h2 {
  font-size: var(--text-2xl);
}

.lp-final__band .lp-pill {
  margin-top: var(--space-7);
}

/* ── 푸터 ─────────────────────────────────────────────────── */

.lp-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  max-width: var(--lp-wide);
  margin: var(--space-11) auto 0;
  padding: var(--space-6) var(--page-gutter) var(--space-9);
  border-top: 1px solid var(--lp-line);
}

.lp-footer p {
  margin: 0;
  color: var(--lp-muted);
  font-size: var(--text-xs);
}

.lp-footer nav {
  display: flex;
  gap: var(--space-5);
}

.lp-footer a {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--lp-body);
  font-size: var(--text-xs);
  text-decoration: none;
}

.lp-footer a:hover {
  color: var(--lp-ink);
}

/* ── 초대 코드 화면 — 같은 룩으로 한 화면 안에서 끝냅니다. ── */

.landing-page--gate {
  min-height: 100dvh;
  padding-bottom: var(--space-10);
  background:
    radial-gradient(60% 30% at 20% 12%, rgb(255 255 255 / 88%) 0%, transparent 62%),
    radial-gradient(56% 30% at 80% 6%, rgb(255 255 255 / 82%) 0%, transparent 64%),
    linear-gradient(180deg, var(--lp-sky) 0%, #b6f0ff 22%, var(--lp-sky-soft) 40%, var(--lp-bg) 62%);
}

.lp-gate {
  max-width: 460px;
  margin-inline: auto;
  padding: var(--space-11) var(--page-gutter) 0;
  text-align: center;
}

.lp-gate__title {
  margin: var(--space-4) 0 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.035em;
  line-height: 1.22;
  text-wrap: balance;
  word-break: keep-all;
}

.lp-gate__lead {
  margin: var(--space-5) auto 0;
  color: var(--lp-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

.lp-gate__form {
  margin-top: var(--space-8);
}

.lp-gate__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--lp-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}

.lp-gate__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-6);
  border: 1px solid rgb(16 16 20 / 14%);
  border-radius: var(--radius-full);
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.lp-gate__input::placeholder {
  color: var(--lp-muted);
}

.lp-gate__input:focus {
  border-color: var(--lp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgb(26 115 232 / 18%);
}

.lp-gate__error {
  margin: var(--space-3) 0 0;
  color: #d93025;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  word-break: keep-all;
}

.lp-gate__submit {
  width: 100%;
  height: 52px;
  margin-top: var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--lp-dark);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.lp-gate__submit:hover {
  background: #26262c;
}

.lp-gate__foot {
  margin: var(--space-9) 0 0;
}

.lp-gate__foot a {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--lp-accent);
  font-size: var(--text-sm);
  text-decoration: none;
}

.lp-gate__foot a:hover {
  text-decoration: underline;
}

/* ── 태블릿 ───────────────────────────────────────────────── */

@media (min-width: 701px) {
  .landing-page {
    --page-gutter: var(--space-7);
  }

  .lp-hero__title {
    font-size: var(--text-5xl);
  }

  .lp-hero__lead {
    font-size: var(--text-lg);
  }

  .lp-hero__shot img {
    width: 340px;
  }

  .lp-section__head h2,
  .lp-dark h2,
  .lp-final__band h2,
  .lp-gate__title {
    font-size: var(--text-4xl);
  }

  .lp-section__head p,
  .lp-intro__body p,
  .lp-dark > p {
    font-size: var(--text-lg);
  }

  .lp-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-7);
  }

  .lp-matrix th,
  .lp-matrix td {
    padding: var(--space-5) var(--space-6);
  }

  .lp-matrix tbody td,
  .lp-matrix thead th {
    font-size: var(--text-md);
  }

  .lp-matrix tfoot th,
  .lp-matrix tfoot td {
    font-size: var(--text-lg);
  }

  .lp-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-card__panel {
    height: 300px;
  }

  .lp-card__panel img {
    width: 228px;
  }

  .lp-dark,
  .lp-final__band {
    padding-block: var(--space-12);
  }
}

/* ── 데스크톱 ─────────────────────────────────────────────── */

@media (min-width: 900px) {
  /* 소개는 좌측 라벨 · 우측 본문 두 단으로 벌어집니다. */
  .lp-intro {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
  }

  .lp-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .lp-hero__shot img {
    width: 380px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-pill,
  .lp-gate__input,
  .lp-gate__submit {
    transition: none;
  }

  .lp-pill:hover {
    transform: none;
  }
}