/* 무료 진단 결과.
 *
 * 공개 화면 안에서 펼쳐지므로 **바탕 디자인을 덮지 않는다.**
 * 색은 판정 넷에만 쓴다 — 고쳐야 함 · 확인 필요 · 괜찮음 · 못 잼.
 */
.진단결과 {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 28px auto;
  padding: 22px;
  background: #fff;
  border: 1px solid #d9dadd;
  border-radius: 10px;
  color: #202124;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}
.진단중, .진단못함 { margin: 0; font-size: 15px; }
.진단못함 { color: #b42318; font-weight: 700; }
.진단중작게 { display: inline-block; margin-top: 6px; font-size: 13px; color: #64676c; font-weight: 400; }

.진단요약머리 { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
                padding-bottom:16px; flex-wrap:wrap; }
.진단주소 { margin:0; font-weight:800; word-break:break-all; }
.진단시각 { margin:0; font-size:13px; color:#64676c; white-space:nowrap; }
.진단점수목록 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.진단점수카드 { min-width:0; padding:20px; border:1px solid #e4e5e7; border-radius:10px;
                background:#fafafa; }
.진단점수카드 > span { display:block; margin-bottom:8px; font-size:14px; font-weight:900; color:#303236; }
.진단점수카드 strong { display:block; font-size:38px; line-height:1; color:#c4352b; letter-spacing:-.04em; }
.진단점수카드 small { margin-left:4px; font-size:13px; font-weight:600; color:#74777c; letter-spacing:0; }
.진단점수막대 { height:6px; margin-top:15px; overflow:hidden; background:#e8e9eb; border-radius:99px; }
.진단점수막대 i { display:block; height:100%; background:#c4352b; border-radius:99px; }
.진단다음 { display:flex; justify-content:space-between; align-items:center; gap:18px;
            margin-top:16px; padding-top:16px; border-top:1px solid #ececee; }
.진단다음 p { margin:0; }
.진단다음 p strong, .진단다음 p span { display:block; }
.진단다음 p strong { font-size:14px; }
.진단다음 p span { margin-top:2px; color:#64676c; font-size:12px; }
.진단다음 > div { display:flex; gap:8px; flex:0 0 auto; }
.진단다음 a { min-height:44px; display:inline-flex; align-items:center; justify-content:center;
              padding:9px 13px; border:1px solid #d9dadd; border-radius:6px; color:#202124;
              background:#fff; text-decoration:none; font-size:13px; font-weight:850; }
.진단다음 a.진단다음주 { border-color:#c4352b; background:#c4352b; color:#fff; }

.진단묶음 { font-size: 14px; font-weight: 900; letter-spacing: .04em; color: #c4352b;
            margin: 22px 0 8px; }
.진단목록 { list-style: none; margin: 0; padding: 0; }
.진단줄 { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px;
          padding: 12px 0; border-bottom: 1px solid #f0f0f1; align-items: start; }
.진단줄:last-child { border-bottom: 0; }
.진단급 { font-size: 12px; font-weight: 900; padding: 4px 0; text-align: center;
          border-radius: 4px; align-self: start; }
.진단줄.bad  .진단급 { background: #fff3f1; color: #b42318; }
.진단줄.warn .진단급 { background: #fff8ec; color: #a15c07; }
.진단줄.good .진단급 { background: #f1f8f4; color: #1b7f5a; }
.진단줄.none .진단급 { background: #f3f4f5; color: #64676c; }
.진단줄 strong { display: block; font-size: 15px; }
.진단값 { display: block; font-size: 13px; color: #64676c; margin-top: 2px; word-break: break-all; }
.진단왜 { margin: 6px 0 0; font-size: 13px; color: #4b5563; }
.진단맺음 { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #ececee;
            font-size: 13px; color: #64676c; }

@media (max-width: 600px) {
  .진단결과 { padding: 16px; }
  .진단줄 { grid-template-columns: 1fr; gap: 4px; }
  .진단급 { justify-self: start; padding: 3px 10px; }
  .진단점수목록 { grid-template-columns:1fr; }
  .진단점수카드 { display:grid; grid-template-columns:1fr auto; align-items:center; padding:16px; }
  .진단점수카드 > span { margin:0; }
  .진단점수카드 strong { font-size:32px; }
  .진단점수막대 { grid-column:1 / -1; width:100%; }
  .진단다음 { display:block; }
  .진단다음 > div { margin-top:12px; }
  .진단다음 a { flex:1; }
}

/* 히어로 밖으로 나오면서 화면 폭을 그대로 쓴다. 양옆이 붙지 않게 한다. */
@media (max-width: 1240px) {
  .진단결과 { margin-left: 20px; margin-right: 20px; }
}