/* ===== 商品管理画面 スプレッドシートスタイル ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== 全体レイアウト ===== */
.管理画面 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f8f0ff 0%, #f0f4ff 50%, #fff5f5 100%);
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: #2D3748;
}

/* ===== ツールバー ===== */
.ツールバー {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 10px 16px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.検索ボックス {
  width: 240px;
  padding: 6px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: #374151;
}

.検索ボックス:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.検索ボックス::placeholder {
  color: #D1D5DB;
}

/* 戻る・進むボタン */
.履歴ボタン群 {
  display: flex;
  gap: 2px;
}

.履歴ボタン {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: white;
}

.履歴ボタン:hover:not(:disabled) {
  background: #1F2937;
}

.履歴ボタン:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.リセットボタン {
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  background: #374151;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.リセットボタン:hover {
  background: #1F2937;
}

/* --- 統一ツールバーボタン --- */
.ツールバーボタン {
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  background: #374151;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}

.ツールバーボタン:hover {
  background: #1F2937;
}

.ツールバーボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

.リロードボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-left: 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
}

.リロードボタン.右寄せ {
  margin-left: auto;
}

.リロードボタン:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.リロードボタン:active:not(:disabled) {
  background: #F3F4F6;
}

.リロードボタン:disabled {
  cursor: not-allowed;
  color: #9CA3AF;
}

.リロードボタン svg {
  display: block;
  flex-shrink: 0;
}

.リロードボタン.リロード中 svg {
  animation: リロード回転 0.8s linear infinite;
}

@keyframes リロード回転 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.ユーザーエリア {
  margin-left: auto;
  position: relative;
}

.メールアドレス {
  color: #6B7280;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  transition: all 0.15s;
  font-weight: 500;
}

.メールアドレス:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.メールアドレス.未設定 {
  color: #DC2626;
  border-color: #FCA5A5;
}

.ユーザーメニューアドレス {
  padding: 8px 16px 6px;
  font-size: 11px;
  color: #9CA3AF;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
}

.ユーザーメニュー {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px 0;
  min-width: 120px;
}

.ユーザーメニュー button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #64748B;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.ユーザーメニュー button:hover {
  background: #F1F5F9;
}

/* ===== ツールメニュー：1ボタンから複数アクションを選ぶドロップダウン（ビープライス／設定など） ===== */
.ツールメニューラッパー {
  position: relative;
  display: inline-block;
}
.ツールメニュー背景 {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.ツールメニュー {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px 0;
  min-width: 260px;
}
.ツールメニュー見出し {
  padding: 7px 16px 5px;
  font-size: 11px;
  color: #9CA3AF;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
}
.ツールメニュー button {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}
.ツールメニュー button:hover {
  background: #F1F5F9;
}
.ツールメニュー button .説明 {
  display: block;
  font-size: 11px;
  color: #94A3B8;
  margin-top: 1px;
}

/* ===== エクスポートモーダル（対象＋形式を選んで出力） ===== */
.エクスポートモーダル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 460px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 22px;
}

.エクスポートモーダル見出し {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}

.エクスポート節 {
  margin-bottom: 16px;
}

.エクスポート節ラベル {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

.エクスポート対象選択 {
  display: flex;
  gap: 8px;
}

.エクスポート対象 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.エクスポート対象:hover {
  border-color: #CBD5E1;
}

.エクスポート対象.選択中 {
  border-color: #374151;
  background: #F8FAFC;
}

.エクスポート対象.無効 {
  opacity: 0.5;
  cursor: not-allowed;
}

.エクスポート形式一覧 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.エクスポート形式グループ {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.02em;
}

.エクスポート形式グループ.区切り {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
}

.エクスポート形式 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
}

.エクスポート形式:hover {
  border-color: #CBD5E1;
  background: #FAFAFA;
}

.エクスポート形式.選択中 {
  border-color: #374151;
  background: #F8FAFC;
}

.エクスポート形式 input {
  margin-top: 2px;
  flex-shrink: 0;
}

.エクスポート形式中身 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.エクスポート形式題 {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}

.エクスポート形式説明 {
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.5;
}

.エクスポートモーダルフッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.エクスポート注記 {
  font-size: 11px;
  color: #9CA3AF;
  flex: 1;
}

.エクスポート進捗表示 {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  flex: 1;
}

.エクスポートフッターボタン群 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.エクスポートキャンセル {
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.エクスポートキャンセル:hover:not(:disabled) {
  background: #F9FAFB;
}

.エクスポート実行ボタン {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: #374151;
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.エクスポート実行ボタン:hover:not(:disabled) {
  background: #1F2937;
}

.エクスポート実行ボタン:disabled,
.エクスポートキャンセル:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== 保存エラー通知 ===== */
.保存エラーバー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  background: #FEF2F2;
  border-bottom: 1px solid #FECACA;
  color: #DC2626;
  font-size: 13px;
  flex-shrink: 0;
}

.保存エラーバー button {
  border: none;
  background: none;
  color: #DC2626;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.撮影済み通知バー {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #1e3a5f;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10002;
  max-width: 90vw;
}

.撮影済み通知バー button {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ===== フィルターバー ===== */
.フィルターバー {
  padding: 6px 16px;
  background: #FAFAFA;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.フィルターバー.折りたたみ {
  padding: 4px 16px;
}

.フィルターヘッダー {
  display: flex;
  align-items: center;
}

.ユーザー名未設定警告 {
  margin-left: auto;
  color: #DC2626;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 8px;
}

.フィルター展開ボタン {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 8px 4px 2px;
  border-radius: 6px;
  font-family: inherit;
}

.フィルター展開ボタン:hover {
  color: #374151;
  background: #F3F4F6;
}

.フィルター矢印 {
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}

.フィルター矢印.展開中 {
  transform: rotate(90deg);
}

.フィルター適用バッジ {
  background: #4F46E5;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ===== 色ツールバー（スプレッドシート風） ===== */
.色ツールバー {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.色ツールバー区切り {
  width: 1px;
  height: 20px;
  background: #E5E7EB;
  margin: 0 6px;
}

.色ツール項目 {
  position: relative;
  display: inline-flex;
}

.色ツールボタン {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
  transition: background 0.12s, border-color 0.12s;
}

.色ツールボタン:hover:not(:disabled) {
  background: #F3F4F6;
  border-color: #E5E7EB;
}

.色ツールボタン:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.色ツールアイコン {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.色ツールアイコン.文字アイコン {
  font-weight: 700;
  font-size: 14px;
  color: #374151;
  border-bottom: 3px solid #DC2626;
  padding-bottom: 1px;
  height: 16px;
}

.色ツールアイコン.枠アイコン {
  font-size: 16px;
  color: #6B7280;
}

.色ツール矢印 {
  font-size: 8px;
  color: #9CA3AF;
}

.色ツールクリア {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  margin-left: 4px;
  transition: all 0.12s;
}

.色ツールクリア:hover:not(:disabled) {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.色ツールクリア:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ===== 色パレットポップオーバー ===== */
.色パレットポップ {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
  min-width: 230px;
}

.色パレットなし {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 8px;
  transition: all 0.12s;
}

.色パレットなし:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  color: #374151;
}

.色パレットなし印 {
  font-size: 14px;
  color: #9CA3AF;
}

.色パレットグリッド {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  margin-bottom: 10px;
}

.色パレットセル {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s, box-shadow 0.08s;
}

.色パレットセル:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: relative;
}

.色パレット履歴 {
  padding: 8px 0;
  margin-bottom: 4px;
  border-top: 1px solid #F3F4F6;
}

.色パレット履歴ラベル {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.色パレット履歴グリッド {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.色パレットカスタム {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

.色パレットカスタムトグル {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.色パレットカスタムトグル:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.色パレットカスタムスウォッチ {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.色パレットカスタムラベル文字 {
  font-size: 11px;
  color: #374151;
  font-weight: 600;
  flex: 1;
  text-align: left;
}

.色パレットカスタム値 {
  font-family: monospace;
  font-size: 10px;
  color: #9CA3AF;
}

/* ネイティブカラー入力はラベル全体に透明オーバーレイ。
   ラベルの click がこの input に委譲され、ネイティブピッカーがラベル位置で開く。 */
.色パレットカスタム隠し入力 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.色パレットカスタム適用 {
  background: #4F46E5;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}

.色パレットカスタム適用:hover {
  background: #4338CA;
}

/* ===== 出品ストア色エディタ ===== */
.色ツール出品ボタン {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.色ツール出品ボタン:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.色ツール出品ボタン.展開中 {
  background: #EEF2FF;
  border-color: #4F46E5;
  color: #4338CA;
}

.色ツール出品アイコン {
  font-size: 13px;
}

.色ツール出品ラベル {
  font-size: 11px;
}

.出品色エディタ {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 380px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品色エディタヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品色エディタタイトル {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}

.出品色エディタ全リセット {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.出品色エディタ全リセット:hover {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.出品色エディタ本体 {
  overflow-y: auto;
  padding: 6px 10px 10px;
}

.出品色行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid #F9FAFB;
}

.出品色行:last-child {
  border-bottom: none;
}

.出品色プレビュー {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.出品色名称 {
  flex: 1;
  font-size: 12px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.出品色入力ラベル {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #9CA3AF;
  cursor: pointer;
}

.出品色入力印 {
  font-size: 10px;
}

.出品色入力 {
  width: 22px;
  height: 22px;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: #FFFFFF;
}

.出品色行リセット {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9CA3AF;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: all 0.12s;
}

.出品色行リセット:hover:not(:disabled) {
  background: #F3F4F6;
  color: #374151;
}

.出品色行リセット:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.フィルター内容 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 0 2px;
}

.フィルター選択ラッパー {
  position: relative;
}

.フィルター選択ボタン {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s;
  color: #374151;
  font-family: inherit;
  white-space: nowrap;
}

.フィルター選択ボタン:hover {
  border-color: #D1D5DB;
  background: #F9FAFB;
}

.フィルター選択ボタン.適用中 {
  border-color: #4F46E5;
  background: #EEF2FF;
  font-weight: 600;
}

.フィルター選択矢印 {
  font-size: 8px;
  color: #9CA3AF;
}

.フィルターポップ {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 4px;
  min-width: 160px;
  max-width: 260px;
}

.フィルタークリア {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-bottom: 1px solid #F3F4F6;
  background: none;
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.フィルタークリア:hover {
  background: #F9FAFB;
}

/* フィルターポップ内の絞込検索ボックス */
.フィルター内検索 {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 4px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.フィルター内検索:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.フィルター内ヒットなし {
  padding: 8px 12px;
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  text-align: center;
}

/* 空欄項目（フィルターポップの一番上に表示するチェックボックス） */
.フィルターポップ項目.空欄項目 {
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
  font-style: italic;
  color: #6B7280;
}
.フィルターポップ項目.空欄項目.選択中 {
  background: #ECFDF5;
  color: #047857;
  font-weight: 600;
}

/* 日付クイック空欄トグル */
.日付クイック空欄 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px;
  padding: 6px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FAFAFA;
  font-size: 12px;
  cursor: pointer;
  color: #6B7280;
  font-style: italic;
}
.日付クイック空欄:hover {
  background: #F3F4F6;
}
.日付クイック空欄.選択中 {
  background: #ECFDF5;
  border-color: #10B981;
  color: #047857;
  font-weight: 600;
  font-style: normal;
}
.日付クイック空欄 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #10B981;
  cursor: pointer;
}

.フィルターポップリスト {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.フィルターポップ項目 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
  color: #374151;
}

.フィルターポップ項目:hover {
  background: #F9FAFB;
}

.フィルターポップ項目.選択中 {
  font-weight: 600;
}

.フィルターポップ項目 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #4F46E5;
  cursor: pointer;
  flex-shrink: 0;
}

/* 日付範囲入力（カレンダーボタン付きテキスト入力） */
.日付フィルター入力欄 {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.日付範囲入力 {
  border: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: #374151;
  width: 82px;
  letter-spacing: 0.3px;
}

.日付範囲入力::placeholder {
  color: #C0C0C0;
  font-size: 11px;
}

.日付カレンダー隠し {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.日付カレンダーボタン {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  padding: 0 1px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.日付カレンダーボタン:hover {
  opacity: 1;
}

.日付範囲区切り {
  color: #9CA3AF;
}

/* 日付クイック選択（月・年・カレンダー / 直接入力） */
.日付範囲ラッパー {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.日付クイックボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #E5E7EB;
  background: white;
  cursor: pointer;
  font-size: 12px;
  color: #374151;
  padding: 5px 12px;
  border-radius: 8px;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.日付クイックボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイックボタン.適用中 {
  border-color: #4F46E5;
  background: #EEF2FF;
  color: #4F46E5;
  font-weight: 600;
}

.日付クイックボタン.開 {
  border-color: #4F46E5;
}

.日付クイックラベル {
  color: #6B7280;
  font-weight: 600;
}

.日付クイックボタン.適用中 .日付クイックラベル {
  color: #4F46E5;
}

.日付クイック範囲 {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.日付クイック矢印 {
  font-size: 9px;
  color: #9CA3AF;
}

.日付クイックポップ {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  min-width: 280px;
  font-size: 12px;
  font-weight: 400;
}

/* 画面右寄り配置時はポップを右寄せ（左に広げる）に反転 */
.日付クイックポップ.右寄せ {
  left: auto;
  right: 0;
}

.日付クイックセクション {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F3F4F6;
}

.日付クイック即時,
.日付クイッククリア {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック即時:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイッククリア {
  margin-left: auto;
  color: #9CA3AF;
}

.日付クイッククリア:hover {
  border-color: #DC2626;
  color: #DC2626;
}

.日付クイック見出し {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 4px 0 4px 0;
}

.日付クイックグリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.日付クイック年ボタン {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック年ボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイック年ボタン.選択中 {
  background: #4F46E5;
  border-color: #4F46E5;
  color: white;
}

.日付クイック月グリッド {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.日付クイック月ボタン {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック月ボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
  background: #EEF2FF;
}

.日付クイック範囲指定 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.日付クイック範囲指定 .日付フィルター入力欄 {
  flex: 1;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 8px;
  background: white;
  transition: border-color 0.15s;
}

.日付クイック範囲指定 .日付フィルター入力欄:focus-within {
  border-color: #6366F1;
}

.日付クイック範囲指定 .日付範囲入力 {
  width: 100%;
}

.チェック済みフィルター {
  padding: 5px 12px;
  border: 1.5px solid #E8E0F0;
  border-radius: 8px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.チェック済みフィルター:hover {
  border-color: #FFD93D;
}

.チェック済みフィルター.適用中 {
  border-color: #FFD93D;
  background: #FFFBEB;
  font-weight: 600;
}

/* ===== テーブルコンテナ ===== */
.テーブルコンテナ {
  flex: 1;
  overflow: auto;
  min-height: 0;
  margin: 0 16px 4px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(108, 92, 231, 0.08);
}

.テーブルコンテナ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.テーブルコンテナ::-webkit-scrollbar-thumb {
  background: #D4C8E8;
  border-radius: 4px;
}

.テーブルコンテナ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== スプレッドシート テーブル ===== */
.スプレッドシート {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* ===== ヘッダー ===== */
.スプレッドシート thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #374151;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  padding-right: 12px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid #1F2937;
  user-select: none;
  letter-spacing: 0.3px;
}

.スプレッドシート thead th.ソート可能 {
  cursor: pointer;
}

.スプレッドシート thead th.ソート可能:hover {
  background: #1F2937;
}

.ソートマーク {
  font-size: 11px;
  opacity: 0.9;
}

/* リサイズハンドル */
.リサイズハンドル {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 1;
}

.リサイズハンドル:hover,
.リサイズハンドル:active {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== 仮想スクロール余白 ===== */
.仮想余白 {
  padding: 0 !important;
  border: none !important;
}

/* ===== セル ===== */
.スプレッドシート tbody td {
  padding: 0;
  border-bottom: 1px solid #F0EDF5;
  border-right: 1px solid #F0EDF5;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  vertical-align: middle;
  background: white;
}

/* 行背景は状態色（tr の inline style）を継承 */
.スプレッドシート tbody td {
  background: inherit;
}

/* ホバー行 — 少しだけ暗くする */
.スプレッドシート tbody tr:hover td {
  filter: brightness(0.96);
}

/* 固定列の背景 — 行色を引き継ぎつつ不透明に */
.スプレッドシート tbody td.固定セル {
  background: inherit;
  border-right: 2px solid #EDE8F5;
}

.スプレッドシート tbody tr:hover td.固定セル {
  filter: brightness(0.96);
}

/* 計算列 — 行色の上にうっすら紫を乗せる */
.スプレッドシート tbody td.計算列 {
  background: rgba(139, 92, 246, 0.04);
}

.スプレッドシート tbody tr:hover td.計算列 {
  background: #FFF0F5;
}

/* 編集可能セルのホバー */
.スプレッドシート tbody td.編集可能 {
  cursor: cell;
}

.スプレッドシート tbody td.編集可能:hover {
  outline: 2px solid #4ECDC4;
  outline-offset: -2px;
  border-radius: 2px;
}

/* 選択中セル — 青ティントはインラインstyleで重ね、枠線用box-shadowと共存する */
.スプレッドシート tbody td.選択中 {
  outline: 2px solid #3B82F6;
  outline-offset: -2px;
}

/* 編集中セル */
.スプレッドシート tbody td.編集中 {
  padding: 0;
  outline: 2px solid #4ECDC4;
  outline-offset: -2px;
  background: #EFFFFD !important;
}

/* ===== セル内コンテンツ ===== */
.表示セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.表示セル.金額セル {
  text-align: right;
}

/* 出品状況セル */
.出品状況セル {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 4px;
  align-items: center;
  cursor: pointer;
  position: relative;
  min-height: 28px;
}

.出品状況プレース {
  color: #D1D5DB;
}

.出品タグ {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  line-height: 1.5;
  white-space: nowrap;
}

/* 出品状況ポップオーバー */
.出品状況ポップ {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px 0;
  width: fit-content;
  min-width: 140px;
  max-height: 340px;
  overflow-y: auto;
}

.出品状況オプション {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.1s;
}

.出品状況オプション:hover {
  background: #F9FAFB;
}

.出品状況オプション.有効 {
  color: #111827;
  font-weight: 600;
}

.出品状況オプション input {
  width: 14px;
  height: 14px;
  accent-color: #4F46E5;
  cursor: pointer;
  flex-shrink: 0;
}

.出品状況ドット {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品タグ小 {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.出品状況名 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.出品状況全解除ボタン {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 4px;
  padding: 5px 10px;
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.出品状況全解除ボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

/* 売値セル */
.売値セル {
  display: flex;
  align-items: center;
  height: 36px;
}

.売値テキスト {
  flex: 1;
  min-width: 0;
}

.売値計算ボタン {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 24px;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.売値計算ボタン:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

/* 売値計算ポップオーバー */
.売値計算ポップ {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 14px 16px;
  width: 230px;
}

.売値計算タイトル {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}

.売値計算行 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12px;
  color: #6B7280;
}

.売値計算行 label {
  font-weight: 600;
  white-space: nowrap;
}

.売値計算値 {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
}

.売値計算デフォルト {
  color: #6366F1;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.売値計算デフォルト:hover {
  color: #4F46E5;
}

.売値計算プラス { color: #059669; }
.売値計算マイナス { color: #DC2626; }

.売値計算入力欄 {
  display: flex;
  align-items: center;
  gap: 2px;
}

.売値計算input {
  width: 90px;
  height: 28px;
  border: 1px solid #D1D5DB;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 13px;
  text-align: right;
  outline: none;
  font-family: inherit;
}

.売値計算input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.売値計算input金額 {
  width: 100px;
}

.売値計算単位 {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
}

.売値計算円 {
  margin-right: 2px;
}

.売値計算区切り {
  border-top: 1px solid #F3F4F6;
  margin: 8px 0;
}

.売値計算確定 {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  background: #6366F1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.売値計算確定:hover {
  background: #4F46E5;
}

/* 数値入力のスピナー非表示 */
.売値計算input::-webkit-inner-spin-button,
.売値計算input::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.売値計算input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* 星セル */
.星セル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}

.星セル:hover {
  transform: scale(1.3);
}

.星セル.済 {
  color: inherit;
  opacity: 1;
}

.星セル.未 {
  color: inherit;
  opacity: 0.3;
}

/* 状態バッジ（色変更モーダル用） */

/* 画像セル */
.画像セル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}

.画像セル:hover {
  transform: scale(1.3);
}

.画像セル.あり {
  opacity: 1;
}

.画像セル.なし {
  opacity: 0.25;
  filter: grayscale(1);
}

/* 画像モーダル */
.画像パネル {
  position: relative;
  background: white;
  border-radius: 12px;
  width: 960px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.画像ドロップオーバーレイ {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(79, 70, 229, 0.12);
  border: 3px dashed #4F46E5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.画像ドロップテキスト {
  font-size: 18px;
  font-weight: 600;
  color: #4F46E5;
  background: white;
  padding: 12px 28px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.画像パネルヘッダー {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
}

.画像パネルタイトル {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  flex: 1;
}

.画像一括ダウンロードボタン {
  padding: 6px 16px;
  background: #059669;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.画像一括ダウンロードボタン:hover {
  background: #047857;
}

.画像一括ダウンロードボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

.画像追加ボタン {
  padding: 6px 16px;
  background: #4F46E5;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.画像追加ボタン:hover {
  background: #4338CA;
}

.画像リセットボタン {
  padding: 6px 14px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.画像リセットボタン:hover {
  background: #e5e7eb;
}

.Shopify画像再同期ボタン {
  padding: 6px 14px;
  background: #95BF47;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.Shopify画像再同期ボタン:hover {
  background: #7AA138;
}
.Shopify画像再同期ボタン:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

.画像グリッド {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  min-height: 240px;
}

.画像空 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
  line-height: 1.8;
}

.画像カード {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s, border-color 0.15s;
}
.画像カード:active { cursor: grabbing; }

.画像カード:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.画像カード.ドラッグ中 {
  opacity: 0.3;
  border-color: #4F46E5;
}
.画像カード.ドロップ左 { box-shadow: -4px 0 0 0 #4F46E5; }
.画像カード.ドロップ右 { box-shadow: 4px 0 0 0 #4F46E5; }
.画像1枚目バッジ {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  background: #065F46;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 左下の縦積み群（撮影者バッジ＋URLをコピー）。右下のモール群と同じく普段は非表示・ホバー時だけ表示 */
.画像カードボタン群 {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.画像カード:hover .画像カードボタン群 {
  opacity: 1;
}
/* 表示はコンテナ側で制御。中のボタンは常時表示・通常フロー配置にして縦に積む */
.画像カードボタン群 .画像URLコピーボタン {
  position: static;
  opacity: 1;
}
/* この画像を撮影した担当名（URLをコピーの上に隙間なく積む） */
.画像撮影者バッジ {
  max-width: 110px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.画像サムネイル {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.画像削除ボタン {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.画像カード:hover .画像削除ボタン {
  opacity: 1;
}

.画像削除ボタン:hover {
  background: #EF4444;
}

.画像URLコピーボタン {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.画像カード:hover .画像URLコピーボタン {
  opacity: 1;
}

.画像URLコピーボタン:hover {
  background: rgba(37,99,235,0.85);
}

.Shopify画像チェック {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #ccc;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.画像カード:hover .Shopify画像チェック {
  opacity: 1;
}
.Shopify画像チェック.選択中 {
  color: #86efac;
}
.Shopify画像チェック input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #65A30D;
  cursor: pointer;
}

/* モール別画像チェック群（Eコンビニ・ワサビ・Shopifyを縦に並べる） */
.モール別画像チェック群 {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.画像カード:hover .モール別画像チェック群 {
  opacity: 1;
}

/* グループ内のラベルは static にして、重ね合わせを解除 */
.モール別画像チェック群 .Shopify画像チェック {
  position: static;
  opacity: 1;
  width: max-content;
  margin-left: auto;
}

.モール別画像チェック群 .Shopify画像チェック:nth-child(1) input[type="checkbox"] {
  accent-color: #B45309;
}
.モール別画像チェック群 .Shopify画像チェック:nth-child(2) input[type="checkbox"] {
  accent-color: #B45309;
}


/* 画像プレビュー */
.画像プレビュー背景 {
  z-index: 10001;
  cursor: zoom-out;
}

.画像プレビュー大 {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}

/* 計算セル */
.計算セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  font-weight: 600;
  font-size: 12px;
  text-align: right;
}

/* ===== セル入力コントロール ===== */
.セル入力 {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  text-align: center;
}

.セル入力[type="number"] {
  text-align: right;
}

/* 数値入力のスピナー（上下矢印）を非表示 */
.セル入力[type="number"]::-webkit-inner-spin-button,
.セル入力[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.セル入力[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.セル選択 {
  cursor: pointer;
}

/* 選択検索: セルには値だけ表示、ポップ内に検索＋候補リスト（既存値のみ選択可） */
.セル選択検索ラッパー {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}
.セル選択検索表示 {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
}

/* ポップ（body 直下にポータルレンダリング） */
.セル選択検索ポップ {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  max-width: 280px;
}
.セル選択検索ポップ検索 {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 5px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.セル選択検索ポップ検索:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.セル選択検索ポップリスト {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid #F3F4F6;
}
.セル選択検索項目 {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.セル選択検索項目:hover {
  background: #EEF2FF;
}
.セル選択検索項目.選択中 {
  background: #E0E7FF;
  font-weight: 600;
}
.セル選択検索クリア {
  padding: 6px 10px;
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  font-style: italic;
}
.セル選択検索クリア:hover {
  background: #F9FAFB;
}
.セル選択検索なし {
  padding: 8px 10px;
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  text-align: center;
}
.セル選択検索ヒント {
  padding: 4px 12px 7px;
  font-size: 11px;
  color: #6B7280;
}
.セル選択検索新規ボタン {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background: #4338CA;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.セル選択検索新規ボタン:hover {
  background: #3730A3;
}

/* 日付入力 */
.日付入力コンテナ {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
}

.日付テキスト {
  flex: 1;
  min-width: 0;
}

.日付ピッカー非表示 {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.カレンダーボタン {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 36px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.カレンダーボタン:hover {
  opacity: 1;
}

/* ===== 読み込み中・データなし ===== */
.読込中 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #B8C4D4;
  font-size: 14px;
  gap: 8px;
}

.読込スピナー {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #EDE8F5;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.データなし {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #94A3B8;
  font-size: 14px;
}

/* ===== ページネーション ===== */
.ページネーション {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: white;
  margin: 0 16px 12px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 24px rgba(108, 92, 231, 0.08);
  flex-shrink: 0;
}

.ページボタン {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  transition: all 0.2s;
}

.ページボタン:hover:not(:disabled) {
  background: #374151;
  color: white;
}

.ページボタン.現在 {
  background: #374151;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
}

.ページボタン:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ページ情報 {
  font-size: 12px;
  color: #94A3B8;
  margin: 0 8px;
}

/* ===== 色変更モーダル ===== */
.モーダル背景 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* === 担当（ユーザー名）選択モーダル === */
.担当選択モーダル {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 420px;
  max-width: 92vw;
  padding: 22px;
}
.担当選択見出し {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 6px;
}
.担当選択説明 {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 16px;
  line-height: 1.5;
}
.担当選択再確認 {
  font-size: 12px;
  color: #9A3412;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.担当選択グリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.担当選択ボタン {
  padding: 10px 4px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.担当選択ボタン:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}
.担当選択ボタン.選択中 {
  border-color: #2563EB;
  background: #2563EB;
  color: #fff;
}
.担当選択その他 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #F3F4F6;
}
.担当選択その他ラベル {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 8px;
}
.担当選択その他行 {
  display: flex;
  gap: 8px;
}
.担当選択その他入力 {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
}
.担当選択その他入力:focus {
  outline: none;
  border-color: #2563EB;
}
.担当選択その他ボタン {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.担当選択その他ボタン:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}
.担当選択フッター {
  margin-top: 16px;
  text-align: right;
}
.担当選択キャンセル {
  padding: 7px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* === 右上の通知カード群（発送リマインダー＋記入漏れチェックを縦積み） === */
.右上通知 {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;  /* ラッパ自体（空き領域・カード間の余白）はクリックを拾わない。カードだけ auto で受ける */
}

/* === 発送リマインダー（右上の通知カード） === */
.発送リマインダー {
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  pointer-events: auto;  /* ラッパが pointer-events:none のため、カードは明示的に有効化 */
}
/* 記入漏れチェックカード（発送リマインダーの見た目を流用しamber系アクセント） */
.記入漏れカード .発送リマインダーヘッダー { background: #FFFBEB; color: #92400E; }
.発送リマインダー行.記入漏れ行 { background: #FFFBEB; color: #92400E; font-weight: 600; }
.発送リマインダーヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
.発送リマインダー閉じる {
  border: none;
  background: none;
  color: #9CA3AF;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.発送リマインダー閉じる:hover { color: #4B5563; }
.発送リマインダー行 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 12.5px;
  line-height: 1.5;
}
.発送リマインダー行:last-child { border-bottom: none; }
.発送リマインダー行.入金待ち { background: #EFF6FF; color: #1E40AF; }
.発送リマインダー行.発送待ち { background: #FFF7ED; color: #9A3412; }
.発送リマインダー行.遅延 { background: #FEF2F2; color: #B91C1C; font-weight: 700; }
.発送リマインダー文 { flex: 1; }
.発送リマインダー詳細 {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.発送リマインダー詳細:hover { opacity: 0.8; }
.発送リマインダーヘッダー右 { display: flex; align-items: center; gap: 2px; }
.発送リマインダー設定ボタン {
  border: none;
  background: none;
  color: #6B7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.発送リマインダー設定ボタン:hover { color: #2563EB; }

/* 発送リマインダー絞り込み中チップ（ツールバー） */
.発送絞り込み中チップ {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 8px;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* === 発送リマインダー設定モーダル === */
.発送設定モーダル {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 540px;
  max-width: 94vw;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
}
.発送設定見出し { font-size: 16px; font-weight: 700; color: #1F2937; margin-bottom: 4px; }
.発送設定説明 { font-size: 12px; color: #6B7280; margin-bottom: 16px; line-height: 1.5; }
.発送設定項目 { margin-bottom: 16px; }
.発送設定ラベル { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.発送設定共通注 { font-size: 11px; font-weight: 500; color: #9CA3AF; margin-left: 6px; }
.発送設定期限行 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.発送設定期限入力 { width: 70px; padding: 6px 8px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 13px; }
.発送設定グループ {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #FAFAFA;
}
.発送設定グループ名 { font-size: 14px; font-weight: 700; color: #1F2937; margin-bottom: 8px; }
.発送設定小ラベル { font-size: 11.5px; color: #6B7280; margin: 10px 0 6px; font-weight: 600; }
.発送設定担当者, .発送設定カテゴリ { display: flex; flex-wrap: wrap; gap: 6px; }
.発送設定チップ {
  padding: 5px 12px;
  border: 1.5px solid #D1D5DB;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.12s;
}
.発送設定チップ:hover { border-color: #2563EB; }
.発送設定チップ.選択中 { border-color: #2563EB; background: #2563EB; color: #fff; }
.発送設定追加行 { display: flex; gap: 6px; margin-top: 8px; }
.発送設定追加入力 { flex: 1; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 12.5px; }
.発送設定追加ボタン {
  padding: 6px 12px; border: 1.5px solid #D1D5DB; border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap;
}
.発送設定追加ボタン:hover { border-color: #2563EB; color: #2563EB; }
.発送設定カテゴリ項目 {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1.5px solid #E5E7EB; border-radius: 8px;
  font-size: 12.5px; color: #374151; cursor: pointer; background: #fff;
}
.発送設定カテゴリ項目.選択中 { border-color: #2563EB; background: #EFF6FF; color: #1E40AF; }
.発送設定タグ入力 { width: 100%; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 12.5px; box-sizing: border-box; }
.発送設定注記 { font-size: 12px; color: #9CA3AF; }
.発送設定全員遅延 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid #FED7AA;
  border-radius: 8px;
  background: #FFF7ED;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #9A3412;
}
.発送設定全員遅延 input { margin: 2px 0 0; flex: 0 0 auto; }
.発送設定全員遅延注 { display: block; font-size: 11.5px; font-weight: 500; color: #B45309; margin-top: 3px; line-height: 1.5; }
.発送設定フッター { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.発送設定キャンセル {
  padding: 8px 18px; border: 1.5px solid #D1D5DB; border-radius: 8px; background: #fff;
  color: #6B7280; font-size: 13px; font-weight: 600; cursor: pointer;
}
.発送設定保存 {
  padding: 8px 20px; border: none; border-radius: 8px; background: #2563EB;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* === 記入漏れチェック設定モーダル（発送設定の部品を流用＋ルール編集用） === */
.記入漏れ設定モーダル { width: 860px; }
.記入漏れルール {
  border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #FAFAFA;
}
.記入漏れルール.無効 { opacity: 0.55; }
.記入漏れルール上 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.記入漏れ開閉 {
  flex: 0 0 auto; width: 22px; height: 22px; border: none; background: none;
  color: #6B7280; font-size: 12px; cursor: pointer; padding: 0; line-height: 1;
}
.記入漏れ開閉:hover { color: #2563EB; }
.記入漏れ要約 {
  font-size: 12px; color: #6B7280; padding: 4px 2px 0 30px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.記入漏れ要約:hover { color: #374151; }
.記入漏れ基準日選択 {
  padding: 4px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
.記入漏れ基準日選択:focus { outline: none; border-color: #A78BFA; }
.記入漏れルール名 {
  flex: 1; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.記入漏れ有効 {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #374151;
  font-weight: 600; white-space: nowrap; cursor: pointer;
}
.記入漏れ削除 {
  padding: 5px 10px; border: 1.5px solid #FCA5A5; border-radius: 8px; background: #fff;
  color: #DC2626; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.記入漏れ削除:hover { background: #FEF2F2; }
.記入漏れルール小ラベル { font-size: 11.5px; color: #6B7280; margin: 10px 0 6px; font-weight: 600; }
.記入漏れルール下 { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #374151; }
.記入漏れ追加ボタン {
  width: 100%; padding: 9px; border: 1.5px dashed #93C5FD; border-radius: 8px; background: #EFF6FF;
  color: #1E40AF; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 4px;
}
.記入漏れ追加ボタン:hover { background: #DBEAFE; }
.発送設定保存:hover { background: #1D4ED8; }

.色変更パネル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 620px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.色変更ヘッダー {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #E5E7EB;
}

.色変更タイトル {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.色リセットボタン {
  padding: 4px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
}

.色リセットボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.色変更閉じる {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 16px;
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.色変更閉じる:hover {
  background: #F3F4F6;
  color: #374151;
}

.状態のみ色オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
}

.状態のみ色オプション input {
  width: 16px;
  height: 16px;
  accent-color: #4F46E5;
  cursor: pointer;
}

.色変更リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
}

.色変更セクション区切り {
  padding: 10px 18px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.色変更セクション区切り + .色変更セクション区切り,
.色変更リスト + .色変更セクション区切り {
  border-top: 1px solid #E5E7EB;
  margin-top: 4px;
  padding-top: 12px;
}

.色リセットボタン小 {
  font-size: 11px;
  padding: 2px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.色リセットボタン小:hover {
  background: #F3F4F6;
  color: #374151;
}

.出品色グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 8px 18px 18px;
}

.出品色行 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.色変更行 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F4F6;
}

.色変更行:last-child {
  border-bottom: none;
}

.色変更状態名 {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  min-width: 130px;
  text-align: center;
  white-space: nowrap;
}

.色ラベル {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
}

.色ラベル input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1.5px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

/* 文字色切り替えボタン */
.文字色ボタン {
  padding: 3px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.文字色ボタン.白 {
  background: #1F2937;
  color: #FFFFFF;
}

.文字色ボタン.黒 {
  background: #FFFFFF;
  color: #1F2937;
}

/* 色変更セクション見出し */
.色変更セクション {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  padding: 12px 0 4px;
  border-top: 1px solid #E5E7EB;
  margin-top: 6px;
}

/* 計算値サンプル */
.色変更計算サンプル {
  font-size: 13px;
  font-weight: 700;
  min-width: 80px;
}

.色変更計算ラベル {
  font-size: 11px;
  color: #9CA3AF;
  flex: 1;
}

/* ===== 商品登録モーダル ===== */
.商品登録パネル {
  background: white;
  border-radius: 14px;
  width: 680px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 24px;
}

.商品登録ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.商品登録タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.登録接頭辞選択 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #374151;
}

.登録接頭辞選択 .登録接頭辞ラベル {
  font-weight: 600;
}

.登録接頭辞選択 label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.登録接頭辞選択 input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.登録接頭辞入力 {
  padding: 4px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  width: 200px;
  font-family: inherit;
}

.登録接頭辞入力:focus {
  outline: none;
  border-color: #6366F1;
}

.ドロップエリア {
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.2s;
  cursor: default;
}

.ドロップエリア.ドラッグ中 {
  border-color: #4F46E5;
  background: #EEF2FF;
}

.ドロップアイコン {
  font-size: 40px;
  margin-bottom: 12px;
}

.ドロップテキスト {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.ドロップサブテキスト {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 16px;
}

.ファイル選択ラベル {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  color: #4F46E5;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ファイル選択ラベル:hover {
  background: #EEF2FF;
  border-color: #4F46E5;
}

.ファイル入力非表示 {
  display: none;
}

.登録ファイル一覧 {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.登録ファイル項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.登録ファイル名 {
  flex: 1;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.登録ファイルサイズ {
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
}

.登録ファイル削除 {
  border: none;
  background: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.登録ファイル削除:hover {
  color: #EF4444;
}

.AI読取操作行 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.AIモデル選択 {
  padding: 8px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  background: white;
  cursor: pointer;
  outline: none;
}

.AIモデル選択:focus {
  border-color: #6366F1;
}

.AI読取ボタン {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #4F46E5;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.AI読取ボタン:hover:not(:disabled) {
  background: #4338CA;
}

.AI読取ボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

.AI読取エラー {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  color: #DC2626;
  font-size: 12px;
  word-break: break-all;
}

.AI読取結果エリア {
  margin-top: 12px;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  background: #EEF2FF;
  overflow: hidden;
}

.AI読取結果ヘッダー {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4338CA;
  border-bottom: 1px solid #C7D2FE;
}

.AI処理メモ {
  padding: 8px 14px;
  font-size: 12px;
  color: #6B7280;
  border-bottom: 1px solid #C7D2FE;
  white-space: pre-wrap;
  line-height: 1.6;
}

.AI読取結果項目 {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #E0E7FF;
}

.AI読取結果項目:last-child {
  border-bottom: none;
}

.AI読取結果番号 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AI読取結果詳細 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: #374151;
}

.AI読取結果詳細 b {
  color: #6B7280;
  font-weight: 500;
}

.AI登録実行ボタン {
  width: 100%;
  padding: 12px;
  border: none;
  background: #059669;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.AI登録実行ボタン:hover {
  background: #047857;
}

.商品登録区切り {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
}

.商品登録区切り::before,
.商品登録区切り::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}

.商品登録区切り span {
  font-size: 12px;
  color: #9CA3AF;
}

.空行追加エリア {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.空行追加ラベル {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

.空行追加数入力 {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.空行追加数入力:focus {
  outline: none;
  border-color: #4F46E5;
}

.空行追加ボタン {
  flex: 1;
  padding: 12px;
  border: 2px dashed #CBD5E1;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.空行追加ボタン:hover {
  border-color: #4F46E5;
  color: #4F46E5;
  background: #EEF2FF;
}

/* ===== プルダウン設定モーダル ===== */
.プルダウン設定パネル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.プルダウン設定ヘッダー {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #E5E7EB;
}

.プルダウン設定タイトル {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.プルダウンリセットボタン {
  padding: 4px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
}

.プルダウンリセットボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.プルダウン設定リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
}

.プルダウンセクション {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.プルダウンセクション:last-child {
  border-bottom: none;
}

.プルダウンセクションタイトル {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.未使用一括削除 {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.未使用一括削除:hover {
  background: #FCA5A5;
  color: white;
}

.ソート切替 {
  display: flex;
  background: #F3F4F6;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  margin-left: auto;
}

.ソート切替ボタン {
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ソート切替ボタン.選択中 {
  background: white;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.ソート切替ボタン:hover:not(.選択中) {
  color: #6B7280;
}

.プルダウン項目一覧 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.プルダウン項目タグ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #F3F4F6;
  border-radius: 20px;
  font-size: 12px;
  color: #374151;
}

.プルダウン項目タグ[draggable="true"] {
  cursor: grab;
}

.プルダウン項目タグ[draggable="true"]:active {
  cursor: grabbing;
}

.プルダウン項目タグ.ドラッグ中 {
  opacity: 0.4;
}

.プルダウン項目タグ.ドロップ先 {
  box-shadow: -2px 0 0 0 #2563EB;
}

.プルダウン項目削除 {
  border: none;
  background: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.プルダウン項目削除:hover {
  color: #EF4444;
}

.プルダウン追加行 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.プルダウン追加入力 {
  flex: 1;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.プルダウン追加入力:focus {
  border-color: #6366F1;
}

.プルダウン追加ボタン {
  padding: 5px 12px;
  border: 1.5px solid #6366F1;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.プルダウン追加ボタン:hover {
  background: #4F46E5;
}

/* ===== 選択合計バー ===== */
.選択合計バー {
  position: fixed;
  bottom: 16px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: #1F2937;
  color: #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-size: 13px;
  z-index: 100;
  animation: 選択合計フェードイン 0.15s ease-out;
}

@keyframes 選択合計フェードイン {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.選択合計項目 {
  white-space: nowrap;
}

.選択合計項目 b {
  color: white;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== 列設定モーダル ===== */
.列設定パネル {
  background: white;
  border-radius: 14px;
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.列設定ヘッダー {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 8px;
}

.列設定タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.列設定リセット {
  padding: 4px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  color: #6B7280;
}

.列設定リセット:hover { background: #F9FAFB; }

.列設定説明 {
  padding: 4px 24px 10px;
  font-size: 11px;
  color: #9CA3AF;
}

.列設定リスト {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 18px;
  position: relative;
}

.列設定行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #F3F4F6;
}

.列設定行.非表示中 {
  opacity: 0.4;
}

.列設定行 {
  cursor: grab;
  border-radius: 6px;
  padding-left: 4px;
  padding-right: 4px;
  user-select: none;
}

.列設定行.ドラッグ元 {
  opacity: 0.15;
}

.列設定行.ドラッグ先上 {
  box-shadow: 0 -2px 0 0 #4F46E5 inset;
}

.列設定行.ドラッグ先下 {
  box-shadow: 0 2px 0 0 #4F46E5 inset;
}

.列ドラッグゴースト {
  display: none;
  position: absolute;
  left: 16px;
  right: 16px;
  pointer-events: none;
  z-index: 10;
  transform: translateY(-50%);
  background: white;
  border: 2px solid #4F46E5;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4F46E5;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
}

.列設定チェック input {
  width: 15px;
  height: 15px;
  accent-color: #4F46E5;
  cursor: pointer;
}

.列設定ラベル {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
}

.列設定種類 {
  font-size: 10px;
  color: #9CA3AF;
  background: #F3F4F6;
  padding: 1px 6px;
  border-radius: 4px;
}

.列設定操作 {
  display: flex;
  gap: 2px;
}

.列設定矢印 {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.列設定矢印:hover:not(:disabled) { background: #F3F4F6; }
.列設定矢印:disabled { opacity: 0.2; cursor: default; }

.列設定固定 {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.列設定固定:hover { opacity: 0.7; }
.列設定固定.固定中 { opacity: 1; }

/* ===== 更新履歴モーダル ===== */
.履歴パネル {
  background: white;
  border-radius: 14px;
  width: 1000px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.履歴ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 12px;
}

.履歴タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.履歴フィルター行 {
  display: flex;
  gap: 8px;
  padding: 0 24px 12px;
}

.履歴フィルター行 select,
.履歴フィルター行 input {
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.履歴フィルター行 input {
  flex: 1;
}

.履歴フィルター行 select:focus,
.履歴フィルター行 input:focus {
  border-color: #4F46E5;
}

.履歴更新ボタン {
  padding: 6px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.履歴更新ボタン:hover { background: #F9FAFB; }

.履歴リスト {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 18px;
}

.履歴項目 {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.履歴項目:last-child { border-bottom: none; }

.履歴項目ヘッダー {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.履歴日時 {
  font-size: 11px;
  color: #9CA3AF;
}

.履歴ユーザー {
  font-size: 11px;
  font-weight: 600;
  color: #4F46E5;
}

.履歴変更一覧 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.履歴変更行 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}

.履歴登録番号 {
  font-weight: 600;
  color: #6B7280;
  min-width: 55px;
}

.履歴カラム名 {
  background: #F3F4F6;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: #374151;
}

.履歴旧値 {
  color: #DC2626;
  text-decoration: line-through;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.履歴矢印 { color: #9CA3AF; }

.履歴新値 {
  color: #059669;
  font-weight: 500;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.履歴タグ {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.履歴タグ.新規 { background: #DCFCE7; color: #166534; }
.履歴タグ.削除 { background: #FEE2E2; color: #991B1B; }
.履歴タグ.復元 { background: #DBEAFE; color: #1E40AF; }

.履歴空 {
  text-align: center;
  color: #9CA3AF;
  padding: 40px 0;
  font-size: 13px;
}

.履歴アイコンセル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.履歴アイコンセル:hover {
  opacity: 1;
}

.英語情報アイコン {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.英語情報アイコン:hover { opacity: 1; }
.英語情報アイコン.あり { opacity: 0.7; }
.英語情報ポップ {
  position: fixed;
  z-index: 100;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 10px 14px;
  width: 260px;
}
.英語情報ポップヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.英語情報ポップヘッダー button { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 14px; }
.英語情報フィールド {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.英語情報フィールド label {
  font-size: 12px;
  color: #6b7280;
  width: 45px;
  flex-shrink: 0;
}
.英語情報フィールド input, .英語情報フィールド select {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.行履歴パネル {
  width: 800px;
  max-width: 95vw;
}

/* ===== 集計バー ===== */
.集計バー {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 12px;
  padding: 8px 16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(108, 92, 231, 0.07);
  font-size: 12px;
  flex-wrap: wrap;
}

.集計項目 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.集計ラベル {
  color: #8B8FA3;
  font-weight: 500;
}

.集計値 {
  color: #2D3748;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.集計値.プラス { color: #059669; }
.集計値.マイナス { color: #DC2626; }

.集計区切り {
  width: 1px;
  height: 16px;
  background: #E5E7EB;
  margin: 0 4px;
}

.集計期間バッジ {
  display: inline-flex;
  align-items: center;
  color: #374151;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== 右クリックメニュー ===== */
.コンテキストメニュー背景 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
}

.コンテキストメニュー {
  position: fixed;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 140px;
  z-index: 201;
}

.コンテキストメニュー button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}

.コンテキストメニュー button:hover {
  background: #F3F4F6;
}

.コンテキスト区切り {
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0;
}

.コンテキストメニュー button.削除メニュー {
  color: #DC2626;
  font-weight: 600;
}

.コンテキストメニュー button.削除メニュー:hover {
  background: #FEF2F2;
}

.コンテキストメニュー button.撮影QRメニュー {
  color: #1E40AF;
  font-weight: 600;
}

.コンテキストメニュー button.撮影QRメニュー:hover {
  background: #EFF6FF;
}

/* サブメニュー（一括ステータス変更） */
.コンテキストサブメニュー親 {
  position: relative;
}

.サブメニューボタン {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.サブメニューボタン:hover {
  background: #F3F4F6;
}

.コンテキストサブメニュー {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  z-index: 210;
}

/* 右に収まらない場合は左に展開 */
.サブメニュー左 .コンテキストサブメニュー {
  left: auto;
  right: 100%;
}

/* 下揃え：最後の項目が親ボタンと同じ高さに来るように上方向へ展開 */
.サブメニュー下揃え .コンテキストサブメニュー {
  top: auto;
  bottom: 0;
}

.コンテキストサブメニュー親:hover .コンテキストサブメニュー {
  display: block;
}

.コンテキストサブメニュー button {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.コンテキストサブメニュー button:hover {
  background: #F3F4F6;
}

.コンテキストサブメニュー button.帳票作成不可 {
  color: #9CA3AF;
  cursor: not-allowed;
  background: transparent;
}

.コンテキストサブメニュー button.帳票作成不可:hover {
  background: transparent;
}

.コンテキストメニュー button.帳票作成メニュー,
.コンテキストサブメニュー button.帳票作成メニュー {
  color: #6D28D9;
  font-weight: 600;
}

.コンテキストメニュー button.入金確認メニュー {
  color: #F59E0B;
  font-weight: 600;
}

.コンテキストメニュー button.入金確認メニュー:hover {
  background: #FEF3C7;
}

.請求書確定ボタン {
  background: #F59E0B;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.請求書確定ボタン:hover:not(:disabled) {
  background: #D97706;
}

.請求書確定ボタン:disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ===== 成約確定 閉じ時確認ダイアログ ===== */
.成約確認背景 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.成約確認パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 24px 28px;
  min-width: 360px;
  max-width: 440px;
}
.成約確認本文 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  margin-bottom: 18px;
}
.成約確認補足 {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  margin-top: 8px;
}
.成約確認ボタン群 {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.成約確認はい,
.成約確認いいえ {
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: 96px;
}
.成約確認はい {
  background: #F59E0B;
  color: white;
}
.成約確認はい:hover {
  background: #D97706;
}
.成約確認いいえ {
  background: #F3F4F6;
  color: #374151;
}
.成約確認いいえ:hover {
  background: #E5E7EB;
}

.一括変更ダイアログ {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 20px 24px;
  min-width: 320px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.一括変更ダイアログヘッダー {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 14px;
}

.一括変更ダイアログ本体 {
  margin-bottom: 16px;
}

.一括変更ダイアログ入力 {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.一括変更ダイアログ入力:focus {
  border-color: #6366F1;
}

.一括変更ダイアログ本体 .日付範囲入力 {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  box-sizing: border-box;
}

.一括売値モード選択 {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #374151;
}

.一括売値モード選択 label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.一括売値モード選択 input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.一括変更ダイアログボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.一括変更キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.一括変更キャンセル:hover {
  background: #F3F4F6;
}

.一括変更OK {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.一括変更OK:hover {
  background: #4F46E5;
}

/* ===== 手数料編集モーダル ===== */
.手数料検索欄 {
  padding: 10px 18px 0;
}

.手数料検索入力 {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.手数料検索入力:focus {
  border-color: #6366F1;
}

.手数料設定リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.手数料行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #F3F4F6;
}

.手数料販売先名 {
  flex: 1;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.手数料入力 {
  width: 80px;
  padding: 4px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.手数料入力:focus {
  border-color: #6366F1;
}

.手数料単位 {
  font-size: 13px;
  color: #9CA3AF;
  width: 16px;
}

/* ===== 精算書作成モーダル ===== */

.精算書パネル {
  background: white;
  border-radius: 14px;
  width: 720px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 24px 28px;
}

.精算書ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.精算書タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.帳票タブ {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #E5E7EB;
  margin: 0 -28px;
  padding: 0 28px;
}

.帳票タブボタン {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: inherit;
}

.帳票タブボタン:hover {
  color: #374151;
}

.帳票タブボタン.選択中 {
  color: #4F46E5;
  border-bottom-color: #4F46E5;
}

.帳票言語切替 {
  display: flex;
  gap: 0;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #E5E7EB;
}

.帳票言語ボタン {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: white;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.帳票言語ボタン:not(:last-child) {
  border-right: 1.5px solid #E5E7EB;
}

.帳票言語ボタン:hover {
  background: #F9FAFB;
}

.帳票言語ボタン.選択中 {
  background: #4F46E5;
  color: white;
  font-weight: 600;
}

.精算書フォーム {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-top: 16px;
}

.精算書ラベル {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  min-width: 0;
}

.精算書ラベル.全幅 {
  grid-column: 1 / -1;
}

/* 寸法セル（W×H×D 表示） */
.寸法セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #111827;
  cursor: cell;
}
.寸法プレース {
  color: #9CA3AF;
}

/* 寸法編集ポップ（W×H×D の3入力） */
.寸法編集パネル {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  min-width: 280px;
}
.寸法編集タイトル {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 8px;
}
.寸法編集行 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.寸法編集ラベル {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #6B7280;
  font-weight: 600;
}
.寸法編集input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.寸法編集input::-webkit-outer-spin-button,
.寸法編集input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.寸法編集input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.寸法編集記号 {
  font-size: 14px;
  color: #6B7280;
  padding-bottom: 6px;
}
.寸法編集単位 {
  font-size: 11px;
  color: #6B7280;
  padding-bottom: 6px;
  margin-left: 2px;
}
.寸法編集ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.寸法編集クリア,
.寸法編集確定 {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
}
.寸法編集クリア {
  background: white;
  color: #6B7280;
  border-color: #D1D5DB;
}
.寸法編集クリア:hover {
  background: #F9FAFB;
}
.寸法編集確定 {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}
.寸法編集確定:hover {
  background: #3730A3;
}

/* Shopify出品モーダルのサイズ列（W×H×D 横並び） */
.Shopify寸法入力群 {
  display: flex;
  align-items: center;
  gap: 2px;
}
.Shopify寸法input {
  width: 42px;
  padding: 3px 4px;
  border: 1px solid #D1D5DB;
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.Shopify寸法input::-webkit-outer-spin-button,
.Shopify寸法input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.Shopify寸法input:focus {
  outline: none;
  border-color: #4F46E5;
}
.Shopify寸法記号 {
  font-size: 11px;
  color: #6B7280;
}

/* 振込先変更欄（請求書フォーム内、全幅で表示） */
.振込先変更欄 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.振込先変更欄.全幅 {
  grid-column: 1 / -1;
}
.振込先変更行群 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.振込先変更現在値群 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}
.振込先変更現在値ラベル {
  font-size: 11px;
  color: #4F46E5;
  font-weight: 700;
  background: #EEF2FF;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
.振込先変更現在値ラベル.発行元 {
  color: #047857;
  background: #ECFDF5;
}
/* 発行元行：ラベル右側のコンテンツを自前で wrap させる（住所も会社と同じ x に揃う） */
.振込先変更コンテンツ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}
.振込先住所 {
  flex-basis: 100%;
}
.振込先変更現在値項目 {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.振込先変更項目見出し {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.振込先変更ボタン {
  background: white;
  border: 1px solid #6366F1;
  color: #4F46E5;
  padding: 5px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.振込先変更ボタン:hover {
  background: #EEF2FF;
}

/* 振込先設定モーダル */
.振込先設定パネル {
  background: white;
  border-radius: 10px;
  max-width: 720px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.振込先設定ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E5E7EB;
}
.振込先設定タイトル {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.振込先設定セクション見出し {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 8px;
  padding-left: 8px;
  border-left: 4px solid #4F46E5;
}
.振込先設定グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.振込先設定グリッド label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.振込先設定グリッド label.振込先設定広 {
  grid-column: 1 / -1;
}
.振込先設定グリッド label input {
  padding: 6px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.振込先設定グリッド label input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.振込先設定上書き {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px;
  padding: 10px 14px;
  background: #FEF3C7;
  border: 1px solid #FBBF24;
  border-radius: 6px;
  font-size: 13px;
  color: #92400E;
  font-weight: 600;
  cursor: pointer;
}
.振込先設定操作 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.振込先設定キャンセル,
.振込先設定適用 {
  padding: 8px 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
}
.振込先設定キャンセル {
  background: white;
  color: #6B7280;
  border-color: #D1D5DB;
}
.振込先設定キャンセル:hover {
  background: #F9FAFB;
}
.振込先設定適用 {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}
.振込先設定適用:hover {
  background: #3730A3;
}

.請求書追加料金ブロック {
  grid-column: 1 / -1;
  border-top: 1px solid #E5E7EB;
  padding-top: 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.請求書追加料金タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.請求書追加料金ヘルプ {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.5;
}

.請求書追加料金グリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.請求書按分プレビュー {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}

.請求書按分スクロール {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 4px;
}

.請求書按分スクロール thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.請求書按分ヘッダー {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}

.請求書按分表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.請求書按分表 th {
  background: #F3F4F6;
  padding: 5px 8px;
  text-align: left;
  font-weight: 600;
  color: #6B7280;
  border-bottom: 1px solid #E5E7EB;
}

.請求書按分表 td {
  padding: 5px 8px;
  border-bottom: 1px solid #F3F4F6;
  color: #1F2937;
}

.請求書按分表 td.金額セル {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.精算書ラベル input[type="text"],
.精算書ラベル input[type="number"],
.精算書ラベル select {
  padding: 10px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.精算書ラベル input[type="text"]:focus,
.精算書ラベル input[type="number"]:focus,
.精算書ラベル select:focus {
  border-color: #6366F1;
}

.精算書ラベル select.プレースホルダー風 {
  color: #9CA3AF;
}
.精算書ラベル select.プレースホルダー風 option {
  color: #111827;
}
.精算書ラベル select.プレースホルダー風 option[value=""] {
  color: #9CA3AF;
}

/* ===== 検索コンボボックス ===== */
.検索コンボ {
  position: relative;
  width: 100%;
}
.検索コンボ input[type="text"] {
  padding-right: 36px;
}
.検索コンボ矢印 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6B7280;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.検索コンボ矢印:hover {
  background: #F3F4F6;
  color: #374151;
}
.検索コンボ候補 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}
.検索コンボ候補項目 {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  color: #1F2937;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.検索コンボ候補項目:hover {
  background: #EEF2FF;
}
.検索コンボ候補項目.選択中 {
  background: #E0E7FF;
  font-weight: 600;
  color: #4338CA;
}

.精算書チェック {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  grid-column: 1 / -1;
}

.精算書チェック input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.手動入力欄 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
}
.手動入力ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.手動入力追加ボタン {
  border: 1.5px solid #6366F1;
  background: white;
  color: #6366F1;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.手動入力追加ボタン:hover {
  background: #EEF2FF;
}
.手動入力リスト {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.手動入力行 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.手動入力アイテム {
  flex: 1;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.手動入力アイテム:focus {
  border-color: #6366F1;
}
.手動入力金額 {
  width: 130px;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.手動入力金額:focus {
  border-color: #6366F1;
}
.手動入力削除ボタン {
  border: none;
  background: transparent;
  color: #9CA3AF;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.手動入力削除ボタン:hover {
  background: #FEE2E2;
  color: #DC2626;
}

.精算書選択モード {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3730A3;
}

.精算書エラー {
  grid-column: 1 / -1;
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 8px;
  font-size: 13px;
  color: #B91C1C;
  line-height: 1.5;
}

.精算書期間入力 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.精算書期間入力 .日付フィルター入力欄 {
  flex: 1;
}

.精算書期間入力 .日付範囲入力 {
  width: 100%;
  font-size: 14px;
}

.精算書期間入力 .日付範囲入力::placeholder {
  font-size: 14px;
}

.精算書期間入力 .日付カレンダーボタン {
  font-size: 18px;
  padding: 0 4px;
}

.精算書期間入力 span {
  color: #9CA3AF;
  font-weight: 400;
}

.精算書プレビュー {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: #F0FDF4;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  margin-top: 16px;
}

.精算書生成ボタン {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #059669;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 16px;
}

.精算書生成ボタン:hover:not(:disabled) {
  background: #047857;
}

.精算書生成ボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.精算書ボタン群 {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.精算書ボタン群 .精算書生成ボタン {
  flex: 1;
  margin-top: 0;
}

.精算書CSVボタン {
  padding: 12px 18px;
  border: 2px solid #059669;
  border-radius: 10px;
  background: white;
  color: #059669;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.精算書CSVボタン:hover:not(:disabled) {
  background: #F0FDF4;
}

.精算書CSVボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 棚卸モード ===== */

/* 棚卸ボタンは他のツールバーボタンと同じスタイル */

/* 進行中の棚卸に参加するツールバーボタン（他メンバーが棚卸中だと気づけるよう棚卸色で強調） */
.ツールバーボタン.棚卸参加ボタン {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  border-color: #6D28D9;
  font-weight: 700;
}
.ツールバーボタン.棚卸参加ボタン:hover {
  filter: brightness(1.08);
}

/* 棚卸バー */
.棚卸バー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  font-size: 13px;
  gap: 16px;
}
.棚卸バー左 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.棚卸ラベル {
  font-weight: 700;
  font-size: 14px;
  background: rgba(255,255,255,0.2);
  padding: 2px 10px;
  border-radius: 4px;
  animation: 棚卸パルス 2s infinite;
}
@keyframes 棚卸パルス {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.棚卸進捗 b {
  font-size: 16px;
}
.棚卸パーセント {
  opacity: 0.8;
  font-size: 12px;
}
.棚卸未バーコード {
  opacity: 0.7;
  font-size: 12px;
}
.棚卸バー中央 {
  display: flex;
  gap: 4px;
}
.棚卸フィルターボタン {
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.棚卸フィルターボタン:hover {
  background: rgba(255,255,255,0.15);
}
.棚卸フィルターボタン.選択中 {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
  font-weight: 700;
}
.棚卸バー右 {
  display: flex;
  gap: 8px;
}
.棚卸終了ボタン {
  padding: 5px 16px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.棚卸終了ボタン:hover {
  background: rgba(255,255,255,0.3);
}
/* 自分だけ棚卸を抜ける「離脱」ボタン（終了より控えめな見た目） */
.棚卸離脱ボタン {
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.棚卸離脱ボタン:hover {
  background: rgba(255,255,255,0.2);
}

/* 棚卸中の隠しinput（スキャナー入力受け取り用、視覚的には非表示） */
.棚卸隠し入力 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: -1;
}

/* 棚卸バー右側のスキャン専用切替 */
.棚卸スキャン専用切替 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
}

.棚卸スキャン専用切替 input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  accent-color: #4F46E5;
}

/* 棚卸通知 */
.棚卸通知 {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  z-index: 9999;
  animation: 棚卸通知アニメ 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  white-space: nowrap;
}
@keyframes 棚卸通知アニメ {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.棚卸通知_成功 {
  background: #059669;
  color: #fff;
}
.棚卸通知_済み {
  background: #D97706;
  color: #fff;
}
.棚卸通知_エラー {
  background: #DC2626;
  color: #fff;
}
.棚卸通知_対象外 {
  background: #6B7280;
  color: #fff;
}

/* 棚卸 行ハイライト */
tr.棚卸スキャン済み {
  background-color: #ECFDF5 !important;
}
tr.棚卸スキャン済み td {
  background-color: #ECFDF5 !important;
}
tr.棚卸未スキャン {
  background-color: #FFF7ED !important;
}
tr.棚卸未スキャン td {
  background-color: #FFF7ED !important;
}

/* 棚卸設定モーダル */
.棚卸設定モーダル {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 760px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.棚卸設定タイトル {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1F2937;
}
.棚卸設定説明 {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 16px;
}
.棚卸設定グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
.棚卸設定列 {
  min-width: 0;
}
.棚卸設定小見出し {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.棚卸所属一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.棚卸ステータス一括 {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.棚卸ステータス一括 button {
  padding: 4px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  background: #F9FAFB;
  cursor: pointer;
  font-size: 12px;
}
.棚卸ステータス一括 button:hover {
  background: #E5E7EB;
}
.棚卸ステータス一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.棚卸ステータス項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  border-left: 4px solid #D1D5DB;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.棚卸ステータス項目:hover {
  background: #F3F4F6;
}
.棚卸ステータス項目.選択中 {
  background: #EDE9FE;
}
.棚卸ステータス項目 input {
  accent-color: #7C3AED;
}
.棚卸設定オプション {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #F9FAFB;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
}
.棚卸オプション項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.棚卸オプション項目 input {
  accent-color: #7C3AED;
}
.棚卸設定情報 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #E5E7EB;
  font-size: 14px;
}
.棚卸警告 {
  color: #D97706;
  font-size: 12px;
}
.棚卸設定ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.棚卸キャンセル {
  padding: 8px 20px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.棚卸キャンセル:hover {
  background: #F3F4F6;
}
.棚卸実行ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #7C3AED;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.棚卸実行ボタン:hover {
  background: #6D28D9;
}
.棚卸実行ボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 棚卸結果モーダル */
.棚卸結果モーダル {
  background: #fff;
  border-radius: 12px;
  padding: 32px 40px;
  max-width: 1100px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.棚卸結果タイトル {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1F2937;
}
.棚卸結果サマリー {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.棚卸結果項目 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
}
.棚卸結果数値 {
  font-size: 36px;
  font-weight: 700;
  color: #374151;
}
.棚卸結果数値.成功 { color: #059669; }
.棚卸結果数値.警告 { color: #DC2626; }
.棚卸結果数値.情報 { color: #D97706; }
.棚卸結果ラベル {
  font-size: 13px;
  color: #6B7280;
  margin-top: 6px;
}
.棚卸未確認リスト {
  margin-bottom: 20px;
}
.棚卸未確認リスト h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}
.棚卸未確認テーブル {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}
.棚卸未確認テーブル table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.棚卸未確認テーブル th {
  position: sticky;
  top: 0;
  background: #F3F4F6;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #D1D5DB;
}
.棚卸未確認テーブル td {
  padding: 5px 10px;
  border-bottom: 1px solid #F3F4F6;
}
.棚卸バーコードなし行 {
  background: #FEF3C7;
}
.棚卸なしラベル {
  color: #9CA3AF;
  font-style: italic;
}
.棚卸省略 {
  text-align: center;
  padding: 8px;
  color: #6B7280;
  font-size: 12px;
}
.棚卸結果ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.棚卸CSV出力 {
  padding: 8px 20px;
  border: 1px solid #7C3AED;
  border-radius: 6px;
  background: #fff;
  color: #7C3AED;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.棚卸CSV出力:hover {
  background: #EDE9FE;
}
.棚卸確定ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #DC2626;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.棚卸確定ボタン:hover {
  background: #B91C1C;
}

/* ===== 棚卸スキャン画像（管理番号の付け間違い照合用） ===== */
.棚卸スキャン画像 {
  background: #fff;
  border: 2px solid #7C3AED;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.棚卸スキャン画像ヘッダー {
  display: flex;
  align-items: center;
  gap: 8px;
}
.棚卸スキャン画像管理番号 {
  font-size: 20px;
  font-weight: 700;
  color: #6D28D9;
  letter-spacing: 0.5px;
}
.棚卸スキャン画像バッジ {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.棚卸スキャン画像バッジ.済み { background: #D97706; }
.棚卸スキャン画像バッジ.対象外 { background: #6B7280; }
.棚卸スキャン画像閉じる {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #6B7280;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.棚卸スキャン画像閉じる:hover { color: #111; }
.棚卸スキャン画像商品名 {
  font-size: 13px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.棚卸スキャン画像メイン {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  border-radius: 8px;
  overflow: hidden;
}
.棚卸スキャン画像メイン img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.棚卸スキャン画像メイン.空,
.棚卸スキャン画像メイン.画像なし {
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 600;
}
.棚卸スキャン画像メイン.画像なし {
  color: #DC2626;
  background: #FEF2F2;
}
.棚卸スキャン画像サムネ列 {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.棚卸スキャン画像サムネ {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #F3F4F6;
}
.棚卸スキャン画像サムネ.選択中 {
  border-color: #7C3AED;
}
.棚卸スキャン画像サムネ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 表示位置：中央に大きく（オーバーレイなしでスキャン操作を妨げない） */
.棚卸スキャン画像_中央 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 90vw);
  z-index: 500;
}
.棚卸スキャン画像_中央 .棚卸スキャン画像メイン {
  height: min(60vh, 520px);
}

/* 表示位置：右側パネル */
.棚卸スキャン画像_右 {
  position: fixed;
  top: 140px;
  right: 16px;
  width: 320px;
  z-index: 500;
}
.棚卸スキャン画像_右 .棚卸スキャン画像メイン {
  height: 300px;
}

/* 表示位置：棚卸バー直下（通常フローで横並び・コンパクト表示） */
.棚卸スキャン画像_バー下 {
  border-radius: 0;
  border-width: 0 0 2px 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像ヘッダー {
  flex: 0 0 auto;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像商品名 {
  flex: 1 1 200px;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像メイン {
  height: 110px;
  width: 150px;
  flex: 0 0 auto;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像サムネ列 {
  flex: 1 1 auto;
}

/* 棚卸設定モーダル：スキャン画像の表示位置選択 */
.棚卸画像表示設定 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.棚卸画像表示ラベル {
  font-weight: 600;
  color: #374151;
}
.棚卸画像表示ボタン群 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.棚卸画像表示ボタン {
  padding: 5px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
}
.棚卸画像表示ボタン:hover {
  background: #F3F4F6;
}
.棚卸画像表示ボタン.選択中 {
  background: #7C3AED;
  border-color: #7C3AED;
  color: #fff;
  font-weight: 700;
}

/* ===== Shopify出品 ===== */
.Shopifyメニュー {
  color: #65A30D !important;
  font-weight: 600;
}

/* ===== モールに出品（Eコンビニ／ワサビ） ===== */
.コンテキストメニュー button.モール出品メニュー {
  color: #B45309;
  font-weight: 600;
}
.コンテキストメニュー button.モール出品メニュー:hover {
  background: #FEF6E7;
}
.Shopify出品モーダル {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 1700px;
  width: 97vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.Shopify閉じるボタン {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.Shopify閉じるボタン:hover { color: #374151; background: #f3f4f6; }
.Shopify出品モーダル h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #1a1a1a;
}
.Shopify出品ヘッダー {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.Shopify出品説明 {
  margin: 0;
  color: #666;
  font-size: 13px;
}
.Shopify公開設定 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.Shopify公開設定 label {
  color: #374151;
  font-weight: 600;
}
.Shopify公開設定 select {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

/* コレクション選択 */
.Shopifyコレクション選択ラッパー {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.Shopifyコレクション選択ラッパー label {
  color: #374151;
  font-weight: 600;
}
.Shopifyコレクションボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.Shopifyコレクションボタン:hover:not(:disabled) {
  border-color: #6366F1;
  color: #4F46E5;
}
.Shopifyコレクションボタン:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.Shopifyコレクション矢印 {
  font-size: 9px;
  color: #9CA3AF;
}
.Shopifyコレクションポップ {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}
.Shopifyコレクションヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 11px;
  color: #6B7280;
  font-weight: 600;
}
.Shopifyコレクションクリア {
  border: none;
  background: transparent;
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 4px;
}
.Shopifyコレクションクリア:hover {
  text-decoration: underline;
}
.Shopifyコレクションリスト {
  overflow-y: auto;
  padding: 4px;
}
.Shopifyコレクション項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
}
.Shopifyコレクション項目:hover {
  background: #F3F4F6;
}
.Shopifyコレクション項目.選択中 {
  background: #EEF2FF;
  color: #4F46E5;
  font-weight: 600;
}
.Shopifyコレクション項目 input[type="checkbox"] {
  cursor: pointer;
}
.Shopifyコレクション空 {
  padding: 16px;
  text-align: center;
  color: #9CA3AF;
  font-size: 12px;
}

/* 行ごとのコレクション選択 */
.Shopify列コレクション {
  width: 100px;
  text-align: left;
}
.Shopify行コレクションボタン {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: all 0.15s;
}
.Shopify行コレクションボタン:hover:not(:disabled) {
  border-color: #6366F1;
  color: #4F46E5;
}
.Shopify行コレクションボタン:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.Shopify行コレクションポップ {
  position: fixed;
  z-index: 1100;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  width: 280px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.Shopify出品テーブル {
  overflow: auto;
  flex: 1;
  min-height: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.Shopify出品テーブル table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.Shopify出品テーブル thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.Shopify出品テーブル th {
  background: #f8f9fa;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}
.Shopify出品テーブル td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.Shopify出品テーブル tbody tr:hover {
  background: #f8fdf5;
}
.Shopifyエラー行 {
  background: #fef2f2 !important;
}
.Shopify列番号 { width: 50px; }
.Shopify列管理 { width: 65px; }
.Shopify列名前 { min-width: 240px; }
.Shopify商品名セル {
  display: flex;
  align-items: center;
  gap: 4px;
}
.Shopify列名前 input.Shopify商品名入力 {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  background: #f9fafb;
  color: #374151;
  cursor: default;
}
.Shopify列名前 input.Shopify商品名入力.編集中 {
  border-color: #65A30D;
  background: #ffffff;
  cursor: text;
}
.Shopify列名前 input.Shopify商品名入力.編集中:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.Shopify商品名アイコン {
  flex-shrink: 0;
  border: 1px solid #E5E7EB;
  background: white;
  color: #6B7280;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  padding: 0;
}
.Shopify商品名アイコン:hover:not(:disabled) {
  border-color: #65A30D;
  color: #65A30D;
}
.Shopify商品名アイコン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.Shopify列画像 { width: 60px; }
.Shopify画像読込中 { color: #9ca3af; font-size: 12px; }
.Shopify画像なし { color: #9ca3af; font-size: 12px; }
.Shopify画像バッジ {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 3px 8px 3px 3px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.Shopify画像バッジ:hover {
  border-color: #65A30D;
  box-shadow: 0 0 0 2px rgba(101,163,13,.15);
}
.Shopify画像プレビュー {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
}
.Shopify画像件数 {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
}
.Shopify画像展開行 td {
  padding: 0 !important;
  background: #f9fafb;
}
.Shopify画像展開パネル {
  padding: 10px 16px 14px;
}
.Shopify画像展開ヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}
.Shopify画像展開ヘッダー button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #9ca3af;
  padding: 2px 4px;
}
.Shopify画像展開ヘッダー button:hover {
  color: #374151;
}
.Shopify画像展開グリッド {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.Shopify画像展開項目 {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.15s, opacity 0.15s;
}
.Shopify画像展開項目.選択中 { cursor: grab; }
.Shopify画像展開項目.選択中:active { cursor: grabbing; }
.Shopify画像展開項目.ドラッグ中 { opacity: 0.3; }
.Shopify画像展開項目.ドロップ左 { box-shadow: -4px 0 0 0 #4F46E5; }
.Shopify画像展開項目.ドロップ右 { box-shadow: 4px 0 0 0 #4F46E5; }
.Shopify画像展開項目 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.Shopify画像展開項目.選択中 {
  border-color: #65A30D;
  opacity: 1;
}
.Shopify画像展開項目.未選択 {
  border-color: #d1d5db;
  opacity: 0.4;
}
.Shopify画像展開項目:hover {
  opacity: 0.85;
}
.Shopify画像1枚目 {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  background: #065F46;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}
.Shopify画像チェックマーク {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: #65A30D;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: none;
}
.Shopify列ブランド { width: 130px; }
.Shopify列ブランド input {
  width: 115px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列カテゴリー { width: 140px; }
.Shopify列カテゴリー select {
  width: 130px;
  padding: 3px 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列ランク { width: 65px; }
.Shopify列ランク select {
  width: 55px;
  padding: 3px 2px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列色 { width: 80px; }
.Shopify列色 input {
  width: 65px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列原価 { width: 80px; }
.Shopify列売値 { width: 90px; }
.Shopify列売値 input {
  width: 75px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列売値 input:focus {
  border-color: #65A30D;
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.Shopify列状況 { width: 35px; }
.Shopifyスピナー { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.Shopifyエラー { cursor: help; }
.Shopifyエラーまとめ {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 12px;
  color: #991b1b;
  max-height: 80px;
  overflow-y: auto;
}
.Shopifyエラーまとめ p { margin: 2px 0; }
.Shopify出品ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.Shopifyキャンセル {
  padding: 8px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
}
.Shopifyキャンセル:hover { background: #f3f4f6; }
.Shopify出品実行ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #65A30D;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.Shopify出品実行ボタン:hover { background: #4d7c0f; }
.Shopify出品実行ボタン:disabled {
  background: #a3a3a3;
  cursor: not-allowed;
}

/* ===== 撮影QRコードモーダル ===== */
.撮影QRモーダル {
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  position: relative;
  min-width: 320px;
}
.撮影QRモーダル h3 {
  font-size: 16px;
  color: #374151;
  margin-bottom: 4px;
}
.撮影QR管理番号 {
  font-size: 20px;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 12px;
}
.撮影QR画像 {
  width: 280px;
  height: 280px;
  image-rendering: pixelated;
}
.撮影QR説明 {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 8px;
}

/* 撮影用スマホページ：撮影(スキャン開始)/一覧をタブで切り替えて1つずつ表示（別のQRの誤読を防ぐ） */
.スマホページQR切替 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.スマホページQRタブ {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.スマホページQRタブ.選択中 {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
}
.スマホページQR項目 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.スマホページQR_URL {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
  word-break: break-all;
}

/* ===== 請求書作成モーダル（右クリック専用） ===== */

.請求書パネル {
  background: white;
  border-radius: 14px;
  width: 1000px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.請求書モーダルヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.請求書モーダルタイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.請求書モーダル本体 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.請求書商品リスト {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow-y: auto;
  flex: 0 1 auto;
  min-height: 0;
}

.請求書商品表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.請求書商品表 th {
  background: #F9FAFB;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #E5E7EB;
  font-size: 12px;
}

.請求書商品表 td {
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.請求書商品表 tbody tr:last-child td {
  border-bottom: none;
}

.請求書商品表 .請求書番号 {
  text-align: center;
  color: #6B7280;
}

.請求書商品表 .請求書管理番号 {
  font-family: 'Yu Gothic', monospace;
  font-size: 12px;
  color: #4B5563;
}

.請求書商品表 .請求書商品名 {
  word-break: break-word;
  line-height: 1.4;
  padding: 4px 6px;
}

.請求書商品名入力 {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  line-height: 1.4;
}

.請求書商品名入力:hover {
  border-color: #E5E7EB;
  background: #FAFAFA;
}

.請求書商品名入力:focus {
  outline: none;
  border-color: #4F46E5;
  background: white;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書商品表 .請求書売値 {
  text-align: right;
  color: #6B7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.請求書商品表 .請求書売価 {
  padding: 6px 8px;
}

.請求書売価入力 {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  background: white;
}

.請求書売価入力:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書売価入力.未入力 {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.請求書商品表 .請求書値段調整 {
  padding: 6px 8px;
}

.請求書値段調整入力 {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  background: white;
  color: #374151;
}

.請求書値段調整入力::placeholder {
  color: #C0C0C0;
  font-size: 11px;
}

.請求書値段調整入力:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書商品表 tfoot td {
  background: #F9FAFB;
  padding: 10px 12px;
  font-weight: 700;
  border-top: 1.5px solid #E5E7EB;
}

.請求書合計ラベル {
  text-align: right;
  color: #374151;
}

.請求書合計値 {
  text-align: right;
  color: #1F2937;
  font-size: 14px;
}

.請求書フォーム {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  flex-shrink: 0;
}

.請求書モーダルボタン群 {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.請求書モーダルボタン群 .精算書生成ボタン {
  flex: 1;
  margin-top: 0;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.請求書モーダルボタン群 .精算書CSVボタン {
  padding: 10px 18px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  box-sizing: border-box;
}

.請求書モーダルボタン群 .請求書確定ボタン {
  padding: 12px 18px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 右クリック：請求書作成エントリ */
.コンテキストメニュー button.請求書作成メニュー {
  color: #DB2777;
  font-weight: 600;
}

.コンテキストメニュー button.請求書作成メニュー:hover:not(:disabled) {
  background: #FCE7F3;
}

.コンテキストメニュー button.請求書作成不可 {
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ===== タグ印刷（右クリックメニュー）：黒寄りの濃い深緑。Shopifyの黄緑(#65A30D)とは別系統 ===== */
.コンテキストメニュー button.タグ印刷メニュー {
  color: #14532D;
  font-weight: 600;
}

.コンテキストメニュー button.タグ印刷メニュー:hover {
  background: #F0FDF4;
}

/* ===== 出品中確認モーダル ===== */
.出品中確認パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品中確認ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品中確認タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.出品中確認本体 {
  padding: 16px 20px;
  overflow-y: auto;
}

.出品中確認チェック {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1F2937;
  cursor: pointer;
  padding: 4px 0;
}

.出品中確認チェック input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.出品中確認区切り {
  height: 1px;
  background: #F3F4F6;
  margin: 12px 0;
}

.出品中確認サブタイトル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 8px;
}

.出品中確認プラットフォーム一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.出品中確認オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

.出品中確認オプション:hover {
  background: #F9FAFB;
}

.出品中確認オプション input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品中確認ドット {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品中確認名 {
  flex: 1;
}

.出品中確認フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品中確認デフォルト保存 {
  background: white;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
}

.出品中確認デフォルト保存:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.出品中確認ボタン群 {
  display: flex;
  gap: 8px;
}

.出品中確認キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.出品中確認キャンセル:hover {
  background: #F3F4F6;
}

.出品中確認OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.出品中確認OK:hover {
  background: #4F46E5;
}

/* ===== 出品状況一括変更ダイアログ ===== */
.出品状況一括パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品状況一括ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品状況一括タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.出品状況一括本体 {
  padding: 16px 20px;
  overflow-y: auto;
}

.出品状況一括モード選択 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.出品状況一括モードラベル {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1F2937;
  cursor: pointer;
}

.出品状況一括モードラベル input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品状況一括チェック操作 {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

.出品状況一括小ボタン {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
}

.出品状況一括小ボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.出品状況一括プラットフォーム一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.出品状況一括オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

.出品状況一括オプション:hover {
  background: #F9FAFB;
}

.出品状況一括オプション input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品状況一括ドット {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品状況一括名 {
  flex: 1;
}

.出品状況一括フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品状況一括全クリアボタン {
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
}

.出品状況一括全クリアボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

.出品状況一括ボタン群 {
  display: flex;
  gap: 8px;
}

.出品状況一括キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.出品状況一括キャンセル:hover {
  background: #F3F4F6;
}

.出品状況一括OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.出品状況一括OK:hover {
  background: #4F46E5;
}

/* ===== 寸法一括変更ダイアログ ===== */
.寸法一括パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.寸法一括ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.寸法一括タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.寸法一括本体 {
  padding: 16px 20px;
}

.寸法一括ヒント {
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 10px;
}

.寸法一括行 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.寸法一括ラベル {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #6B7280;
  gap: 4px;
}

.寸法一括input {
  width: 80px;
  padding: 6px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.寸法一括input:focus {
  border-color: #6366F1;
}

.寸法一括記号 {
  align-self: end;
  margin-bottom: 6px;
  color: #9CA3AF;
  font-size: 14px;
}

.寸法一括単位 {
  align-self: end;
  margin-bottom: 6px;
  margin-left: 4px;
  color: #6B7280;
  font-size: 12px;
}

.寸法一括フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.寸法一括全クリアボタン {
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
}

.寸法一括全クリアボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

.寸法一括ボタン群 {
  display: flex;
  gap: 8px;
}

.寸法一括キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.寸法一括キャンセル:hover {
  background: #F3F4F6;
}

.寸法一括OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.寸法一括OK:hover {
  background: #4F46E5;
}
/* ===== 出品モーダル ===== */

.出品モーダル_オーバーレイ {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: #2D3748;
}

.出品モーダル_ボックス {
  width: 1480px;
  max-width: 97vw;
  height: 92vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品モーダル_ヘッダ {
  padding: 14px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #f8f0ff 0%, #f0f4ff 100%);
}

.出品モーダル_タイトル {
  font-size: 16px;
  font-weight: 700;
}

.出品モーダル_閉じる {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #6B7280;
  border-radius: 6px;
}

.出品モーダル_閉じる:hover {
  background: rgba(0, 0, 0, 0.06);
}

.出品モーダル_本体 {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1.5fr 1fr;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* Tampermonkeyスクリプト未導入・古い場合の注意バナー */
.出品モーダル_スクリプト警告 {
  margin: 10px 12px 0;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px solid #fb923c;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #9a3412;
}

/* ===== 商品リスト ===== */
.出品モーダル_商品リスト {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px;
  overflow-y: auto;
  background: #fafafa;
}

.出品モーダル_セクションラベル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  padding: 4px 6px 8px;
}

.出品モーダル_商品行 {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  transition: background 0.1s;
}

.出品モーダル_商品行:hover {
  background: #f3f4f6;
}

.出品モーダル_商品行.選択中 {
  background: #ede9fe;
  border-color: #7C3AED;
}

.出品モーダル_管理番号 {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
}

.出品モーダル_商品名 {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 入力フォーム ===== */
.出品モーダル_入力 {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}

.出品モーダル_入力グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.出品モーダル_ラベル付き {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.出品モーダル_ラベル付き.テキストエリア {
  margin-top: 8px;
}

.出品モーダル_ラベル付き.チェック {
  flex-direction: column;
  align-items: stretch;
}

.出品モーダル_チェック値 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  color: #2D3748;
  cursor: pointer;
}

.出品モーダル_チェック値:hover {
  background: #f9fafb;
}

.出品モーダル_チェック文字 {
  color: #6B7280;
  font-weight: 500;
}

.出品モーダル_ラベル {
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 3px;
}

.出品モーダル_インプット {
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
}

.出品モーダル_インプット:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.出品モーダル_インプット.読取専用 {
  background: #f9fafb;
  color: #6B7280;
}

.出品モーダル_セレクト {
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
  cursor: pointer;
}

.出品モーダル_セレクト:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.出品モーダル_テキストエリア {
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
  min-height: 60px;
  resize: vertical;
}

.出品モーダル_テキストエリア:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

/* ===== プレビュー ===== */
.出品モーダル_プレビュー {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0;
}

.出品モーダル_タブ {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.出品モーダル_タブボタン {
  padding: 6px 12px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: #6B7280;
}

.出品モーダル_タブボタン.選択中 {
  background: #ede9fe;
  border-color: #7C3AED;
  color: #5B21B6;
  font-weight: 700;
}

.出品モーダル_プレビューテキスト {
  flex: 0 0 280px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 10px;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 11px;
  resize: none;
  outline: none;
  white-space: pre;
  overflow: auto;
  background: #fafafa;
  color: #2D3748;
  min-height: 0;
}

.出品モーダル_プレビューボタン群 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* 常時表示の主要アクション（Eコンビニに出品＋商品説明をコピー）。横並びで幅はflexで配分 */
.出品モーダル_アクションバー {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

/* 確認用プレビューの折りたたみトグル */
.出品モーダル_折りたたみトグル {
  width: 100%;
  text-align: left;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #4B5563;
  cursor: pointer;
  margin-bottom: 8px;
}
.出品モーダル_折りたたみトグル:hover {
  background: #E5E7EB;
}

/* ===== カテゴリID表示 ===== */
.出品モーダル_カテゴリID表示 {
  flex: 0 0 280px;
  overflow-y: auto;
  background: #fafafa;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 10px;
}

.出品モーダル_カテゴリブロック {
  margin-bottom: 12px;
}

.出品モーダル_カテゴリブロック:last-child {
  margin-bottom: 0;
}

.出品モーダル_カテゴリヘッダ {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #E5E7EB;
}

.出品モーダル_カテゴリリスト {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.出品モーダル_カテゴリ行 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'Consolas', 'Menlo', monospace;
  padding: 2px 4px;
  border-radius: 4px;
}

.出品モーダル_カテゴリ行:hover {
  background: #f3f4f6;
}

.出品モーダル_カテゴリモール {
  width: 110px;
  color: #6B7280;
  flex-shrink: 0;
}

.出品モーダル_カテゴリID値 {
  flex: 1;
  color: #2D3748;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.出品モーダル_カテゴリコピー {
  padding: 2px 10px;
  font-size: 10px;
  font-family: inherit;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  color: #2D3748;
}

.出品モーダル_カテゴリコピー:hover {
  background: #ede9fe;
  border-color: #7C3AED;
}

.出品モーダル_カテゴリ警告 {
  font-size: 11px;
  color: #DC2626;
  padding: 4px 0;
}

/* ===== 画像カスタマイズ ===== */
.出品モーダル_画像カスタマイズ {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border-top: 1px solid #E5E7EB;
  padding-top: 10px;
  min-height: 0;
}

.出品モーダル_画像タブ {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
  align-items: center;
}

.出品モーダル_画像タブボタン {
  padding: 5px 12px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #6B7280;
}

.出品モーダル_画像タブボタン.選択中 {
  background: #B45309;
  border-color: #B45309;
  color: #ffffff;
}

.出品モーダル_画像タブDLボタン {
  margin-left: auto;
}

.出品モーダル_画像タブDLボタン .出品モーダル_ボタン {
  padding: 5px 12px;
  font-size: 11px;
}

.出品モーダル_画像ヘッダ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.出品モーダル_画像保存ボタン {
  padding: 4px 12px;
  border: 1px solid #B45309;
  background: #ffffff;
  color: #B45309;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.出品モーダル_画像保存ボタン:hover:not(:disabled) {
  background: #FEF6E7;
}

.出品モーダル_画像保存ボタン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.出品モーダル_画像グリッド {
  flex: 1;
  min-height: 0; /* flex内でスクロールを効かせる（これがないと全行展開して親をはみ出す） */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: 120px; /* 行の高さを固定。aspect-ratioだと枚数が多いとき高さ計算が崩れて重なるため */
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
  background: #fafafa;
  border-radius: 6px;
  align-content: start;
}

.出品モーダル_画像項目 {
  position: relative;
  height: 100%; /* グリッド行(120px)に合わせて固定。重なり防止 */
  border: 2px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.1s, transform 0.05s;
  user-select: none;
}

.出品モーダル_画像項目 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.出品モーダル_画像項目.選択中 {
  border-color: #B45309;
}

.出品モーダル_画像項目.未選択 {
  opacity: 0.45;
  border-style: dashed;
}

.出品モーダル_画像項目.未選択:hover {
  opacity: 0.8;
  border-color: #B45309;
}

.出品モーダル_画像項目.ドラッグ中 {
  opacity: 0.3;
}

.出品モーダル_画像項目.ドロップ左 {
  box-shadow: -3px 0 0 0 #B45309;
}

.出品モーダル_画像項目.ドロップ右 {
  box-shadow: 3px 0 0 0 #B45309;
}

.出品モーダル_画像TOP {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #B45309;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

.出品モーダル_画像番号 {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(180, 83, 9, 0.85);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

.出品モーダル_画像除外マーク {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(107, 114, 128, 0.85);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

/* ===== フッター ===== */
.出品モーダル_フッタ {
  border-top: 1px solid #E5E7EB;
  padding: 12px 20px;
  background: #fafafa;
  position: relative;
}

.出品モーダル_モール選択 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.出品モーダル_モールグループ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.出品モーダル_モールラベル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  flex-shrink: 0;
  margin-right: 4px;
}

.出品モーダル_モールチェック {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.出品モーダル_モールチェック:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* メッセージはフッターの上に浮かせる（レイアウトを押し広げないので画像エリアが縮まない） */
.出品モーダル_メッセージ {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 6px);
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.出品モーダル_メッセージ:hover {
  background: #fde68a;
}
.出品モーダル_メッセージ_閉じる {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: #92400e;
}

.出品モーダル_アクション {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.出品モーダル_ボタン {
  padding: 7px 16px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #2D3748;
  transition: background 0.1s;
}

.出品モーダル_ボタン:hover:not(:disabled) {
  background: #f3f4f6;
}

.出品モーダル_ボタン.アクセント {
  background: #7C3AED;
  border-color: #7C3AED;
  color: #ffffff;
}

.出品モーダル_ボタン.アクセント:hover:not(:disabled) {
  background: #6D28D9;
}

.出品モーダル_ボタン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.出品モーダル_ヘッダボタン群 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== プルダウン編集モーダル ===== */
.プルダウン編集_オーバーレイ {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.プルダウン編集_ボックス {
  width: 720px;
  max-width: 92%;
  max-height: 86%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.プルダウン編集_ヘッダ {
  padding: 12px 18px;
  border-bottom: 1px solid #E5E7EB;
  background: linear-gradient(90deg, #f8f0ff 0%, #f0f4ff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.プルダウン編集_タイトル {
  font-size: 15px;
  font-weight: 700;
}

.プルダウン編集_本体 {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.プルダウン編集_項目 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E5E7EB;
}

.プルダウン編集_項目:last-child {
  border-bottom: none;
}

.プルダウン編集_ラベル {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
}

.プルダウン編集_チップ群 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.プルダウン編集_チップ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  border: 1px solid #E5E7EB;
}

.プルダウン編集_チップ.デフォルト {
  background: #f3f4f6;
  color: #6B7280;
}

.プルダウン編集_チップ.追加 {
  background: #FEF6E7;
  border-color: #B45309;
  color: #B45309;
}

.プルダウン編集_チップ {
  cursor: grab;
  user-select: none;
}

.プルダウン編集_チップ.ドラッグ中 {
  opacity: 0.35;
}

.プルダウン編集_チップ.ドロップ左 {
  box-shadow: -2px 0 0 0 #B45309;
}

.プルダウン編集_チップ.ドロップ右 {
  box-shadow: 2px 0 0 0 #B45309;
}

.プルダウン編集_削除 {
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #B45309;
  padding: 0 2px;
  margin-left: 2px;
  font-weight: 700;
}

.プルダウン編集_削除:hover {
  color: #DC2626;
}

.プルダウン編集_チップ.デフォルト .プルダウン編集_削除 {
  color: #9CA3AF;
}

.プルダウン編集_チップ.デフォルト .プルダウン編集_削除:hover {
  color: #DC2626;
}

.プルダウン編集_追加行 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.プルダウン編集_入力 {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.プルダウン編集_入力:focus {
  border-color: #B45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}

.プルダウン編集_フッタ {
  padding: 10px 18px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fafafa;
}

/* ===== ID編集モーダル ===== */
.ID編集_セクション {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
}

.ID編集_セクションラベル {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 8px;
}

.ID編集_行 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ID編集_行 > span {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  color: #6B7280;
}

.ID編集_行 .出品モーダル_インプット {
  flex: 1;
}

.ID編集_補足 {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  line-height: 1.5;
}

.ID編集_メッセージ {
  font-size: 12px;
  color: #92400e;
  margin-right: auto;
}

/* ===== テンプレ編集モーダル ===== */
.テンプレ編集_ボックス {
  width: 920px;
  max-width: 95%;
}

.テンプレ編集_説明 {
  font-size: 12px;
  color: #6B7280;
  background: #f9fafb;
  padding: 8px 12px;
  border-radius: 6px;
  line-height: 1.6;
}

.テンプレ編集_プレースホルダー一覧 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.テンプレ編集_プレースホルダーチップ {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Consolas', 'Menlo', monospace;
  background: #ede9fe;
  color: #5B21B6;
  border: 1px solid #c4b5fd;
  cursor: help;
}

.テンプレ編集_テキスト {
  flex: 1;
  min-height: 400px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 12px;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 12px;
  outline: none;
  resize: vertical;
  white-space: pre;
  background: #ffffff;
  color: #2D3748;
  line-height: 1.6;
}

.テンプレ編集_テキスト:focus {
  border-color: #B45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}
/* 月初値下げモーダル */
.値下げ_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.値下げ_panel {
  background: #fff;
  width: min(1280px, 92vw);
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.値下げ_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.値下げ_header h2 {
  margin: 0;
  font-size: 17px;
}
.値下げ_header h2 small {
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
  color: #6b7280;
}
.値下げ_閉じる {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}
.値下げ_ヘッダー右 {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ヘッダー右上のスクリプトコピー（初回セットアップ用・控えめな白ボタン） */
.値下げ_ヘッダー右ボタン {
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.値下げ_ヘッダー右ボタン:hover { background: #f9fafb; border-color: #9ca3af; }
/* 注記内の強調（ワサビ＝CSV読込で付与 を目立たせる） */
.値下げ_注記強調 {
  background: #fef2f2;
  color: #b91c1c;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.値下げ_注記赤 { color: #b91c1c; }
.値下げ_閉じる:hover {
  color: #111827;
}

.値下げ_サマリ {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 18px;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border-bottom: 1px solid #eef0f2;
}
.値下げ_サマリ b {
  font-size: 15px;
  color: #111827;
}
.値下げ_除外 {
  color: #9ca3af;
}

.値下げ_メッセージ {
  padding: 9px 18px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 13px;
  border-bottom: 1px solid #d1fae5;
}

.値下げ_警告 {
  padding: 9px 18px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.5px;
  line-height: 1.5;
  border-bottom: 1px solid #fde68a;
}

.値下げ_テーブル枠 {
  overflow: auto;
  flex: 1;
  padding: 0 18px;
}
.値下げ_テーブル {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.値下げ_テーブル thead th {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7eb;
  z-index: 1;
}
/* 並べ替え可能な見出し（クリックで昇順⇔降順。現在キーには▲▼） */
.値下げ_見出しソート {
  cursor: pointer;
  user-select: none;
}
.値下げ_見出しソート:hover {
  background: #e5e7eb;
}
.値下げ_ソート印 {
  display: inline-block;
  min-width: 10px;
  margin-left: 4px;
  font-size: 10px;
  color: #2563eb;
}
.値下げ_テーブル tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f2f4;
  white-space: nowrap;
}
.値下げ_テーブル tbody tr:hover {
  background: #f8fafc;
}
.値下げ_未選択行 {
  opacity: 0.45;
}
.値下げ_商品名 {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.値下げ_日付 {
  color: #6b7280;
}
.値下げ_番号コピー {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.値下げ_番号コピー:hover {
  color: #2563eb;
  text-decoration: underline;
}
.値下げ_コピー済 {
  margin-left: 4px;
  color: #16a34a;
  font-weight: 700;
}
.値下げ_数値 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.値下げ_新売値 {
  font-weight: 700;
  color: #b91c1c;
}
.値下げ_差額 {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: normal;
  color: #9ca3af;
}
.値下げ_出品先 {
  display: flex;
  gap: 4px;
}
.値下げ_バッジ {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.値下げ_バッジ.E {
  background: #2563eb;
}
.値下げ_バッジ.W {
  background: #16a34a;
}
.値下げ_空 {
  text-align: center;
  color: #9ca3af;
  padding: 28px 0;
}

.値下げ_フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.値下げ_適用 {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.値下げ_適用:hover:not(:disabled) {
  background: #991b1b;
}
.値下げ_適用:disabled {
  background: #9ca3af;
  cursor: default;
}
.値下げ_出力群 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* ボタンとファイル読込ラベルを完全に同じ見た目に統一（font:inherit でフォント差をなくす） */
.値下げ_出力群 button,
.値下げ_読込ラベル {
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.値下げ_出力群 button:hover:not(:disabled),
.値下げ_読込ラベル:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.値下げ_出力群 button:disabled {
  color: #9ca3af;
  background: #fafafa;
  cursor: default;
}
/* 自動化ボタン（ワサビに送る／Eコンビニで一括値下げ）を目立たせる */
.値下げ_出力群 button.主要,
.値下げ_読込ラベル.主要 {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  font-weight: 700;
}
.値下げ_出力群 button.主要:hover:not(:disabled),
.値下げ_読込ラベル.主要:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}
.値下げ_出力群 button.主要:disabled {
  background: #fafafa;
  border-color: #d1d5db;
  color: #9ca3af;
  font-weight: 400;
}

.値下げ_注記 {
  margin: 0;
  padding: 11px 18px 14px;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.55;
  border-top: 1px solid #f1f2f4;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.値下げ_注記行 {
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.値下げ_注記見出し {
  flex: none;
  min-width: 74px;
  font-weight: 700;
  color: #475569;
  background: #eef1f5;
  border-radius: 4px;
  padding: 2px 7px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.値下げ_注記 b {
  color: #374151;
  font-weight: 600;
}