/* ==========================================================
   khrd.kr 모바일 보정 (2026-11-04)
   기존 Tailwind 화면 위에 덮어쓰는 휴대폰 전용 규칙만 모아둠
   ========================================================== */
@media (max-width:1023px){
  /* 서브 왼쪽 메뉴 → 가로 스크롤 탭 */
  aside.lg\:w-\[260px\]{padding-bottom:18px !important}
  aside.lg\:w-\[260px\] > div{position:static !important;border-radius:14px !important;box-shadow:none !important}
  aside.lg\:w-\[260px\] > div > div.bg-slate-900{display:none !important}
  aside.lg\:w-\[260px\] > div > :not(nav):not(.bg-slate-900){display:none !important}
  aside.lg\:w-\[260px\] nav{flex-direction:row !important;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  aside.lg\:w-\[260px\] nav::-webkit-scrollbar{display:none}
  aside.lg\:w-\[260px\] nav > a{flex:none;white-space:nowrap;border-right-width:0 !important;padding:9px 14px !important;border-radius:999px;font-size:14px !important;gap:6px !important;border:1px solid #e2e8f0 !important}
  aside.lg\:w-\[260px\] nav > a > span{gap:6px !important}
  aside.lg\:w-\[260px\] nav > a.text-amber-600{background:#fff7e6 !important;border-color:#f59e0b !important}
  aside.lg\:w-\[260px\] nav > div, aside.lg\:w-\[260px\] nav ul{display:none !important}
}
@media (max-width:767px){
  /* 서브 제목 + 위치표시 : 세로로 쌓기 */
  .flex.justify-between.border-b-2.border-slate-900{flex-direction:column;align-items:flex-start;gap:6px}
  .flex.justify-between.border-b-2.border-slate-900 > h2{white-space:nowrap}
  .flex.justify-between.border-b-2.border-slate-900 > div{font-size:12px;white-space:nowrap;flex-wrap:wrap}
  .flex.justify-between.items-center.mb-5 > p.text-sm.text-slate-500{white-space:nowrap;flex:none;margin-right:10px}

  /* 메인 바로가기 4칸 */
  p.text-\[18px\].font-bold.text-slate-800{font-size:16px !important;white-space:nowrap}

  /* 메인 분야 아이콘 */
  a > div.group.rounded-\[24px\]{padding:14px 4px !important;border-radius:18px !important}
  a > div.group.rounded-\[24px\] > span{font-size:12.5px !important;white-space:nowrap;letter-spacing:-.04em;margin-top:10px !important}
  a > div.group.rounded-\[24px\] i{font-size:34px !important}

  /* 합격후기 과정 꼬리표 */
  .h-10.px-4.rounded-2xl{white-space:nowrap;padding:0 10px !important;height:30px !important;border-radius:10px !important;font-size:11px !important}
  .h-10.px-4.rounded-2xl + span, .h-10.px-4.rounded-2xl + span span{white-space:nowrap}
  img.w-20.h-20.grayscale{display:none}

  /* 5단계 합격 시스템 */
  .grid:has(> .step-card){padding:16px !important;gap:10px !important}
  .step-card{aspect-ratio:auto !important;border-radius:16px !important;padding:16px 8px !important}
  .step-card:last-child{grid-column:1/-1}
  .step-card .step-icon-box{margin-bottom:8px !important}
  .step-card .step-icon-box i{font-size:26px !important}
  .step-card .step-label{font-size:11px !important;white-space:nowrap}
  .step-card .step-name{font-size:15px !important;white-space:nowrap}

  /* 푸터 메뉴 */
  footer nav{flex-wrap:wrap;column-gap:16px !important;row-gap:8px}
  footer nav a{white-space:nowrap}
}

/* ── 메인 히어로: 배너 권장 사이즈(PC 1420×852 / 모바일 1080×648) 비율로 높이 고정 ── */
.grid > div.rounded-\[16px\].border-2.border-slate-200:first-child{aspect-ratio:1420/852;height:auto;align-self:start}

/* ── 모바일·태블릿: 메인 로그인 박스 숨김 (상단 로그인·회원가입 버튼 사용) ── */
@media (max-width:1279px){
  div.min-h-\[412px\].bg-slate-900{display:none !important}
}
@media (max-width:767px){
  /* 상단 로고 줄 */
  .max-w-\[1400px\].py-7.justify-between.gap-8{padding:12px 14px !important;gap:8px !important}
  a.shrink-0.group.pl-\[20px\]{padding-left:0 !important}
  a.shrink-0.group.pl-\[20px\] > span{font-size:25px !important}
}
@media (max-width:380px){
  a.shrink-0.group.pl-\[20px\] > span{font-size:22px !important}
  .khrd-mauth a{padding:0 9px !important}
}

/* ── 모바일: 분야별 과정·교수진 2개씩 ── */
@media (max-width:639px){
  .crsSwiper swiper-slide > div > div.p-5{padding:11px !important}
  .crsSwiper h4{font-size:14.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px !important}
  .crsSwiper h4 + p{font-size:10.5px !important;margin-bottom:9px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crsSwiper p.text-\[12px\].font-bold{font-size:11px !important;margin-bottom:3px !important;white-space:nowrap}
  .crsSwiper .border-t{font-size:11px !important;padding-top:8px !important;white-space:nowrap}
  .crsSwiper .grid.grid-cols-2{gap:5px !important;margin-top:9px !important}
  .crsSwiper .grid.grid-cols-2 > *{padding:7px 0 !important;font-size:12px !important;letter-spacing:-.04em;white-space:nowrap}
  .teacherSwiper{padding:14px 6px 36px !important}
  .teacherSwiper swiper-slide{padding:4px !important}
  .teacherSwiper .p-6.pt-20{padding:40px 10px 12px !important}
  .teacherSwiper h3{font-size:16px !important;white-space:nowrap}
  .teacherSwiper h3 span{font-size:11px !important}
  .teacherSwiper p.text-xs{font-size:9px !important;letter-spacing:.02em !important;white-space:nowrap}
}
@media (max-width:639px){
  /* 분야별 과정 줄 제목 한 줄로 */
  h3.flex.items-center.gap-2\.5.text-\[21px\]{font-size:18px !important;white-space:nowrap;letter-spacing:-.05em}
}
@media (max-width:767px){
  /* 모바일 원격지원 숨김 */
  a[href*="367.co.kr"]{display:none !important}
}