/* 계산 줄(557-2) — 이름 | 값 112 | 덧칸 · 식 줄 = 이름 | 식 | 값 112 · 테두리는 입력 · 고르기 부품만 */
.ui-calc-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);
}

.ui-calc-row--formula {
  grid-template-columns: max-content minmax(0, 1fr) 112px;
}

.ui-calc-row__label {
  margin: 0;
  color: var(--color-text-secondary);
}

.ui-calc-row__label--select {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.ui-calc-formula {
  margin: 0 0 0 var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.ui-calc-row .ui-calc-formula {
  margin: 0;
  font-size: var(--text-caption);
}

.ui-calc-row__hint {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

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

.ui-calc-row__value {
  text-align: left;
  font-weight: var(--font-weight-medium);
}

.ui-calc-row__out.is-key {
  font-weight: var(--font-weight-bold);
}

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

/* 줄에 바로 놓인 고르기는 값 칸 + 덧칸 — 선택지 글이 안 잘리게 */
.ui-calc-row > .ui-calc-row__select {
  grid-column: 2 / 4;
  justify-self: start;
  width: auto;
}

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

/* 시트 줄(790-1) — 이름 | 식 | 값 112 | 꼬리 · 좁은 상자(560 아래)는 두 줄 · 고친 줄 = 왼쪽 경고 띠 */
.ui-calc-row--sheet {
  grid-template-columns: minmax(96px, 0.7fr) minmax(0, 2fr) 112px minmax(56px, max-content);
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.ui-calc-row--sheet > :nth-child(4) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
}

.ui-calc-row--sheet.is-changed {
  box-shadow: inset 3px 0 0 var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

@container (max-width: 560px) {
  .ui-calc-row--sheet {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .ui-calc-row--sheet > :nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ui-calc-row--sheet > :nth-child(4) {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
:is(.ui-calc-row, .ui-calc-row__label--select)[hidden] {
  display: none !important;
}