토큰 기반 CSS 체계 구축 + slide-base 스타일 분리

- tokens: typography(35변수), spacing(28변수), colors(41변수) 정의
- slide-base.html: 인라인 style 제거, Jinja include로 토큰/CSS 조립
- slide-base.css: 모든 직접값을 토큰 변수 참조로 전환 (직접값 0)
- block_assembler.py: Template → Environment.from_string (include 지원)
- TOKENS-v1.md: 위계 기준표 초안 + component token 후보
- BLOCK-RULES.md: 블록 작성 규칙 (spacing 문구 실제 토큰과 일치)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

templates/styles/base/slide-base.css

@@ -0,0 +1,133 @@
+/* ══════════════════════════════════════
+   slide-base.css
+   ══════════════════════════════════════
+   슬라이드 공통 프레임 스타일.
+   slide-base.html에서 분리.
+   직접값 대신 토큰 변수 참조.
+   ══════════════════════════════════════ */
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: var(--color-bg-page);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  word-break: keep-all;
+}
+
+/* ── 16:9 슬라이드 컨테이너 ── */
+.slide {
+  width: 1280px;
+  height: 720px;
+  position: relative;
+  overflow: hidden;
+  background: var(--color-bg);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+/* ── 배경 ── */
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
+  z-index: 0;
+}
+.slide-bg-texture {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.02;
+  pointer-events: none;
+}
+
+/* ── 대목차 제목 ── */
+.slide-title {
+  position: absolute;
+  left: var(--slide-title-left);
+  top: var(--slide-title-top);
+  width: calc(100% - 104px);
+  font-weight: var(--weight-slide-title);
+  font-size: var(--font-slide-title);
+  line-height: var(--lh-slide-title);
+  background-image: linear-gradient(180deg, var(--color-slide-title-from) 0%, var(--color-slide-title-to) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 0 0 2px #322c1e;
+  z-index: 2;
+}
+
+/* ── 구분선 ── */
+.slide-divider {
+  position: absolute;
+  left: 50px;
+  top: var(--slide-divider-top);
+  width: calc(100% - 100px);
+  height: 2px;
+  z-index: 2;
+}
+.slide-divider img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ── 본문 영역 ── */
+.slide-body {
+  position: absolute;
+  left: var(--slide-padding-x);
+  top: var(--slide-body-top);
+  width: calc(100% - var(--slide-padding-x) * 2);
+  height: var(--slide-body-height);
+  z-index: 1;
+  overflow: hidden;
+}
+
+/* ── 하단 footer pill ── */
+.slide-footer {
+  position: absolute;
+  left: 50px;
+  bottom: var(--slide-footer-bottom);
+  width: calc(100% - 100px);
+  height: var(--slide-footer-height);
+  border-radius: 999px;
+  overflow: hidden;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slide-footer-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 999px;
+  z-index: 0;
+}
+.slide-footer--css {
+  background: linear-gradient(90deg, var(--color-footer-bg-from) 5%, var(--color-footer-bg-mid) 50%, var(--color-footer-bg-to) 95%);
+}
+
+/* ── footer 텍스트 ── */
+.slide-footer-text {
+  position: relative;
+  z-index: 1;
+  font-size: var(--font-footer);
+  font-weight: var(--weight-footer);
+  line-height: var(--lh-footer);
+  color: var(--color-footer-text);
+  text-align: center;
+  text-shadow: 0 0 4px rgba(0,0,0,0.5);
+  letter-spacing: -0.01em;
+}
+.slide-footer-text em {
+  color: var(--color-footer-accent);
+  font-style: normal;
+}