/* BIJU 협력사 용지발주 포털 - 스타일 */
:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #e3e8ef;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #059669;
  --received: #2563eb;
  --working: #d97706;
  --done: #059669;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--primary); }

/* --- 로그인 --- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 34px 30px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; font-size: 15px; font-weight: 600;
  border: none; border-radius: 8px; background: var(--primary); color: #fff;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-ghost { background: #eef2f7; color: var(--text); }
.btn-ghost:hover { background: #e2e8f0; }
.err {
  background: #fef2f2; color: var(--danger); border: 1px solid #fecaca;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
  display: none;
}
.err.show { display: block; }

/* --- 상단바 --- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 22px; position: sticky; top: 0; z-index: 20;
}
.topbar .brand { font-weight: 700; font-size: 16px; }
.topbar .spacer { flex: 1; }
.topbar .vendor { font-size: 14px; color: var(--muted); }
.topbar .vendor b { color: var(--text); }

/* 벨 */
.bell {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bell:hover { background: #f8fafc; }
.bell .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  display: none;
}
.bell .badge.show { display: block; }

/* --- 본문 --- */
/* 메인 프레임: 상하좌우 약 1.5cm 여백만 남기고 폭을 꽉 채움 */
.container { max-width: none; margin: 0; padding: 1.5cm; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
/* 구분 | 진행상태 2단 필터 + 우측 동시작업 버튼 */
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.filterbar .tabs { margin-bottom: 0; }
.filterbar .fb-div { color: #cbd5e1; font-weight: 800; font-size: 18px; }
.filterbar .spacer { flex: 1 1 auto; }
/* 표 영역 자체를 스크롤 박스로: 세로도 이 안에서 스크롤되게 해서
   1000건이어도 가로 스크롤바가 항상 화면 안(표 하단)에 보이도록 함 */
.table-scroll {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: 72vh; /* 화면 높이의 약 72% (대략 1000px 안팎) */
}
/* 좁은 창에서 열이 눌리지 않고 가로 스크롤이 생기도록 표 최소 너비 확보 */
.table-scroll > table { min-width: 1360px; }
/* 세로 스크롤 시 헤더 고정 */
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* ── 가로 스크롤 시 왼쪽 주요 열 고정(freeze): 입고요청일까지 ──
   좌표(left)를 앞 열 너비의 누적합으로 지정. 각 열 너비는 고정. */
.table-scroll td.stick,
.table-scroll th.stick { position: sticky; z-index: 1; background: #fff; }
.table-scroll thead th.stick { z-index: 4; background: #f8fafc; } /* 좌상단 모서리: 세로·가로 모두 위 */
.table-scroll tbody tr:hover td.stick { background: #fafcff; }

.c-chk   { left: 0;     width: 34px;  min-width: 34px;  max-width: 34px; }
.c-ord   { left: 34px;  width: 116px; min-width: 116px; max-width: 116px; }
.c-equip { left: 150px; width: 56px;  min-width: 56px;  max-width: 56px; white-space: nowrap; }
/* 관리자 설비 셀: 세로로 쪼개지지 않고 가로로만 */
.equip-cell { white-space: nowrap; }
/* 관리자 '계획확인' 체크(클릭 즉시 저장) */
.plan-cell { white-space: nowrap; }
.plan-cell input.plan-chk { width: 17px; height: 17px; cursor: pointer; accent-color: var(--brand, #2563eb); }
.plan-cell input.plan-chk:disabled { opacity: .5; cursor: progress; }
.c-paper { left: 206px; width: 130px; min-width: 130px; max-width: 130px; }
.c-basis { left: 336px; width: 50px;  min-width: 50px;  max-width: 50px; }
.c-spec  { left: 386px; width: 94px;  min-width: 94px;  max-width: 94px; }
.c-deliv { left: 480px; width: 78px;  min-width: 78px;  max-width: 78px; }
.c-req   { left: 558px; width: 92px;  min-width: 92px;  max-width: 92px; }
/* 비고: 스크롤 영역, 너무 넓지 않게 */
.c-remark { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 고정 영역 끝 열: 스크롤되는 열과 경계선 표시 */
.last-stick { box-shadow: 2px 0 0 rgba(15, 23, 42, .08); border-right: 1px solid var(--line); }
/* 품명은 상대적으로 덜 중요 → 폭 축소 + 말줄임 */
.c-name {
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 용지명 고정열도 길면 말줄임 */
.c-paper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 날짜 셀(입고요청일·등록일): 좁으면 2줄, 넉넉하면 1줄 ──
   좁은 화면(기본): 연도 다음에서 줄바꿈 → 2026- / 07-07
   넉넉한 화면(≥1280px): 한 줄 → 2026-07-07 */
.date-cell { line-height: 1.25; }
.date-cell .dy, .date-cell .dm { white-space: nowrap; }
.date-cell .dm { display: block; }              /* 기본(좁은 화면): 둘째 줄로 */
@media (min-width: 1280px) {
  .date-cell .dm { display: inline; }           /* 넉넉한 화면: 한 줄 */
  .c-req { width: 112px; min-width: 112px; max-width: 112px; } /* 한 줄 날짜가 들어가도록 확장 */
}
.tab {
  padding: 8px 18px; border: 1px solid var(--line); background: #fff;
  border-radius: 20px; font-size: 14px; color: var(--muted); font-weight: 600;
}
.tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tab .cnt { opacity: .8; margin-left: 4px; font-weight: 600; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: #f8fafc; text-align: left; padding: 12px 14px; font-size: 12px;
  color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
tbody tr:hover { background: #fafcff; }
.mono { font-family: "Consolas", ui-monospace, monospace; font-weight: 700; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.remain-low { color: var(--danger); font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* 진행상태 뱃지 & 셀렉트 */
.status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
}
.status-none { background: #f1f5f9; color: var(--muted); }
.status-received { background: #dbeafe; color: var(--received); }
.status-working { background: #fef3c7; color: var(--working); }
.status-done { background: #d1fae5; color: var(--done); }
/* FSC 여부 배지 */
.fsc-badge {
  display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 800;
  background: #d1fae5; color: var(--ok); border: 1px solid #6ee7b7; letter-spacing: .5px;
}
.fsc-none { color: var(--muted); font-size: 12px; }
/* 관리자 툴바(협력사/검색 필터) */
.admin-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px;
}
.admin-toolbar label { font-size: 13px; font-weight: 600; color: var(--muted); }
.admin-toolbar select, .admin-toolbar input[type="search"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
.admin-toolbar input[type="search"] { min-width: 200px; }
.admin-toolbar input[type="date"] {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
.quick-btns { display: inline-flex; gap: 4px; }
.range-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fafcff;
}
.range-group > label { font-weight: 700; color: var(--text); }

/* ── 관리자 엑셀식 열 필터/정렬 ── */
.table-scroll thead th .th-l { margin-right: 4px; }
.sort-mark { color: var(--primary); font-size: 11px; }
.col-filter {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 4px; width: 18px; height: 18px; line-height: 1;
  font-size: 10px; cursor: pointer; padding: 0; vertical-align: middle;
}
.col-filter:hover { background: #eef2ff; }
.col-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.filter-pop {
  position: fixed; z-index: 60; width: 244px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .2); font-size: 13px;
}
.filter-pop .fp-sort { display: flex; gap: 6px; margin-bottom: 6px; }
.filter-pop .fp-sort .btn { flex: 1; }
.filter-pop .fp-search {
  width: 100%; box-sizing: border-box; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px;
}
.filter-pop .fp-all { display: flex; align-items: center; gap: 6px; padding: 2px 2px 6px; font-weight: 700; border-bottom: 1px solid var(--line); }
.filter-pop .fp-list { max-height: 220px; overflow: auto; margin-top: 6px; }
.filter-pop .fp-list label {
  display: flex; align-items: center; gap: 6px; padding: 3px 2px;
  white-space: nowrap; overflow: hidden;
}
.filter-pop .fp-list label span { overflow: hidden; text-overflow: ellipsis; }
.filter-pop .fp-foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.admin-count { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
select.status-select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
  background: #fff;
}

.empty { padding: 48px 16px; text-align: center; color: var(--muted); }

/* --- 모달 --- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 50;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: #fff; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.25);
  width: 100%; max-width: 460px; overflow: hidden;
}
.modal.wide { max-width: 620px; }
/* 모달이 화면을 넘지 않도록 전체 높이를 제한하고, 본문만 스크롤 */
.modal { display: flex; flex-direction: column; max-height: 80vh; }
.modal-head {
  display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-head h3 { margin: 0; font-size: 16px; flex: 1; }
.modal-head .x { border: none; background: none; font-size: 22px; color: var(--muted); line-height: 1; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }

/* 알림 목록: 화면에 다 안 들어오면 스크롤 */
#notifyBody { max-height: 55vh; }

.kv { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed #eef2f7; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; }

.notify-item {
  height: 56px; box-sizing: border-box;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  overflow: hidden;
}
.notify-item .t { font-size: 14px; flex: 1 1 auto; min-width: 0; }
.notify-item .nt-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notify-item .nt-title b { font-family: "Consolas", monospace; }
.notify-item .s {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 접수 버튼: 모두 동일 크기 */
.notify-item .accept-btn { flex: 0 0 auto; width: 68px; padding: 7px 0; text-align: center; }

.qty-row { display: flex; gap: 12px; margin-top: 14px; }
.qty-row .field { flex: 1; margin: 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.big-remain { font-size: 15px; }
.big-remain b { font-size: 20px; color: var(--primary); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; z-index: 80; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* --- 카톡형 코너 알림 (우측 하단) --- */
/* 코너 알림 스택: 우측 하단, 아래=미접수 / 위=수정요청 (세로로 붙여 표시) */
.corner-stack {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  max-width: calc(100vw - 32px);
}
.corner-notify {
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,23,42,.22); overflow: hidden;
  padding: 14px 16px 16px;
  transform: translateY(24px); opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.corner-notify:not(.show) { display: none; }  /* 숨김 시 자리 차지 안 함(스택 밀착) */
.corner-notify.show { transform: translateY(0); opacity: 1; }
.corner-notify .cn-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.corner-notify .cn-title { font-size: 14px; font-weight: 700; flex: 1; }
.corner-notify .cn-title b { color: var(--danger); }
.corner-notify .cn-x {
  border: none; background: none; font-size: 20px; color: var(--muted); line-height: 1; cursor: pointer;
}
.corner-notify .cn-body { margin-bottom: 12px; }
.corner-notify .cn-line {
  font-size: 13px; color: var(--text); padding: 4px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.corner-notify .cn-line b { font-family: "Consolas", monospace; }
.corner-notify .cn-more { font-size: 12px; color: var(--muted); padding-top: 2px; }
.corner-notify .cn-open { width: 100%; padding: 9px 0; font-size: 13px; }

/* 수정 요청 코너 알림: 미접수 바로 위에 쌓임(제목만 색 구분) */
.corner-notify.corner-mod .cn-title b { color: var(--working); }

/* ── 수정건(변경 요청) UI ─────────────────────────────────────── */
.tab-sep { align-self: center; color: var(--line); font-weight: 700; padding: 0 2px; user-select: none; }
.tab-mod.has-mod { border-color: var(--working); color: var(--working); }
.tab-mod.has-mod .cnt { color: var(--working); }
/* 발주번호 앞 '수정' 뱃지 */
.mod-badge {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--working); border-radius: 4px;
  padding: 2px 4px; margin-right: 4px; vertical-align: middle;
}
/* 수정요청 카드(diff) */
.mod-row > td { background: #fffdf5 !important; padding: 0 !important; }
.mod-card { padding: 12px 14px; }
.mod-head { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mod-diff { border-collapse: collapse; width: auto; min-width: 320px; font-size: 13px; }
.mod-diff th {
  text-align: left; font-size: 11px; color: var(--muted); font-weight: 600;
  padding: 2px 10px 4px; border-bottom: 1px solid var(--line);
}
.mod-diff td { padding: 4px 10px; border-bottom: 1px dashed var(--line); }
.mod-diff .mc-f { font-weight: 600; color: var(--text); }
.mod-diff .mc-o { color: var(--muted); text-decoration: line-through; }
.mod-diff .mc-arrow { color: var(--muted); }
.mod-diff .mc-n { color: var(--danger); font-weight: 700; }
.mod-actions { margin-top: 10px; display: flex; gap: 8px; }
.mod-approve { background: var(--received); }
/* 관리자 수정 카드: 응답자/시각 부기 */
.mod-meta { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 400; }

/* 수정건 카드: 협력사 진행 현황 줄 */
.mod-progress { font-size: 12px; color: var(--muted); margin: 6px 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mod-progress .mp-qty { color: var(--muted); }

/* 발주취소건: 눈에 띄게(빨간 강조) */
.cancel-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--danger);
  border-radius: 4px; padding: 2px 7px; margin-right: 6px; vertical-align: middle;
}
.mod-row.mod-cancel > td { background: #fff1f1 !important; border-left: 4px solid var(--danger); }
.mod-cancel .mod-head { color: #b91c1c; }
.mod-cancel .mod-diff .mc-n { color: #b91c1c; }
.btn.mod-approve.danger { background: var(--danger); }

/* ── 작업상태별 행 연한 배경 (고정 열은 미지정 시 흰색 폴백) ──────── */
.table-scroll tbody tr.rs td { background: var(--rs-bg, transparent); }
.table-scroll tbody tr.rs td.stick { background: var(--rs-bg, #fff); }
.table-scroll tbody tr.rs:hover td { background: var(--rs-bgh, #fafcff); }
.table-scroll tbody tr.rs:hover td.stick { background: var(--rs-bgh, #fafcff); }
tr.rs-none     { --rs-bg:#fef4f4; --rs-bgh:#fdeaea; }  /* 미접수: 연한 빨강 */
tr.rs-received { --rs-bg:#f0f6ff; --rs-bgh:#e4eefe; }  /* 접수: 연한 파랑 */
tr.rs-working  { --rs-bg:#fffaef; --rs-bgh:#fef3d6; }  /* 작업: 연한 주황 */
tr.rs-done     { --rs-bg:#d3f2df; --rs-bgh:#c1ecd2; }  /* 완료: 초록(조금 더 진하게) */

/* ── 상태별 탭 색상 (연하게) ─────────────────────────────────────── */
/* 미접수 · 수정거절 = 빨강 */
#progressTabs .tab[data-progress="none"],
#statusTabs .tab[data-status="none"],
#statusTabs .tab[data-status="__mod_rejected"] { background:#fef4f4; border-color:#f6c9c9; color:#dc2626; }
#progressTabs .tab[data-progress="none"].active,
#statusTabs .tab[data-status="none"].active,
#statusTabs .tab[data-status="__mod_rejected"].active { background:#fde2e2; border-color:#ef4444; color:#b91c1c; }
/* 접수 · 수정승인 = 파랑 */
#progressTabs .tab[data-progress="received"],
#statusTabs .tab[data-status="received"],
#statusTabs .tab[data-status="__mod_approved"] { background:#f0f6ff; border-color:#c3dbfd; color:#2563eb; }
#progressTabs .tab[data-progress="received"].active,
#statusTabs .tab[data-status="received"].active,
#statusTabs .tab[data-status="__mod_approved"].active { background:#dbeafe; border-color:#3b82f6; color:#1d4ed8; }
/* 작업 · 수정미확인 · 수정요청 = 주황 */
#progressTabs .tab[data-progress="working"],
#progressTabs .tab.tab-mod,
#statusTabs .tab[data-status="working"],
#statusTabs .tab[data-status="__mod_pending"] { background:#fffaef; border-color:#fbe1a6; color:#d97706; }
#progressTabs .tab[data-progress="working"].active,
#progressTabs .tab.tab-mod.active,
#statusTabs .tab[data-status="working"].active,
#statusTabs .tab[data-status="__mod_pending"].active { background:#fdefc7; border-color:#f59e0b; color:#b45309; }
/* 완료 = 초록 (조금 더 진하게) */
#progressTabs .tab[data-progress="done"],
#statusTabs .tab[data-status="done"] { background:#cdefda; border-color:#7fd8a4; color:#047857; }
#progressTabs .tab[data-progress="done"].active,
#statusTabs .tab[data-status="done"].active { background:#a2e6bd; border-color:#16a34a; color:#065f46; }

/* --- 담당자 설정(추가형) --- */
.rep-add-row { display: flex; gap: 8px; align-items: center; }
.rep-add-row input { flex: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.rep-add-row input:disabled { background: #f8fafc; color: var(--muted); }
.rep-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rep-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.rep-item .rep-del { border: none; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; }
.rep-item .rep-del:hover { color: var(--danger); }
.rep-empty { font-size: 13px; color: var(--muted); padding: 6px 2px; }

/* --- 인쇄 라벨 --- */
#printArea, #listPrintArea { display: none; }

@media print {
  /* 화면 UI 전부 숨기고 인쇄 영역만: 기본은 라벨(#printArea), body.printing-list 면 발주리스트 */
  body > *:not(#printArea):not(#listPrintArea) { display: none !important; }
  #printArea { display: block; }
  #listPrintArea { display: none; }
  body.printing-list #printArea { display: none !important; }
  body.printing-list #listPrintArea { display: block; }

  /* 발주 리스트 인쇄 */
  .list-print { padding: 12mm; font-family: "맑은 고딕", sans-serif; }
  /* 주문처·날짜: 리스트 오른쪽 위 */
  .list-print .lp-head { margin: 0 0 1mm; text-align: right; }
  .list-print .lp-order { font-size: 13px; font-weight: 800; }
  .list-print .lp-when { font-size: 11px; color: #555; margin-top: 1mm; }
  .list-print h2 { font-size: 24px; margin: 1mm 0 3mm; text-align: center; }
  /* 담당자(용지주문전표와 리스트 사이): 작게 */
  .list-print .lp-reps {
    display: flex; gap: 5px; font-size: 11px; font-weight: 700; line-height: 1.4; margin: 0 0 4mm;
  }
  .list-print .lp-reps-label { white-space: nowrap; }
  .list-print .lp-rep { white-space: nowrap; }
  /* 표: 고정 레이아웃(열너비 colgroup) + 셀 줄바꿈으로 넘침 방지 */
  .lp-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
  .lp-table th, .lp-table td {
    border: 1px solid #000; padding: 1.5mm 2mm; text-align: left;
    word-break: break-word; overflow-wrap: anywhere; vertical-align: middle;
  }
  .lp-table th { background: #eee; font-weight: 800; font-size: 11px; white-space: nowrap; text-align: center; }
  .lp-table td.r { text-align: right; }
  /* 제품명은 작게(덜 중요), 비고는 크고 진하게+넓게(잘 보이게) */
  .lp-table td.lp-name { font-size: 8px; color: #666; }
  .lp-table th.lp-name { font-size: 10px; }
  .lp-table td.lp-remark { font-size: 13px; font-weight: 700; }
  /* 입고요청일: '2026-' / '08-04' 2줄 */
  .lp-table td.lp-date { text-align: center; white-space: nowrap; line-height: 1.3; }
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff; }

  .label-page {
    width: 100%;
    height: 100vh;
    page-break-after: always;
    display: flex;
    flex-direction: column;
    /* 상단 여백 크게: 접어서 용지 사이에 끼우는 부분 확보 */
    padding: 32mm 12mm 12mm;
    position: relative;
  }
  .label-page:last-child { page-break-after: auto; }
  /* FSC 인증 발주일 때만 상단 우측에 큰 마크 */
  .label-fsc {
    position: absolute; top: 34mm; right: 12mm;   /* 접는 여백 아래로 */
    border: 3px solid #000; border-radius: 8px;
    padding: 2mm 6mm; font-size: 40px; font-weight: 900; letter-spacing: 3px;
  }

  /* 상단 1/3 : QR + 큰 발주번호.
     위쪽은 접어서 끼우는 부분이라 비워두고, QR·발주번호를 아래로 붙인다.
     구분선(bar)은 없애고 그 자리에 발주번호가 오도록 아래 정렬. */
  .label-top {
    flex: 1 1 33%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 0;
  }
  .label-qr { width: 38mm; height: 38mm; }
  .label-code {
    margin-top: 1.5mm;   /* QR ↔ 발주번호 간격 */
    font-size: 40px; font-weight: 900; letter-spacing: 2px;
    font-family: "Consolas", ui-monospace, monospace;
  }

  /* 하단 2/3 : 발주 정보 표 */
  .label-bottom {
    flex: 1 1 67%;
    display: flex; flex-direction: column;
    padding-top: 5mm;      /* 발주번호 ↔ 표 간격 */
    /* 위에서 줄인 3mm 를 아래로 돌려준다 → 표에 배분되는 높이가 그대로 유지된다 */
    padding-bottom: 3mm;
  }
  .label-table { width: 100%; border-collapse: collapse; flex: 1; }
  .label-table th, .label-table td {
    border: 2px solid #000; padding: 3.5mm 5mm; text-align: left; vertical-align: middle;
  }
  .label-table th {
    width: 28%; background: #f0f0f0; font-size: 22px; font-weight: 800; white-space: nowrap;
  }
  .label-table td { font-size: 24px; font-weight: 700; }
  /* 가장 많이 보는 항목: 납품처·비고·수량을 제일 크게 */
  .label-table td.deliv, .label-table td.remark { font-size: 54px; font-weight: 900; line-height: 1.1; }
  .label-table td.qty { font-size: 50px; font-weight: 900; line-height: 1.1; }
  /* 제품명은 참고용 — 작게 */
  .label-table td.pname { font-size: 17px; font-weight: 600; color: #444; line-height: 1.25; }
  .label-table td.label-fixed {
    text-align: center; font-size: 20px; font-weight: 800; background: #f4f4f4; letter-spacing: .5px;
  }
  .label-foot { text-align: right; font-size: 18px; margin-top: 4mm; color: #333; }
}