/* ==========================================================================
   式次第作成ツール 専用CSS
   すべてのカスタムクラスは cpm- プレフィックスを付け、既存Bizroute CSSと
   衝突しないようにする。
   ========================================================================== */

/* ── Webフォント ──────────────────────────────────────────────────────
   楷書体・毛筆体・和風毛筆体はBizrouteサーバー(fonts/)に設置したWOFF2を
   @font-faceで読み込む。ブラウザは実際にそのfont-familyを使うテキストが
   描画されるまでファイルを取得しないため、ユーザーがそのフォントを選んだ
   ときだけ通信が発生する（初期表示の速度には影響しない）。
   いずれもOFLライセンス（Web埋め込み・商用利用可）のオープンソースフォント。
   ライセンス条件の詳細は各フォントの配布元を参照。
   ========================================================================== */
@font-face {
  font-family: "Klee One";
  src: url("../fonts/KleeOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yuji Syuku";
  src: url("../fonts/YujiSyuku-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kaisei HarunoUmi";
  src: url("../fonts/KaiseiHarunoUmi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── フォントスタック（本文・タイトル共通で使う書体クラス） ────────────────
   楷書体・毛筆体・和風毛筆体は、収録されていない文字があっても文字が消えず
   明朝体へ自然にフォールバックするよう、必ず明朝体スタックを後ろに続ける。
   ────────────────────────────────────────────────────────────────────── */
.cpm-font-mincho {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
}

.cpm-font-gothic {
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
    "Meiryo", sans-serif;
}

.cpm-font-klee {
  font-family: "Klee One", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
}

.cpm-font-yuji {
  font-family: "Yuji Syuku", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
}

.cpm-font-kaisei {
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
}

/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  background: #f3f5f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid #2f6fb0;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  body { padding-bottom: 64px; }
}

/* ── パンくず / SEO見出し ─────────────────────────────────────────── */
.cpm-breadcrumb {
  max-width: 1120px;
  margin: 14px auto 0;
  padding: 0 16px;
}

.cpm-seo-header {
  max-width: 1120px;
  margin: 10px auto 16px;
  padding: 0 16px;
}

.cpm-seo-header h1 {
  font-size: 1.55rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.cpm-seo-lead {
  color: #444;
  margin-bottom: 4px;
  line-height: 1.75;
}

.cpm-seo-lead-sub {
  color: #6b7280;
  font-size: 0.82rem;
  margin: 0 0 10px;
}

/* ── メインレイアウト ─────────────────────────────────────────────── */
.cpm-main-container {
  max-width: 1160px;
  margin: 0 auto 48px;
  padding: 0 16px;
}

.cpm-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 992px) {
  .cpm-main-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .cpm-col-preview {
    align-self: start;
    min-width: 0;
    position: sticky;
    top: 20px;
  }
}

/* ── セクションカード ─────────────────────────────────────────────── */
.cpm-section-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid #e4e9f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cpm-setting-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eef1f5;
}

.cpm-setting-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cpm-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f4f8a;
  margin: 0 0 10px;
}

/* ── フォーム部品 ─────────────────────────────────────────────────── */
.cpm-form-field { margin-bottom: 14px; }
.cpm-form-field:last-child { margin-bottom: 0; }

.cpm-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cpm-field-row .cpm-form-field { margin-bottom: 0; }

.cpm-form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}

.cpm-form-field input[type="text"],
.cpm-form-field input[type="time"],
.cpm-form-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.92rem;
  min-height: 42px;
  background: #fff;
  color: #111827;
}

.cpm-form-field input:focus,
.cpm-form-field select:focus {
  outline: none;
  border-color: #2f6fb0;
  box-shadow: 0 0 0 2px rgba(47, 111, 176, 0.2);
}

.cpm-checkbox-field { margin-bottom: 10px; }

.cpm-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #1f2937;
  cursor: pointer;
  min-height: 32px;
}

.cpm-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2f6fb0;
}

.cpm-inline-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cpm-inline-toggle .cpm-form-field { flex: 1 1 auto; margin-bottom: 0; }

.cpm-hint {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 4px 0 0;
  line-height: 1.6;
}

.cpm-privacy-note {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 12px 0 0;
  line-height: 1.6;
}

.cpm-save-status {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0 0 10px;
}

/* 折りたたみセクション（フォント・文字 / レイアウト・装飾） */
.cpm-details {
  margin: 0 0 4px;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  overflow: hidden;
}

.cpm-details summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f4f8a;
  padding: 12px 14px;
  list-style: none;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.cpm-details summary::-webkit-details-marker { display: none; }

.cpm-details summary::before {
  content: '▶';
  font-size: 0.68rem;
  transition: transform 0.15s;
}

.cpm-details[open] summary::before { transform: rotate(90deg); }

.cpm-details-body { padding: 14px; }

/* ── 式次第項目リスト ─────────────────────────────────────────────── */
.cpm-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.cpm-item-row {
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  padding: 12px;
  background: #fafbfd;
}

.cpm-item-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  margin-bottom: 8px;
}

.cpm-item-row-main.cpm-item-row-main--single {
  grid-template-columns: minmax(0, 1fr);
}

.cpm-item-row label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 3px;
}

.cpm-item-row input[type="time"],
.cpm-item-row input[type="text"] {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 0.9rem;
  min-height: 38px;
  background: #fff;
  color: #111827;
}

.cpm-item-row input:focus {
  outline: none;
  border-color: #2f6fb0;
  box-shadow: 0 0 0 2px rgba(47, 111, 176, 0.2);
}

.cpm-item-row-note { margin-bottom: 8px; }

.cpm-item-row-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.cpm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #444;
  font-size: 0.9rem;
  cursor: pointer;
}

.cpm-icon-btn:hover { background: #eef2f7; }
.cpm-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cpm-icon-btn:disabled:hover { background: #fff; }

.cpm-icon-btn-danger { color: #a83232; }

/* ── フォント・文字サイズ設定 ─────────────────────────────────────── */
.cpm-setting-subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
}

.cpm-font-sample-box {
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  background: #fafbfd;
  padding: 14px 12px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 14px;
}

.cpm-font-sample-box .cpm-font-sample-text {
  font-size: 1.9rem;
  color: #1f2937;
  line-height: 1.3;
}

.cpm-font-sample-box .cpm-font-sample-caption {
  font-size: 0.72rem;
  color: #9aa4b2;
  margin-top: 4px;
}

/* ── レイアウト・装飾設定 ─────────────────────────────────────────── */
.cpm-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cpm-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: #1f2937;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
}

.cpm-radio-option:hover { background: #f4f7fb; }

.cpm-radio-option input[type="radio"] {
  margin-top: 3px;
  accent-color: #2f6fb0;
  cursor: pointer;
}

.cpm-radio-option-text strong { display: block; }
.cpm-radio-option-text span {
  display: block;
  font-size: 0.76rem;
  color: #6b7280;
}

/* 文字方向（横書き／縦書き）の2択トグル。スマホでも押しやすいよう最小44pxを確保 */
.cpm-segmented {
  display: flex;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

.cpm-segmented-option {
  flex: 1 1 0;
  position: relative;
}

.cpm-segmented-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cpm-segmented-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
}

.cpm-segmented-option:not(:first-child) span { border-left: 1px solid #cbd5e1; }

.cpm-segmented-option:has(input:checked) span {
  background: #2f6fb0;
  color: #fff;
}

.cpm-segmented-option:has(input:focus-visible) span {
  outline: 2px solid #2f6fb0;
  outline-offset: -2px;
}

/* ── ボタン群 ─────────────────────────────────────────────────────── */
.cpm-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cpm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #333;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  min-height: 44px;
}

.cpm-btn:hover { background: #eef2f7; }

.cpm-btn-primary {
  background: #2f6fb0;
  border-color: #2f6fb0;
  color: #fff;
}

.cpm-btn-primary:hover { background: #245a91; }

.cpm-btn-outline {
  background: #fff;
  border-color: #2f6fb0;
  color: #2f6fb0;
}

.cpm-btn-outline:hover { background: #eaf2fb; }

.cpm-btn-text-danger {
  background: none;
  border: none;
  color: #a83232;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 4px;
  min-height: 44px;
}

.cpm-btn-text-danger:hover { color: #7a1f1f; }

.cpm-btn-add {
  width: 100%;
  border-style: dashed;
}

/* ── プレビュー ツールバー ────────────────────────────────────────── */
.cpm-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.cpm-preview-toolbar .cpm-btn-row { justify-content: flex-end; }

.cpm-print-note {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0 0 12px;
  line-height: 1.6;
}

.cpm-overflow-warning {
  font-size: 0.8rem;
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #f3dfae;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 12px;
}

/* ── A4 プレビュー本体 ────────────────────────────────────────────── */
.cpm-paper-scale-wrap {
  overflow-x: auto;
  padding: 4px 0 6px;
}

.cpm-paper-stage {
  position: relative;
  margin: 0 auto;
}

.cpm-a4-paper {
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  /* 画面上で用紙の境界が分かるよう薄い枠線を付ける（枠線「なし」でも
     用紙自体の範囲が把握できるようにするための表示用。印刷時は解除する）。
     borderはボックスサイズに影響し、縦書き時（幅auto）でスクロール
     バーが出る原因になるため、レイアウトに影響しないoutlineを使う */
  outline: 1px solid #e4e9f0;
  outline-offset: -1px;
  transform-origin: top left;
  padding: 18mm;
  color: #111827;
}

.cpm-a4-paper[data-layout="formal"] { padding: 24mm 22mm; }

/* 枠線
   二重枠は、外側の線をoutlineで描くと印刷時にごくわずかな位置ズレが生じ、
   内側の線(::beforeのborder)と右側で重なって見えることがあったため、
   外側・内側とも同じ仕組み(位置指定した要素へのborder)で統一している */
.cpm-a4-paper[data-border="thin"] { outline: 1px solid #333; outline-offset: -10mm; }
.cpm-a4-paper[data-border="double"]::before,
.cpm-a4-paper[data-border="double"]::after {
  content: "";
  position: absolute;
  border: 1px solid #333;
  pointer-events: none;
}
.cpm-a4-paper[data-border="double"]::before { inset: 8mm; }
.cpm-a4-paper[data-border="double"]::after { inset: 11mm; }

/* ── 式次第本体（タイトル部） ─────────────────────────────────────── */
.cpm-title-block {
  text-align: center;
  margin-bottom: 14mm;
}

.cpm-title-sub {
  font-size: 28px;
  color: #444;
  margin: 0 0 3mm;
}

.cpm-title-main {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.cpm-title-main[data-underline="thin"] {
  display: inline-block;
  border-bottom: 1px solid #333;
  padding-bottom: 1.5mm;
}

.cpm-title-main[data-underline="double"] {
  display: inline-block;
  /* 3pxだとプレビューの縮小表示で二重線が潰れて太い一本線に見えるため、
     縮小されても二重線と分かる太さにする */
  border-bottom: 6px double #333;
  padding-bottom: 0.8mm;
}

.cpm-title-label {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin: 4mm 0 0;
}

.cpm-title-meta {
  font-size: 0.95rem;
  color: #333;
  margin: 6mm 0 0;
  line-height: 1.9;
}

/* ── 式次第本体（項目部） ─────────────────────────────────────────── */
.cpm-item-preview-list {
  margin: 0 auto;
  max-width: 150mm;
}

.cpm-item-preview-row {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: 3mm 0;
}

.cpm-item-preview-number {
  flex: none;
  min-width: 9mm;
  color: #444;
}

.cpm-item-preview-time {
  margin-left: 4mm;
  font-size: 0.85em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #444;
}

.cpm-item-preview-body { flex: 1 1 auto; }

.cpm-item-preview-name { font-weight: 600; }

.cpm-item-preview-note {
  font-size: 0.85em;
  color: #444;
  margin-top: 1mm;
}

/* 行間 */
.cpm-item-preview-list[data-line-height="narrow"] .cpm-item-preview-row { padding: 1.5mm 0; }
.cpm-item-preview-list[data-line-height="normal"] .cpm-item-preview-row { padding: 3mm 0; }
.cpm-item-preview-list[data-line-height="wide"] .cpm-item-preview-row { padding: 5mm 0; }

/* レイアウト種別 */
.cpm-a4-paper[data-layout="center"] .cpm-item-preview-row {
  justify-content: center;
  text-align: center;
}
.cpm-a4-paper[data-layout="center"] .cpm-item-preview-note { text-align: center; }

.cpm-a4-paper[data-layout="formal"] .cpm-item-preview-list {
  margin-top: 10mm;
}
.cpm-a4-paper[data-layout="formal"] .cpm-title-block { margin-bottom: 20mm; }

/* ══════════════════════════════════════════════════════════════════════
   縦書きレイアウト（data-writing="vertical"）
   横書き用の上記ルールは一切変更せず、縦書き専用の上書きルールとして
   ここにまとめる。縦書きはA4横向き（297mm×210mm）に限定し、
   高さ210mmを固定して1列あたりの文字量とし、内容が増えるほど
   列（幅）が右→左へ伸びる構成にする。
   ══════════════════════════════════════════════════════════════════════ */
.cpm-a4-paper[data-writing="vertical"] {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: auto;
  min-width: 297mm;
  height: 210mm;
  min-height: 0; /* 横書き用のmin-height:297mmがそのままだと高さが縮まらないため解除 */
}

/* タイトル部：ブロック進行方向が右→左になるため、横書きのmargin-bottom
   （次の要素との間隔）はmargin-leftへ読み替える */
.cpm-a4-paper[data-writing="vertical"] .cpm-title-block {
  margin-bottom: 0;
  margin-left: 12mm;
}

.cpm-a4-paper[data-writing="vertical"] .cpm-title-sub {
  margin: 0 0 0 4mm;
}

.cpm-a4-paper[data-writing="vertical"] .cpm-title-label {
  margin: 0 0 0 5mm;
}

.cpm-a4-paper[data-writing="vertical"] .cpm-title-meta {
  margin: 0 0 0 6mm;
  line-height: 1.7;
}

/* タイトル下線：横書きの下線(文字の下)は縦書きでは不自然になるため、
   文字の左側へ縦線として表示する */
.cpm-a4-paper[data-writing="vertical"] .cpm-title-main[data-underline="thin"] {
  border-bottom: none;
  border-left: 1px solid #333;
  padding-bottom: 0;
  padding-left: 2mm;
}

.cpm-a4-paper[data-writing="vertical"] .cpm-title-main[data-underline="double"] {
  border-bottom: none;
  border-left: 6px double #333;
  padding-bottom: 0;
  padding-left: 1.2mm;
}

/* 項目リスト：横書き用の最大幅制限(可読行長のための制約)は不要なので解除 */
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-list {
  max-width: none;
}

/* 各項目行：writing-mode継承によりflexの主軸(row=インライン軸)が縦方向になり、
   番号→本文が自然に1列内で上から下へ並ぶ */
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-row {
  align-items: flex-start;
  padding: 0 4mm;
}

/* 行間（横書きでは上下のpadding）は、縦書きでは列と列の左右間隔として反映する */
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-list[data-line-height="narrow"] .cpm-item-preview-row { padding: 0 2mm; }
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-list[data-line-height="normal"] .cpm-item-preview-row { padding: 0 4mm; }
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-list[data-line-height="wide"] .cpm-item-preview-row { padding: 0 7mm; }

/* 項目名・補足：同じ列内にまとまるよう、flexのrow(=インライン軸=縦方向)で
   上から下へ並べる。横書きは無変更(通常のブロック上下積み) */
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2mm;
}

/* 時刻「10:00」は1文字ずつ縦に並べず、1マス分の横並び数字として表示する */
.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-time {
  margin-left: 0;
  margin-top: 2mm;
  text-combine-upright: all;
}

.cpm-a4-paper[data-writing="vertical"] .cpm-item-preview-note {
  margin: 0;
}

/* 縦中横：日付・項目名などに含まれる数字（「8」「10」など）が
   1文字ずつ横倒しにならないよう、数字部分だけ1マスにまとめて表示する。
   text-combine-uprightは横書きでは効果を持たないため、常に付与してよい */
.cpm-tatechuyoko {
  text-combine-upright: all;
}

/* ── 使用フォントについて ─────────────────────────────────────────── */
.cpm-font-credit {
  max-width: 1120px;
  margin: 0 auto 24px;
  padding: 0 16px;
  font-size: 0.76rem;
  color: #9aa4b2;
  line-height: 1.7;
}

/* ── スマートフォン固定操作バー ───────────────────────────────────── */
.cpm-mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e4e9f0;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.1);
}

.cpm-mobile-action-bar .cpm-btn {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 0.86rem;
}

@media (min-width: 992px) {
  .cpm-mobile-action-bar { display: none; }
}

/* ── 解説エリア ───────────────────────────────────────────────────── */
.cpm-doc-section {
  max-width: 1120px;
  margin: 40px auto 60px;
  padding: 0 16px;
  line-height: 1.8;
  color: #374151;
}

.cpm-doc-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 40px 0 14px;
  color: #111827;
  border-left: 4px solid #2f6fb0;
  padding-left: 10px;
}

.cpm-doc-section h2:first-of-type { margin-top: 0; }

.cpm-doc-section h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 16px 0 8px;
  color: #1f4f8a;
}

.cpm-doc-section p,
.cpm-doc-section li {
  font-size: 0.92rem;
  line-height: 1.85;
  color: #374151;
}

.cpm-doc-section p { margin: 0 0 12px; }
.cpm-doc-section ul { margin: 0 0 12px; padding-left: 1.4em; }
.cpm-doc-section li { margin-bottom: 4px; }

.cpm-steps {
  list-style: none;
  counter-reset: cpm-step;
  padding: 0;
  margin: 0 0 14px;
}

.cpm-steps li {
  position: relative;
  padding: 10px 0 12px 34px;
  border-bottom: 1px solid #f3f4f6;
}

.cpm-steps li:last-child { border-bottom: none; }

.cpm-steps li::before {
  counter-increment: cpm-step;
  content: counter(cpm-step);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f6fb0;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpm-doc-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 14px;
}

.cpm-doc-box p:last-child,
.cpm-doc-box ul:last-child { margin-bottom: 0; }

/* 関連ページ */
.cpm-related-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cpm-related-link-list li {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.cpm-related-link-list a {
  color: #1d4ed8;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.cpm-related-link-list a:hover { text-decoration: underline; }

.cpm-related-link-list .cpm-note {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: 2px;
}

/* ── レスポンシブ ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cpm-field-row { grid-template-columns: minmax(0, 1fr); }
  .cpm-item-row-main { grid-template-columns: minmax(0, 1fr) 84px; }
  .cpm-section-card { padding: 14px 14px 16px; }
}

/* ── 印刷 ─────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }

  body {
    background: #fff;
    padding-bottom: 0;
  }

  .cpm-main-grid { display: block; }

  /* プレビュー全体を包む白いカード自体にも影・枠線・余白があるため、
     印刷時はA4本体だけが見えるよう装飾を解除する */
  .cpm-col-preview .cpm-section-card {
    box-shadow: none !important;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .cpm-paper-scale-wrap {
    overflow: visible;
    padding: 0;
  }

  .cpm-paper-stage {
    width: auto !important;
    height: auto !important;
  }

  .cpm-a4-paper {
    /* staticではなくrelativeにする：二重枠の::before/::afterは
       position:absoluteで.cpm-a4-paper自身を基準に大きさを決めているため、
       staticのままだと基準がページ全体などにずれ、枠がページをまたいで
       伸びてしまう。relativeなら通常のフロー（margin:autoでの中央/右寄せ等）
       を保ったまま、正しく用紙自身を基準にできる */
    position: relative;
    transform: none !important;
    box-shadow: none !important;
    /* 画面表示用の淡いoutlineを印刷時は消す（!importantは付けない。
       枠線「細い枠/二重枠」選択時は、より詳細度の高い
       .cpm-a4-paper[data-border="..."]側のoutlineが優先されるため、
       それらの印刷への反映は妨げない） */
    outline: none;
    margin: 0 auto;
    /* 内容がちょうど収まる分量のとき、用紙の高さぴったりに達していると
       ブラウザ・プリンタ側の丸め誤差でわずかに溢れ、内容のない2枚目が
       印刷されることがあるため、印刷時だけ少し余裕を持たせる */
    min-height: calc(297mm - 3mm) !important;
  }

  /* 縦書き：画面表示用の min-width:297mm は「内容が少なくてもA4横向きの
     用紙に見えるように」という表示上の下限であり、印刷時にそのまま残すと、
     プリンタ・PDFドライバが@pageのlandscape指定に対応せず用紙がA4縦の
     ままになった場合、内容の有無に関わらず297mm幅が210mm幅の用紙に
     必ず収まりきらず、空白の2枚目が印刷されてしまう。
     印刷時はこの下限を外し、実際の内容量に応じた幅で印刷されるようにする
     （内容が本当にA4に収まらない場合は、既存のページ超過表示の通り
     複数ページに分かれて印刷される） */
  .cpm-a4-paper[data-writing="vertical"] {
    min-width: 0 !important;
    height: calc(210mm - 3mm) !important;
    min-height: 0 !important;
    /* 上のmargin:0 autoによる中央寄せを解除する。縦書きは右から読み始める
       デザインのため、内容が用紙の実際の幅より狭いときは中央ではなく
       右端に寄せて配置する */
    margin: 0 0 0 auto !important;
  }

  .cpm-item-preview-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}


/* ── 使いやすさ改善（2026-08） ───────────────────────────────────── */
.cpm-basic-compact-row {
  margin-bottom: 6px;
}

.cpm-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.cpm-section-heading-row .cpm-section-title {
  margin-bottom: 0;
}

.cpm-inline-display-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cpm-checkbox-compact {
  min-height: 36px;
  font-size: 0.82rem;
}

.cpm-inline-select-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.cpm-inline-select {
  min-height: 36px;
  padding: 6px 28px 6px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  font-size: 0.82rem;
  color: #111827;
}

.cpm-preset-block {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef1f5;
}

.cpm-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.cpm-preset-btn {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1f4f8a;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 10px;
}

.cpm-preset-btn:hover {
  background: #eef5fc;
  border-color: #8fb6de;
}

.cpm-font-sample-body {
  font-size: 1.25rem !important;
}

.cpm-preview-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cpm-preview-status-row .cpm-print-note {
  margin: 0;
}

.cpm-page-status {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.cpm-page-status-ok {
  color: #24633b;
  background: #eef8f1;
  border: 1px solid #cfe8d6;
}

.cpm-page-status-over {
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #f3dfae;
}

.cpm-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
}

.cpm-font-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
}

.cpm-font-guide-table th,
.cpm-font-guide-table td {
  border: 1px solid #e5e7eb;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.cpm-font-guide-table th {
  background: #f8fafc;
  font-weight: 700;
}

/* PCでは項目入力をよりコンパクトにする */
@media (min-width: 641px) {
  .cpm-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 10px;
  }

  .cpm-item-row-main {
    grid-column: 1;
    margin-bottom: 0;
  }

  .cpm-item-row-note {
    grid-column: 1;
    margin-bottom: 0;
  }

  .cpm-item-row-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    flex-direction: column;
  }

  .cpm-icon-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 640px) {
  .cpm-preset-grid {
    grid-template-columns: 1fr;
  }

  .cpm-inline-display-controls {
    width: 100%;
    justify-content: flex-start;
  }
}


/* ── UI整理（統合版） ───────────────────────────────────────── */
.cpm-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.cpm-preset-btn small {
  display: block;
  font-size: 0.68rem;
  line-height: 1.3;
  color: #64748b;
  font-weight: 500;
}

.cpm-preset-btn.is-active {
  border-color: #2f6fb0;
  background: #eef5fc;
  box-shadow: inset 0 0 0 1px #2f6fb0;
}

.cpm-preset-btn.is-active small {
  color: #1f4f8a;
}

.cpm-setting-unavailable {
  opacity: 0.48;
}

.cpm-setting-unavailable select {
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .cpm-section-heading-row {
    align-items: flex-start;
  }

  .cpm-inline-display-controls {
    margin-top: 2px;
  }

  .cpm-inline-select {
    min-width: 130px;
  }
}