/* 원본 SVG 아트보드 그대로 표시 */
:root {
  --design-max: 480px; /* 모바일 표준 (원본 1080 비율 유지 스케일) */
  --page-bg: #e8e4e1;
  --btn-primary-bg: #ec6d56;
  --btn-primary-text: #fff;
  --color-primary: #ec6d56;
  --color-stamp-green: #2f8463;
  /* 하단 탭 높이 (원본 아이콘+라벨 영역) */
  --bottom-nav-design-h: 285;
  --bottom-nav-height: max(68px, calc(var(--bottom-nav-design-h) / 1080 * min(100vw, var(--design-max, 480px))));
  --compose-list-design-h: 120;
  --compose-write-design-h: 340;
  --compose-list-height: calc(var(--compose-list-design-h) / 1080 * min(100vw, var(--design-max, 480px)));
  --compose-write-height: calc(var(--compose-write-design-h) / 1080 * min(100vw, var(--design-max, 480px)));
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  min-height: 100%;
}
body {
  min-height: 100dvh;
}
/* 표준폭 이내: 화면 가로에 맞춰 축소/확대. 넓은 화면: 좌우만 여백 */
.app-frame {
  width: 100%;
  max-width: var(--design-max);
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow-x: hidden;
  /* 짧은 화면도 하단 탭까지 흰 바탕 */
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 481px) {
  body { padding: 0 16px; } /* 상·하 여백 없음 */
  .app-frame {
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    border-radius: 0;
    min-height: 100dvh;
    min-height: 100svh;
  }
}
/* 원본 아트보드 — 상단부터 붙임, 남는 영역도 흰 */
.artboard {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #fff;
  margin: 0;
  padding: 0;
  flex: 1 0 auto;
}
.artboard svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
/* 기능 UI 페이지도 짧은 화면에서 하단까지 흰 바탕 */
.app-frame > .page-live,
.app-frame > .page-header-live + .page-live,
.app-frame > .artboard + .page-live {
  flex: 1 0 auto;
  background: #fff;
}
/* 업체상세는 app.css 그라데이션을 쓰도록 흰 바탕 제외 */
.app-frame > .page-header-live + .page-live.store-live,
.app-frame > .page-live.store-live {
  background: none;
}
.app-frame > .page-header-live {
  flex: 0 0 auto;
  background: #fff;
}
/* 투명 클릭 영역 (원본 위 네비게이션용) */
.hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  /* debug: outline: 1px solid rgba(255,0,0,.25); */
  background: transparent;
  cursor: pointer;
}
.hotspot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.page-index { padding: 24px 20px 40px; font-family: system-ui, sans-serif; }
.page-index h1 { font-size: 1.15rem; margin: 0 0 8px; }
.page-index p { color: #666; font-size: .9rem; margin: 0 0 16px; }
.page-index a {
  display: block;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid #e0ddd9;
  border-radius: 12px;
  color: #3f3a3b;
  text-decoration: none;
  background: #fff;
}
.page-index a:hover { border-color: var(--color-primary); }

/* 하단 탭 고정 (공지 / 카카오톡 / 인스타그램 / 마이페이지) — 원본 PNG 아이콘 */
.fixed-bottom-nav {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--design-max, 480px);
  height: var(--bottom-nav-height);
  min-height: 72px;
  background: #fff;
  border-top: 1px solid #d4d3d3;
  margin-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: content-box;
}
.fixed-bottom-nav__items {
  height: var(--bottom-nav-height);
  min-height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
/* SVG 아트보드 방식 하단 네비 */
.fixed-bottom-nav__art {
  position: absolute;
  inset: 0;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.fixed-bottom-nav__art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fixed-bottom-nav__hits {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 2;
}
.fixed-bottom-nav__hits .nav-hit {
  display: block;
  width: 100%;
  height: 100%;
}
.fixed-bottom-nav__items .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #7f7c7c;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  height: 100%;
}
.fixed-bottom-nav__items .nav-icon {
  width: calc(52 / 1080 * min(100vw, var(--design-max, 480px)));
  height: calc(52 / 1080 * min(100vw, var(--design-max, 480px)));
  min-width: 22px;
  min-height: 22px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  display: block;
}
/* 스크롤 콘텐츠가 고정 탭에 가리지 않도록 */
.app-frame.has-fixed-nav {
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0));
}

/* 리뷰 글쓰기 영역 — 하단 탭 위에 고정 */
.fixed-compose {
  position: fixed;
  z-index: 250;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--design-max, 480px);
  background: #fff;
  box-sizing: border-box;
}
.fixed-compose--review-list {
  height: var(--compose-list-height);
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0));
}
.fixed-compose--review-write {
  height: var(--compose-write-height);
  /* 하단 탭 없는 작성 화면: 화면 맨 아래 고정 */
  bottom: env(safe-area-inset-bottom, 0);
}
.has-fixed-nav .fixed-compose--review-write {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0));
}
.fixed-compose__art {
  position: absolute;
  inset: 0;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}
.fixed-compose__art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fixed-compose__hit {
  position: absolute;
  inset: 0;
  display: block;
}
.fixed-compose__hit--send {
  /* 오른쪽 원형 전송 버튼 근처만 큰 클릭 — 전체 영역 탭으로 등록도 허용 */
  left: auto;
  width: 22%;
}
.app-frame.has-fixed-compose.has-fixed-nav {
  padding-bottom: calc(
    var(--bottom-nav-height) + var(--compose-list-height) + env(safe-area-inset-bottom, 0)
  );
}
.app-frame.has-fixed-compose-only {
  padding-bottom: calc(var(--compose-write-height) + env(safe-area-inset-bottom, 0));
}