@import url('../fonts/pretendard.css');

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo',sans-serif;color:#0F172A;background:#F9FAFB;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
input,select,textarea{font-family:inherit;outline:none}
table{border-collapse:collapse;width:100%}

/* Elegant Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:var(--r-sm)}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.7)}

/* ===== DESIGN TOKENS — Premium ===== */
:root{
  /* Surface */
  --bg:#FFFFFF;--bg2:#F9FAFB;--bg3:#F3F4F6;--glass:rgba(255,255,255,.82);
  --card:#FFFFFF;--card-tint:linear-gradient(180deg,#FFFFFF,#FAFBFC);

  /* Text */
  --txt:#111827;--txt2:#6B7280;--txt3:#9CA3AF;

  /* Primary — Navy */
  --pri:#1E3A5F;--pri-h:#16304F;--pri-d:#0F2240;--pri-l:#EFF6FF;--pri-ring:rgba(30,58,95,.14);
  --pri-grad:linear-gradient(135deg,#1E3A5F 0%,#16304F 100%);

  /* Accent */
  --gold:#E8913A;--gold-l:#FFF7ED;--gold-d:#C2710C;
  --gold-grad:linear-gradient(135deg,#F0A04B 0%,#E8913A 100%);

  /* Status — 3색 체계 */
  --suc:#059669;--suc-l:#ECFDF5;--dan:#DC2626;--dan-l:#FEF2F2;
  --wrn:#D97706;--wrn-l:#FFFBEB;--out:#1E3A5F;--out-l:#EFF6FF;
  --exc:#D97706;--exc-l:#FFFBEB;--prg:#1E3A5F;--prg-l:#EFF6FF;

  /* Border */
  --bdr:#E5E7EB;--bdr2:#D1D5DB;--bdr-soft:rgba(0,0,0,.05);

  /* Shadow — softer */
  --sh-xs:0 1px 2px rgba(0,0,0,.04);
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --sh-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);
  --sh-glow:0 0 0 1px rgba(30,58,95,.08),0 4px 12px rgba(30,58,95,.12);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.5);

  /* Radius — friendlier */
  --r:14px;--r-sm:10px;--r-md:12px;--r-lg:18px;--r-xl:22px;--r-full:9999px;

  /* Spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;

  /* Line-height scale */
  --lh-tight:1.25;--lh-snug:1.4;--lh-base:1.55;--lh-loose:1.7;

  /* Motion tokens */
  --dur-fast:80ms;--dur-base:140ms;--dur-slow:220ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.22,.61,.36,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.55,0,1,.45);

  /* Semantic surfaces */
  --surface:#FFFFFF;--surface-raised:#F9FAFB;--surface-sunken:#F3F4F6;
  --border-strong:#D1D5DB;
  --ring:rgba(30,58,95,.32);

  /* Elevation layers */
  --el-card:var(--sh);
  --el-popover:var(--sh-md);
  --el-modal:var(--sh-lg);
  --el-sticky:0 2px 8px rgba(0,0,0,.06);

  /* Typography Scale — 8단계 일관 스케일 */
  --fs-xs:11px;    /* 작은 배지, 각주 (최소) */
  --fs-sm:12px;    /* 보조 텍스트, 메타 정보 */
  --fs-base:13px;  /* 표 데이터, 폼 라벨 */
  --fs-md:14px;    /* 본문 기본 */
  --fs-lg:16px;    /* 강조 본문, 카드 제목 */
  --fs-xl:18px;    /* 섹션 제목 */
  --fs-2xl:22px;   /* 페이지 제목 */
  --fs-3xl:28px;   /* KPI 큰 수치 */
  --fs-4xl:36px;   /* 메인 수치 */

  --fw-normal:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;
  --fw-black:900;
}

/* ===== 가독성 개선 (UX) ===== */
/* 너무 작은 폰트 자동 보정: 10px 이하는 11px로 끌어올림 */
body{font-size:var(--fs-md);line-height:var(--lh-base)}

/* 표 헤더 가독성 */
.dt th{font-size:var(--fs-base)!important;padding:10px 8px!important;font-weight:var(--fw-bold)}
.dt td{font-size:var(--fs-base);padding:var(--sp-2)}

/* 배지/뱃지 최소 11px */
.bd, .badge, .m-badge{font-size:var(--fs-xs)!important;padding:3px 8px!important}

/* 버튼 최소 크기 + 터치 친화 */
.btn{font-size:var(--fs-md);min-height:36px}
.btn-sm{font-size:var(--fs-sm);padding:5px 10px;min-height:28px}
.btn-lg{font-size:var(--fs-lg);padding:10px 20px;min-height:44px}

/* 입력 필드 */
input, select, textarea{font-size:var(--fs-md)}
input:not([type="checkbox"]):not([type="radio"]), select, textarea{min-height:36px}

/* 폼 라벨 */
label{font-size:var(--fs-base);font-weight:var(--fw-semi);color:var(--txt2)}

/* ===== 반응형 박스/버튼 (화면 비율 기반) ===== */
/* 카드 기본 */
.card{width:100%;box-sizing:border-box}

/* 안쪽 박스들 크기 고정 + 가로 슬라이드 */

/* KPI 그리드 고정 크기 (4개 기본) */
.sg{display:grid;grid-template-columns:repeat(4, minmax(220px, 1fr));gap:var(--sp-3);min-width:960px}

/* KPI 박스 최소 크기 */
.sb{min-width:220px;min-height:90px;padding:14px 16px;box-sizing:border-box}

/* 폼 행 고정 (wrap 없음) */
.fr{display:flex;gap:10px;align-items:flex-start}
.fr > .fg{flex:1 1 0;min-width:180px}

/* 필터 바 고정 */
.fbar-row{display:flex;flex-wrap:nowrap;gap:var(--sp-2);align-items:center;min-width:max-content}

/* 테이블 가로 슬라이드 */
.u-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.u-scroll-x table{min-width:900px}

/* 모달은 화면 중앙 고정 (반응형 없음, 중간값 사용) */
.mo-bg .mo, .mb{width:640px;max-width:95vw;max-height:90vh;overflow-y:auto;box-sizing:border-box}
.mo-bg .mo[style*="max-width:900"], .mb[style*="width:900"]{width:900px}
.mo-bg .mo[style*="max-width:700"], .mo-bg .mo[style*="max-width:680"]{width:700px}
.mo-bg .mo[style*="max-width:500"], .mo-bg .mo[style*="max-width:560"]{width:560px}

/* 카드 기본 고정 너비 */
.card{width:100%;box-sizing:border-box;min-width:0}

/* 화면이 메인 최소너비(1200px)보다 작아질 때는 가로 스크롤로 */
/* 반응형 축소 규칙 제거 — 안쪽은 고정 유지 */

/* 초대형 모니터 (1920px 이상) */
@media (min-width: 1920px){
  .main-content>.module-page.active{max-width:1800px}
}

html,body{font-feature-settings:"ss01","tnum","kern";letter-spacing:-.01em;height:100%;overflow:hidden}

/* .hidden 단일 클래스 정의는 style.css 맨 끝으로 이동 (cascade 우선권 + inline style 자연 우선) */
.screen{display:none;height:100vh;overflow:hidden}
.screen.active{display:flex;flex-direction:column}

/* ===== LOGIN OVERLAY — Glazey ===== */
.login-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;justify-content:center;align-items:center;background:#F3F4F6;overflow:hidden}
.login-overlay::before{display:none}
.login-overlay::after{display:none}
.login-card{background:#FFFFFF;width:440px;max-width:92vw;padding:52px 44px 44px;box-shadow:var(--sh-lg);border-radius:var(--r-xl);border:1px solid var(--bdr);position:relative;z-index:1}
.login-card::before{display:none}
.login-card::after{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--pri);border-radius:0 0 4px 4px}
.login-title{font-size:28px;font-weight:900;text-align:center;margin-bottom:var(--sp-2);color:var(--pri);letter-spacing:-1px}
.login-sub{font-size:12px;color:var(--txt2);text-align:center;margin-bottom:36px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.login-field{margin-bottom:18px}
.login-field label{display:block;font-size:11px;font-weight:700;margin-bottom:var(--sp-2);color:var(--txt2);letter-spacing:.5px;text-transform:uppercase}
.login-input{width:100%;padding:14px 16px;font-size:15px;font-weight:500;border:1px solid var(--bdr);border-radius:var(--r-sm);background:#FFFFFF;transition:all var(--dur-base) var(--ease-ui);color:var(--txt)}
.login-input:hover{border-color:var(--bdr2)}
.login-input:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-ring);background:#FFFFFF}
.login-btn{width:100%;padding:14px;font-size:14px;font-weight:700;background:var(--pri);color:#fff;margin-top:14px;border-radius:var(--r-sm);transition:all var(--dur-base) var(--ease-ui);box-shadow:0 1px 2px rgba(30,58,95,.3);letter-spacing:.3px}
.login-btn::before{display:none}
.login-btn:hover{background:var(--pri-h);box-shadow:0 4px 12px rgba(30,58,95,.35);transform:translateY(-1px)}
.login-btn:active{transform:scale(.99)}
.login-err{color:var(--dan);font-size:13px;margin-top:14px;text-align:center;font-weight:600}

/* ===== ORIGINAL LOGIN (MES) ===== */
#loginScreen{justify-content:center;align-items:center;background:linear-gradient(160deg,#F8FAFC,#EEF2FF,#F8FAFC)}
.login-box{background:var(--bg);width:440px;max-width:92vw;border:1px solid rgba(226,232,240,.6);padding:48px 40px;box-shadow:var(--sh-lg);border-radius:var(--r-xl)}
.login-box h1{font-size:26px;font-weight:900;text-align:center;margin-bottom:6px;color:#191F28}
.login-box .sub{font-size:13px;color:var(--txt3);text-align:center;margin-bottom:36px;font-weight:500}
.role-btns{display:flex;gap:10px;margin-bottom:var(--sp-6)}
.role-btn{flex:1;padding:15px 0;font-size:15px;font-weight:700;background:var(--bg2);border:2px solid var(--bdr);color:var(--txt2);transition:all .25s var(--ease-ui);border-radius:var(--r)}
.role-btn.on{background:var(--pri-l);border-color:var(--pri);color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring)}
.lf{margin-bottom:18px}
.lf label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:var(--txt2)}
.lf input,.lf select{width:100%;padding:13px 16px;font-size:14px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);background:var(--bg2);transition:all .25s var(--ease-ui)}
.lf input:focus,.lf select:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring);background:var(--bg)}
.login-btn{width:100%;padding:14px;font-size:14px;font-weight:700;background:var(--pri);color:#fff;margin-top:10px;border-radius:var(--r-sm);letter-spacing:.3px;box-shadow:0 1px 2px rgba(30,58,95,.3)}
.lerr{color:var(--dan);font-size:13px;margin-top:12px;text-align:center;font-weight:600}

/* ===== ADMIN LAYOUT ===== */
#adminScreen{flex-direction:column}
.a-hd{background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr);padding:0 20px;display:flex;align-items:center;height:56px;flex-shrink:0}
.a-logo{font-size:16px;font-weight:900;color:var(--pri);margin-right:28px;white-space:nowrap;letter-spacing:-.4px}
.a-tabs{display:flex;gap:0;flex:1;overflow-x:auto}
.a-tab{padding:16px 20px;font-size:13px;font-weight:600;color:var(--txt2);border-bottom:2.5px solid transparent;background:none;white-space:nowrap;transition:all var(--dur-base) var(--ease-ui)}
.a-tab:hover{color:var(--txt);background:rgba(241,245,249,.6)}
.a-tab.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:700}
.a-user{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);font-size:12px;color:var(--txt2);white-space:nowrap;font-weight:500}
.a-out{padding:7px 16px;font-size:12px;font-weight:700;background:var(--bg2);border:1.5px solid var(--bdr);color:var(--txt2);border-radius:var(--r-sm);transition:all var(--dur-base)}
.a-out:hover{background:var(--dan-l);color:var(--dan);border-color:var(--dan)}
.a-body{flex:1;overflow-y:auto;padding:var(--sp-5);background:var(--bg2)}
.tc{display:none}.tc.on{display:block}

/* ===== WORKER LAYOUT ===== */
.worker-app{display:none;height:100vh;overflow:hidden;flex-direction:column}
#workerScreen{flex-direction:column}
.worker-header,.w-hd{background:var(--pri);color:#fff;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;overflow:hidden}
.worker-header::after,.w-hd::after{display:none}
.worker-proc,.w-proc{font-size:30px;font-weight:900;letter-spacing:-.8px}
.worker-sub{font-size:12px;opacity:.6;font-weight:500;letter-spacing:.5px}
.w-info{font-size:15px;text-align:right}
.worker-name{font-size:16px;font-weight:700}
.worker-date{font-size:12px;opacity:.7;font-weight:500}
.worker-logout,.w-out{padding:9px 18px;font-size:14px;font-weight:700;background:rgba(255,255,255,.12);color:#fff;border-radius:var(--r-sm);backdrop-filter:blur(4px);transition:all var(--dur-base);margin-left:10px}
.worker-logout:hover,.w-out:hover{background:rgba(255,255,255,.22)}
.w-body{flex:1;overflow-y:auto;padding:var(--sp-4);background:var(--bg2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start}
.wq{margin-bottom:0;background:var(--surface);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--el-card);min-height:0}
@media(max-width:900px){.w-body{grid-template-columns:1fr}}

/* worker-role 전체 화면 3-column */
.wa-body{flex:1;overflow-y:auto;padding:14px;background:#F0F2F5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start}
.wa-col{background:#fff;border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--el-card);min-height:0}
.wa-col-hd{font-size:16px;font-weight:800;padding:8px 12px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.wa-col-hd span{font-size:13px;font-weight:600;color:var(--txt2)}
.wa-wait{color:#EA580C;background:#FFF7ED;border-left:4px solid #EA580C}
.wa-work{color:#1E40AF;background:#DBEAFE;border-left:4px solid #1E40AF}
.wa-done{color:#16A34A;background:#DCFCE7;border-left:4px solid #16A34A}
@media(max-width:900px){.wa-body{grid-template-columns:1fr}}
.wq-t{font-size:16px;font-weight:700;padding:10px 14px;border-radius:var(--r-sm);margin-bottom:var(--sp-2)}
.wq-t.wt{background:#FFF7ED;color:#F59E0B;border-left:4px solid #F59E0B}
.wq-t.wk{background:#EBF5FF;color:#1E3A5F;border-left:4px solid #1E3A5F}
.wq-t.dn{background:#F0FDF4;color:#10B981;border-left:4px solid #10B981}
.wi{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-radius:var(--r-sm);margin-bottom:6px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all var(--dur-base)}
.wi:active{transform:scale(.98)}
.wi .nm{font-size:14px;font-weight:700;color:var(--txt)}
.wi .inf{font-size:12px;color:var(--txt3);margin-top:3px}
.wb{padding:8px 16px;border-radius:8px;border:none;background:var(--pri);color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all var(--dur-base)}
.wb:active{transform:scale(.95)}
.det-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--bdr);background:#fff;color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.cm{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center}
.cm.hidden{display:none}
.cmb{background:#fff;border-radius:16px;padding:var(--sp-6);width:360px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.cmb h3{font-size:18px;font-weight:700;margin-bottom:6px}
.cmb input[type="number"]{width:100%;padding:14px 16px;font-size:20px;font-weight:700;border:2px solid var(--bdr);border-radius:var(--r-md);text-align:center;margin-bottom:var(--sp-4)}
.cmb input[type="number"]:focus{border-color:var(--pri);outline:none;box-shadow:0 0 0 3px var(--pri-ring)}
.cmb .br{display:flex;gap:10px;justify-content:flex-end}

/* 누락 CSS 보완 */
.prog-bar{width:100%;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:4px}
.prog-bar .track{width:100%;height:100%;background:#E2E8F0;border-radius:3px;position:relative}
.prog-bar .fill{height:100%;background:var(--pri);border-radius:3px;transition:width .3s}
.sb-r{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:10px;flex-wrap:wrap}
.sb-r input[type="text"],.sb-r input:not([type]),.sb-r input[type="search"]{padding:10px 14px 10px 38px;border:1px solid var(--bdr);border-radius:var(--r-sm);font-size:13px;flex:1;min-width:180px;background:#FFFFFF url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;color:var(--txt);font-weight:500;transition:all .25s var(--ease-ui);box-shadow:var(--sh-xs)}
.sb-r input[type="text"]:hover,.sb-r input:not([type]):hover{border-color:var(--bdr2)}
.sb-r input[type="text"]:focus,.sb-r input:not([type]):focus,.sb-r input[type="search"]:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring),var(--sh-xs);outline:none;background-color:#FFFFFF}
.filter-btns{display:flex;gap:4px;flex-wrap:wrap}
.filter-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--bdr);background:#fff;font-size:13px;cursor:pointer;transition:all var(--dur-base);font-weight:500}
.filter-btn:hover{background:var(--bg2)}
.filter-btn.on{background:var(--pri);color:#fff;border-color:var(--pri)}

.pack-assist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.pack-assist-card{background:linear-gradient(180deg,#FFFFFF,#F8FAFC);border:1px solid #E2E8F0;border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh-xs)}
.pack-assist-card .k{font-size:11px;color:#64748B;margin-bottom:4px;font-weight:700;letter-spacing:.2px}
.pack-assist-card .v{font-size:15px;font-weight:800;color:#0F172A;line-height:1.35}
.pack-assist-card .s{font-size:11px;color:#94A3B8;margin-top:4px;line-height:1.45}
.pack-form-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.pack-form-summary .item{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:var(--r-md);padding:10px 12px}
.pack-form-summary .item .k{font-size:11px;color:#64748B;margin-bottom:3px;font-weight:700}
.pack-form-summary .item .v{font-size:14px;font-weight:800;color:#0F172A}
.pack-inline-note{border:1px dashed #CBD5E1;background:#F8FAFC;border-radius:var(--r-md);padding:10px 12px;font-size:12px;color:#475569;line-height:1.65}
.pack-inline-note b{color:#0F172A}
.pack-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pack-chip{background:#EFF6FF;color:#1E3A5F;border:1px solid #BFDBFE;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}
.pack-chip.warn{background:#FFF7ED;color:#C2410C;border-color:#FED7AA}
.pack-chip.ok{background:#ECFDF5;color:#166534;border-color:#BBF7D0}

.pack-search-modal{width:min(920px,94vw);max-height:86vh;background:#fff;border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden}
.pack-search-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px;border-bottom:1px solid #E5E7EB;background:linear-gradient(180deg,#FFFFFF,#F8FAFC)}
.pack-search-title{font-size:18px;font-weight:800;color:#0F172A}
.pack-search-sub{font-size:12px;color:#64748B;margin-top:3px}
.pack-search-close{background:none;border:none;font-size:24px;line-height:1;color:#64748B;cursor:pointer;padding:0 2px}
.pack-search-toolbar{display:flex;gap:var(--sp-2);align-items:center;padding:14px 20px 10px}
.pack-search-input{flex:1;padding:12px 14px;border:1px solid var(--bdr);border-radius:var(--r-md);background:#fff;font-size:14px;box-shadow:var(--sh-xs)}
.pack-search-input:focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring),var(--sh-xs)}
.pack-search-modes{padding:0 20px 8px;display:flex;gap:6px;flex-wrap:wrap}
.pack-search-mode{background:#fff;border:1px solid #CBD5E1;border-radius:999px;padding:6px 11px;font-size:11px;font-weight:800;color:#475569;cursor:pointer}
.pack-search-mode.on{background:#1E3A5F;border-color:#1E3A5F;color:#fff}
.pack-search-recent{padding:0 20px 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pack-search-recent-label{font-size:11px;font-weight:700;color:#64748B;margin-right:4px}
.pack-search-tag{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;color:#475569;cursor:pointer}
.pack-search-table{display:flex;flex-direction:column;min-height:240px;overflow:hidden}
.pack-search-table-head{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(220px,1.6fr) minmax(150px,1fr);gap:var(--sp-3);padding:10px 20px;border-top:1px solid #F1F5F9;border-bottom:1px solid #E5E7EB;background:#F8FAFC;font-size:11px;font-weight:800;color:#64748B}
.pack-search-list{overflow:auto;padding:4px 0 12px}
.pack-search-row{width:100%;display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(220px,1.6fr) minmax(150px,1fr);gap:var(--sp-3);align-items:center;padding:12px 20px;background:#fff;border:none;border-bottom:1px solid #F1F5F9;text-align:left}
.pack-search-row:hover,.pack-search-row.is-active{background:#F8FAFC}
.pack-search-primary{font-size:14px;font-weight:700;color:#0F172A}
.pack-search-secondary{font-size:12px;color:#475569;line-height:1.5}
.pack-search-meta{font-size:12px;color:#64748B;justify-self:end;text-align:right}
.pack-search-empty{padding:28px 20px;text-align:center;color:#94A3B8;font-size:13px}
.cli-row-dormant{opacity:.66}
.cli-row-dormant td{background:#FCFCFD}
.cli-ctx-menu{position:fixed;z-index:120;background:#fff;border:1px solid #E5E7EB;border-radius:var(--r-md);box-shadow:0 18px 40px rgba(15,23,42,.18);min-width:170px;overflow:hidden}
.cli-ctx-menu.hidden{display:none}
.cli-ctx-menu button{display:block;width:100%;padding:10px 12px;border:none;background:#fff;text-align:left;font-size:13px;color:#0F172A;cursor:pointer}
.cli-ctx-menu button:hover{background:#F8FAFC}
.cli-ctx-menu button.danger{color:#DC2626}

/* ==== 월말 마감 리포트 (ux-ext.js) ==== */
.mr-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.mr-kpi{padding:14px 16px;border:1px solid #E2E8F0;border-radius:var(--r-md);background:linear-gradient(180deg,#FFFFFF,#F8FAFC);box-shadow:var(--sh-xs)}
.mr-kpi-label{font-size:11px;color:#64748B;font-weight:700;letter-spacing:.2px;margin-bottom:4px}
.mr-kpi-value{font-size:18px;font-weight:800;color:#0F172A;line-height:1.3}
.mr-kpi-sub{font-size:11px;color:#94A3B8;margin-top:4px}
.mr-kpi-pri{border-color:#BFDBFE}
.mr-kpi-warn{border-color:#FED7AA;background:linear-gradient(180deg,#FFFBEB,#FFF7ED)}
.mr-kpi-green{border-color:#BBF7D0;background:linear-gradient(180deg,#F0FDF4,#ECFDF5)}
.mr-kpi-danger{border-color:#FECACA;background:linear-gradient(180deg,#FEF2F2,#FEE2E2)}
.mr-section{margin-top:14px}
.mr-section-t{font-size:13px;font-weight:700;color:#0F172A;margin-bottom:var(--sp-2);border-left:3px solid var(--pri);padding-left:8px}

/* ==== 키보드 단축키 치트시트 (ux-ext.js) ==== */
.kb-row{display:flex;align-items:center;gap:var(--sp-4);padding:9px 4px;border-bottom:1px solid #F1F5F9}
.kb-row:last-child{border-bottom:none}
.kb-keys{display:flex;align-items:center;gap:4px;min-width:150px}
.kb-key{background:#F8FAFC;border:1px solid #CBD5E1;border-bottom-width:2px;border-radius:5px;padding:3px 8px;font-family:ui-monospace,monospace;font-size:12px;font-weight:700;color:#1E293B;min-width:22px;text-align:center;display:inline-block}
.kb-sep{color:#94A3B8;font-size:11px;padding:0 2px}
.kb-label{font-size:13px;color:#334155;flex:1}

/* ==== 매출/매입 거래처 원장 레이아웃 (얼마에요 스타일) ==== */
.acc-ledger-layout{display:flex;gap:var(--sp-3);align-items:flex-start;min-height:600px}
.acc-ledger-side{flex:0 0 240px;max-width:240px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:var(--r-md);padding:10px;position:sticky;top:8px;max-height:calc(100vh - 140px);display:flex;flex-direction:column}
.acc-ledger-main{flex:1;min-width:0}
.acc-side-head{padding:0 0 8px;border-bottom:1px solid #E2E8F0;margin-bottom:var(--sp-2)}
.acc-side-search{width:100%;padding:7px 10px;font-size:12px;border:1px solid #CBD5E1;border-radius:8px;background:#fff;margin-bottom:6px}
.acc-side-search:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-ring)}
.acc-side-filters{display:flex;gap:3px;flex-wrap:wrap}
.acc-side-filter{flex:1;padding:5px 4px;font-size:11px;font-weight:700;border:1px solid #CBD5E1;background:#fff;color:#475569;border-radius:6px;cursor:pointer}
.acc-side-filter.on{background:var(--pri);border-color:var(--pri);color:#fff}
.acc-side-filter.dormant.on{background:#64748B;border-color:#64748B}
.acc-side-list{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.acc-side-item{padding:9px 10px;margin-bottom:4px;background:#fff;border:1px solid #E2E8F0;border-radius:8px;cursor:pointer;transition:all var(--dur-fast);font-size:12px}
.acc-side-item:hover{background:#EFF6FF;border-color:#BFDBFE}
.acc-side-item.active{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.acc-side-item.active .acc-side-sub,.acc-side-item.active .acc-side-amt{color:#DBEAFE}
.acc-side-item.dormant{opacity:.75;background:#F1F5F9;border-style:dashed}
.acc-side-nm{font-weight:700;color:#0F172A;display:flex;align-items:center;gap:4px;justify-content:space-between}
.acc-side-item.active .acc-side-nm{color:#fff}
.acc-side-sub{font-size:10px;color:#64748B;margin-top:2px;display:flex;justify-content:space-between;gap:4px}
.acc-side-amt{font-size:13px;font-weight:800;color:#DC2626;margin-top:4px;text-align:right}
.acc-side-amt.paid{color:#059669}
.acc-side-empty{padding:20px 10px;text-align:center;color:#94A3B8;font-size:11px}
.acc-active-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(90deg,#EFF6FF,#F8FAFC);border:1px solid #BFDBFE;border-radius:var(--r-sm);margin-bottom:10px;font-size:13px}
.acc-active-bar b{color:var(--pri);font-weight:800}
.acc-active-bar .clear{margin-left:auto;padding:4px 10px;background:#fff;border:1px solid #CBD5E1;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;color:#475569}
.acc-active-bar .clear:hover{background:#F1F5F9}

@media (max-width:1100px){
  .acc-ledger-layout{flex-direction:column}
  .acc-ledger-side{flex:none;max-width:none;width:100%;position:static;max-height:300px}
}

/* ERP 정리: 일일 거래 현황(daily-tx-mini) 스타일 제거 — MES 중심 버전 */

.mo-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--txt2);padding:4px 8px;border-radius:6px;transition:all var(--dur-base)}
.mo-x:hover{background:var(--bg3);color:var(--txt)}
.drag-h{cursor:grab;color:var(--txt3);margin-right:4px;font-size:14px;user-select:none}
.pt.dragging{opacity:.4;border:2px dashed var(--pri);transform:scale(.95)}
.pt:hover .drag-h{color:var(--pri)}
.pt[draggable]:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.log-item{padding:8px 10px;border-bottom:1px solid var(--bg2);font-size:12px;color:var(--txt2)}
.caut-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center}
.caut-text{background:#FEF2F2;border:2px solid #DC2626;border-radius:var(--r-md);padding:var(--sp-5);max-width:400px;font-size:14px;color:#991B1B;font-weight:600}

/* ===== CARDS — Glazey ===== */
.card{background:var(--card);border:1px solid var(--bdr);padding:20px 22px;margin-bottom:var(--sp-3);box-shadow:var(--sh-xs);border-radius:var(--r);transition:box-shadow var(--dur-base) var(--ease-ui),border-color var(--dur-base) var(--ease-ui)}
.card::before{display:none}
.card:hover{box-shadow:var(--sh);border-color:var(--bdr2)}
.card-t{font-size:17px;font-weight:700;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bdr);color:var(--txt);letter-spacing:-.2px;display:flex;align-items:center;gap:var(--sp-2)}
.card-t::before{content:'';width:3px;height:16px;background:var(--pri);border-radius:2px;display:inline-block}

/* ===== SUMMARY GRID — Compact Strip ===== */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:var(--sp-2);transition:all var(--dur-base) var(--ease-ui)}
.sg.sg-hidden{display:none}
.sb{background:var(--card);border:1px solid var(--bdr);padding:10px 12px 8px;box-shadow:var(--sh-xs);border-radius:var(--r-sm);transition:all var(--dur-base) var(--ease-ui);position:relative;overflow:hidden;cursor:default;min-height:auto;display:flex;flex-direction:column;justify-content:center}
.sb::before{display:none}
.sb::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pri);opacity:0;transition:opacity var(--dur-base) var(--ease-ui)}
.sb:hover{box-shadow:var(--sh);border-color:var(--bdr2)}
.sb:hover::after{opacity:1}
.sb .l{font-size:11px;color:var(--txt2);margin-bottom:2px;font-weight:600;letter-spacing:.2px;text-transform:none;display:flex;align-items:center;gap:4px}
.sb .v{font-size:15px;font-weight:700;letter-spacing:-.3px;line-height:1.2;font-feature-settings:"tnum","ss01";color:var(--txt)}
.sb.blue::after{background:var(--pri);opacity:1}.sb.blue .v{color:var(--pri)}
.sb.green::after{background:var(--suc);opacity:1}.sb.green .v{color:var(--suc)}
.sb.red::after{background:var(--dan);opacity:1}.sb.red .v{color:var(--dan)}
.sb.orange::after{background:var(--pri);opacity:1}.sb.orange .v{color:var(--txt)}
.sb.purple::after{background:var(--pri);opacity:1}.sb.purple .v{color:var(--txt)}
/* Toggle Button */
.sg-toggle{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;font-size:11px;font-weight:600;color:var(--txt3);background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r-full);cursor:pointer;margin-bottom:6px;transition:all var(--dur-base) var(--ease-ui);user-select:none}
.sg-toggle:hover{color:var(--txt);background:var(--bg3);border-color:var(--bdr2)}
.sg-toggle .sg-arrow{font-size:11px;transition:transform var(--dur-base) var(--ease-ui);display:inline-block}
.sg-toggle.sg-open .sg-arrow{transform:rotate(90deg)}

/* ===== TABLE — Glazey ===== */
.dt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;border-radius:var(--r-sm)}
.dt-scroll::-webkit-scrollbar{height:6px}
.dt-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:6px}
.dt{width:100%;font-size:15px;font-feature-settings:"tnum","ss01"}
.dt th,.dt td{white-space:nowrap}
.dt td.wrap,.dt th.wrap{white-space:normal;min-width:120px}
.dt thead{background:var(--bg2)}
.dt th{padding:12px 14px;text-align:left;font-weight:600;font-size:13px;color:var(--txt2);letter-spacing:.3px;text-transform:uppercase;border-bottom:1px solid var(--bdr)}
.dt th:first-child{border-radius:0}.dt th:last-child{border-radius:0}
.dt td{padding:12px 14px;border-bottom:1px solid var(--bdr);vertical-align:middle;color:var(--txt);font-size:15px}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:var(--bg2)}
.dt tbody tr{transition:background var(--dur-base) var(--ease-ui)}
.dt tr.row-late td{background:rgba(220,38,38,.04)}
.dt tr.row-late:hover td{background:rgba(220,38,38,.08)}
.dt tr.row-warn td{background:rgba(220,38,38,.03)}
.dt tr.row-warn:hover td{background:rgba(220,38,38,.06)}
.dt td.empty-cell{text-align:center;color:var(--txt3);padding:var(--sp-8);font-style:italic}

/* ===== BADGE — Premium ===== */
.bd{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;font-size:13px;font-weight:700;border-radius:var(--r-full);letter-spacing:.2px;border:1px solid transparent;line-height:1.4}
.bd-w{background:#F1F3F7;color:var(--txt2);border-color:var(--bdr-soft)}
.bd-p{background:var(--gold-l);color:var(--gold-d);border-color:rgba(182,138,78,.2)}
/* bd-d 는 pc-polish.css 에서 빨강(경고)으로 정의 — 상태 뱃지 의미: 위험/주의/지연/반품/불량/긴급 */
.bd-x{background:var(--dan-l);color:var(--dan);border-color:rgba(200,54,43,.18)}
.bd-o{background:var(--pri-l);color:var(--pri);border-color:rgba(30,64,175,.18)}
.bd-e{background:var(--exc-l);color:var(--exc);border-color:rgba(194,74,17,.18)}
.bd-s{background:var(--suc-l);color:var(--suc);border-color:rgba(14,140,87,.18)}
.bd-hold{background:#F0ECFE;color:#6D28D9;border-color:rgba(109,40,217,.18)}
.bd-rework{background:var(--dan-l);color:var(--dan);border-color:rgba(200,54,43,.18)}
.bd-cancel{background:#F1F3F7;color:var(--txt3);text-decoration:line-through;border-color:var(--bdr-soft)}

/* ===== BUTTONS — Glazey ===== */
.btn{padding:10px 20px;font-size:14px;font-weight:600;transition:all var(--dur-base) var(--ease-ui);display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);letter-spacing:0;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--pri);color:#fff;border:none;box-shadow:0 1px 2px rgba(30,58,95,.3)}
.btn-p:hover{background:var(--pri-h);box-shadow:0 4px 12px rgba(30,58,95,.35);transform:translateY(-1px)}
.btn-s{background:var(--suc);color:#fff;border:none;box-shadow:0 1px 2px rgba(5,150,105,.3)}
.btn-s:hover{background:#047857;box-shadow:0 4px 12px rgba(5,150,105,.35);transform:translateY(-1px)}
.btn-d{background:var(--dan);color:#fff;border:none;box-shadow:0 1px 2px rgba(220,38,38,.3)}
.btn-d:hover{background:#B91C1C;box-shadow:0 4px 12px rgba(220,38,38,.35);transform:translateY(-1px)}
.btn-o{background:#fff;border:1px solid var(--bdr);color:var(--txt);box-shadow:var(--sh-xs)}
.btn-o:hover{background:var(--bg2);border-color:var(--bdr2)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:8px}
.btn-lg{padding:14px 28px;font-size:14px;border-radius:var(--r);font-weight:700}
.btn-g{background:var(--bg2);border:1px solid var(--bdr);color:var(--txt)}.btn-g:hover{background:var(--bg3);border-color:var(--bdr2)}
.btn-blue{background:var(--pri-l);color:var(--pri);border:none;font-weight:700}.btn-blue:hover{background:#DCE8F5}
.btn-wrn{background:var(--wrn-l);color:var(--wrn);border:none;font-weight:700}.btn-wrn:hover{background:#FEF3C7}
.btn-gray{background:var(--bg3);color:var(--txt2);border:none;font-weight:700}.btn-gray:hover{background:var(--bdr)}
.btn-gold{background:var(--gold);color:#fff;border:none;box-shadow:0 1px 2px rgba(232,145,58,.3);font-weight:700}
.btn-gold:hover{background:var(--gold-d);box-shadow:0 4px 12px rgba(232,145,58,.35);transform:translateY(-1px)}

/* ===== FORMS — Glazey ===== */
.fr{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-2)}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:13px;font-weight:600;color:var(--txt2)}
.fg input,.fg select,.fg textarea{padding:9px 12px;font-size:14px;border:1px solid var(--bdr);background:#FFFFFF;border-radius:var(--r-sm);transition:all var(--dur-base) var(--ease-ui)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-ring);background:#fff}
.fg textarea{resize:vertical;min-height:50px}
.req::after{content:' *';color:var(--dan)}

/* ===== PROCESS BUTTONS ===== */
.pb-g{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:12px 0}
.pb{padding:11px 20px;font-size:14px;font-weight:700;background:var(--bg);border:2px solid var(--bdr);color:var(--txt);border-radius:var(--r);transition:all var(--dur-base) var(--ease-ui)}
.pb:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l);transform:translateY(-1px);box-shadow:var(--sh)}
.pb.out{border-color:var(--out);color:var(--out);background:var(--out-l)}
.pb.exc{border-color:var(--exc);color:var(--exc);background:var(--exc-l)}

/* ===== PROCESS TAGS ===== */
.pt{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;margin:3px;font-size:13px;font-weight:700;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r-full);transition:all var(--dur-base)}
.pt.out{background:var(--out-l);border-color:var(--out);color:var(--out)}
.pt.exc{background:var(--exc-l);border-color:var(--exc);color:var(--exc)}
.pt .rm{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;color:var(--txt3);border-radius:50%;transition:all var(--dur-base)}
.pt .rm:hover{color:#fff;background:var(--dan)}

/* ===== AUTOCOMPLETE ===== */
.ac-w{position:relative}
.stk-bar{height:8px;background:#F3F4F6;border-radius:4px;overflow:hidden;margin-top:4px}.stk-bar .fill{height:100%;border-radius:4px;transition:width .3s}
.ac-l{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;background:var(--bg);border:1.5px solid var(--bdr);max-height:200px;overflow-y:auto;box-shadow:var(--sh-lg);border-radius:var(--r-sm);animation:acIn var(--dur-base) var(--ease-ui)}
@keyframes acIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ac-l div{padding:11px 16px;font-size:13px;cursor:pointer;transition:all var(--dur-fast);font-weight:500}
.ac-l div:hover{background:var(--pri-l);color:var(--pri)}

/* ===== TOAST — Glazey ===== */
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);z-index:99999;padding:14px 24px;font-size:14px;font-weight:600;background:#1F2937;color:#fff;opacity:0;transition:all var(--dur-slow) var(--ease-ui);border-radius:var(--r-sm);box-shadow:var(--sh-lg)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{background:var(--suc)}
.toast.err{background:var(--dan)}

/* ===== MODAL (TOSS) ===== */
.mo-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:60px;overflow-y:auto}
.mo-ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:60px;overflow-y:auto}
.mo{background:#FFFFFF;width:560px;max-width:95vw;box-shadow:var(--sh-lg);margin-bottom:40px;border-radius:var(--r-xl);overflow:hidden;animation:moSlide .25s var(--ease-ui)}
/* MES Modal Classes */
#cliMo,#prodMo,#moldMo,#userMo,#woDetMo,#shipMo,#claimMo,#shipDetMo,#cliHistMo,#wkDetMo,#cautPopup{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:60px;overflow-y:auto;width:auto;border-radius:0;box-shadow:none}
.mb{background:#FFFFFF;max-width:95vw;box-shadow:var(--sh-lg);margin-bottom:40px;border-radius:var(--r-xl);overflow:hidden;animation:moSlide .25s var(--ease-ui)}
.mh{font-size:18px;font-weight:800;padding:22px 28px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;letter-spacing:-.3px}
.mh h3{margin:0;font-size:18px;font-weight:800}
.my{padding:28px;max-height:65vh;overflow-y:auto}
.mf{padding:16px 28px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:10px;background:var(--bg2)}
.mc{background:none;border:none;font-size:22px;cursor:pointer;color:var(--txt2);padding:4px 8px;border-radius:4px;transition:all var(--dur-base)}
.mc:hover{color:var(--dan);background:var(--dan-l)}
@keyframes moSlide{from{opacity:0;transform:translateY(-16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.mo-t{font-size:18px;font-weight:800;padding:22px 28px;border-bottom:1px solid var(--bdr);letter-spacing:-.3px}
.mo-bg .mo,.mo-ov .mo{padding:0 28px 24px}
.mo-bg .mo>.mo-t,.mo-ov .mo>.mo-t{margin:0 -28px;padding:22px 28px;border-bottom:1px solid var(--bdr)}
.mo-bg .mo>.mo-f,.mo-ov .mo>.mo-f{margin:0 -28px -24px;padding:16px 28px}
.mo-bg .mo>.mo-b,.mo-ov .mo>.mo-b{margin:0 -28px;padding:28px}
.mo-bg .mo>.mo-t+*,.mo-ov .mo>.mo-t+*{margin-top:20px}

/* ===== WORK ORDER MODAL ===== */
.wo-modal{
  width:min(96vw,1180px)!important;
  max-width:1180px!important;
  height:min(92vh,960px);
  max-height:92vh!important;
  display:flex;
  flex-direction:column;
  padding:0!important;
  overflow:hidden!important;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.78);
  background:
    radial-gradient(circle at top left, rgba(232,145,58,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(30,58,95,.12), transparent 30%),
    linear-gradient(180deg,#F8FBFF 0%,#F3F6FA 100%);
  box-shadow:0 32px 80px rgba(15,23,42,.22);
}
.wo-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:22px 24px 18px;
  border-bottom:1px solid rgba(226,232,240,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));
}
.wo-modal-head-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.wo-modal-kicker{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--pri)}
.wo-modal-title{font-size:24px;font-weight:900;letter-spacing:-.6px;color:var(--txt)}
.wo-modal-sub{font-size:13px;color:var(--txt2);line-height:1.5}
.wo-modal-actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.wo-close-btn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:1px solid var(--bdr);background:#fff;color:var(--txt2);
  font-size:22px;line-height:1;transition:all var(--dur-base) var(--ease-ui)
}
.wo-close-btn:hover{background:var(--bg2);color:var(--txt);border-color:var(--bdr2)}
.wo-modal-body{
  flex:1;
  overflow:hidden;
  padding:var(--sp-4);
  background:linear-gradient(180deg,rgba(248,250,252,.78),rgba(241,245,249,.96));
}
.wo-alert-stack{margin-bottom:10px}
.wo-alert-stack .al{border-radius:var(--r);box-shadow:var(--sh-xs)}
.wo-form-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--sp-4);
  height:100%;
}
.wo-form-col{overflow-y:auto;padding-right:4px}
.wo-form-col:last-child{padding-right:0}
.wo-section-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.95);
  border-radius:20px;
  padding:18px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  margin-bottom:var(--sp-3);
}
.wo-section-card .fg input,
.wo-section-card .fg select,
.wo-section-card .fg textarea{width:100%}
.wo-section-card-process{min-height:100%}
.wo-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--sp-3);
  margin-bottom:14px;
}
.wo-section-head h3{font-size:18px;font-weight:900;letter-spacing:-.4px;color:var(--txt);margin:0}
.wo-section-head p{margin-top:4px;font-size:12px;line-height:1.5;color:var(--txt2)}
.wo-section-kicker{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pri);margin-bottom:2px}
.wo-section-tag{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  background:var(--pri-l);color:var(--pri);font-size:11px;font-weight:700;white-space:nowrap
}
.wo-inline-grid{display:grid;gap:var(--sp-2);margin-bottom:10px}
.wo-inline-grid:last-child{margin-bottom:0}
.wo-inline-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wo-inline-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wo-inline-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wo-inline-grid-cli-prod{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 110px}
/* slim section card (compact header, less padding) */
.wo-section-slim{padding:14px 16px;margin-bottom:10px;border-radius:16px}
.wo-section-head-slim{margin-bottom:10px;align-items:center}
.wo-section-head-slim h3{font-size:15px;font-weight:800;letter-spacing:-.2px}
/* compact material rows (1 row = 1 line) */
.wo-mat-block{margin-bottom:10px;border:1px solid rgba(226,232,240,.9);border-radius:var(--r-md);background:linear-gradient(180deg,#FFFFFF,#FAFBFD);padding:8px 10px}
.wo-mat-block:last-child{margin-bottom:var(--sp-2)}
.wo-mat-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:6px}
.wo-mat-title{font-size:12px;font-weight:800;color:var(--txt)}
.wo-mat-sub{font-size:11px;color:var(--txt3)}
.wo-mat-add{margin-left:auto;font-size:11px;font-weight:700;color:var(--pri);background:var(--pri-l);border:1px solid rgba(59,130,246,.18);border-radius:8px;padding:3px 9px;cursor:pointer}
.wo-mat-add:hover{background:var(--pri);color:#fff}
.wo-mat-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 78px 78px 28px;gap:6px;align-items:center;margin-bottom:5px}
.wo-mat-row:last-child{margin-bottom:0}
.wo-mat-row-aux{grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) 78px 28px}
.wo-mat-cell{height:30px;padding:4px 8px;font-size:12px;border:1px solid var(--bdr);border-radius:8px;background:#fff;width:100%;min-width:0}
.wo-mat-cell:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px rgba(59,130,246,.15)}
.wo-mat-cell-num{text-align:right}
.wo-mat-rm{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(220,38,38,.16);background:#FEF2F2;color:#DC2626;font-size:14px;line-height:1;cursor:pointer;padding:0}
.wo-mat-rm:hover{background:#FEE2E2}
.wo-mat-rm.is-disabled{background:#F8FAFC;color:#CBD5E1;border-color:#E5E7EB;cursor:default}
/* collapsible 인쇄사양/목형 */
.wo-collapsible{margin-bottom:10px;border:1px solid rgba(226,232,240,.9);border-radius:var(--r-md);background:#fff;padding:8px 10px}
.wo-collapsible > summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--txt2);list-style:none;display:flex;align-items:center;gap:6px;padding:2px 0}
.wo-collapsible > summary::-webkit-details-marker{display:none}
.wo-collapsible > summary::before{content:'▸';display:inline-block;font-size:10px;color:var(--txt3);transition:transform var(--dur-base) var(--ease-ui)}
.wo-collapsible[open] > summary::before{transform:rotate(90deg)}
.wo-collapsible[open] > summary{color:var(--txt);margin-bottom:4px}
.wo-collap-sub{font-size:11px;font-weight:500;color:var(--txt3);margin-left:4px}
.wo-mat-block-flat{border:none;background:transparent;padding:0;margin-bottom:0}
.wo-mat-block-flat > .wo-mat-head{justify-content:flex-end}
/* 완제품 수량 강조 */
.wo-fq-emph{display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px;border-radius:var(--r-md);background:linear-gradient(135deg,#EFF6FF,#F8FAFC);border:1px solid rgba(59,130,246,.22);margin-top:4px}
.wo-fq-emph label{font-size:13px;font-weight:800;color:#1D4ED8;margin:0;white-space:nowrap}
.wo-fq-emph input{flex:1;height:38px;font-size:16px;font-weight:800;text-align:right;color:#0F172A;border:1px solid rgba(59,130,246,.22);border-radius:var(--r-sm);padding:0 12px;background:#fff}
.wo-fq-emph input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px rgba(59,130,246,.18)}
/* compact image drop */
.wo-image-drop-compact{padding:var(--sp-2);min-height:54px}
.wo-image-drop-compact .wo-image-hint{font-size:10px}
/* autogrow textarea */
.wo-autogrow{min-height:32px;resize:none;overflow:hidden;line-height:1.4}
/* 공정 상세 — 표 형태 (1공정 = 1행) */
.wo-proc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:var(--r-md);overflow:hidden}
.wo-proc-table thead th{padding:8px 6px;background:#F8FAFC;border-bottom:1px solid var(--bdr);font-size:11px;font-weight:700;color:var(--txt2);text-align:left}
.wo-proc-table tbody td{padding:2px 1px;border-bottom:1px solid #EEF2F7;border-right:1px solid #F1F5F9;vertical-align:middle}
.wo-proc-table tbody td:last-child,.wo-proc-table tbody td.wo-proc-td-handle,.wo-proc-table tbody td.wo-proc-td-name{border-right:none}
.wo-proc-table tbody tr:last-child td{border-bottom:none}
.wo-proc-tr.is-out td{background:#FFFBEB}
.wo-proc-tr.is-exc td{background:#EFF6FF}
.wo-proc-td-handle{cursor:grab;color:#CBD5E1;font-size:14px;line-height:1;text-align:center;user-select:none;letter-spacing:-2px;padding:0 4px}
.wo-proc-td-handle:hover{color:var(--pri)}
.wo-proc-tr.is-dragging td{opacity:.45}
.wo-proc-tr.is-dragging .wo-proc-td-handle{cursor:grabbing}
.wo-proc-tr.is-drop-above > td{box-shadow:inset 0 2px 0 var(--pri)}
.wo-proc-tr.is-drop-below > td{box-shadow:inset 0 -2px 0 var(--pri)}
.wo-proc-td-name{font-weight:700;color:var(--txt);white-space:nowrap}
.wo-proc-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--pri);color:#fff;font-size:11px;font-weight:700;border-radius:50%;margin-right:4px}
.wo-proc-tag{display:inline-block;margin-left:6px;padding:1px 6px;background:#FED7AA;color:#9A3412;font-size:10px;font-weight:700;border-radius:6px}
.wo-proc-cell{height:28px;padding:2px 4px;font-size:12px;border:none;border-radius:0;background:transparent;width:100%;min-width:0;display:block}
.wo-proc-cell:focus{outline:none;background:#EFF6FF;box-shadow:inset 0 -2px 0 var(--pri)}
.wo-proc-cell-num{text-align:right;padding-right:6px}
.wo-proc-vendor{display:flex;gap:0;align-items:center}
.wo-proc-vendor > .ac-w{min-width:0}
.wo-proc-vendor-btn{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--bdr);background:#fff;border-radius:5px;cursor:pointer;font-size:11px;line-height:1;padding:0;margin-right:2px}
.wo-proc-vendor-btn:hover{background:var(--pri-l);border-color:rgba(59,130,246,.3)}
.wo-proc-rm{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(220,38,38,.16);background:#FEF2F2;color:#DC2626;font-size:13px;line-height:1;cursor:pointer;padding:0}
.wo-proc-rm:hover{background:#FEE2E2}
.wo-proc-extra-tr td{background:#FBFCFE;padding:6px 8px}
.wo-proc-extra-tr.is-out td{background:#FFFAF0}
.wo-proc-extra-tr.is-exc td{background:#F2F8FF}
.wo-proc-extra-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:11px}
.wo-proc-extra-check{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;cursor:pointer}
.wo-proc-extra-check input[type=checkbox]{width:14px;height:14px;accent-color:var(--pri);cursor:pointer}
.wo-proc-extra-sub{font-size:10px;color:var(--txt3);font-weight:400}
.wo-proc-extra-field{display:inline-flex;align-items:center;gap:6px}
.wo-proc-extra-field label{font-size:11px;font-weight:600;color:var(--txt2);margin:0;white-space:nowrap}
.wo-proc-extra-field input,.wo-proc-extra-field select{height:26px;padding:2px 6px;font-size:11px;border:1px solid var(--bdr);border-radius:6px;background:#fff}
.wo-proc-cost-text{margin-left:auto;font-size:11px;color:var(--txt3)}
.wo-proc-cost-text b{color:#0F172A;font-weight:800}
.wo-proc-cost-empty{display:none}
.wo-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-2);
  align-items:end;
  margin-bottom:10px;
}
.wo-search-row:last-of-type{margin-bottom:0}
.wo-inline-actions{display:flex;gap:var(--sp-2);align-items:center}
.wo-inline-actions > *:first-child{flex:1;min-width:0}
.wo-select-input{cursor:pointer;background:linear-gradient(180deg,#FFFFFF,#F8FAFC)}
.wo-input-soft{background:#F3F4F6!important;color:var(--txt2)}
.wo-history-panel{margin-top:2px}
.wo-field-suggest{margin:8px 0 4px;padding:10px 12px;background:linear-gradient(180deg,#FFFBEB,#FEF3C7);border:1px solid #FDE68A;border-radius:8px}
.wo-field-suggest .wo-suggest-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);font-size:12px;color:#78350F;flex-wrap:wrap}
.wo-field-suggest .wo-suggest-head b{color:#92400E;font-weight:800}
.wo-field-suggest .wo-suggest-meta{color:#A16207;font-weight:600}
.wo-field-suggest .wo-suggest-applyall{font-size:11px;padding:4px 10px;border-color:#F59E0B;color:#92400E;background:#FFFBEB}
.wo-field-suggest .wo-suggest-applyall:hover{background:#F59E0B;color:#fff;border-color:#D97706}
.wo-field-suggest .wo-suggest-chips{display:flex;flex-wrap:wrap;gap:6px}
.wo-suggest-chip{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border:1px solid #FCD34D;color:#1F2937;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);max-width:100%}
.wo-suggest-chip:hover{background:#FEF3C7;border-color:#F59E0B;box-shadow:0 1px 2px rgba(245,158,11,.15)}
.wo-suggest-chip .wo-suggest-key{color:#92400E;font-weight:700;font-size:11px}
.wo-suggest-chip .wo-suggest-val{color:#0F172A;font-weight:700;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wo-suggest-chip.is-filled{background:#F8FAFC;border-color:#CBD5E1;opacity:.7}
.wo-suggest-chip.is-filled .wo-suggest-key{color:#64748B}
.wo-suggest-chip.is-filled .wo-suggest-val{color:#475569;text-decoration:line-through;text-decoration-color:#CBD5E1}
.wo-suggest-chip.is-filled:hover{background:#F1F5F9;border-color:#94A3B8;opacity:1}
.wo-amount-box{
  min-height:38px;display:flex;align-items:center;justify-content:flex-end;
  padding:0 12px;border-radius:var(--r-md);border:1px solid rgba(59,130,246,.14);
  background:linear-gradient(135deg,#EFF6FF,#F8FAFC);font-size:16px;font-weight:800;color:#1D4ED8
}
.wo-image-drop{
  border:2px dashed var(--bdr);border-radius:16px;padding:var(--sp-3);text-align:center;
  cursor:pointer;background:linear-gradient(180deg,#FFFFFF,#F8FAFC);transition:all var(--dur-base) var(--ease-ui)
}
.wo-image-drop:hover{border-color:var(--pri);background:#FCFDFF}
.wo-image-preview{margin-bottom:6px}
.wo-image-hint{font-size:11px;color:var(--txt2);line-height:1.4}
.wo-chip-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.wo-modal .pb{
  padding:10px 14px;border-radius:var(--r-md);border:1px solid #D9E3EF;background:#fff;
  font-size:13px;box-shadow:none
}
.wo-modal .pb:hover{box-shadow:0 8px 20px rgba(15,23,42,.08)}
.wo-modal #selP{
  min-height:86px;padding:var(--sp-3);border-radius:16px;border:1px dashed #CBD5E1;
  background:linear-gradient(180deg,#F8FAFC,#FFFFFF);margin-bottom:var(--sp-3)
}
.wo-modal .pt{
  margin:4px;padding:9px 12px;border-radius:var(--r);background:#fff;border-color:#D9E3EF;
  box-shadow:0 6px 16px rgba(15,23,42,.06)
}
.wo-modal .pt.out{background:#EFF6FF}
.wo-modal .pt.exc{background:#FFFBEB}
.wo-proc-pill .rm{margin-left:2px}
.wo-proc-empty{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:58px;text-align:center}
.wo-proc-empty-title{font-size:13px;font-weight:700;color:var(--txt)}
.wo-proc-empty-sub{font-size:12px;color:var(--txt3)}
.wo-proc-panel-title{font-size:13px;font-weight:800;color:var(--txt);margin-bottom:var(--sp-2)}
.flow-note{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:var(--r);border:1px solid #E2E8F0;background:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  margin:10px 0 0
}
.flow-note-copy{font-size:12px;color:var(--txt2);line-height:1.5}
.flow-note-copy b{color:var(--txt)}
.flow-note-chips{display:flex;gap:6px;flex-wrap:wrap}
.flow-note-chip{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  background:#EFF6FF;color:#1D4ED8;font-size:11px;font-weight:700
}
.flow-note.danger{border-color:#FECACA;background:linear-gradient(180deg,#FFF7F7,#FEF2F2)}
.flow-note.danger .flow-note-chip{background:#FEE2E2;color:#B91C1C}
.conflict-meta{
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  font-size:12px;color:var(--txt2)
}
.conflict-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)
}
.conflict-pane{
  border:1px solid var(--bdr);border-radius:var(--r-md);background:#fff;overflow:hidden
}
.conflict-pane-title{
  padding:10px 12px;background:var(--bg2);border-bottom:1px solid var(--bdr);
  font-size:12px;font-weight:700;color:var(--txt)
}
.conflict-pre{
  margin:0;padding:var(--sp-3);min-height:220px;max-height:340px;overflow:auto;
  font-size:11px;line-height:1.45;color:var(--txt2);background:#FCFCFD;white-space:pre-wrap;word-break:break-word
}
@media (max-width: 900px){
  .conflict-grid{grid-template-columns:1fr}
  .conflict-pre{min-height:160px}
}
.mo-hd{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center}
.mo-b{padding:28px}
.mo-f{padding:16px 28px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:10px;background:var(--bg2)}

/* ===== SUB TABS ===== */
.st{display:flex;overflow-x:auto;border-bottom:2px solid var(--bdr);margin-bottom:var(--sp-3);background:#fff;-webkit-overflow-scrolling:touch}
.st::-webkit-scrollbar{height:0}
.s-tab{padding:11px 20px;font-size:14px;font-weight:500;color:var(--txt2);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all var(--dur-base) var(--ease-ui);white-space:nowrap;letter-spacing:-.1px}
.s-tab:hover{color:var(--txt);background:var(--bg2)}
.s-tab.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:700}

/* ===== ALERTS ===== */
.al{padding:12px 16px;margin-bottom:var(--sp-2);font-size:14px;font-weight:600;border-radius:var(--r-sm);border-left:4px solid}
.al.dan{background:var(--dan-l);border-color:var(--dan);color:#991B1B}
.al.wrn{background:var(--wrn-l);border-color:var(--wrn);color:#92400E}

/* ===== SIDEBAR — Glazey ===== */
.unified-app{display:flex;height:100vh;overflow-x:hidden;overflow-y:hidden;width:100%}
.sidebar{width:230px;background:#1E293B;color:#FFFFFF;display:flex;flex-direction:column;flex-shrink:0;border-right:none;box-shadow:none}
.sb-logo{padding:24px 22px 22px;font-size:20px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;color:#F1F5F9;letter-spacing:.5px}
.sb-logo::before{content:'';display:inline-block;width:28px;height:28px;background:var(--pri);border-radius:var(--r-sm);box-shadow:0 2px 8px rgba(30,58,95,.4)}
.sb-group{padding:14px 18px;margin:0;font-size:12px;color:#64748B;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:none;user-select:none;transition:background var(--dur-base) var(--ease-ui);margin-top:6px}
.sb-group:hover{background:rgba(255,255,255,.05);color:#94A3B8}
.sb-group .sb-arrow{font-size:10px;color:#64748B;transition:transform .25s var(--ease-ui)}
.sb-group.open .sb-arrow{transform:rotate(90deg)}
.sb-tree{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-out);background:transparent}
.sb-group.open+.sb-tree{max-height:600px}
.sb-item{display:flex;align-items:center;gap:var(--sp-2);padding:10px 18px 10px 32px;font-size:14px;color:#94A3B8;cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:all var(--dur-base) var(--ease-ui);margin:1px 0;font-weight:500;border-left:3px solid transparent;border-radius:0;position:relative}
.sb-item:hover{background:rgba(255,255,255,.06);color:#E2E8F0}
.sb-item.active{background:rgba(30,58,95,.2);color:#7EB8E0;font-weight:700;border-left-color:var(--pri)}
.sb-user{margin-top:auto;padding:18px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:var(--sp-3);background:rgba(0,0,0,.15)}
.sb-avatar{width:38px;height:38px;border-radius:50%;background:var(--pri);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;box-shadow:0 2px 8px rgba(30,58,95,.4)}
.sb-user-name{font-size:13px;font-weight:700;color:#F1F5F9;letter-spacing:-.1px}.sb-user-role{font-size:11px;color:#64748B;font-weight:500;margin-top:1px}
.sb-item[data-ready="false"]{opacity:.4;position:relative}
.sb-item[data-ready="false"]::after{content:'준비중';font-size:11px;font-weight:700;color:#CBD5E1;background:rgba(255,255,255,.1);border-radius:4px;padding:2px 6px;margin-left:auto}
.sb-logout{width:100%;padding:14px;font-size:12px;font-weight:600;background:none;color:#64748B;border:none;border-top:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all var(--dur-base) var(--ease-ui);letter-spacing:.3px}
.sb-logout:hover{background:rgba(239,68,68,.15);color:#FCA5A5}

/* ===== MAIN AREA — Glazey ===== */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2);min-width:0}
.main-header{background:#FFFFFF;border-bottom:1px solid var(--bdr);padding:0 24px;height:56px;display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;position:sticky;top:0;z-index:50}
.main-header h2{font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-.3px}
.main-header .breadcrumb{font-size:11px;color:var(--txt2);font-weight:600;padding:4px 12px;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r-full);letter-spacing:.2px}
.header-right{margin-left:auto;font-size:12px;color:var(--txt2);font-weight:500;font-feature-settings:"tnum"}
/* 메인 영역: 가로/세로 스크롤 허용 (안쪽 박스 고정 크기 유지) */
.main-content{flex:1;overflow-y:auto;overflow-x:auto;padding:20px 24px;background:var(--bg2);min-width:0;-webkit-overflow-scrolling:touch}
.main-content>.module-page.active{
  min-width:1200px;      /* 안쪽 박스 고정을 위한 최소 너비 */
  width:100%;
  max-width:1600px;      /* 최대 너비 상한 */
  margin:0 auto;
}
.module-page{display:none}.module-page.active{display:block}
.module-page .card{margin-bottom:var(--sp-2)}
.module-page .sg{margin-bottom:var(--sp-2)}
.module-page .sb .l{font-size:11px;font-weight:600;color:var(--txt2)}
.module-page .sb .v{font-size:15px;font-weight:700}
.module-page table.dt th{padding:10px 12px;font-size:14px;font-weight:800;text-transform:none;letter-spacing:.2px;color:var(--txt)}
.module-page table.dt td{padding:10px 12px;font-size:15px;font-weight:500;color:#000000!important}
.module-page .card-t{font-size:17px;font-weight:800;margin-bottom:6px;color:var(--txt)}
@media(max-width:768px) and (pointer:coarse){.sidebar{position:fixed;left:-270px;z-index:999;height:100%;transition:left var(--dur-slow) var(--ease-ui);box-shadow:none}.sidebar.open{left:0;box-shadow:20px 0 60px rgba(0,0,0,.3)}.mob-toggle{display:block!important}}

/* ===== CALENDAR ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cell{min-height:72px;padding:var(--sp-2);border:1px solid var(--bdr);background:var(--bg);font-size:12px;border-radius:var(--r-sm);transition:all var(--dur-base)}
.cal-cell:hover{background:var(--pri-l);border-color:rgba(99,102,241,.2)}
.cal-cell.today{background:var(--pri-l);border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.cal-hd{font-weight:700;text-align:center;padding:10px;font-size:11px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px}

/* ===== KPI CARDS ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:var(--sp-3)}
.kpi-card{background:#FFFFFF;border:1px solid var(--bdr);border-radius:var(--r);padding:var(--sp-4);position:relative;overflow:hidden;transition:all var(--dur-base) var(--ease-ui);box-shadow:var(--sh-xs)}
.kpi-card:hover{box-shadow:var(--sh)}
.kpi-card::before{display:none}
.kpi-card.kpi-blue::before,.kpi-card.kpi-green::before,.kpi-card.kpi-orange::before,.kpi-card.kpi-red::before,.kpi-card.kpi-purple::before{display:none}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.kpi-icon-wrap{width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.kpi-blue .kpi-icon-wrap{background:#EFF6FF;color:#1E3A5F}
.kpi-green .kpi-icon-wrap{background:#ECFDF5;color:#059669}
.kpi-orange .kpi-icon-wrap{background:#FFF7ED;color:#E8913A}
.kpi-red .kpi-icon-wrap{background:#FEF2F2;color:#DC2626}
.kpi-purple .kpi-icon-wrap{background:#EFF6FF;color:#1E3A5F}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r-full);font-size:11px;font-weight:700}
.kpi-trend.up{background:rgba(16,185,129,.1);color:#059669}
.kpi-trend.down{background:rgba(239,68,68,.1);color:#DC2626}
.kpi-trend.flat{background:rgba(100,116,139,.1);color:#64748B}
.kpi-value{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:4px;color:var(--txt)}
.kpi-blue .kpi-value,.kpi-green .kpi-value,.kpi-orange .kpi-value,.kpi-red .kpi-value,.kpi-purple .kpi-value{color:var(--txt)}
.kpi-label{font-size:14px;color:var(--txt2);font-weight:500;letter-spacing:0}
.kpi-sub{font-size:13px;color:var(--txt3);margin-top:4px;font-weight:400}


/* ===== NOTIFICATION SYSTEM ===== */
.noti-bell{position:relative;background:none;padding:var(--sp-2);border-radius:var(--r-sm);transition:all var(--dur-base);cursor:pointer;margin-right:8px}
.noti-bell:hover{background:var(--bg3)}
.noti-bell svg{width:20px;height:20px;stroke:var(--txt2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.noti-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font-size:10px;font-weight:800;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 6px rgba(239,68,68,.4);animation:notiBounce .4s ease}
@keyframes notiBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.noti-badge:empty{display:none}
.noti-panel{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-height:480px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:9999;display:none;overflow:hidden;animation:notiSlide var(--dur-base) var(--ease-ui)}
.noti-panel.open{display:block}
@keyframes notiSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.noti-hd{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center}
.noti-hd-title{font-size:15px;font-weight:800;color:var(--txt)}
.noti-hd-clear{font-size:12px;color:var(--pri);font-weight:600;cursor:pointer;background:none;padding:4px 10px;border-radius:var(--r-sm)}
.noti-hd-clear:hover{background:var(--pri-l)}
.noti-list{max-height:380px;overflow-y:auto;padding:var(--sp-2)}
.noti-item{display:flex;gap:var(--sp-3);padding:12px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-base);border-left:3px solid transparent;margin-bottom:2px}
.noti-item:hover{background:var(--bg3)}
.noti-item.unread{background:rgba(99,102,241,.04);border-left-color:var(--pri)}
.noti-item.type-danger{border-left-color:#EF4444}
.noti-item.type-warning{border-left-color:#F59E0B}
.noti-item.type-success{border-left-color:#10B981}
.noti-item.type-info{border-left-color:#1E3A5F}
.noti-icon{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.noti-item.type-danger .noti-icon{background:rgba(239,68,68,.1)}
.noti-item.type-warning .noti-icon{background:rgba(245,158,11,.1)}
.noti-item.type-success .noti-icon{background:rgba(16,185,129,.1)}
.noti-item.type-info .noti-icon{background:rgba(99,102,241,.1)}
.noti-body{flex:1;min-width:0}
.noti-msg{font-size:14px;font-weight:600;color:var(--txt);line-height:1.4;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noti-detail{font-size:12px;color:var(--txt3);font-weight:500}
.noti-time{font-size:10px;color:var(--txt3);flex-shrink:0;font-weight:500}
.noti-empty{text-align:center;padding:40px 20px;color:var(--txt3)}
.noti-empty-icon{font-size:36px;margin-bottom:var(--sp-2)}
.noti-empty-text{font-size:13px;font-weight:600}
.sb-noti-badge{background:#EF4444;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:auto}
.sb-noti-badge:empty{display:none}


/* ===== FULL CALENDAR VIEW ===== */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);padding:12px 16px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r)}
.cal-nav-title{font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-.3px}
.cal-nav-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-radius:var(--r-sm);font-size:16px;font-weight:700;color:var(--txt2);transition:all var(--dur-base)}
.cal-nav-btn:hover{background:var(--pri-l);color:var(--pri)}
.cal-legend{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-3);padding:8px 12px;flex-wrap:wrap}
.cal-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--txt2)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px}
.cal-full-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-hd{text-align:center;padding:10px;font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:1px}
.cal-day-hd.sun{color:#EF4444}
.cal-day-hd.sat{color:#1E3A5F}
.cal-day{min-height:100px;padding:var(--sp-2);border:1px solid var(--bdr);background:var(--bg);border-radius:var(--r-sm);transition:all var(--dur-base);cursor:pointer;position:relative}
.cal-day:hover{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri-ring)}
.cal-day.today{background:var(--pri-l);border-color:var(--pri)}
.cal-day.other{background:var(--bg3);opacity:.4}
.cal-day-num{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--txt)}
.cal-day.today .cal-day-num{color:var(--pri);font-weight:900}
.cal-day.sun .cal-day-num{color:#EF4444}
.cal-day.sat .cal-day-num{color:#1E3A5F}
.cal-evt{font-size:10px;font-weight:600;padding:2px 5px;margin-bottom:2px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cal-evt.ship{background:rgba(16,185,129,.15);color:#059669;border-left:2px solid #10B981}
.cal-evt.start{background:rgba(99,102,241,.12);color:#1E3A5F;border-left:2px solid #1E3A5F}
.cal-evt.late{background:rgba(239,68,68,.12);color:#DC2626;border-left:2px solid #EF4444}
.cal-evt.done{background:rgba(100,116,139,.08);color:#64748B;border-left:2px solid #94A3B8}
.cal-evt-more{font-size:10px;color:var(--pri);font-weight:700;cursor:pointer;padding:2px 5px}
.cal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:var(--sp-4)}
.cal-stat{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:var(--sp-3);text-align:center}
.cal-stat-v{font-size:22px;font-weight:900;letter-spacing:-.5px}
.cal-stat-l{font-size:11px;color:var(--txt2);font-weight:600;margin-top:2px}


/* ===== WORKER PERFORMANCE ===== */
.perf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin-bottom:20px}
.perf-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;box-shadow:var(--sh);transition:all var(--dur-base)}
.perf-card:hover{box-shadow:var(--sh-md)}
.perf-card-hd{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.perf-avatar{width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff}
.perf-name{font-size:15px;font-weight:800}
.perf-proc{font-size:12px;color:var(--txt2);font-weight:600}
.perf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-bottom:14px}
.perf-stat{text-align:center;padding:var(--sp-2);background:var(--bg3);border-radius:var(--r-sm)}
.perf-stat-v{font-size:18px;font-weight:900}
.perf-stat-l{font-size:10px;color:var(--txt2);font-weight:600;margin-top:2px}
.perf-bar-wrap{margin-bottom:var(--sp-2)}
.perf-bar-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;margin-bottom:4px}
.perf-bar{height:8px;background:var(--bg3);border-radius:var(--r-full);overflow:hidden}
.perf-bar-fill{height:100%;border-radius:var(--r-full);transition:width .5s var(--ease-ui)}
.perf-rank{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:700}
.perf-rank.gold{background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#92400E}
.perf-rank.silver{background:linear-gradient(135deg,#F1F5F9,#E2E8F0);color:#475569}
.perf-rank.bronze{background:linear-gradient(135deg,#FED7AA,#FDBA74);color:#9A3412}


/* ===== MOBILE / TABLET OPTIMIZATION ===== */
/* ============================================
   ===== RESPONSIVE — UNIFIED BREAKPOINTS =====
   Desktop ≥1280  |  Laptop 1024~1279
   Tablet  768~1023 |  Mobile <768
   ============================================ */

/* ===== Mobile toggle button (사이드바 햄버거) ===== */
.mob-toggle{display:none;background:none;border:none;font-size:22px;color:var(--txt);padding:6px 10px;cursor:pointer;border-radius:var(--r-sm);transition:background var(--dur-base)}
.mob-toggle:hover{background:var(--bg2)}

/* ============================================
   LAPTOP ≤1279
   ============================================ */
@media(max-width:1279px) and (pointer:coarse){
  .sg{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .sb{padding:16px 18px 14px}
  .sb .v{font-size:24px}
  .main-content{padding:16px 18px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .kanban{grid-template-columns:repeat(3,1fr)}
}

/* ============================================
   TABLET ≤1023 — 사이드바 슬라이드
   ============================================ */
@media(max-width:1023px) and (pointer:coarse){
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:9990;width:240px;height:100vh;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-out);box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 9999px rgba(15,23,42,.35),20px 0 60px rgba(15,23,42,.18)}
  .mob-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-area{margin-left:0}
  .main-header{padding:0 16px;height:52px}
  .main-content{padding:14px 16px}
  .sg{grid-template-columns:repeat(2,1fr);gap:10px}
  .sb{padding:14px 16px}
  .sb .v{font-size:22px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .kanban{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr}
  .podium .pod{order:initial!important}
  .fr{grid-template-columns:1fr 1fr;gap:10px}
  /* ERP 정리: .recv-* 반응형 규칙 제거 */
}

/* SVG charts overflow scroll */
@media(max-width:1023px) and (pointer:coarse){
  .card>svg,#salesTrendArea svg,#trendChart svg{max-width:100%;height:auto}
  #monthlyArea,#salesTrendArea,#rankChart,#prodChart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #monthlyArea table,.dt{min-width:480px}
}

/* ============================================
   MOBILE ≤767
   ============================================ */
@media(max-width:767px) and (pointer:coarse){
  .sidebar{width:84vw;max-width:300px}
  .main-header{padding:0 12px;height:48px}
  .main-header h2{font-size:14px}
  .main-header .breadcrumb{display:none}
  .main-header #notiWrap~button{display:none}
  .main-header .header-right{display:none}
  .main-header #notiWrap{margin-left:auto}
  .main-content{padding:var(--sp-3)}
  .sg{grid-template-columns:1fr;gap:10px}
  .sb{padding:14px 16px}
  .sb .v{font-size:22px}
  .card{padding:14px 16px;margin-bottom:10px}
  .card-t{font-size:12px;margin-bottom:10px;padding-bottom:8px}
  .dt{font-size:12px}
  .dt th{padding:8px 6px;font-size:12px}
  .dt td{padding:9px 6px;font-size:11.5px}
  .gal{grid-template-columns:1fr;gap:10px}
  .fbar{padding:10px 12px}
  .fbar-row{gap:var(--sp-2)}
  .fbar-grow{flex-basis:100%;min-width:0}
  .fbar-spacer{display:none}
  .fr{grid-template-columns:1fr;gap:10px}
  .mo-bg,.mo-ov,#cliMo,#prodMo,#moldMo,#userMo,#woDetMo,#shipMo,#claimMo,#shipDetMo,#cliHistMo,#wkDetMo,#cautPopup,#sMo,#pMo,#payMo,#txMo2,#empMo,#lvMo,#auditMo,#vendorMo,#lotDetMo{padding-top:0!important;padding:0!important;align-items:stretch!important;background:rgba(15,23,42,.5)!important}
  .mo,.mb,#cliMo>*,#prodMo>*,#moldMo>*,#userMo>*,#woDetMo>*,#shipMo>*,#claimMo>*,#shipDetMo>*,#cliHistMo>*,#wkDetMo>*,.cmb{width:100vw!important;max-width:100vw!important;border-radius:0!important;margin:0!important;min-height:100vh;max-height:100vh;overflow-y:auto}
  .mh,.mo-t{font-size:16px;padding:18px 20px}
  .my,.mo-b{padding:18px 20px;max-height:none}
  .mf,.mo-f{padding:14px 20px env(safe-area-inset-bottom,14px)}
  .btn{padding:10px 16px;font-size:13px;min-height:42px}
  .btn-sm{padding:8px 12px;font-size:12px;min-height:36px}
  .login-card{padding:36px 24px}
  .login-title{font-size:24px}
  .heat-grid{grid-template-columns:repeat(13,12px);grid-auto-rows:12px}
  .heat-cell{width:12px;height:12px}
  .chart-area{height:200px;padding:14px 8px 8px}
  .chart-bars{height:160px}
}

/* ============================================
   터치 입력기기 (마우스 없는 환경)
   ============================================ */
@media(pointer:coarse){
  .btn,.btn-sm{min-height:42px;min-width:42px}
  .sb-item{min-height:44px}
  .s-tab{min-height:42px;padding:11px 18px}
  .fbar input[type="date"],.fbar input[type="month"],.fbar select{min-height:40px;font-size:14px}
  .fg input,.fg select,.fg textarea,.lf input,.lf select,.login-input{min-height:44px;font-size:16px}
  .pb{padding:12px 20px;min-height:44px}
  /* 44px 터치 타깃 보강 */
  .filter-btn{min-height:44px;min-width:44px;padding:8px 14px}
  .hd-tab{min-height:44px;padding:12px 16px}
  .mo-x{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .sb-group{min-height:44px;display:flex;align-items:center}
  .bd{min-height:28px;padding:4px 10px}
  /* 테이블 행 터치 여백 */
  .dt td{padding:10px 8px}
  .dt th{padding:10px 8px}
  /* 스크롤 관성 */
  .main-content,.sidebar,.my,.mo-b{-webkit-overflow-scrolling:touch}
  /* 탭/필터 바 스크롤 */
  #groupTabBar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
  #groupTabBar button{flex-shrink:0}
  /* 카드 간격 확대 */
  .card{margin-bottom:var(--sp-3)}
  /* 입력 필드 간격 */
  .fg{margin-bottom:6px}
  .fr{gap:var(--sp-3)}
  .u-tab-btn{min-height:44px;min-width:44px}
  .u-input-sm,.u-input-md,.u-input-md13,.u-input-pill,.u-select,.u-select-sm,.u-input-bdr,.u-input-bdr6{min-height:44px}
  [id="sbShipBadge"]{min-width:24px;min-height:24px}
  .det-btn{min-height:44px;padding:10px 14px}
  .wb{min-height:44px;padding:10px 18px}
}

/* ============================================
   가로 모드 모바일
   ============================================ */
@media(max-width:920px) and (orientation:landscape) and (pointer:coarse){
  .sidebar{width:260px}
  .sg{grid-template-columns:repeat(2,1fr)}
  .main-header{height:44px}
}

/* ============================================
   4K / Ultra-wide
   ============================================ */
@media(min-width:1920px){
  .main-content{padding:24px 32px}
  .sb .v{font-size:30px}
}

/* 작업자 화면 — 태블릿 가로 우선 */
.worker-app,.worker-app *{-webkit-tap-highlight-color:transparent}
@media(max-width:767px) and (pointer:coarse){
  .worker-header{padding:12px 16px}
  .worker-proc{font-size:24px}
  .worker-name{font-size:14px}
}

/* ===== 안전 영역 (노치) ===== */
@supports(padding:env(safe-area-inset-top)){
  .main-header{padding-top:env(safe-area-inset-top)}
  .sidebar{padding-top:env(safe-area-inset-top)}
}

/* ============================================
   범용 반응형 (PC/노트북/태블릿/모바일 공통 - 터치 여부 무관)
   ============================================ */

/* 공통: 가로 overflow 방지 */
body,html{overflow-x:hidden;max-width:100vw}
.main-area,.main-content,.module-page{max-width:100%;box-sizing:border-box}
.main-content>*{max-width:100%}
img,svg,video,iframe{max-width:100%;height:auto}

/* 큰 노트북 (1280~1600px) */
@media(max-width:1600px){
  .main-content{padding:16px 20px}
  .kpi-value{font-size:24px}
}

/* 작은 노트북 (1024~1279px) */
@media(max-width:1279px){
  .sg{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .sb{padding:14px 16px 12px}
  .sb .v{font-size:22px}
  .main-content{padding:14px 16px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .kanban{grid-template-columns:repeat(3,1fr)}
  .sidebar{width:220px}
  .hd-tab{padding:10px 14px;font-size:13px}
}

/* 태블릿 가로 / 작은 노트북 (768~1023px) */
@media(max-width:1023px){
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:9990;width:240px;height:100vh;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-out);box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:0 0 0 9999px rgba(15,23,42,.35),20px 0 60px rgba(15,23,42,.18)}
  .mob-toggle{display:inline-flex!important;align-items:center;justify-content:center}
  .main-area{margin-left:0}
  .main-header{padding:0 16px;height:52px}
  .main-content{padding:14px 16px;overflow-x:auto}
  .sg{grid-template-columns:repeat(2,1fr);gap:10px}
  .sb{padding:14px 16px}
  .sb .v{font-size:20px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .kanban{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr 1fr;gap:10px}
  .card>svg,#salesTrendArea svg,#trendChart svg{max-width:100%;height:auto}
  #monthlyArea,#salesTrendArea,#rankChart,#prodChart{overflow-x:auto}
  .module-page{overflow-x:auto}
  .dt{min-width:max-content}
  .hd-tabs{overflow-x:auto;flex-wrap:nowrap}
  .hd-tab{flex-shrink:0}
}

/* 태블릿 세로 / 큰 폰 (481~767px) */
@media(max-width:767px){
  .sidebar{width:84vw;max-width:300px}
  .main-header{padding:0 12px;height:48px}
  .main-header h2{font-size:14px}
  .main-header .breadcrumb{display:none}
  .main-header .header-right>*:not(#notiWrap){display:none}
  .main-content{padding:10px 12px}
  .sg{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .sb{padding:12px 14px}
  .sb .v{font-size:18px}
  .sb .l{font-size:11px}
  .card{padding:12px 14px;margin-bottom:10px}
  .card-t{font-size:14px;margin-bottom:10px;padding-bottom:8px}
  .dt{font-size:12px}
  .dt th{padding:8px 6px;font-size:12px}
  .dt td{padding:9px 6px;font-size:11.5px}
  .gal{grid-template-columns:1fr;gap:10px}
  .fbar{padding:10px 12px}
  .fbar-row{gap:var(--sp-2);flex-wrap:wrap}
  .fbar-grow{flex-basis:100%;min-width:0}
  .fbar-spacer{display:none}
  .fr{grid-template-columns:1fr;gap:10px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .kpi-value{font-size:20px}
  .kpi-card{padding:var(--sp-3)}
  .mo,.mb{width:100vw!important;max-width:100vw!important;border-radius:0!important;margin:0!important;min-height:100vh;max-height:100vh;overflow-y:auto}
  .mh,.mo-t{font-size:15px;padding:16px 18px}
  .my,.mo-b{padding:16px 18px;max-height:none}
  .mf,.mo-f{padding:12px 18px env(safe-area-inset-bottom,12px)}
  .btn{padding:10px 16px;font-size:13px}
  .btn-sm{padding:8px 12px;font-size:12px}
  .login-card{padding:32px 20px;width:92vw}
  .login-title{font-size:22px}
  .heat-grid{grid-template-columns:repeat(13,12px);grid-auto-rows:12px}
  .heat-cell{width:12px;height:12px}
  .chart-area{height:200px;padding:14px 8px 8px}
  .chart-bars{height:160px}
}

/* 모바일 세로 (≤480px) */
@media(max-width:480px){
  .sg{grid-template-columns:1fr;gap:var(--sp-2)}
  .kpi-grid{grid-template-columns:1fr}
  .hd-tab{padding:8px 10px;font-size:12px}
}

/* 초대형 모니터 (≥1920px) */
@media(min-width:1920px){
  .main-content{padding:24px 32px}
  .sb .v{font-size:30px}
  .kpi-value{font-size:32px}
}

/* ===== PRINT / PDF OUTPUT ===== */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff!important;margin:0;padding:0}
  .sidebar,.main-header,.sb-item,.noti-bell,.noti-panel,.mob-toggle,
  .login-overlay,.toast,button:not(.no-hide-print){display:none!important}
  .unified-app{display:block!important}
  .main-area{overflow:visible!important}
  .main-content{overflow:visible!important;padding:0!important}
  .module-page{display:none!important}
  .module-page.active{display:block!important}
  .card{box-shadow:none!important;border:1px solid #ddd!important;break-inside:avoid;page-break-inside:avoid}
  .kpi-grid{grid-template-columns:repeat(5,1fr)!important}
  .kpi-card{box-shadow:none!important;border:1px solid #ddd!important}
  .dt{font-size:11px!important}
  .dt th{background:#f0f0f0!important}
  /* PDF 전용 헤더 */
  .print-header{display:block!important;text-align:center;padding:20px 0;border-bottom:2px solid #333;margin-bottom:20px}
  .print-header h1{font-size:20px;font-weight:900;margin-bottom:4px}
  .print-header .print-sub{font-size:12px;color:#666}
  .print-header .print-date{font-size:11px;color:#999;margin-top:4px}
  .print-footer{display:block!important;text-align:center;padding:16px 0;border-top:1px solid #ccc;margin-top:20px;font-size:10px;color:#999}
}
.print-header,.print-footer{display:none}


/* ===== DAILY PLAN ===== */
.dp-timeline{display:grid;grid-template-columns:80px 1fr;gap:0;margin:12px 0}
.dp-time{font-size:12px;font-weight:700;color:var(--txt2);padding:10px 8px;border-right:2px solid var(--bdr);text-align:right}
.dp-slot{padding:8px 12px;border-bottom:1px solid var(--bg3);min-height:44px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp-chip{padding:4px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;cursor:pointer;transition:all var(--dur-base);border:1px solid transparent}
.dp-chip:hover{transform:scale(1.05)}
.dp-chip.coat{background:rgba(99,102,241,.12);color:#1E3A5F;border-color:rgba(99,102,241,.2)}
.dp-chip.lami{background:rgba(16,185,129,.12);color:#059669;border-color:rgba(16,185,129,.2)}
.dp-chip.thom{background:rgba(245,158,11,.12);color:#B45309;border-color:rgba(245,158,11,.2)}
.dp-chip.glue{background:rgba(239,68,68,.12);color:#DC2626;border-color:rgba(239,68,68,.2)}
.dp-chip.print{background:rgba(139,92,246,.12);color:#7B61FF;border-color:rgba(139,92,246,.2)}
.dp-chip.post{background:rgba(100,116,139,.12);color:#475569;border-color:rgba(100,116,139,.2)}
.dp-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:var(--sp-4)}
.dp-sum-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:var(--sp-3);text-align:center}
.dp-sum-v{font-size:20px;font-weight:900}.dp-sum-l{font-size:10px;color:var(--txt2);font-weight:600;margin-top:2px}


/* ===== EQUIP UTILIZATION ===== */
.eq-util-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);margin:16px 0}
.eq-util-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);padding:var(--sp-4);text-align:center}
.eq-util-ring{width:80px;height:80px;margin:0 auto 10px;position:relative}
.eq-util-ring svg{width:80px;height:80px;transform:rotate(-90deg)}
.eq-util-ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.eq-util-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:900}
.eq-status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
.eq-status-dot.run{background:#10B981}.eq-status-dot.stop{background:#EF4444}.eq-status-dot.idle{background:#F59E0B}


/* ===== DEFECT TYPES ===== */
.def-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-2);margin:12px 0}
.def-bar{display:flex;align-items:center;gap:var(--sp-2);margin:4px 0}
.def-bar-fill{height:22px;border-radius:var(--r-sm);min-width:2px;transition:width .4s}
.def-bar-label{font-size:11px;font-weight:700;min-width:60px;text-align:right}
.def-bar-val{font-size:11px;font-weight:700;color:var(--txt2)}
/* ===== YIELD ===== */
.yield-row{display:grid;grid-template-columns:80px 1fr 60px;gap:var(--sp-2);align-items:center;padding:6px 0;border-bottom:1px solid var(--bg3)}
/* ===== URGENT BADGE ===== */
.urgent-badge{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:var(--r-full);animation:urgentPulse 1.5s infinite}
@keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.7}}
/* ===== MEMO ===== */
.memo-list{max-height:200px;overflow-y:auto}
.memo-item{padding:var(--sp-2);border-left:3px solid var(--pri);margin-bottom:6px;background:var(--bg3);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:12px}
.memo-time{font-size:10px;color:var(--txt3)}
/* ===== MONTHLY REPORT ===== */
.mr-section{border:1px solid var(--bdr);border-radius:var(--r);padding:var(--sp-4);margin-bottom:var(--sp-3);break-inside:avoid}
.mr-section-t{font-size:14px;font-weight:800;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--bg3)}


/* ===== CLIENT DASHBOARD ===== */
.cli-dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:16px 0}
.cli-dash-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;transition:all var(--dur-base)}
.cli-dash-card:hover{box-shadow:var(--sh-md)}
.cli-dash-name{font-size:15px;font-weight:800;margin-bottom:10px}
.cli-dash-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px}
.cli-dash-row .label{color:var(--txt2);font-weight:600}
.cli-dash-row .value{font-weight:800}
.photo-thumb{width:60px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--bdr);cursor:pointer}
.photo-grid{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:8px}
.backup-area{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin:16px 0}


/* ===== VENDOR DASHBOARD ===== */
.vd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.vd-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;transition:all var(--dur-base);cursor:pointer}
.vd-card:hover{box-shadow:var(--sh-md);border-color:var(--pri)}
.vd-card.active{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-ring)}
.vd-name{font-size:15px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:var(--sp-2)}
.vd-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);background:var(--pri-l);color:var(--pri)}
.vd-stat{display:flex;justify-content:space-between;padding:4px 0;font-size:12px}
.vd-stat .vl{color:var(--txt2);font-weight:600}.vd-stat .vv{font-weight:800}
.dash-empty{padding:28px 14px;text-align:center;color:var(--txt2);font-size:13px}
.today-empty{padding:18px 12px;border:1px dashed var(--bdr);border-radius:var(--r-sm);color:var(--txt2);font-size:12px;background:var(--bg2)}
.dash-ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:0 0 16px}
.dash-op-card{background:#fff;border:1px solid #E5E7EB;border-radius:var(--r);padding:16px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.dash-op-label{font-size:12px;font-weight:700;color:#64748B;margin-bottom:var(--sp-2);letter-spacing:.2px}
.dash-op-value{font-size:30px;font-weight:900;color:#111827;line-height:1.1;margin-bottom:6px}
.dash-op-sub{font-size:12px;color:#64748B}
.op-navy{border-top:4px solid #1E3A5F}
.op-green{border-top:4px solid #059669}
.op-ok{border-top:4px solid #16A34A}
.op-warn{border-top:4px solid #D97706}
.op-danger{border-top:4px solid #DC2626}


/* ===== CEO DASH ===== */
.ceo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3);margin:16px 0}


/* ===== Dashboard Charts ===== */
.dash-card{background:#fff;border-radius:var(--r);box-shadow:0 2px 8px rgba(0,0,0,.04);overflow:hidden}
.dash-card-header{padding:10px 16px;font-size:13px;font-weight:700;color:#1E293B;border-bottom:1px solid #F1F5F9}

/* ===== 생산현황 개선 4종 ===== */
/* 오늘 할 일 보드 (PC 우선) */
.tb-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-bottom:18px}
@media(max-width:1279px){.tb-wrap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.tb-wrap{grid-template-columns:repeat(2,1fr)}}
.tb-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tb-hd-t{font-size:14px;font-weight:800;color:#0F172A;letter-spacing:.2px;display:flex;align-items:center;gap:var(--sp-2)}
.tb-hd-t::before{content:"";width:4px;height:14px;background:#1E40AF;border-radius:2px;display:inline-block}
.tb-hd-sub{font-size:11px;color:#64748B;font-weight:600}
.tb-card{background:#fff;border:1px solid #E5E7EB;border-radius:8px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast);box-shadow:0 1px 2px rgba(0,0,0,.03);min-height:96px}
.tb-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08);border-color:#1E40AF}
.tb-card-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.tb-card-t{font-size:13px;font-weight:700;color:#1E293B;line-height:1.2}
.tb-card-tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;letter-spacing:.3px}
.tb-card-num{font-size:26px;font-weight:900;color:#0F172A;line-height:1.1}
.tb-card-num.zero{color:#94A3B8}
.tb-card-sub{font-size:11px;color:#64748B;font-weight:500;line-height:1.35;min-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-tone-blue{border-top:3px solid #1E40AF}
.tb-tone-red{border-top:3px solid #DC2626}
.tb-tone-orange{border-top:3px solid #F59E0B}
.tb-tone-green{border-top:3px solid #059669}
.tb-tone-purple{border-top:3px solid #6D28D9}
.tb-tone-teal{border-top:3px solid #0F766E}
.tb-tone-rose{border-top:3px solid #BE185D}
.tb-tag-red{background:#FEE2E2;color:#B91C1C}
.tb-tag-orange{background:#FEF3C7;color:#92400E}
.tb-tag-blue{background:#DBEAFE;color:#1E40AF}
.tb-tag-green{background:#D1FAE5;color:#065F46}
.tb-tag-gray{background:#F1F5F9;color:#475569}

/* 오늘의 작업 요약 */
.today-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.today-card{background:var(--card);border-radius:var(--r-md);padding:var(--sp-4);border:1px solid var(--bdr)}
.today-card h4{font-size:14px;color:var(--txt);font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:6px}
.today-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;margin-bottom:6px;background:var(--bg);font-size:14px;font-weight:500;color:#000;cursor:pointer;transition:background var(--dur-base)}
.today-item:hover{background:var(--bdr)}
.today-item .ti-cli{font-weight:700;color:#000}
.today-item .ti-prod{color:#000;font-size:13px;font-weight:500}
.today-item .ti-badge{font-size:12px;padding:2px 8px;border-radius:var(--r-sm);font-weight:700}
.ti-urgent{background:#FEE2E2;color:#DC2626}
.ti-normal{background:#E0F2FE;color:#0284C7}
.ti-done{background:#D1FAE5;color:#059669}

/* 공정 파이프라인 */
.pipe-wrap{display:flex;align-items:center;gap:0;margin-bottom:18px;overflow-x:auto;padding:8px 0}
.pipe-stage{flex:1;min-width:100px;text-align:center;position:relative}
.pipe-box{background:var(--card);border:2px solid var(--bdr);border-radius:var(--r-md);padding:14px 8px;margin:0 4px;transition:all var(--dur-base)}
.pipe-box.pipe-hot{border-color:#EF4444;background:#FEF2F2}
.pipe-box.pipe-busy{border-color:#F59E0B;background:#FFFBEB}
.pipe-box.pipe-ok{border-color:#10B981;background:#F0FDF4}
.pipe-name{font-size:14px;font-weight:800;color:#000;margin-bottom:4px}
.pipe-count{font-size:24px;font-weight:800;line-height:1;color:#000}
.pipe-sub{font-size:12px;color:#000;font-weight:500;margin-top:4px}
.pipe-arrow{font-size:20px;color:var(--txt3);flex-shrink:0;margin:0 -2px}
.pipe-alert{position:absolute;top:-8px;right:8px;background:#EF4444;color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700}

/* 칸반 보드 */
.kanban-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-bottom:18px}
.kanban-col{background:var(--bg);border-radius:var(--r-md);padding:10px;min-height:200px}
.kanban-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;margin-bottom:var(--sp-2);font-size:14px;font-weight:800}
.kh-wait{background:#F3F4F6;color:#6B7280}
.kh-ing{background:#DCE8F5;color:#1E3A5F}
.kh-done{background:#D1FAE5;color:#059669}
.kh-ship{background:#EDE9FE;color:#7B61FF}
.kanban-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:10px;margin-bottom:var(--sp-2);font-size:12px;cursor:pointer;transition:box-shadow var(--dur-base)}
.kanban-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.kanban-card .kc-title{font-weight:800;font-size:14px;margin-bottom:4px;color:#000}
.kanban-card .kc-cli{color:#000;font-weight:500;margin-bottom:6px}
.kanban-card .kc-info{display:flex;justify-content:space-between;align-items:center}
.kanban-card .kc-date{font-size:12px;color:#000;font-weight:500}
.kanban-card .kc-proc{font-size:12px;padding:2px 6px;border-radius:6px;background:var(--bg);color:#000;font-weight:600}
.kanban-card.kc-urgent{border-left:3px solid #EF4444}
.kanban-card.kc-late{border-left:3px solid #F59E0B}
.kb-count{background:var(--card);padding:2px 8px;border-radius:var(--r-sm);font-size:12px}

/* 간트 타임라인 */
.gantt-wrap{overflow-x:auto;margin-bottom:18px}
.gantt-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.gantt-table th{background:var(--bg);padding:6px 8px;font-weight:800;color:#000;font-size:13px;border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:1}
.gantt-row{height:36px}
.gantt-row td{padding:4px 8px;border-bottom:1px solid var(--bdr);vertical-align:middle}
.gantt-label{white-space:nowrap;font-weight:700;min-width:120px;font-size:13px;color:#000}
.gantt-bar-cell{position:relative;padding:0!important}
.gantt-bar{position:absolute;height:22px;border-radius:6px;top:50%;transform:translateY(-50%);min-width:4px;transition:all var(--dur-base)}
.gantt-bar:hover{filter:brightness(1.1);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.gantt-bar span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:600;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.gb-done{background:linear-gradient(90deg,#10B981,#34D399)}
.gb-ing{background:linear-gradient(90deg,#1E3A5F,#60A5FA)}
.gb-wait{background:linear-gradient(90deg,#9CA3AF,#D1D5DB)}
.gb-late{background:linear-gradient(90deg,#EF4444,#F87171)}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:#EF4444;z-index:2}
.gantt-today::after{content:'오늘';position:absolute;top:-16px;left:-12px;font-size:11px;color:#EF4444;font-weight:700}
.gantt-days{display:flex;position:relative;height:100%}
.gantt-day-mark{flex:1;border-right:1px solid var(--bdr);opacity:0.3}


/* ===== 공정현황 리디자인 ===== */
.proc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.proc-card{background:var(--card);border-radius:var(--r-sm);padding:8px 6px;text-align:center;border:1.5px solid var(--bdr);position:relative;transition:all var(--dur-base)}
.proc-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.proc-card.pc-hot{border-color:#DC2626;background:#fff}
.proc-card.pc-busy{border-color:var(--pri);background:#fff}
.proc-card.pc-idle{border-color:#D1D5DB;background:#fff}
.proc-card.pc-ok{border-color:#059669;background:#fff}
.proc-icon{font-size:18px;margin-bottom:3px}
.proc-nm{font-size:13px;font-weight:800;color:#000;margin-bottom:4px}
.proc-stat{display:flex;justify-content:center;gap:6px;margin-bottom:var(--sp-2)}
.proc-pill{font-size:11px;padding:2px 7px;border-radius:var(--r-sm);font-weight:700}
.pp-wait{background:#F3F4F6;color:#6B7280}
.pp-ing{background:#DCE8F5;color:#1E3A5F}
.pp-done{background:#D1FAE5;color:#059669}
.proc-bar{height:6px;background:#E5E7EB;border-radius:3px;overflow:hidden}
.proc-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.proc-pct{font-size:16px;font-weight:800;color:#000;margin:2px 0 1px}
.proc-alert{position:absolute;top:-6px;right:-4px;background:#EF4444;color:#fff;font-size:11px;padding:1px 5px;border-radius:8px;font-weight:700}

/* ===== 주간출고 캘린더 리디자인 ===== */
.wcal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wcal-title{font-size:15px;font-weight:800;color:#000}
.wcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.wcal-day-hd{text-align:center;font-size:12px;font-weight:800;color:#000;padding:4px 0}
.wcal-day-hd.wcal-sun{color:#EF4444}
.wcal-day-hd.wcal-sat{color:#1E3A5F}
.wcal-cell{min-height:36px;background:var(--bg);border-radius:6px;padding:3px;transition:all var(--dur-base);cursor:default;border:1px solid transparent;font-size:10px}
.wcal-cell:hover{border-color:var(--pri);background:var(--card)}
.wcal-cell.wcal-today{background:#EFF6FF;border-color:#1E3A5F}
.wcal-cell.wcal-empty{background:transparent;min-height:0}
.wcal-num{font-size:13px;font-weight:800;color:#000;margin-bottom:4px}
.wcal-today .wcal-num{color:#1E3A5F;font-size:13px}
.wcal-sun .wcal-num{color:#EF4444}
.wcal-sat .wcal-num{color:#1E3A5F}
.wcal-chip{font-size:11px;padding:1px 4px;border-radius:4px;margin-bottom:1px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;cursor:pointer}
.wcal-chip:hover{filter:brightness(.9)}
.wc-ship{background:#FEE2E2;color:#DC2626}
.wc-late{background:#DC2626;color:#fff;font-weight:700}
.wc-start{background:#DCE8F5;color:#1E3A5F}
.wc-done{background:#D1FAE5;color:#059669}


/* ===== 작업 스케줄 보드 (드래그) ===== */
.sched-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);flex-wrap:wrap;gap:var(--sp-2)}
.sched-controls select,.sched-controls button{padding:6px 12px;border:1px solid var(--bdr);border-radius:8px;font-size:12px;background:var(--card);cursor:pointer}
.sched-week-nav{display:flex;align-items:center;gap:var(--sp-2)}
.sched-week-nav button{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}
.sched-week-label{font-weight:700;font-size:14px;min-width:180px;text-align:center}
.sched-board{display:grid;grid-template-columns:120px repeat(7,1fr);gap:0;border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.sched-corner{background:var(--bg);padding:10px;font-weight:700;font-size:12px;text-align:center;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr)}
.sched-day-hd{background:var(--bg);padding:8px 6px;text-align:center;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);font-size:12px}
.sched-day-hd.sd-today{background:#EFF6FF;color:#1E3A5F;font-weight:800}
.sched-day-hd.sd-sun{color:#EF4444}
.sched-day-hd.sd-sat{color:#1E3A5F}
.sched-day-hd .sd-date{font-size:18px;font-weight:800;line-height:1.2}
.sched-day-hd .sd-dow{font-size:10px;color:var(--txt3)}
.sched-proc-label{background:var(--bg);padding:10px 8px;font-weight:700;font-size:12px;text-align:center;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;gap:4px}
.sched-cell{min-height:70px;padding:4px;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);background:var(--card);transition:background var(--dur-base);position:relative}
.sched-cell.sd-today-col{background:#FAFBFF}
.sched-cell.drag-over{background:#DCE8F5 !important;outline:2px dashed #1E3A5F;outline-offset:-2px}
.sched-item{padding:6px 8px;border-radius:8px;font-size:11px;margin-bottom:3px;cursor:grab;transition:all var(--dur-base);border-left:3px solid;position:relative;user-select:none}
.sched-item:hover{transform:scale(1.02);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sched-item:active{cursor:grabbing;opacity:.85;transform:scale(1.05);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.sched-item.si-wait{background:#F9FAFB;border-color:#9CA3AF;color:#6B7280}
.sched-item.si-ing{background:#EFF6FF;border-color:#1E3A5F;color:#0F2240}
.sched-item.si-done{background:#F0FDF4;border-color:#10B981;color:#065F46}
.sched-item.si-late{background:#FEF2F2;border-color:#EF4444;color:#991B1B}
.sched-item.si-urgent{animation:urgentPulse 2s infinite}
.si-title{font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-sub{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-badge{position:absolute;top:3px;right:4px;font-size:11px;padding:1px 4px;border-radius:4px;font-weight:700}
.si-badge-urgent{background:#EF4444;color:#fff}
.si-badge-out{background:#7B61FF;color:#fff}
.sched-empty{text-align:center;color:var(--txt3);font-size:10px;padding:20px 4px;opacity:.4}
.sched-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.9;transform:rotate(2deg);box-shadow:0 8px 24px rgba(0,0,0,.2)}
@keyframes urgentPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}
.sched-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:10px;justify-content:center}
.sched-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--txt2)}
.sched-legend-dot{width:10px;height:10px;border-radius:3px}

/* ===== 얼마에요 Group 구조 — 다중 회사 토글 ===== */
.grp-toggle-bar{display:flex;align-items:center;gap:6px;padding:10px 16px 6px;border-bottom:1px solid var(--bdr);background:var(--bg);flex-wrap:wrap}
.grp-toggle-bar .grp-label{font-size:11px;font-weight:700;color:var(--txt2);letter-spacing:.4px;text-transform:uppercase;margin-right:4px}
.grp-btn{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;border:1.5px solid var(--bdr);background:var(--bg);color:var(--txt2);cursor:pointer;transition:all var(--dur-base)}
.grp-btn:hover{border-color:var(--pri);color:var(--pri)}
.grp-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.grp-btn.active-A{background:#1E40AF;color:#fff;border-color:#1E40AF}
.grp-btn.active-B{background:#7C3AED;color:#fff;border-color:#7C3AED}
.grp-radio-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grp-radio-wrap label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;padding:6px 12px;border:1.5px solid var(--bdr);border-radius:8px;transition:all var(--dur-base)}
.grp-radio-wrap label:has(input:checked){border-color:var(--pri);background:var(--pri-l);color:var(--pri);font-weight:700}
.grp-badge{display:inline-block;padding:1px 7px;border-radius:var(--r-sm);font-size:10px;font-weight:700;margin-left:4px}
.grp-badge-A{background:#DBEAFE;color:#1E40AF}
.grp-badge-B{background:#EDE9FE;color:#7C3AED}
.grp-badge-ALL{background:#E5E7EB;color:#374151}

/* 통합 모드: ERP 내부 헤더/탭 숨기기 (사이드바로 통일) */
.unified-app .module-page .hd{display:none!important}
.unified-app .module-page .app>.body{padding:0}
.unified-app .module-page .app{background:transparent}
/* 탭 콘텐츠 body 영역 패딩 정리 */
.unified-app .module-page .body{padding:0}
.unified-app .module-page .tb{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:14px}
.unified-app .module-page .btn{font-size:13px;font-weight:700}
.unified-app .module-page .fbar input,.unified-app .module-page .sb-r input{font-size:14px;font-weight:500;color:var(--txt)}

/* ===== UTILITY CLASSES (공통) ===== */
/* 섹션 타이틀 */
.sec-t{font-size:15px;font-weight:800;color:var(--txt);letter-spacing:-.4px;margin-bottom:10px}
.sec-t2{font-size:13px;font-weight:700;color:var(--txt);letter-spacing:-.2px;margin-bottom:var(--sp-2)}

/* 숫자 표시 */
.num-xl{font-size:28px;font-weight:800;letter-spacing:-1.2px;line-height:1}
.num-lg{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1}
.num-md{font-size:18px;font-weight:700;letter-spacing:-.5px;line-height:1}

/* 라벨 */
.lbl{font-size:11px;font-weight:500;color:var(--txt2);letter-spacing:.2px}

/* 상태 뱃지 - 통일된 스타일 */
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:0}
.tag-blue{background:var(--pri-l);color:var(--pri)}
.tag-green{background:var(--suc-l);color:var(--suc)}
.tag-red{background:var(--dan-l);color:var(--dan)}
.tag-orange{background:var(--exc-l);color:var(--exc)}
.tag-gray{background:var(--bg3);color:var(--txt2)}
.tag-purple{background:#F5F3FF;color:#6D28D9}

/* 툴바 (필터 + 버튼 행) */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.toolbar-r{margin-left:auto;display:flex;gap:6px;align-items:center}

/* 빈 상태 */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--txt3);text-align:center}
.empty-state .icon{font-size:36px;margin-bottom:10px;opacity:.5}
.empty-state .msg{font-size:14px;font-weight:600;color:var(--txt2);margin-bottom:4px}
.empty-state .sub{font-size:12px;color:var(--txt3)}

/* 구분선 */
.divider{height:1px;background:var(--bdr);margin:12px 0}

/* 페이지 패딩 */
.pg{padding:14px}

/* ===== 생산계획 ===== */
.plan-kpi{flex:1;min-width:80px;padding:var(--sp-3);border-radius:var(--r-sm);text-align:center;cursor:pointer;transition:opacity var(--dur-base)}
.plan-kpi:hover{opacity:.75}
.plan-kpi .num{font-size:22px;font-weight:800;line-height:1.2}
.plan-kpi.k-gray{background:var(--bg2)}.plan-kpi.k-gray .num{color:var(--txt)}
.plan-kpi.k-blue{background:var(--pri-l)}.plan-kpi.k-blue .num{color:var(--pri)}
.plan-kpi.k-orange{background:var(--exc-l)}.plan-kpi.k-orange .num{color:var(--exc)}
.plan-kpi.k-red{background:var(--dan-l)}.plan-kpi.k-red .num{color:var(--dan)}
.plan-card{border-radius:var(--r-md);border:1px solid var(--bdr);background:var(--bg);box-shadow:var(--sh-xs);overflow:hidden}
.plan-card-hdr{padding:9px 16px;background:var(--bg2);display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;border-bottom:1px solid var(--bdr);border-left:5px solid transparent;transition:background var(--dur-fast)}
.plan-card-hdr:hover{background:#ECEEF2}
.plan-card-nm{font-weight:700;font-size:14px;color:var(--txt);min-width:72px}
.plan-card-more{margin-left:auto;color:var(--txt3);font-size:13px}
.plan-sec{padding:10px 12px}
.plan-sec-br{border-right:1px solid var(--bdr)}
.plan-sec-t{font-size:11px;font-weight:700;margin-bottom:6px}
.plan-sec-empty{font-size:12px;color:var(--txt3);padding:4px 0}
.plan-more{font-size:10px;color:var(--txt2);padding:2px 4px}
.plan-item{display:flex;align-items:center;gap:6px;padding:5px 8px;margin:2px 0;border-radius:7px}
.plan-item-inf{flex:1;overflow:hidden}
.plan-item-nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-item-cli{font-size:10px;color:var(--txt3)}
.plan-item-dd{font-size:10px;font-weight:700;flex-shrink:0}
.plan-item-st{font-size:10px;font-weight:700;flex-shrink:0}
.pi-wait{background:#FFFBEB}.pi-ing{background:var(--pri-l)}.pi-done{background:var(--suc-l)}
.pi-chk{background:var(--dan-l)}.pi-ext{background:#FDF4FF}
.plan-mach-t{font-size:10px;font-weight:700;color:var(--txt2);margin-bottom:3px}

/* ===== 공정 파이프라인 ===== */
.pipe-node{flex:1;text-align:center;cursor:pointer;padding:2px 0}
.pipe-node-nm{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--txt)}
.pipe-tags{display:flex;gap:3px;justify-content:center;margin-bottom:4px}
.pipe-bar{height:6px;background:#334155;border-radius:3px;overflow:hidden}
.pipe-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.pipe-arr{color:#475569;font-size:16px;padding:0 2px;align-self:center}

/* ===== 공정별 현황 카드 ===== */
.pc{border-radius:var(--r);background:var(--bg);overflow:hidden;box-shadow:var(--sh)}
.pc-hdr{padding:10px 12px;background:#1E293B;display:flex;justify-content:center;align-items:center;gap:6px;min-height:42px}
.pc-hdr.pc-done{background:var(--suc)}
.pc-hdr-nm{font-size:15px;font-weight:800;color:#FFFFFF}
.pc-hdr-pct{font-size:12px;font-weight:700;color:rgba(255,255,255,.8)}
.pc-body{padding:10px 12px}
.pc-stats{display:flex;gap:var(--sp-2);margin-bottom:6px}
.pc-stat{text-align:center;flex:1}
.pc-stat .num{font-size:24px;font-weight:800;line-height:1.2;color:#000}
.pc-stat .num.orange{color:var(--wrn)}
.pc-stat .num.blue{color:var(--pri)}
.pc-stat .num.green{color:var(--suc)}
.pc-stat .num.red{color:var(--dan)}
.pc-bar{height:4px;background:#F1F5F9;border-radius:2px;overflow:hidden}
.pc-bar-fill{height:100%;border-radius:2px;transition:width .3s}
.pc-mini{margin-top:6px;max-height:60px;overflow-y:auto}
.pc-mini-row{display:flex;align-items:center;gap:4px;padding:2px 0;font-size:10px}
.pc-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pc-mini-nm{flex:1;font-weight:700;color:#000;text-align:center;font-size:11px}
.pc-mini-dday{font-weight:700;font-size:11px;color:#000}
.pc-more{font-size:11px;color:var(--txt2);text-align:center;margin-top:2px}

/* ===== 툴바 공통 입력 스타일 (.tb 안에서 자동 적용) ===== */
.tb input[type="month"],.tb input[type="date"],.tb input[type="number"],.tb select{padding:7px;border:1px solid var(--bdr);border-radius:4px;font-size:13px}
.tb input[type="text"]{padding:7px;border:1px solid var(--bdr);border-radius:4px;font-size:13px;width:140px}
.tb label{font-size:12px;display:flex;align-items:center;gap:4px}

/* ===== Filter Toolbar (Premium 통일 컴포넌트) ===== */
.fbar{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:10px}
.fbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fbar-row + .fbar-row{padding-top:10px;border-top:1px solid var(--bdr-soft)}
.fbar-grow{flex:1;min-width:180px}
.fbar input[type="text"],.fbar input[type="search"],.fbar input:not([type]){flex:1;min-width:200px;padding:10px 14px 10px 38px;border:1px solid var(--bdr);border-radius:var(--r-sm);font-size:13px;background:#FFFFFF url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;color:var(--txt);font-weight:500;transition:all .25s var(--ease-ui);box-shadow:var(--sh-xs)}
.fbar input[type="text"]:hover,.fbar input:not([type]):hover{border-color:var(--bdr2)}
.fbar input[type="text"]:focus,.fbar input:not([type]):focus{border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-ring),var(--sh-xs);outline:none}
.fbar input[type="date"],.fbar input[type="month"],.fbar select{padding:9px 12px;border:1px solid var(--bdr);border-radius:var(--r-sm);font-size:12.5px;background:#FFFFFF;font-weight:600;color:var(--txt);box-shadow:var(--sh-xs);transition:border-color var(--dur-base) var(--ease-ui)}
.fbar input[type="date"]:focus,.fbar input[type="month"]:focus,.fbar select:focus{border-color:var(--pri);outline:none;box-shadow:0 0 0 3px var(--pri-ring)}
.fbar-pills{display:inline-flex;gap:0;border:1px solid var(--bdr);border-radius:var(--r-sm);padding:3px;background:#F4F6FA;box-shadow:var(--sh-xs)}
.fbar-pills button{padding:7px 14px;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--txt2);border-radius:6px;cursor:pointer;transition:all var(--dur-base) var(--ease-ui);letter-spacing:-.1px;white-space:nowrap}
.fbar-pills button:hover{color:var(--txt)}
.fbar-pills button.on{background:#FFFFFF;color:var(--pri);box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 0 rgba(15,23,42,.04);font-weight:700}
.fbar-date-nav{display:inline-flex;align-items:center;gap:4px;background:#F4F6FA;border:1px solid var(--bdr);border-radius:var(--r-sm);padding:3px;box-shadow:var(--sh-xs)}
.fbar-date-nav button{width:28px;height:28px;border:none;background:transparent;color:var(--txt2);font-size:13px;cursor:pointer;border-radius:4px;transition:all var(--dur-base)}
.fbar-date-nav button:hover{background:#FFFFFF;color:var(--txt)}
.fbar-date-nav input[type="date"]{border:none;box-shadow:none;background:transparent;padding:5px 6px;font-weight:600;color:var(--txt)}
.fbar-spacer{flex:1}
.fbar-label{font-size:11px;font-weight:700;color:var(--txt2);letter-spacing:.4px;text-transform:uppercase;margin-right:4px}
.fbar-stat{font-size:12px;color:var(--txt2);font-weight:600;padding:4px 10px;background:var(--pri-l);color:var(--pri);border-radius:var(--r-full)}

/* ===== NEW DASHBOARD (초록 #059669 / 네이비 #1E3A5F / 빨강 #DC2626) ===== */
.nd-shift{background:#fff;border-radius:var(--r);padding:14px 20px;margin-bottom:var(--sp-4);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.nd-shift-title{font-size:11px;font-weight:700;color:#94A3B8;margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:.5px}
.nd-shift-track{height:6px;background:#E9EDF2;border-radius:3px;position:relative}
.nd-shift-fill{height:100%;border-radius:3px;background:#1E3A5F;position:relative}
.nd-shift-fill::after{content:'';position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#1E3A5F;border:3px solid #fff;box-shadow:0 2px 8px rgba(30,58,95,.35)}
.nd-shift-target{position:absolute;top:-5px;width:2px;height:16px;background:#CBD5E1;border-radius:1px}
.nd-shift-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#94A3B8}

.nd-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}
.nd-kpi-card{background:#fff;border-radius:var(--r);padding:var(--sp-5);box-shadow:0 1px 4px rgba(0,0,0,.04);position:relative;overflow:hidden;cursor:pointer;transition:all var(--dur-base)}
.nd-kpi-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-1px)}
.nd-kpi-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.nd-kpi-card.nd-navy::before{background:#1E3A5F}
.nd-kpi-card.nd-green::before{background:#059669}
.nd-kpi-card.nd-red::before{background:#DC2626}
.nd-kpi-card.nd-gray::before{background:#94A3B8}
.nd-kpi-icon{position:absolute;right:14px;top:14px;font-size:28px;opacity:.08}
.nd-kpi-num{font-size:34px;font-weight:900;color:#1E293B;line-height:1;margin-bottom:4px;font-feature-settings:"tnum"}
.nd-kpi-card.nd-red .nd-kpi-num{color:#DC2626}
.nd-kpi-label{font-size:12px;font-weight:600;color:#94A3B8;margin-bottom:10px}
.nd-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.nd-kpi-delta.up{background:#ECFDF5;color:#059669}
.nd-kpi-delta.down{background:#FEF2F2;color:#DC2626}
.nd-kpi-delta.flat{background:#F5F7FA;color:#94A3B8}
.nd-kpi-spark{margin-top:12px;height:28px}

.nd-gauge-row{display:grid;grid-template-columns:repeat(3,1fr) 2fr;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.nd-gauge{background:#fff;border-radius:var(--r);padding:var(--sp-5);box-shadow:0 1px 4px rgba(0,0,0,.04);text-align:center}
.nd-gauge-title{font-size:11px;font-weight:700;color:#94A3B8;margin-bottom:var(--sp-3);text-transform:uppercase;letter-spacing:.5px}
.nd-gauge-wrap{position:relative;width:120px;height:68px;margin:0 auto}
.nd-gauge-val{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:24px;font-weight:900;color:#1E293B}
.nd-area{background:#fff;border-radius:var(--r);padding:var(--sp-5);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.nd-area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.nd-area-title{font-size:13px;font-weight:800;color:#1E293B}

.nd-pipe{background:#fff;border-radius:var(--r);padding:var(--sp-5);box-shadow:0 1px 4px rgba(0,0,0,.04);margin-bottom:var(--sp-4)}
.nd-pipe-title{font-size:13px;font-weight:800;color:#1E293B;margin-bottom:var(--sp-4)}
.nd-pipe-row{display:flex;align-items:center;gap:0}
.nd-pipe-step{flex:1;text-align:center;position:relative;cursor:pointer}
.nd-pipe-step:hover .nd-pipe-circle{transform:scale(1.08)}
.nd-pipe-circle{width:52px;height:52px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;position:relative;background:#F5F7FA;color:#1E3A5F;transition:transform var(--dur-base)}
.nd-pipe-ring{position:absolute;top:-4px;left:-4px;width:60px;height:60px}
.nd-pipe-name{font-size:12px;font-weight:700;color:#334155;margin-bottom:4px}
.nd-pipe-tags{display:flex;gap:4px;justify-content:center;margin-top:4px}
.nd-pipe-tags span{font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}
.nd-pipe-arrow{color:#D1D5DB;font-size:18px;padding-bottom:28px}

.nd-feed{background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.nd-feed-title{font-size:13px;font-weight:800;color:#1E293B;margin-bottom:var(--sp-3)}
.nd-feed-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);margin-bottom:4px;font-size:13px;font-weight:500;color:#334155}
.nd-feed-item.nd-f-red{background:#FEF2F2;border-left:3px solid #DC2626}
.nd-feed-item.nd-f-green{background:#ECFDF5;border-left:3px solid #059669}
.nd-feed-item.nd-f-navy{background:#EFF6FF;border-left:3px solid #1E3A5F}
.nd-feed-time{font-size:11px;color:#94A3B8;margin-left:auto;white-space:nowrap;font-weight:600}

@media(max-width:1024px){.nd-kpi{grid-template-columns:repeat(3,1fr)}.nd-gauge-row{grid-template-columns:1fr 1fr}.nd-pipe-row{flex-wrap:wrap;gap:var(--sp-2)}.nd-pipe-arrow{display:none}}
@media(max-width:640px){.nd-kpi{grid-template-columns:repeat(2,1fr)}.nd-gauge-row{grid-template-columns:1fr}.nd-kpi-num{font-size:24px}.nd-kpi-card{padding:14px}}
@media(max-width:480px){.nd-kpi{grid-template-columns:1fr}.nd-kpi-num{font-size:28px}.nd-pipe-row{gap:4px}}
@media(max-width:1024px){.dash-ops-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dash-ops-grid{grid-template-columns:1fr}}

/* ===== v2: 새 차트 스타일 ===== */
/* KPI 카드 미니 막대 스파크라인 */
.nd-kpi-spark-v2{margin-top:10px;height:28px;display:flex;align-items:flex-end;gap:3px}
.nd-kpi-spark-bar{flex:1;background:#059669;border-radius:2px;min-height:2px;transition:height .3s}

/* 원형 게이지 v2 */
.nd-gauge-v2{background:#fff;border-radius:var(--r);padding:20px 16px;box-shadow:0 1px 4px rgba(0,0,0,.04);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px}
.nd-gauge-v2 .nd-gauge-title{font-size:11px;font-weight:700;color:#94A3B8;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
.nd-gauge-circle{position:relative;width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--dur-slow)}
.nd-gauge-inner{width:82px;height:82px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.nd-gauge-v2 .nd-gauge-val{position:static;transform:none;font-size:22px;font-weight:900;letter-spacing:-.5px;font-feature-settings:"tnum";line-height:1}

/* 일별 생산량 막대 차트 */
.nd-bars{display:flex;align-items:flex-end;gap:var(--sp-2);height:150px;padding:10px 8px 0;min-width:0}
.nd-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;height:100%}
.nd-bar-val{font-size:10px;font-weight:700;color:#475569;height:14px;line-height:14px;font-feature-settings:"tnum"}
.nd-bar-track{flex:1;width:100%;max-width:28px;background:#F5F7FA;border-radius:6px 6px 0 0;display:flex;align-items:flex-end;overflow:hidden;margin:4px 0}
.nd-bar-fill{width:100%;border-radius:6px 6px 0 0;transition:height .4s ease}
.nd-bar-lbl{font-size:11px;margin-top:6px}

/* 공정 파이프라인 원형 링 v2 */
.nd-pipe-circle{position:relative;z-index:1}
.nd-pipe-circle>*:not(.nd-pipe-ring-v2){position:relative;z-index:2}
.nd-pipe-ring-v2{position:absolute;top:-4px;left:-4px;width:60px;height:60px;border-radius:50%;padding:3px;box-sizing:border-box;z-index:0}
.nd-pipe-ring-v2 .nd-pipe-ring-inner{width:100%;height:100%;background:#F5F7FA;border-radius:50%}
.nd-pipe-num{position:relative;z-index:2;font-size:18px;font-weight:900}

/* 공정 파이프라인 - 1줄 고정 */
.nd-pipe-row{flex-wrap:nowrap;overflow-x:auto;gap:4px}
.nd-pipe-step{flex:1 1 0;min-width:0;text-align:center}
.nd-pipe-arrow{flex:0 0 auto}
.nd-pipe-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-pipe-tags{flex-wrap:wrap}
@media(max-width:1024px){.nd-pipe-arrow{padding:0 2px;font-size:14px}.nd-pipe-circle{width:44px;height:44px}.nd-pipe-ring-v2{width:52px;height:52px}.nd-pipe-num{font-size:15px}}
@media(max-width:640px){.nd-pipe-arrow{display:none}.nd-pipe-circle{width:40px;height:40px}.nd-pipe-ring-v2{width:48px;height:48px}.nd-pipe-name{font-size:10px}.nd-pipe-num{font-size:13px}}

/* ===== Gallery Card Grid (거래처/품목/인쇄소/직원 등) ===== */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gal-card{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-xs);transition:all .25s var(--ease-out);cursor:pointer;position:relative;overflow:hidden}
.gal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.gal-card:hover{box-shadow:var(--sh);border-color:var(--bdr);transform:translateY(-2px)}
.gal-hd{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.gal-avatar{width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;background:var(--pri-grad);box-shadow:0 4px 10px -2px rgba(30,64,175,.35),inset 0 1px 0 rgba(255,255,255,.2);flex-shrink:0}
.gal-avatar.gold{background:var(--gold-grad);box-shadow:0 4px 10px -2px rgba(182,138,78,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.gal-avatar.green{background:linear-gradient(135deg,#10B97E,#0E8C57);box-shadow:0 4px 10px -2px rgba(14,140,87,.35)}
.gal-avatar.purple{background:linear-gradient(135deg,#9466F0,#6D28D9);box-shadow:0 4px 10px -2px rgba(109,40,217,.35)}
.gal-info{flex:1;min-width:0}
.gal-nm{font-size:14px;font-weight:800;color:var(--txt);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-sub{font-size:11px;color:var(--txt2);font-weight:600;margin-top:2px}
.gal-grade{padding:3px 8px;border-radius:var(--r-full);font-size:10px;font-weight:800;letter-spacing:.4px}
.gal-grade.A{background:var(--pri-l);color:var(--pri)}
.gal-grade.B{background:var(--gold-l);color:var(--gold-d)}
.gal-grade.C{background:#F1F3F7;color:var(--txt2)}
.gal-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);padding:10px 0;border-top:1px solid var(--bdr-soft);margin-top:8px}
.gal-stat-l{font-size:10px;color:var(--txt3);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.gal-stat-v{font-size:14px;font-weight:800;color:var(--txt);font-feature-settings:"tnum";margin-top:2px}
.gal-stat-v.dan{color:var(--dan)}
.gal-stat-v.suc{color:var(--suc)}
.gal-stat-v.pri{color:var(--pri)}
.gal-spark{width:100%;height:24px;display:block;margin-top:6px}

/* ===== Risk Alert Cards (재고 등) ===== */
.risk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);margin-bottom:14px}
.risk-card{background:var(--card);border:1px solid var(--bdr-soft);border-left:4px solid var(--bdr);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-xs);transition:all .25s var(--ease-ui)}
.risk-card.danger{border-left-color:var(--dan);background:linear-gradient(90deg,rgba(200,54,43,.04) 0%,#FFFFFF 30%)}
.risk-card.warn{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(182,138,78,.05) 0%,#FFFFFF 30%)}
.risk-card.ok{border-left-color:var(--suc);background:linear-gradient(90deg,rgba(14,140,87,.04) 0%,#FFFFFF 30%)}
.risk-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.risk-icon{font-size:16px}
.risk-cnt{font-size:22px;font-weight:800;color:var(--txt);font-feature-settings:"tnum";letter-spacing:-.5px}
.risk-l{font-size:11px;font-weight:700;color:var(--txt2);letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px}
.risk-foot{font-size:11px;color:var(--txt3);margin-top:6px;font-weight:600}

/* ===== Podium (TOP rank) ===== */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;margin-bottom:18px}
.pod{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:18px 14px;text-align:center;box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.pod::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.pod.r1{order:2;padding-top:30px}.pod.r1::before{background:var(--gold-grad)}
.pod.r2{order:1}.pod.r2::before{background:linear-gradient(90deg,#C7CCD4,#9AA0A8)}
.pod.r3{order:3}.pod.r3::before{background:linear-gradient(90deg,#CC9966,#A67148)}
.pod-rank{font-size:11px;font-weight:800;color:var(--txt2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.pod.r1 .pod-rank{color:var(--gold-d)}
.pod-nm{font-size:14px;font-weight:800;color:var(--txt);letter-spacing:-.2px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-v{font-size:18px;font-weight:800;color:var(--pri);font-feature-settings:"tnum"}
.pod-sub{font-size:11px;color:var(--txt3);font-weight:600;margin-top:4px}

/* ===== Progress List (랭킹/순위) ===== */
.prk{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-xs);margin-bottom:14px}
.prk-row{display:flex;align-items:center;gap:var(--sp-3);padding:10px 0;border-bottom:1px solid var(--bdr-soft)}
.prk-row:last-child{border-bottom:none}
.prk-rank{width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--txt2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prk-rank.top{background:var(--gold-grad);color:#fff;box-shadow:0 2px 6px -1px rgba(182,138,78,.4)}
.prk-nm{flex:1;font-size:13px;font-weight:700;color:var(--txt);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prk-bar-wrap{flex:1;background:#F1F3F7;border-radius:4px;height:8px;overflow:hidden;max-width:240px}
.prk-bar{height:100%;background:var(--pri-grad);border-radius:4px;transition:width var(--dur-slow) var(--ease-ui)}
.prk-v{font-size:12px;font-weight:800;color:var(--pri);font-feature-settings:"tnum";min-width:80px;text-align:right}

/* ===== Insight Card (경영분석 등) ===== */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);margin-bottom:14px}
.ins{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.ins::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--pri-grad)}
.ins.gold::before{background:var(--gold-grad)}
.ins.green::before{background:linear-gradient(90deg,#10B97E,#0E8C57)}
.ins.danger::before{background:linear-gradient(90deg,#E04B3F,#C8362B)}
.ins-l{font-size:11px;font-weight:700;color:var(--txt2);letter-spacing:.4px;text-transform:uppercase;margin-bottom:var(--sp-2)}
.ins-v{font-size:24px;font-weight:800;color:var(--txt);letter-spacing:-.6px;font-feature-settings:"tnum";line-height:1}
.ins-delta{font-size:12px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:4px}
.ins-delta.up{color:var(--suc)}
.ins-delta.down{color:var(--dan)}
.ins-foot{font-size:11px;color:var(--txt3);font-weight:600;margin-top:4px}

/* ===== Trend Chart (경영분석 추이) ===== */
.chart-area{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);height:240px;padding:18px 12px 12px;background:linear-gradient(180deg,transparent 0,rgba(15,23,42,.02) 100%);border-radius:var(--r-sm);overflow:hidden}
.chart-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:200px}
.chart-bar{border-radius:3px 3px 0 0;position:relative;transition:opacity var(--dur-base) var(--ease-ui);cursor:default}
.chart-bar:hover{opacity:.85}
.chart-bar .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0B1220;color:#fff;font-size:10px;font-weight:600;padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-base)}
.chart-bar:hover .tip{opacity:1}
.chart-label{font-size:11px;color:var(--txt2);font-weight:600;white-space:nowrap}
.chart-legend{display:flex;justify-content:center;gap:18px;margin-top:10px;font-size:11px;color:var(--txt2);font-weight:600}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:2px}

/* ===== Calendar Heatmap (출고이력) ===== */
.heat{background:var(--card);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.heat-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.heat-title{font-size:13px;font-weight:800;color:var(--txt);letter-spacing:-.2px;display:flex;align-items:center;gap:var(--sp-2)}
.heat-title::before{content:'';width:3px;height:14px;background:var(--pri-grad);border-radius:2px}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt2);font-weight:600}
.heat-legend-cell{width:11px;height:11px;border-radius:3px;border:1px solid var(--bdr-soft)}
.heat-grid{display:grid;grid-template-columns:repeat(13,16px);grid-auto-rows:16px;gap:4px;justify-content:start}
.heat-cell{width:16px;height:16px;border-radius:3px;background:#F1F3F7;border:1px solid var(--bdr-soft);transition:transform var(--dur-base) var(--ease-ui),box-shadow var(--dur-base) var(--ease-ui);cursor:default;position:relative}
.heat-cell:hover{transform:scale(1.4);z-index:5;box-shadow:var(--sh)}
.heat-cell.lv1{background:#DBE5F7}
.heat-cell.lv2{background:#9DB7E8}
.heat-cell.lv3{background:#5887D6}
.heat-cell.lv4{background:var(--pri)}
.heat-cell.lv5{background:var(--pri-d)}
.heat-cell .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.8);background:#0B1220;color:#fff;font-size:10px;font-weight:600;padding:5px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--dur-base) var(--ease-ui)}
.heat-cell:hover .tip{opacity:1;transform:translateX(-50%) scale(1)}

/* ===== Kanban Board (반품/클레임 뷰) ===== */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:14px}
.kb-col{background:var(--bg2);border:1px solid var(--bdr-soft);border-radius:var(--r);padding:var(--sp-3);min-height:240px}
.kb-hd{display:flex;align-items:center;justify-content:space-between;padding:0 4px 12px;border-bottom:1px solid var(--bdr-soft);margin-bottom:10px}
.kb-hd-nm{font-size:12px;font-weight:800;color:var(--txt);letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.kb-hd-nm::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--txt3)}
.kb-col.recv .kb-hd-nm::before{background:var(--dan)}
.kb-col.proc .kb-hd-nm::before{background:var(--gold)}
.kb-col.done .kb-hd-nm::before{background:var(--suc)}
.kb-cnt{font-size:11px;font-weight:700;color:var(--txt2);background:#FFFFFF;padding:3px 8px;border-radius:var(--r-full);border:1px solid var(--bdr-soft)}
.kb-card{background:#FFFFFF;border:1px solid var(--bdr-soft);border-radius:var(--r-sm);padding:var(--sp-3);margin-bottom:var(--sp-2);box-shadow:var(--sh-xs);transition:all .25s var(--ease-ui);cursor:pointer}
.kb-card:hover{box-shadow:var(--sh);transform:translateY(-1px);border-color:var(--bdr)}
.kb-card-cli{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:4px}
.kb-card-prod{font-size:12px;color:var(--txt2);margin-bottom:var(--sp-2)}
.kb-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt3);font-weight:500}
.kb-card-reason{font-size:11px;color:var(--txt2);margin-top:6px;padding-top:6px;border-top:1px solid var(--bdr-soft);line-height:1.5}
.kb-empty{font-size:12px;color:var(--txt3);text-align:center;padding:24px 8px;font-style:italic}

/* ===== Lot Timeline (이력조회) ===== */
.lot-tl{position:relative;padding-left:32px}
.lot-tl::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--pri) 0%,var(--bdr) 100%);border-radius:2px}
.lot-step{position:relative;padding:0 0 18px 0}
.lot-step::before{content:'';position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:3px solid var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
.lot-step.done::before{background:var(--pri);box-shadow:0 0 0 3px var(--pri-l),inset 0 0 0 2px #FFFFFF}
.lot-step.warn::before{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-l)}
.lot-step.danger::before{border-color:var(--dan);box-shadow:0 0 0 3px var(--dan-l)}
.lot-step-hd{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;font-weight:700;color:var(--txt);margin-bottom:4px}
.lot-step-date{font-size:11px;color:var(--txt3);font-weight:500}
.lot-step-body{font-size:12px;color:var(--txt2);line-height:1.6;background:var(--bg2);border-radius:var(--r-sm);padding:10px 12px;border:1px solid var(--bdr-soft)}
.lot-step-body strong{color:var(--txt)}

/* ERP 정리: 거래처별 미수금 현황(.recv-*) 스타일 제거 */

/* ===== UTILITY CLASSES (인라인 스타일 통합) ===== */
.u-sb-item{display:flex;align-items:center;gap:4px;margin-bottom:2px;cursor:pointer}
.u-mt10{margin-top:10px}
.u-mt14{margin-top:14px}
.u-mb6{margin-bottom:6px}
.u-mb8{margin-bottom:var(--sp-2)}
.u-mb12{margin-bottom:var(--sp-3)}
.u-mb16{margin-bottom:var(--sp-4)}
.u-fs11{font-size:11px}
.u-scroll-x{overflow-x:auto}
.u-flex-gap6{display:flex;gap:6px}
.u-input-sm{padding:5px 8px;font-size:12px}
.u-input-md{padding:6px 8px;font-size:12px}
.u-input-md13{padding:6px 8px;font-size:13px}
.u-pad12{padding:var(--sp-3)}
.u-input-pill{padding:5px 10px;font-size:12px}
.u-fw700-13{font-weight:700;font-size:13px}
.u-fw700-15{font-weight:700;font-size:15px}
.u-bg2-bold{background:var(--bg2);font-weight:700}
.u-tab-btn{background:none;padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--txt2);font-size:13px;font-weight:600;transition:all var(--dur-base)}
.u-tab-btn:hover{background:var(--bg2);color:var(--txt)}
.u-select{padding:6px 10px;border:1px solid var(--bdr);border-radius:8px;font-size:13px}
.u-select-sm{padding:6px 10px;border:1px solid var(--bdr);border-radius:8px;font-size:12px}
.u-input-bdr{padding:6px 8px;font-size:12px;border:1px solid var(--bdr);border-radius:4px}
.u-input-bdr6{padding:5px 8px;border:1px solid var(--bdr);border-radius:6px;font-size:12px}
.u-flex-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
.u-flex-between10{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pager{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:12px 0}
.pager-info{font-size:13px;color:var(--txt2);font-weight:600}


/* ==========================================
   UX 강화 — 상단바 / 전역검색 / 알림 / 사용자메뉴
   ========================================== */

/* 상단바 */
.ux-topbar{
  height:48px;
  background:#FFFFFF;
  border-bottom:1px solid var(--bdr);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:50;
}

/* 브레드크럼 */
.ux-bc{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--txt2)}
.uxbc-home{cursor:pointer;font-weight:600;color:var(--pri);padding:4px 8px;border-radius:6px;transition:background var(--dur-base)}
.uxbc-home:hover{background:var(--pri-l)}
.uxbc-sep{color:var(--txt3)}
.uxbc-group{color:var(--txt2)}
.uxbc-current{color:var(--txt);font-weight:700}

/* 상단바 우측 버튼 */
.ux-topbar-right{display:flex;align-items:center;gap:var(--sp-2)}
.ux-tb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  cursor:pointer;font-size:var(--fs-sm);color:var(--txt);
  transition:background var(--dur-base);position:relative;
}
.ux-tb-btn:hover{background:var(--bg3);border-color:var(--bdr)}
.ux-kbd{
  padding:2px 6px;border:1px solid var(--bdr);border-radius:4px;
  font-size:10px;color:var(--txt3);font-family:monospace;background:#F9FAFB;
}
.ux-tb-badge{
  background:#DC2626;color:#fff;font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;position:absolute;top:2px;right:2px;
}
.ux-user-avatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--pri);color:#fff;font-weight:700;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* 전역 검색 오버레이 */
.ux-gs-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9999;
  display:flex;align-items:flex-start;justify-content:center;padding-top:100px;
  backdrop-filter:blur(6px);
}
.ux-gs-overlay.hidden{display:none}
.ux-gs-box{
  width:min(640px, 90vw);max-height:70vh;
  background:#fff;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:flex;flex-direction:column;overflow:hidden;
}
.ux-gs-input-wrap{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--bdr);
}
.ux-gs-input-wrap input{
  flex:1;border:none;outline:none;font-size:16px;min-height:auto;
}
.ux-gs-input-wrap .ux-kbd{cursor:pointer}
.ux-gs-results{flex:1;overflow-y:auto;padding:var(--sp-2)}
.uxgs-section-hdr{
  padding:8px 12px 4px;font-size:11px;font-weight:700;
  color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;
}
.uxgs-section{}
.uxgs-item{
  display:flex;align-items:center;gap:var(--sp-3);padding:10px 12px;border-radius:8px;
  cursor:pointer;transition:background var(--dur-fast);
}
.uxgs-item:hover, .uxgs-item.selected{background:var(--pri-l)}
.uxgs-ico{font-size:18px;width:32px;text-align:center}
.uxgs-body{flex:1;min-width:0}
.uxgs-ttl{font-size:14px;font-weight:600;color:var(--txt)}
.uxgs-sub{font-size:12px;color:var(--txt3);margin-top:2px}
.uxgs-kbd{font-size:12px;color:var(--txt3)}
.ux-gs-footer{
  padding:10px 18px;border-top:1px solid var(--bdr);
  font-size:11px;color:var(--txt3);background:#F9FAFB;
}

/* 알림 패널 */
.ux-notif-panel{
  position:fixed;top:70px;right:20px;width:360px;max-height:70vh;
  background:#fff;border:1px solid var(--bdr);border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:100;
  display:flex;flex-direction:column;overflow:hidden;
}
.ux-notif-panel.hidden{display:none}
.ux-notif-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--bdr);
}
.ux-notif-list{flex:1;overflow-y:auto;max-height:480px}
.uxnt-item{
  display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bdr);
  cursor:pointer;transition:background var(--dur-fast);
}
.uxnt-item:hover{background:var(--bg3)}
.uxnt-danger{border-left:3px solid #DC2626}
.uxnt-warn{border-left:3px solid #F59E0B}
.uxnt-ico{font-size:18px;flex-shrink:0}
.uxnt-body{flex:1;min-width:0}
.uxnt-ttl{font-size:13px;font-weight:700;color:var(--txt);line-height:1.3;margin-bottom:2px}
.uxnt-sub{font-size:12px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 사용자 메뉴 드롭다운 */
.ux-user-menu{
  position:fixed;top:70px;right:20px;width:240px;
  background:#fff;border:1px solid var(--bdr);border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:100;overflow:hidden;
}
.ux-user-menu.hidden{display:none}
.ux-um-hdr{
  display:flex;gap:10px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--bdr);background:#F9FAFB;
}
.ux-um-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--pri);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;flex-shrink:0;
}
.ux-um-item{
  padding:10px 16px;cursor:pointer;font-size:13px;color:var(--txt);
  display:flex;align-items:center;gap:var(--sp-2);transition:background var(--dur-fast);
}
.ux-um-item:hover{background:var(--bg3)}
.ux-um-divider{height:1px;background:var(--bdr);margin:4px 0}

/* 검색 결과 하이라이트 */
mark{background:#FEF3C7;color:#92400E;padding:0 2px;border-radius:2px}

@media (max-width: 1100px){
  .wo-form-grid{grid-template-columns:1fr;height:auto}
  .wo-form-col{padding-right:0}
  .wo-section-card-process{min-height:auto}
}

/* 반응형 */
@media (max-width: 768px){
  .wo-modal{
    width:100vw!important;max-width:100vw!important;height:100vh;max-height:100vh!important;
    border-radius:0;border:none
  }
  .wo-modal-head{padding:18px 16px 16px;flex-direction:column;align-items:stretch}
  .wo-modal-title{font-size:20px}
  .wo-modal-actions{justify-content:flex-start}
  .wo-modal-body{padding:var(--sp-3)}
  .wo-section-card{padding:14px;border-radius:var(--r-lg)}
  .wo-inline-grid-2,.wo-inline-grid-3,.wo-inline-grid-4,.wo-inline-grid-cli-prod,.wo-search-row{grid-template-columns:1fr}
  .wo-inline-actions{flex-wrap:wrap}
  .wo-mat-row{grid-template-columns:1fr 1fr;gap:5px}
  .wo-mat-row > .wo-mat-cell-num{grid-column:auto}
  .wo-mat-rm{grid-column:1/-1;width:100%}
  .wo-mat-row-aux{grid-template-columns:1fr 1fr}
  .wo-chip-bar{gap:6px}
  .wo-modal .pb{flex:1 1 calc(50% - 6px);justify-content:center}
  .flow-note{align-items:flex-start}
  .ux-topbar{padding:0 12px}
  .ux-tb-btn span:not(.ux-kbd):not(.ux-tb-badge):not(.ux-user-avatar){display:none}
  .uxbc-group{display:none}
}

/* ============================================
   기초정보 화면 헤더 버튼 줄바꿈 보강
   - 거래처/품목/목형 등 버튼이 많은 페이지에서 너비 초과 방지
   - .fbar-row의 min-width:max-content + nowrap을 override
   ============================================ */
#t-cli .fbar-row,
#t-prod .fbar-row,
#t-mold .fbar-row,
#pg-mes-cli .fbar-row,
#pg-mes-prod .fbar-row,
#pg-mes-mold .fbar-row,
.module-page .fbar-row {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  row-gap: 8px;
}
.fbar { overflow: visible !important; }
.module-page .fbar-grow { min-width: 200px; }

/* 화면 우측 잘림 방지 — 모듈 페이지 컨테이너 가로 패딩 미세 보정 */
.module-page {
  max-width: 100%;
  box-sizing: border-box;
}
.module-page > .app, .module-page > .card { max-width: 100%; }

/* ============================================
   기초정보 테이블 가로 스크롤 제거
   - .u-scroll-x table{min-width:900px}이 가로 스크롤 강제 → 화면 폭에 맞게 자동조정
   - 컬럼 일부 ellipsis로 잘리지 않게
   ============================================ */
#cliTbl, #prodTbl, #moldTbl {
  min-width: 0 !important;
  width: 100%;
  table-layout: auto;
}
.u-scroll-x:has(#cliTbl),
.u-scroll-x:has(#prodTbl),
.u-scroll-x:has(#moldTbl) {
  overflow-x: auto;  /* 그래도 모바일 등 좁은 화면에서 스크롤 허용 */
}
#cliTbl td:not(:first-child):not(:last-child),
#prodTbl td:not(:first-child):not(:last-child),
#moldTbl td:not(:first-child):not(:last-child) {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 관리 컬럼은 버튼이 있으니 줄바꿈 방지 + 폭 자동 */
#cliTbl td:last-child, #prodTbl td:last-child, #moldTbl td:last-child {
  white-space: nowrap;
}

/* ============================================
   거래처/품목/목형 리스트 — 컴팩트 + 정보 밀도 향상
   ============================================ */
table.dt.dt-dense th {
  padding: 8px 10px !important;
  font-size: 12px !important;
  letter-spacing: 0;
  text-transform: none;
}
table.dt.dt-dense td {
  padding: 6px 10px !important;
  font-size: 13px;
  vertical-align: top;
  line-height: 1.35;
}
table.dt.dt-dense .dt-sub {
  display: block;
  font-size: 11px;
  color: var(--txt2);
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
table.dt.dt-dense .dt-sub.muted { color: var(--txt3); }
table.dt.dt-dense .dt-meta {
  display: inline-block;
  font-size: 10px;
  color: var(--txt3);
  font-weight: 500;
  background: var(--bg2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
table.dt.dt-dense tbody tr { transition: background var(--dur-fast); }
table.dt.dt-dense tbody tr:hover { background: var(--bg2); }
table.dt.dt-dense .btn.btn-sm {
  padding: 3px 8px;
  font-size: 11px;
}

/* 사이드바 빈 섹션 자동 숨김 (헤더만 차지하지 않게) */
.sb-section.is-empty { display: none !important; }

/* 모바일 데이터 로드 토스트 위치 — 본문 가리지 않게 하단으로 */
@media (max-width: 768px){
  body > .toast, body > #toast, body > .m-toast {
    bottom: 92px !important;
    top: auto !important;
  }
}

/* ============================================
   알림 배지가 텍스트와 겹치는 문제 — padding 확보
   ============================================ */
.tm-right-btn.has-noti {
  padding-right: 22px !important;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}
.tm-right-btn.has-noti .tm-noti-dot {
  top: 8px;
  right: 7px;
}

/* === inline-style extraction (HTML round) === */
/* 반복 빈도 3회 이상의 인라인 style을 클래스로 추출 (static/index.html, static/design-preview.html, static/m.html) */
/* margin utility */
.u-m-0 { margin: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-32 { margin-top: 32px; }
/* padding utility */
.u-p-16 { padding: 16px; }
.u-p-12-14 { padding: 12px 14px; }
.u-p-10-16 { padding: 10px 16px; }
.u-p-3-8 { padding: 3px 8px; }
.u-p-10-12 { padding: 10px 12px; }
.u-p-8-center { text-align: center; padding: 8px; }
/* width utility (정적 값) */
.u-w-100p { width: 100%; }
.u-w-36 { width: 36px; }
.u-w-80 { width: 80px; }
.u-w-90 { width: 90px; }
.u-w-100 { width: 100px; }
.u-w-110 { width: 110px; }
.u-w-130 { width: 130px; }
.u-w-140 { width: 140px; }
.u-w-480 { width: 480px; }
.u-w-550 { width: 550px; }
.u-w-600 { width: 600px; }
.u-mw-480 { max-width: 480px; }
.u-mw-500 { max-width: 500px; }
.u-mw-600 { max-width: 600px; }
.u-minw-70 { min-width: 70px; }
.u-minw-180 { min-width: 180px; }
/* text-align */
.u-ta-r { text-align: right; }
.u-ta-c { text-align: center; }
.u-ta-r-mt-12 { text-align: right; margin-top: 12px; }
.u-ta-c-mt-10 { text-align: center; margin-top: 10px; }
.u-ta-c-mt-20 { text-align: center; margin-top: 20px; }
/* font-size */
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-14 { font-size: 14px; }
.u-fs-16 { font-size: 16px; }
.u-fs-24 { font-size: 24px; }
/* color */
.u-c-txt2 { color: var(--txt2); }
.u-c-txt3 { color: var(--txt3); }
.u-c-suc { color: var(--suc); }
.u-c-dan { color: var(--dan); }
.u-c-mtxt3 { color: var(--m-text3); }
.u-c-mred { color: var(--m-red); }
.u-cursor-pointer { cursor: pointer; }
/* 복합 input/badge 패턴 */
.u-input-sm { padding: 6px 8px; font-size: 12px; border: 1px solid var(--bdr); border-radius: 4px; }
.u-input-sm2 { padding: 6px 10px; border: 1px solid var(--bdr); border-radius: 8px; font-size: 12px; }
.u-input-sm3 { padding: 5px 8px; border: 1px solid var(--bdr); border-radius: 6px; font-size: 12px; }
.u-input-w100 { width: 100%; padding: 8px; border: 1px solid var(--bdr); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.u-input-w100-13 { padding: 10px; border: 1px solid var(--bdr); border-radius: 8px; font-size: 13px; width: 100%; }
.u-input-min26 { padding: 5px 8px; font-size: 12px; min-height: 26px; }
.u-input-10-14 { padding: 10px; font-size: 14px; }
.u-badge-xs { font-size: 9px; padding: 1px 6px; }
.u-badge-11 { font-size: 11px; padding: 3px 8px; }
.u-btn-12 { font-size: 12px; padding: 6px 12px; }
/* label / hint */
.u-label-13 { font-size: 13px; font-weight: 400; color: var(--txt2); }
.u-label-13-700 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.u-label-13-700-block { font-size: 13px; font-weight: 700; display: block; margin-bottom: 4px; }
.u-hint-mb-12 { font-size: 11px; color: var(--txt2); margin-bottom: 12px; }
.u-hint-mb-12-tight { font-size: 11px; color: var(--txt2); margin-bottom: 12px; }
.u-hint-m-12-8 { font-size: 11px; color: var(--txt2); margin: 12px 0 8px; }
/* flex / grid 레이아웃 패턴 */
.u-row-gap-7 { flex-direction: row; align-items: center; gap: 7px; }
.u-flex-end-mb-10 { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.u-flex-wrap-gap-6 { display: flex; flex-wrap: wrap; gap: 6px; }
.u-flex-center-gap-5 { font-size: 13px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.u-grid-2-gap8 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.u-grid-2-gap8-mt8 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.u-grid-2-gap8-mt20 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.u-grid-2-gap10-mb12 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.u-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* === inline-style extraction (JS: mes-ship) === */
/* mes-ship.js 템플릿 literal 내 정적 인라인 style 추출 (JS 1차) */
.u-ship-001 { font-weight: 700; }
.u-ship-002 { width: 100%; text-align: left; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.u-ship-003 { flex: 1; }
.u-ship-004 { text-align: right; font-weight: 600; }
.u-ship-005 { color: #1E3A5F; }
.u-ship-006 { display: flex; align-items: center; gap: 3px; }
.u-ship-007 { overflow-x: auto; }
.u-ship-008 { color: #10B981; }
.u-ship-009 { color: #EF4444; }
.u-ship-010 { color: var(--pri); }
.u-ship-011 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.u-ship-012 { font-weight: 600; }
.u-ship-013 { padding: 20px; text-align: center; color: var(--txt3); }
.u-ship-014 { padding: 8px 10px; border-top: 1px solid #F1F5F9; text-align: right; }
.u-ship-015 { padding: 8px 10px; text-align: right; }
.u-ship-016 { background: var(--bg2); padding: 8px; }
.u-ship-017 { border-top: 1px solid #333; width: 120px; padding-top: 5px; }
.u-ship-018 { color: #059669; }
.u-ship-019 { color: #94A3B8; }
.u-ship-020 { color: #94A3B8; margin-bottom: 2px; }
.u-ship-021 { display: flex; gap: 8px; flex-wrap: wrap; }
.u-ship-022 { display: grid; grid-template-columns: 1fr 1fr; min-height: 60px; }
.u-ship-023 { font-size: 10px; }
.u-ship-024 { font-size: 11px; color: #166534; font-weight: 700; }
.u-ship-025 { font-size: 11px; color: #1D4ED8; font-weight: 700; }
.u-ship-026 { font-size: 11px; color: #475569; font-weight: 700; }
.u-ship-027 { font-size: 11px; color: #64748B; margin-top: 2px; }
.u-ship-028 { font-size: 11px; color: #6B7280; }
.u-ship-029 { font-size: 12px; font-weight: 400; }
.u-ship-030 { font-size: 12px; font-weight: 700; color: var(--txt3); margin-bottom: 6px; }
.u-ship-031 { font-size: 13px; color: #64748B; }
.u-ship-032 { font-size: 16px; font-weight: 800; color: #0F172A; }
.u-ship-033 { font-size: 16px; font-weight: 800; color: #166534; }
.u-ship-034 { font-size: 16px; font-weight: 800; color: #1E3A8A; }
.u-ship-035 { font-size: 18px; font-weight: 800; }
.u-ship-036 { font-weight: 600; font-size: 13px; }
.u-ship-037 { font-weight: 700; font-size: 11px; }
.u-ship-038 { font-weight: 700; font-size: 15px; }
.u-ship-039 { margin-top: 4px; color: var(--txt3); font-size: 11px; }
.u-ship-040 { padding: 12px; background: #DCFCE7; border-radius: 10px; }
.u-ship-041 { padding: 12px; background: #EFF6FF; border-radius: 10px; }
.u-ship-042 { padding: 12px; background: #F8FAFC; border-radius: 10px; }
.u-ship-043 { padding: 8px 10px; border-top: 1px solid #F1F5F9; }
.u-ship-044 { padding: 8px 10px; text-align: left; }
.u-ship-045 { width: 100%; text-align: left; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: #DC2626; }
.u-ship-046 { width: 80px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--bdr); border-radius: 4px; }
.u-ship-047 { background: #1E3A5F; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.u-ship-048 { background: #1E3A5F; padding: 16px 20px; }
.u-ship-049 { background: #DBEAFE; color: #1D4ED8; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.u-ship-050 { background: #DCE8F5; color: #1D4ED8; padding: 1px 6px; border-radius: 999px; }
.u-ship-051 { background: #DCFCE7; color: #166534; padding: 1px 6px; border-radius: 999px; }
.u-ship-052 { background: #EDE9FE; color: #6D28D9; padding: 1px 6px; border-radius: 999px; }
.u-ship-053 { background: #EDE9FE; color: #6D28D9; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.u-ship-054 { background: #F1F3F7; }
.u-ship-055 { background: #F1F5F9; color: #94A3B8; padding: 1px 6px; border-radius: 999px; }
.u-ship-056 { background: #F8FAFC; }
.u-ship-057 { background: #fff; border-radius: 14px; width: 480px; box-shadow: 0 25px 50px rgba(0,0,0,.15); }
.u-ship-058 { background: #fff; border-radius: 16px; width: 380px; box-shadow: 0 25px 60px rgba(0,0,0,.2); overflow: hidden; }
.u-ship-059 { background: none; border: none; font-size: 20px; cursor: pointer; color: #94A3B8; }
.u-ship-060 { background: var(--bg2); font-weight: 700; }
.u-ship-061 { border-top: 1px solid var(--bdr); margin: 14px 0; padding-top: 10px; }
.u-ship-062 { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.u-ship-063 { border: 1px solid var(--bdr); border-radius: 12px; padding: 12px; background: #F8FAFC; margin-top: 12px; }
.u-ship-064 { border: none; background: transparent; font-size: 20px; cursor: pointer; color: #64748B; }
.u-ship-065 { color: #1E293B; }
.u-ship-066 { color: #1E3A5F; font-weight: 600; }
.u-ship-067 { color: #475569; }
.u-ship-068 { color: #7C3AED; }
.u-ship-069 { color: #94A3B8; font-size: 11px; margin-left: 4px; }
.u-ship-070 { color: #CBD5E1; }
.u-ship-071 { color: #EF4444; font-weight: 700; margin-left: 4px; }
.u-ship-072 { color: #F59E0B; }
.u-ship-073 { color: #F59E0B; font-weight: 700; margin-left: 4px; }
.u-ship-074 { color: red; }
.u-ship-075 { color: var(--dan); font-weight: 700; font-size: 18px; }
.u-ship-076 { color: var(--suc); font-weight: 700; font-size: 18px; }
.u-ship-077 { color: var(--txt); }
.u-ship-078 { color: var(--txt3); font-size: 13px; padding: 10px 0; }
.u-ship-079 { display: block; min-width: 400px; }
.u-ship-080 { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 3px 0; border-radius: 10px; border: 1px solid var(--bdr); cursor: pointer; background: var(--bg); transition: background .1s; }
.u-ship-081 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; }
.u-ship-082 { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 3px 0; border-radius: 6px; background: #F0FDF4; border-left: 3px solid #22C55E; font-size: 12px; color: #6B7280; }
.u-ship-083 { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 8px; background: #FFF7ED; border-left: 3px solid #F59E0B; }
.u-ship-084 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.u-ship-085 { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.u-ship-086 { display: flex; flex-direction: column; gap: 5px; }
.u-ship-087 { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #F1F5F9; cursor: pointer; align-items: center; transition: background .1s; }
.u-ship-088 { display: flex; gap: 12px; padding: 8px 14px; background: #EFF6FF; border-radius: 8px; border-left: 4px solid #1E3A5F; font-size: 13px; }
.u-ship-089 { display: flex; gap: 3px; }
.u-ship-090 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.u-ship-091 { display: flex; gap: 8px; }
.u-ship-092 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.u-ship-093 { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; color: #94A3B8; }
.u-ship-094 { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: #F1F5F9; }
.u-ship-095 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.u-ship-096 { display: flex; justify-content: space-between; font-size: 10px; border-bottom: 1px solid #999; padding-bottom: 5px; margin-bottom: 8px; }
.u-ship-097 { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 60px; }
.u-ship-098 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.u-ship-099 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; font-size: 12px; }
.u-ship-100 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.u-ship-101 { display: inline-block; width: 10px; height: 10px; background: #1E3A5F; border-radius: 2px; }
.u-ship-102 { display: inline-block; width: 10px; height: 10px; background: #7EB8E0; border-radius: 2px; }
.u-ship-103 { display: inline-block; width: 10px; height: 10px; background: #E2E8F0; border-radius: 2px; }
.u-ship-104 { flex-shrink: 0; }
.u-ship-105 { flex: 1; min-width: 0; }
.u-ship-106 { flex: 1; padding: 10px; background: #1E3A5F; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.u-ship-107 { flex: 1; padding: 10px; background: #F1F5F9; color: #64748B; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
.u-ship-108 { font-size: 10px; color: #9CA3AF; padding: 3px 6px; }
.u-ship-109 { font-size: 10px; color: var(--txt3); }
.u-ship-110 { font-size: 10px; font-weight: 400; color: #9CA3AF; }
.u-ship-111 { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #DCE8F5; color: #1D4ED8; font-weight: 700; }
.u-ship-112 { font-size: 10px; padding: 2px 6px; background: #E8913A; color: #fff; border: none; white-space: nowrap; }
.u-ship-113 { font-size: 10px; padding: 3px 8px; }
.u-ship-114 { font-size: 11px; background: #E8913A; color: #fff; border: none; }
.u-ship-115 { font-size: 11px; color: #64748B; }
.u-ship-116 { font-size: 11px; color: #92400E; font-weight: 700; }
.u-ship-117 { font-size: 11px; color: #94A3B8; margin-bottom: 5px; }
.u-ship-118 { font-size: 11px; color: #991B1B; font-weight: 700; }
.u-ship-119 { font-size: 11px; color: var(--pri); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 4px; }
.u-ship-120 { font-size: 11px; color: var(--txt2); }
.u-ship-121 { font-size: 11px; color: var(--txt3); font-weight: 600; }
.u-ship-122 { font-size: 11px; color: var(--txt3); margin-left: auto; }
.u-ship-123 { font-size: 11px; color: var(--txt3); margin-top: 6px; }
.u-ship-124 { font-size: 11px; font-weight: 800; color: var(--bdr2); min-width: 16px; text-align: center; }
.u-ship-125 { font-size: 12px; color: #B0C9E0; margin-top: 2px; }
.u-ship-126 { font-size: 12px; color: var(--txt2); margin-bottom: 12px; }
.u-ship-127 { font-size: 12px; font-weight: 400; color: #94A3B8; }
.u-ship-128 { font-size: 12px; font-weight: 700; color: #16A34A; padding: 6px 0; border-bottom: 2px solid #22C55E; }
.u-ship-129 { font-size: 12px; font-weight: 700; color: #1E3A5F; padding: 6px 0; border-bottom: 2px solid #1E3A5F; }
.u-ship-130 { font-size: 12px; font-weight: 700; color: #EA580C; padding: 6px 0; border-bottom: 2px solid #F59E0B; display: flex; justify-content: space-between; flex-shrink: 0; }
.u-ship-131 { font-size: 12px; font-weight: 700; color: var(--dan); margin-bottom: 6px; }
.u-ship-132 { font-size: 12px; font-weight: 800; color: #475569; margin-bottom: 8px; }
.u-ship-133 { font-size: 12px; padding: 5px 10px; background: #EDE9FE; border-radius: 8px; margin-bottom: 4px; }
.u-ship-134 { font-size: 12px; padding: 5px 10px; background: #FEF2F2; border-radius: 8px; margin-bottom: 4px; color: #DC2626; }
.u-ship-135 { font-size: 12px; padding: 5px 10px; background: var(--bg2); border-radius: 8px; margin-bottom: 4px; }
.u-ship-136 { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-ship-137 { font-size: 14px; color: #1E293B; margin-bottom: 16px; }
.u-ship-138 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.u-ship-139 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #1E293B; }
.u-ship-140 { font-size: 14px; font-weight: 800; color: #D1D5DB; min-width: 22px; text-align: center; }
.u-ship-141 { font-size: 15px; font-weight: 700; color: #fff; }
.u-ship-142 { font-size: 16px; font-weight: 800; color: #92400E; }
.u-ship-143 { font-size: 16px; font-weight: 800; color: #B91C1C; }
.u-ship-144 { font-weight: 400; color: #94A3B8; margin-left: 8px; }
.u-ship-145 { font-weight: 600; color: #7C3AED; }
.u-ship-146 { font-weight: 600; font-size: 12px; }
.u-ship-147 { font-weight: 700; color: #1E293B; }
.u-ship-148 { font-weight: 700; color: var(--pri); white-space: nowrap; }
.u-ship-149 { font-weight: 700; font-size: 12px; }
.u-ship-150 { font-weight: 700; font-size: 13px; color: #0F172A; }
.u-ship-151 { font-weight: 700; font-size: 18px; }
.u-ship-152 { font-weight: 800; color: var(--pri); font-size: 15px; }
.u-ship-153 { font-weight: 800; font-size: 15px; color: #0F172A; }
.u-ship-154 { font-weight: 800; font-size: 18px; color: var(--txt); }
.u-ship-155 { grid-column: 1/-1; display: flex; justify-content: center; }
.u-ship-156 { margin-bottom: 10px; color: var(--txt3); font-size: 13px; }
.u-ship-157 { margin-bottom: 12px; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.u-ship-158 { margin-left: 8px; }
.u-ship-159 { margin-left: auto; display: flex; gap: 6px; }
.u-ship-160 { margin-top: 10px; margin-bottom: 18px; padding: 14px 16px; background: var(--pri-l); border-radius: var(--r-sm); border-left: 3px solid var(--pri); }
.u-ship-161 { margin-top: 2px; }
.u-ship-162 { margin-top: 30px; display: flex; justify-content: space-around; font-size: 11px; }
.u-ship-163 { margin-top: 6px; color: var(--txt3); font-size: 11px; }
.u-ship-164 { margin-top: 6px; width: 100%; font-size: 11px; padding: 5px; background: transparent; color: #64748B; border: 1px dashed #CBD5E1; border-radius: 6px; }
.u-ship-165 { margin-top: 8px; font-size: 11px; color: #94A3B8; display: flex; gap: 12px; }
.u-ship-166 { overflow-y: auto; flex: 1; }
.u-ship-167 { overflow-y: auto; padding: 10px 14px; }
.u-ship-168 { padding: 10px 16px; border-top: 1px solid var(--bdr); display: flex; gap: 8px; align-items: center; }
.u-ship-169 { padding: 12px; background: #FEF2F2; border-radius: 10px; }
.u-ship-170 { padding: 12px; background: #FEF3C7; border-radius: 10px; }
.u-ship-171 { padding: 12px; overflow-y: auto; flex: 1; }
.u-ship-172 { padding: 12px; text-align: center; color: #9CA3AF; font-size: 12px; }
.u-ship-173 { padding: 14px 18px; border-bottom: 1px solid #F1F5F9; display: flex; justify-content: space-between; align-items: center; }
.u-ship-174 { padding: 14px 18px; border-bottom: 1px solid var(--bdr); display: flex; justify-content: space-between; align-items: center; }
.u-ship-175 { padding: 14px 18px; overflow-y: auto; flex: 1; }
.u-ship-176 { padding: 14px; text-align: center; color: #94A3B8; }
.u-ship-177 { padding: 20px; }
.u-ship-178 { padding: 20px; text-align: center; color: #9CA3AF; font-size: 12px; }
.u-ship-179 { padding: 3px 0; }
.u-ship-180 { padding: 4px 0; }
.u-ship-181 { padding: 4px 0; max-height: 50vh; overflow-y: auto; }
.u-ship-182 { padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.u-ship-183 { padding: 8px 10px; background: #F8FAFC; border-radius: 8px; margin-bottom: 6px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.u-ship-184 { padding: 8px 16px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; display: flex; gap: 16px; }
.u-ship-185 { text-align: center; font-size: 18px; letter-spacing: 8px; margin-bottom: 12px; font-weight: 800; }
.u-ship-186 { text-align: center; margin-bottom: 12px; font-size: 16px; }
.u-ship-187 { text-align: center; padding: 20px; color: #94A3B8; }
.u-ship-188 { text-align: center; padding: 30px; color: var(--txt3); }
.u-ship-189 { text-align: right; color: var(--txt3); }
.u-ship-190 { text-align: right; flex-shrink: 0; }
.u-ship-191 { text-align: right; font-weight: 600; color: #1E3A5F; }
.u-ship-192 { text-align: right; font-weight: 700; }
.u-ship-193 { white-space: nowrap; }
.u-ship-194 { width: 100%; font-size: 12px; border-collapse: collapse; }
.u-ship-195 { width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid var(--bdr); border-radius: 4px; }
.u-ship-196 { width: 16px; height: 16px; cursor: pointer; }
.u-ship-197 { width: 50%; }
.u-ship-198 { width: 500px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.u-ship-199 { width: 600px; max-height: 80vh; display: flex; flex-direction: column; }
.u-ship-200 { width: 70px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--bdr); border-radius: 4px; text-align: right; }
.u-ship-201 { width: 780px; max-height: 85vh; display: flex; flex-direction: column; }
.u-ship-202 { width: 80px; padding: 4px 6px; font-size: 12px; border: 1px solid var(--bdr); border-radius: 4px; text-align: right; }

/* === mes-ship dynamic (CSP cleanup: dynamic inline styles → class + CSS var) === */
/* shipStat defect cell (line 109) */
.u-ship-dyn-def-hi { color: #DC2626; font-weight: 700; text-align: right; }
.u-ship-dyn-def-lo { color: #94A3B8; font-weight: 400; text-align: right; }
/* perf-stat-v 불량률 (line 463) */
.u-ship-dyn-defrate-hi { color: #EF4444; }
.u-ship-dyn-defrate-lo { color: #10B981; }
/* perf-bar-label / perf-bar-fill 가동률 (line 466,467) */
.u-ship-dyn-util-hi { color: #10B981; }
.u-ship-dyn-util-mid { color: #F59E0B; }
.u-ship-dyn-util-lo { color: #EF4444; }
.u-ship-dyn-util-hi-bg { background: #10B981; }
.u-ship-dyn-util-mid-bg { background: #F59E0B; }
.u-ship-dyn-util-lo-bg { background: #EF4444; }
/* generic dynamic CSS-var (set by _applyShipDyn) */
.u-ship-dyn-bg { background: var(--bg); }
.u-ship-dyn-c { color: var(--c); }
.u-ship-dyn-bdr { border-left-color: var(--bdrc); }
.u-ship-dyn-w { width: var(--w); }
/* dday tri-state colors */
.u-ship-dd-dan { color: var(--dan); }
.u-ship-dd-exc { color: var(--exc); }
.u-ship-dd-txt2 { color: var(--txt2); }
/* planFilterPop dday (line 696) */
.u-ship-dd-mini { font-size: 10px; margin-top: 3px; font-weight: 700; }
/* proc queue row (line 730) */
.u-ship-pq-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 8px; border-left: 3px solid transparent; }
.u-ship-pq-row-ext { background: #FFF7ED; border-left-color: #E8913A; }
.u-ship-pq-row-int { background: #EFF6FF; border-left-color: #1E3A5F; }
/* proc queue 화살표 (line 754,755) */
.u-ship-wq-arrow { border: none; background: #DCE8F5; color: #1E3A5F; font-size: 10px; line-height: 1; padding: 3px 4px; border-radius: 3px; cursor: pointer; }
.u-ship-wq-arrow.is-disabled { background: #E5E7EB; color: #D1D5DB; cursor: default; }
/* proc queue dday (line 760) */
.u-ship-wq-dd { font-size: 11px; font-weight: 600; }
.u-ship-wq-dd-hi { color: #DC2626; }
.u-ship-wq-dd-mid { color: #EA580C; }
.u-ship-wq-dd-lo { color: #6B7280; }
/* order group header (line 1334) */
.u-ship-grp-hd { background: #F8FAFC; border-top: 2px solid #E2E8F0; }
.u-ship-grp-hd-today { background: #EFF6FF; border-top: 2px solid #E2E8F0; }
.u-ship-grp-hd-td { padding: 7px 12px; font-size: 12px; font-weight: 700; color: #374151; }
.u-ship-grp-hd-today .u-ship-grp-hd-td { color: #1D4ED8; }
/* stbar segment (line 1894) */
.u-ship-stbar-seg { height: 100%; }
/* order month card (line 1896) */
.u-ship-omc, .u-ship-omc-sel { border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all .15s; }
.u-ship-omc { border: 1px solid #E2E8F0; background: #fff; }
.u-ship-omc-sel { border: 2px solid #1E3A5F; background: #EFF6FF; }
.u-ship-omc .u-ship-omc-yr { font-size: 13px; font-weight: 700; color: #1E293B; }
.u-ship-omc-sel .u-ship-omc-yr { font-size: 13px; font-weight: 700; color: #1D4ED8; }
.u-ship-omc .u-ship-omc-cnt { font-size: 12px; font-weight: 600; color: #64748B; }
.u-ship-omc-sel .u-ship-omc-cnt { font-size: 12px; font-weight: 600; color: #1E3A5F; }
.u-ship-omc .u-ship-omc-amt { font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.u-ship-omc-sel .u-ship-omc-amt { font-size: 14px; font-weight: 700; color: #1E3A5F; margin-bottom: 4px; }
/* legend dot (line 1931) */
.u-ship-legdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
/* modal title (line 649) */
.u-ship-dyn-modal-title { font-size: 16px; font-weight: 800; }
/* lot detail defect cell (line 2124) */
.u-ship-def-cell { text-align: right; color: var(--dan); font-weight: 400; }
.u-ship-def-cell.is-hi { font-weight: 700; }
/* ship history defect cell (line 2163) */
.u-ship-deflog { color: var(--dan); font-weight: 400; }
.u-ship-deflog.is-hi { font-weight: 700; }

/* === HTML round 2 (>=2 occurrences) === */
.u-h2-001 { color: var(--txt3); }
.u-h2-002 { font-size: 13px; font-weight: 700; color: #1E293B; }
.u-h2-003 { font-size: 11px; color: #64748B; margin-bottom: 8px; }
.u-h2-004 { flex: 1; padding: 14px; font-size: 15px; font-weight: 700; }
.u-h2-005 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.u-h2-006 { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.u-h2-007 { border-top: 1px solid var(--bdr); margin: 14px 0; padding-top: 14px; }
.u-h2-008 { color: var(--suc); font-size: 10px; }
.u-h2-009 { color: var(--dan); }
.u-h2-010 { background: #2a4f7c; }
.u-h2-011 { font-size: 11px; color: var(--m-text3); padding: 4px 8px; margin-bottom: 6px; }

/* === HTML round 3 (final sweep: 1-회 포함) === */
.u-h3-001 { background: var(--m-bg); font-weight: 700; }
.u-h3-002 { color: var(--m-text3); font-size: 12px; font-weight: 400; }
.u-h3-003 { margin-bottom: 8px; min-height: 32px; }
.u-h3-004 { background: #FF3B30; }
.u-h3-005 { color: var(--txt3); font-size: 11px; margin-top: 8px; }
.u-h3-006 { color: var(--txt2); font-size: 11px; margin-top: 12px; }
.u-h3-007 { border-color: var(--bdr); }
.u-h3-008 { border: 1.5px solid red; }
.u-h3-009 { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.1); }
.u-h3-010 { color: var(--pri); font-weight: 600; }
.u-h3-011 { color: var(--txt2); font-size: 10px; }
.u-h3-012 { color: var(--suc); font-size: 11px; margin-top: 6px; }
.u-h3-013 { border-top: 1px solid var(--bdr); display: flex; gap: 6px; justify-content: flex-end; padding: 10px 12px; }
.u-h3-014 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.u-h3-015 { margin: 0 auto; max-width: 480px; }
.u-h3-016 { color: var(--txt2); font-size: 12px; margin-bottom: 14px; }
.u-h3-017 { color: var(--txt2); font-size: 16px; }
.u-h3-018 { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px; color: var(--txt3); font-size: 11px; padding: 2px 6px; }
.u-h3-019 { color: var(--suc); font-size: 11px; margin-top: 10px; text-align: center; }
.u-h3-020 { color: rgba(255,255,255,.4); font-size: 11px; margin-top: 20px; }
.u-h3-021 { max-width: 640px; }
.u-h3-022 { margin: 0 0 14px; }
.u-h3-023 { border-top: 1px solid #E5E7EB; margin-top: 16px; padding-top: 16px; text-align: center; }
.u-h3-024 { color: #6B7280; font-size: 13px; text-decoration: none; }
.u-h3-025 { align-items: center; display: flex; gap: 12px; }
.u-h3-026 { border-bottom: 1px solid rgba(255,255,255,.08); color: #64748B; font-size: 12px; font-weight: 600; letter-spacing: .3px; padding: 0 22px 14px; }
.u-h3-027 { align-items: center; background: #EF4444; border-radius: 10px; color: #fff; display: none; font-size: 11px; font-weight: 700; height: 18px; justify-content: center; margin-left: auto; min-width: 18px; padding: 0 5px; }
.u-h3-028 { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.u-h3-029 { align-items: center; display: flex; gap: 4px; }
.u-h3-030 { align-items: center; display: none; gap: 4px; }
.u-h3-031 { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.u-h3-032 { font-size: 14px; font-weight: 600; }
.u-h3-033 { display: flex; gap: 5px; }
.u-h3-034 { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom: 8px; }
.u-h3-035 { background: #F3F4F6; font-size: 12px; padding: 6px 8px; }
.u-h3-036 { cursor: pointer; font-size: 12px; padding: 6px 8px; }
.u-h3-037 { font-size: 13px; font-weight: 700; margin-top: 6px; text-align: right; }
.u-h3-038 { font-size: 12px; min-height: 28px; padding: 6px 8px; }
.u-h3-039 { background: #059669; border-radius: 20px; color: #fff; font-size: 11px; font-weight: 600; margin-left: auto; padding: 2px 10px; }
.u-h3-040 { display: none; margin-bottom: 8px; }
.u-h3-041 { max-height: 88vh; overflow-y: auto; width: 620px; }
.u-h3-042 { padding: 16px 20px; }
.u-h3-043 { border: 1px solid var(--bdr); border-radius: 6px; font-size: 12px; padding: 6px 10px; }
.u-h3-044 { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.u-h3-045 { min-width: 160px; }
.u-h3-046 { text-align: right; width: 90px; }
.u-h3-047 { min-width: 120px; }
.u-h3-048 { width: 120px; }
.u-h3-049 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.u-h3-050 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.u-h3-051 { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.u-h3-052 { background: #1E3A5F; }
.u-h3-053 { background: #94A3B8; }
.u-h3-054 { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.u-h3-055 { font-size: 14px; font-weight: 700; }
.u-h3-056 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); }
.u-h3-057 { align-items: flex-end; }
.u-h3-058 { color: #1E3A5F; font-size: 11px; }
.u-h3-059 { font-family: monospace; font-size: 12px; }
.u-h3-060 { margin-bottom: 1px; white-space: nowrap; }
.u-h3-061 { color: var(--txt2); font-size: 11px; margin-left: 8px; }
.u-h3-062 { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.u-h3-063 { font-size: 12px; margin-top: 8px; text-align: center; }
.u-h3-064 { background: #EFF6FF; border-radius: 10px; padding: 14px; text-align: center; }
.u-h3-065 { background: #F0FDF4; border-radius: 10px; padding: 14px; text-align: center; }
.u-h3-066 { background: #D1FAE5; border-radius: 8px; color: #065F46; font-size: 11px; margin-top: 10px; padding: 8px 12px; }
.u-h3-067 { align-items: center; display: flex; }
.u-h3-068 { font-size: 17px; font-weight: 700; }
.u-h3-069 { font-size: 13px; opacity: .8; }
.u-h3-070 { color: var(--txt2); font-size: 12px; margin-bottom: 10px; }
.u-h3-071 { height: 38px; padding: 2px; }
.u-h3-072 { align-items: flex-end; display: flex; }
.u-h3-073 { margin-top: 14px; max-height: 400px; overflow-y: auto; }
.u-h3-074 { display: flex; gap: 4px; }
.u-h3-075 { font-size: 12px; padding: 6px 8px; white-space: nowrap; }
.u-h3-076 { font-size: 11px; margin-top: 3px; min-height: 16px; }
.u-h3-077 { align-items: center; display: flex; gap: 16px; margin-top: 10px; }
.u-h3-078 { accent-color: #1E3A5F; height: 16px; width: 16px; }
.u-h3-079 { accent-color: #EF4444; height: 16px; width: 16px; }
.u-h3-080 { border-top: 1px solid #E5E7EB; padding-top: 10px; }
.u-h3-081 { font-size: 12px; max-height: 200px; overflow-y: auto; }
.u-h3-082 { max-height: 92vh; max-width: 95vw; width: 900px; }
.u-h3-083 { font-size: 15px; margin: 0; }
.u-h3-084 { display: grid; gap: 6px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 6px; }
.u-h3-085 { margin: 2px 0; }
.u-h3-086 { background: var(--bg2); border: 1px dashed var(--bdr); font-size: 11px; min-height: 24px; padding: 4px; }
.u-h3-087 { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.u-h3-088 { padding: 8px 16px; }
.u-h3-089 { display: flex; flex-direction: column; max-height: 90vh; width: 640px; }
.u-h3-090 { border: 1px solid var(--bdr); border-radius: 10px; margin-top: 12px; padding: 12px; }
.u-h3-091 { display: grid; font-size: 12px; gap: 10px; grid-template-columns: 1fr 1fr; }
.u-h3-092 { color: var(--pri); font-weight: 700; margin-bottom: 4px; }
.u-h3-093 { color: #0369A1; font-weight: 700; margin: 8px 0 4px; }
.u-h3-094 { color: #059669; font-weight: 700; margin-bottom: 4px; }
.u-h3-095 { color: #DC2626; font-weight: 700; margin: 8px 0 4px; }
.u-h3-096 { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.u-h3-097 { color: var(--txt2); font-size: 14px; margin: 10px 0; }
.u-h3-098 { display: grid; gap: 8px; grid-template-columns: 1fr 2fr; margin-top: 10px; }
.u-h3-099 { background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 10px; margin-bottom: 12px; padding: 12px; }
.u-h3-100 { color: #0369A1; font-size: 15px; font-weight: 700; }
.u-h3-101 { color: #64748B; font-size: 13px; margin-top: 4px; }
.u-h3-102 { font-size: 13px; padding: 8px; }
.u-h3-103 { display: flex; gap: 8px; justify-content: flex-end; }
.u-h3-104 { background: #0369A1; }
.u-h3-105 { width: 320px; }
.u-h3-106 { padding: 20px; text-align: center; }
.u-h3-107 { color: #64748B; font-size: 13px; margin-bottom: 16px; }
.u-h3-108 { display: flex; gap: 10px; justify-content: center; }
.u-h3-109 { display: flex; flex-direction: column; max-height: 85vh; width: 520px; }
.u-h3-110 { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: hidden; padding: 16px; }
.u-h3-111 { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.u-h3-112 { width: 780px; }
.u-h3-113 { display: flex; justify-content: space-between; }
.u-h3-114 { background: #FEF3C7; border: none; border-radius: 8px; color: #B45309; cursor: pointer; font-weight: 600; padding: 6px 14px; }
.u-h3-115 { background: #FEE2E2; border: none; border-radius: 8px; color: #DC2626; cursor: pointer; font-weight: 600; padding: 6px 14px; }
.u-h3-116 { background: #EFF6FF; border: none; border-radius: 8px; color: #1E3A5F; cursor: pointer; font-weight: 600; padding: 6px 14px; }
.u-h3-117 { font-size: 11px; margin-left: 6px; padding: 2px 8px; }
.u-h3-118 { align-items: center; display: flex; gap: 6px; }
.u-h3-119 { color: var(--suc); font-weight: 700; }
.u-h3-120 { color: var(--dan); font-weight: 700; }
.u-h3-121 { font-size: 16px; font-weight: 700; padding-top: 8px; }
.u-h3-122 { margin-right: auto; }
.u-h3-123 { max-width: calc(100vw - 32px); width: 760px; }
.u-h3-124 { align-items: center; flex-wrap: wrap; justify-content: space-between; }
.u-h3-125 { flex: 1; margin: 0; min-width: 260px; }
.u-h3-126 { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.u-h3-127 { width: 700px; }
.u-h3-128 { grid-template-columns: 1fr 1fr; }
.u-h3-129 { max-width: 700px; }
.u-h3-130 { max-width: 800px; }
.u-h3-131 { max-width: 720px; }
.u-h3-132 { border-top: 1px solid var(--bdr); display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 12px; }
.u-h3-133 { max-width: 420px; }
.u-h3-134 { font-weight: 700; padding: 6px 0; }
.u-h3-135 { align-items: start; display: grid; gap: 16px; grid-template-columns: 220px 1fr; }
.u-h3-136 { color: var(--txt2); font-size: 12px; font-weight: 700; margin-bottom: 8px; }

/* === Last-defined .hidden: !important to win over ID selectors (#cliMo 등 display:flex) and later-loaded CSS files (pc-mod-*, extracted-*). JS toggles via classList.add/remove('hidden'); 인라인 style.display 만으로는 안 됨. === */
.hidden{display:none!important}