/* ============================================================ admin-dashboard.css — 보닥간병 탭 > 운영 대시보드 (순번169-4 레이아웃 재구성) MASTER 참고 시안 + 169-5-2: 좌측 '통계 설정' 패널(제목 + 목록, 폭 150px) + 본문(KPI 띠·메인 차트·가로 막대·도넛). 색·폰트는 --ad-*·--oc-* 토큰만(리터럴·font-family 선언 없음). 버튼은 .al-search__btn 기본 48px 그대로. 1280 = 패널 150px + 본문 / 375 = 1열(통계 설정은 접기) ============================================================ */ #view-dashboard-home [hidden]{ display:none !important; } /* 안내 줄 */ #view-dashboard-home .db-notice{ background:var(--oc-beige);border:1px solid var(--oc-line);color:var(--oc-gray);border-radius:8px;padding:10px 12px;font-size:.88rem;margin:0 0 12px;text-align:center; } /* 2열 배치 */ /* 넓은 화면(2560 등)에서 차트가 끝없이 늘어나지 않게 본문 상한 1440px(패널 150 + 간격 24 = 1614px), 화면 왼쪽 정렬 */ #view-dashboard-home .db-layout{ display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;max-width:1614px; } #view-dashboard-home .db-main{ min-width:0; } /* KPI 띠 — 시안 상단(라벨 작게 위, 큰 숫자 아래, 구분선) */ #view-dashboard-home .db-kpis{ display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));background:var(--oc-bg-soft);border-top:0;border-bottom:1px solid var(--ad-line);margin:0 0 22px; } #view-dashboard-home .db-kpi{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 16px;border-left:1px solid var(--ad-line);min-width:0; } #view-dashboard-home .db-kpi:first-child{ border-left:0; } #view-dashboard-home .db-kpi__l{ font-size:.82rem;font-weight:700;color:var(--ad-text); } #view-dashboard-home .db-kpi__v{ font-size:1.55rem;font-weight:800;color:var(--ad-navy);font-variant-numeric:tabular-nums;line-height:1.2;word-break:keep-all; } #view-dashboard-home .db-kpi__s{ font-size:.74rem;color:var(--ad-gray);font-variant-numeric:tabular-nums; } #view-dashboard-home .db-na{ font-size:.8rem;font-weight:700;color:var(--ad-gray); } /* 차트 구간 제목(시안 '일자별 매출현황' 줄) */ #view-dashboard-home .db-sec{ min-width:0;margin:0 0 24px; } #view-dashboard-home .db-st{ display:flex;align-items:center;flex-wrap:wrap;margin:0 0 8px;font-size:.98rem;font-weight:800;color:var(--ad-ink);text-align:left; } #view-dashboard-home .db-st small{ margin-left:6px;font-size:.78rem;font-weight:600;color:var(--ad-gray); } #view-dashboard-home .db-chart{ position:relative;width:100%; } #view-dashboard-home .db-chart--main{ height:340px; } #view-dashboard-home .db-chart--ref{ height:300px; } /* 순번181 추천 가입 추이 */ #view-dashboard-home .db-chart canvas{ display:block; } #view-dashboard-home .db-two{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px; } /* 도넛 + 범례(시안 우하단) */ #view-dashboard-home .db-donut{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; } #view-dashboard-home .db-donut__cv{ position:relative;width:200px;height:200px;flex:0 0 auto; } #view-dashboard-home .db-legend{ list-style:none;margin:0;padding:0;flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:.86rem;color:var(--ad-text); } #view-dashboard-home .db-legend li{ display:flex;align-items:center;gap:8px;min-width:0; } #view-dashboard-home .db-legend__sw{ width:12px;height:12px;border-radius:3px;flex:0 0 auto;border:1px solid var(--ad-line); } #view-dashboard-home .db-legend__n{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #view-dashboard-home .db-legend b{ font-variant-numeric:tabular-nums; } #view-dashboard-home .db-legend small{ color:var(--ad-gray);font-variant-numeric:tabular-nums; } /* 좌측 '통계 설정' 패널(시안: 패널 제목 + 목록, 폭 150px) */ #view-dashboard-home .db-side{ min-width:0; } #view-dashboard-home .db-sidebox > summary{ display:none; } #view-dashboard-home .db-side__t, #view-dashboard-home .db-main__t{ display:flex;align-items:center;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--ad-ink);font-size:1rem;font-weight:800;color:var(--ad-ink);text-align:left; } #view-dashboard-home .db-ic{ width:16px;height:16px;flex:0 0 auto;color:var(--ad-navy);margin-right:6px; } #view-dashboard-home .db-sp{ border-bottom:1px solid var(--ad-line);padding:0 0 14px;margin:0 0 14px; } #view-dashboard-home .db-sp:last-child{ border-bottom:0;margin-bottom:0; } #view-dashboard-home .db-sp__t{ display:flex;align-items:center;margin:0 0 8px;font-size:.88rem;font-weight:800;color:var(--ad-ink);text-align:left; } #view-dashboard-home .db-sp__t--gap{ margin-top:14px; } #view-dashboard-home .db-list{ display:flex;flex-direction:column;gap:6px; } #view-dashboard-home .db-opt{ min-height:44px;padding:0 8px;border:1px solid var(--ad-line);border-radius:6px;background:var(--ad-hover);color:var(--ad-text);font:inherit;font-size:.9rem;text-align:center;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #view-dashboard-home .db-opt:hover{ background:var(--ad-soft); } #view-dashboard-home .db-opt.is-on{ background:var(--ad-soft);border-color:var(--ad-navy);color:var(--ad-navy);font-weight:800; } #view-dashboard-home .db-opt:disabled{ opacity:.5;cursor:default; } #view-dashboard-home .db-dates{ display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:8px; } #view-dashboard-home .db-dates .oc-input{ width:100%;min-width:0;padding:10px 6px 10px 8px;font-size:.88rem; } #view-dashboard-home .db-dates__tilde{ text-align:center;color:var(--ad-gray);line-height:1; } #view-dashboard-home .db-hint{ display:flex;gap:4px;margin:10px 0 0;font-size:.76rem;line-height:1.5;color:var(--ad-gray);text-align:left; } #view-dashboard-home .db-hint .db-ic{ margin-right:0;margin-top:2px; } #view-dashboard-home .db-xlsx{ width:100%;padding:0 6px;white-space:nowrap;background:var(--oc-bg);color:var(--oc-primary);border:1px solid var(--oc-line); } /* 상세 표(접힘) */ #view-dashboard-home .db-more{ margin-top:8px;border-top:1px solid var(--ad-line); } #view-dashboard-home .db-more > summary{ list-style:none;cursor:pointer;padding:14px 4px;font-weight:800;color:var(--ad-ink);font-size:.95rem;min-height:44px; } #view-dashboard-home .db-more > summary::-webkit-details-marker{ display:none; } #view-dashboard-home .db-more > summary{ display:flex;align-items:center; } #view-dashboard-home .db-more > summary::before{ content:'+';display:inline-block;width:1.1em;color:var(--ad-gray); } #view-dashboard-home .db-more[open] > summary::before{ content:'−'; } #view-dashboard-home .db-more > summary small{ margin-left:4px;color:var(--ad-gray);font-weight:600; } #view-dashboard-home .db-more__body{ padding-bottom:12px; } #view-dashboard-home .db-h{ margin:20px 0 10px;font-size:1rem;font-weight:700;color:var(--ad-ink);text-align:center; } #view-dashboard-home .db-table td{ white-space:nowrap;font-variant-numeric:tabular-nums; } #view-dashboard-home table.ad-table.db-narrow{ min-width:0; } #view-dashboard-home .db-empty{ text-align:center;padding:24px 12px;color:var(--ad-gray);line-height:1.8; } #view-dashboard-home .db-note{ margin:8px 0 0;font-size:.82rem;color:var(--ad-gray);text-align:center; } #view-dashboard-home .db-warn{ color:var(--oc-accent-dark); } #view-dashboard-home .db-pager{ margin-top:12px; } /* 좁은 화면: 1열, 조회 조건은 접기(summary 로 펼침) */ @media (max-width:980px){ #view-dashboard-home .db-layout{ grid-template-columns:minmax(0,1fr);gap:14px; } #view-dashboard-home .db-side{ order:-1; } #view-dashboard-home .db-side__t{ display:none; } #view-dashboard-home .db-sidebox{ border:1px solid var(--ad-line);border-radius:8px;background:var(--oc-bg);padding:0 14px; } #view-dashboard-home .db-sidebox > summary{ display:block;list-style:none;cursor:pointer;min-height:44px;line-height:44px;font-weight:800;color:var(--ad-ink);font-size:.92rem; } #view-dashboard-home .db-sidebox > summary::-webkit-details-marker{ display:none; } #view-dashboard-home .db-sidebox > summary::after{ content:'+';float:right;color:var(--ad-gray); } #view-dashboard-home .db-sidebox[open] > summary::after{ content:'−'; } #view-dashboard-home .db-sidebox[open] > summary{ border-bottom:1px solid var(--ad-line);margin-bottom:12px; } #view-dashboard-home .db-two{ grid-template-columns:minmax(0,1fr);gap:0; } } @media (max-width:640px){ #view-dashboard-home .db-chart--main{ height:280px; } #view-dashboard-home .db-chart--ref{ height:240px; } #view-dashboard-home .db-kpi__v{ font-size:1.3rem; } #view-dashboard-home .db-donut__cv{ width:170px;height:170px; } }