@charset "UTF-8";

/* ダブルタップ拡大・ピンチズーム抑制（全ページ common.css 読込時） */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* =========================================================
   1. ベーススタイル・全体レイアウト
   ========================================================= */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background: #f3f4f6; 
    margin: 0; 
    padding: 0;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); 
    color: #333; 
    line-height: 1.6;
    min-height: 100dvh; 
    display: flex; 
    flex-direction: column; 
    overscroll-behavior-y: none;
    user-select: none;
    -webkit-user-select: none;
}

/* チャットログ・過去ログのテキストのみ選択可能 */
.team-chat-text,
.news-text,
.past-log-page .news-text,
.past-log-page .past-log-system-text {
    user-select: text;
    -webkit-user-select: text;
}
.app-container { 
    padding: 20px; 
    flex: 1; 
    max-width: 480px; 
    margin: 0 auto; 
    width: 100%; 
    box-sizing: border-box; 
}

/* =========================================================
   2. ヘッダー・フッター・タブバー
   ========================================================= */
.header { 
    background: #fff; padding: 10px 15px; display: flex; justify-content: space-between; 
    align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; 
    top: 0; z-index: 2000; box-sizing: border-box; min-height: 60px;
}
.user-info-container { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-name-stack { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.user-premium-badge { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; margin-bottom: 1px; color: #ca8a04; background: none; border: none; padding: 0; box-shadow: none; }
.user-premium-badge[hidden] { display: none !important; }
.user-info { font-weight: bold; font-size: 0.95rem; line-height: 1.2; color: #2563eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.user-money { color: #059669; font-weight: bold; background: #ecfdf5; padding: 2px 8px; border-radius: 10px; font-size: 0.85rem; white-space: nowrap; }
.settings-btn { text-decoration: none; font-size: 1.3rem; color: #6b7280; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f3f4f6; transition: 0.2s; flex-shrink: 0; }
.settings-btn:active { background: #e5e7eb; transform: scale(0.95); }

.back-btn, .back-to-menu, .back-to-thread { text-decoration: none; color: #2563eb; font-size: 1.6rem; flex-shrink: 0; padding: 5px; line-height: 1; }
.back-to-menu.sticky-top { position: sticky; top: 10px; left: 10px; z-index: 2100; display: inline-block; margin: 10px 0 0 12px; padding: 0 10px; color: #333; }
.back-to-menu:active { transform: translateY(1px); }

.tab-bar { 
    position: fixed; bottom: 0; left: 0; width: 100%; height: calc(100px + env(safe-area-inset-bottom, 0px)); 
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: #ffffff; 
    border-top: 1px solid #e5e7eb; display: flex; justify-content: space-around; align-items: center; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 2000; box-sizing: border-box; 
}
.tab-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #6b7280; font-size: 0.75rem; flex: 1; text-align: center; }
.tab-item.active { color: #2563eb; font-weight: bold; }
.tab-icon { font-size: 1.5rem; margin-bottom: 2px; }

.footer-links { width: 100%; max-width: 480px; margin: 20px auto 0; box-sizing: border-box; text-align: center; padding: 30px 20px; font-size: 0.8rem; line-height: 2.2; border-top: 1px solid #dbdbdb; background: #fff; }
.footer-links a { color: #8e8e8e; text-decoration: none; margin: 0 10px; border-bottom: 1px solid #eee; }

/* =========================================================
   3. 共通UI・コンポーネント (カード、ボタン、入力枠)
   ========================================================= */
.section-card, .info-box, .contact-box, .card, .maintenance-card, .member-card, .story-card, .price-box { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; margin-bottom: 20px; }
.section-title { color: #1e293b; font-weight: bold; margin-top: 0; margin-bottom: 15px; font-size: 1.15rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }

.btn { width: 100%; padding: 14px; font-size: 1rem; border-radius: 10px; border: none; font-weight: bold; cursor: pointer; transition: 0.2s; box-sizing: border-box; }
.btn-action { display: block; background: #2563eb; color: white; border: none; padding: 14px; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; width: 100%; text-align: center; text-decoration: none; box-shadow: 0 4px 0 #1d4ed8; transition: transform 0.1s, box-shadow 0.1s; box-sizing: border-box; margin-top: 15px; }
.btn-action:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0px 0 #1d4ed8; }
.btn-action:disabled { background: #9ca3af; box-shadow: 0 4px 0 #6b7280; cursor: not-allowed; opacity: 0.8; }
.btn-line { display: block; background: #06C755; color: white; text-decoration: none; padding: 14px 15px; border-radius: 10px; font-weight: bold; font-size: 1.05rem; text-align: center; box-shadow: 0 4px 0 #047833; transition: transform 0.1s, box-shadow 0.1s; box-sizing: border-box; }
.btn-line:active { box-shadow: 0 0px 0 #047833; transform: translateY(4px); }
.btn-save { background: #2563eb; color: white; box-shadow: 0 4px 0 #1d4ed8; }
.btn-save:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #1d4ed8; }
.btn-save:disabled { background: #9ca3af; box-shadow: 0 4px 0 #6b7280; cursor: not-allowed; opacity: 0.8; }
.btn-join { background: #059669; color: white; box-shadow: 0 4px 0 #047833; margin-bottom: 12px; display: none; }
.btn-join:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #047833; }
.btn-join:disabled { background: #d1d5db; color: #6b7280; box-shadow: 0 4px 0 #9ca3af; cursor: not-allowed; opacity: 1; }
.btn-leave { background: #fff; color: #ef4444; border: 2px solid #ef4444; margin-bottom: 12px; display: none; }
.btn-leave:disabled { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; opacity: 1; }

.input-field, .input-group input, .team-search-input, .donate-input { width: 100%; padding: 14px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 1rem; box-sizing: border-box; margin-bottom: 15px; background: #fff; font-family: inherit; }
.input-field:focus, .input-group input:focus, .team-search-input:focus, .donate-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.input-group { display: flex; gap: 10px; margin-bottom: 25px; }
.input-group input { margin-bottom: 0; }
.input-group input:disabled { background: #f9fafb; color: #9ca3af; }
.input-group .btn { width: auto; padding: 0 20px; white-space: nowrap; margin: 0; }

.guest-cta-box { background: #f0fdf4; border: 2px solid #bbf7d0; padding: 18px 15px; border-radius: 12px; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.guest-cta-text { color: #15803d; font-weight: bold; font-size: 0.95rem; margin-top: 0; margin-bottom: 15px; line-height: 1.5; }
.btn-guest-login { display: block; background: #06C755; color: white; text-decoration: none; padding: 14px 15px; border-radius: 10px; font-weight: bold; font-size: 1.05rem; box-shadow: 0 4px 0 #047833; transition: 0.2s; }
.btn-guest-login:active { box-shadow: 0 0px 0 #047833; transform: translateY(4px); }
.note { font-size: 0.85rem; font-weight: bold; margin-top: 5px; margin-bottom: 20px; text-align: center; }

/* ポップアップ・モーダル */
.line-popup-overlay, .bonus-popup-overlay, .donate-modal-overlay, #team-list-modal, #team-info-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 3000;
    display: none; justify-content: center; align-items: center;
    padding: 20px; box-sizing: border-box;
}
.line-popup-content, .bonus-popup-content, .donate-modal, .app-modal-panel {
    background: #fff; border-radius: 16px; padding: 25px 20px;
    width: 100%; max-width: 400px; text-align: center; position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: popupFadeIn 0.3s ease-out; box-sizing: border-box;
}
/* チーム選択モーダル（Bootstrap .modal-content との衝突回避・一覧スクロール） */
#team-list-modal .app-modal-panel {
    max-height: calc(100dvh - 40px);
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 1.8rem; cursor: pointer; color: #999; font-weight: bold; line-height: 1; }
@keyframes popupFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* モーダル専用パーツ */
.line-popup-title { font-size: 1.2rem; font-weight: bold; color: #111827; margin-top: 0; margin-bottom: 15px; line-height: 1.4; }
.line-popup-desc { font-size: 0.95rem; color: #4b5563; margin-bottom: 25px; line-height: 1.5; }
.line-popup-btn-add { display: block; background: #06C755; color: white; text-decoration: none; padding: 14px 15px; border-radius: 10px; font-weight: bold; font-size: 1.1rem; box-shadow: 0 4px 0 #047833; margin-bottom: 15px; transition: 0.2s; }
.line-popup-btn-add:active { box-shadow: 0 0px 0 #047833; transform: translateY(4px); }
.line-popup-btn-dismiss { background: none; border: none; color: #6b7280; font-size: 0.9rem; text-decoration: underline; cursor: pointer; padding: 5px; }
.bonus-popup-title { font-size: 1.2rem; font-weight: 800; color: #111827; margin: 0 0 10px; }
.bonus-popup-desc { font-size: 0.95rem; color: #374151; margin: 0 0 16px; line-height: 1.6; white-space: pre-line; text-align: left; }
.bonus-popup-btn { border: none; border-radius: 10px; background: #2563eb; color: #fff; font-weight: 700; padding: 10px 16px; cursor: pointer; }

/* =========================================================
   4. ホーム・メニュー画面 (menu.html)
   ========================================================= */
.menu-container { flex: 1; padding: 20px; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.season-banner { display: flex; align-items: center; justify-content: center; gap: 8px; background: #ffffff; color: #0369a1; padding: 15px; border-radius: 12px; font-weight: 900; font-size: 1.15rem; line-height: 1.5; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15), 0 4px 0 #38bdf8; margin-bottom: 10px; text-align: center; transition: 0.2s; border: 3px solid #38bdf8; box-sizing: border-box; }
.season-banner-main { display: inline; color: #0369a1; white-space: nowrap; }
.season-banner-sub { display: inline; font-size: 0.95rem; color: #0284c7; white-space: nowrap; }
.book-list-title { font-size: 1.15rem; font-weight: bold; color: #111827; margin: 0 0 6px 0; text-align: center; }
.book-list-subtitle { font-size: 0.9rem; color: #6b7280; margin: 0 0 16px 0; text-align: center; }
.book-maintenance-banner { text-align: center; padding: 22px 16px; margin: 0 0 16px 0; background: #f3f4f6; border: 2px dashed #9ca3af; border-radius: 12px; color: #374151; font-weight: 700; font-size: 1.05rem; }

.book-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 0; }
.book-list-last-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.book-item { position: relative; }
#book-list .book-btn:not(.book-switch) { font-size: 0.95rem; padding: 11px 10px 9px; min-height: 56px; border-radius: 10px; }
#book-list .book-btn-mastery { font-size: 0.68rem; padding: 3px 7px; margin-top: 4px; }
.book-completed-gold { box-shadow: 0 0 15px rgba(234, 179, 8, 0.8), inset 0 0 20px rgba(234, 179, 8, 0.5) !important; border: 3px solid #eab308 !important; animation: goldShine 2s infinite alternate; }
@keyframes goldShine { 0% { box-shadow: 0 0 10px rgba(234, 179, 8, 0.6), inset 0 0 10px rgba(234, 179, 8, 0.3); } 100% { box-shadow: 0 0 25px rgba(234, 179, 8, 1), inset 0 0 30px rgba(234, 179, 8, 0.6); transform: scale(1.02); } }
.lap-badge { position: absolute; top: -4px; right: 4px; background: #eab308; color: white; font-weight: 900; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; }

.book-btn { width: 100%; border: none; border-radius: 12px; color: #ffffff; font-weight: bold; font-size: 0.95rem; padding: 11px 10px 10px; text-align: center; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; box-sizing: border-box; }
.book-btn:active { transform: translateY(3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
.book-btn-title { display: block; }
.book-btn-mastery { margin-top: 5px; display: inline-block; background-color: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 1px 7px; font-size: 0.62rem; font-weight: 600; color: #ffffff; letter-spacing: 0.01em; }
.book-btn.leap { background: #38bdf8; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #0369a1; }
.book-btn.target { background: #f59e0b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #92400e; }
.book-btn.system { background: #10b981; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #065f46; }
.book-btn.teppeki { background: #581c87; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #3b0764; }
.book-btn.database { background: #4c6cb3; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #2a4178; }
.book-btn.kotan { background: #b45309; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #5b2d0c; }
.book-btn.eee { background: #facc15; color: #422006; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #ca8a04; }
.book-btn.eee .book-btn-mastery { background-color: rgba(255, 255, 255, 0.35); color: #422006; }
.book-btn.sokujuku { background: #0d9488; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #115e59; }
.book-btn.sokutan { background: #0891b2; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #0e7490; }
.book-btn.tanjugoex { background: #a78bfa; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #7c3aed; }
#book-list .book-btn.book-switch {
    min-height: 56px;
    padding: 11px 10px 9px;
    background: #ffffff;
    color: #2563eb;
    border: 2px dashed #93c5fd;
    box-shadow: 0 3px 0 #bfdbfe;
    gap: 4px;
}
#book-list .book-btn.book-switch:active {
    box-shadow: 0 0 0 #bfdbfe !important;
}
#book-list .book-switch-icon {
    font-size: 1.2rem;
    line-height: 1;
}
#book-list .book-switch-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e40af;
}
.book-switch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(15, 23, 42, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.book-switch-overlay.show { display: flex; }
.book-switch-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    max-height: min(82dvh, 600px);
    overflow: hidden;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: popupFadeIn 0.3s ease-out;
    box-sizing: border-box;
}
.book-switch-close { top: 8px; right: 12px; }
.book-switch-header { flex-shrink: 0; padding-right: 24px; }
.book-switch-modal h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    text-align: center;
    color: #111827;
}
.book-switch-hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}
.book-switch-slots {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.book-switch-slot {
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    padding: 6px 8px;
    box-sizing: border-box;
}
.book-switch-slot.empty {
    border: 2px dashed #d1d5db;
    color: #9ca3af;
    background: #f9fafb;
}
.book-switch-slot.filled {
    border: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.book-switch-slot.filled.leap { background: #38bdf8; }
.book-switch-slot.filled.target { background: #f59e0b; }
.book-switch-slot.filled.system { background: #10b981; }
.book-switch-slot.filled.teppeki { background: #581c87; }
.book-switch-slot.filled.database { background: #4c6cb3; }
.book-switch-slot.filled.kotan { background: #b45309; }
.book-switch-slot.filled.eee { background: #facc15; color: #422006; }
.book-switch-slot.filled.sokujuku { background: #0d9488; }
.book-switch-slot.filled.sokutan { background: #0891b2; }
.book-switch-slot.filled.tanjugoex { background: #a78bfa; }
.book-switch-status {
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2563eb;
    text-align: center;
    flex-shrink: 0;
}
.book-switch-pick-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 10px;
    padding-right: 2px;
}
.book-switch-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
.book-switch-pick-item:active:not(.disabled) {
    transform: scale(0.98);
}
.book-switch-swatch {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.book-switch-pick-item.leap .book-switch-swatch { background: #38bdf8; }
.book-switch-pick-item.target .book-switch-swatch { background: #f59e0b; }
.book-switch-pick-item.system .book-switch-swatch { background: #10b981; }
.book-switch-pick-item.teppeki .book-switch-swatch { background: #581c87; }
.book-switch-pick-item.database .book-switch-swatch { background: #4c6cb3; }
.book-switch-pick-item.kotan .book-switch-swatch { background: #b45309; }
.book-switch-pick-item.eee .book-switch-swatch { background: #facc15; }
.book-switch-pick-item.sokujuku .book-switch-swatch { background: #0d9488; }
.book-switch-pick-item.sokutan .book-switch-swatch { background: #0891b2; }
.book-switch-pick-item.tanjugoex .book-switch-swatch { background: #a78bfa; }
.book-switch-pick-label {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.book-switch-check {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: #2563eb;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}
.book-switch-pick-item.selected {
    border-color: #2563eb;
    background: #eff6ff;
}
.book-switch-pick-item.selected .book-switch-check {
    opacity: 1;
}
.book-switch-pick-item.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.book-switch-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.book-switch-actions button {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 12px 10px;
    font-weight: bold;
    font-size: 0.98rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.book-switch-cancel {
    background: #e5e7eb;
    color: #374151;
    box-shadow: 0 3px 0 #9ca3af;
}
.book-switch-cancel:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #9ca3af;
}
.book-switch-save {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 3px 0 #1d4ed8;
}
.book-switch-save:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #1d4ed8;
}
.book-switch-save:disabled {
    background: #9ca3af;
    color: #f3f4f6;
    box-shadow: 0 3px 0 #6b7280;
    cursor: not-allowed;
    font-size: 0.88rem;
    line-height: 1.25;
    padding: 11px 8px;
}
@media (max-width: 480px) {
    .book-switch-overlay { padding: 12px; }
    .book-switch-modal {
        border-radius: 12px;
        padding: 14px 12px 12px;
        max-height: min(85dvh, 620px);
    }
    .book-switch-modal h3 { font-size: 1.02rem; }
    .book-switch-pick-item { font-size: 0.95rem; padding: 10px 12px; min-height: 48px; }
    .book-switch-slot { min-height: 40px; font-size: 0.78rem; }
    .book-switch-actions button { font-size: 0.98rem; padding: 12px 10px; }
}

.battle-slot-row { width: 100%; margin: 0 0 14px 0; }
.book-btn.battle-slot { width: 100%; }
.book-btn.battle-slot:disabled { background: #9ca3af !important; color: #e5e7eb !important; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06), 0 3px 0 #6b7280 !important; cursor: not-allowed; pointer-events: none; opacity: 0.92; }
.book-btn.battle-slot:not(:disabled) { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 3px 0 #991b1b; }
.book-btn.battle-slot:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }

.menu-hero { margin-bottom: 25px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.menu-service-name { margin: 0; font-size: 1.65rem; font-weight: 900; color: #0f172a; letter-spacing: 0.02em; line-height: 1.3; }
.btn-official-line { display: inline-flex; align-items: center; gap: 4px; background: #ffffff; color: #0369a1; text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: 0.85rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 3px 10px rgba(56, 189, 248, 0.12), 0 3px 0 #38bdf8; margin: 0; text-align: center; transition: 0.2s; border: 2px solid #38bdf8; box-sizing: border-box; flex-shrink: 0; }
.btn-official-line:active { box-shadow: 0 0px 0 #38bdf8; transform: translateY(3px); }
.btn-feedback-menu { display: block; background: white; color: #4b5563; border: 2px solid #cbd5e1; text-decoration: none; padding: 12px 15px; border-radius: 10px; font-weight: bold; font-size: 1.05rem; line-height: 1.4; box-shadow: 0 4px 0 #94a3b8; margin-bottom: 20px; text-align: center; transition: 0.2s; }
button.btn-feedback-menu { width: 100%; cursor: pointer; font-family: inherit; }
.btn-feedback-menu:active { box-shadow: 0 0px 0 #94a3b8; transform: translateY(4px); }
.btn-developer-support { background: white; color: #e60033; border-color: #ffb3c1; box-shadow: 0 4px 0 #ff8099; }
.btn-developer-support:active { box-shadow: 0 0px 0 #ff8099; }
.btn-developer-support:disabled { opacity: 0.55; box-shadow: none; transform: none; cursor: not-allowed; }

.menu-past-logs { margin-bottom: 20px; }
.menu-past-logs-title { font-weight: bold; color: #475569; font-size: 0.95rem; margin: 0 0 10px; text-align: center; }
.menu-past-log-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.menu-past-log-link { display: inline-block; padding: 10px 16px; background: white; border: 2px solid #cbd5e1; border-radius: 8px; color: #2563eb; font-weight: bold; font-size: 0.95rem; text-decoration: none; box-shadow: 0 3px 0 #94a3b8; transition: 0.1s; }
.menu-past-log-link:active { transform: translateY(3px); box-shadow: 0 0 0 #94a3b8; }
.menu-past-log-error { color: #ef4444; font-size: 0.85rem; }

.menu-about-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #334155;
}
.menu-about-title {
    color: #1e293b;
    font-weight: bold;
    font-size: 1.05rem;
    margin: 0 0 12px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
}
.menu-about-heading {
    color: #2563eb;
    font-weight: bold;
    font-size: 0.95rem;
    margin: 18px 0 8px;
}
.menu-about-list {
    margin: 0;
    padding-left: 1.2em;
}
.menu-about-list li {
    margin-bottom: 6px;
}
.menu-about-note {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}
.menu-about-section a {
    color: #2563eb;
}

/* =========================================================
   5. チーム・チャット画面 (team.html)
   ========================================================= */
.status-container { display: flex; gap: 8px; margin-bottom: 10px; align-items: stretch; }
.status-box { flex: 1; background: white; padding: 8px 9px; border-radius: 10px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-align: left; min-height: 0; }
.status-box-title { font-size: 0.75rem; font-weight: 800; color: #64748b; margin-bottom: 6px; letter-spacing: 0.01em; line-height: 1.2; }
.status-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; line-height: 1.2; }
.status-normal { background: #dcfce7; color: #059669; border: 1px solid #10b981; }
.status-fallen { background: #fee2e2; color: #dc2626; border: 1px solid #ef4444; }
.status-detail { margin-top: 6px; font-size: 0.74rem; color: #334155; line-height: 1.3; }
.status-progress { color: #0f172a; font-weight: 700; margin-bottom: 4px; line-height: 1.25; }

.team-leader-bar { display: none; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.team-leader-row { color: #f59e0b; font-weight: 800; font-size: 0.9rem; text-align: left; margin: 0; }
.team-leader-btn { background: none; border: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }

#impeach-modal-overlay {
    align-items: flex-start;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
.leader-modal {
    text-align: left;
    max-width: 420px;
    padding: 20px 18px 18px;
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.leader-modal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.leader-modal-crown { color: #f59e0b; font-size: 1.35rem; line-height: 1; }
.leader-modal-title { margin: 0; text-align: left; font-size: 1.15rem; }
.leader-modal-profile { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.leader-modal-name { font-size: 1.05rem; font-weight: 900; color: #92400e; margin-bottom: 4px; line-height: 1.3; }
.leader-modal-spent { font-size: 0.9rem; font-weight: 800; color: #b45309; }

.leader-question-section { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.leader-question-section-head { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; color: #b45309; margin-bottom: 10px; }
.leader-question-display { font-size: 0.92rem; color: #1e293b; line-height: 1.45; }
.leader-question-q { font-weight: 800; margin-bottom: 8px; word-break: break-word; }
.leader-question-a { font-weight: 700; color: #059669; word-break: break-word; }
.leader-question-a--empty { color: #64748b; font-weight: 600; font-size: 0.85rem; }
.leader-question-a--hidden { color: #94a3b8; font-weight: 600; font-size: 0.82rem; display: flex; align-items: center; gap: 5px; }
.leader-question-label { color: #b45309; margin-right: 4px; }
.leader-question-empty { margin: 0; color: #64748b; font-size: 0.88rem; font-weight: 600; }
.leader-question-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #fde68a; }
.leader-question-edit-note { margin: 0 0 10px; font-size: 0.78rem; color: #92400e; line-height: 1.4; }
.leader-question-input { margin-bottom: 8px; font-size: 0.88rem; padding: 10px 12px; }
.leader-question-input:last-of-type { margin-bottom: 10px; }
.btn-leader-question-save { width: 100%; border: none; border-radius: 10px; background: #4f46e5; color: #fff; padding: 10px 12px; font-size: 0.88rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #3730a3; }
.btn-leader-question-save:active { transform: translateY(2px); box-shadow: 0 1px 0 #3730a3; }

.leader-abilities-subhead { display: block; margin-top: 10px; }
.leader-modal-impeach { margin-top: 14px; }
.btn-leader-impeach { width: 100%; border: none; border-radius: 10px; background: #ef4444; color: #fff; padding: 12px; font-size: 0.92rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #b91c1c; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-leader-impeach:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #b91c1c; }
.btn-leader-impeach:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.leader-modal-close { width: 100%; margin-top: 14px; }

.suzerain-highlight { color: #92400e; font-weight: 900; font-size: 0.84rem; text-align: center; margin-bottom: 8px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 5px 8px; line-height: 1.25; }
.btn-donate-inline { display: inline-flex; align-items: center; gap: 3px; border: none; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 4px 8px; font-size: 0.7rem; font-weight: 800; cursor: pointer; box-shadow: 0 2px 0 #b45309; line-height: 1.15; }
.btn-donate-inline:active { transform: translateY(2px); box-shadow: 0 0 0 #b45309; }

.team-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.btn-invite-team { flex: 1; background: linear-gradient(135deg, #10b981, #059669); color: white; padding: 10px 8px; border-radius: 10px; border: none; font-weight: bold; font-size: 0.92rem; cursor: pointer; box-shadow: 0 3px 0 #047833; transition: transform 0.1s, box-shadow 0.1s; display: flex; justify-content: center; align-items: center; gap: 4px; text-decoration: none; box-sizing: border-box; line-height: 1.2; }
.btn-invite-team:active { transform: translateY(4px); box-shadow: 0 0px 0 #047833; }
.btn-invite-friend {
  display: block; width: 100%;
  background: linear-gradient(135deg, #06C755, #05a648) !important;
  color: #fff !important; text-decoration: none !important;
  padding: 14px 16px; border-radius: 12px;
  margin-bottom: 20px; text-align: center;
  box-shadow: 0 4px 0 #047833 !important;
  transition: transform 0.12s, box-shadow 0.12s;
  box-sizing: border-box; border: none; cursor: pointer;
}
.btn-invite-friend:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #047833;
}
.btn-invite-friend-label {
  display: block; font-size: 1.05rem; font-weight: 800;
  line-height: 1.3; color: #fff !important;
}
.btn-invite-friend-label i { margin-right: 4px; }
.btn-invite-friend-reward {
  display: block; margin-top: 4px;
  font-size: 0.82rem; font-weight: 600;
  line-height: 1.3; color: rgba(255, 255, 255, 0.92) !important;
}

.btn-menu-premium {
  display: block; width: 100%;
  background: #1e3a5f !important;
  color: #d4af37 !important; text-decoration: none !important;
  padding: 23px 15px; border-radius: 10px;
  margin: 0 0 20px; text-align: center;
  font-size: 1.05rem; font-weight: bold; line-height: 1.4;
  border: none;
  box-shadow: 0 4px 0 #0f2347 !important;
  transition: 0.2s;
  box-sizing: border-box; cursor: pointer;
}
.btn-menu-premium:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #0f2347 !important;
}
.btn-menu-premium-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: normal;
  opacity: 0.9;
  color: #d4af37 !important;
}

.btn-rule { display: block; background: #ffffff; color: #475569; border: 2px solid #cbd5e1; padding: 14px; border-radius: 10px; font-weight: bold; font-size: 1.05rem; text-align: center; text-decoration: none; box-shadow: 0 4px 0 #94a3b8; margin-top: 25px; transition: transform 0.1s, box-shadow 0.1s; box-sizing: border-box; }
.btn-rule:active { transform: translateY(4px); box-shadow: 0 0px 0 #94a3b8; }

.poll-box { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; margin-top: 10px; }
.poll-btn-group { display: flex; gap: 8px; margin-top: 8px; }
.btn-poll { flex: 1; padding: 8px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; color: white; }
.btn-trust { background: #2563eb; }
.btn-distrust { background: #ef4444; }
.impeachment-desc { font-size: 0.85rem; color: #64748b; margin-top: 15px; background: #f1f5f9; padding: 10px; border-radius: 8px; line-height: 1.4; text-align: left; }
.leader-abilities-desc { font-size: 0.85rem; color: #64748b; margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; padding: 10px; border-radius: 8px; line-height: 1.45; text-align: left; }
.leader-abilities-list { margin: 6px 0 0; padding-left: 1.2em; }
.leader-abilities-list li { margin-bottom: 6px; }
.leader-abilities-list li:last-child { margin-bottom: 0; }
.leader-abilities-note { margin: 8px 0 0; font-size: 0.8rem; color: #92400e; }

.message-ui, .team-chat-card, .news-card { background: white; border-radius: 16px; padding: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 2px solid #e5e7eb; margin-bottom: 12px; }
.team-chat-card { display: none; margin-bottom: 12px; }
.team-chat-form, .broadcast-card > div { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.team-chat-input, .broadcast-input { flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; box-sizing: border-box; font-family: inherit; resize: none; min-height: 42px; max-height: 140px; overflow-y: hidden; line-height: 1.2; }
.team-chat-input:focus, .broadcast-input:focus { border-color: #2563eb; outline: none; background: #fff; }
.btn-team-chat, .btn-broadcast { background: #2563eb; color: white; border: none; padding: 0 14px; height: 42px; border-radius: 8px; font-weight: bold; cursor: pointer; box-shadow: 0 3px 0 #1d4ed8; font-size: 0.9rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin-bottom: 3px; }
.btn-team-chat:active:not(:disabled), .btn-broadcast:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #1d4ed8; }
.btn-team-chat:disabled, .btn-broadcast:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.team-chat-list, .news-list { display: flex; flex-direction: column; gap: 12px; }
.team-chat-message { background: white; padding: 12px; border-radius: 10px; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; border-left: 4px solid #3b82f6; margin-bottom: 10px; }
.team-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.team-chat-author-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.team-chat-author { font-size: 0.85rem; color: #2563eb; font-weight: bold; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-author-mention { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; }
.team-chat-time { font-size: 0.75rem; color: #9ca3af; flex-shrink: 0; }
.team-chat-text { font-size: 0.95rem; line-height: 1.35; word-break: break-word; white-space: pre-wrap; }
.team-chat-admin-controls { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; gap: 6px; }
.team-chat-locked-message { text-align: center; color: #475569; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 12px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.btn-chat-report, .btn-report { background: transparent; color: #9ca3af; border: none; padding: 0; margin-left: 4px; font-size: 0.75rem; cursor: pointer; flex-shrink: 0; text-decoration: underline; }
.btn-name-fetch { background: transparent; color: #2563eb; border: none; padding: 0; margin-left: 4px; font-size: 0.75rem; cursor: pointer; flex-shrink: 0; text-decoration: underline; }

.donate-title { margin: 0 0 8px; font-size: 1.2rem; color: #0f172a; font-weight: 900; }
.donate-help { margin: 0 0 12px; color: #475569; white-space: pre-line; line-height: 1.45; font-size: 0.92rem; }
.donate-actions { display: flex; gap: 10px; }
.btn-modal-cancel, .btn-modal-submit { flex: 1; border: none; border-radius: 10px; padding: 11px 12px; font-weight: bold; cursor: pointer; }
.btn-modal-cancel { background: #e2e8f0; color: #334155; }
.btn-modal-submit { background: #2563eb; color: white; }

.chat-notice-toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; padding: 12px 24px; border-radius: 30px; font-weight: bold; font-size: 0.95rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 4000; display: flex; align-items: center; gap: 10px; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); white-space: nowrap; }
.chat-notice-toast.show { bottom: 85px; }

/* =========================================================
   6. ニュース・コミュニティ (thread.html)
   ========================================================= */
.top-actions { display: flex; flex-direction: row; gap: 10px; margin-bottom: 15px; }
.top-actions > a { flex: 1; box-sizing: border-box; }
.map-rule-link { color: #2563eb; font-size: 0.9rem; font-weight: 700; text-decoration: underline; }

.btn-ranking { background: #fff; color: #d97706; border: 2px solid #fcd34d; padding: 10px; border-radius: 10px; font-weight: bold; font-size: 0.95rem; text-align: center; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.btn-ranking.rule-link { border-color: #2563eb; color: #2563eb; }
.btn-ranking:active { background: #fef3c7; }

.news-tabs { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab { flex: 0 0 auto; padding: 6px 12px; border-radius: 6px; border: 2px solid #cbd5e1; background: white; font-weight: bold; color: #64748b; cursor: pointer; transition: 0.2s; font-size: 0.75rem; }
.news-tab.active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 4px 6px rgba(37,99,235,0.2); }

.broadcast-card { margin-bottom: 10px; }
.news-card { background: white; padding: 12px; border-radius: 10px; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; }
.news-card.type-creation { border-left: 4px solid #f59e0b; }
.news-card.type-broadcast { border-left: 4px solid #3b82f6; }
.news-card.type-fall { border-left: 4px solid #ef4444; background: #fef2f2; border-color: #fecaca; }

.news-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.news-author-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.news-author { font-size: 0.85rem; color: #2563eb; font-weight: bold; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-time { font-size: 0.75rem; color: #9ca3af; flex-shrink: 0; }
.news-text { font-size: 0.95rem; line-height: 1.35; word-break: break-word; white-space: pre-wrap; }
.news-admin-controls { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; gap: 6px; }

/* =========================================================
   7. 設定画面 (settings.html)
   ========================================================= */
.page-settings { background: #fff; padding-bottom: 20px; }
.page-settings .tab-bar { display: none !important; }
.profile-header { width: 100%; max-width: 480px; margin: 0 auto; padding: 18px 20px 20px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; background: #fff; }
.profile-icon { font-size: 3.5rem; background: #f0f2f5; border-radius: 50%; width: 85px; height: 85px; display: flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb; flex-shrink: 0; }
.profile-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bio-name-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; min-width: 0; }
.bio-name { font-weight: bold; font-size: 1.3rem; margin-bottom: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bio-school-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.bio-school { color: #2563eb; font-size: 0.95rem; margin-bottom: 0; font-weight: bold; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stat-badges { display: flex; gap: 8px 12px; flex-wrap: wrap; }
.money-display, .total-earned-display, .contribution-display { display: inline-flex; align-items: baseline; gap: 4px; width: fit-content; }
.money-label, .total-earned-label, .contribution-label { font-size: 0.7rem; font-weight: 700; opacity: 0.85; }
.money-amount, .total-earned-amount, .contribution-amount { font-weight: 700; line-height: 1.1; }
.money-label { color: #047857; opacity: 1; }
.money-amount { color: #059669; font-size: 1.08rem; }
.total-earned-label, .total-earned-amount { color: #6b7280; }
.total-earned-amount { font-size: 0.86rem; font-weight: 600; }
.contribution-label, .contribution-amount { color: #9ca3af; }
.contribution-amount { font-size: 0.84rem; font-weight: 600; }

.streak-display { display: inline-flex; align-items: center; gap: 5px; width: fit-content; flex-shrink: 0; }
.streak-icon { font-size: 1.05rem; line-height: 1; }
.streak-amount { font-weight: 800; font-size: 1rem; color: #ea580c; line-height: 1; }
.page-settings .streak-display-prominent {
    gap: 8px;
    margin: 10px 0 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 2px solid #fdba74;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
    max-width: 100%;
    box-sizing: border-box;
}
.page-settings .streak-display-prominent .streak-icon { font-size: 1.6rem; }
.page-settings .streak-display-prominent .streak-label { font-size: 0.8rem; font-weight: 700; color: #9a3412; letter-spacing: 0.02em; }
.page-settings .streak-display-prominent .streak-amount { font-size: 1.5rem; font-weight: 900; color: #c2410c; }
.page-settings .team-notes-block { margin-bottom: 20px; }
.page-settings .team-notes-block .team-note-item { text-align: left; margin-top: 0; margin-bottom: 10px; line-height: 1.5; }
.page-settings .team-notes-block .team-note-item:last-child { margin-bottom: 0; }

.edit-section { width: 100%; max-width: 480px; margin: 0 auto; padding: 25px 20px; box-sizing: border-box; background: #fff; }
.edit-label { font-weight: bold; font-size: 0.9rem; margin-bottom: 8px; display: block; color: #555; }
.page-settings .name-input-group { align-items: stretch; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; gap: 0; }
.page-settings .name-input-group input { flex: 1; width: auto; min-width: 0; border: none; border-radius: 0; margin-bottom: 0; }
.page-settings .name-input-group input:focus { box-shadow: none; border-color: transparent; }
.page-settings .name-input-group .btn-save { flex-shrink: 0; border-radius: 0; margin: 0; padding: 0 18px; min-height: 48px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 25px; }
.toggle-label-wrap { display: flex; flex-direction: column; gap: 3px; }
.toggle-label { font-weight: 700; color: #374151; font-size: 0.95rem; }
.toggle-note { color: #6b7280; font-size: 0.8rem; }

.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .2s; border-radius: 30px; }
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; top: 4px; background-color: white; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #2563eb; }
.switch input:checked + .slider:before { transform: translateX(22px); }

/* モーダル内検索 */
#team-list-modal .team-list-container {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: min(50vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
}
.team-list-container { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.team-item-btn { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 2px solid #e2e8f0; padding: 15px; border-radius: 10px; text-align: left; font-size: 1rem; font-weight: bold; color: #334155; cursor: pointer; transition: 0.1s; }
.team-item-btn:active { background: #f1f5f9; border-color: #cbd5e1; transform: scale(0.98); }
.team-search-wrap { flex-shrink: 0; margin-bottom: 12px; }
.team-tabs { display: flex; gap: 5px; margin-top: 0; margin-bottom: 15px; background: #f1f5f9; padding: 5px; border-radius: 8px; flex-shrink: 0;}
.team-tab { flex: 1; padding: 10px 5px; border: none; background: transparent; border-radius: 6px; font-weight: bold; color: #64748b; cursor: pointer; transition: 0.2s; font-size: 0.95rem; }
.team-tab.active { background: #fff; color: #2563eb; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* =========================================================
   8. その他 (ユーティリティ、チャットランク)
   ========================================================= */
.word-break-all { word-break: break-all; }
.contact-info-box { background: #f8fafc; padding: 15px; border-radius: 8px; margin-top: 20px; border: 1px solid #e2e8f0; }
.contact-info-title { margin-top: 0; font-weight: bold; color: #1e293b; }
.note-text { font-size: 0.9rem; color: #64748b; margin-top: 20px; }
.policy-heading { font-size: 1.1rem; color: #2563eb; border-left: 4px solid #2563eb; padding-left: 8px; margin-top: 25px; }
.terms-heading { font-size: 1.1rem; color: #2563eb; background: #eff6ff; padding: 8px 12px; border-radius: 6px; margin-top: 25px; }
.list-indent { padding-left: 20px; }
.text-danger-bold { color: #dc2626; font-weight: bold; }
.ad-container { margin: 10px 0; text-align: center; }

/* プレミアム: 全ページの広告枠を非表示 */
html.premium-no-ads #ad-container,
html.premium-no-ads #map-ad-section,
html.premium-no-ads .ad-container,
html.premium-no-ads .ad-section,
html.premium-no-ads .map-ad-section,
html.premium-no-ads ins.adsbygoogle,
html.premium-no-ads iframe[src*="adm.shinobi.jp"] {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}
html.premium-no-ads div:has(> script[src*="adm.shinobi.jp"]),
html.premium-no-ads div:has(> iframe[src*="adm.shinobi.jp"]) {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.btn-line-header { background: #06C755; color: white; padding: 6px 14px; border-radius: 18px; text-decoration: none; font-weight: bold; font-size: 0.85rem; box-shadow: 0 2px 4px rgba(6,199,85,0.2); display: inline-block; }

.chat-rank-roman { font-family: sans-serif; font-weight: 900; font-size: inherit; letter-spacing: 0.03em; }
.chat-rank-1 { color: #959698; text-shadow: 0 1px 2px rgba(149, 150, 152, 0.45); }         /* Common 灰色 */
.chat-rank-2 { color: #7fd921; text-shadow: 0 0 4px rgba(127, 217, 33, 0.45); }           /* Uncommon 黄緑 */
.chat-rank-3 { color: #19b8f1; text-shadow: 0 0 5px rgba(25, 184, 241, 0.45); }            /* Rare 水色 */
.chat-rank-4 { color: #b15bf5; text-shadow: 0 0 6px rgba(177, 91, 245, 0.45); }            /* Epic 紫 */
.chat-rank-5 { color: #e6941a; text-shadow: 0 0 6px rgba(230, 148, 26, 0.5); }             /* Legendary 橙 */
.chat-rank-6 { color: #ffd635; text-shadow: 0 0 7px rgba(255, 214, 53, 0.55); }            /* Mythic 金 */
.chat-rank-7 { color: #ff51cb; text-shadow: 0 0 8px rgba(255, 81, 203, 0.5); }              /* Exotic 桃 */
.chat-rank-8 { color: #ff4757; text-shadow: 0 0 8px rgba(255, 71, 87, 0.45); }              /* 高レア 赤 */
.chat-rank-9 { color: #00e5ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 180, 255, 0.3); } /* ダイヤ */
.chat-rank-10 {
    background: linear-gradient(120deg, #ffd635 0%, #e6941a 40%, #ff51cb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 4px rgba(255, 214, 53, 0.6)) drop-shadow(0 0 10px rgba(230, 148, 26, 0.4));
} /* 最高（Mythic/Legendary グラデ） */

/* ランキング・結果画面用 */
.rank-item { display: flex; align-items: center; background: #fff; padding: 15px; margin-bottom: 10px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.rank-1 { border-left: 6px solid #fbbf24; background: #fffbeb; }
.rank-2 { border-left: 6px solid #9ca3af; background: #f3f4f6; }
.rank-3 { border-left: 6px solid #b45309; background: #fef3c7; }
.rank-other { border-left: 6px solid #e5e7eb; }
.ticket-card { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #fbbf24; padding: 20px; border-radius: 12px; text-align: center; }

/* マップ用 */
html.page-map, body.page-map { margin: 0; padding: 0; height: 100dvh; width: 100vw; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: auto; }
#map { flex: 1; width: 100%; background: #aad3df; z-index: 1; touch-action: none; }
.bottom-panel { background: white; padding: 15px 15px calc(100px + env(safe-area-inset-bottom, 0px)) 15px; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); z-index: 1000; text-align: left; position: relative; }
.school-label { background: rgba(255, 255, 255, 0.95); border: 2px solid #333; border-radius: 4px; padding: 4px 8px; font-weight: bold; font-size: 0.9em; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.my-team-label { background: #fffbeb !important; border: 2px solid #d97706 !important; color: #b45309 !important; font-size: 1.05em !important; z-index: 2000 !important; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.4) !important; }
.hq-marker { display: flex; justify-content: center; align-items: flex-end; }
.hq-pin { width: 20px; height: 20px; background-color: #ef4444; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: -2px 2px 4px rgba(0,0,0,0.4); position: relative; }
.hq-pin.protected, .hq-pin.subhq { background-color: #2563eb; }
.hq-pin.fallen { background-color: #9ca3af !important; }
.hq-pin::after { content: ''; width: 8px; height: 8px; background: white; position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.view-mode-btn { position: absolute; top: -65px; left: 15px; width: 50px; height: 50px; background: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2000; text-decoration: none; border: 2px solid #e5e7eb; }
.view-mode-btn:active { transform: scale(0.95); background: #f9fafb; }
.admin-select-btn { position: absolute; top: -65px; right: 15px; height: 50px; padding: 0 14px; background: white; border-radius: 999px; display: none; justify-content: center; align-items: center; font-size: 0.9rem; font-weight: bold; color: #9d174d; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2000; text-decoration: none; border: 2px solid #fbcfe8; cursor: pointer; }
.admin-select-btn.active { background: #9d174d; color: white; border-color: #9d174d; }

/* ========================================================
   🌙 ダークモード完全対応 (自動OS追従)
   ※ 一時無効化中 — 再有効化時は下の @media を元に戻す
   ======================================================== */
@media not all /* was: (prefers-color-scheme: dark) */ {
    /* 背景と基本テキスト — 純黒を避けた自然なダークブルーグレー */
    body, html, #map, .page-settings, .profile-header, .edit-section {
        background-color: #111827 !important;
        color: #e2e8f0 !important;
    }

    /* 各種カード・パネル・モーダルの背景 */
    .header, .tab-bar, .section-card, .admin-card, 
    .message-ui, .news-card, .team-chat-message, .donate-modal, .app-modal-panel, 
    .line-popup-content, .book-switch-modal, .season-banner, .team-chat-locked-message, .guest-cta-box,
    .flashcard, .question-box, .result-box, .settings-panel, .custom-panel,
    .bottom-panel, .info-box, .contact-box, .card, .maintenance-card,
    .member-card, .story-card, .price-box, .ticket-card, .footer-links, .status-box, .poll-box {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
        color: #e2e8f0 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    }

    /* 文字色の視認性確保・補正 */
    .news-author[style*="#7e22ce"], .team-chat-author[style*="#7e22ce"], .reported-meta b { color: #d8b4fe !important; }
    .news-author[style*="#d97706"], .team-chat-author[style*="#d97706"] { color: #fbbf24 !important; }
    
    h1, h2, h3, h4, p, .bio-name, .edit-label, .note, .section-title, .setting-label, 
    .team-hp-title, .info-text, .ranking-title, .maintenance-title, .member-name, .status-box-title,
    .donate-title, .toggle-label {
        color: #f1f5f9 !important;
    }
    .bio-school, .news-author, .team-chat-author, .back-btn, .back-to-menu, .back-link, .back-to-thread {
        color: #60a5fa !important;
    }
    .chat-rank-1 { color: #b4b4b8 !important; text-shadow: 0 0 4px rgba(180, 180, 184, 0.35) !important; }
    .chat-rank-2 { color: #9fe832 !important; text-shadow: 0 0 6px rgba(159, 232, 50, 0.5) !important; }
    .chat-rank-3 { color: #4dd4ff !important; text-shadow: 0 0 8px rgba(77, 212, 255, 0.5) !important; }
    .chat-rank-4 { color: #d08fff !important; text-shadow: 0 0 8px rgba(208, 143, 255, 0.5) !important; }
    .chat-rank-5 { color: #ffaa33 !important; text-shadow: 0 0 8px rgba(255, 170, 51, 0.55) !important; }
    .chat-rank-6 { color: #ffe566 !important; text-shadow: 0 0 9px rgba(255, 229, 102, 0.6) !important; }
    .chat-rank-7 { color: #ff7de0 !important; text-shadow: 0 0 10px rgba(255, 125, 224, 0.55) !important; }
    .chat-rank-8 { color: #ff6b7a !important; text-shadow: 0 0 10px rgba(255, 107, 122, 0.5) !important; }
    .chat-rank-9 { color: #66f0ff !important; text-shadow: 0 0 12px rgba(102, 240, 255, 0.6), 0 0 20px rgba(0, 200, 255, 0.35) !important; }
    .chat-rank-10 {
        background: linear-gradient(120deg, #ffe566 0%, #ffaa33 40%, #ff7de0 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        filter: drop-shadow(0 0 5px rgba(255, 229, 102, 0.65)) drop-shadow(0 0 12px rgba(255, 170, 51, 0.45)) !important;
    }
    .team-hp-value, .money-amount, .val-rate, .stat-value, .result-money, .guest-cta-text { color: #34d399 !important; }
    .hp-desc, .news-time, .team-chat-time, .footer-links, .footer-links a, .stat-label, .story-desc,
    .status-detail, .donate-help, .toggle-note, .status-box-title {
        color: #94a3b8 !important;
    }
    .status-progress, .impeachment-desc, .leader-abilities-desc { color: #cbd5e1 !important; }
    .team-leader-row, .btn-ranking { color: #fcd34d !important; }
    .leader-modal-profile, .leader-question-section { background: #1a2332 !important; border-color: #374151 !important; }
    .leader-modal-name { color: #fcd34d !important; }
    .leader-modal-spent, .leader-question-section-head, .leader-question-label { color: #fbbf24 !important; }
    .leader-question-display, .leader-question-q { color: #e2e8f0 !important; }
    .leader-question-a { color: #34d399 !important; }
    .leader-question-a--empty, .leader-question-a--hidden, .leader-question-empty { color: #94a3b8 !important; }
    .leader-question-edit { border-top-color: #374151 !important; }
    .leader-question-edit-note { color: #fcd34d !important; }
    .total-earned-label, .total-earned-amount, .contribution-label, .contribution-amount { color: #6b7280 !important; }

    /* 追加ユーティリティ */
    .contact-info-box { background-color: #1f2937 !important; border-color: #374151 !important; }
    .contact-info-title { color: #f1f5f9 !important; }
    .note-text { color: #94a3b8 !important; }
    .btn-secondary, .btn-modal-cancel { background-color: #374151 !important; box-shadow: 0 4px 0 #1f2937 !important; color: #e2e8f0 !important; }
    .policy-heading { color: #93c5fd !important; border-left-color: #3b82f6 !important; }
    .terms-heading { color: #93c5fd !important; background-color: #1e3a8a !important; }
    .text-danger-bold { color: #f87171 !important; }

    /* 入力フォーム・セレクト */
    .input-field, .input-group input, .team-search-input, .custom-select, 
    .team-chat-input, .broadcast-input, .donate-input, .form-select {
        background-color: #1f2937 !important;
        color: #e2e8f0 !important;
        border-color: #4b5563 !important;
    }
    .input-field:focus, .input-group input:focus, .team-search-input:focus, .form-select:focus, .donate-input:focus {
        border-color: #3b82f6 !important;
        background-color: #273449 !important;
    }
    .input-group input:disabled { background-color: #1f2937 !important; color: #6b7280 !important; }
    .page-settings .name-input-group { border-color: #4b5563 !important; }
    .page-settings .streak-display-prominent {
        background: linear-gradient(135deg, #431407 0%, #7c2d12 100%) !important;
        border-color: #ea580c !important;
        box-shadow: 0 2px 10px rgba(234, 88, 12, 0.3) !important;
    }
    .page-settings .streak-display-prominent .streak-label { color: #fdba74 !important; }
    .page-settings .streak-display-prominent .streak-amount { color: #fb923c !important; }

    /* 学習・クイズ画面特殊パーツ */
    .card-progress { background-color: #064e3b !important; color: #34d399 !important; }
    .checkmark-overlay { background: rgba(17, 24, 39, 0.85) !important; }
    #range-label, .battle-range-pill { background-color: #1e3a8a !important; color: #93c5fd !important; }
    .option-btn { background-color: #1f2937 !important; color: #e2e8f0 !important; border-color: #374151 !important; box-shadow: 0 4px 0 #0d1117 !important; }
    .option-btn canvas { filter: invert(1) hue-rotate(180deg) brightness(1.5); }
    #meaning-display { background-color: #1a2332 !important; border-color: #059669 !important; }

    /* ボタン・タブ等のスタイル */
    .btn-rule, .btn-feedback-menu, .btn-ranking, .btn-official-line, .btn-leave, .range-btn, .settings-btn, .profile-icon, .btn-action-outline {
        background-color: #1f2937 !important; border-color: #4b5563 !important; color: #e2e8f0 !important; box-shadow: 0 4px 0 #0d1117 !important;
    }
    .btn-official-line { color: #38bdf8 !important; border-color: #0369a1 !important; }
    .btn-ranking.rule-link { border-color: #3b82f6 !important; color: #60a5fa !important; }
    .btn-prev, .btn-stop, .btn-back, .btn-copy { background-color: #2d3748 !important; color: #e2e8f0 !important; box-shadow: 0 4px 0 #1a2332 !important; }
    
    .toggle-group, .team-tabs, .link-url { background-color: #1a2332 !important; border-color: #374151 !important; }
    .toggle-btn, .team-tab { color: #94a3b8 !important; }
    .team-tab.active { background-color: #2d3748 !important; color: #60a5fa !important; }
    .news-tab { background-color: #1f2937 !important; border-color: #374151 !important; color: #94a3b8 !important; }
    .news-tab.active { background-color: #2563eb !important; border-color: #3b82f6 !important; color: #f1f5f9 !important; }

    /* ニュース・ランキングカード特殊背景 */
    .news-card.type-fall, .alert-box { background-color: #2d1515 !important; border-color: #7f1d1d !important; }
    .rank-item, .tab-container, .team-item-btn { background-color: #1f2937 !important; border-color: #374151 !important; color: #e2e8f0 !important; }
    .tab-btn { color: #94a3b8 !important; }
    .rank-name, .rank-number { color: #f1f5f9 !important; }

    .btn-invite-friend {
      background: linear-gradient(135deg, #059669, #047857) !important;
      box-shadow: 0 4px 0 #065f46 !important;
    }
    .btn-menu-premium {
      background: #1e3a5f !important;
      color: #d4af37 !important;
      box-shadow: 0 4px 0 #0f2347 !important;
    }
    .book-maintenance-banner, .impeachment-desc, .leader-abilities-desc { background: #1a2332 !important; border-color: #374151 !important; color: #cbd5e1 !important; }
    .leader-abilities-note { color: #fcd34d !important; }
    .book-btn.database { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), 0 3px 0 #1e3a8a !important; }
    .book-btn.eee { background: #ca8a04 !important; color: #fefce8 !important; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), 0 3px 0 #854d0e !important; }
    .book-btn.eee .book-btn-mastery { background-color: rgba(0, 0, 0, 0.35) !important; color: #fefce8 !important; }
    .suzerain-highlight { background: #451a03 !important; border-color: #92400e !important; color: #fef3c7 !important; }
    .team-chat-locked-message { background-color: #1f2937 !important; border-color: #374151 !important; color: #94a3b8 !important; }
    .btn-chat-report, .btn-report { color: #6b7280 !important; }
    .season-banner { background-color: #1a2332 !important; border-color: #0369a1 !important; color: #38bdf8 !important; }
    .season-banner-main { color: #38bdf8 !important; }
    .season-banner-sub { color: #7dd3fc !important; }

    /* マップ画面特殊スタイル */
    .school-label { background: rgba(31, 41, 55, 0.95) !important; color: #e2e8f0 !important; border-color: #4b5563 !important; }
    .my-team-label { background: #451a03 !important; border-color: #d97706 !important; color: #fef3c7 !important; }
    .view-mode-btn, .admin-select-btn { background-color: #1f2937 !important; color: #e2e8f0 !important; border-color: #374151 !important; }

    /* ポップアップ関連 */
    .bonus-popup-title, .line-popup-title { color: #f1f5f9 !important; }
    .bonus-popup-desc, .line-popup-desc { color: #94a3b8 !important; }
    .line-popup-btn-dismiss { color: #6b7280 !important; }

    /* 単語帳切り替えボタン・モーダル */
    #book-list .book-btn.book-switch {
        background: #1f2937 !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 3px 0 #1e40af !important;
        color: #60a5fa !important;
    }
    #book-list .book-switch-icon { color: #93c5fd !important; }
    #book-list .book-switch-label { color: #93c5fd !important; }
    .book-switch-modal h3 { color: #f1f5f9 !important; }
    .book-switch-hint { color: #6b7280 !important; }
    .book-switch-status { color: #60a5fa !important; }
    .book-switch-slot.empty {
        background: #1a2332 !important;
        border-color: #374151 !important;
        color: #6b7280 !important;
    }
    .book-switch-pick-item {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
        color: #e2e8f0 !important;
    }
    .book-switch-pick-item.selected {
        border-color: #3b82f6 !important;
        background: #1e3a8a !important;
    }
    .book-switch-check { color: #60a5fa !important; }
    .book-switch-close { color: #6b7280 !important; }
    .book-switch-cancel {
        background-color: #374151 !important;
        color: #e2e8f0 !important;
        box-shadow: 0 3px 0 #1f2937 !important;
    }
    .book-switch-save:not(:disabled) {
        background: #2563eb !important;
        box-shadow: 0 3px 0 #1e40af !important;
    }
    .book-switch-save:disabled {
        background: #2d3748 !important;
        color: #6b7280 !important;
        box-shadow: 0 3px 0 #1a2332 !important;
    }
    
    /* トグル設定等 */
    .slider { background-color: #374151 !important; }

    .past-log-layout { background: #0f172a; }
    .past-log-page-title { color: #f1f5f9; }
    .past-log-index-card { background: #1f2937; border-color: #334155; color: #f1f5f9; }
    .past-log-index-intro { background: #1f2937; border-color: #334155; color: #cbd5e1; }
    .btn-back-menu { background: #1f2937; border-color: #4b5563; color: #cbd5e1; }
    .btn-back-menu:hover { background: #2d3748; }
    .past-log-nav a { background: #1f2937; border-color: #4b5563; color: #94a3b8; }
    .past-log-nav a.active { background: #2563eb; border-color: #3b82f6; color: #fff; }
}

/* =========================================================
   過去ログ公開ページ（大画面レイアウト）
   ========================================================= */
body.past-log-page {
    padding-bottom: 24px;
    background: #e8eef4;
}

.past-log-layout {
    width: 100%;
    max-width: min(1100px, 96vw);
    margin: 0 auto;
    padding: 20px clamp(16px, 3vw, 40px) 32px;
    box-sizing: border-box;
}

.past-log-header {
    margin-bottom: 24px;
}

.past-log-page-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #1e293b;
    margin: 16px 0 12px;
    line-height: 1.3;
}

.btn-back-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 3px 0 #94a3b8;
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-back-menu:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #94a3b8;
}

.btn-back-menu--footer {
    width: 100%;
    max-width: 400px;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
}

.past-log-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.past-log-nav a {
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
}

.past-log-nav a.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.past-log-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.past-log-page .news-card {
    padding: clamp(16px, 2vw, 22px) clamp(18px, 2.5vw, 28px);
    border-radius: 14px;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.past-log-page .news-text {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.65;
}

.past-log-page .past-log-system-text {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.past-log-page .news-author {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

.past-log-page .news-time {
    font-size: 0.9rem;
}

.past-log-link {
    color: #2563eb;
    text-decoration: underline;
}

.past-log-empty {
    text-align: center;
    color: #9ca3af;
    padding: 40px 20px;
    font-size: 1.05rem;
}

.past-log-error {
    color: #ef4444;
}

.past-log-index-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.past-log-index-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #1e293b;
    font-weight: bold;
    font-size: 1.15rem;
    box-shadow: 0 4px 0 #d1d5db;
    transition: transform 0.1s, box-shadow 0.1s;
}

.past-log-index-card:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #d1d5db;
}

.past-log-index-card .bi-chevron-right {
    color: #94a3b8;
    font-size: 1.25rem;
}

.past-log-index-intro {
    margin-bottom: 24px;
    font-size: 1.05rem;
}

.past-log-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #cbd5e1;
    text-align: center;
}

@media (min-width: 768px) {
    .past-log-layout {
        padding-top: 28px;
    }

    .past-log-index-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .past-log-index-list {
        grid-template-columns: repeat(3, 1fr);
    }
}