/* Forest 共通スタイル（最小）。部品を増やさず、まず読みやすさを優先する */
:root {
  --ink: #1f2a37;
  --muted: #6b7280;
  --line: #d9dee5;
  --brand: #1f3a5f;
  --bg: #f7f8fa;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
.topbar {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .6rem 1.2rem; background: var(--brand); color: #fff;
}
.topbar .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.topbar .phase { font-size: .85rem; opacity: .8; }
.content { max-width: 1500px; margin: 1.5rem auto; padding: 0 1.2rem; }   /* 常にワイド画面で使う前提（09-15） */
.lead { font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .9rem; }
table.kv { border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
table.kv th, table.kv td { text-align: left; padding: .5rem .9rem; border-bottom: 1px solid var(--line); }
table.kv th { width: 16rem; background: #eef2f7; font-weight: 600; }
.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 0; }

/* --- ステップ4b：一覧・フォーム --- */
.topbar .spacer { flex: 1; }
.topbar .who { font-size: .85rem; opacity: .9; }
.topbar .navlink { color: #fff; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
  padding: .15rem .6rem; font-size: .85rem; text-decoration: none; cursor: pointer; }
.topbar form.inline { display: inline; margin: 0; }
.crumbs { font-size: .9rem; color: var(--muted); }
.small { font-size: .85rem; font-weight: normal; }
table.list { width: 100%; }
table.list th { width: auto; }
.panel { background: #fff; border: 1px solid var(--line); padding: 1rem 1.2rem; }
fieldset { border: 1px solid var(--line); margin: 0 0 1rem; padding: .6rem 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .8rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .5rem 1rem; }
label { display: block; }
input[type=number] { width: 7rem; padding: .2rem .4rem; }
.actions { display: flex; gap: .8rem; align-items: center; }
.btn { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--brand); border-radius: 4px;
  color: var(--brand); background: #fff; text-decoration: none; cursor: pointer; font-size: .95rem; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.small { padding: .15rem .6rem; font-size: .85rem; }
.msg { padding: .5rem .8rem; border-radius: 4px; background: #fdecea; color: #8a1c1c; }
.msg-success { background: #e7f5ea; color: #1e5c2a; }

/* --- ステップ5：ログイン・案件一覧・案件メニュー・権限設定 --- */
.login-box { max-width: 460px; margin: 3rem auto; }
.btn.google { width: 100%; padding: .7rem; font-size: 1rem; }
.filters { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filters input[type=search] { flex: 1; min-width: 14rem; padding: .4rem .6rem; }
.filters select { padding: .4rem .5rem; }
.filters .spacer { flex: 1; }
td.num, th.num { text-align: right; }
td.ops { white-space: nowrap; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 9px; font-size: .8rem; background: #e2e8f0; }
.badge.open { background: #dbeafe; color: #1e3a8a; }
.badge.closed { background: #e5e7eb; color: #374151; }
.pager { text-align: center; color: var(--muted); }
.pager a { margin: 0 .8rem; }
h1 .client { font-weight: 500; margin-left: .4rem; }
.cards { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; }
@media (max-width: 800px) { .cards { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); padding: 1rem 1.2rem; }
.card h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.card table.kv { width: 100%; }
.card table.kv th { width: 9rem; }
.note { white-space: pre-wrap; background: var(--bg); padding: .5rem .8rem; border-radius: 4px; }
.menu-item { display: block; padding: .7rem .9rem; margin: .4rem 0; border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none; color: var(--ink); background: #fff; }
.menu-item:hover { border-color: var(--brand); }
.menu-item.primary { border-color: var(--brand); background: #eef2f7; font-weight: 600; }
.menu-item.disabled { color: var(--muted); background: var(--bg); }
.menu-item .small { display: block; }
table.perm th.center, table.perm td.center { text-align: center; }
table.perm input[type=checkbox] { transform: scale(1.3); }

/* --- ステップ6：案件編集 --- */
.editform .card { margin-bottom: 1.2rem; }
.editform h2.with-toggle { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.editform h2 .toggle { font-size: .95rem; font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.editform .toggle input { transform: scale(1.2); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .4rem 1rem; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .4rem 1rem; }
.grid-addr { display: grid; grid-template-columns: 8rem 10rem 1fr 1fr; gap: .4rem 1rem; }
.grid-date { display: grid; grid-template-columns: 11rem 7rem 7rem 7rem 1fr; gap: .4rem 1rem; align-items: end; }
.grid-honseki { display: grid; grid-template-columns: 8rem 1fr 14rem; gap: .4rem 1rem; align-items: start; }
@media (max-width: 760px) { .grid-addr, .grid-date, .grid-honseki { grid-template-columns: 1fr 1fr; } }
.field { margin: .3rem 0 .5rem; }
.field > label { font-size: .85rem; color: var(--muted); margin-bottom: .1rem; }
.field .req { color: #b91c1c; margin-left: .15rem; }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number],
.field select, .field textarea { width: 100%; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; background: #fff; }
.field input[type=number] { width: 100%; }
.field textarea { resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b91c1c; background: #fff7f7; }
.field .err { display: block; color: #b91c1c; font-size: .85rem; }
.field .muted.small { display: block; }
.field.choices > div > div { display: inline-block; margin-right: 1rem; }
.field.choices label { display: inline; font-size: 1rem; color: var(--ink); }
.field.choices > label:first-child { display: block; font-size: .85rem; color: var(--muted); }
.field.inline label { display: inline-flex; align-items: center; gap: .3rem; }
.field.members > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; }
.field.members > div label { display: inline; font-size: .95rem; color: var(--ink); }
.field .readonly { padding: .35rem 0; }
.field.btnfield .btn { width: 100%; }
.note-date { align-self: center; }
fieldset.plain { border: 0; padding: 0; margin: 0; }
fieldset.plain:disabled { opacity: .55; }
#principal-card.off p { opacity: .8; }
input.copied, select.copied { background: #eef2f7 !important; }
.family-row { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .9rem; margin: .5rem 0; background: #fbfcfd; }
.family-row label { font-size: .85rem; color: var(--muted); }
.family-row input[type=text] { width: 100%; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.kamons { margin: .4rem 0; }
.kamon-head { display: block; margin-bottom: .2rem; }
.kamon-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .4rem; margin: .25rem 0; align-items: center; }
.kamon-row input[type=text] { width: 100%; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.actions.small .btn { font-size: .85rem; }
.actions .spacer { flex: 1; }
.btn.danger { color: #8a1c1c; border-color: #d9a4a4; }
.btn.danger:hover { background: #fdecea; }
.savebar { position: sticky; bottom: 0; background: rgba(247,248,250,.95); padding: .8rem 0; border-top: 1px solid var(--line); }
.msg-warning { background: #fff7e6; color: #7a4b00; }
.msg-error { background: #fdecea; color: #8a1c1c; }

/* --- ステップ7：登録人物一覧（表内編集）・人物編集モーダル --- */
.content.wide { max-width: none; }
.filters-panel { padding: .6rem 1rem; margin-bottom: .8rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .3rem 0; }
.flabel { font-size: .85rem; color: var(--muted); margin-left: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .25rem .4rem; }
.chip { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 12px; padding: .05rem .55rem; font-size: .9rem; background: #fff; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--brand); background: #eef2f7; }
.chip.plain { border: 0; background: none; }
.chip input { margin: 0; }
.filter-row input[type=search], .filter-row select { padding: .25rem .4rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; }
.toolbar { margin-bottom: .6rem; flex-wrap: wrap; }
.table-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--line); background: #fff; }
table.people { border: 0; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
table.people thead th { position: sticky; top: 0; z-index: 2; background: #eef2f7; font-size: .85rem; white-space: nowrap; padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
table.people td { padding: .1rem .25rem; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
table.people tr:hover td { background: #fbfcfe; }
table.people tr.flash td { animation: rowflash 1.5s ease-out; }
@keyframes rowflash { from { background: #e7f5ea; } to { background: transparent; } }
table.people input.cell[type=text] { width: 100%; border: 1px solid transparent; background: transparent; padding: .25rem .3rem; font: inherit; border-radius: 3px; }
table.people input.cell[type=text]:hover { border-color: var(--line); }
table.people input.cell[type=text]:focus { border-color: var(--brand); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(31,58,95,.15); }
table.people select.cell { border: 1px solid transparent; background: transparent; font: inherit; padding: .2rem; }
table.people select.cell:hover, table.people select.cell:focus { border-color: var(--line); background: #fff; }
table.people .saved { background: #e7f5ea !important; transition: background .3s; }
table.people .failed { background: #fdecea !important; border-color: #b91c1c !important; }
table.people td.c-no { white-space: nowrap; }
table.people td.c-sei input, table.people td.c-mei input, table.people td.c-old_sei input { width: 6.5rem; }
table.people td.c-birth_place input, table.people td.c-death_place input { width: 9rem; }
table.people td.c-death_cause input { width: 12rem; }
table.people td.c-note1 input, table.people td.c-note2 input { width: 11rem; }
table.people td.c-flag, table.people th.c-flag { text-align: center; }
table.people td.c-flag input { transform: scale(1.15); }
table.people td.c-ops { white-space: nowrap; }
.datecell { border: 1px solid transparent; background: transparent; font: inherit; padding: .25rem .4rem; border-radius: 3px; cursor: pointer; white-space: nowrap; min-width: 8rem; text-align: left; }
.datecell:hover { border-color: var(--line); background: #fff; }
.linkbtn { border: 0; background: none; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; padding: .2rem .3rem; }
.badge.mark { background: #1f3a5f; color: #fff; font-size: .7rem; padding: 0 .35rem; margin-left: .15rem; }
.badge.mark.alive { background: #2f855a; }
.datepop { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--brand); border-radius: 6px; padding: .6rem .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.datepop-title { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.datepop .actions { margin-top: .5rem; }
.wareki { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.wareki select { padding: .3rem .35rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.wareki select:disabled { background: var(--bg); color: var(--muted); }
.toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 100; padding: .6rem 1rem; border-radius: 6px; background: #1f2a37; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); max-width: 32rem; }
.toast.success { background: #1e5c2a; }
.toast.error { background: #8a1c1c; }
/* モーダル */
dialog#person-dialog { border: 0; border-radius: 8px; padding: 0; width: min(960px, 96vw); max-height: 92vh; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog#person-dialog::backdrop { background: rgba(20,30,45,.45); }
#person-dialog-body { padding: 1rem 1.4rem 1.2rem; max-height: 92vh; overflow: auto; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.dialog-head h2 { margin: 0; font-size: 1.15rem; }
.fs { border-top: 1px solid var(--line); padding: .6rem 0 .2rem; }
.fs h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--brand); display: flex; align-items: center; gap: .8rem; }
.fs h3 .toggle { font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: .3rem; }
.grid-name { display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: .4rem 1rem; align-items: end; }
.grid-datefield { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; align-items: start; }
@media (max-width: 760px) { .grid-name, .grid-datefield { grid-template-columns: 1fr 1fr; } }
.suffixed { display: flex; align-items: center; gap: .3rem; }
.suffixed input { flex: 1; }
.suffix { color: var(--muted); white-space: nowrap; }
.subrows { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .4rem; }
.subrow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; background: #fbfcfd; border: 1px solid var(--line); border-radius: 6px; padding: .35rem .6rem; }
.subrow input[type=text] { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.ev-text { flex: 1; min-width: 14rem; }
.hs-row { flex-direction: column; align-items: stretch; }
.hs-line { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.hs-address { flex: 2; min-width: 16rem; }
.hs-municipality { flex: 1; min-width: 12rem; }
.hs-note { flex: 1; min-width: 10rem; }
.flags label { margin-right: 1.2rem; }
.dialog-actions { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .6rem; position: sticky; bottom: 0; background: #fff; }

/* --- ステップ8：関係一覧・関係設定モーダル --- */
table.relations td, table.relations th { white-space: nowrap; padding: .3rem .5rem; }
table.relations td.note-cell { white-space: normal; max-width: 18rem; font-size: .9rem; color: var(--muted); }
.badge.kind-marriage { background: #fde2e2; color: #8a1c1c; }
.badge.kind-parent-child { background: #dbeafe; color: #1e3a8a; }
.badge.kind-adoption { background: #fef3c7; color: #7a4b00; }
.badge.kind-other { background: #e5e7eb; color: #374151; }
dialog#relation-dialog { border: 0; border-radius: 8px; padding: 0; width: min(900px, 96vw); max-height: 92vh; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog#relation-dialog::backdrop { background: rgba(20,30,45,.45); }
#relation-dialog-body { padding: 1rem 1.4rem 1.2rem; max-height: 92vh; overflow: auto; }
.grid-rel { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem 1rem; align-items: start; }
.swap-box { align-self: center; padding-top: 2.4rem; }
.swap-box .btn { font-size: 1.3rem; padding: .3rem .7rem; }
.person-filter { width: 100%; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px 4px 0 0; font: inherit; }
.person-select { width: 100%; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; font: inherit; padding: .2rem; }
.person-select option { padding: .15rem .3rem; }
.pos-select { width: 100%; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: #fff; }
@media (max-width: 760px) { .grid-rel { grid-template-columns: 1fr; } .swap-box { padding-top: 0; text-align: center; } }
table.people td.c-rel { text-align: center; }

/* --- ステップ9：家系図一覧・家系図編集 --- */
table.sheets td.ops form.inline { display: inline; }
.newsheet { margin-top: 1rem; }
.newsheet h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.newsheet input[type=text] { min-width: 16rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.newsheet input[type=number] { width: 5.5rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.dg-toolbar { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; background: #fff; border: 1px solid var(--line); padding: .45rem .8rem; margin-bottom: .6rem; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.dg-group { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.swatch { display: inline-block; width: 14px; height: 0; border-top: 2px solid; margin: 0 .2rem 2px 0; vertical-align: middle; }
.swatch.marriage { border-top: 3px double #1f2a37; }
.swatch.parent-child { border-color: #1f2a37; }
.swatch.adoption { border-top: 4px double #2f855a; }
.swatch.other { border-color: #6b7280; border-top-style: dotted; }
.dg-main { display: grid; grid-template-columns: 1fr 400px; gap: .8rem; align-items: start; position: relative; }
.dg-main.side-closed { grid-template-columns: 1fr; }
.dg-main.side-closed .dg-side { display: none; }
/* サイドバーの開閉：閉じるボタンはサイドバーの先頭、開くボタンは閉じたときだけ家系図の右上に小さく重ねる（横幅を使わない） */
.dg-side-head { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.dg-side-open { position: absolute; top: 4px; right: 4px; z-index: 5; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--brand); font-size: .9rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.dg-side-open:hover { background: var(--brand); color: #fff; }
@media (max-width: 1000px) { .dg-main, .dg-main.side-closed { grid-template-columns: 1fr; } .dg-side-open { display: none; } .dg-main.side-closed .dg-side { display: block; } }
.dg-gridwrap { position: relative; overflow: auto; max-height: calc(100vh - 210px + 3 * var(--cell-h)); border: 1px solid var(--line); background: #fff;   /* 表示領域の高さ：元の高さ＋3マス分 */
  --cell-w: 68px; --cell-h: 232px; --gap-h: 40px; --font: .95rem; }   /* --gap-h：コマの下に空ける線用の帯 */
table.dg-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
table.dg-grid th { position: sticky; background: #eef2f7; font-size: max(.6rem, calc(var(--font) * .8)); color: var(--muted); font-weight: 600; z-index: 3; cursor: pointer; user-select: none; }
table.dg-grid th.corner { left: 0; top: 0; z-index: 4; width: 30px; }
table.dg-grid th.colhead { top: 0; height: 22px; width: var(--cell-w); border-bottom: 1px solid var(--line); }
table.dg-grid th.rowhead { left: 0; width: 30px; border-right: 1px solid var(--line); }
table.dg-grid th.sel { background: var(--brand); color: #fff; }
table.dg-grid td.cell { width: var(--cell-w); height: var(--cell-h); min-width: var(--cell-w); max-height: var(--cell-h); border: 1px dashed #e4e8ee; padding: 3px; vertical-align: top; position: relative; overflow: hidden; }
table.dg-grid td.cell.over { background: #eef2f7; outline: 2px solid var(--brand); outline-offset: -2px; }
/* コマは高さをマスに固定し、はみ出しは切る（縦書きの文字量で行が伸びないように） */
.piece { position: relative; z-index: 2; box-sizing: border-box; height: calc(var(--cell-h) - var(--gap-h) - 6px); border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px 3px 14px; cursor: grab; font-size: var(--font); line-height: 1.15; overflow: hidden; }
/* 縦書き：列（氏名の列・生年の列）は右→左に並ぶ。flex-direction: column は縦書きでは横方向＝列の並びになるので、justify-content でコマの中央に寄せる */
.piece-v { writing-mode: vertical-rl; width: 100%; height: 100%; box-sizing: border-box; padding-top: .5em; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .1em; }
.piece-main { display: block; white-space: nowrap; }                          /* 氏名は折り返さない。長い氏名は JS（fitNames）で縮小 */
.piece-rel { display: inline-block; font-size: .8em; color: var(--ink); padding-inline-end: .45em; letter-spacing: .05em; }   /* 続柄：氏名と同色・やや小さく */
.piece-sei { position: absolute; right: 2px; bottom: 2px; writing-mode: horizontal-tb; font-size: .6em; line-height: 1.2; color: var(--ink); letter-spacing: .02em; white-space: nowrap; }   /* 家名（苗字）：右下に小さく横書き（左下の戸主・名義人の印と並ぶ） */
.piece-sub { display: block; white-space: nowrap; font-size: .68em; color: var(--ink); letter-spacing: .02em; }        /* 生年・没年：氏名と同じ濃い色 */
.piece-sub-label { display: inline-block; font-size: .85em; padding-inline-end: .25em; }
.piece.sex-1 { border-color: #93b4e0; background: #f0f5fc; }
.piece.sex-2 { border-color: #e8a3ad; background: #fdf1f3; }
.piece.sex-0 { border-color: #c9ced6; background: #f5f6f8; }
.piece.selected { outline: 3px solid #f59e0b; outline-offset: -1px; }
.piece.lineage { border-width: 4px; padding-left: 0; padding-right: 0; }   /* 直系：枠線を太く・濃く（内側の余白を減らして中身の幅は保つ） */
.piece.lineage.sex-1 { border-color: #2f5aa0; }
.piece.lineage.sex-2 { border-color: #b8455a; }
.piece.lineage.sex-0 { border-color: #5b6470; }
/* 委任状名義人：色を反転して強調 */
.piece.principal { color: #fff; border-width: 2px; }
.piece.principal.lineage { border-width: 4px; }
.piece.principal.sex-1 { background: #2f5aa0; border-color: #1f3a5f; }
.piece.principal.sex-2 { background: #b8455a; border-color: #7a1f2e; }
.piece.principal.sex-0 { background: #5b6470; border-color: #3b424c; }
.piece.principal .piece-rel, .piece.principal .piece-sei, .piece.principal .piece-sub { color: rgba(255,255,255,.85); }
.piece-badges .badge.mark.principal { background: #fff; color: #1f3a5f; }
.piece.excluded { opacity: .55; border-style: dotted; }
.piece.dragging { opacity: .4; }
.piece.flash { animation: rowflash 1.2s ease-out; }
.piece-name { font-weight: 700; font-size: 1.22em; white-space: nowrap; letter-spacing: .08em; line-height: 1.1; }             /* 氏名：大きく */
.piece-badges { position: absolute; left: 2px; bottom: 1px; writing-mode: horizontal-tb; display: flex; gap: 2px; }
.piece-badges .badge.mark { font-size: .58em; padding: 0 .22em; margin: 0; line-height: 1.3; }   /* 余白も倍率に追従（rem だと縮小時に右下の家名と重なる） */
.dg-gridwrap.zoom-small .piece-sei { display: none; }                                              /* 55% 未満では家名を出さない（読めず、印と重なるだけ） */
.piece-badges .badge.mark { white-space: nowrap; }
.piece-badges:has(.badge + .badge) { flex-direction: column; align-items: flex-start; gap: 1px; }   /* 名義人＋戸主の2印は縦に積む（横に並べるとコマ幅に収まらず折れる） */
.piece:has(.piece-badges .badge) .piece-sei.long { bottom: calc(2px + 1.6em); }                    /* 印と3文字以上の家名が並ぶコマは家名を1段上げて重なりを避ける */
.piece:has(.piece-badges .badge + .badge) .piece-sei.long { bottom: calc(2px + 3em); }             /* 2印＋3文字以上の家名はさらに上へ */
.piece-badges .badge.mark.excl { background: #6b7280; }
#lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
#lines .ln { fill: none; stroke-width: 2; }
#lines .ln.marriage { stroke: #1f2a37; stroke-width: 1.5; }        /* 婚姻：黒の二重線 */
#lines .ln.parent-child { stroke: #1f2a37; }                        /* 親子：黒の実線 */
#lines .ln.adoption-outer { stroke: #2f855a; stroke-width: 6; }      /* 養子：緑の二重線 */
#lines .ln.adoption-inner { stroke: #fff; stroke-width: 2.4; }
#lines .ln.other { stroke: #6b7280; stroke-dasharray: 2 4; }
.dg-side .card { margin-bottom: .8rem; }
.dg-side .card h2 { font-size: 1rem; }
#people-filter { width: 100%; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; margin-bottom: .3rem; }
.dg-people { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: .3rem; background: var(--bg); }
.dg-people.over { outline: 2px dashed #b91c1c; }
.pl-item { display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem; margin: .15rem 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: grab; font-size: .9rem; }
.pl-item.sex-1 { border-left: 4px solid #3b6fb6; }
.pl-item.sex-2 { border-left: 4px solid #d05a6a; }
.pl-item.sex-0 { border-left: 4px solid #9aa3ad; }
.pl-item.placed { opacity: .45; }
.pl-item.lineage { border-color: #5b6470; border-left-width: 6px; }
.pl-item.principal { background: #1f3a5f; color: #fff; }
.pl-item.principal .pl-sub { color: rgba(255,255,255,.8); }
.pl-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.ctxmenu { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); min-width: 240px; padding: .3rem; }
.ctx-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--muted); padding: .2rem .2rem .2rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.ctx-close { border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); width: 22px; height: 22px; line-height: 1; font-size: .95rem; cursor: pointer; flex: none; }
.ctx-close:hover { background: #eef2f7; }
.ctx-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .4rem .6rem; font: inherit; cursor: pointer; border-radius: 4px; }
.ctx-item:hover { background: #eef2f7; }
.ctx-item.danger { color: #8a1c1c; }
#settings-form textarea, #settings-form input[type=text] { width: 100%; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
table.dg-grid td.cell:empty { cursor: pointer; }
table.dg-grid td.cell:empty:hover { background: #f3f6fa; }
table.dg-grid td.cell:empty:hover::after { content: "＋"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-size: 1.4rem; line-height: 1; }   /* マスの中心に表示 */
.dg-gridwrap.pan, .dg-gridwrap.pan * { cursor: grab !important; user-select: none; }
.dg-gridwrap.panning, .dg-gridwrap.panning * { cursor: grabbing !important; }
#hand-tool.active { background: var(--brand); color: #fff; }
/* サイドバーの人物編集欄（モーダルと同じ断片を1列で） */
.side-form { max-height: calc(100vh - 140px); overflow: auto; }
.side-form .grid-name, .side-form .grid3, .side-form .grid2, .side-form .grid4, .side-form .grid-datefield { grid-template-columns: 1fr 1fr; }
.side-form .grid-name > .field.choices { grid-column: 1 / -1; }
.side-form .dialog-head h2 { font-size: 1rem; }
.side-form .fs h3 { font-size: .9rem; }
.side-form .subrow input[type=text] { min-width: 0; }
.side-form .ev-text, .side-form .hs-address, .side-form .hs-municipality, .side-form .hs-note { min-width: 0; flex-basis: 100%; }
.side-form .dialog-actions { position: sticky; bottom: 0; }
.side-form button[name=next] { display: none; }                      /* サイドバーでは「保存して次を登録」は出さない */

[hidden] { display: none !important; }   /* hidden 属性は display:flex などの指定より優先（出力設定の手動ツールなど） */
/* ---------- 出力設定（ステップ10） ---------- */
.es-main { display: grid; grid-template-columns: 460px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .es-main { grid-template-columns: 1fr; } }
.es-main .card { margin-bottom: .8rem; }
.es-main .card h2 { font-size: 1rem; }
.es-main .field { margin: .5rem 0; }
.es-main .field > label:first-child { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.es-main input[type=search] { width: 100%; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.sort-selects { display: flex; gap: .4rem; flex-wrap: wrap; }
.sort-selects select { padding: .25rem .4rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; }
.sei-order { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.sei-order li { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--line); border-radius: 12px; padding: .05rem .25rem .05rem .55rem; background: #fff; cursor: grab; font-size: .9rem; }
.sei-order li .n { color: var(--muted); font-size: .8em; min-width: 1.2em; }
.sei-order li button { border: 0; background: none; cursor: pointer; color: var(--brand); padding: 0 .15rem; font: inherit; }
.sei-order.disabled { opacity: .45; }
table.es-rows th.num, table.es-rows td.num { text-align: right; color: var(--muted); width: 3.5em; }
table.es-rows tr.blank td { background: #f7f8fa; color: var(--muted); }
table.es-rows tr.draggable { cursor: grab; }
table.es-rows tr.drag-over td { border-top: 2px solid var(--brand); }
table.es-rows .manual-col { white-space: nowrap; width: 1%; }
table.es-rows:not(.manual) .manual-col { display: none; }
table.es-rows .rowbtn { border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; color: var(--brand); padding: 0 .35rem; margin-right: .15rem; font: inherit; font-size: .85rem; }
table.es-rows .rowbtn.danger { color: #8a1c1c; }
.table-wrap { max-height: calc(100vh - 260px); overflow: auto; }
.setting-box { background: #fff; border: 1px solid var(--line); padding: .7rem 1rem; margin-bottom: .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.setting-box.warn { background: #fff7e6; border-color: #e0b36a; }
.sheet-row { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: .2rem 0; }
.sheet-opts { color: var(--ink); font-size: .92rem; display: inline-flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- 原紙管理（ステップ10b） ---------- */
.tpl { margin-bottom: 1rem; }
.tpl h2 { font-size: 1.05rem; }
.tpl-active { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: .4rem 0; }
.tpl-upload { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .5rem 0; padding: .5rem .7rem; background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; }
.tpl-upload input[type=text] { flex: 1; min-width: 14rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.tpl-versions tr.active td { background: #f3f7fb; }
.tpl-versions .ok { color: #1e5c2a; font-weight: 600; }
.tpl-versions .err, .tpl-versions li.err { color: #8a1c1c; }
.tpl-versions li.warn { color: #7a4b00; }
.tpl-versions details { margin-top: .2rem; }
.tpl-actions { white-space: nowrap; }
.tpl-actions .btn, .tpl-actions form { margin-right: .2rem; }
form.inline { display: inline; }

/* ---------- 調査資料出力（ステップ10c） ---------- */
.research-form .grid2 label { display: flex; flex-direction: column; gap: .2rem; }
.research-form .grid2 label.chip { flex-direction: row; align-self: start; }
.research-form input[type=text], .research-form input[type=number], .research-form select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.research-report { margin-top: 1rem; }
.research-report h3 { font-size: .95rem; margin: .8rem 0 .3rem; }
.warn-list li { margin: .15rem 0; color: #7a4b00; }

.research-h { margin-top: 1.4rem; font-size: 1.1rem; border-left: 4px solid var(--brand); padding-left: .5rem; }

/* ---------- ステップ11：ユーザー管理・監査ログ・一括編集・家族一括登録 ---------- */
table.users tr.inactive td { color: var(--muted); }
table.users td.num { text-align: right; }
.user-form .field { margin: .5rem 0; }
.user-form .field > label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.user-form .field label.chip { display: inline-flex; font-size: .95rem; color: var(--ink); }
.user-form input[type=text], .user-form input[type=email], .user-form select { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; min-width: 20rem; }
.user-form .has-error input, .user-form .has-error select { border-color: #b23a2e; }
table.overrides td .chip { margin-right: .3rem; }
table.audit td.nowrap, table.list td.nowrap { white-space: nowrap; }
details.diff pre { max-width: 40rem; max-height: 20rem; overflow: auto; font-size: .78rem; background: var(--bg); padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 4px; white-space: pre-wrap; }
.badge.act-create { background: #e7f5ea; color: #1e5c2a; } .badge.act-update { background: #dbeafe; color: #1e3a8a; } .badge.act-delete { background: #fdecea; color: #8a1c1c; }
.badge.act-login, .badge.act-permission, .badge.act-restore { background: #e5e7eb; color: #374151; } .badge.act-login_failed { background: #fff7e6; color: #7a4b00; }
table.people th.c-sel, table.people td.c-sel { width: 1.6rem; text-align: center; }
#bulk-dialog { width: min(34rem, 96vw); }
#family-dialog.wide { width: min(64rem, 96vw); }
.family-parents .fs { padding: .5rem .8rem; }
.family-parents .fs h3 { margin: 0 0 .3rem; font-size: .95rem; }
.family-parents select, .family-parents input[type=text] { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.family-parents .fam-existing select { min-width: 18rem; margin-top: .3rem; }
.family-parents .fam-new { margin-top: .3rem; }
table.family-children input[type=text], table.family-children select { padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.msg-area .msg { margin: .3rem 0; }

/* 環境の目印（検証環境など。FOREST_ENV_LABEL） */
.envband { background: #fff3c4; color: #7a4b00; border-bottom: 2px solid #e0b36a; text-align: center; padding: .35rem 1rem; font-weight: 600; font-size: .92rem; }