/* ============================================================
   首页专用样式
   ============================================================ */

/* ===== Hero ===== */
.hero{background:var(--paper);padding:48px 0 44px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-bottom:28px}
.hero h1{font-size:34px;font-weight:600;line-height:1.4;margin-bottom:13px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:15.5px;color:var(--muted);max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.hero-card{padding:20px 22px}
.hero-card h3{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:12px;letter-spacing:.04em}
.hc-row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}
.hc-row:last-child{border:0}
.hc-row span{color:var(--muted)}
.hc-row b{color:var(--ink);font-weight:500}

/* ===== 查询卡 ===== */
.search-card{padding:6px}
.sc-tabs{display:flex;padding:2px 2px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{background:transparent;border:0;padding:12px 22px;font-size:14.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;transition:.15s}
.sc-tab:hover{color:var(--ink)}
.sc-tab.on{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
.sc-input{display:flex;gap:10px;padding:14px 2px 2px}
.sc-input input{flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);outline:none;font-size:15.5px}
.sc-input input:focus{background:#fff;border-color:var(--gold)}
.sc-input .btn{height:50px;padding:0 32px;font-size:15.5px;flex-shrink:0}
.sc-hint{display:flex;align-items:center;gap:9px;padding:11px 12px 9px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.sc-hint a{color:var(--muted);padding:2px 10px;background:var(--paper);border-radius:999px;transition:.15s;cursor:pointer}
.sc-hint a:hover{background:var(--gold-soft);color:#6D4C16}
.sc-free{margin-left:auto;color:var(--st-green-fg);font-weight:500}

/* ===== 闲置商标卡 =====
   图样容器要点：
   1. 纯白底（跟小程序一致）—— 商标图源文件多为白底，米色衬底会显脏且让图看着更小
   2. object-fit: contain + 足够大的容器，保证图样在框内撑到最大且完整
   3. 用 aspect-ratio 代替固定高度，避免宽图/方图/长图在不同卡宽下比例失衡 */
/* 桌面 6 列（1200px 内容区 / 6 = 200px/列）；auto-fill 在窄屏自动降列 */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tc{overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:.18s}
.tc:hover{transform:translateY(-3px);border-color:var(--gold)}
.tc-img{
  aspect-ratio:1/1;                 /* 正方形容器：商标图多为方图，撑满最充分 */
  background:#fff;                  /* 纯白底，与源文件一致 */
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:8px;                      /* 给图样留呼吸空间，同时不浪费面积 */
}
.tc-img img{
  max-width:100%;max-height:100%;   /* 核心：完整显示且撑到最大 */
  width:auto;height:auto;
  object-fit:contain;               /* 保持原比例，不裁切不变形 */
  border-radius:3px;
}
.tc-img .ph{font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.tc-badge{position:absolute;top:6px;left:6px;z-index:2;height:20px;padding:0 8px;font-size:11px}
.tc-b{padding:13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.tc-b h3{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-meta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-foot{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.price{font-size:17px;color:var(--st-red-fg);font-weight:600}
.tc-go{font-size:12px;color:var(--gold);white-space:nowrap}
.more-row{text-align:center;margin-top:26px}

/* 骨架屏 */
.sk-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sk-img{aspect-ratio:1/1;background:linear-gradient(90deg,var(--paper) 25%,var(--line) 50%,var(--paper) 75%);background-size:200% 100%;animation:sk 1.4s infinite}
.sk-line{height:14px;margin:14px 16px 0;background:var(--line);border-radius:4px}
.sk-line.short{width:50%;margin-top:9px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{grid-column:1/-1;text-align:center;padding:44px 0;color:var(--muted);font-size:14px}

/* ===== 四步引导 ===== */
/* 紧凑横卡：图标在左、文字在右，一行 4 张，不占过多纵向空间 */
.guide{margin-top:0;gap:12px}
.g-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px;cursor:pointer;transition:.18s;text-align:left}
.g-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.g-step{position:absolute;top:8px;right:10px;font-size:10.5px;color:var(--st-gray-fg);font-weight:600;letter-spacing:.04em}
.g-ico{width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);background:var(--gold-soft);display:grid;place-items:center;font-size:16px;color:#6D4C16}
.g-txt{min-width:0;flex:1}
.g-card h4{font-size:14px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-card p{font-size:12px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 收藏 ===== */
.fav{margin-bottom:18px}
.f-item{padding:12px;cursor:pointer;transition:.15s}
.f-item:hover{border-color:var(--gold)}
.f-thumb{height:56px;background:var(--paper);border-radius:6px;margin-bottom:9px;display:grid;place-items:center;font-size:12px;color:var(--muted)}
.f-name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.f-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:26px 16px;cursor:pointer;border-style:dashed;color:var(--muted);font-size:14px}
.f-plus{font-size:24px;margin-bottom:2px}
.f-hint{font-size:12.5px;color:var(--muted)}
.fav-note{display:flex;gap:8px;align-items:flex-start;line-height:1.6}

/* ===== 服务宫格 ===== */
.feats{}
.feat{position:relative;padding:24px 22px;cursor:pointer;transition:.18s}
.feat:hover{transform:translateY(-3px);border-color:var(--gold)}
.feat-ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--gold-soft);display:grid;place-items:center;font-size:18px;margin-bottom:13px}
.feat h3{font-size:16.5px;font-weight:600;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--muted);line-height:1.55}
.feat-tag{position:absolute;top:14px;right:14px}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:27px}
}

@media(max-width:768px){
  .hero{padding:30px 0 26px}
  .hero h1{font-size:23px;line-height:1.45}
  .hero p{font-size:14.5px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1;min-width:0}

  /* 查询卡：按钮独占一行，输入框全宽更易点 */
  .sc-input{flex-wrap:wrap}
  .sc-input input{width:100%;flex:1 0 100%;height:46px}
  .sc-input .btn{width:100%;height:46px}
  .sc-tab{padding:11px 16px;font-size:14px}

  /* 热门词独占一行，不挤 */
  .sc-hint{gap:7px}
  .sc-free{margin-left:0;width:100%;margin-top:3px}

  .g-4{grid-template-columns:repeat(2,1fr)}
  .grid-auto{grid-template-columns:repeat(2,1fr);gap:12px}
  /* 图样用 aspect-ratio 自适应卡宽，这里不要再压固定高度，否则比例失衡 */
  .tc-img{padding:5px}
}

/* 平板：6 列在此宽度会挤到 150px 以下，回落到 4 列更稳 */
@media(min-width:769px) and (max-width:1024px){
  .grid-auto{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:480px){
  .g-4{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:1fr}
  .g-card{padding:12px 12px}
  .g-ico{width:32px;height:32px;font-size:15px}
}