/* 추천 동영상 박스 */
.recommend-box {
  background: linear-gradient(to bottom, #191919, #121212);
  border-radius: 12px;
  padding: 16px;
  width: 660px; /* 여유 있게 3x2 배치 가능 */
  min-height: 440px; /* 공지사항과 동일한 높이 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 추천 동영상 타이틀 */
.recommend-box h2 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.recommend-box h2::before {
  margin-right: 6px;
  font-size: 16px;
}

/* 동영상 카드 그리드 */
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 가로 3개 */
  gap: 12px;
}

.icon, h2 i {
  margin-right: 8px;
  color: #ff4d4d; /* 강조 색상 */
}


.index-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  flex-wrap: nowrap;  /* 세로 쌓임 방지 */
}


.section-header {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-bottom: 16px;
  padding-left: 4px;
}

.section-header i {
  color: #ff3366;
  margin-right: 10px;
}

/* 추천 동영상 박스 오른쪽 */
.video-column {
  width: 48%;
  min-width: 400px;
  background-color: #111;
  border-radius: 12px;
  padding: 20px;
}

.section-title2 {
  font-size: 1.2em;
  margin: 10px 30px;
  color: white;
}

.scroll-container {
  position: relative;
  overflow: hidden;
}

.media-row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;

  scroll-behavior: smooth;
  padding: 24px 36px 16px 12px;

  scroll-padding-left: 12px;
  scrollbar-width: none;

  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.media-row::-webkit-scrollbar {
  display: none;
}

.video-card, .image-card, .mg-card {
  min-width: 200px;
  max-width: 200px;
  border-radius: 4px;
  overflow: hidden;
}

.video-thumbnail, .image-thumbnail, .manga-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

.scroll-container {
  position: relative;
}

.scroll-btn.side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 50px;
  height: 50px;
  border-radius: 50%;

  background: linear-gradient(
    180deg,
    #FF8FA3 0%,
    #FF7A93 45%,
    #FF6B88 100%
  );
  box-shadow:
    0 6px 16px rgba(255, 107, 136, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  color: #fff;
  font-size: 20px;
  font-weight: bold;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 15;

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.scroll-btn.side.left {
  left: 12px;
}

.scroll-btn.side.right {
  right: 12px;
}

.scroll-btn.side:hover {
  transform: translateY(-50%) scale(1.1);
  background: #ff4f70;
}

.scroll-btn.side.disabled {
  pointer-events: none;
  opacity: 0.45;
}

.scroll-btn.side.disabled{
  opacity: 0 !important;
  pointer-events: none;
  cursor: default;
}

/* =========================================================
   Home Page - Modern Media Layout
   ========================================================= */

.home-hero,
.home-section{
  width: 100%;
  max-width: 1780px;
  margin: 0 auto;
  box-sizing: border-box;
}

.home-hero{
  padding: 18px 16px 10px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: stretch;
}

.hero-banner-card,
.hero-side-card,
.home-scroll-box{
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top left, rgba(255,107,136,0.10), transparent 34%),
    rgba(255,255,255,0.035);
  box-shadow: 0 16px 44px rgba(0,0,0,0.28);
}

.hero-banner-card{
  overflow: hidden;
  border-radius: 24px;
}

.hero-banner-inner{
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 21 / 6;
  min-height: 0;
  background: #050505;
  overflow: hidden;
}

.hero-banner-inner img{
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.03);
}

.main-banner-bg{
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.hero-banner-shade{
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(to top, rgba(0,0,0,0.38), transparent 48%),
    radial-gradient(circle at 18% 14%, rgba(255,107,136,0.16), transparent 38%);
}

.hero-side-card{
  border-radius: 24px;
  padding: 22px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 260px;
}

.hero-side-title{
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: rgba(255,255,255,0.96);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  white-space: nowrap;
}

.hero-side-title i{
  color: #ff6b88;
}

.hero-side-text{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   Section Header
   ========================================================= */

.home-section{
  padding: 22px 16px 0;
}

.home-section-head{
  margin-bottom: 12px;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.home-section-kicker{
  margin-bottom: 4px;

  color: #ff6b88;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-section-title{
  margin: 0;

  color: rgba(255,255,255,0.96);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


/* =========================================================
   Scroll Box
   ========================================================= */

.home-scroll-box{
  position: relative;

  border-radius: 22px;
  padding: 14px;
  overflow: hidden;
}

.media-row{
  display: flex;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  padding: 2px 2px 8px;
}

.media-row::-webkit-scrollbar{
  height: 8px;
}

.media-row::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.045);
  border-radius: 999px;
}

.media-row::-webkit-scrollbar-thumb{
  background: rgba(255,107,136,0.48);
  border-radius: 999px;
}

.media-row::-webkit-scrollbar-thumb:hover{
  background: rgba(255,107,136,0.72);
}


/* =========================================================
   Scroll Buttons
   ========================================================= */

.scroll-btn.side{
  position: absolute;
  top: 50%;
  z-index: 10;

  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50%;

  background: rgba(0,0,0,0.54);
  color: #fff;

  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);

  opacity: 0;
  transition:
    opacity .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.home-scroll-box:hover .scroll-btn.side{
  opacity: 1;
}

.scroll-btn.side.left{
  left: 12px;
}

.scroll-btn.side.right{
  right: 12px;
}

.scroll-btn.side:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}

.scroll-btn.side:active{
  transform: translateY(-50%) scale(0.96);
}


/* =========================================================
   Video Cards
   ========================================================= */

.home-video-card{
  flex: 0 0 250px;
  scroll-snap-align: start;
  min-width: 0;
}

.home-video-card a,
.home-image-card a,
.home-manga-card a{
  color: inherit;
  text-decoration: none;
}

.home-video-thumb{
  position: relative;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: 16px;
  background: #000;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.home-video-thumb img{
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  transition:
    transform .22s ease,
    filter .22s ease;
  
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.home-video-card:hover .home-video-thumb img{
  transform: scale(1.055);
  filter: brightness(1.08);
}

.home-video-duration{
  position: absolute;
  right: 8px;
  bottom: 8px;

  padding: 3px 7px;
  border-radius: 8px;

  background: rgba(0,0,0,0.76);
  color: #fff;

  font-size: 12px;
  font-weight: 800;
}

.home-video-info{
  padding: 10px 2px 0;
}

.home-video-title{
  margin: 0;

  color: rgba(255,255,255,0.94);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-video-author{
  margin: 6px 0 0;

  color: rgba(255,255,255,0.58);
  font-size: 12px;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-video-stats{
  margin-top: 8px;

  display: flex;
  align-items: center;
  gap: 7px;
}

.home-video-stats span{
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 4px 8px;
  border-radius: 999px;

  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.70);

  font-size: 12px;
  font-weight: 800;
}

.home-video-stats i{
  color: #ff6b88;
}

/* =========================================================
   Video play overlay
   ========================================================= */

.home-video-play{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;

  width: 46px;
  height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);

  background: rgba(0,0,0,0.48);
  color: #fff;

  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;

  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.32);

  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    background .18s ease;
}

.home-video-play i{
  margin-left: 3px;
  font-size: 17px;
}

.home-video-card:hover .home-video-play{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.home-video-card:hover .home-video-play{
  background: rgba(255,107,136,0.88);
}

/* =========================================================
   Image Cards
   ========================================================= */

.home-image-card{
  flex: 0 0 185px;
  scroll-snap-align: start;
}

.home-image-thumb{
  position: relative;
  aspect-ratio: 3 / 4;

  overflow: hidden;
  border-radius: 18px;
  background: #111;

  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}

.home-image-thumb img{
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  transition:
    transform .24s ease,
    filter .24s ease;
}

.home-image-card:hover .home-image-thumb img{
  transform: scale(1.06);
  filter: brightness(1.08);
}

.home-image-count{
  position: absolute;
  right: 9px;
  top: 9px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 5px 8px;
  border-radius: 999px;

  background: rgba(0,0,0,0.68);
  color: #fff;

  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

/* =========================================================
   Image like button
   ========================================================= */

.home-image-link{
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.home-image-like{
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 4;

  min-width: 46px;
  height: 30px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;

  background: rgba(0,0,0,0.58);
  color: #fff;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
  backdrop-filter: blur(8px);

  opacity: 0.92;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    opacity .15s ease;
}

.home-image-like i{
  color: #ff6b88;
  font-size: 12px;
}

.home-image-like:hover{
  opacity: 1;
  background: rgba(255,107,136,0.86);
  border-color: rgba(255,255,255,0.28);
}

.home-image-like:hover i{
  color: #fff;
}

.home-image-like:active{
  transform: scale(0.96);
}

/* liked 상태일 때 하트 아이콘/숫자 흰색 고정 */
.home-image-like.image-like-btn.liked,
.home-image-like.liked{
  background: #ff6b88;
  border-color: #ff6b88;
  color: #fff;
}

.home-image-like.image-like-btn.liked i,
.home-image-like.image-like-btn.liked .like-count,
.home-image-like.liked i,
.home-image-like.liked .like-count{
  color: #fff !important;
}

/* hover 중에도 흰색 유지 */
.home-image-like.image-like-btn.liked:hover i,
.home-image-like.image-like-btn.liked:hover .like-count,
.home-image-like.liked:hover i,
.home-image-like.liked:hover .like-count{
  color: #fff !important;
}

/* =========================================================
   Manga Cards
   ========================================================= */

.home-manga-card{
  flex: 0 0 190px;
  scroll-snap-align: start;

  overflow: hidden;
  border-radius: 18px;

  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.home-manga-card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.14);
}

.home-manga-thumb{
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
}

.home-manga-thumb img{
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  transition:
    transform .24s ease,
    filter .24s ease;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;  
}

.home-manga-card:hover .home-manga-thumb img{
  transform: scale(1.055);
  filter: brightness(1.06);
}

.home-manga-info{
  padding: 10px 10px 12px;
}

.home-manga-title{
  margin: 0;

  color: rgba(255,255,255,0.94);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-manga-meta{
  margin-top: 9px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.home-manga-meta span{
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-weight: 800;
}

.home-manga-meta span:last-child{
  justify-content: flex-end;
}

.home-manga-meta i{
  color: #ff6b88;
}

.home-manga-flag{
  justify-content: center;
}

.home-manga-flag img{
  width: 22px;
  height: 22px;
  object-fit: cover;

  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}

/* =========================================================
   Home card shape refinements
   ========================================================= */

.home-scroll-box{
  border-radius: 16px;
}

.home-video-thumb{
  border-radius: 11px;
}

.home-image-thumb{
  border-radius: 12px;
}

.home-manga-card{
  border-radius: 12px;
}

.home-manga-thumb{
  border-radius: 0;
}

.hero-banner-card,
.hero-side-card{
  border-radius: 18px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px){
  .home-hero{
    grid-template-columns: 1fr;
  }

  .hero-side-card{
    min-height: auto;
  }
}

@media (max-width: 700px){
  .home-hero,
  .home-section{
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-banner-card,
  .hero-side-card,
  .home-scroll-box{
    border-radius: 18px;
  }

  .hero-banner-inner{
    aspect-ratio: 16 / 8;
    min-height: 180px;
  }

  .hero-side-card{
    padding: 16px;
  }

  .hero-side-title{
    font-size: 19px;
  }

  .home-section-title{
    font-size: 20px;
  }

  .home-scroll-box{
    padding: 10px;
  }

  .media-row{
    gap: 11px;
  }

  .scroll-btn.side{
    display: none;
  }

  .home-video-card{
    flex-basis: 220px;
  }

  .home-image-card{
    flex-basis: 150px;
  }

  .home-manga-card{
    flex-basis: 158px;
  }
}

@media (max-width: 430px){
  .home-video-card{
    flex-basis: 205px;
  }

  .home-image-card{
    flex-basis: 138px;
  }

  .home-manga-card{
    flex-basis: 146px;
  }
}

/* ==============================
   SPKLOVE Main Mascot Banner
   잘리지 않는 반응형 배너
   ============================== */

.spk-mascot-hero {
  width: 100%;
  max-width: 100%;
  margin: 56px 0 44px;
  padding: 0;
  box-sizing: border-box;
}

/* 아래 추천 섹션과 같은 실제 콘텐츠 폭 */
.spk-mascot-banner {
  position: relative;
  width: calc(100% - 64px);
  max-width: 1720px;
  margin: 0 auto;

  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: 24px;

  background:
    radial-gradient(circle at 78% 45%, rgba(255, 87, 165, 0.18), transparent 34%),
    radial-gradient(circle at 24% 35%, rgba(255, 56, 145, 0.12), transparent 36%),
    linear-gradient(135deg, #08080a 0%, #141014 48%, #09090b 100%);

  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(255, 64, 150, 0.12),
    inset 0 0 0 1px rgba(255, 120, 180, 0.12);
}

.spk-mascot-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

/* 이미지 주변 빈 공간이 생기더라도 자연스럽게 보이도록 */
.spk-mascot-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 38%, rgba(255, 70, 150, 0.08)),
    radial-gradient(circle at 50% 100%, rgba(255, 70, 160, 0.12), transparent 42%);
}

.spk-mascot-banner-img {
  position: relative;
  z-index: 1;
}

/* 큰 화면 */
@media (min-width: 1600px) {
  .spk-mascot-hero {
    max-width: 1820px;
    margin-top: 58px;
  }
}

@media (max-width: 1280px) {
  .spk-mascot-hero {
    margin-top: 38px;
    margin-bottom: 36px;
  }

  .spk-mascot-banner {
    width: calc(100% - 48px);
    border-radius: 22px;
  }
}

@media (max-width: 900px) {
  .spk-mascot-hero {
    margin-top: 24px;
    margin-bottom: 30px;
  }

  .spk-mascot-banner {
    width: calc(100% - 32px);
    border-radius: 18px;
  }
}

@media (max-width: 560px) {
  .spk-mascot-hero {
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .spk-mascot-banner {
    width: calc(100% - 20px);
    border-radius: 14px;
  }
}