/* 들어가는 장(10-06, 10-07 일월오봉도) — 색은 그림 설정집 3장(docs/율도국-그림-설정집.md) 안에서.
 *
 * 움직임은 모두 층의 transform·opacity다. 그래야 그래픽 칩 혼자 돌리고, 3D 마을을 짓느라 바쁜 동안에도 끊기지 않는다.
 * 들어오는 움직임은 바깥 층(div)에, 계속 도는 움직임(물결·구름·소나무·까치)은 안쪽 층(svg)에 — 한 층에 둘을 걸면
 * 서로 덮는다. 나갈 때는 움직임이 없는 두 덮개(.ig-world·.ig-front)만 바꾼다.
 *
 * 시간표(초, --k = 1) — 바다 0.05 · 먼 언덕 0.3 · 바깥 봉우리 0.5 · 곁 봉우리 0.75 · 가운데 봉우리 1.0 · 달 1.15 ·
 * 해 1.4 · 폭포 2.0 · 소나무 2.1 · 구름 2.25 · 작은 글 2.55 · 율·도·국 2.75~3.05 · 낙관 3.35 · 색동 3.4 · 설명 3.7 ·
 * 들어가기 3.95 · 단추 4.1 · 까치 4.6~. 그날 두 번째(data-brief)는 --k로 세 배 빠르게.
 */
.ig-root {
  --k: 1;
  --sea: clamp(64px, 15vh, 150px);
  --peak-h: clamp(220px, 48vh, 560px);
  --mark: clamp(56px, 10.5vw, 116px);
  position: fixed; inset: 0; z-index: 90; overflow: hidden;
  cursor: pointer; outline: none; color: #30452f;
  background-color: #fff8e8;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .7s ease;
}
.ig-root[data-brief="true"] { --k: .32; }
.ig-root [hidden] { display: none !important; }

/* ── 그림 ── */
.ig-world {
  position: absolute; inset: 0; transform-origin: 50% 64%;
  transition: transform .76s cubic-bezier(.5, 0, .8, .4), opacity .62s cubic-bezier(.5, 0, .8, .4);
}
.ig-world > * { position: absolute; }
.ig-world svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ig-sky {
  inset: 0;
  background:
    radial-gradient(circle, #3d2a1a12 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fff3d8 0%, #fff8e8 58%);
}

.ig-moon {
  left: 13%; top: clamp(48px, 13vh, 140px); width: clamp(44px, 8.5vmin, 104px); aspect-ratio: 1;
  animation: ig-moonrise calc(1.2s * var(--k)) ease-out calc(1.15s * var(--k)) both;
}
.ig-sun {
  right: 13%; top: clamp(40px, 11vh, 120px); width: clamp(52px, 10vmin, 122px); aspect-ratio: 1;
  animation: ig-sunrise calc(1.7s * var(--k)) cubic-bezier(.15, .75, .25, 1) calc(1.4s * var(--k)) both;
}
.ig-sun svg { position: relative; }
.ig-halo {
  position: absolute; inset: -38%; border-radius: 50%; background: #f6d27a; opacity: .42;
  animation: ig-halo 4.2s ease-in-out calc(3.1s * var(--k)) infinite alternate both;
}

.ig-cloud { width: clamp(110px, 15vw, 250px); aspect-ratio: 240 / 90; }
.ig-cloud-a { left: 4%; top: calc(clamp(48px, 13vh, 140px) + clamp(44px, 8.5vmin, 104px) * .7); animation: ig-from-left calc(1.4s * var(--k)) cubic-bezier(.2, .8, .2, 1) calc(2.25s * var(--k)) both; }
.ig-cloud-b { right: 3%; top: calc(clamp(40px, 11vh, 120px) + clamp(52px, 10vmin, 122px) * .9); animation: ig-from-right calc(1.4s * var(--k)) cubic-bezier(.2, .8, .2, 1) calc(2.35s * var(--k)) both; }
.ig-cloud svg { animation: ig-drift 9s ease-in-out calc(3.8s * var(--k)) infinite; }
.ig-cloud-b svg { animation-duration: 11s; animation-direction: reverse; }

.ig-hills {
  left: 0; right: 0; bottom: calc(var(--sea) - 3vh); height: calc(var(--peak-h) * .42);
  animation: ig-rise calc(1s * var(--k)) cubic-bezier(.2, .8, .2, 1) calc(.3s * var(--k)) both;
}
.ig-peaks {
  left: 50%; bottom: calc(var(--sea) - 3vh); height: var(--peak-h);
  width: calc(var(--peak-h) * 4); margin-left: calc(var(--peak-h) * -2);
}
.ig-peaks-back { animation: ig-rise calc(1.15s * var(--k)) cubic-bezier(.2, .85, .25, 1) calc(.5s * var(--k)) both; }
.ig-peaks-mid { animation: ig-rise calc(1.15s * var(--k)) cubic-bezier(.2, .85, .25, 1) calc(.75s * var(--k)) both; }
.ig-peaks-top { animation: ig-rise-top calc(1.3s * var(--k)) cubic-bezier(.2, 1.15, .3, 1) calc(1s * var(--k)) both; }
.ig-falls { transform-origin: 50% 48%; animation: ig-pour calc(.9s * var(--k)) cubic-bezier(.4, 0, .2, 1) calc(2s * var(--k)) both; }

.ig-sea {
  left: 0; right: 0; bottom: 0; height: var(--sea); overflow: hidden;
  background: linear-gradient(180deg, #5b8fd6 0%, #34488a 100%); border-top: 3px solid #3d2a1a;
  animation: ig-sea-in calc(.9s * var(--k)) cubic-bezier(.2, .8, .2, 1) calc(.05s * var(--k)) both;
}
.ig-wave { position: absolute; left: 0; width: calc(100% + 240px); background-repeat: repeat-x; background-size: 120px 100%; }
.ig-wave-a {
  top: 4%; height: 36%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><path d='M0 24C15 24 17 8 30 8S45 24 60 24 75 8 90 8 105 24 120 24V40H0Z' fill='%235b8fd6'/><path d='M0 24C15 24 17 8 30 8S45 24 60 24 75 8 90 8 105 24 120 24' fill='none' stroke='%23fffdf6' stroke-width='3'/><path d='M24 16c3-5 10-5 11 0M84 16c3-5 10-5 11 0' fill='none' stroke='%23fffdf6' stroke-width='2.4' stroke-linecap='round'/></svg>");
  animation: ig-flow 8s linear infinite;
}
.ig-wave-b {
  top: 42%; height: 44%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><path d='M0 9C13 9 17 25 30 25S47 9 60 9 73 25 90 25 107 9 120 9V40H0Z' fill='%2334488a'/><path d='M0 9C13 9 17 25 30 25S47 9 60 9 73 25 90 25 107 9 120 9' fill='none' stroke='%23fffdf6' stroke-width='3'/><path d='M54 18c3-5 10-5 11 0' fill='none' stroke='%23fffdf6' stroke-width='2.4' stroke-linecap='round'/></svg>");
  animation: ig-flow-back 11s linear infinite;
}

.ig-pine {
  bottom: calc(var(--sea) * -.1); width: clamp(104px, 19vw, 290px); aspect-ratio: 240 / 360; transform-origin: 50% 100%;
  animation: ig-grow calc(.95s * var(--k)) cubic-bezier(.2, 1.1, .3, 1) calc(2.1s * var(--k)) both;
}
.ig-pine-left { left: -1vw; }
.ig-pine-right { right: -1vw; animation-delay: calc(2.22s * var(--k)); }
.ig-pine svg { transform-origin: 50% 100%; animation: ig-sway 7s ease-in-out calc(3.2s * var(--k)) infinite; }
.ig-pine-right svg { animation-duration: 8s; }

/* 까치 — 오른쪽에서 왼쪽으로, 봉우리 앞을 비스듬히 날아오르며 지나간다 */
.ig-bird {
  left: 0; top: 43vh; width: clamp(40px, 5vw, 64px); aspect-ratio: 80 / 44;
  animation: ig-fly 19s linear calc(4.6s * var(--k)) infinite both;
}
.ig-bird svg { animation: ig-bob .9s ease-in-out infinite alternate; }
.ig-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: ig-flap .3s ease-in-out infinite alternate; }

/* ── 글 ── */
.ig-front { position: absolute; inset: 0; transition: opacity .42s ease, transform .5s cubic-bezier(.5, 0, .75, 0); }
.ig-card {
  position: absolute; left: 50%; top: clamp(28px, 8vh, 96px); width: min(92vw, 760px); transform: translateX(-50%);
  display: grid; justify-items: center; text-align: center;
}
.ig-eyebrow {
  margin: 0; color: #607356; font-size: 15px; font-weight: 800; letter-spacing: .32em; text-indent: .32em;
  animation: ig-up calc(.7s * var(--k)) ease-out calc(2.55s * var(--k)) both;
}
.ig-mark { position: relative; font-size: var(--mark); line-height: 1; margin-top: 6px; }
.ig-title {
  display: flex; margin: 0; color: #30452f; font-size: 1em; font-weight: 900; line-height: 1.06;
  text-shadow: 0 3px 0 #f6d27a, 0 6px 0 #e0b65a, 0 14px 24px #30452f2e;
}
.ig-ch { display: inline-block; margin: 0 .07em; animation: ig-drop calc(.62s * var(--k)) cubic-bezier(.2, 1.5, .4, 1) both; }
.ig-ch:nth-child(1) { animation-delay: calc(2.75s * var(--k)); }
.ig-ch:nth-child(2) { animation-delay: calc(2.9s * var(--k)); }
.ig-ch:nth-child(3) { animation-delay: calc(3.05s * var(--k)); }
/* 낙관 — 홍길동의 도장. 이름 오른쪽 아래에 비스듬히 찍힌다 */
.ig-seal {
  position: absolute; left: 100%; bottom: .14em; margin-left: .02em; width: .42em; height: .42em;
  display: grid; place-items: center; border-radius: 14% 18% 12% 16%;
  background: #e2474b; box-shadow: inset 0 0 0 .025em #fffdf6; color: #fffdf6;
  transform: rotate(-7deg);
  animation: ig-stamp calc(.5s * var(--k)) cubic-bezier(.3, 1.6, .5, 1) calc(3.35s * var(--k)) both;
}
.ig-seal b { writing-mode: vertical-rl; font-size: .15em; font-weight: 900; line-height: 1; letter-spacing: .06em; }
.ig-seal::after {
  content: ""; position: absolute; inset: -.05em; border-radius: inherit; border: .03em solid #e2474b; opacity: 0;
  animation: ig-ring calc(.7s * var(--k)) ease-out calc(3.55s * var(--k)) forwards;
}
.ig-band {
  display: flex; width: clamp(180px, 30vw, 380px); height: 10px; margin-top: 14px; border-radius: 99px; overflow: hidden;
  box-shadow: 0 0 0 2px #3d2a1a; transform-origin: 0 50%;
  animation: ig-unroll calc(.7s * var(--k)) cubic-bezier(.6, 0, .2, 1) calc(3.4s * var(--k)) both;
}
.ig-band i { flex: 1; }
.ig-band i:nth-child(1) { background: #e2474b; }
.ig-band i:nth-child(2) { background: #f1c33c; }
.ig-band i:nth-child(3) { background: #4f9e5b; }
.ig-band i:nth-child(4) { background: #5b8fd6; }
.ig-band i:nth-child(5) { background: #f5a3c0; }
.ig-tell {
  margin: 14px 0 0; color: #30452f; font-size: 16px; font-weight: 700; text-shadow: 0 1px 0 #fffdf6;
  animation: ig-up calc(.6s * var(--k)) ease-out calc(3.7s * var(--k)) both;
}

/* 들어가기 — 바다 위 한지 띠. 짓는 동안은 점 셋이 뛰고, 다 지으면 숨 쉬듯 */
.ig-start {
  position: absolute; left: 50%; bottom: calc(var(--sea) * .5); transform: translate(-50%, 50%);
  display: grid; justify-items: center; gap: 8px; width: max-content; max-width: 94vw;
}
.ig-call {
  margin: 0; display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px;
  border: 2.5px solid #3d2a1a; border-radius: 999px; background: #fffdf6; box-shadow: 0 5px 0 #3d2a1a;
  color: #30452f; font-size: 21px; font-weight: 900; letter-spacing: .02em; white-space: nowrap;
  animation: ig-up calc(.5s * var(--k)) ease-out calc(3.95s * var(--k)) both, ig-breathe 2.4s ease-in-out calc(4.6s * var(--k)) infinite;
}
.ig-root[data-state="loading"] .ig-call { color: #607356; }
.ig-root[data-state="failed"] .ig-call { color: #e2474b; white-space: normal; animation: none; }
.ig-dots { display: inline-flex; gap: 5px; }
.ig-dots i { width: 7px; height: 7px; border-radius: 50%; background: #496b36; animation: ig-dot 1.1s ease-in-out infinite; }
.ig-dots i:nth-child(2) { animation-delay: .18s; }
.ig-dots i:nth-child(3) { animation-delay: .36s; }
.ig-sub {
  margin: 0; color: #fffdf6; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px #34488a;
  animation: ig-fade calc(.5s * var(--k)) ease-out calc(4.15s * var(--k)) both;
}

.ig-corner {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top));
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  animation: ig-fade calc(.6s * var(--k)) ease-out calc(4.1s * var(--k)) both;
}
.ig-pill {
  min-height: 44px; padding: 8px 16px; border: 2px solid #3d2a1a; border-radius: 999px;
  background: #fffdf6; color: #30452f; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .02em;
  cursor: pointer; box-shadow: 0 3px 0 #3d2a1a;
}
.ig-pill:hover { background: #fff3d8; }
.ig-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 #3d2a1a; }
.ig-pill:focus-visible { outline: 3px solid #f1c33c; outline-offset: 2px; }
.ig-sound[aria-pressed="true"] { background: #496b36; color: #fffdf6; }

/* ── 나가기 — 그림 속으로 뛰어든다(그림이 다가오며 걷히고, 뒤에서 카메라가 내려앉는다) ── */
.ig-root[data-leaving="true"] { background-color: transparent; pointer-events: none; }
.ig-root[data-leaving="true"] .ig-world { transform: scale(1.14); opacity: 0; }
.ig-root[data-leaving="true"] .ig-front { opacity: 0; transform: translate3d(0, -3vh, 0); }

@keyframes ig-fade { from { opacity: 0; } }
@keyframes ig-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes ig-moonrise { from { opacity: 0; transform: translate3d(0, 2.5vh, 0) scale(.9); } }
/* 해는 먼 언덕·바다 뒤(70vh 아래)에서 떠올라 봉우리 위로 나온다 */
@keyframes ig-sunrise { from { transform: translate3d(0, 70vh, 0); } }
@keyframes ig-halo { from { opacity: .28; transform: scale(.86); } to { opacity: .55; transform: scale(1.06); } }
@keyframes ig-from-left { from { opacity: 0; transform: translate3d(-14vw, 0, 0); } }
@keyframes ig-from-right { from { opacity: 0; transform: translate3d(14vw, 0, 0); } }
@keyframes ig-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1.8vw, -.6vh, 0); } }
@keyframes ig-rise { from { opacity: 0; transform: translate3d(0, 42%, 0); } 40% { opacity: 1; } }
@keyframes ig-rise-top { from { opacity: 0; transform: translate3d(0, 55%, 0); } 35% { opacity: 1; } }
@keyframes ig-pour { from { opacity: 0; transform: scaleY(0); } 20% { opacity: 1; } }
@keyframes ig-sea-in { from { transform: translate3d(0, 100%, 0); } }
@keyframes ig-flow { to { transform: translate3d(-240px, 0, 0); } }
@keyframes ig-flow-back { from { transform: translate3d(-240px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes ig-grow { from { opacity: 0; transform: scale(.55); } 30% { opacity: 1; } }
@keyframes ig-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(.7deg); } 75% { transform: rotate(-.7deg); } }
@keyframes ig-fly { 0% { transform: translate3d(108vw, 0, 0); } 46% { transform: translate3d(-12vw, -7vh, 0); } 100% { transform: translate3d(-12vw, -7vh, 0); } }
@keyframes ig-bob { to { transform: translate3d(0, 5px, 0); } }
@keyframes ig-flap { to { transform: scaleY(-.55); } }
@keyframes ig-drop { from { opacity: 0; transform: translate3d(0, -.45em, 0) scale(1.18); } 45% { opacity: 1; } }
@keyframes ig-stamp { 0% { opacity: 0; transform: rotate(-16deg) scale(1.9); } 55% { opacity: 1; transform: rotate(-6deg) scale(.92); } 100% { transform: rotate(-7deg) scale(1); } }
@keyframes ig-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes ig-unroll { from { transform: scaleX(0); } }
@keyframes ig-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes ig-dot { 0%, 100% { opacity: .25; transform: translate3d(0, 0, 0); } 40% { opacity: 1; transform: translate3d(0, -4px, 0); } }

/* 움직임 줄이기 — 다 맞춰진 그림 한 장. 물결도 구름도 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .ig-root, .ig-root *, .ig-root *::after { animation: none !important; transition: none !important; }
}

/* 세로로 좁은 화면(스마트폰) — 가운데 봉우리 셋만 남고, 글은 위·들어가기는 바다 위 */
@media (max-width: 600px) {
  .ig-root { --peak-h: clamp(220px, 44vh, 440px); }
  .ig-card { top: clamp(64px, 10vh, 96px); }
  .ig-eyebrow { font-size: 13px; letter-spacing: .2em; text-indent: .2em; }
  .ig-tell { font-size: 14px; max-width: 19em; }
  .ig-call { font-size: 18px; padding: 10px 20px; gap: 10px; }
  /* 해·달은 글과 봉우리 사이로 — 글 옆에 두면 이름과 낙관에 붙어 비좁다 */
  .ig-sun { top: 31vh; right: 9%; }
  .ig-moon { top: 33vh; left: 10%; }
  .ig-cloud { width: 96px; }
  .ig-cloud-a { top: 38vh; left: -3%; }
  .ig-cloud-b { top: 35vh; right: -3%; }
  .ig-sub { display: none; }
  .ig-pine { width: 100px; }
  .ig-pill { min-height: 40px; padding: 6px 12px; font-size: 13px; }
}
/* 가로로 누운 낮은 화면 — 글을 줄이고 그림을 낮춘다 */
@media (max-height: 520px) and (orientation: landscape) {
  .ig-root { --sea: 58px; --peak-h: 210px; --mark: 52px; }
  .ig-card { top: 12px; }
  .ig-sun { top: 22vh; }
  .ig-sub { display: none; }
  .ig-tell { display: none; }
  .ig-band { margin-top: 8px; }
  .ig-call { font-size: 17px; padding: 8px 18px; }
}