fix: add print/PDF export support and update README

.claude-plugin/marketplace.json

@@ -1,7 +1,7 @@
 {
   "name": "kit",
   "description": "Community plugin & skills marketplace for Claude Code",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "owner": {
     "name": "hamsurang",
     "email": "zlemzlem5656@naver.com"

plugins/hamsurang-slide/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "hamsurang-slide",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Hamsurang brand HTML presentation generator. Soft Modern design with light/dark themes, 14 slide types, 4-color code highlighting.",
   "author": {
     "name": "Sonny",

plugins/hamsurang-slide/README.md

@@ -2,6 +2,23 @@
 
 > Brand presentation generator for Hamsurang (함수랑산악회) with Soft Modern design.
 
+## Themes
+
+**Light theme**
+![light theme](../../docs/assets/hamsurang-slide/images/light.png)
+
+
+[Go to sample-light.html](https://hamsurang.github.io/kit/assets/hamsurang-slide/html/sample-light.html)
+
+
+
+**Dark theme**
+
+![dark theme](../../docs/assets/hamsurang-slide/images/dark.png)
+
+[Go to sample-dark.html](https://hamsurang.github.io/kit/assets/hamsurang-slide/html/sample-dark.html)
+
+
 ## Features
 
 - **Soft Modern** design — glassmorphism cards, green-tinted gradients, soft shadows

plugins/hamsurang-slide/skills/hamsurang-slide/references/generation-rules.md

@@ -82,14 +82,14 @@ No other file contains implementable style values.
 
 body {
   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  background: #000;
+  background: var(--background);
   overflow: hidden;
 }
 
 .presentation {
   width: 100vw; height: 100vh;
   display: flex; align-items: center; justify-content: center;
-  background: #000; overflow: hidden;
+  background: var(--background); overflow: hidden;
 }
 
 .slides-container {
@@ -327,6 +327,7 @@ ul li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; backgr
 
 ```css
 @media print {
+  html, body { overflow: visible !important; height: auto !important; background: #fff !important; }
   .controls, .progress-bar, .slide-counter { display: none !important; }
   .presentation { background: none; width: auto; height: auto; overflow: visible; display: block; }
   .slides-container { width: auto; height: auto; overflow: visible; transform: none !important; display: block; }
@@ -337,9 +338,30 @@ ul li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; backgr
     pointer-events: auto !important;
     page-break-after: always; break-after: page;
     animation: none !important;
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
   }
   .slide:last-child { page-break-after: auto; break-after: auto; }
-  @page { size: 1280px 720px landscape; margin: 0; }
+  /* Reset animation opacity — .a elements start at opacity:0 and animate in;
+     in print mode animations don't run, so force them visible */
+  .slide .a { opacity: 1 !important; animation: none !important; transform: none !important; }
+  /* Glassmorphism cards: backdrop-filter not supported in print.
+     Without it, dark-theme cards (rgba background at 6% opacity) become invisible */
+  /* Explicit print-color-adjust on cards (not just inherited from .slide) ensures backgrounds print.
+     Light theme: #f7faf9 instead of white to differentiate from the #ffffff slide background.
+     Dark theme: #1a2d25 (visibly lighter than slide #0c1410) for clear card distinction. */
+  .card, .flow .step, .versus .panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  .card, .flow .step { background: #f7faf9 !important; border-color: rgba(0,153,114,0.25) !important; }
+  .versus .panel.good { background: #f0faf7 !important; border-color: rgba(0,153,114,0.35) !important; }
+  .versus .panel.bad { background: #fff5f5 !important; border-color: rgba(239,68,68,0.35) !important; }
+  [data-theme="dark"] .card,
+  [data-theme="dark"] .flow .step { background: #1a2d25 !important; border-color: rgba(0,153,114,0.40) !important; }
+  /* Versus panels need separate rules — bad panel must stay red, not green */
+  [data-theme="dark"] .versus .panel.good { background: #0e1f1a !important; border-color: rgba(0,153,114,0.45) !important; }
+  [data-theme="dark"] .versus .panel.bad { background: #1f0e0e !important; border-color: rgba(248,113,113,0.45) !important; }
+  /* Section Divider underline bar: print strips opacity-based stacking contexts, pushing
+     z-index:-1 behind the slide background. Reset z-index and force background to print */
+  .slide--section-divider h2::after { z-index: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; background: rgba(0,153,114,0.45) !important; }
+  @page { size: 1280px 720px; margin: 0; }
 }
 ```
 

plugins/hamsurang-slide/skills/hamsurang-slide/references/html-spec.md

@@ -47,6 +47,14 @@ Do not include highlight.js stylesheet — the custom theme override in generati
   </style>
 </head>
 <body>
+  <noscript>
+    <style>
+      body { background: #fff !important; overflow: visible !important; }
+      .presentation { background: #fff !important; width: auto !important; height: auto !important; overflow: visible !important; display: block !important; }
+      .slides-container { width: 1280px; height: auto !important; overflow: visible !important; transform: none !important; display: block !important; }
+      .slide { position: relative !important; opacity: 1 !important; transform: none !important; display: flex !important; width: 1280px; height: 720px; margin-bottom: 20px; }
+    </style>
+  </noscript>
   <div class="presentation">
     <div class="progress-bar"></div>
     <div class="slides-container">
@@ -164,7 +172,7 @@ if (typeof mermaid !== 'undefined') {
   const theme = document.documentElement.getAttribute('data-theme');
   mermaid.initialize({
     startOnLoad: false,
-    theme: theme === 'dark' ? 'dark' : 'default',
+    theme: 'base',
     securityLevel: 'loose',
     themeVariables: theme === 'dark' ? {
       primaryColor: '#1a3a2e',
@@ -177,7 +185,18 @@ if (typeof mermaid !== 'undefined') {
       mainBkg: '#1a3a2e',
       nodeTextColor: '#e0e0e0',
       edgeLabelBackground: '#0c1410'
-    } : {}
+    } : {
+      primaryColor: '#f7faf9',
+      primaryTextColor: '#111111',
+      primaryBorderColor: '#009972',
+      lineColor: '#009972',
+      secondaryColor: '#f7faf9',
+      tertiaryColor: '#f7faf9',
+      nodeBorder: '#009972',
+      mainBkg: '#f7faf9',
+      nodeTextColor: '#111111',
+      edgeLabelBackground: '#ffffff'
+    }
   });
 
   async function renderMermaid() {
@@ -203,10 +222,11 @@ if (typeof mermaid !== 'undefined') {
 Print rules are defined in generation-rules.md §11.
 
 Browser print (`Ctrl+P`) for PDF export:
+- Overrides `body` background to white and `overflow` to visible
 - Hides controls, progress bar, counter
-- Reflows all slides to visible
+- Reflows all slides to visible with `print-color-adjust: exact`
 - Page-break per slide
-- 1280×720 landscape page size
+- 1280×720 page size (`@page { size: 1280px 720px }` — do not add `landscape`; combining custom lengths with an orientation keyword makes browsers ignore the entire `size` declaration)
 
 ## 8. Accessibility