/*
 * 경기기후위성 소개 페이지 스타일
 * ─────────────────────────────────────────────────────────
 * 디자인 번들의 <style> 블록을 추출. 대부분의 스타일은 마크업의 인라인 style 로 존재하며,
 * 이 파일은 전역 리셋·키프레임·미디어쿼리만 담는다.
 * 포털 공통 헤더/푸터(CPS)와의 충돌을 막기 위해 전역 셀렉터(*, body, a)는 #ggsat 루트로 스코핑했다.
 * Pretendard 웹폰트는 프로젝트 기존 /ips/fonts/pretendard.css 를 페이지 head 에서 재사용한다.
 * (원본의 임베디드 woff2 93개 · jsDelivr @font-face 는 폐기)
 */

/* ---- base (scoped) ---- */
#ggsat * { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
#ggsat {
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  color: #111827;
  background: #05080F;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  z-index: 1; /* CPS 고정 헤더(z-index:100) 아래에 위치 */
}
#ggsat a { color: #00A05E; text-decoration: none; }
#ggsat a:hover { color: #0E5C3F; }
#ggsat img { max-width: 100%; height: auto; }

/* 실제 위성 촬영본(sat-*.webp)은 기울어진 스와스라 가장자리에 얇은 흰/색 여백이 남는다.
   이미지는 엔트로피 크롭으로 영상부를 채웠고, 남은 얇은 엣지는 소폭 확대해 프레임 밖으로 밀어낸다.
   (부모 컨테이너는 overflow:hidden 이어야 함) */
#ggsat img[src*="/sat-"] { transform: scale(1.1); transform-origin: center; }

/* CPS 공통 헤더가 position:fixed(약 144px) 라 히어로 상단이 가려지는 문제 보정.
   index.js 가 런타임에 --header-height 를 실제 헤더 높이로 세팅하므로 반응형으로 정확히 비켜간다. */
#ggsat > section[data-screen-label="S1 히어로"] {
  padding-top: calc(var(--header-height, 144px) + 24px) !important;
}
.gy-mono { font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Code", Consolas, monospace; }

/* ---- keyframes ---- */
@keyframes gyHeroUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes gyHeroCue { 0% { transform: scaleY(.15); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes gyRec { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* 실시간/운용중 표시용 점: 은은하게 깜박임 (reduced-motion 시 아래 미디어쿼리에서 정지) */
.gy-rec { animation: gyRec 1.4s ease-in-out infinite; }
/* 운용중 뱃지: 검정 배경(고정) + 글자(#28FF00)만 깜박임(점 없음) */
@keyframes gyBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
#ggsat .gy-badge-pulse { animation: gyBadgePulse 1.4s ease-in-out infinite; }
@keyframes gyFadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes gyCycleLand { 0%, 16.66% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
@keyframes gyCycle240 { 0%, 16.66% { opacity: 1; } 16.67%, 100% { opacity: 0; } }

/* ---- S6 검보정 촬영영상: 자동 스크롤 스트립 (마퀴) ---- */
@keyframes gyMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#ggsat .gy-strip-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
#ggsat .gy-strip { display: flex; gap: 18px; width: max-content; animation: gyMarquee 48s linear infinite; }
#ggsat .gy-strip-wrap:hover .gy-strip { animation-play-state: paused; }
#ggsat .gy-strip-item { flex: 0 0 340px; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(143,182,255,.14); background: #0B0F17; }
#ggsat .gy-strip-thumb { aspect-ratio: 4/3; overflow: hidden; }
#ggsat .gy-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
#ggsat .gy-strip-item:hover .gy-strip-thumb img { transform: scale(1.1); }
#ggsat .gy-strip-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(to top, rgba(5,8,15,.9), rgba(5,8,15,.02)); }
#ggsat .gy-strip-title { font-size: 14px; font-weight: 800; color: #F4F6FA; }
#ggsat .gy-strip-date { font-size: 11.5px; color: #8FB6FF; margin-top: 3px; }

/* ---- S5 미션 이미지: EarthPaper 스타일 느린 팬+줌(켄번즈) ---- */
@keyframes gyKenBurns { 0% { transform: scale(1.03); } 100% { transform: scale(1.18) translate(-3%, -2%); } }
#ggsat .gy-kb { animation: gyKenBurns 22s ease-in-out infinite alternate; will-change: transform; }

/* ---- 기후재난: 폭우 전 → 후 → AI 변화탐지 3단계 크로스페이드 ---- */
#ggsat .gy-cd-fr { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
#ggsat .gy-cd-fr.on { opacity: 1; }
#ggsat .gy-cd-fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#ggsat .gy-cd-badge { position: absolute; left: 20px; top: 16px; z-index: 2; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border-radius: 100px; padding: 6px 14px; }
#ggsat .gy-cd-badge-red { background: #E5484D; }

/* ---- 도시변화: Before/After 스와이프 + 변화탐지 오버레이 ---- */
#ggsat .gy-sw-before, #ggsat .gy-sw-after, #ggsat .gy-sw-change { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#ggsat .gy-sw-before { z-index: 1; }
#ggsat .gy-sw-after { z-index: 2; animation: gySwipe 9s ease-in-out infinite; }
#ggsat .gy-sw-change { z-index: 3; opacity: 0; animation: gyChangeIn 9s ease-in-out infinite; }
#ggsat .gy-sw-line { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; z-index: 4; background: rgba(255,255,255,.92); box-shadow: 0 0 10px rgba(255,255,255,.6); animation: gySwipeLine 9s ease-in-out infinite; }
#ggsat .gy-sw-tag { position: absolute; top: 16px; z-index: 5; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border-radius: 100px; padding: 6px 14px; }
#ggsat .gy-sw-tag-l { left: 20px; }
#ggsat .gy-sw-tag-r { right: 20px; }
#ggsat .gy-sw-tag-cd { left: 20px; top: auto; bottom: 16px; background: #E5484D; opacity: 0; animation: gyChangeIn 9s ease-in-out infinite; }
@keyframes gySwipe { 0% { clip-path: inset(0 100% 0 0); } 28%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes gySwipeLine { 0% { left: 0; opacity: .95; } 28% { left: 100%; opacity: .95; } 33% { opacity: 0; } 100% { left: 100%; opacity: 0; } }
@keyframes gyChangeIn { 0%, 42% { opacity: 0; } 52%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ---- 메탄 감시: EarthPaper식 스캔·탐지 연출 (우리 위성영상 위에 메탄 히트맵 예시 오버레이) ---- */
#ggsat .gy-mth-cam { position: absolute; inset: 0; animation: gyMthPan 9s ease-in-out infinite alternate; will-change: transform; }
#ggsat .gy-mth-base { filter: saturate(.72) brightness(1.02); }
#ggsat .gy-mth-plume { position: absolute; inset: auto; left: 24%; top: 22%; width: 33%; height: 70%; object-fit: contain; opacity: 0; mix-blend-mode: screen; animation: gyMthPlume 9s ease-in-out infinite; }
#ggsat .gy-mth-box { position: absolute; left: 24%; right: 43%; top: 22%; bottom: 8%; border: 2px solid #43E39C; border-radius: 3px; box-shadow: 0 0 14px rgba(67,227,156,.5), inset 0 0 22px rgba(67,227,156,.1); opacity: 0; animation: gyMthBox 9s ease-in-out infinite; }
#ggsat .gy-mth-box::before, #ggsat .gy-mth-box::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid #9BFFD4; }
#ggsat .gy-mth-box::before { left: -2px; top: -2px; border-right: none; border-bottom: none; }
#ggsat .gy-mth-box::after { right: -2px; bottom: -2px; border-left: none; border-top: none; }
#ggsat .gy-mth-tag { position: absolute; left: -2px; top: -25px; font-size: 11px; font-weight: 800; color: #062B1A; background: #43E39C; border-radius: 4px; padding: 3px 9px; white-space: nowrap; }
#ggsat .gy-mth-scan { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #9BFFD4, transparent); box-shadow: 0 0 10px #43E39C; opacity: 0; animation: gyMthScan 9s ease-in-out infinite; }
@keyframes gyMthPan { 0% { transform: scale(1.06) translate(1.5%, 1%); } 100% { transform: scale(1.13) translate(-1.5%, -1.5%); } }
@keyframes gyMthBox { 0%, 13% { opacity: 0; transform: scale(1.1); } 23% { opacity: 1; transform: scale(1); } 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes gyMthScan { 0%, 22% { opacity: 0; top: 22%; } 26% { opacity: .95; } 44% { top: 80%; opacity: .95; } 50%, 100% { opacity: 0; } }
@keyframes gyMthPlume { 0%, 32% { opacity: 0; } 48% { opacity: 1; } 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ---- launch video modal ---- */
.gy-vmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 10, 16, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
.gy-vmodal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.gy-vmodal-box { position: relative; width: 100%; max-width: 920px; transform: scale(.94) translateY(8px); opacity: 0;
  transition: transform .32s cubic-bezier(.16,.84,.44,1), opacity .32s ease; }
.gy-vmodal.is-open .gy-vmodal-box { transform: scale(1) translateY(0); opacity: 1; }
.gy-vmodal-box video { width: 100%; height: auto; max-height: 82vh; display: block; border-radius: 16px; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.gy-vmodal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 17px; line-height: 1; color: #fff; background: rgba(20, 24, 30, .55); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .2s, transform .2s; }
.gy-vmodal-close:hover { background: rgba(20, 24, 30, .85); transform: scale(1.06); }

/* ---- layout helpers / responsive ---- */
.gy-missions-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gy-up { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gy-rec { animation: none !important; }
  #ggsat .gy-badge-pulse { animation: none !important; }
  #ggsat .gy-strip { animation: none !important; }
  #ggsat .gy-strip-wrap { overflow-x: auto; }
  #ggsat .gy-kb { animation: none !important; }
  #ggsat .gy-sw-after { clip-path: none !important; animation: none !important; }
  #ggsat .gy-sw-change { opacity: 1 !important; animation: none !important; }
  #ggsat .gy-sw-line { opacity: 0 !important; animation: none !important; }
  #ggsat .gy-sw-tag-cd { opacity: 1 !important; animation: none !important; }
  #ggsat .gy-mth-cam { animation: none !important; }
  #ggsat .gy-mth-box { animation: none !important; opacity: 1 !important; transform: none !important; }
  #ggsat .gy-mth-plume { animation: none !important; opacity: 1 !important; }
  #ggsat .gy-mth-scan { display: none !important; }
  .gy-vmodal, .gy-vmodal-box { transition: none !important; }
  .gy-vmodal.is-open .gy-vmodal-box { transform: none !important; }
}
@media (max-width: 900px) {
  .gy-hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; text-align: center; }
  .gy-hero-grid .gy-left { align-items: center !important; }
  .gy-cd-card { margin-left: auto; margin-right: auto; }
  .gy-num-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gy-missions-desktop { display: none !important; }
  .gy-missions-mobile { display: flex !important; }
}
@media (max-width: 860px) {
  .gy-fleet-grid { grid-template-columns: 1fr !important; }
  .gy-why-row { flex-direction: column !important; gap: 28px !important; text-align: center; padding: 40px 0 !important; }
  .gy-why-row > div:last-child { width: 100%; flex: 0 0 auto !important; }
  .gy-why-row p { max-width: none !important; }
  .gy-gallery-grid { grid-template-columns: 1fr !important; }
  .gy-s8-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .gy-nav-links { display: none !important; }
}
@media (max-width: 520px) {
  .gy-num-grid { grid-template-columns: 1fr !important; }
  .gy-footer-row { flex-direction: column !important; gap: 26px !important; }
}