/* ============================================================
   曹国荣星相馆 · 流年总览
   ============================================================ */

.yr-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 16px 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border:1px solid var(--line);
}
.yr-mid{ text-align:center; }
.yr-mid b{
  display:block;
  font-family: var(--serif);
  font-size:20px; font-weight:500;
  color: var(--gold-hi);
  letter-spacing:.06em;
  font-variant-numeric: tabular-nums;
}
.yr-mid span{
  display:block; margin-top:1px;
  font-size:11px; color: var(--text-3);
  letter-spacing:.12em;
}

.yr-sheet{ padding: 0 16px; transition: opacity .2s; }
.yr-loading{
  padding:70px 0; text-align:center;
  font-size:12px; color: var(--text-3);
}

.ycard{
  margin-bottom:14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}

/* 年题头 */
.yhead{
  padding: 20px 18px 16px;
  background: linear-gradient(165deg, rgba(201,169,97,.12), rgba(201,169,97,.02) 50%, transparent 72%);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.yhead h2{
  font-family: var(--serif);
  font-size:23px; font-weight:500;
  color: var(--gold-hi);
  letter-spacing:.14em;
  text-indent:.14em;
}
.yhead .yh-sub{
  margin-top:7px;
  font-size:11.5px; color: var(--text-2);
  letter-spacing:.06em;
  line-height:1.9;
}
.yh-chips{
  margin-top:12px;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.yh-chip{
  font-size:11px; padding:3px 9px;
  border-radius:20px;
  border:1px solid var(--line-mid);
  color: var(--text-2);
  letter-spacing:.04em;
}
.yh-chip.warn{ border-color: rgba(217,85,78,.34); color:#D9A09C; }
.yh-chip.gold{ border-color: rgba(201,169,97,.32); color: var(--gold-hi); }

/* 九宫 */
.sec-hd{
  display:flex; align-items:baseline; gap:9px;
  padding: 15px 16px 11px;
}
.sec-hd b{
  font-family: var(--serif);
  font-size:13.5px; font-weight:500;
  color: var(--gold);
  letter-spacing:.14em;
}
.sec-hd em{
  font-style:normal; font-size:10px;
  color: var(--text-3); letter-spacing:.06em;
}

.pan{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  padding: 0 12px 12px;
}
.pg{
  position:relative;
  min-height:88px;
  padding: 9px 6px 7px;
  border-radius:10px;
  background: var(--surface-2);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.pg.centre{ background: rgba(201,169,97,.07); border-color: rgba(201,169,97,.22); }
.pg.wu5{ border-color: rgba(217,85,78,.42); background: rgba(217,85,78,.08); }
.pg .pn{
  font-family: var(--serif);
  font-size:13.5px;
  color: var(--text);
  letter-spacing:.04em;
}
.pg .pst{
  margin-top:3px;
  font-size:9.5px;
  color: var(--text-3);
  letter-spacing:.04em;
}
.pg .pm{
  margin-top:2px;
  font-size:9.5px;
  color: var(--text-3);
  opacity:.72;
  letter-spacing:.08em;
}
.pg .mk{
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  font-size:8.5px; line-height:1;
  padding: 2px 5px 2px;
  border-radius: 0 0 4px 4px;
  background: var(--surface-3);
  color: var(--gold-hi);
  letter-spacing:.02em;
  white-space:nowrap;
}
.pg .mk.sha{ background: rgba(217,85,78,.28); color:#F0B6B2; }
.pg .mk.po{ background: rgba(156,144,184,.24); color:#C6BEDC; }

.pan-note{
  padding: 0 16px 14px;
  text-align:center;
  font-size:10.5px; color: var(--text-3);
  letter-spacing:.08em;
}

/* 条目 */
.kv-list{ padding: 0 16px 16px; }
.kv-row{
  display:flex; gap:11px;
  padding: 10px 0;
  border-top:1px solid var(--line);
}
.kv-row:first-child{ border-top:0; }
.kv-k{
  flex:none; width:38px;
  font-family: var(--serif);
  font-size:12px; color: var(--gold-dim);
  letter-spacing:.1em;
  padding-top:1px;
}
.kv-v{
  flex:1; min-width:0;
  font-size:12.5px; line-height:1.75;
  color: var(--text-2);
}
.kv-v b{ color: var(--text); font-weight:400; }
.mtn{
  display:inline-block;
  margin: 3px 4px 0 0;
  padding: 1px 7px;
  border-radius:5px;
  background: rgba(217,85,78,.13);
  color:#D9A09C;
  font-size:11px;
}

/* 压祭主 */
.jz{
  display:flex; flex-wrap:wrap; gap:7px;
  padding: 0 16px 16px;
}
.jz span{
  flex:1 1 auto; min-width:60px;
  text-align:center;
  padding: 7px 4px;
  border-radius:8px;
  background: var(--surface-2);
  border:1px solid var(--line);
  font-family: var(--serif);
  font-size:13px;
  color: var(--text);
  letter-spacing:.06em;
}

/* 土王 / 分龙 */
.kv2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding: 0 16px 16px;
}
.kv2 > div{
  padding: 9px 10px;
  border-radius:10px;
  background: var(--surface-2);
  border:1px solid var(--line);
}
.kv2 .m{
  font-family: var(--serif);
  font-size:12.5px; color: var(--text);
  letter-spacing:.06em;
}
.kv2 .d{
  margin-top:3px;
  font-size:11px; color: var(--gold-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing:.04em;
}
.kv2 .g{
  margin-top:1px;
  font-size:10px; color: var(--text-3);
  letter-spacing:.03em;
}

/* 地母经 */
.jing{
  margin: 0 16px 16px;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border:1px solid var(--line);
}
.jing-hd{
  text-align:center;
  font-family: var(--serif);
  font-size:13px; color: var(--gold);
  letter-spacing:.36em;
  text-indent:.36em;
  margin-bottom:13px;
}
.jing-body{
  font-family: var(--serif);
  font-size:13px; line-height:2.1;
  color: var(--text);
  text-align:center;
  letter-spacing:.1em;
}
.jing-body p{ margin:0; }
.jing-bo{
  margin-top:13px; padding-top:12px;
  border-top:1px solid var(--line);
  font-family: var(--serif);
  font-size:12.5px; line-height:2;
  color: var(--text-2);
  text-align:center;
  letter-spacing:.08em;
}
.jing-bo .lab{
  display:inline-block;
  margin-right:8px;
  font-size:10.5px;
  color: var(--gold-dim);
  letter-spacing:.16em;
}
.jing-bo span{ }
.jing-bo br + span{ }

/* 印记 */
.colophon{
  margin: 0 16px 18px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; color: var(--text-3);
  letter-spacing:.1em;
}

@media (max-width:359px){
  .pg{ min-height:78px; }
  .pg .pn{ font-size:12.5px; }
  .pg .pst, .pg .pm{ font-size:9px; }
  .yhead h2{ font-size:20px; }
}