/* features/diagnostics/diagnostic-hub.css — 진단 허브 화면(2026-09-27 대시보드형 개편).
   · 결과가 먼저다: 요약 띠(판정 고리·수·마지막 점검·동작) → 분야 카드 → 분야별 세부 항목. 설명은 접힘 안.
   · 한 화면 = 12트랙 격자 하나, span만 쓴다(시작선 지정 금지). 같은 행 카드는 높이가 같고 바닥 동작은 한 선에 선다.
   · 강조색은 --ui-primary 하나. 성공·주의·위험은 의미 색이며 늘 낱말·숫자와 함께 쓴다(색만으로 말하지 않는다).
   · 글자: 본문 14px 이상 · 핵심 숫자 20px 이상 · 12px 미만 없음(사용자 가독성 지시).
   · 버튼 겉모습은 index.html의 .ui-btn 체계가 정한다 — 여기서는 배치만 다룬다. */

.utility-modal-shell.diag-hub-shell{width:min(1480px,calc(100vw - 48px))}

.dh-root{
  --dh-gap:20px;
  --dh-radius:16px;
  --dh-text-2:color-mix(in srgb,var(--ui-text-secondary) 76%,var(--ui-text));
  --dh-line:var(--ui-border);
  --dh-line-strong:color-mix(in srgb,var(--btn-line) 82%,var(--ui-text));
  --dh-shadow:0 1px 2px rgba(15,23,42,.03),0 4px 12px rgba(15,23,42,.03);
  --dh-ok:var(--ui-success);
  --dh-warn:var(--ui-warning);
  --dh-bad:var(--ui-danger);
  --dh-muted:var(--ui-text-secondary);
  /* 의미 색을 글자로 쓸 때는 글자색 쪽으로 당겨 작은 글자 4.5:1을 지킨다(데이터 관리 dm-chip--warn과 같은 파생). */
  --dh-ok-text:color-mix(in srgb,var(--dh-ok) 62%,var(--ui-text));
  --dh-warn-text:color-mix(in srgb,var(--dh-warn) 62%,var(--ui-text));
  --dh-bad-text:color-mix(in srgb,var(--dh-bad) 66%,var(--ui-text));
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--dh-gap);
  align-items:stretch;
  min-width:0;
  color:var(--ui-text);
  font-size:14px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.dh-root *{box-sizing:border-box}
.dh-root>*{min-width:0}
.dh-root :focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.dh-root [hidden]{display:none !important}
.dh-s12{grid-column:span 12}
.dh-cards,.dh-sections{grid-column:span 12;display:grid;grid-template-columns:subgrid;gap:var(--dh-gap);align-items:stretch}

/* ── 공통 카드 ─────────────────────────────────────────────────────────── */
.dh-card{background:var(--ui-surface);border:1px solid var(--dh-line);border-radius:var(--dh-radius);box-shadow:var(--dh-shadow);padding:20px;min-width:0}
.dh-chip-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--ui-primary-soft);color:var(--ui-primary)}
.dh-chip-icon .ui-icon{width:20px;height:20px}
.dh-chip-icon--ok{background:color-mix(in srgb,var(--dh-ok) 14%,var(--ui-surface));color:var(--dh-ok-text)}
.dh-chip-icon--warn{background:color-mix(in srgb,var(--dh-warn) 16%,var(--ui-surface));color:var(--dh-warn-text)}
.dh-chip-icon--bad{background:color-mix(in srgb,var(--dh-bad) 14%,var(--ui-surface));color:var(--dh-bad-text)}
.dh-chip-icon--muted{background:var(--ui-surface-subtle);color:var(--dh-text-2)}
.dh-dot{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--dh-muted)}
.dh-dot--ok{background:var(--dh-ok)}
.dh-dot--warn{background:var(--dh-warn)}
.dh-dot--bad{background:var(--dh-bad)}
.dh-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid var(--dh-line-strong);border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;color:var(--dh-text-2);white-space:nowrap}
.dh-state{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;max-width:100%;padding:2px 10px;border-radius:9px;background:var(--ui-surface-subtle);font-size:14px;font-weight:700;line-height:1.4;color:var(--ui-text);white-space:normal;overflow-wrap:anywhere}

/* ── 요약 띠 ───────────────────────────────────────────────────────────── */
.dh-band{grid-column:span 12;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 28px;align-items:center}
.dh-ring{--ok:0;--bad:0;--unk:0;position:relative;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(var(--dh-ok) 0 calc(var(--ok)*1%),var(--dh-bad) 0 calc((var(--ok) + var(--bad))*1%),var(--dh-muted) 0 calc((var(--ok) + var(--bad) + var(--unk))*1%),var(--ui-surface-subtle) 0 100%)}
.dh-ring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--ui-surface)}
.dh-ring__text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.dh-ring__num{font-size:var(--ui-font-metric);font-weight:800;color:var(--ui-text)}
.dh-ring__label{font-size:13px;font-weight:700;color:var(--dh-text-2)}
.dh-band__body{display:grid;gap:14px;min-width:0}
.dh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dh-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--dh-line);border-radius:12px;background:var(--ui-surface-subtle);min-width:0}
.dh-stat__label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--dh-text-2)}
.dh-stat__num{font-size:var(--ui-font-metric);font-weight:800;line-height:1.2;color:var(--ui-text)}
.dh-stat__num--bad{color:var(--dh-bad-text)}
/* 시각은 핵심 숫자가 아니라 표기다 — 한 줄로 두고(nowrap) 좁은 칸에서는 조금 줄인다. */
.dh-stat__time{font-size:20px;font-weight:800;line-height:1.2;color:var(--ui-text);white-space:nowrap}
.dh-stat__sub{font-size:13px;color:var(--dh-text-2)}
.dh-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dh-toolbar .ui-btn{min-height:44px;white-space:normal}
.dh-index{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:1.6;color:var(--ui-text)}
.dh-index .ui-btn{min-height:44px}
.dh-live{font-size:14px;line-height:1.55;color:var(--dh-text-2);min-height:0}
.dh-live:empty{display:none}

/* ── 설명 접힘 ─────────────────────────────────────────────────────────── */
.dh-about{grid-column:span 12;padding:0}
.dh-about>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;cursor:pointer;font-size:15px;font-weight:700;list-style:none;color:var(--ui-text)}
.dh-about>summary::-webkit-details-marker{display:none}
.dh-about>summary::after,.dh-section>summary::after,.dh-row>summary::after{content:"";flex:0 0 10px;width:10px;height:10px;margin-left:auto;border-right:2px solid var(--dh-text-2);border-bottom:2px solid var(--dh-text-2);transform:rotate(45deg) translateY(-3px)}
.dh-about[open]>summary::after,.dh-section[open]>summary::after,.dh-row[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.dh-about__body{display:grid;gap:10px;padding:0 20px 18px;font-size:14px;line-height:1.65;color:var(--dh-text-2)}
.dh-about__body p{margin:0}
.dh-about__body b{color:var(--ui-text)}

/* ── 분야 카드 ─────────────────────────────────────────────────────────── */
.dh-area{grid-column:span 3;display:flex;flex-direction:column;gap:10px;min-height:196px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border-color:color-mix(in srgb,var(--ui-primary) 34%,var(--dh-line))}
.dh-area[data-diag-state="abnormal"]{border-color:color-mix(in srgb,var(--dh-bad) 55%,var(--dh-line))}
.dh-area:hover{background:color-mix(in srgb,var(--ui-primary-soft) 55%,var(--ui-surface))}
.dh-area__head{display:flex;align-items:center;gap:12px;min-width:0}
.dh-area__title{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--ui-text)}
.dh-area__count{flex:0 0 auto}
.dh-area__figure{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dh-area__num{font-size:var(--ui-font-metric);font-weight:800;line-height:1.1;color:var(--ui-text)}
.dh-area__num--bad{color:var(--dh-bad-text)}
.dh-area__num--warn{color:var(--dh-warn-text)}
.dh-area__num--ok{color:var(--dh-ok-text)}
.dh-area__numlabel{font-size:14px;font-weight:700;color:var(--dh-text-2)}
.dh-area__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;line-height:1.5;color:var(--dh-text-2)}
.dh-area__meta span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dh-area__go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:14px;font-weight:700;color:var(--ui-primary)}

/* ── 분야 세부 항목 ───────────────────────────────────────────────────── */
.dh-section{grid-column:span 12;padding:0}
.dh-section>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:14px 20px;cursor:pointer;list-style:none}
.dh-section>summary::-webkit-details-marker{display:none}
.dh-section__title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.dh-section__name{font-size:16px;font-weight:700;line-height:1.35;color:var(--ui-text)}
.dh-section__asks{font-size:14px;line-height:1.5;color:var(--dh-text-2)}
.dh-section__verdict{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.dh-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 20px;align-items:stretch}

.dh-row{background:var(--ui-surface-subtle);border:1px solid var(--dh-line);border-radius:12px;min-width:0}
.dh-row[data-diag-state="abnormal"]{border-color:color-mix(in srgb,var(--dh-bad) 50%,var(--dh-line))}
.dh-row>summary{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:14px 16px;cursor:pointer;list-style:none}
.dh-row>summary::-webkit-details-marker{display:none}
.dh-row__main{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}
.dh-row__title{font-size:15px;font-weight:700;line-height:1.4;color:var(--ui-text)}
.dh-row__en{font-size:14px;font-weight:600;color:var(--dh-text-2)}
.dh-row__tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dh-row__line{display:block;font-size:14px;line-height:1.55;color:var(--dh-text-2);font-weight:400}
.dh-row__line b{font-weight:800;color:var(--ui-text)}
.dh-blind-details{font-size:14px;line-height:1.55;color:var(--text2)}
.dh-blind-details>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700}
.dh-blind-details p{margin:6px 0;overflow-wrap:anywhere}
.dh-row__explanation{display:grid;gap:8px;margin:10px 0;padding:14px;border:1px solid var(--dh-line-strong);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font-size:16px;line-height:1.65;font-weight:500}
.dh-row__explanation b{display:block;font-weight:800}
.dh-row__body{display:grid;gap:10px;padding:0 16px 16px}
.dh-row__actions{display:flex;flex-wrap:wrap;gap:8px}
.dh-row__actions .ui-btn{flex:1 1 auto;min-width:120px;min-height:44px}
.dh-row__warn{margin:0;font-size:14px;color:var(--dh-bad-text)}

/* 문제만 보기 — 표현만 거른다(판정·실행은 그대로). 걸러진 행은 사라지지 않고 문서에서만 숨긴다. */
.dh-root[data-filter="abnormal"] .dh-area:not([data-diag-state="abnormal"]),
.dh-root[data-filter="abnormal"] .dh-section:not([data-diag-state="abnormal"]),
.dh-root[data-filter="abnormal"] .dh-row:not([data-diag-state="abnormal"]){display:none}

/* ── 반응형 — 트랙 수만 줄인다. 좁은 규칙을 뒤에 둔다. ── */
@media (max-width:1179px){
  .dh-root{--dh-gap:16px}
  .dh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 721~1179px: 화면비가 거의 정사각(폴드 펼침·가로)이면 6트랙 카드 2열, 길쭉한 세로 태블릿은 데스크톱 배치 유지(기기 구분 절). */
@media (min-width:721px) and (max-width:1179px) and (min-aspect-ratio:3/4){
  .dh-area{grid-column:span 6}
}
@media (max-width:720px){
  .dh-root{--dh-gap:12px}
  .dh-area{grid-column:span 6;min-height:0}
  .dh-rows{grid-template-columns:minmax(0,1fr);padding:0 12px 14px}
  .dh-band{grid-template-columns:minmax(0,1fr);justify-items:start}
  .dh-card{padding:16px}
  .dh-section>summary{padding:12px 14px}
}
@media (max-width:479px){
  .dh-area{grid-column:span 12}
  .dh-stat{padding:10px 12px}
  .dh-stat__num{font-size:22px}
  .dh-stat__time{font-size:16px}
  .dh-ring{width:112px;height:112px}
  .dh-toolbar .ui-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .dh-area{transition:none}
}