/* ============================================================
   랜딩 — 전부 .landing-page 스코프(bizplan·documents·auth 와 같은 격리 방식).
   색은 이미 쓰는 값을 재사용한다 — 디자인 토큰 체계는 범위 밖(기획서 §10).
   앱 셸은 이 파일이 아니라 app/globals.css 에 있다(모든 화면 공용이라).
   ============================================================ */

.landing-page {
  --accent: #3d6df6;
  --accent-hover: #2f5be0;
  --accent-soft: #eef2fe;
  --ink: #1b2138;
  --text: #3a4156;
  --muted: #9aa0b4;
  --line: #e7e9f2;
  --line-soft: #f0f1f7;
  --bg: #f4f6fb;
  --serif: "Lora", "Noto Serif KR", serif;
  --sans: "Inter", "Noto Sans KR", sans-serif;

  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  letter-spacing: normal;
  /* 한국어는 어절 안에서 끊으면 읽는 속도가 눈에 띄게 떨어진다 — 좁은 폭일수록 심하다. */
  word-break: keep-all;
}

.landing-page *,
.landing-page *::before,
.landing-page *::after { box-sizing: border-box; }

.landing-page a:focus-visible,
.landing-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 공용 버튼 */
.landing-page .land-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: 12px; white-space: nowrap;
}
.landing-page .land-btn.main {
  font-size: 15px; font-weight: 700; color: #fff;
  background: var(--accent); border: 0; padding: 14px 26px;
  box-shadow: 0 6px 18px rgba(61, 109, 246, 0.3);
}
.landing-page .land-btn.main:hover { background: var(--accent-hover); }
.landing-page .land-btn.ghost {
  font-size: 14.5px; color: var(--text);
  background: #fff; border: 1px solid var(--line); padding: 13px 20px;
}
.landing-page .land-btn.ghost:hover { border-color: #c7d0f9; background: var(--accent-soft); color: var(--ink); }
.landing-page .land-btn.solid {
  font-size: 12.5px; color: #fff; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 9999px; padding: 8px 15px; box-shadow: 0 3px 10px rgba(61, 109, 246, 0.26);
}
.landing-page .land-btn.solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* 섹션 머리 */
.landing-page .sec-head { text-align: center; margin-bottom: 30px; }
.landing-page .sec-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 9px;
}
.landing-page .sec-head h2 {
  margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.018em; text-wrap: balance;
}
.landing-page .sec-head > p { margin: 11px 0 0; font-size: 15px; color: var(--muted); }

/* ============ 히어로 ============ */
.landing-page .hero {
  padding: 74px 26px 66px; text-align: center;
  background: radial-gradient(120% 100% at 50% -10%, #fff 0%, #f7f9ff 42%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.landing-page .hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.landing-page .hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; color: var(--accent);
  background: var(--accent-soft); border-radius: 9999px; padding: 6px 14px; margin: 0 0 22px;
  text-align: center; line-height: 1.7;
}
/* 사업 이름 하나는 통째로만 줄을 넘긴다(이름 사이에서는 넘어가도 된다). */
.landing-page .hero-eyebrow span { white-space: nowrap; }
.landing-page .hero h1 {
  margin: 0; font-family: var(--sans); font-weight: 800;
  font-size: 46px; line-height: 1.28; letter-spacing: -0.028em; color: #0f0e0e; text-wrap: balance;
}
.landing-page .hero-sub {
  margin: 20px 0 0; font-size: 18px; line-height: 1.68; color: #6b7280; max-width: 600px; text-wrap: pretty;
}
.landing-page .hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.landing-page .hero-note { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }
.landing-page .hero-note b { color: var(--text); font-weight: 600; }

/* ============ 샘플 미리보기 ============ */
.landing-page .sample { padding: 64px 26px 68px; background: var(--bg); scroll-margin-top: calc(var(--shell-h) + 12px); }
.landing-page .sample-inner { max-width: 1000px; margin: 0 auto; }

.landing-page .sample-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(61, 109, 246, 0.09);
}
.landing-page .sample-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: #fcfdff;
}
.landing-page .sample-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 9999px;
  padding: 6px 13px; cursor: pointer;
}
.landing-page .sample-tab:hover { background: var(--accent-soft); color: var(--ink); }
.landing-page .sample-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.landing-page .sample-grow { flex: 1; }
.landing-page .sample-src { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.landing-page .sample-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }

.landing-page .sample-doc { padding: 26px 30px 30px; min-width: 0; }
.landing-page .sample-kicker { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); }
.landing-page .sample-title {
  margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.012em; text-wrap: balance;
}
.landing-page .sample-metaline {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.landing-page .sample-metaline b { color: var(--accent); font-weight: 700; }
.landing-page .sample-metaline i { font-style: normal; color: #cbd0de; }

/* 아래를 흐리며 잘라 낸다 — 전부 보여주면 로그인할 이유가 없다. */
.landing-page .sample-fade { position: relative; max-height: 298px; overflow: hidden; }
.landing-page .sample-fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 82%);
}
.landing-page .sample-fade p { margin: 0 0 14px; font-size: 14px; line-height: 1.86; color: var(--text); }
.landing-page .sample-fade ul { margin: 0 0 14px; padding-left: 19px; }
.landing-page .sample-fade li { font-size: 14px; line-height: 1.86; color: var(--text); margin-bottom: 3px; }

.landing-page .sample-chat {
  border-left: 1px solid var(--line); background: #fbfcff;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 12px;
}
.landing-page .sample-chat-cap {
  margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.landing-page .sample-bub { margin: 0; max-width: 88%; font-size: 13px; line-height: 1.68; border-radius: 14px; padding: 10px 13px; }
.landing-page .sample-bub.assistant { background: #fff; border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; }
.landing-page .sample-bub.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.landing-page .sample-bub.activity {
  background: var(--accent-soft); border: 1px solid #dbe3fb; color: #2f5be0;
  font-size: 12.5px; display: flex; align-items: center; gap: 8px; max-width: 100%;
}
.landing-page .sample-spin {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 2px solid #bfd0fb; border-top-color: var(--accent);
  animation: sample-spin 0.8s linear infinite;
}
@keyframes sample-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .landing-page .sample-spin { animation: none; }
}

.landing-page .sample-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 15px 20px; border-top: 1px solid var(--line-soft); background: #fcfdff;
}
.landing-page .sample-stats {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.landing-page .sample-stats b { color: var(--ink); font-weight: 700; }
.landing-page .sample-stats i { font-style: normal; color: #cbd0de; }

/* ============ 도구 ============ */
.landing-page .tools { padding: 8px 26px 74px; background: var(--bg); }
.landing-page .tools-inner { max-width: 1000px; margin: 0 auto; }
/* 도구 수가 바뀌어도 CSS 를 따라 고치지 않도록 auto-fit — 빈 트랙은 접히고 남은 카드가 채운다. */
.landing-page .tool-grid {
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.landing-page .tool-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 11px; text-decoration: none;
}
.landing-page a.tool-card:hover { border-color: #c7d0f9; box-shadow: 0 8px 24px rgba(61, 109, 246, 0.1); }
.landing-page .tool-card.soon { background: #fafbfe; border-style: dashed; }
.landing-page .tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.landing-page .tool-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #6c5ce7, #8b7bf0); box-shadow: 0 4px 12px rgba(108, 92, 231, 0.26);
}
.landing-page .tool-card.soon .tool-ico { background: #eceef6; box-shadow: none; }
.landing-page .tool-card h3 { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.landing-page .tool-card.soon h3 { color: var(--muted); }
.landing-page .tool-card p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--muted); flex: 1; }
.landing-page .tool-go { font-size: 13px; font-weight: 700; color: var(--accent); }
.landing-page .tool-card .soon-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted);
  border: 1px solid var(--line); background: var(--bg); border-radius: 9999px; padding: 2px 7px;
}

/* ============ 푸터 ============ */
.landing-page .land-foot {
  padding: 24px 26px 30px; border-top: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.landing-page .land-foot p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.landing-page .land-foot nav { display: flex; gap: 16px; }
.landing-page .land-foot a { font-size: 12px; color: var(--muted); text-decoration: none; }
.landing-page .land-foot a:hover { color: var(--accent); }

/* ============ 반응형 ============ */
@media (max-width: 900px) {
  /* 2분할이 무너지기 전에 대화를 아래로 내린다 — 좁은 폭에서 380px 를 붙이면 문서가 읽히지 않는다. */
  .landing-page .sample-body { grid-template-columns: minmax(0, 1fr); }
  .landing-page .sample-chat { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .landing-page .hero { padding: 48px 20px 44px; }
  .landing-page .hero h1 { font-size: 33px; }
  .landing-page .hero-sub { font-size: 16px; }
  .landing-page .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .landing-page .sample { padding: 44px 16px 48px; }
  .landing-page .sample-doc { padding: 20px 18px 22px; }
  .landing-page .sec-head h2 { font-size: 24px; }
  .landing-page .tools { padding: 4px 16px 52px; }
}