:root {
  --line: #333;
  --line-thin: #999;
  --accent: #2b6cb0;
  --bg: #e8eaed;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDMincho", serif;
  color: #111;
}

/* ===== ツールバー ===== */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #ccc;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}
.toolbar-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.brand { font-size: 18px; margin: 0; }
.autosave-note { font-size: 12px; color: #666; flex: 1; min-width: 120px; }
.toolbar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.btn:hover { background: #f3f4f6; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #245a94; }
.btn-danger { color: #b91c1c; border-color: #e0b4b4; }
.btn-danger:hover { background: #fdf2f2; }

/* ===== 用紙 ===== */
.sheets { padding: 24px 8px 8px; }
.sheet {
  width: 210mm;
  min-height: 296mm;
  margin: 0 auto 24px;
  padding: 12mm 14mm;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4mm;
}
.sheet-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .5em;
  margin: 0;
}
.sheet-date { font-size: 12px; }
.in-date { width: 36mm; text-align: right; }

.head-row { display: flex; gap: 5mm; align-items: stretch; }
.head-row .personal { flex: 1; }

/* ===== 罫線テーブル ===== */
.grid {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4mm;
  table-layout: fixed;
}
.grid th, .grid td {
  border: 1.2px solid var(--line);
  padding: 1.5mm 2mm;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  text-align: left;
}
.grid th.label {
  width: 24mm;
  background: #fafafa;
  text-align: center;
}
.grid th.label.top { vertical-align: top; padding-top: 3mm; font-size: 11px; }
.grid th.label small { font-weight: normal; font-size: 9px; }

.kana-row th, .kana-row td { border-bottom-style: dashed; border-bottom-width: 1px; }
.kana-row .in { font-size: 10px; }
.name-row td { height: 14mm; }
.in-name { font-size: 20px; }

.birth-cell { letter-spacing: .05em; }
.gender-cell { width: 28mm; text-align: center; }
.gender-cell .in { width: 14mm; }
.mini-label { font-size: 10px; color: #444; margin-right: 1mm; }
.hint { color: #777; font-size: 9px; display: block; }

.address-cell { padding: 1mm 2mm 2mm; }
.in-zip { width: 22mm; }
.contact-cell .in-half { width: 42%; }

/* ===== 写真欄 ===== */
.photo-box {
  width: 30mm;
  height: 40mm;
  border: 1px dashed var(--line-thin);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-placeholder {
  font-size: 9px;
  color: #888;
  text-align: center;
  line-height: 1.7;
  font-family: "Hiragino Sans", sans-serif;
}
#photo-img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  padding: 1px 6px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
}

/* ===== 選択式ボタン（男/女・有/無など） ===== */
.choice {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}
.choice-opt {
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 16px;
  border: 1px solid #bcc4d0;
  border-radius: 999px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.choice-opt:hover { background: #f1f4f8; }
.choice-opt.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ===== 定型文チップ ===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 1.5mm;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}
.chips-label { font-size: 11px; color: #888; }
.chip {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid #c0c8d4;
  border-radius: 999px;
  background: #f5f7fa;
  color: #2b4a6f;
  cursor: pointer;
}
.chip:hover { background: #e8eef6; }
.chip:active { background: #d8e4f2; }
.hint-inline { font-size: 9px; color: #999; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }

/* ===== 学歴・職歴/免許 ===== */
.history thead th {
  text-align: center;
  background: #fafafa;
  height: 7mm;
}
.history .col-y { width: 18mm; }
.history .col-m { width: 10mm; }
.history tbody td { height: 8mm; padding: 0 1.5mm; }
.history tbody td.cell-y .in,
.history tbody td.cell-m .in { text-align: center; }

/* ===== 入力欄共通 ===== */
.in {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  width: 100%;
  padding: 0;
}
.in:focus { background: #eef5ff; }
.in-num4 { width: 12mm; text-align: center; }
.in-num2 { width: 8mm; text-align: center; }
.in-center { text-align: center; }
.ta { resize: none; display: block; line-height: 1.8; }
.ta-large { min-height: 36mm; }

.misc { table-layout: auto; }
.misc th.label { width: auto; font-size: 10px; padding: 1mm; }
.misc td { text-align: center; white-space: nowrap; font-size: 11px; padding: 1.5mm 1mm; }

.site-foot {
  text-align: center;
  font-size: 11px;
  color: #777;
  padding: 8px 0 32px;
  font-family: "Hiragino Sans", sans-serif;
}

/* スマホ専用UI（既定＝PC/印刷では非表示） */
.mobile-note { display: none; }
.step-head, .step-bar { display: none; }
.add-row { display: none; }

/* ===== 中間幅（タブレット等）：用紙のまま横スクロール ===== */
@media screen and (min-width: 769px) and (max-width: 840px) {
  .sheets { overflow-x: auto; }
}

/* ===== スマホ：用紙をやめて縦並びフォームに ===== */
@media screen and (max-width: 768px) {
  body { font-family: "Hiragino Sans", "Yu Gothic", sans-serif; background: #fff; }

  .toolbar-inner { padding: 8px 12px; gap: 8px; }
  .autosave-note { order: 9; flex-basis: 100%; min-width: 0; }
  .btn { padding: 10px 14px; font-size: 14px; }

  .mobile-note {
    display: block;
    font-size: 12px;
    color: #555;
    background: #fffbe6;
    border-bottom: 1px solid #f0e6b8;
    padding: 8px 12px;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  }

  /* 上のツールバーは固定解除（スクロールで隠れる）。保存状態は下バーに表示 */
  .toolbar { position: static; }
  .autosave-note { display: none; }

  .sheets { padding: 14px 14px 0; }
  /* 用紙の枠をなくし、各ブロックを素直に縦流しにする（ステップ表示のため） */
  .sheet { display: contents; }

  .sheet-head { display: block; margin-bottom: 12px; }
  .sheet-title { letter-spacing: .2em; font-size: 20px; }
  .sheet-date { margin-top: 8px; }

  /* --- 罫線テーブル → 縦並び --- */
  .grid, .grid thead, .grid tbody, .grid tr, .grid th, .grid td {
    display: block;
    width: auto;
  }
  .grid { margin-bottom: 8px; }
  .grid th, .grid td { border: none; padding: 0; }
  .grid th.label {
    background: none;
    text-align: left;
    font-size: 12px;
    color: #555;
    margin: 14px 0 4px;
  }
  .grid th.label.top { padding: 0; }
  .kana-row th, .kana-row td { border: none; }
  .kana-row .in { font-size: 16px; }
  .name-row td { height: auto; }
  .hint { font-size: 11px; margin-bottom: 4px; }

  /* --- 入力欄：タッチしやすく（16px未満だとiOSがズームする） --- */
  .in, .ta {
    font-size: 16px;
    border: 1px solid #c9ced6;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    width: 100%;
  }
  .in:focus, .ta:focus { border-color: var(--accent); background: #fff; }
  .in-name { font-size: 18px; }
  .ta-large { min-height: 120px; }

  /* インラインの小さい入力欄 */
  .in-date { width: 12em; display: inline-block; margin-right: 6px; text-align: left; }
  .in-num4 { width: 5.5em; display: inline-block; }
  .in-num2 { width: 4em; display: inline-block; }
  .in-zip { width: 9em; display: inline-block; }
  .birth-cell, .misc td { line-height: 2.4; }
  .gender-cell { width: auto; text-align: left; }

  /* 選択式ボタンは大きくタップしやすく */
  .choice { gap: 10px; }
  .choice-opt { font-size: 16px; padding: 10px 26px; }
  .mini-label { display: block; font-size: 12px; color: #555; margin: 14px 0 4px; }

  .address-cell { padding: 0; }
  .address-cell .ta { margin-top: 6px; }
  .contact-cell .in-half { width: 100%; }

  /* --- 写真 --- */
  .head-row { display: block; }
  .photo-box { margin: 14px auto 0; }

  /* --- 定型文チップ --- */
  .chips { gap: 8px; margin: 18px 0 0; }
  .chips-label { flex-basis: 100%; font-size: 12px; }
  .chip { font-size: 14px; padding: 9px 16px; }
  .hint-inline { display: inline-block; font-size: 11px; margin-left: 4px; }

  /* --- 学歴・職歴 / 免許・資格 --- */
  .history { margin-top: 8px; }
  .history thead .col-y, .history thead .col-m { display: none; }
  .history thead th {
    background: none;
    height: auto;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid #333;
    padding: 0 0 6px;
  }
  .history tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 0;
    border-bottom: 1px dashed #d5d5d5;
  }
  .history tbody td { height: auto; padding: 0; }
  .history tbody td::before {
    display: block;
    font-size: 10px;
    color: #999;
    margin-bottom: 2px;
  }
  .history tbody td.cell-y { flex: 0 0 34%; }
  .history tbody td.cell-y::before { content: "年"; }
  .history tbody td.cell-m { flex: 0 0 22%; }
  .history tbody td.cell-m::before { content: "月"; }
  .history tbody td:last-child { flex: 1 1 100%; }
  .history tbody td:last-child::before { content: "内容"; }
  .history tbody td .in { text-align: left; }

  /* --- 通勤時間など --- */
  .misc th.label { margin: 14px 0 4px; }
  .misc td { text-align: left; white-space: normal; font-size: 16px; }
  .misc .in-center { width: 6em; display: inline-block; }

  .site-foot { padding: 4px 14px 28px; }

  /* --- ステップ送り：表示中以外のセクションを隠す --- */
  .step-hidden { display: none !important; }
  body.stepper-on { padding-bottom: 76px; } /* 下バーの分 */

  /* 上：進捗＋セクション名（細い固定ヘッダー） */
  .step-head {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
  }
  .step-progress { height: 4px; background: #e7ebf0; }
  .step-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .25s ease;
  }
  .step-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
  }
  .step-count { font-size: 12px; color: #888; }
  .step-name { font-size: 16px; font-weight: 600; }

  /* 下：戻る／保存状態／次へ */
  .step-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  .step-btn {
    flex: 0 0 auto;
    font-size: 15px;
    padding: 11px 16px;
    border: 1px solid #c2c8d2;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
  }
  .step-btn:disabled { opacity: .4; }
  .step-btn-next { background: var(--accent); border-color: var(--accent); color: #fff; }
  .step-btn-finish { background: #1f9d55; border-color: #1f9d55; }
  .step-saved {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #1f9d55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .step-saved.is-saving { color: #888; }
  .step-saved.is-error { color: #b91c1c; }

  /* --- ＋行を追加 --- */
  .row-hidden { display: none !important; }
  .add-row {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 12px;
    font-size: 14px;
    color: var(--accent);
    background: #f4f8fd;
    border: 1px dashed #b9cbe2;
    border-radius: 8px;
    cursor: pointer;
  }
  .add-row-full { display: none; }
}

/* ===== 印刷 ===== */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .toolbar, .site-foot, .photo-placeholder, .photo-remove,
  .chips, .hint-inline, .mobile-note,
  .step-head, .step-bar, .add-row { display: none !important; }
  .step-hidden, .row-hidden { display: revert !important; }
  .sheets { padding: 0; }
  .sheet {
    width: 210mm;
    min-height: 0;
    height: 296mm;
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
  .photo-box { border: 1px dashed var(--line-thin); }
  .in:focus { background: transparent; }
  .in::placeholder { color: transparent; }

  /* 選択式は「選んだ文字」だけを地の文として印字 */
  .choice { gap: 0; }
  .choice-opt {
    border: none !important;
    background: none !important;
    color: #111 !important;
    padding: 0 !important;
    font: inherit !important;
    font-weight: normal !important;
    border-radius: 0 !important;
  }
  .choice-opt:not(.is-selected) { display: none !important; }
}