/*
 * このファイルのみを使用（requireディレクティブを使用しない）
 * 他のCSSファイルはlayoutで個別にstylesheet_link_tagで読み込む
 * 2025-12-28 updated: removed all gem CSS variable conflicts
 */

:root {
  /* 共通のアクセントカラー（テーマに依存しない） */
  --accent-pink: #ff6b9d;
  --accent-purple: #a855f7;
  --half-accent-pink: rgba(255, 107, 157, 0.5);
  --half-accent-purple: rgba(168, 85, 247, 0.5);
  --accent-color: #ff6b9d;
  --accent-color-hover: #a855f7;
}

/* ライトテーマ */
[data-theme="light"] {
  /* Sukeber ライトテーマカラー */
  --primary-bg: #ffffff;
  --secondary-bg: #f8f9fa;
  --card-bg: #ffffff;
  --accent-pink: #ff6b9d;
  --accent-purple: #a855f7;
  --half-accent-pink: rgba(255, 107, 157, 0.5);
  --half-accent-purple: rgba(168, 85, 247, 0.5);
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-stats: #2d3748;
  --border-color: #e2e8f0;
  --bs-button-color: #ffffff;
  --bs-heading-color: #1a1a1a;
  --bs-card-title-color: #1a1a1a !important;

  /* ponkotsu-md-editor gem の変数 */
  --accent-color: #ff6b9d;
  --accent-color-hover: #a855f7;
  --background: #ffffff;
  --background-dark: #f8f9fa;
  --background-alt: #f8f9fa;
  --background-code: #f7fafc;
  --preview-bg: #ffffff;
  --border: #e2e8f0;
  --border-light: #e2e8f0;
  --border-info: #cbd5e1;
  --border-table: #e2e8f0;
  --text-invert: #ffffff;
  --text-placeholder: #a0aec0;
  --text-info: #1a1a1a;
  --text-blockquote: #4a5568;
  --info-bg: rgba(168, 85, 247, 0.1);
  --table-row-alt: rgba(0, 0, 0, 0.03);
  --code-bg: rgba(0, 0, 0, 0.05);
  --code-text: #ff6b9d;
}

/* ダークテーマ（ponkotsu-md-editor 用） */
[data-theme="dark"] {
  /* Sukeber ダークテーマカラー */
  --primary-bg: #1a1a1a;
  --secondary-bg: #2d2d2d;
  --card-bg: #363636;
  --accent-pink: #ff6b9d;
  --accent-purple: #a855f7;
  --half-accent-pink: rgba(255, 107, 157, 0.5);
  --half-accent-purple: rgba(168, 85, 247, 0.5);
  --text-primary: #ffffff;
  --text-secondary: #f8f9fa;
  --text-muted: #cbd5e1;
  --text-stats: #e2e8f0;
  --border-color: #404040;
  --bs-btn-color: #ffffff;
  --bs-heading-color: #ffffff;
  --bs-card-title-color: #ffffff !important;

  /* ponkotsu-md-editor gem の変数 */
  --accent-color: #ff6b9d;
  --accent-color-hover: #a855f7;
  --background: #363636;
  --background-dark: #2d2d2d;
  --background-alt: #363636;
  --background-code: #363636;
  --preview-bg: #363636;
  --border: #404040;
  --border-light: #404040;
  --border-info: #5a6a7a;
  --border-table: #404040;
  --text-invert: #2d2d2d;
  --text-placeholder: #888888;
  --text-info: #ffffff;
  --text-blockquote: #f8f9fa;
  --info-bg: rgba(168, 85, 247, 0.1);
  --table-row-alt: rgba(255, 255, 255, 0.05);
  --code-bg: rgba(255, 255, 255, 0.05);
  --code-text: #ff6b9d;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--primary-bg);
  color: var(--text-primary);
}

.navbar-dark {
  background-color: var(--secondary-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  background: linear-gradient(45deg, var(--accent-gradient-start, var(--accent-pink)), var(--accent-gradient-end, var(--accent-purple)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* バイオグラフィー内のリンクスタイル */
.biography-link {
  text-decoration: none;
  color: var(--accent-pink);
  transition: color 0.2s ease;
}

.biography-link:hover {
  color: var(--accent-purple);
  text-decoration: none;
}

.jumbotron {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #8b0000 100%);
  border-radius: 15px;
  padding: 4rem 2rem;
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(255, 107, 157, 0.2);
}

/* ダークテーマ用のカスタムクラス */
.bg-sukeber-dark {
  background-color: var(--secondary-bg) !important;
  color: var(--text-primary);
}

.bg-sukeber-primary {
  background-color: var(--primary-bg) !important;
  color: var(--text-primary);
}

.bg-sukeber-card {
  background-color: var(--card-bg) !important;
  color: var(--text-primary);
}

/* カードヘッダーの文字色を明確に */
.card-header {
  background-color: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary) !important;
}

.card-header h5 {
  color: var(--text-primary) !important;
  font-weight: 700;
  margin: 0;
}

.card-header .bi {
  color: var(--accent-pink) !important;
  margin-right: 0.5rem;
}

.card-body > .card-title {
    color: var(--bs-card-title-color) !important;
}

/* タスクカードのタイトル色をテーマに応じて変更 */
.task-card .card-title {
  color: var(--text-primary) !important;
}

/* カード内の統計情報のスタイル強化 */
.card-body .text-center h3 {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 2rem;
}

.card-body .text-center small,
.card-body small {
  color: var(--text-stats) !important;
  font-weight: 500;
  font-size: 0.875rem;
}

/* ユーザー情報カードの文字色改善 */
.card-body p {
  color: var(--text-secondary);
}

.card-body p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.card-body ul li {
  color: var(--text-secondary);
  font-weight: 500;
}

.card-body ol li {
  color: var(--text-secondary);
  font-weight: 500;
}

/* サイト統計の数値を強調 */
.stats-number {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 2.2rem;
  background: linear-gradient(45deg, var(--accent-pink), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1.2;
}

.stats-label {
  color: var(--text-stats) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* より一般的な改善 */
.text-muted {
  color: var(--text-muted) !important;
}

.card p,
.card span:not(.badge) {
  color: var(--text-secondary);
}

/* 特定のクラスでオーバーライド */
.user-info-text {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.user-role-text {
  color: var(--text-stats) !important;
}

.btn-primary {
  background: linear-gradient(45deg, var(--accent-pink), var(--accent-purple));
  border: none;
  border-radius: 25px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(255, 107, 157, 0.4);
}

.btn-outline-light {
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  border-radius: 25px;
}

.btn-outline-light:hover {
  background-color: var(--accent-pink);
  border-color: var(--accent-pink);
}

.text-muted {
  color: var(--text-muted) !important;
}

.dropdown-menu {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover {
  background-color: var(--secondary-bg);
  color: var(--text-primary);
}

.alert-success {
  background-color: rgba(168, 85, 247, 0.1);
  border-color: var(--accent-purple);
  color: #c084fc;
}

.alert-danger {
  background-color: rgba(255, 107, 157, 0.1);
  border-color: var(--accent-pink);
  color: #fda4af;
}

/* 権限バッジの視認性を大幅改善 */
.badge {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--accent-pink) !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  text-shadow: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ホバー効果も追加 */
.badge:hover {
  background: linear-gradient(45deg, var(--accent-pink), var(--accent-purple)) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 107, 157, 0.3);
}

/* ユーザー情報テキストも明確に */
.user-info-text {
  color: var(--text-primary) !important;
  font-weight: 500;
  font-size: 1rem;
}

.user-role-text {
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* より強力な権限バッジの代替案 */
.role-badge {
  display: inline-block;
  background: rgba(255, 107, 157, 0.15) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--accent-pink) !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 25px !important;
  font-size: 0.9rem !important;
  margin: 0.25rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.role-badge:hover {
  background: var(--accent-pink) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255, 107, 157, 0.4);
}

/* サイト統計カードの特別スタイル */
.stats-card .card-header {
  background: linear-gradient(45deg, rgba(255, 107, 157, 0.1), rgba(168, 85, 247, 0.1));
  border-bottom: 2px solid var(--accent-pink);
}

.user-info-card .card-header {
  background: linear-gradient(45deg, rgba(168, 85, 247, 0.1), rgba(255, 107, 157, 0.1));
  border-bottom: 2px solid var(--accent-purple);
}

footer {
  background-color: var(--secondary-bg);
  border-top: 1px solid var(--border-color);
}

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--half-accent-purple);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--half-accent-pink);
}

/* アニメーション効果 */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 画像管理ページ専用のスタイル強化 */
.image-management-page {
  color: var(--text-primary);
}

.image-management-page h2 {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.image-management-page .card-header h5 {
  color: var(--text-primary) !important;
  font-weight: 700;
}

/* フォームラベルの視認性向上 */
.form-label {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.form-text {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* 画像カードの情報テキスト */
.card-text {
  color: var(--text-secondary) !important;
}

.card-text strong {
  color: var(--text-primary) !important;
}

/* 画像がない場合のメッセージ */
.empty-state h4 {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.empty-state p {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* ファイル入力フィールドの調整 */
.form-control {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.form-control:focus {
  background-color: var(--card-bg) !important;
  border-color: var(--accent-pink) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 157, 0.25) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

/* モーダル内のテキスト */
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom-color: var(--border-color) !important;
}

.modal-footer {
  border-top-color: var(--border-color) !important;
}

.modal-title {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* 統計表示の調整 */
.stats-info {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* より強力なコントラスト設定 */
.high-contrast-text {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.medium-contrast-text {
  color: #f1f5f9 !important;
  font-weight: 500 !important;
}

.subtle-text {
  color: #e2e8f0 !important;
  font-weight: 400 !important;
}

/* 画像カードのボタンスタイル改善 */
.image-card-btn {
  border: 2px solid var(--accent-pink) !important;
  background-color: rgba(255, 107, 157, 0.1) !important;
  color: var(--accent-pink) !important;
  transition: all 0.3s ease;
}

.image-card-btn:hover {
  background-color: var(--accent-pink) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(255, 107, 157, 0.3);
}

.image-card-btn:focus {
  background-color: var(--accent-pink) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 157, 0.25);
}

/* アイコンの色を明確に指定 */
.image-card-btn i {
  color: inherit !important;
}

/* 削除ボタン専用スタイル */
.image-card-btn.delete-btn {
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
}

.image-card-btn.delete-btn:hover {
  background-color: #dc3545 !important;
  color: white !important;
  box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3);
}

.image-card-btn.delete-btn:focus {
  background-color: #dc3545 !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* コピーボタン専用スタイル */
.image-card-btn.copy-btn {
  border-color: var(--accent-purple) !important;
  background-color: rgba(168, 85, 247, 0.1) !important;
  color: var(--accent-purple) !important;
}

.image-card-btn.copy-btn:hover {
  background-color: var(--accent-purple) !important;
  color: white !important;
  box-shadow: 0 3px 6px rgba(168, 85, 247, 0.3);
}

.image-card-btn.copy-btn:focus {
  background-color: var(--accent-purple) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.25);
}

/* 成功状態(コピー完了時) */
.image-card-btn.success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
}

/* より強力な指定(他のBootstrapクラスに勝つため) */
.btn.image-card-btn {
  border-width: 2px !important;
  font-weight: 600 !important;
}

.btn.image-card-btn:not(:disabled):not(.disabled):active,
.btn.image-card-btn:not(:disabled):not(.disabled).active {
  transform: translateY(0) !important;
}

/* クイックアクションボタンの改善 */
.image-manage-btn {
  border: 2px solid var(--accent-purple) !important;
  background-color: rgba(168, 85, 247, 0.1) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
}

.image-manage-btn:hover {
  background-color: var(--accent-purple) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.image-manage-btn:focus {
  background-color: var(--accent-purple) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.25);
}

/* アイコンの色も確実に設定 */
.image-manage-btn i {
  color: inherit !important;
  margin-right: 0.5rem;
}

/* その他のアウトラインボタンも調整 */
.btn-outline-warning.btn-lg {
  border: 2px solid #ffc107 !important;
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.btn-outline-warning.btn-lg:hover {
  background-color: #ffc107 !important;
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* クイックアクションカード全体の強化 */
.card .btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  border-radius: 8px;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 下書き保存ボタン(outline-secondary)の改善 */
.btn-outline-secondary {
  border-color: var(--text-secondary) !important;
  color: var(--text-primary) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-width: 2px !important;
  font-weight: 600 !important;
}

.btn-outline-secondary:hover {
  background-color: var(--text-secondary) !important;
  border-color: var(--text-secondary) !important;
  color: var(--primary-bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

.btn-outline-secondary:focus {
  background-color: var(--text-secondary) !important;
  border-color: var(--text-secondary) !important;
  color: var(--primary-bg) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* キャンセルボタン(btn-light)の改善 */
.btn-light {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  border-width: 2px !important;
  font-weight: 600 !important;
}

.btn-light:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: var(--text-secondary) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

/* アウトラインプライマリボタン(プレビューボタンなど) */
.btn-outline-primary {
  border-color: var(--accent-pink) !important;
  color: var(--accent-pink) !important;
  background-color: rgba(255, 107, 157, 0.1) !important;
  border-width: 2px !important;
  font-weight: 600 !important;
}

.btn-outline-primary:hover {
  background-color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 107, 157, 0.3);
}

.btn-outline-primary:focus {
  background-color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 157, 0.25);
}

/* エディターツールバーのボタン改善 */
.editor-toolbar .btn-outline-secondary {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-width: 1px !important;
}

.editor-toolbar .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--accent-pink) !important;
  color: var(--text-primary) !important;
}

.editor-toolbar .btn-outline-secondary.active,
.editor-toolbar .btn-outline-secondary:active {
  background-color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
  color: white !important;
}

/* 記事フォーム専用のボタングループスタイル */
.article-form .btn-group {
  gap: 0.5rem;
}

.article-form .btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 8px;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 特別なスタイル: 下書き保存ボタンを目立たせる */
.draft-save-btn {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border: 2px solid var(--accent-purple) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.draft-save-btn:hover {
  background: var(--accent-purple) !important;
  border-color: var(--accent-purple) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(168, 85, 247, 0.3);
}

.draft-save-btn:focus {
  background: var(--accent-purple) !important;
  border-color: var(--accent-purple) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.25);
}

/* キャンセルボタン専用スタイル */
.cancel-btn {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 2px solid #dc3545 !important;
  color: #ff6b6b !important;
  font-weight: 600 !important;
}

.cancel-btn:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.cancel-btn:focus {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ハンバーガーメニューのカスタム制御 */
.navbar-collapse {
  display: block !important;
}

/* モバイル時のスタイル */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }

  .navbar-collapse:not(.show) {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
  }

  .navbar-collapse.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation: slideDown 0.35s ease-out;
  }

  /* アニメーション定義 */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .navbar-collapse .navbar-nav {
    padding: 1rem 0;
  }

  .navbar-collapse .navbar-nav .nav-link {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
  }

  .navbar-collapse .navbar-nav .nav-link:hover {
    background-color: var(--card-bg);
  }

  .navbar-collapse .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
}

.text-pink {
  color: var(--accent-pink) !important;
  font-weight: 600;
}

/* 記事コンテンツのレスポンシブ対応 */
.article-content img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* ブラウザの高さに応じてサイズを制限 */
  max-height: 80vh !important; /* ビューポート高さの80%まで */
  object-fit: contain; /* アスペクト比を維持 */
}

/* PCレイアウトでの詳細制御 */
@media (min-width: 768px) {
  .article-content img {
    /* 幅の制限とブラウザ高さの制限、どちらか小さい方を適用 */
    max-width: min(600px, 90vw) !important;
    max-height: min(80vh, 600px) !important; /* 高さも600pxまでに制限 */
    width: auto !important;
  }
}

/* より大きな画面での制御 */
@media (min-width: 1200px) {
  .article-content img {
    max-width: min(700px, 85vw) !important;
    max-height: min(75vh, 700px) !important; /* 高さも700pxまでに制限 */
  }
}

/* 超高解像度ディスプレイでの制御 */
@media (min-width: 1920px) {
  .article-content img {
    max-width: min(800px, 80vw) !important;
    max-height: min(70vh, 800px) !important;
  }
}

/* Twitter埋め込みのレスポンシブ対応 */
.article-content .twitter-tweet {
  max-width: 100% !important;
  width: 100% !important;
  margin: 1rem auto !important;
}

/* PCレイアウトでは適度なサイズに制限 */
@media (min-width: 768px) {
  .article-content .twitter-tweet {
    max-width: 550px !important;
  }
}

/* より大きな画面でも制限を維持 */
@media (min-width: 1200px) {
  .article-content .twitter-tweet {
    max-width: 600px !important;
  }
}

/* Twitter埋め込みのiframe調整 */
.article-content .twitter-tweet iframe {
  max-width: 100% !important;
  width: 100% !important;
}

/* blockquote形式のTwitter埋め込み */
.article-content blockquote.twitter-tweet {
  max-width: 100% !important;
  width: 100% !important;
  margin: 1rem auto !important;
  padding: 1rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  background-color: var(--card-bg) !important;
}

@media (min-width: 768px) {
  .article-content blockquote.twitter-tweet {
    max-width: 550px !important;
  }
}

@media (min-width: 1200px) {
  .article-content blockquote.twitter-tweet {
    max-width: 600px !important;
  }
}

/* Twitter埋め込み内のテキストの調整 */
.article-content blockquote.twitter-tweet p {
  color: var(--text-secondary) !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Twitter埋め込み内のリンク */
.article-content blockquote.twitter-tweet a {
  color: var(--accent-pink) !important;
  text-decoration: none !important;
  word-wrap: break-word !important;
}

.article-content blockquote.twitter-tweet a:hover {
  color: var(--accent-purple) !important;
  text-decoration: underline !important;
}

/* スマートフォン向けの全体的なレイアウト調整 */
@media (max-width: 768px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .card {
    margin-bottom: 1rem;
    border-radius: 8px;
  }

  .card-header {
    padding: 0.75rem;
  }

  .card-body {
    padding: 0.75rem;
  }

  /* メタ情報の調整 */
  .d-flex.flex-wrap {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .d-flex.flex-wrap small {
    margin-bottom: 0.25rem;
    margin-right: 0 !important;
  }

  /* シェアボタンの調整 */
  .share-buttons {
    /* flex-direction: column; */
    align-items: flex-start;
  }

  .share-buttons .btn {
    margin-bottom: 0.25rem;
    margin-right: 0 !important;
  }

  /* サイドバーを下に移動 */
  .col-md-4 {
    order: 2;
    margin-top: 1rem;
  }

  .col-md-8 {
    order: 1;
  }
}

@media (min-width: 768px) {
  .share-buttons {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* タブレット向けの調整 */
@media (min-width: 769px) and (max-width: 1024px) {
  .article-content img {
    max-width: 90%;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.tweet-embed-advanced {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 複数画像の場合のレイアウト調整 */
.tweet-embed-advanced .tweet-media,
.tweet-embed-advanced .media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.tweet-embed-advanced .tweet-media img,
.tweet-embed-advanced .media img {
  flex: 1 1 auto;
  min-width: 0; /* flexboxでの画像縮小を可能にする */
}

/* 非常に強い制御が必要な場合 */
.tweet-embed-advanced * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.tweet-embed-advanced img,
.tweet-embed-advanced video,
.tweet-embed-advanced iframe {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* tweet-embed-advanced内のプロフィール画像のサイズ制御 */
.tweet-embed-advanced div[style*='display: flex'] img:first-child {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* flexboxで縮小されないようにする */
  margin-right: 12px;
}

/* より具体的にプロフィール画像を指定する場合 */
.tweet-embed-advanced img[src*='profile_images'] {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

/* プロフィール画像を含むヘッダー部分の調整 */
.tweet-embed-advanced div[style*='display: flex'][style*='align-items: center'] {
  align-items: center !important;
  gap: 12px;
}

/* さらに小さくしたい場合(32px版) */
.tweet-embed-advanced img[src*='profile_images'].small {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

/* 投稿画像との区別をより明確にする */
.tweet-embed-advanced .tweet-images img {
  border-radius: 12px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  /* tweet-embed-advanced内の投稿画像も同様に制御 */
  max-height: 60vh !important; /* Twitter画像は少し小さめに */
  object-fit: contain !important;
}

/* PCレイアウトでのTwitter画像制御 */
@media (min-width: 768px) {
  .tweet-embed-advanced .tweet-images img {
    max-width: min(500px, 85vw) !important;
    max-height: min(60vh, 500px) !important;
  }
}

@media (min-width: 1200px) {
  .tweet-embed-advanced .tweet-images img {
    max-width: min(550px, 80vw) !important;
    max-height: min(55vh, 550px) !important;
  }
}

/* tweet-embed-advancedのヘッダー部分のレイアウト調整 */
.tweet-embed-advanced div[style*='display: flex'][style*='align-items: center']:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

/* プロフィール画像とユーザー情報を含む左側部分 */
.tweet-embed-advanced div[style*='display: flex'] > img:first-child + div {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* プロフィール画像とユーザー情報をまとめるコンテナ */
.tweet-embed-advanced div[style*='display: flex'] > img:first-child,
.tweet-embed-advanced div[style*='display: flex'] > img:first-child + div {
  align-items: center !important;
}

/* Xロゴを右端に固定 */
.tweet-embed-advanced div[style*='margin-left: auto'] {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* より具体的な指定でプロフィール部分をグループ化 */
.tweet-embed-advanced > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  position: relative !important;
  /* プロフィール部分の余白を確保 */
  padding-right: 40px !important; /* Xロゴの幅分の余白 */
}

/* プロフィール画像の調整 */
.tweet-embed-advanced > div:first-child > img:first-child {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

/* ユーザー情報部分 */
.tweet-embed-advanced > div:first-child > div:not([style*='margin-left: auto']) {
  flex: 0 0 auto !important;
  text-align: left !important;
}

/* Xロゴ部分を右端に */
.tweet-embed-advanced > div:first-child > div[style*='margin-left: auto'] {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Xロゴを絶対位置で右端に配置 */
.tweet-embed-advanced > div:first-child > div:last-child {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}

/* 非常に縦長な画像のための特別制御 */
.article-content img[src*='tall'],
.article-content img[data-tall='true'] {
  max-height: 90vh !important; /* 縦長画像は少し大きめに */
}

/* 横長な画像のための特別制御 */
.article-content img[src*='wide'],
.article-content img[data-wide='true'] {
  max-width: 95vw !important;
  max-height: 60vh !important;
}

/* 画像がブラウザサイズに収まっている場合の制御 */
@media (min-height: 800px) and (min-width: 1024px) {
  .article-content img {
    /* 大きなブラウザでは元のサイズ制限を緩和 */
    max-height: 85vh !important;
  }
}

/* 小さなブラウザでは厳しく制限 */
@media (max-height: 600px) {
  .article-content img {
    max-height: 70vh !important;
  }

  .tweet-embed-advanced .tweet-images img {
    max-height: 50vh !important;
  }
}

/* ランドスケープモード(横向き)での調整 */
@media (orientation: landscape) and (max-height: 600px) {
  .article-content img {
    max-height: 60vh !important;
  }
}

/* 印刷時の調整 */
@media print {
  .article-content img {
    max-width: 100% !important;
    max-height: 80% !important;
    page-break-inside: avoid;
  }
}

.card-body .alert-warning small {
  color: var(--bs-black-rgb) !important;
}

/* Pagyページネーションの中央揃え */
nav[aria-label*='ページネーション'] {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Pagyナビゲーション全体のスタイル調整 */
.pagy-bootstrap-nav,
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 1rem 0;
}

/* ページネーションアイテムのスタイル改善 */
.pagination .page-item .page-link {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.pagination .page-item .page-link:hover {
  background-color: var(--accent-pink);
  border-color: var(--accent-pink);
  color: white;
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  background: linear-gradient(45deg, var(--accent-pink), var(--accent-purple));
  border-color: var(--accent-pink);
  color: white;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--secondary-bg);
  border-color: var(--border-color);
  color: var(--text-muted);
}