/* 学習診断(dg- 接頭辞) */
.dg-page{ max-width:860px; }
.dg-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin:18px 0 6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.dg-stats > div{ padding:14px 16px; border-left:1px solid var(--line); }
.dg-stats > div:first-child{ border-left:0; }
.dg-stats b{ display:block; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.dg-stats span{ font-size:12px; color:var(--sub); }

.dg-route{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.dg-step{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:14px; align-items:start; padding:14px 4px; border-bottom:1px solid var(--line); }
.dg-no{ font-size:13px; color:var(--sub); text-align:right; font-variant-numeric:tabular-nums; line-height:22px; }
.dg-main b{ font-size:15px; line-height:22px; }
.dg-main small{ margin-left:10px; font-size:12px; color:var(--sub); }
.dg-main p{ margin:4px 0 0; font-size:13px; line-height:1.75; color:var(--sub); }
.dg-acts{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }

.dg-stage{ margin:16px 0 4px; font-size:12.5px; font-weight:600; color:var(--sub); }
.dg-units{ border-top:1px solid var(--line); }
.dg-stage + .dg-unit{ border-top:0; }
.dg-unit{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(60px, 1fr) 56px minmax(0, 1.4fr); gap:14px; align-items:center; width:100%; text-align:left; padding:10px 4px; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text); font-size:13.5px; }
.dg-unit:hover{ background:var(--hover); }
.dg-unit-title{ min-width:0; }
.dg-bar{ height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.dg-bar i{ display:block; height:100%; background:var(--accent); }
.dg-unit-n{ font-size:12px; color:var(--sub); text-align:right; font-variant-numeric:tabular-nums; }
.dg-unit-note{ font-size:12px; color:var(--sub); }
.dg-unit.weak .dg-unit-note{ color:var(--ng); font-weight:600; }

.dg-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dg-table th, .dg-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); }
.dg-table th{ font-size:12px; font-weight:600; color:var(--sub); }
.dg-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.dg-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); font-size:13px; }
.dg-list li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding:9px 4px; border-bottom:1px solid var(--line); }
.dg-list span{ color:var(--sub); }
.dg-empty{ margin:6px 0; font-size:13px; color:var(--sub); line-height:1.75; }
.dg-foot{ margin:26px 0 0; font-size:12px; line-height:1.8; color:var(--faint); }

@media (max-width:640px){
  .dg-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dg-stats > div:nth-child(3){ border-left:0; }
  .dg-stats > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .dg-step{ grid-template-columns:22px minmax(0, 1fr); }
  .dg-acts{ grid-column:2; justify-content:flex-start; }
  .dg-unit{ grid-template-columns:minmax(0, 1fr) 56px; gap:4px 12px; }
  .dg-bar{ grid-column:1 / -1; order:3; }
  .dg-unit-note{ grid-column:1 / -1; order:4; }
}