/* 今日黃曆 —— PC 版（≥760px 兩欄）與手機版（單欄），依外框寬度切換 */
.hl {
	--hl-bg: #f6f1e7;
	--hl-paper: #fffdf8;
	--hl-ink: #2a2420;
	--hl-muted: #857a6d;
	--hl-red: #b3261e;
	--hl-green: #2e6b3f;
	--hl-gold: #9a6a0a;
	--hl-line: #e6dccb;
	--hl-radius: 14px;
	--hl-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;

	container-type: inline-size;
	container-name: hl;
	box-sizing: border-box;
	background: var(--hl-bg);
	color: var(--hl-ink);
	border-radius: calc(var(--hl-radius) + 4px);
	padding: 16px;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}
.hl *, .hl *::before, .hl *::after { box-sizing: border-box; }
.hl p, .hl dl, .hl dd, .hl h3 { margin: 0; padding: 0; }

/* ---------- 版面 ---------- */
.hl-grid { display: grid; gap: 14px; }
.hl-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hl-col:empty { display: none; }

/* PC 版：兩欄 */
.hl--pc .hl-grid:not(.hl-grid--single) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@container hl (min-width: 760px) {
	.hl--auto .hl-grid:not(.hl-grid--single) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* 不支援 container query 的舊瀏覽器：退回依視窗寬度判斷 */
@supports not (container-type: inline-size) {
	@media (min-width: 900px) {
		.hl--auto .hl-grid:not(.hl-grid--single) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	}
}

/* ---------- 卡片 ---------- */
.hl-card {
	background: var(--hl-paper);
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius);
	padding: 18px 20px;
}
.hl-title { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 10px !important; color: var(--hl-ink); }
.hl-title small { font-size: 13px; font-weight: 400; color: var(--hl-muted); margin-left: 6px; }
.hl-muted { color: var(--hl-muted); }
.hl-note { margin-top: 12px !important; font-size: 12.5px; color: var(--hl-muted); }

/* ---------- 日期切換 ---------- */
.hl-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.hl-nav__form { margin: 0; display: flex; gap: 6px; }
.hl-btn, .hl-date {
	font: inherit; font-size: 15px; line-height: 1.2;
	color: var(--hl-ink) !important; background: var(--hl-paper);
	border: 1px solid var(--hl-line); border-radius: 10px;
	padding: 8px 14px; text-decoration: none !important; white-space: nowrap;
}
.hl-btn:hover { border-color: var(--hl-muted); }
.hl-date { padding: 7px 10px; min-height: 38px; }

/* ---------- 日期卡 ---------- */
.hl-head { text-align: center; border-top: 6px solid var(--hl-red); }
.hl-head__solar { color: var(--hl-muted); font-size: 15px; }
.hl-today { display: inline-block; font-size: 12px; color: #fff; background: var(--hl-red); border-radius: 99px; padding: 0 8px; margin-left: 4px; vertical-align: 2px; }
.hl-head__day { font-family: var(--hl-serif); font-size: 96px; font-weight: 700; line-height: 1; color: var(--hl-red); margin: 10px 0 8px; }
.hl-head__lunar { font-family: var(--hl-serif); font-size: 24px; font-weight: 700; }
.hl-head__gz { color: var(--hl-muted); font-size: 15px; margin-top: 2px; }

/* ---------- 宜忌 ---------- */
.hl-yiji { display: grid; gap: 14px; }
.hl-yiji__col { display: flex; gap: 12px; align-items: flex-start; }
.hl-seal {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--hl-serif); font-size: 24px; font-weight: 700; color: #fff;
}
.hl-seal--yi { background: var(--hl-green); }
.hl-seal--ji { background: var(--hl-red); }
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.hl-chip { display: inline-block; font-size: 15px; line-height: 1.5; padding: 1px 10px; border: 1px solid var(--hl-line); border-radius: 99px; }
.hl-chip--yi { color: var(--hl-green); }
.hl-chip--ji { color: var(--hl-red); }

/* ---------- 求財吉時 ---------- */
.hl-wealth { border-top: 4px solid var(--hl-gold); }
.hl-wealth__date { display: block; margin: -6px 0 6px; font-size: 14px; color: var(--hl-muted); }
.hl-wealth__dir { color: var(--hl-muted); margin-bottom: 6px !important; }
.hl-wealth__dir b { color: var(--hl-gold); font-size: 18px; }
.hl-wrow {
	display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
	column-gap: 10px; row-gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--hl-line);
}
.hl-wrow:last-child { border-bottom: 0; }
.hl-tag { font-size: 12.5px; line-height: 1.6; padding: 0 8px; border-radius: 6px; color: #fff; white-space: nowrap; }
.hl-tag--best { background: var(--hl-gold); }
.hl-tag--good { background: var(--hl-green); }
.hl-tag--avoid { background: var(--hl-muted); }
.hl-wrow__name { white-space: nowrap; }
.hl-wrow__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-wrow__why { grid-column: 2 / -1; font-size: 13.5px; color: var(--hl-muted); }

/* ---------- 神煞資訊 ---------- */
.hl-details dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.hl-details dt { color: var(--hl-muted); white-space: nowrap; font-weight: 400; }
.hl-details dd { margin: 0; }

/* ---------- 十二時辰 ---------- */
.hl-hour {
	display: grid; grid-template-columns: 5.2em 7.6em 3.4em 2.6em 1fr;
	align-items: center; gap: 6px; padding: 7px 4px;
	border-bottom: 1px solid var(--hl-line); font-size: 15px;
}
.hl-hour:last-child { border-bottom: 0; }
.hl-hour--head { color: var(--hl-muted); padding-top: 0; }
.hl-hour--head > span { font-size: 13px; font-weight: 400; }
.hl-hour--head .hl-hour__chong { color: var(--hl-muted); }
.hl-hour__time { font-variant-numeric: tabular-nums; }
.hl-hour__luck { font-weight: 700; }
.hl-hour.is-good .hl-hour__luck { color: var(--hl-green); }
.hl-hour.is-bad .hl-hour__luck { color: var(--hl-red); font-weight: 400; }
.hl-hour.is-now { background: #fbf3df; border-radius: 8px; }
.hl-hour__chong { color: var(--hl-muted); font-size: 14px; }
.hl-now { font-style: normal; font-size: 11px; color: #fff; background: var(--hl-gold); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }

/* ===================== 手機版 ===================== */
.hl--mobile, .hl--wealth-only { padding: 12px; }
.hl--mobile .hl-card, .hl--wealth-only .hl-card { padding: 16px; }
.hl--mobile .hl-head__day { font-size: 72px; }
.hl--mobile .hl-head__lunar { font-size: 21px; }
.hl--mobile .hl-chip { font-size: 14px; padding: 1px 9px; }
.hl--mobile .hl-hour { grid-template-columns: 4.6em 1fr auto; row-gap: 0; padding: 8px 2px; }
.hl--mobile .hl-hour__gz, .hl--mobile .hl-hour--head { display: none; }
.hl--mobile .hl-hour__luck { grid-column: 3; grid-row: 1; }
.hl--mobile .hl-hour__chong { grid-column: 2 / -1; font-size: 13px; }
.hl--mobile .hl-details dl { grid-template-columns: 1fr; gap: 0; }
.hl--mobile .hl-details dt { font-size: 13px; margin-top: 8px; }
.hl--mobile .hl-hide-xs { display: none; }

@container hl (max-width: 559px) {
	.hl--auto { padding: 12px; }
	.hl--auto .hl-card { padding: 16px; }
	.hl--auto .hl-head__day { font-size: 72px; }
	.hl--auto .hl-head__lunar { font-size: 21px; }
	.hl--auto .hl-chip { font-size: 14px; padding: 1px 9px; }
	.hl--auto .hl-hour { grid-template-columns: 4.6em 1fr auto; row-gap: 0; padding: 8px 2px; }
	.hl--auto .hl-hour__gz, .hl--auto .hl-hour--head { display: none; }
	.hl--auto .hl-hour__luck { grid-column: 3; grid-row: 1; }
	.hl--auto .hl-hour__chong { grid-column: 2 / -1; font-size: 13px; }
	.hl--auto .hl-details dl { grid-template-columns: 1fr; gap: 0; }
	.hl--auto .hl-details dt { font-size: 13px; margin-top: 8px; }
	.hl--auto .hl-hide-xs { display: none; }
}
@container hl (max-width: 380px) {
	.hl--auto .hl-head__day { font-size: 60px; }
	.hl--auto .hl-btn { padding: 8px 10px; }
}