/* 分数の割り算.com — 方眼ノート design system
   明朝体(display) / ゴシック体(body) — system faces only, no CDN */
:root{
  --paper:#FCFCFA; --paper-2:#F5F6F2; --rule:#C8D8DC; --rule-soft:rgba(200,216,220,.55);
  --ink:#1A1F2B; --ink-2:#4A5462; --ink-3:#78838F;
  --shu:#E14434; --shu-soft:rgba(225,68,52,.10);
  --ai:#2B4A8B; --ai-soft:rgba(43,74,139,.09);
  --edge:rgba(26,31,43,.13);
  /* 明朝体 — list both Latin and Japanese family names so it resolves on
     macOS (Hiragino), Windows (Yu Mincho / MS Mincho) and Linux (Noto Serif JP). */
  --mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",
           "游明朝","游明朝体","MS PMincho","MS 明朝","Noto Serif JP","Source Han Serif JP",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","游ゴシック",
           "Noto Sans JP","Meiryo","メイリオ",system-ui,sans-serif;
  --num:ui-monospace,"SFMono-Regular","Menlo",monospace;
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141821; --paper-2:#1B202B; --rule:#2E3846; --rule-soft:rgba(46,56,70,.7);
    --ink:#E8EBEF; --ink-2:#AEB7C2; --ink-3:#7C8794;
    --shu:#FF6B5A; --shu-soft:rgba(255,107,90,.13);
    --ai:#8FB0EE; --ai-soft:rgba(143,176,238,.13);
    --edge:rgba(232,235,239,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#141821; --paper-2:#1B202B; --rule:#2E3846; --rule-soft:rgba(46,56,70,.7);
  --ink:#E8EBEF; --ink-2:#AEB7C2; --ink-3:#7C8794;
  --shu:#FF6B5A; --shu-soft:rgba(255,107,90,.13);
  --ai:#8FB0EE; --ai-soft:rgba(143,176,238,.13);
  --edge:rgba(232,235,239,.16);
}
:root[data-theme="light"]{
  --paper:#FCFCFA; --paper-2:#F5F6F2; --rule:#C8D8DC; --rule-soft:rgba(200,216,220,.55);
  --ink:#1A1F2B; --ink-2:#4A5462; --ink-3:#78838F;
  --shu:#E14434; --shu-soft:rgba(225,68,52,.10);
  --ai:#2B4A8B; --ai-soft:rgba(43,74,139,.09);
  --edge:rgba(26,31,43,.13);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);line-height:1.85;font-size:16px;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:28px 28px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--ai)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}

/* masthead */
.mast{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20}
.mast .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 22px 12px;flex-wrap:wrap}
.brand{font-family:var(--mincho);font-size:1.32rem;font-weight:700;text-decoration:none;color:var(--ink)}
.brand em{font-style:normal;color:var(--shu)}
.navlinks{display:flex;gap:20px;flex-wrap:wrap;font-size:.86rem}
.navlinks a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--shu);border-bottom-color:var(--shu)}

/* breadcrumb */
.crumb{font-size:.78rem;color:var(--ink-3);padding:14px 0 0}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--shu)}

/* hero + headings */
.hero{padding:40px 0 24px}
.eyebrow{font-size:.74rem;letter-spacing:.22em;color:var(--ink-3);margin:0 0 14px}
h1{font-family:var(--mincho);font-size:clamp(1.75rem,4.4vw,2.7rem);line-height:1.34;margin:0 0 16px;text-wrap:balance;font-weight:700}
.lede{max-width:var(--measure);color:var(--ink-2);margin:0 0 8px;font-size:1.03rem}
section{padding:40px 0}
.rule-h{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;border-bottom:2px solid var(--ink);padding-bottom:9px}
.rule-h h2{font-family:var(--mincho);font-size:1.45rem;margin:0;font-weight:700;text-wrap:balance}
.rule-h span{font-size:.72rem;letter-spacing:.2em;color:var(--ink-3);margin-left:auto}
h3{font-family:var(--gothic);font-size:1.05rem;margin:26px 0 8px}
.prose p,.prose li{max-width:var(--measure);color:var(--ink-2)}
.prose strong{color:var(--ink)}

/* calculator */
.calc{margin:26px 0 8px;background:var(--paper);border:2px solid var(--ink);border-radius:3px;box-shadow:5px 5px 0 var(--rule)}
.calc-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--edge);background:var(--paper-2)}
.calc-hd h2{font-family:var(--gothic);font-size:.83rem;letter-spacing:.13em;margin:0;color:var(--ink-2);font-weight:600}
.calc-body{padding:30px 18px 26px}
.expr{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,26px);flex-wrap:wrap}
.op{font-family:var(--mincho);font-size:clamp(1.5rem,3.6vw,2.1rem);color:var(--ink-2);line-height:1}
.fr{display:inline-grid;grid-template-rows:auto auto auto;justify-items:center;gap:5px}
.fr input{width:74px;padding:5px 2px;text-align:center;font-family:var(--num);font-size:clamp(1.15rem,2.8vw,1.5rem);font-variant-numeric:tabular-nums;border:1px solid var(--edge);border-radius:2px;background:var(--paper-2);color:var(--ink)}
.fr input:focus-visible{outline:2px solid var(--shu);outline-offset:1px;background:var(--shu-soft)}
.vinc{width:88px;height:2px;background:var(--ink);border-radius:2px}
.frs{display:inline-grid;justify-items:center;gap:3px;vertical-align:middle;font-family:var(--num);font-variant-numeric:tabular-nums}
.frs .n,.frs .d{font-size:1.18rem;line-height:1.25;padding:0 7px}
.frs .v{width:100%;min-width:38px;height:2px;background:currentColor}
.whole{font-family:var(--num);font-size:1.5rem;margin-right:5px;font-variant-numeric:tabular-nums}
.flipwrap{position:relative;display:inline-block}
.flip-anim{animation:flip .62s cubic-bezier(.5,-0.4,.4,1.4)}
@keyframes flip{0%{transform:rotateX(0)}100%{transform:rotateX(360deg)}}
@media (prefers-reduced-motion:reduce){.flip-anim{animation:none}}
.btnrow{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.btn{font-family:var(--gothic);font-size:.9rem;font-weight:600;cursor:pointer;padding:10px 26px;border-radius:2px;border:2px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--shu);border-color:var(--shu)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--shu-soft);color:var(--shu)}
.btn:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.ans{margin-top:26px;border-top:1px dashed var(--edge);padding-top:22px}
.ans[hidden]{display:none}
.ans-line{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--shu)}
.ans-lab{font-family:var(--mincho);font-size:1.15rem;color:var(--ink-2)}
.ans-box{border:2px solid var(--shu);border-radius:2px;padding:8px 18px;display:inline-flex;align-items:center;gap:10px}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:15px 4px;border-top:1px solid var(--edge)}
.steps li:first-child{border-top:1px solid var(--ink)}
.mark{counter-increment:s;font-family:var(--num);font-size:.8rem;width:23px;height:23px;border-radius:50%;border:1.5px solid var(--ai);color:var(--ai);display:grid;place-items:center;margin-top:3px}
.mark::before{content:counter(s)}
.step-t{font-weight:700;font-size:.93rem;margin:0 0 5px;color:var(--ink)}
.step-m{margin:0;color:var(--ink-2);font-size:.9rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hint{font-size:.8rem;color:var(--ink-3);margin-top:10px}

/* cards / grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.card{border:1px solid var(--edge);border-left:3px solid var(--ai);border-radius:2px;padding:15px 16px;background:var(--paper);text-decoration:none;color:inherit;display:block}
.card:hover,.card:focus-visible{border-left-color:var(--shu);background:var(--paper-2)}
.card h3{font-size:.95rem;margin:0 0 5px;font-weight:700;font-family:var(--gothic)}
.card p{margin:0;font-size:.83rem;color:var(--ink-3);line-height:1.7}

/* tables */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--edge)}
th{font-size:.75rem;letter-spacing:.09em;color:var(--ink-3);font-weight:600;border-bottom:1.5px solid var(--ink)}
td.n{font-family:var(--num);font-variant-numeric:tabular-nums}

/* notes, faq, quiz */
.note{background:var(--ai-soft);border-left:3px solid var(--ai);padding:14px 17px;border-radius:2px;font-size:.9rem;max-width:var(--measure)}
.warn{background:var(--shu-soft);border-left:3px solid var(--shu);padding:14px 17px;border-radius:2px;font-size:.9rem;max-width:var(--measure)}
details{border-bottom:1px solid var(--edge);padding:13px 2px;max-width:var(--measure)}
summary{cursor:pointer;font-weight:700;font-size:.94rem}
summary::marker{color:var(--shu)}
details p{margin:9px 0 0;font-size:.9rem}
.q{border:1px solid var(--edge);border-radius:2px;padding:14px 16px;margin:0 0 12px;background:var(--paper)}
.q .qh{font-weight:700;font-size:.92rem;margin:0 0 8px}

footer{border-top:2px solid var(--ink);margin-top:34px;padding:24px 0 44px;font-size:.82rem;color:var(--ink-3);background:var(--paper)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--shu)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:18px}
.fgrid h4{font-size:.78rem;letter-spacing:.12em;color:var(--ink-3);margin:0 0 8px;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}