/* ============================================================
   운영 대시보드 / 프로젝트 · 실증 — 두 페이지 전용 정합 CSS (R1.5)

   범위를 body[data-r15-page="dashboard"] 와 [data-r15-page="project"] 로 못박는다.
   두 페이지에만 붙는 속성이라 다른 공개 페이지의 계산 스타일에 닿을 수 없다.

   토큰은 새로 정의하지 않는다. site-r15.css 가 컴포넌트에 스코프한 --r15-* 를
   이 두 페이지에서도 쓸 수 있게 :root 가 아니라 페이지 루트에 한 번만 매핑한다.
   ============================================================ */

body[data-r15-page="dashboard"],
body[data-r15-page="project"] {
  --sc-nv-1: #0b1224;
  --sc-nv-2: #0e1730;
  --sc-cobalt: #3b62f6;
  --sc-cobalt-2: #2947d8;
  --sc-cobalt-ink: #8fa8ff;
  --sc-on-dark-0: #ffffff;
  --sc-on-dark-2: #9aabc8;
  --sc-on-light-0: #0b1224;
  --sc-on-light-2: #4d5a76;
  --sc-hair-light: rgba(11, 18, 36, 0.10);
}

/* ---------- 공통 Eyebrow (Eyebrow -> H1 -> Description 계층) ---------- */
body[data-r15-page="dashboard"] .r15-eyebrow,
body[data-r15-page="project"] .r15-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-cobalt-2);
}
body[data-r15-page="dashboard"] .r15-eyebrow .dot,
body[data-r15-page="project"] .r15-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc-cobalt-2);
}

/* ---------- 이모지 자리를 대신하는 번호 표시 ----------
   원래 이모지가 있던 자리라 크기·정렬은 그대로 두고 표현만 바꾼다.
   .map-node-icon / .project-icon 은 밝은 면(rgb(243,246,254)) 위라 코발트로 6.50:1,
   .mini-icon 은 다크 보드카드(rgb(22,44,85)) 위라 같은 코발트를 쓰면 1.96:1 로 묻힌다.
   그래서 면 밝기에 따라 색을 나눈다(실측값 기준). */
body[data-r15-page="dashboard"] .mini-icon,
body[data-r15-page="dashboard"] .map-node-icon,
body[data-r15-page="dashboard"] .project-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; padding: 0 8px;
  border: 1px solid var(--sc-hair-light); border-radius: 8px;
  background: rgba(59, 98, 246, 0.06);
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-cobalt-2);
}
/* 다크 보드카드 위 — 흰 글자로 11.00:1 */
body[data-r15-page="dashboard"] .mini-icon {
  color: var(--sc-on-dark-0);
  background: rgba(143, 168, 255, 0.12);
  border-color: rgba(143, 168, 255, 0.28);
}

/* 프로젝트 맵 중앙 — 이모지 대신 얇은 동심원 하나. 새 아이콘 세트가 아니다. */
body[data-r15-page="dashboard"] .map-center-mark {
  width: 44px; height: 44px; margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid var(--sc-cobalt-2);
  box-shadow: inset 0 0 0 5px rgba(59, 98, 246, 0.10);
}

/* step-icon 을 지운 자리의 빈 간격을 정리한다 */
body[data-r15-page="dashboard"] .step-card { gap: 8px; }

/* ---------- 상태표: 좁은 화면에서 가로 넘침 대신 스스로 스크롤 ---------- */
body[data-r15-page="dashboard"] .table-wrap,
body[data-r15-page="dashboard"] .status-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  body[data-r15-page="dashboard"] table { min-width: 560px; }
}

/* ---------- 프로젝트 · 실증 Hero ---------- */
body[data-r15-page="project"] #detailIntro h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.2; letter-spacing: -0.02em;
  /* 이 Hero 는 body[data-hero-navy] 로 다크 네이비다. 밝은면 색(#0b1224)을 쓰면
     rgb(8,21,43) 위에서 1.02:1 이 된다(실측). 흰 글자로 14.87:1. */
  color: var(--sc-on-dark-0); word-break: keep-all;
}
body[data-r15-page="project"] .proof-lead {
  margin-top: 14px; max-width: 62ch;
  font-size: 17.5px; line-height: 1.75; color: #c8d4ea; word-break: keep-all;
}
body[data-r15-page="project"] .proof-sub {
  margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--sc-on-dark-0);
}
body[data-r15-page="project"] .proof-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
body[data-r15-page="project"] .proof-actions .btn { min-height: 44px; }
/* hero-navy.css 에 `body[data-hero-navy] #detailIntro a { color: var(--hero-cyan) }` 가 있다.
   .hero 쪽 규칙과 달리 :not(.btn) 예외가 없어서 이 CTA 까지 시안으로 칠한다.
   그 선택자는 ID 를 포함해 특이도 (1,1,2) 라 클래스만으로는 못 이긴다.
   !important 로 덮지 않고 같은 ID 를 포함해 (1,3,1) 로 정면으로 이긴다.
   실측: primary 는 코발트 채움 위 시안이라 2.86:1 이었다. 흰 글자로 되돌린다. */
body[data-r15-page="project"] #detailIntro .proof-actions .btn-primary {
  background: var(--sc-cobalt); border-color: var(--sc-cobalt); color: #ffffff;
}
body[data-r15-page="project"] #detailIntro .proof-actions .btn-primary:hover {
  background: var(--sc-cobalt-2); border-color: var(--sc-cobalt-2);
}
body[data-r15-page="project"] #detailIntro .proof-actions .btn-ghost {
  color: var(--sc-on-dark-0); border-color: rgba(143, 168, 255, 0.26); background: transparent;
}
body[data-r15-page="project"] #detailIntro .proof-actions .btn-ghost:hover {
  background: rgba(143, 168, 255, 0.10);
}

/* 기존 결함 1건 — .detail-hero .stage-line strong 이 밝은 회색 면(rgb(181,185,191)) 위에
   ice(#eef4ff) 로 찍혀 1.78:1 이다. 이 페이지는 이번 작업의 대상이라 여기서 바로잡는다.
   문구는 그대로 두고 색만 네이비로 되돌린다. */
body[data-r15-page="project"] .detail-hero .stage-line strong { color: var(--sc-on-light-0); }

/* 상세 카드의 범주 표시 — 이모지 아이콘을 대신한다 */
body[data-r15-page="project"] .detail-mark {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid rgba(143, 168, 255, 0.28); border-radius: 8px;
  background: rgba(143, 168, 255, 0.12);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em;
  /* 다크 상세카드(rgb(11,26,55)) 위다. 코발트면 2.45:1 이라 흰 글자로 13.95:1. */
  color: var(--sc-on-dark-0); white-space: nowrap;
}

/* ---------- 두 페이지 공통: 터치 44px 보장 ---------- */
body[data-r15-page="dashboard"] a.btn,
body[data-r15-page="dashboard"] button.btn,
body[data-r15-page="project"] a.btn,
body[data-r15-page="project"] button.btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  body[data-r15-page="dashboard"] *,
  body[data-r15-page="project"] * { transition: none !important; animation: none !important; }
}

/* 기존 결함 1건 — .url-pending("준비중" 등)이 다크 상세카드(rgb(19,32,55)) 위에
   회색 #5b6b7f 로 찍혀 2.99:1 이다. 대상 페이지라 여기서 바로잡는다.
   문구·의미는 그대로 두고, 보조 정보라는 톤은 유지하되 읽히는 밝기로 올린다. */
body[data-r15-page="project"] .detail-hero .url-pending { color: #9aabc8; }

/* 대상 페이지의 터치 영역 44px 보장 — 실측 결과 3종이 36~37px 이었다.
   글자 크기와 배치는 그대로 두고 링크 박스 높이만 채운다. */
body[data-r15-page="dashboard"] .card-link,
body[data-r15-page="dashboard"] .eco-tag-link {
  min-height: 44px;
  display: inline-flex; align-items: center;
}