/* ============================================================
   まなびジム — スタイルシート
   トークン（色・余白・角丸）を :root にまとめ、ダークは上書きだけ。
   ============================================================ */

:root{
  --bg:#faf7f1;
  --bg-grid:#ece5d8;
  --card:#ffffff;
  --card-2:#fbf8f3;
  --line:#e6ddcd;
  --line-strong:#d5c9b3;
  --ink:#191c24;
  --ink-2:#3d4350;
  --muted:#736b5c;
  --accent:#e0742a;
  --accent-soft:#fdf0e3;
  --accent-ink:#8c4310;
  --ok:#2c8168;
  --ok-soft:#e6f3ee;
  --ng:#c1483c;
  --ng-soft:#fbeae7;
  --info:#3d6ea8;
  --info-soft:#e9f0f8;
  --shadow:0 1px 2px rgba(24,20,12,.05), 0 8px 24px -12px rgba(24,20,12,.18);
  --shadow-lg:0 2px 4px rgba(24,20,12,.06), 0 24px 48px -20px rgba(24,20,12,.28);
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --disp:"Outfit","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --maxw:1060px;
}

html[data-theme="dark"]{
  --bg:#13151b;
  --bg-grid:#1b1e26;
  --card:#1b1e26;
  --card-2:#22262f;
  --line:#2c313c;
  --line-strong:#3a4150;
  --ink:#ece8e0;
  --ink-2:#c3bfb6;
  --muted:#918b80;
  --accent:#f08c3e;
  --accent-soft:#2e2417;
  --accent-ink:#f7b579;
  --ok:#49a887;
  --ok-soft:#16291f;
  --ng:#e0705f;
  --ng-soft:#2c1a17;
  --info:#6c9dd6;
  --info-soft:#161f2b;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--body);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size:28px 28px;
  color:var(--ink);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}

/* ---------------- ヘッダー ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:10px max(16px, env(safe-area-inset-left)) 10px 16px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand-mark{display:grid; place-items:center; filter:drop-shadow(0 4px 8px rgba(224,116,42,.35))}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text b{font-size:17px; letter-spacing:.04em}
.brand-text small{font-family:var(--disp); font-size:9.5px; letter-spacing:.22em; color:var(--muted)}

.topnav{display:flex; gap:4px; margin-left:8px; flex:1 1 auto}
.topnav a{
  text-decoration:none; font-size:14px; font-weight:600; color:var(--ink-2);
  padding:7px 13px; border-radius:999px; white-space:nowrap;
}
.topnav a:hover{background:var(--card); color:var(--ink)}
.topnav a.on{background:var(--ink); color:var(--bg)}

.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto}
.streak-chip{
  display:inline-flex; align-items:baseline; gap:3px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px 5px 9px; box-shadow:var(--shadow);
}
.streak-chip b{font-family:var(--mono); font-size:15px}
.streak-chip .unit{font-size:11px; color:var(--muted)}
.streak-chip .flame{font-size:14px; filter:grayscale(1); opacity:.45}
.streak-chip.alive .flame{filter:none; opacity:1}

.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:10px; font-size:15px;
}
.icon-btn:hover{border-color:var(--line-strong)}
.ic-moon{display:none}
html[data-theme="dark"] .ic-sun{display:none}
html[data-theme="dark"] .ic-moon{display:inline}
.only-mobile{display:none}

/* ---------------- レイアウト ---------------- */
.app{
  max-width:var(--maxw); margin:0 auto; padding:26px 18px 72px;
  min-height:60vh; outline:none;
}
.site-foot{border-top:1px solid var(--line); background:var(--card); margin-top:40px}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:26px 18px 40px}
.foot-brand{font-family:var(--disp); font-weight:700; letter-spacing:.1em; margin:0 0 6px}
.foot-note{font-size:12.5px; color:var(--muted); line-height:1.8; margin:0 0 8px}
.foot-meta{font-size:11px; color:var(--muted); font-family:var(--mono); margin:0}

.section{margin:0 0 44px}
.section-head{display:flex; align-items:flex-end; gap:12px; margin:0 0 16px; flex-wrap:wrap}
.section-head h2{
  font-size:20px; margin:0; letter-spacing:.02em;
  display:flex; align-items:center; gap:9px;
}
.section-head .sub{font-size:13px; color:var(--muted); margin:0}

h1.page-title{font-size:27px; line-height:1.4; margin:0 0 6px; letter-spacing:.01em}
.page-lead{color:var(--muted); font-size:14.5px; margin:0 0 24px}

.crumb{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
  margin:0 0 14px; flex-wrap:wrap;
}
.crumb a{text-decoration:none; color:var(--muted)}
.crumb a:hover{color:var(--accent); text-decoration:underline}

/* ---------------- ホーム：今日のカード ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px 28px 26px; box-shadow:var(--shadow-lg); margin:0 0 30px;
}
.hero::after{
  content:""; position:absolute; inset:auto -60px -110px auto; width:280px; height:280px;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); pointer-events:none;
}
.hero-eyebrow{
  font-family:var(--disp); font-size:11px; letter-spacing:.2em; color:var(--accent-ink);
  text-transform:uppercase; margin:0 0 8px; font-weight:600;
}
.hero h1{font-size:26px; line-height:1.5; margin:0 0 10px; letter-spacing:.01em}
.hero p.hero-sub{color:var(--muted); font-size:14.5px; margin:0 0 20px; max-width:56ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1}

.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid transparent; border-radius:12px; padding:11px 20px;
  font-size:14.5px; font-weight:700; text-decoration:none; transition:transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:var(--bg)}
.btn-primary:hover{background:var(--accent)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--card); border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn-lg{padding:14px 26px; font-size:15.5px; border-radius:14px}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn .kbd{font-family:var(--mono); font-size:11px; opacity:.6}

/* ステータス4連 */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 34px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 16px; box-shadow:var(--shadow);
}
.stat .k{font-size:11.5px; color:var(--muted); letter-spacing:.06em; margin:0 0 4px}
.stat .v{font-family:var(--mono); font-size:24px; font-weight:700; line-height:1.2; margin:0}
.stat .v small{font-family:var(--body); font-size:12px; font-weight:400; color:var(--muted); margin-left:3px}
.stat .bar{height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:9px}
.stat .bar i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .6s ease}

/* ---------------- 分野・コースカード ---------------- */
.subject-band{
  display:flex; align-items:center; gap:12px; padding:12px 16px; margin:0 0 16px;
  border-radius:var(--r-m); border:1px solid var(--line);
  background:linear-gradient(100deg, var(--sub-soft,var(--card-2)), var(--card));
}
.subject-band .ico{font-size:24px; line-height:1}
.subject-band h2{margin:0; font-size:18px}
.subject-band p{margin:0; font-size:12.5px; color:var(--muted)}

.course-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.course-card{
  position:relative; display:flex; flex-direction:column; gap:12px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:20px 20px 18px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  overflow:hidden;
}
.course-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sub-color,var(--accent));
}
.course-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.course-card .cc-top{display:flex; align-items:flex-start; gap:12px}
.course-card .cc-ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-size:22px; background:var(--card-2); border:1px solid var(--line);
}
.course-card h3{margin:0 0 3px; font-size:16.5px; line-height:1.5}
.course-card .cc-sub{margin:0; font-size:12.5px; color:var(--muted); line-height:1.65}
.course-card .cc-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--muted)}
.tag{
  display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700;
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2);
}
.tag.lv{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink)}
.tag.done{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.cc-progress{display:flex; align-items:center; gap:10px; margin-top:auto}
.cc-progress .bar{flex:1; height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.cc-progress .bar i{display:block; height:100%; background:var(--sub-color,var(--accent)); border-radius:99px; transition:width .6s}
.cc-progress .pct{font-family:var(--mono); font-size:12px; color:var(--muted); min-width:38px; text-align:right}

.soon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.soon{
  border:1px dashed var(--line-strong); border-radius:var(--r-m); padding:16px;
  color:var(--muted); font-size:13px; text-align:center; background:transparent;
}
.soon .ico{display:block; font-size:22px; margin-bottom:6px; opacity:.55}

/* ---------------- レッスン一覧（タイムライン） ---------------- */
.lesson-list{list-style:none; margin:0; padding:0; position:relative}
.lesson-list::before{
  content:""; position:absolute; left:19px; top:22px; bottom:22px; width:2px; background:var(--line);
}
.lesson-item{position:relative; margin:0 0 8px}
.lesson-item a{
  display:flex; gap:14px; align-items:center; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 16px; transition:border-color .15s, transform .12s;
}
.lesson-item a:hover{border-color:var(--accent); transform:translateX(2px)}
.lesson-item .no{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:14px; font-weight:700;
  background:var(--card); border:2px solid var(--line-strong); color:var(--muted); z-index:1;
}
.lesson-item.is-done .no{background:var(--ok); border-color:var(--ok); color:#fff}
.lesson-item.is-next .no{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.lesson-item .li-body{display:block; flex:1 1 auto; min-width:0}
.lesson-item .li-title{display:block; font-size:15px; font-weight:600; margin:0 0 2px; line-height:1.5}
.lesson-item .li-goal{display:block; font-size:12px; color:var(--muted); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lesson-item .li-min{flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--muted)}

/* ---------------- レッスン本文 ---------------- */
.reading{max-width:70ch; margin:0 auto}
.progress-strip{
  position:sticky; top:57px; z-index:20; height:4px; background:var(--line);
  border-radius:99px; overflow:hidden; margin:0 0 22px;
}
.progress-strip i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s}

.goal-box{
  border:1px solid var(--accent); border-left-width:5px; border-radius:var(--r-m);
  background:var(--accent-soft); padding:14px 18px; margin:0 0 28px;
}
.goal-box .lbl{
  font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--accent-ink);
  display:block; margin-bottom:4px;
}
.goal-box p{margin:0; font-size:14.5px; font-weight:600; line-height:1.7; color:var(--ink)}

.reading h3{
  font-size:19px; margin:38px 0 12px; padding-left:14px; line-height:1.55;
  border-left:4px solid var(--accent); letter-spacing:.01em;
}
.reading p{margin:0 0 16px; font-size:15.5px; line-height:2}
.reading strong{font-weight:700; background:linear-gradient(transparent 62%, var(--accent-soft) 62%); padding:0 1px}
.reading code{
  font-family:var(--mono); font-size:.88em; background:var(--card-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}
.term-chip{
  border-bottom:2px dotted var(--accent); cursor:help; font-weight:600;
}
.reading ul,.reading ol{margin:0 0 18px; padding-left:1.4em}
.reading li{margin:0 0 7px; line-height:1.9; font-size:15px}

.note{
  border-radius:var(--r-m); padding:14px 18px; margin:0 0 20px;
  border:1px solid var(--line); background:var(--card); font-size:14.5px; line-height:1.85;
}
.note .nt{display:block; font-weight:700; font-size:13px; margin-bottom:4px; letter-spacing:.03em}
.note p{margin:0; font-size:14.5px; line-height:1.85}
.note-point{background:var(--accent-soft); border-color:transparent; border-left:4px solid var(--accent)}
.note-point .nt{color:var(--accent-ink)}
.note-warn{background:var(--ng-soft); border-color:transparent; border-left:4px solid var(--ng)}
.note-warn .nt{color:var(--ng)}
.note-tip{background:var(--info-soft); border-color:transparent; border-left:4px solid var(--info)}
.note-tip .nt{color:var(--info)}
.note-example{background:var(--card-2); border-left:4px solid var(--line-strong)}
.note-example .nt{color:var(--muted)}

.tbl-wrap{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--card)}
table.data{border-collapse:collapse; width:100%; font-size:14px; min-width:440px}
table.data th,table.data td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); line-height:1.7}
table.data thead th{background:var(--card-2); font-size:12.5px; letter-spacing:.04em; white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num,table.data th.num{font-family:var(--mono); text-align:right; white-space:nowrap}
.tbl-note{font-size:12px; color:var(--muted); margin:-14px 0 22px; padding-left:2px}

.steps{list-style:none; counter-reset:st; margin:0 0 24px; padding:0}
.steps li{
  counter-increment:st; position:relative; padding:0 0 18px 46px; margin:0;
  border-left:2px solid var(--line); margin-left:15px;
}
.steps li:last-child{border-left-color:transparent; padding-bottom:0}
.steps li::before{
  content:counter(st); position:absolute; left:-16px; top:-2px;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-family:var(--mono); font-size:13px; font-weight:700;
}
.steps li b{display:block; font-size:15px; margin-bottom:3px}
.steps li span{font-size:14px; color:var(--ink-2); line-height:1.85}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 24px}
.compare .col{border:1px solid var(--line); border-radius:var(--r-m); padding:16px; background:var(--card)}
.compare .col h4{margin:0 0 10px; font-size:14.5px; display:flex; align-items:center; gap:6px}
.compare .col ul{margin:0; padding-left:1.2em}
.compare .col li{font-size:13.5px; line-height:1.8; margin-bottom:5px}
.compare .col.a{border-top:4px solid var(--info)}
.compare .col.b{border-top:4px solid var(--ok)}

.fig{margin:0 0 26px; text-align:center}
.fig svg{max-width:100%; height:auto; border-radius:var(--r-m)}
.fig figcaption{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.7}

/* めくるカード（想起練習） */
.flip{
  width:100%; text-align:left; cursor:pointer; margin:0 0 22px; padding:0;
  background:none; border:none;
}
.flip .fc{
  display:block;
  border:2px dashed var(--accent); border-radius:var(--r-m); padding:18px 20px;
  background:var(--card); transition:background .2s;
}
.flip:hover .fc{background:var(--accent-soft)}
.flip .q{display:block; margin:0; font-size:15.5px; font-weight:700; line-height:1.75}
.flip .hint{display:block; font-size:11.5px; color:var(--accent-ink); margin-top:8px; letter-spacing:.06em}
.flip .a{
  display:block; margin:14px 0 0; padding-top:14px; border-top:1px dashed var(--line-strong);
  font-size:14.5px; line-height:1.9; color:var(--ink-2);
}
.flip[aria-expanded="false"] .a{display:none}
.flip[aria-expanded="true"] .fc{border-style:solid; background:var(--card)}
.flip[aria-expanded="true"] .hint{display:none}

.keypoints{
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--card-2);
  padding:18px 22px; margin:30px 0 24px;
}
.keypoints .nt{font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:10px}
.keypoints ul{margin:0; padding-left:1.2em}
.keypoints li{font-size:14.5px; line-height:1.9; margin-bottom:6px; font-weight:600}

/* ---------------- クイズ ---------------- */
.quiz-block{
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--card);
  padding:22px; margin:0 0 22px; box-shadow:var(--shadow);
}
.quiz-block .qlabel{
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--accent-ink);
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.quiz-block .qtext{font-size:16px; font-weight:700; line-height:1.8; margin:0 0 16px}
.choices{display:flex; flex-direction:column; gap:9px; margin:0 0 4px}
.choice{
  display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 15px; font-size:14.5px; line-height:1.7; transition:border-color .15s, background .15s;
}
.choice:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.choice .mk{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:700;
  background:var(--card-2); border:1px solid var(--line); color:var(--muted);
}
.choice.correct{border-color:var(--ok); background:var(--ok-soft)}
.choice.correct .mk{background:var(--ok); color:#fff; border-color:var(--ok)}
.choice.wrong{border-color:var(--ng); background:var(--ng-soft)}
.choice.wrong .mk{background:var(--ng); color:#fff; border-color:var(--ng)}
.choice:disabled{cursor:default; opacity:1}
.choice.dim{opacity:.5}

.explain{
  margin:14px 0 0; padding:13px 16px; border-radius:11px; font-size:14px; line-height:1.85;
  background:var(--card-2); border-left:4px solid var(--ok);
}
.explain.ng{border-left-color:var(--ng)}
.explain b{display:block; margin-bottom:3px; font-size:13px}

/* レッスン下部の理解度チェック */
.check-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:44px 0 16px; padding-top:26px; border-top:2px solid var(--line); flex-wrap:wrap;
}
.check-head h3{margin:0; font-size:19px; border:none; padding:0; display:flex; align-items:center; gap:8px}
.check-head .cnt{font-family:var(--mono); font-size:13px; color:var(--muted)}

.finish-card{
  text-align:center; border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--card); padding:30px 24px; margin:26px 0 0; box-shadow:var(--shadow);
}
.finish-card .big{font-size:44px; line-height:1; margin:0 0 10px}
.finish-card h3{margin:0 0 6px; font-size:20px; border:none; padding:0}
.finish-card p{color:var(--muted); font-size:14px; margin:0 0 18px}
.finish-card .score{font-family:var(--mono); font-size:15px; margin:0 0 16px}

.lesson-nav{display:flex; gap:10px; justify-content:space-between; margin:34px 0 0; flex-wrap:wrap}

/* メモ欄 */
.memo{margin:30px 0 0; border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); padding:16px 18px}
.memo label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:8px; letter-spacing:.04em}
.memo textarea{
  width:100%; min-height:84px; resize:vertical; font:inherit; font-size:14px; line-height:1.8;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  background:var(--card-2); color:var(--ink);
}
.memo textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.memo .saved{font-size:11.5px; color:var(--ok); margin:7px 0 0; height:16px}

/* ---------------- シミュレーター ---------------- */
.sim{
  border:1px solid var(--line-strong); border-radius:var(--r-l); background:var(--card);
  padding:22px; margin:0 0 26px; box-shadow:var(--shadow);
}
.sim h4{margin:0 0 4px; font-size:16px; display:flex; align-items:center; gap:8px}
.sim .sim-sub{margin:0 0 18px; font-size:12.5px; color:var(--muted)}
.sim-controls{display:grid; gap:16px; margin-bottom:20px}
.ctl label{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:6px}
.ctl label b{font-family:var(--mono); font-size:15px; color:var(--accent-ink)}
.ctl input[type=range]{width:100%; accent-color:var(--accent); height:22px}
.sim-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:12px}
.sim-out .o{background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 12px}
.sim-out .o .k{font-size:11.5px; color:var(--muted); margin:0 0 3px}
.sim-out .o .v{font-family:var(--mono); font-size:18px; font-weight:700; margin:0; line-height:1.3; white-space:nowrap}
.sim-out .o.hl{background:var(--accent-soft); border-color:transparent}
.sim-out .o.hl .v{color:var(--accent-ink)}
.sim-chart{margin-top:18px}
.sim-chart svg{width:100%; height:auto; display:block}
.sim-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px}
.sim-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}

/* ---------------- 復習 ---------------- */
.review-wrap{max-width:640px; margin:0 auto}
.review-meter{display:flex; align-items:center; gap:12px; margin:0 0 20px}
.review-meter .bar{flex:1; height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.review-meter .bar i{display:block; height:100%; background:var(--accent); transition:width .3s}
.review-meter .n{font-family:var(--mono); font-size:13px; color:var(--muted)}
.review-src{font-size:12px; color:var(--muted); margin:14px 0 0; text-align:center}
.review-src a{color:var(--accent-ink)}

.empty{
  text-align:center; padding:48px 24px; border:1px dashed var(--line-strong);
  border-radius:var(--r-l); color:var(--muted);
}
.empty .big{font-size:40px; margin-bottom:10px; display:block}
.empty p{margin:0 0 6px; font-size:14.5px}

/* ---------------- 記録ページ ---------------- */
.level-card{
  display:flex; align-items:center; gap:20px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-l); padding:22px 24px;
  margin:0 0 26px; box-shadow:var(--shadow); flex-wrap:wrap;
}
.level-ring{flex:0 0 auto; position:relative; width:94px; height:94px}
.level-ring svg{transform:rotate(-90deg)}
.level-ring .lv{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; line-height:1.1;
}
.level-ring .lv b{font-family:var(--mono); font-size:27px; display:block}
.level-ring .lv span{font-size:10px; color:var(--muted); letter-spacing:.1em}
.level-card .lc-body{flex:1 1 220px}
.level-card .lc-body h3{margin:0 0 4px; font-size:19px}
.level-card .lc-body p{margin:0 0 12px; font-size:13px; color:var(--muted)}
.level-card .xpbar{height:9px; background:var(--line); border-radius:99px; overflow:hidden}
.level-card .xpbar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#f0a860); border-radius:99px; transition:width .6s}
.level-card .xptext{font-family:var(--mono); font-size:12px; color:var(--muted); margin:7px 0 0}

.heat{display:flex; gap:3px; overflow-x:auto; padding:4px 0 8px}
.heat-col{display:flex; flex-direction:column; gap:3px}
.heat-cell{width:12px; height:12px; border-radius:3px; background:var(--line); flex:0 0 auto}
.heat-cell.l1{background:color-mix(in srgb, var(--accent) 32%, var(--line))}
.heat-cell.l2{background:color-mix(in srgb, var(--accent) 62%, var(--line))}
.heat-cell.l3{background:var(--accent)}
.heat-legend{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-top:6px}

.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.badge{
  text-align:center; border:1px solid var(--line); border-radius:var(--r-m);
  padding:16px 12px; background:var(--card);
}
.badge .bi{font-size:30px; display:block; margin-bottom:7px; filter:grayscale(1); opacity:.32}
.badge b{display:block; font-size:13px; margin-bottom:3px}
.badge span{font-size:11.5px; color:var(--muted); line-height:1.6; display:block}
.badge.got{border-color:var(--accent); background:var(--accent-soft)}
.badge.got .bi{filter:none; opacity:1}

.danger-zone{margin-top:44px; padding-top:20px; border-top:1px solid var(--line)}
.danger-zone p{font-size:12.5px; color:var(--muted); margin:0 0 10px}
.btn-danger{background:transparent; border:1px solid var(--ng); color:var(--ng); font-size:13px; padding:8px 16px}
.btn-danger:hover{background:var(--ng); color:#fff}

/* ---------------- 用語集 ---------------- */
.search-box{position:relative; margin:0 0 22px}
.search-box input{
  width:100%; font:inherit; font-size:15px; padding:13px 16px 13px 42px;
  border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink);
  box-shadow:var(--shadow);
}
.search-box input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.search-box .si{position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.4}

.gloss{display:grid; gap:10px}
.gterm{border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); padding:15px 18px}
.gterm h4{margin:0 0 5px; font-size:15.5px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.gterm h4 .rd{font-size:11.5px; color:var(--muted); font-weight:400}
.gterm p{margin:0 0 7px; font-size:14px; line-height:1.85; color:var(--ink-2)}
.gterm .from{font-size:11.5px; color:var(--muted)}
.gterm .from a{color:var(--accent-ink)}

/* ---------------- トースト ---------------- */
.toast-area{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{
  background:var(--ink); color:var(--bg); border-radius:99px; padding:10px 22px;
  font-size:14px; font-weight:700; box-shadow:var(--shadow-lg);
  animation:pop .35s cubic-bezier(.2,1.4,.4,1);
}
.toast.xp{background:var(--accent); color:#fff}
.toast.badge{background:var(--ok); color:#fff}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.9)} to{opacity:1; transform:none}}

.confetti{position:fixed; inset:0; pointer-events:none; z-index:150; overflow:hidden}
.confetti i{position:absolute; width:9px; height:14px; border-radius:2px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg); opacity:.15}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------------- レスポンシブ ---------------- */
@media (max-width:860px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .app{padding:20px 14px 60px}
  .topnav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px;
    background:var(--card); border-bottom:1px solid var(--line); padding:10px 14px 14px; margin:0;
  }
  .topnav.open{display:flex}
  .topnav a{padding:11px 14px; border-radius:10px; font-size:15px}
  .only-mobile{display:grid}
  .brand-text small{display:none}
  .hero{padding:22px 20px; border-radius:var(--r-l)}
  .hero h1{font-size:21px}
  .reading h3{font-size:17.5px}
  .reading p{font-size:15px}
  .hero-actions .btn{flex:1 1 100%; justify-content:center}
  .level-card{gap:14px}
  .progress-strip{top:53px}
}