/* ============================================================
   水书单字查询 · 样式表
   统一色板定版（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;
    /* 字库扩容预留：容器最大高度（超出后内部滚动，页面不会无限变长）
       当前字少时容器按内容自适应、不出现滚动条；字库增大超过此值自动生效 */
    --grid-max-height: 640px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    width: 1080px;
    min-width: 1080px;
    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: 44px;
    height: 44px;
    opacity: 0.85;
    transform: translateY(22px); /* 与标题同高度一起下移 */
}

.page-title {
    text-align: center;
    font-size: 72px;
    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(22px); /* 与装饰纹同高 */
}

.page-subtitle {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--indigo-light);
    font-family: var(--font-kai);
    letter-spacing: 4px;
    margin: 6px 0 14px;
    transform: translateY(12px); /* 视觉下移 12px，不影响其他元素布局 */
}

.title-divider {
    display: block;
    width: 460px;
    max-width: 80%;
    height: 34px;
    margin: 0 auto 20px;
    opacity: 0.9;
}

/* ============ 顶部搜索区 ============ */
.search-panel {
    width: 100%;
    height: 190px;
    position: relative;
    border: 4px solid var(--gold);
    margin-bottom: 12px;
    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 30% / cover;
    opacity: 0.55;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 靛蓝渐变遮罩：压暗背景，让搜索框更突出 */
.search-panel::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;
}

/* 搜索框容器 */
.search-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 4;
    width: 78%;
    max-width: 760px;
}

/* 搜索输入框 */
#searchInput {
    flex: 1;
    height: 58px;
    padding: 0 22px;
    font-size: 22px;
    font-family: var(--font-kai);
    color: var(--indigo);
    background-color: rgba(var(--card-rgb), 0.94);
    border: 3px solid var(--indigo);
    border-radius: 8px;
    outline: none;
    box-shadow: 0 6px 10px rgba(var(--indigo-dark-rgb), 0.35);
    transition: all 0.25s ease;
}

#searchInput::placeholder {
    color: rgba(var(--indigo-rgb), 0.45);
}

#searchInput:focus {
    border-color: var(--gold);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25), 0 6px 10px rgba(var(--indigo-dark-rgb), 0.35);
}

/* 查询按钮（复用主界面主功能按钮质感） */
.main-btn {
    width: 140px;
    height: 58px;
    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;
    transition: all 0.3s ease;
    box-shadow: 0 6px 10px rgba(var(--indigo-dark-rgb), 0.35);
    position: relative;
    overflow: hidden;
    letter-spacing: 4px;
    flex-shrink: 0;
}

/* 按钮内部太阳纹底纹（刺绣感） */
.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;
}

.main-btn:hover {
    transform: translateY(-4px);
    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);
}
.main-btn:hover::before { opacity: 0.18; }
.main-btn:hover::after { opacity: 0.9; }

.main-btn:active {
    transform: translateY(-1px);
}

/* ============ 提示信息 ============ */
.hint {
    min-height: 26px;
    margin: 0 0 14px;
    text-align: center;
    font-size: 16px;
    font-family: var(--font-kai);
    color: var(--gold-deep);
    letter-spacing: 1px;
}

.hint.error {
    color: var(--danger);
}

/* ============ 栏目标题（复用主界面装帧线） ============ */
.section-title {
    font-size: 26px;
    font-weight: 400;
    color: var(--indigo);
    margin: 26px 0 14px;
    text-align: center;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
    font-family: var(--font-kai);
}

.section-title::before,
.section-title::after {
    content: "";
    flex: 0 1 64px;
    height: 10px;
    background: url("../素材总库/02-手绘纹样SVG/meander.svg") repeat-x bottom;
    background-size: 64px 10px;
    opacity: 0.7;
}

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

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

/* ============ 字库选字区 ============ */
.char-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 22px 18px;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background-color: var(--card);
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.14) 0%, rgba(var(--indigo-rgb), 0.04) 45%, rgba(var(--gold-rgb), 0.08) 100%);
    box-shadow: 0 4px 12px rgba(var(--indigo-rgb), 0.15);
    /* ===== 字库扩容预留：固定容器高度 + 内部滚动 =====
       用 max-height 而非固定 height：当前 18 个字远未达到上限，
       容器仍按内容自适应、无滚动条、视觉零变化；
       将来字库增大超过 max-height 时自动封顶并出现滚动条，
       页面不会随字库无限变长。
       想调整封顶高度，改 :root 里的 --grid-max-height 即可。 */
    max-height: var(--grid-max-height);
    overflow-y: auto;
    /* Firefox 细滚动条 */
    scrollbar-width: thin;
    scrollbar-color: var(--indigo) rgba(var(--indigo-rgb), 0.08);
}

/* 自定义滚动条（Chrome/Edge/Safari）：靛蓝滑块 + 金色悬停 */
.char-grid::-webkit-scrollbar {
    width: 10px;
}

.char-grid::-webkit-scrollbar-track {
    background: rgba(var(--indigo-rgb), 0.06);
    border-radius: 5px;
}

.char-grid::-webkit-scrollbar-thumb {
    background: var(--indigo);
    border-radius: 5px;
    border: 2px solid var(--card);
}

.char-grid::-webkit-scrollbar-thumb:hover {
    background: var(--gold-deep);
}

.char-card {
    width: 138px;
    padding: 10px 10px 6px;
    background-color: var(--card);
    border: 2px solid var(--indigo);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 3px 8px rgba(var(--indigo-rgb), 0.12);
    position: relative;
    overflow: hidden;
}

/* 卡片内部太阳纹底纹 */
.char-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../素材总库/02-手绘纹样SVG/sun.svg") repeat;
    background-size: 34px 34px;
    opacity: 0.05;
    pointer-events: none;
}

.char-card img {
    width: 100%;
    height: 96px;
    object-fit: contain;
    display: block;
    background-color: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    position: relative;
}

.char-card-label {
    margin-top: 8px;
    padding-bottom: 4px;
    font-size: 22px;
    font-family: var(--font-kai);
    font-weight: 700;
    color: var(--indigo);
    letter-spacing: 2px;
}

.char-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    background-color: var(--card);
    box-shadow: 0 10px 16px rgba(var(--indigo-rgb), 0.22), inset 0 0 0 2px rgba(var(--gold-rgb), 0.18);
}

.char-card:hover::before { opacity: 0.12; }

.char-card.active {
    border-color: var(--gold);
    background-color: var(--tag-bg);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.30), 0 8px 14px rgba(var(--indigo-rgb), 0.18);
}

/* ============ 查询结果区 ============ */
.result-panel {
    display: flex;
    gap: 20px;
    padding: 22px;
    border: 3px solid var(--gold);
    border-radius: 10px;
    background-color: var(--card);
    background-image:
        linear-gradient(165deg, rgba(var(--indigo-rgb), 0.12) 0%, rgba(var(--indigo-rgb), 0.04) 45%, rgba(var(--gold-rgb), 0.08) 100%);
    box-shadow: 0 6px 16px rgba(var(--indigo-rgb), 0.15);
    margin-bottom: 20px;
    scroll-margin-top: 20px;
}

/* 左侧：字图装裱区 */
.result-left {
    width: 320px;
    flex-shrink: 0;
    text-align: center;
}

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

.pic-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--indigo);
    border-radius: 6px;
    background-color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(var(--indigo-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.pic-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.char-name {
    margin-top: 12px;
    font-size: 30px;
    font-family: var(--font-display);
    color: var(--indigo);
    letter-spacing: 4px;
}

/* 右侧：音标 + 释义 */
.result-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spell-box {
    border: 2px solid var(--indigo);
    border-radius: 8px;
    padding: 14px 20px;
    background-color: var(--card);
    display: flex;
    align-items: center;
    gap: 18px;
}

.spell-label {
    font-size: 18px;
    font-family: var(--font-kai);
    color: var(--indigo);
    white-space: nowrap;
    border-right: 2px solid var(--gold);
    padding-right: 18px;
}

.spell-value {
    font-size: 40px;
    font-weight: 700;
    font-family: var(--font-kai);
    color: var(--gold-deep);   /* 配色方案辅色：深金，醒目 */
    letter-spacing: 2px;
}

.explain-box {
    flex: 1;
    border: 2px solid var(--indigo);
    border-radius: 8px;
    padding: 16px 20px;
    background-color: var(--card);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.explain-label {
    font-size: 18px;
    font-family: var(--font-kai);
    color: var(--indigo);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    align-self: flex-start;
}

.explain-text {
    font-size: 18px;
    line-height: 2;
    color: var(--text);
    overflow-y: auto;
    max-height: 380px;
    padding-right: 6px;
}

/* ============ 页脚 ============ */
.footer {
    margin-top: 10px;
    text-align: center;
    color: var(--text-soft);
    font-size: 14px;
    letter-spacing: 2px;
}

.footer-meander {
    display: block;
    width: 300px;
    margin: 0 auto 10px;
    opacity: 0.75;
}

.footer p {
    font-family: var(--font-kai);
}