/* ===================================================
   웹폰트 — Hakgyoansim Bareonbatang (학교안심 바른바탕)
   시안에서 font-['Hakgyoansim_Bareonbatang:B'] 로 지정된 문단에만 사용
   =================================================== */
@font-face {
  font-family: "Hakgyoansim Bareonbatang";
  src: url("../assets/fonts/HakgyoansimBareonbatangR.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hakgyoansim Bareonbatang";
  src: url("../assets/fonts/HakgyoansimBareonbatangB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===================================================
   디자인 토큰 (피그마 SNU for Claude 파일 기준 추출)
   =================================================== */
:root {
  --color-navy: #232c50;      /* 주요 텍스트, 헤딩, 라인 */
  --color-navy-deep: #10234d; /* 진한 남색 배너/카드 배경 */
  --color-blue: #296fff;      /* 포인트 컬러, 배너, 강조 */
  --color-blue-light: #e5edff; /* 연한 블루 배경 */
  --color-green: #4bfe5d;     /* HOME 활성 상태, 강조 텍스트 */
  --color-gray: #797979;      /* 보조 텍스트 */
  --color-white: #ffffff;
  --color-black: #000000;
  --font-sans: "Wanted Sans Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --font-serif: "Hakgyoansim Bareonbatang", "Batang", "Apple SD Gothic Neo", serif;
  --max-width: 1280px;
  --header-height: 84px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0; /* 브라우저 기본 8px 여백 제거 — 풀블리드 히어로/푸터가 밀리는 문제 */
  font-family: var(--font-sans);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  /* 전체 기본 자간 -4% (글자 크기 대비). 시안 tracking 값이 따로 지정된
     요소(히어로 -2%, About 리스트 -5% 등)는 각자의 값을 유지한다. */
  letter-spacing: -0.04em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* ===================================================
   header
   =================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

.header-inner {
  /* 브라우저 양끝 기준 55px — 1280px 컨테이너 제약을 두지 않음 */
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 55px;
}

/* 히어로 위에 얹히는 헤더(index·career·about)는 배경 사진에 따라 흰 글자가
   묻힐 수 있어 시안 Group 657(1:643)의 드롭섀도를 그대로 적용한다.
   Figma: x 0, y 0, blur 6, #000000 36%
   → 밝은 배경 사진에서 시인성이 부족해 진하기만 2배(36% → 72%)로 올림. */
.site-header:not(.is-solid) .header-inner {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.72));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-emblem {
  width: 48px;
  height: 50px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 13px;
  color: var(--color-white);
}

.brand-line:not(.brand-line--accent) {
  font-size: 17px;
  color: #e5edff;
}

.brand-line--accent strong {
  color: var(--color-white);
  font-size: 22px;
  font-weight: 800;
}

.gnb ul {
  display: flex;
  align-items: center;
  /* 선택 표시(타원)가 좌우로 튀어나오므로 그만큼 메뉴 간격을 넓혀 둔다 */
  gap: clamp(20px, 3.125vw, 40px); /* 1280px에서 40px */
}

.gnb a {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-size: clamp(15px, 1.5625vw, 20px); /* 1280px에서 20px */
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap; /* 좁은 데스크톱에서 라벨이 줄바꿈되지 않도록 */
}

/* 현재 페이지 표시 타원은 가상 요소로 그린다.
   패딩으로 넣으면 그 항목만 좌우 40px 넓어져 다른 메뉴 위치가 밀린다. */
.gnb a.is-current {
  color: var(--color-white);
}

.gnb a.is-current::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  bottom: -8px;
  left: calc(-1 * clamp(10px, 1.5625vw, 20px));
  right: calc(-1 * clamp(10px, 1.5625vw, 20px));
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.gnb a:hover,
.gnb a:focus-visible {
  color: var(--color-white);
}

/* ===================================================
   자료실 (PC) — 시안 Component 5(60:552)
   · 라벨 "자료실"(60:582)은 다른 GNB 항목과 같은 글자 크기·굵기·색
   · 하위 박스 Rectangle 226(60:583): 109x82, radius 12, #F3F7FF,
     라벨 아래 10px (라벨 top 14 + 높이 26 = 40 → 박스 top 50)
   =================================================== */
.gnb-docs {
  position: relative;
}

.gnb-docs-toggle {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(15px, 1.5625vw, 20px);
  font-weight: 600;
  line-height: inherit;
  color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
}

.gnb-docs-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 109px;
  border-radius: 12px;
  background: #f3f7ff;
  /* 시안에서 이 박스는 Group 657 안에 있어 헤더 전체 드롭섀도를 함께 받는다.
     별도 그림자는 시안에 없으므로 넣지 않는다. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

/* 라벨과 박스 사이 10px 틈 위에서 커서가 .gnb-docs 를 벗어나 박스가 닫히던 문제.
   그 틈을 덮는 투명 영역을 박스에 붙여, 커서가 아래로 내려가는 동안 hover 가 끊기지 않게 한다. */
.gnb-docs-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
}

/* 요청: 마우스를 올렸을 때만 펼침. 키보드 사용자를 위해 focus-within 도 포함. */
.gnb-docs:hover .gnb-docs-panel,
.gnb-docs:focus-within .gnb-docs-panel {
  opacity: 1;
  visibility: visible;
}

/* 시안 Group 767(60:585) · Group 768(60:587): 14px SemiBold #232C50, 자간 -0.02em.
   글자는 좌 12 / 우 28 여백 안에서 가운데 → 시안의 글자 x(16 · 28)와 일치. */
.gnb-docs-panel a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41px; /* 82 / 2 */
  padding: 0 28px 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #232c50;
  white-space: nowrap;
}

/* 시안에 hover 상태가 없어 링크임을 알리는 최소한의 표시만 추가 */
.gnb-docs-panel a:hover,
.gnb-docs-panel a:focus-visible {
  color: var(--color-blue);
}

/* 시안 Line 72(60:592): 90px, #000 16% (선 두께 0.5px → 1px 로 그린다) */
.gnb-docs-panel a + a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 1px;
  background: rgba(0, 0, 0, 0.16);
}

/* 시안 Component 9·10: 14x13, 박스 오른쪽 끝에서 14px */
.gnb-docs-panel .doc-dl {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 14px;
  height: 13px;
  color: #232c50;
}

/* 햄버거 버튼 — 시안 menu 아이콘 24x19.12 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 19.12px;
  margin-top: 15px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2.2px;
  border-radius: 2px;
  background: var(--color-white);
}

/* ===================================================
   모바일 메뉴 오버레이 (Figma Mobile 104:275)
   헤더바 375x80 + 100px 행 4개, 흰 배경, 텍스트 중앙 정렬
   =================================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav[hidden] {
  display: none;
}

/* 메뉴가 열릴 때 패널 자체로 포커스를 옮기므로(assets/js/nav.js),
   패널에 브라우저 기본 포커스 테두리가 그려지지 않게 한다.
   패널 안의 링크·버튼은 키보드로 이동할 때 각자의 포커스 표시를 그대로 쓴다. */
.mobile-nav:focus {
  outline: none;
}

body.nav-open {
  overflow: hidden;
}

/* 시안 Mobile_Menu > Component 6(1:144): 흰 바 + 은은한 그림자 */
.mobile-nav-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 80px;
  padding: 0 17px;
  background: var(--color-white);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* logo.png는 밝은색(#E0E0E0) 자산이라 흰 배경에서 보이지 않음.
   어두운 버전 엠블럼 파일이 준비되면 이 filter를 제거하고 교체할 것 */
.mobile-nav-head .brand-emblem {
  filter: invert(1);
}

.mobile-nav-head .brand-text {
  color: var(--color-navy);
}

/* 시안 1:159 — 15px SemiBold #232C50 / 21px ExtraBold #296FFF, 자간 -0.04em */
.mobile-nav-head .brand-line:not(.brand-line--accent) {
  /* 닫힌 헤더와 글자 크기·줄바꿈 동작이 같아야 두 상태의 위치가 일치한다.
     320px 같은 좁은 기기에서는 nowrap 이면 글자가 닫기 버튼 위로 넘치므로 줄바꿈을 허용한다. */
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.037em;
  color: var(--color-navy);
}

.mobile-nav-head .brand-line--accent strong {
  font-size: 21px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: var(--color-blue);
}

.nav-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-blue);
  cursor: pointer;
}

.mobile-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 시안 Rectangle 220~223(1:160~163): 100px 행, 배경 #F3F7FF, 상단에 얇은 구분 그림자
   라벨은 1:164~167 기준 23px SemiBold #232C50, 자간 -0.02em */
.mobile-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: #f3f7ff;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  text-align: center;
}

.mobile-nav li a[aria-current="page"] {
  color: var(--color-blue);
}

/* ===================================================
   자료실 (모바일) — 시안 Mobile_Menu(60:599)
   · Rectangle 224(60:621) 와 같은 100px 행에 "자료실"(60:632)
   · Rectangle 225(60:622): 154px, 배경 #F3F7FF 50%, 상단 구분 그림자
     그 안에 발전계획서(60:625) / 소견서(60:623) 두 줄 + Line 73(60:627)
   =================================================== */
.mnav-docs-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 0;
  background: #f3f7ff;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.mnav-docs-list {
  background: rgba(243, 247, 255, 0.5);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* 시안 60:625 · 60:623: 21.83px Medium #10234D, 자간 -0.4366/21.83 = -0.02em.
   행 높이는 154 / 2 = 77px */
.mobile-nav .mnav-docs-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 77px;
  background: none;
  box-shadow: none;
  font-size: 21.8px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #10234d;
}

/* 시안 Line 73(60:627): x 21, 너비 334(→ 오른쪽 여백 20), #E5EDFF 1px */
.mobile-nav .mnav-docs-list li + li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 21px;
  right: 20px;
  height: 1px;
  background: #e5edff;
}

/* 시안 Component 9·10: 21.83x20.27, 375px 기준 오른쪽 끝에서 55.7px */
.mobile-nav .mnav-docs-list .doc-dl {
  position: absolute;
  top: 50%;
  right: 55.7px;
  transform: translateY(-50%);
  width: 21.83px;
  height: 20.27px;
  color: #232c50;
}

@media (min-width: 835px) {
  .mobile-nav {
    display: none;
  }
}

/* ===================================================
   히어로
   =================================================== */
.hero {
  position: relative;
  width: 100%;
  height: calc(482px + 6px); /* 시안 image 1 482px + under_bar 6px */
  border-bottom: 6px solid var(--color-blue); /* 시안 under_bar 1580x6 */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch; /* 아래 2:1 스페이서로 세로 위치를 잡는다 */
  overflow: hidden;
}

/* 히어로(index / career / about): 텍스트 블록의 위 여백을 아래 여백의 2배로.
   .hero-text 를 히어로 높이(482px)만큼 늘리고 남는 공간을 2:1 로 나눈다.
   (텍스트 높이가 바뀌어도 비율이 자동으로 유지된다) */
.hero .hero-text,
.page-hero .hero-text {
  margin-top: 0;
  justify-content: flex-start;
}

.hero .hero-text::before,
.hero .hero-text::after,
.page-hero .hero-text::before,
.page-hero .hero-text::after {
  content: "";
  display: block;
  width: 100%;
}

.hero .hero-text::before,
.page-hero .hero-text::before {
  flex: 2 0 0;
}

.hero .hero-text::after,
.page-hero .hero-text::after {
  flex: 1 0 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  /* 텍스트 우측 가로 패딩 200px.
     PC 최소폭 835px에서도 태그라인(1줄 570px)이 들어가므로 고정값으로 둔다. */
  padding: 0 200px 0 4.3671%;
  display: flex;
  justify-content: flex-end;
}

.hero-text {
  /* 시안 copy_txt 폭은 501px이나, 태그라인을 36px로 키우면 한 줄에 570px이 필요해 넓힘 */
  max-width: 580px;
  /* 시안 copy_txt y=134~395, 히어로 482 → 중앙(110.5)보다 23.5px 아래.
     align-items:center 상태에서 margin-top 47px = 23.5px 하강 */
  margin-top: 47px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-headline {
  font-size: 60px; /* 히어로 높이가 482px 고정이므로 글자도 고정 */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
}

.hero-headline em {
  font-style: normal;
  font-weight: 800;
  /* 오른쪽 아래(#3e7dff) → 왼쪽 위(#ffffff) 로 밝아진다.
     CSS 각도는 '끝 색이 향하는 방향'이라 왼쪽 위 = 315deg */
  background: linear-gradient(315deg, #3e7dff 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-rule {
  width: 100%;
  max-width: 544px; /* 시안 비율 470/501 유지 */
  height: 0;
  margin: 32px 0 26px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-tagline {
  font-size: 36px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.hero-tagline-accent {
  color: #d1e0ff;
}

/* ===================================================
   About 이원우 (출마 선언 + 위기 + 10대 약속)
   =================================================== */
.about-index {
  max-width: var(--max-width);
  margin: 0 auto;
  /* 히어로 하단 바 ~ 첫 라인 간격을 라인 사이 간격(126px)과 동일하게.
     시안도 under_bar 하단 488 → Line 16 y=615로 127px */
  padding: 126px 40px 0;
}

/* 시안 main_v1 Group 658(1:246): 위/아래 포함 5줄, 모두 2px #232C50 (Line 8 에셋) */
.about-list {
  max-width: 1200px; /* 시안 Group 658 폭 */
  margin: 0 auto;
  border-top: 2px solid var(--color-navy);
}

.about-list li {
  border-bottom: 2px solid var(--color-navy);
}

.about-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 126px; /* 시안 구분선 간격 615/741/867/993/1119 */
  padding: 0 33px;   /* 시안 텍스트 x=223 - 프레임 x=190 */
  /* 시안 76px(컨테이너 1280px 이상). 그 아래는 (835px, 46px)-(1280px, 76px)를 잇는
     직선으로 줄여 가장 긴 라벨이 두 줄로 접히지 않게 한다 */
  font-size: clamp(34px, calc(6.742vw - 10.3px), 76px);
  letter-spacing: -0.05em; /* 시안 tracking -3.8px @76px */
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-navy);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.about-list a.is-light {
  background-color: var(--color-blue-light);
  color: var(--color-blue);
}

.about-list a:hover,
.about-list a:focus-visible {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

.about-arrow {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  flex-shrink: 0;
  color: var(--color-blue-light);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.about-list a:hover .about-arrow,
.about-list a:focus-visible .about-arrow {
  opacity: 1;
}

/* ===================================================
   정책 목록 (세부 정책 3x3 카드)
   =================================================== */
.policy-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  /* 시안: Group 658 하단선 y=1119 → 정책 타일 첫 행 y=1311 = 192px */
  padding: 192px 40px 80px;
}

.policy-grid-list {
  display: grid;
  grid-template-columns: repeat(3, 371px);
  justify-content: center;
  column-gap: 43.5px; /* 371*3 + 43.5*2 = 1200 (시안 폭) */
  row-gap: 50px;
}

.policy-grid-list a {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  width: 371px;
  height: 371px;
  padding: 46px;
  border-radius: 20px; /* 시안 main_v1 1:313 rounded-[20px] */
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 시안 main_v1 1:313 / 1:287 — 8칸 모두 텍스처 opacity 30%.
   card-texture.jpg 는 시안의 무늬 레이어(Rectangle) 원본을 2배로 내보낸 것(813x983).
   시안은 이 레이어를 406.398x491.4 크기로 카드(371x371) 좌상단 기준
   (-17.699, -60.2)에 놓고 카드 모양으로 마스크한다. 비율은 모바일과 동일. */
.policy-grid-list a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4.771%; /* -17.699 ÷ 371 */
  top: -16.226%; /* -60.2 ÷ 371 */
  width: 109.54%; /* 406.398 ÷ 371 */
  height: 132.45%; /* 491.4 ÷ 371 */
  background: url("../assets/images/card-texture.jpg") no-repeat left top / 100% 100%;
  opacity: 0.3;
  pointer-events: none;
}

.policy-grid-list li:nth-child(even) a {
  background-color: #f3f7ff;
  color: #004eee;
}

.policy-grid-list a:hover,
.policy-grid-list a:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(16, 35, 77, 0.3);
}

.policy-grid-list a.is-featured {
  background: linear-gradient(135deg, #3a63c8 0%, var(--color-navy-deep) 100%);
}

.policy-grid-list a.is-featured::before {
  content: none;
}

.policy-grid-list a.is-featured::after {
  content: "";
  position: absolute;
  right: -5.4%;
  bottom: 25.3%;
  width: 61.2%;
  height: 63.3%;
  background: url("../assets/images/logo.png") no-repeat center / contain;
  opacity: 0.2;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-list a,
  .about-arrow,
  .policy-grid-list a {
    transition: none;
  }
}

/* ===================================================
   내부 페이지 공통 (about / career / policy 상세)
   =================================================== */
.page-hero {
  position: relative;
  width: 100%;
  height: calc(482px + 6px); /* 시안 image 1 482px + under_bar 6px */
  border-bottom: 6px solid var(--color-blue); /* 시안 under_bar */
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch; /* 위 2:1 스페이서로 세로 위치를 잡는다 */
  overflow: hidden;
}

/* 히어로 아랫변 → 눈썹 라인 간격을 index.html(126px)과 동일하게.
   눈썹 글자를 20px 로 키우면 줄 상자가 18 → 24px 가 되어 선 중심이 3px 내려가므로
   위 패딩을 117 → 114px 로 줄여 126px 를 그대로 유지한다(career.html 과 동일한 계산). */
.page-eyebrow-row {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 114px 122px 0;
}

.page-eyebrow-row .eyebrow {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 20px;
  margin-bottom: 0;
}

/* 글자는 줄어들지 않게 고정한다. 고정하지 않으면 아래 선에 밀려 두 줄로 접힌다. */
.page-eyebrow-row .eyebrow > span {
  flex: 0 0 auto;
}

/* 선 길이는 시안대로 837px. 다만 0 0 으로 고정하면 폭이 좁을 때 줄지 못해
   가로 스크롤이 생기므로(1190px 이하에서 발생하던 문제), 축소만 허용한다.
   자리가 넉넉한 1229px 이상에서는 그대로 837px 이고 margin-left:auto 로 오른쪽에 붙는다. */
.page-eyebrow-row .eyebrow::after {
  content: "";
  flex: 0 1 837px;
  margin-left: auto;
  height: 1px;
  background: #d9d9d9;
}

.about-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 122px 80px 321px;
}

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

@media (max-width: 860px) {
  .page-eyebrow-row {
    padding: 40px 24px 0;
  }

  .page-eyebrow-row .eyebrow::after {
    flex: 1;
    margin-left: 0;
  }

  .about-content {
    padding: 40px 24px 80px;
  }
}

.eyebrow {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 12px;
}

.about-content > .eyebrow {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 32px;
}

.about-content > .eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d9d9d9;
}

.about-content h1,
.page-content h1 {
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.4;
  margin: 0 0 32px;
  color: var(--color-black); /* 시안 05 프레임(1:599) 기준 */
}

.about-content h1 em,
.page-content h1 em {
  font-style: normal;
  color: var(--color-blue);
}

.about-content p,
.page-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-black); /* 시안 05: 본문은 전부 #000 */
  margin: 0 0 20px;
}

.callout {
  background: #f6f8ff;
  border-radius: 12px;
  /* 글자와 박스 경계 사이 여백을 절반으로 (28/28/8 → 14/14/4) */
  padding: 14px 14px 4px;
  margin: 32px 0;
}

.callout h2 {
  font-size: 20px;
  color: var(--color-navy);
  margin: 0 0 16px;
}

.about-content .callout {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* 시안 05 (Rectangle 140/143/144 = 1:602 · 1:605 · 1:618 · 1:608):
   글자를 감싸는 알약이 아니라 본문 폭 전체를 덮는 각진 띠.
   bg #F6F8FF, radius 0, 폭 866 = 본문 833 + 좌 29 + 우 4,
   높이 50~60 ≈ 제목 글자 크기의 2배(28px → 57). */
.about-content .callout h2 {
  position: relative;
  z-index: 0;
  display: block;
  background: none;
  border-radius: 0;
  /* 아래 5px는 띠 밖으로 빠지는 여백이므로 margin-bottom 을 16 → 11 로 상계.
     띠 길이 870 → 833px: 줄어드는 37px 을 전부 오른쪽에서 뺀다.
     왼쪽 끝은 원래대로 본문보다 29px 왼쪽(우 -4 → +33),
     padding-left 29px 로 글자는 본문 컬럼과 같은 x 에 그대로 둔다.
     세로 값(위 0.85em / 아래 0.25em)은 글자 크기에 비례하도록 em 으로 둔다. */
  font-size: 26px;
  margin: 0 33px calc(16px - 0.25em) -29px;
  padding: 0.85em 4px 0 29px;
  line-height: 1.43; /* 시안 28px / 40px */
  color: var(--color-black);
}

/* 시안은 글자가 띠 가운데가 아니라 아래쪽에 붙는다.
   28px 기준 띠 아랫변 = 베이스라인 + 4.95px, 윗변 = 어센더 위 28.8px
   (하나 1333~1383 / 둘 1761~1821 / 셋 2319~2376 / 넷 2834~2894,
    글줄 상단은 각각 1350 · 1788 · 2343 · 2861 → 아랫변은 모두 글줄 상단 +33) */
.about-content .callout h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0.25em; /* 글자 크기에 비례 (26px → 6.5px) */
  left: 0;
  background: #f6f8ff;
}

/* 모바일은 좌우 여백이 24px뿐이라 시안의 좌 29px 확장을 12px로 줄임(넘침 방지) */
@media (max-width: 860px) {
  .about-content .callout h2 {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 시안 05: 소제목 안 핵심 구절만 파랑 (1:603 / 1:606 / 1:619 / 1:609) */
.about-content .callout h2 em {
  font-style: normal;
  color: var(--color-blue);
}

.about-closing {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.9;
  color: var(--color-black); /* 시안 05(1:610) */
  margin: 40px 0;
}

/* 맺음 문단("…서울대의 새로운 시간을 열겠습니다.")과 서명 사이 간격 60px.
   .about-content p (margin 0 0 20px)가 .about-closing 보다 우선순위가 높아
   기본값이 20px로 덮이므로 특정도를 맞춰 명시 */
.about-content .about-closing {
  margin-bottom: 60px;
}

.about-sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-weight: 700;
  color: var(--color-black); /* about.html·statement.html 서명 문구 통일 */
}

/* statement.html: 마지막 문단과 서명 사이 간격을 about.html(60px)과 통일.
   (.policy-section 의 margin-bottom 40px 와 상쇄되어 최종 60px) */
.policy-content .about-sign {
  margin-top: 60px;
}

.about-sign-img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* 본문 하단 지원자 서명 — Figma "Group 172"
   (세로 라인 18px + 12px 간격 + 텍스트, 텍스트 폭 373px ≒ 19px) */
.page-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 60px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
}

.page-sign::before {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--color-navy);
}

@media (max-width: 834px) {
  .page-sign {
    font-size: 16px;
    margin-top: 40px;
  }
}

/* 본문 중간 사진 — Figma 11대_9의 528×352 이미지(104:1619).
   본문 컬럼(780px) 오른쪽 끝에 붙고, 바로 아래에 지원자 서명이 이어진다. */
.page-photo {
  width: 67.6923%; /* 528 / 780 */
  margin: 64px 0 64px auto;
}

.page-photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 834px) {
  .page-photo {
    width: 100%;
    margin: 40px 0;
  }
}

/* ===================================================
   공약 영상 페이지 — Figma Page 2 시안으로 전면 교체 (2026-08-24)
   · main_공약 영상 full(66:594): 1580 프레임, 본문 폭 1200(x190~1390)
     제목 57px EB #296FFF(헤더 아래 111px) / 부제 27px M #000(제목 아래 15px)
     카드 370x550 r12, 열 간 45, 행 간 40, 그리드는 부제 아래 56px
     카드 글: 분류 20.578px R #444(카드 아래 25px) · 제목 24.21px EB #444(+3.8px)
   · main_공약 영상 click(66:709): 오버레이 + 모달 1200x866 #F6F8FF r12
     텍스트 x150 y200(분류 25px M) / 제목 47px EB(시안 #4B6EFE → 통일 #296FFF)
     제목 아래 50px 에 30x2 #D9D9D9 선 / 영상 420x747(9:16) r10.7 (x620 y60)
     닫기: 모달 위 20px, 오른쪽 끝 정렬, 흰 원 50 + X(34, #444)
   =================================================== */
/* 푸터 margin-top 110px 구간이 흰 띠로 보이지 않도록 페이지 바탕을 시안 배경색으로 */
body.video-page {
  background: #f6f8ff;
}

.video-grid-head {
  max-width: 1280px; /* 본문 1200 + 좌우 여백 40 */
  margin: 0 auto;
  padding: 111px 40px 0;
}

.video-grid-head h1 {
  margin: 0;
  font-size: 57px;
  font-weight: 800;
  line-height: 68px; /* 시안 텍스트박스 높이 — 폰트 대체 시에도 간격 고정 */
  letter-spacing: -0.02em;
  color: var(--color-blue);
}

.video-grid-sub {
  margin: 15px 0 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 41px;
  letter-spacing: -0.02em;
  color: #000;
}

/* 부제의 줄바꿈은 모바일 시안에만 있다 */
.video-grid-sub .m-br {
  display: none;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 45px;
  row-gap: 40px;
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 40px 130px;
  list-style: none;
}

.video-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.video-card-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 370.37 / 550.25; /* 시안 카드 비율 (모바일 161.4x240 과 동일 비율) */
  border-radius: 12px;
  overflow: hidden;
  background: #000; /* 시안의 검은 박스 — 썸네일 로딩 전·실패 시 그대로 보인다 */
}

.video-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-cat {
  display: block;
  margin: 25px 0 0;
  font-size: 20.5px;
  font-weight: 400;
  line-height: 32.3px;
  letter-spacing: -0.02em;
  color: #444;
}

.video-card-title {
  display: block;
  margin: 4px 0 0;
  font-size: 24.2px;
  font-weight: 800;
  line-height: 32.45px;
  letter-spacing: -0.02em;
  color: #444;
}

/* ---------- 영상 모달 ---------- */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  /* 시안 오버레이(Rectangle 172)의 정확한 투명도는 자산 접근 제한으로 확인 불가 —
     스크린샷 대조로 검정 50% 로 맞춤 */
  background: rgba(0, 0, 0, 0.5);
}

body.video-modal-open {
  overflow: hidden;
}

/* 시안에서 헤더는 오버레이에 가려지지 않는다 */
body.video-modal-open .site-header {
  z-index: 60;
}

.video-modal {
  position: fixed;
  z-index: 70;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 25px)); /* 닫기 버튼(위 70px)까지 포함해 시각적 중앙 */
  width: min(1200px, calc(100vw - 48px));
}

.video-modal[hidden],
.video-modal-overlay[hidden] {
  display: none;
}

.video-modal-close {
  position: absolute;
  right: 0;
  top: -70px; /* 버튼 50 + 모달과의 간격 20 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-white);
  color: #444;
  cursor: pointer;
}

.video-modal-box {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  background: #f6f8ff;
  border-radius: 12px;
  padding: 60px 160px 59px 150px;
}

.video-modal-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 140px; /* 시안: 분류 글줄이 모달 상단에서 200 (패딩 60 제외) */
}

.video-modal-cat {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 36.6px;
  letter-spacing: -0.02em;
  color: #000;
}

.video-modal-title {
  margin: 10px 0 0;
  max-width: 410px;
  font-size: 47px;
  font-weight: 800;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: var(--color-blue); /* 시안 #4B6EFE → 사이트 강조색 #296FFF 로 통일(기존 결정) */
}

/* 시안 Line 15: 제목 아래 50px, 30x2 #D9D9D9 */
.video-modal-title::after {
  content: "";
  display: block;
  width: 30px;
  border-top: 2px solid #d9d9d9;
  margin-top: 50px;
}

.video-modal-embed {
  flex: 0 0 auto;
  height: min(747px, calc(100svh - 200px)); /* 시안 747, 작은 화면에서는 뷰포트에 맞춤 */
  aspect-ratio: 9 / 16; /* 시안 420x747 = 9:16 */
  border-radius: 10.7px;
  overflow: hidden;
  background: #000;
}

.video-modal-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 모바일 헤더 X — PC에서는 숨긴다 */
.video-close {
  display: none;
}

/* ===================================================
   약력·경력 페이지
   =================================================== */
/* 히어로 아랫변 → 눈썹 라인 간격을 index.html(126px)과 동일하게.
   눈썹 글자를 20px 로 키우면 줄 상자가 18 → 24px 가 되어 선 중심이 3px 내려가므로
   위 패딩을 117 → 114px 로 줄여 126px 를 그대로 유지한다. */
.career-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 114px 122px 80px;
}

.career-content > .eyebrow {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 20px;
  /* 아래 제목(교육·연구·사회공헌 / 서울대학교 행정)과의 간격 1.5배 (32 → 48) */
  margin-bottom: 48px;
}

.career-content > .eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d9d9d9;
}

.career-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.career-col > section {
  margin-bottom: 48px;
}

.career-col > section:has(+ section) {
  margin-bottom: 24px;
}

.career-col > section + section {
  border-top: 1px solid #e5e5e5;
  padding-top: 24px;
}

.career-col h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 26px;
  color: var(--color-blue);
  margin: 0 0 20px;
}

/* 시안 04(1:711 / 1:713): 제목 40px #296FFF 옆에 21px Bold #000 으로 붙는다.
   연도 라벨처럼 오른쪽 끝으로 밀지 않는다(margin-left: auto 없음) */
.career-count {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-black);
  white-space: nowrap;
}

.career-entry {
  margin: 24px 0;
}

/* 시안 04: 오른쪽(서울대학교 행정) 열의 직책 그룹 간격은 모두 60px
   (Group 736 하단 1548 → Group 737 상단 1608, 이하 2136→2196 · 2482→2542 ·
    2623→2683 · 2797→2857 · 3079→3139 — 전부 60) */
.career-col--admin .career-entry + .career-entry {
  margin-top: 60px;
}

/* 시안 04: 왼쪽(교육·연구·사회공헌) 열의 블록 간격은 모두 40px
   (Group 523 하단 919 → Group 276 상단 959, 1219→1259, 1549→1589 — 전부 40) */
.career-col:not(.career-col--admin) .career-table + .callout,
.career-col:not(.career-col--admin) .callout + .career-entry,
.career-col:not(.career-col--admin) .career-entry + .career-entry,
.career-col:not(.career-col--admin) .career-entry + .callout {
  margin-top: 40px;
}

.career-entry h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

/* 시안 04: 오른쪽(서울대학교 행정) 열의 직책명은 파란색.
   왼쪽(교육·연구·사회공헌) 열의 항목명은 남색 그대로 */
.career-col--admin .career-entry h3 {
  color: var(--color-blue);
}

.career-date {
  font-weight: 400;
  color: var(--color-gray);
  font-size: 14px;
}

.career-entry h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 16px 0 6px;
}

.career-entry ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.career-entry li {
  list-style: none;
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.career-entry li time {
  color: var(--color-gray);
  font-size: 13px;
  margin-left: 6px;
}

.career-dated-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.career-dated-list li time {
  margin-left: 0;
  flex-shrink: 0;
}

.footnote {
  font-size: 12px;
  color: var(--color-gray);
  margin: 0;
}

.career-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}

.career-table th,
.career-table td {
  text-align: left;
  padding: 10px 0;
  font-size: 16px;
}

.career-table th {
  font-weight: 700;
  color: var(--color-navy);
}

.career-table td {
  color: var(--color-gray);
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
}

.career-col .callout {
  border-radius: 0;
  border-left: 4px solid var(--color-blue);
  /* 글자와 박스 경계 사이 여백을 절반으로 (24/28 → 12/14) */
  padding: 12px 14px;
}

/* 시안 04: 회색 박스 밖의 소제목 블록에는 왼쪽 세로선.
   Line 66(1:755) / Line 67(1:773) / Line 69(1:782) / Line 70(1:791)
   — 모두 stroke #D9D9D9, 두께 1px, x=847(회색 박스 좌변과 동일선).
   본문 시작 x=869로 회색 박스 안 제목과 같은 선에 맞춤(=4+28=32px). */
.career-note {
  border-left: 1px solid #d9d9d9;
  padding-left: 31px;
  margin: 16px 0 8px;
}

/* 서울대학교 행정 열: 직책명 → 콜아웃 → 세부 항목이 한 세트이므로
   세트 안쪽 위·아래 간격을 절반으로 줄인다 (32px → 16px, 요청). */
.career-col--admin .career-entry > .callout {
  margin-top: 16px;
  margin-bottom: 0;
}

/* 콜아웃의 파란 세로선과 아래 회색 세로선 사이가 끊겨 보이던 것을 잇는다(요청).
   바깥 여백을 0 으로 두어 두 테두리를 맞붙이고, 글자와의 간격 16px 은
   안쪽 여백(padding-top)으로 확보해 선이 그 구간까지 그려지게 한다. */
.career-col--admin .career-entry > .callout + .career-note {
  margin-top: 0;
  padding-top: 16px;
}

.career-note h4:first-child {
  margin-top: 0;
}

.career-note > :last-child {
  margin-bottom: 0;
}

.career-col .callout h3,
.career-col .callout h4 {
  font-size: 16px;
  color: var(--color-navy);
  margin: 0 0 10px;
}

.career-col .callout p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.career-col .callout ul {
  margin: 0;
  padding-left: 18px;
}

.career-col .callout li {
  list-style: none;
  position: relative;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

@media (max-width: 860px) {
  .career-content {
    padding: 40px 40px 80px;
  }

  .career-columns {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===================================================
   정책 상세 페이지 공통 (sidebar + content)
   =================================================== */
.site-header.is-solid {
  position: relative;
  background: var(--color-blue);
}

.policy-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 122px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

.policy-sidebar {
  position: sticky;
  top: 24px;
  border-top: 1px solid #e2e2e2;
  padding-top: 24px;
}

.policy-sidebar h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--color-navy);
}

.policy-sidebar .sub {
  font-size: 14px;
  color: var(--color-gray);
  margin: 0 0 20px;
}

.policy-sidebar ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: policy-count;
}

.policy-sidebar li {
  border-top: 1px solid #e5e5e5;
}

.policy-sidebar li:first-child {
  border-top: none;
}

.policy-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: #222;
  line-height: 1.4;
  transition: background-color 0.2s ease;
}

.policy-sidebar a .num {
  color: var(--color-blue);
  font-weight: 700;
  flex-shrink: 0;
}

.policy-sidebar a.is-active {
  background: #eef3ff;
}

.policy-content {
  border-top: 1px solid #e2e2e2;
  padding-top: 24px;
  min-width: 0;
}

.policy-content .eyebrow {
  font-size: 15px;
}

.policy-content h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.4;
  color: var(--color-navy);
  margin: 4px 0 20px;
}

.policy-content h1 em {
  font-style: normal;
  color: var(--color-blue);
}

.policy-content.h1-black h1 {
  color: #000;
}

/* 시안 11대_5~12: h1 바로 아래 부제 (프레임 y=305, x=610, 폭 327)
   메타데이터에 타입 스타일이 없어 폭/글자수 비율(327px ÷ 약 16.5em ≈ 20px)로 크기를 추정함 */
.page-subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-navy);
  margin: -8px 0 20px;
}

.policy-content.h1-black .page-subtitle {
  color: #000;
}

.policy-content.h1-black .pull-quote {
  color: #000;
}

.roadmap-principle {
  margin: 32px 0 40px;
}

.roadmap-principle h2 {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0 0 12px;
}

.roadmap-principle p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.policy-section .outcome-quote {
  background: #eef3ff;
  border-left: 4px solid var(--color-blue);
  padding: 20px 24px;
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  color: #000;
}

.share-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 24px;
}

.share-row a {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}

.share-row a:hover {
  background: #ececec;
}

.share-copy-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
  animation: share-tip-fade 1.6s ease forwards;
}

.share-copy-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-navy);
}

@keyframes share-tip-fade {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.policy-content .lead {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 0 0 20px;
}

.policy-section {
  margin: 40px 0;
}

.policy-section h2 {
  font-size: 20px;
  color: var(--color-navy);
  margin: 0 0 14px;
}

/* 시안 11대_1(1:551 · 1:538 · 1:556 · 1:534 · 1:560 · 1:549):
   본문 기본 글자색은 전부 #000, 강조 구절만 #296FFF */
.policy-content.is-black-text h1,
.policy-content.is-black-text .policy-section h2,
.policy-content.is-black-text .lead,
.policy-content.is-black-text .pull-quote {
  color: var(--color-black);
}

.policy-section h2 em {
  font-style: normal;
  color: var(--color-blue);
}

/* 위기 카드 (crisis.html) */
/* 시안 11대_2 Group 477(1:439) — 박스 781x960 안에 5개 항목.
   Rectangle 139(1:440): bg #F7F7F7, radius 10px
   각 항목: 제목 x=701(박스 좌변에서 91), 본문 폭 653(우 인셋 37),
            Line 47~50: 박스 좌변(x=610)에서 시작하는 길이 77 / 굵기 2 / #296FFF 대시
   항목 간 구분선 없음, 항목 간격 40, 박스 상하 패딩 40.
   가로 값은 781 기준 비율로 환산해 폭이 달라져도 시안 비례를 유지한다. */
.crisis-box {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 5.121% 0; /* 40 ÷ 781 */
  margin: 24px 0;
  container-type: inline-size;
}

.crisis-item {
  position: relative;
  padding: 0 4.737% 0 11.652%; /* 우 37 / 좌 91 ÷ 781 */
}

/* 시안에는 항목 사이 구분선이 없고 40px 간격만 있다 */
.crisis-item + .crisis-item {
  margin-top: 5.121%;
}

.crisis-item h2 {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.938; /* 시안 25.8px / 50px */
  letter-spacing: -0.04em; /* 시안 -1.032px ÷ 25.8 */
  color: var(--color-black);
  margin: 0;
}

/* 대시는 항목이 아니라 박스 좌변에서 시작하므로 .crisis-item 기준 절대배치 */
.crisis-item h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.969em - 1px); /* 제목 줄상자(1.938em)의 세로 중앙 */
  width: 9.859%; /* 77 ÷ 781 */
  height: 2px;
  background: var(--color-blue);
}

.crisis-item .crisis-kw {
  color: var(--color-blue);
}

.crisis-item p {
  font-size: 15px;
  line-height: 1.8; /* 시안 20px / 36px */
  letter-spacing: -0.04em;
  color: var(--color-black);
  margin: 0;
}

/* 시안(1:444)은 본문 폭 653px에서 양끝맞춤(text-justify).
   본문 컬럼이 좁아지면 어절 사이가 심하게 벌어지므로 폭이 충분할 때만 적용 */
@container (min-width: 620px) {
  .crisis-item p {
    text-align: justify;
  }
}

/* 모바일 전용 요약 텍스트 — PC는 .desktop-only, 모바일은 .mobile-only 노출 */
.mobile-only {
  display: none;
}

@media (max-width: 834px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

/* 체크리스트 (crisis.html 시스템 운영 철학) */
.policy-section ul.checklist {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.policy-section ul.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  list-style: none;
  margin-bottom: 0;
}

.checklist .check-icon {
  color: var(--color-blue);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 10대 약속 리스트 (promises.html) */
/* ===================================================
   10대 약속 (promises.html) — Figma 11대_3 "Group 724"(1:358)
   · 항목마다 상단 가로선 + 좌측 42px 세로선, 좌상단 라운드 35.33 (Rectangle 5, stroke #000 1px)
   · 번호 #296FFF 29px / 제목 23px Bold(강조 시안 #4B6EFE → #296FFF 로 통일) / 본문 19px·행간 32
   · 좌표: 번호 x=37, 제목 x=88, 본문 x=37 w=743 (항목 폭 780 기준)
   · 본문 컬럼이 780→708로 좁아지므로 글자 크기는 0.908배로 환산
   =================================================== */
.promise-box {
  margin: 24px 0 0;
}

.promise-item {
  position: relative;
  padding: 20px 0 0;
  margin-bottom: 54px;
}

.promise-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 38px;
  border-top: 1px solid var(--color-black);
  border-left: 1px solid var(--color-black);
  border-top-left-radius: 32px;
  pointer-events: none;
}

.promise-num {
  position: absolute;
  left: 4.744%;  /* 37 / 780 */
  /* 베이스라인만 맞추면(top:20px) 눈에는 여전히 어긋나 보인다.
     Wanted Sans 에서 숫자는 베이스라인 아래로 0.36px 밖에 안 내려가는데
     한글은 1.92px 내려가기 때문(26px/21px 기준, 실측). 그래서 글자 하단이 맞도록
     그 차이 1.56px 만큼 숫자를 더 내린다: 20 + 1.56 = 21.56px */
  top: 21.56px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-blue);
}

.promise-title {
  margin: 0 0 10px;
  padding-left: 11.282%; /* 88 / 780 */
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.promise-title em {
  font-style: normal;
  /* 시안은 #4B6EFE 였으나 사이트 포인트 컬러로 통일 (요청) */
  color: var(--color-blue);
}

.promise-body {
  margin: 0;
  padding-left: 4.744%;
  font-size: 17px;
  line-height: 29px;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

/* 이 10대 약속은 무엇이 다른가 — Figma "Group 352"(1:423) */
.promise-diff {
  margin-top: 72px;
}

.policy-content .promise-badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 16px;
  background: var(--color-blue);
  color: #f3f7ff;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.promise-lead {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 47px;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.promise-lead em {
  font-style: normal;
  color: var(--color-blue);
}

/* 하단 인물 사진 + 지원자 서명 (1:433 / 1:427) */
.promise-photo {
  margin: 78px 0 0;
}

.promise-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 위기 페이지 하단 인터뷰 사진 — Figma 11대_2 (1:525 / 1:526)
   638 / 780 = 81.79%, 본문 컬럼 왼쪽 정렬 */
.crisis-photo {
  width: 81.79%;
  margin: 96px 0 0;
}

.crisis-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.promise-photo figcaption,
.crisis-photo figcaption {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-left: 9px;   /* 세로바(4px) 기준 텍스트까지 13px */
  border-left: 4px solid var(--color-blue);
  font-size: 14px;
  color: var(--color-gray);
}

@media (max-width: 834px) {
  /* 데스크톱은 번호를 절대배치(left 4.744%)하고 제목에 padding-left 11.282%를 줘서
     비켜 가지만, 모바일에서는 그 %가 각각 16px / 39px 로 줄어 번호(22px, 약 27px 폭)와
     제목이 겹친다. 모바일에서는 그리드로 두 칸을 나눠 글꼴 폭과 무관하게 겹치지 않게 한다. */
  .promise-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: baseline;
    padding: 20px 0 0 4.744%;
    margin-bottom: 36px;
  }

  .promise-num {
    /* PC 와 같은 이유로 글자 하단을 맞춘다. 22px 숫자 0.30px / 18px 한글 1.64px → 1.34px */
    position: relative;
    top: 1.34px;
    font-size: 22px;
  }

  .promise-title {
    padding-left: 0;
    font-size: 18px;
  }

  .promise-body {
    grid-column: 1 / -1;
    padding-left: 0;
    font-size: 15px;
    line-height: 1.75;
  }

  .policy-content .promise-badge {
    font-size: 17px;
  }

  .promise-lead {
    font-size: 21px;
    line-height: 1.5;
  }

  .promise-photo {
    margin-top: 48px;
  }

  .crisis-photo {
    width: 100%;
    margin-top: 56px;
  }
}

.policy-section .callout p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  color: var(--color-navy);
  font-weight: 600;
}

.policy-section ul {
  margin: 18px 0 0;
  padding-left: 20px;
}

.policy-section li {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  list-style: none;
  margin-bottom: 8px;
}

/* 점을 붙일 목록만 position 기준을 잡는다.
   .checklist(체크 아이콘 목록, crisis.html)는 원래 마커가 없던 목록이라 제외한다. */
.policy-section ul:not(.checklist) > li {
  position: relative;
}

/* 글머리 점 — 크기 67%, 텍스트 세로 중앙 정렬.
   ::marker 의 font-size 만 줄이면 점이 아래로 내려간다(마커는 베이스라인에 붙어 있고
   글자 크기를 줄이면 그만큼 중심이 내려가기 때문). 크롬은 ::marker 에 vertical-align 을
   적용하지 않고 line-height 로도 위치가 움직이지 않는 것을 실제 브라우저에서 확인했다.
   그래서 기본 마커를 끄고 ::before 로 같은 자리에 점을 직접 그린다.

   실측값(크롬, font-size 400px 로 확대해 그리드 위에서 측정):
   - 크롬 기본 disc 지름 = 0.328em  → 67% = 0.22em
   - 기본 마커 중심 x = 콘텐츠 왼쪽 끝에서 0.3275em 왼쪽
     → 박스 left = -(0.3275 + 0.22/2) = -0.4375em (가로 위치는 지금과 동일)
   - 글자 잉크 세로 중앙 = line-height 의 절반 (한글 기준 오차 0.05px 미만)
     → top = line-height/2, translateY(-50%) */
.policy-section ul:not(.checklist) > li::before,
.career-entry li::before,
.career-col .callout li::before {
  content: "";
  position: absolute;
  left: -0.4375em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

/* line-height 1.8 */
.policy-section ul:not(.checklist) > li::before {
  top: 0.9em;
}

/* line-height 1.7 */
.career-entry li::before,
.career-col .callout li::before {
  top: 0.85em;
}

.policy-section h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 28px 0 12px;
}

/* 현실 진단·핵심 과제 접기/펼치기 토글 */
.diagnosis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 10px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #f6f6f6;
  color: #000;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.diagnosis-toggle:hover {
  background: #ededed;
  border-color: #ccc;
}

.diagnosis-toggle-icon {
  flex-shrink: 0;
  color: #777;
  transition: transform 0.2s ease;
}

.diagnosis-toggle[aria-expanded="true"] .diagnosis-toggle-icon {
  transform: rotate(180deg);
}

.diagnosis-panel {
  margin-top: 0;
}

/* 큰 타이포 스타일 (policy-education.html 등) */
.policy-content.is-lg-type .lead {
  font-size: 16px;
  line-height: 1.8;
  color: #000;
}

.policy-content.is-lg-type .edu-stanza {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 1.8;
  margin: 28px 0;
}

.policy-content.is-lg-type .policy-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
  margin: 0 0 14px;
}

.policy-content.is-lg-type .policy-section h2 em {
  font-style: normal;
  color: var(--color-blue);
}

/* Figma "Group 338"(Rectangle 126 + 본문) 콜아웃 박스.
   roadmap.html은 is-lg-type이 아니어서 기본 .callout으로 떨어지던 것을
   다른 정책 페이지와 동일한 박스로 통일 (2026-08-19) */
.policy-content.is-lg-type .policy-section .callout,
.policy-content.h1-black .policy-section .callout {
  background: #eef3ff;
  border-radius: 0;
  border-left: 4px solid var(--color-blue);
  /* 글자와 박스 경계 사이 여백을 절반으로 (24/28 → 12/14) */
  padding: 12px 14px;
  margin: 20px 0 24px;
}

.policy-content.is-lg-type .policy-section .callout p,
.policy-content.h1-black .policy-section .callout p {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 600;
  color: #000;
}

.policy-content.is-lg-type .policy-section .callout p em,
.policy-content.h1-black .policy-section .callout p em {
  font-style: normal;
  color: var(--color-blue);
}

.policy-content.is-lg-type .policy-section h3 em {
  font-style: normal;
  color: var(--color-blue);
}

.policy-content.is-lg-type .policy-section li {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.policy-content.is-lg-type .pull-quote {
  color: #000;
}

.policy-content.is-lg-type .policy-section .subsection-box {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 28px 32px;
  margin: 24px 0 0;
}

/* 첫/마지막 자식의 바깥 여백을 없애 박스 상·하 간격을 28px로 동일하게 유지 */
.policy-content.is-lg-type .policy-section .subsection-box > *:first-child {
  margin-top: 0;
}

.policy-content.is-lg-type .policy-section .subsection-box > *:last-child,
.policy-content.is-lg-type .policy-section .subsection-box > ul:last-child > li:last-child {
  margin-bottom: 0;
}

.policy-content.is-lg-type .policy-section .subsection-box table {
  margin-bottom: 0;
}

.policy-content.is-lg-type .policy-section .subsection-box .dash-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  margin: 12px 0 20px;
}

.policy-content.is-lg-type .policy-section .subsection-box .dash-lead::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--color-blue);
}

/* ---------------------------------------------------
   시안 11대_11 캠퍼스 블록 (Group 350 1:1717 등 6개)
   Rectangle 126(1:1718): #F7F7F7 / radius 10 / 780x484
   제목  1:1722  x=650  → 박스 좌변 +40    (5.128%)
   대시  1:1725  x=610  → 박스 좌변 +0, 길이 28.385(3.639%), 2px #296FFF
   리드  1:1724  x=647.85 → +37.85(4.853%), 폭 700.154(우 인셋 42 = 5.385%)
                  Wanted Sans SemiBold, line-height 30/21, 양끝맞춤
   본문  1:1720  ul x=640, li margin-inline-start 30 → 글자 +60 (7.692%),
                  폭 721(우 인셋 29 = 3.718%)
   → 대시가 박스 좌변에서 시작하므로 박스의 가로 패딩을 0으로 두고
     각 요소가 시안 비율만큼 들여쓴다.
   --------------------------------------------------- */
.policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) {
  padding-left: 0;
  padding-right: 0;
  container-type: inline-size;
}

.policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) .campus-name {
  margin-left: 5.128%; /* 40 ÷ 780 */
}

.policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) .dash-lead {
  position: relative;
  display: block;
  padding: 0 5.385% 0 4.853%; /* 우 42 / 좌 37.85 ÷ 780 */
  margin: 6px 0 22px;
  font-weight: 600; /* 시안 SemiBold */
  line-height: 1.43; /* 시안 21px / 30px */
  letter-spacing: -0.04em;
}

/* 시안(1:1724)은 폭 700px에서 양끝맞춤. 좁은 폭에서는 어절이 벌어지므로 폭이 충분할 때만 */
@container (min-width: 620px) {
  .policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) .dash-lead {
    text-align: justify;
  }
}

.policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) .dash-lead::before {
  position: absolute;
  left: 0;
  top: calc(0.715em - 1px); /* 리드 첫 줄상자(1.43em)의 세로 중앙 */
  width: 3.639%; /* 28.385 ÷ 780 */
}

.policy-content.is-lg-type .policy-section .subsection-box:has(.campus-name) ul {
  padding-left: 7.692%; /* 60 ÷ 780 */
  padding-right: 3.718%; /* 29 ÷ 780 */
}

.policy-content.is-lg-type .policy-section .summary-panel {
  background: #f6f8ff;
  border-radius: 10px;
  padding: 28px 32px 4px;
}

.policy-content.is-lg-type .policy-section .summary-panel h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-blue);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d7deef;
}

.policy-content.is-lg-type .policy-section .summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}

.policy-content.is-lg-type .policy-section .summary-table th,
.policy-content.is-lg-type .policy-section .summary-table td {
  text-align: left;
  padding: 16px 12px;
  border: none;
  border-bottom: 1px solid #d7deef;
}

.policy-content.is-lg-type .policy-section .summary-table thead th {
  background: var(--color-white);
  color: #000;
  font-weight: 700;
}

.policy-content.is-lg-type .policy-section .summary-table tbody td:first-child {
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}

.policy-content.is-lg-type .policy-section .summary-table tbody td:last-child {
  color: #333;
  font-weight: 400;
}

.policy-content.is-lg-type .policy-section .summary-table tbody tr:last-child th,
.policy-content.is-lg-type .policy-section .summary-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.data-table th,
.data-table td {
  border: 1px solid #e3e7fb;
  padding: 10px 12px;
  text-align: center;
}

.data-table thead th {
  background: #f6f8ff;
  color: var(--color-navy);
}

.data-table .total-row th,
.data-table .total-row td {
  font-weight: 700;
}

/* ===================================================
   복지 페이지 "로드맵" 표 — Figma 11대_7 "Group 582"(104:1098)
   · 표 위에 "로드맵" 제목 (104:1131)
   · 머리글 밴드 #f6f8ff, 높이 55 (104:1126)
   · 세로 괘선 없이 가로 괘선만 (Line 40~50)
   · 두 열 모두 왼쪽 정렬, 표 좌측에서 61px 들여쓰기 (목표 x=669, 추진 시점 x=980)
   =================================================== */
.roadmap-table {
  table-layout: fixed;
}

.roadmap-table caption {
  caption-side: top;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.04em; /* 시안 tracking -0.8px @20px */
  color: var(--color-navy);
  padding: 0 0 10px 0.9%; /* 시안 로드맵 x=615, 표 좌측 608 → 7px */
}

.roadmap-col-goal {
  width: 40%; /* 시안 col1 608~919 / 780 */
}

.roadmap-table th,
.roadmap-table td {
  border: none;
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  padding: 14px 12px 14px 7.82%; /* 61 / 780 */
}

.roadmap-table thead th {
  border-top: 2px solid #d9d9d9; /* 시안 Line 40만 stroke-width 2 */
  background: #f6f8ff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-black);
  /* 행 높이는 본문 행과 동일하게 (padding 상속, 고정 height 없음) */
}

@media (max-width: 834px) {
  .roadmap-table th,
  .roadmap-table td {
    padding-left: 16px;
  }

  .roadmap-table caption {
    font-size: 17px;
  }
}

/* ===================================================
   재정 페이지 하단 표 2종 — Figma 11대_8 "Group 730"(104:1491)
   · 시안에서 두 표가 좌우로 나란히 배치됨 (555px + 14px + 211px = 780px)
   · 세로 괘선 없이 가로 괘선만, rowspan 라벨 셀에만 세로 구분선
   · 머리글 배경: 좌 #f6f8ff(104:1493) / 우 #b8ccff(104:1496)
   · 합계 행 배경: 좌 #d9d9d9(104:1494) / 우 #cccccc(104:1495)
   =================================================== */
.finance-tables {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 20px 0;
}

.finance-tables .fin-table {
  margin: 0;
  font-size: 13px;
  table-layout: fixed;
}

/* 열 너비 — 시안 좌표 기준
   표1: 라벨 54 + 131 + 숫자 5칸 × 74 = 555
   표2: 129 + 82 = 211 */
.finance-tables .fin-col-a {
  width: 9.73%;
}

.finance-tables .fin-col-b {
  width: 23.6%;
}

.finance-tables .fin-col-name {
  width: 61.14%;
}

.finance-tables .fin-table--income thead th:not(:first-child) {
  white-space: nowrap;
}

.finance-tables .fin-table--budget {
  font-size: 12px;
}

.finance-tables .fin-table--income {
  flex: 0 0 71.1538%; /* 555 / 780 */
}

.finance-tables .fin-table--budget {
  flex: 0 0 27.0513%; /* 211 / 780 */
}

.finance-tables .fin-table th,
.finance-tables .fin-table td {
  border: none;
  border-bottom: 1px solid #d9d9d9;
  padding: 10px 12px;
}

.finance-tables .fin-table thead th {
  border-top: 2px solid #d9d9d9; /* 시안 Line 40만 stroke-width 2 */
  padding: 16px 12px;
  color: var(--color-navy);
}

.finance-tables .fin-table--income thead th {
  background: #f6f8ff;
}

.finance-tables .fin-table--budget thead th {
  background: #b8ccff;
}

.finance-tables .fin-table--income .total-row td {
  background: #d9d9d9;
}

.finance-tables .fin-table--budget .total-row td {
  background: #cccccc;
}

/* 라벨 열은 왼쪽 정렬(시안 x=636 → 24px), 숫자 열은 가운데 정렬 */
.finance-tables .fin-table thead th:first-child,
.finance-tables .fin-table tbody td:first-child:not(.fin-rowgroup):not(.fin-sublabel) {
  text-align: left;
  padding-left: 24px;
}

/* rowspan 안쪽 소분류 라벨 — 시안에서 구분선 바로 오른쪽에 붙음 */
.finance-tables .fin-table .fin-sublabel {
  text-align: left;
  padding-left: 8px;
}

/* rowspan 라벨 셀 — 시안 104:1505의 세로 구분선 (x=666, 높이 91) */
.finance-tables .fin-table .fin-rowgroup {
  border-right: 1px solid #d9d9d9;
  vertical-align: middle;
  text-align: center;
  padding: 10px 6px;
}

.finance-tables .fin-table--budget tbody td:first-child,
.finance-tables .fin-table--budget thead th:first-child {
  padding-left: 16px;
}

@media (max-width: 834px) {
  .finance-tables {
    display: block;
  }

  .finance-tables .fin-table {
    height: auto;
    margin-bottom: 20px;
  }
}

.policy-image {
  width: 100%;
  border-radius: 12px;
  margin: 24px 0;
}

.policy-figure {
  width: 386px;
  max-width: 100%;
  /* 사진 위·아래 여백 1.5배 (40 → 60) */
  margin: 60px 0 60px auto;
}

.policy-figure img {
  display: block;
  width: 386px;
  max-width: 100%;
  height: 465px;
  object-fit: cover;
  border-radius: 12px;
}

/* 사진 캡션(서명) — statement.html의 인물 사진 캡션과 동일 스타일 */
.policy-figure figcaption,
.page-photo figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--color-blue);
  font-size: 14px;
  color: var(--color-gray);
}

@media (max-width: 834px) {
  .policy-figure {
    width: 100%;
    /* 사진 위·아래 여백 1.5배 (32 → 48) */
    margin: 48px 0;
  }
}

.pull-quote {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
  margin: 32px 0;
}

/* 밑줄은 폰트가 정한 기본 위치가 글자 아랫부분(ㄴ·ㅗ 등)에 닿을 만큼 붙어 있어
   글자 크기에 비례해 0.2em 만큼 내린다(24px 기준 4.8px). */
.pull-quote em {
  font-style: normal;
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 시안 11대_1(1:548) — 강조 밖 텍스트는 검정, 쉼표는 파랑이되 밑줄 없음 */
.pull-quote.is-black {
  color: var(--color-black);
}

.pull-quote em.is-plain {
  text-decoration: none;
}

/* ===================================================
   Hakgyoansim Bareonbatang 적용 범위
   시안에서 font-['Hakgyoansim_Bareonbatang:B'] 로 지정된 노드만 대응.
   (11대_2 · 11대_3 · 11대_9 · 04 · main_v1 · Mobile_* 프레임에는 없음 → 미적용)
   =================================================== */

/* 11대_1(1:548 · 1:538) / 11대_4(1:827) / 11대_5(1:1193) / 11대_6(1:1091)
   11대_7(1:922) / 11대_8(1:1276) / 11대_10(1:1506) / 11대_11(1:1587) / 11대_12(1:1748) */
.pull-quote {
  font-family: var(--font-serif);
}

/* 11대_1(1:556 · 1:534 · 1:560) — statement.html 의 첫째/둘째/셋째 소제목 */
.policy-content.is-black-text .policy-section h2 {
  font-family: var(--font-serif);
}

/* 11대_11(1:1619 · 1:1628 · 1:1637 · 1:1646 · 1:1655 · 1:1722) — 6개 캠퍼스 이름 */
.policy-section h2.campus-name {
  font-family: var(--font-serif);
}

/* 05(1:599) — About 대표 문장 */
.about-content h1 {
  font-family: var(--font-serif);
}

/* 05(1:603 · 1:606 · 1:619 · 1:609) — 하나/둘/셋/넷 소제목 */
.about-content .callout h2 {
  font-family: var(--font-serif);
}

/* 05(1:610) — About 맺음 문단 */
.about-closing {
  font-family: var(--font-serif);
}

/* 실행 로드맵 타임라인 */
.timeline {
  margin: 24px 0;
}

/* 세로 라인 두께 2px(요청). 본문 시작 x 는 그대로 두기 위해
   border 2px + padding-left 30px = 기존 4 + 28 과 같은 32px 로 맞춘다. */
.timeline-stage {
  border-left: 2px solid #d9d9d9;
  padding: 4px 0 32px 30px;
  margin-left: 0;
  position: relative;
}

/* 점은 세로선 중앙에 오도록: 선 중심 = 패딩박스 왼쪽에서 -1px,
   점 지름 15px → left = -1 - 7.5 = -8.5px */
.timeline-stage::before {
  content: "";
  position: absolute;
  left: -8.5px;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-blue);
}

/* 첫 단계에서 세로선이 첫 점 위로 튀어나오던 것을 없앤다(요청).
   border 대신 배경으로 그려서 점 중심(위에서 6 + 15/2 = 13.5px)부터 시작시킨다. */
.roadmap-principle + .timeline-stage {
  border-left-color: transparent;
  background: linear-gradient(#d9d9d9, #d9d9d9) border-box no-repeat;
  background-size: 2px calc(100% - 13.5px);
  background-position: 0 13.5px;
}

.timeline-stage h2 {
  color: var(--color-blue);
  font-size: 20px;
  margin: 0 0 12px;
}

/* 요약문: 글자 #000, 위아래 여백 12px 로 통일(요청).
   아래 여백은 .callout 의 margin-top 32px 와 상쇄되던 것이라 아래에서 0 으로 지운다. */
.timeline-stage .summary {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
}

.timeline-stage .callout {
  background: #f6f8ff;
  border-radius: 12px;
  /* 글자와 박스 경계 사이 여백을 절반으로 (20/24 → 10/12) */
  padding: 10px 12px;
  /* 위 여백은 .summary 의 12px 만 남긴다 (기본 .callout 의 32px 제거) */
  margin-top: 0;
}

.timeline-stage .callout h3 {
  font-size: 14px;
  color: var(--color-blue); /* #296FFF */
  margin: 0 0 10px;
}

.timeline-stage .callout ul {
  margin: 0;
  padding-left: 18px;
}

.timeline-stage .callout li {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  position: relative;
}

/* 글머리 점 표시(요청). 값은 사이트의 다른 목록과 동일 —
   지름 0.22em(크롬 기본 disc 0.328em 의 67%), left -0.4375em,
   top = line-height(1.8) 의 절반 → 글자 세로 중앙 */
.timeline-stage .callout li::before {
  content: "";
  position: absolute;
  left: -0.4375em;
  top: 0.9em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

@media (max-width: 860px) {
  .policy-layout {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .policy-sidebar {
    position: static;
  }

  .policy-sidebar ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .policy-sidebar li:nth-child(2) {
    border-top: none;
  }

  .policy-sidebar a {
    padding: 12px 8px;
    gap: 8px;
    font-size: 14px;
  }
}

/* ===================================================
   footer
   =================================================== */
.site-footer {
  /* 위로 띄운 ↑버튼(높이 75 + 간격 50 = 125px)이 본문과 겹치지 않도록 확보 */
  margin-top: 110px;
  background: var(--color-navy);
  color: var(--color-white);
}

.footer-inner {
  position: relative;
  width: 100%;
  padding: 28px 55px; /* 브라우저 양끝 기준 55px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.scroll-top {
  position: absolute;
  right: 55px; /* 소셜 아이콘과 오른쪽 정렬 일치 */
  bottom: 100%;
  margin-bottom: 50px; /* 푸터 컬러바 위쪽으로 50px 띄움 (기존 -8px = 8px 겹침) */
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 31px; /* 48→75px 확대 비율(1.5625배)에 맞춰 화살표도 20→31px */
  color: var(--color-navy);
  background: var(--color-white);
  z-index: 5;
}

.footer-emblem {
  width: 50px;
  height: 52px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-copy {
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.85;
}

.footer-social ul {
  display: flex;
  gap: 16px;
}

.footer-social a {
  color: var(--color-white);
  display: flex;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: #79a1ff;
}

/* 371px 고정 박스 3개(+gap)가 들어가지 못하는 너비에서는 유동 그리드로 전환 */
@media (max-width: 1279px) {
  .about-list {
    max-width: none;
  }

  .policy-grid-list {
    grid-template-columns: repeat(3, 1fr);
    justify-content: initial;
  }

  .policy-grid-list a {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: clamp(16px, 3.4vw, 32px);
  }
}

/* ===================================================
   반응형
   =================================================== */
/* ===================================================
   모바일 (Figma Mobile 104:202 / 104:275, 375px 기준)
   =================================================== */
@media (max-width: 834px) {
  /* 헤더: GNB 숨기고 햄버거 노출 (시안 menu 아이콘 24x19 @ x=335,y=27)
     로고·문구 위치는 메뉴가 열렸을 때(.mobile-nav-head)와 같아야 하므로
     높이 80 / 좌우 17 / 세로 가운데 정렬을 그대로 맞춘다. */
  .header-inner {
    height: 80px;
    padding: 0 17px;
    align-items: center;
  }

  .gnb {
    display: none;
  }

  /* 열린 메뉴의 닫기 버튼(40x40)과 같은 자리를 차지해야 로고·문구에 남는 폭이 같아지고,
     그래야 두 상태에서 줄바꿈 위치까지 일치한다. 막대 자체는 24px 로 두고 왼쪽 패딩으로 채운다. */
  .nav-toggle {
    display: flex;
    width: 40px;
    padding-left: 16px;
    margin-top: 0;
  }

  .brand-text {
    max-width: 259px;
  }

  /* 시안 Mobile_Main gnb(1:89) 및 모바일 메뉴와 동일하게 15px / 21px.
     행간·자간까지 .mobile-nav-head 와 같은 값으로 둬야 두 상태의 글줄 위치가 일치한다. */
  .brand-line:not(.brand-line--accent) {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.037em;
  }

  .brand-line--accent strong {
    font-size: 21px;
    line-height: 24px;
    letter-spacing: -0.04em;
  }

  /* 히어로: 시안 375x480, 텍스트 x=147(39.2%), 하단 여백 33px */
  .hero,
  .page-hero {
    /* 시안 모바일 히어로는 480px, under_bar 없음 */
    height: min(480px, 128vw);
    border-bottom: 0;
    align-items: flex-end;
  }

  .hero-inner {
    padding: 0 0 33px 39.2%;
    justify-content: flex-start;
  }

  .hero-text {
    max-width: none;
    width: 100%;
    margin-top: 0;
  }

  /* 모바일 히어로는 하단 정렬(align-items:flex-end)이라 2:1 스페이서를 쓰지 않는다 */
  .hero .hero-text::before,
  .hero .hero-text::after,
  .page-hero .hero-text::before,
  .page-hero .hero-text::after {
    content: none;
  }

  .hero-headline {
    font-size: 7.5733vw; /* 375px에서 28.4px — 시안 "자유로운"=113px에서 역산 */
    line-height: 1.587;  /* 시안 행간 45.07px */
  }

  .hero-rule {
    max-width: none;
    margin: 8px 0 9px;
  }

  .hero-tagline {
    font-size: 5.0667vw; /* 375px에서 19px */
    line-height: 1.45;
  }

  /* About 리스트: 시안 폭 343 @ x=16, 행 높이 50, 글자 25px, 좌패딩 9.4px */
  .about-index {
    padding: 46px 16px 0;
  }

  .policy-grid {
    /* 시안: 마지막 라인 y=779 → 카드 첫 행 y=857 (78px),
       로드맵 박스 하단 y=1710.09 → 푸터 컴포넌트 상단 y=1732 (21.91px) */
    padding: 78px 16px 21.91px;
  }

  .about-list a {
    min-height: 50px;
    padding: 0 9.4px;
    font-size: 6.6667vw; /* 375px에서 25px — 시안 "서울대 구성원이 느끼는 위기" 폭 321.44에서 역산 */
    gap: 0;
  }

  /* "서울대를 다시 움직일 10대 약속"은 글자 수가 많아 25px에서는 2줄로 깨진다.
     1줄에 들어가는 최대 크기까지만 줄여 위 3개 행과 같은 50px 높이를 유지 */
  .about-list a.is-light {
    font-size: min(6.6667vw, calc(7.35vw - 3.8px));
    white-space: nowrap;
  }

  /* 시안 모바일 프레임에는 화살표가 없음. 자리를 차지하면 1~3행이 2줄로 깨짐 */
  .about-arrow {
    display: none;
  }

  /* 시안 모바일은 세로형 전용 히어로 이미지(image 1 / image 2)를 사용.
     현재 자산은 가로형 1장뿐이라 인물이 화면에 들어오도록 초점을 좌측으로 이동 (임시) */
  /* career.html 히어로도 인물(이미지 폭 약 30% 지점)이 왼쪽에 오도록 초점 이동 */
  .career-hero {
    background-position: -340px center;
  }

  /* about.html 히어로도 인물(이미지 폭 약 25% 지점)이 왼쪽에 오도록 초점 이동 */
  .about-hero {
    background-position: -280px center;
  }

  .hero {
    /* 시안 Mobile_Main 은 같은 원본 사진을 세로로 잘라 쓴다(별도 세로 이미지 없음).
       사이트의 hero-main.jpg 는 이미 2560x781 가로 띠로 잘려 있어 그 구도를 만들 수
       없으므로, 원본 4096x2731 에서 시안과 같은 영역(x 1195~3328 / 세로 전체)을
       잘라낸 모바일 전용 이미지를 쓴다. 750x960 = 시안 375x480 의 2배.
       HTML 에 인라인 style 로 PC용 이미지가 지정돼 있어 !important 가 필요하다. */
    background-image: url("../assets/images/hero-main-mobile.jpg") !important;
    background-position: center;
  }

  .hero::after,
  .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* 메인(index) — 시안 Mobile_Main > Group 559 > "image 1"(1:72) 을 그대로 옮긴 값.
     시안 구성은 #10234D 바탕 위에 사진 opacity 95%, 그 위에 대각 그라디언트.
     사진 95% over #10234D 는 사진 위에 #10234D 5% 를 덧대는 것과 결과가 같으므로
     두 겹으로 구현한다(위 레이어가 대각 그라디언트).
     시안 헤더 뒤 배경요소(lww_bk 1, 1:87)는 hidden 상태라 반영하지 않는다. */
  .hero::after {
    background:
      linear-gradient(144.4819deg,
        rgba(255, 255, 255, 0) 46.515%,
        rgba(20, 88, 230, 0.2) 53.382%,
        rgba(18, 62, 153, 0.75) 65.204%,
        rgba(16, 35, 77, 0.9) 81.921%),
      linear-gradient(rgba(16, 35, 77, 0.05), rgba(16, 35, 77, 0.05));
  }

  /* about·career 는 모바일 시안 프레임이 없고 사진도 밝아, 시안 값을 그대로 쓰면
     헤더 글자가 배경에 묻힌다(대비 1.3~1.8:1). 기존 임시 처리 값을 유지한다. */
  .page-hero::after {
    background: linear-gradient(180deg, rgba(16, 35, 77, 0.55) 0%, rgba(16, 35, 77, 0) 23%,
                rgba(16, 35, 77, 0) 38%, rgba(16, 35, 77, 0.55) 70%,
                rgba(16, 35, 77, 0.82) 100%);
  }

  .hero,
  .page-hero {
    position: relative;
  }

  .hero-inner {
    position: relative;
    z-index: 1;
  }

  /* 정책 카드: 시안 2열 166.78px, gap 9.22px, 9번째(실행 로드맵)는 전체폭 343x150 */
  .policy-grid-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 9.22px;
    row-gap: 9.22px;
  }

  .policy-grid-list a {
    /* 시안 1:141 등: 25.174px / line-height 31.468px / tracking -0.5035px, 라운드 8.991px */
    padding: 0 0 17.79% 12.67%; /* 좌 21.13 / 하 29.67 ÷ 166.78, 시안은 우측 여백 없음 */
    border-radius: 9px;
    font-size: 6.7131vw; /* 375px에서 25.17px */
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  /* 텍스처 비율(Mobile_Main: Rectangle 182.69x220.9 @ -7.956,-27.062)은
     데스크톱(main_v1)과 동일하므로 기본 규칙을 그대로 쓴다 */

  /* 시안 모바일은 2열 지그재그: 1행 파랑/연파랑, 2행 연파랑/파랑, 3행 파랑/연파랑, 4행 연파랑/파랑 */
  .policy-grid-list li:nth-child(3) a,
  .policy-grid-list li:nth-child(7) a {
    background-color: #f3f7ff;
    color: #004eee;
  }

  .policy-grid-list li:nth-child(4) a,
  .policy-grid-list li:nth-child(8) a {
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  .policy-grid-list li:last-child {
    grid-column: 1 / -1;
  }

  /* 실행 로드맵: 시안 1:125 — #296FFF + 174.015deg 그라디언트(multiply) + 검정 20%, 라운드 21.078px */
  .policy-grid-list li:last-child a {
    aspect-ratio: 343 / 150;
    padding: 0 6.12% 7.62%; /* 21 / 26.12 ÷ 343 */
    border-radius: 21px;
    font-size: 6.8693vw; /* 375px에서 25.76px */
  }

  .policy-grid-list a.is-featured {
    background-color: var(--color-blue);
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      linear-gradient(174.0148deg, #e5edff 5.897%, #10234d 109.15%);
    background-blend-mode: normal, multiply;
  }

  /* 엠블럼: 시안 106x116 @ 박스 좌상단 기준 (237, 6.91) */
  .policy-grid-list a.is-featured::after {
    right: 0;
    top: 4.61%;
    bottom: auto;
    width: 30.9%;
    height: 77.33%;
  }

  /* ---- 푸터: 시안 Mobile_Main > Component 5 (375x278) ----
     흰 여백 80px = ↑버튼 60px + 버튼~네이비 간격 20px
     네이비 198px = 위 28 + 아이콘 29.625 + 88.4 + 저작권 32.09 + 아래 19.9 */
  .site-footer {
    margin-top: 80px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 28px 24.68px 19.9px 18px;
  }

  /* 시안 모바일 푸터에는 엠블럼이 없음 */
  .footer-emblem {
    display: none;
  }

  .footer-social {
    order: 1;
    display: flex;
    justify-content: flex-end;
  }

  .footer-social ul {
    gap: 32px;
  }

  .footer-social a svg {
    width: 29.625px;
    height: 29.625px;
  }

  .footer-brand {
    order: 2;
    gap: 0;
    margin-top: 88.4px;
  }

  .footer-copy {
    font-size: 11.109px;
    line-height: 16.047px;
    letter-spacing: -0.02em;
    opacity: 1;
  }

  .scroll-top {
    right: 16px;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    font-size: 25px;
  }

  /* ===== 공약 영상 모바일 — 시안 Mobile_공약영상(66:632, 375x1345) =====
     헤더 Component 6: 흰 배경 + shadow 0 0 4px rgba(0,0,0,.1), 높이 80, 오른쪽 X
     제목 32px EB #296FFF(헤더 아래 50px) / 부제 15.9px M, 줄간 23.3, 2줄
     카드 161.4x240 r5.2 2열(좌우 여백 16, 열 간 20), 행 간 42
     분류 13px R(카드 아래 15px) · 제목 16px EB(+6px) */
  .video-page .site-header.is-solid {
    background: var(--color-white);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }

  .video-page .header-inner {
    height: 80px;
    padding: 0 17px;
    align-items: center;
  }

  /* logo.png 는 흰색 엠블럼이라 흰 헤더에서는 보이지 않는다(모바일 메뉴와 동일 처리) */
  .video-page .brand-emblem {
    filter: invert(1);
  }

  .video-page .brand-line:not(.brand-line--accent) {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-navy);
  }

  .video-page .brand-line--accent strong {
    font-size: 21px;
    line-height: 24px;
    color: var(--color-blue);
  }

  .video-page .nav-toggle {
    display: none;
  }

  .video-page .video-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    color: var(--color-blue);
  }

  .video-grid-head {
    padding: 50px 16px 0;
  }

  .video-grid-head h1 {
    font-size: 32px;
    line-height: 38px; /* 시안 텍스트박스 높이 */
  }

  .video-grid-sub {
    margin-top: 10px;
    font-size: 15.9px;
    line-height: 23.3px;
  }

  .video-grid-sub .m-br {
    display: inline;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 42px;
    margin-top: 35px;
    padding: 0 16px 58px;
  }

  .video-card-thumb {
    border-radius: 5.2px;
  }

  .video-card-cat {
    margin-top: 15px;
    font-size: 13px;
    line-height: 14.1px;
  }

  .video-card-title {
    margin-top: 6px;
    font-size: 16px;
    line-height: 25px;
  }

  /* 모달 — 모바일 시안 프레임이 없어 PC 모달을 세로 배치로 옮긴 것 */
  .video-modal {
    width: calc(100vw - 24px);
    transform: translate(-50%, calc(-50% + 18px));
  }

  /* 좁은 화면에서는 모달 위 공간이 없어(헤더에 가려짐) 버튼을 모달 안쪽 우상단에 둔다 */
  .video-modal-close {
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 44px;
    height: 44px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }

  .video-modal-box {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 16px;
    max-height: calc(100svh - 100px);
    overflow-y: auto;
  }

  .video-modal-text {
    width: 100%;
    padding-top: 0;
  }

  .video-modal-cat {
    font-size: 15px;
    line-height: 1.4;
  }

  .video-modal-title {
    max-width: none;
    font-size: 24px;
    line-height: 1.35;
  }

  .video-modal-title::after {
    margin-top: 14px;
  }

  .video-modal-embed {
    height: min(560px, calc(100svh - 260px));
  }

  /* 시안에는 푸터가 없다(프레임이 마지막 카드에서 끝난다) */
  .video-page .site-footer,
  .video-page .scroll-top {
    display: none;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* policy-campus 요약표: 첫 열의 white-space:nowrap 때문에 표의 최소 폭이
     패널 안쪽 폭보다 커지면 표가 컬러 박스 밖으로 삐져나온다.
     좌우 패딩을 줄여 폭을 확보하고, 그래도 모자라면 줄바꿈되도록 허용한다. */
  .policy-content.is-lg-type .policy-section .summary-panel {
    padding: 20px 16px 4px;
  }

  .policy-content.is-lg-type .policy-section .summary-table th,
  .policy-content.is-lg-type .policy-section .summary-table td {
    padding: 14px 8px;
  }

  .policy-content.is-lg-type .policy-section .summary-table tbody td:first-child {
    white-space: normal;
  }

  .policy-content.is-lg-type .policy-section .summary-table th,
  .policy-content.is-lg-type .policy-section .summary-table td {
    overflow-wrap: anywhere;
  }
}