/*
 * 모바일 레이아웃: 모든 화면 폭에서 본문을 가운데 모바일 폭(--layout-width) 열로 보여 준다.
 * 위아래는 브라우저 높이 전체(common.css의 body min-height)를 쓰고, 스크롤은 평소처럼 브라우저 전체로 한다.
 * 이 파일을 불러온 화면(홈, 그림 도감, 진열장, 유물 상세, 그림 채우기 성공)에 적용되며, common.css 바로 다음에 불러온다.
 * 열 폭에 맞춰야 하는 부품(탭바, 토스트, 배경)은 각자 자기 파일에서 --layout-width를 쓴다.
 * 색상은 common.css 토큰이 정해지기 전까지 fallback 값을 사용한다.
 */
/* 세로로 든 폰(최대 430px)은 화면 전체를 쓰고, 그보다 넓은 화면에서만 390px 열로 줄인다. */
:root {
  --layout-width: 100%;
}

@media (min-width: 431px) {
  :root {
    --layout-width: 390px;
  }
}

body {
  max-width: var(--layout-width);
  margin: 0 auto;
}

/*
 * 넓은 화면에서만 열 바깥을 다른 색으로 칠한다.
 * 세로로 든 폰(최대 430px)에서는 html 배경이 없으므로 body 배경이 화면 전체로 퍼져 지금처럼 보인다.
 */
@media (min-width: 431px) {
  html {
    background: var(--color-outer, #D8CFC2); /* 추정 */
  }
}