/* ============================================================
   請求書発行システム 共通スタイル
   一般社団法人 全日本空き家活用推進協会
   基調: 協会グリーン × 白 / 見出し明朝
   ============================================================ */

:root {
  --g-950:#0c2413;
  --g-900:#123420;
  --g-800:#175229;
  --g-700:#1d6b33;
  --g-600:#238040;
  --g-500:#2eaa44;
  --g-100:#dcefe0;
  --g-50:#f2f8f3;
  --ink:#1d2721;
  --ink-2:#414f46;
  --ink-3:#75837a;
  --line:#dfe6e1;
  --bg:#f5f6f5;
  --paper:#ffffff;
  --amber:#b07a10;
  --amber-bg:#fdf6e7;
  --red:#c0392b;
  --serif:'Noto Serif JP', serif;
  --sans:'Noto Sans JP', sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ===== ヘッダー ===== */
.site-head {
  background:linear-gradient(135deg, var(--g-950), var(--g-900) 60%, var(--g-800));
  color:#fff;
  padding:0 28px;
  display:flex; align-items:center; gap:14px;
  height:60px;
  box-shadow:0 1px 6px rgba(12,36,19,.25);
}
.site-head .brand { display:flex; align-items:center; gap:12px; }
.site-head .brand img { height:30px; filter:brightness(0) invert(1); opacity:.92; }
.site-head .brand-name { font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.08em; }
.site-head .brand-org { font-size:10.5px; color:rgba(255,255,255,.55); letter-spacing:.05em; margin-top:1px; }
.site-head nav { margin-left:auto; display:flex; gap:4px; }
.site-head nav a {
  padding:7px 16px; border-radius:6px; font-size:13.5px;
  color:rgba(255,255,255,.75); transition:all .15s;
}
.site-head nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.site-head nav a.active { color:#fff; background:rgba(255,255,255,.13); }

/* ===== コンテンツ枠 ===== */
.wrap { max-width:1100px; margin:0 auto; padding:28px 24px 60px; }

.sec-title {
  font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.06em;
  color:var(--g-900);
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}
.sec-title::before {
  content:''; width:4px; height:20px; background:var(--g-600); border-radius:2px;
}

/* ===== ボタン ===== */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:7px; border:none; cursor:pointer;
  font-size:13.5px; font-weight:500; transition:all .15s; line-height:1.5;
}
.btn-primary { background:var(--g-700); color:#fff; }
.btn-primary:hover { background:var(--g-800); }
.btn-ghost { background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.btn-ghost:hover { border-color:var(--g-500); color:var(--g-700); background:var(--g-50); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-sm { padding:5px 12px; font-size:12.5px; border-radius:6px; }

/* ===== 今月の発行カード ===== */
.month-nav { display:flex; align-items:center; gap:10px; margin-left:auto; }
.month-nav .m-label { font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:.04em; min-width:120px; text-align:center; }
.month-nav button {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:#fff; cursor:pointer; color:var(--ink-2); font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.month-nav button:hover { border-color:var(--g-500); color:var(--g-700); }

.client-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px; margin-bottom:40px;
}
.client-card {
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px 16px;
  display:flex; flex-direction:column; gap:6px;
  transition:all .15s; position:relative; overflow:hidden;
}
.client-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--line);
}
.client-card.is-issued::before { background:var(--g-500); }
.client-card.is-pending::before { background:var(--amber); }
.client-card:hover { box-shadow:0 4px 16px rgba(18,52,32,.08); border-color:#cfd8d1; }
.cc-name { font-family:var(--serif); font-size:15.5px; font-weight:600; line-height:1.45; }
.cc-loc { font-size:11.5px; color:var(--ink-3); line-height:1.5; min-height:2.9em; }
.cc-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:6px; }
.cc-amount { font-size:20px; font-weight:700; letter-spacing:.01em; }
.cc-amount small { font-size:11px; font-weight:400; color:var(--ink-3); margin-left:3px; }
.cc-status { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
.cc-status.issued { background:var(--g-100); color:var(--g-800); }
.cc-status.pending { background:var(--amber-bg); color:var(--amber); }
.cc-action { margin-top:12px; }
.cc-action .btn { width:100%; justify-content:center; }
.cc-invno { font-size:11.5px; color:var(--ink-3); }

/* ===== フィルターバー ===== */
.filter-bar {
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; margin-bottom:14px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.filter-bar label { font-size:12.5px; color:var(--ink-3); }
.filter-bar input, .filter-bar select {
  padding:6px 10px; border-radius:6px; border:1px solid var(--line);
  font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff;
}
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--g-500); }

/* ===== 一覧テーブル ===== */
.table-wrap { background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.list-tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.list-tbl th {
  padding:10px 14px; text-align:left; font-size:11.5px; font-weight:600;
  color:var(--g-800); background:var(--g-50); letter-spacing:.06em;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.list-tbl td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.list-tbl tr:last-child td { border-bottom:none; }
.list-tbl tbody tr { cursor:pointer; transition:background .12s; }
.list-tbl tbody tr:hover { background:var(--g-50); }
.cell-no { font-size:12.5px; color:var(--ink-2); letter-spacing:.03em; }
.cell-amount { font-weight:600; text-align:right; }
.doc-badge { display:inline-block; padding:2px 9px; border-radius:4px; font-size:11px; font-weight:600; }
.doc-badge.invoice { background:var(--g-100); color:var(--g-800); }
.doc-badge.payment { background:#e8ecf7; color:#3a5199; }
.svc-tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.svc-tag.singdo { background:#fdf1dc; color:#a8720a; }
.svc-tag.monthly { background:#efecfc; color:#5a48c0; }
.row-btns { display:flex; gap:6px; justify-content:flex-end; }
.row-btns .btn-sm { opacity:0; }
.list-tbl tbody tr:hover .btn-sm { opacity:1; }
.btn-danger-ghost { background:#fff; border:1px solid #f0d4d0; color:var(--red); }
.btn-danger-ghost:hover { background:#fdf1ef; border-color:#e5b6b0; }
.empty-row { text-align:center; color:var(--ink-3); padding:36px 0 !important; cursor:default; }

/* ===== 編集画面 ===== */
.edit-toolbar {
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:10px 24px; display:flex; align-items:center; gap:10px;
  position:sticky; top:0; z-index:20;
}
.edit-toolbar .t-title { font-family:var(--serif); font-size:15.5px; font-weight:600; flex:1; letter-spacing:.04em; }
.editor { display:flex; gap:22px; padding:22px 24px; max-width:1280px; margin:0 auto; align-items:flex-start; }
.form-col { width:320px; min-width:320px; display:flex; flex-direction:column; gap:12px; }
.prev-col { flex:1; min-width:0; }
.prev-label { font-size:11px; letter-spacing:.14em; color:var(--ink-3); font-weight:600; margin-bottom:8px; }

.form-card { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.form-card-title {
  font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--g-800);
  padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--line);
}
.field { margin-bottom:10px; }
.field:last-child { margin-bottom:0; }
.field label { display:block; font-size:12px; color:var(--ink-3); margin-bottom:3px; }
.field input, .field select, .field textarea {
  width:100%; padding:7px 10px; border-radius:6px; border:1px solid var(--line);
  font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff; transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--g-500); box-shadow:0 0 0 3px rgba(46,170,68,.1);
}
.field textarea { resize:vertical; }
.field-row { display:flex; gap:8px; }
.field-row > * { flex:1; }

/* 書類タイプ切替 */
.type-seg { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.type-seg button {
  flex:1; padding:9px 4px; font-size:13px; font-weight:600; border:none; cursor:pointer;
  background:transparent; color:var(--ink-3); transition:all .15s;
}
.type-seg button.active { background:var(--g-700); color:#fff; }

/* 品目行 */
.item-box {
  border:1px solid var(--line); border-radius:8px; padding:10px 12px 12px;
  margin-bottom:10px; background:#fafbfa; position:relative;
}
.item-box .del-x {
  position:absolute; top:6px; right:8px; background:none; border:none;
  color:#c6cdc8; font-size:16px; cursor:pointer; line-height:1;
}
.item-box .del-x:hover { color:var(--red); }
.add-row-btn {
  background:none; border:1px dashed #bfcac2; border-radius:8px; width:100%;
  padding:8px; font-size:12.5px; color:var(--g-700); cursor:pointer; transition:all .15s;
}
.add-row-btn:hover { border-color:var(--g-500); background:var(--g-50); }

/* トースト */
.toast {
  position:fixed; bottom:24px; right:24px; background:var(--g-900); color:#fff;
  padding:12px 22px; border-radius:9px; font-size:13.5px;
  box-shadow:0 10px 30px rgba(12,36,19,.3);
  transform:translateY(90px); opacity:0; transition:all .3s; z-index:200;
}
.toast.show { transform:translateY(0); opacity:1; }

/* モーダル */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,30,20,.5);
  z-index:100; align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
  background:#fff; border-radius:12px; padding:24px 26px; width:360px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.modal h3 { font-family:var(--serif); font-size:16px; margin-bottom:10px; }
.modal p { font-size:13.5px; color:var(--ink-2); margin-bottom:18px; }
.modal-btns { display:flex; gap:8px; justify-content:flex-end; }

/* ============================================================
   書類(請求書・支払通知書) — 画面プレビュー & 印刷 共用
   ============================================================ */
.doc {
  background:#fff; width:100%; max-width:820px;
  padding:52px 54px 40px;
  border:1px solid var(--line); border-radius:4px;
  box-shadow:0 2px 14px rgba(18,52,32,.07);
  font-size:13px; line-height:1.75; color:var(--ink);
  position:relative;
}

/* 頭部: タイトル + 番号/日付 */
.doc-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; }
.doc-title {
  font-family:var(--serif); font-size:31px; font-weight:600;
  letter-spacing:.42em; text-indent:.42em; color:var(--ink);
  padding-bottom:8px; border-bottom:4px double var(--g-700);
}
.doc-meta { text-align:right; font-size:12.5px; color:var(--ink-2); padding-top:6px; }
.doc-meta .m-no { letter-spacing:.04em; }
.doc-meta .m-no strong { font-size:13.5px; color:var(--ink); }

/* 宛先・発行者 */
.doc-parties { display:flex; justify-content:space-between; gap:30px; margin-bottom:8px; }
.doc-to { flex:1; min-width:0; padding-top:8px; }
.doc-to .to-zip { font-size:12px; color:var(--ink-2); }
.doc-to .to-addr { font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }
.doc-to .to-name {
  font-family:var(--serif); font-size:19px; font-weight:600;
  border-bottom:1.5px solid var(--ink); padding-bottom:5px;
  display:inline-block; letter-spacing:.02em;
}
/* グロラボ様通知書の右上を踏襲: 住所 → ロゴタイプ+マーク → TEL/FAX → 登録番号、右に角印 */
.doc-from { width:300px; min-width:300px; position:relative; padding-top:4px; }
.doc-from .from-sub { font-size:11px; color:var(--ink-2); line-height:1.8; white-space:nowrap; }
.doc-from .from-logo-row { display:flex; align-items:center; gap:8px; margin:7px 0 6px; }
.doc-from .from-logo-row .logo-text { height:33px; }
.doc-from .from-logo-row .logo-mark { height:36px; }
.doc-from .from-hanko {
  position:absolute; right:-4px; top:72px; height:56px; opacity:.88;
  mix-blend-mode:multiply;
}

/* 金額 */
.doc-amount { margin:20px 0 18px; }
.doc-amount .a-label {
  font-size:11.5px; letter-spacing:.22em; color:var(--g-800); font-weight:600; margin-bottom:2px;
}
.doc-amount .a-box {
  display:inline-block; min-width:320px;
  border-bottom:3px double var(--g-700);
  padding:2px 18px 6px 2px;
}
.doc-amount .a-val { font-family:var(--serif); font-size:32px; font-weight:600; letter-spacing:.02em; }
.doc-amount .a-tax { font-size:12px; color:var(--ink-2); margin-left:10px; }

/* 挨拶 */
.doc-greeting { font-size:12.5px; color:var(--ink-2); margin-bottom:16px; }

/* 支払方法 */
.doc-pay {
  background:var(--g-50); border-left:3px solid var(--g-600);
  padding:10px 16px; margin-bottom:20px; font-size:12.5px;
}
.doc-pay .p-label { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--g-800); display:block; }
.doc-pay strong { font-weight:700; }

/* 品目テーブル */
.doc-tbl { width:100%; border-collapse:collapse; margin-bottom:14px; font-size:12.5px; }
.doc-tbl th {
  border-top:2px solid var(--g-700); border-bottom:1px solid var(--g-700);
  color:var(--g-900); font-weight:600; font-size:11px; letter-spacing:.1em;
  padding:8px 9px; text-align:left; white-space:nowrap;
}
.doc-tbl th.r, .doc-tbl td.r { text-align:right; }
.doc-tbl td { padding:9px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-tbl td.note-col { font-size:11.5px; color:var(--ink-2); }

/* 合計 */
.doc-totals { display:flex; justify-content:flex-end; margin-bottom:22px; }
.doc-totals .t-inner { min-width:270px; }
.doc-totals .t-row {
  display:flex; justify-content:space-between; gap:30px;
  padding:6px 10px; font-size:13px; border-bottom:1px solid var(--line);
}
.doc-totals .t-row.grand {
  border-top:2px solid var(--g-700); border-bottom:none;
  font-family:var(--serif); font-size:16.5px; font-weight:700;
  background:var(--g-50); padding:9px 10px;
}

/* 備考 */
.doc-biko { margin-bottom:8px; }
.doc-biko .b-label { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--g-800); margin-bottom:3px; }
.doc-biko .b-box {
  border:1px solid var(--line); border-radius:3px;
  padding:9px 14px; font-size:12px; color:var(--ink-2); min-height:52px;
}

/* サービスロゴ + フッター */
.doc-svc { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:10px 0 16px; }
.doc-svc img { height:56px; }
.doc-svc img.mj-char { height:60px; }
.doc-svc img.mj-logo { height:26px; }
.doc-foot {
  border-top:2px solid var(--g-700); padding-top:8px;
  font-size:9.5px; color:var(--ink-3); letter-spacing:.02em;
  display:flex; justify-content:space-between; gap:10px;
}

/* ===== 印刷 ===== */
@media print {
  @page { size:A4; margin:0; }
  body { background:#fff; }
  .site-head, .edit-toolbar, .form-col, .prev-label, .toast, .modal-overlay { display:none !important; }
  .editor { display:block; padding:0; max-width:none; }
  .prev-col { width:auto; }
  .doc {
    max-width:none; width:210mm; min-height:296mm;
    padding:16mm 15mm 12mm;
    border:none; border-radius:0; box-shadow:none;
    font-size:12.5px;
  }
  .doc-pay, .doc-totals .t-row.grand, .doc-tbl th, .doc-title, .doc-amount .a-box, .doc-foot {
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}