/* One frame for every page except the full-screen simulator (reports #7,
   #9): the simulator's top bar (brand + page name, page controls, shared
   menu), a single content column and an optional intro block. Page
   stylesheets style only what is inside the content column. */
html:has(> body.page) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.page {
  height: auto; min-height: 100vh; margin: 0; overflow-x: hidden; overflow-y: auto;
  background: #0b0f17; color: #e6edf7; font-size: 13px;
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* The top bar keeps the simulator palette whatever the page's own tokens. */
body.page .topbar {
  --bg-1: #121826; --bg-2: #1a2233; --line: #2c3850; --muted: #8a96ad; --accent: #ffb020; --text: #e6edf7;
  position: sticky; top: 0; z-index: 100; box-sizing: border-box; min-height: 56px; gap: 16px; color: var(--text);
}
body.page .topbar h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; }
body.page main.page-main {
  box-sizing: border-box; width: min(1320px, calc(100% - 40px)); max-width: none;
  margin: 24px auto 40px; padding: 0;
}
.page-intro {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid #273247;
}
.page-intro-text p { margin: 0 0 4px; max-width: 820px; color: #aebbd0; font-size: 13px; line-height: 1.6; }
.page-intro-text p:last-child { margin-bottom: 0; }
.page-intro-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 900px) {
  body.page .topbar { position: static; flex-wrap: wrap; padding: 8px 12px; }
  body.page main.page-main { width: calc(100% - 24px); margin: 16px auto 32px; }
  .page-intro { flex-direction: column; align-items: flex-start; }
}
@media print { body.page .topbar { display: none; } }