/* ========================================
   landing.css — 랜딩 (`/` index.php)

   규칙은 docs/prd-redesign.md. 이 파일이 지키는 것:
     · 바탕은 순백 — 색은 콘텐츠(아이콘)가 낸다
     · 경계는 테두리 몫. 그림자는 호버 보조만
     · 오렌지는 액센트. 주 버튼은 --ink-900 검정 (그라데 금지)
     · 이중 중첩 금지 — 카드를 감싸는 흰 상자를 두지 않는다

   🔴 클래스를 `.tool-*`(tools.css) 과 **일부러 분리**했다.
      진열은 JS 가 그리고 랜딩은 PHP 가 그린다 — 한쪽을 고치다 다른 쪽이
      깨지는 일이 없어야 한다 (docs/prd-redesign.md §7).
   ======================================== */

/* 🔴 --container-max 를 그대로 쓴다. 여기만 좁히면 헤더 로고와 본문 좌측 라인이
   어긋난다 (docs/prd-redesign.md §5). */
.landing {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) var(--spacing-2xl);
}

/* ────────────── ① 히어로 ──────────────
   🔴 배경을 칠하지 않는다. 색 블록을 깔면 그라데를 걷어낸 의미가 없어지고
   (prd-redesign.md §1), 바탕이 순백이라 여백만으로 충분히 열린다. */
.landing-hero {
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.landing-hero-title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-4xl);
  font-weight: 800;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
}

.landing-hero-sub {
  /* 🔴 폭을 제한해 두 줄로 접는다. 1200px 을 꽉 채운 한 줄은 눈이 되돌아올
     자리를 못 찾아 오히려 안 읽힌다 (.page-head 와 같은 이유). */
  max-width: 46ch;
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-lg);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

/* CTA 는 **하나**다. 둘을 나란히 두면 무엇이 주 행동인지 흐려진다. */
.landing-cta-btn {
  font-size: var(--font-base);
  padding: 11px 30px;
}

/* 히어로 CTA([도구 둘러보기]) → #tools 부드러운 이동.

   🔴 **JS 를 쓰지 않는다.** `scroll-behavior` 한 줄이면 되고, 앵커 링크라
      JS 가 죽어도 이동 자체는 그대로 된다(효과만 사라진다).
   🔴 `html` 에 걸어도 **랜딩에만 적용된다** — landing.css 는 index.php 만
      싣기 때문이다. `:has(.landing)` 로 좁히면 그 셀렉터를 모르는 브라우저에서
      규칙이 통째로 무시돼 효과만 조용히 사라진다(굳이 위험을 살 이유가 없다).
   🔴 헤더가 sticky(52px) 라 그냥 이동하면 **섹션 제목이 헤더 뒤로 숨는다.**
      scroll-margin-top 으로 그만큼 미리 띄운다 — 여백을 조금 더 준다. */
html {
  scroll-behavior: smooth;
}

.landing-tools {
  scroll-margin-top: 68px;
}

/* 🔴 움직임을 끈 사용자에게는 즉시 이동한다(멀미·전정기관). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ────────────── ② 도구 그리드 ────────────── */
.landing-section-head {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--ink-200);
}

.landing-section-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.landing-section-desc {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--ink-500);
}

/* auto-fit + 1fr — 도구가 늘어도 CSS 를 안 고친다. 남는 폭은 카드들이 균등하게
   나눠 갖는다(auto-fill 이면 빈 칸으로 남아 마지막 줄이 한쪽으로 쏠린다).

   🔴 1200px 에서 **3열로 묶는다** (진열의 240px 자유 배치와 다른 점).
   랜딩은 카드가 항상 홀수다 — 도구 4종 + '준비 중' = 5장. 4열이면 마지막
   한 장만 다음 줄에 남아 우측이 통째로 비고, '자란다는 신호' 가 '깨진 레이아웃'
   으로 읽힌다(실측). 3열이면 3+2 로 앉아 빈 칸이 두 칸뿐이다.
   도구가 5종이 되면 6장이라 3열에 딱 맞는다. */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  align-items: stretch;
}

@media (min-width: 900px) {
  .landing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ────────────── 카드 ────────────── */
.landing-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  background: var(--bg-card);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

/* 🔴 1px 만 올린다. 더 올리면 카드가 떠 보이고, 옆 카드와 높이가 어긋나 보인다. */
.landing-card:hover {
  border-color: var(--ink-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* 🔴 **보유 카드에 색을 주지 않는다** (2026-09-05 되돌림).
   예전엔 보유 시 테두리·아이콘이 오렌지로 바뀌었는데, 그러면 **로그인 전후로
   같은 페이지가 다른 디자인처럼 보인다.** 게다가 오렌지는 이 사이트에서
   '강조/추천' 으로 읽히지 '내가 가진 것' 으로 읽히지 않는다.
   보유 여부는 `사용중` 배지가 **글자로** 이미 말한다 — 색까지 겹칠 이유가 없다. */

.landing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

/* 아이콘 — 인라인 SVG. 이모지를 쓰지 않는 이유는 includes/tool-icons.php 참조. */
.landing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--ink-100);
  color: var(--ink-700);
}

/* .tool-icon-svg 는 tools.css 가 정의하지만 랜딩은 그 파일을 안 싣는다.
   PHP toolIconSvg() 가 그 클래스를 박아 주므로 여기서 크기를 다시 준다. */
.landing-card .tool-icon-svg {
  width: 22px;
  height: 22px;
}

/* 유형 라벨 — 웹 / 크롬 확장 / PC 프로그램.
   설치가 필요한 도구인지가 카드에서 바로 보여야 한다. */
.landing-card-form {
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--ink-500);
  padding: 2px 8px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.landing-card-name {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.landing-card-desc {
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

/* 🔴 빈 줄에도 min-height 를 준다: 안 그러면 보유/미보유 카드의 버튼 높이가
   달라져 그리드가 들쭉날쭉해 보인다. */
/* 🔴 **비어 있는 게 정상이다** — 이제 구독 만료일 말고는 아무것도 안 들어간다
   (2026-09-06 '사용중'·가격라벨 제거). 그래서 min-height 로 자리를 잡아 두지
   않는다 — 대부분의 카드에서 빈 줄로 남아 버튼이 아래로 밀린다. */
.landing-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.landing-card-meta:empty {
  margin-top: 0;
}

/* 부가정보 — 구독 만료일 (그 외 라벨은 붙이지 않는다) */
.landing-card-note {
  font-size: var(--font-xs);
  color: var(--ink-500);
}

/* 🔴 버튼은 카드 바닥에 붙인다 (margin-top:auto). 설명 길이가 도구마다 달라
   그냥 두면 버튼 줄이 카드마다 다른 높이에 서서 지저분해진다. */
.landing-card-action {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.landing-card-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--font-sm);
  padding: 9px 16px;
}

/* 설치된 확장처럼 '열' 곳이 없는 도구의 안내.
   🔴 버튼과 같은 높이를 차지해야 같은 줄의 밑선이 맞는다. */
.landing-card-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-align: center;
  font-size: var(--font-xs);
  color: var(--ink-400);
  line-height: var(--line-base);
}

/* "준비 중" 슬롯 — 플랫폼이 자란다는 신호.
   🔴 점선 + 흐린 글자로 **실물 도구와 확실히 구분**한다. 같은 모양이면
   클릭했다가 아무 일도 안 일어나 신뢰를 깎는다. */
.landing-card.is-soon {
  border-style: dashed;
  border-color: var(--ink-200);
  background: transparent;
}

.landing-card.is-soon:hover {
  border-color: var(--ink-200);
  box-shadow: none;
}

.landing-card.is-soon .landing-card-icon {
  background: transparent;
  border: 1px dashed var(--ink-200);
  color: var(--ink-300);
}

.landing-card.is-soon .landing-card-name {
  color: var(--ink-400);
}

.landing-card.is-soon .landing-card-desc {
  color: var(--ink-400);
}

.landing-card.is-soon .landing-card-form {
  color: var(--ink-400);
  border-style: dashed;
}

/* ════════════════════════════════════════════════════════════════════
   아래는 2026-09-05 "밋밋함" 개선. 근거는 docs/prd-redesign.md §7 랜딩.

   🔴 **랜딩은 밀도 화면이 아니다.** 사이트 토큰은 공급사 15열 표·도구 앱셸 같은
      **작업 화면** 기준으로 잡혀 있다(본문 14px). 그 값을 랜딩에 그대로 쓰면
      랜딩이 관리자 화면처럼 보인다 — 실제로 그래서 밋밋했다.
      → 랜딩 **전용 스케일**을 여기서 따로 세운다. :root 를 고치지 않는다
        (고치면 전 페이지 밀도가 무너진다).
   ════════════════════════════════════════════════════════════════════ */

.landing {
  /* 히어로·섹션 사이 숨 쉬는 간격. --spacing-2xl(48px)로는 랜딩이 답답하다. */
  --landing-gap: 96px;
  --landing-gap-sm: 56px;
}

/* ────────────── ② 히어로 스케일업 ──────────────
   36px → 52px. --font-5xl(48px)도 있지만 랜딩 히어로는 사이트 최대 크기여야
   해서 토큰을 재사용하지 않고 여기서만 키운다. */
.landing-hero {
  padding: var(--landing-gap) 0;
}

/* ────────────── ③ 아이콘에 색 ──────────────
   prd-redesign.md §1-③ 이 처방한 것: "바탕이 아니라 콘텐츠에 색이 없다."
   비로그인 방문자(= 랜딩 타깃 전원)에게 지금 오렌지가 0픽셀이었다.

   🔴 §1-① 을 어기지 않는다 — 오렌지는 여전히 CTA 가 아니다. 아이콘은
      버튼이 아니라 **콘텐츠**이고, 당근 비유(아이콘·썸네일이 색을 낸다)가
      가리킨 자리가 정확히 여기다.
   🔴 도구마다 다른 색을 주지 않는다. 무지개가 되면 팔레트가 무너진다 —
      **브랜드 오렌지 한 색**으로 통일하고, 농도만 카드 상태가 정한다. */
.landing-card-icon {
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid var(--brand-100);
  width: 44px;
  height: 44px;
}

.landing-card .tool-icon-svg {
  width: 24px;
  height: 24px;
}

/* 호버 때만 한 단계 짙어진다 — 카드가 눌리는 것임을 색으로도 말한다. */
.landing-card:hover .landing-card-icon {
  background: var(--brand-100);
  border-color: var(--brand-200);
}

/* '준비 중' 은 색을 받지 않는다 — 실물 도구와 구분이 흐려진다. */
.landing-card.is-soon .landing-card-icon,
.landing-card.is-soon:hover .landing-card-icon {
  background: transparent;
  border: 1px dashed var(--ink-200);
  color: var(--ink-300);
}

/* ════════════════════════════════════════════════════════════════════
   ① 섹션 추가 — 랜딩이 "한 화면" 이라 밋밋했다
   ════════════════════════════════════════════════════════════════════
   섹션이 히어로+그리드 **둘뿐**이라 스크롤할 게 없었다. 정보가 부족한 게
   아니라 **설득의 리듬이 없었다** (mooni 는 Why→How→Works→Contact 4단).

   🔴 **없는 실적을 지어내지 않는다** (prd-tools-platform.md §5 그대로).
      후기·요금제·스크린샷·회원수 자랑은 여전히 없다. 여기 넣는 둘은
      실적이 아니라 **우리가 이미 아는 사실**이다:
        · 문제 정의 — 셀러가 반복하는 노동. 지어내는 게 아니라 관찰이다
        · 사용 방법 — 결제코드→자동부여→열림. 우리 실제 구조다
   ════════════════════════════════════════════════════════════════════ */

/* 섹션 사이 간격 — 이게 '시원함' 의 8할이다.
   🔴 .landing-how 는 **뺀다** — 아래에서 상자(padding 단축)로 다시 잡으므로
      여기 두면 죽은 선언이 되고, 나중에 읽는 사람이 값을 두 곳에서 찾게 된다. */
.landing-tools,
.landing-pains {
  padding-top: var(--landing-gap);
}

/* ────────────── 문제 정의 ──────────────
   🔴 카드로 만들지 않는다. 아래 도구 그리드가 이미 카드라 여기도 카드면
      **같은 모양이 두 번** 나와 어느 쪽이 도구인지 흐려진다.
      → 테두리 없는 열거로 둔다. 색은 숫자가 낸다. */
.landing-pain-grid {
  display: grid;
  /* 🔴 4열로 늘어놓지 않는다 — 1200px 에서 한 칸이 280px 도 안 돼 설명이
     4~5줄로 접히고, 얇은 기둥 넷이 서 있는 모양이 된다(실측).
     2×2 는 한 칸이 넓어 설명이 2줄에 앉고, 위 히어로의 중앙 정렬과도
     리듬이 갈린다. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl) var(--spacing-2xl);
  margin-top: var(--spacing-xl);
  max-width: 900px;
}

.landing-pain {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* 큰 숫자 — 화면에 색과 리듬을 주는 장치.
   🔴 §1-① 을 지킨다: 버튼이 아니라 **강조 수치**라 오렌지가 허용되는 자리다. */
.landing-pain-num {
  font-size: var(--font-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--brand-500);
}

.landing-pain-title {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.landing-pain-desc {
  margin: 0;
  font-size: var(--font-base);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

/* ────────────── 사용 방법 (3단계) ──────────────
   🔴 **섹션 색면(상자)은 유지한다** (2026-09-07 사용자 결정).
      랜딩에서 유일하게 배경이 있는 곳이다 — 흰 화면이 끝없이 이어지면
      스크롤이 어디까지 왔는지 알 수 없고, '유료 이용 방법' 이라는 성격이
      다른 블록임을 색면이 말해 준다. 🔴 **두 곳 이상 깔면 §1-③ 위반**이다.

   🔴 **그 안의 흰 카드 3장만 걷어냈다.** §3(이중 중첩) 이 금지한 '상자 안의
      상자' 가 여기였다 — 카드가 **나란히** 있을 뿐이라 '순서' 로 읽히지
      않았고, 설명 길이가 달라 첫 칸만 아래가 비었다(실측).
      → 번호 → 화살표 → 번호로 이어지는 **한 줄 진행**으로 바꿨다.
        단계라는 뜻이 글자가 아니라 모양으로 전달된다. */
.landing-how {
  margin-top: var(--landing-gap);
  padding: var(--landing-gap) var(--container-pad);
  background: var(--ink-50);
  border-radius: var(--radius-lg);
}

.landing-how-inner {
  max-width: 980px;
  margin: 0 auto;
}

/* 🔴 화살표를 넣으려고 그리드가 아니라 flex 를 쓴다 — 칸과 칸 **사이**에만
   기호가 들어가야 하는데, 그리드는 갭에 무언가를 놓을 수 없다.
   (`.landing-step + .landing-step::before` 로 앞 칸 뒤에 붙인다) */
.landing-step-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

/* 🔴 테두리도 배경도 없다. 위 문제정의(.landing-pain) 와 같은 결이라
   랜딩 전체가 한 문서로 읽힌다. */
.landing-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  position: relative;
}

/* 단계 사이 화살표 — 두 번째 칸부터 자기 **앞**에 하나씩 놓는다.
   🔴 마지막 뒤에는 안 붙는다(개수를 세지 않아도 자동으로 맞는다).
   🔴 장식이므로 보조기술이 읽어도 뜻이 상하지 않는 기호만 쓴다. */
.landing-step + .landing-step::before {
  content: '';
  position: absolute;
  /* 갭(--spacing-lg)의 한가운데. 번호 원의 세로 중심(13px)에 맞춘다. */
  left: calc(var(--spacing-lg) / -2 - 4px);
  top: 12px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--ink-300);
  border-right: 1.5px solid var(--ink-300);
  transform: rotate(45deg);
}

/* 번호 — 채운 검정 원을 **테두리 원**으로 내렸다.
   🔴 검정을 줄이는 중이다(카드 버튼과 같은 이유). 여기 셋이 꽉 찬 검정이면
      화면에서 제일 강한 것이 '설명용 번호' 가 된다. */
.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  /* 🔴 회색 바탕 위라 **흰 원**이 또렷하다. 꽉 찬 검정으로 되돌리지 말 것 —
     셋이 검정이면 화면에서 제일 강한 것이 '설명용 번호' 가 된다
     (카드 버튼에서 검정을 줄인 것과 같은 이유). */
  border: 1px solid var(--ink-300);
  background: var(--bg-card);
  color: var(--ink-700);
  font-size: var(--font-xs);
  font-weight: 700;
}

.landing-step-title {
  margin: 0;
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.landing-step-desc {
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

/* 결제코드 같은 고정폭 조각 — 문장 속에서 '입력하는 값' 임이 보여야 한다. */
.landing-step-desc code {
  /* 🔴 --font-mono 은 :root 에 없다 — var() 로 썰면 prd-redesign.md §7 의
     '존재하지 않는 변수 + 폴백' 함정이 또 생긴다. 직접 스택을 적는다. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-xs);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* ════════════════════════════════════════════════════════════════════
   ④ 간판 도구 위계 — 카드 5장이 전부 같은 무게였다
   ════════════════════════════════════════════════════════════════════
   소스메이커(무료·유튜브 유입의 목적지)와 '준비 중' 장식이 같은 크기로
   앉아 있어 "뭐부터 봐야 하지" 에 답을 못 줬다.

   🔴 **PHP 가 이름을 지목하지 않는다.** 어느 도구가 간판인지는 카탈로그의
      order===1 이 이미 말한다 — 랜딩에 도구 이름을 적지 않는다는 원칙
      (index.php 머리주석)과 같은 이유다.
   🔴 3열 중 **2칸**만 먹는다. 한 줄을 통째로 쓰면 나머지 넷이 아래로
      밀려 '도구가 하나뿐인 사이트' 로 보인다.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .landing-card.is-feature {
    grid-column: span 2;
    display: grid;
    /* 아이콘 열 + 내용 열. 행은 제목 / 설명 / 바닥줄. */
    /* 아이콘 열 | 내용 열 | 라벨 열(우측 상단, 일반 카드와 같은 자리) */
    grid-template-columns: auto 1fr auto;
    /* 🔴 마지막 행을 1fr 로 열어 바닥줄을 **카드 밑변에 붙인다.** 옆 카드가
       더 길면 그리드가 늘어나는데, align-content:start 만 두면 늘어난 만큼이
       버튼 아래 빈칸으로 남는다(실측). */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--spacing-lg);
    padding: var(--spacing-xl);
  }

  /* 🔴 head 는 **아이콘만** 담는 열이 된다. 안쪽 유형 라벨(웹/크롬 확장)은
     아래 규칙으로 제목 옆에 올려 보낸다 — 여기 두면 아이콘 밑 빈 칸에
     혼자 떨어진다(실측). */
  .landing-card.is-feature .landing-card-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    margin-bottom: 0;
  }

  .landing-card.is-feature .landing-card-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
  }

  .landing-card.is-feature .tool-icon-svg {
    width: 32px;
    height: 32px;
  }

  /* 🔴 유형 라벨은 **제목과 한 줄**에 둔다. head(아이콘 열)에 남겨 두면
     아이콘 아래 빈 칸에 혼자 떨어지고, 절대배치로 옮기면 제목 길이가
     바뀔 때마다 어긋난다 → 제목을 flex 로 만들어 자연스럽게 옆에 세운다.
     마크업은 그대로다(라벨은 head 안에 있다) — order 로 자리만 바꾼다. */
  .landing-card.is-feature .landing-card-head {
    display: contents;
  }

  .landing-card.is-feature .landing-card-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  /* 🔴 라벨은 **3번째 열**(우측 상단)로 보낸다. 제목과 같은 셀에 두면
     둘이 겹친다 — 일반 카드에서도 라벨은 우측 상단이라 자리도 일관된다. */
  .landing-card.is-feature .landing-card-form {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    /* 🔴 그리드 아이템은 칸 폭까지 늘어난다 — pill 이 빈 띠처럼 퍼진다(실측).
       글자 폭만 쓰도록 우측에 붙인다. */
    justify-self: end;
  }

  .landing-card.is-feature .landing-card-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: var(--font-2xl);
    margin: 0 0 var(--spacing-sm);
  }

  .landing-card.is-feature .landing-card-desc {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: var(--font-md);
    max-width: 46ch;
  }

  /* 바닥 한 줄: 왼쪽에 메타(무료/사용중), 오른쪽에 버튼.
     둘은 **같은 행**을 좌우로 나눠 쓴다 — 세로로 쌓으면 카드가 옆 카드보다
     길어져 그리드 밑선이 어긋난다(실측).
     🔴 min-height 를 지운다: 일반 카드용 26px 이 여기선 빈 줄로 남는다. */
  .landing-card.is-feature .landing-card-meta {
    grid-column: 2;
    grid-row: 3;
    min-height: 0;
    margin-top: var(--spacing-md);
    align-self: end;
  }

  .landing-card.is-feature .landing-card-action {
    grid-column: 3;
    grid-row: 3;
    margin-top: var(--spacing-md);
    padding-top: 0;
    justify-self: end;
    align-self: end;
    white-space: nowrap;
  }

  /* 🔴 간판 카드의 버튼 모양은 파일 끝 ⑥ 블록이 한 곳에서 정한다 —
     여기 두면 일반 카드 링크화 규칙과 순서를 매번 따져야 한다. */

  .landing-card.is-feature .landing-card-hint {
    min-height: 0;
  }
}

/* ────────────── 좁은 화면 ──────────────
   🔴 이 블록은 **파일 맨 끝**에 있어야 한다. 위의 데스크톱 값들과 같은
      특정도라 순서가 곧 우선순위다 — 중간에 두면 히어로 축소가 안 먹는다. */
@media (max-width: 640px) {
  .landing {
    --landing-gap: var(--landing-gap-sm);
  }

  .landing-hero {
    padding: var(--landing-gap-sm) 0;
  }

  .landing-hero-title {
    font-size: 34px;
  }

  .landing-hero-sub {
    font-size: var(--font-lg);
    max-width: 26ch;
  }

  .landing-cta-btn {
    font-size: var(--font-base);
    padding: 12px 28px;
  }

  .landing-pain-grid {
    gap: var(--spacing-lg);
  }

  .landing-how {
    padding: var(--landing-gap-sm) var(--spacing-lg);
  }

  /* 🔴 좁은 화면에선 **세로로 쌓는다.** flex 가로 3칸을 유지하면 한 칸이
     100px 도 안 돼 설명이 글자 하나씩 접힌다. 쌓을 땐 칸 사이 화살표를
     아래 방향으로 돌린다 — 옆을 가리키는 화살표가 세로로 서 있으면
     '순서' 가 아니라 오류로 보인다. */
  .landing-step-grid {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .landing-step + .landing-step::before {
    left: 12px;
    top: calc(var(--spacing-xl) / -2 - 4px);
    transform: rotate(135deg);
  }

  /* 좁은 화면에선 안내문과 링크를 쌓는다 — 한 줄로 두면 링크가
     nowrap 이라 안내문이 글자 하나씩 접힌다. */
  .landing-how-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
}


/* ════════════════════════════════════════════════════════════════════
   스크롤 등장 효과 (js/landing.js 와 한 쌍)
   ════════════════════════════════════════════════════════════════════

   🔴 **`.is-animated` 없이는 아무것도 숨지 않는다.** 이 클래스는 JS 가 붙인다 —
      CSS 단독으로 초기 상태를 숨기면 JS 가 실패했을 때 **본문이 통째로 사라진다.**
      효과는 있으면 좋은 것이고, 내용은 반드시 보여야 하는 것이다.

   🔴 움직이는 속성은 `transform`/`opacity` 뿐이다. top·margin 을 건드리면
      레이아웃이 매 프레임 다시 계산돼 스크롤이 끊긴다.
   ════════════════════════════════════════════════════════════════════ */

.landing.is-animated .will-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.landing.is-animated .will-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* 🔴 움직임을 끈 사용자 — JS 가 애초에 클래스를 안 붙이지만, 설정을 페이지를
   연 뒤에 바꾸는 경우가 있어 CSS 로도 한 번 더 막는다(이중 안전장치). */
@media (prefers-reduced-motion: reduce) {
  .landing.is-animated .will-reveal,
  .landing.is-animated .will-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .landing-card:hover {
    transform: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   ⑤ 히어로 배경 — 모노톤 도트 그리드 (js/landing-hero.js 와 한 쌍)
   ════════════════════════════════════════════════════════════════════
   히어로가 흰 바탕에 글자만 있어 "아직 안 만든 페이지" 처럼 보였다.

   🔴 **색을 깔지 않는다** (§1-③). 칠하는 게 아니라 --ink 계열 회색 점을
      아주 옅게(0.16) 뿌린다 — 정지 상태에서는 종이의 결처럼 읽히고,
      커서가 지나갈 때만 반응한다. 오렌지는 여기 한 픽셀도 없다.
   🔴 canvas 는 **배경**이다. 글자·CTA 는 반드시 그 위에 있어야 한다
      (아래 z-index). 안 그러면 CTA 가 안 눌린다 — 에러도 안 난다.
   ════════════════════════════════════════════════════════════════════ */
.landing-hero.has-canvas {
  position: relative;
  /* 🔴 canvas 는 히어로 박스 크기다. 좌우로 넘치면 가로 스크롤이 생긴다. */
  overflow: hidden;
}

.landing-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 🔴 커서 이벤트는 **호스트(.landing-hero)** 가 받는다. canvas 가 받으면
     그 위의 CTA 를 덮어 클릭이 막힌다. */
  pointer-events: none;
  /* 가장자리를 흐려 그리드가 '잘린 사각형' 으로 보이지 않게 한다.
     🔴 mask 를 못 읽는 브라우저는 그냥 사각형이다 — 깨지지 않는다. */
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 40%, transparent 100%);
}

/* 🔴 히어로 내용은 전부 canvas 위로. `position:relative` 가 없으면 z-index 가
   안 먹어 글자가 점 아래로 들어간다. */
.landing-hero.has-canvas > *:not(.landing-hero-canvas) {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   ⑥ 카드 버튼 위계 — 검정이 6개라 아무것도 강조가 안 됐다
   ════════════════════════════════════════════════════════════════════
   카드마다 꽉 찬 검정 막대가 가로 100% 로 깔려, 정작 봐야 할 아이콘·도구
   이름보다 **버튼이 더 무거웠다**. 게다가 카드는 이미 통째로 눌리는 것처럼
   생겼으므로(호버 시 떠오름) 버튼은 중복 안내에 가깝다.

   🔴 **화면의 꽉 찬 검정은 히어로 CTA 하나로 줄인다.** 카드 안 버튼은
      화살표 링크로 내린다 — 읽는 순서가 아이콘 → 이름 → 설명 → 행동으로
      제대로 흐른다.
   🔴 `.btn` 규칙을 고치지 않는다. 여기서만 덮어쓴다 — .btn-primary 는
      사이트 전체가 쓰는 것이라 건드리면 관리자·도구 화면까지 같이 바뀐다.
   🔴 **간판 카드(is-feature)는 예외다.** 한 장뿐이라 검정이 하나 남는 건
      위계지 소음이 아니다 — 아래 media 블록에서 되돌린다.
   ════════════════════════════════════════════════════════════════════ */
.landing-card .landing-card-btn {
  /* 버튼 옷을 벗긴다 */
  width: auto;
  justify-content: flex-start;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--ink-900);
  font-size: var(--font-sm);
  font-weight: 600;
  gap: 4px;
}

/* 화살표는 마크업이 아니라 CSS 가 붙인다 — PHP 의 라벨 로직을 안 건드린다.
   🔴 `content` 로 넣은 글자는 보조기술이 읽을 수 있다 → aria-hidden 을 못 다니
      의미 없는 기호(→)만 쓴다. 정보는 앞의 텍스트가 이미 다 담고 있다. */
.landing-card .landing-card-btn::after {
  content: '→';
  font-weight: 500;
  transition: transform var(--transition-fast);
}

.landing-card .landing-card-btn:hover:not(:disabled) {
  background: none;
  color: var(--brand-600);
}

.landing-card:hover .landing-card-btn::after {
  transform: translateX(3px);
}

/* 🔴 벗긴 만큼 카드 밑변에 붙은 밑선을 되살린다 — 버튼이 없어지면서
   카드 바닥이 허전해졌고, 액션 줄이 설명과 붙어 보였다(실측). */
.landing-card .landing-card-action {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-200);
  margin-top: auto;
}

/* 액션이 비었으면(준비 중 슬롯) 선도 긋지 않는다 */
.landing-card .landing-card-action:empty {
  border-top: none;
  padding-top: 0;
}

/* 안내문(설치된 확장 등)도 같은 줄에 왼쪽 정렬로 앉힌다 —
   가운데 정렬은 옆 카드의 링크와 밑선이 어긋나 보인다. */
.landing-card .landing-card-hint {
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
}

@media (min-width: 900px) {
  /* 🔴 간판 카드만 **꽉 찬 검정을 되돌린다.** 화면에 하나뿐이라 위계가 선다.
     위 규칙보다 뒤에 있고 특정도가 높아 그대로 이긴다. */
  .landing-card.is-feature .landing-card-btn {
    background: var(--ink-900);
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    justify-content: center;
    padding: 11px 30px;
    font-size: var(--font-base);
  }

  .landing-card.is-feature .landing-card-btn:hover:not(:disabled) {
    background: var(--ink-700);
    color: var(--text-inverse);
  }

  /* 간판 카드의 버튼엔 화살표를 안 붙인다 — 꽉 찬 버튼 안의 화살표는
     '다음 페이지' 로 읽혀 링크와 뜻이 겹친다. */
  .landing-card.is-feature .landing-card-btn::after {
    content: none;
  }

  /* 간판 카드는 바닥줄이 그리드로 갈라져 있어 밑선을 그으면 반쪽만 그어진다. */
  .landing-card.is-feature .landing-card-action {
    border-top: none;
    padding-top: 0;
  }
}

/* ────────────── 사용 방법 아래 한 줄 안내 ──────────────
   🔴 카드를 4개로 늘리지 않는다 — 3단계라는 제목과 어긋난다. 방문자가
      반드시 묻는 두 가지(설치·무료)만 각주로 붙인다. */
/* 단계 아래 마무리 줄 — 좌: 안내문 / 우: [결제코드 · 이용권 확인].
   🔴 링크를 안내문 **아래**에 쌓지 않는다. 세로로 쌓으면 각주가 두 줄이 되어
      새 섹션처럼 보인다(회색 상자를 걷어낸 뒤로 이 섹션엔 경계가 없다).
   🔴 `align-items: baseline` — 글자 밑선을 맞춘다. center 로 두면 안내문이
      두 줄일 때 링크가 가운데로 떠서 어긋나 보인다. */
.landing-how-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  /* 🔴 회색 바탕 위에서는 --ink-200 이 거의 안 보인다 — 한 단계 진하게. */
  border-top: 1px solid var(--ink-300);
}

.landing-how-note {
  margin: 0;
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

.landing-how-note strong {
  color: var(--ink-800);
  font-weight: 600;
}

/* 🔴 버튼으로 만들지 않는다 — 이 섹션은 설명이고, 화면의 주 행동은
   히어로 CTA 와 간판 도구 버튼이다. 여기에 버튼을 하나 더 두면
   검정을 줄인 의미가 없어진다(landing.css ⑥). */
.landing-how-link {
  flex-shrink: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}

.landing-how-link:hover {
  color: var(--brand-600);
}