/* ===== /j_01_style/whole_style.css 全局重置 & 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; } /* 重置所有边距和内边距，统一盒模型 */
body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: linear-gradient(145deg, #ffefef 0%, #ffe6f0 50%, #ffd9e6 100%); min-height: auto; position: relative; overflow-x: hidden; } /* 页面字体和粉嫩渐变背景 */
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 10% 80%, rgba(255, 215, 0, 0.2) 0%, transparent 30%), radial-gradient(circle at 90% 20%, rgba(0, 191, 255, 0.2) 0%, transparent 35%); pointer-events: none; z-index: 0; } /* 装饰性光晕背景层 */

/* ===== 主容器 ===== */
.container { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 2rem; position: relative; z-index: 2; } /* 主容器：居中、内边距、层级高于装饰背景 */

/* ===== 顶部导航栏 ===== */
.top-nav { display: flex; align-items: center; margin-bottom: 1.5rem; } /* 导航栏：弹性布局、垂直居中、底部间距 */
.back-btn { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border: 2px solid #ffd700; color: #a06b9a; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; transition: all 0.3s; margin-right: 1rem; text-decoration: none; font-weight: bold; } /* 返回按钮：毛玻璃效果、金色边框、圆形、居中对齐 */
.back-btn:hover { background: #ffd700; color: white; transform: scale(1.1); } /* 返回按钮悬停：金色背景、放大 */
.location { font-size: 1.2rem; color: #4a3b4a; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); padding: 0.5rem 1.2rem; border-radius: 40px; border: 1px solid #ffd700; white-space: nowrap; } /* 当前位置标签：毛玻璃、圆角、金色边框 */
.location span { color: #ff7b9c; font-weight: 600; } /* 当前位置高亮文字 */

/* ===== 标题区域 ===== */
.beach-title,
.horse-title,
.section-title { text-align: center; margin-bottom: 2rem; } /* 标题容器：居中、底部间距 */
.main-title { font-size: 2.8rem; font-weight: 800; color: #2196F3; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } /* 主标题：大号、加粗、蓝色、弹性居中 */
.main-title .wave { animation: wave 2s infinite ease-in-out; display: inline-block; } /* 波浪动画图标 */
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } } /* 波浪摇摆动画：左右摆动 */
.sub-title { font-size: 1.2rem; color: #7f5b7f; letter-spacing: 1px; margin-top: 0.3rem; } /* 副标题：小号、紫色、字间距 */

/* ===== 温馨提醒 ===== */
.warm-tips { text-align: center; font-size: 1.8rem; color: #00F; margin-top: -10px; margin-bottom: 15px; } /* 温馨提醒：居中、蓝色、上边距微调 */

/* ===== 选择卡片区域 ===== */
.selection-area { background: transparent; border: none; padding: 0; margin-bottom: 0; flex: 1; } /* 选择区域：透明背景、弹性占满 */
.card-list { display: flex; flex-direction: column; gap: 1.2rem; width: 100%; margin: 1rem 0 2rem; align-items: center; } /* 卡片列表：纵向排列、居中对齐 */
.select-card { background: white; border: 3px solid transparent; border-radius: 60px; padding: 1.5rem 2rem; text-align: left; cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); display: flex; align-items: center; width: 85%; } /* 选择卡片：白色背景、大圆角、左对齐、弹性居中 */
.select-card:hover { transform: translateX(10px); border-color: #ffd700; box-shadow: 0 20px 30px rgba(255, 215, 0, 0.2); } /* 卡片悬停：右移、金色边框、金色阴影 */
.select-card.selected { border-color: #ffd700; background: #fff9e6; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } /* 卡片选中：金色边框、淡黄背景、发光阴影 */
.card-icon { font-size: 3.5rem; margin-right: 1.5rem; min-width: 70px; text-align: center; } /* 卡片图标：大号、固定宽度、居中 */
.card-content { flex: 1; } /* 卡片内容：弹性占满 */
.card-title { font-size: 2rem; font-weight: 700; color: #4a3b4a; margin-bottom: 0.3rem; } /* 卡片标题：大号、加粗、深色 */
.card-desc { font-size: 1rem; color: #a06b9a; } /* 卡片描述：小号、紫色 */

/* ===== 导航按钮（上一步/下一步） ===== */
.nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } /* 导航按钮容器：两端对齐、垂直居中 */
.back-step-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); border: 2px solid #ffd700; border-radius: 50px; padding: 0.6rem 1.5rem; color: #4a3b4a; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; } /* 上一步/下一步按钮：毛玻璃、金色边框、大圆角、弹性居中 */
.back-step-btn:hover { background: #ffd700; color: white; transform: translateX(-5px); box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4); } /* 导航按钮悬停：金色背景、左移、金色阴影 */
.step-indicator { font-size: 1rem; color: #a06b9a; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); padding: 0.4rem 1.2rem; border-radius: 40px; border: 1px solid #ffd700; } /* 步骤指示器：毛玻璃、圆角、金色边框 */

/* ===== 课号卡片（独特样式） ===== */
.ke-list { display: flex; flex-direction: column; gap: 28px; padding: 20px 15px; max-width: 600px; margin: 0 auto; width: 100%; align-items: center; } /* 课号列表：纵向排列、居中对齐 */
.ke-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); border: 3px solid #ffd700; border-radius: 40px; padding: 1.5rem 2rem; transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); box-shadow: 0 10px 20px -5px rgba(0, 79, 158, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 -2px 5px rgba(0, 0, 0, 0.05) inset; display: flex; align-items: center; justify-content: center; gap: 15px; position: relative; overflow: hidden; cursor: pointer; width: 100%; max-width: 450px; margin: 0 auto; min-width: 280px; } /* 课号卡片：毛玻璃、金色边框、大圆角、弹性居中、流光动画容器 */
.ke-card::before { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: linear-gradient(115deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 240, 255, 0.25) 45%, rgba(255, 255, 255, 0.2) 50%, transparent 60%, transparent 100%); transform: rotate(25deg); animation: lightSweep 6s infinite linear; opacity: 0.5; pointer-events: none; z-index: 1; } /* 流光动画伪元素：斜向光效扫过 */
@keyframes lightSweep { 0% { transform: rotate(25deg) translateX(-30%) translateY(-30%); } 100% { transform: rotate(25deg) translateX(30%) translateY(30%); } } /* 流光动画：从左上到右下移动 */
.ke-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 25px -8px rgba(0, 110, 255, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.9) inset; border-color: #ffd700; } /* 课号卡片悬停：上浮放大、蓝色阴影 */
.ke-card.selected { background: rgba(255, 215, 0, 0.15); border-color: #ffa500; box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); transform: scale(1.02); } /* 课号卡片选中：淡黄背景、橙色边框、发光阴影 */
.ke-icon { font-size: 2.8rem; min-width: 50px; text-align: center; z-index: 2; animation: iconFloat 3s infinite ease-in-out; flex-shrink: 0; } /* 课号图标：大号、浮动动画、不缩小 */
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* 图标浮动动画：上下轻微浮动 */
.ke-name { font-size: 2.2rem; font-weight: 700; text-align: center; background: linear-gradient(145deg, #FF4500, #FF8C00, #FFA500); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: 2; letter-spacing: 1px; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } /* 课号名称：橙红渐变文字、不换行、溢出省略号 */

/* ===== 底部按钮 ===== */
.bottom-buttons { margin-top: 0.5rem; padding: 0.5rem; } /* 底部按钮容器 */
.footer { text-align: center; margin-top: auto; padding: 1rem; color: #a06b9a; opacity: 0.7; } /* 页脚：居中、自动上边距、半透明紫色 */

/* ===== 赞助商展示样式 ===== */
.sponsor-area { background: transparent; margin-bottom: 15px; padding: 0; text-align: center; } /* 赞助商区域：透明背景、居中 */
.sponsor-banner { background: transparent; border-radius: 0; padding: 8px 0; margin: 0; text-align: center; box-shadow: none; border: none; } /* 赞助商横幅：透明无边框无阴影 */
.sponsor-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; } /* 赞助商链接：纵向排列、居中、无下划线 */
.sponsor-name { color: #FF0000; font-size: 30px; transition: all 0.2s ease; border: none; outline: none; display: inline-block; } /* 赞助商名称：红色、无边框 */
.sponsor-name:hover { transform: scale(1.05); color: #FF0000; text-decoration: none; } /* 赞助商名称悬停：放大、保持红色 */
.sponsor-name:active { transform: scale(1.15); } /* 赞助商名称点击：放大更多 */
.sponsor-tip { color: #333333; font-size: 1.9rem; font-weight: normal; border: none; display: inline-block; } /* 赞助商提示语：深色、正常粗细 */

/* ============================================================
   响应式 - 手机版
   ============================================================ */

/* 手机版（宽度 ≤ 480px） */
@media (max-width: 480px) {
    .container { padding: 0.3rem 0.8rem 1rem; } /* 手机版容器：减小内边距 */
    .main-title { font-size: 2.2rem; color: #2196F3; } /* 手机版主标题：缩小字号、保持蓝色 */
    .warm-tips { font-size: 1.8rem; margin-top: -8px; margin-bottom: 12px;color: #2196F3;  } /* 手机版温馨提醒：加粗 */
    .location { font-size: 1rem; padding: 0.4rem 1rem; } /* 手机版当前位置：缩小字号和内边距 */
    .back-btn { width: 40px; height: 40px; font-size: 1.5rem; } /* 手机版返回按钮：缩小尺寸 */
    .select-card { padding: 1.2rem 1.5rem; } /* 手机版选择卡片：减小内边距 */
    .card-icon { font-size: 2.8rem; margin-right: 1rem; min-width: 50px; } /* 手机版卡片图标：缩小字号和间距 */
    .card-title { font-size: 1.6rem; } /* 手机版卡片标题：缩小字号 */
    .card-desc { font-size: 0.9rem; } /* 手机版卡片描述：缩小字号 */
    .ke-list { gap: 22px; padding: 15px 10px; } /* 手机版课号列表：减小间距和内边距 */
    .ke-card { padding: 1.2rem 1.5rem; max-width: 380px; min-width: 260px; border-radius: 35px; } /* 手机版课号卡片：减小内边距和圆角 */
    .ke-icon { font-size: 2.4rem; min-width: 45px; } /* 手机版课号图标：缩小字号 */
    .ke-name { font-size: 1.9rem; max-width: 250px; } /* 手机版课号名称：缩小字号和最大宽度 */
    .sponsor-name { font-size: 1.7rem;  } /* 手机版赞助商名称：加粗 */
    .sponsor-tip { font-size: 1.4rem; } /* 手机版赞助商提示：缩小字号 */
}

/* 小屏手机（宽度 ≤ 360px） */
@media (max-width: 360px) {
    .main-title { font-size: 1.9rem; color: #2196F3; } /* 小屏手机主标题：进一步缩小字号、保持蓝色 */
    .warm-tips { font-size: 1.6rem; margin-top: -6px; margin-bottom: 10px; font-weight: bold; } /* 小屏手机温馨提醒：加粗 */
    .card-title { font-size: 1.4rem; } /* 小屏手机卡片标题：进一步缩小 */
    .card-icon { font-size: 2.4rem; min-width: 45px; } /* 小屏手机卡片图标：进一步缩小 */
    .ke-list { gap: 18px; } /* 小屏手机课号列表：减小间距 */
    .ke-card { padding: 1rem 1.2rem; max-width: 320px; min-width: 240px; border-radius: 30px; } /* 小屏手机课号卡片：进一步减小内边距和圆角 */
    .ke-icon { font-size: 2.2rem; min-width: 40px; } /* 小屏手机课号图标：进一步缩小 */
    .ke-name { font-size: 1.7rem; max-width: 220px; } /* 小屏手机课号名称：进一步缩小 */
}