/* GENERATED from media-app-ui/tokens.css; do not edit. */
/* Media apps unified visual tokens — canonical source. Keep behavior/app styling local. */
:root {
  color-scheme: dark;
  --media-bg: #111310;
  --media-surface: #1b1e18;
  --media-surface-raised: #22261e;
  --media-border: #343a2e;
  --media-text: #f1f1e8;
  --media-muted: #a7ad9d;
  --media-accent: #d2ec9a;
  --media-accent-ink: #1a2310;
  --media-serif: Georgia, 'Noto Serif KR', serif;
  --media-sans: system-ui, -apple-system, 'Noto Sans KR', sans-serif;
  --media-space-1: 4px;
  --media-space-2: 8px;
  --media-space-3: 12px;
  --media-space-4: 16px;
  --media-space-6: 24px;
  --media-radius: 7px;
  --media-focus: 2px solid var(--media-accent);
}

/* Shared app header contract: identity left, app navigation right. */
.media-app-header { display:flex; align-items:center; justify-content:space-between; gap:var(--media-space-3); }
.media-app-header > .brand { display:flex; align-items:center; min-height:44px; flex-shrink:0; }
.media-app-header .app-links { display:flex; align-items:center; gap:var(--media-space-3); margin-left:auto; }
.media-app-header .app-links a { display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--media-space-1); color:var(--media-accent); font:500 12px/1.3 var(--media-sans); white-space:nowrap; }
.media-app-header .app-links a:focus-visible,
.media-app-header > .brand:focus-visible,
.media-app-header .section-links a:focus-visible { outline:var(--media-focus); outline-offset:2px; border-radius:4px; }
.media-app-header #mode:empty { display:none; }
.media-app-header .header-nav-groups { display:flex; align-items:center; gap:var(--media-space-3); margin-left:auto; }
.media-app-header .section-links { display:flex; align-items:center; gap:var(--media-space-2); padding-left:var(--media-space-3); border-left:1px solid var(--media-border); }
.media-app-header .section-links a { display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--media-space-1); color:var(--media-muted); font:500 12px/1.3 var(--media-sans); white-space:nowrap; }
@media (max-width:680px) {
  .media-app-header { gap:var(--media-space-2); }
  .media-app-header .app-links { gap:var(--media-space-1); }
  .media-app-header .app-links a,.media-app-header .section-links a { font-size:12px; }
  .media-app-header .header-nav-groups { gap:var(--media-space-2); }
  .media-app-header .section-links { gap:var(--media-space-1); padding-left:var(--media-space-2); }
}