/* ============================================================
   랜딩 페이지
   1번 화면 : 배경 + 가운데 글자 + 벚꽃
   2번 화면 : 클릭하면 페이드 인, 섹션이 좌우에서 등장
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #efe6f3;
  color: #6b5a78;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 1번 화면에서는 스크롤 잠금, 2번으로 넘어가면 풀림 */
body { overflow: hidden; }
body.is-entered { overflow-y: auto; overflow-x: hidden; }

img { max-width: 100%; display: block; }

/* 눈에는 안 보이지만 검색엔진·스크린리더는 읽는 글. 그림뿐인 페이지의 «본문» 역할을 한다 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 벚꽃 캔버스 ---------- */
#petal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
body.is-ready #petal-canvas { opacity: 1; }
/* 2번 화면에서는 내용이 읽히도록 살짝 눌러 둔다 */
body.is-entered #petal-canvas { opacity: .55; }

/* ---------- 공통 ---------- */
.scene {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ---------- 1번 화면 ---------- */
.scene1 {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1), filter .9s ease;
}
body.is-ready .scene1 { opacity: 1; }

/* 클릭 후 : 살짝 밀려나며 사라짐 */
.scene1.is-leaving {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px);
  pointer-events: none;
}

.scene1__inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
}

.scene1__title {
  display: block;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity 1.4s ease .35s, transform 1.6s cubic-bezier(.22, .61, .36, 1) .35s;
  filter: drop-shadow(0 6px 26px rgba(190, 130, 190, .28));
  will-change: transform;
}

/* 원본 시안에서 로고가 화면 폭의 약 47% 를 차지한다.
   max-height 는 가로로 눕힌 폰처럼 «세로가 모자란» 화면 대비용. */
.scene1__title img {
  display: block;
  width: min(904px, 48vw);
  max-height: 54vh;
  max-height: 54dvh;
  height: auto;
  margin: 0 auto;
}
body.is-ready .scene1__title {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: titleFloat 6.5s ease-in-out 2s infinite;
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* 글자 이미지를 아직 안 넣었을 때 보이는 자리 표시 */
.scene1__title--placeholder {
  width: min(720px, 80vw);
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  border: 2px dashed rgba(198, 140, 190, .55);
  border-radius: 20px;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
}
.scene1__title--placeholder p {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #a06fb0;
}
.scene1__title--placeholder span {
  font-size: 14px;
  color: #b394bf;
  letter-spacing: .02em;
}

/* ---------- 클릭 안내 ---------- */
.enter-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8f6ba6;
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .12em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}
body.is-ready .enter-hint { opacity: 1; }

.enter-hint__text {
  text-shadow: 0 2px 10px rgba(255, 255, 255, .9);
  animation: hintPulse 2.6s ease-in-out infinite;
}

.enter-hint__arrow {
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: hintArrow 2.6s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes hintArrow {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ---------- 배경음 켜기·끄기 ----------
   화면 어디서나 손이 닿게 fixed 로 오른쪽 위에 띄운다.
   1번 화면에서는 숨겨 두고, 2번으로 넘어간 뒤에만 보인다(음악도 그때 시작한다). */
.bgm-btn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #a06bb8;
  box-shadow: 0 6px 18px rgba(150, 90, 160, .22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .5s ease, transform .4s ease, color .25s ease, background-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
body.is-entered .bgm-btn {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.bgm-btn:hover  { background: rgba(255, 255, 255, .88); color: #8a4fa6; }
.bgm-btn:active { transform: scale(.93); }
.bgm-btn.is-off { color: #b8a9c4; }          /* 꺼져 있으면 흐리게 */

.bgm-btn__icon { width: 24px; height: 24px; display: block; }
/* 스피커 몸통은 «칠하고», 물결·× 는 «선» 이다 */
.bgm-btn__spk { fill: currentColor; }
.bgm-btn__wave path,
.bgm-btn__x path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.bgm-btn__wave,
.bgm-btn__x { transition: opacity .2s ease; }
.bgm-btn__x { opacity: 0; }
.bgm-btn.is-off .bgm-btn__wave { opacity: 0; }
.bgm-btn.is-off .bgm-btn__x    { opacity: 1; }

@media (max-width: 860px) {
  .bgm-btn { width: 40px; height: 40px; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
  .bgm-btn__icon { width: 21px; height: 21px; }
}

/* ---------- 2번 화면 ---------- */
.scene2 {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #e9d8ef;
  background-position: center top;
  background-size: 100% auto;      /* 세로로 아주 긴 배경이라 가로폭 기준으로 깐다 */
  background-attachment: scroll;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.scene2.is-active { opacity: 1; }

/* 좌우에서 샤샥 등장 (2번 화면 공통) */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s ease, transform 1s cubic-bezier(.18, .72, .27, 1);
  will-change: transform;
}
[data-reveal="left"]  { transform: translateX(-80px); }
[data-reveal="right"] { transform: translateX(80px); }
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal].is-shown {
  opacity: 1;
  transform: none;
}

/* ---------- 2번 화면 · 첫 화면 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  padding: 2vh 0 0 0;   /* 시안은 위에서 2% 지점부터 시작한다 */
}

/* 좌·우 섹션을 나란히 붙여 놓고 «묶음 전체» 를 가운데 정렬한다.
   양끝에 고정하는 방식이 아니므로 화면이 아무리 커져도 사이 간격이 벌어지지 않는다. */
.hero__inner {
  position: relative;
  flex: 1 1 auto;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: min(3vw, 56px);   /* 좌·우 사이 간격 — 붙이거나 띄우려면 여기만 고치면 됩니다 */
}

/* 시안은 1920px 캔버스에 각 png 를 «원본 크기» 로 얹고 세로로 서로 겹쳐 놓았다.
   그래서 로고 폭(705px = 36.7vw)을 기준(--w)으로 삼고 나머지를 그 비율로 계산한다.
   16:9 모니터는 시안(1920x1205)보다 세로가 짧으므로 vh 로도 한 번 묶는다. */
.hero__left {
  --w: min(36.7vw, 58vh, 705px);   /* 705px = 로고 원본 폭. 그 이상으로는 안 키운다 */

  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  align-self: center;   /* 좌측 묶음은 화면 세로 가운데에 둔다 (우측 캐릭터는 그대로 아래 고정) */
  min-width: 0;       /* 없으면 flex 항목이 안 줄어들어 좁은 화면에서 잘린다 */
  width: var(--w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__sub1 { width: 71.06%; height: auto; }              /* 501 / 705 */
.hero__sub2 { width: 74.04%; height: auto; margin-top: -10.8%; }  /* 522 / 705 */
.hero__logo {
  width: 100%;
  height: auto;
  margin-top: -12.9%;    /* png 여백이 커서 겹쳐야 시안과 같아진다 */
  filter: drop-shadow(0 8px 26px rgba(150, 90, 160, .22));
}

/* ---------- 구글·애플 버튼 (여러 섹션 공용) ---------- */
.store-btns { display: flex; }
.store-btn {
  flex: 1 1 0;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}
.store-btn img { width: 100%; height: auto; }
.store-btn:hover,
.store-btn:focus-visible {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 18px rgba(150, 90, 160, .35));
}

/* 버튼 두 개(361 + 364) + 사이 간격 = 로고 폭보다 조금 넓다 */
.hero__btns {
  gap: 3.4%;
  width: 103.55%;
  margin-top: -1.7%;
}

/* 캐릭터 : 오른쪽 아래에 붙인다 */
.hero__right {
  flex: 0 1 auto;
  min-width: 0;
  align-self: flex-end;
  margin-bottom: -3vh;   /* 시안처럼 아래쪽을 살짝 흘린다 */
  z-index: 1;
  /* 높이 제한을 폭으로 환산해서 넣는다 (아래 주석 참고).
     1114px = 시안 1920 기준의 폭. 그 이상으로는 안 키운다. */
  width: min(58vw, calc(100vh * var(--char-ratio, .94)), 1114px);
  width: min(58vw, calc(100dvh * var(--char-ratio, .94)), 1114px);
  pointer-events: none;
}
/* width 를 지정한 채로 max-height 를 걸면 높이만 깎여서 그림이 늘어난다.
   그래서 «높이 제한» 을 폭으로 환산해 min() 안에 넣는다.
   --char-ratio(가로/세로)는 index.php 가 원본 파일에서 읽어 넘겨 준다. */
.hero__right img {
  width: 100%;
  height: auto;
  max-width: none;
}

/* ---------- 2번 화면 · 두 번째 섹션 (사전예약 보상) ----------
   시안(1920 기준) : 가로 1730 안에 패널 5장(각 288) + 사이 별장식 4개(각 45) */
/* 시안 1920 기준 실측값 (소재는 전부 1:1)
     타이틀 img_pre_order_title 853x381 at (530, 1248)
     패널   img_pre_order_panel 383x553 at (43 + n*362.25, 1586)   ← 프레임 자체는 292 폭
     별장식 img_pre_order_line   67x50  at (382.5 + n*362.25, 세로 가운데)
     버튼   361+364(사이 5) at y 2138
   png 끝에서 끝까지가 1832 이고, png 폭(383)이 간격(362.25)보다 넓어서 서로 겹친다.
   그래서 항목 사이에 «음수 margin» 을 준다.
   1832px 을 넘으면 더 안 늘어나고 가운데에 그대로 머문다. */
.rewards {
  position: relative;
  z-index: 5;
  padding: min(2.24vw, 43px) 0 min(6.04vw, 116px);
}
.rewards__inner {
  width: 95.4167%;          /* 1832 / 1920 */
  max-width: 1832px;
  margin: 0 auto;
}

.rewards__title {
  display: block;
  width: 46.5611%;          /* 853 / 1832 */
  height: auto;
  margin: 0 auto;
}

.rewards__list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: -2.347%;      /* 1586 - (1248 + 381) = -43 */
}
.rewards__list > * + * { margin-left: -2.395%; }   /* -43.875 / 1832 */
/* 칸(flex)·등장 애니메이션은 «겉의 상자» 가 맡는다. 안의 img 는 상자를 꽉 채우기만 한다.
   img 에는 ::before/::after 를 못 붙여서, 사선 빛을 얹으려고 상자를 하나 씌웠다. */
.rewards__panel-box {
  position: relative;
  flex: 0 0 20.9061%;       /* 383 / 1832 */
  min-width: 0;
  line-height: 0;           /* img 아래 생기는 빈 줄 없애기 */
}
.rewards__panel {
  display: block;
  width: 100%;
  height: auto;
}
/* 달성한 보상은 «_clear» 판을 쓴다(index.php 의 $poClear).
   이 판은 캔버스가 419x581 로 평소 판(383)보다 36 넓다 — 좌우 18 씩 글로우가 더 있다.
   같은 칸에 그냥 넣으면 그림이 383 폭으로 줄어 «액자만 작아진» 것처럼 보인다.
   그래서 칸을 캔버스 비율대로 넓히고 좌우에 그만큼 음수 margin 을 줘서 «자리» 는 그대로 둔다. */
.rewards__panel-box--clear {
  z-index: 1;               /* 글로우가 옆 패널·별장식에 안 가리게 */
  flex-basis: 22.8821%;     /* 419 / 1832 */
  margin-right: -.9825%;    /* 18 / 1832 — 늘어난 폭의 절반 */
}
/* 첫 칸일 때 (.rewards__list > * + * 의 -2.395% 가 안 붙는다) */
.rewards__list > .rewards__panel-box--clear      { margin-left: -.9825%; }
/* 첫 칸이 아닐 때 : 원래 겹침(-2.395%) + 늘어난 폭의 절반 */
.rewards__list > * + .rewards__panel-box--clear  { margin-left: -3.3775%; }

/* ---------- 사선으로 지나가는 빛 (거울 반사 느낌) ----------
   화면에 들어와 등장이 끝날 즈음 한 번만 지나간다(is-shown 이 붙을 때 딱 한 번).
   ※ 액자 모양대로만 빛나야 하므로, «같은 그림» 을 mask 로 써서 투명한 여백은 잘라낸다.
     mask-image 는 index.php 가 인라인 style 로 직접 넣는다 (아래 주석 참고).
   ※ background-position 의 % 는 «배경이 칸보다 클 때» 0%=왼쪽끝 100%=오른쪽끝 이라,
     -60% → 160% 로 움직이면 띠가 왼쪽 밖에서 오른쪽 밖으로 지나간다. */
.rewards__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  /* 좁고 또렷한 띠 하나. 넓게 주면 «판이 통째로 하얘지는» 느낌이 난다.
     앞뒤로 아주 옅은 띠를 하나씩 둬서 유리 반사처럼 보이게 했다. */
  background-image: linear-gradient(112deg,
      rgba(255,255,255,0)    45.0%,
      rgba(255,255,255,.10)  47.6%,
      rgba(255,255,255,.62)  50.0%,
      rgba(255,255,255,.10)  52.4%,
      rgba(255,255,255,0)    55.0%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: -55% 0;
  /* ★ mask-image(그림 주소)는 index.php 가 «인라인 style» 로 직접 넣는다.
     여기에 var(--shine) 으로 받아 쓰면 상대경로가 이 파일(assets/css/) 기준으로 풀려
     assets/css/assets/img/... 로 404 가 난다. CSS 변수에 담아도 마찬가지다. */
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mix-blend-mode: screen;   /* 흰 띠가 그림 위에 «빛» 처럼 얹히게 */
}
.rewards__panel-box.is-shown .rewards__shine {
  animation: rewardShine 1.1s cubic-bezier(.32,.06,.26,1) .35s 1 both;
}
@keyframes rewardShine {
  0%   { opacity: 0; background-position: -55% 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; background-position: 155% 0; }
}

.rewards__sep {
  flex: 0 0 3.6572%;        /* 67 / 1832 */
  min-width: 0;
  width: auto;
  height: auto;
  align-self: center;
}

.rewards__btns {
  width: 39.8472%;          /* 730 / 1832 */
  margin: 0 auto;
  gap: .685%;
}

/* ---------- 2번 화면 · 세 번째 섹션 (5개의 세계) ----------
   시안 1920 기준 실측값
     타이틀 img_world_title.png  995x342  at (126, 2420)
     카드   img_world_1~5.png    406x640  at (44 + n*357, 2714)   ← png 가장자리에 글로우 여백 35
     장식   img_world_bg.png     491x507  중심 (1534, 2612)
     문구   img_world_note.png   774x194  at (573, 3249)
   .worlds__inner 의 위쪽을 시안 y 2412 로 보고 전부 % 로 환산했습니다. */
.worlds {
  position: relative;
  z-index: 5;
}
.worlds__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

/* 오른쪽 «5 WORLDS» 장식. translateY 는 «자기 높이» 기준이라 폭이 변해도 따라온다 */
.worlds__deco {
  position: absolute;
  left: 67.135%;
  top: 0;
  width: 25.573%;
  transform: translateY(-10.45%);
  z-index: 0;
  opacity: .95;
  pointer-events: none;
}

.worlds__title {
  display: block;
  position: relative;
  z-index: 1;
  width: 51.8229%;          /* 995 / 1920 */
  margin: .4167% 0 0 6.5625%;
}
.worlds__title img { width: 100%; height: auto; }

/* png 끝에서 끝까지 = 1834 (95.52%). 카드 간격 357 이 png 폭 406 보다 좁아서 «음수 margin» 이 된다 */
.worlds__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 95.5208%;
  /* 시안 그대로면 -2.5% (= -48px) 인데 글자와 카드가 붙어 보여서 40px 쯤 띄웠다 */
  margin: -.42% auto 0;
}
.worlds__card {
  flex: 0 0 22.1374%;       /* 406 / 1834 */
  min-width: 0;
}
.worlds__card + .worlds__card { margin-left: -2.6717%; }   /* (357 - 406) / 1834 */
/* --fix : png 마다 다른 위쪽 투명 여백을 상쇄해 카드 윗변을 맞춘다.
   index.php 의 img_body_top() 이 원본에서 재서 넣어 준다.
   translate 의 % 는 «자기 높이» 기준이라 화면 크기가 바뀌어도 그대로 맞는다.
   ※ 겉의 div 가 등장 애니메이션([data-reveal])용이라 transform 이 안 부딪힌다. */
.worlds__card img {
  width: 100%;
  height: auto;
  transform: translateY(var(--fix, 0%));
  transition: transform .3s cubic-bezier(.18, .72, .27, 1), filter .3s ease;
}
.worlds__card:hover { z-index: 2; }
.worlds__card:hover img {
  transform: translateY(calc(var(--fix, 0%) - 10px));
  filter: drop-shadow(0 14px 26px rgba(140, 80, 155, .38));
}

.worlds__note {
  display: block;
  position: relative;
  z-index: 1;
  width: 40.3125%;          /* 774 / 1920 */
  margin: -5.4688% auto 0;
}
.worlds__note img { width: 100%; height: auto; }

/* ---------- 2번 화면 · 네 번째 섹션 (캐릭터) ----------
   시안이 1920 캔버스에 얹어 놓은 구성이라 «같은 비율의 상자» 를 만들고 그 안에 % 로 앉힌다.
   상자는 시안 y 3410 ~ 4547 (높이 1137).
     타이틀 img_character.png 665x342 at (84, 3434)
     탭     306x195 을 y 4243, x 139 부터 280.5 간격 (선택되면 336x220 으로 커진다) */
.chars {
  position: relative;
  z-index: 5;
  /* 겹쳐 둔 «안 보이는» 캐릭터 그림은 34px 오른쪽에 서 있다(.chars__art 의 기본 transform).
     화면이 좁으면 그만큼 섹션 밖으로 나가 «페이지 전체에 가로 스크롤» 이 생긴다.
     여기서 가로만 잘라 낸다. hidden 이 아니라 clip 이어야 한다 —
     hidden 은 반대 축을 auto 로 만들어 스크롤 상자가 되어 버린다.
     (clip 을 모르는 옛 사파리를 위해 폰 구간에서는 transform 자체를 뺀다) */
  overflow-x: clip;
}
.chars__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 1137;
}

/* 캐릭터 뒤에서 천천히 도는 원형 장식 */
/* 무대(캐릭터 상자) 안에 넣어 두면 화면 크기가 바뀌어도 늘 캐릭터 뒤 가운데에 있다 */
.chars__deco {
  position: absolute;
  left: 1.17%;
  top: 3.38%;
  width: 97.67%;            /* 964 / 987 */
  z-index: 0;
  pointer-events: none;
  animation: charsDecoSpin 60s linear infinite;
}
@keyframes charsDecoSpin { to { transform: rotate(360deg); } }

/* 캐릭터 : 탭을 누르면 갈아 끼운다 */
.chars__stage {
  position: absolute;
  right: 1.5625%;
  top: 0;
  width: 51.4063%;          /* 987 / 1920 */
  aspect-ratio: 987 / 1022;
  z-index: 1;
}
.chars__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  transform: translateX(34px) scale(.985);
  transition: opacity .55s ease, transform .7s cubic-bezier(.18, .72, .27, 1);
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(150, 90, 160, .22));
}
.chars__art.is-active { opacity: 1; transform: none; }

.chars__title {
  position: absolute;
  left: 4.375%;
  top: 2.111%;
  width: 34.6354%;          /* 665 / 1920 */
  z-index: 3;
}

/* 설명 패널 : img_character_panel 767x481 at (110, 3768) — 시안 실측 */
.chars__panels {
  position: absolute;
  left: 5.7292%;            /* 110 / 1920 */
  top: 31.487%;             /* (3768 - 3410) / 1137 */
  width: 39.9479%;          /* 767 / 1920 */
  z-index: 2;
}
.chars__panel {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(22px);
  /* ★ 안 보이는 패널은 «아예 없는 것» 으로 만든다 (2026-09-04).
     opacity:0 + pointer-events:none 만으로는 기기·브라우저에 따라
     자식(SD 그림·목소리 버튼)이 그대로 눈려서, 목소리 없는 캐릭터 자리를
     눌렀는데 위에 덮인 다른 캐릭터 소리가 나는 일이 있었다.
     visibility:hidden 은 자식까지 통째로 히트테스트에서 빠지며 «자리» 는 그대로
     차지하므로 겹쳐 쌓은 배치는 안 바뀐다.
     끄는 쪽은 페이드(.55s)가 끝난 뒤에 숨기도록 지연을 준다. */
  visibility: hidden;
  transition: opacity .55s ease,
              transform .7s cubic-bezier(.18, .72, .27, 1),
              visibility 0s linear .55s;
}
.chars__panel:not(:first-child) { position: absolute; left: 0; top: 0; }
.chars__panel.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .55s ease, transform .7s cubic-bezier(.18, .72, .27, 1);
}
/* 패널 8장이 «같은 자리» 에 겹쳐 있다. 안 보이는 패널도 그대로 눌리면,
   목소리 버튼이 없는 캐릭터의 그 자리를 눌렀을 때 위에 덮인 다른 캐릭터의 버튼이 눌려
   엉뚱한 소리가 난다. 그래서 «켜져 있는 패널» 만 눌리게 한다. */
.chars__panel { pointer-events: none; }
.chars__panel.is-active { pointer-events: auto; }
.chars__panel-bg { width: 100%; height: auto; }

/* 목소리 버튼 : 시안(main_4) 실측 — 패널 기준 (494, -1), 원본 247x88 그대로 */
.chars__voice {
  position: absolute;
  left: 64.407%;            /* 494 / 767 */
  top: 0;
  width: 32.203%;           /* 247 / 767 */
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: voiceBob 2.6s ease-in-out infinite;
}
.chars__voice img { width: 100%; height: auto; }
.chars__voice:hover  { filter: drop-shadow(0 4px 10px rgba(230, 90, 160, .45)); }
.chars__voice:active { transform: scale(.94); animation: none; }
/* 재생 중에는 통통 튀는 걸 멈추고 살짝 커진 채로 둔다 */
.chars__voice.is-playing {
  animation: none;
  transform: scale(1.04);
  filter: drop-shadow(0 4px 12px rgba(230, 90, 160, .55));
}
@keyframes voiceBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6%); }
}

/* 패널 안 SD 캐릭터(움직이는 gif).
   그림마다 크기도 «캐릭터가 그려진 높이» 도 달라서 좌표를 박아 두면 발이 뜬다.
   그래서 index.php 의 img_stand() 가 원본에서 «발밑·가로중심» 을 재어
     --sdw : 원본 폭 (패널 폭의 몇 %)
     --sdx : 자기 폭의 몇 % 만큼 오른쪽으로   (그림자 중심 x 627 에 맞춤)
     --sdy : 자기 높이의 몇 % 만큼 아래로     (그림자 중심 y 198 에 발밑을 맞춤)
   를 넣어 줍니다. translate 의 % 는 «자기 크기» 기준이라 화면 크기가 바뀌어도 그대로 맞습니다. */
.chars__sd {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--sdw, 23.468) * 1%);
  height: auto;
  transform: translate(var(--sdx, 308.333%), var(--sdy, -0.455%));
  z-index: 1;
  pointer-events: none;
}

/* 목소리가 있는 캐릭터는 SD 그림을 눌러도 소리가 난다(main.js 가 클래스를 붙인다).
   투명한 여백까지 눌리지만 패널 안에는 다른 누를 것이 없어 문제가 없고, 오히려 눌러야 할 곳이 넓어진다.
   ★ 반드시 «켜져 있는 패널» 로 한정할 것 (2026-09-03).
   자식이 pointer-events:auto 를 켜면 부모(.chars__panel)의 none 을 «넘어서» 다시 눌린다.
   그래서 안 보이는 패널의 SD 가 같은 자리를 덮어, 소리 없는 캐릭터의 SD 를 눌렀는데
   남의 목소리가 나는 버그가 났다. */
.chars__panel.is-active .chars__sd.is-clickable { pointer-events: auto; }
.chars__sd.is-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chars__sd.is-clickable:active { filter: brightness(1.08); }

/* ---------- 하단 캐릭터 탭 (좌우 화살표 + 넘기는 띠 + 점) ----------
   시안 1920 기준
     묶음 전체 : x 140 부터 1440 폭
     화살표 72 · 사이 17 · 보이는 창 1262 (= 칸 280.5 짜리 4.5장)
     칸 폭 280.5 안에 306(꺼짐) / 336(켜짐) 이 «넘쳐서» 들어간다
   창은 브라우저 기본 가로 스크롤을 쓴다. 폰에서 손가락으로 밀 수 있고,
   끝에서 더 안 넘어가는 처리도 브라우저가 알아서 해 준다. */
.chars__tabs {
  position: absolute;
  left: 7.2917%;            /* 140 / 1920 */
  top: 72.164%;
  width: 75%;               /* 1440 / 1920 */
  height: 19.3492%;         /* 220 / 1137 */
  display: flex;
  align-items: center;
  z-index: 3;
}

.chars__nav {
  flex: 0 0 5%;             /* 72 / 1440 */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.chars__nav img { width: 100%; height: auto; }
.chars__nav--next img { transform: scaleX(-1); }   /* 소재가 «왼쪽» 화살표 하나뿐이라 뒤집어 쓴다 */
.chars__nav:hover { transform: scale(1.08); filter: drop-shadow(0 6px 14px rgba(150, 90, 160, .35)); }
.chars__nav:active { transform: scale(.94); }

.chars__tabs-view {
  position: relative;       /* 탭의 offsetLeft 기준이 «창» 이 되도록 (없으면 화살표 폭까지 딸려 온다) */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 1.1806%;        /* 17 / 1440 */
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* 스크롤바는 숨기고 화살표로만 넘긴다 */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chars__tabs-view::-webkit-scrollbar { display: none; }
/* 마우스로 끌어서 넘길 수 있게. 폰은 손가락으로 미는 기본 동작이 그대로 쓰인다 */
.chars__tabs-view { cursor: grab; }
.chars__tabs-view.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.chars__tabs-view img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 창(1262) 에 4.5장이 보이도록 = 8장 기준 177.78%.
   장수가 달라지면 index.php 가 --tabs 로 넘겨 준 값이 쓰인다. */
.chars__tabs-track {
  display: flex;
  align-items: center;
  width: calc(var(--tabs, 8) / 4.5 * 100%);
  height: 100%;
}
.chars__tab {
  position: relative;
  flex: 0 0 calc(100% / var(--tabs, 8));
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chars__tab img {
  max-width: none;          /* 칸보다 커야 해서 전역 max-width 를 푼다 */
  height: auto;
  transition: opacity .3s ease, transform .3s ease;
}
.chars__tab-off { width: 109.09%; }                    /* 306 / 280.5 */
.chars__tab-on {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 119.79%;                                      /* 336 / 280.5 */
  transform: translate(-50%, -50%);
  opacity: 0;
}
.chars__tab.is-active .chars__tab-off { opacity: 0; }
.chars__tab.is-active .chars__tab-on  { opacity: 1; }
.chars__tab:not(.is-active):hover .chars__tab-off { transform: translateY(-4px); }

/* 아래 점 : 보이는 창 아래 가운데 */
.chars__dots {
  position: absolute;
  left: 11.927%;            /* 창 시작 229 / 1920 */
  top: 92.92%;
  width: 65.7292%;          /* 창 폭 1262 / 1920 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.585%;              /* 20 / 1262 */
  z-index: 3;
}
.chars__dot {
  position: relative;
  flex: 0 0 1.109%;         /* 14 / 1262 */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.chars__dot img { width: 100%; height: auto; transition: opacity .25s ease; }
.chars__dot-on {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.chars__dot.is-active .chars__dot-off { opacity: 0; }
.chars__dot.is-active .chars__dot-on  { opacity: 1; }
.chars__dot:hover .chars__dot-off { opacity: .55; }

/* ---------- 2번 화면 · 다섯 번째 섹션 (콘텐츠) ----------
   시안 : 카드 5장을 360.5 간격으로 놓고 각자 «원본의 91.7%» 로 그린다.
   원본 폭이 장마다 달라서, 칸은 똑같이 나누고 그림만 원본 폭 비율대로 키운다.
   0.25437 = 0.917 / 360.5 * 100 */
.system {
  position: relative;
  z-index: 5;
}
.system__inner {
  max-width: 1920px;
  margin: 0 auto;
}
.system__title {
  display: block;
  width: 60.8854%;          /* 1169 / 1920 */
  margin: 0 auto;
}
.system__list {
  display: flex;
  align-items: flex-start;
  width: 93.8802%;          /* 5 * 360.5 / 1920 */
  margin: 2.1771% auto 0;
}
.system__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.system__card img {
  width: calc(var(--w, 503) * 0.25437%);
  max-width: none;
  height: auto;
}

/* ---------- 2번 화면 · 마지막 (콜라주 + 로고 + 버튼 + 저작권) ----------
   img_footer_bg.jpg = bg_main.jpg 의 콜라주 부분(y 5660~6710)을 잘라 둔 것. */
.footer {
  position: relative;
  z-index: 5;
  background: #000;
}
.footer__art {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 1050;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.footer__logo {
  position: absolute;
  left: 31.6667%;           /* 608 / 1920 */
  top: 21.048%;             /* 221 / 1050 */
  width: 36.7188%;          /* 705 / 1920 */
}
/* 가운데 정렬에 transform 을 쓰면 등장 애니메이션([data-reveal])이 덮어써서 어긋난다.
   그래서 margin 으로 민다. */
.footer__btns {
  position: absolute;
  left: 50%;
  top: 63.333%;             /* 665 / 1050 */
  width: 38.0208%;          /* 730 / 1920 */
  margin-left: -19.0104%;
  gap: .685%;
}
.footer__copy {
  margin: 0;
  padding: 4.2% 5vw 5%;
  text-align: center;
  color: #9f93ad;
  font-size: clamp(11px, .94vw, 18px);
  letter-spacing: .01em;
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .scene1__title img { width: min(904px, 62vw); }

  .hero { padding: 4vh 0 0 0; }
  .hero__inner { gap: min(2vw, 32px); }
  .hero__left { --w: min(44vw, 56vh, 705px); }
  .hero__right {
    width: min(62vw, calc(100vh * var(--char-ratio, .94)), 1114px);
    width: min(62vw, calc(100dvh * var(--char-ratio, .94)), 1114px);
  }
}

/* ---------- 폰·세로 태블릿 : 위아래로 쌓는다 ----------
   폭뿐 아니라 «세로로 긴 화면» 도 같이 잡아야 세로 태블릿이 허전해지지 않는다 */
@media (max-width: 860px), (max-aspect-ratio: 4/5) {
  .scene1__title img {
    width: 84vw;
    max-height: 42vh;
    max-height: 42dvh;
  }
  .enter-hint { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }

  /* bg_main.jpg 는 «페이지 전체» 용이라 아래쪽(약 78% 지점부터)에 마지막 섹션 일러스트가
     박혀 있다. 모바일은 세로로 쌓느라 페이지가 배경보다 훨씬 길어져서 그 그림이 중간에
     올라와 버린다. 배경을 확대해 피하는 방식은 섹션을 붙일 때마다 다시 깨진다.

     그래서 모바일에서는 배경을 «화면에 고정된 한 장» 으로 깐다.
     - 페이지가 아무리 길어져도 배경 밖으로 나갈 일이 없다.
     - 하늘만 잘라 둔 bg_main_m.jpg 를 쓰므로 콜라주가 올라올 수 없다.
     - background-attachment: fixed 는 iOS 에서 말썽이라 고정 의사요소로 처리한다. */
  .scene2 {
    background-color: #e9d8ef;
    background-size: 210% auto;    /* bg_main_m.jpg 가 없을 때 쓰는 예비책 */
    background-position: center top;
  }
  /* 자리·크기만 잡아 둔다. 어떤 파일을 깔지는 index.php 가 정한다
     (bg_main_m.jpg 가 있을 때만 .scene2 배경을 끄고 여기에 그림을 넣는다) */
  .scene2::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero { padding: 7vh 6vw 0; }
  .hero__inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  .hero__left {
    --w: min(100%, 460px);
    width: var(--w);
    margin: 0 auto;
    align-items: center;
  }
  /* 캐릭터 위에 글자가 겹치므로 흰 글로우로 띄운다 */
  .hero__left img {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95))
            drop-shadow(0 2px 6px rgba(255, 255, 255, .8));
  }
  /* 폰에서는 겹치지 않고 그냥 쌓는다 */
  .hero__sub1 { width: 82%; }
  .hero__logo { width: 100%; margin-top: -9%; }
  .hero__sub2 { width: 84%; margin-top: -8%; }
  .hero__btns { width: 103.55%; gap: 3.4%; margin-top: -1%; }

  /* 캐릭터를 위아래로 쌓으면 너무 작아진다.
     그래서 좌측 섹션 «뒤» 로 보내 배경처럼 깔고, 화면 폭을 꽉 채운다.
     위쪽은 부드럽게 지워서 글자가 묻히지 않게 한다. */
  .hero__right {
    position: absolute;
    left: -6vw;          /* .hero 의 좌우 여백(6vw)을 걷어내 화면 끝까지 */
    right: -6vw;
    bottom: 0;
    z-index: 0;
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 20%);
  }
  .hero__right img {
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    transform: none;
    margin: 0;
  }

  [data-reveal="left"]  { transform: translateX(-32px); }
  [data-reveal="right"] { transform: translateX(32px); }
  [data-reveal="up"]    { transform: translateY(28px); }

  /* 보상 패널 5장을 한 줄에 넣으면 너무 작아진다. 두 개씩 접는다.
     (줄바꿈되면 사이 별장식은 자리가 어색해서 숨긴다) */
  .rewards { padding: 10vw 5vw 12vw; }
  .rewards__inner { width: 100%; }
  .rewards__title { width: 86%; }
  .rewards__list {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 2%;
    margin-top: 5vw;
  }
  /* 데스크톱에서 겹쳐 놓은 음수 margin 은 두 줄로 접을 때 방해가 된다 */
  .rewards__list > * + * { margin-left: 0; }
  .rewards__panel-box { flex: 0 0 49%; }
  /* 두 개씩 접는 화면에서도 액자 크기를 맞춘다. 49% «자리» 는 그대로 지키게 좌우 음수 margin.
     ※ 데스크톱 쪽 규칙이 (0,2,0) 이라 미디어쿼리 안에서도 같은 세기로 다시 적어야 이긴다. */
  .rewards__panel-box--clear { flex-basis: 53.577%; margin-right: -2.2885%; }   /* 49 × 419/383 */
  .rewards__list > .rewards__panel-box--clear,
  .rewards__list > * + .rewards__panel-box--clear { margin-left: -2.2885%; }
  .rewards__sep { display: none; }
  .rewards__btns { width: 100%; max-width: 460px; margin: 8vw auto 0; gap: 3%; }

  /* ---- 5개의 세계 ----
     카드 5장을 한 줄에 넣으면 손톱만 해진다. 두 장씩 접고 마지막 한 장은 가운데. */
  .worlds { padding: 2vw 5vw 10vw; }
  .worlds__deco { display: none; }          /* 글자 위로 겹쳐서 좁은 화면에선 뺀다 */
  .worlds__title { width: 100%; margin: 0 auto; }
  .worlds__list {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 3vw;
  }
  .worlds__card { flex: 0 0 50%; }
  .worlds__card + .worlds__card { margin-left: 0; }
  .worlds__card:hover img { transform: translateY(var(--fix, 0%)); filter: none; }
  .worlds__note { width: 94%; margin: 5vw auto 0; }

  /* ---- 캐릭터 ----
     시안은 1920 캔버스에 절대배치한 구성이라, 좁은 화면에서는 그 틀을 풀고 위아래로 쌓는다. */
  .chars { padding: 4vw 6vw 12vw; }
  .chars__inner {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .chars__title {
    position: static;
    width: 100%;
    max-width: 470px;
  }
  /* 겹쳐 둔 «안 보이는» 캐릭터 그림도 자리는 그대로 차지한다.
     데스크톱처럼 34px 오른쪽에 세워 두면(.chars__art 의 기본 transform) 좁은 화면에서는
     그만큼 화면 밖으로 나가 «페이지 전체에 가로 스크롤» 이 생긴다.
     폰에서는 옆으로 미는 연출을 빼고 «흐려졌다 나타나는» 것으로만 바꾼다. */
  .chars__art { transform: none; }

  .chars__stage {
    position: relative;
    right: auto;
    top: auto;
    order: 3;                 /* 타이틀 → 패널 → 캐릭터 → 탭 */
    width: 100%;
    max-width: 430px;
    margin-top: 3vw;
  }
  /* static 으로 두면 겹쳐 쌓인 2~4번 패널이 «.chars__inner» 기준으로 절대배치돼
     엉뚱한 자리(섹션 맨 위)로 튄다. 기준 상자 노릇을 하도록 relative 로 둔다. */
  .chars__panels {
    position: relative;
    /* relative 는 데스크톱 좌표(left/top)를 그대로 살린다. 안 지우면 오른쪽·아래로 밀린다 */
    left: auto;
    top: auto;
    order: 2;
    width: 100%;
    max-width: 560px;
    margin-top: 4vw;
    /* 패널 png 은 EPIC 배지가 왼쪽 테두리 밖으로 11px 나와 있어서, png 를 가운데 두면
       «프레임» 이 오른쪽으로 10px 치우쳐 보인다. 자기 폭의 1.3% 만큼 왼쪽으로 민다
       (translate 의 % 는 자기 크기 기준이라 화면 폭이 바뀌어도 맞는다). */
    transform: translateX(-1.304%);
  }
  /* 탭 띠 : 좁은 화면에서는 두 장 남짓만 보이게 하고 손가락으로 밀어서 넘긴다 */
  .chars__tabs {
    position: static;
    order: 4;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-top: 6vw;
  }
  .chars__nav { flex: 0 0 9%; }
  .chars__tabs-view {
    height: auto;
    margin: 0 2%;
    padding: 2% 0;          /* 켜진 탭이 조금 더 커서 위아래로 잘리지 않게 여유를 준다 */
  }
  .chars__tabs-track {
    width: calc(var(--tabs, 8) / 2.2 * 100%);
    height: auto;
  }
  .chars__tab { height: auto; }
  .chars__tab:not(.is-active):hover .chars__tab-off { transform: none; }

  .chars__dots {
    position: static;
    order: 5;
    width: 100%;
    max-width: 560px;
    margin-top: 4vw;
    gap: 3.4%;
  }
  .chars__dot { flex: 0 0 2.4%; }

  /* ---- 콘텐츠 ----
     칸 안에서 «스크린샷 부분» 이 늘 78% 가 되도록 원본 폭으로 환산한다 (337 = 스크린샷 폭) */
  .system { padding: 2vw 4vw 7vw; }
  .system__title { width: 100%; max-width: 620px; }
  .system__list {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 2vw;
    row-gap: 0;
  }
  /* 카드 png 아래쪽에 투명 여백이 7% 쯤 붙어 있어서 줄 사이가 필요 이상으로 벌어진다.
     그만큼을 음수 margin 으로 걷어낸다. */
  .system__card {
    flex: 0 0 50%;
    margin-bottom: -10.5vw;
  }
  .system__card img { width: calc(var(--w, 503) * 0.2315%); }

  /* ---- 하단 ----
     띠 비율(1920x1050)을 그대로 쓰면 로고가 손톱만 해진다. 콜라주를 배경으로 깔고 세로로 쌓는다. */
  .footer__art {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16vw 8vw 18vw;
    background-size: cover;
    background-position: center;
  }
  .footer__logo {
    position: static;
    width: 80%;
    max-width: 420px;
  }
  .footer__btns {
    position: static;
    width: 100%;
    max-width: 400px;
    margin: 7vw 0 0;
    gap: 3%;
  }
  .footer__copy { padding: 7vw 6vw 8vw; font-size: 12px; }
  .rewards__btns { width: 100%; max-width: 460px; gap: 3%; margin-top: 10vw; }
}

/* ---------- 세로 태블릿 : 글자 줄을 줄여 캐릭터 자리를 넓힌다 ---------- */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .hero { padding-top: 5vh; }
  .hero__left { --w: min(58vw, 430px); }
  /* 캐릭터가 배경처럼 깔리므로 여백 조정 불필요 */
}

/* ---------- 세로로 아주 긴 화면 : 1번 배경을 위쪽 기준으로 ---------- */
@media (max-aspect-ratio: 3/4) {
  .scene1 { background-position: center top; }
}

/* ---------- 눕힌 폰처럼 높이가 낮은 화면 ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .scene1__title img {
    width: min(904px, 46vw);
    max-height: 60vh;
    max-height: 60dvh;
  }
  .scene1__title--placeholder { padding: 20px 16px; }
  .enter-hint { bottom: 12px; gap: 4px; }

  .hero { padding: 2vh 0 3vh 0; }
  .hero__left { --w: min(38vw, 56vh, 705px); }
}

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #petal-canvas { display: none; }
}