/* ═══════════════════════════════════════════════════════════════
   HolyBible Design System v3 — 홈(index_new.html) 기준 통합 토큰
   - 모든 페이지에 <link rel="stylesheet" href="/design-system.css">
   - 페이지 자체 인라인 스타일과 충돌 시 우선순위가 낮도록 :root 변수 + 보편 셀렉터 위주
   ═══════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* 색상 토큰 */
  --hb-primary-50:  #F2F0FF;
  --hb-primary-100: #E6E1FF;
  --hb-primary-200: #CBC2FF;
  --hb-primary-300: #AA99FF;
  --hb-primary-400: #846AF5;
  --hb-primary-500: #6847E8;
  --hb-primary-600: #5637CF;
  --hb-primary-700: #452AA8;
  --hb-primary-800: #372284;

  --hb-blue-500: #2F80ED;
  --hb-gold-500: #F5A524;
  --hb-green-500: #2E9D62;
  --hb-red-500:  #EF4565;

  --hb-gray-50:  #F8FAFC;
  --hb-gray-100: #F1F5F9;
  --hb-gray-200: #E2E8F0;
  --hb-gray-300: #CBD5E1;
  --hb-gray-400: #94A3B8;
  --hb-gray-500: #64748B;
  --hb-gray-600: #475569;
  --hb-gray-700: #334155;
  --hb-gray-800: #1E293B;
  --hb-gray-900: #0F172A;

  --hb-bg-page:     #FAFBFF;
  --hb-bg-card:     #FFFFFF;
  --hb-bg-soft:     #F7F5FF;
  --hb-text:        #0F172A;
  --hb-text-soft:   #475569;
  --hb-text-muted:  #94A3B8;
  --hb-border:      #E2E8F0;
  --hb-border-soft: #EEF2F7;

  /* 그림자 */
  --hb-shadow-card:   0 8px 24px rgba(15, 23, 42, 0.06);
  --hb-shadow-soft:   0 12px 32px rgba(104, 71, 232, 0.10);
  --hb-shadow-button: 0 8px 16px rgba(104, 71, 232, 0.22);

  /* 라운드 */
  --hb-radius-sm: 10px;
  --hb-radius-md: 14px;
  --hb-radius-lg: 18px;
  --hb-radius-pill: 999px;

  /* 폰트 */
  --hb-font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;

  /* 호환 (구 토큰) */
  --hb-link: var(--hb-primary-500);
  --hb-link-hover: var(--hb-primary-600);
}

/* 본문 기본 — 페이지 자체 body 스타일이 없을 때만 영향 */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--hb-font);
  color: var(--hb-text);
  background: var(--hb-bg-page);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 헤딩 — 통일 (페이지가 자체 폰트사이즈 가지면 그게 우선) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hb-font);
  color: var(--hb-text);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* 링크 — 페이지 안 .card / .top-links 내부에서만 보라 톤 */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hb-primary-600); }

/* 입력 통일 — 페이지가 자체 input 스타일 안 가졌을 때 */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea, select {
  font-family: var(--hb-font);
}

/* 버튼 통일 (보편) — 페이지 자체 버튼 스타일이 없을 때만 보임 */
button { font-family: var(--hb-font); }

/* 코드/pre */
code, kbd, pre, samp {
  font-family: 'JetBrains Mono', 'D2Coding', SFMono-Regular, Consolas, monospace;
}

/* 공통 푸터 (common-footer.js가 그릴 때 사용) */
.hb-site-footer {
  background: #fff;
  border-top: 1px solid var(--hb-border-soft);
  font-family: var(--hb-font);
  color: var(--hb-text);
}
.hb-site-footer .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.hb-site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr 320px;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.hb-site-footer .footer-brand { display: flex; flex-direction: column; gap: 4px; }
.hb-site-footer .footer-brand .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; color: var(--hb-primary-500);
  text-decoration: none;
}
.hb-site-footer .footer-brand .brand img { width: 26px; height: 26px; }
.hb-site-footer .footer-brand .brand span { font-size: 16px; }
.hb-site-footer .footer-brand p { color: var(--hb-gray-500); margin: 8px 0 0; font-size: 13px; }
.hb-site-footer .footer-brand small { color: var(--hb-text-muted); font-size: 11.5px; display: block; margin-top: 12px; }
.hb-site-footer .social { display: flex; gap: 6px; margin: 12px 0 0; }
.hb-site-footer .social a {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--hb-gray-100); display: grid; place-items: center;
  color: var(--hb-gray-500); font-size: 13px; font-weight: 900;
}
.hb-site-footer .social a:hover { background: var(--hb-primary-50); color: var(--hb-primary-600); }
.hb-site-footer .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hb-site-footer .footer-links h4 { margin: 0 0 6px; font-size: 13px; color: var(--hb-gray-800); }
.hb-site-footer .footer-links a {
  display: block; color: var(--hb-gray-500);
  margin: 5px 0; font-size: 13px; text-decoration: none;
}
.hb-site-footer .footer-links a:hover { color: var(--hb-primary-600); }
.hb-site-footer .verse-card {
  position: relative; overflow: hidden; border-radius: 14px;
  color: #fff; padding: 18px; min-height: 120px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hb-site-footer .verse-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hb-site-footer .verse-card p, .hb-site-footer .verse-card strong {
  position: relative; z-index: 1;
}
.hb-site-footer .verse-card p {
  font-size: 14.5px; font-weight: 800; line-height: 1.55;
  margin: 0 0 6px; text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.hb-site-footer .verse-card strong { font-size: 12.5px; opacity: 0.92; }

@media (max-width: 1024px) {
  .hb-site-footer .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hb-site-footer .container { padding: 0 16px; }
  .hb-site-footer .footer-links { grid-template-columns: repeat(2, 1fr); }
}

/* 저작권·법적 고지 영역 — 푸터 하단, 미니멀 톤다운 */
.hb-site-footer .footer-legal,
.site-footer  .footer-legal {
  border-top: 1px solid var(--hb-border-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--hb-bg-page) 100%);
  padding: 14px 0 16px;
}
.hb-site-footer .footer-legal > .container,
.site-footer  .footer-legal > .container {
  text-align: center;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--hb-text-muted);
  letter-spacing: 0.005em;
}
.hb-site-footer .footer-legal p,
.site-footer  .footer-legal p { margin: 0 0 4px; }
.hb-site-footer .footer-legal p:last-child,
.site-footer  .footer-legal p:last-child { margin-bottom: 0; }

.hb-site-footer .footer-legal .legal-copyright,
.site-footer  .footer-legal .legal-copyright {
  color: var(--hb-gray-500);
  font-weight: 500;
  display: block;
}
.hb-site-footer .footer-legal .legal-copyright::before,
.site-footer  .footer-legal .legal-copyright::before {
  content: '© ';
  font-weight: 700;
  color: var(--hb-primary-400);
  opacity: 0.85;
  margin-right: 2px;
}

.hb-site-footer .footer-legal .legal-notice,
.site-footer  .footer-legal .legal-notice {
  color: var(--hb-text-muted);
  font-weight: 400;
}

.hb-site-footer .footer-legal .legal-contact,
.site-footer  .footer-legal .legal-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(104, 71, 232, 0.05);
  border: 1px solid rgba(104, 71, 232, 0.10);
  font-size: 10.5px;
  color: var(--hb-gray-500);
}
.hb-site-footer .footer-legal .legal-contact a,
.site-footer  .footer-legal .legal-contact a {
  color: var(--hb-primary-500);
  font-weight: 600;
  text-decoration: none;
}
.hb-site-footer .footer-legal .legal-contact a:hover,
.site-footer  .footer-legal .legal-contact a:hover { text-decoration: underline; }

.hb-site-footer .footer-legal .legal-mark,
.site-footer  .footer-legal .legal-mark {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.30);
  display: inline-block;
  font-size: 10.5px;
  color: var(--hb-gray-500);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.hb-site-footer .footer-legal .legal-mark a,
.site-footer  .footer-legal .legal-mark a {
  color: var(--hb-primary-500);
  text-decoration: none;
  font-weight: 600;
}
.hb-site-footer .footer-legal .legal-mark a:hover,
.site-footer  .footer-legal .legal-mark a:hover {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .hb-site-footer .footer-legal,
  .site-footer  .footer-legal { padding: 12px 0 14px; }
  .hb-site-footer .footer-legal > .container,
  .site-footer  .footer-legal > .container { font-size: 10px; line-height: 1.65; padding: 0 16px; }
  .hb-site-footer .footer-legal p br,
  .site-footer  .footer-legal p br { display: none; }
  .hb-site-footer .footer-legal .legal-copyright,
  .site-footer  .footer-legal .legal-copyright { padding-left: 12px; }
}

/* 공통 카드 보조 (페이지에서 .hb-card로 사용 시) */
.hb-card {
  background: var(--hb-bg-card);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-md);
  box-shadow: var(--hb-shadow-card);
  padding: 14px;
}
.hb-btn-primary {
  background: linear-gradient(135deg, var(--hb-primary-500) 0%, var(--hb-primary-600) 100%);
  color: #fff; border: none; border-radius: var(--hb-radius-sm);
  padding: 10px 18px; font-weight: 800; font-size: 14px;
  cursor: pointer; box-shadow: var(--hb-shadow-button);
  font-family: var(--hb-font);
}
.hb-btn-primary:hover { filter: brightness(1.05); }

/* 옛 보라 그라데이션 .top-links reset */
.top-links {
  background: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  box-shadow: none !important;
  font-size: inherit !important;
  text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════
   페이지 공통 컴포넌트 override — 모든 서비스 페이지 일관성
   ─ 보라 그라데이션 잡스러운 헤더 → 깔끔한 흰 + 보라 액센트
   ─ breadcrumb 톤다운
   ─ 검색 입력·버튼 통일
   ─ 페이지네이션 단정한 톤
   ═══════════════════════════════════════════════════════════════ */

/* 검색 헤더 (search_unified.html, search.html, board.html, hymn.html, ...) */
body .search-header {
  background: #fff !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hb-border-soft) !important;
}
body .search-header select,
body .search-header input[type="text"],
body .search-header input[type="search"],
body .search-header input:not([type]) {
  padding: 8px 12px !important;
  background: #fff !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-family: var(--hb-font) !important;
  color: var(--hb-text) !important;
  transition: border-color .15s, box-shadow .15s;
}
body .search-header input:focus, body .search-header select:focus {
  outline: none !important;
  border-color: var(--hb-primary-500) !important;
  box-shadow: 0 0 0 3px var(--hb-primary-50) !important;
}
body .search-header input { flex: 1 !important; min-width: 140px !important; max-width: 380px !important; }
body .search-header button {
  padding: 8px 20px !important;
  background: linear-gradient(135deg, var(--hb-primary-500) 0%, var(--hb-primary-600) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  font-family: var(--hb-font) !important;
  cursor: pointer !important;
  transition: filter .12s, transform .12s !important;
  box-shadow: 0 6px 14px rgba(104,71,232,.20) !important;
}
body .search-header button:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; }

/* breadcrumb — 그라데이션 → 흰 + 옅은 보더 */
body .breadcrumb,
body .sub-breadcrumb {
  background: var(--hb-bg-soft) !important;
  color: var(--hb-text-soft) !important;
  font-size: 12.5px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hb-border-soft) !important;
}
body .breadcrumb a, body .sub-breadcrumb a {
  color: var(--hb-primary-600) !important;
  font-weight: 600;
  text-decoration: none;
}
body .breadcrumb a:hover { text-decoration: underline; }

/* 일반 페이지 컨테이너 max-width 통일 (페이지가 자체 max-width 안 가질 때) */
body main > .container, body > .container { max-width: 1100px; }

/* 페이지 결과 영역 (검색결과·게시판) */
body .result-controls {
  background: #fff !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-radius-md) !important;
  box-shadow: var(--hb-shadow-card) !important;
}
body .result-section {
  background: #fff !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-radius-md) !important;
  box-shadow: var(--hb-shadow-card) !important;
}
body .section-header {
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%) !important;
  border-bottom: 1px solid var(--hb-border-soft) !important;
}

/* 페이지네이션 */
body .pagination {
  background: var(--hb-bg-soft) !important;
  border-radius: var(--hb-radius-md) !important;
}
body .pagination a, body .pagination span {
  color: var(--hb-primary-600) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 8px !important;
  font-weight: 700;
}
body .pagination a:hover {
  background: var(--hb-primary-500) !important;
  color: #fff !important;
  border-color: var(--hb-primary-500) !important;
}
body .pagination .current {
  background: linear-gradient(135deg, var(--hb-primary-500) 0%, var(--hb-primary-600) 100%) !important;
  color: #fff !important;
  border-color: var(--hb-primary-500) !important;
}

/* 본문 보편 링크 색상 (페이지 자체에서 자유롭게 색 사용 가능하지만 평소엔 보라 톤) */
body main a:not([class]):hover { color: var(--hb-primary-600); }

/* 액션 버튼 일반 (단어/약어 액션, 새 글, 댓글 등) */
body .action-btn,
body .btn,
body button.primary,
body .nav-btn {
  font-family: var(--hb-font);
}

/* 카드 보편 톤 (페이지가 자체 .card를 갖고 있어도 색만 살짝 정돈) */
body .card,
body .post,
body .verse-card-wrap {
  border-color: var(--hb-border) !important;
}

/* 테이블 일반 — 게시판·통계 */
body table.list, body .data-table, body table.tbl {
  font-family: var(--hb-font);
}

/* 입력 포커스 — 모든 페이지 공통 */
body input:focus, body select:focus, body textarea:focus {
  outline: none;
}

/* 폰트 사이즈 보정 (옛 페이지가 11~12px로 너무 작은 경우 — 가독성 ↑) */
body { font-size: 14px; }

/* 모바일 — 헤더와 동일한 안전 패딩 */
@media (max-width: 560px) {
  body .search-header { padding: 10px 12px !important; }
  body .search-header input { min-width: 0 !important; }
}