@charset "UTF-8";

/* =============================================================
   통합 대시보드 (/dashboard/dash)

   좌 : ① 유형별 재고 상태  ② 최근 3일 작업지시
   우 : ③ 사이트별 단말 상태 (단말 상태 현황 / 지도 보기)

   색은 공통 화면(design/assets/css/index.css)을 따른다.
     남색 #0a529d · 섹션 #047bb6 · 테두리 #e3e8ef
   ============================================================= */

/* 대시보드 전체를 뷰포트 높이에 맞춘다.
   상단(헤더+breadcrumb)이 고정 높이라, calc(100vh - N) 로 잡으면
   화면 비율이 바뀌어도 바닥과의 여백이 항상 일정하게 유지된다. */
#dashboard_dash {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 270px);
    min-height: 480px;
}

/* ── 좌우 2단 : 높이를 같게 맞춘다 ──────────────────────────
   두 칸을 stretch 로 늘리고, 각 칸의 마지막 패널이 남은 높이를 먹는다.
   고정 min-height 대신 부모(#dashboard_dash) 높이를 flex 로 채운다. */
/* 두 컬럼은 부모(#dashboard_dash 의 calc(100vh - 270px)) 의 남는 세로를 flex:1 로 다 먹고,
   grid stretch 로 좌우가 같은 세로가 된다. 단말 관리 (.sp-cols) 와 동일 흐름.
   짧은 컬럼(우측 단말 상태)의 여백은 안쪽 카드 그리드가 space-between 으로 자체 배분. */
.dd-cols {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.dd-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
}

.dd-panel {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(16, 34, 61, .06);
}

/* 좌측 : 작업지시 패널이 col 안 남은 세로를 채워 페이지네이션을 하단에 붙인다 */
.dd-col--left > .dd-panel--jobs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 우측 : 단말 상태 패널이 col 세로(grid stretch 결과) 를 그대로 채운다 */
.dd-col--right > .dd-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 카드 뷰(#ddViewCard) 는 패널 안 남은 세로를 채운다 (스크롤 래퍼가 flex 로 세로 채우게 하기 위함) */
.dd-col--right .dd-view-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 지도 뷰 : 지도가 렌더링되려면 명시적 크기가 필요하므로 flex:1 */
.dd-col--right .dd-view-map {
    flex: 1;
    min-height: 0;
    display: flex;
}

.dd-view-map[hidden], .dd-view-card[hidden] { display: none; }

/* ── 섹션 바 ────────────────────────────────────────────── */
.dd-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 11px;
    flex: 0 0 auto;
}

.dd-bar__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #047bb6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.dd-bar__label { margin: 0; font-size: 14px; font-weight: 700; color: #047bb6; white-space: nowrap; }
.dd-bar__hint { font-size: 12px; color: #8e97a4; }
.dd-bar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 패널 우측 상단 바로가기 */
.dd-bar__go {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #cbd8e6;
    border-radius: 999px;
    background: #fff;
    color: #047bb6;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.dd-bar__go:hover { background: #047bb6; border-color: #047bb6; color: #fff; }

.dd-loading,
.dd-empty {
    display: block;
    width: 100%;
    grid-column: 1 / -1;
    align-self: stretch;
    padding: 18px 2px;
    text-align: center;
    font-size: 13px;
    color: #8e97a4;
}

/* ── 분류 · 보기 전환 버튼 ──────────────────────────────── */
.dd-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: #eef1f5;
}

.dd-seg button {
    padding: 4px 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5b6472;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.dd-seg button[aria-pressed="true"] { background: #0a529d; color: #fff; }
.dd-seg--view button { padding: 4px 14px; }

/* 단말을 아직 못 불러왔으면 빈 알약이 보이지 않게 */
.dd-seg:empty { display: none; }

/* 분류 버튼 뒤에 붙는 대수 */
.dd-seg button b {
    margin-left: 4px;
    color: #8e97a4;
    font-variant-numeric: tabular-nums;
}
.dd-seg button[aria-pressed="true"] b { color: rgba(255, 255, 255, .78); }

/* ── 칩 ──────────────────────────────────────────────────── */
.dd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef1f5;
    border: 1px solid #dde2e9;
    color: #5b6472;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dd-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dd-chip--flat::before { display: none; }
.dd-chip--ok     { background: #e7f6ec; border-color: #bfe5cb; color: #15803d; }
.dd-chip--warn   { background: #fdf1dc; border-color: #f2d5a1; color: #a15c00; }
.dd-chip--danger { background: #fdeceb; border-color: #f4c3bf; color: #b42318; }

/* dot 색을 각 badge 톤에 맞춘다 (기본 칩은 currentColor 유지) */
.dd-chip--ok::before     { background: #15803d; }
.dd-chip--warn::before   { background: #f0a726; }
.dd-chip--danger::before { background: #b42318; }

/* ── ① 유형별 재고 상태 ─────────────────────────────────── */
.dd-stock { display: flex; flex-direction: column; gap: 7px; }

.dd-stock__row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 92px;   /* 이름 · 막대 · 숫자 : 숫자 칸 고정폭이라 막대 끝이 행마다 정렬된다 */
    align-items: center;
    gap: 10px;
}

.dd-stock__name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 누적 막대 : 트랙(보유) 안에 배정 + 미배정 세그먼트가 나란히 채운다 */
.dd-stock__track { height: 9px; border-radius: 999px; background: #eef1f5; overflow: hidden; display: flex; }
.dd-stock__seg { height: 100%; }
.dd-stock__seg--on  { background: #047bb6; }   /* 배정 (파랑) */
.dd-stock__seg--off { background: #f0a726; }   /* 미배정 (주황) */

.dd-stock__num {
    text-align: right;
    font-size: 12px;
    color: #5b6472;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dd-stock__num b { font-size: 13px; font-weight: 700; }   /* 배정·미배정·보유 굵기·크기 동일, 색만 구분 */
.dd-stock__b--on    { color: #047bb6; }   /* 배정 */
.dd-stock__b--off   { color: #c07d13; }   /* 미배정 */
.dd-stock__b--total { color: #344054; }   /* 보유 */
.dd-stock__num.is-zero b { color: #8e97a4; }

/* ── ② 작업지시 ─────────────────────────────────────────── */
/* 탭이 많아도 스크롤바를 만들지 않고 줄바꿈한다
   (overflow-x:auto 를 쓰면 세로 스크롤바까지 생겨 화살표가 보였다) */
.dd-tabs {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #e5e9ee;
    overflow: visible;
    flex: 0 0 auto;
}

.dd-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    background: transparent;
    color: #6b7480;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.dd-tab:hover { color: #1d1d1d; }
.dd-tab[aria-selected="true"], .dd-tab.is-active { color: #047bb6; border-bottom-color: #047bb6; }

.dd-tab__n {
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef1f5;
    color: #5b6472;
    font-size: 11px;
    font-weight: 700;
}
.dd-tab[aria-selected="true"] .dd-tab__n { background: #dbeafe; color: #0a529d; }

/* 바깥 스크롤 래퍼(SimpleBar) : 패널 안 남은 세로를 채운다. 넘치면 SimpleBar 스크롤.
   원본 .dd-jobs 는 .html() 재렌더 대상이라 스크롤을 직접 붙이지 않는다. */
.dd-jobs-scroll {
    flex: 1;
    min-height: 120px;
}

.dd-jobs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 12px;
}

.dd-job {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid #e3e8ef;
    border-left: 3px solid #dde2e9;
    border-radius: 8px;
    background: #fafbfd;
}
.dd-job.is-issue { border-left-color: #b42318; }
.dd-job.is-doing { border-left-color: #f0a726; }

.dd-job__top { display: flex; align-items: center; gap: 7px; }

.dd-job__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-job__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #8e97a4;
    font-variant-numeric: tabular-nums;
}
.dd-job__meta span + span::before { content: "·"; margin-right: 8px; color: #dde2e9; }

/* ── ③ 사이트 카드 (단말 상태 현황) ─────────────────────── */
/* 카드 뷰 스크롤 래퍼(SimpleBar) : 카드 뷰 안 남은 세로를 채운다. 넘치면 SimpleBar 스크롤.
   원본 .dd-sites 는 .html() 재렌더 대상이라 스크롤을 직접 붙이지 않는다. */
.dd-sites-scroll {
    flex: 1;
    min-height: 0;
}

/* 카드는 자연 크기 유지, grid rows 사이 세로 gap 을 컨테이너에 맞춰 배분 → 아래 여백 최소화.
   grid-auto-rows: min-content 로 카드 자체는 커지지 않고, align-content: space-between 이
   첫 행은 위, 마지막 행은 아래로 정렬한다. 카드가 한 행뿐일 때는 위쪽 정렬만 된다. */
.dd-sites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    grid-auto-rows: min-content;
    align-content: space-between;
    gap: 8px;
}

.dd-site {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 13px;
    text-align: left;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fafbfd;
    color: #1d1d1d;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
/* 다른 목록 페이지의 hover 톤(#f8f9fa)에 맞춘다.
   선택 상태(aria-pressed) : 파스텔 블루(#dbe6f4) 배경 + 진한 남색 글자. */
.dd-site:hover { background: #f8f9fa; border-color: #047bb6; }
.dd-site[aria-pressed="true"] { background: #dbe6f4; border-color: #0a529d; color: #0a529d; }
.dd-site[aria-pressed="true"]:hover { background: #dbe6f4; }

.dd-site__name {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-site__nums { display: flex; align-items: baseline; gap: 10px; }
.dd-site__num { font-size: 11.5px; color: #5b6472; white-space: nowrap; }
.dd-site__num b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-site__num--ok b { color: #15803d; }
.dd-site__num--bad b { color: #b42318; }
.dd-site__num--off b { color: #8e97a4; }

/* 선택 상태 : 파스텔 배경 위에서 진한 남색 글씨로 통일.
   OK/BAD/OFF 색은 원래 값을 그대로 두어 상태 구분이 유지되도록. */
.dd-site[aria-pressed="true"] .dd-site__num { color: #0a529d; }

/* ── 지도 보기 : 사이트 리스트(좌) + 지도(우) ───────────────
   flex 로 짠다 (grid 셀의 min-height:auto 가 stretch 를 방해해
   페이저가 하단에 안 붙는 케이스가 있어 flex 로 통일). */
.dd-mapview {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* 사이드바 컬럼 : 리스트(스크롤) + 페이저(하단 고정)
   height:100% 를 안 쓰고 flex 로만 stretch — 부모 align-items:stretch 에 맡긴다 */
.dd-sitelist-col {
    flex: 0 0 244px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 6px;
}

/* 지도 사이드바 스크롤 래퍼(SimpleBar) : 사이드바 컬럼의 남은 세로를 차지.
   원본 .dd-sitelist 는 .html() 재렌더 대상이라 스크롤을 직접 붙이지 않는다. */
.dd-sitelist-scroll {
    flex: 1 1 0;
    min-height: 0;
}

.dd-sitelist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right:12px;
}

.dd-site-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 9px 11px;
    text-align: left;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #fafbfd;
    color: #1d1d1d;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.dd-site-row:hover { background: #f8f9fa; border-color: #047bb6; }
.dd-site-row[aria-pressed="true"] { background: #dbe6f4; border-color: #0a529d; color: #0a529d; }
.dd-site-row[aria-pressed="true"]:hover { background: #dbe6f4; }

.dd-site-row__name {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-site-row__nums { display: flex; align-items: baseline; gap: 9px; }
.dd-site-row__num { font-size: 11px; color: #5b6472; white-space: nowrap; }
.dd-site-row__num b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-site-row__num--ok b { color: #15803d; }
.dd-site-row__num--bad b { color: #b42318; }
.dd-site-row__num--off b { color: #8e97a4; }

.dd-site-row[aria-pressed="true"] .dd-site-row__num { color: #0a529d; }

/* ── 지도 ────────────────────────────────────────────────── */
.dd-map {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    min-height: 420px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    overflow: hidden;
    background: #eef2f6;
}

/* 지도 위 표시는 팝업(좌측)에 가리지 않게 우측에 둔다 */
.dd-map__count {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    margin: 0;
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e3e8ef;
    font-size: 12px;
    color: #5b6472;
}
.dd-map__count b { color: #0a529d; font-weight: 700; font-variant-numeric: tabular-nums; }

.dd-map__legend {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 12px;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e3e8ef;
    font-size: 11.5px;
    color: #5b6472;
}

.dd-map__legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 1px;
}
.dd-map__legend i.is-ok  { background: #15803d; }
.dd-map__legend i.is-bad { background: #b42318; }
.dd-map__legend i.is-off { background: #8e97a4; }

/* ── 단말 상세 팝업 : 지도 왼쪽 끝(사이트 리스트 옆) ────── */
.dd-detail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 366px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e3e8ef;
    box-shadow: 0 12px 32px rgba(8, 22, 44, .2);
    transform: translateX(-100%);
    transition: transform .22s ease;
}
.dd-detail.is-open { transform: translateX(0); }

.dd-detail__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #0a529d;
    color: #fff;
}

.dd-detail__title { flex: 1 1 auto; min-width: 0; }

.dd-detail__stop {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-detail__sub {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-detail__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.dd-detail__x:hover { background: rgba(255, 255, 255, .3); }

.dd-detail__tabs {
    display: flex;
    align-items: flex-end;
    padding: 0 12px;
    background: transparent;
    border-bottom: 2px solid #e5e9ee;
    flex: 0 0 auto;
}
.dd-detail__tabs .dd-tab { padding: 8px 16px; }

/* 도착 정보 새로고침 (탭 줄 우측) */
.dd-refresh {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #dde2e9;
    border-radius: 6px;
    background: #fff;
    color: #5b6472;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.dd-refresh svg { width: 14px; height: 14px; }
.dd-refresh:hover { background: #0a529d; border-color: #0a529d; color: #fff; }

/* 도착 정보가 없는 단말(e-BIT 아닌 분류)은 탭 · 새로고침을 감춘다.
   .dd-refresh 가 display 를 직접 잡고 있어 [hidden] 만으로는 안 사라진다 */
.dd-detail__tabs [hidden] { display: none; }

.dd-detail__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }

/* 도착 정보 탭일 때는 안쪽에서 크기를 맞추므로 바깥 스크롤을 끈다 */
.dd-detail__body.is-bit { overflow: hidden; }

/* 단말 상태 */
.dd-kv { display: flex; flex-direction: column; margin: 0; }

.dd-kv > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 5px 0;
    border-bottom: 1px dashed #f0f3f7;
}

.dd-kv dt { flex: 0 0 76px; margin: 0; font-size: 12px; color: #8e97a4; }
.dd-kv dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-gauge { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-gauge__track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.dd-gauge__fill { height: 100%; border-radius: 999px; background: #15803d; }
.dd-gauge__fill.is-warn { background: #f0a726; }
.dd-gauge__fill.is-bad { background: #b42318; }
.dd-gauge__val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 도착 정보 : /bit/{deviceKey} 화면을 축소해 얹는다 ──────
   그 화면 CSS 가 :root · body 까지 건드려 iframe 으로 격리한다.
   점검중 · 운행없음 안내도 그 화면이 자체적으로 띄운다. */
/* 도착 정보 탭은 패널 높이를 그대로 채운다 (footer 로고까지 다 보이게) */
#ddPanelBit {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#ddPanelBit[hidden] { display: none; }

.dd-bit {
    flex: 1;
    min-height: 260px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
    border-radius: 10px;
    background: #eef1f5;
}

.dd-bit__box {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 34, 61, .12);
}

.dd-bit__box iframe {
    display: block;
    border: 0;
    transform-origin: top left;
}

.dd-bit__foot { margin: 8px 0 0; text-align: right; }
.dd-bit__foot a { font-size: 12px; color: #047bb6; text-decoration: underline; }


/* ── 페이저 (10개씩 페이징) ─────────────────────────────── */
.dd-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    flex: 0 0 auto;
}

.dd-pager:empty { display: none; }

.dd-pager__btn {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid #dde2e9;
    border-radius: 6px;
    background: #fff;
    color: #5b6472;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.dd-pager__btn:hover:not([disabled]):not(.is-active) {
    background: #f0f5fb;
    border-color: #047bb6;
    color: #047bb6;
}

.dd-pager__btn.is-active {
    background: #0a529d;
    border-color: #0a529d;
    color: #fff;
    cursor: default;
}

.dd-pager__btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.dd-pager__gap {
    padding: 0 4px;
    color: #8e97a4;
    font-size: 12px;
    user-select: none;
}

/* 지도 사이드바용 : 정류장 QR코드 페이지와 같은 톤
   · 배경 · 테두리 없는 텍스트형 숫자
   · 현재 페이지만 짙은 원형
   · 좌우 이전/다음 텍스트 버튼
   · 리스트 스크롤과 무관하게 컬럼 하단에 항상 고정 (flex 체인으로 처리됨) */
.dd-pager--compact {
    /* flex 컨텍스트가 어긋나도 하단으로 확실히 밀리도록 margin-top:auto 안전장치 */
    margin-top: auto;
    flex: 0 0 auto;
    gap: 2px;
    padding: 8px 4px 4px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}

.dd-pager--compact .dd-pager__btn {
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #5b6472;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 50%;
}

.dd-pager--compact .dd-pager__btn:hover:not([disabled]):not(.is-active) {
    background: #f0f5fb;
    color: #0a529d;
    border-color: transparent;
}

.dd-pager--compact .dd-pager__btn.is-active {
    background: #1d1d1d;
    color: #fff;
    border-radius: 50%;
    min-width: 26px;
    padding: 0;
}

.dd-pager--compact .dd-pager__btn--nav {
    width: auto;
    padding: 0 6px;
    border-radius: 6px;
    color: #5b6472;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dd-pager--compact .dd-pager__btn--nav[disabled] { color: #c9ced5; }

.dd-pager--compact .dd-pager__gap { padding: 0 2px; }

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dd-cols { grid-template-columns: 1fr; min-height: 0; }
    .dd-mapview { grid-template-columns: 1fr; }
    .dd-sitelist-scroll { max-height: 200px; }
    .dd-map { min-height: 420px; }
    .dd-detail { width: 100%; }
}

/* ===== [dd-fit] 여기부터 추가 — 되돌리려면 이 블록만 지우면 됨 ===== */
/* =============================================================
   대시보드 높이 맞춤 : 매직넘버(height: calc(100vh - 270px)) 제거

   .content 는 height:calc(100vh - 64px) + SimpleBar 다.
   그 안쪽 .simplebar-content 를 세로 flex 로 만들고 대시보드가
   "남은 높이"를 flex 로 정확히 먹게 하면

     · 화면이 넉넉할 때  : 아래 여백은 --dd-gap-bottom 만큼만, 페이지 스크롤 없음
     · 화면이 작아질 때  : 패널 안 SimpleBar(작업지시 · 고객사 목록)가 먼저 줄어들며 스크롤
     · --dd-min 아래     : .content 의 SimpleBar 가 페이지 스크롤을 낸다

   주의) 스크롤 호스트(.dd-*-scroll)에 overflow:hidden 을 주면 안 된다.
         SimpleBar 는 호스트의 overflowY 가 hidden 이면 스크롤을 포기한다
         (simplebar v6: axis.y.isOverflowing = "hidden" !== overflowY && ...).
   ============================================================= */
:root {
    --dd-min: 520px;       /* 이 높이 아래로는 페이지(.content) SimpleBar 로 넘긴다 */
    --dd-gap-bottom: 40px; /* 패널 아래 여백 — 어떤 화면 크기에서도 이 값 그대로 */
}

#content .simplebar-content:has(> #dashboard_dash) {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    /* SimpleBar 가 .content 의 padding 을 여기에 인라인으로 복사한다.
       아래쪽은 스페이서(::after)가 대신 맡으므로 꺼서 여백이 두 번 들어가지 않게 한다. */
    padding-bottom: 0 !important;
}
/* simplebar.css 의 clearfix(:before) 가 flex item 이 되지 않게 */
#content .simplebar-content:has(> #dashboard_dash)::before { display: none; }

/* 아래 여백을 "스페이서 flex item" 으로 만든다.
   컨테이너의 padding-bottom 은 내용이 넘칠 때 스크롤 영역에 포함되지 않아
   작은 화면에서 여백이 사라진다. flex item 은 항상 포함되므로 어떤 크기에서도 남는다. */
#content .simplebar-content:has(> #dashboard_dash)::after {
    content: "";
    display: block;
    flex: 0 0 var(--dd-gap-bottom);
    height: var(--dd-gap-bottom);
}

#content .simplebar-content:has(> #dashboard_dash) > .page-header { flex: 0 0 auto; }

#dashboard_dash {
    flex: 1 1 auto;
    height: auto;
    min-height: var(--dd-min);
}

/* SimpleBar 래퍼 높이 고정.
   simplebar.css 의 .simplebar-wrapper{height:inherit} 는 호스트에 명시적 height 가
   있을 때만 동작한다. 여기 호스트(.dd-*-scroll)는 flex 로 높이가 정해지므로
   height 프로퍼티는 auto → 래퍼가 내용 높이로 커지면서 바깥(.content)의
   scrollHeight 까지 밀어 올려 "패널은 끝났는데 페이지가 더 스크롤되는" 여백이 생겼다. */
.dd-jobs-scroll > .simplebar-wrapper,
.dd-sites-scroll > .simplebar-wrapper,
.dd-sitelist-scroll > .simplebar-wrapper { height: 100%; max-height: 100%; }
/* ===== [dd-fit] 추가 끝 ===== */