/* =========================================================
   cards_code.css  ── コードカード・コマンドカード・インラインバッジ

   【このファイルの責務】
   - .card-code（コードブロックカード：macOS風ヘッダー付きダーク背景）
   - .card-code__header / .card-code__dots / .card-code__lang
   - .card-code__tab（ファイルタブ：.card-code の直前に置く）
   - .card-code__body pre（コード本文）
   - シンタックストークン（.kw .str .fn .cm .num .hl）
   - .card-cmd（コマンドライン1行カード。$ プロンプト自動付与）
   - .card-cmd__comment（コマンド右側コメント）
   - .card-cmd__label（コマンド左側ラベル。$ の代わりに任意テキストを置く場合）
   - .code-badge（本文段落中に埋め込むインラインコードバッジ）

   【触るべきとき】
   ・背景色を変えたい              → --cc-surface（カード背景）
   ・コードの文字色を変えたい      → --cc-ink
   ・シンタックスカラーを変えたい  → --cc-kw / --cc-str / --cc-fn / --cc-cm / --cc-num
   ・ハイライト行の色を変えたい    → --cc-hl / --cc-hl-bar
   ・コマンドの文字色を変えたい    → --cc-kw（.card-cmd code と共用）

   【HTML の使い方 ── コードカード】

     <div class="card-code">
       <div class="card-code__header">
         <div class="card-code__dots">
           <div class="card-code__dot card-code__dot--r"></div>
           <div class="card-code__dot card-code__dot--y"></div>
           <div class="card-code__dot card-code__dot--g"></div>
         </div>
         <span class="card-code__lang">Python</span>
       </div>
       <div class="card-code__body"><pre>コード本文</pre></div>
     </div>

   【HTML の使い方 ── ファイルタブ付き】

     <div class="card-code__tab">docs/source/conf.py</div>
     <div class="card-code">
       <div class="card-code__body"><pre>コード本文</pre></div>
     </div>

   【HTML の使い方 ── コマンドカード】

     <div class="card-cmd">
       <code>make html</code>
       <span class="card-cmd__comment"># docs/ で実行</span>
     </div>

   【HTML の使い方 ── インラインバッジ】

     <span class="code-badge">parents[2]</span>

   【関連ファイル】
   - 書架カード・著者カード  → cards_shelf.css
   - 写真枠・関連記事カード  → cards_photo.css
   - 記事本文               → article_body.css
========================================================= */

/* =========================================================
   コードカード専用変数
   ── tokens.css にはないダーク系の値。
      このブロック1か所を変えると全コードカードに反映される。
========================================================= */
:root {
  --cc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 背景 */
  --cc-surface:   #1e1c17;            /* カード本体 */
  --cc-surface-2: #28251e;            /* ヘッダーバー・タブ */
  --cc-surface-3: #312e26;            /* インラインバッジ */
  --cc-rule:      rgba(255,255,255,.08); /* セパレーター */

  /* テキスト */
  --cc-ink:    #e8e0c8;               /* 通常のコード文字 */
  --cc-muted:  #6a6252;               /* コメント・プロンプト・言語ラベル */

  /* シンタックスカラー */
  --cc-kw:  #7fbf7f;                  /* キーワード・コマンド：グリーン */
  --cc-str: #d4956e;                  /* 文字列：オレンジ */
  --cc-fn:  #6eb5d4;                  /* 関数名：スカイブルー */
  --cc-cm:  #6a6050;                  /* コメント：グレー */
  --cc-num: #c8a860;                  /* 数値：アンバー */

  /* 行ハイライト */
  --cc-hl:     rgba(212,168,64,.12);
  --cc-hl-bar: var(--shelf-wood);     /* 左縦ライン：サイトのゴールドに合わせる */
}

/* =========================================================
   30 Code Card  ── .card-code
========================================================= */
.card-code {
  position: relative;
  margin: 20px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cc-surface);
  box-shadow: var(--shadow-sm);
}

/* ── ヘッダーバー ── */
.card-code__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cc-surface-2);
  border-bottom: 1px solid var(--cc-rule);
}

/* macOS 風3点ドット */
.card-code__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.card-code__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.card-code__dot--r { background: #ff5f57; }
.card-code__dot--y { background: #ffbd2e; }
.card-code__dot--g { background: #28ca41; }

/* 言語ラベル（ヘッダー右寄せ） */
.card-code__lang {
  flex: 1;
  text-align: right;
  font-family: var(--cc-mono);
  font-size: 11px;
  color: var(--cc-muted);
  letter-spacing: .08em;
}

/* ── コード本文エリア ── */
.card-code__body {
  padding: 18px 20px;
  overflow-x: auto;
}

.card-code__body pre {
  margin: 0;
  font-family: var(--cc-mono);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--cc-ink);
  white-space: pre;
  tab-size: 2;
}

/* =========================================================
   シンタックストークン
   ── .card-code 内の <span> に付与する
   ── シンタックス: <span class="kw">def</span>
========================================================= */
.card-code .kw  { color: var(--cc-kw); }
.card-code .str { color: var(--cc-str); }
.card-code .fn  { color: var(--cc-fn); }
.card-code .cm  { color: var(--cc-cm); font-style: italic; }
.card-code .num { color: var(--cc-num); }

/* 行ハイライト（左ボーダー＋背景色で1行を強調） */
.card-code .hl {
  display: inline-block;
  width: calc(100% + 40px); /* body の padding 分まで伸ばす */
  margin-left: -20px;
  padding-left: 17.5px;
  background: var(--cc-hl);
  border-left: 2.5px solid var(--cc-hl-bar);
}

/* =========================================================
   ファイルタブ（.card-code__tab）
   ── .card-code の直前に置くとカードに接続される
========================================================= */
.card-code__tab {
  display: inline-block;
  padding: 5px 14px;
  background: var(--cc-surface-2);
  border: 1px solid var(--cc-rule);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-family: var(--cc-mono);
  font-size: 11.5px;
  color: #b0a890;
  letter-spacing: .03em;
  margin-bottom: -1px; /* .card-code に密着させる */
  position: relative;
  z-index: 1;
}

/* タブ直後の .card-code は左上角丸をなくして接続感を出す */
.card-code__tab + .card-code {
  border-top-left-radius: 0;
}

/* =========================================================
   31 Command Card  ── .card-cmd
   ── ターミナルコマンド1行向け。$ プロンプト自動付与。
========================================================= */
.card-cmd {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 14px 0;
  padding: 13px 18px;
  border-radius: 12px;
  background: var(--cc-surface);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}

/* $ プロンプト（擬似要素で自動挿入・選択されないように） */
.card-cmd::before {
  content: "$";
  font-family: var(--cc-mono);
  font-size: 13px;
  color: var(--cc-muted);
  margin-right: 12px;
  flex-shrink: 0;
  user-select: none;
}

/* コマンド本体 */
.card-cmd code {
  font-family: var(--cc-mono);
  font-size: 13.5px;
  color: var(--cc-kw);
  white-space: nowrap;
  letter-spacing: .01em;
  background: none;
  padding: 0;
  border: none;
}

/* 右側インラインコメント（オプション） */
.card-cmd__comment {
  font-family: var(--cc-mono);
  font-size: 12px;
  color: var(--cc-muted);
  font-style: italic;
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 左側ラベル（$ の代わりに任意テキストを出す場合） */
.card-cmd__label {
  font-family: var(--cc-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--cc-muted);
  margin-right: 12px;
  flex-shrink: 0;
  user-select: none;
  text-transform: uppercase;
}

/* .card-cmd__label がある場合は $ を非表示 */
.card-cmd:has(.card-cmd__label)::before {
  display: none;
}

/* =========================================================
   32 Inline Code Badge  ── .code-badge
   ── 本文 <p> 内に埋め込む小さなコードスパン
========================================================= */
.code-badge {
  font-family: var(--cc-mono);
  font-size: .88em;
  background: var(--cc-surface-3);
  color: var(--cc-fn);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.07);
  vertical-align: baseline;
  white-space: nowrap;
}

/* =========================================================
   SP（680px 以下）
========================================================= */
@media (max-width: 680px) {
  .card-code__body pre {
    font-size: 12.5px;
  }

  .card-cmd code {
    font-size: 12.5px;
    white-space: normal;   /* 長いコマンドは折り返す */
    word-break: break-all;
  }

  /* SP ではコメントを省略（スペース節約） */
  .card-cmd__comment {
    display: none;
  }
}