/* WHY (B-3): 제목류 폰트를 Gothic A1(구글폰트)로 교체(2026-08-19, web-app-dev 전용 실험).
   본문(body)은 Pretendard 유지 — 카드가 빽빽한 페이지라 본문까지 바꾸면 줄바꿈이
   깨질 위험이 있어 제목(h1~h3)만 각지고 균일한 Gothic A1으로 바꿔 "각지고 단단한"
   인상만 준다. */
h1, h2, h3 {
  font-family: "Gothic A1", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-weight: 900;
}

/* WHY (로고 교체, 2026-08-20): energy-business/pitch-deck/sailing-pitch-deck.html 우측
   상단에 고정된 워드마크(.wordmark, line 34/476)를 그대로 가져옴 — 아이콘/원형
   그라디언트/점 장식 전부 빼고 이탤릭 세리프 "sailing" 텍스트 하나만 남기는
   방식까지 동일하게. 폰트(Cormorant Garamond, italic, weight 600)와 이탤릭
   스타일은 피치덱 소스 값 그대로 썼지만, 색상만 다르게 잡았다 — 피치덱 원본
   색 #ffe08a(--sun-2)는 어두운 네이비 배경 전용이라 이 사이트의 흰 헤더 위에
   얹으면 거의 안 보인다. 같은 골드 색상 계열을 유지하면서 흰 배경에서 읽히게
   명도만 낮춘 다크골든로드(#B8860B)로 대체함. */
.brand-wordmark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  color: #B8860B;
  letter-spacing: 0.01em;
}

@media (min-width: 640px) {
  .brand-wordmark { font-size: 27px; }
}

/* 2026-08-19 디자인 피드백 반영분 — increment 1: 히어로 레이아웃.
   design.css는 AI Studio 빌드 시점에 실제 쓰인 Tailwind 클래스만 남은 정적 산출물이라
   여기서 새로 쓰는 클래스는 존재를 보장할 수 없다. 그래서 이 파일은 Tailwind 유틸을
   빌리지 않고 순수 CSS로 직접 스타일링한다.

   히어로 높이는 calc(100vh - 81px)로 헤더(h-20 sticky, 실측 81px) 높이만큼 빼서 헤더
   바로 아래를 정확히 채운다. 배경은 검정 없이 흰색, Spline 볼을 확대해 우측 5분의 3
   지점에 오도록 옮기고 그 위(좌측 여백)에 카피를 얹는다(2026-08-19 3차 피드백).

   ★스크롤 중 공이 찌그러져/커져 보이는 버그(2026-08-19, 사용자가 두 차례 재확인) 근본원인:
   1차 원인 — 히어로가 일반 문서 흐름 블록이라, 스크롤 시작하는 순간 위쪽은 sticky
   헤더에 가려지고 동시에 아래쪽은 다음 섹션이 밀고 올라와 두 방향에서 동시에
   압축되는 것처럼 보였다(iframe 박스 크기는 getBoundingClientRect로 스크롤 전후 동일함을
   확인 — 실제 리사이즈가 아니라 위아래 동시 클리핑에 의한 착시). → .hero-fullbleed를
   position:sticky로 고정해 1차 해결.
   2차 원인 — sticky를 걸어도 여전히 스크롤과 함께 움직이는 문제가 재발했는데, 원인은
   sticky 엘리먼트의 "바로 위" 조상(.hero-wrap)에 걸어둔 overflow:hidden이었다. CSS
   스펙상 overflow:hidden인 조상도 "스크롤 컨테이너"로 취급되어 sticky 기준점이
   뷰포트가 아니라 그 조상이 되는데, .hero-wrap 자신은 독립적으로 스크롤하는 게
   아니라 페이지와 함께 그대로 흘러가버리니 sticky가 사실상 무력화됐다(getBoundingClientRect로
   스크롤 전후 top이 스크롤량과 정확히 1:1로 움직이는 것으로 확인). → overflow:hidden을
   .hero-wrap에서 제거(자르기는 .hero-fullbleed 자체의 overflow:hidden만으로 충분)하여
   진짜로 뷰포트 기준 sticky가 걸리게 고쳤다. */

.hero-wrap {
  position: relative;
  width: 100%;
  height: calc(2 * (100vh - 81px));
  background: #fff;
}

.hero-fullbleed {
  position: sticky;
  top: 81px;
  width: 100%;
  height: calc(100vh - 81px);
  min-height: 480px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-fullbleed-iframe {
  position: absolute;
  top: 50%;
  left: 65%;
  width: 135%;
  height: 135%;
  transform: translate(-50%, -50%);
  border: 0;
}

.hero-overlay-text {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 0 24px 0 64px;
  pointer-events: none;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 14px 10px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 5;
}

.hero-scroll-cue span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.hero-scroll-cue svg {
  animation: hero-scroll-bounce 1.6s ease-in-out infinite;
}

.hero-scroll-cue.is-hidden {
  opacity: 0;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.hero-headline {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #111827;
}

.hero-headline-accent {
  color: #FF9900;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.hero-subcopy {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

@media (min-width: 640px) {
  .hero-overlay-text { padding: 0 24px 0 80px; }
  .hero-headline { font-size: 36px; }
  .hero-subcopy { font-size: 15px; }
}

@media (min-width: 1024px) {
  .hero-overlay-text { padding: 0 24px 0 110px; max-width: 600px; }
  .hero-headline { font-size: 44px; }
  .hero-subcopy { font-size: 16px; }
}

@media (min-width: 1280px) {
  .hero-headline { font-size: 50px; }
}

@media (max-width: 767px) {
  .hero-fullbleed { align-items: flex-end; }
  .hero-fullbleed-iframe { left: 55%; width: 160%; height: 100%; top: 40%; }
  .hero-overlay-text {
    max-width: 100%;
    padding: 0 20px 32px;
    background: linear-gradient(to top, #fff 55%, rgba(255,255,255,0));
  }
}

/* B-2: 히어로 제외, 목차 5개 섹션(process/chatbot/report/info-hub/precautions)
   헤더 위에 실사진 포토밴드를 얹는다(2026-08-20, 3차 수정). 과거 B-2 시도(전체
   배경 어둡게 반전, background-attachment:fixed 패럴랙스+탄색 오버레이)는 전부
   반려·롤백됐던 방향이라 다크 오버레이 없이 사진 아래쪽만 그 섹션의 실제
   배경색으로 자연스럽게 페이드아웃시킨다. ★2차 피드백: max-w 컨테이너 안 여백을
   둔 둥근 카드에서 → 섹션(id="X")의 첫 wrapper div보다 바깥(section 바로 아래
   직계 자식)으로 옮겨 뷰포트 폭까지 꽉 채우는 각진 풀블리드 배너로 바꿈. 사진 위
   캡션(메타데이터) 칩도 제거. ★3차 피드백: "히어로랑 간격 없애고 히어로 끝나는
   데부터 바로 보이게" — 각 섹션의 py-16/20/24 상단 패딩 때문에 밴드가 섹션
   경계에서 안쪽으로 밀려 들어가 있던 게 그 간격의 정체였다. 밴드에 그 패딩값과
   똑같은 음수 margin-top을 줘서 패딩을 상쇄, 섹션 테두리(border-t) 바로 아래에
   사진이 밀착하게 함(5개 섹션 전부 동일 원리 — 히어로뿐 아니라 각 섹션 전환부도
   같이 밀착됨). 높이도 세로로 작다는 지적에 전 구간 1.5배로 확대. */
.section-photo-band {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: -64px;
  margin-bottom: 40px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.section-photo-band.is-compact { height: 225px; margin-top: -64px; margin-bottom: 32px; }

.section-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--band-fade, #FAFAFA) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

@media (min-width: 640px) {
  .section-photo-band { height: 372px; margin-top: -80px; margin-bottom: 44px; }
  .section-photo-band.is-compact { height: 270px; margin-top: -80px; margin-bottom: 36px; }
}

@media (min-width: 1024px) {
  .section-photo-band { height: 444px; margin-top: -96px; margin-bottom: 52px; }
  .section-photo-band.is-compact { height: 315px; margin-top: -96px; margin-bottom: 44px; }
}

/* WHY (B-2 컬러, 2026-08-20, 8차): 히어로 제외 5개 섹션에 화이트→피치→그레이 순으로
   반복 교차 배경을 건다. 5차 크림옐로우(#FFF6DD) → 6차 피치(#FFEADC, "붉은
   계열"이라 반려) → 7차 노랑·빨강 중간(#FFF0DC) → 8차: "더 밝고 색감 더
   빠져야" 피드백으로 7차 색을 흰색과 절반씩 섞어(RGB 평균) 명도는 올리고
   채도 인상은 확 낮춤 — #FFF8EE. 색상(hue)은 그대로 두고 흰색 쪽으로 더
   당긴 것뿐이라 방향성은 안 바뀜. 그레이(#EDEDED)·화이트는 그대로.
   ID 셀렉터라 Tailwind bg-[#FAFAFA] 클래스보다 우선순위가 높아 !important
   없이 덮어써진다. */
#process, #info-hub { background: #FFFFFF; }
#chatbot, #precautions { background: #FFF8EE; }
#report { background: #EDEDED; }

/* WHY (B-4): 분리식 스크롤(2026-08-20, 3차 수정). 목차 섹션(인허가절차/챗봇/리포트/
   정보마당/유의사항)이 화면 한 장보다 훨씬 길어서(인허가절차만 카드 4개+CTA로
   화면 3~4장 분량) JS로 스크롤을 가로채 섹션 통째로 전환하는 완전 페이지네이션은
   지금 레이아웃을 다 갈아엎어야 해서 배제. 대신 브라우저 내장 scroll-snap을
   "섹션 경계"에만 걸어, 섹션 안에서는 자유 스크롤되다가 다음 섹션 시작점에
   가까워지면 그 섹션 맨 위로 착 붙게 함.
   ★1차 proximity → ★2차 "반영 안 된 거 같다" 피드백으로 mandatory 시도(체감은
   확실했지만 긴 섹션 중간에서 스크롤 멈추면 그 섹션 맨 위로 튕겨가는 부작용) →
   ★3차 "그전버전이 더 좋다"로 proximity 원복. mandatory 버전은
   index.html.bak_20260820_013136_mandatory-snap-sailingo-logo /
   design-overrides.css.bak_20260820_013136_mandatory-snap-sailingo-logo 로
   백업해뒀으니 나중에 다시 필요하면 그 파일에서 scroll-snap 블록만 가져오면 됨.
   #hero-wrap을 스냅포인트에 포함시킨 건 mandatory 전용 버그(히어로 안에서
   멈추면 인허가절차까지 떠밀려 내려가던 것) 대응이었는데, proximity에서는
   그 버그 자체가 없어서 굳이 뺄 필요는 없어 그대로 둠(있어도 무해함).
   scroll-padding-top은 sticky 헤더 실측 높이(81px, 히어로 주석과 동일값)만큼
   줘서, 섹션이 스냅될 때 그 시작점이 헤더에 가려지지 않고 바로 아래로 오게 함. */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 81px;
}

#hero-wrap, #process, #chatbot, #report, #info-hub, #precautions {
  scroll-snap-align: start;
}