@charset "utf-8";
/* =====================================================
   로뎀나무발달연구소 공용 컴포넌트 — Claude Design v2
   (oklch olive/sage · 세이지 크림 · 라운드 카드 · 곡선 리듬)
   ===================================================== */

/* ── Body 타이포 ─────────────────────────────────── */
html body {
	font-size:var(--fs16);
	color:var(--c_base1);
	line-height:1.7;
	letter-spacing:-0.01em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	word-break:keep-all;
	text-wrap:pretty;
}
::selection { background:var(--c_base2); color:var(--tx-invert); }

/* ── 페이지 폭 컨테이너 (기본 w1400 재정의) ─────── */
.rd-wrap { width:min(1240px, 92vw); margin:0 auto; }

/* ── 섹션 리듬 (풀블리드 타일) ─────────────────── */
.rd-tile {
	position:relative;
	padding:60px 0 120px;
	background:var(--bg1);
}
.rd-tile--cream  { background:var(--bg2); }
.rd-tile--white  { background:var(--bg3); }
.rd-tile--mint   { background:oklch(0.94 0.05 140); }
.rd-tile--butter { background:oklch(0.95 0.05 100); }
.rd-tile--sage   { background:oklch(0.55 0.09 148); color:var(--tx-invert); }
.rd-tile--sage .rd-eyebrow { color:oklch(0.94 0.04 130); }
.rd-tile--sage .rd-title,
.rd-tile--sage .rd-lead { color:var(--tx-invert); }

/* 하단 곡선 컷 (섹션 사이 부드러운 물결) */
.rd-curve-bottom {
	position:relative; z-index:1;
	height:80px;
	background:var(--bg1);
	border-radius:50% 50% 0 0 / 80px 80px 0 0;
	margin-top:-80px;
}

/* ── 아이브로우 · 타이틀 · 리드 ─────────────────── */
.rd-eyebrow {
	display:inline-block;
	font-family:var(--f_ui);
	font-size:var(--fs12);
	font-weight:700;
	letter-spacing:0.24em;
	text-transform:uppercase;
	color:oklch(0.55 0.09 148);
	margin-bottom:14px;
}
.rd-eyebrow--soft { color:oklch(0.58 0.08 145); }

.rd-title {
	margin:0 0 18px;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs46);
	line-height:1.25;
	letter-spacing:-0.03em;
	color:oklch(0.30 0.05 148);
}
.rd-title--sm { font-size:var(--fs36); }
.rd-title--xl { font-size:clamp(4.5rem, 6vw, 7.2rem); line-height:1.15; }

.rd-lead {
	margin:0;
	max-width:640px;
	font-size:var(--fs16);
	line-height:1.9;
	color:var(--tx-body);
}
.rd-lead--sm { font-size:var(--fs15); }

.rd-section-head {
	display:flex; flex-direction:column; align-items:flex-start; gap:0;
	margin-bottom:56px;
}
.rd-section-head--center {
	align-items:center; text-align:center;
}
.rd-section-head--center .rd-lead { margin-left:auto; margin-right:auto; }

/* ── 배지 ────────────────────────────────────────── */
.rd-badge {
	display:inline-block;
	padding:9px 18px;
	border-radius:999px;
	background:var(--bg3);
	font-size:var(--fs13);
	font-weight:700;
	color:oklch(0.48 0.08 148);
	box-shadow:var(--sh-badge);
	letter-spacing:-0.01em;
}

/* ── 버튼 시스템 ──────────────────────────────────── */
.rd-btn {
	display:inline-flex; align-items:center; gap:10px;
	padding:15px 26px;
	border-radius:999px;
	font-family:var(--f_base1);
	font-weight:700;
	font-size:var(--fs15);
	letter-spacing:-0.01em;
	transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
	cursor:pointer;
	white-space:nowrap;
	text-decoration:none;
}
.rd-btn:active { transform:scale(0.97); }
.rd-btn--lg { padding:18px 30px; font-size:var(--fs16); }
.rd-btn--sm { padding:11px 20px; font-size:var(--fs13); }

a.rd-btn--primary {
	background:var(--c_base2);
	color:var(--tx-invert);
	box-shadow:var(--sh-cta);
}
a.rd-btn--primary:hover {
	background:oklch(0.50 0.10 148);
	transform:translateY(-2px);
}
.rd-btn--ghost {
	background:var(--bg3);
	color:oklch(0.44 0.06 148);
}
.rd-btn--ghost:hover {
	background:oklch(0.96 0.02 120);
	color:oklch(0.38 0.08 148);
}
.rd-btn--outline {
	background:transparent;
	color:var(--c_base1);
	box-shadow:inset 0 0 0 1.5px oklch(0.48 0.08 148 / 0.35);
}
.rd-btn--outline:hover {
	background:var(--c_base2);
	color:var(--tx-invert);
	box-shadow:none;
}
a.rd-btn--on-sage {
	background:var(--tx-invert);
	color:oklch(0.34 0.06 148);
}
a.rd-btn--on-sage:hover { background:oklch(0.94 0.05 120); }

.rd-num { font-family:var(--f_ui); font-weight:700; letter-spacing:0.02em; }

/* ── 카드 ────────────────────────────────────────── */
.rd-card {
	background:var(--bg3);
	border-radius:32px;
	padding:34px;
	box-shadow:var(--sh-card);
	transition:transform .3s ease, box-shadow .3s ease;
}
.rd-card:hover {
	transform:translateY(-4px);
	box-shadow:0 20px 44px oklch(0.30 0.05 148 / 0.10);
}
.rd-card__title {
	margin:0 0 12px;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs24);
	color:oklch(0.31 0.05 148);
	line-height:1.3;
}
.rd-card__body {
	margin:0;
	font-size:var(--fs15);
	line-height:1.9;
	color:var(--tx-body);
}
.rd-card__foot {
	margin-top:auto;
	padding-top:16px;
	border-top:1px dashed oklch(0.78 0.04 148);
	font-size:var(--fs13);
	line-height:1.85;
	color:var(--tx-mute);
}

/* ── 태그 칩 리스트 ──────────────────────────────── */
.rd-tags {
	list-style:none; padding:0; margin:0;
	display:flex; flex-wrap:wrap; gap:8px;
}
.rd-tags li {
	padding:8px 15px;
	border-radius:999px;
	background:oklch(0.94 0.05 140);
	font-size:var(--fs13);
	color:oklch(0.38 0.07 148);
}
.rd-tags--on-tint li {
	background:var(--bg3);
	color:oklch(0.40 0.06 148);
}
.rd-tags--sage li {
	background:oklch(0.99 0.008 120 / 0.15);
	color:oklch(0.98 0.008 120);
}

/* ── 체크 리스트 (프로그램 · 대상) ─────────────── */
.rd-check {
	list-style:none; padding:0; margin:0;
	display:flex; flex-direction:column; gap:12px;
}
.rd-check li {
	position:relative;
	padding-left:30px;
	font-size:var(--fs15);
	line-height:1.75;
	color:var(--c_base1);
}
.rd-check li::before {
	content:""; position:absolute; left:0; top:8px;
	width:18px; height:18px; border-radius:50%;
	background:oklch(0.55 0.09 148) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
}

/* ── 인포 로우 (2컬럼 텍스트 + 이미지) ─────────── */
.rd-info-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:80px;
	align-items:center;
}
.rd-info-row--reverse { direction:rtl; }
.rd-info-row--reverse > * { direction:ltr; }

.rd-info-text h3 {
	margin:0 0 18px;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs36);
	color:oklch(0.31 0.05 148);
	line-height:1.25;
	letter-spacing:-0.02em;
}
.rd-info-text p {
	margin:0 0 16px;
	font-size:var(--fs16);
	line-height:1.9;
	color:var(--tx-body);
}
.rd-info-text p strong {
	color:var(--c_base1);
	font-weight:700;
}
.rd-info-img {
	aspect-ratio:4/3;
	border-radius:32px 160px 32px 160px;
	overflow:hidden;
	background:repeating-linear-gradient(135deg,
		oklch(0.89 0.05 140) 0 10px,
		oklch(0.93 0.03 140) 10px 20px);
	display:grid; place-items:center;
}
.rd-info-img img {
	width:100%; height:100%;
	object-fit:cover; display:block;
}
.rd-info-img span {
	font-family:var(--f_ui);
	font-size:var(--fs12);
	color:oklch(0.44 0.05 148);
	background:oklch(0.99 0.008 120 / 0.9);
	padding:9px 16px;
	border-radius:999px;
	letter-spacing:0.1em;
}

/* ── 스크롤 인 애니메이션 ────────────────────────── */
.fade-up {
	opacity:0; transform:translateY(24px);
	transition:opacity .8s ease, transform .8s ease;
}
.fade-up.is-in { opacity:1; transform:translateY(0); }
.fade-in { opacity:0; transition:opacity .8s ease; }
.fade-in.is-in { opacity:1; }
.scale-in {
	opacity:0; transform:scale(0.96);
	transition:opacity .8s ease, transform .8s ease;
}
.scale-in.is-in { opacity:1; transform:scale(1); }

.stagger-1 { transition-delay:.05s; }
.stagger-2 { transition-delay:.15s; }
.stagger-3 { transition-delay:.25s; }
.stagger-4 { transition-delay:.35s; }
.stagger-5 { transition-delay:.45s; }

/* ── 서브페이지 인트로 (2컬럼 · 세이지 밴드) ── */
.rd-intro {
	position:relative;
	padding:120px 0;
	/* background:var(--bg-intro); */
	background:var(--bg2);
	overflow:hidden;
}
.rd-intro__inner {
	position:relative; z-index:1;
	width:min(1240px, 92vw); margin:0 auto;
	display:grid;
	grid-template-columns:1fr 1.1fr;
	gap:60px;
	align-items:center;
}
.rd-intro .rd-section-head {
	align-items:flex-start;
	text-align:left;
	margin-bottom:0;
	gap:18px;
}
.rd-intro .rd-eyebrow { color:oklch(0.42 0.09 148); }
.rd-intro .rd-title   { color:oklch(0.26 0.05 148); }
.rd-intro .rd-lead    { margin-left:0; margin-right:0; color:oklch(0.36 0.03 148); }

.rd-intro__montage {
	position:relative;
	width:100%; max-width:none;
	display:flex; justify-content:center;
	padding:0;
}
.rd-intro__photo {
	position:relative;
	width:100%;
	aspect-ratio:5/4;
	overflow:hidden;
	border-radius:160px 28px 160px 28px;
	display:grid; place-items:end center;
	padding:26px;
	box-shadow:0 24px 52px oklch(0.30 0.05 148 / 0.18);
	background:repeating-linear-gradient(135deg,
		oklch(0.55 0.09 148) 0 12px,
		oklch(0.62 0.08 148) 12px 24px);
	transition:transform .4s ease;
}
.rd-intro__photo:hover { transform:translateY(-6px); }
.rd-intro__photo img {
	position:absolute; inset:0;
	width:100%; height:100%; object-fit:cover;
}
.rd-intro__photo span {
	position:relative; z-index:1;
	font-family:var(--f_ui);
	font-size:var(--fs12);
	letter-spacing:0.08em;
	color:oklch(0.32 0.06 148);
	background:oklch(0.99 0.008 120 / 0.94);
	padding:10px 18px;
	border-radius:999px;
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
}

/* 카테고리별 인트로 이미지 톤 (부모에 .page-* 이 있을 때 자동 매칭) */
.page-researcher .rd-intro__photo   { background:repeating-linear-gradient(135deg, oklch(0.60 0.08 148) 0 12px, oklch(0.66 0.07 148) 12px 24px); }
.page-facility .rd-intro__photo     { background:repeating-linear-gradient(135deg, oklch(0.58 0.09 200) 0 12px, oklch(0.64 0.08 200) 12px 24px); }
.page-location .rd-intro__photo     { background:repeating-linear-gradient(135deg, oklch(0.68 0.08 80)  0 12px, oklch(0.74 0.07 80)  12px 24px); }

.page-program--speech .rd-intro__photo    { background:repeating-linear-gradient(135deg, oklch(0.55 0.09 148) 0 12px, oklch(0.62 0.08 148) 12px 24px); }
.page-program--sensory .rd-intro__photo   { background:repeating-linear-gradient(135deg, oklch(0.60 0.09 220) 0 12px, oklch(0.66 0.08 220) 12px 24px); }
.page-program--play .rd-intro__photo      { background:repeating-linear-gradient(135deg, oklch(0.72 0.09 100) 0 12px, oklch(0.78 0.08 100) 12px 24px); }
.page-program--cognitive .rd-intro__photo { background:repeating-linear-gradient(135deg, oklch(0.72 0.09 65)  0 12px, oklch(0.78 0.08 65)  12px 24px); }
.page-program--flower .rd-intro__photo    { background:repeating-linear-gradient(135deg, oklch(0.72 0.09 15)  0 12px, oklch(0.78 0.08 15)  12px 24px); }

.page-process .rd-intro__photo { background:repeating-linear-gradient(135deg, oklch(0.62 0.08 148) 0 12px, oklch(0.68 0.07 148) 12px 24px); }
.page-contact .rd-intro__photo { background:repeating-linear-gradient(135deg, oklch(0.60 0.08 210) 0 12px, oklch(0.66 0.07 210) 12px 24px); }

/* ── 콜아웃 밴드 (CTA) ─────────────────────────── */
.rd-callout {
	width:100%;
	padding:48px;
	border-radius:40px;
	background:oklch(0.55 0.09 148);
	color:var(--tx-invert);
	display:flex; align-items:center; justify-content:space-between;
	gap:32px; flex-wrap:wrap;
	box-shadow:0 20px 44px oklch(0.42 0.06 148 / 0.2);
}
.rd-callout__title {
	display:block;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs30);
	margin-bottom:8px;
	letter-spacing:-0.02em;
}
.rd-callout__lead {
	display:block;
	font-size:var(--fs15);
	line-height:1.85;
	color:oklch(0.92 0.02 120);
}
a.rd-callout__tel {
	display:inline-flex; align-items:center; gap:10px;
	padding:20px 30px;
	border-radius:999px;
	background:var(--tx-invert);
	color:oklch(0.34 0.06 148);
	font-family:var(--f_ui);
	font-weight:700;
	font-size:var(--fs22);
	transition:background .25s ease;
}
a.rd-callout__tel:hover {
	background:oklch(0.94 0.05 120);
}

/* ==================== 태블릿 이하 (~1199) ==================== */
@media screen and (max-width:1199px) {
	.rd-tile { padding:80px 0; }
	.rd-section-head { margin-bottom:40px; }
	.rd-info-row { grid-template-columns:1fr; gap:40px; }
	.rd-info-img { aspect-ratio:16/10; border-radius:26px 120px 26px 120px; }
	.rd-callout { padding:36px; }
	.rd-title { font-size:var(--fs38); }
	.rd-title--sm { font-size:var(--fs30); }

	.rd-intro { padding:80px 0 50px; }
	.rd-intro__inner { grid-template-columns:1fr; gap:44px; }
	.rd-intro .rd-section-head { align-items:center; text-align:center; }
	.rd-intro .rd-lead { margin-left:auto; margin-right:auto; }
	.rd-intro__montage { padding:0; }
	.rd-intro__photo { aspect-ratio:16/9; border-radius:130px 24px 130px 24px; padding:22px; }
}

/* ==================== 모바일 (~767) ==================== */
@media screen and (max-width:767px) {
	.rd-tile { padding:60px 0; }
	.rd-curve-bottom { height:50px; }
	.rd-card { padding:26px; border-radius:26px; }
	.rd-info-text h3 { font-size:var(--fs26); }
	.rd-callout {
		padding:28px; border-radius:28px; gap:20px;
		flex-direction:column; align-items:flex-start;
	}
	.rd-callout__title { font-size:var(--fs24); }
	.rd-callout__tel { padding:16px 24px; font-size:var(--fs18); }
	.rd-btn { padding:13px 22px; }
	.rd-btn--lg { padding:15px 26px; }

	.rd-intro { padding:56px 0 36px; }
	.rd-intro__inner { gap:32px; }
	.rd-intro__montage { padding:0; }
	.rd-intro__photo {
		aspect-ratio:4/3;
		border-radius:80px 18px 80px 18px;
		padding:16px;
	}
	.rd-intro__photo span { font-size:var(--fs11); padding:7px 14px; }
}