@charset "utf-8";

/* =========================================================
   common.css — 전역 기반(foundation)
   - 디자인 토큰(:root) / 웹폰트(@font-face) / 최상위 레이아웃 골격(#wrapper·#container·.content) / 전역 헬퍼(.blind·.scroll_lock)
   - ⚠ 재사용 UI 컴포넌트(폼·버튼·infobox·pagination 등)는 여기가 아니라 content.css에 있음
========================================================= */

/* ===========================
   공통 색상 변수 (디자인 토큰)
=========================== */
:root {
	/* Text */
	--color-text-title: #1e2124;     /* 제목/기본 텍스트 */
	--color-text-strong: #131416;    /* 강조 제목 */
	--color-text-body: #464c53;      /* 본문 */
	--color-text-caption: #58616a;   /* 캡션/보조 텍스트, 회색 외곽선 */
	--color-text-muted: #8a949e;     /* 뮤트 텍스트 */
	--color-input-placeholder: #8a949e; /* 입력 전(placeholder) 텍스트 */
	--color-text-base: #222;         /* body 기본 텍스트(레거시) */

	/* Brand */
	--color-primary: #256ef4;        /* 기본 파랑 */
	--color-primary-dark: #0b50d0;   /* 진한 파랑 텍스트 */
	--color-primary-deep: #083891;   /* 메가메뉴 활성 텍스트(primary/70) */
	--color-primary-light: #ecf2fe;  /* 연한 파랑/표 헤더 */
	--color-primary-pale: #d8e5fd;   /* 옅은 파랑 배경 (primary/10 — secondary 버튼 hover) */
	--color-primary-deeppale: #b1cefb; /* primary/20 — secondary 버튼 pressed */

	/* Brand — 색상 가이드 명칭 토큰 */
	--color-secondary: #063a74;        /* secondary (남색) */
	--color-secondary-dark: #052b57;   /* secondary-dark (탭 선택 텍스트) */
	--color-secondary-light: #d6e0eb;  /* secondary-light (표 선과 동일) */
	--color-point: #d63d4a;            /* point (빨강) */
	--color-point-dark: #bd2c0f;       /* point-dark (필수 표기 [필수] 텍스트) */
	--color-point-light: #f5d6d9;      /* point-light */
	--color-success: #228738;          /* success (초록 채움 — 배지 등) */
	--color-success-light: #eaf6ec;    /* success-light (연초록 배경) */
	--color-success-border: #a9dab4;   /* success/20 (초록 안내 박스 테두리) */
	--color-success-subtle: #d8eedd;   /* success-subtle (완료 안내 박스 배경) */
	--color-warning-light: #fdf4d4;    /* warning-light (연노랑 배경 — 발급취소 등) */
	--color-warning-border: #ffe0a3;   /* warning/10 (노랑 안내 박스 테두리) */
	--color-error-subtle: #fdefec;     /* error-subtle (오류 옅은 분홍 배경) */
	--color-primary-subtle: #d8e5fd;   /* primary-subtle (= primary-pale) */
	--color-primary-subtler: #ecf2fe;  /* primary-subtler (= primary-light) */
	--color-secondary-subtler: #eef2f7;/* secondary-subtler (= masthead 배경) */
	--color-info-subtler: #e7f4fe;     /* information-subtler (= 안내/정보 옅은 파랑 배경) */
	--color-gray-subtle: #e6e8ea;      /* gray-subtle (= bg-subtle) */
	--color-gray-subtler: #f4f5f6;     /* gray-subtler (= bg) */

	/* Stroke — 색상 가이드 외곽선 명칭 토큰 */
	--color-gray-dark: #58616a;        /* gray-dark — input/button 외곽선 */
	--color-gray-charcoal: #8a949e;    /* gray-charcoal */
	--color-gray-light: #cdd1d5;       /* gray-light — 구분선 (= border-gray) */
	--color-element-gray: #6d7882;     /* element/gray — 진행 단계 완료 마커·선 */

	/* Input — textinput 컴포넌트 */
	--color-input-border: #58616a;          /* 기본 외곽선 (= gray-dark) */
	--color-input-border-active: #256ef4;   /* 포커스 외곽선 (= primary) */
	--color-input-border-error: #de3412;    /* 오류 외곽선 */
	--color-input-border-disabled: #b1b8be; /* 비활성 외곽선 */
	--color-input-surface-disabled: #cdd1d5;/* 비활성·보기 배경 (= gray-light) */
	--color-input-text-disabled: #8a949e;   /* 비활성 입력 텍스트 (= placeholder 동일 톤) */
	--color-msg-hint: #464c53;              /* 안내(hint) 메시지 (= text-body) */
	--color-msg-info: #096ab3;              /* 포커스(info) 메시지 */
	--color-msg-success: #267337;           /* 완료(success) 메시지 */
	--color-msg-warning: #8a5c00;           /* 경고(warning) 메시지 — 발급취소 등 */
	--color-msg-error: #bd2c0f;             /* 오류(error) 메시지 */

	/* Surface */
	--color-white: #fff;
	--color-bg: #f4f5f6;             /* 회색 배경 */
	--color-bg-subtle: #e6e8ea;      /* 옅은 구분 배경/선 */
	--color-masthead: #eef2f7;       /* 전자정부 마스트헤드 배경 */
	--color-dim: rgba(0,0,0,.75);    /* 레이어 팝업 딤(background/dim) */

	/* Footer (반전 영역) */
	--color-footer-bg: #1e2124;      /* 푸터 배경(다크) */
	--color-footer-line: rgba(255,255,255,.25); /* 푸터 구분선/테두리 */
	--color-footer-text: rgba(255,255,255,.5);  /* 푸터 주소/안내 텍스트 */
	--color-footer-sub: #b1b8be;     /* 카피라이트 */
	--color-footer-point: #e2705f;   /* 개인정보처리방침 강조 (다크 배경 4.5:1 대비 충족) */

	/* Border / Line */
	--color-border: #d6e0eb;         /* 표 선 */
	--color-border-gray: #cdd1d5;    /* 회색 테두리 */
	--color-disabled: #cdd1d5;       /* 비활성 (색상 가이드 disabled) */
	--color-gray: #b1b8be;           /* 회색 */
	--color-line: #ddd;              /* 일반 구분선(레거시) */

	/* Status */
	--color-red: #e60012;            /* 경고/에러 */

	/* App 색상 변수 (참고 이미지 — 비트맵 픽셀 추출 근사값) */
	--app-primary-base: #091762;
	--app-secondary-base: #71bae6;
	--app-secondary-hover: #eff8fc;
	--app-secondary-disabled: #c3e3f5;
	--app-secondary-active-disabled: #a4d3f0;
	--app-text-base: #1d1e20;
	--app-text-secondary: #4b4c4e;
	--app-text-tertiary: #787a7d;
	--app-text-disabled: #9fa0a3;
	--app-icon-base: #1d1e20;
	--app-icon-secondary: #4b4c4e;
	--app-icon-tertiary: #787a7d;
	--app-fill-base: #fff;
	--app-fill-base-01: #f2f2f3;
	--app-fill-base-03: #dbdbdc;
	--app-fill-base-04: #c8c9cb;
	--app-fill-base-dark-05: #1d1e20;
	--app-fill-background2: #edeff3;
	--app-fill-background-tone-06: #ebf6fb;
	--app-fill-background-tone-07: #ddf0fc;
	--app-fill-trans-black-01: rgba(0, 0, 0, .15);  /* 흰 배경 합성 #d9d9d9 역산 */
	--app-stroke-ui-03: #dbdbdc;
	--app-stroke-ui-05: #b1b2b4;
	--app-stroke-ui-06: #9fa0a3;
	--app-stroke-ui-dark-03: #1d1e20;
	--app-semantic-error: #e33325;
	--app-semantic-warning: #f3d459;

	/* Font size scale */
	--fs-xxs: 1.2rem;
	--fs-xs: 1.3rem;
	--fs-sm: 1.4rem;
	--fs-base: 1.5rem;   /* 본문 기본 */
	--fs-md: 1.6rem;
	--fs-lg: 1.7rem;
	--fs-xl: 1.8rem;
	--fs-19: 1.9rem;     /* GNB 메인 메뉴 */
	--fs-title: 2.8rem;  /* 페이지 타이틀 */

	/* Typography 가이드 — Display/Heading/Body 스케일 (PC 기준, 모바일 값은 아래 미디어쿼리 재정의)
	   공통: line-height 150% / letter-spacing은 Display·H1·H2만 1%(--ls-display), 나머지 0 */
	--fs-display1: 6rem;     /* Display1 large   (MO 44) */
	--fs-display2: 4.4rem;   /* Display2 medium  (MO 32) */
	--fs-display3: 3.6rem;   /* Display3 small   (MO 28) */
	--fs-h1: 4rem;           /* H1 xlarge        (MO 28) */
	--fs-h2: 3.2rem;         /* H2 large         (MO 24) */
	--fs-h3: 2.4rem;         /* H3 medium        (MO 22) */
	--fs-22: 2.2rem;         /* heading xxmedium 22 — Figma 정의(현재 미사용) */
	--fs-h4: 1.9rem;         /* H4 small         (MO 19) */
	--fs-h5: 1.7rem;         /* H5 xsmall        (MO 17) */
	--fs-h6: 1.5rem;         /* H6 xxsmall       (MO 15) */
	--fs-body1: 1.9rem;      /* Body1 large      (MO 19) — weight 700·600 */
	--fs-body2: 1.7rem;      /* Body2 medium(Base) (MO 17) — weight 700·600·400 */
	--fs-body3: 1.5rem;      /* Body3 small      (MO 16) */
	--fs-body4: 1.4rem;      /* Body4 small      (MO 16) */
	--fs-body5: 1.3rem;      /* Body5 xsmall     (MO 15) */
	--lh-base: 1.5;        /* Line Height 150% */
	--ls-display: .01em;   /* Letter Spacing 1% (Display1~3, H1, H2) */

	/* Layout */
	--layout-max: 1440px;  /* GNB l_inner 박스폭(좌우 20px 패딩 포함 → 콘텐츠 1400px) */
	--content-max: 1400px; /* 본문(#container)·푸터 콘텐츠 폭 */
	--gnb-max: 1600px;     /* GNB(헤더·마스트헤드) 박스폭 */
	--layout-pad: 2rem;    /* 컨테이너 좌우 여백 */
	--layout-gap: 6.4rem;  /* 좌측 메뉴 ↔ 콘텐츠 간격 */
	--side-w: 244px;       /* 좌측 메뉴 폭 */

	/* Radius — 모서리 곡률 토큰 (px 단위: 곡률은 글자 확대와 무관하므로 rem 아님)
	   9단계 스케일에서 고른다. 원형·알약형은 토큰이 아니라 border-radius:50%/1000px 로 직접 지정 */
	--radius-xs: 2px;    /* 현재 미사용 */
	--radius-sm: 4px;    /* 배지·소형 마커 */
	--radius-md: 6px;    /* 입력칸·인라인 버튼 */
	--radius-lg: 8px;    /* 주요 버튼·첨부·리스트 */
	--radius-xl: 12px;   /* 안내 박스·중형 카드 */
	--radius-2xl: 16px;  /* 정보 안내 박스 */
	--radius-3xl: 20px;  /* 큰 카드·회색/파랑 박스 */
	--radius-4xl: 24px;  /* 레이어 팝업(모달) */
}

/* Typography 가이드 — 모바일(Size Mobile) 재정의 */
@media (max-width:768px) {
:root {
	--fs-display1: 4.4rem;
	--fs-display2: 3.2rem;
	--fs-display3: 2.8rem;
	--fs-h1: 2.8rem;
	--fs-h2: 2.4rem;
	--fs-h3: 1.9rem;
	/* H4~H6, Body1~2는 PC와 동일 */
	--fs-body3: 1.6rem;
	--fs-body4: 1.6rem;
	--fs-body5: 1.5rem;
}
}

/* ===========================
   font
=========================== */
@font-face {font-family:'Pretendard GOV'; font-weight:400; font-display:swap; src:url(../font/PretendardGOV-Regular.woff2) format('woff2'), url(../font/PretendardGOV-Regular.woff) format('woff');}

@font-face {font-family:'Pretendard GOV'; font-weight:500; font-display:swap; src:url(../font/PretendardGOV-Medium.woff2) format('woff2'), url(../font/PretendardGOV-Medium.woff) format('woff');}

@font-face {font-family:'Pretendard GOV'; font-weight:600; font-display:swap; src:url(../font/PretendardGOV-SemiBold.woff2) format('woff2'), url(../font/PretendardGOV-SemiBold.woff) format('woff');}

@font-face {font-family:'Pretendard GOV'; font-weight:700; font-display:swap; src:url(../font/PretendardGOV-Bold.woff2) format('woff2'), url(../font/PretendardGOV-Bold.woff) format('woff');}

/* ===========================
   Layout (반응형)
   - #wrapper: 화면 전체 세로 구성(헤더-본문-푸터)
   - .l_inner: 전 영역 공통 중앙정렬 컨테이너(GNB/본문/푸터가 같은 좌우 라인에 정렬)
   - #container: 좌측 메뉴 + 콘텐츠 (가로 배치 → 모바일 세로 전환)
=========================== */
#wrapper {position:relative; display:flex; flex-direction:column; min-width:320px; min-height:100vh;}

/* 전 영역 공통 중앙정렬 컨테이너 */
.l_inner {width:100%; max-width:var(--layout-max); margin:0 auto; padding:0 var(--layout-pad);}

#container {position:relative; display:flex; flex:1 1 auto; align-items:flex-start; gap:var(--layout-gap); width:min(100% - 40px, var(--content-max)); /* 박스=콘텐츠 1400px, 좌우 20px 거터 */ margin:0 auto; padding:4rem 0 8rem;}

.content {display:flex; flex:1 1 0; flex-direction:column; min-width:0;}

.inner {width:100%; max-width:1280px; margin:0 auto; padding:0 2rem;}

/* ===========================
   Layout 반응형 분기
=========================== */
/* 태블릿 이하: 좌측 메뉴 ↔ 콘텐츠 간격 축소 */
@media (max-width:1024px) {
#container {gap:3.2rem; padding-top:2.4rem; padding-bottom:6rem;}
}

/* 모바일: 좌측 메뉴를 콘텐츠 위로 세로 적층 */
@media (max-width:768px) {
#container {flex-direction:column; gap:2rem; padding-bottom:4rem;}
.content {width:100%;}
}

/* ===========================
   Scroll Lock
   - <body> 등에 이 클래스를 추가하면 전체 페이지 스크롤바가 생기지 않음
     (모달/팝업 열림 등에서 배경 스크롤 방지)
=========================== */
.scroll_lock {overflow-y:hidden;}

/* ===========================
   Accessibility
=========================== */
.blind {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}