Aislo/B06_Section/B06_Section_UI_Style_Cross_Detail.css

/* =============================================================================
 * B06_Section_UI_Style_Cross_Detail.css
 * 횡단 카드 [상세] 단추 · 모달(138-4 · 150-2) — 공용 큰 창 · 그림(남은 높이) → 글 칸 → B07 수량표.
 * ========================================================================== */

/* 측구 줄 맨 오른쪽 — ⋯ 가 보이면 그 옆, 숨으면 혼자 오른쪽 끝 */
.b06-design__detail {
  flex: 0 0 auto;
  margin-left: auto;
}

.b06-design__more:not([hidden]) ~ .b06-design__detail {
  margin-left: 0;
}

/* 스크롤 없음 — 글 · 표는 제 높이 · 그림이 남은 높이를 채움 */
.ui-modal.b06-detail > .ui-modal__body {
  overflow: hidden;
}

.b06-detail__note {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  font: inherit;
}

.b06-detail__table {
  flex: none;
}

/* 가벼운 CAD 꼴 — 어두운 바탕 · 카드 그림 복제에 다크 색 토큰을 덮어씀 */
.b06-detail__cad {
  --color-bg: #111111;
  --color-surface: #111111;
  --color-surface-raised: #1a1a1a;
  --color-border: #3a3a3a;
  --color-text: #f2f2f2;
  --color-text-body: #e6e6e6;
  --color-text-secondary: #b8b8b8;
  --color-text-muted: #8b8b8b;
  --color-primary: #c9a8ff;
  --color-warning: #ffd34d;
  --color-danger: #ff5f57;
  --color-success: #4cd37b;
  border-radius: var(--radius-cards);
  background: #111111;
  color: #f2f2f2;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  /* [+ − ⤢] 우상단(164-1) · 그림은 가운데 */
  position: relative;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 칸 비율 = viewBox 비율(--ratio · 164-1) — 칸 가득 · 여백 없이 커서 고정 줌이 정확 */
.b06-detail__cad > svg {
  display: block;
  flex: none;
  width: min(100cqw, 100cqh * var(--ratio, 2));
  height: auto;
  aspect-ratio: var(--ratio, 2);
}

/* B07 횡단 수량 산출표 — 칸 배치 그대로 */
.b06-detail__table.is-loading {
  opacity: 0.6;
}

.b06-detail__qtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.b06-detail__qtable th,
.b06-detail__qtable td {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.b06-detail__qtable th {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.b06-detail__qtable tr:first-child > th {
  text-align: left;
  color: var(--color-text);
}

/* 표 칸 누름 ↔ 그림 강조(150-4 · 164-2) — 짝 있는 칸만 손가락 · 고른 칸 · 줄 붉게 */
.b06-detail__qtable [data-key] {
  cursor: pointer;
}

.b06-detail__qtable [data-key]:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.b06-detail__qtable .is-picked {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-danger);
  color: var(--color-danger);
}

.b06-detail__qtable tr:has(.is-picked) {
  background: color-mix(in srgb, var(--color-danger) 5%, transparent);
}

/* 그림에 대상이 없는 칸(암석 띠 없음 · 면적 0 · 사토장 없음) — 회색 · 누름 없음 */
.b06-detail__qtable [data-key][data-empty] {
  cursor: default;
  background: none;
  color: var(--color-text-muted);
}

/* 그림 강조 한 벌 = 붉은 계통(164-2 · 카드 색은 그대로) — 띠 · 판정 선 · 중심 십자 · 사토장 */
.b06-detail__cad .b06-chart__area.is-active > polygon {
  fill: color-mix(in srgb, var(--color-danger) 35%, transparent);
  stroke: var(--color-danger);
  stroke-width: 2;
}

.b06-detail__cad .b06-chart__design-hit.is-active {
  stroke: color-mix(in srgb, var(--color-danger) 70%, transparent);
  stroke-width: 9;
}

.b06-detail__cad .b06-chart__center.is-active line {
  stroke: var(--color-danger);
  stroke-width: 3;
}

.b06-detail__cad .b06-chart__spoil-fill.is-active {
  stroke: var(--color-danger);
  stroke-width: 3;
}

/* 판정 선은 복제에서 누를 일 없음 — 손가락 지움 */
.b06-detail__cad .b06-chart__design-hit,
.b06-detail__cad .b06-chart__area > polygon {
  cursor: default;
}