/* 프리코스 뉴스레터 웹 공개 페이지 (iframe 전용) */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	max-width: 100%;
	/* 2026-05-07: overflow-x: hidden 제거 — sticky containing block을 root로 유지.
	   sticky 자식(.detail-topbar)이 viewport에 고정되도록 함.
	   가로 오버플로우는 .page-wrap { max-width:100vw } + 자식 { max-width:100% } 로 통제. */
}

body {
	font-family: -apple-system, 'Malgun Gothic', sans-serif;
	font-size: 14px;
	color: #1a1a2e;
	background: #f4f6f9;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img, iframe {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

iframe {
	width: 100%;
	border: 0;
}

/* ?띿뒪???ㅻ쾭?뚮줈??諛⑹? */
h1, h2, h3, h4, p, span {
	overflow-wrap: anywhere;
	word-break: keep-all;
}

/* ?€?€ ?섏씠吏€ ?섑띁 ?€?€ */
.page-wrap {
	width: min(1280px, 100%);
	margin-inline: auto;
	padding: 32px 16px 60px;
}

/* — 목록 헤더 — */
.list-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid #1a1a1a;
}

.list-title {
	font-size: 24px;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: 1px;
}

.list-sub {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}

.list-count {
	font-size: 12px;
	color: #888;
	flex-shrink: 0;
}

/* ?€?€ ?꾪꽣 pill ?€?€ */
.pill-filter {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
}

.pill {
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	color: #666;
	background: #f5f5f5;
	border: 1px solid #eee;
	transition: all 0.15s;
}

.pill:hover {
	border-color: #1a1a1a;
	color: #1a1a1a;
}

.pill.active {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

/* ?€?€ 移대뱶 洹몃━??(12移쇰읆 ?좊룞) ?€?€ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
}

.card {
	grid-column: span 4;
}

@media (max-width: 1199px) {
	.card {
		grid-column: span 6;
	}
}

@media (max-width: 767px) {
	.card {
		grid-column: span 12;
	}
}

/* ?€?€ 紐⑸줉 移대뱶 ?€?€ */
.card {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #1e293b;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

/* 이미지 없는 카드 — 각각 다른 색상 */
.card--c0 { background: linear-gradient(145deg, #1e293b, #334155); }
.card--c1 { background: linear-gradient(145deg, #1a2744, #2d4a7a); }
.card--c2 { background: linear-gradient(145deg, #292524, #44403c); }
.card--c3 { background: linear-gradient(145deg, #1c1917, #3f3f46); }
.card--c4 { background: linear-gradient(145deg, #0c4a6e, #164e63); }

/* 移대뱶 ?몃꽕??*/
.card-thumb {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-thumb-placeholder {
	width: 100%;
	height: 100%;
}

/* 移대뱶 ?ㅻ쾭?덉씠 ???덉뼱濡쒖? ?숈씪 媛?*/
.card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.12) 100%);
}

/* 移대뱶 蹂몃Ц */
.card-body {
	position: relative;
	z-index: 2;
	padding: clamp(14px, 1.8vw, 20px);
	margin-top: auto;
}

.card-date {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 6px;
	display: block;
}

.card-title {
	font-size: clamp(15px, 1.8vw, 18px);
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-summary {
	font-size: clamp(10px, 1vw, 12px);
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.4;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ?덇굅????誘몄궗??*/
.card-meta, .card-type, .card-footer, .card-partners, .card-topbar, .card-logo, .card-vol, .card-kicker { display: none; }

/* ?€?€ ?대┰?곸긽 洹몃━??(16:9 媛€濡?移대뱶, premium ?대━?? ?€?€ */
.shorts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 20px;
}
.shorts-card {
	display: block;
	text-decoration: none;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shorts-card:hover { transform: translateY(-2px); }
.shorts-thumb {
	aspect-ratio: 16/9;
	background: #f3f4f6;
	overflow: hidden;
	position: relative;
}
.shorts-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.shorts-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
	pointer-events: none;
	transition: background 0.2s ease;
	z-index: 1;
}
.shorts-thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	background-color: rgba(0, 0, 0, 0.55);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><polygon points='8 5 19 12 8 19 8 5'/></svg>");
	background-position: center;
	background-size: 24px;
	background-repeat: no-repeat;
	border-radius: 50%;
	pointer-events: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
.shorts-card:hover .shorts-thumb::before {
	background-color: rgba(229, 9, 20, 0.92);
	transform: translate(-50%, -50%) scale(1.06);
}
.shorts-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.shorts-body {
	padding: 14px 16px 16px;
}
.shorts-date {
	font-size: 12px;
	color: #888;
	letter-spacing: 0.02em;
}
.shorts-title {
	font-size: 15px;
	font-weight: 600;
	color: #111;
	margin-top: 6px;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ?€?€ ?섏씠吏€?ㅼ씠???€?€ */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 32px;
}

.page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 4px;
	font-size: 13px;
	color: #555;
	background: #fff;
	border: 1px solid #ddd;
	transition: all 0.15s;
}

a.page-btn:hover {
	border-color: #1a1a1a;
	color: #1a1a1a;
}

.page-btn.current {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

.page-dots {
	padding: 0 4px;
	color: #999;
}

/* ?€?€ 鍮??곹깭 ?€?€ */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #999;
	font-size: 14px;
}

.empty-state .back-btn {
	display: inline-block;
	margin-top: 16px;
	color: #4a6cf7;
}

/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺
   상세 페이지
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 */

/* ?곷떒 ?ㅻ퉬 */
.detail-nav {
	margin-bottom: 20px;
}

.back-btn {
	font-size: 13px;
	color: #888;
	transition: color 0.15s;
}

.back-btn:hover {
	color: #1a1a1a;
}

/* 캠페인 헤더 */
.detail-header {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

/* 히어로 헤더 */
.detail-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #1a2744 0%, #2d4a7a 100%);
	color: #fff;
	padding: 48px 40px;
	border-radius: 20px;
	margin-bottom: 40px;
	border-bottom: none;
	isolation: isolate;
	min-height: 200px;
}

/* 배경 이미지 레이어 (thumbnail_url 있을 때) */
.detail-hero-media {
	position: absolute;
	inset: 0;
	z-index: -3;
}
.detail-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
}

/* 媛€?낆꽦 蹂댁옣 ?ㅻ쾭?덉씠 */
.detail-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(120deg,
			rgba(10, 22, 46, 0.82) 18%,
			rgba(10, 22, 46, 0.52) 56%,
			rgba(10, 22, 46, 0.72) 100%),
		radial-gradient(circle at 85% 10%,
			rgba(255, 255, 255, 0.14),
			transparent 35%);
	/* 이미지 없으면 보이지 않음 (배경 그라디언트 위에 투명 오버레이) */
}

/* ?띿뒪??肄섑뀗痢??덉씠??*/
.detail-hero-content {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.detail-hero .detail-type {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
}

.detail-title {
	font-size: 26px;
	font-weight: 800;
	color: #1a1a1a;
	line-height: 1.3;
	margin: 8px 0;
}

.detail-hero .detail-title {
	color: #fff;
	font-size: 32px;
	margin: 16px 0 10px;
	line-height: 1.3;
	text-shadow: 0 3px 20px rgba(0, 0, 0, 0.35);
}

.detail-date {
	font-size: 13px;
	color: #999;
}

.detail-hero .detail-date {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.detail-hero .detail-type {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* html_web 肄섑뀗痢??곸뿭 */
.detail-content {
	margin-bottom: 32px;
}

/* — 섹션 라벨 — */
.section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: #444;
	font-weight: 700;
	border-left: 4px solid #888;
	padding-left: 12px;
	margin: 48px 0 20px;
	letter-spacing: 0.3px;
}

.gold-label {
	color: #c9a227;
	border-left-color: #c9a227;
}

.oem-label {
	color: #137333;
	border-left-color: #137333;
}

.recommend-label {
	color: #1967d2;
	border-left-color: #1967d2;
}

/* ?€?€ 怨⑤뱶 ?뚰듃??(?몃줈 ?ㅽ깮 移대뱶) ?€?€ */
.partner-wide {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-wide:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.gold-border {
	/* 怨⑤뱶 ?곷떒 ??*/
}

/* 怨⑤뱶 ?????щ┝ + 怨⑤뱶 ?낆꽱??*/
.partner-wide-img {
	width: 100%;
	height: 240px;
	flex-shrink: 0;
	overflow: hidden;
	background: linear-gradient(160deg, #faf6ee 0%, #f5edd8 50%, #f0e6c8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 32px;
	position: relative;
}

.partner-wide-img::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to top, rgba(201, 162, 39, 0.08), transparent);
	pointer-events: none;
}

.partner-wide-img img {
	max-width: 80%;
	max-height: 190px;
	object-fit: contain;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
	transition: transform 0.4s ease;
	position: relative;
	z-index: 1;
}

.partner-wide:hover img {
	transform: scale(1.06);
}

.partner-wide-info {
	flex: 1;
	padding: 28px 32px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 3px solid #c9a227;
}

.partner-tier-label {
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: 6px;
}

.gold-text {
	color: #c9a227;
}

.partner-name {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 8px;
}

.partner-products {
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	margin-bottom: 12px;
}

.partner-link {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	transition: opacity 0.15s;
	align-self: flex-start;
}

.partner-link:hover {
	opacity: 0.85;
}

.gold-bg {
	background: #c9a227;
}

.dark-bg {
	background: #333;
}

.green-bg {
	background: #137333;
}

.blue-bg {
	background: #1967d2;
}

.partner-link.sm {
	padding: 6px 14px;
	font-size: 11px;
}

/* ?€?€ ?뚰듃??2??洹몃━??(媛€濡쒗삎 移대뱶) ?€?€ */
.partner-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 8px;
}

.partner-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #fff;
	border: none;
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ?ㅻ쾭 ?낆꽱??*/
.partner-card.silver-accent {
	border-top: 3px solid #1a1a2e;
}

/* OEM ?낆꽱??*/
.partner-card.oem-accent {
	border-top: 3px solid #137333;
}

/* 異붿쿇 ?낆꽱??*/
.partner-card.rec-accent {
	border-top: 3px solid #1967d2;
}

/* 기본 카드 이미지 — 박스 핏 */
.partner-card-img {
	width: 100%;
	height: 180px;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	flex-shrink: 0;
	background: #f0f2f5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* ?ㅻ쾭(遺€?먯옱) ??荑?洹몃젅??*/
.partner-card.silver-accent .partner-card-img {
	background: linear-gradient(160deg, #eceef2, #e4e7ed);
}

/* OEM ???쇱씠??洹몃┛ 誘쇳듃 */
.partner-card.oem-accent .partner-card-img {
	background: linear-gradient(160deg, #ecf5ee, #e2f0e5);
}

/* 추천 와이드 블록 */
.partner-card.rec-accent .partner-card-img {
	background: linear-gradient(160deg, #eaf1fb, #dfe9f8);
}

.partner-card-img img {
	max-width: 80%;
	max-height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
	transition: transform 0.4s ease;
}

.partner-card:hover img {
	transform: scale(1.06);
}

.partner-card-info {
	padding: 20px 22px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.partner-card-name {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 6px;
}

.partner-card-desc {
	font-size: 12px;
	color: #777;
	margin-bottom: 12px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ?€?€ 異붿쿇 ?쇱쿂??移대뱶 (1+2 鍮꾨?移? ?€?€ */
.partner-featured {
	display: flex;
	background: #fff;
	border: none;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin-bottom: 20px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-featured:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* 추천 피처드 — 프로페셔널 블록 */
.partner-featured-img {
	width: 42%;
	min-height: 220px;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(160deg, #eaf1fb, #d8e4f5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	position: relative;
}

.partner-featured-img img {
	max-width: 85%;
	max-height: 170px;
	object-fit: contain;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
	transition: transform 0.4s ease;
	position: relative;
	z-index: 1;
}

.partner-featured:hover img {
	transform: scale(1.06);
}

.partner-featured-info {
	flex: 1;
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 3px solid #1967d2;
}

.partner-featured-info .partner-card-name {
	font-size: 22px;
}

/* 플레이스홀더 (이미지 없는 파트너) */
.partner-placeholder {
	width: 100%;
	height: 100%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.08);
	letter-spacing: 2px;
}

.partner-placeholder.sm {
	width: 100%;
	height: 100%;
	font-size: 32px;
	margin: 0;
	border-radius: 0;
}

/* ?€?€ CTA / ?명꽣 ?€?€ */
.detail-footer {
	text-align: center;
	background: #1a2744;
	border-radius: 12px;
	padding: 24px 32px;
	margin-top: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.cta-sub {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	margin: 0;
	font-weight: 500;
}

.cta-btn {
	display: inline-block;
	background: transparent;
	color: #fff;
	padding: 8px 24px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: background 0.2s, border-color 0.2s;
}

.cta-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
}

/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺
   諛섏쓳??
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 */

@media (max-width: 600px) {
	.page-wrap {
		padding: 16px 12px 40px;
	}

	.list-title {
		font-size: 20px;
	}

	/* 히어로 헤더 모바일 */
	.detail-hero {
		padding: 32px 20px;
		min-height: 160px;
	}

	.detail-hero .detail-title {
		font-size: 24px;
	}

	.detail-hero-content {
		max-width: 100%;
	}

	/* 怨⑤뱶 ?뚰듃??紐⑤컮????.mag-partners 諛뽰뿉?쒕쭔 ?곸슜 */
	:not(.mag-partners) > .partner-wide .partner-wide-img {
		height: 200px;
		padding: 20px;
	}

	/* ?뚰듃??1??*/
	.partner-grid {
		grid-template-columns: 1fr;
	}

	:not(.mag-partners) > .partner-grid .partner-card-img {
		height: 200px;
	}

	/* 異붿쿇 ?쇱쿂???몃줈 ?꾪솚 ??.mag-partners 諛뽰뿉?쒕쭔 */
	:not(.mag-partners) > .partner-featured {
		flex-direction: column;
	}

	:not(.mag-partners) > .partner-featured .partner-featured-img {
		width: 100%;
		min-height: 200px;
	}

	:not(.mag-partners) > .partner-featured .partner-featured-info {
		border-left: none;
		border-top: 3px solid #1967d2;
	}

	/* 섹션 라벨 간격 축소 */
	.section-label {
		margin: 36px 0 16px;
		font-size: 15px;
	}

	.detail-title {
		font-size: 22px;
	}

	.detail-footer {
		flex-direction: column;
		gap: 10px;
		padding: 20px 16px;
		border-radius: 10px;
	}
}

@media (max-width: 400px) {
	.partner-card-img {
		height: 160px;
	}

	.partner-wide-img {
		height: 180px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   留ㅺ굅吏?IA ?덉씠?꾩썐 (.mag-*)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?붿옄???좏겙 */
.mag-hero,
.mag-keywords,
.mag-editorial,
.mag-rank,
.mag-guide,
.mag-partners {
	--mag-font-kicker: 11px;
	--mag-font-chip: 13px;
	--mag-font-label: 12px;
	--mag-font-body: 16px;
	--mag-font-h2: 26px;
	--mag-font-hero-sub: 18px;
	--mag-font-hero: 38px;
	--mag-space-xs: 8px;
	--mag-space-sm: 16px;
	--mag-space-md: 24px;
	--mag-space-lg: 40px;
	--mag-space-xl: 64px;
	--mag-section-gap: 56px;
	--mag-ink: #1a1a2e;
	--mag-ink-muted: #555;
	--mag-ink-light: #999;
	--mag-surface: #fff;
	--mag-surface-alt: #f5f6f8;
	--mag-border: #e8e8e8;
	--mag-accent: #1967d2;
}

/* — 히어로 (풀블리드 배경 + 좌하단 텍스트) — */
.mag-hero {
	position: relative;
	overflow: hidden;
	background: #1a1a2e;
	color: #fff;
	border-radius: 20px;
	margin-bottom: var(--mag-space-lg);
	aspect-ratio: 16 / 9;
	min-height: 280px;
	max-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;
}

.mag-hero-media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.mag-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mag-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(to top,
			rgba(0, 0, 0, 0.78) 0%,
			rgba(0, 0, 0, 0.35) 50%,
			rgba(0, 0, 0, 0.12) 100%);
}

/* ?곷떒 諛? 以묒븰 ?뺣젹 (?쒖븞 ?쇱튂) */
.mag-hero-topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 28px 0;
	gap: 4px;
}

.mag-hero-logo {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
}

.mag-hero-vol {
	font-size: 10px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 1px;
}

/* 醫뚰븯??肄섑뀗痢?*/
.mag-hero-content {
	position: relative;
	z-index: 1;
	padding: 0 clamp(16px, 3vw, 40px) clamp(22px, 3vw, 36px);
	max-width: min(980px, 100%);
}

.mag-kicker {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #d4a853;
	margin-bottom: 12px;
}

.mag-hero-title {
	font-size: clamp(22px, 2.6vw, 40px);
	font-weight: 900;
	line-height: 1.12;
	color: #fff !important;
	margin: 0 0 8px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
	word-break: keep-all;
	white-space: normal;
	letter-spacing: -0.01em;
}

/* ?쒕툕?€?댄? (硫붿씤 ?€?댄? ?꾨옒 蹂꾨룄 以? */
.mag-hero-sub {
	font-size: clamp(14px, 1.8vw, 20px);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 14px;
}

.mag-hero-subtitle {
	font-size: clamp(13px, 1.6vw, 16px);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin-bottom: 20px;
}

.mag-hero-subtitle p {
	margin: 0 0 6px;
}

/* ?쒓렇 諛곗? (吏곸궗媛곹삎) ??泥?2媛?梨꾩?, ?섎㉧吏€ ?뚮몢由?*/
.mag-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.mag-hero-tag {
	display: inline-block;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s;
}

.mag-hero-tag:nth-child(-n+2) {
	background: rgba(212, 168, 83, 0.75);
	border-color: rgba(212, 168, 83, 0.9);
	font-weight: 700;
}

.mag-hero-tag:hover {
	background: rgba(249, 115, 22, 0.6);
	border-color: #f97316;
}

/* ?덇굅??.mag-hero-meta ?④? */
.mag-hero-meta {
	display: none;
}

/* ?€?€ ?ㅼ썙??移??€?€ */
.mag-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 0 var(--mag-space-lg);
}

a.mag-chip,
.mag-chip {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 20px;
	font-size: var(--mag-font-chip);
	font-weight: 600;
	background: transparent;
	border: 1.5px solid var(--mag-ink);
	color: var(--mag-ink);
	transition: background 0.2s, color 0.2s, transform 0.15s;
	text-decoration: none;
	cursor: pointer;
}

a.mag-chip:hover {
	background: var(--mag-accent);
	border-color: var(--mag-accent);
	color: #fff;
	transform: translateY(-1px);
}

.mag-chip-filled {
	background: var(--mag-ink);
	color: #fff;
	border-color: var(--mag-ink);
}

a.mag-chip-filled:hover {
	background: var(--mag-accent);
	border-color: var(--mag-accent);
}

/* — 에디토리얼 섹션 — */
.mag-editorial {
	margin-bottom: var(--mag-section-gap);
}

.mag-editorial-border {
	border-top: 1px solid var(--mag-border);
	padding-top: var(--mag-section-gap);
}

.mag-section-label {
	display: block;
	font-size: var(--mag-font-label);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mag-accent);
	margin-bottom: 12px;
}

.mag-section-title {
	font-size: var(--mag-font-h2);
	font-weight: 800;
	line-height: 1.3;
	color: var(--mag-ink);
	margin: 0 0 20px;
}

.mag-section-body {
	font-size: var(--mag-font-body);
	line-height: 1.8;
	color: var(--mag-ink);
}

.mag-section-body p {
	margin-bottom: 14px;
}

.mag-section-body ul,
.mag-section-body ol {
	padding-left: 20px;
	margin-bottom: 14px;
}

.mag-section-body li {
	margin-bottom: 8px;
}

.mag-section-body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: 14px;
}

.mag-section-body th,
.mag-section-body td {
	border: 1px solid var(--mag-border);
	padding: 10px 14px;
	text-align: left;
}

.mag-section-body th {
	background: var(--mag-surface-alt);
	font-weight: 600;
}

.mag-section-body h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 28px 0 12px;
	color: var(--mag-ink);
}

.mag-section-body h4 {
	font-size: 17px;
	font-weight: 700;
	margin: 24px 0 10px;
	color: var(--mag-ink);
}

.mag-section-body strong {
	color: var(--mag-ink);
}

.mag-section-body blockquote {
	border-left: 3px solid var(--mag-accent);
	padding: 12px 20px;
	margin: 20px 0;
	background: var(--mag-surface-alt);
	border-radius: 0 8px 8px 0;
	color: var(--mag-ink-muted);
	font-style: italic;
}

/* ?€?€ ??궧 由ъ뒪???€?€ */
.mag-rank {
	margin-bottom: var(--mag-section-gap);
}

.mag-rank-period {
	font-size: 13px;
	color: var(--mag-ink-light);
	margin: -12px 0 24px;
}

/* 援ъ“???뚮뜑 (metadata.items) */
.mag-rank-list {
	margin-top: 8px;
}

.mag-rank-item {
	display: flex;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--mag-border);
	gap: 12px;
}

.mag-rank-item:last-child {
	border-bottom: none;
}

.mag-rank-num {
	font-size: 28px;
	font-weight: 900;
	color: var(--mag-ink-light);
	width: 48px;
	flex-shrink: 0;
	text-align: center;
}

.mag-rank-top .mag-rank-num {
	color: var(--mag-accent);
}

.mag-rank-brand {
	font-size: 15px;
	font-weight: 700;
	color: var(--mag-ink);
	white-space: nowrap;
}

.mag-rank-product {
	font-size: 14px;
	color: var(--mag-ink-muted);
	flex: 1;
	min-width: 0;
}

.mag-rank-badge {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 12px;
	background: var(--mag-surface-alt);
	color: var(--mag-ink-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ?대갚 ?뚮뜑 (body_html <ol>) */
.mag-rank-body ol {
	list-style: none;
	counter-reset: rank;
	padding: 0;
}

.mag-rank-body ol li {
	counter-increment: rank;
	display: flex;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--mag-border);
	font-size: 15px;
	gap: 12px;
}

.mag-rank-body ol li::before {
	content: counter(rank);
	font-size: 28px;
	font-weight: 900;
	color: var(--mag-ink-light);
	width: 48px;
	flex-shrink: 0;
	text-align: center;
}

.mag-rank-body ol li:nth-child(-n+3)::before {
	color: var(--mag-accent);
}

/* ?€?€ 媛€?대뱶 ?€?€ */
.mag-guide {
	margin-bottom: var(--mag-section-gap);
}

/* ?€?€ ?뚰듃???곸뿭 ?€?€ */
.mag-partners {
	border-top: 1px solid var(--mag-border, #e8e8e8);
	padding-top: 12px;
	margin-top: 4px;
}

/* 섹션 헤더 */
.mag-partners .section-label {
	border-left: none;
	padding-left: 0;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: #555;
	font-weight: 700;
	margin: 40px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e8e8e8;
	text-transform: none;
}
.mag-partners .gold-label,
.mag-partners .oem-label {
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-weight: 600;
}
.mag-partners .gold-label { color: #b8941f; border-bottom-color: rgba(201, 162, 39, 0.3); }
.mag-partners .oem-label { color: #137333; border-bottom-color: rgba(19, 115, 51, 0.2); }
.mag-partners .recommend-label { color: #1967d2; border-bottom-color: rgba(25, 103, 210, 0.2); }

/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
   풀블리드 파트너 카드 (.pcard)
   ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */
.pcard-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.2vw, 16px);
	margin-bottom: 8px;
}
.pcard-row--gold {
	grid-template-columns: 1fr;
}

.pcard {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	min-height: 210px;
	text-decoration: none;
	color: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.pcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* 배경 이미지 */
.pcard__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.4s ease;
}
.pcard:hover .pcard__bg {
	transform: scale(1.05);
}

/* ?ㅻ쾭?덉씠 */
.pcard__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pcard.has-img .pcard__overlay {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.80) 0%,
		rgba(0, 0, 0, 0.40) 45%,
		rgba(0, 0, 0, 0.10) 100%
	);
}

/* 이미지 없을 때 — 티어별 브랜드 그라디언트 */
.pcard:not(.has-img) { background: linear-gradient(135deg, #2d3748, #4a5568); }
.pcard--gold:not(.has-img) { background: linear-gradient(135deg, #78591a, #c9a227); }
.pcard--silver:not(.has-img) { background: linear-gradient(135deg, #1a2744, #3b5998); }
.pcard--oem:not(.has-img) { background: linear-gradient(135deg, #0d3320, #137333); }
.pcard--recommend:not(.has-img) { background: linear-gradient(135deg, #1a3a6b, #1967d2); }
.pcard--info { background: linear-gradient(135deg, #1e293b, #334155); }

/* 諛붾뵒 */
.pcard__body {
	position: relative;
	z-index: 2;
	padding: 24px 20px 20px;
}

.pcard__tier {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 600;
	color: #c9a227;
	margin-bottom: 6px;
}

.pcard__name {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.pcard__cta {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
	transition: color 0.2s, border-color 0.2s;
}
.pcard:hover .pcard__cta {
	color: #fff;
	border-bottom-color: #fff;
}

/* 移대뱶 ?쒓렇: 諛앹? ??*/
.pcard .partner-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 10px;
}
.pcard .partner-tag {
	color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.12);
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 3px;
}

/* 怨⑤뱶: ?볤쾶 */
.pcard-row--gold .pcard {
	min-height: 280px;
}
.pcard-row--gold .pcard__name {
	font-size: 24px;
}
.pcard-row--gold .pcard__body {
	padding: 32px 28px 28px;
}
.pcard-row--gold .pcard .partner-tag {
	font-size: 11px;
	padding: 3px 10px;
}

/* ?쒗뭹 ?쒓렇 移?(湲곗〈 ?덉씠?꾩썐?????명솚) */
.partner-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 14px;
}
.partner-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.10);
	font-size: 11px;
	color: #666;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.2px;
}

/* ?€?€ 留ㅺ굅吏?諛섏쓳???€?€ */
@media (max-width: 600px) {
	.mag-hero {
		aspect-ratio: auto;
		min-height: auto;
		border-radius: 16px;
		padding-top: 60px;
	}

	.mag-hero-topbar {
		padding: 14px 18px;
	}

	.mag-hero-logo {
		font-size: 11px;
	}

	.mag-hero-content {
		padding: 0 20px 24px;
	}

	.mag-hero-title {
		font-size: clamp(24px, 7vw, 32px);
		white-space: normal;
	}

	.mag-rank-item {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.mag-rank-brand,
	.mag-rank-badge {
		white-space: normal;
	}

	.mag-hero-tag {
		padding: 4px 10px;
		font-size: 11px;
	}

	.mag-keywords {
		gap: 8px;
	}

	.mag-chip {
		padding: 6px 14px;
		font-size: 12px;
	}

	.mag-section-title {
		font-size: 22px;
	}

	.mag-editorial,
	.mag-rank,
	.mag-guide {
		--mag-section-gap: 40px;
	}

	.mag-rank-num {
		font-size: 22px;
		width: 36px;
	}

	.mag-rank-item {
		gap: 8px;
	}

	.mag-rank-product {
		font-size: 13px;
	}

	.mag-rank-badge {
		font-size: 10px;
		padding: 2px 8px;
	}

	/* ?€?€ ?뚯씠釉?紐⑤컮??媛€濡??ㅽ겕濡??€?€ */
	.detail-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		font-size: 13px;
	}
	.detail-content table th,
	.detail-content table td {
		white-space: normal;
		min-width: 100px;
		padding: 10px 12px;
	}

	/* — .pcard 풀블리드 카드 모바일 — */
	.pcard-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.pcard-row--gold {
		grid-template-columns: 1fr;
	}
	.pcard {
		min-height: 150px;
		border-radius: 10px;
	}
	.pcard-row--gold .pcard {
		min-height: 200px;
	}
	.pcard__body {
		padding: 10px 8px 8px;
	}
	.pcard__name {
		font-size: 12px;
		line-height: 1.25;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	.pcard-row--gold .pcard__name {
		font-size: 20px;
	}
	.pcard__tier {
		font-size: 10px;
		padding: 3px 10px;
	}
	.pcard__cta {
		font-size: 12px;
	}
	.pcard .partner-tag {
		padding: 2px 7px;
		font-size: 10px;
	}
	.pcard .partner-tags {
		gap: 4px;
		margin-bottom: 8px;
	}

	/* — 섹션 간격 축소 — */
	.mag-partners {
		padding-top: 16px;
	}
	.mag-partners .section-label {
		margin: 16px 0 10px;
		font-size: 12px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   ?쒓렇 ?꾩뭅?대툕 ?섏씠吏€ (/pages/tag/<name>)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?€?€ ?쒓렇 ?덉뼱濡??€?€ */
.tag-hero {
	background: linear-gradient(135deg, #1a2744 0%, #2d4a7a 60%, #3d5a8a 100%);
	border-radius: 20px;
	padding: 48px 44px;
	margin-bottom: 32px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.tag-hero::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -10%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
	border-radius: 50%;
}

.tag-hero-hash {
	font-size: 64px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.12);
	position: absolute;
	top: 16px;
	right: 36px;
	line-height: 1;
}

.tag-hero-title {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.2;
}

.tag-hero-count {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* — 관련 태그 (이전 링크 클러스터) — */
.tag-related {
	margin-bottom: 32px;
	padding: 20px 0;
	border-bottom: 1px solid #e8e8e8;
}

.tag-related-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #999;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.tag-related-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-related-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 500;
	color: #444;
	background: #f5f6f8;
	border: 1px solid #e8e8e8;
	text-decoration: none;
	transition: all 0.2s;
}

.tag-related-chip:hover {
	background: #1967d2;
	color: #fff;
	border-color: #1967d2;
	transform: translateY(-1px);
}

.tag-chip-count {
	font-size: 11px;
	color: #aaa;
	font-weight: 400;
}

.tag-related-chip:hover .tag-chip-count {
	color: rgba(255, 255, 255, 0.7);
}

/* ?€?€ SEO ?띿뒪??(?щ·???몃뜳?? ?€?€ */
.tag-seo-desc {
	margin-top: 40px;
	padding: 24px 0;
	border-top: 1px solid #e8e8e8;
	font-size: 13px;
	line-height: 1.8;
	color: #888;
}

.tag-seo-desc strong {
	color: #555;
}

/* ?€?€ ?쒓렇 ?꾩뭅?대툕 諛섏쓳???€?€ */
@media (max-width: 600px) {
	.tag-hero {
		padding: 32px 24px;
		border-radius: 16px;
	}

	.tag-hero-title {
		font-size: 24px;
	}

	.tag-hero-hash {
		font-size: 48px;
		top: 12px;
		right: 20px;
	}

	.tag-related-chips {
		gap: 6px;
	}

	.tag-related-chip {
		padding: 5px 12px;
		font-size: 12px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   스타일 팩 (Style Pack) — 매거진 IA 오버라이드
   ?⑦꽩(援ъ“)怨??낅┰?곸쑝濡?鍮꾩＜??臾대뱶瑜??곸슜
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?€?€ 怨듯넻: ???좏겙 湲곕컲 ?ㅻ쾭?쇱씠???€?€ */
/* 풀블리드 히어로에 흰 배경 무시 — 배경 이미지가 있음 */
.sp-clean .mag-hero,
.sp-bold .mag-hero,
.sp-clinical .mag-hero,
.sp-catalog .mag-hero {
	background: #1a1a2e;
}

.sp-clean .mag-hero-title,
.sp-bold .mag-hero-title,
.sp-clinical .mag-hero-title,
.sp-catalog .mag-hero-title {
	font-size: var(--sp-hero-size);
	color: var(--sp-hero-text);
}

.sp-clean .mag-hero-subtitle,
.sp-bold .mag-hero-subtitle,
.sp-clinical .mag-hero-subtitle,
.sp-catalog .mag-hero-subtitle {
	color: var(--sp-hero-text);
	opacity: 0.8;
}

.sp-clean .mag-hero-meta,
.sp-bold .mag-hero-meta,
.sp-clinical .mag-hero-meta,
.sp-catalog .mag-hero-meta {
	color: var(--sp-hero-text);
	opacity: 0.5;
}

.sp-clean .mag-kicker,
.sp-bold .mag-kicker,
.sp-clinical .mag-kicker,
.sp-catalog .mag-kicker {
	border-color: var(--sp-hero-accent);
	color: var(--sp-hero-text);
	opacity: 0.7;
}

/* 에디토리얼 섹션 */
.sp-clean .mag-section-title,
.sp-bold .mag-section-title,
.sp-clinical .mag-section-title,
.sp-catalog .mag-section-title {
	font-size: var(--sp-heading-size);
	font-weight: var(--sp-heading-weight);
	letter-spacing: var(--sp-letter-spacing);
}

.sp-clean .mag-section-body,
.sp-bold .mag-section-body,
.sp-clinical .mag-section-body,
.sp-catalog .mag-section-body {
	font-size: var(--sp-body-size);
	line-height: var(--sp-line-height);
}

.sp-clean .mag-editorial,
.sp-bold .mag-editorial,
.sp-clinical .mag-editorial,
.sp-catalog .mag-editorial {
	margin-bottom: var(--sp-section-gap);
}

/* 섹션 라벨 */
.sp-clean .mag-section-label,
.sp-bold .mag-section-label,
.sp-clinical .mag-section-label,
.sp-catalog .mag-section-label {
	color: var(--sp-accent);
}

/* ?ㅼ썙??移?*/
.sp-clean .mag-chip-filled,
.sp-bold .mag-chip-filled,
.sp-clinical .mag-chip-filled,
.sp-catalog .mag-chip-filled {
	background: var(--sp-accent);
	border-color: var(--sp-accent);
}

.sp-clean .mag-chip:hover,
.sp-bold .mag-chip:hover,
.sp-clinical .mag-chip:hover,
.sp-catalog .mag-chip:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

/* CTA ?명꽣 */
.sp-clean .detail-footer,
.sp-bold .detail-footer,
.sp-clinical .detail-footer,
.sp-catalog .detail-footer {
	background: var(--sp-hero-bg);
}

.sp-clean .cta-btn,
.sp-bold .cta-btn,
.sp-clinical .cta-btn,
.sp-catalog .cta-btn {
	border-color: var(--sp-accent);
	color: var(--sp-accent-light, #fff);
}


/* ?€?€ Clean ???꾩슜 ?€?€ */
.sp-clean .mag-hero {
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.sp-clean .mag-hero.has-cover .mag-hero-overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
}
.sp-clean .mag-editorial-border {
	border-top: 1px solid #e2e8f0;
}
.sp-clean .mag-section-label {
	font-weight: 500;
}
.sp-clean .mag-rank-item {
	border-color: #e2e8f0;
}
.sp-clean .mag-rank-top .mag-rank-num {
	background: #3b82f6;
}

/* ?€?€ Bold ???꾩슜 ?€?€ */
.sp-bold .mag-hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.sp-bold .mag-hero.has-cover .mag-hero-overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
}
.sp-bold .mag-hero-title {
	font-weight: 900;
	text-transform: none;
}
.sp-bold .mag-editorial-border {
	border-top: 2px solid #1e293b;
}
.sp-bold .mag-section-title {
	border-left: 4px solid #f59e0b;
	padding-left: 16px;
}
.sp-bold .mag-section-label {
	background: #fef3c7;
	color: #92400e;
	padding: 4px 12px;
	border-radius: 4px;
	font-weight: 700;
}
.sp-bold .mag-rank-top .mag-rank-num {
	background: #f59e0b;
	color: #1e293b;
}
.sp-bold .mag-chip-filled {
	color: #1e293b;
}

/* ?€?€ Clinical ???꾩슜 ?€?€ */
.sp-clinical .mag-hero {
	background: #f1f5f9;
	border-bottom: 1px solid #cbd5e1;
}
.sp-clinical .mag-hero.has-cover .mag-hero-overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
}
.sp-clinical .mag-hero-title {
	font-weight: 600;
	letter-spacing: 0.01em;
}
.sp-clinical .mag-editorial {
	background: var(--sp-block-bg);
	padding: var(--sp-block-padding);
	border-radius: var(--sp-block-radius);
	box-shadow: var(--sp-block-shadow);
}
.sp-clinical .mag-editorial-border {
	border-top: 1px solid #cbd5e1;
	margin-top: 8px;
	padding-top: 8px;
}
.sp-clinical .mag-section-label {
	font-family: 'Courier New', monospace;
	letter-spacing: 1.5px;
}
.sp-clinical .mag-rank-item {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #f8fafc;
}
.sp-clinical .mag-rank-top .mag-rank-num {
	background: #0ea5e9;
}
.sp-clinical .mag-section-body table th {
	background: #e0f2fe;
	color: #0c4a6e;
}

/* ?€?€ Catalog ???꾩슜 ?€?€ */
.sp-catalog .mag-hero {
	background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}
.sp-catalog .mag-hero.has-cover .mag-hero-overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
}
.sp-catalog .mag-editorial {
	background: var(--sp-block-bg);
	padding: var(--sp-block-padding);
	border-radius: var(--sp-block-radius);
	box-shadow: var(--sp-block-shadow);
}
.sp-catalog .mag-editorial-border {
	border-top: 1px solid #e5e7eb;
}
.sp-catalog .mag-section-label {
	color: #7c3aed;
	border: 1px solid #7c3aed;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 10px;
}
.sp-catalog .mag-rank-item {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fafafa;
}
.sp-catalog .mag-rank-top .mag-rank-num {
	background: #7c3aed;
}
.sp-catalog .mag-chip-filled {
	background: #7c3aed;
	border-color: #7c3aed;
}
.sp-catalog .mag-chip:hover {
	border-color: #7c3aed;
	color: #7c3aed;
}
.sp-catalog .detail-footer {
	background: linear-gradient(135deg, #1e1b4b, #312e81);
}

/* — 스타일팩 반응형 — */
@media (max-width: 600px) {
	.sp-bold .mag-hero-title { font-size: 28px; }
	.sp-clean .mag-hero-title { font-size: 26px; }
	.sp-clinical .mag-hero-title { font-size: 24px; }
	.sp-catalog .mag-hero-title { font-size: 25px; }

	.sp-clinical .mag-editorial,
	.sp-catalog .mag-editorial {
		padding: 16px;
		margin-left: -8px;
		margin-right: -8px;
	}

	.sp-bold .mag-section-title {
		padding-left: 12px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   블록 레벨 Variant (hero/rank/editorial/card)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?먥븧??hero--split: 醫뚯슦 遺꾪븷 ?먥븧??*/
.hero--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 320px;
	border-radius: 20px;
	overflow: hidden;
}
.hero--split .mag-hero-media {
	position: relative;
	inset: auto;
	width: 100%;
	height: 100%;
}
.hero--split .mag-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero--split .mag-hero-overlay {
	display: none;
}
.hero--split .mag-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 36px;
	background: var(--sp-hero-bg, #0f172a);
}
.hero--split .mag-hero-title {
	color: var(--sp-hero-text, #fff);
}
.hero--split .mag-hero-subtitle {
	color: var(--sp-muted, rgba(255,255,255,0.7));
}

/* ?먥븧??hero--minimal: ?띿뒪??以묒떖 ?먥븧??*/
.hero--minimal {
	min-height: auto;
	background: var(--sp-hero-bg, #f1f5f9);
	padding: 56px 40px;
}
.hero--minimal .mag-hero-media {
	display: none;
}
.hero--minimal .mag-hero-overlay {
	display: none;
}
.hero--minimal .mag-hero-title {
	font-size: calc(var(--sp-hero-size, 32px) * 1.15);
	color: var(--sp-hero-text, #334155);
}
.hero--minimal .mag-hero-subtitle {
	color: var(--sp-muted, #64748b);
}
.hero--minimal .mag-kicker {
	color: var(--sp-hero-accent, #0ea5e9);
	border-color: var(--sp-hero-accent, #0ea5e9);
}

/* ?먥븧??rank--magazine: ?≪???(1??媛뺤“) ?먥븧??*/
.rank--magazine .mag-rank-item.mag-rank-top:first-child {
	padding: 24px 0;
	border-bottom: 2px solid var(--sp-accent, var(--mag-accent));
	margin-bottom: 8px;
}
.rank--magazine .mag-rank-item.mag-rank-top:first-child .mag-rank-num {
	font-size: 42px;
	width: 56px;
	color: var(--sp-accent, var(--mag-accent));
}
.rank--magazine .mag-rank-item.mag-rank-top:first-child .mag-rank-brand {
	font-size: 18px;
}
.rank--magazine .mag-rank-item.mag-rank-top:first-child .mag-rank-product {
	font-size: 15px;
}
.rank--magazine .mag-rank-item:not(.mag-rank-top) {
	padding: 10px 0;
}
.rank--magazine .mag-rank-item:not(.mag-rank-top) .mag-rank-num {
	font-size: 16px;
	width: 32px;
	opacity: 0.5;
}

/* ?먥븧??editorial--boxed: 移대뱶???먥븧??*/
.editorial--boxed {
	background: var(--sp-block-bg, #f8fafc);
	padding: var(--sp-block-padding, 24px);
	border-radius: var(--sp-block-radius, 8px);
	box-shadow: var(--sp-block-shadow, 0 1px 2px rgba(0,0,0,0.04));
}
.editorial--boxed.mag-editorial-border {
	border-top: none;
	margin-top: 16px;
}

/* ?먥븧??card--outline: ?뚮몢由?移대뱶 ?먥븧??*/
.card--outline .pcard {
	background: #fff;
	border: 1.5px solid var(--sp-section-border, #e5e7eb);
}
.card--outline .pcard__bg {
	width: 100%;
	height: 120px;
	position: relative;
	inset: auto;
}
.card--outline .pcard__overlay {
	display: none;
}
.card--outline .pcard__body {
	position: relative;
	color: var(--mag-ink, #1a1a2e);
	padding: 16px 20px;
}
.card--outline .pcard__name {
	color: var(--mag-ink, #1a1a2e);
}
.card--outline .pcard__cta {
	color: var(--sp-accent, var(--mag-accent));
	border-color: var(--sp-accent, var(--mag-accent));
}
.card--outline .pcard .partner-tag {
	color: var(--mag-ink-muted, #555);
	border-color: var(--mag-border, #e8e8e8);
	background: var(--mag-surface-alt, #f5f6f8);
}
.card--outline .pcard:not(.has-img) {
	background: var(--mag-surface-alt, #f5f6f8);
}
.card--outline .pcard-row--gold .pcard__name {
	color: var(--mag-ink, #1a1a2e);
}

/* ?먥븧??Variant 紐⑤컮??諛섏쓳???먥븧??*/
@media (max-width: 600px) {
	.hero--split {
		grid-template-columns: 1fr;
	}
	.hero--split .mag-hero-media {
		height: 200px;
	}
	.hero--split .mag-hero-content {
		padding: 32px 24px;
	}
	.hero--minimal {
		padding: 40px 24px;
	}
	.editorial--boxed {
		padding: 16px;
		margin-left: -8px;
		margin-right: -8px;
		border-radius: 0;
	}
	.rank--magazine .mag-rank-item.mag-rank-top:first-child .mag-rank-num {
		font-size: 32px;
		width: 44px;
	}
	.card--outline .pcard__bg {
		height: 100px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   Layout Variant ?대옒??(newsletter--{pack})
   ???꾩껜 ?섏씠吏€ 臾대뱶瑜?寃곗젙?섎뒗 理쒖긽??蹂€??
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?먥븧??newsletter--bold: 媛뺥븳 ?€鍮? ?꾪뙥???먥븧??*/
.newsletter--bold .mag-section-title {
	font-weight: 900;
	letter-spacing: -0.02em;
}
.newsletter--bold .mag-editorial-border {
	border-top-width: 2px;
	border-top-color: #1e293b;
}
.newsletter--bold .mag-section-label {
	text-transform: uppercase;
	letter-spacing: 2px;
}
.newsletter--bold .pcard__name {
	font-weight: 900;
	letter-spacing: -0.01em;
}
.newsletter--bold .detail-footer {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* ?먥븧??newsletter--clean: 源붾걫???щ갚, 媛€?낆꽦 ?먥븧??*/
.newsletter--clean .mag-section-title {
	font-weight: 700;
	letter-spacing: 0;
}
.newsletter--clean .mag-editorial {
	--mag-section-gap: 48px;
}
.newsletter--clean .mag-editorial-border {
	border-top-color: #e2e8f0;
}
.newsletter--clean .pcard {
	border-radius: 16px;
}
.newsletter--clean .detail-footer {
	background: #1a2744;
	border-radius: 14px;
}

/* ?먥븧??newsletter--clinical: 誘몃땲硫€, ?곗씠??移쒗솕 ?먥븧??*/
.newsletter--clinical .mag-section-title {
	font-weight: 600;
	letter-spacing: 0.01em;
}
.newsletter--clinical .mag-section-label {
	font-family: 'Courier New', 'Noto Sans KR', monospace;
	letter-spacing: 1.5px;
	font-size: 11px;
}
.newsletter--clinical .mag-editorial {
	border-left: 2px solid var(--sp-accent, #0ea5e9);
	padding-left: 20px;
}
.newsletter--clinical .mag-rank-item {
	border-radius: 6px;
	background: #f8fafc;
	padding: 14px 16px;
	margin-bottom: 6px;
}
.newsletter--clinical .pcard {
	border-radius: 10px;
}
.newsletter--clinical .detail-footer {
	background: #334155;
	border-radius: 10px;
}

/* ?먥븧??newsletter--catalog: ?쒗뭹 諛€?? 洹몃━???먥븧??*/
.newsletter--catalog .mag-section-title {
	font-weight: 700;
	border-bottom: 2px solid var(--sp-accent, #7c3aed);
	padding-bottom: 8px;
}
.newsletter--catalog .mag-editorial {
	--mag-section-gap: 32px;
}
.newsletter--catalog .mag-section-label {
	border: 1px solid var(--sp-accent, #7c3aed);
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 10px;
	display: inline-block;
}
.newsletter--catalog .pcard {
	border-radius: 10px;
}
.newsletter--catalog .pcard-row {
	gap: 10px;
}
.newsletter--catalog .detail-footer {
	background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
	border-radius: 10px;
}

/* ?먥븧??Layout Variant 紐⑤컮???먥븧??*/
@media (max-width: 600px) {
	.newsletter--clinical .mag-editorial {
		padding-left: 14px;
		border-left-width: 2px;
	}
	.newsletter--catalog .mag-section-title {
		padding-bottom: 6px;
	}
}


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   ?낆껜?뚭컻 (/pages/intro/)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* ?€?€ ?덉뼱濡??€?€ */
.intro-hero {
	background: linear-gradient(135deg, #1a2744 0%, #2d4a7a 60%, #3d5a8a 100%);
	border-radius: 20px;
	padding: 48px 40px 40px;
	margin-bottom: 24px;
	color: #fff;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.intro-hero-deco {
	position: absolute;
	top: -20px;
	right: 20px;
	font-size: 120px;
	font-weight: 900;
	color: rgba(255,255,255,0.04);
	line-height: 1;
}
.intro-hero-title {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.3;
}
.intro-hero-sub {
	font-size: 14px;
	color: rgba(255,255,255,0.6);
	margin: 0 0 24px;
}

/* ?€?€ 寃€???€?€ */
.intro-search {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
	gap: 8px;
}
.intro-search-input {
	flex: 1;
	padding: 10px 16px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	background: rgba(255,255,255,0.15);
	color: #fff;
	outline: none;
}
.intro-search-input::placeholder { color: rgba(255,255,255,0.5); }
.intro-search-input:focus { background: rgba(255,255,255,0.25); }
.intro-search-btn {
	padding: 10px 20px;
	background: #fff;
	color: #1a2744;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.intro-search-btn:hover { background: #e8ecf2; }

/* ?€?€ ?꾪꽣 移??€?€ */
.intro-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e8e8e8;
}
.intro-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 500;
	color: #444;
	background: #f5f6f8;
	border: 1px solid #e8e8e8;
	text-decoration: none;
	transition: all 0.2s;
}
.intro-filter-chip:hover {
	border-color: #1a2744;
	color: #1a2744;
}
.intro-filter-chip.active {
	background: #1a2744;
	color: #fff;
	border-color: #1a2744;
}
.intro-filter-chip .chip-count {
	font-size: 11px;
	opacity: 0.7;
}

/* ?€?€ 寃곌낵 ?뺣낫 ?€?€ */
.intro-result-info {
	font-size: 13px;
	color: #666;
	margin-bottom: 16px;
}
.intro-clear-filter {
	color: #1967d2;
	text-decoration: none;
	margin-left: 8px;
}
.intro-clear-filter:hover { text-decoration: underline; }

/* ?€?€ 移대뱶 洹몃━???€?€ */
.intro-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}
.intro-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
}
.intro-card:hover {
	border-color: #1a2744;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 카드 이미지 */
.intro-card-img {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f8f8f8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.intro-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.intro-card-placeholder {
	font-size: 48px;
	font-weight: 900;
	color: #ddd;
	text-transform: uppercase;
}
.intro-card-placeholder.small {
	font-size: 28px;
}

/* 移대뱶 諛붾뵒 */
.intro-card-body {
	padding: 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.intro-card-name {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 4px;
	line-height: 1.3;
}
.intro-card-products {
	font-size: 11px;
	color: #888;
	margin: 0 0 8px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.intro-card-badge {
	display: inline-block;
	margin-top: auto;
	padding: 2px 8px;
	background: #eff6ff;
	color: #1967d2;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	width: fit-content;
}

/* ?€?€ ?섏씠吏€?ㅼ씠???€?€ */
.intro-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 32px 0;
}
.intro-page-btn {
	padding: 8px 16px;
	font-size: 13px;
	color: #444;
	text-decoration: none;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
}
.intro-page-btn:hover { border-color: #1a2744; color: #1a2744; }
.intro-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 13px;
	color: #444;
	text-decoration: none;
	border-radius: 8px;
}
.intro-page-num:hover { background: #f5f6f8; }
.intro-page-num.active {
	background: #1a2744;
	color: #fff;
	font-weight: 700;
}
.intro-page-ellipsis { color: #bbb; padding: 0 4px; }

/* ?€?€ SEO ?띿뒪???€?€ */
.intro-seo {
	margin-top: 40px;
	padding: 24px 0;
	border-top: 1px solid #e8e8e8;
	font-size: 13px;
	line-height: 1.8;
	color: #888;
}
.intro-seo strong { color: #555; }


/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??
   업체소개 상세 (/pages/intro/<mb_id>)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺??*/

/* — 프로필 헤더 — */
.intro-profile {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding: 32px 0;
	border-bottom: 1px solid #e8e8e8;
	margin-bottom: 32px;
}
.intro-profile-img {
	width: 140px;
	height: 140px;
	border-radius: 16px;
	overflow: hidden;
	background: #f8f8f8;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.intro-profile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.intro-profile-placeholder {
	font-size: 56px;
	font-weight: 900;
	color: #ddd;
}
.intro-profile-info {
	flex: 1;
}
.intro-profile-name {
	font-size: 26px;
	font-weight: 800;
	color: #1a1a2e;
	margin: 0 0 12px;
	line-height: 1.3;
}
.intro-profile-products {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}
.intro-product-tag {
	display: inline-block;
	padding: 4px 12px;
	background: #f0f4ff;
	color: #1967d2;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}
.intro-profile-link,
.intro-profile-freecos {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	margin-right: 8px;
	margin-bottom: 8px;
}
.intro-profile-link {
	background: #1a2744;
	color: #fff;
}
.intro-profile-link:hover { background: #2a3f6e; }
.intro-profile-freecos {
	background: #f5f6f8;
	color: #444;
	border: 1px solid #e8e8e8;
}
.intro-profile-freecos:hover { border-color: #1a2744; color: #1a2744; }

/* — 섹션 — */
.intro-section {
	margin-bottom: 40px;
}
.intro-section-title {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 16px;
	padding-left: 12px;
	border-left: 3px solid #1967d2;
}

/* ?€?€ 李몄뿬 罹좏럹???€?€ */
.intro-campaigns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.intro-campaign-card {
	display: block;
	padding: 14px 16px;
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
}
.intro-campaign-card:hover {
	border-color: #1967d2;
	background: #f8faff;
}
.intro-campaign-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 4px;
}
.intro-campaign-date {
	font-size: 12px;
	color: #888;
}
.intro-campaign-tier {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	border-radius: 4px;
}
.tier-gold { background: #fef3c7; color: #92400e; }
.tier-silver { background: #f1f5f9; color: #475569; }
.tier-oem { background: #d1fae5; color: #065f46; }
.tier-recommend { background: #dbeafe; color: #1e40af; }
.intro-campaign-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
	margin: 0;
	line-height: 1.4;
}

/* ?€?€ 愿€???낆껜 ?€?€ */
.intro-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.intro-related-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
}
.intro-related-card:hover {
	border-color: #1a2744;
	transform: translateY(-1px);
}
.intro-related-img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f0f0;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.intro-related-img img { width: 100%; height: 100%; object-fit: cover; }
.intro-related-name {
	font-size: 13px;
	font-weight: 600;
	color: #1a1a2e;
	margin-bottom: 4px;
}
.intro-related-products {
	font-size: 11px;
	color: #888;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ?€?€ ?낆껜?뚭컻 諛섏쓳???€?€ */
@media (max-width: 768px) {
	.intro-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
	.intro-hero {
		padding: 36px 24px 32px;
		border-radius: 16px;
	}
	.intro-hero-title { font-size: 24px; }
	.intro-profile {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.intro-profile-img { width: 100px; height: 100px; }
	.intro-profile-name { font-size: 22px; }
	.intro-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.intro-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.intro-card-name { font-size: 13px; }
	.intro-card-body { padding: 10px; }
	.intro-hero {
		padding: 28px 16px 24px;
	}
	.intro-hero-title { font-size: 20px; }
	.intro-search { flex-direction: column; }
	.intro-filters { gap: 6px; }
	.intro-filter-chip { font-size: 12px; padding: 5px 10px; }
	.intro-related-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ================================================================ */
/* community-tone overrides  (iframe ?꾩슜, freecos 而ㅻ??덊떚 ??      */
/* 遺€紐?freecos.net) CSS ?섏〈 X ???먯껜 ?꾧껐                         */
/* 2026-04-24 appended                                              */
/* ================================================================ */

body.cto, body {
	background: #ffffff;
	color: #1f2937;
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
	             "Malgun Gothic", "留묒? 怨좊뵓", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.page-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 16px 40px;
	box-sizing: border-box;
}

/* — 리스트 헤더 — */
.list-header {
	display: flex; justify-content: space-between; align-items: flex-end;
	border-bottom: 1px solid #e5e7eb; padding-bottom: 10px; margin-bottom: 14px;
}
.list-title { font-size: 22px; font-weight: 700; margin: 0; color: #111827; letter-spacing: -0.01em; }
.list-sub   { font-size: 13px; color: #6b7280; margin: 4px 0 0; }
.list-count { font-size: 13px; color: #6b7280; }

/* ?€?€ pill ?꾪꽣 ?€?€ */
.pill-filter { display: flex; gap: 6px; margin: 10px 0 16px; flex-wrap: wrap; }
.pill {
	padding: 6px 14px; border-radius: 999px; font-size: 13px;
	color: #4b5563; background: #f3f4f6; text-decoration: none;
	transition: all .15s ease;
}
.pill:hover  { background: #e5e7eb; }
.pill.active { background: #111827; color: #fff; }

/* ?€?€ 移대뱶 洹몃━???€?€ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.card {
	position: relative; display: block; aspect-ratio: 4/3;
	border-radius: 12px; overflow: hidden; text-decoration: none;
	background: #f3f4f6;
	transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.card-thumb, .card-thumb-placeholder { position: absolute; inset: 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb-placeholder { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
.card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72) 100%); }
.card-body { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.card-date { font-size: 11px; opacity: .85; letter-spacing: .02em; }
.card-title {
	font-size: 15px; font-weight: 700; margin: 4px 0 2px; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-summary {
	font-size: 12px; opacity: .9; margin: 0; line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ?€?€ ?섏씠吏€?ㅼ씠???€?€ */
.pagination { display: flex; justify-content: center; gap: 6px; margin: 28px 0 8px; flex-wrap: wrap; }
.pagination a, .pagination span {
	padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
	color: #4b5563; font-size: 13px; text-decoration: none;
	min-width: 32px; text-align: center;
}
.pagination a:hover { background: #f9fafb; }
.pagination .current { background: #111827; color: #fff; border-color: #111827; }

/* — 상세 공통 — */
.detail-nav { margin-bottom: 14px; }
.back-btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
	color: #4b5563; text-decoration: none; font-size: 13px;
}
.back-btn:hover { background: #f9fafb; color: #111827; }

/* — 본문 폭/여백/이미지/표 — */
.page-wrap .mag-section,
.page-wrap .newsletter-content,
.page-wrap article { max-width: 820px; margin: 0 auto; line-height: 1.7; color: #1f2937; }
.page-wrap img { max-width: 100%; height: auto; border-radius: 6px; }
.page-wrap table {
	width: 100%; max-width: 100%; border-collapse: collapse;
	margin: 16px 0; font-size: 14px; table-layout: auto;
}
.page-wrap table th, .page-wrap table td {
	border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; vertical-align: top;
}
.page-wrap table th { background: #f9fafb; font-weight: 600; }

/* ?€?€ 諛섏쓳??768px ?€?€ */
@media (max-width: 768px) {
	.page-wrap { padding: 12px 12px 32px; }
	.list-header { flex-direction: column; align-items: flex-start; gap: 4px; }
	.list-title { font-size: 19px; }
	.list-sub { font-size: 12px; }
	.card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.card-title { font-size: 13px; }
	.card-summary { font-size: 11px; }
	.pagination a, .pagination span { padding: 5px 10px; font-size: 12px; }
	.page-wrap .mag-section,
	.page-wrap .newsletter-content,
	.page-wrap article { max-width: 100%; line-height: 1.65; }
	.page-wrap table { font-size: 12px; }
	.page-wrap table th, .page-wrap table td { padding: 6px 8px; }
}

/* ?€?€ 諛섏쓳??480px ?€?€ */
@media (max-width: 480px) {
	.card-grid { grid-template-columns: 1fr; }
}

/* ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺
   而ㅻ??덊떚 ???ъ젙鍮??덉씠??v1 (2026-04-24)
   - 紐⑸줉/?꾪꽣/移대뱶/?섏씠吏€?ㅼ씠?섏쓣 '寃뚯떆??由ъ뒪?명삎'?쇰줈 ?ъ젙??
   - 매거진 IA(.mag-*) · 파트너 카드(.pcard*) · 상세 히어로는 유지
   - iframe 내부 자체 완결 (부모 CSS 비의존)
   ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 */

:root {
	--c-bg: #f6f7f9;
	--c-surface: #ffffff;
	--c-border: #e5e7eb;
	--c-border-strong: #d1d5db;
	--c-text: #111827;
	--c-text-sub: #6b7280;
	--c-text-dim: #9ca3af;
	--c-accent: #2563eb;
	--c-accent-hover: #1d4ed8;
	--c-radius: 8px;
	--c-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 1px 1px rgba(17,24,39,0.03);
}

body {
	background: var(--c-bg);
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "留묒? 怨좊뵓", system-ui, sans-serif;
	font-size: 15px;
	color: var(--c-text);
}

.page-wrap {
	width: min(1120px, 100%);
	padding: 24px 16px 60px;
}

/* — 목록 헤더 — */
.list-header {
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 14px;
	margin-bottom: 18px;
	align-items: center;
}
.list-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.list-sub {
	font-size: 13px;
	color: var(--c-text-sub);
	margin-top: 4px;
}
.list-count {
	font-size: 13px;
	color: var(--c-text-sub);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 4px 10px;
}

/* ?€?€ ?꾪꽣 pill: ??삎 ?€?€ */
.pill-filter {
	gap: 4px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 0;
}
.pill {
	padding: 9px 16px;
	border-radius: 0;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--c-text-sub);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: -1px;
}
.pill:hover {
	background: transparent;
	color: var(--c-text);
	border-color: transparent;
	border-bottom-color: var(--c-border-strong);
}
.pill.active {
	background: transparent;
	color: var(--c-accent);
	border-color: transparent;
	border-bottom-color: var(--c-accent);
}

/* ?€?€ 移대뱶 洹몃━?? 寃뚯떆??2????1???€?€ */
.card-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (max-width: 767px) {
	.card-grid { grid-template-columns: 1fr; }
}

/* ?€?€ 移대뱶: 媛€濡쒗삎(?몃꽕??蹂몃Ц) / ??諛곌꼍 ?€?€ */
.card {
	grid-column: auto;
	display: grid;
	grid-template-columns: 160px 1fr;
	aspect-ratio: auto;
	min-height: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	flex-direction: row;
	justify-content: flex-start;
}
.card:hover {
	border-color: var(--c-border-strong);
	box-shadow: 0 2px 10px rgba(17,24,39,0.06);
	transform: none;
}
/* 이미지 없는 카드 — 오버레이 그라디언트 다크 제거 */
.card--c0, .card--c1, .card--c2, .card--c3, .card--c4 {
	background: var(--c-surface);
}
.card-thumb {
	position: relative;
	inset: auto;
	aspect-ratio: 4 / 3;
	background: #f3f4f6;
	overflow: hidden;
}
.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
/* 기존 .pcard 오버레이 제거 */
.card-overlay {
	display: none;
}
.card-body {
	position: static;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	margin-top: 0;
	z-index: auto;
}
.card-date {
	font-size: 12px;
	color: var(--c-text-dim);
	order: -1;
	margin-bottom: 0;
}
.card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text);
	line-height: 1.4;
	-webkit-line-clamp: 2;
	margin: 0;
	text-shadow: none;
}
.card-summary {
	font-size: 13px;
	color: var(--c-text-sub);
	line-height: 1.5;
	-webkit-line-clamp: 2;
	margin: 0;
}

@media (max-width: 480px) {
	.card {
		grid-template-columns: 110px 1fr;
	}
	.card-body { padding: 10px 12px; gap: 4px; }
	.card-title { font-size: 14px; }
	.card-summary { font-size: 12px; -webkit-line-clamp: 1; }
}

/* ?€?€ ?대┰?곸긽: ??移대뱶 ??(?쇱씠??誘몃땲硫€ + ?몃쾭 洹몃┝??媛뺤“) ?€?€ */
.shorts-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	box-shadow: var(--c-shadow);
}
.shorts-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.shorts-thumb { background: #f3f4f6; }
.shorts-thumb-placeholder {
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.shorts-body {
	background: var(--c-surface);
	padding: 12px 14px;
}
.shorts-date { color: var(--c-text-dim); }
.shorts-title { color: var(--c-text); }

/* ?€?€ ?섏씠吏€?ㅼ씠???€?€ */
.pagination {
	margin-top: 28px;
	gap: 2px;
}
.page-btn {
	min-width: 36px;
	height: 36px;
	border-radius: 6px;
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text-sub);
	font-size: 14px;
}
a.page-btn:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}
.page-btn.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}
.page-dots { color: var(--c-text-dim); }

/* ?€?€ 鍮??곹깭 ?€?€ */
.empty-state {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	padding: 48px 20px;
	color: var(--c-text-sub);
}
.empty-state .back-btn { color: var(--c-accent); }

/* — 상세: 뒤로가기 버튼 — */
.detail-nav { margin-bottom: 14px; }
.back-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border: 1px solid var(--c-border);
	border-radius: 6px;
	background: var(--c-surface);
	font-size: 13px;
	color: var(--c-text-sub);
}
.back-btn:hover {
	border-color: var(--c-border-strong);
	color: var(--c-text);
	background: #f9fafb;
}

/* — 상세: 본문 영역 (html_web/blocks 공통) — */
.detail-content {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--c-text);
	word-break: keep-all;
}
.detail-content p { margin: 0 0 1em; }
.detail-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 16px 0;
}
.detail-content table {
	width: 100%;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}
.detail-content h2, .detail-content h3, .detail-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	line-height: 1.35;
	color: var(--c-text);
}
.detail-content ul, .detail-content ol {
	padding-left: 1.4em;
	margin: 0 0 1em;
}
.detail-content li { margin-bottom: 0.3em; }

/* ?€?€ 紐⑤컮??怨듯넻 蹂댁젙 ?€?€ */
@media (max-width: 767px) {
	.page-wrap { padding: 16px 12px 40px; }
	.list-title { font-size: 18px; }
	.pill { padding: 8px 12px; font-size: 13px; }
	.detail-content { font-size: 15px; line-height: 1.7; }
}
/* ?곣봺?곣봺?곣봺?곣봺??/而ㅻ??덊떚 ???ъ젙鍮??덉씠??v1 ?곣봺?곣봺?곣봺?곣봺??*/

/* ================================================================ */
/* community board embed v12 (freecos-tone, soft round, 6-slot bento)  */
/* ================================================================ */
.board-v12 {
	--v-brand: #4974ba;
	--v-brand-deep: #2f548e;
	--v-brand-soft: #eaf0fa;
	--v-accent: #fae100;
	--v-ink: #14181c;
	--v-ink-2: #2a2f36;
	--v-ink-3: #4a5568;
	--v-soft: #94999e;
	--v-mute: #c0c4cc;
	--v-rule: #e5e8ec;
	--v-rule-soft: #f1f3f6;
	--v-bg: #fdfcfb;
	--v-bg-2: #ffffff;
	--v-r-card: 18px;
	--v-r-pill: 999px;
	--v-shadow: 0 1px 2px rgba(20,24,28,.04);
	--v-shadow-hover: 0 18px 36px -22px rgba(73,116,186,.35);
	background: var(--v-bg);
	color: var(--v-ink);
	padding: 22px 0;
}

/* topbar */
.v12-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--v-bg-2);
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-card);
	padding: 12px 18px;
	margin-bottom: 22px;
	box-shadow: var(--v-shadow);
}
.v12-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.v12-tab {
	font-size: 14px;
	font-weight: 600;
	color: var(--v-ink-3);
	padding: 9px 18px;
	border-radius: var(--v-r-pill);
	background: transparent;
	transition: all .18s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.v12-tab:hover { color: var(--v-brand); background: var(--v-brand-soft); }
.v12-tab.on {
	background: var(--v-brand);
	color: #fff;
	box-shadow: 0 4px 14px -6px rgba(73,116,186,.55);
}
.v12-tab.off {
	color: var(--v-mute);
	cursor: not-allowed;
	background: transparent;
}
.v12-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	background: var(--v-rule-soft);
	color: var(--v-soft);
	padding: 2px 7px;
	border-radius: var(--v-r-pill);
}
.v12-count { font-size: 13px; color: var(--v-ink-3); font-weight: 500; }
.v12-count strong { color: var(--v-ink); font-weight: 700; }

/* section label */
.v12-sec-label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 8px 4px 14px;
}
.v12-sec-label .dot { width: 6px; height: 6px; background: var(--v-brand); border-radius: 50%; }
.v12-sec-label .dot.mute { background: var(--v-mute); }
.v12-sec-label .name { font-size: 14px; font-weight: 700; color: var(--v-ink); letter-spacing: -.01em; }
.v12-sec-label .name.mute { color: var(--v-soft); }
.v12-sec-label .cap { font-size: 11px; color: var(--v-soft); letter-spacing: .08em; font-weight: 500; }

/* news bento 6 slots */
.v12-news {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-auto-rows: 290px;
	gap: 16px;
	margin-bottom: 36px;
}
.v12-card {
	background: var(--v-bg-2);
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-card);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	display: flex;
	flex-direction: column;
	box-shadow: var(--v-shadow);
	color: inherit;
	text-decoration: none;
}
.v12-card:hover {
	transform: translateY(-3px);
	border-color: var(--v-brand);
	box-shadow: var(--v-shadow-hover);
}
/* 2026-05-15: 9-slot × 2 그룹 = 18칸 layout — grid-row 명시 제거, auto-place로 그룹 반복 */
.v12-lead { grid-column: 1; grid-row: span 2; }
.v12-s1 { grid-column: 2; }
.v12-s2 { grid-column: 3; }
.v12-s3 { grid-column: 2; }
.v12-s4 { grid-column: 3; }
/* 행 3: 직사각형(s5, 1.5fr) + 작은 2개(s6/s7, 1fr씩) — 2026-05-04 사용자 레이아웃 */
.v12-s5 { grid-column: 1; grid-row: 3; }
.v12-s6 { grid-column: 2; grid-row: 3; }
.v12-s7 { grid-column: 3; grid-row: 3; }

/* row3 래퍼를 실제 그리드 컨테이너로 정의 (HTML의 v12-row3-wrap div 대응) */
.v12-row3-wrap {
	grid-column: 1 / span 3;
	grid-row: 3;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 16px;
}
.v12-row3-wrap > .v12-s5 { grid-column: 1; grid-row: 1; }
.v12-row3-wrap > .v12-s6 { grid-column: 2; grid-row: 1; }
.v12-row3-wrap > .v12-s7 { grid-column: 3; grid-row: 1; }
@media (max-width: 700px) {
	.v12-row3-wrap {
		grid-column: 1;
		grid-row: auto;
		grid-template-columns: 1fr;
	}
	.v12-row3-wrap > .v12-s5,
	.v12-row3-wrap > .v12-s6,
	.v12-row3-wrap > .v12-s7 {
		grid-column: 1;
		grid-row: auto;
	}
}
.v12-wide {
	grid-column: 1 / span 3;
	/* 2026-05-15: grid-row 명시 제거 — 9-slot × 2 그룹 auto-place 대응 */
	display: grid;
	grid-template-columns: 280px 1fr;
}
.v12-tail { grid-column: span 1; }

.v12-cover {
	background: var(--v-rule-soft);
	overflow: hidden;
	position: relative;
	height: 175px;
	flex-shrink: 0;
}
.v12-lead .v12-cover { height: 380px; }
.v12-wide .v12-cover { width: 280px; height: 100%; }
.v12-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .8s ease;
}
.v12-card:hover .v12-cover img { transform: scale(1.04); }
.v12-cover-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--v-brand-soft), var(--v-rule-soft));
}
.v12-cover-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 10px;
	font-weight: 700;
	color: var(--v-ink);
	background: var(--v-accent);
	padding: 5px 10px;
	border-radius: var(--v-r-pill);
	letter-spacing: .04em;
	box-shadow: 0 2px 6px rgba(20,24,28,.15);
}
.v12-cover-tag.new {
	background: var(--v-brand);
	color: #fff;
}

.v12-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.v12-lead .v12-body { padding: 22px 24px 24px; gap: 12px; justify-content: flex-start; }
.v12-wide .v12-body {
	padding: 26px 32px;
	gap: 12px;
	justify-content: center;
}
.v12-wide-rich {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11px;
}
.v12-wide-rich .label {
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--v-brand);
	background: var(--v-brand-soft);
	padding: 4px 9px;
	border-radius: var(--v-r-pill);
}
.v12-wide-rich .value {
	color: var(--v-soft);
	font-weight: 600;
}
/* wide 카드 우측 보강 — 푸터 라인 + 태그 칩 */
.v12-wide-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.v12-wide-tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--v-ink-3);
	background: var(--v-rule-soft);
	padding: 4px 10px;
	border-radius: var(--v-r-pill);
	letter-spacing: -.005em;
}
.v12-wide-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--v-rule);
	font-size: 11px;
	color: var(--v-soft);
}
.v12-wide-foot .arrow {
	color: var(--v-brand);
	font-weight: 700;
	font-size: 13px;
}

.v12-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--v-soft);
	font-weight: 500;
	flex-wrap: wrap;
}
.v12-meta .vol {
	color: var(--v-brand);
	font-weight: 700;
	background: var(--v-brand-soft);
	padding: 3px 9px;
	border-radius: var(--v-r-pill);
	letter-spacing: .03em;
}
.v12-meta .sep { color: var(--v-mute); }

.v12-title {
	font-weight: 700;
	color: var(--v-ink);
	line-height: 1.4;
	letter-spacing: -.018em;
	margin: 0;
}
.v12-lead .v12-title { font-size: 22px; font-weight: 800; line-height: 1.3; }
.v12-wide .v12-title { font-size: 18px; }
.v12-s1 .v12-title, .v12-s2 .v12-title, .v12-s3 .v12-title, .v12-s4 .v12-title,
.v12-s5 .v12-title, .v12-s6 .v12-title, .v12-s7 .v12-title {
	font-size: 13.5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.v12-desc {
	font-size: 12px;
	color: var(--v-soft);
	line-height: 1.5;
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.v12-lead .v12-desc { font-size: 13.5px; }
.v12-wide .v12-desc { font-size: 12.5px; }

/* leaflet 3-col (사이즈 좀 큼직, 글씨 톤 부드럽게) */
.v12-flyers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 36px;
}
.v12-flyer {
	background: var(--v-bg-2);
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-card);
	overflow: hidden;
	transition: all .25s ease;
	display: flex;
	flex-direction: column;
	box-shadow: var(--v-shadow);
	color: inherit;
	text-decoration: none;
}
.v12-flyer:hover {
	transform: translateY(-3px);
	border-color: var(--v-brand);
	box-shadow: var(--v-shadow-hover);
}
.v12-flyer-cover {
	aspect-ratio: 3 / 4;
	background: #fafbfc;  /* 2026-05-19: 회색 placeholder 잔상 제거 — 거의 흰색 */
	position: relative;
	overflow: hidden;
}
.v12-flyer-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .25s ease;  /* 2026-05-19: .6s → .25s 단축 (잔상 감소) */
	filter: saturate(.82) contrast(.94) brightness(.99);   /* 깨짐 방지 — 채도/대비 살짝 다운 */
	image-rendering: auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}
.v12-flyer:hover .v12-flyer-cover img { transform: scale(1.02); }   /* 확대도 살짝만 */
.v12-flyer-placeholder {
	width: 100%; height: 100%;
	background: #fafbfc;  /* 2026-05-19: 그라디언트 제거 — 잔상 안 보이게 흰색 */
}
.v12-num-badge {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 9px;
	font-weight: 700;
	background: rgba(255,255,255,.95);
	color: var(--v-ink);
	padding: 3px 8px;
	border-radius: var(--v-r-pill);
	letter-spacing: .08em;
	box-shadow: 0 2px 5px rgba(20,24,28,.12);
	z-index: 2;
}
.v12-flyer-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.v12-flyer-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--v-ink-2);
	letter-spacing: -.012em;
	line-height: 1.45;
	margin: 0;
}
.v12-flyer-date {
	font-size: 11.5px;
	color: var(--v-soft);
	font-weight: 500;
	letter-spacing: .02em;
}
.v12-num-badge {
	background: rgba(255,255,255,.92) !important;
	color: var(--v-ink-3) !important;
	font-weight: 600 !important;
}

/* 발행 예정 배지 — send_date > today */
.v12-upcoming-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 13px;
	font-weight: 700;
	background: rgba(26, 32, 44, .92);
	color: #fff;
	padding: 7px 14px;
	border-radius: var(--v-r-pill);
	letter-spacing: .02em;
	z-index: 3;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* coming-soon */
.v12-coming-soon {
	background: var(--v-bg-2);
	border: 1px dashed var(--v-rule);
	border-radius: var(--v-r-card);
	padding: 56px 32px;
	text-align: center;
	margin-bottom: 36px;
}
.v12-cs-icon {
	width: 56px; height: 56px;
	margin: 0 auto 18px;
	background: var(--v-brand-soft);
	color: var(--v-brand);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.v12-cs-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--v-ink);
	margin-bottom: 6px;
	letter-spacing: -.01em;
}
.v12-cs-desc { font-size: 13px; color: var(--v-soft); }

/* empty */
.v12-empty {
	padding: 56px 0;
	text-align: center;
	color: var(--v-soft);
	font-size: 14px;
}

/* pagination */
.v12-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin: 24px 0 12px;
	font-size: 13px;
}
.v12-page-btn {
	padding: 8px 16px;
	background: var(--v-bg-2);
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-pill);
	color: var(--v-ink-3);
	font-weight: 600;
	text-decoration: none;
	transition: all .15s ease;
}
.v12-page-btn:hover {
	background: var(--v-brand-soft);
	color: var(--v-brand);
	border-color: var(--v-brand);
}
.v12-page-info {
	color: var(--v-soft);
	font-weight: 600;
	letter-spacing: .05em;
}

/* 태블릿/좁은 데스크톱 — 2열로 일찍 전환 */
@media (max-width: 1100px) {
	.v12-news {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}
	.v12-lead, .v12-s1, .v12-s2, .v12-s3, .v12-s4,
	.v12-s5, .v12-s6, .v12-s7 {
		grid-column: auto;
		grid-row: auto;
	}
	.v12-lead { grid-column: 1 / span 2; }
	.v12-lead .v12-cover { height: 320px; }
	.v12-wide {
		grid-column: 1 / -1;
		grid-template-columns: 200px 1fr;
	}
	.v12-wide .v12-cover { width: 200px; }
	.v12-flyers { grid-template-columns: repeat(2, 1fr); }
	/* 옵션 C — 700~1099px: 마지막 행(row3-wrap)만 커스텀 배치 유지 (s5 직사각형 + s6/s7 작은 2개) */
	.v12-row3-wrap {
		grid-column: 1 / -1;
		grid-row: auto;
		grid-template-columns: 1.5fr 1fr 1fr;
	}
	.v12-row3-wrap > .v12-s5 { grid-column: 1; grid-row: 1; }
	.v12-row3-wrap > .v12-s6 { grid-column: 2; grid-row: 1; }
	.v12-row3-wrap > .v12-s7 { grid-column: 3; grid-row: 1; }
}
/* 모바일 (스마트폰 일반) */
@media (max-width: 700px) {
	.board-v12 { padding: 14px 0; }
	.v12-topbar {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
		padding: 12px 14px;
	}
	.v12-tabs { width: 100%; justify-content: space-between; gap: 0; }
	.v12-tab { padding: 8px 12px; font-size: 13px; flex: 1; justify-content: center; }
	.v12-count { font-size: 12px; align-self: flex-end; }
	.v12-sec-label { margin: 6px 2px 12px; }
	.v12-sec-label .name { font-size: 13px; }
	.v12-sec-label .cap { font-size: 10px; }
	.v12-news {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 12px;
	}
	.v12-lead, .v12-s1, .v12-s2, .v12-s3, .v12-s4,
	.v12-s5, .v12-s6, .v12-s7 {
		grid-column: 1;
		grid-row: auto;
	}
	/* 2026-07-06 모바일: 리드 카드(294 히어로)만 이미지 전체 노출(잘림 수정). 일반 카드는 균일 유지 */
	.v12-cover { height: 200px; }
	.v12-lead .v12-cover { height: auto; overflow: visible; }
	.v12-lead .v12-cover img { height: auto; object-fit: contain; display: block; }
	.v12-body { padding: 12px 14px 14px; gap: 5px; }
	.v12-lead .v12-body { padding: 16px 18px 18px; gap: 8px; }
	.v12-lead .v12-title { font-size: 17px; line-height: 1.35; }
	.v12-s1 .v12-title, .v12-s2 .v12-title, .v12-s3 .v12-title, .v12-s4 .v12-title,
	.v12-s5 .v12-title, .v12-s6 .v12-title, .v12-s7 .v12-title { font-size: 14px; }
	.v12-desc { font-size: 12.5px; line-height: 1.55; }
	.v12-wide {
		grid-column: 1;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.v12-wide .v12-cover { width: 100%; height: 180px; }
	.v12-wide .v12-body { padding: 14px 16px 16px; }
	.v12-flyers { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.v12-flyer-body { padding: 12px 12px 14px; }
	.v12-flyer-title { font-size: 13px; }
	.v12-flyer-date { font-size: 10.5px; }
	.v12-coming-soon { padding: 40px 20px; }
	.v12-cs-title { font-size: 15px; }
	.v12-cs-desc { font-size: 12px; }
}

/* 작은 모바일 (iPhone SE 등) */
@media (max-width: 380px) {
	.v12-tab { padding: 7px 10px; font-size: 12px; }
	.v12-lead .v12-cover { height: 180px; }
	.v12-cover { height: 170px; }
	.v12-flyers { grid-template-columns: 1fr; }
}

/* detail page — iframe 임베드 메타 헤더 */
.detail-doc-meta {
	max-width: 760px;
	margin: 16px auto 18px;
	padding: 0 8px 0 20px;
	position: relative;
}
/* 좌측 4px 시그너처 컬러 바 (2026-05-07 사용자 결정 — C 옵션) */
.detail-doc-meta::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 4px;
	bottom: 4px;
	width: 4px;
	background: #005950; /* default — newsletter 비리디안 */
	border-radius: 2px;
}
.detail-doc-meta[data-type="leaflet"]::before {
	background: #ff5a5f; /* 레플릿 살몬코랄 */
}
.detail-doc-meta[data-type="shorts"]::before {
	background: #635bff; /* 클립영상 보라 */
}
.detail-doc-type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eaf0fa;
	color: #4974ba;
	margin-bottom: 10px;
}
.detail-doc-type.type-leaflet { background: #fdf3d6; color: #8a6800; }
.detail-doc-title {
	font-size: 22px;
	font-weight: 800;
	color: #14181c;
	letter-spacing: -.018em;
	line-height: 1.3;
	margin: 0 0 6px;
}
.detail-doc-date {
	font-size: 12px;
	color: #94999e;
	letter-spacing: .03em;
	margin: 0;
}
.detail-nav { max-width: 700px; margin: 12px auto 8px; padding: 0 12px; }
.detail-nav .back-btn {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: #4974ba;
	font-weight: 600;
	padding: 6px 12px;
	border: 1px solid #e5e8ec;
	border-radius: 999px;
	text-decoration: none;
	background: #fff;
	transition: all .15s ease;
}
.detail-nav .back-btn:hover { background: #eaf0fa; border-color: #4974ba; }

/* Newsletter detail opened as a standalone PC window.
   The source HTML still renders inside srcdoc iframe; keep that document centered. */
@media (min-width: 701px) {
	.newsletter-detail-shell {
		width: 100%;
	}
	.newsletter-detail-shell .newsletter-pc-only {
		width: min(980px, 100%);
		margin-inline: auto;
	}
	.newsletter-detail-shell .detail-doc-meta {
		max-width: 980px;
	}
	.newsletter-detail-shell #doc-frame {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: auto;
	}
}

/* ═══════════════════════════════════════════════════════════
   PULSE CARD (§9-3, scoped — pulse-card namespace)
   - newsletter_detail 1차 적용 (히어로 직후, 본문 시작 직전)
   - BEM 클래스 격리, 토큰 --p-* 카드 내부 정의
   - 모바일 우선 (320~768) → 데스크톱 769+ 보정
   ═══════════════════════════════════════════════════════════ */
.pulse-card {
	--p-brand: #4974ba;
	--p-brand-soft: #eaf0fa;
	--p-accent: #fae100;
	--p-ink: #14181c;
	--p-ink-3: #4a5568;
	--p-soft: #94999e;
	--p-rule: #e5e8ec;
	--p-rule-soft: #f1f3f6;
	--p-bg: #ffffff;
	--p-radius: 18px;
	--p-shadow: 0 1px 2px rgba(20, 24, 28, .04);
	--p-shadow-hover: 0 18px 36px -22px rgba(73, 116, 186, .35);

	display: block;
	background: var(--p-bg);
	border: 1px solid var(--p-rule);
	border-radius: var(--p-radius);
	box-shadow: var(--p-shadow);
	margin: 18px 0 24px;
	padding: 14px 16px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pulse-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.pulse-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--p-accent);
	color: var(--p-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(20, 24, 28, .12);
	line-height: 1;
}
.pulse-card__badge-ko {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--p-ink);
	opacity: .75;
}
.pulse-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.pulse-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--p-brand-soft);
	flex-shrink: 0;
}
.pulse-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .8s ease;
}
.pulse-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.pulse-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--p-soft);
	font-weight: 500;
}
.pulse-card__dot { color: var(--p-rule); }
.pulse-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--p-ink);
	margin: 0;
	line-height: 1.4;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: keep-all;
}
.pulse-card__summary {
	font-size: 13px;
	color: var(--p-ink-3);
	margin: 0;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: keep-all;
}
.pulse-card__cta {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--p-brand);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	letter-spacing: -.01em;
}
.pulse-card:hover {
	transform: translateY(-2px);
	border-color: var(--p-brand);
	box-shadow: var(--p-shadow-hover);
}
.pulse-card:hover .pulse-card__thumb img { transform: scale(1.04); }
.pulse-card:focus-within {
	outline: none;
	border-color: var(--p-brand);
	box-shadow: 0 0 0 3px rgba(73, 116, 186, .20);
}

/* ── 데스크톱 769+: 가로 배치 ── */
@media (min-width: 769px) {
	.pulse-card {
		padding: 16px 20px;
		margin: 22px 0 28px;
	}
	.pulse-card__link {
		flex-direction: row;
		align-items: center;
		gap: 18px;
	}
	.pulse-card__thumb {
		width: 200px;
		aspect-ratio: 1 / 1;
		border-radius: 14px;
		flex-shrink: 0;
	}
	.pulse-card__body { flex: 1; }
	.pulse-card__title { font-size: 18px; }
	.pulse-card__summary { font-size: 14px; }
}

/* ── 좁은 모바일 320~360 보정 ── */
@media (max-width: 360px) {
	.pulse-card { padding: 12px 14px; }
	.pulse-card__title { font-size: 15px; }
	.pulse-card__summary { font-size: 12px; }
}

/* ── 로딩 스켈레톤 (data-state="loading") ── */
.pulse-card[data-state="loading"] .pulse-card__thumb,
.pulse-card[data-state="loading"] .pulse-card__title,
.pulse-card[data-state="loading"] .pulse-card__summary {
	background: linear-gradient(90deg, #f1f3f6 0%, #e5e8ec 50%, #f1f3f6 100%);
	background-size: 200% 100%;
	animation: pulse-skeleton 1.4s ease-in-out infinite;
	color: transparent;
}
@keyframes pulse-skeleton {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── 모션 줄이기 옵션 ── */
@media (prefers-reduced-motion: reduce) {
	.pulse-card,
	.pulse-card__thumb img,
	.pulse-card[data-state="loading"] * {
		transition: none !important;
		animation: none !important;
	}
}

/* ─────────────────────────────────────────────
   이달의 컬럼 — premium-design (FCAS Insight)
   다층 그림자·그래디언트 배지·세로 프라임 바·이미지 줌·CTA pill 변환
   ───────────────────────────────────────────── */
.v12-column {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-card);
	margin-bottom: 26px;
	box-shadow: 0 1px 3px rgba(20, 24, 28, .04),
	            0 12px 32px -16px rgba(73, 116, 186, .12);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	position: relative;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1),
	            box-shadow .45s cubic-bezier(.4, 0, .2, 1),
	            border-color .45s cubic-bezier(.4, 0, .2, 1);
}
.v12-column::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 4px; height: 100%;
	background: linear-gradient(180deg, var(--v-brand), var(--v-brand-deep));
	opacity: 0;
	transition: opacity .45s ease;
	z-index: 3;
}
.v12-column:hover {
	transform: translateY(-3px);
	border-color: rgba(73, 116, 186, .35);
	box-shadow: 0 4px 12px rgba(20, 24, 28, .06),
	            0 28px 56px -18px rgba(73, 116, 186, .28);
}
.v12-column:hover::before {
	opacity: 1;
}

.v12-column-thumb {
	width: 280px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
	background: #fafbfc;  /* 2026-05-19: 회색 그라디언트 placeholder 잔상 제거 */
	position: relative;
}
.v12-column-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 24, 28, 0) 55%, rgba(73, 116, 186, .14) 100%);
	z-index: 1;
	pointer-events: none;
	transition: opacity .45s ease;
}
.v12-column-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1);  /* 2026-05-19: 1.05s → .25s (잔상 단축) */
}
.v12-column:hover .v12-column-thumb img {
	transform: scale(1.07);
}
.v12-column-thumb-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 10px;
	font-weight: 800;
	color: var(--v-ink);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	padding: 5px 10px;
	border-radius: 999px;
	letter-spacing: .08em;
	box-shadow: 0 2px 8px rgba(20, 24, 28, .12);
}

.v12-column-body {
	flex: 1;
	min-width: 0;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.v12-column-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--v-brand), var(--v-brand-deep));
	padding: 6px 12px 6px 11px;
	border-radius: var(--v-r-pill);
	align-self: flex-start;
	letter-spacing: .06em;
	box-shadow: 0 4px 12px -4px rgba(73, 116, 186, .45);
}
/* .v12-column-cat::before 별 ✦ 제거 (사용자 요청 2026-05-04) */

.v12-column-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--v-ink);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -.02em;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.v12-column-summary {
	font-size: 13.5px;
	color: var(--v-ink-3);
	margin: 0;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: keep-all;
}

.v12-column-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--v-soft);
	font-weight: 500;
	margin-top: 2px;
}
.v12-column-meta .by {
	color: var(--v-brand);
	font-weight: 700;
	letter-spacing: .01em;
}
.v12-column-meta .dot {
	color: var(--v-rule);
}

.v12-column-cta {
	align-self: center;
	flex-shrink: 0;
	padding: 9px 16px 9px 18px;
	margin-right: 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--v-brand);
	background: #fff;
	border: 1px solid var(--v-rule);
	border-radius: var(--v-r-pill);
	transition: background .35s ease, color .35s ease,
	            border-color .35s ease, transform .35s ease;
	white-space: nowrap;
}
.v12-column:hover .v12-column-cta {
	background: var(--v-brand);
	color: #fff;
	border-color: var(--v-brand);
	transform: translateX(4px);
	box-shadow: 0 6px 14px -4px rgba(73, 116, 186, .45);
}

@media (max-width: 768px) {
	.v12-column { flex-direction: column; }
	.v12-column-thumb { width: 100%; aspect-ratio: 16 / 9; }
	.v12-column-body { padding: 18px 20px 14px; }
	.v12-column-title { font-size: 17px; }
	.v12-column-cta { align-self: flex-end; margin: 0 18px 18px; }
}

/* ─────────────────────────────────────────────
   컬럼 상세 (FCAS Insight) — 작가/기자급 타이포그래피
   ───────────────────────────────────────────── */
.col-article {
	max-width: 760px;
	margin: 0 auto;
	padding: 12px 20px 80px;
	color: #14181c;
	font-family: -apple-system, 'Pretendard', 'Malgun Gothic', sans-serif;
}
.col-nav {
	margin: 6px 0 18px;
}
.col-back {
	display: inline-block;
	font-size: 13px;
	color: #4a5568;
	padding: 8px 14px;
	border: 1px solid #e5e8ec;
	border-radius: 999px;
	background: #fff;
	transition: all .25s ease;
}
.col-back:hover {
	border-color: #4974ba;
	color: #4974ba;
}

.col-head {
	margin-bottom: 28px;
}
.col-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, #4974ba, #2f548e);
	padding: 6px 12px 6px 11px;
	border-radius: 999px;
	letter-spacing: .06em;
	box-shadow: 0 4px 12px -4px rgba(73, 116, 186, .45);
	margin-bottom: 18px;
}
/* .col-cat::before 별 ✦ 제거 (사용자 요청 2026-05-04) */
.col-title {
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.025em;
	color: #14181c;
	margin: 0 0 12px;
	word-break: keep-all;
}
.col-subtitle {
	font-size: clamp(15px, 1.6vw, 17px);
	color: #4a5568;
	line-height: 1.55;
	margin: 0 0 22px;
	word-break: keep-all;
}

.col-byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid #f1f3f6;
	border-bottom: 1px solid #f1f3f6;
}
.col-author {
	display: flex;
	align-items: center;
	gap: 10px;
}
.col-author-mark {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4974ba, #2f548e);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -.02em;
}
.col-author-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.col-author-name {
	font-size: 13px;
	font-weight: 700;
	color: #14181c;
}
.col-author-role {
	font-size: 11px;
	color: #94999e;
	font-weight: 500;
}
.col-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #94999e;
}
.col-meta-dot {
	color: #c0c4cc;
}

/* 2026-05-18 v3: 컬럼 이미지 비율 + 프리미엄 마감 (사용자 명시).
 *   - list 카드(바깥) = 3:4 세로 (.v12-flyer-cover 별도)
 *   - detail(안) 히어로 = 16:9 (Pillow 블러 배경 합성 — 잡지 사진 기법)
 *   - detail 본문 figure = 16:9 cover crop + 라운드 + 그림자
 *   memory/project_column_image_aspect_ratio.md 참조. */
.col-hero {
	margin: 28px 0 36px;
	border-radius: 18px;
	overflow: hidden;
	background: #f1f3f6;
	box-shadow: 0 18px 48px -20px rgba(20, 24, 28, .22), 0 4px 12px -6px rgba(20, 24, 28, .10);
}
.col-hero img {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}
.col-hero figcaption {
	font-size: 11px;
	color: #94999e;
	text-align: right;
	padding: 8px 14px 10px;
	background: #fff;
	font-style: italic;
}
/* 본문 figure 프리미엄 마감 — 16:9 + 라운드 12px + 깊은 그림자 + 자연스러운 caption */
.col-section-body figure {
	margin: 8px 0 22px !important;
}
.col-section-body figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 12px !important;
	box-shadow: 0 12px 32px -14px rgba(20, 24, 28, .18), 0 3px 8px -4px rgba(20, 24, 28, .08);
}
.col-section-body figure figcaption {
	margin-top: 10px !important;
	font-size: 12px !important;
	color: #94a3b8;
	text-align: center;
	letter-spacing: .01em;
}

.col-body {
	font-size: 17px;
	line-height: 1.85;
	color: #2a2f36;
	letter-spacing: -.005em;
	word-break: keep-all;
}
.col-body p {
	margin: 0 0 1.4em;
}
.col-body strong {
	font-weight: 800;
	color: #14181c;
	background: linear-gradient(180deg, transparent 60%, rgba(250, 225, 0, .35) 60%);
	padding: 0 2px;
}
.col-body em {
	font-style: italic;
	color: #4974ba;
	font-weight: 600;
}

.col-lead {
	font-size: 18px;
	color: #2a2f36;
	margin-bottom: 1.6em;
}
.col-lead::first-letter {
	font-size: 1.4em;
	font-weight: 800;
	color: #4974ba;
	margin-right: 2px;
}

.col-highlight {
	margin: 32px 0;
	padding: 22px 24px 22px 28px;
	background: linear-gradient(135deg, #eaf0fa 0%, #f8faff 100%);
	border-left: 4px solid #4974ba;
	border-radius: 0 14px 14px 0;
	position: relative;
	box-shadow: 0 4px 14px -8px rgba(73, 116, 186, .18);
}

/* 컬럼 YouTube 영상 임베드 — 16:9 반응형 (2026-05-08) */
.col-video {
	position: relative;
	width: 100%;
	margin: 32px 0;
	padding-bottom: 56.25%; /* 16:9 비율 */
	overflow: hidden;
	border-radius: 14px;
	background: #000000;
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.35);
}
.col-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.col-highlight-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	color: #4974ba;
	letter-spacing: .12em;
	margin-bottom: 8px;
}
.col-highlight p {
	font-size: 16px;
	line-height: 1.7;
	color: #14181c;
	margin: 0;
	font-weight: 500;
	word-break: keep-all;
}

.col-section {
	margin: 44px 0 32px;
}
.col-section-title {
	font-size: 22px;
	font-weight: 800;
	color: #14181c;
	margin: 0 0 14px;
	line-height: 1.35;
	letter-spacing: -.02em;
	padding-left: 14px;
	border-left: 4px solid #14181c;
	word-break: keep-all;
}
.col-section-body p {
	margin: 0 0 1.3em;
}
.col-section-body p:last-child {
	margin-bottom: 0;
}
.col-section-body ol,
.col-section-body ul {
	margin: 0 0 1.4em;
	padding-left: 0;
	list-style: none;
	counter-reset: col-step;
}
.col-section-body ol > li,
.col-section-body ul > li {
	position: relative;
	margin: 0 0 1em;
	padding: 0 0 0 38px;
	line-height: 1.75;
}
.col-section-body ol > li::before {
	content: counter(col-step);
	counter-increment: col-step;
	position: absolute;
	top: 2px;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4974ba, #2f548e);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
	box-shadow: 0 4px 10px -4px rgba(73, 116, 186, .45);
}
.col-section-body ul > li::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4974ba;
}

.col-outro {
	margin: 36px 0 12px;
	padding: 20px 0;
	border-top: 1px solid #e5e8ec;
	font-size: 16px;
	color: #2a2f36;
	font-weight: 500;
	line-height: 1.75;
	word-break: keep-all;
}

.col-signature {
	font-size: 13px;
	font-weight: 700;
	color: #4974ba;
	letter-spacing: .04em;
	margin-top: 22px;
	text-align: right;
}

@media (max-width: 600px) {
	.col-article { padding: 12px 16px 60px; }
	.col-title { font-size: 24px; }
	.col-body { font-size: 15.5px; line-height: 1.8; }
	.col-section-title { font-size: 19px; }
	.col-highlight { padding: 18px 18px 18px 22px; }
	.col-highlight p { font-size: 15px; }
}

/* ─────────────────────────────────────────────
   PULSE-CARD --hero modifier (list 페이지 1차 알림용)
   - 이미지 50% + 텍스트 50% 풀 히어로
   - FOR YOU 배지는 좌상단 오버레이
   - 모바일은 base 스타일 그대로 (세로 스택)
   ───────────────────────────────────────────── */
@media (min-width: 769px) {
	.pulse-card--hero {
		padding: 0;
		overflow: hidden;
		position: relative;
		margin: 22px 0 28px;
	}
	.pulse-card--hero .pulse-card__head {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 2;
		margin: 0;
	}
	.pulse-card--hero .pulse-card__link {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
	}
	.pulse-card--hero .pulse-card__thumb {
		width: 50%;
		min-height: 240px;
		aspect-ratio: 16 / 9;
		border-radius: 0;
		flex-shrink: 0;
	}
	.pulse-card--hero .pulse-card__body {
		flex: 1;
		padding: 32px 32px 32px 28px;
		justify-content: center;
		gap: 10px;
	}
	.pulse-card--hero .pulse-card__title {
		font-size: 24px;
		-webkit-line-clamp: 2;
		line-height: 1.35;
	}
	.pulse-card--hero .pulse-card__summary {
		font-size: 15px;
	}
	.pulse-card--hero .pulse-card__cta {
		margin-top: 8px;
		font-size: 14px;
	}
}

/* 모바일: base와 동일하지만 thumb 비율을 더 임팩트 있게 (16:9 유지) */
@media (max-width: 768px) {
	.pulse-card--hero .pulse-card__thumb {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
	.pulse-card--hero .pulse-card__title {
		font-size: 18px;
	}
}

/* ════════════════════════════════════════════
   PC/모바일 동시 렌더 분기 (700px 기준)
   PC  (≥701px): iframe만 표시, 매거진 IA 숨김
   모바일 (≤700px): 매거진 IA만 표시, iframe 숨김
   2026-05-04 추가 — newsletter_detail PC/모바일 분리
   ════════════════════════════════════════════ */
.newsletter-mobile-only {
	display: none;
}
.newsletter-pc-only {
	display: block;
}

.m-news-img {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	margin-bottom: 16px;
}
.m-news-img img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (max-width: 700px) {
	/* 모바일에서 page-wrap padding 제거 — PNG가 viewport 100% fit */
	.page-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100vw !important;
		/* 2026-05-07: overflow-x: hidden 완전 제거 — sticky 자식(.detail-topbar) 작동 보장.
		   CSS spec: overflow != visible 인 부모는 sticky containing block을 자기로 만들어
		   sticky가 viewport에 고정되지 않고 부모 박스 안에서만 동작 (스크롤 시 사라짐).
		   가로 오버플로우는 max-width:100vw + 자식 요소(.newsletter-mobile-only *)의
		   max-width:100% 로 제어 (이미 적용됨). */
	}
	/* sp-* 스타일 팩 래퍼 폭 강제 — PNG가 viewport 초과 방지 */
	body > .page-wrap > div[class*="sp-"] {
		max-width: 100vw;
		overflow-x: hidden;
	}
	.newsletter-mobile-only {
		display: block;
		overflow-x: hidden;
		max-width: 100vw;
		width: 100%;
	}
	.m-news-img,
	.m-news-img img {
		width: 100% !important;
		max-width: 100% !important;
	}
	.newsletter-pc-only {
		display: none !important;
	}
	/* 모바일 IA 내부 가로 스크롤 방지 (사용자 요청) */
	.newsletter-mobile-only * {
		max-width: 100%;
		box-sizing: border-box;
	}
	.newsletter-mobile-only img {
		height: auto;
	}
}

/* ─────────────────────────────────────────────────────────
   모바일 detail 캐러셀 (2026-05-08)
   - prev/current/next 3장 가로 배치 + scroll-snap mandatory
   - 손가락 swipe → 가운데 변경 → 180ms 후 navigate
   - prefetch + preload 캐시로 즉시 표시 → 끊김 거의 0
   - 페이지 fade-in 제거 (캐러셀이 같은 시각 정보 유지)
   ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.m-carousel {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		width: 100%;
		max-width: 100%;
	}
	.m-carousel::-webkit-scrollbar { display: none; }
	.m-carousel-slide {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
	.m-carousel-slide img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* ─────────────────────────────────────────────────────────
   detail 페이지 모바일 좌우 네비게이션 화살표 (2026-05-07)
   - newsletter/leaflet detail 모바일에서 prev/next 호 페이지 이동
   - PC: 숨김 (사용자 명시 — 모바일만)
   - 디자인: list 페이지 .v12-rail-arrow 동일 (반투명 흰 + blur + 세로 직사각형)
   - 첫/마지막 호: 해당 화살표 마크업 자체 미렌더링 (라우트에서 None)
   ───────────────────────────────────────────────────────── */
.detail-mobile-nav {
	display: none;
}
@media (max-width: 700px) {
	.detail-mobile-nav {
		display: contents;
	}
	.detail-nav-arrow {
		display: grid;
		place-items: center;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 72px;
		/* 2026-05-08: 반투명 강화 (사용자 요청) — list rail-arrow와 동일 톤 */
		border: 1px solid rgba(23, 34, 50, 0.10);
		background: rgba(255, 255, 255, 0.45);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		color: #1f2d3d;
		font-size: 20px;
		font-weight: 700;
		z-index: 90;
		text-decoration: none;
		box-shadow: 0 2px 8px -2px rgba(0,0,0,0.10);
		transition: transform .2s ease, background .2s ease;
	}
	.detail-nav-arrow:active {
		transform: translateY(-50%) scale(0.95);
		background: rgba(255, 255, 255, 0.75);
	}
	.detail-nav-arrow.is-prev {
		left: 0;
		border-radius: 0 12px 12px 0;
		border-left: 0;
	}
	.detail-nav-arrow.is-next {
		right: 0;
		border-radius: 12px 0 0 12px;
		border-right: 0;
	}
}

/* ─────────────────────────────────────────────────────────
   detail 페이지 sticky 탭 헤더 (2026-05-07, PC+모바일 공통)
   - 모든 화면 상단 고정. list 페이지의 v12-topbar와 동일 디자인.
   - 좌측: 탭(뉴스레터/레플릿/클립영상) | 우측: 총 X건
   - .detail-nav(← 목록) 숨김 — 탭이 대체.
   - .detail-doc-meta의 type 칩/date는 템플릿에서 제거.
   ───────────────────────────────────────────────────────── */
.detail-topbar {
	display: block;
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	box-shadow: 0 1px 0 #e5e3df;
	margin: 0 0 18px;
	padding: 0;
}
.detail-topbar .v12-topbar {
	margin: 0;
}
/* ← 목록 백버튼 전면 숨김 (sticky 탭이 대체) */
.detail-nav,
.col-nav {
	display: none !important;
}
@media (max-width: 700px) {
	.detail-topbar {
		/* 2026-05-07: 음수 margin 제거 — html/body의 overflow-x:hidden 제거 후
		   가로 오버플로우 발생 위험. .page-wrap 모바일 padding이 이미 0이라
		   margin 음수로 양옆 확장할 필요 없음. */
		margin: 0 0 12px;
	}
}

/* ================================================================ */
/* board-v12 premium skin (scoped patch) — Premium Editorial / B    */
/* 2026-05-05  !important 0  font-family 0  신규 BP 0                */
/* ================================================================ */
.board-v12.board-premium {
	/* B 토큰 — 2026-05-06 Notion 정렬 (네이비 더 깊게) */
	--v-brand: #0a1530;          /* 포인트 1 — 네이비 (Notion brand-navy) */
	--v-brand-deep: #070f24;     /* 그라디언트/탭용 (Notion brand-navy-deep) */
	--v-brand-mid: #1a2a52;      /* 신규 — Notion brand-navy-mid */
	--v-brand-soft: #eef1f6;
	--v-accent: #c9a227;         /* 포인트 2 — 골드 (CTA 한정) */
	--v-bg: #ffffff;
	--v-bg-2: #ffffff;
	--v-rule: #dbe2f0;
	--v-rule-soft: #edf2fa;
	--v-shadow: 0 8px 24px -12px rgba(20, 24, 28, 0.18);
	--v-shadow-hover: 0 16px 40px -16px rgba(13, 40, 69, 0.28);

	/* 무채색 7단계 (Notion 도입 — 본문 위계용) */
	--v-ink-deep: #000000;
	--v-ink: #1a1a1a;
	--v-charcoal: #37352f;
	--v-slate: #5d5b54;
	--v-steel: #787671;
	--v-stone: #a4a097;
	--v-muted: #bbb8b1;
	--v-hairline: #e5e3df;
	--v-hairline-soft: #ede9e4;

	/* Pastel tints (1차 제한) — 2026-05-07 비활성, viridian 시스템 우선 */
	--v-tint-sky: #dcecfa;
	--v-tint-mint: #d9f3e1;
	--v-tint-lavender: #e6e0f5;

	/* 시그너처 컬러 — 비리디안 + 무채색 (2026-05-07 사용자 결정) */
	--v-viridian: #005950;
	--v-viridian-soft: #d4e8e3;
	--v-shade-1: #ffffff;
	--v-shade-2: #fafaf9;
	--v-shade-3: #f5f5f4;

	/* 기존 텍스트 토큰 — Notion 무채색 매핑 */
	--v-text: #1a1a1a;           /* ink (기존 #0f1720 → ink로) */
	--v-text-soft: #5d5b54;      /* slate */
	--v-text-meta: #787671;      /* steel — 메타 정보용 */

	/* 안전장치 — iOS 자동 텍스트 확대 차단 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 본문 위계 — heading 28 / body 16 (Notion 도입) */
.board-v12.board-premium .v12-desc {
	font-size: clamp(14px, 1vw, 16px);
	color: var(--v-text-soft);
	line-height: 1.55;
}

/* 카드 메타 VOL 칩 — Notion pastel tint 순환 (호별 색상 다양화) */
.board-v12.board-premium .v12-card .v12-meta .vol {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}
/* VOL 칩 — 비리디안 단일 액센트 (2026-05-07 시그너처 컬러) */
.board-v12.board-premium .v12-card .v12-meta .vol {
	background: var(--v-viridian);
	color: #ffffff;
}

/* 2026-05-15: 9-slot × 2 그룹 톤 분기 — 18칸 layout 정합 (기존 3n → 9n, 슬롯별 명시)
   1=lead/shade-1, 2=s1/shade-2, 3=s2/shade-3, 4=s3/shade-1, 5=s4/shade-2,
   6=wide/shade-3, 7~9=tail1~3/shade-1·2·3 (그룹 2 = 10~18 동일 반복) */
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+1) .v12-body { background: var(--v-shade-1); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+2) .v12-body { background: var(--v-shade-2); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+3) .v12-body { background: var(--v-shade-3); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+4) .v12-body { background: var(--v-shade-1); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+5) .v12-body { background: var(--v-shade-2); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+6) .v12-body { background: var(--v-shade-3); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+7) .v12-body { background: var(--v-shade-1); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+8) .v12-body { background: var(--v-shade-2); }
.board-v12.board-premium .v12-news .v12-card:nth-child(9n+9) .v12-body { background: var(--v-shade-3); }

/* (a) 레플릿 카드 body 동일 무채색 3단계 (2026-05-07 톤 통일) */
.board-v12.board-premium .v12-flyers .v12-flyer:nth-child(3n+1) .v12-flyer-body {
	background: var(--v-shade-1);
}
.board-v12.board-premium .v12-flyers .v12-flyer:nth-child(3n+2) .v12-flyer-body {
	background: var(--v-shade-2);
}
.board-v12.board-premium .v12-flyers .v12-flyer:nth-child(3n+3) .v12-flyer-body {
	background: var(--v-shade-3);
}

/* 컬럼 카드 — 좌측 띠 제거 + Notion 톤 정합 (사용자 요청 2026-05-06) */
.board-v12.board-premium .v12-column::before,
.board-v12.board-premium .v12-column:hover::before {
	display: none;
	content: none;
}
.board-v12.board-premium .v12-column {
	border-color: var(--v-hairline);
}
.board-v12.board-premium .v12-column:hover {
	border-color: var(--v-hairline);
	box-shadow: var(--v-shadow-hover);
	transform: translateY(-3px);
}

/* 안전장치 — flex 자식 텍스트 흘러넘침 방어 */
.board-v12.board-premium * {
	min-width: 0;
}

/* 카드 베이스 — 단색 화이트 + 16px 라운드 + B 그림자 */
.board-v12.board-premium .v12-topbar,
.board-v12.board-premium .v12-card,
.board-v12.board-premium .v12-flyer,
.board-v12.board-premium .v12-column {
	background: #ffffff;
	border-color: rgba(176, 194, 224, 0.6);
}
.board-v12.board-premium .v12-card,
.board-v12.board-premium .v12-flyer,
.board-v12.board-premium .v12-column {
	border-radius: 16px;
	box-shadow: var(--v-shadow);
}

/* 탭 액티브 — 네이비 그라디언트 */
.board-v12.board-premium .v12-tab.on {
	background: linear-gradient(135deg, var(--v-brand), var(--v-brand-deep));
}

/* ─────────────────────────────────────────────────────────
   카테고리별 sticky/list 탭 활성색 (2026-05-07 사용자 결정)
   - newsletter → #005950 (비리디안)
   - leaflet → #ff5a5f (살몬코랄, Airbnb)
   - shorts → #635bff (보라, Stripe)
   - body/background/카드 변경 X (사용자 명시 — sticky 탭만)
   - specificity (0,4,0) — 기존 .board-v12.board-premium .v12-tab.on (0,3,0) override
   ───────────────────────────────────────────────────────── */
.board-v12.board-premium .v12-topbar[data-type="newsletter"] .v12-tab.on {
	background: #005950;
	color: #ffffff;
}
.board-v12.board-premium .v12-topbar[data-type="leaflet"] .v12-tab.on {
	background: #ff5a5f;
	color: #ffffff;
}
.board-v12.board-premium .v12-topbar[data-type="shorts"] .v12-tab.on {
	background: #635bff;
	color: #ffffff;
}
/* 2026-05-08: 컬럼 카테고리 시그너처 — 차콜 (에디토리얼/저널 톤) */
.board-v12.board-premium .v12-topbar[data-type="column"] .v12-tab.on {
	background: #2f2f2c;
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────
   컬럼 list (2026-05-08 v4 — 사용자 명시)
   - PC: 레플릿 v12-flyers 100% 그대로 (override 제거)
   - 모바일: 가로 스와이프 캐러셀 + cover 비율 압축 (본문 잘림 방지)
   ───────────────────────────────────────────────────────── */
.col-list-rail {
	position: relative;
}
.col-list-rail .v12-rail-arrow {
	display: none; /* PC 숨김 — 모바일 미디어쿼리에서만 표시 */
}
/* 2026-05-08: 컬럼 카드 cover PC도 5:6 (레플릿 카드 사이즈에 맞춤 — 사용자 명시) */
.col-list-rail .v12-flyer-cover {
	aspect-ratio: 5 / 6;
}
/* 2026-05-08: 컬럼 list PC = 균일 3열 강제 (viewport 1100 미만 2열 자동 변환 차단 — 카드 너무 커지는 문제) */
@media (min-width: 701px) {
	.col-list-rail .v12-flyers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	/* body 압축 — 부제 2줄 클램프 + 작가 메타 한 줄 + 폰트 압축 */
	.col-list-rail .v12-flyer-body {
		padding: 14px 16px 16px;
	}
	.col-list-rail .v12-column-summary {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.5;
	}
	.col-list-rail .v12-flyer-date {
		font-size: 11.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
@media (max-width: 700px) {
	.board-v12.board-premium .col-list-rail .v12-flyers {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 12px;
		/* 2026-05-09: 왼쪽 여백 축소 — 뉴스레터 캐러셀과 동일 정합 */
		padding: 0 11vw 8px 4vw;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 4vw;
		scroll-padding-inline-end: 11vw;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		scrollbar-width: none;
		grid-template-columns: none;
	}
	.board-v12.board-premium .col-list-rail .v12-flyers::-webkit-scrollbar {
		display: none;
	}
	.board-v12.board-premium .col-list-rail .v12-flyers .v12-flyer {
		flex: 0 0 78vw;
		width: 78vw;
		max-width: 78vw;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		touch-action: pan-x pan-y;
	}
	.col-list-rail .v12-rail-arrow {
		display: grid;
		place-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 72px;
		border: 1px solid rgba(23, 34, 50, 0.15);
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		color: #1f2d3d;
		font-size: 18px;
		font-weight: 700;
		z-index: 4;
		cursor: pointer;
	}
	.col-list-rail .v12-rail-arrow.is-prev {
		left: 0;
		border-radius: 0 12px 12px 0;
		border-left: 0;
	}
	.col-list-rail .v12-rail-arrow.is-next {
		right: 0;
		border-radius: 12px 0 0 12px;
		border-right: 0;
	}
	.col-list-rail .v12-rail-arrow:disabled {
		opacity: 0.28;
		pointer-events: none;
	}
}

/* ─────────────────────────────────────────────────────────
   2026-05-16: 뉴스레터 리스트 상단 컬럼 단독 카드 (newsletter_list.html)
   - column_list의 v12-flyer 카드 룩 100% 통일 (세로형 + 정사각형 cover + 둥근 모서리)
   - v12-flyers 그리드(3열) 대신 가운데 정렬 + max-width 제한
   - 모바일: full-width
   ───────────────────────────────────────────────────────── */
.v12-flyers-single {
	display: flex !important;
	justify-content: center;
	grid-template-columns: none !important;
	margin-bottom: 36px;
}
.v12-flyer-featured {
	max-width: 360px;
	width: 100%;
}
.v12-flyer-featured .v12-flyer-cover {
	aspect-ratio: 5 / 6;
}
.v12-flyer-featured .v12-column-cat {
	margin-bottom: 6px;
}
.v12-flyer-featured .v12-column-summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	margin: 4px 0 8px;
	color: var(--v-soft);
}
@media (max-width: 700px) {
	.v12-flyers-single {
		padding: 0 16px;
	}
	.v12-flyer-featured {
		max-width: 100%;
	}
}

/* 이미지 비네팅 — 카드 cover/flyer-cover/column-thumb 공통 */
.board-v12.board-premium .v12-cover,
.board-v12.board-premium .v12-flyer-cover,
.board-v12.board-premium .v12-column-thumb {
	position: relative;
}
.board-v12.board-premium .v12-cover::after,
.board-v12.board-premium .v12-flyer-cover::after,
.board-v12.board-premium .v12-column-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 25, 53, 0) 44%, rgba(11, 25, 53, 0.2) 100%);
	pointer-events: none;
}

/* 타이포 — 핵심 텍스트 + 한글 단어끊김 안전장치 */
.board-v12.board-premium .v12-title {
	font-size: clamp(16px, 1.2vw, 21px);
	letter-spacing: -0.02em;
	color: var(--v-text);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
/* 카드 글자 위계 — lead 가장 크게, wide 중간, 일반 작게 (PC 위계) */
.board-v12.board-premium .v12-lead .v12-title {
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.25;
}
.board-v12.board-premium .v12-wide .v12-title {
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.3;
}
.board-v12.board-premium .v12-desc {
	color: var(--v-text-soft);
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.board-v12.board-premium .v12-meta {
	font-size: clamp(11px, 0.72vw, 12px);
	color: var(--v-text-soft);
}

/* hover — 카드 4px lift + 그림자 강화 */
.board-v12.board-premium .v12-card:hover,
.board-v12.board-premium .v12-flyer:hover,
.board-v12.board-premium .v12-column:hover {
	transform: translateY(-4px);
	box-shadow: var(--v-shadow-hover);
}

/* hover — 이미지 zoom (포인터 환경만) */
@media (hover: hover) and (pointer: fine) {
	.board-v12.board-premium .v12-card:hover .v12-cover img,
	.board-v12.board-premium .v12-flyer:hover .v12-flyer-cover img,
	.board-v12.board-premium .v12-column:hover .v12-column-thumb img {
		transform: scale(1.04);
	}
}

/* 키보드 포커스 — 네이비 outline */
.board-v12.board-premium .v12-card:focus-visible,
.board-v12.board-premium .v12-flyer:focus-visible,
.board-v12.board-premium .v12-column:focus-visible {
	outline: 2px solid var(--v-brand);
	outline-offset: 2px;
}

/* (a) 카드 수 자동 축소 — :has() PC viewport에서만 동작 (모바일 flex레일 무영향) */
.board-v12.board-premium .v12-news:not(:has(> .v12-card:nth-child(3))) {
	grid-template-columns: 1.5fr 1fr;
	grid-auto-rows: auto;
}
.board-v12.board-premium .v12-news:not(:has(> .v12-card:nth-child(3))) > .v12-card {
	grid-column: auto;
	grid-row: auto;
}
.board-v12.board-premium .v12-news:not(:has(> .v12-card:nth-child(2))) {
	grid-template-columns: 1fr;
}

.board-v12.board-premium .v12-news-rail {
	position: relative;
}

.board-v12.board-premium .v12-rail-arrow {
	display: none;
}

/* (b) placeholder 카드 — 데이터 부족 시 시각 안정 채움 */
.board-v12.board-premium .v12-placeholder {
	background: #fafbfd;
	border: 1px dashed rgba(176, 194, 224, 0.45);
	box-shadow: none;
	pointer-events: none;
	min-height: 200px;
}
.board-v12.board-premium .v12-placeholder .v12-cover-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f0f3f8 0%, #e8ecf3 100%);
}
.board-v12.board-premium .v12-placeholder::after {
	background: none;
}

/* 화살표는 모바일 전용 — PC/태블릿 기본 숨김 */
.board-v12.board-premium .v12-rail-arrow {
	display: none;
}

/* 모바일 — 700px 정렬 (가로 캐러셀 + 중앙 포커스 + 화살표) */
@media (max-width: 700px) {
	.board-v12.board-premium .v12-news-rail {
		position: relative;
		padding: 0;
	}
	.board-v12.board-premium .v12-news {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 12px;
		/* 2026-05-09: 왼쪽 여백 축소 — 컬럼 카드와 시각 정합 (18vw→4vw) */
		padding: 0 18vw 8px 4vw;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 4vw;
		scroll-padding-inline-end: 18vw;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		scrollbar-width: none;
	}
	.board-v12.board-premium .v12-news::-webkit-scrollbar { display: none; }
	.board-v12.board-premium .v12-news .v12-card {
		width: min(78vw, 280px);
		min-width: min(78vw, 280px);
		max-width: min(78vw, 280px);
		flex: 0 0 min(78vw, 280px);
		scroll-snap-align: center;
		scroll-snap-stop: always;
		touch-action: pan-x pan-y;
		transform: scale(0.94);
		opacity: 0.78;
		transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
	}
	.board-v12.board-premium .v12-news .v12-card.is-active {
		transform: scale(1);
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		.board-v12.board-premium .v12-news .v12-card {
			transform: none;
			opacity: 1;
			transition: none;
		}
	}
	.board-v12.board-premium .v12-news .v12-lead,
	.board-v12.board-premium .v12-news .v12-s1,
	.board-v12.board-premium .v12-news .v12-s2,
	.board-v12.board-premium .v12-news .v12-s3,
	.board-v12.board-premium .v12-news .v12-s4,
	.board-v12.board-premium .v12-news .v12-s5,
	.board-v12.board-premium .v12-news .v12-s6,
	.board-v12.board-premium .v12-news .v12-s7 {
		grid-column: auto;
		grid-row: auto;
	}
	.board-v12.board-premium .v12-news .v12-row3-wrap {
		display: contents;
	}
	.board-v12.board-premium .v12-rail-arrow {
		display: grid;
		place-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 72px;
		border: 1px solid rgba(23, 34, 50, 0.15);
		background: rgba(255, 255, 255, 0.62);
		backdrop-filter: blur(4px);
		color: #1f2d3d;
		font-size: 18px;
		font-weight: 700;
		z-index: 4;
	}
	.board-v12.board-premium .v12-rail-arrow.is-prev {
		left: 0;
		border-radius: 0 12px 12px 0;
	}
	.board-v12.board-premium .v12-rail-arrow.is-next {
		right: 0;
		border-radius: 12px 0 0 12px;
	}
	.board-v12.board-premium .v12-rail-arrow:disabled {
		opacity: 0.28;
		pointer-events: none;
	}

	/* topbar 한 줄 컴팩트 — 탭 + 카운트 같은 라인 */
	.board-v12.board-premium .v12-topbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 8px 12px;
		gap: 8px;
	}
	.board-v12.board-premium .v12-tabs {
		display: flex;
		flex-direction: row;
		gap: 4px;
		flex: 1 1 auto;
		width: auto;
		justify-content: flex-start;
		flex-wrap: nowrap;
		min-width: 0;
	}
	.board-v12.board-premium .v12-tab {
		height: 32px;
		min-width: 0;
		padding: 0 10px;
		border-radius: 16px;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1;
		white-space: nowrap;
		font-size: 12px;
		font-weight: 700;
		flex: initial;
		gap: 3px;
		box-sizing: border-box;
	}
	.board-v12.board-premium .v12-tab.off {
		padding: 0 6px;
		font-size: 11px;
	}
	.board-v12.board-premium .v12-tab .v12-badge {
		font-size: 8px;
		padding: 1px 4px;
		letter-spacing: 0;
		white-space: nowrap;
		flex-shrink: 0;
		line-height: 1;
	}
	.board-v12.board-premium .v12-count {
		font-size: 11px;
		white-space: nowrap;
		flex-shrink: 0;
		align-self: center;
		color: var(--v-text-soft);
	}
}

/* 2026-05-16: 레플릿 발행 예정 카드 — 선샤인 옐로우 강조만 유지 (border 금지, box-shadow + 배경). 위치는 시간순 자연 배치 */
.v12-flyer.is-upcoming {
	background: linear-gradient(135deg, #fff8e1 0%, #ffe082 55%, #ffb74d 100%);
	box-shadow: 0 12px 32px rgba(255, 167, 38, 0.32), 0 4px 12px rgba(0, 0, 0, 0.06);
	scroll-margin-top: 80px; /* anchor scroll 시 sticky 헤더 가림 방지 */
}
.v12-flyer.is-upcoming:hover {
	box-shadow: 0 16px 40px rgba(255, 167, 38, 0.42), 0 6px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.v12-flyer.is-upcoming.is-pulse {
	animation: upcoming-pulse 1.2s ease-out;
}
@keyframes upcoming-pulse {
	0%   { box-shadow: 0 12px 32px rgba(255, 167, 38, 0.32), 0 0 0 0 rgba(255, 167, 38, 0.6); }
	50%  { box-shadow: 0 12px 32px rgba(255, 167, 38, 0.32), 0 0 0 16px rgba(255, 167, 38, 0); }
	100% { box-shadow: 0 12px 32px rgba(255, 167, 38, 0.32), 0 0 0 0 rgba(255, 167, 38, 0); }
}

/* 2026-05-16: 발행 예정 레플릿 모달/스티커 — list 페이지 viewport 정중앙 floating (upcoming.html 카드 디자인 그대로) */
.leaflet-upcoming-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	width: 380px;
	max-width: calc(100vw - 32px);
	padding: 40px 32px 32px;
	background: linear-gradient(135deg, #fff8e1 0%, #ffe082 55%, #ffb74d 100%);
	border-radius: 24px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(255, 167, 38, 0.32);
	text-align: center;
	font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	animation: upcoming-modal-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.leaflet-upcoming-modal.is-hidden {
	display: none;
}
@keyframes upcoming-modal-in {
	0%   { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.leaflet-upcoming-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: #1a1a1a;
	cursor: pointer;
	transition: background 0.18s ease;
}
.leaflet-upcoming-close:hover {
	background: rgba(255, 255, 255, 0.95);
}
.leaflet-upcoming-emoji {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 16px;
}
.leaflet-upcoming-kicker {
	font-size: 11px;
	color: #94591f;
	letter-spacing: 3px;
	font-weight: 700;
	margin: 0 0 12px;
	text-transform: uppercase;
}
.leaflet-upcoming-title {
	font-size: 24px;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 12px;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.leaflet-upcoming-sub {
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
	margin: 0 0 24px;
}
.leaflet-upcoming-date-card {
	display: inline-block;
	padding: 14px 28px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 12px;
}
.leaflet-upcoming-date-label {
	font-size: 11px;
	color: #94591f;
	letter-spacing: 1px;
	font-weight: 600;
	margin: 0 0 4px;
}
.leaflet-upcoming-date-value {
	font-size: 20px;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0;
	letter-spacing: -0.02em;
}
@media (max-width: 480px) {
	.leaflet-upcoming-modal {
		width: calc(100vw - 24px);
		padding: 32px 24px 28px;
	}
	.leaflet-upcoming-emoji { font-size: 40px; }
	.leaflet-upcoming-title { font-size: 20px; }
}