/* ============================================================
   스마일캠프 전시회 — 기본 스타일
   css/base.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.page { max-width: var(--w-page); margin: 0 auto; padding: 0 24px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-side);
  gap: 32px;
  align-items: start;
  padding-top: 32px;
}
.layout > aside { position: sticky; top: calc(var(--h-header) + 24px); }

.section { margin-bottom: var(--gap-xl); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.section-head .sub { font-size: var(--fs-meta); color: var(--ink-2); font-weight: 400; }
.section-head .more { font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.section-head .more:hover { color: var(--ink); }

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  padding: 32px 0 8px;
}
.page-title .count {
  font-family: var(--font-body); font-size: 15px;
  font-weight: 400; color: var(--ink-2); margin-left: 10px;
}

@media (max-width: 900px) {
  .page { padding: 0 16px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 16px; }
  .layout > aside { position: static; }
  .section { margin-bottom: 40px; }
  body { padding-bottom: calc(var(--h-tabbar) + 16px); }
  .page-title { padding: 20px 0 4px; font-size: 24px; }
}