/* =============================================================================
 * B06_wf3_ProfileCross_UI_Style_Cross.css
 * 종·횡단 도면 뷰(섹션·카드·차트·설계 컨트롤·줌/팬·오버레이) 스타일.
 * 700줄 제한 대응으로 _UI_Style.css에서 분리(패널/폼/모식도는 원본 유지).
 * ========================================================================== */

/* --- 종·횡단 도면 --- */
.b06-profile__main,
.b06-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-width: 0;
}

.b06-section {
  box-sizing: border-box;
  padding-inline: var(--spacing-24);
}

.b06-section__panel,
.b06-cross-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
}

.b06-section__panel {
  position: sticky;
  z-index: 2;
  top: 0;
}

.b06-section__panel > header,
.b06-cross-card > header,
.b06-cross-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.b06-section__panel > header {
  border-bottom: 1px solid var(--color-border);
}

.b06-section__panel > header h3,
.b06-section__heading h3 {
  font-size: var(--text-body);
}

.b06-section__chart-wrap {
  width: 100%;
  overflow-x: auto;
}

.b06-section__chart {
  display: block;
  max-width: none;
}

/* 횡단도 줌·팬 영역(E-5) — 휠 줌/드래그 팬. */
.b06-cross-card__chart-wrap {
  position: relative;
}

.b06-cross-card__chart-wrap .b06-section__chart {
  cursor: grab;
  touch-action: none;
}

.b06-cross-card__chart-wrap .b06-section__chart:active {
  cursor: grabbing;
}

/* 확대해도 선 굵기 고정(E-5) — 줌 시 해상도 저하처럼 보이던 문제 해소. */
.b06-section__chart line,
.b06-section__chart polyline,
.b06-section__chart polygon,
.b06-section__chart rect {
  vector-effect: non-scaling-stroke;
}

.b06-cross-card > .b06-section__chart,
.b06-cross-card__chart-wrap > .b06-section__chart {
  width: 100%;
}

.b06-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-16);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.b06-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
  gap: var(--spacing-16);
}

.b06-cross-card {
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* 마우스 hover 회색 강조는 선택 강조(빨강)보다 하위 — 미선택 카드에만 적용해
   :not(...):hover 특정도가 selected 규칙을 넘어 빨강 테두리를 덮지 않게 한다. */
.b06-cross-card:not(.b06-cross-card--selected):hover {
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
}

.b06-cross-card--selected {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger);
}

/* 제목행 1행 구조(E-2/E-3): 측점 라벨 → 단면유형 pill → 지반유형 → 구조물·kind. */
.b06-cross-card > header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.b06-cross-card__title,
.b06-cross-card > header > .b06-cross-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  flex: 0 0 auto;
}

/* 지반유형 세그먼트(D-6): 제목행 1행 내 인라인 배치. 좌측 구분선(3번). */
.b06-design__seg--header {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.b06-cross-card__ground {
  padding-left: var(--spacing-8);
  border-left: 1px solid var(--color-border);
}

/* 단면유형 pill(E-3) — 구조물 pill과 동일 표기. */
.b06-cross-card__mode {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--radius-pills);
  background: color-mix(in srgb, var(--color-info, rgb(37 99 235)) 14%, transparent);
  color: var(--color-info, rgb(37 99 235));
  font-size: var(--text-caption);
  white-space: nowrap;
}

/* 단면유형 pill을 지반유형 우측·우측 맞춤으로 밀어 붙인다(1번). meta는 그 뒤에 따라온다. */
.b06-cross-card__mode--right {
  margin-left: auto;
}

.b06-cross-card > header strong {
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

/* 비정규 측점의 구조물 라벨 — kind(일반측점/BP/EP) 좌측에 자수정색 pill로 표기. */
.b06-cross-card__structure {
  padding: 1px 6px;
  border-radius: var(--radius-pills);
  background: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 16%, transparent);
  color: var(--color-royal-amethyst, rgb(109 40 217));
  font-size: var(--text-caption);
  white-space: nowrap;
}

.b06-cross-card > footer {
  border-top: 1px solid var(--color-border);
}

.b06-section__empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  border: 1px dashed var(--color-text-muted);
  color: var(--color-text-muted);
  background: var(--color-surface);
}

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

.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;
}

/* 구조물(비정규) 측점 이름 — 종단면도 측점선 상단 표기. */
.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;
}

.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;
}

.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 {
  stroke: var(--color-warning);
}

.b06-chart__station-line--ep {
  stroke: var(--color-accent);
  stroke-dasharray: 4 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 {
  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;
}

/* 선행 조건 미충족 옵션(E-6) — 상시 노출하되 흐리게·클릭 불가. */
.b06-design__seg--disabled {
  opacity: 0.4;
}

.b06-design__seg--disabled .b06-design__btn {
  cursor: not-allowed;
}

.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) — 그래프 X축 제목 행 우측 맞춤. */
.b06-cross-card__rockb {
  position: absolute;
  right: var(--spacing-8);
  bottom: 2px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border-radius: var(--radius-inputs);
  padding: 1px 4px;
}

/* 절·성토 면적 오버레이(E-4) — 그래프 중상단, 배경색으로 그래프 선과 겹쳐도 가독. */
.b06-cross-card__areas {
  position: absolute;
  top: var(--spacing-8);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: var(--spacing-8);
  padding: 2px 8px;
  border-radius: var(--radius-inputs);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}

.b06-design__area--cut {
  color: rgb(220 38 38);
}

.b06-design__area--fill {
  color: rgb(37 99 235);
}

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

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

/* 암 경계선(설계선 복사 + 오프셋): 리핑암·발파암 구간 점선 */
.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;
}