/* 바른물류 배차시스템 — component styles (br-*)
   Plain CSS classes over tokens.css. Works in JSP + Bootstrap 4: load after bootstrap/sb-admin-2. */

body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--bg); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.br-num { font-variant-numeric: tabular-nums; }
.br-preview { padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.br-col { display: flex; flex-direction: column; gap: 12px; }
.br-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.br-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.br-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Button ---------- */
.br-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-md); padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
/* jQuery .show() 는 숨겨 두었던 버튼에 style="display: inline|block" 을 넣어 아이콘 간격(gap)이 사라진다 → 버튼 모양으로 되돌린다 */
.br-btn[style*="display: inline"], .br-btn[style*="display: block"] { display: inline-flex !important; }
.br-btn:hover { background: var(--surface-hover); }
.br-btn:focus-visible, .br-input:focus-visible, .br-select:focus-visible, .br-chip:focus-visible, .br-nav-item:focus-visible, .br-stat:focus-visible, .br-tab:focus-visible, .br-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.br-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.br-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* <a> 로 만든 버튼: 부트스트랩 a:hover(파란 글씨 · 밑줄)가 덮어 파란 버튼에서 글씨가 사라졌다 */
a.br-btn:hover, a.br-btn:focus { text-decoration: none; color: var(--ink); }
a.br-btn--primary:hover, a.br-btn--primary:focus { color: var(--on-primary); }
.br-btn--ghost { border-color: transparent; background: transparent; color: var(--ink-muted); }
.br-btn--ghost:hover { background: var(--surface-hover); color: var(--ink); }
.br-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.br-btn--danger-outline { color: var(--danger); border-color: var(--danger); }
.br-btn--sm { height: var(--control-sm); padding: 0 10px; font-size: 13px; }
.br-btn--lg { height: var(--control-lg); padding: 0 18px; font-size: 15px; }
.br-btn--block { width: 100%; }
.br-btn[disabled], .br-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.br-btn .br-kbd { font-size: 11px; line-height: 16px; padding: 0 4px; border-radius: var(--radius-xs); background: rgba(255,255,255,.18); }
.br-btn:not(.br-btn--primary) .br-kbd { background: var(--surface-sunken); color: var(--ink-muted); }
.br-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; position: relative; }
.br-iconbtn:hover { background: var(--surface-hover); color: var(--ink); }
.br-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--danger); color: var(--on-danger); font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; }

/* ---------- Field ---------- */
.br-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.br-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.br-label .br-req { color: var(--danger); margin-left: 2px; }
.br-input, .br-select { height: var(--control-md); padding: 0 10px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; min-width: 0; box-sizing: border-box; width: 100%; }
.br-input::placeholder { color: var(--ink-subtle); }
.br-select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.br-input[disabled], .br-input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
.br-field.is-error .br-input { border-color: var(--danger); background: var(--danger-soft); }
.br-help { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.br-field.is-error .br-help { color: var(--danger); }
.br-inputgroup { display: flex; align-items: center; gap: 6px; }
.br-inputgroup .br-sep { color: var(--ink-subtle); }
.br-affix { position: relative; display: flex; align-items: center; }
.br-affix .br-input { padding-left: 32px; }
.br-affix .br-icon { position: absolute; left: 10px; color: var(--ink-subtle); }
.br-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.br-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

/* ---------- Chips / Segmented (quick date) ---------- */
.br-seg { display: inline-flex; border: 1px solid var(--line-control); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.br-seg button { white-space: nowrap; height: calc(var(--control-md) - 2px); padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.br-seg button:last-child { border-right: 0; }
.br-seg button[aria-pressed="true"] { background: var(--brand-soft); color: var(--primary-text); }
.br-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); font-size: 13px; cursor: pointer; }
.br-chip.is-on { border-color: var(--primary); color: var(--primary-text); background: var(--brand-soft); }

/* ---------- SearchPanel ---------- */
.br-search { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 12px; align-items: end; }
.br-search .br-field--wide { grid-column: span 2; }
.br-search__actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: -2 / -1; }
.br-search__toggle { display: none; }
@media (max-width: 767.98px) {
  .br-search { grid-template-columns: 1fr 1fr; padding: 12px; }
  .br-search .br-field--wide { grid-column: 1 / -1; }
  .br-search__actions { grid-column: 1 / -1; }
  .br-search__actions .br-btn { flex: 1; height: var(--control-lg); }
  .br-search.is-collapsed > .br-field:not(.br-field--keep) { display: none; }
  .br-search__toggle { display: inline-flex; }
}

/* ---------- StatusBadge ---------- */
.br-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--st-cncl-bg); color: var(--st-cncl); }
.br-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.br-badge--req { background: var(--st-req-bg); color: var(--st-req); }
.br-badge--req::before { background: var(--st-req-dot); }
.br-badge--rcp { background: var(--st-rcp-bg); color: var(--st-rcp); }
.br-badge--rcp::before { background: var(--st-rcp-dot); }
.br-badge--pend { background: var(--st-pend-bg); color: var(--st-pend); }
.br-badge--pend::before { background: var(--st-pend-dot); }
.br-badge--cmplt { background: var(--st-cmplt-bg); color: var(--st-cmplt); }
.br-badge--cmplt::before { background: var(--st-cmplt-dot); }
.br-badge--plain::before { display: none; }

/* ---------- StatFilter (status counters that filter) ---------- */
.br-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.br-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; }
.br-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.br-stat__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); display: flex; align-items: center; justify-content: space-between; }
.br-stat__value { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.br-stat__value small { font-size: 13px; font-weight: 400; color: var(--ink-muted); margin-left: 2px; }
.br-stat:hover { background: var(--surface-hover); }
.br-stat[aria-pressed="true"] { border-color: var(--primary); background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--primary); }
.br-stat--req::before { background: var(--st-req-dot); }
.br-stat--rcp::before { background: var(--st-rcp-dot); }
.br-stat--pend::before { background: var(--st-pend-dot); }
.br-stat--cmplt::before { background: var(--st-cmplt-dot); }
.br-stat--all::before { background: var(--brand); }
@media (max-width: 767.98px) {
  .br-stats { grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 6px; overflow-x: auto; }
  .br-stat { padding: 8px 8px 8px 10px; }
  .br-stat__value { font-size: 18px; line-height: 24px; }
  .br-stat__label { font-size: 12px; }
}

/* ---------- AmountSummary ---------- */
.br-amounts { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.br-amount { flex: 1 1 140px; padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.br-amount:last-child { border-right: 0; }
.br-amount__label { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.br-amount__value { font-size: 18px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amt-billing); white-space: nowrap; }
.br-amount__value small { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 2px; }
.br-amount--payment .br-amount__value { color: var(--amt-payment); }
.br-amount--fee .br-amount__value { color: var(--amt-fee); }
.br-amount .is-negative { color: var(--danger); }
@media (max-width: 767.98px) {
  .br-amount { flex: 1 1 50%; padding: 10px 12px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
  .br-amount:nth-child(2n) { border-right: 0; }
}

/* ---------- DataGrid (skin for TOAST UI Grid; same classes for plain tables) ---------- */
.br-grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.br-grid__toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.br-grid__title { font-weight: 700; font-size: 14px; }
.br-grid__meta { font-size: 12px; color: var(--ink-muted); }
.br-grid__spacer { flex: 1; }
.br-grid__scroll { overflow: auto; }
.br-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; }
.br-table th { position: sticky; top: 0; z-index: 1; height: var(--row-height); padding: 0 12px; background: var(--surface-sunken); color: var(--ink-muted); font-weight: 500; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.br-table td { height: var(--row-height); padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.br-table tbody tr:hover td { background: var(--surface-hover); }
.br-table tbody tr.is-selected td { background: var(--surface-selected); }
.br-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.br-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.br-table .is-center { text-align: center; }
.br-table .is-sub { color: var(--ink-muted); }
.br-table .is-changed { color: var(--danger); font-weight: 500; }
.br-table tfoot td { background: var(--surface-sunken); font-weight: 700; border-bottom: 0; }
.br-table .br-pin { position: sticky; left: 0; background: inherit; }
.br-grid--compact .br-table td, .br-grid--compact .br-table th { height: var(--row-height-compact); padding: 0 8px; }
.br-grid__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.br-pager { display: flex; gap: 2px; }
.br-pager button { min-width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; cursor: pointer; }
.br-pager button[aria-current="page"] { background: var(--primary); color: var(--on-primary); font-weight: 700; }

/* ---------- Layout: AppShell / Sidebar / Header / PageHeader ---------- */
.br-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--header-height) 1fr; min-height: 100%; background: var(--bg); }
.br-sidebar { grid-row: 1 / -1; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.br-sidebar__brand { height: var(--header-height); display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); }
.br-sidebar__brand img { height: 26px; }
.br-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.br-nav__group { margin-top: 12px; padding: 0 10px 4px; font-size: 11px; line-height: 16px; font-weight: 700; color: var(--ink-muted); letter-spacing: .02em; }
.br-nav__group:first-child { margin-top: 0; }
.br-nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.br-nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.br-nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--primary-text); font-weight: 700; }
.br-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--brand); }
.br-nav-item .br-count { position: static; margin-left: auto; }
.br-sidebar.is-collapsed { width: var(--sidebar-collapsed); }
.br-sidebar.is-collapsed .br-nav-item { justify-content: center; padding: 0; }
.br-sidebar.is-collapsed .br-nav-item span, .br-sidebar.is-collapsed .br-nav__group { display: none; }
.br-header { display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); height: var(--header-height); box-sizing: border-box; }
.br-header__menu { display: none; }
.br-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.br-crumb b { color: var(--ink); font-weight: 500; }
.br-header__search { margin-left: auto; width: 280px; }
.br-user { display: flex; align-items: center; gap: 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.br-avatar { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--primary-text); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.br-user__name { font-size: 13px; font-weight: 500; line-height: 16px; }
.br-user__role { font-size: 11px; color: var(--ink-muted); line-height: 14px; }
.br-main { padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.br-pagehead { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.br-pagehead__title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.br-pagehead__desc { font-size: 13px; color: var(--ink-muted); margin: 2px 0 0; }
/* 한글 문장은 단어 단위로 줄바꿈 ("접수 / 합니다" 처럼 단어 중간에서 끊기지 않게) */
.br-pagehead__title, .br-pagehead__desc, .br-empty, .br-portal__notice, .br-formbar__msg, .br-formsec__title, .br-menu__empty { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.br-pagehead__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 991.98px) {
  .br-shell { grid-template-columns: var(--sidebar-collapsed) 1fr; }
  .br-shell .br-sidebar .br-nav-item span, .br-shell .br-sidebar .br-nav__group { display: none; }
  .br-header__search { display: none; }
}
@media (max-width: 767.98px) {
  .br-shell { grid-template-columns: 1fr; }
  .br-shell > .br-sidebar { display: none; }
  .br-header { padding: 0 8px 0 4px; }
  .br-header__menu { display: inline-flex; }
  .br-user__meta { display: none; }
  .br-main { padding: 12px 12px 88px; }
  .br-pagehead__title { font-size: 18px; line-height: 24px; }
  .br-pagehead__actions .br-btn:not(.br-btn--primary) { display: none; }
}

/* ---------- Modal / Drawer ---------- */
.br-modal { width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.br-modal__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.br-modal__title { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0; }
.br-modal__head .br-iconbtn { margin-left: auto; }
.br-modal__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.br-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-sunken); }
.br-scrim { background: var(--overlay); padding: 24px; display: grid; place-items: center; }
.br-summary { display: grid; grid-template-columns: minmax(72px, max-content) 1fr; gap: 6px 12px; font-size: 13px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.br-summary dt { color: var(--ink-muted); white-space: nowrap; }
.br-summary dd { margin: 0; color: var(--ink); font-weight: 500; }
.br-drawer { width: 420px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.br-drawer__section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.br-drawer__section h4 { margin: 0 0 10px; font-size: 14px; line-height: 20px; font-weight: 700; }
.br-route { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; }
.br-route__pin { width: 20px; height: 20px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.br-route__pin--from { background: var(--primary); color: var(--on-primary); }
.br-route__pin--to { background: var(--ink); color: var(--surface); }
.br-route__line { width: 2px; margin: 0 auto; background: var(--line); min-height: 18px; }
.br-route__place { font-weight: 500; }
.br-route__addr { font-size: 12px; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .br-modal { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .br-scrim { place-items: end stretch; padding: 0; }
  .br-modal__foot .br-btn { flex: 1; height: var(--control-lg); }
  .br-drawer { width: 100%; border-left: 0; }
}

/* ---------- Tabs ---------- */
.br-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.br-tab { position: relative; height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.br-tab[aria-selected="true"] { color: var(--primary-text); font-weight: 700; }
.br-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--primary); }
.br-tab .br-tab__n { margin-left: 4px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- DispatchCard (mobile list item) ---------- */
.br-dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.br-dcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.br-dcard--req::before { background: var(--st-req-dot); }
.br-dcard--rcp::before { background: var(--st-rcp-dot); }
.br-dcard--pend::before { background: var(--st-pend-dot); }
.br-dcard--cmplt::before { background: var(--st-cmplt-dot); }
.br-dcard__top { display: flex; align-items: center; gap: 8px; }
.br-dcard__client { font-weight: 700; font-size: 15px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-dcard__time { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-dcard__route { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.br-dcard__route .br-icon { color: var(--ink-subtle); }
.br-dcard__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-muted); }
.br-dcard__meta b { color: var(--ink); font-weight: 500; }
.br-dcard__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.br-dcard__amt { font-size: 13px; font-variant-numeric: tabular-nums; }
.br-dcard__amt b { font-size: 15px; }
.br-dcard__foot .br-btn { margin-left: auto; }

/* ---------- ActionBar (mobile bottom) ---------- */
.br-actionbar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(16,24,40,.06); }
.br-actionbar .br-btn { height: var(--control-lg); flex: 1; }
.br-actionbar .br-btn--primary { flex: 2; }
.br-datenav { display: flex; align-items: center; gap: 4px; }
.br-datenav__label { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; padding: 0 6px; }

/* ---------- Toast / Push ---------- */
.br-toast { display: flex; gap: 10px; align-items: flex-start; width: 340px; max-width: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); box-sizing: border-box; }
.br-toast__icon { width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--primary-text); }
.br-toast--req .br-toast__icon { background: var(--st-req-bg); color: var(--st-req); }
.br-toast--ok .br-toast__icon { background: var(--st-cmplt-bg); color: var(--st-cmplt); }
.br-toast__title { font-weight: 700; font-size: 14px; line-height: 20px; }
.br-toast__body { font-size: 13px; color: var(--ink-muted); line-height: 18px; }
.br-toast__time { font-size: 12px; color: var(--ink-subtle); margin-left: auto; white-space: nowrap; }

/* ---------- WorkMemo panel ---------- */
.br-memo { width: 340px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; }
.br-memo__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.br-memo__head h4 { margin: 0; font-size: 14px; font-weight: 700; }
.br-memo__list { display: flex; flex-direction: column; }
.br-memo__item { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.br-memo__item.is-pinned { background: var(--surface-sunken); }
.br-memo__item.is-unread .br-memo__text { font-weight: 500; }
.br-memo__text { font-size: 13px; line-height: 18px; }
.br-memo__meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-muted); }
.br-tag { font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); }

/* ---------- Logo theme swap ---------- */
.br-logo--dark { display: none; }
[data-theme="dark"] .br-logo--light { display: none; }
[data-theme="dark"] .br-logo--dark { display: block; }