/* ============================================================
   STIS 메인페이지 레이아웃 (main.css)
   디자인 시스템(variables/theme/components) 위에서 페이지 조립만 담당
   ============================================================ */

/* ---------- 히어로 ---------- */
.hero { padding-top: var(--spacing-20); } /* 헤더와의 거리 — 40은 붕 떠 보여 20으로 */
.hero__grid {
  display: grid;
  grid-template-columns: 5fr minmax(320px, 2.5fr) minmax(320px, 2.5fr); /* 배너 절반(5) : 공고 2.5 : 동향 2.5 */
  gap: var(--spacing-20);
  align-items: stretch;
}
/* 패널이 비어 숨겨졌을 때 — 공고·정보 패널 중 하나만 남으면 두 칸, 둘 다 없으면 배너만 (2026-09-21, 메인 DB 연결) */
.hero__grid--panels-1 { grid-template-columns: 5fr minmax(320px, 2.5fr); }
.hero__grid--panels-0 { grid-template-columns: 1fr; }
/* 패널 내부 콘텐츠의 최소 폭이 fr 비율을 깨지 않도록 */
.hero__grid > * { min-width: 0; }
.hero__banner {
  /* 고정 높이 대신 옆 카드 높이에 자동 동기화 (그리드 stretch) — 450은 하한 */
  height: auto;
  min-height: 420px;
  background: transparent; /* 다크 폴백 배경 제거 — 라운드 경계에 어두운 테두리 찌꺼기 방지 */
  border-radius: 36px; /* 대형 면이라 라운드도 크게 — 둥글둥글한 인상 */
  --notch-curve: 36px; /* 노치 곡률도 함께 스케일 */
}
/* 배너 = 정책동향 최신 글 슬라이드.
   좌측(노치가 없는 쪽)에 정사각 썸네일, 우측에 제목과 + 버튼만 둔다.
   노치는 우하단이라 우측 열 콘텐츠는 세로 중앙 + 좌측 정렬로 노치를 피한다. */
/* 왼쪽 위 포인트 블루 → 오른쪽 아래 딥 네이비. 같은 색상축(블루-군청-딥네이비) 3단이라 탁해지지 않는다.
   블루는 모서리에만 — 썸네일이 이미 파란 이미지라 넓게 깔면 배경과 물린다 */
.hero__posts {
  /* 왼쪽 위 포인트 블루 → 오른쪽 아래 거의 검정에 가까운 남색.
     칙칙함은 어두워서가 아니라 중간 밝기의 탁한 남색이 넓게 깔려서 생긴다.
     밝은 쪽은 블루로 확실히 열고 어두운 쪽은 확실히 떨어뜨려 대비를 만든다.
     색상축은 블루에서 벗어나지 않되 그림자 쪽을 살짝 시안 쪽으로 밀어 탁함을 없앴다 */
  background:
    radial-gradient(95% 85% at 3% -8%, rgba(56, 140, 255, 0.62) 0%, rgba(56, 140, 255, 0) 64%),
    linear-gradient(135deg,
      var(--brand-blue) 0%,
      #0b4bc4 30%,   /* 블루를 더 멀리 끌고 간다 */
      #0d3a86 58%,
      #0a2450 82%,
      #071a33 100%); /* 어두운 모서리는 남기되 검정까지는 내리지 않는다 */
}
/* 배경 영상 — 딥 네이비 스크림을 덮어 정보(썸네일·제목)가 주인공으로 남게 한다 */
.hero__posts-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__posts-scrim {
  position: absolute; inset: 0;
  /* 통계 밴드와 같은 배합 — 무게는 블랙 비네트가 잡고 색감만 네이비 틴트로 얹는다.
     배너는 면적이 작고 글자를 안으므로 통계 밴드보다 한 단계 진하게 */
  /* 통계 밴드와 같은 배합 — 무게는 블랙 비네트가 잡고 색감만 네이비 틴트로 얹는다 */
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.78) 0%, rgba(8, 10, 14, 0.6) 38%, rgba(8, 10, 14, 0.6) 62%, rgba(8, 10, 14, 0.78) 100%),
    linear-gradient(rgba(11, 34, 66, 0.16), rgba(11, 34, 66, 0.16));
}
@media (prefers-reduced-motion: reduce) { .hero__posts-bg { display: none; } }
.hero-post {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-36, 36px);
  padding: var(--spacing-32) var(--spacing-40) var(--spacing-32) var(--spacing-32);
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.hero-post.is-active { opacity: 1; visibility: visible; }
.hero-post__thumb {
  height: min(100%, 420px); /* 상한은 여유 있게 — 실제 크기는 옆 카드가 정하는 배너 높이를 따른다 */
  aspect-ratio: 1 / 1; /* 원본 비율과 무관하게 정사각 — 세로 이미지도 중앙을 채워 자른다 */
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.hero-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-soft); }
.hero-post:hover .hero-post__thumb img { transform: scale(1.04); }
/* 배너 정중앙에서 10만 위로 — 아래 노치 쪽 무게를 살짝 덜어 준다 */
.hero-post__body { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
.hero-post__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 24px; /* 좁은 우측 칸에서 3줄 안에 담기는 실측 상한 */
  line-height: 1.58;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: #fff;
}
/* Read More + — 다른 더보기 링크와 같은 동작(호버 시 글자 진해지고 플러스는 블루로 90도 회전).
   다크 면이라 기본값만 화이트 계열로 낮춰 잡는다 */
.hero-post .hero-post__more { margin-top: var(--spacing-32); flex: none; color: rgba(255, 255, 255, 0.6); }
.hero-post__more .plus-btn i::before,
.hero-post__more .plus-btn i::after { background: rgba(255, 255, 255, 0.6); }
.hero-post:hover .hero-post__more { color: #fff; }
.hero-post:hover .hero-post__more .plus-btn { transform: rotate(90deg); }
.hero-post:hover .hero-post__more .plus-btn i::before,
.hero-post:hover .hero-post__more .plus-btn i::after { background: var(--brand-orange); } /* 어두운 면에서는 블루보다 주황이 뜬다 — 통계 밴드와 동일 */

/* 노치 왼쪽 섹션 라벨 — 아래 라인의 좌우 균형을 잡는 흐린 워터마크.
   노치(66) 세로 중앙에 맞춰 배너 하단에 고정 */
.hero__posts-label {
  position: absolute; z-index: 1;
  top: var(--spacing-32); right: var(--spacing-40);
  font-family: var(--font-accent);
  font-size: var(--text-system); line-height: 1;
  font-weight: var(--weight-medium);
  /* 한글 라벨(2026-09-22, "Policy Insight" → "정책동향") — 같은 15px · 자리 그대로.
     영문용 +0.02em 자간은 한글에서 성기게 보여 0 으로.
     한글은 흐림 0.3 · 400 이 너무 약해 0.55 · 500(Pretendard Medium)으로 — Read More(0.6)보다 한 단계 약하게, 제목과는 겨루지 않게.
     0.55 는 조금 강해 0.45 로(2026-09-22 사용자 지시, 굵기 500 은 그대로) */
  letter-spacing: 0;
  white-space: nowrap; /* 커서 폭 때문에 두 줄로 꺾이지 않게 */
  color: rgba(255, 255, 255, 0.45);
}
/* 타이핑 중 커서 — 다 치고 나면 사라진다 */
.hero__posts-label.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: labelCaret 0.8s steps(1) infinite;
}
@keyframes labelCaret { 50% { opacity: 0; } }

/* 이전 · 다음 버튼 — 왼쪽 썸네일 안쪽 좌우 가장자리, 세로 가운데(좌표는 main.js 가 --hero-nav-* 로 넣는다).
   평소엔 숨기고 배너에 마우스를 올리거나 키보드 포커스가 들어오면 부드럽게 나타난다. 누르는 자리 44px.
   :focus-within 은 쓰지 않는다 — 마우스로 누른 뒤 버튼에 남은 포커스 때문에 배너 밖으로 나가도 계속 보였다(2026-09-29 발주처 검수).
   키보드 포커스(:focus-visible)일 때만 보이게 하고, :has() 를 모르는 브라우저가 앞 규칙까지 버리지 않게 규칙을 나눈다 */
.hero-nav {
  position: absolute; z-index: 2;
  top: var(--hero-nav-top, 50%); left: var(--hero-nav-left, 44px);
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(8, 14, 28, 0.42);
  color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.2s ease;
}
.hero-nav--next { left: var(--hero-nav-right, 400px); }
.hero-nav svg { width: 20px; height: 20px; }
.hero__banner:hover .hero-nav,
.hero-nav:focus-visible { opacity: 1; pointer-events: auto; }
.hero__banner:has(:focus-visible) .hero-nav { opacity: 1; pointer-events: auto; }   /* 배너 안 링크 · 일시정지에 Tab 으로 왔을 때 */
.hero-nav:hover { background: rgba(8, 14, 28, 0.64); }
.hero-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 끌어서 넘기기 — 세로 스크롤은 그대로 두고 가로 끌기만 받는다. 끄는 동안 글자·그림이 선택되지 않게 */
.hero__posts { touch-action: pan-y; }
.hero__posts.is-dragging { cursor: grabbing; user-select: none; }
@media (prefers-reduced-motion: reduce) { .hero-nav { transition: none; } }

/* 슬라이드 전환 시 제목·버튼이 아래에서 떠오르며 교체 */
.hero-post.is-active .hero-post__body { animation: heroPostIn 0.6s cubic-bezier(0.33, 0, 0.13, 1) both; }
@keyframes heroPostIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-post.is-active .hero-post__body { animation: none; }
}

.hero__panel { display: flex; flex-direction: column; }
/* 패널 타이틀 — 한글 제목이라 본문 서체(Pretendard) 볼드, 블랙 */
.hero__panel-title {
  font-family: var(--font-base);
  font-weight: var(--weight-bold);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  color: var(--text-1);
  margin-bottom: var(--spacing-16);
}
/* 마지막 행은 글자가 박스 안에서 세로 중앙이라 아래로 여유가 한 겹 더 생긴다.
   그만큼 카드 아래 패딩을 덜어야 위아래가 같아 보인다 */
.hero__panel .card--lg { flex: 1; display: flex; flex-direction: column; padding-bottom: var(--spacing-20); }
.hero__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); margin-bottom: var(--spacing-16); }
.hero__panel-head .hero__panel-title { margin-bottom: 0; } /* 정렬 기준을 head가 담당 — +버튼과 세로 중앙 일치 */

/* + 버튼 (전체보기) — 사각 바 2개 교차, 호버 시 블루 + 회전 */
.plus-btn {
  position: relative;
  width: 28px; height: 28px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.plus-btn i { position: absolute; inset: 0; }
.plus-btn i::before,
.plus-btn i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--text-2); /* 기본 그레이 — 타이틀의 블루 액센트와 역할 분리 */
  border-radius: 1px;
  transition: background var(--transition-fast);
}
.plus-btn i::before { width: 18px; height: 3px; }
.plus-btn i::after { width: 3px; height: 18px; }
.plus-btn:hover { transform: rotate(90deg); }
.plus-btn:hover i::before,
.plus-btn:hover i::after { background: var(--brand-blue); }

/* 발간물 — 히어로 바로 아래, 배경 없음. 위는 퀵메뉴가 있던 자리와 같은 64로 붙이고 아래는 섹션 기본(96) */
.pubs-section { padding-top: var(--spacing-64); }
/* 제목은 한 단계 낮춘다(52→42) — 설명 없이 탭과 한 줄에 서는 제목이라 밴드 제목만큼 크면 무겁다 */
.pubs-section .section-head { align-items: center; }
.pubs-section .section-head__title { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }

/* 발간물 헤더 왼쪽 — 제목 옆에 분류 탭. 제목과 탭 사이는 한 뼘 띄운다 */
.section-head__lead { display: flex; align-items: flex-end; gap: var(--spacing-40); }
/* 탭 밑선을 제목 글자 밑선에 맞춘다 — 제목 줄 상자(46) 아래 여백만큼 탭을 내려 글자 아래선에 걸리게 */
.section-head__lead .pill-toggle { margin-bottom: 3px; }

/* 패널 타이틀 뒷단어 블루 액센트 (Open Calls / R&D Insight) */
.hero__panel-title em { font-style: normal; color: var(--brand-blue); }

/* 섹션 더보기 링크 — 영문 레이블 + 플러스 */
.more-link {
  display: inline-flex; align-items: center; gap: var(--spacing-12);
  font-family: var(--font-accent); font-weight: var(--weight-regular);
  font-size: 17px; line-height: 1;
  color: var(--text-3);
  transition: color var(--transition-fast);
}
.more-link:hover { color: var(--text-1); }
/* 한글 더보기(메인 발간물, 2026-09-22 "Explore Reports" → "더보기") — 색 · 크기 · 간격 · + 는 그대로.
   한글은 Pretendard 로 그려지므로 서체를 명시하고, 무게는 KO_TUNE 값으로 영문과 비슷하게 맞춘다 */
.more-link--ko { font-family: var(--font-base); gap: var(--spacing-8); } /* 한글은 짧아 글자 ↔ + 가 12 면 떨어져 보였다(사용자 지시 8) */
.more-link:hover .plus-btn { transform: rotate(90deg); }
.more-link:hover .plus-btn i::before,
.more-link:hover .plus-btn i::after { background: var(--brand-blue); }
.hero__panel-list { flex: 1; }
/* ---- 히어로 패널 수직 리듬 명세 ----
   두 카드(R&D Funding / STIS Insight)의 라인이 픽셀 단위로 일치해야 함.
   [타이틀 26px/1.2 + head 하단 16] → [탭 (16px/24 + 패딩) + 하단 12]
   → 행: 모두 72px (상하 패딩 10 균일, 첫/막 행 예외 없음) — 뱃지 52 + 20
   ※ 행 안 모든 텍스트는 line-height 명시 필수 (본문 26px 상속되면 리듬 깨짐) */
.hero__panel .tab-mini { margin-bottom: var(--spacing-12); }
/* 탭 전환 — 새 목록 항목이 6px 상승하며 순차 페이드(40ms 간격). 등장 모션과 같은 곡선, 더 짧게 */
.hero__panel-list.is-switching > * { animation: panelListIn 0.35s var(--ease-out-soft) both; }
.hero__panel-list.is-switching > :nth-child(2) { animation-delay: 0.04s; }
.hero__panel-list.is-switching > :nth-child(3) { animation-delay: 0.08s; }
.hero__panel-list.is-switching > :nth-child(4) { animation-delay: 0.12s; }
.hero__panel-list.is-switching > :nth-child(5) { animation-delay: 0.16s; }
@keyframes panelListIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 발간물 분류 탭 전환 — 트랙 표지도 같은 모션(대표 슬롯 모션과 나란히) */
.pubs__track.is-switching > .pubs__item { animation: panelListIn 0.35s var(--ease-out-soft) both; }
.pubs__track.is-switching > .pubs__item:nth-child(2) { animation-delay: 0.04s; }
.pubs__track.is-switching > .pubs__item:nth-child(3) { animation-delay: 0.08s; }
.pubs__track.is-switching > .pubs__item:nth-child(4) { animation-delay: 0.12s; }
.pubs__track.is-switching > .pubs__item:nth-child(5) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { .hero__panel-list.is-switching > *, .pubs__track.is-switching > .pubs__item { animation: none; } }
.hero__panel-list .announce-item,
.hero__panel-list .info-item { min-height: 66px; padding-block: 8px; } /* 행 높이가 히어로 줄 전체 높이를 정한다 — 72는 아래가 늘어졌다 */
.hero__panel-list .info-item--stacked { justify-content: center; }

/* ---------- 퀵메뉴 연결부 (캐치프레이즈 + 아이콘) ---------- */
.quick-strip { padding-block: var(--spacing-64); }
.quick-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-48); }
.quick-strip__title {
  font-family: var(--font-accent);
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  flex-shrink: 0;
}
.quick-strip__title em { font-style: normal; color: var(--brand-blue); }

/* ---------- 관련사이트 (Family Site) ----------
   흰 면 위 한 줄 슬라이더. 한 화면 6칸, 자동으로 왼쪽으로 한 칸씩 */
.family { background: var(--surface-canvas); padding-block: 50px; }
.family__inner { display: flex; align-items: center; gap: var(--spacing-64); }
/* 왼쪽 = 라벨 + 그 아래 버튼 3개, 둘 다 왼쪽 정렬 */
.family__head { flex: none; }
.family__label {
  font-family: var(--font-accent);
  font-size: 26px; line-height: 1.2;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.family__label em { font-style: normal; color: var(--brand-blue); }
.family__ctrl { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.family__btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-input);
  background: transparent;
  color: var(--text-2);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.family__btn:hover { color: var(--text-1); border-color: var(--text-1); }
.family__btn svg { width: 13px; height: 13px; }
.family__btn--play .icon-pause { width: 8px; height: 10px; }
.family__btn--play .icon-play { display: none; width: 11px; height: 11px; }
.family__btn--play[aria-pressed="true"] .icon-pause { display: none; }
.family__btn--play[aria-pressed="true"] .icon-play { display: block; }

.family__col { flex: 1; min-width: 0; }
.family__viewport { overflow: hidden; }
.family__track { --family-visible: 6; display: flex; gap: var(--spacing-16); will-change: transform; }
.family__item {
  flex: none;
  display: grid; place-items: center;
  height: 80px;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  transition: border-color var(--transition-fast);
}
.family__item:hover { border-color: var(--text-3); }
.family__item img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }

/* ---------- 통계 (영상 배경 + 글래스 카드) ---------- */
.stats-band { position: relative; overflow: hidden; }
.stats-band__media { position: absolute; inset: 0; }
.stats-band__media video { width: 100%; height: 100%; object-fit: cover; }
.stats-band__media::after {
  content: "";
  position: absolute; inset: 0;
  /* 블랙 톤 레이어 + 네이비 틴트 이중 오버레이 — 네이비에 묻히지 않게 무게는 블랙이 잡고 색감만 네이비 */
  /* 평면 블랙 대신 상하 비네트 — 중앙이 살짝 트여 탁함이 걷히고 깊이감 생김 */
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.64) 0%, rgba(8, 10, 14, 0.36) 38%, rgba(8, 10, 14, 0.36) 62%, rgba(8, 10, 14, 0.64) 100%),
    linear-gradient(rgba(11, 34, 66, 0.12), rgba(11, 34, 66, 0.12));
}
.stats-band > .container { position: relative; z-index: 1; }

/* 다크 배경 위 섹션 헤더 반전 */
.stats-band .section-head__title { color: #fff; }
.stats-band .section-head__title em { color: var(--brand-orange); font-style: normal; } /* 딥 네이비 위 포인트 = 주황 */
.stats-band .section-head__desc { color: rgba(255, 255, 255, 0.62); } /* 한글 설명 — 반투명 화이트 */
.stats-band .more-link { color: rgba(255, 255, 255, 0.7); }
.stats-band .more-link:hover { color: #fff; }
.stats-band .plus-btn i::before,
.stats-band .plus-btn i::after { background: rgba(255, 255, 255, 0.85); }
.stats-band .more-link:hover .plus-btn i::before,
.stats-band .more-link:hover .plus-btn i::after { background: var(--brand-orange); }

/* 글래스 카드 — 좌: 다크 글래스 / 우: 라이트 글래스 */
.stats-band .card--navy {
  background: rgba(13, 34, 66, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.stats-band .stats__grid > .card:not(.card--navy) {
  background: rgba(255, 255, 255, 0.94); /* 다크 배경 위 라이트 글래스는 94%는 돼야 칙칙해지지 않음 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
/* 카드가 화이트에 가까워진 만큼 내부 요소 대비 보강 */
.stats-band .stats__grid > .card:not(.card--navy) .data-list__bar { background: rgba(9, 9, 9, 0.1); }
.stats-band .stats__grid > .card:not(.card--navy) .data-list__row { border-color: #d9d9d5; }
.stats-band .stats__grid > .card:not(.card--navy) .tag { background: rgba(9, 9, 9, 0.06); }

.stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-32); align-items: stretch; }
/* 자치구 카드: 제목 아래 여백 + 리스트 행을 카드 높이에 고르게 분배 (위쪽 쏠림 방지) */
.stats__grid > .card { display: flex; flex-direction: column; }
.stats__grid .data-list { flex: 1; display: flex; flex-direction: column; margin-top: var(--spacing-16); }
.stats__grid .data-list__row { flex: 1; }

/* 최근 5년 투자 추이 미니 바 차트 (네이비 카드 내부, 라이브러리 없이 div 바) */
.stat-chart {
  display: flex; align-items: stretch; gap: var(--spacing-12);
  height: 118px; /* 막대 위 숫자 자리만큼 110 → 118. 제목 위아래 여백으로 맞춰 카드 높이는 그대로 */
  margin-top: 5px; /* 제목 줄(26, 글자 17 의 위아래 여백 4.5 포함) 아래 — 보이는 간격은 "총괄 투자현황" ↔ 숫자와 비슷한 9~10 */
}
/* 그래프 위 왼쪽 작은 제목 — "총괄 투자현황"(.metric__label)과 같은 크기 · 색 · 굵기. 위 여백 + 줄 + 아래 여백 = 옛 범례 자리(39) */
.stats-band .stat-chart__title { margin-top: var(--spacing-24); margin-bottom: 0; } /* "총괄 투자현황" 처럼 구역 시작 간격 24 (2026-09-22, 8 → 24) */
/* 위 16 을 위쪽에서 — 카드 제목 → "총괄 투자현황" 24 → 20, 금액 → 배지 줄 20 → 12. 두 구역의 위 간격(20 · 24)이 비슷하게 보이도록 한쪽만 좁히지 않고 나눴다.
   ("투자현황" 줄의 "2024년 기준" 태그는 옅어서 20 이 배지 줄(진한 색) 아래 24 와 비슷해 보인다) 모자란 4 는 카드가 늘어난다 */
.stats-band .card--navy .card__head { margin-bottom: var(--spacing-20); }
.stats-band .card--navy .delta-row { margin-top: var(--spacing-12); }
.stat-chart__bar {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--spacing-8);
  text-align: center;
}
/* 막대 자리 — 연도 글자를 뺀 나머지. 막대 높이(%)는 이 자리 기준이라 가장 큰 해도 잘리지 않는다
   (전에는 차트 전체 110 기준 % 라 88% 막대가 자리(87)를 넘어 2022 · 2023 이 같은 높이로 보였다).
   위 40 은 막대 위 숫자 두 줄(34) + 막대와의 간격(6) 자리 — 막대 % 는 그 아래(content box) 기준 */
.stat-chart__track { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 40px; }
.stat-chart__bar i {
  display: block; position: relative; flex: none;
  border-radius: 6px 6px 2px 2px;
  background: rgba(255, 255, 255, 0.26);
  transition: background var(--transition-fast); /* 높이 전환은 JS(WAAPI)가 담당 — CSS transition이 있으면 초기 0% 세팅이 "내려가는" 모션으로 보임(F5 스크롤 복원 시) */
}
/* 스크롤 진입 시 연도순으로 차오르는 스태거 */
.stat-chart__bar:nth-child(2) i { transition-delay: 0.1s; }
.stat-chart__bar:nth-child(3) i { transition-delay: 0.2s; }
.stat-chart__bar:nth-child(4) i { transition-delay: 0.3s; }
.stat-chart__bar:nth-child(5) i { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .stat-chart__bar i { transition: background var(--transition-fast); }
}
.stat-chart__bar:hover i { background: rgba(255, 255, 255, 0.4); }
.stat-chart__bar.is-current i { background: var(--chart-bar-accent); } /* 다크 면의 현재 연도 — 차트 공통 강조색 */
.stat-chart__bar.is-current:hover i { background: var(--brand-orange-hover); }
.stat-chart__bar span {
  font-family: var(--chart-label-font); font-weight: var(--weight-regular);
  font-size: var(--chart-label-size); line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}
.stat-chart__bar.is-current span { color: #fff; font-weight: var(--weight-medium); }
/* 막대 바로 위(바깥) 두 줄 — 투자액(억 원, 500 흰색) · 과제수(개, 400 흰 60%). 2024 도 같은 흰색(막대 밖이라 주황 대비 문제 없음).
   막대가 <i> 라 브라우저 기본 기울임(font-style: italic)을 물려받는다 — 숫자는 기울이지 않게 normal 로 끊는다 */
.stat-chart__val {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--chart-label-font); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: var(--text-system); line-height: 1; color: #fff; font-weight: var(--weight-regular);
}
.stat-chart__val em { font-style: normal; font-weight: var(--weight-medium); } /* 투자액 700 → 500(2026-09-22) — Space Grotesk Medium 실제 파일, 과제수 400 과 굵기 · 색으로 구분 */
.stat-chart__val small { font-size: inherit; font-weight: var(--weight-regular); color: rgba(255, 255, 255, 0.6); }
/* 막대가 다 찬 뒤 서서히 — 스크립트가 없으면 처음부터 보인다 */
.js .stat-chart__val { opacity: 0; transition: opacity 0.6s ease; }
.js .stat-chart.is-filled .stat-chart__val { opacity: 1; }

/* 오도미터 숫자 롤링 — 자릿수별 1em 기둥 */

/* ---------- 반응형 ---------- */
@media (max-width: 1280px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__banner { height: 400px; }
  .stats__grid { grid-template-columns: 1fr; }
  .quick-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--spacing-32); }
  .quick-menu { flex-wrap: wrap; }
}
@media (max-width: 1280px) {
  .family__track { --family-visible: 4; }
}
@media (max-width: 768px) {
  /* 모바일 — 라벨을 위로 올리고 한 화면 2칸 */
  .family { padding-block: var(--spacing-32); }
  .family__inner { flex-direction: column; gap: var(--spacing-24); }
  .family__label { font-size: 22px; }
  .family__col { width: 100%; }
  .family__track { --family-visible: 2; }
  .family__item { height: 76px; padding: var(--spacing-16); }
  .family__item img { max-height: 36px; }

  /* 모바일 배너 — 좌우 2열은 폭이 안 나오므로 썸네일 위, 제목 아래로 쌓는다.
     슬라이드가 흐름 위에 놓이므로 배너 높이는 내용에 맡기고, 비활성 슬라이드는 숨긴다.
     하단 패딩은 노치(66) 위로 + 버튼이 겹치지 않도록 넉넉히 */
  .hero__grid { gap: var(--spacing-40); } /* 배너와 아래 카드 사이 숨 — 20은 붙어 보인다 */
  .hero__banner { height: auto; min-height: 0; }
  .hero__posts { position: relative; }
  .hero-post {
    position: relative; inset: auto;
    grid-template-columns: 1fr;
    gap: var(--spacing-24);
    padding: var(--spacing-24) var(--spacing-24) 96px;
  }
  .hero-post:not(.is-active) { display: none; }
  /* 모바일은 정사각이면 세로로 늘어진다 — 가로형(세로 2/3)으로 잘라 쓴다.
     카드뉴스는 위쪽에 제목이 있어 상단을 기준으로 자른다 */
  .hero-post__thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 20px; }
  .hero-post__thumb img { object-position: center top; }
  .hero-post__title { -webkit-line-clamp: 2; font-size: 22px; line-height: 1.5; } /* 모바일은 2줄까지 */
  /* 글자는 빼고 + 만 남겨 노치 왼쪽 빈자리에 넣는다 (노치와 세로 중앙 일치).
     등장 모션의 transform이 남아 있으면 body가 기준 박스가 되어 + 가 엉뚱한 곳에 붙는다 → 모바일은 모션 해제 */
  .hero-post.is-active .hero-post__body { animation: none; }
  .hero-post__more-text { display: none; }
  .hero-post .hero-post__more {
    position: absolute;
    left: var(--spacing-24); bottom: 0;
    height: 66px;
    margin-top: 0;
    display: flex; align-items: center;
  }
  .hero__posts-label { display: none; } /* 모바일은 노치 컨트롤과 겹쳐 자리가 없다 */
  .hero-nav { display: none; } /* 모바일은 버튼 대신 좌우 스와이프(main.js) */

  /* 섹션 헤더 — 제목·설명 아래로 우측 요소(탭·더보기)를 내려 세로 스택 */
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--spacing-20); margin-bottom: var(--spacing-28, 28px); }
  .section-head__lead { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); width: 100%; }
  .section-head .more-link { white-space: nowrap; }
  /* 발간물 — 통계 섹션(Explore Data)과 같은 문법: 제목 → 탭 → 더보기를 왼쪽 정렬로 세로 스택. 가운데 정렬 상속을 끊는다 */
  .pubs-section .section-head { align-items: flex-start; gap: var(--spacing-16); margin-bottom: var(--spacing-40); } /* 더보기 → 대표 도서 40 */
  .pubs-section .section-head__lead { gap: var(--spacing-20); }
  .pubs-section .section-head__lead .pill-toggle { margin: 0; }

  /* 분류 탭 — 한 줄 가로 스크롤 스트립(스크롤바 숨김), 버튼은 줄바꿈 없이 */
  .pill-toggle { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-block: var(--spacing-8) var(--spacing-12); } /* 설명·대표 블록과의 위아래 숨 */
  .pill-toggle::-webkit-scrollbar { display: none; }
  .pill-toggle button { flex: none; white-space: nowrap; }

  /* 통계 비네트 — 모바일은 섹션이 세로로 길어 %정지점이 위아래를 넓게 가라앉힘 → 양끝 200px만 어둡게 */
  .stats-band__media::after {
    background:
      linear-gradient(180deg, rgba(8, 10, 14, 0.64) 0, rgba(8, 10, 14, 0.36) 200px, rgba(8, 10, 14, 0.36) calc(100% - 200px), rgba(8, 10, 14, 0.64) 100%),
      linear-gradient(rgba(11, 34, 66, 0.12), rgba(11, 34, 66, 0.12));
  }

  /* 퀵메뉴 — 폭에 맞춰 열 수 자동(768에서 6열, 좁아지면 줄어듦) */
  .quick-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--spacing-8); width: 100%; }
  .quick-menu__item { min-width: 0; }

  .data-list__value { white-space: nowrap; }
}
@media (max-width: 480px) {
  .metric-duo { grid-template-columns: 1fr; } /* 큰 숫자 2열이 좁은 화면을 밀어냄 → 세로 스택 */
  .quick-menu { grid-template-columns: repeat(3, 1fr); }  /* 6개 → 3×2 */
  /* 자치구 표 — 바를 숨기고 순위·이름·건수·비율 4열 (auto 열이 눌려 숫자가 세로로 깨지던 문제) */
  .data-list--ranked .data-list__row { grid-template-columns: 28px 1fr auto 52px; }
  .data-list__bar { display: none; }
}