/* 基本リセットとカラースキーム */
:root {
  --bg-color: #121212;
  --panel-bg: #2a2a2a;
  --text-main: #ffffff;
  --text-sub: #aaaaaa;
  --accent-color: #1d9bf0; /* Xのブルー */
  --danger-color: #ff4444;
  --grid-gap: 12px; /* パネル間の隙間 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* スマホ表示の中央寄せラッパー */
#app-wrapper {
  max-width: 500px; /* PCで見てもスマホサイズに制限 */
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  padding-bottom: 80px; /* フッターのスペース */
}

/* ヘッダー */
#app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  position: sticky;
  top: 0;
  background-color: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(5px);
  z-index: 100;
  border-bottom: 1px solid #333;
}

#app-title { font-size: 1.2rem; font-weight: bold; }
#save-status { font-size: 0.8rem; color: #4CAF50; transition: opacity 0.3s; }
#btn-help {
  /* 円形を維持 */
  display: flex !important;
  align-items: center;     /* 上下中央 */
  justify-content: center;  /* 左右中央 */

  /* リンクの下線を消す */
  text-decoration: none !important;

  /* もし文字が小さすぎたりズレたりして見えたら調整 */
  line-height: 1;
  font-family: inherit;
  font-weight: bold;
}
/* 検索エリア */
#search-section { padding: 15px 20px; position: relative; }
#input-artist {
  width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #444;
  background-color: #222; color: white; font-size: 1rem;
}

/* サジェストリスト（外部連携） */
#suggest-list {
  position: absolute; top: 65px; left: 20px; right: 20px;
  background: #333; border-radius: 8px; overflow: hidden;
  list-style: none; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  max-height: 200px; overflow-y: auto;
}
#suggest-list li {
  padding: 12px 15px; border-bottom: 1px solid #444; cursor: pointer;
}
#suggest-list li:hover { background: #444; }

/* 箱2：横スクロールエリア */
.horizontal-scroll {
  display: flex; overflow-x: auto; gap: 10px; padding: 15px 0;
  scrollbar-width: none; /* Firefox */
}
.horizontal-scroll::-webkit-scrollbar { display: none; /* Chrome/Safari */ }
.search-instruction { width: 100%; text-align: center; color: var(--text-sub); padding: 20px 0; font-size: 0.9rem;}

/* JSで生成される検索候補のアイテム */
.work-item {
  flex: 0 0 100px; /* 固定幅 */
  cursor: pointer;
}
.work-item img {
  width: 100px; height: 100px; border-radius: 4px; object-fit: cover;
}
.work-item p {
  font-size: 0.75rem; text-align: center; margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 18パネル ダッシュボード */
#dashboard { padding: 0 20px; }

.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.slot, .qr-slot {
  aspect-ratio: 1 / 1; /* 完全な正方形 */
  background-color: var(--panel-bg);
  border-radius: 4px;
  position: relative;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}

.slot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.2s;
}

/* 削除ボタン */
.btn-delete {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: white; border: none;
  border-radius: 50%; width: 24px; height: 24px; font-size: 14px;
  cursor: pointer; display: flex; justify-content: center; align-items: center;
}

/* ★特大余白（QRをスクロール下に隠すギミック） *//* 余白を最小限に詰める */
#surprise-spacer {
  height: auto;           /* 高さを内容に合わせる */
  padding: 10px 20px 40px; /* 上を10pxまで詰め、下は少し余裕を持たせる */
  display: flex;
  justify-content: center;
  background: #000;       /* 背景を真っ黒にして一体感を出す */
}

.promo-card {
  width: 100%;
  max-width: 500px;
  margin-top: 0;          /* カード自体の上の余白を消す */
  padding: 20px;          /* 内側の余白を少しタイトに */
  border: 2px solid #ff2d55;
  border-radius: 16px;
  background: rgba(255, 45, 85, 0.05);
  box-shadow: 0 0 20px rgba(255, 45, 85, 0.2);
  text-align: center;
}

/* メッセージ内の余白も微調整 */
.promo-message {
  margin-top: 0;          /* 最初の1行目の上の余白を消す */
  font-size: 0.9rem;
  line-height: 1.6;
  color: #eee;
}


.promo-header {
  font-weight: bold;
  font-size: 0.9rem;
  color: #ff2d55;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.promo-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

#promo-qr {
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.promo-info {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.promo-artist {
  font-size: 0.8rem;
  color: #ccc;
}

.promo-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
}

.promo-link {
  display: inline-block;
  background: #ff2d55;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: bold;
}

/* QRコード描画用 */
.qr-slot img, .qr-slot canvas {
  width: 90% !important; height: 90% !important; /* 少し内側に配置 */
}

/* フッター */
#app-footer {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 500px; margin: 0 auto;
  display: flex; gap: 10px; padding: 15px 20px;
  background-color: rgba(18, 18, 18, 0.95); backdrop-filter: blur(5px);
  border-top: 1px solid #333; z-index: 100;
}

.btn-primary, .btn-secondary {
  flex: 1; padding: 14px; border-radius: 8px; border: none;
  font-size: 1rem; font-weight: bold; cursor: pointer; text-align: center;
}
.btn-primary { background-color: var(--accent-color); color: white; }
.btn-secondary { background-color: transparent; color: var(--text-main); border: 1px solid #555; }

/* モーダル */
.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); z-index: 1000;
  display: flex; justify-content: center; align-items: center;
}
.modal-content {
  background: #222; width: 90%; max-width: 400px; padding: 20px;
  border-radius: 12px; position: relative; max-height: 80vh; overflow-y: auto;
}
.btn-close-modal {
  position: absolute; top: 10px; right: 10px; background: none; border: none;
  color: white; font-size: 1.5rem; cursor: pointer;
}
.modal-content h2 { font-size: 1.1rem; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px;}

/* ユーティリティ */
.hidden { display: none !important; }

/* 検索入力欄のラッパー */
.search-input-wrapper {
  position: relative;
  width: 100%;
}

#input-artist {
  width: 100%;
  padding: 12px 35px 12px 12px; /* 右側にボタン用のスペースを確保 */
  /* 他のスタイルは維持 */
}
/* クリアボタン自体のスタイル */
#btn-input-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #eee;        /* 背景に薄いグレーを敷く */
  border-radius: 50%;      /* 丸くする */
  width: 28px;             /* ボタン自体のサイズを確保 */
  height: 28px;
  color: #000;             /* 文字色を真っ黒に */
  font-size: 22px;         /* バツ印を大きく */
  font-weight: bold;       /* 太字に */
  cursor: pointer;
  z-index: 10;
  display: flex;           /* 中央寄せ用 */
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid #ccc;  /* 輪郭をハッキリさせる */
}

#btn-input-clear:hover {
  color: var(--text-main);
}

/* フッターのボタン配置を調整 */
.share-buttons-wrapper {
  flex: 2; /* secondaryボタンより広く */
  display: flex;
  gap: 8px;
}

.share-buttons-wrapper .btn-primary {
  flex: 1;
  font-size: 0.9rem; /* 文字が多いので少し小さく */
  padding: 14px 8px;
}

.promo-alert {
  color: #ff0000;          /* 真っ赤 */
  font-size: 1.3rem;       /* 周りの文字より一回り大きく */
  font-weight: 900;        /* 最高の太さ */
  display: inline-block;   /* 背景や余白を効かせるため */
  margin: 5px 0;
  padding: 5px 10px;
  background-color: rgba(255, 0, 0, 0.1); /* 薄い赤の背景で囲む */
  border: 2px solid #ff0000;              /* 赤い枠線 */
  border-radius: 4px;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.3); /* じわっと光らせる */
}

/* モバイルで見切れないように調整 */
@media (max-width: 480px) {
  .promo-alert {
    font-size: 1.1rem;
    line-height: 1.4;
  }
}

/* 警告モーダル専用の枠線 */
.warning-border {
  border: 3px solid #ff0000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

.warning-title {
  color: #ff0000;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.share-confirm-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

#btn-execute-share {
  background-color: #ff0000; /* 同意ボタンを赤くして「責任」を感じさせる */
  color: white;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
}
/* 選択されたスロットを強調（スマホ用） */
.slot.selected-for-swap {
  outline: 5px solid #fff200; /* 鮮やかな黄色 */
  outline-offset: -5px;
  filter: brightness(1.2);    /* 少し明るくして目立たせる */
  z-index: 20;
}

#btn-help {
  position: relative; /* z-indexを効かせるために必要 */
  z-index: 9999;      /* 誰よりも手前に持ってくる */
  cursor: pointer;
}

.settings-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
  color: #fff;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: bold;
  background: #333;
  padding: 5px 15px;
  border-radius: 20px;
}

#check-bg-color {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

#btn-help {
  /* 固定位置とサイズ（必要に応じて調整してください） */
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;

  /* 色の設定：Apple Music風の赤、またはハッキリした白 */
  background-color: #ff2d55; /* 目立つ赤 */
  color: #ffffff;            /* 文字は白 */

  /* 中央揃え（先ほどのFlexbox） */
  display: flex !important;
  align-items: center;
  justify-content: center;

  /* 視認性を上げるための「太字」と「影」 */
  font-size: 20px;
  font-weight: 900;          /* 極太 */
  text-decoration: none !important;

  /* 影をつけることで背景から浮かき上がらせる */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* 境界線を少しだけ入れるとさらにクッキリします */
  border: 2px solid rgba(255, 255, 255, 0.2);

  z-index: 1000;             /* 他の要素より上に表示 */
  transition: transform 0.2s, background-color 0.2s;
  cursor: pointer;
}

/* ホバー（マウスを乗せた時）の反応 */
#btn-help:hover {
  background-color: #ff3b5c;
  transform: scale(1.1);     /* 少し大きくして「押せる感」を出す */
}