/* =====================================================================
   문항 그림(도형) — 수학·과학 문제은행

   figure 는 파일이 아니라 명세다({kind,params}). 렌더러(_app/lib/figures_math*.php ·
   figures_sci.php)가 SVG 를 그리고, 색은 아래 변수로만 정한다.
   관리자 화면(app.css) · 학생 포털(public.css) · 인쇄(print.php)가 모두 이 파일을
   함께 쓴다 — 세 곳의 그림이 서로 다르게 보이면 안 된다.
   ===================================================================== */

/* 학생 포털(public.css)과 인쇄 문서에는 테마 변수가 없다 — 대체값을 함께 적는다. */
:root {
  --fig-line:   var(--text, #171A21);
  --fig-fill:   #ffffff;
  --fig-accent: var(--primary, #4C51E0);
  --fig-muted:  var(--muted-2, #9AA0AC);
  --fig-tint:   rgba(84, 105, 212, .13);   /* 색칠한 부분 */
  --fig-head:   var(--surface-2, #F7F8FB); /* 표 머리칸 */
}

.fig-wrap { margin: 12px 0; display: flex; justify-content: flex-start; }
/* 그림은 **타고난 크기**로 그린다(svg 에 width/height 가 붙어 있다).
   칸을 넘칠 때만 줄인다 — 늘리지는 않는다. 폭을 100% 로 늘리면 좁은 그림이 더 크게
   확대돼 한 문항 안에서 글자 크기가 제각각이 된다. */
.fig { display: block; max-width: 100%; height: auto; }
.fig-sm .fig { max-width: min(100%, 260px); }
.fig-md .fig { max-width: 100%; }
.fig-print { max-width: 250px; }
.fig-print .fig { max-width: 100%; }
.fig-missing {
  display: inline-block; margin: 10px 0; padding: 8px 12px;
  border: 1px dashed var(--red, #E5484D); border-radius: 8px; color: var(--red, #E5484D); font-size: 12px;
}

/* 선·면 */
.fig .fk    { stroke: var(--fig-line); fill: none; stroke-linecap: round; }
.fig .fkf   { fill: var(--fig-line); stroke: none; }
.fig .fm    { stroke: var(--fig-muted); fill: none; }
.fig .fs    { fill: var(--fig-fill); stroke: var(--fig-line); }
.fig .fa    { stroke: var(--fig-accent); fill: none; stroke-linecap: round; }
.fig .faf   { fill: var(--fig-accent); stroke: none; }
.fig .fsh   { fill: var(--fig-tint); stroke: var(--fig-accent); stroke-linejoin: round; }
.fig .faf-s { fill: var(--fig-accent); fill-opacity: .28; stroke: var(--fig-line); }

/* 글자 */
.fig text  { stroke: none; }
.fig .fl   { fill: var(--fig-line); }
.fig .fmu  { fill: var(--fig-muted); }
.fig .fa-t { fill: var(--fig-accent); font-weight: 700; }

/* 그림 여러 장 쌓기 (kind: stack) — «(1) 그림 (2) 그림» 을 한 칸에 담는다.
   폭 제한은 묶음 «전체» 에만 건다 — 안쪽 그림은 렌더러가 계산한 비율을 그대로 쓴다. */
.fig-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 430px; }
.fig-stack-i { display: flex; align-items: flex-start; gap: 8px; }
.fig-stack-l { flex: 0 0 auto; padding-top: 4px; font-size: 13px; color: var(--fig-muted); }
.fig-stack-b { min-width: 0; }
.fig-wrap .fig-stack .fig { max-width: none; }
.fig-print .fig-stack { max-width: 100%; }

/* 그릴 수 없어 파일로 두는 그림 (kind: image) */
.fig-img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.fig-sm .fig-img { max-width: min(100%, 260px); }
.fig-print .fig-img { max-width: 100%; }

/* 표(figtable) — 그림이 아니라 «글»이다. 본문 글꼴·크기를 그대로 물려받는다. */
.figtable { border-collapse: collapse; margin: .7em 0; font-size: inherit; line-height: 1.5; }
.figtable th,
.figtable td { border: 1.4px solid var(--fig-line); padding: .34em .8em;
               text-align: center; white-space: nowrap; }
.figtable th { background: var(--fig-head); font-weight: 600; }
.figtable td.lead { background: var(--fig-head); font-weight: 600; }
.figtable td.hl { background: var(--fig-head); }
/* 줄기와 잎 — 잎은 왼쪽으로 붙인다(가운데 정렬하면 자릿수가 안 맞아 보인다) */
.figtable.stemleaf td.leaf { text-align: left; min-width: 9em; }
.figcap { font-size: .86em; color: var(--fig-muted); margin-top: .3em; }
/* 칸이 많으면 가로로만 스크롤한다 — 본문이 통째로 밀리지 않게 */
.fig-wrap:has(.figtable) { overflow-x: auto; max-width: 100%; }

@media print {
  .fig { --fig-line: #111; --fig-fill: #fff; --fig-accent: #333; --fig-muted: #999; }
  .fig .faf-s { fill-opacity: .18; }
  .fig-wrap { margin: 5pt 0; }
  .fig-wrap:has(.figtable) { overflow: visible; }
  .fig-print { max-width: 150pt; }
}

/* =====================================================================
   과학 전용 — 고정 애셋(Tier B) · 실물 사진(Tier C) · 실험 결과표
   ===================================================================== */

/* Tier B — 고정 SVG 애셋 + ㉠㉡㉢ 라벨.
   모양은 assets/figures/<이름>.svg, 지점 좌표는 _app/data/assets/<이름>.json.
   선·글자 색은 위의 .fig 규칙을 그대로 쓴다(따로 정할 것이 없다). */

/* Tier C — 실물 사진. 출처·라이선스를 그림에 붙여 둔다(없으면 렌더 자체가 막힌다). */
.fig-photo { display: block; margin: 12px 0; }
.fig-photo img { display: block; max-width: 100%; height: auto;
                 border: 1px solid var(--fig-muted); border-radius: 4px; }
.fig-credit { margin-top: 5px; font-size: 11px; color: var(--fig-muted); }

/* 실험 결과표 — 「자료 해석」·「실험 설계」 문항은 이 표가 있어야 물음이 성립한다.
   highlight 로 지정된 칸은 학생이 채울 빈칸으로 그린다. */
.dtable-wrap { margin: 11px 0; overflow-x: auto; max-width: 100%; }
.dtable-cap  { font-size: .86em; color: var(--fig-muted); margin-bottom: 5px; font-weight: 600; }
.dtable      { border-collapse: collapse; font-size: inherit; line-height: 1.5; }
.dtable th,
.dtable td   { border: 1.4px solid var(--fig-line); padding: .34em .8em;
               text-align: center; white-space: nowrap; }
.dtable thead th          { background: var(--fig-head); font-weight: 600; }
.dtable tbody td:first-child { background: var(--fig-head); font-weight: 600; }
.dtable td.is-blank       { background: transparent; }
.dt-blank    { display: inline-block; min-width: 3.6em; height: 1.1em; vertical-align: middle;
               border-bottom: 1.5px solid var(--fig-accent); }

@media print {
  .dtable th, .dtable td { white-space: normal; }
}