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

@media screen and (max-width: 1024px) {
  /* 데스크톱의 좌우 960 × 925 패널을 위아래로 쌓되,
     공통 타이틀 자리 중 130px 만큼 겹쳐 고등 영역 위에 82px 여유를 남김. */
  .body-wrap .main-body.gallery {
    min-width: 0;
    aspect-ratio: 1920 / 3440; /* 925 + 925 - 130 = 1720 */
    background:
      url("../images/bg-left.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% 53.7791% no-repeat,
      linear-gradient(180deg, #0a1c3c 0%, #3d5988 50%, #2c3653 100%) left bottom / 100% 53.7791% no-repeat;
  }
  .body-wrap .main-body.gallery .contents {
    padding: 0;
  }

  .body-wrap .main-body.gallery .gh-title-box {
    top: 3.2558%; /* 56 / 1720: 기존 36px 에서 20px 아래로 */
  }
  /* 상단 타이틀 이미지(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 {
    top: 12.3256%; /* 212 / 1720 */
    width: 100%;
  }
  .body-wrap .main-body.gallery .gh-sub-title--right {
    top: 58.5465%; /* (925 - 130 + 212) / 1720 */
    width: 100%;
  }

  .body-wrap .main-body.gallery .gh-books {
    left: 50%;
    width: 55.5562%; /* 533.34 / 960 */
  }
  .body-wrap .main-body.gallery .gh-books--row1 {
    top: 20.436%; /* 351.5 / 1720 */
  }
  .body-wrap .main-body.gallery .gh-books--row2 {
    top: 36.8023%; /* 633 / 1720 */
  }

  .body-wrap .main-body.gallery .gh-subjects {
    top: 70.1163%; /* (925 - 130 + 411) / 1720 */
    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; /* 0 2px 4px */
  }
}