/**
 * Zorlinq 테마 — 메인 스타일시트
 * GeneratePress를 벤치마킹한 경량·시맨틱 마크업 기반. 동적으로 계산되는
 * 값(h태그 색상/크기, 버튼 색상 등)은 wp_head의 인라인 <style>
 * (Zorlinq_Dynamic_CSS)이 CSS 커스텀 프로퍼티/직접 규칙으로 덧씌웁니다.
 */

:root {
	--zorlinq-container-width: 1180px;
	--zorlinq-sidebar-width: 30%;
	--zorlinq-accent: #4f46e5;
	--zorlinq-ink: #16302a;
	--zorlinq-ink-muted: #5b6b60;
	--zorlinq-line: #e5e5ea;
	--zorlinq-paper: #ffffff;
	--zorlinq-bg: #fbfbfd;
	--zorlinq-btn-radius: 10px;
	--zorlinq-btn-primary: #4f46e5;
	--zorlinq-btn-text: #ffffff;
	--zorlinq-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
	--zorlinq-font-mono: SFMono-Regular, Consolas, monospace;
}

/* ── 리셋 & 기본 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--zorlinq-font-body);
	color: var(--zorlinq-ink);
	background: var(--zorlinq-bg);
	line-height: 1.7;
	font-size: 16px;
	overflow-x: hidden;
	width: 100%;
}
img, svg, video, iframe, table { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--zorlinq-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.zorlinq-container {
	max-width: var(--zorlinq-container-width);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* "본문 바로가기" 링크: 평소엔 화면 밖에 숨어 있다가, 키보드 포커스를
   받으면(Tab 키) 화면에 나타납니다. 접근성뿐 아니라 검색엔진이 콘텐츠
   진입점을 명확히 인식하는 데도 도움이 됩니다. */
.zorlinq-skip-link.screen-reader-text {
	z-index: 999999;
}
.zorlinq-skip-link.screen-reader-text:focus {
	position: fixed; top: 12px; left: 12px; width: auto; height: auto; overflow: visible;
	clip: auto; white-space: normal; padding: 12px 20px; background: var(--zorlinq-accent); color: #fff;
	border-radius: 8px; font-weight: 700; text-decoration: none;
}

/* ── 헤더 ────────────────────────────────────────────────── */
.zorlinq-header {
	background: var(--zorlinq-paper);
	border-bottom: 1px solid var(--zorlinq-line);
}
/* "유동 헤더": 평소엔 문서 흐름의 맨 위에 고정(sticky)되어 있다가,
   아래로 스크롤하면 위로 슬라이드되어 숨고, 위로 스크롤하면 다시
   슬라이드되어 나타납니다. transform만 사용해 레이아웃 재계산 없이
   부드럽게 움직이도록 했습니다(자바스크립트는 navigation.js 참고). */
.has-sticky-header .zorlinq-header {
	position: sticky; top: 0; z-index: 100;
	transform: translateY(0);
	transition: transform .28s ease;
}
.has-sticky-header .zorlinq-header.is-header-hidden {
	transform: translateY(-100%);
}
.zorlinq-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	min-height: 72px; flex-wrap: nowrap; min-width: 0;
}
.zorlinq-header__branding { display: flex; align-items: center; flex-shrink: 0; }
.zorlinq-site-title { font-weight: 800; font-size: 1.2rem; color: var(--zorlinq-ink); }
.custom-logo { max-height: 60px; width: auto; }

.zorlinq-primary-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.zorlinq-menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.zorlinq-menu a { color: var(--zorlinq-ink); font-weight: 600; font-size: 0.94rem; display: block; padding: 26px 2px; }
.zorlinq-menu a:hover { color: var(--zorlinq-accent); text-decoration: none; }

/* 드롭다운(하위 메뉴): 데스크톱에서는 부모 항목에 마우스를 올리거나
   키보드로 포커스했을 때만 나타나는 절대 위치 패널입니다. 기본값은
   숨김이며, :hover/:focus-within일 때만 표시되어 평소 레이아웃에는
   전혀 영향을 주지 않습니다. */
.zorlinq-menu li { position: relative; }
.zorlinq-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--zorlinq-paper);
	border: 1px solid var(--zorlinq-line);
	border-radius: 10px;
	box-shadow: 0 12px 28px -12px rgba(20,20,30,.18);
	padding: 8px;
	margin: 0;
	list-style: none;
	z-index: 50;
}
.zorlinq-menu li:hover > .sub-menu,
.zorlinq-menu li:focus-within > .sub-menu {
	display: block;
}
.zorlinq-menu .sub-menu li { position: relative; }
.zorlinq-menu .sub-menu a { padding: 10px 14px; border-radius: 6px; }
.zorlinq-menu .sub-menu a:hover { background: #f6f6f9; }
/* 2단 이상 깊이의 하위 메뉴(하위의 하위)는 오른쪽으로 펼쳐지게 합니다. */
.zorlinq-menu .sub-menu .sub-menu { top: 0; left: 100%; }
.zorlinq-menu .menu-item-has-children > a::after {
	content: '›';
	display: inline-block;
	margin-left: 6px;
	transform: rotate(90deg);
	font-weight: 900;
	transition: transform .15s ease;
}
.zorlinq-menu > .menu-item-has-children:hover > a::after,
.zorlinq-menu > .menu-item-has-children:focus-within > a::after {
	transform: rotate(270deg);
}
.zorlinq-menu .sub-menu .menu-item-has-children > a::after { transform: rotate(0deg); }
.zorlinq-menu .sub-menu .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

.zorlinq-menu-toggle {
	display: none; background: none; border: 1px solid var(--zorlinq-line); border-radius: 8px;
	padding: 8px 10px; flex-shrink: 0; cursor: pointer;
}
.zorlinq-menu-toggle__bars,
.zorlinq-menu-toggle__bars::before,
.zorlinq-menu-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: var(--zorlinq-ink); position: relative;
}
.zorlinq-menu-toggle__bars::before { content: ''; position: absolute; top: -6px; width: 20px; height: 2px; background: var(--zorlinq-ink); }
.zorlinq-menu-toggle__bars::after { content: ''; position: absolute; top: 6px; width: 20px; height: 2px; background: var(--zorlinq-ink); }

/* ── 레이아웃 (콘텐츠 + 사이드바) ────────────────────────── */
/* 상단 여백은 섹션 사이 간격(아래 .zorlinq-home-section의 48px)보다 살짝
   넉넉하게 잡아, 고정 헤더 바로 아래 콘텐츠가 답답하게 붙어 보이지 않게 합니다. */
.zorlinq-main-layout { display: grid; gap: 48px; padding: 56px 24px 40px; align-items: start; min-width: 0; }
.zorlinq-layout--sidebar-right { grid-template-columns: 1fr var(--zorlinq-sidebar-width); }
.zorlinq-layout--sidebar-left { grid-template-columns: var(--zorlinq-sidebar-width) 1fr; }
.zorlinq-layout--sidebar-left .zorlinq-content-area { order: 2; }
.zorlinq-layout--sidebar-left .zorlinq-sidebar { order: 1; }
.zorlinq-layout--full { grid-template-columns: 1fr; }
.zorlinq-content-area, .zorlinq-sidebar { min-width: 0; }

/* ── 브레드크럼 ──────────────────────────────────────────── */
.zorlinq-breadcrumb { font-size: 0.85rem; margin: 0 0 16px; color: var(--zorlinq-ink-muted); }
.zorlinq-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zorlinq-breadcrumb li { display: inline-flex; }
.zorlinq-breadcrumb a { color: var(--zorlinq-ink-muted); }

/* ── 글 헤더 / 본문 ──────────────────────────────────────── */
.zorlinq-entry-header { margin-bottom: 20px; }
.zorlinq-entry-title { font-size: 2rem; font-weight: 800; line-height: 1.3; margin: 0 0 10px; }
.zorlinq-post-meta { font-size: 0.85rem; color: var(--zorlinq-ink-muted); font-family: var(--zorlinq-font-mono); }
.zorlinq-post-meta a { color: var(--zorlinq-ink-muted); }

.zorlinq-entry-thumbnail { margin-bottom: 28px; border-radius: 14px; overflow: hidden; }
.zorlinq-entry-thumbnail img { width: 100%; }

.zorlinq-entry-content { font-size: 1.05rem; }
.zorlinq-entry-content p { margin: 0 0 1.3em; }
.zorlinq-entry-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zorlinq-entry-content img { border-radius: 10px; margin: 1.5em auto; }

/* ── H태그 기본값(정적 폴백) — 실제 값은 동적 CSS가 덮어씀 ── */
.entry-content h2, .zorlinq-entry-content h2 { font-size: 1.6rem; font-weight: 800; margin: 2em 0 .6em; }
.entry-content h3, .zorlinq-entry-content h3 { font-size: 1.3rem; font-weight: 700; margin: 1.8em 0 .5em; }
.entry-content h4, .zorlinq-entry-content h4 { font-size: 1.1rem; font-weight: 700; margin: 1.6em 0 .4em; }
.entry-content h5, .zorlinq-entry-content h5 { font-size: 1rem; font-weight: 700; margin: 1.4em 0 .4em; }
.entry-content h6, .zorlinq-entry-content h6 { font-size: .9rem; font-weight: 700; margin: 1.2em 0 .4em; color: var(--zorlinq-ink-muted); }

/* ── 버튼(전역) ──────────────────────────────────────────── */
.zorlinq-btn, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 24px; font-weight: 700; font-size: .95rem; cursor: pointer;
	border-radius: var(--zorlinq-btn-radius); background: var(--zorlinq-btn-primary); color: var(--zorlinq-btn-text);
	border: none; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.zorlinq-btn:hover, .wp-block-button__link:hover { text-decoration: none; }

/* ── 소셜 공유 바 ────────────────────────────────────────── */
.zorlinq-share { margin: 28px 0; display: flex; align-items: center; }
.zorlinq-share__native-btn {
	display: none; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
	border: 1px solid var(--zorlinq-line); background: var(--zorlinq-paper); color: var(--zorlinq-ink);
	font-weight: 700; font-size: .9rem; cursor: pointer;
}
.zorlinq-share--native .zorlinq-share__native-btn { display: inline-flex; }
.zorlinq-share--native .zorlinq-share__fallback { display: none; }

.zorlinq-share__fallback { display: none; gap: 10px; flex-wrap: wrap; }
.zorlinq-share--fallback .zorlinq-share__fallback { display: flex; }

.zorlinq-share__btn {
	width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: #f1f1f4; color: var(--zorlinq-ink); border: none; cursor: pointer;
}
.zorlinq-share__btn:hover { background: var(--zorlinq-accent); color: #fff; }
.zorlinq-share__btn.is-copied { background: #0f9d68; color: #fff; }

/* ── 관련글/이전-다음글 (Zorlinq32 플러그인이 the_content로 삽입) ── */
.zorlinq32-related-posts, .zorlinq32-prev-next { margin: 40px 0 0; }

/* ── 게시물 카드 그리드 (홈/아카이브) ────────────────────── */
.zorlinq-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.zorlinq-post-card { background: var(--zorlinq-paper); border: 1px solid var(--zorlinq-line); border-radius: 14px; overflow: hidden; }
.zorlinq-post-card__thumb { aspect-ratio: 16/9; background: #eef0ef; position: relative; }
.zorlinq-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 대표 이미지가 없는 글: 제목 첫 글자를 큼직하게 보여주는 플레이스홀더로
   대체해, 카드가 비어 보이지 않으면서도 불필요한 <img> 요청을 만들지 않습니다. */
.zorlinq-post-card__thumb-fallback {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 2.6rem; font-weight: 800; color: var(--zorlinq-accent);
	background: linear-gradient(135deg, color-mix(in srgb, var(--zorlinq-accent) 12%, #fff), color-mix(in srgb, var(--zorlinq-accent) 4%, #fff));
}
.zorlinq-post-card__body { padding: 18px; }
.zorlinq-post-card__title { font-size: 1.05rem; margin: 8px 0; }
.zorlinq-post-card__title a { color: var(--zorlinq-ink); }
.zorlinq-post-card__excerpt { font-size: .9rem; color: var(--zorlinq-ink-muted); }
.zorlinq-post-meta--card { margin-bottom: 4px; }

/* ── 홈 카테고리 섹션 ────────────────────────────────────── */
.zorlinq-home-section { margin-bottom: 48px; }
.zorlinq-home-section:last-child { margin-bottom: 0; }
.zorlinq-home-section__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin-bottom: 18px;
}
.zorlinq-home-section__title { font-size: 1.4rem; font-weight: 800; margin: 0; line-height: 1.3; }
.zorlinq-home-section__title a { color: var(--zorlinq-ink); }
.zorlinq-home-section__title a:hover { color: var(--zorlinq-accent); text-decoration: none; }
.zorlinq-home-section__more {
	flex-shrink: 0; font-size: .85rem; font-weight: 700; color: var(--zorlinq-ink-muted);
	display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.zorlinq-home-section__more:hover { color: var(--zorlinq-accent); text-decoration: none; }
.zorlinq-post-grid--section { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── 사이드바 위젯 ───────────────────────────────────────── */
.widget { background: var(--zorlinq-paper); border: 1px solid var(--zorlinq-line); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.widget-title { font-size: 1rem; font-weight: 800; margin: 0 0 12px; }

/* ── 페이지네이션 ────────────────────────────────────────── */
.zorlinq-pagination, .pagination, .navigation.pagination {
	margin-top: 32px; padding: 20px 24px; background: var(--zorlinq-paper);
	border: 1px solid var(--zorlinq-line); border-radius: 12px;
}
.nav-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zorlinq-page-links { margin: 24px 0; padding: 16px 20px; background: var(--zorlinq-paper); border: 1px solid var(--zorlinq-line); border-radius: 10px; }

/* ── 푸터 ────────────────────────────────────────────────── */
.zorlinq-footer { background: var(--zorlinq-paper); border-top: 1px solid var(--zorlinq-line); padding: 40px 0; margin-top: 60px; }
.zorlinq-footer__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 24px; }
.zorlinq-footer-menu { display: flex; gap: 20px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.zorlinq-footer__bottom { font-size: .85rem; color: var(--zorlinq-ink-muted); }

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 900px) {
	.zorlinq-main-layout { grid-template-columns: 1fr !important; padding: 36px 20px 28px; gap: 32px; }
	.zorlinq-layout--sidebar-left .zorlinq-content-area,
	.zorlinq-layout--sidebar-left .zorlinq-sidebar { order: initial; }
}

@media (max-width: 780px) {
	.zorlinq-container { padding: 0 18px; }
	.zorlinq-primary-nav {
		position: absolute; top: 72px; left: 0; right: 0; background: var(--zorlinq-paper);
		border-bottom: 1px solid var(--zorlinq-line); display: none; flex-direction: column; padding: 12px;
		max-height: calc(100vh - 72px); overflow-y: auto; z-index: 99;
	}
	.zorlinq-primary-nav.is-open { display: flex; }
	.zorlinq-menu { flex-direction: column; gap: 2px; }
	.zorlinq-menu a { display: block; padding: 12px 14px; }
	.zorlinq-menu-toggle { display: block; }
	.zorlinq-entry-title { font-size: 1.6rem; }

	/* 모바일은 hover가 없으므로, 하위 메뉴를 절대 위치 팝업이 아니라
	   항상 펼쳐진 상태(아코디언처럼 이어서 보임)로 전환합니다. */
	.zorlinq-menu .sub-menu {
		display: block; position: static; box-shadow: none; border: none;
		background: transparent; padding-left: 14px; margin-top: 2px;
	}
	.zorlinq-menu .sub-menu .sub-menu { padding-left: 14px; }
	.zorlinq-menu .menu-item-has-children > a::after { display: none; }
}

@media (max-width: 480px) {
	.zorlinq-post-grid { grid-template-columns: 1fr; }
	.zorlinq-home-section__title { font-size: 1.2rem; }
}