/* Shared Dunggeul visual system: readable type, clear actions and quiet surfaces.
 * All services use these tokens; page styles own only their feature layouts.
 */
:root {
  --dg-font-family: Pretendard, "Pretendard Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dg-font-weight-regular: 450;
  --dg-font-weight-bold: 650;
  --dg-font-weight-display: 750;
  --dg-font-weight-strong: 700;
  --dg-font-weight-medium: 500;
  --dg-line-height-base: 1.6;

  --dg-font-display-lg: 3.75rem;
  --dg-font-display-md: 2.75rem;
  --dg-font-display-sm: 2.25rem;
  --dg-font-heading-xl: 2.25rem;
  --dg-font-heading-lg: 1.75rem;
  --dg-font-heading-md: 1.5rem;
  --dg-font-heading-sm: 1.1875rem;
  --dg-font-heading-xs: 1.125rem;
  --dg-font-body-lg: 1.1875rem;
  --dg-font-body-md: 1.125rem;
  --dg-font-body-sm: 1.125rem;
  --dg-font-body-xs: 1.125rem;
  --dg-font-nav-label: 1.0625rem;
  --dg-font-nav-compact: 1rem;
  /* Compact captions and marketing titles share the same semantic roles across features. */
  --dg-font-overline: .75rem;
  --dg-font-caption-sm: .8125rem;
  --dg-font-caption: .875rem;
  --dg-font-body-compact: .9375rem;
  --dg-font-card-title: 1.375rem;
  --dg-font-symbol: 3.5rem;
  --dg-font-display-fluid: clamp(1.875rem, 4.5vw, 3rem);
  --dg-font-heading-fluid: clamp(1.5rem, 3vw, 1.875rem);
  --dg-font-display-fluid-lg: clamp(2.25rem, 7vw, 4rem);

  --dg-space-1: .25rem;
  --dg-space-2: .5rem;
  --dg-space-3: .75rem;
  --dg-space-4: 1rem;
  --dg-space-5: 1.25rem;
  --dg-space-6: 1.5rem;
  --dg-space-7: 2rem;
  --dg-space-8: 2.5rem;
  --dg-space-9: 3rem;
  --dg-space-10: 4rem;

  --dg-control-sm: 3rem;
  --dg-control-md: 3.25rem;
  --dg-control-lg: 3.5rem;

  --dg-radius-xs: .5rem;
  --dg-radius-sm: .625rem;
  --dg-radius-md: .75rem;
  --dg-radius-lg: 1rem;
  --dg-radius-xl: 1.25rem;
  --dg-radius-pill: 999rem;

  --dg-color-gray-0: #ffffff;
  --dg-color-gray-5: #f7f8fa;
  --dg-color-gray-10: #e7eaee;
  --dg-color-gray-20: #d9dee5;
  --dg-color-gray-30: #858e99;
  --dg-color-gray-50: #66717e;
  --dg-color-gray-60: #5f6975;
  --dg-color-gray-70: #59626d;
  --dg-color-gray-90: #171b20;
  --dg-color-gray-95: #101418;

  --dg-brand-5: #fdefef;
  --dg-brand-10: #f7dfe0;
  --dg-brand-30: #e0858c;
  --dg-brand-50: #c93a45;
  --dg-brand-60: #b32126;
  --dg-brand-70: #8f1820;
  --dg-brand-90: #310c0f;

  --dg-color-danger: #bd2c0f;
  --dg-color-danger-soft: #fdefec;
  --dg-danger-panel-border: #e7caca;
  --dg-danger-panel-bg: #fff8f8;
  --dg-color-success: #267337;
  --dg-color-success-soft: #eaf6ec;
  --dg-color-info: #096ab3;
  --dg-color-info-soft: #e7f4fe;
  --dg-color-warning: #8a5c00;
  --dg-color-warning-soft: #fff3db;

  --dg-text: var(--dg-color-gray-90);
  --dg-text-bolder: var(--dg-color-gray-95);
  --dg-text-muted: var(--dg-color-gray-70);
  --dg-border: var(--dg-color-gray-10);
  --dg-border-strong: var(--dg-color-gray-30);
  --dg-surface: var(--dg-color-gray-0);
  --dg-surface-soft: var(--dg-color-gray-5);
  --dg-member-bg: var(--dg-color-gray-5);
  --dg-accent: var(--dg-brand-60);
  --dg-accent-hover: var(--dg-brand-70);
  --dg-accent-soft: var(--dg-brand-5);
  --dg-visual-blue-bg: #eaf2ff;
  --dg-visual-blue: #28559b;
  --dg-visual-green-bg: #edf6e9;
  --dg-visual-green: #3d682d;
  --dg-visual-orange-bg: #fff1e6;
  --dg-visual-orange: #9a481f;
  --dg-visual-purple-bg: #f2edff;
  --dg-visual-purple: #68469b;
  --dg-icon-coral: #db4c57;
  --dg-icon-amber: #edb860;
  --dg-icon-blue: #4c78ba;
  --dg-icon-green: #5e987c;
  --dg-icon-soft: #f6ded5;
  --dg-rail-footer-gap: var(--dg-space-7);

  --dg-content: 47.5rem;
  --dg-content-wide: 61.25rem;
  --dg-content-max: 75rem;
  --dg-content-padding: 1.5rem;
  --dg-page-gap: var(--dg-space-6);
  --dg-panel-padding: var(--dg-space-6);
  --dg-panel-padding-mobile: var(--dg-space-5);
  --dg-app-frame: 87.5rem;
  --dg-app-sidebar: 13.125rem;
  --dg-app-gutter: 2.5rem;
  --dg-app-sidebar-compact: 11.875rem;
  --dg-app-gutter-compact: 1.75rem;
  --dg-app-main: calc(var(--dg-app-frame) - var(--dg-app-sidebar) - var(--dg-app-gutter));
  --dg-app-rail: 18rem;
  --dg-app-column-gap: var(--dg-space-6);
  --dg-focus-ring: 0 0 0 .25rem rgba(179, 33, 38, .18);
  --dg-duration-fast: 160ms;
  --dg-duration-base: 240ms;
  --dg-ease: cubic-bezier(.2,.7,.2,1);

  /* legacy aliases retained while page CSS is progressively normalized */
  --dg-red: var(--dg-accent);
  --dg-coral: #e24b4b;
  --dg-beige: #d9c4a3;
  --dg-ivory: #faf8f5;
  --dg-charcoal: var(--dg-text);
  --dg-muted: var(--dg-text-muted);
  --dg-line: var(--dg-border);
  --dg-white: var(--dg-surface);
  --dg-radius: var(--dg-radius-xl);
  --dg-shadow-none: none;
  --dg-shadow: 0 .75rem 2.5rem rgba(23, 27, 32, .08);
  --dg-shadow-card: 0 1px 2px rgba(23, 27, 32, .025);
  --dg-shadow-hover: 0 .5rem 1.5rem rgba(23, 27, 32, .06);
  --dg-shadow-float: 0 .5rem 1.75rem rgba(23, 27, 32, .1);
  --dg-shadow-unread-inset: inset 3px 0 var(--dg-accent);
  --dg-shadow-tab: inset 0 -2px var(--dg-accent);
  --dg-shadow-field-line: inset 0 -1px 0 var(--dg-border-strong);
  --dg-shadow-online: 0 0 0 .1875rem #e4f3eb;
  --dg-shadow-modal: 0 1.5rem 5rem #171b2033;
  --dg-shadow-promo: 0 1rem 2.25rem #8a313318;
  --dg-shadow-brand-soft: 0 .25rem .875rem #a51c2020;
}

@media (max-width: 47.5rem) {
  :root {
    --dg-content-padding: 1rem;
    --dg-font-display-lg: 2.75rem;
    --dg-font-display-md: 2rem;
    --dg-font-display-sm: 1.75rem;
    --dg-font-heading-xl: 1.75rem;
    --dg-font-heading-lg: 1.5rem;
    --dg-font-heading-md: 1.375rem;
  }
}