/* CREON風の見た目（Bootstrap 4 の上に薄く重ねる補助スタイル） */
:root {
  --creon-blue: #2d8cf0;
  --creon-blue-d: #1c7ae0;
  --creon-green: #28a745;
  --creon-red: #dc3545;
  --creon-orange: #f0932b;
  --creon-bg: #f6f7f9;
  --creon-border: #e3e6ea;
}

body {
  background: var(--creon-bg);
  color: #2b2b2b;
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
}

/* ---- ナビ ---- */
.creon-navbar {
  background: #fff;
  border-bottom: 1px solid var(--creon-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
/* Noxy ブランド（Nox=夜の女神。三日月モチーフ・夜のインディゴ・Cinzel書体） */
.creon-brand {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .22em;
  color: #241a4d !important;
  font-size: 1.25rem;
}
.creon-brand .brand-mark {
  color: #7c5cff;                       /* 月あかりのインディゴ */
  margin-right: .4rem;
  text-shadow: 0 0 10px rgba(124, 92, 255, .55);  /* ほのかな月の光 */
}
.creon-navbar .nav-link {
  color: #444 !important;
  font-size: .9rem;
  padding: .5rem .8rem !important;
  white-space: nowrap;
}
.creon-navbar .nav-link:hover { color: var(--creon-blue) !important; }
.creon-navbar .nav-link .badge { vertical-align: top; }
.badge-alert { background: var(--creon-orange); color: #fff; }
.badge-mail { background: var(--creon-orange); color: #fff; }

/* ホバーでドロップダウンを開く（CREON挙動の再現） */
@media (min-width: 992px) {
  .creon-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
.creon-navbar .dropdown-menu { font-size: .9rem; border-color: var(--creon-border); }
.creon-navbar .dropdown-item.coming > .soon {
  color: #adb5bd; font-size: .72rem; margin-left: .3rem;
}
.store-count { color: var(--creon-green); font-size: .8rem; }

/* ---- ボタン ---- */
.btn-creon { background: var(--creon-blue); border-color: var(--creon-blue); color: #fff; border-radius: 999px; }
.btn-creon:hover { background: var(--creon-blue-d); border-color: var(--creon-blue-d); color: #fff; }
.btn-creon-outline { color: var(--creon-blue); border: 1px solid var(--creon-blue); background: #fff; border-radius: 999px; }
.btn-creon-outline:hover { background: var(--creon-blue); color: #fff; }
.btn-submit { background: var(--creon-green); border-color: var(--creon-green); color: #fff; border-radius: 999px; font-weight: 600; }
.btn-submit:hover { background: #218838; color: #fff; }
.btn-danger-outline { color: var(--creon-red); border: 1px solid var(--creon-red); background: #fff; border-radius: 6px; font-size: .8rem; }
.btn-danger-outline:hover { background: var(--creon-red); color: #fff; }

/* ---- カード ---- */
.creon-card {
  background: #fff; border: 1px solid var(--creon-border);
  border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.creon-card .card-title {
  text-align: center; font-weight: 700; margin: 1rem 0 1.25rem;
}
.page-title { text-align: center; font-weight: 800; margin: 1.5rem 0 2rem; }

/* 監視数などの強調ボックス */
.highlight-box {
  background: #fff9e6; border: 1px solid #ffe58f; border-radius: 8px; padding: 1.25rem 1.5rem;
}
.highlight-box .title { text-align: center; font-weight: 700; color: #8a6d00; margin-bottom: 1rem; }

/* ---- テーブル（出品リスト青ヘッダ） ---- */
.creon-table thead th {
  background: var(--creon-blue); color: #fff; border: none;
  font-size: .85rem; text-align: center; vertical-align: middle;
}
.creon-table td { vertical-align: middle; font-size: .85rem; }
.state-active { color: var(--creon-green); font-weight: 600; }
.state-ended { color: var(--creon-red); font-weight: 600; }
.text-watch { color: var(--creon-orange); }
.inline-save { color: var(--creon-green); cursor: pointer; }

/* タブ */
.creon-tabs .nav-link.active { font-weight: 600; }
.badge-beta { background: var(--creon-orange); color: #fff; font-size: .65rem; vertical-align: super; }

/* 画像ギャラリー（並べ替え・削除） */
#imgGallery .img-card { cursor: grab; }
#imgGallery .img-card.dragging { opacity: .4; }
#imgGallery .img-card.drop-target img { outline: 2px solid var(--creon-blue); }
#imgGallery .img-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  line-height: 18px; text-align: center; border-radius: 50%;
  background: var(--creon-red); color: #fff; border: none; font-size: 13px; padding: 0;
}
#imgGallery .img-card:first-child::after {
  content: "メイン"; position: absolute; left: 2px; bottom: 2px;
  background: rgba(45,140,240,.9); color: #fff; font-size: 10px;
  padding: 0 4px; border-radius: 3px;
}
#dropZone.dragover { border-color: var(--creon-blue); background: #f0f7ff; color: var(--creon-blue); }

/* 準備中 */
.coming-soon-wrap { text-align: center; padding: 5rem 1rem; color: #6c757d; }
.coming-soon-wrap .big { font-size: 3rem; margin-bottom: 1rem; }