/* ========================================================
   public/mobile.css — 휴대폰 틀 (2026-10-08, 대표 "모바일 UX 를 실사용 가능할 정도로, UI 혼동 없도록 통일")
   구역 A = 틀: 하단 탭 바 · 머리줄 · 숫자 카드 띠 · 서브탭 스위치 · 쵸미 · 모달(바텀 시트 모양) · 대시보드 · 서랍 · 로그인.
   구역 B(public/mobile-cards.css) = 목록: 표 → 카드, 필터 바텀 시트, 검색칸 자리. 표 · 도구줄 안쪽 셀렉터는 그쪽 몫.
   규칙:
   - 모든 규칙은 (max-width: 768px) 안 (style.css 의 기존 모바일 경계와 같다). 데스크톱 · 울트라와이드는 이 파일을 무시한다.
   - 색은 style.css :root 토큰만. 파란색은 --color-accent 하나. 이모지 · 상태 색 칩 없음.
   - 화면 전환 · 서랍 · 시트 애니메이션 없음 (바로 열고 닫힌다).
   - 터치 대상 44px, 입력칸 글자 16px (iOS 확대 방지), 아래 안전 영역 env(safe-area-inset-bottom).
   - 하단 탭 바 DOM 은 public/mobile-shell.js 가 만든다 (#m-tabbar). 탭 바가 있을 때만 body.has-m-tabbar.
   ======================================================== */
@media (max-width: 768px) {
  :root {
    --m-tabbar-h: 56px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);
    --m-touch: 44px;
    --m-fab: 52px;
    --m-bottom: calc(var(--m-tabbar-h) + var(--m-safe-b));
  }

  /* ---------- 0. 전환 애니메이션 없음 ---------- */
  .sidebar,
  .sidebar-backdrop,
  .modal-card,
  .op-modal-card,
  .detail-drawer,
  .support-chat-panel {
    transition: none !important;
    animation: none !important;
  }

  /* ---------- 1. 하단 탭 바 ---------- */
  .m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990; /* 서랍(999) · 모달(9999) 아래, 본문 위 */
    display: flex;
    align-items: stretch;
    height: var(--m-bottom);
    padding: 0 0 var(--m-safe-b);
    box-sizing: border-box;
    background: var(--color-canvas, #ffffff);
    border-top: 1px solid var(--color-hairline, #e0e0e0);
  }
  .m-tabbar[hidden],
  body.m-typing .m-tabbar,
  body.m-chomi-open .m-tabbar { display: none; }
  .m-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--m-touch);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 6px 2px 4px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #64748b);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-tab[hidden] { display: none; }
  .m-tab svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .m-tab-label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-tab.is-active { color: var(--color-accent, #0066ff); }
  .m-tab:focus-visible { outline: 2px solid var(--color-accent, #0066ff); outline-offset: -4px; }

  /* 본문은 탭 바 + 쵸미 버튼 아래까지 내려간다 */
  body.has-m-tabbar .main-content {
    padding-bottom: calc(var(--m-bottom) + var(--m-fab) + 24px) !important;
  }
  /* 서랍이 열리면 탭 바 · 쵸미는 서랍 아래 (서랍이 위) */
  body.sidebar-open .m-tabbar { visibility: hidden; }

  /* ---------- 2. 머리줄: 버튼 44px 한 줄 ---------- */
  .main-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .content-header {
    min-height: var(--m-touch) !important;
    gap: 6px !important;
  }
  .content-header .title-group { min-width: 0; }
  .btn-mobile-sidebar-toggle {
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
    min-width: var(--m-touch);
    flex: 0 0 auto;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
  }
  .header-right-meta {
    max-width: calc(100% - 50px) !important;
    gap: 2px !important;
    align-items: center;
  }
  .header-right-meta > button:not([hidden]),
  .header-right-meta .header-dl > button,
  .header-right-meta .btn-notifications,
  .header-right-meta .btn-access-admin,
  .header-right-meta .btn-logout,
  .header-right-meta .btn-login-trigger {
    min-width: var(--m-touch);
    min-height: var(--m-touch);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  .header-right-meta .operator-box {
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .header-right-meta .btn-logout {
    display: inline-flex;
    border-radius: 9999px !important;
    padding: 0 !important;
  }
  .header-right-meta .operator-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-touch);
    height: var(--m-touch);
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 1px solid var(--color-hairline, #e0e0e0);
    border-radius: 9999px;
    background: var(--color-canvas, #ffffff);
  }
  .header-right-meta .operator-name-text,
  .header-right-meta .operator-role-badge { display: none; }

  /* ---------- 3. 숫자 카드 줄 = 가로 띠 ---------- */
  .view-kpis,
  .kpi-grid,
  .op-kpi-grid,
  .oc-kpi-grid,
  .oc-kpi-grid-skel,
  .orders-kpi-grid,
  .ab-kpis {
    /* display 는 그대로 둔다 (화면마다 숨김 규칙 · 인라인 display:none 이 있다): 칸을 옆으로만 흘린다 */
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .view-kpis::-webkit-scrollbar,
  .kpi-grid::-webkit-scrollbar,
  .op-kpi-grid::-webkit-scrollbar,
  .oc-kpi-grid::-webkit-scrollbar,
  .oc-kpi-grid-skel::-webkit-scrollbar,
  .orders-kpi-grid::-webkit-scrollbar,
  .ab-kpis::-webkit-scrollbar { display: none; }
  .view-kpis > *,
  .kpi-grid > *,
  .op-kpi-grid > *,
  .oc-kpi-grid > *,
  .oc-kpi-grid-skel > *,
  .orders-kpi-grid > *,
  .ab-kpis > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 144px !important;
    max-width: 240px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 8px 12px !important;
    scroll-snap-align: start;
    grid-column: auto !important;
  }
  /* 카드 안 글자: 이름 · 숫자는 자르지 않고 카드가 늘어난다 (240px 까지), 긴 설명 줄만 말줄임 */
  .view-kpis > * > *,
  .kpi-grid > * > *,
  .op-kpi-grid > * > *,
  .oc-kpi-grid > * > *,
  .orders-kpi-grid > * > *,
  .ab-kpis > * > * {
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- 4. 맨 위 줄 · 서브탭 스위치 ---------- */
  /* 맨 위 줄은 휴대폰에서 줄을 나눈다: 1줄 = 스위치(전체 폭), 다음 줄 = 그 화면 조작 · 검색 · 버튼.
     검색칸 자리와 필터 줄은 구역 B (mobile-cards.css). */
  .view-top,
  .main-content > .unified-toolbar {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    row-gap: 8px;
    overflow: visible !important;
  }
  .view-top-left,
  .main-content > .unified-toolbar > .toolbar-left-group {
    flex: 1 1 100% !important;
    max-width: 100%;
    flex-wrap: wrap !important;
    row-gap: 8px;
    height: auto !important;
    overflow: visible !important;
    border-radius: 0;
  }
  .view-top-right,
  .main-content > .unified-toolbar > .toolbar-right-group {
    flex: 1 1 100% !important;
    max-width: 100%;
    height: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .view-top-right::-webkit-scrollbar,
  .main-content > .unified-toolbar > .toolbar-right-group::-webkit-scrollbar { display: none; }
  .view-top button,
  .view-top select,
  .main-content > .unified-toolbar button,
  .main-content > .unified-toolbar select {
    max-height: none !important;
    min-height: var(--m-touch);
    white-space: nowrap !important;
    flex-shrink: 0;
  }
  .view-top input:not([type="checkbox"]):not([type="radio"]),
  .main-content > .unified-toolbar input:not([type="checkbox"]):not([type="radio"]) {
    max-height: none !important;
    min-height: var(--m-touch);
    font-size: 16px !important;
  }

  /* 스위치 = 한 줄 전체 폭, 옆으로 밀림, 항목 44px, 글자 자르지 않음 */
  .reg-subtabs-group,
  .reg-subtabs.is-visible,
  .oc-switch {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
  }
  .reg-subtabs[hidden],
  .reg-subtabs-group[hidden],
  .oc-switch[hidden] { display: none !important; }
  .reg-subtabs-group::-webkit-scrollbar,
  .reg-subtabs::-webkit-scrollbar,
  .oc-switch::-webkit-scrollbar { display: none; }
  .reg-subtabs-group button,
  .reg-subtabs button,
  .oc-switch button,
  .reg-subtab-btn {
    flex: 0 0 auto !important;
    min-height: var(--m-touch) !important;
    max-height: none !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .oc-switch .oc-switch-cap { flex: 0 0 auto; white-space: nowrap; align-self: center; padding: 0 2px 0 10px; }
  .reg-subtabs-group,
  .reg-subtabs.is-visible,
  .oc-switch { justify-content: flex-start !important; }
  /* 업무 관제 두 묶음(관리 | 내 업무): 바깥 .oc-switch 가 한 줄 스크롤, 안쪽 묶음은 글자 폭 그대로 */
  .oc-switch-grouped > .oc-switch-group {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* 관제 화면 작은 단추들 (이전 · 다음 · 시작 · 새로고침 · 기간) */
  .oc-act-btn,
  .oc-period-btn,
  .oc-person-stat,
  #control-view .op-btn,
  #operations-view .op-tab-pill {
    min-height: var(--m-touch);
    min-width: var(--m-touch);
    white-space: nowrap;
  }
  .oc-act-select,
  #control-view input:not([type="checkbox"]):not([type="radio"]),
  #control-view select,
  #control-view textarea {
    min-height: var(--m-touch);
    font-size: 16px !important;
  }
  /* 병목 카드 · 사람 카드 글자 줄바꿈 (자르지 않는다) */
  .oc-bn-head,
  .oc-person-head,
  .oc-people-head { flex-wrap: wrap; row-gap: 6px; }

  /* ---------- 5. 쵸미 ---------- */
  /* 버튼 = 52px 원(얼굴만), 오른쪽 12, 탭 바 위 12. chomi-dock.js 의 끌어 놓은 자리(<style id="chomi-dock-style">)보다 앞선다. */
  html body #btn-support-chat.support-chat-fab {
    width: var(--m-fab) !important;
    height: var(--m-fab) !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
    bottom: calc(var(--m-bottom) + 12px) !important;
    border-radius: 9999px !important;
    overflow: hidden;
  }
  html body:not(.has-m-tabbar) #btn-support-chat.support-chat-fab {
    bottom: calc(var(--m-safe-b) + 12px) !important;
  }
  html body #btn-support-chat .support-chat-fab-label { display: none !important; }
  html body #btn-support-chat .support-chat-fab-avatar {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  /* 서랍 · 모달 · 쵸미 창이 열려 있으면 버튼을 감춘다 (닫기는 창 머리줄) */
  html body.sidebar-open #btn-support-chat.support-chat-fab,
  html body.m-chomi-open #btn-support-chat.support-chat-fab,
  html body.m-typing #btn-support-chat.support-chat-fab,
  html body:has(#op-modal-root .op-modal-backdrop) #btn-support-chat.support-chat-fab,
  html body.m-modal-open #btn-support-chat.support-chat-fab { display: none !important; }
  html body.sidebar-open .chiri-signal-nudge,
  html body.m-chomi-open .chiri-signal-nudge { display: none !important; }
  html body .chiri-signal-nudge {
    bottom: calc(var(--m-bottom) + var(--m-fab) + 20px) !important;
    top: auto !important;
  }

  /* 쵸미 창 = 전체 화면 */
  html body #support-chat-panel.support-chat-panel {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10000 !important;
    padding-top: var(--m-safe-t);
    padding-bottom: var(--m-safe-b);
    box-sizing: border-box;
  }
  #support-chat-panel #support-chat-resizer { display: none !important; }
  #support-chat-panel .support-chat-header {
    min-height: 56px;
    padding: 6px 4px 6px 12px !important;
    gap: 6px;
  }
  #support-chat-panel .support-chat-title-group { min-width: 0; flex: 1 1 auto; }
  #support-chat-panel .support-chat-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #support-chat-panel .support-chat-header-actions { gap: 0 !important; flex-shrink: 0; }
  #support-chat-panel .btn-chat-icon,
  #support-chat-panel .btn-chiri-sound-toggle,
  #support-chat-panel .btn-chiri-wake-toggle,
  #support-chat-panel .btn-notice-dismiss,
  #support-chat-panel .chomi-header-avatar,
  #support-chat-panel #chomi-header-avatar-btn {
    min-width: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  #support-chat-panel .support-chat-input {
    min-height: var(--m-touch) !important;
  }
  #support-chat-panel .support-chat-input,
  #support-chat-panel textarea,
  #support-chat-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    font-size: 16px !important;
  }
  #support-chat-panel .btn-chat-chip,
  #support-chat-panel .support-chat-form button,
  #support-chat-panel .support-chat-actions-bar button {
    min-width: var(--m-touch);
    min-height: var(--m-touch);
  }

  /* ---------- 6. 모달 = 바텀 시트 모양 ---------- */
  .modal-overlay,
  .op-modal-backdrop {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: var(--m-safe-t) 0 0 !important;
  }
  .modal-overlay > .modal-card,
  .op-modal-backdrop > .op-modal-card,
  .cases-modal,
  .fq-modal {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .modal-overlay > .modal-card > form,
  .op-modal-backdrop > .op-modal-card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .modal-overlay .modal-header,
  .op-modal-card .op-modal-header {
    padding: 12px 8px 12px 16px !important;
    flex-shrink: 0;
  }
  .modal-overlay .modal-body,
  .op-modal-card .op-modal-body {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
  }
  .modal-overlay .modal-footer,
  .op-modal-card .op-modal-footer {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 10px 16px calc(10px + var(--m-safe-b)) !important;
  }
  .modal-overlay .modal-footer button,
  .op-modal-card .op-modal-footer button,
  .op-modal-card .op-btn,
  .modal-overlay .modal-card button.btn-primary,
  .modal-overlay .modal-card button.btn-secondary {
    min-height: var(--m-touch);
  }
  .modal-overlay .modal-close,
  .modal-overlay .btn-modal-close,
  .op-modal-card .op-modal-close,
  .op-modal-card .op-modal-header > button {
    min-width: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
    margin-left: 4px !important;
  }
  .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  .modal-overlay select,
  .modal-overlay textarea,
  .op-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  .op-modal-card select,
  .op-modal-card textarea {
    font-size: 16px !important;
    min-height: var(--m-touch);
  }

  /* 사진 미리보기: 사진이 위, 버튼 줄은 아래로 접히고 닫기 × 는 오른쪽 위 */
  #image-preview-modal .image-preview-card {
    position: relative !important;
  }
  #image-preview-modal .image-preview-header {
    flex-wrap: wrap !important;
    gap: 8px;
    padding: 10px 56px 10px 14px !important;
  }
  #image-preview-modal .image-preview-header > div:first-child {
    flex: 1 1 100% !important;
    padding-right: 0 !important;
    min-width: 0;
  }
  #image-preview-modal .image-preview-title,
  #image-preview-modal .image-preview-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #image-preview-modal .image-preview-header > div:last-child {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-right: -42px;
  }
  #image-preview-modal .btn-image-open-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--m-touch);
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }
  #image-preview-modal #btn-close-image-modal {
    position: absolute !important;
    top: 6px;
    right: 6px;
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
    min-width: var(--m-touch);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  #image-preview-modal .image-preview-stage-container {
    order: -1;
    flex: 1 1 auto;
    min-height: 0;
  }
  #image-preview-modal #image-preview-img {
    max-width: 100% !important;
    max-height: 60dvh !important;
    object-fit: contain;
  }
  #image-preview-modal .btn-img-nav {
    width: var(--m-touch) !important;
    height: var(--m-touch) !important;
  }

  /* 상세 서랍: 화면 전체 폭, 닫기 44px */
  .detail-drawer {
    width: 100% !important;
    max-width: none !important;
  }
  /* 닫힌 서랍은 화면 오른쪽 밖에 있는데 그림자 · 왼쪽 선이 화면 끝에 회색 띠로 비친다 */
  .detail-drawer:not(.open) {
    box-shadow: none !important;
    border-left-color: transparent !important;
    visibility: hidden;
  }
  .detail-drawer .drawer-close-btn {
    min-width: var(--m-touch);
    min-height: var(--m-touch);
  }

  /* ---------- 7. 대시보드 ---------- */
  /* 3D 뇌 지도는 휴대폰에서 숨기고, 처리 순서(할 일)가 맨 위 */
  .dash-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .dash-grid > .dash-card.dash-map { display: none !important; }
  .dash-grid > .dash-card.dash-queue { order: -1; }
  .dash-stage-footer > span,
  .sw-hint { display: none !important; }
  #dash-queue {
    max-height: none !important;
  }
  .dash-search input,
  #global-search-input,
  #dash-global-search-input {
    font-size: 16px !important;
    min-height: var(--m-touch);
  }
  .dash-actions button,
  .dash-search button,
  .btn-dash-search,
  #btn-dash-global-search,
  .btn-dash-chiri-ai,
  .adb-more,
  .ws-btn,
  .dash-link-btn {
    min-height: var(--m-touch);
    min-width: var(--m-touch);
  }

  /* ---------- 8. 서랍 ---------- */
  .sidebar-nav .nav-item {
    min-height: 48px !important;
    box-sizing: border-box;
    align-items: center;
  }
  .btn-mobile-sidebar-close {
    min-width: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
    justify-content: center;
    align-items: center;
  }
  .sidebar { padding-bottom: calc(20px + var(--m-safe-b)) !important; }

  /* ---------- 9. 로그인 화면 (login.html, mobile.css 링크가 있을 때) ---------- */
  .login-submit,
  .login-tab,
  .login-link {
    min-height: var(--m-touch);
  }
  .login-legal a,
  #login-signup-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-touch);
    padding: 0 6px;
  }
  .login-legal { flex-wrap: wrap; }
  #login-org,
  #login-identifier,
  #login-password,
  .login-card input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
    min-height: var(--m-touch);
  }

  /* ---------- 10. 표 위 줄: 조회 결과 줄 + 보기 · 버튼 줄 (표 | 사진 스위치가 잘리지 않게) ---------- */
  .main-content .table-meta-bar {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 6px;
  }
  .main-content .table-meta-bar > .meta-left {
    flex: 1 1 100% !important;
    max-width: 100%;
  }
  .pv-seg { height: auto !important; }
  .pv-seg-btn {
    height: 40px !important;
    padding: 0 12px !important;
    gap: 4px !important;
  }
}

/* 2026-10-12 화면 점검 (375px, AGENTS.md 화면 규칙 10 "줄바꿈 대신 옆으로 스크롤") */
@media (max-width: 768px) {
  /* 소싱 단계 칩 8개가 회색 알약 안에서 4줄로 감기던 것 → 한 줄, 옆으로 스크롤 */
  .srcg-tabs-row { min-width: 0; max-width: 100%; padding-right: 0; }
  .srcg-tabs-row .srcg-tabs { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none; }
  .srcg-tabs-row .srcg-tabs::-webkit-scrollbar { display: none; }
  .srcg-tabs-row .srcg-tabs .op-tab-pill { flex: 0 0 auto; white-space: nowrap; }
  /* 공통 푸터: 3칸이 한 줄에 짜부라져 잘리던 것 → 세로로 쌓는다 */
  .slim-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .slim-footer-right { flex-wrap: wrap; gap: 4px 12px; }
}
.orders-mobile-link{display:none}
@media(max-width:768px){.orders-mobile-link{display:block;width:fit-content;margin:8px 14px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:24px;background:#fff;color:#141414;text-decoration:none;font-size:13px}}