feat: reorder unit sections, Step1 tap-only advance, replace interrupt with back

Made-with: Cursor

index.html

@@ -356,6 +356,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 .flash-card-front{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
 .flash-card-term{font-size:15px;font-weight:600;color:var(--text);line-height:1.45;letter-spacing:-.01em}
 .flash-card-hint{font-size:11px;color:var(--text3);letter-spacing:.04em}
+.flash-card-hint-footer{margin-top:10px;width:100%}
 .flash-card-back{font-size:13px;color:var(--text);line-height:1.75;padding-top:12px;border-top:1px solid var(--border);width:100%;margin-top:0;text-align:left}
 .step-count{font-size:10px;color:var(--text3);text-align:center;margin-bottom:10px;letter-spacing:.04em}
 .s2choice{display:flex;gap:10px;margin-bottom:10px}
@@ -509,8 +510,8 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
               弱点集中特訓
             </div>
             <button class="btn-sm" @click="exitWeakDrill()">
-              <i data-lucide="x" style="width:11px;height:11px"></i>
-              中断
+              <i data-lucide="arrow-left" style="width:11px;height:11px"></i>
+              戻る
             </button>
           </div>
 
@@ -600,6 +601,51 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
           </div>
         </div>
 
+        <!-- Concept -->
+        <div class="card" x-show="currentUnit && !stepMode">
+          <div class="card-title">
+            <i data-lucide="book-open" style="width:13px;height:13px"></i>
+            概念解説
+          </div>
+          <div class="concept-text" x-html="conceptPreview"></div>
+          <div class="concept-text" x-show="conceptExpanded" x-html="conceptRest"></div>
+          <button class="concept-expand-btn" x-show="conceptRest"
+            @click="conceptExpanded = !conceptExpanded">
+            <i :data-lucide="conceptExpanded ? 'chevron-up' : 'chevron-down'" style="width:11px;height:11px"></i>
+            <span x-text="conceptExpanded ? '閉じる' : 'もっと詳しく'"></span>
+          </button>
+        </div>
+
+        <!-- Keypoints -->
+        <div class="card" x-show="!stepMode && currentUnit?.keypoints?.length">
+          <div class="card-title">
+            <i data-lucide="zap" style="width:13px;height:13px"></i>
+            重要ポイント
+          </div>
+          <ul class="key-list">
+            <template x-for="kp in (currentUnit?.keypoints||[])" :key="kp">
+              <li class="key-item">
+                <div class="key-dot"></div>
+                <span x-html="kp"></span>
+              </li>
+            </template>
+          </ul>
+        </div>
+
+        <!-- Exam tips -->
+        <div class="card" x-show="currentUnit?.examtips?.length && !stepMode" style="border-color:rgba(248,113,113,.18);background:rgba(248,113,113,.03)">
+          <div class="card-title" style="color:var(--err)">
+            <i data-lucide="alert-triangle" style="width:13px;height:13px;color:var(--err)"></i>
+            試験対策メモ
+          </div>
+          <template x-for="tip in (currentUnit?.examtips||[])" :key="tip">
+            <div class="tips-point">
+              <div class="tips-icon">!</div>
+              <span x-html="tip"></span>
+            </div>
+          </template>
+        </div>
+
         <!-- Study mode buttons -->
         <div style="display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap" x-show="currentUnit && !stepMode">
           <button class="btn-sm btn-accent" @click="startStepMode()"
@@ -616,9 +662,9 @@ 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" @click="exitStepMode()">
-              <i data-lucide="x" style="width:11px;height:11px"></i>
-              中断
+            <button class="btn-sm" type="button" @click="exitStepMode()">
+              <i data-lucide="arrow-left" style="width:11px;height:11px"></i>
+              戻る
             </button>
           </div>
           <div class="step-pips">
@@ -634,20 +680,16 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
               Step 1 — 用語確認
             </div>
             <div class="step-count" x-text="(stepKpIdx+1) + ' / ' + (currentUnit?.keypoints?.length||0) + ' ポイント'"></div>
-            <div class="flash-card" role="button" tabindex="0" :aria-expanded="stepFlashRevealed"
-              @click="revealFlash()" @keydown.enter.prevent="revealFlash()" @keydown.space.prevent="revealFlash()">
+            <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-hint">タップして全文を表示</div>
               </div>
               <div class="flash-card-back" x-show="stepFlashRevealed"
                 x-html="currentUnit?.keypoints?.[stepKpIdx]"></div>
-            </div>
-            <div class="step-action-row">
-              <button class="btn-sm btn-accent" @click="nextStepFlash()" x-show="stepFlashRevealed">
-                次へ
-                <i data-lucide="arrow-right" style="width:11px;height:11px"></i>
-              </button>
+              <div class="flash-card-hint flash-card-hint-footer"
+                x-show="stepFlashRevealed || !keypointHasFlip(stepKpIdx)">タップで次へ</div>
             </div>
           </div>
 
@@ -698,50 +740,6 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
           </div>
         </div>
 
-        <!-- Concept -->
-        <div class="card" x-show="currentUnit && !stepMode">
-          <div class="card-title">
-            <i data-lucide="book-open" style="width:13px;height:13px"></i>
-            概念解説
-          </div>
-          <div class="concept-text" x-html="conceptPreview"></div>
-          <div class="concept-text" x-show="conceptExpanded" x-html="conceptRest"></div>
-          <button class="concept-expand-btn" x-show="conceptRest"
-            @click="conceptExpanded = !conceptExpanded">
-            <i :data-lucide="conceptExpanded ? 'chevron-up' : 'chevron-down'" style="width:11px;height:11px"></i>
-            <span x-text="conceptExpanded ? '閉じる' : 'もっと詳しく'"></span>
-          </button>
-        </div>
-
-        <!-- Exam tips -->
-        <div class="card" x-show="currentUnit?.examtips?.length" style="border-color:rgba(248,113,113,.18);background:rgba(248,113,113,.03)">
-          <div class="card-title" style="color:var(--err)">
-            <i data-lucide="alert-triangle" style="width:13px;height:13px;color:var(--err)"></i>
-            試験対策メモ
-          </div>
-          <template x-for="tip in (currentUnit?.examtips||[])" :key="tip">
-            <div class="tips-point">
-              <div class="tips-icon">!</div>
-              <span x-html="tip"></span>
-            </div>
-          </template>
-        </div>
-        <!-- Keypoints -->
-        <div class="card" x-show="!stepMode && currentUnit?.keypoints?.length">
-          <div class="card-title">
-            <i data-lucide="zap" style="width:13px;height:13px"></i>
-            重要ポイント
-          </div>
-          <ul class="key-list">
-            <template x-for="kp in (currentUnit?.keypoints||[])" :key="kp">
-              <li class="key-item">
-                <div class="key-dot"></div>
-                <span x-html="kp"></span>
-              </li>
-            </template>
-          </ul>
-        </div>
-
         <!-- Quiz -->
         <div class="card" x-show="currentUnit?.quiz?.length && (!stepMode || stepStep === 3)">
           <div class="quiz-header">
@@ -1586,14 +1584,13 @@ function bokiApp(){
     resetFlashRevealState(){
       this.stepFlashRevealed=!this.keypointHasFlip(this.stepKpIdx);
     },
-    revealFlash(){
-      if(!this.keypointHasFlip(this.stepKpIdx)){
-        return;
-      }
-      if(this.stepFlashRevealed){
-        return;
-      }
+    advanceStep1Card(){
+      if(this.stepStep!==1) return;
+      if(this.keypointHasFlip(this.stepKpIdx)&&!this.stepFlashRevealed){
         this.stepFlashRevealed=true;
+        return;
+      }
+      this.nextStepFlash();
     },
     nextStepFlash(){
       const kps=this.currentUnit?.keypoints||[];

sw.js

@@ -1,5 +1,5 @@
 // posimai-boki SW — stale-while-revalidate + skipWaiting
-const CACHE = 'posimai-boki-v12';
+const CACHE = 'posimai-boki-v13';
 const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png'];
 
 self.addEventListener('install', e => {