/* B09 원가계산 — 탭 줄 · 안내 글. 색은 테마 변수만(밝음 · 어두움 같이). */

.b09-estimation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24); /* B08 본문과 같은 값 */
}

.b09-estimation .ui-general-block__empty,
.b09-estimation__hint {
  color: var(--color-text-secondary);
}

.b09-estimation__hint {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-caption);
}

.b09-estimation__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-border);
}

/* 표 머리 — 좁은 열에서 말줄임 대신 줄바꿈 */
[data-b09-table] thead th {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 157-2 산근 탭 머리 — 안내 글 + 보기 단추 */
.b09-estimation__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
}

/* 157-2 산근 호표별 카드 — 호표 사이 또렷이 · 안은 가름줄 없이 간격 */
.b09-sg-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.b09-sg-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  font-weight: var(--font-weight-bold);
}

.b09-sg-card__no {
  color: var(--color-accent);
}

.b09-sg-card__unit {
  color: var(--color-text-secondary);
}

.b09-sg-card__total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.b09-sg-card__line {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr) repeat(4, 7.5em) 10em;
  column-gap: var(--spacing-8);
  padding: var(--spacing-4) 0;
}

.b09-sg-card__cols,
.b09-sg-card__sub {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.b09-sg-card__line.is-title {
  margin-top: var(--spacing-4);
  font-weight: var(--font-weight-bold);
}

.b09-sg-card__line.is-clickable {
  cursor: pointer;
}

.b09-sg-card__line.is-clickable:hover,
.b09-sg-card__line.is-focus,
.b09-sg-card.is-focus {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.b09-sg-card__text,
.b09-sg-card__note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.b09-sg-card__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.b09-sg-card__cols .b09-sg-card__num {
  font-variant-numeric: normal;
}