/* ==========================================================================
   字体盘 zitipan.com — 站点样式
   列表排版 1:1 复刻 zfont.cn（数值直接取自其 light-mode.css）
   ========================================================================== */

:root{
  /* 取自 zfont light-mode.css 的调色板 */
  --blue-100:#EDF4FF;
  --blue-300:#B7C9EB;
  --blue-500:#0066FF;
  --blue-700:#025be1;
  --gray-200:#F0F0F0;
  --gray-250:#EAEFF7;
  --gray-300:#D3D3D3;
  --gray-350:#C4C4C4;
  --gray-500:#808080;
  --gray-550:#676767;
  --gray-800:#111111;
  --white:#FFFFFF;

  /* 404 等页面用到的别名（此前未定义，导致取色失效） */
  --brand:var(--blue-500);
  --line:var(--gray-250);
  --ink-2:var(--gray-550);
  --ink-3:var(--gray-500);

  --maxw:1280px;
  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
            "PingFang SC","Microsoft YaHei",微软雅黑,"Source Han Sans SC","Noto Sans CJK SC",
            Heiti,黑体,sans-serif,"Noto Sans SC";
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--gray-800);
  font:15px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 顶部（首行：logo + 9 个分类 + 搜索栏） ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--gray-200);
}
.topbar-main{display:flex;align-items:center;gap:18px;height:62px}
.logo{flex:none;display:flex;align-items:center}
.logo img{height:32px;width:auto}
.logo:hover img{opacity:.85}

.nav{flex:1;min-width:0;display:flex;align-items:center;gap:1px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  flex:none;padding:7px 11px;border-radius:8px;
  font-size:14.5px;color:var(--gray-550);white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav a:hover{color:var(--gray-800);background:var(--gray-200)}
.nav a.active{color:var(--blue-500);background:var(--blue-100);font-weight:600}

.search{flex:none;position:relative;width:236px}
.search input{
  width:100%;height:38px;padding:0 40px 0 14px;
  border:1px solid var(--gray-200);border-radius:9px;background:#fff;
  color:var(--gray-800);font-size:14px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.search input::placeholder{color:var(--gray-350)}
.search input:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,102,255,.12)}
.search button{
  position:absolute;right:3px;top:3px;width:32px;height:32px;
  border:0;border-radius:7px;background:transparent;color:var(--gray-350);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.search button:hover{background:var(--blue-100);color:var(--blue-500)}

/* ---------- 次级分类 ---------- */
.subbar{border-bottom:1px solid var(--gray-200);background:#fff}
.subbar .wrap{display:flex;align-items:center;gap:6px;height:44px;overflow-x:auto;scrollbar-width:none}
.subbar .wrap::-webkit-scrollbar{display:none}
.subbar .label{flex:none;font-size:12.5px;color:var(--gray-350);margin-right:2px}
.subbar a{
  flex:none;padding:4px 11px;border-radius:999px;font-size:13.5px;color:var(--gray-550);
  border:1px solid transparent;white-space:nowrap;transition:all .15s;
}
.subbar a:hover{background:var(--gray-200);color:var(--gray-800)}
.subbar a.active{background:var(--blue-500);border-color:var(--blue-500);color:#fff}

/* ---------- 列表头 ---------- */
.list-head{display:flex;align-items:baseline;gap:12px;margin:22px 0 12px;padding:0 2px}
.list-head h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.list-head .count{font-size:13px;color:var(--gray-350)}
.list-head .reset{margin-left:auto;font-size:13px;color:var(--gray-350)}
.list-head .reset:hover{color:var(--blue-500)}

/* ==========================================================================
   字体列表 —— 1:1 复刻 zfont.cn
   .font 高 136px / 上下 1px 浅灰分隔 / flex space-between
   ========================================================================== */
.list-wrap{
  border:1px solid var(--gray-200);
  border-radius:14px;
  overflow:hidden;
  background:var(--white);
}

.font{
  height:136px;
  width:auto;
  background:var(--white);
  border:1px solid var(--white);
  border-top:1px solid var(--gray-200);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.list-wrap > .font:first-child{border-top-color:var(--white)}

/* --- 左：图标 + 字体名 --- */
.font-info{
  width:28%;
  margin-left:10px;
  white-space:nowrap;
  font-size:14px;
  display:flex;
  min-width:0;
}
.font-info .icon{
  width:41px;height:41px;
  border-radius:11px;
  margin-top:6px;
  flex:none;
}
.font-name{
  margin-left:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.font-name .title{
  display:flex;
  align-items:center;
  min-width:0;
}
.font-name h3{
  font-size:20px;
  font-weight:700;
  margin:0;
  max-width:164px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:inline-block;
  vertical-align:middle;
  min-width:0;
}
.font-name .title > a{min-width:0}
.font-name h3 a{color:#000}
.font:hover h3 a{color:var(--blue-500)}

/* 名字后面的单字标签：免 / 简 / 繁 用主蓝，分类字用浅蓝（.cat） */
.flag{
  text-decoration:none;
  color:var(--white);
  background:var(--blue-500);
  text-align:center;
  border-radius:2px;
  display:inline-block;
  padding:1px 4px;
  font-size:14px;
  line-height:1.35;
  vertical-align:middle;
  margin-left:4px;
  flex:none;
}
.flag.cat{
  background:var(--blue-300);
  margin-left:7px;
}

.font-name .en{
  max-width:223px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.font-name .en a{color:var(--gray-500)}
.font:hover .en a{color:var(--blue-500)}
.font-update{
  font-size:14px;
  color:var(--gray-350);
  margin-top:4px;
}
.font-update font{
  padding:1px 4px;
  border:1px solid;
  border-radius:4px;
}

/* --- 中：大字样张 --- */
.font-show{
  display:inline-block;
  flex-shrink:0;          /* 居中、不被拉伸也不被压缩 */
  text-align:center;
  /* 相对原位置左移 40px：用 relative 位移而不是改 flex 间距，
     因为 space-between 会把负 margin 平摊到两侧间隙，实际只挪一半 */
  position:relative;
  left:-40px;
}
.font-show img{width:600px;height:auto}
.font.is-en .font-show img{width:680px}

/* --- 右：查看预览按钮 --- */
.font-actions{display:flex;align-items:center;flex:none}
.font-down{
  display:block;
  position:relative;
  background:var(--blue-500);
  color:var(--white);
  text-align:center;
  width:172px;
  height:42px;
  font-size:16px;
  border-radius:6px;
  margin-right:10px;
  transition:background .2s;
}
.font-down:hover{background:var(--gray-800)}
.font-down > div{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.font-down span{
  transition:transform .3s cubic-bezier(.455,.03,.515,.955);
}
.font-down:hover span{transform:translateX(-10px)}
.font-down .arr{
  position:absolute;
  left:calc(50% + 34px);
  top:50%;
  font-size:20px;
  font-style:normal;
  line-height:1;
  opacity:0;
  transform:translate(-10px,-50%);
  transition:opacity .3s,transform .3s cubic-bezier(.455,.03,.515,.955);
}
.font-down:hover .arr{opacity:1;transform:translate(0,-50%)}

/* ---------- 空状态 ---------- */
.empty{
  padding:76px 20px;text-align:center;color:var(--gray-350);
  border:1px solid var(--gray-200);border-radius:14px;
}
.empty strong{display:block;font-size:16px;color:var(--gray-550);margin-bottom:6px;font-weight:600}

/* ---------- 分页（照 zfont：浅灰方块，选中为深色） ---------- */
.pager{
  display:flex;align-items:center;justify-content:center;
  gap:4px;margin:22px 0 38px;flex-wrap:wrap;
}
.pager .side{
  font-size:19px;color:var(--gray-550);cursor:pointer;
  padding:10px 15px;border-radius:14%;
  transition:all .3s;
}
.pager .side:hover{background:var(--gray-200)}
.pager .side.is-disabled{pointer-events:none;opacity:.42}
.pager button{
  font-family:inherit;
  font-size:19px;
  font-style:normal;
  cursor:pointer;
  margin:0 4px;
  border:0;
  border-radius:14%;
  padding:10px 15px;
  background-color:rgba(240,240,240,.41);
  color:var(--gray-550);
  transition:all .3s;
}
.pager button:hover{background:var(--gray-200)}
.pager button.active,
.pager button.active:hover{color:var(--white);background:var(--gray-800);font-weight:400}
.pager .gap{color:var(--gray-550);font-size:19px;padding:10px 6px}

/* ---------- 页脚 ---------- */
.footer{margin-top:52px;border-top:1px solid var(--gray-200)}
.footer-top{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;padding:34px 0 24px}
.footer-brand img{height:29px;width:auto;margin-bottom:11px}
.footer-brand p{margin:0;font-size:13px;color:var(--gray-350);line-height:1.8}
.footer-right{
  margin-left:auto;text-align:right;font-size:13px;color:var(--gray-350);
  line-height:1.9;max-width:620px;
}
.footer-right a{color:var(--blue-500)}
.footer-right a:hover{text-decoration:underline}
.footer-bottom{
  border-top:1px solid var(--gray-200);padding:15px 0 32px;font-size:12.5px;
  color:var(--gray-350);display:flex;gap:16px;flex-wrap:wrap;
}
.footer-bottom .sep{color:var(--gray-300)}

/* ---------- 响应式 ---------- */
@media (max-width:1340px){
  .font-info{width:26%}
  .font-show img{width:540px}
  .font.is-en .font-show img{width:600px}
  .font-down{width:150px}
}
@media (max-width:1140px){
  .font-info{width:30%}
  .font-show img{width:440px}
  .font.is-en .font-show img{width:480px}
  .font-down{width:132px;font-size:15px}
  .font-name h3{font-size:18px;max-width:130px}
}
@media (max-width:900px){
  .font{height:auto;flex-wrap:wrap;padding:14px 0;gap:10px}
  .font-info{width:100%;margin-left:14px}
  .font-show{flex-basis:100%;padding-left:65px;left:0}
  .font-show img{width:100%;max-width:520px}
  .font.is-en .font-show img{width:100%;max-width:520px}
  .font-actions{flex-basis:100%;padding-left:65px}
  .font-down{width:172px}
}
@media (max-width:780px){
  .wrap{padding:0 14px}
  .topbar-main{height:auto;flex-wrap:wrap;gap:9px;padding:10px 0}
  .logo img{height:28px}
  .nav{order:3;flex-basis:100%}
  .search{flex:1;width:auto;min-width:130px}
  .font-show,.font-actions{padding-left:14px}
  .footer-right{margin-left:0;text-align:left}
  .pager button,.pager .side{font-size:16px;padding:8px 11px}
}

/* ==========================================================================
   字体详情页 /font/{id}/  —— 信息 + 真预览
   ========================================================================== */

/* ---------- 面包屑 ---------- */
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:18px 0 14px;font-size:13px;color:var(--gray-350)}
.crumb a{color:var(--gray-350)}
.crumb a:hover{color:var(--blue-500)}
.crumb .sep{color:var(--gray-300)}
.crumb .now{color:var(--gray-550)}

/* ---------- 标题区 ---------- */
.fd-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.fd-head .l{flex:1;min-width:260px}
.fd-head h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  display:flex;align-items:center;flex-wrap:wrap}
.fd-head .en{margin-top:9px;font-size:13.5px;color:var(--gray-500);word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.fd-head .r{display:flex;gap:10px;flex-wrap:wrap}

.btn{height:42px;padding:0 20px;border-radius:10px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:14.5px;font-weight:500;font-family:inherit;cursor:pointer;
  background:#fff;color:var(--gray-800);transition:all .16s;white-space:nowrap}
.btn.solid{background:var(--blue-500);color:#fff}
.btn.solid:hover{background:var(--gray-800)}
.btn.ghost{border-color:var(--gray-200);color:var(--gray-550)}
.btn.ghost:hover{border-color:var(--blue-300);color:var(--blue-500);background:var(--blue-100)}
.btn.tiny{height:30px;padding:0 12px;font-size:12.5px;border-radius:8px}

/* ---------- 预览卡 ---------- */
.pv{position:relative;border:1px solid var(--gray-200);border-radius:14px;
  overflow:hidden;background:#fff}
.pv-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--gray-200);background:#FCFDFF}
.pv-presets{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.chip{border:1px solid var(--gray-200);background:#fff;color:var(--gray-550);
  font-family:inherit;font-size:12.5px;line-height:1;padding:7px 11px;border-radius:999px;
  cursor:pointer;transition:all .15s;max-width:210px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--blue-300);color:var(--blue-500);background:var(--blue-100)}
.pv-cfg{display:flex;align-items:center;gap:8px;flex:none}
.pv-cfg .lab{font-size:12.5px;color:var(--gray-350)}
.pv-cfg input[type=range]{width:108px;accent-color:#0066FF;cursor:pointer}
.pv-seg{display:flex;border:1px solid var(--gray-200);border-radius:9px;overflow:hidden}
.pv-seg button{border:0;background:#fff;color:var(--gray-550);font-family:inherit;
  font-size:12.5px;line-height:1;padding:8px 11px;cursor:pointer;transition:all .15s}
.pv-seg button+button{border-left:1px solid var(--gray-200)}
.pv-seg button:hover{background:var(--gray-200)}
.pv-seg button.on{background:var(--blue-500);color:#fff}

.pv-stage{position:relative;min-height:190px;padding:34px 26px;display:flex;align-items:center;
  justify-content:center;transition:background .18s}
.pv-stage .box{width:100%;outline:none;text-align:center;font-size:46px;line-height:1.45;
  word-break:break-word;min-height:1.45em;transition:font-size .12s}
.pv[data-theme=light] .pv-stage{background:#fff}
.pv[data-theme=grey]  .pv-stage{background:#F4F6F9}
.pv[data-theme=dark]  .pv-stage{background:#111111}
.pv[data-theme=blue]  .pv-stage{background:#0B3FB8}
.pv[data-theme=light] .box,.pv[data-theme=grey] .box{color:#111}
.pv[data-theme=dark]  .box,.pv[data-theme=blue] .box{color:#fff}
.pv-hint{margin:0;padding:10px 14px;border-top:1px solid var(--gray-200);
  font-size:12.5px;color:var(--gray-350);background:#FCFDFF}
.pv-miss{margin:0;padding:9px 14px;font-size:12.5px;line-height:1.7;color:#96590A;
  background:#FFF8E6;border-top:1px solid #FFE7AE}
.pv-miss[hidden]{display:none}

.pv-load{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  justify-content:center;gap:9px;font-size:13.5px;color:var(--gray-550);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pv-load[hidden]{display:none}
.pv-load.err{color:#C0392B;background:rgba(255,245,244,.94);padding:0 24px;text-align:center}
.spin{width:15px;height:15px;flex:none;border:2px solid var(--blue-300);
  border-top-color:var(--blue-500);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 信息格 ---------- */
.fd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;margin-top:20px}
.fd-grid .cell{border:1px solid var(--gray-200);border-radius:12px;padding:13px 15px;
  background:#fff}
.fd-grid .k{font-size:12.5px;color:var(--gray-350);margin-bottom:5px}
.fd-grid .v{font-size:15px;font-weight:600;color:var(--gray-800);word-break:break-word}
.fd-grid .v.small{font-size:12.5px;font-weight:500;color:var(--gray-550);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- 区块 ---------- */
.sec{margin-top:36px}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.sec-h h2{margin:0;font-size:17px;font-weight:600}
.sec-h .n{font-size:13px;color:var(--gray-350)}

.spec{border:1px solid var(--gray-200);border-radius:14px;padding:22px;
  background:#fff;overflow:hidden}
.spec img{width:100%;height:auto}

/* ---------- 同类字体卡 ---------- */
/* 样张条很宽（约 1200×119），卡片太窄会把字缩得很小，所以卡片给足宽度 */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.rel.wide{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.rel .card{display:block;border:1px solid var(--gray-200);border-radius:12px;
  padding:14px;background:#fff;transition:all .16s;overflow:hidden}
.rel .card:hover{border-color:var(--blue-300);box-shadow:0 8px 22px -14px rgba(0,102,255,.5)}
.rel .card .t{display:flex;align-items:center;min-width:0;margin-bottom:10px}
.rel .card .t .nm{font-size:15px;font-weight:600;color:#000;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel .card:hover .t .nm{color:var(--blue-500)}
.rel .card img{width:100%;height:104px;object-fit:contain;object-position:left center}
.rel .card .e{margin-top:10px;font-size:12px;color:var(--gray-350);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 上下款 ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:36px 0 10px}
.pn a{border:1px solid var(--gray-200);border-radius:12px;padding:14px 16px;transition:all .16s}
.pn a:hover{border-color:var(--blue-300);background:var(--blue-100)}
.pn .t{font-size:12.5px;color:var(--gray-350);margin-bottom:5px}
.pn .n2{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn .right{text-align:right}
.pn .ph{border:1px dashed var(--gray-200);border-radius:12px;opacity:.55}

/* ---------- 获取字体弹层 ---------- */
.dlg{position:fixed;inset:0;z-index:200;display:none;align-items:center;
  justify-content:center;padding:20px}
.dlg.open{display:flex}
.dlg .mask{position:absolute;inset:0;background:rgba(17,17,17,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg .panel{position:relative;width:100%;max-width:470px;background:#fff;
  border-radius:16px;padding:26px;box-shadow:0 26px 64px -24px rgba(0,0,0,.5)}
.dlg h3{margin:0 0 18px;font-size:18px;font-weight:600}
.dlg-info{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;
  font-size:13.5px;padding-bottom:18px;border-bottom:1px solid var(--gray-200)}
.dlg-info dt{color:var(--gray-350);white-space:nowrap}
.dlg-info dd{margin:0;color:var(--gray-800);word-break:break-all}
.dlg-note{margin:16px 0 0;font-size:13.5px;color:var(--gray-800);font-weight:600}
.dlg-fine{margin:10px 0 0;font-size:12.5px;color:var(--gray-350);line-height:1.75}
.dlg-act{display:flex;gap:10px;margin-top:20px}
.dlg-act .btn{flex:1}

/* ---------- 详情页响应式 ---------- */
@media (max-width:900px){
  .fd-head h1{font-size:24px}
  .pv-stage{padding:26px 18px;min-height:160px}
  .pv-stage .box{font-size:34px}
  .pv-cfg{width:100%;justify-content:space-between}
}
@media (max-width:600px){
  .fd-head .r{width:100%}
  .fd-head .r .btn{flex:1}
  .pv-bar{gap:8px}
  .pv-presets{order:2;flex-basis:100%}
  .rel{grid-template-columns:1fr 1fr}
  .rel .card img{height:74px}
  .pn{grid-template-columns:1fr}
  .spec{padding:14px}
}