/* 기본 리셋(필요 최소한) */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* 페이지 전체를 중앙 정렬 */
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;     /* 세로 중앙 */
  justify-content: center; /* 가로 중앙 */
  background: #0b0c10;     /* 배경색(원하면 변경하세요) */
  padding: 24px;           /* 모바일 여백 */
}

/* 이미지 래퍼 */
.hero {
  width: 100%;
  max-width: 1000px;       /* 이미지가 너무 커질 경우 상한 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이미지 스타일 */
.hero img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;     /* 모서리 둥글게(원치 않으면 제거) */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 다크/라이트 환경 대비 (선택) */
@media (prefers-color-scheme: light) {
  .page { background: #f6f7fb; }
  .hero img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
}