@charset "utf-8";
/* @import 는 @charset 다음, 다른 어떤 규칙보다 앞에 와야 유효하다.
   (아래 @font-face 뒤에 두면 브라우저가 통째로 무시한다) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
/* =========================================================================
   base.css — 초기화(reset) + 디자인 토큰(design token) + 타이포그래피
   -------------------------------------------------------------------------
   원본 정부24(plus.gov.kr)는 KRDS(Korea Design System, 대한민국 정부
   디자인 시스템)를 따른다. 아래 색/치수 값은 실제 사이트에서 계산된
   스타일(computed style)을 직접 측정해서 옮긴 것이다.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) 웹폰트 — 원본과 같은 Pretendard GOV 를 직접 얹는다
   원본(plus.gov.kr)이 쓰는 폰트 파일을 assets/fonts/ 로 내려받아 쓴다.
   글자 폭이 1px 이라도 다르면 말줄임(…) 위치와 줄바꿈이 달라지므로,
   "똑같이 보이게" 만들려면 폰트부터 같아야 한다.

   font-display: swap  → 폰트를 받는 동안 대체 글꼴로 먼저 보여 준다
                         (받을 때까지 글자가 안 보이는 FOIT 를 피한다)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/PretendardGOV-Regular.subset.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/PretendardGOV-Medium.subset.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/PretendardGOV-Bold.subset.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   2) 디자인 토큰 : 값을 한 곳에 모아 두고 이름으로 갖다 쓴다.
   ------------------------------------------------------------------------- */
:root {
  /* 브랜드 색 (원본 실측) */
  --c-primary:        #256ef4;   /* 기본 파랑 : 버튼, 강조 */
  --c-primary-strong: #0b50d0;   /* 링크·선택 상태 진한 파랑 */
  --c-primary-navy:   #063a74;   /* 짙은 남색 : 선택된 필터 탭 */
  --c-navy-deep:      #052b57;   /* 더 짙은 남색 : 개인정보처리방침, 배너 현재 번호 */
  --c-primary-weak:   #f0f5fe;   /* 아주 옅은 파랑 */
  --c-green:          #0fb87d;   /* 검색창 그라디언트 시작색 */

  /* 텍스트 */
  --c-text:      #1e2124;
  --c-text-sub:  #464c53;
  --c-text-weak: #6d7882;
  /* 입력칸 안내문(placeholder) 전용. 원본은 여기에 한 단계 더 연한 회색을 쓴다.
     (원본 팔레트 : gray-40 #8a949e / gray-50 #6d7882 — 한 칸 차이라 눈에 잘 안 띄지만
      글자 전체가 진해 보여서 "미묘하게 다르다"의 원인이 된다) */
  --c-text-placeholder: #8a949e;
  --c-text-inv:  #ffffff;

  /* 배경 / 경계선 */
  --c-bg-page:   #f8fafc;        /* 메인 영역 바탕 (원본 .main-page) */
  --c-bg-banner: #eef2f7;        /* 최상단 전자정부 안내 배너 */
  --c-bg-card:   #ffffff;
  --c-bg-gray:   #f4f5f6;        /* 푸터, 서비스 카드 */
  --c-bg-blue:   #e7f4fe;        /* '자주 찾는 서비스' 카드 */
  --c-border:    #d8e5fd;        /* 카드 테두리 (파란 계열) */
  --c-border-gray:#cdd1d5;       /* 구분선 (푸터 등) */
  --c-border-line:#e5e8eb;       /* 옅은 구분선 */
  --c-border-soft:#e6e8ea;       /* KRDS gray-10 — 원스톱 필터 탭 테두리 */

  /* 상태 색 */
  --c-red: #de3412;

  /* 치수 : 원본 실측값 */
  --w-content: 1200px;           /* 콘텐츠 폭 */
  --w-inner:   1248px;           /* 좌우 24px 여백 포함 */
  --w-left:    792px;            /* 메인 좌측 컬럼 */
  --w-right:   384px;            /* 메인 우측 컬럼 */
  --gap-col:   24px;             /* 좌우 컬럼 간격 */
  --gap-card:  12px;             /* 카드 간격 */

  /* 모서리 둥글기 */
  --r-card:  16px;               /* 큰 카드 */
  --r-inner: 12px;               /* 카드 안의 작은 카드 */
  --r-chip:  8px;                /* 자주 찾는 서비스 칩 */
  --r-btn:   6px;
  --r-pill:  999px;

  /* 그림자 : 원본 카드 공통 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-pop:  0 8px 24px rgba(0, 0, 0, .12);

  /* 글자 크기 : 원본은 본문 17px 고정 */
  --fs-base: 17px;
  --fs-tit:  19px;               /* 카드 제목 */
  --fs-sm:   15px;               /* 목록·칩 */
  --fs-xs:   13px;               /* 캡션·필터 */
  --fs-lg:   22px;

  /* 헤더 높이 */
  --h-banner: 32px;
  --h-gnb: 57px;
}

/* -------------------------------------------------------------------------
   3) 초기화(reset)
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Pretendard GOV", "Pretendard", "Malgun Gothic", "맑은 고딕",
               Dotum, "돋움", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;                    /* 17 * 1.5 = 25.5px (원본과 동일) */
  color: var(--c-text);
  background: var(--c-bg-page);
  word-break: keep-all;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
/* 원본 전역 규칙 : 마우스를 올리면 진한 파랑(#0b50d0), 누르는 동안은 더 진한 남색.
   밝은 파랑(#256ef4)이 아니다 — 이 한 칸 차이가 마우스를 올릴 때마다 눈에 띈다. */
a:hover  { color: var(--c-primary-strong); text-decoration: underline; }
a:active { color: #083891; }
/* a:visited 는 일부러 넣지 않는다.
   원본은 #5917b8 을 주지만, 이 클론은 모든 링크가 href="#"(=현재 문서)라
   브라우저가 전부 '방문함'으로 보고 페이지 전체가 보라색이 되어 버린다. */
/* 원본 공통 규칙 : 밑줄을 글자에서 4px 띄운다(원본 CSS 의 text-underline-offset:0.4rem).
   기본값(auto)은 글자에 거의 붙어서, 밑줄 있는 링크가 전부 3px 씩 높게 보인다. */
a, .text-underline { text-underline-offset: 4px; }

button {
  margin: 0; padding: 0; border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

img, svg { vertical-align: middle; }
img { max-width: 100%; }

/* hidden 속성이 항상 이기게 한다.
   .modal { display: grid } 같은 클래스 규칙이 브라우저 기본값
   [hidden]{display:none} 보다 우선순위가 높아서, 이 한 줄이 없으면
   hidden 을 붙여도 모달이 그대로 보인다. */
[hidden] { display: none !important; }

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

.skip-nav a {
  position: absolute;
  left: 0; top: -100px;
  z-index: 1000;
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--c-primary-navy);
}
.skip-nav a:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   5) 공통 레이아웃 래퍼
   ------------------------------------------------------------------------- */
.inner-wrap {
  width: 100%;
  max-width: var(--w-inner);
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------------------------------------------------------------
   6) 글자 크기 조절 (헤더 '화면크기') — 원본과 같은 5단계
   ------------------------------------------------------------------------- */
/* 화면크기(5단계)는 CSS 가 아니라 JS 가 <html> 에 zoom 을 걸어 처리한다 (원본과 동일).
   예전에는 여기서 --fs-* 변수만 키웠는데, 그러면 **글자만 커지고 상자는 그대로**라
   높이가 고정된 카드 안에서 글자가 잘렸다(크게 단계에서 55곳).
   zoom 은 여백·상자·글자를 한꺼번에 배율만큼 키우므로 그런 일이 없다.
     sm 0.9 / md 1 / lg 1.1 / xlg 1.2 / xxlg 1.3   (js/main.js 의 ZOOM) */