/* 勉強ログの画面の下のメニュー（account-log-nav.js が出す <nav class="tabbar">。2026-10-09）。マイページ（account.html）と本人履歴（study-history.html）の共用。
   log.html の下のタブは log.css の規則で描くが、マイページは log.css を読まない（紙色の画面用の CSS が多く、ぶつかる）ので、
   下のタブの分（.tabbar・.tab・撮るの丸・PC の左の縦メニュー）だけをここに写す。値は log.css と同じ（色は log.css の :root の値）。
   スマホで画面の端から浮く小さな帯・スクロールで縮む動きは nav-compact.css が .tabbar にも効かせている（このファイルとは別）。
   この CSS は account.html・study-history.html・about.html・account-setup.html が読む（.tabbar が無いページ＝本人履歴のブラウザ・問題集のアプリでは、どの規則も当たらない）。マイページはブラウザでは head で読むので、問題集のメニューを一瞬も見せない（JS が差し替えるまで隠す）。 */
html[data-account-context="log"] #site-navigation:not([data-log-nav]){display:none}

.tabbar{--surface:#fff;--line:#e7e7ea;--muted:#62626a;--accent:#6535b5;--soft:#f3edff;
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:30;width:100%;max-width:600px;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:var(--surface);border-top:1px solid var(--line);border-radius:26px 26px 0 0;
  padding:8px 6px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px rgb(17 17 20 / 6%);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.7}
.tabbar *{box-sizing:border-box}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border:0;background:none;padding:4px 0;font-size:14px;font-weight:700;line-height:1.7;color:var(--muted);text-decoration:none;cursor:pointer;border-radius:16px;white-space:nowrap;letter-spacing:-.03em;touch-action:manipulation}
.tab svg{width:26px;height:26px}
.tab[aria-current=page]{color:var(--accent);background:var(--soft)}
.tab--plus{background:none!important}
.tab__disc{display:grid;place-items:center;width:58px;height:58px;margin-top:-22px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 8px 20px rgb(101 53 181 / 35%)}
.tab__disc svg{width:28px;height:28px}
.tab--plus .lbl-pc{display:none}
.tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* 本文の下の空き（ログインのボタン・同意の文・リンクが帯の裏に残らないように）。帯 80px＋下の隙間 10px（nav-compact.css）＋余裕 24px＋ホームバー。
   nav-compact.css の body:has(.appnav) の空きは .appnav だけに効くので、.tabbar の分はここで足す。 */
@media(max-width:1023.98px){
  body:has(.tabbar){padding-bottom:calc(114px + env(safe-area-inset-bottom,0px))}
  body:has(.tabbar) .dpg-site-status{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

/* PC（≥1024px）は左の縦メニュー（log.css と同じ。幅は nav-compact.css が 208px・1400px 以上は 224px にする） */
@media(min-width:1024px){
  body:has(.tabbar){padding-left:232px}
  .tabbar{left:0;right:auto;top:0;bottom:auto;transform:none;width:232px;max-width:none;height:100vh;
    display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:18px 14px;
    border-top:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none}
  .tab{flex-direction:row;justify-content:flex-start;gap:12px;min-height:52px;padding:0 14px;font-size:16px}
  .tab--plus{order:10;margin-top:10px;justify-content:center;gap:8px;min-height:52px;border-radius:16px;
    background:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%)!important;color:#fff!important;
    box-shadow:0 3px 0 #4215a8,0 6px 12px #6d33d322}
  .tab__disc{width:auto;height:auto;margin:0;background:none;box-shadow:none!important}
  .tab--plus .lbl-sp{display:none}
  .tab--plus .lbl-pc{display:inline}
}
@media(min-width:1400px){body:has(.tabbar){padding-left:256px}.tabbar{width:256px}}