.shipment-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.shipment-register-card,
.shipment-history-card,
.card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,28,49,.9) 0%, rgba(15,23,42,.96) 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.section-head h3 {
  margin: 0;
  font-size: 22px;
  color: #fff;
}
.section-head p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 13px;
}

.shipment-register-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field label {
  font-size: 13px;
  color: #d5e1f1;
  font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0a1426;
  color: #fff;
  padding: 0 14px;
}
.form-field textarea {
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}
.form-field small {
  color: var(--text-soft);
  font-size: 12px;
}
.action-field { justify-content: flex-end; }
.action-field .btn,
.tracking-actions .btn,
.history-filter-actions .btn {
  min-height: 46px;
}

.tracking-scan-actions,
.tracking-actions,
.history-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tracking-queue-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.tracking-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tracking-queue-count {
  color: #dbeafe;
  font-size: 13px;
  font-weight: 700;
}
.qr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qr-list-empty {
  text-align: center;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
  color: var(--text-soft);
}
.qr-list-item {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
}
.qr-list-text { flex: 1; word-break: break-all; white-space: normal; color: #dce7fb; }
.qr-list-remove {
  min-width: 72px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,.22);
  background: rgba(220,38,38,.14);
  color: #fff;
}

.history-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  margin-bottom: 18px;
}
.history-filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-filter-item label {
  font-size: 13px;
  color: #d5e1f1;
  font-weight: 700;
}
.history-filter-item input {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0a1426;
  color: #fff;
  padding: 0 14px;
}
.shipment-history-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: rgba(7,13,24,.74);
}
.shipment-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.shipment-history-table thead th {
  background: #14213a;
  color: #dbe7f8;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
}
.shipment-history-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: #edf4ff;
  font-size: 13px;
}
.shipment-history-table tbody tr:hover { background: rgba(255,255,255,.03); }
.empty-row { text-align: center; color: var(--text-soft); }

.scanner-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.76);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 9998;
}
.scanner-card {
  width: min(560px, 100%);
  background: #0f1726;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
}
.scanner-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.scanner-head h3 { margin: 0; }
#cameraQrVideo {
  width: 100%;
  border-radius: 16px;
  background: black;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.scanner-help {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .shipment-register-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .history-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .section-head,
  .tracking-queue-head,
  .tracking-scan-actions,
  .tracking-actions,
  .history-filter-actions,
  .scanner-head {
    flex-direction: column;
    align-items: stretch;
  }
  .shipment-register-grid {
    grid-template-columns: 1fr;
  }
  .qr-list-item {
    flex-direction: column;
    align-items: stretch;
  }
}

/* CAMERA_MODAL_AUTOFIT_STYLE_START */
#cameraQrModal.scanner-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  box-sizing: border-box;
}
#cameraQrModal.scanner-modal.hidden{
  display: none !important;
}
#cameraQrModal .scanner-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,10,18,.72);
}

#cameraQrModal .scanner-card{
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 24px));
  max-width: min(1120px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px 14px 12px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(16,26,46,.98) 0%, rgba(12,21,40,.98) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}

#cameraQrModal .scanner-head{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 2px;
  margin: 0;
  background: inherit;
  flex: 0 0 auto;
  min-height: 40px;
}
#cameraQrModal .scanner-head h3{
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 18px;
  line-height: 1.2;
}
#cameraQrModal #closeCameraQrBtn{
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
  padding: 0 16px;
}

#cameraQrModal #cameraQrVideo{
  display: block;
  width: 100%;
  height: var(--camera-video-fill-height, 420px);
  min-height: 260px;
  max-height: none;
  margin: 0 auto;
  border-radius: 16px;
  background: #000;
  object-fit: cover;
  object-position: center center;
  flex: 0 0 auto;
  aspect-ratio: auto !important;
}

#cameraQrModal #cameraQrCanvas{
  display: none !important;
}

#cameraQrModal .scanner-help{
  margin: 0;
  line-height: 1.4;
  flex: 0 0 auto;
  font-size: 14px;
}

#cameraQrModal #cameraControlsWrap{
  flex: 0 0 auto;
}

#cameraQrModal #cameraControlsWrap .scanner-lens-label{
  margin-bottom: 4px;
}

#cameraQrModal #cameraControlsWrap select,
#cameraQrModal #cameraControlsWrap button{
  min-height: 38px;
}

@media (min-width: 1024px){
  #cameraQrModal .scanner-card{
    width: min(1180px, calc(100vw - 32px));
    max-width: min(1180px, calc(100vw - 32px));
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 10px 14px 12px;
    gap: 8px;
  }
  #cameraQrModal .scanner-head{
    min-height: 36px;
    padding-bottom: 0;
  }
  #cameraQrModal .scanner-head h3{
    font-size: 17px;
  }
  #cameraQrModal #closeCameraQrBtn{
    min-height: 36px;
    padding: 0 14px;
  }
  #cameraQrModal .scanner-help{
    font-size: 13px;
  }
}

@media (max-width: 768px){
  #cameraQrModal.scanner-modal{
    padding: 6px;
  }
  #cameraQrModal .scanner-card{
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 8px 10px 10px;
    gap: 8px;
    border-radius: 16px;
  }
  #cameraQrModal .scanner-head{
    min-height: 34px;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    justify-items: stretch;
  }
  #cameraQrModal .scanner-head h3{
    font-size: 16px;
    text-align: center;
  }
  #cameraQrModal #closeCameraQrBtn{
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
  }
  #cameraQrModal #cameraQrVideo{
    min-height: 280px;
    border-radius: 14px;
  }
  #cameraQrModal .scanner-help{
    font-size: 13px;
    line-height: 1.35;
  }
}

@media (max-width: 420px){
  #cameraQrModal .scanner-card{
    padding: 7px 9px 9px;
    gap: 7px;
  }
  #cameraQrModal .scanner-head h3{
    font-size: 15px;
  }
  #cameraQrModal #closeCameraQrBtn{
    padding: 0 12px;
  }
}
/* CAMERA_MODAL_AUTOFIT_STYLE_END */

/* TRACKING_MODAL_STACK_CLEAN_V4 START
   출고/조회 관련 모달 계층 단일 기준:
   cameraQrModal < shipmentFilterModal < detailModal < trackingQueueModal/trackingSaveModal < trackingPrecheckIssueModalV5
*/
#cameraQrModal.scanner-modal {
  z-index: 2147483000;
}

#shipmentFilterModal.detail-modal {
  z-index: 2147483100;
}

#detailModal.detail-modal {
  z-index: 2147483200;
}

#trackingQueueModal.detail-modal,
#trackingSaveModal.detail-modal {
  z-index: 2147483400;
}

#detailModal .detail-backdrop,
#shipmentFilterModal .detail-backdrop,
#trackingQueueModal .detail-backdrop,
#trackingSaveModal .detail-backdrop {
  z-index: 0;
}

#detailModal .detail-panel,
#shipmentFilterModal .detail-panel,
#trackingQueueModal .detail-panel,
#trackingSaveModal .detail-panel {
  position: relative;
  z-index: 1;
}

#trackingPrecheckIssueModalV5.tracking-precheck-backdrop-v5 {
  z-index: 2147483647;
}
/* TRACKING_MODAL_STACK_CLEAN_V4 END */


/* DISTRIBUTION_RULES_AND_STATUS_FIX_V1 START */
#frontToastHostV1,
.front-toast-host-v1{
  display: none !important;
}

#trackingSaveDirectDeliveryField.hidden{
  display: none !important;
}
#trackingSaveDirectDeliveryField .checkbox-inline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
}
#trackingSaveDirectDeliveryField .field-help{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #9fb2d9;
}

#trackingDmStatus{
  position: relative;
  z-index: 2147483646;
}
/* DISTRIBUTION_RULES_AND_STATUS_FIX_V1 END */

/* TRACKING_MODAL_STATUS_FIX_V5 START */
.tracking-modal-status-v5{
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.tracking-modal-status-v5.hidden{
  display: none !important;
}

.tracking-modal-status-v5[data-state="info"]{
  background: rgba(23,49,84,.96);
  color: #ffffff;
}

.tracking-modal-status-v5[data-state="success"]{
  background: rgba(21,112,69,.96);
  color: #ffffff;
}

.tracking-modal-status-v5[data-state="error"]{
  background: rgba(185,28,28,.96);
  color: #ffffff;
}
/* TRACKING_MODAL_STATUS_FIX_V5 END */


/* TRACKING_QUEUE_MODAL_CENTER_V5 START
   사진 DM 결과 패널에서 "스캔 목록 보기" 클릭 시
   trackingQueueModal이 PC/모바일 모두 화면 중앙에 뜨도록 정렬한다.
*/
#trackingQueueModal.detail-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100dvh;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#trackingQueueModal.detail-modal:not(.hidden) {
  display: flex;
}

#trackingQueueModal.detail-modal .detail-panel {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(720px, calc(100vw - 40px));
  max-height: min(88dvh, 900px);
  transform: none;
}

@media (max-width: 640px) {
  #trackingQueueModal.detail-modal {
    padding: 12px;
    align-items: center;
    justify-content: center;
  }

  #trackingQueueModal.detail-modal .detail-panel {
    width: min(96vw, 720px);
    max-height: 92dvh;
    margin: auto;
  }
}
/* TRACKING_QUEUE_MODAL_CENTER_V5 END */