/* =========================
   Base CSS (공용 스타일)
   ========================= */

/* 0) 레이아웃 안정화 */
*, *::before, *::after { box-sizing: border-box; }

/* 1) 전역 폰트 토큰 */
:root{
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-display: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;

  /* 모던 톤 토큰 */
  --g-bg: #ffffff;
  --g-soft: #f6f7f9;
  --g-card: #ffffff;
  --g-border: #e9edf3;
  --g-text: #2b2f36;
  --g-sub: #6b7280;
  --g-accent: #5b86e5;
  --g-shadow: 0 8px 24px rgba(17, 23, 41, .08);
  --g-radius: 20px;
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;
}

/* 2) 폰트 페이스 */
@font-face {
  font-family: 'OneStoreMobilePop';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* 초대문구 전용 폰트 */
@font-face {
  font-family: 'Ownglyph_corncorn';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2412-1@1.0/Ownglyph_corncorn-Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3) 전역 텍스트 */
body, button, input, textarea, select,
p, li, a, span, strong, em, small,
h1, h2, h3, h4, h5, h6,
.greeting-modal, .card, .dday-counter {
  /* ✅ 전역은 Paperlogy 기본 */
  font-family: 'Paperlogy', "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}



.heading, .display-1, .display-2, .display-3, .display-4{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.hero-title { font-family:'Noto Serif KR','Gowun Batang',serif !important; }
.hero-names { font-family: 'OngleipKonkon', sans-serif !important; }

/* 아이콘 보호 */
.fa, .fas, .far { font-family: "Font Awesome 5 Free","Font Awesome 6 Free","Font Awesome 6 Pro" !important; font-weight:900 !important; }
.fab { font-family: "Font Awesome 5 Brands","Font Awesome 6 Brands" !important; font-weight:400 !important; }
.bi { font-family: "bootstrap-icons" !important; font-weight: normal !important; }
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; font-variation-settings: "FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24; }

/* 4) 기본 레이아웃 */
html, body { height: 100%; }
body { 
  overflow-x: hidden; 
  color: var(--g-text);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 5) 모바일 폭 캡 */
.app{
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}
img, video, iframe { max-width: 100%; height: auto; }

/* 6) 네비게이션 */
.main-navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.main-navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 30px rgba(0,0,0,0.15);
}
.nav-inner{
  max-width: 440px;
  margin: 0 auto;
  padding: 6px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar-brand { font-weight: 700; color: #667eea !important; font-size: 1.5rem; }
.navbar-nav .nav-link {
  font-weight: 500;
  color: #333 !important;
  margin: 0 10px;
  padding: 8px 16px !important;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  transform: translateY(-2px);
}

/* 7) 본문 상단 여백 */
#content { padding-top: var(--content-pt, 90px); }

/* 8) 오프캔버스 */
.offcanvas { --bs-offcanvas-width: 420px; }
@media (max-width: 576px){ .offcanvas { --bs-offcanvas-width: 86vw; } }
.offcanvas-header{ border-bottom: 1px solid #eee; }
.offcanvas .nav-link{ display:block; padding:.6rem 0; font-size:1.05rem; text-align: center; }
.offcanvas .nav-link i{ width: 1.25rem; text-align:center; }

/* 9) BGM 버튼 */
.bgm-nav {
  margin-right: 6px;
  border-radius: 50%;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.bgm-nav:hover { background: rgba(255,255,255,0.8); transform: scale(1.05); }
.bgm-nav i { font-size: 1rem; color: #333; }

/* 10) 섹션 타이틀 */
.g-title, .g-name-row h3, .g-section-title, .g-vow .vow-title{
  font-family: 'Paperlogy', 'Noto Serif KR', serif;
}