/* 週次報告（旧称 反響レポ）の画面の見た目。
   saas_demo/app_template.html（画面デモ）の <style> をそのまま移したもの。デザイン言語は
   物件査定自動化システムの app.css と同じ（色・角丸・影・ボタン・バッジ・表・左メニュー）。ライト表示のみ。
   デモから変えたのは2点だけ:
   - 左メニューの項目がリンク（<a>）になるので、`nav.menu button` を `nav.menu :is(a,button)` にした
   - 末尾の「製品用の追加」（デモに無い部品と、デモと変えたい箇所の上書き。直すときは末尾に足す） */
:root{
  --sidebar:#2f4f9f; --sidebar-2:#27438c; --sidebar-text:#c3d2ee;
  --accent:#3b6fd4; --accent-dark:#2f5cb4; --accent-soft:#eaf1fd;
  --bg:#eef1f6; --card:#ffffff; --line:#e4e9f0; --line-soft:#eef2f7;
  --ink:#2c3a4b; --ink-strong:#1d2a3a; --muted:#687588; --head:#5c6b80;
  --ok:#1b6b2c; --ok-bg:#e3f4e8; --ok-bd:#b5ddc0;
  --warn:#8a6100; --warn-bg:#fdf3da; --warn-bd:#e8d29a;
  --bad:#b8231f; --bad-bg:#fce9e7; --bad-bd:#eebbb6;
  --info:#2f5cb4; --info-bg:#eaf1fd; --info-bd:#c3d6f4;
  --gray:#4d626f; --gray-bg:#eaeef1; --gray-bd:#cdd7de;
  --c-inq:#3b6fd4; --c-view:#2e9a5b;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(29,42,58,.04),0 6px 18px rgba(29,42,58,.05);
  --paper:#FFFFFF; --paper-ink:#111; --paper-line:#9AA3AE; --paper-fill:#EEF1F5;
  --ui:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --doc:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:13.5px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- ボタン（ピル型。主要操作だけ塗りつぶし） ---- */
.btn{border-radius:999px;padding:9px 22px;font-size:13px;font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap;
  background:#fff;color:var(--accent);border:1px solid #c2d2ec;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:#f1f6fd}
.btn.primary,.btn.gold{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover,.btn.gold:hover{background:var(--accent-dark)}
.btn:disabled,.btn.primary:disabled,.btn.gold:disabled{background:#cfd7e2;color:#fff;border-color:transparent;cursor:not-allowed}
.btn.sm{font-size:12px;padding:6px 14px}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px}

/* ---- バッジ（ピル型＋小さい丸） ---- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.pill.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}
.pill.acc{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.pill.muted{background:var(--gray-bg);color:var(--gray);border-color:var(--gray-bd)}

/* ---- ログイン（査定システムのログイン画面と同じ構成） ---- */
.login{min-height:100%;background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 300px,var(--bg) 300px,var(--bg) 100%)}
.login .wrap{max-width:420px;margin:0 auto;padding-inline:16px;padding-block:56px 40px}
.login .mark{display:flex;justify-content:center;margin-bottom:10px}
.login .app-name{text-align:center;font-size:12.5px;font-weight:600;color:var(--sidebar-text);margin:0 0 24px;letter-spacing:.03em}
.login .card{padding:30px 28px}
.login h2{font-size:16px;margin:0 0 6px;color:var(--ink-strong)}
.login .hint{font-size:13px;color:var(--muted);margin:0 0 18px}
.login .btn{width:100%;margin-top:8px;padding:12px}
.login .about{margin-top:18px;font-size:12.5px;color:var(--muted);display:grid;gap:6px}
.login .about b{color:var(--ink-strong)}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:12px;font-weight:600;color:#4a5a70}
.field input,.field select,.field textarea{font:inherit;font-size:14px;padding:11px 14px;border:1px solid #ccd6e4;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,111,212,.15)}
.note{font-size:12px;color:var(--muted)}

/* ---- 製品マーク（先方ロゴの位置に置く。ロゴは管理会社ごとに差し替え） ---- */
.logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.logo i{width:30px;height:30px;border-radius:9px;background:#fff;color:var(--sidebar);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px}
.logo span{font-weight:700;font-size:16px;letter-spacing:.06em;line-height:1.2}
.logo small{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--sidebar-text)}

/* ---- 2カラム（左メニュー＋本文） ---- */
.shell{display:flex;align-items:flex-start;min-height:100vh}
aside.side{flex:0 0 220px;width:220px;align-self:stretch;background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);color:#fff;
  display:flex;flex-direction:column;gap:14px;padding:24px 12px 18px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
aside .logo{padding:2px 8px 6px}
.tenant{display:grid;gap:4px;padding:0 4px}
.tenant label{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--sidebar-text)}
.tenant select{font:inherit;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);padding:7px 9px;width:100%}
.tenant select option{color:#111;background:#fff}
nav.menu{display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
nav.menu :is(a,button){all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--sidebar-text);
  font-size:11px;font-weight:600;letter-spacing:.08em;padding:13px 8px;border-radius:var(--radius-sm);border-left:3px solid transparent;text-align:center}
nav.menu :is(a,button):hover{color:#fff;background:rgba(255,255,255,.08)}
nav.menu :is(a,button)[aria-current="page"]{color:#fff;background:rgba(255,255,255,.13);border-left-color:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
nav.menu :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:-2px}
nav.menu svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav.menu .badge{position:absolute;top:8px;right:22px;background:#fff;color:var(--sidebar);font-size:10px;font-weight:700;border-radius:99px;padding:0 6px;letter-spacing:0}
.side .foot{font-size:11px;color:var(--sidebar-text);padding:0 6px;display:grid;gap:8px}
.side .me{display:flex;gap:8px;align-items:center;color:#fff;font-size:12px;line-height:1.4}
.side .me i{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-style:normal;font-size:12px}
.side .me span{color:var(--sidebar-text)}
.side .foot button{all:unset;cursor:pointer;color:var(--sidebar-text);font-weight:600}
.side .foot button:hover{color:#fff}
main{flex:1 1 auto;min-width:0;padding:22px 26px 34px}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin:0 0 14px}
.topbar h1{font-size:17px;margin:0;font-weight:700;color:var(--ink-strong);letter-spacing:.01em}
.topbar .sub{font-size:12px;color:var(--muted)}
.demo{font-size:11px;font-weight:700;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);border-radius:99px;padding:3px 10px}

/* ---- カード・集計カード ---- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;min-width:0}
.card h2{font-size:13.5px;font-weight:700;margin:0 0 4px;color:var(--ink-strong);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .lead{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;min-width:0}
.kpi .l{font-size:11px;color:var(--muted);letter-spacing:.04em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:25px;font-weight:700;margin-top:2px;color:var(--ink-strong);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .v small{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .d{font-size:11px;color:var(--muted);margin-top:2px}
.k-i .v{color:var(--accent-dark)} .k-r .v{color:var(--ok)}
.banner{background:#fff8e8;border:1px solid #f0dcaa;border-left:4px solid #e0ab24;border-radius:var(--radius-sm);padding:10px 16px;font-size:12.5px;color:#7a5600}

/* ---- 今週の進み具合 ---- */
.week{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.week .when{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.week .ttl{font-size:16px;font-weight:700;color:var(--ink-strong)}
.track{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.track span{font-size:11.5px;font-weight:600;padding:3px 12px;border-radius:99px;background:var(--gray-bg);color:var(--muted);border:1px solid var(--line)}
.track span.done{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.track span.now{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- グラフ・ランキング ---- */
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;font-size:12px;color:#556;margin-bottom:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.rank div{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.rank div:last-child{border-bottom:0}
.rank b{font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.rank .no{color:var(--muted);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.rank .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .nm small{color:var(--muted);margin-left:6px}

/* ---- 作成の手順 ---- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.steps button{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;padding:7px 16px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;box-shadow:0 1px 2px rgba(29,42,58,.04)}
.steps .n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--gray-bg);color:var(--gray)}
.steps button[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:#fff}
.steps button[aria-current="step"] .n{background:#fff;color:var(--accent)}
.steps button.done{color:var(--ok)}
.steps button.done .n{background:var(--ok-bg);color:var(--ok)}
.steps button:disabled{opacity:.55;cursor:not-allowed}
.drops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.drop{border:1.5px dashed #c3cede;border-radius:var(--radius-sm);background:#fafbfe;padding:13px 16px;display:grid;gap:6px;align-content:start;position:relative;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:#eaf2fd}
.drop .src{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 10px;width:max-content;border:1px solid transparent}
.drop .src::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.drop.m .src{background:var(--gray-bg);color:var(--gray);border-color:var(--gray-bd)}
.drop.i .src{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.drop.r .src{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.drop .t{font-weight:700;font-size:13.5px;color:var(--ink-strong)}
.drop .how{font-size:12px;color:var(--muted)}
.drop .fn{font-size:12px;color:var(--ink);word-break:break-all;display:grid;gap:2px}
.drop .fn span::before{content:"✓ ";color:var(--ok);font-weight:700}
.drop label.pick{justify-self:start;cursor:pointer;font-size:12px;font-weight:600;color:var(--accent);background:#fff;border:1px solid #c2d2ec;border-radius:999px;padding:5px 14px}
.drop label.pick:hover{background:#f1f6fd}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.checks{display:grid;gap:8px;margin-top:14px}
.check{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-radius:var(--radius-sm);background:#fafbfe;border:1px solid var(--line-soft);font-size:13px}
.check b{color:var(--ink-strong)}
.check p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.check ul{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.err{background:#fdecea;color:#c62828;border:1px solid #f0c4bf;border-left:4px solid #c62828;border-radius:var(--radius-sm);padding:11px 16px;font-size:13px;margin-top:12px}

/* ---- 表（行の区切り線だけ・灰色の小さい見出し・行ホバー） ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.chip{font-size:12px;font-weight:600;border:1px solid #c2d2ec;background:#fff;color:var(--accent);border-radius:999px;padding:4px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.search{margin-left:auto;font:inherit;font-size:13px;padding:7px 14px;border:1px solid #ccd6e4;border-radius:999px;background:#fff;color:var(--ink);width:240px;max-width:100%}
.tbl{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);max-height:560px;background:var(--card)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;min-width:880px}
th,td{border:0;border-bottom:1px solid var(--line-soft);padding:9px 12px;text-align:left;white-space:nowrap;vertical-align:middle}
th{background:#fff;color:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.05em;position:sticky;top:0;z-index:3;box-shadow:inset 0 -1px 0 var(--line);line-height:1.35}
tbody tr:last-child > td{border-bottom:0}
tbody tr:hover > td{background:#f6f9fe}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.grp{border-left:1px solid var(--line)}
th.g-i{color:var(--info)} th.g-r{color:var(--ok)} th.g-t{color:var(--ink-strong)}
td input{width:60px;font:inherit;text-align:right;padding:4px 8px;border:1px solid #ccd6e4;border-radius:8px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
td input.changed{border-color:var(--info-bd);background:var(--info-bg);color:var(--info);font-weight:700}
.zero{color:#aab4c2}
.link{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.link:hover{text-decoration:underline}

/* ---- プレビュー ---- */
.preview{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.owners{background:#fff;border:1px solid var(--line);border-radius:var(--radius);max-height:780px;overflow-y:auto}
.owners button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;border-left:3px solid transparent}
.owners button:hover{background:#f6f9fe}
.owners button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-dark);font-weight:700;border-left-color:var(--accent)}
.owners button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.owners .cnt{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.editor{display:grid;gap:6px;background:#fafbfe;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px}
.editor label{font-size:12px;font-weight:600;color:#4a5a70}
.editor select,.editor textarea{font:inherit;font-size:13px;padding:8px 12px;border:1px solid #ccd6e4;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.editor textarea{min-height:70px;resize:vertical}
.chg{display:grid;gap:6px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:10px 12px;max-width:700px;width:100%;margin:0 auto;font-size:12px}
.chg .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chg input{font:inherit;font-size:12px;padding:5px 8px;border:1px solid #ccd6e4;border-radius:8px;background:#fff;color:var(--ink)}
.chg input[type=text]{flex:1;min-width:160px}
.pp .cnote{font-size:1.3cqw;line-height:1.5;margin-top:.5cqw;color:#222}
.pp .cnote i{display:inline-block;width:1.3cqw;height:1.3cqw;margin-right:.5cqw;vertical-align:-.15cqw}
.pages{display:grid;gap:16px;background:#dfe5ee;border-radius:var(--radius);padding:18px}

/* ---- 報告書（紙面）: PDF と同じ体裁 ---- */
.paper{container-type:inline-size;background:var(--paper);color:var(--paper-ink);aspect-ratio:210/297;width:100%;max-width:700px;margin:0 auto;box-shadow:0 1px 3px rgba(29,42,58,.12),0 10px 28px rgba(29,42,58,.14);font-family:var(--doc)}
.pp{padding:7cqw 8.4cqw;height:100%;display:flex;flex-direction:column;font-size:1.78cqw;line-height:1.5}
.pp .date{text-align:right}
.pp .to{display:flex;justify-content:space-between;align-items:flex-end;margin-top:3.4cqw;gap:2cqw}
.pp .to b{font-size:2.4cqw;border-bottom:.15cqw solid #111;padding-right:4cqw;min-width:44cqw;display:inline-block}
.pp .to span{font-size:1.7cqw;text-align:right}
.pp h3{font-size:3.4cqw;text-align:center;margin:5.2cqw 0 4.4cqw;letter-spacing:.1em}
.pp .sec{display:grid;grid-template-columns:15.5cqw 1fr;margin-top:4.2cqw;align-items:start}
.pp .sec > .h{font-weight:700;font-size:1.95cqw}
.pp .nm{font-size:2.05cqw;border-bottom:.12cqw solid var(--paper-line);padding-bottom:.6cqw}
.pp table{min-width:0;width:100%;border-collapse:collapse;border:.12cqw solid var(--paper-line);font-size:1.5cqw;table-layout:fixed}
.pp th,.pp td{border:.12cqw solid var(--paper-line);padding:.9cqw .6cqw;text-align:center;white-space:normal;position:static;color:#111;font-weight:400;box-shadow:none;letter-spacing:0;vertical-align:middle}
.pp tr:hover > td{background:transparent}
.pp th{background:var(--paper-fill);font-size:1.42cqw;line-height:1.25}
.pp td.oth{text-align:left;font-size:1.42cqw}
.pp .counts{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw 2cqw;margin-top:2.6cqw}
.pp .cur{font-weight:700}
.pp .bd{margin-top:2.8cqw;color:#555;font-size:1.42cqw;line-height:1.6}
.pp .box{flex:1;border:.12cqw solid var(--paper-line);margin-top:1.6cqw;padding:2cqw;white-space:pre-wrap;min-height:10cqw}
.pp .chartbox{white-space:normal;display:flex;flex-direction:column;justify-content:center;padding:1.6cqw 2cqw}

/* ---- 作成・送付 ---- */
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:12px 0}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.out{columns:2 280px;column-gap:24px;font-size:12.5px;background:#fafbfe;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 16px;max-height:360px;overflow-y:auto}
.out div{break-inside:avoid;padding:4px 0;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-soft)}
.out span{color:var(--muted);white-space:nowrap}
.send{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.opt{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:grid;gap:6px;align-content:start;background:#fff}
.opt b{font-size:13.5px;color:var(--ink-strong)}
.opt p{margin:0;font-size:12.5px;color:var(--muted)}
.opt.soon{background:#fff8e8;border-color:#f0dcaa}

/* ---- 設定・台帳 ---- */
.set{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.set:last-child{border-bottom:0}
.set > span{font-size:12.5px;font-weight:700;color:#4a5a70}
.set .field{margin:0}
.set .field input{max-width:360px}
.tog{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.tog input{accent-color:var(--accent);width:16px;height:16px}
.integ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.integ div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:grid;gap:6px;align-content:start}
.integ b{font-size:13.5px;color:var(--ink-strong);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.integ p{margin:0;font-size:12.5px;color:var(--muted)}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.map div{background:#fafbfe;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;display:flex;justify-content:space-between;gap:8px}
.map em{font-style:normal;color:var(--muted)}
.empty{text-align:center;padding:36px 20px;display:grid;gap:10px;justify-items:center}
.empty b{font-size:15px;color:var(--ink-strong)}
.empty p{margin:0;color:var(--muted);max-width:36em}
.onb{display:grid;gap:8px;max-width:640px;margin:6px auto;text-align:left;width:100%}
.onb div{display:flex;gap:12px;align-items:center;background:#fafbfe;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px}
.onb .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.onb b{color:var(--ink-strong)}
.onb p{margin:0;font-size:12.5px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1d2f57;color:#fff;padding:10px 20px;border-radius:99px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(20,32,55,.3);z-index:80}

/* ---- レスポンシブ（査定システムと同じ4段階） ---- */
@media (max-width:1279.98px) and (min-width:1024px){
  aside.side{flex:0 0 180px;width:180px;padding:18px 9px 14px;gap:10px}
  nav.menu :is(a,button){padding:10px 6px;gap:5px;font-size:10.5px;letter-spacing:.05em}
  nav.menu svg{width:20px;height:20px}
  main{padding:20px 18px 30px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023.98px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drops{grid-template-columns:1fr}
  .preview{grid-template-columns:1fr}
  .owners{max-height:220px}
}
@media (max-width:1023.98px) and (min-width:768px){
  aside.side{flex:0 0 64px;width:64px;padding:18px 8px 14px}
  aside .logo span,.tenant,.side .foot{display:none}
  aside .logo{padding:0 0 8px;justify-content:center}
  nav.menu :is(a,button){padding:12px 4px}
  nav.menu :is(a,button) > span:not(.badge){display:none}
  nav.menu .badge{right:6px;top:4px}
  main{padding:20px 20px 32px}
}
@media (max-width:767.98px){
  .shell{display:block}
  aside.side{flex:none;width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 2px 10px rgba(29,42,58,.18)}
  .tenant{order:3;flex:1 1 100%;padding:0}
  .tenant label{display:none}
  nav.menu{flex-direction:row;flex:1 1 auto;justify-content:flex-end;gap:2px;overflow-x:auto}
  nav.menu :is(a,button){flex-direction:row;gap:5px;padding:7px 10px;border-left:0;border-radius:999px;font-size:11px;letter-spacing:.02em}
  nav.menu :is(a,button)[aria-current="page"]{border-left:0;border-radius:999px;background:rgba(255,255,255,.18)}
  nav.menu :is(a,button) > span:not(.badge){display:none}
  nav.menu svg{width:18px;height:18px}
  nav.menu .badge{position:static}
  .side .foot{display:none}
  main{padding:16px 14px 28px}
  .g2,.send,.integ,.week{grid-template-columns:1fr}
  .search{margin-left:0;width:100%}
  .set{grid-template-columns:1fr}
  .pages{padding:10px}
  .kpi .v{font-size:22px}
  th,td{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){ .bar i,.drop,.btn{transition:none} }

/* ---- 製品用の追加（デモに無い部品・デモと変えたい箇所の上書き。ここより上は書き換えない） ---- */
.side .foot form{margin:0}
.login form{margin:0}
.login .err{margin:0 0 16px}
/* 案内の画面（404・500 など）の見出しとボタン */
.login .notice-title{font-size:16px;margin:0 0 6px;color:var(--ink-strong)}
.login a.btn{display:block;text-align:center;text-decoration:none}
.empty a.btn{text-decoration:none}

/* 製品マーク: 名称が長くなっても、マーク（四角）は縮ませず、名称は折り返さない。
   左メニューが 180px になる幅では文字を少し小さくして1行に収める */
.logo i{flex:none}
.logo span{white-space:nowrap}
aside a.logo:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1279.98px) and (min-width:1024px){
  aside .logo span{font-size:14px;letter-spacing:.02em}
}

/* ログアウト: アイコン＋文字。デモは 1024px 未満で左メニューの下部（.side .foot）を隠すが、
   製品ではログアウトの入口が消えると困るので、アイコンだけにして残す */
.side .foot .logout{display:flex;align-items:center;gap:6px}
.side .foot .logout svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side .foot .logout:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1023.98px){
  .side .foot{display:flex;justify-content:center;padding:0}
  .side .foot .by,.side .foot .logout span{display:none}
  .side .foot .logout{padding:10px;border-radius:999px}
  .side .foot .logout:hover{background:rgba(255,255,255,.08)}
  .side .foot .logout svg{width:20px;height:20px}
}
@media (max-width:767.98px){
  .side .foot{flex:none}
  .side .foot .logout{padding:7px 10px}
  .side .foot .logout svg{width:18px;height:18px}
}

/* 認証が無効なまま動いているときの警告（APP_PASSWORD 未設定＋ALLOW_NO_AUTH=1）。2カラムの外・最上部に出す */
.no-auth-banner{position:sticky;top:0;z-index:200;background:#c62828;color:#fff;font-size:13px;font-weight:700;text-align:center;padding:8px 16px}

/* ---- S3: 週次レポート作成・物件・オーナー台帳（デモが style 属性で書いていた分と、製品で足した部品） ---- */
.empty a.btn.primary{color:#fff}
td.none{text-align:center;color:var(--muted)}
.search.left{margin-left:0}
.drop .fn .busy{font-style:normal;color:var(--muted)}
.actions .confirm{align-self:center;font-size:12.5px;color:var(--bad);margin-right:auto}
.check .link{font-size:12px;margin-left:6px}
/* 集計期間の指定（リアルネットプロの閲覧履歴がない週） */
.period-box{margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fafbfe;display:grid;gap:8px}
.period-box b{color:var(--ink-strong)}
.period-box p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.period-box .err{margin-top:0}
.period-inputs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.period-inputs label{color:var(--head);font-weight:600}
.period-inputs input{font:inherit;font-size:13px;padding:5px 10px;border:1px solid #ccd6e4;border-radius:8px;background:#fff;color:var(--ink)}
/* 台帳の「報告方法」。指定してある部屋は色を変える */
select.mode{font:inherit;font-size:12px;padding:3px 6px;border:1px solid #ccd6e4;border-radius:8px;background:#fff;color:var(--ink)}
select.mode.set{border-color:var(--accent);background:var(--accent-soft)}

/* ---- S3 修正1 ---- */
/* お知らせ・エラー（閉じるまで出したままにする）・保存の状態 */
#notice{display:grid;gap:10px;margin-bottom:12px}
#notice:empty{display:none}
#notice .err{margin-top:0}
.err.sticky,#notice .banner{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.err .link{color:inherit;text-decoration:underline;white-space:nowrap}
.banner .link{white-space:nowrap}
.save-state{font-size:12px;font-weight:600;margin-left:10px;color:var(--muted)}
.save-state.saved{color:var(--ok)}
.save-state.failed{color:var(--bad)}
/* 長い文字で列の幅が広がらないよう、幅を決めて省略表示にする（全文は title） */
.clip{display:inline-block;max-width:17em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.clip.w-area{max-width:9em}
.clip.w-status{max-width:7em}
.clip.w-owner{max-width:11em}
/* 表が右に続いているとき、右端に影を出す（more-right は app.js が付ける） */
.tbl-wrap{position:relative}
.tbl-wrap.more-right:not(.pinned)::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:22px;pointer-events:none;
  background:linear-gradient(to right,rgba(29,42,58,0),rgba(29,42,58,.18));border-radius:0 var(--radius) var(--radius) 0}
/* ②件数を確認: 書き換える2列（問合 今週・内見 今週）を右端に固定し、どの幅でも見えるようにする。
   間にある「内見 先週」（行の右から2つ目）も一緒に固定する（S16: 固定しないと、表が横にはみ出す幅（1366 など）で
   問合 今週の下に隠れていた） */
/* S18（先方の目での確認 1）: 1366px でも13列が横にずらさず入るよう、オーナー・エリア・物件名は幅を決めて2行まで折り返す
   （3行目以降は省略。全文は title）。固定していない「問合 先週」が、右に固定した「問合 今週」の下に隠れないため */
.tbl.counts th,.tbl.counts td{padding-left:10px;padding-right:10px}
.tbl.counts .clip{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}
.tbl.counts .clip.w-owner{max-width:7em}
.tbl.counts .clip.w-area{max-width:6em}
.tbl.counts .clip.w-name{max-width:9em}
.tbl.counts .pin{position:sticky;background:var(--card);width:88px;min-width:88px;max-width:88px}
.tbl.counts .pin1{right:0}
.tbl.counts tr > :nth-last-child(2):not(:first-child){position:sticky;right:88px;background:var(--card);width:56px;min-width:56px;max-width:56px;z-index:2}
.tbl.counts thead tr > th:nth-last-child(2):not(:first-child){z-index:5}
.tbl.counts .pin2{right:144px}
.tbl.counts td.pin{z-index:2}
.tbl.counts th.pin{z-index:5}
.tbl.counts tbody tr:hover > td.pin,.tbl.counts tbody tr:hover > td:nth-last-child(2){background:#f6f9fe}
.tbl-wrap.pinned.more-right .counts td.pin2{box-shadow:-12px 0 10px -8px rgba(29,42,58,.28)}
.tbl-wrap.pinned.more-right .counts th.pin2{box-shadow:inset 0 -1px 0 var(--line),-12px 0 10px -8px rgba(29,42,58,.28)}
/* S20: 狭い幅（768px 未満。幅390 など）では、右の固定3列（232px）で横に動かせる幅が約56pxしか残らなかった。
   右の固定を外し、物件名の1列（号室を下に添える。td の data-room）だけを左に固定する。号室の列は隠す */
@media (max-width:767.98px){
  .tbl.counts .pin,.tbl.counts tr > :nth-last-child(2):not(:first-child){position:static;width:auto;min-width:0;max-width:none}
  .tbl-wrap.pinned.more-right .counts td.pin2{box-shadow:none}
  .tbl-wrap.pinned.more-right .counts th.pin2{box-shadow:inset 0 -1px 0 var(--line)}
  .tbl.counts .pin0{position:sticky;left:0;background:var(--card);z-index:2;box-shadow:inset -1px 0 0 var(--line)}
  .tbl.counts th.pin0{z-index:5;box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line)}
  .tbl.counts tbody tr:hover > td.pin0{background:#f6f9fe}
  .tbl.counts tr > :nth-child(4){display:none}
  .tbl.counts td.pin0::after{content:attr(data-room);display:block;color:var(--muted);font-size:11.5px}
  /* 2026-10-19（S20 検証 m4）: 表の最小幅（880px）のままだと、号室を隠した分が各列に配られて列が広がり、いちばん右まで動かしても
     「問合 今週」が物件名の固定列の下に隠れた。狭い幅では列を中身の幅にし、入力欄も少し細くする */
  .tbl.counts table{min-width:100%;width:max-content}
  .tbl.counts td input{width:54px;padding:4px 6px}
}

/* ---- S7a ダッシュボード ---- */
/* 2026-10-19: 幅390 では「お問い合わせ（今週・個別）」が途中で切れたので、狭い幅では折り返す */
@media (max-width:767.98px){.kpi .l{white-space:normal}}
.legend i.inq{background:var(--c-inq)}
.legend i.view{background:var(--c-view)}
.week a.btn,.chart a.btn{text-decoration:none}
.week a.btn.primary{color:#fff}
#checks .checks{margin-top:0}
/* 「今週のファイルを消す」を送っている間のファイルの欄（S11 修正2） */
.drop.off{opacity:.55}
.drop.off .pick{pointer-events:none;cursor:not-allowed}
/* ①の札の並びの見出し（S18 先方の目での確認 3。ダッシュボードと同じ言葉）と、退去立会日の注の小さい文字（c） */
.card h2.checks-head{margin:20px 0 0}
.card h2.checks-head + .checks{margin-top:8px}
.check .small-note{font-size:11.5px;color:var(--muted);margin-top:4px}

/* 台帳の列の対応（見出しの別名。S19） */
.aliases{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.alias-base,.alias-tag{font-size:12.5px;border-radius:var(--radius-sm);padding:4px 10px;border:1px solid var(--line-soft);background:#fafbfe;overflow-wrap:anywhere}
.alias-base{color:var(--muted);min-width:11em}
.alias-tag{display:inline-flex;gap:8px;align-items:center;background:var(--accent-soft);border-color:#c2d2ec}
.alias-add{display:inline-flex;gap:6px;align-items:center;min-width:0;flex:1 1 220px;max-width:340px}
.alias-add input{min-width:0;flex:1}
.alias-err{flex-basis:100%;order:9;margin:0;font-size:12.5px;color:var(--bad)}
.alias-tag.refused{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad)}

/* 管理会社のロゴ（左メニューの最上部。物件査定自動化システムの .brand と同じ置き方） */
aside .brand{display:block;padding:2px 8px 4px;text-decoration:none}
aside .brand-logo{display:block;width:100%;max-width:168px;height:auto}
aside a.brand:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1279.98px) and (min-width:1024px){ aside .brand-logo{max-width:140px} }
/* 768〜1023px: アイコンだけの細い列。ロゴは三角のマークだけを見せる（幅129px の画像を 36px の窓で切る） */
@media (max-width:1023.98px) and (min-width:768px){
  aside .brand{width:34px;margin:0 auto;padding:0 0 6px;overflow:hidden}
  aside .brand-logo{width:129px;max-width:none}
}
/* 767px 以下: 上の横長の帯。ロゴは小さく左に */
@media (max-width:767.98px){
  aside .brand{padding:0}
  aside .brand-logo{width:110px}
}