:root {
    --bg: #0d1117; --bg-card: #161b22; --bg-slide: #f4f6f7;
    --accent: #d4a537; --text: #e6edf3; --text-muted: #8b949e;
    --border: #30363d; --dark: #1a1a2e; --navy: #0a2f5c;
    --bull: #27ae60; --bear: #c0392b; --dark-text: #2c3e50;
    --blue: #2e86c1; --info-bg: #e8f0fe;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI','Meiryo UI','Hiragino Sans',sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; user-select:none; -webkit-user-select:none; }

/* Toolbar */
.toolbar { background:var(--bg-card); border-bottom:2px solid var(--accent); padding:0.5rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.toolbar a { color:var(--accent); text-decoration:none; font-size:0.9rem; font-weight:600; }
.toolbar .title { color:var(--text); font-size:0.95rem; font-weight:600; flex:1; }
.nav-controls { display:flex; align-items:center; gap:0.5rem; }
.nav-btn { background:var(--border); color:var(--text); border:none; width:36px; height:36px; border-radius:6px; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-btn:hover { background:var(--accent); color:#0a2f5c; }
.nav-btn:disabled { opacity:0.3; cursor:default; }
.page-info { color:var(--text-muted); font-size:0.8rem; min-width:60px; text-align:center; }

/* Slides */
.slide-area { flex:1; display:flex; align-items:center; justify-content:center; padding:1rem; overflow:hidden; }
.slide { width:100%; max-width:1400px; aspect-ratio:16/9; border-radius:8px; box-shadow:0 4px 30px rgba(0,0,0,0.5); display:none; overflow:hidden; position:relative; }
.slide.active { display:flex; }
.hint { text-align:center; padding:0.2rem; color:var(--text-muted); font-size:0.65rem; opacity:0.5; }

/* Cover */
.cover { background:linear-gradient(135deg,#1a1a2e,#0a2f5c); flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cover .sn { color:var(--accent); font-size:1.4rem; letter-spacing:6px; }
.cover h1 { color:#fff; font-size:5.5rem; font-weight:800; letter-spacing:4px; }
.cover .sub { color:var(--text-muted); font-size:1.5rem; margin-top:0.3rem; }
.cover .line { width:120px; height:3px; background:var(--accent); margin:1.5rem auto; }
.cover .brand { color:var(--text-muted); font-size:0.9rem; }

/* Content */
.cnt { background:var(--bg-slide); flex-direction:column; }
.hdr { background:var(--dark); padding:0.8rem 2.5rem; border-bottom:3px solid var(--accent); }
.hdr h2 { color:#fff; font-size:1.8rem; font-weight:700; }
.body { flex:1; display:flex; padding:2rem 2.5rem 1.5rem; gap:2rem; overflow:hidden; align-items:center; }
.body.col { flex-direction:column; align-items:stretch; justify-content:center; }
.txt { flex:1; }
.vis { flex:1.5; display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; }
.vis img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.txt ul { list-style:none; padding:0; }
.txt li { padding:0.5rem 0; font-size:1.4rem; color:var(--dark-text); line-height:1.7; }
/* Text-only slides: when .body has no .vis child, center and enlarge text */
.body:not(:has(.vis)) { justify-content:center; padding:2.5rem 4rem; }
.body:not(:has(.vis)) .txt { max-width:900px; margin:0 auto; }
.body:not(:has(.vis)) .txt li { font-size:1.7rem; line-height:1.85; padding:0.65rem 0; }
.body:not(:has(.vis)) .txt .pbox { font-size:1.45rem; padding:1.3rem 1.8rem; margin-top:1.2rem; }

/* Summary slides: center and enlarge */
.body.col { padding:2rem 4rem; justify-content:center; }
.txt li::before { content:"▪ "; color:var(--navy); font-weight:bold; }
.pbox { background:var(--info-bg); border-left:4px solid var(--blue); padding:1rem 1.4rem; margin-top:1rem; border-radius:0 6px 6px 0; font-size:1.25rem; color:var(--dark-text); line-height:1.6; }
.ftr { display:none; }

/* Closing */
.cls { background:linear-gradient(135deg,#1a1a2e,#0a2f5c); flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.5rem; }
.cls h2 { color:var(--accent); font-size:3.5rem; font-weight:800; }
.cls .cls-buttons { display:flex; gap:1.5rem; margin-top:1rem; }
.cls .cls-btn {
    display:inline-block; padding:1rem 2.5rem; border-radius:12px;
    font-size:1.3rem; font-weight:700; text-decoration:none;
    transition:all 0.2s; cursor:pointer;
}
.cls .cls-btn-next {
    background:linear-gradient(135deg,#d4a537,#c49a2e); color:#0a2f5c;
    box-shadow:0 4px 16px rgba(212,165,55,0.3);
}
.cls .cls-btn-next:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(212,165,55,0.4); }
.cls .cls-btn-home {
    background:rgba(255,255,255,0.1); color:#e6edf3; border:2px solid rgba(255,255,255,0.2);
}
.cls .cls-btn-home:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }

/* Summary */
.srow { display:flex; gap:1.2rem; align-items:center; margin:0.5rem 0; }
.srow .lbl { background:var(--navy); color:#fff; padding:0.7rem 1.4rem; border-radius:10px; min-width:220px; text-align:center; font-weight:700; font-size:1.25rem; flex-shrink:0; }
.srow .val { color:var(--dark-text); font-size:1.45rem; line-height:1.6; }

/* Table */
.stbl { border-collapse:collapse; width:100%; margin:0.5rem 0; }
.stbl th { background:var(--navy); color:#fff; padding:0.7rem 1rem; font-size:1.05rem; text-align:left; border:1px solid var(--border); }
.stbl td { padding:0.6rem 1rem; font-size:1.05rem; color:var(--dark-text); border:1px solid #ddd; }
.stbl tr:nth-child(even) td { background:#eaecee; }

svg text { font-family:'Segoe UI','Meiryo UI',sans-serif; }

/* Quiz */
.quiz { background:linear-gradient(180deg, #f0f4ff 0%, #e8f0fe 100%); flex-direction:column; }
.quiz .hdr { background:linear-gradient(135deg, #0a2f5c, #1a4a7a); }
.quiz .hdr h2 { color:#d4a537; font-size:1.6rem; }
.quiz-body {
    flex:1; display:flex; flex-direction:column; justify-content:center;
    padding:2rem 4rem; gap:1.5rem; overflow:auto;
    max-width:1000px; margin:0 auto; width:100%;
}
.q-item {
    background:#fff; border:2px solid #c8d6e5; border-radius:16px;
    padding:1.5rem 2rem; transition:all 0.3s;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.q-item:hover { border-color:#2e86c1; box-shadow:0 4px 16px rgba(46,134,193,0.12); }
.q-item.correct { border-color:#27ae60; background:#eafaf1; box-shadow:0 4px 16px rgba(39,174,96,0.15); }
.q-item.wrong { border-color:#e74c3c; background:#fdf2f0; box-shadow:0 4px 16px rgba(231,76,60,0.12); }
.q-text { font-size:1.35rem; color:#1a1a2e; font-weight:700; margin-bottom:1rem; line-height:1.5; }
.q-opts { display:flex; gap:1rem; }
.q-btn {
    flex:1; padding:1rem 1.2rem; border:2.5px solid #dce3eb; border-radius:12px;
    background:#f8fafd; color:#2c3e50; font-size:1.2rem; font-weight:600;
    cursor:pointer; transition:all 0.2s; text-align:center; line-height:1.4;
}
.q-btn:hover { border-color:#2e86c1; background:#e1ecf7; transform:translateY(-1px); }
.q-btn.selected { border-color:#0a2f5c; background:#cde0f5; color:#0a2f5c; transform:translateY(-1px); box-shadow:0 3px 12px rgba(10,47,92,0.15); }
.q-btn.right { border-color:#27ae60; background:#d4efdf; color:#1e8449; font-weight:700; }
.q-btn.wrongsel { border-color:#e74c3c; background:#fadbd8; color:#c0392b; }
.q-btn:disabled { cursor:default; transform:none; }
.quiz-result { text-align:center; margin-top:0.8rem; font-size:1.6rem; font-weight:800; }
.quiz-result.pass { color:#27ae60; }
.quiz-result.fail { color:#e74c3c; }
.quiz-submit {
    display:block; margin:0.5rem auto 0; padding:1rem 4rem;
    background:linear-gradient(135deg, #0a2f5c, #1a4a7a); color:#fff; border:none;
    border-radius:12px; font-size:1.3rem; font-weight:700; cursor:pointer;
    transition:all 0.2s; box-shadow:0 4px 12px rgba(10,47,92,0.2);
}
.quiz-submit:hover { background:linear-gradient(135deg, #d4a537, #c49a2e); color:#0a2f5c; transform:translateY(-2px); box-shadow:0 6px 20px rgba(212,165,55,0.3); }
.quiz-submit:disabled { opacity:0.35; cursor:default; transform:none; box-shadow:none; }

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    .slide { max-width:100%; border-radius:4px; }
    .body { padding:1.5rem 2rem 1rem; gap:1.5rem; }
    .txt li { font-size:1.2rem; }
    .pbox { font-size:1.1rem; }
    .hdr h2 { font-size:1.5rem; }
    .cover h1 { font-size:4rem; }
    .srow .lbl { min-width:160px; font-size:1rem; }
    .srow .val { font-size:1.1rem; }
    .cls h2 { font-size:2.8rem; }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
    body { height:auto; min-height:100vh; }
    .toolbar { padding:0.4rem 0.8rem; gap:0.5rem; }
    .toolbar .title { font-size:0.75rem; }
    .nav-btn { width:32px; height:32px; font-size:1rem; }

    .slide-area { padding:0.3rem; }
    .slide { aspect-ratio:auto; min-height:85vh; border-radius:4px; max-width:100%; }

    /* Cover */
    .cover h1 { font-size:2.5rem; letter-spacing:2px; }
    .cover .sn { font-size:1rem; }
    .cover .sub { font-size:1rem; }

    /* Content */
    .hdr { padding:0.6rem 1rem; }
    .hdr h2 { font-size:1.2rem; }
    .body { flex-direction:column; padding:1rem; gap:1rem; align-items:stretch; overflow-y:auto; }
    .txt { flex:none; }
    .vis { flex:none; width:100%; }
    .txt li { font-size:1rem; padding:0.3rem 0; line-height:1.5; }
    .pbox { font-size:0.95rem; padding:0.7rem 1rem; }
    .ftr { padding:0.2rem 1rem; font-size:0.6rem; }

    /* Summary */
    .srow { flex-direction:column; gap:0.3rem; }
    .srow .lbl { min-width:auto; width:100%; font-size:0.95rem; padding:0.4rem 0.8rem; }
    .srow .val { font-size:1rem; }

    /* Table */
    .stbl th, .stbl td { padding:0.4rem 0.5rem; font-size:0.85rem; }

    /* Closing */
    .cls { gap:1rem; }
    .cls h2 { font-size:2rem; }
    .cls .cls-buttons { flex-direction:column; gap:0.8rem; }
    .cls .cls-btn { padding:0.8rem 2rem; font-size:1.1rem; }

    /* Quiz */
    .quiz-body { padding:1rem 1.2rem; gap:1rem; }
    .q-item { padding:1rem 1.2rem; }
    .q-text { font-size:1.05rem; margin-bottom:0.6rem; }
    .q-opts { flex-direction:column; gap:0.6rem; }
    .q-btn { font-size:1rem; padding:0.8rem 1rem; }
    .quiz-submit { padding:0.8rem 2rem; font-size:1.1rem; }
    .quiz-result { font-size:1.2rem; }
}

/* ===== Responsive: Small Mobile ===== */
@media (max-width: 480px) {
    .cover h1 { font-size:1.8rem; }
    .cover .sub { font-size:0.85rem; }
    .hdr h2 { font-size:1.05rem; }
    .txt li { font-size:0.9rem; }
    .body { padding:0.8rem; }
    .cls h2 { font-size:1.5rem; }
    .cls .cls-btn { font-size:0.95rem; padding:0.7rem 1.5rem; }
}