/* ===== JLJO Presenter Preview (page-id-1220) — FULL CSS ===== */
/* body 자체에 붙은 page-id 클래스에 직접 적용 */
body.page-id-1220 {
	margin: 0;
	color: #e9eef5;
	font: 400 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* 페이지 배경은 래퍼로 처리 (테마 배경과 충돌 방지) */
.page-id-1220 .pagebg {
	min-height: 100vh;
	background: linear-gradient(180deg,#0a0d13 0%,#0b0b10 60%,#0b0b10 100%);
}

/* CSS 변수 (이 페이지 전용) */
.page-id-1220 {
}

/* 공통 */
.page-id-1220 * {
	box-sizing: border-box;
}

.page-id-1220 a {
	color: var(--accent,#62d0ff);
	text-decoration: none;
}

.page-id-1220 a:hover {
	text-decoration: underline;
}

/* 레이아웃 */
.page-id-1220 .wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
}

.page-id-1220 header.hero {
	position: relative;
	display: grid;
	gap: 16px;
	padding: 56px 24px 40px;
	border-bottom: 1px solid var(--line,#1f2635);
}

.page-id-1220 .badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--line,#1f2635);
	font-size: 12px;
	color: var(--muted,#a7b3c7);
	background: rgba(255,255,255,.03);
}

.page-id-1220 h1 {
	font-size: 44px;
	line-height: 1.1;
	margin: 6px 0 4px;
	letter-spacing: .2px;
	color: var(--fg,#e9eef5);
}

.page-id-1220 .sub {
	font-size: 18px;
	color: var(--muted,#a7b3c7);
	max-width: 900px;
	margin: 0;
}

.page-id-1220 .cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* 버튼 */
.page-id-1220 .btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--accent,#62d0ff);
	color: #001018;
	font-weight: 700;
	border: 0;
	box-shadow: var(--shadow);
	text-decoration: none;
}

.page-id-1220 .btn.secondary {
	background: #202838;
	color: var(--fg,#e9eef5);
	border: 1px solid var(--line,#1f2635);
}

/* (일부 테마가 헤더 링크 스타일을 덮어쓸 때) 우선순위 보정 */
.page-id-1220 .cta-row a.btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	border-radius: 12px !important;
	background: var(--accent,#62d0ff) !important;
	color: #001018 !important;
	font-weight: 700 !important;
	border: 0 !important;
	box-shadow: var(--shadow) !important;
	text-decoration: none !important;
}

.page-id-1220 .cta-row a.btn.secondary {
	background: #202838 !important;
	color: var(--fg,#e9eef5) !important;
	border: 1px solid var(--line,#1f2635) !important;
}

.page-id-1220 header.hero a {
	text-decoration: none !important;
}

/* 카드/그리드 */
.page-id-1220 .cards {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	gap: 18px;
	margin: 28px 0;
}

.page-id-1220 .card {
	grid-column: span 12;
	background: var(--card,#141823);
	border: 1px solid var(--line,#1f2635);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--shadow);
	color: var(--fg,#e9eef5);
}

.page-id-1220 .card h3 {
	margin: 0 0 8px;
	font-size: 20px;
	color: var(--fg,#e9eef5);
}

.page-id-1220 .meta {
	color: var(--muted,#a7b3c7);
	font-size: 14px;
}

.page-id-1220 .two {
	grid-column: span 12;
}

.page-id-1220 .three {
	grid-column: span 12;
}

@media (min-width:760px) {
	.page-id-1220 .two {
		grid-column: span 6;
	}
	
	.page-id-1220 .three {
		grid-column: span 4;
	}
}

/* 미디어/리스트 */
.page-id-1220 .media {
	aspect-ratio: 16/9;
	background: #0c0f18;
	border-radius: 14px;
	border: 1px solid var(--line,#1f2635);
	overflow: hidden;
}

.page-id-1220 iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.page-id-1220 ul.clean {
	padding-left: 18px;
	margin: 8px 0;
}

.page-id-1220 li+li {
	margin-top: 4px;
}

.page-id-1220 .tagrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.page-id-1220 .tag {
	font-size: 12px;
	color: var(--muted,#a7b3c7);
	border: 1px solid var(--line,#1f2635);
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.03);
}

/* 구분선/푸터 */
.page-id-1220 .hr {
	height: 1px;
	background: var(--line,#1f2635);
	margin: 24px 0;
}

.page-id-1220 footer {
	margin: 40px 0 24px;
	color: var(--muted,#a7b3c7);
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.page-id-1220 .logo {
	font-weight: 800;
	letter-spacing: .3px;
}

.page-id-1220 .pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,211,110,.08);
	border: 1px solid #3a3424;
	color: #ffe3a6;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
}

.page-id-1220 .note {
	font-size: 13px;
	color: var(--muted,#a7b3c7);
}

/* === JLJO 랜딩(1220) 전용: 헤더/푸터/여백 제거 & 가로 100% === */
/* 헤더/푸터/타이틀영역 숨기기 */
body.page-id-1220 .site-header,
body.postid-1220 .site-header,
body.page-id-1220 .navigation-top,
body.postid-1220 .navigation-top,
body.page-id-1220 .entry-header,
body.postid-1220 .entry-header,
body.page-id-1220 .footer-widgets,
body.postid-1220 .footer-widgets,
body.page-id-1220 .site-footer,
body.postid-1220 .site-footer,
body.page-id-1220 .page-title,
body.postid-1220 .page-title,
body.page-id-1220 .breadcrumbs,
body.postid-1220 .breadcrumbs,
body.page-id-1220 .header-inner,
body.postid-1220 .header-inner {
	display: none !important;
}

/* 바깥 래퍼 여백/최대너비 제거 */
body.page-id-1220 .site,
body.postid-1220 .site,
body.page-id-1220 .site-content,
body.postid-1220 .site-content,
body.page-id-1220 .content-area,
body.postid-1220 .content-area,
body.page-id-1220 .wrap,
body.postid-1220 .wrap,
body.page-id-1220 .container,
body.postid-1220 .container,
body.page-id-1220 .content,
body.postid-1220 .content,
body.page-id-1220 #page,
body.postid-1220 #page,
body.page-id-1220 #primary,
body.postid-1220 #primary,
body.page-id-1220 #main,
body.postid-1220 #main,
body.page-id-1220 #content,
body.postid-1220 #content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* 블록들 위아래 기본 마진 제거(필요 시 주석 처리) */
body.page-id-1220 .entry-content > *,
body.postid-1220 .entry-content > *,
body.page-id-1220 .hentry > *,
body.postid-1220 .hentry > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 구텐베르크 블록이 전체폭을 쓰도록 */
body.page-id-1220 .wp-block-group,
body.postid-1220 .wp-block-group,
body.page-id-1220 .wp-block-cover,
body.postid-1220 .wp-block-cover,
body.page-id-1220 .alignwide,
body.postid-1220 .alignwide,
body.page-id-1220 .alignfull,
body.postid-1220 .alignfull {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 가로 스크롤 방지 */
body.page-id-1220,
body.postid-1220 {
	overflow-x: hidden;
}

/* ===== JLJO 1220 — v4-hotfix: visibility + frames + full-bleed ===== */
/* 0) 다크 배경은 항상 바디에 */
body.page-id-1220 {
	background: linear-gradient(180deg,#0a0d13 0%,#0b0b10 60%,#0b0b10 100%) !important;
	color: #e9eef5;
/* 기본 글자색 */
}

/* 1) 테마가 덮어쓴 검정 글자 색 무력화 (구텐베르크 프리셋/인라인 포함) */
body.page-id-1220 .entry-content,
body.page-id-1220 .pagebg,
body.page-id-1220 .pagebg :where(p,li,dt,dd,blockquote,figcaption,small,em,strong,h1,h2,h3,h4,h5,h6) {
	color: #e9eef5 !important;
}

/* 프리셋 클래스 및 인라인 변수 색상도 흰색으로 */
body.page-id-1220 .entry-content :is(.has-text-color,.has-contrast-color,.has-black-color,.has-foreground-color),
body.page-id-1220 .entry-content [style*="--wp--preset--color"] {
	color: #e9eef5 !important;
}

/* 링크 색상은 액센트 유지 */
body.page-id-1220 .entry-content a:not(.btn) {
	color: #62d0ff !important;
}

/* 2) 이전 규칙이 0으로 만들어 버린 .wrap 패딩 복구 */
body.page-id-1220 .pag
/* 부드러운 앵커 스크롤 */
html {
	scroll-behavior: smooth;
}

/* 관리자바 로그인 상태에서 앵커 점프 위치 보정 */
body.admin-bar .cards,
body.admin-bar header.hero {
	scroll-margin-top: 32px;
}

/* iOS 노치 대응: 좌우 세이프에어리어 살짝 확보(이미 있으면 생략 가능) */
.page-id-1220 .wrap {
	padding-left: max(24px, env(safe-area-inset-left));
	padding-right: max(24px, env(safe-area-inset-right));
}

.page-id-1220 a:focus-visible,
.page-id-1220 button:focus-visible {
	outline: 2px solid #62d0ff;
	outline-offset: 2px;
}

html {
	scroll-behavior: smooth;
}

body.admin-bar :is(header.hero,.cards) {
	scroll-margin-top: 32px;
}

:root {
}

/* === JLJO 1220 — Mobile polish === */
body.page-id-1220 :root {
}

/* 브라우저 UI 다크 힌트 */
@media (max-width: 480px) {
	.page-id-1220 header.hero {
		padding: 36px 20px 28px;
	}
	
	.page-id-1220 h1 {
		font-size: clamp(28px, 8vw, 40px);
		line-height: 1.15;
	}
	
	.page-id-1220 .sub {
		font-size: 15px;
	}
	
	.page-id-1220 .cta-row .btn {
		width: 100%;
		justify-content: center;
	}
	
	.page-id-1220 .cards {
		gap: 14px;
		margin: 18px 0;
	}
	
	.page-id-1220 .card {
		padding: 14px;
		border-radius: 14px;
	}
}

/* 포커스 표시(접근성) */
.page-id-1220 a:focus-visible,
.page-id-1220 button:focus-visible {
	outline: 2px solid #62d0ff;
	outline-offset: 2px;
}

/* 부드러운 앵커 스크롤 + 관리자바 오프셋 */
html {
	scroll-behavior: smooth;
}

body.admin-bar :is(header.hero, .cards) {
	scroll-margin-top: 32px;
}

/* iOS 노치 좌우 세이프 에어리어 */
.page-id-1220 .wrap {
	padding-left: max(24px, env(safe-area-inset-left));
	padding-right: max(24px, env(safe-area-inset-right));
}

/* JLJO: 작은 품질 업그레이드 (디자인은 그대로) */
/* 1) 헤드라인 줄바꿈 품질 */
.page-id-1220 h1 {
	text-wrap: balance;
}

@supports not (text-wrap: balance) {
	.page-id-1220 h1 {
		hyphens: auto;
	}
}

/* 2) 앵커(#watch 등)로 이동할 때 부드럽게 */
html {
	scroll-behavior: smooth;
}

/* 3) 로그인 상태에서 상단 관리자바에 가려지지 않게 (링크로 점프 시) */
body.admin-bar :is(header.hero, .cards) {
	scroll-margin-top: 32px;
}

/* 4) 키보드 포커스(접근성) — Tab 이동 시 테두리 보이게 */
.page-id-1220 a:focus-visible, .page-id-1220 button:focus-visible {
	outline: 2px solid #62d0ff;
	outline-offset: 2px;
}

#wpadminbar,
#bitnami-banner,
#jetpack-subscribe-bar,
.wpcom-badge,
.wpcom-follow-bubble,
.loggedout-follow {
	display: none !important;
}