@charset "utf-8";
/* ============================================================
   KOBIGS – krds.css
   KRDS(Korea Design System) 디자인 토큰 · 기본 타이포 · 공통 컴포넌트
   ref) 디지털 정부서비스 UI/UX 가이드라인 (2025.08) / https://www.krds.go.kr
   ------------------------------------------------------------
   root font-size 는 16px 을 유지하고, 본문 기본 텍스트는 17px(1.0625rem)
   이상으로 설정한다. (가이드라인 A-2 서체)
   ============================================================ */

/* ------------------------------------------------------------
   1. 웹폰트 – Pretendard GOV
   resource/fonts/ 에 공식 woff2 파일을 배치하면 자동 적용된다.
   파일이 없을 경우 시스템 고딕 계열로 폴백된다. (README.txt 참고)
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardGOV-Regular.woff2') format('font-woff2'),
       url('../fonts/PretendardGOV-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardGOV-Medium.woff2') format('font-woff2'),
       url('../fonts/PretendardGOV-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardGOV-SemiBold.woff2') format('font-woff2'),
       url('../fonts/PretendardGOV-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardGOV-Bold.woff2') format('font-woff2'),
       url('../fonts/PretendardGOV-Bold.woff') format('woff');
}

/* ------------------------------------------------------------
   2. 디자인 토큰
   ------------------------------------------------------------ */
:root {
  /* 2-1. 색상 – Primary */
  --krds-primary:        #256EF4;
  --krds-primary-hover:  #0B50D0;
  --krds-primary-active: #083AA0;
  --krds-primary-light:  #E8F0FE;
  --krds-primary-bg:     #F0F6FF;
  --krds-primary-dark:   #0B2F7A;

  /* 2-2. 색상 – Secondary(포인트) */
  --krds-secondary:      #003675;
  --krds-secondary-light:#D1E1FF;
  --krds-point:          #17C1CC;
  --krds-point-light:    #6FE3E8;

  /* 2-3. 색상 – Gray scale */
  --krds-gray-0:  #FFFFFF;
  --krds-gray-5:  #F7F8FA;
  --krds-gray-10: #EFF1F5;
  --krds-gray-20: #E4E7EC;
  --krds-gray-30: #D0D4DB;
  --krds-gray-40: #B1B8C0;
  --krds-gray-50: #8A9099;
  --krds-gray-60: #646C78;
  --krds-gray-70: #58616A;
  --krds-gray-80: #33363D;
  --krds-gray-90: #1E2124;
  --krds-gray-95: #14161A;

  /* 2-4. 색상 – System(의미 체계) */
  --krds-info:    #256EF4;
  --krds-success: #228738;
  --krds-warning: #FF9000;
  --krds-danger:  #DE3412;
  --krds-danger-text: #C6290F;   /* 텍스트용(대비 4.5:1 확보) */
  --krds-info-bg:    #E8F0FE;
  --krds-success-bg: #E8F5EB;
  --krds-warning-bg: #FFF4E5;
  --krds-danger-bg:  #FCEAE7;

  /* 2-5. 텍스트 · 배경 · 테두리 역할 색 */
  --krds-text:          var(--krds-gray-90);
  --krds-text-weak:     var(--krds-gray-70);
  --krds-text-weaker:   var(--krds-gray-60);
  --krds-text-disabled: var(--krds-gray-40);
  --krds-text-invert:   #FFFFFF;
  --krds-bg:            #FFFFFF;
  --krds-bg-sub:        var(--krds-gray-5);
  --krds-border:        var(--krds-gray-20);
  --krds-border-strong: var(--krds-gray-40);

  /* 2-6. 서체 */
  --krds-font: 'Pretendard GOV', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕',
               'Noto Sans KR', 'Noto Sans CJK KR', 'Nanum Gothic',
               system-ui, sans-serif;

  /* 2-7. 타이포 스케일 (본문 17px 기준) */
  --fs-display:  4rem;      /* 64 */
  --fs-h1:       2.75rem;   /* 44 */
  --fs-h2:       2.25rem;   /* 36 */
  --fs-h3:       1.75rem;   /* 28 */
  --fs-h4:       1.375rem;  /* 22 */
  --fs-title-l:  1.25rem;   /* 20 */
  --fs-title-m:  1.125rem;  /* 18 */
  --fs-body:     1.0625rem; /* 17  – 본문 기본 */
  --fs-detail:   0.9375rem; /* 15  – 보조 */
  --fs-caption: 0.9375rem;  /* 14  – 캡션 */
  --lh-tight:   1.35;
  --lh-base:    1.6;        /* 1.5배 이상 */
  --lh-loose:   1.75;

  /* 2-8. 형태(반경 · 테두리) */
  --krds-radius-xs: 2px;
  --krds-radius-sm: 4px;
  --krds-radius:    6px;
  --krds-radius-md: 8px;
  --krds-radius-lg: 12px;
  --krds-radius-xl: 16px;
  --krds-radius-2xl:24px;
  --krds-radius-pill: 999px;
  --krds-bw: 1px;

  /* 2-9. 간격 */
  --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: 48px;
  --sp-10:64px;
  --sp-11:80px;
  --sp-12:100px;

  /* 2-10. 엘리베이션 */
  --krds-elv-1: 0 1px 2px rgba(30, 33, 36, .06);
  --krds-elv-2: 0 2px 8px rgba(30, 33, 36, .08);
  --krds-elv-3: 0 6px 20px rgba(30, 33, 36, .10);
  --krds-elv-4: 0 12px 32px rgba(30, 33, 36, .14);

  /* 2-11. 레이아웃 */
  --layout-max: 1440px;      /* 콘텐츠 최대 폭 */
  --layout-pad: 40px;        /* 데스크톱 좌우 여백 */
  --header-h: 88px;

  /* 2-12. 모션 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .5s;
}

/* 태블릿 · 모바일 토큰 재정의 */
@media (max-width: 1024px) {
  :root {
    --fs-display: 2.75rem;
    --fs-h1: 2rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.5rem;
    --layout-pad: 24px;
    --header-h: 64px;
  }
}
@media (max-width: 600px) {
  :root {
    --fs-display: 1.875rem;
    --fs-h1: 1.5rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.125rem;
    --layout-pad: 16px;
    --header-h: 56px;
  }
}
@media (max-width: 359px) {
  :root { --layout-pad: 12px; }
}

/* 선명한 화면 모드(High contrast) 대응 */
@media (prefers-contrast: more) {
  :root {
    --krds-text-weak: var(--krds-gray-90);
    --krds-text-weaker: var(--krds-gray-80);
    --krds-border: var(--krds-gray-50);
  }
}

/* ------------------------------------------------------------
   3. 기본 타이포그래피
   ------------------------------------------------------------ */
html { font-size: 16px; }

body {
  font-family: var(--krds-font);
  font-size: var(--fs-body);          /* 17px */
  font-weight: 400;
  line-height: var(--lh-base);        /* 1.6 (1.5배 이상) */
  color: var(--krds-text);
  background: var(--krds-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--krds-gray-90);
  letter-spacing: -.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-title-l); }
h6 { font-size: var(--fs-title-m); }

p { line-height: var(--lh-base); }

a:hover, a:focus { text-decoration: underline; }

/* ------------------------------------------------------------
   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;
}

/* 건너뛰기 링크 (skip-nav) */
.krds-skip { position: relative; z-index: 9999; }
.krds-skip a {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  text-align: center;
  font-size: var(--fs-detail);
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  background: var(--krds-gray-90);
}
.krds-skip a:focus,
.krds-skip a:active {
  height: 40px;
  text-decoration: underline;
}

/* 포커스 가시성 – :focus-visible 링 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--krds-primary);
  outline-offset: 2px;
  border-radius: var(--krds-radius-sm);
}
.is-dark :where(a, button, [tabindex]):focus-visible {
  outline-color: #8FC0FF;
}

/* ------------------------------------------------------------
   5. 레이아웃 컨테이너 (최대 1440px)
   ------------------------------------------------------------ */
.krds-container {
  width: 100%;
  max-width: calc(var(--layout-max) + var(--layout-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-pad);
}

/* ------------------------------------------------------------
   6. 버튼
   ------------------------------------------------------------ */
.krds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--krds-radius);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.krds-btn:hover, .krds-btn:focus { text-decoration: none; }

/* 계층 – Primary */
.krds-btn--primary {
  background: var(--krds-primary);
  color: #fff;
}
.krds-btn--primary:hover { background: var(--krds-primary-hover); }
.krds-btn--primary:active { background: var(--krds-primary-active); }

/* 계층 – Secondary */
.krds-btn--secondary {
  background: #fff;
  color: var(--krds-primary);
  border-color: var(--krds-primary);
}
.krds-btn--secondary:hover { background: var(--krds-primary-bg); }
.krds-btn--secondary:active { background: var(--krds-primary-light); }

/* 계층 – Tertiary */
.krds-btn--tertiary {
  background: #fff;
  color: var(--krds-gray-70);
  border-color: var(--krds-gray-30);
}
.krds-btn--tertiary:hover { background: var(--krds-gray-5); }
.krds-btn--tertiary:active { background: var(--krds-gray-10); }

/* 크기 */
.krds-btn--xs { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-caption); }
.krds-btn--sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-detail); }
.krds-btn--lg { min-height: 56px; padding: 0 var(--sp-8); font-size: var(--fs-title-m); }

.krds-btn:disabled,
.krds-btn[aria-disabled='true'] {
  background: var(--krds-gray-10);
  border-color: var(--krds-gray-20);
  color: var(--krds-text-disabled);
}

/* 아이콘 전용 버튼 – 반드시 sr-only 텍스트 레이블 동반 */
.krds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--krds-gray-30);
  border-radius: 50%;
  background: #fff;
  color: var(--krds-gray-70);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.krds-icon-btn:hover {
  background: var(--krds-primary-bg);
  border-color: var(--krds-primary);
  color: var(--krds-primary);
}
.krds-icon-btn:disabled {
  background: var(--krds-gray-5);
  border-color: var(--krds-gray-20);
  color: var(--krds-text-disabled);
}

/* 텍스트 링크형 액션 */
.krds-link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-detail);
  font-weight: 600;
  color: var(--krds-gray-70);
}
.krds-link-more:hover { color: var(--krds-primary); }
.krds-link-more .ico { transition: transform var(--dur-fast) var(--ease); }
.krds-link-more:hover .ico { transform: translateX(3px); }

/* ------------------------------------------------------------
   7. 아이콘
   → 아이콘 기본형(.ico)과 이미지 data URI 는 images.css 에 있다.
      (mask-image 방식이라 color 를 그대로 상속받는다)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   8. 폼 요소
   ------------------------------------------------------------ */
.krds-form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.krds-label {
  font-size: var(--fs-detail);
  font-weight: 600;
  color: var(--krds-gray-80);
}
.krds-label .req { color: var(--krds-danger); margin-left: 2px; }

.krds-input,
.krds-select,
.krds-textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--krds-gray-30);
  border-radius: var(--krds-radius);
  background: #fff;
  font-size: var(--fs-body);
  color: var(--krds-text);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.krds-textarea { min-height: 140px; padding: var(--sp-3) var(--sp-4); line-height: var(--lh-base); }
.krds-input::placeholder,
.krds-textarea::placeholder { color: var(--krds-gray-60); }
.krds-input:hover, .krds-select:hover { border-color: var(--krds-gray-50); }
.krds-input:focus, .krds-select:focus, .krds-textarea:focus {
  outline: none;
  border-color: var(--krds-primary);
  box-shadow: 0 0 0 3px rgba(37, 110, 244, .2);
}
.krds-input:disabled, .krds-select:disabled {
  background: var(--krds-gray-5);
  color: var(--krds-text-disabled);
}

.krds-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2358616A' d='M8 11.2 2.8 6l1.1-1.1L8 9l4.1-4.1L13.2 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* 검색 폼 */
.krds-search {
  position: relative;
  display: flex;
  align-items: center;
}
.krds-search .krds-input { padding-right: 60px; }
.krds-search_btn {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--krds-radius);
  color: var(--krds-gray-70);
  font-size: 22px;
}
.krds-search_btn:hover { background: var(--krds-gray-10); color: var(--krds-primary); }

/* ------------------------------------------------------------
   9. 표 (caption · scope 필수)
   ------------------------------------------------------------ */
.krds-table-wrap { width: 100%; }
.krds-table {
  width: 100%;
  border-top: 2px solid var(--krds-gray-80);
  font-size: var(--fs-detail);
}
.krds-table th,
.krds-table td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--krds-border);
  line-height: var(--lh-base);
  vertical-align: middle;
}
.krds-table thead th {
  font-size: var(--fs-detail);
  font-weight: 700;
  color: var(--krds-gray-80);
  text-align: center;
  background: transparent;
  border-bottom: 1px solid var(--krds-gray-40);
}
.krds-table tbody td { color: var(--krds-gray-70); text-align: center; }
.krds-table tbody td.is-left { text-align: left; }
.krds-table tbody tr:hover td { background: var(--krds-primary-bg); }
.krds-table a { color: var(--krds-gray-90); font-weight: 500; }
.krds-table a:hover { color: var(--krds-primary); text-decoration: underline; }

/* ------------------------------------------------------------
   10. 배지 (색만으로 정보 전달 금지 – 텍스트 병행)
   ------------------------------------------------------------ */
.krds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 var(--sp-2);
  border-radius: var(--krds-radius-sm);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
}
.krds-badge--info    { background: var(--krds-info-bg);    color: #0B50D0; }
.krds-badge--success { background: var(--krds-success-bg); color: #166B2C; }
.krds-badge--warning { background: var(--krds-warning-bg); color: #8A4B00; }
.krds-badge--danger  { background: var(--krds-danger-bg);  color: #B32A0E; }
.krds-badge--gray    { background: var(--krds-gray-10);    color: var(--krds-gray-70); }

/* ------------------------------------------------------------
   11. 페이지네이션 (전체 화면 수 표시 · 화면당 1개)
   ------------------------------------------------------------ */
.krds-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.krds-pagination_list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.krds-pagination a,
.krds-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 var(--sp-2);
  border-radius: 50%;
  font-size: var(--fs-detail);
  font-weight: 600;
  color: var(--krds-gray-70);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.krds-pagination a:hover { background: var(--krds-gray-10); color: var(--krds-primary); text-decoration: none; }
.krds-pagination [aria-current='page'] {
  background: var(--krds-primary);
  color: #fff;
}
.krds-pagination [aria-current='page']:hover { background: var(--krds-primary-hover); color: #fff; }
.krds-pagination .is-nav { border: 1px solid var(--krds-gray-20); }
.krds-pagination .is-disabled {
  color: var(--krds-text-disabled);
  pointer-events: none;
}

/* ------------------------------------------------------------
   12. 탭
   ------------------------------------------------------------ */
.krds-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--krds-border);
}
.krds-tabs::-webkit-scrollbar { display: none; }
.krds-tab {
  position: absolute;
  top: 0;
  width: 120px;
  padding: var(--sp-3) var(--sp-1) var(--sp-4);
  font-size: var(--fs-title-m);
  font-weight: 600;
  color: var(--krds-gray-60);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.krds-tab:nth-of-type(1) { left:0;}
.krds-tab:nth-of-type(2) { left:120px;}
.krds-tab:nth-of-type(3) { left:240px;}
.krds-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--krds-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.krds-tab:hover { color: var(--krds-gray-90); }
.krds-tab[aria-selected='true'] { color: var(--krds-primary); }
.krds-tab[aria-selected='true']::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   13. 브레드크럼 (본문 그리드 왼쪽 정렬 · 구분자 제공)
   ------------------------------------------------------------ */
.krds-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--krds-gray-60);
}
.krds-breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.krds-breadcrumb li + li::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1px solid var(--krds-gray-40);
  border-top: 1px solid var(--krds-gray-40);
  transform: rotate(45deg);
}
.krds-breadcrumb a:hover { color: var(--krds-primary); }
.krds-breadcrumb [aria-current='page'] { color: var(--krds-gray-90); font-weight: 600; }
.krds-breadcrumb .ico-home { font-size: 15px; color: var(--krds-primary); }

/* ------------------------------------------------------------
   14. 아코디언 / 디스클로저
   ------------------------------------------------------------ */
.krds-accordion_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) 0;
  font-size: var(--fs-title-m);
  font-weight: 600;
  text-align: left;
}
.krds-accordion_btn .ico { transition: transform var(--dur) var(--ease); }
.krds-accordion_btn[aria-expanded='true'] .ico { transform: rotate(180deg); }
.krds-accordion_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.krds-accordion_panel > div { overflow: hidden; }
.krds-accordion_panel.is-open { grid-template-rows: 1fr; }

/* ------------------------------------------------------------
   15. 스크롤 리빌 애니메이션
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: .08s; }
.reveal[data-delay='2'] { transition-delay: .16s; }
.reveal[data-delay='3'] { transition-delay: .24s; }
.reveal[data-delay='4'] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* 인쇄 */
@media print {
  .krds-skip, .kb-header, .kb-footer, .kb-gnb, .kb-sitemap { display: none !important; }
  body { font-size: 11pt; }
}

/* ------------------------------------------------------------
   16. 좁은 화면 보정 (280px 대응)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .krds-tabs { gap: var(--sp-4); }
  .krds-tab { font-size: var(--fs-body); padding-bottom: var(--sp-3); }
  .krds-btn { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-detail); }
  .krds-input, .krds-select, .krds-textarea { min-height: 48px; font-size: var(--fs-detail); }
  .krds-search .krds-input { padding-right: 52px; }
  .krds-search_btn { width: 40px; height: 40px; }
  .krds-table th, .krds-table td { padding: var(--sp-3) var(--sp-2); }
}
@media (max-width: 359px) {
  .krds-tabs { gap: var(--sp-3); }
  .krds-tab { font-size: var(--fs-detail); }
  .krds-breadcrumb ol { font-size: 13px; gap: 6px; }
}