@charset "utf-8";

/* =========================================================
   layout.css — 공통 레이아웃 컴포넌트
   - GNB(헤더) / 좌측 메뉴 / 푸터
   - 디자인: 로그인전 leftmenu
   - 공통 중앙정렬 컨테이너 .l_inner / 토큰은 common.css
========================================================= */

/* =========================================================
   1. 건너뛰기 링크 (skip navigation) — 2.4.1
========================================================= */
.skip_nav {display:flex; align-items:center; justify-content:center; position:absolute; top:-3.2rem; left:0; z-index:1000; width:100%; height:3.2rem; background:var(--color-text-title); color:var(--color-white); font-size:var(--fs-base); line-height:1.5; transition:top .2s ease;}
.skip_nav:focus {top:0;}

/* 키보드 초점 표시 (2.1.2) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {outline:2px solid var(--color-primary); outline-offset:-1px;} /* 음수 오프셋: 아웃라인이 요소 테두리를 덮어 안쪽 테두리 노출 방지 */

/* 본문 영역 — skip nav 이동 대상이라 tabindex="-1" 보유.
   새로고침 시 포커스 복원으로 생기는 기본 아웃라인 억제 (키보드 표시는 불필요) */
#content:focus-visible {outline:none;}

/* =========================================================
   2. GNB (헤더)
========================================================= */
.gnb {position:sticky; /* 임계값 전까지 화면 상단 고정 (NHIS #header 방식) */ top:0; left:0; z-index:100; background:var(--color-white); border-bottom:1px solid var(--color-border-gray);}
/* 임계값 초과 시 placeholder로 전환 — 표시는 fixed된 .gnb_in이 담당 */
#wrapper[class*="scroll_"] .gnb {position:relative;}

/* 헤더 본체 래퍼 — .gnb는 자리만 차지(script.js가 높이 고정), 실제 표시는 .gnb_in */
.gnb_in {position:relative; transform:translateY(0);}
/* 일정 이상 스크롤: fixed 전환 (#wrapper에 scroll_down/scroll_up 클래스 — script.js) */
#wrapper[class*="scroll_"] .gnb_in {position:fixed; top:0; left:0; z-index:100; width:100%; background:var(--color-white); border-bottom:1px solid var(--color-border-gray); transition:transform .4s ease .01s;}
#wrapper.scroll_down .gnb_in {transform:translateY(-100%); /* 아래로 스크롤 → 위로 슬라이드 숨김 */}
#wrapper.scroll_up .gnb_in {transform:translateY(0); /* 위로 스크롤 → 다시 표시 */}
/* 전체메뉴 펼침 중이거나 헤더 내부에 키보드 초점이 있으면 숨기지 않음 (2.1.1) */
#wrapper.scroll_down .gnb.is_open .gnb_in,
#wrapper.scroll_down .gnb_in:focus-within {transform:translateY(0);}

/* 전자정부 마스트헤드 */
.gnb_masthead {background:var(--color-masthead);}
.gnb_masthead_inner {display:flex; align-items:center; gap:.8rem; height:3.2rem; max-width:var(--gnb-max); /* 1600px (.l_inner 1440 덮어씀) */}
.gnb_flag {width:24px; height:16px; flex-shrink:0;}
.gnb_masthead_txt {font-size:var(--fs-base); color:var(--color-text-title);}

/* 헤더 본체 */
.gnb_body {position:relative; background:var(--color-white);}
.gnb_inner {display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:2.4rem; max-width:var(--gnb-max); /* 1600px (.l_inner 1440 덮어씀) */ padding-top:1.2rem;}

/* 로고 (row2, 좌측) */
.gnb_logo {grid-column:1; grid-row:2;}
.gnb_logo > a {display:inline-flex; align-items:center; gap:.8rem;}
.gnb_logo_symbol {width:40px; height:40px; flex-shrink:0;}
.gnb_logo_txt {font-family:'NanumGothic', 'Nanum Gothic', 'Pretendard GOV', sans-serif; font-size:1.8rem; font-weight:700; color:var(--color-text-title); white-space:nowrap;}

/* 유틸리티 + 주메뉴 묶음: 래퍼 제거(그리드 직접 배치) */
.gnb_menu {display:contents;}

/* 상단 유틸리티 (row1, 우측) */
.gnb_util {grid-column:1 / -1; grid-row:1; justify-self:end; display:flex; align-items:center;}
.gnb_util > li {display:flex; align-items:center;}
.gnb_util > li + li::before {content:""; width:1px; height:16px; margin:0 1.2rem; background:var(--color-border-gray);}
.gnb_util_link {display:inline-flex; align-items:center; min-height:2.4rem; /* 최소 터치 타겟(2.5.8) */ padding:.2rem .4rem; font-size:var(--fs-base); color:var(--color-text-body);}
.gnb_util_link:hover,
.gnb_util_link:focus {text-decoration:underline;}

/* 주메뉴 (row2) — 로고~전체메뉴 사이 폭을 8개 균등 분배(각 항목 flex:1, 가운데 정렬) */
.gnb_nav {grid-column:2; grid-row:2; justify-self:stretch; min-width:0;}
.gnb_nav_list {display:flex;}
.gnb_nav_item {flex:1 1 0; min-width:0;}
.gnb_nav_list > li > .gnb_nav_link {display:flex; justify-content:center; align-items:center; width:100%; height:8rem; padding:0 1rem; font-size:var(--fs-19); font-weight:600; color:var(--color-text-title); white-space:nowrap; cursor:pointer;}
.gnb_nav_list > li > .gnb_nav_link:hover,
.gnb_nav_list > li > .gnb_nav_link:focus {color:var(--color-primary-deep);}
.gnb_nav_list > li.active > .gnb_nav_link {color:var(--color-primary);}

/* 전체메뉴 (row2, 우측) */
.gnb_allmenu {grid-column:3; grid-row:2; justify-self:end; display:inline-flex; align-items:center; gap:.8rem; height:8rem; padding:0 .4rem; border-radius:var(--radius-sm); white-space:nowrap;}
.gnb_allmenu_ico {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/common/ico_allmenu.svg) no-repeat center / 1.8rem 1.4rem;}
.gnb_allmenu_txt {font-size:var(--fs-19); font-weight:600; color:var(--color-text-title);}

/* 메가메뉴 (전체메뉴 펼침) — 헤더 본체 아래 전폭 단일 패널, 주메뉴와 열 정렬 */
.gnb_mega {display:none; position:absolute; top:100%; left:0; right:0; z-index:60; background:var(--color-white); border-top:1px solid var(--color-border-gray); box-shadow:0 0 1px rgba(0, 0, 0, .08), 0 8px 8px rgba(0, 0, 0, .12);}
.gnb_mega_inner {display:grid; grid-template-columns:auto 1fr auto; align-items:start; column-gap:2.4rem; width:100%; max-width:var(--gnb-max); margin:0 auto; padding:2rem var(--layout-pad);}
/* 좌우 정렬용 투명 자리(로고·전체메뉴) — 주메뉴 열과 맞추기 위해 폭만 차지 */
.gnb_mega_ghost {grid-row:1; visibility:hidden;}
.gnb_logo.gnb_mega_ghost {display:inline-flex; align-items:center; gap:.8rem;}
/* 2depth 열 묶음 — 주메뉴처럼 flex:1 균등 */
.gnb_mega_list {grid-column:2; grid-row:1; display:flex;}
.gnb_mega_col {flex:1 1 0; min-width:0;}

/* 2depth */
.gnb_sub {display:flex; flex-direction:column; gap:.4rem;}
.gnb_sub > li > a {display:flex; justify-content:center; align-items:center; min-height:4.4rem; padding:.8rem 1rem; font-size:var(--fs-lg); font-weight:500; line-height:1.4; color:var(--color-text-body); text-align:center;}
.gnb_sub > li > a:hover,
.gnb_sub > li > a:focus {color:var(--color-primary-deep); text-decoration:underline;}

/* 3depth (불릿) */
.gnb_sub3 {display:flex; flex-direction:column;}
.gnb_sub3 > li > a {display:flex; justify-content:center; align-items:center; min-height:4rem; padding:.4rem 1.6rem; font-size:var(--fs-base); line-height:1.4; color:var(--color-text-title); text-align:center;}
.gnb_sub3 > li > a::before {content:""; flex-shrink:0; width:.4rem; height:.4rem; margin-right:.8rem; border-radius:1px; background:#33363d;}
.gnb_sub3 > li > a:hover,
.gnb_sub3 > li > a:focus {color:var(--color-primary-deep); text-decoration:underline;}

/* 펼침 상태 — 전체메뉴 클릭(is_open) / 마우스 hover / 초점(gnb_focus) */
/* 초점 노출은 :focus-within 이 아니라 JS 클래스로 잡는다 — 메가는 .gnb_nav 밖이라
   서브 링크로 초점이 넘어가는 순간 주메뉴 focus-within 이 풀려 display:none 이 되고 초점까지 잃는다 */
.gnb.is_open .gnb_mega {display:block;}
.gnb.gnb_focus:not(.is_open) .gnb_mega {display:block;}
.gnb:not(.is_open):has(.gnb_nav:hover, .gnb_mega:hover) .gnb_mega {display:block;}

/* =========================================================
   3. 좌측 메뉴 (마이페이지) — PC 아코디언
========================================================= */
.side_menu {width:var(--side-w); flex-shrink:0;}
.side_menu_title {margin-bottom:2.4rem; font-size:2.4rem; font-weight:700; line-height:var(--lh-base); letter-spacing:-1px; color:var(--color-text-title);}
.side_menu_list {border-top:1px solid var(--color-text-muted); /* 첫 항목 위 진한 라인 #8a949e */ border-bottom:1px solid var(--color-bg-subtle); /* #e6e8ea */}
.side_menu_item + .side_menu_item {border-top:1px solid var(--color-bg-subtle);}

/* 1depth 링크 / 펼침 토글 공통 */
.side_menu_link,
.side_menu_toggle {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 5.8rem;
	padding: 1.6rem 1.6rem 1.6rem .8rem;
	font-size: var(--fs-lg);     /* 17px */
	font-weight: 700;
	color: var(--color-text-title);
	text-align: left;
}
.side_menu_link:hover,
.side_menu_link:focus {color:var(--color-primary-deep);} /* a 호버 색상 #083891 */
.side_menu_toggle:hover,
.side_menu_toggle:focus {color:var(--color-primary);}
.side_menu_item.active > .side_menu_link {color:var(--color-primary-deep);}
.side_menu_label {flex:1 1 0; min-width:0;}

/* 펼침(아코디언) 화살표 (▼ 닫힘 / ▲ 열림) */
.side_menu_arrow {position:relative; width:2.4rem; height:2.4rem; flex-shrink:0;}
.side_menu_arrow::before {content:""; position:absolute; left:50%; top:50%; width:.9rem; height:.9rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translate(-50%, -75%) rotate(45deg);}

/* 펼침 상태 */
.side_menu_item.is_open > .side_menu_toggle {color:var(--color-primary-deep); border-bottom:2px solid var(--color-primary-deep);}
.side_menu_item.is_open > .side_menu_toggle .side_menu_arrow::before {transform:translate(-50%, -25%) rotate(225deg);}
.side_menu_item:not(.is_open) > .side_submenu {display:none;}

/* 2depth 하위 목록 */
.side_submenu {padding:.8rem 0;}
.side_submenu_link {display:flex; align-items:center; min-height:4rem; padding:0 1.6rem; border-radius:var(--radius-lg); font-size:var(--fs-base); /* 15px */ color:var(--color-text-title);}
.side_submenu_link::before {content:""; flex-shrink:0; width:.4rem; height:.4rem; margin-right:.8rem; border-radius:1px; background:#33363d; /* color/icon/gray */}
.side_submenu_link:hover,
.side_submenu_link:focus {color:var(--color-primary-deep); text-decoration:underline;}
.side_submenu_link.is_active {background:var(--color-primary-light); /* #ecf2fe */ font-weight:700; color:var(--color-primary-deep);}
.side_submenu_link.is_active::before {background:var(--color-primary-deep);}

/* =========================================================
   4. 푸터
========================================================= */
.footer {background:var(--color-footer-bg); color:var(--color-white); padding:4rem 0 6rem;}
.footer_inner {display:flex; flex-direction:column; gap:2rem; width:min(100% - 40px, var(--content-max)); /* 박스=콘텐츠 1400px (.l_inner 1440 덮어씀) */ max-width:none; margin:0 auto; padding:0;}

/* 상단: 정부상징/로고 + 주소 + 관련사이트 */
.footer_top {display:flex; justify-content:space-between; align-items:flex-start; gap:2.4rem;}
.footer_top_info {display:flex; flex-direction:column; gap:2rem;}
.footer_brand {display:flex; align-items:center; gap:3.2rem;}
.footer_moge {width:170px; height:49px;}
.footer_logo {display:inline-flex; align-items:center; gap:.8rem;}
.footer_logo_symbol {width:40px; height:42px;}
.footer_logo_txt {font-family:'NanumGothic', 'Nanum Gothic', 'Pretendard GOV', sans-serif; font-size:1.3rem; font-weight:700; color:var(--color-white); white-space:nowrap;}
.footer_addr {display:flex; flex-direction:column; gap:.4rem; font-style:normal; font-size:var(--fs-base); color:var(--color-footer-text);}

/* 바로가기 유틸 링크 (우측 상단) */
.footer_util {display:flex; flex-direction:column; align-items:flex-end; gap:.7rem;}
.footer_util a {display:inline-flex; align-items:center; gap:.6rem; min-height:2.4rem; /* 최소 터치 타겟(2.5.8) */ font-size:var(--fs-lg); color:var(--color-white);}
.footer_util a:hover,
.footer_util a:focus {text-decoration:underline;}
.footer_util_arrow {flex-shrink:0; width:.7rem; height:.7rem; border-style:solid; border-width:1.5px 1.5px 0 0; border-color:currentColor; transform:rotate(45deg);}

/* 관련사이트 드롭다운 (커스텀 disclosure — 우측 정렬, 위로 펼침) */
.footer_sites {position:relative; display:flex; justify-content:flex-end;}
.footer_sites_btn {display:inline-flex; align-items:center; gap:1rem; width:200px; height:3.8rem; padding:0 1.2rem; border:1px solid var(--color-footer-line); border-radius:var(--radius-sm); background:var(--color-footer-bg); color:var(--color-white); font-size:var(--fs-base); cursor:pointer;}
.footer_sites_label {flex:1 1 0; min-width:0; text-align:left;}
.footer_sites_arrow {flex-shrink:0; width:.8rem; height:.8rem; border-style:solid; border-width:1.5px 1.5px 0 0; border-color:currentColor; transform:translateY(.15rem) rotate(-45deg); transition:transform .2s;}
.footer_sites_btn[aria-expanded="true"] .footer_sites_arrow {transform:translateY(-.1rem) rotate(135deg);}
.footer_sites_list {position:absolute; right:0; bottom:calc(100% + .8rem); z-index:10; display:flex; flex-direction:column; gap:.8rem; width:200px; margin:0; padding:1.2rem; list-style:none; border:1px solid var(--color-footer-line); border-radius:var(--radius-sm); background:var(--color-footer-bg);}
.footer_sites_list[hidden] {display:none;}
.footer_sites_list a {display:block; min-height:2.4rem; /* 최소 터치 타겟 */ padding:.2rem 0; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-white);}
.footer_sites_list a:hover,
.footer_sites_list a:focus {text-decoration:underline;}

/* 하단: 약관/정책 + 카피라이트 */
.footer_bottom {display:flex; justify-content:space-between; align-items:center; gap:2.4rem; padding-top:2rem; border-top:1px solid var(--color-footer-line);}
.footer_links {display:flex; align-items:center; gap:2.4rem;}
.footer_links a {display:inline-flex; align-items:center; min-height:2.4rem; /* 최소 터치 타겟(2.5.8) */ font-size:var(--fs-lg); color:var(--color-white);}
.footer_links a:hover,
.footer_links a:focus {text-decoration:underline;}
.footer_links a.is_point {color:var(--color-footer-point); font-weight:600; text-decoration:underline;}
.footer_copy {font-size:var(--fs-base); color:var(--color-footer-sub);}