/* === 基本設定 === */
:root{
  --c-bg:#f5f7fb;
  --c-card:#ffffff;
  --c-text:#1f2a44;
  --c-sub:#566179;
  --c-border:#e3e8f0;
  --c-primary:#2563eb;
  --c-primary-d:#1d4ed8;
  --c-accent:#16a34a;
  --c-warn:#ea580c;
  --c-danger:#dc2626;
  --r:10px;
  --shadow:0 2px 8px rgba(20,30,60,0.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  font-size:16px;line-height:1.65}
button{font-family:inherit}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* === レイアウト === */
#app{display:flex;min-height:100vh}
#sidebar{
  width:260px;background:#0f172a;color:#e2e8f0;padding:18px 12px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
#sidebar h2{font-size:15px;color:#94a3b8;margin:18px 8px 6px;letter-spacing:.04em}
#sidebar .navItem{
  display:block;width:100%;text-align:left;background:transparent;border:0;color:#e2e8f0;
  padding:8px 10px;border-radius:8px;font-size:14px;cursor:pointer;margin:1px 0;
}
#sidebar .navItem:hover{background:#1e293b}
#sidebar .navItem.active{background:var(--c-primary);color:#fff;font-weight:600}
#sidebar .brand{font-size:16px;font-weight:700;padding:6px 10px 14px;border-bottom:1px solid #1e293b;margin-bottom:8px}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--c-border);
  padding:10px 18px;display:flex;align-items:center;gap:12px;z-index:5;
}
#topbar h1{font-size:18px;margin:0;flex:1;color:var(--c-text)}
#menuBtn{display:none;background:transparent;border:0;font-size:22px;cursor:pointer}
#scoreBadge{
  background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;
  padding:6px 10px;border-radius:999px;font-size:13px;font-weight:600;
}
#screen{padding:20px;max-width:1100px;width:100%;margin:0 auto}
#footerNote{padding:14px 20px;color:var(--c-sub);font-size:12px;text-align:center}

#bottomNav{display:none}

/* === カード／パーツ === */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:18px}
.card h3{margin:14px 0 6px;font-size:15px;color:var(--c-sub)}
.muted{color:var(--c-sub)}
.pill{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;
  padding:2px 10px;font-size:12px;margin-right:6px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.row>.col{flex:1 1 280px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}

.btn{
  display:inline-block;background:var(--c-primary);color:#fff;border:0;border-radius:8px;
  padding:9px 14px;cursor:pointer;font-size:14px;font-weight:600;
}
.btn:hover{background:var(--c-primary-d)}
.btn.secondary{background:#fff;color:var(--c-primary);border:1px solid var(--c-primary)}
.btn.ghost{background:transparent;color:var(--c-sub);border:1px solid var(--c-border)}
.btn.accent{background:var(--c-accent)}
.btn.warn{background:var(--c-warn)}
.btn.small{padding:5px 10px;font-size:12px}

input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--c-border);border-radius:8px;
  font:inherit;background:#fff;color:var(--c-text);
}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:13px;color:var(--c-sub);margin:8px 0 4px}
fieldset{border:1px solid var(--c-border);border-radius:8px;padding:10px 14px;margin:8px 0}
legend{font-size:13px;color:var(--c-sub);padding:0 6px}

/* 進捗バー */
.progress{background:#e5e7eb;height:10px;border-radius:999px;overflow:hidden;margin:6px 0}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);width:0}

/* バッジ */
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;margin-right:4px}
.b-blue{background:#dbeafe;color:#1d4ed8}
.b-green{background:#dcfce7;color:#166534}
.b-orange{background:#ffedd5;color:#9a3412}
.b-gray{background:#e5e7eb;color:#374151}

/* スライド */
.slide{background:#fff;border:1px solid var(--c-border);border-radius:var(--r);padding:22px;min-height:300px}
.slide h2{margin-top:0}
.slideNav{display:flex;justify-content:space-between;margin-top:14px}
.slide pre{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:8px;overflow:auto;font-size:13px}
.slide .hint{background:#fef9c3;border-left:4px solid #eab308;padding:8px 10px;border-radius:6px;margin:10px 0}
.slide .quiz{background:#eff6ff;border-left:4px solid #3b82f6;padding:8px 10px;border-radius:6px;margin:10px 0}

/* コード演習 */
.codePanes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.codePanes textarea{height:160px;font-family:Consolas,Menlo,monospace;font-size:13px}
.previewFrame{width:100%;height:300px;background:#fff;border:1px solid var(--c-border);border-radius:8px}
@media(max-width:800px){.codePanes{grid-template-columns:1fr}}

/* チェックリスト */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:6px 0;border-bottom:1px dashed var(--c-border);display:flex;align-items:center;gap:8px}
.checklist li:last-child{border:0}

/* レスポンシブ */
@media(max-width:900px){
  #sidebar{position:fixed;left:-280px;top:0;height:100vh;transition:left .2s;z-index:30}
  #sidebar.open{left:0}
  #menuBtn{display:inline-block}
  #screen{padding:14px;padding-bottom:80px}
  #bottomNav{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;
    border-top:1px solid var(--c-border);z-index:20;padding:6px;gap:4px;overflow-x:auto;
  }
  #bottomNav button{
    flex:0 0 auto;background:transparent;border:0;color:var(--c-sub);
    padding:6px 10px;font-size:12px;border-radius:6px;cursor:pointer;
  }
  #bottomNav button.active{background:var(--c-primary);color:#fff}
}