@charset "utf-8";

/* =========================================================
   main.css — 메인(홈) 페이지 전용 스타일
   - 공통 컴포넌트는 content.css / 토큰·골격은 common.css
   - 로그인 전(main.html) / 로그인 후 종사자·기관장(main_user.html) /
     로그인 후 관리자(main_admin.html) 3개 화면 공용
========================================================= */

/* 레이아웃 — 본문 + 사이드 2단(가운데 세로 구분선) */
.main {padding:0;}
.main_inner {width:min(100% - 4rem, 160rem); margin:0 auto;}
.main_layout {position:relative; display:flex; align-items:stretch;}
.main_body {display:flex; flex:1 1 0; flex-direction:column; gap:8rem; min-width:0; padding:6rem 6rem 6rem 0;}

/* 등록 민간기관 찾아보기 */
.main_search {display:flex; align-items:center; gap:4.8rem; padding:3.2rem; border-radius:var(--radius-3xl); background:var(--color-primary-subtler);}
.main_search_title {flex-shrink:0; font-size:var(--fs-22); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.main_search_field {display:flex; flex:1 1 0; gap:1.2rem; min-width:0;}
.main_search_field .field_box {flex-shrink:0;}
.main_search_keyword {flex:1 1 0; min-width:0;}
/* 조회 버튼 — content.css에서 .btn_act(48)가 .search_btn(56)보다 뒤에 선언돼 입력칸 높이와 어긋나는 것 보정 */
.main_search_field .search_btn {min-width:9rem; height:5.6rem; padding:0 2rem; border-radius:var(--radius-lg); font-size:var(--fs-19);}

/* 안내 카드 2종 */
.guide_group {display:flex; gap:2.8rem;}
.guide_card {display:flex; flex:1 1 0; flex-direction:column; gap:3.6rem; min-width:0; padding:3.2rem; border-radius:var(--radius-3xl); background:var(--color-white); box-shadow:0 0 1.6rem rgba(0,0,0,.12);}
.guide_card_head {display:flex; flex-direction:column; gap:1.2rem;}
.guide_card_title {font-size:var(--fs-display3); font-weight:500; line-height:1.4; letter-spacing:-.02em; color:var(--color-text-strong);}
.guide_card_title b {font-weight:700;}
.guide_card_desc {font-size:var(--fs-lg); font-weight:600; line-height:var(--lh-base); color:var(--color-text-body);}

.guide_menu {display:flex; flex-direction:column; gap:2.4rem;}
.guide_menu_item {display:flex; align-items:center; gap:1.4rem; padding:1.6rem; border-radius:var(--radius-2xl); background:var(--color-gray-subtler); font-size:var(--fs-lg); font-weight:600; color:var(--color-text-title); transition:background .2s;}
.guide_menu_item:hover,
.guide_menu_item:focus {background:var(--color-gray-subtle);}
.guide_menu_ico {flex-shrink:0; width:3.6rem; height:3.6rem;}
.guide_menu_text {flex:1 1 0; min-width:0; line-height:var(--lh-base);}
.guide_menu_count {font-weight:400; color:var(--color-primary-dark);}
.guide_menu_arrow {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat 50%/2rem;}

/* 공지사항 */
.notice_box {display:flex; flex-direction:column; gap:2.8rem; padding:3.2rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.notice_head {display:flex; align-items:center; gap:1.6rem;}
.notice_title {flex:1 1 0; min-width:0; font-size:var(--fs-display3); font-weight:600; line-height:1.4; color:var(--color-text-strong);}
.notice_more {flex-shrink:0; width:4rem; height:4rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat 50%/4rem;}
.notice_list {display:flex; flex-direction:column; gap:2.8rem;}

/* 공지 - 대표(썸네일) */
.notice_featured {display:grid; grid-template-columns:auto 1fr; column-gap:2rem; row-gap:.8rem; align-items:center;}
.notice_num {grid-column:1; grid-row:1 / 3; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; width:9.2rem; height:9.2rem; border-radius:1000px; background:var(--color-secondary); color:var(--color-white);}
.notice_num_no {font-size:2.8rem; font-weight:700; line-height:var(--lh-base);}
.notice_num_date {font-size:var(--fs-sm); font-weight:500; line-height:var(--lh-base);}
.notice_featured_head {grid-column:2; grid-row:1; display:flex; align-items:center; gap:1.2rem; min-width:0;}
.notice_featured_title {flex:1 1 0; min-width:0; overflow:hidden; font-size:var(--fs-body1); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong); white-space:nowrap; text-overflow:ellipsis;}
.notice_featured_desc {grid-column:2; grid-row:2; display:-webkit-box; overflow:hidden; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.notice_featured:hover .notice_featured_title,
.notice_featured:focus .notice_featured_title {text-decoration:underline;}

/* 공지 - 일반 목록 */
.notice_rows {display:flex; flex-direction:column; gap:2.4rem;}
.notice_row {display:flex; align-items:center; gap:1.2rem;}
.notice_row .badge {flex-shrink:0;}
.notice_row_title {flex:1 1 0; min-width:0; overflow:hidden; font-size:var(--fs-lg); font-weight:600; line-height:var(--lh-base); color:var(--color-text-strong); white-space:nowrap; text-overflow:ellipsis;}
.notice_row_date {flex-shrink:0; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body);}
.notice_row:hover .notice_row_title,
.notice_row:focus .notice_row_title {text-decoration:underline;}

/* 하단 바로가기 박스(궁금한 점 / 게시판 및 콘텐츠 관리) */
.help_box {display:flex; flex-direction:column; align-items:center; gap:4rem; padding:3.2rem; border-radius:var(--radius-3xl); background:var(--color-secondary);}
.help_title {font-size:var(--fs-display3); font-weight:600; line-height:1.4; color:var(--color-white); text-align:center;}
.help_grid {display:flex; gap:2.8rem; width:100%;}
.help_card {display:flex; flex:1 1 0; flex-direction:column; align-items:center; gap:.8rem; min-width:0; padding:2rem 2.4rem; border-radius:var(--radius-xl); background:var(--color-white);}
.help_card_ico {width:4.4rem; height:4.4rem;}
.help_card_label {font-size:var(--fs-lg); font-weight:600; line-height:var(--lh-base); color:var(--color-text-strong); text-align:center;}
.help_card_link {display:inline-flex; align-items:center; justify-content:center; min-width:15rem; margin-top:.8rem; padding:.8rem 2rem; border:1px solid var(--color-gray-light); border-radius:1000px; font-size:var(--fs-base); color:var(--color-text-body); transition:background .2s;}
.help_card_link:hover,
.help_card_link:focus {background:var(--color-bg);}

/* 사이드 — 본문과 세로 구분선으로 분리(구분선은 폭을 차지하지 않도록 ::before로 그림) */
.side_login {position:relative; display:flex; flex:0 0 40rem; flex-direction:column; gap:2rem; padding:6rem 0 6rem 6rem;}
.side_login::before {content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--color-gray-light);}

/* 사이드 — 로그인 전 안내 */
.side_login_card {display:flex; flex-direction:column;}
.side_login_ico {width:6rem; height:6rem; margin:0 auto 1.6rem;}
.side_login_card_title {margin-bottom:2.4rem; font-size:var(--fs-body1); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title); text-align:center;}
.side_login_card_title b {font-weight:700;}
.side_login_btn {width:100%; margin-bottom:3.2rem; background:var(--color-secondary); color:var(--color-white);}
.side_login_btn:hover,
.side_login_btn:focus {background:var(--color-secondary-dark);}
.side_login_list {display:flex; flex-direction:column; gap:2rem;}
.side_login_item {display:flex; align-items:center; gap:1.6rem; padding:1.2rem 1.2rem 2.4rem; border-bottom:1px solid var(--color-gray-light);}
.side_login_item_ico {flex-shrink:0; width:2.4rem; height:2.4rem;}
.side_login_item_text {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.side_login_item_text b {font-weight:700;}

/* 사이드 — 로그인 후 현황 카드(남색) */
.my_card {display:flex; flex-direction:column; gap:2.8rem; padding:2.8rem; border-radius:var(--radius-3xl); background:var(--color-secondary);}
.my_card_head {display:flex; align-items:center; gap:2rem;}
.my_card_greet {flex:1 1 0; display:flex; flex-direction:column; min-width:0; font-size:var(--fs-h3); line-height:var(--lh-base); color:var(--color-white);}
.my_card_name {font-weight:700;}
.my_card_hello {font-weight:600;}
.my_card_visual {flex-shrink:0; width:6.4rem; height:6.4rem;}
.my_card_btn {width:100%;}
.my_card_list {display:flex; flex-direction:column; gap:2.4rem;}

/* 현황 행 — 카드 안/밖 공용 */
/* 카드 밖 목록 — 카드 안쪽 행과 같은 폭(카드 34rem - 좌우 여백 2.8rem×2) */
.status_list {display:flex; flex-direction:column; gap:2rem; width:28.4rem;}
.status_row {display:flex; align-items:center; gap:.8rem; min-height:8rem; padding:1.6rem; border-radius:var(--radius-lg); background:var(--color-primary-light);}
.status_label {flex:1 1 0; min-width:0; font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.status_value {flex-shrink:0; font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.status_arrow {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat 50%/2rem;}

/* 상태 칩 — 흰 바탕 + 색 아웃라인 (기본 파랑 / type_success 초록 / type_gray 회색) */
.state_chip {display:inline-flex; align-items:center; justify-content:center; min-width:5.6rem; height:3.2rem; padding:0 .8rem; border:1px solid var(--color-primary); border-radius:var(--radius-md); background:var(--color-white); font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-primary); white-space:nowrap;}
.state_chip.type_success {border-color:var(--color-success); color:var(--color-msg-success);}
.state_chip.type_gray {border-color:var(--color-element-gray); color:var(--color-text-caption);}