/* 보드 공통 베이스 — 리셋·body·스크롤바·.mono. 옛 tokens.css 의 꼬리(45~82줄)를 그대로 옮긴 것(26.09.23 — tokens.css 가 docs/design/tokens/*.json 의 생성물이 되면서 분리).
   로드 순서는 tokens 바로 뒤·shell 앞(boot.php WS_STYLES) — 이 규칙들이 원래 있던 캐스케이드 자리. login.php 도 tokens → base → login 순으로 직접 링크한다 */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    /* 모든 OS에서 같은 화면 — 영문·숫자는 Google Sans, 한글은 Noto Sans KR(글리프 폴백).
       Roboto와 짝으로 설계된 한글이 Noto Sans KR — Pretendard에서 교체(발주자 확정, 26.08).
       시스템 키워드를 앞에 두면 기기마다 얼굴이 갈라진다 — 두 CDN 폰트가 항상 맨 앞 */
    font-family: "Google Sans", "Noto Sans KR", -apple-system, sans-serif;
    color: var(--ink);
    background-color: var(--sky-b);
    transition: color 0.6s var(--ease), background-color 0.6s var(--ease);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    /* 한글 줄바꿈은 어절(띄어쓰기) 단위 — 폰 폭에서 "솔루/션이에요"·"샐/러드와" 처럼 낱말 가운데가 끊기던 것(26.10.01).
       한 줄보다 긴 낱말(URL·영문 긴 이름)만 글자 단위로 꺾인다(break-word — 최소 폭 계산은 그대로라 flex 배치가 바뀌지 않는다).
       메모처럼 따로 word-break: break-word 를 주면 keep-all 이 풀리니 overflow-wrap 만 쓸 것 */
    word-break: keep-all; overflow-wrap: break-word;
    text-wrap: pretty;   /* 마지막 줄에 한 어절만 떨어지는 낙오를 줄인다(크롬·사파리 26 — 모르는 브라우저는 무시) */
  }
  /* 하늘의 밝기 차이는 테마와 무관한 고정 오버레이로 — 색은 단색이 맡아 부드럽게 전환된다 */
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.11) 0%, transparent 70%);
  }
  .mono { font-variant-numeric: tabular-nums; }   /* 시각·날짜·좌표 — 폰트는 본문과 같고 숫자 폭만 고정 */

  /* 안쪽 스크롤 공통 — 평소엔 안 보이고, 그 영역에 마우스를 올려야 얇은 반투명 썸이 나타난다.
     scrollbar-width: thin 은 유지해 자리를 미리 잡아두므로 hover 시 내용이 밀리지 않는다 */
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;   /* 가장자리 여백 — 막대가 더 얇아 보인다 */
  }
  *:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); }
  *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); }
  *::-webkit-scrollbar-corner { background: transparent; }
  button { font-family: inherit; }
  b, strong { font-weight: var(--fw-bold); }