/*
 * 넥트홀딩스 상품통합관리플랫폼 — 정식 프론트엔드 CSS.
 * 화면설계서(docs/넥트홀딩스_상품통합관리플랫폼_화면설계서_v1_0_20260821.html)의 <style> 원본 중
 * 이번 8개 관리화면 + 로그인 + 공통 셸에 쓰이는 규칙만 서브셋으로 옮기고, 신규 규칙은 하단에 별도로 모았다.
 * (대시보드/상품등록/업무요청/입고특이사항 등 미구현 화면 전용 클래스는 가져오지 않는다.)
 * NEKT UI v1.0(화면설계서 v4.9) 재스킨 — 기존 변수명은 유지하고 --nk-* 토큰의 별칭으로 재정의했다.
 */
:root {
  --nk-blue:#3E7BFA; --nk-blue-d:#2A62DA; --nk-blue-l:#EAF1FF;
  --nk-coral:#FF6B57; --nk-coral-l:#FFEDEA;
  --nk-cyan:#4CC9E0;
  --nk-green:#34C77B; --nk-green-l:#E7F8F0;
  --nk-amber:#F5A623; --nk-amber-l:#FFF4E2;
  --nk-red:#E5484D; --nk-red-l:#FDECEC;
  --nk-ink:#2C3444; --nk-gray-1:#5B6474; --nk-gray-2:#8A94A6; --nk-gray-3:#B6BECD;
  --nk-line:#E8ECF2; --nk-bg:#F4F6FA; --nk-bg-2:#FAFBFD; --nk-card:#FFFFFF;
  --nk-r-sm:4px; --nk-r:8px; --nk-r-lg:12px; --nk-r-pill:999px;
  --nk-sh-1:0 1px 2px rgba(44,52,68,.05);
  --nk-sh-2:0 4px 14px rgba(44,52,68,.06);
  --nk-sh-3:0 10px 30px rgba(44,52,68,.10);
  --nk-top:64px;
  --nk-font:'Noto Sans KR','Pretendard','Roboto',-apple-system,'Malgun Gothic','맑은 고딕',sans-serif;
  --nk-font-num:'Roboto','Noto Sans KR',sans-serif;
  --nk-fs-body:13px; --nk-fs-sm:12.5px; --nk-fs-cap:11px;

  --paper:var(--nk-bg);          --surface:var(--nk-card);      --surface-2:var(--nk-bg-2);
  --ink:var(--nk-ink);           --muted:var(--nk-gray-2);
  --line:var(--nk-line);         --line-dark:#D5DBE5;
  --dark:var(--nk-blue);         --accent:var(--nk-blue);       --accent-soft:var(--nk-blue-l);
  --warn:#B77400;                --warn-soft:var(--nk-amber-l);
  --danger:var(--nk-red);        --danger-soft:var(--nk-red-l);
  --ok:#1E9A5B;                  --ok-soft:var(--nk-green-l);
  --shadow:var(--nk-sh-3);       --radius:var(--nk-r);          --sidebar:210px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden;font-family:var(--nk-font);color:var(--ink);background:var(--paper)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* SPA→실페이지 분리로 일부 .btn/.nav-btn이 <a href>로 바뀌면서, 브라우저 기본 링크 스타일(밑줄·파란색·수직정렬)이 남아 <button>과 달라 보이던 문제를 없앤다.
   .btn/.nav-btn 자체가 정의한 속성(font-size, font-weight, height 등)은 여기서 다시 건드리지 않는다 — a.btn 셀렉터가 .btn보다 특정도가 높아 덮어써 버리기 때문. */
a.btn,a.nav-btn{text-decoration:none}
a.btn{color:inherit;display:inline-flex;align-items:center}

/* ---------- 접근성/전역 마감 (화면설계서 DESIGN PASS · 0. 공통 품질) ---------- */
:focus-visible{outline:2px solid var(--nk-blue);outline-offset:2px;border-radius:var(--nk-r-sm)}
button:focus:not(:focus-visible){outline:none}
::selection{background:var(--nk-blue-l);color:var(--nk-blue-d)}
.table-wrap::-webkit-scrollbar,.nav::-webkit-scrollbar{width:10px;height:10px}
.table-wrap::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{
  background:#D8DFEA;border-radius:8px;border:3px solid transparent;background-clip:content-box}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--nk-gray-3);background-clip:content-box}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- 공통 셸(사이드바 + 상단바) ---------- */
.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
.app[hidden]{display:none} /* [hidden] 기본값(display:none)이 위 .app{display:grid} 선언에 덮이는 것을 막는다 */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#fff;color:var(--ink);border-right:1px solid var(--line);padding:0 12px 16px;display:flex;flex-direction:column;z-index:10}
.brand{flex:0 0 auto;height:var(--nk-top);display:flex;align-items:center;padding:0 6px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.nav{flex:1 1 auto;padding-top:8px;overflow:auto}
.nav-group{margin-bottom:14px}
.nav-label{padding:14px 10px 6px;color:var(--nk-gray-3);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav-btn{width:100%;border:0;background:transparent;color:var(--nk-gray-1);text-align:left;border-radius:var(--nk-r-sm);padding:8px 10px;margin:2px 0;display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:13px;position:relative;height:auto}
.nav-btn:hover{background:#F5F8FE;color:var(--ink)}
.nav-btn.active{background:#F1F6FF;color:var(--nk-blue);font-weight:500}
.nav-btn.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--nk-blue)}
.nav-btn.disabled{opacity:.42;cursor:not-allowed}
/* 아이콘은 mask 방식 — 배경색(currentColor)이 실제 렌더색을 결정하므로 SVG 내부 stroke 색은 무관 */
.nav-icon{content:"";display:inline-block;flex:0 0 auto;width:17px;height:17px;opacity:.55;transition:opacity .15s;background-color:currentColor;-webkit-mask:var(--i) center/100% 100% no-repeat;mask:var(--i) center/100% 100% no-repeat}
.nav-btn:hover .nav-icon{opacity:.8}
.nav-btn.active .nav-icon{opacity:1}
[data-page-target="dashboard"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E")}
[data-page-target="product-form"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3C/svg%3E")}
[data-page-target="tasks"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='17' rx='2'/%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E")}
[data-page-target="inbound"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v9a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 17V8'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5-8.7-5z'/%3E%3Cpath d='M12 17v-4'/%3E%3C/svg%3E")}
[data-page-target="accounts"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='3.2'/%3E%3Cpath d='M22 20v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 4.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
[data-page-target="departments"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18' rx='1.5'/%3E%3Cpath d='M15 8h4a1.5 1.5 0 0 1 1.5 1.5V21'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E")}
[data-page-target="templates"] .nav-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.nav-parent{display:flex;align-items:center;gap:10px;padding:8px 10px 4px;color:var(--nk-gray-2);font-size:12.5px;font-weight:500}
.nav-parent .nav-icon{opacity:.5;--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h10M18 18h2'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E")}
.nav-submenu{margin:0 0 2px 26px;padding:2px 0 3px 12px;border-left:1px solid var(--line)}
.nav-submenu .nav-btn{padding:7px 10px;margin:1px 0;font-size:12px;color:var(--nk-gray-2)}
.nav-submenu .nav-btn.active{color:var(--nk-blue);background:#F1F6FF}
.main{grid-column:2;min-width:0}
.topbar{height:var(--nk-top);position:sticky;top:0;z-index:8;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:16px}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--nk-gray-2)}
/* 계정 영역(아바타+드롭다운) + 알림벨(목업) — TOPBAR_HTML의 .userbox 하위 구조에 맞춘 신규 규칙 */
.userbox{display:flex;align-items:center;gap:8px}
.notification-wrap,.user-menu{position:relative}
.userbox .user-meta,.userbox .avatar,.userbox .user-menu{position:relative;z-index:1}
#notification-btn,.tb-more{border:1px solid transparent;background:transparent;color:var(--nk-gray-2)}
#notification-btn:hover,.tb-more:hover{background:var(--nk-bg);color:var(--nk-ink)}
.tb-more{width:26px;height:26px;padding:0;border-radius:var(--nk-r-sm);display:grid;place-items:center;cursor:pointer;color:var(--nk-gray-3)}
.tb-more::before{content:"";display:inline-block;width:15px;height:15px;background-color:currentColor;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  -webkit-mask:var(--i) center/100% 100% no-repeat;mask:var(--i) center/100% 100% no-repeat;
  --i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.user-menu.open .tb-more{background:var(--nk-blue-l);color:var(--nk-blue-d)}
.user-menu.open .tb-more::before{transform:rotate(180deg)}
#notification-btn{height:32px;width:32px;padding:0;gap:0;font-size:0;position:relative;display:flex;align-items:center;justify-content:center}
#notification-btn::before{content:"";display:inline-block;width:17px;height:17px;background-color:currentColor;
  -webkit-mask:var(--i) center/100% 100% no-repeat;mask:var(--i) center/100% 100% no-repeat;
  --i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 1 0-12 0c0 5-2 6-2 6h16s-2-1-2-6'/%3E%3Cpath d='M10.3 20a2 2 0 0 0 3.4 0'/%3E%3C/svg%3E")}
.notification-panel{display:none;position:absolute;right:0;top:38px;width:340px;background:#fff;
  border:1px solid #E1E7F0;border-radius:12px;
  box-shadow:0 1px 2px rgba(44,52,68,.04),0 8px 20px -6px rgba(44,52,68,.14),0 24px 48px -12px rgba(44,52,68,.16);
  z-index:70;overflow:hidden}
.notification-panel.open{display:block}
.notification-head{padding:13px 15px;background:var(--nk-bg-2);border-bottom:1px solid var(--nk-line);border-radius:12px 12px 0 0;font-size:13px}
.notification-head b{font-weight:500;font-size:13px}
.notification-empty{padding:28px 14px;text-align:center;color:var(--nk-gray-3);font-size:12px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:700;background:var(--nk-blue-l);color:var(--nk-blue-d);transition:box-shadow .18s}
.user-menu.open~.avatar,.userbox:hover .avatar{box-shadow:0 0 0 3px #EEF4FF}
.user-meta{position:relative;color:var(--nk-gray-2);font-size:12.5px;margin-left:2px;padding-left:0;text-align:right;line-height:1.35}
.user-meta::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--nk-line)}
.user-dropdown{display:none;position:absolute;right:-2px;top:42px;min-width:228px;padding:7px;
  background:#fff;border:1px solid #E1E7F0;border-radius:12px;
  box-shadow:0 1px 2px rgba(44,52,68,.04),0 8px 20px -6px rgba(44,52,68,.14),0 24px 48px -12px rgba(44,52,68,.16);
  z-index:70}
.user-dropdown::before,.user-dropdown::after{content:"";position:absolute;right:14px;width:10px;height:10px;transform:rotate(45deg)}
.user-dropdown::before{top:-6px;background:#E1E7F0}
.user-dropdown::after{top:-5px;background:#fff}
.user-menu.open .user-dropdown{display:block}
/* button.btn(예: #logout-btn)은 a.btn(42행)의 display:inline-flex를 못 받아 기본 inline-block으로 렌더링되므로
   justify-content가 무의미해진다 — 여기서 명시적으로 다시 선언해 a.btn과 동일한 정렬을 보장한다. */
.user-dropdown .btn.small{display:inline-flex;align-items:center;width:100%;justify-content:flex-start;height:34px;border:0;border-radius:8px;background:transparent;color:var(--nk-gray-1);padding:0 10px;font-size:12.5px;letter-spacing:-.01em;transition:background .14s,color .14s}
.user-dropdown .btn:hover{background:#F4F8FF;color:var(--nk-blue-d)}
.user-dropdown .btn:active{background:#E9F1FF}
.user-dropdown .btn:focus-visible{outline:2px solid var(--nk-blue);outline-offset:-2px}
.user-dropdown #logout-btn{color:var(--nk-gray-1)}
.user-dropdown #logout-btn:hover{background:var(--nk-red-l);color:#C1272D}
.content{padding:28px 32px 70px;max-width:1680px;margin:0 auto}
.page{display:none}
.page.active{display:block}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
.page-head>div:first-child{min-width:0}
.page-head h1{margin:0 0 8px;font-size:26px;font-weight:300;letter-spacing:-.02em}

/* ---------- 카드/테이블/폼 공통 ---------- */
.card{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--nk-sh-2);padding:20px 22px;margin-bottom:16px}
.card:last-child{margin-bottom:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.card-title{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;letter-spacing:-.02em}
.card-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{height:34px;border:1px solid var(--line);background:#fff;border-radius:var(--nk-r-sm);padding:0 14px;font-size:var(--nk-fs-sm);font-weight:400;color:var(--nk-gray-1);white-space:nowrap}
.btn:hover{border-color:var(--nk-gray-3);background:#fff;color:var(--nk-ink)}
.btn.primary{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:500;box-shadow:0 4px 10px rgba(62,123,250,.28)}
.btn.primary:hover{background:var(--nk-blue-d);border-color:var(--nk-blue-d)}
.btn.small{height:28px;padding:0 10px;font-size:11.5px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.field, input, select, textarea{border:1px solid var(--line);border-radius:var(--nk-r-sm);background:#fff;min-height:34px;padding:0 11px;font-size:var(--nk-fs-sm);outline:none}
/* 문서상 textarea 최종 캐스케이드: 그룹 규칙의 min-height(34px)는 유지되지만 padding/resize/line-height는
   textarea 전용 규칙이 나중에 한 번 더 덮어써 최종값이 다르다 — 그 결과만 반영 */
textarea{height:auto;padding:9px 11px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--nk-blue);box-shadow:0 0 0 3px var(--nk-blue-l)}
input[readonly],input:disabled{background:#F7F9FC;color:var(--nk-gray-3)}
/* 비밀번호 표시/숨김 토글 — input 우측에 겹쳐지는 아이콘 버튼(.nav-icon과 동일한 mask 패턴) */
.pw-field{position:relative}
.pw-field input{width:100%;padding-right:38px}
.pw-toggle{position:absolute;top:0;right:0;bottom:0;width:34px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nk-gray-2)}
.pw-toggle:hover .pw-toggle-icon{opacity:.8}
.pw-toggle:focus-visible{outline:2px solid var(--nk-blue);outline-offset:-2px;border-radius:var(--nk-r-sm)}
.pw-toggle-icon{display:inline-block;width:17px;height:17px;opacity:.55;background-color:currentColor;-webkit-mask:var(--i) center/100% 100% no-repeat;mask:var(--i) center/100% 100% no-repeat;transition:opacity .15s;--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.pw-toggle.is-visible .pw-toggle-icon{--i:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E")}
/* select 화살표 — appearance:none 후 상태별(default/hover/focus/disabled) data-uri 화살표를 직접 그린다.
   반드시 위 .field,input,select,textarea 규칙 뒤에 와야 한다(그 규칙의 background:#fff 축약이 배경이미지를 지우므로 순서가 화살표 생존을 좌우함). */
select,select:hover,select:focus,select:disabled{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:30px;
  background-repeat:no-repeat!important;
  background-position:right 11px center!important;
  background-size:11px 11px!important}
select{cursor:pointer;transition:border-color .14s,box-shadow .14s,background-color .14s}
select{background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select:hover:not(:disabled){border-color:var(--nk-gray-3);background-color:#FCFDFF;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3444' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select:focus{background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E7BFA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select:disabled{background-color:#F7F9FC;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6BECD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select::-ms-expand{display:none}
select option{color:var(--nk-ink);background:#fff;padding:6px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.filters select{min-width:160px}
body .page .layered-filters{display:block!important;border:1px solid #d9dfe7!important;border-radius:6px;margin:0 0 16px!important;padding:0!important;min-width:0;width:100%;box-sizing:border-box;overflow:visible}
body .page .layered-filters .filter-layer{display:grid!important;grid-template-columns:140px minmax(0,1fr);align-items:stretch;gap:0!important;margin:0!important;padding:0!important;min-width:0!important;width:100%;border:0;border-bottom:1px solid #d9dfe7;border-radius:0;box-sizing:border-box;font-size:12px}
body .page .layered-filters .filter-layer:last-child{border-bottom:0}
body .page .layered-filters .filter-heading{display:flex;align-items:center;min-width:0;padding:12px 14px;background:#f6f7f9;border-right:1px solid #d9dfe7;color:#3c4655;font-size:12px;font-weight:600;line-height:1.5}
body .page .layered-filters .filter-value{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;min-width:0;max-width:100%;box-sizing:border-box;background:#fff}
body .page .layered-filters .filter-value>input,body .page .layered-filters .filter-value>select{flex:0 1 280px!important;width:280px!important;min-width:0!important;max-width:100%!important;height:36px;box-sizing:border-box;margin:0}
body .page .layered-filters .filter-value>input:not([type=date]){flex-basis:420px!important;width:420px!important}
body .page .layered-filters .filter-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;background:#fafbfc;border-top:1px solid #d9dfe7}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:760px;background:#fff}
th{background:var(--nk-bg-2);color:var(--nk-gray-2);font-weight:500;font-size:11.5px;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--nk-bg-2)}
.table-wrap thead th::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--nk-line)}
td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:var(--nk-fs-sm);color:var(--nk-gray-1);vertical-align:middle}
td .badge{vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFCFF}
tbody tr.clickable:hover{background:#FAFCFF;cursor:pointer}
.badge{display:inline-flex;align-items:center;height:20px;border-radius:var(--nk-r-pill);padding:0 9px;font-size:11px;font-weight:500;letter-spacing:.01em;white-space:nowrap;border:0}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.wait{background:var(--nk-bg);color:var(--nk-gray-1)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.muted{color:var(--muted)}
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
#task-search{padding:14px 16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.form-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:12px;font-weight:500;color:var(--nk-gray-1)}
.required::after{content:" *";color:var(--nk-coral)}
.help{font-size:11px;color:var(--muted);line-height:1.45}
.field-message{color:var(--danger);font-size:12px;margin-top:6px;min-height:1.2em}
.notice{border:1px solid #CFE0FF;background:var(--nk-blue-l);border-radius:var(--nk-r);padding:13px 15px;font-size:12px;color:var(--nk-blue-d);line-height:1.6}
.notice.warn{background:var(--warn-soft);border-color:#F3DDB4;color:#8A5A00}
.split-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.5fr);gap:16px;align-items:start}
.side-panel{position:sticky;top:calc(var(--nk-top) + 18px);align-self:start}
.admin-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.8fr);gap:16px;align-items:start}
.admin-grid>aside.card,.split-layout>aside.card{position:sticky;top:calc(var(--nk-top) + 18px);box-shadow:var(--nk-sh-2)}
.admin-grid>aside.card::before,.split-layout>aside.card::before{content:"";display:block;width:26px;height:2px;background:var(--nk-blue);border-radius:2px;margin-bottom:12px}
.admin-grid>aside.card>.card-title,.split-layout>aside.card>.card-title{margin-bottom:16px!important}
.admin-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
aside.card .form-group+.form-group{margin-top:12px!important}
aside.card .form-group{margin-top:0}
aside.card .notice{margin-top:14px!important}
.entity-row,.account-row,tbody tr.clickable{cursor:pointer}
.entity-row td:first-child,.account-row td:first-child{position:relative}
.entity-row.selected td:first-child::before,.account-row.selected td:first-child::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nk-blue)}
.entity-row.selected td,.account-row.selected td{background:#F5F9FF;color:var(--nk-ink)}
.entity-row.selected td:first-child,.account-row.selected td:first-child{font-weight:500}
.entity-row.selected:hover td,.account-row.selected:hover td{background:#EFF6FF}
.template-fields{display:grid;gap:8px}
.template-field-row{display:grid;grid-template-columns:minmax(110px,1.2fr) 90px 72px 62px;gap:8px;align-items:center;margin-bottom:8px}
.template-field-row label{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.template-field-row input[type="checkbox"]{width:auto;height:auto;min-height:auto;padding:0}
.inline-editor{display:grid;grid-template-columns:minmax(150px,1fr) 90px 95px auto;gap:8px;align-items:center;padding:10px;border:1px dashed var(--line);border-radius:9px;background:var(--surface-2);margin-top:12px}

/* ---------- 로그인 오버레이 ---------- */
.login-screen{position:fixed;inset:0;background:var(--paper);z-index:100;display:none;align-items:center;justify-content:center;padding:30px}
.login-screen.open{display:flex}
.login-card{width:420px;background:#fff;border:0;border-radius:var(--nk-r-lg);padding:36px 34px;box-shadow:var(--shadow)}
.login-card h1{font-size:24px;font-weight:300;margin:0 0 6px}
.login-card>p{color:var(--muted);font-size:13px;margin:0 0 26px}
.login-card .form-group{margin-bottom:12px}
.login-card .btn{width:100%;height:42px;margin-top:10px;font-size:13.5px}
.login-info{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.55}

/* ---------- 토스트 ---------- */
.toast{position:fixed;left:calc(var(--sidebar) + 50%);bottom:30px;transform:translate(-50%,20px);background:var(--ink);color:#fff;border-radius:var(--nk-r);padding:12px 16px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1180px){
  :root{--sidebar:205px}
  .content{padding:22px 20px 60px}
  .topbar{padding:0 20px}
  .user-meta{display:none}
  .split-layout,.admin-grid{grid-template-columns:1fr}
  .side-panel,.admin-grid>aside.card,.split-layout>aside.card{position:static}
  .form-grid{grid-template-columns:1fr}
}

/* ==================== 신규 규칙(원본 화면설계서에 없음) ==================== */
/* 계정/공급처/상품형태/코드기준값 등 미니 수정폼 컨테이너 — inline-editor를 재사용하되 폭을 좁게 쓸 때 */
.mini-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:1px dashed var(--line);border-radius:9px;background:var(--surface-2);margin-top:10px}
.mini-form input,.mini-form select{min-height:32px;padding:6px 8px}
.linked-value{color:var(--muted);font-size:12px}

/* 상품대시보드(SCR-002) 복수조건포함검색 행 — .template-field-row와 같은 그리드 패턴 */
.product-search-rows{display:grid;gap:8px;margin-top:12px}
.product-search-row{display:grid;grid-template-columns:110px 130px minmax(160px,1fr) 40px;gap:8px;align-items:center}

/* 입고특이사항(SCR-007) 배치패널 — 뷰포트 고정 오버레이 */
.batch-panel{display:none;position:fixed;left:var(--sidebar);right:0;top:var(--nk-top);bottom:0;overflow:auto;background:var(--paper);z-index:40;padding:28px 32px 70px}
.batch-panel.open{display:block}
@media(max-width:1180px){.batch-panel{padding:22px 20px 60px}}

/* 상품대시보드(SCR-002) 컬럼 개인화 설정 모달 */
.modal-backdrop{position:fixed;inset:0;background:rgba(44,52,68,.32);display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.modal-backdrop.open{display:flex}
.modal{width:min(560px,100%);background:#fff;border-radius:var(--nk-r-lg);box-shadow:var(--shadow);overflow:hidden}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);font-size:15px;font-weight:500}
.modal-body{padding:20px 22px;font-size:13px;line-height:1.65}
.modal-foot{padding:14px 22px;background:var(--nk-bg-2);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.modal-foot .btn.primary{min-width:88px}
#column-modal .modal{max-height:calc(100vh - 48px);display:flex;flex-direction:column}
#column-modal .modal-head,#column-modal .modal-foot{flex:0 0 auto;background:#fff}
#column-modal .modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
#column-modal .modal-foot{position:sticky;bottom:0;z-index:2;box-shadow:0 -8px 18px rgba(20,20,18,.05)}
.column-list{display:grid;gap:8px}
.column-row{display:grid;grid-template-columns:28px minmax(0,1fr) 66px 34px 34px;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:8px}
.column-row button{width:30px;height:30px;padding:0}
.badge.dark{background:var(--nk-blue-l);color:var(--nk-blue-d)}
/* 대표이미지 컬럼 — 다음 단계(엑셀등록 등) 전까지 서버 image는 항상 null이라 고정 placeholder만 렌더링한다 */
.product-thumb-placeholder{width:40px;height:40px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}

/* 입고특이사항(SCR-007) 통계 카드 — 화면설계서 원본 .stats/.stat 그대로 옮김 */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.stat{background:#fff;border:0;border-radius:var(--nk-r-lg);box-shadow:var(--nk-sh-1);padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.stat span{display:block;color:var(--muted);font-size:11.5px;margin-bottom:6px}
.stat b{font-family:var(--nk-font-num);font-size:24px;font-weight:400;letter-spacing:-.5px;color:var(--nk-blue);line-height:1.15}
.stat em{font-style:normal;color:var(--nk-gray-3);font-size:12px;margin-left:4px}

/* 입고특이사항(SCR-007) 발주자료 그리드 — 등록 실패 행(row-error) 강조 */
.row-error td{background:var(--danger-soft)}

/* 업무요청(SCR-005/006) — 목록 행 펼침 + 상세 요약/이력 타임라인 */
.task-detail-row{display:none}
.task-detail-row.open{display:table-row}
.kv-grid{display:grid;grid-template-columns:max-content 1fr;gap:9px 16px;font-size:13px;margin:0}
.kv-grid dt{color:var(--muted);margin:0}
.kv-grid dd{margin:0}
.timeline{display:flex;flex-direction:column;gap:10px}
.timeline-item{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.6}

/* 업무요청(SCR-005/006) v4.9 재구성 — .filters(accounts.html도 .card 직계자식으로 사용)와
   .split-layout(accounts/reference-groups/reference-values도 사용)은 전역으로 잡지 않고
   #task-search, #task-request-card로 스코프를 좁힌다(다른 화면 필터바·표 스타일 오염 방지) */
#task-search>.filters{margin:0!important;padding:10px 12px!important;border:1px solid var(--nk-line)!important;border-radius:var(--nk-r);background:var(--nk-bg-2);gap:8px;align-items:center}
#task-search>.filters input[type=date]{max-width:150px}
#task-search>.filters input:not([type=date]){min-width:190px;flex:1 1 190px;max-width:280px}
#task-search>.filters select{min-width:132px}
#task-search>.filters .btn.primary{margin-left:auto}
#task-request-card table{min-width:0}
#task-request-card td{padding:11px 14px}
.btn.danger{color:var(--nk-red);border-color:#F3C7C8;background:#fff}
.task-result-guide{margin:0 0 12px;padding:10px 12px;border-radius:9px;background:#F4F7F4;color:#435247;font-size:11px;line-height:1.55}
.task-change-empty{text-align:center;color:var(--muted);padding:18px}
.task-history-empty{color:var(--muted);font-size:11px}
.task-snapshot-label{display:inline-flex;margin-left:7px;padding:3px 7px;border-radius:999px;background:#EEF3EF;color:#36533E;font-size:10px;font-weight:800}
.task-result-paths{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 14px}
.task-result-paths>div{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:11px}
@media(max-width:760px){.task-result-paths{grid-template-columns:1fr}}