/* =========================================================
   Jin Simple Code Block - frontend.css (v0.6 theme-proof final)
   ※ JSで 1行 = .ccode-line に分割済み前提
   ※ そのまま全文コピペで差し替え
   ========================================================= */


/* =========================
   Base / variables（テーマ非依存化）
   ========================= */

/* 外枠を「絶対にはみ出さない箱」にする */
:where(.entry-content, .post-content, .c-entry__content, article, main) .ccode-wrap,
.ccode-wrap{
  --cc-fs: 14px;
  --cc-lh: 1.6;
  --cc-maxh: none;
  --cc-pad-y: 18px;
  --cc-pad-x: 10px;

  --cc-ln-pad: .8em;

  border-radius: 7px;
  
  /* ★修正：中身が突き抜けないように hidden を強制し、幅を固定する */
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;

  background: transparent;
}


/* =========================
   pre / code reset（JSCB内だけ）
   ========================= */

/* JSCBの範囲内だけ pre をリセット（OFF時の core/code には触らない） */
.ccode-wrap pre,
.ccode-wrap pre.ccode,
.ccode-wrap .wp-block-code pre{
  margin: 1.2em 0;
  padding: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ★重要：ccode-wrap 内では pre のスクロールを殺す（スクロールは ccode-body に一本化） */
.ccode-wrap pre.wp-block-code{
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 共通：フォント/余白は wrap-on/off 両方に効かせる */
.ccode-wrap .ccode-body pre.wp-block-code > code{
  padding: var(--cc-pad-y) var(--cc-pad-x) !important;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace !important; 
  font-size: var(--cc-fs) !important;
  line-height: var(--cc-lh) !important;

  overflow-wrap: normal !important;
  word-break: normal !important;
  background: transparent !important;

  /* テーマが code に変な装飾を付けても無効化 */
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* wrap-off（折り返しなし）＝ wrap-on が付いていない時 */
/* 横スクロールしても右端の線が消えないようにする */
.ccode-wrap:not(.wrap-on) .ccode-body pre.wp-block-code > code{
  display: block !important; /* ★ inline-block から変更 */
  width: max-content !important; /* ★ 内容に合わせて横に伸びるように変更 */
  min-width: 100% !important;
  white-space: pre !important;
}

/* wrap-on（折り返し）だけの差分 */
.ccode-wrap.wrap-on .ccode-body pre.wp-block-code > code{
  display: block !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}


/* =========================
   Theme-proof text color（最重要）
   - テーマ側の `code { color: ... }` に絶対負けない
   - ここで「code / .ccode-txt」を各テーマで直指定する
   ========================= */

/* Dark */
/* 外枠にしっかり線を引く */
.ccode-wrap.theme-dark{
  background:#000000;
  color:#e5e7eb;
  border: 1px solid rgba(255,255,255,.10) !important; /* ★枠線をここで確定 */

  --cc-hl-bg: var(--jscb-hl-bg-dark, rgba(255,255,255,0.08));

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-dark, #06a6b8);
  --cc-copy-color: var(--jscb-copy-color-dark, #ffffff);
}
.ccode-wrap.theme-dark .ccode-head,
.ccode-wrap.theme-dark .ccode-foot{
  background:#373737;
  border-color:rgba(255,255,255,.15);
}
.ccode-wrap.theme-dark .ccode-body code,
.ccode-wrap.theme-dark .ccode-txt{
  color:#e5e7eb !important; /* ←最終勝者 */
}

/* Light */
.ccode-wrap.theme-light{
  background:#ffffff;
  color:#111827;
  border:1px solid rgba(0,0,0,.10);

  --cc-hl-bg: var(--jscb-hl-bg-light, rgba(0,0,0,0.06));

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-light, #ff7d7d);
  --cc-copy-color: var(--jscb-copy-color-light, #ffffff);
}
.ccode-wrap.theme-light .ccode-head,
.ccode-wrap.theme-light .ccode-foot{
  background:#e9edf2;
  border-color:rgba(0,0,0,.10);
}
.ccode-wrap.theme-light .ccode-body code,
.ccode-wrap.theme-light .ccode-txt{
  color:#111827 !important; /* ←最終勝者 */
}

/* Dark White */
.ccode-wrap.theme-dark-white{
  background:#ffffff;
  color:#111827;
  border:1px solid rgba(0,0,0,.10);

  --cc-hl-bg: var(--jscb-hl-bg-dark-white, #FEE8C3);

  /* ★Copyボタン色（PHPで注入されるCSS変数をここで受ける） */
  --cc-copy-bg: var(--jscb-copy-bg-dark-white, #ff6c6c);
  --cc-copy-color: var(--jscb-copy-color-dark-white, #ffffff);
}
.ccode-wrap.theme-dark-white .ccode-head,
.ccode-wrap.theme-dark-white .ccode-foot{
  background:#373737;
  border-color:rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
}
.ccode-wrap.theme-dark-white .ccode-body code,
.ccode-wrap.theme-dark-white .ccode-txt{
  color:#111827 !important; /* ←最終勝者 */
}


/* =========================
   FOUC対策：JSがwrapを作る前の「素のpre」を先に最低限整える
   ========================= */

/* Dark White */
:where(.entry-content, .post-content, .c-entry__content, article, main) pre.wp-block-code:not(.ccode-body pre)[data-cc-theme="dark-white"] {
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:7px !important; /* JS実行前も角を丸くしておく */
  overflow:hidden;
}

/* Dark */
:where(.entry-content, .post-content, .c-entry__content, article, main) pre.wp-block-code:not(.ccode-body pre)[data-cc-theme="dark"] {
  background:#1f1f1f !important;
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:7px !important;
  overflow:hidden;
}


/* =========================
   Header / Body / Footer
   ========================= */

/* ヘッダー・フッターの共通設定：displayとpaddingを統合 */
.ccode-head,
.ccode-foot {
  display: flex;
  padding: 10px 14px;
  color: #a1a1a1;
}

/* ヘッダー固有：ラベルとボタンを左右に配置 */
.ccode-head {
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid;
}

/* フッター固有：文字サイズのみ上書き（border-topはここに集約） */
.ccode-foot {
  font-size: 12px;
  border-top: 2px solid;
}

/* ボタン群を横に並べるためのコンテナ（新規追加） */
.jscb-button-group {
  display: flex;
  gap: 6px;
  margin-left: auto; /* ラベルの右側に寄せる */
}

/* 以下の重複していた .ccode-foot { border-top... } は削除します */

/* フッターが空の場合は非表示にする */
.ccode-wrap.footer-empty .ccode-foot {
  display: none !important;
}

/* フッターが空の場合は本体下の余白を調整 */
.ccode-wrap.footer-empty {
  padding-bottom: 0 !important;
}

/* スクロールは ccode-body に集約 */
.ccode-body{
  overflow-x: auto;
  overflow-y: auto;
  /* JavaScriptからの高さ制限解除（none）を確実に反映させるため important を付与 */
  max-height: var(--cc-maxh) !important;
  -webkit-overflow-scrolling: touch;
}

/* 右下の白い四角（scrollbar corner）対策 */
.ccode-body::-webkit-scrollbar-corner{
  background: transparent !important;
}


/* =========================
   Line split (重要)
   - 複数行ハイライトで隙間が出ないように
   - margin は使わない（背景が途切れる）
   ========================= */

.ccode-line{
  display:block;
  width: 100%;
  padding: 0;
  margin: 0;

  line-height: var(--cc-lh) !important;

  /* 行間は padding で作る（背景がつながる） */
  padding-top: calc((var(--cc-lh) - 1) * 0.22em + 0.06em) !important;
  padding-bottom: calc((var(--cc-lh) - 1) * 0.22em + 0.06em) !important;

  white-space: inherit;
}

/* 最終行だけ余計に膨らむのを抑える（軽め） */
.ccode-wrap code > .ccode-line:last-child{
  padding-bottom: 0.06em !important;
}


/* =========================
   Highlight lines
   ========================= */

.ccode-wrap.hl-on .ccode-line.is-hl{
  background-color: var(--cc-hl-bg);
}


/* =========================
   Scrollbar
   ========================= */

.ccode-body::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.ccode-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.30);
  border-radius:8px;
}
.ccode-wrap.theme-dark .ccode-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.30);
}
.ccode-wrap.theme-dark-white .ccode-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
}


/* =========================
   Copy button (header)
   ========================= */

/* 3つのボタン共通の基本設定（デフォルトはOFFの状態：薄いグレーに黒文字） */
.ccode-copy,
.jscb-toggle-wrap-btn,
.jscb-toggle-height-btn,
.jscb-toggle-syntax-btn {
  padding: 6px 10px !important;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  
  /* OFF状態：薄いグレー背景と黒文字 */
  background: #e0e0e0 !important;
  color: #333333 !important;

  opacity: .8;
  transition: all .15s ease;
}

/* Copyボタンは常に「ON」と同じ扱いの色にする */
.ccode-copy {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* 折り返しボタン：ON状態（親に .wrap-on がある時）の色変更 */
.ccode-wrap.wrap-on .jscb-toggle-wrap-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* 高さ制限ボタン：ON状態（変数が none ではない時）の色変更 */
/* CSSの設計上、bodyに style属性で直接 max-height が指定されているか、
   変数がデフォルト値を持っている状態を「ON」として判定します */
.ccode-wrap:not([style*="--cc-maxh: none"]) .jscb-toggle-height-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}
/* ★追加：ハイライトボタンのON状態（属性が 0 ではない時） */
.ccode-wrap:not([data-cc-cm="0"]) .jscb-toggle-syntax-btn {
  background: var(--cc-copy-bg, #545454) !important;
  color: var(--cc-copy-color, #ffffff) !important;
}

/* ホバー時は不透明度を上げる */
.ccode-copy:hover,
.jscb-toggle-wrap-btn:hover,
.jscb-toggle-height-btn:hover,
.jscb-toggle-syntax-btn:hover {
  opacity: 1;
}

/* 記号ボタン（C, ↵, ↕）の幅を整える */
.jscb-toggle-wrap-btn,
.jscb-toggle-height-btn,
.jscb-toggle-syntax-btn {
  width: 32px;
  padding: 6px 0 !important;
  text-align: center;
}

/* ホバー時の挙動を全ボタンに一括適用（重複を削除） */
.ccode-copy:hover,
.jscb-toggle-wrap-btn:hover,
.jscb-toggle-height-btn:hover {
  opacity: 1;
}
.ccode-copy.is-copied{
  background:transparent;
  color:#9aa0a6;
  opacity:1;
}

/* ★旧：Lightテーマの白ボタン指定は不要（設定で変えられるので削除）
   ★旧：Dark Whiteの固定指定も不要（設定で変えられるので削除）
*/


/* =========================
   Focus / outline kill
   ========================= */

.ccode-wrap,
.ccode-wrap *{
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}


/* =========================
   White border kill（確定版）
   ========================= */

.ccode-wrap pre,
.ccode-wrap code,
.ccode-wrap .ccode-body,
.ccode-wrap .ccode-line{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   Line number column（flex）
   ========================= */

.ccode-wrap.ln-on .ccode-line{
  display: flex;
  align-items: flex-start;
  width: 100%;
}

/*
.ccode-wrap.ln-on .ccode-lno{
  flex: 0 0 calc(var(--cc-ln-digits, 3) * 1ch + var(--cc-ln-pad, .8em) + 1px + .2ch);
  text-align: right;
  opacity: .55;
  user-select: none;

  padding-right: var(--cc-ln-pad, .8em);
  border-right: 1px solid rgba(255,255,255,.12);
}
*/
/* frontend_9.css 274行目付近を以下に差し替え */

.ccode-wrap.ln-on .ccode-lno{
  /* 修正：固定計算をやめて auto にし、必要最小限の幅だけ持たせる */
  flex: 0 0 auto;
  min-width: 1em; /* 1桁の時でも形が崩れないための最低幅（お好みで調整） */
  
  text-align: right;
  opacity: .55;
  user-select: none;

  padding-right: var(--cc-ln-pad, .8em);
  border-right: 1px solid rgba(255,255,255,.12);
}

.ccode-wrap.theme-light.ln-on .ccode-lno,
.ccode-wrap.theme-dark-white.ln-on .ccode-lno{
  border-right-color: rgba(0,0,0,.12);
}

.ccode-wrap.ln-on .ccode-txt{
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 1em; /* ★ここを追加！ 境界線と本文の間の隙間になります */
}

.ccode-wrap.ln-off .ccode-lno{
  display: none !important;
}
.ccode-wrap.ln-off .ccode-line{
  display: block;
  width: 100%;
}

/* ============================================================
   ステップ1：ハイライトOFF（data-cc-cm="0"）時のリセット設定
   ============================================================ */

/* 
 * 属性 data-cc-cm="0" が指定されている場合、
 * 枠内のすべてのトークン（キーワード、文字列、コメント等）の色を
 * 親要素と同じ色（通常は黒や基本の文字色）に強制します。
 */
.ccode-wrap[data-cc-cm="0"] .token {
    color: inherit !important;
    background: none !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-decoration: none !important;
}

/* 
 * 必要に応じて：行番号自体の色は維持するか、
 * あるいは少し薄くするなど、お好みに合わせて調整可能です。
 * 現状は PrismJS のデフォルトまたは既存設定が維持されます。
 */