/* ============================================================
 * 全站国风装饰背景（公共）
 * 仅电脑端宽屏（≥1200px）显示：左右国风大图（水墨山影 / 祥云龙柱）
 * + 右下「二十四节气」竖排铭牌；.hd-bg 纸纹辉光全端保留。
 * 不含《道德经》翻页书。类名 hd- 前缀，避免与各页样式冲突。
 * 与 home-dashboard.css 中的同名规则保持一致（首页仍用原文件）。
 * ============================================================ */

:root {
    --hd-font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

/* ---- 纸纹 + 顶部暖金辉光（全端，作为最底层氛围） ---- */
.hd-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% -10%, rgba(248, 208, 142, 0.22), transparent 55%);
    z-index: 0;
}

.hd-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/texture-paper-grain.svg");
    background-size: 240px 240px;
    opacity: 0.42;
    pointer-events: none;
}

/* ---- 左右整幅国风图：不进入交互 ---- */
.hd-guofeng-decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
}

.hd-gf-panel {
    position: absolute;
    top: 5.15rem;
    bottom: 0;
    height: calc(100% - 5.15rem);
    width: min(420px, max(0px, calc((100vw - 680px) / 2)));
    object-fit: contain;
    pointer-events: none;
    display: block;
}

.hd-gf-panel > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.hd-gf-panel--left {
    left: 0;
    opacity: 0.94;
    -webkit-mask-image:
        linear-gradient(to right, #000 78%, transparent 100%),
        linear-gradient(to top, #000 0%, #000 24%, transparent 28%);
    mask-image:
        linear-gradient(to right, #000 78%, transparent 100%),
        linear-gradient(to top, #000 0%, #000 24%, transparent 28%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hd-gf-panel--left > img {
    object-position: left bottom;
}

.hd-gf-panel--right {
    right: 0;
    opacity: 0.94;
    -webkit-mask-image:
        linear-gradient(to left, #000 78%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 30%, transparent 36%);
    mask-image:
        linear-gradient(to left, #000 78%, transparent 100%),
        linear-gradient(to bottom, #000 0%, #000 30%, transparent 36%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hd-gf-panel--right > img {
    object-position: right top;
}

/* 暖主题：右上祥云 / 卷轴随「暖」转暖金；红主题用原图朱红 */
html:not(.red):not(.theme-red) .hd-gf-panel--right {
    filter: sepia(0.78) saturate(1.08) hue-rotate(6deg) brightness(1.14);
}

html.red .hd-gf-panel--right,
html.theme-red .hd-gf-panel--right {
    filter: none;
}

/* ---- 右下「二十四节气」竖排铭牌 ---- */
.hd-jieqi-mark {
    position: fixed;
    z-index: 2;
    right: 16px;
    bottom: 28px;
    pointer-events: none;
    padding: 1.15rem 0.72rem;
    background-color: #fdfaf3;
    background-image: url("/images/texture-paper-grain.svg");
    background-size: 160px 160px;
    border: 10px solid transparent;
    border-image: url("/images/decor-huiwen-frame.svg") 16 / 10px / 0 stretch;
    box-shadow: 0 6px 16px rgba(42, 30, 18, 0.08);
}

.hd-jieqi-mark__text {
    display: block;
    writing-mode: vertical-rl;
    font-family: var(--hd-font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    line-height: 1.2;
    color: #6b4220;
}

html.red .hd-jieqi-mark__text,
html.theme-red .hd-jieqi-mark__text {
    color: #7b2222;
}

/* ---- 题库：打开时为自带不透明全屏场景（z-index:100），天然盖住本装饰；
      此处再按 body 类兜底隐藏，确保任何承载题库弹层的页面都不露出边缘装饰 ---- */
body.exam-bank-modal-open .hd-guofeng-decor,
body.exam-bank-modal-open .hd-jieqi-mark {
    display: none !important;
}

/* ---- 窄屏 / 移动端：装饰一律隐藏（手机端不受影响） ---- */
@media (max-width: 1199px) {
    .hd-guofeng-decor,
    .hd-jieqi-mark {
        display: none !important;
    }
}