/* ============================================================
   cms_marketplace パネルのスタイル（QS-54）
   ------------------------------------------------------------
   着手前は3つのパネルテンプレートがそれぞれインライン <style> を持ち、
   色を直書きしていた（155箇所）。QS-45 で AA を割る色だけ濃い方へ寄せたが、
   **明るいテーマ前提の固定値**のままだったので、暗いテーマでは
   白いカードに白い文字、といった形で破綻していた。

   ここでは --qc-* トークンだけを参照する。トークンは cms_tokens.css が
   テーマ変数から color-mix() で導出するので、明暗どちらのテーマでも
   前景/背景が正しい向きに動く。

   また _common.html の <style> は `cms_mp_css_loaded` というフラグで
   二重出力を防ぐ作りだったが、そのフラグはどこからも立てられておらず、
   3パネルを1ページに並べると同じ CSS が3回出ていた。外部ファイル化で解消。
   ============================================================ */

:root {
  /* このアプリの意味づけ。すべてテーマ由来のトークンから導出する。 */
  --cmsmp-accent: var(--qc-primary);
  --cmsmp-accent-on: var(--qc-primary-on);
  --cmsmp-accent-soft: var(--qc-primary-soft);
  --cmsmp-accent-softer: var(--qc-primary-softer);
  --cmsmp-accent-strong: color-mix(in srgb, var(--qc-primary) 80%, var(--qc-fg));

  /* 取引相手（自分と色を分ける）。 */
  --cmsmp-counterpart: var(--qc-secondary);
  --cmsmp-counterpart-soft: color-mix(in srgb, var(--qc-secondary) 20%, var(--qc-bg));

  /* 評価の星。--qc-warning をそのまま文字色にすると明るすぎて AA を割るので、
     前景色へ寄せる。暗いテーマでは逆に明るい方へ動く。 */
  --cmsmp-rating: color-mix(in srgb, var(--qc-warning) 62%, var(--qc-fg));
}

/* --- 共通の器（旧 _common.html） ------------------------------ */

.cmsmp-card {
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-md);
  overflow: hidden;
}

.cmsmp-head {
  padding: 14px 20px;
  background: var(--cmsmp-accent-softer);
  border-bottom: 1px solid var(--cmsmp-accent-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--cmsmp-accent-strong);
  font-size: 0.95rem;
}

.cmsmp-head a.more {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--cmsmp-accent-strong);
  text-decoration: none;
}

.cmsmp-sample-note {
  background: color-mix(in srgb, var(--qc-warning) 16%, var(--qc-bg));
  border-left: 3px solid var(--cmsmp-rating);
  padding: 6px 14px;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--qc-warning) 55%, var(--qc-fg));
}

.cmsmp-level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--qc-radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cmsmp-lvl-starter {
  background: var(--qc-surface-sunken);
  color: var(--qc-fg-muted);
}

.cmsmp-lvl-regular {
  background: color-mix(in srgb, var(--qc-info) 20%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-info) 70%, var(--qc-fg));
}

.cmsmp-lvl-premium {
  background: color-mix(in srgb, var(--qc-warning) 22%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-warning) 62%, var(--qc-fg));
}

.cmsmp-lvl-platinum {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--qc-secondary) 24%, var(--qc-bg)),
    color-mix(in srgb, var(--qc-accent) 20%, var(--qc-bg))
  );
  color: color-mix(in srgb, var(--qc-secondary) 70%, var(--qc-fg));
}

.cmsmp-rating { color: var(--cmsmp-rating); }
.cmsmp-rating-text { color: var(--qc-fg-muted); font-size: 0.8rem; }

/* --- 出品詳細 ------------------------------------------------- */

.cmsmp-detail-hero {
  aspect-ratio: 21 / 9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cmsmp-accent-on);
  font-size: 4rem;
}

.cmsmp-detail-featured {
  position: absolute;
  top: 16px;
  left: 16px;
  background: color-mix(in srgb, var(--qc-warning) 22%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-warning) 62%, var(--qc-fg));
  padding: 4px 12px;
  border-radius: var(--qc-radius-xs);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.cmsmp-detail-body { padding: 22px 26px; }

.cmsmp-detail-cat {
  font-size: 0.78rem;
  color: var(--cmsmp-accent-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cmsmp-detail-title {
  font-size: 1.4rem;
  color: var(--qc-fg);
  margin: 6px 0 10px;
  line-height: 1.4;
}

.cmsmp-detail-rating { margin-bottom: 22px; }

.cmsmp-detail-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.cmsmp-plan {
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-sm);
  padding: 16px;
}

.cmsmp-plan-featured {
  border: 2px solid var(--cmsmp-accent);
  background: linear-gradient(180deg, var(--cmsmp-accent-softer), var(--qc-surface));
  position: relative;
}

.cmsmp-plan-name {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--qc-fg);
  margin-bottom: 6px;
}

.cmsmp-plan-tag {
  background: var(--cmsmp-rating);
  color: var(--qc-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  margin-left: 4px;
}

.cmsmp-plan-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cmsmp-accent-strong);
  margin-bottom: 10px;
}

.cmsmp-plan-meta {
  font-size: 0.8rem;
  color: var(--qc-fg-muted);
  margin-bottom: 4px;
}

.cmsmp-plan-meta i { color: var(--cmsmp-accent-strong); margin-right: 4px; }

.cmsmp-plan-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: var(--qc-surface);
  border: 1px solid var(--cmsmp-accent);
  color: var(--cmsmp-accent-strong);
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
}

.cmsmp-plan-btn-featured {
  background: var(--cmsmp-accent);
  color: var(--cmsmp-accent-on);
}

.cmsmp-plan-btn:hover {
  background: var(--cmsmp-accent);
  color: var(--cmsmp-accent-on);
}

.cmsmp-detail-section-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--cmsmp-accent-strong);
  margin: 16px 0 8px;
  border-bottom: 2px solid var(--cmsmp-accent-soft);
  padding-bottom: 4px;
}

.cmsmp-detail-desc {
  font-size: 0.92rem;
  color: var(--qc-fg);
  line-height: 1.75;
  margin-bottom: 10px;
}

.cmsmp-detail-seller { display: flex; gap: 14px; align-items: flex-start; }

.cmsmp-detail-seller-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--cmsmp-accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cmsmp-detail-seller-name {
  font-weight: 700;
  color: var(--qc-fg);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cmsmp-detail-seller-tagline {
  font-size: 0.82rem;
  color: var(--qc-fg-muted);
  margin: 4px 0 6px;
}

.cmsmp-detail-seller-stats {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--qc-fg-muted);
  flex-wrap: wrap;
}

.cmsmp-detail-seller-stats i { color: var(--cmsmp-rating); margin-right: 2px; }

@media (max-width: 768px) {
  .cmsmp-detail-plans { grid-template-columns: 1fr; }
}

/* --- 出品者プロフィール --------------------------------------- */

.cmsmp-seller-banner { height: 120px; position: relative; }

/* 出品者がバナー色を持たないときの既定。テーマ色から作る。 */
.cmsmp-seller-banner--default {
  background: linear-gradient(
    135deg,
    var(--cmsmp-accent),
    color-mix(in srgb, var(--cmsmp-accent) 55%, var(--qc-bg))
  );
}

.cmsmp-seller-avatar {
  position: absolute;
  bottom: -38px;
  left: 28px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid var(--qc-surface);
  color: var(--cmsmp-accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.cmsmp-seller-body { padding: 52px 28px 24px; }

.cmsmp-seller-name {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--qc-fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmsmp-seller-badges { display: flex; gap: 10px; margin: 6px 0 10px; align-items: center; }

.cmsmp-seller-online {
  color: color-mix(in srgb, var(--qc-success) 70%, var(--qc-fg));
  font-size: 0.82rem;
  font-weight: 600;
}

.cmsmp-seller-online i { font-size: 0.5rem; vertical-align: middle; }

.cmsmp-seller-tagline {
  font-size: 0.94rem;
  color: var(--qc-fg-muted);
  margin-bottom: 18px;
}

.cmsmp-seller-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--cmsmp-accent-softer);
  padding: 14px;
  border-radius: var(--qc-radius-sm);
  margin-bottom: 18px;
}

.cmsmp-seller-stat { text-align: center; }
.cmsmp-seller-stat .n { font-size: 1.3rem; font-weight: 800; color: var(--cmsmp-accent-strong); }
.cmsmp-seller-stat .l { font-size: 0.72rem; color: var(--qc-fg-muted); }

.cmsmp-seller-section {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--cmsmp-accent-strong);
  margin: 18px 0 8px;
  border-bottom: 2px solid var(--cmsmp-accent-soft);
  padding-bottom: 4px;
}

.cmsmp-seller-skills { display: flex; flex-wrap: wrap; gap: 6px; }

.cmsmp-seller-skill {
  background: var(--cmsmp-accent-soft);
  color: var(--cmsmp-accent-strong);
  padding: 4px 10px;
  border-radius: var(--qc-radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
}

.cmsmp-seller-bio { font-size: 0.9rem; color: var(--qc-fg); line-height: 1.7; }

.cmsmp-seller-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cmsmp-seller-svc {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--qc-transition-fast, 0.15s);
}

.cmsmp-seller-svc:hover { border-color: var(--cmsmp-accent); }

.cmsmp-seller-svc-cover {
  width: 62px;
  height: 62px;
  border-radius: 5px;
  color: var(--cmsmp-accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.cmsmp-seller-svc-body { flex: 1; min-width: 0; }

.cmsmp-seller-svc-title {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--qc-fg);
  margin-bottom: 4px;
  line-height: 1.35;
}

.cmsmp-seller-svc-meta { font-size: 0.7rem; color: var(--qc-fg-muted); margin-bottom: 2px; }
.cmsmp-seller-svc-price { font-weight: 800; color: var(--cmsmp-accent-strong); font-size: 0.94rem; }
.cmsmp-seller-svc-days { font-weight: 400; color: var(--qc-fg-muted); font-size: 0.76rem; }

.cmsmp-seller-actions { display: flex; gap: 10px; margin-top: 18px; }

.cmsmp-seller-btn-contact,
.cmsmp-seller-btn-order {
  flex: 1;
  padding: 11px;
  border-radius: var(--qc-radius-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cmsmp-seller-btn-contact {
  background: var(--qc-surface);
  border: 1px solid var(--cmsmp-accent);
  color: var(--cmsmp-accent-strong);
}

.cmsmp-seller-btn-contact:hover { background: var(--cmsmp-accent-softer); }

.cmsmp-seller-btn-order {
  background: var(--cmsmp-accent);
  border: 1px solid var(--cmsmp-accent);
  color: var(--cmsmp-accent-on);
}

.cmsmp-seller-btn-order:hover { background: var(--qc-primary-hover, var(--cmsmp-accent-strong)); }

@media (max-width: 768px) {
  .cmsmp-seller-stats { grid-template-columns: repeat(2, 1fr); }
  .cmsmp-seller-services { grid-template-columns: 1fr; }
}

/* --- 取引ルーム ----------------------------------------------- */

.cmsmp-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: var(--cmsmp-accent-softer);
  border-bottom: 1px solid var(--cmsmp-accent-soft);
  flex-wrap: wrap;
}

.cmsmp-room-service { display: flex; gap: 12px; align-items: center; }

.cmsmp-room-svc-cover {
  width: 52px;
  height: 52px;
  border-radius: var(--qc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cmsmp-accent-on);
  font-size: 1.4rem;
}

.cmsmp-room-title {
  font-weight: 700;
  color: var(--cmsmp-accent-strong);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.cmsmp-room-meta { font-size: 0.76rem; color: var(--qc-fg-muted); }
.cmsmp-room-meta i { color: var(--cmsmp-accent-strong); margin-right: 2px; }

.cmsmp-room-status {
  padding: 6px 14px;
  border-radius: var(--qc-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cmsmp-room-s-open {
  background: color-mix(in srgb, var(--qc-info) 20%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-info) 70%, var(--qc-fg));
}

.cmsmp-room-s-in_progress {
  background: color-mix(in srgb, var(--qc-warning) 22%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-warning) 62%, var(--qc-fg));
}

.cmsmp-room-s-delivered {
  background: color-mix(in srgb, var(--qc-success) 20%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-success) 70%, var(--qc-fg));
}

.cmsmp-room-s-review {
  background: var(--cmsmp-counterpart-soft);
  color: color-mix(in srgb, var(--qc-secondary) 70%, var(--qc-fg));
}

.cmsmp-room-s-closed {
  background: var(--qc-surface-sunken);
  color: var(--qc-fg-muted);
}

.cmsmp-room-s-cancelled {
  background: color-mix(in srgb, var(--qc-danger) 18%, var(--qc-bg));
  color: color-mix(in srgb, var(--qc-danger) 70%, var(--qc-fg));
}

.cmsmp-room-stages {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 4px;
  background: var(--qc-surface-alt);
  border-bottom: 1px solid var(--qc-border);
  overflow-x: auto;
}

.cmsmp-room-stage { display: flex; flex-direction: column; align-items: center; min-width: 74px; }

.cmsmp-room-stage .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--qc-surface-sunken);
  color: var(--qc-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
}

.cmsmp-room-stage-active .dot { background: var(--cmsmp-accent); color: var(--cmsmp-accent-on); }
.cmsmp-room-stage .lbl { font-size: 0.72rem; color: var(--qc-fg-muted); margin-top: 4px; }
.cmsmp-room-stage-active .lbl { color: var(--cmsmp-accent-strong); font-weight: 700; }

.cmsmp-room-line { flex: 1; height: 2px; background: var(--qc-border); margin-bottom: 14px; }

.cmsmp-room-chat {
  max-height: 420px;
  overflow-y: auto;
  padding: 20px;
  background: var(--qc-surface-alt);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmsmp-room-msg { display: flex; gap: 8px; align-items: flex-start; }
.cmsmp-room-msg-right { flex-direction: row-reverse; }

.cmsmp-room-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cmsmp-accent);
  color: var(--cmsmp-accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.cmsmp-room-msg-right .cmsmp-room-msg-avatar {
  background: var(--cmsmp-counterpart);
  color: var(--qc-secondary-on);
}

.cmsmp-room-msg-bubble {
  background: var(--qc-surface);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--qc-border);
  max-width: 72%;
}

.cmsmp-room-msg-right .cmsmp-room-msg-bubble {
  background: var(--cmsmp-accent-softer);
  border-color: var(--cmsmp-accent-soft);
}

.cmsmp-room-msg-name {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--cmsmp-accent-strong);
  margin-bottom: 4px;
}

.cmsmp-room-msg-body { font-size: 0.9rem; color: var(--qc-fg); line-height: 1.6; }

.cmsmp-room-msg-attach {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--qc-surface-sunken);
  border-radius: 5px;
  font-size: 0.8rem;
  color: var(--qc-fg-muted);
}

.cmsmp-room-msg-time { font-size: 0.7rem; color: var(--qc-fg-muted); margin-top: 6px; }

.cmsmp-room-sys {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: var(--qc-fg-muted);
  padding: 4px 12px;
  background: var(--qc-surface-sunken);
  border-radius: var(--qc-radius-pill);
  display: inline-block;
  margin: 0 auto;
}

.cmsmp-room-sys .time { font-size: 0.7rem; color: var(--qc-fg-muted); margin-left: 6px; }
.cmsmp-room-sys i { color: var(--cmsmp-accent-strong); margin-right: 4px; }

.cmsmp-room-composer {
  padding: 14px 20px;
  background: var(--qc-surface);
  border-top: 1px solid var(--qc-border);
}

.cmsmp-room-composer-tools { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }

.cmsmp-room-composer-tools button {
  background: transparent;
  border: none;
  color: var(--qc-fg-muted);
  width: 32px;
  height: 28px;
  cursor: pointer;
  border-radius: var(--qc-radius-xs);
}

.cmsmp-room-composer-tools button:hover { background: var(--qc-surface-sunken); }
.cmsmp-room-composer-spacer { flex: 1; }

.cmsmp-room-btn-deliver,
.cmsmp-room-btn-complete {
  width: auto !important;
  padding: 5px 10px !important;
  height: auto !important;
  font-weight: 700;
  font-size: 0.76rem;
  gap: 4px;
  display: inline-flex !important;
  align-items: center;
}

.cmsmp-room-btn-deliver {
  background: var(--qc-surface) !important;
  color: color-mix(in srgb, var(--qc-secondary) 72%, var(--qc-fg)) !important;
  border: 1px solid var(--cmsmp-counterpart) !important;
}

.cmsmp-room-btn-deliver:hover { background: var(--cmsmp-counterpart-soft) !important; }

.cmsmp-room-btn-complete {
  background: var(--cmsmp-accent) !important;
  color: var(--cmsmp-accent-on) !important;
  border: 1px solid var(--cmsmp-accent) !important;
}

.cmsmp-room-btn-complete:hover {
  background: var(--qc-primary-hover, var(--cmsmp-accent-strong)) !important;
}

.cmsmp-room-composer-input { display: flex; gap: 8px; align-items: flex-end; }

.cmsmp-room-composer-input textarea {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--qc-border-strong);
  border-radius: var(--qc-radius-sm);
  background: var(--qc-surface);
  color: var(--qc-fg);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.cmsmp-room-composer-input button {
  background: var(--cmsmp-accent);
  color: var(--cmsmp-accent-on);
  border: none;
  padding: 12px 18px;
  border-radius: var(--qc-radius-sm);
  cursor: pointer;
  font-size: 1rem;
}

.cmsmp-room-composer-input button:hover {
  background: var(--qc-primary-hover, var(--cmsmp-accent-strong));
}