:root {
  --balance-blue:#2684ff;
  --balance-blue-dark:#1d4ed8;
  --balance-red:#dc2626;
  --balance-orange:#f97316;
  --balance-text:#172033;
  --balance-muted:#64748b;
  --balance-line:#dbe5f3;
  --balance-bg:#f8fbff
}

.calc-portal-card {
  border:0!important;
  box-shadow:none!important;
  background:transparent!important
}

.calc-portal-card-header {
  display:flex;
  gap:12px;
  margin-bottom:22px
}

.balance-notice {
  margin:0 0 22px;
  padding:16px 18px;
  background:#fffaf0;
  border:1px solid #fed7aa;
  border-radius:12px
}

.balance-notice strong {
  display:block;
  color:#9a3412
}

.balance-notice p {
  margin:6px 0 0;
  color:#7c2d12;
  font-size:13px;
  line-height:1.6
}

.balance-calculator-layout {
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(0,1fr);
  gap:22px;
  align-items:start
}

.balance-input-summary {
  position:sticky;
  top:90px
}

.balance-summary-card,.balance-result-summary {
  overflow:hidden;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:1px solid #dbeafe!important;
  border-radius:14px!important;
  box-shadow:0 7px 22px rgba(38,132,255,.08)!important
}

.balance-result-summary {
  margin-top:14px!important
}

.balance-summary-title {
  padding:15px 16px;
  font-weight:800;
  background:#f7fbff;
  border-bottom:1px solid #dbeafe
}

.result-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid #eef2f7
}

.result-row:last-child {
  border-bottom:0
}

.result-row strong {
  color:var(--balance-blue);
  text-align:right;
  white-space:nowrap
}

.result-row.is-danger strong {
  color:var(--balance-red)
}

.input-section {
  overflow:hidden;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:14px
}

.input-hint-global {
  margin:0!important;
  padding:14px 16px!important;
  background:#f1f7ff;
  border-bottom:1px solid #dbeafe
}

.ios-field {
  display:grid;
  grid-template-columns:42px minmax(120px,.8fr) minmax(170px,1.35fr);
  gap:8px 12px;
  align-items:center;
  padding:16px;
  border-bottom:1px solid #eef0f3
}

.ios-field:last-child {
  border-bottom:0
}

.field-icon {
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  color:var(--balance-blue);
  font-weight:800;
  background:#eef6ff;
  border-radius:10px
}

.field-icon-money {
  color:#10b981;
  background:#eafbf5
}

.field-icon-calendar {
  color:#7c3aed;
  background:#f3efff
}

.field-icon-check {
  color:#f59e0b;
  background:#fff8e6
}

.ios-label {
  grid-column:2;
  grid-row:1;
  font-size:14px;
  font-weight:800
}

.field-control {
  grid-column:3;
  grid-row:1;
  position:relative;
  display:flex;
  min-width:0
}

.field-control>input,.field-control>.ios-select {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:0 52px 0 10px;
  box-sizing:border-box;
  color:var(--balance-text);
  font-size:14px;
  font-weight:600;
  text-align:right;
  background:#f8fafc;
  border:1px solid #d8dee8;
  border-radius:9px
}

.field-control>input[type=month],.field-control>.ios-select {
  padding-right:10px;
  text-align:left
}

.field-control>input:focus,.field-control>.ios-select:focus {
  outline:0;
  border-color:var(--balance-blue);
  box-shadow:0 0 0 3px rgba(38,132,255,.12)
}

.field-unit {
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#657083;
  font-size:11px;
  background:#f8fafc;
  pointer-events:none
}

.field-man-value {
  grid-column:3;
  grid-row:2;
  margin:-1px 3px 0 0;
  color:var(--balance-blue);
  font-size:11px;
  font-weight:700;
  text-align:right
}

.field-description {
  grid-column:2/4;
  grid-row:2;
  margin:0;
  color:#667085;
  font-size:11px
}

.amount-buttons {
  grid-column:2/4;
  grid-row:3;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr)) 46px;
  grid-template-rows:repeat(2,38px);
  gap:7px;
  width:100%
}

.amount-buttons button {
  width:100%;
  min-width:0;
  min-height:38px;
  padding:0 5px;
  color:var(--balance-blue-dark);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  border-radius:8px;
  cursor:pointer
}

.amount-buttons button:hover {
  color:#fff;
  background:var(--balance-blue);
  border-color:var(--balance-blue)
}

.amount-buttons .amount-reset {
  grid-column:4;
  grid-row:1/3;
  width:46px;
  min-height:83px;
  color:#9a3412;
  font-size:14px;
  font-weight:800;
  background:#fff7ed;
  border-color:#fdba74;
  border-radius:10px
}

.missed-section {
  margin-top:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:14px
}

.missed-section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px;
  background:#f8fbff;
  border-bottom:1px solid #dbeafe
}

.missed-section-header strong {
  font-size:16px
}

.missed-section-header p {
  margin:4px 0 0;
  color:var(--balance-muted);
  font-size:12px
}

.missed-clear-btn {
  min-height:36px;
  padding:0 12px;
  color:#475569;
  font-weight:700;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:8px;
  cursor:pointer
}

.month-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid #eef2f7
}

.month-legend span {
  font-size:11px;
  color:#64748b
}

.month-legend span:before {
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:5px;
  border-radius:3px
}

.legend-paid:before {
  background:#eafbf5;
  border:1px solid #86efac
}

.legend-missed:before {
  background:#fee2e2;
  border:1px solid #fca5a5
}

.legend-future:before {
  background:#f1f5f9;
  border:1px solid #cbd5e1
}

.month-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:16px
}

.month-btn {
  min-height:44px;
  padding:7px;
  color:#166534;
  font-size:12px;
  font-weight:700;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:9px;
  cursor:pointer
}

.month-btn:hover {
  border-color:var(--balance-blue);
  box-shadow:0 0 0 2px rgba(38,132,255,.1)
}

.month-btn.is-missed {
  color:#b91c1c;
  background:#fee2e2;
  border-color:#fca5a5
}

.month-btn.is-future {
  color:#94a3b8;
  background:#f8fafc;
  border-color:#e2e8f0;
  cursor:default
}

.month-btn small {
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:600
}

.calc-btn,.calc-btn-highlight {
  width:100%;
  min-height:52px;
  margin-top:20px;
  padding:13px 18px;
  color:#fff;
  font-size:15px;
  font-weight:800;
  background:var(--balance-blue);
  border:0;
  border-radius:10px;
  cursor:pointer
}

.calc-btn:hover,.calc-btn-highlight:hover {
  background:var(--balance-blue-dark)
}

.validation-message {
  margin-top:12px;
  padding:13px 14px;
  color:#b91c1c;
  background:#fff1f2;
  border:1px solid #fecdd3;
  border-radius:10px
}

.balance-result-card {
  margin-top:22px;
  padding:22px;
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(38,132,255,.08)
}

.result-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px
}

.result-head h2 {
  margin:8px 0 0;
  font-size:22px
}

.result-head>strong {
  color:var(--balance-blue);
  font-size:16px;
  text-align:right
}

.result-badge {
  display:inline-flex;
  padding:5px 9px;
  color:#1d4ed8;
  font-size:11px;
  font-weight:800;
  background:#eef6ff;
  border-radius:999px
}

.result-badge.is-warning {
  color:#b91c1c;
  background:#fee2e2
}

.progress-area {
  margin-top:20px;
  padding:16px;
  background:#f8fafc;
  border-radius:12px
}

.progress-label {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:800
}

.progress-track {
  height:12px;
  margin-top:10px;
  overflow:hidden;
  background:#e2e8f0;
  border-radius:999px
}

.progress-bar {
  width:0;
  height:100%;
  background:linear-gradient(90deg,#2684ff,#1d4ed8);
  border-radius:inherit;
  transition:width .3s ease
}

.progress-area p {
  margin:9px 0 0;
  color:#64748b;
  font-size:12px
}

.result-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px
}

.result-metric {
  padding:15px;
  background:#f8fbff;
  border:1px solid #e5edf7;
  border-radius:11px
}

.result-metric span,.result-metric small {
  display:block;
  color:#64748b;
  font-size:11px
}

.result-metric strong {
  display:block;
  margin-top:7px;
  color:#172033;
  font-size:17px
}

.result-metric.danger {
  background:#fff7f7;
  border-color:#fecaca
}

.result-metric.danger strong {
  color:var(--balance-red)
}

.result-metric.wide {
  grid-column:span 3
}

.result-metric.wide strong {
  color:var(--balance-blue);
  font-size:21px
}

.result-metric small {
  margin-top:6px;
  line-height:1.5
}

.selected-missed-box {
  margin-top:14px;
  padding:14px 16px;
  color:#7f1d1d;
  background:#fff1f2;
  border:1px solid #fecdd3;
  border-radius:11px
}

.selected-missed-box p {
  margin:6px 0 0;
  font-size:13px;
  line-height:1.7
}

.result-disclaimer {
  margin:15px 0 0;
  color:#64748b;
  font-size:11px;
  line-height:1.65
}

.calc-consult-cta {
  margin-top:16px;
  padding:20px;
  text-align:center;
  background:#f8fbff;
  border:1px solid #dbeafe;
  border-radius:14px
}

.calc-consult-title {
  margin:0 0 6px;
  color:#1f2937;
  font-size:17px;
  font-weight:800
}

.calc-consult-guide {
  margin:0 0 16px;
  color:#64748b;
  font-size:14px
}

.calc-consult-cta .calc-btn-highlight {
  margin-top:0
}

.calc-consult-privacy {
  margin:10px 0 0;
  color:#64748b;
  font-size:12px
}

.official-check-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 22px;
  padding:18px;
  background:#fff;
  border:1px solid #dbe7f7;
  border-radius:14px
}

.official-check-box p {
  margin:5px 0 0;
  color:#64748b;
  font-size:12px;
  line-height:1.6
}

.official-check-box a {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 15px;
  color:#1d4ed8;
  font-weight:800;
  text-decoration:none;
  background:#eef6ff;
  border:1px solid #b9d7ff;
  border-radius:9px
}

.repay-bottom-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:calc(100% - 20px);
  max-width:900px;
  margin:28px auto 30px;
  padding-top:13px;
  border-top:1px solid #dfe5ec
}

.repay-bottom-nav a {
  color:#526579;
  font-size:14px;
  font-weight:700;
  text-decoration:none
}

.repay-bottom-nav .repay-status-link {
  color:var(--balance-blue)
}

.modal {
  display:none;
  padding:14px;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(2px)
}

.modal-box {
  position:relative;
  width:min(100%,430px);
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  padding:24px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(15,23,42,.22)
}

.modal-close {
  position:absolute;
  top:16px;
  right:18px;
  width:32px;
  height:32px;
  color:#475569;
  font-size:25px;
  background:#f1f5f9;
  border:0;
  border-radius:50%;
  cursor:pointer
}

.app-modal-title {
  margin:0 44px 6px 0;
  color:#172033;
  font-size:20px
}

.modal-desc,.privacy-sub-title {
  margin:0 0 18px;
  color:#667085;
  font-size:13px;
  line-height:1.6
}

.privacy-safe-box {
  margin:0 0 16px;
  padding:12px;
  color:#1d4ed8;
  font-size:12px;
  background:#f1f7ff;
  border:1px solid #dbeafe;
  border-radius:10px
}

#balanceConsultForm>label {
  display:block;
  margin:0 0 7px;
  color:#344054;
  font-size:13px;
  font-weight:700
}

.app-input {
  width:100%;
  height:46px;
  margin:0 0 16px;
  padding:0 13px;
  box-sizing:border-box;
  border:1px solid #d0d5dd;
  border-radius:9px
}

.privacy-row {
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin:2px 0 18px
}

.privacy-row label {
  font-size:12px
}

.privacy-row button {
  min-height:34px;
  padding:0 10px;
  color:var(--balance-blue);
  font-weight:700;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  border-radius:8px
}

.required-mark {
  color:#ef4444
}

.app-modal-btn {
  width:100%;
  min-height:50px;
  color:#fff;
  font-weight:800;
  background:var(--balance-blue);
  border:0;
  border-radius:10px
}

.privacy-table {
  overflow:hidden;
  border:1px solid #dbe5f3;
  border-radius:12px
}

.privacy-info-row {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  border-bottom:1px solid #edf1f5
}

.privacy-info-row:last-child {
  border-bottom:0
}

.privacy-label {
  padding:13px 12px;
  font-size:12px;
  font-weight:800;
  background:#f8fafc
}

.privacy-value {
  padding:13px 14px;
  color:#475467;
  font-size:12px
}

.privacy-guide {
  color:#667085;
  font-size:11px
}

@media(max-width:768px) {
  .balance-calculator-layout {
    display:flex;
    flex-direction:column
  }
  .balance-calculator-inputs {
    order:1;
    width:100%
  }
  .balance-input-summary {
    order:2;
    position:static;
    width:100%
  }
  .ios-field {
    grid-template-columns:36px minmax(86px,.75fr) minmax(0,1.25fr);
    padding:14px 10px
  }
  .field-description,.amount-buttons {
    grid-column:1/4
  }
  .amount-buttons {
    grid-template-columns:repeat(3,minmax(0,1fr)) 44px;
    gap:5px
  }
  .amount-buttons .amount-reset {
    width:44px
  }
  .month-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .result-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .result-metric.wide {
    grid-column:span 2
  }
  .calc-portal-card-header {
    display:block
  }
  .calc-portal-card-header strong,.calc-portal-card-header span {
    display:block
  }
  .official-check-box {
    align-items:flex-start;
    flex-direction:column
  }
  .official-check-box a {
    width:100%;
    justify-content:center;
    box-sizing:border-box
  }
}

@media(max-width:480px) {
  .ios-field {
    grid-template-columns:32px minmax(74px,.62fr) minmax(128px,1.38fr);
    column-gap:6px;
    padding:14px 12px
  }
  .ios-label {
    font-size:12px
  }
  .field-control {
    min-width:128px
  }
  .field-control>input,.field-control>.ios-select {
    font-size:11px;
    padding-left:7px
  }
  .field-unit {
    right:8px;
    font-size:9px
  }
  .amount-buttons {
    grid-template-columns:repeat(3,minmax(0,1fr)) 42px;
    gap:4px
  }
  .amount-buttons button {
    padding:0 2px;
    font-size:8.5px
  }
  .amount-buttons .amount-reset {
    width:42px
  }
  .missed-section-header {
    align-items:flex-start
  }
  .month-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px
  }
  .result-head {
    display:block
  }
  .result-head>strong {
    display:block;
    margin-top:10px;
    text-align:left
  }
  .result-grid {
    grid-template-columns:1fr
  }
  .result-metric.wide {
    grid-column:auto
  }
  .balance-result-card {
    padding:16px
  }
  .modal {
    padding:8px
  }
  .modal-box {
    width:100%;
    padding:20px 16px
  }
  .repay-bottom-nav a {
    font-size:13px
  }
}

.missed-risk-box {
  margin-top:16px;
  padding:16px 18px;
  color:#9a3412;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:12px
}

.missed-risk-box strong {
  display:block;
  font-size:16px
}

.missed-risk-box p {
  margin:6px 0 0;
  font-size:13px;
  line-height:1.6
}

.missed-risk-box.is-high-risk {
  color:#991b1b;
  background:#fff1f2;
  border-color:#fca5a5
}

.balance-summary-card .result-row.is-danger strong {
  color:#dc2626
}

.month-btn small {
  line-height:1.35
}

/* 입력정보 요약 한 줄 표시 */
.balance-summary-card .result-row {
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  padding:11px 12px;
  align-items:center
}

.balance-summary-card .result-row span {
  min-width:0;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  letter-spacing:-.35px
}

.balance-summary-card .result-row strong {
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  letter-spacing:-.35px
}

@media(max-width:390px) {
  .balance-summary-card .result-row {
    padding:10px 10px;
    gap:4px
  }
  .balance-summary-card .result-row span,.balance-summary-card .result-row strong {
    font-size:11px;
    letter-spacing:-.45px
  }
}


/* 입력정보/조회결과 요약 동일 글자 크기 */
.balance-input-summary .balance-result-summary .result-row {
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  padding:11px 12px;
  align-items:center;
}

.balance-input-summary .balance-result-summary .result-row span,
.balance-input-summary .balance-result-summary .result-row strong {
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  letter-spacing:-.35px;
}

@media(max-width:390px) {
  .balance-input-summary .balance-result-summary .result-row {
    padding:10px;
    gap:4px;
  }

  .balance-input-summary .balance-result-summary .result-row span,
  .balance-input-summary .balance-result-summary .result-row strong {
    font-size:11px;
    letter-spacing:-.45px;
  }
}

/* 계산 전 요약 실시간 반영 + 총 입금액 보조금액 위치 */
.balance-summary-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.summary-live-note {
  flex:0 0 auto;
  color:#2684ff;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

#actualPaidAmountMan.field-man-value-before-desc {
  grid-column:3;
  grid-row:2;
  margin:0 3px 0 0;
  padding-top:2px;
  text-align:right;
}

.actual-paid-description {
  grid-column:2 / 4;
  grid-row:3;
  margin:0;
}

@media(max-width:768px) {
  #actualPaidAmountMan.field-man-value-before-desc {
    grid-column:3;
    grid-row:2;
  }
  .actual-paid-description {
    grid-column:1 / 4;
    grid-row:3;
    padding-left:44px;
  }
}

@media(max-width:390px) {
  .summary-live-note {
    font-size:9px;
  }
  .actual-paid-description {
    padding-left:38px;
  }
}

/* 총 변제예정금액 + 예상 잔여 변제금 강조 */
.balance-summary-card .summary-plan-total {
  background:#f8fbff;
}

.balance-summary-card .summary-plan-total strong {
  color:#1d4ed8;
  font-weight:800;
}

.result-metric.wide.remaining-highlight {
  position:relative;
  padding:20px 18px;
  background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 100%);
  border:2px solid #93c5fd;
  box-shadow:0 8px 22px rgba(38,132,255,.12);
}

.result-metric.wide.remaining-highlight span {
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
}

.result-metric.wide.remaining-highlight strong {
  margin-top:8px;
  color:#1677ff;
  font-size:26px;
  font-weight:900;
  letter-spacing:-.6px;
}

.result-metric.wide.remaining-highlight small {
  margin-top:8px;
  color:#526579;
  font-size:11px;
  font-weight:600;
}

@media(max-width:480px) {
  .result-metric.wide.remaining-highlight {
    padding:17px 15px;
  }
  .result-metric.wide.remaining-highlight strong {
    font-size:23px;
  }
}


/* 정상 납부 기준 회차 선택 UI */
.month-btn,.month-btn.is-future { cursor:pointer; }
.month-btn.is-reference { outline:3px solid rgba(38,132,255,.28); outline-offset:2px; }
.month-btn.is-selected-future { color:#1d4ed8; background:#dbeafe; border-color:#60a5fa; }
.legend-selected-future:before { background:#dbeafe; border:1px solid #60a5fa; }
@media(max-width:768px){.month-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:480px){.month-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.month-btn{min-height:52px;}}


/* 입력 타이틀 배지 및 전체 해제 버튼 개선 */
.field-icon-payment {
  color:#059669;
  background:#eafbf5;
}
.field-icon-deposit {
  color:#0891b2;
  background:#ecfeff;
}
.field-icon-count {
  color:#2563eb;
  background:#eff6ff;
}
.field-icon-start {
  color:#7c3aed;
  background:#f3efff;
}
.field-icon-payment,
.field-icon-deposit,
.field-icon-count,
.field-icon-start {
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.missed-clear-btn {
  flex:0 0 auto;
  min-width:78px;
  white-space:nowrap;
  word-break:keep-all;
  line-height:1;
}
@media(max-width:480px) {
  .missed-clear-btn {
    min-width:72px;
    padding:0 10px;
    font-size:11px;
    white-space:nowrap;
    word-break:keep-all;
  }
}


/* 입력 항목 이모지 배지 */
.field-icon-payment,
.field-icon-deposit,
.field-icon-count,
.field-icon-start {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size:18px;
  font-weight:400;
}


/* 텍스트형 입력 배지 */
.field-icon-payment,
.field-icon-deposit,
.field-icon-count,
.field-icon-start {
  width:auto;
  min-width:42px;
  padding:0 8px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  border-radius:999px;
}
@media(max-width:480px) {
  .field-icon-payment,
  .field-icon-deposit,
  .field-icon-count,
  .field-icon-start {
    min-width:34px;
    padding:0 6px;
    font-size:9px;
  }
}

/* 모바일: 금액 항목 한 줄 + 원 단위 겹침 방지 */
@media (max-width: 480px) {
  .ios-field:has(#monthlyPay),
  .ios-field:has(#actualPaidAmount) {
    grid-template-columns: 38px minmax(112px, 1fr) minmax(150px, 1.35fr);
    column-gap: 8px;
  }

  .ios-field:has(#monthlyPay) .ios-label,
  .ios-field:has(#actualPaidAmount) .ios-label {
    font-size: 11px;
    letter-spacing: -0.55px;
    white-space: nowrap;
    word-break: keep-all;
  }

  .ios-field:has(#monthlyPay) .field-control,
  .ios-field:has(#actualPaidAmount) .field-control {
    min-width: 150px;
  }

  .ios-field:has(#monthlyPay) .field-control > input,
  .ios-field:has(#actualPaidAmount) .field-control > input {
    padding-left: 8px;
    padding-right: 28px;
    font-size: 14px;
    text-align: right;
  }

  .ios-field:has(#monthlyPay) .field-unit,
  .ios-field:has(#actualPaidAmount) .field-unit {
    right: 10px;
    padding-left: 4px;
    font-size: 9px;
  }
}