/* 知否知否 · 分享卡片的按钮和预览窗口样式（配合 js/sharecard.js）
   颜色尽量用继承色和半透明，放进不同板块的主题里都能看。 */
/* 弹窗右上角的小号“分享”按钮：紧挨在关闭“×”的左边 */
.sc-corner {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 13px; line-height: 1; letter-spacing: 0.06em; white-space: nowrap;
  padding: 0 11px; cursor: pointer; border-radius: 999px; background: transparent;
  border: 1px solid currentColor; opacity: 0.78;
}
.sc-corner:hover, .sc-corner:focus-visible { opacity: 1; background: rgba(128, 128, 128, 0.16); }
.sc-corner svg { flex: none; }
/* 时令页（节气、节日、时辰、生肖、科普）：面包屑一行的右边，印章左边 */
.sc-crumb {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none;
  font: inherit; font-size: 12.5px; line-height: 1.3; letter-spacing: 0.08em; white-space: nowrap;
  padding: 4px 11px; color: var(--autumn-deep, #8a4324); background: transparent; border: 1px solid var(--autumn, #a8562f); border-radius: 999px; cursor: pointer; opacity: 0.85;
}
.sc-crumb:hover, .sc-crumb:focus-visible { opacity: 1; background: rgba(168, 86, 47, 0.1); }
.sc-crumb svg { flex: none; width: 13px; height: 13px; }
/* 神灵 / 异兽详情窗（深蓝底金字）：放在关闭“×”的左边 */
.sl-dialog .sc-corner { top: 17px; right: 64px; height: 30px; color: var(--gold-soft, #e8dcc0); background: rgba(15, 20, 32, 0.85); border-color: var(--gold-dim, #7a6a3f); opacity: 1; }
.sl-dialog .sc-corner:hover, .sl-dialog .sc-corner:focus-visible { border-color: var(--gold, #c9a961); background: rgba(15, 20, 32, 0.95); }
/* 帝王名单里每一行的小号“分享”按钮（行内，放在年份下面） */
.sc-inline {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px;
  font: inherit; font-size: 12.5px; line-height: 1.3; letter-spacing: 0.06em; white-space: nowrap;
  color: #e2c27d; background: transparent; border: 1px solid rgba(226, 194, 125, 0.5); border-radius: 999px; cursor: pointer; opacity: 0.8;
}
.sc-inline:hover, .sc-inline:focus-visible { opacity: 1; background: rgba(226, 194, 125, 0.12); }
.sc-inline svg { flex: none; width: 13px; height: 13px; }
.ss-emp-id .sc-inline { align-self: flex-start; }
/* 历史人物弹窗（深青底金字） */
.ss-modal-card .sc-corner { top: 14px; right: 56px; height: 28px; color: #e2c27d; }
.ss-modal-card.sc-has-share .ss-modal-title, .ss-modal-card.sc-has-share .ss-modal-tag { margin-right: 118px; }
/* 诗词弹窗（紫色底） */
.wr-char-modal-card .sc-corner { top: 15px; right: 52px; height: 28px; color: #f5e6f4; }
.wr-char-modal-card.sc-has-share .wr-char-modal-title { margin-right: 110px; }
@media (max-width: 480px) {
  .ss-modal-card.sc-has-share .ss-modal-title, .ss-modal-card.sc-has-share .ss-modal-tag { margin-right: 108px; }
  .wr-char-modal-card.sc-has-share .wr-char-modal-title { margin-right: 104px; }
}

.sc-noscroll { overflow: hidden; }
.sc-overlay {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(10, 8, 14, 0.72);
}
.sc-overlay.is-open { display: flex; }
.sc-box {
  position: relative; width: min(100%, 520px); max-height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  background: #f7f3ee; color: #2b2430; border-radius: 12px; padding: 14px 14px 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.sc-close {
  position: absolute; right: 8px; top: 6px; z-index: 2; width: 34px; height: 34px;
  border: 0; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(40, 30, 50, 0.55);
}
.sc-stage {
  overflow: auto; -webkit-overflow-scrolling: touch; min-height: 120px; max-height: calc(100vh - 170px);
  border-radius: 6px; background: #e9e4de; text-align: center;
}
.sc-msg { padding: 56px 16px; font-size: 15px; color: #5a5160; }
.sc-img { display: block; width: 100%; height: auto; -webkit-touch-callout: default; user-select: auto; }
.sc-hint { margin: 0; min-height: 1.2em; font-size: 13px; line-height: 1.6; color: #5a5160; text-align: center; }
.sc-bar { display: flex; gap: 10px; justify-content: center; }
.sc-act {
  flex: 1 1 0; max-width: 220px; font: inherit; font-size: 15px; padding: 10px 12px; cursor: pointer;
  border-radius: 8px; border: 1.5px solid #5e3f6a; color: #5e3f6a; background: transparent;
}
.sc-act-main { color: #fff; background: #5e3f6a; }
.sc-act[hidden], .sc-bar[hidden], .sc-img[hidden], .sc-msg[hidden] { display: none; }
@media (max-width: 480px) {
  .sc-overlay { padding: 8px; }
  .sc-stage { max-height: calc(100vh - 150px); }
}
/* 二十八宿详情面板：按钮放在面板右上角 */
.xx-panel { position: relative; }
.xx-panel .sc-corner { top: 10px; right: 10px; height: 28px; z-index: 3; }
.xx-panel .xx-panel-kicker { padding-right: 96px; }
/* 典籍书页、名著、字语卡片里的“分享”按钮：一行，靠右，颜色跟着页面走 */
.sc-line-wrap { display: flex; justify-content: flex-end; margin: 6px 0 4px; }
.sc-line {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; line-height: 1.3; letter-spacing: 0.08em; white-space: nowrap;
  padding: 4px 12px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; opacity: 0.72;
}
.sc-line:hover, .sc-line:focus-visible { opacity: 1; background: rgba(128, 128, 128, 0.14); }
.sc-line svg { flex: none; width: 13px; height: 13px; }
.zy-card-body .sc-line-wrap { margin-top: 10px; }