/* 소개 화면 (#114). tokens.css 의 토큰만 쓴다. 접두사 lp-. 폭은 tokens.css 의 4단계(.wrap) — 로그인 뒤 화면과 같다. */

body.landing {
  margin: 0; background: var(--color-bg-elevated); color: var(--color-fg);
  font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: 1.65; word-break: keep-all;
}
.landing h1, .landing h2, .landing h3 { letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.landing img { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.landing section[id] { scroll-margin-top: 72px; }

/* ── 위 메뉴 — 로그인 뒤 머리글(ui.css .app-header)과 같은 모양: 로고 · 메뉴(왼쪽) · 단추(오른쪽) ───── */
.lp-nav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.lp-nav-in { display: flex; align-items: center; gap: var(--space-5); min-height: 56px; }
.lp-brand { font-weight: 800; font-size: var(--font-size-lg); letter-spacing: -0.01em; color: var(--color-accent); text-decoration: none; }
.lp-nav nav { display: none; align-self: stretch; gap: var(--space-1); font-size: var(--font-size-sm); }
.lp-nav nav a { display: flex; align-items: center; padding: 0 var(--space-3); color: var(--color-fg-muted); font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lp-nav nav a:hover { color: var(--color-fg); background: var(--color-bg-subtle); }
.lp-nav-cta { margin-left: auto; display: flex; gap: var(--space-2); }
@media (min-width: 800px) { .lp-nav nav { display: flex; } }
@media (max-width: 479px) { .lp-nav-cta .lp-btn-ghost { display: none; } }

/* ── 단추 ────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-weight: 600; text-decoration: none;
  border: 1px solid transparent; font-size: var(--font-size-sm);
}
.lp-btn-primary { background: var(--color-accent); color: var(--color-fg-inverse); }
.lp-btn-primary:hover { background: var(--color-accent-hover); }
.lp-btn-ghost { border-color: var(--color-border-strong); color: var(--color-fg); background: var(--color-bg-elevated); }
.lp-btn-ghost:hover { background: var(--color-bg-subtle); }
.lp-btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--font-size-base); }
.lp-btn:focus-visible, .lp-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── 첫 화면 — 글은 가운데, 제품 화면은 그 아래 크게(글자가 읽히는 크기로) ─────────── */
.lp-hero { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%); padding: var(--space-8) 0 var(--space-6); }
.lp-hero-in { display: grid; gap: var(--space-6); justify-items: center; }
.lp-hero-text { text-align: center; max-width: 46em; }
.lp-eyebrow, .lp-tag { color: var(--color-accent); font-weight: 700; font-size: var(--font-size-sm); margin: 0 0 var(--space-2); }
.lp-hero h1 { font-size: clamp(2rem, 5.6vw, 3.4rem); }
.lp-lead { font-size: 1.08rem; color: var(--color-fg-muted); margin: var(--space-4) auto; max-width: 36em; }
.lp-lead strong { color: var(--color-fg); }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.lp-hero .lp-actions { justify-content: center; }
.lp-note { color: var(--color-fg-subtle); font-size: var(--font-size-sm); margin: 0; }
.lp-note a { color: var(--color-accent); }
.lp-hero-shot { width: 100%; }
.lp-hero-shot figcaption { text-align: center; }

/* ── 제품 화면 갈무리 — 찍은 폭(1160px)보다 크게 늘리지 않는다 ─────────────────── */
.lp-shot { margin: 0 auto; max-width: 1160px; width: 100%; }
.lp-shot img { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); background: var(--color-bg); width: 100%; }
.lp-shot figcaption { color: var(--color-fg-muted); font-size: var(--font-size-sm); margin-top: var(--space-2); }
/* 좁은 화면에서는 화면 갈무리를 옆으로 밀어 본다 — 줄이면 글자를 읽을 수 없다 */
@media (max-width: 767px) {
  .lp-shot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp-shot img { width: 760px; max-width: none; }
}

/* ── 한눈에 ─────────────────────────────────────────────────── */
.lp-band { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.lp-facts { display: grid; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-facts div { display: flex; flex-direction: column; gap: 2px; }
.lp-facts strong { font-size: 1.02rem; }
.lp-facts span { color: var(--color-fg-muted); font-size: var(--font-size-sm); }
@media (min-width: 1024px) { .lp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .lp-facts { grid-template-columns: minmax(0, 1fr); } }

/* ── 구역 ────────────────────────────────────────────────────── */
.lp-section { padding: var(--space-8) 0; }
.lp-section-alt { background: var(--color-bg); }
.lp-section h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.lp-sub { color: var(--color-fg-muted); margin: var(--space-2) 0 var(--space-6); max-width: 46em; }

/* ── 사례 — 위에 글(왼쪽 물음 · 오른쪽 설명), 아래에 화면을 크게 ───────────────── */
.lp-case { display: grid; gap: var(--space-5); padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--color-border); }
.lp-case:first-of-type { border-top: 0; padding-top: 0; }
#automation .lp-case { padding: 0; }
.lp-case h3, .lp-case h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.lp-case-text { display: grid; gap: var(--space-2) var(--space-8); }
.lp-case-body p { color: var(--color-fg-muted); margin: 0 0 var(--space-3); }
.lp-case-body p strong { color: var(--color-fg); }
.lp-case-body ul, .lp-steps { margin: 0 0 var(--space-3); padding-left: 1.2em; color: var(--color-fg-muted); }
.lp-case-body li { margin: 4px 0; }
.lp-steps strong { color: var(--color-fg); }
.lp-link { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.lp-link:hover { text-decoration: underline; }
@media (min-width: 1024px) { .lp-case-text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ── 이유 카드 ───────────────────────────────────────────────── */
.lp-cards { display: grid; gap: var(--space-4); }
.lp-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.lp-card h3 { font-size: 1.08rem; margin-bottom: var(--space-2); }
.lp-card p { margin: 0; color: var(--color-fg-muted); font-size: var(--font-size-sm); }
@media (min-width: 640px) { .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 도입 ────────────────────────────────────────────────────── */
.lp-start { display: grid; gap: var(--space-6); align-items: center; }
.lp-checks { list-style: none; margin: 0; padding: var(--space-5); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.lp-checks li { padding: var(--space-2) 0 var(--space-2) 1.6em; position: relative; border-top: 1px solid var(--color-border); }
.lp-checks li:first-child { border-top: 0; }
.lp-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
@media (min-width: 1024px) { .lp-start { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.lp-foot { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }

/* 좁은 화면에서는 제목의 줄바꿈을 낱말 흐름에 맡긴다(고른 줄 길이) */
@media (max-width: 639px) { .lp-hero h1 br, .lp-case h2 br { display: none; } }