/* 중개사 블로그 베타 랜딩 — /agent-blog-landing
 *
 * 디자인 시스템 정본은 public/admin-design.css 다. 이 파일은 그 토큰(--navy·
 * --surface·--border·--radius…)만 빌려 랜딩 고유의 배치를 얹는다.
 * 색·테두리·모서리 값을 여기서 새로 정의하지 않는다 — 정의하는 순간 사본이 되고,
 * 사본은 반드시 어긋난다 (2026-08-23 kg-design.css 사례).
 *
 * 모든 클래스에 lp- 접두를 붙인다. admin-design.css 의 .panel 은 display:none 이
 * 기본값이고 .btn·.card·.badge·.section 도 이미 쓰이고 있어, 접두 없이 원본 HTML 의
 * 클래스명을 그대로 두면 화면이 통째로 사라지거나 모양이 뒤집힌다.
 *
 * 크기 체계만 admin 과 다르다. admin 은 14px 기준의 관리도구 밀도지만 이 화면은
 * 처음 보는 중개사에게 한 번에 읽혀야 하는 판매 화면이라 본문 15px·제목 큰 값을 쓴다.
 * 색·면·경계는 전부 admin 토큰을 그대로 따른다.
 */

.lp-root {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
}
.lp-root *, .lp-root *::before, .lp-root *::after { box-sizing: border-box; }
/* :not(.lp-btn) 가 빠져 있어서 버튼 글자가 까맣게 나왔다. `.lp-root a` 는
   특정도 11, `.lp-btn` 은 10 이라 <a class="lp-btn"> 이 본문 글자색을 물려받았고
   감색 바탕에 검은 글자가 얹혔다. 링크 기본값과 버튼은 서로 건드리지 않게 나눈다. */
.lp-root a:not(.lp-btn) { color: inherit; text-decoration: none; }
.lp-root a.lp-btn { text-decoration: none; }
.lp-root h1, .lp-root h2, .lp-root h3, .lp-root p { margin: 0; }

.lp-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

/* ── 상단 바 ──────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.lp-nav-inner {
  min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lp-brand { display: flex; align-items: center; gap: 11px; }
/* 로고 원본. 높이만 정하고 폭은 비율대로 둔다 — 워드마크가 붙어 있어 정사각형이 아니다. */
.lp-brand-logo { display: block; height: 26px; width: auto; flex-shrink: 0; }
.lp-nav-label {
  margin-left: 4px; padding-left: 11px; border-left: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}

/* ── 버튼 ─────────────────────────────────────────────────
   admin 의 .btn-navy / .btn-secondary 와 같은 색을 쓰되, 랜딩은 손가락으로
   누르는 화면이라 높이만 키운다. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  background: var(--navy); color: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-btn:hover { background: var(--navy-2); }
.lp-btn-secondary {
  background: var(--surface); color: var(--text-2); border-color: var(--border);
}
.lp-btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--navy-2); }

/* ── 공통 면 ──────────────────────────────────────────────── */
.lp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lp-section { padding: 56px 0; }
.lp-section-head { margin-bottom: 24px; }
.lp-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.lp-section-head h2 {
  margin: 8px 0 8px;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.28; letter-spacing: -0.03em;
  color: var(--text);
}
.lp-section-sub { color: var(--text-2); font-size: 14px; }

/* ── HERO ─────────────────────────────────────────────────── */
.lp-hero { padding: 48px 0 8px; }
.lp-hero-card { padding: 40px; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(14, 53, 96, 0.10); color: var(--navy-2);
  border: 1px solid rgba(14, 53, 96, 0.20);
  font-size: 12px; font-weight: 600;
}
:root[data-theme="dark"] .lp-eyebrow { background: var(--surface-2); border-color: var(--border); }
.lp-eyebrow .lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.lp-hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(32px, 4.6vw, 50px); line-height: 1.18; letter-spacing: -0.035em;
}
.lp-hero h1 strong { color: var(--navy-2); font-weight: 700; }
.lp-lead { max-width: 720px; color: var(--text-2); font-size: 16px; line-height: 1.75; }
.lp-lead strong { color: var(--text); font-weight: 600; }

.lp-hero-bottom {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end;
}
.lp-offer-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* admin 의 .stat-card 와 같은 구조다 — 위쪽 3px 선으로 성격을 구분한다. */
.lp-metric {
  padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid transparent;
}
.lp-metric small {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.lp-metric strong { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.lp-metric.lp-price { border-top-color: var(--navy-2); }
.lp-metric.lp-price strong { font-size: 22px; color: var(--navy-2); font-variant-numeric: tabular-nums; }
.lp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 2. 문제 ──────────────────────────────────────────────── */
.lp-pain { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; }
.lp-pain-copy { padding: 26px 28px; }
.lp-pain-copy h3 { margin-bottom: 16px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.lp-pain-list { display: grid; gap: 11px; }
.lp-pain-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--text-2);
}
.lp-icon {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--danger-bg); color: var(--danger); font-size: 12px; font-weight: 700;
}

/* 짙은 면. 흰 카드 옆에서 「그래서 이렇게 만들었습니다」가 눈에 먼저 들어와야 한다.
 *
 * ⚠️ **`--sidebar-bg` 를 쓰면 안 된다**(2026-09-04 사용자 지적: 「이거 스타일 맞는지
 *    확인해줘」). 원본 저장소의 디자인 시스템은 사이드바가 남색(`#0E3560`)이라
 *    그 토큰을 빌려 「짙은 면」을 만들었는데, **이 대시보드의 사이드바는 흰색**
 *    (`#FFFFFF`)이다. 그대로 옮겨 오니 흰 바탕에 흰 글씨가 되어 이 칸이 통째로
 *    사라졌다. 토큰 이름이 같아도 **뜻이 달라진 것**이다.
 * ⚠️ 그래서 맨 아래 `.lp-cta` 와 **같은 채움**을 쓴다. 뜻이 「브랜드 색 짙은 면」
 *    으로 분명하고, 한 화면에서 짙은 칸 둘이 같은 색이라 따로 놀지 않는다. */
.lp-answer {
  padding: 26px 28px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-color: transparent; color: #fff;
}
.lp-answer .lp-answer-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-text); opacity: 0.6;
}
.lp-answer h3 {
  margin: 8px 0 12px;
  font-size: 24px; line-height: 1.32; letter-spacing: -0.03em; color: #fff;
}
.lp-answer p { color: var(--navy-text); font-size: 15px; line-height: 1.7; }
.lp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.lp-pills span {
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--navy-text); font-size: 12px; font-weight: 600;
}

/* ── 3. 운영 방식 ─────────────────────────────────────────── */
.lp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-flow-card { padding: 20px; position: relative; }
.lp-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(14, 53, 96, 0.10); color: var(--navy-2);
  font-size: 13px; font-weight: 700; margin-bottom: 12px;
}
:root[data-theme="dark"] .lp-num { background: var(--surface-2); }
.lp-flow-card h3 { margin-bottom: 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.lp-flow-card p { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.lp-flow-card:not(:last-child)::after {
  content: "→"; position: absolute; right: -10px; top: 50%; z-index: 3;
  color: var(--text-3); font-weight: 700; font-size: 15px;
}

/* ── 4. Offer ─────────────────────────────────────────────── */
.lp-included { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.lp-included-main { padding: 26px 28px; }
.lp-included-main h3 { margin-bottom: 14px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.lp-check-list { display: grid; gap: 10px; }
.lp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.lp-check-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 700;
}
.lp-included-side { padding: 26px 28px; background: var(--surface-2); }
.lp-price-big {
  font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em;
  color: var(--navy-2); font-variant-numeric: tabular-nums;
}
.lp-per { font-size: 15px; font-weight: 600; color: var(--text-3); }
.lp-included-side p { margin-top: 10px; color: var(--text-2); font-size: 14px; }
/* admin 의 .reco 와 같은 자리 — 조건·제약을 조용히 알린다. */
.lp-note {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; line-height: 1.65;
}
.lp-note strong { color: var(--text); font-weight: 600; }

/* ── 5. 증명 ────────────────────────────────────────────────
   왼쪽 증거 · 오른쪽 확인 경로. 이 절에서 제일 센 것은 문장이 아니라 그래프라
   왼쪽 칸을 더 넓게 준다. */
.lp-proof { padding: 26px 28px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center; }
.lp-proof h3 { margin: 6px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }
.lp-proof p { color: var(--text-2); font-size: 14px; }
.lp-proof-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* 통계 화면 캡처. 원본이 흰 배경이라 어두운 테마에서 그냥 두면 판만 떠 보인다.
   흰 바탕을 의도한 것처럼 테두리 안에 넣어 「자료 화면」으로 읽히게 한다. */
.lp-proof-shot { margin: 0; }
.lp-proof-shot img {
  display: block; width: 100%; height: auto;
  background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.lp-proof-shot figcaption {
  margin-top: 8px;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}

/* ── 6. 신뢰 ──────────────────────────────────────────────── */
.lp-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-process-card { padding: 22px; }
.lp-process-card .lp-label {
  margin-bottom: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.lp-process-card h3 { margin-bottom: 7px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lp-process-card p { color: var(--text-2); font-size: 13px; line-height: 1.6; }
/* 가운데 카드가 이 절의 요점(사람이 검수한다)이다. admin 의 .stat-card.amber 와 같은 표시. */
.lp-process-card.lp-highlight { background: var(--surface-2); border-top: 3px solid var(--amber); }

/* ── 마무리 CTA ───────────────────────────────────────────── */
.lp-cta-wrap { padding: 8px 0 72px; }
.lp-cta {
  padding: 36px 38px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
}
.lp-cta .lp-mini-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy-text); opacity: 0.75;
}
.lp-cta h2 {
  margin: 8px 0 10px;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.3; letter-spacing: -0.03em; color: #fff;
}
.lp-cta p { color: var(--navy-text); font-size: 15px; max-width: 740px; }
.lp-cta-row {
  margin-top: 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lp-cta .lp-subcopy { font-size: 12px; font-weight: 600; color: var(--navy-text); opacity: 0.8; }
.lp-cta .lp-btn { background: #fff; color: var(--navy); border-color: #fff; }
.lp-cta .lp-btn:hover { background: var(--navy-text); color: var(--navy); }

.lp-footer {
  padding: 0 0 32px; text-align: center;
  color: var(--text-3); font-size: 12px;
}

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero-card { padding: 30px; }
  .lp-hero-bottom, .lp-pain, .lp-included, .lp-proof { grid-template-columns: 1fr; }
  .lp-flow { grid-template-columns: 1fr 1fr; }
  .lp-flow-card:not(:last-child)::after { display: none; }
  .lp-process { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-container { width: min(1120px, calc(100% - 24px)); }
  .lp-nav-label, .lp-nav .lp-btn { display: none; }
  .lp-hero { padding: 32px 0 0; }
  .lp-hero-card { padding: 22px; }
  .lp-hero h1 { font-size: 30px; }
  .lp-offer-strip { grid-template-columns: 1fr; }
  .lp-hero-actions { width: 100%; }
  .lp-hero-actions .lp-btn { width: 100%; }
  .lp-section { padding: 40px 0; }
  .lp-flow { grid-template-columns: 1fr; }
  .lp-proof-actions .lp-btn { width: 100%; }
  .lp-cta { padding: 26px 22px; }
  .lp-cta-row .lp-btn { width: 100%; }
}