* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  color: #1e293b;
}

/* ---------- rejected テーマ ---------- */
body[data-status="rejected"] { background: #fff7ed; }
body[data-status="rejected"] .form-header { background: #ea580c; }

.banner {
  display: none;
  padding: 10px 16px;
  background: #f97316;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- ヘッダー ---------- */
.form-header {
  background: #2563EB;
  color: #fff;
  padding: 16px 20px;
  text-align: center;
}
.form-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* ---------- コンテナ ---------- */
#surveyContainer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 4px;
}

/* ---------- 左右の余白だけ削減（縦方向は SurveyJS デフォルトのまま） ---------- */
.sd-body__page,
.sd-page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sd-question {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.sd-action-bar.sd-footer,
.sd-body__navigation {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ---------- メッセージ系 ---------- */
.msg {
  text-align: center;
  padding: 40px 20px;
}

.retry-btn {
  margin-top: 12px;
  padding: 10px 24px;
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

/* ---------- 下書きステータス ---------- */
.draft-status {
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.draft-status:not(:empty) { opacity: 1; }

/* ---------- SVG アイコンサイズ修正 ---------- */
.sv-svg-icon, svg.sd-svg-icon {
  width: 24px !important;
  height: 24px !important;
}

/* ---------- ボタン ---------- */
.sd-btn--action {
  background-color: #2563EB !important;
  color: #fff !important;
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.sd-btn--action:hover { background-color: #1d4ed8 !important; }

.sd-btn {
  min-height: 44px !important;
  font-size: 15px !important;
  border-radius: 6px !important;
}

/* ---------- プログレスバー ---------- */
.sd-progress { background-color: #e2e8f0 !important; }
.sd-progress__bar { background-color: #2563EB !important; }

/* ---------- 入力フィールド ---------- */
.sd-input {
  font-size: 16px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
}
.sd-input:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1) !important;
}

/* ---------- ドロップダウン ---------- */
.sd-dropdown {
  min-height: 44px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 0 12px !important;
}
.sd-dropdown:hover,
.sd-dropdown:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1) !important;
}
.sd-dropdown__value {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  font-size: 16px !important;
}
.sd-dropdown svg.sd-svg-icon {
  width: 18px !important;
  height: 18px !important;
}

/* ---------- チェックボックス / ラジオ ---------- */
.sd-item__decorator svg,
.sd-checkbox__svg,
.sd-radio__svg {
  width: 20px !important;
  height: 20px !important;
}

/* ---------- Panel（セクション）---------- */
.sd-panel {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  padding: 12px 16px !important;
}
.sd-panel__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #2563EB !important;
  border-bottom: 2px solid #2563EB !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* ---------- ファイルアップロード ---------- */
/* 実DOM:
   .sd-file > .sd-file__drag-area > .sd-file__decorator
   .sd-file__decorator > .sd-file__drag-area-placeholder + .sd-file__wrapper
   注: SurveyJS v2 のデフォルトでは .sd-file__decorator が position:absolute。
       static に強制し、drag-area 側に破線枠を描いて普通のブロック配置にする。 */

.sd-file {
  min-height: 44px !important;
  max-width: 100% !important;
  position: relative !important;
}
.sd-file__drag-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px !important;
  min-height: 120px !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  position: relative !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.sd-file__decorator {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
.sd-file__drag-area-placeholder,
.sd-file__drag-area-placeholder .sv-string-viewer {
  position: static !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  inset: auto !important;
  transform: none !important;
}
.sd-file__wrapper {
  position: static !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  width: auto !important;
  inset: auto !important;
  transform: none !important;
}
.sd-file__actions-container {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.sd-file__choose-btn,
label.sd-file__choose-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: #2563EB !important;
  color: #fff !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  position: static !important;
}
/* ボタン内の「ファイルを選択」テキストspanを強制表示（SurveyJS v2 のデフォルトで display:none） */
.sd-file__choose-btn > span,
label.sd-file__choose-btn > span,
.sd-file__choose-btn--text > span,
label.sd-file__choose-btn--text > span {
  display: inline !important;
  visibility: visible !important;
  color: #fff !important;
  font-size: 14px !important;
}
.sd-file__choose-btn:hover,
label.sd-file__choose-btn:hover {
  background: #1d4ed8 !important;
}
.sd-file__choose-btn .sv-svg-icon,
label.sd-file__choose-btn .sv-svg-icon {
  color: #fff !important;
  fill: #fff !important;
  width: 18px !important;
  height: 18px !important;
}

/* ---------- 複数ファイル カスタムグリッド ---------- */
/* SurveyJS v2 の sd-file__list はページ送り制。display:none で隠し、
   カスタムグリッド(.my-file-grid) で全ファイルを一覧表示する。
   ツールバーの「ファイル選択」「クリア」は残し、ページ送り矢印だけ隠す。
   カスタムクラスは .sd-question 側に付与（.sd-file は SurveyJS が再生成する可能性があるため） */
.sd-question--multi-file-custom .sd-file__list {
  display: none !important;
}
/* SurveyJS のファイル UI 全体を非表示。独自の「+ 写真を追加」ボタンに差し替える。
   ★ input[type=file] は display:none の先祖でも click/change は動作するので、
     SurveyJS の onUploadFiles 発火は問題なく行える。*/
.sd-question--multi-file-custom .sd-file {
  display: none !important;
}

/* ---------- 「+ 写真を追加」ボタン（独自） ---------- */
.my-file-add-btn {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  flex-wrap: wrap !important;
}
.my-file-add-btn:hover,
.my-file-add-btn:focus-visible {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}
.my-file-add-btn--drag-over {
  border-color: #2563EB !important;
  border-style: solid !important;
  background: #dbeafe !important;
  transform: scale(1.005) !important;
}
.my-file-add-plus {
  display: inline-flex !important;
  width: 26px !important;
  height: 26px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.my-file-add-label {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.my-file-add-hint {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin-left: 4px !important;
}
.my-file-add-btn:hover .my-file-add-hint,
.my-file-add-btn:focus-visible .my-file-add-hint {
  color: #60a5fa !important;
}

@media (max-width: 480px) {
  .my-file-add-btn {
    padding: 14px !important;
    gap: 8px !important;
  }
  .my-file-add-hint {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
    font-size: 11px !important;
  }
}

/* ---------- カナ変換中のローディング表示 ---------- */
/* 変換先フィールド（○○カナ）の入力欄に小さなスピナーを重ねる */
.my-kana-loading .sd-question__content {
  position: relative;
}
.my-kana-loading .sd-input {
  padding-right: 48px !important;
  background-color: #fafbfc !important;
}
.my-kana-loading .sd-question__content::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.my-kana-loading .sd-question__content::before {
  content: "変換中…";
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #64748b;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* ---------- AI 画像チェック ---------- */
.my-ai-check {
  margin-top: 12px;
  border-radius: 12px;
  transition: all 0.2s ease;
  /* 文字折り返しを常に許可（長い日本語が見切れないように） */
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.my-ai-check * { min-width: 0; }
.my-ai-check .my-ai-check-title,
.my-ai-check .my-ai-check-sub,
.my-ai-check .my-ai-check-reason-msg {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}
.my-ai-check-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.my-ai-check-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}
.my-ai-check-btn:active { transform: translateY(0); }
.my-ai-check-emoji { font-size: 22px; line-height: 1; }
.my-ai-check-title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.my-ai-check-sub { font-size: 11px; opacity: 0.9; font-weight: 500; }

/* --- ローディング --- */
.my-ai-check--loading { background: #eff6ff; border: 1px solid #bfdbfe; padding: 14px 16px; }
.my-ai-check-loading { display: flex; align-items: center; gap: 12px; }
.my-ai-check-loading .my-ai-check-title { color: #1e40af; font-size: 14px; font-weight: 700; }
.my-ai-check-loading .my-ai-check-sub { color: #475569; font-size: 11px; opacity: 1; line-height: 1.5; }
.my-ai-check-elapsed {
  margin-top: 4px;
  font-size: 10px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.my-ai-check-spinner {
  width: 24px; height: 24px;
  border: 3px solid #bfdbfe;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.my-ai-check-texts { flex: 1; text-align: left; min-width: 0; }

/* --- 合格 --- */
.my-ai-check--ok { background: #ecfdf5; border: 1px solid #86efac; padding: 12px 14px; }
.my-ai-check--ok .my-ai-check-title { color: #065f46; font-size: 14px; font-weight: 700; }
.my-ai-check--ok .my-ai-check-sub { color: #047857; font-size: 12px; opacity: 1; font-weight: 500; }
.my-ai-check-result {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.my-ai-check-result .my-ai-check-texts {
  flex: 1 1 200px;
  min-width: 0;
}
.my-ai-check-result .my-ai-check-badge {
  flex-shrink: 0;
}
.my-ai-check-badge {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
.my-ai-check-badge--ng { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }

/* --- 要修正 --- */
.my-ai-check--ng { background: #fef2f2; border: 1px solid #fca5a5; padding: 12px 14px; }
.my-ai-check--ng .my-ai-check-title { color: #991b1b; font-size: 14px; font-weight: 700; }
.my-ai-check--ng .my-ai-check-sub { color: #b91c1c; font-size: 12px; opacity: 1; font-weight: 500; }
.my-ai-check-issues {
  margin: 8px 0 0 0;
  padding: 8px 12px 8px 28px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  font-size: 12px;
  color: #7f1d1d;
  list-style: disc;
}
.my-ai-check-issues li + li { margin-top: 4px; }

/* --- 手動承認（AI NG だが担当者判断で OK） --- */
.my-ai-check--override { background: #fffbeb; border: 1px solid #fcd34d; padding: 12px 14px; }
.my-ai-check--override .my-ai-check-title { color: #92400e; font-size: 14px; font-weight: 700; }
.my-ai-check--override .my-ai-check-sub { color: #b45309; font-size: 12px; opacity: 1; font-weight: 500; }
.my-ai-check-badge--override {
  background: #f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
}
.my-ai-check-override-note {
  margin-top: 6px;
  font-size: 11px;
  color: #78350f;
  background: rgba(252, 211, 77, 0.35);
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.5;
}
.my-ai-check--override .my-ai-check-btn-secondary { color: #92400e; border-color: #f59e0b; }
.my-ai-check--override .my-ai-check-btn-secondary:hover { background: #fef3c7; }

/* アクションボタン群 */
.my-ai-check-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* 強制OKボタン（黄色、目立つが押しにくい位置） */
.my-ai-check-btn-override {
  padding: 8px 14px;
  border: 1px solid #f59e0b;
  background: #fef3c7;
  color: #92400e;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
}
.my-ai-check-btn-override:hover { background: #fde68a; border-color: #d97706; }
.my-ai-check-btn-override:active { background: #fcd34d; }

/* ========== 営業許可証 OCR 抽出プレビュー（カード式・スマホ最適化） ========== */
.my-ocr-preview {
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(202, 138, 4, 0.08);
}
.my-ocr-preview--none {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
  box-shadow: none;
}

/* --- ヘッダー --- */
.my-ocr-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(202, 138, 4, 0.35);
}
.my-ocr-head-icon { font-size: 18px; line-height: 1; }
.my-ocr-head-title {
  font-weight: 800;
  color: #713f12;
  font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.my-ocr-head-summary {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.my-ocr-sum-new  { color: #047857; }
.my-ocr-sum-over { color: #b45309; }
.my-ocr-sum-sep  { color: #a8a29e; font-weight: 400; }

.my-ocr-empty { color: #64748b; font-size: 12px; padding: 4px 0; }

/* --- カードリスト --- */
.my-ocr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.my-ocr-item {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid #10b981;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.1s ease;
}
.my-ocr-item--over { border-left-color: #f59e0b; }

.my-ocr-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.my-ocr-item-label {
  font-weight: 700;
  color: #1f2937;
  font-size: 12px;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* バッジ */
.my-ocr-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
}
.my-ocr-badge--new  { background: #10b981; }
.my-ocr-badge--over { background: #f59e0b; }

/* 値の表示（編集可能） */
.my-ocr-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
}
.my-ocr-item-current {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11px;
  color: #78716c;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.my-ocr-val {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.my-ocr-val--old {
  color: #78716c;
  text-decoration: line-through;
  text-decoration-color: #d6d3d1;
}
.my-ocr-val--blank {
  color: #a8a29e;
  font-style: italic;
}
.my-ocr-item-arrow {
  color: #ca8a04;
  font-weight: 800;
  flex-shrink: 0;
  font-size: 14px;
}

/* 編集可能な input + リセットボタン */
.my-ocr-input-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.my-ocr-input {
  flex: 1 1 0;
  min-width: 0;
  font-family: inherit;
  font-size: 14px !important;  /* iOS でズームしないように 16px 近く */
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  border: 1.5px solid #fcd34d;
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.my-ocr-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  background: #fffbeb;
}
.my-ocr-input:hover {
  border-color: #f59e0b;
}

.my-ocr-reset-btn {
  flex-shrink: 0;
  width: 32px;
  background: #fff;
  color: #92400e;
  border: 1.5px solid #fcd34d;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.my-ocr-reset-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}
.my-ocr-reset-btn:active {
  background: #fde68a;
}

/* バッジ色 */
.my-ocr-badge--new     { background: #10b981; }
.my-ocr-badge--over    { background: #f59e0b; }
.my-ocr-badge--same    { background: #94a3b8; }
.my-ocr-badge--missing { background: #6b7280; }
.my-ocr-sum-same       { color: #475569; }
.my-ocr-sum-missing    { color: #6b7280; }

/* AI 未抽出の項目: 左縁グレー、薄め背景、入力欄も少しトーンダウン */
.my-ocr-item--missing { border-left-color: #94a3b8; background: #f8fafc; }
.my-ocr-item--missing .my-ocr-input {
  border-color: #cbd5e1;
  background: #fff;
}
.my-ocr-item--missing .my-ocr-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  background: #fff;
}
.my-ocr-item--missing .my-ocr-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}
.my-ocr-item--same { border-left-color: #94a3b8; opacity: 0.85; }

/* トースト */
.my-ocr-toast {
  margin-top: 10px;
  padding: 10px 14px;
  background: #065f46;
  color: #ecfdf5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transition: opacity 0.4s ease;
  box-shadow: 0 4px 12px rgba(6, 95, 70, 0.25);
  animation: ocr-toast-in 0.25s ease-out;
}
@keyframes ocr-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 挿入ボタン */
.my-ocr-apply-btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
  transition: all 0.15s;
  min-height: 48px;
}
.my-ocr-apply-btn:hover,
.my-ocr-apply-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.45);
  outline: none;
}
.my-ocr-apply-btn:active { transform: translateY(0); }
.my-ocr-apply-btn--done {
  background: linear-gradient(135deg, #65a30d 0%, #4d7c0f 100%);
  box-shadow: 0 3px 8px rgba(101, 163, 13, 0.35);
}
.my-ocr-apply-btn--done:hover {
  box-shadow: 0 5px 14px rgba(101, 163, 13, 0.45);
}

.my-ocr-footnote {
  color: #78716c;
  font-size: 11px;
  margin-top: 8px;
  line-height: 1.5;
}

/* --- スマホ: 縦並びに切替、タップしやすくする --- */
@media (max-width: 480px) {
  .my-ocr-preview { padding: 12px; }
  .my-ocr-head { gap: 6px; }
  .my-ocr-head-title { font-size: 13px; flex-basis: 100%; }
  .my-ocr-head-summary { font-size: 10px; }
  .my-ocr-item { padding: 10px; }
  .my-ocr-item-body {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .my-ocr-item-current { font-size: 11px; }
  .my-ocr-item-arrow {
    transform: rotate(90deg);
    text-align: center;
    padding: 2px 0;
    font-size: 12px;
    align-self: center;
    margin-left: 0;
  }
  .my-ocr-input { font-size: 16px !important; padding: 10px 12px; min-height: 44px; }
  .my-ocr-reset-btn { width: 44px; min-height: 44px; font-size: 18px; }
  .my-ocr-apply-btn { font-size: 14px; padding: 14px; }
}

/* 理由リスト（good/ng 混在可） */
.my-ai-check-reasons {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.my-ai-check-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.65);
}
.my-ai-check-reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.my-ai-check-reason--good .my-ai-check-reason-icon { background: #10b981; }
.my-ai-check-reason--ng   .my-ai-check-reason-icon { background: #ef4444; }
.my-ai-check-reason--good { color: #065f46; }
.my-ai-check-reason--ng   { color: #7f1d1d; }
.my-ai-check-reason-msg { flex: 1; min-width: 0; }

/* --- 再チェックボタン --- */
.my-ai-check-btn-secondary {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid currentColor;
  background: #fff;
  color: inherit;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.my-ai-check--ok .my-ai-check-btn-secondary { color: #065f46; border-color: #10b981; }
.my-ai-check--ok .my-ai-check-btn-secondary:hover { background: #d1fae5; }
.my-ai-check--ng .my-ai-check-btn-secondary { color: #991b1b; border-color: #ef4444; }
.my-ai-check--ng .my-ai-check-btn-secondary:hover { background: #fee2e2; }

/* モバイル調整 */
@media (max-width: 480px) {
  .my-ai-check-btn { padding: 12px 14px; }
  .my-ai-check-title { font-size: 14px; }
  .my-ai-check-result { gap: 8px; }
  .my-ai-check-result .my-ai-check-texts { flex: 1 1 100%; }
  .my-ai-check-actions { flex: 1 1 100%; flex-direction: column; }
  .my-ai-check-btn-secondary,
  .my-ai-check-btn-override { width: 100%; }
}

/* ============================================================ */
/*             商品写真 専用カスタムグリッド                      */
/* ============================================================ */
.sd-question--product-photos .sd-file { display: none !important; }

.my-pp-root {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ヘッダー */
.my-pp-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%);
  border: 1px solid #86efac;
  border-radius: 12px;
}
.my-pp-progress {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.my-pp-progress-num {
  font-size: 20px;
  font-weight: 800;
  color: #065f46;
}
.my-pp-progress-label {
  font-size: 12px;
  color: #166534;
  font-weight: 600;
}
.my-pp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.my-pp-check-btn, .my-pp-rework-btn {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}
.my-pp-check-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.my-pp-check-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
.my-pp-check-btn--disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
.my-pp-check-btn--loading {
  background: linear-gradient(135deg, #3b82f6, #1e40af) !important;
  cursor: wait;
}
.my-pp-check-btn--ok { background: linear-gradient(135deg, #059669, #047857) !important; }
.my-pp-check-btn--ng { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }

.my-pp-rework-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.my-pp-rework-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); }
.my-pp-rework-btn--disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* スロット行 */
.my-pp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.my-pp-row {
  display: grid;
  grid-template-columns: 32px 1fr 120px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.15s;
}
.my-pp-row--filled {
  border-color: #10b981;
  background: #f0fdf4;
}
.my-pp-num {
  font-weight: 800;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}
.my-pp-row--filled .my-pp-num { color: #065f46; }

/* 商品名入力 */
.my-pp-name-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px !important;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.my-pp-name-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.my-pp-row--filled .my-pp-name-input { border-color: #10b981; background: #fff; }

/* ファイルセル */
.my-pp-file-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.my-pp-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  min-height: 60px;
  width: 100%;
}
.my-pp-pick-btn:hover { background: #e0e7ff; border-color: #6366f1; color: #4338ca; }
.my-pp-pick-icon { font-size: 18px; }
.my-pp-pick-label { line-height: 1.2; }
.my-pp-pick-hint {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 1px;
}
.my-pp-pick-btn:hover .my-pp-pick-hint { color: #6366f1; }
.my-pp-upload-error {
  width: 100%;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

/* 商品オプション */
.sd-question--product-options textarea.sd-input,
.sd-question--product-options .sd-comment {
  display: none !important;
}
.my-po-root {
  margin-top: 8px;
}
.my-po-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.my-po-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  background: #f0f9ff;
}
.my-po-summary-count {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: #0369a1;
}
.my-po-summary-text {
  font-size: 12px;
  font-weight: 700;
  color: #075985;
}
.my-po-list {
  display: grid;
  gap: 10px;
}
.my-po-global {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  background: #f8fdff;
}
.my-po-ranking-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #f8fbff;
}
.my-po-ranking-head {
  display: grid;
  gap: 3px;
}
.my-po-ranking-title {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  color: #1e3a8a;
}
.my-po-ranking-sub {
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}
.my-po-ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.my-po-ranking-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.my-po-ranking-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.35;
  outline: none;
}
.my-po-ranking-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.my-po-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.my-po-field input,
.my-po-field select,
.my-po-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.35;
  outline: none;
}
.my-po-field textarea {
  min-height: 68px;
  resize: vertical;
}
.my-po-field input:focus,
.my-po-field select:focus,
.my-po-field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.my-po-note {
  font-size: 11px;
  line-height: 1.6;
  color: #64748b;
  overflow-wrap: anywhere;
  word-break: normal;
}
.my-po-note--guide {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  white-space: normal !important;
}
.my-po-note--guide p {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  white-space: normal !important;
}
.my-po-note--guide strong {
  color: #334155;
  white-space: nowrap;
}
.my-po-note--guide span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal !important;
}
.my-po-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
}
.my-po-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.my-po-product-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  word-break: break-word;
}
.my-po-clear-btn {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.my-po-clear-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.my-po-clear-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.my-po-options {
  display: grid;
  gap: 10px;
}
.my-po-product-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.6fr);
  gap: 10px;
  align-items: start;
}
.my-po-option-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(260px, 1.6fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.my-po-option-main {
  display: grid;
  gap: 8px;
}
.my-po-option-name {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.35;
  outline: none;
}
.my-po-option-name:focus,
.my-po-limit input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.my-po-option-name:disabled,
.my-po-limit input:disabled {
  background: #f8fafc;
  color: #64748b;
}
.my-po-limit--disabled {
  color: #94a3b8;
}
.my-po-limit--disabled input {
  border-color: #e2e8f0;
  background: #f1f5f9;
}
.my-po-required-toggle {
  display: inline-flex;
  width: fit-content;
  padding: 2px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}
.my-po-toggle-btn {
  min-width: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.my-po-toggle-btn--active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 1px 4px rgba(37, 99, 235, .22);
}
.my-po-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: .65;
}
.my-po-limits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.my-po-limit {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}
.my-po-limit input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 13px !important;
  outline: none;
}
.my-po-remove-option,
.my-po-add-option {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.my-po-remove-option {
  padding: 9px 10px;
}
.my-po-add-option {
  align-self: flex-start;
  padding: 9px 12px;
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.my-po-remove-option:hover,
.my-po-add-option:hover,
.my-po-clear-btn:hover {
  filter: brightness(.98);
}
.my-po-remove-option:disabled,
.my-po-add-option:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.my-po-help {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}
.my-po-empty {
  padding: 16px 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}
.my-po-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}
.my-po-empty-text {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: #64748b;
}
@media (max-width: 760px) {
  .my-po-option-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .my-po-limits {
    grid-template-columns: 1fr;
  }
  .my-po-product-fields {
    grid-template-columns: 1fr;
  }
  .my-po-ranking-grid {
    grid-template-columns: 1fr;
  }
  .my-po-remove-option {
    justify-self: flex-start;
  }
}

/* ドラッグオーバー時のハイライト（ファイルセル全体） */
.my-pp-file-cell--drag-over {
  outline: 2px dashed #6366f1;
  outline-offset: 2px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
}
.my-pp-file-cell--drag-over .my-pp-pick-btn,
.my-pp-file-cell--drag-over .my-pp-thumb {
  border-color: #6366f1;
}
.my-pp-file-cell--drag-over::after {
  content: "ここにドロップ";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #4338ca;
  background: rgba(99, 102, 241, 0.18);
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
  letter-spacing: 0.04em;
}

.my-pp-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-height: 96px;
  border-radius: 8px;
  overflow: visible;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.my-pp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.my-pp-thumb--no::before {
  content: "🖼️";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #94a3b8;
}
.my-pp-remove-btn {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 3;
}
.my-pp-remove-btn:hover { background: #dc2626; }

/* アップロード中のスピナー */
.my-pp-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  min-height: 60px;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  width: 100%;
}
.my-pp-upload-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #fde68a;
  border-top-color: #d97706;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.my-pp-upload-text {
  font-size: 10px;
  color: #92400e;
  font-weight: 700;
}
.my-pp-row--uploading .my-pp-name-input {
  opacity: 0.7;
  pointer-events: none;
}

/* 重複商品名警告 */
.my-pp-row--dup {
  background: #fef2f2;
  border-color: #fca5a5 !important;
}
.my-pp-row--upload-error {
  background: #fff7ed;
  border-color: #fb923c !important;
}
.my-pp-name-input--dup {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}
.my-pp-name-input--dup:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
.my-pp-dup-warning {
  margin-top: 4px;
  font-size: 10px;
  color: #991b1b;
  font-weight: 700;
  line-height: 1.3;
}

.my-pp-reworked-badge {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: rgba(245, 158, 11, 0.95);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  z-index: 2;
}
.my-pp-restore-original-btn {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  z-index: 3;
}
.my-pp-restore-original-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.my-pp-manual-rework-btn {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  background: rgba(255, 251, 235, 0.96);
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  z-index: 3;
}
.my-pp-manual-rework-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}

/* 加工チェックボックス */
.my-pp-rework-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-pp-rework-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  transition: all 0.15s;
}
.my-pp-rework-label:hover { border-color: #f59e0b; }
.my-pp-rework-label--on {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.my-pp-rework-label input { display: none; }
.my-pp-rework-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}
.my-pp-rework-label--on .my-pp-rework-box { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.my-pp-rework-label--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.my-pp-rework-placeholder { color: #cbd5e1; font-size: 12px; }

.my-pp-rework-prompt-panel {
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
}
.my-pp-rework-prompt-head,
.my-hero-ai-prompt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}
.my-pp-rework-prompt-head > div,
.my-hero-ai-prompt-head > div {
  min-width: 0;
  grid-column: 1;
}
.my-pp-rework-prompt-reset,
.my-hero-ai-prompt-reset {
  grid-column: 2;
  justify-self: end;
  width: 100%;
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.my-pp-rework-prompt-title {
  font-size: 14px;
  font-weight: 800;
  color: #92400e;
}
.my-pp-rework-prompt-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.my-pp-rework-prompt-reset {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fff;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.my-pp-rework-prompt-reset:hover { background: #fef3c7; }
.my-pp-rework-prompt-textarea {
  width: 100%;
  min-height: 190px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.my-pp-rework-prompt-textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.my-pp-rework-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.my-pp-rework-prompt-note {
  flex: 1 1 360px;
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.my-pp-rework-prompt-footer .my-pp-rework-btn {
  flex: 0 1 300px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.my-pp-rework-prompt-status {
  flex: 0 1 300px;
  max-width: 100%;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.my-hero-ai-prompt-panel {
  margin: 12px 0 14px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}
.my-hero-ai-prompt-title {
  font-size: 14px;
  font-weight: 800;
  color: #1e40af;
}
.my-hero-ai-prompt-sub,
.my-hero-ai-prompt-note {
  margin-top: 2px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.my-hero-ai-prompt-reset {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  background: #fff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.my-hero-ai-prompt-reset:hover { background: #dbeafe; }
.my-hero-ai-prompt-textarea {
  width: 100%;
  min-height: 160px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.my-hero-ai-prompt-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* 加工中（rework in-flight）のビジュアル */
.my-pp-thumb--reworking img { filter: saturate(0.6) brightness(0.85); }
.my-pp-rework-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}
.my-pp-rework-spinner-lg {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.my-pp-rework-overlay-text {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.my-pp-row--reworking .my-pp-name-input { opacity: 0.8; }
.my-pp-rework-btn--loading {
  position: relative;
  animation: my-pp-rework-pulse 1.4s ease-in-out infinite;
}
@keyframes my-pp-rework-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* 追加ボタン */
.my-pp-add-wrap { display: flex; }
.my-pp-add-btn {
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  color: #475569;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.my-pp-add-btn:hover { border-color: #2563EB; color: #2563EB; background: #eff6ff; }

/* AI 結果埋め込み */
.my-pp-ai-result { margin-top: 0; }

/* スマホ: 縦積みに */
@media (max-width: 640px) {
  .my-pp-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    padding: 10px;
  }
  .my-pp-num { grid-row: 1 / 2; }
  .my-pp-name-cell { grid-row: 1 / 2; }
  .my-pp-file-cell {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  .my-pp-rework-cell {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
    justify-content: flex-start;
  }
  .my-pp-actions { flex-direction: column; }
  .my-pp-check-btn, .my-pp-rework-btn { flex: 1 1 100%; }
  .my-pp-rework-prompt-head,
  .my-hero-ai-prompt-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .my-pp-rework-prompt-reset,
  .my-hero-ai-prompt-reset {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    width: 100%;
  }
  .my-pp-rework-prompt-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .my-pp-rework-prompt-status,
  .my-hero-ai-prompt-reset {
    width: 100%;
  }
}

/* ---------- 必須項目未入力の警告バナー ---------- */
.my-file-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  animation: warn-slide-in 0.2s ease-out;
}
.my-file-warning--hidden {
  display: none !important;
}
.my-file-warning-icon { font-size: 18px; line-height: 1; }
.my-file-warning-text { flex: 1; line-height: 1.4; }
@keyframes warn-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.my-file-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
  padding: 8px 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.my-file-item {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: visible !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}
.my-file-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}
.my-file-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  color: #94a3b8 !important;
  border-radius: 8px !important;
}
.my-file-remove {
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 3 !important;
  font-family: inherit !important;
  transition: transform 0.1s ease, background 0.1s ease !important;
}
.my-file-remove:hover {
  background: #dc2626 !important;
  transform: scale(1.08) !important;
}
.my-file-remove:active {
  transform: scale(0.95) !important;
}
.my-file-name {
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  font-size: 10px !important;
  color: #fff !important;
  background: rgba(15, 23, 42, 0.7) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ---------- アップロード後タイル：ホバー効果 ---------- */
.my-file-item--done {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.my-file-item--done:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

/* Drive サムネイルが読み込めなかった場合のフォールバック */
.my-file-fallback-icon {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  color: #94a3b8 !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}
.my-file-no-thumb .my-file-fallback-icon { display: flex !important; }

/* ---------- Drive 保存済みバッジ（控えめなチップ型） ---------- */
.my-file-drive {
  position: absolute !important;
  bottom: 3px !important;
  left: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(16, 185, 129, 0.92) !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  z-index: 2 !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
}
.my-file-drive .dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 4px rgba(255,255,255,0.9) !important;
}
.my-file-drive:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}
/* Drive バッジが付くタイルではファイル名を少し上に */
.my-file-item--done .my-file-drive + .my-file-remove + .my-file-name,
.my-file-item--done .my-file-name {
  bottom: auto !important;
  top: 3px !important;
  left: 3px !important;
  right: 36px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  font-size: 10px !important;
}

/* ---------- アップロード中タイル ---------- */
.my-file-item--pending {
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  overflow: hidden !important;
}
.my-file-dim {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(1px) brightness(0.75) !important;
}
.my-file-pending-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.35) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.my-file-pending-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.my-file-spinner {
  width: 28px !important;
  height: 28px !important;
  border: 3px solid rgba(255,255,255,0.35) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}
.my-file-uploading {
  font-size: 32px !important;
  color: #94a3b8 !important;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- アップロード失敗タイル ---------- */
.my-file-item--error {
  background: #fff1f2 !important;
  border: 1px solid #fb7185 !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15) !important;
}
.my-file-error {
  font-size: 32px !important;
  color: #ef4444 !important;
}
.my-file-name--error {
  background: rgba(239, 68, 68, 0.9) !important;
  color: #fff !important;
}
.my-file-retry {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #ef4444 !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  z-index: 3 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
}
.my-file-retry:hover { background: #dc2626 !important; }
.my-file-cancel {
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: #64748b !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 3 !important;
}

@media (max-width: 480px) {
  .my-file-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 6px 4px !important;
  }
}

/* ---------- 条件付き表示項目（色分け） ---------- */
.conditional-field {
  border-left: 3px solid var(--cond-color, #94a3b8) !important;
  padding-left: 10px !important;
  background: var(--cond-bg, transparent) !important;
  margin-top: 6px !important;
  border-radius: 0 6px 6px 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* overflow: hidden は NG。子要素(ファイルアップロードボタン等)を切り落とす */
}
.cond-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  background: var(--cond-color, #94a3b8);
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- 説明文 (description) ---------- */
.sd-description {
  color: #64748b !important;
  font-size: 13px !important;
  white-space: pre-wrap !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}

/* ---------- 読み取り専用項目 ---------- */
.sd-input[readonly],
.sd-input:read-only {
  background: #f1f5f9 !important;
  color: #475569 !important;
  cursor: not-allowed;
}

/* ---------- モバイル: 左右だけゼロ（縦方向は既定のまま） ---------- */
@media (max-width: 480px) {
  #surveyContainer {
    padding: 0 !important;
  }
  .sd-question {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .sd-panel {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .sd-action-bar.sd-footer,
  .sd-body__navigation {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .sd-page__title {
    font-size: 18px !important;
  }
  .sd-panel__title {
    font-size: 15px !important;
  }

  /* 条件付きフィールド: 狭いスペースでの余白を縮小 */
  .conditional-field {
    padding-left: 6px !important;
    border-left-width: 2px !important;
  }

  /* ファイルアップロード関連（残存） */
  .sd-file__decorator {
    padding: 12px 8px !important;
    gap: 8px !important;
  }
  .sd-file__drag-area-placeholder,
  .sd-file__drag-area-placeholder .sv-string-viewer {
    font-size: 12px !important;
  }
  .sd-file__choose-btn,
  label.sd-file__choose-btn {
    font-size: 13px !important;
    padding: 10px 16px !important;
  }

  /* 条件付きバッジの折り返し */
  .cond-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px !important;
    padding: 2px 6px !important;
    white-space: normal !important;
    max-width: 100% !important;
    word-break: break-all !important;
  }
}

/* ===== メニュー表テンプレURL: 配置先フォルダURL ヘルパ ===== */
.my-owner-folder-helper {
  margin: 0 0 10px 0;
  padding: 10px 12px;
  background: #eef7ff;
  border: 1px solid #cfe6ff;
  border-radius: 6px;
  font-size: 13px;
}
.my-owner-folder-label {
  color: #31537a;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.my-owner-folder-url-box {
  display: flex;
  flex-wrap: wrap;      /* 狭い領域ではコピーボタンが次行に折り返す */
  align-items: stretch;
  gap: 8px;
}
.my-owner-folder-url-text {
  flex: 1 1 240px;       /* min-width を確保しつつ縮小許可 */
  min-width: 0;          /* flex item の shrink を許可（URL が長くても親からはみ出ない） */
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #d0dbea;
  border-radius: 4px;
  color: #1a4d86;
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
  cursor: pointer;
  user-select: all;
  line-height: 1.4;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
.my-owner-folder-url-text:hover {
  background: #f0f6ff;
  border-color: #a8c8e8;
}
.my-owner-folder-url-text:focus {
  border-color: #5a8bc4;
  box-shadow: 0 0 0 2px rgba(90, 139, 196, 0.18);
}
.my-owner-folder-url-text--unset {
  color: #8a6f3a !important;
  background: #fff9e6 !important;
  border-color: #f0d99a !important;
  cursor: default !important;
  font-family: inherit !important;
}
.my-owner-folder-url-text--error {
  color: #a33 !important;
  background: #fff0f0 !important;
  border-color: #f3b3b3 !important;
  font-family: inherit !important;
}
.my-owner-folder-copy-btn {
  flex-shrink: 0;        /* 縮小されて消えないように固定幅を保証 */
  padding: 6px 12px;
  background: #2d7fd1;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.my-owner-folder-copy-btn:hover:not(:disabled) { background: #2066b0; }
.my-owner-folder-copy-btn:disabled {
  background: #b5c3d3;
  cursor: not-allowed;
}
.my-owner-folder-copy-btn--done {
  background: #2f8a4f !important;
}

/* ===== メニュー表テンプレ: 手順画像 ===== */
.my-menu-tpl-image-wrap {
  margin-top: 10px;
  text-align: center;
}
.my-menu-tpl-image {
  max-width: 100%;
  max-height: 420px;
  border: 1px solid #d0dbea;
  border-radius: 4px;
  background: #fff;
}


/* ===== 画像プレビュー（ライトボックス） ===== */
.my-menu-tpl-image,
.my-file-item--done img,
.my-pp-thumb img {
  cursor: zoom-in;
}
.my-image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.my-image-lightbox[hidden] { display: none !important; }
.my-image-lightbox__img {
  max-width: 95vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  background: #fff;
  cursor: default;       /* 画像自体クリックではクローズさせない（背景クリックでクローズ） */
  user-select: none;
}
.my-image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.my-image-lightbox__close:hover {
  background: #fff;
  transform: scale(1.05);
}
.my-image-lightbox__spinner {
  position: absolute;
  color: #fff;
  font-size: 14px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  pointer-events: none;
}
body.my-lightbox-open { overflow: hidden; }


/* ===== メニュー表テンプレ: コピー元リンク化 ===== */
.my-owner-folder-link {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 16px;
  background: #2d7fd1;
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}
.my-owner-folder-link:hover {
  background: #2066b0;
  transform: translateY(-1px);
}

/* ===== メニュー表テンプレ: 入力値プレビューリンク ===== */
.my-menu-url-preview {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px dashed #a8d0f0;
  border-radius: 5px;
  font-size: 13px;
}
.my-menu-url-preview-link {
  color: #1a4d86;
  text-decoration: none;
  font-weight: 600;
}
.my-menu-url-preview-link:hover {
  text-decoration: underline;
  color: #0d3a6b;
}

/* ===== Rich autocomplete dropdown (bank / branch) ===== */
.my-ac-panel {
  background: #fff;
  border: 1px solid #cfd6e0;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 9000;
  max-width: 600px;
  font-size: 13.5px;
  overflow: hidden;
}
.my-ac-panel[hidden] { display: none !important; }
.my-ac-header {
  padding: 6px 12px;
  font-size: 11.5px;
  color: #64748b;
  background: #f5f8fb;
  border-bottom: 1px solid #e5ecf2;
}
.my-ac-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
}
.my-ac-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f4f8;
  transition: background 0.1s;
}
.my-ac-item:last-child { border-bottom: none; }
.my-ac-item:hover,
.my-ac-item--active {
  background: #eef6ff;
}
.my-ac-item-main {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  grid-row: 1;
  grid-column: 1;
  line-height: 1.3;
  word-break: break-all;
}
.my-ac-item-sub {
  font-size: 11px;
  color: #6b7280;
  grid-row: 2;
  grid-column: 1;
  line-height: 1.2;
}
.my-ac-item-code {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #475569;
  background: #eef2f7;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.my-ac-mark {
  background: #fff8a0;
  color: #1f2937;
  padding: 0;
  border-radius: 2px;
  font-weight: 600;
}
.my-ac-empty {
  padding: 14px 12px;
  color: #94a3b8;
  text-align: center;
  font-size: 12.5px;
}

/* ===== 商品写真 一括アップロードボタン ===== */
.my-pp-bulk-btn {
  margin-left: 8px;
  padding: 8px 14px;
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.my-pp-bulk-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
}
.my-pp-bulk-btn:active { transform: translateY(0); }

/* =====================================================================
   [UX] Sticky Status Bar / FAB Submit / Toast / Mobile 最適化
   2026-04-23 UX リフレッシュ
   ===================================================================== */

/* 本体を下にオフセットしてステータスバー分のスペースを確保 */
body.my-has-sticky { padding-top: 56px !important; }
@media (max-width: 640px) {
  body.my-has-sticky { padding-top: 96px !important; }
}

/* === Sticky Status Bar === */
.my-sticky-status {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: linear-gradient(to bottom, #ffffff 0%, #f6f9fc 100%);
  border-bottom: 1px solid #d8e1ec;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.08);
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  font-size: 13px;
  color: #1f2937;
}
.my-ss__left,
.my-ss__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.my-ss__center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.my-ss__page {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32vw;
}
.my-ss__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #eef2f7;
  border: 1px solid #d8e1ec;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1.2;
  font-family: inherit;
}
.my-ss__chip b {
  font-weight: 700;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
}
.my-ss__chip:hover { background: #dde6f1; }
.my-ss__chip--ok {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
.my-ss__chip--warn {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
.my-ss__chip--progress {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}
.my-ss__chip--draft {
  cursor: default;
}
.my-ss__chip--mode {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
  font-weight: 700 !important;
}
@media (max-width: 640px) {
  .my-sticky-status {
    flex-wrap: wrap;
    height: auto;
    min-height: 80px;
    padding: 6px 10px;
    gap: 6px;
  }
  .my-ss__page { max-width: 100%; flex: 1 1 100%; font-size: 12.5px; }
  .my-ss__center { flex: 1 1 100%; justify-content: flex-start; }
  .my-ss__right { flex: 0 0 auto; }
}

/* === FAB Submit Button === */
.my-fab-submit {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 7000;
}
.my-fab-submit__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #2d7fd1 0%, #1e5aa8 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30, 90, 168, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
  min-height: 48px;
  position: relative;
}
.my-fab-submit__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 90, 168, 0.5), 0 4px 6px rgba(0, 0, 0, 0.12);
}
.my-fab-submit__btn:active { transform: translateY(0); }
.my-fab-submit__btn--blocked {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  box-shadow: 0 6px 20px rgba(100, 116, 139, 0.3);
}
.my-fab-submit__icon { font-size: 18px; line-height: 1; }
.my-fab-submit__text { font-weight: 700; }
.my-fab-submit__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  white-space: nowrap;
}
.my-fab-submit__badge[hidden] { display: none !important; }
@media (max-width: 640px) {
  .my-fab-submit { bottom: 16px; right: 16px; }
  .my-fab-submit__btn { padding: 12px 18px; font-size: 14px; }
}

/* === Toast Notifications === */
.my-toast-container {
  position: fixed;
  top: 68px;
  right: 20px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.my-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-left-width: 4px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(20, 40, 70, 0.15);
  font-size: 13px;
  color: #1f2937;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: auto;
}
.my-toast--enter {
  opacity: 1;
  transform: translateX(0);
}
.my-toast--leave {
  opacity: 0;
  transform: translateX(24px);
}
.my-toast--success { border-left-color: #16a34a; }
.my-toast--error   { border-left-color: #dc2626; }
.my-toast--warn    { border-left-color: #d97706; }
.my-toast--info    { border-left-color: #2563eb; }
.my-toast__icon {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.my-toast--success .my-toast__icon { color: #16a34a; }
.my-toast--error   .my-toast__icon { color: #dc2626; }
.my-toast--warn    .my-toast__icon { color: #d97706; }
.my-toast--info    .my-toast__icon { color: #2563eb; }
.my-toast__msg { flex: 1; line-height: 1.45; word-break: break-word; }

@media (max-width: 640px) {
  .my-toast-container { top: 96px; right: 10px; left: 10px; max-width: none; }
}

/* === 必須マーク (*) の視認性向上 === */
.sd-question__required-text,
.sv-string-viewer .sd-required-text,
span.sd-required-text {
  color: #dc2626 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin-left: 4px;
}

/* 質問一時ハイライト（ジャンプ時） */
.my-highlight-pulse {
  animation: myHighlightPulse 1.6s ease-out;
}
@keyframes myHighlightPulse {
  0%   { background-color: rgba(253, 224, 71, 0.55); }
  60%  { background-color: rgba(253, 224, 71, 0.25); }
  100% { background-color: transparent; }
}

/* === モバイル / タブレット タップ領域 & 入力 === */
@media (max-width: 768px) {
  /* iOS の自動ズームを抑止するため 16px 以上に */
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=date],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }
  /* ボタン類のタップ領域 */
  button,
  .sd-btn,
  .sd-navigation__prev-btn,
  .sd-navigation__next-btn,
  .sd-navigation__complete-btn {
    min-height: 44px !important;
  }
  /* ラジオ・チェックボックスのタップ領域拡大 */
  .sd-item__decorator {
    min-width: 22px;
    min-height: 22px;
  }
  .sd-item__control-label {
    padding: 8px 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* 下書きステータスの旧テキスト (.draft-status) は非表示にして新チップに統合 */
.draft-status { display: none !important; }

/* ===== [UX trim] FAB 送信ボタンと中央チップを非表示 ===== */
#my-fab-submit { display: none !important; }
.my-ss__center { display: none !important; }
.my-ss__page { max-width: 100%; }

.demae-update-mode-banner {
  max-width: 720px;
  margin: 12px auto 0;
  padding: 12px 16px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 5px solid #f97316;
  border-radius: 8px;
  color: #7c2d12;
  box-shadow: 0 3px 12px rgba(124, 45, 18, 0.08);
}
.demae-update-mode-banner[hidden] { display: none !important; }
.demae-update-mode-banner__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
}
.demae-update-mode-banner__label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 12px;
}
.demae-update-mode-banner__sub {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #9a3412;
}
.demae-case-import-panel {
  max-width: 720px;
  margin: 12px auto 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(30, 64, 175, 0.08);
}
.demae-case-import-panel--update {
  border-color: #fdba74;
  box-shadow: 0 3px 14px rgba(249, 115, 22, 0.12);
}
.demae-case-import-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.demae-case-import-panel__title {
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
}
.demae-case-import-panel--update .demae-case-import-panel__title {
  color: #9a3412;
}
.demae-case-import-panel__desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #475569;
}
.demae-case-import-panel__clear {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.demae-case-import-panel__clear:hover {
  background: #fef2f2;
  border-color: #ef4444;
}
.demae-case-import-panel__clear[hidden] { display: none !important; }
.demae-case-import-panel__field .sd-question {
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.demae-case-import-panel__field .sd-question__header {
  padding-top: 0 !important;
}
@media (max-width: 640px) {
  .demae-case-import-panel {
    margin-left: 8px;
    margin-right: 8px;
    padding: 12px;
  }
  .demae-case-import-panel__head {
    display: block;
  }
  .demae-case-import-panel__clear {
    width: 100%;
    margin-top: 10px;
  }
}
body.my-demae-update-mode .sd-action-bar.sd-footer {
  border-top-color: #fdba74 !important;
  box-shadow: 0 -6px 18px rgba(249, 115, 22, 0.18) !important;
}
body.my-demae-update-mode .sd-action-bar.sd-footer .sd-navigation__complete-btn {
  background-color: #ea580c !important;
}
body.my-demae-update-mode .sd-action-bar.sd-footer .sd-navigation__complete-btn:hover {
  background-color: #c2410c !important;
}

/* =====================================================================
   [Mobile Width Optimization] 2026-04-24
   スマホ (≤640px) 時の横余白を最小化して操作性を改善
   ===================================================================== */
@media (max-width: 640px) {
  body {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #surveyContainer {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* SurveyJS v2 のページ/パネル/質問の左右パディングを圧縮 */
  .sd-root-modern,
  .sd-body,
  .sd-body__page,
  .sd-page,
  .sd-page__content,
  .sd-panel,
  .sd-panel__content,
  .sd-question,
  .sd-question__content,
  .sd-element,
  .sd-element__content,
  .sd-element__header,
  .sd-title {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* パネル内部のネスト padding も縮小 */
  .sd-panel .sd-panel__content {
    padding: 6px !important;
  }
  /* 質問の縦間隔もやや詰める（スクロール量減らす） */
  .sd-question {
    margin-bottom: 8px !important;
  }
  /* Input 類は横幅 100% で満たす */
  .sd-input,
  .sd-text,
  .sd-dropdown,
  .sd-comment,
  .sd-rating__item-text,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input:not([type]),
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* form-header の余白も最小化 */
  .form-header {
    padding: 8px 10px !important;
  }
  .form-header h1 {
    font-size: 16px !important;
    margin: 0 !important;
  }
  /* banner も同様 */
  .banner {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  /* 商品写真グリッドも横幅を使い切る */
  .my-pp-root,
  .my-pp-list,
  .my-pp-row,
  .my-pp-file-cell,
  .my-file-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* AIチェック表示、ヘルパーパネル等の左右パディングも縮小 */
  .my-ai-check,
  .my-owner-folder-helper,
  .my-menu-url-preview {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* ファイルグリッドのアイテムサイズを調整（小さい画面で 2〜3 列入るように） */
  .my-file-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
    gap: 6px !important;
  }
  /* 商品写真の行も圧縮 */
  .my-pp-row {
    gap: 6px !important;
    padding: 6px !important;
  }
}
/* さらに狭い画面 (≤420px) 向けの追加圧縮 */
@media (max-width: 420px) {
  .sd-question,
  .sd-panel__content {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .sd-question__header .sd-title,
  .sd-question__title {
    font-size: 14px !important;
  }
  .form-header h1 {
    font-size: 15px !important;
  }
}

/* =====================================================================
   [Mobile Overflow Fix] 2026-04-24
   コピー元スプレッドシート ヘルパ等の右側はみ出しで画面がずれる問題の修正
   ===================================================================== */

/* 画面全体の水平オーバーフローを封じる */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* コピー元スプレッドシート ヘルパ全体 */
.my-owner-folder-helper {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ラベル文言の強制改行 */
.my-owner-folder-label {
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.4;
  white-space: normal;
}

/* リンクボタンも幅制限 */
.my-owner-folder-link {
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
  display: inline-block;
}

/* 手順画像の本気の上限制御 */
.my-menu-tpl-image-wrap {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.my-menu-tpl-image {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* プレビューリンクも同様 */
.my-menu-url-preview {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.my-menu-url-preview-link {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* スマホ時の追加ガード */
@media (max-width: 640px) {
  .my-owner-folder-helper,
  .my-owner-folder-label,
  .my-owner-folder-link,
  .my-menu-url-preview,
  .my-menu-url-preview-link,
  .sd-question__description,
  .sd-description {
    max-width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
  /* 全ての要素で親を超えないように */
  .sd-question,
  .sd-question__content,
  .sd-question__header {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

/* =====================================================================
   [Dropdown Popup Fix] 2026-04-24
   SurveyJS v2 の dropdown ポップアップが画面外に見切れて上側クリックできない問題の修正
   ===================================================================== */
.sv-popup,
.sv-popup__container,
.sd-popup,
.sd-popup__container {
  z-index: 10000 !important;
}
.sv-popup__content,
.sv-popup__body,
.sv-list,
.sd-list,
.sv-list__container,
.sd-dropdown__list,
.sv-dropdown_popup {
  max-height: 50vh !important;
  overflow-y: auto !important;
}
/* リスト項目も視認しやすいパディング確保 */
.sv-list__item,
.sd-list__item {
  padding: 10px 14px !important;
  min-height: 40px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .sv-popup__content,
  .sv-popup__body,
  .sv-list,
  .sd-list,
  .sv-list__container {
    max-height: 60vh !important;
  }
}

/* =====================================================================
   [UX Deep Upgrade] 2026-04-24
   カード型ラジオ/チェックボックス + エラー強調 + フォーカス可視化
   ===================================================================== */

/* ラジオ & チェックボックス項目をカード風に */
.sd-selectbase .sd-item,
.sd-selectbase .sv-selectbase__item {
  margin-bottom: 6px;
}
.sd-item__control-label,
.sd-selectbase label.sd-item__control-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 14px !important;
  min-height: 46px;
  border: 1px solid #d8e1ec;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  line-height: 1.4;
  box-sizing: border-box;
  width: 100%;
}
.sd-item__control-label:hover {
  border-color: #2d7fd1;
  background: #f5faff;
}
/* 選択済みの見た目を明確に */
.sd-item--checked .sd-item__control-label,
.sd-item.sd-item--checked .sd-item__control-label,
.sd-item--checked label.sd-item__control-label {
  border-color: #2d7fd1 !important;
  background: #eaf4ff !important;
  box-shadow: 0 2px 8px rgba(45, 127, 209, 0.15);
}
.sd-item--checked .sd-item__control-label,
.sd-item--checked label.sd-item__control-label {
  font-weight: 600;
}

/* エラー状態の視認性アップ */
.sd-question--error,
.sd-question--answered-false.sd-question--required,
.sd-question.sd-question--error {
  position: relative;
}
.sd-question--error > .sd-question__content {
  border-left: 4px solid #dc2626;
  padding-left: 10px;
  background: #fef2f2;
  border-radius: 0 6px 6px 0;
}
.sd-question__erbox,
.sd-error {
  color: #dc2626 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  background: #fee2e2 !important;
  border-radius: 4px;
  margin-top: 4px;
}

/* input/textarea のフォーカス時の視認性 */
.sd-input:focus,
.sd-text:focus,
.sd-comment:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #2d7fd1 !important;
  box-shadow: 0 0 0 3px rgba(45, 127, 209, 0.2) !important;
}

/* パネル（セクション）タイトルの視認性 */
.sd-panel__title,
.sd-panel-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e40af !important;
  padding: 8px 12px !important;
  background: #eef6ff !important;
  border-left: 4px solid #2d7fd1 !important;
  border-radius: 0 6px 6px 0;
  margin-bottom: 12px !important;
}

/* 質問タイトル周りのスペース整理 */
.sd-question__title,
.sd-title {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 6px;
}

/* description（備考文言）を視認しやすく */
.sd-question__description,
.sd-description {
  font-size: 13px !important;
  color: #4b5563 !important;
  line-height: 1.55 !important;
  background: #f8fafc;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}

/* スマホでタップ領域を一段広げる */
@media (max-width: 640px) {
  .sd-item__control-label {
    min-height: 52px !important;
    padding: 13px 12px !important;
    font-size: 14.5px;
  }
  .sd-panel__title,
  .sd-panel-title {
    font-size: 16px !important;
  }
}

/* =====================================================================
   [Edit Review Mode] 2026-04-25
   送信済みエントリーの修正モード用UI
   ===================================================================== */
body.my-review-mode .form-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
body.my-review-mode .form-header::after {
  content: "📝 修正モード";
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
body.my-review-mode .my-sticky-status {
  background: linear-gradient(to bottom, #fff7ed 0%, #fed7aa 100%) !important;
  border-bottom-color: #fdba74 !important;
}

/* 編集トグルボタン */
.my-edit-toggle-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
}
.my-edit-toggle-btn {
  padding: 4px 10px;
  background: #fff;
  color: #d97706;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.my-edit-toggle-btn:hover {
  background: #f59e0b;
  color: #fff;
}
.my-edit-toggle-status {
  display: inline-block;
  padding: 4px 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* レビュー時のロック表現（読み取り専用フィールド全体を薄くする） */
body.my-review-mode .my-review-locked {
  position: relative;
  opacity: 0.85;
}
body.my-review-mode .my-review-locked input,
body.my-review-mode .my-review-locked textarea,
body.my-review-mode .my-review-locked select,
body.my-review-mode .my-review-locked .my-pp-add-btn,
body.my-review-mode .my-review-locked .my-pp-bulk-btn,
body.my-review-mode .my-review-locked .my-pp-pick-btn,
body.my-review-mode .my-review-locked .my-file-add-btn,
body.my-review-mode .my-review-locked .my-file-remove,
body.my-review-mode .my-review-locked .sd-action--clear,
body.my-review-mode .my-review-locked button[type="button"]:not(.my-edit-toggle-btn):not(.my-pp-remove-btn) {
  pointer-events: none !important;
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
}
/* [2026-04-28] 商品写真の削除ボタン (×) は修正モードでも常に押せるようにする */
body.my-review-mode .my-pp-remove-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}
body.my-review-mode .sd-question[data-name] .sd-question__content[disabled],
body.my-review-mode .sd-question .sd-input[readonly],
body.my-review-mode .sd-question .sd-input[disabled] {
  background: #f9fafb !important;
}


/* ---------- [2026-04-26] 送信ボタンを常時追尾（fixed bottom）------- */
/*
   sticky は親コンテナのスクロール条件に依存して効かないケースがあるため、
   viewport 固定の position: fixed で確実に画面下に貼り付ける。
   フォーム本体は最終要素が隠れないよう padding-bottom で逃がす。
*/
.sd-action-bar.sd-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid #E5E7EB !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08) !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
}
/* 完了ボタン自体を少し横に伸ばしてタップしやすく */
.sd-action-bar.sd-footer .sd-btn,
.sd-action-bar.sd-footer .sd-navigation__complete-btn,
.sd-action-bar.sd-footer .sd-navigation__next-btn,
.sd-action-bar.sd-footer .sd-navigation__prev-btn {
  min-height: 44px !important;
  font-size: 16px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.sd-action-bar.sd-footer .my-clear-all-btn {
  display: none !important;
  background: #fff !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.sd-action-bar.sd-footer .my-clear-all-btn:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
}
@media (max-width: 640px) {
  .sd-action-bar.sd-footer .my-clear-all-btn {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* 修正モード時はオレンジアクセント */
body.my-review-mode .sd-action-bar.sd-footer {
  border-top-color: #F59E0B !important;
  box-shadow: 0 -6px 18px rgba(245, 158, 11, 0.22) !important;
}
/* 本文の下に固定フッター分の余白を確保（最終要素が隠れないように） */
.sd-root-modern,
.sd-body,
#surveyContainer {
  padding-bottom: 100px !important;
}
@media (max-width: 600px) {
  .sd-root-modern,
  .sd-body,
  #surveyContainer {
    padding-bottom: 110px !important;
  }
}

/* [2026-04-29] アップロード中の行をキャンセル/削除するボタン */
.my-pp-uploading {
  position: relative;
}
.my-pp-upload-cancel {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.my-pp-upload-cancel:hover { background: #dc2626; }

/* [v11.2] AI 自動加工 ON/OFF トグルバー */
.ai-auto-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin: 16px auto 12px;
  max-width: 800px;
  background: linear-gradient(135deg, #ecfeff, #f0f9ff);
  border: 1px solid #bae6fd;
  border-left: 5px solid #0891b2;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-family: inherit;
  gap: 16px;
}
.ai-auto-toggle-bar--off {
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border-color: #fcd34d;
  border-left-color: #d97706;
}
.ai-toggle-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ai-toggle-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.ai-toggle-title {
  font-size: 15px;
  font-weight: 700;
  color: #0c4a6e;
  line-height: 1.3;
}
.ai-auto-toggle-bar--off .ai-toggle-title { color: #78350f; }
.ai-toggle-title small {
  font-weight: 500;
  font-size: 12px;
  color: #475569;
  margin-left: 4px;
}
.ai-toggle-desc {
  font-size: 11px;
  color: #475569;
  margin-top: 2px;
  line-height: 1.4;
}
.ai-toggle-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ai-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.ai-switch input { opacity: 0; width: 0; height: 0; }
.ai-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #cbd5e1;
  border-radius: 13px;
  transition: 0.2s;
}
.ai-switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ai-switch input:checked + .ai-switch-slider { background: #0891b2; }
.ai-switch input:checked + .ai-switch-slider:before { transform: translateX(22px); }
.ai-toggle-state-label {
  font-size: 13px;
  font-weight: 700;
  color: #0c4a6e;
  min-width: 32px;
  text-align: center;
}
.ai-auto-toggle-bar--off .ai-toggle-state-label { color: #78350f; }
@media (max-width: 640px) {
  .ai-auto-toggle-bar { margin: 12px 8px; padding: 12px 14px; gap: 10px; }
  .ai-toggle-icon { font-size: 22px; }
  .ai-toggle-title { font-size: 13px; }
  .ai-toggle-desc { font-size: 10px; }
}