/* =========================================================================
 * 유동인구 분석 (device/pir)
 * 모든 규칙을 #device_pir 로 스코프해 전역 CSS 와 충돌하지 않게 한다.
 * ========================================================================= */
#device_pir {
    --dp-navy:#0a529d; --dp-navy2:#0a4f8f; --dp-sky:#1a6fb5;
    --dp-bd:#e5e9ef; --dp-bd2:#d9e1ea; --dp-th:#f4f7fa; --dp-sel:#e6effb;
    --dp-ink:#1b2430; --dp-muted:#5b6673; --dp-faint:#97a2b0;

    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
}

/* ===== 기간 필터 ===== */
#device_pir .dp-filter {
    flex:none;
    display:flex;
    gap:14px;
    align-items:flex-end;
    background:#fff;
    border:1px solid var(--dp-bd);
    border-radius:12px;
    padding:13px 18px;
    box-shadow:0 1px 3px rgba(16,34,61,.05);
}
#device_pir .dp-fg { display:flex; flex-direction:column; gap:6px; }
#device_pir .dp-fg > label { font-size:11.5px; color:var(--dp-muted); font-weight:700; }
#device_pir .dp-date-range { display:flex; align-items:center; gap:8px; }
#device_pir .dp-date-range .form-control { width:240px; height:38px; cursor:pointer; }

#device_pir .dp-quick { display:flex; gap:6px; }
#device_pir .dp-quick-btn {
    height:34px; padding:0 14px;
    border:1px solid var(--dp-bd2); border-radius:18px; background:#fff;
    font-size:12.5px; color:var(--dp-muted); font-weight:600; cursor:pointer;
}
#device_pir .dp-quick-btn:hover { border-color:var(--dp-navy); color:var(--dp-navy); }
#device_pir .dp-quick-btn.active { background:var(--dp-navy); border-color:var(--dp-navy); color:#fff; }

/* ===== 3등분 ===== */
#device_pir .dp-cols {
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:250px 290px 1fr;
    gap:14px;
}
#device_pir .dp-panel {
    display:flex; flex-direction:column; min-height:0; overflow:hidden;
    background:#fff; border:1px solid var(--dp-bd); border-radius:13px;
    box-shadow:0 1px 3px rgba(16,34,61,.05);
}

/* 패널 헤더 — 그룹 및 사용자(.au-head) 스타일에 맞춤(단계 번호 없음) */
#device_pir .dp-phd {
    flex:none; height:46px; display:flex; align-items:center; gap:8px;
    padding:0 10px 0 12px; background:#f4f7fa; border-bottom:2px solid #0a529d;
}
#device_pir .dp-phd h3 {
    margin:0; font-size:16px; font-weight:600; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#device_pir .dp-cnt {
    flex:none; min-width:20px; padding:1px 6px; text-align:center;
    border-radius:999px; background:#dbe6f4; color:#0a529d;
    font-size:13.5px; font-weight:700;
}
#device_pir .dp-scope { margin-left:auto; flex:none; font-size:12px; color:var(--dp-muted); font-weight:600; }

/* 목록 내 검색 */
#device_pir .dp-srch { flex:none; padding:9px 11px; border-bottom:1px solid #eef2f7; }
#device_pir .dp-srch-box {
    display:flex; align-items:center; gap:7px; height:34px;
    border:1px solid var(--dp-bd2); border-radius:8px; padding:0 11px;
}
#device_pir .dp-srch-box img { opacity:.55; flex:none; }
#device_pir .dp-srch-box input { flex:1; border:0; outline:0; background:transparent; font-size:13px; color:var(--dp-ink); }

/* 목록 */
#device_pir .dp-list { flex:1; min-height:0; overflow:auto; }
#device_pir .dp-items { list-style:none; margin:0; padding:0; }
#device_pir .dp-item {
    display:flex; align-items:center; gap:10px; position:relative;
    padding:11px 14px; cursor:pointer; border-bottom:1px solid #f2f5f9;
}
#device_pir .dp-item:hover { background:#f4f8fe; }
#device_pir .dp-item.on { background:var(--dp-sel); }
#device_pir .dp-item.on::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--dp-navy); }
#device_pir .dp-item .dp-dot { width:7px; height:7px; border-radius:50%; background:#9fc3ec; flex:none; }
#device_pir .dp-item.on .dp-dot { background:var(--dp-navy); }
#device_pir .dp-item .dp-nm {
    flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--dp-ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#device_pir .dp-item.on .dp-nm { color:var(--dp-navy); font-weight:700; }
#device_pir .dp-item .dp-num { flex:none; font-size:13px; font-weight:800; color:var(--dp-muted); font-variant-numeric:tabular-nums; }
#device_pir .dp-item.on .dp-num { color:var(--dp-navy); }
#device_pir .dp-item.dp-all { background:#f8fbff; }
#device_pir .dp-item.dp-all .dp-nm { color:var(--dp-sky); font-weight:700; }
#device_pir .dp-item.dp-all.on .dp-nm { color:var(--dp-navy); }
/* 데이터 없음 — 롤 관리(.ar-empty)와 동일한 가운데 회색 문구 */
#device_pir .dp-empty { padding:40px 14px; text-align:center; color:#9aa5b2; font-size:15px; }
/* 하단 추가 로딩 표시(버퍼 fetch 중) */
#device_pir .dp-loading { display:none; align-items:center; justify-content:center; gap:8px; padding:14px; color:#7b8593; font-size:13px; }
#device_pir .dp-loading::before {
    content:""; width:15px; height:15px; flex:none;
    border:2px solid #d9e1ea; border-top-color:var(--dp-navy); border-radius:50%;
    animation:dp-spin .7s linear infinite;
}
@keyframes dp-spin { to { transform:rotate(360deg); } }
#device_pir .dp-chart-empty { display:none; padding:56px 14px; text-align:center; color:#9aa5b2; font-size:15px; }

/* ===== ③ 차트 패널 ===== */
#device_pir .dp-cbody { flex:1; min-height:0; overflow:auto; padding:16px 18px; }
#device_pir .dp-cmeta { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
#device_pir .dp-cmeta b { font-size:15px; color:#162536; font-weight:800; }
#device_pir .dp-pill { font-size:11.5px; background:var(--dp-sel); color:var(--dp-navy); font-weight:700; border-radius:11px; padding:2px 10px; }
#device_pir .dp-cmeta-r { margin-left:auto; font-size:12.5px; color:var(--dp-muted); }
#device_pir .dp-csub { font-size:12.5px; font-weight:700; color:#2b3a4d; margin:0 0 6px; }
#device_pir .dp-csub em { font-style:normal; font-weight:500; color:var(--dp-faint); }

#device_pir .dp-chart { width:100%; height:240px; }

/* 최다/최소 카드 */
#device_pir .dp-peaks { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
#device_pir .dp-peak-card {
    position:relative;
    display:flex; gap:13px; align-items:center;
    border:1px solid var(--dp-bd); border-radius:12px; padding:14px 16px; background:#f8fbff;
}
#device_pir .dp-peak-card.min { background:#fbfbfc; }
#device_pir .dp-peak-ic {
    width:42px; height:42px; border-radius:11px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:#dbe8f8; color:var(--dp-navy);
}
#device_pir .dp-peak-card.min .dp-peak-ic { background:#eef1f5; color:#7b8593; }
/* 아이콘은 인라인 SVG 를 mask 로 찍고 색은 카드 상태(currentColor)를 따른다 */
#device_pir .dp-peak-ic::before {
    content:""; width:20px; height:20px;
    background-color:currentColor;
    -webkit-mask:var(--dp-ic) no-repeat center / contain;
    mask:var(--dp-ic) no-repeat center / contain;
}
#device_pir .dp-ic-peak { --dp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6 -6l4 4l8 -8'/%3E%3Cpath d='M14 7l7 0l0 7'/%3E%3C/svg%3E"); }
#device_pir .dp-ic-low  { --dp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 6l4 -4l8 8'/%3E%3Cpath d='M14 17l7 0l0 -7'/%3E%3C/svg%3E"); }
#device_pir .dp-ic-stop { --dp-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E"); }
#device_pir .dp-peak-tx { min-width:0; }
#device_pir .dp-peak-lab { font-size:11.5px; color:var(--dp-muted); font-weight:600; }
#device_pir .dp-peak-val { font-size:19px; font-weight:800; color:#162536; margin-top:2px; letter-spacing:-.4px; }
#device_pir .dp-peak-val.sm { font-size:15px; display:flex; align-items:baseline; gap:6px; }
#device_pir .dp-peak-val.sm > span { flex:1; min-width:0; display:flex; align-items:baseline; gap:5px; }
#device_pir .dp-peak-val.sm > span .dp-nm-el { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#device_pir .dp-peak-val small { font-size:12px; font-weight:600; color:var(--dp-sky); margin-left:6px; }
#device_pir .dp-peak-card.min .dp-peak-val small { color:#9aa5b2; }
/* 정류장 건수도 시간 카드처럼 오른쪽 인라인(이름이 길면 이름만 말줄임, 건수는 우측 고정) */
#device_pir .dp-peak-val.sm small { flex:none; margin:0; white-space:nowrap; }

/* '외 N' 펼침 배지 + 팝오버(방식 A) */
#device_pir .dp-more {
    flex:none; font:inherit; font-size:.72em; font-weight:700; line-height:1.3;
    color:var(--dp-navy); background:#e3eefb; border:0; border-radius:20px;
    padding:1px 8px; cursor:pointer; vertical-align:1px; letter-spacing:0;
}
#device_pir .dp-peak-val:not(.sm) .dp-more { font-size:.62em; }
#device_pir .dp-peak-card.min .dp-more { color:#5f6b7a; background:#eceff3; }
#device_pir .dp-more:hover { background:#d3e3f7; }
#device_pir .dp-peak-card.min .dp-more:hover { background:#e0e4ea; }
#device_pir .dp-pop {
    position:absolute; z-index:60; top:calc(100% - 2px); left:14px;
    box-sizing:border-box; min-width:172px; max-width:280px;
    background:#fff; border:1px solid #d7e0ea; border-radius:10px;
    box-shadow:0 10px 26px rgba(16,42,76,.18); padding:6px;
}
#device_pir .dp-pop-list { list-style:none; margin:0; padding:0; max-height:192px; overflow-y:auto; overscroll-behavior:contain; }
/* 팝오버 스크롤바는 얇고 은은하게 */
#device_pir .dp-pop-list::-webkit-scrollbar { width:8px; }
#device_pir .dp-pop-list::-webkit-scrollbar-thumb { background:#cdd7e2; border-radius:8px; border:2px solid #fff; }
#device_pir .dp-pop-list::-webkit-scrollbar-track { background:transparent; }
#device_pir .dp-pop-list li {
    display:flex; justify-content:space-between; gap:14px; align-items:baseline;
    padding:5px 9px; border-radius:7px; font-size:13px; color:#28313d;
}
#device_pir .dp-pop-list li:hover { background:#f3f7fc; }
#device_pir .dp-pop-list li .t { min-width:0; word-break:keep-all; }
#device_pir .dp-pop-list li .v { flex:none; color:#8a96a5; font-size:12px; white-space:nowrap; }
#device_pir .dp-pop-msg { padding:10px 9px; color:#8a96a5; font-size:12.5px; }

/* ===== 반응형 ===== */
@media (max-width:1200px) {
    #device_pir .dp-cols { grid-template-columns:210px 240px 1fr; }
}
@media (max-width:980px) {
    #device_pir .dp-cols { grid-template-columns:1fr; grid-auto-rows:minmax(260px, auto); overflow:auto; }
    #device_pir .dp-filter { flex-wrap:wrap; }
}