/* 
 * 小孔成像页面专用样式
 * Pinhole Imaging Page Specific Styles
 * 文件位置 / Location: css/pinhole-imaging.css
 * 
 * 注意：标题和标题下的灰色横线样式已在 physics-simulation.css 中定义
 * Note: Header and title styles are defined in physics-simulation.css
 * 使用类名：.sim-page-header 和 .sim-page-title
 */

/* ===== 基础样式重置 / Basic Reset ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', sans-serif;
}

/* ===== 页面主体 / Body ===== */
body {
    background: white;  /* 背景色：白色 */
    color: black;  /* 文字颜色：黑色 */
    min-height: 100vh;  /* 最小高度：全屏 */
    padding: 20px;  /* 内边距 */
}

/* ===== 主容器 / Main Container ===== */
.container {
    width: 100%;  /* 宽度：100% */
    max-width: 1200px;  /* 最大宽度 */
    margin: 0 auto;  /* 居中显示 */
    background-color: rgba(255, 255, 255, 0.95);  /* 背景色：半透明白色 */
    border-radius: 15px;  /* 圆角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  /* 阴影效果 */
    padding: 20px 30px;  /* 内边距 */
}

/* ===== 内容布局 / Content Layout ===== */
.content {
    display: flex;  /* 弹性布局 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 25px;  /* 元素间隔 */
}

/* ===== 动画面板 / Animation Panel ===== */
.animation-panel {
    flex: 2;  /* 弹性增长比例：2 */
    min-width: 360px;  /* 最小宽度 */
    display: flex;  /* 弹性布局 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
}

/* 动画包装器 */
.animation-wrapper {
    display: flex;  /* 弹性布局 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
    padding: 20px;  /* 内边距 */
    border: 1px solid #ddd;  /* 边框：浅灰色 */
    border-radius: 8px;  /* 圆角 */
    background-color: #fff;  /* 背景色：白色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    width: 100%;  /* 宽度：100% */
    min-height: 640px;  /* 最小高度 */
}

/* Canvas画布 */
canvas {
    display: block;  /* 块级显示 */
    width: 100%;  /* 宽度：100% */
    max-width: 820px;  /* 最大宽度 */
    height: auto;  /* 高度：自动 */
    background-color: #ffffff;  /* 背景色：白色 */
    border-radius: 5px;  /* 圆角 */
}

/* ===== 状态面板 / Status Panel ===== */
.status-panel {
    display: flex;  /* 弹性布局 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 20px;  /* 元素间隔 */
    margin-top: 10px;  /* 上边距 */
}

/* 状态框 */
.status-box {
    background: #f0f8ff;  /* 背景色：淡蓝色 */
    color: black;  /* 文字颜色：黑色 */
    padding: 15px;  /* 内边距 */
    border-radius: 10px;  /* 圆角 */
    min-width: 180px;  /* 最小宽度 */
    text-align: center;  /* 文字居中 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    flex: 1;  /* 弹性增长比例：1 */
}

/* 状态标题 */
.status-title {
    font-size: 1rem;  /* 字体大小 */
    margin-bottom: 8px;  /* 下边距 */
}

/* 状态数值 */
.status-value {
    font-size: 1.4rem;  /* 字体大小 */
    font-weight: bold;  /* 字体加粗 */
}

/* ===== 控制面板 / Control Panel ===== */
.control-panel {
    flex: 1;  /* 弹性增长比例：1 */
    min-width: 300px;  /* 最小宽度 */
    background-color: #f8f9fa;  /* 背景色：浅灰色 */
    padding: 20px;  /* 内边距 */
    border-radius: 10px;  /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    display: flex;  /* 弹性布局 */
    flex-direction: column;  /* 垂直排列 */
    gap: 20px;  /* 元素间隔 */
}

/* 控制组 */
.control-group {
    background: white;  /* 背景色：白色 */
    border-radius: 8px;  /* 圆角 */
    padding: 15px;  /* 内边距 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
}

/* 标签 */
label {
    display: block;  /* 块级显示 */
    margin-bottom: 10px;  /* 下边距 */
    font-weight: bold;  /* 字体加粗 */
    color: black;  /* 颜色：黑色 */
}

/* 数值文本 */
.value-text {
    margin-top: 10px;  /* 上边距 */
    font-size: 0.95rem;  /* 字体大小 */
    color: #333;  /* 颜色：深灰色 */
}

/* ===== 响应式设计 / Responsive Design ===== */

/* 中等屏幕（平板） */
@media (max-width: 992px) {
    .content {
        flex-direction: column;  /* 垂直排列 */
    }
}

/* 小屏幕（手机横屏） */
@media (max-width: 768px) {
    body {
        padding: 12px;  /* 减少内边距 */
        display: block;  /* 块级显示 */
    }

    .container {
        padding: 18px;  /* 减少内边距 */
    }

    .animation-panel,
    .control-panel {
        min-width: auto;  /* 取消最小宽度限制 */
        width: 100%;  /* 宽度：100% */
    }

    .animation-wrapper {
        padding: 12px;  /* 减少内边距 */
        min-height: auto;  /* 取消最小高度限制 */
    }

    .status-panel {
        flex-direction: column;  /* 垂直排列 */
    }
}

/* 超小屏幕（手机竖屏） */
@media (max-width: 480px) {
    body {
        padding: 10px;  /* 进一步减少内边距 */
    }

    .container {
        padding: 15px;  /* 进一步减少内边距 */
    }

    .control-group {
        padding: 12px;  /* 减少内边距 */
    }

    .animation-wrapper {
        padding: 10px;  /* 进一步减少内边距 */
    }
}