/* 🔧 20250921 完全リセット：10選モーダル（shelf-modal.css） */

/* オーバーレイ本体 */
/* オーバーレイ：黒→白寄りにしてさらに明るく */
#shelf-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.75);   /* ← 0.65 → 0.75 にUP（明度UP） */
  z-index: 2147483647;
}
#shelf-modal[aria-hidden="false"]{ display:flex; }





  /* モーダルの幅・高さを端末に合わせる（例：保存リストモーダル） */
  #shelf-modal .modal-content {
    max-width: 96vw;
    max-height: 80vh;
    overflow: auto;
    margin: 0 auto;
  }

/* 既存リスト */
#existing-shelf-list label {
  display: block;
  margin: 6px 0;
  cursor: pointer;
}

/* 新規リスト入力 */
.new-shelf-field {
  margin-top: 12px;
}


.modal-actions button:hover {
  background: #f7f7f7;
  border-color: #bbb;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* フォーカス可視化（配色） */
#shelf-modal .modal-content :focus-visible {
  outline: 2px solid #E97EA1;      /* ピンク */
  outline-offset: 2px;
}



/* === 注意：以下のようなCSSは全て削除してください ===
   ・#shelf-modal { display:flex !important; ... } 等の「常時表示の強制パッチ」
   ・body.modal-open * { pointer-events: none !important; } のような全体禁止
   ・body.modal-open *:not(#shelf-modal):not(#shelf-modal *) { pointer-events:none !important; }
   これらはモーダル内フォーカスやクリックを壊し、閉じられなくなります。
*/



/* モーダル共通：アクションボタン（ベース） */
.modal-actions button{
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

/* =============================
   1) マイリスト：アクションボタン共通（枠）
============================= */
#shelf-modal .modal-actions button{
  border-color: #E97EA1;
}

/* =============================
   2) マイリスト：保存ボタン（submit）
============================= */
#shelf-modal .modal-actions button[type="submit"]{
  background: #E97EA1;
  color: #fff;
  border-color: #E97EA1;
}

/* hover */
#shelf-modal .modal-actions button[type="submit"]:hover{
  filter: brightness(0.95);
}

/* focus-visible */
#shelf-modal .modal-actions button[type="submit"]:focus-visible{
  outline: 3px solid #D3EFFF;
  outline-offset: 2px;
}

/* =============================
   3) マイリスト：閉じるボタン（id指定）
============================= */
#shelf-modal .modal-actions #close-shelf-modal{
  background: #fff;
  border-color: #ccc;
  color: #333;
}

/* hover */
#shelf-modal .modal-actions #close-shelf-modal:hover{
  background: #f7f7f7;
  border-color: #bbb;
}













/* マイリスト：見出し（下線ピンクでアクセント） */
#shelf-modal .modal-content h2{
  font-size: 24px;
  margin: 0 0 12px;
  letter-spacing: .02em;

  color: #333;
  border-bottom: 2px solid #F7CAD8;
  padding-bottom: 6px;
}



#new-shelf-name {
  max-width: 280px;   /* ← ここだけで直ります */
}

input[type="checkbox"]:checked {
  accent-color: #FFE9F2;  /* 柔らかいパステルピンク */
}




/* =========================================================
   ten-chan MyList modal
   パレット統一版（白 / インクブルー / 青 / ミント / ピンク）
   ========================================================= */

/* -----------------------------
   オーバーレイ（背景）
----------------------------- */
#shelf-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(252,252,252,0.75); /* 白寄りの明るいオーバーレイ */
  backdrop-filter: blur(2px);
  z-index: 2147483647;
}
#shelf-modal[aria-hidden="false"] {
  display: flex;
}

/* -----------------------------
   モーダル本体
----------------------------- */
#shelf-modal .modal-content {
  width: min(92vw, 480px);
  max-height: 90vh;
  overflow-y: auto;

  background: #FCFCFC;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);

  border: 1px solid #D3EDFE; /* 淡い青ライン */
  color: #4B4B69;
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
}

/* -----------------------------
   タイトル
----------------------------- */
#shelf-modal h2 {
  margin: 0 0 14px;
  padding-bottom: 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #4B4B69;
  border-bottom: 2px solid #B9D0E8; /* 青の細ラインアクセント */
}

/* -----------------------------
   既存リスト（1行）
----------------------------- */
.shelf-row {
  background: #F7FCFF;          /* 柔らかい青背景 */
  border: 1px solid #D0EFFF;
  border-radius: 12px;
  padding: 8px 12px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4B4B69;
}




/* チェックボックス */
#shelf-modal input[type="checkbox"] {
  accent-color: #B3EAED; /* ミントの優しい色 */
}

/* チェック時：背景を少しミント寄りに */
#shelf-modal input[type="checkbox"]:checked + .shelf-title {
  background: none;
  font-weight: 700;
}

.shelf-title {
  margin-left: 6px;
  color: #4B4B69;
}

.shelf-count {
  margin-left: 4px;
  font-size: 0.85rem;
  color: #4B4B69;
}

/* 編集リンク（黄色禁止 → ピンクをアクセントに） */
.shelf-edit-link {
  margin-left: 8px;
  color: #4B4B69;
  text-decoration: underline;
  text-decoration-color: #FFC4E4; /* パステルピンク */
  text-decoration-thickness: 2px;
}
.shelf-edit-link:hover {
  background: #FFE5EF55; /* ピンク透明ホバー */
}





/* -----------------------------
   新規リスト入力
----------------------------- */

.new-shelf-field input{
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  font-size: 15px;

  border-radius: 12px;
  border: 1px solid #D3EDFE;
  background: #FCFCFC;
  color: #4B4B69;
}


.new-shelf-field input::placeholder {
  color: #4B4B69aa;
}

/* -----------------------------
   ボタンエリア
----------------------------- */

/* アクションボタン */
.modal-actions{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}



/* 閉じるボタン（青系ゴースト） */
#close-shelf-modal {
  padding: 10px 16px;
  border-radius: 14px;

  background: #F7FCFF;
  border: 1px solid #B9D0E8;
  color: #4B4B69;
  font-weight: 700;

  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}

#close-shelf-modal:hover {
  background: #D3EDFE;
}
#close-shelf-modal:active {
  transform: scale(.97);
}

/* -----------------------------
   フォーカス（共通）
----------------------------- */
#shelf-modal :focus-visible {
  outline: 2px solid #B3EAED; /* ミントのフォーカス */
  outline-offset: 2px;
}


/* 背景スクロールロックのみ維持（クリック不可の一括禁止はしない） */
body.modal-open{
  overflow: hidden !important;
}



/* 保存ボタン（ピンク基調） */
/* 保存ボタン（ピンク基調） */
#shelf-modal button[type="submit"]{
  padding: 10px 18px;
  border-radius: 14px;

  background: #FFC4E4;
  border: 1px solid #F7A7C9;
  color: #4B4B69;
  font-weight: 700;

  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}


#shelf-modal button[type="submit"]:hover{
  background: #FFD5E6;
}

#shelf-modal button[type="submit"]:active{
  transform: scale(.97);
}


/* 本体：#D3EFFF の上に白レイヤーをもう少し被せる */
/* 🔧 マイリスト：modal-content 最終統一版 */
#shelf-modal .modal-content{
  background: #FCFCFC;                 /* ← 明るすぎ回避・他モーダルと統一 */

  border: 1px solid rgba(247,202,216,0.6); /* #F7CAD8 を淡く */
  border-radius: 12px;

  width: min(92vw, 480px);
  max-height: 90vh;
  overflow: auto;
  padding: 20px;

  box-shadow: 0 8px 24px rgba(0,0,0,.08); /* 影は控えめ */
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
}










/* オーバーレイ（暗くする） */
#shelf-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.45); /* ← 暗幕に変更 */
  backdrop-filter: blur(1px);

  z-index: 2147483647;
}
#shelf-modal[aria-hidden="false"]{
  display: flex;
}


/* マイリスト：保存・閉じるボタンの文字色を統一 */
#shelf-modal .modal-actions button,
#close-shelf-modal{
  color: #4B4B69;
}


/* 🔧 MyListボタン文字色：強制統一（.modal-content button の上書き対策） */
#shelf-modal .modal-actions button{
  color: #4B4B69 !important;
}


/* 🔧 MyList：保存するを青系に */
#shelf-modal .modal-actions button[type="submit"]{
  background: #D3EFFF !important;
  border-color: #B9D0E8 !important;
}
#shelf-modal .modal-actions button[type="submit"]:hover{
  background: #D3EDFE !important;
}