/*
 * 첫 화면 스타일 — eeyoremind Interactive.
 *
 * 모든 규칙이 .eeyoremind-home 아래에 있다. 예외는 둘이다 — 활동 그래프 블록(첫 화면 밖에서 쓰이지 않는다)과,
 * 첫 화면이 있는 문서의 바탕색(body:has(.eeyoremind-home)). 덕분에 글과 페이지의 스타일은 부모 테마 그대로다.
 *
 * 시각 기준은 사용자와 합의한 v6 시안이다 → subprojects/03-archive-experience/PLAN-interactive-theme-rollout.md
 * - 가운데 세 블록(대표 글 · 최근 글 · 글 탐색)만 밝은 종이 면과 오른쪽 · 아래쪽의 옅은 그림자를 갖는다
 * - 오른쪽 넷(사진 · 단상 · 책 · 최근 여섯 달의 기록)은 따로 떨어진 베이지 모듈이다. 한 판으로 묶지 않는다
 * - 글 탐색의 카드는 저채도 여러 색이다. 색은 글 id로 정하고 뜻을 갖지 않는다
 * - 글꼴 파일은 싣지 않는다 — 첫 화면에서만 시스템 글꼴 목록을 쓴다
 *
 * 폭은 비율로 잡고 글자와 간격은 부모 테마(Twenty Twenty-Five)의 유동 설정에 맡긴다.
 */

.eeyoremind-home {
	--eho-ink: #191814;
	--eho-ink-2: #3e3b34;
	--eho-muted: #6f6a5e;
	--eho-rule: #d8d2c6;
	--eho-surface-low: #faf8f3;
	--eho-accent: #4a6150;
	--eho-column-gap: clamp(24px, 3vw, 48px);
	--eho-sheet-bg: #fff;
	--eho-sheet-border: #e8e8e2;
	--eho-sheet-shadow: 2px 4px 12px rgba(37, 44, 37, 0.055), 1px 1px 0 rgba(37, 44, 37, 0.02);
	--eho-sheet-title: #37463b;
	--eho-module-bg: #f3f1e9;
	--eho-module-rule: #dcdbd1;
	--eho-hover: #e9efe8;
	--eho-focus: #5e8469;

	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	letter-spacing: -0.01em;
}

body:has(.eeyoremind-home) {
	background-color: #fbfaf7;
}

/* ─── 3단 뼈대 ─────────────────────────────────────────────── */

/*
 * 3단을 공통 파트로 뺐더니 main 과 columns 사이에 .wp-block-template-part 가
 * 하나 끼었다. 코어의 constrained 레이아웃은 직접 자식에게만 넓은 폭을 주므로
 * (컨테이너 > .alignwide) 그 div 가 본문 폭에 갇히고 3단이 함께 좁아진다.
 * 끼어든 래퍼에 넓은 폭을 직접 준다.
 */
.eeyoremind-home > .wp-block-template-part {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.eeyoremind-home .eho-columns {
	gap: var(--eho-column-gap);
}

/*
 * 블록 마크업의 15 / 57 / 28 은 합이 정확히 100% 라서 열 사이 간격만큼 넘친다.
 * 양옆을 고정하고 본문이 남는 폭을 가져가게 한다. 인라인 flex-basis 를 이기려면 !important 가 필요하다.
 */
.eeyoremind-home .eho-rail {
	flex: 0 0 clamp(168px, 14%, 200px) !important;
}

.eeyoremind-home .eho-main {
	flex: 1 1 0 !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eeyoremind-home .eho-side {
	flex: 0 0 clamp(250px, 26%, 330px) !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

/* 열 사이의 블록 간격은 위 gap 이 정한다 — 코어의 블록 간 margin 을 겹쳐 두지 않는다. */
.eeyoremind-home .eho-main > *,
.eeyoremind-home .eho-side > * {
	margin-block: 0;
}

/*
 * 데스크톱에서 사진 모듈을 보조 썸네일 크기에 가두지 않는다.
 * 우측을 넓히되 가운데 글 칼럼이 지나치게 좁아지는 것은 막는다.
 */
@media (min-width: 1200px) {
	.eeyoremind-home .eho-side {
		flex-basis: clamp(370px, 34%, 440px) !important;
	}
}

/* ─── 왼쪽 — 사이트 이름 · 기록 찾아보기 · 월별 보기 · 커피 아틀라스(blocks/home-coffee/style.css) ─── */

/* 링크가 늘어 화면보다 길어지면 rail 안에서 스크롤한다 — 아래 항목에 닿지 못하는 일을 막는다. */
.eeyoremind-home .eho-rail__inner {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.eeyoremind-home .eho-rail__wordmark {
	font-size: 1.3rem;
	font-weight: 760;
	letter-spacing: -0.05em;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: keep-all;
}

.eeyoremind-home .eho-rail__wordmark a {
	color: var(--eho-ink);
	text-decoration: none;
}

.eeyoremind-home .eho-rail__intro,
.eeyoremind-home .eho-meta {
	color: var(--eho-muted);
	font-size: 0.8rem;
	line-height: 1.75;
	margin: 0;
}

.eeyoremind-home .eho-rail__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: #657368;
	margin: 0.4rem 0 0.1rem;
	padding: 0.85rem 0.7rem 0;
	border-top: 1px solid var(--eho-sheet-border);
}

.eeyoremind-home .eho-rail__archive,
.eeyoremind-home .eho-rail__months {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * 기록 찾아보기의 항목은 줄 전체가 누르는 자리다 — 최소 48px. 글자만 정확히 눌러야 하는 링크를 두지 않는다.
 * 월별 보기도 같은 높이로 둔다.
 */
.eeyoremind-home .eho-rail__archive a,
.eeyoremind-home .eho-rail__months a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	color: #4e6153;
	font-size: 0.84rem;
	font-weight: 540;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.17s, color 0.17s;
}

.eeyoremind-home .eho-rail__archive a:hover,
.eeyoremind-home .eho-rail__months a:hover {
	background: var(--eho-hover);
	color: #234736;
}

.eeyoremind-home .eho-rail__archive a:active,
.eeyoremind-home .eho-rail__months a:active {
	background: #dce8dc;
}

.eeyoremind-home .eho-rail__archive a:focus-visible,
.eeyoremind-home .eho-rail__months a:focus-visible {
	outline: 2px solid var(--eho-focus);
	outline-offset: 1px;
	background: #edf2ec;
}

/* 아카이브는 다른 화면으로 가는 목적지다 — 글자를 조금 더 세게 두고 화살표로 표시한다 */
.eeyoremind-home .eho-rail__archive a {
	color: #2f4636;
	font-weight: 620;
}

.eeyoremind-home .eho-rail__archive a::after {
	content: "→";
	margin-left: auto;
	padding-left: 0.5rem;
	color: var(--eho-muted);
	font-weight: 400;
}

.eeyoremind-home .eho-rail__sublabel {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--eho-muted);
	margin: 0.3rem 0 0;
	padding: 0 0.7rem;
}

.eeyoremind-home .eho-rail__months--select {
	display: none;
}

.eeyoremind-home .eho-rail__months--select select {
	font: inherit;
	color: var(--eho-ink);
	background: var(--eho-surface-low);
	border: 1px solid var(--eho-rule);
	border-radius: 6px;
	max-width: 100%;
	min-height: 48px;
	padding: 0.35rem 0.6rem;
}

/* 앵커로 뛰었을 때 제목이 화면 맨 위에 붙지 않게 */
.eeyoremind-home .eho-sheet,
.eeyoremind-home .eho-module-card,
.eeyoremind-home .eho-section-title,
.eeyoremind-home .eho-activity {
	scroll-margin-top: 1.5rem;
}

/* ─── 구역 제목 ────────────────────────────────────────────── */

.eeyoremind-home .eho-section-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--eho-ink);
	margin: 2.6rem 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--eho-rule);
}

.eeyoremind-home .eho-empty {
	color: var(--eho-muted);
	font-size: 0.9rem;
}

/* ─── 가운데 — 종이 면 세 블록 ───────────────────────────────── */

/*
 * 대표 글 · 최근 글 · 글 탐색은 서로 떨어진 밝은 종이 면이다. 오른쪽 · 아래쪽의 옅은 그림자는 이 셋에만 둔다.
 * 번호와 세로 강조선은 쓰지 않는다. 세 제목은 글꼴 · 크기 · 색이 같다.
 */
.eeyoremind-home .eho-sheet {
	box-sizing: border-box;
	min-width: 0;
	background: var(--eho-sheet-bg);
	border: 1px solid var(--eho-sheet-border);
	border-radius: 5px;
	box-shadow: var(--eho-sheet-shadow);
	padding: 23px 24px 26px;
}

.eeyoremind-home .eho-sheet--recent {
	padding-bottom: 10px;
}

/* 면 안의 간격은 제목의 아래 여백이 정한다 — 코어 flow 레이아웃의 블록 간 margin 을 겹치지 않는다. */
.eeyoremind-home .eho-sheet > *,
.eeyoremind-home .eho-module-card > *,
.eeyoremind-home .eho-featured .wp-block-post-template,
.eeyoremind-home .eho-recent .wp-block-post-template {
	margin-block: 0;
}

.eeyoremind-home .eho-sheet .eho-section-title {
	font-size: 15px;
	font-weight: 680;
	line-height: 1.45;
	letter-spacing: -0.025em;
	color: var(--eho-sheet-title);
	margin: 0 0 17px;
	padding: 0;
	border: 0;
}

.eeyoremind-home .eho-sheet__head,
.eeyoremind-home .eho-explore__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.eeyoremind-home .eho-sheet__head {
	padding-bottom: 13px;
}

.eeyoremind-home .eho-explore__head {
	margin-bottom: 14px;
}

.eeyoremind-home .eho-sheet__head > .eho-section-title,
.eeyoremind-home .eho-explore__head > .eho-section-title {
	margin: 0;
}

.eeyoremind-home .eho-sheet__note,
.eeyoremind-home .eho-explore__count {
	margin: 0;
	font-size: 0.72rem;
	color: #869084;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ─── 가운데 — 대표 글 · 최근 글 ─────────────────────────────── */

.eeyoremind-home .eho-featured__title {
	font-family: Georgia, "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", serif;
	font-size: clamp(1.6rem, 2.6vw, 2.35rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.35;
	margin: 0.4rem 0 0.9rem;
	overflow-wrap: anywhere;
	word-break: keep-all;
}

.eeyoremind-home .eho-featured__title a {
	color: var(--eho-ink);
	text-decoration: none;
}

.eeyoremind-home .eho-featured__excerpt {
	max-width: 60ch;
}

/*
 * 앞부분은 본문 첫 문장들이다(inc/home-lead.php). 대표 글은 조금 크게 3줄, 최근 글은 2줄까지 보이고
 * 넘치면 말줄임표로 끝난다. 더보기 링크는 다른 문단이라 줄 수 제한에 걸리지 않는다.
 */
.eeyoremind-home .eho-featured__excerpt .wp-block-post-excerpt__excerpt,
.eeyoremind-home .eho-card__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eeyoremind-home .eho-featured__excerpt .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: 1.05rem;
	line-height: 1.95;
	color: #464e46;
	word-break: keep-all;
}

.eeyoremind-home .eho-featured__excerpt .wp-block-post-excerpt__more-link {
	color: #3b604c;
	font-size: 0.84rem;
	text-decoration: none;
	border-bottom: 1px solid #789080;
	padding-bottom: 2px;
}

.eeyoremind-home .eho-card__excerpt .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/*
 * 최근 글은 카드가 아니라 단일 열의 편집형 기사 목록이다.
 * 짧은 글도 억지로 높이를 맞추지 않는다. 사진이 있는 글만 오른쪽에
 * 전체 이미지를 놓고, 없는 글은 같은 서체와 선으로 자연스럽게 펼친다.
 */
.eeyoremind-home .eho-recent .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0;
	margin: 0;
	padding: 0;
}

.eeyoremind-home .eho-recent .wp-block-post-template > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "date" "title" "excerpt";
	align-content: start;
	align-items: start;
	gap: 0.3rem;
	min-width: 0;
	padding: clamp(1.1rem, 2.1vw, 1.3rem) 0;
	border: 0;
	border-top: 1px solid var(--eho-rule);
	border-radius: 0;
	background: transparent;
}

/* 이미지가 없는 글을 빈 이미지 칸에 맞추지 않는다. */
.eeyoremind-home .eho-recent .wp-block-post-template > li:has(> .wp-block-post-featured-image) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
	grid-template-areas: "date image" "title image" "excerpt image";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(0.9rem, 2vw, 1.4rem);
}

.eeyoremind-home .eho-recent .wp-block-post-template > li > * {
	margin-block: 0;
}

.eeyoremind-home .eho-recent .wp-block-post-template > li > .eho-meta {
	grid-area: date;
}

.eeyoremind-home .eho-recent .wp-block-post-template > li > .eho-card__title {
	grid-area: title;
}

.eeyoremind-home .eho-recent .wp-block-post-template > li > .eho-card__excerpt {
	grid-area: excerpt;
}

/*
 * 사진 칸의 높이는 글(날짜 · 제목 · 첫 문장)의 높이다. 사진이 칸 높이를 정하면 남는 높이가 세 줄 사이로
 * 나뉘어 글이 띄엄띄엄 놓인다. 사진은 칸의 폭을 채우고, 글보다 길면 가운데를 남기고 위아래를 자른다 — 대표 글과 같은 방식이다.
 * 비율은 img의 width · height 속성이 준다. 코어는 지연 로딩 사진에 sizes="auto"를 붙이고, 그러면 브라우저가
 * 사진의 실제 크기 대신 자리 크기(3000×1500)로 계산하므로 aspect-ratio로 속성의 비율을 지우지 않는다.
 */
.eeyoremind-home .eho-recent .wp-block-post-template > li > .wp-block-post-featured-image {
	grid-area: image;
	position: relative;
	align-self: stretch;
	min-height: 6.5rem;
	margin: 0;
	min-width: 0;
}

.eeyoremind-home .eho-recent .wp-block-post-featured-image > a {
	position: absolute;
	inset: 0;
	display: block;
}

.eeyoremind-home .eho-recent .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.eeyoremind-home .eho-recent .eho-empty {
	margin: 0;
	padding: 1.1rem 0 1rem;
	border-top: 1px solid var(--eho-rule);
}

.eeyoremind-home .eho-card__title {
	font-size: clamp(1.02rem, 1.5vw, 1.15rem);
	font-weight: 660;
	letter-spacing: -0.035em;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}

.eeyoremind-home .eho-card__title a {
	color: var(--eho-ink);
	text-decoration: none;
}

.eeyoremind-home .eho-card__excerpt {
	font-size: 0.86rem;
	line-height: 1.85;
	color: #727e73;
}

/*
 * 대표 글도 최근 글처럼 글이 왼쪽, 사진이 오른쪽이다. 사진이 가운데 면의 폭을 다 차지하면
 * 제목과 첫 문장들이 첫 화면 아래로 밀린다. 사진이 없는 글은 글만 한 열로 펼친다.
 * 템플릿(parts/home-body.html)의 순서는 날짜 → 제목 → 사진 → 첫 문장들이다. 한 열에서는 그대로 쌓이고, 두 열에서는
 * 사진만 오른쪽 칸으로 간다 — Tab · 화면 읽기 프로그램은 어느 폭에서든 제목을 사진보다 먼저 만난다.
 */
.eeyoremind-home .eho-featured .wp-block-post-template > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "date" "title" "excerpt";
	align-content: start;
	align-items: start;
	min-width: 0;
}

.eeyoremind-home .eho-featured .wp-block-post-template > li:has(> .wp-block-post-featured-image) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	grid-template-areas: "date image" "title image" "excerpt image";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(1.1rem, 2.4vw, 1.8rem);
}

.eeyoremind-home .eho-featured .wp-block-post-template > li > .eho-meta {
	grid-area: date;
	margin-block: 0;
}

.eeyoremind-home .eho-featured .wp-block-post-template > li > .eho-featured__title {
	grid-area: title;
}

.eeyoremind-home .eho-featured .wp-block-post-template > li > .eho-featured__excerpt {
	grid-area: excerpt;
	margin-block: 0;
}

.eeyoremind-home .eho-featured .wp-block-post-template > li > .wp-block-post-featured-image {
	grid-area: image;
	margin: 0;
	min-width: 0;
}

/*
 * 비율은 최근 글 사진과 같이 img의 width · height 속성이 준다. 사진은 칸의 폭을 채우고, 높이 상한을 넘으면
 * 가운데를 남기고 위아래를 자른다 — 휴대폰으로 찍은 세로 사진이 화면을 길게 차지하지 않게 한다.
 * 한 열(781px 이하)에서는 사진이 글 위에 쌓이고 높이 14rem까지다. 390px 화면에서 4:3 가로 사진의 높이와 같다.
 */
.eeyoremind-home .eho-featured .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 14rem;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
 * 두 열에서는 사진 높이의 상한이 글 쪽(날짜부터 "이어서 읽기"까지)의 높이다. 세로 사진은 위아래가 잘려 글보다
 * 길게 내려가지 않고, 가로 사진은 대개 그보다 낮아 그대로 들어간다. 글이 아주 짧을 때를 위해 칸에 최소 높이를 둔다.
 */
@media (min-width: 782px) {
	.eeyoremind-home .eho-featured .wp-block-post-template > li > .wp-block-post-featured-image {
		position: relative;
		align-self: stretch;
		min-height: 10rem;
	}

	.eeyoremind-home .eho-featured .wp-block-post-featured-image > a {
		position: absolute;
		inset: 0;
		display: block;
	}

	.eeyoremind-home .eho-featured .wp-block-post-featured-image img {
		max-height: 100%;
	}
}

/* ─── 가운데 — 글 탐색 ──────────────────────────────────────── */

.eeyoremind-home .eho-sheet--explore {
	padding: 22px 22px 24px;
}

.eeyoremind-home .eho-explore__topics ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 16px;
	padding: 0;
}

/* 칩은 링크다 — 스크립트가 없어도 그 Topic의 첫 쪽으로 간다. 손가락으로 누를 높이(44px)를 둔다. */
.eeyoremind-home .eho-explore__chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	color: #647268;
	font-size: 0.8rem;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.eeyoremind-home .eho-explore__chip:hover {
	background: #ecefe9;
}

.eeyoremind-home .eho-explore__chip[aria-current="true"] {
	background: #395e4d;
	color: #fff;
}

.eeyoremind-home .eho-explore__chip:focus-visible,
.eeyoremind-home .eho-explore__step:focus-visible,
.eeyoremind-home .eho-explore__title a:focus-visible {
	outline: 2px solid var(--eho-focus);
	outline-offset: 2px;
}

/*
 * 카드 격자. 빠지는 카드는 움직이는 동안 격자 기준 절대 위치에 머문다(view.js) — 그래서 position: relative.
 * 칸 높이는 같은 줄 안에서만 맞춰지고, 오른쪽 열의 길이와는 상관없다.
 */
.eeyoremind-home .eho-explore__grid {
	position: relative;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 13px;
	margin: 0;
	padding: 0;
}

.eeyoremind-home .eho-explore__card {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	min-height: 9.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 17px 17px 15px;
	border: 1px solid #e4e6de;
	border-radius: 7px;
	background: #f4f5f0;
	box-shadow: 0 1px 4px rgba(38, 48, 39, 0.022);
	transition: border-color 0.16s, box-shadow 0.16s;
}

.eeyoremind-home .eho-explore__card:hover,
.eeyoremind-home .eho-explore__card:focus-within {
	border-color: #b7cbb9;
	box-shadow: 1px 3px 10px rgba(38, 48, 39, 0.055);
}

/* 저채도 여섯 색 — 글 id로 정한다(inc/post-explorer.php). Topic이나 사람에 대한 뜻은 없다. */
.eeyoremind-home .eho-explore__card--tone-0 { background: #f7f2ed; }
.eeyoremind-home .eho-explore__card--tone-1 { background: #eef4ee; }
.eeyoremind-home .eho-explore__card--tone-2 { background: #f7f2e6; }
.eeyoremind-home .eho-explore__card--tone-3 { background: #f0f1f7; }
.eeyoremind-home .eho-explore__card--tone-4 { background: #f4f5f0; }
.eeyoremind-home .eho-explore__card--tone-5 { background: #f3eff4; }

.eeyoremind-home .eho-explore__topics-of {
	margin: 0;
	font-size: 0.68rem;
	letter-spacing: 0.025em;
	color: #61806c;
}

.eeyoremind-home .eho-explore__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 610;
	line-height: 1.45;
	letter-spacing: -0.04em;
	overflow-wrap: anywhere;
	word-break: keep-all;
}

/* 카드 전체가 누르는 자리 — 링크는 제목 하나이고 그 범위를 카드로 넓힌다. */
.eeyoremind-home .eho-explore__title a {
	color: var(--eho-ink);
	text-decoration: none;
}

.eeyoremind-home .eho-explore__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 7px;
}

.eeyoremind-home .eho-explore__lead {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.7;
	color: #798379;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.eeyoremind-home .eho-explore__date {
	margin-top: auto;
	font-size: 0.7rem;
	color: #929990;
}

.eeyoremind-home .eho-explore__empty {
	margin: 0.6rem 0 0;
	padding: 1.4rem 0;
	text-align: center;
	font-size: 0.86rem;
	color: var(--eho-muted);
}

.eeyoremind-home .eho-explore__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid #e8e8e3;
	font-size: 0.82rem;
}

.eeyoremind-home .eho-explore__step {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 0.8rem;
	border-radius: 8px;
	color: #3b604c;
	text-decoration: none;
}

.eeyoremind-home a.eho-explore__step:hover {
	background: var(--eho-hover);
}

.eeyoremind-home .eho-explore__step[aria-disabled="true"] {
	color: #b5bab2;
}

.eeyoremind-home .eho-explore__where {
	color: #869084;
	font-variant-numeric: tabular-nums;
}

.eeyoremind-home [data-eho-explorer][aria-busy="true"] .eho-explore__grid {
	cursor: progress;
}

/* ─── 오른쪽 모듈 ──────────────────────────────────────────── */

/*
 * 사진 · 단상 · 책 · 최근 여섯 달의 기록은 따로 떨어진 베이지 모듈이다(v4). 한 판으로 합치지 않는다.
 * 그림자는 두지 않는다 — 입체감은 가운데 세 블록의 것이다. 사진과 단상은 길어지면 길어진 대로 둔다.
 */
.eeyoremind-home .eho-module-card,
.eeyoremind-home .eho-module.eho-reading,
.eeyoremind-home .eho-columns .eho-activity {
	box-sizing: border-box;
	min-width: 0;
	background: var(--eho-module-bg);
	border-radius: 9px;
	padding: 15px 16px 16px;
}

.eeyoremind-home .eho-module-card--photo {
	padding: 12px 12px 13px;
}

.eeyoremind-home .eho-module-card > .eho-section-title,
.eeyoremind-home .eho-reading > .eho-section-title,
.eeyoremind-home .eho-columns .eho-activity__heading {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--eho-ink);
	background: transparent;
	margin: 0 0 11px;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--eho-module-rule);
	border-radius: 0;
}

.eeyoremind-home .eho-module-card > .eho-module {
	background: transparent;
	margin: 0;
	padding: 0;
}

/*
 * 사진은 모듈 안쪽 폭을 다 쓴다. 코어 featured-image 블록의 aspect/figure 규칙을 쓰지 않고
 * 원본 비율 그대로 그린다.
 */
.eeyoremind-home .eho-photo > .eho-photo__figure {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.eeyoremind-home .eho-photo__figure > a {
	display: block;
}

.eeyoremind-home .eho-photo__figure img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 2px;
}

.eeyoremind-home .eho-photo__caption {
	font-size: 0.86rem;
	line-height: 1.85;
	color: #34322c;
	margin: 0.7rem 0.15rem 0.3rem;
}

.eeyoremind-home .eho-photo .eho-meta {
	padding: 0 0.15rem;
	font-size: 0.72rem;
}

.eeyoremind-home .eho-note__body {
	font-size: 0.88rem;
	line-height: 1.94;
	color: #4f574f;
	margin: 0 0 0.65rem;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/*
 * 작성할 때의 paragraph block 경계는 보존한다. 다만 일반 글 본문의 큰 문단 여백을 그대로 가져오면
 * 작은 모듈 안에서 글이 조각난 카드처럼 보인다. 엔터는 저자의 호흡으로 남기고 간격만 압축한다.
 */
.eeyoremind-home .eho-note__body > p {
	margin: 0;
}

.eeyoremind-home .eho-note__body > p + p {
	margin-top: 0.55em;
}

.eeyoremind-home .eho-note__body > :first-child {
	margin-top: 0;
}

.eeyoremind-home .eho-note__body > :last-child {
	margin-bottom: 0;
}

.eeyoremind-home .eho-note .eho-meta {
	font-size: 0.72rem;
}

/*
 * ADR-0018 독서 모듈. 제목은 ON/OFF 상태에 따라 동적 블록에서 그리고, 한 줄씩
 * 최대 3권을 담는다. 모듈 하나가 제목과 목록을 함께 담는다.
 */
.eeyoremind-home .eho-module.eho-reading {
	min-width: 0;
}

.eeyoremind-home .eho-reading__panel {
	background: transparent;
	padding: 0;
	border-radius: 0;
	min-width: 0;
}

.eeyoremind-home .eho-reading__list {
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.8rem;
	padding: 0;
	margin: 0;
}

.eeyoremind-home .eho-reading__book {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.7rem;
	min-width: 0;
	padding: 0;
	margin: 0;
}

.eeyoremind-home .eho-reading__book + .eho-reading__book {
	border-top: 1px solid var(--eho-module-rule);
	padding-top: 0.8rem;
}

.eeyoremind-home .eho-reading__cover--title {
	position: relative;
	flex: 0 0 50px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	width: 50px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	padding: 0.35rem;
	border: 1px solid #cfc6b4;
	border-radius: 2px;
	background: #ded0b3;
	color: #3e352c;
	font-size: 0.58rem;
	line-height: 1.28;
	overflow-wrap: anywhere;
}

.eeyoremind-home .eho-reading__cover--title span {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eeyoremind-home .eho-reading__cover--title .eeyoremind-cover {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: var(--eho-surface-low);
}

.eeyoremind-home .eho-reading__content {
	flex: 1 1 0;
	min-width: 0;
}

.eeyoremind-home .eho-reading__title {
	font-size: 0.86rem;
	line-height: 1.45;
	margin: 0;
	color: var(--eho-ink);
	overflow-wrap: anywhere;
}

.eeyoremind-home .eho-reading__byline {
	font-size: 0.76rem;
	line-height: 1.55;
	color: #838b80;
	margin: 0.28rem 0 0;
	overflow-wrap: anywhere;
}

.eeyoremind-home .eho-reading__more {
	margin: 0.95rem 0 0;
	font-size: 0.78rem;
}

.eeyoremind-home .eho-reading__more a {
	color: #567361;
	text-underline-offset: 3px;
}

/* ─── 활동 그래프 ──────────────────────────────────────────── */

.eho-activity {
	--eho-activity-cell: 20px;
	--eho-activity-gap: 4px;
	--eho-activity-columns: 13;
	--eho-level-0: #e2e0d6;
	--eho-level-1: #bfcfc0;
	--eho-level-2: #94ac96;
	--eho-level-3: #496f56;

	margin: 2.6rem 0 0;
}

.eho-activity__heading {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--eho-rule, #d8d2c6);
}

/*
 * 칸을 고정 px 로 두면 오른쪽 열이 좁아질 때 격자가 열을 넘어 삐져나간다.
 * 칸이 열 폭을 나눠 갖게 하고 최대 크기만 잡아 둔다 — 넓은 화면에서는 20px 그대로다.
 */
.eho-activity__grid,
.eho-activity__months {
	max-width: calc(
		var(--eho-activity-columns) * var(--eho-activity-cell) +
		(var(--eho-activity-columns) - 1) * var(--eho-activity-gap)
	);
}

.eho-activity__grid {
	display: grid;
	grid-template-columns: repeat(var(--eho-activity-columns), minmax(0, 1fr));
	gap: var(--eho-activity-gap);
}

.eho-activity__week {
	display: block;
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--eho-level-0);
}

.eho-activity__week.is-level-1 { background: var(--eho-level-1); }
.eho-activity__week.is-level-2 { background: var(--eho-level-2); }
.eho-activity__week.is-level-3 { background: var(--eho-level-3); }

.eho-activity__months {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.72rem;
	color: #6f6a5e;
}

.eho-activity__legend {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.9rem;
	font-size: 0.76rem;
	color: #55524a;
}

.eho-activity__formula {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.eho-activity__formula .eho-activity__week {
	width: 16px;
	height: 16px;
	aspect-ratio: auto;
	flex-shrink: 0;
}

.eeyoremind-home .eho-columns .eho-activity {
	margin: 0;
}

/* ─── 좁은 화면 ────────────────────────────────────────────── */

/* 782px 미만에서 Columns 를 세로로 쌓는 것은 코어가 한다. 여기서는 그 사이 구간만 정한다 */
@media (max-width: 1199px) and (min-width: 782px) {
	/*
	 * 코어가 782px 이상에서 .wp-block-columns 에 flex-wrap: nowrap 을 !important 로
	 * 건다. 같은 무게로 되받아야 차례가 제 줄로 내려간다.
	 */
	.eeyoremind-home .eho-columns {
		flex-wrap: wrap !important;
	}

	.eeyoremind-home .eho-rail {
		flex-basis: 100% !important;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid var(--eho-rule);
	}

	.eeyoremind-home .eho-rail__inner {
		position: static;
		max-height: none;
		overflow: visible;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 1rem;
	}

	.eeyoremind-home .eho-rail__archive {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 4px;
	}

	.eeyoremind-home .eho-rail__archive a {
		width: auto;
	}

	.eeyoremind-home .eho-rail__label,
	.eeyoremind-home .eho-rail__sublabel,
	.eeyoremind-home .eho-rail__months {
		display: none;
	}

	.eeyoremind-home .eho-rail__months--select {
		display: block;
	}

	/* 남은 한 줄을 본문과 오른쪽이 나눠 쓴다. 본문이 남는 폭을 가져간다 */
	.eeyoremind-home .eho-main {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}

	.eeyoremind-home .eho-side {
		flex-basis: 34% !important;
		flex-grow: 0 !important;
	}
}

/*
 * 한 열의 순서 — 대표 글 → 사진 → 단상 → 책 → 최근 글 → 최근 여섯 달의 기록 → 글 탐색(v6).
 * 이 순서는 CSS로 자리만 바꾸지 않는다. 화면 순서와 키보드(Tab) 순서가 갈라지기 때문이다. parts/home-body.html의 짧은 스크립트가
 * 오른쪽 모듈을 가운데 열의 제자리로 실제로 옮기고 .is-one-column을 붙인다. 스크립트가 없으면 마크업 순서(가운데 → 오른쪽)대로 쌓인다.
 */
@media (max-width: 781px) {
	.eeyoremind-home .eho-columns {
		gap: 14px;
	}

	.eeyoremind-home .eho-main {
		gap: 14px;
	}

	.eeyoremind-home .eho-columns.is-one-column > .eho-side {
		display: none;
	}

	.eeyoremind-home .eho-rail__inner {
		position: static;
		max-height: none;
		overflow: visible;
		gap: 0.6rem;
	}

	/*
	 * 한 열로 쌓이면 차례가 첫 글 앞을 통째로 막는다. 이름과 한 줄 소개, 그리고 다른 화면으로 가는
	 * 아카이브 링크 한 줄과 월별 선택만 남긴다. 커피 아틀라스 타일은 글 탐색 앞으로 옮겨진다(parts/home-body.html).
	 */
	.eeyoremind-home .eho-rail__archive {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}

	.eeyoremind-home .eho-rail__archive a {
		width: auto;
	}

	.eeyoremind-home .eho-rail__label,
	.eeyoremind-home .eho-rail__sublabel,
	.eeyoremind-home .eho-rail__months {
		display: none;
	}

	.eeyoremind-home .eho-rail__months--select {
		display: block;
	}

	.eeyoremind-home .eho-sheet {
		padding: 19px 18px 21px;
	}

	.eeyoremind-home .eho-sheet--recent {
		padding-bottom: 8px;
	}

	/*
	 * 한 열에서는 글 칸이 좁아 제목이 여러 줄로 부서진다 — 제목과 첫 문장들 사이에 사진을 쌓는다.
	 * 템플릿 순서 그대로라 보이는 순서와 읽는 순서(Tab · 화면 읽기 프로그램)가 같다.
	 */
	.eeyoremind-home .eho-featured .wp-block-post-template > li:has(> .wp-block-post-featured-image) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "date" "title" "image" "excerpt";
		grid-template-rows: none;
	}

	.eeyoremind-home .eho-featured .wp-block-post-template > li > .wp-block-post-featured-image {
		margin-bottom: 1rem;
	}

	.eeyoremind-home .eho-sheet--explore {
		padding: 18px 15px 19px;
	}

	.eeyoremind-home .eho-sheet .eho-section-title {
		font-size: 14px;
	}

	.eeyoremind-home .eho-sheet__note,
	.eeyoremind-home .eho-explore__count {
		white-space: normal;
		text-align: right;
	}

	.eeyoremind-home .eho-module-card,
	.eeyoremind-home .eho-module.eho-reading,
	.eeyoremind-home .eho-columns .eho-activity {
		padding: 12px 12px 13px;
	}

	.eho-activity {
		--eho-activity-cell: 18px;
	}
}

@media (max-width: 400px) {
	.eeyoremind-home .eho-sheet {
		padding: 17px 15px 19px;
	}

	.eeyoremind-home .eho-sheet--explore {
		padding: 16px 13px 18px;
	}

	.eeyoremind-home .eho-explore__chip {
		padding: 8px 11px;
	}
}

/* 움직임을 줄이도록 설정한 화면에서는 색 · 테두리의 전환도 바로 바꾼다(카드 이동은 view.js가 멈춘다). */
@media (prefers-reduced-motion: reduce) {
	.eeyoremind-home *,
	.eeyoremind-home *::before,
	.eeyoremind-home *::after {
		transition-duration: 0.01ms !important;
	}
}