/* 電気系大学生の自習室 — text-first technical reference design.
   No marketing cards, gradients, mascots, floating objects or forced title breaks. */
:root{--ink:#242424;--sub:#606060;--line:#dedede;--link:#135d91;--page:#fff;--pale:#f6f7f8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{margin:0;background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:15px;line-height:1.95;letter-spacing:0;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
a:hover{color:#073c62}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #0b6098;outline-offset:3px}
button,input{font:inherit}
.skip{position:absolute;top:-100px;left:12px;padding:6px 12px;background:#fff;z-index:4}
.skip:focus{top:10px}
.wrap{width:min(1260px,calc(100% - 40px));margin-inline:auto}
.header{background:#fff;border-bottom:1px solid var(--line)}
.bar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{color:#222;text-decoration:none;font-size:21px;line-height:1.4;font-weight:750;letter-spacing:0}
.brand:hover{color:#222}
.brand .book{display:none}
.links{display:flex;align-items:center;gap:12px 19px;flex-wrap:wrap}
.links a{font-size:13px;text-decoration:none;color:#444;white-space:nowrap}
.links a:hover{text-decoration:underline;color:var(--link)}
.hero,.page-hero{padding:56px 0 44px;background:#fff;border-bottom:1px solid var(--line)}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:60px}
.eyebrow,.kicker{display:block;color:#5b5b5b;font-weight:600;font-size:12px;letter-spacing:0;margin:0 0 12px}
.hero h1,.page-hero h1{font-size:clamp(28px,3.3vw,39px);font-weight:750;line-height:1.48;letter-spacing:0;max-width:760px;margin:0 0 15px}
.hero h1 em{font-style:normal;color:inherit;background:none}
.hero h1 .title-line,.page-hero h1 .title-line{display:inline;white-space:normal}
.lead,.page-hero p{max-width:820px;color:#424242;font-size:15px;line-height:2}
.actions{display:flex;gap:13px 22px;flex-wrap:wrap;margin:25px 0 10px}
.btn,.btn.primary,.btn.soft{display:inline-block;min-height:35px;border:1px solid #b7b7b7;background:#fff;color:var(--link);border-radius:2px;font-size:13px;font-weight:600;line-height:1.6;padding:6px 12px;text-decoration:none;box-shadow:none;transform:none;transition:none}
.btn:hover,.btn.primary:hover{background:#f2f6f9;text-decoration:underline;transform:none}
.small{font-size:12px}.muted{color:var(--sub)}
.desk,.site-overview{padding:18px;border:1px solid var(--line);background:var(--pale);border-radius:0;box-shadow:none;transform:none}
.desk:after{display:none}
.desk .sticker{background:none;display:block;padding:0;font-weight:650;color:#444;font-size:12px}
.desk h2,.site-overview h2{font-size:16px;font-weight:700;margin:0 0 9px}
.desk p,.site-overview p{font-size:13px;margin:0 0 12px}
.desk .scribble{background:none;font:15px/1.8 Georgia,serif;color:#333;padding:6px;border-left:2px solid #ccc;border-radius:0}
.section{padding:56px 0;border-bottom:1px solid var(--line)}
.section.light{background:#fafafa}
.section h2{font-size:clamp(23px,2.8vw,28px);line-height:1.5;font-weight:750;margin:8px 0 14px}
.intro{color:var(--sub);max-width:860px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin-top:25px}
.tile,.tile.orange,.tile.lilac,.tile.green,.tile.blue{display:block;color:inherit;text-decoration:none;border:0;border-top:1px solid #d6d6d6;border-radius:0;background:transparent;box-shadow:none;padding:19px 3px 23px;transform:none}
.tile:hover{text-decoration:none;transform:none;background:#fafafa}
.tile h3{font-size:20px;margin:0 0 5px;font-weight:700}
.tile p{font-size:13px;color:#555;margin:0 0 8px}
.tile .emoji{display:none}
.tile .arrow{display:block;color:var(--link);font-size:12px;font-weight:600;text-align:left}
.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:25px}
.link-card{border:1px solid var(--line);border-radius:0;background:#fff;padding:15px;color:inherit;text-decoration:none;box-shadow:none}
.link-card:hover{background:#f8f8f8}
.link-card strong{font-size:15px;font-weight:700}
.link-card p{color:var(--sub);font-size:12px;line-height:1.75}
.about-card{display:block;border:0;border-left:3px solid #ccc;border-radius:0;background:#f8f8f8;padding:18px 21px;margin-top:22px}
.about-card .avatar{display:none}
.about-card p{margin:0 0 10px}
.breadcrumbs{font-size:12px;color:#666}
.course-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;padding-block:40px;align-items:start}
.toc{position:sticky;top:15px;max-height:calc(100vh - 40px);overflow:auto;padding:14px 0;background:transparent;border:0;border-top:2px solid #777;border-radius:0}
.toc strong{font-size:15px}
.toc a{display:block;text-decoration:none;font-size:12px;color:#4d4d4d;padding:6px 0;border-bottom:1px solid #eee}
.toc a:hover{color:var(--link);text-decoration:underline}
.course-body{min-width:0}
.unit{padding:35px 0 38px;border-bottom:1px solid var(--line);scroll-margin-top:20px}
.unit:first-child{padding-top:0}
.unit h2{font-size:21px;font-weight:750;line-height:1.5;margin:0 0 15px}
.unit p{line-height:2}
.formula{font:18px/1.8 "Times New Roman",Georgia,serif;background:#f7f8fa;border:1px solid #e0e2e5;border-left:3px solid #9baebf;border-radius:0;padding:14px 18px;margin:18px 0;overflow-x:auto;overflow-wrap:anywhere}
.worked{background:#f7f8fa;border-left:3px solid #b5b5b5;border-radius:0;padding:13px 18px;margin:17px 0}
.worked strong,.practice strong{display:block;font-size:14px;font-weight:700;margin:0 0 6px;color:#333}
.worked p{margin:4px 0}
.practice{background:white;border:1px solid var(--line);border-radius:0;padding:16px 18px}
.practice details{border-top:1px solid #e4e4e4;padding-top:9px;margin-top:10px}
.practice summary{cursor:pointer;color:var(--link);font-weight:650}
.unit .tip{font-size:12px;color:#555;background:transparent;padding:6px 0;border-radius:0}
.article{max-width:850px;margin-inline:auto;padding:42px 0 75px}
.article h2{font-size:22px;border-bottom:1px solid var(--line);padding-bottom:8px;margin:36px 0 14px}
.article h3{font-size:17px;margin:26px 0 10px}
.article p,.article li{line-height:2}
.article .notice,.notice{padding:15px 18px;background:#f8f8f8;border-left:3px solid #a9a9a9;border-radius:0}
.resource{border-bottom:1px solid var(--line);padding:14px 0}
.resource a{font-weight:600}
.simulator{background:#fff;border:1px solid var(--line);border-radius:0;margin:25px 0;overflow:hidden}
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;background:#f5f5f5}
.controls button{background:white;border:1px solid #999;padding:7px 10px;min-height:42px;border-radius:0;color:#333}
.toggle{display:flex;gap:8px;align-items:center;font-size:13px}
.plot{background:#fbfbfb}
.plot canvas{width:100%;height:auto;display:block;touch-action:none;max-width:100%;aspect-ratio:1000/540}
.plot-meta{padding:14px}
.hint{font-size:12px;color:#666}
.quiz{display:grid;gap:8px}
.quiz label{background:white;padding:8px 0}
.quiz button{background:white;color:var(--link);border:1px solid #aaa;border-radius:0;padding:10px 12px;max-width:max-content}
.footer{background:#f8f8f8;border-top:1px solid var(--line);color:#555;padding:30px 0}
.footer p{font-size:12px;color:#666}
.footer a{color:var(--link)}
@media(max-width:850px){
 .bar{display:block;padding:15px 0}
 .brand{display:block;margin-bottom:7px}
 .links{gap:7px 17px}
 .hero-layout{grid-template-columns:1fr;gap:16px}
 .desk,.site-overview{max-width:640px}
 .course-layout{grid-template-columns:1fr;gap:20px}
 .toc{position:static;max-height:240px;display:block;padding:12px}
 .toc a{display:inline-block;margin-right:16px;border:0}
 .link-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:570px){
 .wrap{width:min(100% - 28px,1260px)}
 .brand{font-size:18px}
 .links a{font-size:12px}
 .hero,.page-hero{padding:32px 0}
 .hero h1,.page-hero h1{font-size:28px}
 .section{padding:35px 0}
 .tiles,.link-grid{grid-template-columns:1fr}
 .tile{padding:15px 0}
 .section h2{font-size:23px}
 .course-layout{padding-block:24px}
 .unit h2{font-size:19px}
 .formula{font-size:16px}
 .article{padding:25px 0 48px}
 .article h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Standalone subject/topic reader and reserved (inactive) ad inventory. */
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:start;padding-top:42px;padding-bottom:64px}
.lesson-article{min-width:0}.lesson-article section{margin:0 0 52px}
.lesson-article section h2{font-size:24px;line-height:1.45;margin:0 0 15px;border-bottom:1px solid #dedede;padding-bottom:12px}
.lesson-article section p{line-height:2}
.lesson-figure{margin:22px 0 30px}
.lesson-figure svg{display:block;width:100%;height:auto;border-radius:5px}
.lesson-figure figcaption{font-size:12px;line-height:1.65;color:#586772;margin-top:8px}
.math-expression{margin:23px 0;padding:22px 15px;border-left:3px solid #325b75;background:#f5f8fb;min-height:75px;overflow-x:auto;text-align:center}
.math-expression code{display:inline-block;white-space:pre-wrap;word-break:break-word;font-size:13px;text-align:left}
.katex-display{margin:0!important;overflow-x:auto;overflow-y:hidden;padding:5px}
.lesson-exercise{padding:18px 20px;margin:15px 0;background:#fcfcfc;border:1px solid #e3e6e7}
.lesson-exercise p{margin:8px 0}
.lesson-detail{border-left:3px solid #27729a;background:#eef6fa;padding:12px 18px}
.lesson-assumptions{background:#f8fbfc;border:1px solid #dbe7ed;padding:10px 15px}
.reasoning-steps{padding-left:25px;line-height:1.98}
.reasoning-steps li{padding:4px 0}
.question-level{font-size:12px;font-weight:700;color:#305c75}
.lesson-sidebar{position:sticky;top:20px;border-left:1px solid #e1e3e6;padding-left:22px;font-size:13px}
.lesson-sidebar strong{display:block;font-size:14px}
.lesson-side-list{padding-left:20px;line-height:2}
.lesson-sidebar a{display:inline-block;margin-top:10px}
.lesson-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;border-top:1px solid #ddd;padding-top:24px}
.lesson-pager a{font-weight:600;text-decoration:none}
.lesson-directory{padding-block:36px 70px}
.lesson-directory h2{font-size:22px}.lesson-directory ol{padding-left:26px;max-width:820px}
.lesson-directory li{padding:15px 0;border-bottom:1px solid #e8e8e8}
.lesson-directory li a{font-weight:700}.lesson-directory li p{margin:3px 0 0;color:#535e64;font-size:14px}
.ad-slot{border:1px dashed #bbc3c8;background:#fafafa;color:#73808a;min-height:88px;padding:18px;display:flex;align-items:center;justify-content:center;text-align:center;margin:32px 0;letter-spacing:0;font-size:12px}
.ad-slot-small{min-height:130px}
.lesson-direct-link{color:inherit;text-decoration:none}
.lesson-direct-link:hover{text-decoration:underline;color:#135d91}
@media(max-width:850px){.lesson-layout{grid-template-columns:1fr;gap:12px}.lesson-sidebar{position:static;padding:20px 0 0;border-left:0;border-top:1px solid #dedede}.lesson-article section h2{font-size:21px}}
@media(max-width:420px){.lesson-layout{padding-top:22px}.lesson-article section{margin-bottom:39px}.math-expression{padding:12px 6px}.lesson-exercise{padding:14px}.lesson-pager{gap:12px}}

/* Textbook-first reader: keep a wide calculation column with a narrow navigation rail. */
.lesson-layout{grid-template-columns:minmax(0,1fr) 188px;gap:24px}
.lesson-article{max-width:1030px}
.lesson-article section{scroll-margin-top:24px;margin-bottom:47px}
.lesson-article section h3{font-size:17px;line-height:1.7;margin:24px 0 10px}
.lesson-pitfalls{border-left:3px solid #c18452;background:#fff9ef;padding:16px 20px 16px 36px;line-height:2}
.lesson-pitfalls li+li{margin-top:7px}
.lesson-model{border:1px solid #d2e2eb;background:#f8fcfe;padding:18px;margin:20px 0}
.lesson-model label{display:flex;align-items:center;flex-wrap:wrap;gap:15px;font-weight:650}
.lesson-model input[type=range]{flex:1;min-width:180px;accent-color:#24678b}
.lesson-model svg{display:block;width:100%;height:auto;max-height:320px;margin:14px 0;background:white;border:1px solid #e2ebf0}
.model-output{font-weight:700;font-variant-numeric:tabular-nums;color:#24556f}
.model-note{font-size:12px;color:#64737d}
.lesson-sidebar .lesson-side-list li{margin:7px 0}
.lesson-sidebar a{overflow-wrap:anywhere}
@media(max-width:850px){.lesson-layout{grid-template-columns:1fr}.lesson-article{max-width:none}.lesson-model{padding:12px}}
@media(max-width:500px){.lesson-model input[type=range]{width:100%}.lesson-model label{display:block}.lesson-pitfalls{padding:12px 13px 12px 30px}}

/* Course tables of contents: one unit = one full lesson, not sixteen lessons on a page. */
.subject-directory{max-width:1050px;padding-block:28px 70px}
.subject-units{list-style:none;padding:0;margin:25px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.subject-unit{padding:19px 22px;border:1px solid #dbe2e6;background:#fff}
.subject-unit a{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;text-decoration:none}
.subject-unit strong{font-size:17px;line-height:1.6}
.subject-unit p{font-size:13px;line-height:1.75;color:#566775;margin:9px 0 0}
.unit-number{font-size:12px;color:#4c6473;font-weight:650}
.unit-more{font-size:13px;margin-left:auto;color:#1c648d}
.subject-unit:hover,.subject-unit:focus-within{border-color:#24678b}
.exercise-diagram{margin:14px 0 20px;border:0}
.exercise-diagram svg{display:block;width:100%;max-height:210px}
.exercise-diagram figcaption{font-size:12px;line-height:1.7;color:#596e7a;padding:5px 2px}
.lesson-exercise-note{font-size:12px;color:#556c79}
.math-expression{font-size:1.06rem;overflow-x:auto;max-width:100%}
.math-expression math{font-family:"STIX Two Math","Cambria Math","Latin Modern Math","Noto Sans Math",serif;font-size:1.36rem;display:block;min-width:min-content}
.math-expression mfrac{padding-inline:0.1em}
.math-expression .katex{display:block;max-width:100%}
@media(max-width:720px){.subject-units{grid-template-columns:1fr}.math-expression math{font-size:1.14rem}.subject-unit{padding:15px 16px}}

/* Read-first explanations: anchor the governing formula in the phenomenon section. */
#phenomenon{max-width:100%;padding-bottom:10px}
.concept-narrative{max-width:75ch}
.concept-narrative p{margin:0 0 17px;line-height:2.1}
.math-expression-intro{margin:19px 0 18px;background:#f2f8fc;border-left:4px solid #216d98}
.formula-decision{border-block:1px solid #dce6ec;margin-top:13px;padding:4px 0 16px}
.formula-decision h3{margin:18px 0 6px;font-size:16px;letter-spacing:-.01em;color:#254f6d}
.formula-decision p{margin:0 0 10px;line-height:2}
.draft-caution{border-left:3px solid #997e61;padding:9px 13px;background:#fbf8f4;color:#524637}
@media(max-width:600px){.concept-narrative p{line-height:1.94}.formula-decision h3{font-size:15px}.math-expression-intro{padding:15px 7px}}

/* Very narrow phones: long unit strings must wrap rather than expand the page. */
.lesson-model,.lesson-model label,.lesson-model .model-output{min-width:0;max-width:100%;overflow-wrap:anywhere}
.lesson-model input[type=range]{min-width:0;max-width:100%;box-sizing:border-box}
.lesson-model svg{min-width:0;max-width:100%;overflow:visible}
@media(max-width:360px){
 .lesson-model{padding:10px}
 .lesson-model label{display:block;white-space:normal;line-height:1.75}
 .lesson-model input[type=range]{display:block;width:100%;margin:12px 0 4px}
 .lesson-model .model-output{line-height:1.85;word-break:break-word}
}

/* A single wide MathML fraction must scroll inside its own box,
   not impose a min-content width on the full one-column CSS grid. */
@media(max-width:850px){
 .lesson-layout{grid-template-columns:minmax(0,1fr)}
 .lesson-article{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
 .lesson-article section{min-width:0;max-width:100%}
 .math-expression,.math-expression-intro{min-width:0;width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden}
 .lesson-article .lesson-model{min-width:0;max-width:100%;box-sizing:border-box}
}

/* Clip visually overflowing SVG/MathML paint at the lesson column boundary.
   Each formula keeps its own horizontal scroll, so no mathematical text is removed. */
@media(max-width:850px){
 .lesson-article{overflow-x:clip}
 .lesson-article .math-expression{overflow-x:auto}
 .lesson-article .lesson-model svg{overflow:hidden}
}
@media(max-width:360px){
 html,body{max-width:100%;overflow-x:clip}
}

/* A small study checkpoint, not another marketing card. */
.study-overview{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.study-overview>div:first-child{max-width:790px;min-width:0}
.study-overview strong{font-weight:720}
.study-overview p{font-size:13px;line-height:1.75;color:var(--sub);margin:3px 0 0}
.study-overview-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.study-overview-meta strong{font-size:17px;font-variant-numeric:tabular-nums}
.study-overview-meta a{font-size:12px}
.study-progress-panel{border:1px solid #c5d8cb;border-left:4px solid #669c77;padding:19px 22px;background:#f8fbf9}
.study-progress-panel h2{border-bottom:0!important;padding-bottom:0!important;margin:0 0 7px!important;font-size:20px!important}
.study-progress-panel p{margin:5px 0 13px!important;color:#56645d;font-size:13px}
.study-progress-button{cursor:pointer;color:#174f38;border:1px solid #7a9f87;padding:8px 14px;background:#fff;font-weight:650}
.study-progress-button:hover,.study-progress-button:focus-visible{background:#eef6f0}
.study-progress-panel.is-complete{border-color:#83a88a;background:#f2f9f4}
.study-progress-panel.is-complete .study-progress-button{background:#e4f1e7}
.study-progress-status{display:inline-block;font-size:13px;color:#4d6454;margin-left:11px}
.figure-note{font-size:13px;color:var(--sub)}
@media(max-width:560px){.study-overview{display:block}.study-overview-meta{align-items:flex-start;flex-direction:row;justify-content:space-between;gap:14px;margin-top:11px;white-space:normal}.study-progress-panel{padding:16px 14px}.study-progress-status{display:block;margin:8px 0 0}}