/* 진단 모드 — 하위 탭 셸 + 이미지 진단 + 텍스트 체크 */
.diagnose{height:100%;display:flex;flex-direction:column;min-height:0}
.diag-tabs{
  display:flex;gap:6px;padding:12px 22px 0;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.diag-tab{
  padding:8px 16px;border:1px solid transparent;border-bottom:0;background:none;
  border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;
  font-size:13px;color:var(--text-sub);
}
.diag-tab:hover{background:var(--bg-tint)}
.diag-tab[aria-current="true"]{
  border-color:var(--border);background:var(--bg);color:var(--text);font-weight:700;
  margin-bottom:-1px;padding-bottom:9px;
}
.diag-host{flex:1;min-height:0;overflow-y:auto;padding:18px 22px}

/* ── 이미지 진단 ───────────────────────────────── */
.diag-drop{
  /* 흰 배경(--bg) — 페이지 배경(--bg-soft, 옅은 회색) 위에 그대로 두면
     회색 배경에 회색 글자가 겹쳐 가독성이 떨어진다. */
  border:2px dashed var(--border-strong);border-radius:var(--radius-lg);
  padding:26px 18px;text-align:center;cursor:pointer;background:var(--bg);
  color:var(--text-sub);font-size:13px;
}
.diag-drop:hover,.diag-drop.over{border-color:var(--primary);background:var(--accent-bg)}
.diag-drop .diag-file{display:none}
.diag-status:not(:empty){
  margin-top:10px;padding:8px 12px;border-radius:var(--radius);
  background:var(--warn-bg);color:var(--warn);font-size:12.5px;
}

.diag-measured{display:flex;gap:18px;align-items:flex-start;margin-top:18px;flex-wrap:wrap}
.diag-measured:empty{display:none}
.diag-preview{
  width:210px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius);
  padding:8px;background:
    linear-gradient(45deg,var(--bg-tint) 25%,transparent 25%,transparent 75%,var(--bg-tint) 75%) 0 0/16px 16px,
    linear-gradient(45deg,var(--bg-tint) 25%,transparent 25%,transparent 75%,var(--bg-tint) 75%) 8px 8px/16px 16px;
}
.diag-preview img{display:block;max-width:100%;height:auto;margin:0 auto}
.diag-facts{
  flex:1;min-width:260px;display:grid;grid-template-columns:auto 1fr;
  gap:5px 14px;margin:0;font-size:12.5px;
}
.diag-facts dt{color:var(--text-muted);font-size:11.5px}
.diag-facts dd{margin:0;font-weight:600;word-break:break-all}

.diag-matches{margin-top:22px}
.diag-matches h3{
  margin:20px 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text-muted);
}
.diag-matches h3:first-child{margin-top:0}
.match-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;
}
.match{
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;
  background:var(--bg);display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.match-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.match-name{font-weight:700;font-size:13px}
.match-variant{font-size:12px;color:var(--text-sub)}
.media-tag{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;
  background:var(--bg-tint);color:var(--text-sub);font-size:10.5px;font-weight:700;flex-shrink:0;
}
.media-tag .logo-chip{width:14px;height:14px;font-size:8px;flex-shrink:0}
.match-meta{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--text-sub);width:100%;
}
.match-meta .badge{margin-left:auto}
.match-size{font-weight:600;color:var(--text)}
.match-delta{color:var(--text-muted)}
.match-badges{display:flex;gap:5px;flex-wrap:wrap}
.match > .btn.small{align-self:flex-end}
.tag.user{
  padding:1px 7px;border-radius:999px;background:var(--info-bg);color:var(--info);
  font-size:10.5px;font-weight:700;
}
.badge{
  padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  border:1px solid transparent;
}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.bad{background:var(--warn-bg);color:var(--warn)}
.badge.unknown{background:var(--bg-tint);color:var(--text-muted);cursor:help}
.btn.small{padding:4px 10px;font-size:11.5px}

/* ── 텍스트 체크 ───────────────────────────────── */
.diag-text-intro{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--text-sub)}
.text-input{
  width:100%;padding:11px 13px;border:1px solid var(--border-strong);
  border-radius:var(--radius);font:inherit;font-size:13.5px;resize:vertical;
  background:var(--bg);color:var(--text);
}
.text-input:focus{outline:2px solid var(--accent-bg);border-color:var(--primary)}
.text-stats{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);
}
.text-stat{
  border:1px solid var(--border);border-radius:var(--radius);padding:7px 12px;
  background:var(--bg-soft);display:flex;flex-direction:column;gap:2px;min-width:74px;
}
.text-stat.bytes{background:var(--info-bg);border-color:#DBEAFE}
.text-stat.bytes .ts-value{color:var(--info)}
.text-stat.lines{background:var(--success-bg);border-color:#DCFCE7}
.text-stat.lines .ts-value{color:var(--success)}
.ts-label{font-size:10.5px;color:var(--text-muted)}
.ts-value{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.text-media-bar{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 10px}
.text-media-bar .media-chip.toggle{margin-left:auto}
.text-media-bar .media-chip.toggle[aria-pressed="true"]{background:var(--success);border-color:var(--success);color:#fff}
.match-note{
  width:100%;padding:6px 9px;border-radius:6px;font-size:11.5px;color:var(--text-sub);
  background:#FFFBEB;border-left:3px solid #F59E0B;
}
.match.text-ok{border-left:3px solid var(--success);background:var(--success-bg)}
.match.text-over{border-left:3px solid var(--warn);background:var(--warn-bg)}
.match.text-warn{border-left:3px solid #D97706;background:#FFFBEB}
.match.text-near{border-left:3px solid var(--info);background:var(--info-bg)}
.match.text-empty{border-left:3px solid var(--border-strong)}
.badge.over{background:var(--warn-bg);color:var(--warn)}
.badge.warn{background:#FFFBEB;color:#B45309}
.badge.near{background:var(--info-bg);color:var(--info)}
.badge.ok{background:var(--success-bg);color:var(--success)}
.badge.empty{background:var(--bg-tint);color:var(--text-muted)}

@media (max-width:1000px){
  .diag-host{padding:14px}
  .diag-tabs{padding:10px 14px 0}
  .diag-preview{width:100%}
}