/* layout.css — 상단 띠, 헤더, 페이지 틀, 하단 고정 버튼, 푸터 */
.top-bar { height: 4px; background: var(--c-point); }

.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 40; }
.site-header .inner { max-width: var(--container); margin: 0 auto; padding: 12px var(--gap-page); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--c-main); text-decoration: none; }
.brand svg { color: var(--c-point); }
.brand .brand-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-surface); background: var(--c-main); padding: 2px 8px; border-radius: var(--radius-pill); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text-2); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav button.link:hover { background: var(--c-bg); color: var(--c-main); }
.nav a[aria-current="page"] { color: var(--c-main); background: var(--c-chip); }
.nav .nav-cta { border: 1px solid var(--c-field); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--c-field); background: var(--c-surface); align-items: center; justify-content: center; cursor: pointer; }

.page { max-width: var(--container); margin: 0 auto; padding: 28px var(--gap-page) 120px; }
.page-narrow { max-width: var(--container-narrow); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head p { color: var(--c-muted); margin-top: 8px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }

/* 모바일에서 화면 아래에 붙는 주요 버튼 */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--c-surface); border-top: 1px solid var(--c-line);
  padding: 12px var(--gap-page) calc(16px + env(safe-area-inset-bottom, 0px)); }
.bottom-bar .inner { max-width: var(--container-narrow); margin: 0 auto; display: flex; gap: 8px; }
.bottom-bar .btn { flex: 1; }

.site-footer { border-top: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-muted); font-size: var(--fs-sm); }
.site-footer .inner { max-width: var(--container); margin: 0 auto; padding: 24px var(--gap-page) 110px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
         background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: 8px var(--gap-page) 16px; box-shadow: var(--shadow-pop); }
  .nav.is-open { display: flex; }
  .nav a, .nav button.link { border-radius: var(--radius-field); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* 관리자 보기 모드 배너 (관리자에게만 보임) */
.imp-banner { background: var(--c-point); color: var(--c-on-main); }
.imp-banner .inner { max-width: var(--container); margin: 0 auto; padding: 8px var(--gap-page); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
.imp-banner .imp-exit { background: var(--c-surface); color: var(--c-point); }
.imp-banner + .top-bar { display: none; }