/* 校正の画面の見た目。**kabosu と blue が同じこのファイルを読む。**
 *
 * `frontend/assets/kousei-ui.js` が描く画面 (要素抽出/文字校正/価格照合の3タブ) の
 * スタイル一式。校正が570社の共通の道具になったので、見た目も1箇所に集めた
 * (2026-08-18。元は kabosu の style.css にあった)。
 *
 * ここに置くのは **校正画面のもの** だけ:
 *   .pd-*   校正画面 (提出詳細・校正ライト版の両方が使う)
 *   .md-*   復元テキストの3層レイヤー (紙面=黒 / 裏付け未確認=青 / AIの付加物=グレー)
 *   .ke-*   テキスト化の実行確認モーダル (器ごと kousei-ui.js が持つ)
 *   .badge* 判定バッジ (価格照合の5段階もここ)
 *   .tabs   3タブの帯
 *
 * kabosu の style.css は先頭でこのファイルを取り込む。blue は自分のページで直に読む。
 * 地の色は変数 (下の :root)。既定は kabosu の緑で、部署が上書きできる。
 */

/* 地の色。**既定は kabosu の緑。**部署が自分の CSS で上書きすれば、
   校正の画面ごとその部署の色になる (blue は青。`blue/frontend/kousei.css`)。
   **A赤/B橙/C緑/D青 の4色帯と、要素抽出の文字色 (黒/青/グレー/赤) は
   ここに入れない** — 意味を持つ色なので、どの部署でも同じでなければならない。 */
:root {
  --k-line: #00FF00;        /* 帯・枠・進捗の芯 */
  --k-deep: #2CC62C;        /* 濃いアクセント (選択中のページタブ・波紋) */
  --k-text: #1F8A1F;        /* アクセント色の文字 */
  --k-link: #04B204;        /* リンク */
  --k-bar2: #3AB93A;        /* 人ごとの使用量バー */
  --k-btn: #C4FFC4;         /* 実行ボタンの地 */
  --k-btn-hover: #A0FFA0;   /* 実行ボタン (押せるとき) */
  --k-tag: #D6FFD6;         /* 見出しの横の小さな札 */
  --k-tag-line: #7AEC7A;    /* その枠 */
  --k-track: #D0F0D0;       /* バーの溝 */
  --k-tint: #E1FFE1;        /* 薄い地 (注意枠) */
  --k-tint-line: #B0F0B0;   /* 薄い地の枠 */
  --k-tint2: #F0FFF0;       /* もっと薄い地 (予想の枠) */
  --k-tint2-line: #A8F0A8;  /* その枠 */
  --k-tint2-dash: #9EEA9E;  /* その中の点線 */
  --k-th: #E6FFE6;          /* 表の見出しの地 */
  --k-tint3: #F3FFF3;       /* 指摘カード (警告) の地 */
  --k-tint4: #f3faf3;       /* 問題なしの箱の地 */
  --k-tint4-line: #cde8cd;  /* その枠 */
  --k-heading: #795548;     /* 見出しの文字 */
  --k-on-line: #333;    /* --k-line の上に乗る文字 */
  --k-title: #2e7d32;   /* モーダルの見出し */
  --k-done: #2e7d32;    /* 「済み」の札の文字 */
  --k-done-bg: #e8f5e9; /* その地 */
}

/* 校正画面の器 (部署ごとに id が違うのでクラスで当てる) */
.kousei-screen { padding: 0 0 40px; }   /* 水平余白は各行が12pxで持ち、タブ下線を全幅に */

/* --- 3タブの帯 --- */
/* タブ (常時同じ場所に表示) */
.tabs {
  display: flex;
  gap: 0;
  padding: 10px 12px 0;
  border-bottom: 1px solid #e0e0e0;
}
.tabs .tab {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background: #f7f7f7;
  color: #666;
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
  min-width: 140px;       /* 文字数が違ってもタブ幅を全ページ共通に */
  text-align: center;
}
.tabs .tab.active {
  background: #fff;
  color: #333;
  font-weight: bold;
  border-color: var(--k-line);   /* タブ枠だけは白地で見える金色のまま */
  border-bottom: 2px solid #fff;
  margin-bottom: -1px;
}

/* 付加情報バッジ */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
.badge-pending { background: #eeeeee; color: #555; }
.badge-running { background: #e3f2fd; color: #1565c0; }
.badge-done    { background: #e8f5e9; color: #2e7d32; }   /* 価格表照合: 控えめ(緑) */
.badge-tax     { background: #eef2f6; color: #607d8b; }   /* 税検算済: 弱め(灰青) */
.badge-web     { background: #e1f0fb; color: #1565c0; }   /* WEB照合済: 控えめ(水色) */
.badge-none    { background: #fff3e0; color: #e65100; }   /* 照合無し: 目立たせる(琥珀) */
.badge-warn    { background: #ffebee; color: #c62828; font-weight: bold; }  /* 要確認: 目立つ(赤) */

/* 提出詳細画面: 上=タブ / 下=左デザイン・右結果。タブは3タブの帯 (.tabs/.tab) をそのまま流用 */

.pd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 12px 2px; margin-bottom: 12px; }
.pd-back { color: #555; text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
.pd-back .ico { font-size: 16px; }
.pd-back:hover { color: #333; }
/* タブ行の頭に置く「戻る」と「読み方」(2026-08-27)。中に入るとタブが見えなく
   なるので、どちらで通した記録かをここで出す */
.pd-tabs .pd-back { align-self: center; margin-right: 4px; white-space: nowrap; }
.pd-here {
  align-self: center; margin-right: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: #e6eff4; color: #00649a;
}
.pd-here-quick { background: #fffdf0; color: #FFD700; }
.pd-title { font-size: 15px; font-weight: bold; }
.pd-title .ver { color: var(--k-heading); margin-left: 4px; }
.pd-dl { margin-left: auto; font-size: 13px; color: var(--k-link); text-decoration: none; }

/* 校正ドラフト: 本人だけ表示のタグ + 下部アクションバー */
.pd-draft-tag { font-size: 12px; color: var(--k-text); background: var(--k-tag);
  border: 1px solid var(--k-tag-line); border-radius: 10px; padding: 2px 10px; }
/* 破棄/保存: タブ行の右端 (価格照合の右) に配置 */
.pd-tab-actions { margin-left: auto; display: flex; gap: 8px; align-items: center;
  padding-bottom: 6px; }
.pd-tab-actions button { height: 32px; line-height: 30px; padding: 0 16px; box-sizing: border-box;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.pd-saved-tag { font-size: 12px; color: var(--k-done); background: var(--k-done-bg);
  border: 1px solid #a5d6a7; border-radius: 6px; padding: 0 12px; align-self: center;
  height: 32px; line-height: 30px; box-sizing: border-box; white-space: nowrap; }
.pd-discard { background: #fff; border: 1px solid #ccc; color: #666; }
.pd-discard:hover { background: #f7f7f7; }
.pd-save { background: var(--k-btn); border: 1px solid var(--k-line); color: #333; }
.pd-save:hover { background: var(--k-btn-hover); }
.pd-save:disabled { opacity: .6; cursor: default; }

/* テキスト化の進捗バー */
.pd-progress { padding: 22px 6px; }
.pd-progress-label { font-size: 14px; color: var(--k-text); margin-bottom: 10px; font-weight: bold; }
.pd-progress-track { height: 14px; background: var(--k-track); border-radius: 7px; overflow: hidden; }
.pd-progress-fill { height: 100%; background: var(--k-line); border-radius: 7px;
  transition: width .5s ease; min-width: 6px; }
.pd-progress-note { font-size: 12px; margin-top: 10px; }
.pd-progress-count { font-size: 13px; color: var(--k-text); margin-top: 8px; font-weight: bold; }

/* テキスト化の待機ペイン (確認モーダルをキャンセル後) */
.pd-idle { padding: 20px 6px; }
.pd-idle-msg { font-size: 13px; color: #555; margin-bottom: 6px; }
.pd-idle-est { font-size: 12px; margin-bottom: 12px; }

/* テキスト化 実行確認モーダルの予想表示 */
.ke-hint { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.ke-est { background: var(--k-tint2); border: 1px solid var(--k-tint2-line); border-radius: 6px; padding: 10px 14px; }
.ke-est-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; }
.ke-est-row + .ke-est-row { border-top: 1px dashed var(--k-tint2-dash); }
.ke-est-k { font-size: 13px; color: var(--k-text); }
.ke-est-v { font-size: 16px; font-weight: bold; color: #b26a00; }
.ke-note { font-size: 11px; color: #999; margin-top: 10px; }

/* トークン使用状況ページ */
.tk-wrap { max-width: 720px; margin: 26px auto; padding: 0 16px; }
.tk-warn { background: #fff3e0; border: 1px solid #ffb74d; color: #e65100;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; }
.tk-summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-remain { font-size: 40px; font-weight: bold; color: #2e7d32; line-height: 1; }
.tk-remain.over { color: #c62828; }
.tk-unit { font-size: 16px; color: #555; }
.tk-of { color: #666; font-size: 14px; margin-left: 8px; }
.tk-bar-track { height: 20px; background: var(--k-track); border-radius: 10px; overflow: hidden; }
.tk-bar-fill { height: 100%; background: var(--k-line); border-radius: 10px;
  transition: width .5s ease; min-width: 4px; }
.tk-bar-fill.over { background: #e57373; }
.tk-add { margin: 16px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-add button { padding: 8px 14px; border-radius: 6px; border: 1px solid #ccc;
  background: #fafafa; color: #999; cursor: not-allowed; }
.tk-h { margin: 28px 0 12px; font-size: 15px; }
.tk-users { display: flex; flex-direction: column; gap: 12px; }
.tk-user-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.tk-user-name { color: #333; }
.tk-user-jpy { color: #666; }
.tk-user-track { height: 12px; background: #f2f2f2; border-radius: 6px; overflow: hidden; }
.tk-user-fill { height: 100%; background: var(--k-bar2); border-radius: 6px; }
.pd-dl:hover { text-decoration: underline; }

/* 画面全体はスクロールさせない (高さはJS wireViewportFit が 100vh に合わせて設定)。
   左=紙面画像は枠内に全体フィット、右=テキストだけが自分の枠内でスクロール */
.pd-split { display: grid; grid-template-columns: minmax(0, 1.7fr) 10px minmax(0, 1fr);
  gap: 8px; align-items: stretch; padding: 0 12px; }
/* 左右の境界線 = ドラッグハンドル (中央に1本線を描く) */
.pd-splitbar { align-self: stretch; cursor: col-resize; display: flex; justify-content: center; }
.pd-splitbar::before { content: ""; width: 1px; background: #eee; }
.pd-splitbar:hover::before, .pd-split.dragging .pd-splitbar::before { width: 3px; background: var(--k-line); }
.pd-split.dragging { user-select: none; }
.pd-split.dragging iframe { pointer-events: none; }
.pd-side-title { font-size: 14px; font-weight: bold; color: var(--k-heading);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pd-count { background: var(--k-line); color: var(--k-on-line); border-radius: 10px; padding: 0 8px; font-size: 12px; }
.pd-empty { padding: 10px; font-size: 13px; }
.pd-right { min-height: 300px; height: 100%; min-width: 0; overflow-y: auto; }
.pd-left { height: 100%; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; }   /* 上=虫眼鏡バー / 下=画像 */

/* 左: デザイン (版画像プレビューのみ・枠なし)。縦横の大きい方に合わせて全体フィット。
   縦横比の維持は object-fit に任せる (auto幅+max-height のフィットは Safari が
   フレックスアイテムのアスペクト比を再計算せず、枠を横に広げると縦に潰れる) */
.pd-image { display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  width: 100%; flex: 1 1 auto; min-height: 0; position: relative; }
.pd-image img { width: 100%; height: 100%; object-fit: contain; object-position: top center;
  display: block; cursor: zoom-in; }
/* 文字校正カードクリックで、該当ブロックの中心から「ぼわん」と波紋を出す。
   逆引き座標は葉単位で粗いため、四角枠でなく波紋で「この辺り」を示す。
   --sz = JSが渡す基準径。left/top = box中心 (中心そろえは transform で)。*/
.pd-ripple { position: absolute; z-index: 3; pointer-events: none;
  width: var(--sz, 60px); height: var(--sz, 60px);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%,
              rgba(44,198,44,0.32) 34%, rgba(44,198,44,0) 72%);
  animation: pd-bowan 640ms ease-out both; }
/* リングは緑ストローク + 内外の白ハロー = 緑地でも白地でも見える */
.pd-ripple::before, .pd-ripple::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--k-deep);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), inset 0 0 0 1.5px rgba(255,255,255,0.9);
  transform: translate(-50%, -50%) scale(0.35);
  animation: pd-wave 1500ms ease-out 3; }
.pd-ripple::after { animation-delay: 520ms; }
@keyframes pd-bowan {   /* 出現のぼわん (最後は淡い印として残す) */
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  55% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); } }
@keyframes pd-wave {    /* 広がって消える波紋を数回 */
  0% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.35); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } }
.pd-pdf { width: 100%; height: 100%; min-height: 400px; border: 1px solid #eee; border-radius: 4px; }
.pd-magnifier {
  position: fixed; width: 300px;
  border: 2px solid var(--k-line); border-radius: 6px; overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28); background: #fff;
  pointer-events: none; z-index: 9999;
}
.pd-mag-bar { height: 24px; line-height: 24px; padding: 0 8px; background: #fff;
  border-top: 1px solid #eee; font-size: 11px; color: #666; white-space: nowrap; }
.pd-mag-view { width: 300px; height: 200px; background-repeat: no-repeat; background-color: #fff; }
/* 拡大鏡のトグル操作バー (画像の上) */
.pd-mag-ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 2px 8px; }
.pd-mag-ico { font-size: 15px; line-height: 1; }
.pd-mag-switch { position: relative; width: 38px; height: 20px; border-radius: 10px;
  border: 1px solid #ccc; background: #e0e0e0; cursor: pointer; padding: 0; flex: none;
  transition: background .15s, border-color .15s; }
.pd-mag-switch .knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.pd-mag-switch.on { background: var(--k-btn); border-color: var(--k-line); }
.pd-mag-switch.on .knob { left: 19px; }
.pd-noimg { color: #aaa; text-align: center; font-size: 13px; line-height: 1.7;
  border: 1px solid #e2e2e2; border-radius: 6px; background: #fafafa; padding: 70px 20px; width: 100%; }

/* 右(復元テキスト): Lv2 markdown リッチ表示 */
.pd-md { font-size: 13px; line-height: 1.75; color: #333; }   /* スクロールは .pd-right が担う */
/* 文字色ルール(2026-07-14 絶対): 黒=紙面から読み取った文字だけ。
   青=読み取り由来だが裏付け未確認 / 赤=判読不能 / グレー(.md-ai)=AIの構造ラベル・合成文。 */
.pd-md .md-h { margin: 12px 0 4px; line-height: 1.4; }
.pd-md .md-h1 { font-size: 17px; }
.pd-md .md-h2 { font-size: 15px; }
.pd-md .md-h3 { font-size: 14px; }
.pd-md .md-h4 { font-size: 13px; }
.pd-md .md-ai { color: #999; font-size: 12px; }
.pd-md .md-unv { color: #1565c0; }   /* 読み取り見出しなので大きさは見出しのまま */
.pd-md .md-ail { color: #999; font-size: 12px; }   /* 行内のAIラベル接頭辞 (ラインナップ： 等) */

/* 複数ページPDF: ページ連動タブ (左の紙面と右の要素抽出が一緒に切り替わる) */
.pd-pages { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; }
.pd-pages .pd-page { border: 1px solid #ccc; background: #fff; border-radius: 6px;
  padding: 4px 14px; font-size: 13px; cursor: pointer; color: #555; }
.pd-pages .pd-page.active { background: var(--k-deep); border-color: var(--k-deep); color: #fff; font-weight: 700; }
/* 指摘・価格行のページバッジ (全ページまとめ表示用) */
.pd-pg { display: inline-block; background: #eee; color: #555; border-radius: 4px;
  font-size: 11px; font-weight: 700; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
.pd-md .md-h1:first-child, .pd-md .md-h2:first-child { margin-top: 0; }
.pd-md .md-p { margin: 4px 0; }
.pd-md .md-ul { margin: 4px 0 8px; padding-left: 20px; }
.pd-md .md-ul li { margin: 2px 0; }
.pd-md hr { border: none; border-top: 1px solid #eee; margin: 10px 0; }
.pd-md strong { font-weight: 700; }   /* 色なし: 色は警告系(赤=判読不能/青=出所なし)専用 */
/* 判読不能: 読めなかった箇所。赤字+薄い赤地で目立たせる */
.pd-md .md-unread { color: #d32f2f; font-weight: 700; background: #ffe5e5; padding: 0 3px; border-radius: 3px; }
/* 費用上限で読まずに終えた箇所 (判読不能=赤 と区別する。読めないのではなく読んでいない) */
.pd-md .md-budget { color: #7b3ff2; font-weight: 700; background: #f0e8ff; padding: 0 3px; border-radius: 3px; }
.pd-budget-alert { color: #5e2ecf; background: #f4eeff; border-color: #d8c8f7; }
.pd-mode-tag { font-size: 11px; color: #4a7b4f; background: #eef7ee; border: 1px solid #d3e8d5;
  border-radius: 4px; padding: 4px 8px; margin-bottom: 8px; }
/* 簡易版だけは色を変える — 通常版で通したものと取り違えないため
   (2026-08-27 指示で黄色系に。簡易校正の画面の色に合わせる) */
.pd-mode-quick { color: #555; background: #fffdf0; border-color: #f0d75f; }
.pd-md .md-unsourced { color: #1565c0; font-weight: 700; background: #e7f0fb; padding: 0 3px; border-radius: 3px; }
/* 要素抽出タブ上部の確認アラート (赤字/青字がある時だけ) */
.pd-check-alert { font-size: 12px; color: #b26a00; background: var(--k-tint); border: 1px solid var(--k-tint-line);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }

/* 「再試行」ボタン（テキスト化が落ちたとき）。**素読みだけをやり直す口は無い** */
.pd-run { margin-top: 8px; padding: 8px 18px; background: var(--k-btn); border: 1px solid var(--k-line);
  border-radius: 6px; font-size: 14px; font-weight: bold; color: #333; cursor: pointer; }
.pd-run:hover { background: var(--k-btn-hover); }

/* 右(文字校正): 素読み。カードは「上に色帯 + 本文」。色=カテゴリ(--cat, A赤/B橙/C緑/D青) */
.pd-finding { border: 1px solid #e6e6e6;
  border-radius: 6px; overflow: hidden; margin-bottom: 6px; background: #fff; }
.pd-band { background: var(--cat, #888); color: #fff; font-weight: 700; font-size: 8pt;
  line-height: 1.6; padding: 2px 9px; letter-spacing: .02em; }
.pd-finding-body { font-size: 13px; padding: 7px 10px; }
.pd-issue { color: #555; margin-top: 2px; }
.pd-sug { color: #2e7d32; }
/* 該当箇所を左サムネイルに示せるカード (bbox あり)。クリックで波紋 */
.pd-finding.pd-locatable { cursor: pointer; }
.pd-finding.pd-locatable:hover { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }
.pd-locate-ico { color: var(--cat, var(--k-deep)); margin-left: 6px; font-size: 12px; }

/* ズーム再確認 (recheck) の結果バッジ。misread=修正済(グレーアウト) / paper=紙面通り(強調) */
.pd-rc { font-size: 11px; padding: 1px 8px; border-radius: 10px; margin-left: 4px; white-space: nowrap; }
.pd-rc-fixed { background: #e8f5e9; color: #2e7d32; }
.pd-rc-paper { background: #ffebee; color: #c62828; }
.pd-rc-unknown { background: #f5f5f5; color: #888; }
.pd-finding.pd-rechecked { opacity: 0.55; }
/* AI の読み取りミスを直したものの一覧 (2026-09-15)。カードにせず一番下に「元 → 直し」で */
.pd-fixed-list { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--k-line, #ccd); }
.pd-fixed-block + .pd-fixed-block { margin-top: 8px; }
.pd-fixed-title { font-size: 12.5px; color: #555; }
.pd-fixed-title b { color: #2e7d32; }
.pd-fixed-list ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; }
.pd-fixed-list li b { color: #1b1b1b; }
.pd-fixed-arrow { color: #999; margin: 0 2px; }
/* 確認済み (2026-08-21)。**カードは消さない** — 何を見たかが残らないと後で追えない。
   色帯だけ灰色に落として、赤が並ばないようにする */
.pd-finding.pd-acked { --cat: #b9b9b9; opacity: 0.6; }
.pd-finding.pd-acked .pd-band { color: #fff; }
.pd-ack { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.pd-ack-on { font-size: 12px; color: #2e7d32; }
.pd-ack-btn { border: 1px solid var(--k-line); background: #fff; color: #555;
              border-radius: 5px; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.pd-ack-btn:hover { background: #f5f5f5; }
.pd-ack-btn:disabled { color: #aaa; cursor: default; }
.pd-count-ack { background: #eef7ee; color: #2e7d32; }
.pd-finding.pd-rechecked .pd-reread { color: #2e7d32; margin-top: 2px; font-size: 12px; }

/* 右(入稿チェック): プリフライト。指摘行は素読みの .pd-finding を流用し、重さ3段の色だけ足す */
.pd-finding.sev-warn { border-color: var(--k-tint-line); background: var(--k-tint3); }
.pd-finding.sev-warn .pd-sev { background: var(--k-tint); color: #b26a00; }
.pd-finding.sev-info { border-color: #cfe3f5; background: #f7fbff; }
.pd-finding.sev-info .pd-sev { background: #e3f2fd; color: #1565c0; }
.pf-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pf-chip { font-size: 12px; font-weight: bold; padding: 1px 10px; border-radius: 10px; }
.pf-chip.pf-err { background: #ffebee; color: #c62828; border: 1px solid #f0b4b4; }
.pf-chip.pf-warn { background: var(--k-tint); color: #b26a00; border: 1px solid var(--k-tint-line); }
.pf-chip.pf-inf { background: #e3f2fd; color: #1565c0; border: 1px solid #cfe3f5; }
.pf-chip.pf-zero { background: #f5f5f5; color: #aaa; border: 1px solid #e5e5e5; font-weight: normal; }
.pf-when { margin-left: auto; font-size: 11px; color: #999; }
.pf-meta { font-size: 12px; color: #777; margin-bottom: 8px; }
.pf-clean { color: #2e7d32; font-size: 13px; padding: 10px; background: var(--k-tint4);
  border: 1px solid var(--k-tint4-line); border-radius: 6px; }
.pf-note { font-size: 12px; color: #888; margin-top: 4px; }

.pd-ref-url { font-size: 12px; color: #777; margin-bottom: 8px; }
.pd-ref-url a { color: #1565c0; text-decoration: none; }
.pd-ref-url a:hover { text-decoration: underline; }
.pd-webrun { margin-left: 8px; padding: 3px 12px; background: var(--k-btn); border: 1px solid var(--k-line);
  border-radius: 6px; font-size: 12px; font-weight: bold; color: #333; cursor: pointer; }
.pd-webrun:hover { background: var(--k-btn-hover); }
.pd-webrun:disabled { background: var(--k-tint-line); border-color: var(--k-tint-line); cursor: default; }

/* 右(価格照合): 正誤表 */
.pd-price { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-price th, .pd-price td { border: 1px solid #eee; padding: 6px 9px; text-align: left; vertical-align: top; }
.pd-price thead th { background: var(--k-th); color: var(--k-heading); white-space: nowrap; }
.pd-price .pd-note { color: #777; font-size: 12px; }
.pd-addprice { display: inline-block; margin-top: 6px; padding: 3px 10px; font-size: 12px;
  background: #fff; color: var(--k-heading); border: 1px solid var(--k-line); border-radius: 4px; cursor: pointer;
  white-space: nowrap; }
.pd-addprice:hover { background: var(--k-th); }
.pd-addprice:disabled { color: #bbb; border-color: #eee; cursor: default; background: #fafafa; }

/* テキスト化 実行確認モーダルの器。**汎用の .modal-* は借りない** —
   blue の theme.css が別の .modal を持っていて衝突するため、校正のものは ke- で持つ */
.ke-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  font-family: var(--base-font); }
.ke-modal { background: #fff; border-radius: 8px; width: 560px; max-width: 92vw;
  max-height: 84vh; overflow: auto; padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); }
.ke-modal-title { font-size: 15px; font-weight: bold; margin-bottom: 12px; color: var(--k-title); }
.ke-modal-section { margin: 12px 0; }
/* キャンセルは左下・実行は右下 (2026-10-01 峯岸さん) */
.ke-modal-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.ke-modal-actions button, .ke-way-go button { padding: 8px 18px; border: 1px solid #ccc; border-radius: 4px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 14px; }
.ke-modal-actions button.primary, .ke-way-go button.primary { background: var(--k-btn); border-color: var(--k-line); font-weight: bold; }
.ke-modal-actions button.primary:hover, .ke-way-go button.primary:hover:not(:disabled) { background: var(--k-btn-hover); }
.ke-way-go button:disabled { opacity: .6; cursor: default; }
/* 道が2つあるとき (インスタ・カレンダー) の道ごとのカード: 見出し → 予想 → その道のボタン (右下) */
.ke-way { border: 1px solid var(--k-tint2-line); border-radius: 6px; padding: 12px 14px; margin-top: 12px; background: #fff; }
.ke-way-h { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.ke-way .ke-est { margin-bottom: 10px; }
.ke-way-go { display: flex; justify-content: flex-end; }
.ke-way-no { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 10px; }
#ke-ways .ke-strip { margin: 12px 0 0; }

/* 価格照合タブ: 価格表の取得日時・古さ */
.pd-fresh { font-size: 12px; color: #777; margin-bottom: 8px; }
.pd-fresh.pd-stale { color: #b26a00; background: var(--k-tint); border: 1px solid var(--k-tint-line);
  border-radius: 6px; padding: 6px 10px; }
.pd-fresh a { color: #1565c0; text-decoration: none; }
.pd-fresh a:hover { text-decoration: underline; }

/* 画面が狭いとき: 左右2列をやめて縦に積む */

@media (max-width: 900px) {
  .pd-split { grid-template-columns: 1fr; }
  .pd-right { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 14px; }
}
@media (max-width: 560px) { .pd-compare { grid-template-columns: 1fr; } }

/* 補足の文字 */
.muted { color: #999; }

/* 走り出す前の問いかけ (カレンダー。2026-09-21)。**お金を使う前に止めて聞く** */
.pd-ask { padding: 24px; text-align: center; }
.pd-ask-q { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.pd-ask-why { font-size: 12px; margin-bottom: 16px; }
.pd-ask-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pd-ask .pd-ask-no { background: #fff; color: #444; border: 1px solid #c9ced3; }

/* 確認モーダルの中の「カレンダーのようです」(2026-09-21)。見分けは機械・AI 0回 */
.ke-cal { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #e0c98a;
          background: #fffdf3; border-radius: 6px; }
.ke-cal-q { font-weight: 700; font-size: 13px; }
.ke-cal-why { font-size: 11px; margin: 2px 0 6px; }
.ke-cal-note { font-size: 12px; line-height: 1.6; }
/* インスタの横つなぎ / 割り切れない横長の知らせ (2026-09-29)。カレンダーの箱と同じ形・色は薄い青 */
.ke-strip { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #b9d3ea; border-radius: 6px; background: #f3f8fd; }
/* インスタの解像度違い (2026-09-30)。入れ直しのお願い */
.ke-strip.ke-insta-ng { border-color: #e5a3a3; background: #fdf3f3; color: #c62828; }