/* SVG 차트 색상은 테마 토큰만 사용한다. */
.b06-chart__bg {
  fill: var(--color-surface-raised);
}

/* 세로 창을 변환으로 옮기는 겹(2026-09-04) — 세로로 눌리거나 늘어나도 선 굵기·점선 간격은
   그대로여야 한다. 변환이 걸려 있을 때만 적용해 B06 종단·횡단은 예전 그대로 그려진다. */
.b06-chart__ywindow[transform] * {
  vector-effect: non-scaling-stroke;
}

.b06-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.b06-chart__axis {
  stroke: var(--color-text-secondary);
  stroke-width: 1;
}

.b06-chart__tick,
.b06-chart__station-label,
.b06-chart__axis-label {
  fill: var(--color-text-secondary);
  font-family: var(--font-body);
}

.b06-chart__tick,
.b06-chart__station-label {
  font-size: 10px;
}

/* MC(곡선 가운데) 측점 = 사용자가 고칠 자리(507-3) — 한 단계 크게 · 굵게 · 경고색. 고름 빨강은 아래가 이김. */
.b06-chart__station-label--mc {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  fill: var(--color-warning);
}

.b06-station--mc {
  font-size: 1.15em;
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
}

/* 중심고 Y축 라벨(318-2) — 눈금과 같은 10px · 둥근 상자 · 축선 앞에서 멈춤 ·
   바탕 = 불투명 섞음(겹친 눈금 글을 위에서 가림 · 319-1) · 색 = 원지반선 · 설계선(379-3 · `--b06-tag` = _Cross_Areas.css) */
.b06-chart__center-box {
  fill: color-mix(in srgb, var(--b06-tag) 14%, var(--color-surface-raised));
  stroke: var(--b06-tag);
  stroke-width: 1;
}

.b06-chart__center-text {
  fill: var(--b06-tag);
  font-weight: var(--font-weight-medium);
}

/* 겹쳐 위 단으로 올린 측점 이름(407-4) — 선 · 지반선 위라 바탕색 테두리로 읽히게. */
.b06-chart__station-label--lifted {
  paint-order: stroke;
  stroke: var(--color-surface-raised);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 구조물(비정규) 측점 이름 — 종단면도 측점선 상단 표기. */
.b06-chart__structure-label {
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  fill: rgb(180 83 9);
}

.b06-chart__axis-label {
  fill: var(--color-text-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.b06-chart__profile {
  fill: none;
  stroke: var(--color-chart-0);
  stroke-width: 2.5;
}

/* 지반선 · 계획선은 누름을 통과 — 겹친 측점선 누름이 측점 고름 · 임시 횡단으로 감(505-3) */
.b06-chart__profile,
.b06-chart__design-profile {
  pointer-events: none;
}

.b06-chart__cross-profile {
  fill: none;
  stroke: var(--color-chart-1);
  stroke-width: 2.4;
}

/* 종단 계획선(시공계획고): 지반선과 구분되도록 파선 + 강조색 */
.b06-chart__design-profile {
  fill: none;
  stroke: var(--color-royal-amethyst);
  stroke-width: 2.2;
  stroke-dasharray: 8 4;
}

/* 절토(계획고가 지반고보다 낮음) / 성토 구간 음영 */
.b06-chart__band {
  stroke: none;
}

.b06-chart__band--cut {
  fill: rgb(220 38 38 / 14%);
}

.b06-chart__band--fill {
  fill: rgb(37 99 235 / 14%);
}

.b06-chart__balance-boundary {
  stroke: var(--color-royal-amethyst);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}

.b06-chart__station {
  cursor: pointer;
}

/* 구조물 측점선은 끌어 옮길 수 있다 — 커서로 그 사실을 알린다(2026-08-01 사용자 지시). */
.b06-chart__station--draggable {
  cursor: ew-resize;
  touch-action: none;
}

.b06-chart__station-line {
  stroke-width: 1.2;
}

.b06-chart__station-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}

.b06-chart__station-line--bp,
.b06-chart__station-line--regular,
.b06-chart__station-line--curve {
  stroke: var(--color-warning);
}

.b06-chart__station-line--ep {
  stroke: var(--color-accent);
  stroke-dasharray: 4 3;
}

/* 비정규 측점(구조물)은 종단면도에서도 자수정색 파선으로 구분한다(B05 종단 규칙과 정합).
   미선택 시 stroke 미정의로 세로선이 안 그려지던 문제 해소. */
.b06-chart__station-line--irregular {
  stroke: var(--color-royal-amethyst, rgb(139 92 246));
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}

/* 추가 측점(368-3) = 일반측점 색 점선 */
.b06-chart__station-line--plus {
  stroke: var(--color-warning);
  stroke-dasharray: 5 3;
}

.b06-chart__station-line--selected,
.b06-chart__center-marker {
  stroke: var(--color-danger);
  stroke-width: 2.5;
}

/* 십자선이 계획 노선(계획고) 위치를 가리킬 때: 종단 계획선과 동일 색으로 대응시킨다 */
.b06-chart__center-marker--design {
  stroke: var(--color-royal-amethyst);
}

.b06-chart__station--selected .b06-chart__station-label,
.b06-chart__station-label--selected {
  fill: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

/* 측점 표준횡단 설계 지정 컨트롤 (카드 헤더 아래) — 좌측 여유 추가(2번).
   한 행 고정(nowrap): 넘치는 컨트롤은 다음 행으로 밀지 않고 "⋯" 드롭다운으로 이동(N-2-2). */
.b06-design {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
  padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-16);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-8);
}

/* 오버플로 드롭다운(N-2-2): 넘친 컨트롤을 담는 우측 맞춤 "⋯" 메뉴. 세로 배치. */
.b06-design__more {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.b06-design__more-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.b06-design__more-summary::-webkit-details-marker {
  display: none;
}

.b06-design__more[open] .b06-design__more-summary {
  color: var(--color-surface);
  background: var(--color-royal-amethyst);
  border-color: var(--color-royal-amethyst);
}

.b06-design__more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.b06-design__seg {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.b06-design__seg-legend {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 선행 조건 미충족 옵션 — 숨김(179-2 · 옛 E-6 「흐리게 늘 보임」 폐기 · 쪽은 단면유형 알약에). */
.b06-design__seg--disabled {
  display: none;
}

.b06-design__seg-buttons {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  overflow: hidden;
}

.b06-design__btn {
  padding: 3px 8px;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: none;
  border-left: 1px solid var(--color-border);
  cursor: pointer;
}

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

.b06-design__btn--active {
  color: var(--color-surface);
  background: var(--color-royal-amethyst);
  font-weight: var(--font-weight-medium);
}

.b06-design__areas {
  display: inline-flex;
  gap: var(--spacing-8);
  margin-left: auto;
  font-size: 0.72rem;
  font-family: var(--font-mono);
}

/* 암 경계선 제어(E-7) — 하단 정보 행 **왼쪽 맞춤**(318-2 · 중심고는 그래프 Y축 라벨 상자로 옮김). */
.b06-cross-card__rockb {
  flex: 0 0 auto;
  border-radius: var(--radius-inputs);
  padding: 1px 4px;
}

/* 선 공용 칸(370-3) — 고른 선 제목 · 버튼 · 값 한 줄(넘치면 말줄임) · 빈 칸도 자리(띠 높이) 그대로. */
.b06-cross-card__linecell {
  flex: 0 1 auto;
  min-width: 0;
}

.b06-cross-card__linecell.is-empty {
  visibility: hidden;
}

.b06-cross-card__linecell .b06-design__seg-buttons {
  min-width: 0;
}

.b06-cross-card__linecell .b06-design__rockb-readout {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b06-cross-card__linecell .b06-design__rockb-btn {
  flex: 0 0 auto;
  border-left: none;
}

.b06-cross-card__linecell
  .b06-design__rockb-btn:not([hidden])
  ~ .b06-design__rockb-btn:not([hidden]) {
  border-left: 1px solid var(--color-border);
}

/* 측점별 암 절토 경사(2026-09-07) — 행의 **오른쪽 끝**(암 경계 = 왼쪽). */
.b06-cross-card__cutslope {
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: var(--radius-inputs);
  padding: 1px 4px;
}

.b06-design__cutslope-input {
  width: 44px;
  padding: 0 2px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  text-align: right;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
}

/* 화살표(스피너)는 칸이 좁아 지운다 — 값은 직접 넣거나 ↺ 로 되돌린다. */
.b06-design__cutslope-input::-webkit-outer-spin-button,
.b06-design__cutslope-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.b06-design__cutslope-unit {
  padding: 0 2px 0 1px;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  align-self: center;
}