/* =====================================================================
   화면 디자인 (색상은 config.js 의 colors 값이 자동 적용됩니다)
   ===================================================================== */
:root {
  /* 색상 (config.js 의 colors 값이 있으면 그 값으로 바뀜) — 진한 남색 테마 */
  --main: #FFC83D;        /* 강조색: 노랑 */
  --on-main: #111111;     /* 강조색 위 글자 (자동 계산) */
  --main-soft: rgba(255, 200, 61, .16);
  --dark: #131A2C;        /* 가장 진한 남색: 상단바·표 머리 */
  --bg: #1B2440;          /* 화면 바탕 */
  --card: #243052;        /* 카드 */
  --card2: #2C3A61;       /* 카드 안 상자·입력칸 */
  --hover: #36467A;
  --line: #3A4A75;
  --line2: #5A6EA5;
  --text: #FFFFFF;
  --point: #FF5A5F;
  --up: #FF6B6B;
  --down: #6EA8FF;
  --ok: #2FBF71;
  --track: rgba(255, 255, 255, .08);
  --fill2: #5B8DEF;       /* 비교 막대(전월·전년 등) */
  --font: '맑은 고딕', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --nav-h: 62px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-size: 17px; color: var(--text); background: var(--bg);
  -webkit-text-size-adjust: 100%; line-height: 1.5;
}
button, input, select, textarea { font-family: var(--font); font-size: 17px; color: var(--text); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--text); }

/* ---------- 상단바 ---------- */
.top {
  position: sticky; top: 0; z-index: 30; background: var(--dark); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 54px;
  padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top));
}
.top .logo { height: 30px; width: 30px; border-radius: 6px; background: #fff; object-fit: contain; }
.top .brand { font-weight: 700; font-size: 17px; color: #fff; line-height: 1.2; }
.top .brand b { color: var(--main); display: block; font-size: 15px; }
.top .grow { flex: 1; }
.top .icon-btn { position: relative; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; border-radius: 8px; }
.top .icon-btn:hover { background: var(--card2); }
.top .icon-btn svg { width: 22px; height: 22px; display: block; }
.badge-dot { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--point); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.top .who { font-size: 16px; color: #fff; text-align: right; line-height: 1.2; }
.mode-tag { font-size: 15px; background: var(--main); color: var(--on-main); padding: 2px 7px; border-radius: 10px; font-weight: 700; }

/* ---------- 배치 ---------- */
.shell { display: flex; min-height: calc(100vh - 54px); }
.side { width: 230px; background: var(--dark); border-right: 1px solid var(--line); padding: 12px 8px; position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; flex-shrink: 0; }
.side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.side a svg { width: 18px; height: 18px; flex-shrink: 0; }
.side a:hover { background: var(--card2); }
.side a.on { background: var(--main); color: var(--on-main); }
.side a.on svg { color: var(--on-main); }
.side .grp { font-size: 15px; font-weight: 700; color: var(--main); padding: 12px 12px 4px; }
.main { flex: 1; padding: 18px 20px 30px; min-width: 0; }
.bottom { display: none; }

@media (max-width: 860px) {
  .side { display: none; }
  .main { padding: 14px 12px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
  .bottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--dark);
    border-top: 1px solid var(--line); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 600; color: var(--text); position: relative; }
  .bottom a svg { width: 22px; height: 22px; }
  .bottom a.on { color: var(--main); }
  .bottom a.on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: var(--main); border-radius: 0 0 3px 3px; }
  .top .who { display: none; }
}

/* ---------- 제목줄 ---------- */
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.page-head h1::before { content: ''; width: 5px; height: 18px; background: var(--main); border-radius: 2px; }
.page-head .grow { flex: 1; }
.sub { font-size: 16px; color: var(--text); }

/* ---------- 카드 ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.card h2 { font-size: 17px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card h2 .grow { flex: 1; }
.card.dark { background: var(--dark); color: #fff; border-color: var(--line); }
.card.dark h2, .card.dark .sub { color: #fff; }

.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .g3, .g2 { grid-template-columns: 1fr; } .g5 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 숫자 상자 ---------- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: default; position: relative; overflow: hidden; }
.stat.link { cursor: pointer; }
.stat.link:hover { border-color: var(--main); }
.stat .lbl { font-size: 16px; font-weight: 600; color: var(--text); }
.stat .val { font-size: 27px; font-weight: 800; color: var(--text); margin-top: 2px; letter-spacing: -0.5px; }
.stat .val small { font-size: 16px; font-weight: 600; margin-left: 2px; }
.stat .cmp { font-size: 15px; margin-top: 2px; color: var(--text); }
.stat::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--main); }
.stat.alert::after { background: var(--point); }
.stat.alert .val { color: var(--point); }
.stat.black { background: var(--dark); border-color: var(--line); }
.stat.black .lbl, .stat.black .val, .stat.black .cmp { color: #fff; }

.up { color: var(--up); font-weight: 700; }
.down { color: var(--down); font-weight: 700; }

/* ---------- 버튼 ---------- */
.btn { border: 1px solid var(--line2); background: var(--card2); color: var(--text); padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.pri { background: var(--main); border-color: var(--main); color: var(--on-main); }
.btn.pri:hover { background: var(--main); filter: brightness(1.1); }
.btn.blk { background: var(--dark); border-color: var(--line2); color: #fff; }
.btn.red { background: var(--point); border-color: var(--point); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

/* ---------- 탭 ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--card2); font-weight: 700; cursor: pointer; font-size: 16px; color: var(--text); }
.tab .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--main-soft); color: var(--text); font-size: 15px; }
.tab.on { background: var(--main); border-color: var(--main); color: var(--on-main); }
.tab.on .n { background: var(--dark); color: #fff; }

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th { background: var(--dark); color: #fff; font-weight: 700; padding: 8px; text-align: left; white-space: nowrap; }
.tbl th:first-child { border-top-left-radius: 8px; }
.tbl th:last-child { border-top-right-radius: 8px; }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--main-soft); }
.tbl .r { text-align: right; white-space: nowrap; }
.tbl .c { text-align: center; }
.tbl tfoot td { font-weight: 800; background: var(--main-soft); }

/* ---------- 목록 카드 (휴대폰) ---------- */
.list-item { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer; display: block; }
.list-item:hover { border-color: var(--main); }
.list-item .row1 { display: flex; align-items: center; gap: 6px; }
.list-item .t { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .row2 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 16px; margin-top: 5px; color: var(--text); }

/* ---------- 라벨 ---------- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 15px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line2); color: var(--text); background: transparent; }
.chip.o { background: var(--main); border-color: var(--main); color: var(--on-main); }
.chip.k { background: var(--dark); border-color: var(--line2); color: #fff; }
.chip.r { background: var(--point); border-color: var(--point); color: #fff; }
.chip.g { background: var(--ok); border-color: var(--ok); color: #fff; }
.chip.b { background: var(--down); border-color: var(--down); color: #fff; }
.chip.s { background: var(--main-soft); border-color: var(--main-soft); }

/* ---------- 단계 표시 ---------- */
.steps { display: flex; align-items: flex-start; margin: 8px 0 4px; overflow-x: auto; }
.step { flex: 1; min-width: 58px; text-align: center; position: relative; font-size: 15px; font-weight: 700; color: var(--text); }
.step .dot { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 4px; background: var(--card2); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; position: relative; z-index: 1; }
.step::before { content: ''; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.step:first-child::before { display: none; }
.step.done .dot { background: var(--fill2); border-color: var(--fill2); color: #fff; }
.step.done::before, .step.now::before { background: var(--fill2); }
.step.now .dot { background: var(--main); border-color: var(--main); color: var(--on-main); box-shadow: 0 0 0 4px var(--main-soft); }

/* ---------- 막대그래프 (가로형) ---------- */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 116px; align-items: center; gap: 8px; font-size: 16px; }
.bar-row .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { height: 18px; background: var(--track); border-radius: 4px; overflow: hidden; position: relative; }
.bar-row .fill { height: 100%; background: var(--main); border-radius: 4px; min-width: 2px; }
.bar-row .fill.k { background: var(--fill2); }
.bar-row .fill.r { background: var(--point); }
.bar-row .v { text-align: right; font-weight: 800; white-space: nowrap; }
.bar-row.two .track { height: 22px; display: flex; flex-direction: column; gap: 2px; background: none; }
.bar-row.two .fill { height: 10px; }
.legend { display: flex; gap: 12px; font-size: 15px; font-weight: 700; margin-bottom: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- 입력 양식 ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.form label .req { color: var(--point); }
.form input, .form select, .form textarea, .inp {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card2); color: var(--text); outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus, .inp:focus { border-color: var(--main); box-shadow: 0 0 0 3px var(--main-soft); }
.form textarea { min-height: 80px; resize: vertical; }
.form .chk { display: flex; align-items: center; gap: 6px; font-weight: 700; padding-top: 22px; }
.form .chk input { width: 18px; height: 18px; accent-color: var(--main); }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } .form .chk { padding-top: 0; } }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar .inp { width: auto; min-width: 120px; padding: 7px 10px; }
.toolbar .grow { flex: 1; }

/* ---------- 팝업 ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.wide { max-width: 900px; }
.modal-h { background: var(--dark); color: #fff; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.modal-h .grow { flex: 1; }
.modal-h button { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
.modal-b { padding: 16px; overflow-y: auto; }
.modal-f { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .modal-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@keyframes fade { from { opacity: 0; } }

/* ---------- 알림창 ---------- */
.toast-box { position: fixed; top: calc(62px + env(safe-area-inset-top)); right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { background: var(--dark); color: #fff; border-left: 5px solid var(--main); padding: 11px 13px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: slide .25s; cursor: pointer; }
.toast b { display: block; color: var(--main); margin-bottom: 2px; }
.toast.err { border-left-color: var(--point); }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
@media (max-width: 600px) { .toast-box { left: 10px; right: 10px; max-width: none; } }

.noti-item { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.noti-item.unread { background: var(--main-soft); }
.noti-item .ic { width: 8px; height: 8px; border-radius: 50%; background: var(--point); margin-top: 6px; flex-shrink: 0; }
.noti-item:not(.unread) .ic { background: transparent; border: 1px solid var(--line2); }

/* ---------- 조직도 ---------- */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; overflow-x: auto; padding: 6px 0 10px; }
.org-node { display: flex; flex-direction: column; align-items: center; }
.org-box { background: var(--card2); border: 2px solid var(--line2); border-radius: 10px; min-width: 150px; overflow: hidden; }
.org-box .dn { background: var(--dark); color: #fff; font-weight: 800; padding: 6px 10px; text-align: center; }
.org-box.org-top .dn { background: var(--main); color: var(--on-main); }
.org-box ul { list-style: none; margin: 0; padding: 6px 10px; }
.org-box li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 16px; cursor: pointer; }
.org-box li:hover { color: var(--main); }
.org-box li b { font-weight: 700; }
.org-kids { display: flex; position: relative; padding-top: 18px; }
.org-kids::before { content: ''; position: absolute; top: 0; left: 50%; height: 18px; border-left: 2px solid var(--line2); }
.org-kids > .org-node { position: relative; padding: 18px 7px 0; }
.org-kids > .org-node::before { content: ''; position: absolute; top: 0; left: 50%; height: 18px; border-left: 2px solid var(--line2); }
.org-kids > .org-node::after { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--line2); }
.org-kids > .org-node:first-child::after { left: 50%; }
.org-kids > .org-node:last-child::after { right: 50%; }
.org-kids > .org-node:only-child::after { display: none; }
.org { align-items: safe center; }

/* ---------- 창고 배치도 ---------- */
.zone { border: 2px solid var(--line2); border-radius: 12px; padding: 10px; background: var(--card); }
.zone-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 800; }
.zone-h .code { background: var(--main); color: var(--on-main); border-radius: 6px; padding: 2px 9px; }
.racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.rack { border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--card2); }
.rack:hover { box-shadow: 0 0 0 3px var(--main-soft); border-color: var(--main); }
.rack .rh { background: var(--dark); color: #fff; font-weight: 800; text-align: center; font-size: 16px; padding: 3px; }
.rack .lv { display: flex; justify-content: space-between; padding: 2px 6px; font-size: 15px; border-top: 1px solid var(--line); }
.rack .lv.has { background: var(--main-soft); font-weight: 700; }
.rack .lv.low { background: var(--point); color: #fff; font-weight: 700; }
.rack.hit { box-shadow: 0 0 0 3px var(--main); border-color: var(--main); }
.aisle { text-align: center; font-size: 15px; font-weight: 700; padding: 6px; border: 1px dashed var(--line2); border-radius: 8px; margin: 10px 0; }

/* ---------- 결재란 ---------- */
.sign-box { display: inline-flex; border: 2px solid var(--line2); background: var(--card2); border-radius: 6px; overflow: hidden; }
.sign-box .col { border-left: 1px solid var(--line2); min-width: 72px; text-align: center; }
.sign-box .col:first-child { border-left: 0; }
.sign-box .col .rh { background: var(--dark); color: #fff; font-weight: 700; font-size: 15px; padding: 3px; }
.sign-box .col .nm { padding: 6px 4px 2px; font-weight: 700; font-size: 16px; min-height: 26px; }
.sign-box .col .st { font-size: 15px; padding: 0 4px 2px; font-weight: 700; }
.sign-box .col .dt { font-size: 14px; padding: 0 4px 5px; }
.sign-box .col.ok .st { color: var(--point); }
.sign-box .col.now { background: var(--main-soft); }
.sign-box .col.no .st { color: var(--down); }

/* ---------- 시간 기록 ---------- */
.timeline { border-left: 2px solid var(--line2); margin-left: 6px; padding-left: 14px; }
.timeline .ev { position: relative; padding-bottom: 10px; font-size: 16px; }
.timeline .ev::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--main); }
.timeline .ev b { margin-right: 6px; }

/* ---------- 기타 ---------- */
.empty { text-align: center; padding: 28px 10px; font-weight: 600; color: var(--text); }
.kv { display: grid; grid-template-columns: 116px 1fr; gap: 6px 10px; font-size: 16px; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; }
.hide-m { }
@media (max-width: 860px) { .hide-m { display: none !important; } .show-m { display: block !important; } }
.show-m { display: none; }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
.menu-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 6px; text-align: center; font-weight: 700; font-size: 16px; cursor: pointer; }
.menu-tile:hover { border-color: var(--main); }
.menu-tile .ic { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 10px; background: var(--dark); color: var(--main); display: flex; align-items: center; justify-content: center; }
.menu-tile .ic svg { width: 22px; height: 22px; }
.hello { display: flex; align-items: center; gap: 12px; }
.hello .av { width: 44px; height: 44px; border-radius: 50%; background: var(--main); color: var(--on-main); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.conclusion { background: var(--dark); color: #fff; border-radius: 10px; padding: 12px 14px; font-weight: 600; line-height: 1.7; }
.conclusion b.o { color: var(--main); }
.conclusion .up { color: #FF5A5E; }
.conclusion .down { color: #7EA2FF; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--dark); }
.login { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; width: 100%; max-width: 380px; }
.login img { width: 64px; height: 64px; border-radius: 12px; display: block; margin: 0 auto 10px; object-fit: contain; }
.login h1 { text-align: center; font-size: 17px; margin-bottom: 2px; }
.login .sub { text-align: center; margin-bottom: 18px; }
.who-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.who-list button { text-align: left; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; }
.who-list button:hover { border-color: var(--main); background: var(--main-soft); }
.score { font-size: 31px; font-weight: 900; }
.install-bar { background: var(--main); color: var(--on-main); padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; }
.install-bar .grow { flex: 1; }
.install-bar .btn { border-color: var(--on-main); }
.print-only { display: none; }
@media print {
  .top, .side, .bottom, .toolbar, .btn, .tabs { display: none !important; }
  .main { padding: 0; }
  body { background: #fff; }
}

/* 휴대폰: 숫자 상자 2열 */
@media (max-width: 860px) {
  .grid.stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .val { font-size: 24px; }
}
.stat.black .up { color: #FF5A5E; }
.stat.black .down { color: #8FB0FF; }

/* ===================== 메인 대시보드 (화면 꽉 채우기) ===================== */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.dash > .card { margin-bottom: 0; }
.dash-full { grid-column: 1 / -1; }
.span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span8 { grid-column: span 8; }
.dash .install-bar { margin-bottom: 0; }
.card.fill { display: flex; flex-direction: column; min-height: 0; }
.card.fill .fill-body { flex: 1; min-height: 0; overflow-y: auto; }
@media (min-width: 1101px) {
  .dash { height: max(calc(100vh - 54px - 48px), 1160px); grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); }
  .dash:has(> .install-bar) { grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); }
  .dash:has(> .install-bar + .install-bar) { grid-template-rows: auto auto auto auto minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); }
  .dash > .card.fill { overflow: hidden; }
}
@media (max-width: 1100px) { .span3 { grid-column: span 6; } .span4 { grid-column: span 6; } .span8 { grid-column: span 12; } .card.fill .fill-body { max-height: 360px; } }
@media (max-width: 700px) { .dash > * { grid-column: 1 / -1 !important; } }

.stat6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .stat6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stat6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

.hero { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 16px; align-items: center; }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr; } }
.gsearch { position: relative; }
.gsearch input { width: 100%; padding: 11px 12px 11px 38px; border-radius: 10px; border: 2px solid var(--main); background: var(--card2); color: var(--text); outline: none; font-size: 17px; }
.gs-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--main); display: flex; }
.gs-ic svg { width: 18px; height: 18px; }
.sr { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-height: 60vh; overflow-y: auto; z-index: 40; padding: 6px; }
.sr-sec { font-size: 15px; font-weight: 800; color: var(--main); padding: 8px 8px 4px; }
.sr-row { display: flex; flex-direction: column; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text); }
.sr-row:hover { background: var(--hover); }
.sr-row span { font-size: 15px; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.qbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.qbtn svg { width: 22px; height: 22px; color: var(--main); }
.qbtn:hover { background: var(--main); border-color: var(--main); color: var(--on-main); }
.qbtn:hover svg { color: var(--on-main); }
@media (max-width: 700px) { .quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .qbtn { min-width: 0; padding: 8px 2px; font-size: 15px; } }

.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head span { text-align: center; font-size: 15px; font-weight: 800; padding-bottom: 4px; }
.cal-head .sun, .cal-d.sun .dn { color: var(--point); }
.cal-d { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; display: flex; flex-direction: column; justify-content: space-between; font-size: 15px; background: var(--card2); }
.cal-d.empty-d { border: 0; background: none; }
.cal-d .dn { font-weight: 700; }
.cal-d.today { border: 2px solid var(--main); }
.cal-d.has { background: var(--main-soft); cursor: pointer; }
.cal-d.has .cnt { background: var(--main); color: var(--on-main); border-radius: 8px; text-align: center; font-weight: 800; font-size: 14px; }
.cal-d.late .cnt { background: var(--point); color: #fff; }
.cal-d.has:hover { border-color: var(--main); }
.compact .stat { padding: 8px 12px; }
.compact .stat .val { font-size: 21px !important; }
.compact .stat .lbl { font-size: 15px; }
.calcard .fill-body { display: flex; flex-direction: column; overflow: hidden; }
.calcard .cal-grid { flex: 1; grid-auto-rows: minmax(24px, 1fr); }
.calcard .cal-d { min-height: 0; flex-direction: row; align-items: center; gap: 3px; padding: 2px 4px; }
.calcard .cal-d .cnt { flex: 1; }
@media (max-width: 1100px) { .calcard .fill-body { max-height: none; } .calcard .cal-grid { grid-auto-rows: 34px; } }
.span8 .bars { gap: 5px; }
.span8 .bar-row .track { height: 14px; }

/* 남색 테마 보충 */
::placeholder { color: #C9D6FF; opacity: 1; }
select option { background: var(--card2); color: var(--text); }
.card { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.stat.link:hover { background: var(--hover); }
.list-item:hover { background: var(--hover); }
.tab:hover { background: var(--hover); }
.side .grp { color: var(--main); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.span6 { grid-column: span 6; }
@media (max-width: 1100px) { .span6 { grid-column: span 12; } }
.team-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; margin-bottom: 8px; }
.team-sum b { color: var(--main); }
.mini-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--track); min-width: 90px; }
.mini-bar i { display: block; height: 100%; }
.wh-today .card { margin-bottom: 0; }
.wh-today .wh-list { max-height: 300px; overflow-y: auto; }
.wh-today { margin-bottom: 14px; }

.sec-t { font-weight: 800; color: var(--main); margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.sec-t:first-child { margin-top: 0; }
.vinfo .kv { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--main); }
.tbl th.sorted { color: var(--main); }

/* ---------- 메뉴 사용 권한 ---------- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.perm-grp { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card2); }
.perm-grp .perm-h { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
.perm-grp .chk { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-weight: 600; cursor: pointer; }
.perm-grp input { width: 18px; height: 18px; accent-color: var(--main); }
.sec-t:has(.btn) { display: flex; align-items: center; }
.sec-t .btn { margin-left: 6px; }

/* ---------- 엑셀 올리기 ---------- */
.up-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.up-choice .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.up-choice .card .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.up-sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.up-tbl { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.up-tbl .tbl td, .up-tbl .tbl th { font-size: 15px; padding: 6px 8px; white-space: nowrap; }
.row-err td { background: rgba(255, 90, 95, .14); }
.row-new td { background: var(--main-soft); }
.prog { height: 10px; border-radius: 6px; background: var(--card2); overflow: hidden; margin-top: 10px; }
.prog > i { display: block; height: 100%; width: 0; background: var(--main); transition: width .2s; }
@media (max-width: 760px) { .up-choice { grid-template-columns: 1fr; } }

/* ---------- 양식 관리 ---------- */
.tpl-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.tpl-type { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.tpl-type.on { border-color: var(--main); box-shadow: 0 0 0 2px var(--main) inset; }
.tpl-type .n { font-size: 26px; font-weight: 800; }
.tpl-type .t { font-weight: 700; }
.ph-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-list code { background: var(--card2); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 8px; font-size: 15px; color: var(--text); cursor: pointer; font-family: var(--font); font-weight: 700; }
.ph-list code:hover { border-color: var(--main); }
.ext { display: inline-block; min-width: 46px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: 14px; font-weight: 800; background: var(--main); color: var(--on-main); }
.doc-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.doc-btns .btn { justify-content: center; flex-direction: column; padding: 12px 6px; gap: 4px; white-space: normal; }
.doc-btns .btn small { font-weight: 600; font-size: 14px; }
.doc-btns .btn.none { border-style: dashed; background: transparent; }
.doc-btns .btn svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .tpl-types, .doc-btns { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 구매요청현황 · 사진 ---------- */
.stat.click { cursor: pointer; }
.stat.click:hover { border-color: var(--main); }
.req-alert { border-color: var(--main); background: var(--main-soft); }
.ph-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-list-edit { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ph-cell { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: var(--card2); }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cell button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--point); color: #fff; font-weight: 800; font-size: 18px; line-height: 26px; cursor: pointer; padding: 0; }
.ph-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-mid { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line2); cursor: zoom-in; background: var(--card2); }
.ph-big { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.ph-n { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ph-n svg { width: 18px; height: 18px; }
.flow-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--main); border-radius: 8px; font-weight: 600; }
.flow-hint svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--main); }
@media (max-width: 760px) { .ph-mid { width: 110px; height: 110px; } }

/* ---------- 전자결재 연도·월별 ---------- */
.ap-run { border-color: var(--main); }
.ap-run h2 .chip { margin-left: 6px; }
.list-item.my-turn { border-color: var(--point); box-shadow: 0 0 0 1px var(--point) inset; }
.month-bar { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; margin-bottom: 12px; }
.month-bar .mb { border: 1px solid var(--line); background: var(--card2); color: var(--text); border-radius: 8px; padding: 7px 2px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font); font-size: 16px; }
.month-bar .mb small { font-size: 14px; font-weight: 600; }
.month-bar .mb.zero { background: transparent; border-style: dashed; }
.month-bar .mb.on { background: var(--main); color: var(--on-main); border-color: var(--main); }
.ap-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 10px; font-weight: 600; }
.ap-sum b { font-size: 18px; }
@media (max-width: 860px) { .month-bar { grid-template-columns: repeat(7, 1fr); } }

/* ---------- 조직도 결재라인 ---------- */
.ap-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ap-step { flex: 1; min-width: 220px; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ap-h { font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.ap-no { width: 28px; height: 28px; border-radius: 50%; background: var(--main); color: var(--on-main); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.ap-arrow { display: flex; align-items: center; font-size: 26px; font-weight: 800; color: var(--main); }
.ap-who { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.ap-chip { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--main); }
.ap-chip small { font-size: 14px; margin-left: auto; }
.ap-chip button { border: 0; background: var(--point); color: #fff; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; cursor: pointer; padding: 0; line-height: 24px; flex-shrink: 0; }
.ap-empty { font-weight: 700; padding: 7px 0; }
.ap-note { font-size: 15px; font-weight: 600; }
.ap-note.bad { color: var(--point); font-weight: 800; }
.ap-add { display: flex; gap: 6px; margin-top: auto; }
.ap-add select { flex: 1; min-width: 0; }
@media (max-width: 860px) { .ap-arrow { width: 100%; justify-content: center; transform: rotate(90deg); } }

/* ---------- 종합 업무실적 직원별 · 예산 ---------- */
.view-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.view-tabs .vt { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); font-weight: 800; font-size: 17px; color: var(--text); cursor: pointer; font-family: var(--font); display: inline-flex; align-items: center; gap: 6px; }
.view-tabs .vt svg { width: 20px; height: 20px; }
.view-tabs .vt.on { background: var(--main); color: var(--on-main); border-color: var(--main); }
.bud-inp { width: 160px; text-align: right; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 6px; background: var(--card2); color: var(--text); font-weight: 700; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.person .ph { display: flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.person dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.person dt { font-weight: 600; }
.person dd { margin: 0; text-align: right; font-weight: 800; }
.tbl tr.sum td { background: var(--card2); border-top: 2px solid var(--main); }

/* ---------- 총 예산 카드 ---------- */
.bud-card { border-color: var(--main); }
.bud-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bud-in { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.bud-inp.big { width: 240px; font-size: 22px; padding: 9px 12px; }
.bud-nums { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-width: 520px; }
.bud-nums > div { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.bud-nums span { font-weight: 600; font-size: 15px; }
.bud-nums b { font-size: 21px; }
.bud-nums small { font-size: 14px; font-weight: 600; }
.bud-bar { position: relative; height: 18px; border-radius: 9px; background: var(--card2); margin-top: 14px; overflow: visible; }
.bud-bar i { display: block; height: 100%; border-radius: 9px; background: var(--main); }
.bud-bar i.over { background: var(--point); }
.bud-bar em { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #fff; border-radius: 2px; }
@media (max-width: 860px) { .bud-nums { min-width: 0; grid-template-columns: repeat(2, 1fr); } .bud-inp.big { width: 100%; } .bud-in { width: 100%; } }

/* ---------- 결재 역할 체크칸 ---------- */
.role-chks { display: flex; gap: 8px; flex-wrap: wrap; }
.role-chks .chk { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card2); font-weight: 700; cursor: pointer; }
.role-chks .chk input { width: 18px; height: 18px; accent-color: var(--main); }
.role-chks .chk:has(input:checked) { border-color: var(--main); background: var(--main-soft); }
.role-chks .chk.off { border-style: dashed; cursor: not-allowed; }

/* ---------- 결재라인 드롭다운 체크박스 ---------- */
.ms-drop { flex: 1; min-width: 0; position: relative; }
.ms-drop summary { list-style: none; cursor: pointer; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.ms-drop summary::-webkit-details-marker { display: none; }
.ms-drop summary::after { content: '▾'; margin-left: auto; }
.ms-drop[open] summary { border-color: var(--main); }
.ms-panel { position: absolute; left: 0; min-width: 300px; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow: auto; background: var(--dark); border: 1px solid var(--main); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.ms-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.ms-opt:hover { background: var(--card2); }
.ms-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--main); flex-shrink: 0; }
.ms-opt span { display: flex; flex-direction: column; }
.ms-opt small { font-size: 14px; font-weight: 600; }
.ms-opt em { font-style: normal; white-space: nowrap; }
.ms-opt.off { cursor: not-allowed; }
.ms-opt.off span { text-decoration: line-through; }
.ap-add { align-items: flex-start; }
.org-box li.org-extra { justify-content: center; border-top: 1px dashed var(--line2); }

/* ---------- 직원 사진 ---------- */
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--main); color: var(--on-main); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.xl { width: 96px; height: 96px; font-size: 38px; border: 3px solid var(--main); }
.org-box li { align-items: center; }
.org-box li .av { margin-right: 2px; }
.org-box li b { margin-right: auto; }
.org-box li.org-more { justify-content: center; border-top: 1px dashed var(--line2); cursor: default; font-weight: 700; margin-top: 4px; padding-top: 6px; }
.org-box li.org-more:hover { color: var(--text); }
.mem-photo { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.mem-ph-btn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mem-ph-btn p { width: 100%; }
.nm-cell { display: flex; align-items: center; gap: 8px; }
.org-box { min-width: 175px; }
.org-box li b, .org-box li span:not(.av) { white-space: nowrap; }
.org-box .dn { white-space: nowrap; }
.org-box li.org-more { white-space: nowrap; gap: 4px; }
.av[data-av] { cursor: zoom-in; border: 2px solid var(--main); }
.av.xl.empty { background: transparent; border: 2px dashed var(--line2); color: var(--text); }
.av-none svg { width: 34px; height: 34px; }
.ph-zoom { display: flex; justify-content: center; }
.ph-zoom img { max-width: 100%; max-height: 70vh; border-radius: 12px; border: 3px solid var(--main); }
.mem-photo .av:not(.empty) { cursor: zoom-in; }

/* ---------- 견적 금액 3칸 ---------- */
.amt-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.amt-card { flex: 1; min-width: 170px; background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.amt-card label { font-weight: 800; font-size: 16px; }
.amt-card input { width: 100%; padding: 9px 34px 9px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); color: var(--text); font-size: 20px; font-weight: 800; text-align: right; font-family: var(--font); }
.amt-card span { position: absolute; right: 22px; bottom: 21px; font-weight: 700; }
.amt-card.nego { border-color: var(--up); }
.amt-card.final { border-color: var(--main); background: var(--main-soft); }
.amt-op { display: flex; align-items: center; font-size: 28px; font-weight: 800; color: var(--main); }
@media (max-width: 760px) { .amt-op { width: 100%; justify-content: center; } }

/* ---------- 품목 중복 알림 · 품목 표 간격 ---------- */
.dup-box { border: 2px solid var(--point); border-radius: 10px; padding: 10px 12px; background: rgba(255, 90, 95, .12); display: flex; flex-direction: column; gap: 4px; }
.dup-box > b { color: var(--point); }
.item-tbl th, .item-tbl td { padding: 9px 16px; white-space: nowrap; }
.item-tbl td.note-cell { white-space: normal; min-width: 160px; max-width: 280px; }

/* =====================================================================
   표 공통 간격 (모든 메뉴의 표에 똑같이 적용)
   · 칸 안쪽 여백을 넓히고 줄바꿈 없이 한 줄로
   · 숫자(오른쪽 정렬) 칸 바로 뒤의 글자 칸은 간격을 더 띄워 붙어 보이지 않게
   · 긴 글(주소·비고 등)은 .wrap 칸만 여러 줄 허용
   ===================================================================== */
.tbl th, .tbl td { padding: 10px 16px; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: 14px; }
.tbl td.r + td:not(.r):not(.c), .tbl th.r + th:not(.r):not(.c) { padding-left: 34px; }
.tbl td.c + td.r, .tbl th.c + th.r { padding-left: 28px; }
.tbl td.wrap, .tbl th.wrap { white-space: normal; min-width: 180px; max-width: 340px; }
.tbl tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.tbl tr.click:hover td { background: var(--main-soft); }
.tbl td .btn.sm { margin: -2px 0; }
.dash .tbl th, .dash .tbl td { padding: 7px 10px; }
.dash .tbl td.r + td:not(.r):not(.c), .dash .tbl th.r + th:not(.r):not(.c) { padding-left: 18px; }
.up-tbl .tbl td, .up-tbl .tbl th { padding: 6px 10px; }
.item-tbl th, .item-tbl td { padding: 10px 16px; }

/* ---------- 구매진행현황: 진행상태 6카드 + 가운데 정렬 표 ---------- */
.g6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .g6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .g6 { grid-template-columns: repeat(2, 1fr); } }
.stat.click { cursor: pointer; }
.stat.click:hover { border-color: var(--main); }
.stat.on { border: 2px solid var(--main); box-shadow: 0 0 0 3px rgba(255,140,0,.18); }
.tbl.ctr th, .tbl.ctr td { text-align: center; padding: 12px 20px; }
.tbl.ctr td.r + td:not(.r):not(.c), .tbl.ctr th.r + th:not(.r):not(.c) { padding-left: 20px; }
.tbl td.stg { white-space: nowrap; }
.tbl td.stg .chip { margin: 2px 3px; }
.pstate-cards { margin-bottom: 14px; }

/* ---------- 모든 메뉴의 표: 가운데 정렬 + 좌우 간격 통일 (2026-10-26) ---------- */
.tbl th, .tbl td, .tbl th.r, .tbl td.r, .tbl th.c, .tbl td.c { text-align: center; padding: 12px 20px; }
.tbl td.r + td:not(.r):not(.c), .tbl th.r + th:not(.r):not(.c) { padding-left: 20px; }
.tbl td .ph-n, .tbl td .chip { vertical-align: middle; }
.dash .tbl th, .dash .tbl td { padding: 8px 12px; }

/* ---------- 작업 기록 (관리자 전용) ---------- */
.audit-cards { margin-bottom: 14px; }
.audit-cards .stat.on { border: 2px solid var(--main); }