/* ===========================================================
   NEOWAVE — 카드 스타일 통합 최적화 버전 (2025-11)
   GRID / LIST 완전 분리 + 충돌 제거 + 아이콘 안정화
   =========================================================== */

/* =====================
   공통 색상/토큰
   ===================== */
:root{
  --ink:#e6f1ff;
  --muted:#94a3b8;
  --line:rgba(255,255,255,.12);
  --bg:#0b0f14;

  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.12);
  --panel:rgba(20,20,20,.45);

  --brand:#60a5fa;

  --card-w:265px;
  --cover-h:260px;
  --meta-h:140px;
  --reg-h:24px;

  --list-card-w:1100px;
  --list-card-h:105px;
  --list-cover:100px;
}

html[data-skin="light"]{
  --bg:#f7fafc;
  --ink:#0b0f14;
  --muted:#334155;
  --line:rgba(0,0,0,.15);
  --surface:#e9eef3;
  --surface-2:white;
  --panel:#ffffffdd;
}

/* =====================
   공통 기본요소
   ===================== */
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 "Noto Sans KR", ui-sans-serif, system-ui;
}

/* =====================
   ❤️ HEART BUTTON
   ===================== */
.heart{
  display:inline-flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:none;
  color:#b4b4b4;
  font-size:17px;
  cursor:pointer;
}
.heart:hover:not(.on){ color:#ff7fbd; }
.heart.on{ color:#ff4da6; }
.heart .heart-emoji{
  filter:hue-rotate(-18deg) saturate(130%);
}

/* =====================
   프로필 썸네일 공통
   ===================== */
.profile-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

/* =====================
   QR BOX 공통
   ===================== */
.qr-box{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.cart{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:20px;         /* 이모지가 잘 보이도록 */
  line-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.list .heart{
  min-width: 60px !important;  /* ❤️ + 숫자 여유공간 확보 */
  justify-content: center !important;
}
.list .heart span[data-heart-count]{
  min-width: 24px;  /* 숫자 영역 고정폭 */
  text-align: center;
  display: inline-block;
}

/* ===========================================================
   ① GRID 카드 전체 정리본 (NEOWAVE 2025-11)
   preview_card.html 기반 + 3분할 하단 레이아웃 적용
   =========================================================== */

/* GRID 컨테이너 */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 242px);
  justify-content:center;
  gap:14px;
}

/* 전체 카드 */
.grid .card{
  width:242px;
  border:1px solid var(--line);
  border-radius: 12px;
  background:rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ====== 상단 번호줄 ====== */
.grid .reg-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  min-height:34px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  font-size:12px;
}

/* ====== 커버 ====== */
.grid .cover{
  width:100%;
  aspect-ratio:230/180;
  position:relative;
  background:#0b0f14;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.grid .cover img,
.grid .cover video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* 재생버튼 (LIST와 동일 스타일 적용) */
.grid .cover .play{
  position:absolute;
  right:6px;
  bottom:6px;
  width:32px;
  height:32px;
  border-radius:8px;

  border:2px solid rgba(255,255,255,.40);
  background:rgba(0,0,0,.55);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}

/* ====== META ====== */
.grid .meta{
  padding:12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* 제목 */
.grid .meta .t{
  font-weight:900;
  font-size:15px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ====== 아티스트 줄 ====== */
.grid .row.a{
  display:flex;
  align-items:center;
  gap:6px;
  height:22px;
}

.grid .profile-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}

.grid .artist{
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;      /* 🔥 한 줄 고정 */
  overflow: hidden;         /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;  /* … 처리 */
}

/* 👉 QR 버튼 오른쪽 고정 (추가해야하는 코드) */
.grid .actions .qr-box{
  justify-self:end;
}
/* ====== 장르 (grid) ====== */
.grid .meta .row.genre{
  height: 18px;
  line-height: 18px;
  white-space: nowrap;      /* 🔥 한 줄 고정 */
  overflow: hidden;
  text-overflow: ellipsis;  /* … 처리 */
}
/* ===========================================================
   하단 PRICE — CART — QR (정확한 3분할 중앙 정렬)
   =========================================================== */

.grid .row.actions{
  display:grid;
  grid-template-columns: 1fr 32px 1fr; /* 왼쪽(가격) - 가운데(cart) - 오른쪽(QR) */
  align-items:center;
  height:36px;
  padding:0 6px;
}

/* 가격 = 왼쪽 1fr */
.grid .price{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-weight:900;
}


/* ===========================================================
   ② LIST (리스트 카드)
   =========================================================== */

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.list .card{
  display:grid;
  grid-template-columns:minmax(72px,14ch) var(--list-cover) 1fr;
  gap:12px;
  align-items:center;
  max-width:var(--list-card-w);
  min-height:var(--list-card-h);
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
}

/* 번호 */
.list .reg{
  text-align:left;   /* ← 왼쪽 정렬 */
  font-weight:800;
  opacity:.9;
  padding-left:4px;  /* 선택: 살짝 여백 주면 더 예쁨 */
}

/* COVER */
.list .cover{
  width:var(--list-cover);
  height:var(--list-cover);
  overflow:hidden;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  position:relative;
}
.list .cover img{
  width:100%; height:100%; object-fit:cover;
}
.list .cover .play{
  position:absolute;
  right:6px;
  bottom:6px;
  width:32px; height:32px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.40);
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.list .meta{
  display:flex;
  flex-direction:column;
  gap:10px;        /* row-gap 대신 gap 사용 */
  padding:0 6px;
}


/* 제목 */
.list .title-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.list .t{
  font-weight:900;
  font-size:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 아티스트 줄 */
.list .artist-line{
  min-height: 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.list .artist-line .left{
  display:flex;
  align-items:center;
  gap:6px;
}
.list .artist-line .right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ============================
   LIST — 장르 라인 3분할 안정화 배치
   ============================*/
.list .genre-line{
  display:grid;
  grid-template-columns:
    1fr      /* 장르 */
    60px     /* 하트 */
    auto     /* 가격 */
    32px     /* cart */
    32px;    /* QR */
  align-items:center;
  column-gap:20px;
  padding-left:6px;
}


/* cart = 두 번째 칸 (변동 없음) */
.list .genre-line .cart{
  justify-self: center;
}

/* price = 길이가 늘어나도 늘어나는 영역 */
.list .genre-line .price{
  display:flex;
  align-items:center;   /* ← 이게 핵심 */
  justify-self:center;
  padding:0 4px;
  font-weight:900;
  white-space:nowrap;
}


.list .genre-line .qr-box{
  justify-self: end;
}


/* 모바일 */
@media(max-width:560px){
  .list .card{
    grid-template-columns:minmax(64px,12ch) 72px 1fr;
  }
}

/* PRICE VISIBILITY BOOST (원화 전환 후 중요 영역 강조) */
.grid .price,
.list .genre-line .price{
  color: var(--ink);
  font-size: 15px;
  text-shadow: 0 0 10px rgba(0,0,0,.55);
}