/* =============================================================
 * image-resolution-checker.css
 * 画像解像度チェッカー（/seisaku/image-resolution-checker/）専用スタイル
 *
 * 共通CSS（common-base / core / extend）で作れない部分だけをここに置く。
 * 具体的には、判定の色分け・配置方法/定型サイズのボタン・原寸プレビュー部品
 * （キャンバス・目盛り・較正カード）。レイアウトや余白は共通クラスを使うこと。
 * クラス名は irc- （Image Resolution Checker）で始める。
 * 原寸プレビュー部品（actual-size-preview.js）は入稿画面でも使う予定なので、
 * 部品側のクラスは「.irc-preview」配下で完結させている。
 * ============================================================= */

/* --- 判定の色（緑・黄・赤） --- */
.irc-ok   { color: #2f6b3a; }
.irc-warn { color: #a8730c; }
.irc-bad  { color: #b8342a; }

.irc-verdict {
  text-align: center;
}

.irc-verdict .irc-dpi {
  font-size: 260%;
  font-weight: bold;
  line-height: 1.1;
  font-family: Arial, sans-serif;
}

.irc-verdict .irc-dpi span {
  font-size: 40%;
  font-weight: normal;
  margin-left: 3px;
}

.irc-verdict .irc-judge {
  font-size: 110%;
  font-weight: bold;
  margin-top: 4px;
}

.irc-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 300px;
  color: #fff;
  font-size: 90%;
  font-weight: bold;
}

.irc-badge.irc-ok   { background: #2f6b3a; }
.irc-badge.irc-warn { background: #a8730c; }
.irc-badge.irc-bad  { background: #b8342a; }
.irc-badge.irc-unknown { background: #888; }

/* --- 定型サイズ・用途・配置方法のボタン --- */
.irc-presetList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.irc-presetList button {
  font: inherit;
  font-size: 90%;
  cursor: pointer;
}

.irc-presetList button.is-on {
  color: #003399;
  border-color: #2489ce;
  background-color: #e2eff7;
}

.irc-sizeInput {
  width: 110px;
  font-family: Arial, sans-serif;
}

.irc-fitChoice {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.irc-fitBtn {
  font: inherit;
  text-align: left;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  flex: 1 1 250px;
}

.irc-fitBtn strong { display: block; font-size: 100%; margin-bottom: 2px; }
.irc-fitBtn span   { font-size: 85%; color: #666; }
.irc-fitBtn.is-on  { border-color: #2489ce; box-shadow: inset 0 0 0 1px #2489ce; background: #f3f8fc; }
.irc-fitBtn.is-on span { color: #333; }

.irc-hidden { display: none !important; }

/* --- スタッフ用（メール用テキスト） --- */
.irc-mailText {
  width: 100%;
  min-height: 220px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 90%;
  line-height: 1.6;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

/* 生成AIへのプロンプト。見た目はメール用テキストと同じで、文章が長い（25行前後）ぶんだけ高くする。
 * .irc-mailText と詳細度が同じ（クラス1つ）なので、必ずこの順（あと）に置くこと。
 * 前に置くと min-height 220px に負けて高さが効かない */
.irc-aiPrompt {
  min-height: 380px;
}

/* =============================================================
 * 原寸プレビュー部品（actual-size-preview.js が生成する DOM）
 * ============================================================= */
.irc-preview {
  font-variant-numeric: tabular-nums;
}

.irc-panel {
  border-top: 1px solid #ccc;
  padding: 18px 0;
}

.irc-panelHead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.irc-panelTitle {
  font-size: 110%;
  font-weight: bold;
  margin: 0;
}

.irc-panelNote {
  font-size: 85%;
  color: #666;
}

/* 画面の選択 */
.irc-screenChoice {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.irc-screenBtn {
  font: inherit;
  text-align: left;
  padding: 11px 15px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  flex: 1 1 190px;
}

.irc-screenBtn strong { display: block; font-size: 100%; margin-bottom: 2px; }
.irc-screenBtn span   { font-size: 85%; color: #666; }
.irc-screenBtn.is-on  { border-color: #2489ce; box-shadow: inset 0 0 0 1px #2489ce; background: #f3f8fc; }
.irc-screenBtn.is-on span { color: #333; }

.irc-autoNote {
  font-size: 85%;
  color: #666;
  margin: 10px 0 0;
  min-height: 1.2em;
}

/* カード較正 */
.irc-precise { margin-top: 14px; }

.irc-precise summary {
  font-size: 90%;
  color: #006dcc;
  cursor: pointer;
  /* クリックできる範囲を文字幅にぴったり合わせる指定。
   * ただし max-content は「1行に収まる幅」なので折り返さず、
   * スマホでは見出しが親の <details> よりはみ出してページに横スクロールを出す。
   * max-width で頭を押さえ、狭いときだけ2行に折り返させる（2026-09-10 修正） */
  width: max-content;
  max-width: 100%;
}

.irc-preciseLede {
  font-size: 85%;
  color: #666;
  margin: 10px 0 14px;
}

.irc-cardStage {
  background: #9a9995;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}

.irc-calCard {
  width: 323px;
  aspect-ratio: 85.6 / 53.98;
  background: #fbfbfa;
  border-radius: 3.4%;
  border: 1px solid #7d7c78;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  flex: 0 0 auto;
}

.irc-calCard::after {
  content: "カードの短辺と長辺を実物に合わせてください";
  position: absolute;
  left: 8%;
  bottom: 12%;
  right: 8%;
  font-size: 11px;
  color: #8e8d89;
  line-height: 1.5;
}

.irc-calStripe {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  height: 17%;
  background: #d8d6d0;
}

.irc-calControls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.irc-calControls input[type=range] {
  flex: 1 1 260px;
  accent-color: #006dcc;
}

.irc-readout {
  font-size: 85%;
  color: #666;
}

/* 原寸ビュー（全体図＋自動で選んだ箇所の一覧） */
.irc-proof {
  background: #9a9995;
  padding: 26px;
  margin-top: 14px;
}

/* 全体図（番号付き・操作なし） */
.irc-overview {
  text-align: center;
  margin-bottom: 18px;
}

/* 全体図。白い枠をクリック／ドラッグで動かせる。
 * スマホで縦スクロールを殺さないよう touch-action は pan-y にする（縦フリックは画面のスクロールに渡す） */
.irc-overviewCanvas {
  display: inline-block;
  max-width: 100%;
  border: 1px solid #6f6e6a;
  background: #7f7e7a;
  cursor: crosshair;
  touch-action: pan-y;
}

.irc-overviewCaption {
  color: #efeeeb;
  font-size: 85%;
  margin: 8px 0 0;
}

/* 原寸の枠を並べる格子。いまは1枠だけを幅いっぱいに出す（MAX_SPOTS = 1）。
 * 枠を増やしたときは画面幅に応じて自動で段組みになる（1枠 340px 以上） */
.irc-cropGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

/* 原寸の枠。中の canvas には JS が固定の px 幅（style.width）を付ける。
 * グリッドの子は既定で「中身より狭くなれない」ため、min-width を 0 にしておかないと
 * 列がその px 幅より狭くなれず、画面を狭めても枠が縮まずに横へはみ出す。
 * fitSizes() はこの要素の幅を測って原寸枠の大きさを決めているので、
 * 縮めないと測り直しても同じ幅が返り、一度広く描いたら二度と小さくならない（2026-09-10 修正）。
 * overflow: hidden は、幅が変わってから描き直す（100ms）までの一瞬、
 * canvas が枠より大きいままページに横スクロールバーを出すのを防ぐため */
.irc-crop {
  margin: 0;
  background: #fff;
  border: 1px solid #6f6e6a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  min-width: 0;
  overflow: hidden;
}

.irc-cropCanvas {
  display: block;
  width: 100%;
  background: #fff;
  cursor: grab;
  touch-action: pan-y;
}

.irc-cropCanvas:active { cursor: grabbing; }

.irc-cropCaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid #ddd;
  background: #f4f3f0;
  font-size: 85%;
  color: #333;
}

.irc-cropNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #12305a;
  color: #fff;
  font-weight: bold;
  font-size: 80%;
  flex: 0 0 auto;
}

.irc-cropPlace {
  font-weight: bold;
  flex: 0 0 auto;
}

.irc-cropRange {
  color: #666;
  margin-left: auto;
}

.irc-modes {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  align-items: center;
}

.irc-modeGroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.irc-modeLabel {
  font-size: 85%;
  color: #2c2b28;
}

.irc-modeBtn {
  font: inherit;
  font-size: 85%;
  padding: 5px 11px;
  border: 1px solid #6f6e6a;
  border-radius: 3px;
  background: transparent;
  color: #2c2b28;
  cursor: pointer;
}

.irc-modeBtn.is-on {
  background: #1b1d1f;
  color: #f4f3f0;
  border-color: #1b1d1f;
}

/* 「いま見ている場所を画像で保存」 */
.irc-saveRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.irc-saveBtn {
  font: inherit;
  font-size: 90%;
  padding: 8px 18px;
  border: 1px solid #6f6e6a;
  border-radius: 3px;
  background: #ffffff;
  color: #12305a;
  cursor: pointer;
}

.irc-saveBtn:hover { background: #e1f2fe; }

.irc-saveBtn[disabled] {
  color: #8e8d89;
  border-color: #8e8d89;
  background: #dcdbd7;
  cursor: default;
}

.irc-saveNote {
  font-size: 85%;
  color: #efeeeb;
}

.irc-proofCaption {
  text-align: center;
  color: #efeeeb;
  font-size: 85%;
  margin: 14px 0 0;
}

.irc-disclaimer {
  margin-top: 14px;
  font-size: 85%;
  color: #666;
}

@media (max-width: 600px) {
  .irc-proof { padding: 12px; }
  .irc-cropGrid { grid-template-columns: 1fr; gap: 12px; }
  .irc-modes { gap: 12px; }
}

/* =============================================================
 * 入力画面の機能紹介（index.view.php）
 * スクリーンショットは発案者が後から置く。無い間は点線の枠に「準備中」と出す。
 * 16:10 は撮ってもらうスクショの比率（1200×750）と同じにしてあり、
 * 画像が入っても入らなくても段の高さが変わらないようにしている。
 * ============================================================= */
.irc-shot {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.irc-shotPlaceholder {
  aspect-ratio: 16 / 10;
  border: 2px dashed #bbb;
  border-radius: 4px;
  background: #fafafa;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 90%;
}

/* =============================================================
 * 手順リスト（BL-DL-Step）の番号を、dl ごとに 1 から振り直す
 *
 * 共通CSS（common-extend.css）は .BL-DL-Step dt に counter-increment だけを書いていて、
 * counter-reset がどこにも無い。そのため1ページに dl を2つ置くと、2つ目の番号が
 * 前の続き（4,5,6...）になってしまう。
 *
 * このページは「使い方は3ステップ」と「印刷するまでの流れ（5段階）」で2つ使うので、
 * ここでリセットする。共通CSS側を直すと他ページに影響するため、このページで閉じている。
 * ============================================================= */
.BL-DL-Step {
  counter-reset: section-counter;
}