/* ============================================================
 * 生肖详情页样式 detail.css
 * 包含：左主+右侧栏布局、属性盒、运势评分条、延伸阅读
 * ============================================================ */

.layout{display:grid;grid-template-columns:1fr 320px;gap:24px}

article{
  background:#fffbe9;border:1px solid #e6c98a;border-radius:6px;
  padding:26px;box-shadow:0 2px 0 rgba(212,160,23,.08);
}
article h1.title,
article h2.title{
  font-size:28px;color:#8b0000;text-align:center;
  padding-bottom:12px;border-bottom:2px dashed #d4a017;
  margin-bottom:18px;letter-spacing:3px;
  font-weight:bold;border-left:none;padding-left:0;
}
article .meta{text-align:center;color:#7a5a3a;font-size:13px;margin-bottom:16px}
article h2{
  font-size:22px;color:#8b0000;
  border-left:6px solid #d4a017;padding-left:12px;
  margin:22px 0 12px;letter-spacing:2px;
}
article h3{font-size:18px;color:#5a2a1a;margin:16px 0 8px}
article p{font-size:16px;margin-bottom:12px;text-indent:2em}
article ul{margin:8px 0 14px 32px}
article ul li{margin-bottom:4px}

/* 属性卡片 */
.attr-box{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  background:#fff;border:1px solid #e6c98a;border-radius:6px;
  padding:14px;margin:14px 0;
}
.attr-box div{text-align:center}
.attr-box .k{font-size:13px;color:#7a5a3a}
.attr-box .v{font-size:16px;color:#8b0000;font-weight:bold;margin-top:4px}

/* 引文 */
blockquote{
  background:#fbeac5;border-left:4px solid #c0392b;
  padding:10px 14px;margin:12px 0;color:#5a2a1a;
  border-radius:0 4px 4px 0;
}

/* 运势评分条 */
.score-bar{display:flex;align-items:center;margin:6px 0;font-size:15px}
.score-bar span.lbl{width:80px;color:#5a2a1a}
.score-bar .track{
  flex:1;background:#f5e3c0;height:14px;border-radius:7px;
  margin:0 10px;overflow:hidden;
}
.score-bar .track i{
  display:block;height:100%;
  background:linear-gradient(90deg,#d4a017,#c0392b);
}
.score-bar em{font-style:normal;color:#8b0000;width:48px;text-align:right}

/* 右侧栏 */
aside{display:flex;flex-direction:column;gap:16px}
.side{
  background:#fffbe9;border:1px solid #e6c98a;
  border-radius:6px;padding:16px;
}
.side h3{
  font-size:17px;color:#8b0000;
  border-bottom:1px solid #e6c98a;padding-bottom:8px;margin-bottom:10px;
}
.side ul{list-style:none}
.side ul li{
  padding:6px 0;border-bottom:1px dashed #e6d3a4;font-size:14px;
}
.side ul li::before{
  content:"·";color:#c0392b;margin-right:6px;font-weight:bold;
}
.hot a{color:#5a2a1a}
.hot a:hover{color:#c0392b}

/* 延伸阅读 */
.relate{
  background:#fffbe9;border:1px solid #e6c98a;border-radius:6px;
  padding:20px 24px;margin-top:24px;
}
.relate h3{font-size:18px;color:#8b0000;margin-bottom:10px}
.relate ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px}
.relate ul li{
  padding:4px 0;font-size:15px;position:relative;padding-left:14px;
}
.relate ul li::before{content:"》";color:#c0392b;position:absolute;left:0}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .attr-box{grid-template-columns:repeat(2,1fr)}
  .relate ul{grid-template-columns:1fr}
  article h1.title{font-size:22px;letter-spacing:2px}
  article h2{font-size:18px}
}