/**
 * 配色テーマ: 「追客CRM互換（ネイビー × ブルー）」
 * ------------------------------------------------------------
 * 追客CRM(libpartner-crm)と同じ色バランス。ネイビーのサイドバー＋ブルーの
 * アクセント＋クールグレーの背景＋白カード。状態色は緑/橙/赤。
 * レイアウトはTSUNAGU SYSTEM（建設業版）と同じサイドメニュー式で、
 * .app-shell / .sidebar / .app-main の3層構造を全画面で共通に使う。
 * ログイン系と、顧客・署名者向けの未ログイン画面だけはサイドバー無しの
 * .center-wrap を使う。
 *
 * 色は全て :root の変数で持つ。テーマを変えたい時はこのブロックだけ
 * 差し替えれば、画面側のHTMLには一切手を入れずに済む。
 * ------------------------------------------------------------
 */
:root{
  color-scheme:light;
  /* 追客CRM（libpartner-crm）と同じ色バランス：ネイビーの土台＋ブルーのアクセント＋
     クールグレーの背景＋白カード。状態色は緑/橙/赤。 */
  --ink:#1f2937; --ink-2:#3b4658; --muted:#6b7280;
  --surface:#ffffff; --surface-2:#eef2f8;
  --border:#e2e8f0; --line-strong:#cbd5e1;

  /* アクセント（ブルー）。リンク・選択中・数値・フォーカスに使う */
  --accent:#2563eb; --accent-ink:#1d4ed8;
  --accent-soft:rgba(37,99,235,.08); --accent-soft-2:rgba(37,99,235,.14);
  --accent-border:rgba(37,99,235,.5); --accent-border-soft:rgba(37,99,235,.28);
  --accent-grad:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);
  --accent-grad-hover:linear-gradient(180deg,#4c8df7 0%,#2f6ef0 100%);

  /* 状態色（CRMと同じ緑/橙/赤） */
  --ok:#16a34a; --ok-soft:rgba(22,163,74,.1);
  --warn:#ea580c; --warn-soft:rgba(234,88,12,.1);
  --bad:#dc2626; --bad-soft:rgba(220,38,38,.08);
  --info:#2563eb; --info-soft:rgba(37,99,235,.08);

  --shadow:0 8px 28px rgba(30,42,74,.08), 0 2px 6px rgba(30,42,74,.05);
  --shadow-lg:0 18px 50px rgba(30,42,74,.16);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* サイドバーはネイビー（CRMのヘッダー相当の濃い土台）。文字は明色。 */
  --sidebar-bg:#191970; --sidebar-bg-2:#3a4fc0;
  --sidebar-text:#c7d0e0; --sidebar-text-dim:#8b97b3;
  --sidebar-border:rgba(255,255,255,.09); --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-accent:#eff6ff; --sidebar-accent-soft:rgba(255,255,255,.13); --sidebar-accent-text:#ffffff;
  --avatar-grad:linear-gradient(135deg,#3b82f6,#1e2a4a);
}

*{box-sizing:border-box}

html{min-height:100%}
html,body{
  background:linear-gradient(160deg,#e7f0ff 0%,#eaf1fb 38%,#f2f7fd 72%,#f8fbff 100%) #eef3fb;
  background-attachment:fixed;
}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.8;
}

h1,h2,h3{font-weight:700;margin:0;color:var(--ink);line-height:1.5}
p{margin:0 0 12px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--border);margin:18px 0}

.card{
  background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);border:1px solid var(--border);border-radius:14px;
  padding:24px;box-shadow:var(--shadow);overflow-x:auto;
}
@media (max-width:640px){.card{padding:18px;border-radius:12px}}
.card + .card{margin-top:16px}
/* グリッドで横に並べたカードには上余白を付けない。
   付くと2枚目だけ下にずれて、見出しの高さが揃わなくなる。 */
/* カードを横に並べるグリッド。フォーム用の .grid-2 は入力欄の下端を揃えるため
   align-items:end だが、カードは上端で揃え、高さも引き伸ばして横並びを揃える。 */
.grid-2.cards,.grid-3.cards{align-items:stretch}
.grid-2.cards > .card,.grid-3.cards > .card{margin-top:0}

.grid-2 > .card + .card,
.grid-3 > .card + .card,
.grid-4 > .card + .card{margin-top:0}
.card h2{font-size:15px;margin-bottom:14px}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.6}

input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  font:inherit;font-size:14px;width:100%;padding:10px 12px;border-radius:8px;
  background:#fff;border:1px solid var(--border);color:var(--ink);line-height:1.4;
}
textarea{min-height:80px;line-height:1.7;resize:vertical}
/* selectはOSネイティブの矢印分だけ高さがinputとズレるので、appearanceを消して
   自前の矢印を描き、input/textareaと完全に同じ箱にする */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a8781' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
  padding-right:32px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
input::placeholder,textarea::placeholder{color:#a9b5af;opacity:1}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted)}

button{
  font:inherit;font-size:14px;font-weight:600;height:40px;padding:0 18px;border-radius:9px;
  cursor:pointer;background:var(--accent-grad);border:1px solid var(--accent-border);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:filter .12s,opacity .12s;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle;
}
button:hover{background:var(--accent-grad-hover);filter:brightness(1.02)}
button:disabled{opacity:.5;cursor:default}
/* セカンダリ系も薄いグラデ地にして「全ボタンがグラデ」で統一する */
button.secondary{background:linear-gradient(180deg,#ffffff 0%,#eef3fb 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);border-color:var(--border);color:var(--ink-2)}
button.secondary:hover{background:linear-gradient(180deg,#f4f8ff 0%,#e4edfb 100%);border-color:var(--accent);color:var(--accent);filter:none}
button.danger{background:linear-gradient(180deg,#ffffff 0%,#fdeeee 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);border-color:rgba(198,40,40,.35);color:var(--bad)}
button.danger:hover{background:linear-gradient(180deg,#fdecec 0%,#f7dcdc 100%);border-color:var(--bad);filter:none}
button.success{background:linear-gradient(180deg,#ffffff 0%,#eaf6ee 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);border-color:rgba(22,163,74,.36);color:var(--ok)}
button.success:hover{background:linear-gradient(180deg,#e9f6ee 0%,#d8efe0 100%);border-color:var(--ok);filter:none}
button.mini{padding:0 12px;height:32px;font-size:12px}
button.icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* 詳細モーダル右上の「編集」「閉じる」等。文字数や場所によらず同じ高さに揃える */
.modal-hdr-btn{height:36px;padding:0 18px;border-radius:8px;min-width:78px;text-align:center}

.error{
  color:var(--bad);background:var(--bad-soft);border:1px solid rgba(198,40,40,.35);
  border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.7;
}
.notice{
  color:var(--ok);background:var(--ok-soft);border:1px solid rgba(22,163,74,.32);
  border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.7;
}
.warnbox{
  color:var(--warn);background:var(--warn-soft);border:1px solid rgba(169,112,10,.3);
  border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.7;
}
.notice a,.error a,.warnbox a{color:inherit;text-decoration:underline}

.badge{
  display:inline-block;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border-soft);
  white-space:nowrap;
}
.badge.off{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(22,163,74,.32)}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:rgba(198,40,40,.35)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(169,112,10,.3)}
.badge.info{background:var(--info-soft);color:var(--info);border-color:rgba(44,90,168,.3)}

table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);padding:9px 10px;white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap;color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
td.wrap,th.wrap{white-space:normal;min-width:180px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);font-size:13px;padding:24px 10px;text-align:center}
/* 並び替え可能な見出し */
th.th-sort{cursor:pointer;user-select:none}
th.th-sort:hover{color:var(--accent)}
th.th-sort::after{content:"⇅";margin-left:5px;opacity:.35;font-size:10px}
th.th-sort.sort-asc::after{content:"▲";opacity:.95;color:var(--accent)}
th.th-sort.sort-desc::after{content:"▼";opacity:.95;color:var(--accent)}
/* 手動並べ替え（ドラッグ&ドロップ） */
.drag-col{width:30px;text-align:center;padding-left:6px;padding-right:0}
.drag-handle{cursor:grab;color:var(--muted);font-size:15px;line-height:1;user-select:none;display:inline-block}
tr[draggable="true"]{cursor:grab}
tr.dragging{opacity:.45;background:var(--surface-2)}
/* 録音リンク（通話ログ） */
.rec-link{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--accent);
  border:1px solid var(--accent-border);border-radius:999px;padding:1px 9px;text-decoration:none;white-space:nowrap}
.rec-link:hover{background:var(--accent-soft,rgba(37,99,235,.08))}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------
 * サイドメニュー式のアプリ全体レイアウト
 * ------------------------------------------------------------ */
.app-shell{display:flex;align-items:flex-start;min-height:100vh}

.sidebar{
  width:236px;flex:none;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  border-right:1px solid var(--sidebar-border);
  padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  color:var(--sidebar-text);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(37,99,235,.22);border-radius:3px}

.sidebar-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 6px;min-width:0}
.sidebar-brand-mark{width:34px;height:34px;flex:none;border-radius:9px;object-fit:cover;display:block}
.sidebar-brand-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.sidebar-brand-title{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--sidebar-accent-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-brand-company{
  font-size:11px;color:var(--sidebar-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--sidebar-text);white-space:nowrap;
}
.sidebar-nav a svg{flex:none;width:16px;height:16px;opacity:.7}
.sidebar-nav a:hover{background:var(--sidebar-hover);text-decoration:none;color:var(--sidebar-accent-text)}
.sidebar-nav a.active{
  background:var(--sidebar-accent-soft);color:var(--sidebar-accent-text);font-weight:700;
  box-shadow:inset 2px 0 0 var(--accent);
}
.sidebar-nav a.active svg{opacity:1}
.nav-badge{margin-left:auto;flex:none;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-badge[hidden]{display:none}

.nav-group{margin:2px 0}
.nav-group summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:12px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sidebar-text-dim);white-space:nowrap;
}
.sidebar-nav > .nav-group:first-child summary{padding-top:0}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{
  content:'';width:6px;height:6px;flex:none;
  border-right:1.5px solid var(--sidebar-text-dim);border-bottom:1.5px solid var(--sidebar-text-dim);
  transform:rotate(45deg);transition:transform .15s;
}
.nav-group[open] summary::after{transform:rotate(-135deg)}
.nav-group-body{display:flex;flex-direction:column;gap:2px}

.sidebar-footer{
  margin-top:auto;border-top:1px solid var(--sidebar-border);padding-top:12px;
  display:flex;align-items:center;gap:10px;
}
.sidebar-user{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.sidebar-avatar{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:var(--avatar-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}
.sidebar-user-info{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sidebar-user-info #who{font-size:12.5px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-info small{font-size:10px;color:var(--sidebar-text-dim);letter-spacing:.06em}
.sidebar-footer button{
  flex:none;width:32px;height:32px;padding:0;border-radius:8px;font-size:14px;line-height:1;
  /* 薄いインディゴ背景でも見えるよう、枠とアイコンをはっきりさせる */
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#ffffff;
  display:flex;align-items:center;justify-content:center;box-shadow:none;
}
.sidebar-footer button:hover{border-color:#ffffff;color:#ffffff;filter:none;background:rgba(255,255,255,.26)}
.sidebar-footer button.on{border-color:#ffffff;color:#ffffff;background:rgba(255,255,255,.3)}

.app-main{flex:1;min-width:0;max-width:1100px;margin:0 auto;padding:32px 40px}
/* 一覧・ボード系は幅いっぱいで使う */
.app-main.compact{max-width:none;padding:28px}
@media (max-width:640px){.app-main.compact{padding:20px 16px}}
.app-main.compact h1{font-size:24px !important}
.app-main.compact .card{padding:20px}
.app-main.compact table th{padding:8px 12px;font-size:11px;font-weight:600}
.app-main.compact table td{padding:8px 12px;font-size:12px}
.app-main.compact .card h2{font-size:14px}
.app-main.compact select,.app-main.compact input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.app-main.compact textarea{font-size:13px}
.app-main.compact button:not(.mini):not(.icon){font-size:13px}

/* ページ見出し */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head .page-title{flex:1;min-width:220px}
.page-head h1{font-size:22px;margin-bottom:4px}
.page-head .lead{color:var(--muted);font-size:12.5px;margin:0;line-height:1.7}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* フォームの段組み。列数はクラスで切り替える */
.grid-2,.grid-3,.grid-4,.grid-5{display:grid;gap:12px;align-items:end}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){
  .grid-3,.grid-4,.grid-5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
}
.span-2{grid-column:span 2}
@media (max-width:560px){.span-2{grid-column:span 1}}

/* 絞り込みバー */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filter-bar .field{margin:0;min-width:140px}
.filter-bar .grow{flex:1;min-width:200px}

/* 数値サマリー（KPIタイル） */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat{
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);
}
.stat .label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-bottom:6px}
.stat .value{font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .value small{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px}
.stat .sub{font-size:11px;color:var(--muted);margin-top:4px}
.stat.accent .value{color:var(--accent)}
.stat.ok .value{color:var(--ok)}
.stat.warn .value{color:var(--warn)}

/* タブ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tabs button{
  background:transparent;border:0;border-bottom:2px solid transparent;box-shadow:none;
  color:var(--muted);font-size:13px;font-weight:600;height:auto;padding:9px 14px;border-radius:0;
}
.tabs button:hover{background:var(--surface-2);color:var(--ink-2);filter:none}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* パイプライン（案件ボード） */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.board-col{
  flex:0 0 260px;background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;max-height:calc(100vh - 260px);
}
.board-col-head{
  padding:11px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;
  position:sticky;top:0;background:linear-gradient(180deg,#fff,#f6f8fc);border-radius:12px 12px 0 0;
}
.board-col-head .t{font-size:12px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-col-head .n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.board-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.board-col.drop{background:var(--accent-soft)}
.deal-card{
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 12px;
  box-shadow:0 1px 3px rgba(30,42,74,.05);cursor:grab;font-size:12px;line-height:1.6;
}
.deal-card:hover{border-color:var(--accent-border-soft);box-shadow:var(--shadow)}
.deal-card .dc-title{font-weight:700;font-size:12.5px;margin-bottom:3px;color:var(--ink)}
.deal-card .dc-meta{color:var(--muted);font-size:11px;display:flex;gap:8px;flex-wrap:wrap}
.deal-card .dc-price{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.deal-card.dragging{opacity:.4}
.deal-card .dc-alert{color:var(--bad);font-size:11px;font-weight:700}

/* タイムライン（活動履歴） */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--border);margin-left:4px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{
  content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
}
.timeline li.todo::before{border-color:var(--warn)}
.timeline .tl-head{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.timeline .tl-body{font-size:13px;line-height:1.75;white-space:pre-wrap;margin-top:2px}

/* 写真グリッド */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.photo-cell{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.photo-cell img{width:100%;height:110px;object-fit:cover;display:block}
.photo-cell .pc-bar{display:flex;align-items:center;gap:4px;padding:5px 7px;font-size:10.5px;color:var(--muted);background:#fff}
.photo-cell .pc-bar .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-cell button{padding:0 6px;height:22px;font-size:10.5px;border-radius:6px}

/* モーダル（全画面共通） */
.modal-bg{position:fixed;inset:0;background:rgba(20,28,50,.42);display:none;align-items:center;justify-content:center;z-index:120;padding:16px}
.modal-bg.open{display:flex}
.modal-card{
  background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:min(680px,100%);
  max-height:90vh;overflow:auto;padding:22px;
}
.modal-card.wide{width:min(1000px,100%)}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.modal-head h2{font-size:15px;margin:0;flex:1;min-width:0}

/* 詳細表示の定義リスト */
.dl{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;font-size:13px;align-items:baseline}
.dl dt{color:var(--muted);font-size:11.5px;font-weight:600;margin:0}
.dl dd{margin:0;word-break:break-word}
@media (max-width:560px){.dl{grid-template-columns:96px 1fr}}

/* 進捗バー */
.progress{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--accent-grad);border-radius:999px}

/* チップ（選択式の絞り込み） */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;
  font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;box-shadow:none;
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:#fff;filter:none}
.chip.on{background:var(--accent-soft);border-color:var(--accent-border-soft);color:var(--accent)}

/* 行内の小さな補助文字 */
.sub{color:var(--muted);font-size:11.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flex-end{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mt{margin-top:14px}
.mb{margin-bottom:14px}

/* ------------------------------------------------------------
 * サイドメニューの開閉
 *  PC(>900px)：メニュー上部の「«」で畳める。状態はlocalStorageに保存。
 *  タブレット・スマホ(≦900px)：左からスライドするドロワー＋上部バー。
 * ------------------------------------------------------------ */
.sb-collapse{
  margin-left:auto;flex:none;width:30px;height:30px;padding:0;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--sidebar-border);color:var(--sidebar-text);
  box-shadow:none;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
}
.sb-collapse:hover{background:var(--sidebar-hover);filter:none;color:var(--accent)}
.sb-fab{
  position:fixed;top:14px;left:14px;z-index:60;width:40px;height:40px;padding:0;border-radius:10px;
  display:none;align-items:center;justify-content:center;font-size:18px;
}
body.sidebar-collapsed .sidebar{display:none}
body.sidebar-collapsed .sb-fab{display:flex}
body.sidebar-collapsed .app-main{padding-top:64px}
.mobile-bar{display:none}
.sb-backdrop{display:none}

@media (max-width:900px){
  .sb-collapse,.sb-fab{display:none !important}
  body.sidebar-collapsed .sidebar{display:flex}
  body.sidebar-collapsed .app-main{padding-top:20px}
  .app-shell{flex-direction:row}
  .mobile-bar{
    position:fixed;top:0;left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;gap:12px;padding:0 12px;
    background:linear-gradient(180deg,#ffffff,#eef2f8);color:var(--ink);border-bottom:1px solid var(--border);
  }
  .mobile-bar button{width:40px;height:40px;padding:0;font-size:20px;line-height:1;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);box-shadow:none;color:var(--accent)}
  .mobile-bar .mb-title{font-size:13px;font-weight:700;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent-ink)}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:100;width:min(300px,86vw);height:100dvh;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(20,28,50,.28);
    padding:20px 14px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow-y:auto;
  }
  body.sidebar-open .sidebar{transform:none}
  .sb-backdrop{position:fixed;inset:0;z-index:90;background:rgba(20,28,50,.45)}
  body.sidebar-open .sb-backdrop{display:block}
  body.sidebar-open{overflow:hidden}
  .app-main,.app-main.compact{padding:68px 14px 24px !important}
  .sidebar-nav a{padding:11px 10px}
  .board-col{flex:0 0 78vw;max-height:none}
  /* スマホでは横幅の広い表はカードの中だけで横スクロールさせ、ページ全体が横に伸びないようにする */
  .app-main .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .app-shell{overflow-x:hidden}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px}
  .page-head .actions{width:100%}
  /* iOSはフォント16px未満の入力にフォーカスすると自動ズームし、レイアウトが崩れる（送信ボタン等が見切れる）。
     スマホでは入力を16pxにしてズームを防ぐ。 */
  .app-main.compact select,.app-main.compact input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.app-main.compact textarea{font-size:16px}
  .ch-input textarea{font-size:16px}
}
@media (max-width:640px){
  .app-main,.app-main.compact{padding:66px 12px 24px !important}
  h1{font-size:20px !important}
}

/* ------------------------------------------------------------
 * ログイン系と、顧客マイページ・署名者向けの未ログイン画面
 * ------------------------------------------------------------ */
.center-wrap{max-width:420px;margin:60px auto;padding:0 20px}
.center-wrap.wide{max-width:920px}
.brand{font-weight:700;font-size:22px;text-align:center;margin-bottom:6px;color:var(--ink);letter-spacing:.02em}
.brand small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.08em;margin-top:6px}

.topbar{
  display:flex;justify-content:space-between;align-items:center;padding:14px 24px;
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{margin:0;font-size:16px;text-align:left}
.topbar .brand small{display:none}
main:not(.app-main){max-width:980px;margin:0 auto;padding:32px 20px}

.sys-icon{
  width:60px;height:60px;margin:0 auto 18px;border-radius:12px;
  border:1.5px solid var(--accent-border-soft);background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.sys-icon svg{width:28px;height:28px;color:var(--accent)}

.sys-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:8px;
}
.sys-divider{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.sys-divider::before,.sys-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.sys-divider span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.sys-footer{text-align:center;font-size:11px;color:var(--muted);margin-top:22px}

/* アイコンクリックで画像を拡大表示するライトボックス */
.avatar-lightbox-overlay{position:fixed;inset:0;background:rgba(20,28,50,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.avatar-lightbox-img{max-width:80vw;max-height:76vh;border-radius:50%;box-shadow:var(--shadow);background:var(--avatar-grad);display:block}
.avatar-lightbox-close{position:absolute;top:20px;right:24px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.avatar-lightbox-close:hover{background:rgba(255,255,255,.34)}
.avatar-lightbox-change{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:999px;background:#fff;color:var(--ink);border:none;font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}

/* 金額入力（shell.jsのbindMoney）：右端に「円」 */
.money-wrap{position:relative;display:block;width:100%;min-width:0}
.money-wrap::after{content:'円';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);pointer-events:none}

/* 顧客マイページ（公開画面）の物件カード */
.mp-hero{background:linear-gradient(180deg,#fff,#f4f7fc);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:var(--shadow);margin-bottom:20px}
.mp-list{display:grid;gap:16px}
.mp-item{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.mp-item-body{padding:18px 20px}
.mp-item h3{font-size:16px;margin-bottom:6px}
.mp-price{font-size:20px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.mp-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;background:var(--surface-2)}
.mp-photos img{width:100%;height:150px;object-fit:cover;display:block;cursor:pointer}
.mp-react{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}


/* ============================================================
   SONAE SYSTEM で足した小物
   ============================================================
   保険の画面は「種別」「状態」「あと何日」を表の中に大量に出すため、
   小さなバッジと数値タイルを共通化しておく。色は呼び出し側から
   style で渡す（種別ごとの色分けは js/masters.js が持つ）。 */
.sbadge{
  display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;
  font-weight:700;line-height:1.7;white-space:nowrap;
}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.sum .c{
  background:linear-gradient(160deg,#eef4ff,#f7fbff);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
}
.sum .c.alert{background:linear-gradient(160deg,#fff1ec,#fff8f5);border-color:rgba(234,88,12,.35)}
.sum .c .l{font-size:11.5px;color:var(--muted);font-weight:600}
.sum .c .v{font-size:22px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.35}
.sum .c .s{font-size:11px;color:var(--muted)}
.sum .c.clickable{cursor:pointer}
.sum .c.clickable:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;min-width:130px}
.toolbar .grow{flex:1;min-width:180px}
.rowlink{cursor:pointer}
.rowlink:hover{background:var(--accent-soft)}
.subtle{color:var(--muted);font-size:11.5px}
.stack{display:flex;flex-direction:column;gap:2px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 20px}
.detail-grid .k{font-size:11px;color:var(--muted);font-weight:600}
.detail-grid .v{font-size:13.5px;word-break:break-word}
.tl{list-style:none;margin:0;padding:0}
.tl li{border-left:2px solid var(--border);padding:0 0 16px 16px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.tl .t{font-size:11.5px;color:var(--muted)}
/* 表の行内に置く小さなボタン（削除・更改など） */
button.small{height:30px;padding:0 12px;font-size:12px;border-radius:7px}