/* =========================================================
   PPABAM PLAYER
   Separated stylesheet
   SEO/CSS separation revision: 2026-09-29
   ========================================================= */

/* =========================================================
   PPABAM PLAYER INTRO
   - 모든 스타일을 .ppabam-player-page 내부로 한정
   - Gnuboard / Bootstrap / PPABAM 기본 스킨 충돌 방지
   ========================================================= */
.content {
    min-height: 250px;
    padding: 0px !important;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px !important;
    padding-right: 0px !important;
}



.ppabam-player-page {
	--pp-player-main:#ff4d67;
	--pp-player-main-soft:#fff7f8;
	--pp-player-ink:#171a21;
	--pp-player-muted:#747b86;
	--pp-player-line:#e9ebef;
	--pp-player-soft:#f7f8fa;

	width:100%;
	margin:0;
	padding:0;
	color:var(--pp-player-ink);
	font-family: Arial, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif !important;
	background:#fff;
	overflow:clip;
}

.ppabam-player-page *,
.ppabam-player-page *::before,
.ppabam-player-page *::after {
    font-family: Arial, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif !important;
}

.ppabam-player-page a {
	text-decoration:none;
}

.ppabam-player-page .pp-player-container {
	width:100%;
	max-width:1180px;
	margin:0 auto;
	padding:0 24px;
}

.ppabam-player-page .pp-player-section {
	padding:90px 0;
	margin:0;
}

.ppabam-player-page .pp-player-tag {
	margin:0 0 12px;
	color:var(--pp-player-main);
	font-size:12px;
	font-weight:900;
	letter-spacing:2px;
	line-height:1.4;
}

.ppabam-player-page .pp-player-title {
	margin:0;
	color:var(--pp-player-ink);
	font-size:38px;
	font-weight:800;
	line-height:1.28;
	letter-spacing:-1.6px;
}

.ppabam-player-page .pp-player-lead {
	max-width:700px;
	margin:18px 0 0;
	color:var(--pp-player-muted);
	font-size:17px;
	line-height:1.8;
	word-break:keep-all;
}

/* HERO */
.ppabam-player-page .pp-player-hero {
	padding:110px 0 90px;
	background:linear-gradient(180deg, #ffffff 0%, #fff7f8 100%);
}

.ppabam-player-page .pp-player-hero-title {
	margin:18px 0 0;
	color:var(--pp-player-ink);
	font-size:54px;
	font-weight:900;
	line-height:1.12;
	letter-spacing:-2.5px;
	word-break:keep-all;
}

.ppabam-player-page .pp-player-actions {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:30px;
}

.ppabam-player-page .pp-player-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	padding:0 22px;
	border:1px solid var(--pp-player-line);
	border-radius:10px;
	background:#fff;
	color:#343941;
	font-size:14px;
	font-weight:800;
	line-height:1;
	transition:all .15s ease;
}

.ppabam-player-page .pp-player-btn:hover,
.ppabam-player-page .pp-player-btn:focus {
	border-color:#ffc0ca;
	background:#fff7f8;
	color:var(--pp-player-main);
	text-decoration:none;
}

.ppabam-player-page .pp-player-btn-primary {
	border-color:var(--pp-player-main);
	background:var(--pp-player-main);
	color:#fff;
}

.ppabam-player-page .pp-player-btn-primary:hover,
.ppabam-player-page .pp-player-btn-primary:focus {
	border-color:#f13e59;
	background:#f13e59;
	color:#fff;
}


/* HERO - RewardPop Tools inspired structure */
.ppabam-player-page .pp-player-hero {
	padding:96px 0 58px;
	background:#fff;
}

.ppabam-player-page .pp-player-hero-inner {
	display:grid;
	grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
	gap:46px;
	align-items:center;
}

.ppabam-player-page .pp-player-hero-copy {
	min-width:0;
}

.ppabam-player-page .pp-player-hero-badge {
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:7px 11px;
	border:1px solid #ffd7de;
	border-radius:999px;
	background:#fff7f8;
	color:var(--pp-player-main);
	font-size:11px;
	font-weight:900;
	letter-spacing:1.3px;
}

.ppabam-player-page .pp-player-hero-badge::before {
	content:"";
	display:block;
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--pp-player-main);
}

.ppabam-player-page .pp-player-hero-title {
	margin:22px 0 0;
	color:var(--pp-player-ink);
	font-size:56px;
	font-weight:900;
	line-height:1.12;
	letter-spacing:-2.7px;
	word-break:keep-all;
}

.ppabam-player-page .pp-player-hero-title .pp-player-accent {
	color:var(--pp-player-main);
}

.ppabam-player-page .pp-player-hero-desc {
	max-width:680px;
	margin:20px 0 0;
	color:var(--pp-player-muted);
	font-size:17px;
	line-height:1.85;
	word-break:keep-all;
}

.ppabam-player-page .pp-player-hero-points {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:22px;
}

.ppabam-player-page .pp-player-hero-point {
	display:inline-flex;
	align-items:center;
	min-height:28px;
	padding:0 10px;
	border-radius:999px;
	background:#f6f7f9;
	color:#626a75;
	font-size:11px;
	font-weight:700;
}

.ppabam-player-page .pp-player-hero-side {
	position:relative;
	padding:26px;
	border:1px solid #eceef2;
	border-radius:22px;
	background:linear-gradient(180deg,#fff 0%,#fff9fa 100%);
	box-shadow:0 18px 45px rgba(25,29,37,.07);
}

.ppabam-player-page .pp-player-hero-side-label {
	display:block;
	margin-bottom:10px;
	color:var(--pp-player-main);
	font-size:10px;
	font-weight:900;
	letter-spacing:1.5px;
}

.ppabam-player-page .pp-player-hero-side-title {
	margin:0;
	color:#20242b;
	font-size:22px;
	font-weight:900;
	line-height:1.35;
	letter-spacing:-.5px;
}

.ppabam-player-page .pp-player-hero-side-desc {
	margin:12px 0 0;
	color:#7b828c;
	font-size:13px;
	line-height:1.75;
}

.ppabam-player-page .pp-player-hero-side-list {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	margin-top:20px;
}

.ppabam-player-page .pp-player-hero-side-item {
	display:flex;
	align-items:center;
	gap:8px;
	min-height:42px;
	padding:0 11px;
	border:1px solid #eceef2;
	border-radius:10px;
	background:#fff;
	color:#424852;
	font-size:11px;
	font-weight:800;
}

.ppabam-player-page .pp-player-hero-side-item span:first-child {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:23px;
	height:23px;
	border-radius:7px;
	background:#fff1f4;
	color:var(--pp-player-main);
	font-size:11px;
	flex:0 0 23px;
}

/* PRODUCT TOOLS BANNER */
.ppabam-player-page .pp-player-tools-section {
	padding:26px 0 92px;
	background:#fff;
}

.ppabam-player-page .pp-player-tools-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}

.ppabam-player-page .pp-player-tool-card {
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:300px;
	padding:32px;
	border:1px solid #e8eaee;
	border-radius:18px;
	background:#fff;
	overflow:hidden;
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ppabam-player-page .pp-player-tool-card:hover {
	transform:translateY(-2px);
	border-color:#ffcbd4;
	box-shadow:0 16px 38px rgba(28,32,40,.07);
}

.ppabam-player-page .pp-player-tool-card-dark {
	border-color:#23262d;
	background:#17191f;
	color:#fff;
}

.ppabam-player-page .pp-player-tool-card-dark:hover {
	border-color:#3c4048;
}

.ppabam-player-page .pp-player-tool-no {
	color:var(--pp-player-main);
	font-size:11px;
	font-weight:900;
	letter-spacing:1.5px;
}

.ppabam-player-page .pp-player-tool-title {
	margin:17px 0 0;
	color:#22272e;
	font-size:26px;
	font-weight:900;
	line-height:1.3;
	letter-spacing:-1px;
}

.ppabam-player-page .pp-player-tool-card-dark .pp-player-tool-title {
	color:#fff;
}

.ppabam-player-page .pp-player-tool-desc {
	max-width:500px;
	margin:14px 0 0;
	color:#737b86;
	font-size:14px;
	line-height:1.8;
	word-break:keep-all;
}

.ppabam-player-page .pp-player-tool-card-dark .pp-player-tool-desc {
	color:#aab0b9;
}

.ppabam-player-page .pp-player-tool-tags {
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin-top:18px;
}

.ppabam-player-page .pp-player-tool-tag {
	display:inline-flex;
	align-items:center;
	min-height:25px;
	padding:0 9px;
	border-radius:999px;
	background:#f6f7f9;
	color:#747c87;
	font-size:10px;
	font-weight:700;
}

.ppabam-player-page .pp-player-tool-card-dark .pp-player-tool-tag {
	background:#24272e;
	color:#adb3bc;
}

.ppabam-player-page .pp-player-tool-action {
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:auto;
	padding-top:26px;
	color:var(--pp-player-main);
	font-size:12px;
	font-weight:900;
}

.ppabam-player-page .pp-player-tool-card-dark .pp-player-tool-action {
	color:#ff8797;
}

.ppabam-player-page .pp-player-tool-visual {
	position:absolute;
	right:26px;
	bottom:22px;
	display:flex;
	align-items:flex-end;
	gap:5px;
	height:64px;
	opacity:.12;
}

.ppabam-player-page .pp-player-tool-visual i {
	display:block;
	width:7px;
	border-radius:4px 4px 2px 2px;
	background:var(--pp-player-main);
}

.ppabam-player-page .pp-player-tool-visual i:nth-child(1){height:22px}
.ppabam-player-page .pp-player-tool-visual i:nth-child(2){height:44px}
.ppabam-player-page .pp-player-tool-visual i:nth-child(3){height:32px}
.ppabam-player-page .pp-player-tool-visual i:nth-child(4){height:58px}
.ppabam-player-page .pp-player-tool-visual i:nth-child(5){height:39px}


/* PLAYER MOCKUP */
.ppabam-player-page .pp-player-mock {
	margin-top:55px;
	padding:25px;
	border:1px solid #292c33;
	border-radius:22px;
	background:#17191f;
	color:#fff;
	box-shadow:0 30px 70px rgba(0,0,0,.13);
}

.ppabam-player-page .pp-player-mock-top {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding-bottom:16px;
	border-bottom:1px solid #30333a;
}

.ppabam-player-page .pp-player-mock-logo {
	display:flex;
	align-items:center;
	gap:10px;
	color:#fff;
	font-size:13px;
	font-weight:800;
}

.ppabam-player-page .pp-player-p-logo {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background:var(--pp-player-main);
	color:#fff;
	font-size:15px;
	font-weight:900;
}

.ppabam-player-page .pp-player-mock-tools {
	color:#aeb3bb;
	font-size:11px;
}

.ppabam-player-page .pp-player-now {
	padding:25px 0 2px;
}

.ppabam-player-page .pp-player-playing {
	display:block;
	margin-bottom:8px;
	color:#ff8797;
	font-size:11px;
	font-weight:900;
	letter-spacing:.5px;
}

.ppabam-player-page .pp-player-now-title {
	margin:0;
	color:#fff;
	font-size:22px;
	font-weight:800;
	line-height:1.4;
}

.ppabam-player-page .pp-player-now-sub {
	display:block;
	margin-top:7px;
	color:#9ba2ad;
	font-size:11px;
}

.ppabam-player-page .pp-player-progress {
	height:5px;
	margin-top:20px;
	border-radius:10px;
	background:#343740;
	overflow:hidden;
}

.ppabam-player-page .pp-player-progress > span {
	display:block;
	width:46%;
	height:100%;
	border-radius:10px;
	background:var(--pp-player-main);
}

/* =========================================================
   SMART FEATURES - DARK RED GRID
   ========================================================= */
.ppabam-player-page .pp-player-features-section{
	position:relative;
	overflow:hidden;
	padding:84px 0 92px;
	background:#fff;
	color:#171a21;
}

.ppabam-player-page .pp-player-features-section::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		repeating-linear-gradient(
			to right,
			transparent 0,
			transparent calc(16.666% - 1px),
			rgba(0,0,0,.025) calc(16.666% - 1px),
			rgba(0,0,0,.025) 16.666%
		);
}

.ppabam-player-page .pp-player-features-section .pp-player-container{
	position:relative;
	z-index:2;
}

.ppabam-player-page .pp-player-features-head{
	text-align:center;
	margin-bottom:34px;
}

.ppabam-player-page .pp-player-features-section .pp-player-tag{
	margin:0 0 10px;
	color:#ff3e4c !important;
	font-size:10px;
	font-weight:900;
	letter-spacing:2px;
}

.ppabam-player-page .pp-player-features-section .pp-player-title{
	margin:0;
	color:#171a21 !important;
	font-size:42px;
	font-weight:900;
	line-height:1.15;
	letter-spacing:-1.7px;
}

.ppabam-player-page .pp-player-features-section .pp-player-title .pp-feature-accent{
	color:#ff3f4e;
	text-shadow:0 0 24px rgba(255,54,68,.16);
}

.ppabam-player-page .pp-player-features-section .pp-player-lead{
	max-width:720px;
	margin:14px auto 0;
	color:#747b86 !important;
	font-size:13px;
	line-height:1.75;
	text-align:center;
}

.ppabam-player-page .pp-player-feature-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:14px;
	margin-top:34px;
}

.ppabam-player-page .pp-player-feature-card {
	position:relative;
	min-height:166px;
	padding:19px 17px 17px;
	border:1px solid #e5e7eb;
	border-radius:12px;
	background:#fff;
	box-shadow:0 8px 24px rgba(31,35,43,.045);
	overflow:hidden;
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.ppabam-player-page .pp-player-feature-card:hover {
	transform:translateY(-3px);
	border-color:#ff3f4e;
	box-shadow:
		0 12px 30px rgba(31,35,43,.08),
		0 0 0 1px rgba(255,63,78,.04);
}

/* 작은 빨간 기능 아이콘 */
.ppabam-player-page .pp-player-feature-card::before{
	content:attr(data-icon);
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	margin-bottom:13px;
	border:1px solid rgba(255,62,74,.30);
	border-radius:7px;
	background:#fff1f3;
	color:#ff3f4e;
	font-size:11px;
	font-weight:900;
	line-height:1;
	box-shadow:inset 0 0 12px rgba(255,47,63,.04);
}

/* 카드 하단 상태바 제거 */
.ppabam-player-page .pp-player-feature-card::after{
	display:none;
	content:none;
}

.ppabam-player-page .pp-player-feature-title {
	display:block;
	margin:0;
	padding-right:28px;
	color:#252a31 !important;
	font-size:14px;
	font-weight:900;
	line-height:1.4;
	letter-spacing:-.15px;
}

.ppabam-player-page .pp-player-feature-desc {
	margin:8px 0 20px;
	color:#747b86 !important;
	font-size:11px;
	line-height:1.58;
	word-break:keep-all;
}

/* 일부 강조 카드 */
.ppabam-player-page .pp-player-feature-card.is-featured{
	border-color:#e5e7eb;
	background:#fff;
}
.ppabam-player-page .pp-player-feature-card.is-featured:hover{
	border-color:#ff3f4e;
}

@media(max-width:800px){
	.ppabam-player-page .pp-player-features-section{
		padding:68px 0 74px;
	}
	.ppabam-player-page .pp-player-features-section .pp-player-title{
		font-size:34px;
	}
	.ppabam-player-page .pp-player-feature-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media(max-width:480px){
	.ppabam-player-page .pp-player-features-section .pp-player-title{
		font-size:29px;
	}
	.ppabam-player-page .pp-player-feature-grid{
		grid-template-columns:1fr;
	}
	.ppabam-player-page .pp-player-feature-card{
		min-height:150px;
	}
}

/* =========================================================
   HOW IT WORKS - DARK RED TIMELINE
   ========================================================= */
.ppabam-player-page .pp-player-soft-section.pp-player-how-section{
	position:relative;
	overflow:hidden;
	padding:86px 0 90px;
	background:#f7f8fa;
	color:#171a21;
}

/* 은은한 세로 그리드 */
.ppabam-player-page .pp-player-how-section::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		repeating-linear-gradient(
			to right,
			transparent 0,
			transparent calc(25% - 1px),
			rgba(0,0,0,.025) calc(25% - 1px),
			rgba(0,0,0,.025) 25%
		);
	opacity:.72;
}

/* 중앙 붉은 광 */
.ppabam-player-page .pp-player-how-section::after{
	content:"";
	position:absolute;
	left:50%;
	top:-120px;
	width:520px;
	height:300px;
	transform:translateX(-50%);
	border-radius:50%;
	background:radial-gradient(circle,rgba(255,63,78,.07),transparent 70%);
	filter:blur(22px);
	pointer-events:none;
}

.ppabam-player-page .pp-player-how-section .pp-player-container{
	position:relative;
	z-index:2;
}

.ppabam-player-page .pp-player-how-head{
	text-align:center;
	margin-bottom:47px;
}

.ppabam-player-page .pp-player-how-section .pp-player-tag{
	margin:0 0 12px;
	color:#ff3c49 !important;
	font-size:10px;
	font-weight:900;
	letter-spacing:2px;
}

.ppabam-player-page .pp-player-how-section .pp-player-title{
	margin:0;
	color:#171a21 !important;
	font-size:42px;
	font-weight:900;
	line-height:1.15;
	letter-spacing:-1.7px;
}

.ppabam-player-page .pp-player-how-section .pp-player-title .pp-how-accent{
	color:#ff3e4d;
	text-shadow:0 0 24px rgba(255,52,68,.16);
}

.ppabam-player-page .pp-player-how-section .pp-player-lead{
	max-width:640px;
	margin:14px auto 0;
	color:#747b86 !important;
	font-size:13px;
	line-height:1.7;
	text-align:center;
}

.ppabam-player-page .pp-player-steps{
	position:relative;
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:0;
	margin-top:0;
}

/* 숫자들을 잇는 얇은 라인 */
.ppabam-player-page .pp-player-steps::before{
	content:"";
	position:absolute;
	left:12.5%;
	right:12.5%;
	top:31px;
	height:1px;
	background:linear-gradient(
		90deg,
		rgba(255,48,62,.15),
		rgba(255,48,62,.34) 22%,
		rgba(255,48,62,.24) 50%,
		rgba(255,48,62,.34) 78%,
		rgba(255,48,62,.15)
	);
}

.ppabam-player-page .pp-player-step{
	position:relative;
	padding:0 24px;
	border:0;
	text-align:center;
}

.ppabam-player-page .pp-player-step-num{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:62px;
	height:62px;
	margin:0 auto;
	border:1px solid rgba(255,52,66,.62);
	border-radius:50%;
	background:#fff;
	color:#ff3f4e !important;
	font-size:24px;
	font-weight:900;
	line-height:1;
	box-shadow:
		0 8px 18px rgba(31,35,43,.07),
		0 0 24px rgba(255,63,78,.05);
}

.ppabam-player-page .pp-player-step-title{
	margin:19px 0 0;
	color:#252a31 !important;
	font-size:14px;
	font-weight:900;
	line-height:1.45;
	letter-spacing:-.2px;
}

.ppabam-player-page .pp-player-step-desc{
	max-width:210px;
	margin:9px auto 0;
	color:#747b86 !important;
	font-size:11px;
	line-height:1.6;
	word-break:keep-all;
}

/* 번호 hover */
.ppabam-player-page .pp-player-step:hover .pp-player-step-num{
	transform:translateY(-3px);
	border-color:#ff4352;
	background:#fff7f8;
	box-shadow:
		0 10px 22px rgba(31,35,43,.09),
		0 0 24px rgba(255,63,78,.10);
}

.ppabam-player-page .pp-player-step-num{
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

/* 다크모드에서도 동일한 전용 디자인 유지 */
body.dark-mode .ppabam-player-page .pp-player-soft-section.pp-player-how-section{
	background:
		radial-gradient(circle at 50% 10%,rgba(255,55,70,.10),transparent 34%),
		linear-gradient(180deg,#0d0d0e 0%,#0a0a0b 100%) !important;
}

@media(max-width:800px){
	.ppabam-player-page .pp-player-soft-section.pp-player-how-section{
		padding:68px 0 72px;
	}
	.ppabam-player-page .pp-player-how-section .pp-player-title{
		font-size:34px;
	}
	.ppabam-player-page .pp-player-steps{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:34px 0;
	}
	.ppabam-player-page .pp-player-steps::before{
		display:none;
	}
}

@media(max-width:480px){
	.ppabam-player-page .pp-player-how-section .pp-player-title{
		font-size:29px;
	}
	.ppabam-player-page .pp-player-steps{
		grid-template-columns:1fr;
		gap:28px;
	}
	.ppabam-player-page .pp-player-step{
		padding:0 10px;
	}
	.ppabam-player-page .pp-player-step-desc{
		max-width:280px;
	}
}

/* COMMUNITY */
.ppabam-player-page .pp-player-share {
	margin-top:35px;
	padding:50px;
	border-radius:24px;
	background:#17191f;
	color:#fff;
}

.ppabam-player-page .pp-player-share-title {
	margin:0;
	color:#fff;
	font-size:32px;
	font-weight:900;
	letter-spacing:-1px;
}

.ppabam-player-page .pp-player-share-desc {
	margin:15px 0 0;
	color:#abb1ba;
	font-size:14px;
	line-height:1.8;
}

.ppabam-player-page .pp-player-sample {
	margin-top:25px;
	border:1px solid #343841;
	border-radius:14px;
	background:#202229;
	overflow:hidden;
}

.ppabam-player-page .pp-player-sample-row {
	display:grid;
	grid-template-columns:50px minmax(0,1fr) 80px;
	gap:10px;
	align-items:center;
	padding:14px 18px;
	border-bottom:1px solid #343841;
	color:#e9ebef;
	font-size:13px;
}

.ppabam-player-page .pp-player-sample-row:last-child {
	border-bottom:0;
}

.ppabam-player-page .pp-player-sample-head {
	color:#9299a3;
	font-size:10px;
	font-weight:800;
}

.ppabam-player-page .pp-player-sample-time {
	text-align:right;
	color:#aeb4bc;
	font-variant-numeric:tabular-nums;
}

.ppabam-player-page .pp-player-notice {
	margin-top:30px;
	padding:22px;
	border:1px solid var(--pp-player-line);
	border-radius:14px;
	background:#fff;
	color:#69717c;
	font-size:13px;
	line-height:1.8;
}

.ppabam-player-page .pp-player-notice strong {
	color:#31363e;
}

/* CTA */
.ppabam-player-page .pp-player-cta {
	padding:100px 0;
	background:#fff7f8;
	text-align:center;
}

.ppabam-player-page .pp-player-cta .pp-player-title {
	font-size:40px;
}

.ppabam-player-page .pp-player-cta-desc {
	margin:18px 0 0;
	color:var(--pp-player-muted);
	font-size:15px;
	line-height:1.7;
}

.ppabam-player-page .pp-player-cta .pp-player-actions {
	justify-content:center;
}


/* =========================================================
   CTA - PPABAM COSMIC EQUALIZER BACKGROUND
   ========================================================= */
.ppabam-player-page .pp-player-cta.pp-player-cta-eq{
	position:relative;
	padding:54px 0 158px;
	overflow:hidden;
	text-align:center;
	isolation:isolate;
	background:
		radial-gradient(circle at 14% 28%, rgba(113,42,171,.24) 0 3%, transparent 23%),
		radial-gradient(circle at 82% 16%, rgba(65,93,255,.17) 0 4%, transparent 22%),
		radial-gradient(circle at 70% 74%, rgba(255,50,120,.12) 0 3%, transparent 25%),
		linear-gradient(180deg,#05060b 0%,#080912 48%,#05060a 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ppabam-player-page .pp-player-cta.pp-player-cta-eq::before{
	content:"";
	position:absolute;
	inset:-18%;
	z-index:-5;
	background:
		radial-gradient(ellipse at 20% 42%, rgba(170,43,255,.12), transparent 30%),
		radial-gradient(ellipse at 78% 30%, rgba(76,63,255,.13), transparent 28%),
		radial-gradient(ellipse at 66% 74%, rgba(255,46,118,.08), transparent 30%);
	filter:blur(26px);
	animation:ppCtaNebula 11s ease-in-out infinite alternate;
	pointer-events:none;
}
@keyframes ppCtaNebula{
	0%{transform:scale(1) translate3d(-1%,0,0);opacity:.75}
	100%{transform:scale(1.08) translate3d(1.5%,-1%,0);opacity:1}
}
.ppabam-player-page .pp-player-cta.pp-player-cta-eq::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-4;
	opacity:.9;
	background-image:
		radial-gradient(circle at 7% 18%,rgba(255,255,255,.95) 0 1px,transparent 1.6px),
		radial-gradient(circle at 13% 72%,rgba(255,94,166,.95) 0 1px,transparent 1.8px),
		radial-gradient(circle at 21% 37%,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
		radial-gradient(circle at 29% 14%,rgba(109,150,255,.9) 0 1px,transparent 1.8px),
		radial-gradient(circle at 34% 69%,rgba(255,255,255,.9) 0 1px,transparent 1.6px),
		radial-gradient(circle at 44% 27%,rgba(255,77,103,.85) 0 1px,transparent 1.8px),
		radial-gradient(circle at 52% 81%,rgba(43,224,232,.9) 0 1px,transparent 1.8px),
		radial-gradient(circle at 61% 18%,rgba(255,255,255,.95) 0 1px,transparent 1.6px),
		radial-gradient(circle at 68% 45%,rgba(151,104,255,.9) 0 1px,transparent 1.7px),
		radial-gradient(circle at 76% 67%,rgba(255,255,255,.85) 0 1px,transparent 1.5px),
		radial-gradient(circle at 83% 23%,rgba(79,145,255,.95) 0 1px,transparent 1.8px),
		radial-gradient(circle at 91% 59%,rgba(255,76,169,.95) 0 1px,transparent 1.9px),
		radial-gradient(circle at 96% 34%,rgba(255,255,255,.9) 0 1px,transparent 1.5px);
	animation:ppCtaStars 5s ease-in-out infinite alternate;
	pointer-events:none;
}
@keyframes ppCtaStars{from{opacity:.58}to{opacity:1}}

.ppabam-player-page .pp-player-cta-glow{
	position:absolute;
	left:50%;
	top:18px;
	width:920px;
	height:430px;
	transform:translateX(-50%);
	z-index:-3;
	background:
		radial-gradient(circle at 50% 25%,rgba(120,83,255,.13),transparent 44%),
		radial-gradient(circle at 16% 38%,rgba(255,77,103,.11),transparent 30%),
		radial-gradient(circle at 84% 34%,rgba(62,198,255,.10),transparent 30%);
	filter:blur(38px);
}
.ppabam-player-page .pp-player-cta-content{
	position:relative;
	z-index:6;
	max-width:860px;
	margin:0 auto;
}
.ppabam-player-page .pp-player-cta-eq .pp-player-tag{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0 0 22px;
	padding:8px 13px;
	border:1px solid rgba(255,77,103,.28);
	border-radius:999px;
	background:rgba(255,77,103,.075);
	color:#ff667e !important;
	font-size:10px;
	font-weight:900;
	letter-spacing:1.9px;
	backdrop-filter:blur(8px);
	box-shadow:0 0 22px rgba(255,77,103,.06);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-tag::before{
	content:"";
	width:7px;
	height:7px;
	border-radius:50%;
	background:#ff4d67;
	box-shadow:0 0 12px rgba(255,77,103,.9);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-title{
	margin:0;
	color:#f7f8fb !important;
	font-size:48px;
	font-weight:900;
	line-height:1.22;
	letter-spacing:-2.1px;
	text-shadow:0 0 26px rgba(255,255,255,.05),0 8px 30px rgba(0,0,0,.48);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-title .pp-player-cosmic-accent{
	color:#ff5a73;
	text-shadow:0 0 18px rgba(255,77,103,.32),0 0 42px rgba(255,77,103,.14);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-cta-desc{
	margin:20px 0 0;
	color:#a6adba !important;
	font-size:15px;
	line-height:1.8;
}
.ppabam-player-page .pp-player-cta-eq .pp-player-actions{
	justify-content:center;
	margin-top:30px;
	gap:12px;
}
.ppabam-player-page .pp-player-cta-eq .pp-player-btn{min-width:190px}
.ppabam-player-page .pp-player-cta-eq .pp-player-btn-primary{
	border-color:#ff4d67 !important;
	background:linear-gradient(180deg,#ff5a73,#ff435f) !important;
	color:#fff !important;
	box-shadow:0 10px 30px rgba(255,77,103,.28),0 0 24px rgba(255,77,103,.13);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-btn-primary:hover{
	transform:translateY(-2px);
	background:linear-gradient(180deg,#ff6680,#ff4d67) !important;
	box-shadow:0 14px 36px rgba(255,77,103,.36);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-btn-ghost{
	border:1px solid rgba(255,255,255,.14) !important;
	background:rgba(8,10,18,.40) !important;
	color:#e0e4ea !important;
	backdrop-filter:blur(10px);
}
.ppabam-player-page .pp-player-cta-eq .pp-player-btn-ghost:hover{
	transform:translateY(-2px);
	border-color:rgba(255,99,133,.42) !important;
	color:#ff8ea0 !important;
	background:rgba(255,77,103,.06) !important;
}
.ppabam-player-page .pp-player-cta-eq-bg{
	position:absolute;
	left:50%;
	bottom:0;
	width:min(1180px,100%);
	height:250px;
	transform:translateX(-50%);
	z-index:2;
	overflow:hidden;
	pointer-events:none;
}
.ppabam-player-page .pp-player-cta-eq-bars{
	position:absolute;
	left:2%;
	right:2%;
	bottom:88px;
	height:145px;
	display:grid;
	grid-template-columns:repeat(28,1fr);
	align-items:end;
	gap:5px;
	filter:
		drop-shadow(0 0 5px rgba(255,77,103,.18))
		drop-shadow(0 0 9px rgba(25,199,234,.14));
}
.ppabam-player-page .pp-player-cta-eq-bars i,
.ppabam-player-page .pp-player-cta-eq-reflection i{
	position:relative;
	display:block;
	width:100%;
	height:var(--h);
	min-height:14px;
	border-radius:2px;
	transform-origin:bottom;
	transition:height .075s linear,filter .10s ease,opacity .12s ease;

	background-image:
		repeating-linear-gradient(
			to top,
			var(--c) 0 5px,
			transparent 5px 9px
		);
	background-position:left bottom;
	box-shadow:
		0 0 5px rgba(255,255,255,.08),
		inset 0 0 1px rgba(255,255,255,.22);
	opacity:.96;
	will-change:height,filter,opacity;
}

/* 메인 EQ 막대 - 위아래 동일한 폭의 직선형 LED 바 */
.ppabam-player-page .pp-player-cta-eq-bars i{
	clip-path:none !important;
	-webkit-clip-path:none !important;
	-webkit-mask-image:none !important;
	mask-image:none !important;
	border-radius:2px 2px 0 0;
}

/* 실제 레벨미터처럼 맨 위 피크 라인 */
.ppabam-player-page .pp-player-cta-eq-bars i::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:2px;
	border-radius:2px;
	background:var(--c);
	box-shadow:0 0 6px var(--c);
	opacity:.9;
	pointer-events:none;
}

@keyframes ppCtaEqMove{0%{transform:scaleY(1)}100%{transform:scaleY(1)}}


/* 메인 배너 EQ - 음악 반응형 느낌의 섬세한 웨이브 */
.ppabam-player-page .pp-player-cta-eq-bars i{
	transform-origin:bottom;
}
.ppabam-player-page .pp-player-cta-eq-bars i.pp-eq-beat{
	filter:brightness(1.14) saturate(1.08);
}
.ppabam-player-page .pp-player-cta-eq-reflection i{
	transition:height .12s linear, filter .16s ease, opacity .16s ease;
}

/* EQ가 서 있는 빛나는 기준선 + 유리 바닥 반사 */
.ppabam-player-page .pp-player-cta-eq-floor{
	position:absolute;
	left:1.5%;
	right:1.5%;
	bottom:84px;

	z-index:7;
	background:linear-gradient(
		90deg,
		#ff235f 0%,
		#ff6f25 14%,
		#ffd72f 28%,
		#8bea3f 40%,
		#26e0a6 50%,
		#22d7ec 61%,
		#2f8cff 75%,
		#7849ff 85%,
		#d72cf0 93%,
		#ff2a89 100%
	);
	box-shadow:
		0 0 3px rgba(255,255,255,1),
		0 0 7px rgba(255,255,255,.95),
		0 0 14px rgba(255,255,255,.62),
		0 0 25px rgba(50,210,245,.58),
		0 0 42px rgba(50,210,245,.34),
		0 0 34px rgba(255,49,129,.48),
		0 0 58px rgba(255,49,129,.26);
	filter:brightness(1.28) saturate(1.22);
	opacity:1;
}




/* 아래쪽 EQ 막대 빛 반사 - 기준선 바로 아래에서 선명하게 시작 */
.ppabam-player-page .pp-player-cta-eq-reflection{
	position:absolute;
	left:2%;
	right:2%;
	top:168px;
	bottom:auto;
	height:80px;
	display:grid;
	grid-template-columns:repeat(28,1fr);
	align-items:start;
	gap:5px;
	opacity:.72;
	filter:blur(.25px) brightness(1.08) saturate(1.08);
	-webkit-mask-image:linear-gradient(
		to bottom,
		rgba(0,0,0,.96) 0%,
		rgba(0,0,0,.74) 32%,
		rgba(0,0,0,.38) 68%,
		transparent 100%
	);
	mask-image:linear-gradient(
		to bottom,
		rgba(0,0,0,.96) 0%,
		rgba(0,0,0,.74) 32%,
		rgba(0,0,0,.38) 68%,
		transparent 100%
	);
}

/* 반사 막대도 끝까지 동일한 폭 유지 */
.ppabam-player-page .pp-player-cta-eq-reflection i{
	transform-origin:top !important;
	min-height:8px;
	clip-path:none !important;
	-webkit-clip-path:none !important;
	border-radius:0 0 2px 2px;
	box-shadow:
		0 0 7px rgba(255,255,255,.08),
		inset 0 0 1px rgba(255,255,255,.16);
}

/* 기준선 바로 아래에 색상이 번지는 광택 */
.ppabam-player-page .pp-player-cta-eq-reflection::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-5px;
	height:28px;
	z-index:3;
	background:linear-gradient(
		90deg,
		rgba(255,35,95,.32),
		rgba(255,174,31,.30) 20%,
		rgba(191,239,43,.28) 32%,
		rgba(33,221,180,.28) 47%,
		rgba(39,188,246,.30) 62%,
		rgba(74,84,255,.28) 78%,
		rgba(217,44,242,.30) 92%,
		rgba(255,42,137,.30)
	);
	filter:blur(12px);
	opacity:.9;
	pointer-events:none;
}

/* 바닥으로 길게 퍼지는 RGB 반사광 */
.ppabam-player-page .pp-player-cta-eq-reflection::after{
	content:"";
	position:absolute;
	left:-1%;
	right:-1%;
	top:16px;
	height:72px;
	background:
		linear-gradient(
			90deg,
			rgba(255,35,95,.20),
			rgba(255,174,31,.18) 20%,
			rgba(153,241,55,.16) 34%,
			rgba(33,221,180,.16) 48%,
			rgba(39,188,246,.17) 63%,
			rgba(74,84,255,.16) 78%,
			rgba(217,44,242,.18) 92%,
			rgba(255,42,137,.18)
		);
	filter:blur(20px);
	opacity:.92;
	pointer-events:none;
}
@media(max-width:800px){
	.ppabam-player-page .pp-player-cta.pp-player-cta-eq{padding:96px 0 132px}
	.ppabam-player-page .pp-player-cta-eq .pp-player-title{font-size:36px;letter-spacing:-1.4px}
	.ppabam-player-page .pp-player-cta-eq-bg{height:205px}
	.ppabam-player-page .pp-player-cta-eq-bars{left:-3%;right:-3%;bottom:73px;height:116px;gap:5px}
	.ppabam-player-page .pp-player-cta-eq-floor{bottom:69px}
	.ppabam-player-page .pp-player-cta-eq-reflection{left:-3%;right:-3%;top:136px;bottom:auto;height:67px;gap:5px}
}
@media(max-width:480px){
	.ppabam-player-page .pp-player-cta.pp-player-cta-eq{padding:82px 0 112px}
	.ppabam-player-page .pp-player-cta-eq .pp-player-title{font-size:30px;letter-spacing:-1px}
	.ppabam-player-page .pp-player-cta-eq .pp-player-actions{flex-direction:column;align-items:center}
	.ppabam-player-page .pp-player-cta-eq .pp-player-btn{width:100%;max-width:290px}
	.ppabam-player-page .pp-player-cta-eq-bg{height:176px}
	.ppabam-player-page .pp-player-cta-eq-bars{left:-14%;right:-14%;bottom:64px;height:98px;gap:4px}
	.ppabam-player-page .pp-player-cta-eq-floor{left:-10%;right:-10%;bottom:60px}
	.ppabam-player-page .pp-player-cta-eq-reflection{left:-14%;right:-14%;top:118px;bottom:auto;height:56px;gap:4px}
}


/* =========================================================
   SMART MAIN BANNER / AD ROTATION
   MAIN 60s -> AD 10s -> MAIN 60s 반복
   ========================================================= */
.ppabam-player-page .pp-player-cta.pp-player-cta-eq{
    min-height:520px;
    transition:background .45s ease;
}

.ppabam-player-page .pp-player-smart-main-layer{
    opacity:1;
    transition:opacity .45s ease, filter .45s ease;
}

/* 왼쪽 상단 광고 카운터 */
.ppabam-player-page .pp-player-ad-countdown{
    position:absolute;
    top:18px;
    left:max(18px, calc((100% - 1180px) / 2 + 24px));
    z-index:30;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(5,6,11,.58);
    color:rgba(255,255,255,.76);
    font-size:11px;
    font-weight:800;
    letter-spacing:-.15px;
    line-height:1;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    user-select:none;
    pointer-events:none;
    transition:background .25s ease,border-color .25s ease,color .25s ease;
}

.ppabam-player-page .pp-player-ad-countdown::before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:#ff5a73;
    box-shadow:0 0 9px rgba(255,77,103,.75);
}

.ppabam-player-page .pp-player-ad-countdown strong{
    color:#fff;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

/* 광고가 실제 노출 중일 때 카운터 상태 */
.ppabam-player-page .pp-player-cta-eq.is-ad .pp-player-ad-countdown{
    border-color:rgba(255,255,255,.16);
    background:rgba(0,0,0,.48);
    color:rgba(255,255,255,.82);
}

/* 같은 메인 배너 자리 위에 광고가 겹쳐서 나타남 -> 레이아웃 점프 없음 */
.ppabam-player-page .pp-player-smart-ad-layer{
    position:absolute;
    inset:0;
    z-index:16;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:56px 24px 28px;
    box-sizing:border-box;
    background:#08090d;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .45s ease, visibility 0s linear .45s;
    overflow:hidden;
}

.ppabam-player-page .pp-player-smart-ad-inner{
    width:100%;
    height:100%;
    min-height:330px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.ppabam-player-page .pp-player-smart-ad-link{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
}

.ppabam-player-page .pp-player-smart-ad-image{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
}

/* 광고 URL이 아직 없을 때만 보이는 테스트 슬롯 */
.ppabam-player-page .pp-player-smart-ad-empty{
    width:100%;
    height:100%;
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 25% 25%,rgba(255,77,103,.08),transparent 30%),
        radial-gradient(circle at 75% 65%,rgba(87,111,255,.08),transparent 32%),
        #0b0c11;
    color:rgba(255,255,255,.38);
    font-size:13px;
    font-weight:800;
    letter-spacing:.2px;
}

.ppabam-player-page .pp-player-cta-eq.is-ad .pp-player-smart-main-layer{
    opacity:0;
    filter:blur(2px);
    pointer-events:none;
}

.ppabam-player-page .pp-player-cta-eq.is-ad .pp-player-smart-ad-layer{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .45s ease, visibility 0s linear 0s;
}

@media(max-width:800px){
    .ppabam-player-page .pp-player-cta.pp-player-cta-eq{min-height:480px}
    .ppabam-player-page .pp-player-ad-countdown{top:14px;left:16px;min-height:28px;padding:0 10px;font-size:10px}
    .ppabam-player-page .pp-player-smart-ad-layer{padding:50px 16px 20px}
    .ppabam-player-page .pp-player-smart-ad-inner,
    .ppabam-player-page .pp-player-smart-ad-empty{min-height:300px}
}

@media(max-width:480px){
    .ppabam-player-page .pp-player-cta.pp-player-cta-eq{min-height:450px}
    .ppabam-player-page .pp-player-ad-countdown{top:12px;left:12px}
    .ppabam-player-page .pp-player-smart-ad-layer{padding:46px 12px 16px}
    .ppabam-player-page .pp-player-smart-ad-inner,
    .ppabam-player-page .pp-player-smart-ad-empty{min-height:280px}
}

@media(prefers-reduced-motion:reduce){
    .ppabam-player-page .pp-player-smart-main-layer,
    .ppabam-player-page .pp-player-smart-ad-layer,
    .ppabam-player-page .pp-player-cta.pp-player-cta-eq{
        transition:none !important;
    }
}


/* =========================================================
   CHROME INSTALL GUIDE
   ========================================================= */
.ppabam-player-page .pp-player-install-section{
	padding:90px 0;
	background:#fff;
}
.ppabam-player-page .pp-player-install-head{
	max-width:720px;
}
.ppabam-player-page .pp-player-install-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:14px;
	margin-top:38px;
}
.ppabam-player-page .pp-player-install-step{
	position:relative;
	min-height:190px;
	padding:24px 22px;
	border:1px solid var(--pp-player-line);
	border-radius:16px;
	background:#fff;
	overflow:hidden;
}
.ppabam-player-page .pp-player-install-num{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:10px;
	background:#fff1f4;
	color:var(--pp-player-main);
	font-size:11px;
	font-weight:900;
}
.ppabam-player-page .pp-player-install-step h3{
	margin:20px 0 0;
	color:#252a31;
	font-size:16px;
	font-weight:900;
	line-height:1.4;
}
.ppabam-player-page .pp-player-install-step p{
	margin:10px 0 0;
	color:var(--pp-player-muted);
	font-size:12px;
	line-height:1.75;
	word-break:keep-all;
}
.ppabam-player-page .pp-player-install-step::after{
	content:"→";
	position:absolute;
	right:18px;
	top:25px;
	color:#d4d8de;
	font-size:16px;
	font-weight:900;
}
.ppabam-player-page .pp-player-install-step:last-child::after{
	content:"✓";
	color:#ff7187;
}
.ppabam-player-page .pp-player-install-notice{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin-top:16px;
	padding:16px 18px;
	border:1px solid #ffd8df;
	border-radius:12px;
	background:#fff8f9;
	color:#6f7680;
	font-size:12px;
	line-height:1.7;
}
.ppabam-player-page .pp-player-install-notice b{
	color:#ff4d67;
	white-space:nowrap;
}
body.dark-mode .ppabam-player-page .pp-player-install-section{
	background:#0e0f10!important;
}
body.dark-mode .ppabam-player-page .pp-player-install-step{
	background:#191b1f!important;
	border-color:#30343a!important;
}
body.dark-mode .ppabam-player-page .pp-player-install-step h3{
	color:#f3f4f6!important;
}
body.dark-mode .ppabam-player-page .pp-player-install-step p{
	color:#aeb4bd!important;
}
body.dark-mode .ppabam-player-page .pp-player-install-num{
	background:#342027!important;
	color:#ff8797!important;
}
body.dark-mode .ppabam-player-page .pp-player-install-notice{
	background:#21181b!important;
	border-color:#4b2931!important;
	color:#b9bec6!important;
}
@media(max-width:800px){
	.ppabam-player-page .pp-player-install-section{padding:68px 0}
	.ppabam-player-page .pp-player-install-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
	.ppabam-player-page .pp-player-install-grid{grid-template-columns:1fr}
	.ppabam-player-page .pp-player-install-step{min-height:0}
}



/* =========================================================
   HOW IT WORKS - DARK MODE EXPLICIT OVERRIDES
   공통 dark-mode 규칙에 덮이지 않도록 전용 지정
   ========================================================= */
body.dark-mode .ppabam-player-page .pp-player-how-section,
body.dark-mode .content .ppabam-player-page .pp-player-how-section{
	background:
		radial-gradient(circle at 50% 10%,rgba(255,55,70,.12),transparent 34%),
		linear-gradient(180deg,#0b0b0c 0%,#080809 100%) !important;
	color:#fff !important;
}

body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-title{
	color:#f7f7f8 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-how-accent,
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-tag{
	color:#ff4351 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-lead{
	color:#858b94 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-title{
	color:#f2f3f5 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-desc{
	color:#838891 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-num{
	color:#ff4553 !important;
	border-color:rgba(255,66,80,.68) !important;
	background:
		radial-gradient(circle at 50% 42%,rgba(255,65,78,.24),rgba(67,13,18,.50) 68%,rgba(15,8,9,.92) 100%) !important;
}



body.dark-mode .content .ppabam-player-page .pp-player-features-section{
	background:
		radial-gradient(circle at 50% -10%,rgba(255,54,67,.10),transparent 34%),
		linear-gradient(180deg,#0c0c0d 0%,#09090a 100%) !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card{
	background:
		linear-gradient(180deg,rgba(25,18,19,.76) 0%,rgba(13,13,14,.98) 100%) !important;
	border-color:#25272a !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card.is-featured{
	border-color:#8e292f !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-title{
	color:#f2f3f5 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-desc{
	color:#858a93 !important;
}



/* =========================================================
   FEATURES / HOW - LIGHT & DARK MODE FINAL OVERRIDES
   ========================================================= */

/* FEATURES - dark mode */
body.dark-mode .content .ppabam-player-page .pp-player-features-section{
	background:
		radial-gradient(circle at 50% -10%,rgba(255,54,67,.10),transparent 34%),
		linear-gradient(180deg,#0c0c0d 0%,#09090a 100%) !important;
	color:#fff !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section::before{
	background:
		repeating-linear-gradient(
			to right,
			transparent 0,
			transparent calc(16.666% - 1px),
			rgba(255,255,255,.018) calc(16.666% - 1px),
			rgba(255,255,255,.018) 16.666%
		) !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-title{
	color:#f5f5f7 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-lead{
	color:#858a93 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card,
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card.is-featured{
	background:linear-gradient(180deg,rgba(25,18,19,.76),rgba(13,13,14,.98)) !important;
	border-color:#25272a !important;
	box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card:hover,
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card.is-featured:hover{
	border-color:#ff3f4e !important;
	box-shadow:0 12px 30px rgba(0,0,0,.30),0 0 22px rgba(255,51,65,.05) !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-card::before{
	background:rgba(105,23,29,.38) !important;
	color:#ff5561 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-title{
	color:#f2f3f5 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-features-section .pp-player-feature-desc{
	color:#858a93 !important;
}

/* HOW - dark mode */
body.dark-mode .content .ppabam-player-page .pp-player-how-section{
	background:
		radial-gradient(circle at 50% 10%,rgba(255,55,70,.12),transparent 34%),
		linear-gradient(180deg,#0b0b0c 0%,#080809 100%) !important;
	color:#fff !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section::before{
	background:
		repeating-linear-gradient(
			to right,
			transparent 0,
			transparent calc(25% - 1px),
			rgba(255,255,255,.025) calc(25% - 1px),
			rgba(255,255,255,.025) 25%
		) !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-title{
	color:#f7f7f8 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-lead{
	color:#858b94 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-title{
	color:#f2f3f5 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-desc{
	color:#838891 !important;
}
body.dark-mode .content .ppabam-player-page .pp-player-how-section .pp-player-step-num{
	color:#ff4553 !important;
	border-color:rgba(255,66,80,.68) !important;
	background:
		radial-gradient(circle at 50% 42%,rgba(255,65,78,.24),rgba(67,13,18,.50) 68%,rgba(15,8,9,.92) 100%) !important;
	box-shadow:
		0 0 0 1px rgba(255,255,255,.015) inset,
		0 8px 18px rgba(0,0,0,.42),
		0 0 24px rgba(255,43,58,.08) !important;
}


/* PAGE FOOT */
.ppabam-player-page .pp-player-page-foot {
	padding:30px 0;
	border-top:1px solid var(--pp-player-line);
	background:#fff;
	color:#8a9099;
	font-size:12px;
}

/* Gnuboard/Bootstrap 충돌 방지 */
.ppabam-player-page .pp-player-feature-grid::before,
.ppabam-player-page .pp-player-feature-grid::after,
.ppabam-player-page .pp-player-steps::before,
.ppabam-player-page .pp-player-steps::after,
.ppabam-player-page .pp-player-sample-row::before,
.ppabam-player-page .pp-player-sample-row::after {
	display:none !important;
	content:none !important;
}

/* 반응형 */
@media (max-width:800px) {

	.ppabam-player-page .pp-player-hero-inner {
		grid-template-columns:1fr;
		gap:28px;
	}

	.ppabam-player-page .pp-player-tools-grid {
		grid-template-columns:1fr;
	}

	.ppabam-player-page .pp-player-hero-side {
		padding:22px;
	}


	.ppabam-player-page .pp-player-container {
		padding:0 18px;
	}

	.ppabam-player-page .pp-player-hero {
		padding:72px 0 64px;
	}

	.ppabam-player-page .pp-player-hero-title {
		font-size:38px;
		letter-spacing:-1.7px;
	}

	.ppabam-player-page .pp-player-title {
		font-size:30px;
	}

	.ppabam-player-page .pp-player-feature-grid {
		grid-template-columns:1fr;
	}

	.ppabam-player-page .pp-player-steps {
		grid-template-columns:repeat(2, minmax(0,1fr));
	}

	.ppabam-player-page .pp-player-share {
		padding:30px;
	}

	.ppabam-player-page .pp-player-section {
		padding:68px 0;
	}
}

@media (max-width:480px) {

	.ppabam-player-page .pp-player-hero-title {
		font-size:34px;
	}

	.ppabam-player-page .pp-player-hero-side-list {
		grid-template-columns:1fr;
	}

	.ppabam-player-page .pp-player-tool-card {
		min-height:280px;
		padding:24px 18px;
	}


	.ppabam-player-page .pp-player-container {
		padding:0 14px;
	}

	.ppabam-player-page .pp-player-hero-title {
		font-size:33px;
	}

	.ppabam-player-page .pp-player-lead {
		font-size:15px;
	}

	.ppabam-player-page .pp-player-btn {
		flex:1 1 auto;
		padding:0 14px;
	}

	.ppabam-player-page .pp-player-steps {
		grid-template-columns:1fr;
	}

	.ppabam-player-page .pp-player-share {
		padding:24px 16px;
		border-radius:17px;
	}

	.ppabam-player-page .pp-player-share-title {
		font-size:26px;
	}

	.ppabam-player-page .pp-player-sample-row {
		grid-template-columns:34px minmax(0,1fr) 55px;
		gap:7px;
		padding:12px 10px;
		font-size:11px;
	}
}


/* =========================================================
   PPABAM PLAYER - 빠밤 공통 다크모드 연동
   body.dark-mode 기준
   ========================================================= */

body.dark-mode .ppabam-player-page {
	--pp-player-ink:#f3f4f6;
	--pp-player-muted:#aeb4bd;
	--pp-player-line:#30343a;
	--pp-player-soft:#15171a;
	--pp-player-main-soft:#26191d;

	background:#0e0f10 !important;
	color:#e6e6e6 !important;
}

/* 기본 섹션 */
body.dark-mode .ppabam-player-page .pp-player-hero,
body.dark-mode .ppabam-player-page .pp-player-tools-section,
body.dark-mode .ppabam-player-page .pp-player-section {
	background:#0e0f10 !important;
	color:#e6e6e6 !important;
}

body.dark-mode .ppabam-player-page .pp-player-soft-section {
	background:#141517 !important;
}

/* 제목 / 설명 */
body.dark-mode .ppabam-player-page .pp-player-hero-title,
body.dark-mode .ppabam-player-page .pp-player-title,
body.dark-mode .ppabam-player-page .pp-player-feature-title,
body.dark-mode .ppabam-player-page .pp-player-step-title,
body.dark-mode .ppabam-player-page .pp-player-hero-side-title,
body.dark-mode .ppabam-player-page .pp-player-tool-title {
	color:#f5f5f5 !important;
}

body.dark-mode .ppabam-player-page .pp-player-hero-desc,
body.dark-mode .ppabam-player-page .pp-player-lead,
body.dark-mode .ppabam-player-page .pp-player-feature-desc,
body.dark-mode .ppabam-player-page .pp-player-step-desc,
body.dark-mode .ppabam-player-page .pp-player-hero-side-desc,
body.dark-mode .ppabam-player-page .pp-player-tool-desc,
body.dark-mode .ppabam-player-page .pp-player-cta-desc {
	color:#aeb4bd !important;
}

/* 상단 배지 / 태그 */
body.dark-mode .ppabam-player-page .pp-player-hero-badge {
	background:#24181c !important;
	border-color:#4b2931 !important;
	color:#ff6f84 !important;
}

body.dark-mode .ppabam-player-page .pp-player-hero-point,
body.dark-mode .ppabam-player-page .pp-player-tool-tag {
	background:#202226 !important;
	color:#b9bec6 !important;
}

/* 상단 오른쪽 프로그램 설명 박스 */
body.dark-mode .ppabam-player-page .pp-player-hero-side {
	background:linear-gradient(180deg,#191b1f 0%,#15171a 100%) !important;
	border-color:#30343a !important;
	box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}

body.dark-mode .ppabam-player-page .pp-player-hero-side-item {
	background:#202226 !important;
	border-color:#30343a !important;
	color:#e2e4e8 !important;
}

body.dark-mode .ppabam-player-page .pp-player-hero-side-item span:first-child {
	background:#342027 !important;
	color:#ff8797 !important;
}

/* 버튼 */
body.dark-mode .ppabam-player-page .pp-player-btn {
	background:#1d1f23 !important;
	border-color:#34373d !important;
	color:#f1f2f4 !important;
}

body.dark-mode .ppabam-player-page .pp-player-btn:hover,
body.dark-mode .ppabam-player-page .pp-player-btn:focus {
	background:#292126 !important;
	border-color:#70404a !important;
	color:#ff8797 !important;
}

body.dark-mode .ppabam-player-page .pp-player-btn-primary {
	background:var(--pp-player-main) !important;
	border-color:var(--pp-player-main) !important;
	color:#fff !important;
}

body.dark-mode .ppabam-player-page .pp-player-btn-primary:hover,
body.dark-mode .ppabam-player-page .pp-player-btn-primary:focus {
	background:#f13e59 !important;
	border-color:#f13e59 !important;
	color:#fff !important;
}

/* PLAYER / SHARE 큰 카드 */
body.dark-mode .ppabam-player-page .pp-player-tool-card {
	background:#191b1f !important;
	border-color:#30343a !important;
	color:#eee !important;
}

body.dark-mode .ppabam-player-page .pp-player-tool-card:hover {
	border-color:#5c363e !important;
	box-shadow:0 16px 38px rgba(0,0,0,.20) !important;
}

body.dark-mode .ppabam-player-page .pp-player-tool-card-dark {
	background:#111216 !important;
	border-color:#30343a !important;
}

/* 기능 카드 */
body.dark-mode .ppabam-player-page .pp-player-feature-card {
	background:#191b1f !important;
	border-color:#30343a !important;
}

body.dark-mode .ppabam-player-page .pp-player-feature-card:hover {
	border-color:#5c363e !important;
	box-shadow:0 12px 30px rgba(0,0,0,.20) !important;
}

/* 사용 방법 구분선 */
body.dark-mode .ppabam-player-page .pp-player-step {
	border-top-color:#555a62 !important;
}

/* 플레이리스트 커뮤니티 */
body.dark-mode .ppabam-player-page .pp-player-share {
	background:#15171b !important;
	border:1px solid #30343a !important;
}

body.dark-mode .ppabam-player-page .pp-player-sample {
	background:#1d1f24 !important;
	border-color:#343841 !important;
}

body.dark-mode .ppabam-player-page .pp-player-sample-row {
	border-bottom-color:#343841 !important;
	color:#e9ebef !important;
}

body.dark-mode .ppabam-player-page .pp-player-sample-head,
body.dark-mode .ppabam-player-page .pp-player-sample-time {
	color:#aeb4bc !important;
}

/* 콘텐츠 안내 */
body.dark-mode .ppabam-player-page .pp-player-notice {
	background:#191b1f !important;
	border-color:#30343a !important;
	color:#b9bec6 !important;
}

body.dark-mode .ppabam-player-page .pp-player-notice strong {
	color:#f3f4f6 !important;
}

/* 하단 CTA */
body.dark-mode .ppabam-player-page .pp-player-cta:not(.pp-player-cta-eq) {
	background:#171316 !important;
}

body.dark-mode .ppabam-player-page .pp-player-page-foot {
	background:#0e0f10 !important;
	border-top-color:#292c31 !important;
	color:#8f959d !important;
}

/* 빠밤 공통 다크모드의
   .content p/span/div { color:#ddd; } 규칙보다
   PPABAM Player 고유 색상이 우선되도록 재지정 */
body.dark-mode .content .ppabam-player-page .pp-player-tag,
body.dark-mode .content .ppabam-player-page .pp-player-tool-no,
body.dark-mode .content .ppabam-player-page .pp-player-step-num {
	color:var(--pp-player-main) !important;
}

body.dark-mode .content .ppabam-player-page .pp-player-playing,
body.dark-mode .content .ppabam-player-page .pp-player-tool-card-dark .pp-player-tool-action {
	color:#ff8797 !important;
}

body.dark-mode .content .ppabam-player-page .pp-player-now-title {
	color:#fff !important;
}

body.dark-mode .content .ppabam-player-page .pp-player-now-sub {
	color:#9ba2ad !important;
}





/* =========================================================
   INTERACTIVE PLAYER PREVIEW - 실제 PPABAM Player UI 기반
   ========================================================= */
.ppabam-player-page .pp-demo-section{padding:10px 0 92px;background:#fff}
.ppabam-player-page .pp-demo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.ppabam-player-page .pp-demo-note{max-width:300px;color:#8b929c;font-size:11px;line-height:1.65;text-align:right}
.ppabam-player-page .pp-demo-stage{display:flex;justify-content:center;padding:38px;border:1px solid #e7e9ed;border-radius:24px;background:#f5f6f8;overflow:hidden}
.ppabam-player-page .pp-demo-player{width:352px;max-width:100%;border:1px solid #2d3037;border-radius:19px;background:#15171d;color:#fff;box-shadow:0 25px 60px rgba(0,0,0,.25);overflow:hidden;user-select:none}
.ppabam-player-page .pp-demo-inner{padding:14px 14px 0}
.ppabam-player-page .pp-demo-top{display:flex;align-items:center;gap:8px}
.ppabam-player-page .pp-demo-brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.ppabam-player-page .pp-demo-logo{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid #ff4d67;border-radius:50%;color:#ff4d67;font-size:14px;font-weight:900}
.ppabam-player-page .pp-demo-brand strong{display:block;color:#f5f5f7;font-size:12px;line-height:1}
.ppabam-player-page .pp-demo-brand small{display:block;margin-top:4px;color:#747b87;font-size:7px;letter-spacing:1.2px}
.ppabam-player-page .pp-demo-ver{margin-left:3px;color:#7d8490;font-size:8px}
.ppabam-player-page .pp-demo-iconbtn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:8px;background:#20232a;color:#aeb4be;font-size:10px;cursor:pointer;transition:.18s}
.ppabam-player-page .pp-demo-iconbtn:hover,.ppabam-player-page .pp-demo-iconbtn.on{background:#2b2f37;color:#fff;transform:translateY(-1px)}
.ppabam-player-page .pp-demo-searchbar{display:grid;grid-template-columns:48px 1fr 58px;gap:7px;margin-top:18px}
.ppabam-player-page .pp-demo-cc,.ppabam-player-page .pp-demo-search{border:0;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}
.ppabam-player-page .pp-demo-cc{background:#202329;color:#c8cdd4}
.ppabam-player-page .pp-demo-input{height:35px;padding:0 12px;border:1px solid #30343c;border-radius:9px;background:#111319;color:#8b929d;font-size:9px;outline:0}
.ppabam-player-page .pp-demo-search{background:#ff4d67;color:#fff}
.ppabam-player-page .pp-demo-now{position:relative;margin-top:11px;padding:13px;border:1px solid #2b2f36;border-radius:15px;background:#1b1e24;overflow:hidden}
.ppabam-player-page .pp-demo-mode{position:absolute;right:13px;top:13px;padding:4px 9px;border-radius:999px;background:#47232d;color:#ff8194;font-size:8px;font-weight:900;letter-spacing:.5px}
.ppabam-player-page .pp-demo-song{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center}
.ppabam-player-page .pp-demo-cover{position:relative;width:70px;height:70px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 6px,#2a2d34 7px 10px);box-shadow:inset 0 0 0 7px #111;animation:ppDemoSpin 7s linear infinite;animation-play-state:paused}
.ppabam-player-page .pp-demo-cover:after{content:"P";position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ff4d67;color:#fff;font-size:10px;font-weight:900}
.ppabam-player-page .pp-demo-player.playing .pp-demo-cover{animation-play-state:running}
@keyframes ppDemoSpin{to{transform:rotate(360deg)}}
.ppabam-player-page .pp-demo-state{color:#ff6680;font-size:9px;font-weight:900}
.ppabam-player-page .pp-demo-songtitle{margin-top:7px;color:#fff;font-size:11px;font-weight:800;line-height:1.45}
.ppabam-player-page .pp-demo-bars{display:flex;align-items:flex-end;gap:2px;height:28px;margin-top:9px}
.ppabam-player-page .pp-demo-bars i{display:block;width:5px;height:var(--h);border-radius:3px 3px 1px 1px;background:#ff6880;opacity:.9;transform-origin:bottom}
.ppabam-player-page .pp-demo-player.playing .pp-demo-bars i{animation:ppDemoBar .75s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.06s)}
@keyframes ppDemoBar{to{transform:scaleY(.35)}}
.ppabam-player-page .pp-demo-progress{margin-top:16px}
.ppabam-player-page .pp-demo-line{position:relative;height:3px;border-radius:9px;background:#3b3f48}
.ppabam-player-page .pp-demo-line span{display:block;width:0;height:100%;border-radius:9px;background:#ff4d67;transition:width .2s}
.ppabam-player-page .pp-demo-line b{position:absolute;left:0;top:50%;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#ff4d67;transform:translate(-2px,-50%);transition:left .2s}
.ppabam-player-page .pp-demo-time{display:flex;justify-content:space-between;margin-top:4px;color:#7f8792;font-size:7px}
.ppabam-player-page .pp-demo-controls{display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;gap:8px;margin-top:15px}
.ppabam-player-page .pp-demo-control{height:39px;border:0;border-radius:10px;background:#1d2026;color:#aeb4bd;font-size:14px;cursor:pointer;transition:.15s}
.ppabam-player-page .pp-demo-control:hover{background:#292d35;color:#fff}
.ppabam-player-page .pp-demo-control.main{height:52px;margin-top:-7px;border-radius:14px;background:#ff5a73;color:#fff;font-size:18px;box-shadow:0 8px 20px rgba(255,77,103,.3)}
.ppabam-player-page .pp-demo-volume{display:grid;grid-template-columns:34px 1fr 36px;gap:9px;align-items:center;margin-top:12px}
.ppabam-player-page .pp-demo-volbtn{height:34px;border:1px solid #2d3139;border-radius:9px;background:#1b1e24;color:#c0c5cc;cursor:pointer}
.ppabam-player-page .pp-demo-voltrack{position:relative;height:6px;border-radius:99px;background:#353943;cursor:pointer}
.ppabam-player-page .pp-demo-voltrack span{display:block;width:86%;height:100%;border-radius:99px;background:#ff4d67}
.ppabam-player-page .pp-demo-voltrack b{position:absolute;left:86%;top:50%;width:14px;height:14px;border-radius:50%;background:#ff4d67;transform:translate(-50%,-50%)}
.ppabam-player-page .pp-demo-volnum{color:#a3a9b2;font-size:8px;text-align:right}
.ppabam-player-page .pp-demo-pltools{display:grid;grid-template-columns:1fr 72px 38px 38px;gap:7px;margin-top:18px}
.ppabam-player-page .pp-demo-field,.ppabam-player-page .pp-demo-smallbtn{height:31px;border:1px solid #30343c;border-radius:8px;background:#111319;color:#777f8b;font-size:8px}
.ppabam-player-page .pp-demo-field{display:flex;align-items:center;padding:0 10px}
.ppabam-player-page .pp-demo-smallbtn{cursor:pointer;color:#aab0b9;background:#202329}
.ppabam-player-page .pp-demo-smallbtn:hover,.ppabam-player-page .pp-demo-smallbtn.on{border-color:#ff7187;color:#ff7187}
.ppabam-player-page .pp-demo-folderbar{display:grid;grid-template-columns:1fr 56px 1fr;gap:7px;margin-top:7px}
.ppabam-player-page .pp-demo-select{height:30px;padding:0 9px;border:1px solid #30343c;border-radius:8px;background:#16191f;color:#a3a9b2;font-size:8px}
.ppabam-player-page .pp-demo-count{margin-top:7px;padding:7px 9px;border:1px solid #292d34;border-radius:8px;background:#111319;color:#747c87;font-size:7px}
.ppabam-player-page .pp-demo-playlist-head{display:flex;justify-content:space-between;align-items:center;margin-top:17px;padding:0 3px 10px}
.ppabam-player-page .pp-demo-playlist-head strong{font-size:10px;letter-spacing:.5px}
.ppabam-player-page .pp-demo-playlist-head span{color:#7c8490;font-size:8px}
.ppabam-player-page .pp-demo-track{display:grid;grid-template-columns:26px 1fr 72px;gap:8px;align-items:center;min-height:46px;border-top:1px solid #252930;color:#fff;font-size:8px}
.ppabam-player-page .pp-demo-track .no{color:#6f7782}
.ppabam-player-page .pp-demo-track .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:700}
.ppabam-player-page .pp-demo-track .acts{display:flex;justify-content:flex-end;gap:4px}
.ppabam-player-page .pp-demo-track .acts button{width:20px;height:20px;border:0;border-radius:5px;background:#191c22;color:#555d68;font-size:8px;cursor:pointer}
.ppabam-player-page .pp-demo-track .acts button:hover,.ppabam-player-page .pp-demo-track .acts button.on{color:#ff7187;background:#282027}
.ppabam-player-page .pp-demo-foot{display:flex;justify-content:space-between;padding:11px 14px;border-top:1px solid #252930;background:#111319;color:#5f6773;font-size:7px}
.ppabam-player-page .pp-demo-foot b{color:#ff6680}
.ppabam-player-page .pp-demo-toast{position:absolute;z-index:5;left:50%;bottom:18px;max-width:86%;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.86);color:#fff;font-size:9px;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:.2s;white-space:nowrap}
.ppabam-player-page .pp-demo-shell{position:relative}
.ppabam-player-page .pp-demo-toast.show{opacity:1;transform:translate(-50%,0)}
.ppabam-player-page .pp-demo-panel{display:none;margin:9px 14px 0;padding:12px;border:1px solid #30343c;border-radius:10px;background:#1d2026;color:#bbc0c8;font-size:9px;line-height:1.6}
.ppabam-player-page .pp-demo-panel.show{display:block;animation:ppDemoOpen .2s ease}
@keyframes ppDemoOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
body.dark-mode .ppabam-player-page .pp-demo-section{background:#0e0f10!important}
body.dark-mode .ppabam-player-page .pp-demo-stage{background:#141619!important;border-color:#2d3138!important}
@media(max-width:800px){
 .ppabam-player-page .pp-demo-head{align-items:flex-start;flex-direction:column}
 .ppabam-player-page .pp-demo-note{text-align:left}
 .ppabam-player-page .pp-demo-stage{padding:22px 12px}
}
@media(max-width:420px){
 .ppabam-player-page .pp-demo-section{padding-bottom:64px}
 .ppabam-player-page .pp-demo-stage{margin-left:-14px;margin-right:-14px;border-left:0;border-right:0;border-radius:0;padding:14px 8px}
 .ppabam-player-page .pp-demo-player{width:100%;border-radius:16px}
 .ppabam-player-page .pp-demo-inner{padding:11px 10px 0}
 .ppabam-player-page .pp-demo-top{gap:5px}
 .ppabam-player-page .pp-demo-iconbtn{width:26px;height:26px}
 .ppabam-player-page .pp-demo-searchbar{grid-template-columns:45px 1fr 54px}
 .ppabam-player-page .pp-demo-song{grid-template-columns:60px 1fr}
 .ppabam-player-page .pp-demo-cover{width:60px;height:60px}
 .ppabam-player-page .pp-demo-cover:after{inset:21px}
 .ppabam-player-page .pp-demo-controls{gap:5px}
 .ppabam-player-page .pp-demo-pltools{grid-template-columns:1fr 60px 34px 34px;gap:5px}
 .ppabam-player-page .pp-demo-folderbar{grid-template-columns:1fr 48px 1fr;gap:5px}
}


/* ===== PPABAM DEMO v2 : SUBTITLES / OPTIONS / MINI ===== */
.ppabam-player-page .pp-demo-player{
	transition:width .22s ease, max-width .22s ease, transform .22s ease, opacity .22s ease;
}

.ppabam-player-page .pp-demo-subtitles,
.ppabam-player-page .pp-demo-options{
	display:none;
	margin-top:12px;
	border:1px solid #30343c;
	border-radius:11px;
	background:#171a20;
	overflow:hidden;
}

.ppabam-player-page .pp-demo-subtitles.show,
.ppabam-player-page .pp-demo-options.show{
	display:block;
	animation:ppDemoPanelIn .2s ease;
}

@keyframes ppDemoPanelIn{
	from{opacity:0;transform:translateY(-5px)}
	to{opacity:1;transform:none}
}

.ppabam-player-page .pp-demo-box-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	min-height:34px;
	padding:0 11px;
	border-bottom:1px solid #292d35;
	color:#f0f1f3;
	font-size:9px;
	font-weight:900;
	letter-spacing:.4px;
}

.ppabam-player-page .pp-demo-box-head span:last-child{
	color:#68707c;
	font-size:7px;
	font-weight:500;
	letter-spacing:0;
}

.ppabam-player-page .pp-demo-subtitle-body{
	min-height:58px;
	padding:14px 12px;
	color:#878f9b;
	font-size:9px;
	line-height:1.65;
	text-align:center;
}

.ppabam-player-page .pp-demo-subtitle-body.active{
	color:#e5e7eb;
}

.ppabam-player-page .pp-demo-options{
	padding:0 10px 11px;
}

.ppabam-player-page .pp-demo-options .pp-demo-box-head{
	margin:0 -10px 8px;
	padding:0 10px;
}

.ppabam-player-page .pp-demo-option-row{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:7px;
}

.ppabam-player-page .pp-demo-option-btn,
.ppabam-player-page .pp-demo-option-select{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:45px;
	height:31px;
	padding:0 10px;
	border:1px solid #31353d;
	border-radius:8px;
	background:#1d2026;
	color:#c1c6cd;
	font-size:8px;
	cursor:pointer;
	transition:.15s;
}

.ppabam-player-page .pp-demo-option-btn:hover,
.ppabam-player-page .pp-demo-option-btn.on,
.ppabam-player-page .pp-demo-option-select:hover{
	border-color:#6f3d48;
	background:#2a2025;
	color:#ff8497;
}

.ppabam-player-page .pp-demo-option-label{
	margin-top:13px;
	color:#7e8691;
	font-size:7px;
	font-weight:800;
	letter-spacing:.3px;
}

.ppabam-player-page .pp-demo-skin-box{
	margin-top:8px;
	padding:9px;
	border:1px solid #292d35;
	border-radius:9px;
	background:#15181e;
}

.ppabam-player-page .pp-demo-skin-select{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:31px;
	padding:0 10px;
	border:1px solid #30343c;
	border-radius:7px;
	background:#1c1f25;
	color:#d3d6db;
	font-size:8px;
	font-weight:700;
}

.ppabam-player-page .pp-demo-skin-actions{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:5px;
	margin-top:6px;
}

.ppabam-player-page .pp-demo-skin-actions button{
	height:29px;
	border:1px solid #30343c;
	border-radius:7px;
	background:#1c1f25;
	color:#b9bec6;
	font-size:7px;
	cursor:pointer;
}

.ppabam-player-page .pp-demo-skin-actions button:hover{
	color:#ff8497;
	border-color:#6f3d48;
}

.ppabam-player-page .pp-demo-skin-controls{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) 76px 64px;
	gap:6px;
	align-items:center;
	margin-top:8px;
	color:#777f8a;
	font-size:7px;
}

.ppabam-player-page .pp-demo-skin-range{
	position:relative;
	height:5px;
	border-radius:99px;
	background:#d8dbe0;
}

.ppabam-player-page .pp-demo-skin-range span{
	display:block;
	width:38%;
	height:100%;
	border-radius:99px;
	background:#1788ff;
}

.ppabam-player-page .pp-demo-option-wide{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:6px;
	margin-top:8px;
}

.ppabam-player-page .pp-demo-option-wide button{
	height:32px;
	border:1px solid #30343c;
	border-radius:8px;
	background:#1c1f25;
	color:#c1c6cd;
	font-size:8px;
	cursor:pointer;
}

.ppabam-player-page .pp-demo-player.mini{
	width:300px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-inner{
	padding-bottom:10px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-searchbar,
.ppabam-player-page .pp-demo-player.mini .pp-demo-subtitles,
.ppabam-player-page .pp-demo-player.mini .pp-demo-options,
.ppabam-player-page .pp-demo-player.mini .pp-demo-pltools,
.ppabam-player-page .pp-demo-player.mini .pp-demo-folderbar,
.ppabam-player-page .pp-demo-player.mini .pp-demo-count,
.ppabam-player-page .pp-demo-player.mini .pp-demo-playlist-head,
.ppabam-player-page .pp-demo-player.mini .pp-demo-track,
.ppabam-player-page .pp-demo-player.mini .pp-demo-foot{
	display:none !important;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-now{
	margin-top:10px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-cover{
	width:58px;
	height:58px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-cover:after{
	inset:20px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-song{
	grid-template-columns:58px 1fr;
	gap:10px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-songtitle{
	font-size:10px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-bars{
	height:24px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-controls{
	margin-top:12px;
}

.ppabam-player-page .pp-demo-player.mini .pp-demo-volume{
	margin-bottom:4px;
}

.ppabam-player-page .pp-demo-mini-badge{
	display:none;
	position:absolute;
	right:8px;
	bottom:8px;
	padding:4px 7px;
	border-radius:999px;
	background:#ff4d67;
	color:#fff;
	font-size:7px;
	font-weight:900;
}

.ppabam-player-page .pp-demo-player.mini + .pp-demo-mini-badge{
	display:block;
}

.ppabam-player-page .pp-demo-overlay{
	position:absolute;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	z-index:7;
	background:rgba(8,9,11,.72);
	backdrop-filter:blur(2px);
}

.ppabam-player-page .pp-demo-overlay.show{
	display:flex;
}

.ppabam-player-page .pp-demo-overlay-card{
	width:78%;
	max-width:260px;
	padding:18px;
	border:1px solid #353941;
	border-radius:12px;
	background:#1b1e24;
	color:#e7e9ed;
	text-align:center;
	box-shadow:0 18px 42px rgba(0,0,0,.35);
	animation:ppDemoPanelIn .18s ease;
}

.ppabam-player-page .pp-demo-overlay-card strong{
	display:block;
	color:#fff;
	font-size:11px;
}

.ppabam-player-page .pp-demo-overlay-card p{
	margin:8px 0 0;
	color:#9098a3;
	font-size:8px;
	line-height:1.6;
}

.ppabam-player-page .pp-demo-share-json{
	display:none;
	margin-top:7px;
	padding:8px 9px;
	border:1px dashed #434851;
	border-radius:7px;
	background:#111319;
	color:#8d95a0;
	font-size:7px;
	line-height:1.5;
	word-break:break-all;
}

.ppabam-player-page .pp-demo-share-json.show{
	display:block;
}

/* Skin simulation */
.ppabam-player-page .pp-demo-player.skin-blue{
	background:linear-gradient(145deg,#101723,#15171d);
}
.ppabam-player-page .pp-demo-player.skin-blue .pp-demo-now{
	background:linear-gradient(145deg,#162235,#1b1e24);
}
.ppabam-player-page .pp-demo-player.skin-pink{
	background:linear-gradient(145deg,#24151b,#15171d);
}
.ppabam-player-page .pp-demo-player.skin-pink .pp-demo-now{
	background:linear-gradient(145deg,#311a22,#1b1e24);
}

@media(max-width:420px){
	.ppabam-player-page .pp-demo-option-row{gap:4px}
	.ppabam-player-page .pp-demo-option-btn,
	.ppabam-player-page .pp-demo-option-select{
		min-width:42px;
		height:29px;
		padding:0 8px;
		font-size:7px;
	}
	.ppabam-player-page .pp-demo-skin-controls{
		grid-template-columns:auto 1fr 68px 56px;
		gap:4px;
	}
	.ppabam-player-page .pp-demo-player.mini{
		width:292px;
		max-width:94vw;
	}
}


/* ===== PPABAM DEMO v3 : YOUTUBE SEARCH SIDE PANEL ===== */
.ppabam-player-page .pp-demo-shell{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:10px;
	position:relative;
}

.ppabam-player-page .pp-demo-search-panel{
	display:none;
	width:332px;
	max-height:610px;
	border:1px solid #2d3037;
	border-radius:18px;
	background:#111319;
	color:#fff;
	box-shadow:0 24px 55px rgba(0,0,0,.28);
	overflow:hidden;
	flex:0 0 332px;
	animation:ppDemoSearchIn .22s ease;
}

.ppabam-player-page .pp-demo-search-panel.show{
	display:block;
}

@keyframes ppDemoSearchIn{
	from{opacity:0;transform:translateX(12px)}
	to{opacity:1;transform:none}
}

.ppabam-player-page .pp-demo-search-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	padding:14px 14px 10px;
	border-bottom:1px solid #262a31;
}

.ppabam-player-page .pp-demo-search-head strong{
	display:block;
	color:#fff;
	font-size:11px;
	font-weight:900;
	letter-spacing:.6px;
}

.ppabam-player-page .pp-demo-search-head small{
	display:block;
	margin-top:3px;
	color:#6f7782;
	font-size:7px;
}

.ppabam-player-page .pp-demo-search-close{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border:0;
	border-radius:8px;
	background:#202329;
	color:#9fa6b0;
	cursor:pointer;
}

.ppabam-player-page .pp-demo-search-query{
	padding:8px 14px;
	border-bottom:1px solid #242830;
	color:#777f8a;
	font-size:7px;
}

.ppabam-player-page .pp-demo-search-query b{
	color:#cdd1d7;
	font-weight:700;
}

.ppabam-player-page .pp-demo-results{
	max-height:535px;
	overflow-y:auto;
	padding:8px 8px 10px;
	scrollbar-color:#505762 #171a20;
}

.ppabam-player-page .pp-demo-results::-webkit-scrollbar{
	width:7px;
}
.ppabam-player-page .pp-demo-results::-webkit-scrollbar-track{
	background:#171a20;
}
.ppabam-player-page .pp-demo-results::-webkit-scrollbar-thumb{
	background:#505762;
	border-radius:8px;
}

.ppabam-player-page .pp-demo-result{
	display:grid;
	grid-template-columns:94px minmax(0,1fr) 31px;
	gap:9px;
	align-items:center;
	min-height:67px;
	padding:6px 4px;
	border-radius:10px;
	transition:.15s;
}

.ppabam-player-page .pp-demo-result:hover{
	background:#191c22;
}

.ppabam-player-page .pp-demo-result-thumb{
	position:relative;
	height:52px;
	border-radius:7px;
	overflow:hidden;
	background:linear-gradient(145deg,#27303b,#12151a);
}

.ppabam-player-page .pp-demo-result-thumb::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.07) 39% 42%,transparent 43%),
		radial-gradient(circle at 30% 40%,rgba(255,77,103,.85),transparent 16%),
		radial-gradient(circle at 70% 55%,rgba(39,125,255,.6),transparent 20%);
}

.ppabam-player-page .pp-demo-result-thumb.t2{
	background:linear-gradient(145deg,#3b1822,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t3{
	background:linear-gradient(145deg,#49301a,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t4{
	background:linear-gradient(145deg,#1d3044,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t5{
	background:linear-gradient(145deg,#24372e,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t6{
	background:linear-gradient(145deg,#392744,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t7{
	background:linear-gradient(145deg,#332b1f,#14151a);
}
.ppabam-player-page .pp-demo-result-thumb.t8{
	background:linear-gradient(145deg,#24313b,#14151a);
}

.ppabam-player-page .pp-demo-result-thumb span{
	position:absolute;
	right:4px;
	bottom:4px;
	z-index:2;
	padding:2px 4px;
	border-radius:4px;
	background:rgba(0,0,0,.78);
	color:#fff;
	font-size:6px;
	font-weight:800;
}

.ppabam-player-page .pp-demo-result-title{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	color:#f0f1f3;
	font-size:9px;
	font-weight:800;
	line-height:1.45;
}

.ppabam-player-page .pp-demo-result-channel{
	margin-top:3px;
	color:#676f7a;
	font-size:7px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.ppabam-player-page .pp-demo-result-add{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border:1px solid #30343c;
	border-radius:8px;
	background:#202329;
	color:#d7dbe1;
	font-size:18px;
	line-height:1;
	cursor:pointer;
	transition:.15s;
}

.ppabam-player-page .pp-demo-result-add:hover,
.ppabam-player-page .pp-demo-result-add.added{
	border-color:#ff7086;
	background:#302027;
	color:#ff7086;
}

.ppabam-player-page .pp-demo-result-add.added{
	font-size:11px;
}

@media(max-width:900px){
	.ppabam-player-page .pp-demo-shell{
		flex-direction:column;
		align-items:center;
	}
	.ppabam-player-page .pp-demo-search-panel{
		width:352px;
		max-width:100%;
		flex-basis:auto;
		order:2;
	}
}

@media(max-width:420px){
	.ppabam-player-page .pp-demo-search-panel{
		width:100%;
		max-height:520px;
		border-radius:14px;
	}
	.ppabam-player-page .pp-demo-results{
		max-height:440px;
	}
	.ppabam-player-page .pp-demo-result{
		grid-template-columns:82px minmax(0,1fr) 30px;
	}
	.ppabam-player-page .pp-demo-result-thumb{
		height:47px;
	}
}


/* UPDATE */
.ppabam-player-page .pp-player-update-section{
    padding:88px 0 96px;
    background:#f7f8fa;
}
.ppabam-player-page .pp-player-update-card{
    display:grid;
    grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
    gap:38px;
    margin-top:34px;
    padding:34px;
    border:1px solid #e7e9ed;
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 44px rgba(25,29,37,.055);
}
.ppabam-player-page .pp-player-update-version{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:180px;
    padding:26px;
    border-radius:16px;
    background:linear-gradient(145deg,#17191f 0%,#242731 100%);
    color:#fff;
}
.ppabam-player-page .pp-player-update-version small{
    color:#ff8797;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
}
.ppabam-player-page .pp-player-update-version strong{
    margin-top:11px;
    color:#fff;
    font-size:29px;
    font-weight:900;
    letter-spacing:-1px;
}
.ppabam-player-page .pp-player-update-version span{
    margin-top:9px;
    color:#aeb4be;
    font-size:12px;
    line-height:1.65;
}
.ppabam-player-page .pp-player-update-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-content:center;
}
.ppabam-player-page .pp-player-update-item{
    position:relative;
    min-height:78px;
    padding:17px 17px 17px 42px;
    border:1px solid #eceef2;
    border-radius:12px;
    background:#fff;
    color:#555d68;
    font-size:12px;
    line-height:1.55;
}
.ppabam-player-page .pp-player-update-item::before{
    content:"✓";
    position:absolute;
    left:16px;
    top:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff0f3;
    color:var(--pp-player-main);
    font-size:10px;
    font-weight:900;
}
.ppabam-player-page .pp-player-update-item strong{
    display:block;
    margin-bottom:4px;
    color:#292e35;
    font-size:12px;
    font-weight:900;
}

/* =========================================================
   PPABAM COMMUNITY THEME SYNC
   - Community white mode : default styles
   - Community dark mode  : body.dark-mode
   - 별도 테마 토글을 만들지 않고 커뮤니티 테마 상태를 그대로 사용
   ========================================================= */
.ppabam-player-page,
.ppabam-player-page .pp-player-update-section,
.ppabam-player-page .pp-player-update-card,
.ppabam-player-page .pp-player-update-item,
.ppabam-player-page .pp-player-update-item strong {
    transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}

/* 업데이트 섹션 */
body.dark-mode .ppabam-player-page .pp-player-update-section{
    background:#121315 !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-card{
    border-color:#30343a !important;
    background:#191b1f !important;
    box-shadow:0 18px 44px rgba(0,0,0,.20) !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-version{
    border:1px solid #343840 !important;
    background:linear-gradient(145deg,#111318 0%,#20232b 100%) !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-version strong{
    color:#fff !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-version span{
    color:#aeb4be !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-item{
    border-color:#30343a !important;
    background:#202226 !important;
    color:#b6bcc5 !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-item strong{
    color:#f2f3f5 !important;
}
body.dark-mode .ppabam-player-page .pp-player-update-item::before{
    background:#342027 !important;
    color:#ff8797 !important;
}

/* 커뮤니티 공통 다크모드의 광범위한 color 규칙보다 PLAYER 색상 우선 */
body.dark-mode .content .ppabam-player-page .pp-player-update-item strong,
body.dark-mode .content .ppabam-player-page .pp-player-update-version strong{
    color:#f4f5f7 !important;
}
@media(max-width:760px){
.ppabam-player-page .pp-player-update-card{grid-template-columns:1fr;gap:16px;padding:18px}
    .ppabam-player-page .pp-player-update-version{min-height:150px}
    .ppabam-player-page .pp-player-update-list{grid-template-columns:1fr}
}

/* ===== PPABAM PLAYER · ONE SERVICE / TWO PLATFORMS ===== */
.ppabam-player-page .pp-unified-kicker{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 11px;
    border:1px solid #ffd4dc;border-radius:999px;background:#fff5f7;color:#ff4d67;
    font-size:10px;font-weight:900;letter-spacing:1.2px;
}
.ppabam-player-page .pp-unified-kicker::before{
    content:"";width:7px;height:7px;border-radius:50%;background:#ff4d67;
    box-shadow:0 0 12px rgba(255,77,103,.55);
}
.ppabam-player-page .pp-platform-head{text-align:center;margin-bottom:30px}
.ppabam-player-page .pp-platform-head .pp-player-lead{margin-left:auto;margin-right:auto}
.ppabam-player-page .pp-platform-card{position:relative;min-height:330px}
.ppabam-player-page .pp-platform-card.is-windows{
    border-color:#292d34;background:linear-gradient(145deg,#15171c,#20242b);color:#fff;
}
.ppabam-player-page .pp-platform-card.is-windows .pp-player-tool-title{color:#fff}
.ppabam-player-page .pp-platform-card.is-windows .pp-player-tool-desc{color:#afb6c0}
.ppabam-player-page .pp-platform-card.is-windows .pp-player-tool-tag{background:#292d34;color:#c8cdd4}
.ppabam-player-page .pp-platform-card.is-chrome{
    background:linear-gradient(145deg,#fff,#fff8fa);
}
.ppabam-player-page .pp-platform-version{
    display:inline-flex;align-items:center;min-height:24px;margin-top:14px;padding:0 9px;
    border:1px solid rgba(255,77,103,.24);border-radius:999px;background:rgba(255,77,103,.08);
    color:#ff5f77;font-size:9px;font-weight:900;letter-spacing:.7px;
}
.ppabam-player-page .pp-platform-card.is-windows .pp-platform-version{
    border-color:rgba(255,135,151,.22);background:rgba(255,77,103,.10);color:#ff8797;
}
.ppabam-player-page .pp-platform-role{
    margin-top:20px;padding-top:16px;border-top:1px solid #eceef2;color:#777f89;
    font-size:11px;line-height:1.7;
}
.ppabam-player-page .pp-platform-card.is-windows .pp-platform-role{border-top-color:#343943;color:#aeb5bf}
.ppabam-player-page .pp-unified-note{
    margin-top:18px;padding:18px 20px;border:1px solid #eceef2;border-radius:14px;background:#f8f9fb;
    color:#69717c;font-size:12px;line-height:1.75;text-align:center;
}
.ppabam-player-page .pp-unified-note strong{color:#242930}
.ppabam-player-page .pp-install-choice-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:34px;
}
.ppabam-player-page .pp-install-choice{
    padding:26px;border:1px solid #e7e9ed;border-radius:18px;background:#fff;
    box-shadow:0 14px 34px rgba(31,35,43,.05);
}
.ppabam-player-page .pp-install-choice.is-windows{background:#171a20;border-color:#2b3038;color:#fff}
.ppabam-player-page .pp-install-choice-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ppabam-player-page .pp-install-choice-label{color:#ff4d67;font-size:10px;font-weight:900;letter-spacing:1.3px}
.ppabam-player-page .pp-install-choice-badge{
    display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:999px;background:#fff0f3;
    color:#ff4d67;font-size:9px;font-weight:900;
}
.ppabam-player-page .pp-install-choice.is-windows .pp-install-choice-badge{background:#2a2025;color:#ff8797}
.ppabam-player-page .pp-install-choice h3{margin:16px 0 0;color:#20242b;font-size:24px;font-weight:900;letter-spacing:-.7px}
.ppabam-player-page .pp-install-choice.is-windows h3{color:#fff}
.ppabam-player-page .pp-install-choice p{margin:12px 0 0;color:#747c87;font-size:13px;line-height:1.75}
.ppabam-player-page .pp-install-choice.is-windows p{color:#aeb5bf}
.ppabam-player-page .pp-install-choice ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.ppabam-player-page .pp-install-choice li{position:relative;padding-left:17px;color:#565e68;font-size:12px;line-height:1.55}
.ppabam-player-page .pp-install-choice li::before{content:"✓";position:absolute;left:0;top:0;color:#ff4d67;font-weight:900}
.ppabam-player-page .pp-install-choice.is-windows li{color:#c1c6ce}
.ppabam-player-page .pp-install-action{margin-top:22px}
.ppabam-player-page .pp-player-btn.is-disabled{opacity:.52;cursor:not-allowed;pointer-events:none}
body.dark-mode .ppabam-player-page .pp-unified-kicker{border-color:#4d2a32;background:#25191d;color:#ff8797}
body.dark-mode .ppabam-player-page .pp-unified-note{border-color:#30343a;background:#17191d;color:#aeb4bd}
body.dark-mode .ppabam-player-page .pp-unified-note strong{color:#f1f3f5}
body.dark-mode .ppabam-player-page .pp-platform-card.is-chrome,
body.dark-mode .ppabam-player-page .pp-install-choice{border-color:#30343a;background:#191b1f}
body.dark-mode .ppabam-player-page .pp-install-choice h3{color:#f4f5f7}
body.dark-mode .ppabam-player-page .pp-install-choice p,
body.dark-mode .ppabam-player-page .pp-install-choice li{color:#aeb4bd}
@media(max-width:800px){
    .ppabam-player-page .pp-install-choice-grid{grid-template-columns:1fr}
    .ppabam-player-page .pp-platform-card{min-height:0}
}

/* ===== PPABAM DEMO v4 : LEFT OPTIONS PANEL + 10 BAND EQ ===== */
.ppabam-player-page .pp-demo-options-side{
	display:none;
	width:340px;
	max-height:750px;
	padding:0 10px 12px;
	margin:0;
	border:1px solid #2d3037;
	border-radius:18px;
	background:#15171d;
	color:#fff;
	box-shadow:0 24px 55px rgba(0,0,0,.28);
	overflow-y:auto;
	flex:0 0 340px;
	scrollbar-color:#505762 #171a20;
}
.ppabam-player-page .pp-demo-options-side.show{display:block;animation:ppDemoSearchIn .22s ease}
.ppabam-player-page .pp-demo-options-side::-webkit-scrollbar{width:7px}
.ppabam-player-page .pp-demo-options-side::-webkit-scrollbar-track{background:#171a20}
.ppabam-player-page .pp-demo-options-side::-webkit-scrollbar-thumb{background:#505762;border-radius:10px}
.ppabam-player-page .pp-demo-options-head{
	position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;
	min-height:52px;margin:0 -10px 10px;padding:0 12px;border-bottom:1px solid #292d35;background:#15171d;
}
.ppabam-player-page .pp-demo-options-head-copy{display:flex;align-items:center;gap:8px}
.ppabam-player-page .pp-demo-options-head strong{color:#f5f6f8;font-size:11px;font-weight:900;letter-spacing:.5px}
.ppabam-player-page .pp-demo-options-head small{color:#6f7782;font-size:7px}
.ppabam-player-page .pp-demo-options-close{
	display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:10px;
	background:#ff4d67;color:#fff;font-size:15px;font-weight:900;cursor:pointer
}
.ppabam-player-page .pp-demo-option-card{margin-top:10px;padding:11px;border:1px solid #30343c;border-radius:11px;background:#171a20}
.ppabam-player-page .pp-demo-option-title{margin:0 0 10px;color:rgb(223,226,231)!important;font-size:9px;font-weight:900;letter-spacing:.35px}
.ppabam-player-page .pp-demo-option-title-accent{color:#ff5d76!important}
.ppabam-player-page .pp-demo-playback-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:0}
.ppabam-player-page .pp-demo-playback-row .pp-demo-option-btn,
.ppabam-player-page .pp-demo-playback-row .pp-demo-option-select{min-width:0;width:100%;padding:0 4px}
.ppabam-player-page .pp-demo-playback-subrow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ppabam-player-page .pp-demo-playback-subrow .pp-demo-option-select{width:100%;justify-content:space-between}
.ppabam-player-page .pp-demo-eq-preset-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;align-items:center}
.ppabam-player-page .pp-demo-eq-preset-row .pp-demo-option-title{margin:0}
.ppabam-player-page .pp-demo-eq-preset{display:flex;align-items:center;justify-content:space-between;height:31px;padding:0 10px;border:1px solid #30343c;border-radius:8px;background:#1c1f25;color:#d8dce2;font-size:8px;font-weight:700;cursor:pointer}
.ppabam-player-page .pp-demo-eq-note{margin-top:9px;color:#737b86;font-size:7px}
.ppabam-player-page .pp-demo-eq-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ppabam-player-page .pp-demo-eq-head .pp-demo-option-title{margin:0}
.ppabam-player-page .pp-demo-eq-reset{height:27px;padding:0 9px;border:1px solid #343841;border-radius:7px;background:#202329;color:#9fa6b0;font-size:7px;font-weight:800;cursor:pointer}
.ppabam-player-page .pp-demo-eq-scale{display:flex;justify-content:space-between;margin:11px 3px 0;color:#59616d;font-size:6px}
.ppabam-player-page .pp-demo-eq-bands{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-top:4px}
.ppabam-player-page .pp-demo-eq-band{display:flex;flex-direction:column;align-items:center;min-width:0}
.ppabam-player-page .pp-demo-eq-band input[type=range]{
	appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:20px;height:88px;margin:0;padding:0;background:transparent;cursor:pointer
}
.ppabam-player-page .pp-demo-eq-band input[type=range]::-webkit-slider-runnable-track{width:6px;height:88px;border-radius:99px;background:#e2e4e8}
.ppabam-player-page .pp-demo-eq-band input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-left:-4px;border:0;border-radius:50%;background:#ff4d67;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ppabam-player-page .pp-demo-eq-band input[type=range]::-moz-range-track{width:6px;height:88px;border-radius:99px;background:#e2e4e8}
.ppabam-player-page .pp-demo-eq-band input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#ff4d67}
.ppabam-player-page .pp-demo-eq-band strong{margin-top:4px;color:#b9bec6;font-size:6px;font-weight:800}
.ppabam-player-page .pp-demo-eq-band small{margin-top:3px;color:#ff8497;font-size:6px}
.ppabam-player-page .pp-demo-options-side .pp-demo-skin-box{margin-top:0;padding:0;border:0;background:transparent}
.ppabam-player-page .pp-demo-options-side .pp-demo-option-label{display:none}
@media(max-width:1100px){
	.ppabam-player-page .pp-demo-stage{overflow-x:auto}
	.ppabam-player-page .pp-demo-shell{min-width:max-content}
}
@media(max-width:760px){
	.ppabam-player-page .pp-demo-shell{min-width:0;width:100%;flex-direction:column;align-items:center}
	.ppabam-player-page .pp-demo-search-panel,.ppabam-player-page .pp-demo-options-side{width:352px;max-width:100%;flex-basis:auto;max-height:none}
	.ppabam-player-page .pp-demo-player{width:352px}
}

/* =========================================================
   PPABAM DEMO v5 - UPDATED PLAYER / OPTIONS UI
   Reference-matched dark layout + segmented EQ
   ========================================================= */

/* stage / shell */
.ppabam-player-page .pp-demo-stage{
	padding:20px;
	border:0;
	border-radius:18px;
	background:transparent;
	overflow:visible;
}
.ppabam-player-page .pp-demo-shell{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:4px;
}

/* options panel */
.ppabam-player-page .pp-demo-options-side{
	width:350px;
	flex:0 0 350px;
	max-height:760px;
	padding:0 10px 12px;
	border:1px solid #2c3037;
	border-radius:15px;
	background:#111419;
	box-shadow:0 20px 55px rgba(0,0,0,.30);
}
.ppabam-player-page .pp-demo-options-head{
	min-height:56px;
	margin:0 -10px 10px;
	padding:0 14px;
	background:#111419;
	border-bottom:1px solid #252930;
}
.ppabam-player-page .pp-demo-options-head strong{
	color:#f3f4f6;
	font-size:10px;
	font-weight:900;
	letter-spacing:.7px;
}
.ppabam-player-page .pp-demo-options-head small{
	color:#64707d;
	font-size:7px;
}
.ppabam-player-page .pp-demo-options-close{
	width:34px;
	height:34px;
	border-radius:10px;
	background:#1d2128;
	color:#e7e9ed;
	font-size:16px;
}
.ppabam-player-page .pp-demo-options-close:hover{background:#262b33;color:#fff}

.ppabam-player-page .pp-demo-option-card{
	margin-top:10px;
	padding:11px;
	border:1px solid #2d323a;
	border-radius:11px;
	background:#171a20;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.ppabam-player-page .pp-demo-option-title{
	color:#ff5b74!important;
	font-size:9px;
	font-weight:900;
	letter-spacing:.35px;
}
.ppabam-player-page .pp-demo-option-title-accent{color:#ff5b74!important}

.ppabam-player-page .pp-demo-option-btn,
.ppabam-player-page .pp-demo-option-select,
.ppabam-player-page .pp-demo-eq-preset,
.ppabam-player-page .pp-demo-skin-select,
.ppabam-player-page .pp-demo-skin-actions button,
.ppabam-player-page .pp-demo-option-wide button{
	border-color:#303640!important;
	background:#1a1e24!important;
	color:#cbd0d6!important;
}
.ppabam-player-page .pp-demo-option-btn:hover,
.ppabam-player-page .pp-demo-option-select:hover,
.ppabam-player-page .pp-demo-eq-preset:hover,
.ppabam-player-page .pp-demo-skin-actions button:hover{
	border-color:#424a56!important;
	color:#fff!important;
	background:#20252d!important;
}

.ppabam-player-page .pp-demo-eq-note{color:#68717d;font-size:7px}
.ppabam-player-page .pp-demo-eq-reset{
	background:#20242b;
	border-color:#343a44;
	color:#aab1ba;
}

/* segmented 10 band EQ */
.ppabam-player-page .pp-demo-eq-scale{display:none}
.ppabam-player-page .pp-demo-eq-bands{
	display:grid;
	grid-template-columns:repeat(11,minmax(0,1fr));
	gap:4px;
	margin-top:12px;
}
.ppabam-player-page .pp-demo-eq-band{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	min-width:0;
}
.ppabam-player-page .pp-demo-eq-band input[type=range]{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:96px;
	margin:0;
	opacity:0;
	cursor:pointer;
	z-index:3;
}
.ppabam-player-page .pp-demo-eq-meter{
	display:flex;
	flex-direction:column-reverse;
	gap:3px;
	width:18px;
	height:96px;
	justify-content:flex-start;
}
.ppabam-player-page .pp-demo-eq-seg{
	display:block;
	width:18px;
	height:5px;
	border-radius:2px;
	background:#242931;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
	transition:background .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.ppabam-player-page .pp-demo-eq-seg.on{
	background:var(--band-color,#ff4d67);
	box-shadow:
		0 0 5px color-mix(in srgb,var(--band-color,#ff4d67) 55%,transparent),
		inset 0 0 1px rgba(255,255,255,.28);
}
.ppabam-player-page .pp-demo-eq-band strong{
	margin-top:7px;
	color:#9aa2ad;
	font-size:6px;
	font-weight:800;
}
.ppabam-player-page .pp-demo-eq-band small{
	margin-top:3px;
	color:#ff7086;
	font-size:6px;
}
.ppabam-player-page .pp-demo-eq-card{background:#111419}

/* player outer */
.ppabam-player-page .pp-demo-player{
	width:352px;
	max-width:352px;
	border:1px solid #2c3037;
	border-radius:16px;
	background:#111419;
	box-shadow:0 20px 55px rgba(0,0,0,.32);
	overflow:hidden;
}
.ppabam-player-page .pp-demo-inner{padding:14px 12px 0}

/* top */
.ppabam-player-page .pp-demo-top{gap:6px}
.ppabam-player-page .pp-demo-logo{
	width:27px;height:27px;border:2px solid #ff4d67;
	background:transparent;color:#ff4d67;font-size:13px
}
.ppabam-player-page .pp-demo-brand strong{font-size:12px}
.ppabam-player-page .pp-demo-brand small{color:#6b7380}
.ppabam-player-page .pp-demo-iconbtn{
	width:27px;height:27px;border-radius:8px;background:#1d2128;color:#aab1bb;
}
.ppabam-player-page .pp-demo-iconbtn:hover,
.ppabam-player-page .pp-demo-iconbtn.on{background:#262b33;color:#fff}
.ppabam-player-page .pp-demo-iconbtn[data-demo="settings"].on{
	background:#3a1f29;color:#ff6680;
}

/* search */
.ppabam-player-page .pp-demo-searchbar{
	grid-template-columns:48px 1fr 58px;
	gap:7px;
	margin-top:17px;
}
.ppabam-player-page .pp-demo-cc{background:#1d2128;color:#c9ced5}
.ppabam-player-page .pp-demo-input{
	background:#111419;border-color:#2d323a;color:#d7dbe1
}
.ppabam-player-page .pp-demo-search{
	background:#ff536d;
	box-shadow:0 5px 14px rgba(255,77,103,.15)
}

/* now playing card */
.ppabam-player-page .pp-demo-now{
	margin-top:10px;
	padding:12px;
	border:0;
	border-radius:14px;
	background:#020304;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.ppabam-player-page .pp-demo-mode{
	right:12px;top:11px;
	background:#35131d;color:#ff6e85;
	font-size:7px;
	padding:4px 8px;
}
.ppabam-player-page .pp-demo-song{
	grid-template-columns:70px minmax(0,1fr);
	gap:11px;
}
.ppabam-player-page .pp-demo-cover{
	width:70px;height:70px;
	background:
		radial-gradient(circle at 50% 50%,#111 0 9px,#ddd 10px 16px,#0b0b0b 17px 21px,transparent 22px),
		linear-gradient(135deg,#90b8bf,#0c1116 42%,#854a34 63%,#0b0d10);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ppabam-player-page .pp-demo-cover:after{
	content:"";
	inset:27px;
	background:#0b0d10;
	border:3px solid #ddd;
}
.ppabam-player-page .pp-demo-state{
	color:#ff5e78;
	font-size:8px;
}
.ppabam-player-page .pp-demo-songtitle{
	margin-top:7px;
	font-size:11px;
	line-height:1.35;
}

/* mini segmented rainbow visualizer */
.ppabam-player-page .pp-demo-bars{
	display:grid;
	grid-template-columns:repeat(24,1fr);
	align-items:end;
	gap:2px;
	height:24px;
	margin-top:9px;
}
.ppabam-player-page .pp-demo-bars i{
	width:100%;
	height:var(--h);
	min-height:5px;
	border-radius:0;
	background:
		repeating-linear-gradient(
			to top,
			var(--bar-color,#ff4d67) 0 3px,
			transparent 3px 5px
		);
	opacity:1;
	filter:drop-shadow(0 0 2px rgba(255,255,255,.03));
}
.ppabam-player-page .pp-demo-bars i:nth-child(1),
.ppabam-player-page .pp-demo-bars i:nth-child(2),
.ppabam-player-page .pp-demo-bars i:nth-child(3){--bar-color:#ff315d}
.ppabam-player-page .pp-demo-bars i:nth-child(4),
.ppabam-player-page .pp-demo-bars i:nth-child(5),
.ppabam-player-page .pp-demo-bars i:nth-child(6){--bar-color:#ff8a22}
.ppabam-player-page .pp-demo-bars i:nth-child(7),
.ppabam-player-page .pp-demo-bars i:nth-child(8),
.ppabam-player-page .pp-demo-bars i:nth-child(9){--bar-color:#e5d828}
.ppabam-player-page .pp-demo-bars i:nth-child(10),
.ppabam-player-page .pp-demo-bars i:nth-child(11),
.ppabam-player-page .pp-demo-bars i:nth-child(12){--bar-color:#61da72}
.ppabam-player-page .pp-demo-bars i:nth-child(13),
.ppabam-player-page .pp-demo-bars i:nth-child(14),
.ppabam-player-page .pp-demo-bars i:nth-child(15){--bar-color:#31d7c6}
.ppabam-player-page .pp-demo-bars i:nth-child(16),
.ppabam-player-page .pp-demo-bars i:nth-child(17),
.ppabam-player-page .pp-demo-bars i:nth-child(18){--bar-color:#20bde0}
.ppabam-player-page .pp-demo-bars i:nth-child(19),
.ppabam-player-page .pp-demo-bars i:nth-child(20),
.ppabam-player-page .pp-demo-bars i:nth-child(21){--bar-color:#4167e8}
.ppabam-player-page .pp-demo-bars i:nth-child(22),
.ppabam-player-page .pp-demo-bars i:nth-child(23),
.ppabam-player-page .pp-demo-bars i:nth-child(24){--bar-color:#9a3bd6}

/* progress / controls */
.ppabam-player-page .pp-demo-progress{margin-top:10px}
.ppabam-player-page .pp-demo-line{height:3px;background:#3b3f46}
.ppabam-player-page .pp-demo-line span{background:#ff536d}
.ppabam-player-page .pp-demo-line b{
	width:11px;height:11px;background:#ff536d;border:2px solid #fff
}
.ppabam-player-page .pp-demo-controls{
	gap:8px;
	margin-top:13px;
}
.ppabam-player-page .pp-demo-control{
	height:40px;border-radius:10px;background:#1b1f25;color:#a9b0b9;
}
.ppabam-player-page .pp-demo-control.main{
	height:48px;margin-top:-4px;border-radius:13px;background:#ff536d;
	box-shadow:0 8px 20px rgba(255,77,103,.24)
}
.ppabam-player-page .pp-demo-volume{
	margin-top:10px;
}
.ppabam-player-page .pp-demo-volbtn{
	background:#1b1f25;border-color:#2d323a
}
.ppabam-player-page .pp-demo-voltrack{background:#3a3e45}
.ppabam-player-page .pp-demo-voltrack span,
.ppabam-player-page .pp-demo-voltrack b{background:#ff536d}

/* playlist tools */
.ppabam-player-page .pp-demo-pltools{
	grid-template-columns:1fr 62px 38px 38px;
	gap:7px;
	margin-top:17px;
}
.ppabam-player-page .pp-demo-field,
.ppabam-player-page .pp-demo-smallbtn{
	border-color:#2d323a;
	background:#111419;
}
.ppabam-player-page .pp-demo-smallbtn{background:#1c2027}
.ppabam-player-page .pp-demo-folderbar{margin-top:7px}
.ppabam-player-page .pp-demo-select{background:#171a20;border-color:#2d323a}
.ppabam-player-page .pp-demo-count{
	background:#111419;border-color:#252a31
}
.ppabam-player-page .pp-demo-track{
	min-height:43px;
	border-top-color:#20242b
}
.ppabam-player-page .pp-demo-foot{
	background:#0f1217;border-top-color:#20242b
}

@media(max-width:760px){
	.ppabam-player-page .pp-demo-shell{gap:8px}
	.ppabam-player-page .pp-demo-options-side{width:352px;flex-basis:352px}
}