/* 씨익 우측 패널 — Figma ImSbwO7Hg4s2GmlBJvkX22, frame 2946:4646 (panel/right).
   색·치수는 Figma 실측값이다. 눈대중으로 바꾸지 말 것.

   토큰(--ssiik-ink 등)과 Pretendard-SemiBold @font-face 는 ssiik.css 가 갖고 있다.
   이 파일은 그 뒤에 실린다 — 혼자서는 못 쓴다.

   ── 셸과 내용을 나눠 둔 이유 ──
   단원평가 패널 시안(2887:20695)이 **같은 셸에 탭·아코디언만 얹은 모양**이다.
   .sp-scrim / .sp-panel / .sp-close / .sp-logo / .sp-body / .sp-title 이 셸이고,
   .sp-list 아래가 학습카드 전용이다. 단원평가를 붙일 때 셸을 다시 짜지 말 것. */

/* ── 셸 ── */

/* ⚠ 닫힌 상태를 **CSS 가 혼자** 확정한다 — JS 타이머로 hidden 을 되돌리지 않는다.
   처음엔 열 때 requestAnimationFrame 으로 .is-open 을 붙이고 닫을 때 setTimeout 으로
   hidden 을 되돌렸는데, **탭이 뒤에 있으면 rAF 가 안 불린다.** 그러면 패널은 화면 밖에
   멈춘 채 .is-open 이 안 붙고, 닫기 타이머는 '다시 열렸다'고 판단해 스크림을 안 감춘다 —
   결과가 **투명한 막이 페이지 전체의 클릭을 먹는 상태**다(실측으로 재현). 그래서:
     · 보임/안 보임은 visibility 가 갖는다. transition 지연으로 슬라이드가 끝난 뒤에 꺼진다.
     · 안 열린 동안은 pointer-events:none — 어떤 이유로 상태가 어긋나도 클릭을 막지 않는다.
   JS 가 하는 일은 hidden 을 처음 한 번 걷고 .is-open 을 켜고 끄는 것뿐이다. */

/* 상단바가 z-index:9999 다(assets/css/top_bar.css). 패널은 그 위를 덮어야 한다. */
.sp-scrim{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:10000;
  background:rgba(0,0,0,0.3);          /* BG/Black_Opacity_30% */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.sp-scrim.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
.sp-scrim[hidden]{ display:none; }

.sp-panel{
  position:fixed; top:0; right:0; z-index:10001;
  width:516px; max-width:100%; height:100%;
  box-sizing:border-box;
  background:#fff;
  box-shadow:-12px 0 16px rgba(0,0,0,0.08);
  /* ⚠ 스크롤은 .sp-body 가 한다 — 패널이 통째로 스크롤되면 안 된다.
     .sp-close 는 패널 기준 absolute 라, 패널이 스크롤되면 닫기 버튼이 위로 사라진다.
     가로로 눕힌 작은 휴대폰(568×320)에서는 폭이 560 이하라 전폭이 되어 스크림도 없고
     터치라 ESC 도 없다 — 닫을 방법이 하나도 안 남는다(내용 623px vs 뷰포트 320px).
     머리(로고·닫기)는 고정, 본문만 구른다. */
  display:flex; flex-direction:column; overflow:hidden;
  /* visibility:hidden 이면 탭 순서와 보조기기 트리에서도 빠진다 — 화면 밖에 있는 링크
     6개로 포커스가 새 나가지 않는다. */
  transform:translateX(100%); visibility:hidden; pointer-events:none;
  transition:transform .25s ease, visibility 0s linear .25s;
}
.sp-panel.is-open{
  transform:translateX(0); visibility:visible; pointer-events:auto;
  transition:transform .25s ease, visibility 0s linear 0s;
}
.sp-panel[hidden]{ display:none; }

/* 움직임을 줄이는 설정 — 전이만 끈다. visibility 는 즉시 바뀌어야 하므로 함께 0s 다. */
@media (prefers-reduced-motion:reduce){
  .sp-scrim, .sp-panel, .sp-scrim.is-open, .sp-panel.is-open{ transition:none; }
}

/* 머리 — 안 구른다. 높이 56 = 로고 top 24 + 32. */
.sp-head{ flex:none; position:relative; height:56px; }

.sp-close{
  position:absolute; left:28px; top:28px;
  width:28px; height:28px; padding:0;
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
}
.sp-close img{ display:block; width:100%; height:100%; }
/* 패널을 열면 **가장 먼저 포커스를 받는 게 이 버튼**이다. 아이콘 자체가 검정 30% 사각형이라
   브라우저 기본 링은 묻힌다 — 아래 단원 행과 같은 링을 쓴다. */
.sp-close:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:2px; }

.sp-logo{ display:block; width:66px; height:32px; margin:24px auto 0; }

/* 본문만 구른다. padding 좌우 40 → 내용 폭 436(=516-80), 위 40 → 제목이 시안의 top:96.
   overscroll-behavior 가 없으면 끝까지 굴렸을 때 뒤 목록이 따라 움직인다. */
.sp-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:40px 40px 60px; box-sizing:border-box;
}

.sp-title{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:32px; line-height:42px; letter-spacing:-0.8px; color:var(--ssiik-ink);
}
/* 시안의 6px 원. 글자가 아니라 구분자라 보조기기에는 안 읽힌다(aria-hidden 은 마크업에). */
.sp-title__dot{ flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── 학습카드 단원 목록 ── */

.sp-list{
  list-style:none; margin:17px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}

/* 행 전체가 링크다. 15+26+15+테두리 2 = 시안의 58px. */
.sp-unit{
  display:flex; align-items:center; gap:8px;
  padding:15px 20px; box-sizing:border-box;
  background:#fff; border:1px solid var(--ssiik-line); border-radius:16px;
  text-decoration:none; color:var(--ssiik-ink);
  transition:border-color .12s, box-shadow .12s;
}
.sp-unit:hover{ border-color:var(--ssiik-line-hover); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sp-unit:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:2px; }

.sp-unit__no{
  flex:none;
  width:20px; height:20px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ssiik-ink); color:#fff;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:14px; line-height:20px; letter-spacing:-0.35px;
}
.sp-unit__title{
  min-width:0;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px;
  overflow-wrap:anywhere;
}
/* 시안 아이콘은 아래꺾쇠(icon/direction=down)를 돌려 쓴 것이다 — 같은 자산을 돌려 쓴다.
   margin-left:auto 라 제목이 길어지면 제목이 먼저 줄바꿈하고 꺾쇠는 오른쪽에 남는다. */
.sp-unit__go{ flex:none; margin-left:auto; display:block; width:18px; height:18px; transform:rotate(-90deg); }

/* 패널이 열린 동안 뒤 목록이 따라 스크롤되지 않게.
   ⚠ overflow:hidden 은 **스크롤바를 없앤다.** 오버레이 스크롤바가 아닌 곳(Windows·Linux 의
   Chrome·Firefox)에서는 그 폭(보통 15~17px)만큼 페이지가 통째로 오른쪽으로 튄다 — 열 때
   한 번, 닫을 때 또 한 번. macOS 에서는 오버레이라 0 이라 눈으로는 안 보인다.
   그래서 사라진 폭을 JS 가 재서 --sp-sbw 로 넘기고, 여기서 되메운다. */
body.sp-locked{ overflow:hidden; padding-right:var(--sp-sbw, 0px); }
/* 되메우기는 흐름 안의 요소만 되돌린다. 화면에 떠 있는 것은 뷰포트 기준이라 따로 민다
   (이 페이지에서 fixed 인 건 스크롤탑 버튼 하나다 — 스크림 너머로 보인다).
   right 를 다시 적지 않고 translate 로 미는 이유: .ssiik-fab 의 right 는 화면 폭에 따라
   40px/16px 로 갈린다(ssiik.css). 여기서 값을 적으면 좁은 화면의 16px 를 덮어쓴다. */
body.sp-locked .ssiik-fab{ transform:translateX(calc(-1 * var(--sp-sbw, 0px))); }

/* ── 좁은 화면: 전폭 ── */
@media (max-width:560px){
  .sp-panel{ width:100%; box-shadow:none; }
  .sp-close{ left:16px; top:16px; }
  .sp-head{ height:48px; }              /* 로고 top 16 + 32 */
  .sp-logo{ margin-top:16px; }
  .sp-body{ padding:32px 20px 60px; }
  .sp-title{ font-size:24px; line-height:34px; letter-spacing:-0.6px; gap:10px; }
  .sp-unit{ padding:14px 16px; }
  .sp-unit__title{ font-size:16px; line-height:24px; }
}

/* ══ 단원평가 패널 (Figma 2887:20695) ══════════════════════════════════════════
   셸(.sp-scrim · .sp-panel · .sp-head · .sp-body · .sp-title)은 학습카드와 공유한다.
   여기 있는 건 그 안에 들어가는 것뿐 — 탭 · 단원 아코디언 · 유형 줄 · 세트 라디오. */

/* ── 문제지 / 정답지 탭 ──
   ⚠ 학생에게는 이 줄이 아예 안 그려진다(원장·운영자 세션만). 탭을 보여 주면 그 자체로
      정답지의 존재를 알려 주게 된다 — #537 이 E-Book 정답 버튼을 통째로 감춘 것과 같은 이유. */
.sp-tabs{ display:flex; align-items:stretch; margin:8px 0 0; }
.sp-status{ margin:0; color:var(--ssiik-gray); font-size:14px; line-height:1.5; }
.sp-status:not(:empty){ margin-top:12px; }
.sp-tab{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  height:48px; padding:16px; box-sizing:border-box;
  appearance:none; -webkit-appearance:none; background:#fff; border:0;
  border-bottom:1px solid var(--ssiik-line);
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--ssiik-gray);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 글자는 -text, 밑줄은 -accent — ssiik.css 의 두 토큰 주석 참조.
   활성 여부가 색으로만 갈리지 않게 굵기(SemiBold)와 밑줄 두께도 함께 바뀐다. */
.sp-tab[aria-selected="true"]{
  font-family:'Pretendard-SemiBold', sans-serif;
  color:var(--ssiik-accent-text); border-bottom:2px solid var(--ssiik-accent);
}
.sp-tab:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:-3px; }

/* ── 단원 아코디언 ──
   단원 줄은 학습카드의 .sp-unit 과 같은 형태(436×58)다. 다른 건 여는 게 링크가 아니라
   이 자리에서 펼쳐지는 것이라 <button> 이라는 점, 그리고 꺾쇠가 아래를 본다는 점이다. */
.sp-acc{ list-style:none; margin:17px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }

.sp-acc__item{ background:#fff; border:1px solid var(--ssiik-line); border-radius:16px; overflow:hidden; }

.sp-acc__head{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:15px 20px; box-sizing:border-box;
  appearance:none; -webkit-appearance:none; background:none; border:0;
  text-align:left; cursor:pointer;
  transition:background .12s;
}
.sp-acc__head:hover{ background:#FAFAFC; }
.sp-acc__head:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:-3px; }
.sp-acc__head:disabled{ cursor:default; }
.sp-acc__head:disabled:hover{ background:none; }

.sp-acc__no{
  flex:none;
  width:20px; height:20px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ssiik-ink); color:#fff;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:14px; line-height:20px; letter-spacing:-0.35px;
}
.sp-acc__title{
  min-width:0;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:var(--ssiik-ink);
  overflow-wrap:anywhere;
}
/* 시안의 꺾쇠는 아래를 본다(펼침). 열리면 뒤집는다 — 학습카드 쪽은 같은 자산을 오른쪽으로
   돌려 쓰므로(.sp-unit__go) 여기서는 회전을 안 건다. */
.sp-acc__go{ flex:none; margin-left:auto; display:block; width:18px; height:18px; transition:transform .15s; }
.sp-acc__head[aria-expanded="true"] .sp-acc__go{ transform:rotate(180deg); }

/* 준비중 단원 — 펼칠 게 없다.
   ⚠ 글자는 흐리게 하지 않는다. 상태는 배경과 배지가 말한다(exam.css 에서 한 번 물린 자리). */
.sp-acc__item.is-soon{ background:#FAFAFC; border-style:dashed; }
.sp-acc__item.is-soon .sp-acc__head{ cursor:default; }
.sp-acc__item.is-soon .sp-acc__head:hover{ background:none; }
.sp-acc__soon{
  margin-left:auto; flex:none;
  padding:4px 12px; border-radius:999px;
  background:#EFEFF3; color:var(--ssiik-gray);
  font-family:'Pretendard-Medium', sans-serif;
  font-size:14px; line-height:20px; white-space:nowrap;
}

/* ── 펼쳐진 내용: 유형 여섯 줄 ──
   순서가 곧 난이도 순서다. 14장을 평평하게 늘어놓으면 무엇부터 풀어야 하는지가 안 보인다. */
.sp-acc__body{ border-top:1px solid var(--ssiik-line); }
.sp-acc__body[hidden]{ display:none; }

.sp-type{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; box-sizing:border-box;
}
.sp-type + .sp-type{ border-top:1px solid var(--ssiik-line); }

.sp-type__label{
  display:flex; align-items:center; gap:4px; min-width:0;
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--ssiik-gray);
}
/* 시안의 4×1px 선. 목록 기호라 보조기기에는 안 읽힌다(aria-hidden 은 마크업에). */
.sp-type__dash{ flex:none; width:4px; height:1px; background:var(--ssiik-gray); }

.sp-type__pick{ display:flex; align-items:center; gap:20px; flex:none; }

/* 라디오. 기본20 만 4개라 두 줄로 접힌다 — 시안도 그 줄만 2×2 다. */
.sp-sets{ display:flex; flex-wrap:wrap; gap:8px 12px; max-width:150px; }
.sp-set{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; }
.sp-set input{
  appearance:none; -webkit-appearance:none; margin:0;
  flex:none; width:18px; height:18px; border-radius:100px;
  background:#fff; border:1px solid var(--ssiik-line-regular);
  display:grid; place-content:center; cursor:pointer;
}
.sp-set input::before{
  content:''; width:8px; height:8px; border-radius:999px; background:var(--ssiik-line-regular);
}
/* ⚠ 선택 여부가 **색으로만** 갈리면 안 된다(WCAG 1.4.1). 시안은 두 상태 모두 점이 찬
   모양이라 차이가 색뿐인데, 여기서는 테두리 두께도 함께 바꿔 모양으로도 갈린다.
   (보조기기에는 <input type="radio"> 가 그대로라 상태가 정확히 전달된다.) */
.sp-set input:checked{ border-width:2px; border-color:var(--ssiik-accent); }
.sp-set input:checked::before{ background:var(--ssiik-accent); }
.sp-set input:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:2px; }
.sp-set__label{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--ssiik-gray);
}

/* 행 끝 링크 — 진짜 <a> 다. 라디오를 바꾸면 JS 가 href 만 갈아 끼운다.
   그래야 가운데클릭·키보드가 그대로 산다.
   2026-09-08 부터 「인쇄」(뷰어를 새 탭으로 — 예전 내려받기 아이콘 자리)이고, 채점·진단 탭에서는
   같은 자리가 「채점」이 된다. 인쇄는 검은 아이콘만, 채점은 글자 알약으로 표시한다. */
.sp-dl{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-width:48px; height:32px; padding:0 12px 0 10px; box-sizing:border-box;
  border:1px solid var(--ssiik-accent); border-radius:8px;
  color:var(--ssiik-accent-text); text-decoration:none;
  font-family:'Pretendard-SemiBold', sans-serif; font-size:14px; line-height:20px; white-space:nowrap;
}
/* display 를 준 요소는 UA 의 [hidden] 이 안 먹는다 — 명시해야 한다. */
.sp-dl[hidden]{ display:none; }
.sp-dl img{ display:block; width:20px; height:20px; }
.sp-dl img[hidden]{ display:none; }
.sp-dl:hover{ background:#FFF5F5; }
.sp-dl:focus-visible{ outline:3px solid var(--ssiik-soon); outline-offset:4px; }
.sp-dl.is-action{ padding:0 12px; }
.sp-dl[aria-disabled="true"]{
  border-color:var(--ssiik-line-regular); color:var(--ssiik-gray);
  background:#FAFAFC; pointer-events:none;
}
.sp-action__label{ white-space:nowrap; }
/* 인쇄는 아이콘만 보인다. 접근명은 링크의 aria-label이 제공한다. */
.sp-dl:not(.is-action){
  width:44px; min-width:44px; height:44px; padding:0;
  border:0; color:#111;
}
.sp-dl:not(.is-action):hover{ background:#F3F3F3; }
.sp-dl:not(.is-action) .sp-action__label{ display:none; }
.sp-dl:not(.is-action) img{ filter:brightness(0); }

/* ── 단원평가 진단 선택 ── */
.sp-diagnosis__status{ min-height:24px; margin:12px 0 0; color:var(--ssiik-gray); }
.sp-diagnosis__groups{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.sp-diagnosis__groups fieldset{margin:0;padding:16px 20px;border:1px solid var(--ssiik-line);border-radius:16px}
.sp-diagnosis__groups legend{padding:0 4px;font-family:'Pretendard-SemiBold',sans-serif;color:var(--ssiik-ink)}
.sp-diagnosis__unit h3{margin:0 0 8px;font-size:18px;line-height:26px;color:var(--ssiik-ink)}
.sp-diagnosis__unit fieldset + fieldset{margin-top:12px}
.sp-diagnosis__set{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.sp-diagnosis__set span:last-child{margin-left:auto;color:var(--ssiik-gray);font-size:14px;white-space:nowrap}
.sp-diagnosis__set input:focus-visible{outline:3px solid var(--ssiik-soon);outline-offset:2px}
.sp-diagnosis__empty{margin-top:24px;text-align:center;color:var(--ssiik-gray)}
.sp-diagnosis__soon{display:inline-block;margin-top:8px;color:var(--ssiik-ink)}
.sp-diagnosis__actions{position:sticky;bottom:0;margin:20px -40px -60px;padding:16px 40px calc(16px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--ssiik-line)}
.sp-diagnosis__cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;border-radius:14px;text-decoration:none;background:var(--ssiik-accent);color:#fff;font:inherit;font-family:'Pretendard-SemiBold',sans-serif}
.sp-diagnosis__cta[aria-disabled="true"],.sp-diagnosis__cta:disabled{background:var(--ssiik-soon);color:var(--ssiik-gray);pointer-events:none}
.sp-diagnosis__action-state{margin:8px 0 0;text-align:center;color:var(--ssiik-gray);font-size:13px;line-height:1.4}
.sp-diagnosis__cta:focus-visible{outline:3px solid var(--ssiik-soon);outline-offset:2px}

@media (max-width:560px){
  .sp-type{ flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px; }
  .sp-type__pick{ justify-content:space-between; }
  .sp-sets{ max-width:none; }
  .sp-diagnosis__actions{margin:20px -20px -60px;padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
}