/* landing.css — 서비스 소개 한 장 (`/`).
 *
 * 로드 순서: tokens.css → base.css → **pages/landing.css**
 * ⚠ 이 화면은 `layout.css` · `components.css` 를 안 얹는다. 셸이 없어서다
 *   (`login.css` 와 같은 처지). 그래서 카드 모양을 여기서 한 번 더 적는다.
 *
 * ★ 색 리터럴이 한 개도 없다. 전부 var(--…) 다 (tokens.css).
 * ★ 초록·보라·파랑이 없다 (DESIGN-SYSTEM 5색 원칙).
 */

/* ══ 바탕 ══════════════════════════════════════════════════════
   ⚠ 레몬(--lemon)을 대면적으로 깔지 않는다 (DESIGN-SYSTEM 1장).
     위쪽에서 아주 옅게 번지는 정도만 둔다 — `login.css` 와 같은 처리. */
.lp-body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(120% 46% at 50% -6%, var(--lemon-soft), transparent 60%),
    var(--bg);
}


/* ══ 머리 ══════════════════════════════════════════════════════ */
.lp-top {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ⚠ 로고에 노란 글자가 있다. 흰 패널 위에만 올린다 (DESIGN-SYSTEM 4장) */
.lp-brand {
  background: var(--white);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  line-height: 0;
}
.lp-brand img { width: 120px; height: 48px; object-fit: cover; display: block; }

.lp-login {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  white-space: nowrap;
}
.lp-login:hover { box-shadow: var(--glass-shadow); }


/* ══ 본문 ══════════════════════════════════════════════════════ */
.lp-main { max-width: 1000px; margin: 0 auto; padding: 0 20px 64px; }


/* ══ 한 줄 소개 ════════════════════════════════════════════════ */
.lp-hero { text-align: center; padding: 56px 0 44px; }

.lp-headline {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.lp-subhead {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sub);
}

/* ★ 레몬 위 글자는 잉크다. 흰 글자를 올리지 않는다 (대비 1.6:1) */
.lp-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lemon), var(--amber));
  color: var(--on-warm);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--glass-shadow);
}
.lp-cta:hover { box-shadow: var(--glass-hover); }

.lp-cta-note { margin-top: 12px; font-size: 13px; color: var(--sub); }


/* ══ 구획 ══════════════════════════════════════════════════════ */
.lp-sec { margin-top: 56px; }

.lp-sec-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--gap-head);
}


/* ══ 카드 ══════════════════════════════════════════════════════
   글래스 스펙 그대로 (DESIGN-SYSTEM 3장). */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap-grid);
}
.lp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.lp-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: var(--pad-card);
}

.lp-card-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.lp-card-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub);
}

/* ★ 채널 카드의 「무엇을 해 주나」 한 줄. **여기가 이 화면의 핵심 구분이다** —
     인스타는 우리가 올리고 블로그는 알림만이다. 눈에 띄게 둔다. */
.lp-chan-what {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--deep-amber);
}
.lp-card-chan { background: var(--lemon-soft); border-color: var(--lemon-soft); }


/* ══ 걸음 ══════════════════════════════════════════════════════ */
.lp-steps { display: grid; gap: 14px; list-style: none; }

.lp-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  padding: 18px 20px;
}

.lp-step-n {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--lemon);
  color: var(--on-warm);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.lp-step-title { font-size: 15px; font-weight: 700; color: var(--ink); }


/* ══ 가격 ══════════════════════════════════════════════════════ */
.lp-plan { display: flex; flex-direction: column; }

.lp-price {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}

.lp-plan-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
.lp-plan-list li::before { content: "· "; color: var(--deep-amber); }

.lp-note {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lemon-soft);
  color: var(--deep-amber);
  font-size: 13.5px;
  line-height: 1.6;
}


/* ══ 요금제로 넘어가는 줄 ══════════════════════════════════════
   ⚠⚠ **`.lp-note` 를 쓰지 않는다.** 그건 레몬빛 상자라 「알림」으로 읽힌다 —
     「요금제 자세히 보기」는 알림이 아니라 **다음 걸음**이다.

   ⚠⚠ 바닥의 회사 정보 규칙이 **여기 있었는데 지웠다** (2026-08-21).
     `base.css` 의 법적 고지 푸터로 옮겼다 — 소개 화면만 갖고 있던 것을
     화면 스무 장 전부가 쓴다.
     ★ 규칙을 남겨 두면 **아무도 안 쓰는 CSS** 가 된다 (금지 12).
     ⚠ 옛 클래스 이름을 여기 적지 않는다 — `test_shared_css_classes_exist.py`
       가 머리말의 클래스 이름을 「있어야 할 것」으로 읽는다. */
.lp-more-line { margin-top: 16px; }
.lp-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--deep-amber);
  text-decoration: none;
}
.lp-more:hover { text-decoration: underline; }


/* ══ 좁은 화면 ═════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .lp-headline { font-size: 26px; }
  .lp-hero { padding: 40px 0 32px; }
  .lp-sec { margin-top: 44px; }
}