@charset "utf-8";
/* =========================================================
   신규 추가분 (AI 작업) - 기존 login.css 위에 추가로 로드
   [변경 4] 안내 하이라이트 박스 / [변경 5] 관련 서비스 / [변경 6,7] 사이드 패널
========================================================= */

/* [여백 줄이고] 헤더 바로 아래 상단 여백 축소 */
#login-container {margin:28px 0 60px 0 !important;}

/* 로그인 박스 + 사이드 패널을 감싸는 행 */
.login-content-row {display:flex; gap:24px; align-items:flex-start; justify-content:center; max-width:1560px; margin:0 auto;}
.login-container__inner {margin:0;}

/* =========================================================
   [변경] 좌측 소개 영역 제거 → 단일 컬럼 구조
========================================================= */
.login-container__inner--single {width:460px; max-width:100%;}
/* [변경] 환영문구 - 카드 바깥 상단, 카드와 좌측 정렬 맞춤 */
.login-page-heading {max-width:1084px; margin:0 auto 30px auto; text-align:left;}
.login-page-heading .login-con__text1 {font-size:28px; line-height:1.5; font-weight:600; color:#222;}
.login-page-heading .login-con__text1 .blue {font-size:38px; color:#3470ff; font-weight:700;}
.login-page-heading .login-con__text2 {font-size:15px; margin-top:10px; color:var(--color666); font-weight:400;}

.login-inner--single {display:block;}
.login-con__right--full {width:100%; border-right:none;}

/* [탭 글자 잘림 방지] 카드 폭이 좁아지며 '기타/기업회원'이 두 줄로 줄바꿈되어
   잘리던 문제 - 탭 좌우 여백을 줄이고 폰트 크기를 낮춰 한 줄로 표시 */
/* [탭 글자 잘림 방지 + 중앙 정렬] '기타/기업회원' 줄바꿈 방지를 위해 여백을 줄이고,
   탭 3개를 균등분배(flex:1) 대신 내용 크기만큼만 차지하게 하여 간격을 좁히고 중앙에 모음 */
.login-container__inner--single .login-tab__list {padding:0 4px; justify-content:center; gap:24px;}
.login-container__inner--single .login-tab__item {flex:0 0 auto;}
.login-container__inner--single .login-tab__item a {width:auto; white-space:nowrap; padding-left:2px; padding-right:2px; padding-bottom:12px;}

/* [모바일 버그 수정] 원본 2단 레이아웃의 모바일 규칙(login.css)이
   .login-container__inner의 테두리를 없애고 .login-con__line에 별도 테두리를
   주는 방식이라, 로고가 테두리 밖으로 빠져 보이던 문제 수정.
   단일 컬럼 카드는 어떤 화면 크기에서도 하나의 테두리 박스로 유지 */
.login-container__inner--single {border:1px solid #d5d7dd; border-radius:20px; padding:0 0 30px 0; box-sizing:border-box;}
.login-container__inner--single .login-con__line {border:none; padding:0;}

/* [탭별 콘텐츠 높이 고정] 지역청년/기타·기업회원 탭은 콘텐츠(아이디/비번 입력)가
   짧아 카드 전체 높이가 줄어들고, 그에 맞춰 사이드패널(비교과/공지사항)까지
   줄어들며 공지사항이 사라지는 문제 방지 - 학생/교직원 탭 기준 높이로 고정 */
.login-container__inner--single .login-tab__content {min-height:545px;}
.login-container__inner--single .login-tab__content {padding:28px 50px 44px 50px;}
.login-container__inner--single .tab__content1 .img {margin:20px 0;}
.login-container__inner--single .tab__content1 .img img {width:130px; height:102px;}

/* [변경 4] 안내 하이라이트 박스 */
.tab__content1 .login-highlight-box {margin-top:10px; padding:10px 16px; background:#f3f7ff; border:1px solid #cfe0ff; border-radius:12px;}
.tab__content1 .login-highlight-box p {font-size:14px; line-height:20px; color:#2d58dd; font-weight:500;}

/* [변경 5] 관련 서비스 (로그인 버튼 하단, 신규) */
.related-service {margin-top:26px; padding-top:22px; padding-bottom:4px; border-top:1px solid #f1f2f3;}
.related-service__title {font-size:14px; font-weight:600; color:#222a5d; margin-bottom:12px; text-align:left;}
.related-service__list {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; row-gap:12px;}
.related-service__list li {display:flex; align-items:center;}
.related-service__list li:not(:first-child)::before {content:'|'; color:#d5d7dd; margin:0 12px;}
.related-service__list a {font-size:14px; color:#3d4457; display:inline-flex; align-items:center; gap:4px;}
.related-service__list a:hover {color:#3470ff; text-decoration:underline;}
.related-service__list a .ext {font-size:11px;}

/* [변경 6, 7] 사이드 패널 - 비교과프로그램 / 공지사항
   요구사항: 두 박스를 합친 높이가 로그인 박스(login-container__inner) 높이와 동일해야 함
   -> JS(syncSidePanelHeight)로 패널 전체 높이를 로그인 박스와 맞추고,
      공지사항 박스가 flex:1로 남는 높이를 흡수해 정확히 채움 */
.login-side-panel {width:600px; flex:0 0 auto; display:flex; flex-direction:column; gap:20px; overflow:hidden;}
.side-box {background:var(--white); border:1px solid #d5d7dd; border-radius:20px; padding:24px 24px 26px 24px; box-sizing:border-box; min-width:0;}
.side-box__head {display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.side-box__title {font-size:24px; font-weight:600; color:#222a5d;}
.side-box__note {font-size:14px; color:var(--color888); margin-bottom:16px;}

.side-box.program-box {flex:0 0 auto;}
.side-box.notice-box {flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}
.side-box.notice-box .notice-list {flex:1 1 auto; overflow:hidden;}

/* 비교과프로그램 토글 */
.program-toggle {display:flex; border:1px solid #d5d7dd; border-radius:20px; overflow:hidden; height:32px; width:120px;}
.program-toggle button {flex:1; font-size:13px; color:var(--color666); background:#fff;}
.program-toggle button.active {background:#222a5d; color:#fff; font-weight:600;}

.program-list {position:relative; display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; scroll-snap-type:x proximity;}
.program-list::-webkit-scrollbar {display:none;}
.program-card {flex:0 0 auto; width:220px; border:1px solid #e3e5e8; border-radius:14px; overflow:hidden; scroll-snap-align:start;}
.program-card__thumb {display:block; aspect-ratio:324/200; width:100%; height:auto; background:#f3f4f6;}
.program-card__thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.program-card__body {padding:16px 16px 18px 16px;}
.program-card__row1 {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.program-card__dday {font-size:13px; color:#ff4d15; font-weight:600;}
.program-card__tags {display:flex; gap:4px;}
.program-card__tag {font-size:11px; color:#3470ff; border:1px solid #3470ff; border-radius:100px; padding:2px 8px;}
.program-card__title {font-size:14px; font-weight:600; line-height:20px; color:#222; margin-bottom:12px; min-height:40px;}
.program-card__bar {height:5px; border-radius:3px; background:#eef0f2; overflow:hidden; margin-bottom:8px;}
.program-card__bar span {display:block; height:100%; background:#3470ff;}
.program-card__count {font-size:12px; color:var(--color888);}

/* 비교과프로그램 하단 컨트롤: [‹] [dots] [›] 한 줄 (화살표를 dot 높이로) */
.program-controls {display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; min-height:28px;}
.program-nav {flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:50%; border:1px solid #e3e5e8; background:#fff; color:#333; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.12); transition:opacity .15s ease;}
.program-nav[hidden] {display:none;}
.program-dots {display:flex; justify-content:center; gap:6px;}
.program-dots i {width:6px; height:6px; border-radius:50%; background:#e3e5e8; display:block; cursor:pointer;}
.program-dots i.active {background:#3470ff;}

/* 공지사항 - 참고 이미지 스타일: 구분선 리스트 대신 항목별 카드 박스 */
.notice-list {display:flex; flex-direction:column; gap:8px;}
.notice-list li {display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid #e5e7eb; border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease;}
.notice-list li:hover {border-color:#c7d2fe; box-shadow:0 2px 8px rgba(52,112,255,.08); cursor:pointer;}
.notice-list .badge {flex:0 0 auto; font-size:12px; font-weight:600; padding:3px 10px; border-radius:6px; white-space:nowrap; background:#fff; border:1px solid #3470ff; color:#3470ff;}
.notice-list .badge.type2 {border-color:#ff6a3d; color:#ff6a3d;}
.notice-list .title {flex:1; font-size:13px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice-list .date {flex:0 0 auto; font-size:12px; color:var(--color888);}

/* =========================================================
   반응형: 1300px 이하에서는 세로 스택, 높이 동기화 해제(JS에서 처리)
========================================================= */
@media screen and (max-width: 1300px){
  .login-content-row {flex-direction:column; align-items:center;}
  /* [태블릿 정렬 통일] 기존 login.css가 태블릿에서 카드 폭을 %(fluid)로 넓히는
     방식을 그대로 따라, 로그인 카드·사이드패널·상단 문구가 같은 폭을 공유하도록 통일
     (기존에는 카드만 좁은 고정폭이라 하단 비교과/공지 영역과 폭이 어긋나 보였음) */
  .login-container__inner--single {width:100%; max-width:700px;}
  .login-side-panel {width:100%; max-width:700px; height:auto !important; flex-direction:column;}
  .side-box.notice-box .notice-list {overflow:visible;}
  .login-page-heading {max-width:700px; margin-bottom:26px;}
}
@media screen and (max-width: 1199px){
  .side-box__title {font-size:20px;}
}
@media screen and (max-width: 899px){
  .login-side-panel {flex-direction:column;}
  .side-box {padding:18px;}
  .program-card {width:170px;}
  .related-service__title {text-align:center;}
  /* [모바일 관련서비스 개선] 텍스트+구분선이 줄바꿈되며 지저분해 보이던 것을
     세로로 나열된 카드형 리스트(터치하기 쉬운 풀폭 행)로 변경 */
  .related-service__list {flex-direction:column; align-items:stretch; gap:8px;}
  .related-service__list li {width:100%;}
  .related-service__list li:not(:first-child)::before {display:none;}
  .related-service__list a {width:100%; justify-content:space-between; padding:13px 16px; border:1px solid #e5e7eb; border-radius:10px; font-size:14px; color:#3d4457; box-sizing:border-box;}
  .related-service__list a:hover {background:#f7f9ff; border-color:#c7d2fe;}
  .related-service__list a .ext {color:#9aa3b2; font-size:13px;}
  .login-page-heading {max-width:100%; margin-bottom:20px;}
  .login-page-heading .login-con__text1 {font-size:20px;}
  .login-page-heading .login-con__text1 .blue {font-size:26px;}
}