.page-blog-top-no-hu { color: #FFF1E8; background-color: #140C0C; }
.page-blog-top-no-hu__hero { background-color: #2A1212; padding: 10px 0 0 0; margin: 0; }
.page-blog-top-no-hu__hero-image { background-color: #140C0C; }
.page-blog-top-no-hu__hero-banner { width: 100%; height: auto; aspect-ratio: 17 / 5; object-fit: cover; display: block; border-bottom: 3px solid #6A1E1E; }
.page-blog-top-no-hu__hero-content { max-width: 1200px; margin: 0 auto; padding: 16px 16px 24px; text-align: center; }
.page-blog-top-no-hu__main-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; color: #FFF1E8; max-width: 800px; margin: 0 auto 8px; }
.page-blog-top-no-hu__hero-description { font-size: 1rem; line-height: 1.6; color: #D0DDE7; max-width: 700px; margin: 0 auto 16px; }
.page-blog-top-no-hu__hero-cta { display: inline-block; background: linear-gradient(180deg, #FFB04A 0%, #D86A14 100%); color: #140C0C; font-weight: 700; text-decoration: none; padding: 12px 28px; border-radius: 999px; transition: transform 0.2s ease; }
.page-blog-top-no-hu__hero-cta:hover { transform: scale(1.05); }
.page-blog-top-no-hu__intro { padding: 40px 16px 16px; }
.page-blog-top-no-hu__intro-container { max-width: 1000px; margin: 0 auto; text-align: center; }
.page-blog-top-no-hu__section-title { color: #F3C54D; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; margin-bottom: 16px; text-align: center; }
.page-blog-top-no-hu__intro-text { line-height: 1.8; color: #D0DDE7; font-size: 1rem; }
.page-blog-top-no-hu__top-games { padding: 24px 16px; }
.page-blog-top-no-hu__section-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.page-blog-top-no-hu__game-card { display: flex; flex-direction: column; background-color: #2A1212; border: 1px solid #6A1E1E; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.page-blog-top-no-hu__game-card-media { background-color: #140C0C; }
.page-blog-top-no-hu__game-image { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.page-blog-top-no-hu__game-card-content { padding: 24px; }
.page-blog-top-no-hu__game-title { color: #F3C54D; font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }
.page-blog-top-no-hu__game-description { color: #D0DDE7; line-height: 1.7; margin-bottom: 16px; }
.page-blog-top-no-hu__game-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.page-blog-top-no-hu__game-tag { background-color: #7E0D0D; color: #FFF1E8; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.page-blog-top-no-hu__game-cta { display: inline-block; background: linear-gradient(180deg, #FFB04A 0%, #D86A14 100%); color: #140C0C; font-weight: 700; text-decoration: none; padding: 10px 24px; border-radius: 999px; transition: transform 0.2s ease; }
.page-blog-top-no-hu__game-cta:hover { transform: scale(1.05); }
.page-blog-top-no-hu__guide { padding: 24px 16px 40px; }
.page-blog-top-no-hu__guide-inner { max-width: 1000px; margin: 0 auto; }
.page-blog-top-no-hu__guide-figure { margin: 0 0 24px; text-align: center; }
.page-blog-top-no-hu__guide-figure img { width: 100%; max-width: 800px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; }
.page-blog-top-no-hu__guide-figure figcaption { font-size: 0.9rem; color: #8A9BA8; margin-top: 8px; }
.page-blog-top-no-hu__guide-steps { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.page-blog-top-no-hu__guide-step { background-color: #2A1212; padding: 20px; border-radius: 12px; border-left: 4px solid #F3C54D; }
.page-blog-top-no-hu__guide-step-title { font-size: 1rem; color: #F3C54D; margin: 0 0 8px; }
.page-blog-top-no-hu__guide-step-text { color: #D0DDE7; line-height: 1.6; }
.page-blog-top-no-hu__guide-cta { display: block; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; background: linear-gradient(180deg, #FFB04A 0%, #D86A14 100%); color: #140C0C; font-weight: 700; text-decoration: none; padding: 14px 32px; border-radius: 999px; box-sizing: border-box; transition: transform 0.2s ease; }
.page-blog-top-no-hu__guide-cta:hover { transform: scale(1.05); }
.page-blog-top-no-hu__faq { padding: 24px 16px 48px; }
.page-blog-top-no-hu__faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.page-blog-top-no-hu__faq-item { background-color: #2A1212; border: 1px solid #6A1E1E; border-radius: 12px; overflow: hidden; }
.page-blog-top-no-hu__faq-question { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; color: #FFF1E8; font-weight: 600; }
.page-blog-top-no-hu__faq-question::-webkit-details-marker { display: none; }
.page-blog-top-no-hu__faq-toggle { color: #F3C54D; font-size: 1.2rem; font-weight: 700; margin-left: 16px; }
.page-blog-top-no-hu__faq-answer { padding: 0 20px 16px; color: #D0DDE7; line-height: 1.7; }
.page-blog-top-no-hu__faq-answer p { margin: 0 0 12px; }
.page-blog-top-no-hu__cta-banner { background: linear-gradient(135deg, #7E0D0D 0%, #C61F1F 100%); padding: 32px 16px; text-align: center; }
.page-blog-top-no-hu__cta-banner-content { max-width: 800px; margin: 0 auto; }
.page-blog-top-no-hu__cta-banner-title { font-size: clamp(1.2rem, 3vw, 1.8rem); color: #FFF1E8; margin-bottom: 12px; font-weight: 700; }
.page-blog-top-no-hu__cta-banner-text { font-size: 1rem; color: #D0DDE7; line-height: 1.6; margin-bottom: 24px; }
.page-blog-top-no-hu__cta-banner-buttons { display: flex; justify-content: center; width: 100%; max-width: 100%; overflow: hidden; }
.page-blog-top-no-hu__cta-banner-button { display: inline-block; width: auto; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; text-align: center; background: linear-gradient(180deg, #FFB04A 0%, #D86A14 100%); color: #140C0C; font-weight: 700; text-decoration: none; padding: 14px 32px; border-radius: 999px; }

/* ===== Responsive: 1024px ===== */
@media (max-width: 1024px) {
  .page-blog-top-no-hu__hero-banner { aspect-ratio: 16 / 6; }
  .page-blog-top-no-hu__section-container { gap: 24px; }
}

/* ===== Responsive: 768px ===== */
@media (max-width: 768px) {
  .page-blog-top-no-hu__hero-banner { aspect-ratio: 2 / 1; }
  .page-blog-top-no-hu__hero-content { padding: 16px 12px 20px; }
  .page-blog-top-no-hu__main-title { font-size: clamp(1.2rem, 5vw, 1.4rem); }
  .page-blog-top-no-hu__hero-description { font-size: 0.9rem; }
  .page-blog-top-no-hu__hero-cta { display: block; width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; text-align: center; padding: 14px 16px; font-size: 1rem; }
  .page-blog-top-no-hu__intro { padding: 24px 12px 8px; }
  .page-blog-top-no-hu__section-title { font-size: 1.1rem; }
  .page-blog-top-no-hu__intro-text { font-size: 0.9rem; }
  .page-blog-top-no-hu__top-games { padding: 16px 12px; }
  .page-blog-top-no-hu__section-container { gap: 24px; }
  .page-blog-top-no-hu__game-card-content { padding: 16px; }
  .page-blog-top-no-hu__game-title { font-size: 1.1rem; }
  .page-blog-top-no-hu__game-description { font-size: 0.9rem; }
  .page-blog-top-no-hu__game-cta { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; padding: 12px 16px; font-size: 0.9rem; }
  .page-blog-top-no-hu__guide { padding: 16px 12px 32px; }
  .page-blog-top-no-hu__guide-figure img { max-width: 100%; height: auto; }
  .page-blog-top-no-hu__guide-steps { gap: 16px; margin-bottom: 24px; }
  .page-blog-top-no-hu__guide-cta { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; padding: 14px 16px; font-size: 1rem; }
  .page-blog-top-no-hu__faq { padding: 16px 12px 32px; }
  .page-blog-top-no-hu__faq-question { font-size: 0.95rem; padding: 14px 16px; }
  .page-blog-top-no-hu__faq-answer { font-size: 0.9rem; padding: 0 16px 14px; }
  .page-blog-top-no-hu__cta-banner { padding: 24px 12px; }
  .page-blog-top-no-hu__cta-banner-title { font-size: 1.2rem; }
  .page-blog-top-no-hu__cta-banner-text { font-size: 0.9rem; margin-bottom: 20px; }
  .page-blog-top-no-hu__cta-banner-buttons { flex-direction: column; }
  .page-blog-top-no-hu__cta-banner-button { display: block; width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; padding: 14px 16px; font-size: 1rem; }
  .page-blog-top-no-hu img { max-width: 100% !important; height: auto !important; }
}