@media (max-width: 720px) {
  body { min-width: 0; }
  .login-view { grid-template-columns: 1fr; padding: 16px; }
  .login-brand,
  .login-card,
  .login-view > footer { grid-column: 1; }
  .login-card { padding: 24px; }
  .topbar { padding: 0 14px; }
  .topbar > div > span { display: none; }
  .console-view > main { display: block; }
  .customers { padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .customers > header { padding: 0 2px 10px; }
  .customers .search { margin-bottom: 10px; }
  .customers nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .customers nav button { min-width: 235px; }
  .customers > footer { display: none; }
  .workspace { padding: 24px 14px 104px; }
  .workspace-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .workspace-head h1 { font-size: 23px; }
  .summary { min-width: 0; }
  .notice { align-items: flex-start; }
  .designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .design-card { min-width: 0; }
  .mini { height: 92px; }
  .custom-service { align-items: flex-start; gap: 16px; }
  .delivery-status { grid-template-columns: 1fr; }
  .delivery-status .delivery-mark { display: none; }
  .delivery-status ol { grid-column: auto; grid-template-columns: 1fr; }
  .actions { left: 0; gap: 8px; padding: 12px 14px; }
  .actions > div { display: none; }
  .actions button { flex: 1; padding: 0 10px; }
  .toast { right: 14px; bottom: 76px; left: 14px; text-align: center; }
}

@media (max-width: 390px) {
  .designs { grid-template-columns: 1fr; }
  .mini { height: 110px; }
}