/* ------------------------------------------------------------------
   VizenWeblog 대시보드 전용 스타일

   Bootstrap 3 "Goofy" 템플릿 위에 얹는다. 기존 클래스를 재정의하지 않고
   .db- 접두사로만 쓴다 (기존 92개 리포트에 영향이 가지 않게).
   ------------------------------------------------------------------ */

/* 폭 상한을 두지 않는다 — 기존 리포트 화면은 전부 화면 폭을 다 쓰는데
   대시보드만 1680px 에서 끊겨 넓은 모니터에서 오른쪽이 크게 비었다.
   표(.db-tw)는 막대 칸이 남는 폭을 흡수하고, 진단 카드는 .db-g2 로 항상 2단이라
   폭이 늘어도 한 줄이 90자 안쪽으로 유지된다. */
.db-wrap { font-size: 13px; color: #111827; line-height: 1.5; }

/* 템플릿 style.css:148 이 h2 를 font-size:36px / line-height:44px 로 잡는다.
   font-size 만 덮어쓰면 line-height 44px 가 그대로 남아 카드마다 빈 줄이 생긴다.
   대시보드 안의 제목 태그는 전부 여기서 초기화한다. */
.db-wrap h1, .db-wrap h2, .db-wrap h3, .db-wrap h4 {
	font-size: inherit; line-height: 1.4; margin: 0; padding: 0;
}

/* SVG 는 기본이 inline 이라 앞뒤 공백 텍스트노드가 줄상자를 만들고
   베이스라인 아래 여백이 생긴다. JSP 의 c:forEach/c:set 이 공백을 다량 남기므로
   반드시 block 으로 둔다. */
.db-wrap svg { display: block; width: 100%; }

/* ---------- 페이지 헤더 ---------- */
.db-head { margin-bottom: 14px; }
.db-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.db-title span { font-size: 12px; font-weight: 400; color: #9ca3af; margin-left: 8px; }

/* ---------- 필터 바 ---------- */
.db-filter {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	background: #fff; border: 1px solid #e9edf3; border-radius: 6px;
	padding: 10px 14px; margin-bottom: 16px;
}
.db-filter .lab { font-size: 12px; color: #6b7280; margin-right: 2px; }
.db-filter .sp { flex: 1 1 auto; }
/* 조회 버튼을 기존 리포트의 "검색" 버튼과 똑같이 만든다.
   대시보드의 .db-filter 는 .form-horizontal 밖이라 modern-override.css 의
   .form-horizontal .btn 규칙이 상속되지 않아 부트스트랩 btn-primary 색이 그대로 나왔다.
   아래는 그 규칙을 그대로 옮긴 것이다 — 값이 바뀌면 두 곳을 함께 고쳐야 한다.
   line-height 는 지정하지 않는다: button 요소는 UA 가 내용을 세로 중앙 정렬한다. */
.db-filter .btn {
	height: 42px; padding: 0 20px; border-radius: var(--vz-radius);
	font-size: 14px; font-weight: 500;
	border: 1px solid var(--vz-primary); color: #fff;
	background-color: var(--vz-primary);
	transition: var(--vz-transition); cursor: pointer;
}
.db-filter .btn:hover {
	background-color: var(--vz-primary-hover); border-color: var(--vz-primary-hover);
	box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}

/* ---------- 그리드 ---------- */
.db-g  { display: flex; flex-wrap: wrap; margin: 0 -7px 14px; }
.db-g > * { padding: 0 7px; margin-bottom: 14px; }
/* KPI 8타일은 넓은 화면에서 한 줄에 8개.
   4개씩 두 줄로 두면 타일 하나가 350px 을 넘는데 값은 8글자 이하라 가로가 텅 빈다. */
.db-g8 > * { width: 12.5%; }
/* KPI 9타일. 체류시간을 "방문시간(시계)" 과 "열람시간(실측)" 두 장으로 나누면서 늘었다.
   좁아지면 3x3 으로 떨어지게 33.33% 를 쓴다 — 4개씩 두 줄이면 마지막 한 장이 혼자 남는다. */
.db-g9 > * { width: 11.1111%; }
.db-g4 > * { width: 25%; }
.db-g3 > * { width: 33.3333%; }
.db-g2 > * { width: 50%; }
.db-g32 > *:first-child { width: 66.6666%; }
.db-g32 > *:last-child  { width: 33.3333%; }

@media (max-width: 1650px) {
	.db-g8 > * { width: 25%; }
	.db-g9 > * { width: 33.3333%; }
}
@media (max-width: 1100px) {
	.db-g4 > *, .db-g3 > *, .db-g2 > * { width: 50%; }
	.db-g8 > * { width: 25%; }
	.db-g9 > * { width: 33.3333%; }
	.db-g32 > *:first-child, .db-g32 > *:last-child { width: 100%; }
}
@media (max-width: 700px) {
	.db-g8 > *, .db-g9 > *, .db-g4 > *, .db-g3 > *, .db-g2 > * { width: 100%; }
}

/* ---------- 카드 ---------- */
.db-card {
	background: #fff; border: 1px solid #e9edf3; border-radius: 8px;
	overflow: hidden;
}

/* 높이 100% 는 "그리드 한 줄 안에서 카드 높이를 맞춘다"는 목적이므로
   그리드 안의 카드에만 건다.
   .db-card 전체에 걸면 그리드 밖 단독 카드가 화면 끝까지 늘어나
   뒤따르는 카드가 전부 화면 밖으로 밀린다. */
.db-g > * > .db-card { height: 100%; }
.db-card.hero { border-color: #cddcf5; box-shadow: 0 1px 3px rgba(37, 99, 235, .07); }

.db-card-h {
	display: flex; align-items: center; gap: 8px;
	padding: 13px 16px 0; flex-wrap: wrap;
}
.db-card-h h2 { font-size: 14px; line-height: 1.4; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.db-card-h .more { margin-left: auto; font-size: 12px; color: #2563eb; white-space: nowrap; }
.db-card-h .more:hover { text-decoration: underline; }
.db-card-b { padding: 12px 16px 14px; }
.db-card-b.flush { padding-left: 0; padding-right: 0; }

.db-sub  { font-size: 11.5px; color: #9ca3af; }
.db-star {
	font-size: 10.5px; font-weight: 700; color: #1d4ed8;
	background: #eaf1fe; border-radius: 3px; padding: 2px 6px;
}
.db-warn-lab {
	font-size: 10.5px; font-weight: 700; color: #b45309;
	background: #fdf3e3; border-radius: 3px; padding: 2px 6px;
}

.db-note { font-size: 11.5px; color: #6b7280; line-height: 1.65; margin-top: 10px; }
.db-note.warn {
	background: #fffaf0; border-left: 3px solid #f0b357;
	padding: 8px 10px; border-radius: 0 4px 4px 0; color: #7c5310;
}
.db-note code, .db-code {
	background: #eef1f6; padding: 1px 4px; border-radius: 3px;
	font-family: Menlo, Consolas, monospace; font-size: 11px;
}

/* ---------- KPI 타일 ---------- */
.db-kpi { padding: 14px 16px; display: block; }
.db-kpi-l { display: block; font-size: 12px; color: #6b7280; }
.db-kpi-v { display: block; font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.7px; }
.db-kpi-r { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.db-d { font-size: 11.5px; font-weight: 700; }
.db-d.up   { color: #047857; }
.db-d.down { color: #b91c1c; }
.db-d.flat { color: #9ca3af; }

/* ---------- 오늘의 신호 ---------- */
.db-signal {
	background: #fff; border: 1px solid #e9edf3; border-left: 3px solid #2563eb;
	border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
}
.db-signal-h { font-size: 11.5px; font-weight: 700; color: #1d4ed8; display: block; margin-bottom: 7px; }
.db-sig { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.7; }
.db-sig i {
	flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
	font-style: normal; font-size: 10px; font-weight: 700; text-align: center;
	line-height: 16px; margin-top: 3px; color: #fff;
}
.db-sig i.bad  { background: #dc2626; }
.db-sig i.warn { background: #d97706; }
.db-sig i.good { background: #059669; }
.db-sig a { color: #2563eb; margin-left: 6px; white-space: nowrap; }

/* ---------- 표 ---------- */
.db-tw { overflow-x: auto; }
.db-tw table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.db-tw th {
	text-align: left; font-weight: 600; color: #6b7280; font-size: 11.5px;
	padding: 8px 10px; border-bottom: 1px solid #eef1f6; white-space: nowrap;
}
.db-tw td { padding: 9px 10px; border-bottom: 1px solid #f5f7fa; white-space: nowrap; }
.db-tw tbody tr:last-child td { border-bottom: 0; }
.db-tw tbody tr:hover { background: #fafbfd; }
/* 숫자 컬럼은 내용 폭까지만 줄인다.
   안 그러면 넓은 화면에서 3~6개 컬럼이 균등 분배되어 컬럼당 250~500px 이 되고
   값이 8글자 이하라 표 전체가 텅 빈 것처럼 보인다.
   width:1% + nowrap 이면 숫자열은 최소폭, 첫 컬럼(라벨)이 남는 폭을 전부 가져간다. */
.db-tw th.r, .db-tw td.r { width: 1%; }
.db-tw td:first-child, .db-tw th:first-child { width: auto; }
.db-tw .r { text-align: right; }
.db-tw .k { font-weight: 600; }
.db-tw .p { font-family: Menlo, Consolas, monospace; font-size: 11.5px; }
.db-tw tr.bad { background: #fef6f6; }
.db-tw tr.bad:hover { background: #fdeeee; }
.db-tw .hi { color: #b91c1c; font-weight: 700; }
/* .lo = 낮아서 좋음(반송률) / .ok = 높아서 좋음(전환율). 색은 같지만 의미가 반대라 이름을 나눈다 */
.db-tw .lo, .db-tw .ok { color: #047857; font-weight: 700; }

.db-rk {
	display: inline-block; width: 17px; height: 17px; line-height: 17px;
	text-align: center; background: #eef1f6; color: #6b7280;
	border-radius: 3px; font-size: 10.5px; font-weight: 700; margin-right: 7px;
}

.db-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.db-tag.ai  { background: #eaf1fe; color: #1d4ed8; }
.db-tag.sns { background: #f0f2f5; color: #4b5563; }
.db-tag.se  { background: #edf7f1; color: #047857; }
.db-tag.bot { background: #f5f5f5; color: #6b7280; }

/* ---------- 막대 목록 ---------- */
.db-bars { display: flex; flex-direction: column; gap: 9px; }
.db-bar-r { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.db-bar-n { flex: 0 0 108px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-bar-t { flex: 1 1 auto; height: 8px; background: #f1f4f8; border-radius: 4px; overflow: hidden; }
.db-bar-f { display: block; height: 100%; background: #2563eb; border-radius: 4px; }
.db-bar-f.alt { background: #bfdbfe; }
.db-bar-v { flex: 0 0 62px; text-align: right; font-weight: 600; }

/* ---------- 차트 ----------
   viewBox + width:100% 만 두면 높이가 화면 폭에 비례해 커진다.
   1500px 폭에서 추이 차트는 350px, 시간대별은 600px 까지 부풀어
   카드 안이 빈 공간으로 채워진다. 높이를 고정하고 가로만 늘린다.
   (막대·꺾은선은 가로로 늘어나도 읽는 데 지장이 없다.
    선 굵기는 SVG 쪽 vector-effect 로 고정한다) */
.db-chart     { height: 210px; }
.db-chart-sm  { height: 130px; }

@media (max-width: 700px) {
	.db-chart    { height: 170px; }
	.db-chart-sm { height: 110px; }
}

/* ---------- 범례 ---------- */
.db-lg { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; color: #6b7280; }
.db-lg-r { display: flex; align-items: center; gap: 5px; }
.db-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- 빈 상태 ---------- */
.db-empty {
	text-align: center; color: #9ca3af; font-size: 12.5px;
	padding: 26px 16px; line-height: 1.7;
}
.db-empty b { color: #6b7280; display: block; margin-bottom: 3px; }

/* 미분류 유입처 — 등록하라는 신호라 경고색 */
.db-bar-f.warn { background: #e8a33d; }

/* 예산 낭비 헤드라인 강조 */
.db-big-bad { color: #b91c1c; }

/* ---------- 진단 목록 ----------
   대시보드의 주인공. 표가 아니라 "문제 → 근거 → 제안 → 이동" 한 줄 단위. */
.db-dx { display: flex; flex-direction: column; gap: 10px; }
.db-dx-r {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px 14px; border-radius: 6px;
	background: #fafbfd; border-left: 3px solid #cbd5e1;
}
.db-dx-r.bad  { background: #fef7f7; border-left-color: #dc2626; }
.db-dx-r.warn { background: #fffbf3; border-left-color: #d97706; }
.db-dx-r.info { background: #f5f9ff; border-left-color: #2563eb; }

.db-dx-i {
	flex: 0 0 20px; width: 20px; height: 20px; line-height: 20px;
	text-align: center; border-radius: 50%; font-size: 11px; font-weight: 700;
	color: #fff; background: #94a3b8; margin-top: 1px;
}
.db-dx-r.bad  .db-dx-i { background: #dc2626; }
.db-dx-r.warn .db-dx-i { background: #d97706; }
.db-dx-r.info .db-dx-i { background: #2563eb; }

.db-dx-b { flex: 1 1 auto; min-width: 0; }
.db-dx-t { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.db-dx-d { font-size: 12.5px; color: #4b5563; line-height: 1.65; margin-top: 2px; word-break: break-all; }
.db-dx-a { font-size: 12px; color: #6b7280; line-height: 1.6; margin-top: 5px; }

.db-dx-go {
	flex: 0 0 auto; align-self: center; font-size: 12px; color: #2563eb;
	white-space: nowrap; padding-left: 8px;
}
.db-dx-go:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.db-dx-r { flex-wrap: wrap; }
	.db-dx-go { align-self: flex-start; padding-left: 32px; }
}

/* ---------- 추이 차트 축·값 ----------
   SVG 는 preserveAspectRatio="none" 이라 안에 글자를 넣으면 가로로 늘어난다.
   눈금과 값은 전부 HTML 로 SVG 바깥에 붙인다. */
.db-cw { display: flex; align-items: stretch; gap: 8px; }
.db-cm { flex: 1 1 auto; min-width: 0; }

/* 좌우 눈금 — SVG 높이(192px)에 맞춰 3등분 */
.db-cy {
	flex: 0 0 auto; height: 192px;
	display: flex; flex-direction: column; justify-content: space-between;
	font-size: 10.5px; color: #9ca3af; white-space: nowrap;
}
.db-cy.left  { text-align: right; min-width: 34px; }
.db-cy.right { text-align: left;  min-width: 34px; color: #6b8fd4; }
.db-cy span { line-height: 1; transform: translateY(-4px); }
.db-cy span:first-child { transform: translateY(0); }
.db-cy span:last-child  { transform: translateY(-8px); }

/* 일자별 값 — 막대와 열이 1:1 로 맞도록 균등 분할 */
.db-cx { display: flex; margin-top: 6px; }
.db-cx-c {
	flex: 1 1 0; min-width: 0; text-align: center;
	display: flex; flex-direction: column; gap: 1px;
	padding: 0 1px; overflow: hidden;
}
.db-cx-c .d { font-size: 10px; color: #9ca3af; }
.db-cx-c .v { font-size: 11.5px; font-weight: 700; color: #374151; }
.db-cx-c .c { font-size: 10px; color: #1d4ed8; }

/* 좁은 화면에서는 날짜만 남긴다 */
@media (max-width: 1000px) {
	.db-cx-c .c { display: none; }
}
@media (max-width: 700px) {
	.db-cx-c .v { font-size: 10px; }
	.db-cx-c .d { font-size: 9px; }
}

/* ---------- 지연 조회 버튼 ----------
   템플릿의 .btn 은 색 지정이 없으면 배경·글자색이 모두 옅게 나와 글씨가 안 보인다.
   대시보드 전용으로 명시한다. */
.db-more-btn {
	display: inline-block; font-size: 12.5px; font-weight: 600;
	color: #1d4ed8; background: #eaf1fe; border: 1px solid #cddcf5;
	border-radius: 5px; padding: 7px 14px; cursor: pointer; line-height: 1.4;
}
.db-more-btn:hover  { background: #dbe7fd; color: #1a43b8; }
.db-more-btn:active { background: #cddcf5; }
.db-more-btn[disabled] { opacity: .6; cursor: default; }

/* 표 안에 들어가는 작은 버튼 */
.db-more-btn.sm { font-size: 11.5px; padding: 3px 9px; margin-left: 8px; vertical-align: middle; }

/* ---------- 대시보드 모달 ----------
   부트스트랩 .modal-lg 는 900px 고정이라 넓은 모니터에서 좁아 보였고,
   1500px 으로 늘렸더니 이번엔 너무 넓었다.

   표가 6칸인데 숫자 칸은 .db-tw .r 규칙으로 최소폭까지 줄어들므로,
   폭을 늘릴수록 남는 자리를 첫 칸(유입처)이 혼자 가져가 가운데가 빈다.
   내용에 맞는 1080px 을 상한으로 둔다. */
#db-detail-modal .modal-dialog {
	width: 72%;
	max-width: 1080px;
	min-width: 320px;

	/* 세로 가운데 정렬.
	   부트스트랩3 기본은 위에서 30px 떨어진 자리라, 내용이 3줄뿐인 광고 매체 모달은
	   화면 위쪽에 붕 뜬 것처럼 보였다. 내용 높이와 무관하게 가운데에 둔다.
	   (부트스트랩4 의 .modal-dialog-centered 를 3에서 구현한 것) */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
@media (max-width: 1100px) {
	#db-detail-modal .modal-dialog { width: 94%; }
}

/* 본문이 길어져도 모달이 화면 밖으로 나가지 않게 한다.
   위 transform 가운데 정렬은 내용이 화면보다 커지면 윗부분이 잘리므로 상한이 필요하다. */
#db-detail-modal .modal-body { max-height: 68vh; overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════
   .db-v2 — 대시보드 스킨 (screenshot/화면 캡처 2026-08-10 175958.png 기준)

   메인 대시보드 한 화면에만 건다. .db-wrap 에 클래스를 하나 더 얹어 범위를 가둔다.
   전역에 걸면 대시보드 6개 + 기존 리포트가 한꺼번에 바뀐다.

   참고 화면에서 읽은 규칙
     모서리    8px  →  14px (카드) / 10px (안쪽 상자·버튼)
     테두리    그림자 없이 1px 헤어라인 #eef0f4 하나
     여백      카드 안쪽 22~24px. 지금보다 훨씬 넉넉하다
     수치      KPI 숫자를 25px → 42px 로 키우고 단위는 작게 뒤에 붙인다
     구분선    카드 안에서 "수치 / 부연" 을 가로선으로 끊는다
     색        회색은 채도 낮은 청회색, 강조는 파랑 하나. 상태만 초록·주황
     글꼴      Noto Sans KR (이미 /include/notosanskr.css 로 로컬 제공 중)

   진단 목록은 참고 화면의 INSIGHT/NEWS 리스트를 따른다 —
   왼쪽에 문장, 오른쪽 끝에 굵은 수치. 심각도 색은 쓰지 않는다
   (진단은 이미 심각도 순으로 내려오므로 색이 같은 말을 반복한다).
   ══════════════════════════════════════════════════════════════════ */
.db-v2 {
	--v2-bg:      #f7f8fa;
	--v2-card:    #ffffff;
	--v2-line:    #eef0f4;
	--v2-line2:   #f4f6f9;
	--v2-ink:     #1a1d23;
	--v2-ink2:    #6b7480;
	--v2-ink3:    #a8b0bb;
	--v2-blue:    #2f6bf6;
	--v2-blue-bg: #eef3ff;
	--v2-good:    #22c55e;

	/* 제품 기본 글꼴과 같은 것을 쓴다. 대시보드만 다른 글꼴이면
	   같은 사이드바 아래에서 두 화면을 오갈 때 인상이 갈린다
	   (모서리 반경을 리포트와 맞춘 것과 같은 이유). */
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--v2-ink);
	font-size: 14px;
	letter-spacing: -.01em;
}

/* ---- 페이지 머리 ---- */
.db-v2 .db-head { margin-bottom: 18px; }
.db-v2 .db-title { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.db-v2 .db-title span {
	display: block; margin-left: 0; margin-top: 6px;
	font-size: 13px; color: var(--v2-ink3); font-weight: 400; letter-spacing: -.01em;
}

/* ---- 필터 바 ---- */
.db-v2 .db-filter {
	background: var(--v2-card); border: 1px solid var(--v2-line);
	border-radius: var(--vz-radius-lg); padding: 14px 20px; margin-bottom: 18px; gap: 8px;
}
.db-v2 .db-filter .lab { font-size: 13px; color: var(--v2-ink2); }
/* 모서리도 기존 리포트와 같은 var(--vz-radius) 로 통일한다.
   (예전에는 여기만 10px 이라 기간 버튼 6px 과 어긋났다) */

/* ---- 카드 ----
   모서리는 기존 리포트 화면과 같은 값을 쓴다.
   기존 카드는 modern-override.css 의 `.panel.panel-default.card-view` 가
   var(--vz-radius-lg) = 8px 이다. 대시보드만 14px 이라 같은 사이드바 아래에서
   두 화면을 오갈 때 모서리가 눈에 띄게 달랐다.
   숫자를 적지 말고 토큰을 쓸 것 — 값이 바뀌면 두 화면이 같이 따라가야 한다. */
/* ---- 세로 리듬 ----
   .db-g 는 컨테이너(14px)와 항목(14px)이 둘 다 아래 여백을 갖는다. 합쳐서 28px 이라
   그리드 다음에 오는 카드만 유독 멀어 보였다 (단독 카드는 인라인 16px 이었다).
   여백을 한 곳(항목)으로 모으고 값을 16px 하나로 통일한다.
   JSP 의 인라인 margin-bottom 은 전부 걷어냈다 — 인라인은 CSS 로 못 이겨서
   화면마다 14 · 16 이 섞이면 여기서 손댈 방법이 없다. */
.db-v2 .db-g { margin-bottom: 0; }
.db-v2 .db-g > * { margin-bottom: 16px; }
.db-v2 .db-card { margin-bottom: 16px; }
.db-v2 .db-g > * > .db-card { margin-bottom: 0; }   /* 그리드 안은 항목이 이미 갖는다 */
.db-v2 .db-frag { margin-bottom: 16px; }

.db-v2 .db-card {
	background: var(--v2-card); border: 1px solid var(--v2-line);
	border-radius: var(--vz-radius-lg); box-shadow: none;
}
.db-v2 .db-card.hero { border-color: #dbe4fb; }
.db-v2 .db-card-h { padding: 20px 22px 0; gap: 10px; }
.db-v2 .db-card-h h2 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.db-v2 .db-card-b { padding: 14px 22px 20px; }
.db-v2 .db-card-b.flush { padding-left: 0; padding-right: 0; }
.db-v2 .db-sub { font-size: 12.5px; color: var(--v2-ink3); }
.db-v2 .db-note { font-size: 12.5px; color: var(--v2-ink2); line-height: 1.75; }

/* ---- KPI 타일 : 숫자를 크게, 부연은 선 아래로 ---- */
.db-v2 .db-kpi { padding: 20px 22px 18px; }
.db-v2 .db-kpi-l { font-size: 13px; color: var(--v2-ink2); font-weight: 500; }
/* 숫자 크기는 타일 밀도를 따라간다.
   참고 화면은 KPI 가 4장이라 42px 이 시원하지만, 이 대시보드는 한 줄에 9장이다.
   1680px / 9 = 187px, 안쪽 여백을 빼면 숫자가 쓸 수 있는 폭이 129px 뿐이라
   42px 로 두면 "23,328" 같은 6자리에서 넘친다 (137px).
   좁아지는 구간(1650px 이하)에서는 타일이 3배로 넓어지므로 그때 키운다. */
.db-v2 .db-kpi-v {
	font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.045em;
	margin-top: 10px; font-variant-numeric: tabular-nums; color: var(--v2-ink);
}
.db-v2 .db-g9 .db-kpi-v { font-size: 30px; }
.db-v2 .db-g8 .db-kpi-v { font-size: 32px; }
.db-v2 .db-g4 .db-kpi-v,
.db-v2 .db-g3 .db-kpi-v { font-size: 42px; }
@media (max-width: 1650px) {
	.db-v2 .db-g9 .db-kpi-v, .db-v2 .db-g8 .db-kpi-v { font-size: 40px; }
}
.db-v2 .db-kpi-r {
	margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--v2-line);
	font-size: 12.5px; color: var(--v2-ink2); font-variant-numeric: tabular-nums;
}
.db-v2 .db-d { font-size: 12.5px; font-weight: 700; }
.db-v2 .db-d.up   { color: #16a34a; }
.db-v2 .db-d.down { color: #dc2626; }
.db-v2 .db-d.flat { color: var(--v2-ink3); }

/* ---- 진단 목록 ---- */
.db-v2 .db-dx-cnt {
	margin-left: auto; font-size: 12.5px; color: var(--v2-ink2);
	font-variant-numeric: tabular-nums;
}
.db-v2 .db-dx-cnt b { color: var(--v2-ink); font-weight: 700; }

/* 진단은 카드를 하나 크게 두르지 않고, KPI 타일처럼 <b>한 건 = 한 카드</b>로 낸다.
   큰 카드 하나에 네 건을 넣으면 어디서 한 건이 끝나는지가 선 하나로만 구분돼
   "한 뭉텅이"로 읽힌다. 카드로 끊으면 건마다 경계가 분명해지고,
   .db-g 그리드를 그대로 쓰므로 반응형·높이 맞춤(.db-g > * > .db-card{height:100%})이 공짜다.

   한 줄에 두 장인 이유: 1680px 한 장이면 한 행이 126자가 되어 눈이 줄을 놓친다.
   반으로 자르면 57자 — 읽기 좋은 45~75자 구간에 들어온다. */

/* 카드 밖으로 나온 섹션 제목 */
.db-v2 .db-sec-h {
	display: flex; align-items: baseline; gap: 10px;
	margin: 0 0 12px; padding: 0 2px; flex-wrap: wrap;
}
.db-v2 .db-sec-h h2 { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.db-v2 .db-dx-cnt {
	margin-left: auto; font-size: 12.5px; color: var(--v2-ink2);
	font-variant-numeric: tabular-nums;
}
.db-v2 .db-dx-cnt b { color: var(--v2-ink); font-weight: 700; }

/* 진단 카드 한 장 */
.db-v2 .db-dx-c {
	display: flex; flex-direction: column;
	padding: 20px 22px 18px;
}
.db-v2 .db-dx-hd { display: flex; align-items: flex-start; gap: 14px; }
.db-v2 .db-dx-t {
	flex: 1 1 auto; min-width: 0;
	font-size: 15px; font-weight: 700; color: var(--v2-ink);
	line-height: 1.5; letter-spacing: -.02em;
}
.db-v2 .db-dx-n { flex: 0 0 auto; text-align: right; padding-top: 1px; }
.db-v2 .db-dx-n b {
	display: block; font-size: 22px; font-weight: 700; color: var(--v2-ink);
	line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.db-v2 .db-dx-n span { display: block; font-size: 11px; color: var(--v2-ink3); margin-top: 2px; }

.db-v2 .db-dx-d { font-size: 13px; color: var(--v2-ink2); line-height: 1.75; margin-top: 10px; }
.db-v2 .db-dx-a { font-size: 13px; color: var(--v2-ink3); line-height: 1.75; margin-top: 4px; }

/* 액션 줄 — 카드 바닥에 붙인다. 글 길이가 달라도 한 줄에 놓인 카드들의 액션이 나란히 선다
   (.db-g > * > .db-card 가 height:100% 라 카드 높이는 이미 맞아 있다).
   링크와 버튼을 세로로 쌓지 않고 한 줄에 두는 이유: 성격이 다른 CTA 가 겹쳐 보인다. */
.db-v2 .db-dx-ft {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
	margin-top: auto; padding-top: 16px;
}
.db-v2 .db-dx-go {
	padding: 0; margin: 0; align-self: auto;
	font-size: 13px; font-weight: 700; color: var(--v2-blue);
}
.db-v2 .db-dx-go:hover { color: #1d4fd8; }

/* ---- 진단 카드의 심각도 색 ----

   색의 근거는 DiagnosisVO.level (bad / warn / info) 하나뿐이다.
   이 값은 DiagnosisEngine 이 정렬 기준으로도 쓰므로(bad → warn → info),
   색과 카드 순서가 저절로 맞는다. 순번(varStatus.index)으로 칠하면 안 된다 —
   BAD 가 두 장일 때 서로 다른 색이 되고, 제일 심각한 게 제일 약한 색이 된다.

   칠하는 곳은 제목 앞 점 하나뿐이다.
   영향도 숫자(.db-dx-n b)에는 칠하지 않는다 — impact 는 심각도가 아니라 크기이고,
   규칙마다 단위가 다르다(요청 · 이탈 · 유입). 그래서 DiagnosisVO 가 unit 을 따로 두고
   "한 열에 세워 비교하면 안 된다"고 못박아 두었는데, 색으로 서열을 입히면
   그 오해를 그대로 되살린다.

   왼쪽 테두리를 쓰지 않는 이유: 진단은 .db-g2 (2열) 라 카드마다 왼쪽 변의
   x 좌표가 달라 색 띠가 세로로 이어지지 않는다. 1열 나열이면 반대로 테두리가 맞다. */
.db-v2 .db-dx-c.lv-bad  { --dx-c: #dc2626; }
.db-v2 .db-dx-c.lv-warn { --dx-c: #d97706; }
.db-v2 .db-dx-c.lv-info { --dx-c: #2563eb; }

/* 제목 앞 점. ::before 로 넣어 JSP 에 빈 태그를 만들지 않는다.
   제목이 두 줄로 넘어가도 첫 글자에 붙어 따라간다. */
.db-v2 .db-dx-t::before {
	content: ''; display: inline-block; vertical-align: middle;
	width: 8px; height: 8px; border-radius: 50%;
	margin: -2px 8px 0 0;
	background: var(--dx-c, #9ca3af);
}


/* 클릭해서 펼치는 본문 조각을 담는 카드 (막다른 페이지 상세 등).
   그리드 밖 전체 폭이라 막대 목록이 눌리지 않는다. */
.db-v2 .db-frag { padding: 4px 22px 20px; margin-bottom: 14px; }
.db-v2 .db-frag .db-note:first-child { margin-top: 16px; }

.db-v2 .db-empty { text-align: left; padding: 8px 0 6px; color: var(--v2-ink2); font-size: 13px; line-height: 1.75; }
.db-v2 .db-empty b { font-size: 15px; font-weight: 700; color: var(--v2-ink); margin-bottom: 4px; letter-spacing: -.02em; }

/* ---- 표 ---- */
.db-v2 .db-tw th {
	font-size: 12px; font-weight: 500; color: var(--v2-ink3);
	padding: 10px 12px; border-bottom: 1px solid var(--v2-line);
}
.db-v2 .db-tw td { font-size: 13px; padding: 12px; border-bottom: 1px solid var(--v2-line2); }
.db-v2 .db-tw tbody tr:hover { background: #fafbfd; }
.db-v2 .db-tw tr.bad { background: none; }
.db-v2 .db-tw tr.bad:hover { background: #fafbfd; }
.db-v2 .db-tw .k, .db-v2 .db-tw .db-bar-v { font-weight: 700; }

/* ---- 막대 ---- */
.db-v2 .db-bar-t { background: var(--v2-line); border-radius: 5px; height: 9px; }
.db-v2 .db-bar-f { background: var(--v2-blue); border-radius: 5px; }
.db-v2 .db-bar-n { color: var(--v2-ink2); font-size: 12.5px; }
.db-v2 .db-bar-v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- 배지 ---- */
.db-v2 .db-star { border-radius: 6px; padding: 3px 8px; background: var(--v2-blue-bg); color: #1d4fd8; }
.db-v2 .db-rk { border-radius: 6px; background: #f1f3f7; color: var(--v2-ink2); }
.db-v2 .db-tag { border-radius: 5px; padding: 2px 6px; }
.db-v2 .db-more-btn { border-radius: var(--vz-radius); }

@media (max-width: 700px) {
	.db-v2 .db-title { font-size: 24px; }
	.db-v2 .db-kpi-v { font-size: 34px; }
	.db-v2 .db-dx-n { order: 2; flex: 1 1 100%; text-align: left; padding-left: 0; margin-top: 10px; }
	.db-v2 .db-dx-b { padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   기간 버튼   [전일][오늘][후일] [전주][금주] [전월][금월] [최근 7일][30일][90일]

   .db- 접두사를 안 쓰는 유일한 규칙이다. 대시보드 전용이 아니라
   기존 리포트 폼에는 자리가 없어 대시보드에만 붙지만, CSS 는 전 화면에 실린다.
   dashboard.css 는 headHtml.jsp 가 전 화면에 싣는다.
   버튼은 /include/dist/js/form-picker-data.js 의 vzBuildNav 가 꽂는다.

   색으로 종류를 나누지 않는다. 전부 같은 성격이라 색이 다르면 다른 기능처럼 보인다.
   색은 .on 하나뿐이다 — 지금 이 기간을 만든 버튼에만 켠다.
   ══════════════════════════════════════════════════════════════════ */
/* 세로 정렬은 top 으로 맞춘다. 옆의 "검색" 버튼(.btn)이 vertical-align:top 이라
   middle 로 두면 높이가 다른 두 요소가 어긋나 보인다. */
.vz-grp { display: inline-block; vertical-align: top; margin: 0 0 0 8px; white-space: nowrap; }
/* 마지막 묶음과 그 뒤(검색 버튼) 사이 간격 */
.vz-grp:last-of-type { margin-right: 10px; }
/* 검색로봇제외 체크박스 — form-picker-data.js 가 "검색" 버튼 뒤로 옮기면서 붙이는 클래스.
   부트스트랩 .checkbox 는 input 을 position:absolute; margin-left:-20px 로 빼고
   label 의 padding-left:20px 로 자리를 만드는데, 이 테마에는 그 padding 규칙이 없다.
   그래서 체크박스가 상자 왼쪽 20px 밖(= 검색 버튼 위)에 그려졌다.
   인라인으로 되돌려 글자 바로 앞에 세운다. 높이 42px 은 같은 줄의 날짜 상자와 같은 값.
   vertical-align 로 맞추면 라벨과 체크박스가 각자 다른 기준선을 잡아 몇 px 씩 어긋나므로
   inline-flex + align-items:center 로 세로 중앙을 확정한다. */
.vz-chk { display: inline-flex; align-items: center; height: 42px; min-height: 42px;
	padding: 0; margin: 0 0 0 16px; }
.vz-chk > input[type="checkbox"] { position: static; margin: 0 6px 0 0; flex: none; }
.vz-chk > label { line-height: 1; margin: 0; padding-left: 0; }


/* 높이 기준 = 옆의 날짜 상자(div.form-control).
   부트스트랩 기본은 34px 이지만 style.css 가 .form-control{height:42px} 로 덮어쓰므로
   실제 렌더 높이는 42px 이다. 참고로 옆의 검색 버튼은
   modern-override.css 의 .form-horizontal .btn{height:40px} 라 42px 이 아니다. */
.vz-nav {
	display: inline-block; vertical-align: top; white-space: nowrap;
	height: 42px; padding: 0 13px; margin: 0 0 0 -1px;
	background: #fff; border: 1px solid #d7dde6;
	color: #4b5563; font-size: 13px; line-height: 40px; letter-spacing: -.02em;
	cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* 묶음 안에서는 붙여서 한 덩어리로 */
.vz-grp .vz-nav:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.vz-grp .vz-nav:last-child  { border-radius: 0 6px 6px 0; }
.vz-grp .vz-nav:only-child  { border-radius: 6px; }

.vz-nav:hover:not([disabled]) { background: #f4f6f9; border-color: #c3ccd8; color: #1a1d23; position: relative; z-index: 1; }
.vz-nav:active:not([disabled]) { background: #e9edf3; }
.vz-nav[disabled] { opacity: .4; cursor: default; }

/* 지금 이 기간을 만든 버튼 — 진하게 채우면 "눌러야 하는 버튼"처럼 보여 헷갈린다는
   지적이 있어, 필터 칩에서 흔히 쓰는 "옅은 배경 + 테두리/글씨만 강조" 방식으로 바꿨다.
   흰 배경(미선택)과는 확실히 다르면서도, 진한 채우기처럼 CTA 버튼으로 오해하지 않는다. */
.vz-nav.on {
	background: #e8f0fe; border-color: #2f6bf6; color: #2f6bf6; font-weight: 600;
	position: relative; z-index: 2;
}
.vz-nav.on:hover { background: #d9e6fd; border-color: #2559da; color: #2559da; }


/* 기간 입력도 같은 기준(top)으로 세운다 — 버튼·검색 버튼과 윗변을 맞춘다 */
.form-control.pd-0:has(.input-daterange-datepicker) { vertical-align: top; }

/* 대시보드도 날짜 상자는 input-sm 이 아니라 그냥 .form-control(34px) 이다.
   input-sm(30px) 인 것은 옆의 검색로봇 셀렉트뿐이라, 버튼 높이는 34px 그대로 둔다. */
.db-filter .vz-grp:last-of-type { margin-right: 0; }


/* ══════════════════════════════════════════════════════════════════
   모바일

   전제: /include/headHtml.jsp 가 /dashboard/ 경로에서만 뷰포트를
   width=device-width 로 준다. 그전에는 좁은 기기에서도 550px 캔버스를 그린 뒤
   브라우저가 축소해 보여주었다 — 390px 기기라면 배율 0.71 이라
   12.5px 글자가 실제로는 8.9px, 10px 은 7.1px 로 찍혀 읽을 수가 없었다.
   그래서 아래 값들은 "키운 것"이 아니라 이제야 제 크기로 그려지는 값이다.
   여기서 추가로 손대는 것은 400px 아래에서만 문제가 되는 것들뿐이다.

   이 파일은 전 화면에 실리므로 규칙은 전부 .db- 안에 가둔다.
   (기간 버튼 .vz- 만 예외인데, 이것도 대시보드에만 꽂힌다)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

	/* ---- 여백 ----
	   1680px 기준으로 잡은 22px 안쪽 여백은 360px 화면에서 카드 폭의 12% 를 먹는다.
	   본문에 돌려준다. */
	.db-v2 .db-card-h  { padding: 16px 16px 0; }
	.db-v2 .db-card-b  { padding: 12px 16px 16px; }
	.db-v2 .db-kpi     { padding: 16px 16px 14px; }
	.db-v2 .db-dx-c    { padding: 16px 16px 14px; }
	.db-v2 .db-frag    { padding: 4px 16px 16px; }
	.db-g              { margin-left: -6px; margin-right: -6px; }
	.db-g > *          { padding-left: 6px; padding-right: 6px; }

	/* ---- 검색 조건 : 한 줄에 하나씩 ----
	   JSP 가 날짜 상자와 셀렉트에 인라인 width 를 갖고 있다(230px / 100px).
	   인라인은 !important 없이는 못 이긴다 — 화면 7개를 다 고치는 대신 여기서 덮는다.
	   값을 바꿀 일이 생기면 JSP 쪽 인라인부터 걷어내는 게 맞다. */
	/* .db-v2 로 받는다 — 위에 `.db-v2 .db-filter{padding:14px 20px}` 가 있어
	   `.db-filter` 한 겹으로는 특이도에서 진다 */
	.db-v2 .db-filter { padding: 14px 16px; gap: 8px; }
	/* 라벨은 두 글자(기간 / 검색로봇)라 줄을 따로 주지 않는다.
	   전부 세로로 쌓으면 조건부만 여섯 줄, 화면의 절반을 먹는다.
	   라벨은 제자리에 두고 입력만 남는 폭을 가져가게 한다. */
	.db-filter .lab { flex: 0 0 auto; margin: 0; font-weight: 600; }
	.db-filter > .form-control,
	.db-filter > select.form-control { flex: 1 1 130px; width: auto !important; min-width: 0; }
	.db-filter .db-sub { flex: 1 1 100%; }
	/* 좌우를 밀어내는 여백. 한 줄에 하나씩 쌓으면 빈 줄만 남는다 */
	.db-filter .sp { display: none; }
	/* 조회 버튼은 엄지로 누른다 */
	.db-filter .btn { flex: 1 1 100%; width: 100%; height: 46px; }

	/* ---- 기간 버튼 ----
	   10개가 5묶음이라 한 줄에 안 들어간다. 묶음 단위로 접히게 두고
	   글자 여백만 줄여 두 줄에 담는다. 높이는 손대지 않는다(엄지 기준 42px). */
	.db-filter .vz-grp { margin: 0; flex: 0 0 auto; }
	.vz-nav { padding: 0 11px; font-size: 12.5px; }
	.vz-chk { margin-left: 0; flex: 1 1 100%; }

	/* ---- KPI 타일은 2열 ----
	   9장을 한 줄에 하나씩 쌓으면 그것만으로 화면 다섯 개 분량이라
	   아래 진단·차트까지 내려가기 전에 지친다. 값이 8글자 이하라 반 폭이면 충분하다.
	   폭이 반으로 줄었으니 숫자도 같이 줄인다("1,234,567" 이 9글자로 제일 길다). */
	/* g9 g8 g4 g3 은 전부 KPI 타일만 담는다(확인함). 진단이 들어가는 g2 는 그대로 1열 —
	   진단은 문장이라 반 폭이면 한 줄이 20자로 끊겨 읽기 어렵다. */
	.db-g9 > *, .db-g8 > *, .db-g4 > *, .db-g3 > * { width: 50%; }
	.db-v2 .db-g9 .db-kpi, .db-v2 .db-g8 .db-kpi,
	.db-v2 .db-g4 .db-kpi, .db-v2 .db-g3 .db-kpi { padding: 14px; }
	.db-v2 .db-g9 .db-kpi-v, .db-v2 .db-g8 .db-kpi-v,
	.db-v2 .db-g4 .db-kpi-v, .db-v2 .db-g3 .db-kpi-v { font-size: 26px; margin-top: 8px; }
	.db-v2 .db-g9 .db-kpi-r, .db-v2 .db-g8 .db-kpi-r,
	.db-v2 .db-g4 .db-kpi-r, .db-v2 .db-g3 .db-kpi-r {
		margin-top: 10px; padding-top: 9px; font-size: 11.5px;
	}
	.db-v2 .db-g9 .db-kpi-l, .db-v2 .db-g8 .db-kpi-l,
	.db-v2 .db-g4 .db-kpi-l, .db-v2 .db-g3 .db-kpi-l { font-size: 12.5px; }

	/* ---- 세로 리듬 ----
	   카드 사이 16px 은 1680px 화면 기준이다. 좁은 화면에서는 카드가 전부 한 줄씩이라
	   같은 값이 스크롤만 늘린다. */
	.db-v2 .db-g > * { margin-bottom: 10px; }
	.db-v2 .db-card  { margin-bottom: 10px; }
	.db-v2 .db-frag  { margin-bottom: 10px; }

	/* ---- 진단 카드 ----
	   제목과 영향도 수치를 세로로 쌓는다. .db-dx-n 을 아래로 내리는 규칙은
	   이미 있었지만 .db-dx-hd 에 flex-wrap 이 없어 실제로는 줄이 안 바뀌었다. */
	.db-v2 .db-dx-hd { flex-wrap: wrap; gap: 0 12px; }
	.db-v2 .db-dx-t  { flex: 1 1 100%; font-size: 15px; }
	.db-v2 .db-dx-n  { text-align: left; }
	/* b 가 display:block 이라 단위(span)가 늘 다음 줄로 밀렸다. 한 줄에 붙인다 */
	.db-v2 .db-dx-n b    { display: inline; font-size: 24px; }
	.db-v2 .db-dx-n span { display: inline; margin-left: 4px; font-size: 12px; }
	.db-v2 .db-dx-d, .db-v2 .db-dx-a { font-size: 13px; }
	/* 링크는 손가락으로 누른다 — 글자 높이(20px)만큼만 있으면 못 맞춘다 */
	.db-v2 .db-dx-ft { padding-top: 12px; }
	.db-v2 .db-dx-go, .db-v2 .db-card-h .more {
		display: inline-block; padding: 7px 0; min-height: 34px;
	}
	/* 표 안의 「미사용 · 설정 →」 같은 잔링크. 글자 높이가 15px 뿐이라 못 누른다 */
	.db-v2 a.db-sub { display: inline-block; padding: 8px 0; }
	.db-more-btn { padding: 10px 16px; font-size: 13px; }
	.db-more-btn.sm { padding: 6px 12px; font-size: 12px; }

	/* ---- 추이 차트의 일자 눈금 ----
	   31일이면 360px 화면에서 한 칸이 11px 이라 "08-13" 이 절대 안 들어간다.

	   가로 스크롤도 대 봤는데 더 나빴다 — 막대까지 같이 밀려나 14일 중 6일만 보인다.
	   추이 차트는 "모양을 한눈에" 가 전부라 그래프를 자르면 카드의 뜻이 사라진다.
	   그래서 그래프는 폭을 다 쓰게 두고 눈금만 솎아낸다.
	   (접속 대시보드가 서버에서 이미 쓰는 방식이다 — DashAccessController 의 step)

	   몇 칸마다 남길지는 main.jsp 가 일수를 보고 정해 .lb 클래스로 표시한다.
	   나머지 칸은 visibility 로만 지운다 — display:none 이면 칸이 사라져
	   남은 눈금이 막대와 어긋난다. */
	.db-cx-c { overflow: visible; }
	.db-cx-c:not(.lb) > * { visibility: hidden; }
	/* 칸(=하루)보다 눈금이 넓다. 접히면 "08-" / "09" 두 줄이 되므로
	   접지 말고 옆(감춘 칸) 위로 넘치게 둔다 — 위 overflow:visible 이 그래서 있다 */
	.db-cx-c .v, .db-cx-c .d { white-space: nowrap; font-size: 10.5px; }
	.db-cx-c .c { display: none; }

	/* ---- 표 ----
	   기본은 모든 칸이 nowrap 이다. 넓은 화면에서 숫자열을 최소폭으로 눌러
	   첫 칸이 남는 폭을 다 갖게 하려는 규칙인데, 358px 에서는 글자 칸이
	   화면 밖으로 나가 "유입처" 같은 열이 통째로 안 보인다.
	   숫자(.r)만 nowrap 으로 남기고 글자 칸은 접히게 한다. */
	.db-v2 .db-tw th, .db-v2 .db-tw td {
		white-space: normal;
		/* keep-all : 한글은 단어 안에서 끊지 않는다.
		   break-word 를 쓰면 칸의 최소 폭이 "한 글자"까지 무너져서,
		   옆의 숫자 칸 6개에 밀린 첫 칸이 "캠/페/인" 처럼 세로로 쪼개진다.
		   (anywhere 도 같은 이유로 못 쓴다 — 최소 폭 계산에 반영된다)
		   break-word 는 최소 폭을 건드리지 않으므로 긴 주소에만 뒤늦게 걸린다. */
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.db-v2 .db-tw th.r, .db-v2 .db-tw td.r { white-space: nowrap; }
	/* 첫 칸(이름)은 아래위 폭을 잡아 준다.
	   min : 숫자 칸에 밀려 사라지지 않게. max : android.googlequicksearchbox 같은
	   안 끊기는 한 덩어리가 칸을 혼자 다 가져가지 않게(그 안에서 접힌다). */
	.db-v2 .db-tw td:first-child, .db-v2 .db-tw th:first-child {
		min-width: 88px; max-width: 150px;
	}
	/* 위 규칙은 칸 안의 버튼까지 접는다. 좁은 칸에서는 한 글자씩 세로로 쪼개진다 */
	.db-tw .db-more-btn { white-space: nowrap; }
	.db-v2 .db-tw th { padding: 10px 8px; }
	.db-v2 .db-tw td { padding: 11px 8px; }
	/* 그래도 넘치는 표(열이 5개 이상)는 굴려야 한다.
	   굴릴 수 있다는 것을 알리는 그림자 — 스크롤이 끝까지 가면 저절로 사라진다.
	   local 로 붙은 흰 띠가 덮개, scroll 로 붙은 그림자가 그 아래에서 드러난다. */
	.db-tw {
		-webkit-overflow-scrolling: touch;
		background:
			linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center,
			linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right center,
			radial-gradient(farthest-side at 0    50%, rgba(17,24,39,.2), rgba(17,24,39,0)) left center,
			radial-gradient(farthest-side at 100% 50%, rgba(17,24,39,.2), rgba(17,24,39,0)) right center;
		background-repeat: no-repeat;
		background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	/* ---- 축소 배율이 사라지면서 그대로 드러나는 잔글씨 ---- */
	.db-tag { font-size: 11px; }
	.db-rk  { font-size: 11px; }
	.db-note code, .db-code { font-size: 11.5px; }
	.db-lg  { gap: 10px 14px; font-size: 12px; }
}

/* 400px 아래 (아이폰 SE ~ 일반 안드로이드 세로) */
@media (max-width: 400px) {
	/* KPI 숫자. 700px 구간에서 이미 2열(반 폭)이 되었으므로 한 단계 더 줄인다.
	   360px 기준 타일 안쪽이 약 140px, "1,234,567" 9글자가 23px 이면 114px 이라 들어간다.

	   선택자를 네 줄로 나열하는 이유 — 위쪽 max-width:1650px 구간에
	   `.db-v2 .db-g9 .db-kpi-v{40px}` 처럼 세 겹짜리가 있어서,
	   두 겹짜리 `.db-v2 .db-kpi-v` 로는 특이도에서 진다.
	   나열된 선택자는 각각 따로 계산되므로 이렇게 맞춰야 한다. */
	.db-v2 .db-g9 .db-kpi-v,
	.db-v2 .db-g8 .db-kpi-v,
	.db-v2 .db-g4 .db-kpi-v,
	.db-v2 .db-g3 .db-kpi-v,
	.db-v2 .db-kpi-v { font-size: 23px; }
	.db-v2 .db-title { font-size: 21px; }
	.db-v2 .db-sec-h h2 { font-size: 16px; }
	.db-v2 .db-card-h h2 { font-size: 14px; }
	/* 기간 버튼 10개를 두 줄에 담기 위한 마지막 조정 */
	.vz-nav { padding: 0 9px; font-size: 12px; }
}

/* 접속 대시보드의 추이 x축 눈금.
   좌표를 left:% 인라인으로 주는데(DashAccessController.buildTrendChart)
   .db-cw 가 flex 이고 position 이 없어 그 값이 통째로 무시된다 —
   눈금이 막대와 상관없이 왼쪽으로 몰려 붙는다. 좌표계를 만들어 준다. */
.db-cx-track { position: relative; display: block; height: 15px; margin-top: 6px; }
.db-cx-track > .db-cx {
	position: absolute; top: 0; display: block; margin: 0;
	transform: translateX(-50%); white-space: nowrap;
	font-size: 10.5px; color: #9ca3af;
}