/* =========================================
   Character Detail
   ======================================= */
body {
 opacity: 1;
}
.character-detail {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.section-title-character-detail {
 margin-inline: 60px;
 margin-bottom: 60px;
}
.character-detail .container {
 max-width: unset;
 padding-inline: unset;
 margin-inline: 60px;
 width: auto;
}

.detail-main .detail-image {
 max-width: 400px;
 width: 100%;
 border-radius: 8px;
}
.detail-title {
 font-size: 24px;
 margin-top: 1rem;
 font-weight: 700;
 text-align: left;
}
.detail-desc {
 margin-top: 1rem;
 font-size: 1rem;
 color: #555;
 text-align: left;
}
.detail-tag {
 margin-top: 0.5rem;
 font-size: 0.9rem;
 color: #333;
}

.section-subtitle {
 font-size: 1.5rem;
 margin-bottom: 1rem;
 font-weight: 600;

 text-align: left;
}
.related-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
}
.related-item {
 flex: 0 0 calc((100% - 48px) / 3);
 max-width: calc((100% - 48px) / 3);
 text-decoration: none;
}
.related-item .image {
 position: relative;
 width: 100%;
 display: flex;
 align-items: center;
 aspect-ratio: 16/9;
 border-radius: 8px;
 overflow: hidden;
}
.related-item img,
.related-item video {
 width: 100%;
 object-fit: cover;
 aspect-ratio: 16 / 9;
 transition: all 0.4s ease;
}
.related-title {
 margin-top: 8px;
 font-size: 0.9rem;
 font-weight: 500;
 color: #444;
}

@media (min-width: 769px) {
 .related-item:hover img,
 .related-item:hover video {
  transform: scale(1.1);
 }
}

@media (max-width: 768px) {
 .section-title-character-detail {
  margin-inline: 30px;
  margin-bottom: 30px;
 }
 .character-detail .container {
  margin-inline: 30px;
 }
}

@media (max-width: 600px) {
 .character-detail {
  padding-block: 30px 0;
 }
 .section-title-character-detail {
  margin-inline: 20px;
  margin-bottom: 30px;
 }
 .character-detail .container {
  margin-inline: 20px;
 }
 .detail-title {
  font-size: 22px;
 }
 .detail-image {
  max-width: 100%;
 }
 .related-grid {
  margin-left: 0; /* 左余白解除 */
 }
 .related-item {
  flex: 1 1 100%;
  max-width: 100%;
 }
}