/* ============================================================================
   corsika.css — 基礎講座「CORSIKA 8 で空気シャワーを計算する」専用の追加スタイル
   共通部分は ../../assets/lecture.css。このファイルは、この講座だけで使う
   「端末ブロック」「設定項目カード」「手順リスト」などの部品を足すだけに留める。
   読み込み順： lecture.css → corsika.css
   ========================================================================== */

/* ---------- 端末ブロック（コマンド） ----------
   紙の色面に濃い墨の面を落とす。配色は lecture.css のトークン内で完結させる。 */
.cmd{
  margin:1.5em 0;max-width:var(--measure);
  border-radius:var(--radius);overflow:hidden;
  border:1.5px solid color-mix(in srgb,var(--ink) 22%,var(--cream-3));
  background:var(--ink);
  box-shadow:0 16px 34px -22px rgba(42,39,48,.55);
}
.cmd-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px 8px 14px;
  background:color-mix(in srgb,var(--ink) 88%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 70%,#fff);
}
.where{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-jp);font-weight:700;font-size:11.5px;letter-spacing:.05em;
  color:var(--cream-2);
}
.where::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:none}
.where.win::before{background:var(--sky)}
.where.nix::before{background:var(--sage)}
.where.file::before{background:var(--butter)}
.where.out::before{background:var(--ink-4)}
.cmd-copy{
  flex:none;cursor:pointer;
  font-family:var(--f-jp);font-weight:700;font-size:11px;letter-spacing:.06em;
  color:var(--cream-2);background:transparent;
  border:1.5px dashed color-mix(in srgb,var(--cream) 32%,transparent);
  border-radius:999px;padding:4px 12px;
  transition:background .2s,color .2s,border-color .2s;
}
.cmd-copy:hover{background:color-mix(in srgb,var(--cream) 16%,transparent);border-color:transparent}
.cmd-copy.is-done{background:var(--sage);border-color:transparent;color:var(--ink)}
.cmd pre{
  margin:0;padding:15px 17px;overflow-x:auto;
  font-family:var(--f-mono);font-size:13px;line-height:1.85;
  color:var(--cream);tab-size:2;
}
.cmd pre code{font:inherit;color:inherit;background:none;padding:0}
.cmd .c{color:color-mix(in srgb,var(--sage) 82%,var(--cream))}   /* コメント */
.cmd .v{color:var(--butter)}                                     /* 差し替える部分 */
.cmd.is-out{background:color-mix(in srgb,var(--ink) 90%,#fff)}
.cmd-note{
  margin:-1.05em 0 1.6em;max-width:var(--measure);
  font-family:var(--f-hand-jp);font-size:13px;color:var(--ink-3);line-height:1.78;
  padding-left:2px;
}
.cmd-note code{font-family:var(--f-mono);font-size:.92em;background:var(--cream-2);padding:1px 5px;border-radius:5px;color:var(--accent-2)}

kbd{
  font-family:var(--f-mono);font-size:.84em;
  background:var(--cream-2);border:1px solid var(--cream-3);border-bottom-width:2.5px;
  border-radius:5px;padding:1px 6px;color:var(--ink-2);white-space:nowrap;
}

/* ---------- 手順リスト ---------- */
ol.steps{list-style:none;counter-reset:st;padding-left:0;margin:1.4em 0 0;max-width:none}
ol.steps > li{
  counter-increment:st;position:relative;
  padding:0 0 0 clamp(40px,5vw,52px);margin:0 0 clamp(26px,3.4vw,38px);
}
ol.steps > li::before{
  content:counter(st);position:absolute;left:0;top:1px;
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-en);font-weight:700;font-size:13.5px;
  color:var(--accent-2);background:var(--accent-pale);
  border:1.5px solid color-mix(in srgb,var(--accent) 48%,var(--cream-3));
}
ol.steps > li::after{
  content:"";position:absolute;left:15px;top:38px;bottom:-14px;width:1.5px;
  background:repeating-linear-gradient(to bottom,var(--cream-3) 0 5px,transparent 5px 10px);
}
ol.steps > li:last-child::after{display:none}
ol.steps > li > h3:first-child{margin-top:.1em}
ol.steps > li > *:last-child{margin-bottom:0}

/* ---------- 3枚組カード ---------- */
.trio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(12px,1.8vw,18px);margin:1.7em 0;
}
.trio .tc{
  background:var(--paper);border:1.5px solid var(--cream-3);
  border-top:4px solid var(--accent);border-radius:12px;
  padding:15px 17px 17px;
  box-shadow:0 12px 28px -22px rgba(42,39,48,.34);
}
.trio .tc .k{
  margin:0 0 2px;font-family:var(--f-en);font-weight:700;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}
.trio .tc .v{
  margin:0 0 7px;font-family:var(--f-mincho);font-weight:500;font-size:17px;
  color:var(--accent-2);line-height:1.45;
}
.trio .tc .d{margin:0;font-size:13.2px;color:var(--ink-2);line-height:1.82;max-width:none}

/* ---------- 事実ストリップ（ヒーロー直下） ---------- */
.factbar{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.factbar .fb-in{
  display:grid;gap:1px;background:var(--cream-3);
  border:1.5px solid var(--cream-3);border-radius:var(--radius);overflow:hidden;
}
@media(min-width:720px){.factbar .fb-in{grid-template-columns:repeat(4,1fr)}}
.factbar .fb{background:var(--paper);padding:13px 17px}
.factbar dt{
  font-family:var(--f-en);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 3px;
}
.factbar dd{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.factbar dd small{display:block;font-size:11.5px;color:var(--ink-4);letter-spacing:.01em}
.factbar dd code{font-family:var(--f-mono);font-size:.9em;background:var(--cream-2);padding:1px 5px;border-radius:5px}

/* ---------- 設定項目カード ---------- */
.optcard{
  margin:1.4em 0;max-width:var(--measure);
  background:var(--paper);border:1.5px solid var(--cream-3);
  border-left:4px solid var(--accent);border-radius:12px;
  padding:16px 20px 17px;
  box-shadow:0 12px 28px -24px rgba(42,39,48,.32);
}
.optcard-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:8px}
.optcard-flag{
  font-family:var(--f-mono);font-weight:500;font-size:14.5px;letter-spacing:.01em;
  color:var(--accent-2);background:var(--accent-pale);
  padding:3px 10px;border-radius:7px;
}
.optcard-unit{font-family:var(--f-en);font-size:11.5px;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}
.optcard-def{
  margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
  border:1px dashed var(--cream-3);border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.optcard > p{margin:0 0 .7em;max-width:none;font-size:14.6px;line-height:1.9}
.optcard > p:last-child{margin-bottom:0}
.optcard .why{
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--cream-3);
  font-size:13.8px;color:var(--ink-2);line-height:1.86;
}
.optcard .why b:first-child{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-hand-jp);font-weight:600;font-size:13.5px;color:var(--accent-2);
}
.optcard .why b:first-child::before{content:"✦";color:var(--accent);font-family:var(--f-jp)}
.optcard ul{margin:.5em 0 0;padding-left:1.25em;max-width:none}
.optcard li{font-size:13.8px;line-height:1.85}
.optcard code{font-family:var(--f-mono);font-size:.9em;background:var(--cream-2);color:var(--accent-2);padding:1px 6px;border-radius:5px}

/* ---------- スクリーンショット ---------- */
.shot img{
  border-radius:10px;border:1.5px solid var(--cream-3);
  box-shadow:0 18px 40px -26px rgba(42,39,48,.5);
}

/* ---------- 画面項目の説明リスト ---------- */
.lec-dl{margin:1.1em 0 1.3em;max-width:var(--measure)}
.lec-dl dt{font-weight:700;color:var(--accent-2);margin:1em 0 .25em}
.lec-dl dt:first-child{margin-top:0}
.lec-dl dd{margin:0;padding-left:14px;border-left:2px solid var(--cream-3);font-size:14.6px;line-height:1.88;color:var(--ink-2)}

/* ---------- 図の読み解きリスト ---------- */
.readout{margin:1.2em 0;max-width:var(--measure);padding:0;list-style:none}
.readout li{
  position:relative;padding:0 0 0 26px;margin:0 0 .75em;
  font-size:14.6px;line-height:1.88;color:var(--ink-2);
}
.readout li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:9px;height:9px;border-radius:2px;background:var(--accent);
  transform:rotate(45deg);
}
.readout li b{color:var(--ink)}

/* ---------- 表の微調整 ---------- */
table.lec-table td.sym{font-weight:500;color:var(--ink)}
table.lec-table td.flag,table.lec-table th.flag{
  font-family:var(--f-mono);font-size:.94em;color:var(--accent-2);white-space:nowrap;
}
table.lec-table td.dv{font-family:var(--f-mono);font-size:.9em;color:var(--ink-3);white-space:nowrap}

/* ---------- 一次資料バッジ ---------- */
.src{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-en);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-pale);
  border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:.1em;
  text-decoration:none;white-space:nowrap;
}
.src:hover{background:var(--accent);color:var(--paper)}
.src::before{content:"↗";font-size:9px}

/* ---------- 印刷 ---------- */
@media print{
  .cmd{background:#fff;border:1px solid #bbb;box-shadow:none}
  .cmd-head{background:#f2f2f2;border-bottom:1px solid #ddd}
  .where,.cmd pre{color:#111}
  .cmd .c{color:#3a6b46}
  .cmd-copy{display:none}
  ol.steps > li::after{display:none}
}

/* ---------- 用語ツールチップのはみ出し防止 ----------
   lecture.css の .term-def は max-width:280px 固定なので、
   狭い画面ではビューポート幅に収まるように絞る。 */
@media (max-width:760px){
  .term .term-def{
    position:fixed;left:16px;right:16px;bottom:16px;top:auto;
    width:auto;max-width:none;transform:translateY(6px);
  }
  .term:hover .term-def,.term:focus-visible .term-def{transform:translateY(0)}
  .term .term-def::after{display:none}
}