/* 플랫폼 전용 고정 색. 왼쪽 메뉴는 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;
  /* 기본 모달 구도(총지휘관 2026-11-10): vicmind.co.kr B-Mind 예시 dialog#designer-dialog.ac-welcome의 공개 CSS 값
     (console.css·collaboration.css ver=0.7.248). 이름만 붙이고 값은 그대로다. 첫 로그인 입력 창과 「내 정보」 창이 쓴다. */
  --vm-modal-border: #dbe1dd;
  --vm-modal-shadow: 0 20px 80px #18272040;
  --vm-modal-backdrop: #18272070;
  --vm-modal-eyebrow: #56705e;
  --vm-modal-close-bg: #f3f5f3;
  --vm-modal-lead: #5e6870;
  --vm-modal-strong: #2e624b;
  --vm-modal-note-bg: #edf4ef;
  --vm-modal-note-border: #d9e6dd;
  --vm-modal-note-title: #2d5940;
  --vm-modal-note-text: #53645a;
  --vm-modal-step-bg: #edf3ee;
  --vm-modal-step-border: #dce8df;
  --vm-modal-step-number: #41684e;
  --vm-modal-step-title: #2d3530;
  --vm-modal-step-text: #6b7379;
  --vm-modal-person-name: #454f48;
  --vm-modal-person-text: #7b8388;
  --vm-modal-actions-border: #e3e9e5;
  --vm-modal-actions-bg: #fff;
  --vm-modal-button-border: #d9dfdc;
  --vm-modal-primary-bg: #e2efe6;
  --vm-modal-primary-text: #1f4d38;
  --vm-modal-primary-border: #c3dacb;
  --vm-modal-primary-hover-bg: #d3e7da;
  --vm-modal-primary-hover-border: #aecdb9;
  --vm-modal-hint: #8a9297;
  /* 두 창의 입력 칸(총지휘관 2026-11-10 「입력 인풋 폰트크기랑 인풋하는 칸크기」). 예시 .ac-input-wrap·.button 값을 합쳤다.
     이 레포의 다른 입력 칸(--vm-input-*)은 그대로다. */
  --vm-modal-field-label: #454f48;
  --vm-modal-field-text: #2d3530;
  --vm-modal-field-bg: #fff;
  --vm-modal-field-border: #d9dfdc;
  --vm-modal-field-placeholder: #8a929b;
  --vm-modal-field-focus: #80ad92;
  --vm-modal-field-disabled-bg: #f4f7f4;
  --vm-modal-field-disabled-text: #6b7379;

  /* 로그인 카드: 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;
  }
}

@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);
  }
}