/* ══════════════════════════════════════════════════════════════════════════
   yeoun-shell.css — 모바일 전용 셸 (2026-08-25)

   왜: 스토어프론트는 모바일 전용이다. 그런데 index.html 은 데스크톱 분기를
   17개 갖고 있어 PC 에서 2단 히어로·4열 그리드로 벌어졌다. 두 벌을 유지하면
   한쪽은 반드시 낡는다 — 한 벌만 두고, PC 에서는 그 한 벌을 **가운데 세운다.**

   ★핵심: body 를 컨테이너로 만들고 기존 @media 를 @container 로 바꾼다.
     뷰포트가 1400px 여도 셸이 480px 이면 데스크톱 분기가 발동하지 않는다.
     (@media 는 뷰포트를 보므로 body 를 좁혀도 계속 켜진다 — 그래서 안 통한다.)
   ⚠️container-type:inline-size 는 body 를 fixed 자손의 포함블록으로 만든다.
     별지도 캔버스(position:fixed)가 셸 안으로 갇히는데, **그게 의도한 그림**이다
     — 바깥은 여백, 안쪽이 화면.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --shell-w: 480px;          /* 폰 폭 — 아이폰 Pro Max(430)보다 살짝 넉넉하게 */
  --shell-ground: #05060B;   /* 셸 바깥 바닥 — body 그라디언트의 끝 색보다 한 톤 아래 */
}

/* 바깥 바닥. body 를 좁히면 그 밖은 html 이 드러난다 — 안 칠하면 흰 여백이 된다.
   🔴★반드시 셸이 실제로 뜨는 폭에서만 칠한다(2026-08-25 실기기 리그레션).
     CSS 배경 전파 규칙: 루트(html)에 배경이 **없으면** body 배경이 캔버스 전체로
     전파돼 뷰포트를 덮는다. 루트에 배경을 주는 순간 그 전파가 끊기고 body 는
     제 박스 안에서만 칠한다. 모바일(셸 미적용)에서 이걸 걸었더니 body 의
     3스톱 그라디언트가 background-attachment:fixed 와 맞물려 무너지고
     html 의 평면색(#05060B)만 보였다 — 「뒷배경이 거의 까맣다」의 정체.
     PC·시뮬레이터에서 안 보인 이유는 거기선 셸이 떠서 바깥이 원래 평면색이라
     구분이 안 갔기 때문이다. */
@media (min-width: 481px){
  html{ background: var(--shell-ground); }
}

body{
  max-width: var(--shell-w);
  margin-inline: auto;
  container-type: inline-size;
  container-name: shell;
  /* 셸이 실제로 뜬 화면에서만 테두리를 준다(모바일에선 화면 = 셸이라 불필요). */
}

@media (min-width: 481px){
  body{
    border-inline: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 0 80px rgba(0,0,0,.6);
    min-height: 100vh;
  }

  /* 별지도도 셸 안으로. position:fixed 라 body 를 좁혀도 뷰포트 전체를 덮는데,
     그러면 바깥에도 별이 깔려 「화면」의 경계가 흐려진다 — 바깥은 조용해야 한다.
     ⚠️transform 은 쓰지 않는다. skyDrift(스크롤 시차) 애니메이션이 transform 을
       쓰고 있어 여기서 잡으면 시차가 죽는다. left 계산으로 가운데 세운다.
     ★크기는 JS 가 cv.clientWidth 로 읽으므로(:786) CSS 만 바꾸면 알아서 따라온다. */
  #skymap{
    left: calc(50% - var(--shell-w) / 2);
    right: auto;
    width: var(--shell-w);
  }
}