/* 글자 굵기 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)는 안전망으로 유지 */
/* style_common.css — 새탭 서비스 공통 스타일 (디자인 토큰·헤더(svc)·푸터(dp-footer)·본문 래퍼(.wrap) 규격의 단일 소스)
 * 출처: 헤더 = 0.PUB/style_community.css(2026-08-25 확정 퍼블) / 푸터 = 0_PUB(메인포털)/resource/css/common.css(2026-09-01 확정 퍼블, px 환산 수록 — 파일 하단 푸터 절 참조).
 * (구) body.popstat 병기는 2026-09-04 제거 — popstat 스코프 리셋·기본 타이포를 이 파일의 무스코프 공용판으로 이관하며 특이도 경쟁이 사라짐.
 * 서비스 css(현 style_csi.css·style_popstat.css)에서는 같은 셀렉터를 제거해 중복을 없앴다(2026-08-25).
 * 퍼블 갱신 시 이 파일을 같은 방식으로 재추출하고, 서비스 css에서 헤더·푸터 셀렉터를 다시 제거할 것. */

/* ------------------------------------------------------------
   웹폰트 — Paperlogy (2026-09-01: 구 /css/Paperlogy.css 삭제에 따라 수록.
   메인 포털은 /css/common.css(새 퍼블본)의 @font-face를 쓰지만 새탭은 그 파일을
   로드할 수 없어(rem 62.5% 전제) 여기 별도 수록 — 선언 내용은 동일, 경로만 이 파일 기준.
   실파일: /fonts/Paperlogy/ — 현재 4·6·7·8(400/600/700/800)만 있음, 나머지는 합성 폴백. 900은 새탭 미사용이라 선언 삭제(2026-09-01))
   ------------------------------------------------------------ */
/* ── Paperlogy 굵기 2단계 접기(KRDS 표준형: regular 400 · bold 700 두 가지 두께) — 2026-09-15 로컬 시험 적용 ──
   새탭(인구통계·지역사회보장지표·OECD) 공용.
   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');
}
/* ── 원본(굵기별 8블록) ──
@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');
}
*/

/* ------------------------------------------------------------
   디자인 토큰 (KRDS 스타일 — 색상/서체/형태/간격/엘리베이션)
   · 2026-08-28: style_popstat.css(구 popstat common.css)에서 이동 — 양 서비스 공용 단일 소스.
     csi도 이 토큰을 참조한다(파랑 계열은 KRDS 기본파랑으로 통일 — style_csi.css의 변수 재정의 참조).
   · 아래 서비스 공통 :root(--dp-heading 재정의 포함)가 이 블록보다 뒤라 일부 값을 덮는다 — 순서 유지할 것 */
:root {
  /* -- Primary -------------------------------------------- */
  --dp-primary:        #256EF4;  /* 흰 배경 대비 4.35:1 (그래픽 3:1 / 큰 텍스트 3:1 충족) */
  --dp-primary-strong: #1A5AD7;  /* 본문 크기 링크·텍스트용 5.6:1 */
  --dp-primary-hover:  #0B50D0;  /* hover / active */
  --dp-primary-active: #083891;  /* KRDS primary-70 공식값 (2026-08-28, 구 #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.9:1 */
  --dp-point-bg: #FBEEEC;
  --dp-point-border: #F3B9B2;

  /* -- Secondary ------------------------------------------
     2026-08-28: 퍼블 유사값(#003675/#002A5C/#EAF0F7)을 KRDS 공식 팔레트 값으로 교정 */
  --dp-secondary:      #063A74;  /* KRDS secondary-70 */
  --dp-secondary-hover:#052B57;  /* KRDS secondary-80 */
  --dp-secondary-bg:   #EEF2F7;  /* KRDS secondary-5 */

  /* -- Gray ----------------------------------------------- */
  --dp-gray-0:  #FFFFFF;
  --dp-gray-5:  #F7F8F9;
  --dp-gray-10: #F0F2F5;
  --dp-gray-20: #E4E7EC;
  --dp-gray-30: #D0D5DD;
  --dp-gray-40: #B1B8C0;
  --dp-gray-50: #8A9099;
  --dp-gray-60: #6D7582;  /* 흰 배경 대비 4.9:1 */
  --dp-gray-70: #4B5563;  /* 8.0:1 */
  --dp-gray-80: #33363D;
  --dp-gray-90: #1E2124;  /* 본문 텍스트 15.6:1 */

  /* -- System (정보·성공·경고·위험) ------------------------ */
  --dp-info:    #256EF4;
  --dp-success: #228738;
  --dp-warning: #FF9000;
  --dp-danger:  #DE3412;  /* 흰 배경 대비 4.6:1 */
  --dp-info-bg:    #F0F6FF;
  --dp-success-bg: #EAF6EC;
  --dp-warning-bg: #FFF6E8;
  --dp-danger-bg:  #FDEEEA;

  /* -- 서체 ------------------------------------------------ */
  --dp-font: 'Paperlogy', 'Pretendard GOV', 'Pretendard',
               -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --fs-body:   17px;   /* KRDS 본문 최소 크기(자체 상징 16px 이상) */
  --fs-sm:     16px;
  --fs-xs:     15px;   /* 축약 레이블·차트 축 등 보조 텍스트 전용 */
  --fs-xxs:    13px;
  --fs-xxxs:   11px; 
  --fs-lg:     19px;
  --fs-h3:     20px;
  --fs-h2:     23px;
  --fs-h1:     32px;
  --lh-body:   1.6;    /* 글자 크기의 1.5배 이상 */
  --lh-tight:  1.35;

  /* -- 형태 ------------------------------------------------ */
  --dp-radius-sm: 4px;
  --dp-radius:    6px;
  --dp-radius-lg: 12px;
  --dp-radius-xl: 16px;
  --dp-radius-pill: 999px;
  --dp-border-color: var(--dp-gray-20);

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

  /* -- 간격 ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* -- 레이아웃 -------------------------------------------- */
  /* 최대폭·좌우 패딩은 새탭 공통 규격(--nt-*)을 따른다 — 피라미드 화면의 잔존 .dp-container 용 */
  --layout-max: var(--nt-max, 1440px);
  --layout-pad: var(--nt-pad-x, 40px);
  --focus-ring: 3px;
}

/* ------------------------------------------------------------
   새탭 공용 리셋·기본 타이포 (2026-09-04 — 구 style_popstat.css 리셋 절을 무스코프 공용판으로 이관)
   · 전부 요소 셀렉터(특이도 0-0-1 이하): 뒤에 로드되는 서비스 CSS와 이 파일의 클래스 규칙이 항상 이긴다.
   · csi는 자체 리셋(*{margin:0...})·기본값(a/table/h1~h3 등)이 같은 층에 이미 있어 대부분 동일 값 중복.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, fieldset, legend, table, th, td { margin: 0; padding: 0; }
ul, ol { list-style: none; }
div, label, input, select, textarea, button, ul, ol, li, table, address, cite, code, em {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
img, svg, canvas, video { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }
/* body 기본 타이포 — 새탭 서비스 공통(2026-09-08 사용자 확정: 서비스 css에 두지 않고 여기서 한 번).
   미지정 시 브라우저 기본 폰트(Noto Sans KR 등)로 렌더되던 oecd 사례. 특이도 0-0-1이라 서비스 css의 body 규칙(csi 500 등)이 이긴다 */
body {
  min-width: 280px;
  -webkit-text-size-adjust: 100%;
  font-family: var(--dp-font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
}
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: 3px; }
a:hover { color: var(--dp-primary-hover); }
button, input, select, textarea { font-family: inherit; font-size: var(--fs-sm); color: inherit; }
button { cursor: pointer; background: none; border: 0; }
table { border-collapse: collapse; width: 100%; }

:root {
  /* 퍼블 css가 .svc-name a에 var(--dp-heading)을 쓰면서 정의는 안 해 서비스별 색이 갈렸음(csi 상속 #1E2B45 vs popstat #1E2B5C).
     퍼블 신판 렌더 기준으로 통일 정의. 재추출 시 이 변수 유지할 것 */
  --dp-heading: #1E2B45; /* 퍼블 신판 실제 렌더 색(--navy 상속값). 인구통계 구값 #1E2B5C에서 변경(2026-08-25 사용자 확인) */
  --navy: #1E2B45;
  --line: #DDE3EE;
  --text: #25324B;
  --ci: var(--dp-secondary); /* KRDS Secondary(#003675)로 변경 (2026-08-28, 구 #1653C4 → dp-primary → dp-secondary) */
  --ci-soft: #DCE6F8;
  --coral: #f0705f;
  --ink: #25324B;
  --blue: var(--dp-primary); /* KRDS 기본파랑으로 통일 (2026-08-28, 구 #1653C4) */
  --ink-sub: #55617A;

  /* ── 본문 컨테이너 공통 규격 (2026-08-28 구조 통일) ──
     csi·popstat 모두 본문 래퍼는 레이아웃이 출력하는 main.wrap 한 가지.
     아래 .wrap 규칙과 이 변수들이 단일 소스 — 서비스 css에는 컨테이너 규격 선언을 두지 않는다.
     popstat 피라미드의 잔존 .dp-container(화면 내부 폭 유틸)도 좌우는 같은 변수를 따른다(--layout-* alias).
     세로 단계는 csi 기준(32→24→20), 가로 단계는 양 서비스 합집합(40→28→20→16→12→10) */
  --nt-max: 1440px;   /* 본문 최대폭 */
  --nt-pad-x: 40px;   /* 본문 좌우 패딩 */
  --nt-pad-y: 32px;   /* 본문 상하 패딩 */
}
@media (max-width:1280px) { :root { --nt-pad-x: 28px; } }
@media (max-width:1024px) { :root { --nt-pad-x: 20px; --nt-pad-y: 24px; } }
@media (max-width:768px)  { :root { --nt-pad-x: 16px; --nt-pad-y: 20px; } }
@media (max-width:360px)  { :root { --nt-pad-x: 12px; } }
@media (max-width:320px)  { :root { --nt-pad-x: 10px; } }

.wrap{
  width: 100%;
  max-width: var(--nt-max);
  margin: 0 auto;
  padding: var(--nt-pad-y) var(--nt-pad-x);
  box-sizing: border-box;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%); /* 구 popstat 자체판 수준으로 강화 — clip 단독보다 최신 브라우저에서 확실 (2026-08-28) */
  white-space: nowrap;
  border: 0;
}
.skip{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.skip:focus{
  left: 0;
}
.svc-top{
  padding-bottom: 12px;
}
.ci-img{
  width: auto;
  display: block;
}
.util-btn{
  cursor: pointer;
}
nav.gnb{
  margin: 0 -24px;
  padding: 0 24px;
  border-top: 1px solid var(--line);
}
nav.gnb ul{
  list-style: none;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  justify-content: center;
}
nav.gnb a{
  display: block;
  padding: 12px 18px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
nav.gnb a:hover{
  color: var(--ci);
  border-bottom-color: #F6C9C5;
}
nav.gnb a:focus-visible{
  color: var(--ci);
  border-bottom-color: var(--ci-soft);
}
nav.gnb a[aria-current="page"]{
  color: var(--ci);
  border-bottom-color: var(--coral);
  border-bottom-width: 3px;
}
nav.gnb a[aria-current="page"]:hover{
  border-bottom-color: var(--coral);
}
@media (max-width:1024px) {
nav.gnb ul{
    justify-content: flex-start;
  }
}
@media (max-width:1024px) {
.svc-top{
    grid-template-columns: auto 1fr auto;
  }
.svc-name{
    font-size: 18px;
  }
}
.util-btn,
.gnb a{
  min-height: 44px;
}
.sr-status{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width:1024px) {
.svc-top{
    padding: 0 16px 12px;
  }
.gnb{
    margin: 0 -16px;
    padding: 0 16px;
  }
}
@media (max-width:768px) {
.svc-top{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }
.svc-util{
    width: 100%;
    display: flex;
    justify-content: center;
  }
.ci-img{
    height: 40px;
  }
.gnb ul{
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
.gnb a{
    padding: 12px 14px;
    font-size: 15px;
  }
}
.ci-img{
  height: 42px;
}
.gnb{
  margin: 0 auto;
  padding: 0;
  border-top: none;
}
.gnb ul{
  display: flex;
  gap: 44px;
  justify-content: center;
  list-style: none;
}
.gnb a{
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  padding: 29px 2px;
  border-bottom: 3px solid transparent;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.gnb a:hover{
  color: var(--blue);
  border-bottom-color: transparent;
}
.gnb a[aria-current="page"]{
  color: var(--blue);
  font-weight: 700;
  border-bottom-color: var(--blue);
  border-bottom-width: 3px;
}
.gnb a[aria-current="page"]:hover{
  border-bottom-color: var(--blue);
}
header.svc{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.svc-top{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.svc-ci{
  /* justify-self: start; */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.svc-name{
  justify-self: center;
  margin: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.svc-name a{text-decoration:none;color: var(--dp-heading);}
.svc-util{
  justify-self: end;
  margin-left: 0;
  width: auto;
  display: block;
}
.util-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-sub);
  border: 1px solid #CDD5E4;
  background: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  min-height: 40px;
  white-space: nowrap;
}
.util-btn:hover{
  border-color: var(--blue);
  color: var(--blue);
}
.util-ico{
  width: 15px;
  height: 15px;
  flex: none;
}
.svc-nav{
  border-top: 1px solid var(--line);
}
.svc-nav .gnb,
.svc-nav nav.gnb{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  border-top: none;
}
.svc-nav .gnb ul,
.svc-nav nav.gnb ul{
  display: flex;
  gap: 44px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-nav .gnb a,
.svc-nav nav.gnb a{
  padding: 18px 2px;
}
@media (max-width:1024px) {
.svc-top{
    padding: 0 20px;
    gap: 16px;
    height: 68px;
  }
.svc-name{
    /* font-size:19px; */
  }
.svc-nav .gnb,
.svc-nav nav.gnb{
    padding: 0 20px;
  }
.svc-nav .gnb ul,
.svc-nav nav.gnb ul{
    gap: 24px;
    overflow-x: auto;
  }
}
@media (max-width:768px) {
.svc-top{
    flex-direction: column;
    padding: 12px 16px;
    gap: 8px;
    height: auto;
  }
.gnb ul{
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
  }
.gnb a{
    padding: 12px 2px;
  }
.gnb{
    padding: 0 16px;
  }
.gnb ul{
    gap: 18px;
  }
nav.gnb a{
    font-size: 15px;
    padding: 14px 2px;
  }
}
.svc-menu-btn{
  display: none;
}
.svc-menu-ico{
  position: relative;
  display: block;
  width: 18px;
  height: 13px;
  flex: none;
}
.svc-menu-ico i{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .2s ease,opacity .16s ease,top .2s ease;
}
.svc-menu-ico i:nth-child(1){
  top: 0;
}
.svc-menu-ico i:nth-child(2){
  top: 5.5px;
}
.svc-menu-ico i:nth-child(3){
  top: 11px;
}
.svc-menu-btn[aria-expanded="true"] .svc-menu-ico i:nth-child(1){
  top: 5.5px;
  transform: rotate(45deg);
}
.svc-menu-btn[aria-expanded="true"] .svc-menu-ico i:nth-child(2){
  opacity: 0;
}
.svc-menu-btn[aria-expanded="true"] .svc-menu-ico i:nth-child(3){
  top: 5.5px;
  transform: rotate(-45deg);
}
.svc-nav-util{
  display: none;
}
@media (max-width:768px) {
.svc-top{
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "ci menu" "name name";
    height: auto;
    padding: 10px 16px;
    row-gap: 8px;
    column-gap: 10px;
    align-items: center;
  }
.svc-ci{
    grid-area: ci;
    justify-self: start;
    min-width: 0;
  }
.ci-img{
    height: 36px;
  }
.svc-menu-btn{
    grid-area: menu;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #CDD5E4;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    cursor: pointer;
  }
.svc-menu-btn[aria-expanded="true"]{
    border-color: var(--blue);
    color: var(--blue);
    background: #F2F7FF;
  }
.svc-menu-btn[aria-expanded="true"] .svc-menu-ico i{
    background: var(--blue);
  }
.svc-name{
    grid-area: name;
    justify-self: center;
    /* font-size:17px; */
  }
.svc-name a{ text-decoration:none;}
.svc-util{
    display: none;
  }
.svc-nav{
    display: none;
    border-top: 1px solid var(--line);
  }
.svc-nav.is-open{
    display: block;
    animation: svcNavDown .2s ease;
  }
.svc-nav .gnb,
.svc-nav nav.gnb{
    padding: 0 16px;
  }
.svc-nav .gnb ul,
.svc-nav nav.gnb ul{
    flex-direction: column;
    gap: 0;
    overflow: visible;
    justify-content: flex-start;
  }
.svc-nav .gnb li{
    border-top: 1px solid var(--line);
  }
.svc-nav .gnb li:first-child{
    border-top: 0;
  }
.svc-nav .gnb a,
.svc-nav nav.gnb a{
    display: block;
    padding: 13px 2px;
    font-size: 15px;
    border-bottom: 0;
    white-space: normal;
  }
.svc-nav .gnb a[aria-current="page"]{
    border-bottom: 0;
    padding-left: 10px;
    box-shadow: inset 3px 0 0 var(--blue);
  }
.svc-nav-util{
    display: block;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
  }
.svc-nav-util .util-btn{
    width: 100%;
    justify-content: center;
  }
}
@media (max-width:360px) {
.svc-menu-btn{
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
    gap: 4px;
  }
.svc-nav .gnb,
.svc-nav nav.gnb{
    padding: 0 12px;
  }
}
.svc-ci{
  padding: 1px 0;
  margin: -1px 0;
  min-height: 44px;
}
.svc-ci img{height: 44px;width:auto;}
@media print {
.svc-nav,
.svc-menu-btn,
.svc-util,
.skip{
    display: none!important;
  }
header.svc{
    position: static;
    border-bottom: 1px solid #999;
  }
}
@media (max-width:360px) {
.svc-top{
    padding: 8px 12px;
    column-gap: 8px;
  }
.ci-img{
    height: 30px;
  }
.svc-name{
    font-size: 19px;
  }
.svc-menu-ico{
    width: 16px;
    height: 12px;
  }
.svc-nav-util{
    padding: 10px 12px 14px;
  }
.svc-nav-util .util-btn{
    font-size: 13px;
    padding: 8px 6px;
  }
}

/* ============================================================
   푸터 (2026-09-01 전 사이트 통일 — 메인 포털 확정 퍼블 기준)
   · 마크업·드롭다운 스크립트 = korBottom.jsp (메인 포털과 공용 1벌)
   · 원본: 0_PUB(메인포털)/resource/css/common.css "11. 푸터" + 관련 반응형.
     메인 포털은 그 파일(/css/common.css — 새 퍼블본 원본)을 그대로 로드하지만,
     새탭 css는 rem 16px 기준이라 퍼블 원본(html 62.5% 전제)을 직접 로드할 수 없어
     여기 px(1rem=10px 환산)로 수록한다. 퍼블 갱신 시 같은 환산으로 재추출할 것.
   · 이 파일이 서비스 css보다 뒤에 로드되므로 동특이도 경쟁은 여기가 이긴다.
   · 새탭 차이 하나: margin-top 0 (본문 간격은 .wrap 하단 패딩(--nt-pad-y)이 담당)
   ============================================================ */

/* 푸터 스코프 리셋 — 서비스 css 전역 규칙(a·button 등) 상속 차단 */
.dp-footer, .dp-footer *, .dp-footer *::before, .dp-footer *::after { box-sizing: border-box; }
.dp-footer ul { margin: 0; padding: 0; list-style: none; }
.dp-footer p, .dp-footer address, .dp-footer nav { margin: 0; padding: 0; }
.dp-footer img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
.dp-footer button {
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font-family: inherit; font-size: 16px; line-height: 1.6; cursor: pointer;
}
/* 키보드 포커스 — 어두운 배경이라 흰색 링 (퍼블 .dp-footer :focus-visible) */
.dp-footer :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; border-radius: 4px; }

/* 본체 (퍼블 --dp-dark #212B44 / --dp-on-dark #E4E7EC / --dp-on-dark-sub #C6CCD4) */
.dp-footer {
  --ft-pad: 40px;               /* 퍼블 --layout-pad 사다리(40→28→16→14→12→10)를 그대로 따른다 */
  margin-top: 0;                /* 새탭 보정 — 퍼블은 56px(--sp-9), 새탭은 .wrap 패딩이 간격 담당 */
  background: #212B44;
  color: #C6CCD4;
  font-family: var(--dp-font);
  font-size: 16px;              /* 퍼블 --fs-sm */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  position: relative;
}
.dp-footer a { color: #E4E7EC; }
.dp-footer a:hover { color: #FFFFFF; }
.dp-footer address a { display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* 컨테이너 — 퍼블 .dp-container(최대 1440px)를 푸터 스코프로 한정 */
.dp-footer .dp-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--ft-pad);
  padding-right: var(--ft-pad);
}

/* 자주 찾는 링크 */
.dp-footer .ft-links { border-bottom: 1px solid rgba(255,255,255,.14); }
.dp-footer .ft-links .dp-container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px;
  padding-top: 18px; padding-bottom: 18px;
}
.dp-footer .ft-links a { color: #E4E7EC; font-weight: 700; text-decoration: none; padding: 4px 2px; }
.dp-footer .ft-links a:hover { color: #fff; text-decoration: underline; }
.dp-footer .ft-links a.is-strong { color: #fff; font-weight: 700; }

/* 관련 사이트 바로가기 (셀렉트 형태의 링크 드롭다운) */
.dp-footer .ft-sites { border-bottom: 1px solid rgba(255,255,255,.14); }
.dp-footer .ft-sites .dp-container {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding-top: 16px; padding-bottom: 16px;
}
.dp-footer .site-select { position: relative; min-width: 0; }
.dp-footer .site-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 6px;
  background: #212B44;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.dp-footer .site-toggle:hover { border-color: rgba(255,255,255,.6); }
.dp-footer .site-toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-footer .site-arrow {
  flex: none;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-right: 2px solid #C6CCD4;
  border-bottom: 2px solid #C6CCD4;
  transform: rotate(45deg);
  transition: transform .18s ease, margin .18s ease;
}
.dp-footer .site-toggle[aria-expanded="true"] .site-arrow { margin-top: 3px; transform: rotate(225deg); }
.dp-footer .site-panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 6px;
  background: #212B44;
  box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  max-height: 320px;
  overflow-y: auto;
}
.dp-footer .site-select.is-open .site-panel { display: block; }
.dp-footer .site-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  color: #E4E7EC;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.dp-footer .site-panel a:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
.dp-footer .site-panel a::after { content: " ↗"; color: #C6CCD4; }
.dp-footer .site-panel a:hover::after { color: #FFFFFF; }

/* 기관 정보 */
.dp-footer .ft-body .dp-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  justify-content: space-between;
  align-items: flex-end;
}
.dp-footer .ft-org { min-width: 0; }
.dp-footer .ft-org .ft-logo { display: block; height: 40px; width: auto; margin-bottom: 16px; }
.dp-footer .ft-org address { font-style: normal; line-height: 1.9; }
.dp-footer .ft-note { text-align: right; color: #C6CCD4; line-height: 1.9; }

/* 반응형 — 769px 이상: 관련 사이트 드롭다운을 자주 찾는 링크 줄 우측에 겹쳐 배치
   (퍼블은 1281↑/769–1280 두 블록에 동일 규칙 — 푸터만 발췌하므로 하나로 합침) */
@media (min-width: 769px) {
  .dp-footer .ft-sites { position: absolute; left: 0; right: 0; top: 0; border-bottom: none; pointer-events: none; }
  .dp-footer .ft-sites .dp-container { justify-content: flex-end; }
  .dp-footer .ft-sites .site-select { width: 210px; pointer-events: auto; }
  .dp-footer .ft-links .dp-container { padding-right: calc(var(--ft-pad) + 460px); }
}

/* 터치 조작 영역 — KWCAG 6.1.3 (마우스 17px / 터치 44px 이상) */
@media (max-width: 1024px), (pointer: coarse) {
  .dp-footer .ft-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 6px; }
}

@media (max-width: 1280px) {
  .dp-footer { --ft-pad: 28px; }
}

@media (max-width: 768px) {
  .dp-footer { --ft-pad: 16px; }
  .dp-footer .ft-sites .dp-container { flex-direction: column; gap: 16px; }
  .dp-footer .ft-body .dp-container { flex-direction: column; gap: 20px; align-items: flex-start; }
  .dp-footer .ft-note { text-align: left; }
  .dp-footer .ft-links .dp-container { gap: 8px 16px; }
}

/* 460px 이하: 모바일 최적화 기준 폭 (퍼블 --fs-sm 15px) */
@media (max-width: 460px) {
  .dp-footer { --ft-pad: 14px; font-size: 15px; }
  .dp-footer .site-toggle, .dp-footer .site-panel a, .dp-footer button { font-size: 15px; }
  .dp-footer .ft-body .dp-container { padding-top: 24px; padding-bottom: 24px; }
}

@media (max-width: 360px) {
  .dp-footer { --ft-pad: 12px; }
}

/* 320px 이하: 최소 지원 폭 */
@media (max-width: 320px) {
  .dp-footer { --ft-pad: 10px; }
  .dp-footer .ft-links .dp-container { gap: 4px 12px; }
}

/* 모션 최소화 / 인쇄 */
@media (prefers-reduced-motion: reduce) {
  .dp-footer .site-arrow { transition: none; }
}
@media print {
  .dp-footer { background: #fff; color: #000; border-top: 1px solid #999; }
  .dp-footer .ft-sites { display: none !important; }
}

/* ── 상속 차단 베이스라인 (2026-08-25 · 2026-09-01 푸터분 footer.css로 이관) ──
   서비스별 body 기본값이 달라(csi 16px/500/-0.02em vs popstat 17px/400/-0.01em) 헤더의
   글자 크기·굵기·자간·행간이 미세하게 갈렸다. 퍼블(지역사회보장지표) 렌더 기준을 스코프에 명시해
   어느 서비스에서든 동일하게 만든다. 상속은 명시 선언에 항상 지므로 특이도 병기 불필요 */
header.svc {
  font-family: 'Paperlogy','Pretendard GOV',sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
  /* 줄바꿈 방식도 통일(퍼블 기준) — popstat body의 keep-all/anywhere 상속 시 좁은 폭에서 줄바꿈 위치가 갈림 */
  word-break: normal;
  overflow-wrap: normal;
}
/* 퍼블 전역 button 규칙(style_csi.css의 전역 button)의 헤더 적용분.
   :where()로 특이도를 전역 button과 같은 (0,0,1)로 낮춰 명시 크기를 침범하지 않는다 */
:where(header.svc) button {
  font-family: inherit;
  letter-spacing: -0.05em;
  color: inherit;
  font-size: 15px;
  padding: 0; /* UA 기본 패딩(1px 6px) 상속 차단 — 퍼블(csi) 리셋 기준 */
}

/* 잔여 통일 보정 (2026-08-25): 서비스 css의 전역 요소 규칙(button)이 서비스마다 달라 남던 차이.
   CSI(퍼블) 렌더 기준값을 명시. body.popstat 병기는 .popstat 스코프 규칙과의 특이도 경쟁 대비 */
.svc-menu-btn{ font-size: 15px; letter-spacing: -0.05em; }

/* 세로 스크롤바 항상 표시 (2026-08-25): 퍼블(현 style_csi.css)과 동일 규칙을 공통화.
   메뉴 전환 시 스크롤바 유무로 가로폭이 출렁이는 것 방지
   (구 사유였던 푸터 .ft-sites right calc 어긋남은 신 퍼블 오버레이 방식으로 원인 자체가 사라짐) */
html { overflow-y: scroll; }

/* (popstat 전용 body.popstat{height:auto} sticky 복구 규칙은 style_popstat.css로 이관 — 2026-09-04) */

/* ── 공통 브레드크럼(bc-list) — 메인 포털(css/public-data.css) 환산판 (2026-09-01 구조 통일) ──
   메인 포털 서브 크럼과 같은 마크업(nav.dp-breadcrumb > ol.bc-list)·디자인.
   퍼블이 토큰을 쓴 자리는 새탭 자체 토큰(--sp-*·--fs-* — px 정의, 값 동일)으로, 퍼블도 리터럴인 미세값(.7rem 화살촉,
   .6rem/.4rem 링크 패딩, 4.4rem 터치, 76rem)만 px 리터럴로 환산(1rem=10px).
   메인과의 차이 하나: 현재 위치 색 #1E2B5C — 메인 --dp-heading 원값 고정(새탭 :root 재정의 #1E2B45와 분리).
   퍼블(public-data.css) 갱신 시 같은 방식으로 재추출한다 */
.dp-breadcrumb{ padding: var(--sp-5) 0 0; } /* 메인과 동일 — 헤더→크럼 20px */
/* 크럼 있는 화면(.has-crumb — 레이아웃이 부여)은 컨테이너 상단 패딩을 빼서 크럼 패딩 20px만 남긴다(메인 동형).
   크럼 없는 화면(popstat 소개·피라미드)은 .wrap 상단 32px(--nt-pad-y) 유지 */
.wrap.has-crumb{ padding-top: 0; }
/* 크럼→본문 간격 — 메인 포털 실측 동형: 2단(.sub-body) 16px(.sub-body padding-top).
   1단 24px(#sub_section — 메인 sub.css 골격 절) 규칙은 주석 보류 상태(사용자 조정).
   크럼 없는 화면(popstat 소개·피라미드)은 인접 선택자라 영향 없음 */
/* .dp-breadcrumb + #sub_section{ padding-top: var(--sp-6); } */
.dp-breadcrumb + .sub-body{ padding-top: var(--sp-4); }
.bc-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-1);
  font-size: var(--fs-xs);
}
.bc-list li{ display: flex; align-items: center; }
.bc-list li + li::before{
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 var(--sp-2) 0 var(--sp-1);
  border-right: 2px solid var(--dp-gray-50);
  border-top: 2px solid var(--dp-gray-50);
  transform: rotate(45deg);
}
.bc-list a, .bc-list [aria-current="page"]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: var(--dp-gray-70);
  text-decoration: none;
}
.bc-list a:hover{ color: var(--dp-primary-hover); text-decoration: underline; }
.bc-list [aria-current="page"]{ color: #1E2B5C; font-weight: 700; }
.bc-home svg{ width: 16px; height: 16px; display: block; }
@media (max-width:1024px), (pointer: coarse) {
  /* 터치 조작 영역 확보 — 메인 포털과 동일(sub.css 반응형 절).
     현재 페이지 표시([aria-current])는 링크가 아니라 44px 제외: 크럼이 두 줄로 꺾일 때 44px 박스 탓에
     줄 간격이 벌어져 별도 영역처럼 보이던 것 보정 — 메인 포털 2026-09-04 보정을 새탭에도 반영 (2026-09-15) */
  /* .bc-list a, .bc-list [aria-current="page"]{ min-height: 44px; } */
  /* 링크는 44px 터치 영역을 유지하되 위아래 8px씩 음수 마진으로 시각 높이를 28px로 — 줄이 꺾여도 두 줄이 붙는다(행 높이는 마진 박스 기준).
     겹치는 8px 는 아래 줄 항목이 위에 오므로 실제 눌리는 높이는 36px 이상. 크럼 상단 20px·아래 본문 간격은 .bc-list 패딩 8px로 보전 (2026-09-15) */
  .bc-list{ padding: 8px 0; }
  .bc-list a{ min-height: 44px; margin: -8px 0; }
  .bc-list [aria-current="page"]{ padding-top: 2px; padding-bottom: 2px; }
}

/* (구 popstat 크럼 상단 8px 보정은 popstat 본문 상하 패딩이 csi와 같은 32px로 통일되며 불필요해져 제거 — 2026-08-28) */

/* (popstat 전용 .dp-page-head 제목·설명 통일 절은 style_popstat.css로 이관 — 2026-09-04) */

/* ── 페이지 타이틀(메뉴명·설명) 공통 양식 — 메인 포털(pg-head, css/public-data.css) 토큰 환산판 (2026-09-01 구조 통일) ──
   레이아웃(korNewTabLayout)이 크럼 아래 #sub_section 안에 한 번만 출력 — 화면=메뉴 1:1 화면(csi 5종·연보) 대상.
   구 .page-h(csi 이관분)를 메인 포털 .pg-head 양식으로 개명(패딩 --sp-4 0 --sp-7, h1 자간 -0.03em, 설명 코럴 좌측바).
   h1 반응형은 메인의 :root --fs-h1 재정의 대신 이 절의 미디어 명시(새탭 --fs-h1은 전역 고정이라).
   제목 색 #1E2B5C는 인구통계 퍼블본 기준(2026-08-25 사용자 확정 — 메인 --dp-heading 원값과 동일) */
.pg-head{ padding: 0 0 var(--sp-7); }
.pg-head h1{ font-size: var(--fs-h1); font-weight: 700; color: #1E2B5C; line-height: 1.3; letter-spacing: -0.03em; }
.pg-head .pg-desc{
  font-size: var(--fs-body);
  color: var(--dp-gray-70);
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--dp-point);
  word-break: keep-all; /* max-width 760px 캡 제거 — 포털 sub.css와 동일하게 완화 (2026-09-04) */
}
@media (max-width:1024px) {
.pg-head h1{ font-size: 28px; }
}
@media (max-width:768px) {
.pg-head h1{ font-size: 24px; }
}

/* ── 헤더 CI 로고 크기 (2026-09-01): 메인포털 확정 퍼블(hd-brand img) 단계로 통일
   46 → 40@1024 → 32@768 → 28@360. 구판 값(42/44/40/36/30 혼재)을 덮는다 — .svc-ci img(0,1,1)보다 세게 */
.svc-ci .ci-img, .ci-img{ height: 46px; width: auto; }
@media (max-width:1024px) { .svc-ci .ci-img, .ci-img{ height: 40px; } }
@media (max-width:768px)  { .svc-ci .ci-img, .ci-img{ height: 32px; } }
@media (max-width:360px)  { .svc-ci .ci-img, .ci-img{ height: 28px; } }

/* ── 푸터 관련 사이트 토글 자간 (2026-09-01): 서비스 css 전역 button{letter-spacing:-0.05em}이
   새탭 푸터에만 적용돼 메인포털(UA 기본 normal)과 갈리던 것 통일 */
.dp-footer button { letter-spacing: normal; }

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

/* ============================================================
   [퍼블 0921 접근성 — 공용 셸] 헤더·푸터 조작 영역 44×44px(KRDS 권고)  (2026-09-21)
   · 퍼블은 style_oecd.css 에 넣어 보냈으나 헤더·푸터는 인구통계·지역사회보장지표·OECD 공용이라 여기(공용)로 올림
     — OECD CSS에만 두면 OECD 화면만 셸 높이가 달라짐. 같은 값을 메인 포털 common.css 푸터에도 반영(푸터 동형 유지)
   · 서비스명은 h1 → p 로 바뀌어(제목 구조) 제목 계열 줄높이가 빠지므로 .svc-name 에 직접 지정
   ============================================================ */
.svc-ci a{display:inline-flex;align-items:center}
.svc-name{line-height:var(--lh-tight)}
.svc-name a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.dp-footer .ft-links a{display:inline-flex;align-items:center;min-height:44px}
.dp-footer .ft-body address a{display:inline-flex;align-items:center;min-height:44px}
.svc-nav .gnb a,.svc-nav nav.gnb a{min-width:44px;justify-content:center}
/* 2026-09-28 짧은 메뉴명(소개 등)이 최소폭 44px 상자에서 왼쪽에 붙어 밑줄이 오른쪽으로 쏠리던 것 — a가 block이라 위 justify-content가 안 먹음.
   상자 폭·메뉴 간격은 그대로 두고 글자만 가운데. 모바일 세로 메뉴(768px 이하)는 왼쪽 정렬 유지 */
@media (min-width:769px){.svc-nav .gnb a,.svc-nav nav.gnb a{text-align:center}}