/* ============================================================================
   CSI 공개면 — Hero 영역 전용 navy
   ----------------------------------------------------------------------------
   범위는 각 페이지의 맨 위 Hero 컨테이너 안쪽뿐이다.
   body, section, card, form, header 에 대한 전역 규칙을 두지 않는다.
   Hero 밖으로 새면 실패이므로 모든 선택자를 `body[data-hero-navy]` +
   Hero 컨테이너로 한정했다.

   적용 대상은 98c7ad9 기준 Hero 가 밝았던 9개 페이지다. 이미 Hero 가 다크였던
   5개(ai-operating-diagnosis · ai-operating-room · intake-to-delivery ·
   bridge-ai-phone · csi-self-geo-case)에는 이 마커를 붙이지 않아 원본 그대로 둔다.

   색 기준은 csi-self-geo-case.html 의 .hd 실측값 그대로다.
       .hd{background:var(--ink)}  --ink  #08152b
       .hd h1  #ffffff  /  .hd p  #a9bdd9  /  .hd .meta  #7f95b5
       .hd .meta span  #eef4ff  /  --cy4  #22d3ee
   대비: 흰 제목 18.22 · 본문 9.52 · 보조 5.96 · 시안 10.08 · CTA 흰글자 5.89
   ========================================================================== */

body[data-hero-navy] {
  --hero-navy: #08152b;
  --hero-navy-2: #14294b;
  --hero-line: rgba(148, 197, 255, 0.28);
  --hero-on-0: #ffffff;
  --hero-on-1: #a9bdd9;
  --hero-on-2: #7f95b5;
  --hero-ice: #eef4ff;
  --hero-cyan: #22d3ee;
  --hero-cta: #0c6c90;
}

/* ── Hero 컨테이너 ───────────────────────────────────────────────────────── */
body[data-hero-navy] .hero,
body[data-hero-navy] .detail-hero,
body[data-hero-navy] #detailIntro,
body[data-hero-navy] header.doc {
  background: var(--hero-navy);
  background-image: none;
  border-color: var(--hero-line);
  color: var(--hero-on-1);
}

/* 전폭(full-bleed) 배경은 넣지 않는다.
   ::before + position:relative 와 box-shadow + clip-path 를 각각 실측했는데
   둘 다 Hero 에 stacking context 를 만들고, 그때 Chrome 이 글자 안티에일리어싱
   방식을 바꿔 Hero 밖 글자 픽셀이 dashboard 모바일 기준 1.8% 달라졌다
   (색 변경은 아니고 최대 차이 64/255). position:static 이면 0.000% 다.
   "Hero 밖 차이 0" 을 지키는 쪽을 택해 배경은 Hero 박스 안에만 칠한다. */

/* ── Hero 안 글자 ────────────────────────────────────────────────────────── */
body[data-hero-navy] .hero h1,
body[data-hero-navy] .detail-hero h1,
body[data-hero-navy] #detailIntro h1,
body[data-hero-navy] header.doc h1,
body[data-hero-navy] .hero h2,
body[data-hero-navy] .detail-hero h2,
body[data-hero-navy] #detailIntro h2,
body[data-hero-navy] header.doc h2 {
  color: var(--hero-on-0);
}
body[data-hero-navy] .hero p,
body[data-hero-navy] .detail-hero p,
body[data-hero-navy] #detailIntro p,
body[data-hero-navy] header.doc p,
body[data-hero-navy] .hero li,
body[data-hero-navy] #detailIntro li,
body[data-hero-navy] header.doc li,
body[data-hero-navy] .hero small,
body[data-hero-navy] .detail-hero small {
  color: var(--hero-on-1);
}
body[data-hero-navy] .hero .eyebrow,
body[data-hero-navy] .detail-hero .eyebrow,
body[data-hero-navy] header.doc .doc-meta,
body[data-hero-navy] .hero .hero-sub + *,
body[data-hero-navy] .detail-hero .service-tag {
  color: var(--hero-on-2);
}
body[data-hero-navy] .hero strong,
body[data-hero-navy] .detail-hero strong,
body[data-hero-navy] #detailIntro strong,
body[data-hero-navy] header.doc strong { color: var(--hero-ice); }

/* Hero 안 링크는 밝은 시안 (10.08:1) */
body[data-hero-navy] .hero a:not(.btn):not([class*="cta"]):not(.nav-cta),
body[data-hero-navy] .detail-hero a:not(.btn):not([class*="cta"]),
body[data-hero-navy] #detailIntro a,
body[data-hero-navy] header.doc a { color: var(--hero-cyan); }

/* ── Hero 안 배지 · 칩 · 태그 ───────────────────────────────────────────── */
body[data-hero-navy] .hero .badge,
body[data-hero-navy] .detail-hero .badge,
body[data-hero-navy] .hero .chip,
body[data-hero-navy] .detail-hero .chip,
body[data-hero-navy] .detail-hero .service-tag,
body[data-hero-navy] .hero .hero-axes a,
body[data-hero-navy] .detail-hero .detail-icon,
body[data-hero-navy] header.doc .doc-meta span {
  background: var(--hero-navy-2);
  border-color: var(--hero-line);
  color: var(--hero-on-1);
}

/* ── Hero 안 개념 카드(index 02 섹션이 아니라 Hero 내부의 것만) ─────────── */
body[data-hero-navy] .hero .hero-concept,
body[data-hero-navy] .hero .hc-ico {
  background: var(--hero-navy-2);
  border-color: var(--hero-line);
}
body[data-hero-navy] .hero .hc-tx strong { color: var(--hero-on-0); }
body[data-hero-navy] .hero .hc-tx small { color: var(--hero-on-1); }

/* ── Hero 안 버튼 — 실제 배경 기준 AA ───────────────────────────────────── */
body[data-hero-navy] .hero .btn.cta-free,
body[data-hero-navy] .hero a.cta-free,
body[data-hero-navy] .detail-hero .btn-primary,
body[data-hero-navy] .hero .btn-primary,
body[data-hero-navy] header.doc .btn-primary {
  background: var(--hero-cta);
  border-color: var(--hero-cta);
  color: #ffffff;
}
body[data-hero-navy] .hero .btn-ghost,
body[data-hero-navy] .hero .btn.btn-ghost,
body[data-hero-navy] .detail-hero .btn-secondary,
body[data-hero-navy] .hero .btn-secondary {
  background: transparent;
  border-color: var(--hero-line);
  color: var(--hero-on-1);
}
body[data-hero-navy] .hero .btn-ghost:hover,
body[data-hero-navy] .detail-hero .btn-secondary:hover { border-color: var(--hero-cyan); color: var(--hero-cyan); }

/* ── Hero 안 그라디언트 제목 — color:transparent 라 gradient 자체가 글자다.
      다크에서 읽히도록 양끝을 밝게 (픽셀 실측 6.73 / 5.70). ─────────────── */
body[data-hero-navy] .hero .accent-text,
body[data-hero-navy] .hero .accent,
body[data-hero-navy] .detail-hero .accent-text {
  background: linear-gradient(90deg, var(--hero-cyan) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Hero 안 Key Visual — 매핑·크기는 그대로 두고 배경과 이어지게만 ─────── */
body[data-hero-navy] .hero .hero-visual img,
body[data-hero-navy] .detail-hero .kv-figure img {
  filter:
    drop-shadow(0 0 30px rgba(34, 211, 238, 0.20))
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.40));
}

/* ── Hero 안 focus ──────────────────────────────────────────────────────── */
body[data-hero-navy] .hero :focus-visible,
body[data-hero-navy] .detail-hero :focus-visible,
body[data-hero-navy] #detailIntro :focus-visible,
body[data-hero-navy] header.doc :focus-visible {
  outline: 3px solid var(--hero-cyan);
  outline-offset: 2px;
}

/* ── dashboard: Hero 안쪽 .hero-panel 이 자기 배경을 칠해 navy 를 덮는다.
      Hero 컨테이너 범위 안이므로 여기서만 함께 어둡게 한다. ─────────────── */
body[data-hero-navy] .hero .hero-panel {
  background: var(--hero-navy);
  background-image: none;
  border-color: var(--hero-line);
}
body[data-hero-navy] .hero .hero-panel .board-card,
body[data-hero-navy] .hero .hero-panel .mini-card {
  background: var(--hero-navy-2);
  background-image: none;
  border-color: var(--hero-line);
}
body[data-hero-navy] .hero .hero-panel .board-title,
body[data-hero-navy] .hero .hero-panel .mini-label { color: var(--hero-on-0); }
body[data-hero-navy] .hero .hero-panel .mini-note,
body[data-hero-navy] .hero .hero-panel .board-tag { color: var(--hero-on-1); }

/* ── project: Hero 안 문단이 인라인 style="color:#4d5c78" 로 어둡게 고정돼
      navy 위에서 2.71:1 이 된다. 인라인은 특이도로 못 이겨 이 범위에서만
      !important 를 쓴다. Hero 밖에는 적용되지 않는다. ─────────────────── */
body[data-hero-navy] #detailIntro h2[style],
body[data-hero-navy] #detailIntro p[style],
body[data-hero-navy] #detailIntro li[style] { color: var(--hero-on-1) !important; }
body[data-hero-navy] #detailIntro h1[style] { color: var(--hero-on-0) !important; }