:root {
  --pink-deep: #905771;
  --pink: #b17f8d;
  --pink-soft: #d294a5;
  --blush: #f5b7b7;
  --cream: #fff6f3;
  --ink: #3b2430;
  --ink-soft: #7a5866;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: clamp(64px, 4.8vw, 92px);
  /* 히어로 영상 맨 윗줄 색 (세로 화면에서 위쪽 빈 공간을 이어 칠할 때 사용) */
  --hero-sky: linear-gradient(90deg, #8d5770 0%, #945e75 17%, #a26e84 33%, #ae7c8b 50%, #ae798b 67%, #a36e80 83%, #aa7084 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background: #1d1218;
  -webkit-font-smoothing: antialiased;
  --fg: #fff;
}
body[data-theme="dark"] { --fg: var(--ink); }
img, video { display: block; }
button { font: inherit; }

/* ---------- 풀페이지 (js/fullpage.js) ---------- */
/* 스크립트가 꺼져 있으면 섹션이 위아래로 이어진 일반 페이지로 보인다 */
.fp-section { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html.fp-active, html.fp-active body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.fp-active .fp { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; }
html.fp-active .fp-section { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; height: auto; will-change: transform; }
.fp-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; }
.fp-scroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  /* 로고(왼쪽) · 슬로건(화면 정중앙) · 메뉴(오른쪽) */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--fg);
  transition: color .45s ease;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.logo { justify-self: start; display: block; line-height: 0; color: inherit; }
/* 로고 PNG는 검정이라, 흰 배경 섹션(진한 글자)에서는 그대로, 어두운 배경(흰 글자)에서는 흰색으로 바꾼다. 헤더 글자색과 같은 속도로 전환 */
.logo img {
  height: clamp(26px, 1.77vw, 36px); width: auto;
  filter: brightness(0) invert(1);
  transition: filter .45s ease;
}
body[data-theme="dark"] .logo img { filter: brightness(0) invert(.1); }
.site-header__tagline {
  margin: 0; white-space: nowrap;
  font-size: clamp(14px, 1.25vw, 24px); font-weight: 600; letter-spacing: -0.02em;
}
.nav { justify-self: end; display: flex; gap: clamp(16px, 2.6vw, 32px); }
.nav a { color: inherit; text-decoration: none; font-size: clamp(14px, 1vw, 19px); font-weight: 500; opacity: .8; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="true"], .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="true"], .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* ---------- 섹션 표시 점 ---------- */
.fp-dots {
  position: fixed; right: clamp(14px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--fg); transition: color .45s ease;
}
.fp-dots button {
  position: relative; width: 12px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
}
.fp-dots button::before {
  content: ""; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; inset: 3px; border-radius: 50%; background: currentColor; opacity: .4;
  transition: transform .3s ease, opacity .3s ease;
}
.fp-dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.5); }
.fp-dots button span {
  position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%);
  font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.fp-dots button:hover span, .fp-dots button:focus-visible span { opacity: .9; transform: translate(0, -50%); }

.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; }

/* ---------- 섹션 1. 히어로 (GazeHero) ---------- */
.s-hero { background: #a26e84; }
.gaze-hero {
  --gaze-focus-y: 0.5;            /* 화면 비율이 달라 잘릴 때 세로 기준점 (0 위, 1 아래) */
  --gaze-progress: 0;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  overflow: hidden;
  /* 불러오는 동안 보이는 첫 화면 */
  background: url("../frames/poster.webp") center / cover no-repeat, var(--hero-sky);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  color: #fff;
}
@media (max-aspect-ratio: 1/1) {
  .gaze-hero { background-size: 235% auto, auto; background-position: center bottom, 0 0; }
}
/* JS가 만드는 요소: 배경 영상(정지) + 캐릭터 영역 영상 2개 (모두 같은 형식이라 색이 일치) */
.gaze-hero__stage {
  position: absolute;                              /* 위치·크기는 JS가 화면 비율에 맞춰 지정 */
  opacity: 0; transition: opacity .25s ease;       /* 첫 프레임 준비가 끝난 뒤에 보여준다 */
  pointer-events: none;
}
.gaze-hero[data-painted] .gaze-hero__stage { opacity: 1; }
.gaze-hero__base { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.gaze-hero__video { position: absolute; object-fit: fill; background: transparent; }

/* 세로 화면: 영상 위쪽 빈 공간을 영상 윗줄 색으로 채우고, 경계는 부드럽게 녹인다 */
.gaze-hero__sky { display: none; }
.gaze-hero[data-gap] .gaze-hero__sky {
  display: block; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--gaze-stage-top, 0px) + var(--gaze-stage-h, 0px) * .14);
  background: var(--hero-sky);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--gaze-stage-top, 0px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--gaze-stage-top, 0px), transparent 100%);
  pointer-events: none;
}

/* Hero typography and columns share one scale, independent of video size. */
.s-hero__copy {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) 44% minmax(0, 1fr);
  align-items: center; padding: 0 var(--gutter);
  font-size: clamp(14px, 1.05vw, 20px); line-height: 1.8;
  letter-spacing: -.025em; color: #fff;
  word-break: keep-all; overflow-wrap: break-word;
  text-shadow: 0 2px 16px rgba(94, 50, 72, .2);
}
.s-hero__intro { grid-column: 1; min-width: 0; }
.s-hero__title { margin: 0 0 24px; line-height: 0; }
.s-hero__title img { display: block; width: 100%; height: auto; }
/* 글의 위계 (기준 글자 크기 1em = .s-hero__copy 의 font-size): 제목(SVG) > 하치가 좋아하는 것들(크고 굵게) > 마무리 한 줄(보통) > 프롤로그(작고 연하게) */
.s-hero__description p { margin: 0; }
.s-hero__description p:first-child { font-size: 1.16em; font-weight: 600; line-height: 1.62; letter-spacing: -.03em; }
.s-hero__description p + p { margin-top: .9em; font-size: .94em; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.prologue { grid-column: 3; display: grid; min-width: 0; font: inherit; font-size: .9em; font-weight: 400; color: rgba(255, 255, 255, .82); line-height: 1.85; }
.prologue__line {
  grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0;
  will-change: opacity, transform, filter;
}
.prologue.is-static .prologue__line:first-child { opacity: 1; }

/* The canvas extends the source video's actual edge colors across the viewport. */
.gaze-hero, .gaze-hero[data-gap] { background: #ad7b8b; }
.gaze-hero__sky, .gaze-hero[data-gap] .gaze-hero__sky { display: none; }
.gaze-hero__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gaze-hero__stage { z-index: 1; }

.gaze-hero__progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 3;
  transform-origin: left; transform: scaleX(var(--gaze-progress));
  background: rgba(255, 255, 255, .85);
  transition: transform .2s linear, opacity .4s ease .3s;
}
.gaze-hero[data-state="ready"] .gaze-hero__progress { opacity: 0; }

.gaze-hero__hint {
  position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 3;
  margin: 0; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; color: #fff; white-space: nowrap;
  background: rgba(59, 36, 48, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
.gaze-hero[data-state="ready"] .gaze-hero__hint { opacity: 1; }
.gaze-hero.is-touched .gaze-hero__hint { opacity: 0; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 15px 10px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--cue, #fff);
  /* 가운데 아래는 캐릭터 몸통과 겹치므로, 어떤 배경에서도 읽히도록 은은한 캡슐 배경을 둔다 */
  background: var(--cue-bg, rgba(59, 36, 48, .3));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
  opacity: .92; transition: opacity .2s ease, background-color .2s ease;
}
.scroll-cue:hover, .scroll-cue:focus-visible { opacity: 1; }
.scroll-cue:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 10px; }
.scroll-cue span { padding-left: .24em; }   /* 글자 사이 간격이 마지막 글자 뒤에도 붙어 한쪽으로 치우쳐 보이는 것을 보정 */
.scroll-cue i { position: relative; display: block; width: 1px; height: 30px; overflow: hidden; }
.scroll-cue i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: currentColor; opacity: .35; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: currentColor;
  animation: cue 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue { to { top: 100%; } }
/* 히어로 버튼: 글자(하치 따라가기)와 세로 알약이 나란히. 알약 안의 점이 아래로 내려가는 모션 */
.scroll-cue--hero {
  flex-direction: row; align-items: center; gap: .8em; bottom: 28px;
  padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: clamp(20px, 1.3vw, 28px); font-weight: 700; letter-spacing: .01em; white-space: nowrap; opacity: 1;   /* 글자·알약 크기는 모두 em 이라 이 값 하나로 같이 커지고 작아진다 */
  /* 아래쪽은 하치의 하얀 털과 겹치므로 글자에 은은한 그림자를 둔다 */
  text-shadow: 0 1px 2px rgba(94, 50, 72, .65), 0 0 16px rgba(94, 50, 72, .5);
}
.scroll-cue--hero span { padding-left: 0; }
.scroll-cue--hero i {
  width: 1.6em; height: 2.8em; overflow: visible; flex: none;
  border: 2.5px solid currentColor; border-radius: 999px;
  background: rgba(94, 50, 72, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(94, 50, 72, .25);
  transition: background-color .25s ease;
}
.scroll-cue--hero:hover i, .scroll-cue--hero:focus-visible i { background: rgba(94, 50, 72, .4); }
.scroll-cue--hero i::before { display: none; }
.scroll-cue--hero i::after {
  top: .55em; left: 50%; width: .36em; height: .36em; margin-left: -.18em; border-radius: 50%;
  background: currentColor; animation: cue-dot 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cue-dot {
  0% { opacity: 0; transform: translateY(-.15em); }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(1.05em); }
}
/* 마지막 섹션: 위로 돌아가는 버튼 */
.scroll-cue--up { flex-direction: column-reverse; }
.scroll-cue--up i::after { top: auto; bottom: -40%; animation-name: cue-up; }
@keyframes cue-up { to { bottom: 100%; } }
.s-video--baby, .s-video--main { --cue-bg: rgba(255, 255, 255, .62); }
.s-video .scroll-cue { --cue: var(--copy); }

/* ---------- 섹션 3~5. 캐릭터 영상 ---------- */
.s-video { --copy: var(--ink); --copy-soft: var(--ink-soft); --accent: var(--pink-deep); }
.s-video--baby { background: #ecd2d9; }
.s-video--main { background: #f6f5f9; }
.s-video--villain { background: #050408; --copy: #fff; --copy-soft: rgba(255, 255, 255, .72); --accent: #e7a3c4; }
.bgvideo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.s-video__copy {
  position: absolute; z-index: 2;
  left: var(--gutter); bottom: clamp(36px, 9vh, 104px);
  max-width: min(520px, 80vw);
  color: var(--copy);
}
.s-video__num { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.s-video__num span { opacity: .45; }
.s-video__en { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--accent); }
.s-video h2 { margin: 0 0 14px; font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.05em; font-weight: 800; }
.s-video__desc { margin: 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; color: var(--copy-soft); }

/* 섹션이 올라올 때 문구가 한 박자 늦게 떠오른다 */
.s-video__copy > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.fp-section.is-in .s-video__copy > * { opacity: 1; transform: none; }
.fp-section.is-in .s-video__copy > :nth-child(2) { transition-delay: .08s; }
.fp-section.is-in .s-video__copy > :nth-child(3) { transition-delay: .16s; }
.fp-section.is-in .s-video__copy > :nth-child(4) { transition-delay: .24s; }
/* 전환 도중에 레이어가 새로 만들어지며 끊기지 않도록 미리 레이어로 올려 둔다 */
.s-video__copy > * { will-change: opacity, transform; }
html:not(.fp-active) .s-video__copy > * { opacity: 1; transform: none; }

/* Tablet / tall windows: editorial copy above the character. */
@media (max-aspect-ratio: 3/2), (max-width: 1100px) {
  .s-hero__copy {
    inset: 0 0 auto; padding: calc(var(--header-h) + 56px) var(--gutter) 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: 8vw; font-size: clamp(14px, 1.5vw, 18px);
  }
  .s-hero__title { max-width: 420px; margin-bottom: 22px; }
  .prologue { grid-column: 2; max-width: 26em; align-self: center; padding-top: 48px; }
}
@media (max-width: 600px) {
  .s-hero__copy {
    grid-template-columns: minmax(0, 1fr); gap: 18px;
    padding-top: calc(var(--header-h) + 48px);
    font-size: 14px; line-height: 1.7;
  }
  .s-hero__title { width: min(76%, 300px); margin-bottom: 16px; }
  .s-hero__description p + p { margin-top: .6em; }
  .prologue { grid-column: 1; max-width: 36em; min-height: 5.1em; padding-top: 0; }
}

/* ---------- 모바일 ---------- */
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .site-header { display: flex; justify-content: space-between; }
  .site-header__tagline { display: none; }
  .nav { display: none; }
  .s-video__copy { bottom: max(36px, env(safe-area-inset-bottom)); }
  .fp-dots { gap: 10px; }
  .gaze-hero__hint { bottom: 40px; }
  .scroll-cue:not(.scroll-cue--hero) { display: none; }
}
/* 세로 화면: 하치·빌런 하치는 꽉 채우면 뿔과 팔이 잘리므로 전체가 보이는 크기로 두고 위아래는 배경색으로 이어 붙인다 */
@media (max-aspect-ratio: 3/4) {
  .s-video--main { --pw: 260vw; }
  .s-video--villain { --pw: 240vw; }
  .s-video--main .bgvideo, .s-video--villain .bgvideo {
    top: auto; right: auto; bottom: auto; inset: auto; left: 50%; transform: translateX(-50%);
    width: var(--pw); height: calc(var(--pw) / 1.795);
    top: calc(50% - var(--pw) / 1.795 / 2 - 7svh);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  }
}
@media (max-height: 640px) and (min-width: 761px) {
  .card__desc { display: none; }
}

/* 터치 기기(태블릿·모바일)와 좁은 창: "하치 따라가기" 버튼 아래에 안내 문구를 두고 부드럽게 깜빡인다 */
@media (pointer: coarse), (max-width: 760px) {
  .scroll-cue--hero { display: flex; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .gaze-hero__hint {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
    padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: 15px; font-weight: 600; letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(94, 50, 72, .65), 0 0 16px rgba(94, 50, 72, .5);
  }
  .gaze-hero[data-state="ready"]:not(.is-touched) .gaze-hero__hint { animation: hint-blink 2.8s ease-in-out infinite; }
  .gaze-hero.is-touched .gaze-hero__hint { animation: hint-out .5s ease forwards; }
}
@keyframes hint-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes hint-out { from { opacity: .3; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i::after { animation: none; }
  .scroll-cue--hero i::after { opacity: 1; transform: translateY(.3em); }
  .s-video__copy > * { transition: none; }
  .logo img { transition: none; }
  .gaze-hero .gaze-hero__hint, .gaze-hero.is-touched .gaze-hero__hint { animation: none !important; }
}

/* Keep the action quieter than the title at every size. */
.scroll-cue--hero { font-size: clamp(14px, 1.05vw, 18px); bottom: 24px; }
.gaze-hero__hint { bottom: 88px; font-size: 12px; }
@media (max-width: 600px) {
  .scroll-cue--hero { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .gaze-hero__hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); font-size: 11px; }
}

@media (min-width: 601px) and (max-height: 600px) {
  .s-hero__copy {
    inset: 0; padding: 56px var(--gutter) 40px;
    grid-template-columns: minmax(0, 1fr) 44% minmax(0, 1fr);
    align-items: center; gap: 0; font-size: 12px; line-height: 1.6;
  }
  .s-hero__title { width: 100%; margin-bottom: 16px; }
  .prologue { grid-column: 3; padding: 0; }
  .site-header__tagline { display: none; }
  .gaze-hero__hint { bottom: 65px; }
  .scroll-cue--hero { bottom: 12px; font-size: 12px; }
}
/* Draw the static frame once on the canvas to keep its color conversion identical
   to the extended edges; only the animated character videos remain above it. */
.gaze-hero__base { opacity: 0; }

/* Composite both video layers in the same canvas color space. */
.gaze-hero__stage { visibility: hidden; }

/* ---------- 섹션 3. 하치의 세 얼굴 (아기하치·하치·빌런 하치를 한 섹션에서 고른다) ---------- */
.s-faces {
  --copy: var(--ink); --copy-soft: var(--ink-soft); --accent: var(--pink-deep);
  --card-bg: rgba(255, 246, 243, .9); --tab-bg: rgba(255, 246, 243, .88); --tab-hover: rgba(144, 87, 113, .14);
  --on-copy: var(--cream); --rule: rgba(144, 87, 113, .25); --cue-bg: rgba(255, 255, 255, .62);
  --stop-ring: #7f2259;   /* 고른 얼굴 썸네일 테두리 (아기하치·하치) */
  background: #f6f5f9; transition: background-color .6s ease;
}
.s-faces[data-face="baby"] { background: #ecd2d9; }
.s-faces[data-face="villain"] {
  background: #050408;
  --copy: #fff; --copy-soft: rgba(255, 255, 255, .76); --accent: #e7a3c4;
  --card-bg: rgba(29, 18, 24, .74); --tab-bg: rgba(29, 18, 24, .72); --tab-hover: rgba(255, 255, 255, .12);
  --on-copy: #1d1218; --rule: rgba(255, 255, 255, .2); --cue-bg: rgba(255, 255, 255, .14);
  --stop-ring: #fff;       /* 빌런 하치 */
}
.s-faces .scroll-cue { --cue: var(--copy); }

/* 얼굴마다 영상이 겹쳐 있고, 고른 얼굴만 보인다 (바뀔 때 크로스페이드) */
.face-bgs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.face-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.face-bg.is-on { opacity: 1; }
.face-bg--baby { background: #ecd2d9; }
.face-bg--main { background: #f6f5f9; }
.face-bg--villain { background: #050408; }

/* 프로필 카드: PC는 왼쪽 가운데, 모바일은 아래쪽 */
.face-card { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: var(--gutter); color: var(--copy); pointer-events: none; }
/* 카드 배경은 두지 않는다. 글자가 하치 위에 겹쳐도 읽히도록 배경색과 같은 은은한 빛만 둔다 */
.face-card__in { width: min(400px, 38vw); padding: 0; pointer-events: auto; text-shadow: 0 0 14px var(--card-bg), 0 0 28px var(--card-bg); }
.s-faces .eyebrow { margin: 0 0 8px; color: var(--accent); }
.face-profile { display: none; }
.face-profile.is-on { display: block; animation: face-in .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes face-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.face-profile h2 { margin: 0 0 12px; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -0.05em; font-weight: 800; }
.face-profile__line { margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.75; color: var(--copy-soft); word-break: keep-all; }
.face-profile__facts { margin: clamp(24px, 5.34vh, 48px) 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }   /* 키 900px 이상에서 48px, 낮은 화면에서는 줄어든다 */
.face-profile__facts div + div { margin-top: 12px; }
.face-profile__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.face-profile__facts dd { margin: 3px 0 0; font-size: clamp(14px, 1.1vw, 17px); font-weight: 700; line-height: 1.5; word-break: keep-all; }

/* 얼굴별 심화: 상태 칩 · 이런 장면(3컷 교체) · 이웃 얼굴로 가는 한 줄 (2026-10-27) */
.face-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.face-chips li { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--accent); }
/* 이런 장면: 제목 없이 글만 오른쪽에 두고, 얼굴이 고르면 위에서부터 차례로 나타난다 */
.face-side { position: absolute; top: 50%; right: calc(var(--gutter) + 28px); width: min(300px, 24vw); transform: translateY(-50%); color: var(--copy); text-shadow: 0 0 14px var(--card-bg), 0 0 28px var(--card-bg); pointer-events: none; }
.face-scenes { display: none; margin: 0; padding: 0; list-style: none; }
.face-scenes.is-on { display: grid; }          /* 세 줄이 같은 자리에 겹쳐 있고, 한 줄씩만 차례로 나타났다 사라진다 */
.face-scenes li { grid-area: 1 / 1; opacity: 0; font-size: clamp(15px, 1.25vw, 19px); font-weight: 700; line-height: 1.65; letter-spacing: -0.01em; word-break: keep-all; }
.fp-section.is-in .face-scenes.is-on li, html:not(.fp-active) .face-scenes.is-on li { animation: scene-cycle 14.4s ease infinite both; animation-delay: calc(.6s + var(--i) * 4.8s); }
@keyframes scene-cycle {   /* 한 줄이 4.8초씩: 서서히 나타나 머물다가 사라지고, 다음 줄이 이어서 나온다 (3줄 = 14.4초) */
  0% { opacity: 0; transform: translateY(10px); }
  6%, 28% { opacity: 1; transform: none; }
  33.3%, 100% { opacity: 0; transform: translateY(-8px); }
}
.face-next { display: inline-flex; align-items: center; gap: .45em; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.face-next::after { content: "→"; transition: transform .25s ease; }
.face-next:hover::after, .face-next:focus-visible::after { transform: translateX(4px); }
.face-gauge__cap { position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; text-align: center; font-size: clamp(12px, .95vw, 14px); font-weight: 600; line-height: 1.4; color: var(--copy-soft); }

/* 끄억뿌르륵 수치 게이지 (반원). 바늘이 돌아 고른 얼굴을 가리키고, 진행 호와 숫자가 따라간다. 아랫쪽 반원은 그리지 않는다 */
/* PC: 가운데 아래 (프로필 글은 왼쪽 가운데) */
.face-gauge { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); margin: 0 auto; width: 340px; aspect-ratio: 340 / 200; color: var(--copy); pointer-events: auto; }
.face-gauge__svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.face-gauge__ticks line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .3; }
.face-gauge__ticks line.is-major { stroke-width: 2.5; opacity: .6; }
.face-gauge__track, .face-gauge__fill { fill: none; stroke-width: 12; stroke-linecap: round; }
.face-gauge__track { stroke: currentColor; opacity: .16; }
.face-gauge__fill { stroke: url(#gaugeGrad); stroke-dasharray: 377; stroke-dashoffset: calc(377px * (1 - var(--level, .5))); transition: stroke-dashoffset 1.1s cubic-bezier(.3, .9, .3, 1); }
.face-gauge__needle { transform-origin: 170px 150px; transform: rotate(var(--rot, 0deg)); transition: transform 1.1s cubic-bezier(.3, 1.5, .45, 1); }
/* 끄억뿌르륵이 강할수록 바늘이 더 크고 빠르게 떨린다 */
.face-gauge__shake { transform-origin: 170px 150px; animation: gauge-tremble calc(.55s - var(--lv, .5) * .4s) ease-in-out infinite alternate; }
@keyframes gauge-tremble { from { transform: rotate(calc(var(--amp, 0deg) * -1)); } to { transform: rotate(var(--amp, 0deg)); } }
.face-gauge__needle path, .face-gauge__hub { fill: var(--stop-ring); transition: fill .5s ease; }   /* 아기하치·하치 #7f2259, 빌런 하치 흰색 */
.face-gauge.is-reset .face-gauge__needle, .face-gauge.is-reset .face-gauge__fill { transition: none; }
.face-stop {
  position: absolute; width: 13%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: #f5d4de; transform: translate(-50%, -50%) scale(.92);
  box-shadow: 0 0 0 2px var(--on-copy);   /* 테두리도 불투명하게 (비치는 선이 오류처럼 보이지 않도록) */
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease;
}
.face-stop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.face-stop--baby { left: 14.7%; top: 75%; }
.face-stop--main { left: 50%; top: 15%; }
.face-stop--villain { left: 85.3%; top: 75%; }
.face-stop:hover { transform: translate(-50%, -50%) scale(1); }
.face-stop[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 3px var(--stop-ring); }
.face-stop:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.face-gauge__read { position: absolute; left: 0; right: 0; top: 86%; margin: 0; text-align: center; font-size: clamp(13px, 1vw, 15px); font-weight: 700; line-height: 1; }
.face-gauge__read span { margin-right: .6em; font-size: .85em; letter-spacing: .14em; color: var(--accent); }
.face-gauge__read b { font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* 스크롤 버튼은 히어로와 같은 모양(글자 + 세로 알약) */
.s-faces .scroll-cue--hero { text-shadow: 0 0 14px var(--card-bg), 0 0 28px var(--card-bg); }

/* 섹션이 올라올 때 프로필과 게이지가 한 박자 늦게 떠오른다 */
.face-card__in, .face-gauge { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.fp-section.is-in .face-card__in, .fp-section.is-in .face-gauge { opacity: 1; transform: none; }
.fp-section.is-in .face-gauge { transition-delay: .12s; }
html:not(.fp-active) .face-card__in, html:not(.fp-active) .face-gauge { opacity: 1; transform: none; }

/* 세로 화면: 하치·빌런 하치는 꽉 채우면 뿔과 팔이 잘리므로 전체가 보이는 크기로 두고 위아래는 배경색으로 이어 붙인다 */
@media (max-aspect-ratio: 3/4) {
  .face-bg--main { --pw: 260vw; }
  .face-bg--villain { --pw: 240vw; }
  .face-bg--main .bgvideo, .face-bg--villain .bgvideo {
    top: auto; right: auto; bottom: auto; inset: auto; left: 50%; transform: translateX(-50%);
    width: var(--pw); height: calc(var(--pw) / 1.795);
    top: calc(50% - var(--pw) / 1.795 / 2 - 15svh);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  }
}
@media (max-width: 760px) {
  /* 모바일: 위에서부터 하치 → 게이지 → 글(프로필·장면) 순서. 글은 아래(스크롤 버튼 위)에 붙고 게이지가 그 바로 위에 놓인다 */
  .face-card { left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 28px; padding: min(calc(var(--gtop) + var(--gh) + 14px), calc(100svh - var(--tstack))) 16px 0; pointer-events: none; }   /* 글은 게이지 바로 아래에서 시작하고, 아래(스크롤 버튼)에 닿으면 거기서 멈춘다 */
  .face-card__in { position: static; width: auto; pointer-events: auto; }
  .face-side { position: static; order: 2; right: auto; width: auto; min-height: 39px; transform: none; }   /* 얼굴을 바꿔도 게이지 자리가 흔들리지 않게 두 줄 높이로 고정 */
  .face-scenes li { font-size: 13px; line-height: 1.5; }
  .face-gauge { position: absolute; top: var(--gtop); right: 0; bottom: auto; left: 0; margin: 0 auto; width: 210px; pointer-events: auto; }   /* 화면 중앙보다 살짝 아래. 하치 아랫부분과 겹쳐도 된다 */
  .face-bg--main { --pw: 238vw; }
  .face-bg--villain { --pw: 222vw; }
  .s-faces { --gh: 124px; --tstack: 293px; --gmax: 425px; --gtop: min(calc(50svh + 12px), calc(100svh - var(--gmax))); }   /* 게이지 윗선: 화면 중앙 +12px. 키가 낮으면 글(--gmax = 글·게이지 높이)에 닿지 않게 올린다 */
  /* 하치는 헤더 아래부터 게이지 윗선 + 150px(아래로 겹침)까지의 가운데에 놓는다. 영상 속 하치는 영상 정중앙보다 8.3% 아래에 있어 그만큼 보정 */
  .face-bg--main .bgvideo, .face-bg--villain .bgvideo { top: calc((var(--header-h) + var(--gtop) + 150px) / 2 - var(--pw) / 1.795 * .583); }
  /* 아기하치도 같은 자리(헤더 아래~게이지 위 가운데)에 놓는다. 영상 속 아기하치는 정중앙보다 2% 아래 */
  .face-bg--baby { --pw: 255vw; }
  .face-bg--baby .bgvideo {
    inset: auto; left: 50%; transform: translateX(-50%);
    width: var(--pw); height: calc(var(--pw) / 1.795);
    top: calc((var(--header-h) + var(--gtop) + 150px) / 2 - var(--pw) / 1.795 * .52);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
  }
  .face-profile h2 { font-size: 28px; margin-bottom: 8px; }
  .face-profile__line { font-size: 13px; line-height: 1.6; }
  .face-profile__facts { margin-top: 12px; padding-top: 12px; }
  .face-profile__facts div + div { margin-top: 8px; }
  .face-profile__facts dd { font-size: 13.5px; }
  .face-gauge__read { font-size: 12px; }
  .face-chips { margin-top: 10px; gap: 2px 10px; }
  .face-chips li { font-size: 12px; }
  .face-profile__facts { display: none; }              /* 모바일은 카드 높이가 모자라 한 줄 소개·칩·장면만 */
  .face-next { margin-top: 10px; font-size: 12px; }
  .face-gauge__cap { display: none; }                   /* 모바일은 게이지가 하치 얼굴 위라 한 줄 캡션은 숨김 */
}
/* 모바일에서 화면이 낮을 때(작은 폰·가로 모드 직전): 칩과 이웃 얼굴 링크를 숨기고 하치를 줄여 글·하치·게이지가 겹치지 않게 한다 */
@media (max-width: 760px) and (max-height: 700px) {
  .face-chips, .face-next { display: none; }
  .face-profile h2 { font-size: 24px; margin-bottom: 6px; }
  .face-bg--main { --pw: 205vw; }
  .face-bg--villain { --pw: 190vw; }
  .face-bg--baby { --pw: 215vw; }
  .s-faces { --gh: 104px; --tstack: 228px; --gmax: 340px; }
  .face-gauge { width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-faces, .face-bg, .face-stop, .face-card__in, .face-gauge, .face-gauge__needle, .face-gauge__fill { transition: none; }
  .face-gauge__shake { animation: none; }
  .face-profile.is-on { animation: none; }
  .face-scenes li { animation: none !important; }
  .face-scenes li:first-child { opacity: 1; }
}

/* 모든 섹션의 스크롤 버튼은 같은 자리: 오른쪽 아래, 오른쪽 끝은 헤더 메뉴와 맞춘다 (2026-10-27) */
.fp-section .scroll-cue { left: auto; right: var(--gutter); transform: none; bottom: clamp(18px, 4vh, 40px); }
@media (max-width: 760px) {
  .fp-section .scroll-cue { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}