/* profile_modal.css の調整 */
@charset "utf-8";

/* 拡大画像モーダル (既存の画像のみ表示用として残すか、以下を統合・リネーム) */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s;
}

/* --- 画像とテキスト両方表示用のモーダルスタイル --- */
.image-modal.detail-view {
  /* 縦方向に中央揃えになるように設定（画像とテキストのラッパーに設定されている） */
  align-items: center;
}

.detail-view .modal-content-wrapper {
  display: flex;
  flex-direction: column; /* 画像とテキストを縦に並べる */
  align-items: center; /* 中央揃え */
  max-width: 90vw; /* 全体の最大幅を制限 */
  max-height: 95vh; /* 全体の最大高さを制限 */
  overflow-y: auto; /* コンテンツが多い場合にスクロール可能に */
  padding: 20px;
  background: #fff; /* 背景色を設定（必要に応じて） */
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* モーダル内の画像（画像のみ表示用とは別で制御） */
#detail-modal-img {
  max-width: 100%; /* ラッパー幅に合わせる */
  max-height: 60vh; /* 画像は高すぎないように */
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px; /* 画像とテキストの間にマージン */
}

/* モーダル内のテキストコンテナ */
#detail-modal-text-container {
  width: 100%;
  text-align: left; /* テキストを左寄せに */
  padding: 0 10px;
  box-sizing: border-box;
  color: #333;
}

/* モーダル内のテキストのスタイル調整（profile.cssの.profile-textを参考に） */
#detail-modal-text-container p {
  font-size: 1rem; /* 読みやすいサイズに調整 */
  line-height: 1.8;
  margin-top: 10px;
  margin-bottom: 0; /* 元のプロファイルテキストのスタイルを引き継ぎつつ、重複を除去 */
}

#detail-modal-text-container br {
  content: "";
  display: block;
  margin-bottom: 5px; /* <br>の後にスペースを確保 */
}

/* 閉じるボタン（×） */
.image-modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  z-index: 99999; /* 高いz-indexを確保 */
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  text-shadow: 0 2px 8px #000;
}

/* スマートフォン向けのスタイル調整 */
@media (max-width: 600px) {
  .detail-view .modal-content-wrapper {
    max-width: 98vw;
    max-height: 90vh;
    padding: 20px 10px;
  }
  #detail-modal-img {
    max-height: 40vh;
  }
  #detail-modal-text-container p {
    font-size: 0.9rem;
  }
  .image-modal-close {
    top: 10px;
    right: 16px;
    font-size: 2rem;
  }
}
/* モーダル内のリストのスタイル調整 */
#detail-modal-text-container ul {
  list-style: none; /* 箇条書きマーカーをディスク（黒丸）に設定 */
  padding-left: 0;
}

#detail-modal-text-container ul li {
  /* 1. リストの文字サイズを小さく */
  font-size: 0.95em; /* PCでの標準サイズより少し小さく */
  margin-bottom: 5px; /* 各項目の下部に少しスペース */

  /* 2. ぶら下げインデントの実現 */
  text-indent: -1.5em; /* 最初の行を左にずらす */
  padding-left: 1.5em; /* テキスト全体を右にずらす（結果的に2行目以降がインデントされる） */
}
#detail-modal-text-container dl ul li a:hover {
  color: #960021; /* ホバー時の色 (指定された赤色) */
}
/* レスポンシブ対応：スマートフォンでの文字サイズをさらに小さく */
@media screen and (max-width: 768px) {
  #detail-modal-text-container ul li {
    font-size: 0.9em;
    text-indent: -1.2em;
    padding-left: 1.2em;
  }
}
.social-icon {
  display: flex;
  gap: 10px; /* アイコン間のスペース */
  margin: 0;
  list-style: none; /* デフォルトのリストスタイルを無効化 */
  justify-content: center;
}
/* モーダル内の social-icon を中央寄せするための修正 */
#detail-modal-text-container dl,
#detail-modal-text-container dd {
  /* dl/ddがデフォルトで持つマージンやパディング、
     および他の要素から継承したパディングをリセット */
  margin: 0;
  padding: 0;
}

#detail-modal-text-container ul.social-icon {
  /* ul要素に設定されている親要素からのテキストインデントをリセット */
  text-indent: 0;
  padding-left: 0;
  /* 強制的に中央揃え */
  justify-content: center;

  /* アイコンリストと上下のコンテンツとの間に適切な間隔を空ける */
  margin-top: 15px;
  margin-bottom: 0px;
}

/* モーダル内の social-icon の <li> 要素にぶら下げインデントを適用しない */
#detail-modal-text-container ul.social-icon li {
  text-indent: 0;
  padding-left: 0;
  /* アイコン間のマージンを適切に設定 */
  margin: 0 5px;
}