/* catmoa 도구 — 나이 계산기. catmoa 테마 팔레트 변수를 따르고, 없으면 기본색. */
.catmoa-age {
	--ca-ink: var(--wp--preset--color--ink, #17161A);
	--ca-cheese: var(--wp--preset--color--cheese, #E8772E);
	--ca-peach: var(--wp--preset--color--peach, #FFE7CF);
	--ca-muted: var(--wp--preset--color--muted, #4A4641);
	--ca-subtle: var(--wp--preset--color--subtle, #5E5A55);
	--ca-ease: cubic-bezier(.2, .8, .2, 1);
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 36px 0;
	color: var(--ca-ink);
}
.catmoa-age p { margin: 0; }
.catmoa-age__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 24px;
}
.catmoa-age__panel {
	border-radius: 32px;
	border: 2px solid var(--ca-ink);
	padding: clamp(24px, 4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.catmoa-age__panel--input { background: #fff; }
.catmoa-age__panel--result { background: var(--ca-cheese); justify-content: space-between; }
.catmoa-age__label { font-size: 17px; font-weight: 700; }
.catmoa-age__catage {
	font-family: var(--wp--preset--font-family--number, 'Space Grotesk', sans-serif);
	font-weight: 700;
	font-size: clamp(44px, 6vw, 72px);
	line-height: 1;
	letter-spacing: -0.03em;
}
.catmoa-age__controls { display: flex; flex-direction: column; gap: 18px; }
.catmoa-age:not(.is-ready) .catmoa-age__controls { display: none; }

/* 슬라이더: 치즈색 손잡이, 굵은 잉크 트랙 */
.catmoa-age__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	background: transparent;
	accent-color: var(--ca-cheese);
	cursor: pointer;
	margin: 0;
}
.catmoa-age__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--ca-peach); border: 2px solid var(--ca-ink); }
.catmoa-age__range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--ca-peach); border: 2px solid var(--ca-ink); }
.catmoa-age__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 30px;
	height: 30px;
	margin-top: -12px;
	border-radius: 50%;
	background: var(--ca-cheese);
	border: 2px solid var(--ca-ink);
	box-shadow: 0 3px 0 var(--ca-ink);
}
.catmoa-age__range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ca-cheese);
	border: 2px solid var(--ca-ink);
	box-shadow: 0 3px 0 var(--ca-ink);
}
.catmoa-age__range:focus-visible { outline: 3px solid var(--ca-cheese); outline-offset: 4px; border-radius: 12px; }

.catmoa-age__fine { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.catmoa-age__fine label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.catmoa-age__fine input,
.catmoa-age__fine select {
	min-height: 44px;
	min-width: 72px;
	padding: 0 12px;
	border: 2px solid var(--ca-ink);
	border-radius: 14px;
	background: #fff;
	color: var(--ca-ink);
	font: 700 18px/1 var(--wp--preset--font-family--number, 'Space Grotesk', sans-serif);
}
.catmoa-age__presets { display: flex; gap: 10px; flex-wrap: wrap; }
.catmoa-age__preset {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 22px;
	border: 2px solid var(--ca-ink);
	background: #fff;
	color: var(--ca-ink);
	font: 700 15px/1 var(--wp--preset--font-family--body, 'IBM Plex Sans KR', sans-serif);
	cursor: pointer;
	transition: background-color .25s var(--ca-ease), transform .2s var(--ca-ease);
}
.catmoa-age__preset:hover { transform: translateY(-2px); }
.catmoa-age__preset[aria-pressed="true"] { background: var(--ca-peach); }
.catmoa-age__preset:focus-visible { outline: 3px solid var(--ca-cheese); outline-offset: 3px; }

.catmoa-age__human {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-weight: 700;
}
.catmoa-age__about,
.catmoa-age__unit { font-size: 28px; }
.catmoa-age__num {
	font-family: var(--wp--preset--font-family--number, 'Space Grotesk', sans-serif);
	font-size: clamp(88px, 12vw, 160px);
	line-height: .9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.catmoa-age__stage { font-size: 17px; line-height: 1.6; }
.catmoa-age__range-note {
	font-size: 14px;
	line-height: 1.6;
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff;
	border: 2px solid var(--ca-ink);
}
.catmoa-age__range-note[hidden] { display: none; }

.catmoa-age__stages-title { font-size: 22px; font-weight: 700; }
.catmoa-age__stages-wrap { display: flex; flex-direction: column; gap: 14px; }
.catmoa-age__stages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 10px;
}
.catmoa-age__stages > li { margin: 0 !important; }
.catmoa-age__stages > li::before { display: none !important; }
.catmoa-age__stage-item {
	border-radius: 20px;
	border: 2px solid var(--ca-ink);
	padding: 18px !important;
	background: #fff;
	color: var(--ca-ink);
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background-color .35s var(--ca-ease), color .35s var(--ca-ease);
}
.catmoa-age__stage-item.is-current { background: var(--ca-ink); color: #fff; }
.catmoa-age__stage-name { font-size: 17px; font-weight: 700; }
.catmoa-age__stage-range { font-family: var(--wp--preset--font-family--number, 'Space Grotesk', sans-serif); font-weight: 700; font-size: 15px; }
.catmoa-age__fineprint { font-size: 13px; line-height: 1.6; color: var(--ca-subtle); }
.catmoa-age__noscript { font-size: 14px; color: var(--ca-muted); }

@media (prefers-reduced-motion: reduce) {
	.catmoa-age__preset,
	.catmoa-age__stage-item { transition: none; }
	.catmoa-age__preset:hover { transform: none; }
}