@charset "utf-8";

#milim_cal, .milim-cal-view, .milim-cal-write {
    --mg-space-1: 8px;
    --mg-space-2: 16px;
    --mg-space-3: 24px;
    --mg-space-4: 32px;
    --mg-space-6: 48px;
    --mg-radius-card: 16px;
    --mg-radius-button: 999px;
    --mg-radius-modal: 32px;
    --mg-blur-sm: 5px;
    --mg-blur-md: 10px;
    --mg-blur-lg: 20px;
    --mg-shadow-near: 0 2px 8px rgba(0, 0, 0, 0.06);
    --mg-shadow-ambient: 0 16px 40px rgba(0, 0, 0, 0.08);
    --mg-duration: 280ms;
    --mg-ease: cubic-bezier(.22, .61, .36, 1);
    --mg-glass-bg: rgb(from var(--card-bg-color, #ffffff) r g b / 70%);
    --mg-glass-border: rgb(from var(--white, #ffffff) r g b / 45%);

    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mg-space-4) var(--mg-space-2);
    font-family: var(--content-font-family, inherit);
    color: var(--content-font-color, #222);
}

/* 리스트(달력) 화면만 70% 너비로 줄인다(상세 페이지는 그대로 max-width 1200px 폭) */
#milim_cal { width: 70%; }

#milim_cal [hidden], .milim-cal-view [hidden], .milim-cal-write [hidden] { display: none !important; }
#milim_cal .mg-empty { color: var(--text-muted, #888); text-align: center; padding: var(--mg-space-4) 0; }

/* 공용 버튼/입력(스크랩 스킨과 동일 톤) */
.mg-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--card-border-color, #e5e5e5);
    background: var(--mg-glass-bg); color: var(--content-font-color, #222);
    border-radius: var(--mg-radius-button); padding: 8px 16px; cursor: pointer;
    transition: transform var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.mg-button--icon { width: 40px; height: 40px; padding: 0; color: var(--text-muted, #888); text-decoration: none; }
.mg-button--icon:hover { color: var(--text-primary, #222); transform: translateY(-2px); }
.mg-button.is-active { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }
.mg-input {
    border: 1px solid var(--card-border-color, #e5e5e5); background: var(--mg-glass-bg);
    border-radius: var(--mg-radius-card); padding: 10px 16px; font-family: inherit; font-size: 0.95em;
}
.mg-input:focus { outline: none; border-color: var(--primary-color, #7b6bff); }

/* 날짜·시간 입력의 네이티브 선택기(달력 팝업의 오늘/선택된 날짜 표시, 시간 스피너 강조색
   등)는 브라우저 기본 파란색 대신 primary color를 쓴다. accent-color는 체크박스/라디오에도
   영향을 주지만, 이번 요청은 날짜·시간에 한정이라 그 두 타입에는 적용하지 않는다. */
#milim_cal input[type="date"], .milim-cal-write input[type="date"],
#milim_cal input[type="time"], .milim-cal-write input[type="time"] {
    accent-color: var(--primary-color, #7b6bff);
}

/* select도 mg-input 톤을 쓰되, 네이티브 화살표가 우측 끝에 바짝 붙는 문제를 없애기 위해
   자체 화살표로 교체하고 글자와 비슷한 정도의 여백을 준다 */
select.mg-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888888'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.19l3.71-3.96a.75.75 0 111.1 1.02l-4.25 4.5a.75.75 0 01-1.1 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}

/* 모달은 내용 길이나 페이지 스크롤 위치와 무관하게 항상 화면 정중앙에 고정된다. 패널이
   뷰포트보다 길면 패널 자체가 내부 스크롤되지만, 스크롤바는 시각적으로 숨긴다(스크롤
   동작 자체는 그대로 유지된다). 앞으로 만드는 모든 스킨의 모달이 따르는 공통 패턴이다.

   열기/닫기는 hidden 속성이 아니라 is-open 클래스로 한다 — [hidden]은 display:none을 강제해
   CSS 트랜지션이 아예 재생되지 않는다(그리고 [hidden]과 이 규칙의 display:flex가 명시도
   동점일 때 author 규칙이 항상 이겨서, [hidden]만으로는 모달이 실제로 숨겨지지도 않는다).
   그래서 기본 상태를 opacity:0 + visibility:hidden + pointer-events:none으로 두고,
   is-open일 때만 보이며 위로 슬라이드, 닫힐 때는 아래로 슬라이드하며 사라진다. */
.mg-modal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: var(--mg-space-4) var(--mg-space-2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--mg-duration) var(--mg-ease), visibility 0s linear var(--mg-duration);
}
.mg-modal.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--mg-duration) var(--mg-ease), visibility 0s linear 0s;
}
.mg-modal__bg { position: fixed; inset: 0; background: var(--bg-overlay, rgba(0, 0, 0, 0.25)); }
.mg-modal__panel {
    position: relative; width: min(720px, 92vw); max-height: 100%;
    overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
    background: var(--mg-glass-bg); backdrop-filter: blur(var(--mg-blur-lg)); -webkit-backdrop-filter: blur(var(--mg-blur-lg));
    border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-modal);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient); padding: 0;
    transform: translateY(28px);
    transition: transform var(--mg-duration) var(--mg-ease);
}
.mg-modal.is-open .mg-modal__panel { transform: translateY(0); }
.mg-modal__panel::-webkit-scrollbar { display: none; }
.mg-modal__close { position: absolute; top: var(--mg-space-2); right: var(--mg-space-2); z-index: 1; }
.mg-modal__panel--write { width: min(560px, 92vw); padding: var(--mg-space-3); }

@media (prefers-reduced-motion: reduce) {
    .mg-modal, .mg-modal.is-open, .mg-modal__panel { transition: none; }
}

/* 원형 배경 없는 순수 아이콘 버튼(모달 닫기 등) */
.milim-cal-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; background: transparent; border-radius: 10px;
    color: var(--text-muted, #888); cursor: pointer; flex-shrink: 0;
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.milim-cal-icon-btn:hover { color: var(--text-primary, #222); background: rgb(from var(--primary-color, #7b6bff) r g b / 10%); }
.milim-cal-write-modal__title { margin: 0 0 var(--mg-space-2); font-size: 1.2em; font-weight: 700; color: var(--title-font-color, inherit); }
.milim-cal-write .btn_confirm { display: flex; align-items: center; gap: var(--mg-space-2); }

/* ── 상단 제목 바(스크랩 스킨의 mg-topbar와 동일) ────────────────────── */

.mg-topbar { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: var(--mg-space-3); }
.mg-topbar__title {
    font-family: var(--title-font-family, inherit);
    color: var(--title-font-color, inherit);
    text-transform: uppercase;
    text-align: center;
    font-size: 2.6em;
    font-weight: 700;
    margin: 0;
}

/* ── 달력 이동 툴바 / 뷰 전환 ─────────────────────────────────────── */
/* 하나의 긴 바 안에 좌(이전+라벨)/중앙(오늘)/우(보기탭+다음)를 담는다 — 개별 원형 버튼
   대신 바 전체가 하나의 표면이고, 안의 버튼들은 배경 없는 고스트 버튼이다 */

.milim-cal-toolbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: var(--mg-space-2);
    background: var(--mg-glass-bg);
    border: 1px solid var(--mg-glass-border);
    border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: 8px var(--mg-space-3);
    margin-bottom: var(--mg-space-3);
}
.milim-cal-toolbar__group { display: flex; align-items: center; gap: var(--mg-space-1); }
.milim-cal-toolbar__group--left { justify-self: start; }
.milim-cal-toolbar__group--center { justify-self: center; }
.milim-cal-toolbar__group--right { justify-self: end; }
/* 제목 폰트가 아니라 본문 폰트를 따르고, 웨이트는 사이드바 일정 제목(.milim-cal-item-row__title)과 맞춘다 */
.milim-cal-toolbar__label {
    font-family: var(--content-font-family, inherit); color: var(--content-font-color, inherit);
    font-size: 1.05em; font-weight: 600; white-space: nowrap;
}
.milim-cal-toolbar__nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; background: transparent; border-radius: 10px;
    color: var(--text-muted, #888); cursor: pointer;
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.milim-cal-toolbar__nav-btn:hover { color: var(--text-primary, #222); background: rgb(from var(--primary-color, #7b6bff) r g b / 10%); }
/* 툴바 안 글자(라벨/오늘/선택된 보기 탭)는 모두 같은 굵기(600)로 맞춘다 */
.milim-cal-toolbar__today {
    border: 0; background: transparent; border-radius: 10px; padding: 6px 16px;
    color: var(--content-font-color, #222); font-size: 0.85em; font-weight: 600; cursor: pointer;
    transition: background var(--mg-duration) var(--mg-ease);
}
.milim-cal-toolbar__today:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 10%); }
.milim-cal-viewtabs { position: relative; display: inline-flex; gap: 2px; }
/* Watermelon UI의 Carousel Navigator 참고 — 탭을 바꿀 때 배경이 그 자리에서 즉시
   바뀌는 대신, 알약 모양 인디케이터 하나가 이전 탭 위치에서 새 탭 위치로 미끄러지듯
   움직인다. 위치는 JS(moveViewtabsIndicator)가 활성 버튼의 실제 크기를 재서 계산한다. */
.milim-cal-viewtabs__indicator {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px;
    background: var(--primary-color, #7b6bff);
    transition: transform var(--mg-duration) var(--mg-ease), width var(--mg-duration) var(--mg-ease);
    pointer-events: none;
}
.milim-cal-viewtabs button {
    position: relative; z-index: 1;
    border: 0; background: transparent; border-radius: 10px; padding: 6px 12px;
    cursor: pointer; color: var(--text-muted, #888); font-size: 0.85em;
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.milim-cal-viewtabs button:hover { color: var(--text-primary, #222); background: rgb(from var(--primary-color, #7b6bff) r g b / 8%); }
.milim-cal-viewtabs button.is-active { color: var(--white, #fff); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .milim-cal-viewtabs__indicator { transition: none; }
}

/* ── 레이아웃(사이드바 + 본문) ────────────────────────────────────── */

.milim-cal-layout { display: grid; grid-template-columns: 264px 1fr; gap: var(--mg-space-3); align-items: start; }

.milim-cal-sidebar {
    background: var(--mg-glass-bg); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-card);
    box-shadow: var(--mg-shadow-near); padding: var(--mg-space-2); display: flex; flex-direction: column; gap: var(--mg-space-2);
}
/* 아이콘만 남긴 원형 버튼(사이드바 폭을 잡아먹지 않도록) */
.milim-cal-sidebar__write {
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; flex-shrink: 0; margin-left: auto;
    border: 0; background: transparent;
    border-radius: 50%; padding: 0; color: var(--text-muted, #bbb); font-size: 0.8em;
    cursor: pointer; transition: color var(--mg-duration) var(--mg-ease);
}
.milim-cal-sidebar__write:hover { color: var(--primary-color, #7b6bff); }
.milim-cal-sidebar__section + .milim-cal-sidebar__section { margin-top: var(--mg-space-1); padding-top: var(--mg-space-2); border-top: 1px solid var(--card-border-color, #e5e5e5); }
.milim-cal-sidebar__label { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.85em; color: var(--text-muted, #888); }

/* "새로 만들기" 원형 버튼 + 할일/일정/기념일/D-DAY 탭까지 다섯을 한 줄에 담는다.
   탭 넷은 남는 폭을 동일하게 나눠 갖고(flex:1), 새로 만들기 버튼만 고정 폭 원형이다 */
.milim-cal-sidebar-tabs { display: flex; align-items: center; gap: 3px; margin-bottom: var(--mg-space-2); }
.milim-cal-sidebar-tab {
    display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0;
    border: 1px solid var(--card-border-color, #e5e5e5); background: transparent; border-radius: 10px;
    padding: 6px 1px; font-size: 0.68em; white-space: nowrap; color: var(--text-muted, #888); cursor: pointer;
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease);
}
.milim-cal-sidebar-tab:hover { color: var(--text-primary, #222); border-color: var(--primary-color, #7b6bff); }
.milim-cal-sidebar-tab.is-active { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }
/* 탭 전환 직후에는 바로 위 규칙(연속된 .milim-cal-sidebar__section 사이 구분선)이 적용 안 되므로 */
.milim-cal-sidebar-tabs + .milim-cal-sidebar__section { margin-top: 0; padding-top: 0; border-top: 0; }

.milim-cal-dday-badge { font-weight: 700; color: var(--primary-color, #7b6bff); font-size: 0.9em; }
/* 행 높이를 살짝 키워(min-height) 우측 사진이 들어갈 자리를 만든다 */
.milim-cal-item-row { position: relative; display: block; min-height: 52px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: inherit; overflow: hidden; }
/* 사진은 행 우측에 깔리고, 왼쪽으로 갈수록 투명해져 글자를 가리지 않는다 */
.milim-cal-item-row__photo {
    position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: 0;
    background-size: cover; background-position: center; opacity: 0.32;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 75%);
    mask-image: linear-gradient(to right, transparent, #000 75%);
    pointer-events: none; border-radius: 0 14px 14px 0;
}
/* 사진 위에 글자가 오도록 본문 요소를 한 겹 올린다 */
.milim-cal-item-row__head, .milim-cal-item-row__meta { position: relative; z-index: 1; }
.milim-cal-item-row:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 8%); }
.milim-cal-item-row__head { display: flex; align-items: center; gap: 8px; }
.milim-cal-item-row__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.milim-cal-item-row__title { font-size: 0.9em; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.milim-cal-item-row__badge { color: var(--text-muted, #888); font-size: 0.8em; }
.milim-cal-item-row__meta { font-size: 0.75em; color: var(--text-muted, #888); margin: 2px 0 0 18px; }

/* ── 할일 체크 버튼(사이드바 목록/일간 목록/월간 칩 어디서든 공용) ──────── */
/* 원형 테두리 버튼 → 체크 시 primary color로 채워지는 패턴은 .milim-cal-weekdays와 동일하다 */
.milim-cal-todo-check {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid rgb(from currentColor r g b / 50%); background: transparent; padding: 0; cursor: pointer;
    color: inherit; font-size: 0.7em;
    transition: background var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.milim-cal-todo-check .fa { opacity: 0; transition: opacity var(--mg-duration) var(--mg-ease); }
.milim-cal-todo-check.is-done { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }
.milim-cal-todo-check.is-done .fa { opacity: 1; }
.milim-cal-todo-check:disabled { cursor: not-allowed; opacity: 0.5; }
.milim-cal-item-row__title.is-done,
.milim-cal-item-row.is-done .milim-cal-item-row__title,
.milim-cal-day-item.is-done .milim-cal-day-item__title { text-decoration: line-through; opacity: 0.55; }

.milim-cal-categorycloud { display: flex; flex-wrap: wrap; gap: 6px; }
.milim-cal-category-chip {
    display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--card-border-color, #e5e5e5);
    background: transparent; border-radius: var(--mg-radius-button); padding: 3px 10px;
    color: var(--text-muted, #888); font-size: 0.78em; cursor: pointer;
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease);
}
.milim-cal-category-chip:hover { color: var(--text-primary, #222); border-color: var(--primary-color, #7b6bff); }
.milim-cal-category-chip.is-active { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }
.milim-cal-sidebar details { border-top: 1px dashed var(--card-border-color, #e5e5e5); padding-top: var(--mg-space-1); margin-top: 4px; }
.milim-cal-sidebar summary { cursor: pointer; font-size: 0.85em; color: var(--text-muted, #888); }

/* ── 월/주 그리드 ───────────────────────────────────────────────── */

/* minmax(0, 1fr)로 트랙 최소 크기를 명시적으로 0으로 잡아둔다 — 안 그러면 grid 트랙의
   기본 최소 크기(auto)가 칸 안의 콘텐츠(예: 공백 없는 긴 제목) 크기를 따라가면서 그 칸의
   너비 자체가 넓어져버릴 수 있다(칸 안 요소들에 준 min-width:0과 함께 이중으로 막는다) */
.milim-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--card-border-color, #e5e5e5); border: 1px solid var(--card-border-color, #e5e5e5); border-radius: var(--mg-radius-card); overflow: hidden; }
.milim-cal-grid__dow { background: var(--mg-glass-bg); text-align: center; padding: 6px 0; font-size: 0.8em; color: var(--text-muted, #888); }
/* 칸 높이는 항목 개수와 무관하게 고정이다(height + overflow:hidden). 항목이 많아도 칸이
   세로로 늘어나지 않고, 담기지 않는 항목은 calendar.js가 마지막 줄을 "+N" 배지로 바꿔
   알려준다(MONTH_LANE_CAP / WEEK_LANE_CAP와 짝을 이루는 높이다) */
.milim-cal-cell {
    background: var(--card-bg-color, #fff); height: 108px; min-width: 0; padding: 6px; display: flex; flex-direction: column; gap: 3px;
    position: relative; cursor: pointer; user-select: none; overflow: hidden;
}
.milim-cal-grid--week .milim-cal-cell { height: 232px; }
.milim-cal-cell--other-month { opacity: 0.4; }
.milim-cal-cell--today .milim-cal-cell__date { background: var(--primary-color, #7b6bff); color: var(--white, #fff); }
.milim-cal-cell--dragover { background: rgb(from var(--primary-color, #7b6bff) r g b / 12%); }
/* 클릭으로 선택된 날짜: 원형 칩이 아니라 칸 전체 배경을 반투명 primary color로 표시한다 */
.milim-cal-cell--selected { background: rgb(from var(--primary-color, #7b6bff) r g b / 18%); }
.milim-cal-cell__date {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; font-size: 0.8em; align-self: flex-start;
}
/* 그 날짜 항목의 사진을 칸 배경으로 연하게 깐다. 항목 막대·날짜 숫자가 그 위에 오도록
   z-index로 한 겹 올려둔다(사진은 배경 역할이라 클릭도 가로채지 않는다) */
.milim-cal-cell__photo {
    position: absolute; inset: 0; z-index: 0; opacity: 0.14;
    background-size: cover; background-position: center; pointer-events: none;
}
.milim-cal-cell__date, .milim-cal-cell__items, .milim-cal-cell__todo-badge { position: relative; z-index: 1; }

/* 할일은 칸 안에 항목으로 넣지 않고 우상단 배지 하나로만 표시한다 — 할일이 있으면 체크,
   그 날의 할일이 전부 완료됐으면 primary color 별로 바뀐다 */
.milim-cal-cell__todo-badge {
    position: absolute; top: 6px; right: 6px; font-size: 0.7em; color: var(--text-muted, #999);
}
.milim-cal-cell__todo-badge.is-done { color: var(--primary-color, #7b6bff); }
/* 레인에 채울 항목이 없는 칸의 빈 자리 — 다른 날짜에 항목이 더 많이 겹쳐 있어도 세로
   줄 위치가 흐트러지지 않도록 같은 높이만큼 자리만 차지하고 보이지는 않는다 */
.milim-cal-item--spacer { visibility: hidden; pointer-events: none; }
/* 칸에 다 담기지 않은 항목 개수 — 누르면 그 날짜의 일간 보기로 넘어간다.
   .milim-cal-item.milim-cal-cell__more로 두 클래스를 묶어 명시도를 높여야, 뒤에 나오는
   .milim-cal-item의 배경색 규칙(소스 순서상 나중이라 이겨버림)을 확실히 덮어쓴다 */
.milim-cal-item.milim-cal-cell__more {
    background: transparent; color: var(--text-muted, #888); border: 0; text-align: right;
    cursor: pointer; font-weight: 600;
}
.milim-cal-item.milim-cal-cell__more:hover { color: var(--primary-color, #7b6bff); }
/* 칸 자체 padding을 상쇄해 항목 막대가 칸 가장자리까지 꽉 차게 하고(연속 일정이 이어져
   보이도록), 각 항목은 기본적으로 자기 몫의 여백(6px)을 스스로 다시 채워 넣는다.
   min-width:0은 grid/flex 자식의 기본값(min-width:auto)이 콘텐츠 크기만큼 칸을 억지로
   넓히는 것을 막는다 — 이게 없으면 공백 없는 긴 제목 하나가 칸(그리드 트랙) 자체를
   넓혀버려서 overflow:ellipsis가 있어도 소용없어진다 */
.milim-cal-cell__items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; margin: 0 -6px; min-width: 0; }

/* 일정별 색상(--milim-cal-color)이 없을 때의 기본 달력 표시 색상은 secondary-color다 —
   primary-color는 버튼/링크/강조 등 UI 자체의 액션 색이고, secondary-color를 콘텐츠(일정) 쪽
   기본색으로 구분해 쓴다 */
.milim-cal-item {
    display: block; min-width: 0; border-radius: 8px; padding: 2px 6px; margin: 0 6px; font-size: 0.75em; line-height: 1.5;
    color: var(--white, #fff); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: var(--milim-cal-color, var(--secondary-color, #7b6bff));
}
.milim-cal-item--occurrence { opacity: 0.75; }
.milim-cal-item--anniversary { background: transparent; color: var(--milim-cal-color, var(--secondary-color, #7b6bff)); border: 1px dashed var(--milim-cal-color, var(--secondary-color, #7b6bff)); }
.milim-cal-item--base { cursor: grab; }
.milim-cal-item--dragging { opacity: 0.4; }
.milim-cal-item--locked { background: var(--text-muted, #999); }

/* 연속 일정: 이어지는 쪽 여백/모서리를 지워 칸을 넘나들며 하나의 막대처럼 보이게 한다 */
.milim-cal-item--span-start { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 4px; }
.milim-cal-item--span-middle { margin-left: 0; margin-right: 0; border-radius: 0; padding-left: 4px; padding-right: 4px; }
.milim-cal-item--span-end { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 4px; }

/* ── 일간 보기(목록형) ─────────────────────────────────────────── */

.milim-cal-day-list { display: flex; flex-direction: column; gap: var(--mg-space-1); }
.milim-cal-day-item {
    display: flex; align-items: center; gap: var(--mg-space-2);
    background: var(--mg-glass-bg); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-card);
    padding: var(--mg-space-2); text-decoration: none; color: inherit;
}
.milim-cal-day-item__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--milim-cal-color, var(--secondary-color, #7b6bff)); }
.milim-cal-day-item__body { flex: 1; min-width: 0; }
.milim-cal-day-item__title { font-weight: 600; }
.milim-cal-day-item__meta { font-size: 0.8em; color: var(--text-muted, #888); }
.milim-cal-day-item.is-done { opacity: 0.6; }

/* 일간 보기: 할일/기념일/D-DAY/일정 묶음을 접었다 펼 수 있는 아코디언 */
.milim-cal-day-group { border: 0; }
.milim-cal-day-group__summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 6px 2px; font-size: 0.85em; color: var(--text-muted, #888);
}
.milim-cal-day-group__summary::-webkit-details-marker { display: none; }
/* 접힘/펼침 표시를 직접 그린다(브라우저 기본 삼각형은 숨겼다) */
.milim-cal-day-group__summary::before {
    content: '\f0da'; font-family: FontAwesome; width: 10px;
    transition: transform var(--mg-duration) var(--mg-ease);
}
.milim-cal-day-group[open] > .milim-cal-day-group__summary::before { transform: rotate(90deg); }
.milim-cal-day-group__count {
    background: rgb(from var(--primary-color, #7b6bff) r g b / 12%); color: var(--primary-color, #7b6bff);
    border-radius: 999px; padding: 1px 8px; font-size: 0.9em;
}
.milim-cal-day-group__body { display: flex; flex-direction: column; gap: var(--mg-space-1); padding-bottom: var(--mg-space-1); }

/* ── 연간 보기(미니 달력) ──────────────────────────────────────── */

.milim-cal-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mg-space-3); }
.milim-cal-mini {
    background: var(--mg-glass-bg); border: 1px solid var(--mg-glass-border); border-radius: 16px; padding: var(--mg-space-1);
    cursor: pointer;
    transition: background var(--mg-duration) var(--mg-ease);
}
.milim-cal-mini:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 8%); }
.milim-cal-mini__title { text-align: center; font-size: 0.85em; font-weight: 700; margin-bottom: 4px; }
.milim-cal-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.milim-cal-mini__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.6em; border-radius: 4px; color: var(--text-muted, #999); position: relative; }
/* 무엇이든(할일 포함) 하나라도 있는 날은 점 배지 여러 개 대신 칸 전체가 은은하게
   "불이 들어오는" 방식 하나로만 표시한다(종류별 배지가 여러 개라 난잡하다는 피드백) */
.milim-cal-mini__cell.has-activity {
    background: rgb(from var(--secondary-color, #7b6bff) r g b / 18%);
    color: var(--text-primary, #222); font-weight: 700;
}

/* ── 글쓰기 화면 ───────────────────────────────────────────────── */

.milim-cal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--mg-space-2); }
.milim-cal-field label { font-size: 0.85em; color: var(--text-muted, #888); }
.milim-cal-field-row { display: flex; gap: var(--mg-space-2); flex-wrap: wrap; }
.milim-cal-field-row > * { flex: 1; min-width: 140px; }

/* 일정/할일/기념일/D-DAY 모드 탭. input은 숨기고 sibling label을 알약 버튼처럼 스타일링한다 */
.milim-cal-mode-toggle { display: inline-flex; gap: 2px; border: 1px solid var(--card-border-color, #e5e5e5); border-radius: var(--mg-radius-card); padding: 3px; margin-bottom: var(--mg-space-2); }
.milim-cal-mode-toggle label { padding: 8px 11px; border-radius: calc(var(--mg-radius-card) - 3px); cursor: pointer; font-size: 0.82em; white-space: nowrap; color: var(--text-muted, #888); }
.milim-cal-mode-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.milim-cal-mode-toggle input:checked + label { background: var(--primary-color, #7b6bff); color: var(--white, #fff); }

/* 제목 입력 옆(우측)에 일정/할일 탭을 나란히 배치 */
.milim-cal-title-row { display: flex; align-items: center; gap: var(--mg-space-2); margin-bottom: var(--mg-space-2); }
.milim-cal-title-row .milim-cal-field { flex: 1; min-width: 0; margin-bottom: 0; }
.milim-cal-title-row .milim-cal-mode-toggle { flex-shrink: 0; margin-bottom: 0; }
/* 원형 S/M/T/W/T/F/S 버튼으로 가운데 정렬. input은 화면에서 숨기고 sibling label을
   버튼처럼 스타일링한다(모드 토글과 같은 패턴) */
.milim-cal-weekdays { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.milim-cal-weekdays input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.milim-cal-weekdays label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--card-border-color, #e5e5e5); background: transparent;
    cursor: pointer; font-size: 0.8em; font-weight: 600; color: var(--text-muted, #888);
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease);
}
.milim-cal-weekdays input:checked + label { background: var(--primary-color, #7b6bff); border-color: var(--primary-color, #7b6bff); color: var(--white, #fff); }

/* ── 사진 1장 업로드 필드 ─────────────────────────────────────────────── */

.milim-cal-imagefield { display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap; }
/* 파일 input은 숨기고 label을 버튼처럼 쓴다(요일 버튼·모드 토글과 같은 패턴) */
.milim-cal-imagefield__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.milim-cal-imagefield__pick {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    color: var(--content-font-color, #222); font-size: 0.9em;
}
.milim-cal-imagefield__preview { display: flex; align-items: center; gap: 6px; }
.milim-cal-imagefield__preview img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--card-border-color, #e5e5e5);
}

/* 날짜 필드(+아래 붙는 시간)와 반복 select가 나란히 오는 맨 위 줄 — 시간 서브필드 때문에
   날짜 쪽이 더 길어질 수 있어 위쪽 정렬로 맞춘다 */
.milim-cal-field-row--top { align-items: flex-start; }
/* 시작/종료 시간은 날짜 트리거 바로 아래, 살짝 간격을 두고 붙는다 */
.milim-cal-field-row--time { margin-top: 8px; }

/* ── 시간 입력(클릭한 시각에 따라 시계→해→달 아이콘이 바뀐다, 21st.dev "Time With Icon"
   참고) ────────────────────────────────────────────────────────────────── */
.milim-cal-timefield { position: relative; }
.milim-cal-timefield__icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted, #888); font-size: 0.9em; pointer-events: none;
}
.milim-cal-timefield__input { padding-left: 34px; width: 100%; }

/* ── 날짜 범위 피커(팝오버 미니 달력, 네이티브 date input 두 개를 대체) ──── */

.milim-cal-field--range { flex: 2; min-width: 220px; }
.milim-cal-rangepicker { position: relative; }
.milim-cal-rangepicker__trigger {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    cursor: pointer; color: var(--content-font-color, #222);
}
.milim-cal-rangepicker__trigger:focus { outline: none; border-color: var(--primary-color, #7b6bff); }
.milim-cal-rangepicker__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max(280px, 100%);
    background: var(--card-bg-color, #fff); border: 1px solid var(--card-border-color, #e5e5e5);
    border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-2);
}
.milim-cal-rangepicker__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.9em; }
/* 가로 칸 사이 간격을 0으로 둬야 선택 구간의 배경이 칸 경계에서 끊어지지 않고 하나의
   이어진 네모로 보인다(주 사이는 row-gap으로만 살짝 띄운다) */
.milim-cal-rangepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 0; row-gap: 2px; }
.milim-cal-rangepicker__dow { text-align: center; font-size: 0.7em; color: var(--text-muted, #888); padding-bottom: 4px; }
.milim-cal-rangepicker__day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 0.8em;
    color: var(--content-font-color, #222);
    transition: background var(--mg-duration) var(--mg-ease), color var(--mg-duration) var(--mg-ease);
}
.milim-cal-rangepicker__day:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 12%); }
.milim-cal-rangepicker__day.is-today { font-weight: 700; }
/* 구간 중간은 각지지 않은 연한 배경으로 옆 칸과 맞닿아 하나의 막대처럼 이어지고, 시작·끝
   칸만 바깥쪽 모서리가 둥근 진한 색으로 표시된다(단일 날짜는 완전한 원) */
.milim-cal-rangepicker__day.in-range { background: rgb(from var(--primary-color, #7b6bff) r g b / 16%); border-radius: 0; }
.milim-cal-rangepicker__day.range-start { background: var(--primary-color, #7b6bff); color: var(--white, #fff); border-radius: 8px 0 0 8px; }
.milim-cal-rangepicker__day.range-end { background: var(--primary-color, #7b6bff); color: var(--white, #fff); border-radius: 0 8px 8px 0; }
.milim-cal-rangepicker__day.range-single { background: var(--primary-color, #7b6bff); color: var(--white, #fff); border-radius: 8px; }
.milim-cal-rangepicker__confirm {
    width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 10px;
    background: var(--primary-color, #7b6bff); color: var(--white, #fff); font-size: 0.85em;
    font-weight: 600; cursor: pointer;
}
/* 단일 날짜 모드(반복 종료일)에서만 "확인" 옆에 "비우기"가 나란히 온다 */
.milim-cal-rangepicker__actions { display: flex; gap: 6px; margin-top: 8px; }
.milim-cal-rangepicker__actions .milim-cal-rangepicker__confirm { margin-top: 0; flex: 1; }
.milim-cal-rangepicker__clear {
    flex: 1; padding: 8px; border: 1px solid var(--card-border-color, #e5e5e5); border-radius: 10px;
    background: transparent; color: var(--text-muted, #888); font-size: 0.85em; cursor: pointer;
}
.milim-cal-rangepicker__clear:hover { color: var(--text-primary, #222); }

/* ── 드롭다운(트리거 버튼 + 팝오버 목록, 네이티브 select를 대체) — 라공에디션 발췌 확장
   프로그램의 폰트 콤보박스와 같은 시각 언어. 검색 상자만 없다 ─────────────────────── */

.milim-cal-dropdown { position: relative; }
.milim-cal-dropdown__trigger {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: left; cursor: pointer; color: var(--content-font-color, #222);
}
.milim-cal-dropdown__trigger:focus { outline: none; border-color: var(--primary-color, #7b6bff); }
.milim-cal-dropdown__trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.milim-cal-dropdown__chevron { flex-shrink: 0; opacity: 0.5; }
.milim-cal-dropdown__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max(220px, 100%);
    max-height: 260px; overflow-y: auto;
    background: var(--card-bg-color, #fff); border: 1px solid var(--card-border-color, #e5e5e5);
    border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: 6px;
}
.milim-cal-dropdown__item {
    padding: 8px 10px; border-radius: 8px; font-size: 0.85em; color: var(--content-font-color, #222);
    cursor: pointer; transition: background var(--mg-duration) var(--mg-ease);
}
.milim-cal-dropdown__item:hover { background: rgb(from var(--primary-color, #7b6bff) r g b / 8%); }
.milim-cal-dropdown__item.is-selected { background: rgb(from var(--primary-color, #7b6bff) r g b / 14%); color: var(--primary-color, #7b6bff); font-weight: 600; }

/* ── 색상 피커(프리셋 스와치 + hex 입력 팝오버, 네이티브 색상 선택기를 대체) ── */

.milim-cal-colorpicker { position: relative; flex-shrink: 0; }
.milim-cal-colorpicker__trigger {
    -webkit-appearance: none; appearance: none;
    width: 36px; height: 36px; padding: 0; border: 2px solid var(--card-border-color, #e5e5e5);
    border-radius: 50%; cursor: pointer;
}
.milim-cal-colorpicker__panel {
    /* 색상 필드가 사진 필드와 한 줄에 있어 아래로 펼치면 모달 하단 경계에 잘리기 쉬워, 칩의
       오른쪽 위로 뜨게 한다 — 트리거가 폭 36px로 좁아서 right:0으로 맞추면 208px 폭
       패널이 트리거보다 훨씬 왼쪽으로 밀려나 화면 왼쪽 밖으로 잘렸다. left:0으로 트리거의
       왼쪽 가장자리에서 시작해 오른쪽으로 펼치면 그 문제가 없다. */
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 208px;
    background: var(--card-bg-color, #fff); border: 1px solid var(--card-border-color, #e5e5e5);
    border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-near), var(--mg-shadow-ambient);
    padding: var(--mg-space-2);
}
/* 채도(가로)/명도(세로) 사각형 — 배경 hue는 JS가 --milim-cal-hue로 넣어준다 */
.milim-cal-colorpicker__area {
    position: relative; width: 100%; height: 110px; border-radius: 10px; margin-bottom: 8px;
    cursor: crosshair; touch-action: none;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, var(--milim-cal-hue, #ff0000));
}
.milim-cal-colorpicker__area-thumb,
.milim-cal-colorpicker__hue-thumb {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%); pointer-events: none;
}
/* 색상(hue) 슬라이더 */
.milim-cal-colorpicker__hue {
    position: relative; width: 100%; height: 12px; border-radius: 999px; margin-bottom: 10px;
    cursor: pointer; touch-action: none;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.milim-cal-colorpicker__hue-thumb { top: 50%; }
.milim-cal-colorpicker__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
.milim-cal-colorpicker__swatch {
    width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
    transition: transform var(--mg-duration) var(--mg-ease), border-color var(--mg-duration) var(--mg-ease);
}
.milim-cal-colorpicker__swatch:hover { transform: scale(1.12); border-color: var(--card-border-color, #e5e5e5); }
.milim-cal-colorpicker__hex { width: 100%; text-align: center; font-size: 0.85em; }

/* ── 상세 페이지 공통(스크랩 스킨의 .mg-view 레이아웃을 그대로 따름 — 앞으로
   만드는 "보기" 모달도 별다른 지시가 없으면 이 배치를 기본으로 한다) ─────── */

/* 상세 화면 상단의 사진 — 아래로 갈수록 투명해지는 헤더 배경으로 깔린다 */
.milim-cal-view { position: relative; }
.milim-cal-view__photo {
    position: absolute; top: 0; left: 0; right: 0; height: 190px; z-index: 0;
    background-size: cover; background-position: center; opacity: 0.36;
    border-radius: var(--mg-radius-modal) var(--mg-radius-modal) 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent);
    mask-image: linear-gradient(to bottom, #000 25%, transparent);
    pointer-events: none;
}
.milim-cal-view .view_header, .milim-cal-view .view_meta, .milim-cal-view .view_content_wrap { position: relative; z-index: 1; }

.milim-cal-view__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); }
.milim-cal-view__title-row .view_buttons_inline { flex-shrink: 0; margin-right: 6px; }
.milim-cal-view__title-row .btn_bo_user { float: none; display: flex; gap: 4px; }
.milim-cal-view__title-row .btn_bo_user li { float: none; margin: 0; }
.milim-cal-view .btn_b01:hover { background: transparent; transform: translateY(-2px); }
.milim-cal-view .bo_v_tit { font-family: var(--title-font-family, inherit); color: var(--title-font-color, inherit); font-size: 1.6em; margin: 0; }
.milim-cal-view .author_info { display: flex; flex-direction: column; gap: 6px; }
.milim-cal-view .view_header { padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-2); }
.milim-cal-view .view_content_wrap { padding: 0 var(--mg-space-4) var(--mg-space-3); }
.milim-cal-view .view_meta { padding: 0 var(--mg-space-4) var(--mg-space-2); }
.milim-cal-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-muted, #888); margin: 4px 0; }

#milim_cal_detail_body .bo_v_nb { display: none; }
#milim_cal_detail_body .btn_bo_user.bo_v_com li { margin-left: var(--mg-space-1); }

/* ── 모바일: "게시판 불러오기" 등으로 좁은 폭이 되면 달력만 노출 ─── */

@media (max-width: 600px) {
    #milim_cal { width: 100%; padding: var(--mg-space-2) 4px; }
    .mg-topbar,
    .milim-cal-viewtabs,
    .milim-cal-sidebar { display: none; }
    .milim-cal-layout { grid-template-columns: 1fr; }
    .milim-cal-cell { min-height: 64px; padding: 3px; }
    .milim-cal-year-grid { grid-template-columns: repeat(2, 1fr); }
}