/* =========================================================
   높은 복음 — 공유 컴포넌트 스타일 (site.css)
   모든 선택자는 hg- 로 격리되어 기존 페이지 스타일과 충돌하지 않습니다.
   디자인 토큰: 진남 #13314f · 금 #b48a3e · 아이보리 #f6f1e6
   ========================================================= */

:root{
  --hg-navy:#13314f;
  --hg-navy-soft:#1f456b;
  --hg-gold:#b48a3e;
  --hg-gold-soft:#c8a667;
  --hg-ivory:#f6f1e6;
  --hg-ivory-deep:#efe7d6;
  --hg-ink:#2a2a28;
  --hg-ink-soft:#6b665d;
  --hg-line:rgba(19,49,79,.14);
  --hg-serif:"Nanum Myeongjo",serif;
  --hg-sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --hg-maxw:920px;
}

/* ---------- 상단 바 : 얇고, 스크롤되면 사라짐 (sticky 요소와 충돌 방지) ---------- */
.hg-topbar{
  font-family:var(--hg-sans);
  background:var(--hg-navy);
  color:var(--hg-ivory);
  border-bottom:1px solid rgba(180,138,62,.35);
}
.hg-topbar__inner{
  max-width:var(--hg-maxw);
  margin:0 auto;
  padding:11px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.hg-topbar__mark{
  font-family:var(--hg-serif);
  font-size:16px;
  letter-spacing:.04em;
  color:var(--hg-ivory);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.hg-topbar__mark::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--hg-gold);
  box-shadow:0 0 0 3px rgba(180,138,62,.25);
}
.hg-topbar__home{
  font-size:13px;
  letter-spacing:.02em;
  color:var(--hg-gold-soft);
  text-decoration:none;
  border:1px solid rgba(180,138,62,.45);
  padding:5px 12px;
  border-radius:999px;
  transition:background .2s ease,color .2s ease;
}
.hg-topbar__home:hover{ background:var(--hg-gold); color:var(--hg-navy); }

/* ---------- 연결 footer : 발견이 일어나는 자리 ---------- */
.hg-footer{
  font-family:var(--hg-sans);
  background:var(--hg-navy);
  color:var(--hg-ivory);
  margin-top:0;
  padding:64px 22px 48px;
}
.hg-footer__inner{ max-width:var(--hg-maxw); margin:0 auto; }

.hg-footer__eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--hg-gold-soft);
  margin:0 0 22px;
}

/* 이어서 읽기 — 다른 컨텐츠 카드 */
.hg-more{
  list-style:none; margin:0 0 52px; padding:0;
  display:grid; gap:2px;
  border-top:1px solid rgba(180,138,62,.22);
}
.hg-more__item{ border-bottom:1px solid rgba(180,138,62,.22); }
.hg-more__link{
  display:flex; align-items:baseline; gap:18px;
  padding:20px 4px;
  text-decoration:none; color:var(--hg-ivory);
  transition:padding-left .25s ease;
}
.hg-more__link:hover{ padding-left:14px; }
.hg-more__title{
  font-family:var(--hg-serif);
  font-size:20px; line-height:1.3; flex:0 0 auto;
  min-width:9.5em;
}
.hg-more__tag{ font-size:14px; color:rgba(246,241,230,.62); line-height:1.5; }
.hg-more__arrow{ margin-left:auto; color:var(--hg-gold); flex:0 0 auto; }

/* 관련 사이트 + 연락처 */
.hg-footer__cols{
  display:flex; flex-wrap:wrap; gap:40px 64px;
  padding-top:36px; border-top:1px solid rgba(180,138,62,.22);
}
.hg-footer__col h4{
  font-family:var(--hg-sans); font-weight:600;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hg-gold-soft); margin:0 0 14px;
}
.hg-sites{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.hg-sites a{
  color:rgba(246,241,230,.85); text-decoration:none; font-size:15px;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.hg-sites a:hover{ border-bottom-color:var(--hg-gold); }
.hg-sites a::after{ content:" ↗"; color:var(--hg-gold-soft); font-size:12px; }
.hg-contact{ font-size:14px; line-height:1.85; color:rgba(246,241,230,.78); }
.hg-footer__home{
  display:inline-block; margin-top:40px;
  font-size:13px; letter-spacing:.04em;
  color:var(--hg-gold-soft); text-decoration:none;
}
.hg-footer__home::before{ content:"← "; }
.hg-footer__home:hover{ color:var(--hg-ivory); }

/* =========================================================
   허브(첫 페이지) 전용
   ========================================================= */
.hg-hub{
  font-family:var(--hg-sans);
  background:var(--hg-ivory);
  color:var(--hg-ink);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
.hg-hub__wrap{ max-width:var(--hg-maxw); margin:0 auto; padding:0 22px; }

/* 히어로 */
.hg-hero{
  padding:128px 0 96px;
  position:relative;
  text-align:center;
}
.hg-hero__eyebrow{
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--hg-gold); margin:0 0 30px;
}
.hg-hero__title{
  font-family:var(--hg-serif);
  font-weight:400;
  font-size:clamp(46px,9vw,80px);
  line-height:1.06; letter-spacing:.01em;
  color:var(--hg-navy); margin:0;
}
.hg-hero__rule{
  width:1px; height:56px; margin:34px auto 0;
  background:linear-gradient(var(--hg-gold),transparent);
}
.hg-hero__sub{
  max-width:30em; margin:32px auto 0;
  font-size:clamp(16px,2.2vw,18px); line-height:1.85;
  color:var(--hg-ink-soft);
}

/* 들어가는 문들 — 번호 없이, 여백 중심의 목록 */
.hg-gates{ padding:8px 0 40px; }
.hg-gates__label{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hg-gold); text-align:center; margin:0 0 8px;
}
.hg-gate{
  display:block; text-decoration:none; color:inherit;
  border-top:1px solid var(--hg-line);
  padding:30px 8px;
  display:flex; align-items:baseline; gap:24px;
  transition:padding-left .3s ease,background .3s ease;
}
.hg-gate:last-of-type{ border-bottom:1px solid var(--hg-line); }
.hg-gate:hover{ padding-left:18px; background:rgba(180,138,62,.06); }
.hg-gate__title{
  font-family:var(--hg-serif);
  font-size:clamp(22px,3.4vw,28px); line-height:1.25;
  color:var(--hg-navy); flex:0 0 auto; min-width:8.5em;
}
.hg-gate__tag{
  font-size:15px; line-height:1.6; color:var(--hg-ink-soft);
}
.hg-gate__arrow{ margin-left:auto; color:var(--hg-gold); flex:0 0 auto; font-size:20px; }

/* 허브 안의 관련 사이트 (옅게) */
.hg-hub-sites{
  padding:56px 0 110px; text-align:center;
}
.hg-hub-sites__label{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hg-gold); margin:0 0 22px;
}
.hg-hub-sites__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px;
}
.hg-hub-sites__list a{
  color:var(--hg-navy); text-decoration:none; font-size:15px;
  border-bottom:1px solid var(--hg-line); padding-bottom:2px;
  transition:border-color .2s ease;
}
.hg-hub-sites__list a:hover{ border-bottom-color:var(--hg-gold); }
.hg-hub-sites__list a::after{ content:" ↗"; color:var(--hg-gold); font-size:12px; }

/* ---------- 등장 모션 ---------- */
.hg-fade{ opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.hg-fade.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .hg-fade{ opacity:1; transform:none; transition:none; }
  .hg-gate,.hg-more__link,.hg-topbar__home{ transition:none; }
}

/* ---------- 모바일 ---------- */
@media (max-width:640px){
  .hg-more__link{ flex-wrap:wrap; gap:4px 18px; }
  .hg-more__title{ min-width:0; flex:1 0 100%; }
  .hg-more__arrow{ display:none; }
  .hg-gate{ flex-wrap:wrap; gap:6px 0; }
  .hg-gate__title{ min-width:0; flex:1 0 100%; }
  .hg-gate__arrow{ display:none; }
  .hg-footer{ padding:48px 20px 40px; }
  .hg-hero{ padding:92px 0 72px; }
}