:root {
  --accent-dark: #04E290;
  --accent-bright: #00FFAE;
  --accent-light: #00875C;

  --accent-fill: var(--accent-dark);

  --ring-core: #00FFAE;
  --ring-mid: #9EFFE0;
  --ring-outer: #D0FFF0;

  --warning: #FFAA4F;
  --danger: #FF4D4F;
  --danger-fill: #E30C06;

  --r-k: 1;
  --r-xs: calc(8px * var(--r-k));
  --r-sm: calc(12px * var(--r-k));
  --r-md: calc(18px * var(--r-k));
  --r-lg: calc(22px * var(--r-k));
  --r-xl: calc(30px * var(--r-k));
  --r-chip: calc(10px * var(--r-k));
  --r-inset: calc(15px * var(--r-k));

  --font: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  --t-display-size: 27px; --t-display-lh: 34px;
  --t-headline-size: 23px; --t-headline-lh: 30px;
  --t-title-lg-size: 18px;  --t-title-lg-lh: 24px;
  --t-title-md-size: 16px; --t-title-md-lh: 22px;
  --t-title-sm-size: 14px; --t-title-sm-lh: 20px;
  --t-body-lg-size: 14px; --t-body-lg-lh: 20px;
  --t-body-md-size: 13px;   --t-body-md-lh: 19px;
  --t-label-lg-size: 14px; --t-label-lg-lh: 18px;
  --t-label-md-size: 11.5px;--t-label-md-lh: 15px;
  --t-label-sm-size: 10px;  --t-label-sm-lh: 13px;

  --app-max-width: 560px;
  --read-max-width: 720px;
  --card-col: 340px;
  --sheet-width: min(var(--app-max-width), 560px);
  --tabbar-height: 66px;
  --rail-width: 0px;
  --safe-top-raw: env(safe-area-inset-top, 0px);
  --safe-top: var(--safe-top-raw);
  --status-gap: max(var(--safe-top), 26px);
  --offline-bar-h: 31px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --kb: 0px;

  --bottom-spacer: 96px;

  --spring: cubic-bezier(.32, .72, 0, 1);
  --spring-soft: cubic-bezier(.4, .74, .18, 1);
  --dur-nav: 420ms;
  --dur-fast: 260ms;
  --dur-press: 180ms;
}

@supports (corner-shape: superellipse(1.5)) {
  :root { --r-k: 1.348; }
}

:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #000000;
  --card: #17191E;
  --inset: #1E2026;
  --sheet: #28292D;
  --text-1: #FFFFFF;
  --text-2: #C9CACE;
  --text-3: #83858B;
  --divider: #2A2C32;
  --accent: var(--accent-dark);
  --accent-2: var(--accent-bright);
  --on-accent: #FFFFFF;
  --login-bg: var(--accent-bright);
  --login-fg: #000000;
  --intro-bg: #000000;
  --intro-fg: #FFFFFF;
  --intro-dim: #808080;
  --intro-solid: #FFFFFF;
  --intro-on-solid: #000000;
  --intro-link: var(--accent-bright);
  --intro-error: #FF5B5B;
  --intro-list: #333333;
  --intro-card: #1F1F1F;
  --glass: rgba(0, 0, 0, .5);
  --glass-line: rgba(255, 255, 255, .22);
  --tab-active: rgba(255, 255, 255, .15);
  --intro-veil: rgba(44, 44, 44, .71);
  --intro-veil-line: transparent;
  --intro-veil-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  --intro-on-green: #FFFFFF;
  --chip-bg: #154B37;
  --chip-fg: var(--accent-dark);
  --scrim: rgba(0, 0, 0, .55);
  --skeleton: #1E2026;
  --pane-line: rgba(255, 255, 255, .3);
  --card-line: rgba(255, 255, 255, .12);
  --card-edge: #303030;
  --neutral: #28292D;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #EEECF4;
  --card: #FFFFFF;
  --inset: #EEECF4;
  --sheet: #FFFFFF;
  --text-1: #0E0F12;
  --text-2: #2B2D33;
  --text-3: #9A9CA3;
  --divider: #E3E5EA;
  --pane-line: rgba(0, 0, 0, .22);
  --card-line: rgba(0, 0, 0, .10);
  --card-edge: transparent;
  --accent: var(--accent-light);
  --accent-2: var(--accent-light);
  --on-accent: #05291C;
  --login-bg: var(--accent-fill);
  --login-fg: #05291C;
  --intro-bg: #EEECF4;
  --intro-fg: #000000;
  --intro-dim: #77767A;
  --intro-solid: #000000;
  --intro-on-solid: #EEECF4;
  --intro-link: #00C97A;
  --intro-error: #FF5B5B;
  --intro-list: #BEBDC3;
  --intro-card: #FAF9FC;
  --glass: rgba(255, 255, 255, .56);
  --glass-line: #FFFFFF;
  --tab-active: #FFFFFF;
  --intro-veil: rgba(255, 255, 255, .71);
  --intro-veil-line: #FFFFFF;
  --intro-veil-shadow: 0 3px 12px rgba(0, 0, 0, .22);
  --intro-on-green: #000000;
  --chip-bg: #DFF7EC;
  --chip-fg: #00734F;
  --scrim: rgba(0, 0, 0, .32);
  --skeleton: #E7EAEF;
  --neutral: #E4E8EE;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #EEECF4;
    --card: #FFFFFF;
    --inset: #EEECF4;
    --sheet: #FFFFFF;
    --text-1: #0E0F12;
    --text-2: #2B2D33;
    --text-3: #9A9CA3;
    --divider: #E3E5EA;
    --pane-line: rgba(0, 0, 0, .22);
    --card-line: rgba(0, 0, 0, .10);
    --card-edge: transparent;
    --accent: var(--accent-light);
    --accent-2: var(--accent-light);
    --on-accent: #05291C;
    --login-bg: var(--accent-fill);
    --login-fg: #05291C;
    --intro-bg: #EEECF4;
    --intro-fg: #000000;
    --intro-dim: #77767A;
    --intro-solid: #000000;
    --intro-on-solid: #EEECF4;
    --intro-link: #00C97A;
    --intro-error: #FF5B5B;
    --intro-list: #BEBDC3;
    --intro-card: #FAF9FC;
    --glass: rgba(255, 255, 255, .56);
    --glass-line: #FFFFFF;
    --tab-active: #FFFFFF;
    --intro-veil: rgba(255, 255, 255, .71);
    --intro-veil-line: #FFFFFF;
    --intro-veil-shadow: 0 3px 12px rgba(0, 0, 0, .22);
    --intro-on-green: #000000;
    --chip-bg: #DFF7EC;
    --chip-fg: #00734F;
    --scrim: rgba(0, 0, 0, .32);
    --skeleton: #E7EAEF;
    --neutral: #E4E8EE;
  }
}

@media (min-width: 601px) {
  :root { --app-max-width: 820px; }
}

@media (min-width: 1024px) {
  :root {
    --app-max-width: 1100px;
    --bottom-spacer: 40px;

    --pane-title-size: 24px;   --pane-title-lh: 32px;
    --pane-section-size: 19px; --pane-section-lh: 26px;
    --pane-body-size: 16px;    --pane-body-lh: 24px;
    --pane-meta-size: 13.5px;  --pane-meta-lh: 18px;

    --pane-radius: 50px;

    --pane-dim: color-mix(in srgb, var(--text-1) 60%, var(--bg));
    --pane-fill: color-mix(in srgb, var(--text-1) 15%, var(--bg));
    --pane-inset: color-mix(in srgb, var(--text-1) 3%, var(--card));
  }
  :root.has-rail { --rail-width: 116px; }
  :root.has-wide-rail { --rail-width: 300px; }
}

@media (min-width: 1440px) {
  :root { --app-max-width: 1320px; }
}

@media (min-width: 1920px) {
  :root { --app-max-width: 1560px; }
}