/* ================================================================
   다크 모드
   ----------------------------------------------------------------
   색을 쓰는 곳은 전부 CSS 변수를 거치므로, 여기서 변수만
   바꿔주면 사이트 전체가 함께 전환된다.

   시니어 가독성 주의점:
   - 순검정(#000) 배경 + 순백(#fff) 글자는 대비가 너무 강해
     글자가 번져 보인다(헤일레이션). 살짝 낮춘 값을 쓴다.
   - 다크에서는 얇은 획이 더 가늘어 보여 굵기를 한 단계 올린다.
   ================================================================ */

:root[data-theme="dark"] {
	/* 배경 — 순검정 대신 뉴트럴 다크 */
	--yc-white: #16171a;
	--yc-paper: #1d1f23;
	--yc-mist: #24262b;
	--yc-line: #35383f;

	/* 텍스트 — 순백 대신 약간 낮춘 흰색 */
	--yc-ink: #ecedef;
	--yc-ink-soft: #b9bcc2;
	--yc-ink-mute: #90949c;

	/* 브랜드 — 어두운 배경에서도 보이도록 밝게 조정 */
	--yc-brand: #ee8a45;
	--yc-brand-deep: #f6a870;
	--yc-brand-tint: #33231a;

	/* 골드 — 채도를 낮춰 눈부심 방지 */
	--yc-gold: #c9a46b;
	--yc-gold-tint: #2a2318;

	/* 다크에서는 획이 가늘어 보이므로 한 단계 올림 */
	--yc-fw-body: 500;
}

/* 시스템 설정이 다크이고 사용자가 따로 고르지 않은 경우 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--yc-white: #16171a;
		--yc-paper: #1d1f23;
		--yc-mist: #24262b;
		--yc-line: #35383f;

		--yc-ink: #ecedef;
		--yc-ink-soft: #b9bcc2;
		--yc-ink-mute: #90949c;

		--yc-brand: #ee8a45;
		--yc-brand-deep: #f6a870;
		--yc-brand-tint: #33231a;

		--yc-gold: #c9a46b;
		--yc-gold-tint: #2a2318;

		--yc-fw-body: 500;
	}
}

/* ---------- 워드프레스 프리셋 색상도 함께 전환 ----------
   theme.json 의 팔레트는 고정값이라, 다크에서 배경/글자에
   쓰인 프리셋을 변수로 덮어쓴다. */

:root[data-theme="dark"],
:root[data-theme="dark"] body {
	--wp--preset--color--white: var(--yc-white);
	--wp--preset--color--paper: var(--yc-paper);
	--wp--preset--color--mist: var(--yc-mist);
	--wp--preset--color--line: var(--yc-line);
	--wp--preset--color--ink: var(--yc-ink);
	--wp--preset--color--ink-soft: var(--yc-ink-soft);
	--wp--preset--color--ink-mute: var(--yc-ink-mute);
	--wp--preset--color--brand: var(--yc-brand);
	--wp--preset--color--brand-deep: var(--yc-brand-deep);
	--wp--preset--color--brand-tint: var(--yc-brand-tint);
	--wp--preset--color--gold: var(--yc-gold);
	--wp--preset--color--gold-tint: var(--yc-gold-tint);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]),
	:root:not([data-theme="light"]) body {
		--wp--preset--color--white: var(--yc-white);
		--wp--preset--color--paper: var(--yc-paper);
		--wp--preset--color--mist: var(--yc-mist);
		--wp--preset--color--line: var(--yc-line);
		--wp--preset--color--ink: var(--yc-ink);
		--wp--preset--color--ink-soft: var(--yc-ink-soft);
		--wp--preset--color--ink-mute: var(--yc-ink-mute);
		--wp--preset--color--brand: var(--yc-brand);
		--wp--preset--color--brand-deep: var(--yc-brand-deep);
		--wp--preset--color--brand-tint: var(--yc-brand-tint);
		--wp--preset--color--gold: var(--yc-gold);
		--wp--preset--color--gold-tint: var(--yc-gold-tint);
	}
}

/* 하드코딩된 배경(푸터 등) 보정 */
:root[data-theme="dark"] .wp-block-group.has-background,
:root[data-theme="dark"] .yc-footer {
	background-color: var(--yc-paper) !important;
}

:root[data-theme="dark"] body {
	background-color: var(--yc-white);
	color: var(--yc-ink);
}

/* 다크에서 이미지가 너무 밝아 눈부시지 않게 아주 살짝 낮춤 */
:root[data-theme="dark"] .yc-card__media img,
:root[data-theme="dark"] .yc-article__cover img {
	filter: brightness(0.92);
}

/* ================================================================
   테마 전환 버튼
   ================================================================ */

.yc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 시니어 터치 영역 */
	min-height: 48px;
	min-width: 48px;
	padding: 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--yc-ink-soft);
	background-color: transparent;
	border: 1px solid var(--yc-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.yc-theme-toggle:hover,
.yc-theme-toggle:focus-visible {
	color: var(--yc-brand);
	border-color: var(--yc-brand);
	background-color: var(--yc-brand-tint);
}

.yc-theme-toggle__icon {
	font-size: 1.125rem;
	line-height: 1;
}

/* 현재 모드에 맞는 라벨만 보여준다 */
.yc-theme-toggle__label--dark { display: inline; }
.yc-theme-toggle__label--light { display: none; }

:root[data-theme="dark"] .yc-theme-toggle__label--dark { display: none; }
:root[data-theme="dark"] .yc-theme-toggle__label--light { display: inline; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .yc-theme-toggle__label--dark { display: none; }
	:root:not([data-theme="light"]) .yc-theme-toggle__label--light { display: inline; }
}

@media (max-width: 640px) {
	/* 모바일에서는 아이콘만 */
	.yc-theme-toggle {
		padding: 0;
		width: 48px;
	}

	.yc-theme-toggle__label--dark,
	.yc-theme-toggle__label--light,
	:root[data-theme="dark"] .yc-theme-toggle__label--light {
		display: none;
	}
}

@media print {
	.yc-theme-toggle {
		display: none;
	}
}