/* ========================================
   全局样式表 - 植之野 & 漫游圈项目
   ======================================== */

/* 1. 通用样式重置 */
* {
    margin: 0;              /* 清除默认外边距 */
    padding: 0;             /* 清除默认内边距 */
    box-sizing: border-box; /* 盒模型：padding和border包含在width/height内 */
}

/* 2. 页面主体样式 */
body {
    /* 字体：优先使用系统字体，确保各平台一致性 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    background-color: #f5f5f5;    /* 浅灰色背景 */
    display: flex;                 /* 使用Flexbox布局 */
    justify-content: center;       /* 水平居中 */
    align-items: center;           /* 垂直居中 */
    min-height: 100vh;             /* 最小高度为视口高度，确保内容居中 */
}

/* 3. 页面容器 - 所有页面的主容器 */
.page-container {
    position: relative;            /* 相对定位，作为绝对定位元素的参照 */
    max-width: 375px;              /* 最大宽度375px（移动端标准宽度） */
    width: 100%;                   /* 宽度100%，自适应 */
    margin: 0 auto;                /* 水平居中 */
    background-color: #ffffff;     /* 白色背景 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 阴影效果，增加层次感 */
    overflow: hidden;              /* 隐藏溢出内容 */
}

/* 4. 页面图片 - 设计稿背景图 */
.page-image {
    display: block;                /* 块级元素，避免底部空隙 */
    width: 100%;                   /* 宽度100% */
    height: auto;                  /* 高度自适应，保持图片比例 */
    user-select: none;             /* 禁止用户选中图片 */
}

/* 5. 可点击区域 - 透明按钮 */
.click-area {
    display: block;                /* 块级元素 */
    position: absolute;            /* 绝对定位，覆盖在背景图上 */
    cursor: pointer;               /* 鼠标悬停时显示手型光标 */
    background-color: transparent; /* 背景透明 */
    transition: background-color 0.3s ease; /* 背景色过渡动画 */
    z-index: 10;                   /* 层级10，确保在图片上方 */
}

/* 6. 可点击区域悬停效果 */
.click-area:hover {
    background-color: rgba(76, 175, 80, 0.1); /* 悬停时显示淡绿色背景 */
}

/* ========================================
   响应式设计 - 移动端优先
   ======================================== */

/* 7. 小屏幕设备（手机） - 768px及以下 */
@media (max-width: 768px) {
    .page-container {
        max-width: 100%;           /* 移动端占满屏幕宽度 */
        box-shadow: none;          /* 移除阴影，节省空间 */
    }
}

/* 8. 大屏幕设备（平板、电脑） - 769px及以上 */
@media (min-width: 769px) {
    body {
        padding: 20px;             /* 添加内边距，页面不贴边 */
    }
}