/* [WP]워드프레스 유튜브 NOW - 프론트엔드 스타일
   테마와 충돌하지 않도록 모든 클래스에 wpyn 접두어를 붙였습니다. */

.wpyn {
	--wpyn-gap: 14px;
	--wpyn-radius: 12px;
	--wpyn-accent: #ff0033;
	--wpyn-coupang: #e4471e;
	--wpyn-text: inherit;
	--wpyn-muted: #6b7280;
	--wpyn-line: rgba(0, 0, 0, .08);
	--wpyn-card-bg: rgba(0, 0, 0, .02);
	margin: 2.5em 0 1.5em;
	clear: both;
	font-size: 15px;
	line-height: 1.45;
}

.wpyn * { box-sizing: border-box; }

/* 테마의 .entry-content a/ul/img 규칙보다 우선하도록 .wpyn 을 앞에 붙여 특이도를 올린다. */
.wpyn ul.wpyn__grid,
.wpyn ul.wpyn__related-list,
.wpyn ul.wpyn__toss-grid { margin-left: 0; padding-left: 0; list-style: none; }
.wpyn a.wpyn__card,
.wpyn a.wpyn__related-item,
.wpyn a.wpyn__more-tag { color: inherit; }
.wpyn a.wpyn__toss-card { color: #111; }
.wpyn a.wpyn__btn--yt { color: #fff; }
.wpyn a.wpyn__card,
.wpyn a.wpyn__related-item,
.wpyn a.wpyn__toss-card,
.wpyn a.wpyn__btn,
.wpyn a.wpyn__card:hover,
.wpyn a.wpyn__related-item:hover,
.wpyn a.wpyn__toss-card:hover,
.wpyn a.wpyn__btn:hover { text-decoration: none; }
.wpyn .wpyn__thumb img,
.wpyn .wpyn__toss-thumb img,
.wpyn .wpyn__related-thumb img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.wpyn__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wpyn__title {
	font-size: 1.15em;
	font-weight: 700;
	margin: 0 0 .8em;
	padding-left: .6em;
	border-left: 4px solid var(--wpyn-accent);
	line-height: 1.3;
}

/* ---------- 영상 그리드 ---------- */

.wpyn__grid {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--wpyn-cols, 4), minmax(0, 1fr));
	gap: var(--wpyn-gap);
}

@media (max-width: 782px) {
	.wpyn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wpyn__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.wpyn__card {
	display: block;
	color: var(--wpyn-text);
	text-decoration: none;
	border-radius: var(--wpyn-radius);
	background: var(--wpyn-card-bg);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.wpyn__card:hover,
.wpyn__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
	text-decoration: none;
}

.wpyn__card:focus-visible,
.wpyn__toss-card:focus-visible,
.wpyn__btn:focus-visible,
.wpyn__remove:focus-visible { outline: 2px solid var(--wpyn-accent); outline-offset: 2px; }

.wpyn__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.wpyn__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transform: scale(1.02);
	transition: transform .3s ease;
}

.wpyn__card:hover .wpyn__thumb img { transform: scale(1.08); }

.wpyn__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpyn__play::before {
	content: "";
	width: 52px;
	height: 36px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .65);
	transition: background .18s ease;
}

.wpyn__play::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}

.wpyn__card:hover .wpyn__play::before { background: var(--wpyn-accent); }

.wpyn__meta {
	display: block;
	padding: 9px 10px 11px;
}

.wpyn__vtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.35;
	min-height: 2.7em;
}

.wpyn__channel {
	display: block;
	margin-top: 4px;
	font-size: .8em;
	color: var(--wpyn-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpyn__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .7);
	color: #fff;
	font-size: 20px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	opacity: .75;
}

.wpyn__remove:hover { opacity: 1; background: var(--wpyn-accent); }

.wpyn__item--removing { opacity: .35; pointer-events: none; }

/* ---------- 툴바 / 버튼 ---------- */

.wpyn__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.8em;
}

.wpyn__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--wpyn-line);
	border-radius: 999px;
	background: #fff;
	color: #111;
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wpyn__btn:hover { text-decoration: none; }
.wpyn__btn:disabled { opacity: .5; cursor: default; }

.wpyn__btn--yt { background: var(--wpyn-accent); border-color: var(--wpyn-accent); color: #fff; }
.wpyn__btn--yt:hover { background: #d1002a; color: #fff; }

.wpyn__btn--kakao { background: #fee500; border-color: #fee500; color: #191919; }
.wpyn__btn--kakao:hover { background: #f5dc00; color: #191919; }

.wpyn__btn--ghost { background: transparent; color: inherit; }
.wpyn__btn--ghost:hover { background: rgba(128, 128, 128, .15); color: inherit; }

.wpyn__btn--coupang { background: var(--wpyn-coupang); border-color: var(--wpyn-coupang); color: #fff; border-radius: 8px; }
.wpyn__btn--coupang:hover { background: #c73a15; color: #fff; }

.wpyn__ico {
	width: 14px;
	height: 14px;
	display: inline-block;
	background: currentColor;
	-webkit-mask: var(--wpyn-mask) center / contain no-repeat;
	mask: var(--wpyn-mask) center / contain no-repeat;
}

.wpyn__ico--yt { --wpyn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/%3E%3C/svg%3E"); }
.wpyn__ico--link { --wpyn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l4-4a3 3 0 1 1 4.2 4.2l-1.7 1.7a1 1 0 0 1-1.4-1.4l1.7-1.7a1 1 0 0 0-1.4-1.4l-4 4a1 1 0 0 1-1.4 0zm2.8-2.8a1 1 0 0 1 0 1.4l-4 4a3 3 0 1 1-4.2-4.2l1.7-1.7a1 1 0 1 1 1.4 1.4L6.6 13.2a1 1 0 0 0 1.4 1.4l4-4a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E"); }
.wpyn__ico--kakao { --wpyn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.5 2 10.8c0 2.7 1.8 5.1 4.5 6.5l-1 3.8c-.1.3.3.6.5.4l4.4-3c.5.1 1 .1 1.6.1 5.5 0 10-3.5 10-7.8S17.5 3 12 3z'/%3E%3C/svg%3E"); }
.wpyn__ico--refresh { --wpyn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 1 7.4 5H17a1 1 0 1 0 0 2h5V6a1 1 0 1 0-2 0v1.5A10 10 0 0 0 2 12a1 1 0 1 0 2 0 8 8 0 0 1 8-8zm8 7a1 1 0 0 0-1 1 8 8 0 0 1-15.4 3H7a1 1 0 1 0 0-2H2v5a1 1 0 1 0 2 0v-1.5A10 10 0 0 0 22 12a1 1 0 0 0-1-1z'/%3E%3C/svg%3E"); }

.wpyn__btn--ok { border-color: #16a34a; color: #16a34a; }

/* ---------- 안내 ---------- */

.wpyn__notice {
	padding: 12px 14px;
	margin: 0 0 1em;
	border: 1px dashed #f59e0b;
	border-radius: 8px;
	background: #fffbeb;
	color: #78350f;
	font-size: .92em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wpyn__notice small { flex-basis: 100%; opacity: .7; }

/* ---------- 관련 글 ---------- */

.wpyn__related { margin: 0 0 1.8em; }

.wpyn__related-list {
	list-style: none;
	margin: 0 0 .6em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
}

@media (max-width: 600px) {
	.wpyn__related-list { grid-template-columns: 1fr; }
}

.wpyn__related-list li { margin: 0; padding: 0; }

.wpyn__related-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background .15s ease;
}

.wpyn__related-item:hover { background: rgba(0, 0, 0, .045); text-decoration: none; }

.wpyn__related-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	border-radius: 8px;
	overflow: hidden;
	background: #e5e7eb;
}

.wpyn__related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }

.wpyn__related-body { min-width: 0; }

.wpyn__related-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
	font-size: .93em;
	line-height: 1.35;
}

.wpyn__related-date { display: block; font-size: .78em; color: var(--wpyn-muted); margin-top: 3px; }

.wpyn__more-tag { font-size: .88em; font-weight: 600; text-decoration: none; }

/* ---------- 토스쇼핑 추천 상품 ---------- */

.wpyn__toss { margin: 0 0 1.8em; }

.wpyn__title--toss { border-left-color: #0064ff; }

.wpyn__disclosure {
	margin: 0 0 .9em;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(0, 100, 255, .06);
	font-size: .8em;
	color: var(--wpyn-muted);
}

.wpyn__toss-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--wpyn-cols, 4), minmax(0, 1fr));
	gap: var(--wpyn-gap);
}

@media (max-width: 782px) {
	.wpyn__toss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wpyn__toss-item { margin: 0; padding: 0; }

.wpyn__toss-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #111;
	text-decoration: none;
	border: 1px solid var(--wpyn-line);
	border-radius: var(--wpyn-radius);
	background: #fff;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.wpyn__toss-card:hover,
.wpyn__toss-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 100, 255, .14);
	text-decoration: none;
}

.wpyn__toss-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f2f4f6;
	overflow: hidden;
}

.wpyn__toss-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.wpyn__toss-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-weight: 800;
	font-size: 1.4em;
	letter-spacing: -.02em;
	color: #0064ff;
	opacity: .5;
}

.wpyn__toss-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 10px 12px;
	flex: 1;
}

.wpyn__toss-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.35;
	min-height: 2.7em;
}

.wpyn__toss-price { font-size: .95em; font-weight: 700; color: #0064ff; }

.wpyn__btn--toss {
	margin-top: auto;
	justify-content: center;
	background: #0064ff;
	border-color: #0064ff;
	color: #fff;
	border-radius: 8px;
	font-size: .82em;
	padding: 8px 10px;
}

.wpyn__toss-card:hover .wpyn__btn--toss { background: #0050cc; }

/* ---------- 쿠팡 ---------- */

.wpyn__shop { margin: 0 0 1em; }

.wpyn__shop-form {
	display: flex;
	gap: 8px;
	margin: 0 0 .5em;
}

.wpyn__shop-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font: inherit;
	font-size: .95em;
}

.wpyn__shop-input:focus { outline: 2px solid var(--wpyn-coupang); outline-offset: -1px; border-color: transparent; }

.wpyn__disclaimer { margin: 0; font-size: .78em; color: var(--wpyn-muted); }

/* ---------- 팝업 플레이어 ---------- */

.wpyn-modal {
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #0f0f0f;
	color: #fff;
	width: min(960px, 94vw);
	max-width: 94vw;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.wpyn-modal:not([open]) { display: none; } /* <dialog> 미지원 브라우저에서 내용이 노출되지 않도록 */

.wpyn-modal::backdrop { background: rgba(0, 0, 0, .78); }

.wpyn-modal__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.wpyn-modal__title {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wpyn-modal__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 24px;
	line-height: 34px;
	cursor: pointer;
	padding: 0;
}

.wpyn-modal__close:hover { background: rgba(255, 255, 255, .22); }

.wpyn-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }

.wpyn-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.wpyn-modal__foot { padding: 12px 14px; display: flex; justify-content: flex-end; }

/* iOS Safari 포함 배경 스크롤 잠금 (JS 가 top 값을 넣고 닫을 때 복원한다) */
body.wpyn-modal-open { overflow: hidden; position: fixed; width: 100%; }