/* ============================================================================
   Soriel YouTube Video Channel Skin (soriel_video)
   Warm Editorial x Clean YouTube 16:9 Feed & Theater Watch Layout
   ============================================================================ */

.sv-skin-root {
	--sv-paper: #FAF8F4;
	--sv-sand: #F3EFE8;
	--sv-card: #FFFFFF;
	--sv-navy: #141C2B;
	--sv-navy-soft: #1E293B;
	--sv-gold: #9A7442;
	--sv-gold-light: #EFE6D8;
	--sv-yt-red: #CC1E1E;
	--sv-ink: #181D27;
	--sv-muted: #5F6776;
	--sv-subtle: #8890A0;
	--sv-border: rgba(20, 28, 43, 0.1);
	--sv-border-strong: rgba(20, 28, 43, 0.16);
	--sv-radius-lg: 18px;
	--sv-radius-md: 14px;
	--sv-radius-sm: 10px;
	--sv-shadow-sm: 0 4px 16px rgba(20, 28, 43, 0.05);
	--sv-shadow-md: 0 14px 36px rgba(20, 28, 43, 0.09);
	color: var(--sv-ink);
	font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
	box-sizing: border-box;
	overflow-x: clip;
}

.sv-skin-root *,
.sv-skin-root *::before,
.sv-skin-root *::after {
	box-sizing: border-box;
}

.sv-band {
	padding: 40px 0 84px;
}

.sv-bg-sand {
	background: var(--sv-sand);
}

.sv-bg-paper {
	background: var(--sv-paper);
}

.sv-wrap {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.sv-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-gold);
}

/* Buttons */
.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.sv-btn-sm {
	height: 36px;
	padding: 0 14px;
	font-size: 12.5px;
}

.sv-btn-icon {
	width: 42px;
	padding: 0;
}

.sv-btn-navy {
	background: var(--sv-navy);
	color: #FFFFFF !important;
}

.sv-btn-navy:hover {
	background: #23304A;
	transform: translateY(-1px);
}

.sv-btn-bronze {
	background: var(--sv-gold);
	color: #FFFFFF !important;
}

.sv-btn-bronze:hover {
	background: #836034;
	transform: translateY(-1px);
}

.sv-btn-yt {
	background: #FFFFFF;
	border-color: var(--sv-border-strong);
	color: var(--sv-ink) !important;
}

.sv-btn-yt i.xi-youtube {
	color: var(--sv-yt-red);
	font-size: 16px;
}

.sv-btn-yt:hover {
	border-color: var(--sv-yt-red);
	background: #FFF9F9;
}

.sv-btn-outline {
	background: #FFFFFF;
	border-color: var(--sv-border-strong);
	color: var(--sv-ink) !important;
}

.sv-btn-outline:hover {
	border-color: var(--sv-navy);
	background: var(--sv-paper);
}

/* ============================================================================
   1. YouTube Channel Masthead Strip & Pinned Notices
   ============================================================================ */
.sv-channel-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	margin-bottom: 18px;
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	box-shadow: var(--sv-shadow-sm);
}

.sv-channel-identity {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.sv-channel-avatar {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sv-navy) 0%, #273652 100%);
	border: 2px solid rgba(154, 116, 66, 0.45);
	color: #F4DEC0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.sv-avatar-md {
	width: 44px;
	height: 44px;
	font-size: 12px;
}

.sv-channel-text {
	min-width: 0;
}

.sv-channel-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 3px 0 4px;
}

.sv-channel-name {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	color: var(--sv-navy);
	letter-spacing: -0.02em;
}

.sv-total-pill {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--sv-gold-light);
	color: #6E4F26;
	font-size: 12px;
	font-weight: 700;
}

.sv-channel-sub {
	margin: 0;
	font-size: 13.5px;
	color: var(--sv-muted);
}

.sv-channel-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex-shrink: 0;
}

.sv-sync-feedback {
	margin-bottom: 16px;
	padding: 13px 18px;
	border-radius: var(--sv-radius-sm);
	background: #ECFDF3;
	border: 1px solid #A6F4C5;
	color: #067647;
	font-size: 13.5px;
	font-weight: 600;
}

.sv-sync-feedback.is-error {
	background: #FEF3F2;
	border-color: #FECDCA;
	color: #B42318;
}

/* Pinned Notice Strip */
.sv-notice-strip {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.sv-notice-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: #FFFDF9;
	border: 1px solid rgba(154, 116, 66, 0.28);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-ink) !important;
	text-decoration: none !important;
	transition: all 0.18s ease;
}

.sv-notice-row:hover {
	border-color: var(--sv-gold);
	background: #FAF4EA;
}

.sv-notice-badge {
	flex-shrink: 0;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--sv-navy);
	color: #F6E3C5;
	font-size: 11.5px;
	font-weight: 700;
}

.sv-notice-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-notice-date {
	flex-shrink: 0;
	font-size: 12.5px;
	color: var(--sv-subtle);
}

/* ============================================================================
   2. YouTube Filter Chips, Search Bar & View Switch
   ============================================================================ */
.sv-native-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.sv-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 24px;
}

.sv-chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.sv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 15px;
	border-radius: 9px;
	border: 1px solid var(--sv-border);
	background: rgba(255, 255, 255, 0.85);
	color: var(--sv-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.18s ease;
}

.sv-chip em {
	font-style: normal;
	font-size: 12px;
	opacity: 0.72;
}

.sv-chip:hover {
	background: #FFFFFF;
	border-color: var(--sv-navy);
}

.sv-chip.is-active {
	background: var(--sv-navy);
	border-color: var(--sv-navy);
	color: #FFFFFF !important;
}

.sv-chip.is-active em {
	color: #F3DEC0;
	opacity: 1;
}

.sv-chip.is-search-reset {
	background: var(--sv-gold-light);
	border-color: rgba(154, 116, 66, 0.35);
	color: #5C401D !important;
}

.sv-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.sv-search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 280px;
	max-width: 100%;
	height: 38px;
	background: #FFFFFF;
	border: 1px solid var(--sv-border-strong);
	border-radius: 999px;
	padding: 0 6px 0 13px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sv-search-form:focus-within {
	border-color: var(--sv-navy);
	box-shadow: 0 0 0 3px rgba(20, 28, 43, 0.08);
}

.sv-search-icon {
	color: var(--sv-subtle);
	font-size: 15px;
	margin-right: 7px;
}

.sv-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 13.5px;
	color: var(--sv-ink);
	outline: none;
}

.sv-search-submit {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0;
	background: var(--sv-sand);
	color: var(--sv-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.18s ease;
}

.sv-search-submit:hover {
	background: var(--sv-navy);
	color: #FFFFFF;
}

.sv-view-switch {
	display: inline-flex;
	padding: 3px;
	background: #FFFFFF;
	border: 1px solid var(--sv-border);
	border-radius: 10px;
}

.sv-view-btn {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--sv-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.16s ease;
}

.sv-view-btn.is-active {
	background: var(--sv-navy);
	color: #FFFFFF;
}

/* ============================================================================
   3. YouTube 16:9 Video Card Grid & Compact Playlist Mode
   ============================================================================ */
.sv-feed.is-grid-view {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 22px;
}

.sv-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sv-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--sv-radius-md);
	overflow: hidden;
	background: var(--sv-navy);
	box-shadow: 0 6px 20px rgba(20, 28, 43, 0.08);
}

.sv-thumb-link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none !important;
}

.sv-thumb-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-card:hover .sv-thumb-link img {
	transform: scale(1.04);
}

.sv-nothumb {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(135deg, #162033 0%, #273754 100%);
	color: rgba(255, 255, 255, 0.72);
}

.sv-nothumb i {
	font-size: 32px;
	color: #E2C59B;
}

.sv-nothumb em {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 700;
}

.sv-play-overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 17, 28, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.sv-card:hover .sv-play-overlay {
	opacity: 1;
}

.sv-play-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(20, 28, 43, 0.86);
	backdrop-filter: blur(6px);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	padding-left: 3px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.sv-ep-pill {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 4px 8px;
	border-radius: 6px;
	background: rgba(12, 17, 28, 0.86);
	backdrop-filter: blur(4px);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	max-width: calc(100% - 20px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-quick-play {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 10px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(12, 17, 28, 0.78);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-3px);
	transition: all 0.2s ease;
}

.sv-card:hover .sv-quick-play,
.sv-quick-play:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.sv-quick-play:hover {
	background: var(--sv-gold);
	border-color: var(--sv-gold);
}

/* YouTube 2-Column Metadata Row Below Thumbnail */
.sv-card-meta {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-top: 12px;
	min-width: 0;
}

.sv-avatar-mini {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--sv-navy);
	color: #F3DEC0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.sv-meta-body {
	flex: 1 1 auto;
	min-width: 0;
}

.sv-card-title {
	margin: 0 0 5px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -0.015em;
}

.sv-card-title a {
	color: var(--sv-ink) !important;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.sv-card:hover .sv-card-title a {
	color: var(--sv-gold) !important;
}

.sv-card-channel {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sv-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-card-stats {
	margin: 0;
	font-size: 12.5px;
	color: var(--sv-subtle);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

.sv-dot {
	opacity: 0.65;
}

/* Compact Playlist Mode (.is-list-view) */
.sv-feed.is-list-view {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sv-feed.is-list-view .sv-card {
	flex-direction: row;
	align-items: center;
	gap: 18px;
	padding: 12px;
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sv-feed.is-list-view .sv-card:hover {
	border-color: rgba(154, 116, 66, 0.45);
	box-shadow: var(--sv-shadow-sm);
}

.sv-feed.is-list-view .sv-thumb-wrap {
	width: 220px;
	flex-shrink: 0;
	border-radius: 10px;
	box-shadow: none;
}

.sv-feed.is-list-view .sv-card-meta {
	padding-top: 0;
	flex: 1 1 auto;
}

.sv-feed.is-list-view .sv-avatar-mini {
	display: none;
}

.sv-feed.is-list-view .sv-card-title {
	font-size: 16.5px;
	margin-bottom: 6px;
}

/* Empty & Pagination */
.sv-empty {
	padding: 64px 24px;
	text-align: center;
	background: var(--sv-card);
	border: 1px dashed var(--sv-border-strong);
	border-radius: var(--sv-radius-lg);
	color: var(--sv-muted);
}

.sv-empty i {
	font-size: 34px;
	color: var(--sv-gold);
	margin-bottom: 10px;
	display: inline-block;
}

.sv-empty p {
	margin: 0 0 14px;
	font-size: 14.5px;
}

.sv-pagination,
.sv-comment-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 40px;
}

.sv-page-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	border-radius: 10px;
	border: 1px solid var(--sv-border);
	background: #FFFFFF;
	color: var(--sv-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: all 0.18s ease;
}

.sv-page-btn:hover {
	border-color: var(--sv-navy);
}

.sv-page-btn.is-active {
	background: var(--sv-navy);
	border-color: var(--sv-navy);
	color: #FFFFFF !important;
}

/* ============================================================================
   4. YouTube Watch Page Theater + Right-Hand Up-Next Playlist Sidebar
   ============================================================================ */
.sv-watch-top-nav {
	margin-bottom: 18px;
}

.sv-back-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--sv-sand);
	border: 1px solid var(--sv-border);
	color: var(--sv-navy) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.18s ease;
}

.sv-back-pill:hover {
	border-color: var(--sv-navy);
	background: #EAE4D9;
}

.sv-watch-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 28px;
	align-items: start;
}

.sv-watch-main {
	min-width: 0;
}

.sv-player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #0B0F17;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.sv-player-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sv-watch-header {
	padding: 18px 0 14px;
}

.sv-watch-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.sv-badge-gold {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	background: var(--sv-gold);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.sv-badge-outline {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	border: 1px solid var(--sv-border-strong);
	background: #FFFFFF;
	color: var(--sv-muted);
	font-size: 11.5px;
	font-weight: 600;
}

.sv-watch-title {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.36;
	color: var(--sv-navy);
	letter-spacing: -0.02em;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.sv-watch-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 0 18px;
	border-bottom: 1px solid var(--sv-border);
	margin-bottom: 18px;
}

.sv-watch-owner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.sv-owner-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sv-owner-meta strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-owner-meta span {
	font-size: 12.5px;
	color: var(--sv-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-watch-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* YouTube-Style Description Box */
.sv-desc-card {
	padding: 18px 22px;
	background: var(--sv-sand);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
}

.sv-desc-stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
	font-size: 13.5px;
	color: var(--sv-navy);
}

.sv-desc-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: 6px;
}

.sv-tag-link {
	color: var(--sv-gold) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

.sv-tag-link:hover {
	text-decoration: underline !important;
}

.sv-desc-body p,
.sv-desc-default {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.72;
	color: #2B3240;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.sv-desc-body p:last-child,
.sv-desc-default:last-child {
	margin-bottom: 0;
}

.sv-desc-body a,
.sv-extra-body a,
.sv-desc-default a {
	color: #1D4ED8;
	text-decoration: underline;
	word-break: break-all;
}

.sv-extra-body {
	font-size: 14.5px;
	line-height: 1.72;
	color: #2B3240;
	overflow-wrap: anywhere;
}

.sv-extra-body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.sv-attach-box {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--sv-border);
}

.sv-attach-heading {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-attach-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sv-attach-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid var(--sv-border);
	border-radius: 10px;
	color: var(--sv-ink) !important;
	text-decoration: none !important;
	font-size: 13.5px;
}

.sv-attach-item:hover {
	border-color: var(--sv-gold);
}

.sv-attach-ext {
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--sv-gold);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
}

.sv-attach-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.sv-attach-size {
	font-size: 12px;
	color: var(--sv-subtle);
}

/* Right Up-Next Playlist Sidebar */
.sv-watch-sidebar {
	min-width: 0;
}

.sv-upnext-panel {
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	padding: 18px;
	box-shadow: var(--sv-shadow-sm);
}

.sv-upnext-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--sv-border);
}

.sv-upnext-head h3 {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-upnext-all {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sv-muted) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.sv-upnext-all:hover {
	color: var(--sv-navy) !important;
}

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

.sv-upnext-item {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 10px;
	padding: 7px;
	border-radius: 10px;
	text-decoration: none !important;
	transition: background 0.16s ease;
}

.sv-upnext-item:hover {
	background: var(--sv-paper);
}

.sv-upnext-item.is-current {
	background: var(--sv-gold-light);
}

.sv-upnext-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sv-navy);
}

.sv-upnext-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sv-nothumb-sm {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #E2C59B;
	font-size: 20px;
}

.sv-upnext-ep,
.sv-upnext-now {
	position: absolute;
	right: 5px;
	bottom: 5px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(12, 17, 28, 0.85);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	max-width: calc(100% - 10px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-upnext-now {
	background: var(--sv-gold);
}

.sv-upnext-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sv-upnext-info h4 {
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.36;
	color: var(--sv-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.sv-upnext-ch,
.sv-upnext-meta {
	margin: 0;
	font-size: 11.5px;
	color: var(--sv-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Notice / Text Article Card */
.sv-notice-article {
	max-width: 860px;
	margin: 0 auto;
	padding: 36px 40px;
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	box-shadow: var(--sv-shadow-sm);
}

.sv-notice-article-head {
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--sv-border);
}

.sv-notice-article-meta {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--sv-subtle);
}

.sv-notice-article-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--sv-border);
}

/* ============================================================================
   5. 5-Second YouTube Upload Studio (write_form.html) & Forms
   ============================================================================ */
.sv-form-card {
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	padding: 34px 36px;
	box-shadow: var(--sv-shadow-sm);
}

.sv-studio-card {
	max-width: 980px;
	margin: 0 auto;
}

.sv-narrow-card {
	max-width: 540px;
	margin: 0 auto;
	text-align: center;
}

.sv-form-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 22px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--sv-border);
}

.sv-form-title {
	margin: 4px 0 6px;
	font-size: 24px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-studio-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sv-muted);
}

.sv-studio-step {
	margin: 0 0 22px;
	padding: 24px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-paper);
}

.sv-step-optional {
	background: #FCFBF9;
	border-style: dashed;
}

.sv-step-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.sv-step-badge {
	flex-shrink: 0;
	padding: 5px 11px;
	border-radius: 8px;
	background: var(--sv-navy);
	color: #F4DEC0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.sv-step-head h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--sv-navy);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.sv-step-head p {
	margin: 0;
	font-size: 13.5px;
	color: var(--sv-muted);
}

.sv-opt-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: #ECFDF3;
	border: 1px solid #ABEFC6;
	color: #067647;
	font-size: 11.5px;
	font-weight: 700;
}

.sv-yt-bar {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.sv-yt-url-input {
	flex: 1 1 auto;
	min-width: 0;
}

.sv-fetch-btn {
	height: 44px;
	border-radius: 10px;
}

/* Live 16:9 YouTube Preview Card inside Write Form */
.sv-yt-preview {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	margin-top: 14px;
	padding: 14px;
	background: #FFFFFF;
	border: 1px solid rgba(6, 118, 71, 0.25);
	border-radius: 12px;
}

.sv-yt-preview-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 9px;
	overflow: hidden;
	background: var(--sv-navy);
}

.sv-yt-preview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sv-yt-preview-info {
	min-width: 0;
}

.sv-ok-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #ECFDF3;
	color: #067647;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
}

.sv-yt-preview-info strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--sv-navy);
	margin-bottom: 4px;
	overflow-wrap: anywhere;
}

.sv-yt-preview-info p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sv-muted);
}

.sv-yt-status {
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
}

.sv-yt-status.is-ok {
	background: #ECFDF3;
	color: #067647;
}

.sv-yt-status.is-warn {
	background: #FEF3F2;
	color: #B42318;
}

.sv-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sv-field {
	min-width: 0;
}

.sv-field.is-full {
	grid-column: 1 / -1;
}

.sv-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 7px;
}

.sv-label {
	display: inline-block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-label-row .sv-label {
	margin-bottom: 0;
}

.sv-label small {
	font-weight: 500;
	color: var(--sv-subtle);
}

.sv-req {
	color: #D92D20;
	font-style: normal;
}

.sv-input,
.sv-select,
.sv-textarea {
	width: 100%;
	border: 1px solid var(--sv-border-strong);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--sv-ink);
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sv-input,
.sv-select {
	height: 44px;
	padding: 0 14px;
}

.sv-textarea {
	padding: 12px 14px;
	line-height: 1.65;
	resize: vertical;
}

.sv-input:focus,
.sv-select:focus,
.sv-textarea:focus {
	outline: none;
	border-color: var(--sv-navy);
	box-shadow: 0 0 0 3px rgba(20, 28, 43, 0.08);
}

.sv-title-flex {
	display: flex;
	gap: 10px;
}

.sv-title-input {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

.sv-notice-select {
	width: 130px;
	flex-shrink: 0;
}

.sv-tpl-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 11px;
	border-radius: 7px;
	border: 1px solid rgba(154, 116, 66, 0.35);
	background: #FFFFFF;
	color: #6E4F26;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.sv-tpl-btn:hover {
	background: var(--sv-gold-light);
}

.sv-editor-wrap {
	margin-bottom: 14px;
	background: #FFFFFF;
	border-radius: 10px;
}

.sv-tags-field {
	margin-top: 12px;
}

.sv-write-guest {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 14px 0;
}

.sv-write-options {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 14px 0;
}

.sv-check-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--sv-muted);
	cursor: pointer;
}

.sv-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--sv-border);
}

.sv-form-actions-center {
	justify-content: center;
}

.sv-form-actions-left,
.sv-form-actions-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sv-pw-row {
	display: flex;
	gap: 8px;
	margin: 16px 0;
}

/* ============================================================================
   6. Comments & Quick Preview Lightbox Modal
   ============================================================================ */
.sv-comments {
	margin-top: 28px;
	padding: 24px;
	background: var(--sv-card);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
}

.sv-comments-head {
	margin-bottom: 16px;
}

.sv-comments-title {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--sv-navy);
}

.sv-comments-title em {
	font-style: normal;
	color: var(--sv-gold);
}

.sv-comment-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sv-comment-item {
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--sv-paper);
	border: 1px solid var(--sv-border);
}

.sv-comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.sv-comment-author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.sv-comment-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
}

.sv-comment-time {
	font-size: 12px;
	color: var(--sv-subtle);
}

.sv-comment-actions {
	display: flex;
	gap: 10px;
	font-size: 12.5px;
}

.sv-comment-actions a {
	color: var(--sv-muted) !important;
	text-decoration: none !important;
}

.sv-comment-body {
	font-size: 14px;
	line-height: 1.65;
}

.sv-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Quick Preview Modal */
.sv-preview-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

.sv-preview-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.sv-preview-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 15, 25, 0.78);
	backdrop-filter: blur(6px);
}

.sv-preview-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 920px;
	background: #121826;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.sv-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: #161E2F;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-preview-head-info {
	min-width: 0;
}

.sv-preview-title {
	margin: 3px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-preview-head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sv-preview-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 34px;
	padding: 0 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF !important;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none !important;
}

.sv-preview-link:hover {
	background: var(--sv-gold);
}

.sv-modal-close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sv-modal-close:hover {
	background: rgba(255, 255, 255, 0.24);
}

.sv-preview-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000000;
}

.sv-preview-stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================================
   7. Responsive Breakpoints (Tablet & Mobile — Zero Horizontal Overflow)
   ============================================================================ */
@media (max-width: 1080px) {
	.sv-watch-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-feed.is-grid-view {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.sv-channel-bar {
		flex-direction: column;
		align-items: flex-start;
		padding: 18px 20px;
	}

	.sv-channel-actions {
		width: 100%;
	}

	.sv-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.sv-toolbar-right {
		margin-left: 0;
		width: 100%;
	}

	.sv-search-form {
		flex: 1 1 auto;
		width: auto;
	}

	.sv-yt-preview {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.sv-band {
		padding: 24px 0 60px;
	}

	.sv-wrap {
		padding: 0 16px;
	}

	.sv-feed.is-grid-view {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.sv-feed.is-list-view .sv-card {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
		gap: 10px;
	}

	.sv-feed.is-list-view .sv-thumb-wrap {
		width: 100%;
	}

	.sv-quick-play {
		opacity: 1;
		transform: none;
	}

	.sv-watch-title {
		font-size: 19px;
	}

	.sv-form-card {
		padding: 20px 16px;
	}

	.sv-studio-step {
		padding: 16px;
	}

	.sv-step-head {
		flex-direction: column;
		gap: 8px;
	}

	.sv-yt-bar,
	.sv-title-flex {
		flex-direction: column;
	}

	.sv-notice-select {
		width: 100%;
	}

	.sv-field-grid,
	.sv-write-guest {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-upnext-item {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.sv-notice-article {
		padding: 22px 18px;
	}
}