/* 리셋, 타이포, 셸 레이아웃 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1:focus, .view:focus { outline: none; }

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

/* 셸 */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "top top"
    "side notice"
    "side view";
  min-height: 100vh;
}
.topbar { grid-area: top; position: sticky; top: 0; z-index: 20; }
.sidebar { grid-area: side; }
/* 데스크톱: 화면을 스크롤해도 메뉴가 잘리지 않게 고정(D-T3). 상단바 높이 + 여유 */
@media (min-width: 768px) {
  .sidebar { position: sticky; top: calc(var(--topbar-h) + 8px); align-self: start; max-height: calc(100vh - var(--topbar-h) - 8px); overflow-y: auto; }
}
.notice { grid-area: notice; min-width: 0; }
.view { grid-area: view; min-width: 0; padding: var(--sp-5); }
.tabbar { display: none; }

@media (max-width: 767px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "notice" "view";
  }
  .view { padding: var(--sp-4); padding-bottom: calc(var(--tabbar-h) + var(--sp-5)); }
  .sidebar { display: none; }
  .app.nav-open .sidebar {
    display: block; position: fixed; z-index: 30;
    inset: 0 0 var(--tabbar-h) 0; overflow-y: auto;
  }
  .tabbar { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: var(--tabbar-h); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}