/* 2026-10-24 화면 재디자인 3단 — 담당자(업무) 화면 (설계결정 R7·R11) 배색 D: 주색 슬레이트 #2F3E52 · CI 자주는 상단 띠·푸터만(업무 버튼에 쓰지 않는다 — 확정·부적합 버튼이 경고색과 헷갈린다) 가독성 D17: 조작 14px/1.6 · 보조 하한 12px · 읽기 15px/1.75 · 흐린 글자 #6B7280 이상 · 수치 고정폭 🔴 상태색(초록·노랑·빨강)과 소싱 배지 색은 의미가 붙어 있어 그대로 둔다. styles.css → home.css 다음에 읽힌다. 되돌리려면 이 파일 링크 한 줄만 뺀다. */ body.staff{--primary:#2F3E52;--primary-hover:#1F2A38;--tint:#EEF1F5;--tint2:#DDE3EA;--mid:#9AA6B5; --mut2:#6B7280;--app-bg:#F3F4F6;--sw:1180px; font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums} /* ── 셸: 자주 띠 → 흰 헤더(사용자·로고·메뉴) → 본문 → 자주 푸터. 좌우선은 본문(1180)과 맞춘다 ── */ body.staff .ci-strip{display:flex;padding:8px max(20px,calc((100% - var(--sw))/2 + 20px))} /* 공개 홈페이지로 가는 버튼(2026-10-24 민부장 지시) — 브랜드 줄 오른쪽 끝 */ body.staff .brand-row{align-items:center} body.staff .btn-site{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px; border:1px solid var(--line);background:#fff;color:var(--primary);font-size:14px;font-weight:700;white-space:nowrap} body.staff .btn-site::before{content:"";width:14px;height:14px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E") center/contain no-repeat} body.staff .btn-site:hover{text-decoration:none;border-color:var(--primary);background:var(--tint)} .btn-site{display:none} body.staff .util-strip{background:#fff;color:var(--mut);font-size:12.5px;justify-content:flex-end; padding:6px max(20px,calc((100% - var(--sw))/2 + 20px)) 0} body.staff .util-strip>span:first-child{display:none} /* 소속 문구는 자주 띠가 대신한다 */ body.staff .util-strip .who{color:var(--ink2)} body.staff .util-strip button{color:var(--primary);font-size:12.5px;font-weight:600} body.staff .util-strip button:hover{color:var(--ci)} body.staff .brand-row{padding:4px max(20px,calc((100% - var(--sw))/2 + 20px)) 10px;border-bottom:none} body.staff .brand-row .logo{font-size:19px;font-weight:800;letter-spacing:-.01em} body.staff .brand-row .portal{font-size:13.5px} body.staff .gnb{padding:0 max(20px,calc((100% - var(--sw))/2 + 20px));border-bottom:1px solid var(--line)} body.staff .gnb a{font-size:14.5px;padding:10px 16px} /* 활성 밑줄(margin-bottom:-2px)이 세로 넘침을 만들어 오른쪽 끝에 스크롤 화살표가 보이던 것 */ body.staff .gnb,body.staff .tabs{overflow-y:hidden;scrollbar-width:thin} body.staff .gnb a.active{border-bottom-color:var(--ci)} body.staff .crumb{padding:10px max(20px,calc((100% - var(--sw))/2 + 20px)) 0;font-size:12.5px} body.staff .page{max-width:var(--sw)} body.staff #staffFoot{max-width:none;margin-top:24px;background:var(--ci);color:#F6DCE6;border:none;font-size:12.5px; line-height:1.7;padding:18px max(20px,calc((100% - var(--sw))/2 + 20px)) 22px} /* ── 사이드 메뉴 골격 (설계결정_관리자화면 G2) — 메뉴 왼쪽 · 본문 오른쪽, 좌우선은 1180 안 ── */ .side{display:none} body.staff .gnb{display:none} body.staff .shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;max-width:var(--sw); margin:0 auto;padding:0 20px} body.staff .page{max-width:none;margin:0;padding:6px 0 60px} body.staff .side{display:block;position:sticky;top:12px;align-self:start;padding:16px 0 24px} /* 대분류(업무·홈페이지·설정·기록)를 누르면 세부 항목이 펼쳐진다 (2026-10-25 민부장 지시) */ .side-g{margin-bottom:6px} .side-t{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0;border-radius:8px; background:transparent;font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left} .side-t:hover{background:#fff} .side-t:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .side-g.act .side-t{color:var(--primary)} .side-g.open .side-t{background:#fff;box-shadow:0 1px 0 var(--line)} .side-tl{flex:1} .side-n{font-size:12px;font-weight:600;color:var(--mut);background:var(--line2);border-radius:10px;padding:1px 7px} .side-c{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s;margin:0 3px 0 2px} .side-g.open .side-c{transform:rotate(45deg)} .side-sub{display:none;margin:4px 0 10px 16px;padding-left:6px;border-left:2px solid var(--line)} .side-g.open .side-sub{display:block} .side a{display:block;padding:7px 10px;border-radius:6px;font-size:14px;font-weight:500;color:var(--ink2); border-left:3px solid transparent} .side a:hover{background:#fff;color:var(--primary);text-decoration:none} .side a.on{background:#fff;color:var(--primary);font-weight:700;border-left-color:var(--primary);box-shadow:0 1px 0 var(--line)} @media(prefers-reduced-motion:reduce){.side-c{transition:none}} body.staff .crumb{display:none} @media(max-width:900px){ body.staff .shell{grid-template-columns:minmax(0,1fr);gap:0} body.staff .side{position:static;display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none} body.staff .side::-webkit-scrollbar{display:none} .side-g{display:flex;gap:4px;margin:0;align-items:center} .side-t{display:none} .side-sub,.side-g.open .side-sub{display:flex;gap:4px;margin:0;padding:0;border:0} .side a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;border-radius:6px 6px 0 0} .side a.on{border-bottom-color:var(--primary)} } /* 공통 머리 틀 (G7) — 제목 · 한 줄 설명 · 주의 · 주 행동 오른쪽 위 */ .pg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:16px 0 16px} .pg-h .page-title{margin:0 0 4px} .pg-d{margin:0;color:var(--ink2);font-size:14px;line-height:1.6} .pg-w{margin:6px 0 0;color:var(--warn);font-size:13px;font-weight:600} .pg-w::before{content:"⚠ "} .pg-act{flex:none;display:flex;gap:8px} .pg-act:empty{display:none} /* 할 일 홈 (G3) — 숫자 타일 · 원장 막대 · 파이프라인 가로 막대 · 홈페이지 오늘 */ .hm-total{font-size:16px;font-weight:700;color:var(--ci);margin-left:6px} .hm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:16px} .hm-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px solid var(--line); border-radius:8px;padding:12px 14px;text-align:left;cursor:pointer} body.staff .hm-tile{padding:12px 14px} .hm-tile b{font-size:26px;font-weight:800;color:var(--primary);line-height:1.15} .hm-tile span{font-size:13px;color:var(--ink2);font-weight:600} .hm-tile:hover{border-color:var(--primary)} .hm-tile.zero{background:transparent;border-style:dashed} .hm-tile.zero b{color:var(--mut2)} .hm-tile.zero span{color:var(--mut)} .hm-none{color:var(--mut);font-size:13.5px;margin:4px 2px 12px} .hm-led{margin-bottom:12px} .hm-led-h{display:flex;justify-content:space-between;align-items:baseline;font-size:14px} .hm-bar{height:8px;border-radius:4px;background:var(--tint);margin:6px 0 4px;overflow:hidden} .hm-bar i{display:block;height:100%;background:var(--primary)} .hm-pipe{display:flex;gap:3px;min-height:52px} .hm-pipe-s{min-width:52px;background:var(--tint);border-radius:4px;padding:6px 8px;display:flex;flex-direction:column} .hm-pipe-s b{font-size:16px;color:var(--primary)} .hm-pipe-s span{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hm-site{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hm-site>*{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:6px;padding:8px 10px;color:var(--ink2)} .hm-site a:hover{border-color:var(--primary);text-decoration:none} .hm-site b{font-size:20px;color:var(--primary)} .hm-site span span,.hm-site a span{font-size:12.5px} .home .bucket{scroll-margin-top:12px} .hm-tile.static{cursor:default} .hm-tile.static:hover{border-color:var(--line)} /* 추천 확정 (G6) — 원장을 오른쪽에 고정해 남은 수를 보며 확정한다. 좁으면 한 줄로 */ .rec-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start} .rec-side{position:sticky;top:12px} a.pill{text-decoration:none} a.pill:hover{text-decoration:underline} @media(max-width:1100px){.rec-grid{grid-template-columns:minmax(0,1fr)}.rec-side{position:static;order:-1}} /* 기업 목록 거름 · 상세 상태 막대·다음 할 일 (G4) */ .cf{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px} body.staff .cf input{flex:1;min-width:200px;max-width:340px} body.staff .cf select{width:auto} body.staff .cf input[type=date]{flex:0 0 auto;min-width:0;width:150px} .seg-v{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-left:auto} body.staff .seg-v button{border:none;border-radius:0;padding:7px 14px;background:#fff} body.staff .seg-v button.on{background:var(--primary);color:#fff} .ctbl td{vertical-align:middle} .cbar{list-style:none;display:flex;gap:3px;margin:0 0 10px;padding:0;flex-wrap:wrap} .cbar li{flex:1;min-width:84px;text-align:center;padding:7px 6px;font-size:13px;font-weight:600;background:#fff; color:var(--mut);border:1px solid var(--line2);border-radius:4px} .cbar li.done{color:var(--primary);background:var(--tint)} .cbar li.now{background:var(--primary);color:#fff;border-color:var(--primary)} .cbar li.off{flex:none;background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .cnext{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line); border-left:3px solid var(--primary);border-radius:6px;padding:10px 14px;margin-bottom:12px} .cnext-l{font-size:12.5px;font-weight:700;color:var(--mut)} .cnext b{font-size:15px;color:var(--ink)} /* ── 제목·카드 ── */ body.staff .page-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:16px 0 14px} body.staff .card{border-radius:8px;padding:18px 20px} body.staff .card h3{font-size:15.5px;color:var(--ink)} body.staff .card .sub{font-size:12.5px} body.staff .kpi .l{font-size:12.5px} /* ── 표·폼·버튼 (조작 14px) ── */ body.staff table{font-size:14px} body.staff th{font-size:13px;color:var(--ink2);background:var(--tint)} body.staff td,body.staff th{padding:9px 12px;line-height:1.55} body.staff button,body.staff .btn{font-size:14px;border-radius:6px;padding:8px 14px;line-height:1.5} /* 링크로 된 버튼()이 글자 기준선에 앉아 옆