@charset "utf-8";

/* ──────────────────────────────────────────────────────────────────────────
 * 기출문제 상세(SEO) — 문제·보기·간략 풀이 단일 화면.
 *   문제/보기/정답 강조 본문은 learn.css(.rl-learn .view-content) 단일 출처 —
 *   rl_mock_result.php 펼침 패널과 동일 마크업·토큰. 본 파일은 페이지 전용 chrome
 *   (과목 타이틀·풀이 섹션·관리자 블록) + 이 페이지 한정 보정(레거시 헤더 숨김·텍스트 한 단계 확대)만.
 * ────────────────────────────────────────────────────────────────────────── */

/* 레거시 APMS 브레드크럼 헤더 제거 — 이 페이지는 앱바(뒤로) + 본문만. (header.skin.php 전역 출력, 본 스킨에서만 숨김) */
.amina-header { display: none; }

/* ── 채점 완료 상태 카드 정합(빠른학습·오답노트 graded 카드) ──────────────────
 * 문제·보기·카드 형태/간격/텍스트 크기·강도는 learn.css(.rl-learn .view-content .question-container)
 * 단일 출처를 그대로 받음 — note/quick과 동일 scope라 마크업만 동일하면 자동 정합(별도 override 0).
 * 의도적 차이(사용자 명세, rl_mock_result.css:427-460 패턴 이식):
 *   ① 정답 셀: ✓ 원 아이콘 → "정답" 텍스트 라벨.
 *   ② 비정답 셀: 회색(surface-2) 톤다운 + 빈 원 마커 제거 — 읽기 전용 정답지라 풀이 화면처럼 오인 방지. */
.rl-learn .answer-container .answer {
  /* ✓ 원(22px) 자리를 "정답" 텍스트 폭(auto)에 맞춤. 그 외 grid 규약은 learn.css 동일. */
  grid-template-columns: 28px 1fr auto;
  cursor: default;
}
.rl-learn .answer-container .answer:active { transform: none; }
.rl-learn .answer-container .answer.correct::after {
  content: "정답";
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  background-image: none;
  animation: none;
  font-size: var(--rl-fs-body-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--rl-ls-tight);
  color: var(--rl-grade-correct-accent);
}
/* 비정답 셀(:not(.correct)) — 회색 배경 톤다운 + ::after 빈 원 제거.
   SEO 마크업엔 .incorrect가 없어 mock_result의 :not(.correct):not(.incorrect)를 :not(.correct)로 단순화. */
.rl-learn .answer-container .answer:not(.correct) {
  background: var(--rl-surface-2) !important;
  border-color: var(--rl-line-2) !important;
}
.rl-learn .answer-container .answer:not(.correct)::after {
  display: none;
}

/* 과목 타이틀 — rl_note_archive.css의 .rl-archive-header 패턴(h1 mb sp-2 → .subcopy margin:0) 그대로 정합.
   헤더 mb sp-6 = 카드 그룹과 24px(그룹 간격 원칙). */
.rl-qzview-head {
  margin: 0 0 var(--rl-sp-5);
  padding: 0 var(--rl-sp-1);
}
/* view.css가 타이틀(.view-wrap 내 h1)을 덮어쓰는 것을 전부 무력화 — 모바일 `.responsive .view-wrap h1`(0,2,1:
   line-height:28px·margin-bottom:10px)까지 이기도록 .rl-learn 스코프(0,3,0)로 올리고, base `.view-wrap h1{padding:0 10px}`
   까지 reset. 폰트·클램프는 rl_study.php의 .rl-study-title(.rl-archive-header h1 + study.css:206-211)와 동일 토큰. */
.rl-learn .rl-qzview-head .rl-qzview-title {
  margin: 0 0 var(--rl-sp-1);
  padding: 0;
  font-size: var(--rl-fs-h2);
  font-weight: 700;
  color: var(--rl-ink);
  letter-spacing: var(--rl-ls-h2);
  line-height: var(--rl-lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
/* 식별 메타 — rl_study.php 헤더의 .rl-archive-header .subcopy(rl_note_archive.css:30-35)와 동일.
   타이틀↔메타 간격은 타이틀 mb sp-2가 담당(메타 margin 0). weight·font-family는 미지정(상속). */
.rl-qzview-head .rl-qcard-meta {
  margin: 0;
  font-size: var(--rl-fs-body-sm);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-normal);
}

/* 간략 풀이 — mock_result 펼침 패널의 .rl-mock-result-explain 시각 규약 그대로(텍스트만 한 단계 확대). */
.rl-qzview-explain {
  margin-top: var(--rl-sp-5);
  padding: var(--rl-sp-4) var(--rl-sp-2) var(--rl-sp-1);
  border-top: 1px solid var(--rl-line);
}
.rl-qzview-explain-title {
  margin: 0 0 var(--rl-sp-2);
  font-size: var(--rl-fs-body);
  font-weight: 700;
  color: var(--rl-text-2);
  letter-spacing: var(--rl-ls-tight);
  line-height: var(--rl-lh-snug);
}
.rl-qzview-explain-body {
  font-size: var(--rl-fs-body);
  line-height: var(--rl-lh-relaxed);
  color: var(--rl-text);
}
.rl-qzview-explain-empty,
.rl-qzview-explain-locked,
.rl-qzview-admin-empty {
  margin: 0;
  font-size: var(--rl-fs-body);
  color: var(--rl-text-3);
  line-height: var(--rl-lh-normal);
}

/* 관리자 정적 풀이 패널(#explanation-section.rl-qzview-admin-explain) — note.php 포맷(view.css+learn.css 단일 출처) 차용.
   간격·보더·"풀이" 타이틀은 비관리자와 동일하게 .rl-qzview-explain 래퍼가 담당(별도 보정 불필요). */

/* 관리자 전용 블록 — 보기 아래 운영 도구(QA 메타 + JSON 페이로드 + 글 관리 버튼). */
.rl-qzview-admin {
  margin: var(--rl-sp-5) 0 0;
  /* 좌우 20px — 사용자 명세(토큰 외 raw px, §8.5 G2 예외). 관리자 전용 블록. */
  padding: var(--rl-sp-4) 20px 0;
  border-top: 1px dashed var(--rl-line);
}
/* QA 메타 — 검수상태·리뷰레벨·토픽·풀이 등록/수정 시점. 라벨/값 키밸류 행. */
.rl-qzview-admin-meta {
  display: grid;
  gap: var(--rl-sp-1);
  margin: 0 0 var(--rl-sp-6);
  font-size: var(--rl-fs-body-sm);
  line-height: var(--rl-lh-normal);
}
.rl-qzview-admin-meta > div {
  display: flex;
  gap: var(--rl-sp-2);
}
.rl-qzview-admin-meta dt {
  flex: 0 0 4.5em;
  color: var(--rl-text-3);
  font-weight: 600;
}
.rl-qzview-admin-meta dd {
  margin: 0;
  color: var(--rl-text-2);
  word-break: break-all;
}
.rl-qzview-admin-json {
  position: relative;
  /* 우측 상단 복사 버튼 자리 확보(우측 sp-7). */
  padding: var(--rl-sp-3) var(--rl-sp-7) var(--rl-sp-3) var(--rl-sp-3);
  background: var(--rl-surface-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  font-size: var(--rl-fs-body-sm);
  line-height: var(--rl-lh-relaxed);
  color: var(--rl-text-2);
  word-break: break-all;
}
/* 내부 우측 상단 복사 버튼 — 클릭 시 JSON 텍스트 클립보드 복사. */
.rl-qzview-admin-copy {
  position: absolute;
  top: var(--rl-sp-2);
  right: var(--rl-sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rl-sp-6);
  height: var(--rl-sp-6);
  padding: 0;
  color: var(--rl-text-3);
  background: var(--rl-surface);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  cursor: pointer;
}
.rl-qzview-admin-copy:hover {
  color: var(--rl-text);
  border-color: var(--rl-text-3);
}
.rl-qzview-admin-copy.is-copied {
  color: var(--rl-grade-correct-accent);
  border-color: var(--rl-grade-correct-edge);
}
.rl-qzview-admin-copy .rl-icon-check { display: none; }
.rl-qzview-admin-copy.is-copied .rl-icon-copy { display: none; }
.rl-qzview-admin-copy.is-copied .rl-icon-check { display: inline-flex; }
.rl-qzview-admin-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-sp-2);
  margin-top: var(--rl-sp-6);
}
.rl-qzview-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-sp-1);
  padding: var(--rl-sp-2) var(--rl-sp-4);
  font-size: var(--rl-fs-body-sm);
  font-weight: 600;
  color: var(--rl-text-2);
  background: var(--rl-surface-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-r-md);
  text-decoration: none;
  cursor: pointer;
}
.rl-qzview-admin-btn:hover {
  color: var(--rl-text);
  border-color: var(--rl-text-3);
}
.rl-qzview-admin-btn--write {
  color: var(--rl-primary);
  border-color: var(--rl-primary-edge);
  background: var(--rl-primary-soft);
}