/* 씨익 개념카드 뷰어 · 공통 디자인
   Figma: ImSbwO7Hg4s2GmlBJvkX22 — 표지 2906:2369 / 문제 2909:18822 / 정답 2909:18930
          card 컴포넌트 세트 2914:19336 (학년=1~6학년 × 표지/문제/정답, 830×500)

   ⚠ 색은 학년이 정한다. --g-* 는 셸이 <body style> 로 주입한다(cards.php).
     여기에 학년 색을 하드코딩하지 말 것.

   구성: 1) 시안 틀(상단 밴드·버튼·카드·표지) 2) 측정자 지원 3) 카드 본문 안쪽 요소
         4) 인쇄. 3)·4) 는 1-2·2-2·3-2 세 book.css 의 합집합이다 — 아래 각 절에
         "[합집합]" 주석으로 어느 책에만 있던 것인지 적어 둔다. */

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* ↑ 셋 다 갖고 있던 전역 리셋. 없으면 아래 .sc-btn--icon 처럼 width+padding+border 를
   같이 쓰는 요소들이 지정한 치수보다 커진다(48px 버튼이 76px 로 부풀어 오름). */

@font-face{
  font-family:'RiaSans-ExtraBold';
  src:url('../../assets/woff2/RiaSans-ExtraBold.woff2') format('woff2');
  font-weight:normal; font-style:normal;
  font-display:swap;   /* 폰트가 오기 전에도 제목이 보이게 */
}

/* 파일 전체가 'Pretendard-SemiBold'/'Pretendard-Regular' 를 쓰는데(상단 밴드 제목·카드
   머리말·본문·버튼 전부) 이 두 @font-face 가 없어서 지금까지 선언되지 않은 패밀리 →
   OS 폴백(게다가 normal 굵기)으로 떨어지고 있었다(2026-08-26 최종 브랜치 리뷰에서 발견).
   설계서 "폰트" 절이 이 셸이 @font-face 를 실어야 한다고 명시한다 — 회귀는 아니다(옛
   card.css 도 웹폰트가 없었다), 이번 작업이 고치기로 한 항목이다. woff2 는
   `KR/assets/woff2/` 에 이미 있다(ssiik.css·ebook.css 와 같은 파일, 상대경로만 다르다). */
@font-face{
  font-family:'Pretendard-SemiBold';
  src:url('../../assets/woff2/Pretendard-SemiBold.woff2') format('woff2');
  font-weight:normal; font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Pretendard-Regular';
  src:url('../../assets/woff2/Pretendard-Regular.woff2') format('woff2');
  font-weight:normal; font-style:normal;
  font-display:swap;
}

:root{
  /* 낱말 하나하나가 '자료 한 건'인 상자에서 낱말 사이를 벌리는 폭. 문장이 아니라 나열이라
     몇 건인지 세어야 해서 기본보다 넓다. 세 군데(.number-groups · 자료 상자 · 수 카드)가
     같은 뜻으로 쓴다 — 기준을 바꿀 땐 여기만 고친다. */
  --token-gap:.4em;

  --sc-card-w: min(94vw, 830px, calc((100vh - 300px) * 1.66));
  --sc-ratio: 1.66;

  /* 자동 글자크기 — 예전 card.css 값 그대로. viewer.js 의 computeBodyFontSize 가 읽는다. */
  --fit-min: 14.4; --fit-max: 28.8; --fs-bump: 1.6px;

  /* 인쇄 규격. 예전 select 의 기본 선택값(A4 세로 8장)을 못 박은 것이다. */
  --print-w: 95mm; --print-h: 66mm; --print-gap: 4mm; --print-fs: 9.5pt;

  --mascot-gap: 136px;   /* 본문 오른쪽에 비워 두는 마스코트 자리 */
  --font: 'Pretendard-Regular', "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 카드 본문 안쪽 요소가 학년과 무관하게 공통으로 쓰는 고정 색.
     예전 card.css 셋은 이 값을 :root 의 --accent/--answer 로 갖고 있었다(세 책이 동일값) —
     학년별로 바뀌는 --g-* 와 달리 이건 셸이 안 넣어 주므로 여기 남겨 둔다. */
  --accent: #FCEA60;      /* 시안 공통 노랑 버튼 색과 통일 */
  --accent-deep: #E9B93C;
  --answer: #E23B3B;      /* 정답 빨강 — 세 책 전부 이 값 */
}

/* 반입된 단원 CSS(UNIT_CSS)가 아직 옛 이름을 쓴다 — 추출기는 :root 정의만 지우고
   사용은 그대로 둔다(고치면 교재팀 산출물을 우리가 손대는 셈이다).
   색 기준이 단원별에서 학년별로 바뀌었으므로 학년 토큰으로 잇는다.

   ⚠ 이 별칭은 :root 가 아니라 여기(body.sc-viewer) 에 선언해야 한다. --g-* 는 셸이
   <body style="--g-line:…"> 로 인라인 주입한다(cards.php) — :root(html) 자신에게는
   없다. 커스텀 프로퍼티의 var() 참조는 "그 프로퍼티가 선언된 요소" 기준으로 한 번
   계산되고, 그 계산 결과(성공이든 guaranteed-invalid 든)가 그대로 자손에 상속된다 —
   자손이 각자 다시 --g-line 을 찾아 재계산하지 않는다. :root 에 두면 --g-line 이
   :root 자신에게는 없으니 --unit 은 그 자리에서 이미 무효로 굳고, 그 무효값이
   body 를 포함한 모든 자손에 그대로 상속된다(2026-08-26 Task 7 육안대조에서 발견 —
   `getComputedStyle(document.body).getPropertyValue('--unit')` 이 빈 문자열이었다.
   1-2/u4 의 .numcards i 테두리가 브라우저 기본값(currentColor)으로, 3-2/u6 의 .pic
   아이콘이 투명 배경으로 조용히 깨져 있었다 — 두 증상 다 육안으로만 잡혔다).
   body.sc-viewer 는 --g-* 가 실제로 선언된 바로 그 요소이므로, 여기서 별칭을 선언하면
   같은 요소의 커스텀 프로퍼티 계산 안에서 --g-line 이 이미 유효한 값으로 존재한다.
   (2-2/u4 시간표 6칸 배경, 3-2/u4 의 .sqfig 빗금,
    3-2/u5 의 .vc-line 구분선, 3-2/u6 의 .pic 아이콘 배경이 이 별칭에 기댄다.) */
body.sc-viewer{
  margin:0; background:#FFFCE9; font-family:var(--font); color:#111;
  --unit:       var(--g-line);
  --unit-deep:  var(--g-title);
  --ink:        #111;
  /* --unit-light 는 옛 값이 거의 흰색(#FDEDF3)이었다. --g-rule 을 그대로 쓰면 표 칸
     배경으로는 너무 진하다 — 흰색과 섞어 옛 농도에 맞춘다. 농도는 짐작이다 —
     18단원 육안대조(Task 7)에서 확정할 것. */
  /* color-mix 를 모르는 브라우저용 값. 학년색을 못 섞으므로 중립 회색이다 —
     이 레포는 학원 태블릿의 구형 브라우저에 물린 이력이 있다(Unity6 replaceAll 건).
     ⚠ 커스텀 프로퍼티를 같은 선언 안에서 두 번 적어도 "폴백"이 되지 않는다 — 커스텀
     프로퍼티 값은 선언 시점에 검증되지 않고 그대로 저장되므로, color-mix 를 모르는
     브라우저에서도 아래 줄이 유효한 값으로 받아들여지고 이 줄을 덮어써 버린다. 그
     브라우저에서 color-mix() 자체는 무효라 --unit-light 는 초기값(transparent)으로
     조용히 죽는다(2026-08-26 리뷰에서 발견 — 이전 주석은 이 줄이 "폴백"으로 실제
     작동한다고 잘못 적혀 있었다). @supports 로 진짜 갈라야 한다. */
  --unit-light: #F7F7FA;
}
@supports (color: color-mix(in srgb, red 50%, white)){
  body.sc-viewer{ --unit-light: color-mix(in srgb, var(--g-rule) 45%, #fff); }
}

/* ── 상단 밴드 ── */
.sc-top{ background:#FEF9CA; border-bottom:2px solid #111; }
/* 헤더 내용은 카드와 같은 폭으로 가운데 — 시안은 로고·제목이 카드 왼쪽 끝, 초기화·인쇄가
   카드 오른쪽 끝에 맞는데, .sc-top 자체에 justify-content:space-between 만 걸려 있어
   넓은 화면에서 브라우저 창 끝까지 벌어져 있었다(2026-08-27 실사용에서 발견). 배경·테두리는
   여전히 화면 전체 폭으로 번지고(.sc-top), 내용만 .sc-controls 와 같은 --sc-card-w 로 좁힌다. */
.sc-top__inner{
  width:var(--sc-card-w); min-width:560px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
/* --sc-card-w 는 뷰포트 "높이" 로도 줄어든다(카드가 세로로 짧은 화면에도 통째로 들어가게
   하는 계산이다) — 낮고 넓은 창(예: 1200×500)에서는 94px 대까지 줄 수 있다. 카드는 본문
   글자크기 자동조절(computeBodyFontSize)이 있어 그래도 버티지만, 헤더는 배지 144px+
   갭+초기화·인쇄 버튼 161px 만으로 이미 321px 을 쓰는 고정폭이라 제목이 한 글자씩 세로로
   쪼개져 나갔다(2026-08-27 /code-review 지적, 1200×500 에서 실측 재현). min-width 560px
   로 바닥을 깐다 — 이 폭 밑으로 내려가는 극단적인 화면에서는 카드보다 헤더가 살짝
   넓어지지만(정렬이 완벽하진 않음), 제목이 안 보이는 것보다는 낫다. */
.sc-top__left{ display:flex; align-items:center; gap:16px; }
.sc-badge{ display:flex; flex-direction:column; gap:5px; width:144px; }
.sc-badge__bar{ height:5px; background:#54C3F1; border:1px solid #111; box-sizing:border-box; }
.sc-badge__mid{ display:flex; align-items:center; gap:8px; }
.sc-badge__unit{
  width:64px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:#FCEA60; border:1px solid #111; padding:2px 4px;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:22px; line-height:32px; letter-spacing:-0.55px; color:#111; white-space:nowrap;
}
.sc-title__name{
  margin:0; font-family:'Pretendard-SemiBold', sans-serif;
  font-size:32px; line-height:42px; letter-spacing:-0.8px; color:#111;
}
.sc-title__sub{
  margin:0; font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:#505050;
}
.sc-top__right{ display:flex; align-items:center; gap:13px; }

/* ── 버튼 공통 (시안: 흰 배경 · 2px 검정 테두리 · 아래로 4px 검정 그림자) ── */
.sc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  background:#fff; border:2px solid #111; box-shadow:0 4px 0 #000;
  border-radius:8px; cursor:pointer;
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:#111;
}
.sc-btn--icon{ width:48px; height:48px; border-radius:24px; padding:14px; }
.sc-btn--print{ width:100px; height:48px; padding:8px 20px; }
.sc-btn--nav{ width:100px; height:56px; padding:8px 20px; }
.sc-btn--flip{ width:160px; height:56px; padding:8px 20px; background:#FCEA60; }
/* icon_arrow.svg 자체가 왼쪽(이전) 화살표다(Figma 레이어명 "btn/previous") — '이전'은
   그대로 쓰고, '다음'에 이 클래스로 180도 돌려 오른쪽 화살표를 만든다. 반대로 붙어 있던
   것을 2026-08-27 실사용에서 발견(이전이 →, 다음이 ← 로 나옴). */
.sc-btn__arrow--flip{ transform:rotate(180deg); }
/* 비활성 — '이전' 이 첫 카드일 때, '정답 보기' 가 뒷면 없는 카드일 때 */
.sc-btn:disabled, .sc-btn.is-disabled{
  border-color:#CACAD7; box-shadow:0 4px 0 #D9D9D9; color:#999; cursor:default; background:#fff;
}
.sc-btn:disabled img, .sc-btn.is-disabled img{ opacity:.4; }

/* ── 카드 ── */
.sc-stage{ display:flex; flex-direction:column; align-items:center; padding:100px 0 40px; gap:16px; }
.sc-card{
  width:var(--sc-card-w); aspect-ratio:var(--sc-ratio);
  border:8px solid var(--g-line); border-radius:4px;
  /* box-shadow 여야 한다 -- filter:drop-shadow() 는 none 이 아닌 filter 라 이 요소를
     스스로 새 렌더링 컨텍스트로 만들고, 그러면 transform-style:preserve-3d 가 자식에게
     안 먹는다(스펙: filter 가 none 이 아니면 그 요소는 흡사 preserve-3d 를 강제로
     flat 으로 되돌리는 그룹핑 컨텍스트가 된다). 결과는 backface-visibility:hidden 무력화 --
     뒤집으면 뒷면이 아니라 거울상 앞면이 보인다(2026-08-26 회귀, 브라우저 실측으로 확인).
     수치는 옛 card.css 와 같다. */
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  box-sizing:border-box; position:relative; cursor:pointer;
  /* 뒤집기 연출은 예전 card.css 그대로 가져온다. 시안은 정지 화면이라 연출을 규정하지
     않는데, 지금 동작을 바꿀 이유가 없다. 두 면이 같은 자리에 겹쳐 있으므로 이 세 줄
     (preserve-3d · rotateY · backface-visibility) 이 빠지면 앞뒤가 동시에 보인다. */
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.1,.2,1);
}
.sc-card.is-flipped{ transform:rotateY(180deg); }
.sc-face{
  position:absolute; inset:0; background:#fff;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  padding:32px; box-sizing:border-box;
  backface-visibility:hidden;
  --face-bg:#fff;   /* 안쪽 .eg[data-label] 라벨이 배경색 위에 오려낸 듯 보이려면 현재 면 배경을 알아야 한다 */
}
.sc-face--back{ transform:rotateY(180deg); }
/* 표지면은 face 를 통째로 덮는다 — 머리말·구분선·마스코트가 비쳐서는 안 된다. */
.sc-face:has(.sc-cover) .sc-mascot{ display:none; }
.sc-face--back{ background:#F2F8EA; --face-bg:#F2F8EA; }   /* 여섯 학년 공통 */
/* 예전 card.css 의 `.face.back .mascot{opacity:.5}` 는 가져오지 않는다 —
   시안의 정답면(2909:18930)은 마스코트가 흐리지 않다. */
/* 마스코트는 하단 오른쪽에 겹쳐 놓고 본문은 하단까지 사용한다.
   본문 오른쪽 패딩은 마스코트 120px + 간격 16px을 확보한다. */
.sc-mascot{position:absolute; right:32px; bottom:32px; width:120px; height:120px;}
.sc-face__main{ width:100%; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.sc-head{ display:flex; align-items:center; justify-content:space-between; width:100%; white-space:nowrap; }
.sc-head__topic{
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:20px; line-height:28px; letter-spacing:-0.5px; color:var(--g-title);
}
.sc-head__meta{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:#767676;
}
/* 제목 밑 구분선 — 시안: 머리말과 8px 띄우고 2px */
.sc-rule{ width:100%; height:2px; background:var(--g-rule); margin-top:8px; flex:none; }
/* ⚠ min-height:0 은 장식이 아니다. .sc-body 는 .sc-face__main(고정 높이) 안의 flex
   자식이라 flex-shrink 로 줄어들어야 하는데, flex 자식의 기본 min-height 는 auto
   (=제 내용의 자연 높이 밑으로는 못 줄어든다) 라서 이게 없으면 넘치는 내용이 있어도
   .sc-body 자신의 clientHeight 가 항상 scrollHeight 와 같아진다(둘 다 "내용 그대로"
   이므로) — el.scrollHeight > el.clientHeight 로 넘침을 재는 autoColumns() 와
   viewer.js 의 모든 육안대조 스윕이 무엇을 넣어도 "넘침 없음"만 보고하게 된다
   (2026-08-26 최종 브랜치 리뷰에서 발견 — 표지 뒷면 차례 목록이 카드 밖으로 실제로
   192px 넘쳤는데 scrollHeight==clientHeight 로 안 잡혔다). overflow 는 여전히 visible
   이라 이 한 줄이 화면에 새로 잘라내는 건 없다 — 다만 clientHeight 가 비로소 "진짜
   배정된 높이"를 보고하게 되어 넘침 검사가 실제로 작동한다. */
.sc-body{
  width:100%; flex:1 1 auto; min-height:0; margin-top:20px;
  padding-right:var(--mascot-gap);
  font-family:'Pretendard-SemiBold', sans-serif;
  font-size:var(--body-fs, 24px); line-height:1.42; letter-spacing:-0.6px; color:#111;
  box-sizing:border-box;
}
.sc-mascot__img{ width:120px; height:120px; display:block; }

/* ── 하단 조작 바 — 카드와 같은 폭. 왼쪽 이전/카운터/다음 묶음 ↔ 오른쪽 정답 보기 ── */
.sc-controls{
  width:var(--sc-card-w); display:flex; align-items:center; justify-content:space-between;
}
.sc-controls__nav{ display:flex; align-items:center; gap:16px; }
.sc-counter{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; color:#767676;
}

/* ── 표지면 ── */
.sc-cover{
  position:absolute; inset:0; background:var(--g-cover);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:16px 32px; box-sizing:border-box;
}
/* .sc-cover 접두를 붙인 이유: coverFrontHTML() (viewer.js) 이 표지 카드를 본문 글자크기
   자동조절 대상인 .sc-body 안에 넣는다. 접두 없는 .sc-cover__title 은 특이도(0,1,0)라
   .sc-body p{font-size:1em}(0,1,1) 에 져서 56px 지정이 24px 로 짓눌렸다(2026-08-26 회귀,
   런타임 matched-rules 로 확인). !important 대신 특이도를 올려 이긴다. */
.sc-cover .sc-cover__title{
  margin:0; width:100%; text-align:center;
  font-family:'RiaSans-ExtraBold', 'Pretendard-ExtraBold', sans-serif;
  font-size:56px; line-height:normal; letter-spacing:-1.4px;
  color:#fff; text-shadow:0 4px 0 #000; word-break:break-word;
}
/* coverFrontHTML() (viewer.js) 이 그리는 표지 그림 — 830×500 카드가 좁은 화면에서
   --sc-card-w 만큼 줄어들면 325×280 고정 크기가 카드보다 커질 수 있다. 표지 그림엔
   시안에 없던 요소라 크기 규정이 없었는데, 인쇄 카드(95mm)에도 같은 마크업이 들어가므로
   방치하면 인쇄에서 넘친다. */
.sc-cover__art{ max-width:100%; height:auto; }

/* 표지 뒷면 — "차례" 목차(1-2·2-2 의 표지 카드만; 3-2 는 안 쓴다). 번호는 CSS 카운터로
   자동 매긴다. [합집합] 1-2/card.css:296-305 · 2-2/card.css:488-497 에 동일하게 있던
   규칙인데 viewer.css 통합 때 빠졌다(2026-08-26 최종 브랜치 리뷰에서 발견) — 그때까지는
   브라우저 기본 <ol>(십진 마커·40px 들여쓰기·본문 크기)로 나왔다. --unit-light/--unit-deep
   은 body.sc-viewer 에 이미 별칭이 있으므로 그대로 쓴다. */
.cv-list{margin:.2em 0 0; padding:0; list-style:none; text-align:left; font-size:.92em;}
.cv-list li{margin:.18em 0; padding-left:1.5em; position:relative; color:#111;}
.cv-list li::before{
  counter-increment:cvitem; content:counter(cvitem);
  position:absolute; left:0; top:.05em;
  width:1.15em; height:1.15em; border-radius:50%;
  background:var(--unit-light); color:var(--unit-deep);
  font-size:.8em; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.cv-list{counter-reset:cvitem;}


/* ============================================================
   오프스크린 측정자(.body) — viewer.js 의 makeMeasurer() 가
   "sc-body" 가 아니라 "body" 라는 클래스로 재는 div 를 만든다(수정 금지 파일).
   .sc-body 와 같은 글꼴·자간·줄간격·오른쪽 여백을 안 주면 여기서 잰 글자 크기가
   실제 화면(.sc-body)보다 커져 카드 밖으로 넘친다 — 그래서 같은 값을 한 번 더 선언한다.
   (font-size·width·height 는 JS 가 인라인으로 넣으므로 여기서 안 다룬다.)
   ============================================================ */
.body{
  font-family:'Pretendard-SemiBold', sans-serif;
  line-height:1.42; letter-spacing:-0.6px;
  padding-right:var(--mascot-gap);
}
/* 글자 크기 측정 단계에서는 오래된 2단 허용치를 기준 크기 탐색에만 사용한다.
   실제 화면은 항상 1단이며, 넘치는 면은 fitSingleColumn()이 개별 축소한다. */
.sc-body.two, .body.two{ column-count:2; column-gap:2em; column-fill:auto; }
.sc-body:not(.two) > .q, .body:not(.two) > .q{ margin-right:calc(var(--mascot-gap) * -1); }
.sc-body p, .body p{ margin:0 0 .5em; font-size:1em; }
.sc-body .q, .body .q{ font-size:1em; font-weight:700; margin-bottom:.75em; letter-spacing:-.2px; }
/* [합집합] 1-2 에만 있던 .seq3 를 목록에 추가(2-2·3-2 는 안 씀) */
.sc-body p, .sc-body table, .sc-body .seq, .sc-body .seq3, .sc-body .numcards, .sc-body .chips,
.sc-body .hint, .sc-body .eg, .sc-body .clock, .sc-body .grid, .sc-body .pair,
.body p, .body table, .body .seq, .body .seq3, .body .numcards, .body .chips,
.body .hint, .body .eg, .body .clock, .body .grid, .body .pair{ break-inside:avoid; }


/* ============================================================
   카드 본문 안쪽 요소 — 1-2 · 2-2 · 3-2 의 card.css 세 벌 합집합.
   구 셀렉터의 `.body X` 접두는 뗀다 — 이제 클래스 이름 자체가 이 페이지 안에서
   유일해서 접두가 없어도 안전하고, 화면(.sc-body)·측정자(.body)·인쇄(.pcard .body)
   세 컨테이너 어디서 와도 같은 모양으로 그려진다.
   구 색 변수(--unit/--unit-deep/--unit-light/--ink)는 학년 무관 고정값이었던 게 아니라
   "단원 색" 개념 자체가 폐기됐다 — 학년 색 --g-line/--g-title/--g-rule 로 옮긴다.
   ============================================================ */

/* 한 줄에 문항이 두세 개일 때 — 줄마다 시작 위치가 같도록 격자로 배치 (makePairGrids, viewer.js) */
.pair{
  display:grid; justify-content:start; align-items:center;
  column-gap:2.8em;      /* ← 문항 사이 간격. 더 띄우려면 숫자를 키우세요 */
  row-gap:.4em; margin:.35em 0 .6em;
}
.pair > span{white-space:nowrap;}

.equiv-list{display:flex; flex-direction:column; align-items:flex-start; row-gap:.45em; width:max-content; max-width:100%; margin:.35em 0 .6em;}
.equiv-row{display:flex; gap:1em; align-items:center;}
.equiv-expr{display:inline-flex; align-items:center; white-space:nowrap;}
.equiv-expr .op,.math-op{display:inline-block; margin:0 .16em;}
.equiv-arrow{flex:none;}

.hint{
  margin-top:.7em; font-size:.82em; color:#111; line-height:1.65;
  background:#fff; border-left:.25em solid var(--accent); padding:.5em .75em; border-radius:0 .55em .55em 0;
}

/* ---------- 빈칸 / 정답 ---------- */
.bl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.9em; height:1.75em; line-height:1;
  border:2px solid #BFBFBF; border-radius:.45em; background:#fff;
  padding:0 .4em; margin:0 .06em; vertical-align:middle; font-weight:800;
}
.bl.on{border-color:var(--answer); color:var(--answer);}
.bl.sm{min-width:1.9em;}          /* 기호·한 글자 답처럼 짧은 답용 좁은 박스 */
.bl.one-digit{width:1.75em; min-width:1.75em; padding-left:0; padding-right:0;} /* 선택 적용하는 한 자리 숫자 전용 답칸 */
.bl.wide{min-width:4.6em;}        /* 네 자리 수처럼 긴 답을 쓰는 넓은 박스 */
.bl[data-ghost]::before{content:attr(data-ghost); visibility:hidden;}
.ans{color:var(--answer); font-weight:800;}
/* 보조 문장도 현재 표시 크기인 본문 크기를 유지한다. */
.small{font-size:1em; color:#111;}

/* ---------- 두 자리 세로셈 ----------
   연산자·십의 자리·일의 자리를 고정 열로 두고 답칸 내부도 같은 두 숫자 열을 쓴다. */
.vsum2{
  width:5.6em; margin:.7em 0 0; font-size:1.25em; font-weight:800;
  display:grid; grid-template-columns:.9em 1em 1em; column-gap:.3em; justify-content:end;
}
.vsum2 .vs-row,
.vsum2 .vs-ans{
  display:contents;
}
.vsum2 .op{text-align:left;}
.vsum2 .d{text-align:center;}     /* 폭은 격자 열이 정한다 */
.vsum2 .vs-blue{color:#2F6FDB;}
.vsum2 .vs-red{color:var(--answer);}
.vsum2 .vs-line{
  grid-column:2 / 4; justify-self:center;
  border-top:2px solid #333; width:3.4em; margin:.3em 0 .5em;
}
.vsum2 .vs-ans .bl{
  grid-column:2 / 4; justify-self:center; width:3.4em; min-width:3.4em; padding:0;
  display:grid; grid-template-columns:1em 1em; column-gap:.3em; justify-content:center;
}

/* 흐린 망 라벨 — 인디자인 원고의 '시작한 시각 / 끝낸 시각' 회색 박스 */
.lbl{
  display:inline-block; padding:.15em .75em; border-radius:.45em;
  background:#E8E8E8; color:#111; font-size:.88em; font-weight:700;
  letter-spacing:-.2px; margin-right:.3em; vertical-align:middle;
}
.ghost{visibility:hidden;}

/* 밑줄 친 숫자 — 밑줄만 빨강 */
u{
  text-decoration:underline; text-decoration-color:var(--answer);
  text-decoration-thickness:.15em; text-underline-offset:.18em; font-weight:800;
}

/* 부등호 자리 동그라미 */
.cir{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.95em; height:1.95em; line-height:1;
  border:2px solid #BFBFBF; border-radius:50%; background:#fff;
  margin:0 .35em; vertical-align:middle; font-weight:800;
}
.cir.on{border-color:var(--answer); color:var(--answer);}
/* [합집합] 1-2 전용 — 4단원 교정에서 부등호를 한 단계 키움 */
.cir.big{ width:2.15em; height:2.15em; font-size:1.15em; }

/* ---------- 디지털시계 표시 [1-2, 260810] ---------- */
.digiclock{
  display:inline-block; background:#16213e; color:#3ef0ff;
  font-family:"Courier New", Consolas, monospace; font-weight:800;
  font-size:1.3em; letter-spacing:.05em;
  padding:.22em .45em; border-radius:.3em; margin:.35em 0 .4em;
  box-shadow:inset 0 0 6px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.12);
  text-shadow:0 0 5px rgba(62,240,255,.75);
}
.digiclock .colon{animation:none;}

/* ---------- 보기 · 조건 상자 ---------- */
/* isolation은 아래 라벨의 z-index:-1과 한 쌍이다. 제거하면 라벨이 카드 배경 뒤로 숨는다.
   각 변형의 패딩은 기존 총 세로 여백을 보존하면서 위아래에 균등 분배한다. */
.eg{
  --eg-border-width:2px;
  position:relative; isolation:isolate; margin:.8em 0 .7em; padding:.725em 1.1em;
  border:var(--eg-border-width) solid #BDBDBD; border-radius:.5em;
  font-size:.94em; line-height:1.75; color:#111;
  /* 보기 상자는 대개 수를 줄줄이 늘어놓는 자리다. Pretendard 의 기본 숫자는 비례폭이라
     '1' 이 좁아(7:15 = 41.9px, 8:05 = 48.3px) 줄이 바뀌면 열 시작이 어긋난다 — 같은 글꼴이
     가진 고정폭 숫자(tnum)를 켜서 맞춘다. 글꼴을 바꾸는 게 아니다. 2026-09-14 */
  font-variant-numeric:tabular-nums;
  /* 왼쪽은 고정, 오른쪽만 5 mm 안으로 (박스 가로 길이 5 mm 줄임) */
  width:fit-content; max-width:calc(100% - 5mm);
  /* 카드마다 상자 가로 길이가 들쭉날쭉하지 않도록 최소 너비를 정해 둡니다.
     내용이 길면 이보다 넓어지고, 카드 폭을 넘지는 않습니다.
     상자를 더 넓게/좁게 하려면 21em 값을 바꾸세요. (5 mm 감소 반영) */
  min-width:min(calc(21em - 5mm), calc(100% - 5mm));
}
/* 문단 기본 여백보다 보기 여백을 우선한다. */
.sc-body .eg, .body .eg{margin:.8em 0 .7em;}
/* 보기·조건 상자의 각 항목 — 기호와 글자를 나란히 두어,
   줄이 넘어가도 글자가 정확히 첫 글자 아래에서 시작합니다 */
.li{display:flex; align-items:baseline; gap:.32em;}
.li + .li{margin-top:.18em;}
.li .mk{flex:none;}
.li .tx{flex:1 1 auto; min-width:0;}
/* 상자 안 항목을 한 줄에 2개씩(cols2) 또는 3개씩(cols3) 배치합니다.
   상자가 세로로 길어지지 않고, 각 줄의 시작 위치가 나란히 맞습니다.
   칸 사이를 더 띄우려면 column-gap 값을 키우세요. */
.eg .cols2, .eg .cols3{display:grid; column-gap:1.7em; row-gap:.3em;}
.eg .cols2{grid-template-columns:repeat(2, max-content);}
.eg .cols3{grid-template-columns:repeat(3, max-content);}
.eg .cols2 .li + .li, .eg .cols3 .li + .li{margin-top:0;}
/* 조사 '자료' 상자 — 낱말 하나하나가 자료 한 건이라(사과 사과 배 귤 …) 문장보다 넓게
   띄워야 몇 건인지 세어진다. 데이터에 스페이스를 여러 개 넣어도 HTML 이 하나로 합치므로
   여기서 벌린다 — &nbsp; 로 벌리면 안 된다(viewer.js 의 NBSP_SPLIT 이 답칸 격자로 쪼갠다). */
.eg[data-label="자료"]{ word-spacing:var(--token-gap); }
/* 라벨은 테두리 중앙에 놓고 자체 줄 높이를 사용한다.
   상자 안 stacking context에서 본문보다 뒤에 그려 글자를 덮지 않는다. */
.eg[data-label]::before{
  content:attr(data-label); position:absolute; top:calc(var(--eg-border-width) / -2); transform:translateY(-50%);
  left:.85em; padding:0 .45em; line-height:1; z-index:-1;
  background:var(--face-bg,#fff); font-size:.76em; font-weight:800; letter-spacing:2px; color:#111;
}
/* [합집합] 세 책이 각자 다른 방식(max-width 축소 / width:auto+inline-block / width:fit-content)
   으로 "내용 폭에 맞추기" 를 구현했다 — 목적이 같아 한 규칙으로 합친다. */
.eg.fit{ min-width:0; width:fit-content; max-width:calc(100% - 3mm); padding:.625em .9em; }
/* [합집합] 1-2 전용 — 보기 상자 안 항목을 2열로 나란히 */
.eg.g2{ display:grid; grid-template-columns:repeat(2, max-content);
        column-gap:1.5em; row-gap:.25em; align-items:baseline; }
.eg.g2 .li + .li{ margin-top:0; }
.number-groups{word-spacing:var(--token-gap);}

/* 보기·조건 상자 오른쪽에 '이면 □' 같은 글을 붙일 때 (상자 아랫줄에 맞춤) */
.side{display:flex; align-items:flex-end; gap:.9em; flex-wrap:wrap;}
.side.top{align-items:flex-start;}
.side > .eg{margin-bottom:0;}
.side > p{margin-bottom:.35em;}

/* ---------- 수 모형 · 동전 칩 ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.28em; margin:.45em 0 .65em;}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.2em; height:2.2em; padding:0 .6em; border-radius:999px;
  border:2px solid #9AA7B4; background:#E8EEF4; color:#111; font-size:.72em; font-weight:800;
}
.chip.k{border-color:var(--g-line); background:var(--g-rule); color:var(--g-title);}

/* ---------- 구슬 · 사탕 그림 (모으기/가르기 카드) [1-2, 260810 교정 반영] ---------- */
.beads{display:flex; flex-wrap:wrap; gap:.3em; margin:.5em 0 .6em;}
.bead{
  display:inline-block; position:relative; width:1.5em; height:1.5em; border-radius:50%;
  border:2px solid rgba(0,0,0,.15); flex:none;
}
.bead.red{background:#E85D5D; border-color:#C23F3F;}
.bead.yellow{background:#FBD96B; border-color:#E9B93C;}
.bead.blue{background:#4E8FE0; border-color:#3568B0;}
.bead .slash{
  position:absolute; left:50%; top:50%; width:135%; height:2.6px;
  transform:translate(-50%,-50%) rotate(-40deg); border-radius:2px;
}
.bead .slash.red{background:#E23B3B;}
.bead .slash.blue{background:#2E6FD9;}
.bead.candy{background:var(--accent); border-color:var(--accent-deep);}
.bead.candy.eaten{background:none; border:2px dashed #C9C9C9; position:relative;}
.bead.candy.eaten::after{
  content:""; position:absolute; inset:0; margin:auto; width:120%; height:2px;
  background:#C23F3F; transform:rotate(45deg); top:50%;
}
/* 10이 되는 짝 강조 — 괄호 대신 파란색으로 표시 [1-2, 260810 교정 반영] */
.tenpair{color:#2E6FD9; font-weight:800;}

/* ---------- 수 배열 (뛰어 세기) ---------- */
.seq{display:flex; flex-wrap:nowrap; gap:.33em; align-items:center; margin:.35em 0 .6em;}
/* 공통 기준 글자 크기를 잴 때(측정자)는 예전처럼 접어서 잰다. 접지 않으면 긴 수 배열 한 장이
   가로로 넘쳐 그 단원 카드 전체의 기준 크기를 끌어내린다(1-2/u5: 22.86→21.63px). 화면에서
   넘치는 그 면은 fitSingleColumn() 이 따로 줄인다. */
.sc-measure .seq{flex-wrap:wrap;}
.seq b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.7em; height:2.1em; line-height:1; padding:0 .45em;
  border:2px solid #DDD; border-radius:.55em; background:#fff; font-size:.94em;
}
.seq b.a{border-color:var(--answer); color:var(--answer);}
.seq span{color:#BBB; font-weight:800;}
.seq.sm{gap:.18em;}
.seq.sm b{min-width:2.6em; padding-left:.25em; padding-right:.25em;}

/* ---------- □-수-□ 3칸 격자 (.seq3) ----------
   [합집합] 2-2·3-2 도 같은 이름의 규칙을 갖고 있었지만 실제로 쓰는 단원 데이터가 없다
   (grep 결과 seq3 는 1-2/u1.js 에만 등장) — 1-2 구현만 옮긴다.
   `<b class="d">` 는 앞에 이음선을 그린다(첫 칸 제외). */
.seq3{
  --seq-w:3.7em; --seq-gap:1.35em; --seq-line:.95em;
  --seq-number-scale:.94; --seq-border:2px;
  display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, var(--seq-w)));
  column-gap:var(--seq-gap); row-gap:.3em;
  justify-content:start; max-width:100%; margin:.35em 0 .6em;
  /* 칸 아래 라벨을 제 칸 가운데 두려면 삐져나갈 자리가 필요하다 — 아래 .seq3 i 참고.
     ⚠ 이 여백은 격자 내용을 오른쪽으로 민다. 인쇄에서 첫 상자가 본문 왼쪽 기준
     0px → 10.13px 로 옮겨간다(실측). 라벨을 가운데 두는 대가이고, 본문(.body)은 좌우
     padding 이 0 이고 overflow:hidden 이라 음수 마진으로 상쇄할 자리가 없다. */
  padding-inline:.8em;
}
.seq3 b{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:2.1em; line-height:1;
  border:var(--seq-border) solid #DDD; border-radius:.55em; background:#fff;
  font-size:calc(1em * var(--seq-number-scale));
}
.seq3 b.d::before{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  /* 격자 gap은 부모 글자 크기 기준이다. 작은 숫자 크기를 역산하고,
     위치 기준인 padding edge에서 테두리 바깥까지 보정해야 눈에 보이는 여백이 같다. */
  left:calc((var(--seq-gap) / var(--seq-number-scale) + var(--seq-line)) / -2 - var(--seq-border));
  width:var(--seq-line); height:2px; background:#BBB; border-radius:1px;
}
.seq3 b.a{border-color:var(--answer); color:var(--answer);}
/* 칸 아래 라벨(「1만큼 더 작은 수」)은 제 칸 **가운데**에 둔다. 라벨이 칸(--seq-w:3.7em)보다
   넓어서 좌우로 (라벨폭-칸폭)/2 만큼 삐져나가는데, 첫 칸에서는 그게 격자 왼쪽 밖 —
   인쇄 카드 본문은 overflow:hidden 이라 그대로 잘린다. 그래서 위 .seq3 에 좌우 여백을 뒀다.
   실측(2026-09-15, 인쇄 카드 10장, 1em=12.7px): 여백 0 이면 7.77px 잘리고, .6em 에서
   0.17px 모자라 .62em 부터 안 잘린다. .8em 은 거기에 여유를 둔 값이다.
   ⚠ 라벨이 더 길어지면 이 여백으로 모자랄 수 있다 — tests/e2e 의
     「.seq3 라벨이 칸 가운데에 있고 격자 밖으로 안 나간다」가 그때 잡는다.
     값을 늘리기 전에 그 테스트로 얼마나 모자란지부터 잴 것. */
.seq3 i{font-style:normal; font-size:.85em; color:#111; white-space:nowrap; justify-self:center;}

/* ---------- 표 ---------- */
/* max-width 로 표가 카드 밖으로 나가지 않게 막습니다.
   칸이 많아 자리가 모자라면 칸 너비가 줄어들 뿐 잘리지는 않습니다. */
table.pv{border-collapse:collapse; margin:.35em 0 .6em; font-size:.9em; max-width:100%;}
table.pv th,table.pv td{border:2px solid #CFCFCF; padding:.35em .8em; text-align:center;}
table.pv th{background:var(--g-rule); color:var(--g-title); font-size:.85em;}
table.pv.place-value-digits th{white-space:nowrap;}
table.pv.times-table{table-layout:fixed; width:96%;}
table.pv.times-table th,table.pv.times-table td{padding:.35em .25em;}
table.pv td.a, table.pv th.a{color:var(--answer); font-weight:800;}
table.pv td:empty::after, table.pv th:empty::after{content:"\00a0";}
table.pv td.mr, table.pv th.mr{background:#BFE0F5; color:#111; font-weight:800;}  /* 표시된 칸 */

/* 빈 곱셈표 — 칸이 정사각형 */
table.pv.sq{table-layout:fixed;}
table.pv.sq th, table.pv.sq td{width:1.9em; height:1.9em; padding:0; text-align:center; font-size:.9em;}
table.pv.sq td:empty::after, table.pv.sq th:empty::after{content:"";}
/* [3-2] 세로셈 밑줄 — × 있는 줄(둘째 줄) 아래에 계산 구분선 */
table.pv.ul tr:nth-child(2) td{border-bottom:2px solid #111;}
/* 접는 선 — 칸 경계를 살짝 넘겨 그려서 대각선이 한 줄로 이어집니다.
   굵기는 --dline-half(선 두께의 절반) 한 곳에서 정합니다 — 네 군데에 같은 값을 적는
   구조라 손으로 고치면 하나를 빠뜨려 띠가 어긋납니다. 2026-09-14: 1.1px → 80%(0.88px).
   px 고정이라 인쇄 카드에서도 같은 굵기로 나갑니다(별도 인쇄 보정 없음). */
table.pv td.dline{position:relative; --dline-half:.88px;}
table.pv td.dline::after{
  content:""; position:absolute; left:-2px; right:-2px; top:-2px; bottom:-2px;
  pointer-events:none;
  /* 띠는 축과 수직으로 생기므로, ↘ 선을 그리려면 축을 'to top right' 로 잡습니다 */
  background-image:linear-gradient(to top right,
    transparent calc(50% - var(--dline-half)), #C79A2E calc(50% - var(--dline-half)),
    #C79A2E calc(50% + var(--dline-half)), transparent calc(50% + var(--dline-half)));
}
/* 칸이 많은 표 — 좌우 여백을 줄여 카드 안에 들어가게. [합집합] 1-2 값(테두리도 얇게)이
   가장 넓은 손질이라 이걸 기준으로 삼는다. */
table.pv.narrow{margin-bottom:.35em;}
table.pv.narrow th, table.pv.narrow td{padding:.32em .62em; border-width:1px;}
/* 규칙을 수로 나타내는 표: 열이 늘면 기존 칸을 압축하지 않고 표 전체가 한 칸만큼 늘어난다. */
table.pv.pattern-number{width:max-content; table-layout:fixed;}
table.pv.pattern-number th, table.pv.pattern-number td{
  width:2.65em; min-width:2.65em; padding:.32em 0;
}

/* [합집합, 2-2→3-2 로 통일된 규칙] 표 제목 · 열 폭 동일 · 합계 열 이중선 */
table.pv caption, table.grid caption{
  caption-side:top; text-align:center; font-weight:800;
  font-size:.86em; color:var(--g-title); padding:0 0 .28em;
}
table.pv.eqw{table-layout:fixed; width:100%;}
table.pv.eqw th:first-child, table.pv.eqw td:first-child{width:6.6em;}
table.pv.eqw th, table.pv.eqw td{padding:.35em .25em; overflow-wrap:break-word;}
table.pv.sum th:last-child, table.pv.sum td:last-child{border-left:4px double #9A9A9A;}
/* [2-2] 덧셈표·곱셈표처럼 칸이 정사각형에 가까운 표 */
table.pv.sqt{table-layout:fixed; width:auto; margin-left:auto; margin-right:auto;}
table.pv.sqt th, table.pv.sqt td{width:2.5em; height:2.5em; padding:0; text-align:center;}

@media screen{
  .times-features{white-space:nowrap;}
}

/* ---------- 나눗셈 세로셈(긴 나눗셈) 격자 [3-2 전용] ----------
   .longdiv > table 안에 tr.ld-q(몫 줄) · tr.ld-sub(뺄셈 결과 줄, 위에 계산선)를 두고,
   맨 왼쪽 열에 class="ld-div"를 주면 나누는 수 칸이 되어 세로선이 생깁니다. */
.longdiv{display:inline-block; margin:.4em 0 .6em;}
.longdiv table{border-collapse:collapse; font-size:1em;}
.longdiv td{
  width:1.7em; height:1.7em; text-align:center; padding:0;
  font-weight:800; color:#111;
  border:1px dotted #C4C4C4;
}
.longdiv td.a{color:var(--answer);}
.longdiv tr.ld-n td.ld-div{border-right:2px solid #111;}
.longdiv tr.ld-q td:not(.ld-div){border-bottom:2px solid #111;}
.longdiv tr.ld-sub td:not(.ld-div){border-top:1.6px solid var(--answer);}
.longdiv td .bl{min-width:1.2em;}

/* [3-2] 그림그래프 — 범례를 표 오른쪽 아래에 */
.gwrap{display:block; max-width:100%;}
.gwrap > table{margin-bottom:.1em;}
.gwrap .legend{justify-content:flex-end; margin:.05em 0 .45em;}

/* ---------- ○ 그래프 (익힘책 형태) [2-2 전용] ---------- */
.ograph{display:block; margin:.35em 0 .5em;}
.ograph table{border-collapse:collapse; margin:0 auto; font-size:.86em;}
.ograph th, .ograph td{border:2px solid #CFCFCF; text-align:center;}
.ograph td{min-width:2.1em; height:1.75em; padding:0 .2em; color:var(--g-title); font-weight:800;}
.ograph th{background:var(--g-rule); color:var(--g-title); font-weight:700; padding:.18em .45em;}
.ograph th.onum{width:auto; min-width:2.6em;}
.ograph .oname{font-size:.88em; white-space:nowrap; padding:.22em .5em;}
.ograph .gcap{text-align:center; font-weight:800; font-size:.86em; color:var(--g-title); padding-bottom:.28em;}
/* 왼쪽 위 모서리 칸 — 대각선으로 나눠 세로축/가로축 이름 표시 */
.ograph th.corner{position:relative; padding:0; height:3.1em; white-space:nowrap; vertical-align:middle;}
.ograph th.corner::after{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;
  background-image:linear-gradient(to bottom right,
    transparent calc(50% - 1px), #CFCFCF calc(50% - 1px),
    #CFCFCF calc(50% + 1px), transparent calc(50% + 1px));
}
.ograph th.corner .cy{position:absolute; left:.3em;  top:.30em;    font-size:.68em; line-height:1.1;}
.ograph th.corner .cx{position:absolute; right:.3em; bottom:.30em; font-size:.68em; line-height:1.1;}

/* ---------- 쌓기나무 그림 [2-2 전용] ---------- */
.blockfig{display:flex; align-items:flex-end; justify-content:center;
  justify-content:safe center; gap:.4em; margin:.4em 0 .5em; max-width:100%;}
.blockfig .cubestack{display:block; flex:none;}
.blockfig .dots{align-self:center; font-weight:800; color:#111; padding:0 .15em;}
/* 기존 표시 크기에서 10% 확대. sym110은 기존 1.1em의 1.1배이며,
   shapes 문단은 기존 1em의 1.1배다. 태그(p/span/div)에 관계없이 같은 크기를 쓴다. */
.sym110, .sc-body .sym110, .body .sym110{font-size:1.21em;}
.shapes, .sc-body .shapes, .body .shapes{font-size:1.1em; letter-spacing:.06em;}
/* 글꼴 글리프가 아닌, 모서리가 완전히 각진 네모 모양 */
.shape-square{
  display:inline-block; width:.78em; height:.78em; background:currentColor;
  /* ■ 는 글리프가 아니라 네모 상자라, 같은 줄에 섞여 나오는 ● 같은 **글자**와 높이가 저절로
     맞지 않는다(규칙 표 1-2/u5 에서 보인다). 잉크 중심을 맞추는 값이 -.03em 이다.
     ⚠ 재는 법: 캔버스 measureText 로 재지 말 것 — 폰트가 캔버스에서 다르게 잡혀 부호까지
     틀리게 나온다(2026-09-14 에 이걸로 .082em 을 넣었다가 ■ 가 2.5px 떠올랐다).
     실제로 그려진 픽셀의 잉크 상하한을 재고, 폰트를 200px 로 키워 기기픽셀 반올림을
     지운 뒤 값을 훑어 0 이 되는 지점을 고른다. */
  border-radius:0; vertical-align:-.03em;
}
/* 부등호(>, <)를 크게 [1-2] */
.sym{ font-size:1.4em; font-weight:800; line-height:1; vertical-align:-.08em; }
/* 발문 옆 wide 여백 — .q 와 같은 방식으로 씨익이 자리까지 넓혀 한 줄에 넣는다 [2-2] */
.sc-body:not(.two) > .wide, .body:not(.two) > .wide{margin-right:calc(var(--mascot-gap) * -1);}
.wide{word-break:keep-all;}
/* 수학식 연산 기호(+ × 등) 서체 [2-2] */
.mop{font-family:"Cambria Math","Latin Modern Math","Times New Roman",Times,serif; font-weight:700; font-size:1.2em; line-height:1;}

/* ---------- 보기 카드(수 카드 · 낱말 카드) ---------- */
.numcards{display:flex; gap:.42em; flex-wrap:wrap; margin:.45em 0 .55em;}
/* 수 카드 여러 줄을 감싸면, 폭이 되면 가로 한 줄로 나란히,
   글자가 커서 안 들어가면 자동으로 줄바꿈되어 세로로 쌓이며 각 줄이 가운데 정렬됩니다. */
.rows-wrap{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5em 1em;}
.rows-wrap .numcards{margin:0;}
.numcards i{
  font-style:normal; position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4em; height:2.8em; padding:0 .35em; border-radius:.55em;
  /* 수 카드 색은 모든 학년·단원이 공통 노랑/주황을 쓴다 — 단원 UNIT_CSS 에 색을 두지 않는다
     (e2e '수 카드 색과 테두리는 모든 학년·단원에서 공통값을 유지한다' 가 지킨다). */
  background:var(--accent); border:2px solid var(--accent-deep);
  font-weight:800; font-size:.92em; color:#5A4300;
}
.numcards i.pick{background:var(--g-line); border-color:var(--g-title); color:#fff;}
/* 한 장에 수가 여럿 든 카드(「6 12 18 20」) — 어느 수까지가 한 덩어리인지 세어야 하므로
   낱말 사이를 벌리고, 카드 안에서는 줄을 바꾸지 않는다. 한 수만 든 카드에는 띄울 공백이
   없어 아무 영향이 없다.
   공용 CSS 에 둔다 — 단원 UNIT_CSS 에 두면 반입기가 덮어쓴다. */
.rows-wrap .numcards i{ word-spacing:var(--token-gap); white-space:nowrap; }

.numcards i.circle::after{
  content:""; position:absolute; inset:-.22em -.12em;
  border:2.5px solid var(--answer); border-radius:50%;
}
.numcards i.tri::after{
  content:""; position:absolute; inset:-.3em -.2em -.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,5 97,95 3,95' fill='none' stroke='%23E23B3B' stroke-width='2.35' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* 답에 X 표시 [1-2] */
.numcards i.xmark::after{
  content:""; position:absolute; inset:-.18em -.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 90 M90 10 L10 90' fill='none' stroke='%23E23B3B' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* [3-2] 식 카드 — 내용이 달라도 가로 길이를 같게 */
.numcards.fx i{ width:5.4em; min-width:5.4em; padding:0 .15em; }

/* ---------- 시계 ---------- */
.clock{display:inline-block; width:7.5em; vertical-align:middle; margin:.2em .5em .2em 0;}
.clock-sm .clock{width:4.6em; margin:.2em 0;}
.clock svg{width:100%; height:auto;}

/* ---------- 격자 (규칙 찾기 · 그래프 · 무늬) ---------- */
table.grid{border-collapse:collapse; margin:.35em 0 .6em; font-size:.86em;}
table.grid th, table.grid td{border:1.5px solid #C9C9C9; padding:.25em .55em; text-align:center; min-width:2.2em;}
table.grid th{background:var(--g-rule); color:var(--g-title); font-weight:700;}
table.grid td.o{color:var(--answer); font-weight:800;}
table.grid td:empty::after, table.grid th:empty::after{content:"\00a0";}

/* ---------- 배열 그림 · 색 테이프 · 자 눈금 (곱셈-뺄셈, 길이재기) ---------- */
.itemgrid{ display:block; margin:.5em 0 .6em; break-inside:avoid; }
.itemgrid svg{ max-width:100%; height:auto; }
.tapefig{ display:block; margin:.35em 0 .55em; break-inside:avoid; }
.tapefig svg{ max-width:100%; height:auto; }
.ruleritem{ width:fit-content; margin:.25em 0 .6em; break-inside:avoid; }
.ruleritem .rr{ display:flex; align-items:center; gap:.4em; }
.ruleritem .rr .mk{ flex:none; font-weight:800; color:var(--g-title); }
.ruleritem .ra{ text-align:right; margin:.12em 0 0; }
.ruler{ display:inline-block; vertical-align:middle; }
.ruler svg{ max-width:100%; height:auto; }

/* ---------- 가르기 그림 (10을 만들어 더하기 / 10을 이용한 빼기) [1-2 전용] ----------
   조절 지점 — 두 갈래 사이 간격: .gr-kids 의 gap, 갈래 선 폭: .gr-arm 의 width */
.gr{ display:flex; align-items:flex-start; gap:.3em; margin:.5em 0 .6em; font-weight:800; }
.gr.gr-tight{ gap:.22em; }
.gr-tight .gr-fig{ position:relative; width:auto; min-height:calc(1.9em + 1.0em + .08em + 1.75em); }
.gr-tight .gr-arm{ position:absolute; top:1.9em; left:50%; transform:translateX(-50%); margin:0; }
.gr-tight .gr-kids{ position:absolute; top:calc(1.9em + 1.0em + .08em); left:50%; transform:translateX(-50%); white-space:nowrap; margin-top:0; }
.gr.gr-split-first{ margin-left:1.8em; }
.gr > .gr-term, .gr > .gr-op{ line-height:1.9em; white-space:nowrap; }
.gr > .gr-term{ display:inline-flex; align-items:center; justify-content:center; }
.gr-fig{ display:inline-flex; flex-direction:column; align-items:center; }
.gr-top{ display:inline-flex; align-items:center; justify-content:center;
         height:1.9em; }
.gr-arm{ display:block; width:4.3em; height:1.0em; }
.gr-kids{ display:flex; gap:.75em; margin-top:.08em; }
.gr .gv{ display:inline-flex; align-items:center; justify-content:center;
         min-width:1.9em; height:1.75em; font-weight:800; }

/* ---------- 구슬 묶음 그림 (규칙 찾아 개수 구하기) [1-2 전용] ---------- */
.figrow{ display:flex; align-items:flex-end; gap:1.1em; flex-wrap:wrap; margin:.5em 0 .6em; }
.dotset{ display:grid; grid-template-columns:repeat(4, auto); gap:.16em; }
.dotset i{ display:block; width:.7em; height:.7em; border-radius:50%;
           background:var(--accent); border:1.5px solid var(--accent-deep); }
.qbox{ display:inline-flex; align-items:center; justify-content:center;
       width:3.2em; min-width:3.2em; height:2.3em; border:2px dashed #BFBFBF; border-radius:.45em;
       font-weight:800; color:#111; }

/* 나눗셈 나머지 점 — 「9…2」 처럼 몫과 나머지 사이에 찍는다. … 는 바닥(베이스라인)에
   앉는 글자라 그냥 두면 숫자 아래로 처진다. 숫자의 잉크 중앙에 맞춰 올린다.
   공용 규칙이다(3-2/u2 가 31곳에서 쓴다) — 아래 단원 전용 구역 안에 두면 권 전용으로
   오해받는다. .bl 이 예전에 그렇게 잘못 놓인 적이 있다.
   실측(2026-09-15, 그려진 픽셀, 글자 200px): .25em 이면 7px 낮고 .32em 이면 7px 높아
   0 이 되는 값이 .285em 이다.
   ⚠ 캔버스 measureText 로 재지 말 것 — 위 .shape-square 주석 참고. */
.rdots{ display:inline-block; vertical-align:.285em; margin:0 .18em; letter-spacing:.04em; }

/* ---------- 3-2 4·5·6단원 잡다한 손질 ---------- */
/* 답 상자가 글자 줄에서 아래로 처져 보이던 문제 — 글자 중앙선에 맞춤. .bl 은 세 book 이
   전부 쓰는 기본 답칸 클래스라 book 스코프 없이 두면 1-2·2-2 답칸까지 같이 밀린다
   (2026-08-27 리뷰에서 지적 — 옛 3-2/card.css 에만 있던 규칙이었다). */
body[data-book="3-2"] .bl{ position:relative; top:-.09em; }
/* 한 줄 안에서 항목 사이를 살짝 띄울 때 (격자로 묶이지 않게 &nbsp; 대신 사용) */
.sp{ display:inline-block; width:1.6em; }
/* 글 속의 ○ 기호. **올리지 않는다** — 기준선에 그냥 두면 이미 맞는다. 예전 값
   vertical-align:.12em 은 거기서 더 띄워 ○ 가 글보다 위로 떠 보였다.
   재측정(2026-09-14, 그려진 픽셀의 잉크 상하한, 글자 200px): ○ 중심과 한글 중심의 차이가
   0.25px = 0.0013em — 사실상 0 이다.
   ⚠ 눈대중으로 값을 다시 넣지 말 것. 그리고 **캔버스 measureText 로 재지 말 것** — 위
   .shape-square 주석에 적힌 대로 폰트를 다르게 잡아 부호까지 틀린 값을 준다. 그려진
   픽셀을 재고, 폰트를 키워 기기픽셀 반올림을 지운 뒤 0 이 되는 지점을 고른다. */
.symid{ display:inline-block; vertical-align:baseline; }
/* "(확인)" 라벨 — 아랫줄 화살표가 윗줄 식 시작 위치와 맞도록 폭 고정 */
.lbl-chk{ display:inline-block; width:6.2em; }
.arw-s{ display:inline-block; margin-left:-.16em; }
/* 원 그림 */
.circfig{ display:block; margin:.15em 0 .25em; }
.circfig svg{ max-width:100%; height:auto; display:block; }
/* 원의 각 부분 이름 — 그림 둘레에 "원의 □" 라벨 배치 */
.circnames{
  display:grid; grid-template-columns:auto auto auto; grid-template-rows:auto auto auto auto;
  align-items:center; justify-items:start; column-gap:.05em; row-gap:.1em;
  justify-content:center;
  margin:.2em 0 .3em;
}
.circnames .cnfig{ grid-column:2; grid-row:1 / span 3; }
.circnames .cnfig svg{ display:block; max-width:100%; height:auto; }
.circnames .c1{ grid-column:1; grid-row:1; }
.circnames .c2{ grid-column:3; grid-row:2; position:relative; top:-.7em; }
.circnames .c3{ grid-column:2 / span 2; grid-row:4; justify-self:center; }
/* 원 그림 + 답 — 답 상자를 그림 오른쪽 아래에 붙임 */
.figans{ display:flex; align-items:flex-end; justify-content:center;
         gap:.15em; margin:.15em 0 .25em; max-width:100%; }
.figans .circfig{ margin:0; }
.figans .fa-ans{ white-space:nowrap; padding-bottom:.35em; }

/* 제목이 비어 있으면 인쇄 카드 제목줄을 감춥니다 (표지 등) — 화면은 sc-head 가 항상 그리므로
   여기서는 인쇄용 .pcard .topic 만 다룬다 */
.pcard .topic:empty{display:none;}


/* ============================================================
   인쇄 — 1-2·2-2·3-2 세 벌 거의 동일. 유일한 실질 차이는 .pcard .body 의
   word-break 값(1-2·2-2 는 break-word, 3-2 는 keep-all) — 3-2 쪽 주석이
   "글자 하나만 다음 줄로 넘어가는 어색한 줄바꿈 방지" 라는 실제 버그 수정 근거를
   대고 있어 그걸 채택한다.

   ⚠ 컨테이너 id 를 바꿨다 — 옛 인쇄 영역은 #print 였는데 viewer.js(수정 금지)는
   #sc-print-out 을 쓴다. 화면쪽 셀렉터도 옛 이름(header·.stage·.controls·.filters·.tip)
   대신 새 셸의 .sc-top·.sc-stage 로 바꿨다 — 그대로 두면 인쇄할 때 옛 클래스가 없는 새
   셸은 하나도 안 숨어서 화면과 인쇄지가 겹쳐 나온다.
   ============================================================ */
#sc-print-out{display:none;}

.sheet{
  display:flex; flex-wrap:wrap; gap:var(--print-gap);
  align-content:flex-start; justify-content:center;
  break-after:page; page-break-after:always;
}
.sheet:last-child{break-after:auto; page-break-after:auto;}

.pcard{
  position:relative;
  width:var(--print-w); height:var(--print-h); box-sizing:border-box;
  border:1.1px dashed #B9B9B9; border-radius:.55em; padding:.6em .9em .35em;
  display:flex; flex-direction:column; overflow:hidden; break-inside:avoid;
  font-size:var(--print-fs); line-height:1.5; background:#fff;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  --face-bg:#fff;
}
.pcard.b{background:#F2F8EA; --face-bg:#F2F8EA;}   /* 여섯 학년 공통 정답면 색과 통일 */
.pcard .tag{
  position:static; align-self:flex-start; display:inline-block;
  font-size:.68em; letter-spacing:.3px; padding:.1em .7em;
  background:var(--g-line); color:#fff; border-radius:99px;
}
.pcard.b .tag{background:var(--accent-deep);}
.pcard .topic{
  font-size:1.12em; font-weight:800; color:var(--g-title);
  margin:.35em 0 .3em; padding-bottom:.2em; padding-right:30px;
  border-bottom:1px solid #E7DFE3;
}
.pcard .body{
  flex:1; min-height:0; overflow:hidden; padding-right:0;
  /* ⚠ 여기에 column-count:1 을 쓰면 안 된다. 값이 1 이어도 **다단 서식 문맥**이 만들어지고,
     크롬에는 다단 안의 <table> 이 인쇄 조각화에서 통째로 사라지는 버그 계열이 있다 —
     화면은 멀쩡한데 인쇄에서만 표가 없어진다(2026-09-14, 3-2 2단원 나눗셈 세로셈이 Chrome
     152 에서 그랬다. 저장한 PDF 의 텍스트 층에 격자 숫자가 아예 없었다 — 잘린 게 아니라
     안 그려진 것). columns:auto 는 문맥 자체를 안 만든다.
     되돌리려던 2단(.body.two)은 측정자(#sc-measure)에만 붙으므로 인쇄 카드와 무관하다. */
  columns:auto;
  /* [합집합, 3-2 채택] 의미 단위(어절)로 먼저 줄바꿈하고, 그래도 안 들어가는 긴 덩어리만
     강제로 끊습니다. → 문장제처럼 좁은 인쇄 카드에서 글자 하나만 다음 줄로 넘어가는
     어색한 줄바꿈 방지 */
  word-break:keep-all; overflow-wrap:break-word;
  /* 위에서 새로 선언한 (측정자용) 전역 .body{line-height:1.42} 가 여기로도 새어 들어오므로
     인쇄 본래 값(1.5, .pcard 에서 물려받던 값)을 다시 못박는다. */
  line-height:1.5;
  /* 중요: 화면용 .body 글자크기(--body-fs)를 쓰지 않고 인쇄 카드 글자크기를
     그대로 물려받습니다. (JS가 카드별로 줄여 맞출 수 있게 함) */
  font-size:1em;
}
/* 인쇄 카드에서는 발문을 카드 밖으로 늘리지 않습니다(잘림 방지).
   씨익이는 오른쪽 위 구석에 있어 글·답과 겹치지 않습니다. */
.pcard .body > .q, .pcard .body > .wide{margin-right:0;}
/* 세모는 SVG 선도 인쇄 카드의 em 크기와 함께 축소된다. 고정 px 테두리인
   동그라미와 같은 실제 선 굵기가 되도록 인쇄 복제본에서만 보정한다. */
.pcard .numcards i.tri::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,5 97,95 3,95' fill='none' stroke='%23E23B3B' stroke-width='4.55' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 세로셈 계산선은 인쇄에서만 굵기를 절반으로. 화면(카드 1장 = 큰 화면)에서 알맞은 2px 이
   95×66mm 카드로 줄어들면 숫자에 비해 두꺼워 보인다 — 선은 px 고정이라 글자처럼 같이
   작아지지 않기 때문이다(fitPrintCards 가 글자만 줄인다). 2026-09-14.

   세로셈이 권마다 다른 마크업으로 들어와 있어 셋 다 건다:
     table.pv.ul (3-2/u1) · .vsum2 (1-2/u6) · .longdiv (3-2/u2)
   한 곳만 고치면 같은 "세로셈 가로선"이 권마다 다른 굵기로 인쇄된다. */
.pcard table.pv.ul tr:nth-child(2) td{border-bottom-width:1px;}
/* ⚠ border-collapse 표에서는 맞붙은 두 변이 겨루고 **굵은 쪽이 이긴다.** 계산선만 얇게
   하면 아래 칸의 2px 회색 격자선(table.pv td{border:2px solid #CFCFCF})에 져서 선이
   아예 사라진다 — 얇아지는 게 아니라 없어진다(2026-09-14 인쇄 PDF 에서 실제로 그랬다).
   그래서 맞붙는 변의 style 을 none 으로 재워 폭과 무관하게 계산선이 이기게 한다. */
.pcard table.pv.ul tr:nth-child(3) td{border-top-style:none;}
.pcard .vsum2 .vs-line{border-top-width:1px;}   /* div 라 겨루는 변이 없다 */
/* .longdiv 격자는 1px dotted 라 같은 1px 이어도 solid 가 이긴다(폭이 같으면 style 순위).
   .8px 로 더 내리면 1px 점선에 지므로 1px 에서 멈춘다. */
.pcard .longdiv tr.ld-n td.ld-div{border-right-width:1px;}
.pcard .longdiv tr.ld-q td:not(.ld-div){border-bottom-width:1px;}
.pcard .longdiv tr.ld-sub td:not(.ld-div){border-top-width:1px;}
/* 색칠 격자(.sqfig)는 인쇄에서 칸이 절반(48px→20px)으로 줄지만 **테두리는 1px 밑으로
   안 내려간다** — 크롬이 인쇄에서 0 아닌 테두리를 최소 1px 로 올려 그린다(실측: 계산값
   0.5px 인데 PDF 300dpi 에서 6 device px = 1.92 CSS px 로 두 칸 테두리가 맞닿아 그려졌다).
   굵기로는 더 못 줄이므로 **색을 옅게** 해 같은 무게감을 만든다. 2026-09-14 */
/* 인쇄에서는 칸이 20px 밖에 안 돼 1px 테두리(크롬 최소값)도 빗금도 제 몫을 못 한다.
   카드에 남는 높이가 있으므로 그림 자체를 키워 비율을 회복한다 — em 기반이라 font-size
   하나로 테두리·빗금·칸이 함께 커진다. 1.35 는 이 단원에서 가장 빡빡한 카드(남는 높이
   32.5px, 3행 그림)가 PRINT_SLACK(6px)을 지키는 상한에서 잡은 값이다. */
/* ⚠ 1.35 는 3-2/u4 에서 가장 빡빡한 카드의 남는 높이로 역산한 값이라 그 권 안에서만 건다.
   다른 권이 .sqfig 를 실어 오면 그 권의 여유로 값을 다시 구할 것 — 스코프 없이 두면 조용히
   넘치고, 그걸 잡는 인쇄 전수 대조는 테스트가 아니라 손으로 돌리는 스크립트다. */
body[data-book="3-2"] .pcard .sqfig{ font-size:1.35em; border-width:2px; border-color:#9a9a9a; }
body[data-book="3-2"] .pcard .sqfig i{ border-color:#bdbdbd; }
/* 그림그래프 칸의 원이 위로 쏠리던 것 — .pic 이 inline-flex 라 글줄에 얹혀 기준선에
   맞춰지고, 아래에 글자 내려감(descender) 자리만큼 빈 공간이 남는다.
   실측: 위 -0.12px / 아래 5.02px 로 5px 쏠렸다. 블록으로 만들면 인라인 스트럿이 사라져
   칸이 그대로 가운데 맞춤한다(위 0.42 / 아래 0.43).
   vertical-align:middle 로는 안 된다 — 반대쪽으로 넘어간다(위 4.1 / 아래 0.79, 실측).
   공용 CSS 에 두는 이유: .pic 은 단원 UNIT_CSS 가 정의하지만 그건 반입기가 덮는다. 2026-09-14 */
td.gcell .pic{ display:flex; }

/* ── 인쇄에서 굵어 보이는 선 일괄 보정 ─────────────────────────────────────
   인쇄 카드는 fitPrintCards 가 **글자만** 줄인다(30.3px → 12.7px). px 로 박은 선은 그대로
   남아 글자 대비 2.39배 두꺼워 보인다. 이 아래는 그 배수를 되돌리는 보정이다.

   ⚠ 1px 선은 건드리지 않는다 — 크롬이 인쇄에서 0 아닌 테두리를 최소 1px 로 올려 그려서
     더 못 내려간다(실측). 2px 이상만 절반으로 잡는다.
   ⚠ border-collapse 표는 맞붙은 두 변 중 굵은 쪽이 이긴다. 한쪽만 줄이면 선이 사라지므로
     격자 전체를 같이 줄인다(table.pv). 2026-09-14 */
.pcard table.pv th, .pcard table.pv td{ border-width:1px; }
/* ⚠ 여기만 3px 이다. double 은 선-간격-선 세 몫이 필요해서 2px 로 내리면 겹줄이 사라지고
   단색 한 줄로 그려진다(4/3/2px 를 나란히 렌더해 확인). 격자를 1px 로 낮췄으니 3px 이면
   합계 구분은 충분히 도드라진다. */
.pcard table.pv.sum th:last-child, .pcard table.pv.sum td:last-child{ border-left-width:3px; }
.pcard table.grid th, .pcard table.grid td{ border-width:1px; }
.pcard .numcards i{ border-width:1px; }   /* 수 카드 테두리 자체 */
/* ⚠ 정답 표시 동그라미(.circle::after, 2.5px)는 **일괄 보정에서 뺀다.** 그건 구조선이 아니라
   표시이고, 짝인 세모(.tri::after)의 인쇄 stroke 가 그 2.5px 동그라미에 맞춰 튜닝된 값이다. 동그라미만 얇게 하면 짝이 깨진다 — 2026-09-14 에 실제로 그렇게 깨뜨려 배포했다
   (동그라미 2px→1px, 세모는 2.09px 그대로, 차 1.06px). 둘 다 바꾸려면 tests/e2e 의
   「수 카드의 동그라미와 세모 선 굵기가 시각적으로 같다」로 재면서 같이 움직일 것. */
.pcard .vcalc .vc-line{ border-top-width:1px; }
/* ⚠ .seq3 컨테이너에는 border 선언이 없다(display:grid 뿐) — 거기에 border-width 를 주면
   아무 일도 안 일어난다. 실제 2px 선은 `.seq3 b{border:var(--seq-border) …}` 에 있으므로
   변수를 내려야 하고, 그래야 b.d::before 의 left 계산(테두리 폭을 빼는)까지 같이 따라온다. */
.pcard .seq3{ --seq-border:1px; }
.pcard .seq b{ border-width:1px; }
/* 인쇄 카드 안 보기·힌트·빈칸을 조금 촘촘하게 → 답까지 다 들어갑니다 */
.pcard .eg, .pcard .body .eg{margin:.4em 0 .35em; padding:.35em .7em; line-height:1.5;}
/* [1-2] 옛 1-2/card.css 에만 있던 인쇄 패딩 — book 스코프 없이 두면 2-2·3-2 인쇄에도
   그대로 적용된다(2026-08-27 리뷰에서 지적). 2-2·3-2 는 위 기본 .pcard .eg.fit 를 쓴다. */
body[data-book="1-2"] .pcard .eg.fit{ padding:.315em .6em; }
.pcard .hint{margin-top:.4em; padding:.35em .6em; line-height:1.45;}
.pcard .bl{height:1.55em; min-width:2.3em; padding-top:.08em;}
.pcard .gr.gr-split-first{margin-left:2.2em;} /* 왼쪽 갈래 답칸이 인쇄 본문 경계에 닿지 않도록 안전 여백 확보 */
.pcard .bl.sm{min-width:1.9em;}
.pcard .bl.one-digit{min-width:1.75em;}   /* 위 .pcard .bl 이 덮는 min-width 만 되돌린다 */
.pcard .bl.wide{min-width:4.6em;}
/* 단독 답칸은 위쪽 패딩 .08em으로 내용만 약 .04em 내린다.
   수 배열 박스는 기존 보정(약 .075em)을 유지한다.
   기본 인쇄 크기의 시각 보정이다. 축소 시 글꼴 픽셀 반올림은 em에 비례하지 않으므로
   인쇄 크기/내용을 바꾸면 보정값을 키우기 전에 실제 숫자 윤곽을 다시 확인한다. */
.pcard .seq b,
.pcard .seq3 b{padding-top:.15em;}
.pcard .no{position:static; font-size:.66em; color:#B5B5B5; text-align:right; margin-top:.25em;}
/* 씨익이 — 인쇄 카드 오른쪽 위 구석 */
.pcard .mascot{display:block; position:absolute; top:5px; right:7px; width:26px; opacity:.92; pointer-events:none;}
/* MASCOT(viewer.js) 은 이제 width="120" 고정 <img> 다(예전엔 %로 늘어나는 인라인 SVG였다) —
   부모 26px 폭에 맞춰 강제로 줄이지 않으면 인쇄 카드 밖으로 그림이 넘친다. */
.pcard .mascot img{width:100%; height:auto; display:block;}
.pcard .gr-arm{ width:4em; }   /* [1-2] */

/* 표지 — 화면(830×500)용으로 잰 그림 325×280·제목 56px 이 인쇄 카드(95×66mm ≈ 359×249px)
   에는 그대로 못 들어간다. finishPrint() 이 표지를 글자크기 자동조절 대상에서 뺘므로
   (".sc-cover 있으면 return" — 표지는 본문 조판이 아니라서) 아무 데서도 안 줄어들다가,
   그림만으로 이미 칸 높이를 넘겨 제목이 통째로 잘려 안 보이던 결함(2026-08-27 실사용
   인쇄에서 발견 — 헤드리스 크롬으로 실측: 그림 253px+제목 162px+gap 20px = 435px,
   칸은 247px뿐). .sc-cover 자체(absolute·inset:0, 카드 전체를 덮어 tag·topic·마스코트를
   가리는 것)는 화면과 같게 두고, 안의 그림·제목 크기만 인쇄 칸에 맞춘다. */
.pcard .sc-cover{ padding:.5em .8em; gap:.3em; }
.pcard .sc-cover__book{
  position:absolute; top:.6em; left:.8em;
  font-family:'Pretendard-ExtraBold', sans-serif;
  font-size:1.2em; line-height:1.2; color:#fff;
}
.pcard .sc-cover__art{ max-width:55%; max-height:60%; width:auto; }
.pcard .sc-cover__title{ font-size:1.5em; text-shadow:0 2px 0 #000; }

.pfold{display:flex; break-inside:avoid;}
.pfold .pcard:first-child{border-right:none; border-radius:.55em 0 0 .55em;}
.pfold .pcard:last-child{border-left:1.1px dashed #7E7E7E; border-radius:0 .55em .55em 0;}

@media print{
  body.sc-viewer{background:#fff;}
  .sc-top, .sc-stage{display:none !important;}
  #sc-print-out{display:block !important; position:static !important; left:auto !important; top:auto !important; visibility:visible !important;}
}