/* 화면 고유 스타일 — 원래 index.html 안에 있던 <style>입니다. ui.css(공통 토큰·레이아웃)보다 먼저 읽힙니다. */

  /* 다크 팔레트 — 두 경로로 적용됩니다: ① 시스템이 다크이고 수동 라이트가 아닐 때,
     ② 수동 다크. 값을 바꿀 땐 두 블록을 함께 고치세요. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme=light]){--bg:#14171a;--card:#1c2024;--line:#2c3238;--ink:#e8eaed;--mut:#98a1ac;
      --accent:#6b9bff;--warn:#f0a35e;--danger:#ff7676;--ok:#4cc98a;
      --whoBgL:55%;--whoBgA:18%;--whoTxS:75%;--whoTxL:70%;--whoBdL:62%;
      --logo-bg:#fff;}
  }
  :root[data-theme=dark]{--bg:#14171a;--card:#1c2024;--line:#2c3238;--ink:#e8eaed;--mut:#98a1ac;
    --accent:#6b9bff;--warn:#f0a35e;--danger:#ff7676;--ok:#4cc98a;
    --whoBgL:55%;--whoBgA:18%;--whoTxS:75%;--whoTxL:70%;--whoBdL:62%;
    --logo-bg:#fff;}
  *{box-sizing:border-box}
  body{margin:0;
    font:14px/1.55 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif}
  header{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--card);
    display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  h1{font-size:17px;margin:0;font-weight:650}

  .tabs{margin-bottom:16px;border-bottom:1px solid var(--line)}
  .tab{cursor:pointer;background:none;
    font:inherit;border-bottom:2px solid transparent;margin-bottom:-1px}
  .tab.on{border-bottom-color:var(--accent)}

  /* ---- 요약 화면 ----
     칸을 크게 셋으로 나눕니다: 급한 것 / 오늘 / 손이 필요한 것.
     숫자만 늘어놓지 않는 것이 이 화면의 규칙입니다 — "3건"은 무엇을 해야 할지
     말해주지 않습니다. 급한 것은 이름까지 보이고, 나머지는 눌러 갈 자리를 가리킵니다. */
  .sum-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
  .sum-h{border-bottom:1px solid var(--line);display:flex;}

  .sum-h .n{color:var(--mut);font-size:12px;margin-left:auto}
  /* 한 줄 = 한 건. 눌러서 그 카드로 갑니다. */
  .sum-r{display:flex;gap:9px;align-items:baseline;cursor:pointer;
    border-bottom:1px solid var(--line);font-size:12.5px}
  .sum-r:last-child{border-bottom:none}

  .sum-r .cu{font-weight:600;flex:none;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sum-r .bd{color:var(--mut);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 숫자 타일. 0이면 흐리게 — 0은 대개 좋은 소식이라 눈을 끌 이유가 없습니다. */
  .sum-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;
    background:var(--line)}
  .sum-n > *{background:var(--card);text-align:center;border:none;
    font:inherit;color:var(--ink);cursor:pointer}

  .sum-n b{display:block;font-variant-numeric:tabular-nums;line-height:1.25}
  .sum-n span{display:block;color:var(--mut);font-size:11.5px;margin-top:2px}
  .sum-n .zero b{color:var(--mut);font-weight:500}
  .sum-n .hot b{color:var(--danger)}
  .sum-n .warm b{color:var(--warn)}
  /* 아무것도 급하지 않을 때. 빈 칸으로 두지 않습니다 — "없다"도 알고 싶은 소식입니다. */
  .sum-ok{color:var(--mut);font-size:12.5px}
  /* 단계별 한 줄. 보드를 열지 않아도 어디에 몰렸는지 보입니다. */
  .sum-st{display:flex;gap:1px;background:var(--line)}
  .sum-st > button{flex:1;background:var(--card);border:none;font:inherit;color:var(--ink);
    padding:11px 6px;cursor:pointer;min-width:0}

  .sum-st b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
  .sum-st span{display:block;color:var(--mut);font-size:11px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card{border:1px solid var(--line);overflow:hidden}
  .bar{display:flex;border-bottom:1px solid var(--line);flex-wrap:wrap}
  input,select{padding:8px 11px;border:1px solid var(--line);border-radius:7px;
    background:var(--bg);color:var(--ink);font:inherit;min-width:0}
  button{border:none;font:inherit;cursor:pointer}

  button.ghost{background:transparent;color:var(--danger);font-size:12px}
  /* ghost의 붉은색은 위험 동작용 — 단순 선택지(수입/수출 등)는 quiet로 회색 처리 */
  button.ghost.quiet{color:var(--mut)}
  /* 되돌릴 수 없는 동작. 저장 버튼과 색으로 구분해 잘못 누르는 것을 줄입니다. */
  button.danger{background:var(--danger)}
  button:disabled{opacity:.5;cursor:default}
  table{width:100%;border-collapse:collapse}
  th{text-align:left;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
  td{border-bottom:1px solid var(--line);white-space:nowrap}
  tr:last-child td{border-bottom:none}
  .vn{font-weight:600}
  .mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12.5px}
  .pill{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;
    background:var(--bg);border:1px solid var(--line);color:var(--mut)}
  /* 손으로 넣는 번호 밑에 붙는 형식 안내. 입력칸 옆에서 조용히 있어야 하는 글이라
     보조색으로 두고, 수출로 갈리는 순간에만 강조가 붙습니다(.num-hint.exp). */
  .num-hint{color:var(--mut);font-size:11.5px;line-height:1.55;margin-top:6px}
  .num-hint b{color:var(--ink);font-weight:600}
  .num-hint.exp b{color:var(--accent)}
  .num-hint .mono{font-size:11.5px}
  .up{color:var(--danger);font-weight:600}
  .down{color:var(--ok);font-weight:600}
  .empty{text-align:center;color:var(--mut)}
  .scroll{overflow-x:auto}
  .hide{display:none}
  label{display:flex;flex-direction:column;}
  label input{font-weight:400;color:var(--ink)}
  pre{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:11px 13px;
    overflow-x:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;margin:8px 0 0}
  /* 칸반 */
  /* 칸 수는 보드마다 다릅니다(수입 5·수출 4·문의 3). --cols를 그릴 때 넣습니다 —
     5로 박아 두면 수출 보드에 빈 칸이 남고, 목록 밖 상태로 임시 칸이 생기면
     여섯 번째가 다음 줄로 내려갑니다. */
  .board{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(210px,1fr));overflow-x:auto}
  .col{border:1px solid var(--line);
    display:flex;flex-direction:column;}
  .col.over{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
  .col-h{border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;}
  .col-h .n{color:var(--mut);font-weight:550}
  .col-b{display:flex;flex-direction:column;flex:1}
  .kc{background:var(--bg);border:1px solid var(--line);border-radius:8px;
    cursor:grab;font-size:12.5px;position:relative}
  .kc:active{cursor:grabbing}
  .kc.drag{opacity:.4}
  .kc-open{display:block;color:inherit;
    text-decoration:none;cursor:inherit}
  .kc-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* 위계: 기업명이 주(크고 진하게), 번호는 부(작고 흐린 모노) — 같은 굵기·크기면
     보드에서 어느 쪽을 읽어야 할지 눈이 헤맵니다. */
  .kc .bl{font-family:ui-monospace,SFMono-Regular,monospace;font-weight:500;font-size:11.5px;
    color:var(--mut);}
  .kc .bl.miss{color:var(--warn);font-family:inherit;font-size:11.5px}
  /* 회사 표기 — 카드의 머리글("의뢰처[화주]"). 번호와 달리 기업명은 가변폭이 읽기 좋습니다. */
  .kc .cust{overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .kc .cust.guess{color:var(--mut);font-weight:550;font-size:12.5px}
  /* 카드의 유니패스 진행상태 한 줄 — 통관이 어디까지 왔는지 보드에서 바로 보입니다. */
  .kuni{color:var(--ok);font-size:11px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* 수입신고 수리 뒤 한 달이 지나도록 보드에 남은 건 — 진행(초록) 아래 주황 띠로
     "이제 내릴 때"를 알립니다. 카드 왼쪽 테두리도 같은 색이라 긴 완료 칸을 훑어도 보입니다. */
  .kstale{color:var(--warn);font-size:11px;font-weight:600;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .kc.stale-accept{border-left:3px solid var(--warn)}
  .kc .mt{color:var(--mut);font-size:11px;display:flex;flex-wrap:wrap;align-items:center;}
  /* 테스트용 목업 카드. 실제 의뢰와 헷갈리지 않게 카드 맨 위에 띠로 답니다. */
  .tst{display:inline-block;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:700;
    letter-spacing:.02em;background:var(--warn);margin-bottom:5px}
  .kc.is-test{border-style:dashed;opacity:.85}
  /* 종결 버튼 — 마우스를 올렸을 때만 나타납니다. 늘 보이면 보드가 버튼 밭이 되고,
     카드를 끌어 옮기려다 누르는 일이 늘어납니다. 되돌리기는 토스트에 답니다. */
  .kc-arch{position:absolute;padding:2px 8px;font-size:10.5px;
    font-weight:600;background:var(--card);color:var(--mut);border:1px solid var(--line);
    opacity:0;transition:opacity .12s;z-index:1}
  .kc:hover .kc-arch,.kc-arch:focus-visible{opacity:1}
  .kc-arch:hover{color:var(--ink);border-color:var(--mut)}
  /* 여러 건 고르는 중 — 체크박스가 들어설 자리를 카드 왼쪽에 냅니다.
     평소 보드에는 없는 여백이라, 지금이 "고르는 중"이라는 것이 카드 모양에서
     바로 보입니다. 체크박스만 얹고 여백을 안 내면 기업명 앞글자를 가립니다. */
  .kc.pick{padding-left:42px;cursor:pointer}
  .kc-pick-hit{position:absolute;top:0;left:0;width:42px;height:44px;display:grid;
    place-items:center;z-index:1;cursor:pointer}
  .kc-pick{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--accent)}
  .kc.picked{border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
  /* 칸 머리의 "칸 전체" — 완료 칸처럼 한 칸이 통째로 끝난 자리를 위한 것입니다. */
  .col-pick{padding:1px 7px;font-size:10.5px;font-weight:600;margin-left:auto;margin-right:7px}
  /* 고른 건수와 실행 버튼. 화면 아래에 붙여 둡니다 — 보드 위에 두면 칸을
     스크롤해 내려간 사이 버튼이 화면 밖으로 나갑니다. */
  #pickbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
    display:flex;gap:8px;align-items:center;background:var(--card);
    border:1px solid var(--line);border-radius:24px;padding:8px 10px 8px 16px;
    box-shadow:0 8px 26px rgba(0,0,0,.32);font-size:12.5px;max-width:92vw}
  #pickbar.hide{display:none}
  #pick-n{color:var(--mut);font-weight:600;white-space:nowrap}
  /* 종결한 카드. 검색 결과와 종결함에만 나옵니다 — 보드의 산 카드와 한눈에
     갈라져야 해서 흐리게 깔고 표를 답니다. */
  .kc.arch{opacity:.62;border-style:dashed}
  .kc.arch:hover{opacity:.85}
  .abadge{display:inline-block;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:650;
    background:color-mix(in srgb,var(--mut) 18%,transparent);color:var(--mut)}
  .src{display:inline-block;padding:0 5px;border-radius:4px;font-size:10px;
    background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
  .src.manual{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
  .src.attachment{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
  /* 카드 상세 */
  #modal,#nmodal,#tmodal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;
    display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
  #modal.hide,#nmodal.hide,#tmodal.hide{display:none}
  /* 저장 확인 토스트 — 저장 후 화면이 다시 그려져도 살아남도록 문서 위에 띄웁니다. */
  #toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-8px);
    z-index:100;background:var(--ok);font-size:12.5px;font-weight:650;
    padding:8px 16px;
    opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:82vw;overflow:hidden;text-overflow:ellipsis}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* 되돌리기가 달린 토스트만 클릭을 받습니다 — 평소에는 화면을 가리지 않아야 합니다. */
  #toast.act{pointer-events:auto}
  #toast button{background:rgba(255,255,255,.22);color:#fff;font-size:11.5px;font-weight:700;
    padding:3px 10px;border-radius:12px;margin-left:10px}
  /* 카드 상세의 ⋯ 메뉴 — 합치기·삭제는 가끔 쓰는 위험 작업이라 본문 대신
     헤더의 팝업 패널에 둡니다. */
  #cardmenu{position:absolute;top:34px;right:0;width:300px;max-width:78vw;z-index:5;
    background:var(--bg);border:1px solid var(--line);border-radius:10px;
    padding:13px;box-shadow:0 10px 28px rgba(0,0,0,.35);text-align:left;cursor:default}
  #cardmenu.hide{display:none}
  .cm-t{font-weight:650;font-size:12.5px;margin-bottom:4px;color:var(--ink)}
  .cm-d{color:var(--mut);font-size:11.5px;line-height:1.5}
  .cm-sep{border-top:1px solid var(--line);margin:12px 0}
  /* 다른 카드에 합치기 창(#mmodal)의 겹침·여백은 ui.css가 다른 모달과 함께 정합니다 —
     카드 상세(#modal) 위에 뜨므로 z-index만 그보다 높습니다. 여기는 창 안쪽만 그립니다. */
  #mg-q{width:100%}
  /* 기본 label은 세로(입력칸 제목용)라 가로로 되돌립니다. */
  .mg-arch-w{flex-direction:row;align-items:center;gap:6px;margin-top:8px;font-size:12px;
    font-weight:500;color:var(--mut);cursor:pointer}
  #mg-arch{width:14px;height:14px;margin:0;padding:0;accent-color:var(--accent);flex:none}
  .pk-grp{color:var(--mut);font-size:11.5px;font-weight:650;margin:14px 0 2px;
    display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
  .pk-grp:first-child{margin-top:0}
  /* 후보 한 장 — 행 전체가 누를 수 있는 자리입니다. 짚은 행(.sel)은 강조색 테두리.
     합치기 창(#mg-list)과 할 일 추가의 건 고르기(#nt-list)가 같은 행을 씁니다. */
  .pk-row{display:flex;gap:10px;align-items:center;padding:8px 10px;margin-top:6px;
    border:1px solid var(--line);border-radius:8px;cursor:pointer}
  .pk-row:hover,.pk-row.sel{border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .pk-main{flex:1;min-width:0}
  .pk-l1{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;font-size:12.5px}
  .pk-l1 b{font-weight:650}
  .pk-l2{color:var(--mut);font-size:11.5px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 닮은 이유 칩 — 근거라서 초록, 걸리는 점은 경고색. */
  .pk-why{display:inline-block;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:650;
    background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
  .pk-why.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
  .mg-go{flex:none;font-size:12px;padding:5px 10px}
  .mg-open{flex:none;color:var(--mut);font-size:11.5px;text-decoration:none;white-space:nowrap}
  .mg-open:hover{color:var(--accent);text-decoration:underline}
  .pk-empty{color:var(--mut);font-size:12px;padding:14px 0;text-align:center;line-height:1.5}
  /* 확인 단계 — 사라질 카드와 남을 카드를 나란히 놓고, 무엇이 옮겨지는지 적습니다. */
  .mg-pair{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:baseline;font-size:12.5px}
  .mg-pair .k{color:var(--mut);font-size:11.5px;white-space:nowrap}
  .mg-cf{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
    font-size:12.5px;line-height:1.6}
  .mg-cf ul{margin:0;padding-left:18px}
  #mg-confirm:focus{outline:none}
  /* 할 일 추가 — 건 고르기 목록. 합치기 창의 후보 행(.pk-row)을 같이 씁니다.
     여섯 줄쯤 보이고 그 아래는 스크롤 — 훑어서 찾는 대신 검색으로 좁히는 것이 원칙입니다. */
  #nt-list{max-height:300px;overflow:auto;margin-top:9px}
  .pk-chk{flex:none;width:14px;color:var(--accent);font-weight:700;opacity:0}
  .pk-row.sel .pk-chk{opacity:1}
  .pk-row.none .pk-l1{color:var(--mut)}
  /* 카드 직접 추가 폼 */
  .nf{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .nf-w{margin-top:11px}
  .sheet{background:var(--card);border:1px solid var(--line);
    width:100%;max-width:720px;}
  .sh-h{border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .sh-s{border-bottom:1px solid var(--line)}
  .sh-s:last-child{border-bottom:none}
  /* 섹션 제목 — 본문 글자색(--ink: 다크에선 흰색, 라이트에선 검정)으로 또렷하게 */
  .sh-t{font-size:14px;color:var(--ink);font-weight:650;margin-bottom:10px}
  /* 메일 히스토리 — 지메일식 스레드 아코디언. 접힌 행은 발신자+한 줄 미리보기,
     펼치면 본문·첨부가 그 자리에서 열립니다. 최신 메일만 기본으로 펼칩니다. */
  .mh{border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .mh-i{border-bottom:1px solid var(--line)}
  .mh-i:last-child{border-bottom:none}
  .mh-hd{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;min-width:0}
  .mh-hd:hover{background:color-mix(in srgb, var(--ink) 4%, transparent)}
  .mh-av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;
    justify-content:center;font-weight:700;font-size:13px;}
  .mh-meta{flex:1;min-width:0}
  .mh-top{display:flex;gap:8px;align-items:baseline;min-width:0}
  .mh-from{font-weight:650;font-size:12.5px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mh-date{color:var(--mut);font-size:11px;white-space:nowrap;margin-left:auto;flex:none}
  .mh-snip{color:var(--mut);font-size:11.5px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-top:2px}
  .mh-x{display:none;padding:0 12px 12px 54px}
  .mh-i.open .mh-x{display:block}
  .mh-i.open .mh-snip{display:none}
  .mh-i.open .mh-hd{padding-bottom:6px}
  .mh-addr{color:var(--mut);font-size:11px;margin-bottom:7px;word-break:break-all;line-height:1.55}
  .mh-l{display:inline-block;min-width:50px;opacity:.75;flex:none}
  .mh-text{font-size:12.5px;white-space:pre-wrap;line-height:1.55;color:var(--ink);
    max-height:420px;overflow-y:auto}
  /* pre-wrap은 사용자가 친 줄바꿈을 보존하는 본문(.n-body)에만 겁니다 —
     컨테이너에 걸면 HTML 템플릿의 들여쓰기·줄바꿈까지 여백으로 그려져
     한 줄 메모가 거대한 빈 상자가 됩니다. */
  .note{background:var(--bg);border:1px solid var(--line);border-radius:7px;
    padding:9px 11px;font-size:12.5px;margin-bottom:7px}
  .n-body{white-space:pre-wrap}
  .note-m{color:var(--mut);font-size:11px;margin-top:5px;display:flex;
    justify-content:space-between;align-items:center}
  textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
    background:var(--bg);color:var(--ink);font:inherit;resize:vertical;min-height:62px}
  .x{background:none;border:none;color:var(--mut);font-size:22px;cursor:pointer;line-height:1}
  /* 담당자 칩 — 사람마다 고정 색(hue)을 씁니다. 색은 JS가 이름 해시로 --wh에 넣고,
     명도·채도는 :root의 테마 변수(--who*)가 정하므로 라이트/다크를 자동으로 따라갑니다. */
  .who{display:inline-block;font-size:10.5px;
    --wh:212;background:hsl(var(--wh) 65% var(--whoBgL) / var(--whoBgA));}
  /* 자동 유추된 담당자 — 점선으로 "시스템의 추측"임을 구분합니다. 사람이 저장하면 실선으로 확정. */
  .who.auto{background:transparent;border:1px dashed hsl(var(--wh) 60% var(--whoBdL) / .6)}
  /* "이 건만" 지정 — 이력에 반영되지 않는 예외라 칩에 그렇게 적어 둡니다.
     색은 그대로 둡니다: 누가 맡는지가 먼저 읽혀야 하고, 예외는 그다음입니다. */
  .who.once i{font-style:normal;font-weight:500;opacity:.72;margin-left:4px;
    padding-left:4px;border-left:1px solid currentColor}
  /* 담당자 예외 체크박스 (카드 상세). 전역 label이 세로 배치라 가로로 되돌립니다. */
  .who-once{display:flex;flex-direction:row;gap:7px;align-items:center;margin-top:8px;
    font-size:11.5px;color:var(--mut);font-weight:400;cursor:pointer}
  .who-once input[type=checkbox]{margin:0;accent-color:var(--accent);flex:none}
  /* 어긋난 신호 — 다른 신호가 다른 사람을 가리킵니다.
     경고색을 쓰되 담당자 칩보다 작고 옅게 둡니다. 이건 "틀렸다"가 아니라
     "한 번 봐달라"이고, 실제로 지목이 맞는 경우가 더 많습니다(61장 중 47장). */
  .who-alt{display:inline-block;padding:0 5px;border-radius:4px;font-size:10px;
    font-weight:600;cursor:help;
    background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
  /* 미배정(List 그룹 머리글)은 사람이 아니므로 무채색 */
  .who.none{background:color-mix(in srgb,var(--mut) 14%,transparent);color:var(--mut)}
  /* List 탭 그룹 머리글용 큰 칩 — 사람 이름이 그룹 제목이라 잘 보여야 합니다 */
  .who.lg{font-size:13.5px;padding:2px 11px;border-radius:6px}
  /* 할 일 목록 (카드 상세). 전역 label이 세로 배치라 가로로 되돌립니다. */
  .todo{display:flex;flex-direction:row;gap:9px;align-items:flex-start;padding:6px 0;
    font-size:13px;color:var(--ink);font-weight:400;cursor:pointer}
  .todo input[type=checkbox]{margin:3px 0 0;accent-color:var(--accent);flex:none}
  .todo .tb{flex:1}
  .todo.done .tb{text-decoration:line-through;color:var(--mut)}
  .todo .x{font-size:15px;line-height:1.3;visibility:hidden}
  .todo:hover .x{visibility:visible}
  .todo-src{flex:none;font-size:9.5px;color:var(--mut);border:1px solid var(--line);
    border-radius:4px;padding:0 4px;margin-top:2px}
  /* Todo 탭 — 카드에 흩어진 할 일을 한 줄씩 모아 봅니다.
     줄을 누르면 그 카드가 열리고(List 탭과 같은 규칙), 완료는 체크박스로만 처리합니다 —
     무슨 건인지 보려고 누른 것이 완료로 처리되면 안 됩니다. */
  .tdo{display:flex;gap:10px;align-items:flex-start;
    border-bottom:1px solid var(--line);cursor:default}
  .tdo:last-child{border-bottom:none}
  .tdo:hover{background:var(--bg)}
  .tdo-check{display:grid;width:44px;height:44px;place-items:center;flex:none;
    margin:-6px -6px -6px -9px;cursor:pointer}
  .tdo-check > input[type=checkbox]{width:18px;height:18px;margin:0;
    accent-color:var(--accent);cursor:pointer}
  .tdo .tb{flex:1;min-width:0;font-size:13px}
  .tdo-open{border-radius:6px;cursor:pointer}
  .tdo.movable{cursor:grab}
  .tdo-open:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
  .tdo.done .tb{text-decoration:line-through;color:var(--mut)}
  /* 이 할 일이 어느 건인지 — 기업·번호·단계. 본문보다 작게 두어 먼저 읽히지 않게 합니다. */
  .tdo .tm{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:3px;
    color:var(--mut);font-size:11.5px}
  .tdo .tm .cu{color:var(--ink);font-weight:550}
  .tdo.done .tm .cu{color:var(--mut);font-weight:400}
  .tdo .tm .tst,.tdo .tm .todo-src{margin:0}
  /* 마감 — 묵은 정도(.age)와 나란히 서지만 다른 것을 말합니다("언제까지"). 같은
     색 체계를 쓰되 테두리를 둘러 한눈에 갈립니다. 색이 붙는 것은 사흘 안쪽뿐이라
     대부분의 마감은 회색으로 조용히 서 있습니다 — 다 빨가면 아무것도 안 급합니다. */
  .due{border:1px solid var(--line);border-radius:5px;padding:0 5px;
    font-size:11px;color:var(--mut);white-space:nowrap}
  .due.w{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
  .due.d{color:var(--danger);font-weight:600;
    border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
  /* 마감일 입력칸. 값이 없을 때는 자리만 지키고 조용히 있어야 합니다 —
     대부분의 할 일에는 마감이 없어서, 빈 칸이 눈에 띄면 목록이 소란스러워집니다. */
  .due-in{font-size:11.5px;padding:2px 5px;width:auto;flex:none;color:var(--mut)}
  .due-in:not([value=""]){color:var(--ink)}
  /* Todo 칸반 — 할 일·하는 중·완료를 가로로 세운 배치입니다.
     컬럼마다 따로 스크롤하던 것을 걷었습니다. 스크롤바가 안에 또 있으면 바깥을
     굴려도 컬럼이 안 움직이고, 컬럼 안에 마우스를 올려야 비로소 내려갑니다 —
     끌어 옮기는 보드에서는 특히 성가십니다(잡은 채로 아래 칸을 못 봅니다).
     대신 '할 일' 칸이 길어지면 페이지 전체가 그만큼 길어집니다. Kanban 탭이
     처음부터 그렇게 동작하고 있어서 두 보드가 같은 규칙을 씁니다. */
  .todo-board .col-b{padding:8px;gap:7px}
  /* 칸반에서는 할 일이 **카드**입니다. 종전에는 목록의 행(.tdo)을 그대로 세로줄만
     그어 쌓았는데, 그러면 표를 세로로 자른 것이지 보드가 아닙니다 — 실제로
     "목록이랑 다를 게 없다"는 말을 들었습니다. 컬럼 배경(--card) 위에 한 단
     낮은 바탕(--bg)을 얹어야 한 건 한 건이 덩어리로 잡힙니다. Kanban 탭의
     .kc와 같은 처리입니다.
     다만 grab 커서는 주지 않습니다. 여기서는 끌어 옮길 수 없고(담당자는 카드에서
     바꿉니다), 잡히는 모양을 하면 해보고 안 되는 실망이 됩니다. */
  .todo-board .tdo{padding:9px 10px;background:var(--bg);
    border:1px solid var(--line);border-radius:8px}
  .todo-board .tdo:last-child{border-bottom:1px solid var(--line)}
  .todo-board .tdo:hover{background:var(--card);border-color:var(--mut)}
  /* 상태 축에서만 잡힙니다. 다른 축에서는 옮길 것이 없으므로 커서도 주지
     않습니다 — 잡히는 모양을 해놓고 안 되면 그게 더 나쁩니다. */
  .todo-board .tdo.movable{cursor:grab}
  .todo-board .tdo.movable:active{cursor:grabbing}
  .todo-board .tdo.drag{opacity:.4}
  /* 완료 칸의 줄은 흐리게 — 이미 끝난 것이 눈을 끌 이유가 없습니다.
     다만 **자동 완료는 예외**입니다. 사람이 누른 적 없는 완료라 한 번은 눈에
     들어와야 하고, 아니면 되돌릴 기회가 영영 없습니다. */
  .todo-board .col[data-state="done"] .tdo{opacity:.62}
  .todo-board .col[data-state="done"] .tdo:has(.todo-src.auto){opacity:1}
  .todo-src.auto{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
  .todo-board .col-h{gap:7px}
  .tdo-none{padding:13px 11px;color:var(--mut);font-size:12px}
  /* 데일리 업무 일지 — 한 줄에 시각·종류·내용. 시각이 세로로 맞아야 하루가 읽힙니다. */
  .rp{display:flex;gap:9px;align-items:baseline;padding:5px 14px;font-size:12.5px;cursor:pointer}
  .rp:hover{background:var(--bg)}
  .rp .t{flex:none;color:var(--mut);font-size:11.5px;font-family:ui-monospace,monospace;
    font-variant-numeric:tabular-nums}
  .rp .k{flex:none;font-size:11px}
  /* 한 줄로 자릅니다 — 요약이 길면 한 건이 화면 절반을 먹고 하루가 안 읽힙니다.
     잘린 내용은 줄에 마우스를 올리면 전부 보이고, 복사한 일지에는 그대로 들어갑니다. */
  .rp .b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rp .cu{font-weight:550}
  /* 세 칸의 머리글 — Done · Todo · 특이사항. 갈래 머리글(.rp-h)보다 한 단 위라
     또렷해야 합니다. 아래 갈래가 하나뿐인 칸(Todo)에서는 .rp-h를 아예 그리지
     않으므로, 이 줄이 그 칸의 유일한 제목이 됩니다. */
  /* 칸마다 색이 다릅니다 — 끝낸 것(초록) · 할 것(파랑) · 눈여겨볼 것(주황).
     크기만으로도 갈리지만, 일지는 훑어 읽는 화면이라 색이 먼저 눈에 닿습니다.
     줄에 붙는 마감·묵은 정도 색과 겹치지 않게 제목에만 씁니다. */
  .rp-s{padding:16px 14px 6px;font-size:15px;font-weight:700;
    border-top:1px solid var(--line);margin-top:8px}
  .rp-s:first-child{border-top:none;margin-top:0;padding-top:12px}
  /* 칸 이름은 t- 를 붙입니다. 그냥 done/todo/note로 두면 카드 메모의 .note,
     할 일 줄의 .todo 규칙에 제목이 얻어걸립니다 — 실제로 '특이사항' 제목에
     메모 상자의 회색 판이 깔려 있었고 '다음날 체크'는 flex 줄이 돼 있었습니다. */
  .rp-s.t-done{color:var(--ok)}
  .rp-s.t-todo{color:var(--accent)}
  .rp-s.t-note{color:var(--warn)}
  /* 머리글 요약의 숫자도 같은 색을 씁니다 — 위아래가 같은 것을 가리킨다는 표시입니다. */
  .rp-sum .s-done b{color:var(--ok)}
  .rp-sum .s-todo b{color:var(--accent)}
  .rp-sum .s-note b{color:var(--warn)}
  .rp-h{padding:8px 14px 3px;color:var(--mut);font-size:10.5px;
    text-transform:uppercase;letter-spacing:.4px}
  /* Todo 칸의 마감. 시각이 서던 자리라 폭을 맞춥니다. */
  .rp .t.due{color:var(--mut)}
  .rp .t.due.w{color:var(--warn)}
  .rp .t.due.d{color:var(--danger);font-weight:600}
  /* 사람 머리글의 요약 — 숫자만 진하게 해서 훑을 때 눈에 먼저 들어오게 합니다. */
  .rp-sum{display:flex;gap:9px;flex-wrap:wrap;color:var(--mut);font-size:11.5px;margin-top:3px}
  .rp-sum b{color:var(--ink);font-weight:650}
  .rp-none{padding:8px 14px;color:var(--mut);font-size:12px}
  /* 도구줄의 한꺼번에 여닫기. ghost 버튼은 글자만 남는 모양이라, 이렇게 긴
     글자가 줄 끝에 서면 버튼이 아니라 설명문으로 읽힙니다 — 테두리를 답니다. */
  #rep-fold-all{border:1px solid var(--line);border-radius:7px;padding:6px 11px}
  #rep-fold-all:hover{border-color:var(--accent);color:var(--accent);opacity:1}
  /* 특이사항을 손으로 적는 칸. 조용히 있다가 손을 대면 또렷해집니다 —
     늘 떠 있는 입력칸이 진해 보이면 일지를 읽는 데 방해가 됩니다. */
  /* ---- 일지 집계표 ----
     사무소가 쓰는 서식 그대로입니다. 값은 전부 손으로 넣습니다 — 이 시스템은
     이 메일함으로 들어온 건만 알아서, 세어 채우면 실제의 몇 분의 일이 됩니다. */
  .rc{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
  .rc th,.rc td{border:1px solid var(--line);padding:0}
  .rc thead th{background:var(--bg);color:var(--mut);font-weight:600;
    padding:6px 8px;text-align:center;font-size:11.5px}
  .rc tbody th{background:var(--bg);color:var(--ink);font-weight:600;
    padding:6px 8px;text-align:center;width:19%}
  .rc thead th:nth-child(2),.rc thead th:nth-child(3){width:16%}
  .rc input{width:100%;border:none;background:none;border-radius:0;
    padding:6px 8px;font:inherit;font-size:12px;color:var(--ink);min-width:0}
  .rc input:focus{outline:2px solid var(--accent);outline-offset:-2px}
  /* 건수 칸은 가운데 정렬 — 서식이 그렇고, 훑을 때 자릿수가 맞아야 읽힙니다. */
  .rc input.n{text-align:center;font-variant-numeric:tabular-nums}
  /* 시스템이 센 값 — 칸 오른쪽 끝에 흐리게. 값이 아니라 참고이므로 입력칸
     바깥에 두고, 눈에 먼저 들어오지 않게 작고 흐립니다. 실제 신고량보다
     적게 잡히는 숫자라 이걸 그대로 옮겨 적으면 안 됩니다. */
  .rc td.wh{position:relative}
  .rc td.wh input{padding-right:26px}
  .rc-h{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    color:var(--mut);font-size:10.5px;font-variant-numeric:tabular-nums;
    pointer-events:none;opacity:.75}
  /* 자동으로 모인 줄 — **한 덩어리로 묶어** 접습니다.

     종전에는 머리글이 목록 위에 뜬 작은 글자여서, 아래 열한 줄이 그 머리글에
     매달려 있다는 것이 읽히지 않았습니다("버튼이 어디 있냐"는 말을 들었습니다).
     이 앱에는 이미 같은 몸짓의 상자가 있습니다 — 메일 히스토리 아코디언(.mh).
     같은 테두리·같은 머리글 줄을 씁니다: 화면에서 처음 보는 물건이 아니어야
     눌러 볼 마음이 듭니다.

     손글 상자와 같은 여백(14px)에 세웁니다 — 두 상자가 어긋나 있으면 아래쪽이
     딸린 것인지 별개인지 알 수 없습니다. 색은 넣지 않습니다: 손글 상자는
     칸 색을 옅게 깔아 눈에 먼저 닿아야 하고, 이쪽은 그 뒤를 받치는 자료입니다. */
  .rp-auto{margin:2px 14px 14px;border:1px solid var(--line);border-radius:9px;
    overflow:hidden}
  .rp-auto-h{display:flex;align-items:center;gap:7px;width:100%;
    padding:8px 11px;background:color-mix(in srgb,var(--ink) 3%,transparent);
    border:none;border-radius:0;border-bottom:1px solid var(--line);
    color:var(--mut);font:inherit;font-size:11.5px;font-weight:600;
    text-align:left;cursor:pointer}
  .rp-auto-h:hover{color:var(--ink);opacity:1;
    background:color-mix(in srgb,var(--ink) 6%,transparent)}
  /* 접히면 머리글만 남습니다 — 밑줄이 남으면 빈 상자에 선이 하나 떠 있습니다. */
  .rp-auto.fold .rp-auto-h{border-bottom:none}
  /* 건수는 알약으로. 접어도 무엇이 얼마나 숨었는지는 말해야 합니다 —
     "접었다"와 "기록이 없다"는 다른 말입니다. */
  .rp-auto-n{padding:1px 7px;border-radius:999px;font-weight:650;
    background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
  /* 여닫는 글자는 줄 오른쪽 끝. 다음에 할 일을 적습니다(접기/펼치기). */
  .rp-auto-t{margin-left:auto;color:var(--mut);font-weight:600}
  .rp-auto-h:hover .rp-auto-t{color:var(--accent)}
  /* 화살표 — 접히면 오른쪽을 가리킵니다(메일 스레드와 같은 몸짓). */
  .rp-auto-c{font-size:10px;line-height:1;opacity:.8;transition:transform .15s}
  .rp-auto.fold .rp-auto-c{transform:rotate(-90deg)}
  /* 여닫힘은 미끄러지게. 스무 줄이 한 번에 사라지면 화면이 어디로 튀었는지
     눈이 못 따라갑니다. 0fr↔1fr은 높이를 몰라도 되는 방법이라, 줄 수가
     제각각인 이 목록에 맞습니다(지원 안 되는 브라우저에서도 접히기는 합니다). */
  .rp-auto-x{display:grid;grid-template-rows:1fr;transition:grid-template-rows .18s ease}
  .rp-auto.fold .rp-auto-x{grid-template-rows:0fr}
  .rp-auto-i{min-height:0;overflow:hidden;padding:3px 0 5px}
  /* 상자 안이라 줄의 좌우 여백을 머리글에 맞춥니다(카드 기준 14px가 아니라). */
  .rp-auto .rp{padding-left:11px;padding-right:11px}
  .rp-auto .rp-h{padding-left:11px}

  /* 손으로 적은 특이사항 — 자동으로 모인 줄과 **테두리로** 갈라 둡니다.
     나란히 흘려 두면 사람이 적은 글이 시스템 기록에 이어지는 것처럼 읽힙니다.
     칸 색(주황)을 옅게 깔아 어느 칸에 속한 상자인지도 함께 말합니다. */
  .rp-memo-box{margin:6px 14px 14px;padding:10px 12px 11px;border-radius:9px;
    border:1px solid color-mix(in srgb,var(--warn) 28%,var(--line));
    background:color-mix(in srgb,var(--warn) 5%,var(--card))}
  .rp-memo-box.on{border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 5%,var(--card))}
  .rp-memo-h{font-size:10.5px;font-weight:650;color:var(--mut);
    letter-spacing:.3px;margin-bottom:6px}
  /* 읽기 모양. 일지는 읽는 시간이 훨씬 길어서 평소에는 글로만 서 있어야 합니다 —
     입력칸이 늘 떠 있으면 보고서가 아니라 서식으로 보입니다.
     줄바꿈은 적은 그대로 살립니다(pre-wrap). */
  .rp-memo{font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
  .rp-memo.none{color:var(--mut)}
  .rp-memo-box textarea{width:100%;font:inherit;font-size:12.5px;line-height:1.6;
    padding:8px 10px;border:1px solid var(--line);border-radius:7px;
    background:var(--bg);color:var(--ink);resize:vertical;min-height:70px}
  .rp-memo-box textarea:focus{border-color:var(--accent);outline:none}
  .rp-in-b{display:flex;gap:7px;align-items:center;margin-top:8px}
  .rp-in-s{font-size:11px;color:var(--mut);margin-top:6px}
  /* ---- 다음날 체크 — 손으로 다는 항목 ----
     한 덩어리 글이 아니라 **줄마다 하나**입니다(그대로 할 일이 됩니다).
     본문은 테두리 없는 입력칸입니다 — 바로 위 집계표와 같은 몸짓이라, 평소에는
     글로 읽히고 손을 대야 칸이 됩니다. 일지는 읽는 시간이 훨씬 깁니다. */
  .rt-r{display:flex;gap:8px;align-items:center}
  .rt-r > input[type=checkbox]{width:14px;height:14px;flex:none;margin:0;
    accent-color:var(--accent)}
  .rt-b{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:12.5px;
    line-height:1.6;color:var(--ink);padding:3px 5px;border-radius:5px}
  .rt-b:hover{background:var(--bg)}
  .rt-b:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--bg)}
  .rt-r.done .rt-b{text-decoration:line-through;color:var(--mut)}
  .rt-d{flex:none;font-size:11px;color:var(--mut)}
  /* 지우기는 줄에 마우스를 올렸을 때만 뜹니다 — 체크하러 갔다가 누를 자리가 아닙니다. */
  .rt-x{flex:none;font-size:15px;line-height:1.2;color:var(--mut);visibility:hidden;
    padding:0 3px}
  .rt-r:hover .rt-x,.rt-x:focus{visibility:visible}
  .rt-x:hover{color:var(--danger)}
  .rt-new{flex:1;min-width:150px;font-size:12.5px}
  /* 진행 상황 타임라인 (카드 상세) */
  .prog{display:flex;gap:9px;align-items:baseline;padding:3px 0;font-size:12.5px}
  .prog .mono{color:var(--mut);font-size:11px;flex:none}
  /* 회사 로고 — 갈색 로고라 다크에서는 흰 판(--logo-bg) 위에 올립니다 */
  .logo{height:36px;padding:5px 9px;background:var(--logo-bg);border-radius:7px;display:block}
  /* 세그먼트 버튼(보드 전환·테마 선택) — 선택 안 된 것은 탭처럼 회색.
     ghost 클래스의 붉은색(위험 동작용)을 여기서 덮습니다. */
  .seg{display:flex;}
  .seg button{background:transparent;color:var(--mut)}

  .atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  /* 메일 한 통에 대한 조치. 본문·첨부와 섞이지 않도록 점선으로 끊고 아래에 둡니다 —
     읽는 중에 눈에 띄면 안 되고, 다 읽고 "이건 다른 건인데" 싶을 때 찾을 자리입니다. */
  .mh-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
  .mh-act .mh-act-d{color:var(--mut);font-size:11px}
  .att{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;
    background:var(--bg);border:1px solid var(--line);font-size:11.5px;
    color:var(--accent);text-decoration:none}
  .att:hover{border-color:var(--accent)}
  .att.off{color:var(--mut);cursor:not-allowed}
  .att.off:hover{border-color:var(--line)}
  .att .sz{color:var(--mut);font-size:10.5px}
  .ref-t{width:100%;border-collapse:collapse;background:var(--bg);
    border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .ref-t td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  .ref-t tr:last-child td{border-bottom:none}
  .ref-t .rl{color:var(--mut);font-size:11px;font-family:-apple-system,sans-serif;
    width:38%;white-space:normal}
  .ref-t .rv{font-size:12px;font-family:ui-monospace,SFMono-Regular,monospace;
    font-variant-numeric:tabular-nums;user-select:all;white-space:normal;word-break:break-all}
  /* 같은 번호를 쓰는 다른 카드. 경고지만 장애는 아니라 붉은색은 쓰지 않습니다 —
     사람이 판단해서 합치거나 번호를 고칠 일입니다. */
  .dup{margin-top:10px;border:1px solid var(--warn);border-radius:7px;padding:9px 11px;
    background:color-mix(in srgb, var(--warn) 7%, transparent)}
  .dup-h{color:var(--warn);font-size:12.5px;font-weight:600}
  .dup-w{color:var(--mut);font-size:11.5px;margin:4px 0 8px;line-height:1.5}
  .dup-r{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
    padding:6px 0;border-top:1px solid var(--line)}
  .dup-r .n{font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:underline}
  .dup-r .s{color:var(--mut);font-size:11.5px;min-width:0;flex:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .etb-mini{color:var(--ok);font-size:11px;font-family:ui-monospace,monospace;}
  /* 이미 접안·출항이 끝난 항차 — 예정(초록)과 확실히 구분되어야 합니다 */
  .etb-mini.stale{color:var(--mut)}
  /* 터미널 스케줄에서 빠진 항차 — 끝난 것이 아니라 손이 필요한 것이라 경고색입니다 */
  .etb-mini.gone{color:var(--warn)}
  .etb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:9px;margin-top:10px}
  .etb-grid > div{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px 10px}
  .etb-grid span{display:block;color:var(--mut);font-size:10.5px;margin-bottom:3px}
  .etb-grid b{font-size:12.5px}
  .ai-note{color:var(--mut);font-size:11px;margin-top:4px;line-height:1.45;
    padding-left:8px;border-left:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
  /* 요약의 숫자를 눌러 들어온 화면임을 놓치지 않게, 적용 중인 조건과
     해제 동선을 결과 바로 위에 붙입니다. */
  .view-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-3px 0 12px;
    padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
    border-radius:8px;background:color-mix(in srgb,var(--accent) 7%,var(--card));
    color:var(--mut);font-size:12px}
  .view-filter.hide{display:none}
  .view-filter b{color:var(--ink);font-size:12.5px}
  .view-filter button{margin-left:auto}
  @media(max-width:700px){ .board{grid-template-columns:repeat(var(--cols,5),minmax(180px,1fr))} }