/* 준환 OS 2004 — base tokens, reset, focus, reduced motion.
   Every other stylesheet uses these custom properties. Light theme only. */

/* Heavy system face for Latin letters Black Han Sans lacks (Š, é ...). local() only: no download. */
@font-face {
  font-family: "JOS Display Latin";
  src: local("Arial Black"), local("Arial-Black"), local("Segoe UI Black"), local("SegoeUI-Black"),
    local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Black"), local("Roboto-Black");
  font-weight: 400;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  color-scheme: light;

  /* sky & land (wallpaper) */
  --c-sky-1: #2f9be0;
  --c-sky-2: #7fcbf4;
  --c-sky-3: #d6f1ff;
  --c-hill-1: #b4e38a;
  --c-hill-2: #6cc25e;
  --c-hill-3: #3f9a4b;

  /* brand */
  --c-teal: #13a89e;
  --c-teal-d: #0a6f68;
  --c-blue: #2a7fd4;
  --c-blue-d: #1a5ea8;
  --c-navy: #12335a;
  --c-orange: #ff8a2b;
  --c-orange-d: #d9530f;
  --c-pink: #ff7eb3;
  --c-pink-d: #d6336c;
  --c-yellow: #ffe766;
  --c-mint: #c8f5e6;

  /* neutrals (all ink colors pass 4.5:1 on --c-paper and --c-panel) */
  --c-ink: #142235;
  --c-ink-2: #34475e;
  --c-ink-3: #55677c;
  --c-paper: #ffffff;
  --c-panel: #f3f7fb;
  --c-panel-2: #e5edf5;
  --c-line: #c6d4e2;
  --c-line-2: #94abc3;
  --c-sel: rgba(42, 127, 212, 0.22);

  /* taskbar (dark) */
  --c-bar-1: #2e4566;
  --c-bar-2: #1a2c46;
  --c-bar-3: #0f1b2e;
  --c-bar-ink: #f4f8ff;
  --c-bar-ink-2: #c3d2e6;

  /* window chrome */
  --c-title-1: #ffffff;
  --c-title-2: #dcf0ff;
  --c-title-3: #b4dcf8;
  --c-title-4: #cde9fc;
  --c-title-ink: #0f2f55;
  --c-title-off-1: #fbfcfd;
  --c-title-off-2: #e7ecf1;
  --c-title-off-3: #d6dee6;
  --c-title-off-ink: #45566a;
  --c-win-line: #7ea4c8;

  /* LED screen */
  --c-led-bg: #04161e;
  --c-led-on: #8ff3ff;
  --c-led-off: rgba(143, 243, 255, 0.08);

  /* states */
  --c-focus: #d94800;
  --c-focus-halo: #ffffff;
  --c-live: #e0312f;
  --c-ok: #1d8a4a;

  /* type */
  --font-ui: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-display: "Black Han Sans", "JOS Display Latin", "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "D2Coding", monospace;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 15px;
  --fs-l: 18px;
  --fs-xl: 24px;

  /* shape */
  --r-xs: 4px;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 16px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* shadows: one light source from the top */
  --sh-1: 0 1px 2px rgba(12, 34, 64, 0.16), 0 2px 6px rgba(12, 34, 64, 0.10);
  --sh-2: 0 3px 8px rgba(12, 34, 64, 0.16), 0 10px 24px rgba(12, 34, 64, 0.16);
  --sh-3: 0 8px 20px rgba(12, 34, 64, 0.22), 0 24px 56px rgba(12, 34, 64, 0.24);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --sh-icon: drop-shadow(0 2px 1.5px rgba(10, 30, 60, 0.32));

  /* gloss: the top half shine used by buttons and bars */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.25) 49%, rgba(255, 255, 255, 0) 51%);
  /* softer shine for buttons with white text, so the text keeps 4.5:1 */
  --gloss-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 47%);

  /* layout */
  --taskbar-h: 46px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-mid: 200ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-sky-2);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--c-blue-d); }
[hidden] { display: none !important; }

/* ---------- focus: orange ring with a white halo, visible on sky, paper and the dark bar ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--c-focus-halo);
}

/* ---------- shared helpers for every app ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* glossy push button used across apps */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-s);
  background: var(--gloss), linear-gradient(180deg, #ffffff, #dfe9f3);
  color: var(--c-ink);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--sh-inset), 0 1px 2px rgba(12, 34, 64, 0.14);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.btn:hover { filter: brightness(1.04) saturate(1.1); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(12, 34, 64, 0.18); }
.btn--primary {
  border-color: #0e4a85;
  background: var(--gloss-soft), linear-gradient(180deg, #2275c4, #154f8f);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.btn--accent {
  border-color: #9a3a08;
  background: var(--gloss-soft), linear-gradient(180deg, #b94f0c, #a8400b);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* small label chip and badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-panel-2);
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
.badge-live {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--c-live);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- reduced motion: no animation, no transition ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}