/* =====================================================================
   daynary.com — NotesLab 테마 디자인 커스터마이징
   적용 위치: 워드프레스 관리자 → 외모(Appearance) → 사용자 정의하기(Customize)
             → 추가 CSS(Additional CSS)
   (신버전 관리자에서는 "디자인 > 추가 CSS" 로 표기될 수 있음)
   ===================================================================== */
/* ---------------------------------------------------------------------
   0-2. LETTER FROM DAYNARY 전용 배경 레이어
   부모(.clip-block, theme-3 베이지)는 건드리지 않고, 이 섹션(뉴스레터 문구
   + SNS/Designed with WordPress)에만 별도 배경 레이어를 얹음. 아래쪽
   "Daynary" 대형 워드마크 영역은 이 클래스 밖이라 기존 베이지 그대로 유지됨.
   inset 단축 속성은 Additional CSS 저장 시 제거되는 것을 이전에 확인해
   top/right/bottom/left로 대체함.
   --------------------------------------------------------------------- */
.letter-daynary-section {
	position: relative;
}

.letter-daynary-section::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--theme-1);
}

.letter-daynary-section > * {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
   0. SUIT 폰트 전역 적용 (2/2 — Additional CSS로 처리하는 부분)
   본문/제목/버튼은 Global Styles(styles.typography 등, 워드프레스 코어가
   직접 생성하는 CSS)로 처리함 — 그쪽은 :root 커스텀 속성이 아니라
   일반 스타일 값이라 정상 저장됨.
   여기서는 Global Styles의 "elements" 스키마에 없는 부분(폼 입력창,
   "has-rubik-font-family" 유틸리티 클래스가 붙은 날짜/카테고리 라벨류)만
   보완함. 폰트 이름을 직접 값으로 넣는 일반 속성 선언이라 정상 저장됨.
   --------------------------------------------------------------------- */
.has-rubik-font-family {
	font-family: 'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif !important;
}

input, textarea, select, button {
	font-family: 'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------
   0-1. 최신 글 카드 — 대표이미지 썸네일 (제목 아래, 약 360x220px)
   .daynary-card-thumb / .daynary-latest-excerpt 클래스는 이 카드에만
   붙는 신규 클래스라 다른 페이지/섹션에 영향 없음. 기존 카드는
   border-radius를 안 쓰므로 여기서도 새로 추가하지 않음.
   --------------------------------------------------------------------- */
.daynary-card-thumb {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 360 / 220;
	overflow: hidden;
}

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

@media (max-width: 782px) {
	.daynary-card-thumb {
		max-width: 100%;
	}
}

/* 최신 글 카드 요약문 — 데스크톱 기준 최대 3줄 높이로 제한(본문 자체는 변경 없음, 표시만 제어)
   -webkit-line-clamp/-webkit-box-orient는 Additional CSS 저장 시 제거되는 것을
   확인해(실제 테스트) 표준 속성인 max-height + overflow로 대체함.
   font-size/line-height를 명시해 3줄(line-height 1.65 x 3 = 4.95em) 높이를
   정확히 계산함 — 전역 규칙(line-height:1.8)보다 클래스 2개 선택자라 우선 적용됨. */
.daynary-latest-excerpt .wp-block-post-excerpt__excerpt {
	font-size: 1rem;
	line-height: 1.65;
}

/* "더 읽기" 링크를 요약문과 분리된 줄로 표시 (showMoreOnNewLine:true 결과인
   .wp-block-post-excerpt__more-text 문단을 이 카드 안에서만 스타일링) */
.daynary-latest-excerpt .wp-block-post-excerpt__more-text {
	margin-top: 18px;
}

.daynary-latest-excerpt .wp-block-post-excerpt__more-link {
	font-size: 14px;
	text-decoration: none;
}

.daynary-latest-excerpt .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/* 최신 글 카드 — 모바일에서만 순서 재배치: 카테고리 → 제목 → 이미지 → 요약 → 더 읽기.
   .daynary-card-columns는 이 카드의 wp:columns에만 붙는 클래스라 다른 columns 블록에는
   영향 없음. display:contents로 두 칼럼(wp-block-column) 박스만 제거해 안의 블록들이
   바로 위 flex 컨테이너의 아이템이 되게 하고, 각 블록에 order를 지정함 */
@media (max-width: 600px) {
	.daynary-card-columns {
		display: flex;
		flex-direction: column;
	}
	
	.daynary-card-columns > .wp-block-column {
		display: contents;
	}
	
	.daynary-card-category {
		order: 1;
	}
	
	.daynary-card-title {
		order: 2;
	}
	
	.daynary-card-thumb {
		order: 3;
	}
	
	.daynary-latest-excerpt {
		order: 4;
	}
}

/* 최신 글 카드 카테고리 — 이 카드에서만 배지(둥근 배경/패딩) 대신 일반 텍스트로 표시.
   전역 .wp-block-post-terms.taxonomy-category 배지 규칙은 다른 페이지를 위해 그대로 둠 */
.daynary-card-category.wp-block-post-terms.taxonomy-category {
	display: block;
	padding: 0;
	border-radius: 0;
	margin-bottom: 16px;
}

/* [수정] :root 커스텀 속성(변수)은 WordPress.com Additional CSS 저장/서빙
   파이프라인이 제거하는 것으로 확인되어, 아래에서는 값을 직접 하드코딩함 */
/* ---------------------------------------------------------------------
   1. 전역 타이포그래피 / 여백
   --------------------------------------------------------------------- */
body {
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -.01em;
}

.entry-content p,
.wp-block-post-excerpt__excerpt {
	line-height: 1.8;
}

/* 화면 좌우 여백을 살짝 넓혀 밀도를 낮춤 */
body {
}

/* ---------------------------------------------------------------------
   2. 헤더
   --------------------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-block-site-title a {
	font-weight: 700;
	letter-spacing: -.02em;
}

.wp-block-navigation-item__content {
	font-weight: 500;
	transition: opacity .2s ease;
}

.wp-block-navigation-item__content:hover {
	opacity: .6;
}

/* ---------------------------------------------------------------------
   3. 메인 피드 / 카테고리 목록 — 리스트를 카드형으로
      (홈, 카테고리 아카이브 모두 동일한 wp-block-post-template 사용)
   --------------------------------------------------------------------- */
.wp-block-post-template.is-layout-flow {
	display: flex;
	flex-direction: column;
	gap: 20px !important;
}

.wp-block-post-template.is-layout-flow > .wp-block-post {
	background: var(--wp--preset--color--theme-1);
	border: 1px solid var(--wp--preset--color--theme-4);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.wp-block-post-template.is-layout-flow > .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(39,12,34,.16);
}

/* 기존 상단 구분선을 카드 자체 테두리로 대체 */
.wp-block-post-template.is-layout-flow > .wp-block-post > .wp-block-group {
	border-top: none !important;
	padding: 22px 28px !important;
}

/* 관련글/그리드형 카드 (단일 글 하단, 일부 위젯) */
.wp-block-post-template.is-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px !important;
}

.wp-block-post-template.is-layout-grid > .wp-block-post {
	background: var(--wp--preset--color--theme-1);
	border: 1px solid var(--wp--preset--color--theme-4);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(39,12,34,.10);
	transition: transform .25s ease, box-shadow .25s ease;
}

.wp-block-post-template.is-layout-grid > .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(39,12,34,.16);
}

.wp-block-post-template.is-layout-grid > .wp-block-post > .wp-block-group {
	padding: 0 20px 22px !important;
}

.wp-block-post-featured-image img {
	transition: transform .5s ease;
}

.wp-block-post-template.is-layout-grid > .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* 게시글 제목 / 발췌문 */
.wp-block-post-title {
	font-weight: 500;
}

.wp-block-post-excerpt__more-link {
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   4. 카테고리 라벨(뱃지)
   --------------------------------------------------------------------- */
.wp-block-post-terms.taxonomy-category {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.wp-block-post-terms.taxonomy-category a {
	text-decoration: none;
}

/* 카테고리 아카이브 페이지 상단 제목 */
.wp-block-query-title {
	position: relative;
	padding-bottom: 14px;
}

.wp-block-query-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--wp--preset--color--theme-3);
}

/* ---------------------------------------------------------------------
   5. 게시글 상세 페이지
   --------------------------------------------------------------------- */
.entry-content.wp-block-post-content {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.05rem;
}

.entry-content.wp-block-post-content > p:first-child:has(~ h2, ~ h3, ~ h4) {
	display: none;
}

.entry-content p {
	margin-bottom: 24px;
}

.entry-content h2 {
	margin-top: 48px;
	margin-bottom: 24px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}

.entry-content h3 {
	margin-top: 36px;
	margin-bottom: 18px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}

.entry-content h4 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 28px;
	margin-bottom: 16px;
}

.entry-content img {
	border-radius: 12px;
}

.entry-content blockquote {
	border-left: 3px solid var(--wp--preset--color--theme-3);
	padding-left: 20px;
	font-style: italic;
}

.entry-content pre,
.entry-content code {
	border-radius: 6px;
}

/* 상세 페이지 상단 카테고리 뱃지와 제목 사이 여백 */
.wp-block-post-title.has-xx-large-font-size {
	margin-top: 16px;
}

/* ---------------------------------------------------------------------
   6. 푸터
   --------------------------------------------------------------------- */
footer.wp-block-template-part {
	font-size: var(--wp--preset--font-size--x-small);
}

footer.wp-block-template-part a {
	text-decoration: none;
}

footer.wp-block-template-part a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   7. 모바일 반응형 (600px 이하)
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-post-template.is-layout-flow > .wp-block-post > .wp-block-group {
		padding: 18px !important;
	}
	
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
	
	.entry-content.wp-block-post-content {
		font-size: 1rem;
	}
	
	h1 {
		font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
	}
	
	body {
	}
	
	.entry-content p {
		line-height: 1.75;
		margin-bottom: 20px;
	}
	
	.entry-content h2 {
		margin-top: 36px;
		font-size: 26px;
	}
	
	.entry-content h3 {
		margin-top: 28px;
		font-size: 21px;
	}
	
	.entry-content h4 {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------
   8. 한글 타이포그래피 — 단어 중간 줄바꿈 방지
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, li, a {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   9. 카테고리 랜딩페이지 — 목록 스타일 정리 (core/categories 블록)
   --------------------------------------------------------------------- */
.daynary-category-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.daynary-category-list li {
	border-top: 1px solid var(--wp--preset--color--theme-4);
	padding: 18px 4px;
}

.daynary-category-list li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--theme-4);
}

/* 기본 제공 "미분류"(카테고리 ID 1)만 목록에서 숨김 — 코어 categories 블록이
   exclude 속성을 지원하지 않아(배열/문자열 둘 다 시도, 무시됨) 부득이하게 CSS로 처리.
   카테고리 자체나 게시글 분류는 전혀 변경하지 않음, 이 페이지의 표시에만 한정. */
.daynary-category-list .cat-item-1 {
	display: none;
}

.daynary-category-list a {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 500;
	text-decoration: none;
}

.daynary-category-list a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   10. Hero 하단 패턴 — 2026-09-18 사용자 요청으로 복구됨.
   테마 기본 .gradient-animate::after(잎사귀 이미지 + 무지개 그라디언트 +
   mix-blend-mode:difference)를 그대로 사용 중. 이 섹션에서 오버라이드하지 않음.
   시도했던 대체 패턴("쌓이는 하루의 조각")은
   backups/customcss/customcss-20260917-181543.css 에 보관되어 있어
   필요시 언제든 다시 적용 가능함.
   --------------------------------------------------------------------- */