/* 캘린더: 왼쪽 한 달 달력, 오른쪽 고른 날의 일정·할 일과 입력칸(앱과 같은 어두운 보라 유리 톤) */
#calendar.calendar-dialog {
  --panel:#ffffff08; --text:#f1e8f6; --muted:#a898b2; --bg:transparent; --border:#e3cdf024; --accent:#b996e6; --accent-text:#1d1426;
  width:min(1600px,96vw); height:min(1060px,92vh); max-width:none; overflow:hidden; color-scheme:dark;
  border:1px solid #d9bdf03d; border-radius:22px; color:var(--text);
  background:linear-gradient(180deg,#2c2236f5,#211a29f7); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px #ffffff14,0 30px 80px -20px #000c;
}
#calendar.calendar-dialog::backdrop { background:#0d0a12a6; backdrop-filter:blur(3px); }
.calendar-dialog[open] { display:flex; flex-direction:column; }
#calendar .cal-head { gap:12px; padding:18px 26px; border-bottom:1px solid var(--border); }
#calendar .cal-head h2 { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:700; color:#f6eefb; }
.cal-logo { width:40px; height:40px; filter:drop-shadow(0 4px 10px #9a6fe066); }
.cal-nav { display:flex; align-items:center; gap:14px; margin:0 auto; }
#calendar .cal-nav .icon-btn, #calendar .cal-close {
  display:grid; place-items:center; width:46px; height:42px; padding:0; border:1px solid #e3cdf033; border-radius:10px;
  background:#ffffff0a; color:#eadcf4; font-size:24px; line-height:1;
}
#calendar .cal-close { border-color:transparent; background:transparent; font-size:22px; }
#calendar .cal-nav .icon-btn:hover, #calendar .cal-close:hover { background:#ffffff17; border-color:#d9bdf066; }
.cal-month { min-width:150px; text-align:center; font-size:22px; font-weight:700; color:#f6eefb; font-variant-numeric:tabular-nums; }
#calendar .cal-today { padding:9px 20px; border:1px solid #d9bdf04d; border-radius:10px; background:#ffffff0d; color:#eadcf4; font-size:14px; }
#calendar .cal-today:hover { background:#ffffff1a; }

.cal-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 470px; }
.cal-grid {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:auto repeat(6,minmax(0,1fr));
  margin:16px 14px 18px 24px; min-height:0; overflow:auto;
  border:1px solid var(--border); border-radius:12px; background:#00000014;
}
.cal-weekday { padding:12px 0 14px; text-align:center; color:#c9bad3; font-size:15px; font-weight:600; border-bottom:1px solid var(--border); background:#1d1625; }
.cal-weekday.sun, .cal-cell.sun .cal-num { color:#f0919a; }
.cal-weekday.sat, .cal-cell.sat .cal-num { color:#93a9f2; }
#calendar .cal-cell {
  display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; min-height:80px; padding:10px 12px;
  border:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0;
  background:transparent; color:var(--text); text-align:left; cursor:pointer; overflow:hidden; box-shadow:none;
}
#calendar .cal-cell:nth-child(7n) { border-right:0; }
#calendar .cal-cell:hover { background:#ffffff0a; }
.cal-cell.other .cal-num { color:#7d7086 !important; }
.cal-cell.other > :not(.cal-num) { opacity:.5; }
.cal-num { font-size:16px; font-weight:600; line-height:28px; color:#eee4f4; }
.cal-cell.today .cal-num { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg,#c9a8f2,#a27fd8); color:#21152c !important; box-shadow:0 0 14px #b58cf080; }
#calendar .cal-cell.selected { border-radius:8px; background:linear-gradient(180deg,#a684d040,#7d5fa82e); box-shadow:inset 0 0 0 2px #c7a6ee; }
.cal-chip {
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:2px 7px; border-radius:6px;
  border-left:3px solid var(--accent); background:#b996e626; color:#eadcf8; font-size:11.5px; line-height:1.5;
}
.cal-chip.by-agent { border-left-color:#e3b469; background:#e3b46924; color:#f6e2bf; }
.cal-chip.done { text-decoration:line-through; opacity:.5; }
.cal-chip.todo { border-left-color:#8fd3b4; background:#8fd3b41f; color:#dcf2e8; }
.cal-cell-top { display:flex; align-items:center; gap:6px; min-width:0; }
.cal-holiday { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#f0919a; font-size:11.5px; font-weight:600; }
.cal-cell.holiday .cal-num { color:#f0919a; }
.cal-weather { display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; color:#cdbfd6; font-size:11.5px; font-variant-numeric:tabular-nums; }
.cal-weather-icon { font-size:14px; line-height:1; }
.cal-day-extras { display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0 0; font-size:13.5px; color:#d9cbe2; }
.cal-day-holiday { color:#f4a3ab; font-weight:700; }
.cal-more { color:#b6a6c1; font-size:11.5px; }

.cal-side { display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--border); background:#ffffff05; }
.cal-day { flex:1; min-height:0; overflow:auto; padding:22px 26px 8px; }
.cal-day-head h3 { display:flex; align-items:center; gap:12px; margin:0; font-size:26px; font-weight:700; color:#f6eefb; }
.cal-today-badge { padding:3px 11px; border:1px solid #d9bdf055; border-radius:8px; background:#ffffff0d; color:#e3d2ee; font-size:13px; font-weight:500; }
.cal-day-head small { display:block; margin-top:4px; color:var(--muted); font-size:12.5px; }
.cal-day h4, .cal-form-title { margin:22px 0 10px; color:#f1e8f6; font-size:17px; font-weight:700; letter-spacing:0; }
.cal-events, .cal-todos { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cal-event, .cal-todo { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:#ffffff08; }
.cal-event.done .cal-event-body strong, .cal-todo.done span { text-decoration:line-through; opacity:.5; }
.cal-event input[type=checkbox], .cal-todo input[type=checkbox] { margin-top:3px; accent-color:var(--accent); }
.cal-dot { color:var(--accent); font-size:9px; margin-top:4px; }
.cal-event-body { flex:1; min-width:0; display:grid; gap:2px; }
.cal-time { color:#cfb2f2; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.cal-event-body strong { font-size:14px; overflow-wrap:anywhere; }
.cal-note { margin:2px 0 0; color:#c7b8d0; font-size:12.5px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.cal-meta { color:var(--muted); font-size:11px; }
.cal-todo label { flex:1; min-width:0; display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text); overflow-wrap:anywhere; cursor:pointer; }
.cal-move { width:28px; padding:2px; border:0; background:transparent; color:transparent; cursor:pointer; }
.cal-move::-webkit-calendar-picker-indicator { opacity:.6; filter:invert(1); cursor:pointer; }
#calendar .cal-icon { flex-shrink:0; padding:3px 7px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; }
#calendar .cal-icon:hover { background:#ffffff14; color:var(--text); }
#calendar .cal-icon.danger:hover { background:#e57d8f2e; color:#f2a3b0; }
.cal-empty { padding:6px 2px; color:#c6b7cf; font-size:14px; text-align:center; }
.cal-events .cal-empty::before { content:'📆'; display:block; margin:6px auto 8px; font-size:54px; line-height:1; filter:saturate(.6) hue-rotate(220deg) drop-shadow(0 6px 14px #9a6fe055); }
.cal-events:has(.cal-empty) { padding-bottom:18px; border-bottom:1px solid var(--border); }
.settings form.cal-todo-form { flex-direction:row; gap:8px; margin-top:10px; }
#calendar .cal-todo-form input, #calendar .cal-field {
  border:1px solid #e3cdf02e; border-radius:11px; background:#ffffff0a; color:var(--text);
}
#calendar .cal-todo-form input { flex:1; min-width:0; padding:13px 16px; font:inherit; font-size:14px; }
#calendar .cal-todo-form button { width:50px; padding:0; border:1px solid #e3cdf033; border-radius:11px; background:#ffffff0d; color:#eadcf4; font-size:22px; }
#calendar .cal-todo-form button:hover { background:#ffffff1a; }

.settings form.cal-form { flex-shrink:0; gap:10px; padding:4px 26px 20px; border-top:0; background:transparent; }
.cal-form .cal-form-title { margin:14px 0 2px; padding-top:18px; border-top:1px solid var(--border); }
#calendar .cal-field { display:flex; align-items:center; gap:10px; min-width:0; padding:0 14px; }
#calendar .cal-field:focus-within, #calendar .cal-todo-form input:focus { border-color:#c7a6ee99; background:#ffffff12; outline:none; }
.cal-field-icon { flex:none; width:20px; font-size:15px; text-align:center; filter:grayscale(1) brightness(1.6); opacity:.7; }
#calendar .cal-field input, #calendar .cal-field textarea {
  flex:1; width:100%; min-width:0; padding:13px 0; border:0; outline:none; background:transparent; color:var(--text); font:inherit; font-size:14.5px; box-shadow:none;
}
#calendar .cal-field input::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.6; }
.cal-field textarea { resize:vertical; min-height:58px; }
#calendar .cal-note-field { align-items:flex-start; }
.cal-note-field .cal-field-icon { margin-top:14px; }
#calendar input::placeholder, #calendar textarea::placeholder { color:#9d8fa8; }
.cal-form-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#calendar .cal-time-field { flex-wrap:wrap; column-gap:10px; row-gap:0; padding:7px 14px; }
.cal-time-field small { flex:1 1 calc(100% - 30px); margin-top:2px; color:var(--muted); font-size:11px; line-height:1.2; }
.cal-time-field .cal-field-icon { order:-1; }
#calendar .cal-time-field input { flex:1 1 100%; padding:2px 0 3px 30px; font-size:15px; }
.cal-todo-toggle { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); cursor:pointer; }
.cal-todo-toggle input { width:18px; height:18px; accent-color:#8fd3b4; }
.cal-form-actions { display:flex; justify-content:flex-end; gap:8px; }
#calendar .cal-form-actions .primary {
  flex:1; padding:14px; border:0; border-radius:12px; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#b996e6,#9373c8); box-shadow:inset 0 1px #ffffff40,0 8px 22px -10px #a27fd8;
}
#calendar .cal-form-actions .primary:hover { filter:brightness(1.08); }
#calendar .cal-cancel { padding:14px 18px; border:1px solid #e3cdf033; border-radius:12px; background:#ffffff0a; color:#eadcf4; }
.cal-hint { margin:0; color:var(--muted); font-size:12.5px; line-height:1.5; }

/* 오늘 할 일 패널: 캘린더 버튼과 오늘 일정 시간표 */
.today-calendar { margin-left:auto; margin-right:6px; padding:5px 10px; border:1px solid #e6bad566; border-radius:99px; background:transparent; color:#f3d6de; font-size:11px; cursor:pointer; }
.today-calendar:hover { background:#ffffff14; }
.today-events { list-style:none; margin:0; padding:10px 17px 4px; display:grid; gap:5px; }
.today-events li { display:flex; gap:9px; align-items:baseline; font-size:12.5px; color:#efdfe8; }
.today-events li.done { opacity:.5; text-decoration:line-through; }
.today-event-time { flex-shrink:0; min-width:38px; padding:1px 6px; border-radius:6px; background:#e6bad526; color:#f3d69e; font-size:11px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }

@media (max-width:820px) {
  #calendar.calendar-dialog { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  #calendar .cal-head { padding:12px 14px; }
  .cal-nav { gap:8px; }
  .cal-month { min-width:110px; font-size:17px; }
  #calendar .cal-nav .icon-btn { width:36px; height:34px; font-size:20px; }
  #calendar .cal-today { padding:6px 12px; font-size:12px; }
  .cal-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); overflow:auto; }
  .cal-grid { overflow:visible; margin:10px; }
  .cal-weekday { padding:8px 0; font-size:12px; }
  #calendar .cal-cell { min-height:54px; padding:4px 5px; }
  .cal-num { font-size:13px; line-height:24px; }
  .cal-cell.today .cal-num { width:24px; height:24px; }
  .cal-holiday { font-size:9px; }
  .cal-weather-temp { display:none; }
  .cal-weather-icon { font-size:11px; }
  .cal-chip { font-size:9.5px; padding:0 4px; border-left-width:2px; }
  .cal-side { border-left:0; border-top:1px solid var(--border); }
  .cal-day { overflow:visible; padding:16px 16px 6px; }
  .cal-day-head h3 { font-size:20px; }
  .settings form.cal-form { padding:4px 16px 18px; }
  #calendar-title { display:none !important; }
}

.cal-filter { display:flex; align-items:center; gap:10px; padding:12px 20px 0; }
.cal-filter select, .cal-form select { padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.cal-chip.personal { background:#357a702e; border-left:3px solid #6bcead; }
.cal-chip.work { border-left:3px solid #bca4f2; }
.cal-event.personal .cal-time { color:#6bcead; }
.cal-event.work .cal-time { color:#bca4f2; }
.today-event-time.personal { color:#6bcead; }
.today-event-time.work { color:#bca4f2; }

/* 마우스를 올린 날짜 칸이 내용이 잘릴 때만 필요한 만큼 커지고, 나머지 칸이 부드럽게 좁아진다(넓은 화면). */
.cal-grid { transition:grid-template-columns .55s cubic-bezier(.22,1,.36,1), grid-template-rows .55s cubic-bezier(.22,1,.36,1); }
#calendar .cal-cell { transition:background-color .3s ease, box-shadow .35s ease; }
.cal-chip.cal-extra { display:none; }
#calendar .cal-cell.zoom { overflow:hidden; background:linear-gradient(180deg,#ffffff12,#ffffff06); box-shadow:inset 0 0 0 1px #c7a6ee77, 0 18px 40px -18px #000c; z-index:1; }
#calendar .cal-cell.zoom.selected { box-shadow:inset 0 0 0 2px #c7a6ee, 0 18px 40px -18px #000c; }
.cal-cell.zoom .cal-chip.cal-extra { display:block; animation:cal-chip-in .42s cubic-bezier(.22,1,.36,1) both; }
.cal-cell.zoom .cal-chip.cal-extra:nth-of-type(n+6) { animation-delay:.06s; }
.cal-cell.zoom .cal-more { display:none; }
.cal-cell.zoom .cal-chip, .cal-cell.unzoom .cal-chip { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
/* 마우스가 떠나 작아지는 동안: 펼쳤던 일정은 살며시 접히고, '+n개 더'는 다 줄어든 뒤 다시 나타난다 */
.cal-cell.unzoom .cal-chip.cal-extra { display:block; animation:cal-chip-out .32s cubic-bezier(.4,0,.2,1) both; }
.cal-cell.unzoom .cal-more { display:none; }
.cal-more { animation:cal-chip-in .35s ease both; }
@keyframes cal-chip-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-3px); } }
.cal-cell.zoom .cal-holiday { white-space:normal; }
.cal-probe.cal-probe-nowrap .cal-chip, .cal-probe.cal-probe-nowrap .cal-holiday { white-space:nowrap; }
@keyframes cal-chip-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* 좁아진 칸은 기온·공휴일 이름을 잠시 접어 겹치지 않게 */
.cal-grid .cal-cell .cal-weather-temp, .cal-grid .cal-cell .cal-holiday { transition:opacity .35s ease .15s; }
.cal-grid.zooming .cal-cell:not(.zoom) .cal-weather-temp, .cal-grid.zooming .cal-cell:not(.zoom) .cal-holiday { opacity:0; transition:opacity .2s ease; }
@media (prefers-reduced-motion:reduce) { .cal-grid, #calendar .cal-cell { transition:none; } .cal-cell.zoom .cal-chip.cal-extra, .cal-cell.unzoom .cal-chip.cal-extra, .cal-more { animation:none; } }