Aislo/B06_Section/B06_Section_UI_Style_Cross_Areas.css

/* =============================================================================
 * B06_Section_UI_Style_Cross_Areas.css
 * 횡단 카드의 **면적 오버레이 계열** 스타일 — 절·성토 면적 표, 면적 강조 밴드,
 * 설계선·암 경계선·포장층, 암 경계선 제어 버튼.
 *
 * `_UI_Style_Cross.css`가 700줄을 넘겨, 도면 뼈대(섹션·카드·차트·줌/팬)와
 * 그 위에 얹는 면적 표기 계열을 갈랐다. 색은 모두 theme.css 토큰만 쓴다.
 * ========================================================================== */

/* 절·성토 면적 오버레이(E-4) — 그래프 중상단, 배경색으로 그래프 선과 겹쳐도 가독.
   절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다. */
.b06-cross-card__areas {
  position: absolute;
  top: var(--spacing-8);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--radius-inputs);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  border-collapse: collapse;
  pointer-events: none;
}

.b06-cross-card__areas th,
.b06-cross-card__areas td {
  padding: 0 5px;
  text-align: center;
  font-weight: var(--font-weight-regular);
}

/* 열 제목은 가운데 맞춤 — 값은 우측 정렬이라 자릿수가 흔들려도 머리글은 열 중앙에 선다. */
.b06-cross-card__areas thead th {
  text-align: center;
  color: var(--color-text-muted);
}

/* 행 이름(절토/성토)은 왼쪽 정렬 — 숫자 열과 구분된다. */
.b06-cross-card__areas tbody th {
  text-align: left;
}

/* 면적 표기 색은 **테마 토큰만** 쓴다. 고정 RGB를 박으면 다크 테마에서 글자가 배경에
   묻힌다(발파암에 쓰던 검정이 그랬다). 차트 팔레트는 밝기가 두 테마 모두에 맞춰져 있다. */
.b06-design__area--cut,
.b06-design__area--cut_total {
  color: var(--color-danger);
}

/* 절토 내역 — 토사(EA), 리핑암(RR), 발파암(BR)을 색으로 갈라 둔다. */
.b06-design__area--cut_soil {
  color: var(--color-chart-2);
}

/* RR은 `--color-slate`를 쓰면 안 된다 — 그 토큰이 곧 `--color-text-secondary`라
   라이트 테마에서 회색 글자가 "비활성"으로 읽히고, 28% 밴드는 흰 배경에 묻힌다.
   `--color-warning`도 못 쓴다(암 경계선 점선이 이미 그 색이라 밴드가 제 경계선과 섞인다). */
.b06-design__area--cut_rr {
  color: var(--color-success);
}

.b06-design__area--cut_br {
  color: var(--color-chart-3);
}

.b06-design__area--fill {
  color: var(--color-chart-0);
}

.b06-design__area--unset {
  color: var(--color-text-muted);
}

/* 선택된 카드에서만 값 칸이 버튼이 된다 — 부모가 pointer-events: none이라 여기서 되살린다. */
.b06-cross-card__areas button {
  padding: 0 2px;
  border: none;
  border-radius: var(--radius-inputs);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  pointer-events: auto;
}

/* 켠 칸은 글자색을 유지한 채 같은 색으로 옅게 칠하고 테두리를 둘러 대비를 살린다. */
.b06-cross-card__areas button.is-active {
  background: color-mix(in srgb, currentcolor 18%, transparent);
  box-shadow: inset 0 0 0 1px currentcolor;
  font-weight: var(--font-weight-medium);
}

/* 면적 강조 밴드 — 평소엔 클릭 대상으로만 남고, 켜질 때만 채워진다. */
.b06-chart__area > polygon {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}

/* 밴드 색은 위 면적표 글자색과 짝을 맞춘다 — 어느 숫자를 켰는지 색으로 바로 읽히게. */
.b06-chart__area--cut_soil.is-active > polygon {
  fill: color-mix(in srgb, var(--color-chart-2) 28%, transparent);
  stroke: var(--color-chart-2);
  stroke-width: 1.2;
}

/* 암반 밴드는 하나지만 색은 암종을 따라간다 — 표의 RR/BR 글자색과 같아야 짝이 읽힌다. */
.b06-chart__area--cut_rr.is-active > polygon {
  fill: color-mix(in srgb, var(--color-success) 28%, transparent);
  stroke: var(--color-success);
  stroke-width: 1.2;
}

.b06-chart__area--cut_br.is-active > polygon {
  fill: color-mix(in srgb, var(--color-chart-3) 28%, transparent);
  stroke: var(--color-chart-3);
  stroke-width: 1.2;
}

.b06-chart__area--fill.is-active > polygon {
  fill: color-mix(in srgb, var(--color-chart-0) 28%, transparent);
  stroke: var(--color-chart-0);
  stroke-width: 1.2;
}

/* 횡단 표준단면 설계선 오버레이. 기본은 실선. */
.b06-chart__design-cross {
  fill: none;
  stroke: var(--color-royal-amethyst);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* 지면선과 겹치는 구간만 점선(dash:gap = 1:1)으로 그려 뒤 지표선이 빈 칸으로 비쳐 보이게 한다. */
.b06-chart__design-cross--overlap {
  stroke-dasharray: 4 4;
}

/* 차도·노견 경계 짧은 수직 틱(N-4-2) — 설계선과 같은 계열, 얇게. */
.b06-chart__carriageway-tick {
  stroke: var(--color-royal-amethyst);
  stroke-width: 1.2;
}

/* 암 경계선(설계선 복사 + 오프셋): 리핑암·발파암 구간 점선 */
.b06-chart__rock-boundary {
  fill: none;
  stroke: var(--color-warning);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* 포장층 박스: 노면 양 끝점 기준 두께만큼 하향 채움 */
.b06-chart__pavement {
  fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
  stroke: var(--color-text-secondary);
  stroke-width: 1;
}

/* 암 경계선 상/하/리셋 제어 (B05 측점 선 제어 ▲/▼/↺ 버튼 패턴 재활용) */
.b06-design__rockb-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: none;
  border-left: 1px solid var(--color-border);
  cursor: pointer;
}

.b06-design__rockb-btn:first-child {
  border-left: none;
}

.b06-design__rockb-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}

.b06-design__rockb-btn.is-reset {
  color: var(--color-warning);
}

.b06-design__rockb-readout {
  padding: 0 var(--spacing-8);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-warning);
  align-self: center;
}

/* 포장 제안 배지: B05 법정 경사 분석이 포장을 권장한 측점 표시 */
.b06-design__paved-badge {
  font-size: 0.72rem;
  color: var(--color-warning);
  cursor: help;
}