/* ============================================================
   3D手縫いマスター デモ版
   - 白ベース / ネイビー / ゴールドの教育向けデザイン
   - 電子黒板・タブレットで押しやすい大きなUI
   修正: まつりぬいを削除。
         ボタン付けを教科書の5手順（2本どり・ゆとり・
         糸足に巻く・玉どめ）に合わせて作り直し。
   ============================================================ */
:root{
  --hsm-navy:#1e3a5f;
  --hsm-navy-dark:#152c49;
  --hsm-gold:#d4af37;
  --hsm-bg:#faf8f3;
  --hsm-line:#e3ddd0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"BIZ UDGothic","M PLUS Rounded 1c","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--hsm-bg);
  color:var(--hsm-navy);
}
.hsm-root{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.hsm-hide{display:none !important} /* 比較モードで前へ/次へを隠すための共通クラス */

/* ---- ヘッダー ---- */
.hsm-header{
  background:var(--hsm-navy);color:#fff;
  padding:10px 18px;display:flex;align-items:baseline;gap:14px;
  border-bottom:4px solid var(--hsm-gold);flex:0 0 auto;
}
.hsm-header h1{font-size:1.15rem;letter-spacing:.06em}
.hsm-header h1 .hsm-3d{color:var(--hsm-gold)}
.hsm-header p{font-size:.72rem;opacity:.85}

/* ---- メイン3カラム ---- */
.hsm-main{flex:1 1 auto;display:flex;min-height:0}

/* 左：縫い方一覧 */
.hsm-menu{
  flex:0 0 168px;background:#fff;border-right:1px solid var(--hsm-line);
  padding:12px 10px;overflow-y:auto;
}
.hsm-menu-group{font-size:.72rem;font-weight:bold;color:#8b8272;
  margin:10px 4px 6px;letter-spacing:.1em}
.hsm-menu-group:first-child{margin-top:2px}
.hsm-menu button{
  display:block;width:100%;margin:6px 0;padding:11px 12px;
  font-family:inherit;font-size:.95rem;font-weight:bold;color:var(--hsm-navy);
  background:#fff;border:2px solid var(--hsm-line);border-radius:999px;
  cursor:pointer;transition:background .15s,border-color .15s;text-align:center;
}
.hsm-menu button:hover{border-color:var(--hsm-navy)}
.hsm-menu button.is-active{
  background:var(--hsm-navy);color:#fff;border-color:var(--hsm-navy);
  box-shadow:0 0 0 2px var(--hsm-gold) inset;
}

/* 中央：3D表示 */
.hsm-stage{flex:1 1 auto;position:relative;min-width:0;background:
  radial-gradient(ellipse at 50% 40%, #fffdf8 0%, var(--hsm-bg) 75%)}
.hsm-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.hsm-stage canvas:active{cursor:grabbing}
.hsm-caption{
  position:absolute;top:10px;left:12px;pointer-events:none;
  background:rgba(255,255,255,.88);border:1px solid var(--hsm-line);
  border-left:5px solid var(--hsm-gold);border-radius:10px;padding:8px 14px;
  max-width:min(78%,420px);
}
.hsm-caption .hsm-cap-tech{font-size:.78rem;color:#6d6555}
.hsm-caption .hsm-cap-step{font-size:1.08rem;font-weight:bold}
.hsm-hint{
  position:absolute;bottom:8px;left:12px;pointer-events:none;
  font-size:.7rem;color:#9a917f;
}

/* 右：視点切替 */
.hsm-views{
  flex:0 0 138px;background:#fff;border-left:1px solid var(--hsm-line);
  padding:12px 10px;overflow-y:auto;
}
.hsm-views-title{font-size:.72rem;font-weight:bold;color:#8b8272;
  margin:2px 4px 8px;letter-spacing:.1em}
.hsm-views button{
  display:block;width:100%;margin:6px 0;padding:11px 8px;
  font-family:inherit;font-size:.92rem;font-weight:bold;color:var(--hsm-navy);
  background:#fff;border:2px solid var(--hsm-line);border-radius:999px;cursor:pointer;
}
.hsm-views button:hover{border-color:var(--hsm-navy)}
.hsm-views button.is-active{background:var(--hsm-navy);color:#fff;border-color:var(--hsm-navy)}
.hsm-legend{margin-top:14px;font-size:.7rem;color:#7d7463;line-height:1.7}
.hsm-legend .hsm-lg-thread{color:#cf3b3b;font-weight:bold}
.hsm-legend .hsm-lg-gold{color:#b8931f;font-weight:bold}

/* ---- 下部：手順カード＋操作 ---- */
.hsm-bottom{flex:0 0 auto;background:#fff;border-top:1px solid var(--hsm-line);padding:8px 12px 10px}
.hsm-steps{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;align-items:center}
.hsm-steps button{
  flex:0 0 auto;font-family:inherit;font-size:.88rem;font-weight:bold;
  color:var(--hsm-navy);background:#fff;border:2px solid var(--hsm-line);
  border-radius:12px;padding:9px 14px;cursor:pointer;white-space:nowrap;
}
.hsm-steps button.is-active{
  background:var(--hsm-navy);color:#fff;border-color:var(--hsm-navy);
  box-shadow:0 2px 0 var(--hsm-gold);
}
/* 比較モード用のセレクトボックス */
.hsm-steps .hsm-cmp-label{
  flex:0 0 auto;font-size:.88rem;font-weight:bold;color:#8b8272;white-space:nowrap;
}
.hsm-steps select{
  flex:0 0 auto;font-family:inherit;font-size:.92rem;font-weight:bold;
  color:var(--hsm-navy);background:#fff;border:2px solid var(--hsm-line);
  border-radius:12px;padding:9px 10px;cursor:pointer;
}
.hsm-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.hsm-controls button{
  font-family:inherit;font-size:.95rem;font-weight:bold;
  color:var(--hsm-navy);background:#fff;border:2px solid var(--hsm-navy);
  border-radius:999px;padding:10px 18px;cursor:pointer;min-width:96px;
}
.hsm-controls button:hover{background:#eef2f7}
.hsm-controls button.hsm-primary{background:var(--hsm-navy);color:#fff}
.hsm-controls button.hsm-primary:hover{background:var(--hsm-navy-dark)}
.hsm-controls button.is-on{background:var(--hsm-gold);border-color:var(--hsm-gold);color:#fff}

/* ---- レスポンシブ（タブレット縦・スマホ） ---- */
@media (max-width:840px){
  .hsm-main{flex-direction:column}
  .hsm-menu{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--hsm-line);padding:8px 10px;align-items:center}
  .hsm-menu-group{margin:0 4px;white-space:nowrap}
  .hsm-menu button{width:auto;margin:0;white-space:nowrap;padding:9px 14px;font-size:.86rem}
  .hsm-stage{flex:1 1 auto}
  .hsm-views{flex:0 0 auto;display:flex;gap:6px;align-items:center;overflow-x:auto;
    border-left:none;border-top:1px solid var(--hsm-line);padding:8px 10px}
  .hsm-views-title{margin:0 4px;white-space:nowrap}
  .hsm-views button{width:auto;margin:0;white-space:nowrap;padding:9px 14px;font-size:.86rem}
  .hsm-legend{display:none}
  .hsm-controls button{flex:1 1 auto;min-width:80px;padding:9px 8px;font-size:.85rem}
}