/* 首页：节日节气（左）与今日时辰吉凶（右）同排分栏；两栏高度随内容，不强制对齐 */
.home-festival-hour-split {
    margin-top: 32px;
    margin-bottom: 8px;
}

.home-festival-hour-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.home-festival-hour-split__col {
    min-width: 0;
}

/* 当月节日与节气时间轴（左栏内） */
.festival-timeline {
    margin-top: 0;
    margin-bottom: 0;
}

.festival-timeline__card {
    position: relative;
    background: var(--wnl-bg-parchment);
    border: 1px solid var(--wnl-border-warm);
    border-radius: 12px;
    padding: 20px 18px 22px 16px;
    box-shadow: 0 2px 12px var(--wnl-card-shadow);
}

.festival-timeline__pegs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: -6px 0 12px;
    padding: 0;
}

.festival-timeline__pegs::before,
.festival-timeline__pegs::after {
    content: "";
    display: block;
    width: 9px;
    height: 10px;
    background: linear-gradient(180deg, var(--wnl-pegs-top) 0%, var(--wnl-pegs-bot) 100%);
    border-radius: 3px 3px 1px 1px;
    box-shadow: 0 1px 0 var(--wnl-col-inset-highlight) inset;
}

.festival-timeline__title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wnl-text-lunar-line);
}

.festival-timeline__summary {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--wnl-text-brown);
    text-align: left;
    padding-left: 4px;
}

.festival-timeline__count {
    color: var(--wnl-chip-holiday-fg);
    font-weight: 600;
    font-size: 1.05em;
}

.festival-timeline__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 0;
    --festival-line-x: 98px; /* 日期列 + 时间轴列中心 */
}

.festival-timeline__list::before {
    content: "";
    position: absolute;
    left: var(--festival-line-x);
    top: 14px;
    bottom: 14px;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, var(--wnl-rule-hair), var(--wnl-rule-warm-pale), var(--wnl-border-warm));
    border-radius: 1px;
    z-index: 0;
}

.festival-timeline__row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 86px 24px 1fr;
    align-items: start;
    gap: 0 4px;
    margin-bottom: 12px;
    min-height: 32px;
}

.festival-timeline__row:last-child {
    margin-bottom: 0;
}

.festival-timeline__date {
    text-align: right;
    padding-right: 4px;
    font-size: 14px;
    line-height: 1.4;
    padding-top: 2px;
}

.festival-timeline__datelink {
    color: var(--wnl-crumb-link-fg);
    text-decoration: none;
}

.festival-timeline__datelink:hover {
    text-decoration: underline;
    color: var(--wnl-theme-accent);
}

.festival-timeline__row.is-today .festival-timeline__datelink {
    color: var(--wnl-fest-today-fg);
    font-weight: 600;
}

.festival-timeline__track {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
}

.festival-timeline__dot {
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--wnl-pegs-top);
    border-radius: 50%;
    background: var(--wnl-bg-parchment);
    box-shadow: 0 0 0 2px var(--wnl-bg-parchment);
    flex-shrink: 0;
    z-index: 2;
}

.festival-timeline__row.is-today .festival-timeline__dot {
    border-color: var(--wnl-fest-today-fg);
    background: var(--wnl-fest-today-dot-bg);
    box-shadow: 0 0 0 2px var(--wnl-bg-parchment), 0 0 0 3px var(--wnl-fest-today-glow);
}

.festival-timeline__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    padding-left: 2px;
    padding-top: 1px;
}

.fest-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--wnl-yi-ji-body);
    text-decoration: none;
    background: var(--wnl-fest-tag-bg);
    border: 1px solid var(--wnl-fest-tag-br);
    border-radius: 999px;
    transition: border-color 0.15s, background 0.15s;
}

.fest-tag:hover {
    background: var(--wnl-fest-tag-hover-bg);
    border-color: var(--wnl-fest-tag-hover-br);
}

.fest-tag--jieqi {
    color: var(--wnl-theme-accent);
    border-color: var(--wnl-fest-jieqi-br);
    background: var(--wnl-fest-jieqi-bg);
    font-weight: 500;
}

.festival-timeline__row.is-today .fest-tag--jieqi {
    border-color: var(--wnl-fest-today-jieqi-br);
    color: var(--wnl-fest-today-jieqi-fg);
}

.festival-timeline__row.is-today .fest-tag:not(.fest-tag--jieqi) {
    border-color: var(--wnl-fest-today-row-tag-br);
    background: var(--wnl-fest-today-row-tag-bg);
}

.festival-timeline__empty {
    list-style: none;
    text-align: center;
    color: var(--wnl-hero-empty);
    font-size: 14px;
    padding: 16px 8px;
}

/* 万年历月视图：月历下方 节日节气 | 放假安排（与首页分栏风格一致） */
.wnl-month-meta {
    margin-top: 28px;
    margin-bottom: 10px;
}

.wnl-month-meta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.festival-timeline--wnl-month {
    min-width: 0;
}

.wnl-holiday-plan {
    min-width: 0;
}

.wnl-holiday-plan__card {
    position: relative;
    background: var(--wnl-bg-parchment);
    border: 1px solid var(--wnl-border-warm);
    border-radius: 12px;
    padding: 20px 16px 18px 14px;
    box-shadow: 0 2px 12px var(--wnl-card-shadow);
}

.wnl-holiday-plan__pegs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: -6px 0 12px;
    padding: 0;
}

.wnl-holiday-plan__pegs::before,
.wnl-holiday-plan__pegs::after {
    content: "";
    display: block;
    width: 9px;
    height: 10px;
    background: linear-gradient(180deg, var(--wnl-pegs-top) 0%, var(--wnl-pegs-bot) 100%);
    border-radius: 3px 3px 1px 1px;
    box-shadow: 0 1px 0 var(--wnl-col-inset-highlight) inset;
}

.wnl-holiday-plan__title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wnl-text-lunar-line);
}

.wnl-holiday-plan__summary {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wnl-text-brown);
    text-align: center;
    padding: 0 4px;
}

.wnl-holiday-plan__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wnl-holiday-plan__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--wnl-cell-border);
    font-size: 14px;
    line-height: 1.45;
}

.wnl-holiday-plan__row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}

.wnl-holiday-plan__date {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--wnl-crumb-link-fg);
    text-decoration: none;
    min-width: 4.2em;
}

.wnl-holiday-plan__date:hover {
    text-decoration: underline;
    color: var(--wnl-theme-accent);
}

.wnl-holiday-plan__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 1px 6px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 4px;
    line-height: 1.2;
}

.wnl-holiday-plan__mark--off {
    background: var(--wnl-chip-solar-bg);
    color: var(--wnl-yi-fg);
    border: 1px solid var(--wnl-yi-border);
}

.wnl-holiday-plan__mark--work {
    background: var(--wnl-holiday-work-bg);
    color: var(--wnl-holiday-work-fg);
    border: 1px solid var(--wnl-holiday-work-br);
}

.wnl-holiday-plan__name {
    flex: 1 1 120px;
    min-width: 0;
    color: var(--wnl-yi-ji-body);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.wnl-holiday-plan__empty {
    list-style: none;
    text-align: center;
    color: var(--wnl-hero-empty);
    font-size: 14px;
    padding: 16px 8px;
    line-height: 1.5;
}

/* 今日时辰吉凶（右栏，宜绿忌红；当前时辰高亮） */
.shichen-panel {
    position: relative;
    background: var(--wnl-bg-parchment);
    border: 1px solid var(--wnl-border-warm);
    border-radius: 12px;
    padding: 18px 20px 16px 20px;
    box-shadow: 0 2px 12px var(--wnl-card-shadow);
}

.shichen-panel__pegs {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: -4px 0 10px;
    padding: 0;
}

.shichen-panel__pegs::before,
.shichen-panel__pegs::after {
    content: "";
    display: block;
    width: 9px;
    height: 10px;
    background: linear-gradient(180deg, var(--wnl-patch-pegs-warm-from), var(--wnl-shichen-amber));
    border-radius: 3px 3px 1px 1px;
    box-shadow: 0 1px 0 var(--wnl-rule-argb255_255_255-350) inset;
}

.shichen-panel__title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wnl-shichen-title);
    padding: 0 8px;
}

.shichen-panel__summary {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wnl-shichen-body);
}

.shichen-panel__n--ji,
.shichen-panel__kw--ji {
    color: var(--wnl-semantic-lucky);
    font-weight: 600;
}

.shichen-panel__n--xiong,
.shichen-panel__kw--xiong {
    color: var(--wnl-semantic-danger);
    font-weight: 600;
}

.shichen-panel__n--ji,
.shichen-panel__n--xiong {
    font-size: 1.05em;
    font-weight: 700;
}

.shichen-panel__nowline {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--wnl-shichen-nowline-fg);
    background: linear-gradient(180deg, var(--wnl-shichen-nowline-bg1) 0%, var(--wnl-shichen-nowline-bg2) 100%);
    border: 1px solid var(--wnl-shichen-nowline-br);
    border-radius: 10px;
    box-shadow: 0 1px 0 var(--wnl-rule-argb255_255_255-650) inset;
}

.shichen-panel__nowline strong {
    color: var(--wnl-theme-accent);
    font-size: 1.02em;
}

.shichen-panel__nowjx {
    display: inline-block;
    margin-left: 4px;
    font-weight: 700;
}

.shichen-panel__nowjx--ji {
    color: var(--wnl-semantic-lucky);
}

.shichen-panel__nowjx--xiong {
    color: var(--wnl-semantic-danger);
}

.shichen-panel__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 视口内约显 6 个时辰，其余在区域内纵向滚动 */
.shichen-panel__list-wrap {
    --shichen-visible-rows: 6;
    --shichen-row-est: 6.75rem;
    max-height: calc(var(--shichen-visible-rows) * var(--shichen-row-est));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin: 0 0 2px;
    outline: none;
}

.shichen-panel__list-wrap:focus-visible {
    box-shadow: 0 0 0 2px var(--wnl-rule-argb200_150_90-450);
}

.shichen-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.shichen-row:last-child {
    margin-bottom: 0;
}

.shichen-row__branch {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--wnl-shichen-amber);
    border: 2px solid var(--wnl-border-accent);
    border-radius: 50%;
    background: var(--wnl-shichen-branch-bg);
    box-shadow: 0 1px 0 var(--wnl-rule-argb255_255_255-600) inset;
}

.shichen-row--ji .shichen-row__branch {
    border-color: var(--wnl-semantic-lucky);
    color: var(--wnl-semantic-lucky-deep);
    background: var(--wnl-patch-row-jí-bg-soft);
}

.shichen-row--xiong .shichen-row__branch {
    border-color: var(--wnl-patch-xiong-br-soft);
    color: var(--wnl-semantic-danger-deep);
    background: var(--wnl-fest-today-row-tag-bg);
}

.shichen-row__body {
    flex: 1;
    min-width: 0;
    background: var(--wnl-theme-surface);
    border: 1px solid var(--wnl-shichen-row-border);
    border-radius: 10px;
    padding: 8px 10px 9px 10px;
}

.shichen-row--ji .shichen-row__body {
    border-color: var(--wnl-rule-argb0_176_107-400);
    background: var(--wnl-shichen-row-lucky-bg);
}

.shichen-row--xiong .shichen-row__body {
    border-color: var(--wnl-rule-argb245_63_63-350);
    background: var(--wnl-shichen-row-xiong-bg);
}

#shichen-current {
    scroll-margin-top: 14px;
}

.shichen-row--current {
    position: relative;
    z-index: 2;
}

.shichen-row--current .shichen-row__branch {
    width: 36px;
    height: 36px;
    line-height: 32px;
    font-size: 16px;
    font-weight: 700;
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--wnl-rule-argb193_125_65-180);
}

.shichen-row--current .shichen-row__body {
    border-color: var(--wnl-border-accent);
    background: var(--wnl-elevator-bg1);
    box-shadow: 0 0 0 1px var(--wnl-rule-argb200_150_80-450), 0 4px 16px var(--wnl-rule-argb90_60_30-080);
}

.shichen-row--current.shichen-row--ji .shichen-row__body {
    border-color: var(--wnl-patch-jí-br-strong);
    background: var(--wnl-patch-row-jí-bg-strong);
    box-shadow: 0 0 0 1px var(--wnl-rule-argb0_176_107-400), 0 4px 16px var(--wnl-rule-argb0_100_60-060);
}

.shichen-row--current.shichen-row--xiong .shichen-row__body {
    border-color: var(--wnl-patch-danger-soft-br);
    background: var(--wnl-fest-today-row-tag-bg);
    box-shadow: 0 0 0 1px var(--wnl-rule-argb245_63_63-350), 0 4px 16px var(--wnl-rule-argb120_30_20-060);
}

.shichen-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    margin-bottom: 4px;
}

.shichen-row__timetitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--wnl-shichen-amber);
}

.shichen-row__nowmark {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--wnl-on-gradient-fg);
    /* 浅色字须有深色底；无背景时在米绿/米色块上与背景融在一起 */
    background: linear-gradient(160deg, var(--wnl-cal-today-g1) 0%, var(--wnl-cal-today-g2) 50%, var(--wnl-cal-today-g3) 100%);
    border: 1px solid var(--wnl-cal-today-ring);
    padding: 3px 8px 3px 9px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 1px 3px var(--wnl-rule-argb100_60_0-250);
    flex-shrink: 0;
}

.shichen-row__badge {
    display: inline-block;
    min-width: 2em;
    margin-left: auto;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wnl-on-gradient-fg);
    background: var(--wnl-semantic-lucky);
}

.shichen-row__badge--xiong {
    background: var(--wnl-semantic-danger);
}

.shichen-row__chong {
    font-size: 12px;
    line-height: 1.5;
    color: var(--wnl-patch-brown-a);
    margin: 0 0 4px;
}

.shichen-row__yi {
    font-size: 12px;
    line-height: 1.5;
    color: var(--wnl-semantic-lucky);
    margin: 0 0 2px;
}

.shichen-row__ji {
    font-size: 12px;
    line-height: 1.5;
    color: var(--wnl-semantic-danger);
    margin: 0;
}

.shichen-panel__more {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
}

.shichen-panel__morelink {
    color: var(--wnl-shichen-line-time);
    font-weight: 500;
    text-decoration: none;
}

.shichen-panel__morelink:hover {
    text-decoration: underline;
    color: var(--wnl-shichen-line-name);
}

/* 首页黄历资讯流 */
.home-masonry {
    margin-top: 32px;
    padding: 0 0 8px;
}

.home-masonry__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.home-masonry-card {
    background: var(--wnl-bg-parchment);
    border: 1px solid var(--wnl-border-warm);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 0 var(--wnl-rule-argb139_90_43-060);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-masonry-card:hover {
    border-color: var(--wnl-border-accent);
    box-shadow: 0 2px 10px var(--wnl-rule-argb139_90_43-080);
}

.home-masonry-card--accent {
    background: linear-gradient(180deg, var(--wnl-patch-masonry-card-grad-from) 0%, var(--wnl-patch-masonry-grad-soft) 100%);
    border-color: var(--wnl-masonry-key-br);
}

.home-masonry-card--muted {
    background: var(--wnl-masonry-key-bg);
    border-style: dashed;
}

.home-masonry-card__h {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--wnl-theme-accent);
    border-bottom: 1px solid var(--wnl-rule-warm-pale);
    padding-bottom: 8px;
}

.home-masonry-card__p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wnl-yi-ji-body);
}

.home-masonry-card__p:last-child {
    margin-bottom: 0;
}

.home-masonry-card__p--small {
    font-size: 13px;
    color: var(--wnl-text-muted);
    word-break: break-all;
}