From 0f2ae7f33223e2bdbdf15c84d5f9ad4483fe9d75 Mon Sep 17 00:00:00 2001
From: posimai <posimai.project@gmail.com>
Date: Sun, 19 Apr 2026 15:48:36 +0900
Subject: [PATCH] fix: render Step1 term HTML via safeHtml, step header back
 goes one card

Made-with: Cursor
---
 index.html |  4 ++--
 js/app.js  | 41 +++++++++++++++++++++++++++++++++++++++++
 sw.js      |  2 +-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 57a007a..6d4ed4d 100644
--- a/index.html
+++ b/index.html
@@ -660,7 +660,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
               <i data-lucide="layers" style="width:13px;height:13px"></i>
               3ステップで学ぶ
             </div>
-            <button class="btn-sm" type="button" @click="exitStepMode()">
+            <button class="btn-sm" type="button" @click="stepGoBack()" aria-label="1つ前に戻る">
               <i data-lucide="arrow-left" style="width:11px;height:11px"></i>
               戻る
             </button>
@@ -681,7 +681,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
             <div class="flash-card" role="button" tabindex="0" :aria-expanded="stepFlashRevealed || !keypointHasFlip(stepKpIdx)"
               @click="advanceStep1Card()" @keydown.enter.prevent="advanceStep1Card()" @keydown.space.prevent="advanceStep1Card()">
               <div class="flash-card-front" x-show="!stepFlashRevealed && keypointHasFlip(stepKpIdx)">
-                <div class="flash-card-term" x-text="keypointTerm(stepKpIdx)"></div>
+                <div class="flash-card-term" x-html="safeHtml(keypointTerm(stepKpIdx))"></div>
                 <div class="flash-card-hint">タップして全文を表示</div>
               </div>
               <div class="flash-card-back" x-show="stepFlashRevealed"
diff --git a/js/app.js b/js/app.js
index 8cd89a9..7266c16 100644
--- a/js/app.js
+++ b/js/app.js
@@ -409,6 +409,47 @@ document.addEventListener('alpine:init', () => {
       this.stepMode=false;
       this.$nextTick(()=>{ if(window.lucide) lucide.createIcons(); });
     },
+    /** ヘッダ「戻る」: 同一ステップ内なら1枚前、先頭なら3ステップを終了 */
+    stepGoBack(){
+      if(!this.stepMode) return;
+      if(this.stepStep===1){
+        if(this.stepKpIdx>0){
+          this.stepKpIdx--;
+          this.resetFlashRevealState();
+        } else {
+          this.exitStepMode();
+        }
+      } else if(this.stepStep===2){
+        if(this.stepDrillIdx>0){
+          this.stepDrillIdx--;
+          this.stepDrillAnswered=false;
+          this.stepDrillSelected=-1;
+        } else {
+          const kps=this.currentUnit?.keypoints||[];
+          this.stepStep=1;
+          this.stepKpIdx=Math.max(0,kps.length-1);
+          this.resetFlashRevealState();
+        }
+      } else if(this.stepStep===3){
+        const drills=this.unitDrills;
+        if(drills.length>0){
+          this.stepStep=2;
+          this.stepDrillIdx=drills.length-1;
+          this.stepDrillAnswered=false;
+          this.stepDrillSelected=-1;
+        } else {
+          const kps=this.currentUnit?.keypoints||[];
+          this.stepStep=1;
+          this.stepKpIdx=Math.max(0,kps.length-1);
+          this.resetFlashRevealState();
+        }
+      }
+      this.$nextTick(()=>{
+        if(window.lucide) lucide.createIcons();
+        const m=document.getElementById('main');
+        if(m) m.scrollTo({top:0,behavior:'smooth'});
+      });
+    },
     stepPipCls(n){
       if(this.stepStep===n) return 's-active';
       if(this.stepStep>n) return 's-done';
diff --git a/sw.js b/sw.js
index 0022d90..6df9d67 100644
--- a/sw.js
+++ b/sw.js
@@ -1,5 +1,5 @@
 // posimai-boki SW — stale-while-revalidate + skipWaiting
-const CACHE = 'posimai-boki-v14';
+const CACHE = 'posimai-boki-v15';
 const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png', '/js/app.js', '/js/data/drills.js', '/js/data/categories.js'];
 
 self.addEventListener('install', e => {