/* 도입부(index.qmd) 전용 스타일
   사이드바·검색창·로고는 테마(assets/styles/)가 담당하고, 이 파일은 본문 영역만 다룬다.
   색·폰트는 _variables.scss 토큰을 따른다 (teal #0BA29A / Pretendard GOV). */

.landing {
  --lz-teal: #0BA29A;
  --lz-teal-deep: #076B66;
  --lz-teal-wash: #EFF8F7;
  --lz-sand: #F8F5F3;
  --lz-ink: #212121;
  --lz-ink-soft: #616161;
  --lz-ink-mute: #868E96;
  --lz-line: #E2DFDD;
}

/* 사이드바 로고에 이미 사이트명이 있으므로 본문 제목 블록은 감춘다 */
#title-block-header { display: none; }

/* ─────────────────────────────────────────────
   표지 — 큰 타이틀과 여백, 발행 정보
   ───────────────────────────────────────────── */
.landing-cover {
  padding: 0 0 2.5rem;   /* 상단 여백은 #quarto-document-content 가 담당 (합 3rem) */
  border-bottom: 1px solid var(--lz-line);
  margin-bottom: 3rem;
}
.landing-cover .eyebrow {
  margin-bottom: 1rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em;
  color: var(--lz-teal); text-transform: uppercase;
}
.landing-cover h1 {
  margin: 0 0 1.25rem; padding: 0; border: 0;
  font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.24;
  letter-spacing: -0.035em; color: var(--lz-ink);
}
.landing-cover h1 .accent { color: var(--lz-teal); }
.landing-cover .lede {
  margin: 0; max-width: 64rem;
  font-size: 1.0625rem; line-height: 1.85; color: var(--lz-ink-soft);
  text-wrap: pretty;   /* 마지막 줄에 낱말 하나만 남는 것을 피한다 */
}
.landing-cover .meta {
  display: flex; flex-wrap: wrap; gap: 2.25rem;
  margin: 1.75rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--lz-line);
  font-size: 0.875rem;
}
.landing-cover .meta > div { display: flex; gap: 0.5rem; }
.landing-cover .meta dt { margin: 0; font-weight: 600; color: var(--lz-ink); }
.landing-cover .meta dd { margin: 0; color: var(--lz-ink-soft); }

/* ─────────────────────────────────────────────
   섹션 — 시리즈별 안내
   ───────────────────────────────────────────── */
.landing-section { margin-bottom: 3.5rem; }
.landing-section:last-of-type { margin-bottom: 1.5rem; }

.landing-section .sec-head {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding-bottom: 0.3125rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--lz-ink);
}
.landing-section .sec-head h2 {
  margin: 0; padding: 0; border: 0;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--lz-ink);
}
.landing-section .sec-intro {
  margin: 0 0 1.5rem; max-width: 64rem;
  font-size: 0.9375rem; line-height: 1.85; color: var(--lz-ink-soft);
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────
   카드 그리드
   ───────────────────────────────────────────── */
.landing-grid { display: grid; gap: 0.875rem; }
.landing-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.landing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.landing-card {
  display: flex; flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--lz-line); border-radius: 14px;
  background: #fff; text-decoration: none;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1),
              box-shadow 220ms ease, border-color 220ms ease;
}
.landing-card:hover {
  transform: translateY(-3px); border-color: var(--lz-teal);
  box-shadow: 0 10px 26px rgba(33,33,33,.08);
}
.landing-card:hover .card-title { color: var(--lz-teal-deep); }

.landing-card .card-topic {
  margin-bottom: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--lz-teal-deep);
}
.landing-card .card-title {
  margin: 0 0 0.5rem;
  font-size: 1rem; font-weight: 700; line-height: 1.45; letter-spacing: -0.015em;
  color: var(--lz-ink); transition: color 220ms ease; text-wrap: pretty;
}
.landing-card .card-note {
  margin: 0; font-size: 0.8125rem; line-height: 1.7; color: var(--lz-ink-mute); text-wrap: pretty;
}
.landing-card .card-go {
  margin-top: auto; padding-top: 0.875rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--lz-teal);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.landing-card:hover .card-go { opacity: 1; transform: translateX(0); }

/* 도시진단 카드는 분야명이 곧 제목이라 부제만 둔다 */
.landing-card.is-metric .card-title { font-size: 1.0625rem; margin-bottom: 0.4375rem; }

@media (max-width: 1024px) {
  .landing-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .landing-grid.cols-4, .landing-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .landing-grid.cols-4, .landing-grid.cols-3 { grid-template-columns: 1fr; }
  .landing-cover { padding: 2rem 0 1.75rem; margin-bottom: 2rem; }
  .landing-cover .meta { gap: 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-card, .landing-card .card-go { transition: none; }
  .landing-card:hover { transform: none; }
}