/* ===== 下部タブバー・その他画面 ===== */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; min-height: 56px; padding: 4px 0 6px; border: none; border-radius: 0; background: none; color: var(--muted); font-size: 0.875rem; font-weight: normal; line-height: 1.3; transition: none; }
.tabbar-item:hover { background: none; color: var(--accent); }
.tabbar-item[aria-current="page"] { color: var(--accent); font-weight: bold; }
.tabbar-item svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body:has(.tabbar) .container { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px) + var(--gutter)); }
/* 免責は index.html の footer が唯一の置き場所。ログイン画面とその他画面だけに出す */
body:has(.view-root:not(.view-more)) .disclaimer { display: none; }

.more-theme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.more-theme-label { font-size: 0.9375rem; font-weight: bold; }
.more-lead { margin-bottom: 10px; color: var(--muted); font-size: 0.875rem; }
.more-confirm { padding: 12px; background: var(--panel-2); border-top: 1px solid var(--line); }
.more-confirm p { margin-bottom: 12px; font-size: 0.9375rem; }
.more-confirm-actions { display: flex; gap: 8px; }
.more-confirm-ok, .more-confirm-cancel, .more-btn, .more-btn-sub { flex: 1; width: auto; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 0.9375rem; font-weight: bold; cursor: pointer; transition: none; }
.more-confirm-ok, .more-btn { border: none; background: var(--accent); color: var(--on-accent); }
.more-confirm-ok:hover, .more-btn:hover { background: var(--accent-2); }
.more-confirm-cancel, .more-btn-sub { border: 1px solid var(--line); background: none; color: var(--text); font-weight: normal; }
.more-confirm-cancel:hover, .more-btn-sub:hover { background: none; border-color: var(--accent); }

/* 設定(自動更新) */
.auto-refresh .ui-notice { margin-top: 8px; }
.auto-form { margin-top: 12px; }
.auto-form input { min-height: 44px; font-size: 1rem; }
.auto-form .more-btn, .auto-refresh > .more-btn, .auto-refresh > .more-btn-sub { flex: none; width: 100%; margin-top: 8px; }

/* 引っ張って再分析 */
html[data-standalone]:has(.view-root) { overscroll-behavior-y: contain; }
.pull-zone { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; overflow: hidden; margin: calc(var(--gutter) * -1) 0 var(--gutter); color: var(--muted); font-size: 0.875rem; }
.pull-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); }
.pull-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more-brand { display: flex; justify-content: center; margin: 8px 0 24px; }
.more-brand img { display: block; height: 28px; width: auto; }

.tabbar-icon { position: relative; display: inline-flex; }
.tabbar-dot { position: absolute; top: -1px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }