fix: フレックス内スクロール復元（#main に min-height:0、#app をビューポート高に固定）

Made-with: Cursor

index.html

@@ -70,7 +70,7 @@
 }
 html{height:100%}
 html,body{background:var(--bg);color:var(--text);font-family:'Geist',sans-serif;overflow:hidden}
-body{min-height:100%;min-height:-webkit-fill-available}
+body{min-height:100%;min-height:-webkit-fill-available;height:100%}
 
 .aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
 .aurora-blob{position:absolute;border-radius:50%;will-change:transform}
@@ -82,7 +82,7 @@ body{min-height:100%;min-height:-webkit-fill-available}
 @keyframes ab3{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,60px) scale(0.93)}}
 [data-theme="light"] .aurora-blob{opacity:0.35}
 
-#app{position:relative;z-index:1;box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
+#app{position:relative;z-index:1;box-sizing:border-box;height:100vh;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;min-height:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
 
 /* Header */
 header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;border-bottom:1px solid var(--border);background:rgba(12,18,33,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0}
@@ -95,10 +95,10 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 .icon-btn:hover{color:var(--accent);border-color:var(--accent-border)}
 
 /* Body */
-#body{flex:1;display:flex;overflow:hidden}
+#body{flex:1;min-height:0;display:flex;overflow:hidden}
 
 /* Sidebar */
-#sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;background:rgba(12,18,33,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column}
+#sidebar{width:240px;flex-shrink:0;min-height:0;border-right:1px solid var(--border);overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(12,18,33,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column}
 [data-theme="light"] #sidebar{background:rgba(239,246,255,0.6)}
 .sidebar-search{padding:10px 12px;border-bottom:1px solid var(--border)}
 .search-wrap{position:relative}
@@ -123,7 +123,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 .sidebar-item.done .item-check{opacity:1}
 
 /* Main */
-#main{flex:1;overflow-y:auto;padding:24px 28px}
+#main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px 28px;touch-action:pan-y}
 
 /* Home */
 .home-hero{text-align:center;padding:36px 0 28px;max-width:500px;margin:0 auto}
@@ -169,13 +169,13 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 .formula-label{font-size:10px;color:var(--text3);font-family:'Geist',sans-serif;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
 
 .journal-wrap{overflow-x:auto;margin:12px 0}
-.journal-table{width:100%;border-collapse:collapse;font-size:12px;min-width:320px}
+.journal-table{width:100%;border-collapse:collapse;font-size:12px;min-width:280px;table-layout:fixed}
-.journal-table th{padding:5px 10px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
+.journal-table th{padding:5px 8px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
-.journal-table td{padding:8px 10px;border-bottom:1px solid var(--border2);color:var(--text2)}
+.journal-table td{padding:8px 8px;border-bottom:1px solid var(--border2);color:var(--text2);word-break:keep-all}
 .journal-table tr:last-child td{border-bottom:none}
 .dr{color:var(--text);font-weight:500}
-.cr{color:var(--text2);padding-left:18px}
+.cr{color:var(--text2);padding-left:12px}
-.amount{font-family:'JetBrains Mono',monospace;text-align:right;color:var(--text)}
+.amount{font-family:'JetBrains Mono',monospace;text-align:right;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
 
 /* Keypoints */
 .key-list{list-style:none;display:flex;flex-direction:column;gap:8px}
@@ -228,8 +228,17 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
   #sidebar{position:fixed;left:0;top:calc(52px + var(--safe-top));bottom:var(--safe-bottom);z-index:50;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.9,.2,1);width:260px}
   #sidebar.open{transform:translateX(0)}
   .sidebar-toggle{display:flex}
-  #main{padding:16px}
+  #main{padding:12px}
+  .home-hero{padding:28px 0 20px}
+  .card{padding:16px;margin-bottom:12px}
+  .unit-header{margin-bottom:14px}
+  .unit-nav{padding-bottom:20px}
   .home-cats{grid-template-columns:1fr}
+  .journal-table{min-width:0;font-size:11px}
+  .journal-table th,.journal-table td{padding:6px 4px}
+  .journal-table th{font-size:9px;padding:5px 4px}
+  .journal-table .cr{padding-left:6px}
+  .journal-table .amount{font-size:10px}
 }
 ::-webkit-scrollbar{width:4px}
 ::-webkit-scrollbar-track{background:transparent}
@@ -537,7 +546,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
 const CATEGORIES = [
   { id:'commercial', label:'商業簿記', icon:'landmark', units:[
     { id:'c01', num:'C01', title:'仕訳の基礎復習', freq:'high', diff:1,
-      concept:`<p><strong>仕訳</strong>とは取引を借方（左）と貸方（右）に分けて記録する作業です。<span class="hl">借方合計 = 貸方合計</span> が常に成立します。</p><div class="viz-taccount"><div class="tac-header">T 勘 定</div><div class="tac-body"><div class="tac-side tac-dr"><div class="tac-side-label">借方（左側）</div><div class="tac-side-desc">資産の増加<br>負債の減少<br>純資産の減少<br>費用の発生</div></div><div class="tac-divider"></div><div class="tac-side tac-cr"><div class="tac-side-label">貸方（右側）</div><div class="tac-side-desc">資産の減少<br>負債の増加<br>純資産の増加<br>収益の発生</div></div></div></div><p>勘定科目は5グループに分類されます。</p><div class="viz-groups"><div class="vg-card vg-asset"><div class="vg-name">資産</div><div class="vg-rule">増加→借方<br>減少→貸方</div></div><div class="vg-card vg-liability"><div class="vg-name">負債</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-equity"><div class="vg-name">純資産</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-revenue"><div class="vg-name">収益</div><div class="vg-rule">発生→貸方<br>消滅→借方</div></div><div class="vg-card vg-expense"><div class="vg-name">費用</div><div class="vg-rule">発生→借方<br>消滅→貸方</div></div></div><p>例：商品¥100,000を掛けで仕入れた</p><div class="journal-wrap"><table class="journal-table"><tr><th>借方</th><th>金額</th><th>貸方</th><th>金額</th></tr><tr><td class="dr">仕入</td><td class="amount">100,000</td><td class="cr">買掛金</td><td class="amount">100,000</td></tr></table></div>`,
+      concept:`<p><strong>仕訳</strong>とは取引を借方（左）と貸方（右）に分けて記録する作業です。<span class="hl">借方合計 = 貸方合計</span> が常に成立します。</p><div class="viz-taccount"><div class="tac-header">T 勘 定</div><div class="tac-body"><div class="tac-side tac-dr"><div class="tac-side-label">借方（左側）</div><div class="tac-side-desc">資産の増加<br>負債の減少<br>純資産の減少<br>費用の発生</div></div><div class="tac-divider"></div><div class="tac-side tac-cr"><div class="tac-side-label">貸方（右側）</div><div class="tac-side-desc">資産の減少<br>負債の増加<br>純資産の増加<br>収益の発生</div></div></div></div><p>勘定科目は5グループに分類されます。</p><div class="viz-groups"><div class="vg-card vg-asset"><div class="vg-name">資産</div><div class="vg-rule">増加→借方<br>減少→貸方</div></div><div class="vg-card vg-liability"><div class="vg-name">負債</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-equity"><div class="vg-name">純資産</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-revenue"><div class="vg-name">収益</div><div class="vg-rule">発生→貸方<br>消滅→借方</div></div><div class="vg-card vg-expense"><div class="vg-name">費用</div><div class="vg-rule">発生→借方<br>消滅→貸方</div></div></div><p>例：商品¥100,000を掛けで仕入れた</p><div class="journal-wrap"><table class="journal-table"><tr><th>科目</th><th>金額</th><th>科目</th><th>金額</th></tr><tr><td class="dr">仕入</td><td class="amount">100,000</td><td class="cr">買掛金</td><td class="amount">100,000</td></tr></table></div>`,
       examtips:['第1問の仕訳問題は5問×4点＝<strong>20点</strong>。確実に取りに行く単元。','勘定科目名は<strong>正式名称</strong>で書くこと（例：「売掛」ではなく「売掛金」）。略称は不正解。','複合仕訳（借方または貸方が複数行）も頻出。合計金額が一致するか必ず確認。'],
       keypoints:['資産の増加 → 借方、減少 → 貸方','負債・純資産の増加 → 貸方、減少 → 借方','費用の発生 → 借方、収益の発生 → 貸方','<strong>貸借平均の原理</strong>：借方合計と貸方合計は必ず一致する'],
       quiz:[

sw.js

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