/* =========================================================
   research-ci.css — Research CI 新規ユーザー向けガイド
   読み込み順: xp.css → contact.css（2ペイン・表・注意枠を流用）→ research-ci.css

   目次:
     1. 本文の補助（段落・コード）
     2. 全体の流れ（フロー図）
     3. 手順（ステップ）
     4. チェックリスト
     5. 注意・警告の枠
     6. レスポンシブ
   ========================================================= */

/* ---- 1. 本文の補助 ---- */
.page{max-width:960px}
/* grid の子は既定で min-width:auto なので、pre や表の幅で横にはみ出す */
.oe > *{min-width:0}
.table-wrap{overflow-x:auto}
.pane p{margin:0 0 10px; max-width:72ch}
.pane ul,.pane ol{margin:0 0 10px; padding-left:22px}
.pane li{margin:3px 0}
h3{font-size:12px; color:#1d3f7a; margin:14px 0 6px}
code{font-family:"MS Gothic","Courier New",monospace; font-size:12px; background:#f3f5f9; border:1px solid #d6dbe4; padding:0 4px}
pre{margin:6px 0 12px; padding:8px 10px; background:#fff; border:1px solid #7f9db9; overflow-x:auto;
    font:12px/1.55 "MS Gothic","Courier New",monospace; white-space:pre}
pre code{background:none; border:0; padding:0}
.list code{white-space:nowrap}
.tag{display:inline-block; font-size:11px; padding:0 6px; border-radius:2px; border:1px solid; margin-left:4px; vertical-align:1px}
.tag.self{color:#7a3b00; background:#fff1dc; border-color:#e3b474}
.tag.op{color:#1d3f7a; background:#e6eefb; border-color:#9fb6de}

/* ---- 2. フロー図 ---- */
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0 14px; padding:10px; background:#fff; border:1px solid #c3cbd9}
.flow span{padding:3px 8px; background:linear-gradient(#f7f9fc,#e3e9f3); border:1px solid #9fb0cc; border-radius:3px; font-size:12px; white-space:nowrap}
.flow span.gate{background:linear-gradient(#fff6e0,#f3dfae); border-color:#c9a24c}
.flow i{font-style:normal; color:#5c6474}

/* ---- 3. 手順 ---- */
.step{margin:0 0 16px; border:1px solid #c3cbd9; background:#fff}
.step > h3{margin:0; padding:5px 10px; font-size:13px; color:#fff;
           background:linear-gradient(#3c7fe0,#245edb); border-bottom:1px solid #1941a5; text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.step > h3 .tag{text-shadow:none}
.step > div{padding:10px 12px 4px}

/* ---- 4. チェックリスト ---- */
.checks{list-style:none; padding:0 !important}
.checks li{display:flex; gap:8px; align-items:flex-start}
.checks input{margin-top:3px}

/* ---- 5. 注意・警告 ---- */
.warn{margin:10px 0 12px; padding:9px 12px; background:#fdecea; border:1px solid #e0a39c; font-size:12px}
.warn b{color:#9b1c10}
.info{margin:10px 0 12px; padding:9px 12px; background:#eef4fd; border:1px solid #a9bfe3; font-size:12px}
.info b{color:#1d3f7a}

/* ---- 6. レスポンシブ ---- */
@media (max-width:720px){
  .list code{white-space:normal; word-break:break-all}
}