/**
 * 레인 3 «전용» 스타일 — 결과 화면과 채점 중 화면 (이슈 #29)
 *
 * 2026-09-26 — 콘솔 문법으로 다시 그렸다 (허준구 결정). 공용 부품은 `styles.css` 에 있고,
 * 여기에는 결과 화면에서 «새로 생긴» 것만 둔다. 이름은 전부 `r-` 로 시작한다 —
 * 흔한 이름이 다른 화면과 부딪히지 않게. 색은 공용이 정한 변수를 쓴다.
 *
 * `app.js` 가 짓는 마크업(`.summary` · `.r-sum` · `.pt` · `.r-ax` …)은 그대로다. 모양만 바꿨다.
 *
 * 2026-09-29 — 상자 «안»의 덩이에서 테두리를 걷었다. 상자가 이미 줄을 긋고 있으므로 안쪽은
 * 바탕(`--panel-2`)으로만 가른다. 크기와 간격은 공용 척도에서 고른다.
 */

/* ── 두 칸 (2026-09-29 · ParkTaeKyun 결정) ─────────────────
   넓은 화면에서는 「더 보셔야 할 논점」을 왼쪽에 붙박아 두고 오른쪽만 내려간다.
   긴 결과를 읽는 동안 «지금 어느 논점을 보고 있는지»가 곁에 남는다.

   ★ 붙박는 자리는 상단 바 «아래»다. 둘 다 맨 위에 붙이면 상단 바가 덮인다.
   ★ 좁으면 두 칸을 두지 않는다 — 지금까지처럼 한 줄기로 내려간다. */

@media (min-width: 1100px) {
  .r-page {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 0 var(--sp-6); align-items: start;
  }
  .r-page > .r-head { grid-column: 1 / -1; }
  .r-page > .r-side {
    grid-column: 1; grid-row: 2 / span 8;
    position: sticky; top: calc(var(--bar-h) + var(--sp-4));
    max-height: calc(100vh - var(--bar-h) - 2 * var(--sp-4)); overflow: auto;
  }
  .r-page > .r-main { grid-column: 2; }
  /* 오른쪽 칸이 좁아졌으므로 그 안의 두 칸(받은 문제 · 읽은 것)은 위아래로 놓는다 */
  .r-page .r-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ── 화면 머리 ─────────────────────────────────────────── */

.r-head { align-items: start; }
.r-head > div { min-width: 0; }
.r-head .lead { margin: var(--sp-2) 0 0; }

/* ── 한눈에 — 큰 글씨는 «더 볼 논점 수» ────────────────── */


/* 논점 요약 — 표처럼. 이름 · 간략 기준 · 득점 */
.r-sum { margin: var(--sp-2) calc(-1 * var(--sp-5)) 0; }
.r-sum ol { list-style: none; margin: 0; padding: 0; }
.r-sum li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--line2); font-size: var(--t-md);
}
.r-sum li { position: relative; transition: background-color .12s ease-out; }
.r-sum .nm { grid-column: 1; grid-row: 1; font-weight: var(--w-head); color: inherit; text-decoration: none; }
/* 이름이 그 논점으로 가는 길이다. 누르는 자리는 이름만이 아니라 «줄 전체»다 */
.r-sum a.nm::after { content: ""; position: absolute; inset: 0; }
.r-sum a.nm:focus-visible { outline: none; }
.r-sum li:has(a.nm:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
/* 지금 읽고 있는 논점 */
.r-sum .on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
@media (hover: hover) {
  .r-sum li:has(a.nm):hover { background: var(--panel-2); }
  .r-sum .on:hover { background: var(--accent-bg); }
}
.r-sum .crit { grid-column: 1; grid-row: 2; font-size: var(--t-xs); color: var(--muted); }
.r-sum .pts {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 판정은 이름 앞의 점으로 — 상태 부품과 같은 문법 */
.r-sum .nm::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--sp-2); vertical-align: 1px; background: var(--hit);
}
.r-sum .miss .nm::before { background: var(--miss); }
.r-sum .miss .pts { color: var(--miss); font-weight: var(--w-head); }
.r-sum .total { font-weight: var(--w-head); border-top: 1px solid var(--line); }
.r-sum .total .nm::before { display: none; }

/* ── 한 줄 띠 — 논점마다 한 칸 (`app.js` 가 짓는다) ─────────
   칸의 너비는 배점이고 색은 「더 볼 곳인가」다. 점수는 적지 않는다 —
   어디에 무게가 실려 있고 그 가운데 어디를 더 봐야 하는지만 보인다. */

.r-strip { flex-basis: 100%; display: flex; gap: 2px; height: 10px; margin: var(--sp-3) 0 var(--sp-1); }
.r-strip i { display: block; min-width: 4px; border-radius: 2px; background: var(--hit); }
.r-strip .miss { background: var(--miss); }

/* ── 받은 문제 / 문제가 말해준 것 ──────────────────────── */

/* 왼쪽(받은 문제)이 읽는 글이라 조금 더 넓다 — 둘을 똑같이 가르지 않는다 */
.r-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); }
@media (max-width: 760px) { .r-pair { grid-template-columns: minmax(0, 1fr); } }

.r-qbox {
  border-radius: var(--r2);
  padding: var(--sp-3) var(--sp-4); font-size: var(--t-read); line-height: 1.8; background: var(--panel-2);
}
.r-qbox mark { background: var(--part-bg); box-shadow: inset 0 -2px 0 var(--part); }

/* 테두리 없는 줄 목록 — 줄 사이의 가는 줄만 남긴다 */
.r-given { border-top: 1px solid var(--line); }
.r-given-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line2); font-size: var(--t-md); }
.r-given-row .q { font-weight: var(--w-head); margin-bottom: var(--sp-1); }
.r-given-row .means { color: var(--muted); font-size: var(--t-sm); }
.r-given-row .st { margin-top: var(--sp-2); font-size: var(--t-xs); }
.r-given-row .st.yes { color: var(--hit); background: var(--hit-bg); }
.r-given-row .st.no  { color: var(--miss); background: var(--miss-bg); }
.r-given-row .st.yes::before { background: var(--hit); content: "✓"; }
.r-given-row .st.no::before  { background: var(--miss); content: "!"; }
.r-given-ft { padding: var(--sp-2) 0 0; font-size: var(--t-xs); color: var(--muted); }

/* ── 내가 쓴 답안 ───────────────────────────────────────── */

.r-doc { font-size: var(--t-read); line-height: 1.9; white-space: pre-wrap; }

/* ── 기준 순서대로 — 한 줄기 ────────────────────────────── */

.r-items { list-style: none; margin: 0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)); padding: 0; }
/* 곁의 목록에서 건너올 때 상단 바에 가리지 않게 그 아래에서 멈춘다 */
.r-items > li { border-top: 1px solid var(--line2); scroll-margin-top: calc(var(--bar-h) + var(--sp-4)); }
/* 맨 끝 줄의 바탕이 상자의 둥근 모서리 밖으로 삐져나오지 않게 한다 */
.r-items > li:last-child { border-radius: 0 0 var(--r) var(--r); }


/* 차례와 이름은 한 묶음으로 왼쪽에 붙는다 — 판정·점수만 오른끝으로 간다 */
.r-head-l { display: flex; align-items: baseline; gap: var(--sp-1); min-width: 0; }
.r-seq { display: inline-block; min-width: 1.6em; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--t-sm); }

.r-route { margin: var(--sp-2) 0 0; font-size: var(--t-xs); color: var(--muted); }

/* 세부 항목 — 어느 항목에서 갈렸는지가 여기서 보인다 */
/* 세부 항목은 표의 줄처럼 — 칸마다 상자를 두르지 않는다 */
.r-axes { margin-top: var(--sp-2); display: grid; gap: 0; border-top: 1px solid var(--line2); }
.r-ax {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline;
  font-size: var(--t-sm); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line2);
}
.r-ax .tag { padding: 0; border: 0; background: none; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink2); white-space: nowrap; }
.r-ax .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-ax.no  .v { color: var(--miss); font-weight: var(--w-head); }
.r-ax.yes .v { color: var(--hit); }

/* 합산식 — 항목 득점을 더하면 논점 득점이 나온다는 것을 «보여» 준다 */
.r-calc { margin: var(--sp-2) 0 0; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 더하기가 안 맞으면 감추지 아니하고 그 사실을 적는다 */
.r-warn { margin: var(--sp-2) 0 0; font-size: var(--t-sm); font-weight: var(--w-head); color: var(--miss); }

/* 인용 — 답안에서 옮긴 글. 가는 줄 하나로 들여 쓴다 */
.r-quote { margin: var(--sp-2) 0 0; padding-left: var(--sp-3); border-left: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); max-width: 75ch; }

/* 첨삭 — 「다음에 볼 것」보다 먼저 온다. 무엇을 고치는지가 먼저다 */
.r-fix { margin: var(--sp-2) 0 0; font-size: var(--t-md); max-width: 75ch; }
.r-fix b { color: var(--accent); }

/* 모범답안 — 채점기준 원문 그대로. 줄바꿈을 살린다 (2026-09-26 · 규칙 11 ① 8호) */
.r-model { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r2); background: var(--panel-2); }
.r-model > b { font-size: var(--t-xs); color: var(--ink2); }
.r-model-body { margin: var(--sp-1) 0 0; font-size: var(--t-md); line-height: 1.7; white-space: pre-wrap; max-width: 75ch; }
.r-model-alt { margin: var(--sp-2) 0 0; font-size: var(--t-sm); color: var(--muted); }
.r-model-alt .tag { padding: 0; border: 0; background: none; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--ink2); }

/* ── 총평 ───────────────────────────────────────────────── */

.r-overall { font-size: var(--t-read); line-height: 1.8; max-width: 75ch; }

/* ── 점수 — 맨 아래, 작게 ────────────────────────────────── */


/* ── 채점 중 ─────────────────────────────────────────────── */


/* 막대의 폭은 `grading.js` 가 그때그때 적는다. 움직임을 줄여 달라는 기기에서는 공용 규칙이 곧바로 바꾼다 */
.r-bar { height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--line2); }
.r-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease-out; }

.r-acts { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; padding-top: var(--sp-3); }
.r-head .r-acts { margin-left: auto; padding-top: 0; }
.r-next { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); font-size: var(--t-md); color: var(--muted); }
.r-next li { margin-bottom: var(--sp-1); }
.r-next b { color: var(--ink); }

/* ── 답안 위의 표시 ───────────────────────────────────────── */

/* 안내 줄에서는 색 이름 자체를 그 색으로 보인다.
   ⚠️ id 로 고르지 아니한다 — 이 파일의 이름은 전부 `r-` 로 시작해야 하고, 그것을 시험이 본다. */
.r-legend .r-hl-ok   { color: var(--hit); font-weight: var(--w-head); background: none; box-shadow: none; }
.r-legend .r-hl-miss { color: var(--miss); font-weight: var(--w-head); background: none; box-shadow: none; }