/* ==========================================================================
   利用マニュアル（CPT: manual）専用スタイル
   - 1カラム・超シンプル・レスポンシブ
   - 表示（front）とブロックエディタ（add_editor_style）で共通使用
   - STEPは CSSカウンタで自動採番（編集時に番号を打つ必要なし）
   - 色は既存トークンを参照しつつ、フォールバック値を併記して堅牢化
   ========================================================================== */

:root{
  --mcm-brand:#FFC93C; --mcm-brand-deep:#F2A900; --mcm-navy:#0F1D33;
  --mcm-ink:#15202B; --mcm-muted:#5B6776; --mcm-line:#E8EAF0;
  --mcm-cream:#FFF8E7; --mcm-proof:#119955; --mcm-alert:#E5484D;
  --mcm-shadow:0 4px 20px rgba(15,29,51,.06);
  --mcm-shadow-lg:0 12px 40px rgba(15,29,51,.10);
}

/* ---------- 一覧ページ ---------- */
.mc-manual-archive{max-width:960px;margin:0 auto;padding:0 20px 72px}
.mc-manual-hero{padding:12px 0 26px;text-align:center}
.mc-manual-kicker{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(242,169,0,.24);background:rgba(255,201,60,.14);color:var(--mcm-brand-deep,#F2A900);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.08em;margin-bottom:12px}
.mc-manual-hero h1{font-size:clamp(30px,5vw,52px);font-weight:900;line-height:1.1;letter-spacing:0;word-break:keep-all;line-break:strict;margin:0}
.mc-manual-hero p{font-size:16px;color:var(--mcm-muted,#5B6776);margin:14px auto 0;line-height:1.9;max-width:720px}
.mc-manual-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 18px}
.mc-manual-flow-card{position:relative;min-height:136px;background:linear-gradient(180deg,#fff 0%,#fffaf0 100%);border:1px solid rgba(242,169,0,.24);border-radius:16px;padding:18px 16px;box-shadow:var(--mcm-shadow);text-decoration:none;color:var(--mcm-ink,#15202B);overflow:hidden}
.mc-manual-flow-card::after{content:"";position:absolute;right:-18px;bottom:-26px;width:82px;height:82px;border-radius:50%;background:rgba(255,201,60,.24)}
.mc-manual-flow-card span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mcm-navy,#0F1D33);color:#fff;font-size:12px;font-weight:900;margin-bottom:14px}
.mc-manual-flow-card b{display:block;font-size:16px;font-weight:900;margin-bottom:6px}
.mc-manual-flow-card em{display:block;font-style:normal;font-size:12.5px;color:var(--mcm-muted,#5B6776);line-height:1.6}
.mc-manual-flow-card:hover{transform:translateY(-2px);box-shadow:var(--mcm-shadow-lg)}
.mc-manual-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--mcm-line,#E8EAF0);border-radius:14px;padding:13px 16px;box-shadow:var(--mcm-shadow);margin:10px 0 8px}
.mc-manual-search input[type=search]{border:0;outline:0;font-family:inherit;font-size:15px;width:100%;background:transparent;color:var(--mcm-ink,#15202B)}
.mc-manual-search button{border:0;background:transparent;cursor:pointer;font-size:17px;color:var(--mcm-muted,#5B6776)}

.mc-manual-cat-h{font-size:13px;font-weight:900;color:var(--mcm-muted,#5B6776);letter-spacing:.08em;margin:34px 0 12px}
.mc-manual-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.mc-manual-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--mcm-line,#E8EAF0);border-radius:14px;padding:16px 18px;box-shadow:var(--mcm-shadow);transition:.16s;text-decoration:none}
.mc-manual-item:hover{transform:translateX(3px);box-shadow:var(--mcm-shadow-lg);border-color:#dfe3ec}
.mc-manual-item .mc-manual-ic{width:42px;height:42px;border-radius:11px;background:var(--mcm-cream,#FFF8E7);display:grid;place-items:center;font-size:21px;flex-shrink:0;overflow:hidden}
.mc-manual-item .mc-manual-ic img{width:100%;height:100%;object-fit:cover}
.mc-manual-item .mc-manual-tx{flex:1;min-width:0}
.mc-manual-item .mc-manual-tx b{font-size:15.5px;font-weight:700;display:block;color:var(--mcm-ink,#15202B)}
.mc-manual-item .mc-manual-tx span{font-size:12.5px;color:var(--mcm-muted,#5B6776)}
.mc-manual-item .mc-manual-arw{color:var(--mcm-brand-deep,#F2A900);font-weight:800;flex-shrink:0}
.mc-manual-empty{color:var(--mcm-muted,#5B6776);font-size:14px;padding:8px 0}

/* ---------- 記事ページ（本文ラッパ） ---------- */
.mc-manual-single{max-width:760px;margin:0 auto;padding:26px 20px 72px}
.mc-manual-single .mc-manual-title{font-size:27px;font-weight:800;line-height:1.4;margin-bottom:6px;word-break:keep-all;line-break:strict}
.mc-manual-single .mc-manual-meta{font-size:12.5px;color:var(--mcm-muted,#5B6776);margin-bottom:24px}

/* 本文（ブロックエディタの出力） */
.mc-manual-body{counter-reset:mcstep;font-size:16px;line-height:1.9;color:var(--mcm-ink,#15202B)}
.mc-manual-body > p{margin:0 0 18px}
.mc-manual-body h2{font-size:21px;font-weight:800;margin:34px 0 14px;line-height:1.45}
.mc-manual-body h3{font-size:18px;font-weight:800;margin:24px 0 10px}
.mc-manual-body img{max-width:100%;height:auto;border-radius:12px}
.mc-manual-body .wp-block-image{margin:6px 0 18px}
.mc-manual-body .wp-block-image img{border:1px solid var(--mcm-line,#E8EAF0);box-shadow:var(--mcm-shadow)}
.mc-manual-body a{color:var(--mcm-brand-deep,#F2A900);font-weight:700;text-decoration:underline}

/* リード文（先頭の要約） */
.mc-manual-lead{font-size:16px;background:#fff;border:1px solid var(--mcm-line,#E8EAF0);border-left:4px solid var(--mcm-brand,#FFC93C);border-radius:12px;padding:16px 18px;margin:0 0 30px;box-shadow:var(--mcm-shadow);line-height:1.85}

/* ===== STEP（パターンで挿入・自動採番） ===== */
/* .mc-steps でくくると、その中だけ番号が 1 から振り直される（複数手順セクション用） */
.mc-manual-body .mc-steps{counter-reset:mcstep}
.mc-manual-body .mc-step{position:relative;padding:2px 0 24px 56px;margin:0}
.mc-manual-body .mc-step::before{
  counter-increment:mcstep;content:counter(mcstep);
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--mcm-brand,#FFC93C);color:var(--mcm-navy,#0F1D33);
  display:grid;place-items:center;font-family:"Archivo","Noto Sans JP",sans-serif;
  font-weight:800;font-size:17px;box-shadow:0 2px 8px rgba(242,169,0,.35);z-index:1
}
.mc-manual-body .mc-step::after{
  content:"";position:absolute;left:18px;top:42px;bottom:0;width:2px;background:var(--mcm-line,#E8EAF0)
}
.mc-manual-body .mc-step:last-child::after{display:none}
.mc-manual-body .mc-step > *:first-child{margin-top:0}
.mc-manual-body .mc-step > *:last-child{margin-bottom:0}
.mc-manual-body .mc-step h3{font-size:18px;font-weight:800;margin:0 0 8px}
.mc-manual-body .mc-step p{margin:0 0 12px}

/* ヒント / 注意 ボックス（パターン） */
.mc-manual-body .mc-note{display:flex;gap:11px;background:#FBFBFD;border:1px solid var(--mcm-line,#E8EAF0);border-radius:12px;padding:14px 16px;margin:18px 0;font-size:14.5px;line-height:1.8}
.mc-manual-body .mc-note.is-warn{background:#FCF3F3;border-color:#F3D6D7}
.mc-manual-body .mc-note p{margin:0}
.mc-manual-body .mc-note strong{font-weight:700}

/* ボタン（標準ボタンブロックをマネチャ色に） */
.mc-manual-body .wp-block-button__link{
  background:var(--mcm-brand,#FFC93C);color:var(--mcm-navy,#0F1D33);font-weight:800;
  border-radius:999px;padding:13px 28px;font-size:15px;box-shadow:0 4px 14px rgba(242,169,0,.3);text-decoration:none
}
.mc-manual-body .is-style-outline .wp-block-button__link{
  background:#fff;color:var(--mcm-navy,#0F1D33);border:1.5px solid var(--mcm-navy,#0F1D33);box-shadow:none
}

/* 黄マーカー（文字装飾用ユーティリティ） */
.mc-manual-body .mc-hl{background:linear-gradient(transparent 60%, #FFE9A6 60%);font-weight:700}

/* 前後ナビ */
.mc-manual-nav{display:flex;gap:12px;margin-top:36px}
.mc-manual-nav a{flex:1;background:#fff;border:1px solid var(--mcm-line,#E8EAF0);border-radius:12px;padding:14px 16px;box-shadow:var(--mcm-shadow);text-decoration:none}
.mc-manual-nav span{font-size:11.5px;color:var(--mcm-muted,#5B6776)}
.mc-manual-nav b{font-size:14px;display:block;margin-top:2px;color:var(--mcm-ink,#15202B);font-weight:700}
.mc-manual-nav .is-next{text-align:right}

/* ---------- レスポンシブ ---------- */
@media(max-width:600px){
  .mc-manual-hero h1{font-size:25px}
  .mc-manual-archive{padding-left:16px;padding-right:16px}
  .mc-manual-flow{grid-template-columns:1fr 1fr;gap:10px}
  .mc-manual-flow-card{min-height:126px;padding:15px 14px}
  .mc-manual-single .mc-manual-title{font-size:23px}
  .mc-manual-body{font-size:15.5px}
  .mc-manual-nav{flex-direction:column}
  .mc-manual-body .mc-step{padding-left:50px}
}

/* ---------- ブロックエディタ内の見え方（編集画面） ---------- */
.editor-styles-wrapper .mc-step{position:relative;padding-left:56px}
.editor-styles-wrapper .mc-step::before{
  counter-increment:mcstep;content:"●";
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--mcm-brand,#FFC93C);color:var(--mcm-navy,#0F1D33);
  display:grid;place-items:center;font-weight:800;font-size:14px
}
.editor-styles-wrapper{counter-reset:mcstep}