.peak-page {
  position: relative;
  max-width: 1440px;
  min-height: 0;
  margin: 0 auto;
  padding-bottom: 72px !important;
  color: #17233f;
}

.peak-page-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.peak-page-header h1 { margin: 0; font-size: 30px; line-height: 1.25; letter-spacing: -.04em; font-weight: 700; }
.peak-date-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.peak-work-date-trigger { min-width: 230px; min-height: 48px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: center; font: inherit; font-size: 24px; line-height: 1.3; letter-spacing: -.04em; cursor: pointer; }
.peak-work-date-trigger:focus-visible { outline: 3px solid rgba(47,111,236,.28); outline-offset: 2px; }
.peak-work-date-picker { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.peak-date-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border: 1px solid #dce4f0; border-radius: 8px; background: #fff; color: #162641; font-size: 28px; line-height: 1; }
.peak-connection-status { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 0; color: #65768e; font-size: 15px; line-height: 1.35; white-space: nowrap; }
.peak-connection-status span:first-child, .peak-header-status-separator { font-size: 15px; }
.peak-connection-status span:first-child { color: #36b98a; }
.peak-connection-status.is-warning span:first-child { color: #e69336; }
.peak-header-status-stack { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.peak-header-status-separator { color: #a5b1c0; line-height: 1; }
.peak-header-save-status { margin: 0; color: #65768e; font-size: 15px; line-height: 1.35; white-space: nowrap; }

.peak-summary-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; border: 0; border-radius: 0; background: transparent; overflow: visible; margin-bottom: 20px; }
.peak-summary-card { position: relative; min-width: 0; min-height: 148px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; align-items: stretch; border: 1px solid #dce4f0; border-radius: 12px; background: #fff; text-align: center; }
.peak-summary-card:last-child { border-right: 1px solid #dce4f0; }
.peak-summary-title { position: relative; grid-column: auto; display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; padding: 12px 24px 10px 4px; border-bottom: 0; flex-wrap: nowrap; white-space: nowrap; }
.peak-summary-title span { min-width: 0; text-align: center; font-size: 16px; line-height: 1.3; white-space: nowrap; }
.peak-help-button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex: 0 0 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; font-size: 0; line-height: 1; cursor: pointer; }
.peak-help-button::before { content: "i"; display: grid; width: 18px; height: 18px; margin: 0 auto; place-items: center; border: 1px solid #8aa2c1; border-radius: 50%; background: #fff; color: #2f5f9e; font-size: 10px; font-weight: 800; line-height: 1; }
.peak-help-button:focus-visible { outline: 3px solid rgba(47,111,236,.28); outline-offset: 1px; }
.peak-summary-current, .peak-summary-tariff { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; }
.peak-summary-current { grid-column: 1; grid-row: 1; }
.peak-summary-tariff { grid-column: 2; grid-row: 1; border-left: 1px solid #e9edf3; color: #65768e; }
.peak-summary-value-line { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; max-width: 100%; min-width: 0; white-space: nowrap; }
.peak-summary-current strong { color: #1556db; font-size: 26px; line-height: 1.1; text-align: center; font-weight: 700; }
.peak-summary-card.is-over .peak-summary-current strong, .peak-summary-card.is-over .peak-summary-unit { color: #bb2f3f; }
.peak-summary-card.is-within .peak-summary-current strong, .peak-summary-card.is-within .peak-summary-unit { color: #1556db; }
.peak-summary-unit { color: #1556db; font-size: 17px; line-height: 1.1; white-space: nowrap; }
.peak-summary-tariff > span { color: #53667c; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.peak-summary-tariff strong { color: #53667c; font-size: 18px; line-height: 1.2; font-weight: 400; }
.peak-summary-tariff strong small { font-size: 13px; font-weight: 400; }
.peak-summary-tariff--unavailable { color: #8895a8; font-size: 16px; font-weight: 400; }
.peak-summary-card .peak-updated-date { margin: 4px 0 0; color: #65768e; font-size: 13px; line-height: 1.3; white-space: nowrap; }

.peak-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.peak-left-column, .peak-right-column { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.peak-left-top-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.peak-input-card, .peak-meter-card, .peak-results-sheet { border: 1px solid #dce4f0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(44, 72, 117, .04); overflow: hidden; }
.peak-input-card { padding: 20px; }
.peak-department-info-card { min-width: 0; border: 1px solid #dce4f0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(44, 72, 117, .04); padding: 20px; text-align: center; overflow: hidden; }
.peak-department-relation,
.peak-input-description { color: #111; font-weight: 700 !important; }
.peak-department-relation { max-width: 100%; margin: 0; font-size: 18px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.peak-department-relation > span,
.peak-input-description > span { display: block; color: #111; font-weight: 700 !important; white-space: nowrap; }
.peak-department-calculation-date { margin: 10px 0 0; color: #65768e; font-size: 14px; line-height: 1.4; text-align: center; font-weight: 400; }
.peak-department-equation { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; color: #111; text-align: center; font-weight: 400; }
.peak-department-equation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 30px; color: #111; font-size: 16px; line-height: 1.35; font-weight: 400; }
.peak-department-equation-label { color: #111; font-weight: 400; text-align: left; }
.peak-department-equation-row strong { color: #1556db; font-size: 18px; font-weight: 400; text-align: right; white-space: nowrap; }
.peak-department-equation-row.is-result { min-height: 36px; }
.peak-department-equation-row.is-result strong { color: #1a9b61; font-size: 21px; }
.peak-department-equation-row small { font-size: 15px; }
.peak-department-baseline-strip { padding: 0 0 6px; border: 0; border-bottom: 1px solid #dce4f0; border-radius: 0; background: transparent; }
.peak-department-result-strip { padding: 10px 14px; border: 1px solid #a9dbba; border-radius: 8px; background: #edf9f1; }
.peak-department-calculation-row { display: block; }
.peak-department-result-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: stretch; gap: 10px; }
.peak-department-operator-rail { display: flex; align-items: center; justify-content: center; color: #111; font-size: 30px; font-weight: 400; line-height: 1; }
.peak-department-deduction-box { padding: 0; border: 0; border-radius: 0; background: transparent; }
.peak-department-ice-warning { margin: 8px 0 0; color: #bb2f3f; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; white-space: nowrap; }
.peak-department-deduction-body { display: block; }
.peak-department-deduction-rows { display: flex; flex-direction: column; gap: 6px; }
.peak-department-deduction-row-with-operator { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 6px; align-items: center; }
.peak-department-row-operator { display: flex; align-items: center; justify-content: center; min-width: 0; }
.peak-department-row-minus { display: flex; align-items: center; justify-content: center; color: #111; font-size: 20px; line-height: 1; }
.peak-department-actual-applied { color: #65768e; font-weight: 400; }
.peak-department-adjusted-formula { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #111; font-size: 16px; line-height: 1.35; text-align: center; white-space: nowrap; }
.peak-department-step { display: flex; flex-direction: column; gap: 7px; padding: 8px 10px; border: 1px solid #d7e3f3; border-radius: 10px; background: #fff; }
.peak-department-step + .peak-department-step { border-color: #cfe7d7; }
.peak-department-step-title { margin: -8px -10px 0; padding: 6px 12px; border-bottom: 1px solid #d7e3f3; border-radius: 9px 9px 0 0; background: #edf4ff; color: #2f6fec; font-size: 16px; font-weight: 400; line-height: 1.35; text-align: left; }
.peak-department-step + .peak-department-step .peak-department-step-title { border-bottom-color: #cfe7d7; background: #edf9f1; color: #2f7d54; }
.peak-department-step:first-child .peak-department-adjusted-formula { justify-content: center; margin-top: 3px; padding: 12px 0; }
.peak-department-adjusted-formula small { font-size: 12px; }
.peak-department-adjusted-values, .peak-department-support-labels { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; column-gap: 6px; }
.peak-department-adjusted-values { white-space: nowrap; }
.peak-department-adjusted-values > span:last-child { color: #1556db; }
.peak-department-support-labels { color: #65768e; font-size: 14px; line-height: 1.3; text-align: center; }
.peak-department-floor-help { margin: 8px 0 0; color: #65768e; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; text-align: center; font-weight: 400; }

.peak-input-card h2, .peak-meter-card h2 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 700; }
.peak-input-card h2 { text-align: center; }
.peak-input-description { max-width: 100%; margin: 10px auto 0; font-size: clamp(14px, 4.1vw, 17px); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.peak-direct-inputs { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.peak-direct-field { display: grid; grid-template-columns: minmax(0, 1fr) 125px 28px; grid-template-rows: auto auto; align-items: center; row-gap: 5px; min-height: 0; font-size: 17px; font-weight: 400; line-height: 1.35; text-align: center; }
.peak-direct-field-title { grid-column: 1 / -1; grid-row: 1; min-width: 0; color: #17233f; font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; }
.peak-direct-control { grid-column: 2 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.peak-direct-field--timed { grid-template-columns: minmax(0, 1fr) minmax(0, 125px) 28px; grid-template-rows: auto auto; }
.peak-direct-period { grid-column: 1; grid-row: 1 / 3; display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #526174; font-size: 15px; font-weight: 400; line-height: 1.3; text-align: center; white-space: nowrap; }
.peak-direct-field:not(.peak-direct-field--timed) .peak-direct-control { grid-column: 2 / -1; }
.peak-direct-field--timed .peak-direct-field-title { grid-column: 2 / -1; grid-row: 1; text-align: center; }
.peak-direct-field--timed .peak-direct-control { grid-column: 2 / -1; grid-row: 2; }
.peak-direct-field--side-label { grid-template-rows: auto; }
.peak-direct-field--side-label .peak-direct-field-title { grid-column: 1; grid-row: 1; }
.peak-direct-field--side-label .peak-direct-control { grid-column: 2 / -1; grid-row: 1; }
.peak-direct-control input { width: 100%; }
.peak-direct-field input { width: 100%; height: 48px; min-height: 48px; box-sizing: border-box; border: 1px solid #dce4f0; border-radius: 8px; padding: 10px 12px; text-align: center; line-height: 24px; font-size: 17px; font-weight: 400; font-variant-numeric: tabular-nums; }
.peak-direct-field em { color: #53667c; font-size: 16px; font-style: normal; font-weight: 400; text-align: center; }
.peak-data-update-time { margin: 14px 0 0; color: #65768e; font-size: 14px; line-height: 1.4; text-align: center; font-weight: 400; }
.peak-manual-kepco-button { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid #2f6fec; border-radius: 8px; background: #fff; color: #1556db; font-size: 15px; font-weight: 700; }
.peak-manual-kepco-button:hover:not(:disabled), .peak-manual-kepco-button:focus-visible { background: #f5f9ff; }
.peak-manual-kepco-button:disabled { cursor: not-allowed; opacity: .58; }
.peak-manual-kepco-status { min-height: 20px; margin: 5px 0 0; color: #52708b; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; text-align: center; font-weight: 400; }
.peak-manual-kepco-status.is-error { color: #bb2f3f; }
.peak-reading-input::-webkit-inner-spin-button,
.peak-reading-input::-webkit-outer-spin-button,
.peak-direct-field input::-webkit-inner-spin-button,
.peak-direct-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.peak-reading-input, .peak-direct-field input { -moz-appearance: textfield; }

.peak-meter-card > h2, .peak-meter-section > h2 { margin: 0; padding: 12px 16px; text-align: center; background: linear-gradient(90deg, #f0f2f5, #f8f9fb, #f0f2f5); font-size: 18px; line-height: 1.35; font-weight: 700; }
.peak-formula { margin-left: 8px; color: #65768e; font-size: 14px; line-height: 1.35; font-weight: 400; white-space: nowrap; }
.peak-meter-card--compact h2 { background: #f4f6f9; }
.peak-results-sheet { display: flex; flex-direction: column; gap: 14px; padding-bottom: 2px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.peak-meter-section { border: 1px solid #dce4f0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(44, 72, 117, .04); overflow: hidden; }
.peak-meter-section:last-child { border-bottom: 1px solid #dce4f0; }
.peak-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; }
.peak-table { width: 100%; min-width: 610px; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.peak-table th, .peak-table td { height: 50px; min-height: 50px; padding: 9px 12px; border-right: 1px solid #e3e9f2; border-bottom: 1px solid #e3e9f2; text-align: center; vertical-align: middle; white-space: nowrap; font-size: 16px; line-height: 1.35; font-weight: 400; }
.peak-table th:first-child, .peak-table td:first-child { width: 18%; text-align: center; }
.peak-table th:nth-child(2), .peak-table td:nth-child(2), .peak-table th:nth-child(3), .peak-table td:nth-child(3) { width: 23%; }
.peak-table th:nth-child(4), .peak-table td:nth-child(4), .peak-table th:nth-child(5), .peak-table td:nth-child(5) { width: 18%; }
.peak-table thead th { height: 50px; color: #33435c; background: #f7f9fc; font-weight: 600; }
.peak-table tbody th { font-weight: 400; }
.peak-table td:nth-child(4), .peak-table td:nth-child(5), .peak-table .peak-usage-total, .peak-table .peak-cumulative-total { background: #f2f7fd; color: #14294d; font-weight: 600; }
.peak-table tr > *:last-child { border-right: 0; }
.peak-total-row th, .peak-total-row td { font-weight: 600; background: #f7f9fc; }
.peak-table .peak-reading-input { width: 100%; min-width: 0; height: 48px; min-height: 48px; box-sizing: border-box; padding: 9px 10px; border: 1px solid #dce4f0; border-radius: 7px; background: #fff; color: #1d2b43; text-align: center; line-height: 24px; font-size: 17px; font-weight: 400; font-variant-numeric: tabular-nums; }
.peak-table .peak-usage, .peak-table .peak-cumulative { font-size: 18px; font-weight: 400; }
.peak-table .peak-usage-total, .peak-table .peak-cumulative-total { font-size: 18px; font-weight: 600; }
.peak-table .peak-reading-input:focus, .peak-direct-field input:focus { border-color: #2f6fec; outline: 3px solid rgba(47,111,236,.15); }
.peak-direct-field input:not([readonly]):not([disabled]), .peak-table .peak-reading-input { border-color: #a9dbba; }
.peak-direct-field input:not([readonly]):not([disabled]):focus, .peak-table .peak-reading-input:focus { border-color: #a9dbba; outline: 3px solid rgba(47,111,236,.15); }
.peak-save-status { margin: 0; color: #52708b; font-size: 16px; line-height: 1.4; font-weight: 400; }
.peak-save-status.is-error { color: #bb2f3f; }

.peak-help-popover { position: absolute; top: 82px; left: 50%; z-index: 10; width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); box-sizing: border-box; overflow-x: hidden; transform: translateX(-50%); padding: 20px; border: 1px solid #b8c9df; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(30, 54, 92, .18); }
.peak-help-popover-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.peak-help-popover h2 { margin: 0; color: #17233f; font-size: 20px; line-height: 1.35; text-align: center; font-weight: 700; }
.peak-help-close { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border: 1px solid #dce4f0; border-radius: 7px; background: #fff; color: #233450; font-size: 26px; line-height: 1; cursor: pointer; }
.peak-help-description { margin: 16px 0 0; color: #33435c; font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; }
.peak-help-history { max-height: 300px; margin-top: 14px; overflow-x: hidden; overflow-y: auto; padding: 10px 12px; border: 1px solid #dce4f0; border-radius: 9px; background: #f8fafc; }
.peak-help-history-title { margin: 0 0 8px; color: #33435c; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; }
.peak-help-history-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; color: #33435c; font-size: 16px; line-height: 1.35; font-weight: 400; }
.peak-help-history-row span { white-space: nowrap; }
.peak-help-history-row strong { color: #1556db; font-size: 16px; font-weight: 400; text-align: right; white-space: nowrap; }
.peak-help-history-row small { min-width: 48px; color: #1a9b61; font-size: 14px; font-weight: 400; text-align: right; white-space: nowrap; }
.peak-help-history-empty { margin: 0; color: #65768e; font-size: 14px; text-align: center; font-weight: 400; }

/* Wide desktop keeps only layout deltas that are not part of the shared base. */
@media (min-width: 1500px) {
  main.page:has(.peak-page) { padding-bottom: 0; }
  .peak-left-column > .peak-left-top-grid,
  .peak-left-column > .peak-meter-card,
  .peak-left-top-grid > .peak-department-info-card,
  .peak-left-top-grid > .peak-input-card { min-height: 0; }
  .peak-input-card { display: flex; flex-direction: column; }
  .peak-input-card .peak-direct-inputs { flex: 1 1 auto; justify-content: space-evenly; gap: 8px; margin-top: 8px; margin-bottom: 4px; }
  .peak-meter-card { display: flex; flex-direction: column; }
  .peak-meter-card .peak-table-wrap { flex: 1 1 auto; display: flex; }
  .peak-meter-card .peak-table { height: 100%; }
  .peak-results-sheet { flex: 1 1 auto; padding-bottom: 0; }
  .peak-table { margin-bottom: 0; }
}

/* Width-driven desktop scale.  Only breakpoint deltas live here. */
@media (min-width: 1400px) and (max-width: 1799px) {
  .peak-page-header { gap: clamp(10px, 1.2vw, 18px); margin-bottom: clamp(12px, 1.2vw, 18px); }
  .peak-page-header h1 { font-size: clamp(24px, 2vw, 30px); }
  .peak-date-controls { gap: clamp(8px, .8vw, 12px); }
  .peak-work-date-trigger { min-width: clamp(200px, 15vw, 230px); font-size: clamp(21px, 1.6vw, 24px); }
  .peak-summary-card { min-height: clamp(124px, 9.8vw, 148px); }
  .peak-summary-title span { font-size: clamp(14px, 1.05vw, 16px); }
  .peak-summary-current, .peak-summary-tariff { padding: clamp(8px, .8vw, 12px) clamp(7px, .7vw, 10px); }
  .peak-summary-current strong { font-size: clamp(24px, 2vw, 30px); }
  .peak-summary-unit { font-size: clamp(14px, 1.1vw, 17px); }
  .peak-summary-tariff > span { font-size: clamp(12px, .95vw, 14px); }
  .peak-summary-tariff strong { font-size: clamp(16px, 1.2vw, 18px); }
  .peak-summary-card .peak-updated-date { font-size: clamp(11px, .85vw, 13px); }
  .peak-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .peak-left-column, .peak-right-column { gap: clamp(10px, .95vw, 14px); }
  .peak-left-top-grid { gap: 10px; }
  .peak-department-info-card, .peak-input-card { padding: 14px; }
  .peak-department-equation { gap: clamp(5px, .55vw, 8px); margin-top: clamp(8px, .9vw, 14px); }
  .peak-department-equation-row { min-height: clamp(26px, 2vw, 30px); font-size: clamp(15px, 1.05vw, 16px); }
  .peak-department-equation-row strong { font-size: clamp(16px, 1.2vw, 18px); }
  .peak-department-equation-row.is-result { min-height: clamp(30px, 2.4vw, 36px); }
  .peak-department-equation-row.is-result strong { font-size: clamp(18px, 1.4vw, 21px); }
  .peak-input-card h2 { font-size: clamp(18px, 1.35vw, 20px); }
  .peak-input-description { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.35; }
  .peak-direct-inputs { gap: clamp(8px, .8vw, 12px); margin-top: clamp(12px, 1.2vw, 18px); }
  .peak-direct-field { grid-template-columns: minmax(0, 1fr) clamp(84px, 6vw, 96px) 22px; gap: clamp(4px, .5vw, 8px); font-size: clamp(14px, .95vw, 15px); }
  .peak-direct-field-title, .peak-direct-period { font-size: clamp(14px, .95vw, 15px); }
  .peak-direct-field input { height: clamp(44px, 3.2vw, 48px); min-height: clamp(44px, 3.2vw, 48px); padding: clamp(8px, .8vw, 10px) clamp(8px, .8vw, 12px); font-size: clamp(15px, 1.15vw, 17px); }
  .peak-direct-field em { font-size: clamp(14px, 1.05vw, 16px); }
  .peak-meter-card > h2, .peak-meter-section > h2 { padding: clamp(8px, .8vw, 12px) clamp(10px, 1.05vw, 16px); font-size: clamp(16px, 1.2vw, 18px); }
  .peak-formula { margin-left: clamp(4px, .55vw, 8px); font-size: clamp(12px, .95vw, 14px); }
  .peak-results-sheet { gap: clamp(10px, .95vw, 14px); }
  .peak-table { min-width: 0; font-size: clamp(15px, 1.05vw, 16px); line-height: 1.35; }
  .peak-table th, .peak-table td { height: clamp(42px, 3.3vw, 50px); min-height: clamp(42px, 3.3vw, 50px); padding: clamp(5px, .7vw, 9px) clamp(6px, .8vw, 12px); font-size: clamp(15px, 1.05vw, 16px); }
  .peak-table thead th { height: clamp(42px, 3.3vw, 50px); }
  .peak-table .peak-reading-input { height: clamp(42px, 3.2vw, 48px); min-height: clamp(42px, 3.2vw, 48px); padding: clamp(6px, .7vw, 9px) clamp(6px, .7vw, 10px); font-size: clamp(15px, 1.1vw, 17px); }
  .peak-table .peak-usage, .peak-table .peak-cumulative,
  .peak-table .peak-usage-total, .peak-table .peak-cumulative-total { font-size: clamp(16px, 1.15vw, 18px); }
}

@media (min-width: 901px) and (max-width: 1399px) {
  .peak-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .peak-table { min-width: 0; }
  .peak-table-wrap { overflow-x: hidden; }
  .peak-department-relation, .peak-input-description { font-size: 13px; line-height: 1.3; }
  .peak-department-step-title, .peak-department-adjusted-formula { font-size: 16px; }
  .peak-department-support-labels, .peak-department-floor-help { font-size: 14px; }
}

@media (min-width: 1800px) {
  .peak-department-relation, .peak-input-description { font-size: 15px; line-height: 1.35; }
  .peak-department-step { gap: 8px; padding: 10px 12px; }
  .peak-department-step-title { margin: -10px -12px 0; padding: 7px 14px; font-size: 17px; }
  .peak-department-adjusted-formula { font-size: 17px; }
  .peak-department-adjusted-formula small { font-size: 13px; }
  .peak-department-support-labels { font-size: 14px; }
  .peak-direct-field--timed .peak-direct-period { font-size: 16px; }
  .peak-manual-kepco-status { font-size: 15px; }
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .peak-department-relation, .peak-input-description { font-size: 13px; line-height: 1.3; }
  .peak-department-step { gap: 6px; padding: 8px 6px; }
  .peak-department-step-title { margin: -8px -6px 0; padding: 6px 8px; font-size: 14px; }
  .peak-department-adjusted-formula { font-size: 14px; }
  .peak-department-adjusted-formula small { font-size: 11px; }
  .peak-department-support-labels, .peak-department-floor-help { font-size: 13px; }
  .peak-department-ice-warning { font-size: 14px; }
  .peak-direct-field--timed .peak-direct-period, .peak-manual-kepco-status { font-size: 14px; }
}

@media (max-width: 900px) {
  .peak-page { width: 100%; max-width: 100%; padding-bottom: 72px !important; }
  .peak-page-header { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  .peak-page-header h1 { font-size: 28px; text-align: center; }
  .peak-date-controls { order: 2; justify-content: space-between; gap: 8px; }
  .peak-work-date-trigger { min-width: 0; width: auto; flex: 1 1 auto; font-size: 22px; }
  .peak-date-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .peak-connection-status { order: 0; }
  .peak-header-status-stack { width: 100%; justify-content: center; gap: 6px 9px; }
  .peak-connection-status, .peak-header-save-status, .peak-connection-status span:first-child, .peak-header-status-separator { font-size: 15px; }
  .peak-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .peak-summary-card { min-height: 144px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; }
  .peak-summary-title { padding: 10px 24px 10px 4px; }
  .peak-summary-title span { font-size: 16px; }
  .peak-summary-current, .peak-summary-tariff { grid-column: auto; grid-row: 1; padding: 12px 8px; }
  .peak-summary-current strong { font-size: 24px; }
  .peak-summary-unit { font-size: 16px; }
  .peak-summary-tariff > span { font-size: 14px; }
  .peak-summary-tariff strong { font-size: 17px; }
  .peak-summary-card .peak-updated-date { font-size: 13px; }
  .peak-summary-card:nth-child(even) { border-right: 0; }
  .peak-summary-card:nth-child(-n+4) { border-bottom: 1px solid #dce4f0; }
  .peak-summary-card:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .peak-workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .peak-left-column, .peak-right-column { gap: 14px; }
  .peak-left-top-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .peak-department-info-card, .peak-input-card { padding: 18px; }
  .peak-department-relation { font-size: 17px; }
  .peak-department-equation-row { font-size: 16px; }
  .peak-department-equation-row strong { font-size: 18px; }
  .peak-department-step { padding: 8px 6px; }
  .peak-department-step-title { margin: -8px -6px 0; padding: 6px 8px; font-size: 15px; }
  .peak-department-adjusted-formula { font-size: 14px; }
  .peak-department-support-labels, .peak-department-floor-help { font-size: 13px; }
  .peak-department-ice-warning { font-size: 14px; }
  .peak-input-card h2 { font-size: 20px; }
  .peak-input-description { font-size: clamp(14px, 4.1vw, 17px); line-height: 1.35; }
  .peak-direct-inputs { gap: 12px; margin-top: 18px; }
  .peak-direct-field, .peak-direct-field--timed { grid-template-columns: minmax(0, 1fr) minmax(0, 120px) 28px; font-size: 17px; }
  .peak-direct-field-title { font-size: 17px; }
  .peak-direct-period { min-height: 48px; font-size: 18px; line-height: 1.25; }
  .peak-direct-control { gap: 6px; }
  .peak-direct-field input { height: 48px; min-height: 48px; font-size: 16px; line-height: 22px; }
  .peak-meter-card > h2, .peak-meter-section > h2 { font-size: 18px; }
  .peak-table { min-width: 640px; }
  .peak-table th, .peak-table td { height: 50px; min-height: 50px; font-size: 16px; }
  .peak-table .peak-reading-input { height: 48px; min-height: 48px; font-size: 17px; }
  .peak-manual-kepco-button { min-height: 48px; font-size: 16px; }
  .peak-help-popover { top: 168px; width: calc(100vw - 32px); max-width: calc(100vw - 32px); padding: 18px; }
  .peak-help-popover h2 { font-size: 20px; }
  .peak-help-close { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .peak-help-description { font-size: 16px; }
  .peak-help-history-row { font-size: 16px; }
}

@media (max-width: 520px) {
  .peak-summary-strip { grid-template-columns: minmax(0, 1fr); }
  .peak-summary-card:nth-child(even), .peak-summary-card:nth-child(5) { border-right: 1px solid #dce4f0; }
  .peak-summary-card:nth-child(5) { grid-column: auto; }
}