/* descent-bench.css — 하강 기준선(벤치) 칸: «깨끗한 하강» 띠 · 연료의 원인 · (2026-09-23 신설)
   ⛔ 색은 theme.css 토큰을 쓰고 없을 때의 되돌아갈 값만 둔다(라이트/다크 둘 다).
   ⚠ 모양의 정본은 이 파일이다 — JS 문자열에 스타일을 넣지 않는다(CLAUDE.md 7항).
   ⛔ 색으로 «좋다/나쁘다»를 말하지 않는다 — 초록 띠는 «수평 0초 편의 실측 범위», 주황 선은 «꼬리 편의 중앙»이라는 뜻만. */

.db-wrap { margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.db-h { margin: 12px 0 6px; font-size: var(--fs-lg, 13px); font-weight: 700;
        display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.db-hint { font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); font-weight: 400; line-height: 1.5; }
.db-none { padding: 10px 4px; font-size: var(--fs-sm, 11px); color: var(--text-tertiary, #64748b); line-height: 1.6; }

.db-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; }
.db-card { background: var(--bg-sunken, #f6f8fa); border: 1px solid var(--border-subtle, #e2e8f0);
           border-radius: var(--radius-md, 10px); padding: 7px 10px; }
.db-k { font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); }
.db-v { font-size: var(--fs-hero, 17px); font-weight: 700; margin-top: 1px; }
.db-v small { font-size: var(--fs-sm, 11px); font-weight: 400; color: var(--text-tertiary, #64748b); }
.db-s { font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); margin-top: 2px; }

/* 두 무리 비교표 — 깨끗 / 꼬리 */
.db-two { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 11px); margin-top: 6px; white-space: nowrap; }
.db-two th { text-align: right; font-weight: 700; font-size: var(--fs-xs, 10px); padding: 4px 7px;
             color: var(--text-tertiary, #64748b); border-bottom: 1px solid var(--border-medium, #cbd5e1); }
.db-two td { text-align: right; padding: 4px 7px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.db-two th:first-child, .db-two td:first-child { text-align: left; }
.db-two .db-clean { color: var(--status-ok, #1b7f3a); font-weight: 700; }
.db-two .db-tail { color: var(--status-warn, #b45309); font-weight: 700; }

/* 포락선 차트 — 치수는 SVG viewBox가 쥔다. 여기선 배치만. */
.db-chart { display: block; width: 100%; height: auto; margin: 6px 0 2px;
            background: var(--bg-surface-elevated, #fff); border: 1px solid var(--border-subtle, #e2e8f0);
            border-radius: var(--radius-md, 10px); }
.db-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); margin-top: 3px; }
.db-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.db-legend .db-lg-band { background: rgba(27, 158, 90, .28); }
.db-legend .db-lg-clean { background: #1b9e5a; height: 2px; vertical-align: 2px; }
.db-legend .db-lg-tail { background: repeating-linear-gradient(90deg, #c2410c 0 4px, transparent 4px 7px); height: 2px; vertical-align: 2px; }
.db-legend .db-lg-leg { background: #1d4ed8; height: 2px; vertical-align: 2px; }
.db-legend .db-lg-lvl { background: #e07b1a; height: 4px; vertical-align: 1px; }

/* 겹쳐 볼 편 머리줄 (사용자 지시 2026-09-23 「버티컬뷰도 같이」) */
.db-leghead { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-sm, 11px); }
.db-legdot { width: 10px; height: 3px; background: #1d4ed8; border-radius: 2px; display: inline-block; }
.db-x { width: auto; margin: 0 0 0 auto; font: inherit; font-size: var(--fs-xs, 10px); padding: 1px 7px; cursor: pointer;
        border: 1px solid var(--border-medium, #cbd5e1); border-radius: 999px;
        background: var(--bg-surface-elevated, #fff); color: var(--text-secondary, #475569); }

/* 원인 유형 — 가로 막대 */
.db-cause { display: grid; grid-template-columns: minmax(200px, 1.4fr) 3fr 64px 96px 80px; gap: 4px 10px;
            align-items: center; font-size: var(--fs-sm, 11px); }
.db-cause .db-ch { font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); font-weight: 700;
                   border-bottom: 1px solid var(--border-medium, #cbd5e1); padding-bottom: 3px; }
.db-cause .db-num { text-align: right; }
.db-bar { height: 12px; background: var(--bg-sunken, #f6f8fa); border-radius: 3px; overflow: hidden; }
.db-bar i { display: block; height: 100%; background: var(--accent-indigo, #4f46e5); opacity: .7; }
.db-bar.db-struct i { background: var(--text-tertiary, #64748b); opacity: .5; }   /* 구조적 몫 — 회색(강조하지 않는다) */
.db-tag { display: inline-block; margin-left: 5px; font-size: var(--fs-xs, 10px); padding: 0 5px; border-radius: 999px;
          background: var(--bg-sunken, #f6f8fa); color: var(--text-tertiary, #64748b); border: 1px solid var(--border-subtle, #e2e8f0); }
.db-foot { margin-top: 6px; font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); line-height: 1.6; }

@media (max-width: 640px) {
  .db-cause { grid-template-columns: 1fr 2fr 56px; }
  .db-cause .db-hide-m { display: none; }
}