/*
Theme Name: KYLUX (TheGem Child)
Theme URI: https://blog.kylux.co.kr/
Description: KYLUX Vogue-style child theme.
Author: KYLUX
Version: 1.5.0
Template: thegem-elementor
Text Domain: thegem-elementor-child
*/

:root {
	--sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
	--serif: 'DM Serif Display', 'Bodoni Moda', Georgia, serif;
	--ink: #1a1a1a;
	--sub: #555;
	--mute: #999;
	--bg: #ffffff;
	--line: #e8e8e6;
}

/* ===== MASTHEAD (Vogue inner-page: logo LEFT, nav CENTER, hamburger RIGHT) ===== */
.masthead--inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 40px;
	padding: 22px 48px;
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
	border-bottom: 1px solid #e8e8e8;
	z-index: 10;
}
.masthead--inner .masthead__logo {
	font-family: 'DM Serif Display', 'Bodoni Moda', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 44px !important;
	letter-spacing: -0.005em !important;
	line-height: 1 !important;
	text-align: left !important;
	color: #1a1a1a !important;
	text-decoration: none !important;
	margin: 0 !important;
	display: inline-block;
	justify-self: start;
}
.masthead--inner .masthead__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	justify-self: center;
}
.masthead--inner .masthead__nav a {
	color: #1a1a1a;
	padding: 6px 0;
	text-decoration: none;
	white-space: nowrap;
}
.masthead--inner .masthead__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
}
.masthead--inner .masthead__right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	justify-self: end;
}
.menu-toggle-input { position: absolute; left: -9999px; opacity: 0; }
.hamburger {
	display: flex;
	cursor: pointer;
	width: 24px;
	height: 16px;
	flex-direction: column;
	justify-content: space-between;
}
.hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
}

/* nav 노출 (홈/포스트 모두) */
body:not(.home) .nav { display: block; }

/* ===== SIDE MENU ===== */
.side-menu {
	position: fixed;
	top: 0; right: 0;
	width: 360px; max-width: 90vw; height: 100vh;
	background: #000;
	color: #fff;
	padding: 28px 32px;
	transform: translateX(100%);
	transition: transform 0.28s ease;
	z-index: 100;
	overflow-y: auto;
}
.menu-toggle-input:checked ~ .side-menu { transform: translateX(0); }
.side-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0; pointer-events: none;
	transition: opacity 0.28s ease;
	z-index: 99;
}
.menu-toggle-input:checked ~ .side-menu-overlay { opacity: 1; pointer-events: auto; }
.side-menu__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 24px;
}
.side-menu__brand { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; }
.side-menu__close {
	font-size: 28px; cursor: pointer;
	line-height: 1; font-weight: 200;
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
}
.side-menu__search {
	position: relative;
	display: flex; align-items: center;
	border-bottom: 2px solid #fff;
	padding: 0;
	margin-bottom: 36px;
	height: 60px;
}
.side-menu__search input {
	flex: 1; width: 100%; height: 100%;
	background: transparent; border: 0; color: #fff;
	font-family: var(--sans); font-size: 18px;
	font-weight: 700;
	padding: 0 40px 0 0;
	outline: none; letter-spacing: 0.02em;
}
.side-menu__search input::placeholder {
	color: rgba(255,255,255,0.5);
	font-weight: 700; letter-spacing: 0.04em;
}
.side-menu__search button {
	position: absolute;
	top: 50%; right: 0;
	width: 28px; height: 28px;
	margin-top: -14px;
	background: transparent; border: 0; cursor: pointer;
	padding: 0; font-size: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cline x1='18' y1='18' x2='25' y2='25'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}
.side-menu__nav ul { list-style: none; padding: 0; margin: 0; }
.side-menu__nav a, .side-menu__nav li > a {
	display: block; color: #fff;
	padding: 14px 0;
	font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.side-menu__nav a:hover { color: #bbb; }

/* ===== SITE CONTENT WRAPPER ===== */
.site-content { min-height: 50vh; }

/* ===== POST HERO (title overlay on featured image) ===== */
.post-single { color: var(--ink); }
.post-hero { margin: 0; }
.post-hero__image {
	position: relative;
	padding-top: 50%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #f0f0ee;
	overflow: hidden;
}
.post-hero__image::before {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 60%;
	background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	pointer-events: none;
	z-index: 1;
}
.post-hero__caption {
	position: absolute;
	left: 48px; right: 48px; bottom: 60px;
	text-align: center;
	color: #fff;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
}
.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 600;
}
.post-hero__cat {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	display: inline-flex; align-items: center;
}
.post-hero__cat::after {
	content: "";
	display: inline-block;
	width: 1px; height: 12px;
	margin: 0 10px;
	background: #fff;
	opacity: 0.7;
}
.post-hero__date {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.7);
}
.post-hero__title {
	font-family: var(--sans);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 auto;
	max-width: 14em;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* KYLUX_TOPLABEL: 메뉴 아래 + 히어로 위 카테고리 라벨 — 비활성화 (메뉴가 그 역할) */
.post-toplabel {
	display: none !important;
	text-align: center;
	padding: 18px 24px 0;
	max-width: 1600px;
	margin: 0 auto;
}
.post-toplabel__cat {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
}
.post-toplabel__cat:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (max-width: 1100px) {
	.post-toplabel { padding: 14px 18px 0; }
	.post-toplabel__cat { font-size: 12px; letter-spacing: 0.06em; }
}

/* Fallback head (no thumbnail) */
.post-head {
	padding: 80px 48px 40px;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.post-head__meta { display: flex; justify-content: center; align-items: center; margin: 0 0 24px; }
.post-head__cat { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.post-head__cat::after { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 10px; background: var(--sub); opacity: 0.6; }
.post-head__date { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--mute); }
.post-head__title { font-size: 48px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

/* Post body: only add breathing room above, don't constrain anything inside */

.post-body img { opacity: 1; visibility: visible; }

.post-foot {
	max-width: 760px;
	margin: 24px auto 60px;
	padding: 0 24px;
}
.post-foot__tags a {
	display: inline-block;
	font-size: 13px;
	color: var(--sub);
	letter-spacing: 0.04em;
	margin-right: 12px;
	padding: 4px 0;
}

/* ===== ARCHIVE ===== */
.archive-head {
	padding: 60px 48px 36px;
	max-width: 1440px;
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid var(--line);
}
.archive-head__eyebrow {
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 10px;
}
.archive-head__title {
	font-family: var(--sans);
	font-size: 56px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--ink);
}

/* ===== SECTION (grid of cards) ===== */
.section {
	padding: 40px 48px 24px;
	max-width: 1440px;
	margin: 0 auto;
}
.section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	margin-bottom: 24px;
}
.section__title {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}
.section__more {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #666;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.section__more::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 9px;
	margin: 0 0 0 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1.5 1L6 5L1.5 9' fill='none' stroke='%23666' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

.grid-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.card { display: block; color: inherit; }
.card__image {
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	background-color: #f5f5f3;
	margin-bottom: 14px;
}
.card__cat {
	font-size: 15px;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 10px;
	color: var(--ink);
}
.card__title {
	font-weight: 600;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.012em;
	margin-bottom: 18px;
	color: var(--ink);
}
.card__byline { font-size: 13px; color: #999; font-weight: 400; line-height: 1; margin-top: 12px; }

/* ===== RELATED STORIES (on single post) ===== */
.related-stories {
	max-width: 1440px;
	margin: 48px auto 24px;
	padding: 0 48px;
}

/* ===== PAGINATION ===== */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 48px auto 24px; }
.pagination .page-numbers { display: inline-block; padding: 8px 14px; font-size: 14px; color: var(--ink); border: 1px solid var(--line); }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ===== FOOTER ===== */
footer {
	position: relative;
	padding: 80px 0 78px;
	background: #000;
	text-align: center;
	margin-top: 32px;
}
.footer__inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.footer__logo {
	display: inline-block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 56px;
	letter-spacing: -0.02em;
	color: #fff;
	line-height: 1;
	margin: 0;
	text-decoration: none;
}
.footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}
.footer__nav li {
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
}
.footer__nav li::after {
	content: "";
	display: inline-block;
	width: 1px; height: 12px;
	margin: 0 12px;
	background: #d9d9d9;
	opacity: 0.4;
}
.footer__nav li:last-child::after { display: none; }
.footer__nav a { color: #fff; text-decoration: none; }
.footer__copyright {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.43;
	color: #fff;
	opacity: 0.5;
	text-transform: uppercase;
	margin: 0;
}
.footer__copyright a { color: #fff; text-decoration: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
	.masthead--inner {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		grid-template-areas: "logo right" "nav nav";
		gap: 10px 16px;
		padding: 14px 16px;
	}
	.masthead--inner .masthead__logo { grid-area: logo; font-size: 32px !important; text-align: left !important; }
	.masthead--inner .masthead__right { grid-area: right; }
	.masthead--inner .masthead__nav {
		grid-area: nav;
		display: flex !important;
		justify-content: center;
		gap: 14px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.03em;
		border-top: 1px solid #eee;
		padding-top: 12px;
	}
	/* 본문 카테고리 라벨(post-toplabel)은 모바일에서 숨김 — 메뉴가 그 역할 */
	.post-toplabel { display: none; }

	.section { padding: 32px 24px 18px; }
	.section__title { font-size: 32px; }
	.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
	.card__image { aspect-ratio: 4/3; margin-bottom: 10px; }
	.card__title { font-size: 17px; line-height: 1.35; margin-bottom: 10px; }
	.card__cat { font-size: 12px; margin-bottom: 6px; }
	.card__byline { font-size: 13px; }

	.archive-head { padding: 40px 20px 24px; }
	.archive-head__title { font-size: 36px; }

	.post-hero__image { padding-top: 100%; }
	.post-hero__caption { left: 20px; right: 20px; bottom: 30px; }
	.post-hero__cat, .post-hero__date { font-size: 12px; }
	.post-hero__title { font-size: 28px; line-height: 1.25; }

	

	footer { padding: 10.6vw 0; margin-top: 24px; }
	.footer__logo { font-size: 37px; }
	.footer__nav { margin: 5.3vw 0; }
	.footer__nav li { font-size: 14px; }
	.footer__nav li::after { height: 8px; margin: 0 6px; opacity: 0.2; }

	.related-stories { padding: 0 20px; margin: 32px auto 24px; }
}
@media (max-width: 480px) {
	.masthead--inner .masthead__logo { font-size: 28px !important; }
	.post-hero__image { padding-top: 56.25%; }
	.post-hero__title { font-size: 20px; }
	.footer__logo { font-size: 32px; }
}







/* === v33 PATCH: truly compact vertical spacing === */
.post-body {
	padding-top: 8px !important;
	padding-bottom: 24px !important;
}
.post-body img { opacity: 1; visibility: visible; }

/* Nuke Elementor's own section/column padding */
.post-body .elementor-section,
.post-body .elementor-top-section {
	padding: 0 !important;
	margin: 0 !important;
}
.post-body .elementor-row,
.post-body .elementor-column,
.post-body .elementor-widget-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

/* Widgets — very small margin between */
.post-body .elementor-widget { margin: 0 !important; padding: 0 !important; }
.post-body .elementor-widget-heading { margin-bottom: 10px !important; padding-top: 6px !important; }
.post-body .elementor-widget-text-editor { margin-bottom: 10px !important; }
.post-body .elementor-widget-image,
.post-body .elementor-widget-thegem-styledimage { margin-top: 10px !important; margin-bottom: 10px !important; }

/* Internal paragraphs */
.post-body .elementor-widget-text-editor p { margin: 0 0 8px !important; }
.post-body .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }

@media (max-width: 1100px) {
	.post-body { padding-top: 6px !important; padding-bottom: 20px !important; }
	.post-body .elementor-widget-heading { margin-bottom: 8px !important; }
	.post-body .elementor-widget-text-editor,
	.post-body .elementor-widget-image { margin-top: 8px !important; margin-bottom: 8px !important; }
}



/* === v40 PATCH: Vogue-exact body specs + wider padding ===
   Vogue: .post_content p { font-size: 1.06rem; line-height: 1.76; margin: 30px 0 }
   Vogue mobile (1023px): .post_content { padding: 0 24px } */
.post-body { padding-left: 80px !important; padding-right: 80px !important; box-sizing: border-box !important; }
@media (max-width: 1100px) {
	.post-body {
		padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 480px) {
	.post-body {
		padding-left: 10px !important; padding-right: 10px !important; }
}

/* Remove widget-level horizontal padding — outer post-body padding handles spacing */
.post-body .elementor-widget-text-editor,
.post-body .elementor-widget-heading,
.post-body .elementor-widget-image,
.post-body .elementor-widget-thegem-styledimage,
.post-body .elementor-widget-thegem-blog-post-image {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Vogue text specs: 17px / line-height 1.76 / margin 30px 0 */
.post-body .elementor-widget-text-editor,
.post-body .elementor-widget-text-editor p,
.post-body .elementor-widget-text-editor .elementor-text-editor {
	font-size: 17px !important;
	line-height: 1.76 !important;
	color: var(--ink) !important;
}
.post-body .elementor-widget-text-editor p {
	margin: 0 0 20px !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.post-body .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }

/* Images full width of content area */
.post-body img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
}

@media (max-width: 1100px) {
	.post-body .elementor-widget-text-editor,
	.post-body .elementor-widget-text-editor p {
		font-size: 16px !important;
		line-height: 1.7 !important;
	}
	.post-body .elementor-widget-text-editor p { margin: 0 0 16px !important; }
}
/* === v47 PATCH: cap text widget width to match image width on desktop === */
@media (min-width: 1101px) {
	.post-body .elementor-widget-text-editor,
	.post-body .elementor-widget-heading {
		max-width: 1440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.post-body .elementor-widget-image,
	.post-body .elementor-widget-thegem-styledimage,
	.post-body .elementor-widget-thegem-blog-post-image {
		max-width: 1440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.post-body .elementor-widget-image img,
	.post-body .elementor-widget-thegem-styledimage img {
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 0 auto;
	}
}
/* === v49 PATCH: force post images to fill container width === */
@media (min-width: 1101px) {
	.post-body .elementor-widget-image img,
	.post-body .elementor-widget-thegem-styledimage img,
	.post-body .elementor-widget-image .elementor-image img,
	.post-body img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.post-body .elementor-widget-image,
	.post-body .elementor-widget-thegem-styledimage {
		width: 100% !important;
	}
}
/* === v50 PATCH: text narrower than image row width (match visual) === */
@media (min-width: 1101px) {
	.post-body .elementor-widget-text-editor,
	.post-body .elementor-widget-heading {
		max-width: 1200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	/* Images can stay wider */
	.post-body .elementor-widget-image,
	.post-body .elementor-widget-thegem-styledimage {
		max-width: 1200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/* === v51 PATCH: hide demo tags + Vogue-like serif for section titles === */

/* Hide post tag widget entirely (removes demo tags like #Travel (Demo)) */
.post-body .elementor-widget-thegem-post-tags,
.post-body .elementor-widget-post-tags,
.post-body .elementor-widget-thegem-blog-post-tags,
.post-body .tm-tags,
.post-body .post-tags,
.post-body .tm-breadcrumbs + .elementor-widget-text-editor[class*="Travel"],
.post-single .post-foot__tags { display: none !important; }

/* Hide any element containing "(Demo)" text using :has (modern browsers) */
.post-body a[href*="travel"]:not([href*="kylux"]),
.post-body a[href*="trends"]:not([href*="kylux"]) {
	/* Be cautious - only hide if matches demo context */
}

/* Vogue-style serif for RELATED STORIES and similar section titles */
.related-stories .section__title,
.post-single .section__title {
	font-family: 'DM Serif Display', 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
	text-transform: uppercase !important;
}
/* === v52 PATCH: Related Stories cards — identical to homepage cards === */
.related-stories .card,
.related-stories .card * {
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.related-stories .card__cat {
	font-size: 15px !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	margin-bottom: 10px !important;
	color: #1a1a1a !important;
	line-height: 1.3 !important;
}
.related-stories .card__title {
	font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	letter-spacing: -0.012em !important;
	margin-bottom: 18px !important;
	color: #1a1a1a !important;
	text-transform: none !important;
}
.related-stories .card__byline {
	font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
	font-size: 13px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #999 !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	margin-top: 12px !important;
}

/* RELATED STORIES heading — Vogue-style serif (as requested) */
.related-stories .section__title {
	font-family: 'DM Serif Display', 'Bodoni Moda', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 48px !important;
	letter-spacing: -0.005em !important;
	text-transform: uppercase !important;
	color: #1a1a1a !important;
}
@media (max-width: 1100px) {
	.related-stories .section__title { font-size: 32px !important; }
	.related-stories .card__title { font-size: 17px !important; line-height: 1.35 !important; }
	.related-stories .card__cat { font-size: 12px !important; }
}