/* ===========================================================
   新安代 Shiada 官网视觉系统
   依据：《新安代VI规范 v610》2026-05
   - 品牌标准色：黑 #000000 / 品牌白 #FFFFFF
   - 品牌功能色：初雪红 #D9454A（守护·爱心·生命力）
   - 辅助色（工业品）：雾感灰蓝 #8B9AA6 / 高级雅灰 #949698 / 柔雾浅棕 #B4A799
   - 辅助色（棉品）：奶雾米白 #F0EBE4 / 浅陶土粉 #C9A99A / 雾感灰蓝绿 #A6B8B4
   - 特殊印刷色：哑光柔金 #C8A97E / 雾面冷银 #BFC3C8
   - 高亮辅助：淡奶油黄 #FFF3C4 / 柔杏色 #FAD2B5 / 天湖蓝 #B8D8F0 / 极光绿 #C8E5D9 / 淡樱粉 #FDE0E2
   - 字体：阿里巴巴普惠体
   - 排版原则：足够的空间、适当的简洁、主次清晰、设计的细节、信息的关系
   =========================================================== */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --red:#D9454A;          /* 初雪红：品牌功能色 */
  --red-soft:#F6E3E3;
  --bluegray:#8B9AA6;     /* 雾感灰蓝 */
  --gray:#949698;         /* 高级雅灰 */
  --tan:#B4A799;          /* 柔雾浅棕 */
  --cream:#F0EBE4;        /* 奶雾米白 */
  --cream-2:#FAF7F2;
  --clay:#C9A99A;         /* 浅陶土粉 */
  --sage:#A6B8B4;         /* 雾感灰蓝绿 */
  --gold:#C8A97E;         /* 哑光柔金 */
  --silver:#BFC3C8;       /* 雾面冷银 */
  --butter:#FFF3C4;       /* 淡奶油黄 */
  --apricot:#FAD2B5;      /* 柔杏色 */
  --line:#E6E1D9;
  --line-strong:#D5CFC5;
  --max:1080px;
  --space:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--black);
  font-family:"Alibaba PuHuiTi","阿里巴巴普惠体","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-weight:400;line-height:1.85;letter-spacing:.01em;-webkit-font-smoothing:antialiased;
}
a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .2s,color .2s}
a:hover{color:var(--red);border-bottom-color:var(--red)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--space)}

/* 预览横幅 */
.draftbar{background:var(--black);color:var(--white);font-size:.8rem;padding:10px var(--space);text-align:center;letter-spacing:.04em}

/* 页头 */
header.site{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;border:0;letter-spacing:.18em}
.brand .logo{display:block;height:44px;width:auto;border-radius:2px}
@media (max-width:720px){.brand .logo{height:36px}}
.brand .mark{font-size:.82rem;font-weight:500;text-transform:uppercase;color:var(--black)}
.brand .cn{font-size:1.28rem;font-weight:700;letter-spacing:.12em}
.brand small{font-size:.78rem;color:var(--gray);letter-spacing:.02em;margin-left:4px}
.brandwrap{display:flex;align-items:flex-end;gap:10px}
.tagline{font-size:.78rem;color:var(--gray);letter-spacing:.12em;margin:0;padding-bottom:2px;white-space:nowrap}
nav.top{display:flex;flex-wrap:wrap;gap:4px 22px}
nav.top a{font-size:.88rem;color:var(--gray);border:0;padding:4px 0;letter-spacing:.03em}
nav.top a:hover{color:var(--black)}
nav.top a[aria-current="page"]{color:var(--black);font-weight:600;border-bottom:2px solid var(--red)}

/* 主体 */
main{padding:clamp(28px,5vw,64px) 0 clamp(48px,7vw,88px)}
h1{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.4;font-weight:700;margin:0 0 14px;letter-spacing:.02em}
h2{font-size:1.22rem;font-weight:700;margin:clamp(32px,5vw,52px) 0 16px;letter-spacing:.02em;position:relative;padding-bottom:10px}
h2::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--red)}
h3{font-size:1rem;font-weight:600;margin:22px 0 8px;letter-spacing:.02em}
p,li{color:#333333}
p{margin:0 0 14px}
p.lead{font-size:1.06rem;line-height:1.9;color:var(--black)}
.meta{font-size:.8rem;color:var(--gray);margin:0 0 24px;letter-spacing:.02em}
.muted{color:var(--gray)}

/* 首屏 */
.hero{background:var(--cream);padding:clamp(40px,7vw,80px) 0;margin-bottom:clamp(32px,5vw,56px)}
.hero .wrap{max-width:var(--max)}
.hero .eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-bottom:18px}
.hero h1{max-width:20em}
.hero h1.slogan{font-size:clamp(1.7rem,3.2vw,2.35rem);font-weight:700;letter-spacing:.1em;margin:0 0 24px;line-height:1.4}
.hero .slogan-en{font-size:.78rem;letter-spacing:.16em;color:var(--gray);text-transform:uppercase}
.hero .lead{max-width:46em;margin:0;font-size:1.02rem;color:#333}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:26px 0}
.card{display:block;background:var(--white);border:1px solid var(--line);border-radius:2px;padding:24px;transition:border-color .2s}
.card:hover{border-color:var(--bluegray)}
.card h3{margin:0 0 8px;font-size:.95rem;color:var(--black);letter-spacing:.04em}
.card p{margin:0;font-size:.9rem;color:#555}
.card p.meta{margin-top:8px}

/* 表格 */
table{width:100%;border-collapse:collapse;margin:20px 0 26px;background:var(--white);font-size:.9rem;table-layout:auto}
th,td{border:1px solid var(--line);padding:13px 16px;text-align:left;vertical-align:top;line-height:1.8}
th{background:var(--cream-2);font-weight:600;color:var(--black);letter-spacing:.02em}
tbody tr:hover{background:#FCFBF9}

/* 待确认标记 */
.pending{display:inline-block;background:var(--butter);color:#7A5A12;border:1px dashed var(--gold);
  border-radius:2px;padding:0 6px;font-size:.8rem;line-height:1.7}
.ok{color:var(--black)}

/* 提示块 */
.notice{background:var(--cream-2);border-left:3px solid var(--red);padding:16px 20px;margin:24px 0;font-size:.92rem;color:#444}
.notice strong{color:var(--black)}

ul.tight{padding-left:20px}
ul.tight li{margin:8px 0}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}

/* 页脚 */
footer.site{background:var(--cream);border-top:1px solid var(--line);padding:clamp(32px,5vw,56px) 0;font-size:.84rem;color:var(--gray)}
footer.site .brandline{font-size:.95rem;font-weight:700;letter-spacing:.12em;color:var(--black);margin-bottom:6px}
footer.site .sloganline{font-size:.78rem;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;margin-bottom:20px}
footer.site .row{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;margin-top:10px}
footer.site a{color:var(--gray);border-bottom-color:var(--line-strong)}
footer.site a:hover{color:var(--red)}

/* 响应式 */
@media (max-width:720px){
  html{font-size:15px}
  header.site .wrap{gap:12px;min-height:auto;padding-top:12px;padding-bottom:12px}
  .tagline{display:none}
  nav.top{gap:2px 16px}
  table{font-size:.84rem}
  th,td{padding:8px 10px}
  .cards{gap:14px}
}

/* ---- VI 优化：暖度、留白、层级（2026-10-27 评审后） ---- */
p{max-width:47em}
.hero{background:linear-gradient(180deg,var(--cream) 0%, var(--cream-2) 100%)}
.hero .eyebrow{display:flex;align-items:center;gap:12px}
.hero .eyebrow::before{content:"";display:inline-block;width:28px;height:2px;background:var(--red)}
.hero .slogan{color:var(--black)}
.hero .slogan::after{content:"";display:block;width:44px;height:2px;background:var(--gold);margin-top:14px}

/* 区块：暖底 + 大留白 */
.section-cream{background:var(--cream-2);border:1px solid var(--line);border-radius:2px;padding:clamp(24px,4vw,40px);margin:clamp(28px,4vw,44px) 0}
.section-cream h2{margin-top:0}
.section-cream h2::after{background:var(--gold)}

/* 引导卡片：数字 + 箭头，红色点缀 */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0 0}
.guide-item{display:flex;gap:14px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:2px;transition:border-color .2s,transform .2s}
.guide-item:hover{border-color:var(--red);transform:translateY(-1px)}
.guide-item .no{font-size:.78rem;letter-spacing:.12em;color:var(--red);font-weight:700;padding-top:2px}
.guide-item h3{margin:0 0 4px;font-size:.95rem}
.guide-item p{margin:0;font-size:.86rem;color:#666}
.guide-item .arrow{margin-left:auto;color:var(--gold);align-self:center;font-size:1.1rem}

/* 表格暖化 */
th{background:var(--cream)}
tbody tr:nth-child(even){background:#FDFCFA}
.notice{background:var(--butter);border-left-color:var(--red)}

/* 页脚暖化 */
footer.site{background:var(--cream);border-top:2px solid var(--black)}

/* 页脚 logo */
.footer-logo{margin-bottom:14px}
.footer-logo img{display:block;height:29px;width:auto;opacity:.92}

/* 平台成绩：指标胶囊（VI 辅助色，信息层级次于正文） */
.chip{display:inline-block;padding:3px 10px;margin:2px 6px 2px 0;background:var(--cream);
  border:1px solid var(--line);border-radius:2px;font-size:.82rem;color:#333;line-height:1.6;white-space:nowrap}
table .chip{font-size:.8rem}

/* 榜单：产品页胶囊与列表角标（初雪红为功能性强调，不铺大面积） */
.chip-rank{background:#FDF2F2;border-color:rgba(217,69,74,.35);color:#A8282C}
.rankbadge{display:inline-block;margin:8px 0 0;padding:3px 8px;background:#FDF2F2;
  border-left:2px solid var(--red);font-size:.78rem;color:#A8282C;line-height:1.6}

/* 表格首列不折行（平台名等短标签） */
table tbody td:first-child{white-space:nowrap}

/* 官方渠道表：店铺名与平台列不折行，数据列可换行 */
.tbl-channels td:nth-child(2){white-space:nowrap}
.tbl-channels td:nth-child(3){word-break:break-all}