/* 플랫폼 전용 고정 색. 왼쪽 메뉴는 B-Mind 예시 값, 상태색은 Board 콘솔 배지 값이다.
   치수·반경·간격·중립색의 정본도 여기 둔다. vendor의 --vm-topbar-height: 3rem 바이트는 유지하고, 이 파일이 66px와 모바일 58px로 덮는다. */
:root {
  --nav-line: #e3e6e9;
  --nav-rail: #faf9f6;
  --nav-text: #616972;
  --nav-hover: #f0f1ec;
  --nav-current-bg: #e7eee5;
  --nav-current-text: #2e624b;
  --nav-muted: #717983;
  --nav-label: #89928c;
  --vm-drawer-shadow: rgb(21 35 28 / .094);
  --vm-preview-text-dark: #000;
  --vm-preview-text-light: #fff;

  --vm-destructive-soft: #fdecea;

  /* Board html.js .badge와 .vm-page .badge.active의 최종 색. */
  --vm-status-default: oklch(0.97 0 0);
  --vm-status-default-foreground: oklch(0.30 0 0);
  --vm-status-done: oklch(0.62 0.14 155 / 0.12);
  --vm-status-done-foreground: oklch(0.53 0.13 155);
  --vm-status-open: oklch(0.968 0 0);
  --vm-status-open-foreground: oklch(0.555 0 0);
  --vm-status-active: oklch(.58 .13 250 / .12);
  --vm-status-active-foreground: oklch(.45 .13 250);
  --vm-status-hold: oklch(0.75 0.15 66 / 0.16);
  --vm-status-hold-foreground: oklch(0.52 0.12 66);
  --vm-status-muted: oklch(0.968 0 0);
  --vm-status-muted-foreground: oklch(0.555 0 0);

  /* 예시 중립색. 레일 --nav-*와 브랜드 파생(--vm-brand-*·--vm-primary)은 다시 정의하지 않는다. */
  --vm-ink: #242a2d;
  --vm-sidebar-surface: #f8f9fb;

  --vm-topbar-height: 66px;
  --vm-topbar-pad: 0 28px 0 20px;
  --vm-topbar-gap: 20px;
  --vm-company-size: 19px;

  --vm-nav-font: 12px;
  --vm-nav-line: 15.6px;
  --vm-nav-icon: 24px;
  --vm-nav-radius: 10px;
  --vm-nav-pad: 12px 3px;
  --vm-nav-gap: 9px;
  --vm-nav-items-gap: 6px;

  --vm-channel-width: 248px;
  --vm-channel-pad: 24px 14px;
  --vm-channel-title: 18px;
  --vm-channel-row-min: 44px;
  --vm-channel-font: 14px;
  --vm-channel-row-pad: 12px;
  --vm-channel-gap: 10px;
  --vm-channel-radius: 6px;
  --vm-channel-icon: 18px;
  --vm-side-label: #737b84;
  --vm-side-label-font: 12px;
  --vm-side-avatar: 20px;
  --vm-side-avatar-border: #e2e5e8;

  --vm-chat-head-min: 78px;
  --vm-chat-head-gap: 14px;
  --vm-chat-head-pad: 16px 28px 12px;
  --vm-chat-title: 18px;
  --vm-timeline-pad: 22px 28px 32px;
  --vm-message-gap: 12px;
  --vm-message-space: 26px;
  --vm-message-avatar: 36px;
  --vm-author-size: 14px;
  --vm-time-size: 11px;
  --vm-body-size: 15px;
  --vm-body-line: 27px;
  --vm-role-size: 11px;
  --vm-role-radius: 4px;

  --vm-file-radius: 8px;
  --vm-file-pad: 13px 15px;
  --vm-file-gap: 12px;
  --vm-file-icon-w: 34px;
  --vm-file-icon-h: 40px;
  --vm-file-max: 390px;

  --vm-composer-pad: 12px 20px 9px;
  --vm-input-radius: 8px;
  --vm-input-border: 1px;
  --vm-input-pad: 8px 10px;
  --vm-input-gap: 8px;
  --vm-input-font: 14px;
  --vm-input-line: 22.4px;
  --vm-input-min: 42px;

  --vm-button-radius: 6px;
  --vm-button-font: 12px;
  --vm-button-line: 1.4;
  --vm-button-pad: 10px 15px;
  --vm-button-min-height: 44px;
  --vm-button-sm-height: 36px;
  --vm-button-sm-pad: 7px 10px;
  --vm-button-sm-radius: 5px;
  --vm-tool-size-w: 38px;
  --vm-tool-size-h: 40px;
  --vm-tool-radius: 5px;
  --vm-send-icon: 19px;
  --vm-icon-size: 20px;
  --vm-coarse-min: 44px;

  --vm-dialog-radius: 12px;
  --vm-dialog-head-min: 80px;
  --vm-dialog-head-pad: 16px 24px;
  --vm-dialog-title: 18px;
  --vm-dialog-close: 44px;
  --vm-dialog-inset: 16px;

  /* 로그인 카드: Board work-web 로그인 치수(1rem = 16px, docs/design-system.md 3절). */
  --vm-login-page-pad: 24px;
  --vm-login-card-max: 896px;
  --vm-login-card-narrow: 416px;
  --vm-login-card-radius: 16px;
  --vm-login-hero-pad: 40px 36px;
  --vm-login-hero-gap: 16px;
  --vm-login-panel-pad: 40px 36px;
  --vm-login-panel-gap: 20px;
  --vm-login-logo: 44px;
  --vm-login-logo-radius: 12px;
  --vm-login-title: 26px;
  --vm-login-heading: 18px;
  --vm-login-field-gap: 12px;
  --vm-login-label-gap: 6px;
  --vm-login-control-min: 46px;
  --vm-login-note-pad: 14px 16px;
  --vm-login-note-radius: 8px;
}

@media (max-width: 1100px) and (min-width: 761px) {
  :root {
    --vm-channel-width: 210px;
    --vm-channel-pad: 20px 10px;
    --vm-chat-head-pad: 16px 22px 12px;
    --vm-timeline-pad: 22px 22px 32px;
    --vm-body-size: 14px;
  }
}

@media (max-width: 767px) {
  :root {
    --vm-topbar-height: 58px;
    --vm-topbar-gap: 8px;
    --vm-company-size: 14px;
    --vm-topbar-pad: 8px 12px 8px 8px;
    --vm-chat-head-min: 71px;
    --vm-chat-head-gap: 8px;
    --vm-chat-head-pad: 12px 16px 9px;
    --vm-chat-title: 17px;
    --vm-timeline-pad: 18px 14px 26px;
    --vm-message-gap: 9px;
    --vm-message-avatar: 31px;
    --vm-author-size: 13px;
    --vm-body-size: 14px;
    --vm-body-line: 24.5px;
    --vm-composer-pad: 10px 12px max(8px, env(safe-area-inset-bottom));
    --vm-dialog-radius: 9px;
    --vm-dialog-head-min: 76px;
    --vm-dialog-head-pad: 13px 15px;
    --vm-dialog-title: 16px;
    --vm-dialog-inset: 10px;
    --vm-login-hero-pad: 32px 24px 28px;
    --vm-login-panel-pad: 28px 24px 32px;
    --vm-login-title: 22px;
  }
}

@media (pointer: coarse) {
  :root {
    --vm-input-min: var(--vm-coarse-min);
  }
}