/* ============================================================
   Tag Cloud + Tag Chip — DARK THEME (PC + Mobile 공통)
   ============================================================ */

/* AD 배지 */
.dl-ad-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 6px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  color:#fff;
  background:#ff3b30;
  border-radius:6px;
  vertical-align:middle;
}

/* 태그 클라우드 박스 */
.dl-tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:16px;
  background:#101012;
  border:1px solid #2a2a2c;
  box-shadow:0 6px 20px rgba(0,0,0,.7);
}

/* 태그칩 기본 */
.dl-tag-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  background:#2d2d2d;
  border:1px solid #333;
  font-size:13px;
  color:#dcdcdc;
  text-decoration:none;
  transition:all .18s ease;
}

.dl-tag-label{font-weight:600;color:#f5f5f5;}
.dl-tag-count{font-size:12px;color:#a6a6a6;opacity:1;}

/* PC Hover */
@media (min-width:1025px){
  .dl-tag-chip:hover{
    background:#2c2c43;
    border-color:#3b63ff;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.6);
  }
}


/* ============================================
   PC(1025px 이상) 썸네일: 사각박스 안에 무조건 꽉 차게
   ============================================ */
@media (min-width:1025px){

  /* 썸네일 박스 자체 크기(사각형) */
  .dl-links-thumb{
    width:100%;
    height:150px;          /* 사각박스 높이 – 필요하면 180/220 등으로 조정 */
    margin:0;
    padding:0;
    overflow:hidden;
    border-radius:12px;
    background:#000;
    position:relative;
    display:block;
  }

  /* 박스 안에서 이미지가 항상 꽉 차도록 */
  .dl-links-thumb a,
  .dl-links-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;      /* 사각박스 기준으로 가득 채우고 남는 부분 크롭 */
    object-position:center;
  }
}

@media (min-width: 1024px) {
  .dl-name-overlay {
    display: none !important;
  }
}

/* ============================================================
   MOBILE (≤1024px)
   ============================================================ */
@media (max-width:1024px){

  #container[class^="page-"]{
    padding:0!important;
  }
  .inner{
    padding:0!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* 3열 카드 */
  .dl-links-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px!important;
    padding:6px!important;
    margin:0!important;
    width:100%!important;
    background:#101012;
  }

  /* 카드 */
  .dl-links-card{
    position:relative;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  /* 썸네일 */
  .dl-links-thumb{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    margin:0!important;
    padding:0!important;
    overflow:hidden;
    display:block;
    border-radius:10px!important;
    background:#000;
  }
  .dl-links-thumb a,
  .dl-links-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:10px!important;
  }

  /* 카드 내부 텍스트/메타 숨김 */
  .dl-links-head,
  .dl-links-url,
  .dl-links-title,
  .dl-links-tags,
  .dl-bm
  .dl-menu{
    display:none!important;
  }

  /* 오버레이 이름 */
  .dl-name-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:6px 8px;
    background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
    color:#fff;
    font-size:12px;
    font-weight:900;
    line-height:1.3;
    box-sizing:border-box;
  }

  /* MOBILE — 태그 클라우드 */
  .dl-tag-cloud{
    margin:12px 12px 16px;
    padding:10px 12px;
    border-radius:16px;
    background:#0a0a0a;
    border:1px solid #262626;
    box-shadow:0 10px 30px rgba(0,0,0,.8);
  }

  /* MOBILE — 태그칩 */
  .dl-tag-chip{
    background:#181818;
    border:1px solid #333;
    color:#e0e0e0;
  }

  .dl-tag-label{color:#f5f5f5;}
  .dl-tag-count{color:#a6a6a6;}

  /* 태그 더보기 */
  .dl-tag-more-toggle{
    margin-top:8px;
    margin-left:auto;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #333;
    background:#111;
    color:#f5f5f5;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .dl-tag-more-toggle::after{
    content:'▼';
    font-size:10px;
    opacity:.8;
  }
  .dl-tag-more-toggle[data-state="expanded"]::after{
    content:'▲';
  }
}


/* 햄버거 버튼 — 북마크 바로 왼쪽, 그림자 없음 */
.dl-menu{
  position:absolute;
  top:10px;
  right:52px;           /* 북마크가 right:10px, width:34px 라고 가정 → 10 + 34 + 8(gap) */
  width:34px;
  height:34px;
  border-radius:50%;
  background:#111;
  color:#f5f5f5;
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  z-index:2;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}

/* 호버 시 그림자 없이 색만 변화 */
.dl-menu:hover{
  transform:translateY(-1px);
  border-color:#3b63ff;
  background:#181818;
}

/* On/Off 개념이 필요하면 is-on 도 동일 톤으로 */
.dl-menu.is-on{
  background:#0b6cff;
  color:#fff;
  border-color:#0b6cff;
}





/* PC(1025px 이상)에서는 태그 더보기 버튼 완전 제거 */
@media (min-width:1025px){
  .dl-tag-more-toggle{
    display:none !important;
  }
}


/* dl-tag-cloud 공통 */
.dl-tag-cloud{
  margin-top:58px !important;
}

/* 모바일(≤1024px)에서는 70px */
@media (max-width:1024px){
  .dl-tag-cloud{
    margin-top:60px !important;
  }
}