/* =========================================================
   CBS 라디오 - 이주의 트랙 상세페이지 (PC 리뉴얼)
   - 원본 https://cbs.co.kr/music/track/cbs_TRACK_XXXX 의
     <div class="box music-box"> 내부 <div class="list-cont list-cont2"> 영역을
     <div class="track-review">...</div> 블록으로 교체합니다.
   - 주변 .box-title, .text-cont 등은 기존 그대로 유지.
   - 앨범 카드(.album-card)는 모바일 상세페이지에서도
     동일한 디자인 컴포넌트로 재사용됩니다.
   ========================================================= */


/* ───────── 리뉴얼 래퍼 ───────── */
.track-review {width: 1200px;margin: 0 auto;padding: 40px 0 80px;}


/* ───────── 앨범 카드 그리드 (PC: 3열) ───────── */
.track-review__grid {display: grid;grid-template-columns: repeat(3, 360px);column-gap: 60px;row-gap: 40px;}


/* ───────── 앨범 카드 컴포넌트 (PC/모바일 공용) ───────── */
.album-card {position: relative;width: 360px;height: 650px;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);text-decoration: none;color: inherit;display: block;}

/* 카드 배경 컬러 팔레트 - 오렌지 / 퍼플 */
.album-card.is-orange {background: radial-gradient(circle at 50% 50%, #d61131 0%, #da2431 16.5%, #de3731 33%, #e9612f 66%, #f48d2a 83%, #ffb824 100%);}
.album-card.is-purple {background: radial-gradient(circle at 50% 50%, #0b16ff 0%, #472df7 16.5%, #8243ef 33%, #b56bde 66%, #db92cc 100%);}

/* 상단 헤더: 가수명 + [앨범명] */
.album-card__header {position: absolute;top: 20px;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;padding: 0 16px;min-height: 57px;}
.album-card__header .artist {font-size: 24px;font-weight: 700;color: #000;letter-spacing: -0.24px;text-align: center;line-height: 1.2;}
.album-card__header .album {display: block;max-width: 100%;font-size: 20px;font-weight: 700;color: #fff;letter-spacing: -0.2px;text-align: center;line-height: 1.2;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/* 앨범 커버 이미지 (360 x 360) */
.album-card__cover {position: absolute;top: 97px;left: 0;width: 360px;height: 360px;overflow: hidden;background-color: #222;}
.album-card__cover img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;transition: transform .4s ease;}
.album-card:hover .album-card__cover img {transform: scale(1.04);}

/* 하단 풋터: 뮤직 아이콘 + 트랙 타이틀 */
.album-card__footer {position: absolute;top: 481px;left: 20px;right: 20px;}
.album-card__footer .ico-note {display: block;width: 36px;height: 36px;background: url('/img/track/icon-music-note.png') no-repeat center;background-size: contain;mix-blend-mode: color-dodge;}
.album-card__footer .track-title {display: -webkit-box;margin-top: 8px;font-size: 32px;font-weight: 700;color: #fff;letter-spacing: -0.32px;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;}


/* ───────── 그리드 하단 안내 라인 ───────── */
.track-review__info {margin-top: 56px;display: flex;align-items: center;justify-content: flex-start;font-size: 20px;font-weight: 500;letter-spacing: -0.2px;color: #000;line-height: 1.3;}
.track-review__info .yt-logo {height: 20px;width: 120px;vertical-align: middle;display: inline-block;background: url('/img/track/logo_youtube.png') no-repeat center; background-size: cover;}

.track-review__divider {margin-top: 40px;height: 1px;background-color: #d9d9d9;border: 0;}


/* ───────── 공지 멘트 (블루) ───────── */
.track-review__announce {margin-top: 40px;font-size: 20px;font-weight: 500;color: #6378ff;letter-spacing: -0.2px;line-height: 1.4;}


/* ───────── 유튜브 영상 임베드 ───────── */
.track-review__video {margin-top: 32px;}
.track-review__video .yt-embed {position: relative;width: 100%;aspect-ratio: 1200 / 675;border-radius: 8px;overflow: hidden;background-color: #000;}
.track-review__video .yt-embed iframe {position: absolute;inset: 0;width: 100%;height: 100%;border: 0;display: block;}
.track-review__video .video-title {margin-top: 20px;font-size: 24px;font-weight: 700;color: #000;letter-spacing: -0.24px;line-height: 1.35;}
