/* 房貸試算器：精簡尺寸，依試算器實際寬度（container query）排版 */
.mortgage-calculator-root {
  container-type: inline-size;
  container-name: mortgage-calc;
  min-width: 0;
}

.mortgage-calculator-root .mortgage-form-body {
  gap: 10px;
  padding: 12px;
}

.mortgage-calculator-root .mortgage-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mortgage-calculator-root .mortgage-field {
  gap: 4px;
  min-width: 0;
}

.mortgage-calculator-root .mortgage-field > span:first-child {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 單位字放進輸入框右側，省下一欄寬度 */
.mortgage-calculator-root .mortgage-input-with-unit {
  position: relative;
  display: block;
}

.mortgage-calculator-root .mortgage-input-with-unit input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border-radius: 8px;
  font-size: 16px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.mortgage-calculator-root .mortgage-input-with-unit input::-webkit-outer-spin-button,
.mortgage-calculator-root .mortgage-input-with-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mortgage-calculator-root .mortgage-input-with-unit b {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  color: #667085;
  font-size: 12px;
  pointer-events: none;
}

.mortgage-calculator-root .hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.mortgage-calculator-root .mortgage-primary-result {
  padding: 12px 14px;
  border-radius: 10px;
}

.mortgage-calculator-root .mortgage-primary-result div {
  gap: 4px;
}

.mortgage-calculator-root .mortgage-primary-result small {
  font-size: 12px;
}

.mortgage-calculator-root .mortgage-primary-result strong {
  font-size: clamp(26px, 6cqi, 42px);
}

.mortgage-calculator-root .mortgage-primary-result em {
  font-size: 15px;
}

.mortgage-calculator-root [data-mortgage-primary-note] {
  font-size: 12px;
}

/* 有寬限期時兩張藍色卡片並排：寬限期月付金、寬限期後月付金 */
.mortgage-calculator-root .mortgage-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.mortgage-calculator-root .mortgage-primary-row.has-grace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mortgage-calculator-root .mortgage-primary-result[hidden] {
  display: none;
}

.mortgage-calculator-root [data-mortgage-grace-note] {
  font-size: 12px;
}

.mortgage-calculator-root .mortgage-primary-result [data-mortgage-grace-monthly],
.mortgage-calculator-root .mortgage-primary-result [data-mortgage-monthly] {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.mortgage-calculator-root .mortgage-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mortgage-calculator-root .mortgage-kpi-grid > div {
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
}

.mortgage-calculator-root .mortgage-kpi-grid small {
  font-size: 11px;
  line-height: 1.25;
}

.mortgage-calculator-root .mortgage-kpi-grid strong {
  font-size: clamp(14px, 2.2cqi, 20px);
}

.mortgage-calculator-root .mortgage-action-row .btn {
  min-height: 36px;
}

/* 寬版：一列六格 */
@container mortgage-calc (min-width: 900px) {
  .mortgage-calculator-root .mortgage-field-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mortgage-calculator-root .mortgage-kpi-grid strong {
    font-size: clamp(16px, 1.6cqi, 22px);
  }
}

/* 手機：維持一列三格，再縮小內距 */
@container mortgage-calc (max-width: 480px) {
  .mortgage-calculator-root .mortgage-form-body {
    padding: 10px;
  }

  .mortgage-calculator-root .mortgage-field-grid {
    gap: 6px;
  }

  .mortgage-calculator-root .mortgage-input-with-unit input {
    min-height: 36px;
    padding: 5px 22px 5px 7px;
  }

  .mortgage-calculator-root .mortgage-input-with-unit b {
    right: 6px;
    font-size: 11px;
  }

  .mortgage-calculator-root .mortgage-kpi-grid > div {
    padding: 7px 8px;
  }

  .mortgage-calculator-root .mortgage-kpi-grid strong {
    font-size: 14px;
  }
}

/* 極窄螢幕：改一列兩格 */
@container mortgage-calc (max-width: 240px) {
  .mortgage-calculator-root .mortgage-field-grid,
  .mortgage-calculator-root .mortgage-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}