/* ============================================================
   株式会社ANDRYU 第1回少人数私募債 電子契約
   共通スタイル（署名ページ / 管理ページ）

   ・本文15px、見出し20/17/16px、補助13pxが下限
   ・入力欄は16px以上（iOSの自動ズーム防止）
   ・スマホ最優先の1カラム。ボタンは高さ48px以上
   ・落ち着いた配色。白背景固定（ダークモードは非対応＝印刷が主目的）
   ============================================================ */

:root {
  --ink:        #1f2328;  /* 本文の文字色 */
  --ink-sub:    #5b6570;  /* 補助テキスト */
  --line:       #d8dde3;  /* 罫線 */
  --line-soft:  #ebeef2;
  --bg:         #ffffff;
  --bg-soft:    #f6f8fa;
  --accent:     #1f4e5f;  /* 落ち着いた濃い青緑 */
  --accent-ink: #ffffff;
  --warn-bg:    #fdf6e8;
  --warn-line:  #e4d3a8;
  --warn-ink:   #6b5312;
  --err-bg:     #fbf0f0;
  --err-line:   #e0bcbc;
  --err-ink:    #8a2f2f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

/* ---- 見出し ---- */
h1 { font-size: 20px; line-height: 1.5; margin: 0 0 4px; font-weight: 700; }
h2 { font-size: 17px; line-height: 1.6; margin: 28px 0 10px; font-weight: 700; }
h3 { font-size: 16px; line-height: 1.6; margin: 20px 0 8px; font-weight: 700; }
p  { margin: 0 0 12px; }

.sub      { font-size: 13px; color: var(--ink-sub); margin: 0 0 16px; }
.note     { font-size: 13px; color: var(--ink-sub); }
.center   { text-align: center; }
.mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            word-break: break-all; }

/* ---- ヘッダー ---- */
.pagehead {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.pagehead .issuer { font-size: 13px; color: var(--ink-sub); margin: 0 0 6px; }

/* ---- 状態メッセージ ---- */
.msgbox {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  margin: 40px 0;
}
.msgbox.error  { background: var(--err-bg);  border-color: var(--err-line);  color: var(--err-ink); }
.msgbox strong { display: block; font-size: 17px; margin-bottom: 6px; }

.warnbox {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin: 0 0 16px;
}

/* ---- 契約書本文 ---- */
.contract {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 18px;
  background: #fff;
  margin: 0 0 24px;
}
.contract h2:first-child { margin-top: 0; }
.contract table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.contract th, .contract td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.contract th { background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
.contract ol, .contract ul { padding-left: 1.4em; margin: 0 0 12px; }

/* ---- フォーム ---- */
.field { margin: 0 0 18px; }
.field > label.lbl {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.req {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #8a2f2f;
  background: #fbf0f0;
  border: 1px solid var(--err-line);
  border-radius: 4px;
  padding: 0 6px;
  margin-left: 6px;
  vertical-align: 1px;
}
.hint { font-size: 13px; color: var(--ink-sub); margin: 4px 0 0; }

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  font-size: 16px;          /* ★16px未満にしない（iOSで自動ズームするため） */
  line-height: 1.5;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  min-height: 48px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.radiorow { display: flex; gap: 10px; flex-wrap: wrap; }
.radiorow label {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  min-height: 48px;
  font-size: 15px;
  cursor: pointer;
}
.radiorow input[type="radio"] { width: 20px; height: 20px; margin: 0; }

.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg-soft);
  font-size: 15px;
  cursor: pointer;
}
.checkline input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; }

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px 2px;
  margin: 0 0 20px;
}
fieldset > legend { font-size: 16px; font-weight: 700; padding: 0 6px; }

.amountview {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 16px;
}
.amountview strong { font-size: 20px; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sub2 { background: #fff; color: var(--accent); }
.btn.small { width: auto; min-height: 44px; font-size: 15px; padding: 8px 14px; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.btnrow .btn { flex: 1 1 160px; width: auto; }

.err {
  color: var(--err-ink);
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  margin: 0 0 14px;
}

/* ---- 確認ダイアログ（自前実装。confirm() は使わない） ---- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 28, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal {
  background: #fff;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 18px;
}
.modal h3 { margin-top: 0; }
.modal .summary {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  margin: 12px 0 16px;
}
.modal .summary div {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.modal .summary div:last-child { border-bottom: 0; }
.modal .summary span.k { flex: 0 0 34%; color: var(--ink-sub); font-size: 13px; }
.modal .summary span.v { flex: 1 1 auto; }

/* ---- 記録（証跡）の枠 ---- */
.record {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0 0;
  background: var(--bg-soft);
  font-size: 14px;
}
.record h3 { margin-top: 0; }
.record dl { margin: 0; }
.record dt { font-size: 13px; color: var(--ink-sub); margin-top: 10px; }
.record dd { margin: 2px 0 0; word-break: break-all; }
.record .fixed { margin: 14px 0 0; font-size: 13px; color: var(--ink-sub); }

/* ---- 一覧テーブル（管理ページ） ---- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.list th, table.list td { border-bottom: 1px solid var(--line-soft); padding: 10px 12px; text-align: left; vertical-align: top; white-space: nowrap; }
table.list th { background: var(--bg-soft); font-size: 13px; color: var(--ink-sub); font-weight: 700; }
table.list tr:last-child td { border-bottom: 0; }

.badge { display: inline-block; font-size: 13px; border-radius: 4px; padding: 1px 8px; border: 1px solid var(--line); background: #fff; }
.badge.open   { border-color: #b9cbd6; background: #eef5f8; color: #1f4e5f; }
.badge.signed { border-color: #b5cdb5; background: #eef6ee; color: #2f5e33; }
.badge.void   { border-color: var(--line); background: var(--bg-soft); color: var(--ink-sub); }

.urlbox {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 12px;
  font-size: 14px;
  word-break: break-all;
  margin: 10px 0;
}

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ============================================================
   印刷（PDF保存）用
   ・A4 / 余白 18mm 16mm
   ・ボタン・入力欄・ナビは出さない
   ・契約書本文＋署名情報＋証跡だけが出る
   ・条文の途中で改ページしない
   ============================================================ */
@page {
  size: A4;
  margin: 18mm 16mm;
}

@media print {
  html, body {
    background: #fff !important;
    font-size: 10.5pt;
    line-height: 1.7;
  }
  .wrap { max-width: none; padding: 0; margin: 0; }

  /* 画面用の装飾・操作系は印刷しない */
  .no-print,
  .btn, .btnrow, .modal-back, .warnbox,
  form, input, select, textarea, button {
    display: none !important;
  }

  h1 { font-size: 14pt; }
  h2 { font-size: 12pt; }
  h3 { font-size: 11pt; }

  .contract,
  .record,
  .signview {
    border: 1px solid #888;
    border-radius: 0;
    background: #fff !important;
    padding: 10pt;
  }

  /* 条文の途中で切らない */
  .contract h2, .contract h3, .record h3, h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
  .contract p, .contract li, .contract table,
  .record, .record dl, .signview table, .kv {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .signview table, .contract table { font-size: 9.5pt; }
  .signview th, .signview td, .contract th, .contract td { border: 1px solid #888; }
  .signview th, .contract th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a { color: inherit; text-decoration: none; }
}

/* ---- 署名内容の表（画面・印刷共通） ---- */
.signview { margin: 24px 0 0; }
.signview table { width: 100%; border-collapse: collapse; font-size: 14px; }
.signview th, .signview td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.signview th { background: var(--bg-soft); width: 34%; font-weight: 700; white-space: nowrap; }
.signview td { word-break: break-all; }