/* 🔧 開発用メモ：詳細評価（演技・物語など）表示用のスタイル */
/* 🔧 対応JS → card-render-50-800-5.js ／ 対応HTML → 評価セクション下部 */





.detail-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  margin: 4px 0;
}

.detail-rating-row label {
  min-width: 40px;
  color: #D5F8F2;
}

.detail-rating-row select.detail-select {
  padding: 2px 4px;
  font-size: 0.85em;
  border-radius: 4px;
}



.avg-score-display {
  font-size: 0.85em;
  font-weight: bold;
  color: #333;
}
.avg-score-display a {
  color: #007BFF;
  text-decoration: underline;
}





/* 🔧 開発用メモ：対応HTML → search.html ／ 対応JS → card-render-50-800-5.js */
/* 🔧 概要：検索結果カードのレイアウト調整にぇ〜 */

#search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.search-result-item {
  width: 260px;
}







.r18-card-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 8px;
}

.r18-card-actions button{
  font-size: 0.9em;
  padding: 4px 10px;
  border-radius: 8px;
  border: none;
  color: #457C9E;
  font-weight: bold;
  cursor: pointer;
}




.r18-card-actions select {
  font-size: 0.9em;
  padding: 4px 10px;
  border-radius: 8px;
  border: none;
  background-color: #D5F8F2;
  color: #457C9E;
  font-weight: bold;
  cursor: pointer;
}



.r18-card-actions .rating-status {
  font-size: 1.2em;
  color: #f39c12;
}






/* 🔧 開発用メモ：対応HTML → mylist-153-1.html ／ 対応JS → mylist-display-153-3ui.js */
/* 🔧 概要：プレイリスト上部のタイトル・公開状態・アクションボタンの横並びスタイル */

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px;
  background-color: #f0f8ff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.playlist-info {
  flex-grow: 1;
}

.playlist-title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.playlist-visibility,
.playlist-updated {
  font-size: 0.9em;
  color: #666;
  margin: 0;
}

.playlist-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.playlist-actions button,
.playlist-actions select {
  padding: 6px 10px;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 0.9em;
  cursor: pointer;
  background-color: #fff;
}

.playlist-actions button.liked,
.playlist-actions button.saved {
  background-color: #e97ea1;
  color: white;
}





.add-to-shelf-button,
.detail-button {
  background-color: #d3efff; /* ←水色！ */
  color: #004f78;
  border-radius: 6px;
  padding: 4px 10px;
  border: none;
  font-weight: bold;
}



.add-to-shelf-button,








.action-button-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.icon-row, .label-row {
  display: flex;
  gap: 6px;
  align-items: center;
}





.round-plus-button {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  padding: 0;
  background-color: transparent;
  color: #d43c80;
  border: 1px solid #d43c80;
  cursor: pointer;
}



.rating-status {
  font-size: 18px;
  color: #f5c518;
}

.detail-icon {
  font-size: 16px;
}

.detail-button {
  font-size: 0.8em;
  padding: 2px 6px;
}







.round-plus-button {
  margin-top: -15px;
  margin-bottom: -3px;
    margin-right: 12px;
    margin-left: 0px;
}

.rating-status {
  margin-top: -15px;
  margin-bottom: -3px;
    margin-right: 0px;
    margin-left: 4px;
}

.detail-icon {
  margin-top: -15px;
  margin-bottom: -3px;
    margin-right: 2px;
    margin-left: 8px;
}




.round-plus-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #f8cde0;
}



.add-to-shelf-button {
  position: relative;       /* ← 必須！これがないと動かないにぇ！ */
  top: 0px; 
  bottom: 4px;                /* ↓へ移動：正の値 ／ ↑へ移動：負の値 */
  left: 4px;                /* →へ移動：正 ／ ←へ移動：負 */
}







/* 🔧 開発用メモ：カード下部の評価操作UIの並び整形にゃ！ */
/* 🔧 対応HTML → card-render-50-800-5.js ／ JSボタン配置を揃えるため */

/* 🔧 開発用メモ：カード下部評価UIの整列にゃ〜 */
/* 🔧 対応HTML → .plus-button-wrapper 内の構造を横並びで見やすく */






.icon-row {
  display: flex;
  gap: 34px; /* ← アイコン間の間隔にゃ！ */
  align-items: center; /* ← 縦位置そろえる */
    line-height: 1;      /* ← ここも！ */
  margin: 0;           /* ← 必須！ */
  padding: 0;          /* ← 必須！ */

}




.r18-card-actions {
  display: block;
}

.plus-button-wrapper {
  display: block; /* ← これ重要にぇ！flexだと崩れる〜 */
}

.action-button-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}








.impression-section {
  margin-top: 16px;
  padding: 10px;
  background: #fff8fa;
  border: 1px solid #f0a0b0;
}

.impression-options label {
  display: inline-block;
  margin: 4px 6px;
  font-size: 14px;
}




/* 🔧 開発用メモ：対応JS → openRatingModal()内 ／ 対応HTML → 詳細評価モーダル */
/* 🔧 概要：イメージワードのチェックボックスを3列で整列させるにぇ */

.impression-section {
  margin-top: 20px;
  background: #ffeef4;
  padding: 1em;
  border-radius: 10px;
  border: 1px solid #f8c4d9;
}

.impression-section h4 {
  margin-bottom: 0.5em;
  color: #cc3388;
  font-weight: bold;
}

.impression-options label {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.2;
  gap: 4px;
  margin: 2px 0;
}

.impression-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 5px; /* 行と列の間隔 */
  margin-top: 5px;
}



.modal-content {
      background-color: #D3EFFF; /* ←ここがパステルの青にゃ〜 */

  max-height: 90vh; /* 画面高の90%までに制限 */
  overflow-y: auto; /* 中身が長いときはスクロール */
  padding-right: 12px; /* スクロールバーの内側に余白 */
}





.modal-content button {
  color: #457C9E; /* ← 文字色だけこの色に変更にゃ */
 
}






.modal-buttons {
  display: flex;
  justify-content: flex-end; /* または center */
 gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
}






/* 20250924 一時：メーカーリンク無効化の見た目 */
.cm-meta-maker .cm-maker-link.is-disabled {
  cursor: default;
  text-decoration: none;
  color: inherit;
}





/* 20250924 一時：キャストリンク無効表示の見た目 */
.r18-card-actress .cm-cast-link.is-disabled {
  cursor: default;
  text-decoration: none;
  color: inherit;
}




/* ⭐ 平均点バッジ（68.2/1人 など） */
.rating-area .score-display{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: #EAF3FF;           /* パステル水色 */
  color: #1E3A8A !important;      /* インクブルー（強制） */
  border: 1px solid #D6E6FF;      /* うっすら縁取り */
  border-radius: 9999px;          /* まん丸ピル */
  font-weight: 700;
  font-size: 0.9rem !important;   /* インラインstyleを上書き */
  line-height: 1.6;
  font-variant-numeric: tabular-nums; /* 桁がズレない数字 */
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}





/* ⭐ 平均点バッジ（共通：横並び） */
.rating-area .score-display{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #EAF3FF;
  color: #1E3A8A !important;
  border: 1px solid #D6E6FF;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem !important;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.rating-area .score-display .score-main { font-weight: 800; }
.rating-area .score-display .score-people { opacity: .9; }

/* 🖥 PCでは縦2行（中央寄せ） */
@media (min-width: 1024px){
  .rating-area .score-display{
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    min-width: 64px;    /* 視覚安定のため少し幅キープ */
  }
  .rating-area .score-display .score-main   { font-size: 0.95rem; }
  .rating-area .score-display .score-people { font-size: 0.85rem; }
}









/* マイリスト（＋置き換え）を横一行で表示 */
.add-to-shelf-button.mylist-main{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;       /* 改行させない */
  word-break: keep-all;      /* 日本語の禁則で折り返し回避 */
  min-width: 96px;           /* 2文字幅にならないよう確保 */
  padding: 6px 12px;         /* 既存デザインに合わせて少し広め */
  line-height: 1.2;
  font-weight: 700;
}

/* スマホは少しコンパクトに */
@media (max-width: 480px){
  .add-to-shelf-button.mylist-main{
    min-width: 80px;
    padding: 6px 10px;
    font-size: 0.95rem;
  }
}




/* 3つを横並びに */
.icon-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* レヴューも“保存”ボタン風の見た目に */
.add-to-shelf-button.review-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-break: keep-all;
  min-width: 96px;
  padding: 6px 12px;
  line-height: 1.2;
  font-weight: 700;
}

/* 点数リンクは折返しなしでスッキリ */
.avg-score-display .avg-score-link{
  white-space: nowrap;
  text-decoration: underline;
}


.detail-button{
  writing-mode: horizontal-tb;
  transform: none;
}



/* 上段3つを横一列でスッキリ */
.icon-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* レヴューも保存ボタン風に、横一行固定 */
.add-to-shelf-button.review-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-break: keep-all;
  min-width: 96px;
  padding: 6px 12px;
  line-height: 1.2;
  font-weight: 700;
}

/* 点数リンクは常に一行で */
.avg-score-display .avg-score-link{
  white-space: nowrap;
  text-decoration: underline;
}

/* 万一、過去の縦書きスタイルが残っていたら上書きにぇ */
.review-button{ writing-mode: horizontal-tb; transform: none; }




.rating-input-100{
  display:flex; align-items:center; gap:10px;
}
.rating-input-100 input[type="range"]{
  flex:1 1 auto;
}
.rating-stepper{
  display:inline-flex; align-items:center; gap:8px;
  background:#e9f2ff; border-radius:10px; padding:4px 8px;
}
.rating-stepper .step{
  min-width:28px; height:28px; border:none; border-radius:8px;
  padding:0 8px; font-weight:700; cursor:pointer; background:#d5e7ff;
}
.rating-stepper .val{
  min-width:34px; text-align:center; font-variant-numeric: tabular-nums;
}







/* 2カラム + 下にスライダーが1カラムで回り込む */
.rating-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.rating-ctrl .row { display: contents; }               /* 子だけをグリッドに乗せる */
.rating-ctrl .row-list > .add-to-shelf-button { grid-column: 1; }
.rating-ctrl .row-list > .rating-stepper { grid-column: 2; }

.rating-ctrl .row-review > .add-to-shelf-button { grid-column: 1; }
.rating-ctrl .row-review > .avg-score-display     { grid-column: 2; }

.rating-ctrl .row-slider { grid-column: 1 / -1; }    /* スライダーは全幅 */

.rating-stepper {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 12px; background: #eaf4ff;
}
.rating-stepper .step {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: #dfefff; font-size: 18px; cursor: pointer;
}
.rating-stepper .val { min-width: 28px; text-align: center; font-weight: 600; }