@charset "utf-8";

/* =========================================================
   main.css — 메인(홈) 페이지 전용 스타일
   - 공통 컴포넌트는 content.css / 토큰·골격은 common.css
========================================================= */

/* 레이아웃 — 본문 + 로그인 사이드 2단 */
.main {padding:6rem 0 8rem;}
.main_inner {width:min(100% - 4rem, 160rem); margin:0 auto;}
.main_layout {display:flex; align-items:flex-start;}
.main_body {display:flex; flex:1 1 0; flex-direction:column; gap:8rem; min-width:0; padding-right:6rem;}

/* 안내 카드 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 .8rem 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_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);}
.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;}

/* 공지 - 대표(썸네일) — PC: 원 옆 제목/설명 / MO: 원+제목 상단, 설명 전체폭 */
.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-primary); 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:#4c87f6;}
.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; 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);}

/* 로그인 유도 사이드 */
.side_login {flex:0 0 40rem; padding-left:6rem;}
.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;}
.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-2xl); background:var(--color-primary);}
.my_card_head {position:relative;}
.my_card_greet {display:flex; flex-direction:column; font-size:2.4rem; line-height:var(--lh-base); color:var(--color-white);}
.my_card_name {font-weight:700;}
.my_card_hello {font-weight:600;}
.my_card_visual {position:absolute; top:50%; right:0; width:6.4rem; height:6.4rem; transform:translateY(-50%);}
.my_card_list {display:flex; flex-direction:column; gap:2.4rem;}
.my_card_row {display:flex; align-items:center; gap:.8rem; padding:2.4rem 1.6rem; border-radius:var(--radius-lg); background:var(--color-primary-light);}
.my_card_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);}
.my_card_time {flex-shrink:0; display:flex; align-items:center; gap:.4rem;}
.my_card_time b {font-size:var(--fs-body1); font-weight:700; color:var(--color-text-body);}
.my_card_time_total {font-size:var(--fs-sm); color:var(--color-text-muted);}
.my_card_arrow {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat 50%/2rem;}

/* 상태 칩 — 흰 바탕 + 색 아웃라인 (기본 파랑 / type_danger 빨강) */
.state_chip {display:inline-flex; align-items:center; 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_danger {border-color:var(--color-input-border-error); color:var(--color-msg-error);}

/* =========================================================
   반응형 — 태블릿(≤1024): 로그인 사이드를 본문 위로 세로 적층
========================================================= */
@media (max-width:1024px) {
.main {padding:4rem 0 6rem;}
.main_layout {flex-direction:column; gap:4rem;}
.main_body {gap:6rem; padding-right:0;}
.side_login {order:-1; flex:0 0 auto; width:100%; padding-left:0;}
}

/* =========================================================
   반응형 — 모바일(≤768)
========================================================= */
@media (max-width:768px) {
.main {padding:2rem 0 4rem;}
.main_body {gap:4rem;}

/* 안내 카드 세로 적층 */
.guide_group {flex-direction:column; gap:2rem;}
.guide_card {gap:3.2rem; padding:2.4rem;}

/* 공지 */
.notice_box {gap:2.4rem; padding:2.4rem;}
.notice_featured {column-gap:1.2rem; row-gap:1.2rem; align-items:start;}
.notice_num {grid-row:1; width:8rem; height:8rem;}
.notice_num_no {font-size:var(--fs-h3);}
.notice_featured_head {grid-row:1; flex-direction:column; align-items:flex-start; gap:.8rem;}
.notice_featured_title {flex:none; width:100%; white-space:normal;}
.notice_featured_desc {grid-column:1 / 3; grid-row:2; -webkit-line-clamp:3;}
/* 일반 공지: 배지·제목·날짜 세로 스택 */
.notice_row {flex-wrap:wrap; gap:.8rem 1.2rem;}
.notice_row_title {flex:1 1 100%; order:2; white-space:normal;}
.notice_row .badge {order:1;}
.notice_row_date {order:3; flex:1 1 100%;}

/* 궁금한 점 2×2 — MO는 바로가기 버튼을 노출하지 않고 카드 전체를 링크 영역으로 덮는다(링크 이름은 a의 aria-label 유지) */
.help_box {gap:3.2rem; padding:2.4rem;}
.help_grid {flex-wrap:wrap; gap:2rem;}
.help_card {position:relative; flex:1 1 calc(50% - 1rem);}
/* 같은 행에서 라벨이 1줄인 카드는 남는 높이를 라벨 영역이 차지하고 그 안에서 세로 가운데 정렬(2줄 카드와 높이가 맞춰질 때 기준) */
.help_card_label {display:flex; flex:1 1 auto; align-items:center; justify-content:center;}
.help_card_link {position:absolute; top:0; right:0; bottom:0; left:0; margin:0; padding:0; border:0; border-radius:inherit; font-size:0;}
.help_card_link:hover,
.help_card_link:focus {background:none;}

/* 로그인: 아이콘 숨김, 버튼을 목록 아래로 */
.side_login_ico {display:none;}
.side_login_card_title {margin-bottom:2rem; font-size:2.4rem; font-weight:700; text-align:left;}
.side_login_btn {order:1; height:5.6rem; margin:2rem 0 0;}

/* 로그인 후 카드 */
.my_card {padding:2.4rem;}
.my_card_list {gap:2rem;}
.my_card_row {padding:1.6rem;}
}