/* =========================================================================
   Sapie-Guardian — HERO (faithful rebuild from Figma node 3390:1932)
   고정비율 스테이지(1909×1130)를 화면폭에 맞춰 스케일. 카드 좌표/회전 정확.
   색·효과는 theme.css 토큰만 참조 (raw 색 리터럴 없음).
   ========================================================================= */

.guardian-v2 .hero {
  position: relative;
  padding: 0;
  background: var(--grad-hero-veil), var(--color-bg-navy);
  overflow: hidden;
}

/* 하단 페이드 오버레이 — 카드·글로우 위로 올라와 검정으로 자연스럽게 페이드
   → 바로 아래 검정 Stats 섹션과 경계 없이 연결 */
.guardian-v2 .hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, transparent 0%, var(--color-bg-page) 100%);
  pointer-events: none;
  z-index: 4;       /* 카드(z2~3) 위, 타이틀(z5)은 상단이라 안 가림 */
}

/* fluid fixed-ratio stage */
.guardian-v2 .hero-stage {
  position: relative;
  width: 100%;
  max-width: 1909px;
  margin: 0 auto;
  aspect-ratio: 1909 / 1130;
  container-type: inline-size;   /* enables cqw units inside */
}
/* central blue glow behind the front card */
.guardian-v2 .hero-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 73%;
  width: 100%; height: 72%;
  transform: translate(-50%, -50%);
  background: var(--glow-radial-brand);
  pointer-events: none;
  z-index: 1;
}

/* ---- background radial glows (mix-blend-screen like Figma) ---- */
.guardian-v2 .hero-glow {
  position: absolute;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .65;
}
.guardian-v2 .hero-glow--1 { left: -2%; top: 52%; width: 64%;   }
.guardian-v2 .hero-glow--2 { left: 42%; top: 54%; width: 64%;   }
.guardian-v2 .hero-glow img { width: 100%; display: block; }

/* ---- faded AI-tool marquee (오→왼 무한 흐름, 중앙은 마스크로 비워 GEN AI 안 가림) ---- */
.guardian-v2 .hero-marquee {
  position: absolute;
  top: 20%; left: 0; width: 100%;
  overflow: hidden;
  opacity: .26;
  pointer-events: none;
  z-index: 1;                 /* hero-head(z5) 뒤 → 타이틀이 항상 위 */
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 35%, transparent 43%, transparent 57%, #000 65%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 35%, transparent 43%, transparent 57%, #000 65%, #000 90%, transparent 100%);
}
.guardian-v2 .hero-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(20px, 2.5cqw, 48px);
  animation: hero-marquee 40s linear infinite;
}
@keyframes hero-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .guardian-v2 .hero-marquee__track { animation: none; } }
.guardian-v2 .hero-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.guardian-v2 .hero-chip__logo {
  --s: clamp(26px, 2cqw, 38px);
  width: var(--s); height: var(--s); flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-chip);
  box-shadow: var(--inset-glow);
}
.guardian-v2 .hero-chip__logo img { width: 46%; height: 46%; object-fit: contain; }
.guardian-v2 .hero-chip__name {
  font-family: var(--font-body);
  font-weight: 500; color: var(--color-text-primary);
  font-size: clamp(11px, .9cqw, 15px);
}

/* ---- glass cards ---- */
.guardian-v2 .gcard {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  width: var(--w);
  aspect-ratio: 1909 / 2398;     /* 0.796 — all hero cards share this ratio */
  border-radius: clamp(14px, 1.6cqw, 20px);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-navy-glass);
  box-shadow: var(--inset-glow-soft), 0 24px 50px var(--scrim-45);
  overflow: hidden;
  /* %-padding on an abs-positioned box resolves against the STAGE, not the card,
     so use calc(--w × 0.11) → exactly 11% of THIS card's own width (Figma inset). */
  padding: calc(var(--w) * 0.11);
  display: flex; flex-direction: column;
}
.guardian-v2 .gcard__icon {
  /* width% resolves against the card's padding-box → 24.6% ≈ Figma's icon ratio */
  width: 24.6%; aspect-ratio: 1; object-fit: contain;
  /* top-align content (no bottom-pinning); calc keeps the gap card-relative.
     0.098×width ≈ 7.8% of card height = Figma's icon→title gap, leaving ~20% empty at bottom */
  margin-bottom: calc(var(--w) * 0.098);
}
.guardian-v2 .gcard--public .gcard__icon { transform: rotate(23deg); }
.guardian-v2 .gcard__title {
  font-family: var(--font-display);
  font-weight: 700; line-height: normal;  /* Figma는 leading-normal(Paperlogy 고유 줄높이) — 고정 1.2는 두 줄 제목이 벌어져 원본과 어긋났음 */
  color: var(--color-text-primary);
  text-shadow: var(--shadow-text);
  margin: 0 0 .55em;                     /* title→sub gap (여유 확보) */
}
.guardian-v2 .gcard__sub {
  font-family: var(--font-display);
  font-weight: 400; line-height: 1.55;   /* 긴 문장 부제목: 얇은 웨이트 + 줄간격 확보(숨통) */
  color: var(--color-text-subtle);
  text-shadow: var(--shadow-text);
  margin: 0;
  word-break: keep-all;   /* 한국어 어절(공백) 단위로만 줄바꿈 — 단어 중간 끊김 방지 */
  text-wrap: balance;     /* 줄 길이를 균형 있게 배분 — 외톨이 줄 방지 */
}

/* per-card placement (center x/y as % of stage), rotation, width (% of 1909) */
.guardian-v2 .gcard--zero    { left: 10.1%; top: 84.0%; --rot: 21.85deg; --w: 17.2%; opacity: .71;
                  border-radius: clamp(20px,2.4cqw,30px); }
.guardian-v2 .gcard--always  { left: 39.8%; top: 78.9%; --rot: -6.79deg; --w: 23.9%;
                  /* 상단 중앙에서 스며드는 뽀얀 글로우 — 가장 큰 메인 카드에만 적용.
                     background 레이어로 넣어(단색 네이비 위·콘텐츠 아래) 아이콘/텍스트는 가리지 않는다 */
                  background: radial-gradient(66% 62% at 18% 14%, var(--overlay-white-05) 0%, transparent 62%),
                              radial-gradient(92% 86% at 18% 14%, var(--glow-brand-28) 0%, transparent 46%),
                              var(--color-bg-navy);
                  border-color: var(--color-border-brand);
                  border-radius: clamp(28px,3.2cqw,40px);
                  box-shadow: 1px -4px 51px 5px var(--color-border-navy), var(--inset-glow-soft);
                  z-index: 3; }
.guardian-v2 .gcard--public  { left: 60.9%; top: 83.4%; --rot: 15deg;    --w: 20.5%;
                  background: var(--color-bg-navy);
                  border-color: var(--color-border-brand);
                  border-radius: clamp(28px,3.2cqw,40px);
                  box-shadow: 1px -4px 44px 5px var(--color-border-navy), var(--inset-glow-soft);
                  backdrop-filter: blur(13px); z-index: 2; }
.guardian-v2 .gcard--safe    { left: 77.2%; top: 91.2%; --rot: 38.64deg; --w: 11.7%; opacity: .5;
                  border-color: var(--color-border-brand);
                  box-shadow: .5px -2px 25px 2.6px var(--color-border-navy); }
.guardian-v2 .gcard--policyL { left: 24.6%; top: 87.4%; --rot: -30deg;   --w: 13.7%; opacity: .33; }
.guardian-v2 .gcard--policyR { left: 92.2%; top: 97.9%; --rot: 75deg;    --w: 11.8%; opacity: .34; }

.guardian-v2 .gcard--zero    .gcard__title { font-size: 1.95cqw; }
.guardian-v2 .gcard--always  .gcard__title { font-size: 2.65cqw; }
.guardian-v2 .gcard--public  .gcard__title { font-size: 2.3cqw; }
.guardian-v2 .gcard--safe    .gcard__title { font-size: 1.35cqw; }
.guardian-v2 .gcard--policyL .gcard__title { font-size: 1.5cqw; }
.guardian-v2 .gcard--policyR .gcard__title { font-size: 1.35cqw; }

/* sub — 긴 문장으로 바뀌어 제목 대비 더 작게(약 0.36×) 조정해 답답함 해소 */
.guardian-v2 .gcard--zero    .gcard__sub { font-size: 0.9cqw; }
.guardian-v2 .gcard--always  .gcard__sub { font-size: 1.23cqw; }
.guardian-v2 .gcard--public  .gcard__sub { font-size: 1.08cqw; }
.guardian-v2 .gcard--safe    .gcard__sub { font-size: 0.64cqw; }
.guardian-v2 .gcard--policyL .gcard__sub { font-size: 0.73cqw; }
.guardian-v2 .gcard--policyR .gcard__sub { font-size: 0.64cqw; }

/* ---- centered title + CTA (foreground) ---- */
.guardian-v2 .hero-head {
  position: absolute;
  top: 15%; left: 50%;
  transform: translateX(-50%);
  width: 76%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.8cqw, 24px);
  text-align: center;
  z-index: 5;
}
.guardian-v2 .hero-head__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700; line-height: 1.4;
  color: var(--c-text-eyebrow);
  font-size: clamp(15px, 1.2cqw, 22px);
  margin: 0;
  text-shadow: var(--shadow-text);
}
.guardian-v2 .hero-head__title {
  font-family: var(--font-display);
  font-weight: 800; line-height: 1.32;
  color: var(--color-text-primary);
  font-size: clamp(34px, 3.5cqw, 68px);
  margin: 0;
  text-shadow: var(--shadow-text);
  text-wrap: balance;
}
.guardian-v2 .hero-head__desc {
  max-width: 760px;
  color: var(--color-text-secondary);
  font-size: clamp(15px, 1.05cqw, 19px);
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}
.guardian-v2 .hero-head__cta { display: flex; gap: clamp(12px, 1.7cqw, 32px); flex-wrap: wrap; justify-content: center; }

/* hero buttons (match Figma pill 226×60) */
.guardian-v2 .hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-16);
  height: clamp(48px, 3.1cqw, 60px);
  padding: 0 var(--spacing-32);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 800; font-size: 18px;
  color: var(--color-text-primary);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--inset-glow);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
/* 호버: 두 버튼 모두 파란색으로 변하고 화살표가 페이드 인 */
.guardian-v2 .hbtn:hover { transform: translateY(-2px); background: var(--color-brand-secondary); box-shadow: var(--inset-glow), var(--shadow-cta); }
/* 기본색: primary=어두운 네이비, ghost=회색 반투명 (둘 다 파랑 아님) */
.guardian-v2 .hbtn--primary { background: var(--color-bg-navy); text-shadow: 0 0 6.4px var(--c-text-glow); }
.guardian-v2 .hbtn--ghost { background: var(--color-bg-chip); }

/* 두 버튼 모두 hover 시 아이콘 슬라이드 인 → page.css의 .btn-reveal 공통 메커니즘 사용
   (도입 문의=↗, 제품소개 다운로드=⬇). 폭은 자식 max-width 보간으로 부드럽게 확장. */

@media (prefers-reduced-motion: reduce) { .guardian-v2 .hbtn { transition: none; } }

@media (max-width: 860px) {
  .guardian-v2 .hero-stage { aspect-ratio: 1909 / 1320; }   /* a touch taller on mobile */
  .guardian-v2 .hero-marquee { display: none; }
  .guardian-v2 .gcard--policyL, .guardian-v2 .gcard--policyR, .guardian-v2 .gcard--safe { display: none; }
  .guardian-v2 .hero-head { top: 12%; width: 90%; }
}

/* 휴대폰: 고정비율 스테이지를 흐름 레이아웃으로 전환.
   좁은 폭에선 스테이지 높이가 너무 짧아져 절대배치된 .hero-head(타이틀+CTA)가
   스테이지를 넘쳐 잘리고 glass 카드와 겹쳤다 → 카드(장식)는 숨기고 헤드는 흐름에 태운다.
   배경 글로우(.hero-stage::before)는 그대로 남아 분위기 유지. */
@media (max-width: 560px) {
  .guardian-v2 .hero-stage {
    aspect-ratio: auto;
    min-height: 62vh;
    display: flex; align-items: center;
    container-type: normal;   /* cqw 기준 사라짐 → 아래 px/vw 폰트로 대체 */
  }
  .guardian-v2 .gcard { display: none; }
  .guardian-v2 .hero-head {
    position: static;
    transform: none;
    width: 100%;
    padding: 120px 20px 56px;   /* 상단: 절대배치 헤더(로고·햄버거 top:30px) 회피 */
    margin: 0; gap: 20px;
  }
  .guardian-v2 .hero-head__eyebrow { font-size: 14px; }
  .guardian-v2 .hero-head__title   { font-size: clamp(26px, 7.2vw, 38px); margin-top: 0; }
  .guardian-v2 .hero-head__desc { font-size: 14px; line-height: 1.65; }
  /* 모바일에선 히어로 버튼이 과해 보여 축소 (데스크톱 height 60px/18px → 46px/14px) */
  .guardian-v2 .hbtn { height: 46px; font-size: 14px; padding: 0 20px; gap: var(--spacing-8); }
}