/* ==========================================================================
   dashboard_chrome.css — 전역 chrome(셸 + 사이드바 + 인사줄)
   첨부 디자인의 .wrap / .layout.shell / .content.panel / .sidebar / .greet 영역을
   그대로 이식. 모든 페이지에 적용된다. (#dash 콘텐츠 스타일은 dashboard_design.css)
   ========================================================================== */

:root {
    /* 테마: 웜(베이지/크림 + 옐로우 포인트) — 메인 대시보드 톤앤 이식 */
    --bg: #eceadf; --card: #FFFFFF; --ink: #1d1d1d; --ink2: #3c3c3a;
    --muted: #9a9a93; --faint: #bcbcb5; --line: #f0efe9; --soft: #f3f2ee;
    --red: #DD1402; --red-soft: #FCE7E3; --gray: #9a9a93; --slate: #33343c;
    --cream: #f4f2ec; --sand: #e7e3d5; --blush: #FCE8E5; --busy: #e3e0d7; --warm: #6c6c66; --r: 22px;
    /* 포인트 옐로우(대시보드 액센트) */
    --accent: #FFD761; --accent-deep: #F0C337;
    --shadow: 0 1px 2px rgba(40,36,25,.05), 0 16px 32px -14px rgba(40,36,25,.22);
    --font: 'NanumSquare_ac', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 옛 고정 레이아웃 무력화 (#nav 제거, #aside/#main 비고정) */
body { background: var(--cream) !important; font-family: var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
#nav { display: none !important; }
#main { padding: 0 !important; }

.ico { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-variant-numeric: tabular-nums; }

/* ===== shell ===== */
.wrap { max-width: none; margin: 0; padding: 0; }
.layout { display: flex; gap: 16px; align-items: flex-start; }
/* 메인 대시보드와 동일한 웜 그라데이션 배경(우상단 옐로우 글로우 + 베이지) */
.shell { background: radial-gradient(1100px 640px at 86% -8%, rgba(255,215,97,.30), rgba(255,215,97,0) 55%), linear-gradient(165deg, #f4f2ec 0%, #eceadf 60%, #e8e6db 100%); border-radius: 0; padding: 16px; gap: 8px; box-shadow: none; align-items: stretch; min-height: 100vh; }
/* 콘텐츠 패널 — 글래스(반투명 화이트)로 배경 그라데이션이 비치게 */
.panel { background: rgba(255,255,255,.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 26px; padding: 20px; flex: 1; min-width: 0; overflow: hidden; }
/* 메인 대시보드(.dashx)는 카드 자체가 글래스라 패널은 투명 처리 → 배경 그라데이션 위에 카드가 직접 떠 보이게 */
.panel:has(.dashx) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.content { flex: 1; min-width: 0; }
/* 넓은 테이블/그리드가 패널·사이드바를 침범하지 않도록 콘텐츠 영역에 가로 스크롤 가둠 */
#content_div, #content_load { min-width: 0; max-width: 100%; }
#content_div { overflow-x: auto; }
.content_li { max-width: 100%; }
/* Tabulator 그리드는 컨테이너 폭으로 캡 → 넘치면 그리드 내부에서 가로 스크롤 */
.tabulator { max-width: 100% !important; box-sizing: border-box; }

/* ==========================================================================
   position:fixed 콘텐츠 영역의 사이드바 폴딩 반응
   - .scroll_div / .sot / .scroll_fixed 는 in-flow 로 전환되어 패널 안에서 자동 정렬된다.
   - 아직 페이지 자체 style 로 position:fixed 인 #form_work 만 left 를 추적한다.
   - 콘텐츠 좌측 시작점을 변수(--content-left)로 두고 폴딩 상태에 따라 전환.
     left = shell패딩(16) + 사이드바(232/64) + gap(8) + 패널패딩(20)
            → 확장 276 / 접힘 108 (일반 flow 콘텐츠 시작점과 정렬).
   - 인라인 style의 left(예: 상세 패널 left:66%)는 인라인 우선이라 영향 없음.
   ========================================================================== */
:root { --content-left: 276px; }
body:has(.sidebar.fold) { --content-left: 108px; }
/* 슬림 아이콘 레일(기본): 16(shell) + 84(rail) + 8(gap) + 20(panel) = 128 */
body:has(.sidebar.rail) { --content-left: 146px; }
#content_div #form_work {
    left: var(--content-left);
    transition: left .26s cubic-bezier(.4,0,.2,1);
}
/* 사이드바가 숨는 좁은 화면에서는 콘텐츠를 좌측 끝으로 */
@media (max-width: 1180px) {
    :root { --content-left: 24px; }
}

/* ===== 인사줄 (greet) — 모든 페이지 상단 ===== */
.greet { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.greet-left { display: flex; align-items: center; gap: 14px; }
.greet h1 { font-size: 23px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; margin: 0; color: var(--ink); }
.greet h1 span { color: var(--muted); font-weight: 600; }
.greet-r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink2); white-space: nowrap; cursor: pointer; }
.pill svg { color: var(--muted); }
/* index 기준일자: 날짜 입력을 pill 위에 투명 오버레이(showPicker 위치 맞춤).
   전역 로드 → hx-boost 로 index 진입 시에도 적용되어 입력 박스가 중복 노출되지 않음. */
#form_date #id_date { position: absolute !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 0 !important; pointer-events: none !important; }
.greet-r .vendor { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink2); padding: 0 4px; white-space: nowrap; text-decoration: none; }
.greet-r .vendor svg { width: 17px; height: 17px; fill: var(--red); stroke: none; }
.gbtn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; text-decoration: none; }
.gbtn svg { width: 16px; height: 16px; }
.gbtn.red { background: var(--red); color: #fff; }
.gbtn.accent { background: var(--slate); color: #fff; }
.gbtn.ghost { background: var(--card); color: var(--ink2); box-shadow: var(--shadow); }

/* nav.html 액션을 greet-r 알약으로 재배치 (로고는 숨김) */
#base_logo_div { display: none !important; }
#nav_right { display: contents; }
.inquiry-btn { background: #16161A !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5) !important; border-radius: 999px !important; height: 44px; }
.logout-btn { background: var(--card) !important; color: var(--ink2) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: 999px !important; height: 44px; font-family: inherit !important; font-weight: 700 !important; }
.logout-btn:hover { background: var(--soft) !important; }
.logout-btn .material-icons { color: var(--ink2) !important; }
.username-badge { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--ink2) !important; box-shadow: var(--shadow) !important; height: 44px; }
.memo-btn { background: linear-gradient(135deg, #4A5C92 0%, #3A4A7A 100%); border: none; box-shadow: 0 2px 8px rgba(58, 74, 122, .35); border-radius: 50%; width: 44px; height: 44px; display: inline-grid; place-items: center; cursor: pointer; color: #fff; }
.memo-btn .material-icons { color: #fff; }

/* ==========================================================================
   사이드바 (.sidebar) — 첨부 디자인 그대로
   ========================================================================== */
.sidebar { width: 232px; flex: 0 0 auto; background: var(--card); border-radius: var(--r); padding: 12px 10px; box-shadow: var(--shadow); align-self: flex-start; position: sticky; top: 18px; max-height: calc(100vh - 36px); display: flex; flex-direction: column; transition: width .26s cubic-bezier(.4,0,.2,1); overflow: hidden; }
.sidebar.fold { width: 64px; min-width: 64px; max-width: 64px; flex: 0 0 64px; border-radius: 34px; }
.sidebar.fold .sb-menu { gap: 6px; }
.sidebar.fold .mi { justify-content: center; padding: 5px; }
.sidebar.fold .mi .lbl { display: none; }
.sidebar.fold .mi > svg:not(.star):not(.caret) { color: var(--muted); }
.sidebar.fold .mi:hover > svg:not(.star):not(.caret) { background: var(--soft); color: var(--ink); width: 34px; height: 34px; padding: 7px; border-radius: 11px; box-sizing: border-box; }
.sidebar.fold .mi.on { background: none; box-shadow: none; }
.sidebar.fold .mi.on > svg:not(.star):not(.caret) { background: var(--sand); color: var(--red); width: 36px; height: 36px; padding: 8px; border-radius: 12px; box-sizing: border-box; }
.sb-top { display: flex; align-items: center; gap: 6px; padding: 8px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sb-top a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.fold-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--soft); color: var(--ink2); border: none; cursor: pointer; display: grid; place-items: center; flex: 0 0 30px; margin-left: auto; }
.fold-btn svg { transition: transform .26s; }
.sidebar.fold .sb-top { justify-content: center; }
.sidebar.fold .fold-btn { margin-left: 0; }
.sidebar.fold .fold-btn svg { transform: rotate(180deg); }
.sb-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; opacity: 1; transition: opacity .18s; }
.sidebar.fold .sb-logo { opacity: 0; pointer-events: none; width: 0; }
/* 브랜드 마크(다크 원형 + 버스 아이콘) — 펼침/레일 공통 표시 */
.sb-brand { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1d1d1d; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); flex: 0 0 auto; }
.sb-brand svg { width: 21px; height: 21px; }
/* 검정 mobilhi 워드마크 — 펼쳤을 때만 노출 */
.sb-word { margin-left: 11px; font-family: 'NanumSquare','Plus Jakarta Sans','Pretendard',sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #1d1d1d; white-space: nowrap; transition: opacity .18s; }
.sb-word .sb-word-hi { color: #1d1d1d; }
.sidebar.fold .sb-word { display: none; }
.sb-menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; margin: 4px -4px 0; padding: 0 4px; }
.sb-search { display: flex; align-items: center; gap: 9px; background: var(--soft); border-radius: 11px; padding: 0 12px; height: 40px; margin: 8px 2px 2px; color: var(--faint); }
.sb-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.sb-search input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-family: inherit; font-size: 15px; color: var(--ink2); }
.sidebar.fold .sb-search { justify-content: center; padding: 0; }
.sidebar.fold .sb-search input { display: none; }
.sb-menu::-webkit-scrollbar { width: 0; }
.mi { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 999px; color: var(--ink2); font-size: 15px; font-weight: 600; cursor: pointer; position: relative; white-space: nowrap; border: none; outline: none; background: none; font-family: inherit; width: 100%; text-align: left; transition: background .15s, color .15s; }
.mi:focus, .mi:focus-visible { outline: none; }
.mi > svg:not(.star):not(.caret) { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; transition: color .15s; }
.mi .lbl { flex: 1; opacity: 1; transition: opacity .18s; }
.sidebar.fold .mi .lbl { opacity: 0; pointer-events: none; }
.mi:hover { background: var(--soft); color: var(--ink); }
.mi:hover > svg:not(.star):not(.caret) { color: var(--red); }
.mi.on { background: var(--sand); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(60,66,78,.16); }
.mi.on > svg:not(.star):not(.caret) { color: var(--red); }
.mi .caret { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; transition: transform .22s; }
.mi.grp.open .caret { transform: rotate(180deg); }
.mi.grp.open { color: var(--red); }
.mi.grp.open > svg:not(.star):not(.caret) { color: var(--red); }
.sidebar.fold .caret { display: none; }
.sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.sub.open { grid-template-rows: 1fr; }
.sub-in { overflow: hidden; min-height: 0; }
.sidebar.fold .sub { display: none; }
.si { display: flex; align-items: center; gap: 10px; padding: 9px 11px 9px 44px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; position: relative; text-decoration: none; }
.si::before { content: ""; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--busy); }
.si:hover { background: var(--soft); color: var(--ink2); }
.si:hover::before { background: var(--red); }
.si.on { background: var(--sand); color: var(--ink); }
.si.on::before { background: var(--red); }
.si .lbl { flex: 1; }
.si-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); padding: 9px 12px 4px 24px; white-space: nowrap; }
.sb-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); padding: 13px 12px 6px; white-space: nowrap; }
.sidebar.fold .sb-cap { opacity: 0; height: 8px; padding: 0; }

/* 즐겨찾기 별 (favorite_span .favorite-toggle) — 디자인 톤 */
.mi .favorite-toggle, .si .favorite-toggle { margin-left: auto; opacity: 0; transition: opacity .15s; flex: 0 0 auto; }
.mi:hover .favorite-toggle, .si:hover .favorite-toggle { opacity: 1; }
.favorite-toggle i { color: var(--faint); font-size: 14px; }
.favorite-toggle i.fas { color: var(--red); opacity: 1; }
.sidebar.fold .favorite-toggle { display: none; }

/* shell 안에서의 사이드바 보정 (첨부 디자인 .shell .sidebar) */
/* position:relative + z-index → 옛 레이아웃의 position:fixed 표/오버레이가 좌측으로
   빠져 나와도 사이드바가 항상 그 위에 그려져 메뉴를 덮지 않게 함(모달 1050+ 보다는 낮게). */
.shell .sidebar { background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; border-radius: var(--r); padding: 6px 10px 6px 4px; position: sticky; top: 16px; z-index: 50; max-height: calc(100vh - 32px); align-self: flex-start; }
.shell .sidebar.fold { border-radius: 0; }
.shell .sb-top { border-bottom-color: rgba(60,66,78,.18); }
.shell .fold-btn { background: var(--soft); }
.shell .mi.on { background: var(--sand); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(40,45,55,.35); }
.shell .mi.on > svg:not(.star):not(.caret) { color: var(--red); }
.shell .sidebar.fold .mi.on { background: none; box-shadow: none; }
.shell .sidebar.fold .mi.on > svg:not(.star):not(.caret) { background: var(--sand); color: var(--red); box-shadow: none; }
.shell .si:hover { background: var(--soft); }
.shell .si::before { background: rgba(120,125,135,.5); }

@media (max-width: 1180px) {
    .sidebar { display: none; }
}

/* ==========================================================================
   운행 실적(combo) 막대 색 — 쿨 그레이 톤
   ========================================================================== */
#combo .cbar { fill: #F4F5F7; transition: fill .25s ease; }   /* 낮은 달 — 더 연하게 */
#combo .cbar.mid { fill: #D5D9E0; }           /* 중간 달 */
#combo .cbar.hi { fill: #B7BDC8; }            /* 높은 달 — 너무 진하지 않게 완화 */
#combo .cbar.pk { fill: #D98A82; fill-opacity: 1; }   /* 피크(현재월) — 채도 낮춘 부드러운 빨강 */

/* ==========================================================================
   웜 톤 사이드바 액센트 — 메인 대시보드와 동일한 "다크 펄 + 옐로우 아이콘" 액티브.
   기존 규칙(레드 포인트)을 파일 뒤에서 덮어쓴다. 항상 .shell 안에서 렌더되므로
   .shell 스코프로 작성. CSS는 head에서 1회만 로드 → 메뉴 클릭 시 재계산/플리커 없음.
   ========================================================================== */
.shell .mi:hover > svg:not(.star):not(.caret) { color: var(--ink); }
.shell .mi.on { background: #1d1d1d; color: #fff; box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); }
.shell .mi.on > svg:not(.star):not(.caret) { color: var(--accent); }
.shell .mi.on .caret { color: rgba(255,255,255,.55); }
.shell .mi.grp.open { color: var(--ink); }
.shell .mi.grp.open > svg:not(.star):not(.caret) { color: var(--ink); }
.shell .si.on { background: var(--sand); color: var(--ink); font-weight: 700; }
.shell .si.on::before { background: #1d1d1d; }
.shell .si:hover::before { background: #1d1d1d; }
.shell .sidebar.fold .mi.on > svg:not(.star):not(.caret) { background: var(--sand); color: var(--ink); }
.shell .favorite-toggle i.fas { color: #c9a227; }   /* 즐겨찾기 별 — 골드 */

/* ==========================================================================
   사이드바 = 새 디자인 슬림 다크 아이콘 레일 (디자인적용간격.png).
   각 대분류 = 원형 아이콘. 아이콘 hover 시 해당 중/소 메뉴가 플라이아웃 패널로 표시.
   기존 메뉴(aside_new) 데이터/링크/즐겨찾기/active 표시는 그대로 유지하고,
   "룩"만 레일로 재도색한다. (디자인은 head 1회 로드라 메뉴 이동해도 안 바뀜)
   ========================================================================== */
.shell .sidebar.rail {
    width: 104px; min-width: 104px; max-width: 104px; flex: 0 0 104px;
    border-radius: var(--r);
    background: rgba(255,255,255,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 12px 0 10px; align-items: center;
}
.shell .sidebar.rail .sb-top { justify-content: center; border-bottom: none; padding: 0 0 10px; margin-bottom: 4px; }
.shell .sidebar.rail .sb-top a { flex: 0 0 auto; justify-content: center; }
.shell .sidebar.rail .sb-logo { display: none; }
.shell .sidebar.rail .sb-word { display: none; }
.shell .sidebar.rail .sb-brand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #1d1d1d;
    box-shadow: 0 10px 20px -6px rgba(0,0,0,.4);
}
.shell .sidebar.rail .sb-brand svg { width: 18px; height: 18px; }
/* 레일에서는 상단을 세로로 쌓고, 펼치기(›) 버튼을 브랜드 아래 표시 */
.shell .sidebar.rail .sb-top { flex-direction: column; gap: 9px; }
.shell .sidebar.rail .fold-btn { display: grid; width: 30px; height: 30px; margin: 0 auto; background: rgba(255,255,255,.72); color: #5b5b57; }
.shell .sidebar.rail .fold-btn svg { transform: rotate(180deg); }
.shell .sidebar.rail .sb-search {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.7);
    margin: 4px auto 8px; justify-content: center; padding: 0; color: #8a8a82; flex: 0 0 auto;
}
.shell .sidebar.rail .sb-search input { display: none; }
.shell .sidebar.rail .sb-menu { align-items: center; gap: 7px; margin: 0; padding: 0; }
.shell .sidebar.rail .sb-cap { display: none; }
.shell .sidebar.rail .mi {
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    justify-content: center; margin: 0 auto; background: none; gap: 0; box-shadow: none;
}
.shell .sidebar.rail .mi .lbl,
.shell .sidebar.rail .mi .caret,
.shell .sidebar.rail .mi .favorite-toggle { display: none; }
.shell .sidebar.rail .mi > svg:not(.star):not(.caret) { width: 22px; height: 22px; color: #8a8a82; }
.shell .sidebar.rail .mi:hover { background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); }
.shell .sidebar.rail .mi:hover > svg:not(.star):not(.caret) { color: #1d1d1d; }
/* hover(.flyon) + 현재 페이지가 속한 대분류(자식 .si.on) 만 다크 강조.
   .open 은 레일에서 인라인 서브가 숨겨져 무의미하므로 강조에 쓰지 않는다(아이콘 누적 방지). */
.shell .sidebar.rail .mi.on,
.shell .sidebar.rail .mi.grp.flyon,
.shell .sidebar.rail .mi.grp:has(+ .sub .si.on) { background: #1d1d1d; box-shadow: 0 10px 20px -8px rgba(0,0,0,.45); }
.shell .sidebar.rail .mi.on > svg:not(.star):not(.caret),
.shell .sidebar.rail .mi.grp.flyon > svg:not(.star):not(.caret),
.shell .sidebar.rail .mi.grp:has(+ .sub .si.on) > svg:not(.star):not(.caret) { color: #fff; }

/* 인라인 서브(중/소)는 레일에서 숨김 → 플라이아웃(.fly)으로만 노출 */
.shell .sidebar.rail .sub { display: none; }
.shell .sidebar.rail .sub.fly {
    display: block; position: fixed; left: 96px; z-index: 1200;
    width: 240px; max-height: 82vh; overflow-y: auto;
    background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px;
    box-shadow: 0 18px 46px -18px rgba(40,36,25,.5);
}
.shell .sidebar.rail .sub.fly .sub-in { overflow: visible; min-height: 0; }
.shell .sidebar.rail .sub.fly .si { padding: 9px 11px 9px 30px; }
.shell .sidebar.rail .sub.fly .si::before { left: 14px; }
.shell .sidebar.rail .sub.fly .si-cap { padding-left: 14px; }
.shell .sidebar.rail .sub.fly::-webkit-scrollbar { width: 6px; }
.shell .sidebar.rail .sub.fly::-webkit-scrollbar-thumb { background: #d9d4c6; border-radius: 3px; }

/* 레일 하단 로그아웃 — 원형 + hover 레드 */
.shell .sidebar.rail .sb-foot { border-top: none; padding: 8px 0 0; margin-top: 6px; width: auto; }
.shell .sidebar.rail .sb-foot form { width: auto; }
.shell .sidebar.rail .mi.sb-logout:hover { background: var(--red-soft); }
.shell .sidebar.rail .mi.sb-logout:hover > svg:not(.star):not(.caret) { color: var(--red); }

/* ==========================================================================
   메인 대시보드(index)를 base 셸 안으로 통합 — .dashx 컨테이너 스코프.
   index.html 의 인라인 리셋/키프레임/뷰 토글을 전역(head 로드)으로 이관해
   hx-boost 진입 시에도 항상 적용되게 한다.
   ========================================================================== */
.dashx, .dashx *, .dashx *::before, .dashx *::after { box-sizing: border-box; }
.dashx { font-family: 'Plus Jakarta Sans', 'Pretendard', 'NanumSquare_ac', sans-serif; color: #1d1d1d; }
.dashx .dc-view { display: none; }
.dashx .dc-view.on { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes scanx { 0%{left:-6%;opacity:0} 14%{opacity:.85} 86%{opacity:.85} 100%{left:102%;opacity:0} }

/* 상단 바 — 메모/서울소프트용/문의게시판/로그아웃 숨김 (전 페이지 공통).
   nav.html 은 전 페이지 공용이며, 로그아웃은 좌측 사이드바 하단 .sb-foot 로 이동. */
.memo-btn,
#nav_right a[target="_blank"],
.inquiry-btn,
#nav_right form:has(.logout-btn) { display: none !important; }

/* 사이드바 하단 로그아웃 */
.sb-foot { margin-top: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); }
.sb-foot form { width: 100%; }
.shell .mi.sb-logout { color: var(--ink2); }
.shell .mi.sb-logout:hover { background: var(--red-soft); color: var(--red); }
.shell .mi.sb-logout:hover > svg:not(.star):not(.caret) { color: var(--red); }

/* 대시보드 뷰 전환 세그먼트(대시보드/실시간 관제/자율주행) — greet 영역에 배치 */
.dxtabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.55); border: 1px solid var(--line); padding: 4px; border-radius: 999px; box-shadow: var(--shadow); }
.dxtab { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.dxtab:hover { color: var(--ink); }
.dxtab.on { background: #1d1d1d; color: #fff; }