/* ============================================
   商品登録システム(デモ)のスタイル
   ホームページと同じ配色トークン(黄基調+白カード)を使用
   ============================================ */

:root {
  --color-bg: #ffffcc;
  --color-surface: #ffffff;
  --color-text: #4a3a28;
  --color-text-sub: #97846c;
  --color-primary: #ffcc33;
  --color-primary-soft: #ffeeaa;
  --color-accent: #ff9900;
  --color-accent-deep: #d97e00;
  --color-line: #f1e5c3;
  --color-danger: #cc3333;
  --radius-card: 16px;
  --shadow-card: 0 4px 16px rgba(150, 110, 30, 0.12);
  --font-base: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  /* ヘッダーの段: 未選択は白、選択のみ色(メイン=TOPの黄・サブ=橙)。段の高さはホームページと同じ */
  --admin-tab-active: #ffdf70;
  --admin-tab-active-line: #7a5c00;
  --admin-subtab-active: var(--color-accent);
  --admin-header-h: 64px;
  --admin-tab-h: 44px;
}

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

/* displayを持つ要素でもhidden属性を必ず効かせる(homepageと同じ対策) */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
}

/* ---- ヘッダー(1段目・sticky) ---- */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: var(--color-surface);
  box-shadow: 0 2px 10px rgba(150, 110, 30, 0.15);
}

/* スマホ用のメニュー開閉ボタン(2段目のメインタブを開閉。PCでは出さない) */
.admin-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 2px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  cursor: pointer;
}

.admin-header__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.admin-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.admin-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.admin-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.admin-header__title {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-header__side {
  display: flex;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  margin-left: auto;
}

/* ログイン中のGoogleアカウント(誰で入っているか一目でわかるように) */
.admin-header__account {
  overflow: hidden;
  color: var(--color-text-sub);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-header__logout {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 2px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ---- レイアウト ---- */
/* ヘッダーの2段バーは全幅の白バー、中身とカードは中央寄せ(ホームページのl-containerと同じ1080) */
.admin-main {
  padding: 0 0 48px;
}

.admin-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px 0;
}

#login-view {
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 24px auto 0;
}

/* 2段目3段目の中身は中央寄せ(ホームページのl-containerと同じ幅)。バー自体は全幅で白 */
.admin-nav__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- 2段目: メインタブ(全幅の白バー・未選択は白・選択のみ黄) ---- */
/* スマホ: 既定は隠し、ハンバーガーで開閉。PCは下のメディアクエリで全幅sticky */
.admin-tabs {
  display: none;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.admin-tabs.is-open {
  display: block;
}

/* スマホのドロップダウンは2列 */
.admin-tabs.is-open .admin-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}

.admin-tabs__item {
  padding: 12px 6px;
  border: none;
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text-sub);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.admin-tabs__item.is-active {
  background-color: var(--admin-tab-active);
  color: var(--admin-tab-active-line);
}

/* ---- 3段目: サブタブ(全幅の白バー・未選択は白・選択のみ橙) ---- */
.admin-subtabs {
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgba(150, 110, 30, 0.1);
}

.admin-subtabs .admin-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-subtabs__item {
  padding: 8px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  color: var(--color-text-sub);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap; /* ボタン内で語の途中改行をしない(折り返しはボタン単位・#54改) */
}

.admin-subtabs__item.is-active {
  border-color: var(--admin-subtab-active);
  background-color: var(--admin-subtab-active);
  color: #ffffff;
}

/* カテゴリタブの3段目だけカテゴリのイメージカラー(色はJSがボタンごとに--cat-tab/--cat-tab-tintで指定)。
   未選択=白地+濃色文字 / ホバー=薄色背景+濃色文字 / 選択中=濃色背景+白文字。
   ※PC(≥700px)のメディアクエリ内に後勝ちのhover/is-activeルールがあるため、.admin-subtabs付きで詳細度を上げて勝たせる */
.admin-subtabs .admin-subtabs__item--cat {
  color: var(--cat-tab);
}

.admin-subtabs .admin-subtabs__item--cat:hover {
  background-color: var(--cat-tab-tint);
  color: var(--cat-tab);
}

.admin-subtabs .admin-subtabs__item--cat.is-active {
  border-color: var(--cat-tab);
  background-color: var(--cat-tab);
  color: #ffffff;
}

.card {
  margin-top: 16px;
  padding: 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card__heading {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 17px;
  font-weight: 800;
}

.card__heading::before {
  content: "";
  flex: 0 0 6px;
  height: 20px;
  border-radius: 3px;
  background-color: var(--color-primary);
}

.card__note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-sub);
}

/* 見出し+画面切替ボタン(一覧⇔登録・編集)の行 */
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.login {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.login__note {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background-color: var(--color-primary-soft);
  font-size: 13px;
}

/* ---- フォーム ---- */
.form__field {
  display: block;
  margin-top: 14px;
}

.form__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.form__input {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 2px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  font: inherit;
  color: inherit;
}

.form__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* テキストエリアは縦方向だけ高さ調整可(横幅は固定) */
textarea.form__input {
  resize: vertical;
  min-height: 88px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 12px;
}

/* チェックボックス1つの項目(入力欄の行と高さをそろえる) */
.form__field--check {
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
  cursor: pointer;
}

.form__error {
  margin-top: 10px;
  font-weight: 700;
  color: var(--color-danger);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* 一覧・入力欄の「上」に置く保存ボタンの行(#26)。下の内容と密着しないよう下にも余白
   (capacity-list・legal-fields など自分の上余白を持たない一覧の前でも14pxのリズムを保つ。
   form__field(上余白14px)の前では相殺されて二重にならない) */
.form__actions--top {
  margin-bottom: 14px;
}

/* ---- ボタン ---- */
.button {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* 押せないボタン(ページ送りの端・▲▼の端など)は薄く見せる(公開側の.c-button:disabledと同じ考え方)。
   pointer-events: none でホバー色が付くのも止める。
   .is-disabledはlabelで作ったボタン用(disabled属性が効かないため。例=商品画像の追加が5枚上限のとき) */
.button:disabled,
.button.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* 変更できない入力欄(法定ページの必須項目の名前など)。読める濃さのままグレー地で「変更不可」を示す */
.form__input:disabled {
  background-color: #f1f1f1;
  color: #666666;
  cursor: default;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}

/* 編集・追加・保存などのホバーは緑系(削除だけ赤系) */
.button--primary:hover {
  background-color: #43a047;
  color: #ffffff;
}

.button--sub {
  background-color: var(--color-surface);
  border: 2px solid var(--color-line);
  color: inherit;
}

.button--sub:hover {
  background-color: #e6f6e6;
  border-color: #66bb6a;
}

.button--danger {
  background-color: var(--color-surface);
  border: 2px solid #f0c4c4;
  color: var(--color-danger);
}

.button--danger:hover {
  background-color: #ffecec;
}

/* ---- 写真の位置(左寄せ/中央/右寄せ) ---- */
.cms-align {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.cms-align__button {
  padding: 8px 16px;
  background-color: var(--color-surface);
  border: 2px solid var(--color-line);
  color: inherit;
}

.cms-align__button:hover {
  border-color: #66bb6a;
}

/* 選んでいる位置は緑(追加・保存系と同じ色) */
.cms-align__button--active {
  background-color: #43a047;
  border-color: #43a047;
  color: #ffffff;
}

/* ---- 画像選択 ---- */
.image-picker {
  display: flex;
  flex-wrap: wrap; /* サムネイルが増えても折り返す */
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}

/* 追加済み画像のサムネイル一覧(先頭=メイン) */
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-thumb {
  position: relative;
  width: 96px;
}

.image-thumb__img {
  display: block;
  width: 96px;
  height: 72px; /* 4:3 */
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

/* 先頭画像の「メイン」バッジ */
.image-thumb__main {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.image-thumb__tools {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.image-thumb__button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.image-thumb__button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- 店長ブログの編集(見出し/段落/写真のブロック) ---- */
.blog-cover,
.blog-block__image {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
}

.blog-cover__img,
.blog-block__img {
  width: 160px;
  height: auto; /* 選んだ縦横比(正方形/横長/ワイド)のまま表示する */
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.blog-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0;
}

.blog-block {
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
}

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

.blog-block__kind {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-sub);
}

/* 並べ替え・削除ボタン(横並び・▲/▼/×) */
.blog-block__tools {
  display: flex;
  gap: 4px;
}

.blog-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

/* ---- ブログのカテゴリ管理(チップ=名前+×。場所を取らない横並び) ---- */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 14px;
  border-radius: 999px;
  background-color: var(--color-primary-soft);
  font-size: 13px;
  font-weight: 700;
}

.blog-chip__remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-danger);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* 記事編集のカテゴリ選択(タップで付け外し) */
.blog-cat-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ※一覧のページ送りは全画面共通の .admin-pager(下の方)に統一(#29表記統一。旧.blog-list-pagerは廃止) */

/* スライダー/トピックス設定の保存結果(カードの外に出るため白背景の帯にする) */
.ig-result {
  background-color: var(--color-surface);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: var(--shadow-card);
}

/* ---- コメントの管理(承認・返信・削除) ---- */
.comment-row {
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  margin-bottom: 10px;
}

.comment-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 「記事「◯◯」へのコメント」の行。どの記事宛てか迷わないよう1行目に単独で出す(§12.102) */
.comment-row__post {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.comment-row__name {
  font-weight: 800;
}

.comment-row__date {
  font-size: 12px;
  color: var(--color-text-sub);
}

.comment-badge {
  margin-left: auto;
  padding: 2px 12px;
  border-radius: var(--radius-card);
  font-size: 12px;
  font-weight: 800;
}

.comment-badge--on {
  background-color: #d8f0d8;
  color: #2f7d33;
}

.comment-badge--off {
  background-color: #ffe0b2;
  color: #b3541e;
}

/* 未処理(返信も処理済みもしていない)コメントは赤で目立たせる */
.comment-badge--pending {
  background-color: #ffd9d9;
  color: #c62828;
}

.comment-row__handled-note {
  align-self: center;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* 記事一覧・コメントの絞り込み欄(記事名・日付・未処理のみ) */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.blog-filter__text {
  flex: 1;
  min-width: 160px;
}

.blog-filter__date,
.blog-filter__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.blog-filter__label {
  color: var(--color-text-sub);
}

.comment-row__body {
  margin: 8px 0;
  line-height: 1.7;
  white-space: pre-line;
}

.comment-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comment-row__reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-line);
}

/* 承認前の「返信は承認後に書けます」の案内(§12.102) */
.comment-row__reply-note {
  font-size: 12px;
  color: var(--color-text-sub);
}

/* ---- 写真の表示サイズ選択(小/中/大/特大の等幅ボタン) ---- */
.blog-size {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
}

.blog-size__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.blog-size__row {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4px;
}

.blog-size__button {
  padding: 5px 12px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.blog-size__button.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- 記事プレビュー(公開ページ=記事本文の見え方を再現するモーダル) ---- */
.blog-preview-dialog {
  width: min(94vw, 720px);
  max-height: 90vh;
  margin: auto; /* グローバルの * { margin:0 } がdialogの中央寄せを潰すため必須 */
  padding: 16px;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: auto;
}

.blog-preview-dialog::backdrop {
  background-color: rgba(70, 55, 20, 0.45);
}

.blog-preview__note {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-bottom: 10px;
}

/* 公開ページの背景(黄)+白カードを再現。中の体裁は homepage style.css の .blog-article と対応 */
.blog-preview {
  padding: 24px 20px;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.blog-preview__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.blog-preview__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.blog-preview__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}

.blog-preview__heading {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 800;
}

.blog-preview__heading::before {
  content: "";
  flex: 0 0 6px;
  height: 22px;
  border-radius: 3px;
  background-color: var(--color-primary);
}

.blog-preview__paragraph {
  margin-top: 14px;
  line-height: 1.9;
  white-space: pre-wrap; /* 段落内の改行・空行・スペースを反映(公開ページと同じ見た目) */
}

/* 段落の文字寄せ(プレビュー。公開 style.css と同じクラス名で見た目を揃える) */
.blog-align-center {
  text-align: center;
}

.blog-align-right {
  text-align: right;
}

.blog-preview__figure {
  margin-top: 18px;
}

.blog-preview__img {
  width: 100%;
  border-radius: 12px;
}

/* 写真の表示サイズ(homepage style.css と同じ最大幅・中央寄せ) */
.blog-figure--sm {
  max-width: 260px;
}

.blog-figure--md {
  max-width: 420px;
}

.blog-figure--lg {
  max-width: 620px;
}

.blog-figure--xl {
  max-width: 100%;
}

/* ---- 公開状態のバッジ(一覧で 公開中=緑 / 公開前=灰 / 期限切れ=赤) ---- */
.pub-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pub-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.pub-badge--active {
  background-color: #e3f6e5;
  color: #1b7a2f;
}

.pub-badge--before {
  background-color: #eef2f7;
  color: #566b7d;
}

.pub-badge--expired {
  background-color: #fde8e8;
  color: #c0392b;
}

/* 注文の途中段階(メール対応済み)=黄 */
.pub-badge--progress {
  background-color: #fff3d6;
  color: #b26a00;
}

/* 注文の却下済み・予約のお断り=グレー */
.pub-badge--closed {
  background-color: #ececec;
  color: #666666;
}

/* 予約の確定済み=青(ホームページの予約カレンダーに載る状態) */
.pub-badge--confirmed {
  background-color: #d7eaff;
  color: #114a8c;
}

.pub-note__range {
  font-size: 12px;
  color: #666;
}

/* ---- サブカテゴリ(タグ)の並び順 ---- */
.tag-order {
  margin: 8px 0 12px;
}

.tag-order__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-top: 6px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background-color: var(--color-surface);
}

.tag-order__name {
  flex: 1;
  min-width: 0; /* 長い名前は折り返してボタンを押し出さない */
  font-weight: 700;
}

/* そのタグが付いている商品の数(削除ガードの目安) */
.tag-order__count {
  flex: none;
  font-size: 12px;
  color: var(--color-text-sub);
}

.tag-order__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 「＋ 追加」の入力欄+ボタン(1行・狭い幅では入力欄が縮む) */
.tag-order-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.tag-order-add .form__input {
  flex: 1 1 160px;
  min-width: 0;
}

.tag-order-add .button {
  flex: none;
}

/* 並び替えの▲▼(サブカテゴリ・TOP掲載・カテゴリのメニュー/コンテンツで共用) */
.reorder {
  display: flex;
  gap: 4px;
}

.reorder__btn {
  padding: 4px 10px;
  min-width: 40px;
}

/* ▲▼の端の非活性は共通の .button:disabled が薄く見せる(個別規則は共通化に伴い削除) */

/* ---- 画像調整モーダル(共通トリミングUI=crop-stageをdialog内に表示) ---- */
.crop-dialog {
  width: min(92vw, 640px);
  margin: auto; /* グローバルの * { margin:0 } がdialogの中央寄せを潰すため必須 */
  padding: 20px;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.crop-dialog::backdrop {
  background-color: rgba(70, 55, 20, 0.45);
}

.cropper__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  max-width: 360px;
}

.cropper__zoom {
  flex: 1;
}

/* 確定後のプレビュー(実際の表示サイズ=比率で切り抜いた見た目) */
.crop-preview {
  position: relative;
  overflow: hidden;
  width: 240px;
  max-width: 100%;
  margin-top: 6px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.ig-shape-preview--square {
  aspect-ratio: 1 / 1;
}

.ig-shape-preview--landscape {
  aspect-ratio: 4 / 3;
}

.ig-shape-preview--wide {
  aspect-ratio: 16 / 9;
}

.crop-preview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 採用枠あり: 枠内だけを枠いっぱいに拡大表示(ホームページの ig-frame__img--crop と同じ計算) */
.crop-preview__img--crop {
  height: auto;
  max-width: none;
  object-fit: fill;
  transform-origin: top left;
}

.image-picker__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px dashed var(--color-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* ---- タグ選択 ---- */
.tag-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.tag-boxes__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 2px solid var(--color-line);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.tag-boxes__item:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-primary-soft);
}

.tag-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag-add .form__input {
  margin-top: 0;
}

/* 「追加」ボタンが入力欄に押されて縦書きに潰れないようにする */
.tag-add .button {
  flex: none;
}

/* ---- セール設定(「セール」タグ選択中だけ表示) ---- */
.sale-fields {
  padding: 4px 14px 14px;
  border: 1px solid #f0c4c4;
  border-radius: 10px;
  background-color: #fff7f7;
}

.sale-fields > .form__label {
  margin-top: 10px;
  color: #bb2222;
}

/* ---- 登録済み一覧 ---- */
#search-input {
  margin-top: 12px;
}

/* 一覧のページャー(全画面共通・上下2箇所。商品/ブログ記事/コメント/Instagram取込) */
/* スマホ: ボタンの文字を折り返さず、1行目=前へ/次へボタン・2行目=件数表示にする
   (以前はボタンが縮んで文字が2行に折れていた)。PCは従来の横一列(ファイル末尾のPC用@mediaで上書き) */
.admin-pager:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.admin-pager .button {
  white-space: nowrap;
}

.admin-pager__status {
  order: 3;
  flex-basis: 100%;
  font-size: 12px;
  color: var(--color-text-sub);
  text-align: center;
}

.product-list {
  margin-top: 12px;
}

.product-list__empty {
  padding: 16px 0;
  color: var(--color-text-sub);
}

.product-row {
  display: flex;
  flex-wrap: wrap; /* スマホでは編集/削除ボタンの行が下の全幅の行になる(PCは@mediaで1行に戻す) */
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px dashed var(--color-line);
}

.product-row__image {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.product-row__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-sub);
}

.product-row__info {
  flex: 1;
  min-width: 0;
}

.product-row__name {
  font-weight: 800;
}

.product-row__meta {
  font-size: 12.5px;
  color: var(--color-text-sub);
}

.product-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.product-row__tag {
  padding: 0 8px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-deep);
}

.product-row__tag--notes {
  border-color: #cc4444;
  background-color: #ffecec;
  color: #bb2222;
}

.product-row__tag--soldout {
  border-color: #cc4444;
  background-color: #cc4444;
  color: #ffffff;
}

.product-row__tag--sale {
  border-color: #cc4444;
  background-color: #cc4444;
  color: #ffffff;
}

.product-row__tag--sale-off {
  border-color: #cccccc;
  background-color: #f2f2f2;
  color: #888888;
}

/* ---- 一覧の在庫数エディタ(−/＋か直接入力・即保存) ---- */
.stock-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.stock-editor__label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

/* −/＋は角丸の正方形(押しやすいよう36px。flex:noneで細長に伸びない) */
.stock-editor__step {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  background-color: var(--color-surface);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.stock-editor__step:hover {
  background-color: var(--color-primary-soft);
}

.stock-editor__input {
  width: 64px;
  height: 36px; /* −/＋の正方形と高さをそろえる */
  padding: 4px 6px;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  text-align: center;
}

.stock-editor__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* 編集/削除はスマホでは横並びで本文の下の全幅の行に(以前は右側に縦積みだった)。PCは@mediaで右側の横並びに戻す */
.product-row__actions {
  display: flex;
  flex: 0 0 100%;
  flex-direction: row;
  gap: 8px;
}

.product-row__actions .button {
  padding: 6px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---- CSV取り込み ---- */
.csv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.csv-file-button {
  display: inline-block;
}

.csv-result {
  margin-top: 12px;
}

.csv-result__summary {
  font-weight: 700;
}

.csv-result__error {
  font-size: 13px;
  color: var(--color-danger);
}

/* ---- Instagram掲載(TOP・一覧⇔編集) ---- */
/* 編集ビューの見出し(スライダー/トピックス共用) */
.ig-slot__title {
  font-size: 14px;
  font-weight: 800;
}

.ig-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ig-entry {
  display: flex;
  flex-wrap: wrap; /* スマホでは操作ボタン列が下の全幅の行になる(cms-rowと同じ・縦長ボタン防止) */
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.ig-entry__thumb {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--color-primary-soft);
}

.ig-entry__thumb--free {
  border-radius: 8px;
}

.ig-entry__body {
  flex: 1;
  min-width: 0;
}

.ig-entry__text {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字は縦に折り返さない(狭い画面ではボタンごと折り返す=縦長ボタン防止)。
   列の幅・余白の調整はファイル後半の「一覧の操作ボタン列の共通調整」にまとめてある */
.ig-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ig-entry__actions .button {
  white-space: nowrap;
}

/* 投稿選択グリッド(検索で絞り込み) */
.ig-picker {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.ig-pick {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ig-pick.is-selected {
  border-color: var(--color-accent);
}

.ig-pick__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1日以上取り込みが無いときの注意(サブタブの赤丸「！」とセット。admin-settings.js updateSyncStale) */
.ig-sync-stale {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #e5a3a3;
  border-radius: 8px;
  background-color: #ffecec;
  color: #bb2222;
  font-size: 13px;
  font-weight: 700;
}

/* 取込済み投稿の一覧(Instagram取込カード内・スマホ5列/PC10列・30件ずつ) */
.ig-media__title {
  margin-top: 20px;
  font-size: 16px;
}

.ig-media-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* 0件の案内文はグリッドの1列に潰されないよう全幅にする */
.ig-media-grid .card__note {
  grid-column: 1 / -1;
}

/* 前回の同期のあとに増えた投稿の緑枠(トリミングの採用枠と同じ緑) */
.ig-pick.is-new {
  border-color: #2f9e5f;
}

/* 説明文の中の「緑の枠」見本 */
.ig-media-new-mark {
  display: inline-block;
  padding: 0 6px;
  border: 2px solid #2f9e5f;
  border-radius: 6px;
  font-weight: 700;
}

/* 投稿の詳細モーダル(写真の手動送り+ハッシュタグ込みの本文+投稿日時) */
.ig-media-dialog {
  width: min(92vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  margin: auto; /* * { margin:0 } がdialogの中央寄せを潰すため必須 */
  padding: 20px;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.ig-media-dialog__gallery {
  position: relative;
}

.ig-media-dialog__img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.ig-media-dialog__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-card);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ig-media-dialog__nav--prev {
  left: 8px;
}

.ig-media-dialog__nav--next {
  right: 8px;
}

.ig-media-dialog__count {
  margin-top: 6px;
  text-align: center;
  font-weight: 700;
  color: var(--color-text-sub);
}

.ig-media-dialog__date {
  margin-top: 10px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.ig-media-dialog__text {
  margin-top: 8px;
  white-space: pre-line; /* 投稿の改行をそのまま見せる */
  line-height: 1.7;
}

/* ==== 折りたたみ(details)の共通見た目 ====
   店内スペース・カテゴリ設定など「1項目が長い一覧」で使う。行(summary)を押すと開閉。
   既定の三角印は消して、右端に「開く ▼／閉じる ▲」の文字を出す */
.capacity-item__summary,
.cat-style-item__summary,
.legal-item__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  cursor: pointer;
  list-style: none; /* 既定の三角印を消す */
}

.capacity-item__summary::-webkit-details-marker,
.cat-style-item__summary::-webkit-details-marker,
.legal-item__summary::-webkit-details-marker {
  display: none;
}

.edit-toggle {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-deep);
  white-space: nowrap;
}

.edit-toggle::after {
  content: "開く ▼";
}

details[open] > summary .edit-toggle::after {
  content: "閉じる ▲";
}

.capacity-item__title {
  font-weight: 700;
}

.capacity-item__body {
  margin-top: 10px;
}

/* カテゴリ設定(名前+イメージカラー3色)。1カテゴリ=1枠(折りたたみ) */
.cat-style-group {
  margin-top: 18px;
}

.cat-style-group__title {
  padding-left: 10px;
  border-left: 5px solid var(--color-accent);
  font-size: 15px;
}

.cat-style-item {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.cat-style-item__body {
  margin-top: 10px;
}

.cat-style-item__reset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 「このカテゴリを削除」は誤タップしにくいよう右端へ寄せる(#31(b)) */
.cat-style-remove {
  margin-left: auto;
}

/* 各グループ末尾の「＋ カテゴリを追加」(#31(b)) */
.cat-style-group__add {
  margin-top: 12px;
}

/* 色の見本(ホームページのカテゴリメニューと同じ構成=薄い色の背景+濃い色の文字+主の色の下線) */
.cat-style-sample {
  display: inline-block;
  padding: 6px 16px;
  border-bottom: 3px solid var(--sample-main);
  border-radius: 8px 8px 0 0;
  background-color: var(--sample-pale);
  color: var(--sample-dark);
  font-weight: 700;
}

.cat-style-item__note {
  flex: 1;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* カテゴリページの表示停止中バッジ(#31(a)) */
.cat-style-hidden-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #ffe4e4;
  color: #a30000;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 行(summary)に置く表示/非表示の切替ボタン(折りたたんだままでも押せる)。行が太らないよう小さめ */
.cat-visibility-button {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* スマホは1行に収まらず説明文が1文字ずつ縦に潰れる(§12.83と同じ崩れ)ため、
   1行目=[色見本][バッジ][開く▼]・2行目=[切替ボタン]・3行目=説明文(全幅)に分ける */
@media (max-width: 699px) {
  .cat-visibility-button {
    order: 9;
  }

  .cat-style-item__summary .cat-style-item__note {
    order: 10;
    flex-basis: 100%;
  }
}

.cat-visibility-field {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-line);
}

.cat-style-colors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}

.cat-color-field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* パレットを開く色の四角 */
.cat-color-field__picker {
  flex: none;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.cat-color-field__code {
  max-width: 130px;
}

.ig-crop {
  margin-top: 10px;
}

/* 共通トリミング: 写真全体を表示するステージ＋採用枠(緑)＋枠外の白マスク。枠をドラッグで移動 */
/* プレビュー拡大で写真が大きくなってもはみ出さないよう、スクロールできる枠に入れる */
.crop-stage-viewport {
  margin-top: 8px;
  max-height: 290px;
  overflow: auto;
  border-radius: 10px;
  background-color: #e8e8e8;
}

.crop-stage {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: #e8e8e8;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

/* プレビューの拡大(＋/−) */
.crop-preview-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.crop-zoom-btn {
  padding: 4px 16px;
  background-color: var(--color-surface);
  border: 2px solid var(--color-line);
  color: inherit;
  font-weight: 800;
  line-height: 1.2;
}

.crop-zoom-btn:hover {
  border-color: #66bb6a;
  background-color: #e6f6e6;
}

.crop-stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 採用枠。box-shadowで枠の外側全体を白半透明マスク(ステージのoverflow hiddenで内側だけに収まる) */
.crop-stage__window {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #2f9e5f;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* 複数写真(カルーセル)の選択グリッド */
.ig-children {
  margin-top: 10px;
}

.ig-child-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}

/* ---- PC ---- */
@media (min-width: 700px) {
  :root {
    --admin-header-h: 64px;
    --admin-tab-h: 44px;
  }

  body {
    font-size: 15px;
  }

  /* 取込済み投稿の一覧はPCでは横10件 */
  .ig-media-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  /* カテゴリ設定の色3つはPCでは横並び */
  .cat-style-colors {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 商品一覧のページ送りはPCでは従来の横一列(左=前へ・中央=件数・右=次へ) */
  .admin-pager:not(:empty) {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .admin-pager__status {
    order: 0;
    flex-basis: auto;
  }

  .admin-header {
    height: var(--admin-header-h);
    padding: 0 24px;
  }

  /* PCではハンバーガーを出さず、メインタブを常時表示 */
  .admin-header__toggle {
    display: none;
  }

  /* 2段目3段目: 全幅の白バーでsticky段重ね(ホームページと同じ隙間なし)。中身は1080中央寄せの等幅タブ */
  .admin-tabs {
    display: block;
    position: sticky;
    top: var(--admin-header-h);
    z-index: 30;
    border-bottom: 1px solid var(--color-line);
    box-shadow: none;
  }

  .admin-tabs .admin-nav__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--admin-tab-h);
    gap: 0;
  }

  .admin-tabs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    font-size: 15px;
  }

  .admin-tabs__item:hover {
    background-color: #fff7d6;
  }

  .admin-tabs__item.is-active {
    background-color: var(--admin-tab-active);
    color: var(--admin-tab-active-line);
    border-bottom-color: var(--admin-tab-active-line);
  }

  .admin-subtabs {
    position: sticky;
    top: calc(var(--admin-header-h) + var(--admin-tab-h));
    z-index: 20;
    box-shadow: 0 2px 8px rgba(150, 110, 30, 0.1);
  }

  .admin-subtabs .admin-nav__inner {
    display: grid;
    grid-auto-flow: column;
    /* 各タブは文字が収まる幅を最低確保し、余りは均等に分ける(以前の1frだけだと、タブが多い・窓が狭いとボタン内で文字が折れた=#54改) */
    grid-auto-columns: minmax(max-content, 1fr);
    height: var(--admin-tab-h);
    gap: 0;
    overflow-x: auto; /* それでも入りきらない極端な幅では横にスライドできる(文字は崩さない) */
  }

  .admin-subtabs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: none;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    background-color: transparent;
  }

  .admin-subtabs__item:hover {
    background-color: #fff0d0;
  }

  .admin-subtabs__item.is-active {
    background-color: var(--admin-subtab-active);
    color: #ffffff;
    border-bottom-color: var(--admin-subtab-active);
  }

  .card {
    padding: 24px;
  }

  .form__row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .form__row--pair {
    grid-template-columns: 1fr 1fr;
  }

  /* PCは従来どおり: 行は折り返さず、編集/削除は本文の右側に横並び */
  .product-row {
    flex-wrap: nowrap;
  }

  .product-row__actions {
    flex: none;
    flex-direction: row;
  }
}

/* ---- カテゴリページ設定(CMS・一覧⇔編集) ---- */
/* --edit-cat = 編集中カテゴリのイメージカラー(admin.jsがcategory-viewにセット)。未設定時は既定色 */

/* 編集中カテゴリの目印: カード見出しの左バーもイメージカラーにする */
#category-view .card__heading::before {
  background-color: var(--edit-cat, var(--color-primary));
}

/* 編集ブロック(カード)の背景を、そのカテゴリの薄い色にする(色味をはっきりさせる) */
#category-view .card {
  background-color: var(--edit-cat-pale, var(--color-surface));
}

/* 入力欄(表示名・遷移先・説明文・小見出し・編集するページ)の枠線もカテゴリ色に */
#category-view .form__input {
  border-color: var(--edit-cat, var(--color-line));
}

#category-view .form__input:focus {
  outline: 2px solid var(--edit-cat, var(--color-accent));
  outline-offset: 1px;
}

.cms-group {
  margin-top: 22px;
}

.cms-group__title {
  padding-left: 10px;
  border-left: 5px solid var(--edit-cat, var(--color-primary));
  font-size: 15px;
  font-weight: 800;
}

/* 種別ごとの欄(内部コンテンツ/別ページ/外部サイト) */
.cms-kind {
  margin-top: 4px;
}

.cms-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 一覧の1行(見出し＋補足＋編集/削除)。枠線は編集中カテゴリのイメージカラー */
.cms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--edit-cat, var(--color-line));
  border-radius: 12px;
  background-color: var(--color-surface);
}

.cms-row__body {
  flex: 1;
  min-width: 0;
}

.cms-row__title {
  font-weight: 800;
}

.cms-row__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* 操作ボタン列: 文字は縦に折り返さず、入り切らない狭い画面ではボタンごと次の行へ折り返す
   (以前はボタンが縮んで1文字ずつ縦積みの「縦長ボタン」になっていた) */
.cms-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cms-row__actions .button {
  white-space: nowrap;
}

/* ==== 一覧の操作ボタン列の共通調整(カテゴリのメニュー一覧・ブログ記事一覧=cms-row / スライダー・トピックスの掲載一覧=ig-entry) ====
   スマホ: ボタン列は本文の下の全幅の行に置き、左右の余白を少し詰めて1行に収める。
   PC: 従来どおり本文の横に自然な幅で並べる(※ファイル中盤のPC用@mediaブロックはこの規則より前=後勝ちで
   負けるため、PC上書きはここに置く) */
.cms-row__actions,
.ig-entry__actions {
  flex: 0 0 100%;
}

/* スマホは▲▼を1行目に分け、残りの文字ボタン(公開停止・編集・削除)を2行目にそろえる(中途半端な折り返し防止) */
.cms-row__actions .reorder,
.ig-entry__actions .reorder {
  flex: 0 0 100%;
}

.cms-row__actions .button:not(.reorder__btn),
.ig-entry__actions .button:not(.reorder__btn) {
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 700px) {
  .cms-row__actions,
  .ig-entry__actions,
  .cms-row__actions .reorder,
  .ig-entry__actions .reorder {
    flex: none;
  }

  .cms-row__actions .button:not(.reorder__btn),
  .ig-entry__actions .button:not(.reorder__btn) {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 非表示中の上部メニュー項目は本文(見出し・補足)だけ薄く見せる。ボタンは通常の濃さで操作できるように(#20) */
.cms-row--hidden .cms-row__body {
  opacity: 0.55;
}

.cms-visible {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cms-visible__check {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 囲みの写真選択 */
.cms-image {
  margin-top: 16px;
}

.cms-image .button {
  margin-top: 10px;
}

/* インスタ写真のグリッド(選択) */
.cms-ig {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.cms-ig__item {
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.cms-ig__item:hover {
  border-color: var(--color-accent);
}

.cms-ig__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 更新情報(news) ---- */
/* 各編集画面の「更新情報に載せる」(チェックで日付+タイトル欄が現れる) */
.news-option {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px dashed var(--color-line);
  border-radius: 12px;
  background-color: var(--color-surface);
}

.news-option__check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  cursor: pointer;
}

.news-option__fields {
  margin-top: 8px;
}

/* TOP設定タブの「更新情報の管理」一覧 */
.news-admin__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--color-line);
  border-radius: 12px;
  background-color: var(--color-surface);
}

.news-admin__row + .news-admin__row {
  margin-top: 8px;
}

.news-admin__body {
  flex: 1;
  min-width: 0;
}

.news-admin__label {
  font-weight: 700;
}

.news-admin__href {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* ---- 注文・問合せタブ ---- */
/* カード見出しの「未対応 N件」バッジ */
.inbox-pending {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #fde8e8;
  color: #c0392b;
  font-size: 12px;
  font-weight: 800;
}

.inbox-row {
  margin-top: 10px;
  padding: 12px 14px;
  border: 2px solid var(--color-line);
  border-radius: 12px;
  background-color: var(--color-surface);
}

.inbox-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inbox-row__date {
  font-size: 12px;
  color: var(--color-text-sub);
}

.inbox-row__title {
  margin-top: 6px;
  font-weight: 800;
}

/* お問い合わせ本文は改行をそのまま表示する */
.inbox-row__line {
  margin-top: 2px;
  font-size: 13px;
  white-space: pre-wrap;
}

.inbox-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* mailtoリンクをボタンとして使う(下線を消して中央寄せ) */
a.button {
  text-decoration: none;
  text-align: center;
}

/* ---- お休みカレンダー(日にちをタップで選ぶ) ---- */
.holiday-cal {
  display: grid;
  /* minmax(0,...) で列が枠内まで縮むようにする(3か月並べても右にはみ出さない) */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  max-width: 320px;
  margin-top: 6px;
  padding: 10px;
  border: 2px solid var(--color-line);
  border-radius: 12px;
  background-color: var(--color-surface);
}

.holiday-cal__head {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-sub);
}

.holiday-cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* 縦横を同じにして正方形にする(縦長防止) */
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: var(--color-surface);
  font: inherit;
  font-weight: 700;
  line-height: 1; /* 行の高さを詰め、正方形(aspect-ratio)を正確に効かせる */
  text-align: center;
  cursor: pointer;
}

.holiday-cal__day:hover {
  border-color: var(--color-line);
}

/* 選択中=お休みの日(赤系で目立たせる) */
.holiday-cal__day--on {
  border-color: #e57373;
  background-color: #fde8e8;
  color: #c0392b;
}

/* ラベル内の「（必須）」だけ赤で強調 */
.form__required {
  color: var(--color-danger);
}

/* TOP設定: 営業時間(開始〜終了の時間選択) */
.hours-range {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hours-range__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hours-range__mini {
  font-size: 12px;
  color: var(--color-text-sub);
}

.hours-range__item .form__input {
  width: 130px;
}

.hours-range__sep {
  padding-bottom: 8px;
  font-weight: 700;
}

/* TOP設定: 店内スペースの行(名前+定員+削除)と、その下の予約できる時間帯。「＋スペースを追加」で増やす */
.capacity-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.capacity-item {
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

/* 基本設定→Instagram「Instagramへ投稿」(#56)の写真一覧は、商品画像と同じ部品
   (.image-picker/.image-list/.image-thumb)をそのまま使う(専用スタイルなし) */

/* 基本設定: 特商法設定/プライバシー設定(法定ページの本文エディタ)。
   1見出しブロック=1枠(折りたたみ・店内スペースと同じ操作感)。
   行(表・リンク)は flex-wrap でPC=横並び/スマホ=自然に縦積み(メディアクエリ不要) */
.legal-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.legal-item {
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}

.legal-item__title {
  font-weight: 700;
}

.legal-item__body {
  margin-top: 10px;
}

.legal-item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.legal-item__heading {
  flex: 1 1 240px;
}

.legal-textarea {
  width: 100%;
}

.legal-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.legal-row__term {
  flex: 1 1 200px;
}

.legal-row__body {
  flex: 2 1 260px;
}

.legal-row__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ページ文言(#54)の行内チェック(「新しいタブで開く」等。行編集はlegal-row系を共用) */
.pagetext-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}

/* カテゴリページのヒーロー写真プレビュー(#54) */
.cat-intro-preview {
  display: block;
  max-width: 320px;
  max-height: 180px;
  margin-bottom: 8px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

/* 掲載中のカテゴリページ・使用中スペースのチップ(押すと該当コンテンツの編集画面へ) */
.capacity-item__pages {
  margin-top: 6px;
}

.capacity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.capacity-chip {
  padding: 4px 12px;
  border: 1px solid #d0b84a;
  border-radius: 999px;
  background-color: #fff6d6;
  color: #7a5c00;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.capacity-chip:hover {
  background-color: #ffe9a6;
}

/* お店ロゴ・ファビコンの設定(現在の画像のプレビュー+ファイル選択) */
.logo-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.logo-setting__preview {
  max-height: 60px;
  max-width: 240px;
  padding: 4px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background-color: #ffffff;
  object-fit: contain;
}

/* ファビコンは正方形の小さなアイコンなのでプレビューも小さめの正方形に収める */
.logo-setting__preview--favicon {
  max-height: 56px;
  max-width: 56px;
}

.logo-setting__file {
  flex: 1;
  min-width: 200px;
}

.capacity-row {
  display: flex;
  flex-wrap: wrap; /* スマホは「名前」を1行目いっぱいに、「定員+削除」を2行目に(1行だと名前が87pxで読めなかった) */
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}

.capacity-row__name {
  flex: 1 1 100%;
}

.capacity-row__count {
  width: 90px;
  flex: 0 0 auto;
}

/* PCは従来の1行(名前・定員・削除)。※中盤のPC用@mediaブロックはこの規則より前=後勝ちで負けるため、ここに置く */
@media (min-width: 700px) {
  .capacity-row {
    flex-wrap: nowrap;
  }

  .capacity-row__name {
    flex: 1;
  }
}

/* 予約できる時間帯(開始〜終了。複数=ランチ/ディナー) */
.capacity-windows {
  margin-top: 10px;
  padding-left: 4px;
}

.capacity-windows__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--color-text-sub);
}

.capacity-window-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* スマホでは行の幅に合わせて縮み、開始〜終了と×が1行に収まる(375pxで実測91px・値は欠けない)。
   以前の固定130px(縮まない)だと×ボタンが画面外へはみ出していた */
.capacity-window-row__time {
  flex: 1 1 96px;
  min-width: 0;
}

/* スマホでは時計アイコンを出さない(幅91pxではアイコンが「10:00」の末尾を欠けさせるため。タップすれば時刻選択は開く) */
@media (max-width: 699px) {
  .capacity-window-row__time::-webkit-calendar-picker-indicator {
    display: none;
  }
}

/* PCでは従来の幅(伸ばさない)。※ファイル中盤のPC用@mediaブロックはこの行より前=後勝ちで負けるため、ここに置く */
@media (min-width: 700px) {
  .capacity-window-row__time {
    flex: 0 1 130px;
  }
}

.capacity-window-row__remove {
  flex: none;
  padding: 4px 12px;
}

/* カテゴリCMS: どのコンテンツにも設置されていないスペースの選択肢(オレンジで目立たせる) */
.cms-space-unused {
  color: #b26a00;
  font-weight: 700;
}

/* ---- 予約カレンダー(注文・問合せタブ>予約。左=月カレンダー/右=選んだ日の時間割) ---- */
.reserve-cal__space {
  margin-bottom: 14px;
}

.reserve-cal__select {
  max-width: 280px;
  font-weight: 700;
}

.reserve-cal {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.reserve-cal__month {
  flex: 0 0 250px;
}

.reserve-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.reserve-cal__title {
  font-weight: 800;
}

.reserve-cal__nav {
  padding: 2px 10px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background-color: var(--color-surface);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.reserve-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.reserve-cal__weekday {
  font-size: 11px;
  text-align: center;
  color: var(--color-text-sub);
}

/* 日付マス: 本日=背景色 / 過ぎた日=薄く / 予約あり=青系の色付け / 選択中=枠線 */
.reserve-cal__day {
  padding: 6px 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.reserve-cal__day.is-past {
  color: #bbbbbb;
}

.reserve-cal__day.is-booked {
  background-color: #e9f3ff;
  color: #1565c0;
}

.reserve-cal__day.is-past.is-booked {
  background-color: #f2f7fd;
  color: #9db8d4;
}

.reserve-cal__day.is-today {
  background-color: #cfe8ff;
}

/* 未対応の予約が残っている日=赤系(確定だけの日=青系のまま) */
.reserve-cal__day.is-pending {
  background-color: #fde8e8;
  color: #c0392b;
}

.reserve-cal__day.is-selected {
  border-color: #1565c0;
}

.reserve-cal__timeline {
  flex: 1;
  min-width: 0;
  overflow-x: auto; /* スマホは横スクロールで見る */
}

.reserve-cal__daylabel {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.reserve-cal__hours {
  position: relative;
  height: 20px;
  min-width: 560px;
}

.reserve-cal__hour {
  position: absolute;
  top: 0;
  left: var(--pos); /* PCは横位置(スマホはmediaでtopに切り替え) */
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
}

/* 両端のラベルは枠の内側に寄せる(はみ出すと横スクロールが出るため。横幅が足りる画面ではスクロールなし) */
.reserve-cal__hour--first {
  transform: none;
}

.reserve-cal__hour--last {
  transform: translateX(-100%);
}

/* 1行=1レーン(定員の人数分の行を出す)。72列=10分刻み */
.reserve-cal__lane {
  display: grid;
  grid-template-columns: repeat(72, 1fr);
  grid-template-rows: 36px;
  min-width: 560px;
  border-right: 1px solid #b5b5b5;
  border-bottom: 1px solid #d9d9d9;
}

.reserve-cal__lane:first-of-type {
  border-top: 1px solid #b5b5b5;
}

/* 30分ごとの区切り(毎時=実線・30分=点線)。過ぎた時間はグレーの網掛け */
.reserve-cal__cell {
  grid-row: 1;
  grid-column: var(--cell) / span 3; /* PCは列(スマホはmediaで行に切り替え) */
  border-left: 1px dashed #d9d9d9;
}

.reserve-cal__cell--hour {
  border-left: 1px solid #b5b5b5;
}

.reserve-cal__cell.is-past {
  background-color: #f3f3f3;
}

/* 予約できない時間帯(枠外)=斜線の網掛けで「この時間は予約を受け付けない」を表す */
.reserve-cal__cell.is-closed {
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.05) 4px, rgba(0, 0, 0, 0.05) 8px);
}

/* 予約ブロック(押すと詳細モーダル)。確定済み=青系(既定)。終了済みはグレー */
.reserve-cal__block {
  z-index: 1;
  grid-row: 1;
  grid-column: var(--from) / var(--to); /* PCは列(スマホはmediaで行に切り替え) */
  margin: 4px 0;
  padding: 0;
  border: 1px solid #7fb3e8;
  border-radius: 6px;
  background-color: #d7eaff;
  color: #114a8c;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* 未対応の予約=赤系(確定するとホームページに載る) */
.reserve-cal__block--pending {
  border-color: #e57373;
  background-color: #fde8e8;
  color: #c0392b;
}

.reserve-cal__block.is-past {
  border-color: #c4c4c4;
  background-color: #e8e8e8;
  color: #666666;
}

/* 予約の編集/手動登録モーダル(PCは広め。ラベルは中央・入力文字は左)。
   ※幅は後方の .result-dialog{width:420px} に勝つよう2クラスで指定 */
.result-dialog.reserve-edit {
  width: min(92vw, 620px);
}

.reserve-edit .form__field {
  margin-top: 12px;
}

.reserve-edit .form__input {
  text-align: left;
}

/* 開始時間と終了時間は横並び */
.reserve-edit__times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}

.reserve-edit .result-dialog__actions {
  margin-top: 18px;
}

/* スマホはカレンダーと時間割を縦に積む */
@media (max-width: 700px) {
  .reserve-cal {
    flex-direction: column;
  }

  .reserve-cal__month {
    flex: none;
    width: 100%;
    max-width: 320px;
  }

  /* 時間割を縦型に(時間が上→下・レーンは横に並べる)=横スクロールを避ける */
  .reserve-cal__timeline {
    overflow-x: hidden;
  }

  .reserve-cal__chart {
    display: flex;
    align-items: stretch;
    gap: 4px;
  }

  .reserve-cal__hours {
    width: 26px;
    height: 528px;
    min-width: 0;
    flex: none;
  }

  .reserve-cal__hour {
    top: var(--pos);
    left: 0;
    transform: translateY(-50%);
  }

  .reserve-cal__hour--first {
    transform: translateY(0);
  }

  .reserve-cal__hour--last {
    transform: translateY(-100%);
  }

  .reserve-cal__lane {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(72, 1fr);
    height: 528px;
    min-width: 0;
    flex: 1;
    border-top: none;
    border-right: 1px solid #d9d9d9;
    border-bottom: none;
  }

  .reserve-cal__lane:first-of-type {
    border-top: none;
    border-left: 1px solid #b5b5b5;
  }

  .reserve-cal__cell {
    grid-row: var(--cell) / span 3;
    grid-column: 1;
    border-top: 1px dashed #d9d9d9;
    border-left: none;
  }

  .reserve-cal__cell--hour {
    border-top: 1px solid #b5b5b5;
    border-left: none;
  }

  .reserve-cal__block {
    grid-row: var(--from) / var(--to);
    grid-column: 1;
    margin: 0 3px;
    overflow: hidden;
    font-size: 11px;
    writing-mode: vertical-rl; /* 「詳細」を縦バーに沿って縦書きで表示 */
  }
}

/* 注文・予約・問合せの「表示する状態」チェック列(状態の複数選択絞り込み) */
.inbox-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}

.inbox-filter__label {
  font-weight: 700;
}

/* 絞り込み行の入力欄(期間の日付など)は中身の幅だけにして1行に収める(form__inputの幅100%を打ち消す) */
.inbox-filter .form__input {
  width: auto;
}

/* 赤丸の件数・数字(タブの未対応件数・商品のマイナス在庫で共用) */
.tab-badge {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: #e53935;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* 見出し行の右側に並ぶ操作ボタン(保存+戻る) */
.view-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- 保存結果モーダル(成功/失敗をはっきり伝える) ---- */
.result-dialog {
  width: min(92vw, 420px);
  margin: auto; /* * { margin:0 } がdialogの中央寄せを潰すため必須 */
  padding: 24px 20px 20px;
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.result-dialog::backdrop {
  background-color: rgba(70, 55, 20, 0.45);
}

.result-dialog__mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 800;
  line-height: 56px;
}

.result-dialog__mark--ok {
  background-color: #e3f6e5;
  color: #1b7a2f;
}

.result-dialog__mark--error {
  background-color: #fde8e8;
  color: #c0392b;
}

.result-dialog__message {
  margin-top: 12px;
  font-weight: 700;
}

.result-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* 確認モーダル(在庫の突合など)の黄色マークと本文 */
.result-dialog__mark--warn {
  background-color: #fff3d6;
  color: #b26a00;
}

.result-dialog__body {
  margin-top: 12px;
  text-align: left;
}

.result-dialog__body p {
  margin-top: 4px;
}

.stock-check__warn {
  font-weight: 800;
  color: #c0392b;
}

.stock-check__ok {
  font-weight: 800;
  color: #1b7a2f;
}

/* 注文明細の商品名(タップで商品編集へ) */
.inbox-row__item-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.inbox-row__item-link:hover {
  color: var(--color-accent-deep);
}

/* ---- 店内スペースの予約一覧 ---- */
/* 日にちの見出し(その日の件数つき) */
.reserve-day {
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: var(--color-primary-soft);
  font-size: 14px;
  font-weight: 800;
}

/* 定員を超えている予約は枠を赤くして目立たせる */
.inbox-row--over {
  border-color: #e57373;
  background-color: #fff7f7;
}

/* ---- ホームページへの反映状況(#28・会社情報カード下部) ---- */
.build-status {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-line);
}

.build-status__heading {
  margin: 0 0 6px;
  font-size: 16px;
}

/* 状況の文とボタンを1行に(狭ければボタンが下に折り返す) */
.build-status__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 10px;
}

#build-status-text {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text-sub);
}

#build-status-text.build-status--error {
  color: #c0392b;
  font-weight: 700;
}

/* ---- 即保存の合図(画面下の小さな通知・#29) ---- */
/* ▲▼並べ替え・在庫−＋・公開停止・削除など「押した瞬間に保存される」操作の結果を、
   モーダルを出さずに数秒だけ知らせる。連打しても1つだけ(admin-core.js showActionToast) */
#action-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1300; /* ヘッダー(z100)より上。dialogは最前面レイヤーなのでモーダル表示中は隠れる */
  width: max-content; /* left:50%のfixedは「右半分の幅」までしか広がれず途中で折り返すため、文の幅で確保する */
  max-width: min(86vw, 480px);
  padding: 10px 18px;
  border-radius: 999px;
  background-color: rgba(51, 51, 51, 0.92);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none; /* 下の画面の操作を邪魔しない */
}

#action-toast.is-show {
  opacity: 1;
}

/* ---- 保存ボタン式カードの「※未保存の変更があります」(#29) ---- */
.unsaved-note {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #b26a00;
}

/* ---- 商品の重複確認モーダル(JAN/商品コード/商品名の一致・admin-products.js openDuplicateDialog) ---- */
.dup-dialog {
  width: min(560px, 92vw);
}

.dup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background-color: var(--color-surface);
  text-align: left;
}

.dup-row__body {
  flex: 1 1 240px;
  min-width: 0;
}

.dup-row__name {
  margin: 0;
  font-weight: 800;
}

.dup-row__meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* どの項目が一致したか(JANコード・商品コード・商品名) */
.dup-row__match {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #b26a00;
}

.dup-row__actions {
  display: flex;
  gap: 8px;
  flex: none;
}