kangshifu-board/legacy/css/responsive.css

/* ==========================================================================
   响应式：1280 桌面可读 → 1024 不乱 → 768 平板 → 手机可用
   ========================================================================== */

/* 窄桌面 / 平板横屏：指标两列，双栏变单栏 */
@media (max-width:1180px){
  :root{--sidebar:200px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pair{grid-template-columns:1fr}
  .detail-head{grid-template-columns:1fr}
  .integrity{min-width:0}
  .search input{width:220px}
}

/* 平板 / 1024：侧栏收起成顶部抽屉，内容全宽 */
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .side{
    position:fixed;z-index:50;left:0;top:0;width:260px;height:100vh;
    transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
    background:rgba(252,253,255,.86);
  }
  .side.open{transform:none;box-shadow:24px 0 60px -30px rgba(16,24,40,.35)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(28,36,50,.16);opacity:0;pointer-events:none;transition:opacity .25s;z-index:49}
  .scrim.open{opacity:1;pointer-events:auto}
  .menu-btn{display:grid}
  .filters{top:calc(var(--topbar) - 1px)}
}

/* 768 */
@media (max-width:768px){
  .topbar{min-height:56px;padding:0 16px;gap:10px}
  .filters{top:55px}
  .search input{width:100%;min-width:0}
  .topbar .tools{flex:1;min-width:0}
  .search{flex:1;min-width:0}
  .view{padding:18px 16px 64px}
  .view-head h1{font-size:20px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric{padding:14px 16px 12px}
  .metric .v{font-size:28px}
  .insight{grid-template-columns:1fr;padding:18px 16px}
  .insight .strength{align-items:flex-start;flex-direction:row;gap:12px;padding-top:8px}
  .detail-head{padding:20px 18px}
  .kv-grid{grid-template-columns:1fr}
  /* 表格转行卡：用 data-l 标签代替表头 */
  .tbl thead{display:none}
  .tbl tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 14px;border-bottom:0}
  .tbl tbody td::before{content:attr(data-l);font-size:11.5px;color:var(--ink-4)}
  .tbl tbody td.r,.tbl td.num-cell{text-align:right}
  .tbl tbody tr{display:block;padding:8px 0;border-bottom:1px solid var(--rule)}
  .tbl tbody td.cell-title{display:block;padding-top:10px}
  .tbl tbody td.cell-title::before{display:none}
  .tbl tbody td.cell-person{justify-content:flex-start}
  .tbl tbody td.cell-person::before{display:none}
  .tbl .sub{max-width:60vw}
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;height:min(88vh,820px);border-radius:20px 20px 0 0;transform:translateY(calc(100% + 24px))}
  .drawer.open{transform:none}
  .view-head .aside{margin-left:0;width:100%}
}

/* 小手机 */
@media (max-width:420px){
  .metrics{grid-template-columns:1fr 1fr}
  .metric .v{font-size:25px}
  .crumb .sep,.crumb a{display:none}
  .filters{gap:8px 12px}
}

/* 减少动态 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 不支持 backdrop-filter：提高不透明度保底，保证文字可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side,.topbar{background:rgba(252,253,255,.94)}
  .panel,.metric,.flat{background:rgba(255,255,255,.92)}
  .drawer{background:#fcfdff}
}

/* ==========================================================================
   v3 · 报告页与新版块的响应式（1280 / 1024 / 768）
   思路：宽度不够时"收栏不收字"——把目录/侧栏折成横向条，正文保持可读行宽；
   表格保留横向滚动，绝不把一张交叉表压成看不清的窄列。
   ========================================================================== */
@media (max-width:1280px){
  :root{--sidebar:212px}
  .r-cover{grid-template-columns:minmax(0,1fr) 240px}
  .r-structure-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1180px){
  .r-cover{grid-template-columns:1fr}
  .r-cover-side{max-width:420px}
  .r-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-miles{grid-template-columns:1fr}
  .r-structure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-index{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

@media (max-width:1024px){
  .r-toc{top:calc(var(--topbar) - 1px)}
  .r-toc-s{display:none}
  body.in-report .search input{width:180px}
  .r-chapter{scroll-margin-top:112px}
}

@media (max-width:768px){
  .r-topbar{margin-top:-4px}
  .r-topbar-note{display:none}
  .r-toc{border-radius:14px;padding:6px;margin-bottom:12px}
  .r-toc a{height:28px;padding:0 9px;font-size:12px}
  .r-paper{border-radius:20px;padding:18px 16px 28px}
  body.in-report .search input{width:100%}
  .r-cover{padding-bottom:22px}
  .r-cover h1{font-size:23px}
  .r-meta{grid-template-columns:1fr 1fr;gap:10px 14px}
  .r-pipe{padding:12px}
  .r-pipe-step b{font-size:18px}
  .r-pipe-rate{margin-left:0}
  .r-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .r-kpi{padding:13px 14px}
  .r-kpi-v span{font-size:26px}
  .r-structure-grid{grid-template-columns:1fr}
  .r-ch-head h2{font-size:21px}
  .r-ch-lead{font-size:14.5px;line-height:1.8}
  .r-two{grid-template-columns:1fr}
  .r-funnel li{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .r-f-v{grid-column:2;text-align:left;margin-top:-4px}
  .r-f-v b{font-size:22px}
  .r-ladder li{grid-template-columns:28px minmax(0,1fr);gap:4px 10px}
  .r-l-note{grid-column:2}
  .r-stmt{padding:18px}
  .r-index{grid-template-columns:1fr}
  .r-finding{padding:16px 16px 14px 20px}
  .r-exec p{font-size:14px}
  /* 交叉表在窄屏保留横向滚动 + 首列吸附，比压扁可读 */
  .r-tbl{min-width:640px}
  .r-matrix td:first-child{position:sticky;left:0;background:rgba(252,253,255,.96);z-index:1}
}

@media (max-width:420px){
  .r-kpis{grid-template-columns:1fr}
  .r-meta{grid-template-columns:1fr}
  .r-toc a .r-toc-no{display:none}
}

/* 不支持 backdrop-filter：报告纸与浮层回到高亮度实底，保证可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .r-paper{background:rgba(255,255,255,.94)}
  .r-toc{background:rgba(255,255,255,.9)}
  .r-kpi,.r-finding,.r-ch-card,.r-index-card,.r-cover-side{background:rgba(255,255,255,.9)}
}