/* ============================================================
   博客园 SimpleMemory 模板 · 自定义美化 CSS v4
   风格：纸张感极简主义 · Paper Minimal
   布局：左栏 fixed 220px | 右区 flex（主内容 + 侧边栏）
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap');

/* ── 变量 ── */
:root {
  --paper:       #f7f4ef;
  --paper-dark:  #ede9e1;
  --ink:         #2c2825;
  --ink-light:   #6b6560;
  --ink-muted:   #9e9890;
  --accent:      #c0392b;
  --accent-soft: #e8d5d3;
  --border:      #ddd8cf;
  --shadow:      rgba(60,50,40,0.08);
  --radius:      4px;
  --serif:       'Noto Serif SC', Georgia, serif;
  --sans:        'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --left-w:      220px;
}

* { box-sizing: border-box; }

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

a { color: var(--ink-light) !important; text-decoration: none !important; transition: color .2s; }
a:hover { color: var(--accent) !important; }

/* ══════════════════════════════════════════
   布局核心
   #home
     #header  → position:fixed 左栏
     #main    → margin-left 让出左栏 + display:flex
       #mainContent  → flex:1 主内容
       #sideBar      → 固定宽度右侧边栏
   #footer    → margin-left 同 #main
   ══════════════════════════════════════════ */

#home {
  background: var(--paper) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ── 左栏：固定定位 ── */
#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--left-w) !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background: var(--paper) !important;
  border-right: 1px solid var(--border) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── 右区：主内容 + 侧边栏并排 ── */
#main {
  margin-left: var(--left-w) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  min-height: 100vh !important;
  padding: 0 !important;
}

/* 主内容 */
#mainContent {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 740px !important;
  padding: 40px 44px !important;
  background: transparent !important;
  border: none !important;
  float: none !important;
}

/* 右侧侧边栏 */
#sideBar {
  flex: 0 0 200px !important;
  width: 200px !important;
  padding: 32px 20px !important;
  border-left: 1px solid var(--border) !important;
  background: transparent !important;
  position: sticky !important;
  top: 0 !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  float: none !important;
}

/* footer */
#footer {
  margin-left: var(--left-w) !important;
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 18px 0 28px !important;
}
#footer a { color: var(--ink-muted) !important; }
#footer a:hover { color: var(--accent) !important; }

/* ══════════════════════════════════════════
   左栏内容
   ══════════════════════════════════════════ */

/* 博客名 */
#blogTitle {
  padding: 32px 22px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}
#blogTitle h1,
#blogTitle h1 a {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: .03em !important;
  line-height: 1.3 !important;
}
#blogTitle h2 {
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  font-weight: 300 !important;
  letter-spacing: .07em !important;
  margin-top: 5px !important;
  font-family: var(--sans) !important;
}

/* 导航 */
#navigator {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  flex-shrink: 0 !important;
}
#navList, #navigator ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#navList li, #navigator li {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
}
#navList li a, #navigator li a {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-light) !important;
  padding: 8px 22px !important;
  border-left: 2px solid transparent !important;
  transition: all .18s !important;
  letter-spacing: .03em !important;
}
#navList li a:hover, #navigator li a:hover {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* 博客统计 */
#blogStats, .blogStats {
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  padding: 12px 22px !important;
  border-top: 1px solid var(--border) !important;
  letter-spacing: .03em !important;
  line-height: 1.9 !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   右侧侧边栏内容
   ══════════════════════════════════════════ */

.sideBarBox {
  margin-bottom: 24px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.sideBarBox .SideBarTitle,
.sideBarBox h3 {
  font-family: var(--serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 7px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

.sideBarBox .sideBarContents {
  font-size: 12px !important;
  color: var(--ink-light) !important;
  line-height: 1.9 !important;
  padding: 0 !important;
}

.sideBarBox ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sideBarBox li {
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--paper-dark) !important;
  font-size: 12px !important;
}
.sideBarBox li:last-child { border-bottom: none !important; }
.sideBarBox li a { color: var(--ink-light) !important; font-size: 12px !important; }
.sideBarBox li a:hover { color: var(--accent) !important; }

/* 个人资料 */
#profile_block {
  font-size: 12px !important;
  color: var(--ink-light) !important;
  line-height: 1.8 !important;
}
#profile_block img {
  border-radius: 50% !important;
  width: 48px !important; height: 48px !important;
  object-fit: cover !important;
  border: 2px solid var(--border) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* 搜索 */
#sidebar_search_box input[type="text"] {
  width: 100% !important;
  background: var(--paper-dark) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  margin-bottom: 5px !important;
}
#sidebar_search_box input[type="button"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
#sidebar_search_box input[type="button"]:hover { background: var(--accent) !important; }

/* 日历 */
#blog-calendar, .calendar {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
}
#blog-calendar th, .calendar th {
  color: var(--ink-muted) !important;
  font-weight: 400 !important;
  padding: 3px 0 !important;
  text-align: center !important;
}
#blog-calendar td, .calendar td {
  text-align: center !important;
  padding: 3px 0 !important;
  color: var(--ink-light) !important;
}
#blog-calendar td a, .calendar td a { color: var(--accent) !important; font-weight: 500 !important; }
.calender_title, .calendar caption {
  font-family: var(--serif) !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  padding: 5px 0 !important;
  text-align: center !important;
}

/* ══════════════════════════════════════════
   文章列表
   ══════════════════════════════════════════ */

.day {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dayTitle {
  font-family: var(--serif) !important;
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  letter-spacing: .08em !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.postTitle {
  border-bottom: 1px solid var(--border) !important;
  padding: 28px 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.postTitle a {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.45 !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.postTitle a:hover { color: var(--accent) !important; }

.c_b_p_desc {
  font-size: 14px !important;
  color: var(--ink-light) !important;
  line-height: 1.85 !important;
  margin: 8px 0 10px !important;
  font-weight: 300 !important;
}

.c_b_p_desc_readmore a {
  font-size: 12px !important;
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent-soft) !important;
}

.postDesc {
  font-size: 12px !important;
  color: var(--ink-muted) !important;
  margin-top: 8px !important;
}
.postDesc a { color: var(--ink-muted) !important; }
.postDesc a:hover { color: var(--accent) !important; }

/* ══════════════════════════════════════════
   文章正文
   ══════════════════════════════════════════ */

#cnblogs_post_body, .cnblogs-markdown {
  font-family: var(--sans) !important;
  font-size: 15.5px !important;
  line-height: 2 !important;
  color: var(--ink) !important;
  font-weight: 300 !important;
}

#cb_post_title_url {
  font-family: var(--serif) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
}

#cnblogs_post_body h1, #cnblogs_post_body h2,
#cnblogs_post_body h3, #cnblogs_post_body h4 {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  margin: 2em 0 .6em !important;
  line-height: 1.4 !important;
}
#cnblogs_post_body h1 { font-size: 22px !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 8px !important; }
#cnblogs_post_body h2 { font-size: 19px !important; }
#cnblogs_post_body h3 { font-size: 16px !important; }
#cnblogs_post_body h4 { font-size: 15px !important; color: var(--ink-light) !important; }
#cnblogs_post_body p  { margin: 0 0 1.2em !important; }

#cnblogs_post_body blockquote {
  border-left: 3px solid var(--accent) !important;
  margin: 1.5em 0 !important;
  padding: 12px 20px !important;
  background: var(--accent-soft) !important;
  color: var(--ink-light) !important;
  font-style: italic !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}

#cnblogs_post_body pre {
  background: #1e1c1a !important;
  color: #d4c9bb !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 18px 22px !important;
  overflow-x: auto !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin: 1.5em 0 !important;
}
#cnblogs_post_body code {
  background: var(--paper-dark) !important;
  color: var(--accent) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-family: 'JetBrains Mono','Fira Code','Courier New',monospace !important;
}
#cnblogs_post_body pre code { background: transparent !important; color: inherit !important; padding: 0 !important; }
#cnblogs_post_body img { max-width: 100% !important; border-radius: var(--radius) !important; box-shadow: 0 4px 18px var(--shadow) !important; margin: 1em auto !important; display: block !important; }
#cnblogs_post_body table { width: 100% !important; border-collapse: collapse !important; margin: 1.5em 0 !important; font-size: 14px !important; }
#cnblogs_post_body th { background: var(--paper-dark) !important; font-weight: 500 !important; padding: 9px 14px !important; border: 1px solid var(--border) !important; }
#cnblogs_post_body td { padding: 8px 14px !important; border: 1px solid var(--border) !important; color: var(--ink-light) !important; }
#cnblogs_post_body tr:nth-child(even) td { background: var(--paper-dark) !important; }
#cnblogs_post_body hr { border: none !important; border-top: 1px solid var(--border) !important; margin: 2.5em auto !important; width: 60% !important; }
#cnblogs_post_body ul, #cnblogs_post_body ol { padding-left: 1.6em !important; margin: .5em 0 1.2em !important; }
#cnblogs_post_body li { margin-bottom: .3em !important; }

/* ══════════════════════════════════════════
   其他
   ══════════════════════════════════════════ */

.postTagBox { font-size: 13px !important; padding: 16px 0 !important; border-top: 1px solid var(--border) !important; margin-top: 32px !important; }
.postTagBox a {
  display: inline-block !important;
  background: var(--paper-dark) !important;
  color: var(--ink-light) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  margin: 3px 4px 3px 0 !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
}
.postTagBox a:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }

#post_next_prev { font-size: 13px !important; padding: 14px 0 !important; border-top: 1px solid var(--border) !important; }

#blog-comments-placeholder { margin-top: 40px !important; }
#tbCommentBody {
  background: var(--paper-dark) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; color: var(--ink) !important;
  font-size: 14px !important; padding: 12px !important;
  width: 100% !important; resize: vertical !important;
}
#tbCommentBody:focus { border-color: var(--accent) !important; outline: none !important; }
#btnSubmitComment input {
  background: var(--ink) !important; color: var(--paper) !important;
  border: none !important; border-radius: var(--radius) !important;
  padding: 8px 20px !important; font-size: 13px !important; cursor: pointer !important;
}
#btnSubmitComment input:hover { background: var(--accent) !important; }

.feedbackItem { border-bottom: 1px solid var(--border) !important; padding: 18px 0 !important; background: transparent !important; }
.feedbackListSubtitle { font-size: 12px !important; color: var(--ink-muted) !important; }

.pager { text-align: center !important; padding: 30px 0 !important; }
.pager a, .pager span {
  display: inline-block !important; padding: 6px 14px !important; margin: 0 3px !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
  font-size: 13px !important; color: var(--ink-light) !important; background: var(--paper) !important;
}
.pager a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.pager .current { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }

#blog_news, #news { font-size: 13px !important; color: var(--ink-light) !important; line-height: 1.8 !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--paper-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
::selection { background: var(--accent-soft) !important; color: var(--accent) !important; }

/* ══════════════════════════════════════════
   响应式
   ══════════════════════════════════════════ */
@media (max-width: 1100px) {
  #sideBar { flex: 0 0 180px !important; width: 180px !important; }
}
@media (max-width: 900px) {
  #header { position: static !important; width: 100% !important; height: auto !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  #main { margin-left: 0 !important; flex-direction: column !important; }
  #mainContent { max-width: 100% !important; padding: 24px 20px !important; }
  #sideBar { flex: none !important; width: 100% !important; border-left: none !important; border-top: 1px solid var(--border) !important; padding: 20px !important; position: static !important; max-height: none !important; }
  #footer { margin-left: 0 !important; }
}