<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>27政治理论预测 · 详细介绍（可点击版）</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--primary:#1f67dd; --primary-light:#e7f0ff; --primary-container:#d3e3ff;
--surface:#fff; --surface-low:#f5f7fa; --surface-high:#e8eaed;
--outline:#dadce0; --text:#1f1f1f; --text2:#5f6368;
--ok:#188038; --err:#d93025; --warn:#f7ba2a;
--r-s:8px; --r-m:16px; --r-l:24px;
--el1:0 1px 2px rgba(60,64,67,.1),0 2px 6px 2px rgba(60,64,67,.07);
--el2:0 1px 3px rgba(60,64,67,.15),0 2px 8px 3px rgba(60,64,67,.1);
}
body{
background:#eef1f6; padding:26px 14px 60px;
font-family:'Google Sans','PingFang SC','Microsoft YaHei',sans-serif;
color:var(--text); line-height:1.7;
}
.wrap{max-width:800px;margin:0 auto}
.note{background:#fff8e6;border-left:4px solid var(--warn);padding:12px 16px;
border-radius:6px;font-size:13px;color:#7a5b12;margin-bottom:20px;line-height:1.8}
.note b{color:#b8791a}
.note code{background:#fff;padding:2px 6px;border-radius:4px;font-size:12px}

/* ============ 标签页容器（纯 CSS，无 JS）============ */
.tabs-container{
font-family:inherit; background:var(--surface); border-radius:var(--r-l);
box-shadow:var(--el1); overflow:hidden;
}
.tabs-container:hover{box-shadow:var(--el2)}
.tabs-header{
display:flex; justify-content:space-between;
background:var(--surface-low); padding:4px; position:relative;
border-radius:var(--r-l) var(--r-l) 0 0; overflow:hidden;
}
.tabs-header::after{
content:''; position:absolute; bottom:0; left:0; height:3px;
width:calc(100% / 3); background:var(--primary);
transform:translateX(0%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#tab1:checked ~ .tabs-header::after{transform:translateX(0%)}
#tab2:checked ~ .tabs-header::after{transform:translateX(100%)}
#tab3:checked ~ .tabs-header::after{transform:translateX(200%)}
.tab-input{display:none}
.tab-label{
flex:1; text-align:center; padding:13px 8px; font-size:14.5px;
cursor:pointer; color:var(--text2); transition:color .25s,background .25s;
user-select:none; font-weight:500;
}
.tab-label:hover{background:rgba(31,103,221,.06); color:var(--primary)}
#tab1:checked ~ .tabs-header label[for="tab1"],
#tab2:checked ~ .tabs-header label[for="tab2"],
#tab3:checked ~ .tabs-header label[for="tab3"]{color:var(--primary); font-weight:700}
.tab-content{display:none; padding:22px 24px 26px; animation:fade .35s ease}
#tab1:checked ~ .tabs-content #content1,
#tab2:checked ~ .tabs-content #content2,
#tab3:checked ~ .tabs-content #content3{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ 折叠面板（纯 CSS）============ */
.accordion{border-radius:var(--r-m); overflow:hidden; background:var(--surface);
box-shadow:var(--el1); margin-bottom:12px}
.accordion-checkbox{display:none}
.accordion-header{
display:flex; align-items:center; justify-content:space-between;
padding:15px 18px; cursor:pointer; user-select:none; transition:background .2s}
.accordion-header:hover{background:var(--surface-low)}
.accordion-title{font-size:15px;font-weight:700}
.accordion-subtitle{display:block;font-size:12.5px;color:var(--text2);font-weight:400;margin-top:2px}
.accordion-icon{width:14px;height:14px;flex-shrink:0;position:relative;margin-left:12px}
.accordion-icon::before,.accordion-icon::after{
content:''; position:absolute; background:var(--text2); border-radius:2px;
transition:transform .3s, opacity .3s}
.accordion-icon::before{width:14px;height:2px;top:6px}
.accordion-icon::after{width:2px;height:14px;left:6px}
.accordion-checkbox:checked ~ .accordion-header .accordion-icon::after{transform:rotate(90deg);opacity:0}
.accordion-checkbox:checked ~ .accordion-header{background:var(--primary-light)}
.accordion-content{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.accordion-checkbox:checked ~ .accordion-content{max-height:3000px}
.accordion-inner{padding:4px 18px 18px; border-top:1px solid var(--outline)}

/* ============ 小组件 ============ */
.text-red{color:var(--err)} .text-purple{color:#7b3fd4}
.text-green{color:var(--ok)} .text-blue{color:var(--primary)}
.mb-10{margin-bottom:10px} .mb-14{margin-bottom:14px}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12.5px;margin:0 6px 6px 0}
.badge-primary{background:var(--primary-container);color:#0b4bb8;font-weight:600}
.badge-ok{background:#d7f0dd;color:#0d5c2a;font-weight:600}
.badge-warn{background:#fdecc8;color:#8a5a00;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stat{background:var(--surface-low);border-radius:var(--r-m);padding:14px 6px;text-align:center}
.stat b{display:block;font-size:22px;color:var(--primary);line-height:1.25}
.stat span{font-size:11.5px;color:var(--text2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row img{width:100%;border-radius:var(--r-s);border:1px solid var(--outline)}
.placeholder{background:var(--surface-high);border:1px dashed var(--outline);
border-radius:var(--r-s);padding:26px 12px;text-align:center;color:var(--text2);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:4px 0 12px}
th{background:var(--primary-light);color:#0b4bb8;padding:9px 10px;text-align:left;border:1px solid #c9dcfb}
td{padding:9px 10px;border:1px solid var(--outline)}
tr:nth-child(even) td{background:#fafbfd}
pre{background:#1e2430;color:#c8d3e8;padding:14px;border-radius:var(--r-s);
font-size:12.5px;line-height:1.8;overflow-x:auto;font-family:Consolas,Monaco,monospace}
pre .h{color:#6ee7c8} pre .c{color:#6b7a94}
ul{margin:0 0 10px;padding-left:22px} li{margin-bottom:4px;font-size:14px}
h3{font-size:15px;margin:16px 0 8px;padding-left:10px;border-left:4px solid var(--primary)}
.tip{background:var(--primary-light);border:1px solid #c9dcfb;border-radius:var(--r-s);
padding:12px 15px;font-size:13px;line-height:1.85;color:#123a75;margin-top:14px}
</style>
</head>
<body>
<div class="wrap">

<div class="note">
<b>这就是你要的效果 —— 零 JavaScript。</b><br>
实现原理：<code><input type="radio" id="tab1" checked></code> +
<code><label for="tab1"></code>，再用 CSS 的
<code>#tab1:checked ~ .xxx</code> 兄弟选择器控制显隐。<br>
<b>关键：</b>必须整段复制（含 <code><style> 全部内容</code>），
只粘 body 部分会没有样式。平台会过滤 script，但 <b>style 标签能存活</b>。
</div>

<div class="tabs-container">
<input type="radio" name="tabs" id="tab1" class="tab-input" checked>
<input type="radio" name="tabs" id="tab2" class="tab-input">
<input type="radio" name="tabs" id="tab3" class="tab-input">

<div class="tabs-header">
<label for="tab1" class="tab-label">卡组介绍</label>
<label for="tab2" class="tab-label">界面与特色</label>
<label for="tab3" class="tab-label">使用与更新</label>
</div>

<div class="tabs-content">

<!-- ===== Tab1 卡组介绍 ===== -->
<div class="tab-content" id="content1">

<div class="accordion">
<input type="checkbox" id="acc1" class="accordion-checkbox">
<label for="acc1" class="accordion-header">
<div class="accordion-title">
<span class="text-red">一、这是什么</span>
<span class="accordion-subtitle">按【时政月份】+【专题事件】双维度整理</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<p style="font-size:14px">全部题目源自「365时政」题库，覆盖 <b>2024 年 1 月至 2026 年 9 月</b>的时政内容。
每题均含完整解析，并标注原文出处。</p>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc2" class="accordion-checkbox" checked>
<label for="acc2" class="accordion-header">
<div class="accordion-title">
<span class="text-purple">二、内容规模</span>
<span class="accordion-subtitle">全部数据发包前实测统计</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<div class="stats">
<div class="stat"><b>5283</b><span>题目总数</span></div>
<div class="stat"><b>341</b><span>细分题库</span></div>
<div class="stat"><b>33</b><span>覆盖月份</span></div>
<div class="stat"><b>100%</b><span>解析覆盖</span></div>
</div>
<table>
<tr><th style="width:38%">项目</th><th>数据</th></tr>
<tr><td>时间跨度</td><td>2024.01 — 2026.09</td></tr>
<tr><td>单选题 / 多选题</td><td>5276 道 / 7 道</td></tr>
<tr><td>选项完整率</td><td>5283 / 5283（100%）</td></tr>
<tr><td>文件体积</td><td>27.8 MB</td></tr>
</table>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc3" class="accordion-checkbox">
<label for="acc3" class="accordion-header">
<div class="accordion-title">
<span class="text-blue">三、题目来源</span>
<span class="accordion-subtitle">四大类，共 341 个题库</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<div class="mb-10">
<span class="badge badge-primary">政治局会议 30 个</span>
<span class="badge badge-primary">三中全会 170 题</span>
<span class="badge badge-primary">月度汇编 33 个月</span>
<span class="badge badge-primary">考前必刷 34 个</span>
</div>
<ul>
<li><b>中共中央政治局会议</b>—— 2024.1.31起逐月覆盖，几乎无遗漏</li>
<li><b>中央全会与重要会议</b>—— 二十届三中全会、中央经济工作会议、中央农村工作会议、民主生活会等</li>
<li><b>月度时政汇编</b>—— 每月一组，单月 60 至 276 题</li>
<li><b>考前必刷（精选重点）</b>—— 跨月份高频考点串讲，适合冲刺</li>
</ul>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc4" class="accordion-checkbox">
<label for="acc4" class="accordion-header">
<div class="accordion-title">
<span class="text-green">四、牌组结构</span>
<span class="accordion-subtitle">按月份组织，可按月推进</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<pre>365时政
└── <span class="h">【高命中】2027年政治理论"预测"（持续更新）</span>
├── 考前必刷（精选重点） <span class="c">34 个题库</span>
├── 2024年1月（116题） <span class="c">14 个题库</span>
├── 2024年2月（92题） <span class="c">11 个题库</span>
├── ……（按月份逐月展开）
└── 2026年9月 <span class="c">13 个题库</span></pre>
<div class="placeholder">📷 此处插入「截图2_牌组结构.png」</div>
</div></div>
</div>

</div>

<!-- ===== Tab2 界面与特色 ===== -->
<div class="tab-content" id="content2">

<div class="accordion">
<input type="checkbox" id="acc5" class="accordion-checkbox" checked>
<label for="acc5" class="accordion-header">
<div class="accordion-title">
<span class="text-red">卡片特点</span>
<span class="accordion-subtitle">相比普通卡组做了四处优化</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<ul>
<li><span class="text-blue">①显示答案即出解析</span> —— 不用再点「解析」按钮翻找</li>
<li><span class="text-blue">② 序号自动分行</span> —— 题干中的 ①②③④⑤ 自动换行</li>
<li><span class="text-blue">③ 无多余题号干扰</span> —— 左上角不显示数字编号</li>
<li><span class="text-blue">④ 原版 MN3 模板</span> —— 支持夜间模式、答题进度、笔记标记；字体已打包，换设备不缺字</li>
</ul>
<div class="placeholder">📷 此处插入「截图1_答题界面.png」</div>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc6" class="accordion-checkbox">
<label for="acc6" class="accordion-header">
<div class="accordion-title">
<span class="text-purple">界面预览</span>
<span class="accordion-subtitle">答题与解析效果</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<div class="placeholder">📷 可放更多界面截图（正面 / 背面 / 夜间模式）</div>
</div></div>
</div>

</div>

<!-- ===== Tab3 使用与更新 ===== -->
<div class="tab-content" id="content3">

<div class="accordion">
<input type="checkbox" id="acc7" class="accordion-checkbox" checked>
<label for="acc7" class="accordion-header">
<div class="accordion-title">
<span class="text-blue">适用人群</span>
<span class="accordion-subtitle">谁该用这套题</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<div class="mb-10">
<span class="badge badge-ok">考研政治</span>
<span class="badge badge-ok">公务员</span>
<span class="badge badge-ok">事业编</span>
<span class="badge badge-ok">三支一扶</span>
<span class="badge badge-ok">政治理论科目</span>
</div>
<ul>
<li>习惯按「时政月份」积累，而非按专题突击</li>
<li>已刷过肖四肖八，需要用真题查缺补漏</li>
</ul>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc8" class="accordion-checkbox" checked>
<label for="acc8" class="accordion-header">
<div class="accordion-title">
<span class="text-green">使用建议</span>
<span class="accordion-subtitle">怎么刷效率最高</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<ul>
<li>每天固定 1—2 个牌组，按月推进，不要一次铺开</li>
<li>最后阶段用「考前必刷」做跨月份串讲</li>
<li>错题标记后反复刷，解析里的原文出处是重点记忆线索</li>
<li>多选题仅 7 道，集中精力即可</li>
</ul>
</div></div>
</div>

<div class="accordion">
<input type="checkbox" id="acc9" class="accordion-checkbox">
<label for="acc9" class="accordion-header">
<div class="accordion-title">
<span class="text-red">更新说明与声明</span>
<span class="accordion-subtitle">版本与使用范围</span>
</div>
<div class="accordion-icon"></div>
</label>
<div class="accordion-content"><div class="accordion-inner">
<p style="font-size:14px">本资源为「持续更新」版本，新增时政内容后会重新打包发布，
建议收藏本页或关注更新，避免使用过期版本。</p>
<div class="tip">
<b>数据说明：</b>题量 5283、题库数 341、解析覆盖率 100% 均为发包前实测统计。
导入后可自行核对：Anki 牌组浏览器 → 各牌组卡片数合计 = 5283。<br>
本资源仅供个人学习使用，请勿用于商业用途或二次售卖。
</div>
</div></div>
</div>

</div>

</div>
</div>

<div class="note" style="margin-top:22px;background:#eaf7ef;border-left-color:#28a745;color:#1d6b38">
<b>怎么用：</b>在编辑器的<b>源码模式</b>（有的编辑器叫「HTML 模式」）里，
把本页<b>去掉最外层说明框</b>后的全部内容粘进去。
如果没有源码模式，就先粘进去看是否渲染出标签页——
渲染成功说明平台放行 style 标签。
</div>

</div>
</body>
</html>