/*
 * Design tokens — the single source.
 *
 * Every colour, gap, size and radius in the product comes from here. A value
 * written directly into a rule is a value that will drift from its neighbours
 * the first time someone edits one screen and not the other, and this product
 * has three surfaces that must look like one thing.
 *
 * 흰 바탕이다. 파일럿에서 이 제품이 실제로 놓이는 자리가 사무실 화면과
 * 인쇄물이기 때문이다. 인쇄가 제품인 화면을 어두운 바탕으로 만들어 두면
 * 종이로 갈 때마다 색을 뒤집어야 하고, 뒤집는 규칙이 화면 규칙과 어긋나기
 * 시작하면 둘 중 하나는 반드시 낡는다.
 */

@font-face {
  font-family: 'Pretendard';
  /*
   * Self-hosted on purpose. A CDN link is a dependency on the venue's network,
   * and the one thing a demo cannot afford is to load without its typeface.
   */
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /*
   * ---- 색 8 ----
   *
   * 본문 대비는 WCAG AA(4.5:1) 위에 둔다. 괄호 안이 흰 바탕(#ffffff) 대비다.
   * 상태 3색은 어두운 바탕에서 쓰던 밝은 값을 그대로 옮기면 흰 위에서 읽히지
   * 않으므로, 같은 계열의 더 진한 쪽으로 다시 잡았다.
   */
  --bg: #ffffff;
  --surface: #f6f7f9;
  --text: #14181d;        /* 15.8:1 */
  --text-dim: #5b6572;    /*  6.2:1 */
  --accent: #2354d8;      /*  6.5:1 */
  --ok: #0f7a4d;          /*  4.9:1 */
  --warn: #8a5a06;        /*  5.7:1 */
  --danger: #c0322c;      /*  5.4:1 */

  /* 위 색에서 파생된 것들. 새 색이 아니라 같은 색의 다른 세기다. */
  --line: #e3e6ea;
  --line-strong: #c6ccd4;
  --surface-hi: #eceff3;
  --accent-soft: rgba(35, 84, 216, 0.09);

  /*
   * ---- 차트 범주 8색 ----
   *
   * 색상만이 아니라 명도로도 갈린다. 같은 밝기의 여덟 색은 화면에서는
   * 구분되지만 흑백으로 인쇄하면 전부 같은 회색이 되고, 색각 이상이 있는
   * 사람에게도 이웃 계열이 붙는다. 이 제품은 인쇄물이 제품이므로 색상을
   * 돌리면서 밝기도 계단으로 올렸다 — 차례로 이웃한 두 색의 명도비는
   * 1.48 이상이다.
   *
   * 괄호 안은 흰 바탕 대비. 전부 4.5:1 위라 범례 글자로 그대로 써도 된다.
   */
  --c1: #3568de;  /* 블루 5.0:1 */
  --c2: #0a5f68;  /* 틸 7.4:1 */
  --c3: #a06807;  /* 앰버 4.7:1 */
  --c4: #682d9c;  /* 바이올렛 8.6:1 */
  --c5: #c12d63;  /* 로즈 5.5:1 */
  --c6: #0d4e28;  /* 그린 9.8:1 */
  --c7: #526376;  /* 슬레이트 6.2:1 */
  --c8: #642708;  /* 오렌지 11.5:1 */

  /* ---- 간격: 8px 그리드 ---- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;

  /* ---- 타입 5단 ---- */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 28px;
  --lh: 1.6;
  --font: 'Pretendard', system-ui, -apple-system, 'Malgun Gothic', sans-serif;

  /* ---- 형태 ---- */
  --radius: 12px;
  --radius-sm: 8px;
  --border: 1px solid var(--line);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.32);

  /*
   * 읽기 폭.
   *
   * 한 줄이 길어지면 눈이 다음 줄 머리를 찾지 못한다. 답변은 대화가 아니라
   * 읽는 글이므로 가로를 화면이 아니라 글자수로 잡는다.
   */
  --measure: 68ch;

  /*
   * 겹침 순서.
   *
   * 값을 규칙마다 손으로 적으면 하나를 올릴 때 어느 것 위로 올라가는지 알 수
   * 없다. 다섯 단만 두고 그 안에서만 고른다.
   */
  --z-sticky: 1;
  --z-bar: 5;
  --z-admin: 8;
  --z-overlay: 9;
  --z-overbar: 10;
  --z-drawer: 12;

  /*
   * 키보드로 옮겨 다니는 사람에게 지금 어디인지 보여 주는 테두리.
   * 마우스 클릭에는 뜨지 않는다(:focus-visible) — 눌렀을 때 테를 두르는 것은
   * 알려 주는 것이 아니라 방해다.
   */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

/*
 * 전역 내비게이션.
 *
 * 세 표면이 같은 규칙을 쓰므로 화면 파일이 아니라 여기 둔다. 마크업은
 * public/nav.js 가 만든다 — 모양과 만드는 곳이 갈려 있으면 한쪽만 고쳐도
 * 다른 쪽이 따라오지 않는다.
 */
.navbar {
  /*
    붙박이가 아니라 sticky 다.

    fixed 로 두면 흐름에서 빠져 나가, 뒤따르는 고정 요소가 같은 자리에
    겹쳐 그려진다 — 실제로 채팅 화면에서 계기판이 이 바를 통째로 덮었다.
    sticky 는 자리를 차지한 채 붙으므로 두 줄이 겹치지 않고 쌓인다.
  */
  position: sticky; top: 0; z-index: var(--z-overbar);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); height: 44px;
  background: var(--bg); border-bottom: var(--border);
  font-size: var(--t-xs);
}
.navbar .wordmark {
  font-weight: 680; letter-spacing: -0.01em; font-size: var(--t-sm);
  color: var(--text); text-decoration: none;
}
.navbar .navgap { flex: 1; }
.navbar .navlinks { display: flex; gap: 4px; align-items: center; }
.navbar .navlinks a,
.navbar .navnow {
  padding: 5px 11px; border-radius: var(--radius-sm); text-decoration: none;
}
.navbar .navlinks a { color: var(--text-dim); transition: background-color 120ms ease-out; }
.navbar .navlinks a:hover { background: var(--surface-hi); color: var(--text); }
/* 지금 있는 화면은 링크가 아니다 — 눌러도 갈 곳이 없다. */
.navbar .navnow { color: var(--text); font-weight: 650; background: var(--surface-hi); }
.navbar .navwho { color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
/*
  롤 배지.

  이름 옆에 무엇으로 들어와 있는지를 적는다. 관리자는 강조색, 그 외는
  중립이다 — 색이 권한을 말하되 소리치지는 않게.
*/
.navbar .rolechip {
  font-size: 10px; font-weight: 650; letter-spacing: 0.02em;
  border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--line-strong); color: var(--text-dim);
}
.navbar .rolechip.admin {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft);
}

/* 폰에서는 계기판 줄을 접는다 — 좁은 화면에서 먼저 필요한 것은 이동이다. */
@media (max-width: 720px) {
  .navbar { padding: 0 var(--s2); gap: var(--s1); }
  .navbar .navwho .name { display: none; }
}
.navbar .navout {
  border: var(--border); background: var(--bg); color: var(--text-dim);
  font: inherit; font-size: var(--t-xs); padding: 5px 11px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.navbar .navout:hover { border-color: var(--accent); color: var(--text); }

/*
 * 키보드 초점은 어느 화면에서나 같은 모양이다. 표면마다 다르면 사용자가
 * 매번 다시 배운다.
 */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/*
 * 움직임을 줄여 달라고 설정한 사람에게는 줄인다. 이 제품의 움직임은 전부
 * 장식이라 꺼도 잃는 정보가 없다.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Figures line up in columns or they cannot be compared at a glance. Applied
 * wherever a number is shown, not only in tables.
 */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}