/* ============================================================
     Boost design tokens (DESIGN.md 準拠)
     ============================================================ */
  :root {
    --primary:#FF9500; --primary-light:#FFB340; --primary-dark:#E6850E;
    --primary-12:rgba(255,149,0,.12); --primary-08:rgba(255,149,0,.08); --primary-24:rgba(255,149,0,.24);
    --success:#34C759; --success-12:rgba(52,199,89,.12);
    --error:#FF3B30; --error-12:rgba(255,59,48,.12);
    --blue:#007AFF;
    /* 白ベース: ページ地もカードも白。階層は border と --fill(薄いグレー)で作る */
    --bg:#FFFFFF; --surface:#FFFFFF; --fill:#F2F2F7; --track:#E9E9EE;
    --text:#000000; --text-2:#8E8E93; --text-3:#C7C7CC; --border:#E5E5EA;
    --scrim:rgba(0,0,0,.32);
    --shadow-sm:0 2px 8px rgba(0,0,0,.06);
    --shadow-md:0 4px 12px rgba(0,0,0,.06);
    --shadow-lg:0 8px 20px rgba(0,0,0,.10);
    --shadow-btn:0 2px 8px rgba(255,149,0,.30);
    --shadow-fab:0 4px 16px rgba(255,149,0,.30);
    --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",system-ui,-apple-system,sans-serif;
    --en:"Noto Serif","Hiragino Mincho ProN",Georgia,serif;
    --univ-mark-opacity:.06; --univ-mark-on:.09;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --primary:#FF9F0A; --primary-light:#FFB340; --primary-dark:#FFB340;
      --primary-12:rgba(255,159,10,.16); --primary-08:rgba(255,159,10,.10); --primary-24:rgba(255,159,10,.30);
      --success:#30D158; --success-12:rgba(48,209,88,.16);
      --error:#FF453A; --error-12:rgba(255,69,58,.16);
      --blue:#0A84FF;
      --bg:#000000; --surface:#1C1C1E; --fill:#2C2C2E; --track:#2C2C2E;
      --text:#FFFFFF; --text-2:#8E8E93; --text-3:#48484A; --border:#38383A;
      --scrim:rgba(0,0,0,.6);
      --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-btn:none; --shadow-fab:none;
      --univ-mark-opacity:.12; --univ-mark-on:.18;
    }
  }
  :root[data-theme="dark"] {
    --primary:#FF9F0A; --primary-light:#FFB340; --primary-dark:#FFB340;
    --primary-12:rgba(255,159,10,.16); --primary-08:rgba(255,159,10,.10); --primary-24:rgba(255,159,10,.30);
    --success:#30D158; --success-12:rgba(48,209,88,.16);
    --error:#FF453A; --error-12:rgba(255,69,58,.16);
    --blue:#0A84FF;
    --bg:#000000; --surface:#1C1C1E; --fill:#2C2C2E; --track:#2C2C2E;
    --text:#FFFFFF; --text-2:#8E8E93; --text-3:#48484A; --border:#38383A;
    --scrim:rgba(0,0,0,.6);
    --shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-btn:none; --shadow-fab:none;
    --univ-mark-opacity:.12; --univ-mark-on:.18;
  }

  html{overflow-x:clip;}
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--jp); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0;text-wrap:balance;} p{margin:0;} a{color:var(--blue);}
  :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
  .screen{max-width:780px;margin:0 auto;padding:0 20px 140px;position:relative;z-index:1;}

  /* ---------------- AppBar ---------------- */
  .appbar{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:.5px solid var(--border);
  }
  .appbar-in{
    max-width:780px; margin:0 auto; padding:10px 20px;
    display:flex; align-items:center; gap:8px;
  }
  .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);min-width:0;}
  .brand img{height:28px;width:auto;flex:none;}
  .brand-txt{display:flex;flex-direction:column;min-width:0;}
  .brand-name{font-size:14px;font-weight:600;line-height:1.2;}
  .brand-sub{font-size:10px;font-weight:600;color:var(--text-2);line-height:1.2;}

  /* 目次はコンテンツ幅の右。テーマ切替は画面右上（下で fixed） */
  .toc-wrap{margin-left:auto;position:relative;}
  .appbar-in:has(.toc-wrap){padding-right:56px;}
  .toc-btn{
    display:inline-flex;align-items:center;gap:6px;
    height:32px;padding:0 12px;border-radius:20px;
    background:var(--primary-12);border:1px solid var(--primary-24);
    color:var(--primary-dark);font-family:inherit;font-size:12px;font-weight:600;
    cursor:pointer;max-width:150px;
  }
  .toc-btn .cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .toc-btn .caret{transition:transform .25s cubic-bezier(.2,.8,.2,1);}
  .toc-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}

  .toc-pop{
    position:absolute; top:calc(100% + 8px); right:0;
    width:min(280px,calc(100vw - 32px));
    background:var(--surface); border:.5px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow-lg);
    padding:6px; z-index:50;
    transform-origin:top right;
    opacity:0; transform:scale(.94) translateY(-6px); pointer-events:none;
    transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .toc-pop.open{opacity:1;transform:none;pointer-events:auto;}
  .toc-pop a{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:12px;
    text-decoration:none;color:var(--text);font-size:14px;font-weight:500;
  }
  .toc-pop a:hover{background:var(--fill);}
  .toc-pop a .num{
    width:22px;height:22px;border-radius:7px;flex:none;
    background:var(--fill);color:var(--text-2);
    display:grid;place-items:center;font-size:11px;font-weight:700;
  }
  .toc-pop a.active{background:var(--primary-12);color:var(--primary-dark);font-weight:600;}
  .toc-pop a.active .num{background:var(--primary);color:#fff;}

  /* スクロール進捗 */
  .progress{height:2px;background:transparent;}
  .progress i{display:block;height:100%;width:0;background:var(--primary);transition:width .1s linear;}

  /* ---------------- hero ---------------- */
  .hero{padding:24px 0 8px;}
  .float{animation:float 4.5s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .hero .eyebrow{font-size:12px;font-weight:600;color:var(--primary-dark);margin-bottom:8px;}
  .hero h1{font-size:28px;font-weight:700;line-height:1.25;margin-bottom:12px;}
  .hero .lede{font-size:14px;line-height:1.7;color:var(--text-2);}

  .chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .chip{
    display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;
    border-radius:20px;background:var(--surface);border:1px solid var(--border);
    font-size:12px;font-weight:600;color:var(--text);
  }
  .chip.on{background:var(--primary-12);border-color:var(--primary-24);color:var(--primary-dark);}
  .chip .stars i{color:var(--text-3);font-style:normal;}

  /* ---------------- cards / sections ---------------- */
  /* Web らしく: 箱で囲わず、横いっぱいに流して 1px の罫線で区切る */
  .block{padding:28px 0;border-top:1px solid var(--border);}
  /* 見出し直後のブロックは罫線を引かない。
     .sec-head も div なので :first-of-type では拾えず、隣接セレクタで指定する */
  .sec-head + .block{border-top:0;}

  section{scroll-margin-top:76px;}
  /* セクションの切れ目は Markdown の --- 相当の全幅ルール */
  .sec-head{
    display:flex;align-items:center;gap:12px;
    margin:44px 0 4px;padding-top:28px;
    border-top:1px solid var(--text-3);
  }
  .sec-head h2{font-size:24px;font-weight:700;}
  .sec-head .ico{
    width:28px;height:28px;border-radius:8px;flex:none;
    background:var(--primary);color:#fff;
    display:grid;place-items:center;font-size:14px;font-weight:700;
  }
  .sec-head .boo-fig{margin-left:auto;}
  /* Boo は 185〜216×220 と縦長。width と height を両方固定すると潰れるので
     高さだけ決めて width:auto にする */
  .sec-head .boo-mini{height:44px;width:auto;flex:none;}
  .block h3{font-size:19px;font-weight:600;line-height:1.35;}

  /* reveal animation */
  .rv{opacity:0;transform:translateY(14px);}
  .rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);}

  /* ---------------- 問題 ---------------- */
  .exam{background:var(--fill);border-radius:12px;padding:20px;}
  .qhead{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:16px;}
  .qbadge{font-size:12px;font-weight:600;color:#fff;background:var(--primary);border-radius:8px;padding:4px 10px;}
  .qinst{font-size:14px;color:var(--text-2);}
  .qbody{font-size:17px;line-height:2.05;letter-spacing:.01em;}

  /* 図表つきの問題。画像は problem-figures バケットの公開URLを直接参照する。
     セクションは増やさず、セクション1「問題」の .exam の内側に置く。 */
  .fig{margin:16px 0 0;}
  /* 入試の図版は白地の走査画像。ダークで白い板が浮かないよう、
     枠と余白を付けて「紙が置いてある」見え方にする。
     画像自体は反転させない（グラフの色が壊れるため）。ダークで影は使わない。 */
  .fig img{
    display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;
    background:#FFFFFF;border:1px solid var(--border);border-radius:10px;padding:12px;
  }
  .fig figcaption{margin-top:8px;font-size:13px;line-height:1.6;color:var(--text-2);text-align:center;}
  /* 画像が出ないときだけ見せる代替テキスト。
     描ける図が 1 枚も無いときは最初から見せる（is-shown）。 */
  .fig-fallback{display:none;margin-top:12px;font-size:14px;line-height:1.85;color:var(--text-2);}
  .fig-fallback.is-shown{display:block;}
  /* img の onerror が .fig に is-broken を付ける。JSが無くても alt は出る */
  .exam .fig.is-broken img,
  .exam .fig.is-broken figcaption{display:none;}
  .exam .fig.is-broken~.fig-fallback{display:block;}
  @media (max-width:520px){
    .fig img{padding:8px;max-height:60vh;border-radius:8px;}
  }

  ul.pts{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  ul.pts>li{position:relative;padding-left:20px;font-size:14px;line-height:1.7;}
  ul.pts>li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:999px;background:var(--primary);}
  ul.pts>li.key::before{background:var(--error);}
  ul.pts>li b{font-weight:600;}

  /* ---------------- CTA ---------------- */
  .cta{
    background:linear-gradient(135deg,#FFAA33,#FF9500 55%,#FF7F00);
    border-radius:16px;padding:24px;margin:28px 0;color:#fff;box-shadow:var(--shadow-md);
    position:relative;overflow:hidden;
  }
  .cta .cta-boo{position:absolute;right:-6px;bottom:-10px;height:118px;width:auto;opacity:.9;pointer-events:none;}
  .cta .inner{position:relative;z-index:1;padding-right:88px;}
  .cta h3{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff;}
  .cta p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.94);margin-bottom:16px;}
  .cta .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:48px;padding:0 24px;border-radius:12px;
    background:#fff;color:#C56A00;font-size:16px;font-weight:600;text-decoration:none;
    transition:transform .15s ease-in-out;
  }
  .cta .btn:active{transform:scale(.97);}
  .cta .sub{display:block;text-align:center;font-size:12px;color:rgba(255,255,255,.88);margin-top:12px;}
  @media (max-width:520px){
    .cta .inner{padding-right:0;}
    .cta .cta-boo{height:88px;opacity:.35;}
  }

  /* ---------------- 解説 ---------------- */
  .segno{
    display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:8px;
    background:var(--primary-12);color:var(--primary-dark);
    font-size:10px;font-weight:600;letter-spacing:.06em;margin-bottom:12px;
  }
  .ja-quote{font-size:16px;line-height:1.95;background:var(--fill);border-radius:12px;padding:12px 14px;margin-bottom:16px;}
  .minihead{font-size:12px;font-weight:600;color:var(--text-2);margin:20px 0 8px;}
  .approach{font-size:14px;line-height:1.75;background:var(--primary-08);border-radius:12px;padding:12px 14px;}
  .en-block{border-radius:12px;padding:12px 14px;margin-top:8px;background:var(--success-12);}
  .en-block.alt{background:var(--fill);}
  .en-tag{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--text-2);margin-bottom:6px;}
  .en-text{font-family:var(--en);font-size:16px;line-height:1.8;}
  .en-text em{font-style:normal;background:var(--primary-24);border-radius:3px;padding:0 2px;}

  /* ---------------- 模範解答 ---------------- */
  .model-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:8px;background:var(--primary-12);color:var(--primary-dark);}
  .badge.plain{background:var(--fill);color:var(--text-2);}
  .model-text{font-family:var(--en);font-size:17px;line-height:1.85;}
  .model-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);font-size:14px;line-height:1.75;color:var(--text-2);}

  /* ---------------- 誤答 ---------------- */
  .miss-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;}
  .miss-head h3{font-size:16px;font-weight:600;flex:1;line-height:1.5;}
  .sev{flex:none;font-size:10px;font-weight:600;padding:3px 8px;border-radius:8px;white-space:nowrap;}
  .sev-l{background:var(--error);color:#fff;}
  .sev-m{background:var(--error-12);color:var(--error);}
  .sev-s{background:var(--fill);color:var(--text-2);border:1px solid var(--border);}
  .xy{display:grid;gap:8px;margin-bottom:12px;}
  .xy>div{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;border-radius:12px;padding:10px 12px;font-family:var(--en);font-size:15px;line-height:1.65;}
  .xy .x{background:var(--error-12);} .xy .y{background:var(--success-12);}
  .xy .mk{font-family:var(--jp);font-weight:700;font-size:14px;}
  .xy .x .mk{color:var(--error);} .xy .y .mk{color:var(--success);}
  .miss-why{font-size:14px;line-height:1.75;color:var(--text-2);}

  /* ---------------- 言いかえ ---------------- */
  .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-2);margin-bottom:12px;}
  .alt-block{padding:16px 0;border-top:1px solid var(--border);}
  .legend + .alt-block{border-top:0;padding-top:0;}
  .alt-block:last-child{padding-bottom:0;}
  .alt-ja{font-size:16px;font-weight:600;margin-bottom:10px;}
  .alt-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 8px;padding:8px 0;}
  .alt-row+.alt-row{border-top:1px solid var(--border);}
  .alt-mark{font-size:13px;font-weight:700;line-height:1.6;}
  .m-best{color:var(--success);} .m-ok{color:var(--text-2);} .m-skip{color:var(--text-3);} .m-no{color:var(--error);}
  .alt-en{font-family:var(--en);font-size:15.5px;line-height:1.6;}
  .alt-row.no .alt-en{color:var(--text-2);text-decoration:line-through;}
  .alt-note{grid-column:2;font-size:13px;line-height:1.6;color:var(--text-2);}

  /* ---------------- 型 ---------------- */
  .pat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  .pat-name{font-family:var(--en);font-size:17px;font-weight:700;}
  .pat-sub{font-size:13px;color:var(--text-2);margin-bottom:10px;}
  .pat-use{font-size:14px;line-height:1.75;margin-bottom:12px;}
  .pat-ex{background:var(--fill);border-radius:12px;padding:10px 12px;display:grid;gap:6px;font-size:13.5px;line-height:1.6;}

  /* ---------------- 語彙 ---------------- */
  .tablewrap{overflow-x:auto;}
  table{border-collapse:collapse;width:100%;min-width:460px;}
  th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:top;}
  tr:last-child td{border-bottom:0;}
  thead th{font-size:12px;font-weight:600;color:var(--text-2);}
  td.v-en{font-family:var(--en);font-size:15.5px;white-space:nowrap;}
  td.v-ja{font-size:14px;white-space:nowrap;}
  td.v-note{font-size:13px;color:var(--text-2);line-height:1.6;}
  .trend{font-size:14px;line-height:1.8;}

  /* ---------------- related ---------------- */
  .rel-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text);}
  .rel-row:first-of-type{border-top:0;padding-top:0;}
  .rel-row:last-child{padding-bottom:0;}
  .rel-main{flex:1;min-width:0;}
  .rel-title{font-size:16px;font-weight:600;display:block;}
  .rel-sub{font-size:12px;color:var(--text-2);margin-top:2px;display:block;}
  .rel-arw{color:var(--text-3);font-size:18px;}

  /* ---------------- FAB ---------------- */
  .fabs{position:fixed;right:16px;bottom:16px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
  .fab{
    display:inline-flex;align-items:center;gap:8px;
    height:52px;padding:0 20px;border-radius:999px;
    font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;border:0;cursor:pointer;
    transition:transform .15s ease-in-out;
  }
  .fab:active{transform:scale(.97);}
  .fab-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-fab);}
  .fab-secondary{background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);border:1px solid var(--border);}
  .fab .glyph{font-size:17px;line-height:1;}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fab-primary{color:#000;}}
  :root[data-theme="dark"] .fab-primary{color:#000;}

  /* ---------------- bottom sheet ---------------- */
  .scrim{
    position:fixed;inset:0;background:var(--scrim);z-index:60;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
    backdrop-filter:blur(2px);
  }
  .scrim.open{opacity:1;pointer-events:auto;}
  .sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:61;
    background:var(--surface);border-radius:20px 20px 0 0;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom));
    max-width:780px;margin:0 auto;
    transform:translateY(102%);
    transition:transform .34s cubic-bezier(.2,.9,.25,1);
    max-height:86vh;overflow-y:auto;
  }
  .sheet.open{transform:none;}
  .grabber{width:36px;height:5px;border-radius:999px;background:var(--text-3);margin:6px auto 14px;}
  .sheet h3{font-size:20px;font-weight:600;margin-bottom:6px;}
  .sheet .sheet-sub{font-size:13px;line-height:1.7;color:var(--text-2);margin-bottom:16px;}
  .ai-row{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:14px;border-radius:12px;border:1px solid var(--border);
    background:var(--surface);color:var(--text);
    font-family:inherit;font-size:16px;font-weight:600;text-align:left;
    cursor:pointer;margin-bottom:8px;text-decoration:none;
    transition:transform .15s ease-in-out;
  }
  .ai-row:active{transform:scale(.98);}
  .ai-row:hover{background:var(--fill);}
  .ai-logo{
    width:36px;height:36px;border-radius:10px;flex:none;
    display:grid;place-items:center;
    background:var(--fill);
  }
  .ai-logo img,.ai-logo svg{width:22px;height:22px;display:block;}
  .ai-logo-copy{background:#8E8E93;color:#fff;font-size:15px;font-weight:800;}
  .ai-name{flex:1;} .ai-desc{display:block;font-size:11px;font-weight:500;color:var(--text-2);margin-top:2px;}
  .ai-arw{color:var(--text-3);}
  .sheet-note{font-size:12px;line-height:1.7;color:var(--text-2);background:var(--fill);border-radius:12px;padding:12px;margin-top:8px;}

  /* ---------------- toast ---------------- */
  .toast{
    position:fixed;left:50%;bottom:96px;z-index:70;
    transform:translate(-50%,16px);opacity:0;pointer-events:none;
    background:rgba(0,0,0,.86);color:#fff;font-size:13px;font-weight:600;
    padding:11px 18px;border-radius:999px;
    transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1);
    white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translate(-50%,0);}

  footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;line-height:1.7;color:var(--text-2);}
  .footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .footer-brand img{width:22px;height:22px;border-radius:6px;}
  .footer-brand span{font-size:13px;font-weight:600;color:var(--text);}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important;}
    .rv{opacity:1 !important;transform:none !important;}
  }


/* ============================================================
   1) 大学ロゴ — スクロールしない、画面左からはみ出す薄い背景
   ============================================================ */
.univ-mark{
  position:fixed; left:-28vw; top:50%;
  transform:translateY(-50%);
  width:85vw; height:auto; max-width:none;
  pointer-events:none; user-select:none; z-index:0;
  opacity:var(--univ-mark-opacity);
  filter:grayscale(1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .univ-mark{filter:grayscale(1) invert(1);}
}
:root[data-theme="dark"] .univ-mark{filter:grayscale(1) invert(1);}
@media (max-width:560px){
  .univ-mark{left:-42vw; width:110vw;}
}
/* AppBar・一覧カードの小さめロゴ */
.brand-univ{height:28px;width:auto;opacity:.9;flex:none;}
.univ-card .logo{height:36px;width:36px;object-fit:contain;flex:none;}
/* 京大の濃色紋章はダーク面で沈むので反転する */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .univ-card[data-univ="kyoto-univ"] .logo{filter:invert(1);}
}
:root[data-theme="dark"] .univ-card[data-univ="kyoto-univ"] .logo{filter:invert(1);}

/* ホーム: 既定は非表示。カード hover / キーボードフォーカスでフェードイン */
.univ-bg .univ-mark{
  opacity:0;
  transform:translateY(-50%) translateX(-8%) scale(.92);
  transition:opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.univ-bg .univ-mark.is-on,
body:has(.univ-card[data-univ="kyoto-univ"]:is(:hover,:focus-visible)) .univ-mark[data-univ="kyoto-univ"],
body:has(.univ-card[data-univ="tokyo-univ"]:is(:hover,:focus-visible)) .univ-mark[data-univ="tokyo-univ"],
body:has(.univ-card[data-univ="osaka-univ"]:is(:hover,:focus-visible)) .univ-mark[data-univ="osaka-univ"],
body:has(.univ-card[data-univ="kyushu-univ"]:is(:hover,:focus-visible)) .univ-mark[data-univ="kyushu-univ"],
body:has(.univ-card[data-univ="kobe-univ"]:is(:hover,:focus-visible)) .univ-mark[data-univ="kobe-univ"]{
  opacity:var(--univ-mark-on);
  transform:translateY(-50%) translateX(0) scale(1);
}

/* ============================================================
   4) テーマ切り替え
   ============================================================ */
.theme-btn{
  position:fixed; top:max(10px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  z-index:45;
  display:inline-grid;place-items:center;
  width:32px;height:32px;border-radius:999px;
  background:var(--fill);border:1px solid var(--border);
  color:var(--text-2);cursor:pointer;font-size:14px;line-height:1;
  font-family:inherit;padding:0;
}
.theme-btn:hover{color:var(--text);border-color:var(--text-3);}
.theme-btn .i-sun{display:none;}
.theme-btn .i-moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block;}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none;}
}
:root[data-theme="dark"] .theme-btn .i-sun{display:block;}
:root[data-theme="dark"] .theme-btn .i-moon{display:none;}
:root[data-theme="light"] .theme-btn .i-sun{display:none;}
:root[data-theme="light"] .theme-btn .i-moon{display:block;}

/* ============================================================
   6) 条件英作文の論理の流れ（ロジックツリー）
   ============================================================ */
.flow{display:grid;gap:0;margin:4px 0 8px;}
.flow-node{
  position:relative;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);padding:14px 16px;
}
.flow-node.is-claim{border-color:var(--primary);background:var(--primary-08);}
.flow-node.is-close{border-style:dashed;}
.flow-role{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:8px;
  background:var(--fill);color:var(--text-2);
  font-size:10px;font-weight:600;letter-spacing:.06em;margin-bottom:8px;
}
.flow-node.is-claim .flow-role{background:var(--primary-12);color:var(--primary-dark);}
.flow-ja{font-size:14px;font-weight:600;line-height:1.6;margin-bottom:6px;}
.flow-en{font-family:var(--en);font-size:13.5px;line-height:1.65;color:var(--text-2);}
.flow-arrow{
  justify-self:center;width:2px;height:20px;background:var(--border);position:relative;
}
.flow-arrow::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--border);
}

/* ============================================================
   7) 各文の中に置く誤答・言いかえ
   ============================================================ */
.miss-in{
  border:1px solid var(--border);
  border-radius:12px;background:var(--surface);
  padding:12px 14px;margin-bottom:8px;
}
.miss-in .miss-head{margin-bottom:10px;}
.miss-in h4{font-size:14px;font-weight:600;line-height:1.5;margin:0;flex:1;}
.miss-in .xy>div{font-size:14px;padding:8px 10px;}
.miss-in .miss-why{font-size:13px;}
/* 文の中に入れる言いかえは、全体セクションより一段控えめに */
.block .alt-block{padding:10px 0;}
.block .alt-block .alt-ja{font-size:14px;}
.block .alt-block .alt-en{font-size:14.5px;}


/* ---- 一覧ページ ---- */
.idx-hero{padding:32px 0 8px;}
.idx-hero h1{font-size:28px;font-weight:700;line-height:1.25;margin-bottom:12px;}
.idx-hero p{font-size:15px;line-height:1.75;color:var(--text-2);}
.univ-grid{display:grid;gap:12px;margin-top:24px;}
.univ-card{
  display:flex;align-items:center;gap:14px;padding:18px 16px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface);
  text-decoration:none;color:var(--text);
  transition:border-color .2s ease, background .2s ease;
}
.univ-card:hover,.univ-card:focus-visible{border-color:var(--primary);background:var(--primary-08);}
.univ-card .n{font-size:18px;font-weight:600;flex:1;min-width:0;}
.univ-card .c{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.univ-card .arw{color:var(--text-3);font-size:18px;}
@media (max-width:560px){
  .univ-card{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;column-gap:12px;row-gap:2px;}
  .univ-card .logo{grid-row:1 / span 2;}
  .univ-card .n{grid-column:2;flex:unset;}
  .univ-card .c{grid-column:2;grid-row:2;}
  .univ-card .arw{grid-column:3;grid-row:1 / span 2;}
}
.year-block{padding:20px 0;border-top:1px solid var(--border);}
.year-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.year-head h2{font-size:20px;font-weight:700;}
.year-head .t{font-size:12px;color:var(--text-2);}
.q-list{display:grid;gap:8px;}
.q-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  text-decoration:none;color:var(--text);
}
.q-row:hover{border-color:var(--primary);background:var(--primary-08);}
.q-row .p{font-size:12px;font-weight:600;color:var(--primary-dark);
  background:var(--primary-12);border-radius:8px;padding:3px 9px;white-space:nowrap;}
.q-row .t{flex:1;font-size:14px;line-height:1.5;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.q-row .f{font-size:11px;color:var(--text-2);white-space:nowrap;}


/* ---- ガイド記事 ---- */
.g-sec{padding-top:12px;}
.g-sec h2{font-size:24px;font-weight:700;margin:44px 0 4px;padding-top:28px;
  border-top:1px solid var(--text-3);}
.g-intro{font-size:14px;line-height:1.8;color:var(--text-2);margin:12px 0 20px;}
.g-text{font-size:15px;line-height:1.9;margin:16px 0;}
.g-cmp{display:grid;gap:10px;margin:20px 0;}
.g-cmp>div{border-radius:12px;padding:14px 16px;}
.g-cmp .bad{background:var(--error-12);}
.g-cmp .good{background:var(--success-12);}
.g-cmp .lb{font-size:11px;font-weight:700;letter-spacing:.06em;margin-bottom:8px;display:block;}
.g-cmp .bad .lb{color:var(--error);} .g-cmp .good .lb{color:var(--success);}
.g-cmp .ja{font-size:14px;margin-bottom:4px;}
.g-cmp .en{font-family:var(--en);font-size:16px;line-height:1.6;}
.g-cmp .nt{font-size:12.5px;color:var(--text-2);margin-top:8px;line-height:1.65;}
.g-pat{border-top:1px solid var(--border);padding:24px 0;}
.g-pat:first-of-type{border-top:0;}
.g-pat .nm{font-family:var(--en);font-size:19px;font-weight:700;margin-bottom:8px;}
.g-pat .us{font-size:14px;line-height:1.8;color:var(--text-2);margin-bottom:14px;}
.g-ex{display:grid;gap:8px;}
.g-ex>div{background:var(--fill);border-radius:12px;padding:11px 14px;}
.g-ex .j{font-size:13.5px;margin-bottom:3px;}
.g-ex .e{font-family:var(--en);font-size:15px;line-height:1.55;}
.g-ex .s{font-size:11px;color:var(--text-2);margin-top:5px;}
.g-steps{display:grid;gap:12px;margin:16px 0;}
.g-step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;}
.g-step .n{width:26px;height:26px;border-radius:999px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;}
.g-step .t{font-size:15px;font-weight:600;margin-bottom:3px;}
.g-step .d{font-size:13.5px;line-height:1.75;color:var(--text-2);}
.g-warn{border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:0 12px 12px 0;padding:14px 16px;margin:12px 0;background:var(--surface);}
.g-warn .t{font-size:15px;font-weight:600;margin-bottom:6px;}
.g-warn .x{font-size:13.5px;line-height:1.8;color:var(--text-2);}
.g-warn .cmp{display:grid;gap:6px;margin-top:10px;font-family:var(--en);font-size:14px;}
.g-warn .cmp .b{background:var(--error-12);border-radius:8px;padding:7px 10px;}
.g-warn .cmp .g{background:var(--success-12);border-radius:8px;padding:7px 10px;}