/* 将这行代码放在 style.css 的第一行 */
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css");

/* =========================================
   全局变量与糖果色预设
   ========================================= */
:root {
  --bg-color: #FAFAFA;
  --text-main: #2C2C2C;
  --text-muted: #757575;

  /* 糖果色系 / 马卡龙色系预设 */
  --candy-pink: #FF9AA2;
  --candy-peach: #FFB7B2;
  --candy-melon: #FFDAC1;
  --candy-mint: #E2F0CB;
  --candy-aqua: #B5EAD7;
  --candy-lavender: #C7CEEA;

  --theme-primary: var(--candy-pink);
  --theme-highlight: var(--candy-mint);
  --theme-border: var(--candy-lavender);

  --font-base: "Georgia", "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, SimSun, serif;
  --font-kaiti: "Georgia", "Kaiti SC", STKaiti, KaiTi, "LXGW WenKai Lite", serif;
}

/* =========================================
   基础排版与计数器初始化
   ========================================= */
body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-base);
  font-size: 1.125rem;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  /* 初始化页边注计数器 */
  counter-reset: sidenote-counter;
}

.container {
  max-width: 700px;
  margin: 2rem auto;
  padding-right: 250px;
  padding-left: 20px;
}

h1,
h2,
h3 {
  font-weight: bold;
  color: var(--text-main);
  margin-top: 1.5em;
  margin-bottom: 1em;
}

h1 {
  font-size: 2.2rem;
  text-align: center;
  /* 移除了 border-bottom */
  padding-bottom: 0;
  margin-bottom: 0.8rem;
}

/* =========================================
   文章日期与元信息 (更紧凑且契合主题版)
   ========================================= */
.post-date {
  display: table;
  margin: 0 auto 2.5rem auto;
  padding: 0.2rem 1.2rem;
  background-color: #FFFFFF;
  border: none;
  /* 移除了边框 */
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-family: var(--font-base);
  font-style: italic;
  letter-spacing: 1px;
  /* 依靠微弱的阴影勾勒边缘 */
  box-shadow: 0 2px 10px rgba(255, 183, 178, 0.2);
  transition: all 0.3s ease;
}

.post-date:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 183, 178, 0.4);
}

.post-date::before {
  content: "✦";
  color: var(--candy-peach);
  margin-right: 8px;
  font-size: 0.9em;
  font-style: normal;
  /* 保持图标不倾斜 */
}

h2 {
  font-size: 1.6rem;
  border-bottom: 2px solid var(--theme-highlight);
  padding-bottom: 0.3rem;
  display: inline-block;
}

a {
  color: var(--theme-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--theme-primary);
  transition: all 0.3s ease;
}

a:hover {
  background-color: var(--candy-melon);
  color: var(--text-main);
}

.kaiti,
em {
  font-family: var(--font-kaiti);
  font-style: normal;
  color: var(--theme-primary);
  font-size: 1.1em;
}

/* =========================================
   页边注 (纯数字紧凑版)
   ========================================= */
.sidenote-wrapper {
  display: inline;
  counter-increment: sidenote-counter;
}

.margin-toggle {
  display: none;
}

/* 正文中的引用序号（极简纯数字） */
.margin-toggle-label {
  display: inline;
  cursor: pointer;
  color: var(--theme-primary);
  vertical-align: super;
  font-size: 0.8em;
  margin: 0 1px;
  /* 极致压缩左右留白 */
  font-family: sans-serif;
  font-weight: bold;
  transition: opacity 0.2s ease;
}

/* 鼠标悬停时稍微变透明，保留最基础的交互感 */
.margin-toggle-label:hover {
  opacity: 0.7;
}

/* 仅填入纯数字，没有任何修饰 */
.margin-toggle-label::after {
  content: counter(sidenote-counter);
}

/* 桌面端页边注样式 */
.sidenote {
  float: right;
  clear: right;
  margin-right: -300px;
  width: 260px;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-left: 3px solid var(--candy-aqua);
  padding-left: 10px;
  background-color: transparent;
}

/* 页边注内容前面的序号 */
.sidenote::before {
  content: counter(sidenote-counter) " ";
  /* 纯数字加一个空格 */
  color: var(--theme-primary);
  font-size: 1em;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 4px;
  /* 缩小侧边栏编号与文本的间距 */
}

/* =========================================
   移动设备适配 (响应式)
   ========================================= */
@media (max-width: 1050px) {
  .container {
    padding-right: 20px;
    padding-left: 20px;
    max-width: 90%;
  }

  /* 移动端默认隐藏页边注文本 */
  .sidenote {
    display: none;
  }

  /* 点击带有编号的 label 后，显示页边注为内联块 */
  .margin-toggle:checked~.sidenote {
    display: block;
    float: none;
    margin: 1rem 0;
    width: 100%;
    border-left: none;
    border-top: 3px solid var(--candy-aqua);
    padding-left: 0;
    padding-top: 10px;
    background-color: var(--candy-mint);
    border-radius: 0 0 5px 5px;
    padding: 15px;
    box-sizing: border-box;
    color: var(--text-main);
  }
}

/* =========================================
   吐槽 / 内心戏文字块 (Monologue Block)
   ========================================= */
.monologue-block {
  position: relative;
  /* 使用带有极高透明度的薰衣草紫作为底色，代替原来的白底+虚线 */
  background-color: rgba(199, 206, 234, 0.15);
  border: none;
  /* 移除了虚线边框 */
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 1.8rem 0;
  color: var(--text-muted);
  font-size: 0.95em;
  /* 取消内阴影，让色块显得更轻盈 */
  box-shadow: none;
}

/* 右上角的小图标可以适当调淡一点，契合无边框的轻盈感 */
.monologue-block::before {
  content: "💭";
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.2em;
  opacity: 0.3;
}

/* 保证块内段落排版紧凑，去除多余留白 */
.monologue-block p {
  margin: 0;
}

.monologue-block p+p {
  margin-top: 0.8em;
}