*{box-sizing:border-box}html,body{margin:0;width:100%;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR",sans-serif;background:#eef3fb;color:#111827}button,input,select,textarea{font:inherit}button{border:0;border-radius:14px;background:#24385f;color:#fff;font-weight:800;padding:12px 14px}input,select,textarea{width:100%;border:1px solid #dbe4f0;border-radius:14px;padding:13px;background:#fff}textarea{min-height:96px}.splash{position:fixed;inset:0;background:#fff;z-index:99999;display:flex;align-items:center;justify-content:center;animation:fadeOut .25s ease 1s forwards}.splash-logo{font-size:min(56px,14vw);font-weight:900;letter-spacing:-.06em;white-space:nowrap;padding:30px;color:#56545a}.splash-logo .green{color:#65765d}@keyframes fadeOut{to{opacity:0;visibility:hidden}}.login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:min(420px,100%);background:#fff;border-radius:28px;padding:32px 24px;box-shadow:0 20px 50px rgba(15,23,42,.12)}.login-card h1{font-size:30px;margin:0 0 24px}.login-card input{margin-bottom:12px}.login-card button{width:100%;margin-top:6px}.login-card p{color:#e11d48;font-weight:700}.app-view{max-width:1120px;margin:0 auto;padding:16px 16px 110px}.topbar{position:sticky;top:0;z-index:20;background:#fff;border-radius:24px;padding:16px 18px;margin-bottom:14px;box-shadow:0 10px 28px rgba(18,27,47,.08);display:flex;align-items:center;justify-content:space-between}.topbar strong{font-size:24px;font-weight:900;letter-spacing:-.05em}.topbar span{display:block;color:#667085;font-size:13px;font-weight:800}.top-icons{display:flex;gap:10px}.top-icons button{width:34px;height:34px;padding:0;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:80%}.i-phone{background-image:url('/icon_phone.png')}.i-nav{background-image:url('/icon_nav.png')}.i-alarm{background-image:url('/icon_alarm.png')}.i-alarm.red{background-image:url('/icon_alarm_red.png')}.page{display:none}.page.active{display:block}.hero{background:linear-gradient(135deg,#2157e6,#24385f);color:#fff;border-radius:24px;padding:24px;margin-bottom:14px}.hero h2{margin:0 0 8px;font-size:28px}.hero p{margin:0;color:#dbeafe}.box{background:#fff;border:1px solid #e6edf7;border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:0 8px 24px rgba(18,27,47,.06)}.box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.box-head h2,.box h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.05em}.box-head button{padding:9px 12px}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-grid button{background:#fff;color:#111827;border:1px solid #e6edf7;text-align:left;min-height:86px}.quick-grid b{display:block;font-size:16px}.quick-grid span{display:block;color:#667085;margin-top:5px;font-size:13px}.list{display:grid;gap:10px}.small-list{max-height:280px;overflow:auto}.card-row{background:#fff;border:1px solid #e6edf7;border-radius:16px;padding:14px}.card-row strong{display:block}.muted{color:#667085;font-size:13px}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:#fff;border-radius:22px;padding:18px}.form label{font-weight:800;font-size:13px}.wide{grid-column:1/-1}.table-wrap{overflow:auto;background:#fff;border-radius:18px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px}th{color:#667085}.search{margin-bottom:12px}.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.release-item{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px}.bottom-nav{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;width:calc(100% - 18px);max-width:540px;background:#fff;border:1px solid #e8edf5;border-radius:26px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 -8px 28px rgba(15,23,42,.18)}.bottom-nav button{background:transparent;color:#24385f;padding:6px 0;border-radius:16px}.bottom-nav span{display:block;font-size:11px;margin-top:2px}.sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:1090}.sheet-backdrop.open{display:block}.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);z-index:1100;width:min(540px,100%);background:#fff;border-radius:26px 26px 0 0;padding:18px;max-height:82vh;overflow:auto;transition:.22s}.sheet.open{transform:translate(-50%,0)}.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sheet-head button{background:#eef2f7;color:#111827}.sheet-link{display:block;width:100%;text-align:left;background:#fff;color:#111827;border:1px solid #e6edf7;margin-bottom:8px}.hide{display:none!important}@media(min-width:769px){.app-view{padding-bottom:40px}.bottom-nav{position:sticky;bottom:auto;transform:none;left:auto;margin:0 auto 18px;max-width:720px;order:-1}.page{background:#fff;border-radius:24px;padding:24px}.page#homePage{background:transparent;padding:0}.form{grid-template-columns:repeat(3,1fr)}.topbar{padding:20px 26px}.topbar strong{font-size:28px}}@media(max-width:480px){.app-view{padding:10px 9px 112px}.quick-grid{grid-template-columns:1fr 1fr}.form{grid-template-columns:1fr}.release-item{grid-template-columns:1fr}.box-head h2,.box h2{font-size:22px}.topbar strong{font-size:22px}}
/* permission UI */
#roleBadge{
display:inline-block!important;
margin-top:4px;
padding:4px 8px;
border-radius:999px;
background:#eef5ff;
color:#1d4ed8;
}
.login-card .auto-note{
font-size:12px;
color:#667085;
margin-top:10px;
}
/* real working forms + contact sheet */
.sheet-section-title{font-weight:800;margin:12px 4px 8px;color:#0f172a;font-size:14px}
/* 전체메뉴 하위 항목(관리 > 직원/창고) — 들여쓰기로 상하 관계를 보여준다. */
.sheet-link.sub{width:calc(100% - 14px);margin-left:14px}
.contact-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.contact-quick-grid a,.contact-list a{display:flex;justify-content:space-between;gap:8px;align-items:center;text-decoration:none;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-weight:700}
.contact-quick-grid span,.contact-list span{font-size:12px;color:#64748b;font-weight:600}.contact-list{max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:12px}.v102-modal{position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:9999;display:flex;align-items:flex-end;justify-content:center}.v102-modal-card{background:white;width:min(680px,100%);max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:18px;box-shadow:0 -14px 40px rgba(0,0,0,.18)}@media(min-width:760px){.v102-modal{align-items:center}.v102-modal-card{border-radius:22px;width:640px}}.v102-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.v102-modal-head strong{font-size:20px}.v102-modal-head button{border:0;border-radius:12px;background:#e5e7eb;padding:8px 12px}.v102-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.v102-form label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:13px}.v102-form input,.v102-form textarea{border:1px solid #cbd5e1;border-radius:12px;padding:12px;font-size:15px}.v102-form .wide{grid-column:1/-1}.v102-actions{display:flex;gap:10px;margin-top:14px}.v102-actions button{flex:1;border:0;border-radius:14px;padding:14px;background:#0f172a;color:white;font-weight:900}.v102-actions .secondary{background:#e5e7eb;color:#111827}
.price-sub-info{font-size:12px;color:#64748b;margin-top:3px;line-height:1.45}
/* PC dashboard layout fix */
@media (min-width: 900px){
body{background:#eef3fb;}
.app-view{
max-width:1440px;
min-height:100vh;
margin:0 auto;
padding:22px 28px 40px;
display:grid;
grid-template-columns:240px minmax(0,1fr);
grid-template-rows:auto 1fr;
gap:18px;
align-items:start;
}
.topbar{
grid-column:1 / -1;
position:sticky;
top:14px;
margin:0;
border-radius:26px;
}
.bottom-nav{
grid-column:1;
grid-row:2;
position:sticky;
top:118px;
left:auto;
bottom:auto;
transform:none;
width:100%;
max-width:none;
margin:0;
padding:14px;
display:flex;
flex-direction:column;
gap:8px;
border-radius:26px;
box-shadow:0 16px 36px rgba(15,23,42,.10);
}
.bottom-nav button{
width:100%;
min-height:54px;
display:flex;
align-items:center;
gap:12px;
justify-content:flex-start;
padding:12px 14px;
border-radius:18px;
font-size:18px;
color:#24385f;
}
.bottom-nav button:hover{background:#eef5ff;}
.bottom-nav span{font-size:14px;margin:0;font-weight:900;}
.page{
grid-column:2;
grid-row:2;
min-width:0;
background:transparent;
padding:0;
}
.page.active{display:block;}
.hero{
padding:30px;
border-radius:28px;
margin-bottom:18px;
}
.hero h2{font-size:34px;}
.box{
border-radius:26px;
padding:22px;
margin-bottom:18px;
}
#homePage.active{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:18px;
}
#homePage .hero{grid-column:1 / -1;}
#homePage .box{margin-bottom:0;}
#homePage .box:nth-of-type(2){grid-column:1 / -1;}
.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
#homePage .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.table-wrap{border:1px solid #e6edf7;}
.form{grid-template-columns:repeat(3,minmax(0,1fr));}
.sheet{width:min(560px,92vw);border-radius:28px;left:auto;right:28px;bottom:28px;transform:translateY(120%);}
.sheet.open{transform:translateY(0);}
.sheet-backdrop.open{display:block;}
}
/* PC dashboard final - true left sidebar + right dashboard */
@media (min-width: 1024px){
html, body{min-height:100%; background:#eef3fb;}
.app-view{
width:100%;
max-width:1600px;
min-height:100vh;
margin:0 auto;
padding:24px 32px 44px;
display:grid!important;
grid-template-columns:264px minmax(0,1fr);
grid-template-rows:auto 1fr;
gap:20px;
align-items:start;
}
.topbar{
grid-column:2!important;
grid-row:1!important;
position:sticky;
top:18px;
z-index:30;
margin:0!important;
border-radius:28px;
padding:20px 26px;
min-height:78px;
}
.topbar strong{font-size:28px;}
.bottom-nav{
grid-column:1!important;
grid-row:1 / span 2!important;
position:sticky!important;
top:24px!important;
left:auto!important;
bottom:auto!important;
transform:none!important;
width:100%!important;
max-width:none!important;
height:calc(100vh - 48px);
margin:0!important;
padding:22px 16px!important;
display:flex!important;
flex-direction:column!important;
gap:10px!important;
background:#fff!important;
border:1px solid #e4ebf5!important;
border-radius:30px!important;
box-shadow:0 20px 48px rgba(15,23,42,.10)!important;
}
.bottom-nav:before{
content:'정솔푸드';
display:block;
margin:4px 10px 16px;
font-size:24px;
font-weight:950;
letter-spacing:-.06em;
color:#0f172a;
}
.bottom-nav button{
width:100%!important;
min-height:56px;
padding:14px 16px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:14px!important;
background:transparent!important;
color:#24385f!important;
border-radius:18px!important;
font-size:18px!important;
text-align:left!important;
}
.bottom-nav button:hover,
.bottom-nav button:focus{background:#eef5ff!important; outline:none;}
.bottom-nav span{display:inline!important; margin:0!important; font-size:15px!important; font-weight:900!important;}
.page{
grid-column:2!important;
grid-row:2!important;
min-width:0;
width:100%;
background:transparent!important;
padding:0!important;
border-radius:0!important;
}
.page.active{display:block!important;}
#homePage.active{
display:grid!important;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:20px;
}
#homePage .hero{grid-column:1 / -1; margin:0; border-radius:30px; padding:32px;}
#homePage .hero h2{font-size:36px;}
#homePage > .box{margin:0; border-radius:28px; padding:24px;}
#homePage > .box:nth-of-type(1){grid-column:1 / 6;}
#homePage > .box:nth-of-type(2){grid-column:6 / -1;}
#homePage > .box:nth-of-type(3){grid-column:1 / 7;}
#homePage > .box:nth-of-type(4){grid-column:7 / -1;}
.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.quick-grid button{min-height:104px; border-radius:20px; padding:18px;}
.box{border-radius:28px; padding:24px; margin-bottom:20px;}
.box-head h2,.box h2{font-size:25px;}
.form{grid-template-columns:repeat(3,minmax(0,1fr));}
.table-wrap{border:1px solid #e6edf7;}
th,td{font-size:15px; padding:14px;}
.small-list{max-height:360px;}
.sheet{width:min(560px,92vw); border-radius:28px; left:auto!important; right:32px; bottom:32px; transform:translateY(120%);}
.sheet.open{transform:translateY(0)!important;}
}
@media (min-width: 1024px) and (max-width: 1180px){
.app-view{grid-template-columns:220px minmax(0,1fr); padding:18px; gap:16px;}
.bottom-nav{height:calc(100vh - 36px); top:18px!important;}
#homePage > .box:nth-of-type(1),
#homePage > .box:nth-of-type(2),
#homePage > .box:nth-of-type(3),
#homePage > .box:nth-of-type(4){grid-column:1 / -1;}
}
/* mobile center lock + scroll pickers */
html,body{max-width:100%;overflow-x:hidden!important;}
@media (max-width: 768px){
body{width:100%;position:relative;overscroll-behavior-x:none;}
.app-view{width:100%;max-width:540px;margin-left:auto!important;margin-right:auto!important;padding-left:10px!important;padding-right:10px!important;overflow-x:hidden;}
.topbar,.hero,.box,.page,.form,.table-wrap,.quick-grid,.list{max-width:100%;min-width:0;}
.topbar{width:100%;}
.top-icons{flex-shrink:0;}
.quick-grid{min-width:0;}
.quick-grid button{min-width:0;overflow:hidden;}
.bottom-nav{left:50%!important;right:auto!important;width:calc(100vw - 20px)!important;max-width:520px!important;transform:translateX(-50%)!important;}
.v102-modal-card{width:calc(100vw - 18px)!important;max-width:540px;}
}
/* 출고증 보내기 메뉴 + 드롭다운 안정화 */
.bottom-nav{
grid-template-columns:repeat(6,1fr) !important;
}
.pc-release-nav{
display:block !important;
}
@media (min-width:1024px){
.bottom-nav .pc-release-nav{
display:flex !important;
}
}
@media (max-width:768px){
.bottom-nav{
grid-template-columns:repeat(6,1fr) !important;
}
.bottom-nav button{
font-size:12px !important;
}
.bottom-nav span{
font-size:10px !important;
}
}
#relRegion,#relWhName{
background:#fff;
cursor:pointer;
}
/* 모바일 하위 메뉴 5개 기존 크기 복구 */
.bottom-nav{
grid-template-columns:repeat(5,1fr) !important;
}
/* 모바일에서는 출고증 보내기 빠른 메뉴 숨김 */
@media (max-width:1023px){
.bottom-nav .pc-release-nav,
.pc-release-nav{
display:none !important;
}
.bottom-nav{
grid-template-columns:repeat(5,1fr) !important;
}
.bottom-nav button{
font-size:14px !important;
}
.bottom-nav span{
font-size:12px !important;
}
}
/* PC에서는 출고증 보내기 메뉴 표시 */
@media (min-width:1024px){
.bottom-nav{
grid-template-columns:1fr !important;
}
.bottom-nav .pc-release-nav,
.pc-release-nav{
display:flex !important;
}
}
/* 출고증 미리보기 팝업 */
.release-preview-modal{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.62);align-items:center;justify-content:center;padding:18px;box-sizing:border-box;}
.release-preview-panel{width:min(920px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.25);padding:16px;}
.release-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;position:sticky;top:0;background:#fff;z-index:1;padding-bottom:10px;border-bottom:1px solid #e5e7eb;}
.release-preview-head button{border:0;border-radius:10px;background:#0f172a;color:#fff;padding:9px 14px;font-weight:800;}
/* 브랜드만 적고 부위를 빠뜨린 행 경고. 생김새는 .fax-balance-banner 를 그대로 쓰고,
여기서는 A4 미리보기와 좌우를 맞추는 폭만 더한다.
#releasePreview 바깥에 둬야 팩스 PDF에 찍히지 않는다(@media print 에서도 숨긴다). */
.release-item-warn{max-width:794px;margin-inline:auto;line-height:1.6;}
.release-preview-doc{max-width:794px;margin:0 auto;background:#fff;color:#111;font-size:14px;}
.preview-open{overflow:hidden;}
.a4-doc-logo{text-align:center;margin:4px 0 8px;}
.a4-doc-logo img{max-height:42px;max-width:180px;object-fit:contain;}
.a4-title{text-align:center;font-size:28px;font-weight:900;letter-spacing:.08em;margin:6px 0 16px;}
.a4-top{display:grid;grid-template-columns:1fr 170px;border:2px solid #111;margin-bottom:10px;}
.a4-top div{padding:10px;border-right:1px solid #111;font-weight:800;display:flex;align-items:center;}.a4-top div:last-child{border-right:0;text-align:center;justify-content:center;}
.a4-top .a4-wh-name{font-size:1.6em;font-weight:900;letter-spacing:.01em;}
.a4-main-table,.a4-info,.a4-company table{width:100%;border-collapse:collapse;margin-bottom:10px;}
.a4-main-table th,.a4-main-table td,.a4-info th,.a4-info td,.a4-company th,.a4-company td{border:1px solid #111;padding:9px;vertical-align:middle;}
.a4-main-table th,.a4-info th,.a4-company th{background:#f3f4f6;font-weight:900;text-align:center;}
.a4-main-table td:first-child{text-align:center;width:54px;}
/* 수량 열은 미리보기·팩스 전송(동일 DOM 캡처) 모두 가운데 정렬 */
.a4-main-table td:nth-child(4){text-align:center;}
.a4-memo{border:2px solid #111;min-height:54px;padding:10px 12px;margin-bottom:10px;background:#fff7cc;display:flex;align-items:center;gap:10px;}
.a4-memo-label{flex:0 0 auto;font-weight:900;font-size:14px;background:#111;color:#fff;padding:3px 10px;border-radius:4px;}
.a4-memo-text{flex:1 1 auto;font-size:20px;font-weight:900;line-height:1.3;color:#111;}
.a4-company{display:grid;grid-template-columns:1fr 230px;gap:10px;align-items:center;}
.stamp-area{position:relative;min-height:165px;border:1px solid #111;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;}
.stamp-area .nameplate{max-width:310px;max-height:135px;object-fit:contain;}
.stamp-area .seal{position:absolute;right:22px;bottom:18px;width:92px;height:92px;object-fit:contain;}
/* 출고증 입력폼 정렬(3열): 물건 화주를 새 행 첫 칸에서 시작해 (출고일자) · (물건/출고/최종 화주) · (담당자/연락처/차량번호) 줄로 맞춘다 */
#releasePage .form .release-owner-label{grid-column-start:1;}
.a4-fax{font-size:12px;border-top:1px solid #111;padding-top:8px;margin-top:8px;}
@media(max-width:640px){.release-preview-modal{padding:8px;align-items:flex-start}.release-preview-panel{border-radius:14px;padding:10px}.release-preview-doc{font-size:12px}.a4-title{font-size:22px}.a4-company{grid-template-columns:1fr}.stamp-area{min-height:145px}.a4-top{grid-template-columns:1fr}.a4-top div{border-right:0;border-bottom:1px solid #111}.a4-top div:last-child{border-bottom:0}.a4-info th,.a4-info td{padding:6px}.a4-main-table th,.a4-main-table td{padding:6px}}
@media(max-width:640px){.stamp-area .nameplate{max-width:260px;max-height:120px}.stamp-area .seal{width:78px;height:78px;right:18px;bottom:16px}}
/* 출고증 미리보기 A4 1장 고정 + 명판 1.5배 확대 */
.release-preview-panel{width:min(980px,100%);max-height:94vh;overflow:auto;}
.release-preview-doc{
width:210mm;
min-height:297mm;
max-height:297mm;
margin:0 auto;
padding:9mm 10mm;
background:#fff;
color:#111;
font-size:12px;
line-height:1.25;
overflow:hidden;
box-shadow:0 0 0 1px #d1d5db;
}
.a4-doc-logo{margin:0 0 4px;}
.a4-doc-logo img{max-height:34px;max-width:160px;}
.a4-title{font-size:24px;margin:3px 0 8px;}
.a4-top{grid-template-columns:1fr 150px;margin-bottom:6px;}
.a4-top div{padding:6px 8px;}
.a4-main-table,.a4-info,.a4-company table{margin-bottom:6px;}
.a4-main-table th,.a4-main-table td,.a4-info th,.a4-info td,.a4-company th,.a4-company td{padding:5px 6px;}
.a4-main-table td:first-child{width:42px;}
.a4-memo{min-height:44px;padding:8px 12px;margin-bottom:6px;}
.a4-company{display:grid;grid-template-columns:1fr 350px;gap:8px;align-items:stretch;}
.stamp-area{min-height:160px;}
.stamp-area .nameplate{width:465px;max-width:465px;max-height:203px;object-fit:contain;}
.stamp-area .seal{width:138px;height:138px;right:16px;bottom:10px;object-fit:contain;}
.a4-fax{font-size:11px;padding-top:5px;margin-top:5px;}
@page{size:A4;margin:0;}
@media print{
html,body{background:#fff;}
body *{visibility:hidden;}
#releasePreview,#releasePreview *{visibility:visible;}
#releasePreview{position:absolute;left:0;top:0;width:210mm;height:297mm;box-shadow:none;margin:0;padding:9mm 10mm;}
.release-preview-modal,.release-preview-panel{position:static;background:#fff;box-shadow:none;padding:0;margin:0;overflow:visible;}
.release-preview-head,.release-item-warn{display:none;}
}
@media(max-width:640px){
.release-preview-modal{padding:8px;align-items:flex-start;}
.release-preview-panel{padding:8px;border-radius:14px;}
.release-preview-doc{width:210mm;min-height:297mm;max-height:297mm;font-size:12px;}
.a4-title{font-size:24px;}
.a4-company{grid-template-columns:1fr 350px;}
.stamp-area{min-height:160px;}
.stamp-area .nameplate{width:465px;max-width:465px;max-height:203px;}
.stamp-area .seal{width:138px;height:138px;right:16px;bottom:10px;}
}
/* 출고증 전화걸기 버튼 + 명판 추가 1.5배 확대 */
.release-phone-row{display:flex;gap:8px;align-items:center;width:100%;}
.release-phone-row input{flex:1;min-width:0;}
.release-call-btn{white-space:nowrap;padding:10px 12px;border-radius:10px;border:1px solid #0f2f57;background:#0f2f57;color:#fff;font-weight:800;cursor:pointer;}
.release-call-btn:active{transform:translateY(1px);}
.release-preview-doc .a4-company,.a4-company{grid-template-columns:1fr 520px;gap:6px;}
.release-preview-doc .stamp-area,.stamp-area{min-height:222px;overflow:visible;display:flex;align-items:center;justify-content:center;position:relative;}
.release-preview-doc .stamp-area .nameplate,.stamp-area .nameplate{width:698px;max-width:698px;max-height:305px;object-fit:contain;}
.release-preview-doc .stamp-area .seal,.stamp-area .seal{width:138px;height:138px;right:10px;bottom:6px;object-fit:contain;}
@media(max-width:640px){
.release-phone-row{gap:6px;}
.release-call-btn{padding:10px 10px;font-size:13px;}
.release-preview-doc .a4-company,.a4-company{grid-template-columns:1fr 520px;}
.release-preview-doc .stamp-area,.stamp-area{min-height:222px;}
.release-preview-doc .stamp-area .nameplate,.stamp-area .nameplate{width:698px;max-width:698px;max-height:305px;}
}
@media print{
.release-preview-doc .stamp-area .nameplate,.stamp-area .nameplate{width:698px;max-width:698px;max-height:305px;}
}
/* 모바일 출고증 권역/창고 드롭다운 + A4 폭맞춤 미리보기 */
#releasePage select#relRegion{width:100%;}
/* 창고명 커스텀 드롭다운(최소): 입력칸 아래로 스크롤 가능한 전체 목록 표시 */
.combo{position:relative;}
.combo-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#fff;border:1px solid #dbe4f0;border-radius:14px;max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 8px 24px rgba(18,27,47,.12);}
.combo-menu[hidden]{display:none;}
.combo-menu div{padding:12px 13px;cursor:pointer;}
.combo-menu div:active{background:#eef2ff;}
.combo-menu small{margin-left:8px;color:#667085;font-size:12px;}
@media(max-width:768px){
.release-preview-modal{padding:6px;align-items:flex-start;overflow:hidden;}
.release-preview-panel{width:100%;max-width:100%;height:calc(100vh - 12px);max-height:calc(100vh - 12px);overflow-y:auto;overflow-x:hidden;padding:8px;box-sizing:border-box;}
.release-preview-head{margin-bottom:8px;}
.release-preview-doc{transform-origin:top left;box-sizing:border-box;}
}
/* 명판 크기 유지 + 명판 칸 높이 축소 */
.release-preview-doc .stamp-area,
.stamp-area{
min-height:165px !important;
height:165px !important;
overflow:visible !important;
}
@media(max-width:640px){
.release-preview-doc .stamp-area,
.stamp-area{
min-height:150px !important;
height:150px !important;
}
}
@media print{
.release-preview-doc .stamp-area,
.stamp-area{
min-height:165px !important;
height:165px !important;
}
}
/* 출고증 연락처 선택/직접입력 + 전화걸기 */
.release-contact-row{margin-top:0;}
.release-contact-row input{min-width:0;}
@media(max-width:640px){
.release-contact-label{grid-column:1/-1;}
.release-contact-row{display:flex;gap:6px;align-items:center;}
.release-contact-row .release-call-btn{flex:0 0 auto;}
}
/* price list refinements */
.price-page .price-table-wrap{margin-top:10px;}
.price-name-cell b{font-size:15px;}
.price-part{margin-top:2px;font-size:12px;}
.price-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px;margin-top:5px;font-size:10.5px;line-height:1.25;color:#64748b;}
.price-mini-grid span{white-space:nowrap;}
.price-mini-grid b{font-size:10.5px;color:#334155;font-weight:700;}
.price-memo-box{margin-top:18px;}
.price-upload-box{align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;}
.price-upload-box div{display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.price-upload-box small{color:#64748b;font-size:11px;}
.price-upload-box input{max-width:220px;font-size:12px;}
.price-upload-box button,.price-upload-box a{border:0;border-radius:10px;padding:8px 10px;background:#102a43;color:#fff;text-decoration:none;font-size:12px;font-weight:700;}
.price-upload-box a{background:#475569;}
#priceExcelImportStatus{font-size:12px;color:#0f766e;font-weight:700;}
@media(max-width:640px){.price-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));font-size:10px;gap:3px 6px}.price-mini-grid b{font-size:10px}.price-upload-box{align-items:stretch}.price-upload-box input{max-width:100%;width:100%;}.price-upload-box button,.price-upload-box a{width:100%;text-align:center}}
/* price list collapse + daily change */
.price-main-row{cursor:pointer;}
.price-mini-grid{display:none;}
.price-mini-grid.show{display:grid;}
.price-change-note{font-size:11px;color:#64748b;margin:8px 2px 0;}
.chg{font-size:12px;font-weight:800;white-space:nowrap;}
.chg.up{color:#ff2b2b;}
.chg.down{color:#1d64ff;}
.chg.neutral{color:#475569;}
.price-table-wrap th:last-child,.price-table-wrap td:last-child{text-align:right;}
.price-upload-box{border-color:#cbd5e1;background:#f8fbff;}
.price-upload-box button{background:#2563eb;}
.price-upload-box a{background:#0891b2;}
@media(max-width:640px){.price-table-wrap table{font-size:12px}.price-table-wrap th,.price-table-wrap td{padding:9px 6px}.chg{font-size:11px}.price-change-note{font-size:10.5px}.price-table-wrap{overflow-x:auto}}
/* 품목표 엑셀 등록/다운로드 영역 보강 */
.price-upload-box[style*="flex"]{display:flex!important;}
.price-upload-box input[type="file"]{background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:7px;}
.price-download-help{width:100%;font-size:11px;color:#64748b;margin-top:2px;line-height:1.35;}
.price-template-download{display:inline-flex;align-items:center;justify-content:center;}
.price-edit-btn{margin-left:8px;border:0;border-radius:8px;padding:4px 7px;background:#102a43;color:#fff;font-size:11px;font-weight:800;cursor:pointer;}
.v102-actions .danger{background:#dc2626!important;color:#fff;}
@media(max-width:640px){.price-edit-btn{display:block;margin:5px 0 0 auto;padding:4px 8px;font-size:10.5px}}
/* 품목표 재고 열 + 재고없음 강조 */
.price-stock{display:inline-block;min-width:58px;text-align:center;border-radius:999px;background:#eef2f7;color:#334155;font-size:11.5px;font-weight:800;padding:4px 7px;white-space:nowrap;}
.price-stock.no-stock{background:#fee2e2;color:#dc2626;}
.no-stock-text{color:#dc2626!important;font-weight:900;}
.price-no-stock-row .price-name-cell b:first-child{color:#dc2626;}
.v102-form select{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:9px 10px;background:#fff;font-size:14px;}
@media(max-width:640px){.price-stock{font-size:10px;min-width:42px;padding:3px 4px}.price-table-wrap{overflow-x:hidden}.price-table-wrap table{table-layout:fixed;width:100%;min-width:0}.price-table-wrap th,.price-table-wrap td{padding:7px 3px;font-size:10.5px}.price-table-wrap th:first-child,.price-table-wrap td:first-child{width:30%}.price-table-wrap th:nth-child(2),.price-table-wrap td:nth-child(2){width:14%}.price-table-wrap th:last-child,.price-table-wrap td:last-child{width:18%}}
/* finance dashboard */
.finance-page .finance-lock-box{border:2px solid #dbeafe;background:#f8fbff}
.finance-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#172554,#24385f);color:#fff}
.finance-hero b{display:block;font-size:22px}.finance-hero span{display:block;color:#dbeafe;margin-top:5px}
.finance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.finance-card{background:#fff;border:1px solid #e6edf7;border-radius:18px;padding:16px;box-shadow:0 8px 22px rgba(18,27,47,.06)}
.finance-card span{display:block;color:#667085;font-size:13px;font-weight:800}.finance-card b{display:block;font-size:22px;margin-top:6px;color:#111827}
.finance-ai-notes{display:grid;gap:8px}.finance-note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-weight:700;color:#24385f}
.finance-upload-panel .form,.finance-manual-panel .form{background:#f8fafc}
@media(max-width:760px){.finance-grid{grid-template-columns:1fr 1fr}.finance-hero{align-items:flex-start;flex-direction:column}.finance-card b{font-size:18px}}
/* finance monthly tabs */
.finance-month-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.finance-month-tab{border:1px solid #d9e5f3;background:#fff;color:#24385f;border-radius:999px;padding:9px 14px;font-weight:900;cursor:pointer;display:flex;gap:8px;align-items:center}
.finance-month-tab span{font-size:12px;color:#667085;font-weight:800}
.finance-month-tab.active{background:#24385f;color:#fff;border-color:#24385f}
.finance-month-tab.active span{color:#e5eefb}
.finance-month-summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px;margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.finance-month-summary b{color:#111827}.finance-month-summary span{color:#475569;font-weight:800}
@media(max-width:760px){.finance-month-tab{width:100%;justify-content:space-between}.finance-month-summary{font-size:13px}}
/* finance category scroll and chart dashboard */
.finance-cat-select{min-width:150px;max-width:190px;border:1px solid #d9e5f3;border-radius:10px;padding:7px 8px;background:#fff;font-weight:800;color:#24385f}
.finance-chart-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:stretch}
.finance-pie-card,.finance-bar-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:16px}
.finance-pie-card h3,.finance-bar-card h3{margin:0 0 12px;font-size:16px;color:#111827}
.finance-pie{width:210px;height:210px;border-radius:50%;margin:4px auto 14px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 28px #fff}
.finance-pie span{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:50%;width:116px;height:116px;font-weight:900;color:#111827;font-size:17px;text-align:center;line-height:1.1}
.finance-pie small{font-size:12px;color:#667085;margin-top:2px}
.finance-legend{display:grid;gap:8px;max-height:210px;overflow:auto;padding-right:4px}
.finance-legend div{display:grid;grid-template-columns:12px 1fr auto;gap:7px;align-items:center;font-size:12px;color:#475569}
.finance-legend i{width:10px;height:10px;border-radius:3px;display:block}.finance-legend b{color:#111827}.finance-legend span{font-weight:800;color:#64748b}
.finance-bars{display:grid;gap:11px;max-height:330px;overflow:auto;padding-right:4px}.finance-bar-row{display:grid;grid-template-columns:120px 1fr 100px;gap:10px;align-items:center}.finance-bar-row label{font-size:13px;font-weight:900;color:#24385f}.finance-bar-row div{height:12px;background:#e5eaf3;border-radius:999px;overflow:hidden}.finance-bar-row div span{display:block;height:100%;background:#24385f;border-radius:999px}.finance-bar-row b{text-align:right;font-size:12px;color:#111827}
@media(max-width:760px){.finance-chart-grid{grid-template-columns:1fr}.finance-pie{width:180px;height:180px}.finance-bar-row{grid-template-columns:90px 1fr 78px}.finance-cat-select{min-width:130px}}
/* finance ledger fix */
.finance-ledger-charts{margin:14px 0 18px 0;padding:14px;border:1px solid #dbe6f5;border-radius:18px;background:#f8fbff}
.finance-cat-select{display:block!important;width:100%;min-width:160px;appearance:auto!important;background:#fff!important;border:1px solid #9fb7d8!important;border-radius:10px!important;padding:8px 10px!important;font-weight:900!important;color:#17325c!important}
.finance-cat-select:focus{outline:2px solid #2f80ed;outline-offset:1px}
.finance-bars{max-height:240px;overflow:auto;padding-right:6px}
.finance-legend{max-height:220px;overflow:auto}
@media(max-width:760px){.finance-cat-select{min-width:145px;font-size:13px}.finance-ledger-charts{padding:10px}.finance-bars{max-height:220px}}
/* finance chart visibility hard-fix */
.finance-ledger-charts{display:grid!important;visibility:visible!important;opacity:1!important;min-height:260px;margin:14px 0 18px!important;}
.finance-pie-card,.finance-bar-card{min-height:250px;}
.finance-pie{background:#e5e7eb;}
.finance-secure-note{font-size:12px;color:#64748b;margin-top:8px;}
/* finance category save bar */
.finance-save-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 16px;background:#f8fbff;border:1px solid #dbe7f6;border-radius:14px}
.finance-save-btn{min-width:150px;background:#24385f!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:12px 18px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(36,56,95,.16)}
.finance-save-btn:active{transform:translateY(1px)}
@media(max-width:760px){.finance-save-bar{flex-direction:column;align-items:stretch}.finance-save-btn{width:100%}}
/* finance ledger save bar visibility guard */
#financeSaveBar,.finance-save-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-top:14px!important;margin-bottom:8px!important;padding:14px 16px!important;background:#f8fbff!important;border:1px solid #dbe7f6!important;border-radius:14px!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:5!important;clear:both!important}
#financeSaveBar .muted,.finance-save-bar .muted{font-size:13px!important;line-height:1.45!important}
.finance-save-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:150px!important;background:#24385f!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:12px 18px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(36,56,95,.16)!important;cursor:pointer!important}
@media(max-width:760px){#financeSaveBar,.finance-save-bar{flex-direction:column!important;align-items:stretch!important}.finance-save-btn{width:100%!important}}
/* 카드사 분리 필터 */
.finance-card-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 14px;padding:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.finance-card-filter>span{font-weight:800;color:#334155;margin-right:4px}
.finance-card-filter button{border:1px solid #dbe3ef;background:#f8fafc;border-radius:12px;padding:8px 12px;display:flex;gap:8px;align-items:center;cursor:pointer;color:#334155}
.finance-card-filter button.active{border-color:#24385f;background:#24385f;color:#fff}
.finance-card-filter button small{opacity:.8;font-size:12px}
@media(max-width:760px){.finance-card-filter{align-items:stretch}.finance-card-filter button{width:100%;justify-content:space-between}.finance-card-filter>span{width:100%}}
/* card/bank source filter */
.finance-source-filter{display:block}
.finance-source-filter .filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.finance-source-filter .filter-row>span{font-weight:800;color:#334155;min-width:72px}
.finance-source-filter .filter-row button{margin:0}
@media(max-width:760px){.finance-source-filter .filter-row{align-items:stretch}.finance-source-filter .filter-row>span{width:100%}.finance-source-filter .filter-row button{width:100%;justify-content:space-between}}
/* price stock direct input */
.stock-input-wrap{display:flex;gap:8px;align-items:center;width:100%;}
.stock-input-wrap select{min-width:120px;}
.stock-direct-input{flex:1;min-width:160px;}
@media(max-width:720px){.stock-input-wrap{flex-direction:column;align-items:stretch}.stock-direct-input{min-width:0;width:100%;}}
/* 카드사 클릭 시 카드번호/계좌별 사용금액 펼침 */
.finance-account-breakdown{margin:12px 0 16px;padding:14px;border:1px solid #d8e3f3;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(20,40,80,.04)}
.finance-account-title{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px;color:#10213f}
.finance-account-title b{font-size:15px}
.finance-account-title span{font-size:12px;color:#64748b}
.finance-account-buttons{display:flex;flex-wrap:wrap;gap:8px}
.finance-account-buttons button{border:1px solid #d6e2f2;background:#f8fbff;border-radius:12px;padding:9px 12px;cursor:pointer;color:#172b4d;text-align:left}
.finance-account-buttons button.active{background:#24385f;color:#fff;border-color:#24385f}
.finance-account-buttons b{display:block;font-size:14px;line-height:1.2}
.finance-account-buttons small{display:block;margin-top:3px;font-size:11px;opacity:.82}
@media(max-width:720px){.finance-account-title{display:block}.finance-account-buttons button{flex:1 1 140px}}
/* finance manual delete controls */
.finance-danger-row button{border-color:#f2d5d5!important;background:#fff7f7!important;color:#7f1d1d!important}
.finance-danger-row button:first-of-type{border-color:#dbe3ef!important;background:#f8fafc!important;color:#334155!important}
.finance-row-delete,.finance-mini-delete{border:1px solid #f0caca;background:#fff5f5;color:#991b1b;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.finance-mini-delete{padding:8px 10px;background:#fff;border-color:#efcaca;margin-left:-4px}
.finance-row-delete:hover,.finance-mini-delete:hover{background:#fee2e2}
@media(max-width:720px){.finance-row-delete{width:100%}.finance-mini-delete{flex:0 0 auto}}
/* 상단 지출 요약 카드 및 날짜 보정 버튼 숨김 */
#financeCards{display:none!important;}
.finance-repair-row{display:none!important;}
/* 카드 소지자 매칭 */
.finance-holder-panel .form { align-items: end; }
.finance-holder-spending { margin: 12px 0 16px; padding: 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; background: rgba(255,255,255,.72); }
.finance-holder-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.finance-holder-card { border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 12px; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,.05); }
.finance-holder-card b { display:block; color:#334155; font-size:13px; }
.finance-holder-card strong { display:block; margin-top:6px; color:#020617; font-size:20px; }
.finance-holder-card small { display:block; margin-top:4px; color:#64748b; line-height:1.35; }
/* finance upload verification */
.finance-verify-report{margin:12px 0 16px;border:1px solid #d8e5f8;background:#f8fbff;border-radius:16px;padding:14px;}
.finance-verify-month{margin-top:10px;padding:12px;border:1px solid #e0e8f5;border-radius:14px;background:#fff;}
.finance-verify-month strong{display:block;color:#0b2347;margin-bottom:5px;}
.finance-verify-month span{display:block;color:#334155;font-weight:700;margin-bottom:8px;}
.finance-verify-cards{display:flex;flex-wrap:wrap;gap:7px;}
.finance-verify-cards em{font-style:normal;border:1px solid #d8e5f8;background:#f4f8ff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;color:#24385f;}
/* card holder edit/collapse */
.finance-holder-toggle{
width:100%;
margin:14px 0 10px;
padding:14px 18px;
border:1px solid #d8e5f8;
border-radius:16px;
background:#f8fbff;
color:#0b2347;
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-weight:900;
}
.finance-holder-toggle span{
color:#64748b;
font-size:13px;
}
.finance-holder-table-section{
transition:all .2s ease;
}
.finance-holder-actions{
display:flex;
gap:8px;
align-items:center;
}
.finance-row-edit{
border:1px solid #bfdbfe;
background:#eff6ff;
color:#1d4ed8;
border-radius:10px;
padding:7px 10px;
font-weight:900;
cursor:pointer;
}
/* holder modal + inline toggle */
.finance-holder-toggle-inline{
width:auto !important;
min-width:180px;
display:inline-flex !important;
margin:0 0 0 10px !important;
padding:13px 18px !important;
vertical-align:middle;
}
.finance-holder-toggle-inline b{
white-space:nowrap;
}
.finance-holder-modal{
position:fixed;
inset:0;
z-index:9999;
display:none;
align-items:center;
justify-content:center;
background:rgba(15,23,42,.45);
padding:20px;
}
.finance-holder-modal-card{
width:min(620px, 96vw);
background:#fff;
border-radius:22px;
box-shadow:0 24px 80px rgba(15,23,42,.25);
overflow:hidden;
}
.finance-holder-modal-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 22px;
background:#24385f;
color:#fff;
}
.finance-holder-modal-head b{
font-size:18px;
}
.finance-holder-modal-head button{
border:0;
background:transparent;
color:#fff;
font-size:28px;
cursor:pointer;
}
.finance-holder-modal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
padding:22px;
}
.finance-holder-modal-grid label{
font-weight:900;
color:#0b2347;
}
.finance-holder-modal-grid label.wide{
grid-column:1 / -1;
}
.finance-holder-modal-grid input{
width:100%;
margin-top:8px;
border:1px solid #cfe0f5;
border-radius:12px;
padding:13px 14px;
font-size:15px;
box-sizing:border-box;
}
.finance-holder-modal-actions{
display:flex;
justify-content:flex-end;
gap:10px;
padding:0 22px 22px;
}
.finance-holder-modal-actions button{
border:0;
border-radius:12px;
background:#24385f;
color:#fff;
padding:13px 18px;
font-weight:900;
cursor:pointer;
}
.finance-holder-modal-actions button.ghost{
background:#eef4fb;
color:#24385f;
}
@media(max-width:640px){
.finance-holder-modal-grid{grid-template-columns:1fr;}
.finance-holder-toggle-inline{margin:10px 0 0 0 !important;}
}
/* force small centered holder edit popup */
#financeHolderEditModal.finance-holder-modal{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
z-index:99999 !important;
display:none;
align-items:center !important;
justify-content:center !important;
background:rgba(15,23,42,.45) !important;
padding:20px !important;
box-sizing:border-box !important;
}
#financeHolderEditModal .finance-holder-modal-card{
width:min(620px, 94vw) !important;
max-height:90vh !important;
overflow:auto !important;
background:#fff !important;
border-radius:22px !important;
box-shadow:0 24px 80px rgba(15,23,42,.28) !important;
}
#financeHolderEditModal .finance-holder-modal-head{
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
padding:18px 22px !important;
background:#24385f !important;
color:#fff !important;
}
#financeHolderEditModal .finance-holder-modal-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
padding:22px !important;
}
#financeHolderEditModal .finance-holder-modal-grid label{
display:block !important;
font-weight:900 !important;
color:#0b2347 !important;
}
#financeHolderEditModal .finance-holder-modal-grid label.wide{grid-column:1 / -1 !important;}
#financeHolderEditModal .finance-holder-modal-grid input{
width:100% !important;
margin-top:8px !important;
border:1px solid #cfe0f5 !important;
border-radius:12px !important;
padding:13px 14px !important;
font-size:15px !important;
box-sizing:border-box !important;
}
#financeHolderEditModal .finance-holder-modal-actions{
display:flex !important;
justify-content:flex-end !important;
gap:10px !important;
padding:0 22px 22px !important;
}
@media(max-width:640px){
#financeHolderEditModal .finance-holder-modal-grid{grid-template-columns:1fr !important;}
}
/* holder edit modal spacing polish + validation fix */
#financeHolderEditModal .finance-holder-modal-card{
width:min(560px, 92vw) !important;
padding:0 !important;
}
#financeHolderEditModal .finance-holder-modal-head{
padding:20px 24px !important;
}
#financeHolderEditModal .finance-holder-modal-head button{
width:42px !important;
height:42px !important;
border-radius:14px !important;
background:#24385f !important;
border:1px solid rgba(255,255,255,.22) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
}
#financeHolderEditModal .finance-holder-modal-grid{
padding:26px 28px 18px !important;
gap:18px 16px !important;
}
#financeHolderEditModal .finance-holder-modal-grid label{
line-height:1.3 !important;
}
#financeHolderEditModal .finance-holder-modal-grid input{
height:48px !important;
margin-top:9px !important;
}
#financeHolderEditModal .finance-holder-modal-actions{
padding:8px 28px 28px !important;
}
#financeHolderEditModal .finance-holder-modal-actions button{
min-width:96px !important;
height:46px !important;
border-radius:14px !important;
}
/* cleaner card-holder edit popup */
#financeHolderEditModal.finance-holder-modal{
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#financeHolderEditModal .finance-holder-modal-card{
width:min(540px, 92vw) !important;
max-height:88vh !important;
border:1px solid #dfe7f3 !important;
border-radius:24px !important;
box-shadow:0 28px 80px rgba(15,23,42,.22) !important;
overflow:hidden !important;
}
#financeHolderEditModal .finance-holder-modal-head{
background:#ffffff !important;
color:#0f172a !important;
border-bottom:1px solid #eef2f7 !important;
padding:18px 22px !important;
}
#financeHolderEditModal .finance-holder-modal-head b{
font-size:20px !important;
font-weight:900 !important;
letter-spacing:-0.02em !important;
}
#financeHolderEditModal .finance-holder-modal-head button{
width:40px !important;
height:40px !important;
border-radius:12px !important;
background:#f1f5f9 !important;
border:1px solid #dbe3ee !important;
color:#334155 !important;
font-size:24px !important;
box-shadow:none !important;
}
#financeHolderEditModal .finance-holder-modal-grid{
grid-template-columns:1fr 1fr !important;
gap:14px 14px !important;
padding:20px 22px 10px !important;
background:#fbfcfe !important;
}
#financeHolderEditModal .finance-holder-modal-grid label{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
font-size:13px !important;
font-weight:800 !important;
color:#475569 !important;
}
#financeHolderEditModal .finance-holder-modal-grid label.wide{
grid-column:1 / -1 !important;
}
#financeHolderEditModal .finance-holder-modal-grid input{
height:50px !important;
margin-top:0 !important;
border:1px solid #d7e1ee !important;
border-radius:14px !important;
background:#ffffff !important;
padding:0 14px !important;
font-size:15px !important;
color:#0f172a !important;
outline:none !important;
transition:border-color .15s ease, box-shadow .15s ease !important;
}
#financeHolderEditModal .finance-holder-modal-grid input:focus{
border-color:#27406f !important;
box-shadow:0 0 0 3px rgba(39,64,111,.12) !important;
}
#financeHolderEditModal .finance-holder-modal-actions{
padding:16px 22px 22px !important;
background:#fbfcfe !important;
border-top:1px solid #eef2f7 !important;
justify-content:flex-end !important;
}
#financeHolderEditModal .finance-holder-modal-actions button{
min-width:110px !important;
height:46px !important;
border-radius:14px !important;
font-size:15px !important;
font-weight:900 !important;
box-shadow:none !important;
}
#financeHolderEditModal .finance-holder-modal-actions button.ghost{
background:#eef3f8 !important;
color:#24385f !important;
}
#financeHolderEditModal .finance-holder-modal-actions button:not(.ghost){
background:#24385f !important;
color:#fff !important;
}
@media (max-width: 640px){
#financeHolderEditModal .finance-holder-modal-card{
width:min(96vw, 540px) !important;
border-radius:20px !important;
}
#financeHolderEditModal .finance-holder-modal-grid{
grid-template-columns:1fr !important;
padding:18px 18px 8px !important;
}
#financeHolderEditModal .finance-holder-modal-actions{
padding:14px 18px 18px !important;
}
#financeHolderEditModal .finance-holder-modal-actions button{
flex:1 1 0;
min-width:0 !important;
}
}
/* final admin-style holder edit modal */
#financeHolderEditModal .finance-holder-modal-card{
width:min(640px, 92vw) !important;
max-height:88vh !important;
border-radius:26px !important;
}
#financeHolderEditModal .finance-holder-modal-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:20px 24px !important;
background:#ffffff !important;
}
.finance-holder-modal-title{
display:flex;
align-items:center;
gap:12px;
}
.finance-holder-modal-title b{
font-size:20px !important;
font-weight:900 !important;
color:#0f172a !important;
}
.finance-holder-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:92px;
height:34px;
padding:0 12px;
border-radius:999px;
background:#eef3fb;
color:#24385f;
border:1px solid #d6e0ef;
font-size:13px;
font-weight:900;
}
#financeHolderEditModal .finance-holder-modal-grid-k{
display:flex !important;
flex-direction:column !important;
gap:16px !important;
padding:22px 24px 10px !important;
background:#fbfcfe !important;
}
#financeHolderEditModal .finance-holder-modal-grid-k > label{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
font-size:13px !important;
font-weight:800 !important;
color:#475569 !important;
}
#financeHolderEditModal .holder-row-3{
display:grid;
grid-template-columns:1fr 1fr 1.2fr;
gap:14px;
}
#financeHolderEditModal .holder-row-3 label{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
font-size:13px !important;
font-weight:800 !important;
color:#475569 !important;
}
#financeHolderEditModal .finance-holder-modal-grid-k input{
height:50px !important;
border:1px solid #d7e1ee !important;
border-radius:14px !important;
background:#fff !important;
padding:0 14px !important;
font-size:15px !important;
}
#financeHolderEditModal .finance-holder-modal-actions{
padding:18px 24px 24px !important;
border-top:1px solid #eef2f7 !important;
background:#fbfcfe !important;
}
#financeHolderEditModal .finance-holder-modal-actions button{
min-width:112px !important;
height:46px !important;
border-radius:14px !important;
}
@media (max-width: 720px){
#financeHolderEditModal .finance-holder-modal-card{
width:min(96vw, 640px) !important;
}
#financeHolderEditModal .holder-row-3{
grid-template-columns:1fr !important;
}
}
/* negative/cancel amount display */
.finance-negative-amount{
color:#dc2626 !important;
font-weight:900;
}
/* cleaner finance ledger */
#financeAccountBreakdown{display:none !important;}
.finance-account-breakdown{display:none !important;}
.finance-holder-spending-clean{
margin-top:16px;
padding:16px;
border:1px solid #dbe7f6;
border-radius:18px;
background:#fff;
}
.finance-clean-title{margin-bottom:12px;}
.finance-holder-filter-cards{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:10px;
}
.finance-holder-filter-cards button{
text-align:left;
border:1px solid #dbe7f6;
background:#fff;
border-radius:16px;
padding:14px 14px 13px;
cursor:pointer;
box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.finance-holder-filter-cards button.active{
background:#24385f;
border-color:#24385f;
color:#fff;
}
.finance-holder-filter-cards button b{
display:block;
font-size:13px;
margin-bottom:8px;
}
.finance-holder-filter-cards button strong{
display:block;
font-size:20px;
line-height:1.1;
margin-bottom:8px;
}
.finance-holder-filter-cards button small{
display:block;
color:#64748b;
font-weight:800;
}
.finance-holder-filter-cards button.active small{color:#dbeafe;}
.finance-verify-report{
max-width:430px;
padding:12px !important;
}
.finance-verify-month{padding:12px !important;}
.finance-verify-cards em{
font-size:11px !important;
padding:5px 8px !important;
}
/* KB-style clean finance view */
.finance-holder-spending-clean{
margin-top:16px !important;
padding:18px !important;
border:1px solid #d8e5f8 !important;
border-radius:18px !important;
background:#fff !important;
}
.finance-clean-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
margin-bottom:14px;
}
.finance-clean-section-head b{
display:block;
font-size:16px;
color:#0b2347;
margin-bottom:4px;
}
.finance-clean-section-head small{
color:#64748b;
font-weight:700;
}
.finance-holder-table-cards{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
gap:10px !important;
}
.finance-holder-table-cards button{
display:block !important;
text-align:left !important;
border:1px solid #e2e8f0 !important;
background:#fff !important;
color:#0f172a !important;
border-radius:14px !important;
padding:15px 16px !important;
min-height:96px !important;
cursor:pointer !important;
box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}
.finance-holder-table-cards button.active{
border-color:#24385f !important;
box-shadow:0 0 0 2px rgba(36,56,95,.10) !important;
background:#f8fbff !important;
}
.finance-holder-table-cards span{
display:block !important;
font-size:13px !important;
font-weight:900 !important;
color:#334155 !important;
margin-bottom:8px !important;
}
.finance-holder-table-cards strong{
display:block !important;
font-size:22px !important;
line-height:1.15 !important;
color:#020617 !important;
margin-bottom:8px !important;
white-space:nowrap;
}
.finance-holder-table-cards em{
display:block !important;
font-style:normal !important;
font-size:12px !important;
font-weight:700 !important;
color:#64748b !important;
line-height:1.35 !important;
}
.finance-holder-filter-cards{display:none !important;}
#financeAccountBreakdown,.finance-account-breakdown{display:none !important;}
.finance-verify-report{
max-width:430px !important;
background:#fff !important;
}
.finance-verify-cards{
max-height:140px;
overflow:auto;
}
/* clean summary + holder filter fix */
.finance-month-summary-items{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
.finance-month-summary-items em{
font-style:normal;
display:inline-flex;
gap:6px;
align-items:center;
padding:7px 10px;
border:1px solid #dbe7f6;
background:#fff;
border-radius:999px;
color:#475569;
font-size:13px;
font-weight:800;
}
.finance-month-summary-items strong{
color:#0b2347;
font-size:14px;
}
.finance-holder-spending-clean{
padding:18px !important;
}
.finance-holder-table-cards{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
gap:12px !important;
}
.finance-holder-table-cards button{
position:relative;
min-height:104px !important;
border-radius:18px !important;
padding:16px 17px !important;
transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.finance-holder-table-cards button:hover{
transform:translateY(-1px);
box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
.finance-holder-table-cards button.active::after{
content:"선택됨";
position:absolute;
right:12px;
top:12px;
font-size:11px;
font-weight:900;
color:#24385f;
background:#eaf1ff;
border:1px solid #cfe0f7;
border-radius:999px;
padding:4px 7px;
}
.finance-holder-table-cards span{
padding-right:54px;
}
.finance-holder-table-cards strong{
letter-spacing:-0.03em;
}
.finance-holder-table-cards em{
word-break:keep-all;
}
/* month tabs net only + horizontal employee scroll */
.finance-month-summary-items em:not(:first-child){
display:inline-flex;
}
.finance-holder-spending-clean{
padding:16px !important;
}
.finance-holder-scroll-wrap{
overflow-x:auto;
overflow-y:hidden;
padding-bottom:8px;
scrollbar-width:thin;
}
.finance-holder-scroll-row{
display:flex;
flex-wrap:nowrap;
gap:10px;
min-width:max-content;
}
.finance-holder-scroll-row button{
flex:0 0 210px;
text-align:left;
border:1px solid #dbe7f6;
background:#fff;
border-radius:16px;
padding:14px 15px;
min-height:92px;
cursor:pointer;
box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.finance-holder-scroll-row button.active{
border-color:#24385f;
background:#24385f;
color:#fff;
}
.finance-holder-scroll-row button span{
display:block;
font-size:13px;
font-weight:900;
margin-bottom:8px;
}
.finance-holder-scroll-row button strong{
display:block;
font-size:20px;
line-height:1.15;
margin-bottom:8px;
white-space:nowrap;
}
.finance-holder-scroll-row button em{
display:block;
font-style:normal;
font-size:12px;
font-weight:800;
color:#64748b;
}
.finance-holder-scroll-row button.active em{
color:#dbeafe;
}
.finance-holder-table-cards{display:none !important;}
/* employee spending dropdown UI */
.finance-holder-dropdown-box{
margin-top:16px !important;
padding:16px !important;
border:1px solid #dbe7f6 !important;
border-radius:18px !important;
background:#fff !important;
}
.finance-holder-dropdown-head{
display:grid;
grid-template-columns:220px minmax(280px, 1fr);
gap:10px 14px;
align-items:center;
}
.finance-holder-dropdown-head label{
font-size:15px;
font-weight:900;
color:#0b2347;
}
.finance-holder-dropdown-head select{
width:100%;
height:50px;
border:1px solid #cfe0f5;
border-radius:14px;
background:#fff;
padding:0 14px;
font-size:15px;
font-weight:800;
color:#0b2347;
}
.finance-holder-dropdown-head small{
grid-column:2;
color:#64748b;
font-weight:700;
}
.finance-holder-scroll-wrap,
.finance-holder-scroll-row,
.finance-holder-table-cards,
.finance-holder-filter-cards{
display:none !important;
}
@media(max-width:720px){
.finance-holder-dropdown-head{
grid-template-columns:1fr;
}
.finance-holder-dropdown-head small{
grid-column:1;
}
}
/* compact finance upload area */
.finance-upload-panel{
display:grid;
grid-template-columns:minmax(420px, 1fr) minmax(300px, 380px);
gap:16px;
align-items:start;
}
.finance-upload-panel .box-head{
grid-column:1 / -1;
}
.finance-upload-panel .form{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
align-items:end;
}
.finance-upload-panel .form label.wide{
grid-column:1 / -1;
}
.finance-upload-panel .form > button{
grid-column:1 / -1;
width:100%;
max-width:360px;
min-height:52px !important;
height:52px !important;
border-radius:16px !important;
background:#24385f !important;
}
/* 기존 큰 남색 등록 박스가 있으면 작은 버튼형으로 강제 축소 */
.finance-upload-panel button[onclick="importFinanceExcel()"]{
height:52px !important;
min-height:52px !important;
max-height:52px !important;
padding:0 18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:16px !important;
}
/* 업로드 검증 결과는 옆에서 길게 밀지 않고 내부 스크롤 */
#financeUploadVerifyReport,
.finance-upload-panel .finance-verify-report{
max-width:none !important;
max-height:420px !important;
overflow:auto !important;
margin:0 !important;
grid-column:2 !important;
grid-row:2 / span 4 !important;
}
.finance-upload-panel .price-download-help,
.finance-upload-panel #financeUploadStatus{
grid-column:1 !important;
}
.finance-verify-month{
margin-top:8px !important;
}
.finance-verify-cards{
max-height:160px !important;
overflow:auto !important;
}
/* 업로드 상태 문구도 과하게 길어질 때 정리 */
#financeUploadStatus{
display:block;
max-height:86px;
overflow:auto;
line-height:1.5;
padding-right:6px;
}
@media(max-width:980px){
.finance-upload-panel{
grid-template-columns:1fr;
}
#financeUploadVerifyReport,
.finance-upload-panel .finance-verify-report{
grid-column:1 !important;
grid-row:auto !important;
max-height:260px !important;
}
.finance-upload-panel .form{
grid-template-columns:1fr;
}
}
.finance-verify-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
position:sticky;
top:0;
z-index:2;
background:#f8fbff;
padding-bottom:8px;
}
.finance-verify-title button{
border:1px solid #d8e5f8;
background:#fff;
color:#24385f;
border-radius:999px;
padding:6px 10px;
font-weight:900;
cursor:pointer;
}
#financeUploadVerifyReport.collapsed .finance-verify-month{
display:none;
}
#financeUploadVerifyReport.collapsed{
max-height:58px !important;
overflow:hidden !important;
}
/* force finance upload button compact */
.finance-upload-panel .form{
position:relative !important;
}
.finance-upload-panel .form > button[onclick="importFinanceExcel()"],
.finance-upload-panel button[onclick="importFinanceExcel()"]{
width:220px !important;
max-width:220px !important;
min-width:220px !important;
height:54px !important;
min-height:54px !important;
max-height:54px !important;
border-radius:16px !important;
padding:0 18px !important;
margin:10px 0 0 0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:#24385f !important;
color:#fff !important;
font-size:16px !important;
font-weight:900 !important;
line-height:1 !important;
grid-column:auto !important;
}
/* If some previous rule made every button stretch vertically, neutralize it in upload panel */
.finance-upload-panel .form > button[onclick="importFinanceExcel()"] *{
display:inline !important;
}
/* Make upload form not allocate huge height */
.finance-upload-panel .form{
align-content:start !important;
align-items:end !important;
}
.finance-upload-panel{
min-height:0 !important;
align-items:start !important;
}
/* Status and verification stay compact */
#financeUploadStatus{
max-height:70px !important;
}
#financeUploadVerifyReport{
max-height:380px !important;
}
/* final compact upload layout - no huge blank area */
.finance-upload-panel{
display:block !important;
min-height:0 !important;
padding:22px !important;
}
.finance-upload-panel .box-head{
display:block !important;
margin-bottom:14px !important;
}
.finance-upload-panel .form{
display:grid !important;
grid-template-columns:repeat(3, minmax(180px, 1fr)) !important;
gap:12px !important;
align-items:end !important;
align-content:start !important;
min-height:0 !important;
}
.finance-upload-panel .form label{
margin:0 !important;
}
.finance-upload-panel .form label.wide{
grid-column:1 / -1 !important;
}
.finance-upload-panel .form select,
.finance-upload-panel .form input{
height:44px !important;
border-radius:12px !important;
}
.finance-upload-panel .form > button[onclick="importFinanceExcel()"],
.finance-upload-panel button[onclick="importFinanceExcel()"]{
grid-column:1 !important;
width:180px !important;
min-width:180px !important;
max-width:180px !important;
height:46px !important;
min-height:46px !important;
max-height:46px !important;
margin:4px 0 0 0 !important;
border-radius:14px !important;
font-size:15px !important;
}
.finance-upload-panel #financeUploadStatus{
grid-column:2 / -1 !important;
max-height:54px !important;
overflow:auto !important;
margin:4px 0 0 0 !important;
padding:0 !important;
align-self:center !important;
line-height:1.45 !important;
}
.finance-upload-panel .price-download-help{
margin-top:12px !important;
font-size:12px !important;
}
/* Verification result stays below and collapsed by default */
#financeUploadVerifyReport,
.finance-upload-panel .finance-verify-report{
grid-column:auto !important;
grid-row:auto !important;
width:100% !important;
max-width:none !important;
max-height:220px !important;
margin:14px 0 0 0 !important;
overflow:auto !important;
box-sizing:border-box !important;
}
#financeUploadVerifyReport.collapsed{
max-height:58px !important;
overflow:hidden !important;
}
#financeUploadVerifyReport.collapsed .finance-verify-month{
display:none !important;
}
.finance-verify-title{
position:relative !important;
top:auto !important;
background:#f8fbff !important;
}
.finance-verify-cards{
max-height:90px !important;
overflow:auto !important;
}
@media(max-width:900px){
.finance-upload-panel .form{
grid-template-columns:1fr !important;
}
.finance-upload-panel #financeUploadStatus{
grid-column:1 !important;
}
}
/* price list sorting controls */
.price-sort-controls{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin:12px 0;
padding:14px 16px;
border:1px solid #dbe7f6;
border-radius:16px;
background:#fff;
}
.price-sort-controls b{
display:block;
color:#0b2347;
font-size:15px;
margin-bottom:3px;
}
.price-sort-controls small{
color:#64748b;
font-weight:700;
}
.price-sort-controls select{
min-width:240px;
height:44px;
border:1px solid #cfe0f5;
border-radius:12px;
background:#fff;
padding:0 12px;
color:#0b2347;
font-weight:900;
}
@media(max-width:720px){
.price-sort-controls{
align-items:stretch;
flex-direction:column;
}
.price-sort-controls select{
width:100%;
min-width:0;
}
}
/* refactor-base layout stabilization */
@media (min-width:1024px){
body{overflow-x:hidden !important;}
.app-view{
display:block !important;
max-width:1320px !important;
margin:0 auto !important;
padding:0 24px 28px 284px !important;
box-sizing:border-box !important;
position:relative !important;
}
#mainNav.bottom-nav,
.bottom-nav{
position:fixed !important;
left:max(24px, calc((100vw - 1320px)/2 + 24px)) !important;
top:24px !important;
width:240px !important;
height:calc(100vh - 48px) !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
padding:24px 18px !important;
border-radius:26px !important;
background:#fff !important;
box-shadow:0 24px 60px rgba(15,23,42,.08) !important;
box-sizing:border-box !important;
z-index:999 !important;
transform:none !important;
opacity:1 !important;
visibility:visible !important;
}
#mainNav.bottom-nav::before,
.bottom-nav::before{
content:"정솔푸드";
display:block !important;
margin:0 0 18px !important;
font-size:22px !important;
font-weight:900 !important;
color:#061836 !important;
}
#mainNav.bottom-nav button,
.bottom-nav button{
width:100% !important;
height:52px !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
padding:0 12px !important;
border-radius:14px !important;
background:transparent !important;
color:#0b2347 !important;
font-size:17px !important;
font-weight:900 !important;
border:0 !important;
box-shadow:none !important;
}
#mainNav.bottom-nav button.active,
#mainNav.bottom-nav button:hover,
.bottom-nav button.active,
.bottom-nav button:hover{
background:#eef4fb !important;
}
#mainNav.bottom-nav span,
.bottom-nav span{
display:inline !important;
font-size:14px !important;
font-weight:900 !important;
}
.topbar,.page{width:100% !important;max-width:none !important;}
}
@media (max-width:1023px){
#mainNav.bottom-nav,
.bottom-nav{
position:fixed !important;
left:12px !important;
right:12px !important;
bottom:12px !important;
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:3px !important;
height:70px !important;
padding:8px !important;
border-radius:22px !important;
background:#fff !important;
box-shadow:0 18px 50px rgba(15,23,42,.15) !important;
z-index:1000 !important;
}
#mainNav.bottom-nav::before,
.bottom-nav::before{display:none !important;}
#mainNav.bottom-nav button,
.bottom-nav button{
height:54px !important;
padding:0 !important;
justify-content:center !important;
flex-direction:column !important;
gap:2px !important;
font-size:16px !important;
}
#mainNav.bottom-nav span,
.bottom-nav span{font-size:10px !important;}
.app-view{padding-bottom:96px !important;}
/* 모바일 빠른요청: 2열 */
.quick-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
}
/* request UI refinements */
@media (min-width:1024px){
.topbar{
margin-bottom:28px !important;
}
.page > h1:first-child,
.page > h2:first-child{
margin-top:8px !important;
}
}
/* 빠른 버튼 그리드: PC/모바일 모두 2열 */
.request-quick-grid,
.quick-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
/* final mobile/PC nav */
@media (max-width:1023px){
#mainNav.bottom-nav,
.bottom-nav{
position:fixed !important;
left:10px !important;
right:10px !important;
bottom:calc(10px + env(safe-area-inset-bottom)) !important;
width:auto !important;
max-width:none !important;
transform:none !important;
display:grid !important;
grid-auto-flow:column !important;
grid-auto-columns:minmax(0,1fr) !important;
grid-template-columns:none !important;
gap:4px !important;
height:72px !important;
padding:8px !important;
border-radius:24px !important;
overflow:visible !important;
}
#mainNav.bottom-nav button,
.bottom-nav button{
min-width:0 !important;
width:100% !important;
height:56px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-direction:column !important;
gap:2px !important;
padding:0 !important;
font-size:16px !important;
line-height:1 !important;
}
#mainNav.bottom-nav span,
.bottom-nav span{
display:block !important;
font-size:10px !important;
white-space:nowrap !important;
}
.app-view{padding-bottom:104px !important;}
}
@media (min-width:1024px){
#mainNav.bottom-nav,
.bottom-nav{
overflow:visible !important;
}
}
/* release fax history */
.fax-history-row .fax-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.fax-history-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}.fax-history-parties{font-size:12px}.fax-history-status{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:#eef2f7;color:#667085}.fax-history-status.ok{background:#dcfce7;color:#166534}.fax-history-status.fail{background:#fee2e2;color:#b91c1c}.fax-history-status.pending{background:#fef3c7;color:#92400e}.fax-history-status.partial{background:#ffedd5;color:#9a3412}.fax-history-status.cancel{background:#e5e7eb;color:#4b5563}
.fax-history-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fax-history-filter{width:auto;max-width:170px;margin:0;padding:8px 10px;border-radius:12px;font-size:14px;font-weight:700;color:#24385f}
.fax-pdf-btn{background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:2px 7px;font-size:15px;line-height:1.4;cursor:pointer}
.fax-pdf-btn:hover{background:#f2f4f7}
.fax-reuse-btn{background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700;color:#344054;line-height:1.4;white-space:nowrap;cursor:pointer}
.fax-reuse-btn:hover{background:#f2f4f7}
.box-head:has(.fax-balance-wrap){flex-wrap:wrap}
.fax-head-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.fax-balance-wrap{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.fax-balance{font-size:13px;font-weight:800;color:#166534;white-space:nowrap}
.fax-balance.muted{color:#667085;font-weight:600}
.fax-balance.fax-balance-low{color:#b91c1c}
.fax-charge-btn{background:#1d66e5;padding:9px 12px}
.fax-balance-banner{margin-top:2px;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:14px;padding:10px 12px;margin-bottom:10px;font-size:13px;font-weight:700}
/* 보낸 문서 미리보기 모달 */
.fax-pdf-modal{position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.62);display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.fax-pdf-panel{background:#fff;border-radius:14px;width:min(900px,96vw);height:min(90vh,1200px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.32)}
.fax-pdf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eaecf0}
.fax-pdf-close{border:0;border-radius:10px;background:#0f172a;color:#fff;padding:9px 14px;cursor:pointer;font-weight:800}
.fax-pdf-close:hover{background:#1e293b}
.fax-pdf-frame{border:0;flex:1;width:100%}
@media(max-width:640px){.fax-pdf-modal{padding:8px}.fax-pdf-panel{height:92vh}}
/* 출고증 메모 빠른입력 칩 */
.memo-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.memo-chip{background:#eef2f7;color:#24385f;border:1px solid #dbe4f0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800}.memo-chip:hover{background:#dbe4f0}
/* 거래분석 */
.market-item-name{font-size:15px;font-weight:800;color:#24385f;margin-bottom:12px}
.market-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.market-kpi{background:#fff;border:1px solid #e6edf7;border-radius:16px;padding:14px 12px;box-shadow:0 6px 18px rgba(18,27,47,.05);display:flex;flex-direction:column;gap:4px}
.market-kpi .mk-k{font-size:12px;font-weight:800;color:#667085}
.market-kpi .mk-v{font-size:20px;font-weight:900;color:#111827;letter-spacing:-.03em}
.market-kpi .mk-s{font-size:11px;color:#98a2b3;font-weight:700}
.market-chg.up{color:#dc2626}.market-chg.down{color:#1d4ed8}.market-chg.flat{color:#667085}
.market-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.market-toggle{display:inline-flex;background:#eef2f7;border-radius:14px;padding:4px;gap:4px}
.market-toggle button{background:transparent;color:#667085;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:800}
.market-toggle button.active{background:#24385f;color:#fff}
.market-chart-box{padding:14px}
.market-chart{position:relative;width:100%}
.mc-svg{width:100%;height:auto;display:block}
.mc-grid{stroke:#eef2f7;stroke-width:1}
.mc-ylab{fill:#98a2b3;font-size:11px;font-weight:700;text-anchor:end}
.mc-xlab{fill:#98a2b3;font-size:11px;font-weight:700;text-anchor:middle}
.mc-cross{stroke:#c3ccdb;stroke-width:1;stroke-dasharray:4 3}
.mc-fc-sep{stroke:#c3ccdb;stroke-width:1;stroke-dasharray:2 3}
.mc-xlab-fc{fill:#0f766e}
.mc-tip{position:absolute;pointer-events:none;background:#111827;color:#fff;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700;box-shadow:0 8px 20px rgba(15,23,42,.25);display:flex;flex-direction:column;gap:2px;white-space:nowrap;z-index:5}
.mc-tip strong{color:#fff}.mc-tip-sub{color:#c3ccdb;font-weight:600;font-size:11px}
.market-tbl{width:100%;border-collapse:collapse}
.market-tbl th,.market-tbl td{padding:10px 12px;border-bottom:1px solid #eef2f7;font-size:14px;text-align:left}
.market-tbl th{color:#667085;font-size:12px}
.market-tbl .num{text-align:right}
.market-empty{color:#98a2b3;font-weight:700;padding:20px;text-align:center}
@media(max-width:768px){.market-kpis{grid-template-columns:repeat(2,1fr)}.market-kpi .mk-v{font-size:18px}}
.market-head-actions{display:inline-flex;gap:8px}
.market-upload-btn{background:#0f766e}
.market-upload-msg{background:#eef2f7;color:#24385f;border:1px solid #dbe4f0;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:800;margin-bottom:12px}
/* AI 예측(내부 통계) */
.market-forecast{background:#fff;border:1px solid #e6edf7;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 6px 18px rgba(18,27,47,.05)}
.market-fc-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fc-badge{background:linear-gradient(135deg,#24385f,#0f766e);color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em;padding:4px 9px;border-radius:999px}
.fc-title{font-size:13px;font-weight:800;color:#667085}.fc-title b{color:#111827}
.market-fc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.market-fc-cell{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.market-fc-cell .fc-k{font-size:11px;font-weight:800;color:#98a2b3}
.market-fc-cell .fc-v{font-size:17px;font-weight:900;color:#111827;letter-spacing:-.03em}
.market-fc-cell .fc-b{font-size:12px;font-weight:800}
.market-fc-cell .fc-s{font-size:11px;color:#98a2b3;font-weight:700}
.market-fc-note{font-size:11px;color:#98a2b3;font-weight:700;margin-top:10px;line-height:1.5}
@media(max-width:768px){.market-fc-grid{grid-template-columns:repeat(2,1fr)}}
/* 알림톡 전송내역 — 확정 레이아웃: 구분선으로 나뉜 한 줄(발송날짜 + 상태점 + 결과메시지). */
.alimtalk-history{margin-top:2px}
.alimtalk-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid #e6edf7;font-size:14px;font-weight:800}
.alimtalk-row:last-child{border-bottom:1px solid #e6edf7}
.alimtalk-row-date{color:#24385f;white-space:nowrap;min-width:136px}
.alimtalk-row-msg{color:#111827;min-width:0;overflow-wrap:anywhere}
.alimtalk-empty{padding:14px 4px;border-top:1px solid #e6edf7;border-bottom:1px solid #e6edf7}
@media(max-width:480px){.alimtalk-row{gap:10px;font-size:13px}.alimtalk-row-date{min-width:124px}}
/* 교육자료 목록 — 알림톡 전송내역 리스트와 같은 구분선/타이포 규칙을 따른다. */
.edu-list{margin-top:2px}
.edu-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px;border-top:1px solid #e6edf7}
.edu-item:last-child{border-bottom:1px solid #e6edf7}
.edu-item-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.edu-item-main b{font-size:15px;color:#111827;overflow-wrap:anywhere}
.edu-item-meta,.edu-item-desc{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.edu-item-actions{display:flex;gap:6px;flex-shrink:0}
.edu-item-actions button{padding:8px 12px;font-size:13px}
.edu-item-actions .edu-del{background:#fee2e2;color:#b91c1c}
.edu-empty{padding:14px 4px;border-top:1px solid #e6edf7;border-bottom:1px solid #e6edf7}
@media(max-width:480px){.edu-item{flex-direction:column;align-items:stretch}.edu-item-actions{justify-content:flex-end}}
/* 직원 관리 목록 — 교육자료 목록과 같은 구분선/타이포 규칙을 따른다. */
.staff-list{margin-top:2px}
.staff-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px;border-top:1px solid #e6edf7}
.staff-item:last-child{border-bottom:1px solid #e6edf7}
.staff-item-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.staff-item-main b{font-size:15px;color:#111827;overflow-wrap:anywhere}
.staff-item-meta{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.staff-item-actions{display:flex;gap:6px;flex-shrink:0}
.staff-item-actions button{padding:8px 12px;font-size:13px}
.staff-item-actions .staff-del{background:#fee2e2;color:#b91c1c}
.staff-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef2f7;color:#667085;font-size:11.5px;font-weight:800;vertical-align:middle}
.staff-tag-admin{background:#e0edff;color:#1d4ed8}
.staff-tag-self{background:#dcfce7;color:#15803d}
.staff-empty{padding:14px 4px;border-top:1px solid #e6edf7;border-bottom:1px solid #e6edf7}
.req{color:#dc2626;font-weight:800}
/* 창고 관리 목록 — 직원 목록(.staff-*)과 같은 시각 언어. */
.wh-filter{display:flex;align-items:center;gap:6px;margin:4px 0 2px;font-size:13px;font-weight:700;color:#667085}
.wh-filter input{width:auto;margin:0}
.wh-list{margin-top:2px}
.wh-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px;border-top:1px solid #e6edf7}
.wh-item:last-child{border-bottom:1px solid #e6edf7}
.wh-item-off{opacity:.55}
.wh-item-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.wh-item-main b{font-size:15px;color:#111827;overflow-wrap:anywhere}
.wh-item-meta{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.wh-item-actions{display:flex;gap:6px;flex-shrink:0}
.wh-item-actions button{padding:8px 12px;font-size:13px}
.wh-item-actions .wh-del{background:#fee2e2;color:#b91c1c}
.wh-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef2f7;color:#667085;font-size:11.5px;font-weight:800;vertical-align:middle}
.wh-tag-off{background:#fee2e2;color:#b91c1c}
.wh-empty{padding:14px 4px;border-top:1px solid #e6edf7;border-bottom:1px solid #e6edf7}
@media(max-width:480px){.staff-item{flex-direction:column;align-items:stretch}.staff-item-actions{justify-content:flex-end}}
/* ── FleetTrack 배송 관제 (PoC 3단계) ─────────────────────────────── */
.fleet-head-actions{display:inline-flex;gap:8px;align-items:center}
.fleet-poll-note{font-size:11px;color:#98a2b3;font-weight:700}
/* 상태 카드: 위치가 얼마나 오래됐는지가 이 화면의 핵심 정보라 지도보다 위에 둔다.
기사 한 명당 카드 한 장. 두 명까지는 나란히, 좁은 화면에서는 세로로 쌓인다. */
.fleet-status-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:10px}
.fleet-status{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e6edf7;border-radius:16px;
padding:14px 16px;box-shadow:0 6px 18px rgba(18,27,47,.05);width:100%;text-align:left;font:inherit;color:inherit}
/* 카드가 button일 때(= 기사 카드) 누를 수 있다는 걸 커서로 알린다. 선택되면 기사색 테두리. */
.fleet-status[data-code]{cursor:pointer}
.fleet-status.is-sel{box-shadow:0 0 0 2px var(--c),0 6px 18px rgba(18,27,47,.08)}
/* 코드 칩 색 = 지도 마커 색. "저 마커가 누구냐"를 잇는 유일한 단서라 상태색과 별개로 둔다. */
.fl-code{display:inline-block;background:var(--c);color:#fff;border-radius:6px;padding:1px 7px;
margin-right:6px;font-size:11px;font-weight:800;letter-spacing:-.01em}
.fleet-status .fl-dot{width:12px;height:12px;border-radius:50%;background:#98a2b3;flex:0 0 auto}
.fleet-status .fl-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.fleet-status .fl-age{font-size:18px;font-weight:900;color:#111827;letter-spacing:-.02em}
.fleet-status .fl-sub{font-size:12px;color:#667085;font-weight:700;word-break:break-all}
.fleet-status.is-fresh{border-color:#a7f3d0;background:#f0fdf9}
.fleet-status.is-fresh .fl-dot{background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.fleet-status.is-fresh .fl-age{color:#047857}
.fleet-status.is-delayed{border-color:#fde68a;background:#fffbeb}
.fleet-status.is-delayed .fl-dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.fleet-status.is-delayed .fl-age{color:#b45309}
.fleet-status.is-stale{border-color:#fecaca;background:#fef2f2}
.fleet-status.is-stale .fl-dot{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.18)}
.fleet-status.is-stale .fl-age{color:#b91c1c}
.fleet-status.is-none .fl-age,.fleet-status.is-error .fl-age{color:#667085;font-size:15px}
.fleet-status.is-error{border-color:#fecaca;background:#fef2f2}
/* 측정 시각과 서버 수신 시각의 차이 — "방금 도착했지만 3시간 전 위치"를 설명하는 유일한 단서.
기사별 사정이라 해당 기사 카드 안에 들어간다. */
.fleet-lag{display:block;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;border-radius:10px;
padding:8px 10px;font-size:11px;font-weight:700;margin-top:5px;line-height:1.5;white-space:normal}
.fleet-map-box{padding:0;overflow:hidden;position:relative}
.fleet-map{width:100%;height:clamp(320px,56vh,620px);background:#eef2f7}
.fleet-map-notice{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
gap:6px;text-align:center;padding:24px;background:#f8fafc;color:#667085;font-size:13px;font-weight:700;line-height:1.7}
.fleet-map-notice code{background:#e8edf5;border-radius:6px;padding:2px 6px;font-size:12px;word-break:break-all}
.fleet-recenter{position:absolute;right:12px;bottom:12px;z-index:10;background:#24385f;color:#fff;
border-radius:12px;padding:10px 14px;font-size:13px;font-weight:800;box-shadow:0 6px 18px rgba(18,27,47,.25)}
@media (max-width:520px){
.fleet-status .fl-age{font-size:16px}
.fleet-status-list{grid-template-columns:1fr}
.fleet-map{height:clamp(280px,48vh,480px)}
}
/* 지도 마커. 기본 핀을 쓰면 기사가 둘일 때 똑같이 생겨서 지도만 보고는 구분이 안 된다.
색 점(좌표를 가리키는 쪽) + 기사 코드 라벨로 그린다. */
.fleet-pin{display:flex;align-items:center;gap:5px;white-space:nowrap;line-height:1}
.fleet-pin i{width:16px;height:16px;border-radius:50%;background:var(--c);border:3px solid #fff;
box-shadow:0 2px 6px rgba(18,27,47,.35);flex:0 0 auto}
.fleet-pin span{background:#fff;border:1.5px solid var(--c);color:var(--c);border-radius:8px;
padding:2px 6px;font-size:11px;font-weight:800;box-shadow:0 2px 6px rgba(18,27,47,.18)}
.fleet-pin.is-sel span{background:var(--c);color:#fff}
/* 신호가 끊긴 기사는 흐리게 — 색은 유지한다(누구인지는 계속 보여야 한다). */
.fleet-pin.is-stale{opacity:.5}
/* 동선 옵션 */
.fleet-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
/* 꺼진 상태도 '누를 수 있는 버튼'으로 읽혀야 한다. 회색 위 회색이면 비활성으로 오해한다.
테두리로 존재를 드러내고, 켜지면 채워서 상태를 구분한다. */
.fleet-toggle{background:#fff;color:#24385f;border:1.5px solid #24385f;border-radius:12px;
padding:9px 14px;font-size:13px;font-weight:800}
.fleet-toggle::before{content:"🧭";margin-right:6px}
.fleet-toggle.active{background:#24385f;color:#fff}
.fleet-range{display:inline-flex;background:#eef2f7;border-radius:12px;padding:4px;gap:4px}
.fleet-range button{background:transparent;color:#667085;padding:6px 11px;border-radius:9px;font-size:12px;font-weight:800}
.fleet-range button.active{background:#fff;color:#24385f;box-shadow:0 2px 6px rgba(18,27,47,.1)}
.fleet-trail-info{font-size:12px;color:#667085;font-weight:700}
/* 동선 범례: 실선=연속 수신 구간, 점선=수신이 끊긴 구간(실제로 그 경로로 갔는지 알 수 없음) */
.fleet-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:11px;color:#667085;font-weight:700;
background:#fff;border:1px solid #e6edf7;border-radius:12px;padding:8px 12px;margin-bottom:10px}
.fleet-legend i{display:inline-block;width:22px;height:0;border-top:3px solid #2563eb;vertical-align:middle;margin-right:5px}
.fleet-legend i.gap{border-top-style:dotted;border-top-color:#98a2b3}
/* ── 배송 관제 탭(지도 / 기록) ─────────────────────────────────────────── */
.fleet-tabs{display:inline-flex;background:#eef2f7;border-radius:12px;padding:4px;gap:4px;margin-bottom:12px}
.fleet-tab{background:transparent;color:#667085;padding:8px 18px;border-radius:9px;font-size:13px;font-weight:800}
.fleet-tab.active{background:#fff;color:#24385f;box-shadow:0 2px 6px rgba(18,27,47,.1)}
/* 기록 탭 필터. 날짜가 이 화면의 축이라 좌우 이동 버튼을 날짜 옆에 붙여 둔다. */
.fleet-log-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fleet-log-filters input[type=date],.fleet-log-filters select{background:#fff;border:1px solid #d7e0ee;border-radius:10px;
padding:8px 10px;font-size:13px;font-weight:700;color:#24385f}
.fleet-log-filters .fl-nav{background:#fff;border:1px solid #d7e0ee;color:#24385f;border-radius:10px;padding:8px 12px;font-weight:800}
.fleet-log-filters .fl-nav:disabled{opacity:.35;cursor:default}
.fleet-log-summary{font-size:12px;color:#667085;font-weight:700;margin-bottom:8px}
.fleet-log-list{display:grid;gap:8px}
.fleet-log-empty{background:#fff;border:1px dashed #d7e0ee;border-radius:14px;padding:26px 16px;text-align:center;
color:#667085;font-size:13px;font-weight:700}
.fleet-log-empty.is-error{border-style:solid;border-color:#fecaca;background:#fef2f2;color:#b91c1c}
/* 한 줄 = 기록 한 건. 시각 → 기사 아바타 → 내용 → 사진 순으로 눈이 흐르게 둔다.
이 줄에는 정보 채널이 둘 있다. "누가"(기사)와 "무엇을"(배송완료/반품수거)이다.
둘 다 색으로만 구분하면 서로를 잡아먹는다 — 초록 배지가 기사 표시인지 상태 표시인지
매번 되짚어야 한다. 그래서 기사는 색+이니셜 아바타, 상태는 색+아이콘 배지로 갈랐다.
줄 테두리에는 기사색을 쓰지 않는다(세 번째 색 채널이 되어 목록이 알록달록해진다). */
.fleet-log-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e6edf7;border-radius:16px;
padding:12px 14px;box-shadow:0 4px 14px rgba(18,27,47,.05)}
.fleet-log-item .fl-when{flex:0 0 46px}
.fleet-log-item .fl-when b{font-size:17px;font-weight:900;color:#111827;letter-spacing:-.02em}
/* 밀린 전송(오프라인이었다가 복구되며 몰려 올라온 건)은 시각의 색으로만 말한다.
배지를 따로 붙이면 시각 칸이 두 줄이 돼 목록의 리듬이 깨진다.
새 색을 들이지 않고 검정 → 회색으로 한 단계 내린다 — 색 예산은 좌표 배지의 빨강과 상태 배지에 쓴다.
점선 밑줄은 "여기 설명이 있다"는 표시다(마우스는 툴팁, 모바일은 탭). */
.fleet-log-item .fl-when.is-lagged b{color:#667085;border-bottom:1px dotted #b6c2d4;cursor:help}
/* 기사 = 아바타. 색은 보라·마젠타·틸 계열만 쓰므로 아래 상태 배지(초록/주황)와 겹치지 않는다.
이니셜은 코드의 숫자를 살린다(D01·D02가 같은 글자로 뭉개지지 않게). 전체 코드는 title로 뜬다. */
.fleet-log-item .fl-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;letter-spacing:-.02em}
.fleet-log-item .fl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.fleet-log-item .fl-line1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 상태 = 아이콘 + 글자 + 색. 세 겹으로 겹쳐 둔 이유는, 흑백 출력·색각 차이·작은 화면 어디서든
최소 한 겹은 살아남게 하기 위해서다. 색만으로는 배송완료와 반품수거를 가르지 않는다. */
.fleet-log-item .fl-kind{font-size:11px;font-weight:800;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;
border-radius:7px;padding:2px 8px;white-space:nowrap}
.fleet-log-item .fl-kind::before{content:"✓ ";font-weight:900}
.fleet-log-item.is-pickup .fl-kind{color:#b45309;background:#fffbeb;border-color:#fde68a}
.fleet-log-item.is-pickup .fl-kind::before{content:"↩ "}
/* 기사 코드 글자는 색을 입히지 않는다 — 기사 색 채널은 아바타 하나로 끝낸다. */
.fleet-log-item .fl-code{font-size:11px;font-weight:700;color:#667085;background:#f2f5fa;border:1px solid #e0e7f1;
border-radius:7px;padding:2px 8px;word-break:break-all}
.fleet-log-item .fl-loc{font-size:11px;font-weight:800;border-radius:7px;padding:2px 8px;white-space:nowrap}
/* 좌표 배지는 "정상이 대부분"이라는 전제로 눈금을 잡는다. 거의 모든 줄에 붙는 '현재 좌표'가
색을 쓰면 목록 전체가 그 색으로 물들어, 정작 눈에 걸려야 할 예외가 묻힌다.
그래서 정상은 회색(배경으로 가라앉히고), 예외 둘만 색을 가진다. */
.fleet-log-item .fl-loc.is-fresh{color:#667085;background:#f2f5fa;border:1px solid #e0e7f1}
/* '오래된 좌표'는 관리자가 놓치면 엉뚱한 곳을 배송지로 읽는다 — 가장 센 경고색.
이 배지만 눌리는(=설명이 딸린) 요소라 cursor로 그 사실을 알린다. */
.fleet-log-item .fl-loc.is-stale{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;cursor:help}
/* '좌표 없음'은 고장이 아니라 정상 동작(위치를 못 잡아도 기록은 올린다)이라 색을 주지 않는다.
'비어 있음'은 색이 아니라 점선 테두리로 말한다 — 이렇게 해서 좌표 배지의 색은 딱 두 가지가 된다.
빨강 = 봐야 할 것(오래된 좌표), 회색 = 그 밖의 정상. */
.fleet-log-item .fl-loc.is-none{color:#667085;background:#f7f9fc;border:1px dashed #cbd5e1}
/* 좌표 나이. 배지가 아니라 글자로 둔다 — 배지가 하나 더 붙으면 상태·좌표 배지와 삼중으로 겹쳐
무엇이 중요한지 흐려진다. 낡은 좌표일 때만 붉게 세운다. */
.fleet-log-item .fl-age-loc{font-size:11px;font-weight:800;color:#667085}
.fleet-log-item .fl-age-loc.is-stale{color:#b91c1c}
.fleet-log-item .fl-acc{font-size:11px;color:#98a2b3;font-weight:700}
.fleet-log-item .fl-mapbtn{background:#fff;border:1px solid #d7e0ee;color:#24385f;border-radius:9px;
padding:4px 10px;font-size:11px;font-weight:800}
.fleet-log-item .fl-mapbtn::before{content:"◎";margin-right:4px}
/* 썸네일. 사진이 있는 기록에만 자리가 생기고, 그 자리도 이미지가 도착해야 보인다(.is-ready).
받는 동안 회색 상자를 깔면 "사진 없음"처럼 읽히고, 목록이 빈 네모로 얼룩진다. */
.fleet-log-item .fl-shot{flex:0 0 auto;width:64px;height:64px;border-radius:12px;padding:0;border:0;background:transparent;
cursor:zoom-in;font-size:10px;font-weight:800;line-height:1.3}
.fleet-log-item .fl-shot.is-ready{border:1px solid #e0e7f1;background-color:#f2f5fa;background-size:cover;background-position:center}
.fleet-log-item .fl-shot.is-error{display:flex;align-items:center;justify-content:center;color:#b91c1c;
border:1px solid #fecaca;background:#fef2f2;cursor:default}
/* 기록 위치를 지도에 표시했을 때의 안내 — 실시간 위치와 헷갈리지 않게 지도 위에 한 줄 세운다. */
.fleet-event-note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;border-radius:12px;padding:9px 12px;margin-bottom:10px;
font-size:12px;font-weight:700}
.fleet-event-note .is-stale{color:#b91c1c}
.fleet-event-note button{background:#fff;border:1px solid #c7d2fe;color:#3730a3;border-radius:9px;padding:5px 11px;font-size:11px;font-weight:800}
/* 기록 위치 핀. 기사 실시간 마커(.fleet-pin)와 한눈에 구별되게 네모·진한 남색으로 둔다. */
.fleet-evpin{display:flex;align-items:center;gap:5px;white-space:nowrap;line-height:1}
.fleet-evpin i{width:14px;height:14px;background:#24385f;border:3px solid #fff;box-shadow:0 2px 6px rgba(18,27,47,.35);transform:rotate(45deg)}
.fleet-evpin span{background:#24385f;color:#fff;border-radius:8px;padding:3px 7px;font-size:11px;font-weight:800;
box-shadow:0 2px 6px rgba(18,27,47,.25)}
.fleet-evpin.is-stale i{background:#b91c1c}
.fleet-evpin.is-stale span{background:#b91c1c}
/* 사진 원본 보기 */
.fleet-photo-modal{position:fixed;inset:0;z-index:1200;background:rgba(9,15,28,.72);display:none;align-items:center;justify-content:center;padding:16px}
.fleet-photo-panel{background:#fff;border-radius:16px;overflow:hidden;max-width:min(900px,96vw);max-height:92vh;display:flex;flex-direction:column}
.fleet-photo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid #e6edf7;font-size:13px}
.fleet-photo-head span{display:inline-flex;gap:8px;align-items:center}
.fleet-photo-head button,.fleet-photo-save{background:#24385f;color:#fff;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:800;
text-decoration:none;display:inline-block}
.fleet-photo-save{background:#fff;color:#24385f;border:1.5px solid #24385f}
.fleet-photo-img{max-width:100%;max-height:calc(92vh - 52px);object-fit:contain;background:#0b1220;display:block}
@media (max-width:560px){
.fleet-log-item{align-items:flex-start;gap:9px;padding:11px 12px}
.fleet-log-item .fl-when{flex-basis:42px}
.fleet-log-item .fl-when b{font-size:15px}
.fleet-log-item .fl-avatar{width:30px;height:30px;font-size:12px}
.fleet-log-item .fl-shot{width:56px;height:56px}
.fleet-log-filters input[type=date],.fleet-log-filters select{flex:1 1 130px;min-width:0}
}