/* ライトモード（デフォルト）の変数定義 */
:root {
    --bg-color: #fff;
    --container-bg: #fff;
    --primary-color: #667eea;
    --primary-hover: #2563eb;
    --text-color: #0f131a;
    --subtext-color: #353841;
    --border-color: #d3d7da;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,0.04);
    --bg-btn: #eaeaea;
    --bg-btn-hover: #d9dde3; /* ボタンホバー時の背景色 */

    /* アラートメッセージ用の色定義 (ライトモード) */
    --alert-success-bg: #ecfdf5;
    --alert-success-text: #065f46;
    --alert-success-border: #10b981;

    --alert-error-bg: #fef2f2;
    --alert-error-text: #991b1b;
    --alert-error-border: #ef4444;

    --alert-info-bg: #eff6ff;
    --alert-info-text: #1e40af;
    --alert-info-border: #3b82f6;

    /* 警告アラート用の色定義 */
    --alert-warning-bg: #fef9c3;
    --alert-warning-text: #92400e;
    --alert-warning-border: #facc15;

    --form-filter-bg: #f9fafb;
}

/* ダークモード用変数定義 */
@media (prefers-color-scheme: dark) {
    :root {
        /* ダークカラーパレット */
        --bg-color: #141b2c;
        --container-bg: #1b2332;
        --dark-primary-color: #667eea;
        --primary-color: #60a5fa;
        --primary-hover: #3b82f6;
        --text-color: #f1f5f9;
        --subtext-color: #94a3b8;
        --border-color: #334155;
        --shadow: 0 4px 16px rgba(0,0,0,0.25);
        --bg-btn: #606569;
        --bg-btn-hover: #46494e; /* ボタンホバー時の背景色 */

        /* アラートメッセージ用の色定義 (ダークモード) */
        --alert-success-bg: #064e3b;
        --alert-success-text: #6ee7b7;
        --alert-success-border: #10b981;

        --alert-error-bg: #7f1d1d;
        --alert-error-text: #fca5a5;
        --alert-error-border: #ef4444;

        --alert-info-bg: #1e3a8a;
        --alert-info-text: #93c5fd;
        --alert-info-border: #3b82f6;

        /* 警告アラート用の色定義（ダークモード） */
        --alert-warning-bg: #92400e;
        --alert-warning-text: #fef3c7;
        --alert-warning-border: #facc15;

        --form-filter-bg: #374151;
    }

    /* ダークモード時の共通要素の基本色上書き */
    
    /* ダークモード時のフォーム要素の基本色上書き */
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    .tagify {
        background-color: #23272a; /* archive.css のダークモードより共通的な背景色 */
        color: #dfdfdf;           /* archive.css のダークモードより共通的な文字色 */
        border-color: #616569;    /* archive.css のダークモードより共通的なボーダー色 */
    }

    /* .tagify の詳細なダークモード変数 (--tags-border-color など) は archive.css に残します */
    .tagify__input { /* archive.css ダークモードより */
        color: var(--text-color);
    }
}

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 共通の基本スタイル */
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 1400px; /* bodyの最大幅を拡張 */
    margin: 0 auto; /* 上部マージンを削除 */
    padding: 0; /* 上部スペースを完全に削除 */
}

.container {
    max-width: 1200px; /* コンテナの最大幅を拡張 */
    margin: 10px auto;
    background: var(--container-bg);
    padding: 10px 24px; /* パディングも少し大きく */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    width: 95%; /* レスポンシブ対応 */
    box-sizing: border-box;
}

h1, h2 {
    font-size: 2em;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 4px;
    margin: 24px 0 16px 0;  /* archive.css の margin-top: 20px とは異なる */
    font-weight: 600;
}

h2 {
    font-size: 1.6em;
}

/* pタグの共通マージン */
p {
    margin-bottom: 12px; /* archive.css より */
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.glass-effect {
    opacity: 0.952;
    backdrop-filter: blur(2px) contrast(1.1);
}

/* フォーム要素の基本構造スタイル */
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
.tagify { /* Tagifyの基本構造 (archive.css, index.css の #tags より) */
    padding: 8px 12px;
    font-size: 0.95rem; /* 基本。textarea や .tagify は 1rem の場合あり */
    line-height: 1.2;
    box-sizing: border-box;
    border: 2px solid var(--border-color);  /* archive.css の一部は6pxのため注意 */
    border-radius: var(--radius);
    background-color: var(--bg-color);
    color: var(--text-color);
}

textarea {
    font-size: 1rem; /* index.css, archive.css の一部より */
    resize: none;
}

.tagify { /* index.css の #tags のスタイルをクラスに適用 */
    font-size: 0.95rem;
    border: 2px solid var(--border-color) !important;
    line-height: 1.2; /* index.css の #tags より */
    /* 幅に関する指定 (例: width: 50%) は各CSSファイルに残します */
}

/* フォーム要素のフォーカス時の共通スタイル */
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
.tagify--focus { /* .tagify.tagify--focus (archive.css) や #tags:focus (index.css) に対応 */
    outline: none;
    /* border-color の具体的な色の指定 (例: #5875f7 !important) は、
       既存の色設定を変更しないため、各CSSファイルに残します。
       もし共通のフォーカス色変数があれば、それを使用できます。
       例: border-color: var(--primary-focus-color, var(--primary-color));
    */
}

/* ボタンの基本構造スタイル */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* archive.css, index.css より共通 */
    cursor: pointer;
    border-style: none; /* archive.css, index.css の button で border: none のため */
    /* padding, border-radius, background-color, color は各CSSファイルで指定されているため、ここでは共通化しません */
}
/* フラッシュメッセージ / アラート - モダンスタイル */
.flash-messages { /* アラートメッセージのコンテナ */
    margin-bottom: 16px; /* 他の要素との間隔 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* アラート間の間隔を拡大 */
}

.alert {
    padding: 16px 20px; /* より大きなパディング */
    margin-bottom: 0;
    border: 1px solid rgba(239, 238, 238, 0.2); /* 半透明ボーダー */
    border-radius: 16px; /* より大きな角丸 */
    font-size: 0.95em;
    font-weight: 500; /* 少し太い文字 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    word-break: break-word;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    min-width: 280px; /* 最小幅を設定 */
    max-width: 600px; /* 最大幅を制限 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.3); /* 複層シャドウ + インナーハイライト */
    backdrop-filter: blur(20px) saturate(1.2); /* 強化されたガラス効果 */
    -webkit-backdrop-filter: blur(20px) saturate(1.2); /* Safari対応 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* スムーズなアニメーション */
    transform: translateY(0); /* アニメーション用の初期位置 */
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.alert:hover {
    transform: translateY(-3px) scale(1.02); /* ホバー時に浮上 + 拡大 */
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 
                0 8px 24px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(24px) saturate(1.4); /* ホバー時により強いガラス効果 */
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

.alert i,
.alert .icon { /* アイコン用のクラス */
    margin-right: 12px; /* アイコンとテキストの間隔を拡大 */
    font-size: 1.3em; /* アイコンサイズを拡大 */
    flex-shrink: 0;
    opacity: 0.9; /* 少し透明度を下げてバランスを取る */
}

.alert-success {
    color: var(--alert-success-text);
    background: linear-gradient(135deg, 
                rgba(16, 185, 129, 0.15) 0%, 
                rgba(16, 185, 129, 0.08) 50%,
                rgba(16, 185, 129, 0.12) 100%); /* 強化されたグラデーション */
    border: 1px solid rgba(16, 185, 129, 0.3); /* 半透明ボーダー */
}
.alert-success i,
.alert-success .icon {
    color: var(--alert-success-border); /* アイコンをアクセントカラーに */
}

.alert-error {
    color: var(--alert-error-text);
    background: linear-gradient(135deg, 
                rgba(239, 68, 68, 0.15) 0%, 
                rgba(239, 68, 68, 0.08) 50%,
                rgba(239, 68, 68, 0.12) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.alert-error i,
.alert-error .icon {
    color: var(--alert-error-border);
}

.alert-info {
    color: var(--alert-info-text);
    background: linear-gradient(135deg, 
                rgba(59, 130, 246, 0.15) 0%, 
                rgba(59, 130, 246, 0.08) 50%,
                rgba(59, 130, 246, 0.12) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.alert-info i,
.alert-info .icon {
    color: var(--alert-info-border);
}

/* 警告アラート */
.alert-warning {
    color: var(--alert-warning-text);
    background: linear-gradient(135deg, 
                rgba(250, 204, 21, 0.15) 0%, 
                rgba(250, 204, 21, 0.08) 50%,
                rgba(250, 204, 21, 0.12) 100%);
    border: 1px solid rgba(250, 204, 21, 0.3);
}
.alert-warning i,
.alert-warning .icon {
    color: var(--alert-warning-border);
}

/* グローバルメッセージコンテナのスタイル */
#global-flash-container {
    position: fixed;
    top: 80px; /* ヘッダーの高さに応じて調整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: fit-content; /* 内容に合わせる */
    max-width: 90%; /* 広すぎないように */
    transition: opacity 0.5s ease-out; /* フェードアウト用 */
}

/* グローバルメッセージコンテナ内のアラートメッセージのスタイル */
#global-flash-container .alert {
    padding: 12px 18px; /* 少し大きめに */
    font-size: 1.1em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    white-space: nowrap; /* メッセージ内容を改行させない */
    overflow: hidden; /* はみ出した内容を隠す */
    text-overflow: ellipsis; /* はみ出した部分を三点リーダーで表示 */
}
/* バッジデザイン・マイボタン用のCSS */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.5em;
  margin-bottom: 0.5em;
}
.badge {
  display: inline-block;
  padding: 0.15em 0.7em;
  font-size: 0.92em;
  border-radius: 1em;
  background: #f0f1f5;
  color: #333;
  font-weight: 600;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.badge-category {
  background: #e3eaff;
  color: #2a3b8f;
}
.badge-sub {
  background: #eaf7e3;
  color: #2a8f3b;
}
.badge-auto {
  background: #f7f3e3;
  color: #8f7a2a;
}
.badge-error {
  background: #ffe0e0;
  color: #b00;
}
.badge-tag {
  background: #e0f7fa;
  color: #00796b;
  cursor: pointer;
}
.badge-tag:hover {
  background: #b2ebf2;
  color: #004d40;
}
.my-btn {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.3em 1.1em;
  border-radius: 1.2em;
  background: #ede7f6;
  color: #4527a0;
  font-weight: 600;
  text-decoration: none;
  border: none;
  transition: background 0.2s, color 0.2s;
}
.my-btn:hover {
  background: #d1c4e9;
  color: #311b92;
}
/* レスポンシブ対応 (最小限) */
@media (max-width: 600px) {
    .container {
        padding: 16px;
        margin: 10px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.4em;
    }

    .alert {
        padding: 10px 12px; /* スマホでは少しパディングを小さく */
        font-size: 0.9em;
    }
    .alert i,
    .alert .icon {
        margin-right: 8px;
    }

    #global-flash-container .alert {
        font-size: 1em;
        padding: 12px 20px;
    }
}

/* Material Symbols アイコンのベーススタイル */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    user-select: none;
}

/* アイコン別のカスタマイズ */
.like-icon {
    font-size: 18px;
    color: var(--subtext-color);
    transition: color 0.2s ease, font-variation-settings 0.2s ease;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.like-button.liked .like-icon {
    color: #e11d48;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.add-icon {
    font-size: 18px;
    color: var(--primary-color);
    margin-right: 4px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.groups-icon {
    font-size: 16px;
    color: var(--text-color);
    margin-right: 4px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ホバー効果 */
.like-button:hover .like-icon {
    color: #e11d48;
    font-variation-settings: 'FILL' 0.5, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* 全てのスクロールバーに適用 */
::-webkit-scrollbar {
    width: 12px;   /* 縦スクロールバーの幅 */
    height: 8px;  /* 横スクロールバーの高さ */
}

/* スクロールバーのトラック（背景）を非表示に */
::-webkit-scrollbar-track {
    background: transparent;
}

/* スクロールバーのサム（つまみ）のデザイン */
::-webkit-scrollbar-thumb {
    background-color: #a0aec0; /* ライトモード時の色 */
    border-radius: 8px;
    border: 2px solid transparent; /* サムを細く見せるための透明なボーダー */
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #718096; /* ホバー時の色 */
}

/* ダークモード時のサムの色 */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background-color: #4a5568;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #718096;
    }
}

/* 統一ページトップボタン */
.page-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: var(--bg-btn);
    color: var(--text-color);
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-top-btn:hover {
    color: var(--text-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(142, 154, 206, 0.4);
}

.page-top-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
}