/* =============================================================================
 * B06_Section_UI_Style.css
 * 3차 워크플로우(종·횡단 생성) 페이지 전용 스타일.
 *
 * 원칙(frontend.md §1): 하드코딩 색상 금지. theme.css 변수(var(--...))만 참조.
 * 공통 컴포넌트 스타일은 ui_template_elements.ts가 주입하므로 여기서는
 * B06 고유 레이아웃(옵션 그룹/결과 메트릭)만 정의한다.
 * ========================================================================== */

/* --- 좌측 입력 폼 --- */
.b06-profile-layout {
  height: calc(100vh - var(--spacing-64));
  height: calc(100dvh - var(--spacing-64));
  min-height: 0;
  overflow: hidden;
}

.b06-profile-layout .ui-workflow-layout__body,
.b06-profile-layout .ui-workflow-layout__main {
  height: 100%;
  min-height: 0;
}

.b06-profile-layout .ui-workflow-layout__main {
  overflow: auto;
}

.b06-profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* 스크롤 영역 상단 여유 — 첫 컨테이너(구조물 배치)가 패널 상단 경계에 붙지 않게
   B05(.b05-route__panel .ui-sidebar-scroll)와 같은 값을 쓴다(2026-08-29 일원화). */
.b06-profile__form .ui-sidebar-scroll {
  padding-top: var(--spacing-8);
}

/* 사이드 컨테이너 양식은 B05 경로 패널(.b05-route__panel-section)과 같게 맞춘다
   — 두 화면의 좌측 패널이 같은 폼으로 보여야 한다(2026-08-23 사용자 지시).
   여백·글자 크기·색을 B05 값으로 옮겼고, 표준단면 「변수 위치 안내」 모식도만
   기존 스타일(.b06-std__diagram*)을 그대로 둔다. */
.b06-profile__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: calc(var(--spacing-8) + var(--spacing-4));
  /* 테두리는 공통 ui-sidebar-section이 전담 — 로컬 border 선언이 공통 색을 덮던
     문제 제거(2026-08-06 사용자 보고). */
  border-radius: var(--radius-cards);
  background-color: var(--color-surface-raised);
  color: var(--color-text-body);
  font-size: var(--text-caption);
}

.b06-profile__group-legend {
  margin: 0;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text);
}

/* 라벨·입력·버튼을 **한 줄**로 세운다(횡단 보기 설정, 2026-08-23 사용자 지시).
   ui-field는 기본이 세로(라벨 위·입력 아래·그 아래 오류 슬롯)라 그대로 두면 버튼이
   오류 슬롯 높이만큼 밀려 수평이 안 맞는다 — 이 줄에서만 가로로 눕히고 오류 슬롯을 접는다. */
.b06-profile__field-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.b06-profile__field-row > .ui-field {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
}

.b06-profile__field-row .ui-field__label {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.b06-profile__field-row .ui-input {
  flex: 1 1 auto;
  min-width: 0;
}

.b06-profile__field-row .ui-field__error {
  display: none;
}

/* 창이 좁아 좌측 패널이 237px 까지 물러난 자리 — 라벨이 안 줄어 2px 이 새어 나왔다.
   그 폭에서만 라벨을 윗줄로 접는다. 넓은 폭 배치는 손대지 않는다(2026-09-08 실측).
   ⚠ 폭 제한 없이 `flex-wrap` 을 주면 넓은 폭에서도 라벨이 윗줄로 올라간다 — 재 보고 되돌렸다. */
@media (max-width: 560px) {
  .b06-profile__field-row > .ui-field {
    flex-wrap: wrap;
  }
}

.b06-profile__field-row > .ui-btn {
  flex: 0 0 auto;
}

/* --- 읽기 전용 경로 컨텍스트 --- */
.b06-profile__info-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-text-body);
}

.b06-profile__info-line span {
  color: var(--color-text-secondary);
}

.b06-profile__info-line strong {
  font-family: var(--font-mono);
  text-align: right;
}

/* --- 액션 버튼 행 --- */
.b06-profile__actions {
  display: flex;
  gap: var(--spacing-8);
}

.b06-profile__actions > * {
  flex: 1 1 0;
  min-width: 0;
}

/* --- 표준 횡단면 설정 패널 --- */
.b06-std {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.b06-std__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* ─── 변수 위치 안내 모식도 (작업 C-5) ───────────────────────────── */
.b06-std__diagram {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background-color: var(--color-surface);
  padding: var(--spacing-8);
}

.b06-std__diagram-summary {
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  user-select: none;
}

.b06-std__diagram-svg {
  width: 100%;
  height: auto;
  margin-top: var(--spacing-8);
}

.b06-std__diagram-caption {
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ─── 다른 프로젝트에서 불러오기 (작업 C-6) ───────────────────────── */
.b06-std__loader {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background-color: var(--color-surface);
  padding: var(--spacing-8);
}

.b06-std__loader-summary {
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  user-select: none;
}

.b06-std__loader-status {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.b06-std__loader-preview {
  margin: 0;
  padding: var(--spacing-8);
  border-radius: var(--radius-inputs);
  background-color: var(--color-surface-raised);
  color: var(--color-text-body);
  font-size: var(--text-caption);
  white-space: pre-wrap;
  overflow-x: auto;
}

.b06-diag__ground {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.b06-diag__road {
  fill: none;
  stroke: var(--color-text-body);
  stroke-width: 2;
}

.b06-diag__center {
  stroke: var(--color-royal-amethyst, rgb(109 40 217));
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

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

.b06-diag__ditch {
  fill: color-mix(in srgb, rgb(37 99 235) 20%, transparent);
  stroke: rgb(37 99 235);
  stroke-width: 1;
}

.b06-diag__cut {
  stroke: rgb(220 38 38);
  stroke-width: 1.5;
}

.b06-diag__fill {
  stroke: rgb(37 99 235);
  stroke-width: 1.5;
}

.b06-diag__label {
  fill: var(--color-text-body);
  font-size: 14px;
}

.b06-diag__label-sm {
  fill: var(--color-text-secondary);
  font-size: 12px;
}

/* 구간 그룹(details/summary) — 상단 "변수 위치 안내" 모식도와 동일한 균일 8px 패딩으로
   맞춰 접힘 시 좌측·하단 여백을 줄인다(N-4 후속). */
.b06-std__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background-color: var(--color-surface);
}

.b06-std__legend {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* 구간 그룹 접기(N-4-1) — details/summary. 기본 ▶ 마커로 접힘/펼침 표시. */
.b06-std__group > summary.b06-std__legend {
  cursor: pointer;
  user-select: none;
}

.b06-std__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
}

/* 구간 구분선 — 「표준횡단면 상세값」 한 컨테이너 안에서 공통 / 암 / 포장을 가른다
   (2026-09-04 사용자 지시: 공통 항목은 지우고 구분선을 쓸 것). */
.b06-std__divider {
  margin: var(--spacing-4) 0 0;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.b06-std__note {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.b06-std__actions {
  display: flex;
  gap: var(--spacing-8);
}

/* 고친 값이 아직 측점에 안 실렸다는 알림 — [전체 측점 반영] 바로 위. */
.b06-std__pending {
  margin: var(--spacing-8) 0 0;
  padding: var(--spacing-8);
  border-left: 3px solid var(--color-warning, #d98324);
  background: var(--color-surface-muted, rgb(217 131 36 / 8%));
  font-size: 0.85em;
  line-height: 1.45;
}

/* --- 우측 결과 --- */
.b06-profile__result {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
}

.b06-profile__result-title {
  font-size: var(--text-subheading);
  color: var(--color-text);
}

.b06-profile__empty {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.b06-profile__result-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  max-width: 480px;
}

.b06-profile__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-inputs);
  background-color: var(--color-surface);
}

.b06-profile__metric-key {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.b06-profile__metric-val {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-text-body);
  word-break: break-all;
  text-align: right;
}