/* ==================================================================
   teach/theme.css —— 新手教程（参考站老攻略页）二次套皮
   ------------------------------------------------------------------
   老页面是 2008 年那种「切图表格」排版：边框角、底纹、标题栏、按钮
   全是小图。换皮脚本（D:\zfwork\zfteach4.php）已经做完了这些事：
     · 老站纯装饰图：不进页面、也不进包
     · 带文字的小图（标题条 / 按钮）→ 换成真文字
       （标题 → <b class="zkh">，按钮 → <a class="zkbtn">）
     · 正文大截图 → <img class="zkshot">，小图标 → <img class="zkico">
     · 写死的宽高 / 底色 / 对齐属性全清掉，表格只当排版容器
       （原来是 1px 边框的数据表 → <table data-zk="t">）
   所以这里只要把「剩下的干净 HTML」按本站主题排一遍版就行。
   本站四套配色（页头小圆点切换）在这里同样生效。
   ================================================================== */

/* 页面底色与字体（老页面 body 上写过 bgcolor / background，这里覆盖掉） */
body{background:var(--bg) !important;color:var(--fg) !important;
	font:14px/1.8 "Microsoft YaHei","SimSun",Arial,sans-serif !important}

/* 正文面板：和本站其它页面的卡片一致 */
.zkmain{background:var(--pan);border:1px solid var(--line);border-radius:6px;
	padding:14px 16px;overflow:hidden}

/* ---- 表格：老页面靠表格排版，装饰去掉之后只当容器 ---- */
.zkmain table{width:100%;max-width:100%;border-collapse:collapse;background:none;
	margin:0;table-layout:auto}
.zkmain td,.zkmain th{padding:3px 5px;vertical-align:top;line-height:1.85;
	word-wrap:break-word;background:none}
.zkmain td:empty,.zkmain th:empty{padding:0}

/* ---- 数据表（老页面 border="1" 那种）：给一条细边线 ---- */
.zkmain table[data-zk="t"]{margin:10px 0;border:1px solid var(--line);border-radius:4px}
.zkmain table[data-zk="t"] td,.zkmain table[data-zk="t"] th{
	border:1px solid var(--line);padding:4px 7px;font-size:13px;
	word-break:keep-all}      /* 中文词别被拆成两行（烈炎草 / 等级 这种） */
.zkmain table[data-zk="t"] tr:first-child td,
.zkmain table[data-zk="t"] th{background:var(--pan2);color:var(--acc);font-weight:bold}
.zkmain table[data-zk="t"] tr:hover td{background:var(--hover)}

/* ---- 图片：正文大图带细框，小图标跟文字基线对齐 ---- */
.zkmain img{max-width:100%;height:auto}
.zkmain img.zkshot{display:block;margin:10px 0;padding:3px;background:var(--pan2);
	border:1px solid var(--line);border-radius:4px}
.zkmain img.zkico{vertical-align:middle;margin:1px 2px;background:none;border:0}

/* ---- 老页面标题条 / 按钮图 换过来的文字 ---- */
.zkmain b.zkh{display:inline-block;margin:12px 0 6px;padding:2px 12px;
	background:var(--hover);border-left:3px solid var(--acc);border-radius:3px;
	color:var(--fg);font-size:15px;font-weight:bold;letter-spacing:1px}
.zkmain a.zkbtn{display:inline-block;margin:3px 6px 3px 0;padding:3px 12px;
	border:1px solid var(--line);border-radius:4px;background:var(--pan2);
	color:var(--dim);font-size:13px;line-height:1.6}
.zkmain a.zkbtn:hover{border-color:var(--acc);color:var(--acc);background:var(--hover)}

/* ---- 正文文字：<font color> 先统一，再按老页面本意映射到主题色 ---- */
.zkmain font{color:inherit !important;font-size:inherit !important}
.zkmain font[color="#F1F2EA"],.zkmain font[color="#f1f2ea"],
.zkmain font[color="#F9F7EC"],.zkmain font[color="#f9f7ec"],
.zkmain font[color="#FFFFFF"],.zkmain font[color="#ffffff"],
.zkmain font[color="#CCCCCC"],.zkmain font[color="#cccccc"],
.zkmain font[color="#000000"],.zkmain font[color="#000"]{color:var(--fg) !important}
.zkmain font[color="#FF0000"],.zkmain font[color="#ff0000"]{color:var(--red) !important}
.zkmain font[color="#990000"]{color:var(--acc) !important}
.zkmain font[color="#336600"],.zkmain font[color="#006600"],
.zkmain font[color="#008000"]{color:var(--green) !important}
.zkmain font[color="#0000FF"],.zkmain font[color="#0000ff"]{color:var(--blue) !important}
.zkmain font[color="#FFFF00"],.zkmain font[color="#ffff00"],
.zkmain font[color="#FF9900"]{color:var(--gold) !important}
.zkmain strong,.zkmain b:not(.zkh){color:var(--acc)}
.zkmain a{color:var(--link)}
.zkmain a:hover{color:var(--acc2)}
.zkmain input,.zkmain textarea,.zkmain select{background:var(--inp);color:var(--fg);
	border:1px solid var(--line);border-radius:3px}
.zkmain hr{border:0;border-top:1px dashed var(--line);margin:10px 0}
/* 老 Flash 演示（现代浏览器放不了）已由换皮脚本删掉，这里兜底 */
.zkmain object,.zkmain embed{display:none !important}

/* ---- 两栏布局：左边目录 + 右边正文（老页面那个空占位栏已经删掉） ---- */
.zklay{display:flex;align-items:flex-start;gap:14px}
.zklay-b{flex:1;min-width:0}

/* ---- 左侧目录 ---- */
.zkside{flex:0 0 176px;width:176px;background:var(--pan2);border:1px solid var(--line);border-radius:6px;
	padding:10px 12px;max-height:calc(100vh - 40px);overflow:auto}
.zkside b{display:block;color:var(--acc);font-size:14px;margin:0 0 8px;
	border-left:3px solid var(--acc);padding-left:6px;letter-spacing:1px}
.zkside a{display:block;padding:5px 6px;border-radius:4px;color:var(--dim);font-size:13px;line-height:1.5}
.zkside a:hover{background:var(--hover);color:var(--fg)}
.zkside a.on{background:var(--hover);color:var(--acc);font-weight:bold}
.zkside hr{border:0;border-top:1px dashed var(--line);margin:8px 0}

/* ---- 教程目录页（teach/index.php） ---- */
.tcards{overflow:hidden}
.tcards a{display:block;float:left;width:31.5%;margin:0 2.75% 12px 0;background:var(--pan);
	border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.tcards a:hover{border-color:var(--acc);background:var(--pan2)}
.tcards a b{display:block;color:var(--fg);font-size:15px}
.tcards a span{display:block;color:var(--dim);font-size:12px}
.tcards a:nth-child(3n){margin-right:0}
@media (max-width:900px){ .tcards a{float:none;width:100%;margin-right:0} }
.tgrp{margin:18px 0 0}
.tgrp h2{font-size:16px;color:var(--acc);margin:0 0 10px;border-left:3px solid var(--acc);padding-left:8px}

/* ---- 窄屏：老页面那些两栏表格挤在一起不好看，让左栏先收窄 ---- */
@media (max-width:820px){
	.zklay{display:block}
	.zkside{width:auto;max-height:none;margin-bottom:12px}
	.zkmain td,.zkmain th{padding:2px 3px}
	.zkmain table[data-zk="t"] td,.zkmain table[data-zk="t"] th{padding:3px 4px;font-size:12px}
}