/* ============================================================
   STIS 디자인 시스템 — 컴포넌트 (components.css)
   로드 순서: variables.css → theme.css → components.css
   ============================================================ */

/* ============ 접근성 유틸 ============ */
/* 스크린리더 전용 문구. sub.css에만 있어 메인에서는 "새 창 열림"이 그대로 보였다 — 공용 층으로 올린다 */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ 버튼 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn--lg { padding: 16px 32px; font-size: var(--text-body); }
.btn--sm { padding: 9px 18px; font-size: var(--text-system); }

/* 주 액션 — 화면당 1개 원칙 */
.btn--primary { background: var(--brand-blue); color: #fff; }
.btn--primary:hover { background: var(--brand-blue-hover); }

/* 고스트 — 보조 액션 기본형 */
.btn--ghost { background: var(--surface-canvas); color: var(--text-1); border: 1px solid var(--text-1); }
.btn--ghost:hover { background: var(--surface-tint); }

/* 다크 필 */
.btn--dark { background: var(--surface-dark); color: #fff; }
.btn--dark:hover { background: var(--brand-blue); } /* 호버는 사이트 공통 규칙대로 블루 반전 */

/* 텍스트 링크형 (자세히 보기 →) */
.btn--text {
  padding: 0;
  border-radius: 0;
  font-weight: var(--weight-medium);
  color: var(--text-2);
}
.btn--text:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 4px; }

/* ============ 햄버거 버튼 (헤더 우측 · 주황 확정) ============
   기본 = 3선 길이 엇갈림 / 호버 = 균등 3선 + "전체메뉴" 툴팁 */
.hamburger {
  position: relative;
  flex: none; /* 좁은 폭에서도 정원 유지 */
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease; /* 부드러운 반전 — 반복 노출 컨트롤이라 와이프 대신 크로스페이드 */
}
/* 호버 = 블루로 반전 — 기본(주황)과 반응(블루)으로 포인트 컬러 역할 분담 */
.hamburger:hover,
.hamburger:focus-visible { background: var(--brand-blue); }
.hamburger__lines { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; width: 20px; }
.hamburger__lines span {
  display: block; height: 3px; border-radius: 3px; background: #fff;
  transition: width var(--transition-fast);
}
/* 기본형 — 위에서부터 점점 짧아지는 3선 (레퍼런스 동일) */
.hamburger__lines span { transition: width 0.3s ease, transform var(--transition-base), opacity var(--transition-base); } /* 배경 반전과 같은 템포 */
.hamburger__lines span:nth-child(1) { width: 20px; }
.hamburger__lines span:nth-child(2) { width: 13px; }
.hamburger__lines span:nth-child(3) { width: 7px; }
/* 호버 — 균등 3선 */
.hamburger:hover .hamburger__lines span,
.hamburger:focus-visible .hamburger__lines span { width: 20px; }

/* ============ 헤더 ============
   배경 풀블리드, 내부는 .container-wide(최대 1880px) */
.site-header {
  position: sticky;
  top: 0;
  background: var(--surface-canvas);
  z-index: 110; /* 전체메뉴 오버레이(120)가 헤더를 덮음 — 오버레이 상단바가 헤더 역할 */
}

/* ---- 전체메뉴 (라이트 카드 스택 — 레퍼런스 준용) ----
   상단에서 드롭 → 밝은 그레이 배경 위에 다크 라운드 상단바(화이트 로고+닫기)
   + 대메뉴별 화이트 라운드 카드 스택. 콘텐츠 너비 1440px(서브페이지 기준) */
.megamenu {
  position: fixed;
  inset: 0;
  background: var(--surface-band);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.5s;
  z-index: 120; /* 헤더 위 — 상단바가 헤더 역할 대체 */
  overflow-y: auto;
  overflow-x: hidden;
}
/* 열림 완료 시 transform 해제 → 내부 fixed 워터마크가 뷰포트에 진짜 고정됨 */
.megamenu.is-open { transform: none; }

/* 배경 워터마크 — STIS 심볼만 우하단에 딱 붙여 크게, 흐리게. 열릴 때 펜 쓰기 등장 1회(.stis-logo--intro는 common.js가 토글) */
.megamenu__watermark {
  position: fixed;
  right: 0; bottom: 0;
  width: 720px; height: auto; /* 382.7 : 118.98 → 높이 224 */
  display: block;
  opacity: 0.07;
  pointer-events: none;
  --stis-blue: var(--brand-navy-deep);
}
.megamenu.is-open { visibility: visible; } /* transform은 위에서 none 처리 — fixed 워터마크 고정용 */

.megamenu__wrap {
  max-width: calc(1440px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: var(--spacing-20) var(--container-pad) var(--spacing-40);
}

/* 다크 라운드 상단바: 화이트 로고 + 원형 닫기 */
.megamenu__bar {
  background: var(--brand-navy-deep); /* 통계 카드와 동일한 딥 네이비 — 다크 면 정체성 통일 */
  border-radius: var(--radius-card-lg);
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-32);
  padding-inline: var(--spacing-32) var(--spacing-16);
  margin-bottom: var(--spacing-24);
}
.megamenu__bar .stis-logo { width: 395px; height: 42px; margin-left: 4px; } /* 44에서 5% 축소, 왼쪽 숨 4 — 사용자 요청 2026-09-11 */
.megamenu__close {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--surface-dark);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-base);
}
.megamenu__close:hover { background: var(--brand-orange); color: #fff; transform: rotate(90deg); }
.megamenu__close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* 대메뉴 카드 — 가로형(좌 타이틀 / 우 소메뉴)으로 컴팩트하게, 순차 상승 */
.megamenu__card {
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: var(--spacing-32);
  padding: var(--spacing-32) var(--spacing-40);
  margin-bottom: var(--spacing-16);
  opacity: 0;
  transform: translateY(20px); /* 등장 모션 토큰과 같은 곡선 */
  transition: opacity 0.55s var(--ease-out-soft), transform 0.55s var(--ease-out-soft);
}
.megamenu.is-open .megamenu__card { opacity: 1; transform: translateY(0); }
/* 오버레이 하강(0.5s)이 끝난 0.4s부터 0.06s 간격 — 하강 중에 시작하면 움직임이 묻혀 안 보임 */
.megamenu.is-open .megamenu__card:nth-of-type(1) { transition-delay: 0.40s; }
.megamenu.is-open .megamenu__card:nth-of-type(2) { transition-delay: 0.46s; }
.megamenu.is-open .megamenu__card:nth-of-type(3) { transition-delay: 0.52s; }
.megamenu.is-open .megamenu__card:nth-of-type(4) { transition-delay: 0.58s; }
.megamenu.is-open .megamenu__card:nth-of-type(5) { transition-delay: 0.64s; }
.megamenu.is-open .megamenu__card:nth-of-type(6) { transition-delay: 0.70s; }
.megamenu.is-open .megamenu__card:nth-of-type(7) { transition-delay: 0.76s; }

/* 카드 타이틀 (대메뉴) — 브랜드 블루 */
.megamenu__card-title {
  display: inline-block;
  font-size: 25px;
  line-height: 33px;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: var(--brand-blue);
  transition: color var(--transition-fast);
}
a.megamenu__card-title:hover { color: var(--brand-orange); } /* 어두운 블루는 변화가 약함 → 주황으로 반전(햄버거·개인정보처리방침과 같은 포인트 역할) */

/* 소메뉴 — 세로 구분선 있는 열 나열, 기본 웨이트 Regular
   .megamenu__sub 래퍼는 모바일 아코디언 높이 애니메이션용 — 데스크톱에선 레이아웃에서 제거(contents) */
.megamenu__sub { display: contents; }
.megamenu__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 기본 4칸 — 카테고리마다 시작점이 같아 세로로 줄이 맞는다 */
}
/* 하위가 5개인 카테고리(성과정보)만 5칸 — 4칸이면 마지막 하나가 다음 줄로 떨어진다. 항목 이름이 짧아 칸이 좁아도 괜찮다 */
.megamenu__links:has(> a:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
.megamenu__links a {
  display: flex;
  align-items: center; /* 2줄로 꺾여도 이웃 항목과 세로 중앙 정렬 */
  padding: var(--spacing-8) var(--spacing-24);
  /* 점선 구분선 — 3px 점 + 4px 간격, 잘 보이는 농도 */
  /* 가로 1px × 세로 3px 대시 + 2px 간격 */
  background-image: repeating-linear-gradient(to bottom, #d9d9d5 0 3px, transparent 3px 5px);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 18px;
  line-height: 27px;
  font-weight: var(--weight-regular);
  color: var(--text-2);
  transition: color var(--transition-fast);
}
.megamenu__links a:first-child { background-image: none; padding-left: 0; }
.megamenu__links a:hover { color: var(--brand-blue); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; } /* 목록·카드 제목과 같은 호버 */

/* 메뉴 열림 시 본문 스크롤 잠금 */
body.megamenu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .megamenu, .megamenu__card { transition: none; }
}
@media (max-width: 1280px) {
  /* 폭이 줄면 3칸씩 — 5개짜리(성과정보)는 두 줄로 내려간다 */
  .megamenu__links, .megamenu__links:has(> a:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}
/* ---- 모바일: 아코디언 — 기본은 대메뉴만, 탭하면 소메뉴가 아래로 펼쳐짐 ---- */
@media (max-width: 768px) {
  .megamenu__watermark { width: 320px; } /* 모바일도 우하단 심볼 유지 — 크기만 축소 */
  .megamenu__wrap { padding: var(--spacing-16) var(--container-pad) var(--spacing-40); }
  .megamenu__bar { height: 72px; padding-inline: var(--spacing-16) var(--spacing-12); }
  .megamenu__close { width: 38px; height: 38px; } /* 72px 바 안에서 56은 과함 — 시각 크기 38, 터치 영역은 바 높이로 보완 */
  .megamenu__close svg { width: 14px; height: 14px; }

  .megamenu__card {
    padding: var(--spacing-20) var(--spacing-24);
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--spacing-12);
  }
  /* 타이틀 = 아코디언 토글. 우측 아이콘은 20px 박스 안 1.5px 십자(+) → 45° 회전으로 × */
  .megamenu__card-title {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-size: 20px; line-height: 28px; /* 모바일에선 25px가 과함 */
    color: var(--text-1); /* 아코디언이 다 닫힌 기본 상태 — 블루가 7줄 반복되면 시끄럽다 */
  }
  .megamenu__card.is-open .megamenu__card-title { color: var(--brand-blue); } /* 펼친 항목만 블루 */
  .megamenu__card:has(.megamenu__links) .megamenu__card-title::after {
    content: "";
    width: 20px; height: 20px; flex: none;
    background:
      linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat;
    color: var(--text-4);
    transition: transform 0.35s cubic-bezier(0.33, 0, 0.13, 1), color var(--transition-fast);
  }
  .megamenu__card.is-open:has(.megamenu__links) .megamenu__card-title::after { transform: rotate(45deg); color: var(--brand-blue); } /* :has 규칙과 동일 특이도 확보 */

  /* 소메뉴: grid-template-rows 0fr → 1fr로 높이 전환(내용 높이 무관), 헤어라인으로 대메뉴와 구분 */
  .megamenu__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.33, 0, 0.13, 1);
  }
  .megamenu__card.is-open .megamenu__sub { grid-template-rows: 1fr; }
  .megamenu__links {
    display: block;
    min-height: 0; overflow: hidden;
    padding-left: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .megamenu__card.is-open .megamenu__links { opacity: 1; transition-delay: 0.1s; }
  /* 헤어라인 아래 여백 20 = 링크 패딩 9 + 카드 하단 20 과 균형(위 29 / 아래 29) */
  .megamenu__links::before { content: ""; display: block; height: 1px; background: var(--border-hairline); margin: var(--spacing-16) 0 var(--spacing-20); }
  .megamenu__links a {
    background-image: none; /* 세로 점선 제거 */
    padding: 9px 0 9px 10px; /* 2차 메뉴 들여쓰기 10 */
    font-size: 17px;
    gap: 10px;
  }
  .megamenu__links a::before { content: ""; width: 6px; height: 2px; border-radius: 1px; background: var(--brand-blue); flex: none; } /* 2차 메뉴 마커 — 블루 짧은 라인 6×2 */
  .megamenu__links a:first-child { padding-left: 10px; }
}
.site-header__inner {
  height: calc(var(--header-height) + 10px);
  padding-top: 10px; /* 상단만 +10 — 뷰포트 가장자리와의 시각 보정 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-32);
}
.site-header__logo { flex: none; } /* GNB가 넓어져도 로고는 찌그러지지 않게 */
/* ---------- STIS 로고 (STIS_로고.ai 대지 사본 가로형, 2026-09-11) ----------
   심볼 S·T·I·S와 주황 마크는 인라인 경로, 워드마크는 assets/logo/stis/stis-wordmark-*.svg 두 장(컬러/화이트).
   preserveAspectRatio="xMinYMid slice"라 높이만 정하고 폭을 심볼 폭까지 줄이면 워드마크가 잘려 심볼만 남는다 (모바일) */
.stis-logo { display: block; width: 377px; height: 40px; overflow: hidden; --stis-blue: var(--brand-blue); --stis-orange: var(--brand-orange); } /* 1120.24 : 118.98 */
.stis-logo .stis-symbol { transition: fill 0.35s ease; }
.stis-logo .stis-wordmark__color, .stis-logo .stis-wordmark__white { transition: opacity 0.35s ease; }
.stis-logo .stis-wordmark__white { opacity: 0; }
.stis-logo.is-reverse { --stis-blue: #fff; }
.stis-logo.is-reverse .stis-wordmark__color { opacity: 0; }
.stis-logo.is-reverse .stis-wordmark__white { opacity: 1; }

/* 등장 (약 2.0s) — 헤더 로고는 메인 화면에서만(body.home-logo-intro), 전체 메뉴 로고·워터마크는 열 때마다(.stis-logo--intro, common.js).
   하위 화면 헤더 로고는 효과 없이 바로 보인다(2026-09-22) — 펜이 S·T·I·S를 차례로 쓰고, 주황 마크는 선이 한 바퀴 돈 뒤 채워지며, 워드마크가 떠오른다.
   pathLength="100" 기준. 대시 간격 110 — 오프셋 100에서 시작점에 점이 남지 않게 */
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen { stroke-dasharray: 100 110; stroke-dashoffset: 100; animation: stisPen linear forwards; }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen--s1 { animation-duration: .55s; animation-delay: .05s; animation-timing-function: cubic-bezier(.4,0,.6,1); }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen--tb { animation-duration: .22s; animation-delay: .52s; }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen--ts { animation-duration: .18s; animation-delay: .70s; }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen--i  { animation-duration: .18s; animation-delay: .86s; }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen--s2 { animation-duration: .55s; animation-delay: 1.0s; animation-timing-function: cubic-bezier(.4,0,.6,1); }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen-all { opacity: 0; animation: stisShow .01s linear 1.6s forwards; } /* 다 쓴 뒤 마스크를 완전히 열어 잔여 픽셀 정리 */
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-mark { fill-opacity: 0; stroke-dasharray: 100 110; stroke-dashoffset: 100;
  animation: stisPen .45s cubic-bezier(.4,0,.6,1) 1.2s forwards, stisFill .35s ease 1.6s forwards; }
:is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-wordmark { opacity: 0; transform: translateX(-10px); animation: stisRise .7s cubic-bezier(.33,0,.13,1) 1.25s forwards; }
@keyframes stisPen  { to { stroke-dashoffset: 0; } }
@keyframes stisShow { to { opacity: 1; } }
@keyframes stisFill { to { fill-opacity: 1; } }
@keyframes stisRise { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  :is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen, :is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-pen-all, :is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-mark, :is(.stis-logo--intro, .home-logo-intro .site-header__logo .stis-logo) .stis-wordmark {
    animation: none; stroke-dashoffset: 0; opacity: 1; fill-opacity: 1; transform: none; }
}

.site-header__gnb {
  display: flex;
  gap: clamp(36px, 3.3vw, 52px);
  align-self: stretch; /* 아이템이 헤더 전체 높이 — 언더라인이 헤더 하단에 붙음 */
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}

/* GNB 아이템 — 호버 시 하단 언더라인 + 컬러 전환 */
.gnb__item {
  position: relative;
  z-index: 1; /* 풀다운 배경(z 0)보다 위 — 소메뉴가 가려지지 않게 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.gnb__item > a { padding: 8px 2px; white-space: nowrap; transition: color var(--transition-fast); }
/* 헤더 하단에 붙는 블루 바 — 글자 폭과 같은 길이, 가운데에서 좌우로 펼쳐진다 (풀다운 상단 경계와 같은 선) */
.gnb__item::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0; /* 링크 좌우 패딩 2px 안쪽 = 글자 폭 */
  height: 2px;
  background: var(--brand-blue);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out-soft);
}
.gnb__item:hover::after,
.gnb__item:focus-within::after { transform: scaleX(1); }
.gnb__item:hover > a,
.gnb__item > a.is-active,
.gnb__item > a[aria-expanded="true"] { color: var(--brand-blue); }
/* 패널이 열려 있는 동안에는 카드 위에 마우스가 있어도 대메뉴가 켜진 채로 남는다 */
.gnb__item:has(> a[aria-expanded="true"])::after { transform: scaleX(1); }
/* 개별 드롭다운 모드에서는 하단 언더라인 없음 (컬러 전환만) */

/* GNB 드롭다운 — 대메뉴 하나에 올리면 그 메뉴의 2차 메뉴만 떨어진다.
   판(흰 면)은 .site-header::after가 화면 폭 전체로 깔고, 높이는 common.js가 잰다.
   좌: 대메뉴명 / 우: 2차 메뉴 카드 */
.gnb-panels {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 1px); /* 헤어라인 1px을 비워 둔다 — 선이 화면 끝까지 끊기지 않게 */
  z-index: 1; /* 흰 판(::after, z 0) 위 */
  pointer-events: none;
}
.gnb-panel {
  position: absolute;
  left: 0; right: 0; top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.24s var(--ease-out-soft), visibility 0.24s;
}
.gnb-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.08s; /* 판이 내려오기 시작한 뒤 내용이 따라 들어온다 */
}
/* 좌: 옅은 블루 면이 화면 왼쪽 끝까지 깔리고 오른쪽 아래만 크게 둥글다 (레퍼런스 준용).
   대메뉴명은 그 면의 오른쪽 선에 붙여 오른쪽 정렬 / 우: 2차 메뉴 카드 4열.
   폭은 콘텐츠 컨테이너(1440) — 네 번째 카드의 오른쪽 끝이 본문 오른쪽 선과 같은 자리에 선다 */
.gnb-panel__inner {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  column-gap: 56px;
  align-items: stretch;
}
.gnb-panel__side {
  position: relative;
  padding: 56px var(--spacing-64) var(--spacing-64) 0; /* 위 56 = 카드(56) 세로 중앙과 제목 줄(40) 중앙을 맞춘 값 */
  text-align: right;
}
/* 면은 열의 오른쪽 선에서 왼쪽으로 100vw — 화면 밖은 html의 overflow-x: clip이 잘라낸다 */
.gnb-panel__side::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100vw;
  background: var(--brand-blue-tint);
  border-bottom-right-radius: 80px;
  z-index: -1;
}
.gnb-panel__title {
  font-size: 30px; line-height: 40px;
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
/* 카드는 항상 4열 — 메뉴가 2~3개여도 칸 폭이 같아 대메뉴를 오가도 카드가 흔들리지 않는다 */
.gnb-panel__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-20);
  padding-block: var(--spacing-48) var(--spacing-64);
}

/* 2차 메뉴 카드 — 기본은 흰 면에 얇은 선, 오른쪽 끝에 회색 셰브런.
   호버·포커스에서는 블루 그라디언트로 채우고 셰브런을 흰 원 안에 넣는다 */
.gnb-panel__links a {
  position: relative;
  display: flex; align-items: center;
  height: 56px;
  padding: 0 46px 0 var(--spacing-20);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--surface-canvas);
  font-size: 17px; line-height: 24px;
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-medium); /* 볼드는 카드 안에서 과했다 — 호버 흰 글자와 같은 굵기로 */
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast), box-shadow var(--transition-fast);
}
/* 셰브런 뒷 원판 — 호버에서만 드러난다 */
.gnb-panel__links a::before {
  content: "";
  position: absolute; right: 13px; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); /* 링 없이 면만 — 대신 밝기를 올려 원이 서게 */
  opacity: 0;
  transition: opacity var(--transition-fast);
}
/* 셰브런 — 정사각형의 두 변만 남겨 > 모양으로 세운다 */
.gnb-panel__links a::after {
  content: "";
  position: absolute; right: 24px; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  color: var(--text-4);
  transition: color var(--transition-fast);
}
.gnb-panel__links a:hover,
.gnb-panel__links a:focus-visible {
  border-color: transparent;
  /* 브랜드 블루에서 호버 블루로 — 왼쪽을 밝히지 않고 오른쪽을 살짝 가라앉혀 한 톤으로 읽힌다 */
  background: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  background-origin: border-box; /* 그라디언트를 테두리 칸까지 깔아야 왼쪽 1px에 끝 색이 되감겨 비치지 않는다 */
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 87, 243, 0.16);
  outline: none;
}
.gnb-panel__links a:hover::before,
.gnb-panel__links a:focus-visible::before { opacity: 1; }
.gnb-panel__links a:hover::after,
.gnb-panel__links a:focus-visible::after { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gnb-panel { transition: none; }
}

/* 헤더와 풀다운 사이 헤어라인 — 펼쳤을 때만. 블루 바가 이 선 위에 겹쳐 놓인다 */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 1px;
  background: var(--border-hairline);
  opacity: 0;
  visibility: hidden; /* 닫힌 상태에서는 확실히 없는 것 — 잔상 프레임 방지 */
  transition: opacity 0.14s ease, visibility 0.14s;
  pointer-events: none;
  z-index: 1;
}
.site-header.is-gnb-open::before,
.site-header.is-gnb-line::before { opacity: 1; visibility: visible; transition-duration: 0.2s; } /* 하위 메뉴가 없는 대메뉴(혁신인프라맵)에서도 선은 보인다 */

/* 풀다운 흰 판 — 헤더 아래 화면 폭 전체. 높이는 --gnb-panel-h (common.js가 가장 긴 열 기준으로 설정) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% + 1px); /* 헤어라인 아래에서 시작 */
  height: 0;
  background: var(--surface-canvas);
  /* 아래쪽에만 그림자 — 오프셋(14)이 블러 반경(18)에서 스프레드(-10)를 뺀 값보다 커서
     위로는 한 픽셀도 새지 않는다 */
  box-shadow: 0 14px 18px -10px rgba(9, 9, 9, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: height 0.36s var(--ease-out-soft), opacity 0.2s ease, visibility 0.36s;
  z-index: 0;
}
.site-header.is-gnb-open::after {
  height: var(--gnb-panel-h, 0px);
  opacity: 1;
  visibility: visible;
}

/* ============ 푸터 (다크) ============
   구조: 좌측 정책 링크 → 주소·연락처 → 카피라이트 / 우측 관련사이트 드롭다운 */
.site-footer {
  position: relative; z-index: 2; /* 관련사이트 목록이 위 통계 밴드(z-index 1) 위로 뜨도록 */
  background: var(--surface-footer);
  color: var(--text-on-dark);
}
.site-footer__inner { padding-block: var(--spacing-64) var(--spacing-72, 72px); }
.site-footer__col { display: flex; flex-direction: column; min-width: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-40); font-size: 19px; font-weight: var(--weight-medium); line-height: 26px; }
.site-footer__links a { color: #fff; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__links a.is-em:hover { color: var(--brand-orange); text-decoration: none; } /* 기본은 화이트, 호버에서만 주황 */
.site-footer__meta { margin: var(--spacing-24) 0 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-body); line-height: var(--leading-body); }
.site-footer__meta > div { display: flex; gap: var(--spacing-16); }
.site-footer__meta dt { flex: none; width: 72px; color: rgba(255, 255, 255, 0.45); }
.site-footer__meta dd { margin: 0; color: var(--text-on-dark-sub); }
.site-footer__meta .num { font-family: var(--font-accent); font-variant-numeric: tabular-nums; }
.site-footer__copy { margin-top: var(--spacing-40); font-family: var(--font-accent); font-weight: var(--weight-regular, 400); font-size: var(--text-label); line-height: var(--leading-system); color: rgba(255, 255, 255, 0.4); }

/* 관련사이트 드롭다운 — 밑줄형 셀렉트 */
.family-site { position: relative; width: 270px; max-width: 100%; }
.family-site__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
  width: 100%;
  padding: 0 0 12px;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  background: none;
  font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 26px;
  letter-spacing: var(--tracking-body);
  color: #fff;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.family-site__btn:hover, .family-site__btn:focus-visible { border-color: #fff; }
.family-site__btn svg { width: 12px; height: 12px; flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition-base); }
.family-site.is-open .family-site__btn svg { transform: rotate(180deg); }
.family-site__list {
  --family-item: 46px;   /* 항목 한 줄 높이 = 본문 26 + 상하 여백 20 */
  --family-rows: 7.5;    /* 보이는 항목 수 — 반 칸을 남겨 더 있다는 걸 알린다 */
  position: absolute;
  bottom: calc(100% + 16px); left: 0; right: 0;
  background: #202020;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: var(--spacing-12);
  max-height: calc(var(--family-item) * var(--family-rows) + var(--spacing-12));
  overflow-y: auto;
  overscroll-behavior: contain;              /* 목록 끝에서 페이지가 따라 스크롤되지 않게 */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.family-site__list::-webkit-scrollbar { width: 6px; }
.family-site__list::-webkit-scrollbar-track { background: transparent; }
.family-site__list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.family-site__list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.44); }
.family-site.is-open .family-site__list { opacity: 1; visibility: visible; transform: translateY(0); }
.family-site__list a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body); line-height: var(--leading-body);
  color: var(--text-on-dark-sub);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.family-site__list a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ============ 섹션 헤더 ============
   영문 eyebrow(독립 영문 레이블 → Space Grotesk 허용) + 한글 대형 타이틀 */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); margin-bottom: var(--spacing-40); }
.section-head__eyebrow {
  display: block;
  font-family: var(--font-accent);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  letter-spacing: 0; /* 양수 자간 금지 — 대문자 표기는 짧은 약어만 */
  color: var(--brand-blue);
  margin-bottom: var(--spacing-8);
}
.section-head__title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
/* 영문 대형 타이틀 변형 — 독립 영문이므로 Space Grotesk 허용.
   eyebrow(한글 소제목) + 영문 타이틀 조합도 가능. 섹션별 자유 선택. */
.section-head__title--en {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
}
/* 뒷단어 액센트 — 이탤릭 없이 블루 (다크 밴드에선 주황으로 오버라이드) */
.section-head__title em { font-style: normal; color: var(--brand-blue); }
.section-head__eyebrow--kr {
  font-family: var(--font-base);
  color: var(--text-3);
}
/* 타이틀 아래 설명문 — 본문 17px, 다크 밴드에선 반투명 화이트로 오버라이드 */
.section-head__desc {
  margin-top: var(--spacing-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--text-3);
}

/* ============ 카드 ============ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
}
.card--lg { border-radius: var(--radius-card-lg); padding: var(--spacing-32); }
.card--borderless { border: 0; } /* 그레이 밴드 위에서 — 흰 면 자체가 구분 */

/* ============ 노치 배너 (히어로·프로모 카드) ============
   큰 라운드 카드 + 우하단 모서리를 파낸 자리에 컨트롤.
   노치 배경은 카드가 놓인 면의 색과 맞출 것 (기본 캔버스 화이트). */
.notch-banner {
  --notch-bg: var(--surface-canvas); /* 밴드 위에서는 var(--surface-band)로 오버라이드 */
  --notch-curve: 24px; /* 노치 곡률 — 배너 라운드와 함께 스케일 */
  position: relative;
  border-radius: var(--radius-card-lg);
  /* overflow: hidden 금지 — 노치 안 컨트롤(원형 버튼)이 카드 라운드에 잘림.
     클리핑은 media 레이어에만 적용 */
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.notch-banner__media {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden; /* 영상·이미지만 라운드로 클리핑 */
}
.notch-banner__media video,
.notch-banner__media img,
.notch-banner__media > div { width: 100%; height: 100%; object-fit: cover; }
.notch-banner__content { position: relative; z-index: 1; padding: var(--spacing-40); border-radius: inherit; }
.notch-banner__notch {
  position: absolute; z-index: 2;
  right: -1px; bottom: -1px; /* 1px 겹침 — 배너 라운드와의 AA 경계 프린지 차단 */
  background: var(--notch-bg);
  border-top-left-radius: var(--notch-curve);
  border-bottom-right-radius: var(--notch-curve); /* 카드 모서리와 정합 */
  height: 66px; /* 파임 깊이 = 노치 높이, 컨트롤은 그 안에서 세로 중앙 */
  padding: 0 6px 0 30px;
  display: flex; align-items: center; gap: var(--spacing-12);
}
/* 오목 코너 2개 — SVG 패스로 매끈하게 (그라디언트 원은 찌그러져 보임)
   노치 배경이 화이트가 아닌 면에서는 fill 색을 맞춘 별도 처리 필요 */
/* 오목 코너 — 노치 본체와 1px 겹침(+1px 크기)으로 서브픽셀 틈 봉합 (반응형 배율에서 실틈 방지) */
.notch-banner__notch::before,
.notch-banner__notch::after {
  content: "";
  position: absolute;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='none'%3E%3Cpath d='M20 0 A20 20 0 0 1 0 20 L20 20 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.notch-banner__notch::before {
  right: 0;
  top: calc(-1 * var(--notch-curve));
  width: var(--notch-curve);
  height: calc(var(--notch-curve) + 1px); /* 아래로 1px 겹침 */
}
.notch-banner__notch::after {
  left: calc(-1 * var(--notch-curve) + 1px); /* 오른쪽으로 1px 겹침 */
  bottom: 0;
  width: var(--notch-curve);
  height: var(--notch-curve);
}

/* 노치 안 캐러셀 컨트롤 */
.carousel-ctrl { display: inline-flex; align-items: center; gap: var(--spacing-16); }
.carousel-ctrl__count--total { color: var(--text-4); }
.carousel-ctrl__count {
  font-family: var(--font-accent);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  color: var(--text-1);
  /* 숫자 폭 고정 — 01↔04 전환 시 노치가 좌우로 흔들리는 것 방지 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  min-width: 2ch;
  text-align: center;
}
.carousel-ctrl__bar { width: 72px; height: 3px; background: var(--border-divider); position: relative; overflow: hidden; border-radius: 3px; }
.carousel-ctrl__bar i { position: absolute; inset-block: 0; left: 0; width: 0; border-radius: 3px; background: var(--brand-blue); }

/* 히어로 슬라이드 — 페이드 전환, 진행 바는 슬라이드(영상) 길이에 맞춰 차오름 */
.carousel-ctrl__pause {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--text-3); /* 흐린 그레이 — 너무 검지 않게 */
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.carousel-ctrl__pause:hover { background: var(--text-2); }
.carousel-ctrl__pause svg { width: 10px; height: 12px; display: block; }
/* 상태 아이콘 — 재생 중엔 정지(2선), 멈추면 오른쪽 삼각 */
.carousel-ctrl__pause .icon-play { display: none; }
.carousel-ctrl__pause[aria-pressed="true"] .icon-pause { display: none; }
.carousel-ctrl__pause[aria-pressed="true"] .icon-play { display: block; }
/* 재생 삼각은 Phosphor play(fill) 원본 — viewBox가 256이라 크기만 따로 잡는다 */
.carousel-ctrl__pause .icon-play { width: 12px; height: 12px; }

/* ============ 스프링 노트형 게시글 카드 ============ */
.spring-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--spacing-24);
  padding-left: 44px; /* 스프링 자리 */
}
.spring-card::before { /* 세로 스프링 레일 */
  content: "";
  position: absolute;
  left: 18px; top: 20px; bottom: 20px;
  width: 14px;
  background-image: radial-gradient(circle 5px at 7px 7px, var(--surface-dark) 4px, transparent 5px);
  background-size: 14px 24px;
  background-repeat: repeat-y;
}
.spring-card__badge {
  position: absolute;
  top: -12px; left: 28px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-blue); color: #fff;
  font-size: var(--text-system); font-weight: var(--weight-bold); line-height: 1;
}
.spring-card__thumb {
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--spacing-16);
}
.spring-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.spring-card__title {
  font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--text-1);
  margin-bottom: var(--spacing-8);
}
.spring-card__excerpt {
  font-size: var(--text-label); line-height: var(--leading-label); color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.spring-card__date { margin-top: var(--spacing-16); font-size: var(--text-system); color: var(--text-4); }

/* ============ 필 토글 · 미니 탭 ============ */
.pill-toggle { display: inline-flex; gap: var(--spacing-8); }
.pill-toggle button {
  padding: 12px 18px; /* 라인 없이 흰 면으로만 — 위아래 여유 있게 */
  border-radius: 8px; /* 살짝 둥근 사각 — 알약형 분류 뱃지와 형태로 구분 */
  border: 0;
  background: var(--surface-canvas);
  font-size: 16px; font-weight: var(--weight-medium); line-height: 1;
  letter-spacing: var(--tracking-body); /* 살짝 조인 자간 — 짧은 단어가 흩어져 보이지 않게 */
  color: var(--text-2); /* 비활성도 또렷하게 — 굵기는 500 유지(600은 위계 밖) */
  transition: all var(--transition-fast);
}
/* 호버 — 블루 틴트 위에 블랙 라인. inset 그림자라 1px이 더해져도 자리가 밀리지 않는다 */
.pill-toggle button:hover { background: var(--brand-blue-tint); color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--text-1); }
.pill-toggle button.is-active:hover { box-shadow: none; }
.pill-toggle button.is-active { background: var(--brand-blue); color: #fff; font-weight: var(--weight-medium); }
/* 흰 배경 위에 놓일 때 — 비활성 칩을 옅은 그레이 면으로 (흰 위 흰은 사라진다) */
.pill-toggle--tint button { background: var(--surface-tint); }
/* 호버 — 그레이 칩은 이미 면이 있으니 라인 없이 블루 틴트 + 블루 글자만 (기본 변형의 블랙 인셋 라인은 흰 칩용) */
.pill-toggle--tint button:hover { background: var(--brand-blue-tint); color: var(--brand-blue); box-shadow: none; }
.pill-toggle--tint button.is-active { background: var(--brand-blue); color: #fff; } /* 흰 글자도 여기서 — 위 틴트 호버의 블루 글자가 선택 탭에 덮이지 않게(2026-09-30, 메인 발간물 탭) */
/* 제목(42px) 옆에 붙는 탭 — 기본 높이(40)는 글자보다 커 보이고 34는 작아 보여 중간(38)으로 */
.pill-toggle--compact button { padding: 11px 17px; }

.tab-mini { display: flex; gap: var(--spacing-24); border-bottom: 1px solid var(--border-hairline); }
.tab-mini button {
  padding: 10px 2px;
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-4);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition-fast);
}
.tab-mini button:hover { color: var(--text-2); }
.tab-mini button.is-active { color: var(--text-1); border-bottom-color: var(--text-1); font-weight: var(--weight-semibold); } /* 700은 짧은 라벨에서 과해 600 */

/* ============ 뱃지 · 태그 ============ */
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--text-system); font-weight: var(--weight-bold); line-height: 1;
}
.badge--point { background: var(--brand-orange); color: #fff; }
.badge--soft { background: var(--surface-tint); color: var(--text-3); }
.badge--blue { background: var(--brand-blue); color: #fff; } /* 분류 뱃지 — 액션 컬러 */
/* 선 배지 — 채움 없이 옅은 테두리만. 테두리 1px만큼 안쪽 여백을 줄여 기본 배지와 크기 동일.
   굵기 보통 · 글자 흐리게 — 옆의 기관명·비율이 먼저 읽히도록 */
.badge--line { padding: 4px 10px; border: 1px solid var(--border-hairline); background: transparent; color: var(--text-3); font-weight: var(--weight-regular); }

.tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3);
}

/* ============ 공고 리스트 (상태 뱃지 + 제목/기관·기간 2줄) ============ */
.announce-item {
  display: flex; align-items: center; gap: var(--spacing-16);
  padding-block: var(--spacing-12);
  border-bottom: 1px solid var(--border-hairline);
}
.announce-item:last-child { border-bottom: 0; }
.announce-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.announce-item__title {
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.announce-item:hover .announce-item__title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 발간물과 동일: 블루 + 밑줄 */
.announce-item__meta {
  /* 기간 표기 — 숫자 전용이라 Space Grotesk Regular (규정 예외: 15px) */
  font-family: var(--font-accent);
  font-size: var(--text-system); line-height: var(--leading-system);
  font-weight: var(--weight-regular); color: var(--text-4);
  font-variant-numeric: tabular-nums; /* 동향 카드 날짜와 동일한 숫자꼴 — 두 카드의 굵기 차이처럼 보이던 원인 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* 정사각형 상태 뱃지 — 상태값에 따라 컬러 (블랙·그레이 + 포인트 2색) */
.badge-sq {
  flex-shrink: 0;
  width: 52px; height: 52px; /* 정사각 */
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-system); font-weight: var(--weight-bold); line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* D-XX는 포인트 오렌지를 그대로 쓴다(사용자 결정 2026-09-15) — 흰 글자 대비 3.27:1로 AA(4.5:1) 미달을 감수한 브랜드 선택.
   마감 회색은 옛 #9a9a96(2.82:1)이 너무 흐려 한 단계 짙게 유지 */
.badge-sq--dday   { background: var(--brand-orange); } /* D-XX — 포인트 오렌지 */
.badge-sq--ing    { background: var(--brand-blue); }   /* 진행중·접수중 — 5.74:1 */
.badge-sq--soon   { background: var(--brand-blue-tint); color: var(--brand-blue); } /* 예정 — 옅은 블루 면 + 블루 글자. 어두운 회색이던 것을 마감(#75756f)과 구분되게 바꿈(2026-09-21) */
.badge-sq--closed { background: #75756f; }             /* 마감 — 4.64:1 */

/* ============ 퀵메뉴 (히어로 하단 연결부) ============
   큼직한 라운드 사각 타일 + 조인 간격 — 한 덩어리로 읽히게 */
.quick-menu { display: flex; gap: var(--spacing-8); }
.quick-menu__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-12);
  min-width: 104px;
  padding: var(--spacing-8);
  transition: transform var(--transition-base);
}
/* 타일 상승 없음 — 레이블 색·밑줄 + 타일 틴트로 충분(사용자 확인). data-reveal의 transform:none과도 충돌하지 않음 */
.quick-menu__icon {
  width: 106px; height: 106px; /* 96에서 10% 확대 */
  border-radius: var(--radius-card-lg);
  background: var(--surface-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-1);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.quick-menu__item:hover .quick-menu__icon { background: var(--brand-blue-tint); color: var(--brand-blue); }
.quick-menu__label { font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-2); text-align: center; transition: color var(--transition-fast); }
/* 레이블 = 텍스트 링크 규칙(블루 + 밑줄) — 히어로 카드·발간물 제목 호버와 통일 */
.quick-menu__item:hover .quick-menu__label { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 4px; }

/* ---- 퀵메뉴 아이콘 — 사이트 공통 아이콘 규칙 ----
   출처: Phosphor Icons (MIT License, https://phosphoricons.com) — 정규(regular) 형태를 기준으로 함.
   적용법(서브페이지도 동일):
   1) Phosphor regular SVG(256 그리드, 16px 스트로크 기반 외곽선)를 받아 좌표를 28 그리드로 변환(×28/256).
   2) 채움 외곽선을 그대로 쓰지 않고 중심선을 스트로크로 재구성 — 스트로크 1.8px(=Phosphor 16/256×28), round cap/join.
      형태는 원본과 동일해야 하며, 요소별 색·모션 제어를 위해 path를 분리한다.
   3) 색: 선 = currentColor(텍스트 1단계), 포인트 = --brand-orange 1곳(노드/도달점/가장 높은 막대 등 '데이터 지점').
   4) 모션: 등장 후 주황 포인트 1회 숨쉬기(qmBreath). 호버는 한 문법 — 검정 선이 그어지는 동안(ic-anim-draw 0.8s) 끝자락 0.4s부터 주황 포인트가 켜진다(ic-anim-pop/grow).
      흔들림·부유 같은 물리 모션은 쓰지 않는다. 상시 루프 금지, reduced-motion 시 전부 정지.
   5) transform 대상은 transform-box: fill-box + transform-origin 명시. 모션이 viewBox 밖으로 나가므로 overflow: visible. */
.qm-svg { width: 42px; height: 42px; overflow: visible; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* overflow visible — 부유·흔들림 모션이 viewBox 상단에서 잘리지 않게 */
/* 주황 노드 모티프 — 각 아이콘의 포인트 1점 (로고 노드와 동일 색) */
.qm-svg .qm-accent { fill: var(--brand-orange); stroke: none; }
.qm-svg .qm-accent-stroke { stroke: var(--brand-orange); } /* 선형 강조(가장 높은 막대) */
.qm-svg [class^="ic-anim"], .qm-svg [class*=" ic-anim"] { transform-box: fill-box; }

/* 등장 직후 1회 — 주황 포인트만 숨 쉬듯 한 번(0.9s, scale 1→1.15, opacity 0.6→1) 후 정지. 상시 루프 없음(요란함·WCAG 2.2.2 회피) */
.quick-menu__item.is-revealed .qm-accent,
.quick-menu__item.is-revealed .qm-accent-stroke { animation: qmBreath 0.9s ease-in-out 0.75s 1 both; transform-origin: center; }
.quick-menu__item.is-revealed .ic-anim-grow { animation-name: qmBreathY; transform-origin: bottom; }
@keyframes qmBreath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.6; } }
@keyframes qmBreathY { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.06); opacity: 0.6; } }

@keyframes qmGrow { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* 꺾은선 — 선이 그려짐 (pathLength=100 지정 필요) */
.ic-anim-draw { stroke-dasharray: 100; }
.quick-menu__item:hover .ic-anim-draw { animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) both; } /* 고른 진행 곡선 — 감속 곡선은 선이 일찍 끝나 주황까지 빈 틈이 생김 */
@keyframes qmDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* 점 팝 — 노드가 튀어나옴 (로고 노드 팝과 동일 계열) */
.ic-anim-pop { transform-origin: center; }
/* 호버 문법 통일: 선이 그어지는 동안(0.8s) 그 끝자락(0.4s~)에서 주황 포인트가 켜진다 — 두 동작이 겹쳐 한 호흡. 흔들림·부유 계열은 쓰지 않음 */
.quick-menu__item:hover .ic-anim-pop { animation: qmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s both; }
.quick-menu__item:hover .ic-anim-pop:nth-of-type(2) { animation-delay: 0.44s; }
.quick-menu__item:hover .ic-anim-pop:nth-of-type(3) { animation-delay: 0.50s; }
.quick-menu__item:hover .ic-anim-pop:nth-of-type(4) { animation-delay: 0.56s; }
.quick-menu__item:hover .qm-accent.ic-anim-pop { animation-delay: 0.5s; } /* 주황은 항상 마지막 */
@keyframes qmPop { from { transform: scale(0); } to { transform: scale(1); } }


/* 막대 성장(가장 높은 막대) — 호버 */
.ic-anim-grow { transform-origin: bottom; }
.quick-menu__item:hover .ic-anim-grow { animation: qmGrow 0.5s var(--ease-out-soft) 0.4s both; } /* 주황 막대도 선 드로잉 끝자락에 */


@media (prefers-reduced-motion: reduce) {
  .quick-menu__item:hover [class^="ic-anim"], .quick-menu__item:hover [class*=" ic-anim"],
  .quick-menu__item.is-revealed .qm-accent, .quick-menu__item.is-revealed .qm-accent-stroke { animation: none; }
}

/* ============ 네이비 스탯 카드 ============
   군청(--brand-navy) 다크 카드 — 통계·핵심 지표의 무게중심 */
.card--navy {
  background: var(--brand-navy-deep); /* 어두운 바탕 — 주황·화이트 포인트가 살도록 */
  border-color: transparent;
  color: #fff;
}
.card--navy .t-title { color: #fff; }
.card--navy .tag { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); }
.card--navy .metric__label { color: rgba(255, 255, 255, 0.72); }
.card--navy .metric-duo__name,
.card--navy .metric-duo__pct { color: rgba(255, 255, 255, 0.85); } /* 기관명·비율 — 제목(72%)보다 한 단계 밝게(태그 글자와 같은 85%) */
.card--navy .metric-duo__sub { border-top-color: rgba(255, 255, 255, 0.14); }
.card--navy .badge--line { border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.66); } /* 배지 글자 — 기관명(85%)보다 흐리게 */
.card--navy .metric__value { color: #fff; }
.card--navy .metric__unit { color: rgba(255, 255, 255, 0.66); }

/* 증감 필 뱃지 — 텍스트 나열 대신 상태를 뱃지로 */
.delta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--text-system); line-height: 1;
  font-weight: var(--weight-bold);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.delta-pill--up { background: var(--brand-orange); }
.delta-pill--down { background: var(--brand-blue); } /* 감소 = 블루 필 (증가 주황 필과 대구) */
.delta-pill--dark { background: var(--surface-dark); } /* 중립 수치 = 블랙 필 */
.delta-pill small { font-size: var(--text-system); font-weight: var(--weight-regular); color: rgba(255, 255, 255, 0.75); }
/* 숫자 슬롯 — 한글 레이블과 분리된 순수 수치는 포인트 서체 (화살표는 Pretendard 유지) */
.delta-pill__num { font-family: var(--font-accent); font-weight: var(--weight-bold); font-size: 16px; font-variant-numeric: tabular-nums; }

/* 네이비 카드 내부 서브 지표 박스 */
/* 카드 상단 행(제목 + 태그) / 증감 필 행 / 소형 지표 2열 */
.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-24); }
.card__head--tight { margin-bottom: var(--spacing-8); }
.delta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-20); }
.metric-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); margin-top: var(--spacing-24); }
.metric-duo > div { min-width: 0; padding: var(--spacing-16); } /* 안쪽 여백 위·아래·좌·우 16 동일. min-width 0 — 긴 기관명이 칸을 밀어내지 않고 말줄임되게 */
.card--navy .metric-duo > div { background: rgba(255, 255, 255, 0.10); border-radius: var(--radius-md); }
.metric-duo .metric__label { margin-bottom: var(--spacing-8); }
/* 수치 아래 별도 정보 줄 — [최대 비중] 기관명 ……… 00.0%
   수치는 합계가 아니라 비중 1위 항목의 투자액. 구분선으로 수치와 나눠 별도 정보로 읽히게 한다.
   화면 조각은 aria-hidden, 스크린리더는 칸 첫머리의 .visually-hidden 문장만 읽는다
   ("부처별 투자액, 최대 비중 과학기술정보통신부, 2조 522억원, 전체의 42.4%") */
.metric-duo__sub {
  display: flex; align-items: center; gap: var(--spacing-8);
  margin-top: 7px; padding-top: var(--spacing-12); /* 수치 ↔ 구분선 — 숫자 상자 아래 글꼴 여유가 있어 12에서 5 줄임 */
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-system); line-height: 20px; font-weight: var(--weight-regular); color: var(--text-2);
}
.metric-duo__sub .badge { flex-shrink: 0; }
/* 기관명이 남는 폭을 쓰고, 넘치면 말줄임(전체 이름은 title 속성) */
.metric-duo__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-duo__pct { flex-shrink: 0; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

/* ============ 지표 (Metric) ============
   typography.md §2: 전용 컴포넌트로만 구현 — 문장 안에 못 들어가게.
   숫자 = Space Grotesk(20px 이상), 단위 = Pretendard 작게·보조색 */
.metric { display: flex; align-items: baseline; gap: var(--spacing-8); }
.metric__value {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-heading-sm);
  line-height: 1;
  letter-spacing: var(--tracking-title);
  color: var(--text-1);
}
.metric--xl .metric__value { font-size: var(--text-heading); letter-spacing: var(--tracking-display); }
.metric--xl .metric__unit { top: -0.42em; } /* 대형 숫자 옆 단위는 더 올려 시각적 중심을 맞춤 */
.metric--md .metric__value { font-size: 28px; }
.metric__unit {
  font-family: var(--font-base); font-size: var(--text-title); font-weight: var(--weight-medium); color: var(--text-3);
  position: relative; top: -0.14em; /* 베이스라인 정렬 시 아래로 쏠려 보이는 것 광학 보정 */
}
.metric--md { gap: 5px; } /* 소형 지표는 숫자·단위 간격 좁게 */
.metric--md .metric__unit { font-size: var(--text-label); }
.metric__label { display: block; font-size: var(--text-label); color: var(--text-3); margin-bottom: var(--spacing-8); }


/* ============ 데이터 리스트 (좌석현황형 — 라벨·수치·프로그레스) ============ */
.data-list__row {
  display: grid;
  grid-template-columns: 1fr auto 96px 56px;
  align-items: center;
  gap: var(--spacing-16);
  padding-block: var(--spacing-12);
  border-bottom: 1px solid var(--border-hairline);
}
.data-list__row:last-child { border-bottom: 0; }
.data-list__name { font-size: 17px; color: var(--text-2); }
.data-list__value {
  /* '건' 단위 — 숫자보다 작게, 흐리게 */
  font-family: var(--font-base); font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-system); line-height: 1; color: var(--text-4);
}
.data-list__value small { font-size: inherit; position: relative; top: -1.5px; } /* 단위 광학 보정 — 숫자 시각 중심에 맞춤 */
.data-list__value em {
  font-style: normal;
  font-family: var(--font-accent); font-weight: var(--weight-bold);
  font-size: 20px;
  color: var(--brand-blue);
}
.data-list__bar { height: 6px; border-radius: 3px; background: var(--chart-track); position: relative; overflow: hidden; }
.data-list__bar i { position: absolute; inset-block: 0; left: 0; background: var(--chart-bar); border-radius: 3px; }

/* 순위형 변형 — 왼쪽 순위 열, 1~3위 강조, 1위 바는 주황 */
.data-list--ranked .data-list__row { grid-template-columns: 28px 1fr auto 96px 56px; }
.data-list__rank {
  font-family: var(--font-accent); font-weight: var(--weight-bold);
  font-size: 18px; line-height: 1;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.data-list__row.is-top .data-list__rank { color: var(--text-1); }
.data-list__row.is-top .data-list__name { font-weight: var(--weight-bold); color: var(--text-1); }
.data-list__row.is-first .data-list__bar i { background: var(--chart-bar-accent); }
.data-list__row.is-first .data-list__value em { color: var(--brand-orange); } /* 1위는 숫자·바 주황 세트 */
.data-list__pct {
  font-family: var(--font-accent); font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  font-size: 17px; line-height: 1; text-align: right; color: var(--text-3);
}

/* ============ 검색 바 (히어로) ============ */
.search-bar {
  display: flex; align-items: center; gap: var(--spacing-8);
  background: var(--surface-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: var(--spacing-8);
  padding-left: var(--spacing-24);
}
.search-bar__scope {
  border: 0; background: none;
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-1);
  padding-right: var(--spacing-16);
  border-right: 1px solid var(--border-hairline);
}
.search-bar input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: var(--text-body); padding-inline: var(--spacing-16);
}
.search-bar input::placeholder { color: var(--text-4); }
.search-bar__submit {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.search-bar__submit:hover { background: var(--brand-blue-hover); }

/* ============ 인풋 ============ */
.input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-canvas);
  font-size: var(--text-label);
  transition: border-color var(--transition-fast);
}
.input:focus { outline: none; border-color: var(--brand-blue); }
.input::placeholder { color: var(--text-4); }

/* ============ 발간물 표지 ============
   A4 비율(1:1.414) 흰 면. 이미지는 가로를 맞추고 세로 중앙에 둔다 —
   짧으면 위아래가 흰 면으로 남고, 길면 위아래가 같은 양만큼 잘린다.
   그레이 밴드 위라 테두리 대신 부드러운 그림자로 띄운다. */
.pub-cover {
  display: flex; align-items: center;
  aspect-ratio: 1 / 1.4142;
  border-radius: 0; /* 책 표지 — 모서리를 자르면 인쇄물이 잘려 보여 각지게 둔다 */
  background: #fff;
  overflow: hidden;
  /* 책이 면 위에 놓인 느낌 — 우하단으로 살짝 밀린 박스 그림자, 번짐은 최소 */
  box-shadow: 3px 4px 8px rgba(9, 9, 9, 0.14);
  /* 흰 바탕에서는 그림자만으로 가장자리가 흐려진다 — 안쪽 1px 헤어라인으로 판을 세운다.
     outline은 이미지 위에 그려져 흰 표지의 흰 여백에서도 선이 보인다 */
  outline: 1px solid rgba(9, 9, 9, 0.1);
  outline-offset: -1px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.pub-cover--lg { box-shadow: 5px 7px 12px rgba(9, 9, 9, 0.16); }
.pubs__item:hover .pub-cover { transform: translateY(-4px); }
.pub-cover img { display: block; width: 100%; height: auto; flex: none; }
/* 표지 없음(2026-09-30) — 서울 R&D 카드의 이미지 없음(.biz-card__thumb--empty)과 같은 모양 : A4 칸 크기는 그대로, 옅은 회색 면 가운데 STIS 기호(칸 폭 48%).
   표지가 아니라 흰 면 · 그림자 · 헤어라인 없음(호버 그림자도). 메인 발간물 캐러셀 — common.js 가 class 를 붙인다 */
.pub-cover.pub-cover--empty,
.pubs__item:hover .pub-cover--empty,
.pubs__stage.is-hover .pubs__featured-cover.pub-cover--empty { justify-content: center; border-radius: var(--radius-md); background: var(--surface-tint); box-shadow: none; outline: 0; }
.pub-cover--empty img { width: 48%; }
/* 메인 발간물 캐러셀 표지 — 상세(.pub-detail__cover)와 같이 A4 틀을 꽉 채운다(2026-09-30). 비율이 달라도 늘려서 채우고
   넘치는 쪽은 가운데 기준으로 잘린다(찌그러지지 않음). 대표 슬롯 · 트랙 모두, 표지 없음(STIS 기호)은 빼서 기호가 잘리지 않게 */
.pubs__featured-cover:not(.pub-cover--empty) img,
.pubs__item .pub-cover:not(.pub-cover--empty) img { height: 100%; object-fit: cover; object-position: center; }


/* ============ 발간물 캐러셀 (대표 1권 + 4권 트랙) ============
   메인과 발간물 페이지가 함께 쓰는 블록 — 공용 컴포넌트로 둔다.
   좌: 대표 표지(250) + 정보 컬럼(256, 표지 높이에 맞춰 stretch)
   우: 4권 트랙 — JS가 한 칸씩 밀고, 맨 앞 권을 대표 슬롯으로 올린다 */
/* 밴드 타이틀 — 캐러셀 좌측 위 영문 한 줄. 뒷단어만 블루 (히어로 패널 타이틀과 같은 결) */
.pubs__eyebrow {
  margin-bottom: var(--spacing-40);
  font-family: var(--font-accent);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
}
.pubs__eyebrow em { font-style: normal; color: var(--brand-blue); }
.pubs__stage {
  display: grid;
  grid-template-columns: 250px 256px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-36, 36px); /* 정보 컬럼 -24, 간격 -4 → 트랙 표지 약 +5% */
}
.pubs__featured-cover { --from: 28px; }
.pubs__featured-info {
  --pubs-info-w: 100%; /* 제목 박스와 진행 바의 공통 폭 — 컬럼 끝까지 */
  align-self: stretch;
  display: flex; flex-direction: column;
  padding-block: var(--spacing-40); /* 뱃지·제목은 내리고 진행 바는 올려 표지 안쪽으로 시선 모음 */
  min-width: 0;
}
.pubs__featured-info .badge { align-self: flex-start; margin-bottom: var(--spacing-24); padding: 10px 16px; font-weight: var(--weight-medium); } /* 기본 5/11 + 3 — 대형 슬롯이라 여유 있게 */
.pubs__featured-title {
  width: var(--pubs-info-w); /* 진행 바와 같은 폭에서 줄바꿈 */
  font-size: var(--text-title); line-height: 1.32; /* 카드 제목 토큰(22px) — 패널 이름(26)보다 한 단계 아래 위계 */
  font-weight: var(--weight-bold); color: var(--text-1);
  letter-spacing: var(--tracking-title);
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pubs__featured-title a { color: inherit; transition: color var(--transition-fast); }
/* 대표 슬롯 호버 — 표지·제목 어느 쪽에 올려도 함께 반응 (JS가 .is-hover 토글) */
.pubs__stage.is-hover .pubs__featured-cover { transform: translateY(-4px); box-shadow: 6px 9px 14px rgba(9, 9, 9, 0.26); }
.pubs__stage.is-hover .pubs__featured-title a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 4px; }
.pubs__progress { margin-top: auto; width: calc(var(--pubs-info-w) - 10px); height: 3px; border-radius: 3px; background: var(--border-divider); overflow: hidden; }
.pubs__progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--brand-blue); }

/* 대표 슬롯 전환 모션 — 표지는 트랙에서 오는 방향(--from)으로 밀려 들어오고, 텍스트는 순차로 떠오름.
   fill을 backwards로 두어 끝난 뒤엔 호버 transform이 정상 적용되게 한다 */
.pubs__featured-cover.is-in { animation: pubs-cover-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.pubs__featured-info.is-in .badge,
.pubs__featured-info.is-in .pubs__featured-title,
.pubs__featured-info.is-in .pubs__featured-title { animation-delay: 0.06s; }
@keyframes pubs-cover-in { from { opacity: 0; transform: translateX(var(--from)) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pubs-text-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pubs__carousel { display: flex; align-items: center; gap: var(--spacing-20); min-width: 0; }
.pubs__viewport { flex: 1; min-width: 0; overflow: hidden; }
.pubs__track {
  --pubs-gap: var(--spacing-24);
  --pubs-visible: 4;
  display: flex; gap: var(--pubs-gap);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.pubs__item {
  flex: 0 0 calc((100% - (var(--pubs-visible) - 1) * var(--pubs-gap)) / var(--pubs-visible));
  display: block; min-width: 0;
}
.pubs__item-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em; /* 2줄분 자리를 늘 확보 — 한 줄짜리 제목이 섞여도 트랙 높이가 흔들리지 않는다 */
  margin-top: var(--spacing-20);
  font-size: var(--text-body); line-height: 1.4; font-weight: var(--weight-medium); color: var(--text-1);
  transition: color var(--transition-fast);
}
.pubs__item:hover .pubs__item-title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.pubs__item:hover .pub-cover { box-shadow: 4px 6px 10px rgba(9, 9, 9, 0.24); }
/* 이전/다음 — 탑버튼과 같은 결(유리판 + 줄기 있는 화살표, 호버 블루 반전), 형태는 원형 — 각진 표지와 대비 */
.pubs__arrow {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.07); /* 바깥 그림자 없음 — 그림자는 표지 몫 */
  color: var(--text-1);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.pubs__arrow svg { width: 18px; height: 18px; }
.pubs__arrow:hover,
.pubs__arrow:focus-visible { color: #fff; background: var(--brand-blue); box-shadow: 0 6px 18px rgba(0, 87, 243, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .pubs__track { transition: none; }
  .pubs__featured-cover.is-in,
  .pubs__featured-info.is-in .badge,
  .pubs__featured-info.is-in .pubs__featured-title { animation: none; }
}

@media (max-width: 1280px) {
  .pubs__stage { grid-template-columns: 220px 240px minmax(0, 1fr); gap: var(--spacing-32); }
  .pubs__featured-title { font-size: 20px; }
}
@media (max-width: 1024px) {
  .pubs__stage { grid-template-columns: 200px minmax(0, 1fr); }
  .pubs__carousel { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .pubs__stage { grid-template-columns: 150px minmax(0, 1fr); gap: var(--spacing-48) var(--spacing-20); } /* 대표 블록과 트랙 사이 세로 여백 넉넉히 */
  /* 모바일 트랙: 2권 보기, 양옆 44px은 화살표 자리 — 표지가 화살표 안쪽으로 들어가 대표 표지(150px)보다 작게 유지 */
  .pubs__carousel { grid-column: 1 / -1; position: relative; gap: 0; padding-inline: 44px; }
  .pubs__track { --pubs-visible: 2; --pubs-gap: var(--spacing-16); }
  .pubs__arrow {
    display: grid;
    position: absolute; z-index: 1;
    /* 캐러셀 높이 = 표지 + 제목 블록(약 44px) → 표지 중앙 = 50% − 22px */
    top: calc(50% - 22px); transform: translateY(-50%);
    width: 36px; height: 36px;
    background: var(--surface-canvas);
    box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.08);
  }
  .pubs__arrow svg { width: 18px; height: 18px; }
  #pubsPrev { left: 0; }
  #pubsNext { right: 0; }
  .pubs__featured-title { font-size: 19px; -webkit-line-clamp: 4; }
  .pubs__featured-info { padding-block: var(--spacing-8); }
  .pubs__eyebrow { margin-bottom: var(--spacing-24); font-size: var(--text-nav); }
}

/* ============ 정보 리스트 (동향 — 태그·제목·날짜) ============ */
.info-item {
  display: flex; align-items: center; gap: var(--spacing-12);
  padding-block: var(--spacing-12);
  border-bottom: 1px solid var(--border-hairline);
}
.info-item:last-child { border-bottom: 0; }
.info-item__title {
  flex: 1; min-width: 0;
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info-item:hover .info-item__title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 공고·발간물과 동일: 블루 + 밑줄 */
.info-item__date {
  flex-shrink: 0;
  font-family: var(--font-accent); font-weight: var(--weight-regular);
  font-size: var(--text-system); line-height: var(--leading-system); /* 미지정 시 본문 26px 상속 → 행 높이 어긋남 */
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* 2줄 변형 — 제목 / 날짜 세로 스택 (히어로 R&D Insight 패널) */
.info-item--stacked { flex-direction: column; align-items: stretch; gap: 3px; }
.info-item--stacked .info-item__title { width: 100%; }

/* ============ 로딩 ============
   자리만 — 옛 회전 심볼(.sstis-loop)은 로고 교체(2026-09-11)로 제거. 필요하면 assets/logo/stis 심볼로 다시 구성 */
.loading { display: inline-flex; flex-direction: column; align-items: center; gap: var(--spacing-16); }
.loading img, .loading svg { width: 64px; height: 64px; }
.loading__text { font-size: var(--text-system); color: var(--text-4); }

/* ============ 드롭다운·툴팁 공통 (그림자 허용되는 유일한 층) ============ */
.overlay-panel {
  background: var(--surface-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
}

/* ============ 맨 위로 버튼 ============
   일정 높이 이상 내려가면 우하단에 뜬다. 뒤에 오는 섹션의 밝기
   ([data-nav-theme])에 따라 밝은 판 / 유리 두 가지로 바뀐다.
   전체메뉴(z-index 120)보다 아래에 둔다. */
.to-top {
  position: fixed;
  right: 40px; bottom: 40px;
  z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base), background var(--transition-base),
    border-color var(--transition-base), color var(--transition-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.to-top svg { width: 20px; height: 20px; }

/* 밝은 배경 위 — 흐릿한 흰 판에 진한 화살표 */
.to-top--light {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 20px rgba(9, 9, 9, 0.1), inset 0 0 0 1px rgba(9, 9, 9, 0.07);
  color: var(--text-1);
}
/* 어두운 배경 위 — 유리판에 흰 화살표, 안쪽 위 하이라이트가 유리 두께 역할 */
.to-top--dark {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3),
              inset 0 0 0 1px rgba(255, 255, 255, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
/* 호버 — 배경 밝기와 무관하게 액션 컬러(블루)로 반전. 햄버거와 같은 결 */
.to-top:hover,
.to-top:focus-visible {
  background: var(--brand-blue);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(0, 87, 243, 0.35);
}

@media (max-width: 768px) {
  .to-top { right: 16px; bottom: 20px; width: 50px; height: 50px; border-radius: 16px; }
  .to-top svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transform: none; }
}

/* ============ 헤더·푸터 공통 반응형 ============
   메인·서브 모든 페이지에 필요한 규칙 — 페이지 CSS(main.css / sub.css)가 아닌 여기서 관리 */
.site-footer__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-48); flex-wrap: wrap; }
.site-footer__col--side { align-items: flex-end; }
/* 로고 | 정보 두 칸(2026-09-22) — 로고는 흰색 가로형 그림, 윗선은 정보 첫 줄(개인정보처리방침)과 같게.
   높이 30 = 헤더 로고(40)의 75% — 로고 안 한글(로고 높이의 53%)이 약 16px 로 옆 주소 글자(17px, 한글 실제 높이 약 16)와 비슷해 보인다. 정보와의 간격 72 */
.site-footer__brand { display: flex; align-items: flex-start; gap: 72px; min-width: 0; }
.site-footer__logo { display: block; flex: none; width: auto; height: 30px; }
/* 로고 | 정보 | 관련사이트가 한 줄에 들어가지 않는 폭(1259 이하)은 로고를 정보 위로 — 관련사이트가 지금처럼 같은 줄 오른쪽에 남도록
   (한 줄이면 로고 283 + 72 + 정보 509 + 48 + 관련사이트 270 = 1,182 가 필요하다) */
@media (max-width: 1259px) {
  .site-footer__brand { flex-direction: column; gap: var(--spacing-32); }
}
/* 태블릿(1280 이하) — GNB를 숨기고 햄버거 전체메뉴로 넘긴다.
   1280~769 구간에서 GNB가 로고·햄버거를 눌러 찌그러지던 문제 해결 */
@media (max-width: 1280px) {
  .site-header__gnb { display: none; }
  .gnb-panels { display: none; }
}
@media (max-width: 768px) {
  /* 모바일 헤더 — 로고 60→48, 햄버거 56→48, 높이 110→76 (전체메뉴 바 72와 근사) */
  .site-header__inner { height: 76px; padding-top: 0; } /* 모바일은 상하 대칭 — PC의 상단 +10 보정은 와이드 화면용 */
  .site-header__logo .stis-logo { width: 103px; height: 32px; } /* 심볼만 32 — 382.7 : 118.98, 전체메뉴 바와 같은 크기 */
  .megamenu__bar .stis-logo { width: 103px; height: 32px; margin-left: 2px; } /* 72px 바 안에서는 36도 커 보여 32로 */
  .hamburger { width: 48px; height: 48px; }

  .site-footer__inner { padding-bottom: 96px; } /* 하단 관련사이트가 탑버튼(우하단 50px)과 겹치지 않게 */
  .site-footer__meta { margin-top: var(--spacing-32); } /* 개인정보처리방침 아래 숨 살짝 더 */
  .site-footer__col--side { width: 100%; align-items: stretch; }
  .site-footer__logo { height: 28px; } /* 모바일도 로고가 정보 위(1259 이하 규칙) */
  .family-site { width: 100%; }
  /* 화면이 짧으면 항목 수보다 화면 높이를 먼저 따른다 */
  .family-site__list { max-height: min(calc(var(--family-item) * var(--family-rows) + var(--spacing-12)), 56vh); }
}

/* ==========================================================================
   수치 카드 (.stat-cards / .stat-card) — 지표명 · 수치 줄(여러 개)
   밝은 배경 위에서 쓰는 공용 컴포넌트. 여러 페이지에 들어간다
     · 그냥 보여 주기만 할 때는 <div>, 지표를 고르는 탭으로 쓸 때는 <button role="tab">
     · 탭으로 쓰면 aria-selected="true"가 선택 상태를 만든다 (블루 테두리 + 블루 라벨)
     · 카드 안은 [지표명] + 수치 두 칸(라벨 / 숫자·단위)을 좌우로 나누고 가운데 세로 구분선
     · 기준 연도 같은 공통 조건은 카드마다 쓰지 않고 목록 위 .stat-cards__base 한 줄로
     · 한 줄 칸 수는 --stat-cards-cols. 기본 4칸, .stat-cards--five를 쓰면 5칸
     · 카운트업(오도미터)은 .stat-card__num 안에서 돈다 — .odo 규칙은 메인 통계와 공용
   ========================================================================== */
/* 오도미터 — 자릿수 기둥이 굴러 멈추는 카운트업. 메인 통계와 수치 카드가 함께 쓴다(main.css에서 옮겨 옴) */
.odo { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.odo__strip { display: block; will-change: transform; }
.odo__strip span { display: block; height: 1em; line-height: 1; }
.odo__sep { font-variant-numeric: normal; letter-spacing: 0; } /* 쉼표는 자릿수 폭 고정에서 빼 제 폭만 쓴다 — 숫자 사이가 벌어져 보이지 않게 */

/* 목록 위 조건 한 줄 — 오른쪽 끝에 맞춘 캡슐 뱃지. 누르는 것이 아니라 표기라서 가장 가벼운 무게로 둔다 */
.stat-cards__base { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-16); }
.stat-cards__badge {
  padding: 2px var(--spacing-12); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  background: var(--surface-card); font-size: var(--text-system); line-height: var(--leading-system);
  font-weight: var(--weight-regular); color: var(--text-3);
}
.stat-cards { --stat-cards-cols: 4; }
.stat-cards--five { --stat-cards-cols: 5; } /* 5칸은 카드 폭이 좁아져 여백·숫자 크기를 함께 줄인다 */
.stat-cards__list { display: grid; grid-template-columns: repeat(var(--stat-cards-cols), minmax(0, 1fr)); gap: var(--spacing-24); }
.stat-cards--five .stat-cards__list { gap: var(--spacing-16); }

.stat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16);
  padding: var(--spacing-24); border: 1px solid transparent; border-radius: var(--radius-card); /* 테두리는 자리만 잡아 둔다 — 면 색으로만 카드를 구분하되, 탭으로 쓸 때 선이 생겨도 크기가 변하지 않게 */
  background: var(--brand-blue-tint); text-align: left;
  transition: border-color var(--transition-fast);
}
button.stat-card { cursor: pointer; }
button.stat-card:hover { border-color: var(--border-input); }
button.stat-card[aria-selected="true"] { border-color: var(--brand-blue); } /* 선택은 테두리와 블루 라벨로 — 면 색을 바꾸면 옅은 블루 단계가 더 필요해진다 */
button.stat-card:focus-visible { outline-offset: 2px; }

.stat-card__label { display: flex; align-items: center; gap: 6px; font-size: 18px; line-height: 26px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); color: var(--text-1); word-break: keep-all; } /* 자간은 음수만 — 긴 이름("기술료 징수건수")이 좁은 카드에서도 한 줄로 */
button.stat-card[aria-selected="true"] .stat-card__label { color: var(--brand-blue); }
/* 지표명 앞 마커 — 차트 범례와 같은 토큰·크기(10px)·모양. 차트 색이 바뀌면 여기도 함께 바뀐다 */
.stat-card__dot { flex: none; width: 10px; height: 10px; background: var(--stat-dot); }
.stat-card__dot--1 { --stat-dot: var(--chart-line-1); border-radius: 50%; }
.stat-card__dot--2 { --stat-dot: var(--chart-line-2); }
.stat-card__dot--3 { --stat-dot: var(--chart-line-3); transform: rotate(45deg); } /* 마름모 — 범례와 같이 사각형을 45° 돌린다 */
.stat-card__dot--4 { --stat-dot: var(--chart-line-4); border-radius: 50%; }
.stat-card__dot--5 { --stat-dot: var(--chart-line-5); }
/* 수치 — 두 사업을 좌우로 나누고 가운데 흐린 세로선. 칸마다 라벨 아래 숫자+단위, 두 칸의 크기는 같다 */
.stat-card__figures { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.stat-card__fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-card__fig:first-child { padding-right: var(--spacing-12); } /* 구분선 양옆 여백을 같게 — 선이 카드 정중앙에 선다 */
.stat-card__fig + .stat-card__fig { padding-left: var(--spacing-12); border-left: 1px solid var(--brand-blue-tint-line-in); } /* 테두리와 같은 세기로 보이게 — 옅은 블루 면 위라 한 단계 더 진한 값 */
.stat-card__kind { min-height: var(--leading-system); font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); white-space: nowrap; } /* 두 칸 모두 작은 제목 → 숫자. 줄 높이를 늘 잡아 두 칸의 숫자가 같은 높이에 선다 */
.stat-card__value { display: flex; align-items: baseline; gap: 4px; }
/* 오도미터는 자릿수 기둥 박스의 아랫변이 기준선이라, 그냥 두면 같은 줄의 다른 숫자보다 0.17em쯤 떠 보인다.
   숫자만 상자에 담기고 쉼표는 그대로라, 상자 쪽만 내리면 둘이 같은 기준선에 선다 */
.stat-card__num .odo { vertical-align: -0.17em; }
/* 쉼표 — 기준선 아래로 과하게 내려오지 않게 조금 작게·살짝 올리고, 좌우를 좁혀 숫자와 한 덩이로 */
.stat-card__num .odo__sep { position: relative; top: -0.06em; margin: 0 -0.06em; font-size: 0.86em; line-height: 1; } /* line-height까지 줄여야 쉼표 줄만 상자가 1px 더 내려가지 않는다 */
.stat-card__num {
  font-family: var(--font-accent); font-size: 20px; line-height: 28px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body); font-variant-numeric: lining-nums tabular-nums; color: var(--text-1);
} /* 숫자는 영문 숫자 서체(날짜와 같은 Space Grotesk) 500 — 지금까지의 Pretendard 600 과 같은 무게로 보이는 쪽(1440 비교, 2026-09-22).
     자릿수 폭·높이 고정 — 카운트업이 돌 때도, 멈춘 뒤에도 숫자가 같은 자리에 선다 */
/* 숫자 칸 안의 한글 · 기호("%" · "신규" · "데이터 없음" · 세모)는 한글 서체 그대로 — 예전 무게(600)도 그대로 */
.stat-card__ko, .stat-card__tri { font-family: var(--font-base); font-weight: var(--weight-semibold); }
.stat-card__unit { font-size: var(--text-system); line-height: var(--leading-system); font-weight: var(--weight-medium); color: var(--text-3); } /* 단위는 숫자보다 작게 — 두 칸 모두 같은 크기 */
.stat-card__sub { margin-top: auto; font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); word-break: keep-all; } /* 보조 줄은 카드 바닥에 — 카드마다 수치 줄 시작 높이가 같아진다 */

/* 전년 대비 증감 — 성과정보 전체 탭 요약 카드의 오른쪽 칸 값.
   카드 구조·크기·간격은 종합현황 카드 그대로다(왼쪽 칸 = 사업 구분 수치, 오른쪽 칸 = 전년 대비). 마커만 붙이지 않는다.
   메인페이지 .delta-pill과 같은 뜻의 색을 쓰되 꽉 찬 배지가 아니라 글자색으로만 — 옆 칸 수치보다 튀지 않게 한 급 작게 */
.stat-card__delta {
  font-family: var(--font-accent); font-size: 18px; line-height: 28px; font-weight: var(--weight-medium); /* 증감률 숫자도 수치와 같은 서체 · 무게 */
  letter-spacing: var(--tracking-body); font-variant-numeric: lining-nums tabular-nums;
  color: var(--delta-color, var(--text-3)); white-space: nowrap;
} /* 줄높이는 수치(20/28)와 같은 28 — 두 칸의 값이 같은 기준선에 선다 */
.stat-card__tri { display: inline-block; margin-right: 2px; font-size: 0.8em; line-height: 1; vertical-align: 0.08em; } /* 세모는 증감률보다 작게, 글자 가운데에 맞춰 살짝 올린다 */
/* 기관명 두 표기 — 넓은 화면은 원본 이름, 카드가 한 칸이 되는 모바일은 약칭. 보이는 쪽만 읽힌다(display: none은 스크린리더에서도 빠진다) */
.stat-card__abbr { display: none; }
.stat-card__delta--up { --delta-color: var(--brand-orange); }   /* 증가 = 주황 — 메인페이지 배지와 같은 의미 */
.stat-card__delta--down { --delta-color: var(--brand-blue); }   /* 감소 = 블루 */

/* 2장 배치 — 카드 폭은 4칸 기준 그대로 두고 가운데 두 칸 자리에 놓는다.
   폭 = (100% - 간격 × 3) ÷ 4 × 2 + 간격 = 50% - 간격 ÷ 2. 기준 연도 캡슐도 같은 폭 안 오른쪽 끝에 선다 */
.stat-cards--three { --stat-cards-cols: 3; } /* 사업통계 요약 — 정부연구비·세부과제수·부처 집중도 3장이 콘텐츠 폭을 3등분 */
/* 카드 3장(구별 통계) — 4칸일 때와 카드 폭을 같게 두고 가운데 정렬 */
.stat-cards--trio { --stat-cards-cols: 3; }
.stat-cards--trio .stat-cards__base,
.stat-cards--trio .stat-cards__list { width: calc(75% - var(--spacing-24) / 4); margin-inline: auto; }
.stat-cards--pair { --stat-cards-cols: 2; }
.stat-cards--pair .stat-cards__base,
.stat-cards--pair .stat-cards__list { width: calc(50% - var(--spacing-24) / 2); margin-inline: auto; }

.stat-cards--five .stat-card { padding: var(--spacing-20); }

@media (max-width: 1279px) {
  /* 5칸이 유지되는 하한이 1280(카드 230px) — 그 아래는 3칸. 라벨+숫자 한 줄이 카드 폭을 넘는다 */
  .stat-cards--five { --stat-cards-cols: 3; }
}
@media (max-width: 1024px) {
  .stat-cards, .stat-cards--five { --stat-cards-cols: 2; }
  .stat-cards__list { gap: var(--spacing-16); }
  /* 태블릿부터는 2칸이 기본이라 2장 카드도 폭을 좁히지 않고 그대로 두 칸을 채운다 */
  .stat-cards--pair .stat-cards__base, .stat-cards--pair .stat-cards__list { width: auto; }
  /* 3장 카드는 칸 안에 좌우 두 값이 들어가 2칸에서도 좁다 — 태블릿부터 1열로 쌓는다 */
  .stat-cards--three { --stat-cards-cols: 1; }
}
@media (max-width: 480px) {
  .stat-cards, .stat-cards--five { --stat-cards-cols: 1; }
  /* 카드 폭이 화면 폭까지 좁아지는 구간 — 긴 기관명은 약칭으로 바꿔 라벨 한 줄을 지킨다 */
  .stat-card__full { display: none; }
  .stat-card__abbr { display: inline; }
}