/* =============================================================================================
   mobile-layout.css: 휴대폰 화면 규칙을 모은 하나의 파일 (2026-10-01 통합, claude/mobile-css).

   중단점
     ≤640px   휴대폰. 이 파일의 화면 규칙은 거의 모두 @media (max-width: 640px) 안에 있다.
     ≤480px / 481~640px 글자 링크 버튼의 좌우 패딩 0 (0-1, 디자인 6차부터 휴대폰 전체).
     641~1100px 태블릿 보정과 데스크톱 주문번호 글자 규칙은 rms-responsive-containment.css에 남긴다.
     미디어 쿼리 밖의 규칙은 휴대폰 전용 컴포넌트(하단 버튼 바, 필터 시트, 작업지시서 섹션, 도면 전체 화면)와
     휴대폰 규칙이 덮어쓰는 컴포넌트(고객 상단 바, 주문 흐름 상단 바, 전체 패턴 찾기, 상세 머리 메타 줄)의
     기본값이다. 데스크톱에서도 적용되며 통합 전과 같은 값이다.

   적용 순서
     index.html, rms-pilot.html, work-order.html에서 이 파일을 마지막에 로드한다
     (tokens.css → rms-responsive-containment.css → internal-login.css → customer-ui.css → admin-ui.css → account-management.css → mobile-layout.css).
     customer-ui.css, admin-ui.css(디자인 6차)는 모든 폭의 기본 모양이고, 휴대폰 모양은 이 파일에서 덮는다.
     같은 specificity면 이 파일이 이기고, 파일 안에서는 아래 규칙이 이긴다.
     섹션 안에서는 오래된 규칙을 먼저, 새 규칙을 뒤에 둔다. 충돌하면 새 규칙이 이긴다 (2026-10-01 사용자 결정).
     !important는 React inline style(style={{…}})을 이겨야 하는 곳과, 이미 !important인 규칙을 이겨야 하는 곳에만 쓴다.

   출처 (규칙 옆 꼬리표)
     [C 09-15]  rms-responsive-containment.css (Codex 반응형 격리, 2026-09-15~16)
     [T 09-xx]  tokens.css Layer 2 휴대폰 규칙 (2026-09-15 상세 머리, 09-25 모달·채팅, 09-26 계정, 09-28 디자인 Agent admin-mobile)
     [M 09-30]  이 파일 (coordinator Claude, odm-frontend, 디자인 Agent design/mobile-polish 1~4, 2026-09-30~10-01)
     겹친 규칙을 어떻게 합쳤는지는 docs/handoffs/2026-10-01-claude-mobile-css.md 참고.

   섹션
     0 공통   1 고객 흐름   2 관리자 상단 바·목록 카드   3 관리자 상세   4 작업지시서   5 생산·검수   6 계정   7 다이얼로그
   ============================================================================================= */


/* =============================================================================================
   0. 공통
   ============================================================================================= */

/* 0-1. 휴대폰: 글자 링크 버튼은 좌우 패딩 0 [C 09-15, 범위는 디자인 6차].
   ".btn 좌우 8px !important"(≤480px)는 코디네이터 결정 1로 지웠고 디자인 6차에서 승인했다(버튼 패딩은 0-7의 .btn 16px / .btn-sm 12px).
   글자 링크 버튼 패딩 0은 원래 ≤480px였으나 481~640px에서 16px가 붙어 정렬이 어긋나 같은 규칙을 그 폭에도 둔다(디자인 6차 결정 3). */
@media (max-width: 480px) {
  .toss .btn.btn-link { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .toss .btn.btn-link { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 640px) {
  /* 0-2. 화면 밖으로 넘치지 않게 가두기 [C 09-15]. */
  html,
  body { max-width: 100%; overflow-x: hidden; }
  .toss,
  .toss main,
  .toss section { min-width: 0; max-width: 100%; }
  .toss { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .toss > *,
  .toss main > *,
  .toss section > * { min-width: 0; max-width: 100%; }

  /* 페이지 좌우 여백 16px [C 09-15 12px → M 09-30 16px]. */
  .toss main,
  .toss > [style*="max-width"] { width: 100%; padding-left: var(--s-4) !important; padding-right: var(--s-4) !important; }

  .toss [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .toss [style*="display: flex"] { min-width: 0; max-width: 100%; }
  .toss [style*="justify-content: space-between"],
  .toss .card-head,
  .toss .card-flat[style*="display: flex"],
  .toss .card-flat > [style*="display: flex"][style*="gap: 16px"] { flex-wrap: wrap; }
  .toss [style*="min-width: 320px"],
  .toss [style*="min-width: 280px"],
  .toss [style*="width: 380px"],
  .toss [style*="width: 320px"],
  .toss [style*="width: 280px"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

  /* 카드 안의 표는 가로 스크롤. 카드로 쌓는 목록(.table-stack-wrap)은 2장에서 되돌린다. */
  .toss .card-flat:has(> table) { max-width: 100%; overflow-x: auto !important; overscroll-behavior-x: contain; }
  .toss .card-flat:has(> table) > table { width: max-content !important; min-width: 100%; }

  .toss .btn,
  .toss button,
  .toss input,
  .toss select,
  .toss textarea,
  .toss img,
  .toss svg { max-width: 100%; }

  /* 0-3. 모달은 아래에서 올라오는 시트 [T 09-25]. 도면 전체 화면(4장 .wo-drawing-full)이 뒤에서 덮어쓴다. */
  .toss .modal-backdrop { padding: 0; align-items: end; }
  .toss .modal { max-height: 92vh; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; }

  /* 0-4. 요약 숫자 줄(SummaryBar) 2열 [T 09-26], FormTable 레이블 120px, FilterBar 버튼 줄 전체 폭 [T 09-26]. */
  .toss .summary-item { flex: 1 1 40%; padding: 12px 16px; border-bottom: 1px solid var(--border-base); }
  .toss .summary-item:nth-child(even) { border-right: none; }
  .toss .summary-item:last-child,
  .toss .summary-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .toss .form-table .form-row { grid-template-columns: 120px minmax(0, 1fr); }
  .toss .filter-bar .filter-actions { margin-left: 0; width: 100%; }

  /* 도움말(?) 아이콘: 누르는 영역을 사방 8px 넓힌다 [T 09-28]. */
  .toss .help::before { content: ""; position: absolute; inset: -8px; }
}

/* 0-5. 휴대폰에서만 / 휴대폰에서는 숨김 [T 09-28]. */
.toss .phone-only { display: none; }
@media (max-width: 640px) {
  .toss .phone-only { display: flex; }
  .toss .hide-phone { display: none !important; }
}

@media (max-width: 640px) {
  /* 0-6. 페이지 머리 [M 09-30]: 옛 카드형 머리(h2.t-h1)는 제목 전체 폭, 버튼은 다음 줄. */
  .toss .card-flat:has(> div > h2.t-h1) { flex-wrap: wrap; row-gap: var(--s-3) !important; padding: var(--s-4) !important; }
  .toss .card-flat:has(> div > h2.t-h1) > div:has(> h2.t-h1) { flex: 1 1 0 !important; min-width: 0; }
  .toss .card-flat:has(> div > h2.t-h1) > div:last-child:not(:has(> h2.t-h1)) { flex: 1 0 100%; justify-content: flex-end; }

  /* 0-7. 디자인 Agent 공통 규칙 [M 09-30 design/mobile-polish]:
     좌우 여백 16px(0-2), 카드 안쪽 16px, 카드 사이 12px, 누르는 영역 44px, 입력 글자 16px, 버튼 좌우 패딩 16px/12px. */
  /* 카드 안쪽 여백 16px. 인라인 24px / 20px 24px / var(--s-6) 카드만 바꾸고, padding 0 카드(표, 탭)는 그대로. */
  .toss :is(.card-flat, .card-raised):is([style*="padding: 24px;"], [style*="padding: var(--s-6);"], [style*="padding: 20px 24px;"], [style*="padding: 20px;"], [style*="padding: 28px;"]) { padding: var(--s-4) !important; }
  /* 카드 사이 12px. 카드의 아래 여백과, 카드를 쌓는 세로 flex/grid 간격(16~24px)을 12px로 맞춘다. */
  .toss :is(.card-flat, .card-raised)[style*="margin-bottom"] { margin-bottom: var(--s-3) !important; }
  .toss :is(main, section, div)[style*="flex-direction: column"]:has(> :is(.card-flat, .card-raised)):is([style*="gap: 16px"], [style*="gap: 20px"], [style*="gap: 24px"]) { gap: var(--s-3) !important; }

  /* 버튼: 높이 44px, 좌우 패딩 통일. 작은 버튼(btn-sm)도 누르는 높이는 44px. */
  .toss .btn { padding-left: var(--s-4); padding-right: var(--s-4); }
  .toss .btn-sm { height: 44px; padding-left: var(--s-3); padding-right: var(--s-3); }
  .toss .btn-lg { padding-left: var(--s-5); padding-right: var(--s-5); }
  /* 아이콘 버튼(줄마다 붙는 연필 등): 줄 높이는 그대로 두고 누르는 영역만 44px로 넓힌다. */
  .toss .icon-btn { position: relative; }
  .toss .icon-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .toss select { min-height: 44px; }
  .toss .choice-chip { min-height: 44px; }
  /* 글자 링크 버튼(수정, 링크 추가, 요약으로, 전체 보기 등): 배치는 그대로 두고 누르는 영역만 위아래로 넓힌다. */
  .toss .btn-link { position: relative; }
  .toss .btn-link::before { content: ""; position: absolute; top: 50%; left: calc(var(--s-2) * -1); right: calc(var(--s-2) * -1); height: 44px; transform: translateY(-50%); }

  /* 입력칸 글자 16px (iOS 확대 방지). 채팅 입력의 안내 문구 크기는 1-3이 따로 정한다. */
  .toss input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .toss select,
  .toss textarea { font-size: var(--t-body) !important; }

  /* 페이지 머리(PageHeader): 뒤로 버튼, 제목, 설명 한 줄, 버튼 줄. 설명은 두 줄까지만. */
  .toss .page-header { padding: var(--s-4) !important; gap: var(--s-2) var(--s-3) !important; }
  .toss .page-header .t-h1 { font-size: var(--t-h2); }
  .toss .page-header__subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .toss .page-header__actions { flex: 1 0 100%; justify-content: flex-end; }
  .toss .page-header__actions .btn { flex: 1 1 0; }

  /* 목록 도구: 계정 탭, 검색칸, 페이지 번호도 44px [M 09-30]. */
  .toss .filter-tabs button { min-height: 44px; }
  .toss .filter-bar .input { height: 44px; }
  .toss .pagination button { min-width: 44px; height: 44px; }
}


/* =============================================================================================
   1. 고객 흐름 (정보 입력, 채팅, 요약, 디자인 시안, 주문 접수, 주문 완료, 내 주문)
   ============================================================================================= */

/* 1-1. 고객 상단 바 (정보 입력 화면, 내 주문 머리) [M 09-30]. */
.toss .customer-topbar { flex-wrap: wrap; }
.toss .customer-topbar__actions { min-width: 0; }
@media (max-width: 640px) {
  /* 소개 문구는 숨기고, 세션 상태·내 주문·로그아웃·Admin을 오른쪽 한 줄에 둔다. */
  .toss .customer-topbar { padding: var(--s-3) var(--s-4) !important; row-gap: var(--s-2) !important; }
  .toss .customer-topbar__tagline { display: none; }
  .toss .customer-topbar__actions { flex-wrap: wrap; justify-content: flex-end; }
  .toss .customer-topbar__actions [data-customer-session] { flex-wrap: nowrap !important; min-width: 0; }
  .toss .customer-topbar__actions .customer-session__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 내 주문 / 비밀번호 변경 / 로그아웃: 44px. */
  .toss [data-customer-session] .btn { min-height: 44px; white-space: nowrap; }
  .toss [data-customer-session] { justify-content: flex-end; }
}

/* 1-2. 주문 흐름 상단 바(ScopeBar) [C 09-15 + M 09-30].
   데스크톱: 세션 버튼은 작은 Admin 버튼과 같은 크기. 비밀번호 변경은 내 주문과 정보 입력 상단 바에만 둔다. */
.toss .scope-bar__actions { min-width: 0; }
.toss .scope-bar__actions [data-customer-session] .btn { height: 24px; padding: 0 var(--s-2); font-size: var(--t-micro); }
.toss .scope-bar__actions [data-session-password] { display: none; }
/* 1-4 기본값(모든 폭): 채팅 아래 묶음(.chat-dock: 입력 바 + 주문정보 확인 버튼)은 데스크톱에서 상자를 만들지 않아
   기존 배치 그대로다. "새 메시지" 버튼도 휴대폰에서만 보인다. 휴대폰 고정 규칙은 아래 1-4 [claude/chat-input 10-02]. */
.toss .chat-dock,
.toss .chat-review { display: contents; }
.toss .chat-jump { display: none; }
@media (max-width: 640px) {
  /* 줄바꿈되어도 세로 구분선이 남지 않게. 위아래 8px [C 09-15], 좌우 16px·간격 8/12px [M 09-30]. */
  .toss .scope-bar { flex-wrap: wrap; padding: 8px var(--s-4) !important; row-gap: var(--s-2) !important; column-gap: var(--s-3) !important; }
  .toss .scope-bar > div[style*="width: 1px"] { display: none; }
  /* 오른쪽으로 밀어 둔 항목은 줄바꿈 후 왼쪽부터 [C 09-15]. 세션 버튼 묶음은 줄 끝에 남긴다 [M 09-30]. */
  .toss .scope-bar > [style*="margin-left: auto"]:not(.scope-bar__actions) { margin-left: 0 !important; }
  /* 고객 이름은 바 앞에 있으므로 세션 이름표는 숨기고, 버튼은 한 줄·44px. */
  .toss .scope-bar > .scope-bar__actions { flex-wrap: nowrap; gap: var(--s-2) !important; }
  .toss .scope-bar__actions [data-customer-session] { flex-wrap: nowrap !important; gap: var(--s-2) !important; }
  .toss .scope-bar__actions .customer-session__label { display: none; }
  .toss .scope-bar__actions .btn { height: 44px !important; padding: 0 var(--s-3) !important; font-size: var(--t-small) !important; white-space: nowrap; }
  .toss .scope-bar__actions [role="alert"] { display: none; }
  /* 입력 진행: 0% 원형 게이지를 빼고 "입력 진행 N / M"을 한 줄로 [M 10-01 round 1]. */
  .toss .scope-bar .completeness { gap: 0 !important; }
  .toss .scope-bar .completeness__ring { display: none !important; }
  .toss .scope-bar .completeness > div:last-child { display: flex; align-items: baseline; gap: var(--s-1); }
  /* 내 주문, 로그아웃 모두 테두리 없는 버튼 [M 10-01 round 1]. */
  .toss .scope-bar__actions [data-customer-session] .btn { border-color: transparent !important; background: transparent; }
  /* "입력 진행 N/5 단계"와 5칸 막대 사이 8px. 칸별 단계 이름은 화면 읽기 프로그램에만 [M 10-01 round 4]. */
  .toss .scope-bar .completeness--staged { gap: var(--s-2) !important; }
  .toss .stage-progress li > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toss .stage-progress ol li > span:first-child { height: 6px !important; }

  /* 1-3. 단계 표시(RouteStepper) [C 09-15 + M 09-30]: 지금 단계만 이름을 남겨 가로 스크롤 없이 한 줄에 들어간다. */
  .toss .route-stepper { flex-wrap: nowrap; overflow-x: hidden; overscroll-behavior-x: contain; gap: var(--s-1) !important; padding: 8px var(--s-4) !important; }
  .toss .route-stepper > * { flex-shrink: 0; }
  .toss .route-stepper > .route-step { padding-left: var(--s-2) !important; padding-right: var(--s-2) !important; }
  .toss .route-stepper > .route-step:not(.is-current) .route-step__label { display: none; }
  .toss .route-stepper > .route-step__line { flex: 1 1 auto; min-width: var(--s-1); }

  /* 1-4. 채팅. 옆 패널은 데스크톱 전용, 휴대폰은 채팅 안 카드와 전체 보기 시트가 대신한다 [T 09-25]. */
  .toss .chat-captured-panel { display: none; }
  /* 입력칸: 두 줄 안내 문구가 잘리지 않게 문구만 줄인다. 입력 글자는 16px 유지 [M 09-30]. */
  .toss textarea[data-chat-input] { min-height: 52px !important; padding-top: 6px; padding-bottom: 6px; }
  .toss textarea[data-chat-input]::placeholder { font-size: var(--t-small); line-height: var(--lh-small); }
  /* 말풍선 폭을 넓히고 아바타를 줄인다. 소개 문구는 첫 인사 말풍선과 겹쳐 숨긴다 [M 09-30]. */
  .toss .chat-layout { padding-top: var(--s-4) !important; padding-bottom: var(--s-4) !important; gap: var(--s-3) !important; }
  .toss .chat-intro { padding: 0 !important; gap: var(--s-3) !important; }
  .toss .chat-intro > svg { width: 40px; height: 40px; }
  .toss .chat-intro__desc { display: none; }
  .toss .chat-messages { padding: var(--s-3) !important; gap: var(--s-3) !important; min-height: 0 !important; }
  .toss .chat-bubble-row { gap: var(--s-2) !important; }
  .toss .chat-bubble-row > svg { width: 28px; height: 28px; }
  .toss .chat-bubble-col { max-width: 88% !important; }
  .toss .chat-bubble-col > div:first-child { padding: var(--s-3) var(--s-4) !important; }
  .toss .chat-captured-card { max-width: none !important; }
  /* 전송 버튼 높이를 입력칸에 맞춘다 [M 10-01 round 1]. */
  .toss textarea[data-chat-input] ~ .btn { align-self: stretch; height: auto !important; min-height: 44px; }
  /* 휴대폰 채팅은 메신저처럼 화면 높이에 고정한다 [claude/chat-input 10-02, 동작].
     위: 주문 흐름 상단 바와 단계 표시, 가운데: 대화 목록만 스크롤, 아래(.chat-dock): 주문정보 확인 버튼과 입력 바.
     높이와 위치는 chat-viewport.js가 visualViewport 값으로 넣는다(--chat-vv-height, --chat-vv-top). 가상 키보드가
     열리면 화면이 키보드 위까지로 줄어 입력 바가 가려지지 않는다. 키보드가 열린 동안(data-keyboard="open")은 대화를
     볼 자리를 위해 소개 줄과 주문정보 확인 버튼을 숨긴다. 모양(간격, 그림자, 배경)은 디자인 Agent 몫이다. */
  .toss.chat-screen { position: fixed; left: 0; right: 0; top: var(--chat-vv-top, 0px); height: var(--chat-vv-height, 100dvh); min-height: 0 !important; overflow: hidden; }
  .toss.chat-screen > .scope-bar,
  .toss.chat-screen > .route-stepper { flex: none; }
  .toss.chat-screen .chat-layout { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)) !important; }
  .toss.chat-screen .chat-column { flex: 1 1 auto; min-height: 0; }
  .toss.chat-screen .chat-intro { flex: none; }
  .toss.chat-screen .chat-messages { flex: 1 1 auto; flex-wrap: nowrap; overscroll-behavior: contain; } /* 0-2의 카드 줄바꿈(flex-wrap: wrap)을 끈다: 높이가 고정되면 말풍선이 옆 열로 넘어간다. */
  .toss.chat-screen .chat-dock { display: flex; flex: none; flex-direction: column; gap: var(--s-3); position: relative; }
  .toss.chat-screen .chat-review { display: flex; flex-direction: column; order: -1; }
  .toss.chat-screen .chat-jump { display: inline-flex; position: absolute; bottom: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); z-index: 1; gap: var(--s-1); }
  .toss.chat-screen[data-keyboard="open"] .chat-intro,
  .toss.chat-screen[data-keyboard="open"] .chat-review { display: none !important; }
  .toss.chat-screen[data-keyboard="open"] .chat-layout { padding-bottom: var(--s-2) !important; }

  /* 1-5. 디자인 시안: 세 탭이 한 줄에 들어가도록 [M 09-30]. 패턴 버튼 줄 [M 09-30]. */
  .toss .workspace-tabs button { padding: var(--s-3) var(--s-1) !important; min-height: 48px; font-size: var(--t-small) !important; white-space: nowrap; gap: var(--s-1) !important; }
  .toss .workspace-tabs button svg { width: 14px !important; height: 14px !important; }
  .toss .workspace-pattern-actions { width: 100%; }
  .toss .workspace-pattern-actions .btn { flex: 1 1 auto; min-height: 44px; }

  /* 1-6. 내 주문 표: 주문마다 한 칸짜리 카드 [M 09-30]. */
  .toss table[data-my-orders],
  .toss table[data-my-orders] tbody { display: block; width: 100%; }
  .toss table[data-my-orders] thead { display: none; }
  .toss table[data-my-orders] tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st" "pr qt" "dt dt";
    row-gap: var(--s-1); column-gap: var(--s-3); padding: var(--s-3) 0;
  }
  .toss table[data-my-orders] tbody tr:first-child { border-top: 0 !important; }
  .toss table[data-my-orders] td { padding: 0 !important; text-align: left !important; }
  .toss table[data-my-orders] td:nth-child(1) { grid-area: id; }
  .toss table[data-my-orders] td:nth-child(2) { grid-area: pr; }
  .toss table[data-my-orders] td:nth-child(3) { grid-area: qt; text-align: right !important; }
  .toss table[data-my-orders] td:nth-child(3)::after { content: "장"; font-family: var(--font-sans); }
  .toss table[data-my-orders] td:nth-child(4) { grid-area: st; justify-self: end; font-weight: 600; color: var(--text-strong); }
  .toss table[data-my-orders] td:nth-child(5) { grid-area: dt; font-size: var(--t-small); color: var(--text-muted); }
  .toss table[data-my-orders] td:nth-child(5)::before { content: "최근 변경 "; font-family: var(--font-sans); }

  /* 1-7. 주문 완료(status): 큰 아이콘을 줄이고, 상태 4칸은 2열로 [M 09-30]. */
  .toss .status-hero { align-items: flex-start !important; gap: var(--s-3) !important; }
  .toss .status-hero__icon { width: 40px !important; height: 40px !important; flex: none; }
  .toss .status-hero__icon svg { width: 20px; height: 20px; }
  .toss .status-hero h1 { font-size: var(--t-h2) !important; }
  .toss .status-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--s-2) !important; }
  .toss .status-state-grid > div { padding: var(--s-3) !important; }
}


/* 1-9. 디자인 6차 (2026-10-02) [D 10-02]: 약관 동의 줄과 약관 링크는 휴대폰에서 44px (기본 모양은 customer-ui.css). */
@media (max-width: 640px) {
  .toss .legal-consent__check { min-height: 44px; }
  .toss .legal-consent__link { min-height: 44px; }
}

@media (max-width: 640px) {
  /* 1-10. 생산과 배송 진행 [7차]: 전체 단계 펼치기 44px, 내 주문 카드에서는 진행 줄이 카드 폭을 넘지 않게. */
  .order-progress__all > summary { min-height: 44px; }
  .order-progress-line { max-width: none; }
}

@media (max-width: 640px) {
  /* 1-11. 내 주문 카드에 진행 줄이 있으면 상태 칸을 한 줄 전체로 [7차]. */
  .toss table[data-my-orders] tbody tr:has(.order-progress-line) { grid-template-areas: "id qt" "pr pr" "st st" "dt dt"; }
  .toss table[data-my-orders] tbody tr:has(.order-progress-line) td:nth-child(4) { justify-self: stretch; }
}

@media (max-width: 640px) {
  /* 1-12. 첨부 파일 [7차]: 칩 빼기 버튼과 체크박스 누르는 영역 44px, 파일 줄은 이름을 위에 두고 버튼을 아래 줄로. */
  .upload-chip { min-height: 44px; }
  .upload-chip__remove { position: relative; }
  .upload-chip__remove::before { content: ""; position: absolute; inset: -10px; }
  .upload-chip__retry { min-height: 44px; }
  .order-file-row > span { flex: 1 1 0; }
  .order-file-row [data-order-file-name] { white-space: normal !important; overflow-wrap: anywhere; }
  .order-file-row .btn { width: 44px; min-width: 44px; padding: 0; gap: 0; font-size: 0; }
  .order-file-row input[type="checkbox"] { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  /* 1-13. 휴대폰 채팅 하단 바 [7차]: 메신저처럼 화면 폭 전체, 위쪽 구분선. 대화 목록은 카드 테두리를 벗긴다.
     주문정보 확인 버튼은 누를 수 있을 때만 버튼으로, 아직이면 안내 한 줄만 보여 대화 자리를 넓힌다. */
  .toss.chat-screen .chat-layout { padding-bottom: 0 !important; }
  .toss.chat-screen .chat-messages { padding: var(--s-2) 0 var(--s-3) !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .toss.chat-screen .chat-dock { gap: var(--s-2); margin: 0 calc(-1 * var(--s-4)); padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-base); background: var(--bg-card); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04); }
  .toss.chat-screen .chat-input-bar { padding: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .toss.chat-screen .chat-review .btn { height: 48px; font-size: var(--t-body); }
  .toss.chat-screen .chat-review:has([data-review-blocked]) .btn { display: none; }
  .toss.chat-screen .chat-review [data-review-blocked] { margin: 0 !important; padding: var(--s-1) var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); font-size: var(--t-micro); line-height: 1.5; }
  .toss.chat-screen .chat-jump { height: 36px; padding: 0 var(--s-3); border-radius: var(--r-full); border-color: var(--border-base); background: var(--bg-card); color: var(--brand-700); font-weight: 700; box-shadow: var(--shadow-md); }
  .toss.chat-screen .chat-jump::before { content: ""; position: absolute; inset: -4px 0; }
}
@media (max-width: 640px) and (max-height: 640px) {
  /* 짧은 화면에서는 소개 줄(주문 도우미, 온라인)을 접어 대화 자리를 남긴다. */
  .toss.chat-screen .chat-intro { display: none !important; }
}

/* =============================================================================================
   2. 관리자 상단 바·목록 카드
   ============================================================================================= */
@media (max-width: 640px) {
  /* 2-1. 관리자 상단 바(AdminShell): 두 줄, 메뉴는 아래 줄 가로 스크롤 [T 09-28]. 메뉴·사용자 버튼 44px [M 09-30]. */
  .toss .admin-topbar { flex-wrap: wrap; gap: 0; padding: 0 4px 0 16px; }
  .toss .admin-brand { height: 48px; gap: 8px; }
  .toss .admin-me { gap: 4px; }
  .toss .admin-me-tag, .toss .admin-me-name { display: none; }
  .toss .admin-logout { height: 44px; padding: 0 12px; }
  .toss .admin-nav { order: 3; flex: 1 0 100%; margin: 0 0 0 -12px; padding: 4px 0 4px; gap: 4px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .toss .admin-nav-item { min-height: 44px; }
  .toss .admin-topbar button:not(.admin-nav-item):not(.admin-brand) { min-height: 44px; }
  /* 인라인 배경으로 그린 옛 상단 바 [C 09-15], 좌우 16px [M 09-30]. */
  .toss > [style*="background: var(--text-strong)"] { padding: 8px var(--s-4) !important; gap: 8px !important; flex-wrap: wrap; }
  .toss > [style*="background: var(--text-strong)"] nav { order: 3; width: 100%; margin-left: 0 !important; overflow-x: auto; }
  .toss > [style*="background: var(--text-strong)"] > [style*="margin-left: auto"] { margin-left: auto; }

  /* 2-2. 목록 도구 [T 09-28 + M 09-30/10-01]: 상태 탭 44px, 검색칸 전체 폭, 도움말 44px. */
  .toss .queue-tab { min-height: 44px; }
  .toss div:has(> [data-admin-search]) { width: 100%; margin-left: 0 !important; flex-wrap: nowrap !important; }
  .toss [data-admin-search] { flex: 1 1 0; min-width: 0 !important; }
  .toss [aria-controls="admin-order-list-help"] { position: relative; }
  .toss [aria-controls="admin-order-list-help"]::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  /* 주문 목록: 상태 탭 5개를 한 줄에, 이름 위 숫자 아래. 검색은 다음 줄 전체 폭 [M 10-01 round 1]. */
  .toss .admin-order-toolbar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1) !important; }
  .toss .admin-order-toolbar > div:not(.hide-phone) { grid-column: 1 / -1; margin-left: 0 !important; }
  .toss .admin-order-toolbar .queue-tab { flex-direction: column; justify-content: center; gap: 0 !important; height: auto !important; min-height: 52px; padding: var(--s-1) 0 !important; font-size: var(--t-small) !important; white-space: nowrap; }

  /* 2-3. 목록 표를 카드로 쌓기(.table-stack) [T 09-28 + M 09-30].
     표마다 .table-stack + .stack-<목록>, 감싸는 카드에 .table-stack-wrap. 열 번호가 바뀌면 아래 목록별 매핑도 바꾼다.
     카드 칸: "id id st" 주문번호·상태, title 제품명, sub 고객, k1~k4 핵심 숫자, act 버튼 줄. */
  .toss .table-stack-wrap { padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  /* 0-2의 .card-flat:has(> table) 가로 스크롤을 카드형 목록에서는 끈다(카드가 내용 폭만큼만 넓어지던 문제) [M 09-30]. */
  .toss .card-flat.table-stack-wrap { overflow: visible !important; }
  .toss .table-stack { display: block; width: 100% !important; min-width: 0 !important; }
  .toss .table-stack-wrap > .table-stack { width: 100% !important; min-width: 0 !important; }
  .toss .table-stack thead { display: none; }
  .toss .table-stack tbody { display: flex; flex-direction: column; gap: 8px; }
  /* 상태 칩은 자기 칸("st")을 가져서, 긴 주문번호·공장 이름이 칩 아래로 흐르지 않고 옆에서 줄바꿈된다 [M 09-30]. */
  .toss .table-stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "id id st" "title title title" "sub sub sub" "k1 k2 k2" "k3 k4 k4" "act act act"; column-gap: 12px; row-gap: 4px; padding: 14px 16px; background: var(--bg-card) !important; border: 1px solid var(--border-base); border-radius: var(--r-md); }
  .toss .table-stack tbody tr.is-selected { background: var(--brand-50) !important; border-color: var(--brand-500); }
  .toss .table-stack tbody td { display: none; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; white-space: normal !important; }
  .toss .table-stack tbody td[colspan] { display: block; grid-column: 1 / -1; padding: 24px 0 !important; text-align: center !important; }
  /* 목록별 핵심 숫자 칸. 주문 목록 13열(공장 샘플)은 아래 2-4의 링크 줄로 옮겼다. */
  .toss .table-stack.stack-orders tbody td:nth-child(6) { grid-area: k1; } .toss .table-stack.stack-orders tbody td:nth-child(6)::before { content: "수량"; }
  .toss .table-stack.stack-orders tbody td:nth-child(10) { grid-area: k2; } .toss .table-stack.stack-orders tbody td:nth-child(10)::before { content: "최종 금액"; }
  .toss .table-stack.stack-orders tbody td:nth-child(28) { grid-area: k3; } .toss .table-stack.stack-orders tbody td:nth-child(28)::before { content: "담당"; }
  .toss .table-stack.stack-workorders tbody td:nth-child(5) { grid-area: k1; } .toss .table-stack.stack-workorders tbody td:nth-child(5)::before { content: "수량"; }
  .toss .table-stack.stack-workorders tbody td:nth-child(6) { grid-area: k2; } .toss .table-stack.stack-workorders tbody td:nth-child(6)::before { content: "결제 / 견적"; }
  .toss .table-stack.stack-workorders tbody td:nth-child(9) { grid-area: k3; } .toss .table-stack.stack-workorders tbody td:nth-child(9)::before { content: "이관"; }
  .toss .table-stack.stack-workorders tbody td:nth-child(10) { grid-area: k4; } .toss .table-stack.stack-workorders tbody td:nth-child(10)::before { content: "담당"; }
  .toss .table-stack.stack-production tbody td:nth-child(6) { grid-area: k1; } .toss .table-stack.stack-production tbody td:nth-child(6)::before { content: "수량"; }
  .toss .table-stack.stack-production tbody td:nth-child(8) { grid-area: k2; } .toss .table-stack.stack-production tbody td:nth-child(8)::before { content: "배정 공장"; }
  .toss .table-stack.stack-production tbody td:nth-child(9) { grid-area: k3; } .toss .table-stack.stack-production tbody td:nth-child(9)::before { content: "현재 공정"; }
  .toss .table-stack.stack-production tbody td:nth-child(10) { grid-area: k4; } .toss .table-stack.stack-production tbody td:nth-child(10)::before { content: "납기"; }
  .toss .table-stack.stack-inspection tbody td:nth-child(6) { grid-area: k1; } .toss .table-stack.stack-inspection tbody td:nth-child(6)::before { content: "수량"; }
  .toss .table-stack.stack-inspection tbody td:nth-child(7) { grid-area: k2; } .toss .table-stack.stack-inspection tbody td:nth-child(7)::before { content: "공장"; }
  .toss .table-stack.stack-inspection tbody td:nth-child(8) { grid-area: k3; } .toss .table-stack.stack-inspection tbody td:nth-child(8)::before { content: "생산 완료일"; }
  .toss .table-stack.stack-inspection tbody td:nth-child(10) { grid-area: k4; } .toss .table-stack.stack-inspection tbody td:nth-child(10)::before { content: "이슈"; }
  .toss .table-stack.stack-factories tbody td:nth-child(4) { grid-area: k1; } .toss .table-stack.stack-factories tbody td:nth-child(4)::before { content: "가동률"; }
  .toss .table-stack.stack-factories tbody td:nth-child(5) { grid-area: k2; } .toss .table-stack.stack-factories tbody td:nth-child(5)::before { content: "월 생산 여력"; }
  .toss .table-stack.stack-factories tbody td:nth-child(6) { grid-area: k3; } .toss .table-stack.stack-factories tbody td:nth-child(6)::before { content: "납기 준수율"; }
  .toss .table-stack.stack-factories tbody td:nth-child(7) { grid-area: k4; } .toss .table-stack.stack-factories tbody td:nth-child(7)::before { content: "평균 리드타임"; }
  .toss .table-stack.stack-operators tbody td:nth-child(4) { grid-area: k1; } .toss .table-stack.stack-operators tbody td:nth-child(4)::before { content: "역할"; }
  .toss .table-stack.stack-operators tbody td:nth-child(5) { grid-area: k2; } .toss .table-stack.stack-operators tbody td:nth-child(5)::before { content: "담당 분야"; }
  .toss .table-stack.stack-operators tbody td:nth-child(7) { grid-area: k3; } .toss .table-stack.stack-operators tbody td:nth-child(7)::before { content: "마지막 로그인"; }
  .toss .table-stack.stack-customers tbody td:nth-child(4) { grid-area: k1; } .toss .table-stack.stack-customers tbody td:nth-child(4)::before { content: "회원 구분"; }
  .toss .table-stack.stack-customers tbody td:nth-child(5) { grid-area: k2; } .toss .table-stack.stack-customers tbody td:nth-child(5)::before { content: "주문 수"; }
  .toss .table-stack.stack-customers tbody td:nth-child(6) { grid-area: k3; } .toss .table-stack.stack-customers tbody td:nth-child(6)::before { content: "최근 주문일"; }
  .toss .table-stack.stack-customers tbody td:nth-child(3) { grid-area: k4; } .toss .table-stack.stack-customers tbody td:nth-child(3)::before { content: "연락처"; }
  /* id: 주문번호 등. 긴 번호는 상태 칩 옆에서 줄바꿈. */
  .toss .table-stack.stack-orders tbody td:nth-child(1),
  .toss .table-stack.stack-workorders tbody td:nth-child(2),
  .toss .table-stack.stack-production tbody td:nth-child(2),
  .toss .table-stack.stack-inspection tbody td:nth-child(2),
  .toss .table-stack.stack-factories tbody td:nth-child(2),
  .toss .table-stack.stack-operators tbody td:nth-child(2),
  .toss .table-stack.stack-customers tbody td:nth-child(1) { display: block; grid-area: id; align-self: center; overflow-wrap: anywhere; }
  /* st: 상태 칩. */
  .toss .table-stack.stack-orders tbody td:nth-child(11),
  .toss .table-stack.stack-workorders tbody td:nth-child(7),
  .toss .table-stack.stack-production tbody td:nth-child(7),
  .toss .table-stack.stack-inspection tbody td:nth-child(9),
  .toss .table-stack.stack-factories tbody td:nth-child(1),
  .toss .table-stack.stack-operators tbody td:nth-child(6),
  .toss .table-stack.stack-customers tbody td:nth-child(7) { display: block; grid-area: st; justify-self: end; align-self: start; white-space: nowrap !important; }
  /* title: 제품명. */
  .toss .table-stack.stack-orders tbody td:nth-child(4),
  .toss .table-stack.stack-workorders tbody td:nth-child(4),
  .toss .table-stack.stack-production tbody td:nth-child(5),
  .toss .table-stack.stack-inspection tbody td:nth-child(5) { display: block; grid-area: title; font-size: var(--t-body) !important; font-weight: 600 !important; color: var(--text-strong) !important; }
  /* sub: 고객·부가 정보, 아래 구분선. */
  .toss .table-stack.stack-orders tbody td:nth-child(2),
  .toss .table-stack.stack-workorders tbody td:nth-child(3),
  .toss .table-stack.stack-production tbody td:nth-child(4),
  .toss .table-stack.stack-inspection tbody td:nth-child(4),
  .toss .table-stack.stack-factories tbody td:nth-child(3),
  .toss .table-stack.stack-operators tbody td:nth-child(3),
  .toss .table-stack.stack-customers tbody td:nth-child(2) { display: block; grid-area: sub; padding-bottom: 10px !important; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle) !important; font-size: var(--t-small) !important; color: var(--text-muted) !important; }
  /* k1~k4 값과 그 위 작은 이름표. */
  .toss .table-stack.stack-orders tbody td:nth-child(6),
  .toss .table-stack.stack-orders tbody td:nth-child(10),
  .toss .table-stack.stack-orders tbody td:nth-child(28),
  .toss .table-stack.stack-workorders tbody td:nth-child(5),
  .toss .table-stack.stack-workorders tbody td:nth-child(6),
  .toss .table-stack.stack-workorders tbody td:nth-child(9),
  .toss .table-stack.stack-workorders tbody td:nth-child(10),
  .toss .table-stack.stack-production tbody td:nth-child(6),
  .toss .table-stack.stack-production tbody td:nth-child(8),
  .toss .table-stack.stack-production tbody td:nth-child(9),
  .toss .table-stack.stack-production tbody td:nth-child(10),
  .toss .table-stack.stack-inspection tbody td:nth-child(6),
  .toss .table-stack.stack-inspection tbody td:nth-child(7),
  .toss .table-stack.stack-inspection tbody td:nth-child(8),
  .toss .table-stack.stack-inspection tbody td:nth-child(10),
  .toss .table-stack.stack-factories tbody td:nth-child(4),
  .toss .table-stack.stack-factories tbody td:nth-child(5),
  .toss .table-stack.stack-factories tbody td:nth-child(6),
  .toss .table-stack.stack-factories tbody td:nth-child(7),
  .toss .table-stack.stack-operators tbody td:nth-child(4),
  .toss .table-stack.stack-operators tbody td:nth-child(5),
  .toss .table-stack.stack-operators tbody td:nth-child(7),
  .toss .table-stack.stack-customers tbody td:nth-child(4),
  .toss .table-stack.stack-customers tbody td:nth-child(5),
  .toss .table-stack.stack-customers tbody td:nth-child(6),
  .toss .table-stack.stack-customers tbody td:nth-child(3) { display: block; font-size: var(--t-small) !important; font-weight: 600 !important; color: var(--text-strong) !important; overflow: hidden; text-overflow: ellipsis; }
  .toss .table-stack.stack-orders tbody td:nth-child(6)::before,
  .toss .table-stack.stack-orders tbody td:nth-child(10)::before,
  .toss .table-stack.stack-orders tbody td:nth-child(28)::before,
  .toss .table-stack.stack-workorders tbody td:nth-child(5)::before,
  .toss .table-stack.stack-workorders tbody td:nth-child(6)::before,
  .toss .table-stack.stack-workorders tbody td:nth-child(9)::before,
  .toss .table-stack.stack-workorders tbody td:nth-child(10)::before,
  .toss .table-stack.stack-production tbody td:nth-child(6)::before,
  .toss .table-stack.stack-production tbody td:nth-child(8)::before,
  .toss .table-stack.stack-production tbody td:nth-child(9)::before,
  .toss .table-stack.stack-production tbody td:nth-child(10)::before,
  .toss .table-stack.stack-inspection tbody td:nth-child(6)::before,
  .toss .table-stack.stack-inspection tbody td:nth-child(7)::before,
  .toss .table-stack.stack-inspection tbody td:nth-child(8)::before,
  .toss .table-stack.stack-inspection tbody td:nth-child(10)::before,
  .toss .table-stack.stack-factories tbody td:nth-child(4)::before,
  .toss .table-stack.stack-factories tbody td:nth-child(5)::before,
  .toss .table-stack.stack-factories tbody td:nth-child(6)::before,
  .toss .table-stack.stack-factories tbody td:nth-child(7)::before,
  .toss .table-stack.stack-operators tbody td:nth-child(4)::before,
  .toss .table-stack.stack-operators tbody td:nth-child(5)::before,
  .toss .table-stack.stack-operators tbody td:nth-child(7)::before,
  .toss .table-stack.stack-customers tbody td:nth-child(4)::before,
  .toss .table-stack.stack-customers tbody td:nth-child(5)::before,
  .toss .table-stack.stack-customers tbody td:nth-child(6)::before,
  .toss .table-stack.stack-customers tbody td:nth-child(3)::before { display: block; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 400; color: var(--text-muted); }
  /* act: 버튼 줄. */
  .toss .table-stack.stack-workorders tbody td:nth-child(11),
  .toss .table-stack.stack-production tbody td:nth-child(12),
  .toss .table-stack.stack-inspection tbody td:nth-child(12),
  .toss .table-stack.stack-factories tbody td:nth-child(9) { display: flex; grid-area: act; justify-content: flex-end; gap: 6px; margin-top: 6px; }
  /* 값 칸 안의 링크 버튼은 글자처럼. */
  .toss .table-stack.stack-orders tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-orders tbody td:nth-child(10) .btn,
  .toss .table-stack.stack-orders tbody td:nth-child(28) .btn,
  .toss .table-stack.stack-workorders tbody td:nth-child(5) .btn,
  .toss .table-stack.stack-workorders tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-workorders tbody td:nth-child(9) .btn,
  .toss .table-stack.stack-workorders tbody td:nth-child(10) .btn,
  .toss .table-stack.stack-production tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-production tbody td:nth-child(8) .btn,
  .toss .table-stack.stack-production tbody td:nth-child(9) .btn,
  .toss .table-stack.stack-production tbody td:nth-child(10) .btn,
  .toss .table-stack.stack-inspection tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-inspection tbody td:nth-child(7) .btn,
  .toss .table-stack.stack-inspection tbody td:nth-child(8) .btn,
  .toss .table-stack.stack-inspection tbody td:nth-child(10) .btn,
  .toss .table-stack.stack-factories tbody td:nth-child(4) .btn,
  .toss .table-stack.stack-factories tbody td:nth-child(5) .btn,
  .toss .table-stack.stack-factories tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-factories tbody td:nth-child(7) .btn,
  .toss .table-stack.stack-operators tbody td:nth-child(4) .btn,
  .toss .table-stack.stack-operators tbody td:nth-child(5) .btn,
  .toss .table-stack.stack-operators tbody td:nth-child(7) .btn,
  .toss .table-stack.stack-customers tbody td:nth-child(4) .btn,
  .toss .table-stack.stack-customers tbody td:nth-child(5) .btn,
  .toss .table-stack.stack-customers tbody td:nth-child(6) .btn,
  .toss .table-stack.stack-customers tbody td:nth-child(3) .btn { height: auto; min-height: 0; padding: 0; font-size: inherit; justify-content: flex-start; text-align: left; }

  /* 2-4. 주문 목록 카드: 데스크톱 줄 링크(작업지시서, 공장, 샘플/메인 검수, 취소 / 환불)를 핵심 숫자 아래
     이름표 붙은 줄로 보여 준다. 링크·버튼은 44px 이상 [M 09-30].
     열 (admin-list.jsx AdminOrderRow): 12 작업지시서, 13 공장(샘플), 14 공장(메인), 26 샘플 검수, 27 메인 검수, 28 담당, 29 취소 / 환불. */
  .toss .table-stack.stack-orders tbody tr {
    grid-template-areas: "id id st" "title title title" "sub sub sub" "k1 k2 k2" "k3 k3 k3" "wo wo wo" "fs fs fs" "si si si" "fm fm fm" "mi mi mi" "cr cr cr";
  }
  .toss .table-stack.stack-orders tbody td:nth-child(12) { grid-area: wo; }
  .toss .table-stack.stack-orders tbody td:nth-child(13) { grid-area: fs; }
  .toss .table-stack.stack-orders tbody td:nth-child(26) { grid-area: si; }
  .toss .table-stack.stack-orders tbody td:nth-child(14) { grid-area: fm; }
  .toss .table-stack.stack-orders tbody td:nth-child(27) { grid-area: mi; }
  .toss .table-stack.stack-orders tbody td:nth-child(29) { grid-area: cr; }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(26), :nth-child(27), :nth-child(29)) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: var(--s-3); row-gap: 0;
    min-height: 44px; min-width: 0; overflow: visible; text-overflow: clip;
    border-top: 1px solid var(--border-subtle) !important;
    font-size: var(--t-small) !important; font-weight: 400 !important; color: var(--text-base) !important; text-align: right !important;
  }
  .toss .table-stack.stack-orders tbody td:nth-child(12) { margin-top: var(--s-2); }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(26), :nth-child(27), :nth-child(29))::before {
    display: block; margin-right: auto; font-family: var(--font-sans); font-size: var(--t-small); font-weight: 400; color: var(--text-muted); white-space: nowrap;
  }
  .toss .table-stack.stack-orders tbody td:nth-child(12)::before { content: "작업지시서"; }
  .toss .table-stack.stack-orders tbody td:nth-child(13)::before { content: "공장 (샘플)"; }
  .toss .table-stack.stack-orders tbody td:nth-child(14)::before { content: "공장 (메인)"; }
  .toss .table-stack.stack-orders tbody td:nth-child(26)::before { content: "샘플 검수"; }
  .toss .table-stack.stack-orders tbody td:nth-child(27)::before { content: "메인 검수"; }
  .toss .table-stack.stack-orders tbody td:nth-child(29)::before { content: "취소 / 환불"; }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(26), :nth-child(27)) .btn {
    display: inline-flex; align-items: center; justify-content: flex-end; height: auto; min-height: 44px; padding: 0; font-size: var(--t-small); font-weight: 600; text-align: right; overflow-wrap: anywhere;
  }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(13), :nth-child(14), :nth-child(26), :nth-child(27)) > div { display: flex; flex-direction: column; align-items: flex-end; gap: 0 !important; min-width: 0; margin-top: 0 !important; }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(26), :nth-child(27)) details { min-width: 0; }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(26), :nth-child(27)) summary { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
  .toss .table-stack.stack-orders tbody td:is(:nth-child(12), :nth-child(26), :nth-child(27)) details > div { justify-items: end; padding-top: 0 !important; gap: 0 !important; }
  /* 주문번호는 상세를 연다: 카드 머리 높이는 그대로 두고 누르는 높이만 44px. */
  .toss .table-stack.stack-orders tbody td:nth-child(1) .btn { min-height: 44px; margin-top: calc(var(--s-3) * -1); margin-bottom: calc(var(--s-3) * -1); }
  .toss .table-stack.stack-orders tbody td:nth-child(29) { gap: var(--s-2); }
  /* 취소/환불 메뉴 버튼은 32px로 보이고, 누르는 영역은 44px [M 10-01 round 1].
     예전 29열 ".btn { width: 44px; height: 44px; … }" [M 09-30]은 이 규칙보다 specificity가 높아 폭 44px로 보이게 했으므로 지웠다. */
  .toss .order-case-btn { position: relative; width: 32px; height: 32px !important; min-height: 32px !important; padding: 0 !important; justify-content: center; }
  .toss .order-case-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

  /* 2-5. 운영자 계정 카드: 행 선택 체크박스(일괄 비활성화)를 버튼 줄 자리에 [M 09-30]. */
  .toss .table-stack.stack-operators tbody td.col-check {
    display: flex; grid-area: act; align-items: stretch; width: auto; min-height: 44px; margin-top: var(--s-1);
    border-top: 1px solid var(--border-subtle) !important;
  }
  .toss .table-stack.stack-operators .col-check__hit {
    display: flex; flex: 1; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer;
    font-size: var(--t-small); color: var(--text-muted);
  }
  .toss .table-stack.stack-operators .col-check__hit::after { content: "선택 (일괄 비활성화)"; }
  .toss .table-stack.stack-operators .col-check__hit input { width: 20px; height: 20px; margin: 0; }
}


/* 2-9. 디자인 6차 (2026-10-02) [D 10-02].
   주문 목록 상태 탭 6개(입금 기한 경과 추가)는 3칸 두 줄. 카드에 단가와 선결제 금액 줄을 더하고, 상태 칩 아래 보조 배지는 오른쪽 정렬. */
@media (max-width: 640px) {
  .toss .admin-order-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toss .table-stack.stack-orders tbody tr {
    grid-template-areas: "id id st" "title title title" "sub sub sub" "k1 k2 k2" "k6 k7 k7" "k3 k3 k3" "wo wo wo" "fs fs fs" "si si si" "fm fm fm" "mi mi mi" "cr cr cr";
  }
  .toss .table-stack.stack-orders tbody td:nth-child(7) { display: block; grid-area: k6; font-size: var(--t-small) !important; font-weight: 600 !important; color: var(--text-strong) !important; }
  .toss .table-stack.stack-orders tbody td:nth-child(9) { display: block; grid-area: k7; font-size: var(--t-small) !important; font-weight: 600 !important; color: var(--text-strong) !important; }
  .toss .table-stack.stack-orders tbody td:nth-child(7)::before { content: "단가"; display: block; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 400; color: var(--text-muted); }
  .toss .table-stack.stack-orders tbody td:nth-child(9)::before { content: "선결제 금액"; display: block; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 400; color: var(--text-muted); }
  .toss .table-stack.stack-orders tbody td:nth-child(11) .admin-list-status-badges { justify-content: flex-end; }
  /* 관리자 상단 바: 공용 휴대폰에서도 누구로 로그인했는지 보이게 아바타 옆에 이름 한 줄(역할은 숨김) [감사 M-16]. */
  .toss .admin-me-name { display: block; min-width: 0; margin-right: var(--s-1); }
  .toss .admin-me-name > div:first-child { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-small); }
  .toss .admin-me-role { display: none; }
}

/* 2-10. 주문 목록 카드 맨 아래 "입금 안내" 줄 (admin-list.jsx 31열: 발송 시각, 보류, 실패, 발송 꺼짐) [quote-notice 10-02].
   기능만 넣었다(다른 이름표 줄과 같은 모양). 위치, 강조는 디자인 Agent 몫. */
@media (max-width: 640px) {
  .toss .table-stack.stack-orders tbody tr {
    grid-template-areas: "id id st" "title title title" "sub sub sub" "k1 k2 k2" "k6 k7 k7" "k3 k3 k3" "wo wo wo" "fs fs fs" "si si si" "fm fm fm" "mi mi mi" "cr cr cr" "pn pn pn";
  }
  .toss .table-stack.stack-orders tbody td:nth-child(31) {
    display: flex; grid-area: pn; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: var(--s-3);
    min-height: 44px; border-top: 1px solid var(--border-subtle) !important; font-size: var(--t-small) !important; text-align: right !important;
  }
  .toss .table-stack.stack-orders tbody td:nth-child(31)::before { content: "입금 안내"; margin-right: auto; font-size: var(--t-small); color: var(--text-muted); white-space: nowrap; }
}

@media (max-width: 640px) {
  /* 2-10. 상단 메뉴 5개(주문 목록, 공장 목록, 생산 위험, 계정 관리, 알림 설정)가 375px 한 줄에 들어가게 [7차]. 더 좁으면 가로 스크롤. */
  .toss .admin-nav { gap: 0; margin: 0 -4px; justify-content: space-between; scrollbar-width: none; }
  .toss .admin-nav::-webkit-scrollbar { display: none; }
  .toss .admin-nav-item { flex: 0 0 auto; padding: 7px 6px; font-size: var(--t-small); }
}

/* =============================================================================================
   3. 관리자 상세 (주문 상세, 상세 화면 공통 하단 버튼 바)
   ============================================================================================= */

/* 3-1. 상세 머리 메타 줄("맨투맨 / 150장 / ₩… / 접수 …") [M 09-30, 모든 폭].
   항목마다 앞에 "/"가 붙고, 줄을 구분자 폭만큼 왼쪽으로 당겨 잘라서 줄 첫머리의 "/"는 보이지 않는다. */
.admin-detail-meta { overflow: hidden; margin-top: 8px; font-size: var(--t-label); color: var(--text-muted); }
.admin-detail-meta-row { display: flex; flex-wrap: wrap; row-gap: 2px; margin-left: -24px; }
.admin-detail-meta-item { display: inline-flex; white-space: nowrap; }
.admin-detail-meta-sep { flex: none; width: 24px; text-align: center; }

/* 3-2. 주문 상세 요약: 상태 조정은 요약 아래 한 열 [T 09-15]. */
@media (max-width: 640px) {
  .admin-detail-summary { flex-direction: column; }
  .admin-detail-summary-badges { flex-wrap: wrap; }
  .admin-detail-header-controls { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .admin-detail-lifecycle-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

/* 3-3. 하단 버튼 바(지금 단계 버튼, 생산·작업지시서 상세) [T 09-28]. */
.toss .mobile-action-bar { display: none; }
@media (max-width: 640px) {
  .toss .mobile-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: 1px solid var(--border-base); }
  .toss .mobile-action-bar__note { font-size: var(--t-small); color: var(--text-muted); }
  .toss .mobile-action-bar__note.is-danger { color: var(--danger-text); font-weight: 600; }
  .toss .mobile-action-bar__row { display: flex; gap: 8px; }
  .toss .mobile-action-bar__row .btn { height: 48px; }
  .toss .mobile-action-bar__row .btn-primary { flex: 1; }
  .toss:has(.mobile-action-bar) { padding-bottom: 120px; }
  /* 디자인 6차 [D 10-02]: 성공 결과는 초록 글자, "PC에서 수정해 주세요" 목록은 최대 세 줄 높이에서 바 안 스크롤.
     안내 줄이 있는 바는 더 높으므로 페이지 아래 여백도 키운다(감사 M-22: 마지막 내용이 바에 가리지 않게). */
  .toss .mobile-action-bar__note.is-success { color: var(--success-text); font-weight: 600; }
  .toss .mobile-action-bar__list { margin: var(--s-1) 0 0; padding-left: 18px; max-height: 66px; overflow-y: auto; font-weight: 400; overscroll-behavior: contain; }
  .toss:has(.mobile-action-bar .mobile-action-bar__note) { padding-bottom: 168px; }
  .toss:has(.mobile-action-bar .mobile-action-bar__list) { padding-bottom: 236px; }
}


/* 3-4. 디자인 6차 (2026-10-02) [D 10-02].
   요구사항 검수의 두 상자(상담 원문, 정리된 주문 항목)는 휴대폰에서 상자 안 스크롤을 없애고 페이지 스크롤 하나로 본다.
   주문 상세 머리의 보조 배지는 줄바꿈 간격 4px. */
@media (max-width: 640px) {
  .toss .requirement-box { min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  .toss .requirement-box--transcript { max-height: 360px !important; overflow: auto !important; }
  .toss .status-badges { column-gap: var(--s-3); }
  /* 고객 확인 상태 버튼 4개는 같은 폭 네 칸(버튼 패딩 16px 적용 뒤 카드 밖으로 밀리던 문제). */
  .toss .customer-confirm-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .toss .customer-confirm-actions .btn { padding-left: 0 !important; padding-right: 0 !important; min-width: 0; }
  /* 진행 일자의 "아직 진행되지 않은 단계" 펼치기 줄 44px. */
  .toss .progress-dates__pending > summary { min-height: 44px; }
}

/* 3-5. 디자인 6차 (2026-10-02) [D 10-02]: 알림 설정은 휴대폰에서 계좌 칸 한 줄씩, 저장 버튼 전체 폭, 발송 기록은 건마다 카드 (기본 모양은 admin-ui.css). */
@media (max-width: 640px) {
  .toss .bank-fields { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .toss .notification-save .btn { width: 100%; }
  .toss .send-log { gap: var(--s-2); border: 0; border-radius: 0; overflow: visible; }
  .toss .send-log__row { grid-template-columns: minmax(0, 1fr); gap: 2px; border: 1px solid var(--border-base) !important; border-radius: var(--r-md); }
}

@media (max-width: 640px) {
  /* 3-6. 입금 안내 발송 기록 펼치기 44px [7차]. */
  .toss [data-testid="payment-notice-history"] > summary { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 640px) {
  /* 3-7. 견적 금액 보정 폼 [7차]: 한 열, 입력칸 44px와 16px, 버튼 두 칸. */
  .toss [data-testid="estimate-correction-form"] > label:nth-of-type(1),
  .toss [data-testid="estimate-correction-form"] > label:nth-of-type(2) { grid-column: 1 / -1; }
  .toss [data-testid="estimate-correction-form"] .input { height: 44px; font-size: 16px; }
  .toss [data-testid="estimate-correction-form"] .textarea { font-size: 16px; }
  .toss [data-testid="estimate-correction-form"] label:has(> input[type="checkbox"]) { min-height: 44px; }
  .toss [data-testid="estimate-correction-form"] input[type="checkbox"] { width: 20px; height: 20px; }
  .toss [data-testid="estimate-correction-form"] > div:last-child .btn { flex: 1; min-height: 44px; }
  /* 3-8. 패턴 편집 파일 [7차]: 버전 줄은 이름 아래에 버튼 줄. */
  .toss .pattern-version { flex-wrap: wrap; }

  .toss .pattern-version__actions { flex: 1 0 100%; justify-content: flex-start; }
  .toss .pattern-version__actions .btn { flex: 1 1 auto; min-height: 44px; }
  .toss [data-pattern-edit-exports] .btn, .toss [data-pattern-edit-upload] .btn { flex: 1 1 auto; min-height: 44px; }
  .toss [data-pattern-edit-upload] .input { height: 44px; font-size: 16px; }
}

/* =============================================================================================
   4. 작업지시서 (휴대폰은 확인 전용: 접힌 섹션, 도면 전체 화면)
   ============================================================================================= */
@media (max-width: 640px) {
  .toss .wo-edit-fieldset:disabled { opacity: 1; }
  .toss .wo-phone-notice { gap: 8px; margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--border-base); border-radius: var(--r-md); background: var(--bg-muted); color: var(--text-base); font-size: var(--t-small); line-height: 1.5; }
  /* 경로 표시 줄바꿈 [M 09-30]. */
  .toss .wo-breadcrumb { flex-wrap: wrap; column-gap: var(--s-2) !important; row-gap: 0; font-size: var(--t-small) !important; }
  .toss .wo-breadcrumb > * { white-space: nowrap; }
}
/* 섹션 요약 줄과 도면 전체 화면 [T 09-28]. .wo-drawing-full은 0-3 모달 시트(아래 정렬)를 덮어 위에서부터 채운다. */
.toss .wo-phone-section { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-md); overflow: hidden; }
.toss .wo-phone-section__row { width: 100%; min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; color: var(--text-strong); font-size: var(--t-body); font-weight: 600; text-align: left; cursor: pointer; }
.toss .wo-phone-section__sum { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.toss .wo-phone-section__sum.is-danger { color: var(--danger-text); font-weight: 600; }
.toss .wo-phone-section.is-open .wo-phone-section__sum svg { transform: rotate(180deg); }
.toss .wo-phone-section .wo-edit-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; border-top: 1px solid var(--border-subtle); }
.toss .wo-phone-section .wo-edit-fieldset > .card-flat { border: 0; border-radius: 0; box-shadow: none; }
.toss .wo-drawing-full-trigger { margin: 10px auto 0; text-decoration: none; }
.toss .wo-drawing-full { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; background: var(--bg-card); }
.toss .wo-drawing-full__bar { height: 52px; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-base); }
.toss .wo-drawing-full__bar .btn { height: 44px; text-decoration: none; }
.toss .wo-drawing-full__canvas { flex: 1; overflow: auto; padding: 12px; background: var(--bg-muted); }
.toss .wo-drawing-full__canvas img { width: 100%; height: auto; }
.toss .wo-drawing-full__list { margin: 0; padding: 12px 16px 16px 36px; font-size: var(--t-small); line-height: 1.7; max-height: 30vh; overflow: auto; border-top: 1px solid var(--border-base); }


/* 4-9. 디자인 6차 (2026-10-02) [D 10-02].
   휴대폰은 확인 전용이라 편집 버튼(+ 콜아웃 추가)은 숨긴다(감사 M-21). 상단 안내는 작은 글자. */
@media (max-width: 640px) {
  .toss .wo-edit-only { display: none !important; }
  .toss .wo-phone-notice { font-size: var(--t-small); line-height: 1.5; }
}

/* =============================================================================================
   5. 생산·검수 (생산관리 상세, 검수관리 상세, 공장 배정)
   ============================================================================================= */
@media (max-width: 640px) {
  /* 5-1. 상세 머리: 배지와 메타가 읽히게 줄바꿈하고, 상태 조정은 아래 줄 [C 09-16]. */
  .toss .detail-breadcrumb,
  .toss .detail-runtime-header-badges,
  .toss .detail-runtime-header-meta,
  .toss .factory-assignment-row__summary { flex-wrap: wrap; }
  .toss .detail-breadcrumb > *,
  .toss .detail-runtime-header-badges > *,
  .toss .detail-runtime-header-meta > *,
  .toss .factory-assignment-row__summary > * { flex-shrink: 0; white-space: nowrap; }
  .toss .detail-runtime-header-layout { flex-direction: column; align-items: stretch !important; }
  .toss .detail-runtime-header-main,
  .toss .detail-runtime-header-controls { width: 100%; min-width: 0; }
  .toss .detail-runtime-header h1 { overflow-wrap: anywhere; }
  .toss .detail-runtime-header-controls { display: flex; flex-wrap: wrap; align-items: flex-end !important; }
  .toss .detail-runtime-header-controls > * { flex: 1 1 140px; min-width: 0; }
  .toss .detail-runtime-header-controls select { width: 100%; }
  .toss .production-detail-screen .detail-runtime-header-controls { display: block; }

  /* 5-2. 공장 배정 줄 [C 09-16]. */
  .toss .factory-assignment-row { align-items: flex-start !important; flex-wrap: wrap; }
  .toss .factory-assignment-row__icon { flex: 0 0 36px; }
  .toss .factory-assignment-row__body { flex: 1 1 calc(100% - 48px) !important; min-width: 0; }
  .toss .factory-assignment-row__meta { overflow-wrap: anywhere; }
  .toss .factory-assignment-row__actions { width: 100%; padding-left: 48px; flex-wrap: wrap; }

  /* 5-3. 검수 체크리스트 카드 머리 [C 09-16]. */
  .toss .inspection-checklist-card .card-head .ttl { min-width: 0; flex: 1 1 100%; flex-wrap: wrap; }
  .toss .inspection-checklist-card .card-head .ttl h3 { min-width: 0; flex: 1 1 180px; }
  .toss .inspection-checklist-card .card-head .chip { flex-shrink: 0; white-space: nowrap; }

  /* 5-4. 공장 후보 카드: 숫자 4칸 [T 09-28]. */
  .toss .factory-candidate__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .toss .factory-candidate__metrics > div { flex-direction: column; gap: 2px; }
  .toss .factory-candidate__metrics dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* 5-9. 디자인 6차 (2026-10-02) [D 10-02].
   생산 상세: 결과 문구는 하단 버튼 바에만(상단 같은 문구 숨김), 공정 단계 버튼은 3칸 줄바꿈(가로 스크롤 없음) 44px,
   후보 "접기" 링크 44px, 일정 변경 이력 카드 줄 정리. */
@media (max-width: 640px) {
  .toss .detail-top-result { display: none; }
  .toss .stage-stepper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1) !important; overflow: visible !important; }
  .toss .stage-stepper > :not(.stage-stepper__btn) { display: none; }
  .toss .stage-stepper__btn { min-height: 44px; justify-content: center; padding: var(--s-1) !important; white-space: nowrap; }
  .toss .candidate-toggle { position: relative; }
  .toss .candidate-toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .toss .schedule-change-card__values { flex-direction: column; align-items: flex-start; }
  .toss .schedule-change-card__arrow { display: none; }
  /* 검수 상세: 카드의 분류 칩은 36px로 보이고 누르는 영역은 44px, 체크 항목 줄은 44px [감사 P2]. */
  .toss .ins-category-chip { position: relative; min-height: 36px; }
  .toss .ins-category-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .toss .inspection-detail-screen label:has(> input[type="checkbox"]):not(.ins-category-chip),
  .toss .production-detail-screen label:has(> input[type="checkbox"]) { min-height: 44px; }
  .toss .inspection-detail-screen article .input { min-height: 44px; }
  .toss .production-detail-screen input[type="range"] { height: 44px; }
  /* 공장 목록 카드의 조회/수정 버튼 44px, 선택한 카드는 파란 테두리로 패널과 짝 [감사 M-05, C2]. */
  .toss .table-stack.stack-factories tbody td .btn { min-width: 44px; }
  .toss .table-stack.stack-factories tbody tr.is-selected { box-shadow: inset 0 0 0 1px var(--brand-500); }
}

/* =============================================================================================
   6. 계정 (계정 관리 목록, 운영자/고객 상세, 비밀번호 변경)
   계정 화면 자체의 휴대폰 배치(상세 머리, 필터 줄)는 account-management.css에 있다.
   ============================================================================================= */
@media (max-width: 640px) {
  /* 계정 목록 필터: 검색칸과 필터 버튼만 남기고 나머지는 필터 시트로 [T 09-28]. 검색칸 폭 [M 09-30]. */
  .toss .account-list-filter-panel .filter-bar > :not(.filter-search):not(.filter-actions):not(.mobile-filter) { display: none; }
  .toss .account-list-filter-panel .filter-bar .filter-actions .btn-outline { display: none; }
  .toss .account-list-filter-panel .filter-bar .filter-search { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
}


@media (max-width: 640px) {
  /* 6-9. 계정 폼 [7차]: 이름표를 값 위로 올려 입력칸이 잘리지 않게, 선택지 44px. */
  .toss .form-table .form-row { grid-template-columns: minmax(0, 1fr); }
  .toss .form-table .form-label { padding: 10px 12px 0; background: none; }
  .toss .form-table .form-value { padding: 6px 12px 12px; }
  .toss .form-table .form-value .input, .toss .form-table .form-value select.input { width: 100%; height: 44px; font-size: 16px; }
  .toss .choice-row { gap: 0 20px; }
  .toss .choice { min-height: 44px; }
  .toss .choice input { width: 20px; height: 20px; }
  .toss .form-foot { flex-wrap: wrap; }
  /* 6-10. 운영자 목록 카드 [7차]: 전체 선택 줄, 초대일, 이메일 줄바꿈. */
  .toss .account-select-all { align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--t-small); color: var(--text-muted); cursor: pointer; }
  .toss .account-select-all input { width: 20px; height: 20px; margin: 0; }
  .toss .table-stack.stack-operators tbody td:nth-child(8) { display: block; grid-area: k4; font-size: var(--t-small) !important; font-weight: 600 !important; color: var(--text-strong) !important; }
  .toss .table-stack.stack-operators tbody td:nth-child(8)::before { content: "초대일"; display: block; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 400; color: var(--text-muted); }
  .toss .account-email-cell { max-width: none; white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; }
  .toss .selection-bar { flex-wrap: wrap; }
  .toss .selection-bar .account-action-reason { flex: 1 0 100%; }
  /* 6-11. 고객 계정 상세의 주문 표를 주문마다 카드로 [7차]. */
  .toss .account-orders-table { display: block; }
  .toss .account-orders-table thead { display: none; }
  .toss .account-orders-table tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .toss .account-orders-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3); border: 1px solid var(--border-base); border-radius: var(--r-md); }
  .toss .account-orders-table td { display: block; padding: 0 !important; border: 0 !important; font-size: var(--t-small); text-align: left !important; overflow-wrap: anywhere; }
  .toss .account-orders-table td:nth-child(1) { grid-column: 1; }
  .toss .account-orders-table td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; }
  .toss .account-orders-table td:nth-child(2) { grid-column: 1 / -1; font-weight: 600; color: var(--text-strong); }
  .toss .account-orders-table td:nth-child(3)::before { content: "수량 "; color: var(--text-muted); font-family: var(--font-sans); }
  .toss .account-orders-table td:nth-child(5) { justify-self: end; }
  .toss .account-orders-table td:nth-child(5)::before { content: "주문일 "; color: var(--text-muted); font-family: var(--font-sans); }
}

/* =============================================================================================
   7. 다이얼로그 (모달 시트는 0-3, 도면 전체 화면은 4)
   ============================================================================================= */

/* 7-1. 필터 시트(MobileFilterSheet) [T 09-28]. */
.toss .mobile-filter__trigger { height: 44px; gap: 6px; }
.toss .mobile-filter__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--brand-500); color: #fff; font-size: var(--t-micro); font-weight: 700; display: inline-grid; place-items: center; }
.toss .mobile-filter__body { display: flex; flex-direction: column; gap: 16px; }
.toss .mobile-filter__field { display: flex; flex-direction: column; gap: 6px; }
.toss .mobile-filter__field > span { font-size: var(--t-small); font-weight: 600; color: var(--text-muted); }
.toss .mobile-filter__field > :not(span) { width: 100%; }
.toss .mobile-filter__field .input, .toss .mobile-filter__field select { width: 100% !important; height: 44px; }
.toss .mobile-filter__dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.toss .mobile-filter__sheet .modal-foot .btn { height: 48px; }
.toss .mobile-filter__sheet .modal-foot .btn-primary { flex: 1; }

/* 7-2. 전체 패턴에서 찾기(디자인 시안 "전체 패턴에서 찾기") [M 09-30, 기본값은 모든 폭]. */
.toss .catalog-search__close { min-height: 44px; min-width: 44px; flex-shrink: 0; }
.toss .catalog-search__field { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); border: 1px solid var(--border-base); border-radius: var(--r-md); background: var(--bg-card); }
.toss .catalog-search__field:focus-within { border-color: var(--border-focus); }
.toss .catalog-search__field input { flex: 1; min-width: 0; height: 48px; border: none; outline: none; background: transparent; color: var(--text-strong); font-size: var(--t-body); }
.toss .catalog-search__filters { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.toss .catalog-search__label { font-size: var(--t-small); font-weight: 700; color: var(--text-muted); }
.toss .catalog-search__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.toss .catalog-search__chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; max-width: 100%; padding: 0 var(--s-3); border: 1px solid var(--border-base); border-radius: var(--r-full); background: var(--bg-card); color: var(--text-base); font-size: var(--t-label); font-weight: 600; overflow-wrap: anywhere; text-align: left; cursor: pointer; }
.toss .catalog-search__chip[aria-pressed="true"] { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-800); }
.toss .catalog-search__chip.is-link { border-style: dashed; color: var(--text-muted); }
.toss .catalog-search__count { font-size: var(--t-micro); font-weight: 600; color: var(--text-weak); }
.toss .catalog-search__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--s-3); }
.toss .catalog-search__card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; min-height: 44px; padding: var(--s-3); border: 2px solid var(--border-base); border-radius: var(--r-md); background: var(--bg-card); text-align: left; cursor: pointer; }
.toss .catalog-search__card[aria-pressed="true"] { border-color: var(--brand-500); background: var(--brand-50); }
.toss .catalog-search__thumb { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--border-base); border-radius: var(--r-sm); background: var(--bg-card); }
.toss .catalog-search__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.toss .catalog-search__name { font-size: var(--t-label); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.toss .catalog-search__meta { min-height: 1em; font-size: var(--t-micro); color: var(--text-muted); overflow-wrap: anywhere; }
.toss .catalog-search__pick { font-size: var(--t-small); font-weight: 700; color: var(--brand-600); }
.toss .catalog-search__more { width: 100%; min-height: 48px; }
.toss .catalog-search__state { padding: var(--s-6) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-muted); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .toss .modal.catalog-search { padding: var(--s-4); overscroll-behavior: contain; }
  .toss .catalog-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .toss .catalog-search__card { padding: var(--s-2); }
  /* 필터 칩은 36px로 낮추고, 누르는 영역은 44px [M 10-01 round 1]. */
  .toss .catalog-search__chip { position: relative; min-height: 36px; }
  .toss .catalog-search__chip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* 7-3. 취소 / 환불 창의 처리 이력 표는 휴대폰에서 건마다 카드 [D 10-02, 감사 M-07].
   열: 1 구분, 2 사유, 3 접수 날짜, 4 처리 날짜, 5 처리 상태. */
@media (max-width: 640px) {
  .toss .case-history { overflow: visible !important; }
  .toss .case-history__table { display: block; min-width: 0 !important; }
  .toss .case-history__table thead { display: none; }
  .toss .case-history__table tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .toss .case-history__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-1) var(--s-3); padding: var(--s-3); border: 1px solid var(--border-base); border-radius: var(--r-md); }
  .toss .case-history__table td { display: block; padding: 0 !important; border: 0 !important; font-size: var(--t-small); overflow-wrap: anywhere; }
  .toss .case-history__table td[colspan] { grid-column: 1 / -1; text-align: center; }
  .toss .case-history__table td:nth-child(2) { grid-column: 1 / -1; }
  .toss .case-history__table td:not([colspan])::before { display: block; font-size: var(--t-micro); color: var(--text-muted); }
  .toss .case-history__table td:nth-child(1):not([colspan])::before { content: "구분"; }
  .toss .case-history__table td:nth-child(2)::before { content: "사유"; }
  .toss .case-history__table td:nth-child(3)::before { content: "접수 날짜"; }
  .toss .case-history__table td:nth-child(4)::before { content: "처리 날짜"; }
  .toss .case-history__table td:nth-child(5)::before { content: "처리 상태"; }
}