/* 強制讓主容器寬度縮減並置中 */
.container {
  max-width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* 針對導航欄保持原狀 (80%) */
nav .container {
  max-width: 80% !important;
}



/* 手機版放寬 */
@media (max-width: 1024px) {

  .container,
  nav .container {
    max-width: 95% !important;
  }
}

/* 確保背景圖或其它區塊不會跑掉 */
#dream-global-bg {
  width: 100%;
}

/* ============================================================
   配色調整：Living Coral (PANTONE 16-1546) 自然系配色
   ============================================================ */

:root,
[data-theme] {
  /* PANTONE 16-1546 Living Coral */
  --color-primary: oklch(71.8% 0.16 35) !important;
  --color-secondary: oklch(65% 0.11 210) !important;
  --color-accent: oklch(50% 0.1 30) !important;

  --btn-color: var(--color-primary) !important;
}

/* 淺色模式：清新自然感 */
html[data-theme="emerald"] {
  --color-base-100: oklch(98.012% 0.00963 16.685 / 0.83) !important;
  --color-base-content: oklch(39.873% 0.05232 210.307) !important;
  --color-primary-content: white !important;
}

/* ============================================================
   深色模式：蒼影のフィルム (Deep Sea Film) 配色
   ============================================================ */
html[data-theme="forest"] {
  /* 背景：Deep Ink (#0F1217) */
  --color-base-100: oklch(14.5% 0.015 250) !important;
  --color-base-200: oklch(18% 0.02 240) !important;

  /* 文字：Fog Aqua (#7BAAAB) 偏白版本 */
  --color-base-content: oklch(88% 0.02 210) !important;

  /* 主色：Fog Aqua (#7BAAAB) */
  --color-primary: oklch(72% 0.04 195) !important;

  /* 次色：Ocean Blue (#27606C) */
  --color-secondary: oklch(45% 0.06 215) !important;

  /* 強調：Soft Shell (#C68D5D) */
  --color-accent: oklch(68% 0.09 65) !important;
}

/* 連結細節 */
.prose a {
  color: var(--color-primary) !important;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
}

.prose a:hover {
  color: var(--color-accent) !important;
  /* 深色模式滑鼠懸停變土地色 */
}

/* 導航欄與卡片調整 */
.navbar,
.card {
  border-color: color-mix(in oklab, var(--color-primary) 15%, transparent) !important;
  transition: all 0.3s ease;
}

/* 卡片懸停 */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* 懸停效果調整 */
.menu li>*:not(.menu-title):hover,
.menu li>details>summary:hover,
nav .group:hover {
  background-color: color-mix(in oklab, var(--color-primary) 50%, transparent) !important;
  color: var(--color-primary-content) !important;
}

nav .group:hover ion-icon,
nav .group:hover span,
nav .group:hover .text-sm {
  color: var(--color-primary-content) !important;
}

/* 商店項目的特殊顏色 (琥珀金) */
.nav-item-store ion-icon {
  color: #bd5a38 !important;
}

.nav-item-store span {
  color: #cc9c8c !important;
}

/* 懸停時恢復為白色 (配合背景變色) */
.nav-item-store:hover ion-icon,
.nav-item-store:hover span {
  color: var(--color-primary-content) !important;
}

/* 深色模式下的懸停效果優化 */
[data-theme="forest"] .card:hover,
[data-theme="forest"] .menu li>*:not(.menu-title):hover,
[data-theme="forest"] nav .group:hover {
  background-color: var(--color-secondary) !important;
  /* 懸停改為深海藍 */
  color: white !important;
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   標題與字體大小調整 
   ============================================================ */

/* 文章內頁 (Single Post) 的大標題鎖定為 60% 左右的大小 */
article#dream-single-post-main h1 {
  font-size: 1.4rem !important;
  margin-bottom: 0.5rem !important;
}

/* 首頁卡片的標題縮小至 80% */
.card-title {
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
}

/* 小標題與裝飾色彩 */
h1,
h2,
h3,
.card-title,
nav .font-semibold {
  color: var(--color-accent) !important;
  /* 使用土黃金色，增加專業且溫潤的質感 */
  font-weight: 700 !important;
}

/* 深色模式下的標題稍微加亮一點點 */
[data-theme="forest"] h1,
[data-theme="forest"] h2,
[data-theme="forest"] h3,
[data-theme="forest"] .card-title,
[data-theme="forest"] nav .font-semibold {
  color: oklch(75% 0.1 65) !important;
}


/* 導航欄固定狀態的背景鎖定 */
nav.bg-base-100 {
  background-color: var(--color-base-100) !important;
  opacity: 1 !important;
  z-index: 50 !important;
}

/* 相關內容縮圖樣式鎖定 */
.related-posts-thumb {
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 120px !important;
  display: block !important;
  border: none !important;
  border-radius: 1rem !important;
}

.related-posts-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 1rem !important;
  filter: blur(1px) brightness(0.8);
  /* 預設毛玻璃效果 */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 滑鼠懸停時變清晰 */
.group:hover .related-posts-thumb img {
  filter: blur(0px) brightness(1);
  transform: scale(1.1);
}

/* 頭像裝飾小點顏色修改 */
.avatar.online::before,
.hover\:avatar-online:hover::before {
  background-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0px oklch(var(--b1)) !important;
}

/* ============================================================
   文章高亮 (Mark) 樣式 - 柔和配色
   ============================================================ */
mark {
  background-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
  color: inherit !important;
  padding: 0.1em 0.1em;
  margin: 0 0.1em;
  border-radius: 4px;
  font-weight: 500;
}

/* ============================================================
   二創免責聲明專用樣式
   ============================================================ */
.prose .disclaimer-red,
.disclaimer-red {
  display: inline-block !important;
  padding: 6px 20px !important;
  border: 2px solid #f87171 !important;
  /* 紅色圓框 (text-red-400) */
  color: #f87171 !important;
  /* 文字顏色 (text-red-400) */
  font-weight: 800 !important;
  /* 超粗體 */
  border-radius: 9999px !important;
  /* 膠囊型圓框 */
  background-color: rgba(248, 113, 113, 0.1) !important;
  /* 稍微加深背景 */
  font-size: 0.95rem !important;
  margin: 10px 0 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
}

/* ============================================================
   目錄懸浮樣式鎖定
   ============================================================ */
.dream-column-sticky {
  position: sticky !important;
  top: 6rem !important;
  height: fit-content !important;
  align-self: flex-start !important;
  max-width: 300px !important;
  width: 100%;
}

/* ============================================================
   現代膠囊式目錄 (TOC) 設計
   ============================================================ */
#TableOfContents ul {
  list-style: none !important;
  padding-left: 1.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



#TableOfContents li {
  margin: 0 !important;
}

#TableOfContents a {
  display: inline-block !important;
  padding: 0.15rem 1rem !important;
  color: var(--color-base-content) !important;
  opacity: 0.7;
  font-size: 0.85rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

/* 懸停效果：淡入 */
#TableOfContents a:hover {
  opacity: 1;
  background-color: color-mix(in oklab, var(--color-primary) 12%, transparent) !important;
  color: var(--color-primary) !important;
  transform: translateX(4px);
}

/* 當前章節高亮 (膠囊型背景) */
#TableOfContents a.menu-active {
  opacity: 1 !important;
  background-color: var(--color-primary) !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: translateX(6px);
}

/* 深色模式下的顏色微調 */
[data-theme="forest"] #TableOfContents a.menu-active {
  background-color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* 鎖定文章內的所有內容區塊在 500px 置中 (包含內文、推薦、分隔線、導航) */
#dream-single-post-main,
#dream-related-posts,
#dream-divider-1,
#dream-divider-2,
#dream-prevnext-nav {
  max-width: 500px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   修正翻轉佈局導致的高度溢出問題 
   ============================================================ */

/* 當處於正面（文章列表）時，隱藏背面內容的溢出，防止其撐開捲軸 */
.flip-container:not(.flip-it) .back {
  max-height: 100vh;
  overflow: hidden;
}

/* 當翻轉到背面（關於我）時，隱藏正面內容的溢出 */
.flip-container.flip-it .front {
  max-height: 100vh;
  overflow: hidden;
}

/* 確保翻轉容器不會因為絕對定位的子元素高度不一而產生佈局異常 */
.flipper {
  height: 100%;
}

/* 針對卡片顏色進行微調：比背景更白、更亮，並增加區隔感 */
/* 移除 !important 以相容於有自定義 cardColor 的卡片 */
html[data-theme="emerald"] .card {
  background-color: #fffcfc;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
   文章年表分類色塊 (Timeline Category Badges)
   ============================================================ */
.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f3f4f6;
  color: #4b5563;
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* 深色模式下的基礎樣式 */
[data-theme='forest'] .category-badge {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

/* 特定分類顏色 (布達佩斯大飯店 - 深底淺字風格) */

/* 雜談: Berry (#EB7E83) */
.category-badge[data-category='雜談'] {
  background-color: #EB7E83 !important;
  border-color: #EB7E83 !important;
  color: #ffffff !important;
}

[data-theme='forest'] .category-badge[data-category='雜談'] {
  background-color: #d16b70 !important;
  /* 深色模式稍微調暗一點點 */
  border-color: #d16b70 !important;
}

/* 原創: Blush (#E1998A) */
.category-badge[data-category='原創'] {
  background-color: #E1998A !important;
  border-color: #E1998A !important;
  color: #ffffff !important;
}

[data-theme='forest'] .category-badge[data-category='原創'] {
  background-color: #c78577 !important;
  border-color: #c78577 !important;
}

/* 名柯 & 每月札記: Taupe (#B88F89) */
.category-badge[data-category='名柯'],
.category-badge[data-category='每月札記'] {
  background-color: #B88F89 !important;
  border-color: #B88F89 !important;
  color: #ffffff !important;
}

[data-theme='forest'] .category-badge[data-category='名柯'],
[data-theme='forest'] .category-badge[data-category='每月札記'] {
  background-color: #a37d78 !important;
  border-color: #a37d78 !important;
}

/* FE3H: Teal (#557B86) */
.category-badge[data-category='FE3H'] {
  background-color: #557B86 !important;
  border-color: #557B86 !important;
  color: #ffffff !important;
}

[data-theme='forest'] .category-badge[data-category='FE3H'] {
  background-color: #486a74 !important;
  border-color: #486a74 !important;
}

/* P5 & 開站感言: Plum (#52495A) */
.category-badge[data-category='P5'],
.category-badge[data-category='開站感言'] {
  background-color: #52495A !important;
  border-color: #52495A !important;
  color: #ffffff !important;
}

[data-theme='forest'] .category-badge[data-category='P5'],
[data-theme='forest'] .category-badge[data-category='開站感言'] {
  background-color: #3f3845 !important;
  border-color: #3f3845 !important;
}