Aislo/B05_Profile/B05_Profile_UI_Style_MassHaul.css

/* =============================================================================
 * B05_Profile_UI_Style_MassHaul.css
 * B05 계획 유토곡선 2차 슬라이드 패널 전용 스타일.
 *
 * 곡선·범례·요약 자체의 스타일은 공용(`common_util_mass_haul.css`)이 이미 정의한다.
 * 여기서는 종단면 패널 안에서 그것들이 놓이는 **자리**만 잡는다.
 * ========================================================================== */

/* 가로 스크롤에도 고정되는 Y축(눈금 오버레이) — buildStickyYAxis(이 파일을 import하는
   _UI_Profile_MassHaul.ts)가 만든다. B05 종단·유토곡선과 B06 종단·유토곡선이 함께 쓰므로
   여기가 정의처다. 0크기 sticky 앵커에 축을 절대배치해 레이아웃 불변. */
.b05-profile__yaxis {
  position: sticky;
  left: 0;
  /* 계획고 편집 버튼 층(z4)보다 위 — 스크롤로 지나가는 ▲▼·⬆⬇ 버튼이 축 라벨 위에
     떠 보이면 안 된다(2026-08-04 사용자 보고). 버튼은 축 띠 아래로 지나간다. */
  z-index: 5;
  width: 0;
  height: 0;
}

.b05-profile__yaxis-inner {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  /* 자기 그래프 영역 밖으로 눈금이 새면 아래 그래프의 축처럼 읽힌다. */
  overflow: hidden;
  /* SVG 배경(b06-chart__bg)과 같은 색으로 스크롤되는 그래프를 가려 값 누출을 막는다. */
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-text-secondary);
  pointer-events: none;
}

.b05-profile__yaxis-tick {
  position: absolute;
  right: 6px;
  color: var(--color-text-secondary);
  /* 10px는 작아 안 읽힌다 — 종단도·유토곡선 공통으로 키운다(2026-08-05 사용자 지시). */
  font-size: 13px;
  white-space: nowrap;
  transform: translateY(-50%);
}

/* 본문 칸을 세로로 쌓아 그래프 스크롤러 아래에 손잡이가 붙게 한다.
   오버레이의 절대배치 기준이기도 하다. */
.b05-route-profile__body-wrap {
  position: relative;
  flex-direction: column;
}

/* 오버레이 서브패널 — 패널 바닥(접기 손잡이 위)에 붙어 종단도·테이블 위를 덮는다
   (2026-08-04 사용자 확정). 높이는 위 경계 리사이저가 --b05-masshaul-height로 조절한다. */
.b05-profile__masshaul-overlay {
  position: absolute;
  right: 0;
  bottom: 0; /* 손잡이는 표준 삼각형(중앙, z-index 6)이라 자리를 차지하지 않는다 */
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: var(--b05-masshaul-height, 280px);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: 0 -4px 12px rgb(0 0 0 / 18%);
}

/* 공용 리사이저는 절대배치라 오버레이 위 경계에 그대로 앉는다. */
.b05-profile__masshaul-overlay > .ui-resizer--vertical {
  top: -3px;
}

/* 요약 막대는 2026-09-06 종단 상단줄로 올라갔다 — 이 자리는 안내 문구가 있을 때만 쓴다.
   비어 있으면 테두리 한 줄도 남기지 않고 접어 곡선이 그만큼 넓게 쓴다. */
.b05-profile__masshaul-bar:empty {
  display: none;
}

.b05-profile__masshaul-bar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* 곡선 가로 스크롤러 — 종단 스크롤러와 scrollLeft를 동기화한다(JS). 세로는 잘라낸다.
   스크롤바는 항상 표시(scroll) — auto면 생겼다 없어질 때 곡선 높이가 널뛰고,
   clientHeight 기반 높이 계산도 함께 흔들린다. */
.b05-profile__masshaul-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 범례 오버레이 — 유토곡선 우상단에 절대배치(B06과 같은 문법). 요약 막대 아래에 앉힌다.
   공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. */
.b05-profile__masshaul-legend {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.b05-profile__masshaul-legend .b06-masshaul__legend {
  pointer-events: auto;
}

.b05-profile__masshaul-bar .b06-masshaul__summary {
  border-top: none;
  padding-top: 0;
}

/* 재계산 대기 표시 — 곡선을 지우지 않고(2026-09-03 깜빡임 제거) 곡선 영역 우측 상단에
   **떠 있는** 알림으로 둔다. 요약 막대에 붙이면 막대가 줄바꿈되며 곡선을 밀어냈다
   (2026-09-04 사용자 보고). 범례(top: 4px) 아래 줄에 앉혀 서로 가리지 않는다. */
.b05-profile__masshaul-pending {
  position: absolute;
  top: 32px;
  right: var(--spacing-8);
  z-index: 4;
  padding: 2px var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pills);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.2;
  pointer-events: none;
}

.b05-profile__masshaul-empty {
  padding: var(--spacing-8) var(--spacing-16);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

/* 2차 슬라이드 손잡이 — 다른 패널들과 **같은 표준 삼각형 손잡이**를 그대로 쓴다
   (2026-08-04 사용자 지시). 패널 본문 바닥에 붙고, 오버레이(z-index 5) 위에 뜬다.
   접혔을 때 테이블 손잡이와 **일렬**로 놓이도록 중앙에서 우측으로 비켜 세운다
   (2026-08-05 사용자 지시 — 좌: 테이블, 우: 유토곡선). */
.b05-profile__masshaul-handle {
  position: absolute;
  bottom: 0;
  left: calc(50% + 44px);
  z-index: 6;
  transform: translateX(-50%);
}

/* 공용 손잡이는 부모 경계 밖(top: -24px) 절대배치로 만들어졌다 — 여기서는 래퍼가
   자리를 잡으므로 흐름에 되돌린다. 크기·모양(64×24 삼각형)은 공용 규칙 그대로다. */
.b05-profile__masshaul-handle .ui-workflow-overlay__handle {
  position: static;
  transform: none;
  margin: 0;
}

/* ── 테이블 오버레이 서브패널 (2026-08-05 사용자 지시) ──────────────────────
   유토곡선과 같은 뼈대. 유토곡선이 열려 있으면 그 위에 쌓인다(bottom은 JS가 조절).
   위→아래 순서: 종단도 → 테이블 → 유토곡선. */
.b05-profile__table-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: var(--b05-table-height, 204px);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: 0 -4px 12px rgb(0 0 0 / 18%);
}

.b05-profile__table-overlay > .ui-resizer--vertical {
  top: -3px;
}

/* 테이블 가로 스크롤러 — 종단 스크롤러와 scrollLeft 동기화(JS). */
.b05-profile__table-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 테이블 손잡이 — 유토곡선 손잡이 왼쪽에 일렬 배치. */
.b05-profile__table-handle {
  position: absolute;
  bottom: 0;
  left: calc(50% - 44px);
  z-index: 6;
  transform: translateX(-50%);
}

.b05-profile__table-handle .ui-workflow-overlay__handle {
  position: static;
  transform: none;
  margin: 0;
}