/* practice.css — 実践編（AI活用実践プロンプト記事150本・2026-07-25新設）
   ハブページ(practice/index.html・scene別タブ+全150件カード一覧)＋記事ページ(practice/PR-xxx.html)。
   本文タイポグラフィ(見出し・箇条書き・番号リスト・コードブロック)はlesson.cssの.lesson-body系を
   流用する(practice/PR-xxx.htmlはlesson.cssも読み込む)。このファイルは①ハブのscene絞り込みタブ
   ②記事カード ③記事ヘッダの場面/難易度/ツールバッジ ④「使うプロンプト」のコピー用ブロック、
   の4点に限定した専用CSS(プロンプト集prompts.cssとはクラス名を独立させ、意図的に混ぜない)。 */

/* ================= ハブ: scene絞り込みタブ(C7セグメントタブバーの流儀を踏襲) ================= */
/* 2026-07-25 実践編v2統合(scene10→16分類化)分: モバイル幅は従来どおり横スクロール
   (17ボタン=すべて+16分類を2行で並べると縦に場所を取りすぎるため、指スワイプ前提を維持)。
   768px以上は横幅に余裕があるため2行折返し(flex-wrap:wrap)へ切り替え、全カテゴリーを
   スクロールなしで一望できるようにする(新設6分類の発見性を優先。新規カラー値の追加なし)。 */
.practice-scene-tabs{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.35em;margin:1.2em 0 2em;padding:.4em;
  background:var(--color-bg-section);border:1px solid var(--color-border);border-radius:14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
@media (min-width:768px){
  .practice-scene-tabs{flex-wrap:wrap;overflow-x:visible}
}
.practice-scene-tab{
  flex:none;display:inline-flex;align-items:center;gap:.4em;font-size:.92rem;font-weight:700;
  color:var(--color-text-muted);background:transparent;border:0;border-radius:10px;
  padding:.6em 1.05em;white-space:nowrap;cursor:pointer;font-family:inherit;min-height:40px;
}
.practice-scene-tab.is-active{color:#fff;background:var(--color-primary)}
.practice-scene-tab:hover:not(.is-active){color:var(--color-primary);background:#fff}
.practice-scene-tab-count{
  font-size:.75rem;font-weight:800;opacity:.85;font-variant-numeric:tabular-nums;
}

/* ================= ハブ: 記事カード一覧 ================= */
.practice-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-4)}
@media (min-width:640px){.practice-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.practice-grid{grid-template-columns:repeat(3,1fr)}}
.practice-card{display:flex;flex-direction:column;gap:.7em;padding:1.2em 1.3em}
/* [hidden]属性は同程度のspecificityを持つCSSクラスセレクタ(.practice-card{display:flex})に
   上書きされてしまう既知の罠がある(lesson.css .slide-pane[hidden]と同じ理由)。practice.jsの
   scene絞り込みが.hiddenプロパティの付け外しだけで表示制御するため、ここで明示的に
   display:noneへ戻す。 */
.practice-card[hidden]{display:none}
.practice-card-badges{margin:0}
.practice-card-title{
  margin:0;font-size:1rem;line-height:1.55;color:var(--color-navy);font-weight:700;
}
.practice-card-tools{margin-top:auto;padding-top:.3em}
.practice-empty-state{text-align:center;padding:var(--space-6) 0}

/* ================= バッジ(scene・level・tools共通) ================= */
.practice-badge-scene{background:var(--practice-scene-accent,var(--color-primary));color:#fff}
.practice-badge-level-basic{background:var(--color-success-bg);color:var(--color-success);border-color:#cdeadb}
.practice-badge-level-advanced{background:var(--color-warning-bg);color:var(--color-warning);border-color:#f0ddb8}
.practice-tool-chip{display:inline-flex;align-items:center;gap:.35em}
.practice-tool-logo{width:14px;height:14px;object-fit:contain;flex:none}

/* ================= 記事ページ: ヘッダ ================= */
.practice-head{margin-bottom:var(--space-5)}
.practice-head-badges{margin:.2em 0 .8em}
.practice-head h1{margin-bottom:.5em}
.practice-head-tools{margin-top:.2em}

/* ================= 記事ページ: 「使うプロンプト」コピー用ブロック =================
   prompts.cssの.prompt-body-wrap/.prompt-bodyと見た目のトーン(ダークネイビー基調)は揃えるが、
   コピー機能のCSS/JS(assets/js/practice.js)は独立させ、prompts.js/.btn-copyには一切依存しない。 */
.practice-prompt-block{
  background:var(--color-navy);border-radius:var(--radius-md);margin:1.3em 0;overflow:hidden;
}
.practice-prompt-head{display:flex;justify-content:flex-end;padding:.6em .7em 0}
.practice-copy-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  padding:.45em 1.1em;font-size:.8rem;font-weight:700;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);
  cursor:pointer;font-family:inherit;
}
.practice-copy-btn:hover{background:rgba(255,255,255,.22)}
.practice-copy-btn[disabled]{opacity:.85;cursor:default}
.practice-prompt-code{
  margin:0;padding:.7em 1.2em 1.2em;color:#EAF1FB;font-size:.83rem;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:520px;overflow-y:auto;
}
.practice-prompt-code code{background:transparent;color:inherit;padding:0;font-size:inherit}

/* 「入力に必要な素材」等、使うプロンプトセクション内の太字単独行を小見出し風に */
.practice-body p strong{color:var(--color-navy)}