@charset "UTF-8";
/* 2026 홈페이지 정리 — layout (기존 디자인 유지, 기존 CSS 파일은 고치지 않고 여기서 덮어쓴다) */
/* 담당 C: 메인 · 학원소개 본문 · 학원안내 · 교육과정 · 수강신청 카드 · 회원 화면 · 카카오 버튼 */


/* ===== 공통: 폼 요소가 사이트 글꼴을 받게 (회원 화면·메인) ===== */
#main input, #main select, #main textarea, #main button,
#login input, #login select, #login button,
#joinStep input, #joinStep button,
#joinMember input, #joinMember select, #joinMember button,
#mypage button {font-family: inherit;}


/* ===== S-46 / V-28 카카오 상담 버튼 — 1500px 이하에서 오른쪽 아래 구석으로 작게 (모양은 그대로) ===== */
@media screen and (max-width: 1500px) {
  .kakao {right: 16px; bottom: 16px; width: 140px; height: 40px; padding: 6px 12px;}
  .kakao ul li {font-size: 14px; line-height: 28px;}
  .kakao ul li img {width: 28px; height: auto; padding-right: 6px; vertical-align: middle;}
  .kakao .additional-content {bottom: 48px;}
}


/* ===== 메인(index) ===== */
/* S-25: h2 를 dl 밖으로 뺐으므로 .academyList 가 한 줄(제목 · 지점 탭 · 더보기)을 잡는다.
   슬라이드(dd)는 .academyList 왼쪽 끝 기준으로 둔다(예전 dl 왼쪽 끝과 같은 자리). */
#main #main2 .academy .academyList {display: flex; position: relative;}
#main #main2 .academy .academyList > h2 {margin-right: 2vw; color: #000;}
#main #main2 .academy .academyList dl {position: static;}
#main #main2 .academy .academyList dl dd {left: 0;}
#main #main2 .academy .academyList dl dt a {display: inline; color: inherit;}
#main #main2 .academy .academyList > .more {color: #333;} /* S-42: color: 333 → #333 */

/* 슬라이더 카드 크기·화살표 위치는 원래 그대로 둔다 — 카드를 크게 해 세 번째 카드가 오른쪽 가림막(.academyContainer2)에
   잘려 보이게 한 것이 의도된 배치다(2026-10-20 확인). 사진은 비율을 지켜 칸을 채우고(결정 4), 글자 카드와 높이를 맞춘다. */
#main #main2 .academy .academyList dl dd ul li a img {height: 250px; object-fit: cover;}
@media screen and (max-width: 1500px) {
  #main #main2 .academy .academyList dl dd ul li a img {height: 238px;}
}
@media screen and (max-width: 1260px) {
  #main #main2 .academy .academyList dl dd ul li a img {height: 220px;}
}
/* 넘김(index.php 스크립트): 위치는 transform 으로 움직이고 효과(transition)는 스크립트가 정한다.
   손가락으로 가로로 밀면 슬라이드가 받고 세로 스크롤은 그대로 */
#main #main2 .academy .academyList dl dd ul.slider {transition: none; will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-select: none;}
#main #main2 .academy .academyList dl dd ul.slider img {-webkit-user-drag: none;}
/* 지점 탭을 바꾸면 카드 줄이 살짝 떠오르며 나타난다 */
@keyframes academyCardsIn {
  from {opacity: 0; transform: translateY(12px);}
  to {opacity: 1; transform: none;}
}
#main #main2 .academy .academyList dl dd:not(.hidden) {animation: academyCardsIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
/* 글자 카드(이미지 없는 과정): 가운데 정렬, 3줄까지 */
#main #main2 .academy .academyList dl dd ul li a .lecture_text {display: flex; align-items: center; justify-content: center; padding: 20px 24px; box-sizing: border-box;}
#main #main2 .academy .academyList dl dd ul li a .lecture_text p {text-align: center; word-break: keep-all; overflow-wrap: break-word; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

/* 공지 블록: 취업정보 칸이 빠졌으므로 공지가 줄 전체를 쓴다 */
#main #main4 .mainBoard .notice {width: 100%; margin-right: 0;}
#main #main4 .mainBoard .notice dl {width: 100%;}
#main #main4 .mainBoard .notice dl dt {flex: 1; width: auto; min-width: 0;}
#main #main4 .mainBoard .notice dl dd {flex: 0 0 auto; width: auto; float: none; padding-left: 20px;}
#main #main4 .mainBoard .moreBtn:hover {font-weight: 500;} /* S-42: font-weight: medium → 500 */


/* ===== 학원소개(intro) — S-37 이미지가 본문 폭을 넘지 않게 ===== */
#greeting .intro img {display: block; max-width: 100%; height: auto; margin: 0 auto;}


/* ===== 학원특징(feature) — 카드 가로 간격을 세로 간격(26~30px)과 같게 ===== */
#feature .content .row {justify-content: flex-start; gap: 26px;}
#feature .content .row .strength {flex: 1 1 0; width: auto; min-width: 0;}


/* ===== 교육과정(curriculum) — 줄바꿈되는 항목도 왼쪽 정렬, '-' 뒤로 들여쓰기 ===== */
#curriculum .content table {width: 100%;} /* 58vw 고정 → 본문 폭 */
#curriculum .content table tr td ul li {text-align: left; padding-left: 0.8em; text-indent: -0.8em;}


/* ===== 학원안내·교육센터(academy) — S-35 / V-21 지도·정보·교통 상자를 본문 폭 안에 ===== */
#academy .content .map {width: 100%; height: 450px;} /* #map0·#map1 1036px 고정 대체, 3번째 지도부터 높이 0 이던 것 포함 */
#academy .content .information,
#academy .content .academy_btm {width: 100%; max-width: 100%; box-sizing: border-box;}
/* 교통 상자와 사진 슬라이더를 반씩 (bxSlider 가 .photo 를 .bx-wrapper 로 감싸므로 그쪽이 flex 항목) */
#academy .content .academy_btm > .traffic {flex: 0 0 calc(50% - 10px); margin-right: 20px; min-width: 0;}
#academy .content .academy_btm > .bx-wrapper {flex: 1 1 0; min-width: 0;}
#academy .content .academy_btm .photo img {object-fit: cover;}
#academy .content .academy_btm > .traffic:last-child {flex: 1 1 auto; margin-right: 0;} /* 사진이 없는 지점: 교통 상자가 줄 전체 */ /* 사진 높이 고정(330/400px)이라 비율 유지 */


/* ===== 수강신청 카드(course) — V-34 사진 비율 유지, V-35 글자 카드 정렬 통일 ===== */
#course .content .lecture img,
#course .content .lecture .lecture_text {display: block; height: 187.5px; max-height: none; box-sizing: border-box;}
#course .content .lecture img {object-fit: cover;}
#course .content .lecture .lecture_text {display: flex; align-items: center; justify-content: center; padding: 0 20px; font-family: inherit;}
#course .content .lecture .lecture_text p {text-align: center; word-break: keep-all; overflow-wrap: break-word; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
/* 과정 상세의 글자 카드도 같은 정렬 */
#courseView .content .lecture .courseLeft .lecture_text {justify-content: center; padding: 0 30px; box-sizing: border-box;}
#courseView .content .lecture .courseLeft .lecture_text p {text-align: center; word-break: keep-all; overflow-wrap: break-word; line-height: 1.35;}


/* ===== 회원 화면 — D3 버튼(주 #0091db·보조 흰 바탕 #ccc 선, 모서리 5px, 높이 40px) ===== */
/* 로그인 · 회원정보 찾기 */
#login .content .button .btn {height: 40px; border-radius: 5px; font-size: 16px;}
#login .content .button .login {border-color: #0091db; background: #0091db; color: #fff;}
#login .content .button .login:hover {border-color: #0277a5; background: #0277a5;}
#login .content .button .joinMember {border-color: #ccc; background: #fff; color: #333;}
#login .content .button .joinMember:hover {border-color: #0091db; color: #0091db;}

/* 약관 동의(joinStep) — S-29 absolute 로 떠 있던 '확인' 버튼을 흐름 안 가운데로 */
#joinStep .join_btn {position: static; transform: none; width: 220px; margin: 60px auto 100px; padding: 0; background: none; border-radius: 0; text-align: center; cursor: default;}
#joinStep .join_btn:hover {background: none;}
#joinStep .join_btn button {width: 220px; height: 40px; border-radius: 5px; background: #0091db; color: #fff; font-size: 16px; font-weight: 600;}
#joinStep .join_btn button:hover {background: #0277a5;}
#joinStep .join_checkbox label {cursor: pointer;}
#joinStep .join_checkbox input {vertical-align: middle; margin-left: 4px;}

/* 회원가입 · 회원정보 수정(joinMember · joinEditStep · joinEdit 같은 틀) */
#joinMember .content h1 {font-weight: 700;}
#joinMember .content select,
#joinMember .content select option {color: #333;} /* 비활성처럼 보이던 #777 → #333 */
#joinMember .content button {width: 220px; height: 40px; margin: 60px auto 0; border: 1px solid #0091db; border-radius: 5px; line-height: 38px; background: #0091db; color: #fff;}
#joinMember .content button:hover {border-color: #0277a5; background: #0277a5; color: #fff;}
/* 아이디 '중복확인'(입력칸 높이 50px 에 맞춘 보조 버튼) */
#joinMember .content input[type='button'] {border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #333; box-sizing: border-box;}
#joinMember .content input[type='button']:hover {border-color: #0091db; background: #fff; color: #0091db;}

/* 나의 수강신청 내역(mypage) — 미리보기에서는 F-02 로 빈 화면, CSS 만 반영 */
#mypage .content h1 {font-weight: 700;}
#mypage .content .btn button {height: 40px; padding: 0 15px; border-radius: 5px; font-size: 16px;}
#mypage .content .list {border-color: #ccc; color: #333;}
#mypage .content .list:hover {border-color: #0091db; background: #fff; color: #0091db;}
#mypage .content .edit {background: #0091db; color: #fff;}
#mypage .content .edit:hover {border-color: #0277a5; background: #0277a5;}
#mypage .content .btn button a {display: block; line-height: 38px;}