@media (min-width: 720px){
.pc_view {}
.mo_view {display: none;}
}

@media (max-width: 719px){
.pc_view {display: none;}
.mo_view {}
}

:root{
  --bp-bg:#000;           /* 전체 배경 */
  --bp-panel:#111;
  --bp-line:#2b2b2b;
  --bp-text:#cfcfcf;
  --bp-text-strong:#fff;
  --bp-link:#ff0050;      /* beatport green 느낌 */
  --bp-muted:#9a9a9a;
  --bp-pill:#1a1a1a;
  --bp-pill-on:#2f2f2f;
  --bp-btn:#ff2e63;       /* 브랜드 버튼(네 색 유지) */
  --bp-price:#f06a95;     /* 가격 버튼 핑크 */
}

.c-cover {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.c-cover img,
.c-cover .noimg {
  display: block;
  width: 100%;
  height: auto;
}

/* 재생 버튼 기본 숨김 */
.c-cover .play-btn {
  position: absolute;
  top: 50%; left: 40%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* hover 시 버튼 표시 */
.c-cover:hover .play-btn {
  display: flex;
}

/* 전체 공통 */
.bp-tabs, .bp-filterbar, .bp-options, .bp-table { 
  background: transparent; 
  color: var(--bp-text); 
}

/* ---------------- Tabs ---------------- */
.bp-tabs{ display:flex; gap:18px; align-items:center; margin:10px 0 14px; }
.bp-tabs a{
  color:var(--bp-text); text-decoration:none; font-weight:700; font-size:15px; padding:6px 0; position:relative;
}
.bp-tabs a.on{ color:var(--bp-text-strong); }
.bp-tabs a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--bp-link);
}

/* ---------------- Filter Bar ---------------- */
.bp-filterbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0 10px; border-top:1px solid var(--bp-line);
}
.bp-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.bp-chip{
  background:var(--bp-pill); color:var(--bp-text);
  border:1px solid var(--bp-line); border-radius:4px; padding:6px 10px; font-weight:700; cursor:pointer;
}
.bp-chip:hover{ background:var(--bp-pill-on); }

.bp-actions{ display:flex; align-items:center; gap:18px; }
.bp-reset{
  background:transparent; color:var(--bp-text); border:0; font-weight:800; cursor:pointer;
}
.bp-reset:hover{ color:var(--bp-text-strong); }

.bp-preorder{ display:flex; align-items:center; gap:10px; color:var(--bp-muted); }
.bp-switch{ position:relative; width:44px; height:24px; display:inline-block; }
.bp-switch input{ display:none; }
.bp-switch i{
  position:absolute; inset:0; background:#333; border-radius:20px; transition:background .2s ease;
}
.bp-switch i::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:left .2s ease;
}
.bp-switch input:checked + i{ background:#3ddc84; }
.bp-switch input:checked + i::after{ left:23px; }

/* ---------------- Options Bar ---------------- */
.bp-options{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0 14px;
  border-bottom:1px solid var(--bp-line);
}
.bp-resultspp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bp-resultspp span{ color:var(--bp-muted); font-weight:700; }
.bp-pill{
  display:inline-block; min-width:34px; text-align:center; padding:6px 8px; border-radius:14px;
  background:var(--bp-pill); color:var(--bp-text); font-weight:800; cursor:pointer; border:1px solid var(--bp-line);
}
.bp-pill.on{ background:#3d3d3d; color:#fff; border-color:#4a4a4a; }

.bp-right{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.bp-sort-label{ color:var(--bp-muted); font-weight:700; }
.bp-sort{
  background:#151515; color:#e0e0e0; border:1px solid var(--bp-line); border-radius:6px; padding:6px 10px; font-weight:700;
  margin-right:6px;
}
.bp-pages{ display:flex; align-items:center; gap:10px; }
.bp-pages a{ color:#8bd69f; text-decoration:none; font-weight:800; }
.bp-pages a.on{ color:#fff; }
.bp-ellipsis{ color:var(--bp-muted); }


/* ---------------- Table ---------------- */
.bp-table{ width:100%; }
.bp-thead, .bp-row{
  display:grid;
  grid-template-columns: 40px 64px 56px minmax(260px,1.2fr) minmax(220px,0.9fr) minmax(220px,0.9fr) 120px 90px;
  gap:12px; align-items:center;
}
.bp-thead{
  padding:12px 0; color:var(--bp-muted); font-weight:800; font-size:12px; letter-spacing:.3px;
}
.bp-tbody .bp-row{
  padding:10px 0; border-top:1px solid var(--bp-line);
}

.bp-row:hover{ background:rgba(255,255,255,0.03); }

.c-rank{padding-left:5px; text-align:center; font-weight:900; color:#eaeaea; }
.c-act{ display:flex; gap:10px; align-items:center; }
.c-act .ico{ width:22px; height:22px; border:0; background:#222; border-radius:3px; cursor:pointer; }
.c-act .ico.play::before{ content:"►"; display:block; font-size:12px; color:#ddd; line-height:22px; text-align:center; }
.c-act .ico.plus::before{ content:"+"; display:block; font-size:14px; color:#ddd; line-height:22px; text-align:center; }
.c-act .ico.list::before{ content:"≡"; display:block; font-size:12px; color:#ddd; line-height:22px; text-align:center; }

.c-act .ico.heart::before {
  content: "♥";          /* 하트 */
  display: block;
  font-size: 12px;       /* 조금 더 크게 */
  color: #e74c3c;        /* 붉은색 계열 (#e74c3c = 붉은 레드) */
  line-height: 22px;
  text-align: center;
  transition: color 0.2s ease;
}


.c-cover img, .c-cover .noimg{ width:44px; height:44px; border-radius:4px; object-fit:cover; background:#111; display:block; cursor:pointer;}
.c-cover .noimg{ display:flex; align-items:center; justify-content:center; color:#666; font-size:10px; cursor:pointer;}

.c-title .t-title{ color:#e9e9e9; font-weight:800; text-decoration:none; display:inline-block; cursor:pointer;}
.c-title .t-title:hover{ color:var(--bp-link); }
.c-title .t-artist{ color:#9ec7a9; margin-top:2px; font-size:13px; cursor:pointer;}

.c-label .t-label{ color:#aab3ba; font-weight:700; }
.c-label .t-remix{ color:#7fa4ff; }

.c-genre .t-genre{ color:#d0d0d0; }
.c-genre .t-bpmkey{ color:#9a9a9a; font-size:13px; margin-top:2px; }

.c-release{ color:#d9d9d9; }
.c-price {
  display: flex;  text-align:center;
  text-align:center;
}
.bp-price{
  min-width:72px; height:32px; padding:0 10px; border-radius:6px; border:0;
  background:#cf3c6a; color:#fff; font-weight:700; cursor:pointer;
  font-size:0.8em;
}
.bp-price:hover{ filter:brightness(1.08); }


.bp-price {
  display: inline-block;
  width: auto;       /* 모든 버튼 동일 너비 */
  height: 32px;
  line-height: 32px; /* 텍스트 세로 중앙 */
  text-align: center;
  border-radius: 6px;
  border: 0;
  background: #cf3c6a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

/* ⋮ 버튼 */
.ico.more {
  font-size: 18px;
  background: transparent;
  color: #ccc;
  width: 40px;
  height: 40px;
  border: 0;
  cursor: pointer;
  justify-self: end; /* grid 셀 안에서 오른쪽 끝 */
}

/* 팝업 */
.track-menu {
  display: none;
  position: absolute;
  z-index: 9999;
}
.track-menu-inner {
  background: #222;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.track-menu-inner button {
  background: none;
  color: #fff;
  border: none;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.track-menu-inner button:hover {
  background: #333;
}

/*검색하이라이트*/
.highlight {
  background: rgba(255, 255, 0, 0.3); /* 은은한 노란색 배경 */
  padding: 0 2px;
  border-radius: 2px;
}



/* ---------------- 반응형 ---------------- */
@media (max-width: 1200px){
  .bp-thead, .bp-row{
    grid-template-columns: 36px 56px 48px minmax(220px,1.1fr) minmax(200px,0.9fr) minmax(200px,0.9fr) 110px 80px;
  }
}
@media (max-width: 960px){
  .bp-thead, .bp-row{
    grid-template-columns: 32px 48px 44px minmax(200px,1fr) minmax(200px,1fr) 110px 80px;
  }
}



/*  모바일 */
@media (max-width: 720px) {

.bp-right {
    flex-wrap: wrap;         /* 줄바꿈 허용 */
    justify-content: flex-start; /* 전부 왼쪽 기준 */
}


.c-title {
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ---------------- Tabs ---------------- */
.bp-tabs {
  display: flex;
  justify-content: space-between; /* 좌우 끝으로 밀기 */
  align-items: center;
  gap: 5px;
}

.bp-tabs a{
  color:var(--bp-text); text-decoration:none; font-weight:700; font-size:13px; padding:6px 0; position:relative;
}
.bp-tabs a.on{ color:var(--bp-text-strong); }
.bp-tabs a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-0px; height:2px; background:var(--bp-link);
}

/* ---------------- Options Bar ---------------- */
.bp-options{
  padding:3px 0 5px;
  border-bottom:1px solid var(--bp-line);
}
.bp-resultspp{ display:none; align-items:center; gap:5px; flex-wrap:wrap; }
.bp-resultspp span{ color:var(--bp-muted); font-weight:700; }
.bp-pill{
  display:inline-block;  text-align:center; padding:2px 4px; border-radius:10px;
  background:var(--bp-pill); color:var(--bp-text); font-weight:600; cursor:pointer; border:1px solid var(--bp-line);
}
.bp-pill.on{ background:#3d3d3d; color:#fff; border-color:#4a4a4a; }

.bp-right{display:none; align-items:center; gap:10px; margin-left:auto; }
.bp-sort-label{ font-size:13px; color:var(--bp-muted); font-weight:500; }
.bp-sort{ font-size:13px; 
  background:#151515; color:#e0e0e0; border:1px solid var(--bp-line); border-radius:6px; padding:3px 4px; font-weight:500;
  margin-right:0px;
}

.mo-row {
  display: flex;
  justify-content: space-between;  /* 양쪽 끝으로 밀기 */
  align-items: center;
  width: 100%;
  font-size:13px
}

.bp-resultspp_mo {
  flex: 0 0 auto;   /* 왼쪽 select는 고정 크기 */
}

.bp-pages {
  text-align: right; /* 내부 링크를 오른쪽 끝으로 */
}


/* 섹션 공통 */
.va-section{margin-bottom:10px}
.va-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:0px; margin-bottom:0px;
}

/*
.va-tab {
    margin: 15px 0;
    flex-wrap: wrap;
}
*/



  .view-artists .bp-row {
    display: grid;
    grid-template-columns:
      32px   /* rank */
      52px   /* cover */
      1fr    /* artist */
      60px   /* tracks */
      60px   /* plays */
      60px   /* likes */
      60px;  /* reposts */
    gap: 8px;
    align-items: center;   /* ✅ 모든 셀을 세로 중앙 */
  }

  .view-artists .c-rank   { grid-column: 1; text-align:center; }
  .view-artists .c-cover  { grid-column: 2; }
  .view-artists .c-title  { grid-column: 3; }
  .view-artists .c-genre  { grid-column: 4; }
  .view-artists .c-release:nth-of-type(1) { grid-column: 5; } /* plays */
  .view-artists .c-extra  { grid-column: 6; } /* likes */
  .view-artists .c-release:nth-of-type(2) { grid-column: 7; } /* reposts */

  .bp-options{ flex-direction:column; align-items:flex-start; gap:10px; }
  .bp-right{ width:100%; justify-content:space-between; }
  .bp-pages{ margin-left:auto; }

  .bp-thead{ display:none; }
  .bp-row{
    grid-template-columns: 44px 1fr 60px; 
    grid-template-areas:
      "cover title price"
      "cover artist price";
    gap:8px;
    padding:12px 0;
  }
  .c-act, .c-label, .c-genre, .c-release{ display:none; }

  .c-cover{ grid-area: cover; }
  .c-cover img, .c-cover .noimg{ width:52px; height:52px; }

  .c-title{ grid-area: title; }
  .c-title .t-title{ font-size:14px; font-weight:700; color:#fff; }
  .c-title .t-artist{ font-size:12px; color:#aaa; }

  .c-price{ grid-area: price;  text-align:center; }
  .bp-price{ min-width:60px;  font-size:13px; }
}



/* 모달 배경 */
#playlistModal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* flex 중앙 정렬 */
  display: flex;
}

/* 모달 박스 */
#playlistModal .modal-content {
  background: #222;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

#playlistModal h3 {
  margin-top: 0;
  font-size: 18px;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* 셀렉트 */
#playlistSelect {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2a2a2a;
  color: #fff;
}

/* 버튼 */
#playlistModal .modal-actions {
  text-align: right;
}

#playlistModal button {
  padding: 6px 14px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#playlistModal button:first-child {
  background: #555;
  color: #fff;
}

#playlistModal button:last-child {
  background: #cf3c6a;
  color: #fff;
}

#playlistModal button:last-child:hover {
  background: #cf3c6a;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {opacity:0; transform:scale(0.95);}
  to {opacity:1; transform:scale(1);}
}