:root {
  --gsb-navy: #0a1f44;
  --gsb-navy-dark: #061530;
  --gsb-navy-light: #1c3a6e;
  --gsb-white: #ffffff;
  --gsb-gray: #6b7280;
  --gsb-gray-light: #e5e7eb;
  --gsb-bg: #f4f6fa;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  background-color: var(--gsb-bg);
  color: var(--gsb-navy);
  -webkit-font-smoothing: antialiased;
}

/* 로그인 화면 */
.login-body {
  background: linear-gradient(180deg, var(--gsb-navy) 0%, var(--gsb-navy-dark) 100%);
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--gsb-white);
  border-radius: 16px;
  padding: 40px 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 14px;
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.login-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--gsb-navy);
}

.login-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--gsb-gray);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-navy);
}

.form-field input,
.form-field select {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  font-size: 15px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
}

.form-field input[readonly] {
  background-color: var(--gsb-gray-light);
  color: var(--gsb-gray);
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--gsb-navy-light);
  box-shadow: 0 0 0 3px rgba(28, 58, 110, 0.15);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gsb-gray);
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--gsb-navy);
}

.btn-login {
  height: 50px;
  margin-top: 4px;
  border: none;
  border-radius: 10px;
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-login:active {
  background-color: var(--gsb-navy-dark);
}

.login-footer {
  margin: 28px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--gsb-gray);
}

/* 모바일 화면 대응 */
@media (max-width: 480px) {
  .login-wrap {
    padding: 16px;
  }

  .login-card {
    padding: 32px 20px;
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  .login-title {
    font-size: 18px;
  }

  .form-field input {
    height: 44px;
  }

  .btn-login {
    height: 46px;
  }
}

/* 모바일 발주 메뉴 화면 (order.html) */
.order-body {
  background: linear-gradient(180deg, var(--gsb-navy) 0%, var(--gsb-navy-dark) 100%);
}

.order-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
}

.order-header {
  width: 100%;
  max-width: 420px;
  text-align: center;
  margin-bottom: 28px;
}

.order-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 14px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.order-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--gsb-white);
}

.order-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.order-menu {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 70px;
  padding: 0 24px;
  border: none;
  border-radius: 14px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.order-btn-icon {
  font-size: 28px;
  line-height: 1;
}

.order-btn:hover {
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.order-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .order-wrap {
    padding: 24px 16px;
  }

  .order-btn {
    padding: 0 18px;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .order-title {
    font-size: 20px;
  }

  .order-btn-icon {
    font-size: 24px;
  }
}

/* 신규 발주 입력 화면 (order_form.html) */
.order-form-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--gsb-white);
  border-radius: 16px;
  padding: 28px 22px;
  margin-bottom: 32px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order-form .form-row {
  display: flex;
  gap: 12px;
}

.order-form .form-row .form-field {
  flex: 1;
  min-width: 0;
}

.order-form input,
.order-form select,
.order-form textarea {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
}

.order-form textarea {
  resize: vertical;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus {
  outline: none;
  border-color: var(--gsb-navy-light);
  box-shadow: 0 0 0 3px rgba(28, 58, 110, 0.15);
}

.required-mark {
  color: #d1453b;
}

.field-error {
  border-color: #d1453b !important;
  box-shadow: 0 0 0 3px rgba(209, 69, 59, 0.15) !important;
}

.file-field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.file-btn:hover {
  background-color: var(--gsb-navy-dark);
}

.file-name {
  font-size: 13px;
  color: var(--gsb-gray);
  word-break: break-all;
}

.order-form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  min-height: 52px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
}

.btn-primary:hover {
  background-color: var(--gsb-navy-dark);
}

.btn-secondary {
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  border: 1px solid var(--gsb-navy-light) !important;
}

.btn-secondary:hover {
  background-color: var(--gsb-bg);
}

.btn-ghost {
  background-color: transparent;
  color: var(--gsb-navy);
  border: 1px solid var(--gsb-gray-light) !important;
}

.btn-ghost:hover {
  background-color: var(--gsb-bg);
}

/* GSB-MO-011: 반려(거부) 액션 전용 버튼. 새 색상 변수 없이 기존 badge-erp-failed의
   빨간 톤을 그대로 재사용한다. */
.btn-danger {
  background-color: #fdecea;
  color: #b3261e;
  border: 1px solid #b3261e !important;
}

.btn-danger:hover {
  background-color: #fbdedb;
}

@media (max-width: 480px) {
  .order-form-card {
    padding: 22px 16px;
  }
}

@media (max-width: 360px) {
  .order-form .form-row {
    flex-direction: column;
  }
}

/* 신규 발주 저장 결과 안내 배너 */
.alert {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.alert p {
  margin: 0;
}

.alert-success {
  background-color: #e6f4ea;
  color: #1e7a34;
  border: 1px solid #b7e1c2;
}

.alert-success strong {
  color: #145c26;
}

.alert-error {
  background-color: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2c0;
}

/* 제품 형태 선택 카드 */
.product-type-group {
  display: flex;
  gap: 10px;
}

.product-type-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 8px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.product-type-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.product-type-card.is-selected {
  background-color: var(--gsb-navy);
  border-color: var(--gsb-navy);
  color: var(--gsb-white);
}

.dimension-hint {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-navy-light);
}

.field-hint {
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--gsb-gray);
}

.field-error-message {
  font-size: 12px;
  color: #d1453b;
  margin-top: -2px;
}

.field-error-message:empty {
  display: none;
}

/* [GSB-MO-027] ERP 길이 초과 안내. 오류(빨강)와 색을 달리한다 — 저장은 정상적으로 되고
   ERP 전송만 막히는 상태라, 같은 빨강으로 두면 입력이 거부된 것으로 오해한다. */
.field-limit-warning {
  font-size: 12px;
  color: #b45309;
  margin-top: -2px;
}

.field-limit-warning:empty {
  display: none;
}

@media (max-width: 360px) {
  .product-type-group {
    gap: 8px;
  }

  .product-type-card {
    font-size: 14px;
    min-height: 48px;
  }
}

/* [GSB-MO-017] 새 주문 마법사 전용 제품 형태 카드: 도형 아이콘 + 입력할 치수 안내.
   기존 다품목 화면(static/js/app.js)이 쓰던 기본 .product-type-card 스타일은 그대로
   두고, 마법사 전용 클래스 안에서만 세로 배치로 확장한다. */
.product-type-group-wizard .product-type-card {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 12px 6px;
}

.product-type-group-wizard .product-type-icon {
  width: 30px;
  height: 30px;
  color: inherit;
}

.product-type-group-wizard .product-type-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.product-type-group-wizard .product-type-hint {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gsb-gray);
  word-break: keep-all;
}

.product-type-group-wizard .product-type-card.is-selected .product-type-hint {
  color: var(--gsb-white);
  opacity: 0.85;
}

/* [GSB-MO-017] 치수 미리보기 + 중량(참고값) 요약 박스 */
.dimension-summary {
  display: block;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  background-color: var(--gsb-bg);
}

/* hidden 속성으로 여닫는 요소에 display를 직접 지정할 때는 이 규칙을 반드시 함께 둔다
   (클래스 선택자가 브라우저 기본 [hidden] 스타일을 이겨 버리는 문제 — GSB-MO-016 참고). */
.dimension-summary[hidden],
.dimension-summary-row[hidden] {
  display: none;
}

.dimension-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}

.dimension-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-gray);
  flex-shrink: 0;
}

.dimension-summary-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
  text-align: right;
  word-break: break-word;
}

.dimension-summary-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--gsb-gray);
}

/* [GSB-MO-018] 입력 오류가 남아 있을 때 다음 단계 버튼을 잠그고 사유를 안내한다.
   .step-gate-note는 hidden 속성으로 여닫으므로 [hidden] 규칙을 함께 둔다(CLAUDE.md 부록 B). */
.step-gate-note {
  margin: 4px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  color: #d1453b;
  text-align: center;
}

.step-gate-note[hidden] {
  display: none;
}

.btn-primary:disabled {
  background: var(--gsb-gray-light);
  color: var(--gsb-gray);
  box-shadow: none;
  cursor: not-allowed;
}

/* [GSB-MO-019] 백엔드 검증 결과(정상/주의/오류). hidden 속성으로 여닫으므로 [hidden]
   규칙을 함께 둔다(CLAUDE.md 부록 B). 등급별 색은 기존 alert 계열 색과 맞췄다. */
.validation-result {
  margin: 4px 0 -4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
}

.validation-result[hidden] {
  display: none;
}

.validation-result-message {
  margin: 0;
  font-weight: 700;
}

.validation-result-list {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.5;
}

.validation-result-list:empty {
  display: none;
}

.validation-result.is-ok {
  background: #eaf6ec;
  border-color: #b7dfc0;
  color: #23703a;
}

.validation-result.is-warning {
  background: #fdf4e3;
  border-color: #f0d9a8;
  color: #8a5a10;
}

.validation-result.is-error {
  background: #fdecea;
  border-color: #f5c2bd;
  color: #b3271d;
}

.validation-result.is-pending {
  background: var(--gsb-gray-light);
  border-color: var(--gsb-gray-light);
  color: var(--gsb-navy-light);
}

/* 다품목 발주 (order_form.html) */
.section-title {
  margin: 4px 0 -6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gsb-gray-light);
}

.items-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.item-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 14px;
  background-color: var(--gsb-bg);
}

.item-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsb-navy);
}

.item-line-no {
  color: var(--gsb-navy);
  font-size: 14px;
  font-weight: 700;
}

/* [GSB-MO-041] STEP3 확인 — 품목 목록 요약 */
.confirm-subtitle {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
}

.confirm-item-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-item-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gsb-navy);
}

.item-remove-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #f5c2c0;
  border-radius: 8px;
  background-color: var(--gsb-white);
  color: #b3261e;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.item-remove-btn:hover {
  background-color: #fdecea;
}

.item-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-add-item {
  min-height: 50px;
  border: 1px dashed var(--gsb-navy-light);
  border-radius: 10px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.btn-add-item:hover {
  background-color: var(--gsb-bg);
}

.item-summary-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.item-summary-list li {
  font-size: 13px;
  line-height: 1.6;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

/* 주문조회 / 주문 상세 화면 (order_list.html, order_detail.html) */
.list-card {
  width: 100%;
  max-width: 480px;
  background-color: var(--gsb-white);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gsb-gray-light);
}

.search-form input,
.search-form select {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
}

.search-form .form-row {
  display: flex;
  gap: 12px;
}

.search-form .form-row .form-field {
  flex: 1;
  min-width: 0;
}

.result-count {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--gsb-gray);
}

/* [GSB-MO-039] "준비 중" 안내 — 공지사항·고객센터 등 미구현 메뉴 클릭 시. */
.order-coming-soon-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--gsb-navy);
  background: #eef1f6;
  border-radius: 8px;
}

/* [GSB-MO-039] 재주문 모드 안내 문구. */
.reorder-guide {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gsb-navy);
  background: #eef1f6;
  border-radius: 8px;
}

.order-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.order-summary-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 14px;
  background-color: var(--gsb-bg);
}

.order-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.order-no {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.order-customer {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gsb-navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.order-summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gsb-gray);
}

.order-detail-btn {
  margin-top: 6px;
}

/* 상태 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-status-new {
  background-color: #e6f0ff;
  color: #1a56c4;
}

/* [GSB-MO-029] 새 업무 상태 흐름(SUBMITTED→REVIEWING→APPROVED→ERP_SENT→ERP_IMPORTED).
   기존 NEW/REVIEW_REQUIRED 색을 재사용해 담당자가 익숙한 색감을 유지한다. */
.badge-status-submitted {
  background-color: #e6f0ff;
  color: #1a56c4;
}

.badge-status-reviewing {
  background-color: #f1e8ff;
  color: #6b30c9;
}

.badge-status-erp-imported {
  background-color: #e2f6ea;
  color: #17703c;
}

/* [GSB-MO-031] 상태 변경 이력 타임라인. 기존 `.detail-info-list`는 "항목: 값" 두 칸 구조라
   "시각 / 주체 / 전이 / 사유" 네 줄을 담지 못해 전용 목록을 뒀다. 색·여백은 기존 카드
   컴포넌트 값을 그대로 쓴다(새 색상 변수 없음). */
.status-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-history-item {
  padding: 12px 0;
  border-bottom: 1px solid #eef1f5;
}

.status-history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.status-history-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: #4a5568;
}

.status-history-time {
  font-weight: 700;
}

.status-history-transition {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.status-history-arrow {
  color: #8a94a6;
  font-size: 12px;
}

.status-history-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #4a5568;
  word-break: break-word;
}

/* 보완 사유는 고객이 실제로 조치해야 하는 지시문이라 일반 메모와 구분한다. */
.status-history-note-supplement {
  color: #b5680a;
  font-weight: 700;
}

/* [GSB-MO-034] 담당자 수정 — 검토 중(보라)과 승인 완료(초록) 사이의 단계라 검토 계열
   보라 톤을 조금 진하게 쓴다(새 색상 변수는 만들지 않는다). */
.badge-status-staff-edited {
  background-color: #e8ddfa;
  color: #5a23b0;
}

/* [GSB-MO-030] 재제출은 "다시 봐야 하는 것"이라 검토 대기(파랑)가 아니라 주의를 끄는
   주황 톤(badge-status-review-required)을 재사용한다. 주문 완료는 흐름의 종점이라
   ERP 등록 완료보다 한 단계 진한 초록을 쓴다(새 변수는 만들지 않는다). */
.badge-status-resubmitted {
  background-color: #fff4e0;
  color: #b5680a;
}

.badge-status-order-completed {
  background-color: #d3efdd;
  color: #115c30;
}

/* [GSB-MO-029] 검토 우선순위 배지 — 반드시 볼 것을 눈에 띄게 한다. */
.badge-priority-must-review {
  background-color: #fde8e6;
  color: #b3261e;
}

.badge-priority-normal {
  background-color: #eef1f5;
  color: #4a5568;
}

.badge-priority-auto-candidate {
  background-color: #e2f6ea;
  color: #17703c;
}

.badge-status-review-required {
  background-color: #fff4e0;
  color: #b5680a;
}

.badge-status-review {
  background-color: #f1e8ff;
  color: #6a2ec7;
}

.badge-status-approved {
  background-color: #e6f4ea;
  color: #1e7a34;
}

/* GSB-MO-011: 기존 badge-status-review와 같은 보라 톤(별도 검토 관련 상태)을 재사용 */
.badge-status-supplement-requested {
  background-color: #f1e8ff;
  color: #6a2ec7;
}

/* GSB-MO-011: 기존 badge-erp-failed와 같은 빨간 톤(부정적 처리 결과)을 재사용 */
.badge-status-rejected {
  background-color: #fdecea;
  color: #b3261e;
}

.badge-status-erp-sent {
  background-color: #dff7f1;
  color: #0f8a6c;
}

.badge-status-cancelled {
  background-color: #f1f2f4;
  color: #6b7280;
}

.badge-status-unknown {
  background-color: #f1f2f4;
  color: #6b7280;
}

.badge-erp-waiting {
  background-color: #f1f2f4;
  color: #6b7280;
}

.badge-erp-ready {
  background-color: #fff4e0;
  color: #b5680a;
}

.badge-erp-sent {
  background-color: #dff7f1;
  color: #0f8a6c;
}

.badge-erp-failed {
  background-color: #fdecea;
  color: #b3261e;
}

.badge-erp-unknown {
  background-color: #f1f2f4;
  color: #6b7280;
}

/* 페이지네이션 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.page-btn {
  min-height: 44px;
  min-width: 72px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gsb-navy-light);
  border-radius: 10px;
  color: var(--gsb-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.page-btn:hover {
  background-color: var(--gsb-bg);
}

.page-btn.is-disabled {
  border-color: var(--gsb-gray-light);
  color: var(--gsb-gray);
  cursor: not-allowed;
}

.page-indicator {
  font-size: 13px;
  font-weight: 700;
  color: var(--gsb-navy);
}

/* 빈 화면 / 404 */
.empty-state {
  text-align: center;
  padding: 20px 0;
}

.empty-state p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--gsb-gray);
}

.empty-state-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 주문 상세 정보 표시 */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gsb-gray-light);
}

.detail-header .order-no {
  font-size: 17px;
}

.detail-info-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  line-height: 1.5;
}

.detail-info-row dt {
  flex-shrink: 0;
  color: var(--gsb-gray);
  font-weight: 600;
}

.detail-info-row dd {
  margin: 0;
  text-align: right;
  color: var(--gsb-navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.item-card-readonly {
  background-color: var(--gsb-white);
  border: 1px solid var(--gsb-gray-light);
}

.drawing-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--gsb-gray-light);
}

.drawing-filename {
  margin: 0;
  font-size: 13px;
  color: var(--gsb-navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

.drawing-filename.drawing-none {
  color: var(--gsb-gray);
}

.drawing-ext {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--gsb-bg);
  color: var(--gsb-gray);
  font-size: 11px;
  font-weight: 700;
}

.drawing-btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 18px;
}

.detail-actions {
  width: 100%;
  max-width: 480px;
}

@media (max-width: 480px) {
  .list-card {
    padding: 20px 16px;
  }
}

/* 주문 진행상태 세로 타임라인 (order_progress.html) */
.progress-timeline {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gsb-gray-light);
}

.timeline-step {
  display: flex;
  gap: 14px;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--gsb-white);
  border: 3px solid var(--gsb-gray-light);
  flex-shrink: 0;
}

.timeline-line {
  width: 2px;
  flex: 1;
  min-height: 28px;
  margin: 2px 0;
  background-color: var(--gsb-gray-light);
}

.timeline-content {
  flex: 1;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gsb-navy);
  min-width: 74px;
}

.timeline-step-done .timeline-dot {
  background-color: var(--gsb-navy);
  border-color: var(--gsb-navy);
}

.timeline-step-done .timeline-line {
  background-color: var(--gsb-navy);
}

.timeline-step-in-progress .timeline-dot {
  background-color: var(--gsb-white);
  border-color: var(--gsb-navy);
  box-shadow: 0 0 0 4px rgba(28, 58, 110, 0.15);
}

.timeline-step:last-child .timeline-content {
  padding-bottom: 0;
}

/* GSB-MO-014: 고객용 "새 주문" 단일 품목 스텝 마법사 전용 스타일.
   버튼/카드/폼 요소는 기존 컴포넌트를 그대로 재사용하고, 여기서는 스텝 인디케이터와
   도면 첨부 버튼 배치만 추가한다. */
.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.wizard-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gsb-gray);
  position: relative;
}

.wizard-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--gsb-gray-light);
  color: var(--gsb-white);
  font-style: normal;
}

.wizard-step em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
}

.wizard-step.is-active {
  color: var(--gsb-navy);
}

.wizard-step.is-active .wizard-step-num,
.wizard-step.is-done .wizard-step-num {
  background-color: var(--gsb-navy);
}

.wizard-file-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 360px) {
  .wizard-step {
    font-size: 12px;
  }

  .wizard-step-num {
    width: 24px;
    height: 24px;
  }

  /* [GSB-MO-040] 좁은 화면에서 4개 단계 라벨(주문자정보/제품형태/상세입력/확인)이
     겹치거나 잘리는 것을 막는다 — **현재 단계 라벨만** 보이게 하고 나머지는 숫자만
     남긴다(숫자 인디케이터는 그대로라 전체 진행은 알 수 있다). 발주 로직은 무관. */
  .wizard-step em {
    display: none;
  }

  .wizard-step.is-active em {
    display: block;
  }
}

/* [GSB-MO-016] 강종 선택 피커. .form-field input[readonly]의 "수정 불가" 회색 스타일은
   회사명(GSB-MO-015)처럼 아예 못 바꾸는 필드용이라, 강종 입력은 눌러서 피커를 여는
   용도이므로 흰 배경 + 포인터 커서로 구분한다. */
.form-field input#steel_grade[readonly] {
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  cursor: pointer;
}

.steel-picker-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 31, 68, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.steel-picker-overlay[hidden] {
  display: none;
}

.steel-picker-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background-color: var(--gsb-white);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.steel-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--gsb-gray-light);
}

.steel-picker-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--gsb-navy);
}

.steel-picker-close {
  border: none;
  background: none;
  color: var(--gsb-gray);
  font-size: 14px;
  padding: 4px 8px;
}

.steel-picker-search {
  margin: 12px 16px 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  font-size: 15px;
  color: var(--gsb-navy);
}

.steel-picker-search:focus {
  outline: none;
  border-color: var(--gsb-navy-light);
}

.steel-picker-list {
  overflow-y: auto;
  padding: 8px 16px 16px;
  flex: 1;
}

.steel-picker-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gsb-navy);
  margin: 16px 0 6px;
}

.steel-picker-group-title:first-child {
  margin-top: 8px;
}

.steel-picker-subgroup-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gsb-gray);
  margin: 10px 0 4px;
}

.steel-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 10px;
}

.steel-picker-item:active {
  background-color: var(--gsb-bg);
}

.steel-picker-item-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.steel-picker-item-name {
  font-size: 15px;
  color: var(--gsb-navy);
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
}

.steel-picker-item-meta {
  font-size: 12px;
  color: var(--gsb-gray);
  white-space: nowrap;
}

.steel-picker-star {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  color: var(--gsb-gray-light);
  flex-shrink: 0;
}

.steel-picker-star.is-favorite {
  color: #e0a527;
}

.steel-picker-empty {
  text-align: center;
  color: var(--gsb-gray);
  padding: 32px 0;
  font-size: 14px;
}

.steel-picker-custom-option {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px dashed var(--gsb-gray-light);
  color: var(--gsb-navy-light);
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

/* [GSB-MO-022] 주문 상세의 ERP 전송 안내 문구. 색상·여백은 기존 변수를 그대로 쓴다
   (새 색상을 만들지 않는다, CLAUDE.md 부록 B). */
.detail-guide {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--gsb-gray);
  line-height: 1.5;
}

/* [GSB-MO-036] AI 자동 승인 판정 배지·안내 상자.
   `suggest` 모드에서는 상태가 바뀌지 않으므로 이 표시가 판정의 유일한 쓸모다 —
   담당자가 승인 버튼을 누르기 전에 눈에 들어와야 해서 검토 상세 맨 위에 둔다.
   색은 기존 배지 팔레트를 그대로 재사용한다(새 변수를 만들지 않는다). */
.badge-auto-approved {
  background-color: #d3efdd;
  color: #115c30;
}

.badge-auto-hold {
  background-color: #fff4e0;
  color: #b5680a;
}

.badge-auto-blocked {
  background-color: #fbdcdc;
  color: #a01b1b;
}

.auto-approval-box {
  border: 1px solid var(--gsb-gray-light);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background-color: #fafbfc;
}

.auto-approval-box.badge-auto-approved { border-left-color: #115c30; }
.auto-approval-box.badge-auto-hold { border-left-color: #b5680a; }
.auto-approval-box.badge-auto-blocked { border-left-color: #a01b1b; }

.auto-approval-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.auto-approval-applied {
  font-size: 12px;
  font-weight: 700;
  color: #115c30;
}

.auto-approval-reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gsb-navy);
}

/* [GSB-MO-037] 판단 신뢰도. 사유 문구와 주의 문구 사이 단계라 크기도 그 사이에 둔다. */
.auto-approval-confidence {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--gsb-navy);
  line-height: 1.4;
}

.auto-approval-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gsb-gray);
  line-height: 1.4;
}

/* [GSB-MO-042] 주문 단위 검토 — 목록 그룹 카드 & 주문 검토 화면 */

/* 목록: 카드 전체가 주문 검토로 가는 링크다(anchor를 카드로 만든다). */
.order-summary-card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.order-summary-card-link:active {
  border-color: var(--gsb-navy-light);
  box-shadow: 0 0 0 2px rgba(28, 58, 110, 0.12);
}

/* 목록 카드 안의 품목 요약 */
.order-summary-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-summary-items-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--gsb-navy);
}
.order-summary-item-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-summary-item-lines li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gsb-navy);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 품목 순번 배지(작은 원형 숫자) */
.item-line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  font-size: 12px;
  font-weight: 700;
}

/* 목록·요약에 인라인으로 붙는 작은 상태 배지 */
.badge-inline {
  font-size: 11px;
  padding: 2px 8px;
}

/* 주문 검토 화면: 품목 카드 목록 간격 */
.item-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.item-card-list .item-card-header {
  flex-wrap: wrap;
  gap: 8px;
}

/* 품목별 승인/수정 액션은 가로로 배치하되 좁으면 접힌다 */
.item-review-actions {
  flex-direction: row;
  flex-wrap: wrap;
}
.item-review-actions .btn-primary,
.item-review-actions .btn-secondary,
.item-review-actions .btn-ghost {
  flex: 1 1 auto;
}

/* 주문 전체 승인 버튼은 폭을 꽉 채운다 */
.btn-approve-all {
  width: 100%;
}

/* 값 확인 필요 등 주의 문구 */
.field-hint-warn {
  color: #b45309;
  font-weight: 600;
}

/* [GSB-MO-043] 로그인 사용자 표시 + 로그아웃 공통 바 (모든 인증 화면 상단) */
.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.user-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-white);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.user-bar-icon {
  font-size: 14px;
}
.user-bar-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--gsb-navy-light);
  color: var(--gsb-white);
  font-size: 11px;
  font-weight: 700;
}
.user-bar-logout {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.user-bar-logout:active {
  background-color: var(--gsb-gray-light);
}

/* [GSB-MO-044] ERP 전송 준비 화면 — 요약·준비도 표시 */
.erp-ready-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 14px;
}
.erp-ready-summary-item {
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--gsb-bg);
  border: 1px solid var(--gsb-gray-light);
  font-size: 13px;
  color: var(--gsb-navy);
}
.erp-ready-summary-item strong {
  color: var(--gsb-navy);
  font-weight: 700;
}
.erp-ready-summary-attention strong {
  color: #b45309;
}

/* 카드 왼쪽 색 띠로 상태를 한눈에 구분 */
.erp-ready-card {
  border-left: 4px solid var(--gsb-gray-light);
}
.erp-ready-card.erp-ready-ready {
  border-left-color: #2f855a;
}
.erp-ready-card.erp-ready-blocked {
  border-left-color: #b45309;
}
.erp-ready-card.erp-ready-failed {
  border-left-color: #d1453b;
}

.erp-ready-flag {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.erp-ready-flag.is-ready {
  color: #2f855a;
}
.erp-ready-flag.is-attention {
  color: #b45309;
}
.erp-ready-flag.is-failed {
  color: #d1453b;
}
.erp-ready-reason {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--gsb-gray);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* [GSB-MO-045] 발주 편의 — 납기 유형 세그먼트 / 요청사항 범례 칩 */
.field-optional {
  font-size: 12px;
  font-weight: 500;
  color: var(--gsb-gray);
}

/* 희망 납기 유형(4종) — 2열 세그먼트, 360px에서 잘림 없이 접힘 */
.due-type-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.due-type-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1.5px solid var(--gsb-gray-light);
  border-radius: 12px;
  background-color: var(--gsb-white);
  font-size: 14px;
  font-weight: 600;
  color: var(--gsb-navy);
  cursor: pointer;
  text-align: center;
}
.due-type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.due-type-option.is-selected {
  border-color: var(--gsb-navy);
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
}
.due-date-field[hidden] { display: none; }
/* 납기 일정 단일 선택(협의 후 결정) — 한 줄 전체 폭 */
.due-type-group--single { grid-template-columns: 1fr; }

/* 요청사항 범례 칩(복수 선택) */
.request-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.request-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid var(--gsb-gray-light);
  border-radius: 999px;
  background-color: var(--gsb-white);
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-navy);
  cursor: pointer;
}
.request-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.request-chip:has(input:checked) {
  border-color: var(--gsb-navy);
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
}
[data-role="request-other"][hidden],
[data-role="processing-other"][hidden] { display: none; }

/* ===========================================================================
   [GSB-MO-046] 처리 담당자 배정 — 탭 · 배정 칩 · 재배정 · claim 차단 안내
   =========================================================================== */

/* 업무 단계 탭. 담당자 화면은 폭이 좁은 기기에서도 쓰이므로 줄바꿈 대신 **가로 스크롤**로
   흘린다 — 줄이 바뀌면 탭 아래 내용이 화면 밖으로 밀려 한 손 조작이 어려워진다. */
.scope-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scope-tabs::-webkit-scrollbar {
  display: none;
}

.scope-tab {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--gsb-gray-light);
  background-color: var(--gsb-white);
  color: var(--gsb-gray);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.scope-tab.is-active {
  background-color: var(--gsb-navy);
  border-color: var(--gsb-navy);
  color: var(--gsb-white);
}

/* 배정 칩. 미배정/내 주문/남의 주문을 색으로 즉시 가른다. */
.assign-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background-color: var(--gsb-gray-light);
  color: var(--gsb-navy);
}

.assign-chip.is-mine {
  background-color: #dbeafe;
  color: #1e40af;
}

.assign-chip.is-open {
  background-color: #fef3c7;
  color: #92400e;
}

.assign-panel-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.assign-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.reassign-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reassign-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsb-gray);
}

.reassign-form select {
  min-height: 44px;          /* 한 손 조작 — 터치 목표 크기 유지(§8) */
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 8px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  font-size: 14px;
}

.assign-history {
  margin-top: 12px;
  font-size: 13px;
}

.assign-history summary {
  cursor: pointer;
  color: var(--gsb-gray);
  font-weight: 600;
}

/* 다른 담당자가 검토 중이라 열 수 없을 때. */
.claim-blocked-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #92400e;
}

.claim-blocked-info {
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 10px;
  background-color: var(--gsb-bg);
}

.claim-blocked-info > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.claim-blocked-info dt {
  margin: 0;
  color: var(--gsb-gray);
  font-size: 13px;
}

.claim-blocked-info dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

/* 360px — 재배정 폼과 배정 액션이 가로로 겹치지 않게 세로로 쌓는다. 셀렉트는 폭을 꽉
   채워 값이 잘리지 않게 한다(기존 좁은 화면 규칙과 같은 방식). */
@media (max-width: 360px) {
  .scope-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .assign-panel-actions,
  .reassign-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .reassign-form select,
  .assign-panel-actions form,
  .assign-panel-actions button {
    width: 100%;
  }

  .claim-blocked-info > div {
    flex-direction: column;
    gap: 2px;
  }

  .claim-blocked-info dd {
    text-align: left;
  }
}

/* ===========================================================================
   [GSB-MO-047] 통합 발주 접수함 — 출처 배지 · OCR 검토 화면
   =========================================================================== */

/* 출처 배지. OCR/MOBILE을 한눈에 가른다(요구 2번). 색으로만 구분하지 않고 글자도 함께
   둔다 — 색각 이상에서도 읽혀야 한다. */
.source-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.source-badge.is-ocr {
  background-color: #fde68a;
  color: #78350f;
}

.source-badge.is-mobile {
  background-color: #c7d2fe;
  color: #312e81;
}

/* 원본 파일명. 길어서 줄바꿈을 허용한다(telegram_..._20260827_100218.json). */
.source-ref {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--gsb-gray);
  word-break: break-all;
}

.source-ref-inline {
  font-size: 11px;
  color: var(--gsb-gray);
  word-break: break-all;
}

.ocr-ingest-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ocr-ingest-bar form {
  margin: 0;
}

/* OCR 검토 화면 — 넓은 화면에서는 원본 이미지와 입력 폼을 나란히, 좁은 화면에서는 위아래.
   담당자 PC가 주 사용처지만(요구 2번) 모바일에서도 읽혀야 한다. */
.order-wrap-wide {
  max-width: 1180px;
}

.ocr-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 900px) {
  .ocr-review-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  /* 폼을 스크롤하는 동안 원본이 계속 보이게 둔다 — 대조하며 채우는 화면이다. */
  .ocr-image-panel {
    position: sticky;
    top: 12px;
  }
}

.ocr-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 8px;
  background-color: var(--gsb-white);
}

.ocr-image-missing {
  padding: 20px 14px;
  border: 1px dashed var(--gsb-gray-light);
  border-radius: 8px;
  background-color: var(--gsb-bg);
  text-align: center;
}

.ocr-image-missing p {
  margin: 0 0 6px;
}

.ocr-item-card {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  background-color: var(--gsb-white);
}

.ocr-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* 치수 칸은 좁으므로 여러 개를 한 줄에 흘린다. 최소 폭을 두어 숫자가 잘리지 않게 한다. */
.ocr-dim-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.readonly-value {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--gsb-bg);
  font-weight: 600;
}

@media (max-width: 360px) {
  .ocr-ingest-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .ocr-ingest-bar button {
    width: 100%;
  }

  /* 360px에서는 치수를 2칸씩 쌓는다 — 5칸을 한 줄에 넣으면 글자가 읽히지 않는다. */
  .ocr-dim-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ocr-image {
    max-height: 50vh;
  }
}

/* [GSB-MO-047] `.field-hint`는 입력칸 바로 밑에 붙이려고 위로 6px 당겨 두었다(기존 규칙).
   원본 파일명 바로 아래에 올 때는 그 당김 때문에 두 줄이 겹친다(360px 실측 6px 겹침).
   전역 규칙을 건드리면 폼 화면 전체 간격이 바뀌므로 **이 조합에서만** 되돌린다. */
.source-ref + .field-hint {
  margin-top: 8px;
}

/* [GSB-MO-049] OCR 공유폴더 연결 끊김 안내. 버튼을 지우지 않고 비활성화해 둔다 —
   사라지면 "기능이 없어졌나"로 읽히고, 있는데 눌리지 않아야 "지금은 안 된다"로 읽힌다. */
.ocr-share-offline {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background-color: #fffbeb;
}

.ocr-share-offline-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
}

.ocr-share-offline-detail {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #78350f;
}

.ocr-share-offline button[disabled] {
  width: 100%;
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================================================================
   [GSB-MO-052] 공용 PC 테스트용 통합 접수함
   운영 접수함과 화면을 나눴다. 여기는 공용 PC에 띄워 두고 **멀리서 보는** 화면이라
   글자와 여백을 운영 화면보다 크게 잡는다.
   =========================================================================== */

.test-inbox-wrap { max-width: 1180px; }

/* 요구 9: 테스트용이라는 사실을 못 보고 지나칠 수 없게 한다. */
.test-inbox-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 2px dashed #b45309;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 15px;
  line-height: 1.5;
}
.test-inbox-banner a { color: #92400e; font-weight: 700; }

.test-inbox-header { margin-bottom: 16px; }

/* 요구 8: 상단 요약 3칸 */
.test-inbox-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.test-inbox-stat {
  padding: 14px 16px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left-width: 6px;
  text-align: left;
}
.test-inbox-stat.is-new { border-left-color: #dc2626; }
.test-inbox-stat.is-working { border-left-color: #2563eb; }
.test-inbox-stat.is-approved { border-left-color: #16a34a; }
.test-inbox-stat-label { display: block; font-size: 13px; color: #64748b; }
.test-inbox-stat-value { display: block; font-size: 30px; line-height: 1.2; color: #0a1f44; }

.test-inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.test-inbox-refresh { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.test-inbox-auto { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.test-inbox-countdown { color: #64748b; font-variant-numeric: tabular-nums; }
.test-inbox-reload { padding: 8px 14px; }
.test-inbox-share-off { margin-bottom: 12px; }

/* 넓은 표는 **자기 안에서** 가로 스크롤한다 — 페이지 전체가 밀리면 안 된다. */
.test-inbox-table-scroll { overflow-x: auto; }
.test-inbox-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.test-inbox-table th,
.test-inbox-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.test-inbox-table th {
  font-size: 13px;
  color: #64748b;
  background: #f8fafc;
  position: sticky;
  top: 0;
}
.test-inbox-time { font-variant-numeric: tabular-nums; color: #475569; }
.test-inbox-qty { font-variant-numeric: tabular-nums; }
.test-inbox-no a { font-weight: 700; color: #0a1f44; }
.test-inbox-ref {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  white-space: normal;
  word-break: break-all;
}

/* 요구 7: 신규 접수는 행 전체로 알아본다. 배지 하나로는 흘려 본다. */
.test-inbox-row.is-new { background: #fef2f2; }
.test-inbox-row.is-new .test-inbox-no a { color: #b91c1c; }
/* 상태 칸은 배지를 세로로 쌓는다 — 나란히 두면 「신규 접수 접수」로 읽힌다. */
.test-inbox-status { white-space: normal; }
.test-inbox-status .test-inbox-new-badge { margin: 0 0 4px; }

.test-inbox-new-badge {
  display: block;
  width: fit-content;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.test-inbox-urgent {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #b45309;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.test-inbox-footnote { margin-top: 12px; font-size: 13px; color: #64748b; }

@media (max-width: 640px) {
  .test-inbox-summary { grid-template-columns: 1fr; }
  .test-inbox-stat-value { font-size: 24px; }
  .test-inbox-table { font-size: 14px; }
  .test-inbox-toolbar { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   [GSB-MO-057] 담당자 Dashboard 보강 — `GSB-MO-055`에서 상세화면 CSS를 교체할 때
   이 블록이 함께 잘려 나갔다(요약 5칸·행 클릭·ERP 상태 표기가 사라졌다).
   =========================================================================== */

/* `.order-wrap`은 모바일 발주용이라 `align-items: center`다 — 그대로 두면 Dashboard의
   표가 내용 폭만큼만 줄어들어 화면 가운데에 몰린다. 여기서는 폭을 다 쓴다. */
.test-inbox-wrap {
  max-width: 1680px;
  width: 100%;
  align-items: stretch;
  padding: 10px 20px 24px;
  box-sizing: border-box;
}
.test-inbox-wrap > * { width: 100%; }

.test-inbox-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.test-inbox-stat.is-erp-wait { border-left-color: #b45309; }
.test-inbox-stat.is-erp-sent { border-left-color: #7c3aed; }

/* 행 전체가 상세로 가는 링크처럼 동작한다. 커서로 그 사실을 알린다. */
.test-inbox-row[data-href] { cursor: pointer; }
.test-inbox-row[data-href]:hover { background: #f1f5f9; }
.test-inbox-row.is-new[data-href]:hover { background: #fee2e2; }
.test-inbox-erp { display: block; margin-top: 3px; font-size: 12px; color: #64748b; }

@media (max-width: 1100px) { .test-inbox-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .test-inbox-summary { grid-template-columns: 1fr; } }

/* `.list-card`는 모바일 발주용이라 480px에서 멈춘다 — Dashboard에서는 폭을 다 쓴다.
   [GSB-MO-057] 이것이 빠져 있어 표가 화면 가운데 좁게 몰려 있었다. */
.test-inbox-wrap .list-card,
.test-inbox-wrap .test-inbox-card {
  max-width: none;
  padding: 14px 16px;
}
.test-inbox-wrap .order-header { align-self: flex-start; margin-bottom: 10px; }
.test-inbox-wrap .order-logo-mark { display: none; }
.test-inbox-wrap .order-title { font-size: 20px; }

/* ===========================================================================
   [GSB-MO-058] 발주서 검토 및 ERP Import — 담당자 상시 사용 화면
   **화면 높이를 끝까지 쓰는 2열 구조.** 왼쪽 33%는 항상 원본/첨부, 오른쪽 67%는 검토.
   품목 영역이 남는 높이를 전부 먹으므로 품목이 2건이어도 아래에 빈 공간이 생기지 않고,
   많아지면 그 영역 안에서만 스크롤한다. 페이지 자체는 스크롤하지 않는다.
   =========================================================================== */

.rv-body { background: #0a1f44; margin: 0; overflow: hidden; }
.rv {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 12px;
  box-sizing: border-box;
  gap: 8px;
}

/* ── 제목줄 ─────────────────────────────────────────────────────────────── */
.rv-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 0 0 auto; color: #cbd5e1;
}
.rv-title { margin: 0; font-size: 18px; font-weight: 700; color: #ffffff; }
.rv-no { font-size: 14px; font-weight: 700; color: #e2e8f0; letter-spacing: .02em; }
.rv-sep { flex: 1 1 auto; }
.rv-meta { font-size: 12px; color: #94a3b8; }
.rv-meta strong { color: #e2e8f0; }
.rv-link {
  font-size: 12px; color: #cbd5e1; text-decoration: none;
  padding: 3px 9px; border: 1px solid #33507d; border-radius: 5px;
}
.rv-link:hover { background: #14305c; }

.rv-alerts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.rv-alert { padding: 6px 11px; border-radius: 6px; font-size: 13px; }
.rv-alert.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.rv-alert.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ── 2열 본문 ───────────────────────────────────────────────────────────── */
.rv-form { flex: 1 1 auto; min-height: 0; display: flex; }
.rv-fieldset {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  border: 0; margin: 0; padding: 0;
  display: flex; gap: 10px;
}
.rv-fieldset[disabled] input,
.rv-fieldset[disabled] select,
.rv-fieldset[disabled] textarea { background: #f1f5f9; color: #475569; }

/* 왼쪽 — 출처와 무관하게 **항상** 있다. 비어 보이면 안 되는 자리다. */
.rv-left {
  flex: 0 0 33%;
  max-width: 33%;
  min-height: 0;
  display: flex; flex-direction: column;
  background: #ffffff; border-radius: 8px; padding: 10px 12px;
}
.rv-right {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.rv-panel-head {
  display: flex; align-items: baseline; gap: 8px;
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700; color: #0a1f44; margin-bottom: 7px;
}
.rv-sub { font-weight: 400; color: #94a3b8; font-size: 12px; }
.rv-srcref {
  margin-left: auto; font-size: 11px; color: #94a3b8;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-note { margin: 6px 0 0; font-size: 12px; color: #64748b; flex: 0 0 auto; }
.rv-err { margin: 5px 0 0; font-size: 12px; color: #b91c1c; }

/* 원본 이미지 — 남는 높이를 전부 쓴다(발주서는 세로로 긴 문서다). */
.rv-image-wrap { flex: 1 1 auto; min-height: 0; display: block; }
.rv-image {
  width: 100%; height: 100%;
  object-fit: contain; object-position: top;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
}
.rv-empty {
  flex: 1 1 auto; min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; font-size: 13px; color: #64748b;
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px;
}
.rv-empty span { font-size: 12px; color: #94a3b8; line-height: 1.6; }

/* MOBILE — 원본이 없다는 사실을 흐리지 않고 분명히 적는다. */
.rv-direct {
  flex: 0 0 auto; padding: 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
}
.rv-direct-mark {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px;
  background: #1e3a5f; color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.rv-direct p { margin: 0; font-size: 12px; color: #1e40af; line-height: 1.6; }
.rv-attach-head {
  flex: 0 0 auto; margin: 10px 0 6px;
  font-size: 12px; font-weight: 700; color: #0a1f44;
}
.rv-attach { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.rv-attach li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 5px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; font-size: 13px;
}
.rv-attach-no { font-weight: 700; color: #64748b; font-size: 12px; }

/* ── 기본정보 — 중요도에 따라 폭을 달리 준다 ───────────────────────────── */
.rv-info {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px 10px;
  background: #ffffff; border-radius: 8px; padding: 9px 12px;
}
.rv-f { min-width: 0; grid-column: span 2; }
.rv-f-wide { grid-column: span 3; }
.rv-span { grid-column: 1 / -1; }
.rv-f label { display: block; font-size: 11px; color: #64748b; margin-bottom: 3px; }
.rv-f label i { color: #dc2626; font-style: normal; }
/* 입력칸 높이를 하나로 고정한다 — 줄이 들쭉날쭉하면 정보 밀도가 아니라 소음이다. */
.rv-f input, .rv-f select, .rv-f output {
  display: block; width: 100%; box-sizing: border-box;
  height: 30px; padding: 0 8px; font-size: 13px;
  border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #0f172a;
}
.rv-f output {
  border-color: transparent; background: #f8fafc; font-weight: 700; line-height: 30px;
}
.rv-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-due { display: flex; gap: 5px; }
.rv-due select { flex: 0 0 42%; }
.is-bad { border-color: #dc2626 !important; background: #fef2f2; }

/* ── 요청정보 — 한 영역 안에서 둘을 좌우로. 두 줄이면 충분하다 ─────────── */
.rv-notes { flex: 0 0 auto; background: #ffffff; border-radius: 8px; padding: 9px 12px; }
.rv-notes-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; color: #0a1f44;
}
.rv-noerp {
  font-weight: 400; font-size: 11px; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 2px 7px;
}
.rv-copy-status { margin-left: auto; font-size: 12px; font-weight: 400; color: #16a34a; }
.rv-copy-status.is-error { color: #b91c1c; }
.rv-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rv-note-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
  font-size: 12px; font-weight: 700; color: #334155;
}
.rv-note-label em { font-style: normal; font-weight: 400; color: #94a3b8; font-size: 11px; }
.rv-notes textarea {
  width: 100%; box-sizing: border-box; height: 46px; resize: vertical;
  padding: 5px 8px; font-size: 13px; line-height: 1.5;
  border: 1px solid #cbd5e1; border-radius: 5px;
}
.rv-notes textarea::placeholder { color: #b6c2d2; font-style: italic; }
.rv-items input::placeholder { color: #b6c2d2; }
.rv-counter { display: block; text-align: right; font-size: 11px; color: #94a3b8; }
.rv-mini {
  padding: 2px 9px; font-size: 11px; cursor: pointer;
  border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; color: #334155;
}
.rv-mini:hover { background: #eef2f7; }
.final-review-copy-fallback {
  width: 100%; height: 80px; margin-top: 6px; padding: 6px;
  border: 2px solid #b91c1c; border-radius: 5px; font-size: 13px;
}

/* ── 품목정보 — 남는 높이를 전부 쓴다(이 화면의 주인공) ────────────────── */
.rv-items {
  /* [GSB-MO-059] 요구 8 — 기본 5행이 보이는 높이를 **최소로 보장**한다.
     5행(30px) + 머리글(31px) + 카드 여백 ≈ 220px. 화면이 남으면 그만큼 더 쓰고,
     6건부터는 `.rv-table-box` 안에서만 스크롤한다(페이지는 움직이지 않는다). */
  flex: 1 1 auto; min-height: 220px;
  display: flex; flex-direction: column;
  background: #ffffff; border-radius: 8px; padding: 9px 12px;
}
.rv-table-box {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;              /* 스크롤은 여기서만. 스크롤바가 표 오른쪽에 붙는다 */
  overflow-x: auto;
  border: 1px solid #e2e8f0; border-radius: 6px;
}
.rv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rv-table thead th {
  position: sticky; top: 0; z-index: 2;      /* 스크롤해도 머리글은 남는다 */
  background: #1e3a5f; color: #ffffff;
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 8px 6px; white-space: nowrap;
}
.rv-table thead th i { color: #fca5a5; font-style: normal; }
.rv-table tbody td { padding: 4px 6px; text-align: center; border-bottom: 1px solid #eef2f7; }
.rv-table tbody tr:nth-child(even) td { background: #f8fafc; }
.rv-table input {
  width: 100%; box-sizing: border-box; height: 28px; padding: 0 7px;
  font-size: 13px; border: 1px solid #cbd5e1; border-radius: 4px;
}
.rv-table .c-no { width: 52px; font-weight: 700; color: #475569; }
/* [GSB-MO-074] 제품형태·직경 칸이 늘어 폭을 다시 나눴다(합 100% 이하 — 넘치면 열처리 칸이 눌린다). */
.rv-table .c-grade { width: 15%; }
.rv-table .c-dim { width: 9%; }
.rv-table .c-type { width: 8%; }
.rv-table .c-type select { width: 100%; }
.rv-table .c-qty { width: 8%; }
.rv-table .c-proc { width: 12%; }
.rv-table .c-del { width: 64px; white-space: nowrap; }
.rv-table .c-dim input, .rv-table .c-qty input { text-align: right; }
.rv-del {
  padding: 3px 9px; font-size: 12px; cursor: pointer;
  color: #b91c1c; background: #fff; border: 1px solid #fecaca; border-radius: 4px;
}
.rv-del:hover { background: #fef2f2; }

/* ── 작업 줄 — 사유·메모와 버튼을 한 줄에 ──────────────────────────────── */
.rv-actions {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: #ffffff; border-radius: 8px; padding: 8px 12px;
}
.rv-reason { flex: 1 1 34%; min-width: 0; }
.rv-memo { flex: 1 1 22%; min-width: 0; }
.rv-actions input {
  box-sizing: border-box; height: 32px; padding: 0 9px; font-size: 13px;
  border: 1px solid #cbd5e1; border-radius: 5px;
}
/* 버튼 크기를 하나로 맞춘다. */
.rv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 104px; padding: 0 14px; white-space: nowrap;
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1px solid #cbd5e1; border-radius: 5px; background: #ffffff; color: #334155;
}
.rv-btn:hover { background: #f1f5f9; }
.rv-btn.is-save { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.rv-btn.is-save:hover { background: #16304f; }
.rv-btn.is-approve { background: #16a34a; border-color: #16a34a; color: #fff; }
.rv-btn.is-approve:hover { background: #15803d; }
.rv-btn.is-send { background: #2563eb; border-color: #2563eb; color: #fff; }
.rv-btn.is-send:hover { background: #1d4ed8; }
.rv-btn.is-cancel { color: #b91c1c; border-color: #fecaca; }
.rv-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 1400px) {
  .rv-info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rv-f, .rv-f-wide { grid-column: span 2; }
}
@media (max-width: 1000px) {
  .rv-body { overflow: auto; }
  .rv { height: auto; }
  .rv-fieldset { flex-direction: column; }
  .rv-left { flex: 1 1 auto; max-width: none; }
  .rv-notes-grid { grid-template-columns: 1fr; }
  .rv-actions { flex-wrap: wrap; }
}


/* ── [GSB-MO-059] 왼쪽 "고객 주문 원본" ───────────────────────────────────
   담당자가 **왼쪽 고객 원본 ↔ 오른쪽 ERP 전송용 값**을 대조한 뒤 승인·전송한다.
   왼쪽은 입력 요소가 하나도 없다 — 읽기 전용이라는 것이 구조로 보장된다.
   품목이 12건이어도 페이지가 아니라 이 영역 안에서만 스크롤한다(요구 9). */
.rv-left-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding-right: 4px;
}
.rv-ro {
  padding: 1px 7px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
  font-size: 11px; font-weight: 700;
}

/* 주문 헤더 원본 — 2열. 이메일·특이사항만 한 줄 전체를 쓴다. */
.rv-orig-head {
  flex: 0 0 auto; margin: 10px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: #e2e8f0; border: 1px solid #e2e8f0; border-radius: 6px;
  overflow: hidden;
}
.rv-orig-head > div { background: #ffffff; padding: 5px 8px; min-width: 0; }
.rv-orig-head > div.is-wide { grid-column: 1 / -1; }
.rv-orig-head dt { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.rv-orig-head dd {
  margin: 0; font-size: 13px; color: #0f172a; font-weight: 600;
  overflow-wrap: anywhere;
}
.rv-orig-remark { font-weight: 400 !important; white-space: pre-wrap; line-height: 1.5; }

.rv-orig-sub {
  flex: 0 0 auto; margin: 12px 0 6px;
  font-size: 12px; font-weight: 700; color: #0a1f44;
}

/* 품목 카드 — 고객이 입력한 그대로. 오른쪽 표 한 줄과 짝이 된다. */
.rv-ocard {
  flex: 0 0 auto; margin-bottom: 7px;
  border: 1px solid #dbe3ec; border-radius: 6px; overflow: hidden;
}
.rv-ocard > header {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
}
.rv-ocard-no {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 4px;
  background: #1e3a5f; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.rv-ocard-grade {
  font-size: 13px; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-ocard-type {
  padding: 1px 6px; border-radius: 4px;
  background: #e0e7ff; color: #3730a3; font-size: 11px; font-weight: 700;
}
.rv-ocard-qty { margin-left: auto; font-size: 12px; font-weight: 700; color: #0a1f44; }
.rv-ocard dl {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: #eef2f7;
}
.rv-ocard dl > div { background: #ffffff; padding: 4px 8px; min-width: 0; }
.rv-ocard dl > div.is-wide { grid-column: 1 / -1; }
.rv-ocard dt { font-size: 11px; color: #94a3b8; margin-bottom: 1px; }
.rv-ocard dd {
  margin: 0; font-size: 12.5px; color: #0f172a;
  overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.45;
}
.rv-ocard-file {
  display: block; padding: 6px 8px; background: #f8fafc;
  border-top: 1px solid #e2e8f0; text-decoration: none;
}
.rv-ocard-file img {
  display: block; width: 100%; max-height: 190px;
  object-fit: contain; object-position: left top;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 4px;
  margin-bottom: 4px;
}
.rv-ocard-file span { font-size: 11px; color: #1d4ed8; font-weight: 600; }
.rv-ocard-nofile {
  margin: 0; padding: 4px 8px; background: #f8fafc;
  border-top: 1px solid #e2e8f0; font-size: 11px; color: #94a3b8;
}
.rv-ocard-warn {
  margin: 0; padding: 4px 8px;
  background: #fffbeb; border-top: 1px solid #fde68a;
  font-size: 11px; color: #92400e;
}

/* ── [GSB-MO-061] 고객 진행상태 배지 ──────────────────────────────────────
   고객 화면은 내부 업무 상태(11종) 대신 6단계만 보여 준다. 같은 "검토중"인데 색이
   갈리지 않도록 배지 색도 6단계 기준으로 다시 묶는다. 기존 `.badge-status-*`는
   담당자 화면이 그대로 쓴다 — 건드리지 않는다. */
.badge-customer-received   { background-color: #e6f0ff; color: #1a56c4; }
.badge-customer-reviewing  { background-color: #f1e8ff; color: #6b30c9; }
.badge-customer-confirmed  { background-color: #e2f6ea; color: #17703c; }
.badge-customer-processing { background-color: #fff4e0; color: #9a5b00; }
.badge-customer-done       { background-color: #e2f6ea; color: #17703c; }
.badge-customer-cancelled  { background-color: #f2f4f7; color: #5a6472; }

/* ===========================================================================
   [GSB-MO-067] 가공 2차 선택창 — 라우팅 공정 74개 + 열처리 3종
   =========================================================================== */

/* 1차 메뉴에서 '기타 및 열처리'를 고르면 열린다. 74개를 한 손으로 훑어야 하므로
   묶음 제목 + 칩 + 검색으로 좁힌다(§20 1분 기준). */
.routing-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  background-color: var(--gsb-bg);
}
/* [부록 B 함정] 클래스 선택자가 브라우저 기본 [hidden]을 이겨 항상 열려 보인다.
   패널·칩·구획·안내문 모두 [hidden] 규칙을 반드시 함께 둔다. */
.routing-panel[hidden] { display: none; }

.routing-panel-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsb-navy);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gsb-gray-light);
}

.routing-search {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 8px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
}

.routing-group { margin-bottom: 12px; }
.routing-group:last-child { margin-bottom: 0; }
.routing-group[hidden] { display: none; }

.routing-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gsb-gray);
  margin-bottom: 6px;
}

.routing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 한 손 조작 기준으로 최소 높이 40px를 준다(§8 버튼 크게). */
.routing-chip {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 20px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
  cursor: pointer;
}
.routing-chip[hidden] { display: none; }
.routing-chip.is-selected {
  border-color: var(--gsb-navy);
  background-color: var(--gsb-navy);
  color: var(--gsb-white);
  font-weight: 700;
}
/* 열처리 칩은 저장 필드가 다르므로(heat_treatment) 색으로 갈라 둔다. */
.routing-chip-heat.is-selected {
  border-color: var(--gsb-navy-light);
  background-color: var(--gsb-navy-light);
}

.routing-free {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 8px;
  background-color: var(--gsb-white);
  color: var(--gsb-navy);
}

/* 고른 값을 패널 밖에서도 보이게 한다 — 패널이 길어 선택 결과가 화면 밖으로 밀린다. */
.routing-selected {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gsb-navy);
  background-color: #eef2fa;
  border-radius: 6px;
}
.routing-selected[hidden] { display: none; }

/* [GSB-MO-068] 가공 2차 선택 미완료 안내. 필드 오류 문구와 같은 자리·같은 톤으로 둔다. */
.routing-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
}
.routing-error[hidden] { display: none; }

/* ===========================================================================
   [GSB-MO-069] 발주 화면 기본정보 — 계정에서 온 값을 읽기 전용으로 보여 준다
   =========================================================================== */

/* 입력칸이 아니라 "이미 정해진 값"으로 읽히게 한다 — 고객이 손댈 것이 없다는 신호다. */
.profile-box {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 10px;
  background-color: var(--gsb-bg);
}
.profile-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.profile-row dt {
  flex: 0 0 64px;
  margin: 0;
  font-size: 13px;
  color: var(--gsb-gray);
}
.profile-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--gsb-navy);
  word-break: break-all;
}
.profile-edit {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gsb-navy-light);
  text-decoration: underline;
}

/* [GSB-MO-073] 신규 주문 1단계 — 최근 주문(다시 사용) */
.recent-order-list { margin-bottom: 16px; }
.recent-order-card { gap: 6px; padding: 14px; }
.recent-order-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--gsb-gray);
}
.recent-order-no { font-weight: 700; color: var(--gsb-navy); }
.recent-order-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gsb-navy);
  word-break: break-all;
}

/* [GSB-MO-073] 신규 주문 3단계 — 품목별 확인 카드 */
.confirm-item-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.confirm-item-card {
  padding: 12px 14px;
  border: 1px solid var(--gsb-gray-light);
  border-radius: 12px;
  background-color: var(--gsb-bg);
}
.confirm-item-title {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--gsb-navy);
}

/* [GSB-MO-074] Dashboard 행의 '발주서 최종 검토' 버튼 — 표 안이라 작게, 줄바꿈 없이 */
.test-inbox-action { white-space: nowrap; }
.test-inbox-review-btn { display: inline-block; width: auto; min-height: 0; padding: 6px 12px; font-size: 13px; }

/* [GSB-MO-076] Dashboard 배너 — 운영(실제 ERP 전송)·전송 꺼짐을 테스트 배너와 구분한다 */
.test-inbox-banner.is-live { border: 2px solid #15803d; background: #f0fdf4; color: #14532d; }
.test-inbox-banner.is-off { border: 2px solid #b91c1c; background: #fef2f2; color: #7f1d1d; }

/* [GSB-MO-076] 승인 완료 주문의 작업 줄(폼 밖) */
.rv-readonly-note { flex: 1 1 auto; font-size: 13px; color: #475569; }

/* GSB-MO-075 UI: customer pages opt in; staff review/dashboard retain their theme.
   Keep the wizard's hidden/checked/disabled behavior and submission names intact. */
.mobile-ui {
  --ui-bg: #f6f8fb;
  --ui-surface: #ffffff;
  --ui-text: #263547;
  --ui-muted: #657487;
  --ui-border: #d4dde8;
  --ui-accent: #2166c1;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.mobile-ui .order-wrap { padding: 24px 16px 40px; }
.mobile-ui .order-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  max-width: 480px;
  margin: 8px 0 24px;
  text-align: left;
}
.mobile-ui .order-logo-mark {
  grid-row: 1 / span 2;
  align-self: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 11px;
  background: #eaf1fc;
  color: var(--ui-accent);
  font-size: 15px;
  letter-spacing: -0.3px;
}
.mobile-ui .order-title { margin: 0; color: var(--ui-text); font-size: 23px; letter-spacing: -0.6px; }
.mobile-ui .order-subtitle { grid-column: 2; color: var(--ui-muted); font-size: 12px; }
.mobile-ui .user-bar {
  width: 100%; max-width: 480px; padding: 0 0 12px; margin: 0 0 12px;
  background: transparent; border: 0; border-bottom: 1px solid #e4eaf2; border-radius: 0;
}
.mobile-ui .user-bar-name { color: var(--ui-muted); font-size: 12px; }
.mobile-ui .user-bar-logout { min-height: 40px; padding: 7px 12px; color: var(--ui-text); border-radius: 8px; }
.mobile-ui .user-bar-role { background: #eaf0f8; color: #425b78; }

.mobile-ui .login-wrap { padding: 28px 20px; }
.mobile-ui .login-card,
.mobile-ui .order-form-card,
.mobile-ui .list-card {
  background: var(--ui-surface);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(38, 53, 71, 0.045);
}
.mobile-ui .login-card { padding: 32px 24px; }
.mobile-ui .login-logo { text-align: left; margin-bottom: 28px; }
.mobile-ui .login-logo-mark { width: 44px; height: 44px; background: #eaf1fc; color: var(--ui-accent); border-radius: 11px; font-size: 15px; }
.mobile-ui .login-title { color: var(--ui-text); font-size: 22px; letter-spacing: -0.6px; }
.mobile-ui .login-subtitle { color: var(--ui-muted); font-size: 12px; }
.mobile-ui .login-form { gap: 20px; }
.mobile-ui .login-footer { margin-top: 20px; color: var(--ui-muted); font-size: 12px; }
.mobile-ui .login-footer a { color: #49637f; text-underline-offset: 3px; }
.mobile-ui .order-form-card { max-width: 480px; padding: 24px 20px; }
.mobile-ui .list-card { padding: 24px 20px; }
.mobile-ui .form-field { gap: 8px; }
.mobile-ui .form-field label { color: var(--ui-text); font-size: 14px; font-weight: 600; }
.mobile-ui .form-field input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.mobile-ui .form-field select,
.mobile-ui .form-field textarea,
.mobile-ui .search-form input,
.mobile-ui .search-form select,
.mobile-ui .steel-picker-search {
  min-height: 48px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 12px 13px;
  background: #ffffff;
  color: var(--ui-text);
  font-size: 16px;
  font-family: inherit;
  box-shadow: none;
}
.mobile-ui input::placeholder,
.mobile-ui textarea::placeholder { color: #8693a4; opacity: 1; }
.mobile-ui .form-field input[readonly] { background: #f4f7fa; color: #52637a; }
.mobile-ui [data-action="open-steel-grade-picker"] { cursor: pointer; }
.mobile-ui .form-field input:focus,
.mobile-ui .form-field select:focus,
.mobile-ui .form-field textarea:focus,
.mobile-ui .steel-picker-search:focus {
  outline: 0; border-color: #759fd5; box-shadow: 0 0 0 3px rgba(33, 102, 193, 0.1);
}
.mobile-ui .field-hint { color: var(--ui-muted); font-size: 13px; line-height: 1.65; }
.mobile-ui .section-title { margin: 4px 0 16px; padding: 0; border: 0; color: var(--ui-text); font-size: 18px; letter-spacing: -0.4px; }
.mobile-ui .confirm-subtitle { margin-top: 24px; color: var(--ui-text); }
.mobile-ui .profile-box { padding: 16px; border: 0; border-radius: 12px; background: #f4f7fa; margin-bottom: 24px; }
.mobile-ui .profile-row { padding: 6px 0; }
.mobile-ui .profile-row dd { color: var(--ui-text); font-size: 14px; font-weight: 600; }
.mobile-ui .profile-row dt { color: var(--ui-muted); }
.mobile-ui .profile-edit { color: #49637f; text-underline-offset: 3px; }

.mobile-ui .order-menu { max-width: 480px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-ui .order-btn { min-height: 86px; padding: 16px; gap: 10px; border: 1px solid #e4eaf2; border-radius: 14px; box-shadow: none; color: var(--ui-text); font-size: 15px; }
.mobile-ui .order-btn[href="/order/new"] { grid-column: 1 / -1; min-height: 82px; border-color: #cedef5; color: var(--ui-accent); background: #edf4ff; font-size: 17px; }
.mobile-ui .order-btn-icon { font-size: 22px; }
.mobile-ui .order-btn:hover { transform: none; box-shadow: none; color: var(--ui-text); background: #f1f5fa; }
.mobile-ui .order-btn:active { transform: none; box-shadow: none; background: #eaf0f7; }
.mobile-ui .order-btn[data-coming-soon] { color: var(--ui-muted); }
.mobile-ui .wizard-steps { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #edf0f5; }
.mobile-ui .wizard-step-num { width: 30px; height: 30px; background: #edf1f6; color: #657487; font-size: 13px; }
.mobile-ui .wizard-step.is-active { color: var(--ui-accent); }
.mobile-ui .wizard-step.is-active .wizard-step-num { background: #e8f0fd; color: var(--ui-accent); border: 1px solid #c6d8f5; }
.mobile-ui .wizard-step.is-done .wizard-step-num { background: #edf2f7; color: #49637f; }
.mobile-ui .wizard-step.is-active em { font-weight: 700; }
.mobile-ui .items-container { gap: 22px; }
.mobile-ui .item-card { padding: 18px 16px; gap: 20px; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; }
.mobile-ui .item-card-header { padding-bottom: 12px; border-bottom: 1px solid #edf1f6; }
.mobile-ui .item-card-title { font-size: 15px; color: var(--ui-text); }
.mobile-ui .item-line-no { color: var(--ui-text); }
.mobile-ui .product-type-card { border: 1px solid var(--ui-border); color: var(--ui-text); background: #ffffff; border-radius: 10px; }
.mobile-ui .product-type-card.is-selected { border-color: #b4c8e3; color: #3d597b; background: #f0f5fc; }
.mobile-ui .product-type-card.is-selected .product-type-hint { color: #657487; opacity: 1; }
.mobile-ui .product-type-card input,
.mobile-ui .due-type-option input,
.mobile-ui .request-chip input { min-height: 0; padding: 0; }

/* The single due option reads as ordinary guidance, with no selection decoration. */
.mobile-ui .due-type-option,
.mobile-ui .due-type-option.is-selected {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  word-break: keep-all;
}
.mobile-ui .due-type-option::before { content: none; }
.mobile-ui .due-type-group--single .due-type-option { cursor: default; }
.mobile-ui .request-presets { gap: 8px; margin: 4px 0 12px; }
.mobile-ui .request-chip { min-height: 44px; padding: 9px 12px; gap: 8px; border: 1px solid #d4dde8; border-radius: 9px; background: #fafbfd; color: #526176; font-size: 13px; font-weight: 500; }
.mobile-ui .request-chip::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid #a5b2c2; border-radius: 3px; background: #ffffff; }
.mobile-ui .request-chip:has(input:checked) { border-color: #aebfd6; background: #edf3fa; color: #3c5576; }
.mobile-ui .request-chip:has(input:checked)::before { background: #6982a4; box-shadow: inset 0 0 0 2px #edf3fa; border-color: #6982a4; }
.mobile-ui .routing-panel { border-color: #d4dde8; background: #f7f9fc; border-radius: 12px; }
.mobile-ui .routing-chip { min-height: 44px; border: 1px solid #d4dde8; border-radius: 9px; background: #ffffff; color: #526176; }
.mobile-ui .routing-chip.is-selected,
.mobile-ui .routing-chip-heat.is-selected { border-color: #aebfd6; background: #edf3fa; color: #3c5576; }
.mobile-ui .routing-selected { background: #f0f4f9; color: #526176; font-weight: 500; }
.mobile-ui .confirm-item-card,
.mobile-ui .order-summary-card { background: #fafbfd; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: none; }
.mobile-ui .confirm-item-title { color: var(--ui-text); }
.mobile-ui .order-form-actions { gap: 10px; margin-top: 24px; }
.mobile-ui .btn-primary,
.mobile-ui .btn-secondary,
.mobile-ui .btn-ghost,
.mobile-ui .btn-login,
.mobile-ui .file-btn { min-height: 48px; border-radius: 10px; font-family: inherit; font-size: 15px; letter-spacing: -0.2px; }
.mobile-ui .btn-primary,
.mobile-ui .btn-login { background: var(--ui-accent); color: #ffffff; box-shadow: none; }
.mobile-ui .btn-primary:not(:disabled):hover,
.mobile-ui .btn-login:hover { background: #1957a7; }
.mobile-ui .btn-primary:disabled { background: #e5ebf2; color: #8693a4; box-shadow: none; }
.mobile-ui .btn-secondary,
.mobile-ui .file-btn { background: #ffffff; color: #526176; border: 1px solid var(--ui-border) !important; font-weight: 600; }
.mobile-ui .btn-ghost { background: transparent; color: #657487; border-color: #e2e8f0 !important; font-weight: 500; }
.mobile-ui .btn-secondary:hover,
.mobile-ui .file-btn:hover,
.mobile-ui .btn-ghost:hover { background: #f2f5f9; }
.mobile-ui [data-password-target] { align-self: flex-end; min-height: 36px; padding: 6px 10px; border: 0 !important; font-size: 12px; }
.mobile-ui .btn-danger { border-color: #ead4d1 !important; border-radius: 10px; }
.mobile-ui .btn-add-item { min-height: 48px; padding: 10px 14px; border: 1px solid #d4dde8; border-radius: 10px; background: #f7f9fc; color: #526176; font-family: inherit; font-weight: 600; }
.mobile-ui .btn-add-item:not(:disabled):hover { background: #edf2f7; }
.mobile-ui .steel-picker-sheet { border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(38, 53, 71, 0.12); }
.mobile-ui .steel-picker-header { border-color: #e4eaf2; }
.mobile-ui .steel-picker-header h3 { color: var(--ui-text); }
.mobile-ui .steel-picker-item:active { background: #edf3fa; }
.mobile-ui .draft-choice { background: #f7f9fc; border-color: #d4dde8; }
.mobile-ui :is(button, a, input, select, textarea):focus-visible,
.mobile-ui :is(.due-type-option, .request-chip, .product-type-card):focus-within { outline: 2px solid #759fd5; outline-offset: 3px; }
@media (max-width: 360px) {
  .mobile-ui .order-form-card, .mobile-ui .list-card { padding: 20px 14px; }
  .mobile-ui .item-card { padding: 16px 12px; }
  .mobile-ui .order-btn { padding: 14px 12px; gap: 8px; font-size: 14px; }
  .mobile-ui .order-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-ui *, .mobile-ui *::before, .mobile-ui *::after { transition: none !important; animation: none !important; }
}