/* Visual C++.NET プログラム集 ── 2026年版の共通スタイル
   親の seminar/index.html と同じ配色（法政 紺 #003f8c / 橙 #f08300）に揃えている。 */
:root{
  --bg-0:#fff; --surface:#fff; --surface-soft:#f7f9fd; --surface-strong:#eef3fa;
  --border:rgba(0,63,140,.14); --border-strong:rgba(0,63,140,.28);
  --text:#16223a; --text-dim:#42527033; --text-body:#3b4a66; --text-mute:#7c89a3;
  --primary:#003f8c; --primary-soft:#e6eef9;
  --accent:#f08300; --accent-strong:#d97200; --accent-soft:#fff1de;
  --ok:#0d7a4f; --ok-soft:#e3f6ec;
  --grad:linear-gradient(135deg,#003f8c 0%,#2a6ec3 55%,#f08300 100%);
  --shadow-1:0 1px 2px rgba(15,30,60,.04),0 8px 24px rgba(15,30,60,.06);
  --shadow-2:0 2px 6px rgba(15,30,60,.06),0 18px 44px rgba(15,30,60,.10);
  --radius:16px; --radius-lg:22px;
  --mono:'Space Grotesk',ui-monospace,SFMono-Regular,Menlo,monospace;
  --code:ui-monospace,SFMono-Regular,Menlo,'Noto Sans Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:'Inter','Noto Sans JP',system-ui,-apple-system,sans-serif;
  color:var(--text);background:var(--bg-0);line-height:1.75;overflow-x:hidden;min-height:100vh}
body::before,body::after{content:'';position:fixed;width:50vmax;height:50vmax;border-radius:50%;
  filter:blur(140px);opacity:.16;z-index:-1;pointer-events:none;animation:float 26s ease-in-out infinite}
body::before{background:radial-gradient(circle,#003f8c 0%,transparent 60%);top:-24vmax;left:-20vmax}
body::after{background:radial-gradient(circle,#f08300 0%,transparent 60%);bottom:-26vmax;right:-22vmax;animation-delay:-13s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7vmax,-4vmax) scale(1.07)}66%{transform:translate(-5vmax,5vmax) scale(.95)}}
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(0,63,140,.04) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(0,63,140,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
          mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}

/* ── top bar ── */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);background:rgba(255,255,255,.8);
  border-bottom:1px solid var(--border)}
.topbar-inner{max-width:920px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.06em;font-size:.76rem;white-space:nowrap}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--primary-soft)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.crumbs{margin-left:auto;display:flex;gap:6px;font-size:.78rem;overflow-x:auto}
.crumbs a{padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-mute);white-space:nowrap}
.crumbs a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}

.wrap{max-width:920px;margin:0 auto;padding:0 22px 80px}

/* ── hero ── */
.hero{padding:52px 0 8px}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);
  border:1px solid rgba(240,131,0,.3);padding:5px 14px;border-radius:999px}
.hero h1{margin:16px 0 0;font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.18;font-weight:800;letter-spacing:-.02em}
.hero .kicker{margin:12px 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--text-mute)}

/* ── 課題（元の枠つきテーブル）── */
.note{margin:26px 0 0;padding:20px 24px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--primary-soft),rgba(255,255,255,.55));
  border:1px solid var(--border-strong);box-shadow:var(--shadow-1);font-size:1.02rem;color:#1c2c4a}
.note .nlabel{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--primary);margin-bottom:7px}
.note strong{color:#0a2a5e}

/* ── 手順 ── */
.steps{margin:38px 0 0;counter-reset:st}
.step{counter-increment:st;position:relative;padding:0 0 8px 0;margin-bottom:24px}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.step-n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:.82rem;color:#fff;background:var(--grad)}
.step-h .rule{flex:1;height:1px;background:var(--border)}
.step p{margin:0 0 12px;color:var(--text-body)}
.step p:last-child{margin-bottom:0}
.step h3{margin:22px 0 10px;font-size:1.12rem;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.step h3::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none}
.step ol,.step ul{margin:0 0 12px;padding-left:1.35em;color:var(--text-body)}
.step li{margin:5px 0}
.step strong{color:var(--text);font-weight:600}

/* ── 図版 ── */
figure{margin:18px 0;padding:10px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface-soft);box-shadow:var(--shadow-1)}
figure img{border-radius:9px;margin:0 auto;background:#fff}
figure a{display:block}
figure figcaption{display:block;margin-top:8px;text-align:center;font-size:.74rem;color:var(--text-mute)}
figure a:hover img{outline:2px solid var(--accent);outline-offset:2px}

/* ── コード ── */
pre{margin:16px 0;padding:17px 19px;border-radius:var(--radius);background:#0f1b2e;color:#dbe6f5;
  overflow-x:auto;font-family:var(--code);font-size:.86rem;line-height:1.6;
  box-shadow:var(--shadow-1);-webkit-text-size-adjust:100%}
pre code{font:inherit;color:inherit;background:none;padding:0}
code{font-family:var(--code);font-size:.88em;background:var(--surface-strong);border-radius:5px;padding:1px 6px}

/* ── 表 ── */
.tbl{overflow-x:auto;margin:16px 0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-1)}
.tbl table{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:9px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.tbl thead th{font-size:.74rem;letter-spacing:.05em;color:var(--text-mute);background:var(--surface-soft);
  text-transform:none;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}

/* ── ページ送り ── */
.pager{display:flex;flex-wrap:wrap;gap:10px;margin-top:46px;padding-top:24px;border-top:1px solid var(--border)}
.pager a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-1);
  font-size:.88rem;font-weight:500;color:var(--text);transition:transform .18s,box-shadow .18s,border-color .18s}
.pager a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--accent);color:var(--accent-strong)}
.pager .sp{margin-left:auto}
.pager .old{border-style:dashed;color:var(--text-mute);font-size:.82rem}

.foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:.78rem;
  color:var(--text-mute);display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .sp{margin-left:auto}

/* ── 画像の拡大（ライトボックス）── */
/* クラス名は .note .nlabel と衝突させないこと（過去に全画面が暗幕になった） */
.zoom{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:26px;
  background:rgba(8,16,30,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);cursor:zoom-out}
.zoom.on{display:grid}
.zoom img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.zoom .x{position:absolute;top:16px;right:20px;color:#fff;font-size:1.7rem;line-height:1;opacity:.85;
  background:none;border:none;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,body::after{animation:none}
  .pager a{transition:none}
}
@media (max-width:560px){
  .hero{padding-top:38px}
  .note{padding:16px 18px}
  .pager .sp{margin-left:0;width:100%}
}

/* ── ここに書いて動かす（C ミニ処理系）─────────────────── */
.play{margin:48px 0 0;padding-top:26px;border-top:2px solid var(--border)}
.play-h .sub-en{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong)}
.play-h h2{margin:5px 0 0;font-size:1.3rem;letter-spacing:-.01em}
.play-note{margin:7px 0 0;font-size:.86rem;color:var(--text-mute);max-width:64ch}
.play-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:13px;margin-top:18px;align-items:stretch}
@media (max-width:760px){.play-grid{grid-template-columns:1fr}}
.play .pane{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column}
.play .pane-h{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--surface-soft);
  border-bottom:1px solid var(--border)}
.play .fn{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-mute);flex:1;min-width:0}
.play .stat{font-family:var(--mono);font-size:.7rem;color:var(--text-mute)}
.play .btn{font:inherit;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:var(--primary);color:#fff;transition:filter .15s,transform .15s}
.play .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.play .btn:disabled{opacity:.55;cursor:progress;transform:none}
.play .btn.ghost{background:var(--surface);color:var(--text-mute);border-color:var(--border)}
.play .btn.ghost:hover{border-color:var(--accent);color:var(--accent-strong)}
.play textarea{width:100%;border:0;outline:0;resize:vertical;padding:14px 16px;font-family:var(--code);
  font-size:.85rem;line-height:1.65;color:var(--text);background:transparent;-webkit-text-size-adjust:100%}
.play .code{min-height:290px}
.play .stdin{min-height:74px;border-bottom:1px solid var(--border)}
.play textarea:focus{background:#fcfdff}
.play .pane-f{padding:7px 13px;border-top:1px solid var(--border);background:var(--surface-soft);
  font-size:.71rem;color:var(--text-mute)}
.play .out{margin:0;padding:14px 16px;min-height:150px;background:#0f1b2e;color:#dbe6f5;border-radius:0;
  font-family:var(--code);font-size:.84rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  overflow-x:auto;box-shadow:none;flex:1}
.play .out.err{color:#ffc9c9}

/* JavaScript 講義の目次 */
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin-top:20px}
.lesson{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.lesson:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--accent);color:var(--text)}
.lesson .ln{flex:none;font-family:var(--mono);font-size:1.15rem;font-weight:700;color:#fff;
  background:var(--grad);border-radius:10px;padding:6px 10px;line-height:1.1}
.lesson .lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lesson .sub-en{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong)}
.lesson strong{font-size:1rem;line-height:1.35}
.lesson .la{font-size:.8rem;color:var(--text-mute);line-height:1.5}
.lesson .lg{flex:none;color:var(--text-mute);font-size:.85rem}
.lesson:hover .lg{color:var(--accent)}

/* 目次ページの見出しまわり（プログラム集と同じ作り） */
.wrap{max-width:1080px}
.topbar-inner{max-width:1080px}
.hero .lead{margin:16px 0 0;max-width:60ch;color:var(--text-body)}
.hero h1 .cpp{font-family:var(--mono);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.stats .stat{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-1)}
.stats .stat b{font-family:var(--mono);font-size:1.35rem;color:var(--primary);line-height:1}
.stats .stat span{font-size:.78rem;color:var(--text-mute)}
.banner{display:flex;align-items:center;gap:15px;margin:26px 0 0;padding:15px 20px;
  border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-soft);
  color:var(--text);transition:transform .18s,box-shadow .18s}
.banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);color:var(--text);border-style:solid;border-color:var(--accent)}
.banner .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-strong);font-size:.95rem}
.banner .tx{flex:1;min-width:0}.banner strong{display:block;font-size:.92rem}
.banner .sub{font-size:.82rem;color:var(--text-mute)}
.banner .go{flex:none;font-size:.83rem;font-weight:600;color:var(--primary);white-space:nowrap}
.sec{margin:44px 0 0;scroll-margin-top:120px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.sec h2{margin:5px 0 0;font-size:1.42rem}
.sec-desc{margin:7px 0 0;font-size:.88rem;color:var(--text-mute);max-width:56ch}
.count{font-family:var(--mono);font-size:2rem;font-weight:700;color:var(--surface-strong);line-height:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:20px}
.card{padding:16px 19px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.card h3{margin:0 0 7px;font-size:.93rem;display:flex;align-items:center;gap:8px}
.card h3::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none}
.card p{margin:0;font-size:.85rem;color:var(--text-body)}
/* 1ページに実行欄が複数並ぶので、上の余白を詰める */
.step .play{margin-top:14px;padding-top:0;border-top:0}
.step .play .play-h{display:none}