/* ============================================================
   NK Player Styles
   ============================================================ */

/* ── Video Player Container ─────────────────────────────────── */
.nk-player { position: relative; width: 100%; }
.nk-player--video { background: #000; }

/* YouTube / HTML5 wrapper maintains 16:9 */
.nk-player__yt-container,
.nk-player__html5-container {
	position: relative;
	padding-top: 56.25%;
	background: #000;
}
.nk-player__yt-container #nk-yt-player,
.nk-player__html5-container .nk-player__video {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

/* Vimeo: iframe 특성상 aspect-ratio + block 레이아웃 사용 */
.nk-player__vimeo-container {
	position: relative;
	width: 100%;
	background: #000;
	/* 16:9 비율 — padding-top 대신 aspect-ratio 우선 적용, 미지원 브라우저 fallback */
	aspect-ratio: 16 / 9;
}
/* aspect-ratio 미지원 브라우저 fallback */
@supports not (aspect-ratio: 16/9) {
	.nk-player__vimeo-container {
		padding-top: 56.25%;
		height: 0;
	}
}
.nk-player__vimeo-container #nk-vimeo-player {
	display: block;          /* inline → block: iframe 기본값 재정의 */
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Vimeo note */
.nk-player__vimeo-note {
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	color: var(--nk-text-muted);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Player error state */
.nk-player__error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	background: #111;
	color: #aaa;
	gap: 0.75rem;
	font-size: 0.9rem;
}
.nk-player__error i { font-size: 2rem; color: #c0392b; }

/* Consent Gate */
.nk-player__consent-gate { position: relative; width: 100%; }
.nk-player__consent-thumb {
	position: relative;
	padding-top: 56.25%;
	background-size: cover;
	background-position: center;
	background-color: #000;
}

/* Play overlay button — fills entire thumbnail */
.nk-yt-play-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Centered play circle */
.nk-yt-play-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
}
.nk-yt-play-overlay:hover .nk-yt-play-circle,
.nk-yt-play-overlay:focus .nk-yt-play-circle {
	transform: scale(1.12);
	background: rgba(0, 0, 0, 0.78);
	border-color: #fff;
}
.nk-yt-play-circle i {
	font-size: 1.75rem;
	color: #fff;
	margin-left: 4px; /* optical center for play icon */
}

@media (max-width: 768px) {
	.nk-yt-play-circle { width: 60px; height: 60px; }
	.nk-yt-play-circle i { font-size: 1.5rem; }
}

/* ── Player Custom Controls ─────────────────────────────────── */
.nk-player__controls {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	padding: 2rem 1rem 0.75rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.nk-player:hover .nk-player__controls,
.nk-player--paused .nk-player__controls { opacity: 1; }

/* Vimeo: 커스텀 컨트롤 완전 비표시 (Vimeo 자체 컨트롤 사용) */
.nk-player__controls--hidden {
	display: none !important;
}

.nk-player__controls--audio {
	position: static;
	background: transparent;
	opacity: 1;
	padding: 1rem 0 0;
}

/* Progress Bar */
.nk-player__progress-wrap { margin-bottom: 0.5rem; }
.nk-player__progress-bar {
	position: relative;
	height: 4px;
	background: rgba(255,255,255,0.3);
	border-radius: 2px;
	cursor: pointer;
	transition: height var(--nk-transition);
}
.nk-player__progress-bar:hover { height: 6px; }
.nk-player__progress-fill {
	height: 100%;
	background: var(--nk-accent);
	border-radius: 2px;
	pointer-events: none;
	width: 0%;
	transition: width 0.1s linear;
}
.nk-player__progress-thumb {
	position: absolute;
	top: 50%; right: -6px;
	transform: translateY(-50%);
	width: 12px; height: 12px;
	background: var(--nk-accent);
	border-radius: 50%;
	opacity: 0;
	transition: opacity var(--nk-transition);
}
.nk-player__progress-bar:hover .nk-player__progress-thumb { opacity: 1; }

.nk-player__time {
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.7);
	margin-top: 0.25rem;
	gap: 0.25rem;
}
.nk-player__controls--audio .nk-player__time { color: var(--nk-text-secondary); }

/* Buttons row */
.nk-player__buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.nk-player__btn {
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem;
	color: rgba(255,255,255,0.85);
	border-radius: 0.25rem;
	font-size: 0.9rem;
	transition: color var(--nk-transition);
}
.nk-player__btn:hover { color: #fff; }
.nk-player__btn--play { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.nk-player__btn--toggle { color: rgba(255,255,255,0.5); }
.nk-player__btn--toggle[aria-pressed="true"] { color: var(--nk-accent); }

.nk-player__controls--audio .nk-player__btn { color: var(--nk-text-secondary); }
.nk-player__controls--audio .nk-player__btn:hover { color: var(--nk-accent); }
.nk-player__controls--audio .nk-player__btn--play { color: var(--nk-text-primary); }

.nk-player__spacer { flex: 1; }

/* Volume */
.nk-player__volume { display: flex; align-items: center; gap: 0.25rem; }
.nk-player__volume-slider {
	width: 64px;
	-webkit-appearance: none;
	appearance: none;
	height: 3px;
	background: rgba(255,255,255,0.4);
	border-radius: 2px;
	cursor: pointer;
}
.nk-player__controls--audio .nk-player__volume-slider { background: var(--nk-border); }
.nk-player__volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--nk-accent);
	cursor: pointer;
}

/* Speed select */
.nk-player__speed {
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.8);
	padding: 0.2rem 0.4rem;
	font-size: 0.75rem;
	border-radius: 0.25rem;
	cursor: pointer;
}
.nk-player__controls--audio .nk-player__speed {
	background: var(--nk-bg-elevated);
	border-color: var(--nk-border);
	color: var(--nk-text-primary);
}

/* Resume Notice */
.nk-player__resume-notice {
	position: absolute;
	top: 1rem; right: 1rem;
	background: rgba(0,0,0,0.85);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	color: #fff;
	z-index: 10;
}
.nk-player__resume-notice p { font-size: 0.875rem; margin-bottom: 0.5rem; }
.nk-player__resume-btns { display: flex; gap: 0.5rem; }

/* ── SoundCloud Embed ───────────────────────────────────────── */
.nk-player__soundcloud-wrap {
	border-radius: 0.5rem;
	overflow: hidden;
	margin-bottom: 0.5rem;
}
.nk-player__soundcloud-wrap iframe {
	display: block;
}
.nk-player__soundcloud-note {
	padding: 0.4rem 0.5rem;
	font-size: 0.8125rem;
	color: var(--nk-text-muted);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* ── Audio Player Component ─────────────────────────────────── */
.nk-player--audio {
	background: var(--nk-bg-secondary);
	border-radius: 0.5rem;
	padding: 1.25rem;
}
.nk-player__track-info { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.nk-player__cover { width: 72px; height: 72px; border-radius: 0.375rem; overflow: hidden; flex-shrink: 0; }
.nk-player__cover-img { width: 100%; height: 100%; object-fit: cover; }
.nk-player__track-title { font-weight: 700; margin-bottom: 0.35rem; line-height: 1.3; }
.nk-player__track-artist { font-size: 0.875rem; color: var(--nk-text-secondary); }
.nk-player__buttons--audio { justify-content: center; flex-wrap: wrap; }

/* Playlist */
.nk-player__playlist { margin-top: 1.5rem; border-top: 1px solid var(--nk-border); padding-top: 1rem; }
.nk-player__playlist-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; }
.nk-player__playlist-count { font-weight: 400; color: var(--nk-text-muted); }
.nk-player__playlist-list { max-height: 280px; overflow-y: auto; }
.nk-player__playlist-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background var(--nk-transition);
}
.nk-player__playlist-item:hover { background: var(--nk-bg-hover); }
.nk-player__playlist-item--current {
	background: var(--nk-bg-elevated);
	color: var(--nk-accent);
}
.nk-player__playlist-num { width: 1.5rem; text-align: right; font-size: 0.75rem; color: var(--nk-text-muted); flex-shrink: 0; }
.nk-player__playlist-name { flex: 1; font-size: 0.875rem; }
.nk-player__playlist-duration { font-size: 0.75rem; color: var(--nk-text-muted); flex-shrink: 0; }
.nk-player__playlist-play-icon { display: none; color: var(--nk-accent); font-size: 0.75rem; }
.nk-player__playlist-item--current .nk-player__playlist-play-icon { display: block; }

/* ── PDF Viewer ─────────────────────────────────────────────── */
.nk-pdf-viewer { background: var(--nk-bg-secondary); border-radius: 0.5rem; overflow: hidden; margin-bottom: 1.5rem; }
.nk-pdf-viewer__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--nk-bg-elevated);
	border-bottom: 1px solid var(--nk-border);
}
.nk-pdf-viewer__nav { display: flex; align-items: center; gap: 0.5rem; }
.nk-pdf-viewer__page-info { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; }
.nk-pdf-viewer__page-input { width: 3rem; text-align: center; background: var(--nk-bg-primary); border: 1px solid var(--nk-border); border-radius: 0.25rem; color: var(--nk-text-primary); padding: 0.2rem; }
.nk-pdf-viewer__zoom { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nk-pdf-viewer__canvas-container { position: relative; min-height: 400px; overflow: auto; display: flex; justify-content: center; padding: 1rem; background: #525659; }
.nk-pdf-viewer__canvas { max-width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.nk-pdf-viewer__loading {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 0.5rem;
	color: rgba(255,255,255,0.7);
}
.nk-pdf-viewer__error {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 0.5rem;
	color: var(--nk-accent);
}