@charset "UTF-8";
/* =============================================================
   社内進捗・案件管理システム デモ — スタイル
   -------------------------------------------------------------
   白地 × ネイビー1色。角丸カード。Webフォントは読み込まない。
   ブレークポイントは 1024px の1本だけ（PC=サイドバー／それ未満=下部タブ）。
   ============================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --primary:        #1E4E8C;
  --primary-weak:   #E8F0FA;
  --primary-dark:   #163C6D;
  --ink:            #1A2333;
  --accent:         #D97706;   /* 注意（期限超過など）にだけ使う */

  --ink-2:          #5B6479;
  --ink-3:          #8A93A6;
  --line:           #E2E7EF;
  --line-strong:    #CBD3E0;
  --bg:             #F4F6FA;
  --surface:        #FFFFFF;

  --radius:         12px;
  --radius-sm:      8px;
  --shadow:         0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px -20px rgba(16, 24, 40, .35);

  --sidebar-w:      248px;
  --topbar-h:       56px;
  --tabbar-h:       62px;
  --note-h:         30px;   /* 狭い画面では注記が2行になるので下で広げる */

  --font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 骨格 ---------- */
.app { display: flex; min-height: 100vh; }
.content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* サイドバー（PC のみ） */
.sidebar { display: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--line);
}
.tb-back {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.tb-back svg { width: 18px; height: 18px; }
.tb-main { min-width: 0; }
.tb-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-sub {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-date {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ink-2);
  display: none;
}
/* サイドバーが出ない幅での、画面を開く人の切り替え */
.tb-user {
  margin-left: auto;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
@media (min-width: 1024px) { .tb-user { display: none; } }

main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 14px calc(var(--tabbar-h) + var(--note-h) + 24px);
}

/* 下部タブバー（<1024px） */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  height: var(--tabbar-h);
  display: grid;
  /* 項目の数は人によって変わる（代表4つ・設計担当3つ）。
     固定数を書くと、ナビを増やしたときに画面外へはみ出す事故が再発するので auto-fit にする。 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  /* 半透明にすると背後の一覧が透けて読めてしまうため不透明にする */
  background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  position: relative;
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active { color: var(--primary); }
.tab .dot-count {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* デモ注記（常時最下部に固定） */
.demo-note {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  height: var(--note-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: #101828;
  color: #E7EAF1;
  font-size: 11px;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.3;
}

/* 注記の文言は1行に収まらない幅がある（約480px未満）ので、その帯だけ2行ぶんに広げる */
@media (max-width: 479px) {
  :root { --note-h: 44px; }
  .demo-note { line-height: 1.35; padding: 0 10px; }
}

/* ---------- PC レイアウト ---------- */
@media (min-width: 1024px) {
  :root { --topbar-h: 64px; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    bottom: var(--note-h);   /* 固定注記にデモユーザー表示が隠れないように */
    width: var(--sidebar-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--line);
  }
  .content { margin-left: var(--sidebar-w); }
  .tabbar { display: none; }
  .demo-note { bottom: 0; }
  main { padding: 24px 28px calc(var(--note-h) + 32px); }
  .tb-date { display: block; }
  .topbar { padding: 10px 28px; }
}

/* サイドバー中身 */
.sb-brand {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.sb-mark {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sb-logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.sb-logo svg { width: 17px; height: 17px; }
.sb-name { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.sb-org { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }

.sb-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.sb-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sb-link:hover { background: #F2F5FA; color: var(--ink); }
.sb-link.is-active { background: var(--primary-weak); color: var(--primary); }
.sb-link .count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
/* 代表だけに出る「メンバーの ToDo」 */
.sb-sec {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 14px 12px 5px;
}
.sb-mem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.sb-mem:hover { background: #F2F5FA; color: var(--ink); }
.sb-mem.is-active { background: var(--primary-weak); color: var(--primary); }
.sb-mn {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #EEF1F6;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.sb-mem.is-active .sb-mn { background: #fff; color: var(--primary); }
/* サイドバーの中身が増えるので、はみ出したらここだけスクロールさせる */
.sb-nav { overflow-y: auto; min-height: 0; }

.sb-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  padding: 4px;
  text-align: left;
}
.sb-user:hover { border-color: var(--line-strong); background: #FAFBFD; }
.sb-user .sb-swap { margin-left: auto; color: var(--ink-3); display: inline-flex; }
.sb-user .sb-swap svg { width: 16px; height: 16px; }
.sb-user > span { min-width: 0; }
.sb-user-name, .sb-user-role { display: block; }
.avatar {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary-weak);
  color: var(--primary);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.sb-user-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.sb-user-role { font-size: 11px; color: var(--ink-2); line-height: 1.3; }

/* ---------- 見出し・共通パーツ ---------- */
.page-head { margin-bottom: 14px; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: 4px;
}
.page-title { font-size: 19px; font-weight: 700; letter-spacing: .01em; line-height: 1.4; }
.page-lead { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
/* 見出しは折り返さない（横に長い注記があると1文字ずつ縦に割れてしまう） */
.card-title { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
/* 狭い画面では、注記を見出しの下の行へ回す */
@media (max-width: 640px) {
  .card-head > .tiny { width: 100%; margin-top: -2px; }
  .card-head > .ro-note { width: 100%; text-align: left; max-width: none; }
}
.card-title .n { color: var(--ink-3); font-weight: 600; margin-left: 6px; font-size: 12px; }
.card-head .spacer { margin-left: auto; }
.card-body { padding: 14px 16px; }
.card-body.tight { padding: 6px 16px 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.btn:hover { background: #F5F8FC; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-sm { min-height: 34px; padding: 0 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--primary); }

.field {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 16px;   /* iOS の自動ズーム防止 */
}
.field:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }

@media (min-width: 1024px) {
  .field { font-size: 13.5px; min-height: 40px; }
  .page-title { font-size: 22px; }
}

/* ステータスバッジ（6値） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}
.st-none  { background: #EEF0F4; color: #5B6479; border-color: #D8DDE6; }
.st-sent  { background: #E8F0FA; color: #1E4E8C; border-color: #BCD2EC; }
.st-issue { background: #FDECEC; color: #C0362C; border-color: #F3C6C2; }
.st-fixed { background: #FDF1DE; color: #A45B06; border-color: #F0D6A6; }
.st-done  { background: #E5F4EC; color: #1F7A4C; border-color: #BCE0CC; }
.st-ask   { background: #F1ECFA; color: #5B3FA8; border-color: #D7C9F0; }

.badge-lg { font-size: 13px; padding: 5px 12px; }

/* 着工が近いのに確認済証が出ていない、の注意表示。
   --accent（琥珀）は期限超過とこの用途にだけ使う。 */
.warn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #F0D6A6;
  background: #FDF1DE;
  color: #A45B06;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.warn-badge::before {
  content: "!";
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}
/* 表の中では日付の下に置く（列幅を押し広げない） */
.tbl .warn-badge { display: flex; width: fit-content; margin-top: 4px; }

/* 「交付希望日が近いのに未交付」の帯は置かない（2026-08-20）。
   一覧の行に付くオレンジの印（.warn-badge）だけで示す。 */

/* 発注元ドット */
.cdot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.muted { color: var(--ink-2); }
.tiny { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}

/* ---------- 案件一覧 ---------- */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--ink-3);
  pointer-events: none;
}
.search-wrap .field { padding-left: 36px; }

.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { height: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.is-active .cdot { background: #fff !important; }
.chip .c { opacity: .7; font-weight: 700; }
/* 案件種別の絞り込み（発注元より一段控えめに） */
.chips-kind { margin-top: 7px; }
.chip-sm { min-height: 32px; padding: 0 11px; font-size: 12px; }
.chips-kind .chip-sm.is-active { background: var(--ink); border-color: var(--ink); }

.result-line { font-size: 12.5px; color: var(--ink-2); margin: 2px 2px 10px; }
.result-line b { color: var(--ink); font-size: 14px; }

/* PC テーブル */
.table-wrap { overflow-x: auto; }
/* 列は8本（物件／状態／発注元／確認申請／提出日／交付希望日／着工予定日／担当）。
   提出日は 1200px 以上でだけ出す（.pc-only-wide）。 */
.tbl { min-width: 880px; font-size: 13px; }
.tbl.tbl-todo { min-width: 820px; }
.tbl.tbl-mail { min-width: 900px; }
.tbl.tbl-acct { min-width: 880px; }
.tbl .c-hope b { font-size: 13px; }
.tbl .c-start b { font-size: 13.5px; color: var(--primary); }
.tbl thead th {
  position: sticky; top: 0;
  background: #F7F9FC;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--primary-weak); }
.tbl .c-name { font-weight: 700; }
.tbl .c-name .sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.tbl .c-client { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pc-only-wide { display: none; }
@media (min-width: 1200px) { .pc-only-wide { display: table-cell; } }

.list-desktop { display: none; }
.list-mobile { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .list-desktop { display: block; }
  .list-mobile { display: none; }
  .toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .toolbar .search-wrap { width: 280px; }
}

/* スマホ カードリスト */
.pcard {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 14px;
}
.pcard-top { display: flex; align-items: flex-start; gap: 10px; }
.pcard-name { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.pcard-client { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.pcard-badge { margin-left: auto; flex: 0 0 auto; }
.pcard-hope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-top: 10px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  background: var(--primary-weak);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
}
.pcard-hope b { font-size: 13.5px; font-weight: 700; }
.pcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.pcard-meta b { color: var(--ink); font-weight: 700; }

/* ---------- 物件詳細 ---------- */
.detail-head { margin-bottom: 14px; }
.detail-title { font-size: 20px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.detail-facts .f { display: flex; align-items: center; gap: 6px; }
.detail-facts b { color: var(--ink); font-weight: 700; }
@media (min-width: 1024px) { .detail-title { font-size: 24px; } }

/* 交付希望日（案件の主役になる日付） */
.detail-hope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.detail-hope .dh-k { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.detail-hope .dh-v { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
@media (min-width: 1024px) { .detail-hope .dh-v { font-size: 19px; } }

/* 案件種別のしるし */
.ktag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid #BCD2EC;
  background: #EEF4FC;
  color: #1E4E8C;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.ktag.is-daigan { border-color: #D7C9F0; background: #F4F0FC; color: #5B3FA8; }
.ktag.is-bunjo { margin-left: 5px; border-color: #CFE3D8; background: #EDF6F1; color: #1F7A4C; }

/* 物件詳細のタブ。
   ボタンの集まりに見えないよう、下線式（選んでいるものだけ下に2pxの線）にしている。
   7本あるので、狭い画面では横スクロールにする（1fr の均等割りだと文字が潰れる）。 */
.subtabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  margin-bottom: 16px;
  /* タブ列の下に1本の罫線を通す。スクロールしても切れないよう背景で描く */
  background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-overflow-scrolling: touch;
}
.subtabs::-webkit-scrollbar { height: 0; }
.subtab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px 10px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
/* 下線は疑似要素で。列の罫線（1px）より太い2pxを重ねる */
.subtab::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}
.subtab:hover { color: var(--ink); }
.subtab:hover::after { background: var(--line-strong); }
.subtab.is-active { color: var(--primary); font-weight: 700; }
.subtab.is-active::after { background: var(--primary); }
.subtab .stn {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: #EAEEF5;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.subtab.is-active .stn { background: var(--primary-weak); color: var(--primary); }

.detail-grid { display: block; }
.chat-col { margin-top: 14px; }

/* 狭い画面では、チャットのタブを選んだときだけ右カラム（＝チャット）を出す。
   ほかのタブでは本文だけを出す。 */
@media (max-width: 1199px) {
  .detail-grid:not([data-tab="chat"]) .chat-col { display: none; }
  .detail-grid[data-tab="chat"] .detail-col { display: none; }
  .detail-grid[data-tab="chat"] .chat-col { margin-top: 0; }
}

/* 1200px 以上はチャットが右カラムに常駐するので、チャットのタブ自体を出さない */
@media (min-width: 1200px) {
  .subtab-chat { display: none; }
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }
  .chat-col { margin-top: 0; position: sticky; top: calc(var(--topbar-h) + 24px); }
}
@media (min-width: 1440px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* 概要タブの「いまの状況」 */
.sum-grid {
  display: grid;
  gap: 10px;
  /* いちばん長いステータス（「確認交付済み」＝約100px）が枠に収まる幅にする */
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.sum {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #FAFBFD;
  min-width: 0;
}
.sum .k { font-size: 11px; color: var(--ink-2); }
.sum .v { font-size: 15px; font-weight: 700; margin-top: 2px; line-height: 1.4; }
.sum .v.big { font-size: 18px; color: var(--primary); }
.sum-warn {
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px solid #F0D6A6;
  background: #FFFBF2;
  border-radius: var(--radius-sm);
  color: #A45B06;
  font-size: 12.5px;
  font-weight: 700;
}

/* 担当メンバー */
.mchips { display: flex; flex-wrap: wrap; gap: 7px; }
.mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.mchip .mrole {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-weak);
  border-radius: 999px;
  padding: 0 6px;
}
.avatar-xs { width: 22px; height: 22px; font-size: 11px; }

/* 申請ステータスカード */
.appl-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.appl-agency { min-width: 0; text-align: left; }
.appl-agency .apl { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 1px; }
.appl-agency .nm { font-size: 14px; font-weight: 700; line-height: 1.4; }
.appl-agency .kd { font-size: 11.5px; color: var(--ink-2); }
/* 審査機関は申請タブからも選べる（編集画面の下まで潜らなくてよいように） */
.appl-agency.is-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  background: #fff;
  cursor: pointer;
}
.appl-agency.is-btn:hover { background: var(--bg); }
@media (max-width: 1023px) { .appl-agency.is-btn { min-height: 44px; } }
.appl-top .badge { margin-left: auto; }
.appl-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
/* 基本情報カードのように定義リストが本文の先頭に来る場合は、上の区切り線と余白を消す */
.card-body > .appl-rows:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.appl-rows dt { color: var(--ink-2); white-space: nowrap; }
.appl-rows dd { margin: 0; font-weight: 700; }
.appl-rows dd.warn { color: var(--accent); }
.appl-actions { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.appl-rows dd .sub2 {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 1px;
}
.atag {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 8px;
  margin: 0 4px 3px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg);
}

/* 審査の内訳（主役の6ステータスとは競わせない控えめな見た目にする） */
.appl-trk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  margin-top: 10px;
}
.apl { color: var(--ink-2); font-weight: 700; margin-right: 2px; }
.trk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
  background: var(--surface);
  color: var(--ink);
}
.trk .trk-k {
  color: var(--ink-2);
  font-weight: 600;
  border-right: 1px solid var(--line);
  padding-right: 5px;
}
.trk-done { border-color: #B7DFC9; color: #1F7A4C; }
.trk-ask  { border-color: #CFC2EC; color: #5B3FA8; }
.trk-none { color: var(--ink-3); }

/* 性能評価・事前協議（行ごと押して状態を変えられる） */
.sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px dashed var(--line);
  background: none;
  text-align: left;
  font-size: 13px;
}
.sub-row:last-child { border-bottom: 0; }
.sub-row:hover .sub-t { color: var(--primary); }
.sub-t { font-weight: 700; }
.sub-s {
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  background: #EEF0F4;
  color: var(--ink-2);
  white-space: nowrap;
}
.sb-none { background: #EEF0F4; color: #5B6479; }
.sb-sent { background: #E8F0FA; color: #1E4E8C; }
.sb-done { background: #E5F4EC; color: #1F7A4C; }
.sub-edit { flex: 0 0 auto; color: var(--ink-3); display: inline-flex; }
.sub-edit svg { width: 15px; height: 15px; }
.sub-row:hover .sub-edit { color: var(--primary); }

/* 工程（管理表の列と同じ並び） */
.ms-groups {
  display: grid;
  gap: 12px 18px;
  /* LASK の行は右端に送信ボタンが付くので、1列の最小幅を広げる
     （狭いと下の .ms-row.is-split が折り返して2段になる） */
  /* 2列に並べると、右のチャットがある画面では1列あたりが狭くなり、
     「L　あかりプラン作成依頼」のような長いラベルが2行に割れる。縦に積む。 */
  grid-template-columns: 1fr;
}
.ms-gh {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
/* 行そのものが更新のボタン（着工日だけは .is-static＝押せない） */
.ms-row {
  /* 「行の本体｜右端（LASK の送信）」の2列。右端の幅を固定して、
     送信ボタンの有無で本体の幅が変わらない＝値の右端が行ごとにずれないようにする。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  border-bottom: 1px dotted var(--line);
}
.ms-row:last-child { border-bottom: 0; }
/* 行の中身は「ラベル｜値｜編集の印」の3列で、行ごとにずらさず縦にそろえる。
   メモは2行目に回す（値の位置が動かないように）。 */
.ms-hit {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  grid-template-areas: "l v c" "m m m";
  align-items: center;
  gap: 0 10px;
  padding: 8px 6px;
  margin-left: -6px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color .12s ease;
}
.ms-hit.is-static { cursor: default; }
button.ms-hit:hover { background: var(--bg); }
button.ms-hit:active { background: var(--primary-weak); }
button.ms-hit:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ms-l { grid-area: l; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; word-break: auto-phrase; }
.ms-v { grid-area: v; font-weight: 700; text-align: right; white-space: nowrap; }
.ms-memo {
  grid-area: m;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.45;
  padding-top: 2px;
}
.ms-done { display: inline-flex; align-items: center; gap: 3px; color: #1F7A4C; }
.ms-done svg { width: 13px; height: 13px; flex: none; }
.ms-plan { color: var(--ink-2); font-weight: 600; }
.ms-st { color: var(--ink-2); font-weight: 600; }

/* LASK のまとめ表記（管理表の1列に入る値） */
.ms-row.is-sum { border-top: 1px dashed var(--line); border-bottom: 0; margin-top: 3px; }
/* 押せる行であることを示す（文字だけだと、ただの表に見える） */
.ms-caret { grid-area: c; opacity: .3; display: inline-flex; justify-content: flex-end; }
.ms-caret svg { width: 13px; height: 13px; }
button.ms-hit:hover .ms-caret { opacity: .7; }
.ms-more {
  font-size: 11px;
  color: var(--primary);
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: underline;
}
/* 書き込めない人への案内（ボタンの代わりに置く） */
.ro-note { max-width: 320px; text-align: right; line-height: 1.5; }
.sub-row.is-static { cursor: default; }
/* 提出日の［今日］。入力欄に隙間ゼロで貼り付くので少し離す */
.date-quick { margin-top: 8px; }
.hrow.is-btn { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; }
.hrow.is-btn:hover { background: var(--bg); }
/* 交付済みを、過去の交付希望日の横に添える */
.hope-ok {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #12603C;
  background: #E7F4EC;
  border: 1px solid #BFE3CC;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
/* 絞り込みの解除 */
.clear-line { margin: 0 0 10px; }
.empty-act { margin-top: 10px; }
.ms-code {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
}
.mail-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #BCD2EC;
  background: #F3F8FE;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
}
.mail-hint svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--primary); }
.mail-hint b { color: var(--ink); }
.mail-hint.is-off { border-color: var(--line); background: #FAFBFD; }
.mail-hint.is-off svg { color: var(--ink-3); }
.mail-note {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-weak);
  color: var(--primary-dark);
  font-size: 12.5px;
  line-height: 1.65;
  margin-bottom: 12px;
}
.mail-body { font-size: 13px; line-height: 1.7; resize: vertical; min-height: 200px; }

/* 活動ログ */
.log-row {
  display: grid;
  /* 日付・種別・本文・書いた人 の4列。行ごとに幅が変わらないように固定する */
  /* 種別は「打ち合わせ」がいちばん長い。2行に割れない幅にする */
  grid-template-columns: 44px 84px minmax(0, 1fr) 66px;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px dotted var(--line);
  text-align: left;
}
@media (max-width: 640px) {
  .log-row { grid-template-columns: 40px 84px minmax(0, 1fr); }
  .log-row .log-w { grid-column: 2 / -1; margin-top: -2px; }
}
.log-row:last-child { border-bottom: 0; }
.log-row.is-new { background: #FFFDF3; border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.log-d { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-k {
  justify-self: start;
  min-width: 100%;
  white-space: nowrap;
  text-align: center;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  background: #EEF0F4;
  color: var(--ink-2);
}
.lk-app  { background: #E8F0FA; color: #1E4E8C; }
.lk-ms   { background: #E5F4EC; color: #1F7A4C; }
.lk-todo { background: #FDF1DE; color: #A45B06; }
.lk-file { background: #F1ECFA; color: #5B3FA8; }
.lk-mtg  { background: #EEF0F4; color: #5B6479; }
.lk-mail { background: #FDECEC; color: #C0362C; }
.lk-chat { background: #E7F3F3; color: #0F6E70; }
.log-t { min-width: 0; word-break: auto-phrase; overflow-wrap: anywhere; }
.log-w { color: var(--ink-3); font-size: 11px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-more { font-size: 11.5px; color: var(--ink-3); padding-top: 8px; }

/* 変更の履歴＝最新の1件だけ出し、押すと全部見られる */
.hist { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.hist-h { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.hist-h .hist-n { color: var(--ink-3); font-weight: 600; margin-left: 6px; }
.hist-latest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
  text-align: left;
  font-size: 12.5px;
}
.hist-latest:hover { border-color: var(--primary); background: var(--primary-weak); }
.hist-latest .d { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hist-latest .t { font-weight: 700; }
.hist-latest .w { color: var(--ink-2); font-size: 11.5px; }
.hist-latest .more { margin-left: auto; color: var(--primary); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.hist-latest.is-new .t { color: var(--primary); }

.hlist { display: flex; flex-direction: column; }
.hrow {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.hrow:last-child { border-bottom: 0; }
.hrow .hd { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hrow .ht { font-weight: 700; }
.hrow .hw { width: 100%; color: var(--ink-2); font-size: 11.5px; }
.hrow.is-new .ht { color: var(--primary); }

/* 打ち合わせ記録 */
.mtg { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.mtg:last-child { border-bottom: 0; }
.mtg-no {
  flex: 0 0 auto;
  width: 46px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-weak);
  border-radius: 6px;
  height: 24px;
  line-height: 24px;
}
.mtg-body { min-width: 0; }
.mtg-date { font-size: 11.5px; color: var(--ink-2); }
.mtg-memo { font-size: 13px; margin-top: 2px; }

/* 図面ファイル */
.file-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px dashed var(--line);
  background: none;
}
.file-row:last-child { border-bottom: 0; }
.file-row:hover .file-name { color: var(--primary); text-decoration: underline; }
.file-ico {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 7px;
  background: #FDECEC;
  color: #C0362C;
  display: grid; place-items: center;
  font-size: 9.5px;
  font-weight: 700;
}
.file-body { min-width: 0; flex: 1 1 auto; }
.file-name, .file-meta { display: block; }
.file-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-meta { font-size: 11px; color: var(--ink-2); }
.file-ico.sm { width: 26px; height: 26px; font-size: 8.5px; border-radius: 6px; }
.file-ico.lg { width: 68px; height: 68px; font-size: 15px; border-radius: 12px; }

/* 写真・動画・ファイルのサムネイル */
.thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: #EEF1F6;
}
.thumb-art { display: block; width: 100%; height: 100%; }
.thumb.is-file { display: grid; place-items: center; background: #F4F6FA; }
.thumb-ext { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; }
.thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.thumb-play svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); }
.thumb-dur {
  position: absolute;
  right: 5px; bottom: 5px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(16, 24, 40, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

/* ファイルタブの写真・動画グリッド */
.mgrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}
.mtile {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  text-align: left;
  min-width: 0;
}
.mtile:hover { border-color: var(--primary); }
.mtile-n {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 添付を選ぶモーダル */
.agrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.atile {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  text-align: left;
  min-width: 0;
}
.atile:hover { border-color: var(--primary); background: #FAFCFF; }
.atile-n {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atile-s { display: block; font-size: 10.5px; color: var(--ink-3); }
/* 開いたとき */
.mv-media { max-width: 420px; margin: 0 auto; }
.mv-media .thumb { aspect-ratio: 3 / 2; border-radius: 10px; }
.mv-file { text-align: center; padding: 12px 0; }
.mv-file .file-ico { margin: 0 auto 10px; }
.mv-fn { font-size: 14px; font-weight: 700; margin-bottom: 6px; word-break: break-all; }

/* ToDo */
.todo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.todo:last-of-type { border-bottom: 0; }
.todo-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: -3px 0 0 -4px;
  border: 0;
  background: none;
}
.todo-box {
  width: 19px; height: 19px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  display: grid; place-items: center;
  color: transparent;
  background: #fff;
}
.todo-box svg { width: 13px; height: 13px; }
.todo.is-done .todo-box { background: var(--primary); border-color: var(--primary); color: #fff; }
.todo-body {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
}
.todo-title { display: block; font-size: 13.5px; line-height: 1.5; }
.todo-body:hover .todo-title { color: var(--primary); }
.todo.is-done .todo-title { text-decoration: line-through; color: var(--ink-3); }
.todo-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.todo-meta .over { color: #C0362C; font-weight: 700; }
.todo-meta .today { color: var(--accent); font-weight: 700; }

/* ToDo の状態（管理表の「進捗」に合わせた3つ） */
.tstate {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.ts-todo  { background: #F4F6FA; color: #5B6479; border-color: #D8DDE6; }
.ts-doing { background: #FDF1DE; color: #A45B06; border-color: #F0D6A6; }
.ts-done  { background: #E5F4EC; color: #1F7A4C; border-color: #BCE0CC; }

/* チャット */
.chat-panel { display: flex; flex-direction: column; }
.chat-body {
  padding: 14px 16px;
  overflow-y: auto;
  max-height: 58vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FAFBFD;
}
/* スマホで「チャット」タブを開いた時点で送信欄まで見えるように、本文の高さを画面から逆算する。
   330px = 物件名ヘッダ＋交付希望日＋タブ＋カード見出し＋送信欄の実測ぶん。
   実測で確かめる項目なので、上の要素を増やしたらここも測り直す。 */
@media (max-width: 1023px) {
  .chat-body { max-height: calc(100vh - var(--tabbar-h) - var(--note-h) - 330px); min-height: 200px; }
}
/* 190px = トップバー下の余白＋物件名ヘッダ＋交付希望日の帯＋タブの高さ。
   スクロール前（=右カラムがまだ本来の位置にいるとき）でも
   送信欄が固定注記に潜り込まない高さにしている。 */
@media (min-width: 1200px) {
  .chat-panel { height: calc(100vh - var(--topbar-h) - var(--note-h) - 190px); min-height: 380px; }
  .chat-body { max-height: none; flex: 1 1 auto; }
}
/* 「ここから未読」の区切り */
.chat-newline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #C0362C;
  font-size: 11px;
  font-weight: 700;
}
.chat-newline::before, .chat-newline::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #F3C6C2;
}
.chat-day {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  background: #EAEEF5;
  border-radius: 999px;
  padding: 2px 12px;
}
.msg { display: flex; gap: 8px; max-width: 92%; }
.msg-av {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #E7EBF2;
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 16px;
}
.msg-main { min-width: 0; }
.msg-who { font-size: 11px; color: var(--ink-2); margin-bottom: 3px; }
.msg-bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.65;
  word-break: break-word;
}
.msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.msg-time { font-size: 10.5px; color: var(--ink-3); }
/* Google チャットのように、発言をそのまま ToDo にできる */
.msg-todo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  padding: 2px 4px;
  border-radius: 5px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
}
.msg-todo svg { width: 12px; height: 12px; }
.msg-todo:hover { background: var(--primary-weak); color: var(--primary); }
.msg.is-me { align-self: flex-end; flex-direction: row-reverse; }
.msg.is-me .msg-av { background: var(--primary-weak); color: var(--primary); }
.msg.is-me .msg-who { text-align: right; }
.msg.is-me .msg-bubble {
  background: var(--primary-weak);
  border-color: #CFDFF3;
  border-radius: 12px 4px 12px 12px;
}
.msg.is-me .msg-foot { flex-direction: row-reverse; }

/* 発言に付いた写真・動画・ファイル */
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.msg-media { border: 0; background: none; padding: 0; width: 132px; max-width: 60vw; }
.msg-media .thumb { border: 1px solid var(--line); }
.msg-media:hover .thumb { border-color: var(--primary); }
.msg-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  max-width: 100%;
}
.msg-file:hover { border-color: var(--primary); }
.mf-body { min-width: 0; }
.mf-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.mf-size { display: block; font-size: 10.5px; color: var(--ink-3); }

/* 送信前の添付 */
.att-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  background: #fff;
}
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--primary-weak);
  background: var(--primary-weak);
  color: var(--primary-dark);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.att-x {
  width: 20px; height: 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 78, 140, .12);
  color: var(--primary-dark);
  line-height: 1;
  font-size: 13px;
  display: grid;
  place-items: center;
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
}
.chat-form .field { flex: 1 1 auto; min-width: 0; }
.chat-form .btn { flex: 0 0 auto; padding: 0 12px; }
.chat-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
}
.chat-icon:hover { border-color: var(--primary); color: var(--primary); }
.chat-icon svg { width: 17px; height: 17px; }
/* 狭い画面では送信ボタンの文字を落としてアイコンだけにする（横に3つ並ぶため） */
@media (max-width: 420px) {
  .chat-form .btn .snd { display: none; }
  .chat-form .btn { padding: 0 12px; }
}

/* ---------- チャット画面（LINE のような一覧＋スレッド） ---------- */
.chat-page { display: block; }
.chat-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.clist-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.clist-t { font-size: 13px; font-weight: 700; }
.clist-n { margin-left: auto; font-size: 11.5px; color: var(--ink-2); }
.clist-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  min-height: 62px;
}
.crow:last-child { border-bottom: 0; }
.crow:hover { background: #F7F9FC; }
.crow.is-active { background: var(--primary-weak); }
.crow-av {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  color: #fff;
  display: grid; place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.crow-body { min-width: 0; flex: 1 1 auto; }
.crow-top { display: flex; align-items: baseline; gap: 8px; }
.crow-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crow-time { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; color: var(--ink-3); }
.crow-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.crow-prev {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crow.is-unread .crow-name { color: var(--primary); }
.crow.is-unread .crow-prev { color: var(--ink); font-weight: 600; }
.crow-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.chat-thread {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.chat-thread.is-empty { display: none; }
.cth-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.cth-back {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.cth-back svg { width: 17px; height: 17px; }
.cth-main { min-width: 0; flex: 1 1 auto; }
.cth-name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cth-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cth-mem { display: none; gap: 3px; flex: 0 0 auto; }
.cth-btn { flex: 0 0 auto; }
/* 狭い画面では見出しに文字を詰め込まず、ボタンはアイコンだけにする */
@media (max-width: 640px) {
  .cth-btn .cth-l { display: none; }
  .cth-btn { padding: 0 11px; }
}
.chat-thread .chat-body { flex: 1 1 auto; max-height: none; min-height: 0; }

/* 狭い画面＝一覧とスレッドを行き来する（LINE と同じ） */
@media (max-width: 1023px) {
  .chat-page { height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - var(--note-h) - 28px); min-height: 380px; display: flex; flex-direction: column; }
  .chat-page.has-thread .chat-list { display: none; }
  .chat-page.has-thread .chat-thread { margin-top: 0; flex: 1 1 auto; }
  .chat-page:not(.has-thread) .chat-list { flex: 1 1 auto; }
}
/* 広い画面＝左に一覧・右にスレッドを並べる */
@media (min-width: 1024px) {
  .chat-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - var(--topbar-h) - var(--note-h) - 56px);
    min-height: 460px;
  }
  .chat-thread { margin-top: 0; }
  .chat-thread.is-empty { display: flex; align-items: center; justify-content: center; }
  .cth-back { display: none; }
  .cth-mem { display: flex; }
}
@media (min-width: 1280px) {
  .chat-page { grid-template-columns: 340px minmax(0, 1fr); }
}

/* ---------- ToDo（カンバン／一覧） ---------- */
.todo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.todo-bar .spacer { margin-left: auto; }
.seg-wrap {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #EAEEF5;
  border-radius: 9px;
}
.seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.seg svg { width: 15px; height: 15px; }
.seg.is-on { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

.todo-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.ts-item b { color: var(--ink); font-size: 15px; font-weight: 700; margin-left: 2px; }
.ts-item.is-over b { color: #C0362C; }
.ts-item.is-today b { color: var(--accent); }

.kboard {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: start;
}
.kcol {
  background: #EEF1F6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 0;
}
.kcol.is-over { border-color: var(--primary); background: var(--primary-weak); }
.kcol-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 9px;
  color: var(--ink-2);
}
.kcol-h .n {
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 19px;
  text-align: center;
}
.kcol.ts-doing .kcol-h { color: #A45B06; }
.kcol.ts-done .kcol-h { color: #1F7A4C; }
.kcol-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kempty { font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 14px 0; }

.kcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  overflow: hidden;
}
.kcard.is-drag { opacity: .5; }
.kcard.is-over { border-color: #F3C6C2; }
.kcard-main {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}
.kcard:hover { border-color: var(--line-strong); }
.kcard-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; }
.kcard.is-done .kcard-title { text-decoration: line-through; color: var(--ink-3); }
.kcard-main:hover .kcard-title { color: var(--primary); }
.kcard-pj { display: block; font-size: 11px; color: var(--primary); margin-top: 4px; }
.kcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-2);
}
.kcard-meta .over { color: #C0362C; font-weight: 700; }
.kcard-meta .today { color: var(--accent); font-weight: 700; }
.kwho { display: inline-flex; align-items: center; gap: 4px; }

/* 一覧は6列＝チェック／やること／物件名・所在地／状態／期限／担当。
   「やること」と「物件」は別の列に分ける（同じセルに畳むと、どちらを読んでいるか分からなくなる）。 */
.tbl-todo .todo-check { margin: 0; }
.tbl-todo tbody td:first-child { width: 44px; padding-right: 0; }
.tbl .c-task { font-weight: 600; min-width: 220px; }
.tbl-todo .c-name { font-weight: 600; }
.tbl-todo tbody tr.is-done .c-task { text-decoration: line-through; color: var(--ink-3); }

/* タスクのモーダル */
.td-title { min-height: 66px; resize: vertical; line-height: 1.6; }
/* 状態はここで変える（カンバンのカードにはボタンを置いていない） */
.td-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tdst {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
}
.tdst input { position: absolute; opacity: 0; width: 0; height: 0; }
.tdst:hover { border-color: var(--primary); }
.tdst.is-sel { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.tdst.ts-doing.is-sel { border-color: #D9902A; background: #FDF1DE; color: #A45B06; box-shadow: inset 0 0 0 1px #D9902A; }
.tdst.ts-done.is-sel  { border-color: #2F8F5B; background: #E5F4EC; color: #1F7A4C; box-shadow: inset 0 0 0 1px #2F8F5B; }
.td-2col { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.td-del { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.btn-danger { border-color: #F3C6C2; color: #C0362C; background: #fff; width: 100%; }
.btn-danger:hover { background: #FDECEC; }


/* ---------- トースト ---------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--note-h) + 14px);
  /* モーダル（200）より上。下にすると入力エラーの知らせが幕の裏に隠れ、
     「押しても何も起きない」ように見える */
  z-index: 300;
  width: min(430px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 1024px) { .toast-wrap { bottom: calc(var(--note-h) + 20px); } }
.toast {
  background: #101828;
  color: #fff;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  box-shadow: 0 12px 30px -12px rgba(16, 24, 40, .6);
  animation: toast-in .18s ease-out;
}
.toast.ok { background: #12603C; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- モーダル ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 24, 40, .5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 640px) { .modal-overlay { align-items: center; padding: 20px; } }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .6);
  animation: sheet-in .2s ease-out;
}
@media (min-width: 640px) { .modal-box { border-radius: 14px; max-height: 88vh; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
}
.modal-title { font-size: 15px; font-weight: 700; }
.modal-sub { font-size: 11.5px; color: var(--ink-2); }
.modal-close {
  margin-left: auto;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  display: grid; place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-2);
}
.modal-body { padding: 14px 16px; }
/* 確認モーダル（削除・書きかけの破棄・利用停止）。元のモーダルの上に重ねる */
.modal-overlay.is-confirm { z-index: 260; }
.modal-box.is-confirm { max-width: 420px; }
.modal-note { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: 8px 0 0; }
/* .btn-danger は単独配置で全幅にしているので、フッターに並ぶときは幅を戻す */
.modal-foot .btn-danger { width: auto; }
.cf-list { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cf-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cf-row .cf-name { font-size: 13px; font-weight: 600; }
.cf-row .cf-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.cf-row select.field { margin-top: 8px; }
.modal-foot {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: #fff;
}
.modal-foot .btn { flex: 1 1 0; }

.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 7px;
  cursor: pointer;
}
.opt:last-of-type { margin-bottom: 0; }
.opt:hover { border-color: var(--line-strong); background: #FAFBFD; }
.opt input { accent-color: var(--primary); width: 18px; height: 18px; flex: 0 0 auto; }
.opt.is-sel { border-color: var(--primary); background: var(--primary-weak); }
.opt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opt-txt .badge { align-self: flex-start; }
.opt .hint { font-size: 11px; color: var(--ink-2); line-height: 1.45; }

.date-block {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #F0D6A6;
  background: #FFFBF2;
  border-radius: var(--radius-sm);
}
.date-block[hidden] { display: none; }
.date-note { font-size: 11.5px; color: #A45B06; margin-top: 6px; line-height: 1.55; }
/* 工程の更新モーダルの注記は「注意」ではなく案内なので、警告色にしない */
.date-note.is-hint { color: var(--ink-2); }
.modal-body .field-label + .field + .date-note.is-hint { margin-bottom: 14px; }

/* タブレット（640〜1023px）は1列だと一覧性が落ちるので2列にする */
@media (min-width: 640px) and (max-width: 1023px) {
  .list-mobile { grid-template-columns: 1fr 1fr; }
}

/* ---------- 入力エラー ---------- */
/* どの欄が悪いのかを、トーストだけでなく欄そのものにも出す */
.field.is-error,
select.field.is-error,
textarea.field.is-error {
  border-color: #C0362C;
  box-shadow: 0 0 0 3px rgba(192, 54, 44, .12);
}

/* ---------- タップ領域（モバイル） ---------- */
/* 押せる要素を足したら、この列挙にも足す */
@media (max-width: 1023px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .chip { min-height: 44px; }
  .chip-sm { min-height: 40px; }
  .subtab { min-height: 46px; padding-bottom: 12px; }
  .seg { min-height: 40px; }
  .todo-check { width: 40px; height: 40px; margin: -6px 0 0 -8px; }
  .file-row { padding: 12px 0; }
  .tab { min-height: var(--tabbar-h); }
  .tb-back, .tb-user { width: 44px; height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .crow { min-height: 66px; }
  .cth-back { width: 44px; height: 44px; }
  .chat-icon { width: 44px; height: 44px; }
  .tdst { min-height: 46px; }
  .att-x { width: 32px; height: 32px; }
  .sub-row { min-height: 48px; }
  .sb-mem { min-height: 44px; }
  /* 2026-08-19 追加ぶん（この列挙に足し忘れると、指で押せない要素が生まれる） */
  .msg-todo { min-height: 36px; padding: 7px 10px; }
  .ms-sent { min-height: 36px; padding: 7px 10px; }
  .ms-row { padding-top: 9px; padding-bottom: 9px; }
  .ms-hit { min-height: 44px; }
  .cseg { min-height: 40px; }
  .cbell { min-height: 44px; }
  .mbox { min-height: 44px; }
  .pick-row { min-height: 44px; }
  .mineonly { min-height: 40px; }
}

/* 印刷は想定しないが、崩れて出ないよう最低限 */
@media print {
  .sidebar, .tabbar, .demo-note, .chat-form, .att-row, .subtabs, .todo-bar { display: none !important; }
  .content { margin-left: 0; }
  .chat-body, .clist-body { max-height: none !important; overflow: visible !important; }
  .chat-page { height: auto !important; display: block !important; }
}

/* =============================================================
   2026-08-18 の改修で足したもの
   （案件の状態／案件の追加・編集／ドライブ／LASK のメール／
     1対1のチャット／管理〔メール送信履歴・アカウント・通知〕）
   ============================================================= */

/* ---------- 案件の状態（着工前／工事中／完了済み） ---------- */
.pstate {
  display: inline-block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.ps-before { background: #E8F0FA; color: #1E4E8C; border-color: #BCD2EC; }
.ps-doing  { background: #FDF1DE; color: #A45B06; border-color: #F0D6A6; }
.ps-done   { background: #EEF0F4; color: #5B6479; border-color: #D8DDE6; }
/* 詳細ヘッダの状態は押して変えられる。押せることが分かるように「▾」を添える */
.pstate-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}
.pstate-btn.ps-before { background: #E8F0FA; color: #1E4E8C; border-color: #BCD2EC; }
.pstate-btn.ps-doing  { background: #FDF1DE; color: #A45B06; border-color: #F0D6A6; }
.pstate-btn.ps-done   { background: #EEF0F4; color: #5B6479; border-color: #D8DDE6; }
.pstate-btn:hover { filter: brightness(.97); }
.pstate-btn .ca { font-size: 10px; opacity: .8; }
@media (max-width: 1023px) { .pstate-btn { min-height: 32px; } }

/* 状態のチップ（絞り込みの1段目）。既定が「着工前」なので、いちばん上に置く。
   選んでいないものは塗らない（発注元のチップと同じ形＝小さな丸で色を示す）。
   全部塗ると「どれも選ばれている」ように見えてしまう。 */
.chips-status { margin-bottom: 7px; }
.chip-st { font-weight: 700; }
.sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-st.ps-before .sdot { background: #1E4E8C; }
.chip-st.ps-doing  .sdot { background: #A45B06; }
.chip-st.ps-done   .sdot { background: #5B6479; }
.chip-st.ps-before, .chip-st.ps-doing, .chip-st.ps-done { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.chip-st.ps-before.is-active { background: #1E4E8C; border-color: #1E4E8C; color: #fff; }
.chip-st.ps-doing.is-active  { background: #A45B06; border-color: #A45B06; color: #fff; }
.chip-st.ps-done.is-active   { background: #5B6479; border-color: #5B6479; color: #fff; }
.chip-st.is-active .sdot { background: #fff; }

/* 一覧のカード（スマホ）は状態と申請を2つ並べる */
.pcard-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* 詳細の見出し（物件名＋状態＋編集） */
.detail-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.detail-titlerow .spacer { flex: 1 1 auto; }

/* ---------- 工程：LASK のメール送信 ---------- */
/* 行そのものが押せるうえに、右端にもボタンを置くので、入れ子にならないよう横に並べる。
   ★行の組み方（grid）は上の .ms-row / .ms-hit で決めている。ここで二度書かない
     （同じセレクタを2回書くと、あとの指定が勝って縦のそろいが崩れる）。 */
.ms-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 0;
}
.ms-side.is-none { font-size: 11px; color: var(--ink-3); padding-right: 4px; }
.ms-sent {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: #1F7A4C;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 5px;
  white-space: nowrap;
}
.ms-sent:hover { background: #E5F4EC; text-decoration: underline; }
.ms-sent svg { width: 12px; height: 12px; flex: none; }
.ms-send { flex: none; }


/* LASK の凡例（4文字が何の依頼か） */
.lask-legend {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
}
.ll-h { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.ll-grid { display: grid; gap: 8px; }
@media (min-width: 720px) { .ll-grid { grid-template-columns: 1fr 1fr; } }
.ll-i { display: flex; align-items: flex-start; gap: 9px; }
.ll-c {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 12px; font-weight: 700;
}
.ll-t { font-size: 12px; line-height: 1.45; }
.ll-t b { display: block; color: var(--ink); }
.ll-s { color: var(--ink-3); font-size: 11px; }
.lask-chip {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  margin-right: 6px;
  border-radius: 5px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
}

/* ---------- メールを送るモーダル ---------- */
.mail-from {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #BCD2EC;
  background: var(--primary-weak);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.mail-from svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--primary); }
.mail-from.is-warn { border-color: #F3C6C2; background: #FDECEC; }
.mail-from.is-warn svg { color: #C0362C; }
.mf-ok { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.mf-warn { display: block; font-size: 11.5px; color: #C0362C; font-weight: 700; margin-top: 3px; }
.mf-row { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 640px) { .mf-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.mail-meta dd { word-break: break-all; }
.mail-read {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.75;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
  max-height: 46vh;
  overflow-y: auto;
}
.tbl .c-mailto { font-size: 11.5px; color: var(--ink-2); word-break: break-all; }
.tbl tbody tr.is-new { background: #FFFDF3; }
.log-row.is-open {
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.log-row.is-open:hover { background: var(--bg); }
.log-more-i { margin-left: 8px; font-size: 11px; color: var(--primary); font-weight: 700; }

/* ---------- 保存先フォルダ（Google ドライブ） ---------- */
.drive-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
}
.drive-row svg { width: 22px; height: 22px; flex: none; color: #A45B06; }
.drive-row.big svg { width: 30px; height: 30px; }
.drive-body { min-width: 0; }
.drive-name { font-size: 13.5px; font-weight: 700; }
.drive-path { font-size: 11.5px; color: var(--ink-2); word-break: break-all; }
.drive-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.drive-note b { color: var(--ink); }

/* ---------- 案件の追加・編集 ---------- */
.req {
  display: inline-block;
  margin-left: 6px;
  border-radius: 4px;
  background: #FDECEC;
  color: #C0362C;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 5px;
  vertical-align: 1px;
}
.pj-sec {
  margin: 16px 0 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}
.mboxes { display: flex; flex-wrap: wrap; gap: 6px; }
.mbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px 4px 5px;
  font-size: 12.5px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.mbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.mbox.is-sel { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); font-weight: 700; }
.mbox.is-fixed { cursor: default; border-style: dashed; }
.mbox-f { display: block; font-size: 10px; font-weight: 500; color: var(--ink-3); }
.mbox:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- チャット：1対1と絞り込み ---------- */
.clist-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.cseg-wrap { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.cseg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.cseg:last-child { border-right: 0; }
.cseg.is-on { background: var(--primary); color: #fff; font-weight: 700; }
.cseg-n { opacity: .75; font-size: 10.5px; }
.cbell { margin-left: auto; padding: 0 8px; }
.cbell.is-on { color: #1F7A4C; border-color: #A9D8BF; background: #E5F4EC; }
.clist-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  background: #FAFBFD;
  border-bottom: 1px solid var(--line);
}
.clist-un { margin-left: auto; color: var(--primary); }
.crow-sub { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.crow.is-dm .crow-av { border-radius: 50%; }

/* 相手を選ぶ一覧（1対1をはじめる） */
.pick-list { display: flex; flex-direction: column; }
.pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  padding: 10px 4px;
  cursor: pointer;
}
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: var(--bg); }
.pick-body { min-width: 0; flex: 1 1 auto; }
.pick-n { display: block; font-size: 13.5px; font-weight: 700; }
.pick-s { display: block; font-size: 11.5px; color: var(--ink-2); }

/* ---------- 管理（アカウント・通知） ---------- */
.tag-admin {
  display: inline-block;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
}
.ustate {
  display: inline-block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}
.us-on  { background: #E5F4EC; color: #1F7A4C; }
.us-inv { background: #FDF1DE; color: #A45B06; }
.us-off { background: #FDECEC; color: #C0362C; }
/* セル自体を flex にすると、行が高いとき（ボタンのある行）に中身が上に寄る。
   中身だけを inline-flex で包み、セルは普通の表のセルのままにする。 */
.tbl-acct .c-name { white-space: nowrap; }
.acct-name { display: inline-flex; align-items: center; gap: 7px; }
.tbl-acct tbody tr { cursor: default; }
.tbl-acct tbody tr:hover { background: none; }
.tbl-acct tbody tr.is-invited { background: #FFFDF3; }
.tbl-mail tbody tr:hover { background: var(--primary-weak); }
.acct-act { text-align: right; }
.acct-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
  margin-bottom: 10px;
}
.acct-note b { color: var(--ink); }
.ntf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FAFBFD;
}
.ntf-ico {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #EEF0F4;
  color: var(--ink-3);
}
.ntf-ico.is-on { background: #E5F4EC; color: #1F7A4C; }
.ntf-ico svg { width: 20px; height: 20px; }
.ntf-body { flex: 1 1 220px; min-width: 0; }
.ntf-t { font-size: 13.5px; }
.ntf-s { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 3px; }
.ntf-warn {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #F0D6A6;
  background: #FFFBF2;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  color: #A45B06;
}

/* ---------- 2026-08-19 追加ぶん ---------- */
/* チャットが空のときの案内（真っ白だと、送ってよい場所か分からない） */
.chat-empty {
  padding: 22px 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
  text-align: center;
}
/* 担当メンバーでない人には送信欄を出さず、理由を置く */
.chat-readonly {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
}
/* 入力は複数行に伸びる（Shift+Enter で改行） */
.chat-ta {
  resize: none;
  min-height: 40px;
  max-height: 96px;
  line-height: 1.6;
  padding-top: 9px;
  padding-bottom: 9px;
}
/* チャット入力欄の ✓ は「送信・確定」に見えるのでラベルを添える */
/* チャットの ToDo ボタンは、チェックの印だけにする（文字は添えない） */
.chat-icon { width: 40px; padding: 0; }
/* 一覧の行から案件へ直接飛ぶ */
.row-open {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--primary);
  text-decoration: underline;
}
/* 「いまの状況」のタイルから、その中身のタブへ行けるようにする */
.sum.is-link { cursor: pointer; }
.sum.is-link:hover { background: var(--bg); }
/* ToDo の数字は絞り込みの入口（押せそうで押せない、をなくす） */
button.ts-item { cursor: pointer; }
button.ts-item.is-on { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 代表がスマホでもメンバー別 ToDo を開けるように */
.seg-sel { width: auto; min-width: 140px; height: 34px; padding: 0 8px; font-size: 12px; }
/* スマホのカードにも所在地を出す（PC の表にはある） */
.pcard-addr { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
/* 利用者の切り替えが「無ラベルの丸」だと何のボタンか分からない */
.tb-user { width: auto; min-width: 44px; padding: 0 6px; }
.tb-user-l { font-size: 10px; margin-left: 3px; color: var(--ink-2); }
/* 停止中のアカウントの行 */
.tbl-acct tr.is-off { opacity: .62; }
.acct-act .acct-stop { width: auto; margin-left: 6px; }
.ustate .sub { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; font-weight: 400; }
/* 利用者メニューの中の「通知の設定」 */
.umenu { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* 案件詳細のタブは横スクロールする。続きがあることを示す */
.subtabs { position: relative; }
.subtabs::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
}
.subtabs.is-end::after { opacity: 0; }
/* テーブルは狭い画面で右が隠れる。続きがあることを示す（タブ列と同じ形） */
.table-wrap { position: relative; }
@media (max-width: 1023px) {
  .table-wrap::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
  }
  .table-wrap.is-end::after { opacity: 0; }
}
.ms-side.is-note { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
/* 狭い画面では、行の右端に送信ボタンを並べると画面からはみ出す。
   ボタンを次の行へ落とし、右そろえにする。 */
@media (max-width: 520px) {
  .ms-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ms-row .ms-side { align-items: flex-end; padding: 0 0 8px; }
  .ms-hit { padding-bottom: 4px; }
}
.chips-more { margin-top: 2px; }

/* ---------- 2026-08-19（第2便）追加ぶん ---------- */
/* 見出しの右上にその画面の主ボタンを置く */
.page-head.has-act { display: flex; align-items: flex-start; gap: 14px; }
.page-head.has-act .ph-main { min-width: 0; flex: 1 1 auto; }
.page-head.has-act .ph-act { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 640px) {
  .page-head.has-act { flex-direction: column; }
  .page-head.has-act .ph-act { width: 100%; justify-content: center; }
}

/* 絞り込み＝ふだんは状態の1段だけ。ほかは［絞り込み］の中へ */
.chip-filter { font-weight: 700; margin-left: auto; }
.chip-filter svg { width: 14px; height: 14px; margin-right: 4px; }
.chip-filter.is-open { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); }
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.fc-h { font-size: 11px; color: var(--ink-3); }
.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--primary); background: var(--primary-weak); color: var(--primary);
  border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.fchip .fc-x { font-size: 13px; line-height: 1; opacity: .7; }
.fchip:hover .fc-x { opacity: 1; }
.fc-clear { border: 0; background: none; color: var(--ink-3); font-size: 11.5px; text-decoration: underline; cursor: pointer; }
.fpanel { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.fp-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.fp-row:last-of-type { border-bottom: 0; }
.fp-k { flex: 0 0 68px; font-size: 11.5px; color: var(--ink-2); padding-top: 7px; }
.fp-v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fp-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
@media (max-width: 640px) { .fp-row { flex-direction: column; gap: 4px; } .fp-k { padding-top: 0; } }

/* 一覧の提出日は、ボタンではなく赤字の注意書き */
.c-unset { color: #C0362C; font-weight: 700; }

/* 基本情報カード＝行ごとに、その項目を直せる */
.bi-list { display: block; }
.bi-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  margin-left: -6px;
  border: 0;
  border-bottom: 1px dotted var(--line);
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.bi-row.is-static { cursor: default; }
button.bi-row:hover { background: var(--bg); }
button.bi-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.bi-row dt { color: var(--ink-3); font-size: 11.5px; padding-top: 1px; }
.bi-row dd { margin: 0; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.bi-row dd .sub2 { display: block; font-size: 11px; color: var(--ink-3); }
.row-edit { margin-left: auto; opacity: .3; display: inline-flex; flex: none; }
.row-edit svg { width: 13px; height: 13px; }
button.bi-row:hover .row-edit { opacity: .7; }
/* 行から開いたとき、その欄を一瞬だけ光らせる */
.field.is-focus { box-shadow: 0 0 0 3px rgba(0, 110, 255, .18); }

/* 担当者を「探して選ぶ」形に（全員を並べると縦に長くて読みにくい） */
.mpick { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-chips:empty { display: none; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--primary); background: var(--primary-weak); color: var(--primary);
  border-radius: 999px; padding: 3px 4px 3px 3px; font-size: 12px; font-weight: 700;
}
.mp-chip.is-fixed { border-color: var(--line); background: var(--bg); color: var(--ink-2); }
.mp-chip .avatar { background: #fff; color: inherit; }
.mp-f { font-size: 10px; font-weight: 600; color: var(--ink-3); padding: 0 4px; }
.mp-x {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; opacity: .7;
}
.mp-x:hover { opacity: 1; }
.mp-search { margin-top: 8px; }
.mp-list { margin-top: 6px; max-height: 168px; overflow-y: auto; }
.mp-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; border-bottom: 1px dotted var(--line); background: none;
  padding: 8px 4px; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.mp-row:last-child { border-bottom: 0; }
.mp-row:hover { background: var(--bg); }
.mp-n { min-width: 0; }
.mp-r { color: var(--ink-3); font-size: 11px; margin-left: 6px; }
.mp-plus { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--primary); }
.mp-empty { font-size: 11.5px; color: var(--ink-3); padding: 8px 4px; }
@media (max-width: 1023px) { .mp-row { min-height: 44px; } .mp-x { min-width: 32px; min-height: 32px; } }

/* 姓／名 の小見出し */
.field-label.is-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* サイドバー下部＝切り替えのボタンは置かず、いま開いている人と通知だけ */
.sb-user.is-static { cursor: default; }
.sb-bell {
  margin-left: auto; border: 0; background: none; color: var(--ink-3);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-bell svg { width: 17px; height: 17px; }
.sb-bell:hover { background: var(--bg); color: var(--ink); }

/* ---------- 依頼メールの添付 ---------- */
.mail-att { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-att .att-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px 6px 6px;
  background: #fff;
  font-size: 12px;
}
.mail-att .thumb { width: 34px; height: 34px; flex: none; border-radius: 7px; }
.mail-att .att-n { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.mail-att .att-s { display: block; font-size: 10.5px; color: var(--ink-3); }
.mail-att .att-x {
  border: 0; background: none; color: var(--ink-3); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.mail-att .att-x:hover { color: var(--ink); }
.mail-att.is-read .att-chip { background: var(--bg); }
.att-empty { font-size: 11.5px; color: var(--ink-3); padding: 4px 2px; }
.mail-att-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mail-att-act .btn svg { width: 14px; height: 14px; }
@media (max-width: 1023px) { .mail-att .att-x { min-width: 32px; min-height: 32px; } }

/* チャット一覧に重ねて置く「＋」（LINE のパソコン版と同じ位置づけ） */
.chat-list { position: relative; }
.clist-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(16, 24, 40, .45);
}
.clist-fab svg { width: 22px; height: 22px; }
.clist-fab:hover { filter: brightness(1.06); }
.clist-fab:active { transform: translateY(1px); }
.clist-fab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* スマホでは下部タブバーと重ならない高さに置く */
@media (max-width: 1199px) {
  .clist-fab { bottom: calc(var(--tabbar-h) + var(--note-h) + 16px); }
}