/* ============================================================================
   NSNTEK ERP — 상단 셸 단일본 (타이틀바 + 모듈탭 + 리본 + 테마 변수)

   ★ 셸은 이 파일 하나다 (사용자 확정 2026-08-14 — "별도는 없다").
     · 신규 화면: base.html 이 topbar.css → shell.css 순으로 로드
     · 이식 화면(영업 등): _erp_bar.html 이 topbar.css 만 로드
     마크업도 templates/_topbar.html 하나를 양쪽이 include 한다.
     (구 shellbar.css / .erp-* 클래스는 2026-08-14 폐기)

   색은 반드시 아래 CSS 변수로만 쓴다. 테마 3종은 body 클래스로 전환 (2026-10-13):
     (없음) 시그니처(값 dark, 남색 — 처음 스타일·기본) / rb-light 라이트 / rb-night 다크모드
     그레이·블루는 폐기. 값 'dark' 는 DB·세션 호환을 위해 시그니처 이름으로 남겼다
   ============================================================================ */

/* ── 테마 변수 ────────────────────────────────────────────────────────────── */
:root {
  --bg:          #14142b;
  --bg-2:        #1a1a35;
  --panel:       #1e1e3a;
  --panel-2:     #23234a;
  --border:      #3a3a5e;
  --text:        #e6e6f0;
  --text-dim:    #a0a0c0;
  --text-mute:   #6f6f95;
  --accent:      #5b8cff;
  --accent-soft: #2b3a6b;
  --ok:          #34c98a;
  --warn:        #f0b429;
  --danger:      #f2606a;
  --titlebar-h:  44px;
  /* 회사 로고 색 (2026-10-13) — 어두운 테마(시그니처·다크모드)는 글자를 흰색으로 반전,
     심볼 아래 파랑은 원본(#074da1)이 어두운 바탕에 묻혀 밝힌다. 라이트는 원본 색 그대로 */
  --logo-a:      #00adef;
  --logo-b:      #3f86e0;
  --logo-word:   #ffffff;
  --logo-sub:    #b4b4cc;
  --ribbon-h:    36px;
  --radius:      8px;
  --shadow:      0 4px 20px rgba(0, 0, 0, .45);
  --font: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
}

body.rb-light {
  --bg: #f4f5f9; --bg-2: #eceef5; --panel: #ffffff; --panel-2: #f7f8fc;
  --border: #d5d8e4; --text: #1d2035; --text-dim: #5a5f7a; --text-mute: #8b90a8;
  --accent: #2f6bdc; --accent-soft: #dbe6ff;
  --logo-b: #074da1; --logo-word: #074da1; --logo-sub: #656576;   /* 로고 원본 색 */
  /* 상태색 — 흰 배경에서는 다크용 파스텔이 안 읽혀 진하게 (2026-08-13 감사) */
  --ok: #0f8a5f; --warn: #9a6f00; --danger: #c8323d;
  --shadow: 0 4px 20px rgba(30, 40, 80, .12);
}
/* 다크모드 — 무채색 (시그니처의 남색 기운을 뺐다). 톤은 themes.css 의 rb-night 광역 규칙
   (#1a1a1a 제목줄 · #242424 본문 · #383838 테두리)과 맞춘다.
   강조색은 흰 글씨가 읽히는 진한 파랑 — 옛 그레이(#7fa3d8)는 흰 글씨가 흐렸다 */
body.rb-night {
  --bg: #1e1e1e; --bg-2: #242424; --panel: #262626; --panel-2: #2e2e2e;
  --border: #3a3a3a; --text: #e4e4e4; --text-dim: #ababab; --text-mute: #8c8c8c;
  --accent: #3b82f6; --accent-soft: #1e3a5f;
  --shadow: 0 4px 20px rgba(0, 0, 0, .6);
}

/* ── 타이틀바 ─────────────────────────────────────────────────────────────── */
/* 이식 화면은 body 폰트가 제각각이라 셸에 폰트를 명시한다 */
.tb {
  height: var(--titlebar-h);
  display: flex;
  align-items: stretch;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 900;
  font-family: var(--font);
  font-size: 13px;
}
.tb * { box-sizing: border-box; }
.tb a { text-decoration: none; }

.tb-logo {
  display: flex;
  align-items: center;      /* 타이틀바 세로 가운데 (사용자 요청 2026-08-13) */
  gap: 6px;
  padding: 0 16px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  flex: 0 0 auto;
}
.tb-logo-svg { height: 30px; width: auto; display: block; flex: 0 0 auto; }
.tb-logo-svg .lg-a { fill: var(--logo-a); }
.tb-logo-svg .lg-b { fill: var(--logo-b); }
.tb-logo-svg .lg-w { fill: var(--logo-word); }
.tb-logo-svg .lg-s { fill: var(--logo-sub); }
/* ERP 표기 — 로고 옆에 세로줄로 갈라 붙인다 */
.tb-sub   { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--accent);
  padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); line-height: 22px; }

.tb-nav {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  flex: 1 1 auto;
  scrollbar-width: none;
}
.tb-nav::-webkit-scrollbar { display: none; }

.tb-tab {
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .12s, background .12s;
}
.tb-tab:hover { color: var(--text); background: var(--panel-2); }
.tb-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tb-tab.reserved { color: var(--text-mute); }
.tb-tab.reserved::after {
  content: '준비중';
  margin-left: 5px;
  font-size: 9px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--text-dim);
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  flex: 0 0 auto;
}
/* 시계를 이름 위 한 줄로 (사용자 요청 2026-09-30) — 오른쪽 끝에 맞춘 두 줄 */
.tb-who   { display: flex; flex-direction: column; align-items: flex-end;
            justify-content: center; line-height: 1.25; }
#tb-clock { font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tb-user  { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tb-user small { font-weight: 400; color: var(--text-mute); margin-left: 4px; }

.tb-icon {
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  padding: 5px 7px;
  border-radius: 6px;
  line-height: 1;
  font-family: inherit;
}
.tb-icon:hover { background: var(--panel-2); color: var(--text); }

/* 테마 메뉴 */
.tb-theme-wrap { position: relative; }
#theme-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 132px;
  z-index: 2000;
  box-shadow: var(--shadow);
}
#theme-menu.open { display: block; }
.theme-item {
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-dim);
  white-space: nowrap;
}
.theme-item:hover { background: var(--panel-2); color: var(--text); }
.theme-item.active { color: var(--accent); font-weight: 600; }
/* ⋮ 메뉴 안의 머리글·구분선·링크(설정·로그아웃) — 테마 항목과 같은 모양 */
.tm-head { padding: 6px 10px 3px; font-size: 10.5px; color: var(--text-mute); }
.tm-sep  { height: 1px; margin: 4px 2px; background: var(--border); }
.tb a.tm-item {
  display: block;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.tb a.tm-item:hover { background: var(--panel-2); color: var(--text); }
.tb-mail { font-size: 16px; }

/* ── 리본 (선택 모듈의 하위 메뉴) ─────────────────────────────────────────── */
.ribbon {
  height: var(--ribbon-h);
  display: flex;
  align-items: stretch;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  position: sticky;
  top: var(--titlebar-h);
  z-index: 890;
  scrollbar-width: none;
  font-family: var(--font);
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon a { text-decoration: none; }
.rb-item {
  display: flex;
  align-items: center;
  padding: 0 13px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.rb-item:hover { color: var(--text); background: var(--panel-2); }
.rb-item.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* ── 한 판 화면: 표만 스크롤한다 (기준서 §7.5, 2026-10-13) ─────────────────
   목록 화면은 머리 줄(기간·검색·버튼)·표 틀·아래 버튼줄을 늘 보이게 두고
   데이터 줄만 표 상자 안에서 스크롤한다. 전 모듈이 이 규칙 하나를 쓴다.
   · .pane        화면 판 — 셸 아래 남는 높이에 딱 맞춘다
   · .pane-fill   판 안에서 남는 높이를 먹는 칸(제목줄 달린 패널 등). 겹쳐도 된다
   · .pane-scroll 실제 스크롤 상자 — 표 머리글은 이 상자 위(top:0)에 붙는다
   구매(eframe)의 .ef-page > .ef-tablewrap 은 같은 규칙의 옛 이름이다.
   셸(topbar.css)에 두는 이유: 이식 화면(_erp_bar)과 신규 화면(base) 둘 다
   이 파일만 공통으로 부른다. */
.pane, .ef-page:has(> .ef-tablewrap) {
  display: flex; flex-direction: column;
  /* 높이: 화면 − (타이틀바 + 리본) − 본문 위 여백 18 − 아래로 남길 10 */
  height: calc(100vh - var(--titlebar-h) - var(--ribbon-h) - 28px);
  min-height: 360px;
}
/* 머리 줄·버튼줄은 줄어들지 않는다 — 남는/모자란 높이는 표 상자만 감당한다 */
.pane > *, .pane-fill > * { flex-shrink: 0; }
.pane-fill { display: flex; flex-direction: column; }
.pane .pane-fill, .pane .pane-scroll,
.ef-page:has(> .ef-tablewrap) > .ef-tablewrap { flex: 1 1 auto; min-height: 0; }
.pane-scroll { overflow: auto; }
/* 머리글은 상자의 위 여백 아래에 붙는다 — 여백이 있으면 그 틈으로 지나가는 줄이 비친다.
   패널(.hr-panel 등)을 그대로 상자로 쓸 때를 위해 위 여백만 걷는다 */
.pane .pane-scroll { padding-top: 0; }
/* 머리글은 thead 통째로 표 상자 위에 붙인다 — 머리글이 두 줄(평일/토요일/휴일 묶음 등)
   이어도 줄마다 top 을 계산할 필요가 없다 */
.pane-scroll thead { position: sticky; top: 0; z-index: 5; }
/* 판의 맨 아래 칸은 바깥 여백이 필요 없다 — 그만큼 표가 한 줄 더 보인다 */
.pane > :last-child, .pane-fill > :last-child { margin-bottom: 0; }
/* 아래 여백은 판 안의 버튼줄이 대신한다 — 감싸개가 몇 겹이든 근본에서 줄인다 */
.content:has(.pane), .content:has(.ef-page > .ef-tablewrap) { padding-bottom: 10px; }
/* 이식 화면(_erp_bar)은 본문 감싸개 .body 자신이 판이다 — 제 여백까지 품은 높이 */
body > .body.pane { box-sizing: border-box;
  height: calc(100vh - var(--titlebar-h) - var(--ribbon-h)); }