/*
 * ============================================================
 * GIRIM E&C — waabi.ai 구조 이식 홈페이지
 * Source: https://waabi.ai (2026-07-15 실사·추출)
 * 이 파일은 girim-enc-claude 프로젝트 전용 (경로 종속) — 공용 skins/girim-enc.css와 별개.
 *
 * 이식한 패턴:
 *   1. 상단 공지바 + 떠있는 캡슐형 내비게이션
 *   2. 스크롤해도 고정되는(position:sticky) 2줄 히어로 헤드라인 + 하단 진술 리빌
 *   3. 불규칙 스캐터 그리드 사진/영상 모자이크 + 중앙 고정 텍스트
 *   4. 스크롤 하이라이트형 3단 특징 리스트 (좌측 이미지 고정, 우측 텍스트 활성화)
 *
 * 폰트 주의: F37 Zagma Serif는 원본 사이트가 쓰는 유료 라이선스 폰트를 추출본에서
 * 그대로 가져온 것 — 한글 글리프가 없어 국문 헤드라인에는 자동으로 폴백된다.
 * 그래서 국문 대형 헤드라인은 Noto Serif KR(무료, 한글 지원)로 유사한 굵은 세리프
 * 톤을 재현하고, Zagma Serif는 로고 옆 영문 문구 등 라틴 전용 요소에만 사용.
 * 실제 클라이언트 납품 시 Zagma Serif는 라이선스 확인 전까지 제거하거나
 * 정식 라이선스 구매 후 사용할 것.
 * ============================================================
 */

@font-face {
  font-family: 'Zagma Serif';
  src: url('../fonts/F37ZagmaSerif_Book-s.p.07ww.6n-k2vcw.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zagma Serif';
  src: url('../fonts/F37ZagmaSerif_BookItalic-s.p.0.zzxoe5d_3ao.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --w-bg:      #DEDCD9;   /* waabi 히어로 배경 실측치 그대로 */
  --w-ink:     #171717;
  --w-ink-2:   #101828;
  --w-muted:   #8b8b86;
  --w-line:    #c9c7c2;
  --w-white:   #ffffff;
  --w-accent:  var(--girim-gold-500);   /* waabi는 #ff2c6b, 여기선 실제 브랜드 골드로 대체 */
  --w-accent-2: var(--girim-navy-800);
  --w-radius: 22px;
  --w-serif: 'Noto Serif KR', 'Zagma Serif', serif;
  --w-sans:  'Pretendard', var(--font-korean);
}

.gw-body {
  background: var(--w-bg);
  color: var(--w-ink);
  font-family: var(--w-sans);
}

/* ================================================================
   0. 공지바 + 떠있는 캡슐 내비게이션
   ================================================================ */
.gw-announce {
  background: var(--w-white);
  border-bottom: 1px solid var(--w-line);
  text-align: center;
  font-size: 13px;
  padding: 9px 40px;
  position: relative;
  z-index: 200;
}
.gw-announce a { color: var(--w-ink); font-weight: 600; text-decoration: underline; margin-left: 4px; }
.gw-announce-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 15px; color: var(--w-muted);
}

.gw-nav-wrap {
  position: sticky;
  top: 16px;
  z-index: 150;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  margin-bottom: -68px; /* 다음 섹션과 겹쳐 떠있는 느낌 */
}
.gw-nav {
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 12px 10px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.gw-nav-logo { font-family: var(--w-sans); font-weight: 800; font-size: 16px; color: var(--w-ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gw-nav-links { display: flex; align-items: center; gap: 22px; }
.gw-nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--w-ink);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.gw-nav-links a:hover, .gw-nav-links a[aria-current="page"] {
  border-bottom-color: var(--w-accent);
}
.gw-nav-cta {
  font-size: 13px; font-weight: 700;
  background: var(--w-ink-2);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s var(--ease-out);
}
.gw-nav-cta:hover { background: var(--w-accent); color: var(--w-ink-2); }
.gw-nav-burger {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--w-line);
  display: none;
  align-items: center; justify-content: center;
  background: transparent; cursor: pointer;
  flex-shrink: 0;
}
.gw-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--w-white);
  border: 1px solid var(--w-line);
  border-radius: 20px;
  padding: 14px;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.gw-nav-mobile.is-open { display: flex; }
.gw-nav-mobile a { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--w-ink); }
.gw-nav-mobile a:hover { background: var(--w-bg); }

@media (max-width: 900px) {
  .gw-nav-links { display: none; }
  .gw-nav-burger { display: flex; }
  .gw-nav { flex-wrap: wrap; }
}

/* ================================================================
   1. 히어로 — 고정(sticky) 2줄 헤드라인 + 하단 진술 리빌
   ================================================================ */
.gw-hero {
  position: relative;
  background: var(--w-bg);
  min-height: 220vh; /* 스크롤 여유 공간 확보 */
}
.gw-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* 켄번즈 슬라이드쇼 — 히어로 배경. z-index로 격자·문구보다 아래에 고정 */
.gw-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--girim-navy-900);
}
.gw-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.gw-hero-slide.is-active { opacity: 1; z-index: 1; }
.gw-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  animation: gw-kenburns 4.6s ease-out forwards;
}
.gw-hero-slide:nth-child(3n+2) img { animation-name: gw-kenburns-alt; }
.gw-hero-slide:nth-child(3n) img { animation-name: gw-kenburns-pan; }
@keyframes gw-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
@keyframes gw-kenburns-alt {
  from { transform: scale(1.1) translate(1%, 1%); }
  to   { transform: scale(1.22) translate(-1%, 0%); }
}
@keyframes gw-kenburns-pan {
  from { transform: scale(1.05) translate(-1%, 0); }
  to   { transform: scale(1.17) translate(1.2%, -1.2%); }
}
/* 가독성 확보를 위한 어둡게 처리 — 사진 위, 격자·문구 아래 */
.gw-hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(18,21,28,0.32) 0%, rgba(18,21,28,0.42) 45%, rgba(18,21,28,0.78) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .gw-hero-slide img { animation: none; }
}

/* 문구·스크롤 버튼은 슬라이드·스크림보다 위 */
.gw-hero-headline { position: relative; z-index: 4; }
.gw-scroll-dot { z-index: 4; }

.gw-hero-headline {
  padding: 0 clamp(20px, 5vw, 64px) 140px;
  font-family: var(--w-serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--w-white);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.gw-scroll-dot {
  position: absolute;
  right: clamp(20px, 5vw, 80px);
  bottom: 64px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--w-accent);
  color: var(--w-ink-2);
  display: flex; align-items: center; justify-content: center;
  animation: gw-bob 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gw-scroll-dot { animation: none; } }
@keyframes gw-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.gw-hero-reveal {
  margin-top: 26vh;
  padding: 0 clamp(20px, 5vw, 64px);
  max-width: 640px;
  font-family: var(--w-sans);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}

/* ================================================================
   2. 사진/영상 모자이크 — 불규칙 스캐터 그리드 + 중앙 고정 텍스트
   ================================================================ */
.gw-mosaic {
  position: relative;
  background: var(--w-white);
  padding: 120px clamp(16px, 4vw, 48px) 100px;
}
.gw-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
/* 리빌·패럴랙스는 GSAP ScrollTrigger가 스크롤 진행률에 맞춰 직접 opacity/transform을 구동
   (motion.js). 여기서는 JS 실행 전 깜빡임 방지용 초기 상태만 정의 */
.gw-tile {
  position: relative;
  grid-column: span 1;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
  border-radius: var(--w-radius);
  overflow: hidden;
  background: var(--w-bg);
  align-self: start;
  opacity: 0;
}
.gw-tile video, .gw-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.gw-tile:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .gw-tile { opacity: 1; }
  .gw-tile:hover img { transform: none; }
}
.gw-tile-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--w-muted);
  letter-spacing: 0.04em;
  padding: 12px;
}
/* 스캐터 오프셋 — waabi 원본처럼 타일마다 세로 위치를 어긋나게 */
.gw-tile.off-1 { margin-top: 40px; }
.gw-tile.off-2 { margin-top: -20px; }
.gw-tile.off-3 { margin-top: 90px; }
.gw-tile.off-4 { margin-top: 10px; }

/* 중앙 텍스트 — 그리드 자체의 셀로 배치해 타일과 절대 겹치지 않음(dense 오토플로우가 나머지 타일을 주변에 채움) */
.gw-mosaic-center {
  grid-column: 2 / span 2;
  grid-row: 2 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  text-align: center;
  padding: 20px;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gw-mosaic-center { opacity: 1; }
}
.gw-mosaic-kicker {
  font-family: var(--w-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--w-muted);
  margin-bottom: 18px;
}
.gw-mosaic-body {
  font-family: var(--w-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.6;
  color: var(--w-ink);
}

@media (max-width: 980px) {
  .gw-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .gw-tile { grid-row: span 1; }
  .gw-tile.off-1, .gw-tile.off-2, .gw-tile.off-3, .gw-tile.off-4 { margin-top: 0; }
  .gw-mosaic-center { grid-column: 1 / -1; grid-row: auto; padding: 32px 8px; }
}

/* ================================================================
   3. 스크롤 하이라이트 특징 리스트 (좌 고정 이미지 + 우 활성 텍스트)
   ================================================================ */
.gw-features {
  background: var(--w-white);
  padding: 60px clamp(20px, 4vw, 64px) 140px;
}
.gw-features-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.gw-features-media {
  position: sticky;
  top: 18vh;
  height: 60vh;
  border-radius: var(--w-radius);
  overflow: hidden;
  background: var(--w-ink-2);
}
.gw-feature-item {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 0.4s var(--ease-out);
}
.gw-feature-item.is-active { opacity: 1; }
.gw-feature-item h3 {
  font-family: var(--w-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 16px;
  color: var(--w-ink);
}
.gw-feature-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--w-muted);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .gw-features-grid { grid-template-columns: 1fr; }
  .gw-features-media { position: static; height: 42vh; margin-bottom: 24px; }
  .gw-feature-item { min-height: auto; opacity: 1; margin-bottom: 40px; }
}

/* ================================================================
   4. CTA 클로징 + 풋터 (기존 g- 컴포넌트 재사용)
   ================================================================ */
.gw-closing {
  background: var(--girim-navy-900);
  color: #fff;
  padding: 140px clamp(20px, 4vw, 64px);
  text-align: center;
}
.gw-closing h2 {
  font-family: var(--w-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.2;
  margin-bottom: 28px;
}
.gw-closing p {
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
  margin: 0 auto 34px;
  font-size: 15.5px;
}

/* ================================================================
   5. 서브페이지 공통 — 페이지 히어로 + 범용 reveal 유틸
   ================================================================ */
.gw-page-hero {
  background: var(--w-bg);
  padding: 200px clamp(20px, 4vw, 64px) 90px;
}
.gw-page-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--girim-gold-600);
  margin-bottom: 18px;
}
.gw-page-hero h1 {
  font-family: var(--w-serif);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  max-width: 18ch;
  text-wrap: balance;
}
.gw-page-hero p.lede {
  margin-top: 22px;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--w-muted);
  max-width: 56ch;
  line-height: 1.65;
}

/* 범용 스크롤 리빌 — fade-up. JS가 .is-in 클래스를 토글 */
.gw-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.gw-reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .gw-reveal { opacity: 1; transform: none; transition: none; }
}

/* 서브페이지 섹션 프레임 (흰 배경 / 크림 배경 교차) */
.gw-block { padding: 90px clamp(20px, 4vw, 64px); }
.gw-block--tint { background: var(--girim-cream-2); }
.gw-block-inner { max-width: 1180px; margin: 0 auto; }
.gw-block h2 {
  font-family: var(--w-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.3;
  color: var(--w-ink);
  margin-bottom: 18px;
  max-width: 22ch;
}
.gw-block p.body { font-size: 15.5px; line-height: 1.75; color: var(--girim-muted); max-width: 62ch; }

/* 좌 이미지 + 우 텍스트 (또는 반대) 2단 블록 */
.gw-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.gw-split.reverse .gw-split-media { order: 2; }
.gw-split-media {
  border-radius: var(--w-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--girim-navy-900);
}
.gw-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .gw-split { grid-template-columns: 1fr; }
  .gw-split.reverse .gw-split-media { order: 0; }
}

/* 카드 그리드 (특허·공법·시공분야 상세용) */
.gw-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.gw-card {
  background: var(--girim-paper);
  border: 1px solid var(--girim-line);
  border-radius: var(--w-radius);
  padding: 30px 28px;
}
.gw-card .num {
  font-family: var(--font-latin);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--girim-gold-600);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  display: block;
}
.gw-card h3 { font-family: var(--w-serif); font-size: 19px; margin-bottom: 10px; color: var(--w-ink); }
.gw-card p { font-size: 14px; line-height: 1.7; color: var(--girim-muted); }
@media (max-width: 700px) { .gw-card-grid { grid-template-columns: 1fr; } }

/* 서브페이지 하단 CTA (얇은 버전) */
.gw-mini-cta {
  background: var(--girim-navy-900);
  color: #fff;
  padding: 80px clamp(20px, 4vw, 64px);
  text-align: center;
  border-radius: 0;
}
.gw-mini-cta h2 { font-family: var(--w-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 14px; }
.gw-mini-cta p { color: rgba(255,255,255,0.65); margin-bottom: 26px; font-size: 15px; }