/* 쪼개지며 도는 최적화 — 샘플 전용. DESIGN.md 안에서 논다:
   그라디언트·이모지·아이콘 없음, 색은 --brand 하나에 --ink 계열, 선은 1px 계열. */
.spstage{border:1px solid var(--line);border-radius:5px;background:var(--bg-2);
  padding:22px 20px 16px;margin-top:34px}
.spstage svg{width:100%;height:auto;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}

.sp .pn{fill:#fff;stroke:var(--line);stroke-width:1}
.sp .lbl{font-family:var(--mono);font-size:11.5px;fill:var(--ink-2);letter-spacing:.04em}
.sp .val{font-family:var(--mono);font-size:11.5px;fill:var(--ink-3)}
.sp .val-b{font-family:var(--mono);font-size:11.5px;fill:var(--brand);font-weight:500}
.sp .big{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink)}

/* 입체 — 빛은 왼쪽 위. 윗면이 가장 밝고 오른쪽 옆면이 가장 어둡다. */
/* **면이 곧 윤곽이다.** 채움과 테두리가 한 path 라, 가려지는 면은 테두리째
   가려지고 남는 면은 테두리를 잃지 않는다. 손으로 지울 선이 없다. */
/* **면에는 테두리를 주지 않는다.** 같은 방향끼리 만나면 색이 같아 이음매가
   사라지고, 방향이 다르면 색이 달라 저절로 모서리로 읽힌다 — 타설된 면이
   그렇다. 드러나는 윤곽만 `.edge` 로 따로 긋는다. */
.sp [class^="face-"],.sp [class*=" face-"]{stroke:none}
.sp .edge{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linecap:round}
/* 지면 — 옅게. 건물이 서 있는 자리만 알려 주면 된다. */
.sp .ground{fill:#F4F8F8;stroke:var(--line);stroke-width:1}
.sp .edge.on{stroke:var(--brand);stroke-width:1.5}
.sp .face-t{fill:#FFFFFF}      /* 윗면 — 가장 밝게 */
.sp .face-f,.sp .face-k{fill:#EDF4F5}   /* 끝면 */
.sp .face-s,.sp .face-w{fill:#DCE9EB}   /* 옆면 */
.sp .face-b{fill:#CBDDDF}      /* 밑면 — 가장 어둡게 */
/* 다음에 갈라져 나올 것 — 색 하나로만 짚는다. */
.sp .face-t.on{fill:#D3E7E8}
.sp .face-f.on,.sp .face-k.on{fill:#BEDADB}
.sp .face-s.on,.sp .face-w.on{fill:#A9CFD0}
.sp .face-b.on{fill:#93C2C3}

.sp .big-ng{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--warn)}

.sp .mem{stroke:var(--ink-2);stroke-width:1.6;fill:none}
.sp .mem2{stroke:var(--ink);stroke-width:2.6;fill:none}      /* 큰보 */
.sp .mem-f{fill:#DFEAEC;stroke:var(--ink-2);stroke-width:1.2}
.sp .hair{stroke:var(--line);stroke-width:1;fill:none}
.sp .slab{fill:#F7FAFA;stroke:var(--line);stroke-width:1}
.sp .col{fill:var(--ink);stroke:none}
.sp .sup{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.sp .sec{fill:#EFF5F6;stroke:var(--ink-2);stroke-width:1.6}
.sp .stir{fill:none;stroke:var(--brand);stroke-width:1.4}
.sp .reb{fill:var(--brand)}
.sp .reb-o{fill:#fff;stroke:var(--brand);stroke-width:1.2}

/* 칸마다의 진행 — 얇은 띠 하나. 카운트업이 아니라 상태 표시다. */
.sp .trk{stroke:var(--line-2);stroke-width:3;stroke-linecap:round}
.sp .bar{stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.sp .bar-ng{stroke:var(--warn);stroke-width:3;stroke-linecap:round}

.sphud{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:13px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.sphud .step{color:var(--ink);font-weight:500}
.sphud .read b{color:var(--brand);font-weight:500}
@media(max-width:640px){.sphud{flex-direction:column;gap:5px}}

/* ── 해석 모델 — 지점·등분포하중·경간 ────────────────────────────────
   부재를 골조에서 떼어 내 **무엇이 붙잡고 무엇이 누르는가**만 남긴 그림이다.
   실선 하나가 부재, 삼각형이 지점, 위에서 내리꽂는 화살표가 등분포하중.
   선 굵기로 위계를 준다 — 부재가 가장 굵고, 하중은 가늘고, 치수는 더 가늘게. */
.sp .load{stroke:var(--ink-3);stroke-width:1;fill:none}
.sp .loadh{fill:var(--ink-3);stroke:none}
.sp .gnd{stroke:var(--ink-2);stroke-width:1;fill:none}
.sp .gnd2{stroke:var(--ink);stroke-width:1.8;fill:none}
.sp .dim{stroke:var(--line-2);stroke-width:1;fill:none}
.sp .vs{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}
.sp .vs-b{font-family:var(--mono);font-size:10px;fill:var(--brand)}