@charset "utf-8";
html { font-size:0.625rem; }

:root {
	/* ── 폰트 패밀리 ────────────────────────────────
	   --f_base1  : 본문 · UI (Pretendard → Noto Sans KR fallback)
	   --f_display: 국문 세리프 디스플레이 헤드라인 (Gowun Batang)
	   --f_ui     : 영문 UI · 숫자 · eyebrow (Quicksand) */
	--f_base1:'Pretendard','Noto Sans KR',sans-serif;
	--f_display:'Gowun Batang',serif;
	--f_ui:'Quicksand',sans-serif;

	/* ── 로뎀나무 v2 브랜드 팔레트 (oklch olive/sage) ──
	   Claude Design v2 목업 기준. */
	--c_base1: oklch(0.34 0.05 148);   /* 딥 세이지 — 헤드라인/본문 잉크 */
	--c_base2: oklch(0.55 0.09 148);   /* 시그니처 그린 — CTA 배경 */
	--c_base3: oklch(0.46 0.07 150);   /* 링크 그린 */
	--c_base4: oklch(0.80 0.09 140);   /* 밝은 세이지 — 로고 블롭 · 액센트 */

	/* 서피스 · 배경 */
	--bg1:     oklch(0.975 0.012 110); /* 페이지 크림 배경 */
	--bg2:     oklch(0.94 0.035 120);  /* 세컨더리 세이지 크림 (about 섹션) */
	--bg3:     oklch(0.99 0.008 110);  /* 카드 화이트 */
	--bg-mint: oklch(0.94 0.05 140);   /* 스텝01 · 언어치료 태그 */
	--bg-butter: oklch(0.95 0.05 100); /* 스텝02 · 놀이 아이콘 */
	--bg-sky:  oklch(0.94 0.04 220);   /* 스텝03 · 감각 아이콘 */
	--bg-amber:oklch(0.95 0.045 60);   /* 스텝04 · 인지 아이콘 */
	--bg-blush:oklch(0.92 0.05 5);     /* 꽃꽂이 아이콘 */
	--bg-intro:oklch(0.89 0.055 145);  /* 서브페이지 인트로 세이지 밴드 */

	/* 텍스트 · 보조 */
	--tx-body:  oklch(0.44 0.03 148);
	--tx-mute:  oklch(0.52 0.03 148);
	--tx-hair:  oklch(0.82 0.03 148);
	--tx-invert:oklch(0.97 0.01 120);
	--border1:  oklch(0.85 0.02 145);

	/* 그림자 */
	--sh-card:  0 10px 30px oklch(0.45 0.04 148 / 0.07);
	--sh-cta:   0 10px 22px oklch(0.55 0.10 148 / 0.30);
	--sh-badge: 0 4px 12px oklch(0.45 0.05 148 / 0.10);

	/* 폰트 사이즈 스케일 (1rem = 10px) */
	--fs11:1.1rem; --fs12:1.2rem; --fs13:1.3rem; --fs14:1.4rem; --fs15:1.5rem;
	--fs16:1.6rem; --fs17:1.7rem; --fs18:1.8rem; --fs19:1.9rem; --fs20:2rem;
	--fs22:2.2rem; --fs23:2.3rem; --fs24:2.4rem; --fs26:2.6rem;
	--fs28:2.8rem; --fs30:3rem;   --fs32:3.2rem; --fs36:3.6rem;
	--fs38:3.8rem; --fs40:4rem;   --fs45:4.5rem; --fs46:4.6rem; --fs48:4.8rem;
	--fs50:5rem;   --fs56:5.6rem; --fs60:6rem;   --fs64:6.4rem;
	--fs70:7rem;   --fs80:8rem;
}
@media (max-width: 1199px) {
	:root {
		--fs18:1.7rem; --fs20:1.9rem; --fs22:2rem;   --fs23:2.2rem;
		--fs24:2.3rem; --fs26:2.4rem; --fs28:2.6rem; --fs30:2.8rem;
		--fs32:3rem;   --fs36:3rem;   --fs38:3.2rem; --fs40:3.4rem;
		--fs45:3.8rem; --fs46:3.8rem; --fs48:4rem;   --fs50:4.2rem;
		--fs56:4.3rem; --fs60:4.4rem; --fs64:5rem;   --fs70:5.2rem; --fs80:6rem;
	}
}
@media (max-width: 767px) {
	:root {
		--fs12:1.1rem; --fs13:1.2rem; --fs14:1.3rem; --fs15:1.4rem;
		--fs16:1.5rem; --fs18:1.6rem; --fs20:1.8rem; --fs22:1.9rem;
		--fs23:2rem;   --fs24:2.1rem; --fs26:2.2rem; --fs28:2.3rem;
		--fs30:2.4rem; --fs32:2.5rem; --fs36:2.6rem; --fs38:2.8rem;
		--fs40:3rem;   --fs45:3.1rem; --fs46:3.2rem; --fs48:3.1rem;
		--fs50:3.2rem; --fs56:3.2rem; --fs60:3.3rem; --fs64:3.6rem;
		--fs70:3.8rem; --fs80:5rem;
	}
}

.c_base1 {color:var(--c_base1) !important;}
.c_base2 {color:var(--c_base2) !important;}
.c_base3 {color:var(--c_base3) !important;}
.c_base4 {color:var(--c_base4) !important;}

.h5{height:5px;} .h10{height:10px;} .h20{height:20px;} .h30{height:30px;}
.h40{height:40px;} .h50{height:50px;} .h60{height:60px;} .h70{height:70px;}
.h80{height:80px;} .h90{height:90px;} .h100{height:100px;} .h110{height:110px;}
.h120{height:120px;} .h130{height:130px;} .h140{height:140px;} .h150{height:150px;}
.h160{height:160px;} .h170{height:170px;} .h180{height:180px;} .h190{height:190px;} .h200{height:200px;}
@media screen and (max-width:1199px) {
	.h30{height:20px;} .h40{height:30px;} .h50{height:40px;} .h60{height:40px;}
	.h70{height:50px;} .h80{height:60px;} .h90{height:65px;} .h100{height:70px;}
	.h110{height:75px;} .h120{height:80px;} .h130{height:85px;} .h140{height:90px;}
	.h150{height:90px;} .h160{height:90px;} .h170{height:100px;} .h180{height:100px;}
	.h190{height:110px;} .h200{height:120px;}
}
@media screen and (max-width:767px) {
	.h10{height:5px;} .h20{height:10px;} .h30{height:20px;} .h40{height:25px;}
	.h50{height:30px;} .h60{height:35px;} .h70{height:40px;} .h80{height:45px;}
	.h90{height:50px;} .h100{height:55px;} .h110{height:60px;} .h120{height:60px;}
	.h130{height:65px;} .h140{height:65px;} .h150{height:70px;} .h160{height:70px;}
	.h170{height:75px;} .h180{height:75px;} .h190{height:80px;} .h200{height:85px;}
}

body { font-family:var(--f_base1); color:var(--c_base1); background:var(--bg1); word-break:keep-all; text-wrap:pretty; -webkit-font-smoothing:antialiased; }
a { text-decoration:none !important; outline:none !important; transition:all .3s; color:inherit; }
a:link, a:visited, a:hover, a:active {text-decoration:none; color:inherit;}