/* 일진 달력·날짜 상세 팝업 공용 스타일 — manse-iljin.js가 그리는 오버레이. 관리자 모바일 만세력의 인라인 스타일에서
   그대로 옮겨왔다(값 변경 없음). 컬러/흑백은 관리자 규약대로 body.color-mode / body.mono-mode. */

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
.modal-box { background: #fff; border-radius: 12px 12px 0 0; width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; padding: 12px; }

/* ── 일진 달력 오버레이 ── */
.calendar-box { padding: 8px; overflow-y: auto; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.cal-nav { border: 1px solid #999; background: #fff; border-radius: 4px; padding: 4px 12px; font-size: 14px; cursor: pointer; color: #333; } /* 글자색: 공용 button 규칙(흰 글자)이 흰 배경 위에 겹쳐 안 보이던 것 */
body.mono-mode .cal-nav { color: #000; background: #fff; border-color: #000; }
.cal-title { font-size: 15px; font-weight: 700; }
.cal-person { text-align: center; font-size: 12px; color: #666; margin-bottom: 4px; min-height: 14px; }
.cal-weekday-row { display: flex; border-top: 1px solid #bbb; border-left: 1px solid #bbb; }
.cal-weekday-row div { flex: 1; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 0; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; background: #f0f0f2; }
.cal-weekday-row div:first-child { color: #c0392b; }
.cal-weekday-row div:last-child { color: #2a5db0; }
.cal-grid { display: flex; flex-wrap: wrap; border-left: 1px solid #bbb; }
.cal-cell { width: 14.2857%; box-sizing: border-box; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; text-align: center; padding: 2px 1px; cursor: pointer; min-height: 60px; }
.cal-cell.out { background: #f2f2f3; color: #aaa; cursor: default; } /* 앞뒤 달 칸 = 날짜·간지·음력 없는 빈칸(누를 수 없음) */
.cal-cell.today { background: #fde3ec; }
.cal-day-num { font-size: 11px; }
.cal-cell.sunday .cal-day-num { color: #c0392b; }
.cal-cell.saturday .cal-day-num { color: #2a5db0; }
.cal-cell.out .cal-day-num { color: #aaa; }
.cal-term { font-size: 9px; color: #7b3fa0; font-weight: 700; white-space: nowrap; }
.cal-gz { font-size: 13px; font-weight: 700; line-height: 1.15; color: #000; }
.cal-lunar { font-size: 9px; color: #999; }
body.mono-mode .cal-cell.today { background: none; border: 2px solid #000; }
body.mono-mode .cal-term { color: #000; text-decoration: underline; }
body.mono-mode .cal-gz { background: none !important; }

/* ── 날짜 상세 팝업 ── */
#dayDetailOverlay { z-index: 110; }
.dd-row { font-size: 13px; padding: 4px 2px; border-bottom: 1px solid #eee; }
.dd-ganzhi { font-size: 15px; font-weight: 700; }
.dd-note { font-size: 11px; color: #888; padding: 4px 2px; }

/* 오행 파스텔·버튼 — 관리자 화면은 전역 규칙(인라인 body.color-mode .el-*·shared.css 버튼)으로 이미 같은 값을 준다.
   shared.css를 읽지 않는 페이지(연습실)도 같은 모양이 되게 같은 값을 둔다(:where로 우선순위를 낮춰 관리자 규칙과 겹쳐도 결과 같음). */
body.color-mode .cal-cell .el-mok  { background: var(--el-mok, #d7edd0); }
body.color-mode .cal-cell .el-hwa  { background: var(--el-hwa, #fbdfe4); }
body.color-mode .cal-cell .el-to   { background: var(--el-to, #faf0c8); }
body.color-mode .cal-cell .el-geum { background: var(--el-geum, #ececed); }
body.color-mode .cal-cell .el-su   { background: var(--el-su, #d7d7db); }
:where(#calendarOverlay, #dayDetailOverlay) .actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
:where(#calendarOverlay, #dayDetailOverlay) button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; color: #fff; }
:where(#calendarOverlay, #dayDetailOverlay) button.secondary { background: #6e6e73; }
:where(#calendarOverlay, #dayDetailOverlay) button.btn-jeong { background: #0071e3; }