/* ================================================================
   NHIS 스타일 디자인 시스템 – yeosunews 적용판
   참조: www.nhis.or.kr / KRDS (Korean Government Design System)
   
   포함 내용:
   1. Pretendard GOV 폰트 (@font-face)
   2. 폰트 크기 토큰 (--nds-fz-*)
   3. 색상 토큰 (--nds-primary-*, --nds-secondary-*, --nds-gray-*)
   4. 간격 토큰 (--nds-spacer-*)
   5. 반경/그림자 토큰
   6. 전역 body/기본 타이포 적용
   ================================================================ */

/* ────────────────────────────────────────────
   1. Pretendard GOV 폰트 (@font-face)
   ─ CDN: cdn.jsdelivr.net (subset woff2/woff)
   ──────────────────────────────────────────── */

/* Thin 100 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Thin.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Thin.subset.woff') format('woff');
}
/* ExtraLight 200 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-ExtraLight.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-ExtraLight.subset.woff') format('woff');
}
/* Light 300 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Light.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Light.subset.woff') format('woff');
}
/* Regular 400 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Regular.subset.woff') format('woff');
}
/* Medium 500 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Medium.subset.woff') format('woff');
}
/* SemiBold 600 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-SemiBold.subset.woff') format('woff');
}
/* Bold 700 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Bold.subset.woff') format('woff');
}
/* ExtraBold 800 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-ExtraBold.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-ExtraBold.subset.woff') format('woff');
}
/* Black 900 */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/pretendard/Pretendard-Black.subset.woff2') format('woff2'),
       url('/assets/fonts/pretendard/Pretendard-Black.subset.woff') format('woff');
}

/* ────────────────────────────────────────────
   2. 디자인 토큰 (:root 변수)
   ──────────────────────────────────────────── */
:root {

  /* ── 폰트 패밀리 ── */
  --nds-font-family: 'Pretendard GOV', 'Pretendard', 'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;

  /* ── 폰트 크기 토큰 (NHIS KRDS 기준, px 단위) ── */
  /* Display – 메인 비주얼 슬로건 */
  --nds-fz-display-sm:  40px;   /* 비주얼 서브 슬로건 */
  --nds-fz-display-md:  50px;
  --nds-fz-display-lg:  66px;   /* 최대 히어로 텍스트 */

  /* Heading – 섹션 대제목 */
  --nds-fz-heading-sm:  32px;
  --nds-fz-heading-md:  40px;
  --nds-fz-heading-lg:  50px;

  /* Title – 카드/위젯 제목 */
  --nds-fz-title-xxlg:  32px;   /* 섹션 타이틀 */
  --nds-fz-title-xlg:   25px;   /* 서브 섹션 타이틀 */
  --nds-fz-title-lg:    21px;   /* 카드 주요 제목 */
  --nds-fz-title-md:    19px;   /* 서비스 아이콘명 */
  --nds-fz-title-sm:    17px;   /* 소제목 */
  --nds-fz-title-xsm:   15px;   /* 작은 소제목 */

  /* Body – 본문 텍스트 */
  --nds-fz-body-lg:     19px;   /* GNB 메뉴 */
  --nds-fz-body-md:     17px;   /* 본문 기본 */
  --nds-fz-body-sm:     15px;   /* 설명/부제 */

  /* Detail – 부가 정보 */
  --nds-fz-detail-lg:   17px;
  --nds-fz-detail-md:   15px;
  --nds-fz-detail-sm:   13px;   /* 캡션 */

  /* Label / Button */
  --nds-fz-label-lg:    19px;
  --nds-fz-label-md:    17px;
  --nds-fz-label-sm:    15px;
  --nds-fz-label-xsm:   13px;

  /* Link */
  --nds-fz-link-lg:     19px;
  --nds-fz-link-md:     17px;
  --nds-fz-link-sm:     15px;

  /* ── 줄 높이 ── */
  --nds-lh-tight:   1.3;
  --nds-lh-normal:  1.5;
  --nds-lh-loose:   1.75;

  /* ── 자간 ── */
  --nds-ls-tight:   -0.5px;
  --nds-ls-normal:  -0.3px;
  --nds-ls-wide:    0px;

  /* ── Primary 색상 (파란 계열 – 강조/버튼) ── */
  --nds-primary:      #246beb;
  --nds-primary-5:    #eff5ff;
  --nds-primary-10:   #d3e1fb;
  --nds-primary-20:   #a7c4f7;
  --nds-primary-30:   #7ca6f3;
  --nds-primary-40:   #5089ef;
  --nds-primary-60:   #1d56bc;
  --nds-primary-70:   #16408d;
  --nds-primary-80:   #0e2b5e;
  --nds-primary-90:   #07152f;

  /* ── Secondary 색상 (네이비 계열 – 브랜드/헤더) ── */
  --nds-secondary:     #003675;
  --nds-secondary-5:   #edf1f5;
  --nds-secondary-10:  #cdd7e4;
  --nds-secondary-20:  #b4c4d6;
  --nds-secondary-30:  #99b0cb;
  --nds-secondary-40:  #2a5c96;
  --nds-secondary-60:  #002b5e;
  --nds-secondary-70:  #002046;
  --nds-secondary-80:  #00162f;
  --nds-secondary-90:  #000b17;

  /* ── Grayscale ── */
  --nds-gray-5:    #f7f8fa;
  --nds-gray-10:   #f0f2f5;
  --nds-gray-20:   #e2e6eb;
  --nds-gray-30:   #c9cdd2;
  --nds-gray-40:   #b0b8c1;
  --nds-gray-50:   #8b95a1;
  --nds-gray-60:   #6b7684;
  --nds-gray-70:   #4e5968;
  --nds-gray-80:   #333d4b;
  --nds-gray-90:   #1d2129;
  --nds-white:     #ffffff;
  --nds-black:     #000000;

  /* ── 포인트/강조 색상 ── */
  --nds-point:        #e54c1b;   /* 긴급/경고 포인트 */
  --nds-point-5:      #fff0eb;
  --nds-success:      #00a86b;
  --nds-success-5:    #e8f8f3;
  --nds-warning:      #f59e0b;
  --nds-warning-5:    #fffbeb;
  --nds-danger:       #ef4444;
  --nds-danger-5:     #fef2f2;

  /* ── 간격 토큰 (4px 기본 단위) ── */
  --nds-sp-1:   4px;
  --nds-sp-2:   8px;
  --nds-sp-3:   12px;
  --nds-sp-4:   16px;
  --nds-sp-5:   20px;
  --nds-sp-6:   24px;
  --nds-sp-7:   28px;
  --nds-sp-8:   32px;
  --nds-sp-10:  40px;
  --nds-sp-12:  48px;
  --nds-sp-14:  56px;
  --nds-sp-16:  64px;
  --nds-sp-20:  80px;
  --nds-sp-24:  96px;

  /* ── 테두리 반경 ── */
  --nds-rd-4:    4px;
  --nds-rd-6:    6px;
  --nds-rd-8:    8px;
  --nds-rd-12:   12px;
  --nds-rd-16:   16px;
  --nds-rd-20:   20px;
  --nds-rd-full: 9999px;  /* pill 버튼 */

  /* ── 그림자 ── */
  --nds-shadow-xs: 0 1px 4px rgba(0,0,0,.06);
  --nds-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --nds-shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --nds-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --nds-shadow-xl: 0 12px 40px rgba(0,0,0,.16);

  /* ── 전환(transition) ── */
  --nds-transition: all .2s ease-in-out;
  --nds-transition-slow: all .4s ease-in-out;

  /* ── 최대 너비 ── */
  --nds-max-width:  1280px;
  --nds-inner-pad: 0 24px;
}

/* ────────────────────────────────────────────
   3. 전역 body 폰트 적용
   ──────────────────────────────────────────── */
body,
button,
input,
select,
textarea {
  font-family: var(--nds-font-family) !important;
  letter-spacing: var(--nds-ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ────────────────────────────────────────────
   4. 타이포그래피 유틸리티 클래스
   ──────────────────────────────────────────── */

/* 크기 */
.nds-fz-display-sm  { font-size: var(--nds-fz-display-sm)  !important; }
.nds-fz-display-md  { font-size: var(--nds-fz-display-md)  !important; }
.nds-fz-heading-sm  { font-size: var(--nds-fz-heading-sm)  !important; }
.nds-fz-title-xxlg  { font-size: var(--nds-fz-title-xxlg)  !important; }
.nds-fz-title-xlg   { font-size: var(--nds-fz-title-xlg)   !important; }
.nds-fz-title-lg    { font-size: var(--nds-fz-title-lg)    !important; }
.nds-fz-title-md    { font-size: var(--nds-fz-title-md)    !important; }
.nds-fz-title-sm    { font-size: var(--nds-fz-title-sm)    !important; }
.nds-fz-body-lg     { font-size: var(--nds-fz-body-lg)     !important; }
.nds-fz-body-md     { font-size: var(--nds-fz-body-md)     !important; }
.nds-fz-body-sm     { font-size: var(--nds-fz-body-sm)     !important; }
.nds-fz-detail-sm   { font-size: var(--nds-fz-detail-sm)   !important; }
.nds-fz-label-sm    { font-size: var(--nds-fz-label-sm)    !important; }

/* 굵기 */
.nds-fw-thin    { font-weight: 100 !important; }
.nds-fw-light   { font-weight: 300 !important; }
.nds-fw-regular { font-weight: 400 !important; }
.nds-fw-medium  { font-weight: 500 !important; }
.nds-fw-semi    { font-weight: 600 !important; }
.nds-fw-bold    { font-weight: 700 !important; }
.nds-fw-extra   { font-weight: 800 !important; }
.nds-fw-black   { font-weight: 900 !important; }

/* 정렬 */
.nds-text-left   { text-align: left   !important; }
.nds-text-center { text-align: center !important; }
.nds-text-right  { text-align: right  !important; }

/* 색상 유틸 */
.nds-text-primary    { color: var(--nds-primary)    !important; }
.nds-text-secondary  { color: var(--nds-secondary)  !important; }
.nds-text-muted      { color: var(--nds-gray-60)    !important; }
.nds-text-white      { color: var(--nds-white)      !important; }
.nds-text-dark       { color: var(--nds-gray-90)    !important; }
.nds-text-point      { color: var(--nds-point)      !important; }

/* 배경 유틸 */
.nds-bg-primary     { background-color: var(--nds-primary)       !important; }
.nds-bg-secondary   { background-color: var(--nds-secondary)     !important; }
.nds-bg-primary-5   { background-color: var(--nds-primary-5)     !important; }
.nds-bg-secondary-5 { background-color: var(--nds-secondary-5)   !important; }
.nds-bg-gray-5      { background-color: var(--nds-gray-5)        !important; }
.nds-bg-gray-10     { background-color: var(--nds-gray-10)       !important; }
.nds-bg-white       { background-color: var(--nds-white)         !important; }

/* ────────────────────────────────────────────
   5. 공통 섹션 래퍼 (.nds-section, .nds-inner)
   ──────────────────────────────────────────── */
.nds-inner {
  width: 100%;
  max-width: var(--nds-max-width);
  margin: 0 auto;
  padding: var(--nds-inner-pad);
  box-sizing: border-box;
}

.nds-section {
  padding: var(--nds-sp-16) 0;
}
.nds-section + .nds-section {
  padding-top: 0;
}

/* 섹션 타이틀 래퍼 */
.nds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--nds-sp-8);
  gap: var(--nds-sp-4);
}
.nds-section-head .nds-tit {
  font-size: var(--nds-fz-title-xxlg);
  font-weight: 800;
  color: var(--nds-gray-90);
  letter-spacing: var(--nds-ls-tight);
  line-height: var(--nds-lh-tight);
}
.nds-section-head .nds-tit em {
  color: var(--nds-primary);
}
.nds-section-head .nds-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nds-sp-1);
  font-size: var(--nds-fz-label-sm);
  font-weight: 600;
  color: var(--nds-gray-60);
  padding: var(--nds-sp-1) var(--nds-sp-2);
  border-radius: var(--nds-rd-full);
  transition: var(--nds-transition);
  text-decoration: none;
}
.nds-section-head .nds-more-btn:hover {
  background: var(--nds-secondary-5);
  color: var(--nds-secondary);
}

/* ────────────────────────────────────────────
   6. 공통 버튼 (.nds-btn)
   ──────────────────────────────────────────── */
.nds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nds-sp-1);
  padding: 0 var(--nds-sp-4);
  height: 48px;
  font-family: var(--nds-font-family);
  font-size: var(--nds-fz-label-md);
  font-weight: 600;
  border-radius: var(--nds-rd-8);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--nds-transition);
  white-space: nowrap;
  box-sizing: border-box;
}
.nds-btn-primary {
  background: var(--nds-primary);
  color: var(--nds-white);
}
.nds-btn-primary:hover {
  background: var(--nds-primary-60);
}
.nds-btn-secondary {
  background: var(--nds-secondary);
  color: var(--nds-white);
}
.nds-btn-secondary:hover {
  background: var(--nds-secondary-60);
}
.nds-btn-outline {
  background: transparent;
  color: var(--nds-primary);
  border: 2px solid var(--nds-primary);
}
.nds-btn-outline:hover {
  background: var(--nds-primary-5);
}
.nds-btn-ghost {
  background: transparent;
  color: var(--nds-gray-70);
  border: 1.5px solid var(--nds-gray-30);
}
.nds-btn-ghost:hover {
  background: var(--nds-gray-5);
  border-color: var(--nds-gray-50);
}
.nds-btn-sm  { height: 36px; padding: 0 var(--nds-sp-3); font-size: var(--nds-fz-label-sm); border-radius: var(--nds-rd-6); }
.nds-btn-lg  { height: 56px; padding: 0 var(--nds-sp-6); font-size: var(--nds-fz-label-lg); border-radius: var(--nds-rd-8); }
.nds-btn-pill { border-radius: var(--nds-rd-full) !important; }
.nds-btn-full { width: 100%; }

/* ────────────────────────────────────────────
   7. 공통 뱃지 (.nds-badge)
   ──────────────────────────────────────────── */
.nds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--nds-rd-full);
  font-size: var(--nds-fz-detail-sm);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
}
.nds-badge-primary   { background: var(--nds-primary-5);    color: var(--nds-primary-60); }
.nds-badge-secondary { background: var(--nds-secondary-5);  color: var(--nds-secondary);  }
.nds-badge-point     { background: var(--nds-point-5);      color: var(--nds-point);      }
.nds-badge-success   { background: var(--nds-success-5);    color: var(--nds-success);    }
.nds-badge-gray      { background: var(--nds-gray-10);      color: var(--nds-gray-70);    }
.nds-badge-online    { background: #e6f7ff; color: #0969da; }  /* 온라인 가능 */

/* ────────────────────────────────────────────
   8. 카드 기본 스타일 (.nds-card)
   ──────────────────────────────────────────── */
.nds-card {
  background: var(--nds-white);
  border-radius: var(--nds-rd-12);
  box-shadow: var(--nds-shadow-sm);
  overflow: hidden;
  transition: var(--nds-transition);
}
.nds-card:hover {
  box-shadow: var(--nds-shadow-md);
  transform: translateY(-2px);
}
.nds-card-body {
  padding: var(--nds-sp-6);
}
.nds-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* ────────────────────────────────────────────
   9. 탭 UI (.nds-tab)
   ──────────────────────────────────────────── */
.nds-tab-list {
  display: flex;
  gap: var(--nds-sp-1);
  border-bottom: 2px solid var(--nds-gray-20);
  margin-bottom: var(--nds-sp-6);
}
.nds-tab-item {
  padding: var(--nds-sp-2) var(--nds-sp-4);
  font-size: var(--nds-fz-body-md);
  font-weight: 600;
  color: var(--nds-gray-60);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: var(--nds-transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--nds-font-family);
}
.nds-tab-item:hover  { color: var(--nds-gray-90); }
.nds-tab-item.active {
  color: var(--nds-primary);
  border-bottom-color: var(--nds-primary);
}

/* ────────────────────────────────────────────
   10. 칩/필터 태그 (.nds-chip)
   ──────────────────────────────────────────── */
.nds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nds-sp-1);
  padding: var(--nds-sp-1) var(--nds-sp-3);
  font-size: var(--nds-fz-detail-sm);
  font-weight: 600;
  border-radius: var(--nds-rd-full);
  border: 1.5px solid var(--nds-gray-30);
  background: var(--nds-white);
  color: var(--nds-gray-70);
  cursor: pointer;
  transition: var(--nds-transition);
  white-space: nowrap;
}
.nds-chip:hover,
.nds-chip.active {
  border-color: var(--nds-primary);
  background: var(--nds-primary-5);
  color: var(--nds-primary);
}
.nds-chip-secondary.active {
  border-color: var(--nds-secondary);
  background: var(--nds-secondary-5);
  color: var(--nds-secondary);
}

/* ────────────────────────────────────────────
   11. 구분선
   ──────────────────────────────────────────── */
.nds-divider {
  border: none;
  border-top: 1px solid var(--nds-gray-20);
  margin: var(--nds-sp-6) 0;
}

/* ────────────────────────────────────────────
   12. 기존 사이트 GNB/헤더/푸터에 폰트 강제 적용
       (Noto Sans KR → Pretendard GOV 전환)
   ──────────────────────────────────────────── */
#site-header,
#site-header *,
.gnb,
.gnb *,
.top-nav,
.top-nav *,
#main-nav,
#main-nav *,
.site-footer,
.site-footer *,
footer,
footer *,
.news-card,
.news-card *,
.article-title,
.article-body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th,
label, button, input, select, textarea {
  font-family: var(--nds-font-family) !important;
}

/* 헤딩 기본 자간 개선 */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--nds-ls-tight);
  line-height: var(--nds-lh-tight);
  word-break: keep-all;
}

/* 기존 :root 변수 브리지 (하위호환) */
:root {
  /* 기존 --primary 계열을 NDS 값으로 오버라이드 */
  --text-dark:  var(--nds-gray-90);
  --text-mid:   var(--nds-gray-70);
  --text-body:  var(--nds-gray-80);
  --text-muted: var(--nds-gray-60);
  --border:     var(--nds-gray-30);
  --border-light: var(--nds-gray-20);
  --radius-sm:  var(--nds-rd-4);
  --radius-md:  var(--nds-rd-8);
  --radius-lg:  var(--nds-rd-12);
  --shadow-sm:  var(--nds-shadow-xs);
  --shadow-md:  var(--nds-shadow-sm);
}

/* ────────────────────────────────────────────
   13. 반응형 폰트 조정
   ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root {
    --nds-fz-display-sm:  32px;
    --nds-fz-display-md:  40px;
    --nds-fz-heading-sm:  28px;
    --nds-fz-title-xxlg:  26px;
    --nds-fz-title-xlg:   22px;
  }
}
@media (max-width: 767px) {
  :root {
    --nds-fz-display-sm:  26px;
    --nds-fz-display-md:  32px;
    --nds-fz-heading-sm:  24px;
    --nds-fz-title-xxlg:  22px;
    --nds-fz-title-xlg:   19px;
    --nds-fz-title-lg:    17px;
    --nds-fz-title-md:    16px;
    --nds-fz-body-lg:     16px;
    --nds-fz-body-md:     15px;
    --nds-inner-pad: 0 16px;
  }
}
@media (max-width: 480px) {
  :root {
    --nds-fz-display-sm:  22px;
    --nds-fz-title-xxlg:  20px;
    --nds-fz-title-xlg:   18px;
    --nds-fz-body-md:     15px;
  }
}