/* 地学基礎 実況中継アプリ ------------------------------------------------ */
:root{
  --paper:#fbfaf7; --card:#fff; --ink:#1a1f26; --ink-soft:#4d5866; --ink-faint:#8a93a0;
  --line:#e3e2d8; --line-soft:#eeede5;
  --navy:#1f4f8b; --navy-soft:#e8eef7; --navy-deep:#123a63;
  --blue:#2f5d8c; --blue-soft:#e6eef6;
  --amber:#9a6a12; --amber-soft:#f8f0dd;
  --red:#a83c32; --red-soft:#f8e9e7;
  --shadow:0 1px 2px rgba(26,35,29,.06),0 8px 24px -12px rgba(26,35,29,.18);
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  --wrap:960px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111419; --card:#181d25; --ink:#e7eaef; --ink-soft:#aeb7c4; --ink-faint:#7b8593;
    --line:#2a323d; --line-soft:#222933;
    --navy:#8ab6e8; --navy-soft:#182233; --navy-deep:#bcd6f5;
    --blue:#8fb8de; --blue-soft:#1b2531;
    --amber:#dfb463; --amber-soft:#2b2517;
    --red:#e0928a; --red-soft:#2e1e1c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--navy); text-decoration:none}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}

/* ヘッダー -------------------------------------------------------------- */
header.top{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.top-in{max-width:var(--wrap); margin:0 auto; padding:10px 14px; display:flex; align-items:center; gap:12px}
.brand{font-weight:700; letter-spacing:.02em; font-size:15px; display:flex; align-items:center; gap:8px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.brand small{display:block; font-weight:400; font-size:11px; color:var(--ink-faint); letter-spacing:.06em}
nav.tabs{margin-left:auto; display:flex; gap:2px}
nav.tabs a{
  padding:7px 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
nav.tabs a.on{background:var(--navy); color:#fff}
@media(max-width:760px){
  nav.tabs{
    position:fixed; left:0; right:0; bottom:0; margin:0; background:var(--card);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around; z-index:50;
  }
  nav.tabs a{flex:1; text-align:center; padding:8px 2px; font-size:11.5px; border-radius:12px}
  body{padding-bottom:74px}
  .brand small{display:none}
}

main{max-width:var(--wrap); margin:0 auto; padding:18px 14px 40px}
h1.page{font-size:20px; margin:4px 0 14px; letter-spacing:.02em}
.muted{color:var(--ink-faint)}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.pad{padding:16px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.grow{flex:1}

/* ボタン ---------------------------------------------------------------- */
.btn{
  border:1px solid var(--line); background:var(--card); border-radius:10px; padding:9px 14px;
  font-size:14px; font-weight:600; color:var(--ink); transition:.12s;
}
.btn:hover{border-color:var(--navy); color:var(--navy)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
.btn.primary:hover{filter:brightness(1.08); color:#fff}
.btn.sm{padding:6px 10px; font-size:12.5px; border-radius:8px}
.btn.ghost{background:transparent}

/* チップ ---------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
}
.chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.tag{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:700}
.tag.基礎{background:var(--navy-soft); color:var(--navy)}
.tag.共テ{background:var(--blue-soft); color:var(--blue)}
.tag.直前{background:var(--amber-soft); color:var(--amber)}

/* ホーム ---------------------------------------------------------------- */
.hero{
  background:linear-gradient(135deg,var(--navy-soft),transparent 70%); border:1px solid var(--line);
  border-radius:16px; padding:18px; margin-bottom:16px;
}
.hero h2{margin:0 0 6px; font-size:18px}
.hero p{margin:0; color:var(--ink-soft); font-size:13.5px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
.stat .k{font-size:12px; color:var(--ink-faint); font-weight:600}
.stat .v{font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:2px}
.stat .v small{font-size:13px; font-weight:600; color:var(--ink-faint)}
.bar{height:8px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:8px}
.bar i{display:block; height:100%; background:var(--navy)}
.bar i.amber{background:var(--amber)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.tile{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:var(--shadow); transition:.12s;
}
.tile:hover{transform:translateY(-2px); border-color:var(--navy)}
.tile b{display:block; font-size:15px; margin-bottom:4px; color:var(--ink)}
.tile span{font-size:12.5px; color:var(--ink-faint)}

/* 目次 ------------------------------------------------------------------ */
.toc-chapter{margin:18px 0 8px; font-size:13px; font-weight:800; color:var(--navy); letter-spacing:.04em}
.toc-list{display:grid; gap:8px}
.toc-item{
  display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; color:var(--ink);
}
.toc-item:hover{border-color:var(--navy)}
.toc-item .id{font-weight:800; color:var(--navy); font-size:13px; min-width:38px}
.toc-item .ti{flex:1; font-size:14.5px}
.toc-item .meta{font-size:11.5px; color:var(--ink-faint)}
.done-dot{width:8px;height:8px;border-radius:50%;background:var(--navy)}

/* 本文 ------------------------------------------------------------------ */
.reader{font-family:var(--serif); font-size:16.5px; line-height:1.95; letter-spacing:.01em}
.reader h2.block{
  font-family:var(--sans); font-size:16px; margin:34px 0 14px; padding:9px 13px; border-radius:10px;
  background:var(--navy-soft); color:var(--navy-deep); display:flex; gap:10px; align-items:center;
}
.reader h2.block.共テ{background:var(--blue-soft); color:var(--blue)}
.reader h2.block.直前{background:var(--amber-soft); color:var(--amber)}
.reader h3{font-family:var(--sans); font-size:15.5px; margin:26px 0 8px; color:var(--ink)}
.reader h4{font-family:var(--sans); font-size:14.5px; margin:20px 0 6px; color:var(--ink-soft)}
.reader p{margin:0 0 14px; text-align:justify}
.reader p.li{margin:0 0 6px; padding-left:1.2em; text-indent:-1.2em; text-align:left}
.reader .box p.li{margin:0 0 4px}
.reader .box{
  background:var(--navy-soft); border-radius:12px; padding:14px 16px; margin:18px 0;
  border-left:4px solid var(--navy); font-size:15.5px; line-height:1.85;
}
.reader .box b{display:block; font-family:var(--sans); font-size:14px; margin-bottom:6px; color:var(--navy-deep)}
.reader .box p{margin:0 0 8px}
.reader .box p:last-child{margin:0}
.reader figure{margin:20px 0; text-align:center}
.reader figure img{max-width:100%; border:1px solid var(--line); border-radius:10px; background:#fff}
.tablewrap{overflow-x:auto; margin:18px 0; -webkit-overflow-scrolling:touch}
table.t{border-collapse:collapse; width:100%; font-family:var(--sans); font-size:13.5px; line-height:1.6; min-width:420px}
table.t th,table.t td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
table.t th{background:var(--navy-soft); color:var(--navy-deep); font-weight:700; white-space:nowrap}
table.t tr:nth-child(even) td{background:color-mix(in srgb,var(--line-soft) 45%,transparent)}

.unit-head{border-bottom:2px solid var(--navy); padding-bottom:10px; margin-bottom:6px}
.unit-head .ch{font-size:12px; color:var(--ink-faint); font-weight:700}
.unit-head h1{margin:4px 0 0; font-size:22px}
.unit-nav{display:flex; gap:8px; justify-content:space-between; margin:26px 0 0; flex-wrap:wrap}

/* ドリル ---------------------------------------------------------------- */
.q-card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px 18px; min-height:230px; display:flex; flex-direction:column}
.q-meta{font-size:11.5px; color:var(--ink-faint); font-weight:700; letter-spacing:.04em; margin-bottom:12px}
.q-text{font-family:var(--serif); font-size:19px; line-height:1.8; flex:1}
.a-text{
  font-family:var(--serif); font-size:18px; line-height:1.8; margin-top:16px; padding-top:16px;
  border-top:1px dashed var(--line); color:var(--navy-deep); font-weight:600;
}
.a-hidden{display:flex; align-items:center; justify-content:center; margin-top:16px; padding:18px;
  border:1px dashed var(--line); border-radius:12px; color:var(--ink-faint); font-size:13.5px}
.judge{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.judge button{padding:14px 6px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-weight:800; font-size:15px}
.judge button.o{color:var(--navy)} .judge button.t{color:var(--amber)} .judge button.x{color:var(--red)}
.judge button:hover{background:var(--navy-soft)}
.progress{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; color:var(--ink-faint)}
.progress .bar{flex:1; margin:0}

.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; margin-top:10px}
.pick{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card);
  border-radius:10px; padding:9px 11px; font-size:13px; text-align:left;
}
.pick.on{border-color:var(--navy); background:var(--navy-soft); color:var(--navy-deep); font-weight:700}
.pick .n{margin-left:auto; font-size:11px; color:var(--ink-faint)}
.mastery{display:inline-block; width:34px; text-align:center}

/* 演習 ------------------------------------------------------------------ */
.ex-card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden}
.ex-head{display:flex; gap:8px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.ex-head .no{font-weight:800; color:var(--navy)}
.ex-body{padding:14px; font-family:var(--serif); font-size:16px; line-height:1.85}
.ex-body p{margin:0 0 12px}
.sol{background:color-mix(in srgb,var(--navy-soft) 55%,transparent); border-top:1px solid var(--line-soft); padding:14px}
.sol .ans{font-family:var(--sans); font-weight:800; color:var(--navy-deep); margin-bottom:10px; font-size:14.5px}

/* 直前 ------------------------------------------------------------------ */
.ref-item{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:var(--shadow)}
.ref-item h3{margin:0 0 10px; font-size:15.5px; display:flex; gap:8px; align-items:center}
.ref-item h3 .num{color:var(--navy); font-weight:800}
.mis-table td.w{color:var(--red)} .mis-table td.r{color:var(--navy)}

/* 検索 ------------------------------------------------------------------ */
.search-box{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:15px; color:var(--ink)}
.hit{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px}
.hit .where{font-size:11.5px; font-weight:700; color:var(--navy); margin-bottom:4px}
.hit .txt{font-size:13.5px; color:var(--ink-soft); line-height:1.7}
mark{background:var(--amber-soft); color:var(--amber); border-radius:3px; padding:0 2px}

.empty{text-align:center; color:var(--ink-faint); padding:40px 10px; font-size:14px}
.sep{height:1px; background:var(--line); margin:20px 0}
details.foldable{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px 14px; margin-bottom:10px}
details.foldable summary{cursor:pointer; font-weight:700; font-size:14px}
@media print{nav.tabs,header.top,.no-print{display:none!important}}

/* SVG図 ----------------------------------------------------------------- */
.reader figure.svgfig,.ex-body figure.svgfig{margin:22px 0; text-align:center}
figure.svgfig svg{max-width:100%; height:auto; border:1px solid var(--line); border-radius:10px;
  background:var(--card); padding:6px}
figure.svgfig figcaption{font-family:var(--sans); font-size:12.5px; color:var(--ink-faint); margin-top:6px}
svg .ln{stroke:var(--ink-soft); fill:none; stroke-width:1.4}
svg .lnb{stroke:var(--navy); fill:none; stroke-width:2}
svg .fill-a{fill:var(--navy-soft)} svg .fill-b{fill:var(--amber-soft)} svg .fill-c{fill:var(--red-soft)}
svg .fill-d{fill:var(--blue-soft)} svg .fill-n{fill:var(--card)}
svg text{fill:var(--ink); font-family:var(--sans); font-size:11px}
svg text.sm{font-size:9.5px; fill:var(--ink-soft)}
svg text.hd{font-size:12px; font-weight:700; fill:var(--navy-deep)}
.formula{background:var(--navy-soft); border-left:4px solid var(--navy); border-radius:10px;
  padding:12px 14px; margin:8px 0; font-family:var(--sans); font-size:14.5px; font-weight:700;
  color:var(--navy-deep); line-height:1.9}