:root {
  --accent: #0061fe;
  --ink: #1a1918;
  --paper: #ffffff;
  --line: #efe2b8;
  --line-strong: #ffc21a;
  --display: "Archivo", "Pretendard Variable", Arial, sans-serif;
  --body: "Pretendard Variable", "Archivo", system-ui, sans-serif;
  --tile-t: 0.45s cubic-bezier(0.4, 0.1, 0.2, 1);
  --morph: 0.6s cubic-bezier(0.5, 0, 0.2, 1);
  --gap: 10px;
  --cb-yellow: #ffd23f;
  --cb-cream: #fff3c4;
  --cb-brown: #43281a;
  --cb-coco: #8e4fd9;
  --cb-lobi: #c0434f;
  --round: "Jua", "Pretendard Variable", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; }

/* 스크롤 길이: 화면 3개 분량 (실제 연출은 fixed stage에서) */
.scroll-track { height: 300vh; }

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* ---------- 격자선 ---------- */
.lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.line { position: absolute; left: 0; top: 0; will-change: transform; }
.line--v { width: 1px; height: 100%; }
.line--h { height: 1px; width: 100%; }
.line i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--line-strong);
  transition: transform 3s cubic-bezier(0.5, 0, 0, 1), background-color 1.5s ease-in-out 0.75s;
}
.line--v i { transform: scaleY(0); }
.line--h i { transform: scaleX(0); }
.lines-in .line i { transform: none; background: var(--line); }
.is-morphing .line { transition: transform var(--morph); }

/* ---------- 타일 ---------- */
.tiles { position: absolute; inset: 0; z-index: 1; }
.tile {
  position: absolute;
  left: 0; top: 0;
  display: block;
  background: var(--bg);
  color: var(--on);
  text-decoration: none;
  overflow: hidden;
  container-type: size;
  will-change: transform;
  transition: background-color var(--tile-t), color var(--tile-t);
  outline: none;
}
.tile__title {
  position: absolute;
  left: 0.55em; top: 0.4em;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(18px, 2.333vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  transform-origin: 0 0;
  z-index: 3;
  white-space: nowrap;
}
.viz { position: absolute; pointer-events: none; }


/* 캐릭터 타일 */
.tile--char .tile__title {
  font-family: var(--round);
  font-weight: 400;
  font-stretch: 100%;
  font-size: clamp(24px, 2.8vw, 50px);
  letter-spacing: 0;
  left: 0.5em; top: 0.38em;
}
.tile__sub {
  position: absolute; left: 1.4em; top: calc(0.38em + clamp(24px, 2.8vw, 50px) * 1.35);
  z-index: 3;
  font-size: clamp(11px, 0.85vw, 14px); font-weight: 700; letter-spacing: 0.04em;
  opacity: 0.8; white-space: nowrap;
  font-size-adjust: none;
}
.tile__cta {
  position: absolute; left: 1.1em; bottom: 1em; z-index: 3;
  padding: 0.45em 0.9em; border-radius: 999px;
  background: var(--on); color: var(--deep);
  font-family: var(--round); font-size: clamp(12px, 0.95vw, 16px);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.char-cut {
  position: absolute; bottom: -4%; z-index: 2;
  height: auto; pointer-events: none;
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.char-cut--coco { right: 9%; height: 86%; width: auto; max-height: 385px; }
.char-cut--lovey { right: 10%; height: 80%; width: auto; max-height: 301px; }
.char-card {
  position: absolute; right: 9%; bottom: 9%; z-index: 2;
  width: min(54cqw, 190px); aspect-ratio: 1;
  border: 6px solid #fff; border-radius: 18px;
  background: #fff; overflow: hidden;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.45);
  transform: rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.char-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:nth-child(even) .char-card { transform: rotate(4deg); }
/* 라라: 미스터리 — 밤하늘 별 */
/* 넓은 간격의 엇갈림 격자 한 패턴, 제목 쪽은 비워 두고 아래로 갈수록 드러난다 */
.tile--char:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 1.2px, transparent 1.8px);
  background-size: 72px 72px;
  background-position: 18px 18px, 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 22%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 22%, #000 48%);
}
/* ETC: 친구들 썸네일 부채꼴 */
.etc-fan { position: absolute; left: 50%; bottom: 14%; z-index: 2; width: 0; height: 0; }
.etc-fan img {
  position: absolute; left: 0; bottom: 0;
  width: min(30cqw, 92px); aspect-ratio: 1; object-fit: cover;
  border: 4px solid #fff3c4; border-radius: 14px;
  transform-origin: 50% 160%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: calc(min(30cqw, 92px) / -2);
}
.etc-fan img:nth-child(1) { transform: rotate(-24deg); }
.etc-fan img:nth-child(2) { transform: rotate(-12deg); }
.etc-fan img:nth-child(3) { transform: rotate(0deg); z-index: 1; }
.etc-fan img:nth-child(4) { transform: rotate(12deg); }
.etc-fan img:nth-child(5) { transform: rotate(24deg); }
.etc-more {
  position: absolute; left: calc(min(30cqw, 92px) * 0.9); bottom: calc(min(30cqw, 92px) * 0.85); z-index: 2;
  padding: 0.2em 0.6em; border-radius: 999px; background: var(--cb-yellow); color: var(--cb-brown);
  font-family: var(--round); font-size: 15px;
}

@media (any-hover: hover) {
  .tile:hover { background-color: var(--deep); }
  .tile:hover .tile__cta { opacity: 1; transform: none; }
  .tile:hover .char-cut { transform: translateY(-5%) rotate(-3deg) scale(1.04); }
  .tile:hover .char-card { transform: translateY(-6%) rotate(0deg) scale(1.06); }
  .tile:hover .etc-fan img:nth-child(1) { transform: rotate(-36deg); }
  .tile:hover .etc-fan img:nth-child(2) { transform: rotate(-18deg); }
  .tile:hover .etc-fan img:nth-child(4) { transform: rotate(18deg); }
  .tile:hover .etc-fan img:nth-child(5) { transform: rotate(36deg); }
}
.tile:focus-visible { background-color: var(--deep); outline: 3px solid var(--on); outline-offset: -6px; }
.tile:focus-visible .tile__cta { opacity: 1; transform: none; }

/* 타일 클릭 → 화면 가득 확대 후 이동 */
.tile.is-enlarged {
  z-index: 40;
  transition: transform var(--morph), left var(--morph), top var(--morph), width var(--morph), height var(--morph), border-radius var(--morph);
  border-radius: 16px;
  background: var(--bg) !important;
  color: var(--on) !important;
}
.tile.is-enlarged .tile__title { transition: transform var(--morph), left var(--morph), top var(--morph); left: 28px; top: 22px; transform: scale(2.6); }
.tile.is-enlarged .char-cut, .tile.is-enlarged .char-card, .tile.is-enlarged .etc-fan, .tile.is-enlarged .tile__sub, .tile.is-enlarged .tile__cta { opacity: 0; transition: opacity 0.25s; }
.is-leaving .tile:not(.is-enlarged) { opacity: 0; transition: opacity 0.4s; }
.is-leaving .core { transform: scale(0.66); opacity: 0; transition: transform 0.3s var(--morph), opacity 0.3s; }
.is-leaving .lines { opacity: 0; transition: opacity 0.3s; }

/* ---------- 가운데 카드 (히어로 → 메뉴 버튼) ---------- */
.core {
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--cb-cream);
  color: var(--cb-brown);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  outline: none;
  box-shadow: 0 1px 0 rgba(67, 40, 26, 0.04), 0 18px 40px -24px rgba(67, 40, 26, 0.35);
}
.core.is-animating { transition: left var(--morph), top var(--morph), width var(--morph), height var(--morph), background-color var(--morph), color var(--morph); }
.core[data-state="2"], .core[data-state="3"] { background: var(--cb-yellow); }
.core__title {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  transition: opacity 0.2s cubic-bezier(0.2, 0.5, 0.5, 1) 0.1s;
}
.core__title--2 { opacity: 0; }

/* 1단계: 가족 일러스트 + 웰컴 */
.cb-hero { inset: 0; width: 100%; height: 100%; display: block; container-type: size; }
.cb-hero__scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cb-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 246, 214, 0.55) 0%, rgba(255, 246, 214, 0) 26%, rgba(255, 246, 214, 0) 74%, rgba(255, 238, 190, 0.6) 100%);
}
.cb-hero__logo {
  position: absolute; left: 50%; top: 5.5%;
  width: 30%; max-width: 240px; height: auto;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(67, 40, 26, 0.18));
  transform: translateX(-50%);
}
.cb-hero__welcome {
  position: absolute; left: 50%; bottom: 6.5%;
  z-index: 2;
  max-width: 76%;
  padding: 0.55em 1.5em 0.5em;
  border-radius: 999px;
  background: var(--cb-brown);
  color: #fff;
  font-family: var(--round);
  font-size: clamp(14px, 3.7cqw, 30px); /* 카드 크기에 맞춰 줄어 배지 밖으로 넘치지 않게 */
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(67, 40, 26, 0.6);
  transform: translateX(-50%);
}
/* 로드인: 일러스트가 살짝 줌아웃, 로고가 통통 튀고, 웰컴 배지가 올라온다 */
.is-intro .cb-hero__logo { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.6); }
.is-intro .cb-hero__welcome { opacity: 0; transform: translateX(-50%) translateY(24px); }
.lines-in .cb-hero__scene { transform: none; }
.cb-hero__logo { transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cb-hero__welcome { transition: opacity 0.6s ease 0.25s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }

/* 2단계: 로고 + 이름의 의미 (500px 기준으로 그리고 JS가 축소) */
.meaning {
  width: var(--start, 500px); height: var(--start, 500px);
  font-size: calc(var(--start, 500px) * 0.054);
  font-family: var(--round);
  color: var(--cb-brown);
}
.meaning__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(67, 40, 26, 0.13) 1.5px, transparent 1.6px);
  background-size: 1.1em 1.1em;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
}
.meaning__logo { position: absolute; left: 7%; top: 7%; width: 44%; height: auto; filter: drop-shadow(0 4px 0 rgba(67, 40, 26, 0.12)); }
.meaning__text { position: absolute; left: 7.5%; top: 41%; right: 6%; line-height: 1.5; }
.meaning__word { height: 1.15em; width: auto; vertical-align: -0.2em; }
.pill { display: inline-block; padding: 0.02em 0.42em 0; border-radius: 0.45em; color: #fff; font-weight: 400; }
.pill--coco { background: var(--cb-coco); transform: rotate(-3deg); }
.pill--lobi { background: var(--cb-lobi); transform: rotate(2deg); }
.meaning__peek { position: absolute; bottom: -2%; height: auto; transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.2s; }
.meaning__peek--coco { right: 23%; width: 22%; transform: translateY(110%) rotate(-6deg); }
.meaning__peek--lobi { right: 2%; width: 23%; transform: translateY(110%) rotate(8deg); transition-delay: 0.32s; }
.core[data-state="2"] .meaning__peek--coco, .core[data-state="3"] .meaning__peek--coco { transform: translateY(18%) rotate(-6deg); }
.core[data-state="2"] .meaning__peek--lobi, .core[data-state="3"] .meaning__peek--lobi { transform: translateY(14%) rotate(8deg); }

/* 3단계 끝: 작은 로고 버튼 */
.core__mark {
  position: absolute; left: 50%; top: 50%;
  width: 76%; max-width: 72px; height: auto;
  opacity: var(--mark-o, 0);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, transform 0.3s;
}

.core__icon {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  fill: none; stroke: var(--cb-brown); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.3s cubic-bezier(0.25, 0, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0, 0.25, 1);
}
.core.is-end:hover .core__mark,
.core.is-end:focus-visible .core__mark,
.is-outro .core .core__mark { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.core.is-end:hover .core__icon--info,
.core.is-end:focus-visible .core__icon--info { opacity: 1; transform: none; }
.is-outro .core .core__icon--info { opacity: 0; }
.is-outro .core .core__icon--close { opacity: 1; transform: none; }

.chevrons {
  position: absolute; right: 26px; bottom: 26px;
  z-index: 3;
  display: flex; flex-direction: column; gap: 0;
  opacity: 0; transition: opacity 0.6s;
  filter: drop-shadow(0 1px 2px rgba(67, 40, 26, 0.5));
}
.chevrons.is-visible { opacity: 1; }
.core:not([data-state="1"]) .chevrons { opacity: 0; }
.chevron { width: 22px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chevron.is-pulse { animation: chevron 0.9s cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes chevron {
  0% { transform: none; opacity: 1; }
  45% { transform: translateY(6px); opacity: 0.35; }
  100% { transform: none; opacity: 1; }
}

/* ---------- 아웃트로 ---------- */
.outro {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1);
  overflow: hidden;
}
.is-outro .outro { transform: none; }
.is-outro .stage { z-index: 5; pointer-events: none; }
.is-outro .stage .core { pointer-events: auto; }
.is-outro .tiles { opacity: 0; transition: opacity 0.4s 0.4s; }
.outro__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  grid-template-rows: 1fr auto;
  gap: 48px;
  padding: 12vh 7vw 8vh;
  border: 1px solid var(--line);
  margin: 10px;
}
.outro__heading {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.hang { margin-left: -0.45em; }
.outro__lead { margin: 20px 0 0; font-size: 15px; opacity: 0.6; }
.outro__info p { margin: 0 0 1.1em; font-size: 17px; line-height: 1.6; max-width: 40ch; }
.outro__links { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.outro__links a { text-decoration: none; font-weight: 600; color: var(--accent); width: fit-content; border-bottom: 1.5px solid transparent; transition: border-color 0.2s; }
.outro__links a:hover { border-color: currentColor; }
.outro__art { margin: 0; align-self: start; aspect-ratio: 1; background: #e8efff; overflow: hidden; }
.outro__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outro__credits { grid-column: 1 / -1; margin: 0; font-size: 13px; opacity: 0.55; }
.is-outro .outro__inner > * { animation: rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.is-outro .outro__info { animation-delay: 0.45s; }
.is-outro .outro__head { animation-delay: 0.35s; }
.is-outro .outro__art { animation-delay: 0.55s; }
.is-outro .outro__credits { animation-delay: 0.65s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.cursors { position: absolute; inset: 0; pointer-events: none; }
.cursor-tag { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity 0.4s; }
.is-outro .cursor-tag { opacity: 1; transition-delay: 0.8s; }
.cursor-tag svg { width: 16px; height: 16px; display: block; }
.cursor-tag span {
  display: inline-block;
  margin: 2px 0 0 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  background: var(--c-bg); color: var(--c-fg);
}

/* ---------- 모바일 / 모션 최소화: 정적 흐름 레이아웃 ---------- */
.is-static .scroll-track { display: none; }
.is-static .stage { position: relative; inset: auto; overflow: visible; padding: var(--gap); display: flex; flex-direction: column; }
.is-static .core { order: -1; }
.is-static .lines { display: none; }
.is-static .tiles { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.is-static .tile { position: relative; transform: none !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; aspect-ratio: 4 / 5; }
.is-static .tile__title { font-size: clamp(22px, 6.5vw, 34px); }
.is-static .tile__sub { top: calc(0.38em + clamp(22px, 6.5vw, 34px) * 1.35); font-size: 11px; }
.is-static .tile__cta { display: none; }
.is-static .core { position: relative; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; background: var(--cb-yellow); cursor: default; display: block; }
.is-static .core__title { position: relative; transform: none !important; opacity: 1 !important; }
.is-static .cb-hero { display: block; aspect-ratio: 1 / 1; }
.is-static .cb-hero__welcome { font-size: clamp(14px, 4.4vw, 22px); white-space: normal; word-break: keep-all; text-align: center; width: max-content; }
.is-static .meaning { display: block; --start: min(calc(100vw - 20px), 560px); margin: 0 auto; }
.is-static .meaning__peek--coco { transform: translateY(18%) rotate(-6deg); }
.is-static .meaning__peek--lobi { transform: translateY(14%) rotate(8deg); }
.is-static .core__mark { display: none; }
.is-static .core__icon, .is-static .chevrons { display: none; }
.is-static .outro { position: relative; transform: none; inset: auto; }
.is-static .outro__inner { position: relative; inset: auto; grid-template-columns: 1fr; padding: 40px 22px; gap: 28px; }
.is-static .cursors { display: none; }
.is-static .outro__art { max-width: 420px; width: 100%; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }