@charset "UTF-8";
/* 글자 굵기 2단계 통일(2026-09-15, KRDS 표준형: regular 400 · bold 700): 이 파일의 font-weight 선언 중 600·800·900→700, 100~500→400 으로 일괄 치환(bold·normal 은 700·400 과 같은 값이라 유지). 원값은 git 이력(치환 커밋 직전) 참조. @font-face 매핑 접기(common.css·style_common.css)는 안전망으로 유지 */
/* ============================================================
   보건복지데이터포털 (메인 포털)
   common.css — KRDS(Korea Design System) 기반 공통 스타일

    1. 웹폰트          2. 디자인 토큰      3. 리셋
    4. 접근성 유틸리티  5. 레이아웃         6. 헤더 / GNB
    7. 하위메뉴 패널    8. 전체화면 오버레이(통합검색 · 누리집안내)
    9. 퀵메뉴 / 플로팅 버튼               10. 공통 컴포넌트
   11. 푸터           12. 모션·고대비     13. 반응형

   기준: 행정안전부 「디지털 정부서비스 UI/UX 가이드라인(2025.08)」
        KWCAG 2.2 / WCAG 2.1 AA
   서체: Paperlogy (자체 상징 서체, 고딕 계열) — resource/fonts
   컨테이너 최대 폭 1440px · 모바일 460px 최적화 · 290px까지 유지

   ★ 재정립(2026-09-01): 이 파일은 공통 레이어(웹폰트·토큰·셸·공용 컴포넌트).
     기초는 basic.css, 서브 전용은 sub.css. 서브 로드 순서: basic → common → sub (sub이 최후순)
   ============================================================ */

/* ------------------------------------------------------------
   1. 웹폰트 — Paperlogy (로컬, /fonts/Paperlogy/)
   KRDS A-2: 굵기 2종 이상 구분 + 각 굵기에 맞는 폰트 파일 사용
   (2026-09-01: 구 /css/Paperlogy.css의 선언 전체(9굵기)를 이관하고 그 파일은 삭제 — 이 파일이 전역 단일 소스.
    실파일은 현재 4·6·7·8(400/600/700/800)만 있음 — 나머지 굵기는 파일 추가 시 자동 적용)
   ------------------------------------------------------------ */
/* ── Paperlogy 굵기 2단계 접기(KRDS 표준형: regular 400 · bold 700 두 가지 두께) — 2026-09-15 로컬 시험 적용 ──
   메인 포털 전역 단일 소스(구 Paperlogy.css 이관본).
   CSS 곳곳의 font-weight 선언은 그대로 두고 글꼴 매핑만 접는다: 100~500 → Regular 파일, 600~900 → Bold 파일.
   (실파일이 없던 100·200·300·900은 전에도 브라우저가 이웃 굵기로 대체 렌더했음)
   원복: 아래 두 블록을 지우고 주석 안 원본 블록을 살린다(주석 안 '/+' '+/' 는 원래 CSS 주석 기호로 되돌린다 — 주석 안에 닫는 기호를 직접 쓰면 주석이 조기 종료되어 아래 Regular 블록이 깨진다) */
@font-face {
  font-family: 'Paperlogy';
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-4Regular.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-4Regular.woff') format('woff');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-7Bold.woff') format('woff');
}
/* ── 원본(굵기별 9블록) ──
@font-face {
  font-family: 'Paperlogy';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-1Thin.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-1Thin.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-1Thin.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-1Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-2ExtraLight.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-2ExtraLight.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-2ExtraLight.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-2ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-3Light.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-3Light.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-3Light.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-3Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-4Regular.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-4Regular.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-4Regular.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-4Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-5Medium.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-5Medium.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-5Medium.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-5Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-6SemiBold.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-6SemiBold.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-6SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-7Bold.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-7Bold.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-7Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-8ExtraBold.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-8ExtraBold.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-8ExtraBold.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-8ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-9Black.woff2') format('woff2'),
       url('../fonts/Paperlogy/Paperlogy-9Black.woff') format('woff'),
       url('../fonts/Paperlogy/Paperlogy-9Black.otf') format('opentype'),
       url('../fonts/Paperlogy/Paperlogy-9Black.ttf') format('truetype');
}
*/


/* ------------------------------------------------------------
   2. 디자인 토큰
   ------------------------------------------------------------ */
:root {
  /* -- Primary — KRDS 대표색 ------------------------------- */
  --dp-primary:        var(--dp-secondary);  /* --dp-secondary(#003675)와 통일 (2026-09-02 사용자 지시 — 원 파랑은 너무 밝음) */
  /* --dp-primary:     #256EF4;                 흰 배경 4.60:1 */
  --dp-primary-strong: #1A5AD7;  /* 본문 크기 링크·텍스트 6.02:1 */
  --dp-primary-hover:  var(--dp-secondary-hover);  /* secondary 호버(#002A5C)와 통일 (2026-09-02 사용자 지시) */
  /* --dp-primary-hover: #0B50D0; */
  --dp-primary-active: #083B9C;
  --dp-primary-light:  #E8F0FE;
  --dp-primary-bg:     #F0F6FF;

  /* -- Heading (로고 네이비 계열) -------------------------- */
  --dp-heading: #1E2B5C;         /* 흰 배경 13.5:1 */

  /* -- Point (한국보건사회연구원 로고 코럴) ---------------- */
  --dp-point:        #F37B71;    /* 장식 요소 전용 */
  --dp-point-strong: #C13A0F;    /* 텍스트용 5.41:1 */
  --dp-point-bg:     #FBEEEC;

  /* -- Secondary ------------------------------------------ */
  --dp-secondary:       #003675;
  --dp-secondary-hover: #002A5C;
  --dp-secondary-bg:    #EAF0F7;

  /* -- Gray ----------------------------------------------- */
  --dp-gray-0:  #FFFFFF;
  --dp-gray-5:  #F7F8F9;
  --dp-gray-10: #F3F5F9;
  --dp-gray-20: #E4E7EC;
  --dp-gray-30: #D0D5DD;
  --dp-gray-40: #B1B8C0;
  --dp-gray-50: #8A9099;   /* 카드·입력 경계 — 흰 배경 3.22:1 */
  --dp-gray-60: #6D7582;   /* 보조 텍스트 4.65:1 */
  --dp-gray-70: #4B5563;   /* 7.56:1 */
  --dp-gray-80: #33363D;
  --dp-gray-90: #1E2124;   /* 본문 15.6:1 */

  /* -- System --------------------------------------------- */
  --dp-info:    #256EF4;
  --dp-success: #2CC08E;
  --dp-warning: #FF9000;
  --dp-danger:  #DE3412;
  --dp-info-bg:    #F0F6FF;
  --dp-success-bg: #EAF6EC;
  --dp-warning-bg: #FFF6E8;
  --dp-danger-bg:  #FDEEEA;

  /* -- 어두운 면 (퀵메뉴 · 푸터) --------------------------- */
  --dp-dark:        #212B44;
  --dp-dark-deep:   #090F1C;
  --dp-dark-head:   #333333;
  --dp-on-dark:     #E4E7EC;   /* #212B44 대비 11.34:1 */
  --dp-on-dark-sub: #C6CCD4;   /* 8.70:1 */

  /* -- 전체화면 오버레이 ----------------------------------- */
  --dp-overlay-bg: #EFF2F6;

  /* -- 서체 ----------------------------------------------- */
  --dp-font: 'Paperlogy', 'Pretendard GOV', 'Pretendard',
             -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
             'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --fs-body:  1.7rem;   /* KRDS 본문 기준 */
  --fs-sm:    1.6rem;
  --fs-xs:    1.5rem;   /* 보조 텍스트 하한 */
  --fs-lg:    1.9rem;
  --fs-h3:    2rem;
  --fs-h2:    2.3rem;
  --fs-h1:    3.2rem;
  --lh-body:  1.6;
  --lh-tight: 1.5;    /* KRDS: 헤딩 포함 줄 간격 150% 이상 */

  /* -- 형태 ----------------------------------------------- */
  --dp-radius-sm:   0.4rem;
  --dp-radius:      0.6rem;
  --dp-radius-lg:  1.2rem;
  --dp-radius-xl:  1.6rem;
  --dp-radius-pill: 99.9rem;

  /* -- 엘리베이션 ----------------------------------------- */
  --dp-shadow-1: 0 1px 2px rgba(30,33,36,.06);
  --dp-shadow-2: 0 4px 12px rgba(30,33,36,.10);
  --dp-shadow-3: 0 12px 28px rgba(30,33,36,.16);

  /* -- 간격 ----------------------------------------------- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2rem;
  --sp-6: 2.4rem;
  --sp-7: 3.2rem;
  --sp-8: 4rem;
  --sp-9: 5.6rem;
  --sp-10: 7.2rem;

  /* -- 레이아웃 ------------------------------------------- */
  --layout-max: 1440px;   /* 컨테이너 최대 폭 — 뷰포트 기준이므로 px 유지 */
  --layout-pad: 4rem;
  --focus-ring: 3px;

  /* -- 퀵메뉴 레일 폭 (펼침 / 접힘) ------------------------ */
  --quick-w: 11.6rem;
  --quick-w-min: 6.4rem;
  --quick-cur: var(--quick-w);
}
/* 접힌 상태 — 본문 우측 여백도 함께 줄인다 */
html.is-quick-collapsed { --quick-cur: var(--quick-w-min); }

/* ------------------------------------------------------------
   3. 리셋 / 기본 타이포그래피
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
figure, figcaption, blockquote, fieldset, legend, table, th, td { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* rem 기준값 10px — KRDS 디자인 토큰의 전제(62.5%).
   글자·간격을 rem으로 두어 브라우저의 글자 크기 설정이 그대로 반영되게 한다.
   1px 경계선·포커스 링·그림자만 px로 남긴다. */
html {
  font-size: 62.5%;
  min-width: 280px;   /* 최소 지원 폭 — 뷰포트 기준이므로 px 유지 */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 280px;   /* 최소 지원 폭 — 뷰포트 기준이므로 px 유지 */
  font-family: var(--dp-font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
  color: var(--dp-gray-90);
  background: var(--dp-gray-0);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--dp-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--dp-primary-strong); text-decoration: underline; text-underline-offset: 0.3rem; }
a:hover { color: var(--dp-primary-hover); }

button, input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);   /* 컨트롤 라벨도 1.5배 이상 유지 */
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; }

table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------
   4. 접근성 유틸리티
   ------------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* 키보드 포커스 가시성 — KRDS/KWCAG 필수 */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring) solid var(--dp-primary);
  outline-offset: 2px;
  border-radius: var(--dp-radius-sm);
}
.on-dark :focus-visible,
.dp-quick :focus-visible,
.dp-footer :focus-visible { outline-color: #FFFFFF; }

/* 건너뛰기 링크 */
.dp-skip { position: absolute; left: 0; top: 0; z-index: 200; width: 100%; text-align: center; }
.dp-skip a {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -200%);
  display: inline-block;
  padding: 1.2rem 2.4rem;
  background: var(--dp-gray-90);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--dp-radius) var(--dp-radius);
}
.dp-skip a:focus {
  transform: translate(-50%, 0);
  outline: var(--focus-ring) solid var(--dp-primary);
  outline-offset: -3px;
}
#dp-main:focus { outline: none; }

/* 오버레이 열림 시 본문 스크롤 잠금 */
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------
   5. 레이아웃 컨테이너
   ------------------------------------------------------------ */
.dp-container {
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding-left: var(--layout-pad);
  padding-right: var(--layout-pad);
}

/* ------------------------------------------------------------
   6. 헤더 / 주요 메뉴(GNB)
   구성 순서: 건너뛰기 링크 → 아이덴티티 → 주요 메뉴
   ------------------------------------------------------------ */
.dp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dp-gray-0);
  border-bottom: 1px solid var(--dp-gray-20);
}

.hd-top {display: flex;align-items: center;gap: var(--sp-5);min-height: 7.6rem;justify-content: space-between;}
/* 글자 크기를 크게 설정한 환경에서 헤더가 넘치지 않도록 로고는 줄어들 수 있게 둔다 */
.hd-brand { flex: 0 1 auto; display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.hd-brand img { height: 4.6rem; width: auto; display: block; }

.hd-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }

/* 아이콘 버튼 — 조작 영역 44×44px 이상 */
.hd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-gray-10);
  color: var(--dp-gray-80);
}
.hd-icon-btn:hover { background: var(--dp-primary-light); color: var(--dp-primary-hover); }
.hd-icon-btn svg { width: 2rem; height: 2rem; }

/* 주요 메뉴 — 헤더 1단 안에서 로고와 아이콘 버튼 사이 가운데 정렬 */
.hd-nav { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; justify-content: center; }
.dp-gnb { display: flex; align-items: stretch; }
.gnb-list { display: flex; align-items: stretch; justify-content: center; gap: 4.8rem; }
.gnb-list > li { display: flex; }

.gnb-btn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 100%;
  padding: 0 0.4rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--dp-gray-80);
  white-space: nowrap;
}
.gnb-btn:hover { color: var(--dp-primary-hover); }
.gnb-btn::after {
  content: "";
  width: 0.9rem; height: 0.9rem;
  margin-top: -0.3rem;
  border-right: 2px solid var(--dp-gray-60);   /* 비텍스트 4.65:1 */
  border-bottom: 2px solid var(--dp-gray-60);
  transform: rotate(45deg);
  transition: transform .18s ease, margin .18s ease;
}
.gnb-btn:hover::after { border-color: var(--dp-primary-hover); }
.gnb-btn[aria-expanded="true"] { color: var(--dp-primary-hover); }
.gnb-btn[aria-expanded="true"]::after {
  margin-top: 0.3rem;
  transform: rotate(225deg);
  border-color: var(--dp-primary-hover);
}

/* ------------------------------------------------------------
   7. 하위메뉴 패널 (헤더 전체 폭 · 클릭/키보드 디스클로저)
      좌: 1Depth 제목 + 바로가기 / 우: 하위 항목 다단 배치
   ------------------------------------------------------------ */
.gnb-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 30;
  background: var(--dp-gray-0);
  border-top: 1px solid var(--dp-gray-20);
  border-bottom: 1px solid var(--dp-gray-30);
  box-shadow: var(--dp-shadow-2);
}
.gnb-panel[hidden] { display: none; }
.gnb-panel .dp-container {
  display: flex;
  gap: var(--sp-6) var(--sp-8);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
  flex-direction: column;
}

.mm-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
/* 메가메뉴 제목은 문서 구조가 아니라 메뉴 레이블이므로 헤딩을 쓰지 않는다
   ↳ KWCAG 6.4.2 제목 제공 — h1보다 앞선 h3/h4가 문서 구조를 깨뜨리지 않게 한다 */
.mm-head .mm-title {
  font-size: 2.4rem;
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--dp-heading);
  letter-spacing: -0.02em;
}
.mm-go {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dp-gray-70);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  padding: 0.2rem;
  white-space: nowrap;
}
.mm-go:hover { color: var(--dp-primary-hover); }
.mm-go .mm-caret { text-decoration: none; margin-left: 0.2rem; }

/* 하위 항목 — 2depth만 있는 메뉴 */
.mm-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--sp-1) var(--sp-6);
  align-content: start;
}
.mm-links a {
  display: block;
  position: relative;
  padding: 0.9rem 0.4rem 0.9rem 1.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dp-gray-80);
  text-decoration: none;
}
.mm-links a::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: calc(0.9rem + 0.8em - 0.2rem);   /* 여러 줄일 때도 첫 줄에 맞춘다 */
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--dp-gray-60);
}
.mm-links a:hover { color: var(--dp-primary-hover); text-decoration: underline; }
.mm-links a:hover::before { background: var(--dp-primary-hover); }

/* 하위 항목 — 3depth가 있는 메뉴(통계): 2depth를 열 제목으로 */
.mm-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-6) var(--sp-5);
  align-content: start;
}
/* 그룹형 패널 행 높이를 목록형 리프 행(44px)과 통일 (2026-09-08): 새탭 서비스는 3레벨을 안 그려 제목 한 줄만 남는데,
   제목은 패딩이 없어 그룹형 패널(통계)만 9px 낮아졌음 — 제목에 리프와 같은 상단 패딩(글자 높이 정렬) + 그룹 최소 높이 */
.mm-groups > .mm-group { min-height: 4.4rem; }
.mm-group > .mm-gtitle {
  padding-top: 0.9rem;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--dp-heading);
}
.mm-group > .mm-gtitle a { color: var(--dp-heading); text-decoration: none; }
/* 새창 아이콘(::after)은 제목의 마지막 단어(.mm-last)에 붙인다 — 앵커에 붙이면 아이콘 앞에서 줄이 갈려 아이콘만 다음 줄로 떨어짐. .mm-last는 줄바꿈 금지라 단어와 아이콘이 함께 넘어간다 (2026-09-10) */
.mm-group > .mm-gtitle a[target="_blank"] .mm-last { white-space:nowrap; }
.mm-group > .mm-gtitle a[target="_blank"] .mm-last::after { content:''; display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(../images/open-new-window.svg) no-repeat center center; background-size:contain; margin-left:4px; margin-top:-3px}
.mm-group > .mm-gtitle a:hover { color: var(--dp-primary-hover); text-decoration: underline; }
.mm-group .mm-links { grid-template-columns: minmax(0, 1fr); }
.mm-group .mm-links a { font-weight: 400; color: var(--dp-gray-70); padding-top: 0.7rem; padding-bottom: 0.7rem; }
/* 그룹형 패널의 리프 2레벨(3레벨 없음·새탭 아님 — 제목 없이 링크만, korTop 항목별 판정 2026-09-08):
   옆 열 제목(.mm-gtitle)과 첫 줄 글자 높이를 맞춘다 — 상단 패딩만 줄이고 불릿 위치를 따라 올린다 */
.mm-group > .mm-links:first-child > li > a {
  /* 그룹형 패널의 2레벨 리프(3레벨 없음·새탭 아님, korTop 항목별 판정 2026-09-08):
     모양은 목록형 패널의 2레벨 리프(.mm-links a)와 동일해야 하므로 그룹 하위(3레벨)용 덮어쓰기(400/gray-70/0.7rem)를 되돌린다
     (패딩도 목록형과 같은 0.9rem — 제목 쪽에 같은 상단 패딩을 줘서 첫 줄 글자 높이를 맞춘다) */
  font-weight: 700; color: var(--dp-gray-80); padding-top: 0.9rem; padding-bottom: 0.9rem;
}

/* ------------------------------------------------------------
   8. 전체화면 오버레이 (통합검색 · 누리집안내)
   ------------------------------------------------------------ */
.dp-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--dp-overlay-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.dp-overlay[hidden] { display: none; }

.ov-close {
  position: absolute;
  top: 2.8rem; right: 3.2rem;
  width: 4.8rem; height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dp-radius);
  color: var(--dp-gray-90);
}
.ov-close:hover { background: rgba(30,33,36,.08); }
.ov-close svg { width: 2.6rem; height: 2.6rem; }

/* 8-1. 통합검색 */
.ov-search .ov-body {
  margin: auto;
  width: 100%;
  max-width: 90rem;
  padding: 9.6rem var(--layout-pad) 12rem;
}
.ov-search h2 { font-size: 2.6rem; margin-bottom: var(--sp-4); color: var(--dp-gray-90); }
.search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--dp-gray-0);
  border: 1px solid var(--dp-gray-90);
  border-radius: var(--dp-radius-sm);
  padding: 0 var(--sp-3) 0 var(--sp-5);
}
.search-field:focus-within { outline: var(--focus-ring) solid var(--dp-primary); outline-offset: 2px; }
.search-field input {
  flex: 1;
  min-width: 0;
  height: 6.8rem;
  border: 0;
  background: transparent;
  font-size: var(--fs-lg);
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--dp-gray-60); }
.search-submit {
  flex: none;
  width: 4.8rem; height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dp-radius-sm);
  color: var(--dp-gray-90);
}
.search-submit:hover { background: var(--dp-gray-10); color: var(--dp-primary-hover); }
.search-submit svg { width: 2.8rem; height: 2.8rem; }

/* 8-2. 누리집안내 (사이트맵) */
.ov-sitemap .ov-body {
  width: 100%;
  max-width: calc(var(--layout-max) + 8rem);
  margin: 0 auto;
  padding: 10.4rem var(--layout-pad) 9.6rem;
}
.ov-sitemap .ov-body > h2 { font-size: 2.6rem; margin-bottom: var(--sp-6); color: var(--dp-gray-90); }

.sitemap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.sm-col > h3 { margin: 0; }
.sm-col > h3 a {
  display: block;
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--dp-gray-50);   /* 3.22:1 */
  border-radius: var(--dp-radius-lg);
  background: var(--dp-gray-0);
  color: var(--dp-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
}
.sm-col > h3 a:hover { border-color: var(--dp-primary); color: var(--dp-primary-hover); }

.sm-list { margin-top: var(--sp-4); display: grid; gap: 0.2rem; }
.sm-2d {
  display: block;
  position: relative;
  padding: 0.7rem 0.4rem 0.7rem 1.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dp-gray-80);
  text-decoration: none;
}
.sm-2d::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: calc(0.7rem + 0.8em - 0.2rem);
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--dp-gray-60);
}
a.sm-2d:hover { color: var(--dp-primary-hover); text-decoration: underline; }
a.sm-2d:hover::before { background: var(--dp-primary-hover); }
h4.sm-2d { color: var(--dp-heading); font-weight: 700; }
h4.sm-2d a { color: inherit; text-decoration: none; }
h4.sm-2d a[target="_blank"]::after { content:''; display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(../images/open-new-window.svg) no-repeat center center; background-size:contain; margin-left:4px; margin-top:-3px}
h4.sm-2d a:hover { color: var(--dp-primary-hover); text-decoration: underline; }

/* 3depth */
.sm-sub { margin: 0.2rem 0 var(--sp-3) 1.4rem; display: grid; gap: 1px; }
.sm-sub a {
  display: block;
  position: relative;
  padding: 0.6rem 0.4rem 0.6rem 1.2rem;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--dp-gray-70);
  text-decoration: none;
}
.sm-sub a::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.6rem + 0.8em);
  width: 0.6rem; height: 1px;
  background: var(--dp-gray-60);
}
.sm-sub a:hover { color: var(--dp-primary-hover); text-decoration: underline; }

/* ------------------------------------------------------------
   9. 퀵메뉴 / 플로팅 스택
      1281px 이상 : 우측 고정 레일 (상단 화살표로 접기·펼치기)
      그 미만     : 우측 하단 스피드다이얼
                    [퀵메뉴 열기] → 아이콘+텍스트 목록 → [맨 위로]
   ------------------------------------------------------------ */
.dp-quick { color: var(--dp-on-dark); }

/* 접기·펼치기 토글 (레일 머리) */
.qm-toggle {
  display: none;
  width: 100%;
  height: 7.6rem;
  padding: 1.2rem 0.6rem 1.4rem;
  background: var(--dp-dark-head);
  color: #FFFFFF;                      /* #333 대비 12.63:1 */
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.qm-toggle:hover { background: #454545; }
.qm-arrow { display: block; margin: 0 auto 0.4rem; width: 1.6rem; height: 1.6rem; position: relative; }
.qm-arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7rem;
  width: 1.6rem; height: 0.2rem;
  background: currentColor;
}
.qm-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 0.35rem;
  width: 0.9rem; height: 0.9rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
/* 접힌 상태에서는 화살표가 반대(펼치기)를 가리킨다 */
.qm-toggle[aria-expanded="false"] .qm-arrow::after {
  right: auto; left: 0;
  transform: rotate(225deg);
}
.qm-toggle-text {font-size: var(--fs-xs);font-weight: 700;opacity: 1;position: absolute;white-space: nowrap;transform: translateX(-50%);}

.qm-list {display: grid;transition: width .2s ease;}
.qm-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 5.6rem;
  padding: var(--sp-3) var(--sp-4);
  color: var(--dp-on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: width .2s ease;
}
.qm-list a:hover {  color: #FFFFFF; }
.qm-list img {width: 3.2rem;height: 3.2rem;flex: none;}
.qm-label { min-width: 0; }

/* 레일 맨 아래 '맨 위로' */
.qm-top {
  display: none;
  width: 100%;
  padding: 1.4rem 0.6rem 1.6rem;
  color: #FFFFFF;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.14);
}
.qm-top:hover { background: rgba(255,255,255,.14); }
.qm-top-arrow {
  display: block;
  width: 1.2rem; height: 1.2rem;
  margin: 0.2rem auto 0.6rem;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}
.qm-top-text { font-size: var(--fs-xs); font-weight: 700; }

/* 우측 하단 플로팅 스택 — 아래에서 위로 쌓이므로 목록이 열리면 토글이 위로 밀린다.
   간격은 gap 대신 형제 마진으로 준다: 닫힌 목록(height:0)이 빈 간격을 남기지 않게 하기 위함. */
.dp-fab {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 5.6rem;
}
.dp-fab > * + * { margin-top: 1.2rem; }

/* 평소에는 본문을 가리지 않도록 옅게 두고, 포인터를 올리면 또렷해진다.
   마우스가 없는 터치 환경에서는 hover가 없으므로 항상 100%로 둔다. */
@media (hover: hover) {
  .dp-fab { opacity: .6; transition: opacity .2s ease; }
  .dp-fab:hover,
  .dp-fab:focus-within,
  .dp-fab.is-open { opacity: 1; }
}
@media (prefers-contrast: more) {
  .dp-fab { opacity: 1; }
}

.fab-btn {
  flex: none;
  width: 5.6rem; height: 5.6rem;     /* 터치 조작 영역 44px 이상 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dp-radius-pill);
  border: 1px solid rgba(30, 33, 36, .12);
  background: #DDE1E8;
  color: var(--dp-gray-90);          /* 아이콘 대비 12.33:1 (60% 상태에서도 3.68:1) */
  box-shadow: var(--dp-shadow-2);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fab-btn:hover { background: #CFD5DF; }
.fab-btn svg { width: 2.2rem; height: 2.2rem; }
.dp-fab .fab-btn:focus-visible { outline-color: var(--dp-primary); }

/* 퀵메뉴 열기/닫기 — "+"가 회전하며 "×"가 된다 */
.fab-plus { position: relative; display: block; width: 2.2rem; height: 2.2rem; }
.fab-plus::before,
.fab-plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.fab-plus::before { width: 2.2rem; height: 2px; }
.fab-plus::after { width: 2px; height: 2.2rem; }
.fab-toggle .fab-plus { transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.fab-toggle[aria-expanded="true"] {
  background: var(--dp-primary);
  border-color: transparent;
  color: #FFFFFF;                    /* #256EF4 대비 4.60:1 */
}
.fab-toggle[aria-expanded="true"]:hover { background: var(--dp-primary-hover); }
.fab-toggle[aria-expanded="true"] .fab-plus { transform: rotate(135deg); }

/* ------------------------------------------------------------
   10. 공통 컴포넌트 (버튼 · 표 · 차트 대체 표)
   ------------------------------------------------------------ */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 5.2rem;
  padding: 0 2.6rem;
  border-radius: var(--dp-radius);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}
.dp-btn--primary { background: var(--dp-primary); color: #fff; }
.dp-btn--primary:hover { background: var(--dp-primary-hover); color: #fff; }
.dp-btn--secondary { background: var(--dp-gray-0); border-color: var(--dp-gray-50); color: var(--dp-gray-80); }
.dp-btn--secondary:hover { border-color: var(--dp-primary); color: var(--dp-primary-hover); }

.dp-table-scroll { overflow-x: auto; }
.dp-table { font-size: var(--fs-sm); }
.dp-table caption { text-align: left; padding-bottom: var(--sp-2); font-size: var(--fs-xs); color: var(--dp-gray-60); }
.dp-table th, .dp-table td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--dp-gray-30);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dp-table th[scope="col"] {
  background: var(--dp-gray-10);
  color: var(--dp-gray-80);
  font-weight: 700;
  border-bottom: 1px solid var(--dp-gray-40);
}
.dp-table th[scope="row"] { text-align: left; font-weight: 700; color: var(--dp-gray-80); }

.chart-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--dp-gray-50);
  border-radius: var(--dp-radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dp-gray-70);
}
.chart-switch:hover { border-color: var(--dp-primary); color: var(--dp-primary-hover); }
/* 차트 대체 표 — 평소에는 .sr-only(접근성 트리에는 남음), 버튼으로 화면 노출 */
.chart-data { margin-top: var(--sp-4); }

/* ------------------------------------------------------------
   11. 푸터 — '인구변동 통계시각화'와 동일 사양
   KRDS: 모든 화면 동일 위치 · 개인정보 처리방침 · 자주 찾는 링크 · 최신 연락처
   ------------------------------------------------------------ */
.dp-footer {
  margin-top: var(--sp-9);
  background: var(--dp-dark);
  color: var(--dp-on-dark-sub);
  font-size: var(--fs-sm);
  position: relative;
  box-shadow: 0 1px 0 0 var(--dp-dark); /* 배율에 따라 푸터 하단에 서브픽셀 흰 선(body 배경)이 비치는 것 차단 (2026-09-03) */
}
.dp-footer a { color: var(--dp-on-dark); }
.dp-footer a:hover { color: #FFFFFF; }

.ft-links { border-bottom: 1px solid rgba(255,255,255,.14); }
.ft-links .dp-container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding-top: 1.8rem; padding-bottom: 1.8rem;
}
.ft-links a { color: var(--dp-on-dark); font-weight: 700; text-decoration: none; padding: 0.4rem 0.2rem; }
.ft-links a:hover { color: #fff; text-decoration: underline; }
.ft-links a.is-strong { color: #fff; font-weight: 700; }

.ft-sites { border-bottom: 1px solid rgba(255,255,255,.14); }
.ft-sites .dp-container {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-4); padding-bottom: var(--sp-4);
}
.site-select { position: relative; min-width: 0; }
.site-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 4.4rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--dp-radius);
  background: var(--dp-dark);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
}
.site-toggle:hover { border-color: rgba(255,255,255,.6); }
.site-toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-arrow {
  flex: none;
  width: 0.9rem; height: 0.9rem;
  margin-top: -0.4rem;
  border-right: 2px solid var(--dp-on-dark-sub);
  border-bottom: 2px solid var(--dp-on-dark-sub);
  transform: rotate(45deg);
  transition: transform .18s ease, margin .18s ease;
}
.site-toggle[aria-expanded="true"] .site-arrow { margin-top: 0.3rem; transform: rotate(225deg); }
.site-panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 0.6rem);
  z-index: 20;
  padding: 0.6rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--dp-radius);
  background: var(--dp-dark);
  box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  max-height: 32rem;
  overflow-y: auto;
}
.site-select.is-open .site-panel { display: block; }
.site-panel a {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: var(--dp-radius-sm);
  color: var(--dp-on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.site-panel a:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
.site-panel a::after { content: " ↗"; color: var(--dp-on-dark-sub); }
.site-panel a:hover::after { color: #FFFFFF; }

.ft-body .dp-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  justify-content: space-between;
  align-items: flex-end;
}
.ft-org { min-width: 0; }
.ft-org .ft-logo {display: block;height: 4rem;width: auto;margin-bottom: var(--sp-4);}
.ft-org address { font-style: normal; line-height: 1.9; }
.ft-note { text-align: right; color: var(--dp-on-dark-sub); line-height: 1.9; }

/* ------------------------------------------------------------
   12. 모션 최소화 / 선명한 화면 모드
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;   /* 순차 등장 지연도 함께 없앤다 */
  }
}
@media (forced-colors: active) {
  .dp-btn, .dp-card, .hd-icon-btn, .fab-btn, .sm-col > h3 a { border: 1px solid ButtonBorder; }
  .gnb-btn[aria-expanded="true"] { background: Highlight; color: HighlightText; }
}

/* ------------------------------------------------------------
   12-1. 터치 조작 영역
   KWCAG 6.1.3 조작 가능 — 마우스 17×17px / 터치 44×44px 이상.
   좁은 화면 레이아웃(≤1024px)과 터치 포인터(coarse) 환경에 모두 적용한다.
   ------------------------------------------------------------ */
@media (max-width: 1024px), (pointer: coarse) {
  .hd-brand { min-height: 4.4rem; }

  /* 누리집안내(전체 메뉴) — 768px 미만에서는 이 목록이 주 내비게이션이다 */
  .sm-2d { padding-top: 1rem; padding-bottom: 1rem; min-height: 4.4rem; }
  .sm-2d::before { top: calc(1rem + 0.8em - 0.2rem); }
  h4.sm-2d { padding-top: 0; padding-bottom: 0; padding-left: 0; }
  h4.sm-2d a { display: block; min-height: 4.4rem; padding: 1rem 0.4rem 1rem 1.4rem; }
  .sm-sub a { padding-top: 1rem; padding-bottom: 1rem; min-height: 4.4rem; }
  .sm-sub a::before { top: calc(1rem + 0.8em); }
  .sm-list { gap: 0; }

  /* 주요 메뉴 하위 패널 (태블릿 터치) */
  .mm-links a { padding-top: 1rem; padding-bottom: 1rem; min-height: 4.4rem; }
  .mm-links a::before { top: calc(1rem + 0.8em - 0.2rem); }
  .mm-group .mm-links a { padding-top: 1rem; padding-bottom: 1rem; }

  /* 푸터 자주 찾는 링크 */
  .ft-links a { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0.4rem 0.6rem; }
}

/* ============================================================
   13. 반응형
   1281(퀵 레일) / 1280 / 1024 / 768 / 560 / 460(최적화) / 360 / 320(→290 유지)
   ============================================================ */

/* --- 1281px 이상: 우측 고정 퀵메뉴 레일 --- */
@media (min-width: 1281px) {
  body { padding-right: var(--quick-cur); }

  .dp-quick {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--quick-cur);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width .2s ease;
  }
  .qm-toggle { display: block; }
  .qm-top { display: block; margin-top: auto; }

  .qm-list a {
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    min-height: 0;
    padding: 1.8rem 0.6rem;
    font-size: var(--fs-xs);
    text-align: center;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  /* 접힌 상태: 아이콘만 남기고 레이블은 보조기기에만 제공한다 */
  html.is-quick-collapsed .qm-list a { padding: 1.6rem 0.6rem; }
  html.is-quick-collapsed .qm-label,
  html.is-quick-collapsed .qm-toggle-text,
  html.is-quick-collapsed .qm-top-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    /* clip: rect(0 0 0 0); */
    /* clip-path: inset(50%); */
    white-space: nowrap;
    border: 0;
    font-size: 0;
    opacity: 0;
    transition: all 0.2s;
  }
  html.is-quick-collapsed .qm-toggle { padding: 1.4rem 0.6rem; }
  html.is-quick-collapsed .qm-arrow { margin-bottom: 0; }
  html.is-quick-collapsed .qm-top { padding: 1.6rem 0.6rem; }
  html.is-quick-collapsed .qm-top-arrow { margin-bottom: 0; }

  /* 레일 구간에서는 래퍼를 레이아웃에서 지워 nav가 그대로 고정 레일이 되게 한다 */
  .dp-fab { display: contents; }
  .dp-fab > .fab-btn { display: none; }
  .dp-fab > * + * { margin-top: 0; }
  .dp-quick { margin: 0; background: var(--dp-dark-deep); }

  /* 푸터 관련 사이트 드롭다운 — 자주 찾는 링크 줄 우측에 겹쳐 배치 */
  .ft-sites { position: absolute; left: 0; right: 0; top: 0; border-bottom: none; pointer-events: none; }
  .ft-sites .dp-container { justify-content: flex-end; }
  .ft-sites .site-select { width: 21rem; pointer-events: auto; }
  .ft-links .dp-container { padding-right: calc(var(--layout-pad) + 46rem); }
}

/* --- 1280px 이하: 퀵메뉴는 우측 하단 플로팅 팝오버 --- */
@media (max-width: 1280px) {
  :root { --layout-pad: 2.8rem; }
  .gnb-list { gap: 3.2rem; }

  /* --- 스피드다이얼 목록 -----------------------------------
     닫힘: max-height 0 (형제 마진도 0이라 스택에 빈틈이 생기지 않는다)
     열림: max-height가 펴지고 항목이 아래→위 순으로 차례로 나타난다 */
  .dp-quick {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: min(30rem, calc(100vw - 3.2rem));
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    /* 닫히면 visibility:hidden — 화면에 없는 링크가 Tab 순서에 남지 않게 한다.
       접히는 동안은 보여야 하므로 전환이 끝난 뒤에 감춘다 (KWCAG 6.1.2 초점 이동과 표시) */
    visibility: hidden;
    transition: max-height .32s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .32s;
  }
  .dp-quick.is-open {
    max-height: min(46rem, calc(100vh - 16rem));
    overflow-y: auto;
    margin-top: 1.2rem !important;
    visibility: visible;
    transition: max-height .32s cubic-bezier(.2, .8, .3, 1), visibility 0s linear 0s;
  }

  .qm-list { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
  .qm-list li {
    width: 24rem;
    opacity: 0;
    transform: translateY(1rem) scale(.94);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
  }
  .dp-quick.is-open .qm-list li { opacity: 1; transform: none; }
  /* 토글에서 먼 항목부터(아래에서 위로) 순차 등장 */
  .dp-quick.is-open .qm-list li:nth-child(5) { transition-delay: .02s; }
  .dp-quick.is-open .qm-list li:nth-child(4) { transition-delay: .06s; }
  .dp-quick.is-open .qm-list li:nth-child(3) { transition-delay: .10s; }
  .dp-quick.is-open .qm-list li:nth-child(2) { transition-delay: .14s; }
  .dp-quick.is-open .qm-list li:nth-child(1) { transition-delay: .18s; }

  .qm-list a {
    gap: 0.4rem;
    min-height: 4.8rem;               /* 터치 조작 영역 44px 이상 */
    padding: 0.6rem 1.8rem 0.6rem 0.6rem;
    border-radius: var(--dp-radius-pill);
    background: var(--dp-dark-deep);
    color: #FFFFFF;                   /* #090F1C 대비 18.9:1 */
    font-size: var(--fs-xs);
    font-weight: 700;
    /* 글자 크기를 크게 설정하면 알약이 화면 밖으로 밀리므로 줄바꿈을 허용한다 */
    width: 100%;
  }
  .qm-list a:hover {}
  .qm-list img {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.6rem;
  }
  .qm-label { min-width: 0; }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .ft-sites { position: absolute; left: 0; right: 0; top: 0; border-bottom: none; pointer-events: none; }
  .ft-sites .dp-container { justify-content: flex-end; }
  .ft-sites .site-select { width: 21rem; pointer-events: auto; }
  .ft-links .dp-container { padding-right: calc(var(--layout-pad) + 46rem); }
}

@media (max-width: 1024px) {
  :root { --fs-h1: 2.8rem; --fs-h2: 2.1rem; }
  .hd-top { min-height: 6.8rem; }
  .hd-brand img { height: 4rem; }
  .gnb-list { gap: 2rem; }
  .gnb-btn { font-size: var(--fs-sm); }
  .gnb-panel .dp-container { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--sp-5); }
  .mm-head h3 { font-size: 2.1rem; }
  .sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
  .ov-sitemap .ov-body { padding-top: 8.8rem; }
}

/* --- 768px 미만: 주요 메뉴는 누리집안내 오버레이로 대체 --- */
@media (max-width: 768px) {
  :root { --layout-pad: 1.6rem; }

  .hd-top { min-height: 6.2rem; gap: var(--sp-2); }
  .hd-brand img { height: 3.2rem; }
  .hd-nav { display: none; }

  .ov-close { top: 1.2rem; right: 1.2rem; width: 4.4rem; height: 4.4rem; }
  .ov-close svg { width: 2.2rem; height: 2.2rem; }
  .ov-search .ov-body { padding: 8.4rem var(--layout-pad) 6.4rem; }
  .ov-search h2 { font-size: 2.1rem; }
  .search-field { padding-left: var(--sp-3); }
  .search-field input { height: 5.6rem; font-size: var(--fs-sm); }
  .search-submit { width: 4.4rem; height: 4.4rem; }
  .search-submit svg { width: 2.2rem; height: 2.2rem; }

  .ov-sitemap .ov-body { padding: 7.2rem var(--layout-pad) 5.6rem; }
  .ov-sitemap .ov-body > h2 { font-size: 2.1rem; }
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ft-sites .dp-container { flex-direction: column; gap: var(--sp-4); }
  .ft-body .dp-container { flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
  .ft-note { text-align: left; }
  .ft-links .dp-container { gap: var(--sp-2) var(--sp-4); }
}

@media (max-width: 560px) {
  :root { --fs-h1: 2.4rem; --fs-h2: 2rem; --fs-h3: 1.8rem; --fs-lg: 1.8rem; }
  .dp-btn { width: 100%; }
  .sitemap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* --- 460px 이하: 모바일 최적화 기준 폭 --- */
@media (max-width: 460px) {
  :root {
    --layout-pad: 1.4rem;
    --fs-body: 1.6rem;            /* KRDS 자체 상징 서체 최소 크기 유지 */
    --fs-sm: 1.5rem;
    --fs-xs: 1.5rem;              /* 보조 텍스트도 15px 아래로 내리지 않는다 */
    --fs-h1: 2.2rem;
    --sp-7: 2.4rem; --sp-8: 2.8rem; --sp-9: 3.6rem;
  }
  .dp-table th, .dp-table td { padding: 0.9rem 1rem; }
  .dp-fab { right: 1.2rem; bottom: 1.2rem; }
}

@media (max-width: 360px) {
  :root { --layout-pad: 1.2rem; --fs-h1: 2.1rem; }
  .hd-brand img { height: 2.8rem; }

}

/* --- 320px 이하: 최소 지원 폭(290px까지 레이아웃 유지) --- */
@media (max-width: 320px) {
  :root { --layout-pad: 1rem; --fs-h1: 2rem; }
  /* 320px에서도 터치 조작 영역 44px을 유지한다 (KWCAG 6.1.3) */
  .hd-icon-btn { width: 4.4rem; height: 4.4rem; }
  .ft-links .dp-container { gap: var(--sp-1) var(--sp-3); }
  .dp-quick { max-width: calc(100vw - 2.4rem); }
  .qm-list a { padding: 0.5rem 1.4rem 0.5rem 0.5rem; }
  .qm-list img { width: 3.2rem; height: 3.2rem; }
}


/* 굵기 2단계 통일 보강(2026-09-15): <b>·<strong>의 브라우저 기본값은 bolder 라 부모가 700이면 계산값이 900이 된다(인구통계 상세·지역별 현황 값 표기에서 확인). 표준형 bold 700 으로 고정 */
b, strong { font-weight: 700; }

/* [퍼블 0921 접근성] 푸터 링크·대표전화 조작 영역 44px 을 PC 폭까지 확대 — 새탭 공용(style_common.css)과 같은 값으로 푸터 동형 유지 (2026-09-21).
   기존엔 1024px 이하·터치 환경에서만 4.4rem 이었음 */
.dp-footer .ft-links a{display:inline-flex;align-items:center;min-height:4.4rem}
.dp-footer .ft-body address a{display:inline-flex;align-items:center;min-height:4.4rem}