/* === ranking v7 styles === */

/* generic */
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.section-title { font-size: 24px; font-weight: 700; margin: 32px 0 20px; padding-bottom: 12px; border-bottom: 3px solid #333; }
.card { background:#fff; border:1px solid #e7e7e7; border-radius:8px; padding:20px; }
.entry-title { font-size: 28px; margin: 24px 0; }

/* intro */
.intro-section { margin: 20px 0 32px; line-height: 1.9; }

/* PR */
.pr-section .pr-name { font-size: 18px; }
.pr-section .pr-meta { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.pr-section .pr-desc p { margin: 0 0 10px; }

/* ranking list */
.ranking-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.rank-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; background:#fff; border:1px solid #e7e7e7; border-radius:12px; padding:16px; }
.rank-badge { background:#0d6efd; color:#fff; font-weight:700; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.rank-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rank-title { font-size:20px; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.rank-label { font-size:12px; background:#f1f3f5; border:1px solid #dde2e6; padding:2px 8px; border-radius:999px; }
.rank-logo img { max-width: 120px; height:auto; }
.rank-meta { list-style:none; padding:0; margin:10px 0; display:flex; flex-wrap:wrap; gap:14px; color:#333; }
.rank-desc p { margin: 0 0 10px; }
.rank-analysis .ana-item { margin: 4px 0; color:#555; }
.rank-scores { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.score-badge { font-size:12px; border:1px solid #e0e0e0; border-radius:999px; padding:4px 10px; background:#f8f9fa; }

/* howto */
.howto-section { margin: 40px 0; padding: 30px; background: #f9f9f9; border-radius: 8px; }
.howto-steps { display:flex; flex-direction:column; gap:20px; }
.howto-step { display:flex; gap:20px; background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.step-number { flex-shrink:0; width:50px; height:50px; background:#0d6efd; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.step-title { font-size:18px; font-weight:700; margin:0 0 6px; }
.step-description { color:#555; line-height:1.8; margin-bottom:10px; }
.step-image img { max-width:100%; height:auto; border-radius:4px; }

/* faq */
.faq-section { margin: 40px 0; padding: 30px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; }
.faq-list { display:flex; flex-direction:column; gap:18px; }
.faq-item { border-bottom:1px solid #eee; padding-bottom:16px; }
.faq-item:last-child { border-bottom:none; }
.faq-question { display:flex; align-items:flex-start; gap:12px; }
.faq-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#198754; color:#fff; border-radius:50%; font-weight:700; }
.faq-question h3 { margin:0; font-size:16px; }
.faq-answer { display:flex; gap:12px; margin-top:8px; }
.faq-answer .faq-icon { background:#0d6efd; }
.faq-answer-text { line-height:1.8; color:#333; }

/* conclusion */
.conclusion-section { margin: 40px 0; padding: 30px; background: #f0f8ff; border-left: 5px solid #0d6efd; border-radius: 4px; }
.conclusion-text p { margin: 0 0 12px; }

/* responsive */
@media (max-width: 768px) {
  .rank-card { grid-template-columns: 1fr; }
  .howto-step { flex-direction: column; }
  .step-number { width: 40px; height: 40px; font-size: 16px; }
}