/* =============================================================================
 * E02_StabGround_UI_Style.css
 * E02 지반 조건 본문 카드 · 표 · 입력 칸 — 색은 테마 토큰만(밝음 · 어두움 같이)
 * ========================================================================== */

.e02-page {
  height: 100%;
  overflow: auto;
  padding: var(--spacing-16);
  box-sizing: border-box;
}

.e02-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
  gap: var(--spacing-16);
  align-items: start;
}

.e02-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

.e02-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.e02-card__title,
.e02-card__sub {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body);
}

.e02-card__sub {
  font-size: var(--text-body-sm);
  margin-top: var(--spacing-8);
}

.e02-card__actions {
  display: flex;
  gap: var(--spacing-4);
}

.e02-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  color: var(--color-text-body);
}

.e02-table th {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-align: left;
  white-space: nowrap;
}

.e02-table td {
  padding: 2px var(--spacing-4);
  vertical-align: middle;
}

.e02-table--read td {
  padding: 2px var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.e02-table--read tr.is-zoned td {
  background: var(--color-mist-violet);
  color: var(--color-text);
}

.e02-stations {
  max-height: 320px;
  overflow: auto;
}

.e02-input {
  width: 100%;
  min-width: 64px;
  box-sizing: border-box;
}

.e02-input--num {
  min-width: 56px;
  text-align: right;
}

.e02-input--name {
  min-width: 96px;
}

.e02-input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.e02-rowhead {
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.e02-map,
.e02-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-8);
  align-items: end;
}

.e02-map__title {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.e02-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.e02-hint,
.e02-empty {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.e02-status {
  margin: var(--spacing-8) 0 0;
  white-space: pre-line;
  font-size: var(--text-body-sm);
  color: var(--color-warning);
}

.e02-status.is-error {
  color: var(--color-danger);
}

.e02-table .ui-btn {
  white-space: nowrap;
}

.e02-input[data-path$=".water"] {
  min-width: 120px;
}

/* 좁은 화면 — 표만 옆으로 밀림(카드 밖으로 안 나감) */
.e02-card {
  overflow-x: auto;
}

/* 물성 표는 열이 많아 한 줄 통째 */
.e02-card--wide {
  grid-column: 1 / -1;
}

/* 지하수 카드 — 사용자 수위선 점(offset · 깊이) 줄 */
.e02-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  align-items: center;
}

.e02-point {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}