:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1f2328;
  --quiet: #59636e;
  --line: #d8dee4;
  --accent: #1f6feb;
  --accent-soft: #e7f0fd;
  --warn: #9a6700;
  --warn-soft: #fff8c5;
  --bad: #cf222e;
  --good: #1a7f37;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 小さな文字でも読みやすい「BIZ UDPゴシック」（Windowsに標準で入っている）。ないときは今までの書体 */
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- 左のメニュー ---- */
.layout { display: flex; min-height: 100vh; }
.side {
  width: 220px;
  flex: none;
  background: #24292f;
  color: #e6edf3;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side a { color: #e6edf3; }
.side .brand { font-weight: 700; font-size: 16px; padding: 0 8px; }
.side .facility label { display: block; font-size: 12px; color: #9da7b1; padding: 0 8px 2px; }
.side .facility select { width: 100%; font-size: 16px; font-weight: 700; }
.side .menu summary { display: none; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { padding: 10px 12px; border-radius: 6px; font-size: 16px; }
.side nav a:hover { background: #32383f; text-decoration: none; }
.side nav a.on { background: var(--accent); color: #fff; font-weight: 700; }
.side nav .sep { border-top: 1px solid #3d444d; margin: 8px 4px; }
.side nav a.admin-link small { color: #9da7b1; margin-left: 2px; }
.side .who { margin-top: auto; padding: 0 8px; color: #9da7b1; display: flex; flex-direction: column; gap: 6px; }
.side .who form { margin: 0; }
.side .who button { background: transparent; color: #e6edf3; border-color: #3d444d; }

main { flex: 1; min-width: 0; max-width: 1080px; padding: 20px 24px; }

/* メニューを隠す・出すボタン */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-close { background: transparent; color: #9da7b1; border: 1px solid #3d444d; padding: 0 8px; font-size: 16px; line-height: 26px; }
.side-close:hover { color: #fff; background: #32383f; }
.side-open {
  display: none; position: fixed; left: 10px; top: 10px; z-index: 20;
  background: #24292f; color: #e6edf3; border-color: #24292f; font-size: 14px; padding: 6px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.side-hidden .side { display: none; }
.side-hidden .side-open { display: inline-block; }
.side-hidden main { padding-top: 52px; max-width: none; }

h1 { font-size: 22px; margin: 4px 0 12px; }
h2 { font-size: 17px; margin: 0 0 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat .num { font-size: 28px; font-weight: 700; }
.stat .label { color: var(--quiet); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--quiet); font-weight: 600; white-space: nowrap; }
tr.muted td { color: var(--quiet); }

dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.fields dt { color: var(--quiet); }
dl.fields dd { margin: 0; }

input, select, textarea {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}

.btn, button {
  font: inherit;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover { text-decoration: none; }

.badge { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 12px; background: var(--accent-soft); color: var(--accent); }
.badge.off { background: #eef0f2; color: var(--quiet); }
.badge.good { background: #dafbe1; color: var(--good); }
.badge.away { background: #ffebe9; color: var(--bad); font-size: 13px; vertical-align: middle; }

/* 入居者の経過（新しい順の時系列） */
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.card-head .card-note { margin-left: auto; font-size: 13px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 3px solid var(--line); }
.timeline li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0 5px 12px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -8px; top: 11px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2px solid #8c959f; }
.timeline .ev-date { font-variant-numeric: tabular-nums; color: var(--quiet); white-space: nowrap; min-width: 6.5em; }
.timeline .ev-kind { font-weight: 700; white-space: nowrap; min-width: 6em; }
.timeline .ev-text { overflow-wrap: anywhere; }
.timeline .ev-consult::before { border-color: #9a6700; }
.timeline .ev-in::before, .timeline .ev-back::before { border-color: var(--good); background: #dafbe1; }
.timeline .ev-move::before { border-color: var(--accent); }
.timeline .ev-care::before { border-color: #8250df; }
.timeline .ev-away::before, .timeline .ev-out::before { border-color: var(--bad); background: #ffebe9; }
.timeline .ev-away .ev-kind, .timeline .ev-out .ev-kind { color: var(--bad); }

.notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: var(--warn-soft); color: var(--warn); border: 1px solid #eac54f; }
.messages { list-style: none; padding: 0; margin: 0 0 14px; }
.messages li { padding: 10px 14px; border-radius: 8px; background: #dafbe1; color: var(--good); }

form.stack p { margin: 0 0 12px; }
form.stack label { display: block; font-weight: 600; margin-bottom: 2px; }
form.stack .helptext { display: block; color: var(--quiet); font-size: 13px; }
.errorlist { color: var(--bad); margin: 4px 0; padding-left: 18px; }

.rooms { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.room { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); }
.room.vacant { border-color: var(--good); background: #f3fbf5; }
.room .no { font-weight: 700; }

.history td { font-size: 13px; }
.quiet { color: var(--quiet); }

/* ---- 建物の図（部屋割りの表と同じ並び） ---- */
.map-summary { display: flex; gap: 10px; margin-bottom: 10px; }
.map-summary div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; }
.map-summary .label { color: var(--quiet); margin-right: 8px; }
.map-summary .num { font-size: 20px; font-weight: 700; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; margin: 0 0 10px; }
.map-legend .swatch { display: inline-block; width: 14px; height: 14px; background: #c8f2c8; border: 1px solid #7ccf7c; margin-right: -12px; vertical-align: middle; }
.guide { color: var(--bad) !important; }
.meal { color: var(--accent) !important; }

/* 全階を1画面に：階の名前は左に、マスは画面の幅に合わせて縮める（横に流さない） */
.map-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 8px; }
.map-top .map-summary, .map-top .map-legend { margin: 0; }
.floors { display: flex; flex-direction: column; gap: 4px; }
main:has(.floors) { max-width: none; }  /* 部屋の図は画面の幅いっぱいを使う */
.floor { display: flex; gap: 6px; align-items: stretch; }
.floor-label { flex: none; width: 52px; display: flex; flex-direction: column; justify-content: center; font-weight: 700; font-size: 15px; line-height: 1.3; }
.floor-label .quiet { font-weight: 400; font-size: 12px; }
.map-scroll { flex: 1; min-width: 0; overflow-x: auto; }  /* 狭い画面だけ横に流す（マスは46pxより細くしない） */
.floor-map { display: grid; gap: 0; padding: 1px 0 0 1px; }
/* どの部屋も同じ大きさ：番号・名前（2行）・見込み欄（1行）・下の1行（自動の注記と備考）。
   枠の線は部屋ごとに四辺とも描く（隣や上が空いている部屋でも線が欠けない）。重なる線は -1px で1本に見せる */
.map-room { border: 1px solid #8c959f; margin: -1px 0 0 -1px; background: var(--card); height: 64px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.map-room .no { flex: none; background: #f4f31a; text-align: center; font-weight: 700; font-size: 11px; line-height: 15px; border-bottom: 1px solid #8c959f; }
/* 名前は2行まで（はみ出して部屋の枠の線にかからないよう、入りきらない分は切る。かざすと全部出る） */
.map-room .who { flex: none; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 0 2px; overflow: hidden; }
.map-room .who a, .map-room .who span { color: var(--ink); font-size: 12px; line-height: 15px; text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: none; max-width: 100%; }
.map-room .who .lv { display: inline; }
/* 入居見込みの人は、入居者と同じ名前の行に紫で */
.map-room .who .prospect { color: #8250df; font-size: 11px; }
.map-room .who .value:empty { display: none; }
.map-room .who.overridden .auto { display: none; }  /* 手書きの見込みが自動の見込みを上書き */
.map-room .who.editable { cursor: text; }
.map-room .who.editable:hover { background: #f8f3ff; }
.map-room .who.saved { background: #dafbe1; }
.map-room .who.editing > :not(.value) { display: none; }
.map-room .who.editing .value { display: block; width: 100%; }
.map-room .who input { width: 100%; height: 16px; border: 1px solid #8250df; font-size: 11px; padding: 0 2px; }
.map-room .lv { margin-left: 1px; font-size: 11px; }
/* 見込み欄・備考欄：1行。空室の緑の上でも見えるよう、区切りの点線は濃いめ */
.map-room .plan, .map-room .foot { flex: none; height: 15px; font-size: 10px; line-height: 14px; text-align: center; padding: 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px dashed #57606a; }
.map-room .plan { color: #8250df; font-size: 11px; border-top: 0; border-bottom: 1px dashed #57606a; }  /* 部屋番号のすぐ下 */
.map-summary .plan-count .num { color: #8250df; }
.map-room .plan .auto + .auto::before, .map-room .plan .auto + .value:not(:empty)::before { content: '・'; }
.map-room .plan.editable, .map-room .foot.editable { cursor: text; }
.map-room .plan.editable:hover { background: #f8f3ff; }
.map-room .plan.saved { background: #dafbe1; }
.map-room .plan.editing .auto { display: none; }
.map-room .plan input { width: 100%; height: 14px; border: 1px solid #8250df; font-size: 11px; padding: 0 2px; }
.map-room .foot { flex: 1; }
.map-room .foot .memo { color: #0b44c8; }
.map-room .foot.editable { cursor: text; }
.map-room .foot.editable:hover { background: #f1f8ff; }
.map-room .foot.saved { background: #dafbe1; }
.map-room .foot.editing .memo { display: none; }
.map-room .foot input { width: 100%; height: 14px; border: 1px solid var(--accent); font-size: 11px; padding: 0 2px; }
.map-room .foot .value:not(:empty)::before { content: ' '; }
/* 赤字・青字のペン */
.pens { display: inline-flex; align-items: center; gap: 6px; }
.pen { font-size: 13px; padding: 1px 8px; background: var(--card); }
.pen.guide { color: #cf222e; border-color: #cf222e; }
.pen.meal { color: #0969da; border-color: #0969da; }
.pen.on.guide { background: #cf222e; color: #fff !important; }
.pen.on.meal { background: #0969da; color: #fff !important; }
.pen-hint { font-size: 12px; }
.floors.painting .who a { cursor: crosshair; text-decoration: underline dotted; }
.map-room .who a.saved { background: #dafbe1; }
.map-room.green { background: #c8f2c8; }  /* 空室は薄い緑（2026-10-26 ユーザー指示） */

/* ---- 入居管理 ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabs a { padding: 6px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tabs a:hover { text-decoration: none; }
.tabs .count { font-size: 12px; opacity: .8; margin-left: 2px; }
.status { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 13px; background: #eef0f2; color: var(--quiet); }
.status.s-相談中 { background: #fff8c5; color: var(--warn); }
.status.s-入居決定 { background: var(--accent-soft); color: var(--accent); }
.status.s-入居済 { background: #dafbe1; color: var(--good); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.check { color: var(--quiet); }
.check.done { color: var(--good); font-weight: 600; }
.form-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.form-grid p.wide { grid-column: 1 / -1; }
.form-grid p.wide textarea { width: 100%; }
.form-grid input:not([type=checkbox]), .form-grid select { width: 100%; }
.form-grid p.cb label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.link-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid #b6d0f7; }
.link-form h3 { margin: 0 0 4px; font-size: 15px; }

/* ---- 入居管理の一覧表（シートと同じ形） ---- */
.quick-add { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.quick-add label { display: flex; gap: 4px; align-items: center; }
.grid-help { margin: 0 0 6px; font-size: 13px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-help b { color: var(--ink); }
kbd { display: inline-block; padding: 0 5px; border: 1px solid #c4cad1; border-bottom-width: 2px; border-radius: 4px; background: #f6f8fa; font-family: inherit; font-size: 12px; line-height: 1.5; }
.grid-wrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid #8c959f; background: var(--card); }
/* 列の幅は colgroup で決める（元のシートに合わせた必要最低限の幅） */
table.sheet { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; font-family: "BIZ UDPGothic", "BIZ UDPゴシック", inherit; }
input, select, textarea, button { font-family: inherit; }
table.sheet th, table.sheet td { border-right: 1px solid #d0d7de; border-bottom: 1px solid #d0d7de; padding: 3px 4px; vertical-align: top; overflow: hidden; }
table.sheet thead th { position: sticky; top: 0; background: #fbe5b6; color: var(--ink); font-weight: 600; z-index: 2; white-space: normal; text-align: center; font-size: 12px; line-height: 1.25; vertical-align: bottom; word-break: break-all; }
table.sheet thead tr:nth-child(2) th { top: 22px; }
table.sheet thead tr.groups th { height: 22px; padding: 2px 4px; vertical-align: middle; }
table.sheet thead tr.groups th.g { background: #f6d38a; }
table.sheet .sticky { position: sticky; background: var(--card); z-index: 1; }
table.sheet thead .sticky { z-index: 3; background: #fbe5b6; vertical-align: middle; }
table.sheet .s1 { left: 0; }
table.sheet .s2 { left: 124px; box-shadow: 2px 0 0 #8c959f; }
/* セルの文字は折り返して全部見せる（行の高さは中身に合わせて伸びる）。日付だけは1行のまま */
table.sheet td .v { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
table.sheet td.k-date .v { white-space: nowrap; word-break: normal; }
table.sheet td.col-prospect { text-align: center; }
table.sheet td.col-invoice_no .v { white-space: nowrap; word-break: normal; }  /* 請求書NOの4桁を折り返さない */
table.sheet td.k-date .v { white-space: nowrap; word-break: normal; }  /* 日付（生年月日など）を途中で折り返さない */
/* 細い列で中身が長くなるもの（障害手帳・自立支援・確定通帳）は、中身も縦書き */
table.sheet td.col-disability_card, table.sheet td.col-independence_support, table.sheet td.col-confirmed_bankbook { text-align: center; }
table.sheet td.col-disability_card .v, table.sheet td.col-independence_support .v, table.sheet td.col-confirmed_bankbook .v {
  display: inline-block; writing-mode: vertical-rl; text-orientation: upright; line-height: 1.1; max-inline-size: 8em;
}
/* 短い値の列とチェックだけの列：見出しを縦書きにする */
table.sheet th.vh { padding: 4px 1px; }
/* 長い見出しは縦2行に折り返して、見出しの高さを詰める（1行あたり7文字まで） */
table.sheet th.vh .vt { writing-mode: vertical-rl; text-orientation: upright; line-height: 1.1; display: inline-block; white-space: normal; max-inline-size: 7em; word-break: break-all; }
table.sheet td.k-bool { text-align: center; padding: 2px 0; }
table.sheet td.k-bool input { margin: 0; width: 16px; height: 16px; min-width: 16px; vertical-align: middle; cursor: pointer; }
table.sheet td.col-name { font-weight: 700; }
table.sheet td.col-name .kana { display: block; font-size: 10px; font-weight: 400; color: var(--quiet); line-height: 1.2; min-height: 0; }
table.sheet td.col-name .kana:empty { display: none; }
table.sheet td.col-name .v:empty::after { content: '（氏名なし）'; color: var(--quiet); font-weight: 400; }
table.sheet td.editing .name-edit { position: absolute; left: 0; top: 0; width: 200px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); border: 2px solid var(--accent); }
table.sheet td.editing .name-edit input { position: static; width: 100%; border: 0; box-shadow: none; display: block; }
table.sheet td.editing .name-edit input.kana-input { font-size: 12px; border-bottom: 1px solid var(--line); color: var(--quiet); }
/* 氏名の横の［詳細］：目立ちすぎない灰色の小さなボタン */
table.sheet td.col-name .to-detail, .detail-chip {
  float: right; font-size: 10px; font-weight: 400; line-height: 1.5; color: var(--quiet);
  border: 1px solid #c4cad1; border-radius: 4px; padding: 0 4px; margin: 1px 0 0 4px; background: #f6f8fa; text-decoration: none;
}
.detail-chip { float: none; display: inline-block; margin: 0 2px; }
table.sheet td.col-name .to-detail:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); text-decoration: none; }
table.sheet td.col-status .status { white-space: nowrap; padding: 0 6px; font-size: 12px; }
table.editable td.cell:not(.k-bool) { cursor: text; }
/* 入居後の手続きが済んでいないマス（入居決定・入居済の行で空のもの）は黄色。書き込むと白に戻る
   確定通帳に「永眠」とある行（no-todo）は黄色にしない */
table.sheet tr[data-status="入居決定"]:not(.no-todo) td.todo[data-raw=""],
table.sheet tr[data-status="入居済"]:not(.no-todo) td.todo[data-raw=""] { background: #fff200; }
table.editable td.cell:not(.k-bool):hover { background: #f1f8ff; }
.undo-redo { display: inline-flex; gap: 4px; }
.undo-redo button:disabled { opacity: .45; cursor: default; }
/* 入力中は、細い列でも打ちやすいよう入力欄を隣の列に重ねて広げる */
table.sheet td.editing { padding: 0; background: #fff; outline: 2px solid var(--accent); overflow: visible; z-index: 4; }
/* 固定した列（氏名・状況）は sticky のまま。ほかの列だけ relative にして入力欄の基準にする */
table.sheet td.editing:not(.sticky) { position: relative; }
table.sheet td.editing.sticky { z-index: 6; }
table.sheet td.editing input, table.sheet td.editing select, table.sheet td.editing textarea {
  position: absolute; left: 0; top: 0; width: max(100%, 160px); max-width: none; border: 2px solid var(--accent); border-radius: 0;
  padding: 3px 6px; font-size: 13px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
table.sheet td.editing textarea { width: max(100%, 300px); }
table.sheet td.saving { opacity: .5; }
table.sheet td.saved { background: #dafbe1 !important; transition: background .3s; }
table.sheet td.error { background: #ffebe9 !important; outline: 1px solid var(--bad); }
table.sheet td.open { white-space: nowrap; }
table.sheet td.row-del { text-align: center; padding: 2px; vertical-align: middle; }
table.sheet td.row-del form { margin: 0; }
.del-btn { font-size: 11px; padding: 1px 5px; color: var(--quiet); background: #f6f8fa; border-color: #c4cad1; }
.del-btn:hover { color: var(--bad); border-color: var(--bad); background: #ffebe9; }
.del-btn.restore:hover { color: var(--good); border-color: var(--good); background: #dafbe1; }
.messages li.error { background: #ffebe9; color: var(--bad); }

/* ---- ホームの大きなボタン ---- */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 14px; }
.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--ink);
}
.tile:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); text-decoration: none; }
.tile .t { font-size: 19px; font-weight: 700; color: var(--accent); }
.tile .n { font-size: 30px; font-weight: 700; margin-top: 4px; }
.tile .d { color: var(--quiet); }
.tile.primary { background: var(--accent); border-color: var(--accent); }
.tile.primary .t, .tile.primary .d { color: #fff; }
.tile.sub .t { color: var(--ink); }

/* ---- 手続きの枠 ---- */
.actions { border: 2px solid var(--accent); background: var(--accent-soft); }
.actions h2 { color: var(--accent); }
.actions .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.big { font-size: 17px; padding: 10px 22px; font-weight: 700; }

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.crumb { font-size: 14px; margin-bottom: 4px; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; }
  .side .facility { flex: 1; min-width: 140px; }
  .side .facility label { display: none; }
  .side .menu { width: 100%; order: 3; }
  .side .menu summary { display: block; cursor: pointer; padding: 6px 4px; color: #9da7b1; }
  .side .who { margin-top: 0; flex-direction: row; align-items: center; order: 2; }
  .side-top { width: auto; }
  main { padding: 12px; }
  .hide-sm { display: none; }
}

/* 部屋の入替画面：左に部屋の図、右に未配置欄 */
main:has(.plan-layout) { max-width: none; }
.plan-layout { display: flex; gap: 12px; align-items: flex-start; }
.plan-floors { flex: 1; min-width: 0; }
.plan-side { flex: none; width: 210px; position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; }
.unplaced-box { background: var(--card); border: 2px dashed #8250df; border-radius: 8px; padding: 6px 8px; min-height: 120px; }
.unplaced-box h2 { font-size: 15px; margin: 0 0 6px; }
.unplaced { display: flex; flex-direction: column; gap: 4px; }
.unplaced .pcard { border: 1px solid #c4cad1; border-radius: 4px; background: #fff; padding: 2px 4px; text-align: left; }
.plan-status, .confirm-box, .versions { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 13px; }
.confirm-box label { display: block; margin-bottom: 6px; }
.confirm-box p { font-size: 12px; margin: 6px 0 0; }
.versions h3 { font-size: 13px; margin: 0 0 4px; }
.versions a { display: block; padding: 1px 0; }
.versions a.on { font-weight: 700; }
.slot { height: 64px; }
.slot .slot-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow: hidden; padding: 0 1px; }
.slot .room-note { flex: none; font-size: 10px; line-height: 13px; color: #0b44c8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px dashed #57606a; }
.slot.drop-here, .unplaced-box.drop-here { outline: 3px solid var(--accent); outline-offset: -2px; background: #ddf4ff; }
.slot.over { background: #ffebe9; }
.pcard { font-size: 12px; line-height: 14px; text-align: center; max-width: 100%; user-select: none; touch-action: none; }
.pcard.draggable { cursor: grab; }
.pcard .pn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .from { display: block; font-size: 10px; color: #bf8700; font-weight: 700; }
.pcard .pnote { display: block; font-size: 10px; color: #0b44c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard.prospect .pn { color: #8250df; }
.pcard.guide .pn { color: var(--bad); }
.pcard.meal .pn { color: var(--accent); }
.pcard.moved { background: #fff8c5; border-radius: 3px; }
.pcard.lifting { opacity: .3; }
.pcard.ghost { position: fixed; z-index: 1000; pointer-events: none; background: #fff; border: 2px solid var(--accent); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.25); padding: 2px 4px; }
.map-actions { display: flex; gap: 8px; margin-left: auto; }
.undo-redo.big button { font-size: 14px; padding: 3px 12px; font-weight: 700; }
.plan-side .undo-redo button { font-size: 14px; padding: 4px 12px; font-weight: 700; }

/* 入居の登録：見出しごとの区切り、欄は2〜3列に並べる */
.register fieldset { border: 1px solid var(--line); margin: 0 0 12px; }
.register legend { font-weight: 700; padding: 0 6px; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.reg-grid p { margin: 4px 0; display: flex; flex-direction: column; gap: 2px; }
.reg-grid p.wide { grid-column: 1 / -1; }
.reg-grid input, .reg-grid select, .reg-grid textarea { width: 100%; }
/* 入居管理の表：名簿にまだいない入居決定・入居済の行の「登録」（入居の登録へ） */
table.sheet td.col-name .to-register { color: #fff; background: var(--accent); border-color: var(--accent); margin-left: 2px; }
table.sheet td.col-name .to-register:hover { color: #fff; background: #0550ae; }
/* 入居の登録：書類で確かめる */
.docs-box { background: #f6f8fa; }
.doc-result { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.doc-result table { font-size: 13px; }
.doc-result tr.r-ok .res { color: var(--good); font-weight: 700; }
.doc-result tr.r-diff { background: #fff8c5; }
.doc-result tr.r-diff .res { color: var(--bad); font-weight: 700; }
.doc-result tr.r-unk .res { color: var(--quiet); }