/* ============================================================
   定期テスト結果速報｜ページ固有スタイル
   ・共通の style.css（デザイントークン/ヘッダー/フッター/ボタン）を読み込んだ上で使用
   ============================================================ */

/* ---------- ページ見出し ---------- */
.rk-hero{background:var(--cream);padding-block:clamp(44px,7vw,72px) clamp(30px,4vw,40px)!important}
.rk-title{
  font-family:var(--serif);font-weight:800;color:var(--green);
  font-size:clamp(28px,4.8vw,44px);line-height:1.35;letter-spacing:.02em;
}
.rk-badge{
  display:inline-block;margin-top:16px;padding:8px 22px;border-radius:999px;
  background:var(--gold);color:#fff;font-weight:900;font-size:15px;letter-spacing:.06em;
  box-shadow:0 10px 22px -10px rgba(192,134,47,.85);
}
.rk-lead{font-size:15px;line-height:2;color:#5c5647;max-width:680px;margin-top:4px}
.rk-note{font-size:12.5px;line-height:1.85;color:var(--ink-mute);max-width:680px;margin-top:14px}
.rk-loading{color:var(--ink-mute);padding:20px 0}

.rk-body{background:var(--cream);padding-top:0!important;padding-bottom:clamp(40px,6vw,64px)!important}

/* ---------- カテゴリ ---------- */
.tr-cat{margin-top:clamp(38px,5vw,52px)}
.tr-cat:first-child{margin-top:0}
.tr-cathead{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid #ece0c6;
}
.tr-cathead .cn{
  font-family:var(--serif);font-weight:800;font-size:clamp(22px,3.4vw,28px);
  color:var(--green);display:flex;align-items:center;gap:13px;letter-spacing:.02em;
}
.tr-cathead .cn::before{content:"";width:7px;height:26px;border-radius:4px;background:var(--teal)}
.tr-cat.is-total .tr-cathead .cn{font-size:clamp(25px,3.9vw,33px);color:var(--gold)}
.tr-cat.is-total .tr-cathead .cn::before{background:var(--gold);height:32px;width:8px}
.tr-cathead .cc{
  margin-left:auto;white-space:nowrap;font-size:12px;font-weight:700;color:var(--ink-mute);
  background:#fff;border:1.5px solid var(--line);padding:6px 13px;border-radius:8px;
}

/* ---------- カード（上位3位） ---------- */
.tr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:16px}
.tr-cards.sub{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tr-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 18px 20px;text-align:center;position:relative;
  box-shadow:0 10px 26px -18px rgba(120,90,30,.4);
}
.tr-rank{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:900;letter-spacing:.05em;color:#fff;
  padding:5px 15px;border-radius:999px;white-space:nowrap;
}
.m1{background:linear-gradient(#f2b23e,#e0932a)}
.m2{background:linear-gradient(#b9c1cb,#98a3af)}
.m3{background:linear-gradient(#d69a63,#bd7f47)}
.tr-who{font-size:13px;font-weight:700;color:var(--ink-mute);margin:8px 0 12px;letter-spacing:.02em}
.tr-score{font-family:var(--serif);font-weight:800;color:var(--gold);font-size:48px;line-height:1}
.tr-score span{font-size:18px;margin-left:2px;color:#d29a45}
.tr-slabel{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-mute);margin-top:5px}
.tr-subline{font-size:12px;color:var(--ink-mute);margin-top:10px}
.tr-subs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:14px}
.sc{font-size:11.5px;font-weight:700;color:#6a6355;background:#f5efe2;padding:5px 8px;border-radius:7px}
.sc em{font-style:normal;font-weight:500;color:#a49a86;margin-right:2px}
.sc.p90{background:#dcf2ef;color:var(--green)}
.sc.p90 em{color:#5aa89f}
.sc.p100{background:var(--gold);color:#fff}
.sc.p100 em{color:#f4e3c8}

/* ---------- アコーディオン（点数帯4番目以下） ---------- */
details.tr-more{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
details.tr-more>summary{
  list-style:none;cursor:pointer;padding:15px 20px;font-size:13.5px;font-weight:700;
  color:var(--green);display:flex;align-items:center;gap:12px;
  background:#fbf6ea;transition:background .2s;
}
details.tr-more>summary:hover{background:#f3ede0}
details.tr-more>summary::-webkit-details-marker{display:none}
/* 左側の三角形（開くと下向きに回転） */
details.tr-more>summary .tri{
  flex:none;width:0;height:0;
  border-left:8px solid var(--gold);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  transition:transform .22s ease;
}
details.tr-more[open]>summary .tri{transform:rotate(90deg)}
details.tr-more>summary .sm-txt{flex:1}
details.tr-more>summary .sm-hint{
  font-size:11.5px;font-weight:700;color:#fff;background:var(--teal);
  padding:4px 11px;border-radius:999px;letter-spacing:.04em;
}
details.tr-more>summary .sm-hint::after{content:"ひらく"}
details.tr-more[open]>summary .sm-hint{background:var(--ink-mute)}
details.tr-more[open]>summary .sm-hint::after{content:"とじる"}
.tr-rows{margin:0;padding:4px 12px 12px;list-style:none}
.tr-row{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;
  padding:10px 8px;border-top:1px solid #f2ead9;font-size:13.5px;
}
.tr-row .rr{font-weight:800;color:var(--ink-mute);font-size:12.5px}
.tr-row .rw{color:var(--ink);font-weight:500}
.tr-row .rp{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:19px}
.tr-row .rp span{font-size:12px;color:var(--ink-mute);margin-left:1px}
.tr-empty{font-size:13px;color:var(--ink-mute);padding:6px 2px}

@media (max-width:520px){
  .tr-score{font-size:40px}
}