/* =========================================================
   CAMPUS LOVE JOURNAL
   横线本 / 校园手账 / 恋爱档案
   禁深色、禁粉色、禁纯色背景、禁大粗边
   ========================================================= */

ai {
  --paper: #fcfbf5;
  --paper-soft: #f5f3eb;

  --navy: #193b5b;
  --navy-light: #284d6b;

  --wine: #854b57;
  --wine-light: #a36168;

  --gold: #d5b86f;
  --gold-light: #ead8a4;

  --sky: #dcebf1;
  --sky-line: rgba(109, 153, 173, .24);

  --sage: #dfe9df;

  --ink: #36444d;
  --muted: #6f797e;

  display: block;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  padding: 15px 17px 22px;

  color: var(--ink);
  font-size: 14px;
  line-height: 1.85;

  border: 1px solid rgba(70, 85, 94, .20);
  border-radius: 17px;

  /* ==============================
     外层：横线本
     ============================== */

  background:

    /* 纸张顶部淡淡的暖光 */
    radial-gradient(
      ellipse at 50% -15%,
      rgba(235, 208, 153, .33),
      rgba(235, 208, 153, 0) 38%
    ),

    /* 左侧蓝灰纸边 */
    linear-gradient(
      90deg,
      rgba(220, 233, 240, .82) 0,
      rgba(235, 241, 240, .55) 18px,
      rgba(255,255,255,0) 31px
    ),

    /* 横线纸（基准线，周期29px） */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .20) 27px,
      rgba(105, 151, 171, .20) 28px,
      transparent 29px
    ),

    /* 纸张底色 */
    linear-gradient(
      180deg,
      #f4f7f6 0%,
      #fbfaf5 15%,
      #fbfaf5 82%,
      #f1f4f1 100%
    );

  box-shadow:
    0 16px 38px rgba(52, 64, 71, .15),
    0 3px 11px rgba(52, 64, 71, .08);
}


/* =========================================================
   左侧“本子装订区”
   ========================================================= */

ai::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  bottom: 0;
  left: 14px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      rgba(133, 75, 87, .10),
      rgba(133, 75, 87, .27) 12%,
      rgba(133, 75, 87, .27) 88%,
      rgba(133, 75, 87, .08)
    );

  box-shadow:
    5px 0 0 rgba(255,255,255,.28);
}


/* =========================================================
   右上装饰文字
   ========================================================= */

ai::after {
  content: "CAMPUS  /  LOVE  /  JOURNAL";

  position: absolute;
  z-index: 4;

  top: 8px;
  right: 15px;

  color: rgba(25, 59, 91, .30);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.5px;

  pointer-events: none;
}


/* =========================================================
   顶部时间 / 地点 / 天气
   参考图中的深蓝标题牌
   ========================================================= */

ai hd {
  display: block;
  position: relative;
  z-index: 5;

  margin: 18px 20px 20px 29px;
  padding: 13px 17px;

  color: #fff;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    Georgia,
    serif;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .55px;
  text-align: center;

  border: 1px solid rgba(215, 184, 111, .95);
  border-radius: 4px;

  background:
    linear-gradient(
      135deg,
      #183956,
      #244b6a
    );

  box-shadow:
    4px 4px 0 rgba(213, 184, 111, .75),
    0 7px 14px rgba(25,59,91,.13);
}


/* 左右小金线 */

ai hd::before {
  content: "—";

  position: absolute;

  top: 50%;
  left: 10px;

  margin-top: -10px;

  color: var(--gold-light);
  font-size: 16px;
}

ai hd::after {
  content: "✦";

  position: absolute;

  top: 50%;
  right: 11px;

  margin-top: -9px;

  color: var(--gold);
  font-size: 12px;
}


/* =========================================================
   正文：真正的横线笔记纸（横线与背景对齐）
   ========================================================= */

ai arc {
  display: block;
  position: relative;
  z-index: 2;

  margin: 0 30px 21px 35px;
  padding: 64px 28px 28px 52px;

  border: 1px solid rgba(69, 85, 94, .19);
  border-radius: 4px;

  /* 核心：横线本（周期29px，与背景横线一致） */
  background:

    /* 左红色装订线 */
    linear-gradient(
      90deg,
      transparent 0,
      transparent 20px,
      rgba(133,75,87,.18) 21px,
      rgba(133,75,87,.18) 22px,
      transparent 23px
    ),

    /* 横向蓝线（与背景完全一致的周期和颜色） */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .20) 27px,
      rgba(105, 151, 171, .20) 28px,
      transparent 29px
    ),

    #fdfbf5;

  box-shadow:
    0 6px 14px rgba(53, 65, 72, .075);
}


/* 正文纸顶部标题签 */

ai arc::before {
  content: "CAMPUS STORY  ·  恋爱纪事";

  position: absolute;
  z-index: 4;

  top: -1px;
  left: 22px;

  padding: 5px 17px 6px;

  color: #fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;

  border-radius: 0 0 4px 4px;

  background: var(--navy);

  box-shadow:
    3px 3px 0 rgba(213,184,111,.72);
}


/* 右下页码感 */

ai arc::after {
  content: "NO. 01";

  position: absolute;

  right: 12px;
  bottom: 8px;

  color: rgba(25,59,91,.17);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.4px;
}


/* 正文 */

ai arc p {
  position: relative;
  z-index: 3;

  margin: 0 0 15px;

  color: #36444d;

  line-height: 2.08;
  text-align: justify;
}

ai arc p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   正文首字母：杂志感
   ========================================================= */

ai arc p:first-child::first-letter {
  float: left;

  margin-right: 9px;
  margin-top: 4px;

  color: var(--wine);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 46px;
  font-weight: 700;

  line-height: .75;
}


/* =========================================================
   Section：人物 / 契约 / 记忆 / 推荐（折叠动画）
   ========================================================= */

ai > details {
  display: block;
  position: relative;
  z-index: 3;

  margin: 12px 20px 12px 29px;

  overflow: hidden;

  border: 1px solid rgba(71, 87, 96, .18);
  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.86),
      rgba(249,248,241,.91)
    );

  box-shadow:
    0 5px 13px rgba(56, 66, 72, .07);
}

/* 折叠动画：所有直接子元素（除summary）平滑展开/收起 */
ai > details > *:not(summary) {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.5s ease,
    margin-bottom 0.5s ease,
    padding-top 0.5s ease,
    padding-bottom 0.5s ease;
}

ai > details[open] > *:not(summary) {
  max-height: 6000px;  /* 足够大的值，保证内容全部展开 */
}


/* =========================================================
   各章节底色
   ========================================================= */

/* 主角 */

ai > details:nth-of-type(1) {
  border-left: 4px solid var(--wine);

  background:
    linear-gradient(
      180deg,
      #fffdf7,
      #f8f4ec
    );
}


/* 伴侣 */

ai > details:nth-of-type(2) {
  border-left: 4px solid var(--navy);

  background:
    linear-gradient(
      180deg,
      #fffdf7,
      #f0f5f4
    );
}


/* NPC */

ai > details:nth-of-type(3) {
  border-left: 4px solid #6d98a9;

  background:
    linear-gradient(
      180deg,
      #fffdf8,
      #eef5f7
    );
}


/* 契约 */

ai > details:nth-of-type(4) {
  border-left: 4px solid var(--gold);

  background:
    linear-gradient(
      180deg,
      #fffdf5,
      #f7f1dd
    );
}


/* 记忆 */

ai > details:nth-of-type(5) {
  border-left: 4px solid var(--navy);

  background:
    linear-gradient(
      180deg,
      #fffdf7,
      #eff5f2
    );
}


/* 推荐 */

ai > details:nth-of-type(6) {
  border-left: 4px solid var(--wine);

  background:
    linear-gradient(
      180deg,
      #fffdf8,
      #f7f0e9
    );
}


/* =========================================================
   Section 标题（折叠图标改为💞/🔗）
   ========================================================= */

ai summary {
  position: relative;

  padding: 11px 44px 11px 15px;

  color: #fff;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  font-size: 15px;
  font-weight: 800;

  letter-spacing: .45px;

  cursor: pointer;
  list-style: none;

  background: var(--navy);

  transition:
    filter .18s ease;
}

ai summary::-webkit-details-marker {
  display: none;
}

ai summary:hover {
  filter: brightness(1.06);
}


/* 折叠/展开图标 */
ai summary::after {
  content: "💞";                 /* 闭合时显示心心 */

  position: absolute;

  top: 50%;
  right: 12px;

  width: 22px;
  height: 22px;

  margin-top: -11px;

  font-size: 14px;
  line-height: 22px;
  text-align: center;

  transition: transform 0.3s ease;
}

ai details[open] > summary::after {
  content: "🔗";                 /* 展开时显示链接 */
}


/* 不同章节标题配色 */

ai > details:nth-of-type(1) > summary {
  background: var(--wine);
}

ai > details:nth-of-type(2) > summary {
  background: var(--navy);
}

ai > details:nth-of-type(3) > summary {
  background: #587f91;
}

ai > details:nth-of-type(4) > summary {
  color: #384650;
  background: #d8bd78;
}

ai > details:nth-of-type(5) > summary {
  background: #214361;
}

ai > details:nth-of-type(6) > summary {
  background: var(--wine);
}


/* =========================================================
   数据行
   让内容继续保留“横线本”
   ========================================================= */

ai d {
  display: block;

  margin: 7px 13px;

  padding: 7px 9px 8px;

  color: #4e5c64;

  line-height: 1.73;

  border-bottom: 1px solid rgba(104, 148, 167, .19);

  background:
    linear-gradient(
      90deg,
      rgba(220,235,241,.18),
      transparent 78%
    );
}

ai d:hover {
  background:
    linear-gradient(
      90deg,
      rgba(233,216,172,.22),
      transparent 82%
    );
}


/* 字段标签 */

ai f {
  display: inline-block;

  min-width: 38px;

  margin-right: 6px;
  padding: 1px 7px;

  color: #fff;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  font-size: 11px;
  font-weight: 700;

  text-align: center;

  border-radius: 2px;

  background: var(--wine);
}


/* 伴侣区域标签偏蓝 */

ai > details:nth-of-type(2) f {
  background: var(--navy);
}

ai > details:nth-of-type(3) f {
  background: #5f8799;
}

ai > details:nth-of-type(4) f {
  color: #384750;
  background: #d4ba79;
}


/* =========================================================
   g 分组标题
   ========================================================= */

ai g {
  display: block;
  position: relative;

  margin: 23px 13px 15px;

  padding: 27px 4px 5px;

  border-top: 1px solid rgba(74, 94, 104, .19);
}


/* 参考图里的“牌子” */

ai g::before {
  content: attr(t);

  position: absolute;

  top: -1px;
  left: 10px;

  padding: 6px 12px;

  color: #fff;

  font-family:
    Georgia,
    "Noto Serif SC",
    serif;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .85px;

  background: var(--navy);

  box-shadow:
    3px 3px 0 rgba(213,184,111,.80);
}


/* PLOT */

ai > details:nth-of-type(5) g::before {
  background: var(--wine);
}


/* LTM */

ai > details:nth-of-type(5) g:nth-of-type(2)::before {
  background: var(--navy);
}


/* STM */

ai > details:nth-of-type(5) g:nth-of-type(3)::before {
  color: #3f4c53;
  background: #d6bb76;
}


/* =========================================================
   二级 details（同样支持折叠动画）
   ========================================================= */

ai details details {
  margin: 12px;

  overflow: hidden;

  border: 1px solid rgba(68, 87, 97, .17);
  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #f0f5f6,
      #fbfaf4
    );
}

/* 二级折叠动画 */
ai details details > *:not(summary) {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.5s ease,
    margin-bottom 0.5s ease,
    padding-top 0.5s ease,
    padding-bottom 0.5s ease;
}

ai details details[open] > *:not(summary) {
  max-height: 6000px;
}

ai details details summary {
  padding: 10px 39px 10px 13px;

  color: #3b515e;

  background:
    linear-gradient(
      90deg,
      #d9e9ef,
      #e8f0ef
    );
}


/* =========================================================
   记忆表格
   ========================================================= */

ai table {
  width: calc(100% - 2px);

  margin: 5px 1px 2px;

  border-collapse: separate;
  border-spacing: 0;

  overflow: hidden;

  border: 1px solid rgba(68, 87, 97, .20);
  border-radius: 3px;

  color: #42515a;

  background: var(--paper);
}

ai th {
  padding: 8px;

  color: #fff;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    Georgia,
    serif;

  font-size: 12px;
  font-weight: 800;

  text-align: left;

  background: var(--navy);

  border-right: 1px solid rgba(255,255,255,.18);
}

ai th:last-child {
  border-right: 0;
}

ai td {
  padding: 8px;

  vertical-align: top;

  line-height: 1.72;

  border-right: 1px solid rgba(70, 90, 100, .13);
  border-bottom: 1px solid rgba(70, 90, 100, .13);

  /* 表格内部也采用横线纸（周期29px统一） */
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .11) 27px,
      rgba(105, 151, 171, .11) 28px,
      transparent 29px
    ),
    #fcfbf5;
}

ai td:last-child {
  border-right: 0;
}

ai tr:last-child td {
  border-bottom: 0;
}

ai tr:nth-child(even) td {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .10) 27px,
      rgba(105, 151, 171, .10) 28px,
      transparent 29px
    ),
    #f2f5f1;
}

ai td:first-child {
  width: 52px;

  color: var(--wine);

  font-weight: 800;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   行动推荐
   ========================================================= */

ai > details:last-child d {
  position: relative;

  margin: 8px 13px;

  padding: 9px 37px 9px 14px;

  color: #45555e;

  font-family:
    "Noto Serif SC",
    "Songti SC",
    serif;

  border: 1px solid rgba(71, 88, 97, .16);
  border-radius: 3px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .14) 27px,
      rgba(105, 151, 171, .14) 28px,
      transparent 29px
    ),
    #faf8f0;

  cursor: pointer;
}

ai > details:last-child d::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: var(--wine);
}

ai > details:last-child d::after {
  content: "→";

  position: absolute;

  top: 50%;
  right: 12px;

  margin-top: -12px;

  color: var(--wine);

  font-family:
    Georgia,
    serif;

  font-size: 17px;
}

ai > details:last-child d:hover {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 26px,
      rgba(105, 151, 171, .18) 27px,
      rgba(105, 151, 171, .18) 28px,
      transparent 29px
    ),
    #f3eedc;
}


/* =========================================================
   展开状态微调（与动画共存）
   ========================================================= */

ai details[open] {
  padding-bottom: 6px;
}

ai details[open] > summary {
  margin-bottom: 5px;
}


/* =========================================================
   手机端（保持横线统一与动画）
   ========================================================= */

@media (max-width: 520px) {

  ai {
    padding: 11px 10px 18px;

    font-size: 13px;

    border-radius: 13px;
  }

  ai::before {
    left: 9px;
  }

  ai hd {
    margin-left: 19px;
    margin-right: 9px;

    padding: 11px 14px;
  }

  ai arc {
    margin-left: 19px;
    margin-right: 9px;

    padding: 58px 14px 21px 38px;
  }

  ai > details {
    margin-left: 19px;
    margin-right: 9px;
  }

  ai arc p {
    line-height: 2;
  }

  ai th,
  ai td {
    padding: 7px 6px;
    font-size: 11px;
  }

  ai td:first-child {
    width: 45px;
  }
}
/* ===== 隐藏 class="cot" 的思维链 ===== */
ai details.cot {
  display: none !important;
}
/* ============================================================
   直接暴露的 <p> 完整样式（缩进 + 楷体 + 字号 + 左右留白）
   ============================================================ */

ai > p {
  /* 基本样式 */
  font-family: "STKaiti", "KaiTi", "华文楷体", "楷体", "Noto Serif SC", serif;
  text-indent: 2em;
  font-size: 17px !important;
  line-height: 2 !important;

  /* 关键：左右内边距，解决偏左问题 */
  padding-left: 20px !important;
  padding-right: 20px !important;

  /* 重置装饰 */
  margin: 0.5em 0;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: static;
  transform: none;
  transition: none;
}

/* 移除伪元素 */
ai > p::before,
ai > p::after {
  content: none !important;
  display: none !important;
}

/* 取消首字下沉 */
ai > p::first-letter {
  font-size: inherit !important;
  float: none !important;
  line-height: inherit !important;
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
}

/* 取消相邻段落装饰线 */
ai > p + p {
  border-top: none;
  padding-top: 0;
  margin-top: 0.5em;
}

/* PC 端再放大并增加左右边距 */
@media (min-width: 768px) {
  ai > p {
    font-size: 19px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}