/* ==========================================================
   블로그 지수 진단 (blogcheck.html) 전용 스타일
   — 사이트 공통 토큰(style.css :root)을 그대로 사용합니다.
   ========================================================== */

/* 입력 폼 */
.bc-form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 28px auto 0;
}
.bc-form input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: none;
  transition: border-color .15s;
}
.bc-form input:focus { border-color: var(--ink-30); }
.bc-form input::placeholder { color: var(--ink-30); }
.bc-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-50);
  text-align: center;
}
.bc-status {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ink-70);
  text-align: center;
}
.bc-status.error { color: #c0392b; }

/* 결과 공통 카드 */
.bc-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 28px;
}

/* 프로필 */
.bc-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bc-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card-bg-deep);
}
.bc-who { flex: 1; min-width: 200px; }
.bc-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bc-id { font-size: 14px; color: var(--ink-50); font-weight: 400; }
.bc-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card-bg-deep);
  color: var(--ink-70);
}
.bc-badge--point { background: var(--yellow-soft); color: var(--ink); }
.bc-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.bc-stat b { font-size: 17px; color: var(--ink); font-weight: 700; }
.bc-stat span { display: block; font-size: 12.5px; color: var(--ink-50); margin-top: 2px; }

/* 등급 */
.bc-grade-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 16px;
}
.bc-grade-name {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bc-grade-score { font-size: 14px; color: var(--ink-50); margin-top: 6px; }
.bc-scale { min-width: 0; }
.bc-scale-track {
  display: flex;
  gap: 3px;
}
.bc-scale-seg {
  flex: 1;
  height: 10px;
  border-radius: 4px;
  background: var(--card-bg-deep);
}
.bc-scale-seg.on { background: var(--ink-30); }
.bc-scale-seg.now { background: var(--yellow); }
.bc-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-50);
  margin-top: 8px;
}
.bc-grade-comment { margin-top: 14px; font-size: 15px; color: var(--ink-70); }

/* 항목별 점수 */
.bc-parts { display: grid; gap: 14px; margin-top: 6px; }
.bc-part {
  display: grid;
  grid-template-columns: 92px 1fr 76px;
  gap: 14px;
  align-items: center;
}
.bc-part-label { font-size: 14px; color: var(--ink-70); }
.bc-part-track {
  height: 8px;
  border-radius: 4px;
  background: var(--card-bg-deep);
  overflow: hidden;
}
.bc-part-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--ink-70);
  width: 0;
  transition: width .6s ease;
}
.bc-part-val { font-size: 13.5px; color: var(--ink-50); text-align: right; }

/* 최근 글 목록 */
.bc-posts { display: grid; gap: 10px; margin-top: 6px; }
.bc-post {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 18px;
}
.bc-post-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-post-title:hover { text-decoration: underline; }
.bc-post-meta {
  font-size: 12.5px;
  color: var(--ink-50);
  white-space: nowrap;
}
.bc-rank {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--card-bg-deep);
  color: var(--ink-50);
}
.bc-rank--in { background: var(--yellow-soft); color: var(--ink); }
.bc-rank--miss { background: #FBEAE8; color: #c0392b; }

/* 결과 그리드 배치 */
.bc-result-grid { display: grid; gap: 20px; margin-top: 36px; }
.bc-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-50);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.bc-disclaimer {
  font-size: 12.5px;
  color: var(--ink-30);
  margin-top: 18px;
  text-align: center;
}

@media (max-width: 640px) {
  .bc-form { flex-direction: column; }
  .bc-grade-wrap { grid-template-columns: 1fr; gap: 18px; }
  .bc-part { grid-template-columns: 80px 1fr 64px; gap: 10px; }
  .bc-scale-labels span:nth-child(2) { display: none; }
}