/* ════════════════════════════════════════════════════════════════
   마킹/이벤트 표시 기능 (Marks) — 전용 스타일
   · 데일리표 데이터 셀(날짜+행)에 마킹(점)·이벤트(깃발) 배지를 붙이고,
     셀 클릭 시 마킹 모달을 띄워 제목/메모/색을 입력받는다(셀 단위 마킹).
   · :root 디자인 토큰(--surface/--line/--brand 등)은 index.html이 정의 —
     여기서는 var() 참조만 한다(마킹/이벤트 기본 색칩 팔레트만 hex 예외).
   · JS는 static/js/marks.js (window.MarksModule)
   ════════════════════════════════════════════════════════════════ */

/* ════════ 1) 데일리표 데이터 셀 배지 ════════ */
/* #gridDaily td[data-col] 안에 marks.js가 주입(셀 단위). 셀 값 옆에 작게 붙는다. */
.mk-badges {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 4px; vertical-align: middle; white-space: nowrap;
}
.mk-badge {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: default; line-height: 1; transition: opacity .12s ease;
}
.mk-badge:hover { opacity: .65; }
/* 마킹(점) 배지 — 작은 원형 점. 색은 인라인 style의 color → currentColor 사용. */
.mk-badge.is-mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 1px var(--surface);
}
/* 이벤트(깃발) 배지 — 깃발 이모지/아이콘. 점보다 크게. */
.mk-badge.is-event {
  font-size: 12px; width: auto; height: auto;
}

/* ════════ 2) 마킹 모달 ════════ */
/* marks.js가 document.body에 동적 생성. [hidden]이면 숨김. */
.mk-modal-overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 32, .44);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.mk-modal-overlay[hidden] { display: none; }
.mk-modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(16, 24, 32, .18);
  width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; padding: 20px;
}
.mk-modal[hidden] { display: none; }
/* 헤더 — 제목 + 닫기 버튼 */
.mk-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mk-modal-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.mk-modal-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mk-modal-close {
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
  border-radius: 8px; width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; font-weight: 600;
}
.mk-modal-close:hover { background: var(--surface-3); }

/* 폼 영역 */
.mk-modal-body { display: grid; gap: 14px; margin-top: 14px; }
.mk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-field > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.mk-input {
  height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); font-size: 14px; color: var(--text); font-family: inherit;
}
.mk-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
select.mk-input { padding-right: 8px; }
textarea.mk-input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }

/* 종류 토글(마킹/이벤트) — cost.scope 알약 톤 */
.mk-kind-toggle {
  display: inline-flex; gap: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px;
}
.mk-kind-btn {
  border: 0; background: transparent; color: var(--muted); border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; line-height: 1;
}
.mk-kind-btn.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(16, 24, 32, .08); }

/* 색칩 목록 — 배경색은 marks.js가 인라인 style로 지정 */
.mk-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-color {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; background-clip: padding-box;
}
.mk-color.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-2); }

/* 하단 버튼바 */
.mk-modal-foot { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
.mk-btn {
  background: var(--brand); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.mk-btn:hover:not(:disabled) { filter: brightness(.95); }
.mk-btn:disabled { opacity: .55; cursor: default; }
.mk-btn-ghost {
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
  border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.mk-btn-ghost:hover:not(:disabled) { background: var(--surface-3); }
.mk-btn-ghost:disabled { opacity: .5; cursor: default; }
.mk-btn-danger {
  margin-right: auto;
  background: var(--surface); border: 1px solid #F0CFCF; color: var(--neg);
  border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.mk-btn-danger:hover { background: var(--neg-bg); }
/* 폼 하단 에러/안내 한 줄 */
.mk-modal-msg { font-size: 12px; color: var(--text-2); line-height: 1.4; margin-top: 4px; }
.mk-modal-msg.is-error { color: var(--neg); }

/* ════════ 3) 모바일 (max-width:639px) — 모달을 하단 시트처럼 ════════ */
@media (max-width: 639px) {
  .mk-modal-overlay { align-items: flex-end; padding: 0; }
  .mk-modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 88vh; }
  .mk-modal-foot { flex-wrap: wrap; }
  .mk-btn, .mk-btn-ghost { flex: 1 1 0; }
  .mk-btn-danger { flex: 1 1 100%; margin-right: 0; order: 3; }
}

/* ── 삭제 확인 모달 ── */
.mk-confirm-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mk-confirm-overlay[hidden] { display: none; }
.mk-confirm {
  background: var(--surface); border-radius: 16px;
  padding: 22px 24px; max-width: 340px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.mk-confirm-msg { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 18px; }
.mk-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; }
.mk-confirm-foot .mk-btn-danger { margin-right: 0; }

/* 마킹된 셀(배경색은 marks.js가 inline 적용) */
.mk-cell { cursor: pointer; }