/**
 * ============================================================================
 * ファイル名: style.css
 * 作成日: 2025年3月6日
 * 更新日: 2025年7月3日
 * 作成者: Tsutomu Soma & Claude3.7
 * プロジェクト: Amyloid Quantitative Analysis (AQA)
 * ============================================================================
 *
 * 【概要】
 * このファイルは、AQAプロジェクトのWebアプリケーション全体で使用される
 * スタイル定義を提供します。
 *
 * 【使用ページ】
 * - analysis.ejs: メイン解析ページ（MRI/PETデータのアップロードと解析）
 * - contact.ejs: お問い合わせフォームページ
 * - terms-of-use.ejs: 利用規約ページ
 * - privacy-policy.ejs: プライバシーポリシーページ
 * - admin関連ページ (ユーザー管理、プロファイルなど)
 * - ログイン・登録ページ
 *
 * 【主な機能】
 * - 共通レイアウト（ヘッダー、フッター、コンテナなど）
 * - 各セクション（アップロード、解析、お問い合わせなど）のスタイル
 * - フォーム要素とボタンのスタイル
 * - アラート、通知、フィードバックメッセージのスタイル
 * - アクセシビリティ対応
 * - レスポンシブデザイン
 *
 * 【開発メモ】
 * このコードの作成・修正には生成AIを利用しています。
 * CSSの構成は、変数定義、基本スタイル、レイアウト、共通コンポーネント、
 * ページ特有スタイル、ユーティリティ、アクセシビリティ、レスポンシブの順で配置しています。
 *
 * 【修正履歴】
 * 2026/02/11 - カード内テーブル共通スタイル追加（罫線・揃え・ストライプ・ホバー） (by claude)
 * 2026/02/01 - ユーザー一覧のバッジ色追加、解析権限チェックボックスの整列 (by codex)
 * 2026/01/27 - Step 8: ヘッダー透かし文字 AQW→VBQA、ロゴスタイル追加
 * 2025/07/03 - Contactページのスタイル調整
 * 2025/07/01 - 無効ユーザー表示スタイル追加（table-secondary強化）
 * 2025/06/25 - 12. エラーページスタイル (error.ejs)追加
 * 2025/06/11 - ユーザー名の可変幅変更
 * 2025/06/10 - ユーザー名の可変幅変更
 * 2025/06/04 - ユーザ名欄長さ修正
 * 2025/05/31 - ユーザー一覧ページのスタイル調整
 * 2025/05/15 - スタイル微調整 (ユーザー提供ファイルベース)
 * 2025/05/14 - ユーザ一覧表示修正
 * 2025/05/13 - プロファイル、ログアウトメニューの追加
 * 2025/05/10 - USER PASSWD変更ページ用のスタイル追加
 * 2025/05/01 - User login 画面用の追加2
 * 2025/04/30 - User login 画面用の追加
 * 2025/04/17 - VBQA (旧AQW) に変更
 *            - .data-warinig を追加
 * 2025/04/12 - PETのボタンの無効化表示を改善
 * 2025/04/08 - リフレッシュトークン更新管理の手動化に伴う変更
 * 2025/03/24 - レスポンシブデザインの改善
 * 2025/03/16 - クッキー用スタイル追加
 *            - アップロード失敗時のエラーメッセージ用追加
 * 2025/03/15 - コードのリファクタリングと整理、コメント追加
 * 2025/03/10 - 各種フォームの修正
 * 2025/03/07 - アクセシビリティの向上
 * 2025/03/06 - 初期バージョン作成
 *
 * 【TODO】
 * - CSSをモジュール化して分割 (現状は単一ファイル)
 * - カラーテーマの拡充 (現在は基本的なパレットのみ)
 * - レスポンシブデザインのさらなる最適化 (特に複雑なテーブルやフォーム)
 * - (確認) 各クラスが実際にどのHTML要素に適用されているかの棚卸しと、不要なスタイルの削除
 * ============================================================================
 */

/* ============================================================================
 * 0. 変数定義
 * ============================================================================ */
:root {
    /* カラーパレット */
    --primary-color: #234E70;
    --secondary-color: #2A7B9B;
    --accent-color: #3498db;
    --bg-light: #f8f9fa;
    --text-dark: #2c3e50;

    /* 状態カラー */
    --error-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #f0ad4e;

    /* UI要素 */
    --focus-outline: #4d90fe;
}

/* ============================================================================
 * 1. 基本スタイル - 全ページ共通
 * ============================================================================ */
/* 念のため、すべての要素に対してbox-sizingを設定 */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
}

/* 共通コンテナ */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 見出しスタイル */
h1 {
    margin: 0;
    /* ヘッダー内で使用されることを想定 */
    font-size: 2.5rem;
    font-weight: 300;
}

h2 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 0;
    /* セクションの最初の要素として使用されることを想定 */
}

/* 汎用非表示クラス */
.hidden {
    display: none;
}

/* ============================================================================
 * 2. レイアウト - ヘッダー, フッター, グリッド, カード, テーブル
 * ============================================================================ */

/* 2.1 ヘッダー */
.header {
    background-color: var(--primary-color);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    /* ::before要素がはみ出さないように */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー背景のプロジェクト名装飾 */
.header::before {
    content: "VBQA";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 120px;
    opacity: 0.1;
    font-weight: bold;
}

/* ヘッダーロゴ */
.header-logo {
    height: 40px;
    width: auto;
    margin-right: 12px;
    vertical-align: middle;
}

/* ヘッダータイトル部分のflex化 */
.header-title-group {
    display: flex;
    align-items: center;
}

/* 2.2 フッター */
.footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
    background-color: var(--primary-color);
    color: white;
    width: 100%;
    position: relative;
    /* 追加 */
    left: 0;
    /* 追加 */
    right: 0;
    /* 追加 */
    /* ページ幅全体に広がるように */
}

/* フッターに対する新しいスタイルを追加 */
.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-link {
    color: #add8e6;
    /* 明るい青色 */
    text-decoration: none;
}

.footer-link:hover {
    color: #87ceeb;
    text-decoration: underline;
}

/* 特定ページでのフッター位置調整 */
/* トークン管理画面のフッター修正: ページコンテンツが少ない場合にフッターが画面下部に固定されるように */
/* TODO(確認): position: relativeで意図通りに動作するか確認。absoluteやfixedが適切な場合もある。 */
body.token-management-page .footer {
    position: relative;
    /* relativeだと通常フローのまま。fixedやabsoluteでないと下部固定にはならない。 */
    bottom: 0;
    left: 0;
    right: 0;
}

/* 2.3 ページ種別ごとのコンテナ調整 */
/* ログインページと登録ページでは、コンテナの最大幅などを標準に戻す */
.login-page .container,
.register-page .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* NOTE: adminユーザー一覧ページ (.users-list-page) のコンテナはセクション6.6.2で別途定義 */

/* 2.4 グリッドシステム風クラス (Bootstrapライク) */
/* NOTE: これらはBootstrapのグリッドシステムを模倣した簡易的なものです */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    /* gutter補正 */
    margin-left: -15px;
    /* gutter補正 */
}

.col-md-4,
.col-md-6,
.col-md-12 {
    position: relative;
    width: 100%;
    /* モバイルファースト: デフォルトはフル幅 */
    padding-right: 15px;
    /* gutter */
    padding-left: 15px;
    /* gutter */
}

@media (min-width: 768px) {

    /* mdブレークポイント */
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.justify-content-center {
    justify-content: center !important;
    /* Bootstrap互換 */
}

/* 2.5 カードコンポーネント (Bootstrapライク) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* IE10-11対策 */
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    /* 表などがカード内で使用される場合、コンテンツに合わせて最小幅を確保し、はみ出す場合はスクロール */
    min-width: min-content;
    overflow: auto;
}



.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    overflow-x: auto;
}

/* 2.6 テーブルレスポンシブ */
/* table要素自体に適用するのではなく、tableをラップするdivなどに適用想定 */
.table-responsive table {
    min-width: 1000px;
    /* テーブルコンテンツが広い場合に最小幅を確保 */
    width: 100%;
    /* 親要素に収まるように */
}

/* 2.7 カード内テーブル共通スタイル */
/* card-body内のtable要素に罫線・パディング・揃えを適用 */
.card-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.card-body table th,
.card-body table td {
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    text-align: left;
    vertical-align: middle;
}

.card-body table thead th {
    background-color: var(--bg-light, #f8f9fa);
    font-weight: 600;
    white-space: nowrap;
}

.card-body table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.card-body table tbody tr:hover {
    background-color: #e9ecef;
}

/* card-body内のtable-responsiveではmin-widthを自動に(列数が少ないテーブル向け) */
.card-body .table-responsive table {
    min-width: auto;
}

/* NOTE: .cookie-table やユーザー一覧テーブルのスタイルはセクション6で別途定義 */

/* ============================================================================
 * 3. フォーム要素 - 共通スタイル、ファイル入力、セレクト、チェックボックス
 * ============================================================================ */

/* 3.1 共通フォームコントロール (Bootstrapライク) */
.form-control {
    width: 100%;
    /* デフォルトで親要素の幅いっぱいに広がる */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    /* bodyのフォントを継承 */
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    /* 追加: パディングとボーダーを幅に含める */
}

.form-control:focus {
    outline: none;
    border-color: var(--focus-outline);
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.3);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-dark);
}

/* form-group内のinput, textareaのスタイル (contact.ejsで主に使われる想定) */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea {
    /* .form-control と重複する部分があるが、form-group内での特化として残す */
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--focus-outline);
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.3);
}

.form-group textarea {
    resize: vertical;
    /* 縦方向のみリサイズ可能 */
}

/* フォーム送信ボタンのレイアウトコンテナ */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    /* ボタンが複数ある場合に折り返す */
    gap: 10px;
    /* ボタン間のスペース */
    margin-top: 20px;
}

/* フォームに関する補足情報 */
.form-note {
    font-size: 0.85rem;
    color: #666;
}

/* 解析権限などのチェックボックス用レイアウト */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.form-check .form-check-label {
    display: inline-block;
    margin: 0;
    font-weight: normal;
    line-height: 1.4;
}

/* 3.2 ファイル入力 */
.file-input-container {
    border: none;
    /* 元スタイルでは破線があったが、デザイン変更で不要になった可能性 */
    padding: 1.5rem;
    text-align: left;
    /* ラベルの配置基点 */
    border-radius: 4px;
    margin: 1rem 0;
}

/* file-input-containerのホバー効果は、現在border:noneのため無効 */
/* .file-input-container:hover {
    border-color: var(--accent-color);
} */

input[type="file"] {
    display: none;
    /* カスタムUIを使用するため本体は非表示 */
}

.file-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.file-label:hover {
    background-color: var(--primary-color);
}

/* 3.3 セレクトボックス */
select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 10px;
    /* 隣接要素との間隔 */
}

/* 3.4 チェックボックス */
.checkbox-container {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.checkbox-container input[type="checkbox"] {
    margin: 0;
    margin-right: 8px;
    width: auto;
    /* form-controlのwidth:100%を上書き */
    flex-shrink: 0;
    /* コンテナ幅が狭い場合に縮まないように */
}

.checkbox-container label {
    margin: 0;
    display: inline;
    /* form-group labelのdisplay:blockを上書き */
    cursor: pointer;
    font-weight: normal;
    /* form-group labelのfont-weight:boldを上書き */
}

/* ============================================================================
 * 4. ボタン - 共通スタイル、バリエーション、送信ボタン
 * ============================================================================ */

/* 4.1 共通ボタンスタイル (Bootstrapライクな .btn クラス) */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    /* aタグで使う場合を考慮 */
    cursor: pointer;
}

/* 汎用button要素のスタイル (より具体的な.btnクラスで上書きされることを想定) */
button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    /* .btnクラスのborder定義と競合する可能性あり。統一推奨 */
    padding: 10px 20px;
    /* .btnクラスのpaddingと異なる。統一推奨 */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover:not(:disabled) {
    background-color: var(--primary-color);
}

/* 4.2 ボタンバリエーション */
.btn-primary {
    background-color: var(--secondary-color);
    /* NOTE: primary-colorではなくsecondary-colorが指定されている */
    color: white;
    border-color: var(--secondary-color);
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* 4.3 送信ボタン特有スタイル (contact.ejsなどで使用) */
.submit-button {
    /* .btnクラスと共通する部分が多い。可能であれば.btn .btn-primaryなどで代替できないか検討 */
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.1s;
    display: inline-flex;
    /* ローディングスピナーを中央揃えするため */
    align-items: center;
    justify-content: center;
}

.submit-button:hover:not(:disabled) {
    background-color: var(--primary-color);
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.5);
    /* var(--focus-outline) 関連の色 */
}

.submit-button:active:not(:disabled) {
    transform: translateY(1px);
    /* クリック時の沈み込み効果 */
}

/* ============================================================================
 * 5. UIコンポーネント - アラート, 通知, リンク, バッジ, スピナー
 * ============================================================================ */

/* 5.1 アラートとフィードバックメッセージ */
/* 汎用アラート (Bootstrapライク) */
.alert {
    padding: 15px;
    /* Bootstrap .alert の padding は 0.75rem 1.25rem */
    margin-bottom: 20px;
    /* Bootstrap .alert の margin-bottom は 1rem */
    border-radius: 4px;
    /* Bootstrap .alert の border-radius は 0.25rem */
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    /* Bootstrap .alert に倣って追加 */
    position: relative;
    /* Bootstrap .alert に倣って追加 */
}

.alert::before {
    /* アイコン表示用 */
    margin-right: 10px;
    font-size: 1.2em;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
    /* Bootstrap .alert-success に倣って追加 */
}

.alert-success::before {
    content: "✓";
    /* チェックマーク */
    color: var(--success-color);
}

.alert-error,
/* .alert-danger との統一を検討 */
.alert-danger {
    /* Bootstrap標準クラス名 */
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
    /* Bootstrap .alert-danger に倣って追加 */
}

.alert-error::before,
.alert-danger::before {
    content: "✕";
    /* バツ印 */
    color: var(--error-color);
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* .alert-info::before { content: "ℹ️"; } など、アイコンを追加することも可能 */

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* .alert-warning::before { content: "⚠️"; } など、アイコンを追加することも可能 */


/* アップロード失敗時のエラーメッセージ (analysis.ejs) */
.error-message {
    color: #d32f2f;
    /* var(--error-color) と近いが微妙に異なる */
    background-color: #ffebee;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    border-left: 4px solid #d32f2f;
    font-weight: bold;
}

.error-details {
    display: block;
    /* pタグなどで囲むことを想定 */
    margin-top: 8px;
    font-size: 0.9em;
    font-weight: normal;
    color: #888;
    /* エラーメッセージ本体より控えめな色 */
    background-color: rgba(211, 47, 47, 0.05);
    /* エラー色の薄い背景 */
    padding: 8px;
    border-radius: 4px;
    white-space: pre-wrap;
    /* 改行やスペースを保持 */
    overflow-wrap: break-word;
    /* 長い文字列を折り返す */
}

/* 状態表示 (analysis.ejs でアップロード状態やエラー表示に使用) */
.status {
    margin: 10px 0;
    padding: 10px;
    border-radius: 4px;
    background-color: var(--bg-light);
    /* 通常時の背景色 */
    /* NOTE: エラー時は .alert-error などで上書きされることを想定 */
}

/* 5.2 特殊コンテナ / 通知ボックス */
/* 注意/警告ボックス (contact.ejs の免責事項表示などに使用) */
.note-box {
    background-color: #fcf8e3;
    /* 黄色系の背景 */
    border-left: 4px solid var(--warning-color);
    padding: 15px;
    margin-top: 20px;
}

/* 利用規約ページの警告スタイル (terms-of-use.ejs) */
.terms-warning {
    background-color: #fcf8e3;
    border-left: 4px solid var(--warning-color);
    padding: 15px;
    margin-bottom: 20px;
}

/* 利用規約ページの免責事項スタイル (terms-of-use.ejs) */
.terms-disclaimer {
    background-color: #f2dede;
    /* 赤色系の背景 */
    border-left: 4px solid #d9534f;
    /* var(--error-color) と近いが微妙に異なる */
    padding: 15px;
    margin-bottom: 20px;
}

/* データ警告 (圧縮DICOM非対応など、analysis.ejs で使用) */
.data-warning {
    background-color: #fff4f4;
    /* 薄い赤系の背景 */
    border-left: 4px solid #ff3333;
    /* 明るい赤 */
    color: #333;
    /* テキストカラーは暗め */
    padding: 12px 15px 12px 50px;
    /* 左側にアイコン用のスペース */
    margin: 15px 0;
    border-radius: 4px;
    font-weight: 500;
    position: relative;
    /* ::before の配置基準 */
}

.data-warning strong {
    color: #cc0000;
    /* 強調テキストは濃い赤 */
    font-weight: 700;
}

.data-warning::before {
    content: "⚠️";
    /* 警告アイコン */
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* 5.3 ページ内リンクスタイル */
/* 参考文献リンク (analysis.ejs の参考文献セクションで使用) */
.references-section-link {
    text-decoration: none;
    /* colorは親要素から継承。必要であれば指定 */
}

.references-section-link:hover {
    text-decoration: underline;
}

/* 利用規約ページ内のリンクスタイル (terms-of-use.ejs) */
.terms-content a {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: none;
}

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

/* 5.4 バッジ (Bootstrapライク) */
/* adminページなどで使用 */
.badge {
    display: inline-block;
    /* 中央揃えのため block or inline-block が必要 */
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    /* テキストサイズを少し小さく */
    font-weight: 700;
    line-height: 1;
    /* テキストの高さを行の高さに合わせる */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    /* 他のテキストとの位置合わせ */
    border-radius: 0.25rem;
}

/* バッジの背景色ユーティリティ */
.bg-success {
    background-color: var(--success-color) !important;
    /* Bootstrap互換 */
    color: white;
}

.bg-warning {
    background-color: var(--warning-color) !important;
    /* Bootstrap互換 */
    color: black;
    /* 黄色背景なので黒文字の方が見やすい */
}

.bg-danger {
    background-color: var(--error-color) !important;
    /* Bootstrap互換 */
    color: white;
}

.bg-primary {
    background-color: var(--accent-color) !important;
    /* Bootstrap互換 */
    color: white;
}

.bg-info {
    background-color: var(--secondary-color) !important;
    /* Bootstrap互換 */
    color: white;
}

.bg-secondary {
    background-color: #6c757d !important;
    /* Bootstrap互換 */
    color: white;
}

/* 5.5 ブレッドクラム (パンくずリスト) (Bootstrapライク) */
/* adminページなどで使用 */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    /* 明るいグレー */
    border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    /* 区切り文字をインラインブロック要素に */
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #6c757d;
    /* 区切り文字の色 */
    content: "/";
    /* 区切り文字 */
}

/* TODO(確認): .breadcrumb-item のスタイルも必要に応じて定義 (例: aタグの色など) */

/* 5.6 ローディングスピナー */
/* 送信ボタン内などで使用 */
.loading-spinner {
    display: inline-block;
    width: 1em;
    /* フォントサイズに依存したサイズ */
    height: 1em;
    border: 0.2em solid rgba(255, 255, 255, 0.3);
    /* 薄いボーダー */
    border-radius: 50%;
    /* 円形 */
    border-top-color: white;
    /* 回転部分の色 */
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5em;
    /* テキストとの間隔 */
    vertical-align: middle;
    /* テキストと中央揃え */
}

/* 汎用スピナー (Bootstrapライク) */
/* adminページなどで使用 */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    /* やや下寄りに配置 */
    border: 0.25em solid currentColor;
    /* 現在のテキストカラーを使用 */
    border-right-color: transparent;
    /* 一部を透明にして回転を表現 */
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

/* ============================================================================
 * 6. ページ/セクション特有スタイル
 * ============================================================================ */

/* 6.1 全ページ共通セクションコンテナ */
/* 各ページの主要コンテンツブロックに使用 */
.intro-section,
.upload-section,
.contact-section,
.additional-info-section,
.references-section,
.terms-section {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* 6.2 analysis.ejs 関連 */
/* データ情報表示 (ファイル名など) */
.data-info {
    text-align: left !important;
    /* 強制左揃え */
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* 6.3 contact.ejs 関連 */
/* お問い合わせフォーム全体 */
.contact-form {
    margin-top: 20px;
}

/* バリデーションエラーメッセージ (フォームグループ内で使用) */
.validation-error {
    color: var(--error-color);
    font-size: 0.85rem;
    margin-top: 5px;
    min-height: 1.2em;
    /* エラーメッセージがない場合でもレイアウトが崩れないように高さを確保 */
}

/* 無効な入力フィールドのスタイル (バリデーションエラー時) */
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: var(--error-color);
    background-color: rgba(220, 53, 69, 0.05);
    /* エラー色の薄い背景 */
}

/* 6.4 privacy-policy.ejs 関連 */
/* クッキー情報テーブル */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.cookie-table th,
.cookie-table td {
    padding: 10px;
    border: 1px solid #ddd;
    /* 薄いグレーの罫線 */
    text-align: left;
}

.cookie-table th {
    background-color: var(--bg-light);
    /* テーブルヘッダーの背景色 */
    font-weight: bold;
}

.cookie-table tr:nth-child(even) {
    background-color: #f9f9f9;
    /* 偶数行の背景色 (ストライプ) */
}

/* 6.5 ユーザー認証関連 */
/* ログインページなどの補足情報 */
.login-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #6c757d;
    /* やや薄いグレー */
}

/* NOTE: ログイン/登録ページのコンテナ幅調整はセクション2.3に記載 */

/* 6.6 管理者ページ関連 */
/* 6.6.1 プロフィール情報 (admin/profile.ejs など) */
.profile-info {
    margin-bottom: 20px;
}

.form-control-static {
    /* 表示専用のフォーム風要素 */
    padding: 8px 12px;
    background-color: #f8f9fa;
    /* var(--bg-light) と同じ */
    border-radius: 4px;
    margin-top: 5px;
    border: 1px solid #e9ecef;
}

/* 6.6.2 ユーザー一覧ページ (admin/users.ejs) */
/* ユーザー一覧ページのコンテナは全幅に近くする */
body.admin-page.users-list-page .container,
/* より具体的なセレクタ */
body.users-list-page .container,
/* bodyにクラスが付与される場合 */
#user-list .container {
    /* #user-list要素がコンテナの役割を持つ場合 */
    max-width: 100%;
    padding: 0 10px;
    /* 左右の最小限のパディング */
    margin: 0;
}

/* 他の管理画面 (例: トークン管理) では通常のコンテナスタイルを維持するためのリセット */
/* (セクション2.3の.login-pageなどと同様の意図) */
body.token-management-page .container,
body.admin-login-page .container {
    /* TODO(確認): admin-login-pageクラスが実際に使われているか */
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ユーザー一覧テーブルのスタイル調整 */
/* .table-responsive table はセクション2.6で基本定義済み */
/* ここではユーザー一覧テーブルに特化した調整 */
.users-list-page .table th,
/* 親要素のクラスで特定 */
.users-list-page .table td {
    padding: 12px 15px;
    /* やや広めのパディング */
}

.users-list-page .table tbody tr {
    height: 50px;
    /* 行の高さをやや広めに */
}

/* 特定の列のスタイル */
.users-list-page .table th:nth-child(1),
/* ID列 */
.users-list-page .table td:nth-child(1) {
    min-width: 50px;
}

.users-list-page .table th:nth-child(4),
/* ロール列 */
.users-list-page .table td:nth-child(4) {
    min-width: 100px;
    text-align: center;
    vertical-align: middle;
}

.users-list-page .table th:nth-child(5),
/* 日付関連列 */
.users-list-page .table td:nth-child(5),
.users-list-page .table th:nth-child(6),
.users-list-page .table td:nth-child(6),
.users-list-page .table th:nth-child(7),
.users-list-page .table td:nth-child(7) {
    min-width: 120px;
}

.users-list-page .table th:last-child,
/* 操作ボタン列 */
.users-list-page .table td:last-child {
    min-width: 220px;
    /* ボタン数に応じて調整 */
}

/* ユーザー一覧内のバッジ表示調整 */
.users-list-page .badge {
    /* padding, font-size は .badge 共通スタイルで定義済み */
    margin: 0 auto;
    /* text-align:center の親要素内で中央揃え */
}

/* ============================================================================
 * 6.6.3 無効ユーザー表示スタイル (2025/07/01追加)
 * ============================================================================ */
/* 無効ユーザー（table-secondaryクラス）のスタイルを強化 */
.users-list-page .table-secondary,
.card .table .table-secondary {
    background-color: #f8f9fa !important;
    opacity: 0.7;
    color: #6c757d !important;
}

.users-list-page .table-secondary td,
.card .table .table-secondary td {
    color: #6c757d !important;
}

/* ホバー効果も薄くする */
.users-list-page .table-secondary:hover,
.card .table .table-secondary:hover {
    background-color: #e9ecef !important;
}

/* 無効ユーザーのバッジも薄くする */
.users-list-page .table-secondary .badge,
.card .table .table-secondary .badge {
    opacity: 0.8;
}

/* ユーザー削除確認モーダル内の特定要素 */
/* TODO(確認): このIDがモーダル内で実際に使われているか */
#confirmDelete {
    background-color: var(--error-color);
    font-weight: bold;
}

#deleteUserName {
    font-weight: bold;
    color: var(--error-color);
}

/* 6.7 ヘッダー内ユーザーメニュー と プロファイルリンク */
/* 6.7.1 ドロップダウン形式のユーザーメニュー */
.user-menu {
    position: absolute;
    top: 10px;
    right: 20px;
    display: inline-block;
    /* dropの基準とするため */
    z-index: 100;
    /* 他の要素より手前に表示 */
}

.user-menu-link {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    /* 半透明の背景 */
}

.user-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-menu-dropdown {
    display: none;
    /* 通常は非表示、ホバーで表示 */
    position: absolute;
    right: 0;
    /* user-menuの右端に合わせる */
    top: 100%;
    /* user-menu-linkのすぐ下に表示 */
    min-width: 200px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    /* リンクとの間に少し隙間 */
    z-index: 101;
    /* さらに手前に */
}

.user-menu:hover .user-menu-dropdown {
    display: block;
}

.user-menu-dropdown a,
.user-menu-dropdown .logout-button {
    /* ログアウトボタンも同様のスタイル */
    display: block;
    padding: 10px 15px;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
}

.user-menu-dropdown a:hover,
.user-menu-dropdown .logout-button:hover {
    background-color: #f5f5f5;
    /* ホバー時の背景色 */
}

.logout-button {
    /* form内のボタンなのでデフォルトスタイルをリセット */
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    /* button要素のフォントを継承 */
    font-size: inherit;
    /* button要素のフォントサイズを継承 */
}

/* ============================================================================
 * ユーザー名表示の可変幅対応修正
 * ============================================================================ */

/* 6.7.2 ユーザープロファイルリンクとログアウトボタンの修正版 */
.user-profile-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* 端末幅に応じて 180-360 px の範囲で伸縮 */
    max-width: clamp(120px, 30%, 240px);
    flex-shrink: 0;
    z-index: 50;
}

.profile-link {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px 0 0 4px;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s;
    /* flexアイテムとして最小幅を確保 */
    min-width: 0;
    flex: 0 1 auto;
    position: relative;
}

.profile-link:hover {
    background-color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
}

.user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
    /* アイコンは縮小しない */
}

/* ユーザー名の可変幅対応 */
.user-name {
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(18ch, 30%, 320px);
    /* レビュー推奨値 */
    flex: 0 1 auto;
    cursor: pointer;
    /* ツールチップがあることを示す */
}

.logout-form {
    margin: 0;
    display: flex;
    flex-shrink: 0;
    /* ログアウトボタンは縮小しない */
}

.logout-button-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 6px 10px;
    height: 100%;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    /* ボタンは縮小しない */
}

.logout-button-header:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.logout-button-header svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================================================
 * レスポンシブデザイン対応の修正
 * ============================================================================ */

/* タブレットサイズ以下 (768px) - 1109行目付近 */
@media (max-width: 768px) {
    .user-name {
        max-width: clamp(5ch, 20vw, 100px);
        /* ← さらに短く */
        font-size: 0.85rem;
    }
}

/* 中型スマートフォンサイズ以下 (576px) - 1116行目付近 */
@media (max-width: 576px) {
    .user-name {
        max-width: clamp(4ch, 15vw, 80px);
        /* ← より短く */
        font-size: 0.8rem;
    }
}

/* 小型スマートフォンサイズ以下 (375px) - 1123行目付近 */
@media (max-width: 375px) {
    .user-profile-link {
        max-width: clamp(100px, 45%, 200px);
        /* ← 全体幅も調整 */
    }

    .user-name {
        max-width: clamp(4ch, 12vw, 60px);
        /* ← 最小限の表示 */
        font-size: 0.75rem;
    }
}

/* ============================================================================
 * 超長いユーザー名への追加対応（オプション）
 * ============================================================================ */

/* ユーザー名が非常に長い場合のツールチップ表示（CSS-onlyの簡易版） */
.user-name[data-fullname]:hover::after {
    content: attr(data-fullname);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

/* ツールチップの三角形（矢印） */
.user-name[data-fullname]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1001;
    pointer-events: none;
}

/* 6.8 クッキーバナー */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    /* var(--text-dark) と同じ */
    color: white;
    padding: 15px 0;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2);
    /* 上方向への影 */
    z-index: 1000;
    /* 最前面に表示 */
    display: none;
    /* JavaScriptで表示制御 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* 上部に薄い境界線 */
}

.cookie-notice-content {
    max-width: 1200px;
    /* .container より広い幅 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    /* 左右のパディング */
    flex-wrap: wrap;
    /* モバイルで折り返し */
}

.cookie-notice p {
    margin: 0;
    padding: 8px 0;
    font-size: 1rem;
    flex: 1;
    /* テキスト部分が可能な限り幅を取る */
    min-width: 70%;
    /* モバイルでの最小幅 */
    margin-right: 20px;
    /* ボタンとの間隔 */
}

.cookie-notice a {
    color: #4dabf7;
    /* 明るい青 */
    text-decoration: underline;
}

.cookie-notice a:hover {
    color: #74c0fc;
}

#cookie-accept {
    /* 同意ボタン */
    background-color: #4285f4;
    /* Googleブルー風 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    min-width: 140px;
    /* ボタンの最小幅 */
    text-align: center;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#cookie-accept:hover {
    background-color: #1a73e8;
    /* ホバー時やや濃く */
}

#cookie-accept:focus {
    outline: 2px solid #ffffff;
    /* フォーカス時の白い輪郭 */
    outline-offset: 2px;
}

/* ============================================================================
 * 7. 状態スタイル - 無効化された要素など
 * ============================================================================ */

/* 7.1 無効化されたフォーム要素・ボタン */
/* 無効化されたファイル選択ボタンのラベル */
.file-input-container input[type="file"][disabled]+.file-label {
    opacity: 0.5;
    pointer-events: none;
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    border-color: #cccccc;
}

/* 無効化された汎用ラベル (セレクトボックス横など) */
.disabled-label {
    opacity: 0.5 !important;
    pointer-events: none !important;
    background-color: #cccccc !important;
    /* file-labelに合わせる */
    color: #666666 !important;
    cursor: not-allowed !important;
    /* NOTE: .disabled-label が .file-label と同じ要素に適用される場合、
       paddingやborder-radiusも統一する必要があるかもしれない。
       現状は主に<label>要素自体に適用されることを想定。 */
}

/* 無効化された汎用ボタン */
button:disabled,
.btn:disabled,
/* .btnクラスにも適用 */
.submit-button:disabled {
    /* .submit-buttonにも適用 */
    background-color: #ccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    /* 少し透明度を上げる */
    border-color: #cccccc !important;
    /* ボーダーもグレーアウト */
    transform: none !important;
    /* :active時のtransformを無効化 */
}

/* ファイル選択コンテナ全体もカーソル変更 (包含するinputがdisabledの場合) */
.file-input-container:has(input[type="file"][disabled]) {
    cursor: not-allowed !important;
}

/* コンテナ内の全要素もカーソル変更 (より広範に影響) */
.file-input-container:has(input[type="file"][disabled]) * {
    cursor: not-allowed !important;
}

/* 7.2 PETアップロードボタン無効化時の特殊スタイル */
#petInput[disabled]+.file-label {
    cursor: not-allowed !important;
    /* 再度明示 */
    position: relative;
    /* ::before の配置基準 */
}

/* PETボタン無効化時の禁止アイコンオーバーレイ (オプション) */
#petInput[disabled]+.file-label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666666' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    /* アイコンサイズ調整 */
    opacity: 0.2;
    /* やや薄めに表示 */
    pointer-events: none;
    /* アイコン自体はクリックできないように */
}

/* ============================================================================
 * 8. ユーティリティクラス - マージン、テキスト色など (Bootstrapライク)
 * ============================================================================ */
.me-2 {
    margin-right: 0.5rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.d-none {
    display: none !important;
}

.text-muted {
    color: #6c757d !important;
}

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

/* --error-colorを使用 */
.text-white {
    color: white !important;
}

/* ============================================================================
 * 9. アクセシビリティ
 * ============================================================================ */

/* 9.1 スクリーンリーダー用 (視覚的に隠すが読み上げは可能) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    /* 画面外に押し出す */
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    /* 折り返し防止 */
    border-width: 0;
    /* ボーダーなし */
}

/* 9.2 高コントラストモード対応 (Windowsなど) */
@media (forced-colors: active) {

    .submit-button:focus,
    .form-control:focus,
    /* .form-controlにも適用 */
    .form-group input:focus,
    .form-group textarea:focus {
        outline: 2px solid CanvasText;
        /* OS標準のフォーカス色を使用 */
    }

    /* TODO(確認): 他のフォーカス可能な要素にも同様の対応が必要か検討 */
}

/* ============================================================================
 * 10. レスポンシブデザイン - メディアクエリ
 * ============================================================================ */

/* 10.1 タブレットサイズ以下 (768px) */
@media (max-width: 768px) {
    .header {
        padding: 1.5rem 0;
    }

    h1 {
        font-size: 2rem;
    }

    .intro-section,
    .upload-section,
    .contact-section,
    .additional-info-section,
    .references-section,
    .terms-section {
        padding: 1.5rem;
    }

    .submit-button {
        width: 100%;
        /* 送信ボタンをフル幅に */
    }


    /* 管理者ページ ユーザー一覧テーブルのレスポンシブ */
    /* .table-responsive は overflow-x: auto を持つので、
       テーブル自体がはみ出す場合は横スクロールする。
       ここではさらにボタンの表示などを調整。 */
    .users-list-page .table-responsive {
        /* より具体的に */
        overflow-x: auto;
        /* 念のため再指定 */
    }

    .users-list-page .btn-group .btn {
        /* ボタン群内のボタン */
        padding: 0.25rem 0.5rem;
        /* パディングを小さく */
        font-size: 0.875rem;
        /* フォントサイズを小さく */
    }
}

/* 10.2 中型スマートフォンサイズ以下 (576px) */
@media (max-width: 576px) {
    .header h1 {
        /* h1がheader内にある想定 */
        font-size: 1.8rem;
    }

    .upload-section,
    .intro-section,
    .contact-section {
        padding: 1rem;
        /* セクションのパディングをさらに縮小 */
    }

    /* iOSでのフォーム入力時ズーム防止のためフォントサイズを16px以上に */
    /* 詳細度を上げてimportantを排除 */
    html body .form-control,
    html body .form-group input,
    html body .form-group textarea,
    html body select {
        font-size: 16px;
    }

    /* データ警告ボックスの調整 */
    .data-warning {
        padding: 10px 10px 10px 45px;
        /* アイコン用スペースを維持しつつパディング調整 */
        font-size: 0.9rem;
    }

    .data-warning::before {
        left: 15px;
        font-size: 16px;
    }

    /* ヘッダー内ユーザープロファイルリンクの更なる調整 */
    .profile-link {
        padding: 4px 8px;
    }

    .user-name {
        max-width: 120px;
        font-size: 0.8rem;
    }

    /* 管理者ページ ユーザー一覧のボタン群を縦積みに */
    .users-list-page .btn-group {
        flex-direction: column;
        align-items: stretch;
        /* ボタン幅をコンテナに合わせる */
    }

    .users-list-page .btn-group .btn {
        margin-bottom: 0.25rem;
        width: 100%;
        /* 各ボタンをフル幅に */
    }

    .users-list-page .btn-group .btn:last-child {
        margin-bottom: 0;
    }
}

/* 10.3 小型スマートフォンサイズ以下 (375px) */
@media (max-width: 375px) {
    .header h1 {
        font-size: 1.5rem;
    }

    /* ファイル選択ラベルやボタンをフル幅に */
    .file-label,
    button,
    /* 汎用button */
    .btn {
        /* .btnクラス */
        width: 100%;
        margin-bottom: 0.5rem;
        /* 連続する場合の間隔 */
        text-align: center;
    }

    .file-label:last-child,
    button:last-child,
    .btn:last-child {
        margin-bottom: 0;
    }

    .form-actions button,
    /* フォームアクション内のボタンも同様 */
    .form-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-actions button:last-child,
    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}

/* 10.4 クッキーバナーのレスポンシブ */
@media (max-width: 768px) {

    /* 768px以下でレイアウト変更 */
    .cookie-notice-content {
        flex-direction: column;
        /* 縦積みに変更 */
        align-items: flex-start;
        /* 左揃えに */
    }

    .cookie-notice p {
        margin-right: 0;
        /* 右マージン除去 */
        margin-bottom: 12px;
        /* ボタンとの間隔 */
        min-width: 100%;
        /* テキストをフル幅に */
    }

    #cookie-accept {
        align-self: flex-end;
        /* 同意ボタンを右端に配置 */
        width: auto;
        /* フル幅ではなくコンテンツに合わせる */
        min-width: 140px;
        /* 最小幅は維持 */
    }
}

/* 10.5 コンテナのパディング調整 (広めの画面用) */
/* (ユーザー一覧ページでの .container max-width:100% 指定とは別に、
   標準コンテナのパディングを画面幅に応じて調整する意図) */
/* TODO(確認): このメディアクエリが users-list-page のコンテナ幅指定と
   意図せず競合しないか確認が必要。
   users-list-page では padding: 0 10px が指定されている。 */
@media (min-width: 576px) {
    .container:not(.users-list-page .container):not(#user-list .container) {
        /* users-list-page以外 */
        padding: 0 15px;
    }
}

@media (min-width: 768px) {
    .container:not(.users-list-page .container):not(#user-list .container) {
        padding: 0 20px;
    }
}

@media (min-width: 992px) {
    .container:not(.users-list-page .container):not(#user-list .container) {
        padding: 0 30px;
    }
}


/* ============================================================================
 * 11. アニメーション - @keyframes
 * ============================================================================ */

/* ローディングスピナー用アニメーション */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Bootstrap風スピナー用アニメーション */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
 * 12. エラーページスタイル (error.ejs)
 * ============================================================================ */
.error-container {
    max-width: 600px;
    margin: 40px auto;
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-title {
    color: #d32f2f;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.error-description {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 16px;
}

.error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.back-link {
    display: inline-block;
    color: #1976d2;
    text-decoration: none;
    border: 2px solid #1976d2;
    padding: 12px 24px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 120px;
    font-size: 14px;
}

.back-link:hover {
    background-color: #1976d2;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
    text-decoration: none;
}

.back-link.secondary {
    border-color: #757575;
    color: #757575;
}

.back-link.secondary:hover {
    background-color: #757575;
    color: white;
    box-shadow: 0 4px 8px rgba(117, 117, 117, 0.3);
}

.debug-info {
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    text-align: left;
}

.debug-title {
    color: #ff9800;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.debug-item {
    background: white;
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid #ff9800;
}

.debug-item strong {
    display: block;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.debug-value {
    color: #666;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    word-break: break-all;
}

details {
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

summary {
    background-color: #f1f3f4;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
    transition: background-color 0.2s;
}

summary:hover {
    background-color: #e8eaed;
}

summary:focus {
    outline: 2px solid #4285f4;
    outline-offset: -2px;
}

details[open] summary {
    border-bottom: 1px solid #ddd;
}

.stack-trace {
    background-color: #f8f9fa;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-x: auto;
    margin: 0;
    color: #333;
}

.json-data {
    background-color: #f8f9fa;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-x: auto;
    margin: 0;
    color: #333;
    max-height: 400px;
    overflow-y: auto;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .error-container {
        margin: 20px;
        padding: 30px 20px;
    }

    .error-title {
        font-size: 20px;
    }

    .error-actions {
        flex-direction: column;
        align-items: center;
    }

    .back-link {
        width: 100%;
        max-width: 200px;
    }

    .debug-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .error-container {
        margin: 10px;
        padding: 20px 15px;
    }

    .error-title {
        font-size: 18px;
    }

    .error-description {
        font-size: 14px;
    }
}
/* ============================================================================
 * contact.ejsのEmail注意事項用スタイル (2025/07/03追加)
 * ============================================================================ */

/* Email入力欄下の注意事項スタイル */
.email-note {
    margin-top: 5px;
    color: #666;
    font-size: 0.9em;
    line-height: 1.4;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-left: 3px solid #17a2b8; /* info色 */
    border-radius: 4px;
}

.email-note strong {
    color: #495057; /* やや濃いグレー */
    font-weight: 600;
}

/* ============================================================================
 * VSRAD解析ページ用スタイル (2026/01/18追加)
 * ============================================================================ */

/* 年齢設定コンテナ */
.age-input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.age-input-container label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.age-input-container select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
}

/* 手動年齢入力エリア */
.manual-age-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.manual-age-input.hidden {
    display: none;
}

.manual-age-input label {
    margin-bottom: 0;
    font-weight: 600;
}

.manual-age-input input[type="number"] {
    width: 120px;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.manual-age-input .age-unit {
    color: #666;
    font-size: 14px;
}