/* Shared visual tokens. Keep page layout and semantic status colors in page styles. */
:root {
  --pf-blue: #245bd6;
  --pf-blue-hover: #1d4bb4;
  --pf-ink: #17253d;
  --pf-muted: #526078;
  --pf-line: #dce3ed;
  --pf-soft: #f0f4fa;
  --pf-background: #f7f9fc;
  --pf-surface: #fff;
  --pf-radius-card: 12px;
  --pf-radius-control: 8px;
  --pf-font: 'Pretendard Variable', 'Noto Sans KR', 'Segoe UI', sans-serif;
  --pf-page-background: linear-gradient(180deg, #edf3ff 0, #f7f9fc 480px);
}

body.notice-page:is(.home-page, .notice-workspace, .app-refresh) {
  min-height: 100vh;
  background: var(--pf-page-background) no-repeat, var(--pf-background) !important;
  color: var(--pf-ink);
  font-family: var(--pf-font) !important;
  -webkit-font-smoothing: antialiased;
}
body.notice-page:is(.home-page, .notice-workspace, .app-refresh) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--pf-blue) !important;
  outline-offset: 3px !important;
}

/* The landing keeps its editorial layout but shares the application chrome. */
body.home-page .home-main,
body.home-page .home-hero { background: transparent; }
body.home-page .home-header {
  box-sizing: border-box;
  height: 72px;
  min-height: 72px;
  background: var(--pf-surface);
  border-bottom-color: var(--pf-line);
}
body.home-page .home-header-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 72px;
  gap: 24px;
}
body.home-page .home-brand { color: var(--pf-ink); }
body.home-page .home-brand img { width: 34px; height: 34px; }
body.home-page .home-brand strong { font-size: 20px; letter-spacing: -.8px; }
body.home-page .home-nav { gap: 24px; }
body.home-page .home-nav a { font-size: 14px; color: var(--pf-muted); }
body.home-page .home-nav a:hover { color: var(--pf-blue); }
body.home-page .home-header-start {
  min-height: 44px;
  border-radius: var(--pf-radius-control);
}
body.home-page .home-management { background: var(--pf-soft); }
body.home-page .home-container { width: min(1200px, calc(100% - 48px)); }
body.home-page .site-footer { background: var(--pf-background); }
body.notice-page.app-refresh.onboarding-page .onboarding-screens { background: transparent !important; }

@media (max-width: 760px) {
  body.home-page .home-header,
  body.home-page .home-header-inner { height: 64px; min-height: 64px; }
  body.home-page .home-header-inner,
  body.home-page .home-container { width: calc(100% - 32px); }
  body.home-page .home-header-inner { gap: 10px; }
  body.home-page .home-brand strong { font-size: 18px; }
}