/* ========================================
   CSS変数の定義 - デザインシステム
   ======================================== */
:root {
    /* === レイアウト・サイズ定義 === */
    --header-height: 120px;       /* ヘッダーの高さ */
    --sidebar-width: 250px;       /* サイドバーの幅 */
    
    /* === 基本色（テキスト・背景） === */
    --color-text-primary: #333;           /* メインテキスト */
    --color-text-secondary: #696969;      /* サブテキスト */
    --color-background: #f5f5f5;          /* 背景色 */
    --color-white: white;                 /* 白色 */
    --color-heading-secondary: #555;     /* 見出し色 */
    
    /* === UI要素色（ボーダー・影・背景） === */
    --color-border: #e9ecef;              /* ボーダー色 */
    --color-border-light: #f0f0f0;        /* 軽いボーダー */
    --color-shadow: rgba(0,0,0,0.1);     /* 影色 */
    --color-shadow-medium: rgba(0,0,0,0.15); /* 中程度の影 */
    --color-footer-bg: #f8f9fa;          /* フッター背景 */
    --color-footer-text: #6c757d;        /* フッターテキスト */
    --color-sidebar-bg: #f8f9fa;         /* サイドバー背景 */
    --color-accent: #2563eb;             /* アクセント色 */
    
    /* === インタラクション色（ホバー・オーバーレイ） === */
    --color-hover: #f8f9fa;               /* ホバー色 */
    --color-hover-overlay: rgba(255,255,255,0.1); /* ホバーオーバーレイ */
    --color-separator: #696969;                   /* 区切り線 */
    
    /* === メニュー色（サイドバー・モバイル） === */
    --color-menu-team: #f87800;        /* チーム管理 */
    --color-menu-admin: #ebb000;       /* 編集者管理 */
    --color-menu-member: #f53bc0;      /* メンバ管理 */
    --color-menu-car: #00b0eb;         /* 車管理 */
    --color-menu-other: #696969;       /* その他 */
    
    /* === ヘッダーメニュー色 === */
    --color-header-event: #2bbda6;       /* 予定 */
    --color-header-participant: #e94343; /* 参加者 */
    --color-header-car: #1482ff;         /* 送迎車 */
    --color-header-plan: #9134ff;        /* 送迎調整 */
    --color-header-pom: #3b97ff;         /* POM（称賛） */
    --color-header-menu: #696969;        /* メニュー */
    
    /* === ボタン色 === */
    --color-button-secondary: #6b7280;        /* セカンダリボタンの背景色 */
    --color-button-secondary-hover: #4b5563;  /* セカンダリボタンのホバー時 */
    
    /* === エラー色 === */
    --color-error: #ef4444;      /* エラー色 */
    --color-error-dark: #dc2626; /* エラー色の濃い版（ホバー時） */
    
    /* === オレンジ系の濃い色 === */
    --color-menu-team-dark: #e66a00;  /* オレンジ系の濃い色（ホバー時） */
    
    /* === ラベル・背景色 === */
    --color-label: #374151;           /* ラベル色 */
    --color-background-light: #f9fafb; /* ライトグレー背景 */
    
    /* === モーダル関連色 === */
    --color-modal-bg: #ffffff;           /* モーダル背景色 */
    --color-modal-border: #e5e7eb;      /* モーダルボーダー色 */
    --color-modal-text: #111827;        /* モーダルテキスト色 */
    --color-modal-overlay: rgba(0, 0, 0, 0.5); /* モーダル背景オーバーレイ */
    --color-input-bg: #ffffff;          /* フォーム入力背景色 */
    --color-input-border: #cccccc;      /* フォーム入力ボーダー色 */
    --color-input-text: #000000;        /* フォーム入力テキスト色 */
    --color-input-caret: #000000;       /* フォーム入力キャレット色 */
    --color-label-text: #374151;        /* フォームラベル色 */
    --color-option-bg: #ffffff;        /* フォームオプション背景色 */
    --color-option-text: #000000;       /* フォームオプションテキスト色 */
    
    /* === ボタン・UI要素色 === */
    --color-white-text: #ffffff;        /* 白テキスト（ボタンなど） */
    --color-disabled-bg: #cccccc;      /* 無効化ボタンの背景色 */
    --color-disabled-text: #666666;    /* 無効化ボタンのテキスト色 */
    
    /* === メッセージ背景色 === */
    --color-success-bg: #d4edda;       /* 成功メッセージ背景色 */
    --color-success-border: #c3e6cb;   /* 成功メッセージボーダー色 */
    --color-success-text: #166534;     /* 成功メッセージテキスト色 */
    --color-warning-bg: #fff3cd;       /* 警告メッセージ背景色 */
    --color-warning-border: #ffdc75;   /* 警告メッセージボーダー色 */
    --color-warning-text: #b8860b;    /* 警告メッセージテキスト色 */
    --color-error-bg: #f8d7da;        /* エラーメッセージ背景色 */
    --color-error-border: #f5c6cb;    /* エラーメッセージボーダー色 */
}

/* ========================================
   ダークモード対応
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* === 基本色（テキスト・背景）- ダークモード === */
        --color-text-primary: #ffffff;           /* メインテキスト（白） */
        --color-text-secondary: #cbcbcb;        /* サブテキスト（明るいグレー） */
        --color-background: #1a1a1a;            /* 背景色（暗い） */
        --color-white: #2d2d2d;                 /* 白色（暗いグレー） */
        --color-heading-secondary: #cccccc;     /* 見出し色（明るいグレー） */
        
        /* === UI要素色（ボーダー・影・背景）- ダークモード === */
        --color-border: #404040;                /* ボーダー色（暗いグレー） */
        --color-border-light: #333333;           /* 軽いボーダー（暗い） */
        --color-shadow: rgba(0,0,0,0.3);       /* 影色（濃い） */
        --color-shadow-medium: rgba(0,0,0,0.4); /* 中程度の影（濃い） */
        --color-footer-bg: #1e1e1e;             /* フッター背景（暗い） */
        --color-footer-text: #a0a0a0;            /* フッターテキスト（明るいグレー） */
        --color-sidebar-bg: #1e1e1e;            /* サイドバー背景（暗い） */
        --color-accent: #4a9eff;                 /* アクセント色（明るい青） */
        
        /* === インタラクション色（ホバー・オーバーレイ）- ダークモード === */
        --color-hover: #2a2a2a;                 /* ホバー色（暗い） */
        --color-hover-overlay: rgba(255,255,255,0.05); /* ホバーオーバーレイ（薄い） */
        --color-separator: #cbcbcb;                     /* 区切り線（明るいグレー） */
        
        /* === メニュー色（サイドバー・モバイル）- ダークモード === */
        --color-menu-team: #ffc995;        /* チーム管理（明るいオレンジ） */
        --color-menu-admin: #ffdc75;       /* 編集者管理（明るい黄色） */
        --color-menu-member: #fdd0f0;      /* メンバ管理（明るいピンク） */
        --color-menu-car: #9de6ff;         /* 車管理（明るい青） */
        --color-menu-other: #cbcbcb;       /* その他（明るいグレー） */
        
        /* === ヘッダーメニュー色 - ダークモード === */
        --color-header-event: #9ce8dc;       /* 予定（明るい青緑） */
        --color-header-participant: #f9cfcf;  /* 参加者（明るい赤） */
        --color-header-car: #b0d5ff;         /* 送迎車（明るい青） */
        --color-header-pom: #b0d5ff;         /* POM（明るい青） */
        --color-header-plan: #e6d1ff;        /* 送迎調整（明るい紫） */
        --color-header-menu: #cbcbcb;         /* メニュー（明るいグレー） */
        
        /* === ボタン色 - ダークモード === */
        --color-button-secondary: #6b7280;
        --color-button-secondary-hover: #4b5563;
        
        /* === エラー色 - ダークモード === */
        --color-error: #ef4444;
        --color-error-dark: #dc2626;
        
        /* === オレンジ系の濃い色 - ダークモード === */
        --color-menu-team-dark: #e66a00;
        
        /* === ラベル・背景色 - ダークモード === */
        --color-label: #9ca3af;  /* ダークモード用の明るいグレー */
        --color-background-light: #1f2937;  /* ダークモード用の暗い背景 */
        
        /* === モーダル関連色 - ダークモード === */
        --color-modal-bg: #1f2937;        /* モーダル背景色（暗い） */
        --color-modal-border: #374151;     /* モーダルボーダー色（暗い） */
        --color-modal-text: #ffffff;       /* モーダルテキスト色（白） */
        --color-modal-overlay: rgba(0, 0, 0, 0.7); /* モーダル背景オーバーレイ（ダークモード） */
        --color-input-bg: #111827;         /* フォーム入力背景色（より暗い） */
        --color-input-border: #374151;     /* フォーム入力ボーダー色（暗い） */
        --color-input-text: #f3f4f6;       /* フォーム入力テキスト色（ほぼ白） */
        --color-input-caret: #f3f4f6;      /* フォーム入力キャレット色（ほぼ白） */
        --color-label-text: #e5e7eb;       /* フォームラベル色（明るいグレー） */
        --color-option-bg: #1f2937;        /* フォームオプション背景色（暗い） */
        --color-option-text: #f3f4f6;      /* フォームオプションテキスト色（ほぼ白） */
        
        /* === ボタン・UI要素色 - ダークモード === */
        --color-white-text: #ffffff;       /* 白テキスト（ボタンなど） */
        --color-disabled-bg: #4b5563;      /* 無効化ボタンの背景色（ダークモード） */
        --color-disabled-text: #9ca3af;    /* 無効化ボタンのテキスト色（ダークモード） */
        
        /* === メッセージ背景色 - ダークモード === */
        --color-success-bg: #064e3b;       /* 成功メッセージ背景色（ダークモード） */
        --color-success-border: #065f46;   /* 成功メッセージボーダー色（ダークモード） */
        --color-success-text: #6ee7b7;     /* 成功メッセージテキスト色（ダークモード） */
        --color-warning-bg: #78350f;       /* 警告メッセージ背景色（ダークモード） */
        --color-warning-border: #92400e;   /* 警告メッセージボーダー色（ダークモード） */
        --color-warning-text: #fcd34d;     /* 警告メッセージテキスト色（ダークモード） */
        --color-error-bg: #7f1d1d;        /* エラーメッセージ背景色（ダークモード） */
        --color-error-border: #991b1b;    /* エラーメッセージボーダー色（ダークモード） */
        
        /* === ラベル・テキスト色 - ダークモード === */
        --color-label-text: #e5e7eb;      /* ラベルテキスト色（ダークモード） */
        --color-text-secondary: #9ca3af;  /* セカンダリテキスト色（ダークモード） */
    }
}

/* ========================================
   ダークモード用の追加スタイル
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* POMページの集計期間選択パネル内のアイコンの色（ダークモード） */
    .pom-page h2 .icon,
    .pom-page h3 .icon,
    body:has(.pom-page) h2 .icon,
    body:has(.pom-page) h3 .icon {
        color: var(--color-header-pom, #b0d5ff);
        fill: var(--color-header-pom, #b0d5ff);
    }
    
    /* ヘッダーのPOM部分の色（ダークモード） */
    .pom-page .nav-plan,
    body:has(.pom-page) .nav-plan,
    body.pom-page .nav-plan {
        color: var(--color-header-pom, #b0d5ff);
    }
    
    .pom-page .nav-plan .nav-icon svg,
    body:has(.pom-page) .nav-plan .nav-icon svg,
    body.pom-page .nav-plan .nav-icon svg,
    .pom-page .nav-plan .nav-icon svg use,
    body:has(.pom-page) .nav-plan .nav-icon svg use,
    body.pom-page .nav-plan .nav-icon svg use {
        color: var(--color-header-pom, #b0d5ff);
        fill: var(--color-header-pom, #b0d5ff);
    }
    
    /* 周知情報ページのヘッダーの「送迎調整Web」の文字色を他のページと同じグレーに */
    .site-title {
        color: var(--color-text-secondary, #9ca3af) !important;
    }
    
    /* 1. ログイン前のヘッダ - ログインボタンと新規登録の文字色を濃く */
    .landing-header .btn-login {
        background-color: var(--color-menu-team, #f87800) !important;
        color: var(--color-white-text, #ffffff) !important;
    }
    
    .landing-header .btn-register {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-menu-team, #ffc995) !important;
        border: 2px solid var(--color-menu-team, #ffc995) !important;
    }
    
    .landing-header .btn-register:hover {
        background-color: var(--color-menu-team, #ffc995) !important;
        color: var(--color-white-text, #ffffff) !important;
    }
    
    /* 2. ランディングページのfeature-card */
    .feature-card {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 3. お知らせモーダル - 文字色を明るく（「お知らせ」タイトルを除く） */
    #notificationListModal .modal-body,
    #notificationListModal .modal-body *:not(.modal-title):not(.modal-title *),
    #notificationListModal #notificationList,
    #notificationListModal #notificationList * {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 4. 使い方ページ・利用規約ページのフッタ */
    .landing-footer {
        background-color: var(--color-white, #2d2d2d) !important;
    }
    
    /* 5-6. 使い方ページの箱 */
    .flow-box,
    .step-box,
    .info-box,
    .feature-box {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 7. 利用規約ページ - 文字色を明るく */
    .terms-content,
    .terms-content p,
    .terms-content li {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 8-14. モーダル全般 - 背景色を暗く */
    .modal-content {
        background-color: var(--color-modal-bg, #1f2937) !important;
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    .modal-body {
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    /* 9. 表の交互行 - 背景色を暗めに（より暗めのグレーに） */
    .data-table tbody tr:nth-child(even) {
        background-color: var(--color-background-light, #1a1a1a) !important;
    }
    
    .data-table tbody tr:nth-child(odd) {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
    }
    
    /* 15. 予定選択パネル内の予定の文字色 */
    .schedule-item,
    .schedule-item .schedule-name,
    .schedule-item .schedule-single-line {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 15-1. 予定選択パネル内の日付の文字色 */
    .schedule-item .schedule-date,
    .schedule-item .schedule-single-line .schedule-date,
    .schedule-date {
        color: var(--color-text-secondary, #d1d5db) !important;
    }
    
    /* 16. 選択中予定パネル */
    .selected-schedule-info {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 17. 参加者/送迎車の箱 */
    .participant-item,
    .event-car-item,
    .participant-card,
    .event-car-card,
    .participant-list .participant-item,
    .event-car-list .event-car-item {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 18. メモ入力欄 */
    .memo-input,
    textarea.memo-input,
    #participantMemoInput,
    #eventCarMemoInput,
    .memo-input {
        background-color: var(--color-input-bg, #111827) !important;
        color: var(--color-input-text, #f3f4f6) !important;
        border-color: var(--color-input-border, #374151) !important;
    }
    
    /* 19. 警告メッセージの「警告」文字色 */
    .memo-warning-label,
    .memo-warning-label span,
    .memo-warning-text .memo-warning-label {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 20-21. 処理完了モーダル、確定取消し確認モーダル */
    #participantCompletionModal .modal-content,
    #participantCancelConfirmationModal .modal-content,
    #eventCarCompletionModal .modal-content,
    #successModal .modal-content,
    #participantConfirmationModal .modal-content,
    #eventCarConfirmationModal .modal-content,
    #transportConfirmationModal .modal-content {
        background-color: var(--color-modal-bg, #1f2937) !important;
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    #successModal .modal-body,
    #participantConfirmationModal .modal-body,
    #eventCarConfirmationModal .modal-body,
    #transportConfirmationModal .modal-body {
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    /* 22. 送迎調整ページの参加者の「学年」「地区」の箱 */
    .participant-info .grade,
    .participant-info .district,
    .participant-grade,
    .participant-member-no,
    .participant-details,
    .grade-box,
    .district-box,
    .participant-grade-assigned,
    .participant-member-no-assigned {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 5, 7. 参加者ページ・送迎車ページの未確定状態の箱 - より暗めのグレーに */
    .participant-planning .participant-grade,
    .participant-planning .participant-member-no,
    .participant-planning .participant-details,
    .event-car-planning .event-car-grade,
    .event-car-planning .event-car-member-no,
    .event-car-planning .event-car-details {
        background-color: var(--color-background-light, #1a1a1a) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 参加者ページ・送迎車ページの出欠の箱 */
    .participation-status-box,
    .participation-status-symbol,
    .ride-available-box,
    .ride-available-symbol {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 23. エラーモーダル */
    #errorModal .modal-content,
    #warningModal .modal-content,
    #errorModal,
    #warningModal {
        background-color: var(--color-modal-bg, #1f2937) !important;
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    #errorModal .modal-body,
    #warningModal .modal-body {
        color: var(--color-modal-text, #ffffff) !important;
    }
    
    /* 24. 周知情報ページの箱 */
    .public-info-box,
    .public-info-header,
    .public-page-header,
    h1.public-page-title,
    .public-schedule-info,
    .public-page-title-container,
    .public-page-title-box,
    .page-title-box,
    .page-title-container,
    .container h1,
    .public-container h1 {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 周知情報ページのコンテナ */
    .public-container,
    .container {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 使い方ページ・利用規約ページの追加スタイル */
    .terms-container,
    .terms-content,
    .terms-section,
    .terms-section h3,
    .terms-section p,
    .terms-section li,
    .usage-container,
    .usage-content,
    .flow-container,
    .step-container,
    .info-container {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 使い方ページの箱（全体フロー、手順、活用のポイント） */
    .flow-box,
    .step-box,
    .info-box,
    .feature-box,
    .initial-setup-box,
    .schedule-management-box,
    .usage-point-box,
    [class*="step"],
    [class*="flow"]:not(.flow-section):not(.flow-section-title),
    [id*="step"],
    [id*="flow"] {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* グラデーション背景の修正 */
    [style*="gradient"],
    [style*="linear-gradient"] {
        background: linear-gradient(to right, var(--color-white, #2d2d2d), var(--color-background-light, #1f2937)) !important;
    }
    
    /* 6, 8. 参加者ページ・送迎調整ページの確定状態の並び替え・絞り込みの箱 */
    .participant-planning .participant-section.readonly .simple-sort-accordion,
    .participant-planning .participant-section.readonly .simple-filter-accordion,
    .participant-planning .participant-section.readonly .simple-sort-accordion .sort-header,
    .participant-planning .participant-section.readonly .simple-filter-accordion .filter-header,
    .participant-planning .participant-section.readonly .simple-sort-accordion .sort-option,
    .participant-planning .participant-section.readonly .simple-filter-accordion .filter-button,
    .transport-planning .assignment-section.readonly .simple-sort-accordion,
    .transport-planning .assignment-section.readonly .simple-filter-accordion,
    .transport-planning .assignment-section.readonly .simple-sort-accordion .sort-header,
    .transport-planning .assignment-section.readonly .simple-filter-accordion .filter-header,
    .transport-planning .assignment-section.readonly .simple-sort-accordion .sort-option,
    .transport-planning .assignment-section.readonly .simple-filter-accordion .filter-button {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    /* 5. 送迎調整ページの確定状態の並び替え・絞り込みの未選択の文字色を白系に */
    .transport-planning .assignment-section.readonly .simple-sort-accordion .sort-option:not(.active),
    .transport-planning .assignment-section.readonly .simple-filter-accordion .filter-button:not(.active) {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 6. 送迎調整ページの参加者パネルの並び替え・絞り込みの箱 */
    .transport-planning .participant-section.readonly .simple-sort-accordion,
    .transport-planning .participant-section.readonly .simple-filter-accordion,
    .transport-planning .participant-section.readonly .simple-sort-accordion .sort-header,
    .transport-planning .participant-section.readonly .simple-filter-accordion .filter-header,
    .transport-planning .participant-section.readonly .simple-sort-accordion .sort-option,
    .transport-planning .participant-section.readonly .simple-filter-accordion .filter-button {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    /* フッター */
    .footer,
    .landing-footer {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 10. 周知情報ページの表の白い部分 */
    .table-header,
    .record-count,
    .data-table th,
    .data-table thead {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 11. 周知情報ページの送迎調整タブの箱 */
    .transport-section,
    .car-assignment {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    .car-assignment {
        background-color: var(--color-white, #2d2d2d) !important;
    }
    
    /* 8. 周知情報ページの送迎調整タブの文字色 */
    .transport-section h3,
    .car-assignment,
    .car-name,
    .participant-list li {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 9. 周知情報ページのタブの文字色をヘッダーと同じ薄いテーマカラーに */
    .page-tab {
        color: var(--color-text-secondary, #9ca3af) !important;
    }
    
    .page-tab.participant.active {
        color: var(--color-header-participant, #f9cfcf) !important; /* ヘッダーと同じ明るい赤 */
    }
    
    .page-tab.event-car.active {
        color: var(--color-header-car, #b0d5ff) !important; /* ヘッダーと同じ明るい青 */
    }
    
    .page-tab.transport.active {
        color: var(--color-header-plan, #e6d1ff) !important; /* ヘッダーと同じ明るい紫 */
    }
    
    .page-tab.participant:hover {
        color: var(--color-header-participant, #f9cfcf) !important;
    }
    
    .page-tab.event-car:hover {
        color: var(--color-header-car, #b0d5ff) !important;
    }
    
    .page-tab.transport:hover {
        color: var(--color-header-plan, #e6d1ff) !important;
    }
    
    /* 選択中予定パネルの詳細 */
    .selected-schedule-info,
    .selected-schedule-info * {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 編集者追加/編集完了モーダルの情報表示エリア */
    .record-info,
    .account-info,
    #recordAccountInfo,
    #recordAccountInfo * {
        background-color: var(--color-white, #2d2d2d) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 4. 編集者編集モーダルの編集者IDと最終アクセス日の入力欄 */
    #editAccountModal input[readonly][disabled] {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-secondary, #9ca3af) !important;
    }
    
    /* 5. メンバ/車編集・追加モーダルのselect入力欄 */
    #addModal select.form-input,
    #editModal select.form-input,
    #addCarModal select.form-input,
    #editCarModal select.form-input {
        background-color: var(--color-input-bg, #111827) !important;
        color: var(--color-input-text, #f3f4f6) !important;
    }
    
    /* 6-7. メンバ/車編集・追加モーダルのアコーディオンと地区アコーディオンの箱 */
    .custom-dropdown-button,
    .custom-dropdown-menu,
    .custom-dropdown-item {
        background-color: var(--color-input-bg, #111827) !important;
        color: var(--color-input-text, #f3f4f6) !important;
    }
    
    .custom-dropdown-menu {
        border-color: var(--color-input-border, #374151) !important;
    }
    
    .custom-dropdown-item:hover {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    /* メンバ/車編集・追加モーダルの地区アコーディオンの下矢印ボタン（member-styles.cssのbackground-color: whiteを上書き） */
    .member-page .custom-dropdown-input-button,
    body:has(.member-page) .custom-dropdown-input-button,
    .car-page .custom-dropdown-input-button,
    body:has(.car-page) .custom-dropdown-input-button,
    #addModal .custom-dropdown-input-button,
    #editModal .custom-dropdown-input-button,
    #addCarModal .custom-dropdown-input-button,
    #editCarModal .custom-dropdown-input-button {
        background-color: var(--color-input-bg, #111827) !important;
        border-color: var(--color-input-border, #374151) !important;
    }
    
    .member-page .custom-dropdown-input-button:hover,
    body:has(.member-page) .custom-dropdown-input-button:hover,
    .car-page .custom-dropdown-input-button:hover,
    body:has(.car-page) .custom-dropdown-input-button:hover {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    /* 8. 削除モーダルの警告文の色をテーマカラーに */
    #deleteModal p[style*="color: #ef4444"],
    #deleteCarModal p[style*="color: #ef4444"],
    #deleteEventModal p[style*="color: #ef4444"] {
        color: var(--page-theme-primary, var(--color-error, #ef4444)) !important;
    }
    
    /* 9. 予定詳細モーダルの縦ラインを各ページのテーマカラーに */
    .participant-page .schedule-detail-item,
    body:has(.participant-page) .schedule-detail-item {
        border-left-color: rgba(237, 102, 102, 0.5) !important; /* 薄い赤 */
    }
    
    .event-car-page .schedule-detail-item,
    body:has(.event-car-page) .schedule-detail-item {
        border-left-color: rgba(37, 99, 235, 0.5) !important; /* 薄い青 */
    }
    
    .transport-planning-page .schedule-detail-item,
    body:has(.transport-planning) .schedule-detail-item {
        border-left-color: rgba(166, 91, 255, 0.5) !important; /* 薄い紫 */
    }
    
    /* 10. 参加者パネルと送迎車パネルのメンバ名/車名の文字色 */
    .participant-item .participant-name,
    .event-car-item .car-name,
    .participant-planning .participant-item .participant-name,
    .event-car-planning .event-car-item .car-name {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 11. 送迎調整ページの参加者パネルの確定状態の並び替え・絞り込みの箱 */
    .transport-planning .participant-section.readonly .simple-sort-accordion,
    .transport-planning .participant-section.readonly .simple-filter-accordion {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    /* 12. 周知情報ページの送迎調整タブの送迎車を薄い紫で囲む */
    .public-container .car-assignment {
        border: 1px solid rgba(166, 91, 255, 0.3) !important; /* 薄い紫のボーダー */
        border-left: 4px solid #9333ea !important; /* 左側の紫の縦ラインは維持 */
    }
    
    /* 1. ログインモーダルと新規登録モーダルの入力欄 */
    #loginModal .form-input,
    #registerModal .form-input {
        background-color: var(--color-input-bg, #111827) !important;
        color: var(--color-input-text, #f3f4f6) !important;
        border-color: var(--color-input-border, #374151) !important;
    }
    
    /* 2. 新規登録時のアカウント登録完了モーダルの情報ボックス */
    .account-info-container {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    .account-info-container label {
        color: var(--color-label-text, #d1d5db) !important;
    }
    
    .account-info-container #accountInfoUrl,
    .account-info-container #accountInfoTeamId,
    .account-info-container #accountInfoEditorId,
    .account-info-container #accountInfoEditorName,
    .account-info-container #accountInfoPassword {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 3. メンバ・車追加・編集モーダルの地区アコーディオンの下向き三角ボタン */
    /* member-styles.cssが後に読み込まれるため、border-top全体を上書きする必要がある */
    .member-page .custom-dropdown-arrow,
    body:has(.member-page) .custom-dropdown-arrow,
    .car-page .custom-dropdown-arrow,
    body:has(.car-page) .custom-dropdown-arrow,
    #addModal .custom-dropdown-arrow,
    #editModal .custom-dropdown-arrow,
    #addCarModal .custom-dropdown-arrow,
    #editCarModal .custom-dropdown-arrow,
    .custom-dropdown-input-button .custom-dropdown-arrow,
    .member-page .custom-dropdown-input-button .custom-dropdown-arrow,
    body:has(.member-page) .custom-dropdown-input-button .custom-dropdown-arrow,
    .car-page .custom-dropdown-input-button .custom-dropdown-arrow,
    body:has(.car-page) .custom-dropdown-input-button .custom-dropdown-arrow,
    .member-page .custom-dropdown-button .custom-dropdown-arrow,
    body:has(.member-page) .custom-dropdown-button .custom-dropdown-arrow,
    .car-page .custom-dropdown-button .custom-dropdown-arrow,
    body:has(.car-page) .custom-dropdown-button .custom-dropdown-arrow,
    .custom-dropdown-arrow {
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 6px solid var(--color-text-primary, #ffffff) !important;
    }
    
    /* 新規登録モーダルの活動エリア・活動内容・活動内容詳細のアコーディオン */
    #registerModal .team-form-accordion {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: var(--color-border, #374151) !important;
    }
    
    #registerModal .team-form-accordion-header {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #registerModal .team-form-accordion-header:hover {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
    }
    
    #registerModal .team-form-accordion-header.active {
        background-color: rgba(248, 120, 0, 0.2) !important; /* オレンジ系の薄い色 */
        border-left-color: #f87800 !important;
    }
    
    #registerModal .team-form-accordion-label {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #registerModal .team-form-accordion-selected {
        color: #f87800 !important; /* オレンジ系の色を維持 */
    }
    
    #registerModal .team-form-accordion-icon {
        color: var(--color-text-secondary, #9ca3af) !important;
    }
    
    #registerModal .team-form-accordion-header.active .team-form-accordion-icon {
        color: #f87800 !important; /* オレンジ系の色を維持 */
    }
    
    #registerModal .team-form-accordion-content {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    #registerModal .team-accordion {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: var(--color-border, #374151) !important;
    }
    
    #registerModal .team-accordion-item {
        border-bottom-color: var(--color-border, #374151) !important;
    }
    
    #registerModal .team-accordion-header {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #registerModal .team-accordion-header:hover {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
    }
    
    #registerModal .team-accordion-header.active {
        background-color: rgba(248, 120, 0, 0.2) !important; /* オレンジ系の薄い色 */
        border-left-color: #f87800 !important;
    }
    
    #registerModal .team-accordion-label {
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #registerModal .team-accordion-selected {
        color: #f87800 !important; /* オレンジ系の色を維持 */
    }
    
    #registerModal .team-accordion-icon {
        color: var(--color-text-secondary, #9ca3af) !important;
    }
    
    #registerModal .team-accordion-header.active .team-accordion-icon {
        color: #f87800 !important; /* オレンジ系の色を維持 */
    }
    
    #registerModal .team-accordion-content {
        background-color: var(--color-background-light, #1f2937) !important;
    }
    
    #registerModal .team-accordion-button {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: var(--color-border, #374151) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #registerModal .team-accordion-button:hover {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
        border-color: #f87800 !important; /* オレンジ系の色を維持 */
    }
    
    #registerModal .team-accordion-button.selected {
        background-color: #f87800 !important; /* オレンジ系の色を維持 */
        color: white !important;
        border-color: #f87800 !important;
    }
    
    /* 4. 参加者ページの参加者パネル内の学年・地区（既存スタイルを確認） */
    /* 5. 送迎車ページの送迎車パネル内の定員・地区・選択されていない出欠選択肢 */
    #eventCarListContent .event-car-capacity,
    #eventCarListContent .event-car-management-no {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    #eventCarListContent .participation-btn:not(.active) {
        background-color: var(--color-background-light, #1f2937) !important;
        border-color: var(--color-border, #374151) !important;
        color: var(--color-text-primary, #ffffff) !important;
    }
    
    /* 6. 周知情報ページの「※取消線付きの参加者・送迎車は退部処理済です」 */
    .public-container div[style*="background-color: #f8f9fa"],
    .public-container div[style*="color: #6c757d"],
    div[style*="background-color: #f8f9fa"][style*="color: #6c757d"],
    div[style*="background-color: #f8f9fa"][style*="border-left: 4px solid #6c757d"],
    div[style*="color: #6c757d"][style*="background-color: #f8f9fa"] {
        background-color: var(--color-background-light, #1f2937) !important;
        color: var(--color-text-secondary, #9ca3af) !important;
        border-left-color: var(--color-border, #4a4a4a) !important;
    }
    
    /* 1. 周知情報ページの表を予定ページと同じスタイルに */
    .public-container .data-table th {
        background-color: var(--color-background, #1f2937) !important;
        color: var(--color-text-primary, #ffffff) !important;
        border-bottom: 1px solid rgba(74, 74, 74, 0.6) !important; /* 細く、暗めのグレー */
    }
    
    .public-container .data-table td {
        border-bottom: 0.5px solid rgba(74, 74, 74, 0.6) !important; /* 細く、暗めのグレー */
    }
    
    .public-container .data-table tr:hover td {
        background-color: var(--color-hover, #374151) !important;
    }
    
    .public-container .data-table tr:nth-child(even) td {
        background-color: var(--color-background-light, #1a1a1a) !important;
    }
    
    .public-container .data-table tr:nth-child(odd) td {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
    }
    
    /* 周知情報ページの表の交互行をより暗く（白すぎる行を修正） */
    .public-container .data-table tbody tr:nth-child(even) td {
        background-color: var(--color-background-light, #1a1a1a) !important;
    }
    
    .public-container .data-table tbody tr:nth-child(odd) td {
        background-color: var(--color-background-secondary, #2d2d2d) !important;
    }
    
    /* public/index.phpのライトモード用スタイルをダークモードで上書き */
    .public-container .data-table tr:nth-child(even) td[style*="background-color: rgba(248, 250, 252, 0.8)"] {
        background-color: var(--color-background-light, #1a1a1a) !important;
    }
}

/* ========================================
   リセット・基本設定
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

/* システムフォントスタック - 各OSで最適なフォントを自動選択 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    padding-top: var(--header-height);
}

/* ========================================
   レイアウト - ヘッダー
   ======================================== */
.header {
    background-color: var(--color-white);
    color: var(--color-text-secondary);
    box-shadow: 0 2px 4px var(--color-shadow);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    transform: translateZ(0); /* GPU加速の強制 */
}

.header.hidden {
    transform: translateY(-100%);
}

.landing-header.hidden {
    transform: translateY(-100%);
}

/* 1行目: サイト名と編集者名 */
.header-top {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: var(--color-white);
    color: var(--color-text-secondary);
    max-width: 1200px;
    margin: 0 auto;
}

.site-title-container {
    flex: 3.5; /* flex: 4から3.5に減らして右側の余白を小さくする */
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    padding-right: 0; /* 右側のパディングを削除 */
    outline: none;
}

.site-title-container:hover {
    opacity: 0.8;
}

.site-title-container:focus {
    outline: none;
}

.editor-container {
    flex: 2; /* flex: 1.5から2に増やして編集者名の領域を広げる */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せに変更 */
    width: 100%;
    min-width: 0; /* flexboxで省略表示を有効にする */
    padding: 0 0.5rem;
    padding-left: 0.5rem; /* 左側のパディングを小さくする */
}

.editor-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    line-height: 1.1; /* 行間を最小限に保つ */
    gap: 0.1rem; /* クラブ名と編集者名の間隔を最小限に */
}

.notification-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding-right: 0.5rem;
    min-width: 0; /* flexboxで省略表示を有効にする */
}

.notification-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-secondary, #696969);
}

.notification-icon svg {
    fill: var(--color-text-secondary, #696969);
}

.notification-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.notification-icon:active {
    transform: scale(0.95);
}

.notification-icon-symbol {
    display: inline-block;
}

.site-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    color: inherit; /* 親要素の色を継承 */
}

.site-title:focus {
    outline: none;
}

.club-name {
    font-size: 0.9rem; /* 編集者名と同じフォントサイズ */
    color: var(--color-text-secondary);
    font-weight: 400;
    display: block;
    line-height: 1.1; /* 行間を最小限に保つ */
    text-align: left;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.club-name:focus {
    outline: none;
}

.editor-name {
    font-size: 0.9rem; /* フォントサイズを大きくする（0.6remから0.9remに変更） */
    color: var(--color-text-secondary);
    font-weight: 400;
    display: block;
    line-height: 1.1; /* 行間を最小限に保つ */
    text-align: left; /* 左寄せに変更 */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

/* 2行目: メニュー */
.header-bottom {
    padding: 0 0 0.25rem 0;
    background-color: var(--color-white);
}

.icon-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    list-style: none;
}

.icon-nav li {
    flex: 1;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-white);
    position: relative;
}

.nav-item:hover {
    transform: scale(1.05);
    background-color: var(--color-hover-overlay);
}

.icon-nav li:not(:last-child) .nav-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: var(--color-separator);
}

.nav-icon {
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

.nav-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ========================================
   レイアウト - サイドバー
   ======================================== */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    z-index: 100;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    /* デフォルトでは非表示（メディアクエリで表示制御） */
    display: none;
}

.header.hidden + .sidebar {
    transform: translateY(calc(-1 * var(--header-height)));
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    border-bottom: 1px solid var(--color-border);
}

.sidebar-nav a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-size: 0.8rem;
    transition: background-color 0.3s ease;
}

.sidebar-nav a:hover {
    background-color: var(--color-border);
}

/* ========================================
   レイアウト - メインコンテンツ
   ======================================== */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.content-section {
    background-color: var(--color-white);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--color-shadow);
}

/* チームページのコンテンツセクションをコンパクトに */
.team-page .content-section {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.content-section h2 {
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.content-section h3 {
    color: var(--color-heading-secondary);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.content-section p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* ========================================
   レイアウト - フッター
   ======================================== */
.footer {
    background-color: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0.5rem;
    text-align: center;
    color: var(--color-footer-text);
    font-size: 0.875rem;
    margin-top: auto;
}

.footer p {
    margin: 0;
}

/* ========================================
   コンポーネント - ヘッダーメニュー
   ======================================== */
.nav-event {
    color: var(--color-header-event);
}

.nav-participant {
    color: var(--color-header-participant);
}

.nav-car {
    color: var(--color-header-car);
}

/* 送迎調整WEBのヘッダの「送迎調整」は紫系 */
.transport-web-header .nav-plan {
    color: var(--color-header-plan, #9134ff); /* 送迎調整は紫系 */
}

.transport-web-header .nav-plan .nav-icon svg,
.transport-web-header .nav-plan .nav-icon svg use {
    color: var(--color-header-plan, #9134ff); /* 送迎調整は紫系 */
    fill: var(--color-header-plan, #9134ff); /* 送迎調整は紫系 */
}

/* デフォルトはPOM（青系） - POMページのヘッダの「POM」は青系 */
.nav-plan {
    color: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
}

.nav-plan .nav-icon svg,
.nav-plan .nav-icon svg use {
    color: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
    fill: var(--color-header-pom); /* POMは青系 - styles-colorful.cssの変数を使用 */
}

.nav-menu {
    color: var(--color-header-menu);
}

/* ========================================
   コンポーネント - ハンバーガーメニュー
   ======================================== */
.hamburger-container {
    position: relative;
    padding: 0.75rem 0.5rem;
}

.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hamburger-menu span {
    width: 20px;
    height: 5px;
    background-color: var(--color-header-menu, #696969) !important;
    transition: all 0.3s ease;
    border-radius: 2px;
    margin: 0 auto;
    will-change: transform;
    transform: translateZ(0); /* GPU加速の強制 */
}

/* ハンバーガーメニューのアイコン色を明示的に指定（ページテーマ色の影響を受けないように） */
.nav-menu .hamburger-menu span,
.hamburger-container.nav-menu .hamburger-menu span,
.nav-item.nav-menu .hamburger-menu span {
    background-color: #696969 !important;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================================
   コンポーネント - モバイルメニュー
   ======================================== */
.mobile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--color-white);
    box-shadow: 0 8px 25px var(--color-shadow-medium);
    border-radius: 12px;
    min-width: var(--sidebar-width);
    z-index: 1000;
    overflow: hidden;
    transform: translateY(-10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    transform: translateY(-10px) translateZ(0); /* GPU加速の強制 */
}

.mobile-menu.active {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.2s ease;
}

.mobile-nav li:last-child {
    border-bottom: none;
}

.mobile-nav a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav a:hover {
    background-color: var(--color-hover);
    padding-left: 2rem;
}

.mobile-nav a::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.2s ease;
}

.mobile-nav a:hover::before {
    width: 8px;
}

/* ========================================
   コンポーネント - メニュー色分け
   ======================================== */
.menu-team {
    color: var(--color-menu-team);
}

.menu-admin {
    color: var(--color-menu-admin);
}

.menu-member {
    color: var(--color-menu-member);
}

.menu-car {
    color: var(--color-menu-car);
}

.menu-other {
    color: var(--color-menu-other);
}

/* ========================================
   レスポンシブ対応 - メディアクエリ
   ======================================== */

/* ランディングページではサイドバーを非表示 */
#landing-layout .sidebar,
#landing-layout #sidebar-container,
#landing-layout #sidebar-container * {
    display: none !important;
}

/* ランディングページのコンテンツにはマージンを適用しない */
#landing-layout,
#landing-layout .landing-container,
#landing-layout #landing-hero-container,
#landing-layout #landing-header-container,
#landing-layout #landing-footer-container {
    margin-left: 0 !important;
}

/* デスクトップ表示時のみサイドバー分の左マージンを適用（認証済みレイアウトのみ） */
@media (min-width: 768px) {
    /* サイドバーを表示（認証済みレイアウト内と、直接body直下の両方に対応） */
    #sidebar-container,
    #sidebar-container .sidebar,
    .sidebar,
    #authenticated-layout #sidebar-container,
    #authenticated-layout #sidebar-container .sidebar,
    #authenticated-layout .sidebar {
        display: block !important;
    }
    
    /* コンテンツにマージンを適用（認証済みレイアウト内と、直接body直下の両方に対応） */
    /* ヘッダーはposition: fixedで画面全体に広がるため、margin-leftは適用しない */
    /* #main-content-containerは親要素なので、.main-contentからはmargin-leftを削除 */
    #main-content-container,
    #authenticated-layout #main-content-container,
    #authenticated-layout #authenticated-hero-container {
        margin-left: var(--sidebar-width);
    }
    
    /* フッターはサイドメニューの右端から始まるように幅と位置を調整 */
    /* #footer-containerは親要素なので、.footerにのみmargin-leftを適用 */
    #footer-container,
    #authenticated-layout #footer-container {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        box-sizing: border-box;
    }
    
    /* よくある質問ページとClub活動Webページではサイドメニューが表示されないため、フッターのmargin-leftを0に設定 */
    body:has(.faq-main-content) #footer-container,
    body:has(.faq-main-content) #authenticated-layout #footer-container,
    body:has(.club-main-content) #footer-container,
    body:has(.club-main-content) #authenticated-layout #footer-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* 認証済みレイアウト内のコンテンツの幅を調整（サイドバー分を考慮） */
    #authenticated-layout #authenticated-hero-container,
    #authenticated-layout #authenticated-hero-container.landing-container {
        width: calc(100% - var(--sidebar-width));
        max-width: calc(1200px - var(--sidebar-width));
        box-sizing: border-box;
    }
    
    /* その他のコンテンツも幅を調整（認証済みレイアウト内と、直接body直下の両方に対応） */
    /* #main-content-containerは親要素なので、.main-contentからは幅調整を削除 */
    #main-content-container,
    #authenticated-layout #main-content-container {
        width: calc(100% - var(--sidebar-width));
        max-width: calc(1200px - var(--sidebar-width));
        box-sizing: border-box;
    }
    
    /* 認証済みレイアウト内のヘッダーとナビゲーションは幅制限なし（margin-leftのみで調整） */
    /* ヘッダーはposition: fixedで画面全体に広がるため、幅制限は不要 */
}

/* タブレット・モバイル表示 (768px以下) */
@media (max-width: 768px) {
    .sidebar,
    #sidebar-container {
        display: none;
    }
    
    .site-title {
        font-size: 1.5rem;
    }
    
    .nav-icon {
        font-size: 1.2rem;
    }
    
    .nav-label {
        font-size: 0.7rem;
    }
    
    /* 編集者名の最大幅を制限（モバイルではさらに小さく） */
    .editor-container {
        max-width: 150px; /* 横幅を広くする（120pxから150pxに変更） */
        padding: 0 0.25rem;
    }
    
    .club-name {
        font-size: 0.75rem; /* 編集者名と同じフォントサイズ */
    }
    
    .editor-name {
        font-size: 0.75rem; /* フォントサイズを大きくする（0.55remから0.75remに変更） */
    }
}

/* 小画面モバイル表示 (480px以下) */
@media (max-width: 480px) {
    .site-title {
        font-size: 1.3rem;
    }
    
    .nav-icon {
        font-size: 1rem;
    }
    
    .nav-label {
        font-size: 0.65rem;
    }
    
    .icon-nav {
        padding: 0 0.5rem;
    }
    
    /* 編集者名の最大幅をさらに制限（小画面モバイル） */
    .editor-container {
        max-width: 120px; /* 横幅を広くする（100pxから120pxに変更） */
        padding: 0 0.25rem;
    }
    
    .club-name {
        font-size: 0.7rem; /* 編集者名と同じフォントサイズ */
    }
    
    .editor-name {
        font-size: 0.7rem; /* フォントサイズを大きくする（0.5remから0.7remに変更） */
    }
}

/* ========================================
   コンポーネント - モーダル
   ======================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.modal.active,
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--color-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: visible;
    animation: slideUp 0.3s ease;
    position: relative;
    z-index: 10000;
}

.modal-header {
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* ========================================
   ランディングページ用ヘッダー
   ======================================== */
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    flex-wrap: nowrap;
    background-color: var(--color-white, #ffffff);
    box-shadow: 0 2px 4px var(--color-shadow, rgba(0, 0, 0, 0.1));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

body:not(.authenticated) .landing-container {
    padding-top: 80px;
}

.landing-header .site-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: var(--color-text-primary, #333);
    flex: 4;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-header .site-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    outline: none;
}

.landing-header .site-title a:hover {
    opacity: 0.7;
}

.landing-header .site-title a:focus {
    outline: none;
}

.landing-header .button-group {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    justify-content: flex-end;
    white-space: nowrap;
}

.landing-header .btn {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}

.landing-header .btn-login {
    background-color: var(--color-menu-team, #f87800);
    color: white;
}

.landing-header .btn-login:hover {
    background-color: var(--color-menu-team-dark, #e66a00);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248, 120, 0, 0.3);
}

.landing-header .btn-register {
    background-color: white;
    color: var(--color-menu-team, #f87800);
    border: 2px solid var(--color-menu-team, #f87800);
}

.landing-header .btn-register:hover {
    background-color: var(--color-menu-team, #f87800);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248, 120, 0, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .landing-header {
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        flex-wrap: nowrap;
    }
    
    .landing-header .site-title {
        font-size: 1.5rem;
        white-space: nowrap;
    }
    
    .landing-header .button-group {
        gap: 0.5rem;
        white-space: nowrap;
    }
    
    .landing-header .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .landing-header {
        gap: 0.5rem;
        padding: 0.75rem 0.75rem;
    }
    
    .landing-header .site-title {
        font-size: 1.3rem;
    }
    
    .landing-header .button-group {
        gap: 0.4rem;
        flex-shrink: 0;
    }
    
    .landing-header .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .landing-header {
        gap: 0.4rem;
        padding: 0.75rem 0.5rem;
    }
    
    .landing-header .site-title {
        font-size: 1.3rem;
    }
    
    .landing-header .button-group {
        gap: 0.3rem;
    }
    
    .landing-header .btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.7rem;
    }
}

/* ========================================
   ログインモーダル・新規登録モーダル用ボタンスタイル
   ======================================== */
#loginModal .btn-primary,
#registerModal .btn-primary {
    background-color: var(--color-menu-team, #f87800);
    color: white;
    border: none;
}

#loginModal .btn-primary:hover,
#registerModal .btn-primary:hover {
    background-color: #e66a00;
    box-shadow: 0 4px 12px rgba(248, 120, 0, 0.3);
}

#loginModal .btn-secondary,
#registerModal .btn-secondary {
    background-color: var(--color-button-secondary, #6b7280);
    color: white;
    border: none;
}

#loginModal .btn-secondary:hover,
#registerModal .btn-secondary:hover {
    background-color: var(--color-button-secondary-hover, #4b5563);
}

/* 利用規約リンクの色もオレンジ系に変更 */
#loginModal a[href="terms.html"],
#registerModal a[href="terms.html"] {
    color: var(--color-menu-team, #f87800) !important;
    text-decoration: underline;
}

#loginModal a[href="terms.html"]:hover,
#registerModal a[href="terms.html"]:hover {
    color: var(--color-menu-team-dark, #e66a00) !important;
}

/* ログインモーダル・新規登録モーダルの入力欄フォーカス時の色をオレンジ系に変更 */
#loginModal .form-input:focus,
#registerModal .form-input:focus,
#loginModal input:focus,
#registerModal input:focus,
#loginModal textarea:focus,
#registerModal textarea:focus,
#loginModal select:focus,
#registerModal select:focus {
    outline: none;
    border-color: var(--color-menu-team, #f87800) !important;
    box-shadow: 0 0 0 3px rgba(248, 120, 0, 0.1) !important;
}

/* ========================================
   ログアウトモーダル用ボタンスタイル（オレンジ系）
   ======================================== */
#logoutModal .btn-primary {
    background-color: var(--color-menu-team, #f87800);
    color: white;
    border: none;
}

#logoutModal .btn-primary:hover {
    background-color: var(--color-menu-team-dark, #e66a00);
    box-shadow: 0 4px 12px rgba(248, 120, 0, 0.3);
}

#logoutModal .btn-secondary {
    background-color: var(--color-button-secondary, #6b7280);
    color: white;
    border: none;
}

#logoutModal .btn-secondary:hover {
    background-color: var(--color-button-secondary-hover, #4b5563);
}

/* ========================================
   各ページのパネル左上アイコンの色（ページのテーマカラーに合わせる）
   ======================================== */

/* 送迎調整ページ（紫系） */
.transport-planning-page h2 .icon,
.transport-planning-page h3 .icon,
body:has(.transport-planning) h2 .icon,
body:has(.transport-planning) h3 .icon,
.assignment-section h3 .icon {
    color: var(--page-theme-primary, #a65bff);
    fill: var(--page-theme-primary, #a65bff);
}

/* 参加者ページ（赤系） */
.participant-page h2 .icon,
.participant-page h3 .icon,
body:has(.participant-planning) h2 .icon,
body:has(.participant-planning) h3 .icon {
    color: var(--page-theme-primary, #ed6666);
    fill: var(--page-theme-primary, #ed6666);
}

/* 予定ページ（緑系） */
.event-page h2 .icon,
.event-page h3 .icon,
body:has(.event-page) h2 .icon,
body:has(.event-page) h3 .icon {
    color: var(--page-theme-primary, #2ecdb4);
    fill: var(--page-theme-primary, #2ecdb4);
}

/* メンバページ（ピンク系） */
.member-page h2 .icon,
.member-page h3 .icon,
body:has(.member-page) h2 .icon,
body:has(.member-page) h3 .icon {
    color: var(--page-theme-primary, #f760cc);
    fill: var(--page-theme-primary, #f760cc);
}

/* 編集者ページ（黄色系） */
.account-page h2 .icon,
.account-page h3 .icon,
body:has(.account-page) h2 .icon,
body:has(.account-page) h3 .icon {
    color: var(--page-theme-primary, #ffbf00);
    fill: var(--page-theme-primary, #ffbf00);
}

/* 車ページ（青系） */
.car-page h2 .icon,
.car-page h3 .icon,
body:has(.car-page) h2 .icon,
body:has(.car-page) h3 .icon {
    color: var(--page-theme-primary, #27c9ff);
    fill: var(--page-theme-primary, #27c9ff);
}

/* 送迎車ページ（青系） */
.event-car-page h2 .icon,
.event-car-page h3 .icon,
body:has(.event-car-page) h2 .icon,
body:has(.event-car-page) h3 .icon {
    color: var(--page-theme-primary, #3b97ff);
    fill: var(--page-theme-primary, #3b97ff);
}

/* チームページ（オレンジ系） */
.team-page h2 .icon,
.team-page h3 .icon,
body:has(.team-page) h2 .icon,
body:has(.team-page) h3 .icon {
    color: var(--color-menu-team, #f87800);
    fill: var(--color-menu-team, #f87800);
}

/* POMページ（青系） */
.pom-page h2 .icon,
.pom-page h3 .icon,
body:has(.pom-page) h2 .icon,
body:has(.pom-page) h3 .icon {
    color: var(--color-header-pom, #3b97ff);
    fill: var(--color-header-pom, #3b97ff);
}

/* ========================================
   お知らせモーダル内の線の色をグレー系に統一
   ======================================== */
#notificationListModal .modal-header,
#notificationListModal .modal-header::after,
#notificationListModal .modal-footer {
    border-color: var(--color-border, #e5e7eb) !important;
    border-bottom-color: var(--color-border, #e5e7eb) !important;
    border-top-color: var(--color-border, #e5e7eb) !important;
    background-color: transparent !important;
}

#notificationListModal .modal-header::after {
    background-color: var(--color-border, #e5e7eb) !important;
}

/* お知らせモーダルの左上アイコンを黒系に設定 */
#notificationListModal .modal-title .icon {
    color: var(--color-text-primary, #333) !important;
    fill: var(--color-text-primary, #333) !important;
}

/* お知らせモーダルの「閉じる」ボタンのスタイル（送迎調整Webと褒めるWebで統一） */
#notificationListModal .modal-footer .btn {
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    min-width: 80px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#notificationListModal .modal-footer .btn-secondary {
    background-color: var(--color-border, #ecf0f1) !important;
    color: var(--color-text-primary, #2c3e50) !important;
    border: 1px solid var(--color-border-light, #bdc3c7) !important;
}

#notificationListModal .modal-footer .btn-secondary:hover {
    background-color: var(--color-hover, #d5dbdb) !important;
    color: var(--color-text-primary, #2c3e50) !important;
}

/* ========================================
   メンバページの進級ボタンのスタイル（絞り込みボタンと同じスタイル）
   ======================================== */
#promoteGradeButton {
    background-color: var(--color-background, #f8f9fa) !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
    color: #495057 !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#promoteGradeButton:hover {
    border-color: var(--page-theme-primary, #3b82f6) !important;
    background-color: var(--page-theme-primary-light, #e0e7ff) !important;
    transform: translateY(-1px) !important;
}

/* ダークモードでの進級ボタンのスタイル */
@media (prefers-color-scheme: dark) {
    #promoteGradeButton {
        background-color: #1f2937 !important; /* ダークモード: 暗い背景 */
        border-color: #374151 !important; /* ダークモード: 暗いボーダー */
        color: #e5e7eb !important; /* ダークモード: 明るいグレー */
    }
    
    #promoteGradeButton:hover {
        background-color: #374151 !important; /* ダークモード: より明るい背景 */
        border-color: var(--page-theme-primary, #3b82f6) !important; /* アクセント色のボーダー */
    }
}

/* ========================================
   アカウント登録完了モーダルのスタイル
   ======================================== */
/* アカウント登録完了モーダルの左上アイコンをオレンジ系に設定 */
/* 編集者ページで表示される場合は黄色系（styles-transport.cssで上書き） */
/* 編集者ページ以外でのみ適用（編集者ページのスタイルが優先されるように、詳細度を下げる） */
#accountNotificationModal .modal-title .icon {
    color: var(--color-menu-team, #f87800) !important;
    fill: var(--color-menu-team, #f87800) !important;
}

/* アカウント登録完了モーダルのコピーボタンをオレンジ系に設定 */
/* 編集者ページで表示される場合は黄色系（styles-transport.cssで上書き） */
/* 編集者ページ以外でのみ適用（編集者ページのスタイルが優先されるように、詳細度を下げる） */
#accountNotificationModal .modal-footer .btn-primary {
    background-color: var(--color-menu-team, #f87800) !important;
    color: white !important;
    border: none !important;
}

#accountNotificationModal .modal-footer .btn-primary:hover {
    background-color: var(--color-menu-team-dark, #e66a00) !important;
    box-shadow: 0 4px 12px rgba(248, 120, 0, 0.3) !important;
}

/* アカウント登録完了モーダルのフッターのボタン間の隙間を大きくする */
#accountNotificationModal .modal-footer {
    gap: 1rem !important;
}

/* ========================================
   編集者ページのテーブル - 編集者名の改行対応
   ======================================== */
/* 編集者名の列（2列目）に改行を適用（編集者ページのテーブルコンテナ内のみに限定） */
.content-section .table-container .data-table tbody tr td:nth-child(2),
.content-section .table-container .data-table th:nth-child(2) {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 300px !important;
    min-width: 100px !important;
    width: 30% !important;
}

/* 編集者ページのテーブルコンテナでテーブルレイアウトを調整 */
.content-section .table-container .data-table {
    table-layout: fixed !important;
    width: 100% !important;
}