/* =========================================================================
   Sapie-Guardian — THEME / 디자인 가이드 레이어
   tokens/index.css(원시 색·간격·반경) 위에 얹는 "효과·그라데이션·오버레이"
   공통 토큰. page.css / hero.css 는 raw 색을 쓰지 않고 이 변수만 참조한다.
   로드 순서:  tokens/index.css  →  theme.css  →  page.css  →  hero.css
   ========================================================================= */

/* ---- 호스트 css.css 격리 (saltware.co.kr 이식용) ----
   호스트 common.css 의 `* { font-size:14px; font-family:Noto; color:#fff; letter-spacing:-0.05em; margin/padding:0; }`
   글로벌 리셋과 `header{position:absolute}` 등 bare-tag 규칙이 Guardian 본문에 새는 것을 무력화한다.
   .guardian-v2 하위 모든 요소의 author CSS를 UA 기본값으로 되돌리고, Guardian 자체 규칙(specificity ≥0,2,0)이
   뒤에서 다시 적용된다. 래퍼 본인은 page.css 가 명시적으로 font-size·color·font-family를 세팅.

   ※ SVG 요소는 제외(:not(svg, svg *)): SVG의 fill="url(#…)" 같은 presentation attribute 는
   specificity 가 낮아 all:revert 에 짐 → 그라데이션이 사라져 검정으로 렌더됨. 호스트는 SVG fill/stroke 를
   건드리지 않으니 SVG 내부엔 revert 가 불필요. */
.guardian-v2 *:not(svg, svg *),
.guardian-v2 *::before,
.guardian-v2 *::after { all: revert; }

.guardian-v2 {
  /* ---- 레이아웃 컨테이너 (Figma 1909 프레임 실측) ---- */
  --container:        1528px;   /* 메인 콘텐츠 폭 (intro/grid/rows/deploy) */
  --container-narrow: 1245px;   /* stats 등 좁은 밴드 */
  --container-text:   941px;    /* 히어로 타이틀/CTA 카피 폭 */
  --gutter:           clamp(20px, 5vw, 80px);  /* 좌우 최소 여백(좁은 화면) */

  /* ---- 누락 원시색 (tokens.css 자동생성에 없던 값) ---- */
  --c-navy-glow:     #395d97;   /* 브랜드-소프트 그라데이션 밝은 끝 */
  --c-text-eyebrow:  var(--palette-c5c5c5, #c5c5c5);  /* GEN AI 회색 */
  --c-text-glow:     #c4c4c4;   /* 버튼 텍스트 글로우 */

  /* ---- 화이트 오버레이 (inset 하이라이트/글래스) ---- */
  --overlay-white-05: var(--primitive-overlay-white-5, rgba(255,255,255,.05));
  --overlay-white-18: rgba(255,255,255,.18);
  --overlay-white-25: rgba(255,255,255,.25);
  --overlay-white-50: var(--primitive-overlay-white-50, rgba(255,255,255,.5));

  /* ---- 블랙 스크림 (헤더/대시보드 오버레이) ---- */
  --scrim-45: rgba(0,0,0,.45);
  --scrim-50: rgba(0,0,0,.5);
  --scrim-55: rgba(0,0,0,.55);
  --scrim-60: rgba(0,0,0,.6);

  /* ---- 브랜드/네이비/액센트 글로우 ---- */
  --glow-brand-28:  rgba(5,105,255,.28);
  --glow-brand-40:  rgba(5,105,255,.40);
  --glow-brand-45:  rgba(5,105,255,.45);
  --glow-navy-90:   rgba(11,21,48,.9);
  --glow-navy-edge: rgba(44,62,105,.6);   /* = primitive-navy-500 @60% */
  --glow-cyan:      rgba(0,240,255,.5);
  --glow-cyan-30:   rgba(0,240,255,.3);
  --glow-error:     rgba(244,0,57,.45);
  --glow-error-25:  rgba(244,0,57,.25);
  --glow-white-22:  rgba(255,255,255,.22);   /* 뽀얀(milky) 코어 블룸 */

  /* ---- 합성 효과 (Figma Effect Styles) ---- */
  --shadow-text:      0 11px 21px rgba(65,62,62,.8);   /* Figma Shadow/Text */
  /* Stats 큰 숫자 — 뽀얀 네온 블룸 (tight→wide + 흰 코어) */
  --text-glow-cyan:   0 0 4px var(--glow-white-22),
                      0 0 10px var(--glow-cyan),
                      0 0 24px var(--glow-cyan),
                      0 0 48px var(--glow-cyan-30),
                      0 0 84px var(--glow-cyan-30);
  --text-glow-error:  0 0 4px var(--glow-white-22),
                      0 0 10px var(--glow-error),
                      0 0 24px var(--glow-error),
                      0 0 48px var(--glow-error-25),
                      0 0 84px var(--glow-error-25);
  --shadow-card:      0 4px 14px var(--scrim-45);       /* Figma Shadow/Card */
  --shadow-cta:       0 8px 24px var(--glow-brand-40);
  --shadow-dashboard: 0 30px 80px var(--scrim-60);
  --inset-glow:       inset 0 1.65px 9px var(--overlay-white-50);
  --inset-glow-soft:  inset 0 1.65px 9px var(--overlay-white-18);
  --inset-edge:       inset -6px 5px 9px -7px rgba(136,136,136,.5);     /* intro card 모서리 */
  --inset-edge-glow:  inset 1px -4px 9px -7px var(--overlay-white-50),
                      inset -6px 5px 9px -7px var(--overlay-white-50);  /* hl 카드 */

  /* ---- 그라데이션 ---- */
  --grad-brand-soft:  linear-gradient(90deg, var(--primitive-navy-800, #101523) 54%, var(--c-navy-glow));
  --grad-chip:        linear-gradient(90deg, rgba(91,91,91,.3), rgba(18,18,18,.3));
  /* 차트(곡선 영역): SVG fill stop / stroke 용 개별 색 토큰
     라인 근처(상단)는 짙고, 하단은 투명하게 페이드 */
  --chart-blue-line:   rgba(90,180,255,1);     /* 빛나는 라인 */
  --chart-blue-fill-0: rgba(40,130,255,.62);   /* 라인 근처(짙음) */
  --chart-blue-fill-1: rgba(40,120,255,0);     /* 하단(투명) */
  --chart-red-line:    rgba(255,50,90,1);
  --chart-red-fill-0:  rgba(244,0,57,.62);
  --chart-red-fill-1:  rgba(244,0,57,0);
  /* 히어로 하단을 검정으로 자연스럽게 페이드 → 아래 검정 Stats 섹션과 매끄럽게 연결 */
  --grad-hero-veil:   linear-gradient(180deg,
                        rgba(11,21,48,0) 72%,
                        rgba(0,0,0,.35) 90%,
                        var(--palette-000000, #000) 100%);
  --glow-radial-brand: radial-gradient(50% 50% at 50% 50%, var(--glow-brand-45), rgba(11,21,48,0) 70%);
  --glow-radial-cta:   radial-gradient(70% 80% at 50% 120%, var(--glow-brand-45), transparent 70%);
  /* CTA mint 버튼 내부 그라데이션 (Figma node 3390:2898) */
  --grad-cta-btn:      linear-gradient(90deg, rgba(13,18,25,.2) 26%, rgba(13,18,25,.2) 70%, rgba(0,199,233,.2));
  --glow-radial-card:  radial-gradient(130% 90% at 115% -15%, var(--glow-brand-40), transparent 60%);
}