:root {
  --blue: #1769aa;
  --navy: #17324d;
  --line: #aeb9c3;
  --sky: #cfefff;
  --yellow: #fff1a8;
  --redbg: #ffd8d8;
  --bg: #eef2f5;
  --text: #18212b;
  --pink: #ff5a9e;
  --modified: #d90000;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  font-family: "Malgun Gothic", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
}
.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px #0003;
}
.home-btn {
  min-width: 160px;
  height: 64px;
  border: 3px solid #fff;
  border-radius: 13px;
  background: #ffce40;
  color: #18212b;
  font-size: 27px;
  font-weight: 900;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  font-size: 22px;
}
.brand b {
  font-size: 29px;
}
.role-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.role-area button {
  height: 50px;
  padding: 0 18px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
}
.role-area button.office {
  background: #45b36b;
  color: #fff;
}
.page {
  padding: 16px;
  max-width: 1900px;
  margin: auto;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.primary,
.secondary,
.danger,
.success {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  font-weight: 900;
}
.primary {
  background: var(--blue);
  color: #fff;
}
.secondary {
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
}
.danger {
  background: #c83f3f;
  color: #fff;
}
.success {
  background: #238b45;
  color: #fff;
}
.search {
  height: 52px;
  min-width: 300px;
  padding: 0 14px;
  border: 2px solid #8291a0;
  border-radius: 10px;
  background: #fff;
}
.spacer {
  flex: 1;
}
.panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px #22334418;
  overflow: hidden;
}
.table-wrap {
  max-height: calc(100vh - 178px);
  overflow: auto;
  overscroll-behavior: contain;
}
.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1180px;
}
.grid th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #dce5ec;
  color: #10283c;
  border-right: 1px solid #9eacb8;
  border-bottom: 2px solid #8291a0;
  padding: 12px 8px;
  text-align: center;
  white-space: nowrap;
}
.grid td {
  border-right: 1px solid #c8d0d7;
  border-bottom: 1px solid #c8d0d7;
  padding: 10px 8px;
  text-align: center;
  height: 60px;
}
.grid tbody tr {
  background: #fff;
}
.grid tbody tr:hover {
  filter: brightness(0.98);
}
.grid tr.completed {
  background: var(--sky);
}
.grid tr.working {
  background: var(--yellow);
}
.grid tr.defect {
  background: var(--redbg);
}
.grid tr.clickable {
  cursor: pointer;
}
.check {
  width: 30px;
  height: 30px;
}
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 5px 11px;
  border-radius: 18px;
  font-weight: 900;
  white-space: nowrap;
  background: #e5e9ed;
}
.status.done {
  background: #36a8e0;
  color: #fff;
}
.status.work {
  background: #e2a300;
  color: #fff;
}
.status.bad {
  background: #d94848;
  color: #fff;
}
.order-mixed {
  color: var(--pink) !important;
  font-weight: 900;
}
.modified {
  color: var(--modified) !important;
  font-weight: 900 !important;
}
.modified-badge {
  display: inline-block;
  color: #fff;
  background: var(--modified);
  font-size: 12px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.process-cell {
  font-weight: 900;
  font-size: 19px;
}
.arrow-btn {
  width: 46px;
  height: 44px;
  margin: 2px;
  border: 1px solid #80909f;
  border-radius: 8px;
  background: #fff;
  font-size: 20px;
}
.muted {
  color: #687887;
}
.empty {
  padding: 55px 20px;
  text-align: center;
}
.empty h2 {
  font-size: 26px;
}
.bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #17324df2;
  color: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
}
.bulkbar button {
  min-height: 50px;
}
.document-head {
  background: #fff;
  border: 1px solid #9ba7b2;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.doc-row {
  display: grid;
  border-bottom: 1px solid #b7c0c8;
  min-height: 64px;
  align-items: center;
}
.doc-row:last-child {
  border-bottom: 0;
}
.doc-top {
  grid-template-columns: 130px minmax(260px, 1fr) 110px;
}
.doc-main {
  grid-template-columns: 150px 1fr 180px;
}
.doc-sub {
  grid-template-columns: 90px 240px 90px 1fr;
}
.doc-cell {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-right: 1px solid #b7c0c8;
  font-weight: 800;
}
.doc-cell:last-child {
  border-right: 0;
}
.doc-label {
  font-size: 22px;
  color: #e00000;
}
.doc-title {
  font-size: 27px;
  color: #e00000;
}
.doc-no {
  font-size: 31px;
  color: #0a39d7;
}
.doc-customer {
  font-size: 34px;
  justify-content: center;
}
.doc-workno {
  font-size: 34px;
  color: #0a39d7;
  justify-content: center;
}
.doc-small {
  font-size: 19px;
}
.instruction-grid {
  min-width: 1400px;
}
.instruction-grid td {
  height: 64px;
}
.spec-cell {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 900;
}
.spec-cell .x {
  padding: 0 7px;
  color: #555;
}
.kind-cell {
  font-weight: 900;
}
.qty-cell {
  font-weight: 900;
  font-size: 18px;
}
.bulk-note {
  font-size: 13px;
}
.modal-back {
  position: fixed;
  inset: 0;
  background: #0008;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.modal {
  background: #fff;
  border-radius: 16px;
  width: min(920px, 100%);
  max-height: 95vh;
  overflow: auto;
  box-shadow: 0 10px 40px #0005;
}
.modal.wide {
  width: min(1450px, 100%);
}
.modal-head {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.modal-head h2 {
  margin: 0;
  flex: 1;
}
.close {
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 10px;
  font-size: 26px;
}
.modal-body {
  padding: 18px;
}
.modal-foot {
  position: sticky;
  bottom: 0;
  background: #f2f5f7;
  border-top: 1px solid #ccd5dc;
  padding: 12px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.field label {
  display: block;
  font-weight: 900;
  margin-bottom: 5px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 2px solid #9aa9b7;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  min-height: 50px;
}
.field textarea {
  min-height: 92px;
}
.paste-area {
  width: 100%;
  min-height: 210px;
  border: 3px dashed #6e8ca5;
  border-radius: 12px;
  padding: 12px;
  font-family: Consolas, "Malgun Gothic", monospace;
}
.preview {
  max-height: 410px;
  overflow: auto;
  border: 1px solid #aeb9c3;
  margin-top: 10px;
}
.preview table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.preview th,
.preview td {
  border: 1px solid #c4ccd3;
  padding: 7px;
  text-align: center;
}
.hint {
  background: #eef7ff;
  border-left: 5px solid #2685c7;
  padding: 11px 13px;
  margin: 10px 0;
}
.errorbox {
  background: #fff0f0;
  border-left: 5px solid #d34343;
  padding: 10px;
  margin: 10px 0;
}
.status-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.status-buttons button {
  min-height: 67px;
  border: 3px solid #aab5bf;
  border-radius: 12px;
  background: #fff;
  font-weight: 900;
  font-size: 19px;
}
.status-buttons button.sel {
  border-color: #1769aa;
  background: #d8efff;
}
.site-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.site-buttons button {
  min-height: 62px;
  border: 3px solid #aab5bf;
  background: #fff;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
}
.site-buttons button.sel {
  background: #1769aa;
  color: #fff;
}
.num-input {
  cursor: pointer;
  background: #fffce0 !important;
  font-size: 23px;
  font-weight: 900;
  text-align: center;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
}
.keypad button {
  height: 68px;
  border: 1px solid #8a9aa8;
  border-radius: 11px;
  background: #fff;
  font-size: 26px;
  font-weight: 900;
}
.keypad .enter {
  background: #238b45;
  color: #fff;
}
.keypad-display {
  font-size: 32px;
  font-weight: 900;
  text-align: right;
  padding: 12px;
  border: 3px solid #1769aa;
  border-radius: 10px;
  background: #f8fcff;
}
.office-only {
  display: none !important;
}
body.office .office-only {
  display: inline-flex !important;
}
body.office th.office-only,
body.office td.office-only {
  display: table-cell !important;
}
body.office .office-block {
  display: block;
}
body:not(.office) .office-block {
  display: none;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #152638;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  font-weight: 800;
}
#toast.show {
  opacity: 1;
}
.readonly {
  background: #edf1f4 !important;
}
.small {
  font-size: 13px;
}
.nowrap {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .topbar {
    height: 76px;
    padding: 6px;
  }
  .home-btn {
    min-width: 130px;
    height: 62px;
    font-size: 24px;
  }
  .brand span {
    display: none;
  }
  .role-area #syncTime {
    display: none;
  }
  .page {
    padding: 8px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .status-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .doc-top {
    grid-template-columns: 95px 1fr 80px;
  }
  .doc-main {
    grid-template-columns: 100px 1fr 130px;
  }
  .doc-sub {
    grid-template-columns: 70px 1fr;
  }
  .doc-title {
    font-size: 20px;
  }
  .doc-customer,
  .doc-workno {
    font-size: 26px;
  }
}

.defect-badge,.received-badge{display:inline-block;margin-left:5px;padding:3px 7px;border-radius:9px;font-size:12px;font-weight:900;vertical-align:middle}.defect-badge{background:var(--sky);color:#073b55;border:1px solid #55b9e8}.received-badge{background:#137a44;color:#fff}.mini{min-height:38px;padding:0 12px}.defect-received-box{margin-top:14px;padding:14px;border:2px solid #d94848;border-radius:10px;background:#fff4f4;font-size:20px;font-weight:900}.defect-received-box input{width:30px;height:30px;vertical-align:middle}.defect-received-box small{display:block;margin-top:6px;color:#555;font-size:14px;font-weight:400}

/* 반복 불량 처리 */
.defect-section{margin-top:20px;padding:16px;border:2px solid #55b9e8;border-radius:12px;background:#f5fbff}
.section-title{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.section-title h3{margin:0}
.active-defect-alert{margin-top:14px;padding:14px;border:2px solid #55b9e8;border-radius:10px;background:#dff3ff;color:#073b55;font-size:18px;font-weight:900}
.defect-history{display:grid;gap:10px;margin-top:12px}
.defect-event{padding:13px;border:1px solid #b9c7d3;border-radius:10px;background:#fff}
.defect-event.pending{border:2px solid #55b9e8;background:#ecf8ff}
.defect-event.received{border-color:#83c7a1;background:#f4fff8}
.defect-event-head{display:flex;justify-content:space-between;gap:10px;font-size:18px}
.defect-event.pending .defect-event-head span{color:#0875a8;font-weight:900}
.defect-event.received .defect-event-head span{color:#137a44;font-weight:900}
.defect-reasons{margin-top:7px;font-weight:900;line-height:1.55}
.defect-note{margin-top:7px;padding:8px;background:#fff;border-radius:7px;white-space:pre-wrap}
.defect-meta{margin-top:6px;color:#596b78;font-size:13px}
.receive-btn{width:100%;margin-top:10px;min-height:50px;font-size:18px}
.defect-empty{margin-top:12px;padding:18px}
.field small{display:block;margin-top:5px;color:#5b6872}

/* 요청사항 32~39: 사원선택, 세로형 현장화면, 전체 페이지 스크롤 */
.job-table-wrap {
  max-height: none;
  overflow: visible;
}
.instruction-panel {
  overflow: visible;
}
.instruction-panel .bulkbar {
  position: static;
  flex-wrap: wrap;
}
.instruction-grid {
  width: 100%;
  min-width: 1260px;
  font-size: 19px;
}
.instruction-grid th {
  position: static;
  font-size: 18px;
  padding: 13px 6px;
}
.instruction-grid td {
  height: 76px;
  padding: 10px 6px;
  font-size: 19px;
}
.instruction-grid .kind-cell,
.instruction-grid .spec-cell,
.instruction-grid .qty-cell {
  font-size: 22px;
  line-height: 1.25;
}
.instruction-mobile {
  display: none;
}
.completion-box {
  margin-top: 15px;
  padding: 15px;
  border: 3px solid #1769aa;
  border-radius: 12px;
  background: #eef8ff;
}
.completion-box h3 {
  margin: 0 0 12px;
}
.required {
  display: inline-block;
  padding: 3px 8px;
  margin-left: 5px;
  border-radius: 8px;
  background: #d63b3b;
  color: #fff;
  font-size: 13px;
}
.employee-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  margin: 10px 0 15px;
}
.employee-buttons button {
  min-height: 64px;
  border: 3px solid #9aa9b7;
  border-radius: 12px;
  background: #fff;
  font-size: 21px;
  font-weight: 900;
}
.employee-buttons button.sel {
  border-color: #1769aa;
  background: #1769aa;
  color: #fff;
}
.touch-text {
  min-height: 115px !important;
  background: #fffdf0 !important;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
}
.employee-edit-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.employee-edit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.employee-edit-row input {
  min-height: 54px;
  padding: 10px 13px;
  border: 2px solid #9aa9b7;
  border-radius: 10px;
  font-size: 20px;
}
.keyboard-modal {
  width: min(1050px, 100%);
}
.vk-display {
  width: 100%;
  min-height: 135px;
  resize: none;
  border: 3px solid #1769aa;
  border-radius: 12px;
  padding: 14px;
  font-size: 24px;
  font-weight: 700;
  background: #fff;
}
.vk-modes {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.vk-modes button {
  min-height: 50px;
  padding: 0 18px;
  border: 2px solid #8495a4;
  border-radius: 10px;
  background: #fff;
  font-weight: 900;
}
.vk-modes button.sel {
  background: #1769aa;
  color: #fff;
}
.virtual-keyboard {
  display: grid;
  gap: 8px;
}
.vk-row {
  display: flex;
  justify-content: center;
  gap: 7px;
}
.vk-row button {
  flex: 1 1 0;
  max-width: 88px;
  min-width: 52px;
  min-height: 62px;
  border: 2px solid #8797a5;
  border-radius: 10px;
  background: #fff;
  font-size: 23px;
  font-weight: 900;
}
.vk-special button {
  max-width: none;
  font-size: 18px;
}
.vk-special .space {
  flex: 3 1 0;
}
.defect-form {
  margin-top: 12px;
}

@media (orientation: portrait), (max-width: 1050px) {
  html, body {
    font-size: 18px;
    height: auto;
    min-height: 100%;
  }
  .topbar {
    min-height: 88px;
    height: auto;
    gap: 8px;
    padding: 7px;
  }
  .home-btn {
    min-width: 142px;
    height: 70px;
    font-size: 27px;
  }
  .brand {
    min-width: 0;
  }
  .brand b {
    font-size: 23px;
  }
  .role-area button {
    min-width: 122px;
    height: 58px;
    padding: 0 8px;
    font-size: 16px;
  }
  .page {
    padding: 7px;
    max-width: none;
  }
  .document-head {
    width: 100%;
  }
  .doc-top {
    grid-template-columns: 115px minmax(0, 1fr) 75px;
  }
  .doc-main {
    grid-template-columns: 105px minmax(0, 1fr) 105px;
  }
  .doc-sub {
    grid-template-columns: 75px minmax(0, 1fr);
  }
  .doc-cell {
    padding: 8px 7px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .doc-label,
  .doc-small {
    font-size: 17px;
  }
  .doc-title {
    font-size: 23px;
  }
  .doc-no,
  .doc-customer,
  .doc-workno {
    font-size: 24px;
  }
  .instruction-desktop {
    display: none;
  }
  .instruction-mobile {
    display: block;
  }
  .mobile-select-all {
    padding: 12px;
    border-bottom: 2px solid #8291a0;
    background: #dce5ec;
  }
  .mobile-select-all label {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 20px;
  }
  .item-card {
    padding: 14px 12px;
    border-bottom: 2px solid #aeb9c3;
    background: #fff;
    cursor: pointer;
  }
  .item-card.completed { background: var(--sky); }
  .item-card.working { background: var(--yellow); }
  .item-card.defect { background: var(--redbg); }
  .item-card-main {
    display: grid;
    grid-template-columns: 42px 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  .item-card-no {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
  }
  .item-card-kind {
    min-width: 0;
    font-size: 25px;
    font-weight: 900;
    overflow-wrap: anywhere;
  }
  .item-card-qty {
    font-size: 24px;
    font-weight: 900;
    white-space: nowrap;
  }
  .item-card-spec {
    margin: 10px 0;
    padding: 9px;
    border-radius: 8px;
    background: #f4f6f8;
    text-align: center;
    font-size: clamp(25px, 5vw, 34px);
    font-weight: 900;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  .item-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 18px;
  }
  .item-card-status > b {
    margin-left: auto;
    font-size: 19px;
  }
  .item-card-extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
  }
  .item-card-extra span {
    overflow-wrap: anywhere;
  }
  .item-card-meta {
    margin-top: 8px;
    color: #586a78;
    font-size: 15px;
    text-align: right;
  }
  .bulkbar {
    position: static;
    padding: 10px;
  }
  .bulkbar button {
    flex: 1 1 45%;
    min-height: 58px;
    font-size: 18px;
  }
  .bulkbar .bulk-note {
    width: 100%;
  }
  .modal-back {
    padding: 5px;
    align-items: flex-start;
    overflow-y: auto;
  }
  .modal {
    width: 100%;
    max-height: none;
    border-radius: 10px;
  }
  .modal-head h2 {
    font-size: 22px;
  }
  .modal-body {
    padding: 12px;
  }
  .status-buttons button,
  .employee-buttons button {
    min-height: 68px;
    font-size: 21px;
  }
  .field label {
    font-size: 19px;
  }
  .num-input,
  .field textarea,
  .field input {
    font-size: 21px;
  }
  .vk-row {
    gap: 4px;
  }
  .vk-row button {
    min-width: 0;
    min-height: 60px;
    padding: 0;
    font-size: 22px;
  }
  .vk-special {
    flex-wrap: wrap;
  }
  .vk-special button {
    flex: 1 1 30%;
    font-size: 17px;
  }
  .vk-special .space {
    flex: 1 1 45%;
  }
}

.home-mobile { display: none; }
@media (orientation: portrait), (max-width: 1050px) {
  .home-desktop { display: none; }
  .home-mobile { display: block; }
  .toolbar .search {
    order: 3;
    width: 100%;
    min-width: 0;
    font-size: 19px;
  }
  .toolbar h2 { font-size: 23px; }
  .toolbar .spacer { display: none; }
  .toolbar > button {
    flex: 1 1 auto;
    min-height: 56px;
  }
  .home-card {
    padding: 13px 11px;
    border-bottom: 2px solid #aeb9c3;
    background: #fff;
    cursor: pointer;
  }
  .home-card.completed { background: var(--sky); }
  .home-card-top {
    display: grid;
    grid-template-columns: auto 42px minmax(70px, .7fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 8px;
  }
  body:not(.office) .home-card-top {
    grid-template-columns: 42px minmax(70px, .7fr) minmax(0, 1.5fr);
  }
  .home-card-seq {
    text-align: center;
    font-size: 21px;
  }
  .home-card-work {
    font-size: 23px;
    white-space: nowrap;
  }
  .home-card-customer {
    min-width: 0;
    font-size: 23px;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .home-card-order {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 9px;
    border-radius: 8px;
    background: #f1f5f8;
    font-size: 18px;
  }
  .home-card-order > b { font-size: 24px; }
  .home-card-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }
  .home-card-process span {
    padding: 7px 5px;
    border: 1px solid #b7c2cb;
    border-radius: 7px;
    background: #fff;
    text-align: center;
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  .home-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
  }
  .home-card-bottom > span:first-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* 요청사항 40·50~58: 작업순서 너비, 방부, 인쇄, 휴대폰 보기 */
.home-grid {
  table-layout: fixed;
  min-width: 1120px;
}
.home-grid .col-check { width: 42px; }
.home-grid .col-seq { width: 48px; }
.home-grid .col-work { width: 72px; }
.home-grid .col-customer { width: 112px; }
.home-grid .col-order { width: 98px; }
.home-grid .col-process { width: 62px; }
.home-grid .col-note { width: 88px; }
.home-grid .col-progress { width: 72px; }
.home-grid .col-pres { width: 82px; }
.home-grid .col-action { width: 62px; }
.home-grid .col-ordering { width: 102px; }
.home-grid td {
  padding-left: 4px;
  padding-right: 4px;
  overflow-wrap: anywhere;
}
.home-grid .process-cell { font-size: 17px; }
.preservation {
  min-height: 38px;
  min-width: 70px;
  padding: 4px 8px;
  border: 2px solid #95a2ad;
  border-radius: 9px;
  background: #e9edf0;
  font-weight: 900;
  white-space: nowrap;
}
.preservation.pres-work { background: #ffe394; border-color: #c99600; color: #684c00; }
.preservation.pres-done { background: #2f9e5b; border-color: #1e7440; color: #fff; }
.network-address {
  padding: 18px;
  border: 3px solid #1769aa;
  border-radius: 12px;
  background: #f3faff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.8;
  word-break: break-all;
}

/* 휴대폰 보기 전용 */
body.mobile-readonly .role-area,
body.mobile-readonly .toolbar:not(.mobile-view-toolbar) button,
body.mobile-readonly .mobile-select-all,
body.mobile-readonly .office-only { display: none !important; }
body.mobile-readonly .topbar { height: 64px; min-height: 64px; }
body.mobile-readonly .home-btn { min-width: 100px; height: 52px; font-size: 21px; }
body.mobile-readonly .brand b { font-size: 22px; }
body.mobile-readonly .brand span { display: inline; font-size: 15px; }
body.mobile-readonly .toolbar .search { display: block; width: 100%; }
body.mobile-readonly .home-card-bottom .preservation { pointer-events: none; }
.mobile-view-toolbar { align-items: center; }
.mobile-view-toolbar h2 { margin: 0; font-size: 21px; }
.mobile-readonly-list { overflow: hidden; }
.mobile-ro-item {
  padding: 11px 10px;
  border-bottom: 2px solid #aeb9c3;
  background: #fff;
}
.mobile-ro-item.completed { background: var(--sky); }
.mobile-ro-item.working { background: var(--yellow); }
.mobile-ro-item.defect { background: var(--redbg); }
.mobile-ro-line {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px dashed #cbd3da;
  flex-wrap: wrap;
}
.mobile-ro-line:last-child { border-bottom: 0; }
.mobile-ro-main {
  display: grid;
  grid-template-columns: 38px minmax(55px,.7fr) minmax(125px,1.6fr) auto;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}
.mobile-ro-main b:nth-child(3) { text-align: center; }
.mobile-ro-details {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  font-size: 14px;
  font-weight: 700;
}
.mobile-ro-details span,
.mobile-ro-meta span { min-width: 0; overflow-wrap: anywhere; }
.mobile-ro-meta {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  color: #50616f;
  font-size: 13px;
}
@media (max-width: 520px) {
  body.mobile-readonly .page { padding: 5px; }
  body.mobile-readonly .document-head { margin-bottom: 6px; }
  .mobile-ro-main { font-size: 17px; grid-template-columns: 28px minmax(42px,.6fr) minmax(115px,1.8fr) auto; gap: 5px; }
  .mobile-ro-details { grid-template-columns: repeat(2,minmax(0,1fr)); font-size: 13px; }
  .mobile-ro-meta { grid-template-columns: 1fr; font-size: 12px; }
}

/* 인쇄 */
@media print {
  html, body { background: #fff !important; height: auto !important; font-size: 10pt !important; }
  .topbar, .toolbar, .bulkbar, .no-print, #toast, #modalRoot { display: none !important; }
  .page { padding: 0 !important; max-width: none !important; }
  .panel, .document-head { box-shadow: none !important; border-radius: 0 !important; }
  .table-wrap, .job-table-wrap { max-height: none !important; overflow: visible !important; }
  .grid th { position: static !important; }
  .home-mobile, .instruction-mobile { display: none !important; }
  .home-desktop, .instruction-desktop { display: block !important; }
  .grid tr, .grid td, .grid th { break-inside: avoid; }
  body.print-home .document-head,
  body.print-home .instruction-panel { display: none !important; }
  body.print-home .home-grid {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 8pt !important;
  }
  body.print-home .home-grid th,
  body.print-home .home-grid td { padding: 4px 2px !important; height: 28px !important; }
  body.print-job .home-desktop,
  body.print-job .home-mobile { display: none !important; }
  body.print-job .instruction-grid {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 9pt !important;
  }
  body.print-job .instruction-grid th,
  body.print-job .instruction-grid td { padding: 5px 3px !important; height: 30px !important; font-size: 9pt !important; }
  body.print-job .instruction-grid th:nth-child(2),
  body.print-job .instruction-grid td:nth-child(2) { width: 5% !important; }
  body.print-job .instruction-grid th:nth-child(3),
  body.print-job .instruction-grid td:nth-child(3) { width: 14% !important; }
  body.print-job .instruction-grid th:nth-child(4),
  body.print-job .instruction-grid td:nth-child(4) { width: 24% !important; white-space: nowrap !important; }
  body.print-job .instruction-grid th:nth-child(5),
  body.print-job .instruction-grid td:nth-child(5) { width: 9% !important; }
  body.print-job .instruction-grid th:nth-child(6),
  body.print-job .instruction-grid td:nth-child(6),
  body.print-job .instruction-grid th:nth-child(7),
  body.print-job .instruction-grid td:nth-child(7),
  body.print-job .instruction-grid th:nth-child(8),
  body.print-job .instruction-grid td:nth-child(8) { width: 8% !important; }
  body.print-job .instruction-grid th:nth-child(9),
  body.print-job .instruction-grid td:nth-child(9) { width: 24% !important; white-space: normal !important; overflow-wrap: anywhere; }
  body.print-job .document-head { margin-bottom: 5px !important; }
  body.print-job .doc-row { min-height: 35px !important; }
  body.print-job .doc-cell { padding: 4px 7px !important; font-size: 11pt !important; }
  body.print-job thead { display: table-header-group; }
}
body.mobile-readonly .home-desktop { display: none !important; }
body.mobile-readonly .home-mobile { display: block !important; }
@media print {
  body.office .no-print,
  body.office th.no-print,
  body.office td.no-print { display: none !important; }
}


/* 요청사항 59~60: 방부 변경시간 및 휴대폰 기존 메타 표시 */
.preservation {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 78px;
  min-height: 46px;
}
.preservation small {
  display: block;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
  white-space: normal;
}
.preservation-times {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.preservation-times > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #b9c5cf;
  border-radius: 10px;
  background: #f7fafc;
}
.preservation-times span { font-weight: 800; color: #38516a; }
.preservation-times b { font-size: 18px; }
.mobile-ro-meta.legacy-meta {
  display: grid;
  gap: 7px;
  padding-top: 9px;
}
.mobile-ro-meta.legacy-meta > div {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 8px;
  align-items: start;
}
.mobile-ro-meta.legacy-meta b { color: #31516e; }
.mobile-ro-meta.legacy-meta span { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 720px) {
  .preservation small { font-size: 9px; }
  .preservation-times > div { grid-template-columns: 1fr; gap: 3px; }
}


/* 요청사항 62: 사무실 전용 출고예정일(S열) */
.home-grid .col-delivery { width: 94px; }
.delivery-cell {
  font-weight: 900;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #17324d;
}
.delivery-card {
  padding: 6px 8px;
  border: 1px solid #9fb2c2;
  border-radius: 8px;
  background: #f3f8fb;
  font-weight: 900;
  white-space: nowrap;
}

/* 요청사항 63: 외부 휴대폰 보기 */
.viewer-login-wrap {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: 18px;
  background: linear-gradient(180deg, #eef2f5, #dce5ec);
}
.viewer-login-card {
  width: min(430px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 35px #17324d30;
  padding: 28px 22px;
  text-align: center;
}
.viewer-logo {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #ffce40;
  color: #17324d;
  font-size: 23px;
  font-weight: 1000;
  letter-spacing: -.5px;
}
.viewer-login-card h1 { margin: 0 0 8px; font-size: 27px; }
.viewer-login-card p { margin: 0 0 20px; color: #5b6b78; line-height: 1.5; }
.viewer-login-card input {
  width: 100%;
  height: 60px;
  border: 3px solid #8aa0b3;
  border-radius: 12px;
  padding: 0 16px;
  text-align: center;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 5px;
  margin-bottom: 12px;
}
.viewer-login-card button { width: 100%; min-height: 60px; font-size: 20px; }
.viewer-login-card small { display: block; margin-top: 15px; color: #6d7b87; }
body.viewer-locked .topbar { display: none !important; }
body.external-viewer .brand span::after { content: " · 외부보기"; }
body.external-viewer .home-btn { min-width: 88px; }
.external-modal { width: min(780px, 100%); }
.external-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.external-status-grid > div {
  display: grid;
  gap: 7px;
  min-height: 86px;
  place-content: center;
  text-align: center;
  border: 2px solid #c5d0d8;
  border-radius: 11px;
  background: #f7f9fb;
}
.external-status-grid span { color: #607282; font-size: 14px; }
.ok-text { color: #17833b; }
.bad-text { color: #c83f3f; }
.external-url {
  margin: 14px 0 8px;
  padding: 17px 12px;
  border: 3px solid #1769aa;
  border-radius: 12px;
  background: #edf8ff;
  text-align: center;
  font-size: 21px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.external-actions, .external-foot { display: flex; gap: 9px; flex-wrap: wrap; }
.warn-box {
  margin: 12px 0;
  padding: 12px;
  border-radius: 10px;
  background: #ffe4e4;
  color: #a60000;
  font-weight: 800;
}
@media (max-width: 650px) {
  .external-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .external-actions button, .external-foot button { flex: 1 1 100%; }
}

/* 긴급공지 + 홈 화면 글씨 확대 + 당일 출고예정일 강조 */
:root { --urgent-height: 0px; }
#noticeRoot {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  background: #b60000;
  box-shadow: 0 4px 14px #0005;
}
#noticeRoot:empty { display: none; }
#app { padding-top: var(--urgent-height); }
.topbar { top: var(--urgent-height); z-index: 900; }
.urgent-notice {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  color: #fff;
  background: #c90000;
  border-bottom: 5px solid #740000;
}
.urgent-icon {
  flex: 0 0 auto;
  min-width: 84px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 10px;
  background: #7b0000;
  font-size: 25px;
  font-weight: 1000;
}
.urgent-content { flex: 1; min-width: 0; }
.urgent-message {
  font-size: 25px;
  line-height: 1.35;
  font-weight: 1000;
  overflow-wrap: anywhere;
}
.urgent-meta {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 800;
  color: #ffe2e2;
}
.urgent-office-controls,
.urgent-confirm-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.urgent-confirm-controls select {
  min-width: 160px;
  height: 58px;
  padding: 0 12px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #172b3d;
  font-size: 20px;
  font-weight: 900;
}
.urgent-confirm,
.urgent-edit,
.urgent-clear,
.urgent-toolbar {
  min-height: 54px;
  padding: 0 18px;
  border: 3px solid #fff;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 1000;
}
.urgent-confirm { background: #ffdd3a; color: #151515; }
.urgent-confirm:disabled { background: #d6d6d6; color: #555; }
.urgent-edit { background: #fff; color: #9b0000; }
.urgent-clear { background: #520000; color: #fff; }
.urgent-toolbar { background: #cf0000; color: #fff; }
.urgent-textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 14px;
  border: 3px solid #8da0b0;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1.5;
}
.delivery-today {
  color: #005fcc !important;
  font-weight: 1000 !important;
  font-size: 1.08em;
}
/* 수정된 출고예정일은 당일이어도 수정 표시(빨강)를 우선합니다. */
.modified.delivery-today { color: var(--modified) !important; }

.home-grid th {
  font-size: 18px;
  font-weight: 1000;
  padding: 12px 5px;
}
.home-grid td {
  font-size: 18px;
  font-weight: 750;
  padding: 10px 5px;
  line-height: 1.25;
}
.home-grid td b { font-size: 19px; }
.home-grid .process-cell { font-size: 21px; font-weight: 1000; }
.home-grid .status { font-size: 17px; }
.home-card { font-size: 18px; }
.home-card-work, .home-card-customer { font-size: 22px; }
.home-card-process { font-size: 18px; }

@media (max-width: 900px) {
  .urgent-notice { align-items: stretch; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .urgent-icon { min-width: 70px; height: 50px; font-size: 21px; }
  .urgent-content { min-width: calc(100% - 90px); }
  .urgent-message { font-size: 21px; }
  .urgent-office-controls, .urgent-confirm-controls { width: 100%; }
  .urgent-confirm-controls select { flex: 1; min-width: 0; }
  .urgent-confirm { min-width: 110px; }
}
@media print {
  #noticeRoot { display: none !important; }
  #app { padding-top: 0 !important; }
  .topbar { top: 0 !important; }
}


/* 사용자 수정: 홈 표 정렬·발주번호 폭·비고 확장·출고예정일 선택 강조 */
.home-grid .col-order { width: 72px !important; }
.home-grid .col-note { width: 114px !important; }
.home-grid th,
.home-grid td {
  vertical-align: middle !important;
  text-align: center !important;
}
.home-grid td > b,
.home-grid th > * {
  vertical-align: middle;
}
.home-grid .col-order,
.home-grid td:nth-child(5) {
  word-break: keep-all;
  overflow-wrap: normal;
}
.delivery-cell,
.delivery-card {
  color: #111 !important;
  font-weight: 800;
}
.delivery-today {
  color: #005fcc !important;
  font-weight: 1000 !important;
}
.delivery-alert,
.delivery-card.delivery-alert {
  color: #d40000 !important;
  font-weight: 1000 !important;
}
.delivery-alert-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid #d40000;
  border-radius: 10px;
  background: #fff4f4;
  color: #a60000;
  font-size: 18px;
  font-weight: 900;
}
.delivery-alert-option input {
  width: 26px;
  height: 26px;
}


/* 요청사항 일괄 수정: 공지 가림 방지·버튼 중앙정렬·출고일 강조·라벨 한 줄 */
/* 긴급공지가 켜져 있어도 수정창·입력창이 공지 뒤에 가려지지 않도록 합니다. */
.modal-back {
  z-index: 2500 !important;
}
body.modal-open #noticeRoot {
  visibility: hidden;
  pointer-events: none;
}

/* 작업순서 상단의 모든 버튼 및 표시 글씨를 상하·좌우 정중앙에 맞춥니다. */
.toolbar > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.15 !important;
  height: 52px;
  min-height: 52px;
  white-space: nowrap;
}
.toolbar > h2,
.toolbar > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  line-height: 1.15;
}

/* 사용자가 빨간색 강조를 선택한 출고예정일은 왼쪽 정렬하고 약 30% 크게 표시합니다. */
.home-grid td.delivery-cell.delivery-alert {
  text-align: left !important;
  padding-left: 14px !important;
  font-size: 1.3em !important;
  line-height: 1.15 !important;
}

/* 라벨표시와 콜론이 두 줄로 갈라지지 않도록 첫 칸을 넓히고 한 줄로 고정합니다. */
.doc-top {
  grid-template-columns: minmax(175px, 13%) minmax(220px, 1fr) minmax(90px, 9%) !important;
}
.doc-label {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  justify-content: center;
}


/* 최신 일괄수정: 오늘 출고일·현장 상세버튼·긴급공지·방부시간 */
/* 컴퓨터 날짜 기준 오늘인 출고예정일: 파랑·굵게·우측·30% 확대 */
.home-grid td.delivery-cell.delivery-today {
  color: #005fcc !important;
  font-weight: 1000 !important;
  text-align: right !important;
  padding-right: 14px !important;
  font-size: 1.3em !important;
  line-height: 1.1 !important;
}
.delivery-card.delivery-today {
  color: #005fcc !important;
  font-weight: 1000 !important;
  text-align: right !important;
  font-size: 1.3em !important;
}
/* 수동 빨간 강조는 오늘 파란 강조보다 우선 */
.home-grid td.delivery-cell.delivery-alert,
.delivery-card.delivery-alert {
  color: #d40000 !important;
}

/* 방부중/방부완료 처리일시는 날짜와 시간을 한 줄로 크게 표시 */
.preservation {
  min-width: 122px !important;
  min-height: 54px !important;
  padding: 6px 10px !important;
  gap: 3px !important;
}
.preservation > span {
  font-size: 18px !important;
  line-height: 1.05 !important;
}
.preservation small {
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* 긴급공지: 기존보다 약 2배 높게, 공지 본문 확대, 메타정보는 우측 끝 */
.urgent-notice {
  min-height: 176px !important;
  padding: 20px 24px !important;
  gap: 22px !important;
}
.urgent-icon {
  min-width: 108px !important;
  height: 90px !important;
  font-size: 34px !important;
}
.urgent-content {
  flex: 1 1 auto !important;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.urgent-message {
  font-size: 36px !important;
  line-height: 1.3 !important;
}
.urgent-side {
  flex: 0 0 auto;
  min-width: 430px;
  align-self: stretch;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.urgent-side .urgent-meta {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  font-size: 18px !important;
  line-height: 1.25;
}
.urgent-side .urgent-office-controls,
.urgent-side .urgent-confirm-controls {
  justify-content: flex-end;
}
@media (max-width: 1050px) {
  .urgent-notice { flex-wrap: wrap; }
  .urgent-content { min-width: calc(100% - 150px); }
  .urgent-side {
    width: 100%;
    min-width: 0;
    min-height: 72px;
    flex-direction: row;
    align-items: center;
  }
  .urgent-side .urgent-meta { align-items: flex-start; text-align: left; }
}


/* 사용자 수정: 가공 열 축소 + 방부 열 확대 */
/* 몰다·CNC·Φ·Φ大·NC 각끌은 조금 좁게, 기타는 기존 폭 유지 */
.home-grid .col-process-tight { width: 54px !important; }
.home-grid .col-process-other { width: 62px !important; }
/* 방부 버튼이 셀 경계를 넘지 않도록 충분한 폭 확보 */
.home-grid .col-pres { width: 140px !important; }
.home-grid td:has(> .preservation) {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.home-grid td > .preservation {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}