/* 통합관리 웹 공용 셸 — 목업(docs/목업/20260729-local-top-tabs) 기준.
   상단 업무 탭, 기본 컨트롤 모양, 상태 배지, 하단 상태바를 모든 화면이 공유한다.
   화면별 고유 스타일은 각 HTML에 그대로 두고, 여기서는 껍데기만 맞춘다. */

:root {
  /* 색 — 본문·보조·경계를 3단계로만 쓴다. 대비는 본문 12.6:1, 보조 5.4:1. */
  --shell-ink: #17212b;
  --shell-ink-2: #46586a;
  /* 보조 글자는 흰 면·페이지 배경·연한 줄 위에 모두 올라간다.
     #64748b는 페이지 배경에서 4.39:1로 미달이라 한 단계 진하게 잡았다. */
  --shell-muted: #5a6878;
  --shell-line: #dce3ea;
  --shell-line-soft: #edf1f5;
  --shell-bg: #f4f6f8;
  --shell-surface: #fff;

  --shell-blue: #1764d8;
  --shell-blue-dark: #1152b8;
  --shell-blue-soft: #e8f1fd;
  --shell-green: #146c47;
  --shell-green-soft: #e6f5ee;
  --shell-amber: #8a4d00;
  --shell-amber-soft: #fdf0d8;
  --shell-red: #b4271c;
  --shell-red-soft: #fdeceb;

  /* 여백 — 4px 배수 한 가지 리듬만 쓴다. */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 22px;

  --radius: 6px;
  --control-h: 32px;
  --shadow-pop: 0 10px 28px rgba(23, 38, 53, .16);
}

/* 어두운 테마 — 토큰만 바꾼다. 화면마다 색을 다시 적으면 한 화면만 어두워진다.
   대비는 밝은 테마와 같은 기준(본문 12:1 이상, 보조 4.5:1 이상)을 지킨다. */
:root[data-theme="dark"] {
  --shell-ink: #e6edf5;
  --shell-ink-2: #b6c4d4;
  --shell-muted: #93a3b5;
  --shell-line: #33445a;
  --shell-line-soft: #26364a;
  --shell-bg: #0f172a;
  --shell-surface: #16223a;

  --shell-blue: #7fb0ff;
  --shell-blue-dark: #a3c6ff;
  --shell-blue-soft: #1b2b4d;
  --shell-green: #6ddaa8;
  --shell-green-soft: #12352a;
  --shell-amber: #f0c179;
  --shell-amber-soft: #3a2c12;
  --shell-red: #ff9a91;
  --shell-red-soft: #3d1e1c;
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] body { background: var(--shell-bg); color: var(--shell-ink); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] dialog {
  background: var(--shell-surface);
  color: var(--shell-ink);
  border-color: var(--shell-line);
}
:root[data-theme="dark"] th { background: var(--shell-line-soft); color: var(--shell-ink); }
:root[data-theme="dark"] .server-header { background: var(--shell-surface); }
:root[data-theme="dark"] .server-tabs a { color: var(--shell-ink-2); }
:root[data-theme="dark"] .server-tabs a:hover { background: var(--shell-line-soft); color: var(--shell-ink); }
:root[data-theme="dark"] .server-footer { background: var(--shell-surface); }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--shell-bg);
  color: var(--shell-ink);
  font: 14px "Segoe UI", "Malgun Gothic", sans-serif;
}

/* 화면마다 제각각이던 옛 제목·링크 줄은 상단 탭으로 대체한다. */
body > h1 { display: none; }

button, input, select, textarea {
  border: 1px solid var(--shell-line);
  border-radius: var(--radius);
  background: var(--shell-surface);
  color: var(--shell-ink);
  font: inherit;
  font-size: 12px;
}
button, input:not([type="checkbox"]):not([type="radio"]), select { height: var(--control-h); }
button {
  padding: 0 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { border-color: var(--shell-ink-2); background: var(--shell-line-soft); }
button:active:not(:disabled) { background: var(--shell-line-soft); }
button:disabled {
  border-color: var(--shell-line-soft);
  background: var(--shell-line-soft);
  color: var(--shell-muted);
  cursor: not-allowed;
}
button.primary { border-color: var(--shell-blue); background: var(--shell-blue); color: var(--shell-surface); }
/* 주의가 필요하지만 파괴적이지는 않은 작업(정리·복구). danger와 구분한다. */
button.warn { border-color: var(--shell-amber); background: var(--shell-amber-soft); color: var(--shell-amber); }
button.warn:hover:not(:disabled) { border-color: var(--shell-amber); background: var(--shell-amber); color: var(--shell-surface); }
button.primary:hover:not(:disabled) { background: var(--shell-blue-dark); border-color: var(--shell-blue-dark); }
button.danger { border-color: var(--shell-red); background: var(--shell-red-soft); color: var(--shell-red); }
button.danger:hover:not(:disabled) { background: var(--shell-red-soft); border-color: var(--shell-red); }

/* 마우스로 누를 때는 은은한 링, 키보드로 이동했을 때는 진한 링.
   입력칸의 outline:0이 :focus-visible을 덮지 않도록 뒤에 둔다. */
input:focus, select:focus, textarea:focus {
  border-color: var(--shell-blue);
  box-shadow: 0 0 0 3px rgba(23, 100, 216, .14);
  outline: 0;
}
:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--shell-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(23, 100, 216, .22);
}
/* 표 안에서는 링이 옆 칸을 가리므로 안쪽으로 그린다. */
td:focus-visible, th:focus-visible { outline-offset: -2px; box-shadow: none; }
input[type="checkbox"] { width: 15px; height: 15px; padding: 0; accent-color: var(--shell-blue); }
::placeholder { color: var(--shell-muted); }

/* ---------------------------------------------------------- 상단 업무 탭 */
.server-header {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: stretch;
  padding: 0 22px;
  background: var(--shell-surface);
  border-bottom: 1px solid var(--shell-line);
}
.server-tabs { min-width: 0; display: flex; align-items: stretch; overflow-x: auto; }
.server-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-bottom: 3px solid transparent;
  color: var(--shell-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.server-tabs a.dragging { opacity: .45; cursor: grabbing; }
.nav-drag-handle { color: var(--shell-muted); cursor: grab; font-size: 13px; letter-spacing: -2px; line-height: 1; user-select: none; }
.nav-drag-handle:active { cursor: grabbing; }
.server-tabs a.nav-drop-target { outline: 2px dashed var(--shell-blue); outline-offset: -3px; }
.nav-drop-placeholder { flex: 0 0 auto; width: 4px; height: 30px; margin: 8px 1px; border-radius: 3px; background: var(--shell-blue); }
.server-tabs a:hover { background: var(--shell-line-soft); color: var(--shell-blue-dark); }
.server-tabs a.active { color: var(--shell-blue); border-bottom-color: var(--shell-blue); }
.server-tabs a.nav-next { margin-left: auto; color: var(--shell-muted); font-weight: 500; }
.server-tabs a.nav-next:hover { color: var(--shell-blue-dark); }
.server-navigation-menu {
  position: fixed;
  z-index: 1100;
  min-width: 150px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 5px;
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15,23,42,.16);
}
.server-navigation-menu button {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--shell-ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.server-navigation-menu button:hover { background: var(--shell-line-soft); color: var(--shell-blue); }
/* 시트류 공통: 엑셀처럼 가로·세로 격자선(사용자 지시 v0.3.47). */
.tabulator .tabulator-cell { border-right: 1px solid var(--shell-line-soft); }
.tabulator .tabulator-header .tabulator-col { border-right: 1px solid var(--shell-line); }
.server-tabs svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--shell-red);
  color: var(--shell-surface);
  font-size: 10px;
  font-weight: 700;
}

/* 그룹 안의 보조 화면은 상단 업무 탭과 분리해 같은 줄에서 전환한다. */
.server-context-nav {
  min-height: 36px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 22px;
  overflow-x: auto;
  background: var(--shell-line-soft);
  border-bottom: 1px solid var(--shell-line);
}
.server-context-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--shell-ink-2);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.server-context-nav a:hover { color: var(--shell-blue-dark); background: var(--shell-surface); }
.server-context-nav a.active { color: var(--shell-blue); border-bottom-color: var(--shell-blue); background: var(--shell-surface); }
.server-context-nav svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* sidebar placement keeps header and content in separate fixed/flow areas. */

/* ------------------------------------------------------ 화면 제목 줄 */
.page-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 22px 0;
}
.page-head h2 { margin: 0; font-size: 15px; }
.page-head p { margin: 0; color: var(--shell-muted); font-size: 12px; }

/* -------------------------------------------------- 작업 화면 공통 골격
   상품 데이터 화면과 같은 리듬: 흰 도구막대 → 안내줄 → 본문.
   화면마다 padding을 다르게 주면 탭 아래 여백이 제각각으로 보인다. */
.work-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
  padding: 12px 22px;
  background: var(--shell-surface);
  border-bottom: 1px solid var(--shell-line);
}
.work-bar .spacer { flex: 1; }
.work-note {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  min-height: 38px;
  padding: 0 22px;
  background: var(--shell-surface);
  border-bottom: 1px solid var(--shell-line);
  color: var(--shell-muted);
  font-size: 12px;
}

/* Tabulator 공통 열 너비 도구 */
.tm-column-width-tools { position: relative; display: inline-flex; flex: 0 0 auto; }
.tm-column-width-trigger { white-space: nowrap; }
.tm-column-width-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: auto; right: 0;
  display: flex; align-items: center; gap: 6px; min-width: 290px;
  padding: 9px; border: 1px solid var(--shell-line); border-radius: var(--radius);
  background: var(--shell-surface); box-shadow: var(--shadow-pop); white-space: nowrap;
}
.tm-column-width-panel[hidden] { display: none; }
.tm-column-width-panel label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--shell-ink-2); }
.tm-column-width-panel input { width: 66px; height: 28px; padding: 0 6px; }
.tm-column-width-panel button { height: 28px; padding: 0 8px; }
.tm-column-width-panel button.primary { border-color: var(--shell-blue); background: var(--shell-blue); color: var(--shell-surface); }
.tm-column-width-panel button.primary:hover:not(:disabled) { background: var(--shell-blue-dark); border-color: var(--shell-blue-dark); }
#rtHsLocal .tm-column-width-panel button.primary { border-color: var(--shell-blue); background: var(--shell-blue); color: var(--shell-surface); }
#rtHsLocal .tm-column-width-panel button.primary:hover:not(:disabled) { background: var(--shell-blue-dark); border-color: var(--shell-blue-dark); }
.tm-column-width-panel small { color: var(--shell-muted); font-size: 10px; }
.tm-column-width-close { font-size: 16px; line-height: 1; padding: 0 5px !important; }
@media (max-width: 700px) {
  .tm-column-width-panel { left: auto; right: 0; min-width: 260px; flex-wrap: wrap; white-space: normal; }
}
.work-body { padding: var(--gap-4) 22px; }

/* ------------------------------------------------------------------- 표
   상품 데이터 화면과 같은 밀도·상태 표현을 모든 화면 표에 적용한다.
   세로 줄을 빼고 가로 줄만 남기면 격자보다 행이 먼저 읽힌다. */
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td {
  height: 34px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid var(--shell-line-soft);
  text-align: left;
  vertical-align: middle;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--shell-line-soft);
  border-bottom: 1px solid var(--shell-line);
  color: var(--shell-ink-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
tbody tr:hover td { background: var(--shell-blue-soft); }
tbody tr:nth-child(even) td { background: transparent; }   /* 얼룩무늬 대신 hover */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 편집 가능한 칸 — 평소엔 조용하고, 손을 올리거나 초점이 가면 드러난다.
   상시 노란 배경은 표 전체를 시끄럽게 만든다. */
td.edit, td span.val, td [contenteditable] {
  background: transparent;
  cursor: text;
  border-radius: 3px;
}
td.edit:hover, td span.val:hover, td [contenteditable]:hover {
  background: var(--shell-amber-soft);
  box-shadow: inset 0 0 0 1px var(--shell-amber);
}
td.edit:focus, td span.val:focus, td [contenteditable]:focus {
  background: var(--shell-surface);
  box-shadow: inset 0 0 0 2px var(--shell-blue);
  outline: 0;
}

/* 표를 담는 상자 — 화면마다 제각각이던 테두리·그림자를 하나로. */
.wrap, .table-wrap, .panel, section.card {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: 8px;
  overflow: auto;
}

/* ------------------------------------------------------------------- 폼 */
label { color: var(--shell-ink-2); font-size: 12px; }
h2 { margin: 0 0 var(--gap-2); font-size: 14px; }
h3 { margin: 0 0 var(--gap-2); font-size: 12.5px; color: var(--shell-ink-2); }
.note, .hint { color: var(--shell-muted); font-size: 12px; }

/* 빈 상태 — 빈 표만 남기지 않는다. */
.sheet-empty, .empty-state {
  padding: 46px 20px;
  color: var(--shell-muted);
  font-size: 12.5px;
  text-align: center;
}
.sheet-empty strong, .empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--shell-ink);
  font-size: 13px;
}

/* ------------------------------------------------------------ 상태 배지 */
.status-chip {
  display: inline-flex;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-chip.good { background: var(--shell-green-soft); color: var(--shell-green); }
.status-chip.warn { background: var(--shell-amber-soft); color: var(--shell-amber); }
.status-chip.info { background: var(--shell-blue-soft); color: var(--shell-blue); }
.status-chip.pending { background: var(--shell-line-soft); color: var(--shell-ink-2); }

/* ------------------------------------------- 영향 확인 다이얼로그 */
.impact-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: var(--gap-5);
  border: 1px solid var(--shell-line);
  border-radius: 10px;
  border-top: 3px solid var(--shell-blue);
  box-shadow: var(--shadow-pop);
  color: var(--shell-ink);
}
.impact-dialog.danger { border-top-color: var(--shell-red); }
.impact-dialog::backdrop { background: rgba(16, 27, 38, .42); }
.impact-dialog h2 { margin: 0 0 var(--gap-2); font-size: 15px; }
.impact-target {
  margin: 0 0 var(--gap-3);
  padding: var(--gap-2) var(--gap-3);
  background: var(--shell-bg);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
}
.impact-external {
  margin: 0 0 var(--gap-3);
  padding: var(--gap-2) var(--gap-3);
  background: var(--shell-amber-soft);
  border-radius: var(--radius);
  color: var(--shell-amber);
  font-size: 12px;
  font-weight: 700;
}
.impact-list {
  margin: 0 0 var(--gap-4);
  padding-left: 18px;
  color: var(--shell-ink-2);
  font-size: 12.5px;
  line-height: 1.75;
}
.impact-actions { display: flex; justify-content: flex-end; gap: var(--gap-2); }
.impact-actions button { height: 34px; padding: 0 16px; }

/* --------------------------------------------------------- 하단 상태바 */
.server-footer {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--shell-surface);
  border-top: 1px solid var(--shell-line);
  color: var(--shell-ink-2);
  font-size: 12px;
}
/* 10px 작은 글씨라 대비를 더 확보한다(#83909c는 3.26:1로 미달이었다). */
.server-footer small { color: var(--shell-muted); font-size: 11px; }
.server-footer .ok-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--shell-green);
}
/* 정상 상태에서는 화면을 차지하지 않는다. 오류 상태 표시가 필요할 때만 별도 노출한다. */
.server-footer { display: none; }

@media (max-width: 1200px) {
  .server-header { padding: 0 12px; }
  .server-tabs a { padding: 0 12px; }
  .server-context-nav { padding: 0 12px; }
  .page-head { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 760px) {
  :root[data-shell-has-sidebar="1"] .server-tabs a { padding-left: 10px; padding-right: 10px; }
}

/* Cross-region menu drop targets. Sidebar appears when it has items or while dragging. */
.server-sidebar { display: none; }
.server-sidebar-tabs { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.server-sidebar-tabs a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border-left: 3px solid transparent; color: var(--shell-ink); font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.server-sidebar-tabs a:hover { background: var(--shell-line-soft); color: var(--shell-blue-dark); }
.server-sidebar-tabs a.active { color: var(--shell-blue); border-left-color: var(--shell-blue); }
.server-sidebar-tabs svg { width: 15px; height: 15px; flex: 0 0 auto; }
.server-sidebar-tabs:empty::before { content: "사이드바로 드롭"; display: grid; place-items: center; min-height: 42px; margin: 10px 12px; border: 2px dashed var(--shell-blue); border-radius: var(--radius); color: var(--shell-blue); font-size: 12px; }
:root[data-shell-has-sidebar="1"] body { padding-left: 248px; }
:root[data-shell-dragging="1"] body { padding-left: 0; }
:root[data-shell-has-sidebar="1"] .server-sidebar,
:root[data-shell-dragging="1"] .server-sidebar {
  display: block; position: fixed; z-index: 21; top: 12px; bottom: 12px; left: 12px; width: 224px;
  overflow-y: auto; background: var(--shell-surface); border: 1px solid var(--shell-line);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(15,23,42,.08);
}
:root[data-shell-dragging="1"] .server-sidebar { top: 58px; }
:root[data-shell-has-sidebar="1"] .server-header,
:root[data-shell-dragging="1"] .server-header {
  position: sticky; inset: auto; width: auto; height: 46px; min-height: 46px;
  flex-direction: row; padding: 0 22px; overflow: visible;
}
:root[data-shell-has-top="0"] .server-header { display: none; }
:root[data-shell-dragging="1"] .server-header { display: flex; }
:root[data-shell-has-top="0"] .server-tabs:empty::before { content: "상단 메뉴로 드롭"; display: grid; place-items: center; min-width: 180px; height: 32px; margin: 7px; border: 2px dashed var(--shell-blue); border-radius: var(--radius); color: var(--shell-blue); font-size: 12px; }
:root[data-shell-has-top="0"] .server-tabs { flex: 1; }

@media (max-width: 760px) {
  :root[data-shell-has-sidebar="1"] body,
  :root[data-shell-dragging="1"] body { padding-left: 208px; }
  :root[data-shell-has-sidebar="1"] .server-sidebar,
  :root[data-shell-dragging="1"] .server-sidebar { width: 184px; }
  .server-sidebar-tabs a { padding-left: 10px; padding-right: 10px; }
}

/* 어두운 테마에서는 강조색이 밝은 톤이라 흰 글자를 얹으면 대비가 무너진다.
   글자를 어두운 배경색으로 뒤집는다. */
:root[data-theme="dark"] button.primary { color: var(--shell-bg); }
:root[data-theme="dark"] button.warn:hover:not(:disabled) { color: var(--shell-bg); }
:root[data-theme="dark"] .server-footer .ok-dot { background: var(--shell-green); }

/* ------------------------------------------------------------ 결과 알림
   화면을 막지 않는다. 오른쪽 아래에 쌓이고 스스로 사라진다. */
.toast-box {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 46px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-2);
  padding: 10px 12px;
  border: 1px solid var(--shell-line);
  border-left: 3px solid var(--shell-blue);
  border-radius: var(--radius);
  background: var(--shell-surface);
  box-shadow: var(--shadow-pop);
  color: var(--shell-ink);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-line;
  pointer-events: auto;
  animation: toast-in .16s ease-out;
}
.toast.ok { border-left-color: var(--shell-green); }
.toast.error { border-left-color: var(--shell-red); }
.toast-close {
  flex: 0 0 auto;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: var(--shell-muted);
  font-size: 15px;
  line-height: 1;
}
.toast-close:hover:not(:disabled) { background: transparent; color: var(--shell-ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }