/* 行事曆（網站的公告頁、後台都用這一份）：黑紙白墨，直接顯示 Google 行事曆上的活動名稱；整天的行程是實心白底 */
.cal { display: grid; gap: 12px; }
.cal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cal__head b { font: 700 clamp(20px, 1.8vw, 26px)/1 var(--sans); letter-spacing: 0.06em; min-width: 8.5em; text-align: center; }
.cal__head button { background: none; border: 1px solid var(--line-4, #45454C); color: var(--bone); height: 38px; min-width: 38px; padding: 0 10px; cursor: pointer; font: 500 18px/1 var(--mono); }
.cal__head button:hover { border-color: var(--bone); }
.cal__head .cal__todaybtn { font: 500 13px/1 var(--sans); letter-spacing: 0.1em; }
.cal__gcal { margin-left: auto; font-size: 14px; color: var(--dim); text-decoration: none; letter-spacing: 0.06em; }
.cal__gcal:hover { color: var(--bone); }
.cal__fallback { display: grid; gap: 16px; justify-items: start; padding: 28px 0; }
.cal__fallback p { font-size: 16px; line-height: 1.8; color: var(--text-2, #C8C8CC); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__dow span { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; color: var(--dim); text-align: center; padding: 6px 0; }
.cal__day {
  min-height: clamp(70px, 9vh, 104px); display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left;
  padding: 6px 6px 7px; background: rgba(14, 14, 18, 0.7); border: 1px solid var(--line-1, #222228); color: var(--bone); cursor: pointer; min-width: 0;
  transition: border-color 0.15s ease;
}
.cal__day:hover { border-color: var(--line-5, #5A5A62); }
.cal__day.is-past { opacity: 0.6; }
.cal__day.is-today .cal__n { background: var(--bone); color: var(--ink); }
.cal__day.is-sel { border-color: var(--bone); }
.cal__day:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
.cal__n { align-self: flex-start; font: 500 13px/1 var(--mono); padding: 3px 5px; }
.cal__chips { display: grid; gap: 3px; min-width: 0; }
.cal__dots { display: none; gap: 3px; }
.cal__chip {
  display: block; font: normal 500 11px/1.3 var(--sans); letter-spacing: 0.02em; padding: 2px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal;
}
.cal__chip { border-left: 2px solid var(--bone); background: var(--tint-2, rgba(237, 237, 230, 0.06)); color: var(--bone); }
.cal__chip em { font: normal 500 11px/1 var(--mono); color: var(--text-6, #8A8A90); margin-right: 4px; }
.cal--allday { background: var(--bone); color: var(--ink); border-left-color: var(--bone); }
.cal__more { font: normal 500 11px/1 var(--mono); color: var(--dim); }
.cal__dots b { width: 7px; height: 7px; display: block; background: var(--bone); }
.cal__agenda { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line-2, #2E2E34); background: var(--card-solid, rgba(12, 12, 15, 0.8)); }
.cal__aday { font: 500 14px/1 var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.cal__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: baseline; font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line-1, #222228); }
.cal__time { font: 500 14px/1.4 var(--mono); }
.cal__title { display: grid; gap: 2px; }
.cal__title small { font-size: 12px; color: var(--dim); }
.cal__none, .cal__note { font-size: 13px; color: var(--dim); }

/* 網站：公告頁的行事曆分頁 */
.ncal { gap: 16px; padding-top: 24px; }
.ncal__lead { font-size: 16px; line-height: 1.8; color: var(--text-2, #C8C8CC); }
.ncal__lead b { color: var(--bone); }

/* 手機：格子太小，只畫小點，點一天看下面的清單 */
@media (max-width: 719px) {
  .cal__day { min-height: 46px; padding: 4px; }
  .cal__chips { display: none; }
  .cal__dots { display: flex; flex-wrap: wrap; }
  .cal__gcal { margin-left: 0; width: 100%; }
  .cal__item { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 14px; }
  .cal__time { white-space: nowrap; }
}