/* 진로숲 홈페이지(PC판) 화면 폭 보정 — 원래 디자인 파일은 그대로 두고 여기서만 고침
 * 휴대폰·태블릿(1023px 이하)은 jb/device.js 가 휴대폰판(m/)으로 보내므로, 여기는 주로 PC 화면용입니다. */

/* 모든 PC 화면: 들어오며 움직이는 효과(걸어온 길 등) 때문에 생기는 가로 스크롤 막기 */
#container { overflow-x: clip; }

/* 상단 큰 사진(메인 슬라이드·각 페이지 배너): 화면 끝까지 꽉 차지 않게 머리말의 로고 시작점 ~ 메뉴(≡) 끝 폭에 맞춤
 * jb-banner 표시는 jb/layout.js 가 배경 사진이 있는 상단 칸에만 붙임 (본문으로 시작하는 페이지는 제외) */
@media all and (min-width: 1300px) {
  #container .contents > .row.jb-banner {
    width: auto !important; max-width: none !important;
    margin-left: 280px !important; margin-right: 250px !important;
    border-radius: 16px; overflow: hidden;
  }
}
@media all and (min-width: 1024px) and (max-width: 1299px) {
  #container .contents > .row.jb-banner {
    width: auto !important; max-width: none !important;
    margin-left: calc(3vw + 20px) !important; margin-right: 3vw !important;
    border-radius: 12px; overflow: hidden;
  }
}
/* 페이지 배너는 제목 글자가 사진 안에 그려진 경우가 많음 → 사진 비율(1810:450, 약 0.25) 그대로 줄여 글자가 잘리지 않게.
 * 높이 = 배너 폭 × 0.25, 너무 낮아지지 않게 최소 240px, 원래 높이 450px 넘지 않게
 * (메인 슬라이드, 글자가 사진 위에 얹힌 배너는 원래 높이 유지) */
@media all and (min-width: 1300px) {
  #container .contents > .row.jb-banner:not(.jb-banner-slide):not(.jb-banner-text) {
    height: clamp(240px, calc((100vw - 545px) * 0.2486), 450px) !important;
  }
}
@media all and (min-width: 1024px) and (max-width: 1299px) {
  #container .contents > .row.jb-banner:not(.jb-banner-slide):not(.jb-banner-text) {
    height: clamp(240px, calc((94vw - 35px) * 0.2486), 450px) !important;
  }
}
@media all and (min-width: 1024px) {
  #container .contents > .row.jb-banner:not(.jb-banner-slide):not(.jb-banner-text) {
    min-height: 0 !important; background-size: cover !important; background-position: left center !important;
  }
  #container .contents > .row.jb-banner:not(.jb-banner-slide):not(.jb-banner-text) > * { height: 100% !important; min-height: 0 !important; }
}

/* 페이지 중간의 큰 배경 사진 칸(jb-band, jb/layout.js 가 표시)도 같은 폭으로. 안쪽 글 상자는 이 폭에 맞춰 줄어듦 */
@media all and (min-width: 1300px) {
  #container .jb-band {
    width: auto !important; max-width: none !important;
    margin-left: 280px !important; margin-right: 250px !important;
    border-radius: 16px; overflow: hidden; box-sizing: border-box;
  }
}
@media all and (min-width: 1024px) and (max-width: 1299px) {
  #container .jb-band {
    width: auto !important; max-width: none !important;
    margin-left: calc(3vw + 20px) !important; margin-right: 3vw !important;
    border-radius: 12px; overflow: hidden; box-sizing: border-box;
  }
}

/* 사진 칸 안쪽 상자가 줄어든 칸에 맞도록 */
@media all and (min-width: 1024px) {
  #container .jb-band .container { box-sizing: border-box !important; max-width: 100% !important; }
  #container .jb-band .education-section .inner { gap: 40px !important; max-width: 100% !important; box-sizing: border-box; }
  #container .jb-band .education-section .inner > * { min-width: 0 !important; flex-shrink: 1 !important; }
  #container .jb-band .education-section .inner img { max-width: 100% !important; height: auto !important; }
  #container .jb-band-host { background: none !important; }
  /* 사진 칸 안의 글·카드가 가장자리에 붙지 않게 안쪽 여백 (칸 폭이 줄어든 만큼) */
  #container .jb-band:not(.reveal-box) { position: relative; }
  #container .jb-band { padding-left: clamp(28px, 3.5vw, 64px) !important; padding-right: clamp(28px, 3.5vw, 64px) !important; }
  #container .jb-band > *, #container .jb-band .container, #container .jb-band .inner { max-width: 100% !important; box-sizing: border-box !important; }
  #container .jb-band.reveal-box .reveal-content { width: 100% !important; box-sizing: border-box !important; }
  #container .jb-band.reveal-box .Point2 { flex-wrap: wrap; gap: 10px; }
  /* 함께하는 사람들 > 이사장 인사말 카드: 사진 칸 안쪽에 여백을 두고 가운데로 */
  #container .jb-band .director-box { width: auto !important; max-width: calc(100% - 2 * clamp(28px, 3.5vw, 64px)) !important; margin: 0 auto !important; box-sizing: border-box; }
  #container .jb-band .director-box .info { min-width: 0 !important; flex: 1 1 0 !important; }
  /* 사진 칸끼리 바로 붙지 않게 */
  #container .jb-band + .jb-band, #container .jb-band-host + .jb-band { margin-top: 24px !important; }
  /* 우리의 생각: 사진 상자(580px 고정)를 칸 폭에 맞추고, 제목 글자도 칸에 맞게 */
  #container .education-section .education-image { flex: 0 1 45% !important; min-width: 0 !important; }
  #container .education-section .education-content { flex: 1 1 0 !important; min-width: 0 !important; }
  #container .education-section .education-image .image-box { width: 100% !important; max-width: 580px; }
  #container .education-section .education-content h2 { font-size: clamp(28px, 2.6vw, 45px) !important; word-break: keep-all; }
  #container .education-section .education-content p { font-size: clamp(16px, 1.3vw, 20px) !important; word-break: keep-all; }
}

/* 메인 '함께 만드는 현장': 사진 목록을 왼쪽으로 당겨 3장이 온전히 들어가게 (jb/layout.js 와 함께) */
@media all and (min-width: 1024px) {
  #container .col__1485585__ { padding-left: 120px !important; padding-right: 40px !important; box-sizing: border-box; }
}

/* 게시판 분류 단추(ALL·포럼 및 행사 …): 화면 왼쪽 끝에 붙지 않고 글 목록(1280px)과 같은 줄에서 시작 */
@media all and (min-width: 1024px) {
  #jb-board .st_cate_list_wrap { max-width: 1280px; width: auto !important; margin: 0 auto 20px !important; padding: 0 !important; box-sizing: border-box; }
  #jb-board .st_cate_list { margin-left: 0 !important; width: auto !important; }
}

/* 메인 첫 화면 슬라이드: 조작 버튼(‹ 1/2 › 진행막대)이 아래에서 170px 고정이라
 * 화면 폭 1520px 미만에서는 가운데 정렬된 글과 겹침 → 글 바로 아래(가운데 + 115px)로 */
@media all and (min-width: 1024px) and (max-width: 1519px) {
  .slide__1401715__ .owl-nav,
  .slide__1401715__ ~ .slide_num__1401715__,
  .slide__1401715__ ~ .slide_control__1401715__,
  .slide_num__1401715__,
  .slide_control__1401715__ { top: calc(50% + 115px) !important; bottom: auto !important; }
  .slide_progress__1401715__ { top: calc(50% + 124px) !important; bottom: auto !important; }
}

/* 작은 노트북 화면(1024~1299px) */
@media all and (min-width: 1024px) and (max-width: 1299px) {
  /* 머리말: 좌우 250px 고정 여백 때문에 메뉴가 두 줄로 떨어지던 것 */
  #header .inner_left { margin-left: 3vw !important; }
  #header .inner_right { margin-right: 3vw !important; }

  /* 게시글 읽기 상자(1280px 고정) */
  .st_mybd_view,
  .st_album_view_wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

  /* 메인: 공지 제목 줄의 음수 여백, 오른쪽 바로가기 카드(490px 고정) */
  .col__1495875__ > div { margin-right: 0 !important; }
  .col__1495895__ { width: auto !important; max-width: 100%; }
  .col__1495895__ a.btn { width: auto !important; margin-left: 0 !important; box-sizing: border-box; }

  /* 재단소개 > 우리의 생각: 사진 + 글 두 칸 */
  .education-section .inner { gap: 40px !important; }
  .education-section .inner > * { min-width: 0; }
  .education-section .inner img { max-width: 100%; height: auto; }

  /* 교육과 멘토링: 참가 후기(사진 630px + 상자 630px 고정) */
  .review-left, .review-right { width: auto !important; flex: 1 1 0 !important; min-width: 0; }
  .review-left img { width: 100% !important; height: auto !important; }
  .review-box { width: 100% !important; }
}