<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>珊珊同学® 爱玩</title>
  <style>
    /* ==================== 1. 颜色变量集中管理（核心配色区-玩乐酒红系）==================== */
    :root {
      /* 主色调：#800020 复古酒红色（玩乐主题） */
      --primary-color: #800020;      /* 主色-酒红色 */
      --primary-dark: #660017;       /* 主色加深（hover/强调） */
      --primary-light: #f9e6eb;      /* 主色浅变体（边框/背景） */
      --primary-bg: #fdf2f5;         /* 主色超浅背景 */
      
      /* 文字色系 */
      --text-main: #333333;          /* 主要文字-深灰 */
      --text-secondary: #555555;     /* 次要文字-中灰 */
      --text-tertiary: #777777;      /* 辅助文字-浅灰 */
      --text-black: #000000;         /* 纯黑（热门推荐链接） */
      --text-white: #ffffff;         /* 纯白 */
      
      /* 基础色系 */
      --white: #ffffff;              /* 纯白 */
      --gray-light: #f9f9f9;         /* 全局背景（极浅灰） */
      
      /* 底部专属配色 */
      --footer-bg: #fdf2f5;          /* 底部背景 */
      --footer-text: #333333;        /* 底部文字 */
      --footer-hover: #660017;       /* 底部链接hover */
      --friend-link-bg: #f9e6eb;     /* 友情链接背景 */
      
      /* LOGO特殊样式配色 */
      --logo-accent: #990026;        /* LOGO爱玩字样强调色-亮酒红 */
      --logo-shadow: rgba(153, 0, 38, 0.2); /* LOGO阴影色 */
    }

    /* ==================== 2. 基础重置与全局样式（兼容优化）==================== */
    * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      outline: none; /* 移除所有元素的默认轮廓线 */
    }

    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%; /* 防止iOS横屏字体放大 */
      -ms-text-size-adjust: 100%;
    }

    body { 
      font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; 
      line-height: 1.6; 
      color: var(--text-main); 
      background: var(--gray-light); 
      min-height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow-x: hidden; /* 防止横向滚动 */
    }

    /* 修复IE11 flex布局兼容性 */
    @supports (-ms-ime-align: auto) {
      body {
        display: block;
      }
      .main {
        min-height: calc(100vh - 180px);
      }
    }

    .main { 
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; 
    }

    .container { 
      max-width: 1200px; 
      margin: 0 auto; 
      padding: 0 20px; 
      width: 100%;
    }

    /* 清除浮动兼容 */
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    /* 辅助类 */
    .w-100 { width: 100%; }
    .text-center { text-align: center; }

    /* ==================== 3. 通用排版样式 ==================== */
    h1 { 
      font-size: clamp(1.8rem, 4vw, 2.5rem); /* 响应式字体大小 */
      font-weight: 700; 
      margin: 20px 0; 
      color: var(--text-main); 
      line-height: 1.3;
    }

    h2 { 
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 600; 
      margin: 20px 0 18px; 
      color: var(--text-main); 
      border-bottom: 2px solid var(--primary-light); 
      padding-bottom: 8px; 
      position: relative; 
    }

    h2::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 60px;
      height: 2px;
      background: var(--primary-color);
    }

    h3 { 
      font-size: clamp(1.2rem, 2.5vw, 1.5rem);
      font-weight: 600; 
      margin: 16px 0; 
      color: var(--text-main); 
    }

    h4 { 
      font-size: clamp(1rem, 2vw, 1.25rem);
      font-weight: 600; 
      margin: 14px 0; 
      color: var(--primary-dark); 
    }

    p { 
      margin: 10px 0; 
      font-size: 1rem; 
      color: var(--text-secondary); 
      line-height: 1.8; 
    }

    /* ==================== 4. 链接与按钮样式（含颜色）==================== */
    a { 
      color: var(--primary-color); 
      text-decoration: none; 
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    a:hover { 
      color: var(--primary-dark); 
      text-decoration: none; 
    }

    .link-btn { 
      display: inline-block; 
      padding: 8px 16px; 
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      background: -webkit-linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      color: var(--text-white) !important; 
      border-radius: 20px;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      box-shadow: 0 3px 8px rgba(128, 0, 32, 0.15);
      -webkit-box-shadow: 0 3px 8px rgba(128, 0, 32, 0.15);
      border: none;
      cursor: pointer;
      font-size: 1rem;
    }

    .link-btn:hover { 
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(128, 0, 32, 0.18);
      -webkit-box-shadow: 0 6px 15px rgba(128, 0, 32, 0.18);
    }

    .btn {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-size: 1rem;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    .btn-primary, .btn-accent { 
      background-color: var(--primary-color); 
      color: var(--text-white); 
      box-shadow: 0 3px 8px rgba(128, 0, 32, 0.15);
      -webkit-box-shadow: 0 3px 8px rgba(128, 0, 32, 0.15);
    }

    .btn-primary:hover, .btn-accent:hover { 
      background-color: var(--primary-dark); 
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(128, 0, 32, 0.2);
      -webkit-box-shadow: 0 6px 15px rgba(128, 0, 32, 0.2);
    }

    .btn-secondary { 
      background-color: var(--primary-light); 
      color: var(--text-secondary); 
    }

    .btn-secondary:hover { 
      background-color: var(--primary-bg); 
      color: var(--primary-dark);
    }

    .btn-sm { padding: 4px 8px; font-size: 0.875rem; border-radius: 15px; }
    .btn-lg { padding: 12px 24px; font-size: 1.125rem; border-radius: 25px; }

    /* ==================== 5. 页面模块样式 ==================== */
    /* 5.1 头部导航 - 兼容优化 */
    .header { 
      height: auto;
      padding: 15px 0;
      line-height: normal;
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      background: -webkit-linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      box-shadow: none;
      -webkit-box-shadow: none;
      position: static; 
      z-index: 999;
      border: none;
      outline: none;
    }

    .header .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: 15px;
    }

    /* LOGO样式优化 - 新增爱玩字样醒目样式 */
    .logo {
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      font-weight: 700;
      color: var(--text-white);
      letter-spacing: 1px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.12);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 8px;
    }

    /* LOGO注册标记样式 */
    .logo .registered {
      font-size: 0.8rem;
      vertical-align: super;
      margin-left: 2px;
    }

    .logo span {
      color: var(--primary-light);
    }

    /* 爱玩字样特殊醒目样式 */
    .logo .love-play {
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      font-weight: 800;
      color: var(--text-white);
      background: var(--logo-accent);
      padding: 3px 10px;
      border-radius: 15px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.1);
      box-shadow: 0 2px 6px var(--logo-shadow);
      -webkit-box-shadow: 0 2px 6px var(--logo-shadow);
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .logo .love-play:hover {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
      box-shadow: 0 3px 8px rgba(153, 0, 38, 0.3);
      -webkit-box-shadow: 0 3px 8px rgba(153, 0, 38, 0.3);
    }

    .header-right {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 20px;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

    .search-box {
      width: clamp(180px, 25vw, 220px);
      position: relative;
    }

    .search-box input {
      padding: 8px 12px 8px 15px;
      padding-right: 35px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.12);
      color: var(--text-white);
      width: 100%;
    }

    /* 占位符兼容样式 */
    .search-box input::-webkit-input-placeholder {
      color: rgba(255,255,255,0.8);
    }
    .search-box input::-moz-placeholder {
      color: rgba(255,255,255,0.8);
      opacity: 1;
    }
    .search-box input:-ms-input-placeholder {
      color: rgba(255,255,255,0.8);
    }
    .search-box input::placeholder {
      color: rgba(255,255,255,0.8);
    }

    .search-box input:focus {
      outline: none;
      border-color: var(--primary-light);
      background: rgba(255,255,255,0.18);
      box-shadow: 0 0 0 2px rgba(128, 0, 32, 0.08);
      -webkit-box-shadow: 0 0 0 2px rgba(128, 0, 32, 0.08);
    }

    .search-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-white);
      cursor: pointer;
      font-size: 1rem;
    }

    /* 5.2 导航菜单 - 兼容优化 */
    .nav { 
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; 
      list-style: none; 
      gap: clamp(15px, 3vw, 30px);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

    .nav-item a { 
      display: block; 
      padding: 0 5px; 
      color: var(--text-white); 
      font-weight: 500;
      font-size: clamp(0.9rem, 1.5vw, 1.05rem);
      position: relative;
    }

    .nav-item a.active { 
      color: var(--primary-light); 
      font-weight: 600;
    }

    .nav-item a.active::after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--primary-light);
      border-radius: 3px;
    }

    .nav-item a:hover { 
      color: var(--primary-light);
      -webkit-transform: translateY(-2px);
              transform: translateY(-2px);
    }

    .nav.flex-column {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 10px;
    }

    /* 5.3 全屏轮播图样式 - 性能优化（玩乐主题） */
    .carousel {
      width: 100%;
      height: clamp(200px, 40vw, 400px);
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 0;
      border: none;
    }

    .carousel-slides {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 300%;
      height: 100%;
      -webkit-transition: -webkit-transform 0.5s ease;
      transition: -webkit-transform 0.5s ease;
      transition: transform 0.5s ease;
      transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    }

    .carousel-slide {
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    /* 玩乐主题轮播图 */
    .carousel-slide-1 {
      background-image: linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=1");
      background-image: -webkit-linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=1");
    }

    .carousel-slide-2 {
      background-image: linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=2");
      background-image: -webkit-linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=2");
    }

    .carousel-slide-3 {
      background-image: linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=3");
      background-image: -webkit-linear-gradient(rgba(128, 0, 32, 0.1), rgba(102, 0, 23, 0.1)), url("https://picsum.photos/1920/400?play=3");
    }

    /* 轮播控制按钮 - 适配优化 */
    .carousel-btn {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      width: clamp(30px, 4vw, 40px);
      height: clamp(30px, 4vw, 40px);
      border-radius: 50%;
      background: rgba(255,255,255,0.7);
      border: none;
      font-size: clamp(1rem, 2vw, 1.5rem);
      color: var(--primary-dark);
      cursor: pointer;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      z-index: 10;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

    .carousel-btn:hover {
      background: var(--primary-color);
      color: var(--text-white);
    }

    .carousel-prev {
      left: clamp(10px, 2vw, 20px);
    }

    .carousel-next {
      right: clamp(10px, 2vw, 20px);
    }

    /* 轮播指示器 - 适配优化 */
    .carousel-indicators {
      position: absolute;
      bottom: clamp(10px, 2vw, 20px);
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 10px;
    }

    .carousel-indicator {
      width: clamp(8px, 1.5vw, 12px);
      height: clamp(8px, 1.5vw, 12px);
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      border: none;
      cursor: pointer;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    .carousel-indicator.active {
      background: var(--primary-color);
      width: clamp(20px, 3vw, 30px);
      border-radius: 6px;
    }

    /* 5.4 主内容区 - 布局优化 */
    .main { 
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; 
      gap: clamp(15px, 2vw, 20px); 
      margin: 30px 0; 
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

    .sidebar { 
      width: clamp(200px, 25vw, 250px); 
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }

    .content { 
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; 
      min-width: 0;
    }

    /* 5.5 文章列表卡片 - 响应式优化（玩乐主题） */
    .article-list {
      display: grid;
      display: -ms-grid;
      grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 100%, 380px), 1fr));
      -ms-grid-columns: (minmax(clamp(280px, 100%, 380px), 1fr))[auto-fill];
      gap: clamp(15px, 2vw, 25px);
      margin: 30px 0;
      width: 100%;
    }

    .article-card {
      background: var(--white);
      border-radius: 12px;
      padding: clamp(15px, 2vw, 25px);
      box-shadow: 0 3px 12px rgba(0,0,0,0.03);
      -webkit-box-shadow: 0 3px 12px rgba(0,0,0,0.03);
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      border-top: 3px solid var(--primary-color);
      border-bottom: 3px solid var(--primary-light);
    }

    .article-card:hover {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      box-shadow: 0 12px 20px rgba(128, 0, 32, 0.08);
      -webkit-box-shadow: 0 12px 20px rgba(128, 0, 32, 0.08);
    }

    .article-card-tag {
      display: inline-block;
      padding: 3px 10px;
      background: var(--primary-light);
      color: var(--primary-dark);
      font-size: 0.75rem;
      border-radius: 15px;
      margin-bottom: 8px;
    }

    .article-card-meta {
      margin: 10px 0;
      font-size: 0.875rem;
      color: var(--text-tertiary);
    }

    .article-card-excerpt {
      margin: 10px 0 15px;
      color: var(--text-secondary);
    }

    /* 5.6 单篇文章样式 - 排版优化（玩乐主题） */
    .article {
      max-width: 800px;
      margin: 0 auto;
      padding: clamp(15px, 2vw, 25px);
      background: var(--white);
      border-radius: 12px;
      box-shadow: 0 2px 15px rgba(0,0,0,0.02);
      -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.02);
      border-top: 3px solid var(--primary-color);
      border-left: 3px solid var(--primary-light);
      margin-bottom: 30px;
    }

    .article-title {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--text-main);
      text-align: center;
      margin: 20px 0 30px;
      line-height: 1.3;
      position: relative;
      padding-bottom: 15px;
    }

    .article-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
      background: -webkit-linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    }

    .article-meta {
      text-align: center;
      font-size: 0.875rem;
      color: var(--text-tertiary);
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--primary-light);
    }

    .article-meta span { margin: 0 10px; }
    .article-meta a { color: var(--primary-dark); }
    .article-meta a:hover { color: var(--primary-color); }

    .article-content {
      font-size: clamp(1rem, 1.5vw, 1.05rem);
      line-height: 1.8;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
    }

    .article-content p {
      margin: 1.5em 0;
      text-indent: 2em;
    }

    .article-content h2 {
      font-size: clamp(1.2rem, 2vw, 1.75rem);
      margin: 2em 0 1em;
      padding-bottom: 0.5em;
      border-bottom: 1px solid var(--primary-light);
    }

    .article-content blockquote {
      margin: 1.5em 0;
      padding: 15px 20px;
      background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-light) 100%);
      background: -webkit-linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-light) 100%);
      border-left: 4px solid var(--primary-color);
      color: var(--text-secondary);
      font-style: italic;
      border-radius: 8px;
    }

    .article-content img {
      display: block;
      margin: 2em auto;
      max-width: 100%;
      border-radius: 8px;
      border: 2px solid var(--primary-light);
      box-shadow: 0 3px 10px rgba(128, 0, 32, 0.08);
      -webkit-box-shadow: 0 3px 10px rgba(128, 0, 32, 0.08);
    }

    .article-content a {
      border-bottom: 1px dashed var(--primary-color);
    }

    .article-content a:hover {
      border-bottom: 1px solid var(--primary-color);
    }

    /* 5.7 侧边栏样式 - 兼容优化（玩乐主题） */
    .sidebar-widget {
      background: var(--white);
      border-radius: 12px;
      padding: clamp(15px, 2vw, 20px);
      margin-bottom: clamp(15px, 2vw, 20px);
      box-shadow: 0 3px 12px rgba(0,0,0,0.03);
      -webkit-box-shadow: 0 3px 12px rgba(0,0,0,0.03);
      border-top: 3px solid var(--primary-color);
      border-right: 3px solid var(--primary-light);
      border-left: none;
      border-bottom: none;
      -webkit-transition: -webkit-transform 0.3s ease;
      transition: -webkit-transform 0.3s ease;
      transition: transform 0.3s ease;
      transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    }

    .sidebar-widget:hover {
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
    }

    .sidebar-widget-title {
      font-size: clamp(1rem, 1.8vw, 1.1rem);
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--primary-light);
      color: var(--primary-dark);
    }

    .hot-article-list li {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed var(--primary-light);
      list-style: none;
    }

    /* 热门推荐链接特殊配色 */
    .hot-article-list a {
      color: var(--text-black) !important;
      font-weight: 500;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hot-article-list a:hover {
      color: var(--primary-dark) !important;
      -webkit-transform: translateX(3px);
              transform: translateX(3px);
    }

    /* 5.8 表单样式 - 交互优化 */
    input, textarea, select {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid var(--primary-light);
      border-radius: 8px;
      font-size: 1rem;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    input:focus, textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.08);
      -webkit-box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.08);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: var(--primary-dark);
    }

    /* 5.9 图片样式 - 性能优化 */
    img { 
      max-width: 100%; 
      height: auto; 
      border-radius: 10px; 
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    .avatar { 
      width: 60px; 
      height: 60px; 
      border-radius: 50%; 
      object-fit: cover; 
      -o-object-fit: cover;
      border: 2px solid var(--primary-light); 
    }

    /* 5.10 底部样式 - 布局优化（玩乐主题） */
    .footer {
      background: var(--footer-bg);
      border-top: none;
      padding: 20px 0 20px;
      margin-top: 50px;
      font-size: 0.875rem;
      color: var(--footer-text);
      width: 100%;
    }

    .footer .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: clamp(20px, 4vw, 40px);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .footer-column {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      min-width: clamp(180px, 25vw, 200px);
    }

    .footer-column h4 {
      font-size: 1rem;
      color: var(--primary-dark);
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: none;
    }

    .footer-column a {
      color: var(--footer-text) !important;
      display: block;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .footer-column a:hover {
      color: var(--footer-hover) !important;
      -webkit-transform: translateX(3px);
              transform: translateX(3px);
    }

    /* 友情链接模块 */
    .friend-links-section {
      padding: 10px 20px;
      margin-bottom: 10px;
      background: var(--friend-link-bg);
      border-radius: 8px;
    }

    .friend-links-title {
      font-size: 1rem;
      color: var(--primary-dark);
      margin-bottom: 8px;
      padding-bottom: 0;
      border-bottom: none;
      max-width: 1160px;
      margin-left: auto;
      margin-right: auto;
    }

    .friend-links {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 15px;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      max-width: 1160px;
      margin: 0 auto;
    }

    .friend-links a {
      color: var(--footer-text) !important;
    }

    .friend-links a:hover {
      color: var(--footer-hover) !important;
    }

    .footer-copyright {
      text-align: center;
      padding-top: 10px;
      border-top: none;
      color: var(--text-tertiary);
      margin: 0 20px;
    }

    /* ==================== 6. 响应式适配（多设备兼容）==================== */
    @media screen and (max-width: 768px) {
      .header .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 15px 20px;
      }

      .logo {
        margin-bottom: 10px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

      .nav {
        margin: 10px 0 15px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

      .header-right {
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

      .main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      .sidebar {
        width: 100%;
      }
    }

    @media screen and (max-width: 480px) {
      .article-card {
        padding: 15px;
      }

      .carousel-indicators {
        bottom: 10px;
      }

      .article-content p {
        text-indent: 1em;
      }
    }

    /* IE浏览器专属兼容 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .carousel-slides {
        width: 300%;
      }
      .article-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }
      .article-card {
        width: 100%;
        margin-bottom: 20px;
      }
      .logo {
        display: block;
        text-align: center;
      }
      .logo .love-play {
        display: inline-block;
        margin-top: 5px;
      }
    }

    /* 打印样式优化 */
    @media print {
      .header, .footer, .sidebar, .carousel, .link-btn, .btn {
        display: none !important;
      }
      .main {
        margin: 0;
        display: block;
      }
      .content {
        width: 100%;
      }
      .article {
        box-shadow: none;
        border: none;
        padding: 0;
      }
      body {
        background: white;
        color: black;
      }
    }
  </style>
</head>
<body>
  <!-- 头部区域 -->
  <header class="header">
    <div class="container">
      <!-- LOGO修改为爱玩 -->
      <div class="logo">
        珊珊<span>同学</span><span class="registered">®</span>
        <span class="love-play">爱玩</span>
      </div>
      <nav>
        <ul class="nav">
          <li class="nav-item"><a href="#" class="active">首页</a></li>
          <li class="nav-item"><a href="#">玩具分享</a></li>
          <li class="nav-item"><a href="#">旅行攻略</a></li>
          <li class="nav-item"><a href="#">关于</a></li>
        </ul>
      </nav>
      <div class="header-right">
        <div class="search-box">
          <input type="text" placeholder="搜索玩乐攻略...">
          <button class="search-btn">🔍</button>
        </div>
        <button class="link-btn btn-sm">登录</button>
      </div>
    </div>
  </header>

  <!-- 全屏轮播图（玩乐主题） -->
  <div class="carousel" id="carousel">
    <div class="carousel-slides" id="carouselSlides">
      <div class="carousel-slide carousel-slide-1"></div>
      <div class="carousel-slide carousel-slide-2"></div>
      <div class="carousel-slide carousel-slide-3"></div>
    </div>
    <!-- 轮播控制按钮 -->
    <button class="carousel-btn carousel-prev" id="prevBtn">❮</button>
    <button class="carousel-btn carousel-next" id="nextBtn">❯</button>
    <!-- 轮播指示器 -->
    <div class="carousel-indicators">
      <button class="carousel-indicator active" data-index="0"></button>
      <button class="carousel-indicator" data-index="1"></button>
      <button class="carousel-indicator" data-index="2"></button>
    </div>
  </div>

  <!-- 主要内容区域（玩乐主题） -->
  <main class="main container">
    <!-- 左侧内容区 -->
    <div class="content">
      <!-- 首页标题 -->
      <h2>玩乐日常</h2>

      <!-- 文章列表（玩乐主题） -->
      <div class="article-list">
        <!-- 文章卡片1 -->
        <div class="article-card">
          <span class="article-card-tag">潮玩收藏</span>
          <h3 class="article-card-title">
            <a href="#">复古潮玩分享｜酒红色系手办超有质感</a>
          </h3>
          <div class="article-card-meta">
            <span>作者：珊珊同学</span> | <span>2026-01-02</span> | <span>阅读：1234</span>
          </div>
          <div class="article-card-excerpt">
            酒红色#800020系潮玩太有质感啦！分享我的复古手办收藏，从盲盒到限量款，酒红色涂装的手办高级感拉满，收藏控必看～
          </div>
          <div class="article-card-footer">
            <a href="#" class="link-btn btn-sm">阅读全文</a>
          </div>
        </div>

        <!-- 文章卡片2 -->
        <div class="article-card">
          <span class="article-card-tag">旅行探店</span>
          <h3 class="article-card-title">
            <a href="#">小众旅行地｜酒红色调古镇，治愈又出片</a>
          </h3>
          <div class="article-card-meta">
            <span>作者：珊珊同学</span> | <span>2026-01-02</span> | <span>阅读：987</span>
          </div>
          <div class="article-card-excerpt">
            挖到宝了！这个小众古镇的酒红色#800020调建筑太治愈了，红墙黛瓦、古色古香，游客少景又美，拍照超出片，旅行爱好者必去～
          </div>
          <div class="article-card-footer">
            <a href="#" class="link-btn btn-sm">阅读全文</a>
          </div>
        </div>

        <!-- 文章卡片3 -->
        <div class="article-card">
          <span class="article-card-tag">穿搭攻略</span>
          <h3 class="article-card-title">
            <a href="#">旅行穿搭｜酒红色系搭配，拍照超上镜</a>
          </h3>
          <div class="article-card-meta">
            <span>作者：珊珊同学</span> | <span>2026-01-02</span> | <span>阅读：1567</span>
          </div>
          <div class="article-card-excerpt">
            旅行拍照必学！#800020酒红色系穿搭技巧，酒红连衣裙/围巾搭配不同场景，显白又高级，朋友圈点赞爆增的拍照穿搭秘诀～
          </div>
          <div class="article-card-footer">
            <a href="#" class="link-btn btn-sm">阅读全文</a>
          </div>
        </div>
      </div>

      <!-- 单篇文章示例（玩乐主题） -->
      <div class="article">
        <h1 class="article-title">复古潮玩分享｜酒红色系手办超有质感</h1>
        <div class="article-meta">
          <span>作者：<a href="#">珊珊同学</a></span>
          <span>发布时间：2026-01-02</span>
          <span>来源：<a href="#">珊珊同学</a></span>
        </div>
        <div class="article-content">
          <p>潮玩收藏的乐趣在于每一个细节！酒红色#800020系手办不仅视觉上充满复古高级感，还能提升整个展示柜的质感，今天就来分享我的复古潮玩收藏～</p>
          <h2>一、酒红色系潮玩挑选技巧</h2>
          <p>选择#800020这个酒红色调的潮玩，不会太艳丽浮夸，又能在众多藏品中脱颖而出，搭配玻璃展示柜，收藏价值更高。</p>
          <ul>
            <li>材质：优选树脂/合金材质，酒红色涂装更细腻，不易掉色；</li>
            <li>风格：复古风/欧式风手办更适配酒红色，氛围感拉满；</li>
            <li>尺寸：1/6比例手办展示效果最佳，细节清晰可见；</li>
            <li>搭配：白色/黑色展示盒，突出酒红色的高级质感。</li>
          </ul>
          <blockquote>收藏小秘诀：#800020酒红色系潮玩保值率更高，也是最具复古美感的配色，收藏控值得入手～</blockquote>
          <img src="https://picsum.photos/800/400?play" alt="#800020酒红色系手办收藏示例">
          <p>以上就是我的复古潮玩分享和酒红色系手办挑选技巧啦，希望每个爱玩的小伙伴都能找到自己心仪的藏品，享受收藏的乐趣～</p>
        </div>
      </div>
    </div>

    <!-- 右侧侧边栏（玩乐主题） -->
    <aside class="sidebar">
      <!-- 热门文章（玩乐主题） -->
      <div class="sidebar-widget">
        <h3 class="sidebar-widget-title">热门推荐</h3>
        <ul class="hot-article-list">
          <li><a href="#">复古潮玩分享｜酒红色系手办超有质感</a></li>
          <li><a href="#">小众旅行地｜酒红色调古镇，治愈又出片</a></li>
          <li><a href="#">旅行穿搭｜酒红色系搭配，拍照超上镜</a></li>
          <li><a href="#">亲子玩乐｜10个益智玩具，好玩又涨知识</a></li>
          <li><a href="#">短途旅行｜周末好去处，轻松又惬意</a></li>
        </ul>
      </div>

      <!-- 分类导航（玩乐主题） -->
      <div class="sidebar-widget">
        <h3 class="sidebar-widget-title">内容分类</h3>
        <ul class="nav flex-column">
          <li class="nav-item"><a href="#">潮玩收藏 (28)</a></li>
          <li class="nav-item"><a href="#">旅行探店 (15)</a></li>
          <li class="nav-item"><a href="#">穿搭攻略 (32)</a></li>
          <li class="nav-item"><a href="#">亲子玩乐 (18)</a></li>
          <li class="nav-item"><a href="#">短途旅行 (10)</a></li>
        </ul>
      </div>

      <!-- 订阅表单（玩乐主题） -->
      <div class="sidebar-widget">
        <h3 class="sidebar-widget-title">订阅更新</h3>
        <form>
          <div class="form-group">
            <label for="email">邮箱地址</label>
            <input type="email" id="email" placeholder="输入邮箱获取玩乐攻略" required>
          </div>
          <button type="submit" class="btn btn-accent w-100">立即订阅</button>
        </form>
      </div>
    </aside>
  </main>

  <!-- 底部区域（玩乐主题） -->
  <footer class="footer">
    <div class="container">
      <div class="footer-column">
        <h4>关于我们</h4>
        <a href="#">珊珊同学介绍</a>
        <a href="#">联系我们</a>
        <a href="#">加入我们</a>
        <a href="#">隐私政策</a>
      </div>
      <div class="footer-column">
        <h4>内容导航</h4>
        <a href="#">潮玩收藏</a>
        <a href="#">旅行探店</a>
        <a href="#">穿搭攻略</a>
        <a href="#">亲子玩乐</a>
      </div>
      <div class="footer-column">
        <h4>关注我们</h4>
        <a href="#">小红书</a>
        <a href="#">抖音</a>
        <a href="#">微博</a>
        <a href="#">B站</a>
      </div>
    </div>

    <!-- 独立友情链接模块（玩乐主题） -->
    <div class="friend-links-section">
      <h4 class="friend-links-title">友情链接</h4>
      <div class="friend-links">
        <a href="#">潮玩研究所</a>
        <a href="#">旅行生活馆</a>
        <a href="#">玩乐小铺</a>
        <a href="#">探店打卡社</a>
      </div>
    </div>

    <!-- 版权信息（玩乐主题） -->
    <div class="footer-copyright">
      © 2026 珊珊同学® 爱玩 版权所有 | 快乐相伴每一天✨
    </div>
  </footer>

  <!-- 轮播图JS脚本 - 性能优化 -->
  <script>
    // 严格模式
    'use strict';

    // 轮播图核心功能
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const carouselSlides = document.getElementById('carouselSlides');
      const prevBtn = document.getElementById('prevBtn');
      const nextBtn = document.getElementById('nextBtn');
      const indicators = document.querySelectorAll('.carousel-indicator');
      
      // 初始状态
      let currentIndex = 0;
      let autoPlayInterval;

      // 切换轮播图函数
      function goToSlide(index) {
        // 边界处理
        if (index < 0) index = 2;
        if (index > 2) index = 0;
        
        // 移动轮播容器 - 兼容处理
        const translateValue = `translateX(-${index * 33.333}%)`;
        carouselSlides.style.transform = translateValue;
        carouselSlides.style.webkitTransform = translateValue;
        
        // IE兼容
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
          carouselSlides.style.msTransform = translateValue;
        }
        
        // 更新指示器状态
        indicators.forEach((indicator, i) => {
          if (i === index) {
            indicator.classList.add('active');
          } else {
            indicator.classList.remove('active');
          }
        });
        
        currentIndex = index;
      }

      // 自动轮播函数
      function startAutoPlay() {
        autoPlayInterval = setInterval(function() {
          goToSlide(currentIndex + 1);
        }, 5000);
      }

      // 停止自动轮播
      function stopAutoPlay() {
        clearInterval(autoPlayInterval);
      }

      // 初始化自动轮播
      startAutoPlay();

      // 按钮点击事件
      prevBtn.addEventListener('click', function() {
        stopAutoPlay();
        goToSlide(currentIndex - 1);
        startAutoPlay();
      });

      nextBtn.addEventListener('click', function() {
        stopAutoPlay();
        goToSlide(currentIndex + 1);
        startAutoPlay();
      });

      // 指示器点击事件
      indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', function() {
          stopAutoPlay();
          goToSlide(index);
          startAutoPlay();
        });
      });

      // 鼠标悬停停止轮播
      const carousel = document.getElementById('carousel');
      carousel.addEventListener('mouseenter', stopAutoPlay);
      carousel.addEventListener('mouseleave', startAutoPlay);

      // 触摸滑动支持（移动端）
      let touchStartX = 0;
      let touchEndX = 0;

      carousel.addEventListener('touchstart', function(e) {
        touchStartX = e.changedTouches[0].screenX;
        stopAutoPlay();
      }, false);

      carousel.addEventListener('touchend', function(e) {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
        startAutoPlay();
      }, false);

      function handleSwipe() {
        const swipeThreshold = 50; // 滑动阈值
        if (touchEndX - touchStartX > swipeThreshold) {
          goToSlide(currentIndex - 1); // 左滑
        } else if (touchEndX - touchStartX < -swipeThreshold) {
          goToSlide(currentIndex + 1); // 右滑
        }
      }
    });
  </script>
</body>
</html>
