/* 第3版の加筆（js/v3.js）。色は app.css のトークンをそのまま使う（夜モードも自動） */

/* ---------- 目から鱗の一言 ---------- */
.x3-hook{margin:18px 0 0;border-radius:22px;padding:18px 18px 16px;background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.x3-hook::after{content:"";position:absolute;right:-56px;top:-56px;width:120px;height:120px;border-radius:50%;background:var(--c);opacity:.22}
.x3-hook small{position:relative;display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.14em;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);padding:2px 9px;border-radius:999px}
.x3-hook b{position:relative;display:block;margin-top:8px;font-family:var(--fh);font-weight:900;font-size:clamp(19px,5.4vw,23px);line-height:1.5}
.x3-hook mark{background:none;color:var(--c);padding:0}

/* ---------- ○×クイズ ---------- */
.x3-quiz{display:flex;flex-direction:column;gap:10px}
.x3-q{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:14px 14px 12px}
.x3-q .qq{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.x3-q .qn{font-family:var(--fn);font-weight:800;font-size:13px;color:#fff;background:var(--c);border-radius:9px;padding:3px 8px;line-height:1.3}
.x3-q .qq b{font-family:var(--fh);font-weight:900;font-size:16.5px;line-height:1.55}
.x3-q .qb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.x3-q .qb button{border:none;border-radius:14px;padding:10px 0;font-family:var(--fn);font-weight:800;font-size:24px;line-height:1;background:var(--bg2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2);transition:transform .12s}
.x3-q .qb button:active{transform:scale(.97)}
.x3-q .qx{display:none;margin-top:10px;padding:11px 13px;border-radius:14px;background:var(--bg2);font-size:14.5px;line-height:1.75}
.x3-q .qx .res{font-weight:900;margin-right:2px}
.x3-q.done .qx{display:block;animation:x3in .3s ease}
.x3-q.done .qb button{opacity:.45}
.x3-q.done .qb button.pick{opacity:1}
.x3-q.ok .qb button.pick{background:var(--ok);color:#fff;box-shadow:none}
.x3-q.ng .qb button.pick{background:var(--ng);color:#fff;box-shadow:none}
.x3-q.ok .qx{background:var(--vbg)} .x3-q.ok .res{color:var(--vdk)}
.x3-q.ng .qx{background:var(--rbg)} .x3-q.ng .res{color:var(--rdk)}
@keyframes x3in{from{opacity:0;transform:translateY(-4px)}}

/* ---------- 完全攻略 ---------- */
.x3-full{margin-top:26px}
.x3-band{border-radius:24px;padding:18px;background:linear-gradient(125deg,var(--c),color-mix(in srgb,var(--c) 55%,#1a1030));color:#fff}
.x3-band small{font-size:11.5px;font-weight:900;letter-spacing:.16em;opacity:.85}
.x3-band b{display:block;font-family:var(--fh);font-weight:900;font-size:clamp(24px,7vw,30px);line-height:1.3;margin-top:2px}
.x3-band span{display:block;font-size:13.5px;opacity:.95;margin-top:6px;line-height:1.6}
.x3-toc{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.x3-toc a{font-size:13px;font-weight:900;text-decoration:none;color:var(--c);background:var(--cbg,var(--bg2));padding:7px 12px;border-radius:999px}
.x3-sh{margin:30px 2px 12px;scroll-margin-top:72px}
.x3-sh span{display:block;font-family:var(--fn);font-weight:800;font-size:11.5px;letter-spacing:.16em;color:var(--c)}
.x3-sh h2{margin:2px 0 0;font-family:var(--fh);font-size:21px;font-weight:900;line-height:1.4}
.x3-lead{margin:-4px 2px 12px;font-size:15px;color:var(--sub);line-height:1.75}

/* ほどき方のステップ */
.x3-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;position:relative}
.x3-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;position:relative;padding-bottom:14px}
.x3-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:color-mix(in srgb,var(--c) 30%,transparent)}
.x3-steps .n{width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:18px;position:relative;z-index:1}
.x3-steps li>div{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px}
.x3-steps b{display:block;font-family:var(--fh);font-weight:900;font-size:16.5px;line-height:1.45}
.x3-steps p{margin:3px 0 0;font-size:14.5px;line-height:1.75}
.x3-steps .ex{margin-top:9px;padding:10px 12px;border-radius:12px;background:var(--bg2);font-size:14px;line-height:1.75;border-left:4px solid var(--c)}
.x3-steps.sm .n{width:28px;height:28px;font-size:14px}
.x3-steps.sm li{grid-template-columns:28px 1fr;gap:10px;padding-bottom:8px}
.x3-steps.sm li:not(:last-child)::before{left:13px;top:28px}
.x3-steps.sm li>div{box-shadow:none;background:var(--bg2);padding:8px 12px}
.x3-steps.sm p{margin:0}

/* ✕選択肢の正体 */
.x3-ch{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:14px;margin:10px 0}
.x3-ch .ty{display:inline-block;font-size:12.5px;font-weight:900;color:#fff;background:var(--ng);border-radius:8px;padding:3px 10px}
.x3-ch .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.x3-ch .pair>div{border-radius:14px;padding:10px 12px}
.x3-ch .pair small{display:block;font-size:11.5px;font-weight:900;margin-bottom:2px}
.x3-ch .pair p{margin:0;font-size:14px;line-height:1.6}
.x3-ch .b{background:var(--lbg)} .x3-ch .b small{color:var(--ldk)}
.x3-ch .x{background:var(--rbg)} .x3-ch .x small{color:var(--rdk)}
.x3-ch .x p{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ng) 55%,transparent)}
.x3-ch .why{margin-top:9px;font-size:14.5px;line-height:1.7}
.x3-ch .why::before{content:"ズレ → ";font-weight:900;color:var(--ng)}
@media (max-width:420px){.x3-ch .pair{grid-template-columns:1fr}}

/* 超絶テク6 */
.x3-hk6{display:flex;flex-direction:column;gap:10px}
.x3-hk6 .it{display:grid;grid-template-columns:34px 1fr;gap:12px;background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:14px}
.x3-hk6 .n{width:34px;height:34px;border-radius:11px;background:var(--cbg);color:var(--c);display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:16px}
.x3-hk6 b{display:block;font-family:var(--fh);font-weight:900;font-size:17px;line-height:1.45}
.x3-hk6 p{margin:4px 0 0;font-size:14.5px;line-height:1.75}
.x3-hk6 .eye{margin-top:8px;padding:8px 11px;border-radius:12px;background:var(--ubg);font-size:13.5px;font-weight:700;line-height:1.65}
.x3-hk6 .eye::before{content:"目から鱗 ";color:var(--udk);font-weight:900}

/* 得点帯のはしご */
.x3-lad{display:flex;flex-direction:column-reverse;gap:8px}
.x3-lad .lv{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto;gap:6px 12px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px;margin-left:calc(var(--i) * 10px)}
.x3-lad .t{grid-row:1/3;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--c) calc(18% + var(--i) * 22%),var(--card));color:var(--ink);text-align:center;padding:6px}
.x3-lad .lv:nth-child(n+3) .t{color:#fff}
.x3-lad .t b{font-family:var(--fh);font-weight:900;font-size:13px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.x3-lad .w,.x3-lad .f{font-size:14px;line-height:1.7}
.x3-lad small{display:inline-block;font-size:11px;font-weight:900;margin-right:6px;padding:1px 7px;border-radius:6px}
.x3-lad .w small{background:var(--rbg);color:var(--rdk)} .x3-lad .f small{background:var(--vbg);color:var(--vdk)}
@media (max-width:420px){.x3-lad .lv{grid-template-columns:1fr;margin-left:0}.x3-lad .t{grid-row:auto;justify-items:start;padding:4px 10px}}

/* 練習メニュー */
.x3-tr{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px;margin:10px 0;border-left:5px solid var(--c)}
.x3-tr .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.x3-tr b{font-family:var(--fh);font-weight:900;font-size:16.5px}
.x3-tr p{margin:6px 0 0;font-size:14.5px;line-height:1.75}

/* 10分前の3行 */
.x3-last{margin-top:22px;border-radius:24px;background:var(--ink);color:var(--bg);padding:18px;scroll-margin-top:72px}
.x3-last small{font-size:11.5px;font-weight:900;letter-spacing:.12em;opacity:.7}
.x3-last b{display:block;font-family:var(--fh);font-weight:900;font-size:19px;line-height:1.5;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.x3-last b:last-of-type{border-bottom:none}
.x3-last .btn{margin-top:10px;background:var(--bg);color:var(--ink)}

/* ハブ・ホームの入口 */
.x3-hubx .banner{margin-top:10px}
.x3-nb{background:linear-gradient(120deg,#15171c,#3b2f7a)}
.x3-hb{background:linear-gradient(120deg,var(--r),#ff8a3d)}
.x3-lh{display:flex;gap:5px;align-items:flex-start;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--c);line-height:1.55}
.x3-lh svg{flex:0 0 auto;width:14px;height:14px;margin-top:2px}
.x3-lh mark{background:none;color:inherit;padding:0}
.x3-home{display:block;text-decoration:none;color:var(--ink)}
.x3-home .hd{display:flex;gap:10px;align-items:center}
.x3-home .ph{flex:0 0 auto;font-size:13px;font-weight:900;color:#fff;background:var(--u);border-radius:10px;padding:5px 10px}
.x3-home .hd b{font-family:var(--fh);font-weight:900;font-size:16.5px;line-height:1.45}
.x3-home .gl{margin:10px 0 6px;padding:10px 12px;border-radius:14px;background:var(--ubg);font-size:14px;line-height:1.7}
.x3-home .gl small{display:block;font-size:11px;font-weight:900;color:var(--udk)}
.x3-home .mu{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.x3-home .mu span{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:var(--bg2);display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:13px}
.x3-home .mu b{font-size:14.5px}
.x3-home .go{margin-top:8px;font-size:13px;font-weight:900;color:var(--u)}

/* ---------- 残り日数ナビ ---------- */
.x3-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding:4px 16px 6px}
.x3-strip::-webkit-scrollbar{display:none}
.x3-strip button{flex:0 0 auto;position:relative;border:none;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);padding:8px 12px 9px;text-align:left;min-width:86px;color:var(--ink)}
.x3-strip button small{display:block;font-family:var(--fn);font-size:11.5px;font-weight:700;color:var(--sub)}
.x3-strip button b{display:block;font-family:var(--fh);font-weight:900;font-size:14px;white-space:nowrap}
.x3-strip button i{position:absolute;top:-7px;right:6px;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:var(--r);border-radius:999px;padding:1px 7px}
.x3-strip button.now{box-shadow:inset 0 0 0 2px var(--r)}
.x3-strip button.on{background:var(--u);box-shadow:none;color:#fff}
.x3-strip button.on small{color:rgba(255,255,255,.85)}
.x3-phc{margin-top:12px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);padding:18px}
.x3-phc .k{font-size:12px;font-weight:900;color:var(--u);letter-spacing:.06em}
.x3-phc h2{margin:2px 0 0;font-family:var(--fh);font-size:28px;font-weight:900;line-height:1.3}
.x3-phc .c{margin:4px 0 0;font-size:16px;font-weight:700;line-height:1.6}
.x3-phc .gl{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--ubg);font-size:15px;line-height:1.7}
.x3-phc .gl small,.x3-phc .sp small{display:block;font-size:11.5px;font-weight:900;color:var(--udk);margin-bottom:2px}
.x3-phc .sp{margin-top:12px}
.x3-phc .sp small{color:var(--sub)}
.x3-phc .bar{display:flex;height:34px;border-radius:12px;overflow:hidden;gap:2px}
.x3-phc .bar i{display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#fff;white-space:nowrap;min-width:0;overflow:hidden}
.x3-day .d{color:var(--u);font-weight:800}
.x3-rx{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.x3-rx .rx{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px;transition:opacity .2s}
.x3-rx .rx b{font-family:var(--fh);font-weight:900;font-size:15px;color:var(--u)}
.x3-rx .rx p{margin:4px 0 0;font-size:14.5px;line-height:1.75}
.x3-rx .rx.on{box-shadow:inset 0 0 0 2.5px var(--u),var(--shadow)}
.x3-rx .rx.off{display:none}
.x3-m{background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin:10px 0;overflow:hidden}
.x3-m summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:14px;cursor:pointer}
.x3-m summary::-webkit-details-marker{display:none}
.x3-m .tg{font-family:var(--fn);font-weight:800;font-size:12px;color:#fff;background:var(--c);border-radius:8px;padding:3px 8px;min-width:30px;text-align:center}
.x3-m summary b{font-family:var(--fh);font-weight:900;font-size:16.5px;line-height:1.4}
.x3-m summary small{font-size:12px;color:var(--sub);font-weight:700;white-space:nowrap}
.x3-m .in{padding:0 14px 14px;--c:var(--u)}
.x3-m .who{font-size:13.5px;color:var(--sub);margin-bottom:8px}
.x3-m .eye{padding:10px 12px;border-radius:14px;background:var(--ubg);font-size:14.5px;font-weight:700;line-height:1.7;margin-bottom:10px}
.x3-m .eye::before{content:"目から鱗 ";color:var(--udk);font-weight:900}
.x3-m .ng{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:14px;color:var(--rdk)}
.x3-ngl{display:flex;flex-direction:column;gap:8px}
.x3-ngl div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:11px 14px;font-size:14.5px;line-height:1.65}
.x3-ngl i{width:30px;height:30px;border-radius:50%;background:var(--rbg);color:var(--ng);display:grid;place-items:center;font-style:normal;font-weight:900}

/* ---------- 超絶テク図鑑 ---------- */
.x3-hh{background:linear-gradient(125deg,#15171c,#3a2a6e 60%,#ff5a47 140%);color:#fff}
.x3-cards{display:flex;flex-direction:column;gap:10px}
.x3-hk{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:16px;cursor:pointer;position:relative;outline:none;transition:box-shadow .2s}
.x3-hk:focus-visible{box-shadow:0 0 0 3px var(--c)}
.x3-hk .no{font-family:var(--fn);font-weight:800;font-size:12.5px;color:var(--faint)}
.x3-hk .lv{margin-left:8px;font-size:11px;font-weight:900;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);padding:2px 8px;border-radius:7px}
.x3-hk .t{display:block;margin-top:4px;font-family:var(--fh);font-weight:900;font-size:18px;line-height:1.45}
.x3-hk .my{margin-top:8px;font-size:15px;color:var(--sub);line-height:1.7}
.x3-hk .my small{display:block;font-size:11.5px;font-weight:900;color:var(--ng)}
.x3-hk .tap{margin-top:10px;font-size:13px;font-weight:900;color:var(--c)}
.x3-hk .tap::before{content:"▼ "}
.x3-hk.seen::after{content:"済";position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--sub);font-size:11px;font-weight:900;display:grid;place-items:center}
.x3-hk .bk{display:none;margin-top:12px;padding-top:12px;border-top:2px dashed var(--line2)}
.x3-hk.on .bk{display:block;animation:x3in .3s ease}
.x3-hk.on .tap{display:none}
.x3-hk.on .my{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ng) 60%,transparent)}
.x3-hk .tr{font-family:var(--fh);font-weight:900;font-size:16.5px;line-height:1.65}
.x3-hk .tr small{display:block;font-size:11.5px;font-weight:900;color:var(--ok)}
.x3-hk ol{margin:10px 0 0;padding-left:1.4em;font-size:14.5px;line-height:1.75}
.x3-hk ol li::marker{font-family:var(--fn);font-weight:800;color:var(--c)}
.x3-hk .ex{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--bg2);border-left:4px solid var(--c);font-size:14px;line-height:1.7}
.x3-hk .ex p{margin:0}.x3-hk .ex p+p{margin-top:4px}

/* 印刷：畳んだ所も全部出す */
@media print{
  .x3-hk .bk,.x3-q .qx{display:block!important}
  .x3-hk .tap,.x3-q .qb,.x3-toc,.x3-strip{display:none!important}
  .x3-rx .rx.off{display:block!important}
  .x3-hook,.x3-band,.x3-last,.x3-hh{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- 大問ページ：4ステップ ---------- */
.x3-how{margin:12px 0 0;padding:12px 14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow);font-size:14px;line-height:1.7;border-left:5px solid var(--c)}
.x3-how>b{display:block;font-family:var(--fh);font-weight:900;font-size:15px}
.x3-how span b{color:var(--c)}
.x3-tabs{position:sticky;top:54px;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px -16px 0;padding:8px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.x3-tabs button{border:none;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);padding:7px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);min-width:0}
.x3-tabs i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:13px;background:var(--bg2);color:var(--sub)}
.x3-tabs b{font-family:var(--fh);font-weight:900;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.x3-tabs small{font-size:10.5px;color:var(--sub);font-weight:700}
.x3-tabs button.dn i{background:var(--vbg);color:var(--vdk)}
.x3-tabs button.on{background:var(--c);box-shadow:0 6px 16px -8px var(--c)}
.x3-tabs button.on i{background:#fff;color:var(--c)}
.x3-tabs button.on b,.x3-tabs button.on small{color:#fff}
.x3-pane{display:none}
.x3-pane.on{display:block;animation:x3in .25s ease}
.x3-ph{margin:18px 2px 4px}
.x3-ph span{font-family:var(--fn);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--c)}
.x3-ph h2{margin:2px 0 0;font-family:var(--fh);font-weight:900;font-size:clamp(22px,6.4vw,27px);line-height:1.35}
.x3-body>.x3-blk:first-child .x3-sh{margin-top:14px}
.x3-blk .x3-sh{margin:28px 2px 10px}
.x3-body>.sum,.x3-body>.x3-hook{margin-top:16px}
.x3-next{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:28px 0 8px}
.x3-next .btn.big{justify-content:center;white-space:normal;line-height:1.4}
.x3-next .btn.sm{align-self:center}
.x3-fin{padding:16px;border-radius:18px;background:var(--cbg,var(--bg2));font-size:15px;line-height:1.7;text-align:center}
.x3-fin b{color:var(--c)}
/* どんな問題？（灰色の飾り線をやめて、見出し＋説明の表に） */
.x3-look{display:flex!important;flex-direction:column;gap:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.x3-look .pp{display:grid!important;grid-template-columns:96px 1fr;gap:12px;align-items:start;width:auto!important;min-height:0!important;transform:none!important;box-shadow:none!important;border-radius:0!important;background:none!important;padding:13px 16px!important;border-top:1px solid var(--line)}
.x3-look .pp:first-child{border-top:none}
.x3-look .pp::before,.x3-look .pp::after{display:none!important}
.x3-look .pp b{font-size:14px!important;color:var(--c);line-height:1.5!important}
.x3-look .pp span{margin:0!important;font-size:14.5px!important;color:var(--ink)!important;line-height:1.7!important}
@media print{.x3-pane{display:block!important}.x3-tabs,.x3-next,.x3-how{display:none!important}}

/* ---------- ナビ：今日のメニュー（チェックリスト） ---------- */
.x3-nvt button{font-size:13.5px}
.x3-todo{margin-top:12px;background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:14px}
.x3-todo .hd{display:flex;justify-content:space-between;align-items:baseline}
.x3-todo .hd b{font-family:var(--fh);font-weight:900;font-size:17px}
.x3-todo .hd span{font-weight:800;color:var(--u);font-size:16px}
.x3-todo .pg{height:8px;border-radius:4px;background:var(--bg2);margin:8px 0 6px;overflow:hidden}
.x3-todo .pg i{display:block;height:100%;background:var(--u);border-radius:4px;transition:width .3s}
.x3-todo .it{width:100%;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;text-align:left;border:none;background:none;border-top:1px solid var(--line);padding:12px 2px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.x3-todo .it:first-of-type{border-top:none}
.x3-todo .bx{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:15px;background:var(--ubg);color:var(--udk)}
.x3-todo .bx svg{width:20px;height:20px}
.x3-todo .it.on .bx{background:var(--ok);color:#fff}
.x3-todo .it.on>span:last-child{color:var(--sub);text-decoration:line-through;text-decoration-color:var(--line2)}
.x3-todo .x3-fin{margin-top:10px}
.x3-top1{margin-top:8px;background:linear-gradient(135deg,var(--card),var(--ubg))}
.x3-top1 h2{font-size:clamp(24px,7vw,30px)}

/* ================================================================
   第3版の見た目：「答案用紙 × 方眼 × 太線」
   太い墨のふち取り＋ずらしたベタ影＋蛍光ペンのマーカー。色は答案用紙のクリーム地に
   朱（R）・空色（L）・ティール（勉強）。既存の部品はトークンの上書きでまとめて変える
   ================================================================ */
:root{
  --bg:#f6f2e8; --bg2:#ebe5d6; --card:#fffdf8; --ink:#1b1812; --sub:#5b5547; --faint:#948c7a;
  --line:#e4dccb; --line2:#cfc5ae;
  --r:#ee4f2b; --rbg:#ffe5da; --rdk:#c2361a;
  --l:#1789d8; --lbg:#dcf0ff; --ldk:#0a62a3;
  --v:#18b07a; --vbg:#d9f5e7; --vdk:#0a7a52;
  --p:#ff9a12; --pbg:#fff0d2; --pdk:#b56600;
  --u:#0e9e9a; --ubg:#d3f3ef; --udk:#067470;
  --ok:#18b07a; --ng:#ee4f2b;
  --edge:#1b1812; --mk:#ffd23f;
  --shadow:0 0 0 2px var(--edge),4px 4px 0 2px var(--edge);
  --shadow2:0 0 0 2px var(--edge),6px 6px 0 2px var(--edge);
  --grid:linear-gradient(color-mix(in srgb,var(--edge) 7%,transparent) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,color-mix(in srgb,var(--edge) 7%,transparent) 1px,transparent 1px) 0 0/18px 18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12110e; --bg2:#1d1b16; --card:#1f1d18; --ink:#f1ece0; --sub:#b7af9e; --faint:#7d7667; --line:#2f2c25; --line2:#433f35;
  --rbg:#3b1d14; --lbg:#0f2a3f; --vbg:#0e2f23; --pbg:#3a2a0e; --ubg:#0d302e;
  --edge:#000; --mk:#8a6d00;
  --shadow:0 0 0 1.5px #5b564a,4px 4px 0 1.5px #000; --shadow2:0 0 0 1.5px #5b564a,6px 6px 0 1.5px #000;
  --grid:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px}}
:root[data-theme="dark"]{
  --bg:#12110e; --bg2:#1d1b16; --card:#1f1d18; --ink:#f1ece0; --sub:#b7af9e; --faint:#7d7667; --line:#2f2c25; --line2:#433f35;
  --rbg:#3b1d14; --lbg:#0f2a3f; --vbg:#0e2f23; --pbg:#3a2a0e; --ubg:#0d302e;
  --edge:#000; --mk:#8a6d00;
  --shadow:0 0 0 1.5px #5b564a,4px 4px 0 1.5px #000; --shadow2:0 0 0 1.5px #5b564a,6px 6px 0 1.5px #000;
  --grid:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/18px 18px}
body{background:var(--bg)}
/* ヘッダー・下のタブ：太線で区切る */
.top{background:var(--card)!important;border-bottom:2px solid var(--edge)}
.logo .mk{border-radius:10px;box-shadow:2px 2px 0 var(--r)}
.tabs{border-top:2px solid var(--edge)!important;background:var(--card)!important}
.tabs a.on span.i{box-shadow:0 0 0 2px var(--edge),2px 2px 0 2px var(--edge)}
/* 見出し：下半分に蛍光ペン */
.h2 h2,.x3-sh h2{display:inline;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--mk) 70%,transparent) 62%);padding:0 2px}
/* ボタン・チップ・切り替え */
.btn{box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 2px var(--edge)}
.btn.ghost{box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge)}
.chip,.tsel button{box-shadow:inset 0 0 0 2px var(--edge)!important;color:var(--ink)!important;background:var(--card)}
.chip.on,.tsel button.on{background:var(--ink)!important;color:var(--bg)!important}
.seg{background:var(--card);box-shadow:0 0 0 2px var(--edge);border-radius:16px}
.seg button{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg);box-shadow:none}
/* 大きな面：方眼をしいて答案用紙っぽく */
.hub-hero,.lh,.door,.banner{box-shadow:var(--shadow);border-radius:22px}
.lh{background:var(--grid),var(--cbg)}
.hub-hero{background-image:var(--grid)}
.hub-hero::after,.door::after{opacity:.6}
.lh .pills span{box-shadow:0 0 0 2px var(--edge)}
.say2 .bub{box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge)}
.sum,.x3-last,.x3-hook{box-shadow:4px 4px 0 0 var(--c,var(--r))}
.lsn .no,.rule .n,.x3-steps .n,.x3-hk6 .n{box-shadow:0 0 0 2px var(--edge)}
.call{box-shadow:0 0 0 2px var(--edge)}
.x3-tabs button{box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge)}
.x3-tabs button.on{box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge)}
.x3-tabs i{box-shadow:0 0 0 1.5px var(--edge)}
.x3-how{border-left:none;box-shadow:var(--shadow);background:var(--grid),var(--card)}
.x3-q .qb button,.x3-todo .bx{box-shadow:0 0 0 2px var(--edge)}
.x3-strip button{box-shadow:0 0 0 2px var(--edge)}
.x3-strip button.now{box-shadow:0 0 0 2px var(--edge),0 0 0 5px var(--r)}
.x3-ch .ty,.x3-m .tg,.x3-home .ph{box-shadow:0 0 0 2px var(--edge)}
mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--mk) 75%,transparent) 55%);color:inherit}
/* ホームの「あと109日」：幅400px前後で「日」が次の行に落ちるのを防ぐ */
.cal .pg .n{white-space:nowrap;font-size:clamp(96px,33vw,190px)}
/* 超絶テク図鑑の見出し：方眼の上書きでグラデーションが消えないように */
.hub-hero.x3-hh{background:var(--grid),linear-gradient(125deg,#1b1812,#0e6f6c 70%,#ee4f2b 140%)!important;color:#fff}
/* ほかの時期を見る：横スクロールをやめて全部見える折り返しに */
.x3-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:visible;margin:4px 0 0;padding:10px 0 4px}
.x3-strip button{min-width:0}
.x3-strip button b{white-space:normal;line-height:1.35}
/* 上へ戻るボタン：黒い丸に黒いベタ影が重なって二重に見えないよう、白いふち＋ふつうの影に */
.totop{box-shadow:0 0 0 2.5px var(--card),0 6px 16px -4px rgba(0,0,0,.35)!important}
.totop.on{opacity:1}

/* ================================================================
   3本柱（超絶テク／練習問題／アドバイス）とすっきりホーム
   ================================================================ */
.x3-pg{margin:8px 2px 4px}
.x3-pg .k{font-family:var(--fn);font-weight:800;font-size:12px;letter-spacing:.16em;color:var(--c)}
.x3-pg h1{margin:2px 0 0;font-family:var(--fh);font-weight:900;font-size:clamp(28px,8vw,38px);line-height:1.25}
.x3-pg p{margin:6px 0 0;font-size:15px;color:var(--sub);line-height:1.7}
.seg a.x3-sb{flex:1 0 auto;text-align:center;text-decoration:none;border-radius:12px;padding:9px 12px;font-weight:900;font-size:14px;color:var(--ink);white-space:nowrap}
.seg a.x3-sb.on{background:var(--ink);color:var(--bg)}
.x3-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 14px}
.x3-pick a{text-decoration:none;color:var(--ink);background:var(--card);border-radius:14px;box-shadow:0 0 0 2px var(--edge);padding:9px 4px;text-align:center}
.x3-pick a b{font-family:var(--fh);font-weight:900;font-size:14px}
.x3-pick a small{display:block;font-size:11px;color:var(--sub)}
.x3-pick a.on{background:var(--c);color:#fff;box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge)}
.x3-pick a.on small{color:#fff}
.x3-dqh{background:var(--grid),var(--cbg);border-radius:20px;box-shadow:var(--shadow);padding:16px}
.x3-dqh .k{font-size:12px;font-weight:900;color:var(--c)}
.x3-dqh>b{display:block;font-family:var(--fh);font-weight:900;font-size:21px;line-height:1.4;margin-top:2px}
.x3-dqh .m{display:block;font-size:13px;color:var(--sub);font-weight:700;margin-top:2px}
.x3-dqh .hk{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:900;font-size:15.5px;line-height:1.6}
.x3-r3{display:flex;flex-direction:column;gap:8px}
.x3-r3>div{display:grid;grid-template-columns:34px 1fr;column-gap:12px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px}
.x3-r3 span{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--fn);font-weight:800;box-shadow:0 0 0 2px var(--edge)}
.x3-r3 b{font-family:var(--fh);font-weight:900;font-size:16px;line-height:1.45}
.x3-r3 p{margin:2px 0 0;font-size:14.5px;color:var(--sub);line-height:1.7}
.x3-tk{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:14px 2px;border-top:2px dashed var(--line2)}
.x3-tk .n{width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:15px;box-shadow:0 0 0 2px var(--edge)}
.x3-tk b{display:block;font-family:var(--fh);font-weight:900;font-size:17px;line-height:1.45}
.x3-tk p{margin:4px 0 0;font-size:15px;line-height:1.75}
.x3-tk p.my{font-size:13.5px;color:var(--sub);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ng) 55%,transparent)}
.x3-tk ul{margin:6px 0 0;padding-left:1.2em;font-size:14.5px;line-height:1.7}
.x3-tk .eye{margin-top:8px;padding:8px 11px;border-radius:12px;background:var(--ubg);font-size:13.5px;font-weight:700;line-height:1.65}
.x3-tk .eye::before{content:"目から鱗 ";color:var(--udk);font-weight:900}
.x3-tk .ex{margin-top:8px;padding:9px 12px;border-radius:12px;background:var(--bg2);font-size:14px;line-height:1.7;border-left:4px solid var(--c)}
.x3-go2{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin:24px 0 6px}
.x3-go2 .btn.big{white-space:normal;line-height:1.4}
.x3-go2 .btn.sm{align-self:center}
.x3-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x3-pgrid a{text-decoration:none;color:var(--ink);background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:3px;border-top:6px solid var(--c)}
.x3-pgrid b{font-family:var(--fh);font-weight:900;font-size:17px}
.x3-pgrid small{font-size:12px;color:var(--sub);line-height:1.45;min-height:2.9em}
.x3-pgrid .bar{height:7px;border-radius:4px;background:var(--bg2);overflow:hidden;margin-top:4px}
.x3-pgrid .bar i{display:block;height:100%;background:var(--c)}
.x3-pgrid .ct{font-size:12px;font-weight:800;color:var(--c)}
.x3-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x3-dl a{text-decoration:none;color:var(--ink);background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:11px 13px;position:relative}
.x3-dl b{display:block;font-family:var(--fh);font-weight:900;font-size:15px;padding-right:44px}
.x3-dl small{display:block;font-size:12px;color:var(--sub);margin-top:2px;line-height:1.45}
.x3-dl span{position:absolute;right:10px;top:10px;font-family:var(--fn);font-weight:800;font-size:12.5px;color:#fff;background:var(--c);border-radius:8px;padding:1px 7px}
.x3-qz{display:block;text-decoration:none;color:#fff;background:var(--c);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.x3-qz b{display:block;font-family:var(--fh);font-weight:900;font-size:18px}
.x3-qz small{opacity:.92;font-size:13px}
.x3-rh{display:flex;justify-content:space-between;align-items:center;margin-top:8px;background:var(--grid),var(--cbg);border-radius:18px;box-shadow:var(--shadow);padding:12px 14px}
.x3-rh .k{display:block;font-size:12px;font-weight:900;color:var(--c)}
.x3-rh b{font-family:var(--fh);font-weight:900;font-size:20px}
.x3-rh .sc{font-family:var(--fn);font-weight:800;background:var(--card);border-radius:10px;padding:4px 10px;box-shadow:0 0 0 2px var(--edge)}
.x3-dots{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.x3-dots button{width:34px;height:34px;border-radius:10px;border:none;background:var(--card);box-shadow:0 0 0 2px var(--edge);font-family:var(--fn);font-weight:800;color:var(--ink)}
.x3-dots button.ok{background:var(--vbg);color:var(--vdk)}
.x3-dots button.ng{background:var(--rbg);color:var(--rdk)}
.x3-dots button.on{background:var(--ink);color:var(--bg)}
.x3-pic{display:block;padding:12px;border-radius:12px;border:2px dashed var(--line2);font-size:13.5px;line-height:1.6;min-height:70px}
.x3-pic small{display:inline-block;font-size:10.5px;font-weight:900;background:var(--bg2);border-radius:6px;padding:0 6px;margin-right:6px}
.x3-ex{margin-top:14px;padding:14px;border-radius:16px;box-shadow:0 0 0 2px var(--edge)}
.x3-ex.ok{background:var(--vbg)}
.x3-ex.ng{background:var(--rbg)}
.x3-ex b{font-family:var(--fh);font-weight:900;font-size:18px}
.x3-ex p{margin:6px 0 0;font-size:15px;line-height:1.75}
.x3-ex .tr small{display:inline-block;font-size:11px;font-weight:900;background:var(--card);border-radius:6px;padding:0 7px;margin-right:6px;color:var(--rdk)}
.x3-ex .tt{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 12px;border-radius:999px;background:var(--card);box-shadow:0 0 0 2px var(--edge);text-decoration:none;color:var(--ink);font-weight:900;font-size:13.5px}
.x3-ex .tt svg{width:15px;height:15px}
.x3-now{display:block;text-decoration:none;color:var(--ink);background:var(--grid),linear-gradient(135deg,var(--card),var(--ubg));border-radius:20px;box-shadow:var(--shadow);padding:16px;margin-top:6px}
.x3-now .k{font-size:12px;font-weight:900;color:var(--udk)}
.x3-now b{display:block;font-family:var(--fh);font-weight:900;font-size:19px;line-height:1.45;margin-top:2px}
.x3-now small{display:block;margin-top:6px;font-weight:900;color:var(--u);font-size:13.5px}
.x3-av{background:var(--card);border-radius:16px;box-shadow:var(--shadow);margin:10px 0}
.x3-av summary{list-style:none;cursor:pointer;padding:13px 40px 13px 14px;position:relative}
.x3-av summary::-webkit-details-marker{display:none}
.x3-av summary::after{content:"+";position:absolute;right:14px;top:10px;font-weight:900;font-size:20px;color:var(--u)}
.x3-av[open] summary::after{content:"\2212"}
.x3-av summary b{font-family:var(--fh);font-weight:900;font-size:16px;line-height:1.45}
.x3-av summary small{margin-left:8px;font-size:11.5px;color:var(--sub);font-weight:700}
.x3-av .in{padding:0 14px 14px;font-size:14.5px;line-height:1.75}
.x3-av .in p{margin:0 0 6px}
.x3-av .in ol{margin:6px 0;padding-left:1.3em}
.x3-av .in .ok{background:var(--vbg);border-radius:10px;padding:7px 10px;font-size:13.5px}
.x3-pil{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.x3-pil a{position:relative;display:block;text-decoration:none;color:#fff;border-radius:22px;box-shadow:var(--shadow);padding:18px 18px 16px;background-image:var(--grid)}
.x3-pil a.t{background-color:var(--r)}
.x3-pil a.p{background-color:var(--l)}
.x3-pil a.a{background-color:var(--u)}
.x3-pil .n{position:absolute;right:16px;top:14px;font-family:var(--fn);font-weight:800;font-size:30px;line-height:1;background:rgba(0,0,0,.18);border-radius:12px;padding:4px 10px}
.x3-pil b{display:block;font-family:var(--fh);font-weight:900;font-size:26px;line-height:1.2}
.x3-pil small{display:block;margin-top:6px;font-size:13.5px;font-weight:700;opacity:.95;padding-right:84px}
.x3-sub{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.x3-sub a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--ink);background:var(--card);border-radius:14px;box-shadow:0 0 0 2px var(--edge);padding:10px 2px;font-size:11.5px;font-weight:900}
.x3-sub svg{width:20px;height:20px}
#main.x3-simple .tsel,#main.x3-simple .cnv,#main.x3-simple .hact,#main.x3-simple .doors,#main.x3-simple>.banner,#main.x3-simple .minis,#main.x3-simple .x3-home,#main.x3-simple .x3-hb{display:none!important}
.x3-pt{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;margin:10px 0;border-left:6px solid var(--c)}
.x3-pt .hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.x3-pt .hd b{font-family:var(--fh);font-weight:900;font-size:16px}
.x3-pt .hd small{font-size:11.5px;color:var(--sub);font-weight:700;margin-left:auto}
.x3-pt .nw{font-size:10.5px;font-weight:900;color:#fff;background:var(--c);border-radius:6px;padding:1px 6px}
.x3-pt p{margin:6px 0 0;font-size:14.5px;line-height:1.7}
.x3-pt i{font-style:normal;display:inline-block;font-size:11px;font-weight:900;background:var(--bg2);border-radius:6px;padding:0 6px;margin-right:6px}
.x3-pt i.t{background:var(--rbg);color:var(--rdk)}
.x3-pic.fig{margin:8px 0;background:var(--bg2)}
.x3-rk{margin:18px 2px 4px;font-family:var(--fh);font-weight:900;font-size:14px;color:var(--sub)}

/* くわしいアドバイス（思い込み → 実は → やり方・例・失敗・今日の一歩） */
.x3-dv{background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin:12px 0;overflow:hidden}
.x3-dv summary{list-style:none;cursor:pointer;padding:16px 16px 14px;display:block;position:relative}
.x3-dv summary::-webkit-details-marker{display:none}
.x3-dv .no{float:left;width:30px;height:30px;margin:0 10px 4px 0;border-radius:10px;background:var(--u);color:#fff;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:14px;box-shadow:0 0 0 2px var(--edge)}
.x3-dv summary b{display:block;font-family:var(--fh);font-weight:900;font-size:17.5px;line-height:1.45;min-height:30px}
.x3-dv .my{display:block;clear:both;margin-top:8px;font-size:13.5px;color:var(--sub);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ng) 55%,transparent)}
.x3-dv .my::before{content:"思い込み ";font-weight:900;color:var(--ng);text-decoration:none;display:inline-block}
.x3-dv .tr{display:block;margin-top:6px;font-size:15px;line-height:1.8;font-weight:700}
.x3-dv .tr::before{content:"実は… ";color:var(--ok);font-weight:900}
.x3-dv .op{display:inline-block;margin-top:10px;font-size:13px;font-weight:900;color:var(--u)}
.x3-dv .op::before{content:"▼ "}
.x3-dv[open] .op{display:none}
.x3-dv .in{padding:0 16px 16px;font-size:15px;line-height:1.8;animation:x3in .25s ease}
.x3-dv .lb{display:inline-block;margin:10px 0 4px;font-size:11.5px;font-weight:900;color:var(--udk);background:var(--ubg);border-radius:6px;padding:1px 8px}
.x3-dv .lb.ng{color:var(--rdk);background:var(--rbg)}
.x3-dv ol{margin:0;padding-left:1.3em}
.x3-dv ol li{margin:3px 0}
.x3-dv .ex{padding:10px 12px;border-radius:12px;background:var(--bg2);border-left:4px solid var(--u);font-size:14.5px}
.x3-dv p{margin:0}
.x3-dv .one{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:900;font-size:14.5px}
.x3-more2{margin:18px 0 6px}
.x3-more2>summary{cursor:pointer;list-style:none;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:0 0 0 2px var(--edge);font-weight:900;font-size:14px}
.x3-more2>summary::-webkit-details-marker{display:none}
.x3-more2>summary::after{content:" ▼";color:var(--u)}
@media print{.x3-dv .in,.x3-more2>*{display:block!important}}

/* 出た単語帳・出た言い換え辞典のカード（目立たせる） */
.x3-voc{position:relative;display:block;margin-top:12px;text-decoration:none;color:var(--ink);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;background:var(--grid),linear-gradient(135deg,var(--vbg),var(--card))}
.x3-voc .n{position:absolute;right:16px;top:14px;font-family:var(--fn);font-weight:800;font-size:30px;line-height:1;color:#fff;background:var(--v);border-radius:12px;padding:5px 10px;box-shadow:0 0 0 2px var(--edge)}
.x3-voc .n small{font-size:13px;margin-left:2px}
.x3-voc>b{display:block;font-family:var(--fh);font-weight:900;font-size:24px;line-height:1.25;color:var(--vdk)}
.x3-voc>small{display:block;margin-top:6px;font-size:13.5px;line-height:1.6;padding-right:96px}
.x3-voc>small b{color:var(--vdk)}
.x3-voc .go{display:inline-block;margin-top:10px;font-weight:900;font-size:14px;color:#fff;background:var(--v);border-radius:999px;padding:6px 14px;box-shadow:0 0 0 2px var(--edge)}
.x3-voc.x3-para{background:var(--grid),linear-gradient(135deg,var(--pbg),var(--card))}
.x3-voc.x3-para .n,.x3-voc.x3-para .go{background:var(--p)}
.x3-voc.x3-para>b,.x3-voc.x3-para>small b{color:var(--pdk)}
/* 言い換え辞典の一覧 */
.x3-pa{display:flex;flex-direction:column;gap:8px}
.x3-pa .it{background:var(--card);border-radius:16px;box-shadow:0 0 0 2px var(--edge);padding:12px 14px;cursor:pointer}
.x3-pa .pr{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:15.5px;font-weight:700}
.x3-pa .pr .f{color:var(--ldk)}
.x3-pa .pr .t{color:var(--vdk);text-align:right}
.x3-pa .ar{font-weight:900;color:var(--sub)}
.x3-pa .mt{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:11.5px}
.x3-pa .ty{font-weight:900;background:var(--pbg);color:var(--pdk);border-radius:6px;padding:1px 7px}
.x3-pa .wh{color:var(--sub);font-weight:700}
.x3-pa .dt{display:none;margin-top:8px;padding-top:8px;border-top:1.5px dashed var(--line2);font-size:14px;line-height:1.7}
.x3-pa .dt p{margin:2px 0}
.x3-pa .dt .ja{color:var(--sub)}
.x3-pa .dt .x3-tip{font-weight:700}
.x3-pa .it.on .dt{display:block}
.x3-pa.hide .it:not(.on) .pr .t{color:transparent;background:var(--bg2);border-radius:8px}
@media (max-width:420px){.x3-pa .pr{grid-template-columns:1fr;gap:2px}.x3-pa .pr .t{text-align:left}.x3-pa .ar{display:none}}
#dPg{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin:14px 0 4px}
#dPg>a{display:flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;color:var(--ink);background:var(--card);border-radius:14px;box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge);padding:9px 12px;min-width:0;font-family:var(--fh)}
#dPg>a .muted{font-size:11.5px;font-weight:900;color:var(--sub)}
#dPg>a b{font-family:var(--fs,serif);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dPg>a.nx{text-align:right;align-items:flex-end}
#dPg>a.x3-vtop{align-items:center;text-align:center;background:var(--v);color:#fff;font-size:12px;font-weight:900;line-height:1.3;padding:8px 12px}
#dPg>a.x3-vtop svg{width:20px;height:20px}
#dPg>a:active{transform:translate(3px,3px);box-shadow:0 0 0 2px var(--edge)}
/* 一覧はコンパクトに（カードを並べず、1行ずつの表に） */
.vw{margin:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);padding:9px 6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2px 10px;align-items:center;background:transparent}
.vw:hover{background:var(--card)}
.vw .top1{flex-wrap:nowrap;min-width:0}
.vw .w{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw .m{font-size:13.5px;margin:0;line-height:1.45;color:var(--ink)}
.vw .lv{display:none}
.vw .fq{margin-left:6px}
.x3-pa .it,.x3-wl .it,.x3-mk .it{box-shadow:none!important;border-radius:0!important;background:transparent!important;border-bottom:1px solid var(--line);padding:9px 6px!important}
.x3-pa,.x3-wl,.x3-mk{gap:0!important;background:var(--card);border-radius:16px;box-shadow:0 0 0 2px var(--edge);overflow:hidden}
.x3-pa .it.on,.x3-wl .it.on,.x3-mk .it.on{background:var(--bg2)!important}
.x3-wl .hd,.x3-mk .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.x3-wl .hd b,.x3-mk .hd b{font-size:16px}
.x3-wl .hd small,.x3-mk .hd small{font-size:11px;color:var(--sub);font-weight:700}
.x3-mk .hd small{margin-left:auto}
.x3-wl .hd span,.x3-mk .hd span{font-size:13.5px;font-weight:700}
.x3-wl .pp{font-size:12.5px;color:var(--sub);margin-top:2px}
.x3-mk .nx{margin:3px 0 0;font-size:13px;color:var(--sub)}
.x3-wl .dt,.x3-mk .dt{display:none;margin-top:6px;font-size:13.5px;line-height:1.7}
.x3-wl .it.on .dt,.x3-mk .it.on .dt{display:block}
.x3-mk i,.x3-wl i{font-style:normal;font-size:10.5px;font-weight:900;background:var(--bg2);border-radius:5px;padding:0 5px;margin-right:5px}
.x3-morebtn{display:block;width:100%;margin:10px 0;padding:12px;border:none;border-radius:14px;background:var(--card);box-shadow:0 0 0 2px var(--edge);font-weight:900;color:var(--ink)}

/* 練習問題の印刷ページ（画面でも読める／印刷はA4） */
.x3-print .x3-ptool{display:flex;justify-content:space-between;gap:8px;margin:8px 0}
.x3-print .x3-pnote{font-size:12.5px;color:var(--sub);margin-bottom:10px}
.x3-print .ph1{border-bottom:3px solid var(--c);padding-bottom:6px;margin:16px 0 10px}
.x3-print .ph1 small{font-size:11px;color:var(--sub);font-weight:700}
.x3-print .ph1 h1{margin:2px 0 0;font-family:var(--fh);font-weight:900;font-size:22px}
.x3-print .ph1 p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.x3-print .pq,.x3-print .pa{background:var(--card);border-radius:14px;box-shadow:0 0 0 1.5px var(--line2);padding:12px 14px;margin:10px 0;break-inside:avoid}
.x3-print .qh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.x3-print .qh b{font-family:var(--fh);font-weight:900;font-size:16px}
.x3-print .qh span{font-weight:700;font-size:13px}
.x3-print .qh small{margin-left:auto;font-size:11px;color:var(--sub)}
.x3-print .qh .ok{color:var(--vdk);font-weight:900}
.x3-print .st{font-size:13.5px;margin:6px 0}
.x3-print .lnote{font-size:12px;color:var(--sub);margin:2px 0 6px}
.x3-print .paper{margin:6px 0}
.x3-print .qq{font-family:var(--fe,serif);font-weight:600;margin:8px 0 4px}
.x3-print .pc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.x3-print .pc li{display:grid;grid-template-columns:24px 1fr;gap:6px;font-size:14px;line-height:1.55}
.x3-print .pc.pics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x3-print .pc .cn{font-weight:900}
.x3-print .pa p{margin:5px 0 0;font-size:14px;line-height:1.7}
.x3-print .pa i{font-style:normal;display:inline-block;font-size:11px;font-weight:900;background:var(--bg2);border-radius:5px;padding:0 6px;margin-right:6px}
.x3-print .pa i.t{background:var(--rbg);color:var(--rdk)}
.x3-print .scr{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--bg2);font-size:13px;line-height:1.6}
.x3-print .scr p{margin:2px 0}
.x3-print .keys{width:100%;border-collapse:collapse;margin:6px 0 14px}
.x3-print .keys td{border:1.5px solid var(--line2);text-align:center;padding:5px 2px;font-size:14px}
.x3-print .keys td small{display:block;font-size:10px;color:var(--sub)}
.x3-print .keys td b{font-size:16px}
@media print{
  .x3-print .pq,.x3-print .pa{border:1pt solid #999!important;border-radius:4pt!important;padding:6pt 8pt!important;margin:0 0 6pt!important;background:#fff!important}
  .x3-print .pbreak{break-before:page;page-break-before:always;height:0}
  .x3-print .ph1{margin:0 0 6pt!important}
  .x3-print .ph1 h1{font-size:14pt!important}
  .x3-print .pc li,.x3-print .pa p{font-size:10pt!important}
  .x3-print .x3-pic{border:1pt dashed #999!important;min-height:0!important}
}
.x3-ptl{margin:10px 0 0;display:flex;justify-content:flex-end}
/* 単語・表現への入口：1行カード（アイコン｜見出し＋一言｜件数｜›）。件数が見出しに重ならない */
.x3-lks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.x3-lk{display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border-radius:16px;box-shadow:0 0 0 2px var(--edge),3px 3px 0 2px var(--edge);padding:11px 12px 11px 11px}
.x3-lk:active{transform:translate(3px,3px);box-shadow:0 0 0 2px var(--edge)}
.x3-lk .ic{width:44px;height:44px;border-radius:13px;background:var(--c);color:#fff;display:grid;place-items:center}
.x3-lk .ic svg{width:22px;height:22px}
.x3-lk .tx{min-width:0}
.x3-lk .tx b{display:block;font-family:var(--fh);font-weight:900;font-size:16px;line-height:1.35}
.x3-lk .tx small{display:block;font-size:12px;color:var(--sub);line-height:1.45;margin-top:1px}
.x3-lk .ct{font-family:var(--fn);font-weight:800;font-size:18px;color:var(--c);white-space:nowrap}
.x3-lk .ct small{font-family:var(--fh);font-size:11px;margin-left:1px;color:var(--sub)}
.x3-lk .ar{color:var(--faint)}
.x3-lk .ar svg{width:18px;height:18px}
.x3-hint{margin:12px 16px 16px;font-size:13px;color:var(--sub)}
.x3-run .x3-ex{margin:14px 16px 0}
.x3-run .x3-go2{margin:18px 16px 16px}
.x3-ex,.x3-ex p,.x3-run .dq2,.x3-run .set{overflow-wrap:anywhere;word-break:normal}
.x3-run .x3-ex{box-sizing:border-box;max-width:calc(100% - 32px)}
.x3-dsel{margin:10px 0}
.x3-dsel>summary{cursor:pointer;list-style:none;font-size:13px;font-weight:900;color:var(--sub);padding:6px 2px}
.x3-dsel>summary::-webkit-details-marker{display:none}
.x3-dsel>summary::after{content:" ▼"}
.x3-dsel[open]>summary::after{content:" ▲"}
.x3-dots button{width:30px;height:30px;font-size:12.5px}
.x3-dots{gap:5px;margin:6px 0 4px}
.x3-ptl{margin:8px 0 0}
/* 言い換え・単語・ディスコースマーカーの「ポイント」行（既存の .tp と名前がぶつかっていたので別名に） */
.x3-tip{margin:8px 0 2px;padding:8px 12px;border-radius:12px;background:var(--pbg);font-size:13.5px;font-weight:700;line-height:1.65}
.x3-tip i{background:var(--card)!important}
.x3-psel{background:var(--card);border-radius:16px;box-shadow:0 0 0 2px var(--edge);padding:12px 14px;margin:8px 0 14px}
.x3-psel .lb{font-size:12px;font-weight:900;color:var(--sub);margin:4px 0 6px}
.x3-psel .chips{margin-bottom:8px}
.x3-psel details>summary{cursor:pointer;font-size:13px;font-weight:900;color:var(--c);margin:2px 0 6px}
.x3-psel .x3-pnote{margin:4px 0 0}

/* フッター：by 原田英語（紹介＋サイトへのボタン＋姉妹ツール） */
.foot.x3-ft{text-align:left;padding:0;margin-top:34px;background:none;border:none}
.x3-by{border-radius:22px;padding:18px;background:var(--grid),linear-gradient(135deg,var(--ink),#2b2620);color:var(--bg);box-shadow:4px 4px 0 0 var(--r)}
.x3-by .hd{display:flex;gap:12px;align-items:center}
.x3-by .mk{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--r);color:#fff;display:grid;place-items:center;text-align:center;font-family:var(--fh);font-weight:900;font-size:14px;line-height:1.15;box-shadow:0 0 0 2px var(--bg)}
.x3-by .hd small{display:block;font-size:11.5px;font-weight:700;opacity:.75}
.x3-by .hd b{display:block;font-family:var(--fh);font-weight:900;font-size:24px;line-height:1.25}
.x3-by p{margin:12px 0 0;font-size:14.5px;line-height:1.8;opacity:.95}
.x3-by p b{color:var(--mk)}
.x3-by .go{display:inline-block;margin-top:14px;padding:11px 18px;border-radius:999px;background:var(--r);color:#fff;font-weight:900;font-size:15px;text-decoration:none;box-shadow:0 0 0 2px var(--bg)}
.x3-by .sis{margin-top:16px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);display:flex;flex-wrap:wrap;gap:6px}
.x3-by .sis small{flex:1 0 100%;font-size:11.5px;font-weight:900;opacity:.75}
.x3-by .sis a{font-size:12.5px;font-weight:700;color:var(--bg);text-decoration:none;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bg) 45%,transparent)}
.x3-orig{margin-top:14px;font-size:12px;color:var(--sub);line-height:1.8;text-align:center}
@media print{.x3-by{display:none!important}}
.vw .top1{flex-wrap:wrap}
.vw .w{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* 長くなったサイト名がスマホのヘッダーで切れないように */
.logo .t b{font-size:clamp(12.5px,3.7vw,15.5px)}
/* 練習問題：前・番号で選ぶ・次（押せることが一目でわかるボタンに） */
.x3-qnav{display:grid;grid-template-columns:auto 1fr auto;gap:6px;margin:10px 0 8px}
.x3-qnav .btn{padding:9px 10px;font-size:13px;justify-content:center}
.x3-qnav .btn[disabled]{opacity:.35;pointer-events:none}
.x3-qnav .btn svg{width:16px;height:16px}
.x3-dpanel{background:var(--card);border-radius:14px;box-shadow:0 0 0 2px var(--edge);padding:10px;margin:0 0 10px}
@media (max-width:380px){.x3-qnav .btn{font-size:12px;padding:8px 6px}}
.x3-rh .sc{white-space:nowrap;flex:0 0 auto;margin-left:10px}
.x3-rh>div{min-width:0}
.x3-qnav{grid-template-columns:auto minmax(0,1fr) auto}
.x3-qnav .x3-pick2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ヘッダーのロゴ（B：朱の答案用紙） */
.logo svg.mk.x3-logo{width:38px;height:38px;padding:0;background:none!important;box-shadow:none!important;border-radius:0;flex:0 0 auto}
/* 単語カード：スマホでスクロールなしで カード＋ボタン が全部見える */
#main:has(>.flash){display:flex;flex-direction:column;box-sizing:border-box;height:calc(100dvh - 66px - var(--tabh,66px) - env(safe-area-inset-bottom));min-height:420px;padding-bottom:10px}
#main:has(>.flash)>.flash{flex:1 1 auto;min-height:0;max-height:560px;display:flex;margin:8px 0 4px}
#main:has(>.flash)>.row{flex:0 0 auto;margin-top:6px!important}
.flash .fl{flex:1;min-height:0}
.flash .back{justify-content:flex-start;padding:14px 16px;gap:4px;overscroll-behavior:contain}
.flash .back>:first-child{margin-top:auto}.flash .back>:last-child{margin-bottom:auto}
.flash .back .w{font-size:22px!important}
.flash .back>div:nth-child(2){font-size:17px!important;margin:0 0 4px!important}
.flash .back .hk{display:grid;gap:5px;width:100%;text-align:left;font-size:13px;line-height:1.55}
.flash .back .hk div{border-radius:10px;padding:6px 10px}
.flash .back .hk .ety{background:var(--lbg)}.flash .back .hk .goro{background:var(--ybg)}.flash .back .hk .tipx{background:var(--rbg)}
.flash .back .hk b{display:block;font-size:10.5px;letter-spacing:.08em}
.flash .back .en{font-size:14px!important;line-height:1.5;width:100%;margin-top:4px}
.flash .back .small{width:100%;font-size:12.5px}
@media (max-height:700px){
  #main:has(>.flash){min-height:360px;padding-bottom:6px}
  #main:has(>.flash)>.flash{margin:6px 0 2px}
  #main:has(>.flash)>.row .btn{padding-top:9px;padding-bottom:9px}
  .flash .back{padding:10px 12px;gap:3px}
  .flash .back .w{font-size:19px!important}
  .flash .back>div:nth-child(2){font-size:15.5px!important}
  .flash .back .hk{font-size:12px;line-height:1.5;gap:4px}
  .flash .back .hk div{padding:4px 8px}
  .flash .back .hk b{display:inline;margin-right:5px}
  .flash .back .en{font-size:13px!important;margin-top:2px}
  .flash .back .small{font-size:11.5px}
}
/* 単語ゲーム：背の低いスマホでも4つの選択肢がタブバーの上に収まる */
@media (max-height:700px){
  #main:has(>.gctl)>.gctl .btn,#main:has(>.gctl)>.gctl button{padding-top:6px;padding-bottom:6px}
  #main:has(>.gctl) .hud{margin-bottom:4px}
  #main:has(>.gctl) .hud .sc{font-size:20px}
  #main:has(>.gctl) .gq{padding:8px 10px 6px}
  #main:has(>.gctl) .gq .w{font-size:clamp(30px,9vw,38px)}
  #main:has(>.gctl) .opts{gap:6px;margin-top:8px}
  #main:has(>.gctl) .opts button{min-height:42px;padding:7px 12px;line-height:1.35}
  #main:has(>.gctl) .gq .jp{font-size:clamp(18px,5.4vw,22px)}
  #main:has(>.gctl) .gq .s{margin-top:2px}
  #main:has(>.gctl)>.small.muted{display:none}
}