:root {
    --header-height: 60px;
    --footer-height: 65px; /* ボタンが入るので少し高く */
    --primary-color: #f8f9fa;
    --text-color: #333;
    --bg-color: #fff;
    --accent-color: #007bff;
    --border-color: #ddd;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden; 
}

/* ヘッダー */
#app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 100;
}

#header-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    line-height: 1.2;
}

/* ============================
   ヘッダー中央（聖書箇所）の文字色変更
   ============================ */

/* 書名・章番号 */
#header-book-chapter {
    font-size: 16px;
    font-weight: bold;
    color: #333;  /* ★ここを青(#007bff)から黒(#333)に変更 */
    line-height: 1.2;
}

/* （参考）下の翻訳バージョン名はグレーのままでOKですが、
   もしここも黒くしたい場合は color: #555; などにしてください */
#header-translation {
    font-size: 10px;
    color: #888; 
}

.sub-text {
    font-size: 11px;
    color: #666;
}

/* ============================
   ヘッダーのナビゲーションボタン（前章・次章）
   ============================ */
.nav-btn {
    /* ベーススタイル */
    background-color: #fff;       /* 背景色：白 */
    border: 1px solid #ddd;       /* 枠線：薄いグレー */
    border-radius: 20px;          /* 角丸：カプセル型 */
    padding: 6px 12px;            /* 内側の余白（中央より少し小さめに） */
    
    /* フォント・色 */
    color: #333;                  /* ★文字色：黒 */
    font-size: 12px;              /* サイズ：少し控えめに */
    font-weight: bold;
    
    /* 配置・挙動 */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 立体感 */
    transition: all 0.2s ease;
    
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;          /* 折り返し防止 */
}

/* 押した時の動き */
.nav-btn:active {
    background-color: #f0f0f0;
    transform: translateY(1px);
    box-shadow: none;
}

/* メインコンテンツ */
#bible-text-container {
    position: absolute;
    top: var(--header-height);
    bottom: var(--footer-height);
    width: 100%;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.content-text {
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    /* 文字サイズはJSで制御 */
}

/* フッター (5つのボタン) */
#app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background-color: var(--primary-color);
    border-top: 1px solid var(--border-color);
    z-index: 100;
}

/* --- 修正: フッターを4等分に変更 --- */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* ★4から5に変更 */
    height: 100%;
}

/* --- 追加: 左下に浮かぶ独立ボタン --- */
.floating-left-btn {
	position: fixed;
	bottom: 75px;        /* フッター(50-65px)より少し上に浮かせる */
	left: 15px;          /* 左端に配置 */
	z-index: 90;
	
	/* デザイン（devotionのメモボタンと同じ） */
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 30px;  /* 丸くする */
	padding: 8px 15px;    /* 少し横長に */
	color: #555;
	font-size: 0.85rem;
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: transform 0.1s;
}
.floating-left-btn:active {
	transform: scale(0.95);
	background: #f0f0f0;
}
.floating-left-btn .icon-lg {
	font-size: 1.1rem;
}

.footer-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    padding: 5px 0;
	text-decoration: none; /* ← これを追加 */
}

.footer-btn:active {
    background-color: #eee;
}

.footer-btn .icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.footer-btn .label {
    font-size: 10px;
}

/* モーダル共通 */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 200;
    justify-content: center;
    align-items: center;
}
.modal.hidden { display: none; }
.modal:not(.hidden) { display: flex; }

.modal-content {
    background: white;
    width: 90%;
    max-width: 500px;
    max-height: 85%;
    overflow-y: auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.close-modal {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}
.book-section-title {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    background-color: #f8f9fa;
    padding: 5px 10px;
    border-left: 4px solid var(--accent-color);
    font-weight: bold;
}

/* 設定画面用スタイル */
.setting-group {
    margin-bottom: 25px;
}
.setting-group h4 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* スライダー */
.slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
input[type=range] {
    flex-grow: 1;
    margin: 0 15px;
}
.small-a { font-size: 12px; }
.large-a { font-size: 24px; }

/* プルダウン */
.full-width-select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* 教会ID表示 */
.church-id-display {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    border: 1px dashed #007bff;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #333;
}
.copy-hint {
    display: block;
    font-size: 10px;
    color: #007bff;
    margin-top: 5px;
    font-weight: normal;
}

/* ボタン類 */
.secondary-btn {
    background: #e2e6ea;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.primary-btn-sm {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
.logout-btn-block {
    width: 100%;
    padding: 10px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
.full-width-input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 5px;
}

/* リスト表示など（既存） */
.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 15px;
}
.grid-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
/* 汎用的な非表示クラス*/
.hidden {
    display: none !important;
}


/* ============================
   ヘッダータイトルボタンの装飾
   ============================ */
.header-title-btn {
    background-color: #fff;       /* 背景色：白 */
    border: 1px solid #ddd;       /* 枠線：薄いグレー */
    border-radius: 20px;          /* 角丸：カプセル型 */
    padding: 5px 20px;            /* 内側の余白 */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* うっすら影をつけて立体的に */
    transition: all 0.2s ease;    /* アニメーション */
    
    /* 文字色の指定 */
    color: #333;
    font-family: inherit;
}

/* 押した時の動き */
.header-title-btn:active {
    background-color: #f0f0f0;    /* 背景を少し暗く */
    transform: translateY(1px);   /* 少し沈む */
    box-shadow: none;             /* 影を消す */
}

/* 中の文字の調整 */
#header-book-chapter {
    font-size: 16px;
    font-weight: bold;
    color: #007bff; /* 青色にしてリンクっぽく強調（お好みで #333 に） */
    line-height: 1.2;
}

#header-translation {
    font-size: 10px;
    color: #888;
}
/* ============================
   ヘッダーの文字色を強制的に黒にする修正
   ============================ */

/* 1. 左上の「前章」ボタン */
#btn-prev,
.nav-btn {
    color: #333 !important; /* 強制的に黒 */
}

/* 2. 中央の「聖書箇所（創世記 1）」 */
#header-book-chapter {
    color: #333 !important; /* 強制的に黒 */
}

/* 3. 中央のボタン全体 */
.header-title-btn {
    color: #333 !important; /* 強制的に黒 */
}

/* 4. 右上の「次章」ボタン */
#btn-next {
    color: #333 !important; /* 強制的に黒 */
}

/* ============================
   ヘッダーボタンの高さ・配置の統一修正
   ============================ */

/* 1. ヘッダー内のボタン全ての高さを統一 */
#app-header button,
.nav-btn, 
.header-title-btn {
    height: 44px !important;       /* 高さを44pxに強制統一 */
    box-sizing: border-box !important; /* paddingを含めた高さにする */
    
    /* 垂直・水平中央揃え */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 余白の微調整 */
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. 中央のボタンだけは文字を縦に積む */
.header-title-btn {
    flex-direction: column !important; /* 縦並び */
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: auto; /* 幅は文字数に合わせる */
}

/* 3. 左右のボタンは横幅を確保 */
.nav-btn {
    flex-direction: row !important;    /* 横並び */
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* 4. もし中央ボタンを囲むdivが悪さをしないようにリセット */
#header-title-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin: 0;
    padding: 0;
}
.search-bar { display: flex; gap: 5px; margin-bottom: 15px; }
#search-input { flex-grow: 1; padding: 8px; }
#do-search { padding: 8px 15px; background: var(--accent-color); color: white; border: none; border-radius: 4px; }
.search-result-item { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.search-result-key { font-weight: bold; font-size: 0.9em; color: var(--accent-color); margin-bottom: 3px; }