/* =========================
   Global (center 통합 CSS)
   ========================= */
:root{
  --dl-bg:#fff; --dl-on:#111; --dl-sub:#586174;
  --dl-link:#0b6cff; --dl-link-hover:#0447b7;
  --dl-bd:rgba(0,0,0,.08);
  --dl-radius:12px; --dl-gap:7px; --dl-pad:12px 14px;

  /* 본문 시작 위치(헤더 높이 + 약간의 여백). 필요시 head.css에서 오버라이드 */
  --content-top:90px;
}
body{background:#101012;}
@media (prefers-reduced-motion: reduce){
  .dl-viewport .dl-links-grid--home,
  .dl-links-card{transition:none !important; transform:none !important;}
}


/* =========================
   메인 슬라이드
   ========================= */
.main-slider{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto 20px;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:0;                 /* 헤더와의 스택 충돌 방지 */
  will-change:transform;
}
.slider{
  position:relative;
  width:100%;
  height:415px;              /* 필요시: clamp(300px, 36vw, 480px) */
  overflow:hidden;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}
.slide.active{opacity:1;}
.slide img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}





/* =========================================================
   공통: 영상 기본 스타일
   ========================================================= */
.zoolza-video{width:100%;height:auto;display:block;object-fit:cover;}

/* ======================== 모바일(≤1024px) ======================== */
@media (max-width:1024px){
  .zoolza-hero{position:relative;width:100vw;overflow:hidden;margin:20px 0 0;}
  .zoolza-hero-content{position:absolute;bottom:22px;left:16px;right:16px;color:#fff;line-height:1.45;}
  .hero-title{font-size:16px;font-weight:700;line-height:1.5;margin-bottom:14px;}
  .hero-button{display:inline-flex;align-items:center;gap:8px;background:#f4f4f4;color:#111;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;}
  .hero-button::before{content:"↗";font-size:14px;transform:translateY(-1px);}
}

/* ======================== PC(1025px 이상) ======================== */
@media (min-width:1025px){
  .zoolza-hero{position:relative;width:100%;margin-top:77px;margin-bottom:40px;}
  .zoolza-video{width:calc(100% - 30px);height:480px;margin:0 15px;object-fit:cover;border-radius:14px;display:block;}
  .zoolza-hero-content{position:absolute;bottom:40px;left:40px;color:#fff;max-width:560px;line-height:1.5;text-align:left;}
  .hero-title{font-size:28px;font-weight:700;line-height:1.46;margin-bottom:20px;text-shadow:0 3px 8px rgba(0,0,0,.32);white-space:nowrap;}
  .hero-button{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.28);}
  .hero-button::before{content:"↗";font-size:15px;transform:translateY(-1px);}
}

/* === PC에서 줄바꿈 없이, 창 줄이면 글자만 줄어들게 === */
@media (min-width:1025px){
  /* 글 박스가 영상 영역 밖으로 안 나가게 폭 제한 */
  .zoolza-hero-content{
    max-width:calc(100% - 80px); /* 양옆 여백 40px 기준 */
  }

  .hero-title{
    white-space:nowrap;                 /* 줄바꿈 계속 막기 */
    font-size:clamp(18px, 1.8vw, 28px); /* 화면 줄어들면 글자 크기 자동 축소 */
    word-break:keep-all;
  }
}




/* ========================= For You 가로 스와이프 카드 ========================= */
.for-you-wrap{margin:32px auto 24px;max-width:1200px;padding:0 16px;}
.for-you-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.for-you-title{font-size:22px;font-weight:700;color:#fff;}
.for-you-ctrl{display:none;} /* 기본 숨김 */
/* 기본: 스냅 없음(모바일 포함 공통) */
.for-you-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.for-you-track{display:flex;gap:12px;padding-bottom:4px;}
.for-you-item{flex:0 0 260px;background:transparent;border-radius:0;padding:0;}

/* 1025px 이상(PC)에서만 카드 스냅 */
@media (min-width:1025px){
  .for-you-viewport{scroll-snap-type:x mandatory;}
  .for-you-item{scroll-snap-align:start;}
}

.for-you-link{display:block;text-decoration:none;}
.for-you-thumb-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;}
.for-you-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.for-you-head{display:flex;align-items:center;gap:8px;margin-top:8px;}
.for-you-favicon{width:20px;height:20px;border-radius:4px;}
.for-you-name{font-size:14px;font-weight:600;color:#fff;}
.for-you-meta-title{margin-top:4px;font-size:12px;line-height:1.45;color:#bbb;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}
.for-you-url{display:none;}

@media (max-width:1024px){
  .for-you-wrap{max-width:none;padding:0 12px;}
  .for-you-item{flex:0 0 220px;}
}

@media (min-width:1025px){
  .for-you-ctrl{display:flex;gap:12px;}
}




/* ======================= new 랭킹 공통 ======================= */
.home-feature-ranking-thumb{display:none;background:transparent;}
.home-feature-ranking-thumb-inner{background:transparent;}
@media (min-width:1025px){.home-feature-ranking-thumb-inner{margin:0 16px;}
}
.home-feature-ranking-thumb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0px;}
.ranking-thumb-title{font-size:22px;font-weight:700;color:#fff;}

/* 화살표 컨트롤: 기본은 숨김, PC에서만 노출 */
.rank-thumb-ctrl{display:none;}

/* 공통: 카드/텍스트/썸네일 스타일 */
.rank-thumb-viewport{position:relative;}
.rank-thumb-track{display:flex;}
.rank-thumb-slide{flex:0 0 100%;}
.rank-thumb-list{list-style:none;margin:0;padding:0;}

.rank-thumb-card{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #333;}
.rank-thumb-img-wrap{width:90px;height:70px;min-width:90px;border-radius:10px;overflow:hidden;background:#222;}
.rank-thumb-img{width:100%;height:100%;object-fit:cover;}

.rank-thumb-text{flex:1;min-width:0;display:flex;flex-direction:column;}
.rank-thumb-title-row{display:flex;align-items:center;gap:6px;}
.rank-thumb-fav{width:16px;height:16px;}
.rank-thumb-name{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-thumb-section{font-size:11px;color:#888;}

.rank-thumb-meta{font-size:13px;color:#ccc;line-height:1.4;margin-top:4px;padding-right:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}



/* 모바일(≤1024px) : 세로 3개씩 */
@media (max-width:1024px){
	.home-feature-ranking-thumb{display:block;padding:0 18px 16px;}
  .rank-thumb-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;}
  .rank-thumb-track{display:flex;}
  .rank-thumb-slide{flex:0 0 100%;scroll-snap-align:start;}
}

/* PC(≥1025px) : 6개(좌3+우3) + 화살표 */
@media (min-width:1025px){
  .home-feature-ranking-thumb{display:block;padding:0px 0 40px;}
  .home-feature-ranking-thumb-header{margin-bottom:0px;}

  /* 한 페이지에 슬라이드 2개(= 6개) 보이도록 */
  .rank-thumb-viewport{overflow:hidden;}
  .rank-thumb-track{display:flex;transition:transform .35s ease;}
  .rank-thumb-slide{flex:0 0 50%;}

  /* 카드 높이 고정 (6개 높이 통일) */
  .rank-thumb-card{padding:10px 0;border-bottom:1px solid #333;height:96px;}
  .rank-thumb-link{display:flex;gap:12px;align-items:center;height:100%;}

  /* PC에서만 화살표 보이게 */
  .rank-thumb-ctrl{display:flex;gap:12px;}
}

/* 공통 : PC+모바일 가로 카드 레이아웃 고정 */
.rank-thumb-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #333;
}
.rank-thumb-img-wrap{
  width:90px;
  height:70px;
  min-width:90px;
  border-radius:10px;
  overflow:hidden;
  background:#222;
  flex-shrink:0;
}
.rank-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rank-thumb-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.rank-thumb-title-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.rank-thumb-fav{
  width:16px;
  height:16px;
}
.rank-thumb-name{
  font-size:15px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* section 한 줄 + 줄임표 */
.rank-thumb-section{
  font-size:11px;
  color:#888;
  max-width:120px;      /* 필요하면 100~140px 사이로 조절 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* meta는 아래 두 줄까지 */
.rank-thumb-meta{
  font-size:13px;
  color:#ccc;
  line-height:1.4;
  margin-top:4px;
  padding-right:10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 혹시 다른 곳에서 세로로 덮어쓰는 경우 강제 재정의 */
@media (max-width:1024px){
  .rank-thumb-card{
    display:flex !important;
    align-items:flex-start;
    gap:12px;
  }
}


/* ======================= 공통 화살표 (for-you / new -thumb 공용) ======================= */
.nav-circle-btn{
  width:36px;
  height:36px;
  padding:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s,opacity .18s,transform .18s,border-color .18s,color .18s;
  font-size:0;
}
.nav-circle-btn:hover:not(.disabled){background:rgba(255,255,255,0.08);}
.nav-circle-btn.active{background:rgba(255,255,255,0.18);transform:scale(0.92);}
.nav-circle-btn.disabled{
  opacity:0.75;
  border-color:rgba(255,255,255,0.35);
  color:rgba(255,255,255,0.55);
  cursor:default;
  background:transparent!important;
  transform:none!important;
}

/* 공통 아이콘 스타일 */
.nav-circle-icon{
  display:block;
  font-size:25px;      /* 크게 유지 */
  line-height:1;
  font-weight:400;
  pointer-events:none;
  position:relative;
  top:-3px;            /* 살짝 위로 올려서 시각적 중앙 맞추기 */
}


/* =========================
   토탈 클릭수 Most Viewed 1~10위 (다크)
   ========================= */
/* Most Viewed (Dark) */
.mv-section-wrap{padding:0 16px;margin-bottom:30px;}
.mv-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mv-section-title{font-size:22px;font-weight:700;color:#fff;margin:0;}
.mv-nav{display:flex;gap:8px;}
@media(max-width:1024px){.mv-section-wrap{padding:0 12px;margin-bottom:24px;} .mv-nav{display:none;}}

.mv-viewport{width:100%;overflow-x:auto;scroll-behavior:smooth;}
.mv-viewport::-webkit-scrollbar{height:6px;}
.mv-viewport::-webkit-scrollbar-thumb{background:#444;border-radius:999px;}
.mv-track{display:flex;gap:16px;padding-bottom:4px;}

.mv-card-wrap{flex:0 0 280px;max-width:280px;}
@media(min-width:1400px){.mv-card-wrap{flex:0 0 300px;}}
@media(max-width:600px){.mv-card-wrap{flex:0 0 240px;}}

.mv-thumb-link{display:block;margin-bottom:10px;}
.mv-thumb-block{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#222;}
.mv-thumb{width:100%;height:100%;object-fit:cover;}

.mv-rank-badge{position:absolute;top:10px;left:10px;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;color:#fff;background:rgba(10,10,14,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;}
.mv-rank-badge::before{content:'';width:7px;height:7px;border-radius:999px;background:#66ccff;}
/* rank badge 기본 색(2~10위 전부 동일) */
.mv-rank-badge::before{content:'';width:7px;height:7px;border-radius:999px;background:#66ccff;}

/* 1등만 별도 색 */
.mv-rank-1 .mv-rank-badge::before{background:#ffad4f;}

.mv-card{background:#18181a;border-radius:20px;border:1px solid rgba(255,255,255,.08);}
.mv-body{padding:12px 14px 14px;}
.mv-top{display:flex;align-items:center;gap:8px;}
.mv-fav{width:18px;height:18px;border-radius:4px;}
.mv-name{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mv-meta{margin-top:5px;font-size:13px;color:#a3a8b8;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* tags only */
.mv-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.mv-chip{padding:4px 10px;font-size:11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#dfe3f0;}





/* =========================
   디자인일리 배너
   ========================= */
.home-banner-row{margin:24px 0 24px;}
.home-banner-design{
  display:block;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  transition:transform .22s ease,box-shadow .22s ease;
}
.home-banner-design:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 12px rgba(0,0,0,.26);
}
.home-banner-design img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}