/**
 * 移动端响应式优化 CSS
 * 符合iOS人机界面指南和微信WebView最佳实践
 * @version 1.0.0
 * @date 2025-10-05
 */

/* ===== 基础字体大小保证 ===== */
/* 确保所有文本最小14px（移动端可读性） */
body {
    font-size: 14px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 标题字体最小14px */
h1, h2, h3, h4, h5, h6 {
    min-font-size: 14px;
}

p, li, span, div {
    font-size: max(14px, 1em);
}

/* ===== iOS安全区域适配 ===== */
/* 适配iPhone X及以上设备的刘海屏和底部指示条 */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* 为固定定位元素添加安全区域 */
.fixed-header {
    padding-top: calc(20px + env(safe-area-inset-top));
}

.fixed-footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ===== 触控目标优化 ===== */
/* iOS人机界面指南：最小44x44px触控区域 */
button,
a,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
.clickable,
.btn,
.main-option,
.secondary-option,
label {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 链接触控优化 */
a {
    text-decoration: none;
    padding: 8px 12px;
    margin: -8px -12px; /* 负边距扩大点击区域 */
}

/* 复选框和单选框触控优化 */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 12px; /* 扩大触控区域 */
}

/* ===== 微信WebView优化 ===== */
/* 禁用长按弹出菜单 */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 允许文本选择（仅在需要时） */
p, li, span, .selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* 优化滚动性能 */
* {
    -webkit-overflow-scrolling: touch;
}

/* 移除点击高亮 */
* {
    -webkit-tap-highlight-color: transparent;
}

button, a, .clickable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

/* ===== 响应式布局 ===== */
/* 375px-430px 宽度优化（主流手机尺寸） */
@media (max-width: 430px) {
    .container {
        padding: 16px;
        max-width: 100%;
    }

    /* 卡片内边距优化 */
    .card, .phase-card, .avoid-category {
        padding: 16px;
        margin: 12px 0;
    }

    /* 标题大小调整 */
    h1 {
        font-size: 20px;
        line-height: 1.4;
    }

    h2 {
        font-size: 18px;
        line-height: 1.4;
    }

    h3 {
        font-size: 16px;
        line-height: 1.4;
    }

    /* 按钮全宽优化 */
    .btn, button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* ===== 小屏幕优化（<375px） ===== */
@media (max-width: 374px) {
    body {
        font-size: 13px;
    }

    .container {
        padding: 12px;
    }

    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 16px;
    }

    h3 {
        font-size: 14px;
    }
}

/* ===== 横屏优化 ===== */
@media (orientation: landscape) and (max-height: 500px) {
    /* 横屏时减少垂直间距 */
    .header {
        padding: 20px;
    }

    .card, .phase-card {
        margin: 8px 0;
        padding: 12px;
    }

    h1 {
        font-size: 18px;
    }
}

/* ===== 性能优化 ===== */
/* 使用GPU加速 */
.card,
.phase-card,
.btn,
.main-option,
.secondary-option {
    transform: translateZ(0);
    will-change: transform;
}

/* 优化动画性能 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== 文本可读性优化 ===== */
/* 增加行高和段落间距 */
p {
    line-height: 1.7;
    margin-bottom: 12px;
}

li {
    line-height: 1.6;
    margin: 8px 0;
}

/* 列表项间距优化 */
ul, ol {
    padding-left: 24px;
    margin: 12px 0;
}

/* ===== 图片优化 ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 懒加载占位 */
img[loading="lazy"] {
    background: #f0f0f0;
    min-height: 100px;
}

/* ===== 表单优化 ===== */
input, textarea, select {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* 禁用iOS默认样式 */
input, textarea, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ===== 焦点状态优化 ===== */
button:focus,
a:focus,
input:focus,
textarea:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ===== 加载状态优化 ===== */
/* 骨架屏占位 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== 滚动优化 ===== */
/* 隐藏滚动条但保留滚动功能 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===== 打印优化 ===== */
@media print {
    /* 隐藏不必要的元素 */
    .no-print,
    button,
    .cta-section {
        display: none !important;
    }

    /* 优化打印布局 */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    /* 避免分页打断 */
    .phase-card,
    .avoid-category {
        page-break-inside: avoid;
    }
}