:root{
  --sky:#bfe3f5; --sky2:#dff1f7; --cream:#fbeede;
  --accent:#e0855a; --accent-ink:#c96a4a;
  --pink:#d98cae; --green:#7cae9c; --blue:#9ab0d4;
  --ink:#3d4a5c; --sub:#6d7a88; --muted:#8a94a0;
  --radius:16px; --shadow:0 4px 18px rgba(180,150,120,.16);
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Noto Sans KR',-apple-system,sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.badge{
  display:inline-block; background:rgba(255,255,255,.7);
  padding:5px 14px; border-radius:999px; font-size:12px;
  font-weight:600; letter-spacing:.05em; color:var(--accent-ink);
}
/* 스크롤 리빌: 초기엔 숨김, .is-visible 붙으면 등장 */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0ms)}
.reveal.is-visible{opacity:1; transform:none}
/* 공통 keyframes */
@keyframes drift{to{transform:translateX(120vw)}}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.4)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(110vh) rotate(360deg);opacity:0}
}
/* 떠다니는 배경 구름/파티클 레이어 */
.sky-bg{position:fixed; inset:0; z-index:-2;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 42%,var(--cream) 100%)}
.particles{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}