/* ==========================================================================
   AONEWOOD 그누보드 서브 페이지 레이아웃 (body.aw-gnu)
   - theme/basic/inc/aw.assets.php 에서 마지막에 불러옵니다.
   1. 그누보드 기본 레이아웃 폭 해제 (default.css 의 1200px 고정폭 · 오른쪽 #aside)
   2. 서브 상단 (페이지 제목) — 투명 헤더가 올라가는 어두운 배경
   3. 본문 영역 — common.css 전역 스타일(h2 큰 제목, img block 등)이
      게시판·회원 스킨에 번지지 않도록 그누보드 기본값으로 되돌림
      ※ 스킨을 에이원우드 UI 로 새로 만들 때는 스킨 CSS 에서 직접 지정하세요.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 레이아웃 폭
   -------------------------------------------------------------------------- */
.aw-gnu #hd,
.aw-gnu #wrapper,
.aw-gnu #ft {
  min-width: 0;
}

/* 그누보드 기본 영역 폭 — default.css 1200px 고정 → 화면 폭 100% (최대 1600px) */
.aw-gnu #hd_pop,
.aw-gnu #hd_wrapper,
.aw-gnu #tnb .inner,
.aw-gnu #gnb .gnb_wrap,
.aw-gnu #container_wr,
.aw-gnu #ft_wr {
  width: 100%;
  max-width: 1600px;
}

.aw-gnu #container_wr {
  margin: 0 auto;
  padding: 80px clamp(16px, 3.4vw, 64px) 120px;
}

.aw-gnu #container {
  position: relative;
  float: left;
  width: 100%;
  min-height: 500px;
  height: auto !important;
  margin: 0 auto;
  font-size: 1em;
  zoom: 1;
}

/* 회원 로그인 메시지(head.sub.php) — 헤더 로그인 버튼으로 대신함 */
.aw-gnu #hd_login_msg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   2. 서브 상단 (페이지 제목)
   -------------------------------------------------------------------------- */
.aw-subvisual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 360px;
  padding: 140px clamp(16px, 3.4vw, 64px) 64px;
  overflow: hidden;
  background: var(--color-primary-dark) url("../images/main/bg_inquiry.jpg") center / cover no-repeat;
  color: var(--color-white);
}

/* PC (1024px 이상) — 위 160px · 좌우 80px · 아래 80px (태블릿 · 모바일은 위 기본값 · 767px 이하 규칙) */
@media (min-width: 1024px) {
  .aw-subvisual {
    padding: 160px 80px 80px;
  }
}

/* 어두운 덮개 — 제목이 있는 왼쪽 아래만 어둡게 하는 원형(radial) 그라디언트
   → 원본 사진은 최대한 그대로 보이고, 글자 뒤만 읽기 쉽게 (위쪽은 헤더 자체의 그라디언트가 담당) */
.aw-subvisual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 95% at 12% 100%,
    rgb(var(--color-primary-dark-rgb) / 0.7) 0%,
    rgb(var(--color-primary-dark-rgb) / 0.4) 45%,
    rgb(var(--color-primary-dark-rgb) / 0) 80%
  );
  pointer-events: none;
}

.aw-subvisual__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.aw-subvisual__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
}

.aw-subvisual__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

/* 사진 비주얼 (.aw-subvisual--photo) — 전용 배경(고정) + 조금 더 높게
   - 쓰는 곳: 개인정보처리방침 · 이용약관(내용관리), 시공실적 게시판(bo_table=project)
     클래스는 theme/basic/inc/aw.layout.head.php 에서 붙임 (영문 제목 · 사진 설명도 그 파일에서 지정)
   - fixed 배경은 크기·위치를 '영역'이 아닌 '브라우저 화면' 기준으로 계산하므로
     cover + bottom 으로 두면 이미지 아랫부분(바닥)이 영역(800px) 밖으로 잘림
     → 이미지 폭을 화면 폭(최소: 영역 높이를 채우는 폭)에 맞추고,
       이미지 아래 끝을 영역 아래 끝(800px)에 맞춰 바닥이 보이게 함
   - --aw-sv-ratio : 이미지 높이 ÷ 폭 — 페이지별 규칙(아래)에서 이미지와 함께 지정
   - --aw-sv-shift : 이미지를 영역 높이의 몇 % 만큼 아래로 내릴지 (0.2 = 위쪽이 20% 더 보임, 0 = 바닥 끝 맞춤)
     → 내린 만큼 위쪽에 빈틈이 생기지 않도록 이미지 최소 폭도 같이 키움 */
.aw-subvisual--photo {
  --aw-sv-h: 800px;
  --aw-sv-ratio: 0.5581;
  --aw-sv-shift: 0.2;
  --aw-sv-bg-w: max(100vw, calc(var(--aw-sv-h) * (1 + var(--aw-sv-shift)) / var(--aw-sv-ratio)));
  min-height: var(--aw-sv-h);
  padding-bottom: 80px;
  /* --aw-sv-zoom: 확대 배율 (아래 '처음 확대 → 100%' 애니메이션) — 가운데를 기준으로 커지도록 위로 절반만큼 올림 */
  background-position: center calc(var(--aw-sv-h) * (1 + var(--aw-sv-shift)) - var(--aw-sv-bg-w) * var(--aw-sv-ratio) * (1 + (var(--aw-sv-zoom) - 1) / 2));
  background-size: calc(var(--aw-sv-bg-w) * var(--aw-sv-zoom)) auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 처음 확대 → 100% — 사진이 다 받아지면(main.js initSubvisualZoom 이 .is-loaded) 1.15배에서 천천히 원래 크기로
   - 배경 크기를 숫자 변수(--aw-sv-zoom)로 애니메이션 (transform 은 fixed 배경을 깨뜨리고 제목 글자까지 커지므로 쓰지 않음)
   - 받기 전에는 첫 장면(1.15배)에 멈춰 있음 (both + paused) / 스크립트가 없거나 늦어도 main.js 가 3초 뒤에는 시작
   - @property 를 모르는 브라우저는 애니메이션 없이 바로 100% */
@property --aw-sv-zoom {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.aw-subvisual--photo {
  animation: aw-sv-zoom 2.4s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.aw-subvisual--photo.is-loaded {
  animation-play-state: running;
}

@keyframes aw-sv-zoom {
  from {
    --aw-sv-zoom: 1.15;
  }
  to {
    --aw-sv-zoom: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-subvisual--photo {
    animation: none;
  }
}

/* 페이지별 사진 — 이미지를 바꿀 때는 파일만 같은 이름으로 덮어쓰기 (비율이 다르면 --aw-sv-ratio 도 수정)
   개인정보처리방침 · 이용약관 · SNS 회원가입: bg-privacy.jpg 2752×1536 → 0.5581 */
.aw-subvisual--content-privacy,
.aw-subvisual--content-provision,
.aw-subvisual--signup {
  --aw-sv-ratio: 0.5581;
  background-image: url("../images/main/bg-privacy.jpg");
}

/* 시공실적(목록 · 등록 · 상세): bg-project.jpg — 지금은 bg-privacy.jpg 와 같은 사진 (2752×1536 → 0.5581) */
.aw-subvisual--board-project {
  background-image: url("../images/main/bg-project.jpg");
}

/* 시공갤러리(목록 · 등록 · 상세): bg-gallery.jpg — 경기 구리시 구리탁구장 (사진을 바꾸면 aw.layout.head.php 의 caption 도 함께) */
.aw-subvisual--board-gallery {
  background-image: url("../images/main/bg-gallery.jpg");
}

/* 견적문의(1:1문의 목록 · 작성 · 상세): bg-qa.jpg — 지금은 시공실적 비주얼(bg-project.jpg)과 같은 사진 (2752×1536 → 0.5581) */
.aw-subvisual--qa {
  background-image: url("../images/main/bg-qa.jpg");
}

/* 제품소개(/product/*.html — 정적 페이지가 이 파일을 직접 불러옴): bg-product.jpg — 지금은 고객지원 비주얼(bg-support.jpg)과 같은 사진 (2752×1536 → 0.5581) */
.aw-subvisual--product {
  --aw-sv-ratio: 0.5581;
  background-image: url("../images/main/bg-product.jpg");
}

/* 고객지원(/support/): bg-support.jpg — 인천 청라국제도시 달튼국제외국인학교 (2752×1536 → 0.5581) */
.aw-subvisual--support {
  background-image: url("../images/main/bg-support.jpg");
}

/* 고객지원 본문은 섹션마다 화면 끝까지 배경이 이어지므로 그누보드 본문 폭(최대 1600px) · 여백을 풂 — 폭은 support.css 가 섹션별로 */
.aw-gnu #container_wr:has(.aw-support) {
  max-width: none;
  padding: 0;
}

/* 터치 기기·태블릿 이하: iOS 등에서 fixed 배경이 확대·깨져 보이므로 일반 배경 (영역 기준 cover + 아래쪽) */
@media (hover: none), (max-width: 1023px) {
  .aw-subvisual--photo {
    background-attachment: scroll;
    /* cover 와 같은 효과 + 확대 애니메이션: 폭 = 영역 폭과 '영역 높이(+여유 120px) ÷ 사진 비율' 중 큰 값 */
    background-size: calc(max(100%, (var(--aw-sv-h) + 120px) / var(--aw-sv-ratio)) * var(--aw-sv-zoom)) auto;
    background-position: center bottom;
  }
}

@media (max-width: 767px) {
  .aw-subvisual {
    padding: 110px 24px 80px;
  }

  /* .aw-subvisual--photo {
    --aw-sv-h: 300px;
    min-height: 300px;
    padding-bottom: 48px;
  } */

  .aw-gnu #container_wr {
    padding: 48px 16px 80px;
  }
}

/* --------------------------------------------------------------------------
   3. 본문 영역 — 그누보드 스킨 기본값 유지
      :where() 로 감싸 우선순위를 낮춤 → 스킨의 클래스·아이디 규칙이 항상 이김
   -------------------------------------------------------------------------- */
:where(.aw-gnu #container_wr) {
  font-size: 12px; /* 그누보드 기본 body 0.75em */
  line-height: normal;
}

:where(.aw-gnu #container_wr) h1,
:where(.aw-gnu #container_wr) h2,
:where(.aw-gnu #container_wr) h3 {
  font-family: inherit;
  font-size: 1em;
  font-weight: bold;
  line-height: inherit;
  letter-spacing: normal;
}

:where(.aw-gnu #container_wr) img {
  display: inline;
}

/* 검색어 강조 (그누보드 search_font 의 .sch_word) — default.css 의 분홍(#ff005a) 대신 진한 올리브 */
.sch_word {
  background-color: var(--color-accent-dark) !important;
}