@charset "utf-8";
/* ============================================================================
   gallery-bg.css  |  .main-body.gallery  중고등 교과서 히어로

   이 파일 전체가 신규 추가분. web.css 등 원본 CSS 는 수정하지 않음.
   web.css 값을 덮어야 하는 곳은 같은 특이도의 선택자를 여기에 다시 쓰고,
   이 파일이 web.css 뒤에 로드되는 것으로 우선순위를 확보함.
   신규 클래스는 모두 gh- 접두사 (web.css 에 0건인 것 확인).

   ── 단위 규칙 ─────────────────────────────────────────────────────────────
   피그마 설계 프레임 : 가로 1920 / 세로 925  (= 1920 × 1850/3840)
   배경이 aspect-ratio 로 화면 폭에 비례해 스케일되므로 위에 얹는 요소도
   전부 비례 단위로 둬야 시안 비율이 유지됨. px 고정은 금지.

   기준은 전부 "섹션 폭" 하나. 배경의 background-size:50% 와 같은 기준이라
   배경과 그 위 요소가 항상 함께 움직임.

     가로 위치·크기   %       → 섹션 폭 기준       px / 1920 × 100
     세로 위치(top)   %       → 섹션 높이 기준     px /  925 × 100
     마진             %       → 섹션 폭 기준       px / 1920 × 100
     line-height      무단위   → font-size 배수     65 / font-size
     font-size        cqw     → 섹션 폭 기준       px / 1920 × 100

   ※ font-size 에 % 는 못 씀(부모 글자 크기 기준이 되어 의미가 달라짐).
      vw 도 안 됨 — vw 는 스크롤바를 포함한 뷰포트 폭이라 배경(%)과 어긋남.
      섹션 폭을 참조하는 단위는 cqw 뿐이라, 섹션에 container-type:inline-size 를
      선언하고 cqw 를 씀. 앞줄의 vw 는 구형 브라우저용 폴백.
   ============================================================================ */

/* ---------- 1. 배경 ----------
   [피그마] BG 1920 × 1050 / Opacity 100% / Clip content
   Fill 스택 (위 = 앞)
     000000           숨김 상태 → 미반영
     Linear (다크)     0A1C3C 0% / 3D5988 50% / 2C3653 100%  ← 실제로 보이는 배경
     Linear (라이트)   B3E6FF 0% / D9F2FF 35% / B3E6FF 100%  ← 다크에 가려 안 보임
     42D3FF                                                  ← 다크에 가려 안 보임
   그라데이션 핸들 3개가 수직 일직선 → CSS 180deg (위→아래)

   좌우 이미지 (각 1920 × 1850)
   - background-size 의 세로를 auto 로 두면 원본 비율이 유지됨 (찌그러짐 없음)
   - 가로 50% → 높이 = 0.5W × (1850/1920) = 0.4818W
     aspect-ratio 3840/1850 → 섹션 높이 = 0.4818W  ← 값이 같아 빈틈/잘림 없이 일치
   - background 는 먼저 쓴 것이 위에 깔림 → 이미지가 그라데이션 위
   - 그라데이션은 고유 비율이 없어 어떤 해상도/배율에서도 잘리지 않음 */
.body-wrap .main-body.gallery {
  /* 이 섹션을 컨테이너로 선언 → 자식이 cqw 단위로 "섹션 폭"을 참조할 수 있게 됨.
     배경의 50% 와 완전히 같은 기준이라 글자와 배경이 반드시 함께 움직임 */
  container-type: inline-size;
  /* 기존 .header-inner 의 min-width:1300px 과 동일한 하한 → 사이트 전체가 같은 지점에서 멈춤.
     배경(50%) / 표지(%) / 위치(%) / 글자(cqw) 가 모두 이 섹션 폭 하나에서 계산되므로
     여기서 폭이 고정되면 전부 함께 멈춤 (어긋나지 않음) */
  min-width: 1300px;
  aspect-ratio: 3840 / 1850;
  background:
    url("../images/bg-left.png") left top / 50% auto no-repeat,
    url("../images/bg-right.png") right top / 50% auto no-repeat,
    linear-gradient(180deg, #0a1c3c 0%, #3d5988 50%, #2c3653 100%);
}

/* web.css 의 min-height:700px + padding:100px 0 (합 900px) 가 섹션을 이미지보다
   높여 하단에 그라데이션이 드러나던 문제 해결.
   web.css 와 같은 특이도(0,5,0) + 뒤에 로드되어 덮어씀 */
.body-wrap .main-body.gallery .contents .gallery-intro {
  min-height: 0;
  padding: 0;
}

/* ---------- 2. 상단 타이틀 ----------
   [피그마]
     상단  SUIT SemiBold(600) / 30px / line-height 65px / letter-spacing -2% / #4A9EFF
     하단  SUIT Heavy(900)    / 58px / line-height 65px / letter-spacing -2% / #00BCE7
     타이틀 박스 top 36px / 두 텍스트 박스가 9px 겹침
   피그마의 letter-spacing % 는 em 과 같은 개념 → -2% = -0.02em

   섹션 높이는 aspect-ratio 가 정하므로, 흐름에 두면 섹션이 높아져
   하단 그라데이션이 드러남 → absolute 로 띄워 높이에 기여하지 않게 함 */
.body-wrap .main-body.gallery .gh-title-box {
  position: absolute;
  top: 3.8919%; /* 36 / 925 */
  left: 0;
  right: 0;
  text-align: center;
}
.body-wrap .main-body.gallery .gh-eyebrow,
.body-wrap .main-body.gallery .gh-title {
  font-family: "SUIT", "Pretendard", "Noto Sans KR", sans-serif;
  letter-spacing: -0.02em;
}
/* line-height 를 무단위 배수로 두면 font-size 에 자동 연동되어
   두 줄 모두 실제 65px 이 유지됨 */
/* vw 는 폴백(구형 브라우저용). cqw 를 아는 브라우저는 뒤 선언으로 덮어씀.
   vw = 뷰포트 폭 기준 → 스크롤바 포함이라 배경(%)과 미세하게 어긋남
   cqw = 섹션 폭 기준  → 배경의 50% 와 완전히 동일한 기준 */
.body-wrap .main-body.gallery .gh-eyebrow {
  font-size: 1.5625vw;
  font-size: 1.5625cqw; /* 30 / 1920 */
  line-height: 2.1667; /* 65 / 30 */
  font-weight: 600;
  color: #4a9eff;
}
/* CSS 블록 요소는 흐름상 겹칠 수 없으므로 피그마의 9px 겹침을 음수 마진으로 재현.
   마진의 % 는 섹션 폭 기준이라 -9 / 1920 */
.body-wrap .main-body.gallery .gh-title {
  margin-top: -0.4688%; /* -9px */
  font-size: 3.0208vw;
  font-size: 3.0208cqw; /* 58 / 1920 */
  line-height: 1.1207; /* 65 / 58 */
  font-weight: 900;
  color: #fff;
}
/* web.css 의  h1~h6, strong, em { font-weight: bold }  이 상속(900)을 이기므로
   em 에 직접 900 을 다시 지정해야 Heavy 로 렌더링됨 */
.body-wrap .main-body.gallery .gh-title em {
  font-style: normal;
  font-weight: 900;
  color: #00bce7;
}

/* 상단 타이틀을 이미지(txt.png)로 교체. txt.png 1674 × 275 → 설계 837 × 137.5 (2x export).
   gh-title-box 의 text-align:center 로 가로 중앙 정렬됨 */
.body-wrap .main-body.gallery .gh-title-img {
  display: inline-block;
  max-width: none; /* web.css 의 img{max-width:max-content} 해제 */
  width: 43.5938%; /* 837 / 1920 */
  height: auto;
}

/* ---------- 3. 좌/우 섹션 타이틀 (이미지) ----------
   교체된 title-left.png 1920 × 348 / title-right.png 1920 × 308 는
   좌/우 패널(각 960 × 925 = 1920 × 1850 의 2x export) 폭 전체를 캔버스로 삼고
   그 안에 알약(pill) 라벨이 가로 중앙(캔버스 x=960)으로 정렬돼 있음.
   따라서 각 이미지를 자기 절반 패널 폭(=섹션 폭의 50%)에 꽉 채워 얹으면
   배경 50% 기준과 정확히 일치하며 알약이 각 절반의 정중앙에 놓임.
   width % + height auto 라 원본 비율이 그대로 유지됨 */
.body-wrap .main-body.gallery .gh-sub-title {
  position: absolute;
  /* web.css 의  img { max-width: max-content } 해제.
     그대로 두면 섹션이 3840px 을 넘는 순간 이미지만 성장을 멈추는데,
     background-size 는 max-width 영향을 안 받아 배경만 계속 커져 둘이 어긋남 */
  max-width: none;
  top: 22.9189%; /* 212 / 925 */
  height: auto;
  transform: translateX(-50%);
}
.body-wrap .main-body.gallery .gh-sub-title--left {
  left: 25%;
  width: 50%; /* 960 / 1920 (좌측 패널 전체 폭) */
}
.body-wrap .main-body.gallery .gh-sub-title--right {
  left: 75%;
  width: 50%; /* 960 / 1920 (우측 패널 전체 폭) */
}

/* ---------- 4. 우측 : 고등 진로·융합 선택 과목 10종 ----------
   교체된 과목 이미지(국어.png 등, 279 × 330 = 2x export)는 배경색·아이콘·라벨이
   한 장에 모두 포함된 완성 카드라 별도 <span> 라벨을 얹지 않는다.
   카드 설계 134px × 5개 + 간격 20px × 4개 = 그리드 폭 750px.
   우측 절반의 정중앙에 5열 × 2행으로 배치함. */
.body-wrap .main-body.gallery .gh-subjects {
  position: absolute;
  top: 44.4324%; /* 411 / 925 */
  left: 75%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 2.6667%; /* 20 / 750 */
  row-gap: 1.0417cqw; /* 20 / 1920 */
  width: 39.0625%; /* 750 / 1920 */
}
.body-wrap .main-body.gallery .gh-subject-card {
  position: relative;
  display: block;
  min-width: 0;
  border: 0.0521cqw solid transparent; /* 1 / 1920 */
  border-radius: 8.9552%; /* 12 / 134 */
  overflow: hidden;
  box-sizing: border-box;
}
.body-wrap .main-body.gallery .gh-subject-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* web.css 의 img{max-width:max-content} 해제 */
}
.body-wrap .main-body.gallery .gh-subject-card span {
  position: absolute;
  top: 67.9739%; /* 104 / 153 */
  left: 0;
  right: 0;
  color: #2e3878;
  font-family: "SUIT", "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 1.25cqw; /* 24 / 1920 */
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}
/* 카드 이미지가 배경색을 포함하므로 hover 배경(흰색)은 두지 않는다.
   (두면 이미지의 라운드 모서리 바깥으로 흰색이 삐져나옴) */
.body-wrap .main-body.gallery .gh-subject-card:hover {
  border-color: #529eff;
  box-shadow: 0 0.1042cqw 0.2083cqw 0 #58a0fe; /* 0 2px 4px */
}

/* ---------- 5. 좌측 : 중학 교과서 6종 ----------
   표지 이미지는 모두 321 × 411 동일 규격.
   다른 에셋과 같이 2x export 로 보고 설계 크기 산출 → 160.5 × 205.5
     표지 폭  160.5 / 1920 =  8.3594%
     간격      25.92 / 1920 =  1.35%
     ul 폭    160.5×3 + 25.92×2 = 533.34px → 27.7781%
   flex 의 gap % 는 컨테이너(ul) 폭 기준이므로 1.35 / 27.7781 × 100 = 4.8607% */
.body-wrap .main-body.gallery .gh-books {
  position: absolute;
  left: 25%; /* 좌측 절반 중앙 (서브 타이틀과 동일 기준) */
  transform: translateX(-50%);
  display: flex;
  gap: 4.8607%; /* 25.92px */
  width: 27.7781%; /* 표지 3권 + 간격 2개 = 533.34px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ▼ 선반에 맞출 때는 아래 두 곳의 38% 만 같은 값으로 바꾸면 됨.
      아랫줄이 76px 간격을 유지한 채 따라옴 */
.body-wrap .main-body.gallery .gh-books--row1 {
  top: 38%;
}
/* 아랫줄 = 윗줄 + 표지높이 + 76px
     표지 높이 205.5 / 925 = 22.2162%
     간격       76   / 925 =  8.2162%
                            ─────────
                              30.4324%   (top 의 % 는 섹션 높이 기준) */
.body-wrap .main-body.gallery .gh-books--row2 {
  top: calc(38% + 30.4324%);
}

.body-wrap .main-body.gallery .gh-books > li {
  flex: 1;
  min-width: 0;
}
/* a 를 block 으로 두어 클릭 영역이 표지 이미지와 정확히 일치하게 함
   (inline 이면 baseline 여백만큼 아래가 남아 영역이 어긋남) */
.body-wrap .main-body.gallery .gh-books a {
  position: relative;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* transition 을 :hover 가 아니라 기본 상태에 걸어야 올라갈 때와
   내려올 때가 모두 부드러움 (:hover 에만 걸면 내려올 때 툭 떨어짐).
   a 전체를 움직여 표지에 겹친 배지도 함께 따라가게 함.
   translateY 를 % 로 두면 링크 자신의 높이 기준이라
   화면 폭이 바뀌어도 떠오르는 정도가 비율대로 유지됨 (px 로 두면 안 됨) */
.body-wrap .main-body.gallery .gh-books img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* web.css 의 img{max-width:max-content} 해제 (원본 321px 에서 멈춤) */
  cursor: pointer;
}
.body-wrap .main-body.gallery .gh-books a:hover {
  transform: translateY(-6%);
}

/* 소비생활과 경제 표지 우측 하단 배지.
   원본 158px 은 2x export → 설계 79px, 표지 설계 폭 160.5px 의 49.2212%.
   표지 밖으로 살짝 내밀어 본문과 하단 로고를 과하게 가리지 않게 함. */
.body-wrap .main-body.gallery .gh-books .gh-book-badge {
  position: absolute;
  right: -16%;
  bottom: -4%;
  width: 49.2212%; /* 79 / 160.5 */
  height: auto;
}