/* =========================================
   Code Blocks — clean & compact stylesheet
   ========================================= */

/* ===== Base & variables ===== */
.cb{
  /* tweak here */
  --cb-lh: 1.7;
  --cb-gutter: 2.6ch;   /* line number column width */
  --cb-sep: 0.5ch;        /* space between numbers and divider */
  --cb-codepad: 1ch;    /* space between divider and code */
  --cb-ln-fs: .85rem;   /* font size for line numbers only */

  border-radius: 8px;
  overflow: hidden;
  margin: 1.25em 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  position: relative;
}

.cb-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cb-lines{ min-width:max-content; padding:.6rem .9rem .6rem; }
.cb-line{
  position:relative;
  line-height:var(--cb-lh);
  /* gutter + sep + divider(1px) + codepad */
  padding-left: calc(var(--cb-gutter) + var(--cb-sep) + 1px + var(--cb-codepad));
  margin:0;
}
.cb-code{ white-space:pre-wrap; word-break:break-word; }

/* ===== Header (lang + caption + tag) ===== */
.cb-head{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.6rem .9rem .45rem;
  border-bottom:1px solid var(--cb-border);
}
.cb-title{ font-size:.85rem; font-weight:700; opacity:.95; }
.cb-cap  { font-size:.85rem; margin-left:.75rem; opacity:.8; }

/* optional badge like “</> 例” */
.cb-tag{
  position:absolute; top:-14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.4em;
  padding:.35em .75em; border-radius:12px 12px 12px 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  font-size:.9rem; line-height:1; color:#fff;
  background:#0f3460; /* dark navy */
}
.cb--light .cb-tag{ background:#113a82; }

/* ===== Line numbers ( (1), (2), … ) ===== */
.cb.has-ln .cb-line::before{
  content:"(" counter(line) ")";
  counter-increment:line;
  position:absolute; left:0; width:var(--cb-gutter);
  text-align:right; font-variant-numeric:tabular-nums;
  font-size:var(--cb-ln-fs); opacity:.75; white-space:nowrap;
}
/* single vertical divider drawn once for the whole block */
.cb.has-ln .cb-lines{
  background-repeat:no-repeat;
  background-size:1px 100%;
  background-position: calc(var(--cb-gutter) + var(--cb-sep)) 0;
}
.cb.has-ln .cb-code{ display:inline-block; padding-left:.2rem; } /* wrap look */

/* hide numbers mode */
.no-ln .cb-line{ padding-left:.9rem; }
.no-ln .cb-line::before{ content:none; }

/* ===== Themes ===== */
.cb.cb--dark{
  --cb-bg:#111416; --cb-fg:#e8edf3;
  --cb-border:#26323b; --cb-divider:#30424f;
}
.cb.cb--light{
  --cb-bg:#f6f7fb; --cb-fg:#20262c;
  --cb-border:#d5dae2; --cb-divider:#c8d0da;
}

.cb--dark{ background:var(--cb-bg); color:var(--cb-fg); }
.cb--light{ background:var(--cb-bg); color:var(--cb-fg); border:1px solid var(--cb-border); }

.cb--dark .cb-head{ background:#0e1113; border-color:var(--cb-border); }
.cb--light .cb-head{ background:#eef2f7; border-color:var(--cb-border); }

/* divider color per theme */
.cb--dark.has-ln  .cb-lines{ background-image:linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.15)); }
.cb--light.has-ln .cb-lines{ background-image:linear-gradient(to bottom, rgba(0,0,0,.15),   rgba(0,0,0,.15)); }

/* ===== DNCL simple highlighting (token classes) ===== */
/* dark */
.cb--dark .tok-kw  { color:#c792ea; font-weight:600; }
.cb--dark .tok-fn  { color:#82aaff; font-weight:600; }
.cb--dark .tok-str { color:#ecc48d; }
.cb--dark .tok-num { color:#f78c6c; }
.cb--dark .tok-op  { color:#ffae57; }
.cb--dark .tok-com { color:#97a1b3; font-style:italic; }
/* light */
.cb--light .tok-kw  { color:#6f42c1; font-weight:600; }
.cb--light .tok-fn  { color:#1f6feb; font-weight:600; }
.cb--light .tok-str { color:#b54708; }
.cb--light .tok-num { color:#bc4c00; }
.cb--light .tok-op  { color:#b26a00; }
.cb--light .tok-com { color:#657786; font-style:italic; }

/* ===== Summary box (濃紺) ===== */
.cb-summary{
  --sm-border:#275ea5; --sm-bg:#f3f7fd;
  border:2px solid var(--sm-border); border-radius:12px; background:var(--sm-bg);
  margin:1.6em 0;
}
.cb-summary__head{ font-weight:700; color:var(--sm-border); padding:.7em 1em; border-bottom:2px solid var(--sm-border); }
.cb-summary__body{ padding:1em 1.2em; line-height:1.85; }
.cb-summary p{ margin:.6em 0; }

/* ===== Marker (text/MathJax共通) ===== */
.cb-mark{ --mk-bg:#fff59d; background:linear-gradient(transparent 55%, var(--mk-bg) 0); padding:0 .08em; }

/* ===== Mobile tweaks ===== */
@media (max-width:480px){
  .cb{ --cb-ln-fs:.75rem; --cb-gutter:2.2ch; }
}

/* ==== コードブロックの余白調整 ==== */

/* デフォルト（PC など広め画面） */
.cb {
  --cb-sep: 2ch;       /* 縦線までの距離 */
  --cb-codepad: 0.5ch; /* 縦線と本文の距離 */
}

/* スマホ画面など横幅が狭い場合 */
@media (max-width: 600px) {
  .cb {
    --cb-sep: 1.5ch;    /* 縦線を少し左寄せにする */
    --cb-codepad: 0.3ch;/* 本文もさらに詰める */
  }
}