/* 全ページ共通の枠：サンプル表示中の帯、上に固定されるメニュー、フッター、小見出し、ボタン、アイコンの枠、学期の予定、作品の小さなカード、まだ内容がない場所の枠。
   色は各ページが決めた変数で変わります。作りは全ページ同じです。クラス名は osc- ではじめます。 */
:root{--osc-top:0px;--osc-headh:68px;--osc-w:1232px;--osc-gut:44px}

/* ── サンプル表示中（?demo のときだけ。画面の上に固定） ── */
.osc-smp{position:sticky;top:0;z-index:60;background:#FFE98A;color:#2e2800;font-size:13px;line-height:1.5;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px 14px;flex-wrap:wrap;padding:7px 16px;text-align:center}
.osc-smp span{font-weight:500}
.osc-smp i{display:none;font-style:normal;font-weight:500}   /* スマホの幅で、長い説明のかわりに出す短いひとこと */
.osc-smp a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:720px){.osc-smp{font-size:12px;padding:6px 12px}.osc-smp span{display:none}.osc-smp i{display:inline}}

/* ── content.js のチェック（?check のときだけ） ── */
.osc-check{position:relative;z-index:61;background:#16171c;color:#fff;font-size:13.5px;line-height:1.7;padding:12px 20px}   /* 「サンプル表示中」の帯が上へのばしている下地より、手前に出す */
.osc-check ul{list-style:disc;padding-left:1.4em;margin-top:4px}

/* ── ページを表示できないとき ── */
.osc-err{max-width:640px;margin:0 auto;padding:64px 20px;color:#14151a;font-size:15px;line-height:1.8}
.osc-err h1{font-size:22px;margin-bottom:10px}
.osc-err pre{font:13px/1.6 ui-monospace,Menlo,monospace;background:#f1f1f3;border-radius:10px;padding:12px 14px;margin:14px 0;white-space:pre-wrap;word-break:break-all}
.osc-err ul{list-style:disc;padding-left:1.4em;margin-top:10px}

/* ── 上に固定されるメニュー ──
   パソコンの幅：サイト名とメニューが1行で、スクロールしても上に残る。
   せまい幅：サイト名の行はページと一緒に流れ、ページ名の行だけが上に残る。 */
.osc-head{position:sticky;top:var(--osc-top);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;
  padding:0 max(var(--osc-gut),calc((100% - var(--osc-w)) / 2));color:var(--hd-fg,#14162B);transition:background-color .2s,color .2s,box-shadow .2s}
/* 新しいSafari（iOS 26〜）は、ページを画面のいちばん上（時刻や電波の表示のうしろ）まで描きます。
   上に残したメニューのさらに上に、スクロールした中身が透けて見えないように、同じ色の下地を上へのばしておきます。 */
body.osc-stuck::before{content:"";position:fixed;left:0;right:0;top:calc(var(--osc-top) - 240px);height:240px;background:#f7f6f3;z-index:49}
.osc-smp::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:240px;background:#FFE98A}
body.osc-stuck .osc-head{background-color:rgba(247,246,243,.84);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);box-shadow:0 1px 0 rgba(20,22,43,.1)}
.osc-brand{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-width:0}
.osc-brand:focus-visible{outline-offset:6px;box-shadow:none}   /* マークのまわりの余白に、線が重ならないようにする */
/* OpenAIのマーク。ファイルの中にまわりの余白が入っているので、大きさだけを決めてそのまま置く（余白の分だけ外側へずらして、マークの左端を本文にそろえる）。
   黒と白の2つを入れてある。いまはどのページも明るい地なので、出すのは黒だけ（白は、濃い背景のページを作るときのために残してある）。 */
.osc-mark{display:block;flex:none;width:56px;height:56px;margin:0 -14px}
.osc-mark img{display:block;width:100%;height:100%}
.osc-mark .osc-mark-w{display:none}
.osc-name{display:flex;align-items:baseline;gap:8px;font-size:17px;line-height:1.3;white-space:nowrap}
.osc-name b{font-weight:700}
.osc-name span{font-weight:600;opacity:.88}
.osc-chips{display:flex;gap:6px}
.osc-chips em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 36%,transparent);white-space:nowrap}
.osc-nav{display:flex;gap:2px;flex:none}
.osc-nav > *{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:600;white-space:nowrap;opacity:.8}
.osc-nav > *:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
.osc-nav > .on{opacity:1}
/* ── ことばの切りかえ。メニューの右に置く小さなボタン。押すと下に3つのことばが出る ── */
.osc-nav{margin-left:auto}
.osc-lang{order:1;position:relative;flex:none;font-size:13px;font-weight:600}
.osc-lang summary{list-style:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:999px;cursor:pointer;white-space:nowrap;opacity:.8;-webkit-user-select:none;user-select:none}
.osc-lang summary::-webkit-details-marker{display:none}
.osc-lang summary:hover,.osc-lang[open] summary{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
.osc-lang summary:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:none;opacity:1}
.osc-lang summary svg{width:15px;height:15px;flex:none}
.osc-lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;display:grid;gap:2px;min-width:136px;padding:6px;border-radius:14px;background:#fff;color:#14162B;box-shadow:0 10px 30px rgba(20,22,43,.18),0 0 0 1px rgba(20,22,43,.08)}
.osc-lang-menu a{display:flex;align-items:center;height:38px;padding:0 12px;border-radius:9px;font-size:14.5px;font-weight:600;white-space:nowrap}
.osc-lang-menu a:hover{background:rgba(20,22,43,.06)}
.osc-lang-menu a.on{background:rgba(20,22,43,.08)}
/* 日本語以外のページに出す注意書き（イベントは日本語で行うこと） */
.osc-langnote{font-size:14px;line-height:1.6;font-weight:600;margin-top:12px;opacity:.92}
.osc-nav > *:focus-visible{outline:2px solid currentColor;outline-offset:-3px;box-shadow:none;opacity:1}   /* メニューは横にスクロールする枠の中にあり、外側の線は上下が切れるので、内側に引く */
.osc-nav > .on::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:currentColor}
@media (max-width:1100px){
  .osc-head{display:contents}
  .osc-brand{position:relative;z-index:2;padding:14px var(--osc-gut) 0;color:var(--hd-fg,#14162B)}
  .osc-nav{position:sticky;top:var(--osc-top);z-index:50;height:46px;gap:0;padding:0 calc(var(--osc-gut) - 10px);overflow-x:auto;scrollbar-width:none;color:var(--hd-fg,#14162B);transition:background-color .2s,color .2s,box-shadow .2s}
  .osc-nav::-webkit-scrollbar{display:none}
  .osc-nav{margin-left:0}
  /* せまい幅では、サイト名の行の右下（「東京大学 学生運営」の行の右はし）に重ねて置く */
  /* 高さを決めて、同じだけ上にずらす（下に続くメニューの位置が、このボタンのせいで動かないように） */
  .osc-lang{display:block;width:max-content;height:27px;margin:-27px var(--osc-gut) 0 auto;z-index:55;color:var(--hd-fg,#14162B)}
  .osc-brand{padding-right:calc(var(--osc-gut) + 66px)}   /* 右はしに切りかえのボタンが重なるので、その分をあけておく（入りきらない札は次の行に回る） */
  .osc-lang summary{display:flex;height:26px;padding:0 8px;font-size:12.5px}
  .osc-nav > *{flex:none;height:46px;padding:0 10px;border-radius:0;font-size:14px}
  .osc-nav > *:hover{background:none}
  .osc-nav > .on::after{left:10px;right:10px;bottom:7px}
  body.osc-stuck .osc-nav{background-color:rgba(247,246,243,.9);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);box-shadow:0 1px 0 rgba(20,22,43,.1);color:#14162B}
}
@media (max-width:860px){
  :root{--osc-gut:16px}
  .osc-nav > .osc-wide{display:none}   /* スマホではメニューを5つにする */
  .osc-nav > .osc-on-m{opacity:1}       /* メニューに出ないページを開いているときは、入口のページに印をつける */
  .osc-nav > .osc-on-m::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:2px;border-radius:2px;background:currentColor}
  .osc-brand{padding-top:12px;gap:5px 10px}
  .osc-mark{width:50px;height:50px;margin:-8px -12px}
  .osc-name{font-size:15.5px;gap:6px}
  .osc-name span{font-size:13px}
  .osc-chips em{font-size:11px;padding:4px 8px}
}
@media (max-width:480px){   /* スマホの幅では、マークを左に置いて、右に名前と「学生運営」を2行で並べる */
  .osc-brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding-right:var(--osc-gut)}   /* スマホの幅では、ボタンは2行目の右のあいた所に入るので、あけなくてよい */
  .osc-mark{grid-row:1 / span 2;width:66px;height:66px;margin:-10px -16px}
  .osc-name{grid-column:2;flex-wrap:wrap;gap:0 6px}
  .osc-chips{grid-column:2}
  .osc-lang{height:23px;margin-top:-23px}
  .osc-lang summary{height:22px}
}
@media (max-width:480px){   /* スマホの幅では、5つを左右いっぱいに並べる */
  .osc-nav{justify-content:space-between;padding:0 10px}
  .osc-nav > *{padding:0 6px}
  .osc-nav > .on::after,.osc-nav > .osc-on-m::after{left:6px;right:6px}
}
@media (max-width:380px){
  .osc-nav{padding:0 8px}
  .osc-nav > *{padding:0 5px;font-size:13.5px}
  .osc-nav > .on::after,.osc-nav > .osc-on-m::after{left:5px;right:5px}
}

@media (max-width:340px){   /* いちばん小さいスマホでも、5つが1行に入るようにする */
  .osc-nav{padding:0 6px}
  .osc-nav > *{padding:0 3px;font-size:12px}
  .osc-nav > .on::after,.osc-nav > .osc-on-m::after{left:3px;right:3px}
}

/* ── フッター ── */
.osc-ft{display:flex;align-items:center;gap:16px;padding:22px 0 56px;font-size:12.5px;line-height:1.8;color:var(--ft-fg,#5d5f70);border-top:1px solid var(--ft-line,rgba(20,22,43,.12));margin-top:44px}
.osc-ft-badge{width:72px;height:72px;flex:none}   /* Campus Leadのバッジ。大きさだけを変えて、そのまま置く */
@media (max-width:720px){.osc-ft{padding-bottom:40px;margin-top:36px}}

/* ── 小見出しの行 ── */
.osc-sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.osc-sh h2{font-size:21px;font-weight:700;line-height:1.4}
.osc-sh h2 small{font-size:14px;font-weight:600;color:var(--mute);margin-left:10px}
.osc-lnk{font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:8px 0;white-space:nowrap}
.osc-lnk svg{width:14px;height:14px}
.osc-lnk:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:720px){.osc-sh h2{font-size:19px}.osc-sh h2 small{font-size:13px;margin-left:8px}}

/* ── ボタン ── */
.osc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:700;white-space:nowrap}
.osc-btn svg{width:16px;height:16px}
.osc-btn-1{background:#14162B;color:#fff}
.osc-btn-1:hover{background:#262948}
.osc-btn-2{box-shadow:inset 0 0 0 1.5px rgba(20,22,43,.22)}
.osc-btn-2:hover{background:rgba(20,22,43,.05)}

/* ── アイコンの枠 ── */
.osc-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ic-bg,#E4F1FF);color:var(--ic-fg,#0A6FD6);flex:none}
.osc-ic svg{width:22px;height:22px}

/* ── スマホの下に出る申し込みの帯（日程が決まっていて、上の申し込みボタンが画面の外に出たときだけ） ── */
.osc-cta{display:none}
@media (max-width:860px){
  .osc-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 -1px 0 rgba(20,22,43,.1);color:#14162B;transform:translateY(110%);transition:transform .22s}
  body.osc-cta-on .osc-cta{transform:none}
  .osc-cta b{display:block;font-size:15px;line-height:1.35}
  .osc-cta small{display:block;font-size:12px;color:#5d5f70;line-height:1.4}
  .osc-cta .osc-btn{height:44px;padding:0 20px;font-size:15px;flex:none}
  body.osc-cta-on .osc-ft{padding-bottom:104px}
  body.osc-cta-on .osc-toast{bottom:84px}
}

/* ── 学期の予定：横に3つ ── */
.osc-plan{display:grid;grid-template-columns:repeat(3,1fr);background:var(--plan-bg,#fff);border:1px solid var(--plan-line,rgba(20,22,43,.1));border-radius:18px}
.osc-plan > div{padding:18px 24px 20px;border-left:1px solid var(--plan-line,rgba(20,22,43,.1))}
.osc-plan > div:first-child{border-left:0}
.osc-plan dt{font-size:12.5px;font-weight:600;color:var(--mute)}
.osc-plan dd{font-size:22px;font-weight:700;line-height:1.4;margin-top:2px;letter-spacing:.01em}
.osc-plan dd small{display:block;font-size:13px;font-weight:500;color:var(--body);line-height:1.6;margin-top:2px;letter-spacing:0}
@media (max-width:720px){
  .osc-plan{grid-template-columns:1fr}
  .osc-plan > div{border-left:0;border-top:1px solid var(--plan-line,rgba(20,22,43,.1));padding:13px 18px 14px;display:grid;grid-template-columns:104px 1fr;align-items:baseline;gap:8px}
  .osc-plan > div:first-child{border-top:0}
  .osc-plan dd{font-size:17px;margin-top:0}
}

/* ── 作品の小さなカード ── */
.osc-wkc{cursor:pointer;border-radius:14px;display:block}
.osc-wkc .th{--th-r:12px;transition:transform .18s}
.osc-wkc:hover .th{transform:translateY(-3px)}
.osc-wkc b{display:block;font-size:14px;font-weight:700;line-height:1.45;margin-top:9px}
.osc-wkc span{font-size:12.5px;color:var(--mute)}

/* ── まだ内容がない場所の枠 ── */
.osc-gh{border:1.5px dashed var(--gh-line,rgba(20,22,43,.26));border-radius:12px;display:grid;place-items:center;text-align:center;padding:14px;color:var(--body);background:var(--gh-bg,rgba(255,255,255,.4))}
.osc-gh p{font-size:14.5px;font-weight:600;line-height:1.7}
.osc-gh p small{display:block;font-size:12.5px;font-weight:500;color:var(--mute)}
.osc-gh.sq{aspect-ratio:4/3}
.osc-ghc b{display:block;font-size:14px;font-weight:700;line-height:1.45;margin-top:9px}
.osc-ghc span{font-size:12.5px;color:var(--mute)}
.osc-ghc .osc-gh p{font-size:13px}