@charset "utf-8";

: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-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 */
	--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); 
	--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 */
	--fs-display1: 6rem;     /* Display1 large */
	--fs-display2: 4.4rem;   /* Display2 medium */
	--fs-display3: 3.6rem;   /* Display3 small */
	--fs-h1: 4rem;           /* H1 xlarge */
	--fs-h2: 3.2rem;         /* H2 large */
	--fs-h3: 2.4rem;         /* H3 medium */
	--fs-22: 2.2rem;         /* heading xxmedium 22 — Figma 정의(현재 미사용) */
	--fs-h4: 1.9rem;         /* H4 small */
	--fs-h5: 1.7rem;         /* H5 xsmall */
	--fs-h6: 1.5rem;         /* H6 xxsmall */
	--fs-body1: 1.9rem;      /* Body1 large — weight 700·600 */
	--fs-body2: 1.7rem;      /* Body2 medium(Base) — weight 700·600·400 */
	--fs-body3: 1.5rem;      /* Body3 small */
	--fs-body4: 1.4rem;      /* Body4 small */
	--fs-body5: 1.3rem;      /* Body5 xsmall */
	--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 */
	--radius-xs: 2px;    /* 현재 미사용 */
	--radius-sm: 4px;    /* 배지·소형 마커 */
	--radius-md: 6px;    /* 입력칸·인라인 버튼 */
	--radius-lg: 8px;    /* 주요 버튼·첨부·리스트 */
	--radius-xl: 12px;   /* 안내 박스·중형 카드 */
	--radius-2xl: 16px;  /* 정보 안내 박스 */
	--radius-3xl: 20px;  /* 큰 카드·회색/파랑 박스 */
	--radius-4xl: 24px;  /* 레이어 팝업(모달) */
}

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

#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;}

/* ===========================
   Scroll Lock
=========================== */
.scroll_lock {overflow-y:hidden;}

/* ===========================
   State (공통 보이기/숨기기)
   - 노출 시 display는 각 컴포넌트 클래스가 정의, .is_hide는 숨김만 담당
   - 스크립트: script.js toggleShow() / [data-toggle]
=========================== */
.is_hide {display:none !important;}

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