/* ===== 캘린더 창 =====
   해시 `#calendar&solo=1`로 열리는 전용 화면(public/ui/calendar.js)의 스타일.
   색·간격·radius는 styles.css의 토큰과 스케일만 쓴다(일정 색은 --cal-* 6종). */

/* 캘린더 창에서는 노트 UI를 통째로 비운다 — 같은 index.html을 재사용하기 때문 */
body.cal-window #app { display: none !important; }

.calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  font-size: 0.938rem;
}

/* ---------- 상단 바 ---------- */
.cal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.cal-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.cal-btn {
  font-family: inherit;
  font-size: 0.813rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 12px;
}
.cal-btn:hover { background: var(--hover); }
.cal-icon-btn {
  font-family: inherit;
  font-size: 0.938rem;
  line-height: 1;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
}
.cal-icon-btn:hover { background: rgba(128, 128, 128, 0.18); }
.cal-icon-btn:disabled { opacity: 0.5; }
.cal-period {
  font-size: 1.063rem;
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}
.cal-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* 동기화 문구만 줄어든다 — '12분 전 동기화 · 갱신 필요'가 길어져도 세그먼트를 쪼개면 안 된다 */
.cal-sync {
  font-size: 0.688rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-sync-off { color: var(--danger-text); }

/* 뷰 전환 세그먼트 */
.cal-seg {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  background: var(--list-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cal-seg button {
  font-family: inherit;
  font-size: 0.781rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  white-space: nowrap;
}
.cal-seg button[aria-pressed='true'] {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

/* ---------- 본문 2단 ---------- */
.cal-body {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.cal-rail {
  background: var(--list-bg);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
}
.cal-rail h3 {
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
  padding-left: 4px;
}
.cal-list { display: flex; flex-direction: column; gap: 2px; }
.cal-item-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cal-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.844rem;
}
.cal-item:hover { background: var(--hover); }
.cal-item input { accent-color: var(--green); width: 15px; height: 15px; margin: 0; cursor: pointer; flex: none; }
.cal-item span:not(.cal-dot):not(.cal-warn) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item.off span:not(.cal-dot) { color: var(--muted); }
.cal-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* 사유는 눌러서 토스트로 본다 — hover 툴팁은 터치·키보드에서 닿지 않는다 */
.cal-warn {
  flex: none;
  font-family: inherit;
  font-size: 0.844rem;
  font-weight: 600;
  color: var(--danger-text);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
}
.cal-warn:hover { background: var(--hover); }
/* 캘린더 관리 칩 — 폰에서만(넓은 화면은 .cal-rail-foot이 같은 일을 한다) */
.cal-manage-chip { display: none; }
.cal-empty { font-size: 0.813rem; color: var(--muted); padding: 8px 4px; line-height: 1.7; }
.cal-rail-foot { margin-top: 16px; padding: 10px 8px 0; border-top: 1px solid var(--border); }
.cal-rail-foot button {
  font-family: inherit;
  font-size: 0.781rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 4px;
  text-align: left;
}
.cal-rail-foot button:hover { color: var(--text); text-decoration: underline; }

.cal-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

/* ---------- 월간 ---------- */
.cal-m-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.cal-m-head div { font-size: 0.688rem; color: var(--muted); text-align: center; padding: 8px 0; font-weight: 600; }
.cal-m-head .sun { color: var(--cal-red); }
.cal-m-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(86px, 1fr);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 5px 4px;
  min-width: 0;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
/* 지난달·다음달은 배경으로만 구분한다 — opacity를 걸면 날짜 숫자가 2.4:1까지 떨어진다 */
.cal-cell.out { background: var(--list-bg); }
.cal-dnum {
  font-size: 0.719rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding: 1px 3px 4px;
  display: inline-block;
}
.cal-cell.sun .cal-dnum { color: var(--cal-red); }
.cal-dnum.today {
  background: var(--green);
  color: #fff; /* 초록 배경 위 고정 대비 */
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 7px;
  margin: -1px 0 3px;
}
.cal-ev-stack { display: flex; flex-direction: column; gap: 2px; }
.cal-ev {
  font-size: 0.688rem;
  line-height: 1.35;
  padding: 2px 5px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-ev .t { font-variant-numeric: tabular-nums; opacity: 0.8; margin-right: 4px; }
.cal-ev.timed {
  background: transparent;
  color: var(--text);
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cal-ev.timed::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.cal-ev.timed .label { overflow: hidden; text-overflow: ellipsis; }
.cal-ev.allday { background: var(--cbg); color: var(--c); font-weight: 600; }
/* 여러 날 일정은 칸 경계를 넘어 이어진 막대로 보이게 — 가운데·끝 칸은 제목을 한 번만 쓴다 */
.cal-ev.allday.mid, .cal-ev.allday.end { color: transparent; }
.cal-ev.allday.start { border-radius: 4px 0 0 4px; margin-right: -6px; }
.cal-ev.allday.mid { border-radius: 0; margin: 0 -6px; }
.cal-ev.allday.end { border-radius: 0 4px 4px 0; margin-left: -6px; }
.cal-more {
  font-family: inherit;
  font-size: 0.688rem;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 4px;
  padding: 1px 5px;
  text-align: left;
}
.cal-more:hover { color: var(--text); background: var(--hover); }

/* compact 월간(폰) — 제목 대신 색점만, 칸을 누르면 그 날 일간으로 간다 */
.cal-m-grid.compact { grid-auto-rows: minmax(58px, 1fr); }
.cal-cell.tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-top: none;
  border-left: none;
  font-family: inherit;
  color: inherit;
  background: none;
  padding: 6px 2px;
}
.cal-cell.tap.out { background: var(--list-bg); }
.cal-cell.tap:hover { background: var(--hover); }
.cal-cell.tap .cal-dnum { white-space: nowrap; } /* '9월 1일'이 두 줄로 접히면 칸이 밀린다 */
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; }

/* 서버가 아직 펼치지 않은 기간 — 빈 달과 구분되게 */
.cal-notice {
  flex: none;
  font-size: 0.781rem;
  color: var(--muted);
  background: var(--list-bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}

/* ---------- 주간·일간 시간표 ---------- */
.cal-t-head { display: grid; border-bottom: 1px solid var(--border); flex: none; }
.cal-t-head .cal-gut { border-right: 1px solid var(--border); }
.cal-dh { text-align: center; padding: 7px 0 8px; border-right: 1px solid var(--border); }
.cal-dh:last-child { border-right: none; }
.cal-dh .dow { font-size: 0.688rem; color: var(--muted); font-weight: 600; }
.cal-dh .dnum2 { font-size: 1rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cal-dh.is-today .dnum2 {
  background: var(--green);
  color: #fff;
  font-weight: 600;
  border-radius: 20px;
  padding: 1px 8px;
  display: inline-block;
}
.cal-dh.sun .dow, .cal-dh.sun .dnum2 { color: var(--cal-red); }
.cal-allday-row {
  display: grid;
  border-bottom: 1px solid var(--border);
  background: var(--list-bg);
  min-height: 26px;
  flex: none;
}
.cal-allday-row .cal-gut {
  border-right: 1px solid var(--border);
  font-size: 0.688rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}
.cal-ad-cell { border-right: 1px solid var(--border); padding: 3px 4px; min-width: 0; }
.cal-ad-cell:last-child { border-right: none; }
.cal-t-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.cal-t-grid { display: grid; }
.cal-t-gut { display: grid; border-right: 1px solid var(--border); }
.cal-hr-label {
  font-size: 0.688rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 6px;
  transform: translateY(-6px);
}
.cal-t-col { display: grid; position: relative; border-right: 1px solid var(--border); }
.cal-t-col:last-child { border-right: none; }
.cal-hr-line { border-bottom: 1px solid var(--border); }
.cal-hr-line.half { border-bottom-style: dotted; opacity: 0.55; }
.cal-t-ev {
  /* 위치·높이·폭은 인라인으로 준다 — 분 단위 높이와 겹침 열 나누기를 위해 절대배치한다 */
  position: absolute;
  padding: 3px 6px;
  border-radius: 5px;
  overflow: hidden;
  font-size: 0.688rem;
  line-height: 1.3;
  background: var(--cbg);
  border-left: 3px solid var(--c);
  color: var(--text);
  z-index: 1;
}
.cal-t-ev .tt { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 블록 바탕이 옅은 유채색(--cbg)이라 --muted는 라이트에서 AA가 무너진다 — 위계는 제목의 600이 잡는다.
   두 줄로 흐르면 아래가 잘리므로 한 줄 말줄임으로 고정한다. */
.cal-t-ev .tm {
  display: block;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-t-ev.short .tm { display: none; }
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--green);
  z-index: 2;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* ---------- 일간 목록형(좁은 화면) ---------- */
.cal-agenda { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.cal-ag-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); flex: none; }
.cal-ag-d { font-size: 1rem; font-weight: 600; }
.cal-ag-w { font-size: 0.719rem; color: var(--muted); margin-top: 2px; }
.cal-ag-list { padding: 6px 14px 16px; }
.cal-ag-ev { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cal-ag-ev:last-child { border-bottom: none; }
.cal-ag-ev .tm {
  font-size: 0.719rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 38px;
  flex: none;
  padding-top: 1px;
}
.cal-ag-ev .bar { width: 3px; border-radius: 2px; background: var(--c); flex: none; }
.cal-ag-ev .tx { font-size: 0.813rem; }
.cal-ag-ev .sub { display: block; font-size: 0.688rem; color: var(--muted); margin-top: 2px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 640px) {
  /* 레일을 상단 칩 줄로 접는다 — 세로로 216px을 내줄 폭이 없다 */
  .cal-body { display: flex; flex-direction: column; }
  .cal-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .cal-rail h3, .cal-rail-foot { display: none; }
  .cal-list { flex-direction: row; gap: 6px; align-items: center; }
  .cal-item-row { flex: none; }
  .cal-item, .cal-manage-chip {
    flex: none;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    white-space: nowrap;
  }
  /* 꺼진 캘린더 — 레일 배경과 같은 색이면 칩이 안 보인다 */
  .cal-item.off { background: transparent; border-style: dashed; }
  .cal-manage-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    color: var(--muted);
  }
  .cal-manage-chip .icon { width: 0.875rem; height: 0.875rem; }
  .cal-view { flex: 1; }
  .cal-bar { flex-wrap: wrap; gap: 6px 8px; }
  .cal-period { font-size: 1rem; }
  .cal-bar-right { gap: 6px; }
}

/* 칸 폭이 좁으면 시간이 제목 자리를 다 먹는다 — 구글·애플처럼 색점 + 제목만 남긴다 */
@media (max-width: 1024px) {
  .cal-ev .t { display: none; }
}

/* 터치 기기 — 상시 노출 컨트롤은 44px 타깃(폭이 아니라 입력 기기 기준) */
@media (pointer: coarse) {
  .cal-btn, .cal-icon-btn { min-height: 44px; }
  .cal-icon-btn { min-width: 44px; }
  .cal-seg button { min-height: 40px; }
  .cal-rail-foot button { min-height: 44px; }
  .cal-item, .cal-manage-chip { min-height: 40px; }
  .cal-warn { min-width: 40px; min-height: 40px; }
  .cal-more { min-height: 32px; }
}

.calendar button:focus-visible,
.calendar input:focus-visible,
.cal-item:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
/* 체크박스는 라벨 전체에 링이 이미 그려진다 — 이중으로 그리지 않는다 */
.cal-item input:focus-visible { outline: none; }

/* 닫기: 아이패드 홈화면 앱에는 이 창에 탭바가 없어 유일한 탈출구다 — 절대 줄어들거나 접히면 안 된다 */
.cal-close { flex: none; margin-left: 2px; }
@media (pointer: coarse) {
  /* 기준은 폭이 아니라 입력 기기 — 아이패드 가로(1024px+)에서도 44px여야 한다 */
  .cal-close { min-width: 44px; min-height: 44px; }
}

/* 레일 접기 — 캘린더를 한 번 고르고 나면 목록은 자리만 차지한다는 요청(2026-09-10).
   접힌 상태는 localStorage에 남아 창을 다시 열어도 유지된다. */
.calendar.rail-off .cal-body { grid-template-columns: minmax(0, 1fr); }
.calendar.rail-off .cal-rail { display: none; }
.cal-rail-toggle[aria-pressed="false"] { opacity: 0.6; }
@media (pointer: coarse) {
  .cal-rail-toggle { min-width: 44px; min-height: 44px; }
}

/* 블록 안 장소·회의실 — 제목/시간 다음 줄. 한 줄로만 두고 넘치면 자른다 */
.cal-t-ev .pl {
  display: block;
  font-size: 0.688rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* 월간 칸 밀도 — 한 줄을 21px에서 17px로 줄여 같은 칸에 더 들어가게 한다(아이패드에서 절반이
   비어 있는데 "+7개"에 숨는다는 피드백). 글자는 그대로 두고 여백만 깎았다. */
.cal-ev { padding-top: 0; padding-bottom: 0; line-height: 1.35; }
.cal-ev-stack { gap: 1px; }
.cal-dnum { padding-bottom: 2px; }

/* "+N"은 날짜 옆으로 — 예전에는 일정 한 줄을 통째로 먹어서, 칸이 꽉 찬 날일수록 보이는 일정이
   오히려 줄었다(사용자 피드백). 머리줄에 두면 그 한 줄을 일정에 돌려줄 수 있다. */
.cal-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.cal-more {
  font-size: 0.688rem; color: var(--muted); font-variant-numeric: tabular-nums;
  background: none; border: none; padding: 0 3px; margin: 0; cursor: pointer;
  border-radius: 4px; line-height: 1.4; flex: none;
}
.cal-more:hover { background: rgba(128, 128, 128, 0.18); color: var(--text); }
@media (pointer: coarse) { .cal-more { min-width: 32px; min-height: 28px; } }