:root{
  --bg: #f6f6f6;
  --card: #ffffff;
  --text: #111;
  --muted: #666;
  --line: #e8e8e8;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius: 14px;

  /* JSが自動で入れる */
  --header-h: 72px;
}

*{ box-sizing: border-box; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

/* A: header 固定 */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #222;
  color: #fff;
  padding: 1.1rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}

header h1{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
}

header p{
  margin: .25rem 0 0;
  opacity: .85;
  font-size: .95rem;
}

main{
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* A: toolbar 固定 */
.toolbar{
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(246,246,246,.88);
  backdrop-filter: blur(8px);
  padding: .75rem .2rem .75rem;
  border-bottom: 1px solid var(--line);
}

.toolbar-inner{
  display: flex;
  gap: .6rem;
  align-items: center;
}

.toolbar input[type="search"]{
  flex: 1;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 1rem;
  background: #fff;
  outline: none;
}

.toolbar button{
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.toolbar button:hover{ background:#f3f3f3; }

.post{
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.03);
}

.meta{
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: .55rem;
}

/* C: tags */
.tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin: .2rem 0 .85rem;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fafafa;
  color: #444;
  font-size: .82rem;
  line-height: 1;
}

.content .tex{
  white-space: pre-wrap;
  font-size: 1.03rem;
  line-height: 1.75;
  background: #fafafa;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow-wrap: anywhere;
}

.explain{
  margin-top: .8rem;
  padding: .75rem .9rem;
  border-left: 4px solid #ddd;
  background: #fcfcfc;
  border-radius: 12px;
}

.answer{ margin-top: .7rem; }
.answer a{
  color:#0b57d0;
  text-decoration:none;
}
.answer a:hover{ text-decoration:underline; }

/* B: avg の色分け */
.avg{
  margin-top: .9rem;
  color:#333;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.avg-badge{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--line);
  background:#fff;
}

.avg.low .avg-badge{ border-color:#b7e1c1; background:#eef8f1; color:#2e7d32; }
.avg.mid .avg-badge{ border-color:#ffe0a3; background:#fff7e6; color:#b26a00; }
.avg.high .avg-badge{ border-color:#ffb3b3; background:#fff0f0; color:#c62828; }

.rating{
  margin-top: .6rem;
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}

.rating button{
  border: 1px solid #bbb;
  background: #f4f4f4;
  border-radius: 10px;
  padding: .45rem .65rem;
  cursor: pointer;
  min-width: 2.4rem;
}

.rating button:hover{ background:#eee; }
.rating button:disabled{ opacity:.55; cursor:not-allowed; }
.rating button.selected{ border-color:#111; background:#e7e7e7; }

.system-note{
  padding: .8rem 1rem;
  border-radius: 12px;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  margin: 0 0 1rem;
}

.muted{ color:#777; font-size:.95rem; }

/* 既存の qnum */
.qnum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2em;
  height:2.2em;
  border:2px solid #222;
  border-radius:6px;
  font-weight:700;
  background:#fff;
  margin-bottom:.6em;
}

/* ✅ 問題カード左上に大学名＋年度を表示するヘッダ */
.problem-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.55rem;
}

.problem-info{
  font-weight:700;
  font-size:1.02rem;
  line-height:1.2;
}

.site-footer{
  margin:2rem 0;
  text-align:center;
  font-size:.9rem;
}