/* 生成响应式布局常量.css - 完全修复版 */
/* ⚠️ 重要：完全由JavaScript控制格子尺寸，CSS不再干预 */

/* ── ⚠️ 重要：重置浏览器默认样式 ───────────────────── */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 🔧 修复：CSS变量初始值（由JavaScript动态更新） ───────── */
:root { 
  /* 格子尺寸变量 - 完全由JavaScript控制 */
  --cell-w: 43px; /* 默认值，将被JavaScript覆盖 */
  --cell-h: 43px; /* 默认值，将被JavaScript覆盖 */
  
  /* 表格列数 - 由JavaScript控制 */
  --table-cols: 18; /* 默认值，将被JavaScript覆盖 */
  
  /* 边距变量 - 由JavaScript控制 */
  --side-gap-px: 0px;
  --side-gap-cells: 0;
}

/* ── 🚫 移除所有媒体查询 - 避免与JavaScript冲突 ───────── */
/* 
🔧 关键修复：完全移除CSS媒体查询，确保JavaScript设置的变量不被覆盖
原因：设计规则要求"断点式+平滑响应"，这需要JavaScript动态计算，
      CSS媒体查询的固定区间无法实现这种复杂的响应式逻辑
*/

/* ── ③ workspace样式 ───────────────────────────────────── */
#workspace {
  display: grid !important;
  gap: 0 !important;
  
  /* 🔧 关键修复1: 添加box-sizing */
  box-sizing: border-box !important;
  
  /* 🔧 关键修复2: 宽度策略调整 - 完全由JavaScript控制 */
  /* width 和 padding 由JavaScript动态设置 */
  max-width: 100vw !important;         /* 不超过视口宽度 */
  min-width: 0 !important;             /* 允许收缩 */
  
  /* 🔧 关键修复3: 溢出控制 */
  overflow-x: hidden !important;       /* 隐藏水平滚动条 */
  
  /* 居中 */
  margin-inline: auto !important;
  justify-content: center;
  
  /* 🔧 网格模板由JavaScript动态设置 */
  /* grid-template-columns 和 grid-template-rows 由JavaScript控制 */
}

/* ── ④ 共用格子外观 ───────────────────────────────────── */
.子网格容器 {
  background: #fff;
  border: 1px inset rgba(51,51,51,.314);
  box-sizing: border-box;
  position: relative;
  pointer-events: auto;
}

/* ── 🎯 占位元素样式 ───────────────────────────────────── */
.__ghost {
  background: #fff;
  border: 1px inset rgba(51,51,51,.314);
  border-top: none;
  box-sizing: border-box;
  pointer-events: none;
}

/* ── 📱 调试样式（可选） ───────────────────────────────── */
.debug-mode #workspace {
  outline: 2px dashed red;
}

.debug-mode .子网格容器 {
  position: relative;
}

.debug-mode .子网格容器::before {
  content: attr(id);
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  color: #666;
  background: rgba(255,255,255,0.8);
  padding: 1px 3px;
  border-radius: 2px;
}

/* ── 🔧 确保JavaScript设置的变量优先级 ───────────────── */
/* 注意：不再使用!important，让JavaScript设置的值正常生效 */