/* =========================================================
   语露字典 · 页面通用样式（整合版）
   ========================================================= */
:root{
  --brand:#1e90ff; --brand-2:#0066cc;
  --bg:#f5f7fa; --paper:#fff;
  --ink:#1a1a1a; --muted:#6b7280; --border:#e5e7eb;
  --radius:16px; --shadow:0 8px 28px rgba(0,0,0,.05);
  --wrap:1180px; --space-1:.6rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:3rem;
}
*{box-sizing:border-box}
body{margin:0;font-family:"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;border-radius:12px}
a{color:var(--brand);text-decoration:none;transition:.25s}
a:hover{color:var(--brand-2)}
.wrap{max-width:var(--wrap);margin:auto;padding:0 var(--space-2)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ================== Header ================== */
.site-header{background:linear-gradient(90deg,#93c5fd,#1e90ff);color:#fff;box-shadow:0 4px 20px rgba(30,144,255,.2)}
.header-inner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}
.brand{font-size:1.5rem;font-weight:800}
.nav{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap}
.nav a{color:#fff;padding:.4rem .9rem;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.2)}

/* ================== Search ================== */
.search-bar{background:var(--paper);border-bottom:1px solid var(--border)}
.search-row{padding:var(--space-2) 0;display:flex;justify-content:center}
.search-form{display:flex;width:min(700px,100%);border:1px solid var(--border);border-radius:999px;overflow:hidden;box-shadow:var(--shadow)}
.search-form input{flex:1;padding:.9rem 1.2rem;border:0;outline:none;font-size:1rem}
.search-form button{border:0;background:var(--brand);color:#fff;padding:0 1.5rem;font-weight:600;cursor:pointer}
.search-form button:hover{background:var(--brand-2)}

/* ================== Breadcrumb ================== */
.breadcrumb .wrap{padding:var(--space-2) var(--space-2);font-size:.95rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{color:var(--ink)}

/* ================== Hero ================== */
.hero{background:linear-gradient(180deg,rgba(30,144,255,.08),rgba(30,144,255,0));padding:var(--space-3) 0}
.hero-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}
.article-title{font-size:clamp(1.8rem,2.3vw,2.6rem);font-weight:900;margin:0 0 var(--space-2)}
.meta{color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.8rem}

/* ================== Main & Article ================== */
.main{padding-bottom:var(--space-4)}
.article{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1rem,1.2vw,2rem);animation:fadeIn .5s ease-in}
.article .abstract{background:rgba(30,144,255,.08);border-left:4px solid var(--brand);padding:1rem;border-radius:10px;margin:0 0 var(--space-3);font-weight:500}
.article h2{font-size:1.4rem;margin:var(--space-3) 0 var(--space-2);position:relative}
.article h2::before{content:"";position:absolute;left:-.6rem;top:.4rem;width:4px;height:1.2rem;background:var(--brand);border-radius:2px}
.article h3{font-size:1.15rem;margin:var(--space-2) 0 var(--space-1)}
.article p{margin:1rem 0}
.article blockquote{margin:1.2rem 0;padding:1rem 1.2rem;border-left:4px solid var(--brand-2);background:rgba(30,144,255,.05);border-radius:10px;color:var(--ink)}

/* ================== 快速导航（锚点） ================== */
#daohang{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  padding:.6rem;background:rgba(30,144,255,.06);
  border:1px solid var(--border);border-radius:12px;margin:.8rem 0 1rem;
}
#daohang a{
  padding:.35rem .7rem;border:1px solid var(--border);
  border-radius:999px;background:#fff;color:var(--ink)
}
#daohang a:hover{background:rgba(30,144,255,.08);border-color:rgba(30,144,255,.3)}
.ksdh{font-weight:700;color:var(--brand-2);margin-right:.2rem}
/* 避免吸顶时锚点被遮住 */
a[name]{scroll-margin-top:84px}

/* ================== 拼音/属性网格（zuhelanmu） ================== */
#zuhelanmu{display:grid;grid-template-columns:88px 1fr 88px 1fr;gap:.4rem .8rem;align-items:center;margin:.6rem 0;padding:.6rem;border:1px solid var(--border);border-radius:12px;background:rgba(2,6,23,.02)}
#zuhelanmubt2{font-weight:700;color:#334155}
.zuhelanmunr{color:#111827}

/* ================== 大字展示（wordbg） ================== */
#wordbg{margin:1rem 0;text-align:center}
#wordbg .kong,
.wordbg .kong{display:inline-block;font-size:clamp(48px,10vw,96px);line-height:1;font-weight:900;color:#0f172a}

/* ================== 信息表格（pcjxxxtb） ================== */
#pcjxxxtb{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  border-collapse:separate; /* 让圆角生效 */
  border-spacing:0;
  background:var(--paper);
  box-shadow:var(--shadow);
  margin:.6rem 0 1rem;
}
#pcjxxxtb th,#pcjxxxtb td{padding:.7rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle;word-break:break-word}
#pcjxxxtb th{width:9rem;background:rgba(30,144,255,.06);color:#334155;text-align:left;font-weight:700}
#pcjxxxtb tr:last-child th,#pcjxxxtb tr:last-child td{border-bottom:0}
/* 斑马纹（只作用于 td） */
#pcjxxxtb tr:nth-child(odd) td{background:rgba(2,6,23,.01)}
/* 小屏横向滚动 */
@media (max-width:640px){
  #pcjxxxtb th{width:7rem;font-size:.95rem}
  #pcjxxxtb td{font-size:.95rem}
  #pcjxxxtb{display:block;overflow-x:auto}
}
/* 表格中的字源图限制 */
#pcjxxxtb td img.zyybtu{max-width:100%}

/* ================== 组词宫格（cizufk / word-grid） ================== */
#cizufk,.word-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px,1fr));gap:.6rem;margin:.6rem 0 1rem}
#cizufk-item,.cizufk-item{
  padding:.5rem .75rem;background:rgba(2,6,23,.02);
  border:1px solid var(--border);border-radius:10px;text-align:center;
  font-size:.95rem;color:var(--ink);transition:.2s ease;box-shadow:0 1px 0 rgba(0,0,0,.02) inset;user-select:none
}
#cizufk-item:hover,.cizufk-item:hover{background:rgba(30,144,255,.08);border-color:rgba(30,144,255,.3);transform:translateY(-1px)}
/* 宫格里的链接拉满点击区 */
#cizufk-item a{display:block;color:var(--ink)}
#cizufk-item a:hover{color:var(--brand-2)}
/* 小屏：固定三列（可改 2 列） */
@media (max-width:480px){
  #cizufk,.word-grid{grid-template-columns:repeat(3,1fr)}
}

/* ================== “跟我读”按钮 ================== */
.duying{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .65rem;margin-left:.4rem;
  background:var(--brand);color:#fff!important;border-radius:999px;
  font-size:.9rem;line-height:1;border:0;cursor:pointer;text-decoration:none;
}
.duying:hover{background:var(--brand-2)}
.duying::before{content:"▶";font-size:.8rem;transform:translateY(1px)}

/* ================== 行内小图标对齐 ================== */
.article p img[width="15"],.article p img[height="15"]{display:inline;vertical-align:-2px;margin:0 .15rem;border-radius:0}
.article .wh16{width:16px;height:16px;vertical-align:-2px;margin:0 .15rem;border-radius:0;display:inline-block}

/* ================== 字源演变图 ================== */
.zyybtu{height:68px;width:auto;display:block;margin:0 auto}
@media (min-width:768px){.zyybtu{height:84px}}

/* ================== 字形对比 / 异体字卡片 ================== */
#zxdb{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px,1fr));gap:.8rem;margin:.8rem 0 1rem}
#zxdb-item{background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:.8rem .6rem;text-align:center;box-shadow:var(--shadow)}
#zxdbtu{height:56px;width:auto;display:block;margin:0 auto .5rem}
#zxdb-word{font-size:.95rem;color:var(--muted)}

/* ================== 读音/释义行内标注 ================== */
.article .pinyin{font-weight:700;letter-spacing:.02em}
.article .ml{margin-left:.4rem}
.article .indent{text-indent:2em;margin:.25rem 0}

/* ================== 尾部：标签 + 上下篇 ================== */
.tail{margin-top:var(--space-4);display:grid;gap:var(--space-3)}
.tags{display:flex;flex-wrap:wrap;gap:.6rem}
.tag{background:rgba(30,144,255,.08);border:1px solid var(--border);padding:.3rem .9rem;border-radius:999px;font-size:.9rem}
.nav-pp{display:grid;gap:.8rem}
@media(min-width:700px){.nav-pp{grid-template-columns:1fr 1fr}}
.nav-pp a{display:block;padding:.9rem;border:1px dashed var(--border);border-radius:10px;color:var(--ink)}
.nav-pp a:hover{background:rgba(30,144,255,.06)}

/* ================== 相关推荐（两列 3+3） ================== */
.rel-h2{font-size:1.4rem;font-weight:800;margin:0 0 .6rem 0;color:var(--ink)}
.rel-desc{font-size:.95rem;color:var(--muted);margin:0 0 1.2rem 0;line-height:1.6}
.related{background:linear-gradient(180deg,rgba(30,144,255,.05),rgba(30,144,255,0));padding:var(--space-5) 0;border-top:1px solid var(--border)}
.related-two{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:820px){.related-two{grid-template-columns:1fr 1fr}}
.rel-panel{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:1.2rem 1.4rem}
.rel-title{font-size:1.1rem;font-weight:700;color:var(--brand-2);margin-bottom:.6rem}
.rel-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rel-list li a{display:block;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;color:var(--ink);background:rgba(2,6,23,.02);transition:.25s ease;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-list li a:hover{background:rgba(30,144,255,.08);border-color:rgba(30,144,255,.3);transform:translateX(2px)}

/* ================== Footer ================== */
.site-footer{background:#0f172a;color:#94a3b8;text-align:center;padding:var(--space-4) 0;margin-top:var(--space-5)}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:.8rem}
.footer-links a{color:#94a3b8}
.footer-links a:hover{color:#fff}

/* ================== 小屏细节 ================== */
@media(max-width:600px){
  .brand{font-size:1.2rem}
  .article{padding:1rem}
}

/* ===== Tag 列表页 ===== */
.tag-header { margin: 16px 0 8px; display: flex; align-items: center; gap: 12px; }
.tag-badge { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; background:#f5f7fb; color:#2b2f36; font-size:13px; }
.tag-badge .id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity:.75; }
.tag-desc { color:#60666f; font-size:14px; }

.tag-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid #eceff5; background:#fff; }
.tag-table { width:100%; border-collapse:separate; border-spacing:0; min-width:720px; }
.tag-table thead th { text-align:left; font-weight:600; font-size:14px; padding:12px 14px; color:#2b2f36; background:#f8fafc; border-bottom:1px solid #eceff5; position:sticky; top:0; }
.tag-table tbody td { padding:12px 14px; border-bottom:1px solid #f1f3f8; vertical-align:top; }
.tag-table tbody tr:hover { background:#fafbff; }
.tag-title a{ color:#2b6ae9; text-decoration:none; }
.tag-title a:hover{ text-decoration:underline; }
.tag-cate a{ color:#636c78; text-decoration:none; white-space:nowrap; }
.tag-intro a{ color:#2b2f36; text-decoration:none; }
.tag-intro a:hover{ text-decoration:underline; }
.tag-empty { padding:18px; color:#6f7782; font-size:14px; }

.rel-h2 { margin-top:28px; }
.rel-desc { color:#6f7782; font-size:14px; margin-bottom:12px; }
.rel-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.rel-panel { border:1px solid #eceff5; border-radius:12px; background:#fff; padding:12px; }
.rel-title { font-size:16px; margin:2px 0 10px; }
.rel-list { list-style:none; padding:0; margin:0; }
.rel-list li { padding:6px 0; border-bottom:1px dashed #eef1f5; }
.rel-list li:last-child{ border-bottom:0; }
.rel-list a{ color:#2b6ae9; text-decoration:none; }
.rel-list a:hover{ text-decoration:underline; }