/* qq1232.com — 第十六套界面：灰阶 + 单一亮红，交错时间轴
   #fafafa / #27272a 灰阶 + 亮红 #e63946 作唯一强调色。
   骨架新意：一手牌的六个阶段沿竖直中轴左右交错排布（zigzag timeline），
   前十二套均为纵向堆叠 / 侧栏 / 多栏，无一使用交错时间轴。 */

:root{
  --bg:#fafafa; --card:#ffffff; --ink:#18181b; --ink2:#27272a;
  --text:#3f3f46; --muted:#71717a; --line:#e4e4e7; --line2:#d4d4d8;
  --red:#e63946; --red-d:#c1121f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --w:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.9 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* 顶栏 */
.nb{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
.nb .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:18px}
.lg{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.lg i{width:26px;height:26px;background:var(--red);color:#fff;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:13px}
.nbn{display:flex;gap:22px;flex-wrap:wrap}
.nbn a{font-size:13.8px;color:var(--muted)}
.nbn a:hover,.nbn a.on{color:var(--red)}

/* 首屏 */
.top{background:var(--card);border-bottom:1px solid var(--line);padding:50px 0 44px}
.top .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center}
.top .wrap > *{min-width:0}
.tag{display:inline-block;background:#fee;color:var(--red-d);border-radius:4px;padding:4px 11px;font-size:12.4px;font-weight:700;letter-spacing:1.2px;margin-bottom:16px}
.top h1{margin:0 0 16px;font-size:clamp(28px,3.9vw,40px);line-height:1.28;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.top .lead{margin:0 0 24px;font-size:16px;line-height:1.98;max-width:38em}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kpi div{padding:13px 14px;border-right:1px solid var(--line)}
.kpi div:last-child{border-right:0}
.kpi b{display:block;font:800 20px/1.2 var(--sans);color:var(--red);letter-spacing:-.5px}
.kpi span{display:block;margin-top:3px;font-size:11.8px;color:var(--muted);line-height:1.5}
.shot img{border-radius:12px;border:1px solid var(--line2);width:100%}
.shot figcaption{margin-top:10px;font-size:12.6px;color:var(--muted);line-height:1.7}

/* 章节 */
.sec{padding:44px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--card)}
.sec h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,27px);font-weight:800;color:var(--ink);letter-spacing:-.3px;line-height:1.34;scroll-margin-top:76px}
.sec h3{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--ink);scroll-margin-top:76px}
.sec .intro{margin:0 0 26px;font-size:15.4px;line-height:1.94;color:var(--muted);max-width:46em}

/* 四块基础 */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quad > div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 18px 20px}
.sec.alt .quad > div{background:var(--bg)}
.quad .n{font:800 11.5px/1 var(--mono);color:var(--red);letter-spacing:1.4px;margin-bottom:10px}
.quad h4{margin:0 0 8px;font-size:15.6px;font-weight:800;color:var(--ink)}
.quad p{margin:0;font-size:13.9px;line-height:1.88}

/* 牌型十级 */
.rk{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sec.alt .rk{background:var(--bg)}
.rk-row{display:grid;grid-template-columns:52px 138px 1fr 62px;gap:14px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line)}
.rk-row:last-child{border-bottom:0}
.rk-row .o{font:800 11.5px/1 var(--mono);color:var(--muted)}
.rk-row .nm{font-size:15px;font-weight:800;color:var(--ink)}
.rk-row .de{font-size:13.8px;color:var(--text)}
.rk-row .rank{font-size:12.4px;color:var(--red);font-weight:700;text-align:right}
.rk-row.hi{background:#fff5f5}
.sec.alt .rk-row.hi{background:#fff5f5}

/* 交错时间轴 */
.tl{position:relative;padding:6px 0}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line2);transform:translateX(-50%)}
.tl-item{position:relative;width:calc(50% - 34px);margin-bottom:18px}
.tl-item:nth-child(odd){margin-right:auto}
.tl-item:nth-child(even){margin-left:auto}
.tl-item .box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.sec.alt .tl-item .box{background:var(--bg)}
.tl-item h4{margin:0 0 7px;font-size:15.4px;font-weight:800;color:var(--ink)}
.tl-item p{margin:0;font-size:13.9px;line-height:1.88}
.tl-item .dot{
  position:absolute;top:18px;width:30px;height:30px;border-radius:50%;
  background:var(--red);color:#fff;display:grid;place-items:center;
  font:800 12.5px/1 var(--mono);border:4px solid var(--bg);
}
.sec.alt .tl-item .dot{border-color:var(--card)}
.tl-item:nth-child(odd) .dot{right:-49px}
.tl-item:nth-child(even) .dot{left:-49px}

/* 位置阶梯 */
.pos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.pos > div{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:0 0 10px 10px;padding:17px 18px}
.sec.alt .pos > div{background:var(--bg)}
.pos .pw{font:800 26px/1.1 var(--sans);color:var(--ink);letter-spacing:-1px;margin-bottom:4px}
.pos h4{margin:0 0 8px;font-size:14.6px;font-weight:800;color:var(--red)}
.pos p{margin:0;font-size:13.8px;line-height:1.88}
.hand-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.hand-row span{background:var(--card);border:1px solid var(--line2);border-radius:6px;padding:5px 11px;font:700 13.4px/1.4 var(--mono);color:var(--ink)}
.sec.alt .hand-row span{background:var(--bg)}
.hand-row span.hot{background:var(--red);border-color:var(--red);color:#fff}

/* 两列要点 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo > div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.sec.alt .duo > div{background:var(--bg)}
.duo h4{margin:0 0 9px;font-size:15.4px;font-weight:800;color:var(--ink)}
.duo p{margin:0 0 9px;font-size:14.2px;line-height:1.9}
.duo p:last-child{margin-bottom:0}
.duo b{color:var(--red-d)}

/* FAQ */
.qa{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.sec.alt .qa{background:var(--bg)}
.qa summary{list-style:none;cursor:pointer;padding:14px 44px 14px 18px;position:relative;font-size:15.4px;font-weight:700;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;right:18px;top:14px;font:800 13px/1.6 var(--mono);color:var(--red)}
.qa[open] summary::before{content:"A"}
.qa[open] summary{border-bottom:1px solid var(--line)}
.qa .a{padding:13px 18px 16px;font-size:14.4px;line-height:1.95}
.qa .a b{color:var(--red-d)}

/* 术语 */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.terms div{display:grid;grid-template-columns:106px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.terms dt{margin:0;font:800 14.2px/1.7 var(--sans);color:var(--ink)}
.terms dd{margin:0;font-size:13.8px;line-height:1.82}

/* 文章 */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sec.alt .post-card{background:var(--bg)}
.post-card .sg-auto-thumb{display:block}
.post-card .sg-auto-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card .bd{padding:14px 16px 16px}
.post-cat{display:inline-block;background:#fee;color:var(--red-d);border-radius:4px;padding:2px 8px;font-size:11.4px;font-weight:700;margin-bottom:8px}
.post-title{font-size:15.2px;font-weight:700;line-height:1.55;color:var(--ink);margin-bottom:7px}
.post-title a:hover{color:var(--red)}
.post-excerpt{font-size:13.3px;line-height:1.85;color:var(--muted);margin-bottom:8px}
.post-meta{font:11.6px/1 var(--mono);color:var(--muted)}
.pagination{margin-top:26px;display:flex;gap:7px;flex-wrap:wrap}
.pagination .page-numbers{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:7px 14px;font-size:13.8px}
.pagination .page-numbers.current{background:var(--ink2);color:#fff;border-color:var(--ink2)}
.pagination .page-numbers:hover{border-color:var(--red);color:var(--red)}

/* 内页 */
.ph{background:var(--card);border-bottom:1px solid var(--line);padding:42px 0 30px}
.ph h1{margin:0 0 10px;font-size:clamp(24px,3.3vw,35px);font-weight:800;line-height:1.3;color:var(--ink)}
.sw{padding:34px 0 24px}
.post-content{font-size:16px;line-height:2.02;max-width:44em}
.post-content h2{font-size:21px;font-weight:800;margin:30px 0 12px;color:var(--ink);padding-left:12px;border-left:4px solid var(--red)}
.post-content h3{font-size:18px;font-weight:700;margin:24px 0 10px;color:var(--ink)}
.post-content p{margin:0 0 15px}
.post-content img{border-radius:10px;border:1px solid var(--line);margin:18px 0}
.post-content ul,.post-content ol{padding-left:1.35em;margin:0 0 15px}
.post-content li{margin-bottom:6px}
.post-content blockquote{margin:18px 0;padding:12px 18px;border-left:4px solid var(--red);background:var(--card);border-radius:0 8px 8px 0}
.post-content a{color:var(--red-d);border-bottom:1px solid var(--line2)}

/* 页脚 */
.ft{background:var(--ink2);color:#a1a1aa;padding:42px 0 22px;font-size:14px}
.ft .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px}
.ft .fn{color:#fff;font-size:17px;font-weight:800;margin-bottom:11px}
.ft h4{margin:0 0 12px;color:var(--red);font-size:11.6px;letter-spacing:1.8px;font-weight:800}
.ft p{margin:0;line-height:1.95;color:#8b8b93;font-size:13.4px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:8px}
.ft li a{color:#a1a1aa;font-size:13.4px}
.ft li a:hover{color:#fff}
.ft .bot{margin-top:30px;padding-top:16px;border-top:1px solid #3f3f46;font-size:12.4px;color:#71717a}

@media(max-width:940px){
  .top .wrap,.duo,.terms,.ft .cols{grid-template-columns:1fr}
  .quad,.pos,.arts{grid-template-columns:1fr 1fr}
  .kpi{grid-template-columns:1fr 1fr}
  .kpi div:nth-child(2n){border-right:0}
  .kpi div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tl::before{left:15px}
  .tl-item{width:100%;padding-left:46px}
  .tl-item:nth-child(odd) .dot,.tl-item:nth-child(even) .dot{left:0;right:auto}
  .rk-row{grid-template-columns:44px 1fr;gap:8px}
  .rk-row .de,.rk-row .rank{grid-column:2/-1;text-align:left}
}
@media(max-width:600px){.quad,.pos,.arts{grid-template-columns:1fr}}

.cta-top{display:inline-flex;align-items:center;gap:.38em;
 padding:.5em 1.15em;border:1.5px solid currentColor;border-radius:999px;
 font-size:.85rem;font-weight:700;line-height:1.15;white-space:nowrap;
 text-decoration:none;color:var(--red-d);opacity:.92;transition:opacity .2s,transform .2s}
.cta-top:hover{opacity:1;transform:translateY(-1px)}
.cta-top .dot{width:.42em;height:.42em;border-radius:50%;background:currentColor;
 display:inline-block;flex:none}
@media(max-width:820px){.cta-top{padding:.44em .9em;font-size:.8rem}}
@media(max-width:560px){.cta-top{padding:.4em .78em;font-size:.75rem;gap:.3em}
 .cta-top .dot{width:.36em;height:.36em}}
@media(max-width:380px){.cta-top{padding:.36em .66em;font-size:.72rem}}