/* ==========================================================================
   白栈 · 溢出修复层 v253
   修 3 处历史遗留的重叠（跟我的 refine 层无关，屏蔽后反而更多）：
     ① 白底图模式：裤型按钮组溢出到右栏（压在「生成白底图」上）
     ② 图像工具模式：左侧工具说明文字溢出到右栏参数区
     ③ 电商详情图：说明文字压住页码「1/15」
   病根相同：中栏 .col-tpl 内部有「固有宽度超栏宽」的块，撑出列宽后
   浮在右栏 .col-params 之上（右栏 z-index 更高或顺序更后）。
   修法：只在主站三栏工作台内，给中栏所有直接/间接块加宽度约束与换行兜底，
        并把两栏的层叠上下文拉开，任何情况下中栏内容不越界。
   ⚠ 不碰 #videoPanel / #detailfigPanel / #scenePanel / #reverseMode 的内部布局
   ========================================================================== */

/* ---------- 1. 中栏整体：裁切越界内容，禁止横向溢出 ---------- */
#view-work .work-grid > .card.col-tpl{
  position:relative;
  overflow-x:hidden;      /* 关键：越界内容裁掉，不再浮到右栏 */
  overflow-y:auto;
  z-index:1;
}
#view-work .work-grid > .card.col-params{
  position:relative;
  z-index:2;              /* 右栏高于中栏，视觉上永远在上层 */
}

/* ---------- 2. 中栏内部所有块：宽度不得超栏 ---------- */
#view-work .col-tpl,
#view-work .col-tpl *{
  box-sizing:border-box;
  max-width:100%;
}
/* 文字块允许换行，不再靠固有宽度撑开 */
#view-work .col-tpl p,
#view-work .col-tpl span,
#view-work .col-tpl div,
#view-work .col-tpl label,
#view-work .col-tpl li,
#view-work .col-tpl b,
#view-work .col-tpl em,
#view-work .col-tpl i,
#view-work .col-tpl small,
#view-work .col-tpl strong{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;
}

/* ---------- 3. 按钮组：换行，不撑出栏宽 ---------- */
#view-work .col-tpl .segmented,
#view-work .col-tpl .opts,
#view-work .col-tpl .tpl-tabs,
#view-work .col-tpl .ttabs,
#view-work .col-tpl .vopt-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:100%;
  min-width:0;
}
#view-work .col-tpl .segmented > button,
#view-work .col-tpl .ttab,
#view-work .col-tpl .opt,
#view-work .col-tpl .vopt{
  flex:0 1 auto;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
  line-height:1.35;
}

/* ---------- 4. 白底图裤型/版型按钮（溢出主犯） ---------- */
#view-work #styleSeg,
#view-work #cuffSeg,
#view-work #styleSeg button,
#view-work #cuffSeg button{
  max-width:100%;
  min-width:0;
  flex:0 1 auto;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* ---------- 5. 图像工具模式：左侧说明文字块限宽 ---------- */
#view-work #toolsChoose,
#view-work #toolsChoose *,
#view-work #faceChoose,
#view-work #faceChoose *,
#view-work #hangerChoose,
#view-work #hangerChoose *{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* 工具卡内部一行一个，不并排撑宽 */
#view-work #toolsChoose .eg-block,
#view-work #toolsChoose .eg-grid,
#view-work #toolsChoose .eg-grid-3{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:100%;
  min-width:0;
}
#view-work #toolsChoose .eg-item{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* ---------- 6. 电商详情图：说明文字与页码不重叠 ---------- */
#detailfigPanel .df-note,
#detailfigPanel .df-tip,
#detailfigPanel [class*="note"],
#detailfigPanel [class*="tip"]{
  display:block;
  width:100%;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  position:relative;
  z-index:1;
}
/* 页码/分页器抬高一层，且不与说明文字同一行 */
#detailfigPanel .df-pager,
#detailfigPanel [class*="pager"],
#detailfigPanel [class*="page-nav"]{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
}

/* ---------- 7. 生成条与费用说明：任何情况下不被中栏内容压住 ---------- */
#view-work .gen-cta{
  position:relative;
  z-index:3;
  background:var(--bg);
}
#view-work .gen-cta .cost-line,
#view-work .gen-cta .gen-cost{
  position:relative;
  z-index:1;
  overflow-wrap:anywhere;
}

/* ---------- 8. 极窄屏兜底：所有按钮组换行 ---------- */
@media (max-width:1400px){
  #view-work .col-tpl .segmented > button,
  #view-work .col-tpl .ttab{
    flex:1 1 auto;
    min-width:64px;
  }
}