/* ===================== v22：審査 k3「採点シート」の仕上げ ===================== */
/* 方針：本物の採点表の構造（見出し帯・列見出し・行・合計）を持たせる／列は3つ（観点｜問いと説明｜採点）／
         主役は明朝の問い。採点は「点数」ではなく 1〜5 の尺度として見せる（5だけ塗らない）／合計の行に賞の決まり方を入れる */
html[data-kr="k3"] .kr__sheet{--px:clamp(20px,3.2vw,44px);--c1w:clamp(140px,15vw,200px);--c3w:240px;
  margin-top:56px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(20,30,24,.05),0 30px 60px -44px rgba(20,30,24,.4)}
/* 古い k3 の箱の指定を打ち消す */
html[data-kr="k3"] .kr__list{margin:0;padding:0;background:none;border-radius:0;box-shadow:none}

/* 見出し帯 */
.kr__top,.kr__cols{display:none}
html[data-kr="k3"] .kr__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:22px var(--px);border-bottom:2px solid var(--v6-ink)}
html[data-kr="k3"] .kr__ttl{font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--v6-ink)}
html[data-kr="k3"] .kr__ttl::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c3);margin-right:10px;transform:translateY(-2px)}
html[data-kr="k3"] .kr__meta{font-size:13px;color:var(--v6-ink2)}
/* 列見出し */
html[data-kr="k3"] .kr__cols{display:grid;grid-template-columns:var(--c1w) minmax(0,1fr) var(--c3w);column-gap:clamp(24px,3vw,48px);padding:12px var(--px);background:#fafbf9;border-bottom:1px solid var(--v6-hair)}
html[data-kr="k3"] .kr__cols span{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--v6-ink2)}

/* 行 */
html[data-kr="k3"] .kr__it{position:relative;display:grid;grid-template-columns:var(--c1w) minmax(0,1fr) var(--c3w);grid-template-rows:auto auto;column-gap:clamp(24px,3vw,48px);row-gap:0;
  align-items:start;padding:34px var(--px);border-bottom:1px solid var(--v6-hair);transition:background .4s}
html[data-kr="k3"] .kr__it:hover{background:color-mix(in srgb,var(--col) 4%,#fff)}
html[data-kr="k3"] .kr__it::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--col);transform-origin:50% 0;transform:scaleY(0);transition:transform .8s var(--ease)}
html[data-kr="k3"] .kr__it.in::before,html.static[data-kr="k3"] .kr__it::before{transform:none}
/* 1列目：番号と区分名 */
html[data-kr="k3"] .kr__no{grid-column:1;grid-row:1;font-size:clamp(40px,3.6vw,52px)}
html[data-kr="k3"] .kr__it h3{grid-column:1;grid-row:2;align-self:start;margin-top:10px;font-size:14px;letter-spacing:.08em}
/* 2列目：明朝の問いが主役、説明はその下 */
html[data-kr="k3"] .kr__q{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:clamp(21px,1.9vw,27px);letter-spacing:.03em;white-space:normal;line-height:1.45}
html[data-kr="k3"] .kr__q br{display:none}
html[data-kr="k3"] .kr__d{grid-column:2;grid-row:2;margin-top:10px;max-width:34em;font-size:15px;line-height:1.85}
/* 3列目：1〜5 の尺度。つながった5マスで、色が左から右へだんだん濃くなる（点数を示すものではない） */
html[data-kr="k3"] .kr__sc{grid-column:3;grid-row:1/3;align-self:center;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;counter-reset:sc;padding:0}
html[data-kr="k3"] .kr__sc::after{content:none}
html[data-kr="k3"] .kr__sc i{counter-increment:sc;height:40px;width:auto;display:grid;place-items:center;border:0;border-radius:2px;
  font-style:normal;font-family:var(--f-en);font-size:13px;font-weight:600;color:color-mix(in srgb,var(--col) 70%,#000);background:color-mix(in srgb,var(--col) 7%,#fff);
  transition:background .5s,color .5s;transition-delay:calc(.35s + var(--n) * .13s)}
html[data-kr="k3"] .kr__sc i:first-child{border-radius:8px 2px 2px 8px}html[data-kr="k3"] .kr__sc i:last-child{border-radius:2px 8px 8px 2px}
html[data-kr="k3"] .kr__sc i::before{content:counter(sc)}
html[data-kr="k3"] .kr__it.in .kr__sc i:nth-child(1),html.static[data-kr="k3"] .kr__sc i:nth-child(1){background:color-mix(in srgb,var(--col) 14%,#fff)}
html[data-kr="k3"] .kr__it.in .kr__sc i:nth-child(2),html.static[data-kr="k3"] .kr__sc i:nth-child(2){background:color-mix(in srgb,var(--col) 30%,#fff)}
html[data-kr="k3"] .kr__it.in .kr__sc i:nth-child(3),html.static[data-kr="k3"] .kr__sc i:nth-child(3){background:color-mix(in srgb,var(--col) 50%,#fff)}
html[data-kr="k3"] .kr__it.in .kr__sc i:nth-child(4),html.static[data-kr="k3"] .kr__sc i:nth-child(4){background:color-mix(in srgb,var(--col) 75%,#fff);color:#fff}
html[data-kr="k3"] .kr__it.in .kr__sc i:nth-child(5),html.static[data-kr="k3"] .kr__sc i:nth-child(5){background:var(--col);color:#fff}

/* 合計の行：賞の決まり方の式を、シートの最後の行に */
html[data-kr="k3"] .kr__how{margin:0;padding:26px var(--px) 28px;border-top:2px solid var(--v6-ink);background:#fafbf9;align-items:center}
html[data-kr="k3"] .kr__how i{font-size:26px}

@media (max-width:900px){
  html[data-kr="k3"] .kr__sheet{margin-top:32px;--px:18px}
  html[data-kr="k3"] .kr__top{flex-direction:column;gap:4px}
  html[data-kr="k3"] .kr__cols{display:none}
  html[data-kr="k3"] .kr__it{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;column-gap:12px;padding:24px var(--px)}
  html[data-kr="k3"] .kr__no{grid-column:1;grid-row:1;font-size:34px}
  html[data-kr="k3"] .kr__it h3{grid-column:2;grid-row:1;align-self:center;margin:0}
  html[data-kr="k3"] .kr__q{grid-column:1/-1;grid-row:2;margin-top:12px;font-size:19px}
  html[data-kr="k3"] .kr__d{grid-column:1/-1;grid-row:3}
  html[data-kr="k3"] .kr__sc{grid-column:1/-1;grid-row:4;margin-top:16px}
  html[data-kr="k3"] .kr__sc i{height:34px}
}
/* 見直し1：番号と問いの上端をそろえる／行の上下を詰める */
html[data-kr="k3"] .kr__it{padding-top:30px;padding-bottom:30px}
html[data-kr="k3"] .kr__no{line-height:.9}
html[data-kr="k3"] .kr__q{align-self:start;margin-top:4px}
@media (max-width:900px){html[data-kr="k3"] .kr__q{margin-top:12px}}
@media (max-width:900px){html[data-kr="k3"] .kr__how{align-items:flex-start;gap:10px}html[data-kr="k3"] .kr__how i{font-size:20px;line-height:1}} /* 見直し2：スマホの合計の行を左そろえに */
html[data-kr="k3"] .kr__how{align-items:center;padding-top:22px;padding-bottom:22px}