/* ============================================================
   이일선 목사 디지털 아카이브 — 메인페이지 (수정판) 테마
   kit.css 다음에 로드. 두 가지 톤:
   body[data-tone="light"]  — 옅은 톤(기본, 수정 요청 반영)
   body[data-tone="cobalt"] — 원안의 클래식 코발트
   ============================================================ */

html { scroll-behavior: smooth; }

/* ---------- 레이아웃 안정화 ---------- */
.hero-title { font-size: clamp(44px, 4.6vw, 72px); }
nav.primary a { white-space: nowrap; padding: 10px 12px; font-size: 14px; }
.brand-text .name { white-space: nowrap; }
.util-inner span, .util-inner a { white-space: nowrap; }
.timeline-head h3, .timeline-head .sub { white-space: nowrap; }
.hero-card .more, .chat-card .enter .btn, .chat-card .enter .role { white-space: nowrap; }
.searchband .sb-box button, .searchband .sb-chips span { white-space: nowrap; }
.rec .foot span, .figure-caption .idx { white-space: nowrap; }
.intro-text .signature span { white-space: nowrap; }
@media (max-width: 1560px) { .brand-text .name .sub { display: none; } }

/* ---------- 내비게이션 번호(본문 No.와 매칭) ---------- */
nav.primary a .no {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.55;
  margin-right: 7px;
}

/* ---------- 옅은 톤: 유틸바 / 헤더 ---------- */
body[data-tone="light"] .util {
  background: var(--paper-2);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
body[data-tone="light"] .util a:hover { color: var(--ink-900); }
body[data-tone="light"] .util .kor-eng { color: var(--ink-900) !important; }

body[data-tone="light"] header.site {
  background: var(--bone);
  color: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
body[data-tone="light"] .brand-mark { background: var(--cobalt); color: #fff; }
body[data-tone="light"] .brand-text .eyebrow { color: var(--cobalt); opacity: 1; }
body[data-tone="light"] .brand-text .name .sub { opacity: 0.55; }
body[data-tone="light"] nav.primary a { opacity: 1; color: var(--ink-700); }
body[data-tone="light"] nav.primary a:hover { background: rgba(42,84,187,0.07); }
body[data-tone="light"] nav.primary a.active { background: rgba(42,84,187,0.10); color: var(--cobalt); }
body[data-tone="light"] nav.primary .sep { background: var(--line-strong); }
body[data-tone="light"] .cta-chat { background: var(--cobalt); color: #fff !important; }
body[data-tone="light"] .cta-chat:hover { background: var(--cobalt-deep) !important; }

/* 헤더 고정 */
header.site { position: sticky; top: 0; z-index: 50; }

/* ---------- 옅은 톤: 히어로 ---------- */
body[data-tone="light"] .hero {
  background: linear-gradient(90deg, var(--bone) 0 55%, var(--cobalt-100) 55% 100%);
  color: var(--ink-900);
  border-bottom: 5px solid var(--cobalt);
}
body[data-tone="light"] .hero-eyebrow { color: var(--cobalt); }
body[data-tone="light"] .hero-eyebrow .bar { background: var(--cobalt); }
body[data-tone="light"] .hero-title { color: var(--ink-900); }
body[data-tone="light"] .hero-sub { color: var(--ink-500); }
body[data-tone="light"] .hero-meta { border-top-color: var(--line-strong); }
body[data-tone="light"] .hero-meta .kv .k { color: var(--muted); }
body[data-tone="light"] .hero-meta .kv .v { color: var(--ink-900); }
body[data-tone="light"] .hero-quote { color: rgba(42,84,187,0.10); }
body[data-tone="light"] .hero-portrait {
  border-color: var(--line);
  box-shadow: 0 24px 50px rgba(19,41,106,0.18);
}
@media (max-width: 900px) {
  body[data-tone="light"] .hero { background: var(--bone); }
}

/* ---------- 옅은 톤: 띠 배너 ---------- */
body[data-tone="light"] .strip {
  background: var(--paper-2);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
body[data-tone="light"] .strip-track { color: var(--muted); }

/* ---------- 옅은 톤: 생애와 목회(No.02) ---------- */
body[data-tone="light"] .life { background: var(--bone); color: var(--ink-900); }
body[data-tone="light"] .life::before { display: none; }
body[data-tone="light"] .timeline-wrap { border-top-color: var(--line-strong); }
body[data-tone="light"] .timeline-head h3 { color: var(--ink-900); }
body[data-tone="light"] .timeline-head .sub { color: var(--cobalt); }

/* ---------- 사진·기록(No.03) — 항상 코발트 "도판" 섹션 ---------- */
.plates { background: var(--cobalt); color: #fff; position: relative; overflow: hidden; }
.plates::before {
  content: "";
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
}
.plates .photo-wall { margin-bottom: 72px; }
.plates .rec { border: none; }
.plates .rec-sub {
  display: flex; align-items: center; gap: 14px;
  font-family: "Inter", sans-serif;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
}
.plates .rec-sub::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.18); }

/* photo wall 안의 image-slot */
.photo .img image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 소개(No.01) 도판 — 사역지 콜라주 ---------- */
.figure-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 150px;
  gap: 12px;
}
.figure-collage .slot-a { grid-column: 1 / -1; }
.figure-collage image-slot { width: 100%; height: 100%; display: block; }

/* ---------- 연구와 저서(No.04) ---------- */
.research { background: var(--paper); position: relative; }
.research::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.res-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; align-items: stretch; }
.res-feature {
  background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 24px;
  transition: transform .25s ease, border-color .25s ease;
}
.res-feature:hover { transform: translateY(-3px); border-color: var(--cobalt); }
.res-feature .cover { position: relative; overflow: hidden; background: var(--paper-2); align-self: start; }
.res-feature .cover img { width: 100%; height: auto; display: block; }
.res-note {
  margin-top: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-top: 1px solid var(--line); padding-top: 22px;
  font-family: "Noto Serif KR", serif; font-size: 14px; color: var(--muted);
}
.res-note a {
  color: var(--cobalt); font-weight: 600;
  border-bottom: 1px solid var(--cobalt); padding-bottom: 2px; white-space: nowrap;
}

/* ---------- 자료 검색(No.06) ---------- */
.searchband { background: var(--ink-900); color: #fff; padding: 88px 0; }
.searchband .sb-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center;
}
.searchband .num {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 56px; line-height: 1; color: rgba(255,255,255,0.28);
}
.searchband .eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: "Inter", sans-serif; font-size: 11px;
  letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-top: 18px;
}
.searchband .eyebrow::before { content: ""; width: 36px; height: 1px; background: rgba(255,255,255,0.5); }
.searchband h3 {
  font-family: "Noto Serif KR", serif; font-weight: 700;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.25; letter-spacing: -0.01em;
  margin-top: 14px; color: #fff;
}
.searchband .sb-box { display: flex; gap: 12px; }
.searchband .sb-box input {
  flex: 1; font-family: "Noto Sans KR", sans-serif; font-size: 16px;
  color: var(--ink-900); background: #fff; border: none; outline: none;
  padding: 18px 22px; border-radius: 2px;
}
.searchband .sb-box button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cobalt); color: #fff; border: none;
  font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 15px;
  padding: 18px 28px; border-radius: 2px; transition: background .2s, gap .2s;
}
.searchband .sb-box button:hover { background: var(--cobalt-600); gap: 14px; }
.searchband .sb-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.searchband .sb-chips span {
  font-family: "Noto Serif KR", serif; font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 13px; border-radius: 2px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.searchband .sb-chips span:hover { border-color: #fff; color: #fff; }

@media (max-width: 1100px) {
  .res-grid { grid-template-columns: 1fr; }
  .searchband .sb-inner { grid-template-columns: 1fr; gap: 36px; }
  .figure-collage { grid-template-rows: 200px 130px; }
}