/* /partials/layout.css · 자강헌 공통 레이아웃 (v3 — specificity 강화)
   · 전역 가로 오버플로우 방어 (과거 버그 ①)
   · 네비 고정 시 본문 가림 방지 (과거 버그 ②)
   · 네비·푸터 공통 스타일 — 모든 자식 룰을 .site-nav / .site-footer 로 prefix
     (페이지의 .nav-inner / .footer-* 인라인 잔재가 specificity로 이기는 것 방지)
   · FOUC 자리 확보 (min-height) */

/* ═══════════════════════════════════════════════════════════════
   ① 전역 오버플로우 방어 — 과거 버그 ① 재발 방지
═══════════════════════════════════════════════════════════════ */
html, body {
  max-width: 100vw;
  overflow-x: clip !important;   /* page CSS 의 body{overflow-x:hidden} 잔재 차단 — sticky 작동 보장 */
}
img, video, iframe, svg, canvas, picture, table, pre, code {
  max-width: 100%;
}
pre, code {
  overflow-x: auto;        /* 코드 블록은 내부 스크롤 허용 */
  word-wrap: break-word;
}

/* 긴 한글 제목 등 단어 경계 없는 긴 문자열 방어 */
h1, h2, h3, h4, p, li, td, th, a, span, div {
  word-break: keep-all;    /* 한글은 어절 유지 */
  overflow-wrap: break-word; /* 넘치면 줄바꿈 */
}

/* ═══════════════════════════════════════════════════════════════
   ② 언어 토글 (네비·푸터·본문 공통) — 단일 진실 소스
═══════════════════════════════════════════════════════════════ */
body .en { display: none !important; }
body.lang-en .ko { display: none !important; }
body.lang-en .en { display: revert !important; }

body .ko.block,           body.lang-en .en.block        { display: block !important; }
body .ko.flex,            body.lang-en .en.flex         { display: flex !important; }
body .ko.inline-block,    body.lang-en .en.inline-block { display: inline-block !important; }
body.lang-en .ko.block,   body.lang-en .ko.flex,        body.lang-en .ko.inline-block { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   ③ FOUC 자리 확보 — partials fetch 중 깜빡임 방지
═══════════════════════════════════════════════════════════════ */
#site-nav {
  min-height: 72px;
  background: var(--bg, #fff);
}
#site-footer {
  min-height: 320px;
  background: var(--navy, #0a1931);
}
@media (max-width: 768px) {
  #site-nav { min-height: 60px; }
  #site-footer { min-height: 640px; }
}

/* ═══════════════════════════════════════════════════════════════
   ④ 네비 스타일 — 모든 자식을 .site-nav 로 prefix (specificity 강화)
═══════════════════════════════════════════════════════════════ */
.site-nav {
  position: sticky !important;  /* page CSS 의 nav{position:fixed} 잔재 차단 */
  top: 0 !important;
  z-index: 100;
  background: rgba(250, 250, 248, .85);   /* 반투명 + blur = 가벼운 오버레이 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.site-nav .nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-nav .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text, #1a1a1a);
  flex-shrink: 0;
}
.site-nav .logo img {
  height: 32px;
  width: auto;
}
.site-nav .logo span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--text-secondary, #666);
}
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav .nav-links > a {
  color: var(--text-secondary, #666);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap;
}
.site-nav .nav-links > a:hover,
.site-nav .nav-links > a.menu-active {
  color: var(--teal, #0b8f8a);
}
.site-nav .lang-toggle {
  display: flex;
  gap: 4px;
}
.site-nav .lang-btn {
  background: none;
  border: 1px solid var(--border, rgba(0,0,0,.15));
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary, #666);
  font-family: inherit;
}
.site-nav .lang-btn.active {
  background: var(--navy, #0a1931);
  color: #fff;
  border-color: var(--navy, #0a1931);
}

/* DCI 드롭다운 */
.site-nav .nav-dropdown {
  position: relative;
}
.site-nav .nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #666);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav .nav-dropdown-toggle:hover { color: var(--teal, #0b8f8a); }
.site-nav .nav-dropdown-toggle .arrow {
  font-size: 10px;
  transition: transform .2s;
}
.site-nav .nav-dropdown.open .nav-dropdown-toggle .arrow {
  transform: rotate(180deg);
}
.site-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  padding: 12px 0;
  min-width: 200px;
  display: none;
  z-index: 101;
}
.site-nav .nav-dropdown.open .nav-dropdown-menu { display: block; }
.site-nav .nav-dropdown-menu .menu-label {
  display: block;
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-tertiary, #999);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.site-nav .nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--text-secondary, #666);
  text-decoration: none;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.site-nav .nav-dropdown-menu a:hover {
  background: var(--border, rgba(0,0,0,.04));
  color: var(--teal, #0b8f8a);
}
.site-nav .nav-dropdown-menu a.menu-active {
  color: var(--teal, #0b8f8a);
  font-weight: 500;
}

/* 햄버거 (모바일) */
.site-nav .hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 4px;
}
.site-nav .hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text, #1a1a1a);
  transition: transform .2s, opacity .2s;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .site-nav .nav-inner { padding: 12px 16px; }
  .site-nav .logo span { display: none; }
  .site-nav .hamburger { display: flex; }
  .site-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(250, 250, 248, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    gap: 12px;
    z-index: 99;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .site-nav .nav-links.open { display: flex; }
  .site-nav .nav-links > a { padding: 8px 0; }
  .site-nav .lang-toggle { justify-content: center; margin-top: 8px; }
  .site-nav .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 8px 0;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ⑤ 푸터 스타일 — 모든 자식을 .site-footer 로 prefix
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy, #0a1931);
  color: rgba(255,255,255,.8);
  padding: 48px 24px 32px;
  margin-top: 80px;
  text-align: left;   /* 페이지 inline footer{text-align:center} 잔재 차단 */
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
.site-footer .footer-col {
  text-align: left;
}
.site-footer .footer-col-title {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
}
.site-footer .footer-col-title-accent { color: var(--teal, #0b8f8a); }
.site-footer .footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .82rem;
  line-height: 2.2;
  text-align: left;
}
.site-footer .footer-list li { text-align: left; }
.site-footer .footer-list a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  display: block;
  transition: color .2s;
  text-align: left;
}
.site-footer .footer-list a:hover { color: var(--teal, #0b8f8a); }
.site-footer .footer-list a.footer-cta {
  color: var(--teal, #0b8f8a);
  font-weight: 500;
}
.site-footer .footer-identity .footer-logo {
  height: 28px;
  opacity: .9;
  margin-bottom: 16px;
  display: block;
}
.site-footer .footer-org {
  color: rgba(255,255,255,.8);
  font-weight: 500;
  font-size: .92rem;
  margin: 0 0 8px;
  text-align: left;
}
.site-footer .footer-tagline {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.7;
  margin: 0 0 16px;
  text-align: left;
}
.site-footer .footer-contact {
  font-size: .82rem;
  margin: 0;
  text-align: left;
}
.site-footer .footer-contact a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s;
}
.site-footer .footer-contact a:hover { color: var(--teal, #0b8f8a); }
.site-footer .footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .footer-motto {
  font-style: italic;
}

@media (max-width: 600px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .site-footer .footer-identity {
    grid-column: 1 / -1;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}
@media(max-width:768px){#site-nav .logo .ko,#site-nav .logo .en,#site-nav .logo span:not(.lang-btn){display:none!important}#site-nav .hamburger{display:block!important;visibility:visible!important;margin-left:auto}}
/* ════════════════════════════════════════════════════════════════
 * Recent Posts — Layers 1/2/3 (recent-posts.js)
 * Append to /var/www/jagangheon/partials/layout.css
 * ════════════════════════════════════════════════════════════════ */

/* Strip section ─ container + light bg (auto-flows from worldview navy) */
.rp-strip { padding: 4.5rem 2rem; background: var(--bg, #FAFAF8); }
.rp-strip-inner { max-width: 1200px; margin: 0 auto; }

.rp-strip-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1.6rem; padding: 0 .25rem;
}
.rp-strip-label{
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal, #00A6B2); font-weight: 600;
}
.rp-strip-more{
  font-size: .82rem; color: var(--text-secondary, #5A5A5A);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.rp-strip-more:hover{ color: var(--teal, #00A6B2); border-color: currentColor; }

/* Strip track: desktop = grid, mobile = horizontal swipe */
.rp-strip-track{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Card */
.rp-card{
  display: block; position: relative;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E0DDD6);
  border-top: 3px solid var(--rp-cat-c, #0A1628);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.3rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-decoration: none;
}
.rp-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow, 0 2px 20px rgba(0,0,0,.06));
  border-color: var(--rp-cat-c, #0A1628);
}
.rp-meta{
  display: flex; align-items: center; gap: .55rem;
  font-size: .7rem; letter-spacing: .03em;
  color: var(--txt3, #8A8A8A);
  margin-bottom: .55rem;
}
.rp-cat-label{
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rp-cat-c, #0A1628); font-size: .68rem;
}
.rp-date{ color: var(--txt3, #8A8A8A); }
.rp-title{
  font-family: 'Noto Serif KR', serif;
  font-size: .98rem; font-weight: 600; line-height: 1.45;
  color: var(--navy, #0A1628);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* NEW badge — strip card (inline in meta row) */
.rp-badge{
  margin-left: auto;
  display: inline-block; padding: 1px 7px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  background: var(--rp-badge-c, #C8962E); color: #fff;
  border-radius: 3px; text-transform: uppercase;
}

/* NEW badge — Layer 1 (existing .post-card on blog/index.html) */
.post-card{ position: relative; }
.rp-badge-card{
  position: absolute; top: 10px; right: 10px;
  padding: 2px 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  background: var(--rp-badge-c, #C8962E); color: #fff;
  border-radius: 3px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
  pointer-events: none;
  z-index: 2;
}

/* Mobile: horizontal scroll-snap track */
@media (max-width: 768px){
  .rp-strip{ padding: 3rem 1.2rem; }
  .rp-strip-track{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .8rem;
    margin: 0 -1.2rem;
    padding: 0 1.2rem .5rem;
    scrollbar-width: none;
  }
  .rp-strip-track::-webkit-scrollbar{ display: none; }
  .rp-card{ flex: 0 0 78%; scroll-snap-align: start; }
}
/* ════════════════════════════════════════════════════════════════
 * Width fix v2 (4.28 evening) — align strip with site rhythm
 *  - Home: <div class="container"> (1080px) — defined in index.html
 *  - Blog: <div class="container narrow"> (800px + 3rem left padding)
 *  - Card minmax 220 → 200 to fit 5 cards in 1080px row
 * ════════════════════════════════════════════════════════════════ */
.rp-strip-track{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* ════════════════════════════════════════════════════════════════
 * Width fix v3 (4.28 evening) — both pages narrow, 3 cards per row
 *  - Override .container width specifically inside .rp-strip
 *  - Higher specificity (.rp-strip > .container) wins over plain .container
 *  - No HTML changes needed
 * ════════════════════════════════════════════════════════════════ */
.rp-strip > .container,
.rp-strip > .container.narrow{
  max-width: 800px;
  margin: 0 auto;
  padding-left: 3rem;
  padding-right: 0;
}
@media (max-width: 768px){
  .rp-strip > .container,
  .rp-strip > .container.narrow{
    padding-left: 1.2rem;
  }
}
/* ════════════════════════════════════════════════════════════════
 * Width fix v4 (4.28 evening) — mobile vertical stack
 *  - Override original horizontal-swipe carousel with 1-column grid
 *  - Symmetric mobile padding (was: left 1.2rem, right 0)
 *  - Reset flex sizing on cards (originally flex: 0 0 78%)
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .rp-strip > .container,
  .rp-strip > .container.narrow{
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .rp-strip-track{
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
  }
  .rp-card{
    flex: none;
    scroll-snap-align: none;
  }
}
/* ════════════════════════════════════════════════════════════════
 * Fix v5 (4.28 evening) — restore hamburger 3-line icon
 *  - v1 patch used display:block which collapsed 3 span lines
 *  - Original .hamburger uses flex column (vertical stack of bars)
 *  - This rule wins by source order over v1's display:block !important
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  #site-nav .hamburger{
    display: flex !important;
    flex-direction: column !important;
  }
}
/* ════════════════════════════════════════════════════════════════
 * v6 (4.28 evening) — Sitewide mobile grid audit fix
 *  Discovered (via grep grid-template-columns audit):
 *   - soul.html:667 — inline 2-col cross-link cards (no media query)
 *   - Activities.html:271, 385 — inline 2-col (only collapses in .dark-section)
 *   - soul/books/museum — class grids at 600/680/720 breakpoints
 *  Fix: force 1-col at ≤768px on all card-like grids and inline 2-col patterns
 *  Untouched: .gallery-grid, .participant-grid (intentionally compact 2-3 col)
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .video-grid,
  .upcoming-grid,
  .crosslink-grid,
  .pillars-grid,
  .stats-row,
  div[style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns: 1fr !important;
  }
}
/* ════════════════════════════════════════════════════════════════
 * v7 (4.28 evening) — hamburger visibility belt-and-braces
 *  · Logo container: don't grow, max-width caps so hamburger never pushed off
 *  · Hide ALL text spans inside logo (image only on mobile)
 *  · Hamburger: flex-column (3 lines visible) + margin-left:auto (right-pinned)
 *  · Multiple selector paths (.site-nav and #site-nav) for safety
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .site-nav .logo,
  #site-nav .logo{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: hidden;
  }
  .site-nav .logo > span,
  .site-nav .logo .ko,
  .site-nav .logo .en,
  #site-nav .logo > span,
  #site-nav .logo .ko,
  #site-nav .logo .en{
    display: none !important;
  }
  .site-nav .hamburger,
  #site-nav .hamburger{
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    visibility: visible !important;
  }
}
/* ════════════════════════════════════════════════════════════════
 * v8 (4.28 evening) — hub-card category theming + stat + preview
 *  · Each cat-{name} sets --hub-c, drives top border + label + arrow
 *  · .hub-stat: prominent serif number/fact
 *  · .hub-preview: live blog latest-post slot (filled by recent-posts.js)
 * ════════════════════════════════════════════════════════════════ */

/* ── Category colors ─────────────────────────────────────────── */
.hub-card.cat-soul         { --hub-c: #7B6CB0; }
.hub-card.cat-activities   { --hub-c: #C8962E; }
.hub-card.cat-blog         { --hub-c: #00A6B2; }
.hub-card.cat-publications { --hub-c: #b8842d; }
.hub-card.cat-museum       { --hub-c: #0A1628; }
.hub-card.cat-dci          { --hub-c: #00A6B2; }

/* Apply --hub-c to top border, label, arrow */
.hub-card[class*="cat-"]{
  border-top: 3px solid var(--hub-c);
}
.hub-card[class*="cat-"] .hub-label{
  color: var(--hub-c);
}
.hub-card[class*="cat-"] .hub-arrow{
  color: var(--hub-c);
  opacity: .55;
}
.hub-card[class*="cat-"]:hover{
  border-color: var(--hub-c);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.hub-card[class*="cat-"]:hover .hub-arrow{
  opacity: 1;
}

/* ── Stat (prominent number/fact) ────────────────────────────── */
.hub-stat{
  font-family: 'Playfair Display','Noto Serif KR',serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--hub-c, var(--navy));
  margin: .3rem 0 .9rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* ── Live preview slot (blog card only) ──────────────────────── */
.hub-preview{
  font-size: .8rem;
  color: var(--txt2, #5A5A5A);
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--border, #E0DDD6);
  line-height: 1.55;
  min-height: 1.5em;            /* reserve space before JS populates */
}
.hub-preview:empty{
  display: none;                /* hide cleanly if JS fails */
}

/* ── Adjust card padding so stat + preview fit comfortably ───── */
.hub-card[class*="cat-"]{
  padding: 1.5rem 1.5rem 2.6rem;
  min-height: 160px;
}
@media (max-width: 768px){
  .hub-stat{ font-size: 1.2rem; }
  .hub-card[class*="cat-"]{ min-height: auto; }
}
/* ════════════════════════════════════════════════════════════════
 * v9 (4.28 evening) — About hero with 自强軒 calligraphy logo center
 *  · Logo image (logo_dark.png) becomes the visual anchor
 *  · Section label + intro text all centered
 *  · Card grid order matches nav (사업·정신·저작물·박물관·블로그·DCI)
 * ════════════════════════════════════════════════════════════════ */

/* ── About hero block ─────────────────────────────────────────── */
.about-hero{
  text-align: center;
  margin: 1.2rem 0 2rem;
}
.about-logo{
  display: block;
  margin: 0 auto 1.2rem;
  max-width: 260px;
  height: auto;
  /* logo_dark.png is light calligraphy on transparent — sits well on .about's bg2 */
}
.about-name{
  font-family: 'Playfair Display','Noto Serif KR',serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy, #0A1628);
  margin: 0;
  letter-spacing: -.01em;
}

/* ── Centered intro paragraph ────────────────────────────────── */
.about-intro{
  font-size: .92rem;
  color: var(--txt2, #5A5A5A);
  line-height: 2;
  max-width: 680px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* ── Mobile: smaller logo, tighter spacing ───────────────────── */
@media (max-width: 768px){
  .about-logo{ max-width: 200px; }
  .about-name{ font-size: 1.2rem; }
  .about-intro{ font-size: .88rem; line-height: 1.9; }
}
/* ════════════════════════════════════════════════════════════════
 * v10 (4.28 evening) — hub-card summary narrative
 *  · New .hub-summary element below .hub-desc
 *  · 2-3 sentence narrative — concrete story to anchor click decision
 *  · Visually distinct from compact list-style .hub-desc
 * ════════════════════════════════════════════════════════════════ */
.hub-summary{
  font-family: 'Noto Serif KR', serif;
  font-size: .82rem;
  color: var(--txt2, #5A5A5A);
  line-height: 1.75;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border, #E0DDD6);
  letter-spacing: -.005em;
}

/* Card padding bump to accommodate longer content */
.hub-card[class*="cat-"]{
  padding: 1.5rem 1.5rem 3rem;
  min-height: auto;
}

/* Mobile: tighter spacing */
@media (max-width: 768px){
  .hub-summary{
    font-size: .8rem;
    line-height: 1.7;
    margin-top: .7rem;
    padding-top: .7rem;
  }
}
/* ════════════════════════════════════════════════════════════════
 * v12 (4.28 evening) — Timeline era markers (.tl-era)
 *  · Subtle horizontal divider + uppercase serif label
 *  · Visual rhythm break between 시작/자강헌시기/현재 groups
 *  · Stays inside .timeline padding, doesn't overlap dot pattern
 * ════════════════════════════════════════════════════════════════ */
.tl-era{
  margin: 3.5rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: 'Noto Serif KR','Playfair Display',serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt2, #5A5A5A);
  /* No left padding — sits at the timeline padding-left:40px edge,
     to the right of the vertical line (left:16px), no dot needed */
}
.tl-era:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 768px){
  .tl-era{
    font-size: .72rem;
    margin: 2.5rem 0 1.5rem;
    padding-top: 1.2rem;
  }
}
/* ????????????????????????????????????????????????????????????????
 * v11 (4.28 evening) ? Timeline CSS globalized (late append)
 * ???????????????????????????????????????????????????????????????? */
.timeline{
  position: relative;
  max-width: 800px;
  margin: 3rem auto 0;
  padding-left: 40px;
}
.timeline::before{
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.tl-item{
  position: relative;
  margin-bottom: 3rem;
  padding-left: 2rem;
}
.tl-item::before{
  content: '';
  position: absolute;
  left: -32px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--bg);
  z-index: 1;
}
.tl-item.milestone::before{
  width: 13px;
  height: 13px;
  left: -34px;
  top: 6px;
  background: var(--amber);
}
.tl-date{
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: .3rem;
}
.tl-title{
  font-family: 'Noto Serif KR','Playfair Display',serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4rem;
}
.tl-desc{
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: .85rem;
  color: var(--txt2);
  line-height: 1.8;
  margin-bottom: .6rem;
}
.tl-links{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}
.tl-links a{
  font-size: .7rem;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--txt3);
  transition: all .2s;
}
.tl-links a:hover{
  border-color: var(--teal);
  color: var(--teal);
}
.tl-video{
  margin-top: .8rem;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.tl-video video{
  width: 100%;
  display: block;
  border-radius: 8px;
}
.tl-item.future::before{ background: var(--violet); }
.tl-item.future .tl-date{ color: var(--violet); }

@media (max-width: 768px){
  .timeline{ padding-left: 28px; }
  .timeline::before{ left: 8px; }
  .tl-item::before{ left: -26px; }
  .tl-item.milestone::before{ left: -28px; }
}
/* ????????????????????????????????????????????????????????????????
 * v11 (late append) ? Timeline base CSS
 * ???????????????????????????????????????????????????????????????? */
.timeline{position:relative;max-width:800px;margin:3rem auto 0;padding-left:40px}
.timeline::before{content:'';position:absolute;left:16px;top:0;bottom:0;width:1px;background:var(--border)}
.tl-item{position:relative;margin-bottom:3rem;padding-left:2rem}
.tl-item::before{content:'';position:absolute;left:-32px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--teal);border:2px solid var(--bg);z-index:1}
.tl-item.milestone::before{width:13px;height:13px;left:-34px;top:6px;background:var(--amber)}
.tl-date{font-size:.75rem;letter-spacing:.08em;color:var(--teal);font-weight:500;margin-bottom:.3rem}
.tl-title{font-family:'Noto Serif KR','Playfair Display',serif;font-size:1.05rem;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.tl-desc{overflow-wrap:break-word;word-break:break-word;font-size:.85rem;color:var(--txt2);line-height:1.8;margin-bottom:.6rem}
.tl-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.tl-links a{font-size:.7rem;padding:3px 10px;border:1px solid var(--border);border-radius:3px;color:var(--txt3);transition:all .2s}
.tl-links a:hover{border-color:var(--teal);color:var(--teal)}
.tl-video{margin-top:.8rem;border-radius:8px;overflow:hidden;background:#000}
.tl-video video{width:100%;display:block;border-radius:8px}
.tl-item.future::before{background:var(--violet)}
.tl-item.future .tl-date{color:var(--violet)}
@media (max-width:768px){.timeline{padding-left:28px}.timeline::before{left:8px}.tl-item::before{left:-26px}.tl-item.milestone::before{left:-28px}}