/* ==========================================================
   common.css - 공통 레이아웃 / 앱 뷰포트
   ========================================================== */

/* 모바일 앱 프레임 (Figma 대표화면 기준 390px) */
.app-frame {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-white-100);
  position: relative;
  overflow-x: hidden;
}

/* TopBar(상단 60px)/Navbar(하단 95px)는 .app-frame 안에 있으면 스크롤과 무관하게 항상
   화면 상/하단에 고정. 스크롤은 그 사이 콘텐츠 영역에서만 일어남(페이지 쪽에서
   해당 콘텐츠 wrapper에 padding-top:60px+/padding-bottom:95px+ 만큼 공간을 비워줄 것). */
.app-frame > .topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 100;
}

.app-frame > .navbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 100;
}

/* 12ColumnA/B 가이드 기반 컨테이너 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;           /* 12ColumnA gutter 기준. B타입은 8px */
  padding: 0 16px;      /* offset 48 -> 모바일 축소값, 실제 화면 보고 조정 */
}

.container--tight {
  gap: 8px;             /* 12ColumnB */
}

/* 섹션 공통 여백 */
.section {
  padding: 20px 16px;
}

/* 클릭 시 다른 페이지로 이동하는 공통 훅 (js/common.js [data-card-link]/[data-nav-link] 참고) */
[data-card-link],
[data-nav-link] {
  cursor: pointer;
}