/* 랜딩 — Trust & Authority + Swiss 미니멀. tokens.css 변수만 사용.
   공통 레이아웃/버튼/카드/패널/헤더/푸터/eyebrow/section-head/chip/badge/icon-box 는 app.css.
   여기엔 페이지 고유 배치(그리드·연결선·스트립)만 둔다. */

/* ── 1) 히어로 (2단) ─────────────────────────────────────── */
.hero { background: var(--c-hero-bg); padding: var(--section-y) 0; border-bottom: 1px solid var(--c-border); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: start; }
.hero-title { font-size: var(--fs-display); letter-spacing: var(--ls-tight); margin-bottom: var(--space-3); }
.hero-lead { max-width: 52ch; font-size: var(--fs-lg); margin: 0 0 var(--space-4); line-height: var(--lh-snug); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-checks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.hero-checks li { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); font-weight: var(--fw-semibold); }
.hero-checks li::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 7px;
  border-left: 3px solid var(--c-success); border-bottom: 3px solid var(--c-success);
  transform: translateY(-2px) rotate(-45deg);
}

/* 작동 예시 패널 */
.hero-demo { box-shadow: var(--shadow-lg); }
.demo-tag {
  display: inline-block; margin: 0 0 var(--space-3);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-subtle);
}
.demo-request { padding: var(--space-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.demo-title { margin: var(--space-2) 0 0; font-weight: var(--fw-semibold); color: var(--c-text); }
.demo-arrow { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.demo-arrow-mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.demo-arrow-mark svg { width: 22px; height: 22px; }
.demo-arrow-label { font-weight: var(--fw-medium); }
.demo-experts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.demo-experts li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); }
.demo-expert-body { flex: 1 1 auto; min-width: 0; }
.demo-expert-body strong { display: block; color: var(--c-text); }
.demo-meta { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); }
.demo-experts .badge { flex: 0 0 auto; }
.avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: #fff; font-weight: var(--fw-bold);
}

/* ── 2) 신뢰 띠 (정직한 라벨) ───────────────────────────── */
.trust-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-4);
}
.trust-item { display: flex; align-items: center; gap: var(--space-2); }
.trust-icon { flex: 0 0 auto; }
.trust-label { font-weight: var(--fw-semibold); color: var(--c-text); line-height: var(--lh-snug); }
.trust-note { margin: var(--space-4) 0 0; color: var(--c-text-subtle); font-size: var(--fs-sm); }

/* ── 3) 증명 — 차별점 카드 ──────────────────────────────── */
.proof-grid { list-style: none; margin: 0; padding: 0; }
.proof-card { display: flex; flex-direction: column; gap: var(--space-2); }
.proof-card .icon-box { margin-bottom: var(--space-1); }
.proof-card h3 { font-size: var(--fs-lg); margin: 0; }
.proof-card p { color: var(--c-text-muted); margin: 0; }

/* ── 4) 진행 단계 (연결형 세로 스텝, 패널 안) ───────────── */
.steps-panel { max-width: 760px; padding: var(--space-5) var(--space-4) var(--space-3); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.step::before { content: ""; position: absolute; left: 25px; top: 56px; bottom: 0; width: 2px; background: var(--c-border-strong); }
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }
.step-num {
  flex: 0 0 auto; position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
}
.step-body { padding-top: 6px; }
.step-body h3 { margin-bottom: 4px; }
.step-body p { margin-bottom: 0; color: var(--c-text-muted); }

/* ── 5) 대상 분야 카드 (좌측 액센트 보더) ──────────────── */
.scope-grid { list-style: none; margin: 0; padding: 0; }
.scope-card { border-left: 4px solid var(--c-accent); }
.scope-card h3 { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
.scope-card p { margin: 0; color: var(--c-text-muted); }

/* ── 6) 마감 CTA (네이비, 중앙) ─────────────────────────── */
.cta-inner { text-align: center; }
.cta-band h2 { color: #fff; max-width: 22ch; margin: 0 auto var(--space-2); }
.cta-band p { color: rgba(255,255,255,.92); max-width: 56ch; margin: 0 auto var(--space-4); font-size: var(--fs-lg); }
.cta-actions { justify-content: center; }

/* ── 푸터 (app.css 라이트 base 유지, 레이아웃만) ────────── */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.footer-brand-col .brand { margin-bottom: var(--space-2); }
.footer-brand-col p { max-width: 40ch; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.footer-links a { display: inline-flex; min-height: 40px; align-items: center; }
.footer-biz p { margin-bottom: 6px; }
.footer-todo { color: var(--c-text-subtle); }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-demo { order: 2; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .trust-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}