@charset "UTF-8";

/* @import url(/res/NotoSerifKR-VariableFont_wght.ttf); */
@import url(NotoSerifKR-VariableFont_wght.ttf); 
@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),
         local('MaterialIcons-Sharp'),
         url('MaterialSymbolsSharp-Regular.ttf') format('truetype');
}

:root {
  /* Base */
  --background: #ffffff;
  --surface: #f8f9fa;
  --surface-hover: #f1f3f5;
  --text: #363636;
  --text-secondary: #6b7280;
  --heading-text: #111111;
  --muted-text: #9ca3af;
  --border: #e5e7eb;

  /* Primary */
  --primary: #0076d1;
  --primary-hover: #0065b3;
  --primary-text: #ffffff;

  /* Hero */
  --hero-text: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.25);
  --hero-overlay-heavy: rgba(0, 0, 0, 0.45);

  /* Status */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #0284c7;

  /* Code */
  --code-background: #efefef;
  --code-text: #000000;

  /* Selection */
  --selection-background: rgba(100, 180, 250, 0.15);

  /* UI */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #202b38;
    --surface: #273442;
    --surface-hover: #303e4c;
    --text: #dbdbdb;
    --text-secondary: #aeb8c2;
    --heading-text: #ffffff;
    --muted-text: #7f8a96;
    --border: #3b4855;

    --primary: #42a5f5;
    --primary-hover: #64b5f6;
    --primary-text: #ffffff;

    /* Hero */
    --hero-text: #ffffff;
    --hero-overlay: rgba(0, 0, 0, 0.25);
    --hero-overlay-heavy: rgba(0, 0, 0, 0.45);

    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #38bdf8;

    --code-background: #161f27;
    --code-text: #ffbe85;

    --selection-background: rgba(100, 180, 250, 0.12);

    --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}

body {
  background: var(--background);
  line-height: 1.6;
  margin: 0 auto;
}

h1, h2, h3, h4, h5 {
  color: var(--heading-text);
  margin-block: unset;
}

ul {
  list-style: none;
  margin-block: unset;
  padding-inline: unset;
}

a {
  color: var(--anchor-text);
  text-decoration: none;
}

code {
  color: var(--code-text);
  background: var(--code-background);
  border-radius: 6px;
  padding: 2.5px 5px;
}