/* ---------- 인트로 스플래시 (수면에서 떠오르는 '누리') ---------- */
.intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe98f 42%, #ffcf3f 78%, #f6b800 100%);
}
.intro.hide { opacity: 0; transition: opacity .55s ease; pointer-events: none; }
/* 수면 위 은은한 빛 */
.intro::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 34%; height: 34%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.6), transparent 70%);
  filter: blur(26px); pointer-events: none;
}
.intro-content { position: relative; text-align: center; }
.intro-title {
  font-family: var(--font-cute);
  font-size: clamp(4rem, 16vw, 9.375rem); font-weight: 400; color: #7a4a10; letter-spacing: .04em;
  opacity: 0; text-shadow: 0 6px 22px rgba(122,74,16,.22), 0 2px 0 rgba(255,255,255,.5);
}
.intro-sub {
  font-family: var(--font-cute);
  margin-top: 6px; font-size: clamp(1rem, 3.8vw, 1.6875rem); font-weight: 400; color: #9a6212;
  letter-spacing: .02em; opacity: 0;
}
.intro-hint {
  font-family: var(--font-cute);
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  /* 예전엔 투명도 .6 이라 흐릿해서 잘 안 보였어요 (대비 2.5).
     '건너뛸 수 있다' 는 걸 알려주는 안내라 읽혀야 합니다. */
  font-size: 0.875rem; color: rgba(74,44,8,.92);
}
.intro-title.emerge { animation: nuriEmerge 1.6s cubic-bezier(.18,.7,.2,1) forwards; }
.intro-sub.show { animation: nuriSubIn .9s ease forwards; }
.intro-content.sink { animation: nuriSink 1.3s cubic-bezier(.55,0,.7,.35) forwards; }
@keyframes nuriEmerge {
  0% { opacity: 0; transform: translateY(64px) scale(.94); filter: blur(13px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes nuriSubIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes nuriSink {
  0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(76px); filter: blur(13px); }
}

/* ---------- 인트로: 함께 떠오르는 다섯 친구 ----------
   '누리' 글자가 수면 위로 뜨는 동안, 다섯 소동물이 물속에서 함께 올라와요.
   글자를 가리지 않도록 화면 가장자리에 두고, 살짝 흐리게 깔아 배경처럼 보이게 했어요. */
.intro-pets { position: absolute; inset: 0; pointer-events: none; }
.intro-pet {
  position: absolute;
  width: clamp(84px, 13vw, 176px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  /* 물에 잠긴 듯한 느낌 — 부드러운 테두리 빛과 옅은 그림자 */
  border: 3px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 30px rgba(122, 74, 16, .22);
  animation: petFloat 1.9s cubic-bezier(.18,.7,.2,1) forwards;
}
/* 다섯 자리 — 가운데(누리 글자)를 비우고 둘러싸도록 */
.pet-hermit { left: 7%;  top: 16%; animation-delay: .15s; }
.pet-lizard { right: 8%; top: 12%; animation-delay: .35s; }
.pet-frog   { left: 13%; bottom: 15%; animation-delay: .55s; }
.pet-insect { right: 11%; bottom: 18%; animation-delay: .75s; }
.pet-spider { left: 50%; top: 4%; transform: translateX(-50%); animation-delay: .95s;
  width: clamp(70px, 10vw, 132px); }

@keyframes petFloat {
  0%   { opacity: 0; transform: translateY(52px) scale(.86); filter: blur(10px) saturate(.7); }
  60%  { opacity: .95; }
  100% { opacity: .95; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
}
/* 가운데 위 친구는 가로 중앙 정렬을 유지해야 해서 따로 */
@keyframes petFloatCenter {
  0%   { opacity: 0; transform: translateX(-50%) translateY(52px) scale(.86); filter: blur(10px) saturate(.7); }
  60%  { opacity: .95; }
  100% { opacity: .95; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0) saturate(1); }
}
.pet-spider { animation-name: petFloatCenter; }

/* '누리'가 가라앉을 때 친구들도 함께 물속으로 */
.intro-pets.sink .intro-pet { animation: petSink 1.3s cubic-bezier(.55,0,.7,.35) forwards; }
.intro-pets.sink .pet-spider { animation-name: petSinkCenter; }
@keyframes petSink {
  0%   { opacity: .95; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(64px) scale(.9); filter: blur(12px); }
}
@keyframes petSinkCenter {
  0%   { opacity: .95; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(64px) scale(.9); filter: blur(12px); }
}

/* 좁은 화면에선 글자와 겹치지 않게 더 작고 더 바깥으로 */
@media (max-width: 560px) {
  .intro-pet { width: clamp(64px, 20vw, 96px); opacity: 0; }
  .pet-hermit { left: 4%;  top: 12%; }
  .pet-lizard { right: 4%; top: 9%; }
  .pet-frog   { left: 6%;  bottom: 12%; }
  .pet-insect { right: 5%; bottom: 14%; }
  .pet-spider { top: 2%; width: clamp(56px, 16vw, 84px); }
}

/* 움직임을 줄여달라고 설정한 분에게는 애니메이션 없이 은은하게만 */
@media (prefers-reduced-motion: reduce) {
  .intro-pet { animation: none !important; opacity: .9; filter: none; }
  .pet-spider { transform: translateX(-50%); }
}

/* ---------- 리셋 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글 단어 중간 줄바꿈 방지 (의미 단위로 끊김) */
  overflow-wrap: anywhere;   /* 아주 긴 영문/URL은 예외적으로 줄바꿈 허용 */
  /* FOUC 방지: 헤더·내용이 채워지기 전엔 감췄다가 준비되면 부드럽게 표시 */
  opacity: 0;
}
body.loaded { opacity: 1; transition: opacity .16s ease; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 레이아웃 유틸 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head .eyebrow {
  display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
  background: var(--chip-bg); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.25; color: var(--heading); }
.section-head p { margin-top: 12px; color: var(--text-muted); font-size: 1rem; }