@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap');

:root, :root a {
  --main-accent: #38405a;
  --main-accent-hover: #21324c;
  --main-black: #232427;
  --main-gray: #53585f;
  --main-border: #d5d6da;
  --main-bg: #fff;
  --section-bg: #f7f8fa;
  --calendar-th-bg: #ffffff;
  --calendar-holiday-bg: #FDF9F9;
  --calendar-holiday-txt: #f21a1a;
  --calendar-today-bg: #182b50;
  --calendar-today-txt: #38405a;
  --solar-term-bg: #ffd54f;;
  --solar-term-txt: #000;
  --tag-bg: #f5f8fa;
  --tag-txt: #405273;
  --weekend: #d32d2f;
  --seal-red: #c8342f;
  --seal-red-deep: #a02622;
  --seal-gold: #cba130;
  --seal-ink: #2a2a2c;
  --seal-purple: #6a3a8c;
  --seal-bad: #3a2f4a;        /* 凶煞主色：深紫墨黑 */
  --seal-bad-soft: #ede9f2;
  --serif: 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', 'PingFang TC', serif;
}

body {
  background: var(--main-bg);
  color: var(--main-black);
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro TC","PingFang TC","Noto Sans TC",Arial,sans-serif;
  font-size: 17px;
  line-height: 1.67;
}
.navbar, .navbar .dropdown-menu {
  background: var(--main-bg);
  border-bottom: 1px solid var(--main-border);
  box-shadow: 0 2px 16px #dde2ed08;
}
.navbar-brand {
  color: var(--main-accent) !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  font-size: 1.24rem;
}
.navbar-nav .nav-link {
  color: var(--main-gray) !important;
  font-weight: 500;
  margin-right: .7rem;
  font-size: 1.06em;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: var(--main-accent) !important;
  background: #f4f6f9;
  border-radius: 7px;
}
.navbar-toggler { border: none; }
.breadcrumb {
  --bs-breadcrumb-divider: '›';
  color: #6b7b8e;
  margin-top: .5rem;
  margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--main-gray);}
.category-nav {
  gap: .4em;
  overflow-x: auto;
  padding-bottom: 1em;
  margin-bottom: 0.8em;
  scrollbar-width: thin;
  display: flex;
}
.category-btn {
  background: var(--tag-bg);
  color: var(--tag-txt);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.34em 1.1em;
  border: 1px solid #d2d8e5;
  margin-right: 0.25em;
  font-size: .98em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .13s;
}
.category-btn.active, .category-btn:focus {
  background: var(--main-accent);
  color: #fff;
  border-color: var(--main-accent);
}
/* 月曆區塊 panel 外框 */
.calendar-panel {
  background: #fff;
  margin-bottom: 1.4em;
  overflow: hidden;
}

@media (max-width: 991px) {
  .calendar-panel { border-radius: 1.1rem; }
}
/* 月曆表格 */
.calendar.table {
  background: #fff;
    border: 20px solid var(--main-border);
    border-radius: 20px;
  overflow: hidden;
  font-size: 1em;
  color: var(--main-black);
  box-shadow: 0 2px 10px #bdbba619;
  margin-bottom: 1em;
  border-collapse: separate; /* 要用 separate */
  border-spacing: 0px;        /* 去掉間距 */
  border-radius: 12px;      /* 圓角半徑 */
  width: 100%;
  table-layout: fixed;        /* 強制 7 欄等寬，避免行動裝置溢出右側 */
}
.calendar th, .calendar td { width: calc(100% / 7); }
.calendar th {
  background: var(--calendar-th-bg);
  color: var(--main-black) !important;
  font-weight: 700;
  font-size: 1.03em;
  border-bottom: 1px solid var(--main-border);
  text-align: center;
  padding:20px;
}
.calendar th.weekend {
  color: var(--weekend) !important;
}
.calendar td {
  background: #fff;
  min-width: 44px;
  border:1px dashed var(--main-border);
  text-align: center;
  vertical-align: top;
  font-size: 1em;
  padding: 20px 8px;
  position: relative;
  transition: background .13s, color .13s;
  border-radius: 0 !important;
}
/* 整格可點：<a>::before 撐滿整個 td；lunar 文字浮在上層但不攔截點擊 */
.calendar td > a::before {
  content: '';
  position: absolute;
  inset: 0;
}
.calendar td > .lunar,
.calendar td > small {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.calendar tr {
    border:0px solid var(--main-border);
}
/*
.calendar tr:last-child td { border-bottom: none;}
.calendar td:last-child, .calendar th:last-child { border-right: none;}
*/
/* 周末紅字 */
.calendar tr td:first-child,
.calendar tr td:last-child {
  color: var(--weekend) !important;
  font-weight: 600;
}
.calendar th:first-child,
.calendar th:last-child {
  color: var(--weekend) !important;
}
.calendar .lunar {
  font-size: 0.83em;
  color: #92a1ad;
  margin-top: 0.1em;
}
.calendar .today, .calendar td.today {
  background: var(--calendar-today-bg) !important;
  color: var(--calendar-today-txt) !important;
  font-weight: bold;
}

.calendar .foucs_day, .calendar td.foucs_day {
  border: 5px dashed #cc3333 !important;
  font-weight: bold;
}

.calendar td.solar-term {
	border: 2px solid #ffb300;
  background: var(--solar-term-bg) !important;
  color: var(--solar-term-txt) !important;
  font-weight: 900;
}
.calendar td.holiday {
  background: var(--calendar-holiday-bg) !important;
  color: var(--calendar-holiday-txt) !important;
  font-weight: bold;
}
.calendar td.other-month {
  background: #f5f6f8 !important;
  color: #bcbcbc !important;
  /* pointer-events: none; */
}
.calendar td:hover:not(.other-month):not(.today) {
  background: #eaf2f7;
  cursor: pointer;
}

.calendar-banner {
    background-repeat: no-repeat; /*  背景图片不重复 */
  background-size: cover; /*  背景图片覆盖整个元素 */
  background-position: center; /*  背景图片居中显示 */
     display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 內容往下對齊 */
    padding:0 0 15px 0;
}
/* 年月切換排版、按鈕 */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 內容往下對齊 */
  padding-bottom: 0; /* 預設0，必要時可微調 */
  position: relative;
  margin-bottom: 0; /* 若有，去掉外距 */
}
.calendar-toolbar .btn-outline-main {
  min-width: 82px;
  font-size: 1em;
  border-radius: 8px;
  padding: .29em 1.1em;
}
.calendar-toolbar .calendar-selects {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 0.6em;
}
.calendar-toolbar select {
  min-width: 84px;
  text-align: center;
  border-radius: 8px;
  font-weight: 600;
   font-size: 18px; 
  border: 1.1px solid var(--main-border);
  background: #ffffff;
  color: var(--main-accent);
  box-shadow: none;
  outline: none;
    padding:5px 15px;
}

@media (max-width: 600px) {
  .calendar-toolbar .btn-outline-main {
	min-width: 64px;
	padding: .2em .6em;
	font-size: .98em;
  }
  .calendar-toolbar select {
	min-width: 68px;
	font-size: .98em;
  }
  .calendar-toolbar { gap: 0.24em; }

  /* 月曆 mobile 緊縮：避免週六、週日跑出螢幕外 */
  .calendar-col { padding: 0 8px; }
  .calendar.table {
	border-width: 6px;
	font-size: .92em;
	border-radius: 12px;
  }
  .calendar th { padding: 8px 2px; font-size: .9em; }
  .calendar td {
	min-width: 0;
	padding: 8px 2px;
	font-size: .92em;
	overflow: hidden;     /* 防止內容撐爆 */
  }
  .calendar td a { font-size: 1.05em; }
  .calendar .lunar { font-size: .68em; line-height: 1.1; }
  .calendar td > a { display: block; }
}

@media (max-width: 380px) {
  /* 極窄手機（≤ iPhone SE 1）再壓一階 */
  .calendar-col { padding: 0 4px; }
  .calendar.table { border-width: 4px; font-size: .85em; }
  .calendar th { padding: 6px 1px; font-size: .82em; }
  .calendar td { padding: 6px 1px; font-size: .85em; }
  .calendar td a { font-size: 1em; }
  .calendar .lunar { font-size: .62em; }
}
.calendar-today-btn {
  display: flex;
  justify-content: center;
  margin: 1.5em 0 .2em 0;
}
.btn-outline-main {
  border: 1.5px solid var(--main-border);
  color: var(--main-accent);
  background: transparent;
  font-weight: 600;
  transition: background .13s, color .13s;
  letter-spacing: 2px;
  background-color: #FFF;
}
.btn-outline-main:hover, .btn-outline-main:focus {
  background: var(--main-accent-hover);
  color: #fff;
  border-color: var(--main-accent-hover);
}
.detail-section, .related-articles, .shichen-section {
  background: var(--section-bg);
  border-radius: 1rem;
  border: 1.2px solid var(--main-border);
  box-shadow: 0 8px 32px #6d8ba20a;
  padding: 2rem 1.5rem 1.2rem 1.5rem;
  margin-bottom: 1.2rem;
}
.detail-section h1, .detail-section h2 {
  color: var(--main-accent);
  font-weight: 700;
}
.detail-section h2 { font-size: 1.08em; }
.info-table {
  width: 100%;
  margin-top: 1.2em;
  border-collapse: separate;
  border-spacing: 0;
}
.info-table th {
  width: 4.2em;
  font-weight: 600;
  color: var(--main-gray);
  text-align: right;
  background: transparent;
  vertical-align: top;
  padding: .18em .8em .18em 0;
}
.info-table td {
  color: var(--main-black);
  padding: .18em 0 .18em .2em;
}
.related-articles h2 {
  color: var(--main-accent);
  font-size: 1.04em;
  font-weight: 700;
  margin-bottom: .7em;
}
.article-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0.7em 2em;
}
@media (max-width: 900px) { .article-list { grid-template-columns: 1fr; }}
.article-link {
  display: flex;
  align-items: center;
  gap: .85em;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--main-border);
  padding: .65em .85em;
  text-decoration: none;
  color: var(--main-black);
  font-weight: 500;
  transition: box-shadow .14s, background .14s, color .14s, border-color .14s;
  min-height: 0;
}
.article-link:hover {
  box-shadow: 0 6px 20px #38405a22;
  background: #fdfbf7;
  color: var(--main-accent);
  border-color: var(--seal-red);
}
.article-thumb {
  width: 72px; height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1ece1;
  flex-shrink: 0;
  border: 1px solid var(--main-border);
}
.article-main { flex: 1 1 auto; min-width: 0; }
.article-title {
  font-size: .95em;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0.15em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-desc {
  color: #5e748c;
  font-size: 0.84em;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 0.25em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-info {
  display: flex; flex-wrap: wrap; gap: 0.4em 0.8em;
  font-size: 0.78em;
  color: #7693b1; align-items: center;
  margin-top: 0.08em;
}
.article-tags { display: flex; gap: 0.48em;}
.tag {
  background: var(--tag-bg);
  color: var(--tag-txt);
  font-size: 0.91em;
  border-radius: 7px;
  padding: 0.09em 0.75em;
  font-weight: 600;
  border: 1px solid #d2d8e5;
  display: inline-block;
  letter-spacing: 0.03em;
}
.shichen-section h2, .shichen-section h3 { color: var(--main-accent);}
.shichen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7em 1.1em;
  margin-top: 0.7em;
}
@media (max-width: 1100px) {
  .shichen-grid { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 700px) {
  .shichen-grid { grid-template-columns: 1fr;}
}
.shichen-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px #ede3c919;
  padding: 0.55em 0.7em;
  margin-bottom: 0.2em;
  text-align: left;
  border: 1px solid var(--main-border);
  min-height: 78px;
}
.shichen-title { color: var(--main-accent); font-weight: bold;}
.shichen-meta { font-size: 0.91em; color: var(--main-accent);}
.shichen-yi { color: #227c6c; font-size: 0.98em;}
.shichen-ji { color: #b04040; font-size: 0.97em;}
.shichen-chong { font-size: 0.94em; color: #316186;}
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

footer {
  background: #f2f6f9;
  color: #6b7b8e;
  font-size: 1em;
  padding: 2.2em 1em 2.2em 1em;
  text-align: center;
  letter-spacing: 0.04em;
  margin-top: 2.7em;
}
footer a {
  color: var(--main-accent);
  text-decoration: underline;
}
.calendar-col { order: 2; padding:0px 15px; }
.detail-col { order: 1; }
@media (min-width: 992px) {
  .calendar-col { order: 1; }
  .detail-col { order: 2; }
}

.calendar td a {
    text-decoration: none;
    color:#000;
	font-size: 26px;
    font-weight: 900;
}

.calendar td.holiday a {
    color: var(--calendar-holiday-txt) !important;
}
.solar-term .lunar {
    color:#7a5f02;
}

.calendar td.holiday .lunar {
    color:#ff6f6f;
}
.calendar th {
    color:#FFF;
	width:14.285%;
	border:1px dashed var(--main-border);
}

.month_term_table {
    width:100%;
    margin-top: 20px;
    border-top: 1px dashed #b5b5b5;
}

.month_term_table th {
    padding: 10px 0 8px 0;
    letter-spacing: 2px;
    width: auto;
    white-space: nowrap;
}

.month_term_table th span a {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 10px;
    background-color: #cba130;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 2px;
    font-weight: 600;
}

.month_term_table h2 {
    color:#cba130;
}

.month_term_table td {
  font-family: 'Inter', 'Roboto Mono', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0;
  text-align: right;
  padding-left: 8px;
  white-space: nowrap;
}
/* 窄 lg 範圍 (996-1398px)：節氣標籤 padding 收窄、日期 font 變小，避免換行 */
@media (max-width: 1399px) and (min-width: 992px) {
  .month_term_table th span a { padding: 4px 12px; font-size: 13px; }
  .month_term_table td { font-size: 12px; padding-left: 4px; }
}

.month_taiwan_table {
    width:100%;
    margin-top: 20px;
    border-top: 1px dashed #b5b5b5;
}

.month_taiwan_table th.header {
    padding: 10px 0 8px 0;
    letter-spacing: 2px;
    width: auto;
}

.month_taiwan_table th {
    padding: 5px 8px 10px 0;
    letter-spacing: 1px;
    width: auto;
    white-space: nowrap;
    vertical-align: top;
}

.month_taiwan_table td span a {
    width:100%;
    padding:6px 12px;
    border-radius: 8px;
    background-color: #e65532;
    color:#fff;
    text-decoration: none;
    display:block;
    text-align: center;
    margin: 10px 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
}

.month_taiwan_table h2 {
    color:#e65532;
}

.month_taiwan_table td {
    font-size: 13.5px;
    letter-spacing: 1px;
    line-height: 1.6;
    color: var(--main-black);
}

.month_taiwan_table td.desc,
.day_festival_table td.desc {
    padding: 5px 0 10px 0;
    color: var(--main-gray);
}
.holiday-cat {
    display: inline-block;
    color: var(--main-gray);
    font-size: 11.5px;
    letter-spacing: .2em;
    margin-bottom: 3px;
    font-weight: 500;
}
.holiday-desc {
    display: inline-block;
    color: var(--main-black);
    font-size: 13.5px;
    letter-spacing: 1px;
    line-height: 1.6;
}

.month_taiwan_table .date {
  font-family: 'Inter', 'Roboto Mono', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--main-accent);
}

.under {
    border-bottom: 1px dashed #b5b5b5;
}

.datelunar {
    color:#fff;
    padding:5px 10px;
    font-size: 14px;
    border-radius: 5px;
    background-color: #cc3333;
    margin-right: 5px;
}

.month_festival_table {
    width:100%;
    margin-top: 20px;
}

.month_festival_table th.header {
    padding: 10px 0;
    letter-spacing: 2px;
}

.month_festival_table th {
    padding: 10px 0 8px 0;
    letter-spacing: 2px;
    width:30%;
    padding: 5px 0 10px 0;
}

.month_festival_table td a {
    color:#000;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    margin: 10px 0 10px 0;
}

.month_festival_table h2 {
    color:#cc3333;
}

.month_festival_table td {
    font-size: 16px;
    letter-spacing: 2px;
}

.month_festival_table td.desc {
    padding: 5px 0 10px 0;
}

.month_festival_table .date,
.date-iso {
  font-family: 'Inter', 'Roboto Mono', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--main-accent);
}

h1 {
    font-size: 25px;
    letter-spacing: 2px;
}

.month_day_table {
    width:100%;
    margin-top: 20px;
}

.month_day_table th {
    padding: 10px 0 8px 0;
    letter-spacing: 2px;
    width:20%;
    font-size: 18px;
}

.right {
    float: right;
}

.month_day_table td a {
    color:#000;
    line-height: 200%;
}

.month_day_table td {
    font-size: 16px;
    letter-spacing: 1px;
    padding:0 0 0 15px;
}

.yi {
    color:#FFF;
    background-color: #CC3333;
    padding:10px 13px;
    border-radius: 30px;
}

.ji {
    color:#FFF;
    background-color: #3f3f3f;
    padding:10px 13px;
    border-radius: 30px;
}
.opposite {
    color:#FFF;
    background-color: #2c41a3;
    padding:10px 13px;
    border-radius: 30px;
}
.opposite {
    color:#FFF;
    background-color: #2c41a3;
    padding:10px 13px;
    border-radius: 30px;
}
.sha {
    color:#FFF;
    background-color: #8a23c3;
    padding:10px 13px;
    border-radius: 30px;
}
.auspicious {
    color:#FFF;
    background-color: #c85d59;
    padding:5px 0;
    display: block;
    border-radius: 8px;
}
.inauspicious {
    color:#FFF;
    background-color: #6d6969;
    padding:5px 0;
    display: block;
    border-radius: 8px;
}

.month_day_table th {
    text-align: center;
    padding:12px 0;
}

a.yijis, a.gods {
    text-decoration: none;
   border-bottom: 1px dashed #000; 
   padding-bottom: 2px;
    letter-spacing: 2px;
}

.day2_table {
    width:100%;
    letter-spacing: 2px;
}

.day2_table th {
    padding-top:10px;
    border-top: 1px dashed #c5c5c5;
    text-align: center;
    color:#4249bd;
}

.day2_table td {
    padding-bottom: 12px;

    text-align: center;
}

.day_festival_table {
    width:100%;
}

.day_festival_table td span a {
    width:100%;
    padding:5px 10px;
    border-radius: 10px;
    background-color: #e65532;
    color:#fff;
    text-decoration: none;
    display:block;
    text-align: center;
    margin: 10px 0 10px 0;
}

.day_festival_table .date {
  font-family: 'Inter', 'Roboto Mono', sans-serif;
  font-variant-numeric: tabular-nums; 
  font-size: 14px;
  letter-spacing: 1px;
    font-weight: 100;
}

.day_festival_table th {
    letter-spacing: 2px;
    width:30%;
    padding: 5px 0 10px 0;
}

.day_festival_table td {
    padding: 10px 0 8px 0;
    letter-spacing: 2px;
    padding: 5px 0 10px 0;
}

.day_festival_table td a {
    color:#000;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    margin: 10px 0 10px 0;
}

/* =========================================================
   印章美學擴充 — header / footer / 文章頁(festival/yiji/god)
   ========================================================= */

/* ----- 頁首品牌印章 ----- */
.navbar {
  padding-top: .85rem;
  padding-bottom: .85rem;
  background: #fff;
  border-bottom: 1px solid var(--main-border);
  position: relative;
}
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0,
    var(--seal-red) 12%,
    var(--seal-gold) 50%,
    var(--seal-red) 88%,
    transparent 100%);
  opacity: .55;
}
.navbar-brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.32rem !important;
  letter-spacing: .22em !important;
  color: var(--main-accent) !important;
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
}
.navbar-brand .brand-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--seal-red);
  color: #fff;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0;
  border-radius: 6px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 3px rgba(168,40,38,.25);
}
.navbar-brand .brand-seal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 3px;
}
.brand-text-zh { font-weight: 700; }
.brand-text-en {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .35em;
  color: var(--main-gray);
  font-weight: 500;
  text-transform: uppercase;
  margin-left: .15em;
  display: none;
}
@media (min-width: 576px) {
  .brand-text-en { display: inline; }
}

.navbar .nav-link {
  font-family: var(--serif);
  font-size: 1rem !important;
  letter-spacing: .18em;
  color: var(--main-gray) !important;
  padding: .4rem .9rem !important;
  border-radius: 6px;
  position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--seal-red) !important;
  background: transparent !important;
}
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: var(--seal-red);
  border-radius: 1px;
}

/* ----- 麵包屑微調 ----- */
.breadcrumb {
  font-family: var(--serif);
  font-size: .92rem;
  letter-spacing: .14em;
  padding: 1.1rem 0 .8rem;
  margin-top: 0;
}
.breadcrumb a {
  color: var(--main-gray);
  text-decoration: none;
  transition: color .14s;
}
.breadcrumb a:hover { color: var(--seal-red); }
.breadcrumb span { color: #b9bbc4; margin: 0 .35em; }
.breadcrumb > span:last-child {
  color: var(--main-accent);
  font-weight: 600;
  margin: 0;
}

/* ----- 文章頁 hero(印章標題區) ----- */
.article-hero {
  position: relative;
  background:
    linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
  border: 1px solid var(--main-border);
  border-radius: 14px;
  padding: 2.2rem 2rem 1.8rem;
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--hero-accent, var(--seal-red));
}
.article-hero::after {
  /* 右上角篆字水印感 */
  content: attr(data-watermark);
  position: absolute;
  right: -.15em; top: -.05em;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 11rem;
  line-height: 1;
  color: var(--hero-accent, var(--seal-red));
  opacity: .045;
  pointer-events: none;
  letter-spacing: 0;
  user-select: none;
}
.article-hero-eyebrow {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .42em;
  color: var(--main-gray);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  text-indent: .42em;
}
.article-hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--hero-accent, var(--seal-red));
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.article-hero-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--main-border), transparent);
}

.article-seal-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  position: relative;
  z-index: 1;
}
.article-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px; height: 86px;
  background: var(--seal-bg, var(--seal-red));
  color: #fff;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 2.6rem;
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.22),
    0 4px 14px rgba(0,0,0,.10);
  transform: rotate(-2deg);
}
.article-seal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,.42);
  border-radius: 5px;
}
.article-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.10), transparent 55%);
  border-radius: 10px;
  pointer-events: none;
}

.article-hero h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--main-black);
  margin: 0;
  line-height: 1.45;
}
.article-hero h1 .subtitle {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--main-gray);
  margin-top: .45rem;
}

.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.3rem;
  position: relative;
  z-index: 1;
}
.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem 1rem;
  background: var(--meta-bg, #fdf2f0);
  color: var(--meta-color, var(--seal-red-deep));
  border: 1px solid var(--meta-border, #ecc8c4);
  border-radius: 999px;
  font-size: .9rem;
  letter-spacing: .14em;
  font-weight: 600;
  font-family: var(--serif);
}
.meta-tag .meta-label {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--main-gray);
  border-right: 1px solid var(--meta-border, #ecc8c4);
  padding-right: .55rem;
  margin-right: .15rem;
}

/* 主題色變體 */
.hero-festival,
.hero-yi {
  --hero-accent: var(--seal-red);
  --seal-bg: var(--seal-red);
  --meta-bg: #fdf2f0;
  --meta-color: var(--seal-red-deep);
  --meta-border: #ecc8c4;
}
.hero-ji {
  --hero-accent: var(--seal-ink);
  --seal-bg: var(--seal-ink);
  --meta-bg: #f1f1f3;
  --meta-color: var(--seal-ink);
  --meta-border: #cfcfd4;
}
.hero-god {
  --hero-accent: var(--seal-gold);
  --seal-bg: var(--seal-gold);
  --meta-bg: #fbf3dd;
  --meta-color: #8a6c0f;
  --meta-border: #e6d18a;
}
.hero-god-bad {
  --hero-accent: var(--seal-bad);
  --seal-bg: var(--seal-bad);
  --meta-bg: var(--seal-bad-soft);
  --meta-color: var(--seal-bad);
  --meta-border: #d4cce0;
}

/* ----- 文章內文面板 ----- */
.article-body {
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 14px;
  padding: 2.2rem 2.2rem 1.8rem;
  position: relative;
}
.article-body::before {
  /* 內側虛線裝飾框 */
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed #e3e5ea;
  border-radius: 8px;
  pointer-events: none;
}
.article-body > * {
  position: relative;
}
.article-content {
  font-size: 1.04rem;
  line-height: 1.95;
  color: var(--main-black);
  letter-spacing: .04em;
}
.article-content > *:first-child { margin-top: 0; }
.article-content > *:last-child { margin-bottom: 0; }
.article-content p {
  margin: 0 0 1.75rem;
  text-align: justify;
}
.article-content p + p { margin-top: 0; }
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--serif);
  color: var(--main-accent);
  letter-spacing: .12em;
  margin: 2rem 0 .9rem;
  position: relative;
}
.article-content h2 {
  font-size: 1.38rem;
  padding-left: 1rem;
  border-left: 4px solid var(--hero-accent, var(--seal-red));
}
.article-content h3 {
  font-size: 1.18rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--main-border);
}
.article-content h4 {
  font-size: 1.05rem;
  color: var(--seal-red-deep);
}
.article-content ul,
.article-content ol {
  margin: 0 0 2rem;             /* UL 結束 → 下一個 P 之間 */
  padding-left: 1.6rem;
}
.article-content li {
  margin-bottom: 1.4rem;        /* LI 之間 */
  padding-left: .15rem;
}
.article-content li:last-child { margin-bottom: 0; }
/* LI 內 P 自身要有適度上下緩衝(模擬段落間距，但不重疊 LI 邊距) */
.article-content li > p { margin: 0 0 1rem; }
.article-content li > p:last-child { margin-bottom: 0; }
.article-content li > ul,
.article-content li > ol {
  margin-top: .8rem;
  margin-bottom: 0;
}
.article-content blockquote {
  border-left: 3px solid var(--hero-accent, var(--seal-red));
  background: var(--section-bg);
  padding: 1rem 1.4rem;
  margin: 1.4rem 0;
  color: var(--main-gray);
  font-style: normal;
  border-radius: 0 6px 6px 0;
  font-family: var(--serif);
  letter-spacing: .08em;
}
.article-content a {
  color: var(--seal-red-deep);
  text-decoration: none;
  border-bottom: 1px dashed var(--seal-red-deep);
  padding-bottom: 1px;
}
.article-content a:hover {
  background: #fdf2f0;
  color: var(--seal-red);
}
.article-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: .96rem;
  border: 1px solid var(--main-border);
  border-radius: 8px;
  overflow: hidden;
}
.article-content th,
.article-content td {
  padding: .7rem 1rem;
  border-bottom: 1px dashed var(--main-border);
  text-align: left;
}
.article-content th {
  background: var(--section-bg);
  font-family: var(--serif);
  letter-spacing: .1em;
  color: var(--main-accent);
}
.article-content tr:last-child td { border-bottom: none; }

/* ----- 統一側邊欄(印章美學) ----- */
.sidebar-card {
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.2rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.sidebar-card-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--main-accent);
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px dashed var(--main-border);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.sidebar-card-title::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--seal-red);
  border-radius: 1px;
}
.sidebar-quick-links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sidebar-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--section-bg);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  color: var(--main-accent);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .14em;
  transition: all .15s ease;
}
.sidebar-quick-link::after {
  content: '→';
  color: var(--main-gray);
  font-family: 'Inter', sans-serif;
  transition: transform .18s ease, color .15s;
}
.sidebar-quick-link:hover {
  background: var(--main-accent);
  color: #fff;
  border-color: var(--main-accent);
}
.sidebar-quick-link:hover::after {
  color: #fff;
  transform: translateX(4px);
}

/* mini 推薦文章重新做 */
.sidebar-card .article-list-mini {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .25rem;
}
.sidebar-card .article-list-mini > a {
  display: flex !important;
  align-items: center;
  gap: .85rem;
  padding: .7rem;
  background: var(--section-bg);
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none !important;
  color: var(--main-black) !important;
  margin-bottom: 0 !important;
  transition: all .15s;
}
.sidebar-card .article-list-mini > a:hover {
  background: #fff;
  border-color: var(--seal-red);
  color: var(--main-accent) !important;
}
.sidebar-card .article-list-mini img {
  width: 78px !important; height: 78px !important;
  border-radius: 6px !important;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 !important;
  border: 1px solid var(--main-border);
  background: #f1ece1;
}
.sidebar-card .article-list-mini .small {
  font-size: .94rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ----- 主標題印章字型(首頁/日頁) ----- */
.detail-section h1,
.detail-col h1 {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: .14em;
  color: var(--main-accent);
  position: relative;
  padding-bottom: .85rem;
  margin-bottom: 1.2rem;
}
.detail-section h1::after,
.detail-col h1::after {
  content: '';
  display: block;
  width: 44px; height: 3px;
  background: var(--seal-red);
  margin-top: .9rem;
  border-radius: 1px;
}

/* 區塊小標(節氣/節日表頭)字型統整 */
.month_term_table h2,
.month_taiwan_table h2,
.month_festival_table h2 {
  font-family: var(--serif);
  letter-spacing: .14em;
  font-size: 1.05rem;
}

/* ----- 統一頁尾(印章美學) ----- */
footer.site-footer {
  background: #faf9f6;
  border-top: 1px solid var(--main-border);
  padding: 2.6rem 1rem 2.2rem;
  text-align: center;
  margin-top: 3rem;
  position: relative;
}
footer.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0,
    var(--seal-red) 12%,
    var(--seal-gold) 50%,
    var(--seal-red) 88%,
    transparent 100%);
  opacity: .55;
}
.site-footer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--seal-red);
  color: #fff;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.18rem;
  border-radius: 6px;
  margin-bottom: .9rem;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
  position: relative;
}
.site-footer-mark::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 3px;
}
.site-footer-brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--main-accent);
  margin-bottom: .35rem;
  text-indent: .35em;
}
.site-footer-meta {
  font-size: .9rem;
  color: var(--main-gray);
  letter-spacing: .08em;
  margin-bottom: .15rem;
}
.site-footer-meta a {
  color: var(--main-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--main-accent);
}
.site-footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: .92rem;
  letter-spacing: .15em;
}
.site-footer-nav a {
  color: var(--main-accent);
  text-decoration: none;
  padding: .25rem .6rem;
  border-radius: 6px;
  transition: background .14s, color .14s;
}
.site-footer-nav a:hover {
  background: var(--main-accent);
  color: #fff;
}
.site-footer-nav span {
  color: var(--main-border);
}

/* ----- RWD ----- */
@media (max-width: 768px) {
  .article-hero {
    padding: 1.7rem 1.3rem 1.5rem;
  }
  .article-hero::after { font-size: 8rem; }
  .article-seal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .article-hero h1 { font-size: 1.5rem; }
  .article-seal {
    width: 70px; height: 70px;
    font-size: 2.1rem;
  }
  .article-body { padding: 1.5rem 1.4rem; }
  .article-body::before { inset: 8px; }
}

/* =========================================================
   navbar：桌機品牌絕對置中、nav-quick 分散兩側
                手機收進 collapse、保留同樣 nav-quick 風格直向堆疊
   ========================================================= */
.site-navbar .navbar-bar {
  position: relative;
  align-items: center;
}
.site-navbar .navbar-brand {
  margin: 0 !important;
  z-index: 2;
}

/* nav-quick 卡片 */
.nav-quick {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  padding: .35rem .9rem .4rem;
  border-radius: 8px;
  border: 1px dashed transparent;
  transition: background .15s, border-color .15s;
  line-height: 1.15;
}
.nav-quick.nav-quick-right { align-items: flex-end; }
.nav-quick:hover {
  background: #fdf2f0;
  border-color: var(--seal-red);
}
.nav-quick-label {
  font-family: var(--serif);
  font-size: .68rem;
  letter-spacing: .35em;
  color: var(--main-gray);
  text-indent: .35em;
  margin-bottom: .15rem;
}
.nav-quick-value {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--main-accent);
}
.nav-quick-value em {
  font-style: normal;
  color: var(--seal-red);
  margin-left: .35em;
  font-size: .92em;
}

/* ----- 桌機 (≥992px) ----- */
@media (min-width: 992px) {
  .site-navbar .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-navbar .navbar-quicks {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
  }
  .site-navbar .navbar-toggler { display: none; }
}

/* ----- 手機 (<992px) ----- */
@media (max-width: 991px) {
  .site-navbar .navbar-bar {
    flex-wrap: wrap;
  }
  .site-navbar .navbar-quicks {
    flex-basis: 100%;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--main-border);
    display: none;
    flex-direction: column;
    gap: .55rem;
  }
  .site-navbar .navbar-quicks.show {
    display: flex !important;
  }
  .site-navbar .nav-quick,
  .site-navbar .nav-quick.nav-quick-right {
    width: 100%;
    align-items: flex-start;
    background: var(--section-bg);
    border-color: var(--main-border);
    padding: .65rem .95rem;
  }
  .site-navbar .nav-quick:hover {
    background: #fdf2f0;
    border-color: var(--seal-red);
  }
  .site-navbar .navbar-toggler {
    border: 1px dashed var(--main-border);
    padding: .35rem .55rem;
    border-radius: 6px;
  }
  .site-navbar .navbar-toggler:focus { box-shadow: none; }
}

/* =========================================================
   today strip — sticky 不接，跟著頁面捲；navbar 永遠在上
   ========================================================= */
.today-strip {
  background:
    linear-gradient(to right, #faf6ee 0%, #fffaf2 50%, #faf6ee 100%);
  border-bottom: 1px solid var(--main-border);
  font-family: var(--serif);
  font-size: .9rem;
  padding: .55rem 0;
  position: relative;
}
.today-strip::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0,
    var(--seal-gold) 35%,
    var(--seal-red) 65%,
    transparent 100%);
  opacity: .35;
}

.today-strip-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  letter-spacing: .08em;
}

.today-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--seal-red);
  color: #fff;
  padding: .22rem .85rem .25rem;
  font-size: .72rem;
  letter-spacing: .35em;
  border-radius: 3px;
  font-weight: 700;
  text-indent: .35em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  flex-shrink: 0;
}

.today-date  { color: var(--main-black); font-weight: 700; }
.today-week  { color: var(--seal-red); font-style: normal; margin-left: .35rem; }

.today-divider {
  width: 1px;
  height: 14px;
  background: var(--main-border);
  flex-shrink: 0;
}

.today-mini-label {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--main-gray);
  margin-right: .4rem;
  text-indent: .3em;
}
.today-mini-yi { color: var(--seal-red);  font-weight: 700; }
.today-mini-ji { color: var(--seal-ink);  font-weight: 700; }

.today-lunar { color: var(--main-accent); font-weight: 600; }
.today-term  { color: var(--seal-gold); font-weight: 700; }
.today-yi    { color: var(--seal-red-deep); font-weight: 600; }
.today-ji    { color: var(--main-black); font-weight: 600; }

.today-cta {
  margin-left: auto;
  color: var(--main-accent);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .18em;
  border-bottom: 1px dashed var(--main-accent);
  padding-bottom: 1px;
  font-size: .88rem;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.today-cta:hover {
  color: var(--seal-red);
  border-bottom-color: var(--seal-red);
}

/* RWD：平板以下，今日 strip 內容濃縮 */
@media (max-width: 768px) {
  .today-strip { font-size: .85rem; padding: .5rem 0; }
  .today-strip-inner { gap: .55rem; }
  .today-mini-label { letter-spacing: .2em; margin-right: .25rem; }
  .today-yi, .today-ji,
  .today-strip-inner .today-divider:nth-of-type(n+3) { display: none; }
  .today-cta { font-size: .82rem; letter-spacing: .12em; }
}
@media (max-width: 480px) {
  .today-term, .today-divider:nth-of-type(2) { display: none; }
  .today-strip-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .today-strip-inner::-webkit-scrollbar { display: none; }
}

/* =========================================================
   後續優化：右欄不撐高、推薦文章在月曆欄不擠、Header 放大
   ========================================================= */

/* 右側資訊欄高度依內容而定，不被左欄拉長 */
.row.g-4 > .detail-col,
.row.g-4 > .col-lg-4.detail-section {
  align-self: flex-start;
}

/* 推薦文章在月曆欄(col-lg-8) 內：放寬到 lg 才開兩欄，桌機保持 1 欄不擠 */
.calendar-col .article-list {
  grid-template-columns: 1fr;
  gap: .6em;
}
.calendar-col .related-articles {
  margin-top: 1.5rem;
  background: var(--section-bg);
  border: 1px solid var(--main-border);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.2rem;
}
.calendar-col .related-articles h2 {
  font-family: var(--serif);
  letter-spacing: .22em;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px dashed var(--main-border);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.calendar-col .related-articles h2::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--seal-red);
  border-radius: 1px;
}

/* 寬螢幕(≥1400px) 月曆欄夠寬，再切回兩欄 */
@media (min-width: 1400px) {
  .calendar-col .article-list { grid-template-columns: repeat(2, 1fr); }
}

/* Header 放大字級 */
.navbar-brand {
  font-size: 1.5rem !important;
}
.navbar-brand .brand-seal {
  width: 42px; height: 42px;
  font-size: 1.2rem;
}
.nav-quick {
  padding: .4rem 1rem .45rem;
}
.nav-quick-label {
  font-size: .75rem;
  letter-spacing: .38em;
}
.nav-quick-value {
  font-size: 1.18rem;
  letter-spacing: .12em;
}

/* =========================================================
   A11y skip-to-content + year-page + upcoming-list 樣式
   ========================================================= */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--main-accent);
  color: #fff;
  padding: .65rem 1.2rem;
  border-radius: 0 0 8px 0;
  font-family: var(--serif);
  letter-spacing: .15em;
  z-index: 9999;
  text-decoration: none;
}
.skip-to-content:focus {
  left: 0;
  outline: 3px solid var(--seal-gold);
  outline-offset: 2px;
}

/* term 季節分組 */
.term-season-block + .term-season-block { margin-top: .9rem; }
.term-season-title {
  font-family: var(--serif);
  font-size: .95rem;
  margin: 0 0 .45rem;
  padding: .15rem .55rem;
  display: inline-block;
  color: var(--seal-red);
  border: 1px solid var(--main-border);
  border-radius: 4px;
  letter-spacing: .04em;
}
.upcoming-list li.term-self {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  background: rgba(200,52,47,.06);
  border: 1px dashed var(--seal-red);
  border-radius: 6px;
  font-weight: 600;
}

/* upcoming list (yiji/god 側邊近三月) */
.upcoming-card { border-color: var(--main-border); }
.upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.upcoming-list li { margin: 0; }
.upcoming-list a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  background: var(--section-bg);
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--main-black);
  transition: all .15s;
}
.upcoming-list a:hover {
  background: #fff;
  border-color: var(--seal-red);
}
.upcoming-list .date-iso {
  flex-shrink: 0;
  white-space: nowrap;
}
.upcoming-list .datelunar {
  white-space: nowrap;
  flex-shrink: 0;
}
.upcoming-week {
  font-family: var(--serif);
  font-size: .82rem;
  color: var(--seal-red);
  letter-spacing: .04em;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.upcoming-lunar {
  font-family: var(--serif);
  color: var(--main-accent);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* upcoming list 農曆純文字（像 day 頁），不用紅徽章 */
.upcoming-lunar-plain {
  font-family: var(--serif);
  color: var(--main-accent);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* day-card：用「詳」按鈕 hover/focus 觸發，不再卡到主連結 */
.upcoming-list li {
  position: relative;
  z-index: 1;             /* 預設低層級 */
}
/* hover 觸發按鈕時，把該 LI 拉到最上層，popup 不會被下面項目蓋 */
.upcoming-list li:has(.dc-trigger:hover),
.upcoming-list li:has(.dc-trigger:focus-within) {
  z-index: 50;
}
.upcoming-list .upcoming-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-right: .35rem;
}
.dc-trigger {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
}
.dc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 22px;
  border-radius: 6px;
  background: #fff;
  border: 1px dashed var(--main-border);
  color: var(--main-gray);
  font-family: var(--serif);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  padding: 0 4px;
  transition: all .14s;
}
.dc-toggle:hover,
.dc-toggle:focus-visible {
  background: var(--seal-red);
  color: #fff;
  border-color: var(--seal-red);
  outline: none;
  transform: translateY(-50%) scale(1.05); /* keep vertical center */
}
.upcoming-list li {
  /* 給 trigger button 留位置 */
  padding-right: 2.2rem;
}
.upcoming-list .upcoming-link { padding-right: 0; }
.day-card {
  display: none;
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  width: 230px;
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 10px;
  padding: .85rem 1rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
  z-index: 100;
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: .03em;
}
/* 只有 hover/focus i 按鈕才開,且 hover 卡片本身可保持 */
.dc-trigger:hover .day-card,
.dc-trigger:focus-within .day-card { display: block; }
.day-card::after {
  /* 右指向小三角 */
  content: '';
  position: absolute;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #fff;
  filter: drop-shadow(2px 0 1px rgba(0,0,0,.06));
}
/* 已移到 .dc-trigger:hover/.focus-within，這裡保留 fallback 給沒按鈕的舊版 */
.dc-header {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-bottom: .55rem;
  margin-bottom: .55rem;
  border-bottom: 1px dashed var(--main-border);
}
.dc-date {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--main-accent);
  letter-spacing: .04em;
}
.dc-week {
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--seal-red);
  font-weight: 700;
}
.dc-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .2rem 0;
}
.dc-row-list { flex-direction: column; gap: .15rem; }
.dc-label {
  flex-shrink: 0;
  font-family: var(--serif);
  color: var(--main-gray);
  letter-spacing: .12em;
  font-size: .78rem;
  min-width: 2.6em;
}
.dc-val {
  font-family: var(--serif);
  color: var(--main-black);
  font-weight: 600;
}
.dc-yi-tag {
  display: inline-block;
  background: var(--seal-red);
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .72rem;
  letter-spacing: .15em;
  margin-right: .35rem;
  font-weight: 700;
}
.dc-ji-tag {
  display: inline-block;
  background: var(--seal-ink);
  color: #fff;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .72rem;
  letter-spacing: .15em;
  margin-right: .35rem;
  font-weight: 700;
}
.dc-empty {
  color: var(--main-gray);
  font-style: italic;
}
.dc-row-list .dc-label {
  display: block;
  min-width: 0;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--main-black);
  font-family: var(--serif);
  font-weight: 500;
}

/* 平板以下：popup 改顯示在下方而不是右側 */
@media (max-width: 991px) {
  .day-card {
    top: calc(100% + 10px);
    right: auto;
    left: 0;
    transform: none;
    width: min(280px, 90vw);
  }
  .day-card::after {
    top: auto; bottom: 100%;
    left: 24px;
    transform: none;
    border-color: transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -2px 1px rgba(0,0,0,.06));
  }
}

/* fest-row：festival_month / festivals_year 的單列佈局（li 內含獨立連結） */
.year-day-list li.fest-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .55rem .75rem;
  background: var(--section-bg);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .15s;
  margin-bottom: 0;
}
.year-day-list li.fest-row:hover {
  background: #fff;
  border-color: var(--seal-red);
}
/* 重設 fest-row 內 anchor，避免吃到 .year-day-list a 的 box 樣式 */
.year-day-list li.fest-row a,
.year-day-list li.fest-row a:hover {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.year-day-list li.fest-row .date-iso {
  flex-shrink: 0;
  color: var(--main-accent);
  text-decoration: none;
}
.year-day-list li.fest-row .year-day-meta { flex-shrink: 0; }
.year-day-list li.fest-row .datelunar {
  flex-shrink: 0;
  white-space: nowrap;
}
.year-day-list li.fest-row .fest-name {
  flex: 1 1 auto;
  min-width: 8em;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--main-black);
}
/* 內層連結 hover 不再加紅邊框，由 li.fest-row hover 統一處理外框 */
.year-day-list li.fest-row .date-iso:hover,
.year-day-list li.fest-row .fest-name:hover { color: var(--seal-red-deep); }

/* festival sidebar：含節日名稱時讓名稱佔剩餘空間 + 省略 */
.upcoming-list .fest-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--main-black);
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
/* festival 名稱（與首頁 month_festival_table td a 同樣風格） */
.fest-name {
  color: #000;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  flex: 1 1 auto;
  line-height: 1.4;
}
.upcoming-list a:hover .fest-name { color: var(--seal-red-deep); }
.upcoming-empty {
  color: var(--main-gray);
  font-size: .92rem;
  margin: 0;
  padding: .8rem 0;
  text-align: center;
  font-style: italic;
}
.upcoming-more {
  margin: 1rem 0 0;
  text-align: center;
}
.upcoming-more .sidebar-quick-link {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* year page grid */
.year-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--section-bg);
  border: 1px dashed var(--main-border);
  border-radius: 10px;
}
.year-form {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.year-form-label {
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--main-gray);
}
.year-form select {
  font-family: var(--serif);
  padding: .35rem .8rem;
  border: 1px solid var(--main-border);
  border-radius: 6px;
  background: #fff;
  color: var(--main-accent);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .1em;
}
.year-summary {
  margin: 0 0 0 auto;
  font-size: .92rem;
}
.year-summary a {
  color: var(--main-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--main-accent);
}
.year-summary a:hover { color: var(--seal-red); border-color: var(--seal-red); }

.year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 992px) { .year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .year-grid { grid-template-columns: 1fr; } }

.year-month {
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  position: relative;
}
.year-month.is-empty {
  background: #fbfaf6;
  opacity: .65;
}
.year-month-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--main-accent);
  margin: 0 0 .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed var(--main-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.year-month-count {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--seal-red);
  background: #fdf2f0;
  padding: .15rem .55rem;
  border-radius: 999px;
}
.year-month.is-empty .year-month-count {
  color: var(--main-gray);
  background: #f0f0f0;
}
.year-month-empty {
  color: var(--main-gray);
  font-size: .9rem;
  margin: 0;
  font-style: italic;
}
.year-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.year-day-list a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  background: var(--section-bg);
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--main-black);
  transition: all .15s;
}
.year-day-list a:hover {
  background: #fff;
  border-color: var(--seal-red);
}
.year-day-list a .date-iso { flex-shrink: 0; }
.year-day-meta {
  font-family: var(--serif);
  font-size: .82rem;
  color: var(--main-gray);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.year-day-lunar {
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--main-accent);
  font-weight: 600;
  flex: 1 1 auto;
}
.year-day-term {
  background: var(--seal-gold);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-weight: 600;
}

.year-summary-card {
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  margin-top: 1.5rem;
}
.year-summary-card h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .15em;
  color: var(--main-accent);
  margin: 0 0 .8rem;
}
.year-summary-card p {
  color: var(--main-black);
  line-height: 1.8;
  margin-bottom: 1rem;
}
/* festivals-intro：頂部摘要卡(替代原本的 hero) */
.festivals-intro {
  margin-top: 0;
  background: linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
  border-left: 4px solid var(--seal-red);
  border-radius: 10px;
  padding: 1.6rem 1.8rem 1.4rem;
}
.festivals-intro h1 {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .12em;
  color: var(--main-accent);
  margin: 0 0 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--main-border);
}
.festivals-intro p {
  font-size: 1.02rem;
  color: var(--main-black);
  line-height: 1.85;
  letter-spacing: .03em;
}
.festivals-intro a {
  color: var(--seal-red);
  text-decoration: none;
  border-bottom: 1px dashed var(--seal-red);
}
.festivals-intro a:hover {
  background: #fdf2f0;
  color: var(--seal-red-deep);
}

/* 節日 / 神明 類別徽章 + section header */
.fest-type-tag {
  display: inline-block;
  padding: .08em .45em;
  border-radius: 4px;
  font-size: .68rem;
  letter-spacing: .15em;
  margin-left: .35rem;
  vertical-align: middle;
  font-weight: 700;
}
.fest-type-tag.fest-type-l { background: #e65532; color: #fff; }
.fest-type-tag.fest-type-b { background: var(--seal-red); color: #fff; }
.fest-type-tag.fest-type-s { background: var(--main-accent); color: #fff; }
.fest-name.fest-type-s { color: var(--main-accent); }
.fest-name.fest-type-l { color: #b54d2c; }
.fest-name.fest-type-b { color: var(--seal-red-deep); }

.fest-section { margin-top: 2.4rem; }
.fest-section .section-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .18em;
  color: var(--main-accent);
  margin: 0 0 .35rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--main-border);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.section-title-solar::before {
  content: '國';
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--main-accent); color: #fff;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 700;
}
.section-title-lunar::before {
  content: '農';
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--seal-red); color: #fff;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 700;
}
.section-intro {
  color: var(--main-gray);
  font-size: .94rem;
  margin: 0 0 1.2rem;
  letter-spacing: .03em;
}

/* 國曆日 datelunar 變體（藍色） */
.datelunar-solar {
  background-color: var(--main-accent) !important;
}
.datelunar-blank {
  background-color: var(--main-gray) !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
}

/* 月份詳細頁 large list */
.month-list-card {
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  margin-top: 1.5rem;
}
.month-list-card .year-day-list {
  gap: .55rem;
}
.month-list-card .year-day-list a {
  padding: .65rem .85rem;
}

.year-toolbar-spacer { flex: 1; }

/* 圖片載入失敗時的 fallback 樣式 */
.img-fallback {
  background: #faf6ee;
  object-fit: contain !important;
  opacity: .85;
  padding: 4px;
  border: 1px dashed var(--main-border) !important;
}
.article-content img.img-fallback {
  max-width: 360px;
  margin: 1rem auto;
}

/* 月份連結網格(年度頁底部) */
.month-links-card {
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
}
.month-links-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .15em;
  color: var(--main-accent);
  margin: 0 0 .35rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--main-border);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.month-links-title::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--seal-red);
  border-radius: 1px;
}
.month-links-intro {
  color: var(--main-gray);
  font-size: .92rem;
  margin: .5rem 0 1rem;
}
.month-links-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}
@media (max-width: 768px) { .month-links-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .month-links-grid { grid-template-columns: repeat(3, 1fr); } }
.month-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .8rem .4rem;
  background: var(--section-bg);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--main-accent);
  transition: all .15s;
  gap: .25rem;
}
.month-link:hover {
  background: var(--seal-red);
  color: #fff;
  border-color: var(--seal-red);
}
.month-link.is-empty {
  opacity: .55;
  background: #fafaf6;
}
.month-link.is-active {
  background: var(--seal-red);
  color: #fff;
  border-color: var(--seal-red);
  pointer-events: none;
}
.month-link.is-active .month-link-cnt { color: rgba(255,255,255,.85); }
.month-link-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.month-link-cnt {
  font-family: var(--serif);
  font-size: .82rem;
  color: var(--main-gray);
  letter-spacing: .08em;
}
.month-link:hover .month-link-cnt { color: rgba(255,255,255,.85); }

/* year explore index — 全條目年度索引 */
.year-explore {
  margin: 2.4rem 0 1rem;
  padding: 1.8rem 1.8rem 1.4rem;
  background: linear-gradient(135deg, #fdfbf7 0%, #faf6ee 100%);
  border: 1px solid var(--main-border);
  border-radius: 14px;
}
.year-explore-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  letter-spacing: .15em;
  color: var(--main-accent);
  margin: 0 0 .35rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--main-border);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.year-explore-title::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--seal-red);
  border-radius: 1px;
}
.year-explore-intro {
  color: var(--main-gray);
  font-size: .92rem;
  margin: 0 0 1.4rem;
  letter-spacing: .04em;
}
.year-explore-group {
  margin-bottom: 1.5rem;
}
.year-explore-group:last-child { margin-bottom: 0; }
.year-explore-group-title {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .2em;
  color: var(--main-accent);
  margin: 0 0 .8rem;
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.year-explore-count {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--main-gray);
}
.year-explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.year-explore-list li { margin: 0; }
.year-explore-list a {
  display: inline-block;
  padding: .35rem .85rem;
  background: #fff;
  border: 1px solid var(--main-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--main-accent);
  font-size: .9rem;
  letter-spacing: .05em;
  transition: all .14s;
}
.year-explore-list a:hover {
  background: var(--main-accent);
  color: #fff;
  border-color: var(--main-accent);
}
.year-explore-list a.is-active {
  background: var(--seal-red);
  color: #fff;
  border-color: var(--seal-red);
  font-weight: 700;
  pointer-events: none;
}

@media (max-width: 600px) {
  .year-explore { padding: 1.4rem 1.2rem; }
  .year-explore-list a { font-size: .85rem; padding: .3rem .7rem; }
}