/* ============================================================
   デザインテンプレート（デモ）に重ねる UniMind の告知パネル
   ------------------------------------------------------------
   ★このファイルは /demo/ 配下のデモサイトだけが読む。
     デモ本体は tokens.css を読まない独立したサイトなので、
     ここでは CSS変数を使わず直値で書く（意図的。tokens.css を
     読ませるとデモ側の変数名と衝突する）。

   ★配置の制約（デモ側のCSSを調べたうえで決めている）
     - 上部：デモのヘッダーがスクロールで圧縮される（96px⇔48px）ため置けない
     - 下部全幅：デモに .fixed-tel-cta（900px以下・高さ48px）があるため置けない
     → 右下のフローティングにし、900px以下では電話帯のぶん持ち上げる

   ★色は必ず「背景と文字」を対で指定すること（CLAUDE.md 全体ルール）
   ============================================================ */

.umdemo {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;          /* デモ側の最大は .page-loader の 9999 */
  width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  background: #0E0E10;
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  font-family: system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  font-size: 13px;
  line-height: 1.75;
}

/* 電話帯（900px以下・高さ48px）に重ならないよう持ち上げる */
@media (max-width: 900px) {
  .umdemo { bottom: 60px; right: 12px; left: 12px; width: auto; }
}

/* ---- 見出し（クリックで開閉。閉じても告知が残るよう文言を入れる）---- */
.umdemo__sum {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* タップ領域 */
  padding: 8px 14px;
  box-sizing: border-box;
  background: #0E0E10;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;            /* Firefox の三角を消す */
}
.umdemo__sum::-webkit-details-marker { display: none; }
.umdemo__sum:hover { background: #1C1C21; color: #FFFFFF; }

/* 開いているときは下側の角丸を殺して本文とつなげる */
.umdemo[open] .umdemo__sum { border-radius: 8px 8px 0 0; }

/* 青い点。「UniMindのUI」であってデモの一部ではないことの目印 */
.umdemo__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563EB;
}

/* 開閉の向きを示す記号。
   <summary> は開閉状態をブラウザが支援技術へ伝えるので、これは見た目だけ（aria-hidden）。
   文字はCSSで出し分ける（HTML側を書き換えないため） */
.umdemo__mark {
  margin-left: auto;
  font-size: 16px;
  font-weight: 400;
  color: #B9BDC6;              /* #0E0E10 上で 9.6:1 */
}
.umdemo__mark::after { content: "＋"; }
.umdemo[open] .umdemo__mark::after { content: "－"; }

/* ---- 本文 ---- */
.umdemo__body { padding: 0 14px 14px; }

.umdemo__note {
  margin: 0 0 12px;
  color: #E8E8EA;              /* #0E0E10 上で 15:1 */
}
.umdemo__note b { color: #FFFFFF; font-weight: 700; }

.umdemo__cta {
  display: block;
  min-height: 44px;
  padding: 10px 16px;
  box-sizing: border-box;
  background: #2563EB;
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.umdemo__cta:hover { background: #1D4ED8; color: #FFFFFF; }

.umdemo__back {
  display: block;
  margin-top: 10px;
  min-height: 24px;
  color: #C9D4EA;              /* #0E0E10 上で 12.7:1 */
  text-align: center;
  text-decoration: underline;
}
.umdemo__back:hover { color: #FFFFFF; }

/* ---- フォーカス表示（暗い面なので黒ではなく黄で示す）---- */
.umdemo__sum:focus-visible,
.umdemo__cta:focus-visible,
.umdemo__back:focus-visible {
  outline: 3px solid #FFD43D;
  outline-offset: 2px;
}

/* 印刷時とデモのキャプチャ撮影時は隠す */
@media print { .umdemo { display: none; } }
.umdemo-hidden .umdemo { display: none; }