Aislo/B06_Section/B06_Section_UI_Style_Cross_Detail.css

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

/* 측구 줄 맨 오른쪽 — ⋯ 가 보이면 그 옆, 숨으면 혼자 오른쪽 끝 */
.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;
}

/* 표 위 CAD 칸(265-1) — 표 아래 · 머리 한 줄 접기(공용 `ui-collapsible` · 접히면 그림이 남은 높이) */
.b06-detail__notebox {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 4px);
}

.b06-detail__notehead {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text);
}

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

.b06-detail__table {
  flex: none;
  /* 고른 칸 바깥 줄(259-3) 자리 기준 */
  position: relative;
}

/* 그림 칸 = 테마 색(173-4 · 카드와 같은 바탕) · 그림은 칸 크기로 새로 그려 가득 */
.b06-detail__cad {
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  color: var(--color-text);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  /* [+ − ⤢] 우상단(164-1) */
  position: relative;
}

.b06-detail__cad > svg {
  display: block;
  width: 100%;
  height: 100%;
}

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

.b06-detail__qtable {
  /* 이름 칸 바탕 = 데이터 표 머리색(179-3 · `ui_template_data_table` --dt-head) */
  --b06-detail-head: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  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;
  background: var(--b06-detail-head);
  color: var(--color-text);
}

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

/* 표 칸 누름 ↔ 그림 강조(150-4 · 164-2) — 짝 있는 칸만 손가락 · 고른 칸 붉게 · 테두리는 묶음 바깥 한 줄(259-3) */
.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);
  color: var(--color-danger);
}

.b06-detail__pick-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.b06-detail__pick-outline path {
  fill: none;
  stroke: var(--draw-danger);
  stroke-width: 2;
  stroke-linecap: square;
}

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

/* 빈 칸 = 값 칸만 바탕 지움 · 이름 칸은 머리색 그대로(글만 회색) */
.b06-detail__qtable td[data-key][data-empty] {
  background: none;
}

.b06-detail__qtable th[data-key][data-empty] {
  background: var(--b06-detail-head);
}

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

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

.b06-detail__cad .b06-chart__ground-center.is-active line,
.b06-detail__cad .b06-chart__center.is-active line {
  stroke: var(--draw-danger);
  stroke-width: 3;
}

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

/* 표 손질(179-4) — 더한 칸 글 손질 · 다시 고를 칸 · 우클릭 메뉴는 모달 위 */
.b06-detail__qtable [contenteditable] {
  cursor: text;
  min-width: 2em;
}

.b06-detail__qtable [contenteditable]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.b06-detail__qtable [data-repick] {
  color: var(--color-danger);
}

.b06-detail__context-menu.ui-ctx-menu {
  z-index: 1001;
}

/* 그래프에서 고르기 — 고를 대상만 손가락 · 왼쪽 아래(눈금 자리) 안내 글 */
.b06-detail__cad[data-pick="area"] .b06-chart__area > polygon {
  cursor: pointer;
}

/* 선 조각 판정 선(209-1) — 투명 굵은 선 · 배율 무관 굵기 · 고른 조각 = 붉은 띠 */
.b06-detail__piece,
.b06-detail__piece-group {
  fill: none;
  stroke: transparent;
  /* 누름 판정은 거리(LINE_PICK_PX 4) — 굵기는 걸침 표시만 */
  stroke-width: 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}

/* 구조물 선 묶음(295-3) — 나뉜 조각 위 한 줄 · 걸치면 선 하나로 비침 */
.b06-detail__piece:hover,
.b06-detail__piece-group:hover {
  stroke: color-mix(in srgb, var(--draw-accent) 25%, transparent);
}

.b06-detail__piece.is-selected {
  stroke: color-mix(in srgb, var(--draw-danger) 55%, transparent);
  stroke-width: 6;
}

/* 닫힌 영역 판정 면(259-2) — 투명 채움으로 누름 · 고른 영역 = 붉은 채움 */
.b06-detail__face {
  fill: transparent;
  stroke: none;
  pointer-events: fill;
  cursor: pointer;
}

.b06-detail__face:hover {
  fill: color-mix(in srgb, var(--draw-accent) 8%, transparent);
}

.b06-detail__face.is-selected {
  fill: color-mix(in srgb, var(--draw-danger) 22%, transparent);
}

/* 고른 것 값(카드 179-1 꼴) · [칸에 넣기] — [+ − ⤢] 왼쪽 */
.b06-detail__commit {
  width: auto;
  padding: 0 var(--spacing-4);
  color: var(--color-accent);
  white-space: nowrap;
}

.b06-detail__commit[hidden] {
  display: none;
}

.b06-detail__cad[data-pick]::after {
  content: attr(data-pick-hint);
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-cards);
  background: var(--color-accent);
  color: var(--color-surface);
  font-size: var(--text-caption);
}