/* /css/paging.css */
/* 기존 .paging 스타일 절대 건드리지 않음 -> .paging.paging--lux 에만 적용 */

.paging.paging--lux{
  margin:14px auto 0;
  padding:0 8px;
}

/* 1줄 + 가로스크롤(모바일에서 > >> 안보이는거 방지) */
.paging.paging--lux{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  flex-wrap:nowrap;
  white-space:nowrap;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  padding:10px 6px;
}
.paging.paging--lux::-webkit-scrollbar{ height:0; }

/* 버튼: 이 스킨은 a / a.active / span 구조 */
.paging.paging--lux > a,
.paging.paging--lux > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:36px;
  min-width:36px;
  padding:0 12px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#eaeaea;

  font-weight:800;
  text-decoration:none;
  line-height:1;

  flex:0 0 auto;
  box-sizing:border-box;

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

/* hover */
.paging.paging--lux > a:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* 현재페이지: a.active */
.paging.paging--lux > a.active{
  background:#ff3d00;
  border-color:rgba(255,61,0,.55);
  color:#fff;
  pointer-events:none;
}

/* 점(...) */
.paging.paging--lux > span{
  background:transparent;
  border-color:transparent;
  color:rgba(255,255,255,.45);
  padding:0 6px;
  min-width:auto;
}

/* 모바일: 왼쪽 정렬 + 더 작게 */
@media (max-width:520px){
  .paging.paging--lux{
    justify-content:flex-start;
    gap:6px;
    padding:10px 4px;
  }
  .paging.paging--lux > a,
  .paging.paging--lux > span{
    height:32px;
    min-width:32px;
    padding:0 10px;
    font-size:13px;
  }
}
/* luxpg 전용: 기존 .paging 완전 무시 */
.luxpg{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  overflow:hidden !important;   /* ✅ 스크롤 제거 */
  direction:ltr !important;

  margin:14px auto 0 !important;
  padding:10px 6px !important;
}

/* 전역 a/float/position 꼬임 방지 */
.luxpg *{
  float:none !important;
  position:static !important;
  order:0 !important;
  margin:0 !important;
}

.luxpg .b,
.luxpg .dots{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:36px !important;
  min-width:36px !important;
  padding:0 12px !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
  color:#eaeaea !important;

  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;

  box-sizing:border-box !important;
}

.luxpg .cur{
  background:#ff3d00 !important;
  border-color:rgba(255,61,0,.55) !important;
  color:#fff !important;
}
.luxpg .dis{ opacity:.35 !important; pointer-events:none !important; }

.luxpg .dots{
  border-color:transparent !important;
  background:transparent !important;
  color:rgba(255,255,255,.45) !important;
  min-width:auto !important;
  padding:0 4px !important;
}

/* ✅ 화면폭 기준으로만 조절 */
@media (max-width:520px){
  .luxpg{ gap:6px !important; padding:10px 4px !important; }
  .luxpg .b, .luxpg .dots{
    height:32px !important;
    min-width:32px !important;
    padding:0 10px !important;
    font-size:13px !important;
  }
}
@media (max-width:380px){
  .luxpg{ gap:5px !important; }
  .luxpg .b, .luxpg .dots{
    height:30px !important;
    min-width:30px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }
}
/* 기본은 텍스트 숨김(PC에선 아이콘/기호로 깔끔) */
.luxpg .t{ display:none !important; }

/* 모바일에서는 텍스트(< << > >>)만 강제 표시 */
@media (max-width:520px){
  .luxpg .t{ display:inline !important; }

  /* 혹시 laquo/lsaquo 기호가 폰트 문제면 아예 안 보이게 */
  .luxpg .first, .luxpg .prev, .luxpg .next, .luxpg .last{
    font-family:inherit !important;
  }
  .luxpg .first::before,
  .luxpg .prev::before,
  .luxpg .next::before,
  .luxpg .last::before{ content:none !important; }
}
.luxpg.luxpg--win{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  margin:14px auto 0 !important;
  padding:10px 6px !important;
}
.luxpg.luxpg--win *{
  float:none !important;
  position:static !important;
  order:0 !important;
  margin:0 !important;
}
.luxpg.luxpg--win .b,
.luxpg.luxpg--win .dots{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
  color:#eaeaea !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}
.luxpg.luxpg--win .cur{
  background:#ff3d00 !important;
  border-color:rgba(255,61,0,.55) !important;
  color:#fff !important;
}
.luxpg.luxpg--win .dis{ opacity:.35 !important; pointer-events:none !important; }
.luxpg.luxpg--win .dots{
  border-color:transparent !important;
  background:transparent !important;
  color:rgba(255,255,255,.45) !important;
  min-width:auto !important;
  padding:0 4px !important;
}
@media (max-width:420px){
  .luxpg.luxpg--win{ gap:6px !important; }
  .luxpg.luxpg--win .b{ height:30px !important; min-width:30px !important; padding:0 8px !important; font-size:12px !important; }
}