@charset "utf-8";
/* gallery-bg.css 공통 규칙을 1024px 이하에서만 재배치한다.
   실제 로드 순서: web.css 또는 mobile.css → gallery-bg.css → 이 파일

   [BHQI-1535 3차] 교체된 배경(각 1920×2160)은 기존(1850)보다 위로 310px(2x) 확장돼
   GNB 영역을 포함한다. 설계 단위(1x): 패널 높이 925 → 1080 (상단 +155 = GNB 존).
   모바일은 좌/우 패널을 상하로 쌓되, 아래(고등) 패널의 상단 155px 은 배경 연출뿐이라
   겹침을 130 → 285(=130+155) 로 늘려 콘텐츠 리듬(고등 영역 위 82px 여유)을 유지한다.

   [BHQI-1535 4차 · 2026-08-14 20:15] 모바일 전용: 세로가 더 긴 bg-left(1배수 962×1186,
   비율 1186/962≈1.2328)를 새로 받았다. 데스크톱(gallery-bg.css)은 2배수 bg-left.png를
   그대로 쓰므로 건드리지 않고, 이 @media 안에서만 top 패널 이미지를 bg-left-mobile.png 로
   교체해 렌더링 세로 공간을 늘린다. 새 이미지는 선반 2개의 "이미지 하단 기준" 위치는
   기존과 동일하고 상단에만 여백이 추가돼 있어(실측 확인: 선반이 이미지 하단에서 같은 거리),
   상단(중학) 영역의 세로 공간만 길어지고 표지는 새 선반 위에 그대로 얹힌다.
     top 패널 높이 = 960 × 1186/962 = 1183.5 (기존 1080 대비 +103.5)
     프레임 높이 = 1183.5 + 1080 - 285 = 1977.5  (aspect 1920/3955)
     하단 패널 시작 = 1977.5 - 1080 = 897.5 (기존 795 대비 +103.5, 겹침 285 유지) */

@media screen and (max-width: 1024px) {
  .body-wrap .gh-featured-hero {
    min-width: 0;
    aspect-ratio: 1920 / 3955; /* 960 × 1977.5 (1x) */
    background:
      url("../images/bg-left-mobile.png") left top / 100% auto no-repeat,
      url("../images/bg-right.png") left bottom / 100% auto no-repeat,
      linear-gradient(180deg, #0a1c3c 0%, #3d5988 50%, #2c3653 100%) left top / 100% 59.85% no-repeat,
      linear-gradient(180deg, #0a1c3c 0%, #3d5988 50%, #2c3653 100%) left bottom / 100% 54.56% no-repeat; /* top 1183.5 / bottom 1080 ÷ 1977.5 */
  }
  /* 모바일은 GNB 존(+155)이 상단 패널 안에 포함되므로 섹션이 래퍼 전체를 채운다
     (PC 처럼 하단 정렬 + 1850 프레임이 아님 — 좌표는 아래에서 1977.5 기준으로 재배치) */
  .body-wrap .main-body.gallery {
    min-width: 0;
    aspect-ratio: 1920 / 3955;
  }
  .body-wrap .main-body.gallery .contents {
    padding: 0;
  }

  .body-wrap .main-body.gallery .gh-title-box {
    top: 10.67%; /* 211 / 1977.5 : GNB~타이틀 간격(px)은 유지, 늘어난 세로 공간은 타이틀 아래로 */
  }
  /* 상단 타이틀 이미지(txt.png 설계 837px)를 모바일 프레임(폭 960) 기준으로 확대 */
  .body-wrap .main-body.gallery .gh-title-img {
    width: 87.1875%; /* 837 / 960 */
  }

  .body-wrap .main-body.gallery .gh-sub-title {
    left: 50%;
  }
  /* 모바일은 좌/우 패널이 상하로 쌓여 각 패널이 섹션 폭 전체(100%)를 차지하므로
     캔버스(패널 폭 전체) 이미지도 100%로 채운다 */
  .body-wrap .main-body.gallery .gh-sub-title--left {
    /* [BHQI-1535 · 2026-08-14 21:06 김국진] 모바일 좌측(중학) 서브 타이틀:
       top 을 -3% 낮춰 20.93% 로, 렌더링 크기를 1.3배로 확대.
       width 는 100% 유지하고 scale(1.3) 으로 실제 렌더 크기만 키운다.
       base .gh-sub-title 의 translateX(-50%) 를 유지해야 가로 중앙 정렬이 보존되므로
       transform 을 재선언해 함께 지정하고, transform-origin: top center 로
       top(20.93%) 을 상단 앵커로 고정해 아래로만 커지게 한다. */
    top: 20.93%; /* 기존 23.93% 에서 -3% */
    width: 100%;
    transform: translateX(-50%) scale(1.3);
    transform-origin: top center;
  }
  .body-wrap .main-body.gallery .gh-sub-title--right {
    /* [BHQI-1535 · 2026-08-14 21:28 김국진] 모바일 우측(고등) 서브 타이틀도
       렌더링 크기를 1.3배로 확대(좌측과 동일 처리). top(64%)·width(100%)는 유지하고
       base .gh-sub-title 의 translateX(-50%) 를 재선언해 가로 중앙 정렬을 보존하며,
       transform-origin: top center 로 top 을 상단 앵커로 고정해 아래로만 커지게 한다. */
    top: 64%; /* (897.5 + 367) / 1977.5 : 하단 패널 시작 기준 오프셋 유지 */
    width: 100%;
    transform: translateX(-50%) scale(1.3);
    transform-origin: top center;
  }

  .body-wrap .main-body.gallery .gh-books {
    left: 50%;
    width: 56.5562%; /* [BHQI-1751] 선반 위 표지 묶음을 1%p 확장 */
  }
  .body-wrap .main-body.gallery .gh-books--row1 {
    /* [BHQI-1751] 윗줄만 설계 폭 960px 기준 2px 더 내려 선반과의
       잔여 틈을 없앤다. 아랫줄 좌표는 이미 맞으므로 변경하지 않는다. */
    top: 62.8333cqw;
  }
  .body-wrap .main-body.gallery .gh-books--row2 {
    /* 윗줄과 같은 2px 보정을 적용해 두 선반의 표지-선반 높이를 동일하게 유지한다. */
    top: 91.546cqw;
  }

  .body-wrap .main-body.gallery .gh-subjects {
    top: 74.06%; /* (897.5 + 566) / 1977.5 : 하단 패널 시작 기준 오프셋 유지 */
    left: 50%;
    row-gap: 2.0833cqw; /* 20 / 960 */
    width: 78.125%; /* 750 / 960 */
  }
  .body-wrap .main-body.gallery .gh-subject-card {
    border-width: 0.1042cqw; /* 1 / 960 */
  }
  .body-wrap .main-body.gallery .gh-subject-card span {
    font-size: 2.5cqw; /* 24 / 960 */
  }
  .body-wrap .main-body.gallery .gh-subject-card:hover {
    /* box-shadow: 0 0.2083cqw 0.4167cqw 0 #58a0fe; */ /* [BHQI-1535 3차] 주석처리 — scale 효과로 대체(gallery-bg.css) */
  }
}

/* 720px 미만: 모바일 헤더(mobile.css의 소형 레이아웃)가 설계 GNB 존보다 비율상 높아
   타이틀과 간격이 10px 수준까지 좁아진다. 타이틀 블록만 소폭 내려 여백을 확보한다.
   (표지·선반 정렬은 배경 좌표에 묶여 있으므로 건드리지 않는다 — 픽셀 실측 기반 보정) */
@media screen and (max-width: 719px) {
  .body-wrap .main-body.gallery .gh-title-box {
    top: 13.08%; /* 258.75 / 1977.5 : 소형 헤더 보정(기존 258.75px 유지) */
  }
}