/* 일정 — partials/calendar.html. 색은 디자인 토큰만(다크/라이트 자동) + 일정 종류 색(--k). */

.cal-nav { width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--t2); border: 1px solid var(--bd); }
.cal-nav:hover { background: var(--bg-elev); }
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; }

.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 16px 24px 24px; max-width: 1280px; margin: 0 auto; }
.cal-month { border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; background: var(--bg-surf); }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; color: var(--t3); text-align: center;
  border-bottom: 1px solid var(--bd); background: var(--bg-elev); }
.cal-head > div { padding: 6px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-height: 104px; padding: 4px; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cal-cell:hover { background: var(--bg-elev); }
.cal-cell.is-out { opacity: .45; }
.cal-cell.is-sel { background: color-mix(in srgb, #10b981 9%, var(--bg-surf)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #10b981 55%, transparent); }
.cal-day { font-size: 12px; color: var(--t2); padding: 1px 3px; }
.cal-day.is-sun { color: #f87171; }
.cal-day.is-sat { color: #60a5fa; }
.is-sun { color: #f87171; }
.is-sat { color: #60a5fa; }
.cal-cell.is-today .cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  border-radius: 999px; background: #10b981; color: #fff; font-weight: 700; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; text-align: left; font-size: 11px; line-height: 1.5;
  padding: 0 5px; border-radius: 5px; color: var(--t1); background: color-mix(in srgb, var(--k) 16%, transparent);
  border-left: 3px solid var(--k); }
.cal-chip:hover { background: color-mix(in srgb, var(--k) 28%, transparent); }
.cal-chip-t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--t3); flex-shrink: 0; }
.cal-more { font-size: 10.5px; color: var(--t4); padding-left: 4px; }
.cal-dots { display: none; gap: 3px; justify-content: center; margin-top: 2px; }

.cal-side { border: 1px solid var(--bd); border-radius: 14px; background: var(--bg-surf); padding: 14px; align-self: start;
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-item { width: 100%; text-align: left; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--bd);
  border-left: 3px solid var(--k); background: var(--bg-base); }
.cal-item:hover { background: var(--bg-elev); }
.cal-kind { font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 999px; color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, transparent); }
.cal-input { width: 100%; border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--bg-surf); border: 1px solid var(--bd); color: var(--t1); }

/* 휴대폰 — 달력은 점, 고른 날 목록은 아래로 */
@media (max-width: 768px) {
  .cal-wrap { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 20px; gap: 10px; }
  .cal-cell { min-height: 52px; align-items: center; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; }
  .cal-side { position: static; }
}

/* 공휴일(빨강) · 회사 휴일(초록) — 날짜 옆 이름 */
.cal-day { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-hol { font-size: 10px; color: #f87171; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-hol.is-company { color: #10b981; }
.cal-hol-row { font-size: 12px; padding: 6px 10px; border-radius: 8px; color: #f87171; background: color-mix(in srgb, #f87171 10%, transparent); }
.cal-hol-row.is-company { color: #10b981; background: color-mix(in srgb, #10b981 10%, transparent); }
@media (max-width: 768px) { .cal-hol { display: none; } }

/* 근태 지각·미체크 — 날짜 옆 작은 표시(일정 칩 아님) */
.cal-mark { font-size: 9.5px; line-height: 1.4; padding: 0 4px; border-radius: 4px; flex-shrink: 0; color: var(--k);
  background: color-mix(in srgb, var(--k) 15%, transparent); }
.cal-mark:hover { background: color-mix(in srgb, var(--k) 28%, transparent); }