/* Mobile reading size and contrast. Keep native pinch-to-zoom available. */
.mode-short { display: none; }
@media (max-width: 760px) {
  :root {
    --muted: #56565f;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { font-size: 16px; line-height: 1.7; color: #202023; }
  h1 { font-size: 27px; font-weight: 750; line-height: 1.4; }
  h2, .card-head h2 { font-size: 19px; line-height: 1.5; }
  h3 { font-size: 17px; }
  small, .tiny { font-size: 14px; }
  .muted { color: var(--muted); }
  .workspace { padding: 24px 18px 36px; }
  .pagehead { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
  .pagehead h1 { font-size: 28px; }
  .pagehead p { font-size: 16px; line-height: 1.75; }
  .pagehead .eyebrow { font-size: 12px; line-height: 1.6; white-space: normal; color: #5e5e67; }
  .pagehead > .btn { width: 100%; min-height: 46px; font-size: 16px; padding: 11px 16px; }
  .btn { font-size: 15px; min-height: 46px; padding: 11px 16px; }
  .btn.sm { font-size: 14px; min-height: 42px; padding: 9px 12px; }
  .icon-btn { width: 44px; height: 44px; }
  .link-btn { font-size: 14px; line-height: 1.6; padding: 7px 0; }
  .badge, .pill { font-size: 13px; font-weight: 650; padding: 5px 9px; }
  .preview-banner { font-size: 14px; line-height: 1.8; padding: 13px 14px; color: #794349; }
  .preview-banner svg { width: 18px; height: 18px; margin-top: 4px; }
  .card-head { padding: 20px 18px 16px; flex-wrap: wrap; gap: 10px; }
  .card-body { padding: 0 18px 20px; }
  .card-head p, .field .hint, .dialog-head p { font-size: 14px; color: var(--muted); line-height: 1.8; }
  .notice { font-size: 14px !important; color: #50505b; line-height: 1.85; padding: 15px; }
  .notice.rose { color: #794349; }
  .pagefoot { flex-wrap: wrap; gap: 8px; font-size: 13px; color: #5e5e67; line-height: 1.7; }

  /* Keep actions legible without squeezing the header. */
  .topbar { min-height: calc(74px + env(safe-area-inset-top)); height: auto; padding-bottom: 10px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .topright { min-width: 0; flex: 1; gap: 6px; }
  .mode-switch { flex: 1; justify-content: center; }
  .mode-switch button { font-size: 14px; font-weight: 650; min-height: 40px; padding: 8px; color: #56565f; white-space: nowrap; }
  .mode-full { display: none; }
  .mode-short { display: inline; }
  .pagehead p, .kpi label, .kpi p, .preview-banner span { word-break: keep-all; overflow-wrap: anywhere; }
  .topbar .pwa-entry { width: 40px; min-width: 40px; padding: 8px; min-height: 42px; flex: none; }
  .bell { padding: 8px; min-height: 42px; }
  .sidebar { width: 272px; }
  .sidebar .logo strong { font-size: 21px; }
  .navbtn { font-size: 16px; min-height: 48px; padding: 12px 14px; color: #53535e; }
  .navlabel { font-size: 12px; color: #65656d; }
  .navbtn .count, .mini-count { font-size: 13px; }
  .brand-card span { font-size: 11px; color: #d2d2d7; }
  .brand-card p { font-size: 16px; }
  .sidebar-foot small { font-size: 12px; color: #56565f; }
  .pwa-sidebar-entry { font-size: 15px; padding: 13px; }
  .pwa-sidebar-entry small { font-size: 12px; color: #56565f; }

  /* Overview and customer tables. */
  .kpi { padding: 18px 15px; }
  .kpi .kicon { display: none; }
  .kpi label { font-size: 14px; color: #484850; margin-bottom: 10px; }
  .kpi strong { font-size: 31px; line-height: 1.4; }
  .kpi .unit { font-size: 14px; color: #55555e; }
  .kpi p { font-size: 13px; color: #56565f; margin-top: 7px; }
  .tabs { gap: 23px; padding: 0 18px; }
  .tab { font-size: 15px; min-height: 49px; color: #5c5c65; }
  .tab span { font-size: 13px; }
  .toolbar { padding: 16px 18px; gap: 10px; }
  .searchbox input { height: 46px; font-size: 16px; }
  .searchbox svg { top: 15px; }
  .toolbar select, .toolbar input[type=date] { font-size: 16px; height: 46px; max-width: none; flex: 1; min-width: 0; }
  .data-table { font-size: 15px; line-height: 1.7; }
  .data-table th { font-size: 14px; font-weight: 650; color: #51515b; padding: 14px 16px; }
  .data-table td { padding: 17px 16px; }
  .data-table .name { font-size: 16px; }
  .data-table small { font-size: 14px !important; }
  .table-foot { font-size: 13px; color: #5e5e67; padding: 15px 18px; flex-wrap: wrap; gap: 6px; }
  .empty h3 { font-size: 17px; color: #303039; }
  .empty p, .empty.compact p { font-size: 15px; line-height: 1.85; color: #5b5b65; }
  .task-row p, .schedule-row p { font-size: 15px; font-weight: 650; }
  .task-row small, .schedule-row small { font-size: 14px; color: #595963; }
  .schedule-row .amount { font-size: 15px; }
  .schedule-date small { font-size: 13px; color: #56565f; }
  .setup-strip { grid-template-columns: 1fr; }
  .setup-item { padding: 18px; border: 0; border-bottom: 1px solid var(--line); }
  .setup-item p { font-size: 15px; }
  .setup-item small { font-size: 14px; color: #595963; }
  .balance-box { align-items: flex-start; gap: 18px; }
  .balance-box h3 { font-size: 16px; }
  .balance-box p, .balance-box .btn { font-size: 14px; color: #55555f; }

  /* Forms, case documents, chat, and installments. */
  .field > label, .check, .section-label { font-size: 15px; color: #36363f; }
  .field input, .field select, .field textarea, .composer textarea { font-size: 16px; line-height: 1.7; }
  .field input::placeholder, .field textarea::placeholder, .composer textarea::placeholder, .searchbox input::placeholder { color: #6a6a73; opacity: 1; }
  .field { gap: 8px; margin-bottom: 20px; }
  .dialog-head { padding: 20px 18px; }
  .dialog-head h2 { font-size: 22px; }
  .dialog-body { padding: 20px 18px; }
  .detail-top p, .memo, .memo small { font-size: 14px; color: #50505b; }
  .memo { font-size: 16px; line-height: 1.85; }
  .file-row { flex-wrap: wrap; gap: 12px; padding: 20px 0; }
  .file-info strong { font-size: 16px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
  .file-info small { font-size: 14px; color: #595963; }
  .file-actions { width: 100%; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .file-icon { font-size: 12px; }
  .upload-zone h3 { font-size: 16px; }
  .upload-zone p { font-size: 14px; color: #595963; line-height: 1.8; }
  .chat-layout { height: 730px; }
  .chat-person strong, .chat-head strong { font-size: 16px; }
  .chat-person p, .chat-head small, .chat-note, .composer .help { font-size: 14px; color: #595963; line-height: 1.8; }
  .chat-head { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .chat-head > div:nth-child(2) { flex: 1; min-width: 120px; }
  .message { max-width: 92%; }
  .message .bubble { font-size: 16px; line-height: 1.85; padding: 13px 16px; }
  .message small { font-size: 13px; color: #5c5c66; line-height: 1.6; }
  .composer { padding: 14px; }
  .composer textarea { min-height: 46px; }
  .composer .help { margin-top: 11px; }
  .weekday { font-size: 14px; color: #51515c; }
  .day { min-height: 72px; font-size: 16px; }
  .day small { font-size: 12px; white-space: normal; line-height: 1.5; }
  .connection p { font-size: 15px; color: #595963; line-height: 1.85; }
  .bar-label { font-size: 14px; color: #53535f; }

  /* Customer portal and sign-in. */
  .portal-head { height: auto; min-height: 82px; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; flex-wrap: wrap; gap: 14px; }
  .portal-head .logo strong { font-size: 19px; }
  .portal-head .logo small { font-size: 10px; color: #64646e; }
  .portal-head .btn { font-size: 14px; min-height: 42px; padding: 9px 11px; }
  .portal-head > .flex { gap: 8px; margin-left: auto; }
  .portal-welcome h1 { font-size: 27px; }
  .portal-welcome p { font-size: 16px; line-height: 1.85; color: #d9d9df; }
  .portal-nav { gap: 23px; }
  .portal-nav button { font-size: 15px; min-height: 50px; color: #55555f; }
  .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .timeline:before { display: none; }
  .stage { font-size: 14px; color: #62626d; }
  .stage > span { width: 33px; height: 33px; font-size: 14px; margin-bottom: 8px; }
  .login-message h1 { font-size: 28px; }
  .login-message p { font-size: 16px; line-height: 1.9; color: #d9d9df; }
  .login-message .eyebrow { font-size: 11px; color: #e4afb2; }
  .login-form-wrap { padding: 60px 22px calc(36px + env(safe-area-inset-bottom)); }
  .login-form-wrap h2 { font-size: 28px; }
  .login-form-wrap p { font-size: 16px; line-height: 1.9; color: #55555f; }
  .login-form-wrap .btn.primary { font-size: 16px; height: 52px; }
  .login-error { font-size: 14px; line-height: 1.7; }
  #app [style*="font-size:10px"], #app [style*="font-size:11px"],
  #app [style*="font-size:12px"], #app [style*="font-size:13px"] { font-size: 14px !important; }

  /* Installation instructions are part of the mobile experience. */
  .pwa-eyebrow { font-size: 10px; color: #ecb6b9; letter-spacing: 1.2px; }
  .pwa-app-identity h2 { font-size: 24px; font-weight: 750; }
  .pwa-app-identity p { font-size: 14px; line-height: 1.7; color: #e0e0e5; }
  .pwa-cover-foot { font-size: 12px; line-height: 1.7; color: #d0d0d6; flex-wrap: wrap; }
  .pwa-content { padding: 22px 22px 26px; }
  .pwa-platforms button { font-size: 15px; min-height: 46px; color: #56565f; padding: 11px 4px; }
  .pwa-steps { margin: 20px 0; }
  .pwa-steps li { padding: 15px 0; gap: 12px; }
  .pwa-step-number { font-size: 13px; width: 32px; height: 32px; }
  .pwa-steps b { font-size: 16px; line-height: 1.7; color: #202023; }
  .pwa-steps p { font-size: 14px; line-height: 1.9; color: #53535e; margin-top: 7px; }
  .pwa-help, .pwa-browser-tip { font-size: 14px; line-height: 1.85; color: #585863; }
  .pwa-copy, .pwa-native-install { min-height: 48px; font-size: 16px; }
  .pwa-feedback { font-size: 14px; line-height: 1.8; }
  .pwa-notes { padding: 16px; }
  .pwa-notes > span { font-size: 14px; color: #40404b; line-height: 1.7; align-items: flex-start; }
  .pwa-notes svg { margin-top: 4px; flex: none; }
  .pwa-notes p { font-size: 14px; line-height: 1.85; color: #5a5a65; margin-top: 9px; }
  .pwa-installed b { font-size: 16px; }
  .pwa-installed p { font-size: 14px; line-height: 1.8; }
  .pwa-settings h2 { font-size: 18px; }
  .pwa-settings p { font-size: 14px; color: #d6d6dd; }
  .pwa-settings small { font-size: 10px; color: #ecb6b9; }
  #toast { font-size: 15px; line-height: 1.8; }
}

@media (max-width: 380px) {
  .workspace { padding-left: 14px; padding-right: 14px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .mode-switch button { font-size: 14px; padding: 7px 5px; }
  .topright { gap: 3px; }
  .portal-head { align-items: flex-start; }
  .portal-head > .flex { width: 100%; justify-content: flex-end; }
  .calendar-head { flex-wrap: wrap; gap: 12px; }
  .pwa-cover { padding-left: 19px; padding-right: 19px; }
  .pwa-app-identity { gap: 12px; }
  .pwa-app-identity img { width: 47px; height: 47px; border-radius: 12px; }
  .pwa-app-identity h2 { font-size: 22px; }
  .pwa-content { padding-left: 18px; padding-right: 18px; }
  .pwa-platforms button { font-size: 14px; }
}