/* 사무용 레이아웃 — 좌측 사이드바 + 상단바 + 본문
 *
 * 화면 53개는 각자 완전한 HTML 문서이고 저마다 <style> 을 품고 있다.
 * 그래서 이 파일은 마지막에 로드되고, 레이아웃을 잡는 몇 군데만 !important 를 쓴다.
 * 색·글꼴 같은 표현은 화면 쪽이 이기도록 두어, 기존 화면이 망가지지 않게 한다.
 *
 * 표가 많은 업무라 여백을 넉넉히 두지 않았다. 세로 공간을 본문에 몰아준다.
 */

:root {
    --sb-w: 224px;          /* 사이드바 펼침 */
    --sb-w-min: 52px;       /* 접힘 — 아이콘만 */
    --top-h: 46px;
    --gap: 14px;            /* 본문이 사이드바·상단바에서 떨어지는 간격 */

    /* 현황판·시뮬레이터가 쓰던 값을 전역으로 올린다. 화면마다 따로 정의하면
       조금씩 어긋나므로 한 곳에서 관리한다. */
    --sj-blue: #00489C;
    --sj-lime: #B4CC30;
    --sj-ink: #1B2430;      /* 본문 글자 */
    --sj-muted: #6B7785;    /* 보조 글자 */
    --sj-line: #E3E8EE;     /* 구획선 */
    --sj-bg: #F4F6F8;       /* 바탕 */
    --sj-surface: #FFFFFF;  /* 패널 */
    --sj-radius: 10px;
    --sb-bg: #17212F;       /* 남색 계열. 브랜드색(#00489C)보다 어둡게 깔아 본문을 살린다 */
    --sb-bg-hover: #22303F;
    --sb-fg: #C7D2DE;
    --sb-fg-dim: #8A9BAE;
    --sb-active: #B4CC30;   /* 라임 — 활성 표시에만 쓴다 */
}

/* ── 본문 자리 확보 ───────────────────────────────── */
/* 사이드바·상단바가 차지한 만큼 밀어내고, 거기에 숨 쉴 여백을 더한다.
   폭만큼만 밀면 콘텐츠가 사이드바에 딱 붙어 답답하다. */
body {
    /* 네 방향을 한 번에 정해 모든 화면의 여백을 같게 만든다.
       좌·상만 지정하면 화면이 저마다 가진 padding 이 우·하에 남아 어긋난다. */
    padding: calc(var(--top-h) + var(--gap)) var(--gap) var(--gap)
             calc(var(--sb-w) + var(--gap)) !important;
    background: var(--sj-bg);
    color: var(--sj-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Pretendard", "Malgun Gothic", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    transition: padding-left .16s ease;
}
body.sj-side-min {
    padding-left: calc(var(--sb-w-min) + var(--gap)) !important;
}

/* sj-boot.html 이 html 에 새겨두는 표식.
   body 와 JS 가 준비되기 전에 이미 좁은 폭으로 그려, 펼쳐졌다 접히는
   출렁임을 없앤다. 아래 규칙들은 body.sj-side-min 과 짝을 이룬다. */
:root.sj-pre-min body { padding-left: calc(var(--sb-w-min) + var(--gap)) !important; }
:root.sj-pre-min .sj-side { width: var(--sb-w-min); }
:root.sj-pre-min .sj-top { left: var(--sb-w-min); }
:root.sj-pre-min .sj-brand-txt,
:root.sj-pre-min .sj-g-btn span,
:root.sj-pre-min .sj-g-items { display: none; }
:root.sj-pre-min .sj-g-btn { justify-content: center; padding: 10px 0; }
:root.sj-pre-min .sj-side-head { padding: 0; justify-content: center; }
:root.sj-pre-min .sj-side-toggle { display: none; }

/* 전환 애니메이션은 사용자가 토글할 때만 의미가 있다. 페이지가 처음 그려질
   때 동작하면 그것 자체가 번쩍임으로 보인다. */
.sj-side, .sj-top, body { transition: none; }
body.sj-ready .sj-side,
body.sj-ready .sj-top,
body.sj-ready { transition: width .16s ease, left .16s ease, padding-left .16s ease; }

/* 로그인 등 레이아웃이 없는 화면은 제외.
   header.html 을 include 하는 이상 사이드바 마크업은 들어오므로 감춘다. */
body.sj-bare { padding-left: 0 !important; padding-top: 0 !important; }
body.sj-bare .sj-side,
body.sj-bare .sj-top { display: none !important; }

/* ── 사이드바 ─────────────────────────────────────── */
.sj-side {
    /* 메뉴는 읽고 누르는 곳이지 글자를 고르는 곳이 아니다.
       기본값(auto)이면 글자 위에서 I 자 커서가 떠 눌러도 되는지 헷갈린다.
       화면마다 실리는 CSS 가 많아 !important 로 못 박는다. */
    cursor: default !important;
    user-select: none;
    -webkit-user-select: none;

    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sb-w);
    background: var(--sb-bg);
    color: var(--sb-fg);
    display: flex; flex-direction: column;
    z-index: 1040;
    transition: width .16s ease;
    overflow: hidden;
}
body.sj-side-min .sj-side { width: var(--sb-w-min); }

.sj-side-head {
    height: var(--top-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex: 0 0 auto;
}
.sj-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; overflow: hidden; cursor: pointer; }
.sj-brand img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.sj-brand-txt {
    color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap;
    letter-spacing: -.3px; line-height: 1.3;
}
body.sj-side-min .sj-brand-txt { display: none; }

.sj-side-toggle {
    background: none; border: 0; padding: 6px; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto;
}
.sj-side-toggle span { display: block; width: 14px; height: 1.5px; background: var(--sb-fg-dim); }
.sj-side-toggle:hover span { background: #fff; }
body.sj-side-min .sj-side-head { padding: 0; justify-content: center; }
body.sj-side-min .sj-side-toggle { display: none; }
body.sj-side-min .sj-brand { justify-content: center; width: 100%; }

/* ── 메뉴 ─────────────────────────────────────────── */
.sj-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 0 16px; }
.sj-nav::-webkit-scrollbar { width: 6px; }
.sj-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.sj-g { }
.sj-g-btn {
    width: 100%; background: none; border: 0; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; color: var(--sb-fg);
    font-size: 14px; text-align: left; white-space: nowrap;

    /* <button> 은 body 글꼴을 물려받지 않고 브라우저 기본값을 쓴다.
       같은 메뉴인데 그룹은 button, '현황판·시뮬레이터' 는 a 라서
       글꼴이 서로 달랐다. inherit 로 맞춘다. */
    font-family: inherit;
    /* 두께를 고정한다. 펼침 상태에서 색만 밝아지는데도 글자가 굵어진 것처럼
       보여 크기가 변한 느낌을 준다. */
    font-weight: 500;

    /* ⚠ 줄높이를 고정한다. 화면마다 body 값이 달라(현황판 1.5, 시뮬레이터 1.55)
       그대로 상속하면 같은 메뉴인데 화면을 옮길 때마다 높이가 미세하게 달라진다. */
    line-height: 1.4;
    min-height: 40px;      /* 아이콘 폰트가 늦게 뜰 때의 출렁임까지 막는다 */
}
.sj-g-btn i {
    width: 17px; text-align: center; font-size: 14px; line-height: 1;
    color: var(--sb-fg-dim); flex: 0 0 auto;
}
.sj-g-btn:hover { background: var(--sb-bg-hover); color: #fff; text-decoration: none; }
.sj-g-btn:hover i { color: var(--sb-active); }
.sj-g.open > .sj-g-btn { color: #fff; font-weight: 500; }
.sj-g.open > .sj-g-btn i { color: var(--sb-active); }

/* 접힘 상태 — 아이콘만 */
body.sj-side-min .sj-g-btn span { display: none; }
body.sj-side-min .sj-g-btn { justify-content: center; padding: 10px 0; }
body.sj-side-min .sj-g-items { display: none !important; }

.sj-g-items { display: none; padding-bottom: 4px; }
.sj-g.open > .sj-g-items { display: block; }

/* sj-boot.html 이 새긴 표식. 펼쳐둔 그룹을 CSS 가 첫 그리기부터 펼쳐 그린다.
   JS 를 기다리면 그 사이에 닫힌 모습이 보인다. */
:root.sj-open-1 .sj-g[data-g="1"] > .sj-g-items { display: block; }
:root.sj-open-2 .sj-g[data-g="2"] > .sj-g-items { display: block; }
:root.sj-open-3 .sj-g[data-g="3"] > .sj-g-items { display: block; }
:root.sj-open-4 .sj-g[data-g="4"] > .sj-g-items { display: block; }
:root.sj-open-5 .sj-g[data-g="5"] > .sj-g-items { display: block; }
:root.sj-open-6 .sj-g[data-g="6"] > .sj-g-items { display: block; }
:root.sj-open-9 .sj-g[data-g="9"] > .sj-g-items { display: block; }

.sj-g-items a {
    cursor: pointer;
    display: block; padding: 8px 12px 8px 40px;
    color: var(--sb-fg-dim); font-size: 13.5px; text-decoration: none; white-space: nowrap;
    border-left: 2px solid transparent;
    line-height: 1.4;      /* 그룹 버튼과 같은 이유로 고정 */
}
/* 활성 항목이 굵어지면서 줄이 밀리지 않게, 두께 대신 색과 선으로만 구분한다 */
.sj-g-items a.on { font-weight: 500; }
.sj-g-items a:hover { background: var(--sb-bg-hover); color: #fff; text-decoration: none; }
.sj-g-items a.on {
    color: #fff; background: rgba(180,204,48,.10);
    border-left-color: var(--sb-active);
}

/* 권한 없는 메뉴는 JS 가 숨긴다. 기본은 감춰두고 허용된 것만 보여준다 */
.sj-g-items a[data-sm] { display: none; }
.sj-g-items a[data-sm].ok { display: block; }
.sj-g.empty { display: none; }

/* ── 상단바 ───────────────────────────────────────── */
.sj-top {
    user-select: none;
    -webkit-user-select: none;

    position: fixed; top: 0; right: 0; left: var(--sb-w);
    height: var(--top-h);
    background: #fff; border-bottom: 1px solid #E3E8EE;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; z-index: 1030;
    transition: left .16s ease;
}
body.sj-side-min .sj-top { left: var(--sb-w-min); }

.sj-crumb {
    font-size: 14.5px; color: #1B2430; font-weight: 700; letter-spacing: -.3px;
    white-space: nowrap; flex: 0 0 auto;
}
.sj-crumb .sep { color: #B4BDC7; margin: 0 6px; font-weight: 400; }
.sj-crumb .grp { color: #6B7785; font-weight: 400; }

/* 페이지가 채우는 가운데 영역. 비어 있으면 자리를 차지하지 않는다. */
.sj-top-slot {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    margin: 0 16px; overflow: hidden;
}
.sj-top-slot:empty { margin: 0; }
.sj-top-slot .meta {
    font-size: 12px; color: #6B7785; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sj-top-slot .act {
    margin-left: auto; flex: 0 0 auto;
    border: 0; border-radius: 4px; cursor: pointer;
    background: #00489C; color: #fff;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}
.sj-top-slot .act:hover { background: #00356F; }

.sj-clock {
    flex: 0 0 auto;
    margin-right: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sj-ink);
    white-space: nowrap;
    /* 숫자 폭을 고정한다. 안 그러면 초가 바뀔 때마다 글자 너비가 달라져
       시계가 좌우로 흔들린다. */
    font-variant-numeric: tabular-nums;
}
.sj-clock .date { color: var(--sj-muted); font-weight: 600; margin-right: 6px; }

.sj-top-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sj-top-btn {
    cursor: pointer;
    width: 30px; height: 30px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #6B7785; font-size: 14px; text-decoration: none;
}
.sj-top-btn:hover { background: #F0F2F5; color: #1B2430; text-decoration: none; }

.sj-user { position: relative; margin-left: 4px; }
.sj-user-btn {
    background: none; border: 1px solid #E3E8EE; border-radius: 4px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; font-size: 12.5px; color: #1B2430;
}
.sj-user-btn:hover { background: #F0F2F5; }
.sj-user-btn i { font-size: 10px; color: #8A9BAE; }
.sj-user-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 132px; background: #fff;
    border: 1px solid #E3E8EE; border-radius: 4px;
    box-shadow: 0 4px 12px rgba(27,36,48,.10);
    padding: 4px 0; z-index: 1050;
}
.sj-user-menu.open { display: block; }
.sj-user-menu a {
    cursor: pointer;
    display: block; padding: 7px 12px; font-size: 12.5px; color: #1B2430; text-decoration: none;
}
.sj-user-menu a:hover { background: #F4F6F8; text-decoration: none; }

/* ── 본문 여백 ────────────────────────────────────── */
/* 기존 화면은 iframe 안에 꽉 차게 그려지는 전제였다. 이제 페이지로 열리므로
   최소한의 여백만 준다. 화면 자체 스타일을 건드리지 않는다. */
.sj-page { padding: 14px 16px; }

@media (max-width: 991px) {
    body { padding-left: calc(var(--sb-w-min) + var(--gap)) !important; }
    .sj-side { width: var(--sb-w-min); }
    .sj-side .sj-brand-txt, .sj-side .sj-g-btn span, .sj-side .sj-g-items { display: none !important; }
    .sj-top { left: var(--sb-w-min); }
}

/* ═══════════════════════════════════════════════════════════
   공통 컴포넌트 — 현황판·시뮬레이터와 톤을 맞춘다

   MES 화면 53개는 부트스트랩 기본 모양이라, 현황판(자체 스타일)과 나란히
   보면 다른 제품처럼 느껴진다. 구조는 건드리지 않고 색·모서리·글자만
   맞춰 한 묶음으로 읽히게 한다.

   ⚠ 화면마다 <style> 을 품고 있어 이 파일이 뒤에 와야 적용된다.
     header.html 에서 마지막에 싣는 이유가 이것이다.
   ═══════════════════════════════════════════════════════════ */

/* ── 패널·카드 ─────────────────────────────── */
.card, .content-table, .panel {
    background: var(--sj-surface);
    border: 1px solid var(--sj-line);
    border-radius: var(--sj-radius);
    box-shadow: none;
}

/* ── 표 ────────────────────────────────────── */
.table { font-size: 12.5px; color: var(--sj-ink); margin-bottom: 0; }
/* 표 머리글은 사이드바와 같은 남색. 화면 좌측과 표 위쪽이 같은 색으로
   맞물려 한 덩어리로 읽힌다. */
.table thead td, .table thead th {
    background: var(--sb-bg) !important;
    color: #E8EDF3 !important;
    font-weight: 600;
    border-bottom: 0 !important;
    border-top: 0 !important;
    padding: 8px !important;
    white-space: nowrap;
}
/* 표가 카드 안에서 모서리를 따라가게 */
.cards .table { border-collapse: separate; border-spacing: 0; }
.cards .table thead tr:first-child td:first-child,
.cards .table thead tr:first-child th:first-child { border-top-left-radius: 6px; }
.cards .table thead tr:first-child td:last-child,
.cards .table thead tr:first-child th:last-child { border-top-right-radius: 6px; }
.table tbody td {
    border-top: 1px solid #EDF0F3 !important;
    padding: 6px 8px;
    vertical-align: middle;
}
.table tbody tr:hover td { background: #F7F9FB; }

/* ── 버튼 ──────────────────────────────────── */
.btn {
    border-radius: 5px;
    font-size: 12.5px;
    padding: 5px 12px;
    box-shadow: none !important;
}
.btn-primary {
    background: var(--sj-blue);
    border-color: var(--sj-blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: #00356F !important;
    border-color: #00356F !important;
}
.btn-outline-dark, .btn-outline-secondary {
    border-color: var(--sj-line);
    color: var(--sj-ink);
}
.btn-outline-dark:hover, .btn-outline-secondary:hover {
    background: #EEF1F5;
    border-color: #CFD6DE;
    color: var(--sj-ink);
}

/* ── 입력 ──────────────────────────────────── */
.form-control, .custom-select, select, input[type="text"],
input[type="number"], input[type="date"], input[type="password"], textarea {
    border-radius: 5px;
    border-color: var(--sj-line);
    font-size: 12.5px;
    color: var(--sj-ink);
}
.form-control:focus, .custom-select:focus, select:focus, textarea:focus {
    border-color: var(--sj-blue);
    box-shadow: 0 0 0 2px rgba(0, 72, 156, .12);
}
label, .col-form-label { font-size: 12.5px; color: var(--sj-muted); }

/* ── 모달 ──────────────────────────────────── */
.modal-content {
    border: 0;
    border-radius: var(--sj-radius);
    box-shadow: 0 8px 28px rgba(27, 36, 48, .16);
}
.modal-header, .modal-footer { border-color: var(--sj-line); padding: 12px 16px; }
.modal-title { font-size: 14px; font-weight: 700; color: var(--sj-ink); }
.modal-body { padding: 14px 16px; }

/* ── 페이지네이션 ───────────────────────────── */
.page-link { color: var(--sj-ink); border-color: var(--sj-line); font-size: 12.5px; }
.page-item.active .page-link {
    background: var(--sj-blue);
    border-color: var(--sj-blue);
}

/* ── 배지 ──────────────────────────────────── */
.badge { font-weight: 600; font-size: 11.5px; border-radius: 4px; }

/* 지금 보고 있는 메뉴를 다시 눌렀을 때. 이동은 막되 눌렸다는 것은 보여준다 */
.sj-side a.tapped { background: rgba(180, 204, 48, .22) !important; }

/* ═══════════════════════════════════════════════════════════
   MES 화면을 현황판·시뮬레이터와 같은 결로

   38개 화면이 같은 뼈대를 쓴다.

       <div class="page-title-box ...">  제목 › 목록
       <div class="cards bg-white m-3">  검색·버튼·표

   이 두 클래스만 손보면 화면을 하나도 건드리지 않고 톤이 맞는다.
   현황판의 .panel 과 같은 모양(흰 바탕·1px 선·radius 10)으로 만든다.
   ═══════════════════════════════════════════════════════════ */

/* 제목줄 — 상단바에 이미 "그룹 › 화면" 이 있어 중복이다.
   감춰서 표가 한 줄 위로 올라오게 한다. 새로고침 기능이 달려 있지만
   같은 일을 하는 버튼이 카드 안에 따로 있다. */
.page-title-box { display: none !important; }

/* 본문 카드 — 현황판 .panel 과 같은 모양 */
.cards {
    background: var(--sj-surface) !important;
    border: 1px solid var(--sj-line) !important;
    border-radius: var(--sj-radius) !important;
    box-shadow: none !important;

    /* padding = 카드 안쪽 여백,  margin-bottom = 카드끼리의 간격.
       좌우·위 여백은 body padding 이 맡으므로 0 이다. */
    padding: 14px !important;
    margin: 0 0 14px 0 !important;
}
.cards:last-child { margin-bottom: 0 !important; }

/* 카드가 좌우로 나란한 화면(불량데이터 분석처럼 목록 | 그래프 로 나뉜 것).
   위아래 간격만으로는 이 경우가 안 잡힌다 — 열이 옆으로 놓이기 때문이다.
   앞선 열이 있는 카드에 왼쪽 여백을 줘 사이를 띄운다. */
[class*="col-"] + [class*="col-"] > .cards,
[class*="col-"] + [class*="col-"] .cards { margin-left: 14px !important; }

/* 화면이 body 에 직접 준 배경색을 덮는다(인라인 style 이라 !important 필요) */
body[style*="background"] { background: var(--sj-bg) !important; }

/* 검색·버튼 줄 — 카드 안쪽이라 위 여백이 겹친다 */
.cards > .row:first-child { margin-top: 0 !important; }
.cards .div_search { border-radius: 5px; }

/* 모달 머리말 — style.css 가 회색 바탕에 흰 글씨를 강제한다.
   현황판 톤에 맞춰 흰 바탕에 검은 글씨로 되돌린다. */
.modal-header {
    background: var(--sj-surface) !important;
    height: auto !important;
    border-bottom: 1px solid var(--sj-line) !important;
}
.modal-title { color: var(--sj-ink) !important; }
.modal-header .close { color: var(--sj-muted); opacity: 1; text-shadow: none; }
.modal-header .close:hover { color: var(--sj-ink); }

/* 사이드바·상단바에서 누를 수 있는 것은 손가락 커서.
   위의 cursor:default 와 화면별 CSS 를 모두 이기도록 못 박는다. */
.sj-side a,
.sj-side button,
.sj-top a,
.sj-top button { cursor: pointer !important; }