:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #1f2430;
  --text-muted: #6b7280;
  --accent: #2f6feb;
  --accent-hover: #2559c4;
  --danger: #d13438;
  --warning-bg: #fff8e6;
  --warning-border: #f0d68a;
  --sidebar-bg: #0b1220;
  --sidebar-text: rgba(255, 255, 255, 0.94);
  --sidebar-active-bg: rgba(13, 110, 253, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
}

/* method_edit.html（発送方法編集、本番のpicking.phpと同じ独立ページ）用の
   簡易コンテナ。サイドバー無しの単純な1カラムページ。
   2026-09-30、実機`shipping/picking.php`の`.wrap`を直接計測して修正
   （PROJECT_STATUS.md§68参照）: max-width 1280px・左右padding 14px・
   上下paddingは実質0（本システムは下部固定バーとの重なり防止のため
   下だけ64px残す）。従来はmax-width 1100px・上下左右24pxと大きく異なり、
   表が入りきらず横スクロールが発生し、ページ全体も縦に余分な余白が
   付いていた。 */
.wrap-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 14px 64px;
}

.wrap-page h1 {
  margin: 0 0 12px;
  font-size: 20px;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* ---------- サイドバー ----------
   2026-09-30、実機`shipping_top.php`・`system_config.php`で新規に左固定
   サイドバー（幅240px・「ジョブMenu」タイトル・6項目・各リンクにSVG
   アイコン）が追加されていることを発見（以前のセッションで確認した
   「実機にはサイドバーが無い」は当時は正しかったが、本番稼働中のベンダー
   側UI更新により変化した模様。ただしpicking.php等一部ページには
   まだ表示されないなどロールアウトは不完全）。実機の生DOM計測値に
   合わせて幅・配色・フォント・アイコンを一致させた。
   PROJECT_STATUS.md§70参照。 */
.sidebar {
  width: 240px;
  flex: 0 0 240px;
  background-color: #0b1220;
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0) 55%),
    linear-gradient(160deg, #0b1220 0%, #0a1b2a 45%, #0b1220 100%);
  color: rgba(255, 255, 255, 0.94);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.sidebar__title {
  font-size: 14.4px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  padding: 0;
  margin: 4px 8px 12px;
  line-height: 1.4;
}

.nav {
  display: grid;
  gap: 10px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.94);
  font-size: 15.2px;
  cursor: pointer;
}

.nav__item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.nav__item--active {
  background: rgba(13, 110, 253, 0.35);
  color: rgba(255, 255, 255, 0.94);
  font-weight: 400;
}

.nav__item__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

.nav__item__icon svg {
  width: 18px;
  height: 18px;
}

.nav__item:disabled {
  cursor: default;
  opacity: 0.55;
}

.nav__icon {
  font-size: 15px;
}

.nav__badge {
  margin-left: auto;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 999px;
}

/* ---------- 上部メニュー（出荷ジョブ内：出荷／出荷作業／出荷設定 等） ---------- */
/* 2026-10-08修正（§132）。実機のジョブメニュー（.app-nav .nav-link）を直接計測
   した値（文字13.92px・余白4.48px 9.6px・間隔5.6px）に合わせ、仕入れの
   11項目が1行に収まるようにした（旧14px・10px 16px・4pxでは1,134px必要で2行）。 */
.topbar {
  display: flex;
  align-items: center;
  gap: 5.6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4.48px 9.6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.92px;
  white-space: nowrap;
  cursor: pointer;
}

.topbar__item:hover:not(:disabled) {
  color: var(--text);
}

.topbar__item--active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.topbar__item:disabled {
  cursor: default;
  opacity: 0.55;
}

/* 2026-10-01、実機の仕入れ上部タブに存在する`<hr>`区切り線
   （環境設定｜査定一覧｜カテゴリ別手数料・FBA手数料の3グループを分ける）
   を再現する縦線。PROJECT_STATUS.md§75参照。 */
.topbar__sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  margin: 6px 6px;
  background: var(--border);
}

/* ---------- メイン ---------- */
.main {
  flex: 1;
  padding: 28px 32px;
  min-width: 0;
}

/* ---------- 出荷モジュール: 実機とのレイアウト比較（2026-09-27）に基づく
   幅・文字サイズの調整。実機のDOM実測値（getComputedStyle）:
   コンテナ`.wrap`がmax-width:1200px・padding:0 14pxで中央寄せ、
   h2フォントサイズ16px（本システムは既定の21px=14px*1.5のまま
   だった）。ユーザー指摘「メインコンテンツの横幅・左右の余白・
   各カードの幅・文字サイズが元システムと異なる」に対応するため、
   出荷モジュール（.shipping-panel）にのみ適用する（他モジュールの
   既存レイアウトには影響させない）。 ---------- */
.shipping-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
  /* 実機のfont-family（system-ui, -apple-system, "Segoe UI", sans-serif）
     と一致させる。実機はCJKフォントを明示せずsystem-uiのOSフォールバックに
     任せており、本システムが明示していた"Yu Gothic"/Meiryo等より行の
     高さが小さくなる（h2の高さ実測21pxに対し本システムは26pxだった）。
     他モジュール（仕入れ等）は別途フォント指定のまま変更していないため
     影響しない。PROJECT_STATUS.md§68参照。 */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 実機shipping_top.phpの.row（カード内2カラムレイアウト。左右565px固定・
   gap 12px）をそのまま再現する汎用クラス。実機で使われている全カード
   （現在の設定・2)注文リスト・4-A)配送ラベル印刷 等）で共通。
   PROJECT_STATUS.md§68参照。 */
.shipping-panel .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipping-panel h2 {
  font-size: 16px;
}

/* 2026-09-30、実機`shipping_top.php`の`.card`相当要素を直接計測して追加
   （PROJECT_STATUS.md§68参照）: padding 14px・margin-bottom 12px・
   border-radius 10px。グローバルな`.card`（20px 22px / 20px余白）のままだと
   出荷トップだけ元システムよりカードの縦の余白が大きく、ページ全体が
   不必要に縦長になっていた。他モジュールの`.card`には影響させないよう
   `.shipping-panel`配下にのみ適用する。 */
.shipping-panel .card {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
}

/* 実機のボタン（padding 8px 12px・高さ37px・角丸8px）に合わせる。
   フォントサイズは実機がブラウザ既定のボタンフォント（約13.3px）を
   そのまま使っていたため、本システムも13pxに近づける。 */
.shipping-panel .btn {
  padding: 8px 12px;
  font-size: 13.3333px;
}

/* 実機の各カード見出し（h2）は margin:0 0 10px（上マージンなし）。
   本システムはブラウザ既定のh2マージン（約13.28px 上下）が残っていたため
   縦に長くなっていた。PROJECT_STATUS.md§68参照。 */
.shipping-panel .card h2 {
  margin: 0 0 10px;
  line-height: normal;
}

/* 実機の「現在の設定」「進捗」等のテキストは .small（font-size:12px、
   line-height:normal、margin:0）相当の詰まった行間。本システムは
   line-height:1.8・margin-bottom:14pxの<p>を使っていたため縦に長く
   なっていた。PROJECT_STATUS.md§68参照。 */
.shipping-panel .current-settings-line,
.shipping-panel .status-line {
  font-size: 12px;
  line-height: normal;
  margin: 0;
}

/* 実機の.small（各カード内の補足テキスト用ユーティリティクラス）を
   出荷モジュールに追加。font-size:12px・color:#666・line-height:normal・
   margin:0を実機から直接計測して一致させた。.notify-warnは「6) 出荷通知
   送信」の追跡番号未入力時警告（color:#b00000・font-weight:800）。
   PROJECT_STATUS.md§68参照。 */
.shipping-panel .small {
  font-size: 12px;
  color: #666;
  line-height: normal;
  margin: 0;
}

.shipping-panel .notify-warn {
  color: #b00000;
  font-weight: 800;
}

/* 実機の「※...」注記は.small相当（12px・line-height:normal・margin無し、
   ただし直前要素との区切りに8px程度の上マージン）で表示されている。
   本システムは共通の.module__desc--tight（14px下マージン・1.6行間）を
   流用していたため縦に間延びしていた。出荷モジュールに限定して実機の
   詰まった行間に合わせる。PROJECT_STATUS.md§68参照。 */
.shipping-panel .module__desc--tight {
  font-size: 12px;
  line-height: normal;
  color: #666;
  margin: 8px 0 0;
}

.shipping-panel .ship-method-breakdown {
  font-size: 12px;
  line-height: normal;
  color: #666;
  margin: 8px 0 0;
}

/* 実機「2) 注文リスト」カードの.order-list-summary（.row相当の2カラム）を
   実機計測値（gap:12px・ラベルは.small相当・大数字はfont-size:20px/
   font-weight:800/margin:0）に合わせる。PROJECT_STATUS.md§68参照。 */
.shipping-panel .order-list-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.shipping-panel .order-list-summary__main {
  min-width: 0;
}

.shipping-panel .ship-method-summary {
  flex: initial;
}

.shipping-panel .section-label {
  font-size: 12px;
  color: #666;
  line-height: normal;
  margin-bottom: 0;
}

.shipping-panel .order-list-summary__big {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.shipping-panel .concurrent-orders-line {
  font-size: 12px;
  color: #666;
}

.shipping-panel .ship-method-summary__title {
  font-size: 12px;
  color: #666;
}

.shipping-panel .ship-method-summary__list li {
  font-size: 12px;
}

.shipping-panel .spapi-actions {
  margin-top: 12px;
}

/* 実機の.btns（select・button等の操作行をまとめる横並びコンテナ。
   実機計測: display:flex, gap:10px, align-items:center, flex-wrap:wrap、
   直前要素からmargin-top:10〜12px）。PROJECT_STATUS.md§68参照。 */
.shipping-panel .btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 「4-A) 配送ラベル印刷」の枚数表示のみ実機でfont-size:26px/font-weight:900
   （他の.order-list-summary__bigは20px/800）だったことを実機で確認した
   個別例外。PROJECT_STATUS.md§68参照。 */
#stat-label-sheets {
  font-size: 26px;
  font-weight: 900;
}

/* 実機「5) 追跡番号入力」の.tracking-header（左=必要件数・右=CSV取込/
   保存操作）も実機の`.row`と同じ左右565px相当の2カラムgridだったため、
   出荷モジュール内では.rowと同じ挙動に揃える。PROJECT_STATUS.md§68参照。 */
.shipping-panel .tracking-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.shipping-panel .tracking-header__csv {
  min-width: 0;
}

.shipping-panel #stat-tracking-missing-line {
  font-size: 12px;
  color: #666;
  line-height: normal;
}

/* 実機「データ取得の進捗」を実機計測値に合わせる: ステータス文言は
   .small相当（12px・margin無し）、バー本体は高さ14px・上マージン8px。
   PROJECT_STATUS.md§68参照。 */
.shipping-panel .progress-status-text {
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  color: #666;
}

/* 実機は「データ取得完了」を緑ではなく青（rgb(11,102,214)）・
   font-weight:800で表示することを実機計測で確認した。 */
.shipping-panel .progress-status-text--done {
  color: #0b66d6;
  font-weight: 800;
}

.shipping-panel .progress-bar {
  height: 14px;
  margin: 8px 0 0;
}

/* `.shipping-panel .card h2`（margin:0 0 10px）が`.card__header-row h2`
   （margin:0、ボタンと並ぶ見出し用）より詳細度で勝ってしまい、実機で
   マージン無しのはずの見出しに10px付いてしまっていたための個別上書き。
   PROJECT_STATUS.md§68参照。 */
.shipping-panel .card__header-row h2 {
  margin: 0;
}

.shipping-panel .card__header-row {
  margin-bottom: 0;
}

.module__header h1 {
  margin: 0 0 6px;
  font-size: 20px;
}

.module__desc {
  margin: 0 0 20px;
  color: var(--text-muted);
  line-height: 1.6;
}

.section-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ---------- 「現在の設定」表示（1. レポート取り込み） ---------- */
.current-settings {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.7;
}

.current-settings__label {
  color: var(--text-muted);
  margin-right: 2px;
}

/* ---------- 発送方法ごとの件数（2. 注文リスト） ---------- */
.ship-method-summary {
  margin: 6px 0 16px;
}

.ship-method-summary__title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ship-method-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

/* ---------- 取込フォーム ---------- */
.import-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.import-form input[type="file"] {
  flex: 1 1 320px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: #f0f2f5; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn--primary:hover { background: var(--accent-hover); }

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.import-result {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.import-result--success {
  background: #eaf7ee;
  border: 1px solid #b6e3c3;
  color: #1e6b34;
}

.import-result--error {
  background: #fdecec;
  border: 1px solid #f3b7b8;
  color: #8a1c1f;
}

.import-result .warning-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #8a6d1a;
}

/* ---------- 一覧（発送方法編集・追跡番号などの小さな表） ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.order-table th, .order-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.order-table thead th {
  position: sticky;
  top: 0;
  background: #f7f8fa;
  color: var(--text-muted);
  font-weight: 600;
  z-index: 1;
}

.order-table tbody tr:hover {
  background: #f7f9ff;
}

.order-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}

/* ---------- SP-API連携パネル ---------- */
.module__desc--tight {
  margin: 0 0 14px;
}

.spapi-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 2026-09-23発見: class="spapi-actions"のdisplay:flexが、
   同じ要素のhidden属性（UA stylesheetのdisplay:none）を著者スタイルの
   優先で上書きしてしまい、hidden指定が効かなくなるバグがあった
   （例: データ取得の進捗カードの「強制開始」ラップが、進捗100%でも
   hidden=trueなのに実際は表示されたままになっていた）。 */
.spapi-actions[hidden] {
  display: none;
}

.spapi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.stat-tile__label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.stat-tile__value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 設定モジュール ---------- */
.setting-panel h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.settings-form {
  display: grid;
  gap: 14px;
  max-width: 480px;
  margin-bottom: 16px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.settings-field input,
.settings-field select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: "Consolas", monospace;
  font-size: 13px;
}

.settings-field__checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}

.settings-field__checkbox input {
  width: auto;
}

.settings-field__radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.settings-field__radio input {
  width: auto;
}

.field-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: inherit;
}

.field-badge--set {
  background: #eaf7ee;
  color: #1e6b34;
}

.field-badge--unset {
  background: #fff8e6;
  color: #8a6d1a;
}

.field-badge--pending {
  background: #eef0f3;
  color: var(--text-muted);
}

.btn .field-badge,
.topbar__item .field-badge {
  margin-left: 6px;
}

.settings-field__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-field__row input[type="password"],
.settings-field__row input[type="text"] {
  flex: 1;
}

.settings-field__reveal {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.settings-field__reveal input {
  cursor: pointer;
}

/* ---------- SP-APIテスト結果（OK/NG） ---------- */
.spapi-test-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.status-pill--ok {
  background: #eaf7ee;
  color: #1e6b34;
}

.status-pill--ng {
  background: #fdecec;
  color: #8a1c1f;
}

/* ---------- 出荷トップ 追加要素（現在の設定・進捗バー・注文リスト等） ---------- */

.current-settings-line,
.status-line {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 14px;
}

.card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card__header-row h2 { margin: 0; }

.progress-status-text {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.progress-status-text--done {
  color: #1e6b34;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.order-list-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}

.order-list-summary__main {
  min-width: 200px;
}

.order-list-summary__big {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}

.concurrent-orders-line {
  font-size: 13px;
  color: var(--text-muted);
}

.ship-method-summary {
  flex: 1 1 260px;
}

.ship-method-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ship-method-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* 2026-09-13: 本番システムの操作動画で実際に確認した表示は、バッジ状の
   区切りではなく「ゆうメール: 7件（設定:print） / ゆうパケット: 0件
   （設定:print） / レターパック: 0件」という単純な1行のテキストだった。 */
.ship-method-breakdown {
  margin: 8px 0 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.method-edit-panel {
  margin-top: 16px;
}

.method-edit-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.method-edit-overall {
  font-size: 13px;
  color: var(--text-muted);
}

.method-edit-toolbar__actions {
  display: flex;
  gap: 8px;
}

/* 2026-09-13: 本番システム(picking.php)を直接確認した結果、下部の操作バーは
   ページ内の単純な繰り返し表示ではなく、実際に`position:fixed;bottom:0`の
   追従バー（.stickyBar、画面を開くと常時表示）だったため、それに合わせる。 */
.method-edit-toolbar--bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  margin: 0;
  padding: 10px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}

.method-edit-panel {
  /* 下部の追従バーに最後の行が隠れないように余白を確保する。 */
  padding-bottom: 64px;
}

.method-edit-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--panel);
}

/* 2026-09-29追加: 「複数同時注文」の同梱表示（PROJECT_STATUS.md§63・§66）。
   実機の発送方法編集一覧では、同梱行の先頭に色付きのバッジで
   「同梱#N」と表示される（動画で確認済み）。 */
.bundle-label {
  display: inline-block;
  color: #c00;
  border: 1px solid #c00;
  border-radius: 10px;
  padding: 0 8px;
  font-size: 0.85em;
  font-weight: 700;
  margin-bottom: 2px;
}

.method-edit-undo-bundle {
  margin-top: 6px;
  font-size: 0.85em;
}

.bundle-confirm-order {
  margin-bottom: 14px;
}

.bundle-confirm-order--combined .bundle-item-service {
  color: var(--muted, #777);
}

.method-edit-group__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 8px;
  font-size: 16px;
}

/* 2026-09-30、ユーザー指摘（除外チェックが発送方法とかぶる）を調査した
   結果、実機`shipping/picking.php`は`table-layout: fixed`ではなく
   **`table-layout: auto`**（ブラウザ標準のコンテンツに応じた自動列幅）
   だったと判明した（`getComputedStyle(table).tableLayout === "auto"`を
   実機で確認）。以前のセッションで`table-layout:fixed`＋固定px列幅
   （発送方法160px等）を採用したのは、その時点で横スクロールを解消する
   ための対症療法だったが、実際には発送方法セレクトの内容幅（実機では
   230px前後、オプション文言依存）に対して列幅が狭すぎ、セレクトが
   隣の「除外☑」列へ視覚的にはみ出して重なる不具合の原因になっていた。
   実機と同じ`table-layout: auto`に戻し、各列の幅はコンテンツに応じて
   自動決定させることで、実機と同じ表示・実機と同じくレイアウト崩れが
   起きない構造にした。PROJECT_STATUS.md§68参照。 */
.method-edit-table {
  font-size: 10.5px;
  white-space: normal;
}

.method-edit-table th {
  font-size: 12px;
}

.method-edit-table th,
.method-edit-table td {
  padding: 8px;
}

.method-edit-table .small {
  font-size: 12px;
  color: #666;
  line-height: normal;
  margin: 0;
}

.method-edit-group__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
}

.method-edit-group__totals {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
  margin-left: auto;
}

.method-edit-table td {
  vertical-align: top;
}

.method-edit-table .checkCell {
  text-align: center;
}

.method-edit-service-select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.delivery-slip-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.delivery-slip-row__action {
  text-align: right;
}

.label-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  margin: 12px 0;
}

.label-controls select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tracking-header {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tracking-header__csv {
  min-width: 280px;
}

.tracking-unsaved-line {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.tracking-group {
  margin-bottom: 18px;
}

.tracking-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tracking-group__header h3 {
  margin: 0;
  font-size: 14px;
}

.tracking-manage-no {
  font-family: "Consolas", monospace;
  color: var(--text-muted);
  white-space: nowrap;
}

.tracking-input {
  width: 100%;
  min-width: 160px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: "Consolas", monospace;
}

.notification-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.notification-row__send {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-sending-line {
  font-size: 13px;
  color: var(--text-muted);
}

.notification-row__download {
  text-align: right;
}

.notification-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.listing-detail-upload {
  margin-top: 16px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.listing-detail-upload summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}

.settings-form--wide {
  max-width: 640px;
}

.settings-fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 12px;
  margin: 0;
}

.settings-fieldset legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}

.btn--danger:hover { background: #b32d31; }

.topbar__sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 8px 4px;
}

.topbar__item--end {
  margin-left: auto;
}

/* ============================================================
   スマートフォン対応（レスポンシブ）
   2026-09-18追記: PCのレイアウト・機能・処理仕様はそのまま維持し、
   画面幅が狭い場合のみレイアウトを縦積み・操作しやすい形に切り替える。
   新機能の追加・計算/処理ロジックの変更は行わない。
   ============================================================ */

/* モバイル用ヘッダー（ハンバーガーメニュー）。PC幅では非表示。 */
.mobile-topbar {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 700;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 10px 14px;
  }

  .mobile-topbar__title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-toggle {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .app {
    flex-direction: column;
    min-height: 0;
  }

  /* サイドバーは通常は画面外に収納し、ハンバーガー操作で引き出す */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    max-width: 300px;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
  }

  .nav__item {
    padding: 13px 12px;
    font-size: 15px;
  }

  .main {
    padding: 16px;
    width: 100%;
  }

  .module__header h1 {
    font-size: 18px;
  }

  /* 上部タブメニュー: 折り返しつつタップしやすいサイズにする（横スクロール回避） */
  .topbar {
    gap: 2px 4px;
    margin-bottom: 16px;
  }

  .topbar__item {
    padding: 9px 10px;
    font-size: 13px;
  }

  .card {
    padding: 14px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
  }

  /* ボタン: タップ領域を広げる */
  .btn {
    padding: 11px 16px;
    font-size: 15px;
    min-height: 44px;
  }

  .spapi-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .spapi-actions .btn {
    width: 100%;
    text-align: center;
  }

  .import-form {
    flex-direction: column;
    align-items: stretch;
  }

  .import-form input[type="file"] {
    flex: 1 1 auto;
    width: 100%;
  }

  /* フォーム・入力欄: 画面幅いっぱいに使う */
  .settings-form,
  .settings-form--wide {
    max-width: 100%;
  }

  .settings-field__row {
    flex-wrap: wrap;
  }

  .settings-field__row input[type="password"],
  .settings-field__row input[type="text"] {
    min-width: 0;
  }

  /* 横並びの情報行を縦積みにする */
  .order-list-summary,
  .label-controls,
  .tracking-header,
  .notification-row,
  .delivery-slip-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .order-list-summary__main,
  .tracking-header__csv {
    min-width: 0;
    width: 100%;
  }

  .delivery-slip-row__action,
  .notification-row__download {
    text-align: left;
  }

  .notification-row__send {
    flex-wrap: wrap;
  }

  .notification-footer {
    justify-content: stretch;
  }

  .notification-footer .btn {
    width: 100%;
    text-align: center;
  }

  /* テーブル: 横スクロールで内容を確認できるようにする（表の仕様自体は変更しない） */
  .order-table {
    font-size: 12.5px;
  }

  .order-table th,
  .order-table td {
    padding: 8px 8px;
  }

  /* thead の position:sticky はモバイル用ヘッダーと競合しうるため無効化する */
  .order-table thead th {
    position: static;
  }

  .method-edit-group__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .method-edit-group__totals {
    margin-left: 0;
  }

  .method-edit-service-select {
    max-width: 100%;
  }

  /* method_edit.html の下部固定バー: 折り返し時に隠れないよう余白を広げる */
  .method-edit-toolbar--bottom {
    flex-wrap: wrap;
    gap: 8px;
  }

  .method-edit-toolbar--bottom .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .method-edit-panel {
    padding-bottom: 150px;
  }

  .wrap-page {
    padding: 16px 16px 160px;
  }
}

/* ============================================================
   カメラバーコードスキャナー（2026-09-20新規実装）
   ============================================================ */
.barcode-scanner-panel[hidden] {
  display: none;
}
.barcode-scanner-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barcode-scanner-panel__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#barcode-scanner-video {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.barcode-scanner-panel__status {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.barcode-scanner-panel__status.is-error {
  background: rgba(176, 0, 32, 0.85);
}

.barcode-scanner-panel__last-code {
  position: absolute;
  bottom: 76px;
  left: 16px;
  right: 16px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.barcode-scanner-panel__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.55);
}

.barcode-scanner-panel__actions .btn {
  flex: 1 1 auto;
  text-align: center;
}

/* ==================================================================
   TOPメニュー（共通設定）ダッシュボード専用ダークテーマ
   2026-09-30、実機top.phpを直接計測して発見: このページ（および
   system_config.php等の他ページも背景だけは同様）は、他モジュール
   （出荷等の白いカード）とは異なる専用ダーク・グラデーション配色
   （html背景色rgb(11,18,32)＋2つのradial-gradient、カードは
   rgba(255,255,255,0.08)の半透明・文字色rgb(233,248,242)）を使っている。
   #module-topにのみスコープし、他モジュールのカード配色には影響しない。
   PROJECT_STATUS.md§69参照。
   ※実機側で「左サイドバーの新規追加」等、本セッション中にさらに大きな
   構造変化も発見したため（同ドキュメント参照）、このダークテーマも
   含めた全体の優先順位はユーザー確認待ち。
   ================================================================== */
#module-top .card h2 {
  font-size: 14px;
  margin: 0 0 10px;
}

#module-top .top-line {
  margin: 0;
}

#module-top .top-muted {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

#module-top .top-tile-todo {
  display: block;
  margin-top: 4px;
  color: #b45309;
  font-size: 11px;
}

/* 実機の.tiles（.tile-icon 46px角丸ボックス＋タイトル/説明の横並びカード
   グリッド）。mode-2=2カラム、mode-3=3カラム（実機で確認済みの列数）。
   2026-10-11、配色は全画面共通のルール（薄いグレーの背景・白いカード）に統一。 */
#module-top .tiles {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

#module-top .tiles.mode-2 {
  grid-template-columns: 1fr 1fr;
}

#module-top .tiles.mode-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

#module-top .tile {
  display: block;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

#module-top .tile:hover {
  background: #f8fafc;
  border-color: #c7d2fe;
}

#module-top .tile-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#module-top .tile-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eef2ff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
}

#module-top .tile-icon svg {
  width: 26px;
  height: 26px;
}

#module-top .tile-inner > div:not(.tile-icon) {
  font-size: 15px;
  line-height: 1.5;
}

#module-top .tile-desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

/* 実機の.maint-grid（「稼働状況のリセット」カード）。2カラム。 */
#module-top .maint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}

#module-top .maint-box {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
}

#module-top .maint-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

#module-top .maint-actions {
  margin-top: 10px;
}

#module-top .btn-subtle {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

#module-top .btn-subtle:hover {
  background: #f1f5f9;
}

@media (max-width: 720px) {
  #module-top .tiles.mode-2,
  #module-top .tiles.mode-3 {
    grid-template-columns: 1fr;
  }

  #module-top .maint-grid {
    grid-template-columns: 1fr;
  }
}
/* 仕入れ「複数検索」のクイック設定（実機の折りたたみ<details>相当）。
   2026-09-30新規追加、同日実機計測値に合わせて調整（詳細は下の
   #purchase-qc-details実機一致ブロック参照。PROJECT_STATUS.md§72・§73）。 */
#purchase-qc-summary::-webkit-details-marker,
#os-qc-summary::-webkit-details-marker {
  display: none;
}
#purchase-qc-details .qc-body hr, #os-qc-details .qc-body hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ==================================================================
   仕入れモジュールの「複数検索」「OCR仕入」タブの見た目調整。
   2026-09-30、実機purchase/search.php・purchase/p2j/を生DOM計測した結果、
   この2ページは出荷モジュール（.card = 白背景・角丸12px等）とも、
   仕入れモジュール内の他ページ（purchase/settings.php等は白背景・角丸
   10px・padding16pxで、むしろ出荷寄り）とも異なる配色・寸法（カード背景
   #f7f7f7・角丸8px・border 1px solid #ddd・padding 24px、ボタンは
   Bootstrap既定風の#007bff/角丸4px、テーブルはヘッダー網掛け無し・
   罫線#eee、削除×は透明円形ボタン等）を共通して使っていることを確認した。
   **仕入れモジュール全体で統一されたデザインではなく、実機のPHPページ単位
   でデザインが異なる**ため、最初に`[data-panel-group="purchase"]`全体へ
   広げたのは誤りだった（settings.php等の白背景ページまで灰色化してしまう
   ため）。この2タブ（#purchase-panel-search・#purchase-panel-ocr）のみに
   スコープし直した。ユーザー指示「複数検索のすべての機能・見た目を完全
   再現・すべて一致してください」「仕入れモジュールを引き続き」を受けての
   追加調査。PROJECT_STATUS.md§73・§74参照。
   ================================================================== */
#purchase-panel-search .card,
#purchase-panel-ocr .card {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
}

#purchase-panel-search h2,
#purchase-panel-ocr h2 {
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

#purchase-panel-search .queue-header h2,
#purchase-panel-other-store .queue-header h2 {
  font-size: 18.4px;
}

#purchase-panel-search .barcode-scan-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #007bff;
  color: #fff;
  font-size: 20px;
  border: none;
  padding: 0;
  flex: none;
}

#purchase-panel-search label,
#purchase-panel-ocr label,
#os-qc-details label {
  font-size: 16px;
  color: #000;
  display: block;
}

#purchase-panel-search .hint-text,
#purchase-panel-ocr .hint-text,
#purchase-panel-search .module__desc,
#purchase-panel-ocr .module__desc {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 16px 0;
}

#purchase-panel-search input[type="text"],
#purchase-panel-ocr input[type="text"],
#purchase-panel-search input[type="number"],
#purchase-panel-ocr input[type="number"],
#purchase-panel-search textarea,
#purchase-panel-ocr textarea,
#os-qc-details input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #767676;
  border-radius: 0;
  font-size: 13.3333px;
}

#purchase-panel-search textarea {
  font-family: monospace;
  height: 160px;
}

#purchase-panel-search .btn,
#purchase-panel-ocr .btn,
#purchase-panel-search .btn--primary,
#purchase-panel-ocr .btn--primary {
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9.6px 19.2px;
  font-size: 13.3333px;
}

#purchase-panel-search .btn:hover,
#purchase-panel-ocr .btn:hover,
#purchase-panel-search .btn--primary:hover,
#purchase-panel-ocr .btn--primary:hover {
  background: #0069d9;
}

#purchase-panel-search #purchase-scan-button {
  margin-top: 16px;
}

/* バッチ一覧テーブル（実機計測: フォント14.4px・見出し網掛け無し・
   罫線#eee・パディング6.4px 8px）。 */
#purchase-scan-batch-table,
#os-batch-table {
  font-size: 14.4px;
}

#purchase-scan-batch-table th,
#os-batch-table th {
  font-weight: 700;
  text-align: left;
  padding: 6.4px 8px;
  background: transparent;
  border-bottom: 1px solid #eee;
}

#purchase-scan-batch-table td,
#os-batch-table td {
  padding: 6.4px 8px;
  border-bottom: 1px solid #eee;
}

/* 2026-09-30、この2つは`.btn`クラスも併せ持つため、直上の
   `#purchase-panel-search .btn`（詳細度0,2,0）より高い詳細度になるよう
   スコープ付きセレクタにして確実に上書きする。 */
#purchase-panel-search .purchase-scan-batch-delete,
#purchase-panel-other-store .purchase-scan-batch-delete {
  background: transparent;
  color: #666;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
}

#purchase-panel-search .purchase-scan-batch-delete:hover,
#purchase-panel-other-store .purchase-scan-batch-delete:hover {
  background: rgba(0, 0, 0, 0.08);
}

#purchase-panel-search .purchase-scan-batch-show,
#purchase-panel-other-store .purchase-scan-batch-show {
  background: #b91c1c;
  color: #fff;
  border: 1px solid #b91c1c;
  border-radius: 6px;
  font-size: 13.3333px;
  padding: 6px 12px;
}

#purchase-panel-search .purchase-scan-batch-show:hover,
#purchase-panel-other-store .purchase-scan-batch-show:hover {
  background: #a11818;
}
/* クイック設定（折りたたみ<details>）。実機は絶対配置のドロップダウンでは
   なく、その場でインライン展開（position:static）だったため合わせた。
   2026-10-06追記（§120）。実機を直接計測した結果、この<details>自体には
   width指定が一切無く（cssRulesで確認、widthプロパティは空）、親
   `.queue-header`がdisplay:flexのため、幅はflexアイテムのデフォルトで
   コンテンツにシュリンクラップ（fit-content相当）していた（実測
   339.438px＝summary「242円均一、BO優先、10％オフ｜古本(基本設定)▼」が
   1行に収まる幅）。本機は固定`width:280px`を指定していたため、同じ
   文字列がこの幅に収まらず2行に折り返っていた。固定幅を外し実機と同じ
   シュリンクラップ挙動に合わせる。 */
#purchase-qc-details,
#os-qc-details {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  max-width: 100%;
}

#purchase-qc-summary,
#os-qc-summary {
  font-size: 14.72px;
  color: #000;
  padding: 5.6px 9.6px;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
}
#purchase-qc-details .qc-body, #os-qc-details .qc-body {
  position: static;
  width: auto;
  max-width: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 9.6px 12px 12.8px;
}
/* 2026-10-06追記（§120）。ユーザー指摘「開いた時も全く違うので実機に
   合わせてください。サイズもすべてです。」対応。従来はこのパネル内部を
   他の設定画面（環境設定等）と共通の`.settings-field`/`.settings-fieldset`
   （縦積み・フィールドセット枠線あり・大きめpadding）で組んでいたが、
   実機を直接DOM構造・computed styleで計測した結果、このクイック設定
   パネルだけは実機独自の`.row`（display:flex、横並び→幅が足りない時だけ
   折り返し）/`.radio-line`/`input.w4`（width:7ch固定の小さい入力欄）/
   `.actions`+`.btn-save`という、他の設定画面とは別の専用の詰めた
   レイアウトだった（全体幅335px・inputはw4で7ch固定、プロファイルの
   <select>だけ幅100%で単独の行に折り返る）。index.html側のマークアップを
   この専用クラスに合わせて書き換えた上で、ここに対応するCSSを追加する。 */
#purchase-qc-details .qc-body .row,
#os-qc-details .qc-body .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 9.6px;
  column-gap: 9.6px;
}
#purchase-qc-details .qc-body label.label, #purchase-qc-details .qc-body .row.full > label, #os-qc-details .qc-body label.label, #os-qc-details .qc-body .row.full > label {
  font-weight: 600;
  font-size: 14.72px;
  color: #000;
}
#purchase-qc-details .qc-body select.elevate-lb, #os-qc-details .qc-body select.elevate-lb {
  width: 100%;
  font-size: 13.3333px;
  padding: 5.6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
#purchase-qc-details .qc-body input.w4, #os-qc-details .qc-body input.w4 {
  width: 7ch;
  font-size: 13.3333px;
  padding: 5.6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#purchase-qc-details .qc-body .radio-line, #os-qc-details .qc-body .radio-line {
  display: flex;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  font-size: 14.72px;
  font-weight: 400;
}
#purchase-qc-details .qc-body .radio-line label, #os-qc-details .qc-body .radio-line label {
  font-weight: 400;
}
#purchase-qc-details .qc-body .actions, #os-qc-details .qc-body .actions {
  display: block;
}
#purchase-qc-details .qc-body .btn-save, #os-qc-details .qc-body .btn-save {
  font-size: 13.3333px;
  padding: 9.6px 19.2px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

/* 2026-10-04、ユーザー指示「仕入判定設定を元システムを確認し見た目・機能
   完全再現、妥協は認めません」を受けて実機を再調査し、§74・76の判断を
   訂正した（PROJECT_STATUS.md§89参照）。
   実際にcomputed styleを直接測定した結果:
   - ページ全体を囲む大枠の`.card`相当は無い（h1＋1個の<form>という
     §74・76の指摘自体は正しい）。
   - しかし各プロファイルは`.profile-block`というborder 1px #ddd・
     radius 8px・background #fafafa・padding 13px 16px・margin-bottom 16px
     を持つ実際のカード風divで区切られていた（「カード装飾が一切無い」は
     誤りだったため訂正）。
   - 5プロファイルは折りたたみ（<details>）されておらず常時全表示。
   - グループ見出しは`<fieldset><legend>`ではなく`.section-title`という
     素のdiv（太字のみ、背景・枠線無し）。
   - 基本設定・値下がり関連・FBA設定は<table><tr><th>ラベル</th><td>
     入力</td></tr>の表形式。
   - ランク→日数/ROI対応表は実際に5列×5行の<table class="compact-table">
     （ポイント1〜5が横に並ぶグリッド）。 */
#purchase-panel-judge-settings .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 2026-10-04追加。ユーザー指摘「横に長くないですか？」を受け、実機
   purchase/judge_settings_edit.phpの実際の幅をgetBoundingClientRect()で
   直接測定した（body max-width:1100px、サイドバー240px、メイン
   コンテンツ812px）。本システムのサイドバーは既に240pxで一致していた
   ため、このタブのメインコンテンツ幅を実測値に合わせて820pxに制限する。
   ※この値は`purchase/judge_settings_edit.php`固有の実測値であり、他の
   実機ページ（例: purchase/search.phpは1600px）とは異なる。今後も
   モジュール・タブごとに実機の実際の幅を測定し、その値をそのまま適用する
   こと（ページごとに幅が異なることを前提とし、1つの値を全体に流用しない）。
   PROJECT_STATUS.md§90参照。 */
#purchase-panel-judge-settings {
  max-width: 820px;
  margin: 0 auto;
}

/* 2026-10-04追加。実機の「保存する」ボタンは、実際にcomputed styleを
   測定した結果、position:fixed; bottom:12px; left:270px; z-index:1000;
   background:#007bff（スクロールしても常に左下に表示され続ける）
   ことを確認した。本システムのサイドバー幅は実機と同じ240pxのため、
   同じleft:270pxをそのまま適用する。PROJECT_STATUS.md§91参照。 */
#purchase-judge-save-button {
  position: fixed;
  bottom: 12px;
  left: 270px;
  z-index: 1000;
}

/* 2026-10-04追加（§99）。display:flex等をinline styleからここへ移した
   （index.html側のコメント参照）。:not([hidden])にすることで、JSが
   hidden属性をtrueにした時にブラウザ標準の[hidden]{display:none}が
   正しく効くようにする（inline styleはCSS仕様上[hidden]より優先され、
   JSでhidden=trueにしても実際には隠れなくなってしまうため）。 */
#purchase-scan-detail-buyback-area:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 2026-10-10修正。「BKrate推移を見る」を実機のCSS（search.php）と同じ見た目にした
   （濃色の丸ボタン・黒背景のグラフ枠・グラフの高さ230px）。 */
.krt-bkrate-box { margin-top: 8px; }
.krt-bkrate-btn {
  display: inline-block; padding: 6px 10px; border: 0; border-radius: 999px;
  background: #0b1220; color: #fff; font-weight: 700; font-size: 12px; cursor: pointer;
}
.krt-bkrate-btn:hover { background: #1d4ed8; }
.krt-bkrate-status { margin-top: 6px; font-size: 12px; color: #666; }
.krt-bkrate-chart { margin-top: 8px; padding: 10px; border-radius: 10px; background: #111418; }
.krt-bkrate-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.krt-bkrate-head button {
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08);
  color: #e9f8f2; padding: 4px 8px; font-size: 12px; cursor: pointer;
  margin: 16px 0 0; font-family: Arial, sans-serif; line-height: normal;
}
.krt-bkrate-head button.active { background: rgba(110,168,255,.32); }
/* #purchase-panel-search label（16px・黒・block）より強く指定する */
#purchase-panel-search .krt-bkrate-chart .krt-bkrate-toggle,
.krt-bkrate-chart .krt-bkrate-toggle { margin-left: 6px; color: #e9f8f2; font-size: 12px; display: inline; }
.krt-bkrate-chart { white-space: normal; line-height: normal; }
.krt-bkrate-canvas-wrap { height: 230px; position: relative; }

#purchase-judge-profiles .wt_txt {
  font-weight: 700;
  margin: 0 0 14px;
}

#purchase-judge-profiles .profile-block {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 16px;
  margin-bottom: 16px;
}

#purchase-judge-profiles .profile-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

#purchase-judge-profiles .profile-header h2 {
  margin: 0;
  font-size: 16px;
}

#purchase-judge-profiles .section-title {
  font-weight: 700;
  margin: 10px 0 5px;
}

#purchase-judge-profiles .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 4px;
}

#purchase-judge-profiles table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

#purchase-judge-profiles table th {
  text-align: left;
  vertical-align: middle;
  padding: 4px 5px;
  font-weight: normal;
  white-space: nowrap;
}

#purchase-judge-profiles table td {
  padding: 4px 5px;
}

/* 2026-10-04、実機を直接スクリーンショットで確認した結果、%と円の2つの
   入力欄は横並びではなく縦に2行で表示されていたため、display:blockに
   修正した（PROJECT_STATUS.md§89参照）。 */
#purchase-judge-profiles .inline {
  display: block;
  white-space: nowrap;
}

#purchase-judge-profiles .table-scroll {
  overflow-x: auto;
}

#purchase-judge-profiles .compact-table th,
#purchase-judge-profiles .compact-table td {
  text-align: center;
  padding: 3px;
}

#purchase-judge-profiles input[type="number"] {
  width: 70px;
}

#purchase-panel-judge-settings .judge-profile-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}

/* 2026-10-01、実機listing/restricted_brands.phpも同様にカード装飾が無い
   フラットな構造だったため、同じ方針で透明化した。PROJECT_STATUS.md§77
   参照。 */
#listing-panel-restricted .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 2026-10-01、実機price/pricing_config_edit.phpも同様にカード装飾の無い
   フラットな構造だったため、同じ方針で透明化した（price/top.php＝
   ダッシュボードは逆に実機も`.pt-card`という白背景・角丸12px・
   border #e5e7ebのカード風要素を持っており、本システムの既存`.card`
   （白背景・角丸相当）に近いため、そちらは変更していない）。
   PROJECT_STATUS.md§78参照。 */
#price-panel-settings .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 実機price/preview_pricing_debug.phpも`.card`要素を持たないデバッグ
   ツール的な生の画面だったため、同じ方針で透明化した。 */
#price-panel-preview .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 2026-10-05追加（§115）。複数検索の結果カード（.krt-item）のタイポ
   グラフィを実機と完全一致させる。ユーザー指摘「字の太さがまだ違う。
   文字は均一ではありません」を受けて、実機を`getComputedStyle`で
   要素ごとに直接計測し直した結果に基づく（PROJECT_STATUS.md§115参照）。
   クラス名も実機のまま流用している。 */
/* 2026-10-06追記（§120）。ユーザー指摘「結果表示画面の行間がまだ広く
   実機と本機で差があります」対応。実際には§68（配送モジュール）で既に
   発見済みだった同一原因が、仕入れモジュールには未適用のまま残っていた
   バグだった：実機はfont-family指定がシンプル（system-ui, -apple-system,
   "Segoe UI", sans-serif）でCJKフォントを明示せずOSフォールバックに
   任せているが、本機の`html,body`は"Yu Gothic"/Meiryo等を明示していた
   ため、日本語グリフがこれらにフォールバックし、同じfont-size・
   line-height:normalでも行の高さが変わっていた（実機計測:
   `.krt-line.krt-mono`の高さ18px、本機は同条件で24px、フォント以外の
   padding/margin/borderは双方0で一致済みのため、差はfont-familyのみに
   起因すると確認済み）。.shipping-panelと同じ実機フォントへ、仕入れ結果
   カードの範囲にも合わせる。 */
#purchase-panel-search,
#purchase-panel-other-store {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.krt-head { font-weight: 600; }
.krt-warn { color: #dd0000; font-weight: 800; }
.krt-buy { color: #dd0000; font-weight: 800; }
.krt-line { font-size: 14.72px; color: #333; }
.krt-ge { color: #0066cc; font-weight: 700; }
.krt-rank-line { font-weight: 700; }
.krt-note { color: #555; font-size: 13.6px; }
.krt-muted { color: #777; font-size: 14.08px; }
.krt-ship-mode { color: #00f; }
/* 2026-10-06追加（§126）。仕入れ時点のAmazon出品制限リアルタイムチェック
   （本機独自機能、実機には存在しない）。実機再現の`.krt-warn`と見た目は
   揃える（赤・太字で警告として目立たせる）が、クラス名を分けて実機再現
   要素と明確に区別する。 */
.krt-warn-live { display: block; width: fit-content; color: #dd0000; font-weight: 800; border: 2px solid #dd0000; background: #fff1f1; border-radius: 6px; padding: 2px 10px; margin: 2px 0 4px; line-height: 1.5; } /* 文字の長さに合わせる（2026-10-11） */
/* 2026-10-05追加（§116）。ユーザー指摘「『見送り』は実機にはない項目
   です」を受けて実機を再調査した結果、「見送り」という文言・ラベル
   自体が実機に存在しないと確認できた（買い判定に届かない場合、
   【】のラベルごと空欄になるだけ）。計算式行の記号が「≧」から「＜」
   （実機で直接計測：色#dd0000・太さ700）に変わる点だけを再現する。
   PROJECT_STATUS.md§116参照。 */
.krt-lt { color: #dd0000; font-weight: 700; }

/* 2026-10-10追加。結果カードを実機のHTML構造（.krt-item・<br>区切り）に合わせたため、
   実機の結果画面のCSS（.krt-item/.krt-img/.krt-offers/.krt-links/br.br-tight）を
   同じ値で入れる。 */
.krt-item { padding: 6.4px 3.2px 12.8px; border-bottom: 1px dashed #666; font-size: 16px; line-height: normal; color: #000; text-align: left; white-space: normal; }
#purchase-scan-tbody > tr > td { white-space: normal; }
.krt-note { margin: 13.6px 0; padding-left: 40px; }
.krt-head { margin-bottom: 3.2px; }
.krt-img { width: 72px; height: auto; object-fit: contain; margin-top: 4px; }
#purchase-panel-search .krt-bkrate-box > .krt-bkrate-btn { margin: 16px 0 0; }
.krt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.krt-offers { margin: 4px 0 2.4px; overflow-wrap: anywhere; }
.krt-links a { margin-right: 5.6px; text-decoration: none; border-bottom: 1px dotted #999; }
br.br-tight { display: block; margin: .25px 0; line-height: 0; }

/* ==================================================================
   仕入れ「複数検索」のスキャン結果一覧（メモ／件数／進捗／作成時刻／操作）。
   2026-10-07追加。ユーザー報告「スキャン結果一覧の表示に横スクロールがある
   ので横スクロールはなしで表示させてください。PCの表示は問題ないので
   そのままで大丈夫です」対応。PC幅は従来通り（横スクロール可能な
   ラッパー・1行表示）のまま、スマホ幅（900px以下）のみ、表を画面幅に
   収めて折り返す表示にする（作成時刻は日付・時刻の2行、メモは改行可）。
   ================================================================== */
.purchase-scan-batch-wrap {
  overflow-x: auto;
}

@media (max-width: 900px) {
  #purchase-panel-search .card {
    padding: 14px 12px;
  }

  .purchase-scan-batch-wrap {
    overflow-x: visible;
  }

  #purchase-scan-batch-table,
  #os-batch-table {
    white-space: normal;
    table-layout: fixed;
    width: 100%;
    font-size: 12px;
  }

  #purchase-scan-batch-table th,
  #os-batch-table th,
  #purchase-scan-batch-table td,
  #os-batch-table td {
    padding: 6px 4px;
    overflow-wrap: anywhere;
    vertical-align: middle;
  }

  /* 列幅: メモは残り幅すべて、他は内容に必要な最小限の固定幅 */
  #purchase-scan-batch-table th:nth-child(2),
  #os-batch-table th:nth-child(2),
  #purchase-scan-batch-table td:nth-child(2),
  #os-batch-table td:nth-child(2) {
    width: 52px;
    text-align: center;
  }

  #purchase-scan-batch-table th:nth-child(3),
  #os-batch-table th:nth-child(3),
  #purchase-scan-batch-table td:nth-child(3),
  #os-batch-table td:nth-child(3) {
    width: 42px;
    text-align: center;
  }

  #purchase-scan-batch-table th:nth-child(4),
  #os-batch-table th:nth-child(4),
  #purchase-scan-batch-table td:nth-child(4),
  #os-batch-table td:nth-child(4) {
    width: 74px;
  }

  #purchase-scan-batch-table th:nth-child(5),
  #os-batch-table th:nth-child(5),
  #purchase-scan-batch-table td:nth-child(5),
  #os-batch-table td:nth-child(5) {
    width: 72px;
  }

  #purchase-scan-batch-table .purchase-scan-batch-date,
  #os-batch-table .purchase-scan-batch-date,
  #purchase-scan-batch-table .purchase-scan-batch-time,
  #os-batch-table .purchase-scan-batch-time {
    display: block;
    white-space: nowrap;
  }

  #purchase-scan-batch-table .purchase-scan-batch-show,
  #os-batch-table .purchase-scan-batch-show {
    width: 100%;
    min-height: 36px;
    padding: 6px 4px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.3;
  }

  #purchase-scan-batch-table .purchase-scan-batch-delete,
  #os-batch-table .purchase-scan-batch-delete {
    min-height: 0;
    font-size: 12px;
  }
}

.purchase-scan-batch-processing {
  font-size: 11px;
  font-weight: normal;
  color: #007bff;
  white-space: nowrap;
}

/* 2026-10-07追加。仕入れ「複数検索」の実機要素の再現（実機を直接計測）:
   「本日 N スキャン」、「進行状況を更新」ボタン、進捗バー
   （.progress-bar: 高さ12px・背景#eee・角丸4px／中身#28a745）。 */
.purchase-today-scan-count {
  margin: 9.6px 0 10px;
  color: #333;
  font-weight: 700;
  font-size: 16px;
}

.purchase-refresh-queues-bar {
  position: sticky;
  top: 0;
  background: #f7f7f7;
  padding: 6.4px 0;
  z-index: 2;
}

.purchase-refresh-queues-button {
  background: rgb(108, 117, 125);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9.6px 19.2px;
  font-size: 13.33px;
  cursor: pointer;
}

.purchase-refresh-queues-button:disabled {
  opacity: 0.65;
  cursor: default;
}

.purchase-refresh-queues-msg {
  margin-left: 9.6px;
  color: #666;
  font-size: 14.4px;
}

.purchase-progress-bar {
  height: 12px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  min-width: 40px;
}

.purchase-progress-bar-inner {
  height: 12px;
  background: #28a745;
}

.purchase-progress-text {
  font-size: 12.8px;
}

/* ---------- 仕入れ候補（JAN監視リスト）2026-10-07 §128 ---------- */
.watch-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; }
.watch-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.watch-progress__bar { flex: 1 1 200px; height: 10px; background: #e5e7eb; border-radius: 5px; overflow: hidden; }
.watch-progress__fill { height: 100%; width: 0; background: #2563eb; transition: width 0.4s; }
.watch-actions, .watch-filter, .watch-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.watch-settings { margin-top: 10px; }
.watch-settings__grid { display: grid; gap: 6px; margin: 8px 0; }
.watch-import { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.watch-import textarea { width: 100%; box-sizing: border-box; }
.watch-filter input[type="search"] { flex: 1 1 160px; min-width: 0; }
.input-short { width: 5em; }
.watch-table-wrap { overflow-x: auto; }
.watch-table { width: 100%; border-collapse: collapse; }
.watch-table th, .watch-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.watch-table td:not(.watch-title) { white-space: nowrap; }
.watch-title a { word-break: break-word; }
@media (max-width: 900px) {
  .watch-table-wrap { overflow-x: visible; }
  .watch-table thead { display: none; }
  .watch-table, .watch-table tbody, .watch-table tr, .watch-table td { display: block; width: 100%; box-sizing: border-box; }
  .watch-table tr { border-bottom: 1px solid #d1d5db; padding: 6px 0; display: flex; flex-wrap: wrap; }
  .watch-table td { border: none; padding: 2px 6px; width: auto; }
  .watch-table td.watch-title { flex: 1 1 100%; }
  .watch-table td[data-label]::before { content: attr(data-label) " "; color: #6b7280; font-size: 0.85em; }
}

/* 2026-10-10追加。買取査定モードのカード（実機 buyback_view.php のCSSと同じ値）。 */
.krt-item.krt-positive { background: #fffbe6; border-left: 4px solid #f3d36b; }
.krt-dd { margin-top: 5.6px; }
.krt-dd > summary { cursor: pointer; user-select: none; background: #f3f3f3; border: 1px solid #ddd; padding: .35rem .5rem; border-radius: 6px; font-weight: 600; }
.krt-dd[open] > summary { background: #e9e9e9; }
.krt-dd-body { padding: .45rem .15rem .1rem; }
.krt-row { display: flex; gap: .6rem; align-items: flex-start; }
.krt-left { flex: 1 1 auto; min-width: 240px; }
.krt-right { flex: 0 0 240px; margin-left: auto; text-align: right; }
.krt-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; margin-top: .15rem; }
.krt-ctl label { font-weight: 700; }
.krt-ctl input[type="text"] { width: 170px; font-size: 1.05rem; padding: .35rem .5rem; border: 1px solid #bbb; border-radius: 8px; text-align: right; }
.krt-ctl .krt-exc { font-size: 1.02rem; font-weight: 700; }
@media (max-width: 640px) {
  .krt-row { flex-direction: column; gap: .4rem; }
  .krt-left { min-width: 0; width: 100%; }
  .krt-right { flex: 0 0 auto; width: 100%; margin-left: 0; text-align: right; }
  .krt-ctl { width: 100%; align-items: flex-end; }
  .krt-ctl input[type="text"] { width: min(220px, 70vw); max-width: 100%; }
  .krt-ctl .krt-exc { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
}

/* 2026-10-10追加。他書店仕入れ（本機独自機能）。スマホでも片手で入力しやすいよう大きめ。 */
.os-card { max-width: 760px; }
.os-form { display: grid; gap: 10px; margin: 10px 0 14px; }
.os-field { display: grid; gap: 4px; font-weight: 700; }
.os-field input { font-size: 18px; padding: 8px 10px; border: 1px solid #bbb; border-radius: 8px; width: 100%; box-sizing: border-box; }
.os-price-wrap { display: flex; align-items: center; gap: 6px; }
.os-price-wrap input { max-width: 200px; }
.os-price-wrap #os-add { white-space: nowrap; flex: none; margin-left: 6px; }
.os-current { font-size: 14px; color: #333; }
.os-msg { min-height: 1.4em; font-size: 14px; font-weight: 700; }
.os-listhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 8px 0; }
.os-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.os-tablewrap { overflow-x: auto; }
.os-table td, .os-table th { white-space: nowrap; }
.os-table .os-code { font-family: monospace; }
.os-table .os-price-edit { width: 90px; text-align: right; }
.os-table tr.os-shelf td { background: #e8f6ea; text-align: center; font-weight: 700; }
.os-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.os-presets button { font-size: 17px; font-weight: 700; padding: 10px 14px; min-width: 76px; border: 1px solid #2563eb; color: #1d4ed8; background: #eff6ff; border-radius: 10px; cursor: pointer; }
.os-presets button:active { background: #dbeafe; }
.os-preset-edit summary { cursor: pointer; font-size: 13px; color: #374151; }
.os-preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.os-preset-chips span { display: inline-flex; align-items: center; gap: 4px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 999px; padding: 4px 6px 4px 10px; font-weight: 700; }
.os-preset-chips button { border: none; background: #ef4444; color: #fff; border-radius: 999px; width: 22px; height: 22px; line-height: 22px; padding: 0; cursor: pointer; }
.os-preset-add { display: flex; align-items: center; gap: 6px; }
.os-preset-add input { width: 120px; font-size: 16px; padding: 6px 8px; }

.os-preset-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-presets.editing button { border-color: #dc2626; color: #b91c1c; background: #fef2f2; }
.os-presets.editing button b { margin-left: 2px; }
.os-preset-add[hidden] { display: none; }
/* 他書店仕入れの設定カードは項目が少ないため、幅を複数検索の設定カード（実測304px）に揃える。 */
#os-qc-details { min-width: 304px; max-width: 100%; box-sizing: border-box; }

/* ==================================================================
   出品作業（キュー）。2026-10-11、実機 listing/index.php のページ内スタイルを
   そのまま移植（.lq-page の中だけに効くよう範囲を限定）。PROJECT_STATUS.md §147。
   2026-10-11、配色は全画面共通のルール（薄いグレーの背景・白いカード）に統一（ファイル末尾）。
   ================================================================== */


.lq-page { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; font-size: 16px; color: #111827; }
.lq-page .wrap { max-width: 1600px; margin: 0 auto; padding: 16px; }
.lq-page .card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.lq-page .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.lq-page label { font-size: 12px; color: #374151; display: block; margin-bottom: 6px; font-weight: normal; }
.lq-page input, .lq-page select, .lq-page textarea, .lq-page button { font: inherit; }
.lq-page input[type="text"], .lq-page input[type="number"], .lq-page select, .lq-page textarea {
  border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 38px; color: #111827;
}
.lq-page textarea { min-height: 54px; resize: vertical; }
.lq-page button { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 12px; background: #fff; cursor: pointer; color: #111827; }
.lq-page button.primary { background: #111827; color: #fff; border-color: #111827; }
.lq-page button.danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.lq-page button:disabled { opacity: .5; cursor: not-allowed; }
.lq-page .locked { opacity: .85; }
.lq-page #sessionCard { background: #f9fafb; }
.lq-page #sessionCard.locked { background: #eef2f7; border-color: #d1d5db; }
.lq-page #sessionCard.locked input, .lq-page #sessionCard.locked select, .lq-page #sessionCard.locked textarea { background: #e5e7eb; color: #111827; }
.lq-page #sessionCard:not(.locked) input, .lq-page #sessionCard:not(.locked) select, .lq-page #sessionCard:not(.locked) textarea { background: #fff; }
.lq-page .hint { font-size: 12px; color: #6b7280; }
.lq-page .badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; }
.lq-page .queueArea { display: block; gap: 12px; }
.lq-page .queueMain { flex: 1; min-width: 0; }
.lq-page .tableWrap { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.lq-page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lq-page th, .lq-page td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.lq-page th { font-size: 12px; color: #374151; text-align: left; white-space: nowrap; font-weight: bold; background: transparent; }
.lq-page td { color: #111827; }
.lq-page .img { width: 44px; height: 44px; border-radius: 8px; background: #f3f4f6; object-fit: cover; }
.lq-page .titleCell { max-width: 360px; }
.lq-page .titleCell .t { line-height: 1.25; }
.lq-page .titleCell .t.multi { color: #b91c1c; font-weight: 600; cursor: pointer; }
.lq-page .small { font-size: 12px; color: #6b7280; }
.lq-page .edit { width: 100%; box-sizing: border-box; }
.lq-page .qty0 { background: #fee2e2 !important; }
.lq-page .bg-missing { background: #f3f4f6; }
.lq-page .bg-restrict { background: #ffe4e6; }
.lq-page .bg-dup { background: #e0f2fe; }
.lq-page .bg-unresolved { background: #f3e8ff; }
.lq-page .thickSep td { border-bottom: 3px solid #9ca3af; }
.lq-page .stickyBottom {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(10, 16, 28, .55); border-top: 1px solid rgba(255, 255, 255, .12); padding: 10px 14px;
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); z-index: 999;
}
.lq-page .stickyBottom .inner { max-width: 1400px; margin: 0 auto; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.lq-page .toast { position: fixed; right: 14px; top: 70px; z-index: 99999; background: #111827; color: #fff; padding: 10px 12px; border-radius: 10px; display: none; }
.lq-page .scrollBody { max-height: 58vh; overflow: auto; position: relative; }
.lq-page #queueTable thead th { position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 #e5e7eb; background: #f9fafb; }
.lq-page .tableToolbar { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 10px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.lq-page .tableToolbar button { padding: 6px 10px; font-size: 12px; }
.lq-page .tableToolbar .toolLeft, .lq-page .tableToolbar .toolRight { display: flex; gap: 8px; align-items: center; }
.lq-page .modalOverlay { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.lq-page .modal { width: min(980px, 94vw); max-height: 80vh; overflow: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.lq-page .modalHead { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lq-page .modalTitle { font-weight: 700; }
.lq-page .modalBody { padding: 12px 14px; }
.lq-page .modalBody table { font-size: 13px; }
.lq-page .modalBody th { position: sticky; top: 0; background: #fff; z-index: 1; }
.lq-page .modalFoot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e5e7eb; padding: 12px 14px; display: flex; justify-content: flex-end; gap: 8px; }
.lq-page .btnSm { padding: 6px 10px; font-size: 12px; }
.lq-page .btnPick { background: #111827; color: #fff; border-color: #111827; }
.lq-page .btnClose { background: #fff; }
.lq-page .modalBody a { color: #1d4ed8; text-decoration: underline; }
.lq-page .modalBody a:hover { opacity: .85; }
.lq-page .queueHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lq-page .queueLegend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: #374151; }
.lq-page .legendItem { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .06); line-height: 1.2; white-space: nowrap; }
.lq-page .legendDone { background: #fff; border: 1px solid #d1d5db; color: #111827; }
.lq-page .legendTextMulti { background: #fff; color: #b91c1c; font-weight: 700; border: 1px solid #fecdd3; }
.lq-page .legendCritical { border-width: 1px; }
.lq-page .legendCritical.hasCount { border-width: 2px; border-color: #ef4444; }
.lq-page .legendCritical b { color: inherit; font-weight: 600; }
.lq-page .legendCritical.hasCount b { color: #b91c1c; font-weight: 800; }
.lq-page .sessionStack { display: flex; flex-direction: column; gap: 14px; }
.lq-page .field label { display: block; font-weight: 600; margin-bottom: 6px; }
.lq-page .twoCol { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: flex-start; }
.lq-page .twoCol > .field { flex: 0 0 320px; max-width: 520px; }
@media (max-width: 640px) {
  .lq-page .twoCol > .field { flex: 1 1 100%; max-width: 100%; }
}
.lq-page .displayOnlyText { padding: 2px 0; min-height: 22px; font-weight: 600; }
.lq-page .displayOnly { margin-top: 6px; padding: 8px 10px; background: #f9fafb; border-radius: 10px; min-height: 38px; box-sizing: border-box; }
.lq-page .actionsRow { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding-top: 6px; border-top: 1px solid #e5e7eb; }
.lq-page #sessionCard hr.sessionHr { display: block; border: 0; border-top: 1px solid #e5e7eb; margin: 10px 0; width: 100%; }
.lq-page .buybackRefWrap { display: none; margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.lq-page .buybackRefHead { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lq-page .buybackRefHead .hint { margin: 0; }
.lq-page .buybackRefBody { max-height: 240px; overflow: auto; }
.lq-page .buybackTbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lq-page .buybackTbl th, .lq-page .buybackTbl td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.lq-page .buybackTbl th { background: #fafafa; white-space: nowrap; }
.lq-page .buybackTbl td small { color: #6b7280; }
.lq-page .buybackChk { width: 34px; }
.lq-page .subRow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.lq-page .subRow .fieldBox { display: flex; flex-direction: column; gap: 6px; }
.lq-page .subRow .fieldBox label { margin-bottom: 0; }
@media (max-width: 720px) {
  .lq-page .scrollBody { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; max-height: 70vh; padding: 0 !important; }
  .lq-page .scrollBody table { width: max-content; min-width: 100%; border-collapse: collapse; }
  .lq-page .scrollBody th, .lq-page .scrollBody td { white-space: nowrap; }
  .lq-page .scrollWrap { position: relative; }
}
.lq-page .wt_txt { color: rgba(233, 248, 242, 1) !important; font-size: 18.72px; margin: 18.72px 0; font-weight: bold; }
.lq-page .dragCol { width: 34px; padding: 0 6px; }
.lq-page .dragHandle {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .9); color: #111; cursor: grab; user-select: none; touch-action: none;
}
.lq-page .dragHandle:active { cursor: grabbing; }
.lq-page .dragHandle::before { content: "≡"; font-size: 16px; line-height: 1; opacity: .85; }
.lq-page .sortable-ghost { opacity: .35; }
.lq-page .sortable-chosen { background: rgba(0, 0, 0, .03); }
.lq-page #queueTable input, .lq-page #queueTable textarea, .lq-page #queueTable select, .lq-page #queueTable button { touch-action: manipulation; }
.lq-page #seqInfo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; }
.lq-page #seqInfo .scanHead { font-weight: 800; font-size: 14px; color: #111827; }
.lq-page #seqInfo .scanGap { display: inline-block; width: 10px; }
.lq-page #seqInfo .seqLabel { font-size: 12px; color: #6b7280; opacity: .85; }
.lq-page #seqInfo .seqNum { font-size: 20px; font-weight: 900; margin-left: 6px; color: #111827; }
.lq-page #seqInfo .seqNum.milestone { font-size: 30px; color: #1d4ed8; }
.lq-page #barcodeLines.edit { width: 72ch; max-width: 100%; align-self: flex-start; }
.lq-page .isbnConvWrap { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-end; }
.lq-page .isbnConvToggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; cursor: pointer; font-size: 12px; }
.lq-page #isbnConvPanel { display: none !important; margin-top: 8px; padding: 10px; border: 1px dashed #d1d5db; border-radius: 10px; background: #fff; width: min(520px, 100%); margin-left: auto; }
.lq-page #isbnConvPanel.open { display: block !important; }
.lq-page .isbnConvInput { width: 100%; max-width: 240px; }
.lq-page .listing-scan-head-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 6px; }

/* 実機 listing/index.php 専用: 961〜1700px では左メニューをアイコンだけの細いバー（84px）にする
   （body.page-listing --krt-side-w:84px）。本機は出品作業タブを開いている間だけ同じにする。 */
@media (max-width: 1700px) and (min-width: 961px) {
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .sidebar { width: 84px; flex: 0 0 84px; padding: 10px 8px; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .sidebar__title,
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .nav__item .lbl,
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) #sidebar-username { display: none; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .sidebar__footer { padding: 8px 0 !important; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) #sidebar-logout-button { font-size: 11px; padding: 6px 2px; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .nav { gap: 8px; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .nav__item { height: 64px; border-radius: 12px; padding: 8px; justify-content: center; }
  .app:has(#module-listing:not([hidden]) #listing-panel-work:not([hidden])) .nav__item__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; }
}

@media (max-width: 900px) {
}

/* 発送方法編集「このリストだけ印刷」: 同時注文の一覧だけを印刷する（2026-10-11） */
@media print {
  body.print-bundle-only * { visibility: hidden; }
  body.print-bundle-only #bundle-confirm-area, body.print-bundle-only #bundle-confirm-area * { visibility: visible; }
  body.print-bundle-only #bundle-confirm-area { position: absolute; left: 0; top: 0; width: 100%; }
  body.print-bundle-only #bundle-confirm-area .bundle-print-button,
  body.print-bundle-only #bundle-confirm-area .bundle-confirm-button,
  body.print-bundle-only #bundle-confirm-area a.btn { display: none; }
}

/* 2026-10-11（ユーザー指示「縦線を実機どおりに」）。実機の上段メニューの区切りは
   メニューと同じ色・同じ大きさの全角文字「｜」（<hr>＋｜）。細い罫線では見えにくかったため、
   文字の「｜」で表示する。 */
.topbar__sep {
  width: auto;
  background: none;
  align-self: center;
  margin: 0 2px;
  color: inherit;
}
.topbar__sep::before {
  content: "｜";
  color: var(--text-muted);
  font-size: 15px;
}

/* ==================================================================
   出品制限（ブランド）。2026-10-11、実機 listing/restricted_brands.php のページ内スタイルを移植
   （.rb-page の中だけ）。表は横にはみ出さないよう、列幅を画面に合わせて折り返す
   （ユーザー指示「横スクロールをなくす」）。PROJECT_STATUS.md §148。
   ================================================================== */
.rb-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; color: #111827; }
.rb-page .wrap { max-width: 1600px; margin: 0 auto; padding: 16px; }
.rb-page button { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 12px; background: #fff; cursor: pointer; font: inherit; font-size: 13.33px; color: #111827; }
.rb-page button.info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rb-page button.danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.rb-page button:disabled { opacity: .5; cursor: not-allowed; }
.rb-page .hint { font-size: 12px; color: #6b7280; }
.rb-page .badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.rb-page .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rb-page .tableWrap { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.rb-page .scrollBody { max-height: 70vh; overflow-y: auto; overflow-x: hidden; position: relative; }
.rb-page table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.rb-page th, .rb-page td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; overflow-wrap: anywhere; }
.rb-page th { font-size: 12px; color: #374151; text-align: left; white-space: nowrap; font-weight: bold; }
.rb-page thead th { position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 0 #e5e7eb; }
.rb-page td { color: #111827; }
.rb-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rb-page .small { font-size: 12px; color: #6b7280; }
.rb-page .statusRed { color: #b91c1c; font-weight: 800; white-space: nowrap; }
.rb-page .statusBlue { color: #1d4ed8; font-weight: 800; white-space: nowrap; }
.rb-page .released { color: #1d4ed8; font-weight: 700; }
.rb-page .asins a { color: #1d4ed8; text-decoration: underline; }
.rb-page .asins a:hover { opacity: .85; }
.rb-page .wt_txt { color: rgba(233, 248, 242, 1) !important; font-size: 18.72px; font-weight: bold; }
.rb-page .infoCard { background: #f3f4f6; border: 1px solid #d7dbe2; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px 0; color: #222; }
.rb-page .infoCard .hint { color: #222; margin: 0 0 6px 0; }
.rb-page .infoCard .hint:last-child { margin-bottom: 0; }
.rb-page .checkCard { background: #f3f4f6; border: 1px solid #d7dbe2; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px 0; color: #222; }
.rb-page .checkCard h4 { margin: 0 0 8px 0; font-size: 15px; }
.rb-page .checkCard textarea { width: 100%; min-height: 140px; box-sizing: border-box; border: 1px solid #cfd6df; border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; background: #fff; color: #111827; }
.rb-page .checkCard .row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.rb-page .jobCard { background: #fff; border: 1px solid #d7dbe2; border-radius: 10px; padding: 12px 14px; margin: 12px 0 14px; color: #222; }
.rb-page .jobGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.rb-page .jobStat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; }
.rb-page .jobStat .k { font-size: 11px; color: #64748b; margin-bottom: 3px; }
.rb-page .jobStat .v { font-size: 18px; font-weight: 700; color: #0f172a; }
.rb-page .progressOuter { width: 100%; height: 14px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 8px 0 6px; }
.rb-page .progressInner { height: 100%; width: 0%; background: #2563eb; transition: width .25s ease; }
.rb-page .jobResults { margin-top: 10px; background: #0f172a; color: #e5e7eb; border-radius: 10px; padding: 10px 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.rb-page .muted { color: #64748b; font-size: 12px; }
.rb-page .jobLine { margin: 0 0 4px 0; white-space: pre-wrap; word-break: break-word; }
.rb-page .jobLine.is-restricted { color: #dc2626; font-weight: 700; }
.rb-page .tableToolbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.rb-page .tableToolbarLeft, .rb-page .tableToolbarRight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-page .presetBar { margin: 8px 0 10px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-page .presetChip { appearance: none; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 999px; padding: 6px 10px; font-size: 12px; line-height: 1; cursor: pointer; }
.rb-page .presetChip:hover { background: #eef2f7; }
@media (max-width: 720px) {
  .rb-page table, .rb-page thead, .rb-page tbody, .rb-page tr, .rb-page th, .rb-page td { display: block; width: auto !important; }
  .rb-page thead { display: none; }
  .rb-page tr { border-bottom: 1px solid #e5e7eb; padding: 6px 0; }
  .rb-page td { border-bottom: none; padding: 4px 10px; text-align: left !important; }
}

/* 出品モジュールの背景は全画面共通のルール（ファイル末尾）。 */

@media (max-width: 900px) {
}

/* ==================================================================
   出品済み一覧（バッチ）。2026-10-11、実機 listing/batches.php のページ内スタイルを移植
   （.lbt-page の中だけ）。PROJECT_STATUS.md §148。
   ================================================================== */
.lbt-page { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; font-size: 16px; color: #111827; }
.lbt-page .wrap { max-width: 1600px; margin: 0 auto; padding: 16px; }
.lbt-page .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.lbt-page .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.lbt-page label { font-size: 12px; color: #374151; display: block; margin-bottom: 6px; font-weight: normal; }
.lbt-page input, .lbt-page select, .lbt-page textarea, .lbt-page button { font: inherit; }
.lbt-page input[type="text"], .lbt-page input[type="date"], .lbt-page select, .lbt-page textarea { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 38px; color: #111827; }
.lbt-page textarea { min-height: 120px; resize: vertical; }
.lbt-page button { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 12px; background: #fff; cursor: pointer; color: #111827; }
.lbt-page button.primary { background: #111827; color: #fff; border-color: #111827; }
.lbt-page button.danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.lbt-page .hint { font-size: 12px; color: #6b7280; white-space: pre-wrap; }
.lbt-page .tableWrap { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.lbt-page .scrollBody { max-height: 68vh; overflow: auto; position: relative; }
.lbt-page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lbt-page th, .lbt-page td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.lbt-page th { font-size: 12px; color: #374151; text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 0 #e5e7eb; font-weight: bold; }
.lbt-page td { color: #111827; }
.lbt-page td.num { text-align: right; white-space: nowrap; }
.lbt-page .topbar { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.lbt-page .totals { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lbt-page .totals .box { background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.lbt-page .notice { padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; margin-bottom: 12px; }
.lbt-page .notice.ok { border-color: #bbf7d0; background: #f0fdf4; }
.lbt-page .notice.warn { border-color: #fde68a; background: #fffbeb; }
.lbt-page .notice.err { border-color: #fecdd3; background: #fff1f2; }
.lbt-page .btnX { width: 34px; height: 34px; line-height: 32px; text-align: center; padding: 0; border-radius: 10px; }
.lbt-page .wt_txt { color: rgba(233, 248, 242, 1) !important; }
.lbt-page a.btn-dl { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 6px; background: #2563eb; border: 1px solid #1d4ed8; color: #fff !important; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.lbt-page a.btn-dl:hover { filter: brightness(0.95); }

/* ==================================================================
   出品設定。2026-10-11、実機 listing/settings.php のページ内スタイルを移植（.lcf-page の中だけ）。
   PROJECT_STATUS.md §148。
   ================================================================== */
.lcf-page { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; font-size: 16px; color: #111827; }
.lcf-page .wrap { max-width: 1200px; margin: 0 auto; padding: 16px 16px 80px; }
.lcf-page .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.lcf-page h1 { font-size: 22px; margin: 18px 0 12px; letter-spacing: .06em; text-shadow: 0 10px 35px rgba(0, 0, 0, .55), 0 0 18px rgba(110, 168, 255, .25); }
.lcf-page h2 { font-size: 14px; margin: 18px 0 8px; color: #111827; }
.lcf-page label { font-size: 12px; color: #374151; display: block; margin-bottom: 6px; font-weight: normal; }
.lcf-page input, .lcf-page textarea, .lcf-page button { font: inherit; }
.lcf-page input[type="text"], .lcf-page input[type="number"], .lcf-page textarea { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 38px; width: 100%; box-sizing: border-box; color: #111827; }
.lcf-page textarea { min-height: 64px; resize: vertical; }
.lcf-page .row { display: flex; gap: 10px; flex-wrap: wrap; }
.lcf-page .col { flex: 1; min-width: 260px; }
.lcf-page button { border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 12px; background: #fff; cursor: pointer; color: #111827; }
.lcf-page button.primary { background: #111827; color: #fff; border-color: #111827; }
.lcf-page button.danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.lcf-page .small { font-size: 12px; color: #6b7280; }
.lcf-page .item { border: 1px solid #eef2f7; border-radius: 12px; padding: 10px; margin-top: 10px; background: #fff; }
.lcf-page .msg { padding: 10px; border-radius: 10px; margin-bottom: 10px; }
.lcf-page .ok { background: #ecfdf5; border: 1px solid #bbf7d0; color: #065f46; }
.lcf-page .ng { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }
.lcf-page .actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.lcf-page #resetBox { position: fixed; top: 76px; right: 12px; z-index: 1000; }
.lcf-page #resetBox button { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 13px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.lcf-page #resetBox button:hover { background: #ffedd5; }
.lcf-page .shortcut-group { border: 1px solid #e5e7eb; }
.lcf-page .groupHeader { cursor: pointer; padding: 8px 10px; background: #f3f4f6; border: 1px solid #9ca3af; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.lcf-page .groupHr { border: none; border-top: 1px solid #e5e7eb; margin: 8px 0; }
.lcf-page .toggleIcon { font-size: 12px; color: #374151; }
.lcf-page #saveBar { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffffee; border-top: 1px solid #e5e7eb; padding: 10px 16px; display: flex; justify-content: flex-end; z-index: 1000; }
.lcf-page #saveBar button { min-width: 140px; }
.lcf-page .wt_txt { color: rgba(233, 248, 242, 1) !important; }

/* ==================================================================
   キャンセル再出品管理。2026-10-11、実機 listing/canceled_relist.php のページ内スタイルを移植
   （.crl-page の中だけ）。PROJECT_STATUS.md §148。
   ================================================================== */
.crl-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; color: #111827; }
.crl-page .wrap { max-width: 1500px; margin: 0 auto; padding: 16px; }
.crl-page .card { background: #fff; border: 1px solid #dcdfe4; border-radius: 10px; padding: 16px; margin: 0 0 16px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.crl-page h1 { font-size: 22px; margin: 18px 0 12px; letter-spacing: .06em; }
.crl-page h2 { font-size: 18px; margin: 0 0 10px; color: #111827; }
.crl-page .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.crl-page .msg { padding: 10px 12px; border-radius: 8px; margin: 0 0 10px 0; }
.crl-page .ok { background: #ecfdf3; border: 1px solid #b7ebc6; }
.crl-page .err { background: #fff1f0; border: 1px solid #f3b3ad; }
.crl-page .btn { display: inline-block; border: 1px solid #c7ccd4; background: #fff; border-radius: 8px; padding: 9px 14px; font-size: 14px; cursor: pointer; text-decoration: none; color: #222; }
.crl-page .btn.primary { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.crl-page .btn.gray { background: #f3f4f6; }
.crl-page .btn.green { background: #e8fff1; border-color: #9ad0af; }
.crl-page .btn.warn { background: #fff7e6; border-color: #ffd591; }
.crl-page .small { font-size: 12px; color: #666; }
.crl-page .stat { min-width: 220px; padding: 10px 12px; background: #fafafa; border: 1px solid #ececec; border-radius: 8px; }
.crl-page .table-wrap { overflow: auto; }
.crl-page table { border-collapse: collapse; width: 100%; min-width: 1450px; background: #fff; }
.crl-page th, .crl-page td { border: 1px solid #e5e7eb; padding: 8px 10px; font-size: 13px; vertical-align: top; }
.crl-page th { background: #f9fafb; position: sticky; top: 0; z-index: 1; font-weight: bold; text-align: left; }
.crl-page textarea { width: 100%; min-height: 90px; padding: 8px; border: 1px solid #c7ccd4; border-radius: 8px; font: inherit; box-sizing: border-box; }
.crl-page input[type=text], .crl-page input[type=number] { padding: 8px; border: 1px solid #c7ccd4; border-radius: 8px; font: inherit; }
.crl-page label { font-size: 14px; color: #111827; font-weight: normal; }
.crl-page .nowrap { white-space: nowrap; }
.crl-page .note-box { max-width: 420px; max-height: 80px; overflow: auto; resize: both; white-space: pre-wrap; word-break: break-word; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; background: #fff; }
.crl-page .field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.crl-page .field.wide { min-width: 360px; flex: 1; }
.crl-page .invalid-sku { background: #fff1f0 !important; }
.crl-page .excluded-row { background: #f5f5f5; }
.crl-page .id-col { width: 52px; text-align: center; }
.crl-page .newsku-col { min-width: 240px; }
.crl-page .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #eef2ff; }
.crl-page .badge.excluded { background: #f3f4f6; color: #666; }
.crl-page .wt_txt { color: rgba(233, 248, 242, 1) !important; }
@media (max-width: 720px) {
  .crl-page .field.wide, .crl-page .field, .crl-page .stat { min-width: 0; flex: 1 1 100%; }
}


/* ==================================================================
   全画面共通のデザインルール（2026-10-11、ユーザー指示「色は白と薄いグレーで統一。
   価格改定・出荷トップが理想の形。見やすさにこだわる」）。
   - 画面の背景: 薄いグレー（--bg #f4f5f7）
   - カード: 白（#fff）・枠 #e2e5ea・角丸12px・ごく薄い影
   - 文字: 濃いグレー（--text #1f2430）、補足は --text-muted
   - 例外: 価格改定のログの窓（黒）はそのまま
   各画面に実機から移した配色（暗い背景・白文字の見出し・灰色のカード）はここで上書きする。
   ================================================================== */
.main .card,
#purchase-panel-search .card,
#purchase-panel-other-store .card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lq-page .wt_txt, .rb-page .wt_txt, .lbt-page .wt_txt, .lcf-page .wt_txt, .crl-page .wt_txt, .wt_txt {
  color: var(--text) !important;
  text-shadow: none !important;
}
.lcf-page h1, .crl-page h1 { text-shadow: none; }
.lq-page .card, .lq-page #sessionCard { background: #fff; }
.lq-page #sessionCard.locked { background: #f8fafc; }
.lq-page .stickyBottom {
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
}
.lq-page .queueLegend .legendItem { box-shadow: none; }


/* ==================================================================
   ツールTOPのタイルのアイコン。2026-10-11、実機 top.php のCSS図形・SVGマスクをそのまま移植。
   アイコンの箱は実機と同じく濃い色（白いカードの上で見やすいよう不透明の #334155）。
   ================================================================== */
#module-top .tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  position: relative;
  background: #334155;
  border: 1px solid #1e293b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 10px rgba(15,23,42,.18);
}#module-top .tile-icon::before,
#module-top .tile-icon::after {
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  color: rgba(233,248,242,.9);
}#module-top .icon-shipping-pattern::before {
  width: 22px;
  height: 2px;
  background: currentColor;
  top: 50%;
}#module-top .icon-shipping-pattern::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    -8px 0 0 currentColor,
     8px 0 0 currentColor;
  top: 50%;
}#module-top .icon-shipping-cost::before {
  width: 22px;
  height: 26px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)) 4px 7px / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 4px 12px / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 4px 17px / 10px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 4px 22px / 12px 2px no-repeat;
}#module-top .icon-shipping-cost::after {
  width: 10px;
  height: 6px;
  border: 2px solid rgba(255,255,255,.85);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  top: calc(50% - 16px);
  left: 50%;
  transform: translate(-50%, 0);
}#module-top .icon-shipping-config::before {
  width: 28px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) 18px 2px / 8px 10px no-repeat,
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) 0 0 / 0 0 no-repeat;
}#module-top .icon-shipping-config::after {
  width: 30px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -10%);
  background:
    radial-gradient(circle at 8px 13px, rgba(255,255,255,.9) 0 3px, transparent 3.5px),
    radial-gradient(circle at 22px 13px, rgba(255,255,255,.9) 0 3px, transparent 3.5px),
    linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) 0 16px / 30px 2px no-repeat;
}#module-top .icon-purchase-config::before {
  width: 24px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background:
    linear-gradient(135deg, transparent 48%, rgba(255,255,255,.6) 49% 51%, transparent 52%) 0 0 / 100% 100% no-repeat;
}#module-top .icon-purchase-config::after {
  width: 24px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 50% 2px / 2px 16px no-repeat,
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) 5px 9px / 14px 2px no-repeat;
  opacity: .9;
}#module-top .icon-other-001 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.38-.3-.61-.22l-2.49 1a7.2 7.2 0 0 0-1.69-.98l-.38-2.65A.5.5 0 0 0 14 1h-4a.5.5 0 0 0-.49.42l-.38 2.65c-.6.24-1.17.56-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.12.22-.07.49.12.64L4.57 11c-.04.32-.07.65-.07.98s.03.66.07.98L2.46 14.63c-.19.15-.24.42-.12.64l2 3.46c.12.22.38.3.61.22l2.49-1c.52.41 1.09.74 1.69.98l.38 2.65c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.38-2.65c.6-.24 1.17-.56 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64L19.43 12.98zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.38-.3-.61-.22l-2.49 1a7.2 7.2 0 0 0-1.69-.98l-.38-2.65A.5.5 0 0 0 14 1h-4a.5.5 0 0 0-.49.42l-.38 2.65c-.6.24-1.17.56-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.12.22-.07.49.12.64L4.57 11c-.04.32-.07.65-.07.98s.03.66.07.98L2.46 14.63c-.19.15-.24.42-.12.64l2 3.46c.12.22.38.3.61.22l2.49-1c.52.41 1.09.74 1.69.98l.38 2.65c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.38-2.65c.6-.24 1.17-.56 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64L19.43 12.98zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5z'/>\
</svg>");
}#module-top .icon-other-002 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M6 3h14v4H10v4h8v4h-8v6H6V3z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M6 3h14v4H10v4h8v4h-8v6H6V3z'/>\
</svg>");
}#module-top .icon-other-003 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M4 4h9c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4V4zm2 2v14h7V6H6z'/>\
<path fill='black' d='M16 6a7 7 0 1 1 0 12v-2a5 5 0 1 0 0-8V6z'/>\
<circle fill='black' cx='16' cy='12' r='1.5'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M4 4h9c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4V4zm2 2v14h7V6H6z'/>\
<path fill='black' d='M16 6a7 7 0 1 1 0 12v-2a5 5 0 1 0 0-8V6z'/>\
<circle fill='black' cx='16' cy='12' r='1.5'/>\
</svg>");
}#module-top .icon-other-004 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 3a7 7 0 0 1 5.65 11.12L5.88 6.35A6.98 6.98 0 0 1 12 5zm0 14a7 7 0 0 1-5.65-11.12l11.77 9.77A6.98 6.98 0 0 1 12 19z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 3a7 7 0 0 1 5.65 11.12L5.88 6.35A6.98 6.98 0 0 1 12 5zm0 14a7 7 0 0 1-5.65-11.12l11.77 9.77A6.98 6.98 0 0 1 12 19z'/>\
</svg>");
}#module-top .icon-other-005 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M4 9h7v2l-4.8 5H11v2H4v-2l4.8-5H4V9z'/>\
<path fill='black' d='M12 5h6v2l-3.8 4H18v2h-6v-2l3.8-4H12V5z'/>\
<path fill='black' d='M14 14h6v2l-3.8 4H20v2h-6v-2l3.8-4H14v-2z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M4 9h7v2l-4.8 5H11v2H4v-2l4.8-5H4V9z'/>\
<path fill='black' d='M12 5h6v2l-3.8 4H18v2h-6v-2l3.8-4H12V5z'/>\
<path fill='black' d='M14 14h6v2l-3.8 4H20v2h-6v-2l3.8-4H14v-2z'/>\
</svg>");
}#module-top .icon-other-006 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v10h-2V9zm4 0h2v10h-2V9z'/>\
<path fill='black' d='M6 7h12l-1 14H7L6 7z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v10h-2V9zm4 0h2v10h-2V9z'/>\
<path fill='black' d='M6 7h12l-1 14H7L6 7z'/>\
</svg>");
}#module-top .icon-other-007 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2C7 2 3 3.79 3 6v12c0 2.21 4 4 9 4s9-1.79 9-4V6c0-2.21-4-4-9-4zm0 2c4.42 0 7 .98 7 2s-2.58 2-7 2-7-.98-7-2 2.58-2 7-2zm0 6c4.42 0 7-.98 7-2v3c0 1.02-2.58 2-7 2s-7-.98-7-2V8c0 1.02 2.58 2 7 2zm0 6c4.42 0 7-.98 7-2v3c0 1.02-2.58 2-7 2s-7-.98-7-2v-3c0 1.02 2.58 2 7 2z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2C7 2 3 3.79 3 6v12c0 2.21 4 4 9 4s9-1.79 9-4V6c0-2.21-4-4-9-4zm0 2c4.42 0 7 .98 7 2s-2.58 2-7 2-7-.98-7-2 2.58-2 7-2zm0 6c4.42 0 7-.98 7-2v3c0 1.02-2.58 2-7 2s-7-.98-7-2V8c0 1.02 2.58 2 7 2zm0 6c4.42 0 7-.98 7-2v3c0 1.02-2.58 2-7 2s-7-.98-7-2v-3c0 1.02 2.58 2 7 2z'/>\
</svg>");
}
#module-top .tile-title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
#module-top .tile-desc { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
#module-top .disk-card { margin: 0 0 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }
#module-top .disk-card .disk-title { font-size: 11px; font-weight: 600; margin-bottom: 3px; }
#module-top .disk-card .disk-main { font-size: 12px; font-weight: 600; }
#module-top .disk-card .disk-sub { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
#module-top .disk-card.warn { border-color: rgba(245, 158, 11, .7); background: #fffbeb; }
#module-top .disk-card.danger { border-color: rgba(239, 68, 68, .8); background: #fef2f2; }
#module-top .maint-box input { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; }
#module-top .btn-subtle:disabled { opacity: .5; cursor: not-allowed; }


/* ==================================================================
   利益分析（実機 finance/*.php）。2026-10-11、実機のCSSを .fin-page の中だけに効くよう移植。
   実機の色の付いた部分（日計表の見出しの色グループ・凡例、トランザクションの青い見出し、
   振込履歴のピンクの見出し、販売分析の青い見出し／緑の合計行、マイナス赤・プラス青）はそのまま。
   背景・カードは全画面共通のルール（薄いグレーの背景・白いカード）。
   ================================================================== */
.fin-page {
  --g-date: #e9e9e9;
  --g-tran: #dbeeff;
  --g-cost: #ffe8c7;
  --g-list: #eadcff;
  --g-ship: #ffd6d6;
  --g-calc: #dbf5df;
  --g-settle: #ffe3f0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #222;
}
.fin-page .wrap { max-width: 1600px; margin: 0 auto; }
.fin-page .fin-tx { max-width: 1700px; }
.fin-page .fin-parent { max-width: 1800px; }
.fin-page .fin-cost, .fin-page .fin-settle { max-width: 1400px; }
.fin-page .fin-monitor { max-width: 1200px; }
.fin-page h1 { font-size: 18px; margin: 0 0 12px; color: #111; text-shadow: none; letter-spacing: normal; }
.fin-page .fin-cost h1 { font-size: 20px; }
.fin-page .head-card h1 { margin: 0; }
.fin-page .card { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 12px; margin-bottom: 12px; box-shadow: none; }
.fin-page .head-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-page .card-title { font-weight: 700; margin-bottom: 8px; }
.fin-page form.fin-form { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.fin-page .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fin-page .field { display: flex; flex-direction: column; gap: 4px; }
.fin-page label { font-size: 12px; color: #444; }
.fin-page input[type="date"], .fin-page input[type="text"], .fin-page input[type="number"], .fin-page select, .fin-page textarea {
  padding: 8px; border: 1px solid #ccc; border-radius: 8px; min-width: 180px; background: #fff; font: inherit; font-size: 13px; color: #222;
}
.fin-page textarea { min-width: 280px; min-height: 40px; resize: vertical; }
.fin-page button { padding: 9px 14px; border: 0; border-radius: 8px; background: #111; color: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.fin-page .radio-box { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; background: #fff; }
.fin-page .radio-box label { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; color: #222; }
.fin-page .small { color: #666; font-size: 12px; margin: 6px 0 0; line-height: 1.6; }
.fin-page .muted { color: #888; }
.fin-page .fin-hr { border: 0; border-top: 1px solid #111; margin: 14px 0; }
.fin-page .fin-msg:empty { display: none; }
.fin-page .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-page .neg { color: #c00; font-weight: 600; }
.fin-page .always-red { color: #c00; font-weight: 600; }
.fin-page .posblue, .fin-page .pos { color: #06c; font-weight: 600; }
.fin-page .link a { color: #0b57d0; text-decoration: none; }
.fin-page .link a:hover { text-decoration: underline; }
.fin-page .period { color: #333; }

/* タイトル行と印刷ボタン（実機: 青いボタン） */
.fin-page .title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.fin-page .title-row h1 { margin: 0; }
.fin-page .print-btn { padding: 8px 12px; border: 1px solid #1f5fbf; background: #2b78ff; color: #fff; border-radius: 8px; font-size: 12px; }
.fin-page .print-btn:hover { filter: brightness(0.95); }

/* 凡例（実機の色グループ） */
.fin-page .legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 10px; }
.fin-page .legend .tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid #cfcfcf; font-size: 12px; line-height: 1; white-space: nowrap; color: inherit; text-decoration: none; }
.fin-page .legend a.tag:hover { filter: brightness(0.97); }
.fin-page .legend .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .12); }
.fin-page .legend .tag.date { background: var(--g-date); }
.fin-page .legend .tag.tran { background: var(--g-tran); }
.fin-page .legend .tag.cost { background: var(--g-cost); }
.fin-page .legend .tag.list { background: var(--g-list); }
.fin-page .legend .tag.ship { background: var(--g-ship); }
.fin-page .legend .tag.settle { background: var(--g-settle); }
.fin-page .legend .tag.calc { background: var(--g-calc); }

/* 表のスクロール枠（実機と同じく枠の中で縦横スクロール） */
.fin-page .table-scroll { max-height: 60vh; overflow: auto; border: 1px solid #ccc; background: #fff; -webkit-overflow-scrolling: touch; }
.fin-page .fin-parent .table-scroll { max-height: 65vh; border-radius: 12px; }
.fin-page .fin-tx .table-scroll { max-height: 70vh; border: 1px solid #ddd; border-radius: 12px; }
.fin-page .fin-cost .table-scroll, .fin-page .fin-settle .table-scroll { max-height: 72vh; border: 1px solid #ddd; border-radius: 12px; }

/* 日計表 */
.fin-page .daily-table { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; font-size: 13px; }
.fin-page .daily-table th, .fin-page .daily-table td { padding: 6px 10px; border: 1px solid #e2e2e2; vertical-align: top; white-space: nowrap; background: #fff; }
.fin-page .daily-table td:first-child, .fin-page .daily-table th:first-child { text-align: center; }
.fin-page .daily-table tbody tr:nth-child(even) td { background: #fafafa; }
.fin-page .daily-table td.memo { white-space: normal; max-width: 220px; min-width: 160px; line-height: 1.3; }
.fin-page .daily-table th.memo { max-width: 220px; min-width: 160px; white-space: nowrap; }
.fin-page .daily-table thead th { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid #999; background: #f3f3f3; }
.fin-page .daily-table thead th.g-date { background: var(--g-date); }
.fin-page .daily-table thead th.g-tran { background: var(--g-tran); }
.fin-page .daily-table thead th.g-cost { background: var(--g-cost); }
.fin-page .daily-table thead th.g-list { background: var(--g-list); }
.fin-page .daily-table thead th.g-ship { background: var(--g-ship); }
.fin-page .daily-table thead th.g-calc { background: var(--g-calc); }
.fin-page .daily-table thead th.g-pay { background: var(--g-settle); }
.fin-page .daily-table tfoot td { position: sticky; bottom: 0; z-index: 50; background: var(--g-calc); border-top: 2px solid #999; font-weight: 700; }
.fin-page .daily-table th.sticky-left, .fin-page .daily-table td.sticky-left { position: sticky; left: 0; z-index: 25; }
.fin-page .daily-table thead th.sticky-left, .fin-page .daily-table tfoot td.sticky-left { z-index: 70; }

/* 販売分析（実機: 青い見出し・緑の合計行） */
.fin-page .fin-parent .daily-table th, .fin-page .fin-parent .daily-table td { padding: 7px 10px; font-size: 12px; }
.fin-page .fin-parent .daily-table thead th { background: #eaf3ff; border-bottom: 2px solid #9bb7ea; text-align: left; z-index: 20; }
.fin-page .fin-parent .daily-table tfoot td { background: #eaf8f0; border-top: 2px solid #8fd3a6; z-index: 20; }
.fin-page .fin-parent .daily-table td.memo, .fin-page .fin-parent .daily-table th.memo { white-space: normal; max-width: 120px; min-width: 80px; line-height: 1.35; }
.fin-page .fin-parent .daily-table thead th.sticky-left { z-index: 30; background: #eaf3ff; }
.fin-page .fin-parent .daily-table tfoot td.sticky-left { z-index: 30; background: #eaf8f0; }

/* 経費記帳（実機: 薄い青の見出し） */
.fin-page .fin-cost .daily-table th, .fin-page .fin-cost .daily-table td { padding: 7px 10px; font-size: 12px; border: 0; border-bottom: 1px solid #eee; border-right: 1px solid #f0f0f0; }
.fin-page .fin-cost .daily-table thead th { background: #f3f6ff; border-bottom: 2px solid #b8c7ff; z-index: 10; text-align: left; }
.fin-page .fin-cost .daily-table td.memo { white-space: normal; min-width: 240px; max-width: 360px; }
.fin-page .fin-cost .daily-table input, .fin-page .fin-cost .daily-table textarea { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d8d8d8; }
.fin-page .fin-cost .daily-table input[type="number"] { min-width: 110px; width: 110px; }
.fin-page .fin-cost .daily-table input[type="date"] { min-width: 150px; }
.fin-page .fin-cost .daily-table textarea { min-width: 240px; max-width: 360px; }
.fin-page .fin-cost .daily-table input:disabled { background: #f5f5f5; color: #aaa; }
.fin-page .btn-del { background: #fff; border: 1px solid #e0e0e0; color: #333; border-radius: 10px; padding: 6px 10px; }
.fin-page .btn-del:hover { background: #f7f7f7; }

/* トランザクション（実機: 青い見出し） */
.fin-page table.tx, .fin-page table.sett { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; }
.fin-page .tx th, .fin-page .tx td, .fin-page .sett th, .fin-page .sett td { padding: 7px 10px; border-bottom: 1px solid #eee; border-right: 1px solid #f2f2f2; font-size: 12px; vertical-align: top; white-space: nowrap; background: #fff; }
.fin-page .tx th { position: sticky; top: 0; z-index: 20; background: #eaf3ff; border-bottom: 2px solid #b8c7ff; text-align: left; }
.fin-page .tx tbody tr:nth-child(even) td, .fin-page .sett tbody tr:nth-child(even) td { background: #fafafa; }
.fin-page .tx th:last-child, .fin-page .tx td:last-child, .fin-page .sett th:last-child, .fin-page .sett td:last-child { border-right: 0; }
.fin-page .tx input[type="number"] { min-width: 120px; width: 120px; padding: 6px 8px; }
.fin-page .badge-refund { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #ffe3e3; border: 1px solid #f3b7b7; color: #a40000; font-size: 11px; font-weight: 700; }

/* 振込履歴（実機: 薄いピンクの見出し） */
.fin-page .sett th { position: sticky; top: 0; z-index: 20; background: #ffe3f0; border-bottom: 2px solid #f1a9c8; text-align: left; }

/* 追従保存ボタン（実機の save-float） */
.fin-page .save-float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: none; gap: 10px; align-items: center; }
.fin-page .save-float .hint { background: rgba(255, 255, 255, .92); border: 1px solid #ddd; padding: 8px 10px; border-radius: 12px; font-size: 12px; color: #333; }
.fin-page .save-float button { background: #0b57d0; border-radius: 14px; padding: 10px 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.fin-page .save-float button:disabled { background: #9bb7ea; cursor: not-allowed; box-shadow: none; }

/* 収集ログ */
.fin-page .page-h2 { font-size: 18px; margin: 0 0 4px; }
.fin-page .fin-monitor .card { padding: 14px; margin: 12px 0; }
.fin-page .fin-monitor h2 { margin: 0 0 10px; font-size: 18px; }
.fin-page .fin-monitor h3 { margin: 0 0 10px; font-size: 15px; }
.fin-page .fin-monitor hr { border: 0; border-top: 1px solid #eee; margin: 10px 0; }
.fin-page .kv { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.fin-page .kv > div { min-width: 260px; }
.fin-page .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #222; }
.fin-page .pill.ok { border: 1px solid #bfe6c7; background: #e8f6ea; }
.fin-page .pill.wait { border: 1px solid #f5d38a; background: #fff6df; }
.fin-page .reset-form { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fin-page .reset-form input { padding: 8px 10px; border-radius: 10px; min-width: 160px; }
.fin-page .reset-btn { padding: 10px 14px; border: 1px solid #c33; background: #ffecec; color: #900; border-radius: 10px; }
.fin-page .table-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fin-page table.mon { width: 100%; border-collapse: collapse; }
.fin-page .mon th, .fin-page .mon td { border-bottom: 1px solid #eee; padding: 8px; font-size: 13px; vertical-align: top; white-space: nowrap; }
.fin-page .mon th { text-align: left; color: #444; background: #fafafa; }
.fin-page .mon td small { color: #666; }
.fin-page .bad { color: #900; }
/* 実機の取得ログは黒い窓だが、全画面共通のルール（黒は価格改定のログの窓だけ）に合わせ薄いグレーにする */
.fin-page pre#finMonLog { background: #f8fafc; color: #1f2430; border: 1px solid #e2e5ea; padding: 12px; border-radius: 10px; overflow: auto; max-height: 55vh; font-size: 12px; white-space: pre-wrap; }

/* スマホ */
@media (max-width: 720px) {
  .fin-page .field { width: 100%; }
  .fin-page input[type="date"], .fin-page input[type="text"], .fin-page select, .fin-page textarea { min-width: 0; width: 100%; }
  .fin-page .fin-cost .daily-table input[type="date"] { width: auto; }
  .fin-page .radio-box { flex-wrap: wrap; }
  .fin-page .field[style*="min-width"] { min-width: 0 !important; }
  .fin-page .table-scroll { max-height: 70vh; }
  .fin-page .kv > div { min-width: 0; width: 100%; }
}

/* 「この表だけ印刷」（実機と同じく横向き・表だけ） */
@media print {
  body.print-fin-daily * { visibility: hidden; }
  body.print-fin-daily #profit-panel-daily .daily-table, body.print-fin-daily #profit-panel-daily .daily-table * ,
  body.print-fin-daily #profit-panel-daily .title-row h1 { visibility: visible; }
  body.print-fin-daily #profit-panel-daily { position: absolute; left: 0; top: 0; width: 100%; }
  body.print-fin-daily #profit-panel-daily .table-scroll { max-height: none; overflow: visible; border: none; }
  body.print-fin-daily #profit-panel-daily .daily-table { width: 100%; min-width: 0; zoom: .6; }
  body.print-fin-daily #profit-panel-daily .daily-table thead th,
  body.print-fin-daily #profit-panel-daily .daily-table tfoot td,
  body.print-fin-daily #profit-panel-daily .sticky-left { position: static; }
  body.print-fin-daily #profit-panel-daily form, body.print-fin-daily #profit-panel-daily .legend, body.print-fin-daily #profit-panel-daily .print-btn { display: none; }
  @page { size: landscape; margin: 8mm; }
}


/* ==================================================================
   FBA納品（実機 listing/fba_edit.php）。2026-10-11、実機のCSSを .fba-page の中だけに移植。
   緑の「FBA納品を開始する／納品対象を確定する」ボタン、納品可(水色)/納品不可(赤・取消線)の行、
   青い「表示・印刷する」ボタン、進み具合の緑のバーは実機のまま。背景は全画面共通の白・薄いグレー。
   ================================================================== */
.fba-page .container { max-width: 1200px; margin: 0 auto; }
.fba-page h1 { font-size: 22px; margin: 0 0 12px; color: var(--text); text-shadow: none; letter-spacing: .06em; }
.fba-page .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fba-page h2 { font-size: 18px; margin: 0 0 12px; }
.fba-page .fba-h3 { font-size: 17px; margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; }
.fba-page .fba-hr { border: 0; border-top: 1px solid #e5e7eb; margin: 16px 0 4px; }
.fba-page .form-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.fba-page label { font-size: 13px; }
.fba-page input[type="date"], .fba-page input[type="text"], .fba-page input[type="number"], .fba-page select { padding: 6px 8px; border: 1px solid #c8ccd2; border-radius: 6px; font: inherit; font-size: 14px; background: #fff; }
.fba-page button { padding: 8px 14px; cursor: pointer; border: 1px solid #c8ccd2; border-radius: 6px; background: #f3f4f6; font: inherit; font-size: 14px; color: #222; }
.fba-page .btn-sub { padding: 5px 10px; font-size: 13px; }
.fba-page table { width: 100%; border-collapse: collapse; }
.fba-page th, .fba-page td { border-bottom: 1px solid #e5e5e5; padding: 8px; text-align: left; vertical-align: middle; font-size: 14px; }
.fba-page th { background: #f0f0f0; }
.fba-page .num { text-align: right; }
.fba-page .note { font-size: 13px; color: #666; }
.fba-page .actions { margin-top: 14px; }
.fba-page .badge { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #eee; font-size: 12px; }
.fba-page .fba-form-grid { display: grid; grid-template-columns: 160px minmax(0, 600px); gap: 8px 12px; align-items: center; }
.fba-page .fba-form-grid label { font-size: 13px; color: #333; }
.fba-page .fba-form-grid input, .fba-page .fba-form-grid select { width: 100%; }
.fba-page .box-limit-warning { display: none; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #fff1f2; border: 1px solid #f5c2c7; color: #b00020; font-weight: 700; font-size: 13px; }
.fba-page .fba-msg { margin: 8px 0 0; }
.fba-page .fba-msg.error, .fba-page #fbaStartMsg:not(:empty) { color: #b00020; font-weight: 700; }
.fba-page #fbaStartBtn, .fba-page #fbaConfirmBtn { font-weight: bold; background: linear-gradient(180deg, #22a060, #198754); color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-size: 16px; box-shadow: 0 3px 8px rgba(25,135,84,.28); }
.fba-page #fbaStartBtn:hover, .fba-page #fbaConfirmBtn:hover { background: linear-gradient(180deg, #28b96f, #157347); }
.fba-page #fbaConfirmBtn:disabled { opacity: .5; cursor: wait; }
.fba-page .started-section { border: 2px solid #3a8; background: #f7fffb; }
.fba-page .summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fba-page .summary-box { background: #fff; border: 1px solid #cfd; border-radius: 6px; padding: 8px 12px; min-width: 150px; }
.fba-page .summary-box .label { font-size: 12px; color: #666; }
.fba-page .summary-box .value { font-size: 18px; font-weight: bold; }
.fba-page .fba-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fba-page #fbaItems td img { display: block; width: 46px; height: auto; margin: 0 auto; }
.fba-page #fbaItems .noimg { width: 46px; height: 60px; background: #e5e7eb; color: #888; font-size: 9px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 auto; }
.fba-page #fbaItems td { font-size: 13px; }
.fba-page #fbaItems .item-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-width: 160px; }
.fba-page #fbaItems select { font-size: 12px; padding: 3px 2px; }
.fba-page .eligibility-ok td { background: #e6f7ff; }
.fba-page .eligibility-ng td { background: #ffecec; }
.fba-page .eligibility-ng .item-title { text-decoration: line-through; }
.fba-page .eligibility-reason { margin-top: 4px; font-size: 12px; color: #b00020; }
.fba-page .eligibility-badge { display: inline-block; margin-top: 3px; padding: 2px 6px; border-radius: 4px; font-size: 12px; background: #eee; }
.fba-page .eligibility-badge.ok { background: #bdefff; }
.fba-page .eligibility-badge.ng { background: #ffc9c9; }
.fba-page .qty-input { width: 64px; padding: 4px 6px; text-align: right; }
.fba-page .next-action-box { margin-top: 16px; padding: 12px; border: 1px solid #9bd; background: #f3fbff; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fba-page .loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.82); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 12px; font-size: 16px; font-weight: bold; padding: 16px; text-align: center; }
.fba-page .loading-spinner { width: 44px; height: 44px; border: 5px solid #ddd; border-top-color: #3a8; border-radius: 50%; animation: fbaSpin .9s linear infinite; }
@keyframes fbaSpin { to { transform: rotate(360deg); } }
.fba-page .loading-progress-wrap { width: min(520px, 86vw); height: 16px; border-radius: 999px; overflow: hidden; background: #e5e7eb; border: 1px solid #d1d5db; }
.fba-page .loading-progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, #22a060, #198754); transition: width .35s ease; }
.fba-page .loading-progress-percent { font-size: 18px; font-weight: 800; color: #198754; }
.fba-page .loading-progress-sub { font-size: 13px; color: #555; font-weight: 500; max-width: min(620px, 90vw); line-height: 1.6; }
.fba-page .ship-to-box { margin-top: 14px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #f8f9fa; line-height: 1.6; }
.fba-page .label-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.fba-page .label-card { border: 1px solid #d8dee4; border-radius: 10px; background: #fff; padding: 14px; }
.fba-page .label-card h3 { margin: 0 0 10px; font-size: 16px; }
.fba-page .label-preview-mock { height: 170px; border: 1px solid #ddd; border-radius: 8px; background: #f8f9fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fba-page .label-preview-frame { border: none; pointer-events: none; background: #fff; }
.fba-page .label-preview-frame-pdf { width: 420px; height: 594px; transform: scale(.27); flex: none; }
.fba-page .label-preview-paper-wrap { position: relative; width: 115px; height: 163px; display: flex; align-items: center; justify-content: center; }
.fba-page .label-preview-frame-item { position: absolute; width: 794px; height: 1123px; transform: scale(.145); background: #fff; }
.fba-page .heavy-mock { background: #fff; }
.fba-page .heavy-label { background: #e3302f; color: #fff; text-align: center; padding: 10px 24px; }
.fba-page .heavy-label .big { font-size: 56px; font-weight: 900; line-height: 1.1; }
.fba-page .heavy-label .small-box { display: inline-block; border: 3px solid #fff; font-size: 18px; font-weight: 800; padding: 2px 10px; margin-top: 4px; }
.fba-page .label-card-actions { margin-top: 10px; text-align: center; }
.fba-page .btn-blue, .fba-page .btn-green { display: inline-block; border: none; border-radius: 7px; padding: 9px 14px; color: #fff; font-weight: bold; cursor: pointer; text-decoration: none; font-size: 14px; }
.fba-page .btn-blue { background: #0d6efd; }
.fba-page .btn-blue:hover { background: #0b5ed7; }
.fba-page .btn-green { background: #198754; }
.fba-page .btn-green:hover { background: #157347; }
.fba-page .item-label-relayout-box { margin: 12px 0; padding: 12px; border: 1px solid #9bd; border-radius: 8px; background: #f3fbff; }
.fba-page .item-label-relayout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; }
.fba-page .item-label-relayout-fields input { display: block; width: 100%; margin-top: 3px; }
.fba-page .item-label-relayout-actions { margin-top: 10px; }
.fba-page .item-label-relayout-message { display: none; margin-top: 9px; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: bold; }
.fba-page .item-label-relayout-message.ok { display: block; color: #067a46; background: #eafaf2; border: 1px solid #9dd9ba; }
.fba-page .item-label-relayout-message.error { display: block; color: #b00020; background: #fff1f2; border: 1px solid #f5c2c7; }
.fba-page .tracking-box { margin-top: 14px; padding: 12px; border: 1px solid #cfe0f5; border-radius: 8px; background: #f3f8ff; display: grid; gap: 8px; }
.fba-page .tracking-box .mono { font-family: ui-monospace, Consolas, monospace; font-size: 15px; }
.fba-page .tracking-box input { width: min(320px, 100%); }
.fba-page .done-box { margin-top: 14px; padding: 16px; border: 2px solid #3a8; border-radius: 10px; background: #f7fffb; }
.fba-page .done-box h3 { margin: 0 0 8px; }
.fba-page .tracking-result { margin-top: 14px; }
.fba-page .ok-text { color: #198754; font-weight: 700; }
@media (max-width: 720px) {
  .fba-page .fba-form-grid { grid-template-columns: 1fr; gap: 4px; }
  .fba-page .fba-form-grid > span { display: none; }
  .fba-page .label-grid { grid-template-columns: 1fr; }
  .fba-page .item-label-relayout-fields { grid-template-columns: 1fr; }
  .fba-page #fbaItems .item-title { min-width: 120px; }
}
.fba-page .tracking-box > button { justify-self: start; }


/* ==================================================================
   セット本仕入れ（元: Set Search AME-C）。2026-10-11、実機 index.php / search.php のCSSを .ame-page の中だけに移植。
   緑（#1D9E75）の主ボタン・薄い緑の「通常優先」・薄いグレーの入力欄は実機のまま。
   🍅 売れ筋ランキングは実機どおり暗い配色（金色の値札チケット）。
   ================================================================== */
.ame-page {
  --c-accent: #1D9E75; --c-accent-light: #E1F5EE; --c-accent-dark: #085041;
  --c-bg: #ffffff; --c-bg2: #f5f5f3; --c-border: rgba(0,0,0,0.12); --c-text: #1a1a1a; --c-muted: #666660; --r: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: var(--c-bg); color: var(--c-text); border: 1px solid var(--border, #e2e5ea); border-radius: 12px; overflow: hidden;
}
.ame-page *, .ame-page *::before, .ame-page *::after { box-sizing: border-box; }
.ame-page .ame-topbar { padding: 10px 12px 6px; border-bottom: 0.5px solid var(--c-border); }
.ame-page .ame-topbar-title { display: block; font-size: 15px; font-weight: 600; color: var(--c-accent-dark); letter-spacing: 0.02em; margin-bottom: 6px; }
.ame-page .ame-topbar-title a { text-decoration: none; color: inherit; }
.ame-page .ame-topbar-icons { display: flex; gap: 4px; padding-bottom: 4px; flex-wrap: wrap; }
.ame-page .ame-topbar-icons a, .ame-page .ame-topbar-icons button {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--c-bg2); border: 0.5px solid var(--c-border); font-size: 15px; text-decoration: none; font-family: inherit;
  color: inherit; cursor: pointer; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0.1); touch-action: manipulation;
}
.ame-page .ame-topbar-icons button[hidden] { display: none; }
.ame-page .card { background: var(--c-bg); border: 0.5px solid var(--c-border); border-radius: 12px; padding: 12px; margin: 10px 10px 0; box-shadow: none; }
.ame-page .sect-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--c-muted); text-transform: uppercase; margin-bottom: 8px; }
.ame-page .row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-bottom: 7px; }
.ame-page .row:last-child { margin-bottom: 0; }
.ame-page .input-kw { flex: 1 1 0; min-width: 0; height: 38px; border: 0.5px solid var(--c-border); border-radius: var(--r); padding: 0 10px; font-size: 15px; background: var(--c-bg2); color: var(--c-text); outline: none; }
.ame-page .input-kw:focus, .ame-page .input-num:focus, .ame-page .input-shiire:focus { border-color: var(--c-accent); }
.ame-page .input-num { width: 50px; height: 38px; border: 0.5px solid var(--c-border); border-radius: var(--r); padding: 0 4px; font-size: 15px; text-align: center; background: var(--c-bg2); color: var(--c-text); outline: none; flex-shrink: 0; }
.ame-page .btn-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0.5px solid var(--c-border); border-radius: var(--r); background: var(--c-bg2); cursor: pointer; font-size: 15px; flex-shrink: 0; color: var(--c-muted); padding: 0; }
.ame-page .tag-btn { height: 30px; padding: 0 11px; border: 0.5px solid var(--c-border); border-radius: 15px; background: var(--c-bg2); font-size: 12px; color: var(--c-muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ame-page .sel { height: 38px; border: 0.5px solid var(--c-border); border-radius: var(--r); padding: 0 6px; font-size: 13px; background: var(--c-bg2); color: var(--c-text); outline: none; cursor: pointer; }
.ame-page .sel-cate { flex: 1 1 0; min-width: 0; }
.ame-page .sel-per { width: 60px; flex-shrink: 0; }
.ame-page .input-shiire { width: 82px; height: 38px; border: 0.5px solid var(--c-border); border-radius: var(--r); padding: 0 8px; font-size: 15px; background: var(--c-bg2); color: var(--c-text); outline: none; flex-shrink: 0; }
.ame-page .label-s { font-size: 12px; color: var(--c-muted); white-space: nowrap; flex-shrink: 0; }
.ame-page .action-row { display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 10px; }
.ame-page .btn-main { flex: 2 1 0; height: 42px; border: none; border-radius: var(--r); background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ame-page .btn-sub { flex: 2 1 0; height: 42px; border: 0.5px solid var(--c-border); border-radius: var(--r); background: var(--c-bg2); color: var(--c-text); font-size: 14px; cursor: pointer; white-space: nowrap; }
.ame-page .btn-rank { flex: 1 1 0; height: 42px; border: 0.5px solid var(--c-border); border-radius: var(--r); background: var(--c-bg2); color: var(--c-muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.ame-page .btn-chg { flex: 1 1 0; height: 42px; border: 0.5px solid var(--c-accent); border-radius: var(--r); background: var(--c-accent-light); color: var(--c-accent-dark); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ame-page .cam-panel { display: none; margin: 8px 10px 0; text-align: center; background: var(--c-bg2); border: 0.5px solid var(--c-border); border-radius: 12px; padding: 12px; }
.ame-page .video-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto 8px; border-radius: 12px; background: #000; overflow: hidden; }
.ame-page .video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ame-page .video-wrap::after { content: ""; position: absolute; top: 50%; left: 50%; width: 65%; height: 28%; transform: translate(-50%, -50%); border: 1.5px solid rgba(29,158,117,0.8); border-radius: 4px; pointer-events: none; }
.ame-page .cam-result { font-size: 13px; color: var(--c-muted); margin-bottom: 6px; }
.ame-page .btn-stop { height: 32px; padding: 0 16px; border: 0.5px solid var(--c-border); border-radius: 8px; background: var(--c-bg); font-size: 13px; cursor: pointer; color: var(--c-muted); }
.ame-page .ame-home-area { margin: 10px 0 0; }
.ame-page .ame-anime h3 { color: #333; }
.ame-page .ame-result { padding: 0 2px 12px; font-size: 16px; line-height: 1.5; overflow-x: hidden; word-break: break-word; }
.ame-page .ame-result:empty { display: none; }
.ame-page .ame-result a { color: #00e; }
.ame-page .ame-result hr { border: 0; border-top: 1px solid #888; margin: 6px 0; }
.ame-page .ame-result table { border-collapse: collapse; }
.ame-page .ame-result td { vertical-align: top; padding: 1px 2px; }
.ame-page .ame-result input[type=text], .ame-page .ame-result input[type=number], .ame-page .ame-result select { font-size: 14px; border: 1px solid #767676; border-radius: 2px; padding: 1px 2px; background: #fff; color: #000; }
.ame-page .ame-result button, .ame-page .ame-result input[type=submit] { font-size: 14px; border: 1px solid #767676; border-radius: 3px; padding: 1px 6px; background: #efefef; color: #000; cursor: pointer; }
.ame-page .ame-result img[src*="/images/ame/"] { height: 32px; width: auto; vertical-align: top; margin: 0 2px 0 0; }
.ame-page .ame-result .ame-research { margin: 0; }
.ame-page .ame-result .ame-research input[type=submit] { width: 100px; height: 36px; font-size: 16px; }
.ame-page .ame-result .ame-speed a { color: #00e; }
.ame-page .ame-loading { padding: 16px; color: var(--c-muted); }
.ame-page .ame-err { padding: 16px; color: #c00; }
.ame-page .ame-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #ccc; border-top-color: #1D9E75; border-radius: 50%; animation: ameSpin .8s linear infinite; vertical-align: middle; }
@keyframes ameSpin { to { transform: rotate(360deg); } }
.ame-page .ame-subpage table[border] td, .ame-page .ame-subpage table[border] th { border: 1px solid #888; padding: 2px 4px; }

/* NEW・履歴のモーダル */
.ame-page .ame-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2100; }
.ame-page .ame-modal[hidden] { display: none; }
.ame-page .ame-modal-box { position: relative; background: #fff; margin: 4vh auto 0; width: 95%; max-width: 900px; height: 90vh; border-radius: 10px; overflow: hidden; }
.ame-page .ame-modal-close { position: absolute; top: 6px; right: 12px; cursor: pointer; font-size: 26px; z-index: 2; color: #333; background: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.ame-page .ame-modal-body { height: 100%; overflow: auto; padding: 12px; }
.ame-page .ame-hist td { border: 1px solid #ddd; padding: 3px 6px; font-size: 14px; }
.ame-page .ame-view { background: #f3f4f6; padding: 18px; min-height: 100%; }
.ame-page .ame-view h1 { font-size: 22px; font-weight: 800; color: #1f2937; margin: 0 0 16px; }
.ame-page .ame-view .ame-viewform { background: #fff; padding: 12px; border-radius: 8px; display: flex; gap: 12px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ame-page .ame-view .ame-viewform input { border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; width: 260px; max-width: 100%; }
.ame-page .ame-view .ame-viewform button { background: #2563eb; color: #fff; border: 0; border-radius: 6px; padding: 6px 14px; font-size: 18px; cursor: pointer; }
.ame-page .ame-view .vcard { background: #fff; padding: 16px; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.ame-page .ame-view .vcard h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.ame-page .ame-view h2.red { color: #dc2626; } .ame-page .ame-view h2.orange { color: #ea580c; } .ame-page .ame-view h2.green { color: #16a34a; } .ame-page .ame-view h2.blue { color: #2563eb; }
.ame-page .ame-view .note { font-size: 13px; font-weight: 400; color: #16a34a; }
.ame-page .ame-view .chart-box { position: relative; height: 260px; }
.ame-page .ame-view .vtable { max-height: 500px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.ame-page .ame-view table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ame-page .ame-view th { background: #f9fafb; position: sticky; top: 0; padding: 10px 14px; text-align: left; color: #6b7280; font-weight: 500; white-space: nowrap; }
.ame-page .ame-view td { padding: 10px 14px; border-top: 1px solid #f3f4f6; white-space: nowrap; color: #374151; }
.ame-page .ame-view tr.up td { background: #f0fdf4; color: #14532d; font-weight: 700; }
.ame-page .ame-view .tri { color: #16a34a; font-size: 11px; }
.ame-page .ame-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 2200; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.ame-page .ame-lightbox-overlay[hidden] { display: none; }
.ame-page .ame-lightbox-overlay img { max-width: 95vw; background: #fff; padding: 4px; }
.ame-page .ame-lightbox-cap { color: #fff; margin-top: 8px; }

/* 🍅 売れ筋ランキング（実機の暗い配色） */
.ame-page .ame-sold {
  --bg: #14161b; --surface: #1d2027; --surface-2: #262a33; --line: #2c3039; --ink: #ece8de; --ink-dim: #8b8f99;
  --gold: #d9a441; --gold-dim: #7a5f2c; --profit: #4caf7d; --profit-bg: rgba(76,175,125,0.12);
  background: var(--bg); color: var(--ink); font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; padding-bottom: 60px; margin: 0 -2px;
}
.ame-page .ame-sold a { color: inherit; text-decoration: none; }
.ame-page .ame-sold .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ame-page .ame-sold .page-header { padding: 28px 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #191c22, var(--bg)); }
.ame-page .ame-sold .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 6px; }
.ame-page .ame-sold .page-header h1 { margin: 0 0 14px; font-size: 24px; font-weight: 900; letter-spacing: 0.02em; color: var(--ink); }
.ame-page .ame-sold .tab-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ame-page .ame-sold .tab-btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--ink-dim); }
.ame-page .ame-sold .tab-btn--accent { background: var(--gold); color: #201705; border-color: var(--gold); }
.ame-page .ame-sold .notice { margin: 12px 0 0; font-size: 11px; color: var(--ink-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ame-page .ame-sold .list { max-width: 720px; margin: 18px auto; padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ame-page .ame-sold .item-card { position: relative; display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 12px 12px; overflow: hidden; }
.ame-page .ame-sold .item-card::before { content: ""; position: absolute; left: 70px; top: 0; bottom: 0; border-left: 1.5px dashed var(--line); }
.ame-page .ame-sold .rank-ticket { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--gold), var(--gold-dim)); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: inset 0 0 0 3px #14161b, 0 0 0 1px var(--line); }
.ame-page .ame-sold .rank-ticket::after { content: ""; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); }
.ame-page .ame-sold .rank-ticket span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 13px; color: #201705; line-height: 1.15; text-align: center; }
.ame-page .ame-sold .rank-ticket small { display: block; font-size: 8px; font-weight: 400; opacity: 0.75; }
.ame-page .ame-sold .item-body { flex: 1; min-width: 0; padding-left: 6px; }
.ame-page .ame-sold .item-title { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; word-break: break-word; }
.ame-page .ame-sold .item-title .asin-link { color: var(--gold); border-bottom: 1px dotted var(--gold-dim); }
.ame-page .ame-sold .stat-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 8px; }
.ame-page .ame-sold .stat-row .val { color: var(--ink); font-weight: 600; }
.ame-page .ame-sold .profit-hot { display: inline-flex; align-items: center; gap: 4px; background: var(--profit-bg); color: var(--profit); border: 1px solid rgba(76,175,125,0.35); border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.ame-page .ame-sold .profit-hot::before { content: "◆"; font-size: 9px; }
.ame-page .ame-sold .action-row { display: flex; gap: 14px; margin: 0; }
.ame-page .ame-sold .action-link { font-size: 12px; font-weight: 700; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; background: var(--surface-2); }
.ame-page .ame-sold .action-link:active { background: var(--gold); color: #201705; }

/* 高ランキングコミック（Rank） */
.ame-page .ame-hr table { width: 100%; border-collapse: collapse; }
.ame-page .ame-hr th, .ame-page .ame-hr td { border: 1px solid #ccc; padding: 4px 8px; font-size: 14px; }
.ame-page .ame-hr th { background: #f3f3f3; }

@media (max-width: 720px) {
  .ame-page .ame-result { font-size: 15px; }
}

/* 👮 かかりかん（実機 https://amesch.com/kakari/ の style をそのまま当てる） */
.ame-page .ame-kakari { font-family: sans-serif; padding: 20px; background: #fff; color: #000; font-size: 16px; }
.ame-page .ame-kakari .kk-title { font-size: 28px; font-weight: 900; color: #e8261c; margin: 0 0 14px; letter-spacing: .05em; } /* バナーの代わりに文字のみ（2026-10-11） */
.ame-page .ame-kakari h2 { background: #eef; padding: 6px 8px; margin: 28px 0 8px; font-size: 1.5em; }
.ame-page .ame-kakari .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ame-page .ame-kakari table { border-collapse: collapse; width: 100%; margin-bottom: 18px; min-width: 900px; background: #fff; }
.ame-page .ame-kakari th, .ame-page .ame-kakari td { border: 1px solid #ccc; padding: 6px; vertical-align: top; }
.ame-page .ame-kakari th { background: #f0f0f0; }
.ame-page .ame-kakari .publisher, .ame-page .ame-kakari .label { font-size: .9em; color: #666; }
.ame-page .ame-kakari .label { margin-top: 2px; }
.ame-page .ame-kakari .title-link { color: inherit; text-decoration: none; }
.ame-page .ame-kakari .cross-search { margin-top: 6px; font-size: 12px; line-height: 1.4; }
.ame-page .ame-kakari .icon-btns img { width: 32px; height: 32px; vertical-align: middle; }
.ame-page .ame-kakari td.titlecell, .ame-page .ame-kakari th.titlecell { min-width: 500px; max-width: 500px; width: 500px; white-space: normal; word-break: break-word; }
.ame-page .ame-kakari td.titlecell { padding-bottom: 44px; }
.ame-page .ame-kakari td.img, .ame-page .ame-kakari th.img, .ame-page .ame-kakari td.asin-cell, .ame-page .ame-kakari th.asin-cell,
.ame-page .ame-kakari td.datecell, .ame-page .ame-kakari th.datecell { width: 1%; white-space: nowrap; }
.ame-page .ame-kakari .book-stats { margin-top: 6px; font-size: .9em; color: #333; line-height: 1.4; }
.ame-page .ame-kakari form.search-form {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin-bottom: 24px; background: #fff; padding: 16px 20px;
  border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.ame-page .ame-kakari form.search-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.ame-page .ame-kakari form.search-form label { font-weight: bold; font-size: 14px; color: #333; }
.ame-page .ame-kakari .form-inline { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ame-page .ame-kakari .form-inline input[type=number] {
  width: 75px; box-sizing: border-box; height: 32px; font-size: 14px; padding: 2px 6px; border: 1px solid #bbb; border-radius: 6px;
  transition: border .2s, box-shadow .2s;
}
.ame-page .ame-kakari .form-inline input[type=number]:focus { border-color: #007bff; box-shadow: 0 0 4px rgba(0,123,255,.4); outline: none; }
.ame-page .ame-kakari form.search-form select { height: 32px; padding: 2px 6px; border-radius: 6px; border: 1px solid #bbb; font-size: 14px; }
.ame-page .ame-kakari form.search-form input[type=submit] {
  background: #007bff; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 14px; cursor: pointer;
  transition: background .2s, transform .1s;
}
.ame-page .ame-kakari form.search-form input[type=submit]:hover { background: #0056b3; }
.ame-page .ame-kakari form.search-form input[type=submit]:active { transform: scale(.97); }
.ame-page .ame-kakari .switch-links a { font-size: 14px; color: #551a8b; }
/* かかりかんset（kakariset.php）は飾りの少ないフォーム */
.ame-page .ame-kakari.kk-set form.search-form { padding: 10px 12px; gap: 12px 20px; box-shadow: none; border-color: #ddd; }
.ame-page .ame-kakari.kk-set form.search-form label { font-weight: normal; font-size: 13px; }
.ame-page .ame-kakari.kk-set .form-inline input[type=number] { width: 90px; height: 26px; border-radius: 2px; border: 1px solid #999; }
.ame-page .ame-kakari.kk-set form.search-form select { height: 24px; border-radius: 2px; border: 1px solid #999; font-size: 13px; }
.ame-page .ame-kakari.kk-set form.search-form input[type=submit] { background: #efefef; color: #000; border: 1px solid #767676; border-radius: 3px; padding: 2px 8px; font-size: 13px; }
.ame-page .ame-kakari.kk-set td:nth-child(2) { padding-bottom: 40px; }
@media (max-width: 768px) {
  .ame-page .ame-kakari { padding: 10px; }
  .ame-page .ame-kakari form.search-form { flex-direction: column; align-items: flex-start; }
  .ame-page .ame-kakari .form-inline { flex-wrap: wrap; }
}
/* 📺 映像化タイトル: 読者層ごとの見出し（2026-10-11 ユーザー指定） */
.ame-page .ame-sub-adap tr.ame-adap-group th { background: #eef; text-align: left; padding: 6px 8px; font-size: 15px; }
.ame-page .ame-kakari .cross-trigger img { width: 48px; height: 48px; max-width: none; }
/* 📺 アニメ作品リスト（ユーザー提示 PDF の色分け。ジャンルは色付きの見出しでまとめる 2026-10-11） */
.ame-page .adap-list h2 { color: #2b6cb0; font-size: 20px; margin: 14px 0 4px; }
.ame-page .adap-list .adap-sub { color: #555; font-size: 13px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 3px solid #2b6cb0; }
.ame-page .adap-wrap { width: 100%; }
.ame-page .adap-list table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.ame-page .adap-list th { background: #2b6cb0; color: #fff; text-align: left; padding: 8px 12px; font-size: 14px; }
.ame-page .adap-list td { border-bottom: 1px solid #e2e8f0; padding: 8px 12px; vertical-align: middle; color: #333; }
.ame-page .adap-list tr.adap-group td { color: #fff; font-weight: 700; font-size: 15px; padding: 7px 12px; border: none; }
.ame-page .adap-list tr.adap-group .adap-count { font-weight: 400; font-size: 12px; margin-left: 10px; opacity: .9; }
.ame-page .adap-list tr.adap-group.g0 td { background: #3182ce; }
.ame-page .adap-list tr.adap-group.g1 td { background: #4a5568; }
.ame-page .adap-list tr.adap-group.g2 td { background: #ed64a6; }
.ame-page .adap-list tr.adap-group.g3 td { background: #319795; }
.ame-page .adap-list tr.adap-group.g4 td, .ame-page .adap-list tr.adap-group.gx td { background: #718096; }
.ame-page .adap-list td.adap-title a { font-weight: 700; color: #1a202c; text-decoration: none; font-size: 14px; }
.ame-page .adap-list .adap-extra { font-weight: 700; color: #1a202c; }
@media (max-width: 768px) {
  /* スマホ: 1作品を「タイトル（大）／出版社・レーベル・作者（小）」の2段で表示 */
  .ame-page .adap-list thead { display: none; }
  .ame-page .adap-list table, .ame-page .adap-list tbody { display: block; width: 100%; }
  .ame-page .adap-list tr.adap-row { display: flex; flex-wrap: wrap; align-items: baseline; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; }
  .ame-page .adap-list tr.adap-row td { border: none; padding: 0; font-size: 12px; color: #666; }
  .ame-page .adap-list tr.adap-row td.adap-title { width: 100%; margin-bottom: 3px; }
  .ame-page .adap-list tr.adap-row td.adap-title a { font-size: 15px; }
  .ame-page .adap-list tr.adap-row td.adap-pub::after, .ame-page .adap-list tr.adap-row td.adap-label::after { content: "／"; color: #bbb; margin: 0 4px; }
  .ame-page .adap-list tr.adap-group { display: block; }
  .ame-page .adap-list tr.adap-group td { display: block; }
}
/* セット本仕入れ: 仕入額→FBA・自己発送の経費と利益（2026-10-11） */
.ame-page .ame-calcbox { border: 1px solid #d6dbe1; border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px; background: #fafbfc; max-width: 560px; }
.ame-page .ame-calcbox .shiire-input { font-size: 18px; height: 34px; width: 110px; }
.ame-page .ame-pnow { white-space: nowrap; font-size: 15px; }
.ame-page .ame-pnow b { color: #1d4ed8; font-size: 18px; margin-right: 6px; }
.ame-page .ame-calcbox b.minus, .ame-page .ame-pnow b.minus { color: #dc2626; }
.ame-page .ame-disc { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.ame-page .ame-discbtn { height: 34px; min-width: 64px; padding: 0 10px; font-size: 14px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; cursor: pointer; }
.ame-page .ame-discbtn:active { background: #e5e7eb; }
.ame-page .ame-discbtn.reset { color: #555; }
.ame-page .ame-disclog { width: 100%; color: #b45309; font-size: 13px; }
.ame-page .ame-feetable { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.ame-page .ame-feetable th, .ame-page .ame-feetable td { border: 1px solid #e2e5ea; padding: 3px 8px; text-align: right; }
.ame-page .ame-feetable td:first-child { text-align: left; }
.ame-page .ame-feetable th { background: #f1f3f6; }
.ame-page .ame-feetable tr.price td { background: #f8fafc; }
.ame-page .ame-feetable tr.sub td { font-weight: 700; background: #f8fafc; }
.ame-page .ame-feetable tr.sum td { font-size: 16px; background: #eef4ff; }
.ame-page .ame-feetable tr.sum b { color: #1d4ed8; }
.ame-page .ame-feetable small { color: #666; font-size: 11px; }
.ame-page .ame-feesize { color: #555; font-size: 12px; margin-top: 3px; }
@media (max-width: 600px) {
  .ame-page .ame-feetable { font-size: 12px; }
  .ame-page .ame-feetable th, .ame-page .ame-feetable td { padding: 2px 4px; }
  .ame-page .ame-feetable small { display: block; }
  .ame-page .ame-pnow { white-space: normal; display: block; margin-top: 4px; }
}
/* 🍅〜👮 を押したとき、中身が短いページでも同じ位置（アイコンの列が画面上部）で表示する（2026-10-11） */
.ame-page .ame-result:not(:empty) { min-height: calc(100vh - 60px); }
.ame-page .ame-feetable td:not(:first-child) { white-space: nowrap; }
@media (max-width: 600px) { .ame-page .ame-feetable tr.sum td { font-size: 14px; } }
/* 経費の内訳の表示・非表示（2026-10-11） */
.ame-page .ame-feetoggle { margin: 4px 0; height: 32px; padding: 0 12px; font-size: 13px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; cursor: pointer; }
.ame-page .ame-fees.fee-closed .ame-feetable, .ame-page .ame-fees.fee-closed .ame-feesize { display: none; }
.ame-page .adap-list .adap-extra { font-weight: 700; color: #1a202c; }

/* ===== スマホの横ぶれ・拡大・スクロール時の線の対策（2026-10-11 ユーザー報告） =====
   iPhone は文字が16pxより小さい入力欄に触れると画面を自動で拡大し、そのまま左右にずれる状態になる。
   入力欄・選択欄はスマホでは16px以上にし、ページ全体は横にはみ出さない（横スクロールは表の中だけ）。 */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
  html, body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; } /* hidden だと上部の固定ヘッダー（sticky）が効かなくなるため clip */
  .mobile-topbar { transform: translateZ(0); box-shadow: 0 1px 0 rgb(11, 18, 32); }
}
.ame-page .ame-https-hint { font-size: 12px; color: #555; margin-top: 6px; line-height: 1.5; word-break: break-all; }
@media (max-width: 768px) { .ame-page .adap-list h2 { font-size: 16px; } }
/* 割引ボタンはスマホでも1行（割引なしボタンは削除。手で金額を打ち直すと割引はリセット）2026-10-11 */
.ame-page .ame-disc { flex-wrap: nowrap; gap: 4px; }
.ame-page .ame-discbtn { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: 13px; }
.ame-page .ame-disclog { display: block; }
.ame-page .ame-disc { flex-wrap: wrap; }
.ame-page .ame-disc .ame-discbtn { flex: 1 1 18%; }
.ame-page .ame-note132 { font-size: 12px; color: #555; }
/* 「セット本仕入れ」の文字を大きく（2026-10-11 ユーザー指示） */
.ame-page .ame-topbar-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.ame-page .ame-shiire-reset { height: 34px; margin-left: 6px; padding: 0 10px; font-size: 13px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; cursor: pointer; vertical-align: middle; }
.ame-page .ame-shiire-reset:active { background: #e5e7eb; }
.ame-page .ame-basis { margin-left: 8px; font-size: 12px; color: #444; }
/* 📷 カメラ: かざして読む・タイトルを読む（2026-10-12） */
.ame-page .cam-actions { display: flex; gap: 8px; margin-top: 6px; }
.ame-page .cam-actions button { flex: 1; height: 42px; font-size: 15px; border-radius: 8px; border: 1px solid #c9ced6; background: #fff; }
.ame-page .btn-cam-title { background: #eef4ff !important; border-color: #9db8f5 !important; }
.ame-page .cam-titles { margin-top: 8px; font-size: 14px; }
.ame-page .cam-titles .cam-title-pick { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px; font-size: 15px; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; }
.ame-page .cam-http p { font-size: 13px; color: #444; margin: 4px 0 8px; }
.ame-page .cam-http button { display: block; width: 100%; height: 44px; margin: 6px 0; font-size: 15px; border-radius: 8px; border: 1px solid #c9ced6; background: #fff; }
.ame-page .cam-http .btn-cam-https { background: #1D9E75; color: #fff; border-color: #1D9E75; }
.ame-page .ame-asin-copy { width: 120px; height: 30px; font-size: 15px; }
.ame-page .ame-copy { height: 30px; min-width: 56px; font-size: 14px; }
.ame-page .cam-titles .cam-title-pick.ok { border-color: #1D9E75; color: #085041; font-weight: 700; }