*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
/* ── レイアウト ────────────────────────────
 * ベースはモバイル（1列）。PC は min-width で上乗せする。
 * 「PC は第2の必須形態」―― CLAUDE.md の前提（2026-08-22 改訂）。
 */
.wrap{max-width:none;margin:0 auto;padding:0 var(--pad) var(--sp-8)}
.workbench{display:block}
/* モバイルでは詳細をカードの中に開くので、右カラムは出さない。 */
.inspector{display:none}

/* ── header ─────────────────────────── */
/* 常に出ている案内帯。エラーではないので警告色を使わない。
   データ目盛り色（--scale-*）は4軸と band 専用、という取り決めもあるので、
   ここは中立の面で出す。
   2026-08-26 松下判断で非表示化。DOM自体は残す（起動時に app.js が
   $("#note").textContent を無条件に叩くため、要素を消すと初期化が落ちる）。 */
.note{display:none;background:var(--dim);color:var(--soft);font-size:var(--fs-xs);
  padding:7px var(--pad);text-align:center;line-height:1.5;
  border-bottom:1px solid var(--rule)}
/* ヘッダは濃色帯。マークが「ラ」そのものなので、
   マーク＋「クハン」で1語として読ませる。マーク以外は白。 */
header{background:var(--brand-ground);padding:13px var(--pad) 12px}
.hd{max-width:none;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2)}
h1{margin:0;display:flex;align-items:baseline}
/* マークは字形として置く。viewBox はインクの外周ぎりぎりに切ってあり
   （元の 0 0 64 64 には左右上下に余白がある）、そのままだと
   「ラ」と「ク」の間だけ空いて1語に見えない。 */
h1 .mark{display:block;height:38px;width:auto;align-self:center;
  margin-right:.11em;transform:translateY(1px)}
/* ロゴタイプ。字間 .11em はブランド規定 */
h1 .wm{font-size:40px;font-weight:800;color:var(--on-dark);letter-spacing:.11em;
  line-height:1;padding-right:.11em;white-space:nowrap}
h1 small{font-size:var(--fs-hdr-sub);font-weight:400;letter-spacing:.02em;
  color:var(--on-dark-weak);margin-left:18px;align-self:center}

/* ── ロックアップと GUILD の2行 ─────────
 * ロゴ本体に GUILD は入れない（ブランド資料の決定）。
 * 縦線で2行を1つの塊にまとめ、「GUILD＝AI コミュニティ」と読ませる。
 * 2行が並列の宣言に見えると「ラクハンが AI 製品」と誤読される。
 */
.lockup{display:flex;align-items:center;gap:var(--sp-5);
  text-decoration:none;flex-wrap:wrap}
.by{display:flex;flex-direction:column;padding-left:var(--sp-4);
  border-left:1px solid var(--on-dark-line);line-height:1.35}
.byMain{font-size:var(--fs-hdr-sub);font-weight:600;color:var(--on-dark-strong)}
.bySub{font-size:calc(var(--fs-hdr-sub) - 2px);font-weight:400;letter-spacing:.14em;
  color:var(--on-dark-faint);text-transform:uppercase}

/* ── ナビ ─────────────────────────────
 * ページを分けた以上、いまどこにいるか分からないのは事故なので、
 * 現在地に下線を出す（aria-current は app.js が付ける）。
 */
.nav{display:flex;gap:var(--sp-4);align-items:center}
.nav a{color:var(--on-dark-mid);text-decoration:none;
  font-size:var(--fs-hdr-sub);padding:var(--sp-1) 0;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out)}
.nav a:hover{color:var(--on-dark)}
.nav a[aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--brand)}
.nav .ext{font-size:10px;margin-left:2px;opacity:.7}

/* ── 狭い画面のヘッダ ─────────────────
 * 上段＝ロゴ＋添え書き＋GUILD、下段＝ナビの帯、の2段に組む。
 * 以前は lockup が flex-wrap で折れ、GUILD だけが2行目に落ちて
 * ロゴ／GUILD／ナビの3段になっていた（ヘッダだけで 183px）。
 */
@media (max-width:639px){
  /* ロゴ以外の文字（添え書き・GUILD・ナビ）は --fs-hdr-sub で一括。
     狭い画面ぶんは tokens.css 側で落としている。 */
  .hd{flex-direction:column;align-items:stretch;gap:0}
  /* ロゴと GUILD は必ず同じ行に置く。折り返さない代わりに、
     519px 以下ではロゴを画面幅に追従させて収める（下のブロック）。 */
  .lockup{gap:var(--sp-3);flex-wrap:nowrap;align-items:center}
  h1{min-width:0}
  /* 添え書きは折らない。折れると1行に収めた意味が無くなる。 */
  h1 small{margin-left:var(--sp-2);white-space:nowrap}
  /* GUILD は行の右端へ。左のロゴと視覚的に競らせない。 */
  .by{margin-left:auto;flex:0 0 auto}
  /* ロゴは 2 倍にしたが、狭い画面でそのまま出すとヘッダだけで
     1 画面の半分を食い、添え書きも途中で折れる。ここだけ縮める。 */
  h1 .mark{height:26px}
  h1 .wm{font-size:28px}

  /* ナビは「ロゴの帯」と別の帯として見せる。同じ地色に文字を並べただけだと
     添え書き（阪大 全学部の科目／Designed by GUILD）とナビが地続きに見え、
     どこからが押せるものか分からない。負のマージンで header の左右 padding を
     打ち消し、画面幅いっぱいの一段下の帯にする（下端も同様に打ち消す）。 */
  .nav{gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;
    margin:11px calc(-1 * var(--pad)) -12px;
    padding:8px var(--pad) 9px;
    background:var(--on-dark-band);
    border-top:1px solid var(--on-dark-band-line)}
}

/* ロゴ・添え書き・GUILD を1行に収めるための縮小。
   等倍（28px）では 440px 幅から下は入らないので、そこからは画面幅に追従させる。
   clamp の上限は等倍と同じ値なので、520px 側との境目で段差が出ない。 */
@media (max-width:519px){
  h1 .mark{height:clamp(16px,5.2vw,26px)}
  h1 .wm{font-size:clamp(17px,5.7vw,28px)}
  h1 small{font-size:clamp(9px,2.9vw,13px);margin-left:var(--sp-1)}
  .lockup{gap:var(--sp-2)}
  .by{padding-left:var(--sp-2)}
  .byMain{font-size:11px}
  .bySub{font-size:9.5px;letter-spacing:.08em}
}

/* 320px（実在する最小の端末幅）を切ると、ロゴ・添え書き・GUILD は
   どう縮めても1行に入らない。nowrap のままだとロゴが左に切れ、
   添え書きと GUILD が重なる。ここだけ以前どおり2段に戻す。 */
@media (max-width:319px){
  .lockup{flex-wrap:wrap}
  .by{margin-left:0}
}

/* ナビ4項目が1行に収まらない幅（実測 389px 必要）では 2×2 に組む。
   flex の折り返し任せだと 3＋1 になり、余った1つが迷子に見える。 */
@media (max-width:399px){
  .nav{display:grid;grid-template-columns:1fr 1fr}
  .nav a{justify-self:start}
}

input[type=search]{width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-base)}
input:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

section{margin-top:22px}
h2{font-size:12px;letter-spacing:.1em;color:var(--muted);margin:0 0 9px;font-weight:700}
h2 .sub{font-weight:400;letter-spacing:0;font-size:var(--fs-xs)}

/* ── 空きコマグリッド ─────────────────── */
.grid{display:grid;grid-template-columns:20px repeat(5,1fr);gap:4px}
.grid .h{font-size:11px;color:var(--muted);text-align:center;font-family:var(--data);
  align-self:center}
.grid button{border:1px solid var(--rule);background:var(--card);border-radius:var(--r-sm);
  padding:9px 0;font:inherit;font-size:var(--fs-sm);font-family:var(--data);color:var(--soft);
  cursor:pointer;font-variant-numeric:tabular-nums}
.grid button.zero{color:var(--rule);background:transparent}
.grid button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.hint{font-size:var(--fs-xs);color:var(--muted);margin-top:6px}

/* ── 選択中コマの貼り付きバー ─────────── */
.slotBar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:var(--brand);color:var(--brand-ink);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:700;
  padding:9px 13px;margin-top:10px;box-shadow:0 4px 14px var(--shadow-card)}
.slotBar[hidden]{display:none}
.slotBar button{background:none;border:none;color:var(--brand-ink);font:inherit;font-size:16px;line-height:1;
  cursor:pointer;padding:2px 4px}

/* ── 優先度 ───────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:7px}
/* display:flex は UA の [hidden]{display:none} に勝つ。これが無いと
   JS の box.hidden=true が効かず「隠す」を押しても消えない（.slotBar と同じ対処）。 */
.chips[hidden]{display:none}
/* 学部セクションは h2 が3つ並ぶ（共通の区分／学部を選ぶ／その学部の区分）。
   h2 は既定で上マージンを持たないので、2つ目以降だけ間を空ける。 */
.facH{margin-top:var(--sp-5)}
#facSec select{margin-bottom:var(--sp-2)}
.chip{border:1px solid var(--rule);background:var(--card);border-radius:var(--r-pill);
  padding:7px 13px;font:inherit;font-size:13.5px;color:var(--soft);cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.chip .n{font-family:var(--data);font-size:var(--fs-xs);opacity:.65;margin-left:4px}
.sliders{margin-top:12px;display:none}
.sliders.open{display:block}
.sl{display:grid;grid-template-columns:88px 1fr 16px;gap:10px;align-items:center;margin-bottom:7px}
.sl label{font-size:var(--fs-sm);color:var(--soft)}
.sl input{width:100%;accent-color:var(--brand)}
.sl .v{font-family:var(--data);font-size:12px;color:var(--muted);text-align:right}
.toggle{background:none;border:none;color:var(--brand-text);font:inherit;font-size:12.5px;
  padding:8px 0 0;cursor:pointer;text-decoration:underline}

/* ── 結果 ─────────────────────────────── */
/* 一覧の直上のツールバー。件数・検索・並び替えを1列に並べる。
   ここは「一覧に効く道具」を集めた場所であって、入口ではない
   （入口は空きコマグリッド ―― CLAUDE.md の前提）。 */
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-2);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--rule)}
.barCount{white-space:nowrap}
.bar b{font-size:19px;font-family:var(--data);font-variant-numeric:tabular-nums}
.barCount span{font-size:var(--fs-sm);color:var(--muted)}
.bar input[type=search]{width:100%;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-base)}
.bar select{border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 8px;
  background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-sm)}

/* 幅が足りないと3つ並べられないので、狭い画面では検索窓を2段目に落とす。 */
@media (max-width:479px){
  .bar{grid-template-columns:1fr auto}
  .bar input[type=search]{grid-column:1 / -1;grid-row:2}
}

.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
  margin-bottom:10px;overflow:hidden}
/* 右パディングだけ広げて、星（.card > .favBtn／右上に絶対配置・
   6px 空けて 44px 四方）の専有領域ぶんを空けておく。6+44=50px に
   余白8pxを足した58px。値がずれると次に .head の右上に何か足した人が
   また星と重なる事故を再現するので、変えるときは .card > .favBtn の
   width/height/right とセットで見直すこと（2026-08-26 修正）。 */
.head{padding:13px 58px 13px 14px;cursor:pointer;display:grid;grid-template-columns:1fr 58px;gap:12px}
.title{font-size:16.5px;font-weight:700;margin:0 0 3px;line-height:1.35}
.meta{font-size:12px;color:var(--muted);font-family:var(--data)}
.meta span+span::before{content:"・";margin:0 3px}
.fit{text-align:right}
.fit b{font-size:25px;font-family:var(--data);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--brand)}
.fit small{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em}
.reason{grid-column:1/3;font-size:var(--fs-sm);color:var(--soft);margin-top:7px;line-height:1.55}
.band{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:2px 7px;border-radius:var(--r-sm);
  margin-right:7px;vertical-align:1px;white-space:nowrap}
.band.b0{background:var(--band-none-bg);color:var(--band-none-ink)}
.band.b1{background:var(--band-light-bg);color:var(--band-light-ink)}
.band.b2{background:var(--band-mid-bg);color:var(--band-mid-ink)}
.band.b3{background:var(--band-heavy-bg);color:var(--band-heavy-ink)}
.tags{grid-column:1/3;display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:var(--fs-xs);background:var(--scale-light-soft);color:var(--scale-light-text);border-radius:var(--r-sm);padding:2px 7px}
.tag.g{background:var(--dim);color:var(--muted)}

.detail{display:none;border-top:1px solid var(--rule);padding:13px 14px;background:var(--paper)}
.card.open .detail{display:block}
.ax{display:grid;grid-template-columns:70px 1fr 30px;gap:9px;align-items:center;margin-bottom:9px}
.ax .l{font-size:12.5px;color:var(--soft)}
.track{height:7px;background:var(--dim);border-radius:var(--r-pill);overflow:hidden}
.fill{height:100%;border-radius:var(--r-pill);background:var(--scale-light)}
.fill.m{background:var(--scale-mid)} .fill.w{background:var(--scale-heavy)}
.ax .v{font-family:var(--data);font-size:12px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
.why{grid-column:2/4;font-size:var(--fs-xs);color:var(--muted);margin-top:-3px;line-height:1.5}
.miss{grid-column:2/4;font-size:var(--fs-xs);color:var(--scale-heavy)}
.conf{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;padding-top:9px;
  border-top:1px dashed var(--rule)}
.conf b{color:var(--scale-heavy)}
/* KOAN 公式シラバスへの外向きリンク（松下さん PR #23）。
   画面に「最終判断は公式シラバスで」と書いているのにリンクが無く、
   学生が自分で検索し直していた（政岡さんの指摘・2026-08-20）。 */
.koanLink{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);
  color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.koanLink:hover,.koanLink:active{color:var(--ink)}

/* ── 口コミの表示 ───────────────────────
   絞り込めるのに中身が見えない状態だったので足した（2026-08-20）。
   数字は KOAN から取れないものばかりで、ここだけが情報源。 */
.rvb{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;
  background:var(--scale-light-soft);color:var(--scale-light-text);border-radius:var(--r-sm);padding:2px 7px}

/* 口コミが「まだ数字に入っていない」ことの注意喚起（2026-08-24）。
   3件そろうまで採点に入れない方針にしたため、1人が「テストが難しい」と
   書いていても総合値は動かない。つまり「とにかく軽い」で並べ替えると
   その科目が上位に来る。バッジ1個では並べ替えの上位で見落とされるので、
   カードの枠色を変えたうえで幅いっぱいの帯にしている。
   scored が true になったら .rvb（普通の件数バッジ）に戻る。
   2026-08-24 本番実測：scored:false は 87科目（全体の7.8%）。
   うち総合値が出て「軽い順」に並ぶのが 45科目。

   色は --alert-face / --alert-ink（地の反転）。
   色相を1つも増やさないために、--brand 系にも --scale-* 系にも寄せていない。
   詳しい理由と実測値は tokens.css のコメントにある。 */
.card.unscored{border-color:var(--alert-face)}
.rvAlert{grid-column:1/3;display:flex;gap:var(--sp-2);align-items:flex-start;
  margin-top:var(--sp-2);background:var(--alert-face);color:var(--alert-ink);
  border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;line-height:1.5}
.rvAlert i{font-style:normal;flex:none}
.rvAlert .go{display:block;font-weight:400;text-decoration:underline;
  text-underline-offset:2px;margin-top:2px}

/* 「拘束は軽い」が「軽め」と言い切れない理由。band だけでは学生に伝わらない。
   2026-08-24 本番実測：502科目（全体の45%）に立つ。「軽い順」の上位40件では
   40件すべてに出る。だから口コミの帯と同じ強さにはしない
   ―― 100%に出る警告は壁紙になり、10%しかない帯の方を埋もれさせる。 */
.bandNote{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}
.bandNote::before{content:"※ "}
.rv{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule)}
.rvh{font-size:12.5px;color:var(--soft);margin-bottom:7px}
.rvh b{color:var(--scale-light-text);font-family:var(--data);margin-left:3px}
.rvh span{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.rvf{display:flex;flex-wrap:wrap;gap:5px}
.rvf span{font-size:var(--fs-xs);background:var(--dim);border-radius:var(--r-sm);padding:3px 8px;color:var(--soft)}
.rvf i{font-style:normal;color:var(--muted);margin-right:5px}
/* 口コミの一言。しゅんやさんの指摘④：
   いちばん重要な情報なのに、ただの箇条書きで埋もれていた。
   吹き出しにして、数値の内訳より前に置く（順番も app.js 側で入れ替えた）。

   地に --brand-soft を使うのは、詳細の下地が2種類あるため。
   スマホはカード内（--paper）、PC は右カラム（--card）で、
   --card の吹き出しは右カラムだと同色で消える。 */
.rvn{margin:var(--sp-2) 0 var(--sp-3);padding:0;list-style:none;
  display:grid;gap:var(--sp-3)}
.rvn li{position:relative;font-size:var(--fs-sm);color:var(--ink);line-height:1.7;
  background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3) var(--sp-3) 32px}
/* 引用符。人の声だと分かるようにする。 */
.rvn li::before{content:"\201D";position:absolute;left:11px;top:9px;
  font-size:24px;line-height:1;color:var(--brand);font-family:var(--data)}
/* しっぽ。左下に出して「誰かが言ったこと」に見せる。 */
.rvn li::after{content:"";position:absolute;left:20px;bottom:-5px;
  width:9px;height:9px;background:var(--brand-soft);
  border-right:1px solid var(--brand-line);
  border-bottom:1px solid var(--brand-line);
  transform:rotate(45deg)}
.reviewBtn{display:block;width:100%;margin-top:12px;background:var(--brand-soft);color:var(--brand-text);
  border:none;border-radius:var(--r-md);padding:10px;font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}

/* ── 口コミを1件ずつ読む ─────────────────
   カードの中にあるのは集計（複数件なら平均）で、「2件の平均で出席はたまに」
   のような、誰も言っていない値になりうる。1人ずつの回答をそのまま読める
   場所を別に用意する。値の出どころは web/data/reviews.built.json。
   置き場所は画面幅で変える（PC は右カラムの詳細の下、スマホは全画面のシート）が、
   1件ぶんの見た目はどちらでも同じなので、ここでまとめて持つ。 */
.pEntry{padding:var(--sp-3) 0;border-bottom:1px dashed var(--rule)}
.pEntry:last-child{border-bottom:none}
.pYear{font-size:var(--fs-xs);color:var(--muted);font-family:var(--data);margin-bottom:5px}
/* 古い回答であることの但し書き。年そのものと同じ強さにはしない。 */
.pOld{margin-left:var(--sp-2);color:var(--muted)}
.pLine{font-size:var(--fs-sm);color:var(--soft);line-height:1.6;margin-bottom:3px}
/* 本人が書いた一言。上の選択式の行より強くする ―― ここだけが自由記述で、
   KOAN にも集計にも出てこない情報。 */
.pNote{font-size:var(--fs-sm);color:var(--ink);line-height:1.6;margin-top:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);background:var(--paper);border-radius:var(--r-sm)}
.pEmpty{padding:var(--sp-6) 0;text-align:center;color:var(--muted);font-size:var(--fs-sm)}

/* ── 1件ずつを「どこに出すか」 ─────────────
   PC（1024px 以上）… 右カラムの詳細の下に展開して続ける。
     もう一度押すと畳む。4軸バーを見ながら口コミを読める形にするため。
     PR #24 にあった「右に380pxの固定パネル＋body の padding-right」は使わない。
     3カラム化のあと 1280px で実測すると .inspector（幅380px・右端から31px）に
     隙間なく重なり、「口コミを見る」ボタンごと覆ってしまう。
   スマホ（<1024px）… 下から全画面のシート。投稿フォームと同じ .sheet を使い回す。
     位置ぎめ・幕・最大高さ・スクロールは .sheet 側にもうあるので、
     ここで書き直さない（2つ持つと片方だけ直る）。 */
.panelBtn{display:block;width:100%;margin-top:var(--sp-3);background:var(--dim);color:var(--soft);
  border:none;border-radius:var(--r-md);padding:9px;font:inherit;font-size:var(--fs-sm);
  font-weight:700;cursor:pointer}
.panelBtn:hover,.panelBtn:active{background:var(--rule)}
/* 展開したときの区切り。スマホのシートの中では .panelHead が区切りになるので、
   詳細の中に出たとき（＝PC の右カラム）だけ罫を引く。 */
.detail .pList{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px dashed var(--rule)}
.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:var(--sp-1);border-bottom:1px solid var(--rule)}
.panelHead h3{margin:0;font-size:var(--fs-lg);line-height:1.4}
.panelClose{background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-lg);
  line-height:1;padding:var(--sp-1);cursor:pointer;flex:none}
.empty{padding:40px 14px;text-align:center;color:var(--muted);font-size:14px}

/* ── 口コミ投稿（4タップ） ─────────────── */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:20;
  background:var(--brand);color:var(--brand-ink);border:none;border-radius:var(--r-pill);
  padding:12px 22px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 6px 20px var(--shadow-fab)}
.sheet{position:fixed;inset:0;background:var(--scrim);z-index:30;display:none;
  align-items:flex-end;justify-content:center}
.sheet.open{display:flex}
.sheet .inner{background:var(--card);width:100%;max-width:560px;border-radius:var(--r-lg) 16px 0 0;
  padding:18px var(--pad) 26px;max-height:86vh;overflow:auto}
.sheet h3{margin:0 0 3px;font-size:var(--fs-lg)}
.sheet .q{margin-top:16px}
.sheet .q p{margin:0 0 7px;font-size:13.5px;color:var(--soft)}
.sheet .q p b{font-family:var(--data);color:var(--brand-text);margin-right:6px}
.sheet select,.sheet input[type=text],.sheet input[type=number]{width:100%;padding:10px 12px;border:1px solid var(--rule);
  border-radius:var(--r-md);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-base)}
.row2{display:flex;gap:8px}
.row2 button{flex:1;border:1px solid var(--rule);background:var(--paper);border-radius:var(--r-md);
  padding:11px 0;font:inherit;font-size:14px;color:var(--soft);cursor:pointer}
.row2 button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
/* 「いつ受けた？」だけ4択。.row2 は3択前提の flex:1 なので別クラスにする。
   選択中の色は .row2 と同じ ―― 面はブランド色、載せる文字は --brand-ink（黒）。
   オレンジの面に白文字は 3.64:1 で足りない（tokens.css のコメント参照）。 */
.row4{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.row4 button{flex:1 1 40%;border:1px solid var(--rule);background:var(--paper);
  border-radius:var(--r-md);padding:11px 0;font:inherit;font-size:var(--fs-sm);
  color:var(--soft);cursor:pointer}
.row4 button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.send{width:100%;margin-top:20px;background:var(--brand);color:var(--brand-ink);border:none;border-radius:var(--r-md);
  padding:14px;font:inherit;font-size:var(--fs-base);font-weight:700;cursor:pointer}
.send[disabled]{background:var(--rule);color:var(--muted);cursor:not-allowed}
.close{background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);
  padding:10px 0 0;cursor:pointer;width:100%}
footer{font-size:var(--fs-xs);color:var(--muted);line-height:1.65;
  padding:var(--sp-5) var(--pad) var(--sp-6);border-top:1px solid var(--rule);
  margin-top:var(--sp-7);max-width:1560px;margin-left:auto;margin-right:auto}
footer p{margin:0 0 var(--sp-2)}
/* レッドライン「学生団体であることを明記」。目立たせる。 */
footer .who b{color:var(--soft)}
code{font-family:var(--data);background:var(--dim);padding:1px 4px;border-radius:var(--r-xs);font-size:var(--fs-xs)}


/* ── PC のレイアウト ─────────────────────
 * md(768) 2カラム → lg(1024) 3カラム → xl(1440) ゆとり。
 * 3カラムはそれぞれ独立してスクロールし、
 * ページ送りで動くのは中カラムだけにする。
 * 左の絞り込みが動くと、いま何で絞っていたのか分からなくなる。
 */
@media (min-width:768px){
  .wrap{max-width:960px}
  .hd{max-width:960px}
  .workbench{display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:var(--sp-5);align-items:start}
  .rail{position:sticky;top:var(--sp-3);
    max-height:calc(100vh - var(--sp-6));overflow-y:auto;
    padding-right:var(--sp-2)}
  .rail section:first-child{margin-top:0}
  .results{min-width:0}
}

@media (min-width:1024px){
  .wrap{max-width:1400px}
  .hd{max-width:1400px}
  .workbench{grid-template-columns:260px minmax(420px,1fr) 380px}
  .inspector{display:block;position:sticky;top:var(--sp-3);
    max-height:calc(100vh - var(--sp-6));overflow-y:auto;
    background:var(--card);border:1px solid var(--rule);
    border-radius:var(--r-lg);padding:var(--sp-4)}
  /* PC では詳細が右カラムに出るので、カード内の折りたたみは使わない。 */
  .card.open .detail{display:none}
  .card.sel{border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
  /* FAB は画面下中央に固定されると3カラムの真ん中を塞ぐ。
     PC では右カラムの中にボタンがあるので、出さない。 */
  .fab{display:none}
}

@media (min-width:1440px){
  .wrap{max-width:1560px}
  .hd{max-width:1560px}
  .workbench{grid-template-columns:280px minmax(0,1fr) 440px}
}

/* 右カラムの空状態。数字を読む直前の人に、いちばん必要な説明を出す。
   「何も選んでいません」とだけ書くより、この場所を使い切れる。 */
.inspectorEmpty h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
.inspectorEmpty p{font-size:var(--fs-sm);color:var(--soft);margin:0 0 var(--sp-3)}
.inspectorEmpty .legend{list-style:none;padding:0;margin:var(--sp-3) 0}
.inspectorEmpty .legend li{display:flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-1);font-size:var(--fs-sm);color:var(--soft)}
.inspectorEmpty .sw{width:14px;height:14px;border-radius:var(--r-xs);flex:none}
.inspectorEmpty .sw.light{background:var(--scale-light)}
.inspectorEmpty .sw.mid{background:var(--scale-mid)}
.inspectorEmpty .sw.heavy{background:var(--scale-heavy)}
.inspectorEmpty .fine{font-size:var(--fs-xs);color:var(--muted)}

/* 右カラムに出す詳細の見出し。カード内に出すときは不要なので、
   inspector の中にあるときだけ効かせる。 */
.inspector .inspectorHead{margin:0 0 var(--sp-3);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--rule)}
.inspector .inspectorHead h3{margin:0 0 var(--sp-1);font-size:var(--fs-lg);line-height:1.35}
.inspector .inspectorHead .meta{font-size:var(--fs-xs);color:var(--muted);font-family:var(--data)}
.inspector .detail{display:block;border:none;padding:0;background:none}


/* ── 推薦枠 ─────────────────────────────
 * 下の一覧とはっきり分ける。同じ見た目で上に置くと「ただの並び順」に見えて、
 * 「人が確認ずみのものを選んである」という意味が伝わらない。
 */
.picks{background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:var(--r-lg);padding:var(--sp-3);margin-bottom:var(--sp-5)}
.picksH{margin:0 0 var(--sp-2);font-size:var(--fs-h2);letter-spacing:0;color:var(--ink)}
.picksH .sub{font-weight:400;font-size:var(--fs-xs);color:var(--muted);margin-left:var(--sp-2)}

/* ── ページャ ───────────────────────────
 * スマホは「もっと見る」、PC はページ番号を主にする。
 * 自動で継ぎ足さないので、終点があり、いまどこにいるかが分かる。
 */
.pager{display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-2);padding:var(--sp-5) 0}
.pager:empty{display:none}
.pagerPos{font-size:var(--fs-sm);color:var(--muted);
  font-family:var(--data);font-variant-numeric:tabular-nums}
/* 番号は全幅で出す。「もっと見る」だけだと、43ページのうち
   いま何ページ目にいるのか分からず、後ろのほうへも飛べない。 */
.pagerNums{display:flex;gap:var(--sp-1);flex-wrap:wrap;justify-content:center}
.pagerNums .pn{min-width:36px;height:36px;padding:0 var(--sp-2);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font:inherit;
  font-family:var(--data);font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out)}
.pagerNums .pn:hover:not(:disabled):not(.on){border-color:var(--brand);background:var(--brand-soft)}
.pagerNums .pn.on{background:var(--brand);color:var(--brand-ink);
  border-color:var(--brand);font-weight:700}
.pagerNums .pn.nav{font-size:18px;line-height:1;color:var(--brand-text)}
.pagerNums .pn:disabled{opacity:.35;cursor:default;color:var(--muted)}
.pagerNums .gap{color:var(--muted);padding:0 var(--sp-1);align-self:center}

@media (min-width:768px){
  .pager{flex-direction:row;justify-content:space-between;flex-wrap:wrap}
}


/* ── About などの読み物ページ ─────────────
 * 1行の長さを 68 文字までに抑える。PC で本文が画面幅いっぱいに
 * 伸びると、行の終わりから次の行頭へ目が戻れなくなる。
 */
.prose{max-width:68ch;padding-top:var(--sp-6);padding-bottom:var(--sp-7)}
.prose h2{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-lg);
  letter-spacing:0;color:var(--ink);font-weight:700;
  padding-bottom:var(--sp-2);border-bottom:2px solid var(--brand);
  display:inline-block}
.prose h2:first-of-type{margin-top:0}
.prose h3{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-base);font-weight:700}
.prose p{margin:0 0 var(--sp-3)}
.prose ul{margin:0 0 var(--sp-3);padding-left:1.3em}
.prose li{margin-bottom:var(--sp-1)}
.prose a{color:var(--brand-text);text-underline-offset:2px}
/* レッドライン（学生団体である旨）を目立たせる箱。 */
.prose .callout{background:var(--brand-soft);border:1px solid var(--brand-line);
  border-left:3px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-3) var(--sp-4);color:var(--ink)}

/* 左カラムから About へ渡す導線。 */
.railNote{margin-top:var(--sp-5);font-size:var(--fs-sm)}
.railNote a{color:var(--brand-text);text-decoration:none}
.railNote a:hover{text-decoration:underline}


/* ── オープニング演出 ───────────────────
 * ロゴが2本の SVG stroke path なので、stroke-dashoffset で筆順に書ける。
 * 覆いの下のページはすでに描画ずみで、DOM は塞いでいない。
 */
.splash{position:fixed;inset:0;z-index:100;background:var(--brand-ground);
  display:grid;place-items:center;
  opacity:1;transition:opacity var(--dur-slow) var(--ease-out)}
.splash.out{opacity:0;pointer-events:none}
.splash[hidden]{display:none}
/* 覆いが出ているあいだは背後をスクロールさせない。 */
html.splash-on{overflow:hidden}

.splashInner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
/* ヘッダのロックアップと同じく、マーク＋「クハン」で1語に見せる。
   縦に積むと「ラ」がただの絵になってしまい、書き出す意味が消える。 */
.splashWord{display:flex;align-items:center}
.splashMark{height:44px;width:auto;margin-right:.11em;display:block}

/* ① 「ラ」を2画で書き出す。2画目は 80ms 遅らせる。 */
.splash.run .splashMark .s1{animation:rkDraw 380ms var(--ease-brand) forwards}
.splash.run .splashMark .s2{animation:rkDraw 440ms var(--ease-brand) 80ms forwards}
@keyframes rkDraw{to{stroke-dashoffset:0}}

/* ② 「クハン」を1文字ずつ、40ms ずつずらして。 */
.splashWm{display:flex;font-size:40px;font-weight:800;line-height:1;
  color:var(--on-dark);letter-spacing:.11em;padding-right:.11em}
.splashWm span{opacity:0;transform:translateY(3px)}
.splash.run .splashWm span{animation:rkRise 260ms var(--ease-out) forwards}
.splash.run .splashWm span:nth-child(1){animation-delay:420ms}
.splash.run .splashWm span:nth-child(2){animation-delay:460ms}
.splash.run .splashWm span:nth-child(3){animation-delay:500ms}
@keyframes rkRise{to{opacity:1;transform:translateY(0)}}

/* ③ 縦線が伸びて GUILD の2行が出る。 */
.splashBy{display:flex;flex-direction:column;align-items:flex-start;
  padding-left:var(--sp-2);border-left:1px solid var(--on-dark-line);
  opacity:0;margin-top:var(--sp-2)}
.splash.run .splashBy{animation:rkRise 300ms var(--ease-out) 700ms forwards}

/* ── ヒーロー ───────────────────────────
 * 「登録・ログイン不要」は最大の強みなので、
 * ヘッダのバッジから外したぶん、ここで必ず言う。
 */
.hero{padding:var(--sp-4) var(--pad) var(--sp-6);max-width:1560px;margin:0 auto}
/* 日本語はどこでも改行できるので、幅を絞ると「手間がかか／るか」のような
   気持ちの悪い切れ方をする。measure を切らず、balance に任せる。 */
.heroT{margin:0 0 var(--sp-3);font-size:var(--fs-hero);line-height:1.3;
  letter-spacing:-.01em;font-weight:800;text-wrap:balance}
/* 句点のところで折り返す。span ごとに inline-block にしておくと、
   狭い画面でも「登録もログインもしなくていい。」が途中で割れない。
   （割れると「登録」「もログインも…」の2行になって読みにくい） */
.heroP{margin:0 0 var(--sp-5);max-width:54ch;color:var(--soft)}
.heroP span{display:inline-block}
.heroActions{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.heroCta{display:inline-block;padding:var(--sp-3) var(--sp-6);
  background:var(--brand);color:var(--brand-ink);border-radius:var(--r-pill);
  text-decoration:none;font-weight:700;
  transition:transform var(--dur) var(--ease-out)}
.heroCta:hover{transform:translateY(-1px)}
.heroSub{color:var(--brand-text);font-size:var(--fs-sm);text-decoration:none}
.heroSub:hover{text-decoration:underline}

/* 演出を見ていない人（再訪・reduced motion）にも、
   中身が順に入ってくる感じだけは残す。1回だけ。 */
html.splash-skip .heroT{animation:rkRise 320ms var(--ease-out) backwards}
html.splash-skip .heroP{animation:rkRise 320ms var(--ease-out) 60ms backwards}
html.splash-skip .heroActions{animation:rkRise 320ms var(--ease-out) 120ms backwards}

/* スクロール位置の目印。ヘッダぶん余裕を取る。 */
#workbench{scroll-margin-top:var(--sp-4)}
html{scroll-behavior:smooth}


/* 投稿シートの冒頭。もとは「長文は書かれないし、推薦にも使えないので
   選択式で聞く」という開発側の理屈がそのまま出ていた（2026-08-24 修正）。
   利用者に伝えるべきなのは「何を聞かれるか」と「どれくらいで終わるか」。 */
.sheetLead{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.sheetLead b{color:var(--soft)}

/* お気に入りの星。.head の外に在るので、押しても詳細は開かない。
   同じ class の星がカード直下（一覧の右上）と詳細パネルの中の2箇所に
   出るので、色（状態で切り替え）だけ共通にし、置き方は文脈ごとに分ける。
   バグ修正（2026-08-26）：ここを無scopeの .favBtn に position:absolute を
   書いていたため、詳細側の星まで一覧側と同じカード右上に吸い寄せられ、
   2つの星がぴったり重なっていた。 */
.card { position: relative; }
.favBtn{
  border:0; background:transparent; cursor:pointer;
  font-size:20px; line-height:1; color:var(--brand);
  border-radius:8px;
}
.favBtn:hover{ background:var(--brand-hover); }
.favBtn[aria-pressed="false"]{ color:var(--star-off); }

/* 一覧のカード直下の星だけ、右上に浮かせる。直接の子だけに絞るのは、
   詳細パネル内（.detail の下）の星まで拾ってしまうと上と同じ事故になるため。
   バグ修正（2026-08-26）：ここを浮かせるだけで .head 側の専有領域を
   空けていなかったため、「相性」の数字（.fit、.head の中）と重なり、
   数字を押したつもりが星に当たって詳細が開かなくなっていた。
   コーナーをずらすのではなく .head の右パディングで場所を確保した
   （上の .head 参照）ので、ここは指で押せる 44×44px に広げるだけでいい。 */
.card > .favBtn{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px;
}

/* 詳細パネル内の星は浮かせず、「口コミを見る」「口コミを書く」と同じ
   並びに置く。.panelBtn と同じブロック幅・余白・背景で揃える。 */
.detail .favBtn{
  display:block; width:100%; margin-top:var(--sp-3);
  background:var(--dim); border-radius:var(--r-md);
  padding:9px; font-size:16px; text-align:center;
}
.detail .favBtn:hover{ background:var(--rule); }

/* 開屏の問診。splash の上には出ない（splash が消えてから出る）。 */
.onboard{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:var(--scrim);
  padding:20px;
}
.onboardInner{
  background:var(--card); border-radius:16px; padding:24px 20px;
  width:100%; max-width:420px; box-shadow:0 10px 40px var(--shadow-modal);
}
.onboardCard{ display:none; }
.onboard[data-step="gate"]    [data-card="gate"],
.onboard[data-step="faculty"] [data-card="faculty"],
.onboard[data-step="grade"]   [data-card="grade"]{ display:block; }
.onboardInner h2{ font-size:18px; margin:0 0 8px; }
.onboardInner p{ font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.6; }
.onboardBtns{ display:flex; flex-direction:column; gap:8px; }
.onboardBtns button, .onboardOpts button{
  padding:12px; border-radius:10px; border:1px solid var(--rule);
  background:var(--card); font-size:15px; cursor:pointer;
}
/* オレンジの面に載せる文字は白ではなく --brand-ink（tokens.css 参照：
   #fff だと 3.64:1 で通常文字の 4.5:1 に届かない）。 */
.onboardBtns .primary{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.onboardOpts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* 運営の SNS。広告掲載ページで使う。
   アイコンを四角の色地にして、その下に名前を置く形。
   X などを足すときは <li> を1行増やすだけで横に並ぶ。 */
.prose ul.sns{list-style:none;margin:var(--sp-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.prose ul.sns li{margin:0}
.prose ul.sns a{display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:var(--muted);font-size:12px;font-weight:700}
.prose ul.sns a:hover{color:var(--ink)}
.snsIcon{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px}
.snsIcon.ig{background:linear-gradient(45deg,var(--sns-ig-a) 4%,var(--sns-ig-b) 48%,var(--sns-ig-c) 96%)}
.snsIcon.x{background:var(--sns-x)}
.snsIcon.line{background:var(--sns-line)}