/* =========================================================
 *  v55 · 科普创作出版 · 共享样式表
 *  设计：蓝色科技风 + 卡片化布局
 *
 *  结构：
 *    A. 设计令牌（变量）—— 字号 / 颜色 / 圆角 / 间距
 *       按 6 级响应式断点递增：
 *         L1 0-400   L2 401-768  L3 769-1024
 *         L4 1025-1280  L5 1280-1920  L6 1920+
 *    B. Reset & 基础
 *    C. 组件样式（引用令牌）
 *    D. 响应式布局（@media 统一置于文件末尾）
 * ========================================================= */

/* =========================================================
 *  A. 设计令牌 —— 默认等级 L1 (0-400px)
 * ========================================================= */
:root {
    /* ---------- 颜色（全等级固定） ---------- */
    /* 主色 */
    --c-primary: #1665e0;
    --c-primary-dark: #0f4ec2;
    --c-primary-light: #3b82f6;
    --c-link: #2B70D5;

    /* tag 语义色 */
    --c-tag-blue: #2563eb;
    --c-tag-green: #10b981;
    --c-tag-orange: #f59e0b;
    --c-tag-red: #ef4444;

    /* 背景 */
    --c-bg-page: #eef3fb;
    --c-bg-card: #ffffff;
    --c-bg-soft: #f3f6fc;
    --c-bg-hero: #0f4ec2;

    /* 文字 */
    --c-text: #222222;
    --c-text-3: #333333;
    --c-text-sub: #666666;
    --c-text-mut: #999999;
    --c-text-light: #ffffff;

    /* 边框 */
    --c-border: #EFF0F1;
    --c-bd-bl: rgba(43, 112, 213, 0.4);
    --c-bd-gl: rgba(39, 153, 68, 0.4);
    --c-bd-or: rgba(232, 110, 58, 0.4);
    --c-bt-bl: rgba(43, 112, 213, 1.0);
    --c-bt-gl: rgba(39, 153, 68, 1.0);
    --c-bt-or: rgba(232, 110, 58, 1.0);

    /* 阴影 */
    --shadow-card: 0 2px 12px rgba(15, 78, 194, 0.08);
    --shadow-card-l: 0 4px 20px rgba(15, 78, 194, 0.12);

    /* 过渡 */
    --tr: all 0.25s ease;

    /* ---------- 字号 (L1) ---------- */
    --fs-body: 10px;        /* 正文 */
    --fs-xxs: 9px;
    --fs-xs: 10px;          /* 标签 / 日期 / 辅助 */
    --fs-sm: 10px;          /* 次要文字 */
    --fs-h0: 16px;          /* 文章大标题 */
    --fs-h1: 16px;          /* 文章大标题 */
    --fs-h2: 14px;          /* 区块标题 */
    --fs-h3: 12px;          /* 卡片标题 */
    --fs-h4: 12px;
    --fs-nav: 14px;         /* 导航 */
    --fs-card-title: 13px;  /* 卡片标题（别名） */
    --fs-btn: 13px;         /* 按钮 */
    --fs-hero: 23px;

    /* ---------- 圆角 (L1) ---------- */
    --r-xs: 3px;            /* 标签 / 小元素 */
    --r-sm: 6px;            /* 封面 / 按钮 */
    --r-md: 4px;           /* 卡片 */
    --r-lg: 8px;           /* 大容器 */
    --r-pill: 999px;        /* 胶囊 */

    /* ---------- 间距 (L1) ---------- */
    --space-xs: 4px;
    --space-sm: 4px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --gap-card: 16px;       /* 网格卡片间距 */
    --gap-listc: 15px;

    /* ---------- 页面容器 (L1) -------gap-listc----- */
    --container-w: 91.46%;
    --page-pad: 14px;       /* 左右留白 */
    --w-bd-t: 4px;
    --w-s1c: 12px;
    --w-dot-h: 4px;
}

/* =========================================================
 *  A. 令牌等级 L2 (401-768px)
 * ========================================================= */
@media (min-width: 401px) {
    :root {
        --fs-body: 2.66vw;
        --fs-xxs: 2.4vw;
        --fs-xs: 2.66vw;
        --fs-sm: 2.66vw;
        --fs-h0: 4.26vw;
        --fs-h1: 4.26vw;
        --fs-h2: 3.73vw;
        --fs-h3: 3.2vw;
        --fs-h4: 3.2vw;
        --fs-nav: 3.73vw;
        --fs-card-title: 3.46vw;
        --fs-btn: 14px;
        --fs-hero: 6.13vw;

        --r-xs: 4px;
        --r-sm: 7px;
        --r-md: 11px;
        --r-lg: 2.13vw;

        --space-xs: 5px;
        --space-sm: 4px;
        --space-md: 13px;
        --space-lg: 18px;
        --space-xl: 22px;
        --gap-card: 4.26vw;
        --gap-listc: 4vw;

        --container-w: 91.46%;
        --page-pad: 16px;
        --w-bd-t: 4px;
        --w-s1c: 12px;
        --w-dot-h: 1.06vw;
    }
}

/* =========================================================
 *  A. 令牌等级 L3 (769-1024px)
 * ========================================================= */
@media (min-width: 769px) {
    :root {
        --fs-body: 11px;
        --fs-xxs:8px;
        --fs-xs: 9.6px;
        --fs-sm: 13px;
        --fs-h0: 25px;
        --fs-h1: 19px;
        --fs-h2: 13px;
        --fs-h3: 13px;
        --fs-h4: 14px;
        --fs-nav: 24px;
        --fs-card-title: 16px;
        --fs-btn: 14px;
        --fs-hero: 72px;

        --r-xs: 4px;
        --r-sm: 8px;
        --r-md: 4px;
        --r-lg: 19px;

        --space-xs: 6px;
        --space-sm: 8px;
        --space-md: 14px;
        --space-lg: 20px;
        --space-xl: 24px;
        --gap-card: 5px;
        --gap-listc: 30px;

        --container-w: 720px;
        --page-pad: 20px;
        --w-bd-t: 6px;
        --w-s1c: 3.2vw;
        --w-dot-h: 5px;
    }
}

/* =========================================================
 *  A. 令牌等级 L4 (1025-1280px)
 * ========================================================= */
@media (min-width: 1025px) {
    :root {
        --fs-body: 15px;
        --fs-xxs: 11px;
        --fs-xs: 13px;
        --fs-sm: 16px;
        --fs-h0: 34px;
        --fs-h1: 26px;
        --fs-h2: 18px;
        --fs-h3: 18px;
        --fs-h4: 20px;
        --fs-nav: 33px;
        --fs-card-title: 21px;
        --fs-btn: 15px;
        --fs-hero: 98px;

        --r-xs: 5px;
        --r-sm: 8px;
        --r-md: 6px;
        --r-lg: 26px;

        --space-xs: 6px;
        --space-sm: 10px;
        --space-md: 16px;
        --space-lg: 22px;
        --space-xl: 26px;
        --gap-card: 6px;
        --gap-listc: 41px;

        --container-w: 980px;
        --page-pad: 24px;
        --w-bd-t: 8px;
        --w-s1c: 20px;
        --w-dot-h: 6px;
    }
}

/* =========================================================
 *  A. 令牌等级 L5 (1280-1920px)
 * ========================================================= */
@media (min-width: 1280px) {
    :root {
        --fs-body: 18px;
        --fs-xxs: 14px;
        --fs-xs: 16px;
        --fs-sm: 20px;
        --fs-h0: 42px;
        --fs-h1: 32px;
        --fs-h2: 22px;
        --fs-h3: 22px;
        --fs-h4: 24px;
        --fs-nav: 40px;
        --fs-card-title: 26px;
        --fs-btn: 15px;
        --fs-hero: 120px;

        --r-xs: 5px;
        --r-sm: 8px;
        --r-md: 8px;
        --r-lg: 32px;

        --space-xs: 6px;
        --space-sm: 12px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 28px;
        --gap-card: 8px;
        --gap-listc: 50px;

        --container-w: 1200px;
        --page-pad: 32px;
        --w-bd-t: 8px;
        --w-s1c: 24px;
        --w-dot-h: 8px;
    }
}

/* =========================================================
 *  A. 令牌等级 L6 (1920px 以上)
 * ========================================================= */
@media (min-width: 1920px) {
    :root {
        --fs-body: 18px;
        --fs-xxs: 14px;
        --fs-xs: 16px;
        --fs-sm: 20px;
        --fs-h0: 42px;
        --fs-h1: 32px;
        --fs-h2: 22px;
        --fs-h3: 22px;
        --fs-h4: 24px;
        --fs-nav: 40px;
        --fs-card-title: 26px;
        --fs-btn: 16px;
        --fs-hero: 120px;

        --r-xs: 6px;
        --r-sm: 10px;
        --r-md: 8px;
        --r-lg: 32px;

        --space-xs: 8px;
        --space-sm: 14px;
        --space-md: 20px;
        --space-lg: 28px;
        --space-xl: 36px;
        --gap-card: 8px;

        --container-w: 1200px;
        --page-pad: 40px;
        --w-bd-t: 8px;
        --w-s1c: 24px;
        --w-dot-h: 8px;
    }
}

/* =========================================================
 *  B. Reset & 基础
 * ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif;
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    background: var(--c-bg-page);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--tr);
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* ---------- 通用工具 ---------- */
.container {
    width: var(--container-w);
    max-width: var(--container-w);
    margin: 0 auto;
}

/* ---------- 图标：横线 + 右尖括号 (→) ---------- */
/* 单个 clip-path 图形路径绘制连续形状，颜色跟随 currentColor */
.icon-arrow {
    position: relative;
    display: inline-block;
    width: 1.8em;      /* 宽高比 3 : 2 */
    height: 1.2em;     /* 高度 1.2em */
    flex-shrink: 0;
    color: currentColor;
}

/* 横线 + 右尖括号：一个连续填充图形路径
   顶点顺序（顺时针）：
   (0,44%)─(68%,44%)  横线上边
            (68%,26%)  箭头上角（向上展开）
            (100%,50%) 箭头尖点（右端中点）
            (68%,74%)  箭头下角
            (68%,56%)  横线下边
   (0,56%)─┘          横线下边收尾 */
.icon-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(0 44%, 76% 44%, 50% 26%, 68% 26%, 100% 50%, 68% 74%, 50% 74%, 76% 56%, 0 56%);
    transition: var(--tr);
}

/* 悬浮：整体右移（配合父级链接使用） */
a:hover .icon-arrow::before {
    transform: translateX(2px);
}
.line-right{
    height: 1.2em;
    aspect-ratio: 4 / 3;
    background-image: url(../images/topic-kepu-create-publish-v14-icon-right.png);
    background-size: 100% 100%;
}

/* =========================================================
 *  C. 组件样式
 * ========================================================= */

/* ---------- Header (Hero) ---------- */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 636;
    overflow: hidden;
    background: linear-gradient(135deg, #0a3aa0 0%, #1665e0 60%, #3b82f6 100%);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url(../images/topic-kepu-create-publish-v14-hero.png);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero__title {
    position: absolute;
    left: 9.68%;
    top: 28.93%;
    z-index: 2;
    color: var(--c-text-light);
    font-size: var(--fs-hero);
    font-weight: bold;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ---------- 顶部导航 ---------- */
.nav {
    background-color: #286DD0;
}
.index-body .nav {
    display: none;
}
.nav__inner {
    width: var(--container-w);
    max-width: var(--container-w);
    margin: 0 auto;
    aspect-ratio: 1200 / 116;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
    font-size: var(--fs-nav);
}

.nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(14px, 2vw, 20px) 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.08em;
    position: relative;
    transition: var(--tr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__item:hover {
    color: var(--c-text-light);
    background: rgba(255, 255, 255, 0.08);
}

.nav__item.active {
    color: var(--c-text-light);
    font-weight: 600;
}

.nav__item.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 32px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
}

/* ---------- 主内容区 ---------- */
.main {
    position: relative;
}

.section {
    margin-bottom: clamp(24px, 4vw, 40px);
}
.section:first-child {
    margin-top: 6.66%;
}
.index-body .section:first-child {
    margin-top: 8.33%;
}

.section:nth-child(n+1) {
    margin-top: 6.66%;
}

.section:last-child {
    margin-bottom: 16.66%;
}



/* 区块标题（左蓝竖条 + 标题 + 右侧"查看更多 →"） */
.sec-head {
    width: 100%;
    aspect-ratio: 1200 / 48;
    margin-bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sec-head__title {
    display: flex;
    align-items: center;
    font-size: var(--fs-h1);
    font-weight: 500;
    color: var(--c-text);
    gap: 0.66em;
}

.sec-head__title::before {
    content: "";
    width: var(--w-bd-t);
    aspect-ratio: 1 / 4;
    border-radius: var(--w-bd-t);
    background: var(--c-primary);
}

.sec-head__more {
    color: var(--c-link);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.sec-head__more:hover {
    color: var(--c-primary-dark);
}

/* ---------- 首页 S1 创作出版动态 ---------- */
.dynamics {
    width: 100% ;
    aspect-ratio: 1200 / 489;
    display: flex;
    align-items: center;
    gap: var(--gap-card);
}

/* 左：大卡 */
.dynamics__main {
    position: relative;
    width: 40.58%;
    aspect-ratio: 487 / 489;
    background: var(--c-bg-card);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: calc(var(--w-s1c) * 1.33) var(--w-s1c) ;
}

.dynamics__main::after {
    content: "";
    position: absolute;
    right: -5%;
    bottom: -2px;
    width: 56.87%;
    aspect-ratio: 277 / 121;
    background-image: url(../images/topic-kepu-create-publish-v14-s1-bg1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
}
.dynamics__main__wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
    perspective: 1200px;
}

/* 纵向 3D 轮播节点：绝对定位，由 JS 通过 translateY 上下滑入切换 */
.dynamics__main-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.6s ease, opacity 0.3s ease;
    transform-style: preserve-3d;
}
.dynamics__main-tag {
    display: inline-block;
    width: 29.22%;
    aspect-ratio: 128 / 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-tag-blue);
    color: #fff;
    font-size: var(--fs-xs);
    border-radius: var(--r-xs);
    margin-bottom: 3.65%;
    position: relative;
    z-index: 1;
}

.dynamics__main-title {
    width: 100%;
    aspect-ratio: 438 / 76;
    font-size: var(--fs-card-title);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
    margin-bottom: 3.65%;
    position: relative;
    z-index: 1;
    /*overflow: hidden;*/
}

.dynamics__main-meta {
    width: 100%;
    aspect-ratio: 438 / 24;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-xs);
    color: var(--c-link);
    margin-bottom: 3.65%;
    position: relative;
    z-index: 1;
}

.dynamics__main-meta svg {
    width: 14px;
    height: 14px;
}

.dynamics__main-desc {
    width: 100%;
    flex: 1;
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--c-text-sub);
    line-height: 1.8;
    position: relative;
    z-index: 1;
    max-height: 50%;
}

.dynamics__main-pager {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
    position: relative;
    z-index: 1;
    user-select: none;
}

.dynamics__main-pager span {
    cursor: pointer;
    height: var(--w-dot-h);
    aspect-ratio: 2 / 1;
    border-radius: var(--w-dot-h);
    background: var(--c-border);
    user-select: none;
}

.dynamics__main-pager span.is-active {
    aspect-ratio: 4 / 1;
    background: var(--c-primary);
}

/* 右：新闻列表 */
.news-list {
    width: 58.75%;
    aspect-ratio: 705 / 489;
    background: var(--c-bg-card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 2.0%;
}

.news-list li {
    width: 100%;
    aspect-ratio: 657 / 80;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 14px);
    padding: 0;
    border-bottom: 1px solid var(--c-border);
    transition: var(--tr);
    cursor: pointer;
}

.news-list li:last-child {
    border-bottom: none;
}

.news-list li:hover {
    background: #f7faff;
}

.news-list .tag {
    width: 12.17%;
    aspect-ratio: 80 / 30;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xxs);
    border-radius: var(--r-xs);
    color: #fff;
    background: var(--c-bd-bl);
    min-width: 60px;
    border: 1px solid var(--c-bt-bl);
    text-align: center;
}

.news-list .tag--blue { 
    background: var(--c-bd-bl); 
    border-color: var(--c-bt-bl);
    color: var(--c-bt-bl);
}
.news-list .tag--green { 
    background: var(--c-bd-gl); 
    border-color: var(--c-bt-gl);
    color: var(--c-bt-gl);
}
.news-list .tag--orange { 
    background: var(--c-bd-or); 
    border-color: var(--c-bt-or);
    color: var(--c-bt-or);
}
.news-list .tag--red { 
    background: var(--c-tag-red); 
}

.news-list__title {
    flex: 1;
    font-size: var(--fs-sm);
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-list__date {
    flex-shrink: 0;
    font-size: calc(var(--fs-sm) * 0.9);
    color: var(--c-text-mut);
}

/* ---------- 首页 S2 项目展示 ---------- */
.showcase-tabs {
    width: 100%;
    aspect-ratio: 1200 / 54;
    display: flex;
    gap: clamp(16px, 3vw, 28px);
    margin-bottom: clamp(4px, 1.33%, 16px);
    border-bottom: 1px solid var(--c-border);
}

.showcase-tab {
    padding: 10px 4px;
    font-size: var(--fs-h3);
    color: var(--c-text-sub);
    border-bottom: 2px solid transparent;
    transition: var(--tr);
    margin-bottom: -1px;
}

.showcase-tab:hover {
    color: var(--c-primary);
}

.showcase-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

.showcase-pane-wrap {
    width: 100%;
    aspect-ratio: 1200 / 414;
    perspective: 1600px;
    position: relative;
    overflow: hidden;
}

/* 3D 舞台：preserve-3d，旋转舞台带动卡片绕 Y 轴滑出滑入 */
.showcase-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    will-change: transform;
}

/* 每张"卡片"（pane）绝对定位，静态分布在绕 Y 轴的圆周上（transform 由 JS 设置） */
.showcase-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: center center;
}

.book-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-card);
    align-content: center;
    justify-content: center;
}

.book-card {
    /* 宽度由 JS 根据容器宽度与列数计算（不改变容器宽高） */
    flex: 0 0 auto;
    aspect-ratio: 294 / 414;
    background: var(--c-bg-card);
    border-radius: var(--r-md);
    padding: 0;
    box-shadow: var(--shadow-card);
    transition: var(--tr);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.book-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-l);
}

.book-card__cover {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 294 / 167;
    background: var(--c-bg-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

/* 卡片主体：填充封面之外的剩余空间 */
.book-card__body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 8.16% 5.44% 8.16%;
}

.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card__desc {
    font-size: var(--fs-body);
    color: var(--c-text-sub);
    line-height: 1.6;
    flex: 1;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card__team {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-body);
    color: var(--c-text-3);
    margin-bottom: var(--space-sm);
}

.book-card__team svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.book-card__more {
    align-self: flex-end;
    color: #0552CF;
    font-size: var(--fs-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
/*
.book-card__more::after {
    content: "›";
    font-size: 16px;
    line-height: 1;
}
*/

.book-card__more:hover {
    color: var(--c-primary-dark);
}

/* ---------- 首页 S3 申报服务 ---------- */
.service-grid {
    width: 100%;
    aspect-ratio: 1200 / 355;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: var(--gap-card);
}

.service-card {
    width: 32.83%;
    aspect-ratio: 394 / 355;
    background: var(--c-bg-card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    padding: 2% 2% ;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card__head {
    width: 100%;
    aspect-ratio: 346 / 26;
    flex-shrink: 0;
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1;
    margin-bottom: 4.6%;
}

/* 卡片主体：填充 head 之外的剩余空间，超出内容在内部滚动 */
.service-card__body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.service-card:first-child .service-card__body {
    width: 65.89%;
    aspect-ratio: 228 / 176;
    position: relative;
    margin-top: 11.59%;
    flex: unset;
}

/* 在线申报入口 */
.service-apply {
    position: relative;
    overflow: hidden;
}

.service-apply__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: var(--space-sm);
}

.service-apply__desc {
    font-size: var(--fs-body);
    color: #3651A6;
    margin-bottom: var(--space-lg);
}

.service-apply__btn {
    position: relative;
    z-index: 2;
    opacity: 1;
    width: 100%;
    aspect-ratio: 228 / 62;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
    background: linear-gradient(to top, rgba(11, 77, 210, 1), rgba(62, 147, 253, 1));
    color: #fff;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.service-apply__btn::after {
    content: "›";
    font-size: 18px;
    line-height: 1;
}

.service-apply__btn:hover {
    background: linear-gradient(135deg, #0f4ec2, #2563eb);
}

.service-apply__illu {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    transform: translateX(10%);
    width: 67.25%;
    aspect-ratio: 1 / 1;
    opacity: 0.85;
    pointer-events: none;
}

/* 常见问题（折叠） */
.faq-item {
    /*border-bottom: 1px solid var(--c-border);*/
    margin-bottom: 3.46%;
    background-color:rgba(245, 249, 254, 1);
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1),2px 4px 8px 0 rgba(111, 129, 233, 0.1);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4.62% 4.62%;
    font-size: var(--fs-body);
    color: var(--c-text-3);
    text-align: left;
    
    
}

.faq-question__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--c-primary);
    transition: transform 0.2s ease;
}

.faq-item.is-open .faq-question__icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: var(--fs-xs);
    color: var(--c-text-sub);
    line-height: 1.7;
}

.faq-item.is-open .faq-answer {
    max-height: 240px;
    padding-left: 4.62%;
    padding-right: 4.62%;
    padding-bottom: 12px;
}

/* 官方文件下载 */
.dl-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.4% 0;
    border-bottom: 1px dashed var(--c-border);
}

.dl-list li:first-child {
    padding-top: 0;
}
.dl-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dl-list__main {
    width: 100%;
    aspect-ratio: 346 / 48;
    overflow: hidden;
    flex: 1;
    line-height: 1.1;
}

.dl-list__name {
    font-size: var(--fs-body);
    color: var(--c-text-3);
}

.dl-list__size {
    font-size: var(--fs-xxs);
    color: #8991A4;
}

.dl-list__btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
}

.dl-list__btn img {
    width: 100%;
    height: 100%;
}

/* ---------- 列表页 ---------- */
.list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-listc);
}

.list-card {
    aspect-ratio: 366 / 380;
    /*background: var(--c-bg-card);*/
    border-radius: var(--r-md);
    overflow: hidden;
    /*box-shadow: var(--shadow-card);*/
    transition: var(--tr);
    display: flex;
    flex-direction: column;
}

.list-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-l);
}

.list-card__cover {
    width: 100%;
    aspect-ratio: 366 / 206;
    background: var(--c-bg-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-card__cover img {
    max-width: 60%;
    max-height: 85%;
    object-fit: contain;
}

.list-card__body {
    margin-top: 4.09%;
    width: 100%;
    aspect-ratio: 336 / 159;
    overflow: hidden;
    padding: 0 clamp(12px, 1.6vw, 18px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.list-card__title {
    width: 100%;
    aspect-ratio: 366 / 38;
    font-size: calc(var(--fs-card-title) * 0.92);
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: 4.3%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-card__desc {
    width: 100%;
    aspect-ratio: 366 / 62;
    font-size: var(--fs-body);
    color: var(--c-text-sub);
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-body);
    color: var(--c-link);
}

.list-card__meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.list-card__meta::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background: #5089D9;
}

/* 列表分页 */
.pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: clamp(24px, 3vw, 36px);
}

.pager a {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-sub);
    transition: var(--tr);
}

.pager a:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.pager a.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ---------- 详情页 ---------- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--fs-h4);
    color: #091F4C;
    margin-bottom: clamp(14px, 2vw, 20px);
}

.breadcrumb a {
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--c-primary);
}

.breadcrumb .sep {
    margin: 0 var(--space-xs);
}


.article {
    background: var(--c-bg-card);
    border-radius: var(--r-lg);
    padding: 8.33% 8.33%;
    box-shadow: var(--shadow-card);
}

.article__title {
    font-size: var(--fs-h0);
    font-weight: bold;
    color: #091F4C;
    line-height: 1.4;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.article__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 24px);
    font-size: var(--fs-sm);
    color: #286DD0;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: clamp(20px, 3vw, 32px);
}

.article__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.article__meta svg {
    width: 14px;
    height: 14px;
}

.article__video {
    position: relative;
    width: 100%;
    margin: 0 auto clamp(20px, 3vw, 32px);
    background: var(--c-bg-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article__video img {
    max-width: 100%;
    object-fit: contain;
}

.article__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.article__video-play::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

.article__caption {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-text-mut);
    margin-bottom: clamp(24px, 3vw, 36px);
}

.article__body h2 {
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--c-text);
    margin: clamp(20px, 3vw, 28px) 0 clamp(12px, 1.4vw, 16px);
}

.article__body p {
    font-size: var(--fs-body);
    color: var(--c-text-sub);
    line-height: 1.9;
    text-indent: 2em;
    margin-bottom: clamp(12px, 1.4vw, 16px);
}

.article__nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: clamp(28px, 4vw, 40px);
    padding-top: clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--c-border);
}

.article__nav a {
    padding: 8px 16px;
    background: var(--c-bg-soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--c-text-sub);
    transition: var(--tr);
}

.article__nav a:hover {
    background: var(--c-primary);
    color: #fff;
}

/* =========================================================
 *  D. 响应式布局（@media 统一置于文件末尾）
 * ========================================================= */

 @media (max-width: 768px) {
    .section:first-child {
        margin-top: 5.33%;
    }
    .index-body .section:first-child {
        margin-top: 9.06%;
    }
    .section:nth-child(n+1) {
        margin-top: 9.32%;
    }

    .sec-head {
        width: 100%;
        aspect-ratio: 343 / 24;
        margin-bottom: 3.49%;
    }
    .dynamics {
        flex-direction: column;
    }
    .dynamics__main {
        width: 100%;
        aspect-ratio: 343 / 245;
        padding: var(--w-s1c) var(--w-s1c);
    }
    .news-list {
        width: 100%;
        aspect-ratio: 343 / 262;
    }
    .dynamics__main-tag {
        width: 23.82%;
        aspect-ratio: 319 / 23;
        margin-bottom: 2.5%;
    }
    .dynamics__main-title{
        width: 100%;
        aspect-ratio: 319 / 40;
        margin-bottom: 2.5%;
    }
    .dynamics__main-meta {
        aspect-ratio: 319 / 16;
        margin-bottom: 2.5%;
    }

    .dynamics__main-desc {
        max-height: 45%;
    }

    /* 2×2 布局需更高容器，容纳两行卡片（卡片高约 1.4 倍宽度） */
    .showcase-pane-wrap {
        aspect-ratio: 343 / 443;
    }
    .list-card{
        aspect-ratio: 164 / 197;
    }
    .list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .list-card__cover{
        aspect-ratio: 164 / 92;
    }
    .list-card__body{
        aspect-ratio: 164 / 97;
    }
    .list-card__title {
        aspect-ratio: 164 / 19;
        margin-bottom: 3.6%;
    }
    .dynamics{
        aspect-ratio: 343 / 523;
    }
    .news-list li{
        aspect-ratio: 343 / 45;
    }
    .book-grid {
        gap: 1.66vw;
    }
    .showcase-tabs{
        aspect-ratio: 343 / 29;
        margin-bottom: 2.33%;
    }
    .book-card{
        aspect-ratio: 167.5 / 217.5;
        max-width: 48%;
    }
    .service-grid {
        aspect-ratio: 343 / 628;
        flex-direction: column;
    }
    .service-card {
        width: 100%;
        padding: 3.49% 3.49%;
        aspect-ratio: 343 / 209;
    }
    .service-card.service-apply {
        aspect-ratio: 343 / 152;
    }
    .service-apply__illu{
        width: 38.48%;
    }
    .service-card:first-child .service-card__body{
        width: 35.56%;
        aspect-ratio: 122 / 91;
        margin-top: 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .service-apply__desc {
        margin-bottom: var(--space-sm);
    }
    .service-apply__btn{
        aspect-ratio: 122 / 31;
    }
    .service-card__head{
        aspect-ratio: 319 / 17;
        margin-bottom: 3.49%;
    }
    .faq-question{
        padding: 2.0% 2.0%;
    }
    .faq-item.is-open .faq-answer{
        padding-bottom: 2.50%;
        line-height: 1.1;
    }
    .service-card:last-child {
        aspect-ratio: 343 / 234;
    }
    .dl-list__main{
        aspect-ratio: 319 / 33;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
    .dl-list li{
        padding: 2.5% 0;
        justify-content: center;
    }
    .dl-list__name{
        width: 100%;
        overflow: hidden;
        
        font-size: calc(var(--fs-body) * 1.2);
    }
 }

/* =========================================================
 *  页脚 (Footer) —— 蓝色科技风，呼应 Hero
 * ========================================================= */
.footer {
    background: linear-gradient(135deg, #0a3aa0 0%, #1665e0 60%, #3b82f6 100%);
    color: var(--c-text-light);
    padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 2vw, 28px);
}

.footer__inner {
    width: var(--container-w);
    max-width: var(--container-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
    text-align: center;
}

.footer__logo {
    height: clamp(36px, 4vw, 48px);
    width: auto;
    opacity: 0.92;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.8);
}

.footer__copy {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    padding-top: clamp(8px, 1vw, 14px);
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
    width: 100%;
    max-width: 600px;
}

.footer__copyright-mark::before {
    content: "\00a9";
}

/* ---------- 专题 Hero 标题：固定断点字号，优先保持单行 ---------- */
.hero__title {
    right: 2%;
    max-width: none;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: 0.02em;
}

@media (max-width: 360px) {
    .hero__title {
        font-size: 16px;
    }
}

@media (min-width: 401px) {
    .hero__title {
        font-size: 20px;
    }
}

@media (min-width: 769px) {
    .hero__title {
        font-size: 42px;
    }
}

@media (min-width: 1025px) {
    .hero__title {
        font-size: 56px;
    }
}

@media (min-width: 1280px) {
    .hero__title {
        font-size: 72px;
    }
}

@media (min-width: 1440px) {
    .hero__title {
        font-size: 80px;
    }
}

@media (min-width: 1600px) {
    .hero__title {
        font-size: 88px;
    }
}

@media (min-width: 1760px) {
    .hero__title {
        font-size: 96px;
    }
}

@media (min-width: 1920px) {
    .hero__title {
        font-size: 104px;
    }
}

/* ---------- 空附件区：没有有效链接时不占版面 ---------- */
.article__attachments:not(:has(.article__attachment-list a[href]:not([href=""]))) {
    display: none;
}

.article__attachments[hidden] {
    display: none;
}

/* TRS-bound source, media, and attachment states. */
.topic-parent-links[hidden] {
    display: none;
}

.service-card[hidden] {
    display: none;
}

.faq-item {
    box-shadow: none;
    border-radius: 8px;
    overflow: hidden;
    counter-increment: topic-faq;
}

.service-card__body:has(.faq-item) {
    counter-reset: topic-faq;
}

.faq-question__text {
    display: flex;
    min-width: 0;
    align-items: baseline;
}

.faq-question__index {
    flex: 0 0 auto;
    margin-right: 0.25em;
}

.faq-question__index:empty::before {
    content: counter(topic-faq) ".";
}

.faq-question__label {
    min-width: 0;
}

.faq-item.is-open .faq-answer {
    max-height: 1000px;
}

.article__video-play[hidden] {
    display: none;
}

.article__video-cover[hidden] {
    display: none;
}

.article__video-region[hidden],
.video-unavailable[hidden] {
    display: none;
}

.news-list__source {
    max-width: 18%;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(var(--fs-sm) * 0.82);
    color: var(--c-text-mut);
}

/* Keep long attachment names readable and prevent the fixed source layout
 * from clipping a wrapped filename. */
.dl-list__main {
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    line-height: 1.35;
}

.dl-list__name {
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .service-grid {
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
    }

    .service-card.service-download {
        flex: 0 0 auto;
        height: auto;
        min-height: 234px;
        aspect-ratio: auto;
        overflow: visible;
    }

    .service-card.service-download .service-card__body {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        aspect-ratio: auto;
        overflow: visible;
    }

    .service-card.service-download .dl-list {
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: visible;
    }

    .dl-list__name {
        font-size: 12px;
    }
}

@media (min-width: 1280px) {
    .dl-list__name {
        font-size: 16px;
    }
}

.news-list .tag[data-topic-channel="kedo_create_publish_notices"] {
    background: var(--c-bd-bl);
    border-color: var(--c-bt-bl);
    color: var(--c-bt-bl);
}

.news-list .tag[data-topic-channel="kedo_create_publish_official_news"],
.news-list .tag[data-topic-channel="kedo_create_publish_rules"] {
    background: var(--c-bd-gl);
    border-color: var(--c-bt-gl);
    color: var(--c-bt-gl);
}

.news-list .tag[data-topic-channel="kedo_create_publish_media"] {
    background: var(--c-bd-or);
    border-color: var(--c-bt-or);
    color: var(--c-bt-or);
}

.article__video-player {
    width: 100%;
    max-height: 70vh;
    background: #000;
    object-fit: contain;
}

.article__video-region {
    width: 100%;
}

.article__video[data-auto-kind="video"] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.article__video[data-auto-kind="video"] .article__video-cover {
    align-self: center;
    max-width: min(100%, 520px);
}

.video-unavailable {
    width: 100%;
    padding: 28px 16px;
    box-sizing: border-box;
    background: var(--c-bg-soft);
    color: var(--c-text-mut);
    text-align: center;
}

.article__attachments {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(16px, 2vw, 24px);
    border-top: 1px solid var(--c-border);
}

.article__attachments:not(:has(.article__attachment-list a[href]:not([href=""]))) {
    display: none;
}

.article__attachments[hidden] {
    display: none;
}

.article__attachments h2 {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-h2);
    color: var(--c-text);
}

.article__attachment-list {
    display: grid;
    gap: var(--space-xs);
}

.article__attachment-list a {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-link);
    overflow-wrap: anywhere;
}

.article__attachment-list a:hover {
    border-color: var(--c-primary);
    background: var(--c-bg-soft);
}

@media (max-width: 768px) {
    .news-list__source {
        display: none;
    }
}