/* /bml/ 配下で共通に使うスタイル。index.html と各ツールのページから読む。 */
:root {
    --bg:#fff; --fg:#1a1d23; --sub:#5b6472; --line:#dfe3e8;
    --card:#f7f8fa; --accent:#2f6fed; --warn:#8a5a00; --warnbg:#fff8e6;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#14171c; --fg:#e6e9ee; --sub:#9aa4b2; --line:#2a2f38;
            --card:#1b1f26; --accent:#6ea0ff; --warn:#e8c07d; --warnbg:#2a2418; }
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--fg);
         font:16px/1.75 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; }
  .wrap { max-width:820px; margin:0 auto; padding:32px 20px 80px; }
  h1 { font-size:1.55rem; margin:0 0 6px; }
  h2 { font-size:1.1rem; margin:44px 0 14px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  h3 { font-size:1rem; margin:0 0 4px; }
  p { margin:0; }
  .sub { color:var(--sub); font-size:.9rem; margin-bottom:22px; }
  .note { background:var(--card); border:1px solid var(--line); border-radius:10px;
          padding:14px 16px; font-size:.9rem; margin:18px 0; }
  .note ol { margin:8px 0 0; padding-left:1.3em; }
  /* 説明用のスクリーンショット。中身が白地なので、暗い配色でも白のまま置く */
  .shot { margin:12px 0 0; }
  .shot img { display:block; width:100%; height:auto; background:#fff;
              border:1px solid var(--line); border-radius:8px; }
  .shot figcaption { color:var(--sub); font-size:.82rem; margin-top:6px; }
  .warnbox { background:var(--warnbg); border:1px solid var(--warn); color:var(--warn);
             border-radius:10px; padding:12px 16px; font-size:.88rem; margin:18px 0; }
  .bml { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
  .drag { flex:0 0 auto; min-width:66px; text-align:center; text-decoration:none;
          background:var(--accent); color:#fff; border-radius:8px; padding:7px 12px;
          font-size:.86rem; font-weight:600; cursor:grab; white-space:nowrap; }
  .drag:active { cursor:grabbing; }
  .drag:not([href]) { opacity:.45; cursor:progress; }   /* js/*.js の読み込み待ち */
  .drag.failed { background:var(--warn); cursor:not-allowed; }
  .body p { color:var(--sub); font-size:.9rem; }
  .body code, kbd { background:var(--card); border:1px solid var(--line); border-radius:4px;
                    padding:1px 5px; font-size:.85em; font-family:ui-monospace,Menlo,Consolas,monospace; }
  details { margin-top:10px; }
  summary { cursor:pointer; color:var(--accent); font-size:.86rem; width:fit-content; }
  details[open] summary { margin-bottom:8px; }
  .howto { background:var(--card); border:1px solid var(--line); border-radius:10px;
           padding:12px 16px 12px; font-size:.88rem; }
  .howto ol { margin:0 0 0; padding-left:1.4em; }
  .howto ol li { margin-bottom:6px; }
  .howto p { margin-top:10px; }
  .howto h4 { margin:14px 0 6px; font-size:.9rem; }
  /* コピー結果などの出力例。.sample と違って編集もコピーボタンも要らない */
  .out { margin:10px 0 0; background:var(--card); border:1px solid var(--line); border-radius:8px;
         padding:10px 12px; font-size:.8rem; line-height:1.6; color:var(--sub);
         white-space:pre-wrap; word-break:break-all;
         font-family:ui-monospace,Menlo,Consolas,monospace; }
  .sample { position:relative; margin-top:10px; }
  .sample pre { margin:0; background:var(--bg); border:1px solid var(--line); border-radius:8px;
                padding:12px 14px; overflow-x:auto; font-size:.82rem; line-height:1.6;
                font-family:ui-monospace,Menlo,Consolas,monospace; }
  .sample button { position:absolute; top:8px; right:8px; border:1px solid var(--line);
                   background:var(--card); color:var(--fg); border-radius:7px; padding:4px 10px;
                   font-size:.78rem; cursor:pointer; }
  .sample pre[contenteditable] { outline:none; cursor:text; }
  .sample pre[contenteditable]:hover { border-color:var(--sub); }
  .sample pre[contenteditable]:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .sample button:hover { border-color:var(--accent); }
  .sample button.done { background:var(--accent); border-color:var(--accent); color:#fff; }
  a { color:var(--accent); }
  .crumb { font-size:.85rem; margin-bottom:14px; }
  footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--line);
           color:var(--sub); font-size:.85rem; }