/* Một Mái Nhà — site styles (phone mockups, store badges, helpers) */
:root {
  --primary: #b5452b;
  --bg: #fff8f6;
  --ink: #261811;
}
html { scroll-behavior: smooth; }
body { background-color: var(--bg); color: var(--ink); }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.fill-icon { font-variation-settings: 'FILL' 1; }

/* ---- Phone mockup: dark bezel + screenshot ----
   크롭은 상단 상태바/DEBUG 리본만 정확히 제거(하단 탭바는 온전히 노출).
   원본 900x2030 → 상단 ~130px 크롭 → 9:19 비율. 작은 radius로 모서리 콘텐츠 안 깎임. */
.phone {
  position: relative;
  background: #1c140f;
  padding: 5px;
  border-radius: 13px;           /* 작은 폰(기능/쇼케이스) 기준 — radius를 작게 해 모서리 콘텐츠 안 깎임 */
  box-shadow: 0px 12px 40px rgba(51, 36, 28, 0.22);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: var(--bg);         /* 앱 상단바 색과 동일(피치 크림) → 여백이 자연스럽게 이어짐 */
  padding: 7% 0 5%;             /* 상/하단 배경색 여백 — 둥근 모서리가 GNB·탭바를 깎지 않게 */
}
/* 큰 폰(히어로)은 radius를 키워 폰처럼 보이게 (비율 ~6% 유지) */
.phone--lg { border-radius: 26px; padding: 6px; }
.phone--lg .phone__screen { border-radius: 20px; }
.phone__screen img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 1900;      /* 원본(900x2030)에서 상단 상태바/DEBUG(~130px) 제거한 영역 비율 */
  object-fit: cover;
  object-position: 0 100%;       /* 하단(탭바) 유지하고 상단만 크롭 */
}

/* ---- 사진 hover 시 아주 느린 줌인 (줌이 되는구나 정도만 인지) ---- */
.photo-zoom { overflow: hidden; }
.photo-zoom img { transition: transform 5000ms ease-out; will-change: transform; }
.photo-zoom:hover img { transform: scale(1.08); }
.photo-zoom:focus-within img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .photo-zoom img { transition: none; }
  .photo-zoom:hover img { transform: none; }
}

/* ---- App store badge (placeholder, terracotta) ---- */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1c140f; color: #fff;
  padding: 10px 18px; border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,20,15,.25); }
.store-badge .material-symbols-outlined { font-size: 28px; }
.store-badge__sub { font-size: 11px; line-height: 1; opacity: .8; letter-spacing: .02em; }
.store-badge__name { font-size: 16px; line-height: 1.2; font-weight: 700; }
.store-badge__soon {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  background: var(--primary); color: #fff; padding: 2px 7px; border-radius: 9999px; margin-left: 4px;
}

/* roof chevron motif under About hero title */
.roof-motif { position: relative; }
.roof-motif::after {
  content: ''; position: absolute; bottom: -12px; left: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-bottom: 11px solid var(--primary); opacity: .25;
}

/* mobile menu */
#mobileMenu { display: none; }
#mobileMenu.open { display: block; }

/* anchor offset so sections don't hide under the sticky header */
[id="cau-chuyen"], [id="tinh-nang"], [id="tai-ve"] { scroll-margin-top: 96px; }

/* GNB links + scroll-spy active underline */
.nav-link { position: relative; color: inherit; transition: color .2s ease; }
.nav-link:hover { color: var(--primary); }
.nav-link.active { color: var(--primary); font-weight: 700; }
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; background: var(--primary); border-radius: 2px;
}

/* toast (store "coming soon") */
#toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: #1c140f; color: #fff;
  padding: 12px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(28,20,15,.3);
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity .25s ease, transform .25s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }