/* --- 純粋なCSSでレイアウトを強制指定 --- */

/* 1. 基本設定（スクロール許可） */
html {
    height: 100%;
}
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100%;
    
    /* 画面全体のスクロールを確実に有効化 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* カスタムスクロールバー */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* 2. ヘッダーの強制固定（ここがズレの原因対策） */
#header {
    position: fixed !important; /* 絶対に固定する */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50; /* 最前面 */
    height: 4rem; /* 64px */
    background-color: white;
    /* Tailwindが効かない場合の保険 */
    border-bottom: 1px solid #e5e7eb; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 3. メインエリアの余白 */
main#app {
    /* ヘッダー(4rem)の下に潜り込まないための余白 */
    padding-top: 5rem !important; /* 少し余裕を持たせて5rem */
    padding-bottom: 12rem; /* フッター用余白 */
    width: 100%;
    overflow-x: hidden;
}

/* 4. タブの見た目 */
.tab-active {
    color: #047857;
    background-color: #ecfdf5;
    border-top: 3px solid #059669;
}
.tab-inactive {
    color: #6b7280;
    background-color: transparent;
    border-top: 3px solid transparent; 
}

/* 5. ヘッダーボタン */
.header-action-button {
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.header-action-button.active {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #059669 !important;
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* 6. アコーディオン */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.arrow-down { transform: rotate(0deg); transition: transform 0.3s ease-in-out; }
.arrow-up { transform: rotate(180deg); transition: transform 0.3s ease-in-out; }

/* 編集履歴アコーディオンの余白 */
#filter-popup > div:last-child .accordion-content > div {
    padding-bottom: 8rem;
}

/* 7. その他パーツ */
.readonly-field {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.75rem;
    background-color: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb;
    border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.pagination-button:disabled { opacity: 0.5; cursor: not-allowed; }

.accordion-header.filtered > span::after,
.accordion-tab.filtered > span::after {
    content: ''; display: inline-block; width: 0.5rem; height: 0.5rem;
    background-color: #22c55e; border-radius: 9999px; margin-left: 0.5rem; vertical-align: middle;
}

.event-suggestion-list {
    position: absolute; z-index: 10; width: 100%; margin-top: 0.25rem;
    background-color: white; border: 1px solid #d1d5db; border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); max-height: 10rem; overflow-y: auto;
}
.event-suggestion-item { padding: 0.5rem; font-size: 0.875rem; color: #374151; cursor: pointer; }
.event-suggestion-item:hover { background-color: #f3f4f6; }

@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* 背景設定（操作阻害防止のため pointer-events: none を追加） */
#background-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -20;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    opacity: 0.1; transition: background-image 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none; /* ★重要: これで背景がスクロールを邪魔しなくなります */
}

/* ライフリスト勲章 */
.lifer-medal {
    display: inline-block; width: 1rem; height: 1rem; margin-right: 0.25rem;
    vertical-align: -0.125em; background-color: #f59e0b;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#custom-confirm-modal { z-index: 9999 !important; }
.cropper-container { max-height: 70vh; }