/* ============================================================
   水族文化 · 主界面样式表
   统一色板定版（2026-08-14）：
   - 主色：深藏蓝   #1A2A5C（来源：桌面《色板CSS.css》）
   - 辅色：暗金褐   #B8860B（来源：桌面《色板CSS.css》）
   - 背景：米白     #F7F2E7（水书纸张质感）
   - 警示：暗红     #A04438
   所有颜色一律使用 :root 变量，禁止硬编码色值。
   ============================================================ */

:root {
    /* ========== 一、梯度色阶（50 最浅 → 900 最深，来源桌面《色板CSS.css》） ========== */
    /* 主色：深藏蓝 */
    --primary-50:  #EDEEF2;
    --primary-100: #D6D9E2;
    --primary-200: #AFB4C6;
    --primary-300: #8C94AE;
    --primary-400: #5F6A8D;
    --primary-500: #1A2A5C;   /* 主色原值 */
    --primary-600: #16244E;
    --primary-700: #121D40;
    --primary-800: #0D152E;
    --primary-900: #080D1C;

    /* 辅色：暗金褐 */
    --secondary-50:  #F9F5EB;
    --secondary-100: #F2E9D3;
    --secondary-200: #E6D5AA;
    --secondary-300: #DCC285;
    --secondary-400: #CDAA54;
    --secondary-500: #B8860B; /* 辅色原值 */
    --secondary-600: #9C7209;
    --secondary-700: #815E08;
    --secondary-800: #5C4306;
    --secondary-900: #372803;

    /* ========== 二、语义化变量（新页面推荐直接使用） ========== */
    --color-primary:            var(--primary-500);  /* 品牌主色 */
    --color-primary-hover:      var(--primary-400);  /* 悬停态（变浅） */
    --color-primary-active:     var(--primary-600);  /* 按下态（变深） */
    --color-primary-soft:       var(--primary-50);   /* 主色浅底（标签/提示背景） */
    --color-primary-border:     var(--primary-200);  /* 主色边框 */
    --color-on-primary:         #FFFFFF;             /* 主色背景上的文字 */
    --color-secondary:          var(--secondary-500); /* 品牌辅色 */
    --color-secondary-hover:    var(--secondary-400); /* 悬停态 */
    --color-secondary-active:   var(--secondary-600); /* 按下态 */
    --color-secondary-soft:     var(--secondary-50);  /* 辅色浅底 */
    --color-secondary-border:   var(--secondary-200); /* 辅色边框 */
    --color-on-secondary:       #FFFFFF;              /* 辅色背景上的文字 */

    /* ========== 三、中性色（蓝灰系，与主色协调） ========== */
    --gray-50:  #F7F8FA;
    --gray-100: #EEF0F4;
    --gray-200: #DDE1E8;
    --gray-300: #C3CAD6;
    --gray-400: #9AA5B8;
    --gray-500: #76819A;
    --gray-600: #5A647C;
    --gray-700: #475064;
    --gray-800: #363D4E;
    --gray-900: #232833;
    --color-text-primary:   var(--gray-900);  /* 主文字 */
    --color-text-secondary: var(--gray-500);  /* 次要文字 */
    --color-text-disabled:  var(--gray-400);  /* 禁用文字 */
    --color-border:         var(--gray-200);  /* 常规边框 */
    --color-divider:        var(--gray-100);  /* 分割线 */

    /* ========== 四、水族网页语义色（页面兼容别名，勿改值） ========== */
    --indigo:        var(--primary-500);   /* 主色：深藏蓝（原靛蓝 #24406C 定版为 #1A2A5C） */
    --indigo-dark:   var(--primary-600);   /* 深藏蓝 */
    --indigo-light:  var(--primary-400);   /* 浅藏蓝 */
    --gold:          var(--secondary-500); /* 辅色：暗金褐（原亮金 #C9A227 定版为 #B8860B） */
    --gold-deep:     var(--secondary-600); /* 深金（文字强调） */
    --gold-light:    var(--secondary-200); /* 浅金 */
    --cream:         #F7F2E7;              /* 背景：米白（水书纸张感） */
    --card:          #FFFDF6;              /* 卡片白 */
    --nav-bg:        #EDE6D8;              /* 功能框/深米底 */
    --tag-bg:        #FFF8E7;              /* 浅米黄（选中标签） */
    --border-soft:   #E4DCC8;              /* 柔和边框 */
    --frame-grad-a:  #EFE6D3;              /* 装裱渐变（上） */
    --frame-grad-b:  #FBF6EA;              /* 装裱渐变（下） */
    --danger:        #A04438;              /* 警示暗红（原 #B03A3A 微调融入色板） */
    --white:         #FFFFFF;
    --text:          var(--color-text-primary);    /* 正文 */
    --text-soft:     var(--color-text-secondary);  /* 次要文字 */
    /* RGB 分量（供 rgba() 半透明使用） */
    --indigo-rgb:      26, 42, 92;    /* 主色 #1A2A5C */
    --indigo-dark-rgb: 22, 36, 78;    /* 深主色 #16244E */
    --gold-rgb:        184, 134, 11;  /* 辅色 #B8860B */
    --gold-light-rgb:  230, 213, 170; /* 浅金 #E6D5AA */
    --card-rgb:        255, 253, 246; /* 卡片白 #FFFDF6 */
    --danger-rgb:      160, 68, 56;   /* 警示红 #A04438 */

    /* 书法字体：大标题优先华文行楷（本机有则显示，无则回退嵌入的霞鹜文楷）；小标题/按钮用霞鹜文楷 */
    --font-display: "华文行楷", "STXingkai", "LXGW WenKai", "华文楷体", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
    --font-kai: "LXGW WenKai", "华文楷体", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

body {
    /* 固定宽度布局：页面始终 1200px 宽，窗口缩小时出现横向滚动条，内容不挤压不换行 */
    position: relative;        /* 供左上角校徽绝对定位 */
    width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
    padding: 36px 20px 40px;   /* 顶部留白加大，避免标题/校徽顶格 */
    background-color: var(--cream);
    /* 米白纸张质感：极淡水纹纹理平铺 + 靛蓝/金色晕染 */
    background-image:
        url("../素材总库/02-手绘纹样SVG/paper-wave.svg"),
        radial-gradient(circle at 18% 28%, rgba(var(--indigo-rgb), 0.04), transparent 55%),
        radial-gradient(circle at 82% 72%, rgba(var(--gold-rgb), 0.05), transparent 55%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 220px 44px, auto, auto;
    color: var(--text);
}

/* ============ 页面大标题 ============ */
.title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 4px;
}

.title-ornament {
    width: 42px;
    height: 42px;
    opacity: 0.85;
    transform: translateY(24px); /* 与标题同高度一起下移 */
}

.page-title {
    text-align: center;
    font-size: 84px;
    font-weight: 400;          /* 霞鹜文楷常规字重更秀气，加粗会显笨重 */
    color: var(--indigo);
    font-family: var(--font-display);
    letter-spacing: 6px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
    transform: translateY(24px); /* 与副标题/校徽更协调，与铜鼓纹同高 */
}

/* 左侧校徽：正片叠底消除白底，作为标题左侧锚点 */
.school-logo {
    width: 180px;
    height: auto;
    mix-blend-mode: multiply;  /* 白底融入页面米白背景，只保留校徽图案 */
    opacity: 0.95;
    flex-shrink: 0;
    margin-right: 48px;        /* 与标题拉开呼吸感，避免太密 */
    transform: translateY(64px); /* 下移，与标题呼应 */
}

/* 右侧占位：与校徽等宽，保持标题居中；将来放文旅局标志 */
.logo-placeholder {
    width: 180px;
    flex-shrink: 0;
    margin-left: 48px;         /* 与左侧校徽对称补偿，保持标题居中 */
}

/* 副标题：项目全称 */
.page-subtitle {
    text-align: center;
    font-size: 24px;
    font-weight: 700;          /* 加粗（使用嵌入的霞鹜文楷加粗字重），更清晰 */
    color: var(--indigo-light);
    font-family: var(--font-kai);
    letter-spacing: 4px;
    margin: 4px 0 14px;
}

.title-divider {
    display: block;
    width: 504px;              /* 与副标题同宽 */
    max-width: 80%;
    height: 34px;
    margin: 0 auto 20px;
    opacity: 0.9;
}

/* ============ 顶部主功能区 ============ */
.top-main {
    width: 100%;
    height: 270px;             /* 背景框高度：让水书下拉菜单贴近底边 */
    position: relative;
    border: 4px solid var(--gold);
    margin-bottom: 20px;
    overflow: hidden;
    background-color: var(--nav-bg);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(var(--indigo-rgb), 0.15);
}

/* 半透明背景图：深蓝带(按钮垫底) + 浅蓝山水，cover 不拉伸 */
.bg-img {
    width: 100%;
    height: 100%;
    background: url("../素材总库/08-界面图片/背景-蓝带山水.jpg") no-repeat center 16% / cover;
    opacity: 0.55;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 靛蓝渐变遮罩：压暗顶部背景，让按钮更突出 */
.top-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--indigo-dark-rgb), 0.62) 0%,
        rgba(var(--indigo-rgb), 0.10) 48%,
        rgba(var(--indigo-dark-rgb), 0.50) 100%
    );
    z-index: 2;
}

/* 角落太阳纹装饰 */
.corner {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 0.55;
    z-index: 3;
}
.corner-tl { top: 8px; left: 8px; }
.corner-tr { top: 8px; right: 8px; }

/* 底部回纹装饰条 */
.meander-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: url("../素材总库/02-手绘纹样SVG/meander.svg") repeat-x bottom;
    background-size: 120px 14px;
    opacity: 0.9;
    z-index: 3;
}

/* 按钮容器 - 平均分配5个按钮宽度 */
.btn-container {
    position: absolute;
    top: 50px;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 4;
    width: calc(100% - 80px);
}

/* 主功能按钮 */
.main-btn {
    width: 150px;
    height: 60px;
    background-color: rgba(var(--card-rgb), 0.92);
    border: 3px solid var(--indigo);
    border-radius: 8px;
    font-size: 24px;
    font-weight: 700;          /* 加粗（使用嵌入的霞鹜文楷加粗字重） */
    font-family: var(--font-kai);
    color: var(--indigo);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 10px rgba(var(--indigo-dark-rgb), 0.35);
    white-space: nowrap;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 按钮内部太阳纹底纹（刺绣感） */
.main-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../素材总库/02-手绘纹样SVG/sun.svg") repeat;
    background-size: 30px 30px;
    opacity: 0.07;
    transition: opacity 0.3s ease;
}

/* 按钮底部水波纹装饰 */
.main-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: url("../素材总库/02-手绘纹样SVG/wave.svg") repeat-x bottom;
    background-size: 60px 6px;
    opacity: 0.6;
}

/* 按钮 hover：靛蓝底 + 金色描边 */
.main-btn:hover {
    transform: translateY(-6px);
    background-color: var(--indigo);
    color: var(--white);
    border-color: var(--gold);
    box-shadow: 0 12px 14px rgba(var(--indigo-dark-rgb), 0.45), inset 0 0 0 2px rgba(var(--gold-light-rgb), 0.35);
}
/* hover：内部太阳纹"点亮"为金色刺绣 */
.main-btn:hover::before {
    opacity: 0.18;
}
.main-btn:hover::after {
    opacity: 0.9;
}

/* 水书下拉容器 - 与其他按钮尺寸一致 */
.shuishu-dropdown {
    width: 150px;
    height: 60px;
    position: relative;
}

/* 下拉菜单 */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(var(--card-rgb), 0.97);
    border: 3px solid var(--indigo);
    border-top: none;
    z-index: 5;
    box-shadow: 0 6px 10px rgba(var(--indigo-dark-rgb), 0.2);
    border-radius: 0 0 8px 8px;
}

.dropdown-content a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: var(--indigo);
    font-size: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.dropdown-content a:hover {
    background-color: var(--indigo);
    color: var(--white);
}

.shuishu-dropdown:hover .dropdown-content {
    display: block;
}

/* ============ 软件下载 / 公众号链接行 ============ */
.link-row {
    width: 100%;
    min-height: 80px;
    border: 2px solid var(--indigo);
    margin-bottom: 20px;
    padding: 15px 20px;
    font-size: 18px;
    color: var(--indigo);
    line-height: 1.8;
    background-color: var(--card);
    /* 高透明度浅靛蓝渐变：增加层次，不影响阅读 */
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.18) 0%, rgba(var(--indigo-rgb), 0.06) 45%, rgba(var(--gold-rgb), 0.10) 100%);
    border-radius: 8px;
}

.link-row a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
}

.link-row a:hover {
    text-decoration: underline;
    color: var(--indigo-light);
}

/* ============ 中部内容区 ============ */
.middle-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.left-col {
    width: 30%;
    border: 2px solid var(--gold);
    padding: 18px;
    text-align: center;
    background-color: var(--card);
    /* 高透明度浅靛蓝渐变：增加层次，不影响阅读 */
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.18) 0%, rgba(var(--indigo-rgb), 0.06) 45%, rgba(var(--gold-rgb), 0.10) 100%);
    border-radius: 8px;
}

.right-col {
    width: 70%;
    border: 2px solid var(--gold);
    padding: 18px;
    background-color: var(--card);
    /* 高透明度浅靛蓝渐变：增加层次，不影响阅读 */
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.18) 0%, rgba(var(--indigo-rgb), 0.06) 45%, rgba(var(--gold-rgb), 0.10) 100%);
    border-radius: 8px;
}

.left-col,
.right-col {
    min-height: 600px;
}

/* 本站图标 */
.site-icon {
    width: 100px;
    height: 100px;
    border: 3px solid var(--indigo);
    margin: 0 auto 15px;
    background: url("../素材总库/08-界面图片/图标.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(var(--indigo-rgb), 0.2);
}

/* 栏目标题 */
.col-title {
    font-size: 24px;
    font-weight: 400;          /* 霞鹜文楷常规字重 */
    color: var(--indigo);
    margin-bottom: 12px;
    text-align: center;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;       /* 标题文字永不换行 */
    font-family: var(--font-kai);
}
/* 标题两侧回纹装帧线 */
.col-title::before,
.col-title::after {
    content: "";
    flex: 0 1 56px;
    height: 10px;
    background: url("../素材总库/02-手绘纹样SVG/meander.svg") repeat-x bottom;
    background-size: 56px 10px;
    opacity: 0.7;
}

.title-icon {
    width: 22px;
    height: 22px;
}

/* 右侧图标镜像翻转（让两条小鱼对称朝向） */
.title-icon-mirror {
    transform: scaleX(-1);
}

.col-content {
    font-size: 16px;
    color: var(--text-soft);
    line-height: 1.8;
}

/* ============ 底部相关网站跳转 ============ */
.bottom-links {
    width: 100%;
    min-height: 120px;
    border: 2px solid var(--indigo);
    margin-bottom: 20px;
    padding: 20px;
    font-size: 18px;
    line-height: 2;
    background-color: var(--card);
    /* 高透明度浅靛蓝渐变：增加层次，不影响阅读 */
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.18) 0%, rgba(var(--indigo-rgb), 0.06) 45%, rgba(var(--gold-rgb), 0.10) 100%);
    border-radius: 8px;
}

.bottom-links a {
    display: block;
    color: var(--indigo-light);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    padding-left: 8px;
    border-left: 3px solid transparent;
}

.bottom-links a:hover {
    color: var(--gold);
    text-decoration: underline;
    border-left: 3px solid var(--gold);
}

/* ============ 无缝循环轮播（装裱框架） ============ */
.carousel-frame {
    width: 100%;
    border: 3px solid var(--gold);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--frame-grad-a), var(--frame-grad-b));
    padding: 10px 10px 6px;
    box-shadow: 0 6px 16px rgba(var(--indigo-rgb), 0.15);
}

/* 装裱上沿：回纹装饰条 */
.frame-meander {
    height: 12px;
    margin-bottom: 8px;
    background: url("../素材总库/02-手绘纹样SVG/meander.svg") repeat-x bottom;
    background-size: 150px 12px;
    opacity: 0.85;
}

.photo-carousel {
    width: 100%;
    height: 460px;
    border: 2px solid var(--indigo);
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--nav-bg);
    box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), 0.15);
}

/* 指示圆点 */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0 4px;
}

.carousel-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--indigo);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.carousel-dot:hover {
    border-color: var(--gold);
    background: var(--gold-light);
}

.carousel-dot.active {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.25);
}

.carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: rgba(var(--indigo-rgb), 0.75);
    color: var(--white);
    border: 2px solid var(--gold);
    cursor: pointer;
    font-size: 22px;
    z-index: 10;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.carousel-btn:hover {
    background-color: rgba(var(--gold-rgb), 0.9);
    color: var(--indigo);
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* ============ 固定宽度布局说明 ============ 
   页面固定 1200px 宽（body width/min-width），窗口小于 1200px 时
   浏览器自动出现横向滚动条，内容保持原样不被挤压、不换行。
   原响应式挤压规则已移除。 */