/* =========================================================
   VONA BAND
   TRACK DETAIL
   /sound/{slug}
========================================================= */

:root {
	--track-black: #070707;
	--track-black2: #0d0d0d;
	--track-black3: #151515;

	--track-white: #f5f2eb;
	--track-yellow: #f3c548;

	--track-text: #ffffff;
	--track-muted: rgba(255,255,255,.52);
	--track-line: rgba(255,255,255,.10);

	--track-inner: 1540px;
}


/* =========================================================
   BASE
========================================================= */

.track-page {
	width: 100%;

	background: var(--track-black);

	color: #fff;

	overflow: hidden;
}


.track-page *,
.track-page *::before,
.track-page *::after {
	box-sizing: border-box;
}


.track-page img {
	display: block;

	width: 100%;
}


.track-page a {
	color: inherit;

	text-decoration: none;
}


.track-page button {
	font-family: inherit;
}


.track-inner {
	width: calc(100% - 96px);
	max-width: var(--track-inner);

	margin: 0 auto;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.track-section {
	position: relative;

	padding:
		170px
		0;
}


.track-section-head {
	display: grid;

	grid-template-columns:
		180px
		1fr;

	gap: 50px;

	margin-bottom: 85px;
}


.track-section-number span {
	display: block;

	color: var(--track-yellow);

	font-size: 12px;
	font-weight: 900;

	letter-spacing: .06em;
}


.track-section-title > span {
	display: block;

	margin-bottom: 17px;

	color: rgba(255,255,255,.36);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: .18em;
}


.track-section-title h2 {
	margin: 0;

	font-size: clamp(58px, 6vw, 108px);
	font-weight: 900;
	font-style: italic;

	line-height: .82;
	letter-spacing: -.07em;
}


.track-section-title h2 strong {
	color: var(--track-yellow);

	font-weight: inherit;
}


/* =========================================================
   01 HERO
========================================================= */

.track-hero {
	position: relative;

	height: 100svh;
	min-height: 840px;

	background: #050505;

	overflow: hidden;
}


/* BACKGROUND */

.track-hero-bg {
	position: absolute;

	inset: 0;

	z-index: 0;
}


.track-hero-bg img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.015);
}


/* OVERLAY */

.track-hero-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.94) 0%,
			rgba(0,0,0,.75) 28%,
			rgba(0,0,0,.35) 58%,
			rgba(0,0,0,.16) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0,0,0,.28) 0%,
			transparent 38%,
			transparent 65%,
			rgba(0,0,0,.78) 100%
		);
}


/* INNER */

.track-hero-inner {
	position: relative;

	z-index: 3;

	width: calc(100% - 96px);
	max-width: var(--track-inner);

	height: 100%;

	margin: 0 auto;
}


/* HERO TOP */

.track-hero-top {
	position: absolute;

	top: 128px;
	left: 0;
	right: 0;

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}


.track-hero-index span {
	display: block;

	margin-bottom: 6px;

	color: rgba(255,255,255,.42);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .18em;
}


.track-hero-index strong {
	display: block;

	color: rgba(255,255,255,.16);

	font-size: 68px;
	font-weight: 900;

	line-height: .85;
	letter-spacing: -.06em;
}


.track-hero-meta {
	display: flex;
	align-items: center;

	gap: 14px;

	padding-top: 8px;

	color: rgba(255,255,255,.46);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .15em;
}


.track-hero-meta i {
	width: 32px;
	height: 1px;

	background: rgba(255,255,255,.20);
}


/* HERO CONTENT */

.track-hero-content {
	position: absolute;

	left: 0;
	bottom: 138px;

	width: 800px;
	max-width: 70%;
}


.track-hero-label {
	margin: 0 0 13px;

	color: var(--track-yellow);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .18em;
}


.track-hero-content h1 {
	margin: 0;

	font-size: clamp(78px, 8vw, 150px);
	font-weight: 900;
	font-style: italic;

	line-height: .75;
	letter-spacing: -.08em;
}


.track-hero-content h1 strong {
	color: var(--track-yellow);

	font-weight: inherit;
}


.track-hero-artist {
	margin: 25px 0 0;

	color: #fff;

	font-size: 11px;
	font-weight: 800;

	letter-spacing: .14em;
}


.track-hero-desc {
	margin: 24px 0 0;

	color: rgba(255,255,255,.61);

	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   HERO MAIN PLAYER
========================================================= */

.track-main-player {
	width: 100%;
	max-width: 670px;

	margin-top: 35px;

	padding:
		13px
		17px;

	display: flex;
	align-items: center;

	gap: 17px;

	border:
		1px solid rgba(255,255,255,.15);

	background:
		rgba(5,5,5,.46);

	-webkit-backdrop-filter:
		blur(15px);

	backdrop-filter:
		blur(15px);
}


.track-main-play {
	flex:
		0 0 52px;

	width: 52px;
	height: 52px;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 0;
	border-radius: 50%;

	background: var(--track-yellow);

	color: #080808;

	cursor: pointer;

	transition:
		transform .25s ease,
		background .25s ease;
}


.track-main-play:hover {
	transform: scale(1.07);

	background: #fff;
}


.track-main-play-icon {
	padding-left: 2px;

	font-size: 11px;
}


.track-main-player-body {
	flex: 1;

	min-width: 0;
}


.track-main-player-info {
	display: flex;
	align-items: baseline;

	gap: 11px;

	margin-bottom: 12px;
}


.track-main-player-info strong {
	color: #fff;

	font-size: 11px;
	font-weight: 900;

	white-space: nowrap;
}


.track-main-player-info span {
	color: rgba(255,255,255,.38);

	font-size: 7px;
	font-weight: 700;

	letter-spacing: .08em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* PROGRESS */

.track-main-progress {
	display: flex;
	align-items: center;

	gap: 14px;
}


.track-main-progress-bar {
	position: relative;

	flex: 1;

	height: 3px;

	background: rgba(255,255,255,.16);

	cursor: pointer;
}


.track-main-progress-bar > span {
	position: absolute;

	top: 0;
	left: 0;

	width: 0;
	height: 100%;

	background: var(--track-yellow);
}


.track-main-time {
	display: flex;
	align-items: center;

	gap: 5px;

	color: rgba(255,255,255,.39);

	font-size: 7px;
}


.track-main-time em {
	font-style: normal;

	opacity: .4;
}


/* HERO BOTTOM */

.track-hero-bottom {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 42px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}


.track-back-link {
	display: inline-flex;
	align-items: center;

	gap: 12px;

	color: rgba(255,255,255,.46);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .14em;

	transition:
		color .25s ease;
}


.track-back-link span {
	font-size: 14px;

	transition:
		transform .25s ease;
}


.track-back-link:hover {
	color: #fff;
}


.track-back-link:hover span {
	transform: translateX(-4px);
}


.track-scroll {
	display: flex;
	align-items: center;

	gap: 15px;

	color: rgba(255,255,255,.28);

	font-size: 7px;
	font-weight: 800;

	letter-spacing: .16em;
}


.track-scroll i {
	position: relative;

	width: 60px;
	height: 1px;

	background: rgba(255,255,255,.17);

	overflow: hidden;
}


.track-scroll i::after {
	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: var(--track-yellow);

	animation:
		trackScrollLine 2.3s infinite;
}


@keyframes trackScrollLine {

	0% {
		left: -100%;
	}

	65%,
	100% {
		left: 100%;
	}

}


/* =========================================================
   02 STORY
========================================================= */

.track-story-section {
	background: var(--track-white);

	color: #090909;
}


.track-story-section
.track-section-number span {
	color: rgba(0,0,0,.35);
}


.track-story-section
.track-section-title > span {
	color: rgba(0,0,0,.38);
}


.track-story-section
.track-section-title h2 {
	color: #090909;
}


.track-story-section
.track-section-title h2 strong {
	color: #090909;
}


/* GRID */

.track-story-grid {
	display: grid;

	grid-template-columns:
		minmax(0,1.15fr)
		minmax(380px,.85fr);

	gap: 90px;

	align-items: center;
}


/* IMAGE */

.track-story-image {
	position: relative;

	aspect-ratio:
		16 / 11;

	overflow: hidden;

	background: #ddd;
}


.track-story-image::after {
	content: "";

	position: absolute;

	inset: 0;

	border:
		1px solid rgba(0,0,0,.08);

	pointer-events: none;
}


.track-story-image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .8s cubic-bezier(.2,.75,.2,1);
}


.track-story-image:hover img {
	transform: scale(1.025);
}


/* STORY CONTENT */

.track-story-content {
	padding-right: 30px;
}


.track-story-track {
	display: block;

	margin-bottom: 24px;

	color: rgba(0,0,0,.36);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: .15em;
}


.track-story-content h3 {
	margin: 0;

	color: #090909;

	font-size: clamp(36px, 4vw, 66px);
	font-weight: 900;

	line-height: 1.03;
	letter-spacing: -.055em;
}


.track-story-desc {
	margin-top: 36px;

	padding-top: 30px;

	border-top:
		1px solid rgba(0,0,0,.14);
}


.track-story-desc p {
	margin: 0;

	color: rgba(0,0,0,.62);

	font-size: 15px;
	line-height: 2;
}


/* =========================================================
   03 LYRICS
========================================================= */

.track-lyrics-section {
	padding:
		180px
		0
		200px;

	background:
		linear-gradient(
			to bottom,
			#080808,
			#0c0c0c
		);
}


.track-lyrics {
	display: grid;

	grid-template-columns:
		350px
		minmax(0,680px);

	justify-content: space-between;

	gap: 120px;
}


/* SIDE */

.track-lyrics-side {
	position: sticky;

	top: 120px;

	align-self: start;
}


.track-lyrics-cover {
	width: 100%;

	aspect-ratio: 1;

	overflow: hidden;

	background: #151515;
}


.track-lyrics-cover img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


.track-lyrics-info {
	padding-top: 18px;
}


.track-lyrics-info strong {
	display: block;

	color: #fff;

	font-size: 16px;
	font-weight: 900;

	letter-spacing: -.025em;
}


.track-lyrics-info span {
	display: block;

	margin-top: 6px;

	color: rgba(255,255,255,.38);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: .09em;
}


/* =========================================================
   LYRICS TEXT

   lyrics를 문자열 하나로 출력할 경우:
   <?=nl2br($track['lyrics'])?>
========================================================= */

.track-lyrics-content {
	color: rgba(255,255,255,.83);

	font-size: clamp(17px, 1.45vw, 22px);
	font-weight: 500;

	line-height: 2.05;

	letter-spacing: -.015em;

	word-break: keep-all;
}


/*
   [Jerry]
   [Leo]
   [Together]

   일반 텍스트 안에 그대로 들어가도 가독성 유지
*/

.track-lyrics-content br {
	content: "";

	display: block;

	margin-bottom: 1px;
}


/* 배열 방식 마크업을 그대로 쓸 경우도 대응 */

.track-lyric-part {
	margin-bottom: 55px;
}


.track-lyric-part:last-child {
	margin-bottom: 0;
}


.track-lyric-member {
	display: block;

	margin-bottom: 14px;

	color: var(--track-yellow);

	font-size: 9px;
	font-weight: 900;

	letter-spacing: .17em;
}


.track-lyric-text {
	color: rgba(255,255,255,.82);

	font-size: clamp(17px, 1.45vw, 22px);
	line-height: 2.05;
}


/* =========================================================
   04 CREDITS
========================================================= */

.track-credits-section {
	padding:
		170px
		0
		190px;

	background: #111;

	border-top:
		1px solid rgba(255,255,255,.06);
}


.track-credits {
	display: grid;

	grid-template-columns:
		minmax(300px,.75fr)
		minmax(500px,1.25fr);

	gap: 100px;
}


/* MAIN */

.track-credit-main {
	padding-top: 8px;
}


.track-credit-main > span {
	display: block;

	margin-bottom: 17px;

	color: var(--track-yellow);

	font-size: 8px;
	font-weight: 900;

	letter-spacing: .17em;
}


.track-credit-main h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(40px, 4vw, 70px);
	font-weight: 900;
	font-style: italic;

	line-height: .95;
	letter-spacing: -.06em;
}


.track-credit-main p {
	margin: 16px 0 0;

	color: rgba(255,255,255,.40);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .10em;
}


/* LIST */

.track-credit-list {
	border-top:
		1px solid rgba(255,255,255,.16);
}


.track-credit-row {
	display: grid;

	grid-template-columns:
		180px
		1fr;

	gap: 30px;

	padding:
		23px
		0;

	border-bottom:
		1px solid rgba(255,255,255,.10);
}


.track-credit-row span {
	color: rgba(255,255,255,.30);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .15em;
}


.track-credit-row strong {
	color: rgba(255,255,255,.82);

	font-size: 13px;
	font-weight: 600;

	text-align: right;
}


/* =========================================================
   05 NEXT TRACK
========================================================= */

.track-next-section {
	position: relative;

	height: 82vh;
	min-height: 700px;

	background: #080808;

	overflow: hidden;
}


.track-next-link {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;
}


.track-next-bg {
	position: absolute;

	inset: 0;
}


.track-next-bg img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1.01);

	transition:
		transform 1.1s cubic-bezier(.2,.75,.2,1);
}


.track-next-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0,0,0,.90) 0%,
			rgba(0,0,0,.53) 43%,
			rgba(0,0,0,.22) 75%,
			rgba(0,0,0,.32) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0,0,0,.17),
			rgba(0,0,0,.55)
		);
}


.track-next-inner {
	position: relative;

	z-index: 2;

	width: calc(100% - 96px);
	max-width: var(--track-inner);

	height: 100%;

	margin: 0 auto;

	display: flex;
	flex-direction: column;

	justify-content: space-between;

	padding:
		95px
		0
		90px;
}


.track-next-top {
	display: flex;
	align-items: center;

	gap: 17px;
}


.track-next-top span {
	color: rgba(255,255,255,.40);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .17em;
}


.track-next-top strong {
	color: var(--track-yellow);

	font-size: 10px;
	font-weight: 900;
}


.track-next-content p {
	margin: 0 0 16px;

	color: rgba(255,255,255,.47);

	font-size: 10px;
	font-weight: 800;

	letter-spacing: .14em;
}


.track-next-content h2 {
	margin: 0;

	max-width: 1200px;

	color: #fff;

	font-size: clamp(82px, 10vw, 180px);
	font-weight: 900;
	font-style: italic;

	line-height: .76;
	letter-spacing: -.075em;
}


.track-next-arrow {
	display: flex;
	align-items: center;

	gap: 15px;

	margin-top: 42px;
}


.track-next-arrow span {
	color: rgba(255,255,255,.54);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: .16em;
}


.track-next-arrow strong {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border:
		1px solid rgba(255,255,255,.32);

	border-radius: 50%;

	color: #fff;

	font-size: 18px;

	transition:
		background .3s ease,
		border-color .3s ease,
		color .3s ease,
		transform .3s ease;
}


.track-next-link:hover
.track-next-bg img {
	transform: scale(1.045);
}


.track-next-link:hover
.track-next-arrow strong {
	border-color: var(--track-yellow);

	background: var(--track-yellow);

	color: #080808;

	transform: translateX(6px);
}


/* =========================================================
   FIXED MINI PLAYER
========================================================= */

.sound-player {
	position: fixed;

	z-index: 15000;

	left: 50%;
	bottom: 22px;

	width:
		min(
			calc(100% - 48px),
			1080px
		);

	transform:
		translate(-50%, 35px);

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		visibility .3s ease,
		transform .35s cubic-bezier(.2,.75,.2,1);
}


.sound-player.open {
	opacity: 1;
	visibility: visible;

	transform:
		translate(-50%,0);

	pointer-events: auto;
}


.sound-player-inner {
	height: 80px;

	padding:
		10px
		14px;

	display: flex;
	align-items: center;

	gap: 16px;

	border:
		1px solid rgba(255,255,255,.14);

	background:
		linear-gradient(
			120deg,
			rgba(18,18,18,.94),
			rgba(7,7,7,.96)
		);

	-webkit-backdrop-filter:
		blur(22px)
		saturate(145%);

	backdrop-filter:
		blur(22px)
		saturate(145%);

	box-shadow:
		0 20px 70px rgba(0,0,0,.45);
}


/* COVER */

.sound-player-cover {
	flex:
		0 0 58px;

	width: 58px;
	height: 58px;

	background: #151515;

	overflow: hidden;
}


.sound-player-cover img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* PLAY */

.sound-player-toggle {
	flex:
		0 0 44px;

	width: 44px;
	height: 44px;

	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 0;
	border-radius: 50%;

	background: var(--track-yellow);

	color: #080808;

	cursor: pointer;
}


.sound-player-toggle span {
	padding-left: 2px;

	font-size: 10px;
}


/* INFO */

.sound-player-info {
	flex:
		0 0 190px;

	min-width: 0;
}


.sound-player-label {
	display: block;

	color: rgba(255,255,255,.30);

	font-size: 6px;
	font-weight: 800;

	letter-spacing: .16em;
}


.sound-player-title {
	display: block;

	margin-top: 4px;

	color: #fff;

	font-size: 11px;
	font-weight: 900;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.sound-player-artist {
	margin: 3px 0 0;

	color: rgba(255,255,255,.40);

	font-size: 7px;
	font-weight: 700;

	letter-spacing: .06em;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* PROGRESS */

.sound-player-progress {
	flex: 1;

	min-width: 100px;
}


.sound-player-progress-bar {
	position: relative;

	width: 100%;
	height: 3px;

	background: rgba(255,255,255,.13);

	cursor: pointer;
}


.sound-player-progress-bar span {
	position: absolute;

	top: 0;
	left: 0;

	width: 0;
	height: 100%;

	background: var(--track-yellow);
}


/* TIME */

.sound-player-time {
	display: flex;
	align-items: center;

	gap: 5px;

	color: rgba(255,255,255,.40);

	font-size: 7px;
}


.sound-player-time em {
	font-style: normal;

	color: rgba(255,255,255,.18);
}


/* CLOSE */

.sound-player-close {
	flex:
		0 0 34px;

	width: 34px;
	height: 34px;

	padding: 0;

	border: 0;

	background: transparent;

	color: rgba(255,255,255,.43);

	font-size: 21px;

	cursor: pointer;
}


.sound-player-close:hover {
	color: #fff;
}


/* =========================================================
   <= 1280
========================================================= */

@media (max-width:1280px) {

	.track-inner,
	.track-hero-inner,
	.track-next-inner {
		width:
			calc(100% - 64px);
	}


	.track-section {
		padding:
			140px
			0;
	}


	.track-story-grid {
		gap: 60px;
	}


	.track-lyrics {
		grid-template-columns:
			300px
			minmax(0,620px);

		gap: 80px;
	}


	.track-credits {
		gap: 70px;
	}

}


/* =========================================================
   <= 1024
========================================================= */

@media (max-width:1024px) {

	.track-section-head {
		grid-template-columns:
			100px
			1fr;
	}


	/* HERO */

	.track-hero {
		min-height: 780px;
	}


	.track-hero-content {
		max-width: 78%;
	}


	/* STORY */

	.track-story-grid {
		grid-template-columns:
			1fr
			1fr;

		gap: 45px;
	}


	/* LYRICS */

	.track-lyrics {
		grid-template-columns:
			260px
			1fr;

		gap: 60px;
	}


	/* CREDIT */

	.track-credits {
		grid-template-columns:
			1fr
			1.3fr;

		gap: 50px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px) {

	/* =====================================================
	   COMMON
	===================================================== */

	.track-inner,
	.track-hero-inner,
	.track-next-inner {
		width:
			calc(100% - 36px);
	}


	.track-section {
		padding:
			100px
			0;
	}


	.track-section-head {
		display: block;

		margin-bottom: 50px;
	}


	.track-section-number {
		margin-bottom: 20px;
	}


	.track-section-number span {
		font-size: 9px;
	}


	.track-section-title > span {
		margin-bottom: 12px;

		font-size: 8px;
	}


	.track-section-title h2 {
		font-size:
			clamp(48px, 14vw, 68px);
	}


	/* =====================================================
	   HERO
	===================================================== */

	.track-hero {
		height: auto;

		min-height: 100svh;
	}


	.track-hero-bg img {
		object-position:
			60% center;
	}


	.track-hero-overlay {
		background:
			linear-gradient(
				to bottom,
				rgba(0,0,0,.12) 0%,
				rgba(0,0,0,.20) 32%,
				rgba(0,0,0,.64) 61%,
				rgba(0,0,0,.95) 100%
			);
	}


	.track-hero-inner {
		min-height: 100svh;
	}


	.track-hero-top {
		top: 96px;
	}


	.track-hero-index strong {
		font-size: 44px;
	}


	.track-hero-meta {
		display: none;
	}


	.track-hero-content {
		left: 0;
		bottom: 90px;

		width: 100%;
		max-width: none;
	}


	.track-hero-label {
		font-size: 8px;
	}


	.track-hero-content h1 {
		font-size:
			clamp(60px, 18vw, 92px);
	}


	.track-hero-artist {
		margin-top: 18px;

		font-size: 9px;
	}


	.track-hero-desc {
		margin-top: 17px;

		font-size: 12px;
		line-height: 1.7;
	}


	/* MAIN PLAYER */

	.track-main-player {
		max-width: none;

		margin-top: 25px;

		padding:
			10px
			11px;

		gap: 11px;
	}


	.track-main-play {
		flex-basis: 46px;

		width: 46px;
		height: 46px;
	}


	.track-main-player-info {
		margin-bottom: 10px;
	}


	.track-main-player-info strong {
		font-size: 9px;
	}


	.track-main-player-info span {
		font-size: 6px;
	}


	.track-main-time {
		font-size: 6px;
	}


	.track-hero-bottom {
		bottom: 30px;
	}


	.track-scroll {
		display: none;
	}


	/* =====================================================
	   STORY
	===================================================== */

	.track-story-grid {
		display: flex;

		flex-direction: column;

		gap: 45px;
	}


	.track-story-image {
		width: 100%;

		aspect-ratio:
			4 / 3;
	}


	.track-story-content {
		padding: 0;
	}


	.track-story-track {
		margin-bottom: 17px;

		font-size: 8px;
	}


	.track-story-content h3 {
		font-size:
			clamp(34px, 10vw, 48px);
	}


	.track-story-desc {
		margin-top: 27px;

		padding-top: 25px;
	}


	.track-story-desc p {
		font-size: 13px;
		line-height: 1.9;
	}


	/* =====================================================
	   LYRICS
	===================================================== */

	.track-lyrics-section {
		padding:
			105px
			0
			120px;
	}


	.track-lyrics {
		display: block;
	}


	.track-lyrics-side {
		position: relative;

		top: auto;

		display: grid;

		grid-template-columns:
			95px
			1fr;

		gap: 17px;

		align-items: center;

		margin-bottom: 55px;
	}


	.track-lyrics-cover {
		width: 95px;
	}


	.track-lyrics-info {
		padding: 0;
	}


	.track-lyrics-content,
	.track-lyric-text {
		font-size:
			clamp(16px, 4.5vw, 20px);

		line-height: 1.95;
	}


	.track-lyric-part {
		margin-bottom: 45px;
	}


	/* =====================================================
	   CREDITS
	===================================================== */

	.track-credits-section {
		padding:
			105px
			0
			120px;
	}


	.track-credits {
		display: block;
	}


	.track-credit-main {
		margin-bottom: 55px;
	}


	.track-credit-main h3 {
		font-size:
			clamp(42px, 13vw, 62px);
	}


	.track-credit-row {
		grid-template-columns:
			100px
			1fr;

		gap: 15px;

		padding:
			20px
			0;
	}


	.track-credit-row span {
		font-size: 7px;
	}


	.track-credit-row strong {
		font-size: 11px;
	}


	/* =====================================================
	   NEXT
	===================================================== */

	.track-next-section {
		height: 72vh;

		min-height: 600px;
	}


	.track-next-inner {
		padding:
			60px
			0
			60px;
	}


	.track-next-content h2 {
		font-size:
			clamp(64px, 19vw, 100px);
	}


	.track-next-content p {
		font-size: 8px;
	}


	.track-next-arrow {
		margin-top: 28px;
	}


	/* =====================================================
	   MINI PLAYER
	===================================================== */

	.sound-player {
		bottom: 10px;

		width:
			calc(100% - 18px);
	}


	.sound-player-inner {
		height: 68px;

		padding:
			7px
			9px;

		gap: 9px;
	}


	.sound-player-cover {
		flex-basis: 50px;

		width: 50px;
		height: 50px;
	}


	.sound-player-toggle {
		flex-basis: 38px;

		width: 38px;
		height: 38px;
	}


	.sound-player-info {
		flex:
			0 0 110px;
	}


	.sound-player-title {
		font-size: 9px;
	}


	.sound-player-artist {
		font-size: 6px;
	}


	.sound-player-time {
		display: none;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

	.track-inner,
	.track-hero-inner,
	.track-next-inner {
		width:
			calc(100% - 28px);
	}


	.track-hero-content h1 {
		font-size:
			clamp(56px, 17vw, 80px);
	}


	.track-main-player {
		padding:
			9px;
	}


	.track-main-player-info span {
		display: none;
	}


	.track-main-progress {
		gap: 8px;
	}


	.track-story-image {
		aspect-ratio:
			1 / 1;
	}


	.track-lyrics-side {
		grid-template-columns:
			78px
			1fr;
	}


	.track-lyrics-cover {
		width: 78px;
	}


	.track-credit-row {
		grid-template-columns:
			85px
			1fr;
	}


	.track-next-section {
		min-height: 520px;
	}


	.track-next-content h2 {
		font-size:
			clamp(56px, 18vw, 80px);
	}


	.sound-player-cover {
		display: none;
	}


	.sound-player-info {
		flex-basis: 100px;
	}

}


/* =========================================================
   SHORT PC
========================================================= */

@media (min-width:769px) and (max-height:820px) {

	.track-hero {
		min-height: 700px;
	}


	.track-hero-top {
		top: 100px;
	}


	.track-hero-content {
		bottom: 100px;
	}


	.track-hero-content h1 {
		font-size: 82px;
	}


	.track-hero-desc {
		margin-top: 17px;
	}


	.track-main-player {
		margin-top: 22px;
	}


	.track-hero-bottom {
		bottom: 28px;
	}

}


/* =========================================================
   LYRICS EXPAND / COLLAPSE
========================================================= */

.track-lyrics-content-wrap {
	position: relative;
}


.track-lyrics-content {
	position: relative;

	/*
	약 10줄 정도
	line-height 2.05 기준
	*/
	max-height: 21em;

	overflow: hidden;

	transition:
		max-height .7s cubic-bezier(.2,.75,.2,1);
}


/* 펼쳐진 상태 */

.track-lyrics-content-wrap.open
.track-lyrics-content {
	max-height: 5000px;
}


/* 하단 페이드 */

.track-lyrics-fade {
	position: absolute;

	z-index: 2;

	left: 0;
	right: 0;

	bottom: 60px;

	height: 150px;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(12,12,12,0),
			rgba(12,12,12,.92) 72%,
			#0c0c0c 100%
		);

	transition:
		opacity .35s ease,
		visibility .35s ease;
}


/* 펼쳤을 때 페이드 제거 */

.track-lyrics-content-wrap.open
.track-lyrics-fade {
	opacity: 0;
	visibility: hidden;
}


/* BUTTON */

.track-lyrics-toggle {
	position: relative;

	z-index: 3;

	width: 100%;

	margin-top: 30px;
	padding: 20px 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	border: 0;
	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);

	background: transparent;

	color: rgba(255,255,255,.72);

	cursor: pointer;

	transition:
		color .25s ease,
		border-color .25s ease;
}


.track-lyrics-toggle span {
	font-size: 9px;
	font-weight: 800;

	letter-spacing: .13em;
}


.track-lyrics-toggle i {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;

	color: var(--track-yellow);

	font-size: 12px;
	font-style: normal;

	transition:
		transform .35s ease,
		background .25s ease,
		color .25s ease;
}


.track-lyrics-toggle:hover {
	color: #fff;

	border-color: rgba(255,255,255,.28);
}


.track-lyrics-toggle:hover i {
	background: var(--track-yellow);

	color: #080808;
}


/* 펼쳤을 때 화살표 반전 */

.track-lyrics-content-wrap.open
.track-lyrics-toggle i {
	transform: rotate(180deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px) {

	.track-lyrics-content {
		/*
		모바일도 약 10줄
		*/
		max-height: 20em;
	}


	.track-lyrics-fade {
		bottom: 57px;

		height: 120px;
	}


	.track-lyrics-toggle {
		margin-top: 25px;

		padding: 17px 0;
	}

}