/* ===========================================================
   아트센트랩 공방관리 (ASL) - 대시보드 공통 스타일
   좌측(메뉴 프레임) + 우측(기능 화면 프레임) 2분할 구조
   =========================================================== */

:root{
  --side-w: 340px;          /* 스플릿바 드래그로 변경 (app.js 가 갱신) */

  /* 기능버튼 크기 : 고정값. 스플릿바를 움직여도 너비만 바뀐다 */
  --btn-h:    46px;
  --btn-fs:   19px;
  --btn-ls:   .32em;
  --btn-gap:  10px;
  --logout-h: 42px;
  --logout-fs:17px;

  --line:       #c9ced6;
  --line-soft:  #e4e8ee;
  --text:       #14181d;
  --muted:      #6b7480;

  /* 그리드 헤더 : 공방(향수/비누)의 기능버튼 색을 그대로 따른다 */
  --grid-head:  #1565c0;
  --grid-head2: #1565c0;
  --grid-input: #ffffcc;   /* 입력행 : 노란색 */
  --grid-alt:   #f7f9fc;
  --grid-sel:   #dceaff;

  --combo-bg:   #f0f2f5;   /* 콤보박스 기본 배경 (밝은 회색) */

  --accent:     #1565c0;   /* 향수 테마 */
  --accent-soft:#e8f1fc;

  /* 기능버튼 색 (향수) */
  --btn-bg:    #eef4fd;
  --btn-bg-hv: #dceafa;
  --btn-bd:    #c3d9f3;
  --btn-tx:    #12457f;
  --btn-sh:    rgba(21,101,192,.14);
  --btn-on:    #1565c0;    /* 선택된 기능버튼 = 그리드 헤더 색 */
}
/* 비누 선택 시 테마 색 전환 */
body[data-craft="soap"]{
  --accent:      #00796b;
  --accent-soft: #e2f3f1;

  /* 기능버튼 색 (비누) */
  --btn-bg:    #e9f5f2;
  --btn-bg-hv: #d5ebe6;
  --btn-bd:    #b7ded7;
  --btn-tx:    #0b564c;
  --btn-sh:    rgba(0,121,107,.14);
  --btn-on:    #00796b;

  --grid-head:  #00796b;   /* 그리드 헤더도 비누공방 색으로 */
  --grid-head2: #00796b;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:"Malgun Gothic","맑은 고딕","Pretendard","Apple SD Gothic Neo",-apple-system,"Segoe UI",sans-serif;
  font-size:13px; color:var(--text); background:#fff;
  -webkit-font-smoothing:antialiased;
}
button,input,select{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }

/* 전체 프레임 ------------------------------------------------ */
.app{ display:flex; height:100vh; border:2px solid #2b6cb0; }

/* ===================== 좌측 프레임 ===================== */
.side{
  width:var(--side-w); flex:0 0 var(--side-w);
  background:#f1f2f4; border-right:2px solid #2b6cb0;
  display:flex; flex-direction:column; padding:18px 16px 10px; overflow:hidden auto;
  container-type:inline-size;
}
.side-title h1{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.5px; text-align:center; word-break:keep-all; }
.side-title p { margin:2px 0 0; font-size:15px; font-weight:600; text-align:center; }

.craft-pick{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:18px 4px 14px; }
.craft{ display:flex; align-items:center; gap:7px; font-size:19px; font-weight:700; cursor:pointer; }
.craft input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

.side-auth{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:16px; }
.btn-logout{
  flex:1; height:var(--logout-h); border-radius:10px;
  background:var(--btn-bg); border:1px solid var(--btn-bd); color:var(--btn-tx);
  font-size:var(--logout-fs); font-weight:800; white-space:nowrap;
  box-shadow:0 1px 2px var(--btn-sh);
  transition:background .14s, box-shadow .14s, transform .06s;
}
.btn-logout:hover{ background:var(--btn-bg-hv); box-shadow:0 2px 6px var(--btn-sh); }
.btn-logout:active{ transform:translateY(1px); }
.login-name{ font-size:14px; color:#333; white-space:nowrap; }

.side-label{ font-size:15px; color:#8a8f97; font-weight:600; margin:0 2px 8px; }

/* 기능 버튼 */
.menu{ display:flex; flex-direction:column; gap:var(--btn-gap); }
.menu button{
  height:var(--btn-h); border-radius:12px;
  background:var(--btn-bg); border:1px solid var(--btn-bd); color:var(--btn-tx);
  font-size:var(--btn-fs); font-weight:800; letter-spacing:var(--btn-ls); text-indent:var(--btn-ls);
  white-space:nowrap; overflow:hidden;
  box-shadow:0 1px 2px var(--btn-sh);
  transition:background .14s, color .14s, box-shadow .14s, transform .06s;
}
@container (max-width: 210px){ .menu button{ letter-spacing:.12em; text-indent:.12em; } }
.menu button:hover{ background:var(--btn-bg-hv); box-shadow:0 2px 8px var(--btn-sh); }
.menu button:active{ transform:translateY(1px); }
.menu button.on{
  background:var(--btn-on); border-color:var(--btn-on); color:#fff;
  box-shadow:0 3px 10px var(--btn-sh);
}

.side-foot{
  margin-top:auto; padding-top:12px; display:flex; justify-content:space-between;
  font-size:11px; color:#98a0ab;
}

/* ===================== 우측 프레임 ===================== */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; }

.topbar{
  height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--line-soft); background:#fafbfc;
}
.crumb{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.crumb b{ color:var(--accent); font-size:13px; }
.crumb i{ font-style:normal; color:#b9c0c9; }
.conn{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.conn .dot{ width:7px; height:7px; border-radius:50%; background:#d0402f; display:inline-block; }
.conn.ok .dot{ background:#12a150; }

.content{ flex:1; min-height:0; overflow:auto; padding:8px 10px 14px; }
/* 배경 이미지 화면 : 여백·스크롤바 없이 우측 프레임을 꽉 채운다 */
.content.full{ padding:0; overflow:hidden; display:flex; flex-direction:column; }

/* ---------- 기능 화면 공통 패턴 ---------- */
.panel-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:6px; }
.panel-title{ font-size:15px; font-weight:800; color:var(--accent); }

.radios{ display:flex; gap:16px; align-items:center; }
.radios label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.radios input{ accent-color:var(--accent); cursor:pointer; }
.radios label.on{ font-weight:800; color:var(--accent); }

/* 검색 / 툴바 */
.toolbar{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  padding:6px 8px; border:1px solid var(--line-soft); background:#fafbfc; border-radius:3px;
  margin-bottom:6px;
}
.field{ display:flex; align-items:center; gap:5px; }
.field > span{ font-size:12px; color:#333; white-space:nowrap; }
.field select,.field input[type=text]{
  height:24px; border:1px solid var(--line); border-radius:2px; padding:0 6px; background:#fff; min-width:130px;
}
.field input[type=text]{ color:var(--accent); font-weight:700; }
.tool-btn{
  height:26px; padding:0 10px; border:1px solid var(--line); background:#fff; border-radius:2px; font-size:12px;
}
.tool-btn:hover{ background:var(--accent-soft); border-color:var(--accent); }
.tool-btn.primary{ background:var(--btn-on); border-color:var(--btn-on); color:#fff; }
.tool-btn.danger:hover{ background:#fdecea; border-color:#d0402f; color:#b3261e; }
.tool-sep{ width:1px; height:22px; background:var(--line-soft); }
.spacer{ flex:1; }
.count{ font-size:12px; font-weight:800; color:var(--accent); text-decoration:underline; white-space:nowrap; }

/* ---------- 그리드 ---------- */
.grid-wrap{ border:1px solid var(--line); overflow:auto; max-height:calc(100vh - 190px); }
table.grid{ border-collapse:collapse; width:100%; white-space:nowrap; }
table.grid th, table.grid td{ border:1px solid #b7bec8; padding:3px 6px; height:24px; }
table.grid thead th{ position:sticky; top:0; z-index:3; }
table.grid thead tr.h1 th{ background:var(--grid-head); color:#fff; font-size:12px; font-weight:700; text-align:center; }
table.grid thead tr.h2 th{ top:24px; background:var(--grid-head2); color:#fff; font-size:12px; font-weight:700; text-align:center; }
table.grid tr.input-row td{ background:var(--grid-input); }
table.grid thead tr.input-row td{ z-index:3; }
table.grid tr.input-row td input{
  width:100%; border:0; background:transparent; outline:none; font-size:12px; font-weight:700; color:var(--accent); text-align:center;
}
table.grid tbody tr:nth-child(even) td{ background:var(--grid-alt); }
table.grid tbody tr:hover td{ background:var(--grid-sel); }
table.grid tbody tr.sel td{ background:var(--grid-sel); }
table.grid td{ font-size:12px; text-align:center; }
table.grid td.left{ text-align:left; }
table.grid td.key{ color:#1a56b8; font-weight:700; }
table.grid td.name{ color:#0a7f3f; font-weight:700; }
table.grid td.link{ color:#1a56b8; text-decoration:underline; cursor:pointer; }
table.grid td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.col-chk{ width:30px; }

.empty{ padding:38px 10px; text-align:center; color:var(--muted); font-size:13px; }
.empty b{ display:block; margin-bottom:6px; color:var(--text); font-size:14px; }
.empty code{ background:#f2f4f7; padding:1px 6px; border-radius:3px; font-size:12px; }

/* 반응형 (좁은 화면) */
@media (max-width:1100px){
  .side-title h1{ font-size:21px; }
}

/* ---------- 상품관리 등 확장 요소 ---------- */
.opt{ display:flex; align-items:center; gap:5px; font-size:12px; color:#333; cursor:pointer; white-space:nowrap; }
.opt input{ accent-color:var(--accent); cursor:pointer; }

.tool-btn.green{ background:#00a651; border-color:#00a651; color:#fff; font-weight:700; }
.tool-btn.green:hover{ background:#00913f; }

.field input[type=date]{ height:24px; border:1px solid var(--line); border-radius:2px; padding:0 4px; background:#fff; }

/* 이미지 미리보기 상자 */
.imgbox{
  width:132px; height:56px; border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; color:var(--muted); overflow:hidden; flex:0 0 auto;
}
.imgbox.hide{ display:none; }
.imgbox b{ font-size:13px; color:var(--accent); }
.imgbox span{ max-width:126px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 묶음 머리행 (예: 단가이력) */
table.grid thead tr.h0 th{
  background:var(--grid-head2); color:#fff; font-size:11px; font-weight:700; text-align:center; top:0;
}
/* 묶음이 없는 칸도 머리행과 같은 색으로 이어지게 (칸 구분선 없이) */
table.grid thead tr.h0 th.blank{ background:var(--grid-head2); border-color:var(--grid-head2); }
table.grid.has-group thead tr.h1 th{ top:24px; }
table.grid.has-group thead tr.h2 th{ top:48px; }

/* 클릭 선택 행 */
table.grid tbody tr.focus td{ background:#cfe3ff; }   /* 외곽선은 선택한 칸에만 (아래) */

/* ---------- 좌/우 크기조절 스플릿바 ---------- */
.splitter{
  flex:0 0 7px; width:7px; align-self:stretch; position:relative;
  background:#e6e9ee; border-left:1px solid #cdd3db; border-right:1px solid #cdd3db;
  cursor:col-resize; touch-action:none;
}
.splitter::before{                 /* 손잡이 점선 */
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3px; height:44px; border-radius:2px;
  background:repeating-linear-gradient(#9aa3ae 0 2px, transparent 2px 5px);
}
.splitter:hover, .splitter.drag{ background:var(--accent-soft); }
.splitter:hover::before, .splitter.drag::before{
  background:repeating-linear-gradient(var(--accent) 0 2px, transparent 2px 5px);
}
.splitter:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
body.resizing{ cursor:col-resize; user-select:none; }
body.resizing .main{ pointer-events:none; }

/* ---------- 주문(발주)관리 등 : 구역 구분 · 입력셀 · 합계 ---------- */
.tool-btn.pink{ background:#f8d7da; border-color:#e39aa2; color:#a4262c; font-weight:700; }
.tool-btn.pink:hover{ background:#f3c2c7; }
.field.red > span{ color:#c62828; font-weight:700; }
.field.red input[type=date]{ border-color:#d0402f; }

.sum{ font-size:12px; color:#333; white-space:nowrap; }
.sum b{ font-size:13px; color:var(--accent); }

/* 노란 입력 대상 셀 (발주명 · 입고수량) */
table.grid tbody tr td.edit{ background:var(--grid-input); }
table.grid tbody tr:hover td.edit,
table.grid tbody tr.sel td.edit,
table.grid tbody tr.focus td.edit{ background:#f2ecb6; }

/* 발주 블록(파랑) · 입고 블록 구분선 (빨간 테두리는 쓰지 않는다) */
table.grid th.z-first, table.grid td.z-first{ border-left-width:2px; }
table.grid th.z-order.z-first, table.grid td.z-order.z-first{ border-left-color:#1a56b8; }

/* ---------- 서브메뉴 (R&D 관리 등) ---------- */
.menu button.has-sub{ position:relative; }
.menu .caret{ position:absolute; right:10px; font-style:normal; font-size:12px; letter-spacing:0; }
.submenu{ display:flex; flex-direction:column; gap:6px; margin:6px 0 2px 14px; }
.submenu button.sub{
  height:calc(var(--btn-h) * .78); border-radius:9px;
  background:#fff; border:1px dashed var(--btn-bd); color:var(--btn-tx);
  font-size:calc(var(--btn-fs) * .82); font-weight:700; letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; transition:background .14s, border-color .14s;
}
.submenu button.sub:hover{ background:var(--btn-bg); border-style:solid; }
.submenu button.sub.on{ background:var(--accent); border-color:var(--accent); }

/* ---------- 제품레시피 관리 (생산계획-레시피구성) ---------- */
.recipe{ display:flex; gap:10px; align-items:flex-start; }
.rc-left{ flex:1 1 auto; min-width:0; }
.rc-title{ font-size:15px; font-weight:800; color:var(--accent); margin-bottom:6px; }

.rc-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.rc-kv{ display:flex; align-items:stretch; border:1px solid var(--line); }
.rc-kv span{ padding:3px 8px; background:#eef1f5; font-size:12px; border-right:1px solid var(--line); white-space:nowrap; }
.rc-kv b{ padding:3px 10px; font-size:12px; background:var(--grid-input); border-right:1px solid var(--line); }
.rc-kv b:last-child{ border-right:0; }
.rc-kv b.ymd, .rc-kv b.code{ color:#1a56b8; }
.rc-kv b.cnt{ background:#fff; text-align:center; min-width:34px; }

.rc-head.bomhead{ margin-top:12px; }
.rc-bom-title{ flex:1; text-align:center; font-weight:800; color:var(--accent); font-size:13px; }

.plan-wrap{ max-height:none; }
table.grid.plan thead tr.h2 th{ top:0; }
table.grid.plan tbody tr.blank td{ background:#fff; color:#9aa3ae; }
table.grid.plan td.c{ text-align:center; }
.rc-total{
  display:inline-flex; gap:10px; align-items:center; margin:4px 0 0;
  padding:3px 10px; border:1px solid var(--line); background:#eef1f5; font-size:12px; font-weight:700;
}
.rc-total b{ color:var(--accent); }

.rc-boms{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.bom{ flex:1 1 150px; min-width:150px; border:1px solid var(--line); }
.bom-h{ background:#eef1f5; border-bottom:1px solid var(--line); padding:3px 6px; font-weight:800; text-align:center; font-size:12px; }
.bom-b{ max-height:300px; overflow:auto; }
.bom-r{ display:flex; justify-content:space-between; gap:6px; padding:2px 6px; font-size:12px; border-bottom:1px dotted #dfe3e9; }
.bom-r span{ color:#1a56b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bom-r b{ font-variant-numeric:tabular-nums; }
.bom-r.total{ background:#f3f6fa; font-weight:800; border-top:1px solid var(--line); }
.bom-r.total span{ color:#333; }

/* 작업레시피[MP] 카드 */
.rc-mp{ flex:0 0 470px; border:2px solid #1f3864; background:#fff; }
.mp-top{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
.mp-no{ width:44px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#c62828; border-right:1px solid var(--line); }
.mp-title{ flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; color:#c62828; }
.mp-code{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 8px; border-left:1px solid var(--line); font-size:11px; }
.mp-code b{ color:#1a56b8; }

table.mp-info{ width:100%; border-collapse:collapse; }
table.mp-info th, table.mp-info td{ border:1px solid #b7bec8; padding:2px 5px; font-size:11px; height:22px; text-align:center; }
table.mp-info th{ background:#eef1f5; white-space:nowrap; }
table.mp-info td.l{ text-align:left; }
table.mp-info td.b{ font-weight:700; }
table.mp-info td.pink{ color:#d81b60; font-weight:700; }
table.mp-info td.ver{ background:#dbe6f5; font-weight:700; }

table.mp-rows{ width:100%; border-collapse:collapse; }
table.mp-rows th, table.mp-rows td{ border:1px solid #b7bec8; padding:2px 5px; font-size:11px; height:21px; }
table.mp-rows thead th{ background:var(--grid-head); color:#fff; text-align:center; }
table.mp-rows th.mp-label{ background:#eef1f5; text-align:center; white-space:nowrap; width:74px; }
table.mp-rows th.mp-label em{ display:block; font-style:normal; color:#c62828; font-weight:800; }
table.mp-rows td.c{ text-align:center; }
table.mp-rows td.l{ text-align:left; }
table.mp-rows td.b{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
table.mp-rows td.pct{ color:#c62828; font-weight:700; }
table.mp-rows td.rate{ color:#c62828; }
table.mp-rows td.note{ color:#555; }
table.mp-rows tr.sub td{ background:#f7f9fc; }

.mp-note{ border-top:1px solid var(--line); display:flex; }
.mp-note-h{ width:74px; flex:0 0 74px; padding:6px 4px; background:#eef1f5; border-right:1px solid #b7bec8; font-size:11px; text-align:center; color:#c62828; font-weight:700; }
.mp-note-b{ flex:1; min-height:56px; background:repeating-linear-gradient(#fff 0 17px, #e4e8ee 17px 18px); }

@media (max-width:1400px){
  .recipe{ flex-wrap:wrap; }
  .rc-mp{ flex:1 1 100%; }
}

/* ---------- 이미지 전용 화면 (R&D관리) ---------- */
.bgview{
  flex:1; min-height:0;
  background-repeat:no-repeat; background-position:center top; background-size:contain;
  display:flex; align-items:center; justify-content:center;
}
.bgview-msg{
  max-width:520px; padding:26px 22px; text-align:center; color:var(--muted); font-size:13px;
  border:1px dashed var(--line); border-radius:4px; background:#fafbfc;
}
.bgview-msg b{ display:block; margin-bottom:8px; color:var(--text); font-size:14px; }
.bgview-msg code{ background:#f2f4f7; padding:1px 6px; border-radius:3px; }
.btn-logout.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.login-name.in{ color:var(--accent); font-weight:800; }

/* 로그아웃 상태 : 기능버튼 비활성화 */
.menu button:disabled, .submenu button:disabled{
  background:#eceef1; color:#a7aeb7; border-color:#dcdfe4;
  cursor:not-allowed; box-shadow:none;
}
.menu button:disabled:hover, .submenu button:disabled:hover{
  background:#eceef1; box-shadow:none; transform:none;
}
.menu button:disabled .caret{ color:#c2c8d0; }
.side-label.off{ color:#c2c8d0; }

/* ---------- 로그인 화면 ---------- */
.login{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; position:relative;
  /* R&D관리 화면과 같은 배율 : center top / contain */
  background:#f3f5f8 no-repeat center top; background-size:contain;
}
.login::before{                       /* 배경 사진 위에 얇은 막 */
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.92));
}

/* 배경 카드 : 안내 이미지를 10장(5열 x 2행)으로 나눠 0.5초에 한 장씩 */
.lg-wall{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  container-type:size;
  display:flex; justify-content:center; align-items:flex-start;
}
.lg-grid{
  width:min(100%, calc(100cqh * 962 / 749));   /* 원본과 같은 배율(contain) */
  aspect-ratio:962 / 749;
  display:grid;
  grid-template-columns:195fr 194fr 191fr 196fr 186fr;   /* 원본 칸 너비 그대로 */
  grid-template-rows:385fr 364fr;
}
.lg-card{
  width:100%; height:100%; object-fit:fill; display:block;
  opacity:0; transform:translateY(12px) scale(.985);
  transition:opacity .45s ease-out, transform .45s ease-out;
}
.lg-card.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .lg-card{ transition:none; }
}
.login-card{
  position:relative; z-index:2; width:360px; max-width:100%; padding:30px 28px 22px;
  background:#fff; border:1px solid var(--line-soft); border-radius:12px;
  box-shadow:0 10px 34px rgba(20,30,50,.14); text-align:center;
}
/* 창 닫기 버튼 : 카드 우측 상단 모서리에 걸치는 둥근 버튼 */
.lg-close{
  position:absolute; top:-16px; right:-16px; z-index:3;
  width:46px; height:46px; padding:0; border-radius:50%;
  border:3px solid var(--accent); background:#111418; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(20,30,50,.30);
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.lg-close:hover{ background:#000; transform:scale(1.06); box-shadow:0 8px 22px rgba(20,30,50,.40); }
.lg-close:active{ transform:scale(.96); }
.lg-close:focus-visible{ outline:3px solid var(--accent-soft); outline-offset:2px; }
.lg-close svg{ width:20px; height:20px; display:block; }
.lg-close-hint{
  position:absolute; top:40px; right:-16px; z-index:3; width:236px;
  padding:9px 12px; border-radius:8px; background:#c62828; color:#fff;
  font-size:12px; line-height:1.5; text-align:left;
  box-shadow:0 6px 18px rgba(20,30,50,.30);
}
@media (max-width:440px){
  .lg-close{ top:8px; right:8px; width:40px; height:40px; border-width:2px; }
  .lg-close-hint{ top:54px; right:8px; width:auto; left:8px; }
}

.lg-badge{
  display:inline-block; margin-bottom:14px; padding:4px 14px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.04em;
}
.login-card h2{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.3px; }
.lg-sub{ margin:4px 0 22px; font-size:12px; color:var(--muted); letter-spacing:.06em; }

.lg-f{ display:block; text-align:left; margin-bottom:12px; }
.lg-f span{ display:block; margin-bottom:5px; font-size:12px; font-weight:700; color:#48505b; }
.lg-f input{
  width:100%; height:40px; padding:0 12px; font-size:14px;
  border:1px solid var(--line); border-radius:6px; background:#fcfdfe; outline:none;
}
.lg-f input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); }

.lg-keep{ display:flex; align-items:center; gap:6px; margin:2px 0 18px; font-size:12px; color:#48505b; cursor:pointer; }
.lg-keep input{ accent-color:var(--accent); cursor:pointer; }

.lg-btn{
  width:100%; height:44px; border:0; border-radius:6px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:800; letter-spacing:.06em;
  transition:filter .12s;
}
.lg-btn:hover{ filter:brightness(1.08); }
.lg-btn:active{ filter:brightness(.94); }

.lg-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:11px; line-height:1.7; color:#98a0ab;
}
.lg-foot b{ color:var(--accent); }

/* ---------- 좌측화면 폴딩 / 언폴딩 ---------- */
.split-btn{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  width:20px; height:34px; padding:0; border:1px solid #b9c0c9; border-radius:4px;
  background:#fff; color:#48505b; font-size:11px; line-height:1; box-shadow:0 1px 3px rgba(20,30,50,.14);
  display:flex; align-items:center; justify-content:center; z-index:5;
}
.split-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.splitter.locked{ cursor:default; }
.splitter.locked::before{ opacity:.35; }

.rail-only{ display:none; }
body.folded .rail-only{ display:block; text-align:center; margin-bottom:12px; }
.rail-brand{ font-size:15px; font-weight:800; letter-spacing:.02em; }
.rail-craft{
  margin-top:4px; padding:2px 0; border-radius:3px;
  background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:800;
}

body.folded{ --side-w:60px; }
body.folded .side{ padding:12px 4px 8px; }
body.folded .side-title,
body.folded .craft-pick,
body.folded .side-label,
body.folded .login-name,
body.folded .side-foot #sideClock{ display:none; }
body.folded .side-auth{ margin-bottom:12px; }
body.folded .btn-logout{ font-size:12px; letter-spacing:.02em; height:32px; }
body.folded .menu button{
  height:40px; font-size:11.5px; letter-spacing:0; text-indent:0; padding:0 1px;
}
body.folded .submenu{ margin-left:0; gap:5px; }
body.folded .submenu button.sub{ height:28px; font-size:11px; letter-spacing:0; }
body.folded .side-foot{ justify-content:center; }
body.folded .side-foot .ver{ font-size:9px; }

/* ---------- 환경설정 버튼 / 모달 ---------- */
.lg-btn.ghost{
  margin-top:8px; background:#fff; color:var(--accent);
  border:1px solid var(--line); font-size:13px; font-weight:700; height:38px; letter-spacing:0;
}
.lg-btn.ghost:hover{ background:var(--accent-soft); border-color:var(--accent); filter:none; }

.modal-back{
  position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.55);
  display:flex; align-items:flex-start; justify-content:center;   /* 화면 위쪽에 표시 */
  padding:5vh 20px 20px;
  overflow:auto;
}
.modal{
  width:420px; max-width:100%; background:#fff; border-radius:10px;
  box-shadow:0 16px 46px rgba(15,23,42,.30); overflow:hidden;
}
.modal-h{
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  font-size:15px; font-weight:800; color:var(--accent);
}
.modal-h span{ margin-left:8px; font-size:11px; font-weight:600; color:var(--muted); }
.modal-b{ padding:16px 18px; }

.modal-f-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.modal-f-row span{ width:92px; flex:0 0 92px; font-size:12px; font-weight:700; color:#48505b; }
.modal-f-row input{
  flex:1; min-width:0; height:34px; padding:0 10px; font-size:13px;
  border:1px solid var(--line); border-radius:5px; background:#fcfdfe; outline:none;
}
.modal-f-row input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); }

.modal-msg{
  margin:4px 0 10px; padding:8px 10px; border-radius:5px; font-size:12px; line-height:1.6;
  background:#f3f5f8; color:var(--muted); word-break:break-all;
}
.modal-msg.wait{ background:var(--accent-soft); color:var(--accent); }
.modal-msg.ok{ background:#e7f6ec; color:#1b7a3d; font-weight:700; }
.modal-msg.ng{ background:#fdecea; color:#b3261e; font-weight:700; }

.modal-f{ display:flex; align-items:center; gap:8px; padding:12px 18px; background:#fafbfc; border-top:1px solid var(--line-soft); }
.modal-f .tool-btn{ height:32px; padding:0 16px; font-size:13px; }
.tool-btn:disabled, .tool-btn.primary:disabled{
  background:#e9ebee; border-color:#c9ced6; color:#a7aeb7; cursor:not-allowed;
}
.tool-btn:disabled:hover{ background:#e9ebee; border-color:#c9ced6; color:#a7aeb7; }

/* ---------- 암호화 도구 / 암호화 필드 ---------- */
.crypto{ margin:10px 0 4px; padding:12px 12px 8px; border:1px solid var(--line-soft); border-radius:6px; background:#fafbfc; }
.crypto-h{ margin-bottom:10px; font-size:12px; font-weight:800; color:var(--accent); }
.crypto-btns{ display:flex; gap:6px; margin:0 0 10px 102px; }
.crypto-btns .tool-btn{ height:28px; padding:0 12px; font-size:12px; }
.crypto .modal-f-row input[readonly]{ background:#eef1f5; color:#1a56b8; font-weight:700; }
.crypto-msg{ margin-left:2px; font-size:11px; line-height:1.6; color:var(--muted); word-break:break-all; }
.crypto-msg.ok{ color:#1b7a3d; font-weight:700; }
.crypto-msg.ng{ color:#b3261e; font-weight:700; }

table.grid td.enc{ color:#8a6d1b; letter-spacing:.1em; cursor:pointer; user-select:none; }
.modal-f-row.chk input[type=checkbox]{
  width:16px; height:16px; flex:0 0 16px; accent-color:var(--accent); cursor:pointer;
}

/* 암호화키(개인) 항목 강조 */
.modal-f-row.keyrow span{ color:#c62828; }
.modal-f-row.keyrow input{ color:#c62828; font-weight:700; border-color:#e6a9a4; }
.modal-f-row.keyrow input:focus{ border-color:#c62828; box-shadow:0 0 0 3px #fdecea; }
.modal-f-row input:disabled{ background:#eef0f3; color:#a7aeb7; cursor:not-allowed; }

/* 암호화키 보기 토글 */
.key-eye{
  flex:0 0 30px; width:30px; height:34px; margin-left:-2px;
  border:1px solid var(--line); border-radius:5px; background:#fff; font-size:13px; line-height:1;
  opacity:.55;
}
.key-eye:hover{ opacity:1; border-color:#c62828; }
.key-eye.on{ opacity:1; background:#fdecea; border-color:#c62828; }
.modal.narrow{ width:340px; }

/* 로그인 사용자 표시 (UserID / UserName 2층) */
.login-name.in{ display:flex; flex-direction:column; line-height:1.2; text-align:center; }
.login-name .uid{ font-size:13px; font-weight:800; color:var(--accent); }
.login-name .uname{ font-size:11px; font-style:normal; color:#48505b; }

/* 로그인 오류 안내 */
.lg-msg{ display:none; }
.lg-msg.ng{
  display:block; margin:-4px 0 12px; padding:8px 10px; border-radius:5px;
  background:#fdecea; color:#b3261e; font-size:12px; font-weight:700; text-align:left;
}

/* ---------- 기능버튼 카테고리 (기준 · 생산 · 수업) ---------- */
.menu-group{ display:flex; align-items:stretch; gap:8px; }
.menu-cap{
  flex:0 0 34px; width:34px;                 /* 좌측화면 폭과 무관하게 고정 */
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:upright;
  border:1px solid var(--btn-bd); border-radius:12px; background:transparent;
  font-size:var(--btn-fs);                   /* 기능버튼과 같은 글자크기 */
  font-weight:800; letter-spacing:.22em; color:var(--btn-tx);
}
.menu-btns{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--btn-gap); }

/* 접힘(레일) 상태에서는 캡션 숨김 */
body.folded .menu-cap{ display:none; }
body.folded .menu-group{ gap:0; }

/* 좌측화면이 좁아져도 캡션 크기는 그대로, 간격만 줄인다 */
@container (max-width: 265px){ .menu-group{ gap:6px; } }
@container (max-width: 210px){ .menu-group{ gap:5px; } }
/* 접힘(레일) : 하단 버전 표기 숨김 (가로 넘침 방지) */
body.folded .side-foot{ display:none; }

/* 좌측화면 스크롤바를 얇게 (특히 접힘 레일에서 폭 확보) */
.side{ scrollbar-width:thin; scrollbar-color:#c3c9d2 transparent; }
.side::-webkit-scrollbar{ width:6px; }
.side::-webkit-scrollbar-thumb{ background:#c3c9d2; border-radius:3px; }
.side::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 툴바 그룹 (1층 + 2층을 한 테두리로) ---------- */
.toolbar-group{
  display:flex; align-items:stretch;
  border:1px solid var(--line-soft); background:#fafbfc; border-radius:4px; margin-bottom:6px;
}
.tg-rows{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.tg-side{                                   /* 1층+2층을 합친 자리 (이미지 도구) */
  flex:0 0 auto; display:flex; align-items:stretch; gap:6px;
  padding:3px 8px; border-left:1px dashed #dfe4ea;
}
.tg-side .opt{ align-self:center; }
.toolbar-group .toolbar{ border:0; background:transparent; margin:0; border-radius:0; padding:4px 8px; }
.toolbar-group .toolbar.row2{ margin-top:0; border-top:1px dashed #dfe4ea; }

/* ---------- 하단 2분할 (발주현황 / 거래처현황) ---------- */
.grid-wrap.half{ max-height:40vh; }
.split-bottom{ display:flex; gap:8px; margin-top:8px; align-items:stretch; }
.sp-panel{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  border:2px solid #2b6cb0; border-radius:3px; background:#fff;
}
.sp-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 8px; border-bottom:1px solid var(--line-soft); background:#fafbfc;
}
.sp-title{ font-size:13px; font-weight:800; color:var(--accent); white-space:nowrap; }
.sp-head .field select,.sp-head .field input[type=date]{ height:24px; }
.sp-body{ flex:1; min-height:120px; max-height:34vh; overflow:auto; }

table.grid.mini th, table.grid.mini td{ height:22px; font-size:11px; padding:2px 5px; }
table.grid.mini tr.total td{ background:#eef1f5; font-weight:800; }

/* 미니 그리드는 머리행이 한 줄이므로 맨 위에 고정 (헤더 위 빈 줄 제거) */
table.grid.mini thead tr.h2 th{ top:0; }

/* 하단 좌/우 크기조절 스플리터 */
.sp-splitter{
  flex:0 0 8px; align-self:stretch; position:relative;
  background:#e6e9ee; border-radius:3px; cursor:col-resize; touch-action:none;
}
.sp-splitter::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3px; height:40px; border-radius:2px;
  background:repeating-linear-gradient(#9aa3ae 0 2px, transparent 2px 5px);
}
.sp-splitter:hover, .sp-splitter.drag{ background:var(--accent-soft); }
.sp-splitter:hover::before, .sp-splitter.drag::before{
  background:repeating-linear-gradient(var(--accent) 0 2px, transparent 2px 5px);
}
.sp-splitter:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---------- 상/하 분할 레이아웃 + 수직 스플리터 ---------- */
.content.split{ display:flex; flex-direction:column; overflow:hidden; }
.content.split .grid-wrap.half{ flex:0 0 auto; max-height:none; }   /* 높이는 스플리터가 지정 */
.content.split .split-bottom{ flex:1 1 auto; min-height:140px; margin-top:0; }
.content.split .sp-body{ max-height:none; flex:1 1 auto; }

.v-splitter{
  flex:0 0 9px; height:9px; margin:4px 0; position:relative;
  background:#e6e9ee; border-radius:3px; cursor:row-resize; touch-action:none;
}
.v-splitter::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:3px; width:52px; border-radius:2px;
  background:repeating-linear-gradient(90deg,#9aa3ae 0 2px, transparent 2px 5px);
}
.v-splitter:hover, .v-splitter.drag{ background:var(--accent-soft); }
.v-splitter:hover::before, .v-splitter.drag::before{
  background:repeating-linear-gradient(90deg,var(--accent) 0 2px, transparent 2px 5px);
}
.v-splitter:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
body.resizing-v{ cursor:row-resize; user-select:none; }
.field .tilde{ color:var(--muted); font-size:12px; padding:0 1px; }
.field input[type=date]{ min-width:118px; }

/* 자료 출처 표시 (DB / 샘플) */
.src{
  padding:1px 8px; border-radius:10px; font-size:11px; font-weight:700; white-space:nowrap;
  border:1px solid var(--line);
}
.src.db{ background:#e7f6ec; color:#1b7a3d; border-color:#b7e0c4; }
.src.local{ background:#f2f4f7; color:#6b7480; }

/* [전체조회] 표시 */
.field input[type=text].all{ color:#98a0ab; font-weight:600; }

/* 추가 / 편집 입력창 */
.modal.wide{ width:620px; }
.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 14px; }
.form-row{ display:flex; align-items:center; gap:8px; }
.form-row > span:first-child{ width:84px; flex:0 0 84px; font-size:12px; font-weight:700; color:#48505b; text-align:right; }
.form-row .suffix, .form-row .inline-label{ width:auto; flex:0 0 auto; text-align:left; }
.form-row .note{ width:auto; flex:0 1 auto; min-width:0; text-align:left; }
.form-row input{
  flex:1; min-width:0; height:32px; padding:0 10px; font-size:13px;
  border:1px solid var(--line); border-radius:5px; background:#fcfdfe; outline:none;
}
.form-row input:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); }
.form-row input[readonly]{ background:#eef0f3; color:#6b7480; }
.modal-msg2{ font-size:12px; color:var(--muted); }
.modal-msg2.ng{ color:#b3261e; font-weight:700; }

/* 입력창 : 한 줄 전체 항목 · 콤보 · 비활성 항목 */
.form-row.full{ grid-column:1 / -1; }
.form-row select{
  flex:1; min-width:0; height:32px; padding:0 8px; font-size:13px;
  border:1px solid var(--line); border-radius:5px; background:#fcfdfe; outline:none;
}
.form-row select:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); }
.form-row select.pick{ flex:0 0 190px; margin-left:8px; }
.form-row input.off, .form-row input[disabled]{
  background:#eef0f3; color:#8a919e; cursor:not-allowed; -webkit-text-fill-color:#8a919e; opacity:1;
}
.modal-b.form-grid{ padding:16px 18px; }
.src.ng{ background:#fdecea; color:#b3261e; border-color:#e6a9a4; }

/* 선택용 칸(거래처) : 옅은 노란 바탕 */
table.grid tbody tr td.sel-cell,
table.grid tbody tr:nth-child(even) td.sel-cell{ background:#fffbe0; cursor:pointer; }
table.grid tbody tr:hover td.sel-cell{ background:#fff6c9; }
table.grid tbody tr.sel td.sel-cell,
table.grid tbody tr.focus td.sel-cell{ background:#f6efb8; }
/* 선택 표시는 고른 칸에만 : 나머지 칸에는 외곽선을 그리지 않는다 */
table.grid tbody tr.focus td.sel-cell{ box-shadow:inset 0 0 0 2px #4a8ee8; }
body.modal-open{ overflow:hidden; }          /* 모달이 열리면 뒤 화면 스크롤 잠금 */
.modal{ box-shadow:0 20px 60px rgba(15,23,42,.45); }

/* 화면에서 감추는 열 (정보 = SiteID_PW) */
table.grid th.col-hide, table.grid td.col-hide{ display:none; }

/* 사이트 ID / PW 입력줄 */
.form-row.idpw{ display:flex; align-items:center; gap:8px; }
.form-row.idpw .chk{
  display:flex; align-items:center; gap:5px; flex:0 0 auto;
  font-size:12px; font-weight:700; color:#48505b; white-space:nowrap; cursor:pointer;
}
.form-row.idpw .chk input{ width:16px; height:16px; flex:0 0 16px; accent-color:var(--accent); cursor:pointer; }
.form-row.idpw input[type=text]{ flex:1; min-width:0; }
/* 구분이 '사이트' 가 아닐 때 ID/PW 줄 흐리게 */
.form-row.idpw.off .chk{ color:#a7aeb7; cursor:not-allowed; }
.form-row.idpw.off .chk input{ cursor:not-allowed; }

/* ---------- 콤보박스 공통 : 지시가 없으면 밝은 회색 바탕 ---------- */
select,
.field select,
.form-row select,
.form-row select.pick,
.sp-head .field select,
.toolbar select,
.modal select{ background-color:var(--combo-bg); }
select:focus,
.field select:focus,
.form-row select:focus,
.modal select:focus{ background-color:#fff; }
select:disabled{ background-color:#e6e8ec; color:#a7aeb7; }
.tg-side .imgbox{ width:96px; height:auto; align-self:stretch; }

/* 입력창 : 안내문 · 좁은칸 · 단위 라벨 · 강조색 · 이미지 미리보기 */
.form-row .note{
  font-size:11px; color:#6b7480; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:100%;
}
.form-row .suffix{ font-size:11px; color:#6b7480; white-space:nowrap; }
.form-row input.narrow{ flex:0 0 110px; }
.form-row.red span{ color:#c62828; }
.form-row.red input{ color:#c62828; font-weight:700; border-color:#e6a9a4; }
.form-row.img-preview{ align-items:flex-start; }
.form-row.img-preview img{
  max-width:180px; max-height:120px; border:1px solid var(--line); border-radius:4px;
  background:#fff; padding:2px;
}

/* 입력창 : 폭 조정 · 같은 줄 배치 · 아래쪽 미리보기 */
.form-row input.halfw{ flex:0 0 calc((100% - 14px) / 2 - 92px); }   /* 콤보 한 칸과 같은 폭 */
.form-row input.third{ flex:0 0 125px; }
.form-row .tool-btn.grow{ flex:1 1 auto; height:32px; }
.form-row .inline-label{ flex:0 0 auto; margin-left:6px; font-size:12px; font-weight:700; color:#48505b; }
.form-row select{ flex:1 1 0; min-width:0; }
.form-row select.inline-combo{ flex:0 0 96px; }

.form-tail{
  grid-column:1 / -1; display:grid; grid-template-columns:300px 1fr;
  gap:8px 14px; align-items:stretch;
}
.ft-left{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ft-preview{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:5px; background:#fff; padding:6px; min-height:120px;
}
.ft-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.ft-preview{ min-height:170px; }
.form-row select.third{ flex:0 0 125px; }

/* 이미지번호 줄 : 선택한 파일명을 아랫줄에 표시 */
.form-row.imgrow{ flex-wrap:wrap; }
/* 이미지번호 : 입력칸을 줄인 만큼 [등록] 버튼을 넓힌다 (125+46 -> 80+91) */
.form-row.imgrow input.third{ flex:0 0 80px; }
.form-row.imgrow .tool-btn{ flex:0 0 91px; }
.form-row.imgrow .note{ flex:0 0 calc(100% - 92px); margin:2px 0 0 92px; }
.form-row input.ta-right{ text-align:right; }
.toolbar input.qty-in{ width:90px; height:24px; border:1px solid var(--line); border-radius:2px; padding:0 6px; text-align:right; }
.toolbar input.qty-in:disabled{ background:#eef0f3; color:#a7aeb7; }
.sp-head .field select{ min-width:0; width:65px; }              /* 집계구간 콤보 : 1/2 폭 */
.sp-head .field input.term{ min-width:0; width:118px; height:24px; padding:0 4px;
  border:1px solid var(--line); border-radius:2px;
  text-align:center; font-weight:700; color:var(--accent); }
.sp-head .field input.term:disabled{ background:#f3f5f8; color:var(--accent); opacity:1; }
.sp-head .field .tilde{ color:var(--muted); }
table.grid.mini tbody tr.blank td{ height:22px; }
.sp-head .sp-tail{ margin-left:auto; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.sp-msg{ padding:8px 10px; font-size:12px; color:var(--muted); }
.sp-head .field .sum{ margin-left:4px; }
.opt.red{ color:#c62828; font-weight:700; }
.opt.red input{ accent-color:#c62828; }

/* 노란 바탕을 쓰는 칸(선택칸 · 입력대상칸 · 입력행)은 굵은 글씨로 */
table.grid tbody td.sel-cell,
table.grid tbody td.edit,
table.grid tr.input-row td,
table.grid tr.input-row td input{ font-weight:700; }