/* Bouqlet AI 追加機能ブロック v2 共有スタイル
 * - エディタ canvas / 公開ページの双方で読み込む(単一ソース)。
 * - クラス名は featureViewCatalog.js / cc-feature-runtime.js と一致させること。
 * - 配色はサイト系統色(teal アクセント + slate)に合わせる。
 */
:root {
  --cc-accent: #14b8a6;
  --cc-accent-soft: #5eead4;
  --cc-accent-weak: #ccfbf1;
  --cc-ink: #1f2937;
  --cc-muted: #64748b;
  --cc-line: #e5e7eb;
  --cc-bg-soft: #f8fafc;
}

/* ── 共通ボタン ─────────────────────────────────────────── */
.cc-feature .cc-btn {
  padding: 10px 28px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: #fff; color: var(--cc-ink); cursor: pointer; font-size: 0.9rem;
}
.cc-feature .cc-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-feature .cc-btn[disabled] { opacity: .45; cursor: default; }
.cc-feature .cc-btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.cc-feature [data-cc-fav].cc-faved { color: #ef4444 !important; }

/* ── 詳細(自由配置) レスポンシブ・フォールバック ───────────────
 * PC は絶対配置。モバイルでは縦積みに戻して崩れを防ぐ。 */
@media (max-width: 640px) {
  .cc-detail-stage { min-height: 0 !important; max-width: 100% !important; }
  .cc-detail-stage > * {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; margin: 0 0 12px !important;
  }
  .cc-detail-stage img { width: 100% !important; height: auto !important; }
  .cc-detail-stage .cc-detail-nav { display: flex !important; }
}

/* ── スケジュール: シンプル(カード型) 3スタイル ─────────────── */
.cc-sched-list { display: flex; flex-direction: column; gap: 14px; }
.cc-sched-card { display: flex; gap: 14px; align-items: stretch; background: #fff; }
.cc-sched-bar { flex: 0 0 6px; border-radius: 999px; background: var(--cc-accent); align-self: stretch; }
.cc-sched-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.cc-sched-time { font-size: 0.8rem; color: var(--cc-muted); }
.cc-sched-title { margin: 0; font-size: 1.05rem; color: var(--cc-ink); }
.cc-sched-loc { font-size: 0.82rem; color: #475569; }
.cc-sched-notes { margin: 0; font-size: 0.85rem; color: #475569; line-height: 1.6; }

/* style1: 枠線カード */
.cc-sched-simple-1 .cc-sched-card { border: 1px solid var(--cc-line); border-radius: 12px; padding: 14px 16px; }
.cc-sched-simple-1 .cc-sched-bar { display: none; }
/* style2: 左アクセントバー */
.cc-sched-simple-2 .cc-sched-card { border: 1px solid var(--cc-line); border-left: 0; border-radius: 0 12px 12px 0; padding: 14px 16px 14px 12px; }
/* style3: シャドウ + グリッド */
.cc-sched-simple-3 .cc-sched-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cc-sched-simple-3 .cc-sched-card { border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(15,23,42,.08); flex-direction: column; }
.cc-sched-simple-3 .cc-sched-bar { flex: 0 0 4px; width: 40px; }

/* ── スケジュール: カレンダー共通 ─────────────────────────── */
.cc-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cc-cal-period { font-size: 1.05rem; font-weight: 700; color: var(--cc-ink); min-width: 120px; text-align: center; }
.cc-cal-navbtn, .cc-cal-todaybtn {
  border: 1px solid var(--cc-line); background: #fff; color: var(--cc-ink);
  border-radius: 8px; cursor: pointer; padding: 6px 12px; font-size: 0.95rem; line-height: 1;
}
.cc-cal-navbtn:hover, .cc-cal-todaybtn:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-cal-todaybtn { font-size: 0.8rem; }
.cc-cal-grid { min-height: 120px; }
.cc-cal-grid:empty::after {
  content: "カレンダー（公開時に予定が表示されます）";
  display: flex; align-items: center; justify-content: center; min-height: 160px;
  color: #94a3b8; font-size: 0.85rem; border: 1px dashed var(--cc-line); border-radius: 10px;
}
.cc-cal-fallback { list-style: none; margin: 16px 0 0; padding: 0; }
.cc-cal-fallback li { padding: 8px 4px; border-bottom: 1px solid var(--cc-line); font-size: 0.85rem; color: #475569; }
.cc-cal-fallback.cc-hidden { display: none; }

/* 月表示 */
.cc-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cc-cal-weekdays span { text-align: center; font-size: 0.78rem; color: var(--cc-muted); padding: 4px 0; }
.cc-cal-month-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cc-cal-cell { min-height: 84px; border: 1px solid var(--cc-line); border-radius: 8px; padding: 4px 5px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.cc-cal-cell.cc-cal-other { background: var(--cc-bg-soft); opacity: .6; }
.cc-cal-cell.cc-cal-today { border-color: var(--cc-accent); box-shadow: inset 0 0 0 1px var(--cc-accent); }
.cc-cal-daynum { font-size: 0.78rem; color: var(--cc-muted); }
.cc-cal-cell.cc-cal-today .cc-cal-daynum { color: var(--cc-accent); font-weight: 700; }
.cc-cal-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cc-cal-event {
  font-size: 0.72rem; line-height: 1.3; padding: 2px 6px; border-radius: 5px;
  background: var(--cc-accent-weak); color: #0f766e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--cc-ev, var(--cc-accent));
}

/* 週表示: 7列の日カラム */
.cc-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cc-cal-weekcol { border: 1px solid var(--cc-line); border-radius: 10px; overflow: hidden; background: #fff; min-height: 160px; }
.cc-cal-weekcol-head { text-align: center; padding: 6px 4px; font-size: 0.78rem; border-bottom: 1px solid var(--cc-line); color: var(--cc-muted); }
.cc-cal-weekcol.cc-cal-today .cc-cal-weekcol-head { background: var(--cc-accent); color: #fff; }
.cc-cal-weekcol-body { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.cc-cal-weekcol .cc-cal-event { white-space: normal; }
.cc-cal-ev-time { font-size: 0.68rem; color: var(--cc-muted); }

/* 日表示: 時間行 */
.cc-cal-day { border: 1px solid var(--cc-line); border-radius: 12px; overflow: hidden; background: #fff; }
.cc-cal-hour { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid var(--cc-line); min-height: 48px; }
.cc-cal-hour:last-child { border-bottom: 0; }
.cc-cal-hourlabel { font-size: 0.74rem; color: var(--cc-muted); padding: 6px 8px; border-right: 1px solid var(--cc-line); }
.cc-cal-hourbody { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.cc-cal-day .cc-cal-event { white-space: normal; }

/* スタイル差分 */
/* style2: ソフト角丸カード基調 */
.cc-cal-style-2 .cc-cal-cell, .cc-cal-style-2 .cc-cal-weekcol, .cc-cal-style-2 .cc-cal-day { border-radius: 14px; box-shadow: 0 4px 14px rgba(15,23,42,.06); border-color: transparent; }
.cc-cal-style-2 .cc-cal-event { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
/* style3: イベント色チップ強調(item.color を活用) */
.cc-cal-style-3 .cc-cal-event { background: var(--cc-ev, var(--cc-accent)); color: #fff; border-left: 0; font-weight: 600; }
.cc-cal-style-3 .cc-cal-cell.cc-cal-today { box-shadow: inset 0 0 0 2px var(--cc-accent); }

/* ── ウィジェット(ギャラリー/フォーム) プレースホルダ(エディタ) ── */
.cc-widget-placeholder .cc-widget-box { transition: border-color .15s; }