/* ============================================================
   2026-08-26 수정 — [외부 CDN 제거] Google Fonts(Cormorant) 로컬 호스팅 전환.
   운영 요청: 서버에 넣을 수 있는 CSS·JS·폰트는 전부 서버에서 서빙한다.
   서브셋은 latin·latin-ext 만 포함(이 사이트의 Cormorant 는 영문 표기 전용).
   ============================================================ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-italic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantGaramond-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Infant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/CormorantInfant-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   sub.css — 서브페이지 통합 번들 (개발 핸드오프용)
   ※ 컴포넌트별 원본을 한 파일로 합침. 토대(reset/variables/fonts/atoms/btn-effects)
     와 header/footer 는 별도 유지.
   ※ .ph-extract 는 페이지 충돌 방지를 위해 .district-page / .manifesto-page 로 스코프.
   ============================================================ */


/* ====================================================================
   [board]  (원본: components/board/board.css)
   ==================================================================== */
/* ============================================================
   BOARD — 게시판형 서브 페이지
   모든 수치는 Figma 노드(10031:617, 10095:1390, 10046:3095, 10034:1366)에서 직접 추출
   ============================================================ */

/* ===== 컨테이너 ===== */
.board-page {
  width: min(calc(100% - (var(--content-pad-x-sub) * 2)), var(--content-w-sub));
  max-width: var(--content-w-sub);
  margin: 0 auto;
  padding: 0 0 var(--gap-section);  /* 서브헤더↔서브타이틀 0 (시안), 본문↔푸터 80 */
  color: var(--c-ink);
  font-family: var(--ff-body);
}
/* greeting: 인사말 마지막 콘텐츠가 푸터에 딱 붙음 */
.board-page:has(.greeting-hero) { padding-bottom: 0; }

/* ============================================================
   Page header (subtitle SSOT 10099:1563)
   - 총 박스 1400 × 292
   - vertical flex gap 26px (nav → title row)
   - 일러스트(art) 와 블루라인이 모두 박스 안에 포함 (overflow X)
   - art : left 558 / bottom 1.5 (블루라인 위) / 643×268 (overflow:hidden)
   - 블루라인 : 박스 최하단 (bottom 0, 2px, var(--c-primary)) — 시안 top 290
   - 헤더 → 다음 콘텐츠 gap (시안 측정 5노드 공통):
       greeting(10099) hero, view(10106) main : 0  → CSS margin-bottom 25 (board-page--view)
       list(10031) notice-box(Frame 323)      : 0  → CSS margin-bottom 80 (시각 분리 의도, 유지)
       history(10102) Frame 346               : 84 → CSS margin-bottom 80 정합
       pledge(10103) promise-cards(py-80)     : 80 → CSS margin-bottom 80 정합
   ============================================================ */
.page-header {
  display: flex;
  flex-direction: column;
  justify-content: center;      /* breadcrumb + title row 세로 중앙 */
  gap: 26px;
  position: relative;
  min-height: 200px;            /* SSOT 박스 높이 (리뉴얼: art 제거, 200) */
  margin-bottom: 0;   /* 헤더↔본문 갭 공통 0 (개발 요청: board-page 공통화, 페이지별 오버라이드 제거) */
}

/* breadcrumb: nav (gap 18) */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-body);
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  color: #333;
  font-weight: 400;
  letter-spacing: 0;
}
.breadcrumb__item--current { color: var(--c-primary); }
.breadcrumb__home { display: inline-block; width: 16px; height: 16px; }
.breadcrumb__divider { display: inline-block; width: 1px; height: 12px; background: #dedede; }

/* breadcrumb 2뎁스 점프 (커스텀 드롭다운, js/breadcrumb-jump.js 주입) -------
   기본(닫힘) = 옛 브레드크럼 텍스트 항목과 동일한 "텍스트형 트리거 + ▾"
   클릭(열림) = 흰 배경·핑크 보더·섀도우의 "박스형 목록(.breadcrumb-jump-menu)" */
.breadcrumb-jump-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* 열렸을 때 펼침 목록이 뒤따르는 타이틀행(.page-header__title-row) 위로 오도록 stacking 끌어올림.
   .page-header > *(.breadcrumb / .title-row) 가 모두 z-index:1 이라, 펼칠 때 breadcrumb 자체를 위로 올린다. */
.page-header .breadcrumb.breadcrumb--jump-open { position: relative; z-index: 30; }
.breadcrumb-jump-wrap.is-open { z-index: 30; }

/* --- 트리거(닫힌 상태): 브레드크럼 현재 텍스트 항목과 동일 톤 (박스/보더 없음) --- */
.breadcrumb-jump {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 텍스트형이므로 박스·보더·배경·섀도우 없음 — 브레드크럼 항목과 동일하게 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;               /* .breadcrumb__item 과 동일 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #333;                   /* 일반 브레드크럼 항목 색 */
  cursor: pointer;
  transition: color .15s ease;
}
.breadcrumb-jump__label { display: inline-block; }
.breadcrumb-jump:hover { color: var(--c-primary); }
.breadcrumb-jump:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* 현재(마지막 2뎁스) 항목이면 핑크 포인트로 — 기존 --current 색 승계 */
.breadcrumb-jump-wrap--current .breadcrumb-jump { color: var(--c-primary); }

/* ▾ 화살표 — 트리거 안 인라인. 열렸을 때 180° 회전 */
.breadcrumb-jump__arrow {
  display: inline-flex;
  pointer-events: none;
  color: var(--c-primary);
  transition: transform .15s ease;
}
.breadcrumb-jump-wrap.is-open .breadcrumb-jump__arrow { transform: rotate(180deg); }

/* --- 펼침 목록(열린 상태): 박스형 (구 .breadcrumb-jump select 박스 스타일 이관) --- */
.breadcrumb-jump-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: max-content;
  list-style: none;
  margin: 0;
  padding: 6px;                  /* 여유 패딩 */
  background: var(--c-white, #fff);
  border: 1px solid var(--c-primary);          /* 핑크 보더 */
  border-radius: var(--r-sm);
  box-shadow: 0 8px 18px rgba(58, 61, 78, 0.16);  /* #3A3D4E 인디고 톤 그림자 (구: 핑크 rgba(196,0,81,0.16)) */
}
.breadcrumb-jump-menu[hidden] { display: none; }

.breadcrumb-jump-option {
  display: block;
  padding: 9px 14px;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color .12s ease, color .12s ease;
}
.breadcrumb-jump-option:hover,
.breadcrumb-jump-option:focus-visible {
  background: var(--c-indigo-50);   /* 핑크 → 옅은 인디고 #F7F8FD (강조 텍스트 핑크는 유지) */
  color: var(--c-primary);
  outline: none;
}
.breadcrumb-jump-option:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}
/* 현재 페이지 항목 강조 */
.breadcrumb-jump-option--current {
  color: var(--c-primary);
  font-weight: 700;
  background: var(--c-indigo-50);   /* 핑크 → 옅은 인디고 #F7F8FD (현재항목 강조 텍스트 핑크 bold 는 유지) */
}

/* title row */
.page-header__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 헤더↔본문 갭은 .page-header 기본값(margin-bottom:0)으로 공통 처리 — 페이지별 오버라이드 제거(개발 요청) */
/* 리뉴얼: 타이틀 좌측 / 공유·프린트 우측 끝 (시안 10103:2385 — 헤더행 space-between) */
.page-header__title-left {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.page-header__title {
  font-family: var(--ff-title);  /* Hakgyoansim Allimjang TTF */
  font-weight: 400;
  /* 2026-08-25 수정 — [피드백] 타이틀이 크다는 의견 — 46 → 40.
     반응형 1280:40→36 · 768:30→28 도 같은 비율로 내렸다(아래 미디어쿼리 참조). */
  font-size: 40px;
  line-height: normal;
  color: #1a1a1a;
  letter-spacing: 0;
  margin: 0;
}

/* share-actions (content-icons) — gap 16, 48px round buttons */
.share-actions { display: inline-flex; align-items: center; gap: 16px; }
.share-actions__btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e9f5;
  border-radius: 999px;
  background: transparent;
  padding: 12px;
  cursor: pointer;
}
.share-actions__btn img { width: 24px; height: 24px; display: block; }
.share-actions__btn:hover { background: #f7f8fd; }

/* 글쓰기 button — pill, 49h × 133w, bg #2a2e43 */
.btn-write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 49px;
  width: 133px;
  background: #2a2e43;
  color: #fff;
  border-radius: 100px;
  border: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
/* [공통] 글쓰기 버튼 hover — 인디고500 + 드롭쉐도우 + 살짝 떠오름 (전 페이지 공통, 기존 list 인라인 이관) */
.btn-write:hover { background: var(--c-indigo-500); box-shadow: 0 8px 20px rgba(42, 53, 140, .28); transform: translateY(-1px); }
.btn-write__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; }
.btn-write__icon img { width: 16px; height: 16px; display: block; }

/* ── 글쓰기 버튼: 하단 영역 오른쪽 배치 (게시판 흔한 관례 — suggestion list·view·view-pending) ── */

/* list: 페이지네이션은 중앙, 글쓰기는 우측 — 같은 그리드 행에서 세로 중앙 정렬(padding-top 비대칭 영향 없음) */
/* 글쓰기 버튼이 들어가는 페이지네이션 행(구청장에게바란다) — 콘텐츠 클래스로 스코프(개발: main 페이지클래스 제거) */
.pagination__wrap.write-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.pagination__wrap.write-foot > .pagination { grid-column: 2; grid-row: 1; }
.pagination__wrap.write-foot > .btn-write { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }

/* view·view-pending: 목록/수정 버튼은 중앙 그대로, 글쓰기만 우측에 절대배치(세로 중앙) */
.post-actions { position: relative; }
.post-actions > .btn-write {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
/* 호버: 세로중앙(-50%) 유지하며 1px 만 떠오름 — 기존 translateY(-1px) 가 -50% 를 덮어 아래로 튀던 버그 수정 */
.post-actions > .btn-write:hover { transform: translateY(calc(-50% - 1px)); }

@media (max-width: 768px) {
  /* 모바일: 그리드/절대배치 해제 → 세로 스택(중앙 콘텐츠와 겹침 방지) */
  .pagination__wrap.write-foot { display: flex; flex-direction: column-reverse; align-items: center; gap: 18px; }
  .post-actions > .btn-write { position: static; transform: none; margin: 0; }
  .post-actions { flex-wrap: wrap; }
}

/* (리뉴얼) 배경 일러스트(.page-header__art) 제거 — 시안 10103:2385 배경 이미지 없음 */

/* ============================================================
   Notice box (10046:3095)
   border 1px #323649, rounded 4px, shadow specific
   ============================================================ */
.notice-box {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-indigo-500);   /* #3A3D4E — 박스 테두리 인디고 메인 통일 (구: 하드코딩 #323649) */
  border-radius: 4px;
  box-shadow: 0 8px 12px 0 rgba(58, 61, 78, 0.12);   /* #3A3D4E 인디고 톤 그림자 (테두리 인디고 통일에 맞춤, 구: 핑크 rgba(196,0,81,0.08)) */
  padding: 39px 43px 26px;          /* title left:43 top:39 → padding */
  margin-bottom: 60px;
  font-family: var(--ff-body);
}
/* notice 박스 타이틀 (32px Bold, 혼합 색상) */
.notice-box__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -1px;
  color: #2a2a2a;
  line-height: normal;
  margin: 0 0 15px;                 /* top 39 → desc top 86 차이 47, 32px line + 15 */
}
.notice-box__title .em { color: var(--c-primary); }
.notice-box__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #323649;
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
}
/* 셀 3개 행 (top:132, width:1297, gap:12) */
.notice-box__split {
  display: flex;
  gap: 12px;
  margin-top: 30px;                 /* desc 끝 → 셀 시작 */
}
.notice-cell {
  position: relative;
  flex: 1 1 0;
  height: 140px;
  background: var(--c-indigo-50);   /* #F7F8FD — 핑크 #FDF0F5 → 인디고-50 연한 박스로 복귀 */
  overflow: hidden;
}
/* 셀 안 아이콘 (78x78 흰 원, 좌측 21px 수직 중앙) */
.notice-cell__icon {
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  width: 78px;
  height: 78px;
  background: #fff;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notice-cell__icon img { width: 40px; height: auto; display: block; }

/* 셀 텍스트 (left:121, top:18 or 20 or 37, 16px) */
.notice-cell__text {
  position: absolute;
  left: 121px;
  top: 18px;
  width: 271px;
  font-size: 16px;
  font-weight: 400;
  color: #323649;
  line-height: 1.4;
  margin: 0;
}
.notice-cell:nth-child(2) .notice-cell__text { top: 20px; width: 273px; }
.notice-cell:nth-child(3) .notice-cell__text { top: 37.5px; width: 277px; left: 118px; }

/* 셀 안 버튼 (bottom:20.5px, left:121, w:120, padding 6/16, rect) */
.notice-cell__btn {
  position: absolute;
  bottom: 20.5px;
  left: 121px;
  width: 120px;
  height: auto;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  border-radius: 0;
  border: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -1px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.notice-cell:nth-child(1) .notice-cell__btn { background: #323649; }   /* 서울 민원신청 = 주정차위반조회와 동일 인디고(#323649 = indigo-600) */
.notice-cell:nth-child(2) .notice-cell__btn { background: #323649; }
.notice-cell__btn img { width: 12px; height: 12px; display: block; }

/* dept-line (left:43, top:298 in notice box internal coords) */
.dept-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;                 /* 셀 행 끝(132+140=272) → dept(298) 약 24 */
}
.dept-line__icon {
  width: 26px;                      /* 5.909 padding + 14.182 icon ≈ 26 */
  height: 26px;
  background: #ebeef8;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dept-line__icon img { width: 14px; height: 14px; display: block; }
.dept-line__text {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #777676;
  letter-spacing: -1px;
}

/* ============================================================
   Board toolbar (10034:1373) — h:48
   ============================================================ */
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;                 /* 2026-06-19 height→min-height: 상단 글쓰기 버튼 높이 자연 수용(:has 회피) */
  margin-bottom: 40px;              /* 2026-06-19 리스트 툴바 하단 갭 공통 40 (전 리스트 통일) */
}
/* 구청장에게바란다 — 검색폼 + 상단 글쓰기 버튼 우측 그룹 (개발: 글쓰기 버튼 상단 추가) */
.board-toolbar__right { display: flex; align-items: center; gap: 12px; }
.board-toolbar__count {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #5B606B;
  letter-spacing: 0;
}
.board-toolbar__count strong { font-weight: 700; color: #111; }

.board-toolbar__form {
  display: flex;
  align-items: stretch;
  height: 48px;
  min-width: 0;
}
.board-select {
  width: 149px;
  height: 100%;
  padding: 0 16px 0 18px;
  background: #fff;
  border: 1px solid #ccd1d6;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #454752;
  appearance: none;
  background-image: url(../images/icons/ui/ic-select-caret-sm.svg);
  background-repeat: no-repeat;
  background-position: right 16px center;
  border-radius: 0;
  margin-right: -1px;               /* 보더 겹침 */
}
.board-search {
  position: relative;
  width: 406px;
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid #ccd1d6;
  display: flex;
  align-items: center;
  padding: 0 16px 0 18px;
}
.board-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #111;
}
.board-search input:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; }   /* 포커스 가시화(KWCAG 11-2) */
.board-search input::placeholder { color: #9ea3ab; }
.board-search__btn {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.board-search__btn img { width: 18px; height: 18px; display: block; }

/* ============================================================
   Table (10034:1385)
   ============================================================ */
.board-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.board-table__empty td { text-align: center; padding: 56px 16px; color: var(--c-text-sub); font-size: 16px; }   /* 검색 결과 0건 빈 상태 */

/* header — top border var(--c-primary), bg rgba(241,243,250,0.5) */
.board-table thead th {
  height: 62px;
  background: rgba(241, 243, 250, 0.5);
  border-top: 2px solid var(--c-primary);   /* 2026-06-19 1→2px 다른 리스트 상단라인과 통일 */
  border-bottom: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  color: #26262e;
  text-align: center;
  letter-spacing: 0;
  padding: 0;
}

/* row */
.board-table tbody td {
  background: #fff;
  border-bottom: 1px solid #ccd1d6;
  padding: 18px 0;
  vertical-align: middle;
  font-family: var(--ff-body);
}

/* columns */
.board-table .col-no     { width: 160px; text-align: center; font-weight: 400; font-size: 17px; color: #6A7180; }
.board-table .col-writer { width: 126px; text-align: center; font-weight: 400; font-size: 16px; color: #6A7180; }
.board-table .col-date   { width: 160px; text-align: center; font-weight: 400; font-size: 16px; color: #6A7180; }
.board-table .col-status { width: 191px; text-align: center; }
.board-table .col-title  { padding-left: 24px; }

/* title cell */
.board-table__title-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.board-table__title-row { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.board-table__lock { width: 12px; height: 13px; flex-shrink: 0; }
.board-table__title {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: #333338;
  letter-spacing: 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
/* 제목 링크 — 마우스 오버/키보드 포커스 시 밑줄(웹표준) */
a.board-table__title:hover,
a.board-table__title:focus-visible { text-decoration: underline; }

/* notice-badge (예고) — bg #f1f3fa, rounded 3, padding pl:6 pr:10 py:5 */
.notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3fa;
  border-radius: 3px;
  padding: 5px 10px 5px 6px;
}
.notice-badge__icon {
  width: 14px;
  height: 14px;
  background: #2a2e43;
  border-radius: 7px;
  color: #fff;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notice-badge__text { font-family: var(--ff-body); font-weight: 400; font-size: 15px; color: #2a2e43; }

/* ============================================================
   Badge (공통 컴포넌트) — 기준: 구청장에게바란다 '진행중'
   primary(파랑)=진행중·언론보도·인터뷰·행사·정책설명 등 / muted(회색)=답변완료 등
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 78px;
  padding: 7px 15px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
}
.badge--primary { background: var(--c-primary); color: #fff; }
.badge--muted   { background: rgba(38, 42, 48, 0.1); color: #262a30; }
.badge--register { background: color-mix(in srgb, var(--c-primary) 5%, transparent); color: var(--c-primary); }   /* 등록(최초 접수, 미배부) — 브랜드핑크 5% 배경 + 브랜드핑크 텍스트 */
/* 라벨 칩(약력·타임라인 등 — 가는 굵기, 폭 고정 컬럼). 예: 걸어온 길 */
.badge--label { font-weight: 700; width: 115px; }
@media (max-width: 1280px) { .badge { font-size: 14px; } }
@media (max-width: 768px)  { .badge { min-width: auto; font-size: 12px; padding: 7px 12px; } }
@media (max-width: 768px)  { .badge--label { width: 92px; min-width: 92px; } }   /* 모바일도 PC처럼 동일 고정폭(uniform) */

/* ============================================================
   Pagination (10035:1291)
   gap:8, nav buttons 36 rounded 18, page items 47 rounded 8
   ============================================================ */
.pagination__wrap { display: flex; justify-content: center; padding-top: 30px; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 30px;
}
/* wrap 안에 직접 들어가면 wrap 의 padding 만 쓰도록 중복 padding 제거 */
.pagination__wrap .pagination { padding-top: 0; }
.pagination__nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
}
.pagination__nav img { width: 32px; height: 32px; display: block; }
.pagination__nav:hover { background: #f1f3fa; }
.pagination__nav:disabled, .pagination__nav.is-disabled { opacity: .35; pointer-events: none; cursor: default; }   /* 1페이지=처음·이전 비활성 */

.pagination__pages { display: inline-flex; align-items: center; gap: 14px; }
.pagination__page {
  width: 47px;
  height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  color: #5B606B;
  cursor: pointer;
}
.pagination__page.is-active {
  background: var(--c-primary-soft);
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   Responsive typography (board.css 전용 — 구청장에게-바란다)
   breakpoint: 1280 / 768 (운영 표준 따라감)
   레이아웃은 PC 기준 유지, 텍스트 위계만 단계적으로 축소
   ============================================================ */
@media (min-width: 1281px) and (max-width: 1600px) {
  .notice-cell {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    row-gap: 10px;
    height: auto;
    min-height: 140px;
    padding: 20px;
    overflow: visible;
  }

  .notice-cell__icon {
    position: static;
    transform: none;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .notice-cell__text {
    position: static;
    grid-column: 2;
    width: auto;
    min-width: 0;
  }

  .notice-cell:nth-child(2) .notice-cell__text,
  .notice-cell:nth-child(3) .notice-cell__text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
  }

  .notice-cell__btn {
    position: static;
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;        /* 텍스트 ↔ 버튼 갭 */
  }
}

@media (max-width: 1280px) {
  /* 컨테이너 — 좌우 패딩 축소 */
  .board-page              { width: min(calc(100% - (var(--content-pad-x-narrow) * 2)), var(--content-w-sub)); padding: 0 0 60px; }
  .board-page:has(.greeting-hero) { padding-bottom: 0; }

  /* page header — 블루라인은 frame 하단에 유지 (헤더 자연 높이 기준) */
  .page-header             { min-height: 176px; margin-bottom: 0; }   /* 헤더↔본문 갭 공통 0 */
  .board-page--list-no-line .page-header::after { display: none; }
  .page-header__title      { font-size: 36px; }   /* 2026-08-25 수정 — 타이틀 축소(40→36) */
  .breadcrumb__item        { font-size: 15px; }
  .breadcrumb-jump         { font-size: 15px; }
  .breadcrumb-jump-option  { font-size: 15px; }

  /* 공유/글쓰기 */
  .share-actions__btn      { width: 44px; height: 44px; padding: 10px; }
  .share-actions__btn img  { width: 22px; height: 22px; }
  .btn-write               { font-size: 16px; height: 46px; width: 124px; }

  /* notice box */
  .notice-box__title       { font-size: 26px; }
  .notice-box__desc        { font-size: 15px; }
  .notice-box__split       { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .notice-cell             {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    row-gap: 10px;
    min-width: 0;
    height: auto;
    min-height: 132px;
    padding: 18px;
    overflow: visible;
  }
  .notice-cell__icon       {
    position: static;
    transform: none;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
  }
  .notice-cell__icon img   { width: 36px; }
  .notice-cell__text       {
    position: static;
    grid-column: 2;
    width: auto;
    min-width: 0;
  }
  .notice-cell:nth-child(2) .notice-cell__text,
  .notice-cell:nth-child(3) .notice-cell__text {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
  }
  .notice-cell__text       { font-size: 15px; }
  .notice-cell__btn        {
    position: static;
    grid-column: 2;
    justify-self: start;
    width: auto;
    font-size: 13px;
    padding: 7px 14px;
    margin-top: 10px;        /* 텍스트 ↔ 버튼 갭 */
  }
  .dept-line               { font-size: 15px; }

  /* board */
  .board-toolbar__count,
  .board-select,
  .board-search input      { font-size: 15px; }
  .board-toolbar__form     { flex: 1 1 520px; max-width: 555px; }
  .board-select            { flex: 0 0 136px; width: auto; }
  .board-search            { flex: 1 1 auto; width: auto; }
  .board-table             { table-layout: fixed; }
  .board-table col:nth-child(1) { width: 90px !important; }
  .board-table col:nth-child(3) { width: 86px !important; }
  .board-table col:nth-child(4) { width: 112px !important; }
  .board-table col:nth-child(5) { width: 96px !important; }
  .board-table thead th    { font-size: 15px; }
  .board-table__title      { font-size: 17px; }
  .board-table__title-row  { display: flex; min-width: 0; }
  .board-table__title      { min-width: 0; }
  .board-table .col-no     { font-size: 15px; }
  .board-table .col-writer { font-size: 14px; }
  .board-table .col-date   { font-size: 14px; }
  .notice-badge__text      { font-size: 14px; }

  /* pagination */
  .pagination__page        { font-size: 15px; }
}

@media (max-width: 768px) {
  /* 컨테이너 */
  .board-page              { width: calc(100% - 40px); padding: 0 0 40px; overflow-x: clip; }
  .board-page:has(.greeting-hero) { padding-bottom: 0; }

  /* page header — 블루라인은 frame 하단에 유지 */
  .page-header             { min-height: 140px; margin-bottom: 0; gap: 16px; }  /* 헤더↔본문 갭 공통 0 + breadcrumb↔title 갭 축소 */
  .board-page--list-no-line .page-header::after { display: none; }
  .page-header__title      { font-size: 28px; }   /* 2026-08-25 수정 — 타이틀 축소(30→28) */
  .page-header__title-row  { align-items: flex-start; gap: 16px; }
  .page-header__title-left { gap: 12px; min-width: 0; }
  .breadcrumb              { gap: 12px; }
  .breadcrumb__item        { font-size: 13px; }
  .breadcrumb-jump         { font-size: 13px; }
  .breadcrumb-jump-option  { font-size: 14px; }
  .breadcrumb__home        { width: 14px; height: 14px; }  /* 글씨 13 에 맞춰 비율 축소 */

  /* 공유/글쓰기 */
  .share-actions__btn      { width: 40px; height: 40px; padding: 8px; }
  .share-actions__btn img  { width: 20px; height: 20px; }
  .share-actions__btn[aria-label="인쇄"] { display: none; }   /* 모바일: 프린트 숨김 */
  .btn-write               { font-size: 14px; height: 40px; width: 104px; }
  .btn-write__icon img     { width: 14px; height: 14px; }

  /* notice box */
  .notice-box              { padding: 24px 20px; }
  .notice-box__title       { font-size: 20px; }
  .notice-box__desc        { font-size: 14px; }
  .notice-box__split       { display: flex; flex-direction: column; gap: 12px; }
  .notice-cell             {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 6px;            /* 텍스트 ↔ 버튼 갭 (모바일 비율 축소) */
    width: 100%;
    flex: 0 0 auto;          /* split flex-column 에서 콘텐츠 높이로 (균등분배·눌림 방지) */
    min-height: 0;
    height: auto;
    overflow: visible;       /* 콘텐츠 잘림 방지 */
    padding: 18px 16px;
  }
  /* 3번째 박스 — 버튼 없음, 아이콘·텍스트 세로 가운데 정렬 */
  .notice-cell:nth-child(3) { align-items: center; }
  .notice-cell__icon       {
    position: static !important;
    transform: none !important;
    width: 56px;
    height: 56px;
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-shrink: 0;
  }
  .notice-cell__icon img   { width: 36px; height: auto; }   /* 2026-08-17 수정 — height:36px 강제가 아이콘 3종(40×37·45×32·31×38)을 최대 28.9% 왜곡. :335·:737 과 같은 방식(비율 유지)으로 통일 */
  .notice-cell__text,
  .notice-cell:nth-child(2) .notice-cell__text,
  .notice-cell:nth-child(3) .notice-cell__text {
    position: static !important;
    width: auto;
    grid-column: 2;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
  }
  .notice-cell__btn        {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-left: 0;
    margin-top: 0;           /* 갭은 row-gap(6) 으로만 */
    font-size: 12px;
    width: auto;
    padding: 8px 14px;
  }
  .dept-line               { display: flex; font-size: 13px; gap: 6px; align-items: flex-start; }
  .dept-line__icon         { flex: 0 0 26px; }
  .dept-line__text         { min-width: 0; font-size: 13px; line-height: 1.4; }

  /* board */
  .board-toolbar           { height: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .board-toolbar__count    { flex: 0 0 auto; align-self: flex-start; font-size: 14px; white-space: nowrap; }
  .board-toolbar__form     { flex: 0 0 auto; width: 100%; min-width: 0; height: 46px; max-width: none; }
  .board-select            { flex: 0 0 104px; width: 104px; min-width: 0; padding-left: 12px; padding-right: 30px; font-size: 14px; }
  .board-search            { flex: 1 1 auto; width: auto; padding: 0 14px; }
  .board-search input      { font-size: 14px; }
  .board-table thead       { display: none; } /* 모바일은 카드형 row */
  .board-table,
  .board-table tbody,
  .board-table tr,
  .board-table td          { display: block; width: 100%; }
  .board-table colgroup    { display: none; }
  .board-table tbody       {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 2px solid var(--c-primary);
    padding-top: 12px;
  }
  .board-table tbody tr    {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 6px;
    row-gap: 6px;
    padding: 18px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(58, 61, 78, 0.04);   /* #3A3D4E 인디고 톤 그림자 (구: 핑크 rgba(196,0,81,0.04)) */
  }
  .board-table tbody td    { border-bottom: 0; padding: 0; background: transparent; }
  .board-table .col-no     {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: auto;
    text-align: left;
    font-size: 13px;
    line-height: 1.2;
  }
  .board-table .col-no::before { content: ""; }
  .board-table .col-title  { grid-column: 1 / -1; padding-left: 0; }
  .board-table__title-cell { gap: 4px; }
  .board-table__title-row  { display: flex; align-items: flex-start; gap: 6px; }
  .board-table__lock       { margin-top: 3px; }
  .board-table__title      {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
    line-height: 1.45;
  }
  .board-table .col-writer,
  .board-table .col-date   {
    display: inline-flex;
    align-items: center;
    width: auto;
    font-size: 13px;
    line-height: 1.4;
    color: #6A7180;
  }
  .board-table .col-writer { grid-column: 1; }
  .board-table .col-date   { grid-column: 2 / -1; }
  .board-table .col-writer::before { content: "작성자 : "; color: #454752; }
  .board-table .col-writer::after { content: " |"; margin-left: 6px; color: #ccd1d6; }
  .board-table .col-date::before { content: "작성일 : "; color: #454752; }
  .board-table .col-status {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: auto;
    text-align: left;
  }
  .notice-badge            { margin-top: 2px; padding: 4px 7px; max-width: 100%; }
  .notice-badge__text      { min-width: 0; font-size: 13px; white-space: normal; line-height: 1.35; }

  /* pagination */
  .pagination__wrap        { padding-top: 32px; }
  .pagination              { gap: 4px; max-width: 100%; }
  .pagination__pages       { gap: 6px; }
  .pagination__nav         { width: 30px; height: 30px; }
  .pagination__nav img     { width: 14px; height: 14px; }
  .pagination__page        { width: 32px; height: 32px; font-size: 13px; border-radius: 6px; }
}

@media (max-width: 480px) {
  .board-page              { width: calc(100% - 32px); }
  .page-header__title-row  { flex-wrap: wrap; }
  .btn-write               { margin-left: auto; }
  .notice-box              { padding: 22px 18px; }
  .board-select            { flex-basis: 96px; width: 96px; }
  .notice-cell             { padding: 16px 14px; }
  .notice-cell__btn        { margin-left: 0; padding: 7px 12px; }
  .board-table tbody tr    { padding: 16px; }
  .pagination__nav         { width: 28px; height: 28px; }
  .pagination__page        { width: 30px; height: 30px; font-size: 12px; }
  .pagination__pages       { gap: 4px; }
}

/* ============================================================
   POST VIEW (게시글 상세) — list 스타일 바탕으로 추측 구현
   ============================================================ */

/* 목록 버튼 (글쓰기 자리 대체) — outline pill */
.btn-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 49px;
  padding: 0 22px;
  background: #fff;
  color: #2a2e43;
  border: 1px solid #c9cfdf;
  border-radius: 100px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-list:hover { background: #f7f8fd; border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(58, 61, 78, 0.12); }   /* 그림자만 인디고화 (구: 핑크 rgba(196,0,81,0.12)) */
.btn-list__icon { display: inline-flex; align-items: center; color: currentColor; }

/* 게시글 카드 */
.post-view {
  position: relative;
  background: #fff;
  border: 1px solid #d8dde6;
  border-top: 2px solid var(--c-primary);   /* 2026-06-19 리스트 상단 라인과 통일 (press/suggestion 세부) */
  border-radius: 4px;
  padding: 36px 40px;
  margin-bottom: 24px;
  font-family: var(--ff-body);
}
.post-view__head { padding-bottom: 22px; border-bottom: 1px solid #ebeef5; }
.post-view__tags {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.post-view__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 28px;
  color: #1a1a1a;
  line-height: 1.4;
  overflow-wrap: anywhere;   /* 공백 없는 긴 단어(URL 등) 카드 밖 잘림 방지 */
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.post-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  color: #6e7585;
  font-size: 16px;
}
.post-view__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid #e5e9f5;
}
.post-view__meta-item:first-child { padding-left: 0; }
.post-view__meta-item:last-child  { border-right: 0; padding-right: 0; }
.post-view__meta dt { color: #6A7180; font-weight: 400; margin: 0; }
.post-view__meta dd { color: #2a2e43; font-weight: 500; margin: 0; }

/* 민원 처리상태 스테퍼 (기획서 04a: 접수 → 담당부서 배정 → 답변완료) */
.post-status-steps {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  font-family: var(--ff-body);
}
.post-status-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  background: #f7f8fd;
  color: #6A7180;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.post-status-step + .post-status-step { border-left: 1px solid #e5e9f5; }
.post-status-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d8dde6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.post-status-step__date { font-size: 13px; color: #9aa3b5; font-weight: 400; }
.post-status-step.is-done { color: #4a5163; }
.post-status-step.is-done .post-status-step__num { background: var(--c-indigo-400); }
.post-status-step.is-done .post-status-step__date { color: #6e7585; }
.post-status-step.is-active { background: var(--c-indigo-700); color: #fff; font-weight: 700; }   /* 활성(답변완료) — 인디고700 */
.post-status-step.is-active .post-status-step__num { background: #fff; color: var(--c-indigo-700); }
.post-status-step.is-active .post-status-step__date { color: rgba(255, 255, 255, 0.85); }
.post-status-step.is-active,
.post-status-step.is-active + .post-status-step { border-left-color: transparent; }

/* press 상세 — 제목 + 원문보기(우측 space-between) */
.post-view__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;   /* 제목 ↔ 게시일(메타) 여백 */
}
.post-view__title-row .post-view__title { margin: 0; }
.post-view__source-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--c-indigo-700);   /* 원문보기 버튼 — 인디고 #2A2E43 (구: 다크마룬 --c-primary-soft #7D0034) */
  color: #fff;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-view__source-btn .ico { width: 18px; height: 18px; display: block; }
.post-view__source-btn:hover { background: var(--c-indigo-600); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(58, 61, 78, 0.22); }   /* hover 인디고 한단계 #323649 (구: 핑크 --c-primary) */
@media (max-width: 768px) {
  .post-view__head { display: flex; flex-direction: column; }
  .post-view__title-row { display: contents; }   /* 제목·원문보기를 head 의 flex 항목으로 풀어 재정렬 */
  .post-view__source-btn { order: 1; align-self: flex-start; margin-top: 14px; padding: 8px 14px; font-size: 13px; }  /* 조회수(meta) 아래로 이동, 모바일선 더 작게 */
  .post-view__source-btn .ico { width: 15px; height: 15px; }
}

.post-view__body {
  padding: 28px 0 8px;
  font-size: 17px;
  color: #333338;
  line-height: 1.75;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;   /* 긴 URL·연속문자 줄바꿈 */
}
.post-view__body p { margin: 0 0 14px; }
.post-view__body p:last-child { margin-bottom: 0; }

/* 첨부파일 영역 */
.post-view__attach {
  margin-top: 24px;
  padding: 18px 22px;
  background: #f7f8fd;
  border-radius: 4px;
}
.post-view__attach-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #2a2e43;
  margin-bottom: 10px;
}
.post-view__attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-view__attach-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--c-indigo-450);   /* 첨부파일 링크 — 인디고450 #575A6A */
  text-decoration: none;
  transition: text-decoration 0.1s;
}
.post-view__attach-item:hover { text-decoration: underline; }
.post-view__attach-name { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.post-view__attach-size { color: #6a7180; font-weight: 400; font-size: 13px; }   /* 2026-06-23: 명도대비 #8c99b0(≈2.8:1)→#6a7180(≈4.65:1, 배경 #f7f8fd) KWCAG 일반텍스트 4.5:1 충족 */

/* 답변보기 — '답변보기' 헤더 1개 + 답변 카드 다건 stack (운영 구조)
   2026-06-23: 답변마다 '답변보기' 배지 반복(.post-answer__badge/.post-answer__meta/.post-answer__dot)을
   폐기하고, 섹션 제목 1개(.post-answers__title) + 카드 head = 담당부서(좌)·답변일(우) 구조로 변경. */
.post-answers {
  margin-bottom: 40px;
}
.post-answers__title {
  margin: 0 0 16px;
  color: var(--c-primary);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.post-answer {
  position: relative;
  background: #fafbfd;
  border: 0;
  border-radius: 4px;
  padding: 30px 40px;
  margin-bottom: 16px;   /* 답변 카드 간 간격(헤더 아래 stack) */
  font-family: var(--ff-body);
}
.post-answer:last-child { margin-bottom: 0; }
.post-answer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e9f5;
  flex-wrap: wrap;
}
.post-answer__dept {
  font-weight: 700;
  color: var(--c-indigo-700);   /* 답변 담당 부서명 (좌측) — indigo-700 #2A2E43 */
  font-size: 17px;
}
.post-answer__date {
  color: #6a7180;   /* 답변일 (우측) — 명도대비 #fafbfd 위 ≈4.72:1 (KWCAG 4.5:1 충족) */
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.post-answer__body {
  font-size: 17px;
  color: #2a2e43;
  line-height: 1.75;
}
.post-answer__body p { margin: 0 0 12px; }
.post-answer__body p:last-child { margin-bottom: 0; }

/* 답변 첨부파일 — 답변 카드 내부 하단(구분선 + 리스트). 질문 첨부(.post-view__attach)와 톤 통일, 카드 안이라 배경 생략. */
.post-answer__attach {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5e9f5;
}
.post-answer__attach-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #2a2e43;
  margin-bottom: 10px;
}
.post-answer__attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-answer__attach-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--c-indigo-450);   /* 첨부파일 링크 — 인디고450, 질문 첨부와 동일 */
  text-decoration: none;
  transition: text-decoration 0.1s;
}
.post-answer__attach-item:hover { text-decoration: underline; }
.post-answer__attach-name { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.post-answer__attach-size { color: #6a7180; font-weight: 400; font-size: 13px; }   /* 2026-06-23: 명도대비 #8c99b0(≈2.8:1)→#6a7180(≈4.72:1, 배경 #fafbfd) KWCAG 일반텍스트 4.5:1 충족 */

/* 만족도 평가 위젯 */
.post-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 40px;
  margin-bottom: 24px;
  background: #f7f8fd;
  border-radius: 4px;
  text-align: center;
  font-family: var(--ff-body);
}
.post-rating__title {
  margin: 0;
  font-weight: 700;
  font-size: 19px;
  color: #2a2e43;
  letter-spacing: -0.3px;
}
.post-rating__stars {
  display: inline-flex;
  gap: 6px;
}
.post-rating__star {
  padding: 2px 4px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  color: #d3d8e4;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.post-rating__star:hover { transform: translateY(-2px); }
.post-rating__star.is-on { color: var(--c-primary); }
.post-rating__star:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.post-rating__help {
  margin: 0;
  font-size: 14px;
  color: var(--c-text-sub);
  letter-spacing: -0.2px;
}

/* 처리안내 4줄 — 핑크 계열(연한 핑크 배경 + 핑크 보더) */
.post-notice {
  list-style: none;
  margin: 0 0 40px;
  padding: 22px 26px;
  background: var(--c-indigo-50);                    /* #F7F8FD 연한 인디고 틴트 (구: 연핑크 rgba(255,35,127,0.05)) */
  border: 1px solid var(--c-indigo-200);             /* #E5E9F5 연한 인디고 보더 (구: 핑크 rgba(196,0,81,0.35)) */
  border-radius: 4px;
  font-family: var(--ff-body);
}
.post-notice li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 500;                                  /* 처리안내 4줄: 조금 더 얇게 (600→500) */
  line-height: 1.65;
  color: var(--c-gray-800);                          /* 글자색 더 어둡게 (#2a2a2a) */
  letter-spacing: -0.2px;
}
.post-notice li + li { margin-top: 8px; }
.post-notice li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-pink-500);                     /* 핑크 처리안내에 맞춘 불릿 */
}

/* 이전 / 다음 글 네비 */
.post-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #d8dde6;
  border-bottom: 1px solid #d8dde6;
  margin-bottom: 40px;
}
.post-nav__item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 20px;   /* 가운데 칸 0까지 수축 허용 → 제목 … 말줄임 */
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  text-decoration: none;
  color: #2a2e43;
  border-bottom: 1px solid #ebeef5;
  transition: background 0.15s;
}
.post-nav__item:last-child { border-bottom: 0; }
.post-nav__item:hover { background: #f7f8fd; }
.post-nav__label {
  font-weight: 700;
  font-size: 15px;
  color: #6A7180;
  letter-spacing: 0;
}
.post-nav__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  color: #333338;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-nav__lock { flex-shrink: 0; width: 14px; height: 14px; opacity: 0.7; }   /* 비밀글 자물쇠 (제목 앞) */
.post-nav__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.post-nav__arrow {
  display: inline-flex;
  color: #6A7180;
  justify-self: end;
}

/* 하단 액션 (목록으로 등) */
.post-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}
.btn-list--lg {
  height: 56px;
  padding: 0 36px;
  font-size: 17px;
  background: var(--c-indigo-400);   /* indigo 400 #737686 */
  color: #fff;
  border-color: var(--c-indigo-400);
}
.btn-list--lg:hover {
  background: var(--c-indigo-500);   /* indigo 500 — 한 단계 진하게 */
  border-color: var(--c-indigo-500);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(58, 61, 78, 0.28);
}
.btn-list--lg .btn-list__icon { color: #fff; }

/* 삭제 버튼 — 빨강 라인형(보더+글씨) → hover 빨강 채움. .btn-list--lg 인디고 채움 위에 override(이후 선언이라 우선). 파괴적 동작이라 confirm 동반. */
.btn-list--danger {
  background: #fff;
  border-color: #d32f2f;
  color: #d32f2f;
}
.btn-list--danger:hover {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(211, 47, 47, 0.28);
}
.btn-list--danger .btn-list__icon { color: currentColor; }

/* 글쓰기 하단: 등록/취소 동일 크기 (위계는 색으로만 — 등록=채움 / 취소=외곽선) */
.post-actions--write .suggest-write-submit,
.post-actions--write .suggest-write-cancel {
  height: 56px;
  padding: 0 36px;
  min-width: 140px;
  font-size: 17px;
}

/* 등록 버튼: 기본=뮤트(비활성 느낌) → 필수입력+필수동의 충족 시 .is-ready 로 브랜드색 활성 */
/* [운영정본복원-20260817] 운영(https://www.junggu.seoul.kr/chief/css/style.css 1438~1461)의 2단 상태를 되돌린다.
   ─ 08-15 [FIX-SUBMITBTN-20260815] 는 「그 JS 가 구현된 적이 없어(js 전체에 is-ready 0건)」를 근거로
     기본 상태를 브랜드색으로 바꿨는데, 그 근거 문장은 사실과 다르다. `js/` 폴더에는 없지만
     is-ready 토글은 HTML 인라인 <script> 2곳(suggestion-write.html:499 · suggestion-edit.html:501)에
     실제로 살아 있다. 즉 「영원히 뮤트」 전제가 성립하지 않으므로 운영 정본으로 복원한다.
   ─ 다만 운영값 그대로인 흰 글자 + #ACB0BD 는 명도대비 2.17 로 KWCAG 4.5:1 미달이다.
     운영 배경(#ACB0BD)은 유지하고 글자색만 --c-indigo-500(#3A3D4E)로 올려 4.96:1 을 확보했다.
     활성(.is-ready)은 흰 글자 + #C40051 = 6.06:1 로 종전과 동일. */
.post-actions--write .suggest-write-submit {
  background: var(--c-indigo-300);     /* 뮤트 회색 #ACB0BD — 운영과 동일 */
  border-color: var(--c-indigo-300);
  color: var(--c-indigo-500);          /* #3A3D4E — 대비 4.96:1 (운영의 #fff = 2.17 미달 보정) */
  cursor: default;
}
.post-actions--write .suggest-write-submit:hover {
  background: var(--c-indigo-300);     /* 미완성 상태는 hover 무반응 */
  border-color: var(--c-indigo-300);
  transform: none;
  box-shadow: none;
}
.post-actions--write .suggest-write-submit.is-ready {
  background: var(--c-primary);       /* 폼 완성 → 브랜드색 #C40051 */
  border-color: var(--c-primary);
  color: #fff;                        /* 대비 6.06:1 */
  cursor: pointer;
}
.post-actions--write .suggest-write-submit.is-ready:hover {
  background: var(--c-primary-soft);       /* hover 한 단계 진하게 */
  border-color: var(--c-primary-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(58, 61, 78, 0.22);   /* 그림자만 인디고화 (구: 핑크 rgba(196,0,81,0.22)) */
}

/* ===== 반응형 (POST VIEW) — 본문 17 기준 위계 ===== */
@media (max-width: 1280px) {
  .post-view              { padding: 30px 32px; }
  .post-view__title       { font-size: 24px; }
  .post-view__meta        { font-size: 15px; }
  .post-view__body        { font-size: 16px; }
  .post-view__attach-item { font-size: 14px; }
  .post-answer            { padding: 26px 32px; }
  .post-answers__title    { font-size: 20px; }
  .post-answer__dept      { font-size: 16px; }
  .post-answer__date      { font-size: 14px; }
  .post-answer__body      { font-size: 16px; }
  .post-answer__attach-item { font-size: 14px; }
  .post-rating            { padding: 26px 32px; }
  .post-rating__title     { font-size: 18px; }
  .post-rating__star      { font-size: 28px; }
  .post-nav__label        { font-size: 14px; }
  .post-nav__title        { font-size: 16px; }
  .btn-list               { height: 46px; padding: 0 20px; font-size: 16px; }
  .btn-list--lg           { height: 52px; padding: 0 32px; font-size: 16px; }
}

@media (max-width: 768px) {
  .post-view              { padding: 22px 18px; }
  .post-view__tags        { gap: 6px; }
  .post-view__title       { font-size: 20px; }
  .post-view__meta        {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    font-size: 14px;
  }
  .post-view__meta-item   {
    padding: 0;
    border-right: 0;
  }
  .post-view__body        { font-size: 15px; padding: 22px 0 4px; }
  .post-view__attach      { padding: 14px 16px; }
  .post-view__attach-item { font-size: 13px; }

  /* 처리상태 스테퍼 — 모바일 세로 stack */
  .post-status-steps      { flex-direction: column; gap: 8px; }
  .post-status-step       { justify-content: flex-start; padding: 12px 14px; font-size: 14px; border-radius: 6px; }
  .post-status-step + .post-status-step { border-left: 0; }
  .post-status-step__date { margin-left: auto; }

  .post-answer            { padding: 20px 18px; }
  .post-answer__head      { gap: 8px; margin-bottom: 14px; padding-bottom: 10px; }
  .post-answers__title    { font-size: 17px; }
  .post-answer__dept      { font-size: 15px; word-break: keep-all; }   /* 부서명 어절 단위 줄바꿈 */
  .post-answer__date      { font-size: 13px; }
  .post-answer__body      { font-size: 15px; }
  .post-answer__attach-item { font-size: 13px; }

  .post-rating            { padding: 22px 18px; gap: 12px; }
  .post-rating__title     { font-size: 16px; }
  .post-rating__star      { font-size: 26px; }
  .post-rating__help      { font-size: 13px; }
  .post-notice            { padding: 18px 16px; }
  .post-notice li         { font-size: 13px; }

  .post-nav__item         {
    grid-template-columns: 60px 1fr 16px;
    gap: 14px;
    padding: 16px 4px;
  }
  .post-nav__label        { font-size: 13px; }
  .post-nav__title        { font-size: 14px; }

  .btn-list               { height: 40px; padding: 0 16px; font-size: 14px; }
  .btn-list--lg           { height: 46px; padding: 0 24px; font-size: 14px; }
}

/* ============================================================
   Share popover — 공유 버튼 클릭 시 펼쳐지는 말풍선
   ============================================================ */
.share-actions__share-wrap { position: relative; display: inline-flex; }

.share-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e9f5;
  border-radius: 10px;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.share-popover[hidden] { display: none; }

/* 말풍선 꼬리 (공유 버튼 위쪽) */
.share-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e5e9f5;
  border-top: 1px solid #e5e9f5;
  transform: rotate(45deg);
}

.share-popover__item {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #f7f8fd;
  border-radius: 999px;
  color: #2a2e43;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.share-popover__item:hover {
  background: #e5e9f5;
  color: var(--c-primary);
  transform: translateY(-1px);
}
.share-popover__item .ico { width: 18px; height: 18px; }

/* 공유 버튼 expanded 시 강조 */
.share-actions__btn[aria-expanded="true"] {
  background: #f7f8fd;
  border-color: var(--c-primary);
}

@media (max-width: 768px) {
  .share-popover { padding: 8px 10px; gap: 4px; }
  .share-popover__item { width: 34px; height: 34px; }
  .share-popover__item .ico { width: 16px; height: 16px; }
}


/* ====================================================================
   [chiefs]  (원본: components/chiefs/chiefs.css)
   ==================================================================== */
/* ============================================================
   CHIEFS — 역대구청장 페이지
   Figma 노드: 10102:3085 (페이지), 10102:3235 (big-card),
              10102:3730 (small-card), 10102:3910 (관선)
   ============================================================ */

.chiefs {
  font-family: var(--ff-body);
  color: #121212;
}

/* ===== 민선구청장 섹션 ===== */
.chiefs__section {
  margin-bottom: var(--gap-section);
}
.chiefs__section:last-child { margin-bottom: 0; }

.chiefs-elected {
  display: grid;
  grid-template-columns: 362px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;  /* big-card 가 우측 small list 2행 높이(492)에 맞춰 늘어남 */
}

/* big-card — 민선9기(11대) 현임 구청장 */
.chief-big {
  background: #fff;
  border: 2px solid var(--c-primary);   /* 현임(11대 김길성) 박스만 핑크 테두리 — .chief-big 는 현임 카드 단독이므로 다른 대수(.chief-small/.chief-appointed) 미영향 */
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  filter: drop-shadow(0 0 10px rgba(58, 61, 78, 0.18));   /* #3A3D4E 인디고 톤 그림자 (테두리 인디고 통일에 맞춤, 구: 핑크 rgba(196,0,81,0.15)) */
}
.chief-big__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
}
.chief-big__photo {
  width: 220px;
  max-width: 100%;          /* 모바일: 카드 폭 좁아지면 비율대로 축소 */
  height: auto;
  aspect-ratio: 220 / 270;  /* 항상 figma 비율 유지 (세로 눌림 방지) */
  flex-shrink: 0;           /* figma shrink-0 — 카드 stretch 에도 비율 고정 */
  background: #d9dbe0;
  border-radius: 4px;
  overflow: hidden;
}
.chief-big__photo { position: relative; }
.chief-big__photo img {
  position: absolute;
  left: -1.818%;            /* figma image74: left -4 / 220 */
  top: -0.37%;              /* top -1 / 270 */
  width: 103.636%;          /* 227.998 / 220 */
  height: 100.37%;          /* 271 / 270 */
  max-width: none;
  object-fit: cover;
  display: block;
}
.chief-big > div:not(.chief-big__photo) { width: 100%; text-align: center; }   /* 이름·날짜 wrapper 만 (photo 제외) */
.chief-big__name {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 38px;
  color: #121212;
  margin: 0;
  line-height: 1.2;
}
.chief-big__term {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  color: #6b6b6b;
  margin: 4px 0 0;
  line-height: 1;
}

/* right column — 역대 민선 small-card 5×2 grid */
.chiefs-elected__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 238px;
  gap: 16px;
}

.chief-small {
  border: 1px solid var(--c-indigo-200);   /* #E5E9F5 — 나머지 역대(민선10기~) 박스 테두리 인디고 200 (11대=핑크와 구분) */
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  overflow: hidden;
}
.chief-small__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #9093a2;
  color: #fff;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
.chief-small__photo {
  width: 88px;
  height: 100px;
  background: #d9dbe0;
  border: 1px solid #ebeef8;
  border-radius: 3px;
  overflow: hidden;
}
.chief-small__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chief-small__name {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 24px;
  color: #121212;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1;
}
.chief-small__term {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 13px;
  color: #6b6b6b;
  text-align: center;
  margin: 0;
  line-height: 1;
}

/* ===== 관선구청장 섹션 ===== */
.chiefs-appointed {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.chief-appointed {
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  overflow: hidden;
}
.chief-appointed__photo {
  width: 88px;
  height: 100px;
  background: #d9dbe0;
  border: 1px solid #ebeef8;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.chief-appointed__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chief-appointed__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.chief-appointed__order {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 14px;
  color: #575a6a;
  margin: 0;
  line-height: 1;
}
.chief-appointed__name {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 22px;
  color: #121212;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1;
}
.chief-appointed__term {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 13px;
  color: #6b6b6b;
  margin: 4px 0 0;
  line-height: 1.4;
}

/* 섹션 헤더 (옵션 — 시안엔 없지만 접근성용 시각적 hidden) */
.chiefs__heading {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   반응형
   ============================================================ */
/* PC 좁은 폭(≤1280): 시안 2열 유지, big-col 폭만 살짝 축소 */
@media (max-width: 1280px) {
  .chiefs-elected { grid-template-columns: 320px minmax(0, 1fr); gap: 18px; }
  .chief-big { padding: 20px; gap: 18px; }
  .chief-big__photo { width: 200px; height: auto; aspect-ratio: 220 / 270; }  /* 비율 유지(0.815), 세로 눌림 방지 */
  .chief-big__name { font-size: 32px; }
  .chief-big__chip { font-size: 16px; }

  .chiefs-elected__list { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
  .chiefs-appointed { gap: 14px; }
  .chief-appointed { padding: 16px; }
}

/* 태블릿(≤1024): 1열 reflow — big-card 최상단, small 4단, 관선 4단 */
@media (max-width: 1024px) {
  .chiefs-elected { grid-template-columns: 1fr; gap: 20px; }
  .chiefs-elected__list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .chiefs-appointed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .chiefs__section { margin-bottom: 40px; }
  .chiefs-elected {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chief-big { padding: 20px; gap: 14px; }
  .chief-big__photo { width: 160px; height: auto; aspect-ratio: 220 / 270; }  /* 비율 유지(0.815), 세로 눌림 방지 */
  .chief-big__name { font-size: 26px; }
  .chief-big__chip { font-size: 14px; padding: 5px 10px; }
  .chief-big__term { font-size: 14px; }

  .chiefs-elected__list {
    grid-template-columns: 1fr;   /* 모바일: 박스 모두 한 줄(1열) */
    grid-auto-rows: auto;
    gap: 12px;
  }
  .chief-small { padding: 16px; gap: 10px; }
  .chief-small__name { font-size: 20px; }
  .chief-small__chip { font-size: 12px; padding: 3px 7px; }

  .chiefs-appointed { grid-template-columns: 1fr; gap: 12px; }   /* 모바일: 관선(회색) 박스도 한 줄 */
  .chief-appointed { padding: 12px 14px; gap: 12px; min-height: 0; }   /* 1열에서 140px min-height 빈공간 제거 → 내용에 맞게 컴팩트 */
  .chief-appointed__photo { width: 72px; height: 84px; }
  .chief-appointed__name { font-size: 18px; }
  .chief-appointed__order { font-size: 12px; }
  .chief-appointed__term { font-size: 12px; white-space: nowrap; }
  .chief-appointed__term br { display: none; }   /* 모바일 1열: 날짜 한 줄 (데스크톱 좁은 칸용 줄바꿈 해제) */
}


/* ====================================================================
   [greeting]  (원본: components/greeting/greeting.css)
   ==================================================================== */
/* ============================================================
   GREETING — 인사말+프로필 통합 페이지 (시안 노드 10522:9901)
   세 섹션: Hero(10522:9907) · 인사말(10522:9915) · PROFILE(10522:10143)
   풀폭(100vw) 섹션은 .board-page 컨테이너 밖으로 확장 (mf-hero 패턴 동일)
   페이지 스코프: greeting.html 의 .board-page:has(.greeting-hero) — 운영 dev 규칙(main=board-page만)에 맞춰 page클래스 없이 고유 자식으로 재선택
   ============================================================ */

/* ===== Hero — 풀폭 중구 배경 + 네이비 오버레이 (시안 10522:9907, h-460) ===== */
.greeting-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;             /* 컨테이너 밖 풀폭 */
  /* 2026-06-23 B안: 고정높이 대신 이미지 비율(1920:500) 추종 → 폭이 넓어져도 세로가 함께 늘어 손·책상까지 노출(광폭 "비율 엉망" 완화). 양끝 가드 min 320(텍스트 floor)/max 560(광폭 폭주 방지). 1025~2150px 무크롭, 그 위만 미세크롭(center top이라 머리 보존). */
  aspect-ratio: 1920 / 500;
  min-height: 320px;
  max-height: 560px;
  overflow: hidden;
  background: var(--c-indigo-750);   /* #1A223D 네이비 base */
  isolation: isolate;
}
.greeting-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/greeting-hero-bg.png");
  background-size: cover;
  background-position: center top;   /* 2026-06-23: 넓은 창(>1766px)에서 cover가 상하를 잘라 구청장 머리가 컷되던 문제 → 상단 고정으로 머리 항상 노출(하단 우선 크롭). 좁은 창은 좌우 크롭이라 무영향. */
}
.greeting-hero__bg::after {           /* 좌측 네이비 그라데이션 (텍스트 가독 + 우측 인물 노출) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-indigo-750) 85%, transparent) 0%, color-mix(in srgb, var(--c-indigo-750) 50%, transparent) 40%, color-mix(in srgb, var(--c-indigo-750) 10%, transparent) 74%, transparent 100%);
}
.greeting-hero__inner {
  width: min(calc(100% - (var(--content-pad-x-sub) * 2)), var(--content-w-sub));
  margin: 0 auto;
  min-height: 0;
  height: 100%;                 /* B안: aspect-ratio 부모 높이를 채우고 텍스트는 세로중앙 유지 */
  padding: 18px 0;
  position: relative;
  display: flex;
  align-items: center;          /* 배경 위 텍스트 세로 가운데 정렬 — 사용자 요청 */
  justify-content: space-between;
  gap: 40px;
}
.greeting-hero__copy {
  position: relative;
  z-index: 1;
  letter-spacing: -1px;
}
.greeting-hero__eyebrow {
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--c-text-white);
  margin: 0 0 13px;
}
.greeting-hero__headline {
  font-family: var(--ff-title);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  color: var(--c-text-white);
  margin: 0;
  white-space: nowrap;
}
.greeting-hero__headline em {       /* "중구" 강조 (시안: Bold weight 차이) */
  font-style: normal;
  font-weight: 700;
}
.greeting-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
}
.greeting-hero__author-role {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 19px;
  color: var(--c-text-white);
}
.greeting-hero__sign {
  display: block;
  width: 132px;
  height: auto;
  /* 검정 서명 PNG → 흰색 렌더 (별도 흰색 에셋 안 만들고 재사용) */
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.greeting-hero__portrait {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 418px;
  flex: 0 0 auto;
}
.greeting-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 인사말 — 좌 소제목 / 우 본문 (시안 10522:9915, gap 120) ===== */
.greeting-msg {
  display: flex;
  gap: 120px;
  padding: 80px 0;
}
.greeting-msg__lead {
  flex: 0 0 422px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--c-indigo-700);     /* #2A2E43 */
}
.greeting-msg__lead strong { font-weight: 700; }
.greeting-msg__body {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-text-default);   /* #111 */
}
.greeting-msg__body p { margin: 0; }
.greeting-msg__body p + p { margin-top: 1.5em; }
.greeting-msg__body strong { font-weight: 700; }

/* ===== PROFILE — 풀폭 옅은 회색 + 학력/경력 타임라인 (시안 10522:10143) ===== */
.profile {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;             /* 컨테이너 밖 풀폭 */
  background: var(--c-indigo-75) url("../images/bg-profile.png") bottom center / 100% auto no-repeat; /* #F5F5FC + 하단 도시 일러스트 */
  padding: 80px clamp(24px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.profile__head { text-align: center; }
.profile__eyebrow {
  font-family: var(--ff-serif);   /* Cormorant Infant (시안) */
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.08px;
  color: var(--c-primary);        /* #C40051 */
  margin: 0 0 4px;
}
.profile__title {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 48px;
  line-height: normal;
  letter-spacing: -1px;
  color: var(--c-indigo-700);     /* #2A2E43 */
  margin: 0;
}
.profile__title strong { font-weight: 700; }
.profile__title-br { display: none; }   /* 데스크탑: 줄바꿈 숨김(한 줄) — 모바일서만 표시 */

/* 타임라인 — 라벨 | 점 레일 | 이벤트 (시안 10533:6964) */
.profile__timeline {
  width: fit-content;          /* 내용 폭에 맞춰 줄여 헤더와 가운데 정렬 — 사용자 요청 */
  max-width: 800px;
  margin: 0 auto;
}
.profile-group {
  display: grid;
  grid-template-columns: 150px 44px max-content;   /* 라벨 150 / 레일 44 / 이벤트(내용폭) — 가운데 정렬용 */
  align-items: stretch;
}
.profile-group__label {
  grid-column: 1;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 34px;
  line-height: normal;
  color: #212429;
  text-align: right;
  padding-top: 4px;
}
/* 점 레일: 세로 라인 + 각 이벤트 앞 점은 .profile-event::before 로 */
.profile-group__rail {
  grid-column: 2;
  justify-self: center;
  width: 2px;
  margin-top: 18px;               /* 첫 점 중심에서 시작 */
  background: #dbdee0;
}
.profile-group:last-child .profile-group__rail { margin-bottom: 18px; }  /* 마지막 그룹 레일 끝 정리 */
.profile-group__events {
  grid-column: 3;
  list-style: none;
  margin: 0;
  padding: 8px 0 72px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.profile-group:last-child .profile-group__events { padding-bottom: 0; }
.profile-event {
  position: relative;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  color: #404247;
}
.profile-event::before {          /* 레일 위 점 (시안 ellipse 13px, pink) */
  content: "";
  position: absolute;
  top: 50%;
  left: -28.5px;                  /* 점 중심을 레일(44px 칸) 라인에 정확히 정렬 — 사용자 요청 */
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--c-primary);   /* #C40051 */
}

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .greeting-hero__eyebrow  { font-size: 26px; }
  .greeting-hero__headline { font-size: 46px; }
  .greeting-msg            { gap: 64px; }
  .greeting-msg__lead      { flex-basis: 360px; font-size: 32px; }
  .profile__title          { font-size: 40px; }
}

/* 태블릿 이하: hero 인물 축소, 인사말 1단, profile 라벨 위로 */
@media (max-width: 1024px) {
  .greeting-hero { aspect-ratio: auto; min-height: 0; max-height: none; }   /* B안: 태블릿↓는 비율추종 해제, 콘텐츠 기반 높이(현행 유지) */
  .greeting-hero__inner {
    min-height: 0;
    height: auto;
    padding: 48px 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .greeting-hero__copy { padding-bottom: 0; order: 1; }
  .greeting-hero__eyebrow  { font-size: 24px; white-space: normal; }
  .greeting-hero__headline { font-size: 40px; line-height: 1.15; white-space: normal; }
  .greeting-hero__portrait {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
  }
  .greeting-msg {
    flex-direction: column;
    gap: 28px;
    padding: 56px 0;
  }
  .greeting-msg__lead { flex-basis: auto; font-size: 30px; }
  .greeting-msg__body { font-size: 18px; }
  .profile { padding: 56px clamp(24px, 5vw, 96px); gap: 56px; }
  .profile__title { font-size: 32px; }
  /* 타임라인: 라벨을 이벤트 위로 (2행), 레일 제거 */
  .profile-group { grid-template-columns: 24px 1fr; }
  .profile-group__label {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
    font-size: 26px;
    margin-bottom: 20px;
    padding-top: 0;
  }
  .profile-group__rail {
    grid-column: 1;
    grid-row: 2;
    margin-top: 12px;
  }
  .profile-group__events {
    grid-column: 2;
    grid-row: 2;
    padding-bottom: 48px;
    gap: 28px;
  }
  .profile-event::before { left: -18.5px; }   /* 모바일 점도 레일 정중앙 */
}

@media (max-width: 768px) {
  .greeting-hero__eyebrow  { font-size: 20px; }
  .greeting-hero__headline { font-size: 30px; line-height: 1.2; }
  .greeting-hero__author   { margin-top: 28px; gap: 10px; }
  .greeting-hero__author-role { font-size: 16px; }
  .greeting-hero__sign     { width: 108px; }
  .greeting-hero__portrait { max-width: 280px; }
  /* Hero 풀블리드(모바일): board-page가 overflow-x:clip + 좌우 20px 라 hero 100vw 탈출이 막혀
     어두운 배경 양옆에 여백이 생김 → greeting 페이지만 board-page를 풀폭+패딩으로 바꿔 화면 끝까지 차게 함 */
  .board-page:has(.greeting-hero) { width: 100%; padding: 0 20px 40px; }
  .greeting-msg { padding: 44px 0; }
  .greeting-msg__lead { font-size: 24px; }
  .greeting-msg__body { font-size: 16px; line-height: 1.65; }
  .profile { padding: 44px clamp(20px, 5vw, 96px); gap: 40px; }
  .profile__title { font-size: 24px; line-height: 1.3; }   /* 헤더는 가운데(base center) — 타임라인 가운데와 맞춤 */
  .profile__title-br { display: inline; }  /* 모바일: '하나되는 중구를 위해' 다음 줄바꿈 강제(가운데 2줄) */
  .profile__eyebrow { font-size: 14px; }                   /* 위계: 작은 kicker (was 20) */
  .profile-group__label { font-size: 18px; }               /* 위계: 타이틀 24보다 작게 (was 22) */
  .profile-event { font-size: 16px; }
}


/* ====================================================================
   [manifesto]  (원본: components/manifesto/manifesto.css)
   ==================================================================== */
/* ============================================================
   MANIFESTO — 매니페스토란 (구민과의 약속)
   Figma 노드: 10103:2794 / 10147:3610
   섹션: hero(인트로) · 한국의 매니페스토(SMART) · 정치선진국(국가 2열)
   ============================================================ */

/* ===== 공통: placeholder (사용자 직접 추출 이미지 자리) ===== */
.manifesto-page .ph-extract {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #eceef2;
  border: 1px dashed #a7adba;
  border-radius: 8px;
  color: #6b7180;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.3px;
  padding: 12px;
  box-sizing: border-box;
}

/* 매니페스토 페이지는 page-header art 만 유지하고 본문은 풀폭 hero 포함 */
.manifesto-page .page-header::after { display: none; }

/* ============================================================
   eyebrow / 섹션 타이틀 / 설명 (공통 타이포)
   ============================================================ */
.mf-eyebrow {
  font-family: var(--ff-serif-italic);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.08px;
  line-height: normal;
  margin: 0;
}
.mf-section-title {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -1px;
  line-height: normal;
  color: var(--c-indigo-700);   /* 국가별 제목 전체 — 진한 인디고 #2A2E43 (구: 마룬 #7D0034) */
  margin: 4px 0 0;
}
.mf-section-title strong { font-weight: 700; }
.mf-desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #777676;
  text-align: center;
  margin: 0;
}
.mf-desc p { margin: 0; }

/* ============================================================
   HERO (인트로) — 풀폭 다크 배경 위 중앙 정렬
   ============================================================ */
.mf-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;          /* board-page 컨테이너 밖으로 풀폭 확장 */
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1A223D;   /* 네이비 base (구: 붉은 솔리드 #3D0019 → 오버레이 #1A223D 와 통일) */
  color: #fff;
  isolation: isolate;
}
/* 일러스트 배경 (figma 추출 이미지) */
.mf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1A223D;   /* 네이비 base (구: 붉은 솔리드 #3D0019) */
}
.mf-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 다크 오버레이 (시안 rgba(26,34,61,0.8)) */
.mf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(26, 34, 61, 0.8);   /* 핑크 rgba(61,0,25,0.8) → 네이비 #1A223D 80% 원복 */
  pointer-events: none;
}
.mf-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: min(1400px, calc(100% - 2 * var(--content-pad-x-sub)));
  padding: 70px 0;
  text-align: center;
}
.mf-hero__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mf-hero__eyebrow {
  font-family: var(--ff-serif-italic);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.08px;
  margin: 0;
  color: #fff;
}
.mf-hero__title {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1px;
  margin: 0;
  color: #fff;
}
.mf-hero__title strong { font-weight: 700; }
.mf-hero__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  max-width: 1270px;
  margin: 0;
}
.mf-hero__desc p { margin: 0; }
.mf-hero__desc .mf-gap { height: 1.5em; }
.mf-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 28px;
  background: var(--c-primary);
  border-radius: 6px;
  color: #fff;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.15s;
}
.mf-hero__cta:hover { background: var(--c-primary-soft); }
.mf-hero__cta svg, .mf-hero__cta .ico { width: 16px; height: 16px; display: block; }

/* ============================================================
   섹션 공통 래퍼 (한국 / 정치선진국)
   ============================================================ */
.mf-body { padding: var(--gap-section) 0; }
.mf-section { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.mf-section + .mf-section { margin-top: 100px; }
.mf-section__head { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.mf-section__heading { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mf-section .mf-desc { max-width: 960px; }

/* ============================================================
   SMART row — 5 단계 원 + 점선 커넥터
   ============================================================ */
.mf-smart {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  padding-top: 30px;
}
.mf-smart__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 160px;
  flex-shrink: 0;
}
.mf-smart__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
}
.mf-smart__circle--blue   { background: var(--c-primary); }
.mf-smart__circle--navy   { background: var(--c-primary-soft); }
.mf-smart__label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mf-smart__ko {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 22px;
  color: #222;
  line-height: normal;
}
.mf-smart__en {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  color: #777676;
  line-height: normal;
}
.mf-smart__conn {
  flex-shrink: 0;
  width: 80px;
  height: 110px;
  position: relative;
}
.mf-smart__conn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 55px;
  border-top: 2px dotted #c2c8d6;
}

/* ============================================================
   countries-row — 국가 카드 2열
   ============================================================ */
.mf-countries {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  width: 100%;
  border-top: 1px solid #c9ccd9;
  padding-top: 40px;
}
.mf-country {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
}
.mf-country__flag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.mf-country__flag img {
  height: 200px;          /* 높이 기준, PNG 원본 비율 그대로(원형/삐짐은 PNG에 내장) */
  width: auto;
  object-fit: contain;
  display: block;
}
.mf-country__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mf-country__name {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.mf-country__ko {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -1px;
  color: var(--c-indigo-700);   /* 국가별 제목(영국·미국 등) — 진한 인디고 #2A2E43 (구: 마룬 #7D0034), .mf-section-title 과 통일 */
  line-height: normal;
}
.mf-country__en {
  font-family: var(--ff-serif-italic);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.08px;
  color: #777676;
  line-height: normal;
}
.mf-country__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-gray-700, #555555);
  margin: 0;
}
.mf-country__desc p { margin: 0; }
.mf-country__desc .mf-gap { height: 1.5em; }

/* ============================================================
   반응형 — PC / 1280 / 768 / 375
   ============================================================ */
@media (max-width: 1280px) {
  .mf-hero { min-height: 480px; }
  .mf-hero__inner { gap: 44px; padding: 56px 0; }
  .mf-hero__title { font-size: 38px; }
  .mf-hero__desc { font-size: 16px; }
  .mf-section-title, .mf-hero__title { letter-spacing: -0.6px; }
  .mf-section-title { font-size: 38px; }
  .mf-desc { font-size: 16px; }
  .mf-body { padding: 60px 0; }
  .mf-section + .mf-section { margin-top: 72px; }
  .mf-section { gap: 44px; }

  /* SMART: 원 축소, 커넥터 축소 */
  .mf-smart__step { width: 128px; }
  .mf-smart__circle { width: 92px; height: 92px; font-size: 48px; }
  .mf-smart__conn { width: 48px; }
  .mf-smart__conn::before { top: 46px; }
  .mf-smart__ko { font-size: 20px; }

  /* countries */
  .mf-countries { gap: 48px; }
  .mf-country { gap: 28px; }
  .mf-country__flag { width: 160px; height: 160px; }
  .mf-country__ko { font-size: 24px; }
  .mf-country__en { font-size: 18px; }
  .mf-country__desc { font-size: 16px; }
}

@media (max-width: 768px) {
  .mf-hero { min-height: 0; }
  .mf-hero__inner { gap: 28px; padding: 44px 0; }
  .mf-hero__eyebrow { font-size: 14px; }
  .mf-hero__title { font-size: 26px; line-height: 1.45; }
  .mf-hero__desc { font-size: 14px; }
  .mf-hero__cta { font-size: 14px; padding: 13px 22px; }

  .mf-eyebrow, .mf-hero__eyebrow { font-size: 14px; letter-spacing: 0.8px; }   /* 모바일 보조 위계: EN eyebrow 축소(20→14) */
  .mf-section-title { font-size: 26px; }
  .mf-desc { font-size: 14px; }
  .mf-body { padding: 44px 0; }
  .mf-section { gap: 28px; }
  .mf-section + .mf-section { margin-top: 52px; }
  .mf-section__head { gap: 24px; }

  /* SMART: 가로 스크롤 대신 2열 그리드로 줄바꿈, 커넥터 숨김 */
  .mf-smart {
    flex-direction: column;        /* 모바일: 1개씩 세로 스택 */
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding-top: 16px;
    max-width: none;
  }
  .mf-smart__step { width: auto; }
  .mf-smart__conn { display: block; width: 2px; height: 34px; }   /* 세로 커넥터 보이게 */
  .mf-smart__conn::before {
    left: 50%; right: auto; top: 0; bottom: 0;
    transform: translateX(-50%);
    border-top: 0;
    border-left: 2px dotted #c2c8d6;   /* 세로 점선 */
  }
  .mf-smart__circle { width: 76px; height: 76px; font-size: 40px; }
  .mf-smart__ko { font-size: 18px; }
  .mf-smart__en { font-size: 13px; }

  /* countries: 세로 stack */
  .mf-countries {
    flex-direction: column;
    gap: 32px;
    padding-top: 28px;
  }
  .mf-country {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }
  .mf-country__flag { width: 130px; height: 130px; }
  .mf-country__body { align-items: center; }
  .mf-country__name { flex-wrap: wrap; justify-content: center; white-space: normal; }
  .mf-country__ko { font-size: 21px; }
  .mf-country__en { font-size: 16px; }
  .mf-country__desc { font-size: 14px; text-align: left; }
}

@media (max-width: 375px) {
  .mf-eyebrow, .mf-hero__eyebrow { font-size: 13px; }
  .mf-hero__title { font-size: 22px; }
  .mf-section-title { font-size: 22px; }
  .mf-smart { max-width: 300px; }
  .mf-smart__circle { width: 66px; height: 66px; font-size: 34px; }
}


/* 미디어 목록 탭 (포토갤러리/영상 네비) — 언론보도 pill 탭과 동일 룩 */
.media-tabs {
  display: flex;
  gap: 8px;
  width: fit-content;
  margin: 0 0 28px;
  padding: 4px;
  background: #f5f5f5;
  border-radius: 9999px;
}
.media-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 12px 40px;
  border-radius: 9999px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 18px;
  color: #464c53;
  letter-spacing: -1px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-tab:hover { color: #2a2e43; }
.media-tab.is-active { background: var(--c-primary); color: var(--c-white); font-weight: 600; }
@media (max-width: 768px) {
  .media-tabs { margin: 0 auto 20px; }   /* 모바일 가운데 정렬 */
  .media-tab { height: 44px; padding: 10px 24px; font-size: 15px; }
}
@media (max-width: 480px) {
  .media-tab { padding: 9px 18px; font-size: 14px; }
}

/* ====================================================================
   [media-card]  (원본: components/media-card/media-card.css)
   ==================================================================== */
/* ============================================================
   MEDIA CARD — 포토갤러리 / 영상 list 페이지 카드 그리드
   variant: .media-card--photo (4:3) / .media-card--video (16:9, ▶ 오버레이)
   ============================================================ */

/* 그리드 컨테이너 */
.media-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  margin-bottom: 60px;
}

/* 카드 — 포토는 title 위 / 영상은 image 위 */
.media-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  font-family: var(--ff-body);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* 포토: image → title (이미지 위, 제목 아래 — 기본 column 그대로) */
.media-card--photo { flex-direction: column; }
.media-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-primary);
  box-shadow: 0 12px 24px 0 rgba(58, 61, 78, 0.12);   /* 그림자만 인디고화 (구: 핑크 rgba(196,0,81,0.12)) */
}

/* 미디어 영역 (비율 컨테이너) */
.media-card__thumb {
  position: relative;
  width: 100%;
  background: #e5e7ea;
  overflow: hidden;
}
.media-card--photo .media-card__thumb { aspect-ratio: 4 / 3; }
.media-card--video .media-card__thumb { aspect-ratio: 16 / 9; }
.media-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 영상 ▶ 재생 오버레이 */
.media-card--video .media-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35));
  pointer-events: none;
}
.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.5);          /* 검정 50% */
  backdrop-filter: blur(4px);              /* 배경 흐림 */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.2s, background 0.2s;
}
.media-card__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 16px solid #fff;            /* 흰색 플레이 아이콘 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}
.media-card:hover .media-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.6);
}

/* 본문 영역 */
.media-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.media-card__title {
  font-weight: 600;
  font-size: 19px;
  color: #333338;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.media-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: #6A7180;
  font-weight: 400;
  margin-top: auto;
}
.media-card__meta-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #c9cfdf;
  border-radius: 50%;
}

/* 빈 상태 */
.media-empty {
  padding: 80px 20px;
  text-align: center;
  color: #6A7180;
  font-size: 17px;
}

/* ===== 반응형 =====
   분기 의도:
   - PC ≥1281 : 4단, 제목 22px
   - 태블릿 라지 1024~1280 : 3단, 제목 20px
   - 태블릿~모바일 ≤768 : 2단, 제목 17px
*/
@media (max-width: 1280px) and (min-width: 769px) {
  .media-cards { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; margin-bottom: 48px; }
  .media-card__body { padding: 14px 16px 18px; }
  .media-card__title { font-size: 18px; }
  .media-card__meta { font-size: 13px; }
}

@media (max-width: 768px) {
  .media-cards { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin-bottom: 32px; }
  .media-card__body { padding: 12px 14px 16px; gap: 6px; }
  .media-card__title { font-size: 16px; }
  /* 카드 가로폭이 좁아 날짜·조회수가 한 줄에 안 들어감 → 세로 정렬 */
  .media-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 12px;
  }
  .media-card__meta-dot { display: none; }   /* 세로 정렬이라 구분 점 불필요 */
  .media-card__play { width: 40px; height: 40px; }
  .media-card__play::before { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
}


/* ====================================================================
   [news-featured / news-hero]  포토뉴스·영상뉴스 리스트 상단 레이아웃
   - photo-list : 대표 1(좌) + 사이드 리스트 3(우)  → 나머지는 .media-cards 그대로
   - video-list : 히어로 1(전폭) + 3단 그리드(.media-cards 재사용)
   ==================================================================== */

/* 리스트 툴바 하단 갭은 .board-toolbar 기본값(40px)으로 공통 — 페이지별 오버라이드 제거(개발 요청) */

/* 2026-06-18 영상뉴스: 검색툴바를 히어로 위로 이동 → 2px 구분선을 툴바 아래로 동반(그리드에서 이전).
   spacing: 툴바 → padding 40 → 라인 → margin 40 → 히어로 (포토뉴스 배치와 동일 사상) */
.board-toolbar.video-line {
  height: auto;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--c-primary);
}

/* 공용 — 썸네일 위 NO 뱃지 */
.media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  pointer-events: none;
}

/* 공용 — NO + 날짜 메타 */
.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6A7180;
  letter-spacing: 0.01em;
}
.news-meta__no { font-weight: 700; letter-spacing: 0.04em; }

/* ===== 포토뉴스 — 대표 + 사이드 리스트 ===== */
/* 시안 10534:8200 — 토일바 아래 indigo550 2px 상단라인으로 구분된 "주요 소식" 섹션 */
.photo-featured {
  display: grid;
  grid-template-columns: minmax(0, 909fr) minmax(0, 651fr);   /* 시안 909 : (1600-909-40)=651 */
  gap: 40px;
  margin-bottom: 0;
  padding-top: 40px;
  border-top: 2px solid var(--c-primary);   /* 2026-06-18 색 indigo550→primary (말과글 라인색과 통일) */
}
.photo-featured__main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.photo-featured__thumb {
  position: relative;
  aspect-ratio: 909 / 682;                  /* 시안 대형카드 비율 */
  background: #e5e7ea;
  overflow: hidden;
}
.photo-featured__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.photo-featured__main:hover .photo-featured__thumb img { transform: scale(1.03); }
.photo-featured__thumb { transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.photo-featured__main:hover .photo-featured__thumb { box-shadow: 0 0 0 2px var(--c-primary); }  /* 2026-07-01: media-card/구정뉴스 카드처럼 primary 테두리 호버 통일 */
/* 이미지 위 하단 그라데이션 오버레이 — 제목(30) + 날짜(14) 흰색 */
.photo-featured__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
  color: #fff;
}
.photo-featured__overlay-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.3;
}
.photo-featured__overlay-date {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14px;
  line-height: 1.5;
  color: #fff;
}

.photo-featured__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
.photo-side-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 시안 썸네일 : 내용 = 1 : 1 */
  flex: 1 1 0;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}
.photo-side-card__thumb {
  position: relative;
  height: 100%;
  min-height: 116px;
  background: #e5e7ea;
  overflow: hidden;
}
.photo-side-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.photo-side-card:hover .photo-side-card__thumb img { transform: scale(1.04); }
.photo-side-card { transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.photo-side-card:hover { box-shadow: 0 0 0 2px var(--c-primary); }  /* 2026-07-01: media-card/구정뉴스 카드처럼 primary 테두리 호버 통일 */
.photo-side-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-left: 40px;             /* 시안 내용 pl40 */
}
.photo-side-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #333338;
  line-height: 1.4;
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.photo-side-card:hover .photo-side-card__title { color: var(--c-primary); }
.photo-side-card__date {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6A7180;
  letter-spacing: 0.14px;
  line-height: 1.5;
}

/* ===== 영상뉴스 — 히어로(풀폭 16:9, 오버레이 제목/날짜) + 3×2 그리드 ===== */
.video-hero {
  display: block;
  max-width: 1020px;          /* PC에서 hero 동영상 최대 폭 제한 — 사용자 요청 */
  margin: 0 auto 24px;        /* 가운데 정렬 + hero ↔ 총건수/검색 row gap-24 — 사용자 요청 */
  text-decoration: none;
  color: inherit;
}
.video-hero__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #e5e7ea;
  overflow: hidden;
}
.video-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.video-hero:hover .video-hero__thumb img { transform: scale(1.02); }
.video-hero__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.video-hero:hover .media-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.6);
}
/* 하단 그라데이션 위 제목/날짜 오버레이 */
.video-hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 40px;
}
.video-hero__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.4px;
}
.video-hero:hover .video-hero__title { color: #fff; }
.video-hero__date {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.14px;
  line-height: 1.5;
}

/* 영상 그리드 — 3단 + indigo550 2px 상단라인(시안 10534:7789), 나머지는 media-card--video 재사용 */
.media-cards.video-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}

/* ===== 반응형 (태블릿) ===== */
@media (max-width: 1280px) and (min-width: 769px) {
  .photo-featured { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
  .photo-featured__overlay-title { font-size: 24px; }
  .photo-featured__overlay-date { font-size: 13px; }   /* 위계: 큰 카드 날짜도 축소 */
  .photo-side-card { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .photo-side-card__thumb { min-height: 0; }   /* 태블릿: 썸네일이 flex 슬롯 넘어 겹치던 것 방지 */
  .photo-side-card__info { padding-left: 22px; }
  .photo-side-card__title { font-size: 17px; }
  .video-hero__title { font-size: 22px; }
  .video-hero__overlay { padding: 28px; }
  /* 영상 그리드는 태블릿에서도 3단 유지(3×2 정렬 보존) */
}

/* ===== 반응형 (모바일) — 세로 1열 스택, 썸네일 비율 유지 ===== */
@media (max-width: 768px) {
  .photo-featured { grid-template-columns: 1fr; gap: 16px; }
  .photo-featured__thumb { aspect-ratio: 16 / 11; }   /* 모바일 대형카드 비율 유지(무너짐 방지) */
  .photo-featured__overlay { padding: 16px 18px; }
  .photo-featured__overlay-title { font-size: 20px; }
  .photo-featured__overlay-date { font-size: 12px; }   /* 위계: 큰 카드 날짜도 모바일 축소 */
  .photo-featured__side { gap: 20px; }
  /* 모바일: 사이드 카드 = 썸네일 위 / 제목·날짜 아래 세로 스택 — 사용자 요청 */
  .photo-side-card { grid-template-columns: 1fr; gap: 10px; flex: 0 0 auto; }
  .photo-side-card__thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .photo-side-card__info { padding-left: 0; gap: 4px; }
  .photo-side-card__title { font-size: 16px; -webkit-line-clamp: 2; }
  .photo-side-card__date { font-size: 13px; }   /* 위계: 제목 16보다 작게 */
  .video-hero { margin-bottom: 20px; }
  .video-hero__overlay { padding: 16px 18px; gap: 6px; }
  .video-hero__title { font-size: 19px; }
  .video-hero__date { font-size: 12px; }   /* 위계: 히어로 날짜도 모바일서 축소(카드와 동일) — 사용자 요청 */
  .media-cards.video-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ====================================================================
   [media-view]  (원본: components/media-view/media-view.css)
   ==================================================================== */
/* ============================================================
   MEDIA VIEW — 포토 / 영상 상세 페이지
   variant: .media-view--photo / .media-view--video
   ============================================================ */

.media-view {
  margin-bottom: 32px;
  font-family: var(--ff-body);
  background: #fff;
  border: 1px solid #d8dde6;
  border-top: 2px solid var(--c-primary);   /* 2026-06-19 포토/영상 리스트 상단 라인과 통일 — 세부 페이지에도 적용 */
  border-radius: 0;
  padding: 60px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .media-view { padding: 24px; }
}

/* 큰 미디어 영역 — 본문 아래 80% 너비 가운데 정렬 */
.media-view__stage {
  position: relative;
  width: 80%;
  margin: 4px auto 0;
  background: #0f1525;
  border-radius: 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  .media-view__stage { width: 100%; }
}
.media-view--photo .media-view__stage { aspect-ratio: 4 / 3; max-height: 720px; }
.media-view--video .media-view__stage { aspect-ratio: 16 / 9; }
.media-view__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.media-view__stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 헤더 (제목 + 메타) */
.media-view__head {
  padding: 0 4px 22px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 24px;
}
/* 미디어 상세 — 분류 배지 + 게시/영상번호 (제목 위) */
.media-view__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.media-view__num {
  font-family: var(--ff-body);
  font-size: 14px;
  color: #6A7180;
}
.media-view__title {
  font-weight: 700;
  font-size: 28px;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}
.media-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  color: #6e7585;
  font-size: 16px;   /* 2026-06-19 post-view__meta(16px)와 통일 */
}
.media-view__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid #e5e9f5;
}
.media-view__meta-item:first-child { padding-left: 0; }
.media-view__meta-item:last-child  { border-right: 0; padding-right: 0; }
.media-view__meta dt { color: #6A7180; font-weight: 400; margin: 0; }
.media-view__meta dd { color: #2a2e43; font-weight: 500; margin: 0; }

/* 미디어 상세 — 제목 + 액션버튼(다운로드/YouTube) 우측 space-between (press-view 원문보기와 동일 사상) */
.media-view__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;   /* 제목 ↔ 게시일(메타) 여백 */
}
.media-view__title-row .media-view__title { margin: 0; }
.media-view__action-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--c-indigo-700);   /* 미디어 액션버튼 — 인디고 #2A2E43 (구: 핑크 --c-primary, 원문보기 시리즈와 통일) */
  color: #fff;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-view__action-btn svg { width: 18px; height: 18px; display: block; }
.media-view__action-btn:hover { background: var(--c-indigo-600); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(58, 61, 78, 0.22); }   /* hover 인디고 한단계 #323649 (구: 핑크 --c-primary-soft) */

/* 본문 */
.media-view__body {
  padding: 4px 4px 28px;
  font-size: 17px;
  color: #333338;
  line-height: 1.75;
  letter-spacing: -0.2px;
}
.media-view__body p { margin: 0 0 14px; }   /* 2026-06-19 post-view__body p(14px)와 통일 */
.media-view__body p:last-child { margin-bottom: 0; }

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .media-view        { padding: 40px; }   /* 2026-06-19 태블릿 패딩 축소 (60px 유지 버그 수정, post-view 정합) */
  .media-view__title { font-size: 24px; }
  .media-view__meta  { font-size: 15px; }
  .media-view__body  { font-size: 16px; }
}
@media (max-width: 768px) {
  .media-view__head { padding-bottom: 16px; margin-bottom: 18px; display: flex; flex-direction: column; }
  .media-view__title { font-size: 20px; margin-bottom: 10px; }
  /* 미디어 상세 — 모바일선 액션버튼을 조회수(meta) 아래로 재배치 */
  .media-view__title-row { display: contents; }   /* 제목·액션버튼을 head flex 항목으로 풀어 재정렬 */
  .media-view__action-btn { order: 1; align-self: flex-start; margin-top: 14px; padding: 8px 14px; font-size: 13px; }  /* 조회수(meta) 아래로 */
  .media-view__action-btn svg { width: 15px; height: 15px; }
  .media-view__meta  {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    font-size: 13px;
  }
  .media-view__meta-item { padding: 0; border-right: 0; }
  .media-view__body  { font-size: 15px; padding-bottom: 20px; }
  .media-view__body p { margin-bottom: 14px; }
}

/* ============================================================
   Media slider — photo-view 다중 이미지 슬라이더
   ============================================================ */
.media-slider {
  position: relative;
  background: #f1f3fa;
}
.media-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
}
.media-slider__item {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7ea;
}
.media-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* nav 화살표 */
.media-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 999px;
  color: #1a1a1a;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
  transition: background 0.15s, transform 0.15s;
}
.media-slider__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.media-slider__nav--prev { left: 14px; }
.media-slider__nav--next { right: 14px; }
.media-slider__nav .ico { width: 20px; height: 20px; }

/* 컨트롤 바 (도트 + 카운터 나란히) — 하단 중앙 */
.media-slider__controls {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  z-index: 2;
}
/* 인디케이터 dots */
.media-slider__dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.media-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.media-slider__dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

/* 카운터 (1 / 5) — 도트 우측에 나란히 */
.media-slider__counter {
  display: inline-flex;
  align-items: center;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 768px) {
  .media-slider__nav { width: 36px; height: 36px; }
  .media-slider__nav--prev { left: 8px; }
  .media-slider__nav--next { right: 8px; }
  .media-slider__nav .ico { width: 16px; height: 16px; }
  .media-slider__counter { font-size: 12px; padding-left: 8px; }
}


/* ====================================================================
   [press-list]  (원본: components/press-list/press-list.css)
   ==================================================================== */
/* ============================================================
   PRESS-LIST — 언론·인터뷰 리스트
   라벨 칩 → 제목 → (신문사 · 날짜), 우측 끝 원형 외부링크 버튼
   list 페이지 board-page 컨테이너 안에서 사용
   토큰: variables.css (--c-blue-500/600, --c-indigo-*, --ff-body)
   ============================================================ */
/* 탭 — 메인 '오직 구민을 위한' pill 탭 스타일 (왼쪽 정렬) */
.press-tabs {
  position: relative;
  display: flex;
  gap: 8px;
  width: fit-content;
  margin: 0 0 28px;
  padding: 4px;
  background: #f5f5f5;
  border-radius: 9999px;
}
.press-tabs__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--c-primary);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
  pointer-events: none;
}
.press-tab {
  position: relative;
  z-index: 1;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  background: transparent;
  border: 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 18px;
  color: #464c53;
  letter-spacing: -1px;
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
}
.press-tab.is-active { color: var(--c-white); font-weight: 600; }
@media (max-width: 768px) {
  .press-tabs { margin: 0 auto 20px; }   /* 모바일에선 탭 가운데 정렬 */
  .press-tab { height: 44px; padding: 10px 24px; font-size: 15px; }
}
@media (max-width: 480px) {
  .press-tab { padding: 9px 18px; font-size: 14px; }
}

.press-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-primary);        /* 2026-06-18 굵기 1→2px (포토·영상뉴스 라인과 통일) — 리스트 상단 라인 */
}

.press-item {
  border-bottom: 1px solid #e5e9f5;     /* 항목 사이 옅은 회색 구분선 */
}

.press-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.press-item__link:hover { background: #f7f8fd; }

/* 좌측 텍스트 그룹 (head[칩+제목] / 메타) */
.press-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;                             /* head ↔ meta 간격 */
  min-width: 0;
  flex: 1 1 auto;
}

/* head — 라벨 칩 + 제목을 한 줄에 가로 나란히 */
.press-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* 제목 — 큰 글씨, 검정, 남은 폭 차지하며 1줄 ellipsis */
.press-item__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #1a1a1a;
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 메타 — 신문사 · 날짜 */
.press-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: -0.2px;
}
.press-item__source { color: var(--c-indigo-700); font-weight: 600; }   /* 신문사 — 진한 인디고 #2A2E43 (구: 핑크 --c-primary) */
.press-item__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c9ccd9;                   /* indigo-250 */
}
.press-item__date { color: #6A7180; font-weight: 400; }     /* 날짜 — 회색 */

/* 우측 끝 외부링크 버튼 (텍스트 "기사 보기" + 아이콘) */
.press-item__link-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid #e5e9f5;
  border-radius: 999px;
  background: #fff;
  color: #2a2e43;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.press-item__link-btn .ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.press-item__link:hover .press-item__link-btn {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(58, 61, 78, 0.22);   /* 그림자만 인디고화 (구: 핑크 rgba(196,0,81,0.22)) */
}

/* ============================================================
   Responsive (1280 / 768 / 375) — PC 레이아웃 유지, 위계만 축소
   ============================================================ */
@media (max-width: 1280px) {
  .press-item__link   { padding: 24px 4px; gap: 18px; }
  .press-item__meta   { font-size: 13px; }
  .press-item__link-btn { padding: 9px 14px; font-size: 14px; }
  .press-item__link-btn .ico { width: 16px; height: 16px; }
}

@media (max-width: 768px) {
  .press-item__link   { padding: 20px 2px; gap: 14px; flex-direction: column; align-items: stretch; }  /* 모바일: 세로 스택 → 버튼 하단 */
  .press-item__body   { gap: 8px; }
  .press-item__head   { flex-wrap: wrap; gap: 8px; }   /* 좁으면 라벨 위·제목 아래로 wrap */
  .press-item__title  {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 18px;
    line-height: 1.4;
  }
  .press-item__meta   { font-size: 12px; gap: 8px; flex-wrap: wrap; }
  .press-item__link-btn { padding: 12px 16px; font-size: 14px; width: 100%; justify-content: center; }  /* 모바일: 카드 하단 풀폭 버튼 */
  .press-item__link-btn .ico { width: 15px; height: 15px; }
}

@media (max-width: 480px) {
  .press-item__link   { padding: 18px 0; gap: 12px; }
  .press-item__title  { font-size: 16px; }
  .press-item__link-btn { padding: 11px 14px; font-size: 13px; }
  .press-item__link-btn .ico { width: 14px; height: 14px; }
}


/* ====================================================================
   [promise-card]  (원본: components/promise-card/promise-card.css)
   ==================================================================== */
/* ============================================================
   PROMISE CARD — 공약/문서 카드 2열 그리드
   Figma 노드: 10103:2383 (5대 공약 및 선거공보), 10104:3517 (card-promise)
   ============================================================ */

/* 2열 카드 컨테이너 */
.promise-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  margin-bottom: var(--gap-section);
}
/* pledge: 콘텐츠↔푸터 갭은 board-page padding-bottom(80/60/40)이 담당 → 카드 margin-bottom 중복 제거
   (사용자 요청: PC 80px, 모바일 위계 따라 축소) */
.promise-cards { margin-bottom: 0; }   /* promise-cards는 공약 페이지에만 있어 직접 스코프(개발: main 페이지클래스 제거) */

/* 카드 자체 */
.promise-card {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: stretch;
  padding: 40px;
  background: #fff;
  border: 1px solid var(--c-indigo-500);   /* #3A3D4E — 카드 테두리 인디고 메인 통일 (구: --c-primary-soft 핑크 → indigo-350). .pledge-spot 등 동일 톤 */
  border-radius: 4px;
  box-shadow: 0 8px 12px 0 rgba(58, 61, 78, 0.12);   /* 카드 그림자 — 유지 */
  overflow: hidden;
  font-family: var(--ff-body);
}

/* 좌측 이미지 placeholder (240×340 figma — 카드 인스턴스 비례에 맞춰 조정) */
.promise-card__image {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 5 / 7;    /* 2026-06-26: 썸네일 비율 5:7 고정(원래 200×280, 포스터 실측 0.72와 거의 동일 → 안 잘림). 폭만 200→240 으로 키움 = 비율 유지한 채 확대(카드 높이도 ↑). 더 키우려면 width 값만 조정 */
  background: #e5e7ea;
  border: 1px solid var(--c-gray-250);
  border-radius: 12px;
  display: block;
  background-size: cover;
  background-position: center;
}
/* 카드별 표지 이미지 (포스터) */
.promise-card__image--pledge   { background-image: url("../images/img_poster1.png"); }
.promise-card__image--bulletin { background-image: url("../images/img_poster2.png"); }

/* 우측 콘텐츠 */
.promise-card__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 0;
}

.promise-card__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 30px;
  color: #2a2a2a;
  letter-spacing: -1px;
  line-height: 1.25;
  margin: 0 0 14px;
}

.promise-card__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  color: #575a6a;
  letter-spacing: -0.4px;
  line-height: 1.55;
  margin: 0;
}

/* 버튼 행 (하단 정렬 — content space-between 으로 자동 하단) */
.promise-card__buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 24px;
}

.promise-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #fff;
  border-radius: 6px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.promise-card__btn img,
.promise-card__btn svg,
.promise-card__btn-ico {
  width: 16px;
  height: 16px;
  display: block;
}
/* 2026-06-26: 버튼 아이콘을 인라인 SVG(stroke=currentColor)로 변경.
   기존 CSS mask 방식은 file:// 로컬 미리보기에서 SVG 로드가 차단돼 아이콘이 안 보였음(서버=HTTP에선 됨).
   인라인 SVG 면 file://·서버 모두 표시되고, stroke=currentColor 라 hover 시 버튼 글자색(흰색)을 그대로 따라감. */
.promise-card__btn-ico { stroke: currentColor; }

/* 미리보기 버튼 (gray outline) */
.promise-card__btn--preview {
  border: 1px solid #777676;
  color: #777676;
}
.promise-card__btn--preview:hover { background: #777676; color: #fff; }

/* 다운로드 버튼 (blue outline) */
.promise-card__btn--download {
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
}
.promise-card__btn--download:hover { background: var(--c-primary); color: #fff; }
/* 버튼 아이콘 mask — currentColor 상속 → 기본 버튼색, hover 시 흰색 따라옴 */
.ico--pl-eye { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-pl-eye.svg); mask-image: url(../images/icons/ui/ic-pl-eye.svg); }
.ico--pl-download { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-pl-download.svg); mask-image: url(../images/icons/ui/ic-pl-download.svg); }

/* ===== 반응형 — 본문 17 기준 위계 ===== */
@media (max-width: 1280px) {
  .promise-cards          { gap: 24px; margin-bottom: 60px; }
  .promise-card           { padding: 30px; gap: 28px; }
  .promise-card__image    { width: 160px; height: 224px; }
  .promise-card__title    { font-size: 26px; }
  .promise-card__desc     { font-size: 16px; }
  .promise-card__btn      { font-size: 14px; padding: 10px 18px; }
}

/* 카드 2열이 좁아지면 1열로 전환 — 좁은 데스크탑/태블릿 대응 */
@media (max-width: 1024px) {
  .promise-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .promise-cards          {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }
  .promise-card           {
    padding: 20px;
    gap: 18px;
    flex-direction: row;
  }
  .promise-card__image    { width: 110px; height: 152px; }
  .promise-card__content  { padding: 4px 0; }
  .promise-card__title    { font-size: 20px; margin-bottom: 8px; }
  .promise-card__desc     { font-size: 14px; }
  .promise-card__buttons  {
    margin-top: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .promise-card__btn      { font-size: 13px; padding: 8px 14px; gap: 6px; }
  .promise-card__btn img,
  .promise-card__btn svg  { width: 14px; height: 14px; }
}

/* ====================================================================
   2026-06-26: sticky footer — 콘텐츠 짧은 페이지에서 푸터가 공중에 뜨는 것 방지.
   (footer/body 는 공유 common.css 소속이라 미수정 → style.css 가 common 뒤 로드되는 점 이용해
    body 만 flex column 으로 override, 푸터는 margin-top:auto 로 뷰포트 하단 고정) */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > footer { margin-top: auto; }

/* ====================================================================
   2026-08-13 Stage4: 푸터 하단 문구 명도대비 — 10페이지 × 2문단 = 20건(최대 항목).

   common.css:1213 `.footer-bottom { color: rgba(255,255,255,0.4) }` 가 검정 푸터 위에서
   실제로 칠해지는 색은 #666 이고 대비는 **3.66:1**(필요 4.5). 알파 때문에 axe·DOM 기반
   자동검사는 이걸 21:1 로 읽고 통과시킨다 — 픽셀로만 잡힌다.
   common.css 는 수정 금지 파일이라, style.css 가 뒤에 로드되는 점을 이용해 같은 특이도로 덮는다.
   색상은 그대로 흰색이고 **알파만** 0.40 → 0.55 (합성 #8c8c8c, 실측 6.27:1).
   ==================================================================== */
.footer-bottom { color: rgba(255, 255, 255, 0.55); }


/* ====================================================================
   [district-pledge]  (원본: components/district-pledge/district-pledge.css)
   ==================================================================== */
/* ============================================================
   DISTRICT PLEDGE — 동별 공약 (공약지도)
   Figma 노드 10114:2482 (file TPNQyGbVxaNCl4PPAU7Y1r) 에서 직접 추출

   ★ 레이아웃 핵심 (시안 직독):
   - 시안 프레임 1920 기준, 콘텐츠 컨테이너(서브타이틀)는 1540 중앙정렬
   - 공약지도 블록(10147:3238)은 1920 = "양옆 여백 0 풀블리드 밴드"
       · 좌측 사이드바(var(--c-primary-soft))는 뷰포트 좌측 끝(x=0)에 붙음
       · 우측 지도영역(#F7F8FD)은 뷰포트 우측 끝(x=1920)에 붙음
       · 단, 사이드바 텍스트/지도/공약 콘텐츠는 1540 컬럼에 정렬(서브타이틀과 좌측 맞춤)
   - 구조: [좌 사이드바 풀높이] | [우 컬럼: (상)지도영역 + (하)전체동 공통공약]
   - 사용자 추출 예정 이미지(중구 지도·하단 일러스트)는 .ph-extract placeholder
   ============================================================ */

/* ===== 공통 placeholder (사용자 직접 추출 이미지 자리) ===== */
.district-page .ph-extract {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #eef1f6;
  border: 1px dashed #9aa2b5;
  border-radius: 8px;
  color: #6b7488;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  padding: 16px;
  box-sizing: border-box;
}

/* 헤더(서브타이틀)는 1540 유지, 헤더↔밴드 갭 0, 밴드↔푸터 0 */
.district-page .board-page { padding-bottom: 0; }

/* ============================================================
   풀블리드 밴드
   ============================================================ */
.pledge-board {
  position: relative;
  background: #fff;
  overflow-x: clip;     /* 좌우 bleed pseudo 를 뷰포트 경계에서 컷 */
}

/* 좌측 사이드바 블루를 뷰포트 좌측 끝까지 채우는 좌측 여백 bleed */
.pledge-board::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(max(0px, (100% - var(--content-w-sub)) / 2));
  background: var(--c-indigo-700);   /* 좌측 bleed — 사이드바와 동일 진한 인디고 #2A2E43 (구: 다크핑크 --c-primary-soft) */
  z-index: 0;
}

/* 콘텐츠 정렬용 1540 inner (서브타이틀과 동일 폭/좌측 맞춤) */
.pledge-board__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-w-sub);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 294px minmax(0, 1fr);  /* 사이드바 가시폭 294(=484-190) | 우측 */
  align-items: stretch;
}

/* ---------- 좌측 사이드바 (동 네비) ---------- */
.pledge-board__side {
  position: relative;
  background: var(--c-indigo-700);   /* 좌측 사이드바 배경 진한 인디고 #2A2E43 (구: 다크핑크 --c-primary-soft #7D0034) */
  color: #fff;
  padding: 46px 30px 60px 4px;     /* 텍스트가 1540 컬럼 좌측에 거의 맞도록 (시안 left 194≈190) */
}
.pledge-side__head { margin-bottom: 22px; }   /* 동 네비와 좌측 맞춤 (시안 left 194) */
.pledge-side__title {
  font-family: var(--ff-title);   /* 서브타이틀(page-header) 과 동일 — Hakgyoansim */
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -1px;
  line-height: normal;
  margin: 0 0 4px;
  color: #fff;
}
.pledge-side__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -1px;
  margin: 0;
  opacity: 0.85;
  color: #fff;
}

/* 모바일 전용 동 선택 셀렉트 — PC/태블릿 숨김 */
.dong-select-wrap { display: none; }

/* 동 네비 리스트 */
.dong-nav { list-style: none; margin: 0; padding: 0; }
.dong-nav__item { position: relative; }
.dong-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px 18px 24px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-family: var(--ff-title);   /* Hakgyoansim Allimjang TTF */
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.dong-nav__link .dong-nav__icon { width: 28px; height: 28px; flex-shrink: 0; color: currentColor; }
.dong-nav__link .dong-nav__icon svg, .dong-nav__link .dong-nav__icon .ico { width: 100%; height: 100%; display: block; }
.dong-nav__label { flex: 1 1 0; min-width: 0; }
.dong-nav__chevron { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }

/* item 구분선 (마지막 제외) */
.dong-nav__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4.83%;
  right: 4.83%;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

/* active / hover : 흰 알약 */
.dong-nav__item.is-active .dong-nav__link,
.dong-nav__link:hover {
  background: #fff;
  color: var(--c-primary);   /* var(--c-primary) */
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}
.dong-nav__item.is-active .dong-nav__chevron,
.dong-nav__link:hover .dong-nav__chevron { opacity: 1; }
/* 2026-08-17 수정 — hover 시 흰 알약 배경 위에 흰 아이콘이 묻히는 것 방지(아이콘 28개 소실). <img> 는 currentColor 를 못 받으므로 src 를 교체한다. */
.dong-nav__link:hover .dong-nav__icon img { content: url("../images/icons/tint/ic-pin-c40051.svg"); }
.dong-nav__link:hover .dong-nav__chevron img { content: url("../images/icons/tint/ic-chevron-right-sm-c40051.svg"); }
/* 알약 활성 시 아래 구분선 가림 */
.dong-nav__item.is-active::after,
.dong-nav__item:hover::after { opacity: 0; }

/* ---------- 우측 컬럼 (지도영역 + 공통공약) ---------- */
.pledge-board__right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 지도 영역 (gray, 우측 끝까지 bleed) */
.pledge-board__maparea {
  position: relative;
  background: var(--c-indigo-50);   /* #F7F8FD */
  padding: 56px 60px 60px 24px;     /* 좌패딩 축소 — 지도 좌여백 줄임(시안: 회색영역에 거의 flush) */
  min-height: 469px;
}
.pledge-board__maparea::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50vw;                      /* 우측 여백 bleed (overflow-x:clip 가 뷰포트에서 컷) */
  background: var(--c-indigo-50);
}

/* 중앙 지도 placeholder (PC: 좌측 696 영역 — 우측은 주요공약 박스가 absolute 로 차지) */
.pledge-map__canvas {
  position: relative;   /* SVG 클릭영역 오버레이 기준 */
  width: 100%;
  max-width: 700px;     /* 시안 지도 696 — 우측 주요공약 박스와 나란히 */
  min-height: 375px;
}
.pledge-map__canvas .ph-extract {
  width: 100%;
  height: 375px;
  background: #e6ebf3;
}
.pledge-map__canvas img { width: 100%; height: auto; display: block; }

/* 지도 위 동 클릭영역 (SVG 폴리곤 오버레이) — 이미지 영역 100% 덮음 */
.pledge-map__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pledge-map__zone {
  /* 클릭만 동작 — hover/active 시각 효과 없음 (사용자 요청) */
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
}
/* 2026-08-13 Stage4 — 키보드 초점 표시. 폴리곤 15개가 tabindex="0" 인데 초점을 줘도
   픽셀이 하나도 바뀌지 않아(diff 0/178,536) 키보드 사용자가 지도 위 위치를 알 수 없었다
   (KWCAG 「초점 이동과 표시」 / WCAG 2.4.7). SVG 는 outline 지원이 고르지 않아 stroke 로 표시한다.
   마우스 클릭에는 뜨지 않도록 :focus-visible 만 사용 — 「hover/active 효과 없음」 요청과 무충돌. */
.pledge-map__zone:focus-visible {
  fill: rgba(255, 255, 255, 0.3);
  stroke: var(--c-primary);
  stroke-width: 3;
  outline: none;
}

/* 우측 상단 주요공약 박스 (지도영역 기준 우측 상단, 콘텐츠 우경계 1730 에 flush) */
.pledge-spot {
  position: absolute;
  top: 80px;
  right: 0;
  width: 498px;
  max-width: calc(100% - 120px);
  background: #fff;
  border: 1px solid var(--c-indigo-500);   /* #3A3D4E — 카드 테두리 인디고 메인 통일 (구: indigo-350) */
  border-radius: 4px;
  box-shadow: 0 12px 16px -4px rgba(58, 61, 78, 0.12), 0 4px 6px -2px rgba(58, 61, 78, 0.06);   /* #3A3D4E 인디고 톤 그림자 (테두리 인디고 통일에 맞춤, 구: 회청색 rgba(16,24,40,...)) */
  padding: 32px;
}
.pledge-spot__head {
  border-bottom: 1px solid var(--c-primary);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.pledge-spot__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -1px;
  color: var(--c-primary);
  line-height: normal;
  margin: 0;
}
.pledge-spot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pledge-spot__item { display: flex; align-items: center; gap: 8px; }
.pledge-spot__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-indigo-450);   /* #575A6A — 원래(리브랜딩 직전) 슬레이트블루로 복원 (리브랜딩 핑크 var(--c-primary) 되돌림) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.pledge-spot__check svg, .pledge-spot__check .ico { width: 11px; height: 11px; display: block; }
.pledge-spot__text {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-gray-700);   /* #555 */
}

/* 동별 공약 — 데이터 없는 동(준비 중) placeholder */
.pledge-map__placeholder {
  display: none;          /* JS 가 데이터 없는 동에서 표시 */
  width: 100%;
  max-width: 700px;       /* 지도 canvas 와 동일 폭 */
  min-height: 375px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #e6ebf3;
  border-radius: 8px;
  color: #6b7180;
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.3px;
  padding: 24px;
  box-sizing: border-box;
}
.pledge-spot__empty {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-gray-700);
  text-align: center;
  padding: 24px 8px;
}

/* ============================================================
   전체동 공통 공약 (우측 컬럼 하단, white)
   ============================================================ */
.pledge-board__common {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 40px 60px;
  background: #fff;
  overflow: hidden;
}
/* 하단 좌측 일러스트 placeholder (배경 장식) */
.common-pledge__art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 540px;        /* 남산 일러스트 1.5배 확대 (360→540) */
  height: 100%;
  max-width: 55%;
  pointer-events: none;
  z-index: 0;
}
.common-pledge__art .ph-extract {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(180deg, #eef2f8 0%, #dfe7f3 100%);
}
.common-pledge__art img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; display: block; }
.common-pledge__title-wrap { position: relative; z-index: 1; }
.common-pledge__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -1px;
  color: #121212;
  line-height: normal;
  margin: 0;
}

/* 공약 그리드 (2열) */
.common-pledge__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.common-pledge__col { display: flex; flex-direction: column; gap: 10px; }
.common-pledge__item { display: flex; align-items: flex-start; gap: 8px; }
.common-pledge__num {
  flex-shrink: 0;
  font-family: var(--ff-serif);   /* Cormorant Infant */
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.08px;
  color: var(--c-primary);
  line-height: 1.3;
  min-width: 24px;
}
.common-pledge__txt {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: #2a2a2a;
}

/* ============================================================
   반응형 — 1280 / 768 / 480
   PC 3단(사이드/지도/주요공약) → 모바일 세로 stack
   풀블리드는 모든 폭에서 유지 (양옆 여백 0)
   ============================================================ */
@media (max-width: 1280px) {
  .pledge-board__inner { grid-template-columns: 320px minmax(0, 1fr); }
  .pledge-board__side { padding: 36px 24px 48px 24px; }
  .pledge-side__head { padding-left: 0; }
  .pledge-side__title { font-size: 32px; }
  .dong-nav__link { padding: 15px 16px 15px 18px; font-size: 17px; }

  .pledge-board__maparea { padding: 40px; min-height: 0; }
  .pledge-map__canvas { max-width: none; }   /* 박스가 아래로 내려가므로 지도 full-width */
  .pledge-spot {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 24px;
    padding: 28px;
  }
  .pledge-spot__title { font-size: 20px; }

  .pledge-board__common { padding: 36px 40px; gap: 32px; grid-template-columns: 200px minmax(0, 1fr); }
  .common-pledge__title { font-size: 26px; }
  .common-pledge__art { width: 420px; }
}

@media (max-width: 768px) {
  /* 풀블리드 밴드 세로 stack: 사이드바 → 지도영역 → 공통공약 */
  .pledge-board::before { display: none; }
  .pledge-board__maparea::after { display: none; }
  .pledge-board__inner { grid-template-columns: 1fr; }

  .pledge-board__side { padding: 28px 20px; }
  .pledge-side__head { padding-left: 0; }
  .pledge-side__title { font-size: 28px; }
  .pledge-side__desc { font-size: 14px; }

  /* 동 네비 → 셀렉트 드롭다운으로 전환 */
  .dong-nav { display: none; }
  .dong-select-wrap { display: block; position: relative; }
  .dong-select-wrap::after {        /* 우측 chevron */
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 12px;
    height: 12px;
    transform: translateY(-60%) rotate(45deg);
    border-right: 2px solid var(--c-primary);
    border-bottom: 2px solid var(--c-primary);
    pointer-events: none;
  }
  .dong-select {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 18px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--c-primary);
    font-family: var(--ff-title);   /* Hakgyoansim Allimjang — 알약 라벨과 동일 */
    font-size: 17px;
    line-height: 52px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .dong-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .pledge-board__maparea { padding: 24px 20px; }
  .pledge-map__canvas { min-height: 0; }   /* placeholder 높이에 hug — 빈 여백 제거 */
  .pledge-map__canvas .ph-extract { height: 240px; font-size: 14px; }
  .pledge-map__placeholder { min-height: 240px; max-width: none; font-size: 15px; }
  .pledge-spot { padding: 22px 20px; margin-top: 12px; }   /* 지도 바로 아래로 간격 축소 */
  .pledge-spot__title { font-size: 18px; }
  .pledge-spot__text { font-size: 15px; }

  .pledge-board__common {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
  }
  .common-pledge__art { display: none; }
  .common-pledge__title { font-size: 22px; }
  .common-pledge__grid { grid-template-columns: 1fr; gap: 10px; }
  .common-pledge__txt { font-size: 15px; }
  .common-pledge__num { font-size: 18px; min-width: 22px; }
}

@media (max-width: 480px) {
  .pledge-board__side { padding: 24px 16px; }
  .pledge-side__title { font-size: 26px; }
  .pledge-board__maparea { padding: 20px 16px; }
  .pledge-board__common { padding: 24px 16px; }
}

/* ============================================================
   inauguration (취임사) — 노드 10102:2931 (Figma 확정 시안 개편)
   히어로(10258:3074, 풀블리드 라이트 + 좌측 인물 + 우측 텍스트)
   → 본문(10258:2995, 1600폭 중앙): 도입본문 → 인용 → 5약속 좌우교차 → 하단패널
   ============================================================ */

.board-page:has(.inaug-hero) .page-header::after { display: none; }
.board-page:has(.inaug-hero) { padding-bottom: 0; }

/* ===== 히어로 밴드 (10258:3074) — 풀블리드 라이트, 좌 인물 + 우 텍스트 ===== */
.inaug-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  min-height: 562px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-indigo-100);   /* bg-address 미로드 시 라이트 base */
  isolation: isolate;
}
.inaug-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.inaug-hero__bg img { position: absolute; width: 103.07%; height: 178.35%; left: -3.08%; top: -39.19%; max-width: none; object-fit: cover; display: block; }
.inaug-hero__inner {
  position: relative;
  width: min(1600px, calc(100% - 2 * var(--content-pad-x-sub)));
  min-height: 562px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(32px, 7vw, 120px);
}
.inaug-hero__figure {
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 402px);
  aspect-ratio: 402 / 519;
  position: relative;
  overflow: hidden;
  align-self: flex-end;
}
.inaug-hero__figure img { position: absolute; width: 143.33%; height: 166.57%; left: -23.57%; top: -24.33%; max-width: none; object-fit: cover; display: block; }
.inaug-hero__text {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: flex-start;
  text-align: left;
  letter-spacing: -1px;
  padding: 0 0 clamp(80px, 14vh, 141px);
}
.inaug-hero__eyebrow {
  margin: 0;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--c-gray-900);
}
.inaug-hero__title {
  margin: 0;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 80px;
  line-height: 1.4;
  color: var(--c-gray-900);
}
.inaug-hero__title em { font-style: normal; }
.inaug-hero__accent {
  font-weight: 700;
  background: linear-gradient(257deg, #0349df 7%, #f32177 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.inaug-hero__subtitle {
  margin: 0;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
  color: var(--c-gray-900);
}

/* ===== 본문 컨테이너 (10258:2995, 1600폭 중앙) ===== */
.inaug-body {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: var(--gap-section) 0 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ===== 도입 본문 (10556:6872) — 가운데 정렬 ===== */
.inaug-lead {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.84;
  letter-spacing: -1px;
  text-align: center;
  color: #585b63;
}
.inaug-lead p { margin: 0; }
.inaug-lead strong { font-weight: 700; }
.inaug-lead__strong {
  font-weight: 700;
  font-size: 26px;
  color: var(--c-gray-900);
}
.inaug-lead .inaug-gap { height: 1.5em; }

/* ===== 강조 인용 (s_highlight 10258:3008) ===== */
.inaug-highlight {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.inaug-highlight__text {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -1px;
  text-align: center;
  color: #1a1b1e;
}
.inaug-highlight__accent {
  font-weight: 700;
  background: linear-gradient(205deg, #0349df 7%, #f32177 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.inaug-highlight__quote {
  flex: 0 0 auto;
  font-family: Georgia, serif;   /* 인용부호 — Georgia Bold (시스템 기본 세리프, 전 환경 동일) */
  font-weight: 800;
  font-size: 100px;
  line-height: 0;
  letter-spacing: 1.08px;
  color: var(--c-indigo-150);   /* #EBEEF8 연한 인디고 장식 따옴표 (figma 그대로) */
  align-self: flex-start;
  width: 56px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inaug-highlight__quote--close { transform: rotate(180deg); align-self: flex-end; }

/* ===== 5대 약속 (10559:6567) — 이미지+텍스트 좌우교차 ===== */
.inaug-tasks {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}
.inaug-task {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
}
.inaug-task--reverse { flex-direction: row-reverse; }
.inaug-task__media {
  flex: 0 0 auto;
  width: 752px;
  max-width: 47%;
  aspect-ratio: 752 / 400;
  overflow: hidden;
}
.inaug-task__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inaug-task__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.inaug-task__num {
  flex: 0 0 auto;
  font-family: var(--ff-serif);   /* Cormorant Infant Medium Italic (시안) */
  font-style: italic;
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 1.08px;
  color: var(--c-gray-400);       /* #B7B7B7 */
}
.inaug-task__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  letter-spacing: -1px;
}
.inaug-task__title {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #1a1b1e;
}
.inaug-task__accent { font-style: normal; color: var(--c-primary); }
.inaug-task__desc {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.84;
  color: #585b63;
}

/* ===== 하단 패널 (bottom-panel 10258:3041) — 좌 맺음말 + 우 인물 ===== */
.inaug-panel {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  min-height: 597px;
  padding: 56px var(--content-pad-x-sub) 0;
  background: #edf1fc;   /* figma bottom-panel bg */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 72px);
}
.inaug-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.8;
  overflow: hidden;
}
.inaug-panel__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.inaug-panel__content {
  position: relative;
  z-index: 1;
  flex: 0 1 910px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  padding-bottom: 58px;
}
.inaug-panel__figure {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 410px);
  aspect-ratio: 410 / 641;
  overflow: hidden;
}
.inaug-panel__figure img { position: absolute; width: 149.88%; height: 143.93%; left: -26.58%; top: -12%; max-width: none; object-fit: cover; display: block; }
.inaug-panel__lead {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
  color: #1a1b1e;
}
.inaug-panel__body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  color: #454a54;
}
.inaug-panel__body p { margin: 0; }
.inaug-panel__body strong { font-weight: 700; }

/* 서명 블록 (s_sign 10259:3143) */
.inaug-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 30px;
  width: 100%;
}
.inaug-sign__date {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: #454a54;
}
.inaug-sign__title {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #40454f;
}
.inaug-sign__mark { width: 149px; height: 57px; object-fit: contain; display: block; margin-top: 8px; }

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
  .inaug-hero__title { font-size: 64px; }
  .inaug-hero__eyebrow { font-size: 34px; }
  .inaug-hero__subtitle { font-size: 28px; }
  .inaug-task__media { max-width: 50%; }
  .inaug-panel__box { min-height: 0; padding: 72px 48px 0; }
}
@media (max-width: 1024px) {
  .inaug-hero { min-height: 460px; }
  .inaug-hero__inner { min-height: 460px; }
  .inaug-hero__title { font-size: 52px; }
  .inaug-hero__eyebrow { font-size: 28px; }
  .inaug-hero__subtitle { font-size: 24px; }
  .inaug-body { padding: 64px 0; gap: 72px; }
  .inaug-lead { font-size: 17px; }
  .inaug-lead__strong { font-size: 22px; }
  .inaug-highlight { gap: 16px; }
  .inaug-highlight__text { font-size: 28px; }
  .inaug-highlight__quote { font-size: 80px; width: 44px; }
  .inaug-tasks { gap: 48px; }
  .inaug-task { gap: 32px; }
  .inaug-task__main { gap: 24px; }
  .inaug-task__num { font-size: 48px; }
  .inaug-task__title { font-size: 22px; }
  .inaug-panel__figure { width: clamp(200px, 24vw, 320px); }
}
@media (max-width: 768px) {
  /* board-page 의 overflow-x:clip 이 풀블리드 히어로(100vw)를 잘라 양옆 여백을 만듦.
     이 페이지는 body 의 overflow-x:hidden 이 가로스크롤을 막아주므로 clip 해제 → 밴드 풀블리드 복구 */
  .board-page:has(.inaug-hero) { overflow-x: visible; }
  /* 히어로: 인물 위 / 텍스트 아래 세로 스택, 가운데 정렬 */
  .inaug-hero { min-height: 0; }
  .inaug-hero__inner { min-height: 0; flex-direction: column-reverse; align-items: center; padding: 32px 0 0; gap: 4px; }
  .inaug-hero__figure { width: clamp(200px, 46vw, 280px); align-self: center; }
  .inaug-hero__text { align-items: center; text-align: center; padding: 0 0 16px; gap: 6px; }
  .inaug-hero__eyebrow { font-size: 22px; }
  .inaug-hero__title { font-size: 40px; line-height: 1.15; }
  .inaug-hero__subtitle { font-size: 20px; }
  .inaug-body { padding: 48px 0 0; gap: 56px; }
  .inaug-lead { font-size: 15px; line-height: 1.8; }
  .inaug-lead__strong { font-size: 18px; }
  .inaug-lead br { display: none; }
  .inaug-highlight { gap: 12px; padding: 16px 0; }
  .inaug-highlight__text { font-size: 22px; }
  .inaug-highlight__quote { font-size: 56px; width: 28px; height: 28px; }
  /* 5약속: 이미지 위 / 텍스트 아래 세로 스택 (교차 무시) */
  .inaug-tasks { gap: 40px; }
  .inaug-task, .inaug-task--reverse { flex-direction: column; align-items: stretch; gap: 20px; }
  .inaug-task__media { width: 100%; max-width: none; }
  .inaug-task__main { gap: 16px; align-items: flex-start; }
  .inaug-task__num { font-size: 44px; }
  .inaug-task__title { font-size: 19px; }
  .inaug-task__desc { font-size: 16px; line-height: 1.75; }
  .inaug-task__desc br { display: none; }
  /* 하단 패널: 모바일 — 인물을 텍스트 아래(세로 스택)로, 위계 축소 */
  .inaug-panel { flex-direction: column; align-items: center; padding: 48px 20px 0; }
  .inaug-panel__content { flex: 0 1 auto; max-width: none; padding-bottom: 0; gap: 24px; }
  .inaug-panel__lead { font-size: 21px; }
  .inaug-panel__body { font-size: 15px; line-height: 1.7; }
  .inaug-panel__body br { display: none; }
  .inaug-panel__figure { width: clamp(140px, 36vw, 180px); margin-top: 8px; }
  .inaug-sign__date { font-size: 15px; }
  .inaug-sign__title { font-size: 17px; }
  .inaug-sign__mark { width: 120px; height: 46px; }
}
@media (max-width: 480px) {
  .inaug-hero__eyebrow { font-size: 19px; }
  .inaug-hero__title { font-size: 32px; }
  .inaug-hero__subtitle { font-size: 17px; }
  .inaug-lead__strong { font-size: 17px; }
  .inaug-highlight { flex-direction: column; gap: 6px; }
  .inaug-highlight__quote { align-self: center; }
  .inaug-highlight__quote--close { align-self: center; }
  .inaug-highlight__text { font-size: 19px; }
  .inaug-task__num { font-size: 38px; }
  .inaug-task__title { font-size: 18px; }
  .inaug-panel__box { padding: 32px 18px 0; }
  .inaug-panel__lead { font-size: 19px; }
  .inaug-sign__mark { width: 108px; height: 41px; }
}

.sns-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 40px;
}
.sns-link {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 32px;
  text-decoration: none;
  min-height: 280px;
  transition: background-color .2s ease;
}
.sns-link:hover { background: #f7f8f9; }
.sns-link:hover .sns-link__go { background: var(--c-primary); color: #fff; }   /* hover 포인트는 브랜드핑크 유지 (구: 어색한 #3D0019) */
.sns-link__icon { width: 32px; height: 32px; display: block; }
.sns-link__icon svg, .sns-link__icon .ico { width: 100%; height: 100%; display: block; }
/* 온라인 주민참여 서비스 카드 — 인라인 아이콘만 브랜드색. 열 수는 기본 .sns-links 규칙을 따른다.
   2026-08-17 수정 — 3열 오버라이드(카드 6개 = 3×2 전제)를 제거했다. E-vote·E-poll 삭제로 카드가 4개가 되면서
   3열에서는 4번째 카드가 2행에 홀로 남고 빈 2칸이 컨테이너 배경(#e5e5e5)으로 드러났다. 기본 규칙
   (4열 / ≤1024 2열 / ≤480 1열)을 쓰면 4개가 모든 폭에서 딱 떨어지고, 바로 아래 「중구 대표 SNS」(같은 4개)와도 같은 형태가 된다. */
.sns-links--svc .sns-link__icon { color: var(--c-primary); }
.sns-link__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sns-link__text { display: flex; flex-direction: column; gap: 12px; }
.sns-link__name {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 32px;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  line-height: normal;
}
.sns-link__handle {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  color: #6b7280;
  letter-spacing: -0.5px;
  line-height: normal;
}
.sns-link__go {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #d7d9da;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.sns-link__go .ico { width: 20px; height: 20px; }

@media (max-width: 1280px) {
  .sns-link__name { font-size: 28px; }
}
@media (max-width: 1024px) {
  .sns-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sns-link { padding: 28px 24px; gap: 24px; min-height: 220px; }
  .sns-link__name { font-size: 24px; }
}
@media (max-width: 480px) {
  .sns-links { grid-template-columns: 1fr; }
}

/* ============================================================
   ===== 구청장에게 바란다 — 글쓰기 (suggestion-write) =====
   ============================================================ */
.suggest-write-form { font-family: var(--ff-body); }

/* 유의사항 박스 — suggestion-list 최상단 .notice-box 박스 디자인과 동일(보더·radius·그림자) */
.suggest-write-caution {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 26px 32px;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid var(--c-indigo-500);   /* #3A3D4E — 박스 테두리 인디고 메인 통일 (구: 하드코딩 #323649) */
  border-radius: 4px;
  box-shadow: 0 8px 12px 0 rgba(58, 61, 78, 0.12);   /* #3A3D4E 인디고 톤 그림자 (테두리 인디고 통일에 맞춤, 구: 핑크 rgba(196,0,81,0.08)) */
}
.suggest-write-caution__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;                /* svg 22×22 보다 큼 — 잘림 방지 */
  overflow: visible;
  color: var(--c-primary);
  margin-top: 1px;
}
.suggest-write-caution__icon .ico { display: block; overflow: visible; }
.suggest-write-caution__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: #2a2e43;
  letter-spacing: -0.3px;
}
.suggest-write-caution__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-sub);
  letter-spacing: -0.2px;
}

/* 동의 + 폼 통합 박스(panel) — suggestion-list .notice-box 톤(흰 배경·보더·radius), 과한 그림자 없이 */
.suggest-write-panel {
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 4px;
  padding: 60px 60px 0 60px;        /* top60·right60·bottom0·left60 */
  margin-bottom: 36px;
}

/* 동의 영역 */
.suggest-write-consent__lead {
  margin: 0 0 24px;
  font-size: 18px;                 /* 안내문 글자 키움 */
  line-height: 1.6;
  color: #2a2e43;
  letter-spacing: -0.2px;
  text-align: center;              /* 가운데 정렬 */
}
/* 필수·선택 동의 블록 구획 분리(위아래 구분선 + 여백) */
.suggest-write-consent {
  padding: 26px 0;
  border-top: 1px solid var(--c-line);
}
.suggest-write-consent:last-of-type { border-bottom: 1px solid var(--c-line); margin-bottom: 26px; }
.suggest-write-consent__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 17px;
  color: #2a2e43;
  letter-spacing: -0.3px;
}
/* 동의영역 '필수'/'선택' 뱃지는 hug(공통 .badge min-width:78 상쇄 — 이 스코프만) */
.suggest-write-consent__title .badge { min-width: auto; }
.suggest-write-consent__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 15px;
}
.suggest-write-consent__table th,
.suggest-write-consent__table td {
  border: 1px solid var(--c-line);
  padding: 12px 16px;
  text-align: center;            /* 셀 내용 가운데 정렬 */
  vertical-align: middle;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.suggest-write-consent__table thead th {
  background: #f4f6fb;
  font-weight: 700;
  color: #2a2e43;
}
.suggest-write-consent__table td { color: #4a5163; }
.suggest-write-consent__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #2a2e43;
  cursor: pointer;
  letter-spacing: -0.2px;
}
.suggest-write-consent__check input { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; }
/* 체크(좌) ↔ ※안내문(우) 같은 행 */
.suggest-write-consent__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.suggest-write-consent__footer .suggest-write-consent__check { flex: 0 0 auto; }
.suggest-write-consent__note {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  font-size: 13px;
  color: var(--c-text-sub);
  letter-spacing: -0.2px;
  line-height: 1.5;
}

/* 폼 */
.suggest-write-form__required-lead {
  margin: 30px 0 14px;
  font-size: 14px;
  color: var(--c-text-sub);
  text-align: right;
}
.suggest-write-req { color: #d9263c; font-weight: 700; }

/* 입력 영역: 각 행을 라벨(좌 고정폭) + 필드(우 채움) 가로 배치, 행 사이 구분선 */
.suggest-write-grid {
  display: flex;
  flex-direction: column;
  border-top: 2px solid #2a2e43;
  margin-bottom: 36px;
}
.suggest-write-row {
  display: flex;
  align-items: flex-start;          /* 라벨 상단 정렬(높은 필드 대응) */
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5; /* 입력그룹 사이 구분선 */
}
.suggest-write-row:last-child { border-bottom: 0; padding-bottom: 6px; }   /* SMS 수신여부(마지막 행) 아래 과한 여백 축소 */
/* 행 안 라벨: 좌측 고정폭 ~150px, 상단 정렬, atoms 의 margin-bottom 상쇄 */
.suggest-write-row .ds-label {
  flex: 0 0 150px;
  width: 150px;
  margin: 0;
  padding-top: 14px;                /* 우측 인풋(48px) 텍스트와 baseline 근접 */
  align-items: flex-start;
}
.suggest-write-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.suggest-write-static {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 17px;
  color: #1a1a1a;
}
.suggest-write-textarea { min-height: 220px; }
/* 전자우편주소 입력만 길이 축소(PC) — 우측 여백 남김. 다른 인풋 영향 X */
.suggest-write-field #email { max-width: 360px; }

/* 라디오 */
.suggest-write-radios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  min-height: 48px;
}
.suggest-write-radios__lead {
  font-size: 15px;
  color: #4a5163;
  margin-right: 4px;
}
.suggest-write-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: #2a2e43;
  cursor: pointer;
}
.suggest-write-radio input { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; }

/* 휴대전화/전화 분할 — 풀폭 금지, 칸별 고정폭(앞 80 / 가운데·뒤 110) */
.suggest-write-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.suggest-write-phone .ds-input {
  flex: 0 0 auto;
  width: 110px;
  text-align: center;
  padding: 0 8px;
}
.suggest-write-phone .ds-input:first-child { width: 80px; }
.suggest-write-phone__dash { color: #6A7180; }

/* 주소 */
.suggest-write-address { display: flex; flex-direction: column; gap: 10px; }
.suggest-write-address__zip { display: flex; align-items: center; gap: 10px; }
.suggest-write-address__zip .ds-input { max-width: 200px; }
/* 우편번호 찾기 버튼만 input(48) 과 높이 맞춤 (스타일=.btn-sm 외곽선/radius8/14px 유지, height 만 48) */
.suggest-write-address__btn { flex-shrink: 0; height: 48px; }

/* 첨부파일 */
.suggest-write-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 파일 추가 버튼 = 공통 .btn-sm (atoms.css). 페이지 전용 스타일 없음 — 마크업에서 .btn-sm 사용. */

/* 첨부된 파일 칩 리스트 (파일명 + 용량 + 삭제) */
.suggest-write-file__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.suggest-write-file__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  background: #f5f7fc;
  border: 1px solid #e1e6f1;
  border-radius: 8px;
  font-family: var(--ff-body);
  font-size: 14px;
  color: #2a2e43;
}
.suggest-write-file__chip-name { font-weight: 600; }
.suggest-write-file__chip-size { color: #6A7180; font-weight: 400; font-size: 13px; }
.suggest-write-file__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: #fff;
  border: 1px solid #d8dde6;
  border-radius: 50%;
  color: #6A7180;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.suggest-write-file__chip-remove:hover { background: var(--c-pink-400); border-color: var(--c-pink-400); color: #fff; }

/* 폼 입력/셀렉트/텍스트영역 focus 테두리 = 인디고 (atoms.css 기본 핑크 var(--c-primary)/핑크 ring 가 경고색과 혼동 → indigo-500 #3A3D4E).
   에러 상태(.ds-input--error) 는 건드리지 않음 — 빨강 유지. */
.suggest-write-form .ds-input:not(.ds-input--error):focus,
.suggest-write-form .ds-input:not(.ds-input--error):focus-visible,
.suggest-write-form .ds-textarea:not(.ds-input--error):focus,
.suggest-write-form .ds-select:not(.ds-input--error):focus {
  border-color: var(--c-indigo-500);
  box-shadow: 0 0 0 3px rgba(58, 61, 78, 0.15);
}

/* ===== 글쓰기 반응형 ===== */
@media (max-width: 1280px) {
  .suggest-write-caution__title { font-size: 17px; }
  .suggest-write-caution__text { font-size: 14px; }
  .suggest-write-static { font-size: 16px; }
  .suggest-write-consent__lead { font-size: 17px; }
}
@media (max-width: 768px) {
  .suggest-write-panel { padding: 22px 18px; }
  .suggest-write-consent { padding: 22px 0; }
  .suggest-write-caution { flex-direction: row; gap: 12px; padding: 18px; margin-bottom: 22px; }
  .suggest-write-caution__title { font-size: 16px; }
  .suggest-write-caution__text { font-size: 13px; }
  .suggest-write-consent__lead { font-size: 14px; }
  .suggest-write-consent__title { font-size: 16px; }
  .suggest-write-consent__table { font-size: 13px; }
  .suggest-write-consent__table th,
  .suggest-write-consent__table td { padding: 10px 12px; }
  .suggest-write-consent__check { font-size: 14px; }
  /* 모바일(좁으면): 체크 ↔ ※문구 세로 스택 */
  .suggest-write-consent__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .suggest-write-consent__note { text-align: left; }

  /* 모바일: 라벨 위 / 입력 아래 세로 스택 (박스·구분선 유지) */
  .suggest-write-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 0;
  }
  .suggest-write-row .ds-label {
    flex: none;
    width: auto;
    padding-top: 0;
  }
  .suggest-write-static { min-height: 40px; font-size: 15px; }
  .suggest-write-radios { min-height: 0; }
  .suggest-write-radios__lead { width: 100%; margin-right: 0; }
  .suggest-write-radio { font-size: 15px; }
  .suggest-write-textarea { min-height: 180px; }
  .suggest-write-address__zip { flex-wrap: wrap; }
  .suggest-write-address__zip .ds-input { max-width: none; flex: 1 1 120px; }
  .suggest-write-field #email { max-width: none; }   /* 모바일선 full */

  /* 전화번호 칸: 모바일에서 고정폭 제거 → 남는 폭 분배(화면 안에 딱 맞게, 가로스크롤 0) */
  .suggest-write-phone { display: flex; width: 100%; }
  .suggest-write-phone .ds-input,
  .suggest-write-phone .ds-input:first-child {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .suggest-write-phone__dash { flex: 0 0 auto; }
  /* 우편번호 찾기 버튼: 모바일 input(44) 과 높이 맞춤 */
  .suggest-write-address__btn { height: 44px; }
  /* 등록/취소 모바일에서도 동일 크기 유지 */
  .post-actions--write .suggest-write-submit,
  .post-actions--write .suggest-write-cancel {
    height: 48px;
    padding: 0 24px;
    min-width: 110px;
    font-size: 15px;
  }
}

/* ===== 민선9기 비전 (vision) — figma 10216:2682 ===== */
.board-page:has(.vision-hero) { letter-spacing: -0.5px; }   /* 페이지 전체 자간 -0.5px (영문 eyebrow 양수 tracking 은 자기 셀렉터로 유지) */

/* ─────────────────────────────────────────────
   1) 히어로 풀블리드 밴드 (매니페스토란 10267:3431)
   ───────────────────────────────────────────── */
.vision-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.vision-hero__bg { position: absolute; inset: 0; }
.vision-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; display: block; }   /* figma 크롭: 세로 하단부(약 66%) 노출 */
.vision-hero__dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-indigo-750) 80%, transparent); }   /* 네이비 #1A223D 80% */
.vision-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;   /* figma 콘텐츠 밴드 폭 1600 — 좌표 % 기준 */
  min-height: 400px;
  padding: 0 24px;
  color: var(--c-text-white, #fff);
}
/* 텍스트군(eyebrow+타이틀+설명) — figma Frame358: 밴드 중앙에서 232.5px 좌측, 세로 중앙 */
.vision-hero__text {
  position: absolute;
  top: 50%;
  left: calc(50% - 232.5px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
}
/* 우측 구청장 사진 — figma 10601:6572 x837 y30 385×370 (밴드 1600 기준 %, 하단 flush) */
.vision-hero__photo {
  position: absolute;
  left: 52.31%;            /* 837/1600 */
  bottom: 0;
  width: 24.06%;           /* 385/1600 */
  max-width: 385px;
  aspect-ratio: 385 / 370;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.vision-hero__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vision-hero__eyebrow {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.08px;
  line-height: normal;
  margin: 0;
  color: var(--c-text-white, #fff);
}
.vision-hero__title {
  font-family: var(--ff-title);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1px;
  margin: 0;
  color: var(--c-text-white, #fff);
}
.vision-hero__desc {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-text-white, #fff);
  text-align: center;
  margin: 0;
}

/* ─────────────────────────────────────────────
   2) 핵심가치 — 부채꼴 fan 인포그래픽 (10579:6567)
   조각/중앙원 = figma asset(SVG), 제목·부제·아이콘 = HTML 오버레이.
   PC/태블릿: 부채꼴 스테이지 / 모바일(≤768): 세로 카드.
   ───────────────────────────────────────────── */
.vision-core {
  position: relative;
  isolation: isolate;        /* ::before z-index:-1 을 이 섹션 안으로 가둠 */
  padding: var(--gap-section) 0 0;
  text-align: center;
}
/* 핵심가치 배경 밴드 — figma Frame478 풀블리드 #f7f8fd(=indigo-50).
   끝선(아래변)이 구체 "하나되는 중구" 정중앙을 지나가 위쪽반=회색·아래쪽반=흰색.
   측정상 구체중심=섹션높이 83.1%(1024~1920 일정), 모바일만 상향(@768서 보정). */
.vision-core::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  height: 83.2%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--c-indigo-50);
}
.vision-core__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--c-indigo-700);   /* figma indigo700 #2a2e43 */
  margin: 0;
}

/* 부채꼴 스테이지 — figma 좌표(1152×723)를 비율 유지로 스케일.
   container-type 으로 자식 글자/아이콘도 cqw 로 함께 축소. */
.vision-fan {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.vision-fan__stage {
  position: relative;
  width: min(1152px, 100%);
  aspect-ratio: 1152 / 723;
  container-type: inline-size;
  overflow: visible;   /* 중앙 구체 그림자(음수 inset)·라벨 nowrap 텍스트가 잘리지 않게 */
}
/* 색조각(반투명 wedge) — left/top/width/height % = figma px ÷ (1152×723) */
.vision-fan__seg { position: absolute; display: block; }
.vision-fan__seg--1 { left: 0;       top: 33.24%; width: 37.21%; height: 46.02%; }
.vision-fan__seg--2 { left: 9.64%;   top: 4.11%;  width: 35.19%; height: 60.65%; }
.vision-fan__seg--3 { left: 34.72%;  top: 0;      width: 30.36%; height: 55.95%; }
.vision-fan__seg--4 { left: 55.03%;  top: 4.15%;  width: 35.19%; height: 60.65%; }
.vision-fan__seg--5 { left: 62.76%;  top: 33.24%; width: 37.21%; height: 46.02%; }

/* 조각별 라벨(아이콘+제목+부제) — 중심 x 기준 배치(translateX -50%) */
.vision-fan__label {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.74cqw;            /* figma 20px ÷ 1152 */
  width: 18cqw;
  text-align: center;
}
.vision-fan__label--1 { left: 14.45%; top: 54.22%; }
.vision-fan__label--2 { left: 27.26%; top: 17.57%; }
.vision-fan__label--3 { left: 49.96%; top: 7.33%;  }
.vision-fan__label--4 { left: 72.09%; top: 18.67%; }
.vision-fan__label--5 { left: 85.81%; top: 50.76%; }
.vision-fan__icon { display: block; width: auto; }   /* 아이콘 높이는 비전별로(아래) — figma 원본 높이 ÷1152 */
.vision-fan__label--1 .vision-fan__icon { height: 4.69cqw; }   /* 미래 54 */
.vision-fan__label--2 .vision-fan__icon { height: 7.46cqw; }   /* 청년 86 */
.vision-fan__label--3 .vision-fan__icon { height: 7.03cqw; }   /* 교육 81 */
.vision-fan__label--4 .vision-fan__icon { height: 8.17cqw; }   /* 노후 94 */
.vision-fan__label--5 .vision-fan__icon { height: 6.16cqw; }   /* 품격 71 */
.vision-fan__name {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 2.08cqw;      /* figma 24px ÷ 1152 */
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--c-indigo-700);   /* "…중구" 기본 indigo700 #212638 근사 */
  white-space: nowrap;
}
.vision-fan__desc {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 1.39cqw;      /* figma 16px ÷ 1152 */
  line-height: 1.4;
  /* 2026-08-13 Stage4 — 명도대비. 구 var(--c-gray-550) #858585 는 파스텔 팬 배경 위에서
     2.84~3.25:1 로 4.5 미달(5건).
     ★조각이 반투명 그라디언트라 「한 점」으로 색을 고르면 안 된다. 라벨 글자를 지우고 4개 뷰포트
       (1024/1280/1440/1920) × 5조각의 배경 최암부를 재서 최악값 rgb(238,207,224) 을 기준으로 잡았다
       (_work/S4_21_fanbg_probe.py). 그 위에서 #5b606b 는 4.39 로 여전히 미달이라 한 단 더 낮춘다.
       #575a6a = 최악 배경에서 4.75:1, 가장 밝은 조각에서 5.6:1. style.css 기존 보유색이다.
     (--c-gray-550 토큰 자체는 common.css 소속·타 컴포넌트 공유라 건드리지 않는다) */
  color: #575a6a;
  white-space: nowrap;
}
/* 앞단어 색강조 (fan / corecard 공용) */
.vision-fan__accent { font-weight: 700; }
.vision-fan__accent--future    { color: var(--c-pink-500); }   /* #c40051 */
.vision-fan__accent--youth     { color: #b02c94; }            /* figma 청년 강조색(토큰 외 단색 — 정의부) */
.vision-fan__accent--education { color: #5b3fa8; }           /* figma 교육 강조색(토큰 외 단색 — 정의부) */
.vision-fan__accent--senior    { color: var(--c-mint); }      /* #018582 */
.vision-fan__accent--dignity   { color: var(--c-blue-500); }  /* #1342a6 */

/* 중앙 원 (KECC 구체 + 슬로건) — 가로 중앙, figma top≈58.5% */
.vision-fan__core {
  position: absolute;
  left: 50%;
  top: 58.51%;
  transform: translateX(-50%);
  width: 26.04%;          /* 300 ÷ 1152 */
  aspect-ratio: 1 / 1;
}
.vision-fan__core-bg {
  position: absolute;
  /* SVG(preserveAspectRatio=none)는 box 비율대로 늘어남 → box를 정사각으로 명시해야 정원.
     width:auto는 교체요소라 SVG 기본 300×150으로 렌더돼 타원+상단치우침 됐었음. */
  left: -8%;
  top: -8%;
  width: 116%;    /* 100% + 좌우 8% = 정사각(코어박스 기준 348/300) */
  height: 116%;
  max-width: none;
}
/* 슬로건 — 구체 그라데이션 원의 시각 중심(코어박스 48.24% Y, 50% X)에 정확히 앵커 */
.vision-fan__core-text {
  position: absolute;
  left: 50%;
  top: 48.24%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 3.65cqw;      /* figma 42px ÷ 1152 */
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--c-text-white, #fff);
  text-align: center;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   3) 5대 비전 상세 (10267:3441)
   각 항목: [좌 제목+한줄설명 | 우 pill 묶음] 한 행 → 풀폭 이미지 밴드.
   ───────────────────────────────────────────── */
.vision-detail {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: var(--gap-section) 0 0;
}
.vision-item { display: flex; flex-direction: column; gap: 60px; scroll-margin-top: 100px; }   /* figma Frame409 gap 80 → 텍스트행↔이미지 60(px-60 좌우패딩 보정 포함). scroll-margin-top: 메인 약속 앵커 점프 시 상단 여백 확보 */

/* 텍스트 행: 좌 인트로(고정 505) + 우 pills(가변, wrap) */
.vision-item__head {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 0 60px;
}
.vision-item__intro {
  flex: 0 0 505px;
  max-width: 505px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vision-item__title {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--c-indigo-600);   /* "중구" 기본 indigo600 #323649 */
}
.vision-item__title-strong { font-weight: 700; }   /* 앞구절 — 비전별 색은 .vision-item--* 에서 */
.vision-item__sub {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--c-gray-700);   /* #555 */
}
/* 비전별 제목 강조색 (fan 색과 동일) */
/* 비전별 제목 강조색 = fan 강조색과 동일(figma 노드 verbatim) */
.vision-item--future    .vision-item__title-strong { color: var(--c-pink-500); }   /* #c40051 */
.vision-item--youth     .vision-item__title-strong { color: #b02c94; }            /* figma 청년 #b02c94 (토큰 외 단색 — 정의부) */
.vision-item--education .vision-item__title-strong { color: #5b3fa8; }            /* figma 교육 #5b3fa8 (토큰 외 단색 — 정의부) */
.vision-item--senior    .vision-item__title-strong { color: var(--c-mint); }       /* #018582 */
.vision-item--dignity   .vision-item__title-strong { color: var(--c-blue-500); }   /* #1342a6 */

/* 공약 알약 묶음 (figma: bg indigo100, text indigo700, Medium 20, radius 100, gap 20) */
.vision-pills {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
}
.vision-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  border-radius: 100px;
  background: var(--c-indigo-100);   /* #f1f3fa */
  color: var(--c-indigo-700);        /* #2a2e43 */
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

/* 풀폭 이미지 밴드 (figma Rectangle 21 — 1600×581, 풀블리드) */
.vision-item__image {
  position: relative;
  width: 100vw;
  max-width: 1600px;                          /* 가로 캡 — 와이드 모니터서 풀폭 이미지 과확대 방지 (자연폭 1600) */
  left: 50%;
  margin-left: calc(-1 * min(50vw, 800px));   /* <1600=풀블리드(-50vw) / >=1600=중앙정렬(-800=캡/2). transform 대신 margin(=data-reveal 애니 transform과 충돌 방지) */
  aspect-ratio: 1600 / 581;
  overflow: hidden;
}
.vision-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────────────────────────────────────
   4) 진입 애니메이션 — 공통 [data-reveal] (common.js 가 .is-inview 토글)
   ───────────────────────────────────────────── */
.board-page:has(.vision-hero) [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.board-page:has(.vision-hero) [data-reveal].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .board-page:has(.vision-hero) [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 핵심가치 부채꼴 진입 애니메이션 ──
   .vision-fan[data-reveal] → common.js 가 .is-inview 토글.
   컨테이너 블록페이드는 끄고(자식만 stagger): 조각 중앙(3)→안(2·4)→밖(1·5) 순차 펼침 +
   라벨 떠오름 + 중앙원 살짝 pop. */
.board-page:has(.vision-hero) .vision-fan[data-reveal] { opacity: 1; transform: none; transition: none; will-change: auto; }

.vision-fan[data-reveal] .vision-fan__seg,
.vision-fan[data-reveal] .vision-fan__label,
.vision-fan[data-reveal] .vision-fan__core { opacity: 0; }
.vision-fan[data-reveal] .vision-fan__seg {
  transform: scale(.84);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .75, .3, 1);
  will-change: opacity, transform;
}
.vision-fan[data-reveal] .vision-fan__label {
  transform: translateX(-50%) translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .75, .3, 1);
  will-change: opacity, transform;
}
.vision-fan[data-reveal] .vision-fan__core {
  transform: translateX(-50%) scale(.5);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);   /* 통통 튀는 pop */
  will-change: opacity, transform;
}

.vision-fan.is-inview .vision-fan__seg { opacity: 1; transform: scale(1); }
.vision-fan.is-inview .vision-fan__seg--3 { transition-delay: .05s; }
.vision-fan.is-inview .vision-fan__seg--2,
.vision-fan.is-inview .vision-fan__seg--4 { transition-delay: .16s; }
.vision-fan.is-inview .vision-fan__seg--1,
.vision-fan.is-inview .vision-fan__seg--5 { transition-delay: .27s; }

.vision-fan.is-inview .vision-fan__label { opacity: 1; transform: translateX(-50%) translateY(0); }
.vision-fan.is-inview .vision-fan__label--3 { transition-delay: .2s; }
.vision-fan.is-inview .vision-fan__label--2,
.vision-fan.is-inview .vision-fan__label--4 { transition-delay: .31s; }
.vision-fan.is-inview .vision-fan__label--1,
.vision-fan.is-inview .vision-fan__label--5 { transition-delay: .42s; }

.vision-fan.is-inview .vision-fan__core { opacity: 1; transform: translateX(-50%) scale(1); transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .vision-fan[data-reveal] .vision-fan__seg { opacity: 1; transform: none; transition: none; }
  .vision-fan[data-reveal] .vision-fan__label { opacity: 1; transform: translateX(-50%); transition: none; }
  .vision-fan[data-reveal] .vision-fan__core { opacity: 1; transform: translateX(-50%); transition: none; }
}

/* ─────────────────────────────────────────────
   5) 반응형
   ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .board-page:has(.vision-hero) { overflow-x: visible; }
  .vision-hero { min-height: 0; }
  .vision-hero__inner { min-height: 0; padding: 48px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }   /* 하단 패딩 0 — 사진을 밴드 바닥에 flush(갭 제거) */
  .vision-hero__text { position: static; top: auto; left: auto; transform: none; width: 100%; gap: 28px; white-space: normal; }
  .vision-hero__desc { max-width: 320px; white-space: normal; word-break: keep-all; margin-left: auto; margin-right: auto; }   /* 모바일: 설명 문구가 화면 폭 안에서 줄바꿈되도록 */
  .vision-hero__photo { position: static; left: auto; bottom: auto; width: 200px; max-width: 56%; }
  .vision-hero__eyebrow { font-size: 16px; }
  .vision-hero__title { font-size: 36px; }
  .vision-hero__desc { font-size: 16px; }

  .vision-core__title { font-size: 38px; }

  .vision-detail { gap: 64px; }
  .vision-item { gap: 44px; }
  .vision-item__head { gap: 40px; padding: 0 40px; }
  .vision-item__intro { flex-basis: 420px; max-width: 420px; }
  .vision-item__title { font-size: 44px; }
  .vision-item__sub { font-size: 18px; }
  .vision-pills { gap: 14px; }
  .vision-pill { font-size: 17px; padding: 6px 16px; }
}

/* 태블릿(≤1024): 텍스트 행을 세로로(제목 위 / pills 아래) */
@media (max-width: 1024px) {
  .vision-item__head { flex-direction: column; align-items: stretch; gap: 24px; }
  .vision-item__intro { flex-basis: auto; max-width: none; }
}

/* 모바일(≤768): 부채꼴은 비율 유지로 축소 표시 / 상세는 이미지 풀폭 + 텍스트 위계 축소 */
@media (max-width: 768px) {
  .vision-core { padding-top: 52px; }
  .vision-core__title { font-size: 28px; }
  .vision-core::before { height: 85.5%; }   /* 모바일은 비-스테이지 영역 비중↑ → 끝선 상향 보정 */
  /* 부채꼴 유지 — stage(width:min(1152,100%)+cqw)가 너비에 맞춰 모양 그대로 축소.
     글자/아이콘은 작아져도 형태 보존(사용자 요청). 세로 카드는 미사용. */
  .vision-fan { margin-top: 20px; }

  .vision-detail { gap: 48px; padding-top: 40px; }
  .vision-item { gap: 24px; }
  .vision-item__head { gap: 18px; padding: 0; }
  .vision-item__intro { gap: 8px; }
  .vision-item__title { font-size: 32px; }
  .vision-item__sub { font-size: 14px; }
  .vision-pills { gap: 8px; }
  .vision-pill { font-size: 14px; padding: 6px 14px; }
}

@media (max-width: 480px) {
  .vision-hero__title { font-size: 25px; }
  .vision-hero__eyebrow { font-size: 13px; }
  .vision-item__title { font-size: 28px; }
}

/* ===== promise 데이터 테이블 (현황 표) =====
   대상 페이지: pages/promise/ 의 pledge-overview / pledge-annual / pledge-status /
                participation / awards (구민과의 약속 현황 표)
   훅: .board-content > .data-section > .data-table-wrap > table.data-table
   주의: 게시판 목록 전용 .board-table 과 무관(스코프 분리). 다열 데이터라
        모바일에서 카드 변환하지 않고 .data-table-wrap 가로스크롤로 처리. */

/* 본문 컨테이너 — .board-page 가 이미 max-width/패딩을 잡으므로 폭만 100% 블록 */
.board-content {
  width: 100%;
  /* 2026-08-25 수정 — [피드백] 본문 폰트 키움. 본문 글자는 body{16px} 를 상속만 하고 있어
     "본문"이라는 단일 조절점이 없었다. 여기에 기준선을 세우면 본문 텍스트만 17px 이 되고,
     자기 크기를 직접 지정한 컴포넌트(카드 이름·배지·캡션 등)는 그대로 남는다.
     2026-08-25 2차 — 17 → 18 (더 키워달라는 추가 의견). */
  font-size: 18px;
}

/* 리드문 */
.board-content .data-lead {
  margin: 0 0 24px;
  font-family: var(--ff-body);
  font-size: 19px;   /* 2026-08-25 수정 — 본문 키움(18→19) */
  line-height: 1.7;
  color: var(--c-text-body);
}
.board-content .data-lead strong { color: var(--c-primary); font-weight: 700; }

/* 섹션 — 표 묶음 간 상하 여백 */
.board-content .data-section { margin-top: var(--gap-section); }   /* 섹션 간격 — 전 페이지 공통(2026-06-11 48→80 확대) */
.board-content .data-section:first-child { margin-top: 0; }
/* 초장문(공백 없는 긴 문자열·URL 등) 대비 — 콘텐츠 텍스트가 칸 밖으로 삐져나가지 않게(상속). nowrap+ellipsis 영역은 영향 없음 */
.board-content { overflow-wrap: anywhere; }
/* 노이미지 폴백(js/include.js) 적용된 이미지 — 칸을 깔끔히 채움 */
img.is-noimage { object-fit: cover; background: var(--c-gray-100, #EFF1F4); }

.board-content .data-section__title {
  margin: 0 0 16px;
  font-family: var(--ff-body);
  /* 2026-08-25 수정 — [피드백] 페이지 내 타이틀 축소 26 → 24.
     (2차 정정: 한때 20 으로 내렸으나 섹션 안 카드 제목 .ps-proc__title 이 20/700 이라
      섹션 제목이 자기 내용물과 같은 크기가 됐다 — 24 로 올려 위계를 되살린다.)
     ≤1280 은 20 · ≤768 은 18 유지. */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text-default);
}

/* 표 가로 넘침 대비 래퍼 */
.board-content .data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 데이터 테이블 본체 */
.board-content .data-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--c-ink);
  font-family: var(--ff-body);
  font-size: 18px;   /* 2026-08-25 수정 — 본문 키움(16→17, 2차 17→18) */
  color: var(--c-text-body);
}

.board-content .data-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-sub);
}

/* 헤더 행 */
.board-content .data-table thead th {
  padding: 13px 16px;
  background: var(--c-gray-150);
  border-bottom: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  font-weight: 700;
  font-size: 17px;   /* 2026-08-25 수정 — 표머리(15→16, 2차 16→17) */
  line-height: 1.5;
  color: var(--c-text-default);
  text-align: center;
  white-space: nowrap;
}
.board-content .data-table thead tr:first-child th:first-child { border-left: 0; }   /* 맨왼쪽 셀만 좌측보더 제거 — 2줄 병합헤더의 둘째 행 첫 셀(완료시기 등)은 좌측 라인 유지 */

/* 본문 셀 */
.board-content .data-table tbody th,
.board-content .data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  line-height: 1.6;
  vertical-align: middle;
}
.board-content .data-table tbody th:first-child,
.board-content .data-table tbody td:first-child { border-left: 0; }
/* [rowspan 재발방지] 셀 병합 표는 .data-table--rowspan 부여.
   rowspan 연속행은 DOM상 첫 셀이 "중간 칼럼"이라 위 :first-child 규칙에 걸려 세로선이 지워진다.
   연속행(th가 병합되어 td로 시작하는 행)의 첫 td만 좌측선 복원 — 진짜 첫 열(th:first-child)은 그대로 외곽선 없음. */
.board-content .data-table--rowspan tbody td:first-child { border-left: 1px solid var(--c-line); }

/* 행 머리(분야/항목명 등 scope=row) — 좌측정렬·강조 */
.board-content .data-table tbody th[scope="row"] {
  background: var(--c-gray-100);
  font-weight: 600;
  color: var(--c-text-default);
  text-align: left;
  white-space: nowrap;
}

/* 데이터 셀 기본 좌측정렬(요청대로 과한 우측정렬 지양) */
.board-content .data-table tbody td { text-align: left; }

/* 합계/총계 행은 자연스레 마지막 또는 첫 행 — 별도 강조는 두지 않음(데이터 일관) */

/* 작은 주석 */
/* 2026-08-24 수정 — [인용 아래 출처 가운데 정렬] vision-core 리드 인용 하단 출처용 */
.board-content .data-note--center { text-align: center; }
.board-content .data-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  /* 2026-08-13 Stage4 — 명도대비. 구 var(--c-text-mute) #858585 는 흰 배경에서 3.69:1(4.5 미달).
     주석용 회색 #5b606b(6.31:1)로 통일 — .ps-note·.ps-detail__note 와 같은 값이다. */
  color: #5b606b;
}

/* 반응형 — 표를 카드로 바꾸지 않고 폰트만 살짝 줄이고 가로스크롤 유지 */
@media (max-width: 1280px) {
  .board-content .data-lead { font-size: 18px; }   /* 2026-08-25 수정 — 본문 키움(17→18) */
  .board-content .data-section__title { font-size: 20px; }
  .board-content .data-table { font-size: 16px; }   /* 2026-08-25 수정 — 본문 키움(15→16) */
  .board-content .data-table thead th { font-size: 15px; padding: 12px 14px; }   /* 2026-08-25 수정 — 본문 키움(14→15) */
  .board-content .data-table tbody th,
  .board-content .data-table tbody td { padding: 11px 14px; }
}

@media (max-width: 768px) {
  .board-content .data-section { margin-top: 52px; }
  .board-content .data-lead { font-size: 16px; margin-bottom: 18px; }
  .board-content .data-section__title { font-size: 18px; margin-bottom: 12px; }
  .board-content .data-table { font-size: 14px; }
  .board-content .data-table__caption { font-size: 14px; }
  .board-content .data-table thead th { font-size: 13px; padding: 10px 12px; }
  .board-content .data-table tbody th,
  .board-content .data-table tbody td { padding: 10px 12px; }
  /* 다열 데이터 보호 — 모바일에서도 가로스크롤(카드 변환 금지) */
  .board-content .data-table-wrap { overflow-x: auto; }
  .board-content .data-note { font-size: 13px; }
}

/* ===== 동별 QnA (화목한데이트·현장보고회) ===== */
/* 두 페이지 공유 — 동(洞) 탭은 공용 DS 탭(.ds-tabs/.ds-tab/.ds-tabs__indicator/.ds-panel,
   pill + 슬라이딩 인디케이터, 위 ds-tabs 섹션 참고)을 사용한다. 15개 동이라 가로스크롤.
   여기서는 동 페이지 전용 보강만(.dong-ds-tabs 스코프) + 사진 그리드(.dong-photos) +
   QnA 카드(.qna-card). 전용 네임스페이스(.dong-*, .qna-*)로 충돌 방지. */

/* --- 동 DS 탭: 15개라 가로스크롤. 공용 .ds-tabs 위에 동 페이지 전용 보강 --- */
.ds-tabs.dong-ds-tabs {
  /* base .ds-tabs 의 width:fit-content + margin:0 auto → 가운데 hug. 넘치면 overflow-x:auto 로 스크롤 */
  scroll-padding: 0 4px;
}
/* 동 탭 sticky 래퍼 — 상단 고정 + 흰 그라데이션 + 점진 블러(PC) 배경 */
.dong-tabs-sticky { position: sticky; top: 0; z-index: 30; }
.dong-tabs-sticky::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: 100vw; top: -28px; bottom: -46px;
  background: linear-gradient(to bottom, #fff 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
@media (min-width: 1025px) {
  /* 점진적 배경 블러 — PC 전용 (마스크로 위는 강하게, 아래로 사라짐) */
  .dong-tabs-sticky::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; transform: translateX(-50%); width: 100vw; top: -28px; bottom: -46px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
  }
}
/* 동 선택 — 태블릿 이하 select 드롭다운(알약탭 대체) */
.dong-tab-select { display: none; }
@media (max-width: 1024px) {
  .ds-tabs.dong-ds-tabs { display: none; }
  .dong-tab-select {
    display: block; width: 100%; box-sizing: border-box;
    margin: 0 0 40px; padding: 14px 46px 14px 18px;
    font-family: var(--ff-body); font-size: 16px; font-weight: 600; color: var(--c-text-default);
    background-color: var(--c-white); border: 1.5px solid var(--c-line); border-radius: 12px;
    background-image: url(../images/icons/ui/ic-select-chevron.svg);
    background-repeat: no-repeat; background-position: right 16px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }
  .dong-tab-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
}
/* [공통 규칙] 알약형 top 탭(po-tabs / ds-tabs) → 모바일·태블릿 select 박스 */
.tab-mobile-select { display: none; }
@media (max-width: 1024px) {
  [data-mobile-select] { display: none !important; }
  .tab-mobile-select {
    display: block; width: 100%; box-sizing: border-box;
    margin: 0 0 32px; padding: 14px 46px 14px 18px;
    font-family: var(--ff-body); font-size: 16px; font-weight: 600; color: var(--c-text-default);
    background-color: var(--c-white); border: 1.5px solid var(--c-line); border-radius: 12px;
    background-image: url(../images/icons/ui/ic-select-chevron.svg);
    background-repeat: no-repeat; background-position: right 16px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }
  .tab-mobile-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
  /* 2026-08-24 수정 — [로드맵 분야 select] 스크롤 중에도 분야를 바꿀 수 있게 상단 고정.
     .pa-tabs 자체가 sticky 였는데 탭이 여러 줄로 접혀 화면을 먹었다 → select 가 그 역할을 받는다. */
  .pledge-annual-page .tab-mobile-select {
    position: sticky;
    top: 0;
    z-index: 21;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .pledge-annual-page .tab-mobile-select option { color: var(--c-text-default); font-weight: 500; background: var(--c-white); }
}
.dong-ds-tabs .ds-tab { padding: 12px 22px; font-size: 16px; }

/* --- 선택 동 패널 안 상단 사진 그리드 (3장, 반응형) --- */
.dong-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 30px;
}
.dong-photos__item {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-gray-100);
  aspect-ratio: 4 / 3;
}
.dong-photos__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- QnA 패널 --- */
.dong-qna { font-family: var(--ff-body); }
.dong-qna[hidden] { display: none; }
.dong-panel { font-family: var(--ff-body); }

.dong-qna__title {
  font-family: var(--ff-body);
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.6px;
  color: var(--c-text-default);
  text-align: center;
  margin: 0 0 22px;
}
.dong-qna__title .em { color: var(--c-primary); }
.dong-qna__subhead {
  font-size: 15px;
  color: var(--c-text-sub);
  margin: 0 0 26px;
}

/* QnA 카드 = 한 질문+답변 묶음 */
.qna-card {
  border: 1px solid var(--c-indigo-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(58, 61, 78, 0.05);
}
.qna-card:last-child { margin-bottom: 0; }

/* 질문 행 */
.qna-card__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  background: var(--c-indigo-50);
  border-bottom: 1px dashed var(--c-indigo-200);
}
/* 답변 행 */
.qna-card__a {
  display: flex;
  gap: 16px;
  padding: 22px 28px;
}

/* Q / A 라벨 표식 (원형) */
.qna-card__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--ff-body);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}
.qna-card__label--q { background: var(--c-primary); color: var(--c-text-white); }
.qna-card__label--a { background: var(--c-indigo-500); color: var(--c-text-white); }

.qna-card__content { flex: 1 1 auto; min-width: 0; }

/* 질문 메타(요청 그룹/제목) */
.qna-card__meta {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: 6px;
  word-break: keep-all;
}
/* 답변 메타(담당부서·연락처) */
.qna-card__dept {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 6px;
}
.qna-card__dept .dept { font-weight: 700; color: var(--c-indigo-700); word-break: keep-all; }
.qna-card__dept .dot { color: var(--c-gray-400); }
.qna-card__dept .tel { color: var(--c-text-sub); font-weight: 500; }

.qna-card__text {
  font-size: 18px;
  line-height: 1.72;
  color: var(--c-text-body);
  word-break: keep-all;
}
.qna-card__text p { margin: 0 0 10px; }
.qna-card__text p:last-child { margin-bottom: 0; }

/* 운영 콘텐츠 연동 자리 (placeholder) */
.dong-qna__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 48px 24px;
  border: 1px dashed var(--c-indigo-250);
  border-radius: 8px;
  background: var(--c-indigo-50);
  text-align: center;
}
.dong-qna__placeholder strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-indigo-500);
}
.dong-qna__placeholder span {
  font-size: 14px;
  color: var(--c-text-sub);
}

/* --- 태블릿 --- */
@media (max-width: 1024px) {
  .dong-qna__title { font-size: 23px; }
  .dong-photos { gap: 12px; margin: 18px 0 26px; }
  .qna-card__q,
  .qna-card__a { padding: 20px 22px; }
}

/* --- 모바일 (동 DS 탭은 가로스크롤 유지, 사진 2열, 카드 세로 정렬) --- */
@media (max-width: 768px) {
  /* 동 DS 탭 — 공용 .ds-tab 모바일 규칙(44px·15px) 위에 동 전용 패딩 보강 */
  .dong-ds-tabs .ds-tab { padding: 10px 16px; font-size: 14px; }

  .dong-qna__title { font-size: 20px; }
  .dong-qna__subhead { font-size: 14px; margin-bottom: 20px; }

  .dong-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0 22px;
  }
  .dong-photos__item:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  .qna-card { border-radius: 6px; margin-bottom: 14px; }
  .qna-card__q,
  .qna-card__a {
    flex-direction: column;
    align-items: flex-start;   /* 모바일 Q/A 좌측정렬 (가운데 방지) */
    gap: 10px;
    padding: 18px 18px;
  }
  .qna-card__label { width: 30px; height: 30px; font-size: 15px; }
  .qna-card__meta { font-size: 13px; }
  .qna-card__dept { font-size: 13px; }
  .qna-card__text { font-size: 15px; line-height: 1.68; }
  .dong-qna__placeholder { min-height: 170px; padding: 36px 18px; }
}

/* --- 소형 모바일: 사진 1열 --- */
@media (max-width: 480px) {
  .dong-photos { grid-template-columns: 1fr; }
  .dong-photos__item:nth-child(3) { aspect-ratio: 4 / 3; }
}

/* ===== pledge-overview (공약사업 총괄현황) =====
   대상: pages/promise/pledge-overview.html
   3탭(.po-tabs/.po-tab — DS pill 탭 사상 재사용) + 패널 전환
   + 아이콘 카드(.po-areacard) + 비율 차트(.po-barlist/.po-splitbar)
   + 부서 카드(.po-deptgrid) + 다운로드(.po-dlbtn) + 필터(.po-filterbar)
   표는 기존 .data-table 활용. 전부 .po-* 네임스페이스로 스코프. */

/* 5대 분야 색 (페이지 스코프 변수 — 토큰 + 분야별 액센트) */
.pledge-overview-page,
.pledge-status-page,
.pledge-annual-page {
  --po-city:    var(--c-blue-500);   /* 블루 #1342A6 */
  --po-welfare: var(--c-pink-500);   /* 핑크 #C40051 */
  --po-edu:     var(--c-mint);       /* 민트 #018582 */
  --po-econ:    var(--c-indigo-700); /* 인디고 #2A2E43 (구 황토 #B8740B) */
  --po-comm:    var(--c-ai-purple);  /* 보라 #4900AE (구 violet #5B3FA8) */
}

/* ---- 탭 (pill) ---- */
.po-tabs {
  position: relative;
  display: flex;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--gap-section);   /* 알약탭 가운데 + 콘텐츠와 80px 갭 */
  padding: 4px;
  background: var(--c-gray-150);
  border-radius: 9999px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.po-tabs::-webkit-scrollbar { display: none; }
.po-tabs__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--c-primary);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
  pointer-events: none;
}
.po-tab {
  position: relative;
  z-index: 1;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  background: transparent;
  border: 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 18px;
  color: #464c53;
  letter-spacing: -0.6px;
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
}
.po-tab.is-active { color: var(--c-white); font-weight: 600; }

/* ---- 패널 ---- */
.po-panel[hidden] { display: none; }
.po-block { margin-top: 56px; }
.po-block:first-child { margin-top: 0; }
.po-block__title {
  margin: 0 0 22px;
  font-family: var(--ff-body);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text-default);
}
.po-block__title strong { color: var(--c-primary); font-weight: 800; }
/* 5대 분야 — 라이트 히어로 (Figma node 10454:19709 반영: 남산타워 맑은 하늘 사진, 딤 없음) */
/* 2026-08-24 수정 — [Figma 반영] 배경이 어두운 사진(딤 80%+흰 글자) → 밝은 하늘 사진으로 교체되며
   흰 글자가 안 보이게 돼 전부 어두운 글자로 뒤집었다. .po-hero__dim 은 밝은 사진엔 불필요해 투명 처리
   (완전 삭제 대신 투명 처리 — 다른 곳에서 이 클래스로 딤이 필요해지면 그 페이지에서만 되살리기 쉽게). */
.po-block--hero {
  position: relative;
  width: 100vw; left: 50%; margin-left: -50vw;
  margin-top: 0; margin-bottom: 44px;
  /* 2026-08-27 수정 — [밴드 축소] 사용자 지시로 세로 폭을 줄인다(560→428, -24%).
     min-height 를 없애 내용 높이만 차지하게 하고(고정 높이 금지 — 텍스트가 늘면 밴드도 늘어야 한다),
     여백·아이콘만 줄인다. 글자 크기(타이틀 48·분야명 24·숫자 38)는 08-24 확대 지시값 그대로 유지. */
  padding: 40px 0;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.po-hero__bg { position: absolute; inset: 0; z-index: -2; }
.po-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
/* 2026-08-24 수정 — figma node 10454:19710 Overlay: 밝은 하늘 사진 위 연보라빛 반투명 막(샤한 느낌) */
.po-hero__dim { position: absolute; inset: 0; z-index: -1; background: rgba(218, 224, 246, 0.5); }
/* 2026-08-24 수정 — max-width 만 있고 width 가 없어 flex 자식이 콘텐츠 폭으로 쪼그라들었다
   (1600 화면에서 실측 887px). width:100% 로 실제 1540 까지 펼쳐 카드 영역을 넓힌다. */
.po-hero__inner { position: relative; width: 100%; max-width: var(--content-w-sub, 1540px); margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.po-hero__eyebrow { text-align: center; font-family: var(--ff-serif); font-style: italic; font-weight: 500; font-size: 20px; letter-spacing: 1.08px; color: var(--c-blue-500); margin: 0 0 8px; }
.po-block--hero .po-block__title--hero { text-align: center; color: #1a223d; font-family: var(--ff-title); font-weight: 400; font-size: 48px; line-height: 1.25; letter-spacing: -0.5px; margin-bottom: 0; }
.po-block--hero .po-block__title--hero strong { color: var(--c-blue-500); font-weight: 700; }   /* 2026-08-24 수정 — 참고 시안: "77" 파랑 강조 */
/* 2026-08-28 수정 — [배경 교체 · 다크 히어로] Figma node 10454:19708 반영.
   ★ 총괄현황에만 적용한다 — 공약사업 목록(.pl-hero)은 위 밝은 하늘 규칙 그대로다.
     그래서 새 규칙은 전부 .pledge-overview-page 스코프로 묶는다(목록으로 새면 안 됨).
   ① 딤 = figma node 10454:19710 Overlay 값(검정 20%). 밝은 사진용 연보라 딤을 덮어쓴다.
   ② 어두워진 사진 위라 eyebrow·타이틀(「5대 분야 77개 공약」)은 흰 글자 — figma 도 전부 white.
      「5대」「77개」 strong 도 파랑→흰색(파랑은 어두운 사진에서 안 읽힌다).
   ③ 사진 세로 위치 — 기본값(50% 30%)은 밝은 노을 하늘만 크게 잡혀 윗부분이 과하게 보인다.
      85% 로 내려 figma 와 같은 구도(창틀·도심 야경·책상)를 물린다
      (95·100% 까지 올려 대조했으나 하늘이 너무 잘려 85 로 정지 — 2026-08-28 사용자 판단). */
/* 2026-08-31 수정 — [배경 교체] Figma node 10664:7911(총괄현황)·10664:8344(목록) 배경 이미지 반영.
   두 시안 모두 이미지를 cover 중앙에 물리므로 세로 보정값을 50% 로 통일한다
   (총괄현황의 85% 는 08-28 야경 사진 전용 보정이었다 — 사진이 바뀌어 더 이상 필요 없음).
   딤·글자색은 시안 값과 이미 같아 건드리지 않는다:
     총괄현황 Overlay rgba(0,0,0,0.2) + 흰 글자 / 목록 Overlay rgba(218,224,246,0.5) + 파랑 글자(기본값). */
.pledge-overview-page .po-hero__bg img,
.pl-hero .po-hero__bg img { object-position: 50% 50%; }
/* 2026-09-01 수정 — [배경 재교체] Figma node 10664:7911 히어로 이미지가 교체되면서
   Overlay(node 10664:7963) 도 rgba(0,0,0,0.2) → rgba(0,0,0,0.5) 로 진해졌다. 시안 값 그대로 따른다. */
.pledge-overview-page .po-hero__dim { background: rgba(0, 0, 0, 0.5); }
.pledge-overview-page .po-hero__eyebrow,
.pledge-overview-page .po-block__title--hero,
.pledge-overview-page .po-block__title--hero strong { color: var(--c-white, #fff); }
/* 2026-09-03 수정 — [히어로 추가] 수상현황 및 공모실적 — Figma node 10671:10794.
   총괄현황(.pledge-overview-page)과 같은 .po-block--hero 골격을 그대로 쓰고, 다른 값만 .aw-hero 로 덧댄다.
   ① 밴드 높이 270 = 콘텐츠 143 + 상하 padding 64 (시안 그대로. min-height 는 두지 않는다 — 글이 늘면 밴드도 늘어야).
   ② 위아래 갭 4px — 시안에서 page-header(200) 바로 아래 204, 본문 표는 478 에서 시작한다.
   ③ 딤 = node 10671:10795 Overlay rgba(26,34,61,0.6) · 글자는 전부 흰색, 「281건」만 --c-indigo-150(#EBEEF8).
   ④ 서브 문장(.po-hero__sub)은 이 페이지에서만 쓰므로 .aw-hero 안에 가둔다. */
/* ★ margin 축약형 금지 — .po-block--hero 의 margin-left:-50vw(풀블리드 보정)를 지워버린다. 상하만 따로 준다. */
.aw-hero { padding: 64px 0; margin-top: 4px; margin-bottom: 4px; }
.aw-hero .po-hero__bg img { object-position: 50% 50%; }
.aw-hero .po-hero__dim { background: rgba(26, 34, 61, 0.6); }
.aw-hero .po-hero__eyebrow { color: var(--c-white, #fff); margin-bottom: 4px; }
.aw-hero .po-block__title--hero { color: var(--c-white, #fff); line-height: 1.4; letter-spacing: -1px; }
.aw-hero .po-block__title--hero strong { color: var(--c-indigo-150, #EBEEF8); font-weight: 400; }
.aw-hero .po-hero__sub {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-white, #fff);
}
/* 모바일 — 밴드 여백·타이틀은 아래 공통 @768 규칙(28/26 · 32px)이 그대로 받는다.
   서브문장은 한 단 낮추고(14px), 390 폭에서 한 줄이 양옆 여백에 딱 붙어 답답해지므로
   max-width 로 두 줄로 접는다(어절 단위로 끊기게 keep-all). 위계: 타이틀 32 > 서브 14. */
@media (max-width: 768px) {
  .aw-hero .po-hero__sub {
    margin: 12px auto 0;
    max-width: 20em;
    font-size: 14px;
    word-break: keep-all;
  }
}
/* 2026-08-27 수정 — [서브텍스트 삭제] 「분야별 현황과 추진상황을 한 눈에 확인하세요」 안내 문장을
   마크업에서 제거(사용자 지시). .po-hero__sub 규칙도 함께 지운다 — 죽은 선택자를 남기지 않는다. */
.po-block--hero .po-areagrid { margin: 32px 0 0; gap: 20px; }   /* 2026-08-27 수정 — 타이틀↔카드 40→32 */
/* 2026-08-24 수정 — [디자인 교체 · 참고 시안] 아이콘 카드: 틴트 원 + 라인 아이콘(분야색) + 이름 + 카운트 */
.po-herocard {
  --c: var(--po-f1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;                 /* 2026-08-27 수정 — 16→14 */
  padding: 28px 18px 24px;   /* 2026-08-27 수정 — 40/34 → 28/24 (밴드 축소) */
  /* 2026-08-27 수정 — min-height:224px 제거. 내용 높이(218px)만 차지하게 해 밴드를 줄인다.
     글자 크기는 08-24 확대값 유지라 카드가 짓눌리지 않는다(실측 확인). */
  background: var(--c-white);
  border-radius: 16px;
  box-shadow: 0 2px 2.5px rgba(20, 30, 60, 0.04);
}
/* 2026-08-26 수정 — [아이콘 규약] 글리프를 ::before mask 에서 <img> 로 이관 */
.po-herocard__ico > img { display: block; }
.po-herocard__ico::before { display: none !important; }
/* 2026-08-27 수정 — [밴드 축소] 아이콘 원 72→64. 글리프(<img>)도 38→34 로 함께 줄인다
   — 치수가 HTML 의 width/height 속성에도 박혀 있어 CSS 만 고치면 어긋난다. */
.po-herocard__ico { display: flex; align-items: center; justify-content: center; position: relative; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); }
.po-herocard__ico::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34px;   /* 2026-08-24 확대(38) → 2026-08-27 밴드 축소에 맞춰 34 */
  height: 34px;
  background: var(--c);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
/* 2026-08-24 수정 — 히어로 카드 아이콘을 Figma node 10652:6726 세트로 교체.
   ★ 기존 icon-*.svg 는 vision.html 이 계속 쓰므로 덮어쓰지 않고 hero-icon-*.svg 로 따로 둔다.
     받은 원본의 preserveAspectRatio="none" 은 제거했다(이 프로젝트에서 아이콘 찌그러짐 원인). */
.po-herocard__ico--future::before    { -webkit-mask-image: url(../images/vision/field-future.svg);    mask-image: url(../images/vision/field-future.svg); }
.po-herocard__ico--youth::before     { -webkit-mask-image: url(../images/vision/field-youth.svg);     mask-image: url(../images/vision/field-youth.svg); }
.po-herocard__ico--education::before { -webkit-mask-image: url(../images/vision/field-education.svg); mask-image: url(../images/vision/field-education.svg); }
.po-herocard__ico--senior::before    { -webkit-mask-image: url(../images/vision/field-senior.svg);    mask-image: url(../images/vision/field-senior.svg); }
.po-herocard__ico--dignity::before   { -webkit-mask-image: url(../images/vision/field-dignity.svg);   mask-image: url(../images/vision/field-dignity.svg); }
/* 2026-08-24 수정 — 카드 글씨 확대(사용자 지시): 이름 16→20, 카운트 30→38
   + 카드 안 타이틀만 학교알림체(--ff-title)로 — 5대 핵심공약 카드(.po-areacard__name)와 같은 서체 */
.po-herocard__name { font-family: var(--ff-title); font-size: 24px; font-weight: 400; color: #111; letter-spacing: -0.8px; word-break: keep-all; text-align: center; }
.po-herocard__count { display: inline-flex; align-items: baseline; gap: 3px; font-size: 38px; font-weight: 800; color: var(--c); line-height: 1; letter-spacing: -1px; }
.po-herocard__count em { font-style: normal; font-size: 17px; font-weight: 500; color: #111; letter-spacing: 0; }
@media (max-width: 1024px) { .po-herocard__name { font-size: 20px; } }
/* 2026-08-27 수정 — .po-hero__sub 항목 제거(마크업에서 사라짐) · 밴드 상하 여백 36/32→28/26 */
@media (max-width: 768px) { .po-block--hero { padding: 28px 0 26px; min-height: auto; } .po-hero__inner { padding: 0 18px; } .po-block--hero .po-block__title--hero { font-size: 32px; } .po-hero__eyebrow { font-size: 16px; } .po-herocard { padding: 18px 12px 16px; min-height: 0; } .po-herocard__name { font-size: 18px; } .po-herocard__count { font-size: 28px; } .po-herocard__ico { width: 56px; height: 56px; } .po-herocard__ico::before { width: 30px; height: 30px; } }
/* 2026-08-27 수정 — [모바일 세로 폭] ≤480 공통 규칙(:6763)이 .po-areagrid 를 1열로 떨어뜨려
   히어로가 5행이 되고 상단이 1103px 까지 늘어났다(360 기준 종전 816 → +287). 「세로 폭을 줄이라」는
   이번 지시와 반대 방향이라 **히어로 격자만** 2열로 되돌린다.
   ★ 스코프를 .po-block--hero 로 묶어 총괄현황·공약사업 목록 두 화면에 «같은 값»이 걸리게 한다
     (한쪽만 고치면 「그대로 적용」이 깨진다). 페이지 아래 다른 .po-areagrid 는 1열 그대로. */
@media (max-width: 480px) {
  .po-block--hero .po-areagrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .po-block--hero .po-herocard { padding: 16px 10px 14px; gap: 10px; }
  .po-block--hero .po-herocard__ico { width: 48px; height: 48px; }
  .po-block--hero .po-herocard__ico > img { width: 26px; height: 26px; }
  .po-block--hero .po-herocard__name { font-size: 16px; letter-spacing: -0.8px; }
  .po-block--hero .po-herocard__count { font-size: 24px; }
  .po-block--hero .po-herocard__count em { font-size: 13px; }
}

/* 표 제목줄 — figma: 제목(좌) ↔ (단위)(우) space-between. 설명 caption 은 a11y 용으로만 숨김(표 위 텍스트 제거) */
.pledge-overview .data-table__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.po-tablehd { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 16px; }
.po-tablehd .data-section__title { flex: 1 1 auto; margin: 0; }
.po-tablehd__unit { flex: 0 0 auto; font-size: 15px; color: #777676; line-height: 1.5; white-space: nowrap; }
.pledge-overview-page article.pledge-overview { margin-top: 56px; }   /* 이행계획 ↔ 첫 표 섹션 간격 */
@media (max-width: 768px) { .pledge-overview-page.board-page { overflow-x: visible; } }   /* 모바일 풀블리드 밴드 양옆 꽉차게 (board-page overflow-x:clip 우회 — sns/inaug 패턴) */
/* [디자인 가이드] 섹션 소제목 — 전 페이지 공통 26px/700 (기준: 추진현황 .ps-*-title / .data-section__title) */
.po-block__title--sm { font-size: 26px; margin-bottom: 18px; }

/* ---- 5대 분야 아이콘 카드 ---- */
.po-areagrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 2026-08-24 수정 — `1fr`(=minmax(auto,1fr))은 트랙이 min-content 아래로 못 줄어 좁은 폭에서
     카드가 컨테이너 밖으로 삐져나가 잘렸다(320px 실측: LI 오른쪽 335 > 화면 320).
     minmax(0,1fr) 로 트랙이 줄어들 수 있게 한다. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.po-areacard {
  --c: var(--po-city);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 27px 23px 25px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: 0 2px 5px rgba(20,30,60,0.04);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
.po-areacard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20,30,60,0.1);
}
.po-areacard--city    { --c: var(--po-city); }
.po-areacard--welfare { --c: var(--po-welfare); }
.po-areacard--edu     { --c: var(--po-edu); }
.po-areacard--econ    { --c: var(--po-econ); }
.po-areacard--comm    { --c: var(--po-comm); }
.po-areacard__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.po-areacard__name {
  font-family: var(--ff-title);
  font-size: 28px;
  font-weight: 400;
  color: #111;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.po-areacard__sub {
  font-size: 16px;
  color: #858585;
  letter-spacing: -0.5px;
  line-height: 1.35;
}
/* 숫자 — 80px 원형 분야색 뱃지 */
.po-areacard__num {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-feature-settings: "tnum";
}
.po-areacard__num em {
  /* 2026-08-13 Stage4 — 명도대비. 민트(--po-f3 #018582) 원 위 흰 「개」가 4.488:1 로
     소형 기준 4.5 에 0.012 모자랐다. 색은 그대로 두고(분야 5색·common.css 무손상)
     대형 텍스트 기준(18.66px 이상 + 700 → 3:1)이 적용되도록 19px/700 으로 키운다. */
  font-size: 19px;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  margin-left: 1px;
}

/* ---- 2단 차트 레이아웃 ---- */
.po-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.po-chartcard {
  padding: 28px 28px 26px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-white);
}
.po-chartcard .po-block__title--sm { margin-bottom: 22px; }

/* 추진시기별 — 가로 막대 */
.po-barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.po-barrow { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; }
.po-barrow__label { font-size: 16px; font-weight: 600; color: var(--c-text-default); }
.po-barrow__track { height: 14px; border-radius: 9999px; background: var(--c-gray-200); overflow: hidden; }
.po-barrow__fill { display: block; height: 100%; border-radius: 9999px; }
.po-fill--c1 { background: var(--po-city); }
.po-fill--c2 { background: var(--po-edu); }
.po-fill--c3 { background: var(--c-primary); }
.po-barrow__val { font-size: 18px; font-weight: 800; color: var(--c-text-default); font-feature-settings: "tnum"; white-space: nowrap; }
.po-barrow__val em { font-size: 14px; font-weight: 600; font-style: normal; color: var(--c-text-sub); margin-left: 1px; }

/* 기타현황별 — 좌우 분할 비율 바 */
.po-splitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.po-splitrow__cap { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: var(--c-text-sub); }
.po-splitrow__cap b { color: var(--c-text-default); font-weight: 700; }
.po-splitbar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
.po-splitbar__a, .po-splitbar__b {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
}
.po-splitbar__a { background: var(--c-primary); }
.po-splitbar__b { background: var(--c-indigo-400); }

/* ---- 부서별 현황 카드 ---- */
.po-deptgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.po-deptcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 14px;
  border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-gray-100);
  text-align: center;
}
.po-deptcard__name { font-size: 18px; font-weight: 600; color: #111; letter-spacing: -0.4px; }
.po-deptcard__num { font-size: 36px; font-weight: 800; line-height: 1; color: #2e3246; font-feature-settings: "tnum"; }
.po-deptcard__num::after { content: "개"; font-size: 14px; font-weight: 600; color: #777676; margin-left: 1px; }

/* ===== 추진시기별 — 원형(도넛) 게이지 =====
   2026-08-24 사용자 지시로 말풍선(.po-bubble)에서 원형으로 교체. 말풍선·물결 규칙은 함께 걷어냈다.
   기법은 이 사이트에 이미 있는 .ps-chart(공약사업 추진현황 도넛)와 같다 — 인라인 SVG + stroke-dasharray.
   원 둘레 = 2π × 52 = 326.7  (r=52, viewBox 120, stroke 11)
     단기 43/77 = 55.8% → 182.5 · 중기 28/77 = 36.4% → 118.8 · 장기 6/77 = 7.8% → 25.5
   색은 말풍선이 쓰던 3색을 그대로 승계한다(신규 색 0). pledge-status 의 .ps-steps--n3 과 짝이다. */
.po-chartcard { position: relative; }
.po-rings {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 1fr 의 auto 최소값이 칸의 min-content 라
                                                        고정폭 링이 카드를 밀어냈다(360px 에서 10px 초과) */
  gap: 16px;
}
.po-ring {
  --c: var(--c-primary);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.po-ring--c1 { --c: #d51d5b; }   /* 단기 — 핑크 */
.po-ring--c2 { --c: #5b3fa8; }   /* 중기 — 보라 */
.po-ring--c3 { --c: #2e73c8; }   /* 장기 — 블루 */

.po-ring__chart {
  position: relative;
  display: block;
  width: 100%;              /* 고정폭 금지 — 칸이 좁아지면 링도 같이 줄어야 카드가 안 밀린다 */
  max-width: 146px;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
}
.po-ring__svg { display: block; width: 100%; height: 100%; }
.po-ring__track { stroke: var(--c-gray-200); }
.po-ring__fill { stroke: var(--c); stroke-dasharray: var(--dash); }

/* 위쪽 시각 블록이 낭독 정본이다(아래 표는 2026-08-18 에 제거됐다) — 숫자는 반드시 «진짜 글자»로 둔다.
   SVG 는 장식이므로 aria-hidden, 값은 이 span 이 읽힌다 */
.po-ring__num {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--c);              /* 34px/800 = 대형 텍스트 3:1 기준 — c1 4.9 · c2 8.5 · c3 4.4 통과 */
  font-feature-settings: "tnum";
}
/* 「개」·기간은 소형이라 4.5:1 이 필요하다. var(--c-text-sub) #777676 은 흰 배경에서 4.11 로 미달이므로
   Stage4 가 .data-note·.ps-note 에 쓴 #5b606b(5.94:1)를 그대로 쓴다 — 신규 색 아님 */
.po-ring__num em { font-size: 14px; font-weight: 600; font-style: normal; color: #5b606b; margin-left: 2px; }
.po-ring__label { font-size: 19px; font-weight: 800; color: var(--c-text-default); }
.po-ring__period { font-size: 13px; color: #5b606b; word-break: keep-all; }

/* 채워지는 연출 — JS 없이 CSS 로만. 애니메이션이 안 돌아도 최종값 var(--dash) 이 그대로 남는다 */
@keyframes po-ring-draw { from { stroke-dasharray: 0 326.7; } to { stroke-dasharray: var(--dash); } }
.po-ring__fill { animation: po-ring-draw 1.1s cubic-bezier(.22,.61,.36,1) both; }
.po-ring--c2 .po-ring__fill { animation-delay: .12s; }
.po-ring--c3 .po-ring__fill { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .po-ring__fill { animation: none; } }

/* ===== 기타현황별 — 좌우 카운트 + 막대 (Image #38) ===== */
.po-otherlist { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 32px; }
/* 2026-08-24 수정 — 라벨 열이 152px 이라 「계속·신규 여부」(19px, 아이콘+간격 포함 ≈179px)가
   두 줄로 접혔다. ≤768 에만 nowrap 을 걸어 둬서 769~1024 구간이 그대로 남아 있었다(실측).
   → 라벨 열을 190px 로 넓히고 nowrap 은 전 구간에 적용한다. */
.po-otherrow { --c: var(--c-primary); display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; }
.po-otherrow--c1 { --c: var(--c-primary); } .po-otherrow--c2 { --c: #1342A6; } .po-otherrow--c3 { --c: #5b3fa8; }
/* 2026-08-24 수정 — [기타현황별 현황 픽토그램 추가] Lucide 아이콘(book-open/heart-pulse/handshake)
   로컬 저장(images/icons/ic-budget·ic-status·ic-progress.svg) 후 mask-image 로 분야색 단색 적용.
   2026-08-25 수정 — 글리프가 라벨과 어긋나 있었다: 예산별=book-open(돈과 무관 + 히어로의 교육
   아이콘과 같은 글리프라 한 화면에 책이 두 번 나왔다), 계속·신규=heart-pulse(무관).
   → wallet / refresh-cw 로 교체. 사업주체별=handshake 는 자체·타기관 협조와 맞아 유지.
   ※ 파일명은 CSS·다른 화면 참조가 걸려 있어 그대로 둔다(내용만 교체).
   틴트 배경은 --c 를 옅게 섞은 color-mix — 카드 배지(.po-deptcard__icon)와 같은 톤 배지 패턴. */
.po-otherrow__label { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 2026-08-26 수정 — [아이콘 규약] 글리프를 ::before mask 에서 <img> 로 이관 */
.po-otherrow__icon > img { display: block; width: 100%; height: 100%; padding: 20%; box-sizing: border-box; object-fit: contain; }  /* = 옛 mask-size:60% center */
.po-otherrow__icon::before { display: none !important; }
.po-otherrow__icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 14%, white);
}
.po-otherrow__icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--c);
  -webkit-mask-size: 60%;
  mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.po-otherrow--c1 .po-otherrow__icon::before { -webkit-mask-image: url(../images/icons/ic-budget.svg); mask-image: url(../images/icons/ic-budget.svg); }
.po-otherrow--c2 .po-otherrow__icon::before { -webkit-mask-image: url(../images/icons/ic-status.svg); mask-image: url(../images/icons/ic-status.svg); }
.po-otherrow--c3 .po-otherrow__icon::before { -webkit-mask-image: url(../images/icons/ic-progress.svg); mask-image: url(../images/icons/ic-progress.svg); }
.po-otherrow__title { font-size: 19px; font-weight: 500; color: #575a6a; white-space: nowrap; letter-spacing: -0.4px; }
.po-otherrow__main { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.po-otherrow__cap { display: flex; justify-content: space-between; font-size: 17px; color: var(--c-text-sub); }
.po-otherrow__cap b { color: var(--c); font-weight: 800; font-size: 21px; }
.po-otherrow__cap > span:last-child b { color: var(--c-gray-700); }   /* 둘째 값(비예산·신규·타기관) 숫자는 그레이700 (강조색 X) */
.po-otherrow__bar { display: block; height: 11px; border-radius: 999px; background: var(--c-gray-150, #e9eaee); overflow: hidden; }
.po-otherrow__fill { display: block; height: 100%; border-radius: 999px; background: var(--c); width: calc(var(--pct) * 1%); }
@media (max-width: 600px) {
  .po-rings { gap: 8px; }
  .po-ring__chart { max-width: 100px; margin-bottom: 8px; }
  .po-ring__num { font-size: 26px; }
  .po-ring__num em { font-size: 12px; }
  .po-ring__label { font-size: 16px; }
  .po-ring__period { font-size: 12px; }
}

/* ===== 부서별 현황 — 8개 한 줄 + 아이콘 ===== */
.po-deptgrid { grid-template-columns: repeat(8, 1fr); gap: 10px; }
.po-deptcard { gap: 8px; padding: 19px 9px; background: var(--c-white); box-shadow: 0 4px 5px rgba(0,0,0,0.06); }
.po-deptcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #2e3246; background: #f1f3fa; }
.po-deptcard__icon svg, .po-deptcard__icon .ico { width: 22px; height: 22px; }
@media (min-width: 1025px) { .po-deptgrid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 1024px) { .po-deptgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .po-deptgrid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 이행 계획 — 그라데이션 카드 2개 (Image #38) ===== */
.po-plandl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.po-plancard { display: flex; align-items: stretch; gap: 0; min-height: 120px; padding: 0; border: 1.5px solid #737686; border-radius: 8px; background: #fff; color: var(--c-text-default);
  transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.po-plancard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.25); border-color: #5f626e; }
.po-plancard__ico { order: 0; align-self: stretch; flex: 0 0 120px; width: 120px; display: inline-flex; align-items: center; justify-content: center; background: #737686; color: #fff; border-radius: 8px 0 0 8px; }
.po-plancard__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px 0 42px; }
.po-plancard__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.po-plancard__text strong { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: #1a1a1a; }
.po-plancard__text strong small { font-size: 16px; font-weight: 400; margin-left: 6px; color: #5B606B; }
.po-plancard__desc { font-size: 16px; color: #5B606B; }
.po-plancard__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; color: #1a1a1a; background: none; width: auto; height: auto; }
@media (max-width: 768px) { .po-plandl { grid-template-columns: 1fr; gap: 14px; } }
/* [모바일 위계] 기타현황별·이행계획·표 단위 — 데스크탑 크기 그대로 커 보이는 것 축소 */
@media (max-width: 768px) {
  .po-otherlist { gap: 22px; }
  /* 2026-08-24 수정 — 라벨(아이콘+글자)이 한 줄에 들어가는 폭으로: 24 + 6 + 글자 13px(≈95) ≈ 128 */
  .po-otherrow { grid-template-columns: 130px 1fr; gap: 12px; }
  .po-otherrow__label { gap: 6px; }
  .po-otherrow__icon { width: 24px; height: 24px; border-radius: 7px; }
  .po-otherrow__title { font-size: 13px; letter-spacing: -0.5px; }
  .po-otherrow__cap { font-size: 14px; }
  .po-otherrow__cap b { font-size: 17px; }
  .po-plancard__ico { flex: 0 0 84px; width: 84px; }
  .po-plancard__body { gap: 10px; padding: 0 18px 0 20px; }
  .po-plancard__text strong { font-size: 17px; }
  .po-plancard__text strong small { font-size: 13px; }
  .po-plancard__desc { font-size: 13px; }
  .po-tablehd { gap: 8px; }
  .po-tablehd__unit { font-size: 12px; }
}

/* ===== 중구청장 소통문자폰 안내 (figma 10476:10933) ===== */
/* 카드형: 흰 배경 카드(border indigo-250 / radius 20 / shadow) + 좌측 텍스트군 + 우측 구청장 합성사진(절대배치).
   PC/태블릿은 좌텍스트·우사진 2단, 모바일(≤768)은 사진을 텍스트 아래로 스택. */
.hotline { margin-top: 8px; }
.hotline__card {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-indigo-250);
  border-radius: 20px;
  background: var(--c-white);
  box-shadow: 0 8px 12px color-mix(in srgb, var(--c-indigo-700) 8%, transparent);   /* figma 0 8 12 rgba(50,54,73,.08) = indigo-700 8% */
  min-height: min(54vw, 832px);   /* figma 832/1540≈54% — 우측 사진(하단정렬)이 머리 안 잘리게 카드 높이 확보 */
}
/* 좌측 텍스트군 — 우측 사진(약 45%)을 비워두고 그 안에서 흐름 스택.
   max-width 를 카드폭의 55%로 제한 → 생활불편 등 긴 문장이 우측 사진 밑으로 안 파고듦(figma 본문우측 ~842 < 사진 864). */
.hotline__main {
  position: relative; z-index: 2;
  padding: 56px 52px 52px;
  max-width: min(880px, 55%);
  display: flex; flex-direction: column; gap: 32px;   /* figma 블록 기본 간격(민원↔생활 ≈34) */
}
/* figma: H2 그룹 ↔ 민원안내 사이가 넉넉(≈80). 말풍선이 floating(≥1601)으로 흐름에서 빠지므로
   바로 뒤 민원 블록에 추가 여백을 줘 figma 리듬 복원(흐름배치 폭에서는 말풍선이 사이를 채우므로 미적용). */
@media (min-width: 1601px) {
  .hotline__bubble + .hotline__block { margin-top: 40px; }
}
/* 상단 텍스트군 (배지 + 헤딩) */
.hotline__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hotline__badge { display: inline-block; padding: 7px 18px; border-radius: 999px; background: var(--c-indigo-700); color: var(--c-text-white); font-size: 15px; font-style: italic; line-height: 1.5; }
/* 52px(figma) — 단, 카드폭이 1540 미만으로 줄면 헤딩이 말풍선(43.2%) 밑으로 파고들어 가림.
   뷰포트 폭에 맞춰 살짝 축소(clamp)해 어느 폭에서도 말풍선 좌측에 머물게(1540+ 에선 52 고정) */
.hotline__title { margin: 0; font-family: var(--ff-body); font-size: clamp(40px, 3.4vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -1px; color: var(--c-indigo-700); }
.hotline__title-accent { color: var(--c-pink-500); font-weight: 700; }

/* 말풍선 (전화번호) — figma 는 헤딩 우측 상단에 floating(left 666/top 97).
   그 좌표는 카드폭이 정확히 1540 일 때만 맞고(뷰포트 ≥ ~1732), 그 미만이면 헤딩이 말풍선 밑으로 파고들어 가림.
   따라서 기본값 = 헤딩 아래 흐름(flow) 배치(좌측 텍스트 컬럼 안), 초광폭(≥1601)에서만 figma float 복원. */
.hotline__bubble {
  width: 422px; max-width: 100%; box-sizing: border-box;
  padding: 24px 26px 26px;
  background: url("../images/hotline/bubble-v2.svg") no-repeat center / 100% 100%;
  filter: drop-shadow(2px 6px 9px rgba(231, 98, 122, 0.22));   /* figma 핑크 그림자 — 장식값(토큰 외 정의부) */
}
/* 초광폭: figma 그대로 헤딩 우측 상단 floating (카드폭 1540 근접 — 가림 없음) */
@media (min-width: 1601px) {
  .hotline__bubble { position: absolute; left: 666px; top: 97px; z-index: 3; max-width: none; }
}
.hotline__bubble-label { margin: 0; font-size: 19px; line-height: 1.5; color: var(--c-indigo-500); white-space: nowrap; }
.hotline__bubble-num { margin: 6px 0 0; font-size: 46px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; white-space: nowrap; }
.hotline__bubble-num a { color: var(--c-pink-500); text-decoration: none; }
.hotline__bubble-num a:hover { text-decoration: underline; }
.hotline__bubble-note { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--c-gray-550); }

/* 블록 (제목 + 내용) */
.hotline__block { display: flex; flex-direction: column; gap: 20px; }
.hotline__block-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.5; letter-spacing: -0.5px; color: var(--c-indigo-700); }

/* 처리기한 칩 3종 (indigo-50) */
.hotline__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hotline__pill { padding: 12px; border-radius: 10px; background: var(--c-indigo-50); font-size: 16px; line-height: 1.5; color: var(--c-indigo-500); }
.hotline__pill b { font-weight: 700; color: var(--c-pink-500); }

/* 체크 안내 2종 — 상단 구분선(gray-250) 위 / 체크아이콘 = mask-image + pink-500 */
.hotline__checks { list-style: none; margin: 0; padding: 21px 0 0; border-top: 1px solid var(--c-gray-250); display: flex; flex-direction: column; gap: 12px; }
.hotline__checks li { display: flex; gap: 6px; font-size: 16px; line-height: 1.4; letter-spacing: -0.5px; color: var(--c-indigo-450); }
/* 2026-08-26 수정 — [아이콘 규약] <img> 전환 */
.hotline__check-ico {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
  background: none;
  -webkit-mask: url(../images/icons/ui/ic-hotline-check.svg) no-repeat center / 18px 18px;
  mask: url(../images/icons/ui/ic-hotline-check.svg) no-repeat center / 18px 18px;
}

/* 관련법령 박스 (gray-150) */
.hotline__law { display: flex; flex-wrap: wrap; gap: 6.5px; margin: 0; padding: 16px; border-radius: 12px; background: var(--c-gray-150); font-size: 15px; line-height: 1.5; }
.hotline__law strong { font-weight: 700; color: var(--c-gray-800); }
.hotline__law span { color: var(--c-indigo-400); }

/* 생활불편신고 본문 — 한 문장(응답소만 핑크·크게) */
.hotline__report { margin: 0; font-size: 17px; line-height: 1.55; color: var(--c-indigo-450); }
.hotline__report-link { font-size: 20px; font-weight: 700; line-height: 1; color: var(--c-pink-500); white-space: nowrap; text-decoration: none; }
.hotline__report-link:hover { text-decoration: underline; }

/* 우측 구청장 합성사진 — 카드 우측 하단 정렬. 저장 원본(mayor-v2.png 501×733)을 100% 크기 그대로 노출(우측여백 4.68%, 하단 flush) */
.hotline__photo {
  position: absolute; right: 4.68%; bottom: 0; z-index: 1;
  width: 501px;              /* 저장 원본 크기 100% */
  aspect-ratio: 501 / 733;   /* 저장 비율 고정 — 잘림/늘어남 없음 */
  height: auto;
  pointer-events: none;
}

/* ===== 태블릿 (769~1200) — 사진 폭 유지하되 텍스트 영역·폰트 축소 ===== */
@media (max-width: 1200px) and (min-width: 769px) {
  .hotline__main { padding: 40px; max-width: 62%; gap: 24px; }
  .hotline__title { font-size: clamp(30px, 4vw, 42px); }
  /* 말풍선: 절대좌표 해제 → 헤딩 아래 흐름 배치(폭 좁아 헤딩 우측 공간 없음) */
  .hotline__bubble { position: relative; left: auto; top: auto; width: 100%; max-width: 422px; }
  .hotline__bubble-num { font-size: clamp(30px, 4.5vw, 46px); white-space: normal; }
  .hotline__pill { font-size: 14px; padding: 10px; }
  .hotline__checks li { font-size: 14px; }
  .hotline__law { font-size: 13px; padding: 12px; }
  .hotline__report { font-size: 15px; }
  .hotline__report-link { font-size: 18px; }
}

/* ===== 모바일 (≤768) — 사진을 텍스트 아래로 스택(겹침 금지) ===== */
@media (max-width: 768px) {
  .hotline__card { border-radius: 16px; }
  .hotline__main { padding: 28px 20px; max-width: none; gap: 22px; }
  .hotline__badge { font-size: 12px; padding: 5px 12px; }
  .hotline__title { font-size: 28px; }
  /* 말풍선: 흐름 배치 + 풀폭(꼬리 SVG 배경 비율 유지 위해 헤딩 아래 일반 박스 룩 대체) */
  .hotline__bubble {
    position: relative; left: auto; top: auto; width: 100%; box-sizing: border-box;
    padding: 18px 20px;
    background: var(--c-white);
    border: 1.5px solid var(--c-pink-500);
    border-radius: 14px;
    filter: none;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c-pink-500) 14%, transparent);
  }
  .hotline__bubble-label { font-size: 14px; white-space: normal; }
  .hotline__bubble-num { font-size: 30px; white-space: normal; }
  .hotline__bubble-note { font-size: 12px; }
  .hotline__block-title { font-size: 18px; }
  /* 처리기한 칩: wrap 허용(가로 배치 유지, 좁으면 줄바꿈) */
  .hotline__pill { font-size: 14px; padding: 10px; }
  .hotline__checks li { font-size: 14px; }
  .hotline__law { font-size: 13px; }
  .hotline__report { font-size: 15px; }
  .hotline__report-link { font-size: 18px; }
  /* 구청장 사진 — 절대배치 해제, 텍스트 아래 흐름 스택(겹침 금지) */
  .hotline__photo {
    position: relative; right: auto; bottom: auto; z-index: 1;
    display: block; width: 78%; max-width: 360px; margin: 8px auto 0;
  }
}

/* ---- 이행 계획 다운로드 ---- */
.po-downloads { display: flex; flex-wrap: wrap; gap: 14px; }
.po-dlbtn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  border: 1px solid var(--c-blue-500);
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-blue-500);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.po-dlbtn small { font-weight: 500; color: var(--c-text-sub); margin-left: 3px; }
.po-dlbtn:hover {
  background: var(--c-blue-500); color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(19,66,166,0.22);
}
.po-dlbtn:hover small { color: rgba(255,255,255,0.85); }
.po-dlbtn__ico { display: inline-flex; }
.po-dlbtn__ico svg { width: 22px; height: 22px; }

/* ---- 사업별 탭: 필터/검색 ---- */
.po-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0 0 18px; }
.po-filter { display: flex; flex-direction: column; gap: 6px; }
.po-filter__label { font-size: 14px; font-weight: 600; color: var(--c-text-sub); }
.po-filter__select { min-width: 150px; }
.po-search { display: flex; align-items: stretch; gap: 0; margin-left: auto; }
.po-search__input { min-width: 220px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.po-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; border: 1px solid var(--c-primary); border-left: 0;
  border-top-right-radius: 8px; border-bottom-right-radius: 8px;
  background: var(--c-primary); color: #fff; cursor: pointer;
}
.po-search__btn svg { width: 20px; height: 20px; }
.po-count { margin: 0 0 14px; font-size: 15px; color: var(--c-text-sub); }
.po-count strong { color: var(--c-primary); font-weight: 700; }

/* 분야 태그(분야별 탭 제목 옆) */
.po-area-tag {
  display: inline-block; margin-left: 8px; padding: 2px 12px;
  border-radius: 9999px; font-size: 14px; font-weight: 700;
  color: #fff; vertical-align: middle;
}
.po-area-tag--city    { background: var(--po-city); }
.po-area-tag--welfare { background: var(--po-welfare); }
.po-area-tag--edu     { background: var(--po-edu); }
.po-area-tag--econ    { background: var(--po-econ); }
.po-area-tag--comm    { background: var(--po-comm); }

/* 표 안 다운로드 링크 / 연동 자리 안내행 */
.po-doc {
  display: inline-block; padding: 5px 14px;
  border: 1px solid var(--c-blue-500); border-radius: 7px;
  color: var(--c-blue-500); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.po-doc:hover { background: var(--c-blue-500); color: #fff; }
.po-tbd {
  text-align: center !important; color: var(--c-text-mute);
  font-size: 14px; background: var(--c-gray-100);
}
.po-projtable td:first-child, .po-projtable th:first-child { white-space: nowrap; }

/* ---- 반응형 ---- */
@media (max-width: 1280px) {
  .po-areagrid { grid-template-columns: repeat(3, 1fr); }
  .po-deptgrid { grid-template-columns: repeat(4, 1fr); }
  .po-block { margin-top: 48px; }
  .po-block__title { font-size: 24px; }
  .po-block__title--sm { font-size: 20px; }
  .po-areacard__num { font-size: 30px; }
}
@media (max-width: 900px) {
  .po-twocol { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 768px) {
  .po-tabs { margin: 0 auto 40px; }
  .po-tab { height: 44px; padding: 10px 22px; font-size: 15px; }
  .po-block { margin-top: 40px; }
  .po-block__title { font-size: 20px; margin-bottom: 16px; }
  .po-block__title--sm { font-size: 18px; margin-bottom: 14px; }
  .po-areagrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .po-areacard { padding: 20px 16px 18px; border-radius: 12px; }
  .po-areacard__icon { width: 44px; height: 44px; }
  .po-areacard__icon svg { width: 24px; height: 24px; }
  .po-areacard__name { font-size: 17px; }
  .po-areacard__num { font-size: 26px; }
  .po-chartcard { padding: 22px 18px 20px; }
  .po-barrow { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .po-barrow__val { font-size: 16px; }
  .po-deptgrid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .po-deptcard { padding: 18px 10px; }
  .po-deptcard__num { font-size: 24px; }
  .po-downloads { flex-direction: column; }
  .po-dlbtn { width: 100%; justify-content: center; padding: 15px 18px; font-size: 15px; }
  .po-filterbar { gap: 12px; }
  .po-filter { flex: 1 1 45%; }
  .po-filter__select { min-width: 0; width: 100%; }
  .po-search { width: 100%; margin-left: 0; }
  .po-search__input { flex: 1 1 auto; min-width: 0; }
  .po-area-tag { font-size: 12px; padding: 2px 10px; }
}
@media (max-width: 480px) {
  .po-tab { padding: 9px 16px; font-size: 14px; }
  .po-areagrid { grid-template-columns: 1fr; }
  .po-areacard { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .po-areacard__icon { margin-bottom: 0; }
  .po-areacard__sub { flex: 1 1 100%; order: 3; }
  .po-areacard__num { margin-left: auto; }
  .po-deptgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== ds-tabs (공용 pill 탭) ==========================================
   대상: 구민과의 약속 하위 탭형 페이지 공용
        (pledge-annual / pledge-status / participation / awards 등)
   pledge-overview 의 .po-tabs pill 탭 사상을 일반화한 공용 컴포넌트.
   마크업: .ds-tabs[role=tablist] > .ds-tabs__indicator + .ds-tab[role=tab]*
           패널: .ds-panel[role=tabpanel] (id = "<scope>-panel-<key>")
   슬라이딩 인디케이터 + 패널 전환 JS 는 각 페이지 하단 인라인 스크립트.
   표/문단은 기존 .data-table / .data-section / .data-lead / .data-note 재사용. */
.ds-tabs {
  position: relative;
  display: flex;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--gap-section);   /* 알약탭 가운데 + 콘텐츠와 80px 갭 */
  padding: 4px;
  background: var(--c-gray-150);
  border-radius: 9999px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--c-primary);
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), width 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
  pointer-events: none;
}
.ds-tab {
  position: relative;
  z-index: 1;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: transparent;
  border: 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 18px;
  color: #464c53;
  letter-spacing: -0.6px;
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
}
.ds-tab.is-active { color: var(--c-white); font-weight: 600; }
.ds-panel[hidden] { display: none; }
.ds-panel:focus { outline: none; }

/* 탭 패널 안 본문 상단 간격 정리 (탭 바로 아래 .board-content) */
.ds-panel > .board-content { margin-top: 0; }
.ds-panel .data-section:first-child { margin-top: 0; }

/* awards — 대상사업(긴 텍스트) 좌측 정렬 + 가독 폭 */
.data-table--awards tbody td:nth-child(2) { text-align: left; min-width: 320px; }
.data-table--awards { min-width: 920px; }
/* annual — 가로 넓은 연차별 표: 최소폭 확보해 가로스크롤 유도 */
/* table-layout:fixed → colgroup 너비 강제(연차 5칸 동일) */
.data-table--annual { min-width: 1100px; table-layout: fixed; }

/* annual — 2줄 그룹 헤더(연차별 추진계획 colspan 5) */
.data-table--annual thead th[scope="colgroup"] { letter-spacing: -0.3px; }
.data-table--annual thead th { white-space: nowrap; }
/* annual — 공약명 행머리(th[scope=row]) : 좌측정렬 + 배경 없이 굵기로만 강조 */
.board-content .data-table.data-table--annual tbody th[scope="row"] {
  text-align: left;          /* 전역 가운데정렬 규칙(동률) 이기도록 .data-table 추가 */
  background: transparent;
  font-weight: 700;
  color: var(--c-text-default);
  white-space: normal;
  line-height: 1.5;
}
/* annual — 연차값은 가운데, 공약명·추진목표(지표)는 좌측 */
.data-table--annual tbody td { text-align: center; }
.board-content .data-table.data-table--annual tbody td.po-goal { text-align: left; border-left: 1px solid var(--c-line); }   /* rowspan 연속행 첫 셀(추진목표) 좌측 라인 복원 */
.board-content .data-table.data-table--annual thead tr:last-child th:first-child { border-left: 1px solid var(--c-line); }   /* 2번째 헤더행 첫 셀(2022) 좌측 라인 복원 */

/* ============================================================
   pledge-overview 탭②③ — 분야별 이행계획(15585) / 사업별 이행계획서(15586)
   5대 분야 하위 탭(.po-subtabs = 공용 .ds-tabs) + 표. _asis 인라인.
   ============================================================ */
/* 5대 분야 아이콘 카드 선택 (공식 동일 — pill 탭 대체) */
.po-areatabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 32px; position: sticky; top: 0; z-index: 20; padding: 0 0 14px; }   /* 상단 패딩 제거(po-tabs 80px 갭과 중복 방지) */
/* 동 탭 sticky와 동일 — 흰 그라데이션(위 100 → 아래 0) + 점진 블러(PC), 그림자 없음 */
.po-areatabs::before { content: ""; position: absolute; z-index: -2; pointer-events: none; top: -26px; bottom: -44px; left: 50%; transform: translateX(-50%); width: 100vw; background: linear-gradient(to bottom, #fff 0%, #fff 52%, rgba(255,255,255,0) 100%); }
@media (min-width: 1025px) {
  .po-areatabs::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -26px; bottom: -44px; left: 50%; transform: translateX(-50%); width: 100vw; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%); }
}
.po-areatab {
  --c: var(--po-city);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 12px; background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: 14px; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.po-areatab--city    { --c: var(--po-city); }
.po-areatab--welfare { --c: var(--po-welfare); }
.po-areatab--edu     { --c: var(--po-edu); }
.po-areatab--econ    { --c: var(--po-econ); }
.po-areatab--comm    { --c: var(--po-comm); }
.po-areatab__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #f4f5f7; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); transition: color .2s ease, background-color .2s ease; }
.po-areatab__icon svg, .po-areatab__icon .ico { width: 26px; height: 26px; stroke-width: 1.4px; }
.po-areatab.is-active .po-areatab__icon { background: rgba(255,255,255,.18); }
/* [공통 규칙] 분야 탭 — 모바일 좌우 스크롤 컴팩트 탭 (.po-areatabs 조상으로 특이도 ↑ : 데스크탑 24px 이김) */
@media (max-width: 768px) {
  .po-areatabs { display: flex; grid-template-columns: none; overflow-x: auto; gap: 8px; padding: 4px 0 14px; position: sticky; top: 0; background: var(--c-white); -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
  .po-areatabs::before, .po-areatabs::after { display: none; }
  .po-areatabs .po-areatab { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; }
  .po-areatabs .po-areatab__icon { width: 28px; height: 28px; }
  .po-areatabs .po-areatab__icon svg, .po-areatabs .po-areatab__icon .ico { width: 17px; height: 17px; }
  .po-areatabs .po-areatab__name { font-size: 14px; }
  .po-areatabs .po-areatab__count { font-size: 11px; padding: 1px 8px; margin-top: 0; }   /* 데스크탑용 음수 margin 리셋 → 세로중앙 */
}
/* [공통 규칙] 스크롤 페이드 — 위치별 좌/우 토글 (scroll-fade.js 가 .at-start/.at-end 부여) */
@media (max-width: 768px) {
  .po-areatabs.at-start, .pa-tabs.at-start {   /* 맨 왼쪽 → 왼쪽 페이드 제거 */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); }
  .po-areatabs.at-end, .pa-tabs.at-end {   /* 맨 오른쪽 → 오른쪽 페이드 제거 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%); }
  .po-areatabs.at-start.at-end, .pa-tabs.at-start.at-end {   /* 넘침 없음 → 페이드 없음 */
    -webkit-mask-image: none; mask-image: none; }
}
.po-areatab__name { font-family: var(--ff-title); font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--c-text-default); transition: color .2s ease; }
.po-areatab__count { display: inline-flex; align-items: center; margin-top: -6px; padding: 2px 11px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--c); overflow: hidden; max-width: 90px; max-height: 36px; transition: color .2s ease, border-color .2s ease, max-width .28s ease, max-height .28s ease, opacity .28s ease, margin .28s ease, padding .28s ease, border-width .28s ease; }
.po-areatab.is-active .po-areatab__count { color: var(--c-white); border-color: rgba(255,255,255,.55); }
/* 스티키로 천장에 붙으면(.is-stuck — scroll-fade.js) 카운트 뱃지를 부드럽게 접어 컴팩트하게 */
.po-areatabs.is-stuck .po-areatab__count,
.pa-tabs.is-stuck .ds-tab__count {
  max-width: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0;
  padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; overflow: hidden;
}
.po-areatab:hover { border-color: var(--c); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.po-areatab.is-active { background: var(--c); border-color: var(--c); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.po-areatab.is-active .po-areatab__icon,
.po-areatab.is-active .po-areatab__name { color: var(--c-white); }
/* 분야 표 제목 (빨간 플래그 마커 + 분야명 + 단위) */
.po-areahd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.po-areahd__name { position: relative; padding-left: 16px; font-family: var(--ff-title); font-size: 24px; font-weight: 400; color: var(--c-text-default); }
.po-areahd__name::before { content: ""; position: absolute; left: 0; top: .18em; width: 5px; height: .78em; background: var(--c-primary); border-radius: 1px; }
.po-areahd__unit { font-size: 14px; color: var(--c-text-muted, #6A7180); }

/* ============================================================
   pledge-status 추진현황 재설계 (공식 디자인 #17)
   완료도 아이콘 스텝퍼 / 판단기준 카드 / 분야별 반원 게이지 / 절차 카드
   ============================================================ */
/* --- 완료도 아이콘 스텝퍼 --- */
.ps-completion__title { font-size: 26px; font-weight: 700; color: var(--c-text-default); margin-bottom: 22px; }
.ps-completion__title span { font-size: 14px; font-weight: 400; color: var(--c-text-muted, #6A7180); }
.ps-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.ps-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 18px; text-align: center; border-radius: 14px; }
.ps-step::after { display: none !important; }   /* 스텝 사이 화살표 제거 */
.ps-step__name { min-height: 20px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; white-space: nowrap; }
.ps-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; }
.ps-step__icon svg, .ps-step__icon .ico { width: 24px; height: 24px; }
.ps-step__pct { font-size: 22px; font-weight: 800; }
.ps-step__cnt { font-size: 14px; color: #5b606b; }   /* 2026-08-13 Stage4 — 구 #757580 은 틴트 배경 위 4.02~4.12:1(미달) → 5.56~5.71:1 */
/* ── Figma 5종 (node 10405-4735) ── */
/* 1) 완료 — 연인디고 카드 / 다크네이비 원+흰 체크 */
.ps-step:nth-child(1) { background: #f1f3fa; }
.ps-step:nth-child(1) .ps-step__name { color: #36394b; }
.ps-step:nth-child(1) .ps-step__pct  { color: #2a2e43; }
.ps-step:nth-child(1) .ps-step__icon { background: #2a2e43; color: #fff; }
/* 2) 이행 후 계속 추진 — 연보라 카드 / 보라 원+흰 ▶▶ */
.ps-step:nth-child(2) { background: rgba(231,225,244,0.5); }
.ps-step:nth-child(2) .ps-step__name, .ps-step:nth-child(2) .ps-step__pct { color: #5b3fa8; }
.ps-step:nth-child(2) .ps-step__icon { background: #5b3fa8; color: #fff; }
/* 3) 정상추진 — 흰 카드+핑크 테두리 / 핑크 원+흰 ▶ / 수치·개수 핑크 */
.ps-step:nth-child(3) { background: #fff; border: 1px solid var(--c-primary); }
.ps-step:nth-child(3) .ps-step__name, .ps-step:nth-child(3) .ps-step__pct, .ps-step:nth-child(3) .ps-step__cnt { color: var(--c-primary); }
.ps-step:nth-child(3) .ps-step__icon { background: var(--c-primary); color: #fff; }
/* 4) 일부추진 — 연민트 카드 / 흰 원+민트 테두리+민트 ··· */
.ps-step:nth-child(4) { background: rgba(205,237,236,0.5); }
.ps-step:nth-child(4) .ps-step__name, .ps-step:nth-child(4) .ps-step__pct { color: #018582; }
.ps-step:nth-child(4) .ps-step__icon { background: #fff; border: 2.4px solid #018582; color: #018582; }
/* 5) 기타 — 연회색 카드 / 흰 원+회색 테두리+회색 − */
.ps-step:nth-child(5) { background: #f5f5f7; }
.ps-step:nth-child(5) .ps-step__name, .ps-step:nth-child(5) .ps-step__pct { color: #a8a8b2; }
.ps-step:nth-child(5) .ps-step__icon { background: #fff; border: 2.4px solid #a8a8b2; color: #a8a8b2; }
.ps-step--off { background: #f5f5f7; }
.ps-step--off .ps-step__icon { background: var(--c-white); border: 2.4px solid #a8a8b2; color: #a8a8b2; }

/* --- 판단기준 카드 --- */
.ps-guide { margin-top: 44px; }
.ps-guide__title { font-size: 26px; font-weight: 700; color: var(--c-text-default); margin-bottom: 18px; }
.ps-guide__title span { font-size: 14px; font-weight: 400; color: #5b606b; }   /* 2026-08-13 Stage4 — 구 #8a8f9a 3.24:1 → 주석용 회색(.ps-note 와 동일) 6.31:1 */
.ps-guide__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
/* 판단기준 — 흰 박스 + gray250 라인, 아이콘·타이틀 카테고리색 (완료 인디고/계속추진 보라/정상추진 핑크/일부추진 민트) */
.ps-guide__item { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--c-white); border: 1px solid var(--c-gray-250, #e8e8e8); border-radius: 14px; }
.ps-guide__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #f4f5f7; color: var(--c-text-muted, #9aa0ab); }
.ps-guide__icon svg, .ps-guide__icon .ico { width: 22px; height: 22px; }
.ps-guide__body { display: flex; flex-direction: column; gap: 6px; }
.ps-guide__body b { font-size: 18px; font-weight: 700; color: var(--c-text-default); }
.ps-guide__body span { font-size: 15.5px; line-height: 1.6; color: var(--c-text-muted, #5b606b); }
.ps-guide__item:nth-child(1) .ps-guide__icon { color: #2a2e43; background: #f1f3fa; }
.ps-guide__item:nth-child(1) .ps-guide__body b { color: #2a2e43; }
.ps-guide__item:nth-child(2) .ps-guide__icon { color: #5b3fa8; background: rgba(231,225,244,.5); }
.ps-guide__item:nth-child(2) .ps-guide__body b { color: #5b3fa8; }
.ps-guide__item:nth-child(3) .ps-guide__icon { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.ps-guide__item:nth-child(3) .ps-guide__body b { color: var(--c-primary); }
.ps-guide__item:nth-child(4) .ps-guide__icon { color: #018582; background: rgba(205,237,236,.5); }
.ps-guide__item:nth-child(4) .ps-guide__body b { color: #018582; }

/* --- 분야별 반원 게이지 카드 --- */
.ps-area-title { font-size: 26px; font-weight: 700; color: var(--c-text-default); margin: 44px 0 18px; }
.ps-area-title span { font-size: 14px; font-weight: 400; color: #5b606b; }   /* 2026-08-13 Stage4 — 구 #8a8f9a 3.24:1. 「게이지=구성비」 안내문이라 가장 잘 읽혀야 하는 자리다(A3 지적) */
.ps-area__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.ps-areacard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 14px 20px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.ps-areacard__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ps-areacard--city    { --c: var(--po-city); }
.ps-areacard--welfare { --c: var(--po-welfare); }
.ps-areacard--edu     { --c: var(--po-edu); }
.ps-areacard--econ    { --c: var(--po-econ); }
.ps-areacard--comm    { --c: var(--po-comm); }
.ps-areacard__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #f4f5f7; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); }
.ps-areacard__icon svg, .ps-areacard__icon .ico { width: 24px; height: 24px; stroke-width: 1.4px; }
.ps-areacard__label { display: flex; flex-direction: column; gap: 2px; }
.ps-areacard__label b { font-family: var(--ff-title); font-size: 23px; font-weight: 400; color: var(--c-text-default); }
.ps-areacard__label i { font-size: 14px; font-style: normal; color: var(--c-text-muted, #6A7180); }
.ps-gauge { position: relative; width: 100%; max-width: 160px; margin: 8px auto 0; }
.ps-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ps-gauge__track, .ps-gauge__fill { fill: none; stroke-width: 11; stroke-linecap: round; }
.ps-gauge__track { stroke: var(--c-gray-150, #e9eaee); }
/* 분야색(var(--c)) + 스크롤 진입 시 채우기 애니메이션 (기본 비움 → is-inview 시 채움) */
.ps-gauge__fill { stroke: var(--c); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); }
.ps-area__list.is-inview .ps-gauge__fill { stroke-dashoffset: calc(100 - var(--pct)); }
@media (prefers-reduced-motion: reduce) { .ps-gauge__fill { transition: none; stroke-dashoffset: calc(100 - var(--pct)); } }
.ps-gauge__pct { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 24px; font-weight: 800; color: var(--c-text-default); }
.ps-areacard__cnt { font-size: 14px; color: var(--c-text-muted, #5b606b); }
.ps-areacard__cnt b { font-weight: 700; color: var(--c-text-default); }   /* 완료 건수 강조 */

/* --- 공약 추진절차 — 큰 외곽 박스 안에 8칸 1행 --- */
.ps-proc-wrap {
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 0;
  overflow: hidden;
}
.ps-proc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ps-proc__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 26px 20px;
}
/* 스텝 구분선 — 열 사이 세로선 + 1행/2행 사이 가로선 */
.ps-proc__item:nth-child(-n+4) { border-bottom: 1px solid var(--c-line); }
.ps-proc__item:not(:nth-child(4n)) {
  border-right: 1px solid var(--c-line);
}
/* 구분선 세로 가운데에 화살표 원형 노드 (행 끝 제외) */
.ps-proc__item:not(:nth-child(4n)):not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-white) url(../images/icons/ic-stepper-arrow.svg) no-repeat center / 13px 13px;
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  z-index: 2;
}
.ps-proc__num {
  font-family: var(--ff-serif);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: var(--c-primary);
  line-height: 1;
  text-decoration: underline;
  text-underline-position: from-font;
  margin-bottom: 3px;
}
.ps-proc__title {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin: 0;
  word-break: keep-all;
}
.ps-proc__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 7px;
  padding: 4px 12px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-indigo-600, #323649);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.ps-proc__dept {
  padding-top: 4px;
  font-size: 16px;
  color: #6A7180;
  line-height: 1.4;
  word-break: keep-all;
}

/* --- 공약 변경절차 — 4개 개별 박스 1행 --- */
.ps-chg {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ps-chg__item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
  padding: 21px 19px 23px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.ps-chg__body { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.ps-chg__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ps-chg__connector {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--c-text-muted, #6A7180);
  user-select: none;
}
/* 변경절차 아이콘 — 다색 SVG(원형 배경 내장) img 로 직접 노출 */
.ps-chg__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
}
.ps-chg__num {
  font-family: var(--ff-serif);
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: var(--c-primary);
  line-height: 1;
  text-decoration: underline;
  text-underline-position: from-font;
  flex-shrink: 0;
}
.ps-chg__title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin: 0;
  word-break: keep-all;
}
.ps-chg__dept {
  margin-top: 0;
  padding-top: 3px;
  font-size: 16px;
  /* 2026-08-13 Stage4 — 명도대비. 구 #8a8f9a 는 흰 배경 3.24:1(7건 미달).
     주석용 회색 #5b606b(6.31:1)로 통일. */
  color: #5b606b;
}

/* --- 공약조정 총괄현황 — 섹션 헤더 + 다운로드 버튼 --- */
.ps-sum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ps-sum-header .data-section__title { margin-bottom: 0; }

/* --- 공약조정 총괄현황 — 차수별 세로 카드(지표 label↔수치 행) --- */
/* 카드 높이 통일: grid stretch + 카드 flex-column + rows flex:1, 계는 margin-top:auto 로 바닥 고정 */
.ps-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; align-items: stretch; }
.ps-sum-card { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; background: var(--c-white); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
/* 카드 헤더 — 차수 + 설명 (가장 밝은 인디고 배경·타이틀 핑크·설명 진한 인디고) */
.ps-sum-card__hd { padding: 18px 20px; background: var(--c-indigo-50, #F7F8FD); border-bottom: 1px solid var(--c-line); }
.ps-sum-card__phase { display: block; font-size: 20px; font-weight: 700; color: var(--c-primary); letter-spacing: -0.2px; }
.ps-sum-card__desc { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--c-indigo-700, #2a2e43); word-break: keep-all; }
/* 지표 행 목록 */
.ps-sum-rows { margin: 0; padding: 0 20px 14px; flex: 1; display: flex; flex-direction: column; }
.ps-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--c-gray-100); }
.ps-sum-row:last-child { border-bottom: 0; }
.ps-sum-row dt { font-size: 15px; color: var(--c-text-body); word-break: keep-all; }
.ps-sum-row dd { margin: 0; flex-shrink: 0; text-align: right; }
.ps-sum-num { font-size: 22px; font-weight: 700; color: var(--c-indigo-700, #2a2e43); line-height: 1; letter-spacing: -0.4px; }   /* 일반 지표 수치 = 인디고 */
.ps-sum-unit { margin-left: 2px; font-size: 13px; color: #6A7180; }
.ps-sum-rownote { display: inline; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--c-primary); line-height: 1.35; word-break: keep-all; }
/* 계(총계) 행 — 최하단(margin-top:auto), 영수증 합계선(위 2px 인디고선), 상하 여백 균형, 수치는 핑크로 대비 */
.ps-sum-row--total { margin-top: auto; padding: 14px 0 0; border-top: 2px solid var(--c-indigo-700, #2a2e43); border-bottom: 0; }
.ps-sum-row--total dt { color: var(--c-indigo-700, #2a2e43); font-weight: 700; font-size: 16px; }
.ps-sum-row--total .ps-sum-num { color: var(--c-primary); font-size: 24px; }
.ps-sum-row--total .ps-sum-unit { color: #6A7180; }
/* 계 바로 위 행의 회색 구분선 제거 → 2px 합계선만 보이게 */
.ps-sum-row:has(+ .ps-sum-row--total) { border-bottom: 0; }
@media (max-width: 900px) { .ps-sum-grid { grid-template-columns: 1fr; } }

/* --- 조정현황 표 리드 --- */
.ps-sum-lead {
  margin: 26px 0 10px;
  font-size: 16px;
  color: var(--c-text-default);
}
.ps-sum-lead strong { font-weight: 700; color: var(--c-indigo-700); }

/* --- 표 아래 주석 --- */
.ps-sum-note {
  margin-top: 8px;
  font-size: 15px;
  color: var(--c-text-muted, #6A7180);
}

/* --- 통합/변경 셀 ※ 빨강 강조 --- */
.ps-cell-note { color: var(--c-primary); font-size: 13px; display: block; margin-top: 2px; }

/* --- pledge-status 재설계 반응형 --- */
@media (max-width: 1024px) {
  .ps-guide__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1280px) {
  .ps-chg { flex-wrap: wrap; gap: 12px; }
  .ps-chg__item { flex: calc(50% - 22px); min-width: calc(50% - 22px); }
  .ps-chg__connector:nth-child(4) { display: none; }
}
@media (max-width: 768px) {
  .ps-steps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ps-step:not(:last-child)::after { display: none; }
  .ps-area__list { grid-template-columns: repeat(2, 1fr); }
  .ps-chg { flex-direction: column; gap: 8px; }
  .ps-chg__item { flex: 1 1 100%; min-width: 0; width: 100%; }
  .ps-chg__connector { display: none; }
  .ps-proc-wrap { padding: 0; }
}
@media (max-width: 480px) {
  .ps-steps, .ps-guide__list, .ps-area__list { grid-template-columns: 1fr; }
}
/* 공약 추진절차 4×2 그리드 반응형 */
@media (max-width: 1280px) {
  .ps-proc { grid-template-columns: repeat(2, 1fr); }
  .ps-proc__item { border-right: none; border-bottom: 1px solid var(--c-line); }
  .ps-proc__item:nth-child(odd) { border-right: 1px solid var(--c-line); }
  .ps-proc__item:nth-child(n+7) { border-bottom: none; }
  .ps-proc__item:not(:nth-child(4n)):not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .ps-proc { grid-template-columns: 1fr; }
  .ps-proc__item { border-right: none; border-bottom: 1px solid var(--c-line); }
  .ps-proc__item:last-child { border-bottom: none; }
}
/* 셀 정렬 — 짧은 텍스트 가운데 기본, 사업명/공약명 좌측, 예산액 우측 */
.data-table--byarea tbody td,
.data-table--byproject tbody td { text-align: center; }
.data-table--byarea .po-cell-l,
.data-table--byproject .po-cell-l { text-align: left; min-width: 280px; }
.data-table--byarea .po-cell-r { text-align: right; }
/* 9열 분야별 표는 가로 넓어 스크롤 유도 */
.data-table--byarea { min-width: 1080px; }
.data-table--byproject { min-width: 720px; }
/* 이행계획 자세히보기 — 다운로드/미리보기 (공식 실존 열) */
.po-cell-doc { white-space: nowrap; }
.po-cell-doc { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.po-doclink {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; padding: 0 13px;
  font-size: 13px; font-weight: 600; line-height: 1;
  border-radius: 8px; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.po-doclink::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url(../images/icons/ui/ic-doclink.svg) center/contain no-repeat; mask: url(../images/icons/ui/ic-doclink.svg) center/contain no-repeat; }
.po-doclink--view::before { -webkit-mask-image: url(../images/icons/ui/ic-doclink-view.svg); mask-image: url(../images/icons/ui/ic-doclink-view.svg); }
/* 다운로드 = 채움(인디고) */
.po-doclink:not(.po-doclink--view) { background: var(--c-indigo-500); color: #fff; border: 1px solid var(--c-indigo-500); }
.po-doclink:not(.po-doclink--view):hover { background: var(--c-indigo-700, #2a2e43); border-color: var(--c-indigo-700, #2a2e43); }
/* 미리보기 = 아웃라인 */
.po-doclink--view { background: #fff; color: var(--c-text-sub); border: 1px solid var(--c-gray-250); }
.po-doclink--view:hover { border-color: #b7b7b7; color: var(--c-text-default); }
@media (max-width: 768px) {
  .po-subtabs { margin: 0 auto 20px; }
}

/* ============================================================
   pledge-annual — 분야명 라벨 학교알림체(--ff-title) 강조 (요청: 현재 너무 작음)
   ============================================================ */
.pa-area-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pa-area-title__name {
  font-family: var(--ff-title);
  font-size: var(--fs-40);
  font-weight: 400;          /* Hakgyoansim 은 단일 weight */
  line-height: 1.2;
  color: var(--c-text-default);
  letter-spacing: -0.5px;
}
.pledge-annual-page .pa-tabs { margin: 0 0 28px; }   /* 분야 탭 — PC 왼쪽정렬(공용 ds-tabs 사상) */
.pledge-annual-page .icon-swipe-show {
  margin: 0 0 10px; font-size: 14px; color: var(--c-text-mute); text-align: right; display: none;   /* PC 숨김 */
}
/* 모바일은 카드형이라 가로 이동 안내 불필요 → 계속 숨김 */

/* ============================================================
   pledge-overview — 상단 link-tab(공식 미러), 히어로 제목·분야 카드 텍스트 키우기
   ============================================================ */
/* 상단 탭: 공식 link-tab 미러링 — 알약 네비(가운데) */
.po-linktab {
  display: flex; flex-wrap: wrap; gap: 8px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 36px; padding: 4px;
  background: var(--c-gray-150); border-radius: 9999px;
}
.po-linktab__item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 12px 32px;
  font-family: var(--ff-body); font-size: 18px; font-weight: 500;
  color: #464c53; letter-spacing: -0.6px; text-decoration: none;
  border-radius: 9999px; white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.po-linktab__item:hover { color: var(--c-text-default); }
.po-linktab__item.is-active {
  color: var(--c-white); font-weight: 600;
  background: var(--c-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* 히어로 제목 "5대 분야 81개 공약" — 학교알림체·가운데·크게 */
.po-block__title--hero {
  text-align: center;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: var(--fs-40);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}
.po-block__title--hero strong { font-family: var(--ff-title); font-weight: 400; color: var(--c-primary); }

/* 5대 분야 카드 — 분야명 학교알림체 크게 + 카드 텍스트 전반 키우기 */
.po-areacard__sub { font-size: 16px; letter-spacing: -1px; white-space: nowrap; }
.po-areacard__name {
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -1px;
  white-space: nowrap;
}
.po-areacard__num { font-size: 40px; font-weight: 700; }
.po-areacard__num em { font-size: 19px; font-weight: 700; }   /* 2026-08-13 Stage4 — 위 6234 와 동일 사유(대형 텍스트 기준 확보) */

/* 추진시기별 그래프 — 더 보기좋고 액티브하게(트랙 두께·값 강조·은은한 채움 그림자) */
.po-barlist { gap: 22px; }
.po-barrow { grid-template-columns: 64px 1fr auto; gap: 16px; }
.po-barrow__label { font-size: 17px; }
.po-barrow__track { height: 20px; background: var(--c-gray-150); box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.po-barrow__fill { box-shadow: 0 1px 4px rgba(0,0,0,0.12); position: relative; }
.po-barrow__val { font-size: 22px; }
.po-barrow__val em { font-size: 15px; }
.po-splitbar { height: 30px; }
.po-splitbar__a, .po-splitbar__b { font-size: 13px; }
.po-splitrow__cap { font-size: 15px; }

/* 기타현황별·부서별 — 텍스트 키우기 */
.po-deptcard__name { font-size: 18px; word-break: keep-all; }
.po-deptcard__num { font-size: 36px; }
.po-deptcard__num::after { font-size: 16px; }

@media (max-width: 1280px) {
  .pa-area-title__name { font-size: var(--fs-28); }
  .po-block__title--hero { font-size: var(--fs-36); }
  .po-areacard__name { font-size: var(--fs-21); }
}
@media (max-width: 768px) {
  .po-linktab { margin: 0 auto 24px; }
  .po-linktab__item { height: 44px; padding: 10px 18px; font-size: 15px; }
  .pa-area-title__name { font-size: var(--fs-24); }
  .po-block__title--hero { font-size: var(--fs-28); margin-bottom: 24px; }
  .po-areacard__name { font-size: var(--fs-20); }
  .po-areacard__num { font-size: 30px; }
  .po-barrow__val { font-size: 19px; }
  .po-deptcard__name { font-size: 14px; }
  .po-deptcard__num { font-size: 26px; }
  .po-deptcard__num::after { font-size: 13px; }
}
/* awards — 스크롤 안내 + 단위 표기 한 줄 */
/* 접근성 보존용 숨김 유틸 (시각적으로만 제거) */
.blind { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* 특이도: .board-content .data-note(0,2,0) 를 이기도록 .data-note 함께 */
.board-content .data-note.awards-scroll-hint { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 24px; }   /* PC: 단위 우측 + 테이블과 적당한 갭 */
.awards-scroll-hint .awards-unit { color: var(--c-text-sub); }
@media (max-width: 768px) { .awards-scroll-hint { justify-content: space-between; } }   /* 모바일: 단위 좌 + 안내 우 */

/* ds-tabs 반응형 */
@media (max-width: 1280px) {
  .ds-tab { padding: 12px 26px; font-size: 17px; }
}
@media (max-width: 768px) {
  .ds-tabs { margin: 0 auto 40px; }
  .ds-tab { height: 44px; padding: 10px 20px; font-size: 15px; }
}
@media (max-width: 480px) {
  .ds-tab { padding: 9px 15px; font-size: 14px; }
}

/* ============================================================
   공약사업 추진현황 (pages/promise/pledge-status.html · 공식 cmsid=15570 1:1)
   ── 도넛(이행률 86.4%) + 공약이행 완료도 막대 + 판단기준 + 분야별 추진현황.
   공식 link-tab(추진현황/사업별 이행현황/추진및변경/평가)은 별도 cmsid 페이지 →
   .ps-tabs 로 시각 재현(현재=추진현황 활성, 나머지 3개는 형제 페이지 없음 → is-disabled).
   분야 색은 민선8기 비전 고유색(DS 토큰 아님)이라 본 스코프 내 인라인 hex 유지.
   ============================================================ */

/* --- 공식 link-tab : 형제 페이지 탭 (가로 4분할) --- */
.pledge-status-page .ps-tabs {
  display: flex;
  margin: 0 0 40px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
}
.pledge-status-page .ps-tab {
  flex: 1 1 0;
  text-align: center;
  padding: 18px 12px;
  font-family: var(--ff-body);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text-body);
  text-decoration: none;
  border-left: 1px solid var(--c-line);
  transition: background-color .2s, color .2s;
  word-break: keep-all;
}
.pledge-status-page .ps-tab:first-child { border-left: 0; }
.pledge-status-page .ps-tab:hover:not(.is-active):not(.is-disabled) { background: var(--c-indigo-100); }
.pledge-status-page .ps-tab.is-active { background: var(--c-bg-dark); color: var(--c-white); }
.pledge-status-page .ps-tab.is-disabled { color: var(--c-text-mute); cursor: not-allowed; }

/* === 상단 : 도넛 + 완료도 막대 === */
/* 이행률 다크 카드 + 완료도 흰 카드 (Figma 10400:4731) */
.pledge-status-page .ps-status { display: flex; align-items: stretch; gap: 24px; background: transparent; border-radius: 0; padding: 0; }
.pledge-status-page .ps-pie {
  flex: 0 0 500px; max-width: 500px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(to right, #363342, #1c1a26);
  border-radius: 20px; padding: 34px 28px 34px 36px;
}
.pledge-status-page .ps-pie__text { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; color: #fff; min-height: 176px; }
.pledge-status-page .ps-pie__head { display: flex; flex-direction: column; gap: 4px; }
.pledge-status-page .ps-pie__head em { font-style: normal; font-size: 26px; font-weight: 700; color: #fff; }
.pledge-status-page .ps-pie__head span { font-size: 14px; color: #b8b8c7; }
.pledge-status-page .ps-pie__big { display: flex; flex-direction: column; gap: 8px; }
.pledge-status-page .ps-pie__num { display: flex; align-items: flex-end; gap: 2px; color: #fff; }
.pledge-status-page .ps-pie__num strong { font-size: 62px; font-weight: 800; line-height: 1; }
.pledge-status-page .ps-pie__num i { font-style: normal; font-size: 28px; font-weight: 700; }
.pledge-status-page .ps-pie__sub { font-size: 16px; color: #b8b8c7; }
.pledge-status-page .ps-chart { position: relative; flex: 0 0 auto; width: 210px; height: 210px; }   /* 확대 */
.pledge-status-page .ps-chart__svg { width: 100%; height: 100%; display: block; }   /* SVG 도넛 — 끝 둥글게(round cap)+그라데이션 (Image #17) */
/* 스크롤 진입 시 도넛 드로우 애니메이션 (기본 0 → is-inview 시 86.4%) */
.pledge-status-page .ps-chart__fill { stroke-dasharray: 0 452.4; transition: stroke-dasharray 1.3s cubic-bezier(.22,.61,.36,1); }
.pledge-status-page .ps-pie.is-inview .ps-chart__fill { stroke-dasharray: 29.4 423.0; }
@media (prefers-reduced-motion: reduce) { .pledge-status-page .ps-chart__fill { transition: none; stroke-dasharray: 29.4 423.0; } }
.pledge-status-page .ps-completion {
  flex: 1 1 auto; min-width: 0;
  background: #fff; border: 1px solid var(--c-gray-250); border-radius: 20px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ── 태블릿 (≤1024) ── */
@media (max-width: 1024px) {
  .pledge-status-page .ps-status { flex-direction: column; align-items: stretch; gap: 28px; padding: 32px 0; }   /* 가로 패딩 제거 — 이행률/완료도 카드를 셀렉트·판단기준과 동일 풀폭으로 정렬 */
  .pledge-status-page .ps-pie { flex: 1 1 auto; max-width: none; }
  .pledge-status-page .ps-completion { flex-basis: auto; }
}
/* 모바일 — 이행률 박스: 도넛이 옆에서 잘리므로 세로 배치(텍스트 위, 도넛 아래 가운데) */
@media (max-width: 600px) {
  .pledge-status-page .ps-status { padding: 0; }
  .pledge-status-page .ps-pie { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .pledge-status-page .ps-pie__text { align-self: stretch; min-height: 0; }
  .pledge-status-page .ps-pie__num { justify-content: center; }
  .pledge-status-page .ps-pie__num strong { font-size: 40px; }
  .pledge-status-page .ps-pie__num i { font-size: 20px; }
  .pledge-status-page .ps-pie__head em { font-size: 20px; }
  .pledge-status-page .ps-pie__sub { font-size: 14px; }
  .pledge-status-page .ps-chart { margin: 0 auto; }
}

/* ── 모바일 (≤768) ── */
@media (max-width: 768px) {
  .pledge-status-page .ps-tabs { flex-wrap: wrap; }
  .pledge-status-page .ps-tab { flex: 1 1 50%; border-top: 1px solid var(--c-line); padding: 14px 10px; font-size: var(--fs-16); }
  .pledge-status-page .ps-tab:nth-child(-n+2) { border-top: 0; }
  .pledge-status-page .ps-tab:nth-child(odd) { border-left: 0; }

  .pledge-status-page .ps-completion__title,
  .pledge-status-page .ps-guide__title { font-size: var(--fs-20); }
  .pledge-status-page .ps-completion__title span,
  .pledge-status-page .ps-guide__title span { display: block; margin: 4px 0 0; }
  .pledge-status-page .ps-area-title span { display: block; margin: 4px 0 0; }

  .pledge-status-page .ps-chart { width: 160px; height: 160px; }
  .pledge-status-page .ps-chart__center { width: 160px; height: 160px; }
  .pledge-status-page .ps-chart__percent { font-size: var(--fs-40); }
  .pledge-status-page .ps-chart__center em { font-size: var(--fs-18); }



  .pledge-status-page .ps-area__list { padding: 24px 16px; }
  .pledge-status-page .ps-area__icon { width: 48px; height: 48px; }
  .pledge-status-page .ps-area__icon svg { width: 30px; height: 30px; }
  .pledge-status-page .ps-area__label b { font-size: var(--fs-24); }
  .pledge-status-page .ps-area__count { font-size: var(--fs-14); left: 12px; }
  .pledge-status-page .ps-area__pct { font-size: var(--fs-20); right: 12px; }
}

/* ── 작은 폰 (≤400) : 완료도 라벨 풀폭 + 막대/수치 둘째줄 ── */
@media (max-width: 400px) {
  .pledge-status-page .ps-bar > em { flex: 1 1 100%; min-width: 0; }
  .pledge-status-page .ps-bar__track { min-width: 90px; }
  .pledge-status-page .ps-bar__txt { font-size: var(--fs-13); }
}

/* 수상현황 — 좌우스크롤 안내+총건수는 모바일에서만 (PC는 단위만) */
/* [FIX-AWARDSHINT-20260815] 총건수는 계속 숨김(제거 요청 유지), 좌우 안내는 표가 실제로 잘리는 ≤768px 에서만 노출 */
.awards-mobtip, .awards-count { display: none; }
@media (max-width: 768px) { .awards-mobtip { display: inline; } }
/* 2026-08-13 Stage4 — 모바일 카드 변환을 걷어내고 형제 페이지(pledge-list)와 같은
   「가로스크롤 표」로 통일한다. 리드 판정.

   왜 되돌리나: 281행을 카드로 펼치면 문서높이가 360px 뷰포트에서 97,711px(약 108화면)까지
   늘어나는데, 이 페이지에는 페이지네이션·검색·필터가 없고 heading 도 1개뿐이라
   그 281장을 건너뛸 수단이 아예 없다(A2 시각 · A3 접근성 양쪽 동일 결론).
   가로스크롤 표는 `.board-content .data-table-wrap { overflow-x:auto }`(5693) 가 이미 주고,
   awards.html 의 래퍼에 tabindex="0" + role="region" + aria-labelledby 를 달아
   pledge-list 와 동일하게 키보드로 조작된다(→키로 scrollLeft 이동).
   부수 효과: `data-label="연변"` 이 카드마다 노출되던 것이 표 머리글 1곳으로 돌아간다
   (원문 오타 자체는 발주처 콘텐츠라 그대로 둔다). */

/* [공통 규칙] 긴 테이블 → 모바일 카드형 (.rwd-cards) — byarea/byproject/detail/eval */
@media (max-width: 768px) {
  .board-content .data-table.rwd-cards { display: block; width: 100%; min-width: 0; border: 0; }
  .board-content .data-table.rwd-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .board-content .data-table.rwd-cards tbody,
  .board-content .data-table.rwd-cards tr { display: block; width: 100%; }
  .board-content .data-table.rwd-cards tr { border: 1px solid var(--c-line); border-radius: 12px; margin-bottom: 14px; padding: 6px 16px; background: var(--c-white); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .board-content .data-table.rwd-cards td,
  .board-content .data-table.rwd-cards tbody th { display: flex; width: 100%; min-width: 0; justify-content: flex-start; align-items: baseline; gap: 12px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--c-gray-100, #eef0f3); text-align: left; white-space: normal; word-break: keep-all; background: transparent; }
  .board-content .data-table.rwd-cards tr > *:last-child { border-bottom: 0; }
  .board-content .data-table.rwd-cards td::before,
  .board-content .data-table.rwd-cards tbody th::before { content: attr(data-label); flex: 0 0 96px; text-align: left; font-weight: 700; color: var(--c-text-sub); }
  /* 다운로드/미리보기 셀 — 라벨 숨기고 두 버튼 50% 나란히 */
  .board-content .data-table.rwd-cards td.po-cell-doc::before { display: none; }
  .board-content .data-table.rwd-cards td.po-cell-doc { gap: 8px; padding-top: 12px; }
  .board-content .data-table.rwd-cards td.po-cell-doc .po-doclink { flex: 1 1 50%; justify-content: center; }
  /* annual: rowspan 으로 빠지는 셀(추진목표) 좌측 라인은 카드에선 제거 */
  .board-content .data-table.rwd-cards tbody td.po-goal { border-left: 0; }
  /* 2026-08-17 수정 — 카드모드에서 td 가 flex 라 블록 span(.ps-detail__note)이 값 오른쪽에
     나란히 붙어 카드 밖으로 나갔다(최대 108.89px @320 · 넘침 대역 320~428). 자기 줄로 내린다.
     :has() 대신 마크업 클래스(pledge-status.html 의 td.pl-hasnote 5개)로 건다 — 구형 브라우저
     지원 하한을 건드리지 않으려는 결정. 영향 셀은 308셀 중 5셀뿐이다. */
  .board-content .data-table.rwd-cards td.pl-hasnote { flex-wrap: wrap; }
  .board-content .data-table.rwd-cards td.pl-hasnote > .ps-detail__note { flex: 1 0 100%; margin-top: 4px; }
}
/* rowspan 보충 셀 — 데스크탑은 숨김(표 레이아웃 영향 없음), 모바일 카드에서만 노출 */
.rwd-fill { display: none; }

.data-table--detail { min-width: 980px; }
.data-table--detail tbody td { text-align: center; }
.data-table--detail .po-cell-l { text-align: left; min-width: 280px; }

/* 평가 — 제도기반 카드 + 평가단 운영 회차 카드 */
/* 제도적 기반 마련 박스 — suggestion-list 상단 .notice-box 박스 디자인과 동일(흰 배경·인디고 보더·radius 4·인디고 톤 그림자) */
.ps-reg { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 32px; background: #fff; border: 1px solid var(--c-indigo-500); border-radius: 4px; box-shadow: 0 8px 12px 0 rgba(58, 61, 78, 0.12); }
.ps-reg__name { font-size: 21px; font-weight: 700; color: var(--c-text-default); }
.ps-reg__btn { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 24px; border-radius: 999px; background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.ps-reg__btn:hover { background: var(--c-primary); color: #fff; }
.ps-reg__btn .ico { width: 15px; height: 15px; }
.data-table--eval tbody td.po-cell-l { text-align: left; }
.data-table--kv tbody th[scope="row"] { background: var(--c-gray-150); text-align: left; min-width: 140px; white-space: nowrap; }
.ps-meetings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
.ps-meeting { padding: 22px 24px; background: var(--c-white); border: 1px solid var(--c-gray-250); border-radius: 14px; }
.ps-meeting__title { font-size: 17px; font-weight: 700; color: var(--c-text-default); margin: 0 0 8px; }
.ps-meeting__when { font-size: 14px; color: var(--c-text-sub); margin: 0 0 12px; }
.ps-meeting__acts { margin: 0 0 12px; padding-left: 18px; }
.ps-meeting__acts li { font-size: 15px; line-height: 1.6; color: var(--c-text-body); list-style: decimal; margin-bottom: 4px; }
.ps-meeting__result { margin: 0; font-size: 14px; color: var(--c-text-default); }
.ps-meeting__result b { color: var(--c-primary); }
@media (max-width: 768px) { .ps-meetings { grid-template-columns: 1fr; } .ps-reg { flex-direction: column; align-items: flex-start; } }

/* 동별 QnA — 모임 라인형 라벨 + 모임별 색(메타·Q동그라미). 한 동 안에서 모임마다 구분색 */
.qna-card__meta { display: inline-flex; align-items: center; padding: 3px 13px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; }
/* Q 본문 — 라벨과 붙이고 굵게 + 라벨과 제목 한 줄(인라인) */
.qna-card__q .qna-card__text { font-weight: 700; }
.qna-card__q .qna-card__content { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 3px; }
.qna-card__q .qna-card__meta { margin-bottom: 0; }
/* 등장 순서: 핑크 → 민트 → 퍼플 → 블루 → 인디고 → 그린 */
.qna-card--c1 .qna-card__meta { color: var(--c-primary); }
.qna-card--c1 .qna-card__label--q { background: var(--c-primary); }
.qna-card--c2 .qna-card__meta { color: #018582; }
.qna-card--c2 .qna-card__label--q { background: #018582; }
.qna-card--c3 .qna-card__meta { color: #4900AE; }
.qna-card--c3 .qna-card__label--q { background: #4900AE; }
.qna-card--c4 .qna-card__meta { color: #1342A6; }
.qna-card--c4 .qna-card__label--q { background: #1342A6; }
.qna-card--c5 .qna-card__meta { color: #2A2E43; }
.qna-card--c5 .qna-card__label--q { background: #2A2E43; }
.qna-card--c6 .qna-card__meta { color: #0F8A4C; }
.qna-card--c6 .qna-card__label--q { background: #0F8A4C; }
/* 동 현장 사진 — 연한 회색 라인 */
.dong-photos__item img { border: 1px solid #E8E8E8; }

/* 주민참여 — 활동 카드 그리드 (공식 카드형, 사진+제목+필드) */
.pa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }   /* 3열 고정 + 카드 간격 넓힘 */
.pa-card { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-gray-250); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.pa-card__thumb { width: 100%; aspect-ratio: 16 / 10; background: var(--c-gray-150); display: flex; align-items: center; justify-content: center; }
.pa-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-card__thumb--ph { color: #b8bcc6; }
.pa-card__thumb--ph svg, .pa-card__thumb--ph .ico { width: 40px; height: 40px; }
.pa-card__body { padding: 22px 24px 24px; }
.pa-card__title { font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--c-text-default); margin: 0 0 15px; word-break: keep-all; }
.pa-card__fields { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-card__field { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; }
.pa-card__field dt { font-size: 15px; font-weight: 700; color: var(--c-indigo-600, #323649); white-space: nowrap; }   /* 시기·대상·장소 등 라벨 인디고600 */
.pa-card__field dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--c-text-body); word-break: keep-all; }
/* 주민참여 섹션 타이틀 전체 — 학교알림체 + 가운데 + 크게 (다른 페이지 톤 통일) */
/* participation 섹션 타이틀 — 공통 .data-section__title(Pretendard·왼쪽·26px/700) 그대로 사용. 장식폰트·가운데정렬 오버라이드 제거(타 페이지와 통일) */
@media (max-width: 1024px) { .pa-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pa-cards { grid-template-columns: 1fr; } }

/* === GLOBAL-TABLE-ALIGN: 전 페이지 표 정렬 — 짧은 텍스트=가운데, 긴 텍스트(공약명/사업명/대상사업 등)=왼쪽 === */
.board-content .data-table tbody td,
.board-content .data-table tbody th[scope="row"],
.board-content .data-table thead th { text-align: center; }
.board-content .data-table .po-cell-l,
.board-content .data-table tbody td.po-cell-l,
.board-content .data-table tbody td.po-goal { text-align: left; }

/* 공약변경 조정현황 표 — 긴 텍스트 칼럼 왼쪽정렬(짧은 칼럼 관리번호·구분은 가운데 유지).
   2차 표는 rowspan 병합 때문에 nth-of-type 불가 → 셀에 po-cell-l 직접 부여 */
.board-content .data-table--chg-2col tbody td { text-align: left; }   /* 조정 전/후 2칼럼 모두 긴 텍스트 */
.board-content .data-table--chg-mod tbody td { text-align: left; }    /* 구분(th) 제외 3칼럼 긴 텍스트 */
.board-content .data-table--chg-6col tbody td { text-align: left; }
.board-content .data-table--chg-6col tbody td:nth-of-type(2) { text-align: center; }   /* 구분 칼럼만 가운데 */

/* 표 캡션 — 타이틀에 같은 내용이 들어가 중복되는 회색 텍스트 숨김(스크린리더용으로만 유지). pledge-overview 와 동일 패턴 */
.pledge-status .data-table__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.po-areahd:empty { display: none; }
.po-areahd { justify-content: flex-end; }

/* 연차별 추진계획 — 분야 선택을 아이콘 카드로 (컨트롤러는 .ds-tab 그대로) */
.pa-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; max-width: none; background: transparent; padding: 0 0 14px; border-radius: 0; margin: 0 0 66px; overflow: visible; position: sticky; top: 0; z-index: 20; }   /* ds-tabs 가로스크롤 상속 차단(첫 카드 잘림 방지) + 상단 sticky 고정 */
/* po-areatabs sticky와 동일 — 흰 그라데이션(위 100 → 아래 0) + 점진 블러(PC), 그림자 없음 */
.pa-tabs::before { content: ""; position: absolute; z-index: -2; pointer-events: none; top: -26px; bottom: -22px; left: 50%; transform: translateX(-50%); width: 100vw; background: linear-gradient(to bottom, #fff 0%, #fff 56%, rgba(255,255,255,0) 100%); }
@media (min-width: 1025px) {
  .pa-tabs::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -26px; bottom: -22px; left: 50%; transform: translateX(-50%); width: 100vw; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%); }
}
.pa-tabs .ds-tabs__indicator { display: none; }
.pa-tabs .ds-tab {
  --c: var(--po-city);
  height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 26px 12px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 14px;
  color: var(--c-text-default); font-weight: 400; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pa-tabs .pa-tab--city    { --c: var(--po-city); }
.pa-tabs .pa-tab--welfare { --c: var(--po-welfare); }
.pa-tabs .pa-tab--edu     { --c: var(--po-edu); }
.pa-tabs .pa-tab--econ    { --c: var(--po-econ); }
.pa-tabs .pa-tab--comm    { --c: var(--po-comm); }
.pa-tabs .ds-tab__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #f4f5f7; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); transition: color .2s ease, background-color .2s ease; }
.pa-tabs .ds-tab__icon svg, .pa-tabs .ds-tab__icon .ico { width: 26px; height: 26px; stroke-width: 1.4px; }
.pa-tabs .ds-tab__name { font-family: var(--ff-title); font-size: 24px; font-weight: 400; line-height: 1.1; }
.pa-tabs .ds-tab__count { display: inline-flex; align-items: center; margin-top: -6px; padding: 2px 11px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--c); overflow: hidden; max-width: 90px; max-height: 36px; transition: color .2s ease, border-color .2s ease, max-width .28s ease, max-height .28s ease, opacity .28s ease, margin .28s ease, padding .28s ease, border-width .28s ease; }
.pa-tabs .ds-tab.is-active .ds-tab__count { color: #fff; border-color: rgba(255,255,255,.55); }
.pa-tabs .ds-tab:hover { border-color: var(--c); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.pa-tabs .ds-tab.is-active { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.pa-tabs .ds-tab.is-active .ds-tab__icon { color: #fff; background: rgba(255,255,255,.18); }
/* 표 가로스크롤(잘림 방지) */
.pledge-annual .data-table-wrap { overflow-x: auto; }
/* [공통 규칙] 분야 탭 — 모바일 좌우 스크롤 컴팩트 탭 */
@media (max-width: 768px) {
  .pa-tabs { display: flex; grid-template-columns: none; overflow-x: auto; gap: 8px; margin: 0 0 40px; position: sticky; top: 0; background: var(--c-white); -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
  .pa-tabs .ds-tab { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 12px 16px; }
  .pa-tabs .ds-tab__icon { width: 30px; height: 30px; }
  .pa-tabs .ds-tab__icon svg, .pa-tabs .ds-tab__icon .ico { width: 18px; height: 18px; }
  .pa-tabs .ds-tab__name { font-size: 15px; }
  .pa-tabs .ds-tab__count { font-size: 11px; padding: 1px 8px; margin-top: 0; }   /* 데스크탑용 음수 margin 리셋 → 모바일 row 세로중앙 */
}

/* pledge-board__side STICKY — 공약지도 헤더 고정 + 동 네비 리스트만 스크롤, 우측 별도 스크롤 (PC/태블릿) */
@media (min-width: 769px) {
  .pledge-board__inner { align-items: start; }
  .pledge-board__side {
    align-self: start; position: sticky; top: 0;
    max-height: 100vh; overflow: hidden;            /* 사이드바 자체는 스크롤 안 함 */
    display: flex; flex-direction: column;
  }
  .pledge-board__side .pledge-side__head { flex: 0 0 auto; }   /* 공약지도 헤더 고정 */
  .pledge-board__side .dong-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;            /* 동 리스트만 스크롤 */
    margin-right: -12px; padding-right: 12px;                  /* 스크롤바 영역 확보 */
    padding-bottom: 32px;                                      /* 마지막 동(황학동)이 바닥에 붙지 않게 */
  }
  /* 어두운 사이드바용 얇은 스크롤바 */
  .pledge-board__side .dong-nav::-webkit-scrollbar { width: 6px; }
  .pledge-board__side .dong-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
}

/* ============================================================
   [공통 규칙] 태블릿(≤1280) — 넓은 표는 가로스크롤 대신 컨테이너 폭에 맞춰 축소(fit)
   사유: 1024 등에서 표(annual 1100·byarea 1080·detail 980px)가 래퍼보다 넓어
         오른쪽 컬럼이 "잘려 보이는" 문제. min-width 해제 + width:100% + 폰트 축소로 fit.
         (≤768 은 기존 카드 변환/모바일 규칙이 우선)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1280px) {
  /* 모든 데이터 표 — 태블릿 폭에 맞춰 fit (우측 컬럼 가로 잘림 방지).
     ≤768 은 기존 카드 변환/가로스크롤 규칙 유지(좁은 화면에서 과밀 방지)라 769 부터만. */
  .board-content .data-table { min-width: 0; width: 100%; table-layout: auto; font-size: 13px; }
  /* colgroup 인라인 width(예: 108px) 가 width:100% 를 막으므로 태블릿에선 해제 */
  .board-content .data-table col { width: auto !important; }
  .board-content .data-table th,
  .board-content .data-table td { padding: 10px 6px; word-break: keep-all; overflow-wrap: anywhere; }
  /* 개별 컬럼 min-width(대상사업 320·정책셀 280 등) 해제 → 컨테이너 폭에 맞춰 줄바꿈 */
  .board-content .data-table--awards tbody td:nth-child(2),
  .board-content .data-table--byproject .po-cell-l,
  .board-content .data-table--byarea .po-cell-l,
  .board-content .data-table--detail .po-cell-l { min-width: 0; }
}

/* [공통 규칙] 태블릿 전용(769~1280) — PC값이 그대로 적용돼 과대한 텍스트 축소.
   min-width:769 스코프라 모바일(≤768) 규칙과 무충돌. */
@media (min-width: 769px) and (max-width: 1280px) {
  /* 분야 탭 타이틀(도시/경제 등): 데스크탑 24px → 태블릿 18px */
  .po-areatabs .po-areatab__name,
  .pa-tabs .ds-tab__name { font-size: 18px; }
  /* 말과글·언론인터뷰 리스트 제목: 데스크탑 24px → 태블릿 19px */
  .press-item__title { font-size: 19px; }
}

/* ============================================================
   프린트 — 헤더·푸터·인터랙션 UI 제거 (브라우저 인쇄 "미리보기"에도 동일 적용)
   프린트 버튼(window.print()) 클릭 시 본문만 깔끔히 출력되도록.
   ============================================================ */
@media print {
  /* 헤더·전체메뉴(헤더 밖 별도 루트)·푸터 제거 */
  .site-header,
  .full-menu,
  .full-menu-dim,
  .site-footer { display: none !important; }

  /* 인쇄 시 불필요한 인터랙션 UI(공유/인쇄 버튼, 팝오버, 점프 드롭다운, 장식 배경) */
  .share-actions,
  .share-popover,
  .breadcrumb-jump-menu,
  .post-rating,
  .post-nav,
  .post-actions { display: none !important; }

  /* [엣지케이스] 인쇄 시 무의미한 인터랙션 UI 숨김
     - 목록: 검색 폼·페이지네이션·글쓰기 버튼
     - 글쓰기: 우편번호 찾기·파일 추가 버튼 (등록/취소는 위 .post-actions 로 이미 숨김) */
  .board-toolbar__form,
  .pagination__wrap,
  .btn-write,
  .suggest-write-address__btn,
  .suggest-write-file .btn-sm { display: none !important; }

  /* 본문 전체폭 + 배경 정리 */
  html, body { background: #fff !important; }
  body { margin: 0 !important; }
  main,
  .board-page { margin: 0 !important; padding-top: 0 !important; }

  /* sticky 탭이 인쇄에서 본문과 겹치지 않도록 흐름 고정 해제 */
  .pa-tabs,
  .po-areatabs,
  .dong-tabs-sticky { position: static !important; }
  .pa-tabs::before, .pa-tabs::after,
  .po-areatabs::before, .po-areatabs::after { display: none !important; }

  /* 넓은 표 — 인쇄 페이지 폭에 맞춰 축소(우측 컬럼 가로 잘림 방지) */
  .board-content .data-table-wrap { overflow: visible !important; }
  .board-content .data-table { min-width: 0 !important; width: 100% !important; }
  .board-content .data-table th,
  .board-content .data-table td { padding: 6px 5px !important; word-break: keep-all; overflow-wrap: anywhere; }
  .data-table--annual, .data-table--byarea, .data-table--detail { font-size: 10.5px !important; }

  /* 페이지 잘림 최소화 */
  table, tr, .data-table { page-break-inside: auto; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ============================================================
   아이콘 (외부 .svg + CSS mask) — inline <svg> 대체
   ------------------------------------------------------------
   빈 <span class="ico ico--xxx"></span> 에 마스크로 아이콘을 그린다.
   background-color: currentColor 라서 부모의 color(=hover·variant)가
   그대로 아이콘 색을 제어한다 (기존 색 규칙이 그대로 적용됨).
   헤더(components/header/header.css .hi)와 동일 패턴.
   ============================================================ */
/* 2026-08-26 수정 — [아이콘 규약] .ico 는 <img> 로 전환. mask 방식 중단(운영 요구·file:// 대응) */
/* 2026-08-31 수정 — [아이콘 복구] 마스크 체계를 되살렸다. 당시 근거 = .ico 스팬 152곳이 마크업 그대로라
   마스크가 필요하다는 것. ★그 근거는 2026-09-11 현재 소멸했다(아래 참조). */
/* 2026-09-11 수정 — [아이콘 규약 정합] .ico 마크업을 전수 실측하니 v3 html 전체에서 <img> 189곳 · <span> 0곳.
   즉 08-31 의 전제(스팬이 남아 있다)가 더는 성립하지 않는다.
   반면 마스크를 켜 두면 라이브에서 사고가 난다 — 라이브 마크업은 tint <img>(예: ic-share-link-2a2e43.svg)인데
   .ico--* 가 거는 mask-image 경로 images/icons/ui/*.svg 는 라이브에 없다(404 실측).
   404 마스크가 <img> 에 걸리면 이미지가 통째로 잘려 공유 아이콘 4개가 전 페이지에서 사라진다(2026-09-09 실제 발생).
   → 마스크를 끈다. 되살리려면 먼저 images/icons/ui/ 배포와 스팬 마크업 존재를 «실측»으로 확인할 것. */
.ico {
  display: inline-block;
  background-color: transparent;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: middle;
}
.ico--share-link     { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-share-link.svg);     mask-image: url(../images/icons/ui/ic-share-link.svg); }
.ico--share-kakao    { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-share-kakao.svg);    mask-image: url(../images/icons/ui/ic-share-kakao.svg); }
.ico--share-x        { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-share-x.svg);        mask-image: url(../images/icons/ui/ic-share-x.svg); }
.ico--share-facebook { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-share-facebook.svg); mask-image: url(../images/icons/ui/ic-share-facebook.svg); }
.ico--arrow-right    { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-arrow-right.svg);    mask-image: url(../images/icons/ui/ic-arrow-right.svg); }
.ico--external       { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-external.svg);       mask-image: url(../images/icons/ui/ic-external.svg); }
.ico--external-box   { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-external-box.svg);   mask-image: url(../images/icons/ui/ic-external-box.svg); }
.ico--chevron-up     { width: 14px; height: 14px; -webkit-mask-image: url(../images/icons/ui/ic-chevron-up.svg);     mask-image: url(../images/icons/ui/ic-chevron-up.svg); }
.ico--chevron-down   { width: 14px; height: 14px; -webkit-mask-image: url(../images/icons/ui/ic-chevron-down.svg);   mask-image: url(../images/icons/ui/ic-chevron-down.svg); }
.ico--list           { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-list.svg);          mask-image: url(../images/icons/ui/ic-list.svg); }
.ico--go             { width: 20px; height: 20px; -webkit-mask-image: url(../images/icons/ui/ic-go.svg);            mask-image: url(../images/icons/ui/ic-go.svg); }
.ico--attach         { width: 15px; height: 15px; -webkit-mask-image: url(../images/icons/ui/ic-attach.svg);        mask-image: url(../images/icons/ui/ic-attach.svg); }
.ico--chevron-left   { width: 20px; height: 20px; -webkit-mask-image: url(../images/icons/ui/ic-chevron-left.svg);  mask-image: url(../images/icons/ui/ic-chevron-left.svg); }
.ico--chevron-right  { width: 20px; height: 20px; -webkit-mask-image: url(../images/icons/ui/ic-chevron-right.svg); mask-image: url(../images/icons/ui/ic-chevron-right.svg); }
.ico--info           { width: 22px; height: 22px; -webkit-mask-image: url(../images/icons/ui/ic-info.svg);          mask-image: url(../images/icons/ui/ic-info.svg); }
.ico--plus           { width: 15px; height: 15px; -webkit-mask-image: url(../images/icons/ui/ic-plus.svg);          mask-image: url(../images/icons/ui/ic-plus.svg); }
.ico--close          { width: 12px; height: 12px; -webkit-mask-image: url(../images/icons/ui/ic-close.svg);         mask-image: url(../images/icons/ui/ic-close.svg); }
.ico--message        { width: 22px; height: 22px; -webkit-mask-image: url(../images/icons/ui/ic-message.svg);       mask-image: url(../images/icons/ui/ic-message.svg); }
.ico--calendar       { width: 24px; height: 24px; -webkit-mask-image: url(../images/icons/ui/ic-calendar.svg);      mask-image: url(../images/icons/ui/ic-calendar.svg); }
.ico--check-circle   { width: 18px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-hotline-check.svg);  mask-image: url(../images/icons/ui/ic-hotline-check.svg); }
.ico--shield         { width: 24px; height: 24px; -webkit-mask-image: url(../images/icons/ui/ic-shield.svg);        mask-image: url(../images/icons/ui/ic-shield.svg); }
.ico--external-arrow { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-external-arrow.svg); mask-image: url(../images/icons/ui/ic-external-arrow.svg); }
.ico--cat-city { -webkit-mask-image: url(../images/vision/field-future.svg); mask-image: url(../images/vision/field-future.svg); }
.ico--cat-welfare { -webkit-mask-image: url(../images/vision/field-youth.svg); mask-image: url(../images/vision/field-youth.svg); }
.ico--cat-edu { -webkit-mask-image: url(../images/vision/field-education.svg); mask-image: url(../images/vision/field-education.svg); }
.ico--cat-econ { -webkit-mask-image: url(../images/vision/field-senior.svg); mask-image: url(../images/vision/field-senior.svg); }
.ico--cat-comm { -webkit-mask-image: url(../images/vision/field-dignity.svg); mask-image: url(../images/vision/field-dignity.svg); }
.ico--dept-shield-check { -webkit-mask-image: url(../images/icons/ui/ic-dept-shield-check.svg); mask-image: url(../images/icons/ui/ic-dept-shield-check.svg); }
.ico--dept-clipboard { -webkit-mask-image: url(../images/icons/ui/ic-dept-clipboard.svg);  mask-image: url(../images/icons/ui/ic-dept-clipboard.svg); }
.ico--dept-building  { -webkit-mask-image: url(../images/icons/ui/ic-dept-building.svg);   mask-image: url(../images/icons/ui/ic-dept-building.svg); }
.ico--dept-heart     { -webkit-mask-image: url(../images/icons/ui/ic-dept-heart.svg);      mask-image: url(../images/icons/ui/ic-dept-heart.svg); }
.ico--dept-tower     { -webkit-mask-image: url(../images/icons/ui/ic-dept-tower.svg);      mask-image: url(../images/icons/ui/ic-dept-tower.svg); }
.ico--dept-transport { -webkit-mask-image: url(../images/icons/ui/ic-dept-transport.svg);  mask-image: url(../images/icons/ui/ic-dept-transport.svg); }
.ico--dept-activity  { -webkit-mask-image: url(../images/icons/ui/ic-dept-activity.svg);   mask-image: url(../images/icons/ui/ic-dept-activity.svg); }
.ico--plancard-arrow { width: 11px; height: 18px; -webkit-mask-image: url(../images/icons/ui/ic-plancard-arrow.svg); mask-image: url(../images/icons/ui/ic-plancard-arrow.svg); }
.ico--pin            { -webkit-mask-image: url(../images/icons/ui/ic-pin.svg);              mask-image: url(../images/icons/ui/ic-pin.svg); }
.ico--check-sm       { width: 11px; height: 11px; -webkit-mask-image: url(../images/icons/ui/ic-check-sm.svg); mask-image: url(../images/icons/ui/ic-check-sm.svg); }
.ico--chevron-right-sm { width: 8px; height: 14px; -webkit-mask-image: url(../images/icons/ui/ic-chevron-right-sm.svg); mask-image: url(../images/icons/ui/ic-chevron-right-sm.svg); }
.ico--camera         { -webkit-mask-image: url(../images/icons/ui/ic-camera.svg);           mask-image: url(../images/icons/ui/ic-camera.svg); }
.ico--vote           { -webkit-mask-image: url(../images/icons/ui/ic-vote.svg);             mask-image: url(../images/icons/ui/ic-vote.svg); }
.ico--poll           { -webkit-mask-image: url(../images/icons/ui/ic-poll.svg);             mask-image: url(../images/icons/ui/ic-poll.svg); }
.ico--suggest        { -webkit-mask-image: url(../images/icons/ui/ic-suggest.svg);          mask-image: url(../images/icons/ui/ic-suggest.svg); }
.ico--budget         { -webkit-mask-image: url(../images/icons/ui/ic-budget.svg);           mask-image: url(../images/icons/ui/ic-budget.svg); }
.ico--megaphone      { -webkit-mask-image: url(../images/icons/ui/ic-megaphone.svg);        mask-image: url(../images/icons/ui/ic-megaphone.svg); }
.ico--chat           { -webkit-mask-image: url(../images/icons/ui/ic-chat.svg);             mask-image: url(../images/icons/ui/ic-chat.svg); }
.ico--download       { width: 15px; height: 15px; -webkit-mask-image: url(../images/icons/ui/ic-download.svg); mask-image: url(../images/icons/ui/ic-download.svg); }
.ico--st-check       { -webkit-mask-image: url(../images/icons/ui/ic-st-check.svg);         mask-image: url(../images/icons/ui/ic-st-check.svg); }
.ico--st-forward     { -webkit-mask-image: url(../images/icons/ui/ic-st-forward.svg);       mask-image: url(../images/icons/ui/ic-st-forward.svg); }
.ico--st-play        { -webkit-mask-image: url(../images/icons/ui/ic-st-play.svg);          mask-image: url(../images/icons/ui/ic-st-play.svg); }
.ico--st-dots        { -webkit-mask-image: url(../images/icons/ui/ic-st-dots.svg);          mask-image: url(../images/icons/ui/ic-st-dots.svg); }
.ico--st-minus       { -webkit-mask-image: url(../images/icons/ui/ic-st-minus.svg);         mask-image: url(../images/icons/ui/ic-st-minus.svg); }
/* (구) .ico--chg-* mask 정의 제거 — 변경절차 아이콘은 다색이라 .ps-chg__icon img 로 직접 사용 */
.ico--file-text      { width: 16px; height: 16px; -webkit-mask-image: url(../images/icons/ui/ic-file-text.svg);   mask-image: url(../images/icons/ui/ic-file-text.svg); }

/* ================================================================
   공약평가 주민배심원단 탭 (jury-) — participation.html 탭3 전용
   ================================================================ */

/* ① 주민배심원단 운영 정보 리스트 */
.jury-info { margin: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--c-gray-250); border-radius: 14px; overflow: hidden; background: var(--c-white); }
.jury-info__row { display: grid; grid-template-columns: 130px 1fr; align-items: stretch; gap: 0; border-bottom: 1px solid var(--c-gray-250); }
.jury-info__row:last-child { border-bottom: none; }
.jury-info__label { display: flex; align-items: center; padding: 16px 24px; font-size: 16px; font-weight: 700; color: var(--c-indigo-700); background: var(--c-indigo-50); white-space: nowrap; border-right: 1px solid var(--c-gray-250); }
.jury-info__desc { display: flex; align-items: center; padding: 16px 24px; font-size: 17px; line-height: 1.7; color: var(--c-text-body); word-break: keep-all; margin: 0; }

/* ② 운영 절차 6단계 카드 */
/* 운영 절차 6단계 — 추진절차(ps-proc)와 동일 스테퍼: 핑크 serif 밑줄 번호 + 구분선 + 화살표 원형 노드 */
.jury-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.jury-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 26px 16px; }
.jury-step:not(:nth-child(6n)) { border-right: 1px solid var(--c-line); }
.jury-step:not(:nth-child(6n)):not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--c-white) url(../images/icons/ic-stepper-arrow.svg) no-repeat center / 13px 13px; border: 1px solid var(--c-line); box-shadow: 0 1px 3px rgba(0,0,0,.06); z-index: 2; }
.jury-step__num { font-family: var(--ff-serif); font-size: 16px; font-weight: 600; font-style: italic; color: var(--c-primary); line-height: 1; text-decoration: underline; text-underline-position: from-font; margin-bottom: 0; }
.jury-step__title { font-size: 20px; font-weight: 700; color: #111; line-height: 1.4; margin: 0; word-break: keep-all; }
.jury-step__desc { padding-top: 2px; font-size: 15px; color: #6A7180; line-height: 1.5; word-break: keep-all; }

/* ③ 회의 운영 현황 타임라인 카드 */
.jury-meet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; padding-top: 38px; }
/* 상단 타임라인 라인 (박스 위로 띄움) */
.jury-meet::before { content: ""; position: absolute; top: 18px; left: calc(50% / 3); right: calc(50% / 3); height: 2px; background: linear-gradient(90deg, transparent, var(--c-primary) 18%, var(--c-primary) 82%, transparent); z-index: 0; pointer-events: none; }
.jury-meet-card { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-gray-250); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); position: relative; }
.jury-meet-card__head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 24px 18px; background: var(--c-indigo-700); color: var(--c-white); position: relative; border-radius: 14px 14px 0 0; }
.jury-meet-card__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c-primary); border: 2px solid var(--c-white); box-shadow: 0 0 0 2px var(--c-primary); position: absolute; top: -27px; left: 50%; transform: translateX(-50%); z-index: 1; }
.jury-meet-card__title { font-size: 19px; font-weight: 700; text-align: center; line-height: 1.4; color: var(--c-white); margin: 0; }
.jury-meet-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jury-meet-card__metabox { background: var(--c-gray-100); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.jury-meet-card__meta { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 16px; color: var(--c-text-body); line-height: 1.5; }
.jury-meet-card__label { font-size: 15px; font-weight: 700; color: var(--c-indigo-600); white-space: nowrap; flex-shrink: 0; min-width: 34px; }
.jury-meet-card__list { margin: 8px 0 0; padding: 0 0 0 18px; list-style: disc; }
.jury-meet-card__list li { font-size: 15px; color: var(--c-text-body); line-height: 1.6; word-break: keep-all; margin-bottom: 6px; }
.jury-meet-card__list li::marker { color: var(--c-primary); }

/* ④ 결과 자료 — 사진 + 다운로드 2단 */
.jury-result { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); gap: 24px; align-items: stretch; }
.jury-result__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jury-result__photo { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--c-gray-250); }
/* 다운로드 박스 — head 상단, 파일행은 세로로 늘어 박스 높이 꽉 채움(사진 높이에 맞추되 빈공간 없게) */
.jury-download { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--c-indigo-50, #F7F8FD); border: 1px solid var(--c-line); border-radius: 14px; padding: 22px; }
.jury-download__head { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; color: var(--c-indigo-700, #2a2e43); }
.jury-download__head .ico--download { background-color: var(--c-indigo-700, #2a2e43); width: 20px; height: 20px; flex-shrink: 0; }
.jury-download__head-text { font-size: 18px; font-weight: 700; color: var(--c-indigo-700, #2a2e43); }
.jury-download__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.jury-download__item { flex: 1; display: flex; align-items: center; gap: 12px; padding: 18px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; }
.jury-download__item .ico--file-text { background-color: var(--c-primary); width: 20px; height: 20px; flex-shrink: 0; }
.jury-download__name { flex: 1; font-size: 16px; color: var(--c-text-default); line-height: 1.45; word-break: keep-all; }
.jury-download__btn { flex-shrink: 0; font-size: 15px; background: var(--c-indigo-700); color: var(--c-white); border-color: var(--c-indigo-700); }
.jury-download__btn:hover { background: var(--c-indigo-600); border-color: var(--c-indigo-600); color: var(--c-white); }

/* 반응형 — 태블릿 (1280 이하): 3열 2행, 화살표 숨김 */
@media (max-width: 1280px) {
  .jury-steps { grid-template-columns: repeat(3, 1fr); }
  .jury-step { border-right: none; }
  .jury-step:not(:nth-child(3n)) { border-right: 1px solid var(--c-line); }
  .jury-step:nth-child(-n+3) { border-bottom: 1px solid var(--c-line); }
  .jury-step:not(:nth-child(6n)):not(:last-child)::after { display: none; }
}
/* 반응형 — 태블릿 mid (900 이하) */
@media (max-width: 900px) {
  .jury-result { grid-template-columns: 1fr; }
}
/* 반응형 — 모바일 (768 이하) */
@media (max-width: 768px) {
  .jury-info__row { grid-template-columns: 96px 1fr; }
  .jury-info__label { padding: 14px 16px; font-size: 15px; }
  .jury-info__desc { padding: 14px 16px; font-size: 16px; }
  .jury-steps { grid-template-columns: 1fr; }
  .jury-step { border-right: none; border-bottom: 1px solid var(--c-line); padding: 22px 20px; }
  .jury-step:not(:nth-child(3n)) { border-right: none; }
  .jury-step:last-child { border-bottom: none; }
  .jury-step__title { min-height: 0; }
  .jury-meet { grid-template-columns: 1fr; gap: 20px; padding-top: 0; }
  .jury-meet::before { display: none; }
  .jury-meet-card__dot { display: none; }
  .jury-result__photos { grid-template-columns: 1fr 1fr; }
  .jury-download__name { font-size: 13px; }
}

/* ============================================================
   [2026-06-11] 반응형 타이포·간격·버튼 위계 축소 패스
   대상: pledge-status / participation 커스텀 컴포넌트
   (ps-pie · ps-areacard · ps-proc · ps-chg · ps-sum · ps-reg ·
    ps-meeting · pa-card · jury-*)
   ── PC(≥1025px) 값은 위에서 정의됨, 여기서는 "추가만"(축소만) ──
   그리드 reflow 규칙은 손대지 않음. 위계 보존(상대크기 유지).
   ============================================================ */

/* ── 태블릿 (≤1024px) — 타이틀/소제목 ~15%↓, 큰 숫자 ~25%↓ ── */
@media (max-width: 1024px) {
  /* 추진현황 — 이행률 카드 (≤1024 에서 세로배치돼도 PC 폰트 유지되던 부분) */
  .pledge-status-page .ps-pie__head em { font-size: 22px; }          /* 26→22 */
  .pledge-status-page .ps-pie__num strong { font-size: 48px; }       /* 62→48 (큰 숫자) */
  .pledge-status-page .ps-pie__num i { font-size: 24px; }            /* 28→24 */
  /* 분야 리스트 이행률 — 이름/게이지 % */
  .pledge-status-page .ps-areacard__label b { font-size: 20px; }     /* 23→20 */
  .pledge-status-page .ps-gauge__pct { font-size: 21px; }            /* 24→21 (게이지 큰 숫자) */

  /* 추진/변경 절차 — 제목·번호·부서 */
  .pledge-status-page .ps-proc__title { font-size: 18px; min-height: 50px; }   /* 20→18(하한) */
  .pledge-status-page .ps-proc__item { padding: 22px 16px; }                    /* 26/20→22/16 */
  .pledge-status-page .ps-chg__title { font-size: 18px; }                       /* 20→18 */
  .pledge-status-page .ps-chg__item { padding: 18px 16px 20px; gap: 16px; }
  .pledge-status-page .ps-chg__icon { width: 56px; height: 56px; }
  /* 총괄현황 카드 — 차수 제목·수치 */
  .pledge-status-page .ps-sum-card__phase { font-size: 18px; }                  /* 20→18 */
  .pledge-status-page .ps-sum-card__hd { padding: 16px 18px; }
  .pledge-status-page .ps-sum-num { font-size: 20px; }                          /* 22→20 */
  .pledge-status-page .ps-sum-row--total .ps-sum-num { font-size: 21px; }       /* 24→21 */
  .pledge-status-page .ps-sum-rows { padding: 0 18px 12px; }

  /* 평가 — 제도기반 박스 (이름 21·버튼 48/16 안 줄던 부분) */
  .pledge-status-page .ps-reg { padding: 22px 24px; }                           /* 26/32→22/24 */
  .pledge-status-page .ps-reg__name { font-size: 18px; }                        /* 21→18(하한) */
  .pledge-status-page .ps-reg__btn { height: 44px; padding: 0 20px; font-size: 15px; }  /* 48/16→44/15 */

  /* participation — 카드 제목 / 배심원단 */
  .pa-card__title { font-size: 18px; }                                          /* 21→18 */
  .pa-card__body { padding: 20px 20px 22px; }
  .jury-step__title { font-size: 18px; }                                        /* 20→18 */
  .jury-step { padding: 22px 14px; }
  .jury-meet-card__title { font-size: 18px; }                                   /* 19→18 */
  .jury-download__head-text { font-size: 16px; }                                /* 18→16 */
  /* [통합] 분야 타이틀(혼자 컸던 것 정정) · 스텝 부서명 */
  .pledge-status-page .ps-area-title { font-size: 20px; }
  .pledge-status-page .ps-proc__dept { font-size: 15px; }
}

/* ── 모바일 (≤768px) — 추가 축소 + 간격 축소 ── */
@media (max-width: 768px) {
  /* 추진현황 — 이행률 큰 숫자 (≤600 에서 40px로 줄지만 600~768 구간 보강) */
  .pledge-status-page .ps-pie__num strong { font-size: 42px; }       /* 큰 숫자 추가 축소 */
  .pledge-status-page .ps-pie__num i { font-size: 22px; }
  .pledge-status-page .ps-areacard__label b { font-size: 19px; }
  .pledge-status-page .ps-gauge__pct { font-size: 20px; }

  /* 추진/변경 절차 — 컴포넌트 패딩 하한(12), 제목 하한 18 유지 */
  .pledge-status-page .ps-proc__item { padding: 18px 14px; }
  .pledge-status-page .ps-proc__date { font-size: 13px; padding: 3px 10px; }
  .pledge-status-page .ps-proc__dept { font-size: 14px; }            /* 16→14 (캡션) */
  .pledge-status-page .ps-chg__dept { font-size: 14px; }
  .pledge-status-page .ps-sum-card__desc { font-size: 14px; }

  /* 평가 — 회차 카드 제목 */
  .pledge-status-page .ps-meeting { padding: 18px 18px; }
  .pledge-status-page .ps-meeting__title { font-size: 16px; }        /* 17→16 */

  /* participation — 회의 meta·다운로드 버튼 (dd·info__desc·head-text 는 .participation 스코프/@1024 로 단일화) */
  .jury-meet-card__meta { font-size: 15px; }
  .jury-download__btn { height: 36px; padding: 0 14px; font-size: 14px; }

  /* [통합] pledge-status — 분야타이틀·분포%·스텝/카드 제목(대타이틀18 아래 16)·완료도 카드 */
  .pledge-status-page .ps-area-title { font-size: 18px; }
  .ps-step__pct { font-size: 19px; }
  .pledge-status-page .ps-proc__title,
  .pledge-status-page .ps-chg__title { font-size: 16px; }
  .pledge-status-page .ps-guide__body b { font-size: 16px; }
  .pledge-status-page .ps-guide__body span { font-size: 14px; line-height: 1.55; }
  .pledge-status-page .ps-guide__icon { width: 38px; height: 38px; }
  .pledge-status-page .ps-guide__icon svg,
  .pledge-status-page .ps-guide__icon .ico { width: 19px; height: 19px; }
  .pledge-status-page .ps-guide__item { padding: 16px 16px; gap: 10px; }

  /* [통합] participation — 카드/박스 제목16·카드간격·라벨값 세로스택·표 세로스택·다운로드 세로·사진 1열 */
  .participation .pa-card__title,
  .participation .jury-meet-card__title,
  .participation .jury-step__title { font-size: 16px; }
  .participation .pa-cards { gap: 20px; }
  .participation .pa-card__field { grid-template-columns: 1fr; gap: 2px; }
  .participation .pa-card__field dt { font-size: 14px; color: var(--c-text-muted, #6A7180); }
  .participation .pa-card__field dd { font-size: 15px; }
  /* jury-info(목적/구성) — 세로 스택(라벨 위/값 아래) 유지, 라벨은 strip 안에서 가운데 정렬 */
  .participation .jury-info__row { grid-template-columns: 1fr; }
  .participation .jury-info__label { padding: 11px 16px; font-size: 14px; white-space: normal; color: var(--c-text-muted, #6A7180); justify-content: center; text-align: center; }
  .participation .jury-info__desc { padding: 12px 16px 14px; font-size: 15px; }
  .participation .jury-meet-card__list li { font-size: 14px; }
  .participation .jury-download__item { flex-direction: column; align-items: stretch; gap: 12px; }
  .participation .jury-download__btn { align-self: flex-start; }
  .participation .jury-result__photos { grid-template-columns: 1fr; }
}

/* ── 소형 모바일 (≤480px) — 큰 숫자 40~50%↓·간격 추가 압축 ── */
@media (max-width: 480px) {
  /* 이행률 % (62px → 36px ≒ 42%↓, 하한 적용) */
  .pledge-status-page .ps-pie__num strong { font-size: 36px; }
  .pledge-status-page .ps-pie__num i { font-size: 18px; }
  .pledge-status-page .ps-pie__head em { font-size: 19px; }          /* 하한 18 근접 */
  .pledge-status-page .ps-pie { padding: 24px 20px; }
  .pledge-status-page .ps-areacard__label b { font-size: 18px; }     /* 하한 18 */
  .pledge-status-page .ps-gauge__pct { font-size: 19px; }

  /* 추진/변경/총괄 — 제목 하한 18 유지, 간격만 추가 압축 */
  .pledge-status-page .ps-proc__item { padding: 16px 14px; }
  .pledge-status-page .ps-proc__title { min-height: 0; }             /* 1열이라 강제 2줄 높이 해제 */
  .pledge-status-page .ps-sum-num { font-size: 19px; }
  .pledge-status-page .ps-sum-row--total .ps-sum-num { font-size: 20px; }

  /* 평가 — 제도기반 박스 (패딩 하한·컴팩트) */
  .pledge-status-page .ps-reg { padding: 16px; gap: 12px; }
  .pledge-status-page .ps-reg__name { font-size: 16px; }
  .pledge-status-page .ps-reg__btn { height: 40px; padding: 0 16px; font-size: 14px; }

  /* [통합] 보조텍스트·serif번호·완료도 스텝 추가 압축 */
  .ps-step__pct { font-size: 18px; }
  .ps-step__name { font-size: 13.5px; }
  .ps-step__cnt { font-size: 13px; }
  .ps-areacard__cnt { font-size: 13px; }
  .ps-sum-note { font-size: 13px; }
  .ps-meeting__when { font-size: 13px; }
  .ps-meeting__result { font-size: 13px; }
  .ps-proc__num, .ps-chg__num { font-size: 15px; }
  .ps-steps { gap: 8px; }
  .ps-step { padding: 12px 6px 14px; gap: 7px; }

  /* [통합] participation — 주민참여 타일 축소 + 회의리스트·배심원 번호/설명/라벨 + 카드간격 */
  .jury-step__num { font-size: 15px; }
  .jury-step__desc { font-size: 14px; }
  .jury-meet-card__label { font-size: 14px; }
  .participation .pa-cards { gap: 16px; }
  .participation .sns-link { padding: 22px 20px; gap: 16px; min-height: 150px; }
  .participation .sns-link__name { font-size: 20px; }
  .participation .sns-link__handle { font-size: 14px; }
  .participation .sns-link__icon { width: 28px; height: 28px; }
  .participation .sns-link__text { gap: 8px; }
  .participation .jury-meet-card__list li { font-size: 13.5px; }
}

/* [반응형 base] 변경탭 표 가로스크롤 min-width + 글자단위 끊김 해제
   (위 @1024/@768/@480 세 블록에 모든 축소·재배치 규칙을 통합. 여기는 미디어쿼리 아닌 base 만) */
.data-table--chg-2col { min-width: 600px; }
.data-table--chg-mod  { min-width: 840px; }
.data-table--chg-6col { min-width: 1060px; }
.data-table--rowspan  { min-width: 1060px; }   /* 2차 조정 6열 */
.board-content .data-table { overflow-wrap: normal; }              /* 표 셀: 초장문 글자단위 끊김 방지(가로스크롤로 처리) */
.participation .jury-download__name { overflow-wrap: normal; word-break: keep-all; }  /* 파일명 글자단위 끊김 방지 */

/* ============================================================
   [인라인 → sub.css 이관] 각 페이지 <head> 의 <style> 블록을 여기로 통합.
   모두 페이지 고유 스코프 유지 → 다른 페이지 영향 없음. 원본 HTML 의 <style> 은 제거.
   ============================================================ */

/* ── base (미디어쿼리 밖) — 페이지별 ── */
/* 취임사 인트로 타이포 (Figma 10258-3075) */
.inaug-intro__head { gap: 8px; }
.inaug-intro__eyebrow { font-family: var(--ff-title); font-style: normal; font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -1px; text-transform: none; }
.inaug-intro__title { font-size: 60px; line-height: 1.2; letter-spacing: -1px; font-weight: 500; }
.inaug-intro__title em { font-weight: 700; font-style: normal; }
.inaug-intro__subtitle { font-family: var(--ff-title); font-weight: 400; font-size: 32px; line-height: 1.4; letter-spacing: -1px; margin: 0; color: #fff; }
/* AI 김길성 숏츠 — 9:16 썸네일 + 그리드 5단 */
/* 매니페스토 — 영문 라벨 + 히어로 타이틀 폰트 */
.manifesto-page .mf-country__en { font-size: 16px; }
.manifesto-page .mf-hero__title { font-family: var(--ff-title); }
/* 기념사·신년사 — 본문 이미지 seamless (동일 규칙 DRY 병합) */
/* 2026-06-19 기고문 자세히보기 hover 인디고 오버라이드 제거 → press-list와 동일 브랜드 핑크로 통일 */
/* 동별 탭 sticky(주민과의 대화·생활현장) — 헤더↔탭 상단 간격 (happy-date·field-report 단일화) */
.dong-tabs-sticky { margin-top: var(--gap-section); }
/* 구청장에게 바란다 목록 — 버튼 hover·행 클릭 시그널 (페이지 고유 스코프) */
/* 구청장에게바란다 고유 요소들 — 고유 클래스라 페이지 스코프 없이 직접(개발: main 페이지클래스 제거) */
.btn-write { transition: background-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1); }
.btn-write:hover { background: var(--c-indigo-500); border-color: var(--c-indigo-500); box-shadow: 0 8px 20px rgba(42, 53, 140, .28); transform: translateY(-1px); }
.notice-cell__btn { transition: box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1); }
.notice-cell__btn:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.board-table tbody tr { transition: background-color .15s ease; }
.board-table tbody tr:hover { background: rgba(42, 53, 140, .04); }


/* ── @media (max-width: 1024px) ── */
@media (max-width: 1024px) {
  .inaug-intro__eyebrow { font-size: 20px; }
  .inaug-intro__title { font-size: 44px; }
  .inaug-intro__subtitle { font-size: 26px; }
  .manifesto-page .mf-country__en { font-size: 15px; }
}

/* ── @media (max-width: 768px) ── */
@media (max-width: 768px) {
  /* 취임사 */
  .inaug-intro__head { gap: 10px; }
  .inaug-intro__eyebrow { font-size: 16px; letter-spacing: -0.5px; }
  .inaug-intro__title { font-size: 30px; line-height: 1.3; }
  .inaug-intro__subtitle { font-size: 19px; }
  .inaug-intro__desc { font-size: 15px; }
  /* AI 숏츠 2단 */
  /* 매니페스토 — 라벨 + 풀블리드 clip 해제 */
  .manifesto-page .mf-country__en { font-size: 14px; }
  .board-page.manifesto-page { overflow-x: visible; }
  /* 기념사·신년사 */
  /* 동별 탭 sticky */
  .dong-tabs-sticky { margin-top: 44px; }
}

/* ── @media (max-width: 480px) ── */
@media (max-width: 480px) {
  /* 취임사 */
  .inaug-intro__eyebrow { font-size: 13px; }
  .inaug-intro__title { font-size: 22px; }
  .inaug-intro__subtitle { font-size: 15px; }
  .inaug-intro__desc { font-size: 14px; }
}

/* ===== reveal animation (generic [data-reveal] — inauguration / vision shared) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   인라인 style 정리 — 각 페이지 인라인 style="" 속성을 외부화
   (렌더 보존: 기존 인라인과 동일 값, 페이지 고유 스코프)
   ============================================================ */

/* manifesto — 인라인 정리 */
.manifesto-page .mf-award-banner { text-align: center; margin: 60px 0 0; }
.manifesto-page .mf-award-banner__img { max-width: 100%; height: auto; display: inline-block; }
.manifesto-page .mf-eyebrow { color: var(--c-pink-500); }

/* press-view — 외부기사 발췌 안내문 */
.pv-disclaimer { color: #6A7180; font-style: italic; }

/* photo-view — 슬라이드 placeholder 배경 */
.media-view--photo .media-slider__item:nth-child(1) { background: #dbe2f0; }
.media-view--photo .media-slider__item:nth-child(2) { background: #e6dcd0; }
.media-view--photo .media-slider__item:nth-child(3) { background: #d4e4d4; }
.media-view--photo .media-slider__item:nth-child(4) { background: #ede0e8; }
.media-view--photo .media-slider__item:nth-child(5) { background: #dee9ec; }

/* video-view — 영상 준비중 placeholder 오버레이 (media-view--video 스코프: media-view 컴포넌트는 photo/ai-mayor 공용이라 video 전용 modifier로 한정) */
.media-view--video .media-view__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-white);
  font-size: 16px; text-align: center; padding: 16px; line-height: 1.6;
}

/* ai-mayor-view — 세로(9:16) 숏츠 임베드 */

/* pledge-annual — 연차별 표 컬럼폭 */
.pledge-annual-page .data-table--annual col:nth-child(1) { width: 52px; }
.pledge-annual-page .data-table--annual col:nth-child(2) { width: 60px; }
.pledge-annual-page .data-table--annual col:nth-child(3) { width: 248px; }
.pledge-annual-page .data-table--annual col:nth-child(4) { width: 200px; }
.pledge-annual-page .data-table--annual col:nth-child(5),
.pledge-annual-page .data-table--annual col:nth-child(6),
.pledge-annual-page .data-table--annual col:nth-child(7),
.pledge-annual-page .data-table--annual col:nth-child(8),
.pledge-annual-page .data-table--annual col:nth-child(9) { width: 108px; }

/* suggestion 동의표 — 컬럼폭 (edit/write 공통) */
.suggest-write-consent__table col:nth-child(1) { width: 30%; }
.suggest-write-consent__table col:nth-child(2) { width: 50%; }
.suggest-write-consent__table col:nth-child(3) { width: 20%; }

/* suggestion-list — 게시판 표 컬럼폭 + 제목 헤더 정렬 */
.board-table--suggestion col:nth-child(1) { width: 160px; }
.board-table--suggestion col:nth-child(3) { width: 126px; }
.board-table--suggestion col:nth-child(4) { width: 160px; }
.board-table--suggestion col:nth-child(5) { width: 191px; }
.board-table--suggestion th.col-title { text-align: center; padding-left: 0; }


/* ============================================================================
   ===== 매니페스토 개편 2026-08 — 추가 블록 (기존 규칙 수정 0 · 추가만) =====
   출처: .artifacts/2026-08-13/열린구청장실_매니페스토개편/06_IA_proto/_deliver_css_block.css
   실렌더 검증: 06_IA_proto/_measure.py — 7뷰포트(360/768/1024/1280/1366/1440/1920)
                문서 가로오버플로 0 · 글자 4방향 넘침 0 · 현재항목 가시성 전 뷰포트 확보
   토큰은 기존 것만 사용: --c-primary(#C40051) / --c-line / --c-ink / --ff-body / --gap-section
   ============================================================================ */

/* -- (1) 3뎁스 형제 이동 내비 (.sub-nav) -------------------------------------
   구 열린구청장실(민선8기)의 `.link-tab`(형제 페이지 링크탭)을 답습한 컴포넌트다.
   구 사이트 근거 — jungguOpen/css/style.css:556~561, :631~632
     · 형제 페이지를 가로로 나열하고 현재 페이지에 li.active
     · <=1200px 에서 flex-wrap:wrap = 가로 스크롤이 아니라 "줄바꿈"
   바꾼 것 — 구 사이트의 li{width:33.3%} 균등박스는 3개 전제라 7개 그룹에 못 쓴다.
             폭 자동(hug) + 밑줄 강조로 바꾸고 나머지 동작 규칙은 그대로 답습했다.
   ★ 페이지 내부 탭(.ds-tabs 알약형)과 반드시 다른 모양이어야 한다 —
     「공약사업 추진현황」에서 이 둘이 한 화면에 위아래로 함께 놓인다. */
.sub-nav {
  margin: 0 0 var(--gap-section);
  border-bottom: 1px solid var(--c-line);
}
.sub-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-nav__item { display: flex; }
.sub-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding: 0 22px;
  font-family: var(--ff-body);
  /* 2026-08-25 수정 — [피드백] 3depth 폰트 키움 18→19, 2차 19→20.
     ※ 운영 .ds-tab(18/17/14) 기준보다 두 단계 큰 값이라, 같은 화면에 .ds-tab 이
     함께 뜨면 크기가 어긋난다(전달 시 사내 dev 께 공유 필요). */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #5a6068;
  letter-spacing: -0.4px;
  white-space: nowrap;
  text-decoration: none;
}
.sub-nav__link:hover,
.sub-nav__link:focus-visible { color: var(--c-ink); }
/* 현재 위치 표시는 aria-current 를 셀렉터로 쓴다.
   .is-active 클래스와 이중 관리하면 페이지가 늘어나는 동안
   시각 상태와 접근성 상태가 갈라진다. 하나로 묶으면 갈라질 수 없다. */
.sub-nav__link[aria-current="page"] {
  color: var(--c-primary);
  font-weight: 700;
}
.sub-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  background: var(--c-primary);
  border-radius: 2px 2px 0 0;
}
/* 2026-08-24 수정 — [첫 탭을 페이지 타이틀 왼쪽 라인에 맞춤]
   첫 탭의 좌측 패딩(22px) 때문에 탭 글자가 상단 서브타이틀보다 들어가 보였다.
   첫 탭만 좌측 패딩 0 → 글자 시작점이 컨테이너 왼쪽 라인과 한 줄.
   활성 밑줄도 같이 left:0 — 글자보다 왼쪽으로 삐져나오던 잔선까지 해결. */
.sub-nav__item:first-child .sub-nav__link { padding-left: 0; }
.sub-nav__item:first-child .sub-nav__link[aria-current="page"]::after {
  left: 0;
  border-radius: 0 2px 0 0;
}
/* [FIX-TYPO-20260814:START] 중간 단계 — 운영 .ds-tab 의 1280 값(17px)과 같게 둔다.
   ≤768 블록보다 앞에 있어야 캐스케이드가 18→17→14 순으로 내려간다. */
@media (max-width: 1280px) {
  .sub-nav__link { font-size: 19px; }   /* 2026-08-25 수정 — 3depth 키움(17→18, 2차 18→19) */
}
/* [FIX-TYPO-20260814:END] */
@media (max-width: 768px) {
  .sub-nav { margin-bottom: 40px; }
  /* 2026-08-25 수정 — 3depth 키움(14→15).
     ※ 2026-08-14 에 운영 .ds-tab(≤768=14)과 맞추려고 15→14 로 내렸던 값을 되돌린 것이다.
        이제 .ds-tab 과 1px 어긋난다 — 구청 요청(3depth 키움)이 우선이라 감수한 차이. */
  .sub-nav__link { height: 46px; padding: 0 12px; font-size: 15px; }
  .sub-nav__link[aria-current="page"]::after { left: 8px; right: 8px; }
}
/* 2026-08-24 수정 — [모바일 탭 붕괴] 항목이 2~7개라 좁은 폭에서 여러 줄로 접혀 무너졌다.
   ≤768 에서는 탭 목록을 감추고 하단 라인만 있는 select 로 바꾼다(common.js 가 생성). */
.subnav-mobile-select { display: none; }
@media (max-width: 768px) {
  .sub-nav__list { display: none; }
  .sub-nav { border-bottom: 0; margin-bottom: 28px; }
  .subnav-mobile-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 34px 12px 2px;
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.4px;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--c-primary);
    border-radius: 0;
    background-image: url(../images/icons/ui/ic-select-chevron-primary.svg);
    background-repeat: no-repeat;
    background-position: right 6px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
  }
  /* 2026-08-24 수정 — 열린 목록(option)까지 핑크·굵게 상속돼 드롭다운이 어수선했다(실캡처 지적).
     닫힌 상태(선택값)만 핑크로 두고, 목록은 기본 잉크색·보통 굵기로 되돌린다. */
  .subnav-mobile-select option { color: var(--c-text-default); font-weight: 500; background: var(--c-white); }
  .subnav-mobile-select:focus { outline: 2px solid var(--c-primary); outline-offset: 3px; }
}
/* 2026-08-24 수정 — [탭↔본문 갭 0 모디파이어]
   탭 바로 아래에 풀블리드 컬러 밴드(히어로)가 오는 페이지 전용:
   vision.html · manifesto.html · pledge-overview.html · pledge-list.html(2026-08-28 추가).
   @media 768(margin-bottom:40px)보다 뒤에 두어 모바일에서도 0이 이긴다. */
.sub-nav--flush { margin-bottom: 0; }
/* 인쇄 — 형제 이동 내비는 종이에 의미가 없다 */
@media print {
  .sub-nav { display: none !important; }
}

/* -- (2) breadcrumb 4단 대응 --------------------------------------------------
   현행 .breadcrumb(:53)는 display:inline-flex; gap:18px 뿐이고 flex-wrap 이 없다.
   4단이 되면 좁은 폭에서 한 줄로 밀린다. 기존 규칙을 고치지 않고 뒤에서 덮는다. */
.breadcrumb { flex-wrap: wrap; row-gap: 6px; }

/* -- (3) 5대 분야 색 토큰 — 신규 페이지 클래스 추가 [미적용 · 다음 단계] -------
   기존 규칙 style.css:6052~6061 은 --po-* 를 아래 3개 페이지 클래스에만 스코프한다:
     .pledge-overview-page, .pledge-status-page, .pledge-annual-page
   신규 페이지(pledge-list 등)가 분야색을 쓰려면 그 "셀렉터 목록에 한 줄 추가"가
   필요하다(기존 규칙 수정·:root 승격 금지 — P1 §3-3 / _verdict_P1 §4).
   실제로 어떤 페이지 클래스가 필요한지는 화면계획 확정 후에만 알 수 있으므로
   Stage 0 에서는 넣지 않는다. 넣을 때 회귀 기준 = 기존 5페이지 스크린샷 무변화.
   ------------------------------------------------------------------------- */


/* ============================================================================
   [Stage 2 병합] 민선9기 매니페스토 개편 — W1~W4 신규 페이지 CSS  (2026-08-13)
   ----------------------------------------------------------------------------
   · 위 Stage 0 주석 (3) 「5대 분야 색 토큰 — 미적용」은 아래 W3 블록이 해소한다.
     기존 민선8기 토큰(--po-city 등, :6052~6061)은 **건드리지 않았다** —
     pledge-annual.html 이 아직 그 토큰을 쓴다. 신규 --po-f1~f5 는 별도 이름의 추가다.
   · :root 승격 없음. 분야 토큰은 페이지 클래스 스코프를 그대로 유지한다.
   · 이 지점부터 파일 끝까지가 Stage 2 추가분이며, 위쪽 원본은 바이트 단위 무변경이다.
   · 순서 = W3 → W2 → W4 → W1 (근거는 _work/S2_30_merge_css.py 헤더)
   ============================================================================ */


/* ==========================================================================
   ── css_W3.css  (19,505B · sha256 799fe2d252c12b80)
   W3 공약실천 — 공약사업 총괄현황·추진현황. ★--po-f1~f5 정의가 여기 단 한 곳.
   ========================================================================== */
/* ============================================================================
   css_W3.css — W3 (공약사업 총괄현황 · 공약사업 추진현황) 추가 CSS
   생성 2026-08-13 · Stage 1 화면제작

   ★ style.css 를 직접 고치지 않는다. Stage 2 에서 style.css 말미에 "추가만" 병합한다.
      (기존 규칙 수정·삭제 0 / :root 승격 금지 — P1 3-3 · _verdict_P1 4)
   ★ 신규 색·신규 폰트·신규 이미지 0. 기존 팔레트 토큰과 기존 SVG 만 쓴다.
   ★ border-left 색상 세로선 callout 0 (lessons #8).

   로컬 미리보기에서는 style.css 다음에 이 파일을 <link> 로 얹어 확인한다.
   ============================================================================ */


/* ==========================================================================
   1. 5대 분야 토큰 — 민선9기 (중립 키 f1~f5)
   민선8기 이름 기반 키(--po-city/welfare/edu/econ/comm)는 pledge-annual 이 아직
   쓰므로 삭제하지 않는다. 새 키만 추가한다.
   색은 기존 5색을 선언 순서 그대로 새 5분야에 1:1 배정 — 신규 색 0.
   ========================================================================== */
.pledge-overview-page,
.pledge-status-page,
.pledge-annual-page,
.pledge-list-page,
/* 2026-08-24 추가 — 공약가계부도 분야색을 쓴다. 스코프에 없으면 var(--po-f1) 이 무효가 되어
   color 선언 자체가 버려지고 글자색이 상속(#111)으로 남는다(실측으로 잡음 — vision-core 와 같은 함정). */
.pledge-ledger-page {
  /* 2026-08-24 수정 — [분야색 기준 정정] 기존 배정(미래=파랑/청년=핑크/교육=민트/노후=인디고/품격=퍼플)이
     민선9기 비전(vision.html)·5대 핵심공약(vision-core.html)과 어긋나 있었다. 기준은 이것 하나다 —
     미래=핑크 · 청년=자주 · 교육=보라 · 노후=민트 · 품격=파랑. vision-core-page 스코프의 동일 토큰
     override(:10112~)와 값을 맞췄다. */
  --po-f1: var(--c-pink-500);    /* 미래를 그리는 중구  #C40051 핑크 */
  --po-f2: #b02c94;              /* 청년이 꿈꾸는 중구  자주(마젠타) */
  --po-f3: #5b3fa8;              /* 교육이 든든한 중구  보라 */
  --po-f4: var(--c-mint);        /* 노후가 편안한 중구  #018582 민트 */
  --po-f5: var(--c-blue-500);    /* 품격이 가득한 중구  #1342A6 파랑 */
}

.po-areacard--f1, .po-areatab--f1, .ps-areacard--f1 { --c: var(--po-f1); }
.po-areacard--f2, .po-areatab--f2, .ps-areacard--f2 { --c: var(--po-f2); }
.po-areacard--f3, .po-areatab--f3, .ps-areacard--f3 { --c: var(--po-f3); }
.po-areacard--f4, .po-areatab--f4, .ps-areacard--f4 { --c: var(--po-f4); }
.po-areacard--f5, .po-areatab--f5, .ps-areacard--f5 { --c: var(--po-f5); }


/* ==========================================================================
   2. 래퍼 전환으로 끊긴 복합 셀렉터 복구  (30_Stage0 7 잔여 #2)
   페이지 클래스가 <main class="board-page"> 에서 본문 최상위 래퍼 div 로 내려가면
   style.css:6153 의 `.pledge-overview-page.board-page`(같은 요소 결합)가 끊긴다.
   :has() 로 되살린다. 키는 실재 클래스 .po-block--hero 를 쓴다(.po-hero 는 없는 클래스).
   대상은 pledge-overview 뿐이다 — .pledge-status-page 에는 board-page 결합 셀렉터가 없다.
   ========================================================================== */
@media (max-width: 768px) {
  .board-page:has(.po-block--hero) { overflow-x: visible; }
}


/* ==========================================================================
   3. 공약사업 총괄현황 (pledge-overview)
   ========================================================================== */

/* 3-1. 5대 분야 카드 — 라벨이 2~6자에서 9자 서술형으로 바뀌어 가로 배치가 깨진다.
        (05_기존데이터_대조 1 「레이아웃 재산정」) → 세로 배치로 전환하고
        이름은 keep-all 로 어절 단위 줄바꿈. 부제(.po-areacard__sub)는 원문에 없어 제거. */
.po-areagrid--long .po-areacard {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 22px 22px;
  min-height: 178px;
}
.po-areagrid--long .po-areacard__text { flex: 0 0 auto; width: 100%; }
.po-areagrid--long .po-areacard__name {
  font-size: 24px;
  line-height: 1.28;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.po-areagrid--long .po-areacard__num { width: 72px; height: 72px; font-size: 34px; }
@media (max-width: 1280px) {
  .po-areagrid--long .po-areacard { padding: 20px 18px 18px; }
  .po-areagrid--long .po-areacard__name { font-size: 21px; }
  .po-areagrid--long .po-areacard__num { width: 64px; height: 64px; font-size: 30px; }
}
@media (max-width: 1024px) {
  .po-areagrid--long { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .po-areagrid--long { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .po-areagrid--long .po-areacard { min-height: 0; padding: 18px 16px 16px; gap: 12px; }
  .po-areagrid--long .po-areacard__name { font-size: 19px; }
  .po-areagrid--long .po-areacard__num { width: 60px; height: 60px; font-size: 27px; }
}
@media (max-width: 420px) {
  .po-areagrid--long { grid-template-columns: 1fr; }
  .po-areagrid--long .po-areacard { flex-direction: row; align-items: center; }
}

/* 3-2. 부서별 현황 — 카드 8개(민선8기) → 6개 국(민선9기). 8열 그리드를 6열로. */
.po-deptgrid--n6 { grid-template-columns: repeat(6, 1fr); }
.po-deptcard__name { word-break: keep-all; line-height: 1.3; text-align: center; }
.po-deptcard__name small { display: block; font-size: 12px; font-weight: 500; color: #777676; letter-spacing: -0.3px; }
@media (min-width: 1025px) { .po-deptgrid--n6 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1024px)  { .po-deptgrid--n6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)   { .po-deptgrid--n6 { grid-template-columns: repeat(2, 1fr); } }

/* 3-3. 제목 옆 보조 라벨 (원문 부제: 「6개 국 · 25개 부서」 등) */
.po-title-note {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 400;
  color: #777676;
  letter-spacing: -0.2px;
  vertical-align: middle;
}
@media (max-width: 768px) { .po-title-note { display: block; margin: 4px 0 0; font-size: 14px; } }

/* 3-4. 기타현황별 — 2열짜리 작은 표 3개가 나란히 (원문 2-5 구조 그대로) */
.po-smalltables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .po-smalltables { grid-template-columns: 1fr; gap: 14px; } }

/* 3-5. 표 헤더 안 보조 문구 — 「도시관리국(추진단 포함)」 */
.board-content .data-table thead th small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  /* 2026-08-13 Stage4 — 명도대비. #777676 은 흰 배경(4.53)에서만 통과하는데
     이 문구는 thead 회색(#f5f5f5) 위라 4.15 로 미달했다(「도시관리국(추진단 포함)」). */
  color: #5b606b;
  letter-spacing: -0.3px;
  margin-top: 2px;
}
/* 2026-08-17 수정 — 추진시기별 표만: 헤더 보조문구의 줄바꿈을 허용한다.
   thead th 는 white-space:nowrap(5764) 이라 「2026.7.~2027」이 안 쪼개져 320~360 에서
   표가 래퍼를 41px 넘겼다(이 래퍼는 tabindex 가 없어 스크롤이 생기면 키보드로 못 민다).
   normal 로 풀면 「(28년~임기 내)」가 어절에서 접히며 320 에서도 넘침 0 이 된다.
   부서별 표의 「(추진단 포함)」은 그대로 두려고 표 단위로 스코프했다. */
.board-content .data-table--timing thead th small { white-space: normal; }
/* 분야명 9자가 들어가는 헤더 — 어절 단위로만 끊는다 */
.pledge-overview .data-table thead th { word-break: keep-all; }

/* 3-6. 표 캡션 — 섹션 제목이 같은 내용을 이미 말하므로 시각적으로만 숨긴다(스크린리더 유지).
        기존 규칙은 .pledge-overview / .pledge-status(=article) 스코프라 탭2의 분야 패널처럼
        그 article 밖에 있는 표에는 안 걸린다. 페이지 스코프로 올려 전 탭을 덮는다. */
/* 2026-08-18 — 같은 이유로 나머지 4화면도 함께 숨긴다(사용자 지적: 「이런 설명들 빼」).
   전부 운영 미오픈 화면이고, 표 위 섹션 제목이 같은 내용을 이미 말한다.
   ★삭제가 아니라 시각적 숨김이다 — `<caption>` 은 표의 접근성 이름이라 지우면
     낭독기 사용자가 그 표가 무슨 표인지 알 수 없다(KWCAG·2026-06 재심사 통과 조건). */
.pledge-overview-page .data-table__caption,
.pledge-status-page .data-table__caption,
.pledge-budget-page .data-table__caption,
.pledge-ledger-page .data-table__caption,
.vision-core-page .data-table__caption,
.manifesto-system-page .data-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   4. 공약사업 추진현황 (pledge-status)
   ========================================================================== */

/* 4-1. 도넛 = 이행률 게이지. [2026-08-18] 옛 화면(민선8기 15570) 구조를 되살리면서
        값을 임기 초반 가정 임시값 6.5%로 맞췄다 — (완료 2 + 이행 후 계속 추진 3) / 77.
        원 둘레 = 2 * pi * 72 = 452.389.  452.389 * 6.5% = 29.4  (나머지 423.0)
        ※ 실적이 나오면 이 값과 pledge-status.html 의 이행률·완료도 숫자를 함께 바꾼다.
          (중간에 「계속 48/77 = 62.3% 구성비」로 쓰던 시기가 있었다 — 지금은 이행률이다) */
.pledge-status-page .ps-pie.is-inview .ps-chart__fill { stroke-dasharray: 29.4 423.0; }
@media (prefers-reduced-motion: reduce) {
  .pledge-status-page .ps-chart__fill { stroke-dasharray: 29.4 423.0; }
}

/* 4-2. 추진시기 3스텝 — .ps-steps 는 5칸 그리드 전제라 3개면 두 칸이 빈다 */
.pledge-status-page .ps-steps--n3 { grid-template-columns: repeat(3, 1fr); }
.pledge-status-page .ps-steps--n3 .ps-step__cnt { word-break: keep-all; text-align: center; color: #5b606b; }   /* 2026-08-13 Stage4 — 6785 와 동일 사유 */
/* 기존 .ps-step:nth-child(3) 은 「흰 배경 + 핑크 테두리」다. 5단계 완료도에서 현재 단계를 짚던
   표시라 3칸짜리 추진시기에 그대로 두면 「장기가 선택됨」으로 읽힌다. 총괄현황 추진시기 도넛
   (.po-ring--c1/c2/c3) 과 같은 색을 써서 단기·중기·장기를 대등하게 보이게 한다. 신규 색 0. */
.pledge-status-page .ps-steps--n3 .ps-step { border: 0; }
/* 2026-08-13 Stage4 — 명도대비. 틴트가 글자와 같은 색이라 알파 .08 에서 단기 4.45 / 장기 4.30 으로
   4.5 에 못 미쳤다(2건). 색상은 그대로 두고 알파만 .08 → .03 으로 낮춰 4.82 / 7.37 / 4.59 확보.
   글자색(#d51d5b·#5b3fa8·#2e73c8)은 총괄현황 도넛과 짝이라 바꾸지 않는다. */
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(1) { background: rgba(213, 29, 91, .03); }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(1) .ps-step__name,
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(1) .ps-step__pct { color: #d51d5b; }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(1) .ps-step__icon { background: #d51d5b; color: #fff; border: 0; }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(2) { background: rgba(91, 63, 168, .03); }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(2) .ps-step__name,
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(2) .ps-step__pct { color: #5b3fa8; }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(2) .ps-step__icon { background: #5b3fa8; color: #fff; border: 0; }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(3) { background: rgba(46, 115, 200, .03); }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(3) .ps-step__name,
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(3) .ps-step__pct { color: #2e73c8; }
.pledge-status-page .ps-steps--n3 .ps-step:nth-child(3) .ps-step__icon { background: #2e73c8; color: #fff; border: 0; }
@media (max-width: 768px) {
  .pledge-status-page .ps-steps--n3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pledge-status-page .ps-steps--n3 .ps-step { padding: 14px 6px 16px; }
}
@media (max-width: 480px) {
  .pledge-status-page .ps-steps--n3 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .pledge-status-page .ps-status { flex-wrap: wrap; }
  .pledge-status-page .ps-pie { flex: 1 1 100%; max-width: none; }
}

/* 4-3. 분야별 카드 — 9자 서술형 라벨 대응 + 기준시점 안내가 긴 문장이라 블록 처리 */
.pledge-status-page .ps-area-title span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}
.pledge-status-page .ps-areacard__label b {
  font-size: 20px;
  line-height: 1.3;
  word-break: keep-all;
  text-align: center;
}
@media (max-width: 1024px) {
  .pledge-status-page .ps-area__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pledge-status-page .ps-area__list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pledge-status-page .ps-areacard { padding: 18px 10px 16px; }
}
@media (max-width: 420px) {
  .pledge-status-page .ps-area__list { grid-template-columns: 1fr; }
}

/* 4-4. 분야 탭 — 9자 라벨 */
.po-areatab__name { word-break: keep-all; text-align: center; }
@media (min-width: 769px) and (max-width: 1280px) {
  .po-areatab__name { font-size: 20px; }
}

/* 4-5. 사업별 이행현황 표 — 컬럼 6개(민선8기) → 4개(민선9기). min-width 재산정 */
.data-table--w3detail { min-width: 720px; }
.data-table--w3detail tbody td.po-cell-l { min-width: 300px; }
.ps-detail__note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: #5b606b;
  word-break: keep-all;
}
.ps-note {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--c-gray-100);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #5b606b;
  word-break: keep-all;
}

/* 4-6. 공약실천계획 수립과정 — 원문이 3열 2행(6박스)이다. 기존 .ps-proc 는 4열 8박스 전제라
        구분선·화살표 노드 규칙(nth-child(-n+4) / 4n)이 어긋난다. 3열용으로 다시 건다. */
/* ⚠ 특이도 주의 — 기존 규칙이 `.ps-proc__item:not(:nth-child(4n)):not(:last-child)::after` (0,3,1) 라
   `.ps-proc--n3 .ps-proc__item::after` (0,2,1) 로는 못 이긴다. 실제로 1920 에서 3번 박스 오른쪽에
   화살표 노드가 하나 더 붙어 컨테이너 밖으로 잘려 보였다(캡처로 발견). 클래스를 겹쳐 특이도를 올린다. */
.ps-proc.ps-proc--n3 { grid-template-columns: repeat(3, 1fr); }
.ps-proc.ps-proc--n3 .ps-proc__item { border-right: 0; border-bottom: 0; }
.ps-proc.ps-proc--n3 .ps-proc__item:not(:last-child)::after { content: none; }
.ps-proc.ps-proc--n3 .ps-proc__item:nth-child(-n+3) { border-bottom: 1px solid var(--c-line); }
.ps-proc.ps-proc--n3 .ps-proc__item:not(:nth-child(3n)) { border-right: 1px solid var(--c-line); }
/* ⚠ display 도 반드시 되걸어야 한다 — style.css:7098 이 `@media (max-width:1280px)` 안에서
   `:not(:nth-child(4n)):not(:last-child)::after { display:none }` 를 건다. 4열 전제 규칙이라
   3열 6박스에서는 4번 박스만 살아남아 04↔05 사이에 화살표가 하나만 뜬다(1280 캡처로 발견).
   미디어쿼리는 특이도를 안 올리므로 여기서 display 를 명시하면 전 폭에서 이긴다. */
.ps-proc.ps-proc--n3 .ps-proc__item:not(:nth-child(3n)):not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-white) url(../images/icons/ic-stepper-arrow.svg) no-repeat center / 13px 13px;
  border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  z-index: 2;
}
.ps-proc.ps-proc--n3 .ps-proc__title { min-height: 0; word-break: keep-all; }
.ps-proc__details { margin: 6px 0 0; padding: 0; list-style: none; text-align: left; width: 100%; }
.ps-proc__details li {
  position: relative;
  padding-left: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: #5b606b;
  word-break: keep-all;
  margin-top: 4px;
}
.ps-proc__details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9aa0ab;
}
@media (max-width: 1024px) {
  .ps-proc.ps-proc--n3 { grid-template-columns: repeat(2, 1fr); }
  .ps-proc.ps-proc--n3 .ps-proc__item { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .ps-proc.ps-proc--n3 .ps-proc__item:nth-child(odd) { border-right: 1px solid var(--c-line); }
  .ps-proc.ps-proc--n3 .ps-proc__item:nth-child(n+5) { border-bottom: 0; }
  /* 2열로 접히면 화살표를 전부 끈다. 위 3열 규칙과 같은 셀렉터를 써야 특이도가 같아져
     나중 선언인 이쪽이 이긴다 (`.ps-proc__item::after` 만으로는 특이도가 낮아 못 이긴다) */
  .ps-proc.ps-proc--n3 .ps-proc__item:not(:nth-child(3n)):not(:last-child)::after,
  .ps-proc.ps-proc--n3 .ps-proc__item::after { content: none; display: none; }
}
@media (max-width: 600px) {
  .ps-proc.ps-proc--n3 { grid-template-columns: 1fr; }
  .ps-proc.ps-proc--n3 .ps-proc__item { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .ps-proc.ps-proc--n3 .ps-proc__item:last-child { border-bottom: 0; }
}

/* 4-7. 원칙·점검 목록 — 색 세로선 callout 금지(lessons #8). 테두리 전체 + 원형 불릿. */
.ps-principles {
  margin: 0;
  padding: 22px 26px;
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.ps-principles li {
  position: relative;
  padding-left: 16px;
  font-size: 17px;   /* [FIX-TYPO-20260814] 16→17 — 운영 신규계열 본문(.post-view__body p·.mf-desc p) 17px 에 맞춤 */
  line-height: 1.7;
  color: var(--c-text-body);
  word-break: keep-all;
}
.ps-principles li + li { margin-top: 8px; }
.ps-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
}
.ps-chg + .ps-principles { margin-top: 20px; }
/* [FIX-TYPO-20260814:START] 본문 17px 은 넓은 화면 전용. ≤1280 은 종전 16px 유지.
   아래 ≤600(15px) 블록보다 앞이라 캐스케이드가 17→16→15 로 내려간다. */
@media (max-width: 1280px) {
  .ps-principles li { font-size: 16px; }
}
/* [FIX-TYPO-20260814:END] */
@media (max-width: 600px) {
  .ps-principles { padding: 18px 18px; }
  .ps-principles li { font-size: 15px; }
}

/* 4-8. 변경절차 계열 플로우 — 3박스 변형(이행 완료) / 아이콘 없는 박스 / 연도 박스
   ⚠ 기존 규칙은 ≤1280 에서 `.ps-chg{flex-wrap:wrap}` + `.ps-chg__item{flex:calc(50% - 22px)}` 로 접는다.
      항목 사이에 34px 짜리 화살표 `.ps-chg__connector` 가 끼어 있어 50%+34px 가 한 줄에 안 들어가고,
      숨김 규칙은 `:nth-child(4)` 하나뿐이라 1280 에서 「박스1 + 화살표」 / 「박스2 박스3」 /
      「화살표 + 박스4」 로 어긋난다(캡처로 발견 — 수치 검사는 넘침이 아니라서 통과시킨다).
      1280 이하는 flex 대신 grid 로 바꿔 칸을 고정하고 장식용 화살표는 접는다. */
.ps-chg__item--plain { gap: 0; }
.ps-chg--n3 .ps-chg__item,
.ps-chg--years .ps-chg__item { flex: 1 1 0; min-width: 0; }
.ps-chg--years .ps-chg__head { gap: 8px; }
.ps-chg--years .ps-chg__num { font-size: 18px; }
.ps-chg__title { word-break: keep-all; }
.ps-chg__title small { font-size: 15px; font-weight: 500; color: #777676; }
@media (max-width: 1280px) {
  .pledge-status-page .ps-chg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pledge-status-page .ps-chg--n3 { grid-template-columns: repeat(3, 1fr); }
  .pledge-status-page .ps-chg__item { flex: none; min-width: 0; width: auto; }
  .pledge-status-page .ps-chg__connector { display: none; }
}
@media (max-width: 768px) {
  .pledge-status-page .ps-chg,
  .pledge-status-page .ps-chg--n3 { grid-template-columns: 1fr; gap: 8px; }
}

/* 4-8b. kv 표 — 라벨 열이 과하게 넓어지지 않게 폭을 고정한다 */
.pledge-status-page .data-table--kv tbody th[scope="row"] { width: 190px; }
@media (max-width: 600px) {
  .pledge-status-page .data-table--kv tbody th[scope="row"] { width: 108px; min-width: 108px; }
}

/* 4-9. 주민배심원단 · 공약이행평가단 2단 카드
        ※ 두 단의 필드명이 다르다(운영방법 / 구성방법). 라벨을 통일하지 말 것 — 04 4-2 */
.ps-kvgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.ps-kvcard {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.ps-kvcard__title { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--c-text-default); }
.ps-kvcard .data-table--kv tbody th[scope="row"] { min-width: 104px; font-size: 15px; }
.ps-kvcard .data-table--kv tbody td { font-size: 15px; line-height: 1.6; word-break: keep-all; }
@media (max-width: 900px) { .ps-kvgrid { grid-template-columns: 1fr; } }

.ps-subtitle { margin: 32px 0 14px; font-size: 20px; font-weight: 700; color: var(--c-text-default); }


/* ==========================================================================
   5. 인쇄 — 탭은 종이에서 의미가 없다. 숨은 패널을 전부 펼쳐 전문이 인쇄되게 한다.
      (P3 8-3: 검증 게이트에 인쇄가 빠져 있다는 지적 반영)
   ========================================================================== */
@media print {
  .pledge-status-page .ds-tabs,
  .pledge-status-page .po-areatabs { display: none !important; }
  .pledge-status-page .ds-panel[hidden],
  .pledge-status-page .po-areapanel[hidden] { display: block !important; }
  .pledge-status-page .ps-chg__connector { display: none !important; }
  .po-block--hero { width: auto; left: auto; margin-left: 0; min-height: 0; }
  .po-hero__bg, .po-hero__dim { display: none; }
  .po-block--hero .po-block__title--hero,
  .po-hero__eyebrow,
  .aw-hero .po-hero__sub { color: #111 !important; }   /* 2026-09-03 수정 — 히어로 서브문장도 인쇄 시 검정 */
}


/* ==========================================================================
   ── css_W2.css  (18,659B · sha256 0ca2caa723b7c4c6)
   W2 공약사업 목록·민선9기 비전. --po-f* 를 참조만 한다(정의 없음).
   ========================================================================== */
/* ============================================================================
   css_W2.css — W2(공약사업 목록 · 민선9기 비전) 추가분
   생성: 2026-08-13 · 담당: W2

   ★ 이 파일은 Stage 2 에서 `css/style.css` **말미에 그대로 이어붙인다.**
     (신규 CSS 파일을 늘리지 않는다 — D-2. 지금 별도 파일인 것은 병렬 작업 중
      style.css 를 여러 담당자가 동시에 건드리지 않기 위한 임시 조치다.)
     병합 후 pledge-list.html / vision.html 의 <link ... _work/css_W2.css> 두 줄을 삭제할 것.

   [지킨 것]
   · 기존 규칙 수정·삭제 0. 추가만 한다.
   · 새 색·새 폰트 0. 분야색은 이 파일이 정의하지 않고 W3 의 `--po-f1`~`--po-f5` 를
     참조하기만 한다(2026-08-13 리드 판정 — 아래 §1).
   · border-left 색상 세로선 callout 0 (lessons #8).
   · 박스 높이는 내용에서 역산 — 고정 height 로 내용을 담는 상자 0.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   §1. 민선9기 5대 분야 색 — ★정의하지 않는다. W3 의 `--po-f1`~`--po-f5` 를 쓴다.

   2026-08-13 리드 판정(`44_리드판정_분야토큰.md`) 으로 확정됐다.
   이 파일이 처음 정의했던 `--po-future/youth/education/senior/dignity` 5개는
   **폐기**했다 — 그 매핑이 `#5B3FA8`(운영 CSS 주석에 「구 violet」로 이미 교체됐다고
   적힌 옛 색)과 `#B02C94`(기존 토큰에 없는 색)를 되살리고 있었다.

   확정 토큰은 `_work/css_W3.css` §1 이 **단 한 곳에서** 정의한다.
   (같은 토큰을 두 파일이 정의하면 Stage 2 병합 후 나중 선언이 이겨 예측 불가해진다.)
     --po-f1  var(--c-blue-500)   #1342A6  미래를 그리는 중구 (19)
     --po-f2  var(--c-pink-500)   #C40051  청년이 꿈꾸는 중구 (7)
     --po-f3  var(--c-mint)       #018582  교육이 든든한 중구 (10)
     --po-f4  var(--c-indigo-700) #2A2E43  노후가 편안한 중구 (9)
     --po-f5  var(--c-ai-purple)  #4900AE  품격이 가득한 중구 (32)
   W3 의 정의 스코프에 `.pledge-list-page` 가 이미 들어 있으므로 이 페이지에서 바로 상속된다.

   ⚠ 명도대비 — 흰 글자 기준 실측값(_work/72_verify_W2.py 가 매 실행 재계산):
     f1 8.91 / f2 6.06 / f3 4.49 / f4 13.37 / f5 11.08
     **f3(민트 #018582) = 4.49 로 AA 4.5 에 미달한다.**
     그래서 이 파일은 분야색을 **장식(마커·테두리)** 에만 쓰고 글자색으로 쓰지 않는다.
     장식·UI 요소 기준 3:1 은 5색 모두 통과한다.

   ★ 신규 페이지가 늘면 W3 §1 의 셀렉터 목록에 한 줄 추가한다(여기가 아니다).
   --------------------------------------------------------------------------- */

/* 분야 번호 → --c 로 접는 매핑. 앵커 칩·섹션 마커가 공통으로 쓴다.
   수식자 이름은 W3(`.po-areacard--f1` 등)와 같은 `--f1`~`--f5` 방식으로 맞췄다 */
.pl-anchor--f1, .pl-section--f1 { --c: var(--po-f1); }
.pl-anchor--f2, .pl-section--f2 { --c: var(--po-f2); }
.pl-anchor--f3, .pl-section--f3 { --c: var(--po-f3); }
.pl-anchor--f4, .pl-section--f4 { --c: var(--po-f4); }
.pl-anchor--f5, .pl-section--f5 { --c: var(--po-f5); }


/* ---------------------------------------------------------------------------
   §2. 5대 분야 히어로 + 분야 바로가기 고정 바   (2026-08-27 전면 교체)

   종전 : 취임사 강조 인용(.inaug-highlight) + 일러스트 카드 sticky 바(.pl-anchors)
   현재 : 공약사업 총괄현황과 같은 히어로 밴드(.po-block--hero)를 그대로 쓰고,
          「상단 고정」 기능은 별도의 얇은 바(.pl-stickybar)가 맡는다.

   왜 둘로 나눴나 — 히어로는 100vw 풀블리드 + overflow:hidden 이라 밴드 자체를 상단에
   고정할 수 없다(sticky 는 overflow 조상 안에 갇히고, 428px 밴드를 고정하면 화면을 다 먹는다).
   그래서 「히어로 카드 = 앵커 링크」 + 「히어로를 지나면 나타나는 얇은 고정 바」 2단으로 간다.

   ★ 신규 색 0 — 분야색은 기존 --po-f1~f5(:8439), 나머지도 전부 기존 토큰.
   ★ 종전 .pl-anchors / .pl-anchors__* / .pl-anchor* 규칙은 매칭 대상이 사라져 삭제했다.
     단 `.pl-anchor--f1 { --c }` 매핑(바로 위)은 `.pl-section--f1` 과 한 몸이라 남긴다.
   ★ 5대 핵심공약(.vc-index-nav)은 이번 지시 범위 밖이라 그쪽 규칙은 손대지 않았다.
   --------------------------------------------------------------------------- */

/* ── (a) 히어로 — 총괄현황 규칙(.po-block--hero :6132)을 그대로 상속받고,
       「카드가 링크」인 차이만 .pl-hero 스코프로 덧댄다.
       ★ 총괄현황 카드는 정적 <li> 다 — 아래 상태 규칙이 그쪽으로 새면 안 되므로
         반드시 .pl-hero 로 스코프를 묶는다. */
.pl-hero .po-herocards > li { display: flex; }
.pl-hero .po-herocard {
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pl-hero .po-herocard:hover,
.pl-hero .po-herocard:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(20, 30, 60, 0.12);
}
.pl-hero .po-herocard:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.pl-hero .po-herocard:hover .po-herocard__name { color: var(--c); }
@media (prefers-reduced-motion: reduce) {
  .pl-hero .po-herocard { transition: none; }
  .pl-hero .po-herocard:hover, .pl-hero .po-herocard:focus-visible { transform: none; }
}

/* ── (b) 분야 바로가기 고정 바 — 히어로를 지나 스크롤됐을 때만 등장.
       .is-stuck 은 common.js 의 공용 sentinel + IntersectionObserver(initStuck)가 붙인다.
       position:fixed 라 흐름에 자리를 차지하지 않는다 → 등장/퇴장에 콘텐츠가 밀리지 않고
       문서 높이도 안 변해 08-24 접힘 발진(오실레이션 :10744)이 구조적으로 생길 수 없다.
       바탕은 5대 핵심공약 고정 바와 같은 레시피(흰 반투명 + blur 9px) — 신규 색 0.
   ⚠ --c 폴백은 반드시 **조상**(.pl-stickybar)에 둔다. `.pl-stickybar__item { --c: … }` 로 두면
     `.po-areacard--f1`(:8446)과 특이도가 같은데 선언이 뒤라서 수식자를 전부 이겨
     5개가 모두 f1 색으로 칠해진다(종전 .pl-anchors 에서 실제로 났던 사고). */
.pl-stickybar {
  --c: var(--po-f1);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 8px 0;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity .2s ease, transform .25s ease, visibility .25s;
}
.pl-stickybar.is-stuck { opacity: 1; visibility: visible; transform: none; }
.pl-stickybar__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: var(--content-w-sub, 1540px);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  list-style: none;
}
.pl-stickybar__item { display: flex; }
.pl-stickybar__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;                     /* flex 자식 축소 허용 — 긴 분야명이 칸을 밀지 않게 */
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--c-text-default);
  transition: background-color .18s ease;
}
.pl-stickybar__link:hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.pl-stickybar__name {
  min-width: 0;
  font-family: var(--ff-title);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-stickybar__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--c);
}
.pl-stickybar__num em { font-style: normal; font-size: 12px; font-weight: 500; color: #111; letter-spacing: 0; }
/* ≤1024 — 5칸 가로 배치가 좁아 글자가 뭉개진다. 종전과 같이 얇은 select(.area-mobile-select,
   common.js 생성)가 대신 맡는다. 바를 숨겨도 sentinel 은 흐름에 남아 .is-stuck 은 계속 붙는다. */
@media (max-width: 1024px) {
  .pl-stickybar { display: none; }
}

/* ---------------------------------------------------------------------------
   §3. 분야 섹션 제목
   --------------------------------------------------------------------------- */
/* 앵커 이동 시 상단 고정 요소에 제목이 가리지 않게.
   ★값은 고정 요소 **최악 높이** + 여백이다(눈대중 아님). 실측 = _work/77_stickybar_sweep.py
   2026-08-27 수정 — 고정 요소가 「일러스트 카드바(.pl-anchors)」에서 「얇은 바(.pl-stickybar)」로
   바뀌며 최악 높이가 175.8 → 61 로 낮아졌다. 종전 184 를 그대로 두면 앵커 이동 때 제목이
   화면 한참 아래에 떨어져 어디로 갔는지 알기 어렵다.
     ≥1025 고정 바 최악 61px + 여백 27 → 88
     ≤1024 고정 select      46px + 여백 38 → 84 (종전값 유지 — select 높이는 안 바뀌었다)
   고정 요소 구조를 바꾸면 스윕 스크립트를 다시 돌릴 것(전 폭 가림 ≤0 을 검사한다) */
.pl-section { scroll-margin-top: 88px; }
.pl-section:focus { outline: none; }
.pl-section:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 6px; }

.board-content .pl-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* 2026-08-24 수정 — [Figma 반영] 사각 불릿 → 5대 핵심공약(vision-core.html .vc-field__rank)과
   같은 분야색 원형 숫자 배지로 통일 — 두 페이지 스크롤 체감·표식 디자인을 맞춘다.
   숫자는 HTML 을 건드리지 않고 ::before content 로 넣는다(.pl-section--f1~f5 가 이미 --c 를 준다). */
.pl-section__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2026-08-24 수정 — 5대 핵심공약 .vc-field__rank(40×40)와 동일 크기로 맞춤 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.pl-section--f1 .pl-section__mark::before { content: "01"; }
.pl-section--f2 .pl-section__mark::before { content: "02"; }
.pl-section--f3 .pl-section__mark::before { content: "03"; }
.pl-section--f4 .pl-section__mark::before { content: "04"; }
.pl-section--f5 .pl-section__mark::before { content: "05"; }
/* 2026-08-24 수정 — [핵심공약과 통일] 섹션 제목 아래 두꺼운 분야색 라인(3px)
   — vision-core .vc-field__head 와 같은 표식.
   2026-08-25 수정 — 선이 두 줄로 겹쳐 보였다(사용자 지적: 「왠지 중복같아」).
   제목 밑 분야색 3px + 18px 여백 + 표 위 검정 2px(.board-content .data-table) 이 연달아 서서,
   같은 구획을 두 번 긋는 꼴이었다. → 제목 밑 선을 빼고 **분야색 표식 역할을 표 위 선에 넘긴다**
   (아래 `.pledge-list-page .board-content .data-table` 참조). padding-bottom 은 남긴다 —
   제목↔표 간격(12+18=30px)을 만드는 값이라 지우면 표가 제목에 붙는다.
   ※ 접힌 상태는 표가 없어 선까지 사라지면 헤더가 허공에 뜬다 → 그때만 되살린다(맨 아래 규칙). */
.board-content .pl-section__title {
  padding-bottom: 12px;
  border-bottom: 0;
}
/* 2026-08-27 수정 — 인용 문구·카드바가 사라져 `.pledge-list-page .pl-anchors{margin-top}` 삭제.
   상단 간격은 히어로 밴드의 margin-bottom 이 만든다. */

/* ⚠ `pledge-list` 는 .board-content **그 요소 자신의** 두 번째 클래스다
     (<div class="board-content pledge-list">). 후손 셀렉터 `.board-content .pledge-list`
     로 쓰면 아무것도 매칭하지 못한다 — 실제로 한 번 이 실수로 캡션이 안 숨겨졌다.
     .po-hero 와 같은 유형(존재하지 않는 셀렉터가 조용히 통과) — 매칭 여부를 검사로 못 박았다.

   표 캡션 — h2 가 같은 내용(분야명·건수)을 이미 보여 주므로 회색 중복 텍스트는 숨긴다.
   지우지 않고 "화면에서만" 숨기는 이유는, 스크린리더 사용자가 표 단위로 건너뛸 때
   캡션만으로 어느 분야 표인지 알아야 하기 때문이다.
   운영에 같은 패턴이 이미 있다 — style.css:7487 `.pledge-status .data-table__caption` */
.board-content.pledge-list .data-table__caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 가로스크롤 안내 (실제로 스크롤되는 폭 ≤599px 에서만 노출 — §5-1) */
.pl-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-sub);
}
/* 스크롤 영역은 키보드로도 움직일 수 있어야 한다 — tabindex="0" 를 준 만큼 초점 표시를 준다 */
.board-content.pledge-list .data-table-wrap:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.pl-section__count {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-sub);
}


/* ---------------------------------------------------------------------------
   §4. 공약 표 (.data-table--pledge)

   ★★컬럼폭을 `<col>` 에 주면 안 된다 — 운영 규칙이 769~1280px 에서 통째로 무효화한다.
      style.css:7571~7572
        @media (min-width: 769px) and (max-width: 1280px) {
          .board-content .data-table col { width: auto !important; }
        }
      (colgroup 인라인 px 폭이 태블릿에서 width:100% 를 막던 문제를 푸는 기존 규칙이다.)
      table-layout:fixed + 전 col width:auto = **4칸 균등분배**가 되어, 실측하면
      1024px 에서 연번 칸이 230px 를 먹고 사업명도 230px 로 눌린다(글자는 안 넘쳐서
      넘침 검사는 통과한다 — lessons #19 의 "안 넘쳤지만 짓눌린" 바로 그 상태).
      기존 규칙은 건드리지 않는다(다른 표 전부가 이 규칙에 의존한다).
      → **폭을 `thead th:nth-child()` 에 준다.** table-layout:fixed 는 col 폭이 없으면
        첫 행 셀 폭으로 칼럼을 정하므로 결과가 같고, 저 규칙과 부딪히지 않는다.

   폭은 내용에서 역산했다(눈대중 아님).
     연번   3자리 + 좌우 패딩 32  → 64px
     구분   「신규/계속」 배지 폭 + 패딩 → 78px
     부서   최장 「도심재정비전략추진단」 자연폭 121~137px + 패딩 32 → 190px
   --------------------------------------------------------------------------- */
.board-content .data-table--pledge { table-layout: fixed; }
.board-content .data-table--pledge thead th:nth-child(1) { width: 64px; }
.board-content .data-table--pledge thead th:nth-child(3) { width: 78px; }
.board-content .data-table--pledge thead th:nth-child(4) { width: 190px; }
/* 사업명 머리글은 칸이 넓다(1440 에서 964px). 내용이 왼쪽정렬인데 머리글만 가운데면
   서로 다른 열처럼 보인다 — 머리글도 왼쪽으로 맞춘다(GLOBAL-TABLE-ALIGN 의 취지대로) */
.board-content .data-table--pledge thead th:nth-child(2) { text-align: left; }

/* 연번 칸 — 세로줄 인덱스. 기본 th[scope=row] 의 좌측정렬·회색배경을 그대로 쓰되
   77행을 훑는 눈금이므로 숫자만 또렷하게 */
.board-content .data-table--pledge tbody th[scope="row"] {
  font-weight: 600;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* 사업명 — 최장 55자. 줄바꿈은 어절 단위로 끊는다(한글 낱말 중간 끊김 방지) */
.board-content .data-table--pledge tbody td.pl-cell-name {
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 괄호 없는 초장문 대비 — .board-content 상속과 동일 */
  line-height: 1.55;
}
/* ⚠ `word-break: keep-all` 은 크롬에서 `overflow-wrap: anywhere` 를 이긴다(실측).
   즉 띄어쓰기 없는 부서명은 **어떤 경우에도 안 쪼개진다** — 칸 폭이 모자라면 그대로 삐져나간다.
   그래서 부서 칼럼 폭은 눈대중이 아니라 최장 부서명의 자연폭에서 역산한다(lessons #9).
     실측(_work/73_diag_W2.py) @768·360, 14px:
       도심재정비전략추진단   121.0px  ← 공백 없음 = 쪼갤 수 없음. 이 값이 하한을 정한다
       어르신장애인복지과     108.9px  ← 〃
       청소행정과 외 4개 부서 128.2px  ← 공백 있음 = 줄바꿈으로 흡수됨
     필요 칸폭 = 121.0 + 좌우 패딩 24 = 145.0 → 152px (여유 7px) */
/* 부연설명 — 원문에서 ‧ / → 로 시작하던 부기 행. 낭독 시 사업명과 분리되게 블록 */
.pl-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-sub);
  word-break: keep-all;
}
.board-content .data-table--pledge tbody td.pl-cell-dept {
  word-break: keep-all;
  line-height: 1.5;
}

/* 신규 / 계속 배지 — 색만으로 구분하지 않는다(배지 안에 글자가 있다) */
.pl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.pl-badge--new  { background: var(--c-primary); color: var(--c-white); font-weight: 700; }   /* 6.06:1 */
/* 2026-08-24 수정 — [분야색 통일] 신규 배지를 전 섹션 핑크가 아니라 그 섹션 분야색으로.
   .pl-section--fN 이 --c 를 주므로 섹션 안에서는 분야색이 이긴다(5색 모두 흰 글자 4.48:1↑). */
.pl-section .pl-badge--new { background: var(--c); }
/* 「계속」은 「신규」보다 약하게 보여야 하지만 글자가 안 읽히면 안 된다.
   회색 바탕(#F5F5F5)에 --c-text-sub(#777676) 를 얹으면 4.11:1 로 AA(4.5) 미달이라
   글자색은 --c-text-body 로 두고 **굵기(700→600)와 바탕색**으로 위계를 준다. 15.1:1 */
.pl-badge--cont { background: var(--c-gray-150); color: var(--c-text-body); font-weight: 600; border: 1px solid var(--c-line); }

/* 하단 기준시점 안내 */
.board-content.pledge-list .data-note strong,
.board-content .data-note strong { font-weight: 700; color: var(--c-text-default); }


/* ---------------------------------------------------------------------------
   §5. 반응형

   ≤1024 : 칩을 **컴팩트 알약 가로스크롤**로 바꾼다.
           원래는 5열→3열 그리드였는데, 5개가 2줄이 되면서 **sticky 줄 높이가 287px** 이 됐다.
           860px 뷰포트의 1/3 을 고정 점유하고, 앵커로 이동하면 섹션 제목이 통째로
           그 뒤에 가렸다(실측 155px 가림 — 76_anchor_and_edges.py). sticky 요소는
           높아지면 안 되므로 3열 그리드를 버리고 ≤768 과 같은 한 줄 알약으로 통일한다.
           (운영 `.po-areatabs` 도 같은 사상이다 — 좁아지면 한 줄 가로스크롤)
   ≤768  : 위 알약 스타일 유지 + 표 처리가 달라진다
           표는 운영 원칙대로 **카드 변환하지 않고 가로스크롤**(style.css:5790~5791).
           단 min-width 를 주지 않으면 사업명 칸이 100px 아래로 눌려 55자가
           15줄이 된다 → 표에 min-width 를 줘 .data-table-wrap 이 스크롤하게 한다.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 2026-08-27 수정 — 종전 칩(.pl-anchors/.pl-anchor*)의 ≤1024 규칙 삭제.
     현재 ≤1024 는 .pl-stickybar 를 숨기고 select(.area-mobile-select)가 맡는다. */
  /* 칩줄이 알약 한 줄(54.5px)로 낮아졌으니 앵커 여백도 같이 내린다 */
  .pl-section { scroll-margin-top: 84px; }
}

/* 표 처리는 ≤768 그대로 둔다 — 칩 레이아웃과 분리된 관심사다.
   (칩을 ≤1024 로 올리면서 이 블록까지 딸려 올라가면 1024 에서 연번·부서 칸이
    까닭 없이 좁아진다. 실제로 한 번 그렇게 붙었다가 되돌렸다) */
@media (max-width: 768px) {
  .pl-section__mark { width: 26px; height: 26px; font-size: 12px; }
  .pl-section__count { font-size: 13px; }

  /* 표 — 4열 최소폭. 부서 152px 은 위 §4 의 자연폭 역산값이다(눈대중 아님).
     사업명 = 560 - 44 - 64 - 152 = 300px 확보 (14px 기준 한 줄 18~20자) */
  .board-content .data-table--pledge { min-width: 560px; }
  .board-content .data-table--pledge thead th:nth-child(1) { width: 44px; }
  .board-content .data-table--pledge thead th:nth-child(3) { width: 64px; }
  .board-content .data-table--pledge thead th:nth-child(4) { width: 152px; }
  /* 2026-08-17 수정 — 44px 열에 좌우 12px 패딩이면 글자칸이 20px 뿐이라 헤더 「연번」
     (22.48px)이 2.48px 넘친다(320~768 전 대역). 이 열만 패딩을 좁힌다. */
  .board-content .data-table--pledge thead th:nth-child(1) { padding-left: 6px; padding-right: 6px; }
  .pl-note { font-size: 13px; }
}


/* ---------------------------------------------------------------------------
   §6. 인쇄 — 77행이 종이에서 끊기지 않게
   --------------------------------------------------------------------------- */
@media print {
  .pl-stickybar { display: none !important; }   /* 2026-08-27 수정 — .pl-anchors 대체 */
  .board-content .data-table--pledge { min-width: 0; }
  .board-content .data-table-wrap { overflow-x: visible; }
  .pl-section { break-inside: auto; }
  .data-table--pledge tr { break-inside: avoid; }
  .data-table--pledge thead { display: table-header-group; }
}
/* ---------------------------------------------------------------------------
   §5-1. 가로스크롤 안내 — "진짜로 스크롤되는 폭"에서만 띄운다

   ≤768 을 조건으로 쓰면 768px 에서도 안내가 뜨는데, 그 폭에서는 표가 전부 보인다
   (실측: 768 에서 wrap 스크롤 0px). "밀어 보세요"라고 해 놓고 밀 것이 없으면 거짓말이다.
   실제 임계값을 재서 조건으로 삼는다 —
     wrap 폭 = .board-page = calc(100% - 40px), 표 min-width = 560px
     → 100% - 40 < 560, 즉 뷰포트 < 600px 에서만 스크롤이 생긴다
     실측: 599px 스크롤 1px / 600px 스크롤 0px / 768px 스크롤 0px
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .pl-scroll-hint { display: block; }
}


/* ==========================================================================
   ── css_W4.css  (4,441B · sha256 32bc9ae0d22625e1)
   W4 동별 공약·수상현황 공모실적. 3블록(풀블리드 복구·:has() 정합·모바일 clip 해제).
   ========================================================================== */
/* ============================================================================
   css_W4.css — W4(동별 공약 · 수상현황 공모실적) 골격 정합화에 따른 CSS 보정
   작성: 2026-08-13 / Stage 1 W4
   ★ Stage 2 에서 css/style.css 말미에 "추가만" 병합한다. 기존 규칙 수정·삭제 금지.
   ★ 기존 토큰만 사용(--content-w-sub · --c-indigo-700). 새 색·새 폰트·신규 파일 0.
   ★ border-left 색상 세로선 callout 0 (lessons #8).

   [왜 필요한가]
   district-pledge.html 의 골격이 역전돼 있었다 —
     (기존) <main class="district-page"> > <div class="board-page">(page-header만) + <section class="pledge-board">
     (정합) <main class="board-page">   > <div class="district-page"> > page-header + sub-nav + pledge-board
   <main> 은 서버 템플릿이 class="board-page" 로 고정 emit 하므로(P1 §2-1-1 · P3 §2 정정)
   위 정합화는 선택이 아니라 강제다. 그 결과 .pledge-board 가 .board-page(max-width:1540)
   안쪽으로 내려와 풀블리드가 죽는다. 아래 ①②③ 이 그것을 원래 렌더로 되돌린다.
   ============================================================================ */


/* ① .pledge-board 풀블리드 복구 --------------------------------------------
   코드베이스 네이티브 패턴을 그대로 쓴다 — .greeting-hero(:1891) · .mf-hero(:2267)
   · .vision-hero(:5222) 세 곳이 이미 운영 배포본에서 같은 3줄로 board-page 를 탈출한다.
   style.css:1887 주석이 이 규칙을 명문화하고 있다:
     "풀폭(100vw) 섹션은 .board-page 컨테이너 밖으로 확장 (mf-hero 패턴 동일)"
   이 3줄이 있어야 .pledge-board::before 의 좌측 인디고 bleed
   width:calc(max(0px,(100% - 1540)/2)) 가 다시 0 이상이 된다(1920 → 190px).
   -------------------------------------------------------------------------- */
.pledge-board {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}


/* ② padding-bottom 규칙의 셀렉터 교정 ---------------------------------------
   style.css:3765 의 `.district-page .board-page { padding-bottom: 0; }` 는
   골격 역전을 전제로 쓰인 것이라 정합화 후 영구 미매칭이 된다(조상↔자손 역전).
   같은 효과를 코드베이스 네이티브 :has() 로 되살린다 —
   .board-page:has(.greeting-hero)(:27) · :has(.inaug-hero)(:4194) 와 동일 형태.
   ※ Stage 2 병합 시 style.css:3765 원본 줄의 처리(주석화/삭제)는 병합 담당 판단.
     지금 이 파일은 "추가만" 하므로 원본을 건드리지 않았고, 남아 있어도 무해하다
     (매칭 0건이라 아무 효과가 없다).
   -------------------------------------------------------------------------- */
.board-page:has(.district-page) { padding-bottom: 0; }


/* ③ ≤768 에서 조상 clip 우회 -------------------------------------------------
   style.css:791 `@media(max-width:768px){ .board-page { overflow-x: clip; } }`
   가 100vw 자식을 잘라낸다. 같은 문제를 코드베이스가 이미 두 번 :has() 로 풀었다
   (:4530 inaug / :5600 vision). 셋째 사례로 동일하게 처리한다.
   키는 페이지 클래스가 아니라 히어로/밴드 블록 클래스를 쓴다 — 기존 2건과 일관되고
   래퍼 도입 여부와 무관하게 동작한다(P3 §2 「확정 수정안」 방침).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .board-page:has(.pledge-board) { overflow-x: visible; }
}


/* ④ 공약지도 짓눌림 — 규칙 추가 안 함 (검토 결과 불필요) --------------------
   처음엔 aspect-ratio 696/376 가드를 넣었다가 뺐다. 사유 2가지:
   1) style.css:3917 `.pledge-map__canvas img { width:100%; height:auto; display:block; }`
      가 이미 원본 비율을 보존한다. 6뷰포트 실측에서 렌더 비율 1.851 = 원본 비율 1.851
      로 전 구간 일치했다 — 왜곡 0건이라 고칠 것이 없다.
   2) 오히려 해롭다. 민선9기 지도 이미지가 696×376 이 아닌 치수로 오면 강제 비율이
      그 이미지를 왜곡시킨다 — 막으려던 결함을 내가 만드는 꼴이다.
   비율·높이 감시는 CSS 가 아니라 검증 하네스(_work/W4_verify.py V4)에 남겼다.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   ── css_W1.css  (21,269B · sha256 2d727eeea402c329)
   W1 매니페스토 3종. ★맨 뒤 고정 — .ms-* 가 base 와 동일 특이도라 순서로 이긴다.
   ========================================================================== */
/* ============================================================================
   css_W1.css — W1(매니페스토 그룹) 신규 CSS
   대상 페이지: manifesto.html / manifesto-rules.html / manifesto-system.html
   작성: 2026-08-13 · Stage 1 W1

   ★ 이 파일은 "작업용 분리본"이다. Stage 2 담당자가 css/style.css **말미에 추가만**
     하는 방식으로 병합한다(기존 규칙 수정·삭제 0). 신규 CSS 파일로 배포하지 않는다(D-2).
   ★ 병합 위치는 반드시 style.css 맨 뒤여야 한다 — 아래 (3) 블록의 일부 규칙이
     기존 규칙과 **같은 특이도**라서 뒤에 와야만 이긴다(근거는 각 블록 주석).

   토큰은 기존 것만 쓴다(common.css :120~155 정의 확인):
     --c-primary / --c-line / --c-white / --c-gray-100 / --c-gray-250
     --c-text-default / --c-text-body / --c-text-sub / --c-text-mute
     --c-indigo-50 / --c-indigo-700 / --ff-body / --gap-section
   금지 준수: border-left 색상 세로선 callout 0건(lessons #8) · 신규 색/폰트 0
   ============================================================================ */


/* ============================================================================
   (1) 래퍼 전환 보정 — .board-page.manifesto-page 대체
   ----------------------------------------------------------------------------
   페이지 클래스가 <main> 에서 본문 래퍼 <div> 로 내려가면서
     style.css:8024  @media(max-width:768px) .board-page.manifesto-page { overflow-x: visible; }
   가 영원히 매칭 실패한다(두 클래스가 서로 다른 요소에 있게 된다).

   단순 후손형(.board-page .manifesto-page)으로는 못 고친다 — 이 규칙의 목적은
   **조상(.board-page = <main>)의 clip 해제**이고(:791 .board-page{overflow-x:clip}),
   안쪽 래퍼에 visible 을 줘도 조상의 클립은 풀리지 않는다.

   해법 = :has() + 고유 자식 재선택. 이 코드베이스가 이미 같은 문제를 이 패턴으로
   두 번 풀어 운영 중이다:
     style.css:4530  .board-page:has(.inaug-hero)  { overflow-x: visible; }
     style.css:5600  .board-page:has(.vision-hero) { overflow-x: visible; }
   (:1887 주석 「운영 dev 규칙(main=board-page만)에 맞춰 page클래스 없이 고유 자식으로 재선택」)

   놓치면 ≤768px 에서 .mf-hero(100vw 풀블리드)의 양옆이 잘린다 — 실렌더로 확인할 것.
   원본 :8024 규칙은 **지우지 않는다**(추가만 원칙). 매칭 0건이라 무해하고,
   래퍼 전환을 되돌릴 경우의 안전망이 된다.
   ============================================================================ */
@media (max-width: 768px) {
  .board-page:has(.mf-hero) { overflow-x: visible; }
  /* 2026-08-24 수정 — 같은 함정. 5대 핵심공약의 회색 그라데이션 밴드(.vc-divider, 100vw)가
     .board-page 의 overflow-x:clip 에 잘려 양옆에 20px 씩 흰 여백이 남았다.
     ★ getBoundingClientRect 는 클리핑을 반영하지 않아 수치검증만으로는 통과한다 —
       이 유형은 반드시 렌더 캡처로 확인할 것(실제로 그렇게 놓쳤다). */
  .board-page:has(.vc-divider) { overflow-x: visible; }
}


/* ============================================================================
   (2) 관련 규정 — manifesto-rules.html 전용 컴포넌트
   ----------------------------------------------------------------------------
   출처: .artifacts/2026-08-13/열린구청장실_매니페스토개편/_data/03_규정전문_신규클래스.css
        (03_규정전문.html 과 한 벌. 원문 대조·역방향 검사 통과본)
   스코프: .regulation 하위로 한정 — 페이지 클래스가 아니라 **독립 컴포넌트 클래스**라
          manifesto-rules.html 본문 래퍼에는 페이지 클래스를 주지 않는다.
   기존 컴포넌트(.board-content .data-section / .data-table / .data-note)는
   style.css 규칙을 그대로 상속받으므로 여기서 재정의하지 않는다.
   ============================================================================ */

/* ── 스타일 없는 구조 훅 3종 ─────────────────────────────
   .reg-head / .reg-body / .reg-addenda 는 .data-section 의 여백·간격을 그대로 쓰고
   자체 스타일이 없다. 섹션을 구분해 선택하기 위한 훅으로만 둔다(삭제하지 말 것 —
   검증 스크립트 _verify_regulation.py 와 향후 목차 스크립트가 이 이름으로 찾는다). */

/* ── 표제부 메타 (소관 / 현행) ───────────────────────────── */
.regulation .reg-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 16px 20px;
  background: var(--c-gray-100);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.regulation .reg-meta__row { display: flex; align-items: baseline; gap: 10px; }
.regulation .reg-meta__label {
  flex: 0 0 auto;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  /* 2026-08-13 Stage4 — 구 var(--c-text-sub) #777676 은 흰 배경(4.53)에서만 통과.
     이 라벨은 --c-gray-100(#f9fafb) 박스 안이라 4.33 으로 미달했다(2건). */
  color: #5b606b;
}
.regulation .reg-meta__value {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-body);
}

/* ── 조(條) ───────────────────────────────────────────────── */
.regulation .reg-article { padding: 24px 0; border-top: 1px solid var(--c-line); }
.regulation .reg-article:first-of-type { border-top: 0; padding-top: 8px; }

.regulation .reg-article__title {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-text-default);
}
/* 조문 번호와 제목을 시각적으로 분리 — 괄호 대신 위계로 구분 */
.regulation .reg-article__no {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-sub);
  letter-spacing: -0.2px;
}
.regulation .reg-article__name { flex: 1 1 auto; min-width: 0; }

.regulation .reg-article__body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;   /* [FIX-TYPO-20260814] 16→17 — 운영 신규계열 본문 17px */
  line-height: 1.75;
  color: var(--c-text-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 항(項) ①②③ ────────────────────────────────────────── */
.regulation .reg-clause-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.regulation .reg-article__body + .reg-clause-list,
.regulation .reg-article__body + .reg-item-list { margin-top: 12px; }

.regulation .reg-clause {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 8px;
  align-items: start;
}
.regulation .reg-clause__no {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text-sub);
  text-align: left;
}
.regulation .reg-clause__text {
  font-family: var(--ff-body);
  font-size: 17px;   /* [FIX-TYPO-20260814] 16→17 — 운영 신규계열 본문 17px */
  line-height: 1.75;
  color: var(--c-text-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 항 안에 호 목록이 들어가는 경우 — 2열 그리드의 둘째 칸으로 정렬 */
.regulation .reg-clause > .reg-item-list { grid-column: 2; margin-top: 8px; }

/* ── 호(號) 1. 2. 3. ─────────────────────────────────────── */
.regulation .reg-item-list {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.regulation .reg-item-list > li {
  font-family: var(--ff-body);
  font-size: 17px;   /* [FIX-TYPO-20260814] 16→17 — 운영 신규계열 본문 17px */
  line-height: 1.75;
  color: var(--c-text-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-left: 4px;
}
.regulation .reg-item-list > li::marker { color: var(--c-text-sub); }

/* ── 개정 표기 (개정 2023.5.17.) ─────────────────────────── */
.regulation .reg-amend {
  margin-left: 4px;
  font-size: 14px;
  color: var(--c-text-sub);
  white-space: nowrap;
}

/* ── 제정·개정 이력 표 ───────────────────────────────────── */
/* caption 은 화면에서 숨기고 낭독기에만 전달 — .pledge-overview/.pledge-status 와 동일 관행
   (표 위 h3 「제정·개정 이력」이 이미 시각적 라벨 역할을 한다) */
.regulation .data-table__caption {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.regulation .reg-history { min-width: 560px; }
.regulation .reg-history tbody td:first-child,
.regulation .reg-history tbody td:nth-child(2) { white-space: nowrap; }

/* ── ★W1 추가분 — 조문 본문의 읽기 폭(measure) 상한 ────────────────────────
   위 03_규정전문_신규클래스.css 원본에는 없다. 실렌더에서 발견해 넣었다.
   `.board-page` 는 1440 에서 1296px · 1920 에서 1540px 이라, 상한이 없으면 조문 한 줄이
   한글 80~96자가 된다(권장 40~60자의 약 2배). 같은 사이트의 다른 장문 블록
   (`.mf-hero__desc` · `.mf-desc`)은 전부 폭을 제한해 가운데로 모으고 있어 관행과도 어긋난다.
   ≤1280 은 컨테이너가 이미 충분히 좁아 상한이 필요 없다.
   표(.data-table)에는 걸지 않는다 — 표는 열 폭이 데이터로 정해진다. */
@media (min-width: 1281px) {
  .regulation .reg-article__body,
  .regulation .reg-clause__text,
  .regulation .reg-item-list > li { max-width: 62em; }
}

/* ── 반응형 ───────────────────────────────────────────────── */
/* [FIX-TYPO-20260814:START] 본문 17px 은 넓은 화면 전용. ≤1280 은 종전 16px 유지.
   아래 ≤1024(15px)·≤640 블록보다 앞이라 캐스케이드가 17→16→15 로 내려간다. */
@media (max-width: 1280px) {
  .regulation .reg-article__body,
  .regulation .reg-clause__text,
  .regulation .reg-item-list > li { font-size: 16px; }
}
/* [FIX-TYPO-20260814:END] */
@media (max-width: 1024px) {
  .regulation .reg-article__title { font-size: 18px; }
  .regulation .reg-article__body,
  .regulation .reg-clause__text,
  .regulation .reg-item-list > li { font-size: 15px; }
}
@media (max-width: 640px) {
  .regulation .reg-meta { flex-direction: column; gap: 8px; padding: 14px 16px; }
  .regulation .reg-article { padding: 20px 0; }
  .regulation .reg-article__title { font-size: 17px; gap: 6px; }
  .regulation .reg-article__body,
  .regulation .reg-clause__text,
  .regulation .reg-item-list > li { font-size: 15px; line-height: 1.7; }
  .regulation .reg-clause { grid-template-columns: 20px 1fr; column-gap: 6px; }
  .regulation .reg-amend { display: inline-block; white-space: normal; }
}


/* ============================================================================
   (3) 관리체계·확정과정 — manifesto-system.html 전용 (.manifesto-system-page)
   ----------------------------------------------------------------------------
   설계 원칙: 플로우 도형은 **이미 배포된 3종을 재사용**하고 신규 CSS 를 최소화한다.
     A 공약관리 체계도 4단계   → .ps-proc-wrap / .ps-proc  (+ .ms-proc4 4칸 보정)
     B 공약실천계획 수립과정 6 → .jury-steps               (+ .ms-steps3 3열 보정)
     C 공약 변경절차 4단계     → .ps-chg                   (무보정)
     D 연도별 평가내용 4단계   → .ps-proc                  (+ .ms-proc4)
     E 이행 완료 3단계         → .ps-chg                   (무보정)
     주민참여·외부평가 정보    → .jury-info                (무보정)
   신규로 만든 것은 (a) 4칸/3열 격자 보정 (b) 박스 안 불릿 목록 (c) 소제목·목록 타이포
   (d) 이 페이지용 반응형 축소 미러 — 넷뿐이다.

   ★ (d)가 왜 필요한가: style.css:7800~ [2026-06-11] 반응형 축소 패스의 절반이
     `.pledge-status-page` / `.participation` 스코프다. 신규 페이지는 그 클래스가 없어
     모바일에서 ps-proc/ps-chg 의 20px 제목이 그대로 남는다. 같은 값으로 미러한다
     (새 값 도입 아님 — 기존 축소 규칙의 스코프 확장).
   ============================================================================ */

/* ── (3-a) .ps-proc 를 4칸으로 쓸 때의 격자 보정 ──────────────────────────────
   .ps-proc 는 8칸(4×2) 전제라 `:nth-child(-n+4){border-bottom}` 로 1행 밑줄을 긋는다.
   4칸만 넣으면 그 줄이 .ps-proc-wrap 의 아래 테두리와 겹쳐 이중선이 된다.
   ⚠ 특이도가 base 와 같은 (0,2,0) 이라 **이 파일이 style.css 뒤에 와야** 이긴다. */
@media (min-width: 1281px) {
  .ms-proc4 .ps-proc__item { border-bottom: 0; }
  /* 2026-08-24 수정 — 카드 안 「연도 ↔ 본문」 여백 축소(사용자 지시).
     .ps-proc__title 의 min-height:56px + justify-content:flex-end 가 본문을 아래로 밀어
     연도와 사이가 크게 벌어져 있었다(실측 카드 높이 264px). 이 화면 4칸 카드에만 적용. */
  .ms-proc4 .ps-proc__item { padding: 18px 18px 20px; gap: 4px; }
  .ms-proc4 .ps-proc__title { min-height: 0; justify-content: flex-start; }
}
/* ≤1280 은 base 가 2열로 접는다 → 1행(1·2번)만 밑줄, 2행(3·4번)은 제거 */
@media (min-width: 561px) and (max-width: 1280px) {
  .ms-proc4 .ps-proc__item:nth-child(n+3) { border-bottom: 0; }
}
/* ≤560 은 base 가 1열 + `:last-child{border-bottom:none}` 로 이미 옳다 — 보정 없음 */

/* ── (3-b) .jury-steps 를 3열×2행으로 (원문 수립과정 배치) ────────────────────
   base 는 ≥1281 에서 6열이다. 6열이면 1열 폭이 약 174px 인데 제목 22자·세부 53자가
   들어가 극단적으로 세로로 길어진다. 원문(§2-4)도 3열×2행 배치다.
   base 가 ≤1280 에서 쓰는 3열 격자 규칙을 ≥1281 로 그대로 끌어올린다.
   ⚠ 반드시 min-width:1281px 안에 둔다 — 밖에 두면 ≤768 의 1열 규칙(특이도 (0,2,1))을
     이 블록(0,3,1)이 이겨 모바일에서 세로선이 되살아난다. */
@media (min-width: 1281px) {
  .ms-steps3 { grid-template-columns: repeat(3, 1fr); }
  .ms-steps3 .jury-step:not(:nth-child(6n)) { border-right: 0; }
  .ms-steps3 .jury-step:not(:nth-child(3n)) { border-right: 1px solid var(--c-line); }
  .ms-steps3 .jury-step:nth-child(-n+3) { border-bottom: 1px solid var(--c-line); }
}

/* ── (3-b1) 진행 화살표 [2026-08-18 사용자 요청] ──────────────────────────────
   원문(개편안 §2-4)은 1행 「1 ➤ 2 ➤ 3」, 2행은 **첫 칸 왼쪽에 ➤ 를 한 번 더** 찍어
   윗줄에서 이어진다는 것을 보여 준다. 그 배치를 그대로 옮긴다.
     · 행 안 칸 사이 4곳 = 1·2·4·5 의 ::after (base 스테퍼 원형 노드 그대로 — 새 도형 아님)
     · 행 끝(3·6)에는 두지 않는다 — 허공을 가리키게 된다
   ★2행 머리(04 왼쪽) 화살표는 뺐다 [2026-08-18] — 원문(HWP)은 그 자리에 ➤ 를 찍지만,
     테두리가 있는 격자에서는 컨테이너 밖 14px 로 떠 보인다(검수 실측). 진행 순서는
     <ol> + 01~06 번호가 이미 전달한다.
   ≤768(1열)은 base 관행대로 화살표를 두지 않는다 — 세로 스택에서는 순서가 자명하다. */
@media (min-width: 769px) {
  .ms-steps3 .jury-step:not(:nth-child(3n))::after { display: block; }
  .ms-steps3 .jury-step:nth-child(3n)::after { display: none; }
}

/* ── (3-b2) .ps-chg 를 3칸으로 쓸 때의 접힘 지점 보정 (.ms-chg3) ──────────────
   base 의 ≤1280 규칙은 **4칸 전제**다:
     .ps-chg { flex-wrap: wrap } · .ps-chg__item { flex: calc(50% - 22px) } ·
     .ps-chg__connector:nth-child(4) { display: none }   ← 2×2 를 만드는 규칙
   3칸(이행 완료)에 그대로 걸리면 자식 순서가 item,conn,item,conn,item 이라
   **1번 박스만 한 행을 통째로 차지하고 그 뒤 커넥터가 빈 공간을 가리킨다.**
   1024·1280 실렌더 캡처에서 실제로 그렇게 나왔다(박스 폭 1106px / 875.6px).
   → 자리가 남는 1025~1280 은 한 줄(nowrap)로 두고, 그보다 좁으면 바로 세로 스택.
     ≤768 은 base 가 이미 세로 스택이라 손대지 않는다. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .ms-chg3 { flex-wrap: nowrap; }
  .ms-chg3 .ps-chg__item { flex: 1 1 0; min-width: 0; }
  .ms-chg3 .ps-chg__connector { display: flex; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ms-chg3 { flex-direction: column; gap: 8px; }
  .ms-chg3 .ps-chg__item { flex: 1 1 100%; min-width: 0; width: 100%; }
  .ms-chg3 .ps-chg__connector { display: none; }
}

/* ── (3-b3) .ps-chg 4칸이 ≤1280 에서 2×2 로 접힐 때 커넥터 정리 (.ms-chg4) ─────
   base 는 ≤1280 에서 `flex-wrap:wrap` + `gap:12px` + 항목 `calc(50% - 22px)` 로 2×2 를
   의도하고 `:nth-child(4)`(가운데 커넥터)만 감춘다. 그런데 **gap 12px 를 계산에 넣지 않아**
   한 행이 (50%-22)*2 + 34 + 12*2 = 100% + 12px 가 되어 실제로는 안 들어간다.
   결과: 1번 박스만 한 행을 통째로 쓰고 그 뒤 커넥터가 빈 공간을 가리킨다(1280·1024 실측).
   이 컴포넌트 계열의 확립된 관행 = **줄바꿈이 생기면 화살표를 감춘다**
   (`.ps-proc` @1280 · `.jury-steps` 3열이 이미 그렇게 한다). 같은 방식으로 맞춘다.
   ⚠ 같은 증상이 배포된 `pledge-status.html` 의 변경절차에도 있다(같은 base 규칙).
     남의 파일이라 손대지 않고 보고만 한다 — 별건으로 처리할 것. */
@media (max-width: 1280px) {
  .ms-chg4 .ps-chg__connector { display: none; }
}

/* ── (3-c) 플로우 박스 안 불릿 목록 ─────────────────────────────────────────
   .ps-proc__item · .jury-step 은 가운데 정렬 세로 스택이다. 불릿은 좌측정렬로
   되돌려야 여러 줄 문장이 읽힌다. (border-left 세로선 금지 — 점 마커만 쓴다) */
.manifesto-system-page .ms-bullets {
  list-style: none;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.manifesto-system-page .ms-bullets > li {
  position: relative;
  padding-left: 12px;
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-body);
  word-break: keep-all;
}
.manifesto-system-page .ms-bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-text-muted, #8a8f9a);   /* base 컴포넌트와 같은 회색 계열 표기 유지 */
}

/* ── (3-d) 소제목(h3) · 본문 목록 · 표 주석 ─────────────────────────────────
   .data-section__title(26px)를 h2·h3 에 함께 쓰면 위계가 사라진다. h3 전용 크기. */
.manifesto-system-page .ms-subtitle {
  margin: 32px 0 14px;
  font-family: var(--ff-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text-default);
}
.manifesto-system-page .data-section__title + .ms-subtitle { margin-top: 4px; }

.manifesto-system-page .ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manifesto-system-page .ms-list > li {
  position: relative;
  padding-left: 15px;
  font-family: var(--ff-body);
  font-size: 17px;   /* [FIX-TYPO-20260814] 16→17 — 운영 신규계열 본문 17px */
  line-height: 1.7;
  color: var(--c-text-body);
  word-break: keep-all;
}
.manifesto-system-page .ms-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* 카드 2장 나란히 (주민배심원단 / 공약이행평가단) */
.manifesto-system-page .ms-cards2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.manifesto-system-page .ms-card__title {
  margin: 0 0 12px;
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-text-default);
}

/* 플로우 아래 부기 설명 (이행 완료 하단 2줄) */
.manifesto-system-page .ms-after { margin-top: 20px; }

/* 부서명이 좁은 칸에서 낱말 중간에 끊기는 것 방지 —
   실렌더에서 「공약사업 총괄부서(기획예/산과)」로 잘렸다. base 의 .ps-chg__title 은
   이미 word-break:keep-all 인데 __dept 에만 빠져 있다. 이 페이지 스코프로만 맞춘다. */
.manifesto-system-page .ps-chg__dept { word-break: keep-all; }

/* ── (3-e) 반응형 — 기존 축소 패스의 스코프 확장 미러 ────────────────────────
   값은 style.css:7810~7898 의 .pledge-status-page 스코프 규칙과 동일하다.
   새 값을 만들지 않았다(위계 보존). */
@media (max-width: 1280px) {
  .manifesto-system-page .ms-cards2 { gap: 20px; }
  .manifesto-system-page .ms-list > li { font-size: 16px; }   /* [FIX-TYPO-20260814] 본문 17px 은 넓은 화면 전용 — ≤1280 종전값 유지 */
}
@media (max-width: 1024px) {
  .manifesto-system-page .ps-proc__title { font-size: 18px; min-height: 50px; }
  .manifesto-system-page .ps-proc__item  { padding: 22px 16px; }
  .manifesto-system-page .ps-proc__dept  { font-size: 15px; }
  .manifesto-system-page .ps-chg__title  { font-size: 18px; }
  .manifesto-system-page .ps-chg__item   { padding: 18px 16px 20px; gap: 16px; }
  .manifesto-system-page .ps-chg__icon   { width: 56px; height: 56px; }
  .manifesto-system-page .ms-subtitle    { font-size: 19px; }
}
@media (max-width: 900px) {
  .manifesto-system-page .ms-cards2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .manifesto-system-page .ps-proc__item { padding: 18px 14px; }
  .manifesto-system-page .ps-proc__date { font-size: 13px; padding: 3px 10px; }
  .manifesto-system-page .ps-proc__dept { font-size: 14px; }
  .manifesto-system-page .ps-chg__dept  { font-size: 14px; }
  .manifesto-system-page .ps-proc__title,
  .manifesto-system-page .ps-chg__title { font-size: 16px; }
  .manifesto-system-page .ms-subtitle   { font-size: 17px; margin: 24px 0 12px; }
  .manifesto-system-page .ms-list > li  { font-size: 15px; }
  .manifesto-system-page .ms-bullets > li { font-size: 14px; }
  /* jury-info — 라벨 위 / 값 아래 세로 스택 (base 는 .participation 스코프라 안 걸린다) */
  .manifesto-system-page .jury-info__row   { grid-template-columns: 1fr; }
  .manifesto-system-page .jury-info__label {
    padding: 11px 16px; font-size: 14px; white-space: normal;
    /* [FIX-CONTRAST-20260814] 구 var(--c-text-muted, #8a8f9a) = `#f7f8fd` 배경 위 3.06:1 (14px/700 → 요구 4.5) · 360 에서 13건 미달.
       2026-08-13 Stage4 가 같은 색을 `.ps-guide__title span`(:6853) · `.ps-area-title span`(:6873) 에서
       #5b606b 로 교체한 것과 동일 처방. 되돌리기 = 이 color 한 줄을 구 값으로 복원. */
    color: #5b606b; justify-content: center; text-align: center;
  }
  .manifesto-system-page .jury-info__desc  { padding: 12px 16px 14px; font-size: 15px; }
}


/* ============================================================================
   [Stage2-FM-PREVIEW:START]  전체메뉴 3단 — 미리보기 전용 최소 규칙  (2026-08-13)
   ----------------------------------------------------------------------------
   ★ 개발(정해용 과장)이 06 §4-1 규칙을 `common.css` 에 반영하면
     **이 구간(START~END)을 통째로 삭제**할 것. 남겨 두면 style.css 가 뒤에 로드되어
     개발이 넣은 규칙을 덮어쓴다.
   ★ 여기 있는 것은 「계층이 보이게」 하는 최소치뿐이다 — 들여쓰기·크기·그룹 제목 강조 3가지.
     기존 색 토큰만 쓰고 새 색을 만들지 않는다.
   ============================================================================ */
/* 그룹 제목(2뎁스) — 자식보다 밝고 굵게. 기존 패널 링크 색(rgba(255,255,255,.7))보다 위 */
#full-menu nav > ul > li > div.panel > ul .fm-group__title {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}
/* 3뎁스 목록 — 들여쓰고 간격을 좁힌다.
   기존 `li.is-open ul` 의 padding:4px 0 28px 를 이겨야 하므로 특이도를 (1,2,5)로 맞춘다 */
#full-menu nav > ul > li.is-open div.panel ul.fm-d3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0 0 0 14px;
}
/* 3뎁스 링크 — 한 단 작게. 기존 `> ul a` (1,1,6) 를 이기려고 (1,2,6) */
#full-menu nav > ul > li > div.panel > ul .fm-d3 a {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
#full-menu nav > ul > li > div.panel > ul .fm-d3 a:hover {
  color: var(--c-white);
}
/* ★현재 페이지 표시는 3뎁스에서도 살아 있어야 한다.
   바로 위 규칙이 기존 `a.is-active`(1,2,6) 와 특이도가 같고 뒤에 와서 분홍색을 덮어버렸다
   (실측: 「매니페스토란?」 이 분홍 대신 흰색으로 나왔다). 같은 특이도로 되살린다. */
#full-menu nav > ul > li > div.panel > ul .fm-d3 a.is-active {
  color: #FF6FA5;
  font-weight: 700;
}
@media (max-width: 768px) {
  #full-menu nav > ul > li > div.panel > ul .fm-d3 a { font-size: 14px; }
  #full-menu nav > ul > li.is-open div.panel ul.fm-d3 { padding-left: 10px; }
}
/* [Stage2-FM-PREVIEW:END] */

/* [S5-B-MERGE:START] */
/* ============================================================================
   [S5 병합 2026-08-13] 신규 4화면(12월 오픈분) 추가 CSS — 「말미에 추가만」
     vision-core.html · pledge-annual.html   <- css_B1.css
     pledge-budget.html · pledge-ledger.html <- css_B2.css
   ---------------------------------------------------------------------------
   · 기존 규칙 수정·삭제 0건 (접두부 416067바이트 무변경 증명 · _work/S5_20_merge_css.py)
   · 신규 CSS 파일 0개 (css/ = common.css · main.css · style.css 3개 고정)
   · 두 블록 상호 셀렉터 중복 0건 · :root 승격 0건 · 신규 hex 색 0건
     (_work/S5_10_css_analyze.py · S5_10_css_analyze.json)
   · --po-f1~f5 재정의 0 — 정의는 위 W3 병합 블록 단 한 곳
   · 기존 style.css 와 같은 셀렉터 5건은 전부 B1 이 의도적으로 덮는 것이다:
       col:nth-child(1~4) 폭(민선8기 9열 -> 민선9기 24열) · icon-swipe-show(카드형 폐지로 안내 부활)
   ---------------------------------------------------------------------------
   ※ 원본 파일 _work/css_B1.css · _work/css_B2.css 는 이력용으로 남겨 두었다.
      전달본에는 _work/ 가 포함되지 않는다. HTML 은 common.css + style.css 만 링크한다.
   ============================================================================ */


/* ---------- css_B1.css (16042 B, sha bc7c346cadf68b30) ---------- */
/* ============================================================================
   css_B1.css — B1 (5대 핵심공약 · 분기별(연차별) 추진 로드맵) 추가 CSS
   생성 2026-08-13 · 민선9기 매니페스토 개편 / 신규화면 B1

   ★ style.css 를 직접 고치지 않는다. 나중에 단일 담당이 style.css 말미에 "추가만" 병합한다.
      (기존 규칙 수정·삭제 0 / :root 승격 금지)
   ★ 신규 색·신규 폰트·신규 이미지 0. 기존 팔레트 토큰과 기존 마스크 아이콘만 쓴다.
   ★ border-left 색상 세로선 callout 0.
   ★ 로컬 검증은 style.css 다음에 이 파일을 얹어 확인한다(하네스가 add_style_tag 로 주입).

   병합 순서 주의 — 이 파일은 style.css 의 아래 기존 규칙을 "덮는다". 반드시 뒤에 붙일 것.
     :6723  .data-table--annual { min-width: 1100px }
     :7190  .pledge-annual-page .icon-swipe-show { display:none }
     :8120~ .pledge-annual-page .data-table--annual col:nth-child(1~9) { width: ... }  (민선8기 9열용)
   ============================================================================ */


/* ==========================================================================
   1. 분기별(연차별) 추진 로드맵 — 표 골격
   민선8기 9열(연번·관리번호·공약명·추진목표 + 연차 5) → 민선9기 24열로 바뀐다.
     연번 / 공약명 / 구분 / 소관부서 + 연차별 추진계획 20칸(5개년 × 4분기)
   임기 2026.7~2030.6 이라 2026·2030 이 반년이지만, 첫·끝해 분기 칸을 줄일지는
   발주처 확인 항목이므로 임의로 줄이지 않고 전 연도 4분기를 세운다(보고서 §3-2).
   ========================================================================== */

/* 24열 합계 = 56 + 280 + 84 + 180 + (38 × 20) = 1,360px
   폭은 전부 내용에서 역산했다(눈대중 아님).
     연번   2자리 + 좌우 패딩 32                              → 56px
     공약명 중앙값 20자·최장 55자. 236px 본문폭 = 14~15자/줄  → 280px
     구분   「신규/계속」 배지(.pl-badge) 46px + 패딩 32       → 84px
     소관부서 최장 「도심재정비전략추진단」 실측 잉크 137px + 패딩 32 → 180px
             (공백이 없어 word-break:keep-all 로는 줄바꿈이 안 되는 문자열이다.
              132px 로 뒀더니 실측에서 오른쪽으로 5.3px 삐져나왔다)
     분기   숫자 1자 + 축소 패딩 10                            → 38px
   ---------------------------------------------------------------------------
   ★ 폭을 <col> 이 아니라 thead 첫 행 th 에 준다.
      style.css 의 기존 규칙이 태블릿 구간에서 col 폭을 통째로 해제하기 때문이다:
        @media (min-width:769px) and (max-width:1280px) {
          .board-content .data-table col { width: auto !important; }
        }
      실측 결과 1024·1280 에서 24개 칼럼이 전부 56.7px 로 균등분배되어 공약명이
      짓눌렸다(「안 넘쳤지만 짓눌린」 상태 — 넘침 검사만으로는 못 잡는 유형).
      기존 규칙은 건드리지 않는다(다른 표 전부가 의존한다).
      table-layout:fixed 는 col 폭이 없으면 첫 행 셀 폭으로 칼럼을 정하므로 결과가 같다.
      5번째 셀은 colspan 20 이라 800px 을 20칸이 균등(38px+α)으로 나눠 갖는다.
      — 이 해법은 pledge-list(.data-table--pledge)가 같은 함정에서 쓴 방식과 동일하다. */
.pledge-annual-page .data-table--annual { min-width: 1360px; table-layout: fixed; }

/* (1) col 폭 — 1281px 이상 · 768px 이하에서 실제로 적용되는 층.
   기존 :8120 블록(민선8기 9열용: 52/60/248/200/108×5)을 반드시 전부 덮어야 한다.
   실측 사고: 이 블록을 안 덮었더니 col2 가 옛 값 60px 로 남아 공약명 칸이 60px 로 눌렸다. */
.pledge-annual-page .data-table--annual col:nth-child(1) { width: 56px; }
.pledge-annual-page .data-table--annual col:nth-child(2) { width: 280px; }
.pledge-annual-page .data-table--annual col:nth-child(3) { width: 84px; }
.pledge-annual-page .data-table--annual col:nth-child(4) { width: 180px; }
.pledge-annual-page .data-table--annual col:nth-child(n+5) { width: 38px; }

/* (2) thead 첫 행 폭 — 769~1280px 에서 col 폭이 해제될 때 대신 서는 층. 값은 (1)과 동일. */
.board-content .data-table.data-table--annual thead tr:first-child th:nth-child(1) { width: 56px; }
.board-content .data-table.data-table--annual thead tr:first-child th:nth-child(2) { width: 280px; }
.board-content .data-table.data-table--annual thead tr:first-child th:nth-child(3) { width: 84px; }
.board-content .data-table.data-table--annual thead tr:first-child th:nth-child(4) { width: 180px; }
.board-content .data-table.data-table--annual thead tr:first-child th:nth-child(5) { width: 760px; }

/* ★ 가로스크롤 래퍼를 위치 기준(containing block)으로 만든다.
   .blind(:7279)·caption.blind 는 position:absolute 다. 위치 기준이 될 조상이 없으면
   기준이 문서 최상위가 되고, 표 오른쪽 끝(x≈1,360)에 놓인 blind 요소가 문서를
   가로로 1,000px 늘려 "빈 흰 여백으로 스크롤되는" 유령 가로스크롤을 만든다.
   실측: 360px 뷰포트에서 documentElement.scrollWidth 1,361 / window.scrollX 1,001px.
   래퍼에 position:relative 를 주면 blind 가 스크롤러 안에 갇혀 문서를 늘리지 않는다.
   (분기 헤더는 aria-label 로 바꿔 blind 자체를 없앴고, 이 규칙은 caption.blind 등
    남은 절대위치 요소에 대한 이중 방어다) */
.pledge-annual-page .data-table-wrap { position: relative; }

/* 3단 헤더 — 3행(분기 숫자)만 좌우 패딩을 줄여 38px 칸에 숫자가 들어가게 한다.
   기본값 .board-content .data-table thead th { padding:13px 16px } 은 32px 를 먹는다. */
.board-content .data-table.data-table--annual thead tr:nth-child(3) th { padding-left: 5px; padding-right: 5px; }
.board-content .data-table.data-table--annual thead tr:nth-child(2) th { padding-left: 8px; padding-right: 8px; }

/* 구분(배지)·소관부서 셀 */
.board-content .data-table.data-table--annual tbody td.pa-cell-type { padding-left: 8px; padding-right: 8px; }
.board-content .data-table.data-table--annual tbody td.pa-cell-dept {
  white-space: normal;
  word-break: keep-all;
  /* 「도심재정비전략추진단」처럼 공백이 없는 부서명은 keep-all 로는 끊기지 않는다.
     칸을 180px 로 넓혀 한 줄에 담았고, 그보다 긴 이름이 새로 들어올 경우를 대비해
     최후에만 강제로 끊도록 anywhere 를 함께 둔다(평소에는 발동하지 않는다). */
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* 공약명(행머리)은 :6729 가 이미 좌측정렬·굵게로 잡아 둔다. 부연(.pl-note)만 톤 정리.
   .pl-note(:8922) 의 var(--c-text-sub) #777676 은 흰 배경에서 4.11:1 로 AA(4.5) 미달이다.
   pledge-list 는 .pl-badge--cont 주석에서 같은 값을 문제로 지적해 두었다.
   전역 .pl-note 를 고치면 pledge-list 까지 바뀌므로 이 페이지 안에서만 올린다(5.94:1). */
.board-content .data-table.data-table--annual tbody th[scope="row"] .pl-note {
  font-weight: 400;
  color: #5b606b;
}

/* ---- 일정 칸: 값이 없다 → .po-tbd 한 칸으로 접는다 ----------------------
   행마다 분기 20칸을 .po-tbd 로 도배하면 시각 소음이고 낭독기가 20번 반복한다.
   「연차별 추진계획」 그룹 전체를 colspan 20 짜리 한 칸으로 접어 문장 1개로 만든다.
   ---------------------------------------------------------------------- */
/* .po-tbd(:6601) 의 글자색 var(--c-text-mute) #858585 는 바탕 --c-gray-100 #F9FAFB 에서
   3.39:1 로 AA(4.5) 미달이다. 이 두 페이지에서만 #5b606b(5.94:1)로 올린다.
   — 값은 Stage4 에서 .data-note·.ps-note 에 이미 쓰인 것이고 신규 색이 아니다.
   — 전역 .po-tbd 를 건드리면 다른 담당(B2)의 화면까지 바뀌므로 페이지 스코프로 제한한다. */
.pledge-annual-page .po-tbd,
.vision-core-page .po-tbd { color: #5b606b; }

.board-content .data-table.data-table--annual tbody td.po-tbd {
  white-space: normal;
  word-break: keep-all;
  padding-left: 12px;
  padding-right: 12px;
}

/* ---- 분야 탭 — 민선9기 5분야 토큰(--po-f1~f5) 연결 ----------------------
   기존 :7550 은 민선8기 키(.pa-tab--city 등)에만 --c 를 준다. 신규 키를 추가한다.
   (--po-f1~f5 정의는 style.css 의 W3 병합 블록에 이미 있고 .pledge-annual-page 를 포함한다) */
.pa-tabs .pa-tab--f1 { --c: var(--po-f1); }
.pa-tabs .pa-tab--f2 { --c: var(--po-f2); }
.pa-tabs .pa-tab--f3 { --c: var(--po-f3); }
.pa-tabs .pa-tab--f4 { --c: var(--po-f4); }
.pa-tabs .pa-tab--f5 { --c: var(--po-f5); }

/* [S5 추가 2026-08-13] ★카운트 알약의 글자색을 분야색에서 떼어낸다 — 명도대비 AA.
   실측(_work/S5_76_tabpill_probe.py · 5탭 × 활성/비활성 × 3뷰포트 = 30측정):
     f1 8.91 · f2 6.06 · **f3 4.49** · f4 13.37 · f5 11.08   (필요 4.5, 13px/700)
   f3(민트 #018582)만 **비활성(민트 글자/흰 바탕)·활성(흰 글자/민트 바탕) 양쪽 다 4.49** 로
   0.01 차이로 미달한다. 기존 규칙 `:7558 color: var(--c)` 가 분야색을 글자에 쓰기 때문이다.

   이미 이 프로젝트가 내린 답을 그대로 따른다 —
     style.css(W2 병합분) 주석: 「f3(민트)=4.49 로 AA 미달. 그래서 분야색을 **장식(마커·테두리)**
     에만 쓰고 글자색으로 쓰지 않는다. 장식 기준 3:1 은 5색 모두 통과한다.」
   그래서 글자는 중립 진회색(#5b606b — Stage4 가 .data-note 등에 이미 쓰는 값, 신규 색 아님),
   분야색은 **테두리**로 남긴다. 활성 탭은 배경이 분야색이므로 알약을 흰 바탕으로 띄운다.

   ※ 왜 f3 만 고치지 않았나 — 한 탭만 회색이면 고장으로 보인다. 5개를 같은 규칙으로 다루는 편이
     의도된 디자인으로 읽힌다. 분야 구분은 아이콘·테두리·활성 배경이 그대로 담당한다.
   ※ 대안 2가지(택하지 않음): ①f3 만 --c-mint-dark(#004F4D)로 → 같은 분야가 화면마다 다른 색이
     되어 44 리드판정의 취지를 깬다  ②글자를 19px 로 키워 대형기준 3:1 적용(Stage4 가 쓴 방법)
     → 모바일에서 카운트가 탭 이름(15px)보다 커진다. */
.pledge-annual-page .pa-tabs .ds-tab__count { color: #5b606b; border-color: var(--c); }
.pledge-annual-page .pa-tabs .ds-tab.is-active .ds-tab__count {
  background: var(--c-white);
  color: #5b606b;
  border-color: var(--c-white);
}

/* ---- 가로 이동 안내 --------------------------------------------------------
   기존 :7190 은 "모바일은 카드형이라 안내 불필요"라며 항상 display:none 이었다.
   민선9기 표는 24열이라 카드형 전환(.rwd-cards)을 걷어내고 전 폭에서 가로스크롤로
   통일했다(awards.html · pledge-list.html 과 같은 방식). 그래서 안내를 되살린다. */
.pledge-annual-page .icon-swipe-show {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #5b606b;
  text-align: right;
}
@media (max-width: 480px) {
  .pledge-annual-page .icon-swipe-show { font-size: 13px; text-align: left; }
}
/* [S5 추가 2026-08-13] ★넓은 폭에서는 안내를 내린다 — 밀 것이 없는데 「미세요」는 거짓말이다.
   실측(이분탐색, _work/S5_65_hint_threshold.py): 표 min-width 1360px 기준
   **뷰포트 1511px 부터 넘침 0**(그 미만은 스크롤 필요). 그래서 1511 이상에서 숨긴다.
   B2 가 pledge-budget·pledge-ledger 에서 같은 방식으로 임계값을 실측해 맞춰 두었고
   (91 §4-5: 1110 / 1199 / 843), 로드맵만 항상 표시라 형제 화면과 어긋나 있었다.
   ※ 세로 스크롤바 폭이 다른 환경에서는 이 경계가 ±15px 흔들릴 수 있다. 경계에서
     어긋나도 가려지는 것은 마지막 칸의 몇 px 뿐이고, 표 폭·열 구성이 바뀌면
     S5_65_hint_threshold.py 를 다시 돌려 이 숫자를 갱신할 것. */
@media (min-width: 1511px) {
  .pledge-annual-page .icon-swipe-show { display: none; }
}

/* 표 상단 인트로 블록 — 탭 위에 놓이므로 아래 여백만 정리
   ★[S5 수정 2026-08-13] 8px → 34px. **글자가 실제로 안 칠해지던 결함을 고친다.**
     `.pa-tabs`(:7537)는 `position:sticky; z-index:20` 이라 **자체 스택 컨텍스트**를 만들고,
     그 `::before`(:7539)가 `top:-26px` 부터 시작하는 **폭 100vw 흰 그라디언트 띠**다
     (위 56% 는 완전 불투명 흰색). 그래서 탭 위 26px 안에 있는 글자는 스택 컨텍스트가
     통째로 위에 얹혀 z-index 로도 못 이기고 **그대로 덮인다.**
     실측(_work/S5_81_diag_note.py · 잉크 픽셀 카운트):
       1920 → 인트로 주석 1줄 전체 미표시(진한픽셀 0)
       1440·1280 → 둘째 줄 미표시(진한픽셀 1)  /  1024 → 22  /  768 이하는 정상
       `.pa-tabs` 를 DOM 에서 지우면 21,159 픽셀로 되살아나 원인이 확정된다.
     rect·히트테스트·박스이탈은 전부 0 이었다 — 레이아웃은 멀쩡하고 **칠만 안 된** 유형이라
     기하 검사로는 잡히지 않는다(캡처를 열어 보고 발견). 여백을 띠 높이(26px)보다 크게 벌린다. */
.pledge-annual-page .pa-intro { margin-bottom: 34px; }
.pledge-annual-page .pa-intro .data-note { margin-top: 10px; }


/* ==========================================================================
   2. 5대 핵심공약 (vision-core.html)
   어느 5개인지 원문에 지정이 없다 → 이름을 짓지 않는다.
   카드 5장의 "자리"만 세우고 값 자리에는 확정 시점을 적는다.
   ========================================================================== */

/* .ps-areacard(:6875) 를 그대로 쓰되 분야색을 배정하지 않는다.
   5대 핵심공약이 5대 분야와 1:1 대응한다는 근거가 없어 색을 주면 없는 사실을 주장하게 된다. */
.ps-areacard--tbd { --c: var(--c-text-sub); }

.vc-slots { align-items: stretch; }

/* 번호 자리 — .ps-areacard__icon(48px 원)을 재사용하고 안에 숫자를 넣는다 */
.vision-core-page .vc-slot__num {
  font-family: var(--ff-title);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-text-sub);
}

.vision-core-page .vc-slot__tbd {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 2026-08-24 수정 — [Figma 반영] 하단 CTA 박스: 버튼을 텍스트 옆 오른쪽 세로 가운데로.
   .notice-box 는 suggestion-list.html 등과 공유하는 컴포넌트라 기본 규칙(style.css:278)은
   그대로 두고 이 페이지 스코프에서만 flex 로 오버라이드한다. */
.vision-core-page .notice-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 41px; }   /* 2026-08-24 수정 — figma p-41 균일(위39/아래26 비대칭이 세로 가운데를 깨보이게 함) */
.vision-core-page .vc-notice-text { flex: 1 1 320px; }
.vision-core-page .notice-box__title { margin: 0 0 12px; }   /* 2026-08-24 수정 — figma gap 12 */
.vision-core-page .vc-cta { margin: 0; flex: 0 0 auto; }
/* 2026-08-24 수정 — [Figma 반영 · node 10648:6887] "공약사업 목록 보기" 버튼:
   파랑 아웃라인(.po-doc 기본) → 파랑→핑크 그라데이션 필 버튼(radius 12 · 흰 18px). */
.vision-core-page .vc-cta .po-doc {
  display: inline-flex;
  align-items: center;
  padding: 12px 21px 13px 20px;
  border: 0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 12px;
  background: linear-gradient(234.75deg, #0044BD 6.87%, #C40051 90.4%);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
}
.vision-core-page .vc-cta .po-doc:hover { background: linear-gradient(234.75deg, #0044BD 6.87%, #C40051 90.4%); color: #fff; filter: brightness(1.08); }

/* 본문 안내문 속 링크 — 색·굵기가 주변 글자와 같아 링크임을 알 수 없었다(실렌더로 확인).
   색만으로 구분하지 말라는 지침에 맞춰 밑줄 + 본문색으로 구분한다.
   신규 색 도입 없이 기존 --c-primary 를 쓴다. */
.vision-core-page .data-note a,
.vision-core-page .vc-field__note a,   /* 2026-08-24 수정 — 노트가 제목 행으로 이동하며 클래스가 바뀌어 링크 스타일 누락 복구 */
.pledge-annual-page .data-note a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vision-core-page .data-note a:hover,
.vision-core-page .vc-field__note a:hover,
.pledge-annual-page .data-note a:hover { text-decoration-thickness: 2px; }

/* 분야별 건수 나열이 「9\A건」처럼 숫자와 단위 사이에서 끊기지 않게 */
.vision-core-page .notice-box__desc { word-break: keep-all; }

/* 근거 표 — 「구분」열은 짧고 「내용」열은 문장이라 줄바꿈을 허용한다 */
.vision-core-page .data-table tbody th[scope="row"] { white-space: nowrap; }
.vision-core-page .data-table tbody td.po-cell-l { word-break: keep-all; line-height: 1.7; }

@media (max-width: 768px) {
  .vision-core-page .data-table tbody th[scope="row"] { white-space: normal; word-break: keep-all; }
  .vision-core-page .notice-box { flex-direction: column; align-items: flex-start; }
  .vision-core-page .vc-cta { margin-top: 16px; }
}


/* ---------- css_B2.css (7794 B, sha 3767e2bd0482138c) ---------- */
/* ============================================================================
   css_B2.css — B2 (예산현황 pledge-budget · 공약가계부 pledge-ledger) 추가 CSS
   생성 2026-08-13 · 신규 2화면

   ★ style.css 를 직접 고치지 않는다. 병합 단계에서 style.css 말미에 "추가만" 한다.
      (기존 규칙 수정·삭제 0 / :root 승격 금지)
   ★ 신규 색·신규 폰트·신규 이미지 0. 기존 팔레트 토큰만 쓴다.
   ★ border-left 색상 세로선 callout 0 (lessons #8).
   ★ 새 컴포넌트를 만들지 않았다. 아래는 전부 "기존 컴포넌트를 이 두 화면에서
      쓰기 위한 보정"이며, 규칙 수는 최소로 유지했다.

   로컬 미리보기에서는 style.css 다음에 이 파일을 <link> 로 얹어 확인한다.
   ============================================================================ */


/* ==========================================================================
   1. .po-tbd 명도대비 보정  (★필수 — 접근성)
   style.css:6601 의 .po-tbd 는 color:var(--c-text-mute)(#858585) 인데
   같은 규칙의 배경 var(--c-gray-100)(#F9FAFB) 위에서 3.5:1 로 4.5:1 에 미달한다.
   (Stage4 가 .data-note 등에서 같은 사유로 #858585 → #5b606b 로 이미 통일했다.
    같은 값을 그대로 따른다 — 새 색이 아니다.)
   ※ .po-tbd 는 현재 어떤 페이지도 쓰지 않는 미사용 규칙이라, 전역을 건드리지 않고
      우리 두 화면으로 스코프를 좁혔다. 다른 화면이 .po-tbd 를 쓰기 시작하면
      style.css 원 규칙의 색을 고치는 편이 낫다(병합 담당자 판단 사항).
   ========================================================================== */
.pledge-budget-page .po-tbd,
.pledge-ledger-page .po-tbd { color: #5b606b; }


/* ==========================================================================
   2. 카드 안 「미정」 칩
   .po-tbd 는 표 셀 전용(가운데정렬·회색배경)이라 카드의 dd 안에서는 여백이 없다.
   같은 회색 배경을 유지한 채 알약 형태로만 다듬는다.
   ========================================================================== */
.pledge-budget-page .b2-chip,
.pledge-ledger-page .b2-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}


/* ==========================================================================
   3. 예산현황 — 총 소요사업비 요약 카드
   .ps-sum-card 는 3열 그리드(.ps-sum-grid) 안에서 쓰이도록 만들어졌다.
   여기서는 단독 카드 1장이라 본문 폭(1200+)에서 라벨과 값이 지나치게 벌어진다.
   폭만 제한하고 가운데로 둔다.
   ========================================================================== */
.pledge-budget-page .pb-sumcard { max-width: 720px; margin: 0 auto; }


/* ==========================================================================
   4. 넓은 표 최소 폭 — 가로 스크롤 기준
   기존 표들과 같은 방식이다(.data-table--annual 1100 / --byarea 1080 / --detail 980).
   컬럼 수: 재원별·분야별 10 / 분야별 재원현황 11 / 연도별 8.
   ≤768 에서 이 min-width 가 가로 스크롤을 만들고(.pl-scroll-hint 가 안내),
   769~1280 에서는 style.css:7602 의 공통 규칙이 min-width 를 풀어 폭에 맞춰 축소한다.
   ========================================================================== */
.pledge-budget-page .data-table--budget   { min-width: 1000px; }
.pledge-budget-page .data-table--budget-x { min-width: 1080px; }
.pledge-ledger-page .data-table--ledger   { min-width: 760px; }

/* 분야별 재원현황 — 좌측 2개 라벨 열(구분·재원)은 줄바꿈되면 읽기 어렵다 */
.pledge-budget-page .data-table--budget-x tbody th[scope="rowgroup"] { white-space: nowrap; text-align: center; background: var(--c-gray-150); }

/* 값 자리를 한 덩어리로 접은 .po-tbd 블록은 세로로 길다 — 문구를 가운데에 둔다 */
.pledge-budget-page .data-table .po-tbd,
.pledge-ledger-page .data-table .po-tbd { vertical-align: middle; }

/* ★ 미정 문구를 가로스크롤에 붙잡아 둔다
   .po-tbd 가 9~10 열을 덮으므로 가운데 정렬된 문구는 표의 ≈600px 지점에 놓인다.
   360 캡처에서 그 자리가 화면 밖이라 「값이 비어 있는 표」로 보였다(실측 후 수정).
   sticky 로 감싸면 데스크톱에서는 그대로 가운데, 모바일에서는 스크롤해도 화면 안에 남는다.
   ★ left 만 주면 한 방향만 잡힌다 — 스크롤 0 일 때 문구는 여전히 오른쪽 화면 밖이었다
     (실측: 360 에서 571~595px, 가시영역 328px). left + right 를 함께 줘야
     "어느 스크롤 위치에서도 보이는" 상태가 된다. */
.pledge-budget-page .po-tbd .b2-stick,
.pledge-ledger-page .po-tbd .b2-stick {
  position: sticky;
  left: 14px;
  right: 14px;
  display: inline-block;
}


/* ==========================================================================
   5. 가로스크롤 안내를 "진짜로 스크롤되는 폭"에서만 띄운다
   기존 .pl-scroll-hint 는 style.css:9044 에서 @media (max-width:599px) 로만 켜진다.
   그 값은 pledge-list 의 4열 표(min-width 560px) 기준이라 우리 10~11열 표에는 안 맞는다.
   ★ 실측(이분탐색)으로 임계 폭을 직접 쟀다 — 이 값이 아니면 안내가 거짓말이 된다.
       .data-table--budget   (10열) : 1111px 부터 넘침 0  → 1110 이하에서 안내
       .data-table--budget-x (11열) : 1200px 부터 넘침 0  → 1199 이하에서 안내
       .data-table--ledger   ( 8열) :  844px 부터 넘침 0  →  843 이하에서 안내
   1024 에서 표 오른쪽(2030·임기후)이 잘려 보이는데 안내가 없던 문제를 이걸로 막는다.
   ※ 표 폭이 바뀌면 이 숫자도 다시 재야 한다(_work/B2_50_hint_threshold.py).
   ========================================================================== */
@media (max-width: 1110px) {
  .pledge-budget-page .data-section:has(.data-table--budget) .pl-scroll-hint { display: block; }
}
@media (max-width: 1199px) {
  .pledge-budget-page .data-section:has(.data-table--budget-x) .pl-scroll-hint { display: block; }
}
@media (max-width: 843px) {
  .pledge-ledger-page .data-section:has(.data-table--ledger) .pl-scroll-hint { display: block; }
}


/* ==========================================================================
   6. 반응형 — 카드/요약 (pledge-status-page 의 ≤768 보정과 같은 값)
   ========================================================================== */
@media (max-width: 768px) {
  /* 라벨 열이 좁은 화면을 다 먹지 않게 줄바꿈을 허용한다.
     기본값은 .data-table tbody th[scope=row]{white-space:nowrap}(style.css:5773) 이라
     「미래를 그리는 중구」가 한 줄로 196px 을 차지했고, 「구분+재원」 두 열만으로
     313/328px 을 먹어 값 영역이 화면 밖으로 밀렸다(360 실측). 줄바꿈은 어절 단위로만. */
  .pledge-budget-page .data-table tbody th[scope="row"],
  .pledge-budget-page .data-table tbody th[scope="rowgroup"],
  .pledge-ledger-page .data-table tbody th[scope="row"] {
    white-space: normal;
    word-break: keep-all;
  }

  .pledge-budget-page .ps-sum-card__phase,
  .pledge-ledger-page .ps-sum-card__phase { font-size: 18px; }
  .pledge-budget-page .ps-sum-card__hd,
  .pledge-ledger-page .ps-sum-card__hd { padding: 16px 18px; }
  .pledge-budget-page .ps-sum-num,
  .pledge-ledger-page .ps-sum-num { font-size: 20px; }
  .pledge-budget-page .ps-sum-rows,
  .pledge-ledger-page .ps-sum-rows { padding: 0 18px 12px; }
}

/* [S5-B-MERGE:END] */


/* [FIX-TYPO-20260814:START] ==================================================
   타이포 운영(라이브) 대조 수정 — 결함 #5 「모바일 미축소」 일괄
   (결함 #1 .ps-kvcard__title · #2 .ms-card__title · #4 .pl-anchor__count 는 이 항목의
    부분집합이라 개별 작업하지 않는다 — 명세 §9-2 비고)
   명세: .artifacts/2026-08-14/열린구청장실_수정/10_타이포_운영대조.md §9-2 (3순위)
   실측 근거: 360 모바일 미축소 비율 = 운영 4%(7/157) vs 우리 추가분 56%(25/45)

   원칙
     ① 새 값을 만들지 않는다 — 축소 단계는 운영/기존 규칙에 이미 있는 값을 그대로 쓴다.
     ② 12px 하한 — 운영 본문성 텍스트 최소는 12px 이다(.badge ≤768 = 12px, :592).
        10px 는 운영에서도 아이콘 글리프뿐이다. 이미 12px 인 것은 줄이지 않는다.
     ③ 이 블록은 파일 말미 = 캐스케이드 최후단이다. 위쪽에 같은 셀렉터의 단계가
        있으면 여기서 전 단계를 다시 적어 순서가 뒤집히지 않게 한다.
   되돌리기 = 이 START~END 구간 삭제 + 인라인 `[FIX-TYPO-20260814]` 주석이 붙은 값 복원
   ========================================================================== */

/* ── (a) pledge-status.html ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 360 에서 h3(20px)이 상위 h2 .data-section__title(18px)보다 컸다 = 위계 역전.
     운영 h3 관례 .ps-chg__title(≤768 = 16px)·.ms-subtitle(≤768 = 17px) 값을 쓴다. */
  .ps-kvcard__title { font-size: 16px; }
  .ps-subtitle      { font-size: 17px; }

  .ps-note              { font-size: 14px; }
  .ps-proc__details li  { font-size: 14px; }
  .ps-detail__note      { font-size: 13px; }
  .ps-chg__title small  { font-size: 14px; }
  .pledge-status-page .ps-area-title span { font-size: 13px; }
}
/* 분야 카드 큰 숫자 — 축소 3단(:7851 20 / :7889 19 / :7944 18)이 원래 있었는데
   :8449 의 같은 특이도 기본 규칙(20px)이 나중 선언이라 전 단계를 덮어 버렸다.
   값은 그대로 두고 단계만 되살린다. vision-core 는 .pledge-status-page 스코프
   밖이라 기본 23px 이 고정돼 있었으므로 같은 단계를 함께 건다. */
@media (max-width: 1024px) {
  .vision-core-page .ps-areacard__label b { font-size: 20px; }
}
@media (max-width: 768px) {
  .pledge-status-page .ps-areacard__label b,
  .vision-core-page   .ps-areacard__label b { font-size: 19px; }
}
@media (max-width: 480px) {
  .pledge-status-page .ps-areacard__label b,
  .vision-core-page   .ps-areacard__label b { font-size: 18px; }
}

/* ── (b) manifesto-system.html ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 360 에서 h4(18px)가 상위 h3 .ms-subtitle(17px)보다 컸다 = 위계 역전 */
  .manifesto-system-page .ms-card__title { font-size: 16px; }
}

/* ── (c) manifesto-rules.html (규정 전문) ──────────────────────────────── */
@media (max-width: 768px) {
  /* 조문 본문은 이미 ≤1024·≤640 에서 15px 로 줄지만 번호·라벨·개정표기만
     안 줄어 좁은 화면에서 본문보다 크게 보였다. 본문과 같은 폭으로 내린다. */
  .regulation .reg-article__no  { font-size: 15px; }
  .regulation .reg-clause__no   { font-size: 15px; }
  .regulation .reg-meta__value  { font-size: 15px; }
  .regulation .reg-meta__label  { font-size: 14px; }
  .regulation .reg-amend        { font-size: 13px; }
}

/* ── (d) vision-core.html ──────────────────────────────────────────────── */
/* ★ .vc-slot__num (26px) 은 축소하지 않는다 — 명도대비 때문이다(실측으로 되돌린 항목).
   글자색 --c-text-sub(#777676) 가 --c: var(--c-text-sub) 로 칠해진 원(rgb(240,240,240))
   위에 얹혀 실측 **3.97:1** 이다. 26px/400 은 WCAG 대형텍스트(24px 이상)라 요구가 3:1 이라
   통과하는데, 운영 선례대로 22px 로 줄이면 소형텍스트가 되어 요구가 4.5:1 로 올라가
   **3.97 < 4.5 = 위반**이 된다(X76 뷰포트 360 실측에서 5건 검출 → 되돌림).
   통과시키려면 글자색을 바꿔야 하는데 그건 타이포 범위 밖이라 크기를 그대로 둔다. */
@media (max-width: 768px) {
  .vision-core-page .vc-slot__tbd { font-size: 12px; }
}

/* ── (e) pledge-list.html · pledge-annual.html ─────────────────────────── */
@media (max-width: 768px) {
  .pl-badge { font-size: 12px; }   /* 운영 .badge ≤768 = 12px (:592) 와 동일 */
}

/* ── (f) 하한이라 줄이지 않는 것 (의도적 유지) ──────────────────────────
   .po-deptcard__name small (:8342, 12px) · .board-content .data-table thead th small (:8365, 12px)
   둘 다 이미 운영 본문성 텍스트 하한 12px 이다. 여기서 더 줄이면 결함 #4(모바일 11px)를
   다시 만드는 셈이라 3뷰포트 동일을 그대로 둔다.
   ------------------------------------------------------------------------ */
/* [FIX-TYPO-20260814:END] ================================================== */


/* [MERGE-20260814:START] ==================================================
   2026-08-14 4화면 재구성 CSS 병합 — vision-core / pledge-annual / pledge-budget+ledger
   원본 = _work/css_core5_20260814.css · css_roadmap_20260814.css · css_budget_20260814.css
   ★말미 배치가 필수다 — 아래 기존 규칙들을 의도적으로 덮는다:
     로드맵 24열용 6곳(:6723 :9703 :9708~12 :9715~19 :9733/34 :9831)
       특히 col:nth-child(n+5){38px} 가 5~11열을 전부 잡는다
     예산·가계부 3계열(:5770 rowgroup 세로선 · :9970~ 옛 min-width · :10008~ 옛 안내 임계)
   3파일 간 셀렉터 중복 0건 확인함. 되돌리기 = 이 START~END 구간 삭제
   ================================================================== */

/* ---- [1/3] vision-core (5대 핵심공약) ---- */
/* ==========================================================================
   5대 핵심공약 (vision-core.html) — 본문 재구성분  2026-08-14
   ★이 파일은 병합 전제로만 작성한다. HTML 에서 <link> 로 부르지 않는다
     (전달 규칙상 CSS 3종 고정 — common.css / style.css / main.css).
     리드가 style.css 의 「2. 5대 핵심공약 (vision-core.html)」 절(:9851~)에 병합한다.

   무엇이 바뀌었나
     구본문 = 이름 없는 빈 카드 5장(.ps-areacard--tbd / .vc-slot__num / .vc-slot__tbd).
     신본문 = 선거관리위원회 제출본 원문을 담은 공약별 표 5개 + 그 위에 인덱스 카드 5장.
     → **아래 선언들은 style.css:9857~9881 의 .ps-areacard--tbd / .vc-slots /
       .vc-slot__num / .vc-slot__tbd 를 대체한다.** 병합 시 그 4개는 지워도 된다
       (다른 페이지에서 쓰지 않는다 — 전 html 전수확인).
       .vision-core-page .data-note a(:9888) · .notice-box__desc(:9898) · .vc-cta(:9883)
       는 신본문도 그대로 쓴다. 남겨 둘 것.

   신규 색 도입 0 — 여기 쓰인 값은 전부 기존 토큰이거나 저장소에 이미 있는 값이다.
     #5b606b = style.css:5798 .data-note 주석색(흰 배경 6.31:1)과 같은 값.
   ========================================================================== */


/* ── (0) ★분야색 토큰 스코프 확장 — 없으면 배지가 통째로 안 칠해진다 ──────
   --po-f1~f5 는 style.css:8273 에서 **페이지 클래스 4개에만** 걸려 있다
   (.pledge-overview / .pledge-status / .pledge-annual / .pledge-list).
   .vision-core-page 는 그 목록에 없어서, 이 페이지에 .po-areacard--f1 을 그대로 가져오면
   `--c: var(--po-f1)` 이 미정의가 되고 `background: var(--c)` 가 무효 → 배경이 투명해진다.
   그러면 80px 원의 흰 글자가 흰 배경에 얹혀 **1.000:1 로 아예 안 보인다**(C5_40 이 실제로 잡음).
   rect·이탈·잘림 검사는 전부 통과한다 — 크기는 멀쩡하고 칠만 빠진 유형이라 기하로는 안 잡힌다.

   값은 style.css:8277~8281 과 **같은 토큰**이다. 신규 색 0. :root 승격도 하지 않는다
   (원 주석의 「페이지 클래스 스코프 유지」 방침 그대로).
   ★병합 시에는 이 블록을 따로 두지 말고 style.css:8273 의 셀렉터 목록에
     `.vision-core-page,` 한 줄을 더하는 편이 낫다. 정의가 한 곳으로 유지된다. */
.vision-core-page {
  /* 2026-08-24 수정 — [5대 공약 카드 색을 vision.html(민선9기 비전) 분야색과 통일]
     vision.html 의 .vision-fan__accent--* / .vision-item__title-strong 색 그대로.
     #b02c94·#5b3fa8 은 vision.html 정의부(style.css:5228~5229)와 같은 figma 단색. */
  --po-f1: var(--c-pink-500);    /* 미래를 그리는 중구  #C40051 */
  --po-f2: #b02c94;              /* 청년이 꿈꾸는 중구  figma 청년 강조색 */
  --po-f3: #5b3fa8;              /* 교육이 든든한 중구  figma 교육 강조색 */
  --po-f4: var(--c-mint);        /* 노후가 편안한 중구  #018582 */
  --po-f5: var(--c-blue-500);    /* 품격이 가득한 중구  #1342A6 */
}


/* ── (a) 명도대비 보정 ──────────────────────────────────────────────────
   .po-tbd(:6601) 는 var(--c-text-mute)=#858585 를 var(--c-gray-100)=#F9FAFB 위에 쓴다.
   실측 3.53:1 로 14px 소형텍스트 기준 4.5 에 못 미친다. 색만 주석색(#5b606b)으로 올린다
   — 배경·크기·정렬은 그대로라 다른 페이지의 .po-tbd 와 생김새가 어긋나지 않는다.
   (범위를 이 페이지로 좁혀 두었다. 전역 교체는 총괄현황 담당 몫이다) */
.vision-core-page .po-tbd { color: #5b606b; }


/* ── (b) 인덱스 카드 — .po-areagrid/.po-areacard 를 링크로 쓴다 ────────────
   총괄현황(pledge-overview:274~)과 같은 컴포넌트·같은 수치(19/7/10/9/32)를 그대로
   쓰되, 거기서는 시각표현이라 aria-hidden 이고 여기서는 본문 상세로 가는 실제 링크다.
   그래서 li 안에 a 를 넣는다 → 격자 칸(li)과 카드(a)가 분리되므로 높이를 다시 이어준다. */
.vision-core-page .vc-index > li { display: flex; }
.po-areagrid--visual .po-areacard {
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}
/* 키보드 초점 가시화(KWCAG 11-2). 헤더 검색창(common.css:1113)과 같은 방식·같은 색. */
.po-areagrid--visual .po-areacard:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}
/* 마우스 hover 는 .po-areacard:hover(:6210) 의 들어올림을 그대로 물려받는다. */
/* 2026-08-24 수정 — [스크롤 sticky] 공약사업 목록(.pl-anchors, style.css:8599)과
   스크롤 체감 통일 — 같은 sticky 레시피(top:0·z-index:20·흰 배경), 신규 색 0. */
.vision-core-page .vc-index-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 0 14px;
  background: var(--c-white);
}

/* ── (b-1) 풀블리드 회색 그라데이션 라인 — Figma node 10648:7009 Rectangle33(1920×57).
   "5대 공약" 섹션 위 구분 밴드. 100vw 풀블리드는 vision-hero 패턴 그대로. */
.vision-core-page .vc-divider {
  position: relative;
  /* 2026-08-24 수정 — 100vw 는 세로 스크롤바 폭을 포함해 오른쪽으로 밀린다(양옆 안 맞음).
     common.js 가 내려 주는 --sbw(스크롤바 폭)를 빼서 실제 표시폭에 딱 맞춘다. */
  width: calc(100vw - var(--sbw, 0px));
  left: 50%;
  margin: 64px 0 0 calc((100vw - var(--sbw, 0px)) / -2);   /* 인용 블록↔디바이더 갭 64 */
  height: 57px;
}
.vision-core-page .vc-divider img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── (b-2) "5대 공약" 제목 행 — Figma node 10648:6461·10648:7022 get_design_context 정확 반영
   제목: 본문 기본 .data-section__title(Pretendard 26/700)이 아니라 표제 서체 40px.
   부제: "카드를 누르면..." 은 그리드 아래 긴 안내문이 아니라 제목 옆에 나란히. */
.vision-core-page .vc-index-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 16px;
  /* 2026-08-24 수정 — figma: 디바이더↔제목 14 · 제목↔카드 20(카드바 상단패딩 10 포함) */
  margin-top: 14px;
  margin-bottom: 10px;
}
.vision-core-page .vc-index-head .data-section__title {
  margin: 0;
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: #111;
}
.vision-core-page .vc-index-head__note {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  letter-spacing: -1px;
  color: #5b606b;
}
@media (max-width: 768px) {
  .vision-core-page .vc-index-head .data-section__title { font-size: 26px; }
  .vision-core-page .vc-index-head__note { font-size: 14px; flex-basis: 100%; }
}

/* ── (c) 카드 비주얼 — Figma node 10648:6464 get_design_context 정확 반영 ──────────
   실제 스펙: 카드 배경 연보라(#f3f3ff) + 하단 46%에 분야색 그라데이션 틴트(투명→30%)
   + backdrop-blur, 이름 글자색도 흰 배지가 아니라 분야색 자체, 이름+숫자는 space-between
   이 아니라 가운데 정렬된 한 묶음(gap). 처음엔 카드 겉모양만 옮기고 이 디테일을 놓쳤다
   (2026-08-24 재작업).
   ★ 총괄현황(pledge-overview)에도 한때 이 비주얼을 같이 걸었다가 되돌렸다(2026-08-24)
   — 사용자가 "카드 디자인은 공약사업 목록·5대 핵심공약끼리만 맞추라 했지 총괄현황은
   아니다"라고 명확히 정정. 총괄현황 히어로 카드는 원래(일러스트 없는 흰 카드) 그대로 둔다.
   비주얼 적용 스코프 = UL 모디파이어 `.po-areagrid--visual` 하나로 관리:
   5대 핵심공약(vision-core .vc-index)·공약사업 목록(pledge-list .pl-anchors) 두 곳만 단다. */
.po-areagrid--visual > li { display: flex; }
.po-areagrid--visual .po-areacard {
  position: relative;
  isolation: isolate;   /* 2026-08-24 수정 — ::before(z-index:-1)가 카드 밖 먼 조상 기준으로
     새 나가 흰 배경 뒤로 숨던 버그 — 카드 스스로 스태킹 컨텍스트를 만들어 로컬로 가둔다. */
  flex-direction: column;
  align-items: stretch;
  gap: 24px;                    /* figma: 일러 하단(260)↔텍스트행 상단(284) = 24 */
  padding: 17px 20px 33px;      /* figma: 일러 top 17 · 텍스트행 하단 여백 33 */
  min-height: 389px;            /* figma 카드 높이 */
  background: #f3f3ff;
  border-color: transparent;
  border-radius: 20px;
  box-shadow: none;             /* 2026-08-24 수정 — figma 기본 상태엔 그림자 없음 */
  overflow: hidden;
}
.po-areagrid--visual .po-areacard::before {
  content: "";
  position: absolute;
  left: 0; right: -1%; bottom: 0;
  height: 129px;   /* 2026-08-24 수정 — figma 실측 고정값(46% 아님) */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 0%, transparent) 0%, color-mix(in srgb, var(--c) 30%, transparent) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  /* 2026-08-24 수정 — [블렌드 스택 컨텍스트 버그] z-index:0 을 주면 이 가상요소가 자체
     스태킹 컨텍스트를 만들어, 뒤에 그리는 형제(.po-areacard__illust img)의
     mix-blend-mode 가 얘를 못 뚫고 겉돈다(멀쩡히 칠은 되지만 안 섞임 — 실측으로 잡음).
     음수 z-index 로 낮춰서 형제들이 일반 문서흐름으로 그 위에 그려지게 한다
     (그러면 z-index 없는 형제도 스태킹 컨텍스트를 안 만들어 블렌드가 통과한다). */
  z-index: -1;
}
.po-areagrid--visual .po-areacard__illust {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 243px;   /* 2026-08-24 수정 — figma 일러 254×243 실측 */
  overflow: hidden;
  transition: height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease, margin-bottom .35s ease;
}
.po-areagrid--visual .po-areacard__illust img {
  width: 85%;    /* 2026-08-24 수정 — 카드 안 일러 0.85배 축소(사용자 지시) */
  height: 85%;
  object-fit: contain;
  display: block;
  /* 2026-08-24 수정 — [일러스트 누끼] Figma export 원본이 실제로는 투명 배경이 아니라
     연보라 사각형이 찍혀 있어 카드 그라데이션 위에 사각 경계가 보였다. mix-blend-mode
     로 감춰보려 했지만 확대해 보면 여전히 티가 나서, images/vision/card-*.png 자체를
     배경색 기준 거리로 알파 펀칭해 실제 투명 PNG로 교체했다(스크립트, 4x 줌 검증 완료).
     이제 블렌드 트릭 불필요 — 일반 렌더로 되돌린다. */
}
.po-areagrid--visual .po-areacard__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;   /* 2026-08-24 수정 — figma 이름↔숫자원 32 */
  width: 100%;
}
.po-areagrid--visual .po-areacard__text { flex: 0 0 auto; width: auto; }
/* 2026-08-24 수정 — figma: 이름 30px·자간 -1·1.2줄간(2줄 고정, 마크업 <br>) */
.po-areagrid--visual .po-areacard__name { color: var(--c); font-size: 30px; letter-spacing: -1px; line-height: 1.2; }
/* 2026-08-24 수정 — figma node 10648:6467: 숫자원 72px·숫자 34·"개" 19.
   재조정(사용자 피드백): 자간 -1.5px 로 조금 더 좁히고, 숫자만 600 으로 살짝 굵게("개"는 400 유지). */
.po-areagrid--visual .po-areacard__num { width: 72px; height: 72px; font-size: 34px; font-weight: 600; letter-spacing: -1.5px; gap: 2px; flex: 0 0 auto; }
.po-areagrid--visual .po-areacard__num em { font-size: 19px; font-weight: 400; font-style: normal; letter-spacing: -0.5px; }
@media (max-width: 1440px) {
  .po-areagrid--visual .po-areacard { min-height: 340px; }
  .po-areagrid--visual .po-areacard__illust { height: 196px; }
  .po-areagrid--visual .po-areacard__name { font-size: 25px; }
  .po-areagrid--visual .po-areacard__num { width: 62px; height: 62px; font-size: 28px; }
  .po-areagrid--visual .po-areacard__num em { font-size: 16px; }
  .po-areagrid--visual .po-areacard__row { gap: 20px; }
}
@media (max-width: 1024px) {
  .po-areagrid--visual .po-areacard { min-height: 0; }
  .po-areagrid--visual .po-areacard__illust { height: 170px; }
}
/* 2026-08-24 수정 — [모바일·태블릿] 카드바 → select 내비 (사용자 제안)
   ≤1024: 스티키 카드바가 화면을 다 덮던 문제 → 카드 그리드는 제자리 콘텐츠로 남기고
          (sticky 해제), 그 자리에 얇은 select(.area-mobile-select, common.js 생성)가
          상단에 붙어 분야 이동을 맡는다. 카드는 태블릿 3열, 모바일 2열(1열은 너무 커서 어색).
   ★ 앞서 넣었던 `position: static` 이 `.vision-core-page .vc-index-nav`(특이도 0,2,0)에
     져서 실제로 안 먹고 있었다 — 페이지 스코프까지 붙여 같은 무게로 덮는다. */
.area-mobile-select { display: none; }
@media (max-width: 1024px) {
  .vision-core-page .vc-index-nav,
  .vc-index-nav {   /* 2026-08-27 수정 — .pl-anchors 제거(고정 바는 .pl-stickybar 가 자체 규칙으로 숨는다) */
    position: static;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* 2026-08-24 수정 — [스크롤 시에만 노출] 카드와 셀렉트가 동시에 보여 중복이었다(실캡처 지적).
     평상시엔 숨기고, 카드바를 지나 스크롤됐을 때(.is-stuck — common.js sentinel)만 상단 바로 등장.
     position:fixed 라 흐름에 자리를 차지하지 않아 등장/퇴장 시 콘텐츠가 밀리지 않는다. */
  .area-mobile-select {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 13px 44px 13px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity .2s ease, transform .25s ease, visibility .25s;
    font-family: var(--ff-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-default);
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    background-image: url(../images/icons/ui/ic-select-chevron.svg);
    background-repeat: no-repeat;
    background-position: right 18px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  }
  /* 스크롤로 카드바를 지났을 때만 등장 (선행 형제라 :has 로 뒤의 nav 상태를 본다) */
  .board-content:has(.vc-index-nav.is-stuck) .area-mobile-select,
  /* 2026-08-27 수정 — 목록 페이지는 고정 바가 .board-content 바깥(.pledge-list-page 직속)으로
     옮겨져 select 도 그 밑에 꽂힌다 → 기준 조상을 .pledge-list-page 로 바꾼다. */
  .pledge-list-page:has(.pl-stickybar.is-stuck) .area-mobile-select {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .area-mobile-select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
  /* 카드는 접힘(is-stuck) 대상이 아니다 — sticky 가 아니므로 접힘 규칙이 붙어도 무시되게 */
  .vc-index-nav.is-stuck .po-areacard { padding: 17px 20px 33px; gap: 24px; min-height: 340px; border-radius: 20px; }
  .vc-index-nav.is-stuck .po-areacard__illust { height: 196px; opacity: 1; }
  .vc-index-nav.is-stuck .po-areacard__name { font-size: 25px; }
  .vc-index-nav.is-stuck .po-areacard__name br { display: inline; }
  .vc-index-nav.is-stuck .po-areacard__num { width: 62px; height: 62px; font-size: 28px; }
  .vc-index-nav.is-stuck .po-areacard__num em { font-size: 16px; }
  /* 태블릿 3열 — 2026-08-24 수정 (1열은 카드가 통째로 화면을 먹어 어색, 실캡처 지적) */
  .po-areagrid--visual { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .po-areagrid--visual .po-areacard { padding: 16px 14px 24px; min-height: 0; }
  .po-areagrid--visual .po-areacard__illust { height: 150px; }
  .po-areagrid--visual .po-areacard__row { gap: 12px; }
  .po-areagrid--visual .po-areacard__name { font-size: 21px; }
  .po-areagrid--visual .po-areacard__num { width: 54px; height: 54px; font-size: 22px; }
  .po-areagrid--visual .po-areacard__num em { font-size: 13px; }
}
@media (max-width: 768px) {
  /* 모바일 2열 */
  .po-areagrid--visual { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .po-areagrid--visual .po-areacard { padding: 12px 12px 18px; }
  .po-areagrid--visual .po-areacard__illust { height: 120px; }
  /* 좁은 폭에서 이름+숫자가 한 줄에 안 들어가면 줄바꿈해 카드 밖으로 밀지 않게 */
  .po-areagrid--visual .po-areacard__row { gap: 8px; flex-wrap: wrap; }
  .po-areagrid--visual .po-areacard__name { font-size: 17px; letter-spacing: -0.7px; }
  .po-areagrid--visual .po-areacard__num { width: 46px; height: 46px; font-size: 19px; }
  .po-areagrid--visual .po-areacard__num em { font-size: 11px; }
}
/* 2026-08-24 수정 — 초소형 화면(≤380) 보정: 카드가 잘리지 않게 한 단계 더 축소 */
@media (max-width: 380px) {
  .po-areagrid--visual { gap: 10px; }
  .po-areagrid--visual .po-areacard { padding: 10px 10px 14px; }
  .po-areagrid--visual .po-areacard__illust { height: 104px; }
  .po-areagrid--visual .po-areacard__name { font-size: 15px; letter-spacing: -0.8px; }
  .po-areagrid--visual .po-areacard__num { width: 40px; height: 40px; font-size: 16px; }
  .po-areagrid--visual .po-areacard__num em { font-size: 10px; }
}

/* ── (d) sticky 고정 시 일러스트 접기 — 요청: "상단에 붙으면 이미지는 접고 텍스트만"
   .is-stuck 은 common.js 의 공용 sentinel+IntersectionObserver 가 붙인다
   (scroll-fade.js SEL 에 .vc-index-nav·.pl-anchors 추가 — js/common.js 참고).
   2026-08-24 수정 — 공약사업 목록(.pl-anchors)도 같은 카드로 통일되며 접힘 규칙 공용화. */
.vc-index-nav.is-stuck .po-areacard {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 0;
  /* 2026-08-24 수정 — 접힘 상태에서 .po-areagrid--long 의 min-height:178px 가 남아
     카드 위가 텅 비어 보였다(실측). 접히면 내용 높이만 차지하게 해제. */
  min-height: 0;
}
.vc-index-nav.is-stuck .po-areacard__illust {
  height: 0;
  opacity: 0;
  margin-bottom: 0;
}
/* 2026-08-24 수정 — [접힘 발진(오실레이션) 버그] 바가 접히며 문서 높이가 줄면 브라우저
   스크롤 앵커링이 scrollY 를 보정하고, 그 보정이 sentinel 을 다시 뷰포트 안으로 되돌려
   is-stuck 이 풀리는 무한 루프(늘었다 줄었다 반복 — 실캡처 지적). 카드바를 쓰는 페이지의
   스크롤러에서 앵커링을 끈다. */
html:has(.po-areagrid--visual) { overflow-anchor: none; }
/* 2026-08-24 수정 — 같은 발진이 로드맵(.pa-tabs)·추진현황(.po-areatabs)에서도 났다.
   고정되며 카드가 접히면 문서 높이가 줄고 → 브라우저 스크롤 앵커링이 scrollY 를 보정 →
   sentinel 이 다시 뷰포트로 들어와 is-stuck 이 풀리는 루프(큰 카드가 깜빡임).
   접힘 바를 쓰는 화면에서는 앵커링을 끈다. */
html:has(.pa-tabs), html:has(.po-areatabs) { overflow-anchor: none; }
/* 2026-08-24 수정 — [고정 시 바 배경] 불투명 흰색 → 반투명 흰색 + 배경 블러(유리 효과) */
.vc-index-nav.is-stuck {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
/* 2026-08-24 수정 — [고정 시 컴팩트 타이포] 접힌 바가 상단을 크게 차지하지 않게
   글자·숫자원을 크게 축소(실캡처 지적). */
.vc-index-nav.is-stuck .po-areacard__row { gap: 12px; }
.vc-index-nav.is-stuck .po-areacard__name { font-size: 19px; line-height: 1.25; letter-spacing: -0.6px; }
.vc-index-nav.is-stuck .po-areacard__name br { display: none; }   /* 접힘에선 한 줄 */
.vc-index-nav.is-stuck .po-areacard__num { width: 46px; height: 46px; font-size: 20px; }
.vc-index-nav.is-stuck .po-areacard__num em { font-size: 12px; }
.vc-index-nav.is-stuck .po-areacard { padding-top: 10px; padding-bottom: 10px; border-radius: 12px; }


/* ── (c) 공약별 상세 섹션 ──────────────────────────────────────────────── */
.vision-core-page .vc-field--f1 { --c: var(--po-f1); }
.vision-core-page .vc-field--f2 { --c: var(--po-f2); }
.vision-core-page .vc-field--f3 { --c: var(--po-f3); }
.vision-core-page .vc-field--f4 { --c: var(--po-f4); }
.vision-core-page .vc-field--f5 { --c: var(--po-f5); }

/* 인덱스 카드와 같은 색을 제목 아래 선으로만 잇는다.
   ★색 세로선 callout(border-left)은 쓰지 않는다 — 명시적 금지 사항.
   선은 장식이 아니라 카드↔섹션 대응을 보이는 요소라 비텍스트 대비 3:1 을 지켜야 하는데
   --po-f1~f5 5색 전부 흰 배경에서 4.48:1 이상이다(검증기 C5_40 이 매 실행 재측정). */
/* 2026-08-24 수정 — [Figma 반영 · node 10648:6506] 제목 행 재구성:
   ⓐ 밑줄(3px 분야색)은 제목이 아니라 행 전체(.vc-field__head)에
   ⓑ 배지·제목 세로 가운데 정렬(기존 baseline 은 원형 배지가 아래로 처짐)
   ⓒ "이 공약에 속한 공약사업은 N건..." 노트를 표 아래가 아니라 행 오른쪽 끝에 */
.vision-core-page .vc-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--c);
  margin-bottom: 16px;
}
.vision-core-page .vc-field__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  word-break: keep-all;
}
.vision-core-page .vc-field__note {
  margin: 0;
  font-size: 14px;
  color: #5b606b;
}
.vision-core-page .vc-field__note strong { color: #111; font-weight: 400; }
/* 2026-08-24 수정 — [Figma 반영] 무채색 순위 칩 → 분야색 원형 숫자 배지.
   흰 글자는 배경(--c-gray-150) 대비가 아니라 --po-f1~f5 배지 배경 위 대비를 본다 —
   같은 5색 위 흰 글자는 .po-areacard__num(카드 배지)이 이미 이 페이지에 쓰고 있어 안전. */
.vision-core-page .vc-field__rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* 2026-08-24 수정 — figma node 10648:6507 40×40 */
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  position: relative;   /* 안쪽 .blind(absolute 1px)의 기준 조상 — 배지 밖으로 새며 정렬 틀어 보이는 것 방지 */
}
.vision-core-page .vc-field__name { flex: 0 1 auto; }
/* 링크로 들어온 자리가 화면 맨 위에 딱 붙지 않게 */
.vision-core-page .vc-field { scroll-margin-top: 24px; }
/* (카드 행 ↔ 첫 공약 섹션 여백은 §9-b 간격 규칙 옆(style.css:11766 부근)에 둔다 —
   거기 `.vision-core-page .board-content .data-section {margin-top:56px}` 과 같은 특이도라
   이 자리에 두면 뒤 규칙에 덮여 안 먹었다. 2026-08-24 실측으로 잡음) */


/* ── (d) 원문 목록 (○ / - 를 마크업으로 옮긴 자리) ────────────────────────
   PDF 원문의 줄머리 표식을 글자로 남기면 낭독기가 「동그라미」·「빼기」를 읽는다.
   표식만 목록 구조로 옮기고 문장은 한 글자도 건드리지 않았다(C5_30 이 전수 대조). */
.vision-core-page .vc-orig {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vision-core-page .vc-orig > li {
  position: relative;
  padding-left: 15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.vision-core-page .vc-orig > li + li { margin-top: 7px; }
.vision-core-page .vc-orig > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-text-sub);
}
/* 하위 항목(원문 「- 」) — 상위 항목의 부연이라 한 단 들여쓰고 톤을 낮춘다.
   크기는 줄이지 않는다(≤1280 에서 표 글자가 이미 15px 로 내려가 14px 하한에 닿는다). */
.vision-core-page .vc-orig--sub {
  margin: 7px 0 0;
  padding-left: 4px;
}
.vision-core-page .vc-orig--sub > li {
  color: #5b606b;
  padding-left: 15px;
}
.vision-core-page .vc-orig--sub > li + li { margin-top: 5px; }
.vision-core-page .vc-orig--sub > li::before {
  content: "";
  top: 0.78em;
  width: 8px;
  height: 1px;
  border-radius: 0;
  background: var(--c-text-sub);
}

/* 표 라벨 열 폭 — ★인라인 <col style="width:…"> 로 주지 않는다.
   인라인은 미디어쿼리로 못 이겨서 360 에서도 190px 를 그대로 먹는다. 그러면 328px 화면에서
   내용열이 **138px** 로 눌려 「혁신적인 / 도시개발을 통해 / 노후화 된 도시」처럼
   서너 어절마다 줄이 바뀐다(실측 — 공약1 섹션 높이 1,498px). 폭을 CSS 로 옮겨 좁은 화면에서
   라벨열을 줄이고 내용열을 돌려준다. */
.vision-core-page .vc-body .vc-col-label { width: 190px; }
.vision-core-page .vc-body .vc-col-label--wide { width: 220px; }


/* ── (e) 반응형 ────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .vision-core-page .vc-body .vc-col-label { width: 160px; }
  .vision-core-page .vc-body .vc-col-label--wide { width: 190px; }
}
@media (max-width: 768px) {
  /* 2026-08-24 수정 — 밑줄이 제목(.vc-field__title)→행 래퍼(.vc-field__head)로 옮겨져 셀렉터 교체 */
  .vision-core-page .vc-field__head { gap: 6px 12px; padding-bottom: 10px; border-bottom-width: 2px; }
  .vision-core-page .vc-field__title { gap: 8px; }
  .vision-core-page .vc-field__note { flex-basis: 100%; font-size: 13px; }
  .vision-core-page .vc-field__rank { width: 30px; height: 30px; font-size: 13px; }
  .vision-core-page .vc-orig > li + li { margin-top: 6px; }
}
/* 좁은 화면 — 라벨열을 두 줄로 접어서라도 줄이고, 셀 좌우 패딩도 줄여 본문 폭을 확보한다.
   ★표를 카드로 바꾸지는 않는다. style.css:5686·5820 의 「모바일 카드 변환 금지」 방침을
     그대로 지킨다(표 의미구조가 낭독기에서 깨지지 않게 하려는 규칙이다).
   실측 효과 @360 — 내용열 138px → 216px, 공약1 섹션 1,498px → 1,110px. */
@media (max-width: 640px) {
  .vision-core-page .vc-body .vc-col-label,
  .vision-core-page .vc-body .vc-col-label--wide { width: 96px; }
  .vision-core-page .vc-body .data-table tbody th[scope="row"] {
    white-space: normal;
    word-break: keep-all;
    padding: 10px 8px;
  }
  .vision-core-page .vc-body .data-table tbody td,
  .vision-core-page .vc-body .data-table thead th { padding: 10px 8px; }
}


/* ---- [3/3] pledge-budget · pledge-ledger (예산현황·공약가계부) ---- */
/* ============================================================================
   css_budget_20260814.css — 예산현황(pledge-budget) · 공약가계부(pledge-ledger)
   생성 2026-08-14 · 민선9기 매니페스토 개편

   ★ style.css 를 직접 고치지 않는다. 리드가 style.css 말미에 "추가만" 병합한다.
      (기존 규칙 수정·삭제 0 / :root 승격 0 / 신규 색·폰트·이미지 0)
   ★ border-left 색상 세로선 callout 0 (lessons #8).
   ★ 로컬 검증은 style.css 다음에 이 파일을 얹어 잰다(_work/R2_00_gate.py 가 주입).

   ── 무엇이 바뀌나 ───────────────────────────────────────────────────────────
   두 화면의 표 구조가 바뀌었다(마크업은 pledge-budget.html · pledge-ledger.html).

   예산현황
     · 연도 하드코딩 2026~2030 → 1년차~5년차   (구 15569 가 연도를 박아 기수 전용이 된 실수)
     · 재원 4번째 「민간·기타」 → 「기타(민자)」 (분기 자체점검 보고서 원문)
     · 합계행 「총계」 → 「소계」               (〃)
     · 재원별 표에 「확보액/집행액」 2단 도입   (〃 「연차별 예산 확보 및 집행 실적」 구조)
     · 분야별 표 2개는 구사이트 15573 sec6·sec7 구조로 되돌림(연도축 군더더기 제거)
   공약가계부
     · 「재원조달↔재원소요」(출처 없음) → 「확보액·집행액·집행률·잔액」
       확보액·집행액 = 실측 존재값 / 집행률·잔액 = 그 둘의 산술 파생 / 불용·이월 = 컬럼 없음

   ── 병합 순서 주의 — 이 파일은 style.css 의 아래 기존 규칙을 "덮는다". 반드시 뒤에.
     :5770  .data-table tbody th:first-child { border-left: 0 }   (rowgroup 연속행에서 오작동)
     :9970~ .data-table--budget/-x/--ledger { min-width: 1000/1080/760px }  (옛 열 구성용)
     :10008~ .pl-scroll-hint 임계값 1110 / 1199 / 843             (옛 표 폭 기준)
   ============================================================================ */


/* ==========================================================================
   1. 표 폭 — <col> 과 thead 첫 행 th 두 층 모두
   ==========================================================================
   style.css:7607 이 769~1280px 구간에서 col 폭을 통째로 해제한다.
     @media (min-width:769px) and (max-width:1280px) { .data-table col { width:auto !important } }
   그래서 두 층에 같은 값을 선언한다. table-layout:fixed 는 col 폭이 없으면 첫 행 셀
   폭으로 칼럼을 정하므로 결과가 같다.
   ★ fixed 레이아웃에서 colspan 셀 폭은 칼럼에 "균등" 분배된다 — 연차 5칸을 묶은
     헤더 셀에 5×칸폭을 주면 정확히 나뉜다.

   폭은 전부 잉크 실측에서 역산했다(_work/R2_20_ink.py · R2_20_ink.json). 눈대중 0.
   측정 문자열에는 나중에 들어올 값의 형태도 넣었다 — 지금만 맞고 데이터가 들어오면
   깨지는 폭은 소용이 없다.

   실측(1920px · 본문 16px/700 · 헤더 15px/700 · 좌우 패딩 32) —
     금액 최대   「152,347」 61.50 + 32 =  93.5  → 100px
     집행률      「100.0%」  56.33 + 32 =  88.3  → 116px
     재원 최장   「기타(민자)」63.57 + 32 =  95.6  → 116~120px
     분야 최장   「미래를 그리는 중구」118.02 + 32 = 150.0 → 180px (어절이 있어 keep-all 로 두 줄도 가능)
     구분        「확보액」  38.91 + 32 =  70.9  →  92px
     연차 헤더   「4년차」   35.80 + 32 =  67.8  → 100px

   표별 합계
     재원별 확보·집행 (8열) =  92 + 120 + 100 + (100×5) = 812px
     분야별 연차소요   (7열) = 180 + 100 + (100×5)       = 780px
     분야별 재원현황   (6열) = 180 + 100 + (116×4)       = 744px
     가계부            (5열) = 116 + 100 + 100 + 116 + 116 = 548px
   ========================================================================== */

.pledge-budget-page .data-table--budget,
.pledge-budget-page .data-table--budget-x,
.pledge-ledger-page .data-table--ledger { table-layout: fixed; }

/* --- (1-1) 재원별 확보·집행 (8열) : 구분 | 재원 | 계 | 1~5년차 --- */
.pledge-budget-page .data-table--rowspan.data-table--budget { min-width: 812px; }
.pledge-budget-page .data-table--rowspan.data-table--budget col:nth-child(1) { width: 92px; }
.pledge-budget-page .data-table--rowspan.data-table--budget col:nth-child(2) { width: 120px; }
.pledge-budget-page .data-table--rowspan.data-table--budget col:nth-child(3) { width: 100px; }
.pledge-budget-page .data-table--rowspan.data-table--budget col:nth-child(n+4) { width: 100px; }
.board-content .data-table.data-table--rowspan.data-table--budget thead tr:first-child th:nth-child(1) { width: 92px; }
.board-content .data-table.data-table--rowspan.data-table--budget thead tr:first-child th:nth-child(2) { width: 120px; }
.board-content .data-table.data-table--rowspan.data-table--budget thead tr:first-child th:nth-child(3) { width: 100px; }
.board-content .data-table.data-table--rowspan.data-table--budget thead tr:first-child th:nth-child(4) { width: 500px; }

/* --- (1-2) 분야별 연차 소요예산 (7열) : 분야 | 계 | 1~5년차 --- */
.pledge-budget-page .data-table--budget:not(.data-table--rowspan) { min-width: 780px; }
.pledge-budget-page .data-table--budget:not(.data-table--rowspan) col:nth-child(1) { width: 180px; }
.pledge-budget-page .data-table--budget:not(.data-table--rowspan) col:nth-child(n+2) { width: 100px; }
.board-content .data-table.data-table--budget:not(.data-table--rowspan) thead tr:first-child th:nth-child(1) { width: 180px; }
.board-content .data-table.data-table--budget:not(.data-table--rowspan) thead tr:first-child th:nth-child(2) { width: 100px; }
.board-content .data-table.data-table--budget:not(.data-table--rowspan) thead tr:first-child th:nth-child(3) { width: 500px; }

/* --- (1-3) 분야별 재원현황 (6열) : 분야 | 계 | 국비 | 시비 | 구비 | 기타(민자) --- */
.pledge-budget-page .data-table--budget-x { min-width: 744px; }
.pledge-budget-page .data-table--budget-x col:nth-child(1) { width: 180px; }
.pledge-budget-page .data-table--budget-x col:nth-child(2) { width: 100px; }
.pledge-budget-page .data-table--budget-x col:nth-child(n+3) { width: 116px; }
.board-content .data-table.data-table--budget-x thead tr:first-child th:nth-child(1) { width: 180px; }
.board-content .data-table.data-table--budget-x thead tr:first-child th:nth-child(2) { width: 100px; }
.board-content .data-table.data-table--budget-x thead tr:first-child th:nth-child(n+3) { width: 116px; }

/* --- (1-4) 가계부 (5열) : 구분 | 확보액 | 집행액 | 집행률 | 잔액 --- */
.pledge-ledger-page .data-table--ledger { min-width: 548px; }
.pledge-ledger-page .data-table--ledger col:nth-child(1) { width: 116px; }
.pledge-ledger-page .data-table--ledger col:nth-child(2),
.pledge-ledger-page .data-table--ledger col:nth-child(3) { width: 100px; }
.pledge-ledger-page .data-table--ledger col:nth-child(n+4) { width: 116px; }
.board-content .data-table.data-table--ledger thead tr:first-child th:nth-child(1) { width: 116px; }
.board-content .data-table.data-table--ledger thead tr:first-child th:nth-child(2),
.board-content .data-table.data-table--ledger thead tr:first-child th:nth-child(3) { width: 100px; }
.board-content .data-table.data-table--ledger thead tr:first-child th:nth-child(n+4) { width: 116px; }


/* ==========================================================================
   2. ★rowgroup 연속행의 세로선 복원
   ==========================================================================
   style.css:5770 은 "표 맨 왼쪽 칸에는 좌측 보더를 주지 않는다"는 규칙이다.
     .data-table tbody th:first-child,
     .data-table tbody td:first-child { border-left: 0; }
   그런데 rowspan 으로 「확보액」 th 가 묶이면, 2~5행의 DOM 첫 셀은 「국비」th 다.
   실제로는 두 번째 칼럼인데 :first-child 에 걸려 좌측 세로선이 지워진다.
   :5775 의 `.data-table--rowspan tbody td:first-child` 복원 규칙은 **td 만** 다뤄서
   th 로 시작하는 우리 표는 못 살린다. th 도 함께 복원한다.
   (진짜 첫 칼럼인 「확보액」 th 는 scope="rowgroup" 이므로 그 셀만 다시 0 으로 둔다) */
.board-content .data-table--rowspan tbody th:first-child { border-left: 1px solid var(--c-line); }
.board-content .data-table--rowspan tbody th[scope="rowgroup"]:first-child { border-left: 0; }


/* ==========================================================================
   3. 셀 표기
   ========================================================================== */
/* 라벨 열(구분·재원·분야)은 가운데정렬이 읽기 좋다 — 값이 전부 숫자인 표다.
   style.css:5778 의 `tbody th[scope=row] { text-align:left; white-space:nowrap }` 를 덮는다. */
.board-content .data-table--budget tbody th[scope="row"],
.board-content .data-table--budget-x tbody th[scope="row"],
.board-content .data-table--ledger tbody th[scope="row"],
.board-content .data-table--budget tbody th[scope="rowgroup"] {
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}
/* 분야명은 어절이 있어 keep-all 로 자연스럽게 두 줄이 된다 */
.board-content .data-table--budget-x tbody th[scope="row"],
.board-content .data-table--budget:not(.data-table--rowspan) tbody th[scope="row"] { line-height: 1.45; }

/* 「산출」 꼬리표 — 집행률·잔액이 원자료가 아니라 계산값임을 헤더에서 밝힌다.
   색은 style.css 가 이미 쓰는 #5b606b(신규 색 아님). 배경은 헤더 바탕(--c-gray-150) 위. */
.pledge-ledger-page .pg-derived {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: #5b606b;
}
.pledge-ledger-page .pg-derived::before { content: "("; }
.pledge-ledger-page .pg-derived::after  { content: ")"; }

/* 값 자리를 한 덩어리로 접은 .po-tbd 블록 — 문구를 세로 가운데에.
   (style.css:9978 이 이미 같은 값이다. 표 구조가 바뀌어도 유지된다는 것을 여기 명시해 둔다) */
.pledge-budget-page .data-table .po-tbd,
.pledge-ledger-page .data-table .po-tbd { vertical-align: middle; }

/* 카드 안 칩 — 문구가 「미정」(2자)에서 「공표 후 게시」(6자)로 길어졌다.
   style.css:9950 의 white-space:nowrap 이 좁은 폭에서 라벨을 밀어내지 않게 줄바꿈을 허용한다. */
.pledge-budget-page .b2-chip,
.pledge-ledger-page .b2-chip { white-space: normal; word-break: keep-all; text-align: center; }


/* ==========================================================================
   4. 가로스크롤 안내 — "진짜로 밀리는 폭"에서만
   ==========================================================================
   기존 :10008~10016 은 옛 표 폭(1000/1080/760) 기준이라 새 표에 안 맞는다.
   ★ 실측(이분탐색, _work/R2_60_hint_threshold.py · R2_60_hint.json)으로 표마다 다시 쟀다.
     안내가 거짓말이 되는 두 방향을 다 막는다 — ①넘침 없는데 안내 ②넘치는데 안내 없음.

       재원별 확보·집행 (812px) : 뷰포트 902px 부터 넘침 0  → 901 이하에서 안내
       분야별 연차소요   (780px) :        867px 부터 넘침 0  → 866 이하
       분야별 재원현황   (744px) :        827px 부터 넘침 0  → 826 이하
       가계부            (548px) :        588px 부터 넘침 0  → 587 이하

   ※ 세로 스크롤바 폭이 다른 환경에서는 경계가 ±15px 흔들릴 수 있다.
     표 폭·열 구성이 바뀌면 R2_60 을 다시 돌려 이 숫자를 갱신할 것.
   ========================================================================== */
/* ★먼저 "끈다" — 이게 없으면 실측이 무의미하다.
   기존 :10008~10016 은 우리보다 넓은 폭까지 안내를 켠다(--budget ≤1110 / -x ≤1199 / --ledger ≤843).
   내 파일은 "추가"만 하므로, 임계값 위 구간을 명시적으로 끄지 않으면 옛 규칙이 그대로 살아
   넘침 0 인데 「미세요」가 뜬다. 실측에서 실제로 그랬다(1024px 에서 4개 표 중 3개 불일치).
   ※ `.data-table--budget-x` 는 클래스 토큰이 달라 `--budget` 규칙에 안 걸린다(별도 처리). */
@media (min-width: 902px) {
  .pledge-budget-page .data-section:has(.data-table--rowspan.data-table--budget) .pl-scroll-hint { display: none; }
}
@media (min-width: 867px) {
  .pledge-budget-page .data-section:has(.data-table--budget:not(.data-table--rowspan)) .pl-scroll-hint { display: none; }
}
@media (min-width: 827px) {
  .pledge-budget-page .data-section:has(.data-table--budget-x) .pl-scroll-hint { display: none; }
}
@media (min-width: 588px) {
  .pledge-ledger-page .data-section:has(.data-table--ledger) .pl-scroll-hint { display: none; }
}

@media (max-width: 901px) {
  .pledge-budget-page .data-section:has(.data-table--rowspan.data-table--budget) .pl-scroll-hint { display: block; }
}
@media (max-width: 866px) {
  .pledge-budget-page .data-section:has(.data-table--budget:not(.data-table--rowspan)) .pl-scroll-hint { display: block; }
}
@media (max-width: 826px) {
  .pledge-budget-page .data-section:has(.data-table--budget-x) .pl-scroll-hint { display: block; }
}
@media (max-width: 587px) {
  .pledge-ledger-page .data-section:has(.data-table--ledger) .pl-scroll-hint { display: block; }
}

/* [MERGE-20260814:END] ================================================== */

/* [FIX-STICKY-20260814:START]
   pledge-annual 상단 sticky 분야탭 보상.
   .pa-tabs 는 sticky top:0 z-index:20 이고 높이가 769px 미만 70px, 769~1299px 168px, 1300px 이상 175px 이다.
   표 영역에 scroll-margin-top 이 없어 키보드 초점이 표로 갈 때 표 상단이 탭바에 가렸다.
   실측 겹침은 360 에서 70px, 1440 에서 175px.
   형제 화면 pledge-list 는 이미 .pl-section 에 같은 보상이 있고 이 화면만 빠져 있었다.
   손스크롤 중 헤더가 탭바 아래로 지나가는 것은 sticky 의 정상 동작이라 여기서 다루지 않는다.
   되돌리기는 이 START~END 구간 삭제.
*/
.pledge-annual-page .data-section,
.pledge-annual-page .data-table-wrap { scroll-margin-top: 207px; }
@media (max-width: 768px) {
  .pledge-annual-page .data-section,
  .pledge-annual-page .data-table-wrap { scroll-margin-top: 98px; }
}
/* [FIX-STICKY-20260814:END] */

/* [MERGE-ANNUAL2-20260814:START]
   pledge-annual 요청서형 19열(소관부서 제거) CSS. 원본 = _work/css_annual2_20260814.css
   앞선 11열판 블록은 이 병합에서 제거했다(마크업 불일치·안내 임계 어긋남).
   되돌리기는 이 START~END 구간 삭제.
*/
/* ============================================================================
   css_annual2_20260814.css — 분기별(연차별) 추진 로드맵 (pledge-annual.html)
   ★요청서·구 사이트(15569) 형태로 재제작한 20열 표 전용
   생성 2026-08-14 · 민선9기 매니페스토 개편

   ★ style.css 를 직접 고치지 않는다. 리드가 style.css 말미에 "추가만" 병합한다.
      (기존 규칙 수정·삭제 0 / :root 승격 0 / 신규 색·폰트·이미지 0)
   ★ border-left 색상 세로선 callout 0 (lessons #8).
   ★ 로컬 검증은 style.css 다음에 이 파일을 얹어 잰다(_work/A4_00_gate.py 가 주입).

   ── 무엇이 바뀌나 ───────────────────────────────────────────────────────────
   열 구조를 11열(연번·공약명·구분·소관부서 + 1~5년차 + 점검 2열)에서
   **20열**로 바꾼다 — 참고 이미지(개편안 참고③)·구 사이트 15569 의 구조 그대로다.

     관리번호 | 공약명 | 세부사업 ‖ 연차별 추진계획 (연도 5 × 분기 16)   = 19열

   · 최소 행 단위가 **세부사업**이다. 관리번호·공약명이 rowspan 으로 묶는다.
   · ★소관부서 칸은 **없다**(사용자 결정 2026-08-14). 참고 이미지(관악)에도 없고,
     고정 칸이 표 폭의 절반을 먹어 1280px 화면에서 2030년 칸이 잘렸다.
     같은 정보는 「공약사업 목록」·「공약사업 총괄현황」 화면에 그대로 있다.
   · 헤더 3단 : [항목4 + 연차별추진계획 colspan16] / [연도 5칸] / [분기 16칸]
   · 값 칸은 **연도 단위 병합**, 그 안에 **분기 단위 막대**. 텍스트=연도 / 막대=분기.
   · 분기 칸 수는 임기에 맞춘다 — 2026: 3·4분기(2) / 2027~2029: 1~4분기(4) / 2030: 1·2분기(2).

   ── 병합 순서 주의 — 이 파일은 style.css 의 아래 기존 규칙을 "덮는다". 반드시 뒤에.
     :6723  .data-table--annual { min-width: 1100px }
     :6727  .data-table--annual thead th { white-space: nowrap }      (3단 헤더에도 유지)
     :6740  thead tr:last-child th:first-child { border-left: … }     (민선8기 2단 헤더용)
     :8120~ col:nth-child(1~9) 폭                                      (민선8기 9열용)
     :9711  .pledge-annual-page .data-table--annual { min-width: 1360px }   (24열용)
     :9716~ col:nth-child(1~4) / col:nth-child(n+5) { width: 38px }         (24열용)
     :9723~ thead tr:first-child th:nth-child(1~5) { width: … 760px }       (24열용)
     :9741~ thead tr:nth-child(2)(3) th 패딩                                (24열용)
     :9765  .po-tbd 계열 — 이 판에서는 마크업 자체가 사라져 매칭 소멸
     :9839  @media (min-width:1511px) .icon-swipe-show{display:none}  (표 폭 1360 기준)
   ★ 구 css_roadmap_20260814.css(11열판)는 이 파일로 대체된다. 함께 병합하지 말 것.
   ============================================================================ */


/* ==========================================================================
   1. 표 골격 — 20열
   ==========================================================================
   폭은 전부 잉크 실측에서 역산했다(_work/A4_20_ink.py · A4_20_ink.json).
   눈대중 상수 0. 기준은 **1920px 구간(본문 16px / 헤더 15px)** — 폰트가 가장 커서
   여기서 들어가면 769~1280(13px)·768 이하(14px)에서는 자동으로 남는다.

     관리번호  헤더 「관리번호」 잉크 51.86 + 헤더 좌우패딩 12(축소)  → 68px
               (값 「5-32」는 30.94 + 본문패딩 32 = 62.9 로 더 작다.
                헤더 패딩을 32→12 로 줄여 84px 를 68px 로 낮췄다 — 아래 ★폭 예산 참조)
     공약명    최장 641.7(교통약자…) — 칸 안에서 3줄로 접는다.
               본문폭 228px 기준 3줄이면 684px 를 담는다               → 260px
     세부사업  최장 「주민 의견수렴·공청회」 132.5 + 패딩 32 = 164.5.
               가운뎃점은 기본 줄바꿈 기회가 아니므로 「의견수렴·공청회」
               8자 128px 가 통째로 들어가야 한다 → 128+32 = 160        → 172px
     분기 1칸  ①헤더 3단의 숫자 1자(8.3+패딩10)=18.3
               ②2분기 연도 칸(2026·2030)에 연도 문구가 들어가야 한다.
                 한글 1자 ≈ 0.865em → 16px 에서 4자 55.4px, 칸 좌우패딩 16
                 → 2칸 ≥ 71.4px                                        → 40px
               (2칸 = 80px, 내용폭 64px ≥ 55.4 · 여유 8.6px)

   합계 = 68 + 260 + 172 + (40 × 16) = **1,140px**

   ★★폭 예산 — 왜 1,140px 인가
     1280px 화면의 본문(래퍼) 폭이 **1,152px** 이다(실측). 표가 그보다 넓으면
     오른쪽 2030년 칸이 잘려 나간다(1차 판 1,362px 에서 실제로 그랬다).
     그래서 **1,152 − 여유 12 = 1,140px** 를 상한으로 잡았다.
       1280 → 래퍼 1,152 ≥ 1,140  ✅ 안 잘림
       1440 → 래퍼 1,296 ≥ 1,140  ✅
       1920 → 래퍼 1,540 ≥ 1,140  ✅
       1024 → 래퍼   922 < 1,140  → 가로스크롤 유지(태블릿·모바일은 원래 스크롤)
     줄인 곳은 ①소관부서 칸 제거(−174) ②관리번호 84→68(헤더 패딩 축소, −16)
     ③분기 42→40(−32) 세 곳이고, 셋 다 잉크 실측 여유 안에서만 줄였다.
   -------------------------------------------------------------------------
   ★ 폭을 <col> 과 thead 첫 행 th "두 층 모두"에 준다.
     style.css:7607 이 태블릿 구간에서 col 폭을 통째로 해제하기 때문이다.
       @media (min-width:769px) and (max-width:1280px) {
         .board-content .data-table col { width: auto !important; }
       }
     col 만 주면 그 구간에서 19칼럼이 균등분배되어 공약명이 짓눌린다
     (「안 넘쳤지만 짓눌린」 상태 — 넘침 검사만으로는 못 잡는 유형 · lessons #19).
   ★ colspan 셀의 폭은 칼럼에 "균등" 분배된다(CSS 2.1 fixed table layout).
     그래서 4번째 th(분기 16칸)에 40×16=640 을 준다. 분기 칸이 전부 같은 폭이라
     균등분배 결과가 col 층과 정확히 일치한다. (폭이 다른 칸을 섞으면 두 층이 어긋난다) */
.board-page .pledge-annual-page .data-table--annual.data-table--annual2 { min-width: 1140px; table-layout: fixed; }

/* (1) col 폭 — 1281px 이상 · 768px 이하에서 실제로 서는 층.
   기존 :8120~(9열용) 과 :9716~(24열용, col:nth-child(n+5){38px}) 를 전부 덮어야 한다.
   특히 n+5 는 5~20 을 전부 잡으므로 같은 범위를 다시 덮어쓴다. */
.board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(1):nth-child(-n+19) { width: 68px; }
.board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(2):nth-child(-n+19) { width: 260px; }
.board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(3):nth-child(-n+19) { width: 172px; }
.board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(n+4):nth-child(-n+19) { width: 40px; }
/* ★:nth-child(-n+19) 를 덧붙여 특정도를 한 단계 올렸다.
   style.css 에 이미 병합된 20열판 블록에 `col:nth-child(4){width:174px}`(소관부서)가
   남아 있는데, 19열이 되면서 그 4번째 칸이 **첫 분기 칸**이 된다. 같은 특정도로 두면
   병합 순서에만 기대게 되므로 특정도로 확실히 이기게 한다. */

/* (2) thead 첫 행 폭 — 769~1280px 에서 col 폭이 해제될 때 대신 서는 층. 값은 (1)과 동일.
   기존 :9723~ 의 th:nth-child(5){760px}(24열용)을 반드시 덮는다. */
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(1):nth-child(-n+4) { width: 68px; padding-left: 6px; padding-right: 6px; }
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(2):nth-child(-n+4) { width: 260px; }
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(3):nth-child(-n+4) { width: 172px; }
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(4):nth-child(-n+4) { width: 640px; }
/* 「관리번호」는 nowrap 이라 기본 좌우패딩 32px 를 그대로 두면 84px 가 필요하다.
   패딩만 12px 로 줄여 잉크 51.86 + 12 = 63.86 → 68px 칸에 여유 4.1px 로 들어간다. */

/* ★ 가로스크롤 래퍼를 위치 기준(containing block)으로 만든다.
   caption.blind 와 세부사업 칸의 .blind(추진기간 낭독문)는 position:absolute 다.
   기준이 될 조상이 없으면 기준이 문서 최상위가 되고, 표 오른쪽 끝에 놓인 blind 가
   문서를 가로로 늘려 "빈 흰 여백으로 스크롤되는" 유령 가로스크롤을 만든다
   (24열판에서 실제로 겪은 사고 — 360px 에서 scrollWidth 1,361 / scrollX 1,001px).
   :9737 이 .data-table-wrap 에 이미 걸어 두었지만, 병합 순서에 기대지 않고 다시 쓴다. */
.pledge-annual-page .data-table-wrap { position: relative; }

/* 헤더 3단 — 칸이 좁아진 만큼 좌우 패딩을 줄인다.
   기본 .board-content .data-table thead th { padding:13px 16px } 은 32px 를 먹어
   42px 칸에 숫자 한 자도 못 넣는다. */
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:nth-child(2) th { padding-left: 6px; padding-right: 6px; }
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:nth-child(3) th { padding-left: 5px; padding-right: 5px; font-weight: 500; }
/* 연도 칸 경계를 헤더에서 눈에 띄게 — 분기 숫자만으로는 연도 묶음이 안 읽힌다.
   (색 블록·좌측 색세로선 callout 은 쓰지 않는다 — lessons #8) */
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:nth-child(2) th + th { border-left: 1px solid var(--c-line); }


/* ==========================================================================
   2. 고정 3칸 — 관리번호 · 공약명 · 세부사업
   ========================================================================== */
.board-content .data-table.data-table--annual.data-table--annual2 tbody td.pa-cell-no {
  font-weight: 600;
  color: var(--c-text-default);
  white-space: nowrap;
  vertical-align: top;
  padding-top: 14px;
}

/* 공약명 — rowspan 으로 세부사업 행들을 묶는 행그룹 머리.
   :6729 가 이미 좌측정렬·굵게로 잡아 둔다(th[scope=row] 선택자라 rowgroup 에는 안 걸린다).
   그래서 여기서 같은 값을 rowgroup 에 다시 준다. */
.board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title {
  text-align: left;
  background: transparent;
  font-weight: 700;
  color: var(--c-text-default);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 괄호 안 긴 나열이 들어와도 최후에는 끊는다 */
  line-height: 1.5;
  vertical-align: top;
}
/* 구분(신규/계속)은 별도 칸을 두지 않고 공약명 아래에 배지로 붙인다
   — 참고 이미지처럼 고정 칸을 최소로 두면서 정보를 지킨다. */
.board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title .pl-badge {
  display: inline-block;
  margin: 6px 0 0;
  vertical-align: middle;
}
.board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title .pl-note {
  font-weight: 400;
  /* .pl-note 의 var(--c-text-sub) #777676 은 흰 배경에서 4.11:1 로 AA(4.5) 미달이다.
     전역을 고치면 pledge-list 까지 바뀌므로 이 표 안에서만 올린다(#5b606b = 5.94:1). */
  color: #5b606b;
}

/* (소관부서 칸 규칙은 칸 자체를 없애면서 함께 삭제했다 — 2026-08-14) */

/* 세부사업 — 이 표의 진짜 행머리(scope=row) */
.board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-sub {
  text-align: left;
  background: transparent;
  font-weight: 500;
  color: var(--c-text-default);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
  /* 2026-08-24 수정 — top 이라 한 줄짜리 사업명이 칸 위에 붙어 막대와 어긋나 보였다 → 세로 가운데 */
  vertical-align: middle;
}


/* ==========================================================================
   3. 값 칸 — 분기 막대 + 연도 문구
   ==========================================================================
   ★ 막대는 "칸의 안쪽 여백"이 아니라 "칸 전체 폭"을 기준으로 잘려야 분기 경계에 맞는다.
     칸(colspan 4)은 168px 인데 좌우 패딩 8px 를 빼면 내용폭이 152px 다. 152 의 25% 는
     38px 로 분기 폭 42px 과 어긋난다 — 막대가 분기 경계에서 밀린다.
     그래서 막대 트랙에만 좌우 음수 마진(-8px)을 줘 패딩 박스 전체를 쓰게 한다.
     그러면 25% = 42px 로 분기 경계와 정확히 맞는다.
   ★ 막대 위치(left/right %)는 빌더가 계산해 인라인으로 준다 — CSS 는 색과 높이만 맡는다.
     (연도마다 칸 수가 2 또는 4 로 달라 CSS 한 벌로는 못 낸다) */
.board-content .data-table.data-table--annual.data-table--annual2 tbody td.pa-q {
  padding: 9px 8px 11px;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 5자 연속 토큰이 새로 들어와도 삐져나오지 않게 */
  line-height: 1.45;
}
.pa-bar {
  position: relative;
  display: block;
  height: 6px;
  margin: 2px -8px 8px;
  border-radius: 3px;
  background: var(--c-gray-200);   /* 비활성 구간 레일 — 분기 폭을 눈으로 잡아 준다 */
}
.pa-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  /* ★막대 색 = 분야색. 신규 색을 만들지 않는다.
     참고 이미지의 분홍은 관악구 색이라 그대로 쓰면 우리 팔레트가 깨진다. */
  background: var(--c);
}
/* 값이 없는 해 — 「-」 하나. 막대도 두지 않는다(칠할 구간이 없다는 뜻이 그대로 읽힌다) */
.board-content .data-table.data-table--annual.data-table--annual2 tbody td.pa-q--none {
  /* var(--c-text-mute) #858585 는 흰 배경에서 3.9:1 로 AA 미달이다.
     이 페이지에서 이미 쓰는 #5b606b(5.94:1)로 올린다 — 신규 색이 아니다. */
  color: #5b606b;
}
/* 연도 경계 세로선 — 어느 해의 칸인지 눈으로 끊어 준다.
   ※ 색 세로선이 아니라 표의 기본 --c-line 이다(lessons #8 의 색강조 callout 과 무관). */
.board-content .data-table.data-table--annual.data-table--annual2 tbody td.pa-q + td.pa-q { border-left: 1px solid var(--c-line); }


/* ==========================================================================
   4. 분야 제목 ● 과 분야색
   ==========================================================================
   --po-f1~f5 는 style.css(W3 병합 블록) 단 한 곳에서만 정의된다. 여기서 재정의하지 않고
   섹션에 --c 로 실어 막대·점이 함께 쓰게 한다(.pl-anchor--f1 계열과 같은 방식). */
.pa-sec--f1 { --c: var(--po-f1); }
.pa-sec--f2 { --c: var(--po-f2); }
.pa-sec--f3 { --c: var(--po-f3); }
.pa-sec--f4 { --c: var(--po-f4); }
.pa-sec--f5 { --c: var(--po-f5); }

.pledge-annual-page .pa-sec__title { display: flex; align-items: center; gap: 10px; }
.pledge-annual-page .pa-sec__title::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}


/* ==========================================================================
   5. 가로 이동 안내 — "진짜로 밀리는 폭"에서만
   ==========================================================================
   ★표가 1,140px 로 줄면서 임계값이 크게 내려갔다.
     _work/A4_60_hint.py 이분탐색 실측: **뷰포트 1,267px 부터 넘침 0**
     (1,266px 에서 1.00px 넘침). 즉 1280·1440·1920 에서는 밀 것이 없다.

   ★style.css 에 이미 병합된 옛 규칙 두 개를 **덮어야 한다**.
       @media (min-width:1511px)                    { … display:none }   (11열판, 표 1360 기준)
       @media (min-width:1511px) and (max-width:1512px) { … display:block } (20열판이 메운 2px 구멍)
     두 번째는 이제 **틀렸다** — 1511~1512px 에는 넘침이 없는데 안내를 켜 버린다.
     내 파일에서 지워도 병합본에는 남으므로, 선택자에 `main` 을 하나 더 붙여
     **특정도 (0,3,1) > (0,3,0)** 으로 이기게 한다(병합 순서에 기대지 않는다).
     ※ 리드가 재병합할 때 옛 두 블록을 걷어내면 이 `main` 접두는 없어도 된다.
   ※ 표 폭·열 구성이 또 바뀌면 A4_60_hint.py 를 다시 돌려 이 숫자를 갱신할 것.
   ※ 세로 스크롤바 폭이 다른 환경에서는 경계가 ±15px 흔들릴 수 있다. */
@media (min-width: 1267px) {
  main.board-page .pledge-annual-page .icon-swipe-show { display: none; }
}


/* ==========================================================================
   6. ★모바일 보정 (≤768px) — 첫 화면에 「관리번호 + 공약명 + 세부사업」이 들어오게
   ==========================================================================
   실측한 문제(360px):
     래퍼 폭 328px 인데 고정 칸이 84 + 260 = 344px 였어서 **공약명까지만 보이고
     세부사업이 화면 밖**이었다. 행 높이는 rowspan 4 때문에 229px 이라, 첫 화면에는
     「무슨 행인지 알 수 없는 큰 빈 덩어리」만 남았다.
   고친 방법 두 가지:
     ① 칸 순서를 요청서 논리대로 + **소관부서 칸 제거** — 관리번호 | 공약명 | 세부사업
     ② ≤768px 에서 고정 3칸 폭과 좌우 패딩을 줄인다 (아래)

   폭은 ≤768 구간 실측(본문 14px / 헤더 13px · A4_20_ink.json)에서 역산했다.
   이 구간은 좌우 패딩을 12px→6px 로 줄였으므로 잉크 + 12 가 최소폭이다.

     관리번호  헤더 「관리번호」 44.96 + 12 = 56.96   (값 「5-32」는 32.05+12=44)  → 60px
     공약명    최장 561.6 를 칸 안에서 접는다. 본문폭 130 → 5줄(112px)이고
               행그룹 높이(세부사업 3~4행 = 165px+)보다 작아 넘치지 않는다      → 142px
     세부사업  최장 「의견수렴·공청회」 8자 87.9 + 12 = 99.9                      → 112px
     분기 1칸  2분기 연도칸에 4자 토큰(14px × 0.865em ≈ 48.4px)이 들어가야 한다.
               .pa-q 패딩 16 → 2칸 ≥ 64.4                                        → 38px

   첫 화면 합 = 60 + 142 + 112 = **314px** ≤ 래퍼 328px  (분기 칸이 14px 만큼
   비죽 보여 「오른쪽에 더 있다」는 신호가 된다)
   표 전체 = 60 + 142 + 112 + (38 × 16) = **922px**  (데스크톱 1,140 대비 218px 짧다)

   ★ <col> 과 thead 첫 행 th 두 층 모두에 준다. ≤768 은 col 층이 서는 구간이지만
     한 층만 두면 다른 구간에서 균등분배로 뭉개진다 — 두 층을 항상 같이 유지한다.
   ★ 이 블록은 파일 뒤쪽에 있어야 한다. 미디어쿼리는 특정도를 올리지 않으므로
     같은 선택자끼리는 **소스 순서**로 이긴다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 { min-width: 922px; }

  /* (1) col 층 */
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(1):nth-child(-n+19) { width: 60px; }
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(2):nth-child(-n+19) { width: 142px; }
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(3):nth-child(-n+19) { width: 112px; }
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(n+4):nth-child(-n+19) { width: 38px; }

  /* (2) thead 첫 행 층 — 값은 (1)과 동일. 5번째는 분기 16칸 균등분배분 38×16 */
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(1):nth-child(-n+4) { width: 60px; }
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(2):nth-child(-n+4) { width: 142px; }
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(3):nth-child(-n+4) { width: 112px; }
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(4):nth-child(-n+4) { width: 608px; }

  /* 고정 3칸 좌우 패딩 12px → 6px. 위 폭 계산의 전제다(잉크 + 12). */
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(-n+3),
  .board-content .data-table.data-table--annual.data-table--annual2 tbody td.pa-cell-no,
  .board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title,
  .board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-sub {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 공약명이 좁아져 긴 제목이 여러 줄로 접힌다 — 줄간격을 조금 줄여 행이 덜 길어지게 */
  .board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title { line-height: 1.4; }
  /* 배지는 제목 아래 줄로 내려 폭을 잡아먹지 않게 */
  .board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-title .pl-badge { margin-top: 4px; }
}


/* ==========================================================================
   7. ★왼쪽 고정 칸(sticky column) — 세부사업 1칸만
   ==========================================================================
   채택 근거는 추측이 아니라 실측이다(_work/A4_46_sticky_probe.py · A4_46_sticky.json).

     · 실제로 붙는가        : 360·414px 에서 400px 밀었을 때 칸 위치 0.0px (붙음)
     · 간트 바가 비치는가   : 칸 영역 픽셀 실측 **4.69%** — 밀기 전 기준선 4.75% 와 같다.
                              즉 밑을 지나가는 막대가 **비치지 않는다**.
                              (자기검증: 배경을 투명으로 바꾼 고의 결함본은 17.03% 로 튄다.
                               검사기가 비침을 실제로 구분한다는 것을 확인한 뒤 판단했다)
     · 남는 타임라인 폭     : 360px 에서 216px(분기 5.7칸) · 414px 에서 270px

   ★왜 세부사업 1칸만인가
     360px 래퍼는 328px 다. 관리번호+공약명+세부사업 3칸(314px)을 다 붙이면 타임라인에
     14px 밖에 안 남아 스크롤이 무의미해진다. 막대를 읽을 때 필요한 것은 「이 막대가
     어느 세부사업의 것인가」이므로 세부사업 1칸만 붙인다.

   ★미디어쿼리를 두지 않는 이유
     sticky 는 **밀 것이 없으면 발동하지 않는다**(칸이 래퍼 왼쪽에 닿을 일이 없다).
     1513px 이상에서는 표가 안 넘치므로 자동으로 무해하고, 1024·1280 처럼 넘치는
     구간에서는 똑같이 도움이 된다. 그래서 폭 조건을 걸지 않는다.

   ★부작용 1건과 그 처리
     밀고 나면 rowspan 칸(관리번호·공약명·소관부서)이 화면 밖으로 나가 **공약 묶음의
     경계가 사라진다**. 세부사업명은 유형 템플릿이라 공약이 달라도 같은 이름이 반복된다
     (고유 32종 / 260행). 그래서 공약 묶음 첫 행(`tr.pa-grp`)에 조금 굵은 위 테두리를
     둬 경계를 남긴다. 색은 기존 토큰 --c-gray-300 이고 신규 색이 아니다.
   -------------------------------------------------------------------------- */
.board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-sub,
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(3) {
  position: sticky;
  left: 0;
  z-index: 4;
  /* 불투명 배경이 없으면 밑을 지나가는 막대가 그대로 비친다(위 실측 17.03%) */
  background: var(--c-white);
  /* border-collapse:collapse 에서는 셀 테두리가 표 층에 그려져 sticky 칸과 함께 안 움직인다.
     오른쪽 경계선을 inset 그림자로 셀에 직접 붙여 둔다(색은 기존 --c-line 그대로). */
  /* 2026-08-24 수정 — 오른쪽만 그려 두어 왼쪽(공약명과의 경계)이 비어 보였다 → 양쪽 다 그린다 */
  box-shadow: inset 1px 0 0 var(--c-line), inset -1px 0 0 var(--c-line);
}
/* 헤더 칸은 thead 배경을 그대로 써야 본문과 층이 구분된다.
   2026-08-24 수정 — --c-gray-100(249,250,251) 을 써서 다른 헤더 칸(--c-gray-150, 245,245,245)보다
   밝게 떠 보였다(실측). thead 기본과 같은 토큰으로 맞춘다. */
.board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(3) {
  background: var(--c-gray-150);
  /* sticky 라 표 층에 그려지는 좌우 경계선이 덮인다 → 셀에 직접 그려 준다 */
  box-shadow: inset 1px 0 0 var(--c-line), inset -1px 0 0 var(--c-line);
}
/* 공약 묶음 경계 — sticky 로 rowspan 칸이 가려져도 어디서 공약이 바뀌는지 보이게 */
.board-content .data-table.data-table--annual.data-table--annual2 tbody tr.pa-grp > * {
  border-top: 2px solid var(--c-gray-300);
}
/* 인쇄에서는 래퍼 overflow 가 visible 이라 스크롤 컨테이너가 없다 — sticky 를 끈다 */
@media print {
  .board-content .data-table.data-table--annual.data-table--annual2 tbody th.pa-cell-sub,
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th:nth-child(3) {
    position: static;
    box-shadow: none;
  }
}
/* [MERGE-ANNUAL2-20260814:END] */

/* [MERGE-HINT-20260814:START]
   가로스크롤 안내 보완 — manifesto-rules 「제정·개정 이력」 / pledge-overview 「분야별·부서별 현황」.
   이력표는 안내가 아니라 임의 min-width(560px, 실제 min-content 302.6px)가 원인이라 그것을 풀었다.
   나머지 둘은 실측 임계(분야별 685 / 부서별 572)로만 안내를 켠다.
   되돌리기는 이 START~END 구간 삭제.
*/
/* ============================================================================
   css_hint_20260814.css — 가로스크롤 안내 보완 (pledge-overview · manifesto-rules)
   생성 2026-08-14

   ★ style.css 를 직접 고치지 않는다. 리드가 style.css 말미에 "추가만" 병합한다.
      (기존 규칙 수정·삭제 0 / :root 승격 0 / 신규 색·폰트·이미지 0)
   ★ border-left 색상 세로선 callout 0 (lessons #8).
   ★ 새 컴포넌트를 만들지 않는다 — pledge-list 가 이미 쓰는 `.pl-scroll-hint` 를 그대로 쓴다
      (style.css:8868 에 `display:none` 기본값이 있고, 각 화면이 미디어쿼리로 켠다).

   ── 무엇을 고치나 ───────────────────────────────────────────────────────────
   「표가 잘리는데 밀 수 있다는 안내가 없는」 표 3개를 처리한다. 다만 셋의 원인이 달라
   처방도 다르다. 원인은 _work/A5_10_diag.py 로 **min-content 폭을 실측**해 갈랐다.

     ① manifesto-rules 「제정·개정 이력」
        선언 min-width **560px** / 진짜 min-content **302.6px**
        → 넘치는 이유가 내용이 아니라 **임의로 박은 min-width** 였다.
          안내를 붙일 게 아니라 그 값을 낮추면 **스크롤 자체가 사라진다**(§2).
     ② pledge-overview 「분야별 현황」  min-content **644.6px** (= 지금 폭)
     ③ pledge-overview 「부서별 현황」  min-content **532.1px** (= 지금 폭)
        → 헤더가 `white-space:nowrap` 이라 문자열 전체가 최소폭이다. 줄바꿈을 허용해도
          ②는 약 324px(래퍼 328px과 4px 차)로 아슬아슬하고 헤더가 3줄이 되며,
          ③은 「안전건설교통국」(공백 없는 7자)·「행정관리국」 때문에 517px 밑으로 못 간다.
          → **줄이면 글자가 뭉갠다. 가로스크롤 + 안내가 맞다**(§1).

   ── 안내를 붙이지 않은 표 4개 (같은 페이지) ─────────────────────────────────
     추진시기별(268.1) · 예산 구분별(154.4) · 계속·신규(171.2) · 사업주체별(216.2)
     넷 다 360px 래퍼(328px)에 들어간다. 밀 것이 없는데 「미세요」를 띄우면 거짓말이다.
   ============================================================================ */


/* ==========================================================================
   1. pledge-overview — 넘치는 표 2개에만 안내
   ==========================================================================
   임계값은 이분탐색 실측이다(_work/A5_60_hint.py · A5_60_hint.json).
   「넘침이 사라지는 최소 뷰포트」 미만에서만 켠다.

     분야별 현황  표 644.6px → 뷰포트 **685px** 부터 넘침 0  → 684px 이하에서 안내
     부서별 현황  표 532.1px → 뷰포트 **572px** 부터 넘침 0  → 571px 이하에서 안내
   ※ 처음에 눈대중으로 702/590 을 적었다가 이분탐색 실측으로 685/572 로 고쳤다.
     7뷰포트(360·414·768…)만 보면 그 사이 구간을 아무도 안 밟아 **틀린 값도 통과한다** —
     그래서 A5_60 은 임계값 ±2 폭을 표본에 반드시 넣는다.

   ★두 표의 임계값이 다르므로 미디어쿼리를 **표마다 따로** 건다.
     한 값으로 묶으면 한쪽은 「밀 것 없는데 안내가 뜨는」 상태가 된다.

   ★★먼저 **전역 일괄 노출을 이 페이지에서 끈다.**
     style.css:9061 에 스코프 없는 규칙이 있다 —
       @media (max-width: 599px) { .pl-scroll-hint { display: block; } }
     pledge-list 의 560px 표를 기준으로 쓴 값이라, 여기에 `.pl-scroll-hint` 를 새로
     넣으면 **표가 안 넘치는 572~599px 에서도 안내가 켜진다**(실측으로 실제로 걸렸다).
     그래서 이 페이지에서는 기본을 다시 none 으로 내리고 표별 임계값으로만 켠다.
   -------------------------------------------------------------------------- */
.pledge-overview-page .pl-scroll-hint { display: none; }

@media (max-width: 684px) {
  .pledge-overview-page .data-section[aria-labelledby="po-t-field"] .pl-scroll-hint { display: block; }
}
@media (max-width: 571px) {
  .pledge-overview-page .data-section[aria-labelledby="po-t-bureau"] .pl-scroll-hint { display: block; }
}

/* 안내 글자색 — `.pl-scroll-hint`(:8868) 의 var(--c-text-sub) #777676 은 흰 배경에서
   4.11:1 로 AA(4.5) 미달이다. 전역을 고치면 pledge-list·pledge-budget 까지 바뀌므로
   이 페이지 안에서만 올린다(#5b606b = 5.94:1 — 이 프로젝트가 이미 쓰는 값, 신규 색 아님). */
.pledge-overview-page .pl-scroll-hint { color: #5b606b; }

/* 새로 `tabindex="0"` 를 준 스크롤 영역은 초점이 보여야 한다(KWCAG 11-2).
   pledge-list 는 :8876 에 같은 규칙이 있는데 `.board-content.pledge-list` 스코프라
   이 페이지에는 안 걸린다. 같은 값을 이 페이지 이름으로 다시 쓴다. */
.pledge-overview-page .data-table-wrap:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}


/* ==========================================================================
   2. manifesto-rules 「제정·개정 이력」 — 안내가 아니라 폭을 고친다
   ==========================================================================
   style.css:9337 `.regulation .reg-history { min-width: 560px; }` 가 원인이다.
   이 표는 4열(순번·구분·일자·형식 및 번호)이고 가장 긴 값이 「2002.12.31」·
   「훈령 제 384호」다. 실측 min-content 는 **302.6px** 로, 360px 화면의 래퍼
   328px 안에 **25px 여유를 두고 들어간다**. 560px 는 내용과 무관한 상수였다.

   → min-width 를 풀면 360px 이상에서 가로스크롤이 **사라진다.**
     그래서 이 표에는 안내도, `tabindex="0"` 도 넣지 않는다.
     (안 넘치는 표에 tabindex 를 주면 스크롤할 것이 없는 빈 초점 정거장이 된다)

   ※ 남는 것: 뷰포트 ~336px 미만에서는 여전히 넘친다(래퍼 < 302.6px). 다만
     ①이번 검증 범위(360~1920)의 밖이고 ②지금도 안내·tabindex 가 없어 상태가
     나빠지지 않으며 ③오늘 상태(560px 고정으로 전 모바일에서 넘침)보다 낫다.
     tabindex 는 미디어쿼리로 못 끄므로, 그 폭만을 위해 상시 초점 정거장을
     만드는 것은 손해가 더 크다고 보고 넣지 않았다.

   ★특정도 — 원본이 `.regulation .reg-history`(0,2,0) 이므로 `main` 을 하나 붙여
     (0,2,1) 로 확실히 이긴다(병합 순서에 기대지 않는다). */
main.board-page .regulation .reg-history { min-width: 0; }

/* 그래도 남는 아주 좁은 폭(≤334px)에서는 안내를 켠다 — 실측 임계 **335px**.
   여기서도 전역 ≤599 일괄 노출을 먼저 끄고 실측값으로만 켠다(위와 같은 이유). */
.board-content.regulation .pl-scroll-hint { display: none; }
@media (max-width: 334px) {
  .board-content.regulation .data-section[aria-labelledby="reg-history"] .pl-scroll-hint { display: block; }
}
/* 안내 글자색 — var(--c-text-sub) #777676 은 흰 배경 4.11:1 로 AA 미달이라 이 페이지에서만 올린다 */
.board-content.regulation .pl-scroll-hint { color: #5b606b; }
/* [MERGE-HINT-20260814:END] */

/* [FIX-FANWRAP-20260814:START]
   민선9기 비전 부채꼴 — 좁은 화면에서 라벨 줄바꿈 허용 + 최소 크기.
   .vision-fan__stage 가 container-type:inline-size 이고 라벨이 2.08cqw + white-space:nowrap 이라,
   한 줄을 유지하려고 글자가 360px 에서 6.8px 까지 줄어 읽히지 않았다.
   조각 폭은 59px 인데 「미래를 그리는 중구」를 12px 한 줄로 쓰면 108px 가 필요하다.
   → 두 줄로 접으면 들어간다. 접고 12px 하한을 건다.
   실측(360·414) = 5개 라벨 전부 화면 안 · 조각 이탈 0 · 라벨끼리 겹침 0 · 부채꼴 잘림 없음.
   word-break:keep-all 로 단어 중간이 아니라 어절 단위로 접는다.
   ※ 측정 시 data-reveal 이 발화해야 한다. 스크롤 전에는 라벨 opacity 가 0 이라 「안 보임」으로 오독된다.
   되돌리기는 이 START~END 구간 삭제.
*/
@media (max-width: 767px) {
  .vision-fan__name {
    font-size: max(12px, 2.08cqw);
    white-space: normal;
    word-break: keep-all;
    line-height: 1.2;
  }
}
/* [FIX-FANWRAP-20260814:END] */

/* [FIX-BAND769-20260814:START]
   769~859px 구간 보정 — pledge-annual 분야 탭.
   이 사이트 브레이크포인트가 max-width:768px 70개 / min-width:900px 6개로,
   769px 에서 모바일 규칙이 끝나는데 데스크톱 레이아웃의 실제 최소폭은 ~860px 다.
   그 사이에서 5칸 그리드가 화면을 넘어 5번째 탭(품격이 가득한 중구 32건)이 잘리는데,
   이 폭에서는 .pa-tabs 가 overflow:visible 이고 body 가 overflow-x:clip 이라
   밀 수도 스크롤할 수도 없어 **누를 수 없는 내비게이션**이 된다(실측 769~859, 최대 82px).
   → 768 이하에서 이미 잘 동작하는 가로 스크롤러 동작을 859px 까지 끌어올린다.
   되돌리기는 이 START~END 구간 삭제.
*/
@media (min-width: 769px) and (max-width: 859px) {
  .pa-tabs {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 8px; margin: 0 0 40px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
  .pa-tabs .ds-tab { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 12px 16px; }
  .pa-tabs .ds-tab__icon { width: 30px; height: 30px; }
  .pa-tabs .ds-tab__icon svg, .pa-tabs .ds-tab__icon .ico { width: 18px; height: 18px; }
  .pa-tabs .ds-tab__name { font-size: 15px; }
  .pa-tabs .ds-tab__count { font-size: 11px; padding: 1px 8px; margin-top: 0; }
  /* 스크롤 페이드 — scroll-fade.js 가 .at-start/.at-end 를 부여한다 */
  .pa-tabs.at-start { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
                      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%); }
  .pa-tabs.at-end   { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
                      mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%); }
  .pa-tabs.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
}
/* [FIX-BAND769-20260814:END] */

/* ============================================================================
   (5) 숫자 표기 규격 정비 — [2026-08-18 사용자 요청 · NUM-STYLE-20260818]
   ----------------------------------------------------------------------------
   왜 고치나 (실측 근거)
     · `--ff-serif` = Cormorant Infant 는 **이탤릭 페이스가 없다**(구글폰트 @font-face 45개
       파싱 결과 Infant italic 0개). 지금 화면의 기울기는 전부 브라우저 합성이다.
     · 굵기 위계도 절반만 살아 있었다 — Cormorant Infant 는 **400 페이스가 없어 400·500 이 같게**
       나온다(600·700 은 정상 작동, 잉크 실측 +18.4%/+37.1%). 폭이 전부 116.61px 로 같아 보이는 것은
       이 서체가 weight 별로 자폭을 유지하고 획 두께만 바꾸기 때문이다(폭 측정으로는 굵기차가 안 잡힌다).
     · Cormorant 는 한글 글리프가 없어 `2027년` 의 「년」이 **Batang** 으로 떨어진다 —
       한 낱말이 두 서체로 쪼개졌다(CDP getPlatformFontsForNode 실측: Cormorant 4 + Batang 1).
     · 밑줄은 링크 어휘라 비링크 번호에 붙으면 오독된다.
   무엇을 하나
     · 번호·연도를 본문 폰트(Pretendard)로 통일하고 이탤릭·밑줄을 없앤 뒤 16→20px 로 키운다.
       연도도 같은 규칙 하나로 처리해 서체 갈림이 원천적으로 사라진다.
   ★범위 — **운영 라이브에 열려 있는 화면은 건드리지 않는다**(사용자 방침).
     · 대상(운영 미오픈) = manifesto-system · pledge-status · participation · district-pledge
     · 제외(운영 노출)   = index(/chief/ 메인 promise-list·promise-feature·hero__klic) ·
                            inauguration(취임사 inaug-task) · vision(vision-hero__eyebrow)
     · 그래서 전역 클래스가 아니라 **페이지 스코프**로만 쓴다. 이 파일은 나중에 운영에 배포되므로
       전역으로 쓰면 그때 다른 라이브 화면이 딸려 바뀐다.
   특이도 메모 — 새 규칙은 (0,2,0) 이라 기존 무스코프 축소 규칙(0,1,0)을 이긴다.
     따라서 **축소값을 여기서 다시 써 준다**(≤1024 18 / ≤768 17 / ≤480 16). 안 쓰면 옛 15px 가
     아니라 새 20px 가 모바일까지 그대로 내려간다.
   ============================================================================ */

/* ── (5-a) 진행 순서 스테퍼 번호 + 연도 (01~06 · 2027년) ───────────────────── */
.manifesto-system-page .ps-proc__num,
.manifesto-system-page .ps-chg__num,
.manifesto-system-page .jury-step__num,
.pledge-status-page .ps-proc__num,
.pledge-status-page .ps-chg__num,
.participation .jury-step__num {
  display: block;
  font-family: var(--ff-body);
  font-style: normal;              /* 합성 기울임 제거 */
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--c-primary);         /* #C40051 on #fff = 6.06:1 */
  text-decoration: none;           /* 밑줄 제거 */
  margin-bottom: 2px;
}
@media (max-width: 1024px) {
  .manifesto-system-page .ps-proc__num,
  .manifesto-system-page .ps-chg__num,
  .manifesto-system-page .jury-step__num,
  .pledge-status-page .ps-proc__num,
  .pledge-status-page .ps-chg__num,
  .participation .jury-step__num { font-size: 18px; }
}
@media (max-width: 768px) {
  .manifesto-system-page .ps-proc__num,
  .manifesto-system-page .ps-chg__num,
  .manifesto-system-page .jury-step__num,
  .pledge-status-page .ps-proc__num,
  .pledge-status-page .ps-chg__num,
  .participation .jury-step__num { font-size: 16px; }   /* 제목이 16px 로 줄어드는 대역 — 17px 이면 번호가 제목보다 커진다 */
}
@media (max-width: 480px) {
  .manifesto-system-page .ps-proc__num,
  .manifesto-system-page .ps-chg__num,
  .manifesto-system-page .jury-step__num,
  .pledge-status-page .ps-proc__num,
  .pledge-status-page .ps-chg__num,
  .participation .jury-step__num { font-size: 16px; }
}

/* ── (5-b) 목록 연번 (동별 공약 01~36) ──────────────────────────────────────
   여기 번호는 "진행 순서"가 아니라 목록 색인이라 본문과 나란히 읽혀야 한다.
   그래서 스테퍼(20px/800)보다 한 단 낮춰 본문(17px)과 같은 크기·700 으로 둔다. */
.district-page .common-pledge__num {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;                /* 본문 .common-pledge__txt 와 같은 행간 — 1.6 이면 번호가 1~2px 내려앉는다 */
  letter-spacing: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--c-primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  .district-page .common-pledge__num { font-size: 15px; }   /* ≤768 본문이 15px — 같이 맞춰 baseline 0 */
}

/* ── (5-c) 적대검증에서 나온 보정 2건 [2026-08-18 · W3 E-D2 · E-D4] ──────────
   E-D2 — 같은 `.jury-steps` 컴포넌트인데 제목 축소가 화면마다 달랐다.
     `@1024 → 18px`(무스코프)까지는 공통인데 `@768 → 16px` 이 `.participation` 스코프라
     manifesto-system 에는 안 걸려, 좁은 화면에서 제목이 16px ↔ 18px 로 갈렸다.
     번호를 두 화면에서 통일한 뒤에야 드러난 기존 결함이라 같은 값으로 스코프만 넓힌다
     (새 값 도입 아님 · 운영 배포 시 다른 화면에 딸려 가지 않도록 무스코프로 풀지 않는다).
   E-D4 — 연도 칸 규칙 `.ps-chg--years .ps-chg__num{font-size:18px}` 은 (0,2,0) 으로
     위 (5-a) 와 **특이도가 같다.** 지금은 이 블록이 파일 뒤라 이기지만, 나중에 누가
     `.ps-chg--years` 규칙을 이 블록 뒤에 추가하면 연도만 조용히 18px 로 되돌아간다.
     그래서 연도만 (0,3,0) 으로 못 박아 배치에 의존하지 않게 한다. */
@media (max-width: 768px) {
  .manifesto-system-page .jury-step__title { font-size: 16px; }
}
.pledge-status-page .ps-chg--years .ps-chg__num { font-size: 20px; }
@media (max-width: 1024px) {
  .pledge-status-page .ps-chg--years .ps-chg__num { font-size: 18px; }
}
@media (max-width: 768px) {
  .pledge-status-page .ps-chg--years .ps-chg__num { font-size: 16px; }
}
@media (max-width: 480px) {
  .pledge-status-page .ps-chg--years .ps-chg__num { font-size: 16px; }
}

/* ============================================================================
   (6) 공약가계부 — pledge-ledger.html 전용 [2026-08-18 · LEDGER-20260818 rev.2]
   ----------------------------------------------------------------------------
   구성 = 상단 「재원조달(수입) ↔ 재원소요(지출)」 2단 요약 + 하단 전폭 「분야별 사업 재원소요」.
     개편안 §참고 예시는 2단 안에 사업 목록을 넣지만, 우리 데이터는 한 분야가 32건이라
     2단 안에 넣으면 좌·우 길이가 3배 넘게 벌어진다(1차 시안에서 좌단 공백 61.4% 발생).
     그래서 2단은 「총계+소분류」끼리 마주 보게 두고 사업 목록은 전폭 표로 내렸다.
   조형은 전부 기존 `.data-table` 어휘 재사용 — 새 표 스타일을 만들지 않는다.
   ★1차 시안이 「표로 안 읽힌다」고 반려된 실제 원인(실측):
     행 구분선이 0px 이고 유일한 선이 1.23:1 이라 라벨↔금액 사이 630px 를 안내선 없이 건너뛰었다.
     지금은 `.data-table` 의 행 구분선·헤더 배경·우측정렬을 그대로 쓴다.
   스코프 = `.pledge-ledger-page`(CMS 저장 구간 안 래퍼). `<main>` 은 서버 템플릿이라 건드리지 않는다.
   ============================================================================ */
.pledge-ledger-page .lg__sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.pledge-ledger-page .lg__head,
.pledge-ledger-page .lg__dhead {
  margin: 0 0 12px;
  padding: 11px 16px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary-soft, #7D0034);
  background: color-mix(in srgb, var(--c-primary) 6%, #fff);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  word-break: keep-all;
}
.pledge-ledger-page .lg__dhead { text-align: left; }

/* ── 2026-08-24 수정 — [공약가계부] 박스 헤더 강조 + 분야별 컨셉 색상 ─────────────
   ① 「재원조달(수입)·재원소요(지출)·분야별 사업 재원소요」 헤더 = 연한 인디고 배경 +
      글자 크게(18→22) + 진한 인디고. ② 분야 표기(①~⑤)에 5대 분야 기준색을 물린다. */
.pledge-ledger-page .lg__head,
.pledge-ledger-page .lg__dhead {
  background: var(--c-indigo-100, #EBEEF8);
  color: var(--c-indigo-700, #2A2E43);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
/* 2026-08-24 수정 — [상세표 제목 박스 제거] 「분야별 사업 재원소요」는 배경 박스를 없애고
   위 수입·지출 영수증 제목과 같은 결의 텍스트만 남긴다(사용자 지시). */
.pledge-ledger-page .lg__dhead {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
}
/* 분야 번호 동그라미(①~⑤) → 분야색 원형 배지 */
.pledge-ledger-page { --lg-f1: var(--po-f1); }
/* 2026-08-24 수정 — 지출 영수증의 분야 표기를 원문자(①, 선 원)에서
   「분야색이 채워진 원 + 흰 숫자 01~05」로 바꾼다 — 아래 상세표 분야 띠와 같은 표현.
   원문자는 폰트마다 굵기·크기가 달라 줄마다 들쭉날쭉했다. */
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(2) { --c: var(--po-f1); }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(3) { --c: var(--po-f2); }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(4) { --c: var(--po-f3); }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(5) { --c: var(--po-f4); }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(6) { --c: var(--po-f5); }
.pledge-ledger-page .lg__sum .lg__t tbody .lg__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c, var(--c-primary));
  color: #fff;
  font-size: 0;            /* 원문자(①) 숨김 — ::before 가 숫자를 그린다 */
  line-height: 1;
  /* 2026-08-24 — 실측 delta +6.5px(원이 글자보다 아래) → 그만큼 올린다 */
  vertical-align: 1.5px;
}
.pledge-ledger-page .lg__sum .lg__t tbody .lg__no::before { font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; display: block; }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(2) .lg__no::before { content: "01"; }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(3) .lg__no::before { content: "02"; }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(4) .lg__no::before { content: "03"; }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(5) .lg__no::before { content: "04"; }
.pledge-ledger-page .lg__sum .lg__t tbody tr:nth-child(6) .lg__no::before { content: "05"; }
.pledge-ledger-page .lg__no { font-weight: 700; font-size: 1.05em; }
/* 상세 표의 분야 띠 — 분야색 좌측 강조 + 번호 색 */
/* ★ :nth-of-type 은 「형제 tr 전체」에서 순번을 세므로 분야 띠만 골라 세지 못한다.
   (실제로 5개 띠가 전부 1번=핑크로 칠해졌다 — 2026-08-24 실캡처로 잡음)
   띠끼리만 세려면 일반 형제 조합자를 겹쳐 쓴다. 뒤 규칙이 앞 규칙을 덮어 N번째가 결정된다. */
/* ★ 이 표는 분야마다 <tbody> 가 따로다(5개). 그래서
     · :nth-of-type(N) → 각 tbody 안에서 세므로 모든 띠가 1번이 된다
     · 형제 조합자(~)  → 부모가 달라 아예 닿지 않는다
   둘 다 실패했다(2026-08-24 실측). 순번은 tbody 자체에서 센다. */
.pledge-ledger-page .lg__d tbody:nth-of-type(1) .lg__band { --c: var(--po-f1); }
.pledge-ledger-page .lg__d tbody:nth-of-type(2) .lg__band { --c: var(--po-f2); }
.pledge-ledger-page .lg__d tbody:nth-of-type(3) .lg__band { --c: var(--po-f3); }
.pledge-ledger-page .lg__d tbody:nth-of-type(4) .lg__band { --c: var(--po-f4); }
.pledge-ledger-page .lg__d tbody:nth-of-type(5) .lg__band { --c: var(--po-f5); }
.pledge-ledger-page .lg__band th {
  border-left: 4px solid var(--c, var(--c-primary));
  background: color-mix(in srgb, var(--c, var(--c-primary)) 7%, #fff);
}
/* 2026-08-24 수정 — [분야 띠] 배경을 분야색 틴트로 강조하고, ①~⑤ 문자를
   「분야색이 채워진 원 + 흰 숫자 01~05」로 바꾼다(다른 화면 배지와 같은 표현).
   원문자는 폰트마다 모양이 달라 크기가 들쭉날쭉했다 — 원은 CSS, 숫자는 content 로 그린다. */
.pledge-ledger-page .lg__band th { background: color-mix(in srgb, var(--c, var(--c-primary)) 7%, #fff); }
.pledge-ledger-page .lg__band .lg__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--c, var(--c-primary));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  font-size: 0;                 /* 원문자(①) 숨김 — 아래 ::before 가 숫자를 그린다 */
}
.pledge-ledger-page .lg__band .lg__no::before { font-size: 14px; line-height: 1; display: block; }
.pledge-ledger-page .lg__d tbody:nth-of-type(1) .lg__no::before { content: "01"; }
.pledge-ledger-page .lg__d tbody:nth-of-type(2) .lg__no::before { content: "02"; }
.pledge-ledger-page .lg__d tbody:nth-of-type(3) .lg__no::before { content: "03"; }
.pledge-ledger-page .lg__d tbody:nth-of-type(4) .lg__no::before { content: "04"; }
.pledge-ledger-page .lg__d tbody:nth-of-type(5) .lg__no::before { content: "05"; }
.pledge-ledger-page .lg__band .lg__bandamt { color: var(--c, var(--c-primary)); font-weight: 800; }
@media (max-width: 768px) {
  .pledge-ledger-page .lg__head,
  .pledge-ledger-page .lg__dhead { font-size: 18px; }
}
.pledge-ledger-page .lg__detail { margin-top: 44px; }

/* 총계행 — 좌·우가 같은 값으로 마주 본다(이 화면의 핵심) */
.pledge-ledger-page .lg__total th,
.pledge-ledger-page .lg__total td {
  background: color-mix(in srgb, var(--c-primary) 6%, #fff);
  font-weight: 800;
  color: var(--c-primary-soft, #7D0034);
  font-size: 17px;
}
/* 소분류 띠(재원별 / 연차별) */
.pledge-ledger-page .board-content .lg__grp th {
  background: var(--c-gray-150, #F2F4F6);
  text-align: left;
  font-weight: 700;
  color: var(--c-text-default);
  white-space: nowrap;
}
.pledge-ledger-page .board-content .lg__t { font-variant-numeric: tabular-nums; }
.pledge-ledger-page .board-content .lg__t tbody th[scope="row"] {
  white-space: normal;
  word-break: keep-all;
  background: #fff;
  font-weight: 600;
  color: var(--c-text-default);
}
.pledge-ledger-page .board-content .lg__t td.po-cell-r { white-space: nowrap; width: 8em; }
.pledge-ledger-page .board-content .lg__t thead th:last-child { width: 8em; }
.pledge-ledger-page .board-content .lg__t td.lg__c,
.pledge-ledger-page .board-content .lg__t th.lg__c { text-align: center; width: 5em; }
.pledge-ledger-page .lg__no { margin-right: 6px; color: var(--c-primary-soft, #7D0034); font-weight: 800; }

/* 하단 상세표 — 분야 밴드행이 tbody 를 가른다 */
.pledge-ledger-page .board-content .lg__d { font-variant-numeric: tabular-nums; min-width: 520px; }
.pledge-ledger-page .board-content .lg__d .lg__band th {
  /* 2026-08-24 수정 — 여기가 --c-primary 를 고정으로 써서 5개 띠가 전부 같은 핑크였다.
     (앞쪽 .lg__band th 규칙보다 특이도가 높아 그것을 덮고 있었다 — 실측으로 잡음)
     분야색 var(--c) 로 바꿔 띠마다 테마색이 나오게 한다.
     틴트는 14% 가 진해 보여 7% 로 낮췄다(사용자 지적) — 5개 분야 모두 같은 비율. */
  background: color-mix(in srgb, var(--c, var(--c-primary)) 7%, #fff);
  text-align: left;
  /* 2026-08-24 수정 — [세로 가운데 정렬 + 글씨 확대] 금액이 float:right 라 baseline 에서 떠 보였다.
     ★ display:flex 로 바꿨더니 colspan 이 무효가 되어 띠가 첫 칸 폭으로 쪼그라들었다(실측).
       표 셀은 table-cell 그대로 두고, 금액만 절대배치로 세로 중앙에 고정한다. */
  position: relative;
  vertical-align: middle;
  padding-right: 150px;     /* 절대배치된 금액 자리 확보 */
  font-size: 19px;
  font-weight: 800;
  color: var(--c-text-default);
  padding: 15px 16px;
  line-height: 1.45;
  white-space: normal;
  word-break: keep-all;
  border-top: 2px solid var(--c-gray-300, #C9CDD4);
  border-left: 0;
}
.pledge-ledger-page .lg__bandcnt { margin-left: 10px; font-size: 15px; font-weight: 600; color: #5B606B; white-space: nowrap; }
.pledge-ledger-page .lg__bandamt { float: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; white-space: nowrap; }
.pledge-ledger-page .board-content .lg__d tbody th[scope="row"] {
  white-space: normal;
  word-break: keep-all;
  background: #fff;
  font-weight: 400;
  color: var(--c-text-body);
}
.pledge-ledger-page .board-content .lg__d td.lg__idx { text-align: center; width: 4.5em; color: #5B606B; }
.pledge-ledger-page .board-content .lg__d thead th:first-child { width: 4.5em; }
.pledge-ledger-page .board-content .lg__d td.po-cell-r { white-space: nowrap; width: 8em; }
.pledge-ledger-page .board-content .lg__d thead th:last-child { width: 8em; }

/* ★`.po-cell-l`·`.po-cell-r` 은 base 가 (0,3,2) 로 가운데정렬을 걸어 그냥은 안 먹는다 —
     이 페이지 스코프에서 특이도를 올려 되돌린다(정렬이 안 맞으면 표가 안 읽힌다). */
.pledge-ledger-page .board-content .data-table.lg__t tbody th[scope="row"].po-cell-l,
.pledge-ledger-page .board-content .data-table.lg__d tbody th[scope="row"].po-cell-l { text-align: left; }
.pledge-ledger-page .board-content .data-table.lg__t tbody td.po-cell-r,
.pledge-ledger-page .board-content .data-table.lg__d tbody td.po-cell-r { text-align: right; }
.pledge-ledger-page .board-content .data-table.lg__t tbody th[scope="colgroup"],
.pledge-ledger-page .board-content .data-table.lg__d tbody th[scope="colgroup"] { text-align: left; }

.pledge-ledger-page .lg .pl-scroll-hint { display: none; }

@media (max-width: 900px) {
  .pledge-ledger-page .lg__sum { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .pledge-ledger-page .lg .pl-scroll-hint { display: block; margin: 0 0 10px; font-size: 14px; color: #5B606B; }
}
@media (max-width: 480px) {
  .pledge-ledger-page .lg__head,
  .pledge-ledger-page .lg__dhead { font-size: 16px; padding: 10px 12px; }
  .pledge-ledger-page .board-content .lg__d .lg__band th { font-size: 17px; padding: 12px 14px; padding-right: 14px; }
  .pledge-ledger-page .lg__bandamt { position: static; transform: none; display: block; margin-top: 6px; font-size: 18px; }
}
@media print {
  .pledge-ledger-page .lg__sum { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pledge-ledger-page .lg__detail { margin-top: 22px; }
  .pledge-ledger-page .board-content .lg__d { min-width: 0; }
  .pledge-ledger-page .lg__d tr { break-inside: avoid; }
  .pledge-ledger-page .lg__d thead { display: table-header-group; }
  .pledge-ledger-page .lg__band { break-after: avoid; }
  .pledge-ledger-page .lg .pl-scroll-hint { display: none; }
}

/* [LEDGER-20260818 rev.3] §6-1 특이도 함정 잔여 2곳 — C(적대검증) 지적 C-1·C-2
   범인 = 이 블록 안 `.lg__t tbody th[scope="row"]{background:#fff;font-weight:600}` (0,4,2)
          + base `:7323 .board-content .data-table tbody th[scope="row"]{text-align:center}` (0,3,2).
   기존 `.lg__total th`(0,2,1) · `.lg__grp th`(0,3,1) 이 둘 다 져서
   총계행은 th 만 흰색으로 남고, 소분류 띠는 회색·좌측정렬이 통째로 날아갔다.
   기존 선언을 고치지 않고 (0,6,3) 으로 올려 덮는다. */
.pledge-ledger-page .board-content .data-table.lg__t tbody tr.lg__total th[scope="row"],
.pledge-ledger-page .board-content .data-table.lg__t tbody tr.lg__total td {
  background: color-mix(in srgb, var(--c-primary) 6%, #fff);
  font-weight: 800;
  color: var(--c-primary-soft, #7D0034);
  font-size: 17px;
}
/* ★C 제안에 한 줄 추가 — 총계 th 만 center 로 남아 나머지 17개 행머리(left)와 어긋난다(실측). */
.pledge-ledger-page .board-content .data-table.lg__t tbody tr.lg__total th[scope="row"] {
  text-align: left;
}
.pledge-ledger-page .board-content .data-table.lg__t tbody tr.lg__grp th[scope="row"] {
  background: var(--c-gray-150, #F2F4F6);
  text-align: left;
  font-weight: 700;
  color: var(--c-text-default);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-24 — [공약가계부 수입·지출 = 영수증형] 시안 승인 반영 (바코드 제외)
   ★ HTML 은 손대지 않는다 — pledge-ledger.html 의 해당 구간은
     `_work/D2_10_build_ledger.py` 가 생성하는 [LEDGER-BUILD] 영역이다.
     그래서 표 마크업(table/thead/tbody/th scope)은 그대로 두고 **보이는 형태만** 바꾼다.
     display 는 table 계열을 유지하므로 낭독기에는 지금처럼 표로 읽힌다.
   범위 = 상단 요약 2박스(.lg__sum .lg__box)만. 하단 상세표(.lg__detail)는 그대로.
   ══════════════════════════════════════════════════════════════════════════ */
/* 흰 종이가 흰 본문 배경 위에 있으면 톱니 재단선이 안 읽힌다 → 뒤에 옅은 바탕을 깐다
   (시안과 같은 구성. 값은 기존 회색 토큰) */
.pledge-ledger-page .lg__sum {
  background: var(--c-gray-100, #F9FAFB);
  padding: 28px;
  border-radius: 16px;
}
.pledge-ledger-page .lg__sum .lg__box {
  --z: 16px;    /* 톱니 한 칸 너비 */
  --zh: 9px;    /* 톱니 높이 */
  background: var(--c-white);
  padding: calc(var(--zh) + 26px) 26px calc(var(--zh) + 22px);
  /* 톱니 재단선 — 이미지 없이 CSS mask 로만. filter 는 mask 뒤에 적용돼 그림자가 톱니를 따라간다 */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) var(--zh) repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) var(--zh) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zh)) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) var(--zh) repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) var(--zh) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zh)) no-repeat;
  filter: drop-shadow(0 8px 20px rgba(28, 32, 48, .12));
}

/* 영수증 제목 — 박스형 헤더 → 가운데 정렬 표제 + 점선 */
.pledge-ledger-page .lg__sum .lg__head {
  margin: 0 0 4px;
  padding: 0 0 16px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--c-indigo-700, #2A2E43);
}
.pledge-ledger-page .lg__sum .lg__box .data-table-wrap,
.pledge-ledger-page .lg__sum .lg__box .lg__t { border: 0; }

/* 표 → 영수증 줄. 칸 배경·테두리를 걷어내고 점선 한 줄만 남긴다 */
.pledge-ledger-page .board-content .lg__sum .lg__t { border-top: 0; }
.pledge-ledger-page .board-content .lg__sum .lg__t thead { display: none; }   /* 시각적으로만 숨김 — th scope 는 그대로라 낭독 유지 */
.pledge-ledger-page .board-content .lg__sum .lg__t tbody th[scope="row"],
.pledge-ledger-page .board-content .lg__sum .lg__t tbody td {
  background: none;
  border: 0;
  border-bottom: 1.5px dotted var(--c-line);
  padding: 12px 0;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--c-text-default);
}
.pledge-ledger-page .board-content .lg__sum .lg__t tbody td.po-cell-r {
  font-weight: 600;
  letter-spacing: -0.2px;
}
/* 소분류 띠(재원별 / 연차별) — 회색 배경 띠 → 작은 라벨 */
.pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__grp th[scope="row"] {
  background: none;
  border-bottom: 0;
  padding: 22px 0 5px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-text-mute, #8A8F9A);
}
/* 총계 — 이중선으로 마감 */
.pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total th[scope="row"],
.pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total td {
  background: none;
  border-top: 2.5px solid var(--c-ink, #1F1F1F);
  border-bottom: 3px double var(--c-ink, #1F1F1F);
  padding: 15px 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--c-ink, #1F1F1F);
}
.pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total th[scope="row"] {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}
/* 수입 박스의 총계 금액만 브랜드 핑크 */
.pledge-ledger-page .lg__sum .lg__box:first-of-type .lg__t tbody tr.lg__total td { color: var(--c-primary); }
/* 지출 박스 — 사업수 칸은 보조정보라 작게 */
.pledge-ledger-page .board-content .lg__sum .lg__t tbody td.lg__c {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text-mute, #8A8F9A);
}
.pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total td.lg__c {
  font-size: 15.5px;
  color: var(--c-ink, #1F1F1F);
}
@media (max-width: 768px) {
  .pledge-ledger-page .lg__sum .lg__box { padding-left: 20px; padding-right: 20px; }
  .pledge-ledger-page .lg__sum .lg__head { font-size: 20px; }
  .pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total th[scope="row"],
  .pledge-ledger-page .board-content .lg__sum .lg__t tbody tr.lg__total td { font-size: 19px; }
}

/* ── (7) 공약사업 총괄현황 — 표 4종 제거에 따른 보정 [2026-08-18 · PO-20260818] ─────
   시각 블록이 유일한 전달 경로가 됐다(표가 낭독 정본이었는데 사라졌다).
     · 부서 카드의 「개」가 `::after` 생성 콘텐츠라 낭독 보장이 안 돼 마크업으로 내렸고,
       중복 낭독을 막으려 이 페이지에서만 `::after` 를 끈다(다른 화명 영향 0 — 페이지 스코프).
     · 새로 추가한 「이행계획·완료시기별 공약현황」은 12월 게시 예정 항목이라
       값 대신 게시 시점을 적는다. 색 세로선 강조 박스는 쓰지 않는다(전체 테두리 + 배경톤). */
/* 2026-08-24 수정 — [총괄현황] 히어로 아래 박스들이 히어로 카드보다 좁아 답답해 보였다.
   히어로 안쪽 폭(.po-hero__inner: 1540 - 좌우 40)과 같은 폭으로 맞춰 가로로 키운다.
   ≥1025 에서만 적용 — 태블릿·모바일은 기존 여백 그대로. */
@media (min-width: 1025px) {
  .pledge-overview-page .po-block:not(.po-block--hero) {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - var(--sbw, 0px) - 80px), calc(var(--content-w-sub, 1540px) - 80px));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-24 — [분야 아이콘·카드 통일] 로드맵(pledge-annual)·추진현황(pledge-status)
   두 화면이 민선8기 카테고리 아이콘(.ico--cat-*, 인라인 data-URI)을 그대로 쓰고 있어
   총괄현황 히어로 카드와 그림이 달랐다. 같은 hero-icon-*.svg 세트로 통일한다.
   ★ .ico--cat-* 는 이 두 화면에서만 쓰인다(전수 확인) — 전역 교체해도 다른 화면 영향 0.
   ★ 클래스 이름은 민선8기 유산(city/welfare/edu/econ/comm)이라 그대로 두고 그림만 바꾼다.
        city→미래 · welfare→청년 · edu→교육 · econ→노후 · comm→품격 (마크업 순서 기준)
   ══════════════════════════════════════════════════════════════════════════ */
.ico--cat-city { -webkit-mask-image: url(../images/vision/field-future.svg); mask-image: url(../images/vision/field-future.svg); }
.ico--cat-welfare { -webkit-mask-image: url(../images/vision/field-youth.svg); mask-image: url(../images/vision/field-youth.svg); }
.ico--cat-edu { -webkit-mask-image: url(../images/vision/field-education.svg); mask-image: url(../images/vision/field-education.svg); }
.ico--cat-econ { -webkit-mask-image: url(../images/vision/field-senior.svg); mask-image: url(../images/vision/field-senior.svg); }
.ico--cat-comm { -webkit-mask-image: url(../images/vision/field-dignity.svg); mask-image: url(../images/vision/field-dignity.svg); }
/* 2026-08-24 수정 — [아이콘 교체: 피그마 도형 → Lucide 선 아이콘]
   피그마 원본은 선을 면으로 그린 도형이라 ① 작은 크기에서 잔떨림이 노이즈로 보이고
   ② stroke-width 로 굵기를 못 바꿔 마스크를 여러 겹 겹쳐 부풀리는 편법을 썼는데,
   같은 마스크를 겹치면 가장자리 반투명 픽셀이 누적돼 선이 굵어지고 계단이 도드라진다
   (사용자 지적 "두껍고 자글자글"). 겹침은 전부 걷어내고 단일 레이어로 되돌렸다.
   Lucide(ISC 라이선스) 선 아이콘으로 교체 — 굵기는 각 SVG 의 stroke-width 로 조절한다(현재 Lucide 기본값 2 — 임의 가공 없음).
   ★ 기존 hero-icon-*.svg 는 지우지 않았다 — 되돌릴 때 이 url 만 바꾸면 된다. */
.ico--cat-city, .ico--cat-welfare, .ico--cat-edu, .ico--cat-econ, .ico--cat-comm {
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* 추진현황 분야 카드 — 총괄현황 히어로 카드와 같은 비율(원 : 아이콘 ≒ 72 : 38)로 키운다 */
.pledge-status-page .ps-areacard__icon { width: 60px; height: 60px; }
.pledge-status-page .ps-areacard__icon .ico { width: 32px; height: 32px; }
/* 로드맵 분야 탭 — 아이콘 원을 카드와 같은 톤(분야색 12% 틴트)으로 */
/* 2026-08-24 — 탭↔섹션 제목 여백 확대.
   ★ .ds-panel .data-section:first-child { margin-top: 0 } (0,3,0) 이 이겨서 처음엔 안 먹었다(실측 0px).
     같은 무게 이상으로 올려 덮는다. */
.pledge-annual-page .ds-panel .data-section.pa-sec { margin-top: 44px; }
/* 추진현황 「사업별 이행현황」도 같은 간격으로 (탭 32px → 44px) */
.pledge-status-page .po-areatabs { margin-bottom: 44px; }
.pledge-annual-page .pa-tabs .ds-tab__icon {
  background: color-mix(in srgb, var(--c) 12%, #fff);
  border-radius: 50%;
}
.pledge-annual-page .pa-tabs .ds-tab__icon .ico { width: 26px; height: 26px; }
.pledge-annual-page .pa-tabs .ds-tab.is-active .ds-tab__icon { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-24 — [예산현황 총 소요사업비 = 영수증형] 공약가계부와 같은 어휘로 통일.
   마크업(.ps-sum-card > .ps-sum-rows > .ps-sum-row)은 그대로 두고 .pb-receipt 훅으로만 입힌다.
   ══════════════════════════════════════════════════════════════════════════ */
.pledge-budget-page .pb-receipt {
  --z: 16px; --zh: 9px;
  max-width: 760px;   /* 2026-08-24 — 가로 확대(사용자 지시) */
  margin-inline: auto;
  padding: calc(var(--zh) + 28px) 30px calc(var(--zh) + 24px);
  background: var(--c-white);
  border: 0;
  border-radius: 0;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) var(--zh) repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) var(--zh) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zh)) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) var(--zh) repeat-x,
    conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / var(--z) var(--zh) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zh)) no-repeat;
  filter: drop-shadow(0 8px 20px rgba(28, 32, 48, .12));
}
/* 흰 종이가 흰 배경에 묻히지 않게 뒤에 옅은 바탕.
   ★ 바탕은 .data-section 이 아니라 영수증만 감싼 래퍼에 건다 — 섹션 제목(총 소요사업비)과
     단위 표기가 회색 박스 안으로 들어가 버렸다(실캡처 지적). */
.pledge-budget-page .pb-receipt-ground {
  background: var(--c-gray-100, #F9FAFB);
  padding: 28px;
  border-radius: 16px;
}
.pledge-budget-page .pb-receipt .ps-sum-card__hd {
  text-align: center;
  /* 2026-08-24 — 기본 .ps-sum-card__hd 의 연인디고 배경 박스는 영수증 안에서 겉돈다 → 제거 */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 16px;
  margin: 0;
  border-bottom: 1.5px dashed var(--c-line);
}
.pledge-budget-page .pb-receipt .ps-sum-card__phase {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--c-indigo-700, #2A2E43);
}
.pledge-budget-page .pb-receipt .ps-sum-card__desc { margin: 8px 0 0; font-size: 14.5px; color: #5b606b; }
.pledge-budget-page .pb-receipt .ps-sum-rows { margin-top: 6px; }
.pledge-budget-page .pb-receipt .ps-sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1.5px dotted var(--c-line);
}
/* 2026-08-24 수정 — 기간(2026.7.~2030.6.)이 라벨 아래로 떨어져 줄이 두 줄이 됐다
   → 라벨 오른쪽에 나란히, 세로 가운데로 붙인다. */
.pledge-budget-page .pb-receipt .ps-sum-row dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--c-text-default);
}
.pledge-budget-page .pb-receipt .ps-sum-rownote {
  display: inline-block;
  margin: 0;
  font-size: 12.5px;
  color: #8A8F9A;
  white-space: nowrap;
}
.pledge-budget-page .pb-receipt .ps-sum-num { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
/* 총계 — 이중선 마감 */
.pledge-budget-page .pb-receipt .ps-sum-row--total {
  border-top: 2.5px solid var(--c-ink, #1F1F1F);
  border-bottom: 3px double var(--c-ink, #1F1F1F);
  margin-top: 4px;
  padding: 15px 0;
}
.pledge-budget-page .pb-receipt .ps-sum-row--total dt { font-size: 15.5px; font-weight: 700; letter-spacing: .04em; }
.pledge-budget-page .pb-receipt .ps-sum-row--total .ps-sum-num {
  font-size: 30px; font-weight: 800; letter-spacing: -0.9px; color: var(--c-primary);
}
@media (max-width: 768px) {
  .pledge-budget-page .pb-receipt-ground { padding: 18px; }
  .pledge-budget-page .pb-receipt { padding-left: 20px; padding-right: 20px; }
  .pledge-budget-page .pb-receipt .ps-sum-card__phase { font-size: 19px; }
  .pledge-budget-page .pb-receipt .ps-sum-row--total .ps-sum-num { font-size: 22px; }
}

/* 2026-08-24 수정 — [로드맵 표] 공약명 옆 「신규/계속」 배지가 글자 baseline 에 걸려
   위로 떠 보였다 → 글자와 세로 가운데로 맞추고, 「신규」는 그 분야색으로 칠한다.
   (.pa-sec--fN 이 --c 를 주므로 섹션 안에서 자동으로 테마색이 된다) */
.pledge-annual-page .pa-cell-title { line-height: 1.5; }
.pledge-annual-page .pa-cell-title .pl-badge {
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  /* 2026-08-24 — inline-flex + vertical-align:middle 는 x-height 기준이라 글자 중앙과 3.3px 어긋났다(실측).
     글자 크기를 따라가도록 em 으로 보정한다. */
  top: -0.27em;
}
.pledge-annual-page .pa-sec .pl-badge--new { background: var(--c); border-color: var(--c); }
/* 분야 탭의 건수 알약도 카드 배지와 같은 결(분야색 테두리 + 분야색 글자)로 통일 */
.pledge-annual-page .pa-tabs .ds-tab__count {
  /* 2026-08-24 수정 — 테두리 1.5px 는 작은 알약에서 두꺼워 보였고(사용자 지적),
     글자 13px 도 카드 크기 대비 작았다 → 선은 얇게, 글자는 키운다. */
  border: 1px solid var(--c);
  color: var(--c);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  padding: 3px 13px;
}
/* 2026-08-24 수정 — 활성 탭에서 흰 글씨가 흰 알약 배경에 묻혀 건수가 안 보였다(실캡처).
   흰 알약 + 분야색 글씨로 뒤집어 대비를 확보한다. */
.pledge-annual-page .pa-tabs .ds-tab.is-active .ds-tab__count {
  background: #fff;
  border-color: #fff;
  color: var(--c);
}

/* 2026-08-24 수정 — [로드맵 분야 탭 고정 시 컴팩트]
   스크롤로 천장에 붙으면(.is-stuck — common.js sentinel) 세로 카드가 화면을 많이 먹는다.
   → 아이콘을 접고, 세로 배치를 가로 한 줄로 바꿔 이름은 왼쪽 / 건수는 오른쪽 끝으로 보낸다.
   기존 :6733 규칙이 .pa-tabs.is-stuck 의 건수를 아예 접어 버리므로 여기서 되살린다. */
.pledge-annual-page .pa-tabs.is-stuck .ds-tab {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
}
.pledge-annual-page .pa-tabs.is-stuck .ds-tab__icon {
  max-width: 0;
  max-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .25s ease, max-height .25s ease, opacity .2s ease;
}
.pledge-annual-page .pa-tabs.is-stuck .ds-tab__name {
  font-size: 15px;
  text-align: left;
  letter-spacing: -0.4px;
}
/* 접힘 규칙(:6733)이 건수를 0 으로 만들어 둔 것을 되돌리고 오른쪽 끝으로 민다 */
.pledge-annual-page .pa-tabs.is-stuck .ds-tab__count {
  max-width: 90px;
  max-height: 36px;
  margin: 0 0 0 auto;
  padding: 2px 10px;
  border-width: 1px;
  opacity: 1;
  flex: 0 0 auto;
  font-size: 13px;
}

/* 2026-08-24 수정 — [추진현황 「사업별 이행현황」 분야 탭 고정 시 컴팩트]
   .pa-tabs 에는 넣었는데 이 탭(.po-areatabs)에는 없어서 스크롤해도 큰 세로 카드 그대로였다.
   기존에는 건수 배지만 접혔다(:6733) → 로드맵과 같은 규칙으로 통일:
   아이콘 접기 + 가로 한 줄 + 이름 왼쪽 / 건수 오른쪽 끝. */
.pledge-status-page .po-areatabs.is-stuck .po-areatab {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
}
.pledge-status-page .po-areatabs.is-stuck .po-areatab__icon {
  max-width: 0;
  max-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .25s ease, max-height .25s ease, opacity .2s ease;
}
.pledge-status-page .po-areatabs.is-stuck .po-areatab__name {
  font-size: 15px;
  text-align: left;
  letter-spacing: -0.4px;
}
/* 접힘 규칙(:6733)이 건수를 0 으로 만들어 둔 것을 되살려 오른쪽 끝으로 민다 */
.pledge-status-page .po-areatabs.is-stuck .po-areatab__count {
  max-width: 90px;
  max-height: 36px;
  margin: 0 0 0 auto;
  padding: 2px 10px;
  border-width: 1px;
  opacity: 1;
  flex: 0 0 auto;
  font-size: 13px;
}

.pledge-overview-page .po-deptcard__num::after { content: none; }
.pledge-overview-page .po-deptcard__num em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: #777676;
  margin-left: 1px;
}

/* ── (8) 이행률 카드 — 다크 → 흰 카드 [2026-08-18 · RATE-20260818 rev.2]
   사용자 지적 3연속: 「너무 검다」 → 남보라 → 「지금도 진하다, 흰색으로」 → 「흰색은 밋밋,
   중간·절충안. 어두운 색은 열린구청장실 톤앤매너에 안 맞는다」. 최종 = **브랜드 핑크 틴트**.
   오른쪽 「공약이행 완료도」 카드와 같은 밝기 대역이고(옛 화면 15570 도 밝은 원형), 색은
   이 사이트가 이미 쓰는 primary 6% 틴트라 새 색을 만들지 않았다.
   다크 배경 전제로 흰 글자를 쓰던 base 선언들(.ps-pie__text 등)을 이 페이지에서 되짚어 준다.
   ② 빈 공간 — 텍스트 열이 125px 폭에 272px 높이라 가운데가 비어 보였다. 완료도 표 앞
      두 항목(완료 2 · 이행 후 계속 추진 3)을 요약 줄로 넣어 채운다(오른쪽 표와 같은 값).
   스코프 = .pledge-status-page (운영 미오픈 화면) */
.pledge-status-page .ps-pie {
  background: #FDF2F6;               /* 브랜드 핑크 6% 틴트 — 가계부 머리행·밴드행과 같은 톤 */
  border: 1px solid #F3DDE7;
  box-shadow: none;
  padding: 30px 28px 30px 34px;
}
.pledge-status-page .ps-pie__text { color: var(--c-text-default); min-height: 0; justify-content: space-between; }
.pledge-status-page .ps-pie__head em { color: var(--c-text-default); }
.pledge-status-page .ps-pie__head span,
.pledge-status-page .ps-pie__sub { color: #5B606B; }               /* 흰 배경 대비 5.92:1 */
.pledge-status-page .ps-pie__num strong,
.pledge-status-page .ps-pie__num i { color: var(--c-primary); }    /* #C40051 = 6.06:1 */
.pledge-status-page .ps-chart__track { stroke: #F3D7E3; }   /* 틴트 바탕에서 도넛 트랙이 묻히지 않게 한 단 진하게 */

.pledge-status-page .ps-pie__break {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pledge-status-page .ps-pie__break li {
  display: flex;
  align-items: baseline;
  gap: 5px;                    /* 마크업의 &nbsp; 폭(약 3.5px)만큼 줄여 시각 간격을 8px 그대로 유지 */
  font-size: 14px;
  color: #5B606B;
  white-space: nowrap;
}
.pledge-status-page .ps-pie__break b { font-weight: 600; }
.pledge-status-page .ps-pie__break span {
  font-weight: 800;
  color: var(--c-text-default);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .pledge-status-page .ps-pie__break { align-items: center; }
}

/* ── (9) 5대 핵심공약 표 상단 굵은 검정선 제거 [2026-08-18 · VC-20260818]
   `.board-content .data-table` 는 표 위에 `border-top: 2px solid var(--c-ink)` 를 긋는다
   (공공 표의 관용 표현 — 헤더 행을 강조하는 선). 그런데 이 화면의 표는 **헤더 행이 없고**
   왼쪽 라벨 열만 있는 구성이라, 그 굵은 검정선이 강조할 대상 없이 혼자 떠 있다(사용자 지적).
   ★단 선을 아예 없애면 표 윗변이 열려 버린다(사용자 정정: 「표 자체의 테두리는 유지해야지」).
   그래서 **굵기·색만 낮춰** 셀 구분선(1px #E8E8E8)과 같은 선으로 바꾼다 — 표는 닫히되
   검정 강조선은 사라진다. 다른 화면의 `.data-table` 은 건드리지 않는다. */
.vision-core-page .board-content .data-table { border-top: 1px solid var(--c-line); }

/* ── (9-b) 5대 핵심공약 세로 간격 정리 [2026-08-18 · VC-20260818]
   ①「확정 근거와 남은 일정」 절(규정 제4·5조 인용·공표 시기)을 뺐다 — 행정 절차 안내라
      주민이 보는 화면에 넣을 내용이 아니라는 사용자 지적. 규정 전문은 매니페스토 > 관련 규정에 있다.
   ② 그 절이 빠지면서 마지막 안내문과 하단 안내 상자가 맞붙었다(간격 0px) → 48px.
   ③ 분야 사이 80px 는 표가 큰 이 화면에서 과했다 → 56px(다른 화면 .data-section 은 80px 유지). */
.vision-core-page .board-content .data-section { margin-top: 56px; }
.vision-core-page .board-content .notice-box { margin-top: 48px; }

/* ── (9-c) 2026-08-24 — 위 §9-b 의 `.data-section {margin-top:56px}` 은 (0,3,0)+후순위라
   앞쪽에 개별로 써 둔 간격 규칙들을 전부 덮는다(실측으로 두 번 잡음). 이 화면의
   섹션 간격 예외는 전부 여기서 같은 무게 이상으로 선언한다. */
.vision-core-page .board-content .vc-index-head { margin-top: 14px; margin-bottom: 10px; }   /* 회색 라인 ↔ "5대 공약" */
.vision-core-page .board-content .vc-index-nav + .vc-field { margin-top: 120px; }            /* 카드 행 ↔ 첫 섹션(01) */
@media (max-width: 1024px) {
  .vision-core-page .board-content .vc-index-head { margin-top: 10px; }
  .vision-core-page .board-content .vc-index-nav + .vc-field { margin-top: 64px; }
}

/* ── (10) 검수 반영 [2026-08-18 · FIX-20260818] ─────────────────────────────
   S2 주민참여와 소통 — 사진 없는 카드의 자리표시 아이콘이 썸네일을 가득 채워
      카드 비율(16/10)이 1:1 로 깨졌다(22장 전부·전 뷰포트). 원인 = `.pa-card__thumb img`
      의 `width/height:100%` 가 자리표시 <img> 까지 잡는데, 되돌리는 규칙이 `.ico`·svg
      선택자라 이 마크업(class 없는 <img>)에 안 걸린다. 마크업은 그대로 두고 규칙만 맞춘다.
   S5 공약가계부 — 가로 스크롤 안내가 ≤600 에서 뜨는데 실제 스크롤은 ≤480 부터 생긴다
      (600 에서 표 내부 스크롤 0px 실측). 안내가 먼저 뜨면 없는 조작을 안내하는 셈이다. */
.participation .pa-card__thumb--ph img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
@media (min-width: 481px) and (max-width: 600px) {
  .pledge-ledger-page .lg .pl-scroll-hint { display: none; }
}

/* ── (11) 분기별(연차별) 추진 로드맵 — 인쇄 보정 [2026-08-18 · PRINT-ANNUAL-20260818]
   실제 PDF 로 확인한 결함 3가지(검수 S4):
     ① 표 5개 중 활성 탭 1개만 인쇄되고 나머지 4개 분야는 종이에 아예 안 나옴
     ② 표가 A4 세로 폭을 넘어 2029년 4분기 칸이 잘림(화면에선 좌우로 밀어 보는 표라 문제가 없다)
     ③ 「표를 좌우로 밀면…」 안내가 종이에도 찍히는데 종이는 밀 수가 없다
   → 인쇄에서는 탭을 걷고 5개 분야를 순서대로 전부 출력하고, 표를 A4 폭에 맞춰 축소한다.
     분야명은 각 패널의 h2(미래를 그리는 중구 …)가 그대로 제목 역할을 한다. */
@media print {
  .pledge-annual-page .pa-tabs,
  .pledge-annual-page .icon-swipe-show { display: none !important; }

  .pledge-annual-page .ds-panel[hidden],
  .pledge-annual-page .ds-panel { display: block !important; }
  .pledge-annual-page .ds-panel + .ds-panel { break-before: page; }

  .pledge-annual-page .data-table-wrap { overflow: visible !important; }

  /* ★이 표는 화면용 폭 층이 4겹(min-width 1100/1360 · col px · thead th px · 모바일층)이라
     낮은 특이도로는 하나도 못 이긴다. 인쇄 전용이므로 !important 로 한 번에 덮는다. */
  .board-page .pledge-annual-page .data-table--annual,
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 8.5px !important;
  }
  .pledge-annual-page .data-table--annual th,
  .pledge-annual-page .data-table--annual td { padding: 2px 3px !important; word-break: break-all; }

  /* 19열 = 관리번호·공약명·세부사업 + 16분기. 앞 3열을 줄이고 분기 칸을 균등 배분한다 */
  .board-page .pledge-annual-page .data-table--annual col:nth-child(1),
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(1) { width: 6% !important; }
  .board-page .pledge-annual-page .data-table--annual col:nth-child(2),
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(2) { width: 17% !important; }
  .board-page .pledge-annual-page .data-table--annual col:nth-child(3),
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(3) { width: 17% !important; }
  .board-page .pledge-annual-page .data-table--annual col:nth-child(n+4),
  .board-page .pledge-annual-page .data-table--annual.data-table--annual2 col:nth-child(n+4) { width: 3.75% !important; }
  /* thead 첫 행에 걸린 px 폭 층도 함께 푼다(안 풀면 col 폭이 무시된다) */
  .board-content .data-table.data-table--annual thead tr:first-child th,
  .board-content .data-table.data-table--annual.data-table--annual2 thead tr:first-child th { width: auto !important; }

  .pledge-annual-page .data-table--annual thead { display: table-header-group; }
  .pledge-annual-page .data-table--annual tr { break-inside: avoid; }
}


/* ==========================================================================
   ── 공약사업 목록 : 분야 섹션 접기/펼치기 (2026-08-24)

   상단 「분야 바로가기」 칩줄은 그대로 두고, 아래 분야별 표 5개만 아코디언으로 바꾼다.
   · 마크업은 "전부 펼침"으로 저장하고 JS 가 .pl-acc-on 을 걸어 접는다
     → 스크립트가 없거나 죽어도 77개 사업이 전부 보인다(노스크립트 대비).
   · 펼침은 grid-template-rows 0fr↔1fr — 높이를 JS 로 재지 않으므로 표 행수(7~32행)와
     무관하게 정확하다. 미지원 브라우저는 애니메이션만 빠지고 접힘/펼침은 동작한다.
   · 접힌 패널은 visibility:hidden 이라 탭 순서·스크린리더에서도 빠진다.
   · 박스 왼쪽 색상 세로선(callout)은 쓰지 않는다.
   ========================================================================== */

/* h2 는 원래 flex(제목+건수 한 줄)였다. 이제 버튼 한 개만 담으므로 block 으로 되돌리고
   가로 배치는 버튼이 맡는다 — 안 그러면 width:100% 버튼이 flex 아이템으로 눌린다 */
.pledge-list-page .board-content .pl-section__title { display: block; }

.pledge-list-page .pl-section__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  /* 2026-08-24 수정 — 아래쪽 패딩 제거: 분야색 3px 라인은 조상 .pl-section__title 에 있는데
     여기 12px + 거기 12px 이 겹쳐 제목↔라인 간격이 24px 로 벌어져 있었다(핵심공약은 12px).
     회색 밑줄도 제거 — 제목의 분야색 라인만 남긴다. */
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.pledge-list-page .pl-section__name {
  flex: 0 1 auto;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: color .18s ease;
}
.pledge-list-page .pl-section__count { flex: 0 0 auto; }
.pledge-list-page .pl-section__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  opacity: .5;
  transform: rotate(180deg);                 /* 펼침 = ∧ */
  transition: transform .28s ease, opacity .18s ease;
}
.pledge-list-page .pl-section.is-collapsed .pl-section__chevron { transform: rotate(0deg); }   /* 접힘 = ∨ */

/* 2026-08-24 수정 — hover 색을 전 섹션 핑크가 아니라 그 섹션 분야색(--c)으로 */
.pledge-list-page .pl-section__toggle:hover .pl-section__name,
.pledge-list-page .pl-section__toggle:focus-visible .pl-section__name { color: var(--c); }
.pledge-list-page .pl-section__toggle:hover .pl-section__chevron { opacity: .9; }
.pledge-list-page .pl-section__toggle:hover { border-bottom-color: var(--c); }
.pledge-list-page .pl-section__toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; }

/* 패널 — 기본(JS 없음)은 펼침 그대로. .pl-acc-on 이 붙어야 접기가 작동한다 */
.pledge-list-page .pl-section__panel { display: grid; grid-template-rows: 1fr; }
.pledge-list-page .pl-section__panelin { min-height: 0; }
.pledge-list-page.pl-acc-on .pl-section__panel { transition: grid-template-rows .28s ease; }
.pledge-list-page.pl-acc-on .pl-section__panelin { overflow: hidden; }
.pledge-list-page.pl-acc-on .pl-section.is-collapsed .pl-section__panel { grid-template-rows: 0fr; }
.pledge-list-page.pl-acc-on .pl-section.is-collapsed .pl-section__panelin {
  visibility: hidden;
  padding-top: 0;                             /* ★ 남겨 두면 접힘 높이가 0 이 아니라 18px 이 된다(실측) */
  transition: visibility 0s .28s, padding-top .28s ease;   /* 펼칠 땐 즉시 보이고, 접을 땐 다 접힌 뒤 감춘다 */
}

/* 섹션 간격 — 펼쳐진 표가 5개 나열될 때 기준인 80px(--gap-section)을 그대로 두면
   접힌 헤더 5줄이 147px 씩 벌어져 목록으로 안 읽힌다(보정 전 실측). 아코디언일 때만 좁힌다.
   제목 아래 여백은 h2 margin 이 아니라 패널 안쪽 padding 으로 옮긴다 —
   그래야 접었을 때 그 여백까지 같이 접혀서 헤더가 붙어 선다 */
.pledge-list-page.pl-acc-on .board-content .data-section.pl-section { margin-top: 28px; }
.pledge-list-page.pl-acc-on .board-content .pl-section__title { margin-bottom: 0; }
.pledge-list-page.pl-acc-on .pl-section__panelin {
  padding-top: 18px;
  transition: padding-top .28s ease;
}

/* 2026-08-25 수정 — 위에서 제목 밑 분야색 라인을 뺀 대신, 표 위 선을 분야색으로 올린다.
   `.board-content .data-table` 의 기본은 `2px solid var(--c-ink)`(검정 강조선)인데,
   이 화면은 섹션마다 --c 가 분야색으로 정의돼 있으므로 색만 바꿔 쓰면 표식이 유지된다.
   굵기 2px 는 그대로 — 표 헤더 행을 누르는 선이라 3px 로 키우면 표가 무거워진다. */
.pledge-list-page .board-content .data-table { border-top-color: var(--c); }

/* 접힘 전용 — 패널(표)이 사라지면 분야색 선도 같이 사라져 헤더 줄이 열린 채 남는다.
   접혔을 때만 제목 밑에 선을 되살려 목록 행처럼 닫아 준다. */
.pledge-list-page.pl-acc-on .board-content .pl-section.is-collapsed .pl-section__title {
  border-bottom: 3px solid var(--c);
}

/* ≤599 : 제목줄이 한 줄에 안 들어간다 — 분야명 / 건수를 두 줄로 쌓고 화살표만 오른쪽에 고정 */
@media (max-width: 599px) {
  .pledge-list-page .pl-section__toggle {
    flex-wrap: wrap;
    position: relative;
    padding-right: 26px;
    row-gap: 4px;
  }
  .pledge-list-page .pl-section__name { flex: 1 1 auto; }
  /* 2026-08-24 수정 — 서브타이틀 들여쓰기를 제목 글자 시작선에 맞춤(배지 26px + 간격 10px)
     — 기존 22px 는 배지 아래로 어정쩡하게 걸쳤다(실캡처 지적). */
  .pledge-list-page .pl-section__count { flex: 1 0 100%; margin-left: 36px; }
  .pledge-list-page .pl-section__chevron {
    position: absolute;
    right: 0;
    top: 4px;
    margin-left: 0;
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pledge-list-page.pl-acc-on .pl-section__panel,
  .pledge-list-page.pl-acc-on .pl-section__panelin,
  .pledge-list-page.pl-acc-on .pl-section.is-collapsed .pl-section__panelin,
  .pledge-list-page .pl-section__chevron,
  .pledge-list-page .pl-section__name { transition: none; }
}

/* 인쇄 — 접혀 있어도 77개 사업이 전부 찍혀야 한다 */
@media print {
  .pledge-list-page.pl-acc-on .pl-section__panel { grid-template-rows: 1fr !important; }
  .pledge-list-page.pl-acc-on .pl-section__panelin {
    visibility: visible !important;
    overflow: visible !important;
  }
  .pledge-list-page .pl-section__chevron { display: none; }
  .pledge-list-page .pl-section__toggle { border-bottom: 0; padding-bottom: 0; cursor: auto; }
}

/* 첫 진입·딥링크·바로가기 이동에서는 펼침 전환을 끈다.
   목표 좌표를 먼저 확정한 뒤 한 번만 움직이기 위한 것 — 표가 자라는 동안 화면이 흔들리던 원인이었다 */
.pledge-list-page.pl-no-anim .pl-section__panel,
.pledge-list-page.pl-no-anim .pl-section__panelin { transition: none !important; }

/* 인쇄 — 카드가 쪽 경계에서 「제목만 남고」 갈라지지 않게 한다.
   말풍선을 도넛으로 바꾸며 카드 높이가 달라져 제목과 링이 다른 쪽으로 찢어졌다(실측 대조).
   페이지 스코프로 제한해 다른 화면의 .po-chartcard 는 건드리지 않는다 */
@media print {
  .pledge-overview-page .po-chartcard { break-inside: avoid; }
}

/* ── GNB 2depth 폰트 [2026-08-25 · 피드백]
   드롭다운 링크는 common.css 의 `@media (min-width:1281px)` 안에서 16px 로 잡혀 있다.
   common.css 는 공유 파일이라 손대지 않고, 뒤에 로드되는 여기서 같은 셀렉터·같은
   미디어 조건으로 덮는다(동일 특이도 → 나중 선언이 이긴다).
   ※ 조건을 1281 로 맞춰야 한다 — 조건이 다르면 데스크톱에서만 안 먹거나 반대로 모바일까지 번진다. */
@media (min-width: 1281px) {
  #gnb > ul > li > div.dropdown > ul a { font-size: 18px; }   /* 2026-08-25 2차 — 17→18.
     ※ GNB 1depth 와 같은 크기가 된다. 1depth 는 weight 600, 여기는 500 이라 굵기로만 구분된다. */
}