/* 纯净版帧布局容器 - 仅包含定位相关样式 */
.frame-container {
    position: relative;
  }
  
  /* 帧布局子项基础样式 - 仅包含定位相关样式 */
  .frame-child {
    position: absolute;
  }
  
  /* =============== 核心定位类组 =============== */
  /* 完全居中 */
  .frame-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* 水平居中 */
  .frame-center-horizontal {
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* 垂直居中 */
  .frame-center-vertical {
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* =============== 边缘定位 =============== */
  /* 局上 - 贴顶水平居中 */
  .frame-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* 局下 - 贴底水平居中 */
  .frame-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* 局左 - 贴左垂直居中 */
  .frame-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* 局右 - 贴右垂直居中 */
  .frame-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* =============== 角落定位 =============== */
  .frame-top-left {
    top: 0;
    left: 0;
  }
  
  .frame-top-right {
    top: 0;
    right: 0;
  }
  
  .frame-bottom-left {
    bottom: 0;
    left: 0;
  }
  
  .frame-bottom-right {
    bottom: 0;
    right: 0;
  }
  
  /* =============== 带偏移量的定位 =============== */
  .frame-top-offset {
    top: var(--frame-offset, 10px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .frame-bottom-offset {
    bottom: var(--frame-offset, 10px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  .frame-left-offset {
    left: var(--frame-offset, 10px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  .frame-right-offset {
    right: var(--frame-offset, 10px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* =============== 响应式调整 =============== */
  @media (max-width: 768px) {
    /* 基础调整 */
    .frame-child {
      margin: 5px !important;
    }
  
    /* 所有定位元素转为相对定位 */
    .frame-center,
    .frame-center-horizontal,
    .frame-center-vertical,
    .frame-top,
    .frame-bottom,
    .frame-left,
    .frame-right,
    .frame-top-left,
    .frame-top-right,
    .frame-bottom-left,
    .frame-bottom-right,
    .frame-top-offset,
    .frame-bottom-offset,
    .frame-left-offset,
    .frame-right-offset {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      transform: none;
      margin: 10px 0 !important;
      display: block;
    }
  }
  
  @media (max-width: 480px) {
    /* 超小屏幕确保所有子项可见 */
    .frame-child {
      position: relative !important;
      display: block;
      width: auto !important;
      margin: 8px 0 !important;
    }
  }