/* 登記情報抽出ツール — 説明サイト(D案)と同一のデザイン文法。
   2026-08-27改訂: 温白の紙+深緑+ヘアライン。角丸・影・ピルを撤去し、
   罫線と余白で構造を作る(SaaSテンプレ感を出さない)。
   外部フォントは読み込まない: このツールは「外部に一切通信しない」ことが
   信頼の根拠であり、Webフォント1つのためにサードパーティへの通信を作らない。
   同じ質感は配色・罫線・余白・等幅書体のアクセントで再現する。
   意図的に単一(明色)のデザインに統一し、配色は全て明示指定する。 */
:root {
  --paper: #FAF8F2;      /* 地 */
  --surface: #FFFFFF;    /* 面 */
  --panel: #F3F0E5;      /* 帯・見出し背景 */
  --ink: #26241D;        /* 本文 */
  --muted: #55503F;      /* 副文 */
  --faint: #877F6E;      /* 補足 */
  --hairline: #E4E0D2;   /* 罫線 */
  --hairline-soft: #EFEBDF;
  --green: #2E5E4A;      /* 主色 */
  --green-dark: #204536;
  --green-tint: #E8EFEA;
  --warn: #8C4A2F;       /* 注意・抹消 */
  --warn-bg: #F7EDE7;
  --warn-line: #E0C4B4;
  --role-neighbor: #4A6785;
  --role-neighbor-bg: #E9EEF3;
  --role-road: #7A7263;
  --role-road-bg: #EEEBE3;
  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --sans: "Yu Gothic UI", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --mono: Consolas, "SF Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-feature-settings: "palt";
}
a { color: var(--green); }
a:hover { color: var(--green-dark); }
button { font-family: var(--sans); }
.hidden { display: none !important; }

#app { max-width: 1080px; margin: 0 auto; padding: 30px 22px 80px; }

/* ---- ヘッダ ---- */
#hdr { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); font-weight: 500; }
#hdr h1 { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: .01em; margin: 8px 0 10px; }
#hdr .sub { font-size: 14px; color: var(--muted); line-height: 1.85; margin: 0 0 16px; max-width: 700px; }

/* 送信ゼロの明示 — このツールの信頼の核なので、他の要素より強く見せる */
.privacy-badge {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--green);
  padding: 16px 18px; font-size: 13.5px; color: var(--muted); line-height: 1.8; max-width: 700px;
}
.privacy-badge svg { flex: none; color: var(--green); margin-top: 3px; }
.privacy-badge strong { color: var(--green-dark); font-weight: 600; }

/* ---- ボタン(角丸なし・影なし) ---- */
button { font-size: 13px; padding: 10px 18px; border-radius: 0; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
button.primary { background: var(--green); color: #fff; border: 1px solid var(--green); font-weight: 500; }
button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); font-weight: 400; }
button.ghost:hover { border-color: var(--ink); }
button.ghost.danger, button.ghost.warn { color: var(--warn); border-color: var(--warn-line); }
button.ghost.danger:hover, button.ghost.warn:hover { border-color: var(--warn); background: var(--warn-bg); }
button.small { font-size: 12px; padding: 6px 12px; }
button:disabled { opacity: .4; cursor: not-allowed; }

/* ---- 案件一覧画面 ---- */
.list-actions { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
#caseList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.case-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline); border-top: none; padding: 15px 18px;
}
.case-item:hover { background: #FFFDF8; }
.case-item-main { flex: 1; cursor: pointer; min-width: 0; }
.case-item-name { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.case-item-meta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.hint { font-size: 13px; color: var(--faint); line-height: 1.8; }

/* ---- 案件ワークスペース ---- */
#caseHdr { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.case-name-input {
  flex: 1; min-width: 200px; font-family: var(--serif); font-size: 19px; font-weight: 600;
  border: none; border-bottom: 1px solid var(--hairline); background: transparent; color: var(--ink); padding: 5px 2px;
}
.case-name-input:focus { outline: none; border-bottom-color: var(--green); }
.case-name-input::placeholder { font-family: var(--sans); color: var(--faint); font-weight: 400; font-size: 15px; }
.save-indicator { font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; }

#defaultRoleBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
#defaultRoleBar .drb-label { font-weight: 600; color: var(--ink); }
#defaultRoleSelect { font-family: var(--sans); font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 0; background: var(--surface); color: var(--ink); }
#defaultRoleSelect:focus { outline: none; border-color: var(--green); }
#defaultRoleBar .drb-hint { font-size: 11.5px; color: var(--faint); }

#dropzone {
  border: 1px dashed var(--faint); border-radius: 0; padding: 34px 20px; text-align: center;
  cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; margin-bottom: 20px;
}
#dropzone:hover, #dropzone:focus-visible, #dropzone.dragover { border-color: var(--green); border-style: solid; background: var(--green-tint); outline: none; }
#dropzone svg { color: var(--green); margin-bottom: 10px; }
#dropzone p { margin: 5px 0; font-size: 14.5px; }
#dropzone p strong { font-weight: 600; }
#dropzone .hint { font-size: 12px; max-width: 620px; margin: 8px auto 0; }

/* ---- 役割タブ ---- */
#roleTabs { display: flex; gap: 2px; margin-bottom: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); }
#roleTabs .tab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; font-size: 13px; color: var(--faint); cursor: pointer; }
#roleTabs .tab:hover { color: var(--ink); }
#roleTabs .tab.active { color: var(--green-dark); border-bottom-color: var(--green); font-weight: 600; }
#roleTabs .tab.err.active, #roleTabs .tab.err { color: var(--warn); }
#roleTabs .tab.err.active { border-bottom-color: var(--warn); }
#roleTabs .tab .cnt { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 3px; }

#toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
#summary { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 2px); left: 0; background: var(--surface);
  border: 1px solid var(--ink); border-radius: 0; z-index: 10; min-width: 260px; overflow: hidden;
}
.dropdown-menu button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 0; padding: 11px 16px; font-size: 13px; color: var(--ink); }
.dropdown-menu button:hover { background: var(--panel); }

/* ---- 一覧表 ---- */
#tableWrap { overflow-x: auto; border: 1px solid var(--hairline); background: var(--surface); }
#resultsTable { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
#resultsTable th {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline);
  color: var(--muted); font-weight: 600; font-size: 11.5px; background: var(--panel); position: sticky; top: 0;
}
#resultsTable td { padding: 9px 12px; border-bottom: 1px solid var(--hairline-soft); }
#resultsTable tbody tr:hover td { background: #FFFDF8; }
#resultsTable tbody tr.error { background: var(--warn-bg); }
#resultsTable tbody tr.error:hover td { background: var(--warn-bg); }
#resultsTable tbody tr.processing td { color: var(--faint); }
.status-icon { width: 16px; text-align: center; font-family: var(--mono); }
.status-icon.ok { color: var(--green); }
.status-icon.err { color: var(--warn); }
.owner-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.fname { cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--green); }
.fname:hover { text-decoration: underline; }
/* 役割は角のない小札。未設定は地に沈め、設定済みは色で立てる */
.role-select {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; padding: 5px 10px;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; text-align: center; min-width: 84px;
}
.role-select:focus { outline: 1px solid var(--green); outline-offset: 1px; }
.role-select.role-none { background: var(--paper); color: var(--faint); border-color: var(--hairline); font-weight: 400; }
.role-select.role-target { background: var(--green-tint); color: var(--green-dark); border-color: var(--green); }
.role-select.role-neighbor { background: var(--role-neighbor-bg); color: var(--role-neighbor); border-color: var(--role-neighbor); }
.role-select.role-road { background: var(--role-road-bg); color: var(--role-road); border-color: var(--role-road); }
.role-select.role-interested { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.row-del { color: var(--faint); border: none; background: none; font-size: 15px; padding: 2px 6px; }
.row-del:hover { color: var(--warn); background: none; }
.owner-cell.gaiji-warn { color: var(--warn); font-weight: 600; background: var(--warn-bg); }
input.row-check, #selectAllRows { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); }
/* 抽出結果をそのまま使えない事項(持分合計の不整合等)の警告。見落とすと誤った持分の
   まま帳票が出るため、詳細パネル上部で他の注記と区別できる見た目にする(2026-08-28) */
/* 警告が指している入力欄。Excel帳票側の当該セル着色(WARN_CELL_FILL)と同じ意図で、
   行のどの値を原本と突き合わせればよいかを一目で分かるようにする(2026-08-28) */
.shares-edit-table td.warn-cell { background: #F6D2A8; }
.shares-edit-table td.warn-cell input { background: transparent; font-weight: 600; }
.detail-warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line);
  padding: 8px 10px; margin: 0 0 12px; font-size: 13px; line-height: 1.7; }

/* ---- 詳細パネル ---- */
#detail { margin-top: 24px; background: var(--surface); border: 1px solid var(--hairline); padding: 24px; }
#detail h3 { font-family: var(--serif); margin: 0 0 10px; font-size: 17px; font-weight: 600; }
#detail .detail-note { font-size: 12.5px; color: var(--muted); background: var(--panel); border-left: 3px solid var(--green); padding: 11px 14px; margin: 0 0 16px; line-height: 1.8; }
#detail .drow { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 13px; }
#detail .drow .dk { flex: none; width: 150px; color: var(--faint); }
#detail .drow .dv { font-family: var(--mono); word-break: break-all; }
#detail .close-detail { float: right; font-size: 12px; color: var(--faint); cursor: pointer; background: none; border: none; padding: 2px 6px; }
#detail .close-detail:hover { color: var(--ink); }

.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.detail-pdf { border: 1px solid var(--hairline); overflow: hidden; height: 640px; background: var(--panel); }
.detail-pdf iframe { width: 100%; height: 100%; border: none; }
.detail-pdf .no-pdf { padding: 18px; font-size: 13px; color: var(--faint); line-height: 1.8; }
.detail-fields h4 { font-family: var(--mono); font-size: 11px; color: var(--green); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.edit-group { margin-bottom: 22px; }
.edit-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; }
.edit-row .ek { font-size: 11.5px; color: var(--faint); }
.edit-input { font-family: var(--mono); font-size: 13px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 0; background: var(--paper); color: var(--ink); }
.edit-input:focus { outline: none; border-color: var(--green); background: var(--surface); }
.owners-detail .ev { font-size: 12.5px; }
.share-row { padding: 4px 0; }

/* ---- 共有者・持分・住所の編集テーブル ---- */
.shares-edit-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.shares-edit-table th { text-align: left; font-size: 10.5px; color: var(--faint); font-weight: 600; padding: 2px 4px 6px; letter-spacing: .06em; }
.shares-edit-table td { padding: 2px 4px; vertical-align: top; }
.shares-edit-table input { width: 100%; font-family: var(--sans); font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--hairline); border-radius: 0; background: var(--paper); color: var(--ink); }
.shares-edit-table input:focus { outline: none; border-color: var(--green); background: var(--surface); }
.shares-edit-table .share-del { color: var(--faint); border: none; background: none; font-size: 14px; padding: 2px 6px; cursor: pointer; }
.shares-edit-table .share-del:hover { color: var(--warn); }
.share-add { margin-top: 4px; }

/* ---- 警告バナー(郵便番号データ読み込み失敗等) ---- */
.warn-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--warn-bg); border-left: 3px solid var(--warn); color: var(--warn);
  padding: 11px 14px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.7;
}

/* ---- 履歴タイムライン ---- */
.history-toggle { margin-top: 20px; background: none; border: 1px solid var(--hairline); border-radius: 0; padding: 10px 16px; font-size: 13px; color: var(--ink); cursor: pointer; }
.history-toggle:hover { border-color: var(--green); color: var(--green-dark); }
.history-timeline { margin-top: 16px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.history-item {
  display: flex; gap: 14px; padding: 13px 16px;
  border-bottom: 1px solid var(--hairline-soft); border-left: 3px solid var(--hairline);
  background: var(--surface); font-size: 13px;
}
.history-item.hyodai { border-left-color: var(--role-road); }
.history-item.kou { border-left-color: var(--green); }
.history-item.otsu { border-left-color: var(--warn); }
.history-item.canceled { opacity: .5; }
.history-badge {
  flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 3px 8px;
  border-radius: 0; background: var(--panel); color: var(--muted); white-space: nowrap; height: fit-content; letter-spacing: .04em;
}
.history-body { flex: 1; min-width: 0; }
.history-title { font-weight: 600; margin-bottom: 4px; }
.history-title .canceled-mark { font-weight: 400; color: var(--warn); margin-left: 6px; font-size: 12px; }
.history-meta { font-size: 12px; color: var(--muted); line-height: 1.85; }
.history-empty { font-size: 13px; color: var(--faint); }

footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--faint); flex-wrap: wrap; }
footer a { color: var(--faint); }
footer a:hover { color: var(--green); }

/* ---- モーダル ---- */
.modal { position: fixed; inset: 0; background: rgba(38, 36, 29, .45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; }
.modal-card { background: var(--surface); border: 1px solid var(--ink); border-radius: 0; padding: 28px; max-width: 600px; max-height: 82vh; overflow-y: auto; position: relative; }
.modal-card h2 { font-family: var(--serif); margin: 0 0 16px; font-size: 19px; font-weight: 600; }
.modal-card ul { padding-left: 1.2em; font-size: 13.5px; line-height: 1.9; margin: 0; }
.modal-card li { margin-bottom: 10px; }
.modal-card strong { font-weight: 600; }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--faint); line-height: 1; padding: 2px 6px; }
.modal-close:hover { color: var(--ink); }

@media (max-width: 900px) {
  .detail-split { grid-template-columns: 1fr; }
  .detail-pdf { height: 400px; }
}
@media (max-width: 640px) {
  #app { padding: 22px 16px 60px; }
  #hdr h1 { font-size: 22px; }
  #resultsTable { white-space: normal; }
  #detail { padding: 18px; }
  #detail .drow { flex-direction: column; gap: 2px; }
  #detail .drow .dk { width: auto; }
  #caseHdr { flex-direction: column; align-items: stretch; }
}


/* 不具合報告モーダル(サイト内完結。2026-09-05)。
   本人指摘「文言と入力欄と送信するボタンだけでいい。シンプルなもので」により、
   説明文・場面の選択・手順欄・送信情報の開示UIは置かない。 */
#bugModal textarea { width: 100%; box-sizing: border-box; font: inherit; margin-top: .3rem;
  padding: .6rem .7rem; border: 1px solid #c9c4b8; border-radius: 4px; background: #fff;
  resize: vertical; }
.bug-actions { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; flex-wrap: wrap; }
.bug-status { font-size: .85rem; }
.bug-status.ok { color: #2c7a66; font-weight: 600; }
.bug-status.err { color: #b4472e; }

/* 一覧で修正するモード(討論75・本人承認2026-09-05)。既存の一覧表のセルを入力欄に
   差し替えるだけで、画面自体は増やさない(煩雑化防止)。共有者は選んだ物件の分だけ
   表の下に出す(1物件にN人という構造を無理にグリッド化しない)。 */
#editModeBar { margin: .6rem 0 .4rem; padding: .5rem .8rem; border-radius: 4px;
  background: #eef4f1; border: 1px solid #cfe0d8; font-size: .85rem; color: #2c5c4d; }
#resultsTable input.cell-edit { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem;
  padding: .25rem .4rem; border: 1px solid #d5d0c6; border-radius: 3px; background: #fffdf9; }
#resultsTable input.cell-edit:focus { outline: 2px solid #2c7a66; outline-offset: -1px; background: #fff; }
#resultsTable tr.row-editing > td { background: #f2f7f5; }
#inlineShares { margin-top: .8rem; padding: .8rem 1rem; border: 1px solid #d5d0c6;
  border-radius: 5px; background: #faf9f6; }
#inlineShares .is-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem; font-size: .9rem; }