/* ============================================================
   common.css  —  华夏中医文化网站 · 全局公共样式
   适用于所有页面：CSS变量、重置样式、通用工具类、公共组件
   ============================================================ */

/* ============ CSS 变量系统（全局色彩/间距/圆角/阴影/动画/字体） ============ */
:root {
    --color-paper: #F5F0E8;
    --color-paper-dark: #EDE5D8;
    --color-ink: #2D2A26;
    --color-ink-light: #5C5449;
    --color-tea: #8B7355;
    --color-tea-light: #B8A58B;
    --color-sky: #4A7C8C;
    --color-sky-light: #6B9BA8;
    --color-vermilion: #9B3B2E;
    --color-vermilion-light: #C44B3C;
    --color-gold: #C4A35A;
    --color-jade: #7A9A6D;
    --color-border: #D4C9B8;
    --color-white: #FFFFFF;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(45, 42, 38, 0.06);
    --shadow-md: 0 4px 16px rgba(45, 42, 38, 0.08);
    --shadow-lg: 0 8px 32px rgba(45, 42, 38, 0.10);
    --shadow-xl: 0 16px 48px rgba(45, 42, 38, 0.12);
    --shadow-glow: 0 0 40px rgba(196, 163, 90, 0.15);
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============ 基础重置 ============ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-paper);
    color: var(--color-ink);
    line-height: 1.8;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ============ 通用工具类 ============ */
.font-serif { font-family: var(--font-serif); }

/* ============ Tailwind 自定义颜色映射 ============ */
.text-paper { color: var(--color-paper); }
.text-paper\/90 { color: rgba(245, 240, 232, 0.9); }
.text-paper\/80 { color: rgba(245, 240, 232, 0.8); }
.text-paper\/70 { color: rgba(245, 240, 232, 0.7); }
.text-paper\/60 { color: rgba(245, 240, 232, 0.6); }
.text-paper\/50 { color: rgba(245, 240, 232, 0.5); }
.text-paper\/40 { color: rgba(245, 240, 232, 0.4); }

.text-ink { color: var(--color-ink); }
.text-ink-light { color: var(--color-ink-light); }
.text-vermilion { color: var(--color-vermilion); }
.text-tea { color: var(--color-tea); }
.text-gold { color: var(--color-gold); }
.text-jade { color: var(--color-jade); }
.text-sky { color: var(--color-sky); }

.bg-paper { background-color: var(--color-paper); }
.bg-paper-dark { background-color: var(--color-paper-dark); }
.bg-ink { background-color: var(--color-ink); }
.bg-vermilion { background-color: var(--color-vermilion); }
.bg-tea { background-color: var(--color-tea); }
.bg-gold { background-color: var(--color-gold); }
.bg-jade { background-color: var(--color-jade); }
.bg-sky { background-color: var(--color-sky); }

.border-border { border-color: var(--color-border); }
.border-vermilion { border-color: var(--color-vermilion); }
.border-gold { border-color: var(--color-gold); }

.badge { display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); }

/* hover 状态变体 */
.hover\:text-gold:hover { color: var(--color-gold); }
.hover\:text-vermilion:hover { color: var(--color-vermilion); }
.hover\:text-paper:hover { color: var(--color-paper); }
.hover\:text-ink:hover { color: var(--color-ink); }
.hover\:bg-paper-dark:hover { background-color: var(--color-paper-dark); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
.hover\:border-gold:hover { border-color: var(--color-gold); }
.hover\:border-vermilion:hover { border-color: var(--color-vermilion); }

/* group-hover 状态 */
.group:hover .group-hover\:text-gold { color: var(--color-gold); }
.group:hover .group-hover\:text-vermilion { color: var(--color-vermilion); }

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-paper-dark); }
::-webkit-scrollbar-thumb { background: var(--color-tea-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-tea); }

/* ============ 文本选中 ============ */
::selection { background: var(--color-vermilion); color: var(--color-paper); }

/* ============ 玻璃拟态（亮色/暗色） ============ */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(45, 42, 38, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ============ 导航栏 ============ */
.navbar { transition: all var(--transition-base); }

/* 透明导航栏 - 首页轮播时使用 */
.navbar-transparent {
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    border-bottom: none;
    box-shadow: none;
}

/* 滚动后的导航栏样式 */
.navbar-scrolled {
    background: rgba(245, 240, 232, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--color-border);
}

/* 滚动后导航栏内文字颜色恢复 */
.navbar-scrolled .nav-link { color: var(--color-ink); }
.navbar-scrolled .nav-link:hover { color: var(--color-vermilion); }
.navbar-scrolled .nav-link.active { color: var(--color-vermilion); }
.navbar-scrolled .nav-link::after { background: var(--color-vermilion); }
.navbar-scrolled .seal { background: var(--color-vermilion); color: var(--color-paper); }
.navbar-scrolled .logo-text { color: var(--color-ink); }
.navbar-scrolled .logo-text:hover { color: var(--color-vermilion); }
.navbar-scrolled .nav-icon { color: var(--color-ink-light); }
.navbar-scrolled .nav-btn:hover { background: var(--color-paper-dark); }

.nav-link { position: relative; transition: color var(--transition-fast); }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-vermilion);
    transition: width var(--transition-base);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover { color: var(--color-vermilion); }

/* 透明导航栏下的链接颜色 */
.navbar-transparent .nav-link { color: var(--color-paper); }
.navbar-transparent .nav-link:hover { color: var(--color-gold); }
.navbar-transparent .nav-link::after { background: var(--color-gold); }
.navbar-transparent .nav-link.active { color: var(--color-gold); }

/* 透明导航栏下的图标颜色 */
.navbar-transparent .nav-icon { color: var(--color-paper) !important; }
.navbar-transparent .nav-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* Logo 在透明导航栏下的颜色 */
.navbar-transparent .logo-text { color: var(--color-paper); }
.navbar-transparent .logo-text:hover { color: var(--color-gold); }

/* 透明导航栏下的seal印章 */
.navbar-transparent .seal { background: var(--color-vermilion); color: var(--color-paper); }

/* 透明导航栏下按钮内所有文字图标均使用paper（白）色 */
.navbar-transparent .nav-btn,
.navbar-transparent #langBtn,
.navbar-transparent #langBtn * {
    color: var(--color-paper);
}

/* 滚动导航栏下按钮内文字恢复ink（深棕）色 */
.navbar-scrolled .nav-btn,
.navbar-scrolled #langBtn,
.navbar-scrolled #langBtn * {
    color: var(--color-ink);
}
.navbar-scrolled #langBtn #currentLangName {
    color: var(--color-ink);
}

/* ============ 通用卡片 hover ============ */
.card-hover { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-hover:focus, .card-hover:focus-visible, .card-hover:active { outline: none; box-shadow: none; transform: none; }
.card-hover::before, .card-hover::after { display: none !important; }

/* ============ 图片懒加载 ============ */
.lazy-image { opacity: 0; transition: opacity var(--transition-slow); }
.lazy-image.loaded { opacity: 1; }

/* ============ 滚动淡入动画 ============ */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

/* ============ 徽章 ============ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ============ 标签云 ============ */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-cloud a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-ink-light);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}
.tag-cloud a:hover {
    background: var(--color-tea);
    color: var(--color-paper);
    border-color: var(--color-tea);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ============ 语言下拉菜单 ============ */
.lang-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}
.lang-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============ 国旗图标 ============ */
.flag-icon {
    display: inline-block;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}
.flag-sm {
    width: 20px;
    height: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.flag-xs {
    width: 16px;
    height: 11px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

/* ============ 语言网格布局 ============ */
.lang-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 8px;
}
.lang-grid-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lang-grid-item:hover {
    background: var(--color-paper-dark);
    color: var(--color-vermilion);
}
.lang-grid-item:hover .flag-icon {
    box-shadow: 0 1px 4px rgba(155, 59, 46, 0.3);
}

/* 透明导航栏下国旗图标微调 */
.navbar-transparent .flag-icon {
    opacity: 0.95;
}

/* ============ 移动端菜单 ============ */
.mobile-menu { transform: translateX(100%); transition: transform var(--transition-slow); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-backdrop { opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.mobile-menu-backdrop.open { opacity: 1; visibility: visible; }

/* ============ 印章 Logo ============ */
.seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-vermilion);
    color: var(--color-paper);
    font-family: var(--font-serif);
    font-weight: 700;
    border-radius: var(--radius-sm);
    transform: rotate(-3deg);
    box-shadow: 0 2px 8px rgba(155, 59, 46, 0.3);
}

/* ============ 搜索框 ============ */
.search-input {
    background: var(--color-paper-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    transition: all var(--transition-fast);
}
.search-input:focus {
    outline: none;
    border-color: var(--color-tea);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

/* ============ 占位图 ============ */
.placeholder-image {
    background: linear-gradient(135deg, var(--color-paper-dark) 0%, var(--color-border) 100%);
    position: relative;
    overflow: hidden;
}

/* ============ 全局响应式基础 ============ */
@media (max-width: 768px) {
    body { font-size: 16px; }
}

/* ============ 页脚样式（公共） ============ */
.site-footer {
    background-color: var(--color-ink);
}
.footer-grid {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-desc {
    color: rgba(255, 255, 255, 0.6);
}
/* ============ 页脚社交图标样式（公共） ============ */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.04);
}
.footer-social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-vermilion) 0%, var(--color-tea) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    z-index: 0;
}
.footer-social-link svg,
.footer-social-link i {
    position: relative;
    z-index: 1;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}
.footer-social-link svg {
    fill: currentColor;
}
.footer-social-link:hover {
    color: var(--color-paper);
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(155, 59, 46, 0.4);
}
.footer-social-link:hover::before {
    opacity: 1;
}

.footer-link {
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition-fast);
}
.footer-link:hover {
    color: var(--color-paper);
}
.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
}
.footer-bottom-text {
    color: rgba(255, 255, 255, 0.4);
}

/* 返回顶部按钮 */
.back-to-top-btn {
    background-color: var(--color-vermilion);
    color: var(--color-paper);
}

/* ============ 通用分页组件 ============ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.625rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    text-decoration: none;
    line-height: 1;
}
.pagination .page-btn:hover:not(.active):not(:disabled) {
    border-color: var(--color-vermilion);
    color: var(--color-vermilion);
    background: rgba(155, 59, 46, 0.04);
}
.pagination .page-btn.active {
    background: var(--color-vermilion);
    color: var(--color-paper);
    border-color: var(--color-vermilion);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(155, 59, 46, 0.25);
}
.pagination .page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--color-paper-dark);
}
.pagination .page-btn:disabled:hover {
    border-color: var(--color-border);
    color: var(--color-ink);
    background: var(--color-paper-dark);
}

/* 省略号 */
.pagination .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    color: var(--color-ink-light);
    font-size: 0.875rem;
    letter-spacing: 0.125rem;
    user-select: none;
}

/* 上一页 / 下一页 按钮 */
.pagination .page-prev,
.pagination .page-next {
    gap: 0.25rem;
}

/* 分页信息（左侧/右侧文字） */
.pagination .page-info {
    font-size: 0.8125rem;
    color: var(--color-ink-light);
    margin: 0 0.75rem;
    white-space: nowrap;
}

/* 跳转输入框 */
.pagination .page-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-ink-light);
}
.pagination .page-jump input {
    width: 3rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 0.875rem;
    text-align: center;
    outline: none;
    transition: border-color var(--transition-fast);
}
.pagination .page-jump input:focus {
    border-color: var(--color-vermilion);
}
.pagination .page-jump input::-webkit-outer-spin-button,
.pagination .page-jump input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 尺寸变体 */
.pagination.pagination-sm .page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}
.pagination.pagination-sm .page-ellipsis {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
}

.pagination.pagination-lg .page-btn {
    min-width: 3rem;
    height: 3rem;
    padding: 0 0.875rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}
.pagination.pagination-lg .page-ellipsis {
    min-width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

/* 深色背景变体（用于深色主题页面） */
.pagination.pagination-dark .page-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-paper);
}
.pagination.pagination-dark .page-btn:hover:not(.active):not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
}
.pagination.pagination-dark .page-btn.active {
    background: var(--color-gold);
    color: var(--color-ink);
    border-color: var(--color-gold);
    box-shadow: 0 2px 12px rgba(196, 163, 90, 0.3);
}
.pagination.pagination-dark .page-btn:disabled {
    opacity: 0.3;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-paper);
}
.pagination.pagination-dark .page-ellipsis {
    color: rgba(245, 240, 232, 0.4);
}
.pagination.pagination-dark .page-info,
.pagination.pagination-dark .page-jump {
    color: rgba(245, 240, 232, 0.6);
}
.pagination.pagination-dark .page-jump input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-paper);
}
.pagination.pagination-dark .page-jump input:focus {
    border-color: var(--color-gold);
}

/* 响应式 */
@media (max-width: 640px) {
    .pagination {
        gap: 0.25rem;
    }
    .pagination .page-btn {
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 0.5rem;
        font-size: 0.8125rem;
    }
    .pagination .page-ellipsis {
        min-width: 1.5rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }
    .pagination .page-info {
        display: none;
    }
    .pagination .page-jump {
        display: none;
    }
}



/*******huaxiatcm.com程序新增****/

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.pagination .page-info {
    margin-right: 16px;
    font-size: 14px;
    color: var(--kimi-color-text-secondary);
}

/* 所有分页按钮：a 和 span 统一 */
.pagination a.page-btn,
.pagination span.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--kimi-color-border);
    background: var(--kimi-color-bg);
    color: var(--kimi-color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

/* 当前页高亮 */
.pagination span.page-btn.active {
    background: #9B3B2E;
    color: #fff;
    border-color: #9B3B2E;
}

/* 悬停效果 */
.pagination a.page-btn:hover {
    border-color: #9B3B2E;
    color: #9B3B2E;
}

/* 跳转框 */
.page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    font-size: 14px;
    color: var(--kimi-color-text-secondary);
}

.page-jump input {
    width: 50px;
    height: 36px;
    border: 1px solid var(--kimi-color-border);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    background: var(--kimi-color-bg);
    color: var(--kimi-color-text-primary);
}



.result-title em,
.result-excerpt em {
    color: #9B3B2E;        /* 朱红色 */
    font-style: normal;     /* 取消斜体 */
    font-weight: 600;       /* 加粗 */
	background: rgba(196, 163, 90, 0.18);
	padding: 0 0.15rem;
	border-radius: 0.2rem;
}