/* B08 4탭 홍수량 계산서(PLAN 62-2 · 69-4) — 공용 카드 · 입력 · 드롭다운 위에 줄 배치만.
   색은 테마 토큰만(밝음 · 어두움 같이) · 테두리는 입력 · 선택 칸(공용 ui-input · ui-select)만
   · 굵게 + 붉은 계열은 중요 결과(.is-key)만. */

/* 오른쪽 「진행단계」 떠 있는 판에 안 가리게 */
.b08-hydro__toolbar,
.b08-hydro__sheet {
  max-width: 1000px;
}

.b08-hydro__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

/* 보조 탭 줄 = 다른 B08 보조 탭(.b08-quantity__tabs) 양식 · [저장] 옆까지 줄을 늘림 */
.b08-hydro__tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.b08-hydro__toolbar > .ui-btn {
  flex: 0 0 auto;
}

.b08-hydro__sheet {
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.b08-hydro__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-16);
}

@media (max-width: 960px) {
  .b08-hydro__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.b08-hydro__card .ui-card__title {
  margin-bottom: 0;
}

.b08-hydro__card .ui-card__body {
  gap: var(--spacing-8);
}

.b08-hydro__h2 {
  margin: var(--spacing-8) 0 0;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.b08-hydro__formula {
  margin: 0 0 0 var(--spacing-8);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.b08-hydro__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 0.8fr);
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--control-height-sm);
}

.b08-hydro__row--f {
  grid-template-columns: max-content minmax(0, 1fr) 112px;
}

.b08-hydro__label {
  margin: 0;
  color: var(--color-text-secondary);
}

.b08-hydro__label--select {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.b08-hydro__row .b08-hydro__formula {
  margin: 0;
  font-size: var(--text-caption);
}

.b08-hydro__hint {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

/* 계산 칸 — 테두리 없이 글자만 · 숫자 자리 맞춤 */
.b08-hydro__out,
.b08-hydro__value {
  padding: 0 var(--spacing-8);
  color: var(--color-text-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.b08-hydro__value {
  text-align: left;
  font-weight: var(--font-weight-medium);
}

.b08-hydro__in {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 줄에 바로 놓인 드롭다운은 값 칸 + 덧칸 — 선택지 글이 안 잘리게 */
.b08-hydro__row > .b08-hydro__select {
  grid-column: 2 / 4;
  justify-self: start;
  width: auto;
}

/* 식 칸에 놓인 입력(하상경사 1 / ☐)은 값 칸 폭 */
.b08-hydro__row--f > .b08-hydro__in:nth-child(2) {
  justify-self: start;
  width: 112px;
}

/* 중요 결과 — Qd · 유출량 · 판정 · 유출율 */
.is-key.b08-hydro__out,
.is-key.b08-hydro__verdict {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.b08-hydro__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--spacing-4);
}

.b08-hydro__dims {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  justify-self: stretch;
}

.b08-hydro__pipe {
  width: 170px;
  height: 145px;
}

.b08-hydro__pipe text {
  font-size: var(--text-caption);
  fill: var(--color-text-secondary);
}

.b08-hydro__water {
  fill: color-mix(in srgb, var(--color-chart-0) 30%, transparent);
}

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

.b08-hydro__line {
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1;
}

.b08-hydro__verdict {
  padding: var(--spacing-8) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  text-align: center;
}

.b08-hydro__verdict.is-ng {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-radius: var(--radius-lg);
}

.b08-hydro__status {
  margin: var(--spacing-8) 0 0;
  color: var(--color-danger);
}