/* ================================================================
   유이케어 메인 홈
   레퍼런스: 대형 타이틀 + 가로 탭 + 카드 그리드
   변형: 카테고리별 가로 슬라이드 + 시니어 UX
   ================================================================ */

/* ================================================================
   레이아웃 기준
   ----------------------------------------------------------------
   Twenty Twenty-Five 의 .is-layout-constrained 는 자식 폭을
   content-size(44rem)로 !important 제한한다. 홈/상세의 커스텀
   블록은 그 제약을 풀고, 대신 **모든 섹션이 같은 래퍼 폭과
   같은 좌우 여백**을 쓰도록 아래 한 곳에서 통제한다.

   - 바깥(.yc-band): 화면 전체 폭. 배경색·구분선을 그린다.
   - 안쪽(.yc-wrap): 76rem 가운데 정렬 + 좌우 1.5rem 여백.
     모든 콘텐츠의 왼쪽 끝은 여기서 정렬된다.
   ================================================================ */

:root {
	--yc-wrap: 76rem;
	--yc-gutter: 1.5rem;
}

/* (1) 띠 요소 — 화면 전체 폭. 배경·구분선만 담당하고
       안쪽에 별도 래퍼를 가진다. */
.wp-block-group > .yc-tabs,
.wp-block-group > .yc-section,
.yc-tabs,
.yc-section {
	max-width: none !important;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* (2) 래퍼 요소 — 콘텐츠를 담으므로 폭을 제한하고 가운데 정렬.
       .yc-hero 와 .yc-chips 는 안쪽 래퍼가 따로 없어 자기 자신이
       래퍼 역할을 한다. 부모 테마 제약을 이기려면 !important 필요. */
.wp-block-group > .yc-hero,
.wp-block-group > .yc-chips,
.yc-hero,
.yc-chips,
.yc-tabs__list,
.yc-section__head,
.yc-slider {
	max-width: var(--yc-wrap) !important;
	width: 100%;
	margin-inline: auto !important;
	padding-inline: var(--yc-gutter);
	box-sizing: border-box;
}

/* ---------- 히어로 ---------- */

.yc-hero {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.yc-hero {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: end;
		gap: 3rem;
	}
}

.yc-hero__title {
	margin: 0;
	font-size: clamp(2.75rem, 6.5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.035em;
	color: var(--yc-ink, #1a1a18);
	word-break: keep-all;
}

.yc-hero__accent {
	color: var(--yc-brand, #2f4f3e);
}

.yc-hero__sub {
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	line-height: 1.7;
	color: var(--yc-ink-soft, #4a4843);
	word-break: keep-all;
	max-width: 26em;
}

/* ---------- 카테고리 탭 (레퍼런스의 가로 탭) ---------- */

.yc-tabs {
	border-block-end: 1px solid var(--yc-line, #e3e0d9);
}

.yc-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2rem;
	margin-block: 0;
	list-style: none;
}

.yc-tabs__item {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 0.5rem 0.25rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--yc-ink-mute, #6b6862);
	text-decoration: none;
	border-block-end: 3px solid transparent;
	margin-block-end: -1px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.yc-tabs__item:hover,
.yc-tabs__item:focus-visible {
	color: var(--yc-brand, #2f4f3e);
	border-block-end-color: var(--yc-brand, #2f4f3e);
}

.yc-tabs__item.is-active {
	color: var(--yc-ink, #1a1a18);
	border-block-end-color: var(--yc-ink, #1a1a18);
}

/* ---------- 하위 카테고리 칩 ---------- */

.yc-chips {
	padding-block: 1rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1rem;
}

.yc-chips:last-of-type {
	padding-block-end: 1.5rem;
}

.yc-chips__label {
	flex: 0 0 auto;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--yc-ink, #1a1a18);
	min-width: 3em;
}

.yc-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0.5rem 1.125rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--yc-ink-soft, #4a4843);
	text-decoration: none;
	background-color: var(--yc-paper, #faf9f7);
	border: 1px solid var(--yc-line, #e3e0d9);
	border-radius: 999px;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.yc-chip:hover,
.yc-chip:focus-visible {
	background-color: var(--yc-brand-tint, #eef2ef);
	border-color: var(--yc-brand, #2f4f3e);
	color: var(--yc-brand-deep, #223b2e);
}

/* ---------- 섹션 ---------- */

.yc-section {
	width: 100%;
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.yc-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.75rem;
}

.yc-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--yc-ink, #1a1a18);
}

.yc-section__desc {
	margin: 0.4rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--yc-ink-mute, #6b6862);
	word-break: keep-all;
}

.yc-section__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* 좌우 버튼 — 시니어를 위해 56px 확보 */
.yc-nav-btn {
	width: 56px;
	height: 56px;
	min-height: 56px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
	color: var(--yc-ink, #1a1a18);
	background-color: var(--yc-white, #fff);
	border: 2px solid var(--yc-line, #e3e0d9);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.yc-nav-btn:hover:not(:disabled) {
	background-color: var(--yc-brand, #2f4f3e);
	border-color: var(--yc-brand, #2f4f3e);
	color: var(--yc-white, #fff);
}

.yc-nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.yc-more {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--yc-brand, #2f4f3e);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

.yc-more:hover {
	color: var(--yc-brand-deep, #223b2e);
}

/* ---------- 슬라이더 ---------- */

.yc-slider {
	display: flex;
	gap: 1.5rem;
	/* 좌우 여백은 공통 래퍼(.yc-wrap 규칙)에서 온다.
	   위아래만 여기서 준다 — 카드 그림자·포커스 링이 잘리지 않게. */
	padding-block: 0.25rem 1.5rem;
	margin-block: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* 스냅 기준을 래퍼 여백에 맞춘다 */
	scroll-padding-inline-start: var(--yc-gutter);
	/* 스크롤바를 숨기지 않음 — 시니어에게 스크롤 가능함을 알리는 단서 */
	scrollbar-width: thin;
	scrollbar-color: var(--yc-line, #e3e0d9) transparent;
	overscroll-behavior-x: contain;
}

.yc-slider::-webkit-scrollbar {
	height: 10px;
}

.yc-slider::-webkit-scrollbar-track {
	background: var(--yc-paper, #faf9f7);
	border-radius: 999px;
}

.yc-slider::-webkit-scrollbar-thumb {
	background: var(--yc-line, #e3e0d9);
	border-radius: 999px;
}

.yc-slider::-webkit-scrollbar-thumb:hover {
	background: var(--yc-ink-mute, #6b6862);
}

.yc-slider:focus-visible {
	outline: 3px solid var(--yc-brand, #2f4f3e);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ---------- 카드 ---------- */

/* 카드 폭 — 화면에 보이는 장수를 기준으로 계산해서
   슬라이더 폭을 남김없이 채운다. (레퍼런스는 2단 그리드) */
.yc-card {
	flex: 0 0 auto;
	/* 모바일: 1장 + 다음 장이 살짝 보이게 */
	width: min(82vw, 26rem);
	scroll-snap-align: start;
}

/* 태블릿: 2장 */
@media (min-width: 700px) {
	.yc-card {
		width: calc((100% - 1.5rem) / 2);
	}
}

/* 데스크톱: 3장 */
@media (min-width: 1100px) {
	.yc-card {
		width: calc((100% - 3rem) / 3);
	}
}

.yc-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.yc-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--yc-mist, #f2f0ec);
	border-radius: 2px;
	margin-block-end: 1.125rem;
}

.yc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.yc-card__link:hover .yc-card__media img {
	transform: scale(1.04);
}

.yc-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--yc-mist, #f2f0ec), var(--yc-brand-tint, #eef2ef));
}

.yc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.yc-card__cat {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--yc-gold, #a08949);
	margin-block-end: 0.5rem;
}

.yc-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.4375rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--yc-ink, #1a1a18);
	word-break: keep-all;
}

.yc-card__link:hover .yc-card__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 2px;
}

.yc-card__excerpt {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--yc-ink-soft, #4a4843);
	word-break: keep-all;
}

.yc-card__date {
	margin-block-start: auto;
	font-size: 1.0625rem;
	color: var(--yc-ink-mute, #6b6862);
}

/* ---------- 반응형 ---------- */

@media (max-width: 640px) {
	.yc-section__head {
		align-items: flex-start;
	}

	/* 모바일에선 좌우 버튼 대신 스와이프 — 버튼은 숨기고 전체보기만 */
	.yc-section__actions .yc-nav-btn {
		display: none;
	}
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.yc-slider {
		scroll-behavior: auto;
	}

	.yc-card__media img,
	.yc-card__link:hover .yc-card__media img {
		transition: none;
		transform: none;
	}
}