/* 일정 캘린더 페이지 전용 스타일 */

/* 일정별 목록 참석 승인 대기 레드닷 (운영자 전용) — 알림 톤의 레드 원형/필 */
.approval-pending{display:inline-flex;align-items:center;gap:4px;margin:0 0 4px;font-size:12px;font-weight:700;color:#f53c14}
.approval-pending__dot{width:8px;height:8px;border-radius:50%;background:#f53c14;flex:0 0 auto}

/* =========================================================================
 * 참석 승인 대기 요약 공지 배너 (운영자 전용) : 캘린더 프레임 상단, 카톡 '공지'식 가로 바 1줄.
 * 클릭 시 승인 관리 페이지(/myclubManager/calendarApproval)로 이동.
 * 카드 박스형/그림자 지양(공지 바), 좌측 세로라인(border-left) 강조 금지.
 * 좌측 알림 벨 + 레드 도트 → 문구("참석 승인 대기 N건") → 우측 이동 chevron.
 * 여백은 8배수(padding 12/16, gap 8, min-height 48).
 * ========================================================================= */
.calendar-approval-notice{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:16px 0 4px;padding:12px 16px;box-sizing:border-box;border-radius:8px;background:#fdecea;color:#c0341d;text-decoration:none}
.calendar-approval-notice:hover{background:#fbe0dc}
/* 좌측 알림 벨 아이콘(공용 이모지) + 우상단 레드 도트로 '새 알림'을 강조 */
.calendar-approval-notice__ico{position:relative;flex:0 0 auto;width:20px;height:20px}
.calendar-approval-notice__ico:after{content:"";position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#f53c14;box-shadow:0 0 0 2px #fdecea}
.calendar-approval-notice__text{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-approval-notice__count{font-weight:700;color:#f53c14}
/* 우측 이동 chevron(꺾쇠) : CSS 보더 트릭. raw 이모지 미사용. */
.calendar-approval-notice__chevron{flex:0 0 auto;width:8px;height:8px;margin-left:4px;border-top:2px solid #c0341d;border-right:2px solid #c0341d;transform:rotate(45deg)}

/* 다일(multi-day) 일정도 단일 일정과 동일하게 각 날짜 셀에 .calendar-schedule__item(<li>)로 표시하되,
   같은 주 연속 셀에서는 배경이 끊김 없이 하나의 바처럼 이어져 보이도록 처리한다.
   공통 일정 아이템 기본 룩(.calendar-schedule__item 색/높이/폰트 등)은 전역 klubo.css에 정의되어 있다. */

/* 인접 셀의 다일 바가 시각적으로 맞붙도록 셀 사이 갭(테이블 border-spacing + td 좌우 padding) 제거 */
.calendar-table{border-collapse:collapse;}
.calendar-table td.week-sep{padding-left:0;padding-right:0;}

/* 다일 li 좌우 마진: '이어지는 안쪽'만 0으로 붙여 셀 경계에서 바가 끊기지 않게 하고,
   '실제 시작/끝(바깥쪽)'은 단일 칩과 동일한 여백(3px)을 유지해 단일 일정과 끝 여백이 어긋나지 않게 한다.
   시작=좌측 여백 유지+우측 붙임, 중간=양쪽 붙임, 끝=좌측 붙임+우측 여백 유지. */
.calendar-schedule__item.is-multi-start{margin-right:0;}
.calendar-schedule__item.is-multi-mid{margin-left:0;margin-right:0;}
.calendar-schedule__item.is-multi-end{margin-left:0;}
/* 좌측 세로 accent(|)는 '시작' 셀에만 남긴다(단일 일정과 동일한 룩 → 하나의 일정임을 표시).
   이어지는 중간/끝 셀은 accent를 제거해 배경만 끊김 없이 연결되게 한다. */
.calendar-schedule__item.is-multi-mid:before,
.calendar-schedule__item.is-multi-end:before{
    display:none;
}

/* 모서리 라운드: 단일 일정은 4px 둥근 칩(klubo.css). 다일 일정은 그 룩을 여러 날에 걸쳐 늘린 형태로,
   바깥쪽 끝만 둥글리고 이어지는 안쪽은 각지게 해 같은 주 연속 셀에서 하나의 바처럼 맞붙게 한다.
   시작=좌측만 라운드(우측은 다음 셀과 연결), 중간=양쪽 각짐, 끝=우측만 라운드. */
.calendar-schedule__item.is-multi-start{border-radius:4px 0 0 4px;}
.calendar-schedule__item.is-multi-mid{border-radius:0;}
.calendar-schedule__item.is-multi-end{border-radius:0 4px 4px 0;}

/* 다일 제목 이어짐(overflow) : 다일 세그먼트에서 제목을 노출하는 셀(시작/주 재시작)의 제목을
   한 칸에서 자르지 않고, 뒤따르는 같은 색 연결 바 위로 넘쳐 흐르게 해 하나의 라벨 바처럼 읽히게 한다.
   - 넘침 폭(=클립 지점)은 PHP가 붙인 is-span-N(이 주 안에서 세그먼트가 이어지는 칸 수, 토요일까지 clamp)으로 제한
     → 넘친 텍스트가 다음 주/테이블 밖이나 다른 일정 칸으로 새지 않는다.
   - z-index:1 로 뒤 칸(mid/end, z-index auto) 연결 바 배경보다 위에 그려 텍스트가 바 위에 얹히게 한다.
   - pointer-events:none 로 넓어진 텍스트 박스가 아래 셀의 탭/클릭을 가로채지 않게 한다.
   단일(1일) 일정 칩에는 이 클래스가 붙지 않으므로 기존 잘림/말줄임 동작은 그대로다. */
.calendar-schedule__item.is-title-overflow{overflow:visible;z-index:1;}
.calendar-schedule__item.is-title-overflow .txt{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    word-break:normal;
    pointer-events:none;
}
/* 텍스트 박스를 세그먼트 칸 수(N)만큼 넓혀 그 폭에서 클립.
   100%=제목 셀 콘텐츠 폭(≈칼럼폭-여백)이라 N*100%는 실제 N칸보다 살짝 좁아
   항상 세그먼트/토요일 안쪽에서 잘린다(밖으로 넘치지 않는 안전 방향). */
.calendar-schedule__item.is-span-2 .txt{width:calc(200% - 6px);}
.calendar-schedule__item.is-span-3 .txt{width:calc(300% - 6px);}
.calendar-schedule__item.is-span-4 .txt{width:calc(400% - 6px);}
.calendar-schedule__item.is-span-5 .txt{width:calc(500% - 6px);}
.calendar-schedule__item.is-span-6 .txt{width:calc(600% - 6px);}
.calendar-schedule__item.is-span-7 .txt{width:calc(700% - 6px);}

/* =========================================================================
 * 주(week) 경계 '이어짐' 힌트 : 다일 세그먼트가 주 경계로 잘렸을 때, 잘린 쪽에만
 * 방향 화살표(▸/◂)를 얹어 "다음 주로 계속 / 이전 주에서 이어짐"을 명확히 한다.
 * (진짜 시작/끝에는 PHP가 마커를 안 붙이므로 라운드 유지 = 힌트 없음, 표준 캘린더 관례)
 * 화살표는 raw 이모지 대신 CSS border-트릭 삼각형으로 그린다.
 * 바 배경은 모두 밝은 파스텔(파랑/빨강/회색)이라, 어두운 반투명 슬레이트색 화살표가
 * 색상에 무관하게 대비를 확보한다.
 * 배치: 아이템은 overflow:hidden(klubo.css) → 삼각형이 바 안쪽에 클립되어 테이블 밖으로
 * 삐져나가지 않는다. (제목 오버플로 셀은 overflow:visible이나 삼각형이 right/left 안쪽에 위치)
 * ========================================================================= */
/* 우측 이어짐: 아이템의 미사용 :after 를 우향 삼각형으로. (다음 주로 계속) */
.calendar-schedule__item.is-cont-right:after{
    content:"";
    position:absolute;
    right:3px;
    top:50%;
    margin-top:-4px;
    width:0;
    height:0;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:5px solid rgba(34,39,51,.55);
    pointer-events:none;
    z-index:2;
}
/* 좌측 이어짐: 주 경계 다음 셀(주 재시작=일요일)에는 방향 힌트를 붙이지 않는다.
   좌향 삼각형(◂)이 제목 바 왼쪽에 붙으면 "이어지는 하나의 바"라는 흐름을 끊어(네모처럼 보임) 오히려 방해가 된다.
   → 삼각형을 그리지 않고(:before display:none 유지), 각진 좌측 모서리(mid의 border-radius:0) + 제목이 바 왼쪽에
   붙는 것만으로 seamless한 이어짐을 표현한다. accent(|)가 되살아나지 않도록 :before는 계속 숨김 상태로 둔다.
   (우측 ▸ "다음 주로 계속"은 유지 — 잘려나갈 방향을 사용자에게 알려야 하므로.) */
.calendar-schedule__item.is-cont-left:before{
    display:none;
}
/* 압축(막대) 모드: 얇은 6px 막대엔 8px 화살표가 어색하므로 힌트를 숨긴다(오탐/삐침 방지). */
.calendar-table__contents.is-compact .calendar-schedule__item.is-cont-right:after,
.calendar-table__contents.is-compact .calendar-schedule__item.is-cont-left:before{display:none;}

/* 빈 레인 스페이서: 겹치는 일정이 인접 셀과 같은 줄에 정렬되도록, 비어있는 상위 레인의 세로 자리만 차지(투명). */
.calendar-schedule__item.is-empty-lane{background:transparent;}
.calendar-schedule__item.is-empty-lane:before{display:none;}

/* 미투표/미정(unvoted): 기존 배경(#f3f3f3)이 셀 배경과 거의 같아 흐릿해 식별이 어려움 →
   더 진한 중성 회색 배경 + 진한 텍스트/accent로 대비를 높여 명확히 보이게 한다. (범례 점도 동일 톤으로 통일) */
.calendar-schedule__item.unvoted{background:#d5d9e2;color:#3f4453;}
.calendar-schedule__item.unvoted:before{background:#737a8a;}
.color-distinguished__item.unvoted:before{background:#737a8a;}

/* "외 N개 더 있음" 인디케이터: '상태'가 아니라 '더보기' 메타 어포던스이므로 상태 팔레트(파랑/빨강)와 겹치지 않는 중성 회색.
   기존 진회색 solid(#5c6270)는 파스텔 상태칩들 사이에서 유일한 진한 블록이라 보조정보인데 가장 튀었음 →
   연한 파스텔 회색 배경 + 진회색 "+"(글리프에 #5c6270 재활용, 대비 4.6:1)로 뒤집어 컨트롤답게 물러나게 한다. */
.calendar-schedule__more{background:#e4e7ee;color:#5c6270;}

/* 지난 날짜 딤 처리: 셀 전체(td opacity:0.5)에 걸면 다일 일정 바의 '과거 구간'만 반투명해져
   같은 일정이 오늘 경계에서 두 가지 색으로 갈려 보인다(제목 있는 시작 셀=과거라 더 흐림).
   opacity는 자식에서 되돌릴 수 없으므로, 딤은 '날짜 숫자'에만 적용하고 일정 바는 원색을 유지한다. */
.calendar-table td.week-sep.this-month--not{opacity:1;}
.calendar-table td.week-sep.this-month--not .date{opacity:0.5;}

/* =========================================================================
 * 압축(막대) 모드 : 한 날짜 일정 2개 이상 클릭 시 달력을 얇은 막대만 남기고
 * 하단에 상세 패널을 노출한다(삼성/구글 캘린더 스타일).
 * ========================================================================= */
/* 셀 세로 높이 축소 → 달력 전체가 압축돼 보이게 */
.calendar-table__contents.is-compact .calendar-table td.week-sep{height:52px;}
/* 셀 높이도 best-effort로 함께 부드럽게(무시하는 브라우저는 기존처럼 스냅, 무해).
   WebView에서 표 셀 height 트랜지션이 깨지면 이 규칙만 되돌릴 수 있게 별도 규칙으로 둔다. */
.calendar-table td.week-sep{transition:height .26s ease;}
/* 압축/복원을 부드럽게: 칩 높이·상단여백을 패널 접힘(.26s)과 동일 타이밍으로 트랜지션
   (텍스트 display 전환은 즉시라 무방). */
.calendar-schedule__item{transition:height .26s ease, margin-top .26s ease;}
/* 일정 칩: 텍스트를 숨겨 얇은 막대만 남긴다(색/연결/라운드는 유지, 높이만 축소) */
.calendar-table__contents.is-compact .calendar-schedule__item{height:6px;margin-top:2px;}
.calendar-table__contents.is-compact .calendar-schedule__item .txt{display:none;}
/* 얇은 막대에서는 좌측 accent 세로선 생략(막대만 남겨 더 담백하게) */
.calendar-table__contents.is-compact .calendar-schedule__item:before{display:none;}
/* '외 일정 더 있음' 인디케이터 숨김 */
.calendar-table__contents.is-compact .calendar-schedule__more{display:none;}

/* 선택 셀 : 박스 아웃라인 + 은은한 배경 + 굵은 숫자로 강조.
   (좌측 세로 라인 border-left식 강조는 사용하지 않는다) */
.calendar-table td.week-sep.is-selected{box-shadow:inset 0 0 0 2px #3677f6;background:#eef4ff;}
.calendar-table td.week-sep.is-selected .date{font-weight:700;color:#3677f6;}
.calendar-table td.week-sep.is-selected.this-month--not .date{opacity:1;}

/* =========================================================================
 * 드래그 핸들(손잡이) : 달력과 하단 패널 사이의 grabber. 위로 당겨 열고 아래로 닫는다.
 * 항상 표시되며, 손잡이 위에서만 세로 드래그/탭이 패널 토글로 동작한다.
 * ========================================================================= */
.calendar-drag-handle{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;touch-action:none;}
.calendar-drag-handle__bar{width:40px;height:4px;border-radius:2px;background:#d5d9e2;transition:background .2s ease;}
/* 압축(패널 열림) 상태에서는 '당겨 닫을 수 있음' 힌트로 살짝 진하게 */
.calendar-table__contents.is-compact .calendar-drag-handle__bar{background:#a9afbd;}

/* =========================================================================
 * 하단 상세 패널 : 그 날의 일정 리스트(구분선 기반, 카드형 지양)
 * ========================================================================= */
.calendar-day-detail{margin-top:16px;border-top:8px solid #f4f5f7;scroll-margin-top:12px;scroll-margin-bottom:16px;}
/* 열기/닫기 공통: keyframe 대신 '높이째' 트랜지션(translateY 미사용 → 달력 펼침/접힘과 방향 충돌 없음).
   JS가 시작 높이(열기=0 / 닫기=현재)를 인라인 고정 → 리플로우 → 목표 높이로 트랜지션하고,
   transitionend(height)에서 열기=인라인 제거(auto 복원) / 닫기=DOM 제거 한다.
   margin-top/border-top/padding까지 함께 트랜지션해야 잔여 갭 스냅이 안 생긴다.
   (selectDay는 애니메이션 없이 조용히 교체 → base에 별도 열림 애니메이션을 두지 않는다.) */
.calendar-day-detail.is-opening,
.calendar-day-detail.is-closing{
    overflow:hidden;
    transition:height .26s ease, opacity .22s ease, margin-top .26s ease, border-top-width .26s ease, padding-top .26s ease, padding-bottom .26s ease;
}
.calendar-day-detail.is-closing{pointer-events:none;}
.calendar-day-detail__head{display:flex;justify-content:space-between;align-items:center;padding:16px 8px;}
.calendar-day-detail__date{font-size:16px;font-weight:700;color:#222;}
.calendar-day-detail__close{position:relative;width:44px;height:44px;margin:-10px -10px -10px 0;background:transparent;border:0;cursor:pointer;}
.calendar-day-detail__close:before,
.calendar-day-detail__close:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:#8d92a3;border-radius:1px;}
.calendar-day-detail__close:before{transform:translate(-50%,-50%) rotate(45deg);}
.calendar-day-detail__close:after{transform:translate(-50%,-50%) rotate(-45deg);}

/* head 우측 액션(보기 전환 + 닫기) */
.calendar-day-detail__actions{display:flex;align-items:center;gap:4px;}
.calendar-day-detail__actions .calendar-day-detail__close{margin:-10px 0 -10px 0;}
/* 보기 전환 버튼: 리스트 ↔ 시간대별. 아이콘은 '전환될 뷰'를 표시(타임라인 중이면 리스트 아이콘). */
.calendar-day-detail__view-toggle{position:relative;width:44px;height:44px;margin:-10px 0;background:transparent;border:0;cursor:pointer;}
.calendar-day-detail__view-ico{position:absolute;top:50%;left:50%;}
/* 아이콘 통일: 세 아이콘(리스트/시계/닫기)을 16px 광학 박스 + 2px 선 + #8d92a3로 맞춘다.
   모두 top:50%/left:50% 기준 중앙 정렬이라 head 우측 actions에서 세로 중심이 일치한다. */
/* 리스트 아이콘: 가로 3줄(중앙=본체, ::before=위, ::after=아래). 3줄이 ±5로 총 12px 세로 → 시계(16)와 광학 균형 */
.calendar-day-detail__view-ico--list{width:16px;height:2px;background:#8d92a3;border-radius:1px;transform:translate(-50%,-50%);}
.calendar-day-detail__view-ico--list:before,
.calendar-day-detail__view-ico--list:after{content:"";position:absolute;left:0;width:16px;height:2px;background:#8d92a3;border-radius:1px;}
.calendar-day-detail__view-ico--list:before{top:-5px;}
.calendar-day-detail__view-ico--list:after{top:5px;}
/* 시계 아이콘: 원(본체) + 바늘(::before 세로, ::after 가로). 18→16으로 축소해 리스트/닫기와 크기 통일 */
.calendar-day-detail__view-ico--clock{width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #8d92a3;border-radius:50%;box-sizing:border-box;}
.calendar-day-detail__view-ico--clock:before{content:"";position:absolute;left:50%;top:50%;width:2px;height:5px;background:#8d92a3;border-radius:1px;transform:translate(-50%,-100%);}
.calendar-day-detail__view-ico--clock:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:2px;background:#8d92a3;border-radius:1px;transform:translate(-10%,-50%);}

.calendar-day-detail__list{margin:0;padding:0;list-style:none;}
.calendar-day-detail__row{border-bottom:1px solid #f0f0f0;}
/* 마지막 행 선 제거: foot의 border-top과 ~간격 두고 겹쳐 실선 2줄로 보이는 문제 방지(경계 실선 1줄만 유지) */
.calendar-day-detail__row:last-child{border-bottom:0;}
.calendar-day-detail__link{display:flex;align-items:center;gap:16px;padding:16px 8px;min-height:44px;box-sizing:border-box;}
.calendar-day-detail__time{flex:none;min-width:48px;text-align:right;font-size:13px;color:#8d92a3;}
.calendar-day-detail__bar{flex:none;width:4px;height:32px;border-radius:2px;background:#737a8a;}
.calendar-day-detail__bar.vote--attend{background:#79afff;}
.calendar-day-detail__bar.vote--absence{background:#f53c14;}
.calendar-day-detail__bar.vote--unvoted{background:#737a8a;}
.calendar-day-detail__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.calendar-day-detail__title{font-size:15px;font-weight:600;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calendar-day-detail__sub{font-size:13px;color:#8d92a3;}

/* =========================================================================
 * 시간대별(타임라인) 뷰 : 00~24시 전체를 스크롤로 표시.
 * 종일/다일 일정은 상단 별도 섹션, 시각 일정은 해당 시간 위치에 블록으로 배치.
 * 1시간 높이 = 64px (JS CAL_HOUR_H과 일치해야 함).
 * ========================================================================= */
/* 종일/다일 섹션 (타임라인 위 고정 노출) */
.calendar-day-detail__allday{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px;}
.calendar-day-detail__allday-item{display:block;padding:10px 12px;border-radius:6px;background:#e9ebf0;color:#333;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calendar-day-detail__allday-item.vote--attend{background:#e7f0ff;}
.calendar-day-detail__allday-item.vote--absence{background:#ffe9e4;}
/* 스크롤 영역 */
/* 높이는 JS(sizeDayDetailTimeline)가 가용 뷰포트에 맞춰 인라인으로 지정한다.
   아래 값은 JS 미실행 시 폴백. overscroll-behavior:contain으로 내부 스크롤이 페이지로 전파되지 않게 해
   페이지/타임라인 이중 스크롤 충돌을 줄인다. */
.calendar-day-detail__timeline{position:relative;height:45dvh;max-height:45dvh;min-height:200px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid #f0f0f0;}
.calendar-day-detail__timeline-inner{position:relative;}
/* 시간 눈금(가로선 + 좌측 라벨). 선은 좌측 거터(56px) 이후부터 그림. */
.calendar-day-detail__hour{position:absolute;left:0;right:0;height:0;}
.calendar-day-detail__hour:after{content:"";position:absolute;left:56px;right:8px;top:0;border-top:1px solid #eef0f4;}
.calendar-day-detail__hour-label{position:absolute;left:0;top:-8px;width:44px;text-align:right;font-size:11px;color:#a9afbd;line-height:1;}
/* 일정 블록 영역 : 좌측 시간 거터(56px) 이후, 우측 8px 여백 */
.calendar-day-detail__events{position:absolute;left:56px;right:8px;top:0;bottom:0;}
.calendar-day-detail__event{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:6px;background:#737a8a;color:#fff;overflow:hidden;line-height:1.25;}
.calendar-day-detail__event.vote--attend{background:#5a97f0;}
.calendar-day-detail__event.vote--absence{background:#f06a4f;}
.calendar-day-detail__event.vote--unvoted{background:#737a8a;}
.calendar-day-detail__event-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calendar-day-detail__event-time{font-size:11px;opacity:.9;}

/* 빈 상태(일정 없는 날): 안내 문구 + 쓰기권한 시 [일정 추가] 버튼 */
.calendar-day-detail__empty{padding:32px 16px;text-align:center;}
.calendar-day-detail__empty-text{font-size:14px;color:#8d92a3;margin:0 0 16px;}
.calendar-day-detail__add{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:8px;background:#3677f6;color:#fff;font-size:15px;font-weight:600;cursor:pointer;}

/* 일정이 있을 때 패널 하단 [일정 추가] 버튼 (리스트와 상단 구분선으로 구분) */
.calendar-day-detail__foot{margin-top:24px;padding:24px 8px 8px;border-top:1px solid #f0f0f0;text-align:center;}
.calendar-day-detail__foot .calendar-day-detail__add{width:100%;}

/* =========================================================================
 * 빠른 추가 입력줄 (삼성 갤럭시 캘린더식) : 제목 input + [+] 버튼.
 * 제목만 입력하고 [+]/Enter → 그 날짜에 하루종일 일정 즉시 생성.
 * 빈 날 패널과 일정 있는 패널(foot) 모두 동일하게 노출.
 * ========================================================================= */
/* 안내는 input placeholder 한 줄로 요약(별도 라벨/안내 블록 없음). */
.calendar-day-detail__quickadd{display:flex;align-items:center;gap:8px;padding:16px 8px;}
/* foot 안에서는 foot이 이미 상단 여백/패딩을 주므로 입력줄 자체 패딩 제거(이중 여백 방지) */
.calendar-day-detail__foot .calendar-day-detail__quickadd{padding:0;}
.calendar-day-detail__quickadd-input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 16px;border:1px solid #d5d9e2;border-radius:8px;background:#fff;font-size:15px;color:#222;box-sizing:border-box;}
.calendar-day-detail__quickadd-input::placeholder{color:#a9afbd;}
.calendar-day-detail__quickadd-input:focus{outline:none;border-color:#3677f6;box-shadow:0 0 0 2px rgba(54,119,246,.15);}
/* [+] 버튼: 48x48 정사각, 중성 회색 배경 / 흰 십자(가상요소 가로·세로 막대). raw 이모지 미사용.
   비활성(disabled)으로 오인되지 않도록 채도 있는 슬레이트 회색(#737a8a, 코드베이스 공통 중성색) 사용 —
   흰 십자 대비 약 4.3:1로 충분. hover/active는 한 단계 진한 회색(#5c6270). */
.calendar-day-detail__quickadd-btn{position:relative;flex:none;width:48px;height:48px;border:0;border-radius:8px;background:#737a8a;cursor:pointer;}
.calendar-day-detail__quickadd-btn:before,
.calendar-day-detail__quickadd-btn:after{content:"";position:absolute;top:50%;left:50%;background:#fff;border-radius:1px;}
.calendar-day-detail__quickadd-btn:before{width:18px;height:2px;transform:translate(-50%,-50%);}
.calendar-day-detail__quickadd-btn:after{width:2px;height:18px;transform:translate(-50%,-50%);}
.calendar-day-detail__quickadd-btn:hover,
.calendar-day-detail__quickadd-btn:active{background:#5c6270;}

/* =========================================================================
 * 플로팅 '위로가기' 버튼(#klubo-bottom-topBtn / .btn-top, position:fixed·z-index:10)과의 겹침 해결.
 * 하단 상세 패널(빠른추가 [+]/input 포함)이 열려 있는 동안(.calendar-table__contents.is-compact)에는
 * 우하단 플로팅 버튼이 빠른추가 [+]/input 위에 겹쳐 탭을 가로채므로 숨긴다.
 * - btn-top은 전역 레이아웃(navi_bottom.php)에 있어 캘린더 컨테이너 밖 → body:has()로 상태를 감지.
 *   (:has()는 klubo.css 등에서 이미 사용 중 = 대상 WebView에서 지원 확인됨)
 * - btn-top은 스크롤 핸들러가 inline display로 토글하므로 !important로 확실히 덮는다.
 * - 패널을 닫으면(is-compact 제거) :has()가 즉시 재평가되어 스크롤 상태에 따라 다시 노출된다.
 * - body:has(...)가 캘린더 패널 열림 상태에서만 매칭되므로 다른 페이지엔 영향 없음(사실상 페이지 스코프).
 * ========================================================================= */
body:has(.calendar-table__contents.is-compact) #klubo-bottom-topBtn{display:none !important;}

/* =========================================================================
 * [M4] 빈 달 인라인 온보딩 : 이번 달에 표시할 일정이 하나도 없을 때 그리드 아래 노출.
 * 카드형 지양(배경 없는 중앙 안내), 8배수 여백, 좌측 세로라인 없음, 폰트는 전역(Pretendard) 상속.
 * ========================================================================= */
.calendar-empty{padding:32px 16px 8px;text-align:center}
.calendar-empty__text{margin:0;font-size:14px;line-height:22px;color:#8d92a3}
.calendar-empty__cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px;padding:0 24px;border-radius:8px;background:#3677f6;color:#fff;font-size:15px;font-weight:600}
.calendar-empty__cta:hover{background:#2e6ae0}

/* =========================================================================
 * 리스트형 일정 컨트롤 툴바 (전체/진행중/지난일정 세그먼트 + 정렬 아이콘 + 달력형 전환) — 한 줄.
 *
 * 리스트형에서는 상단 제목(#calendarTitle)이 비므로 .calendar-table__top을 감추고(is-hidden)
 * 이 툴바가 그 줄을 대신한다. 달력형에서는 반대로 top만 노출(툴바는 is-visible 해제).
 * 좌측 = iOS 스타일 3분할 세그먼트(전체/진행중/지난 일정), 우측 = 정렬 아이콘 + 뷰 전환.
 * 카드/좌측 세로라인 미사용, 여백 8배수, 탭 타깃 44px 이상.
 * ========================================================================= */
.calendar-table__top .top-actions{display:flex;align-items:center;gap:8px;}
.calendar-table__top.is-hidden{display:none;}
.calendar-toolbar{display:none;align-items:center;gap:8px;min-height:48px;padding:16px 0 8px;}
.calendar-toolbar.is-visible{display:flex;}
/* PC처럼 넓은 화면에서 세그먼트가 끝없이 늘어나 헐렁해 보이지 않도록 상한을 두고,
   나머지 공간은 spacer가 흡수해 정렬 아이콘·뷰 전환을 우측에 고정한다(모바일에선 spacer가 0에 가깝게 수축). */
.calendar-toolbar__spacer{flex:1 1 auto;}
/* 뷰 전환 아이콘(스프라이트 30x24)을 44px 탭 타깃으로 감싸고, 글리프 광학 위치를 컨테이너 우측 기준으로 맞춘다 */
.calendar-toolbar .btn-calendar--table{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:-8px;}

/* =========================================================================
 * 시간 필터 세그먼트(전체/진행중/지난 일정) : iOS 세그먼트 컨트롤 톤(회색 트랙 + 흰 알약).
 * 선택값은 로컬스토리지(KLUBO_CALENDAR_TIME_FILTER)에 저장해 재방문 시 유지, "전체" 선택 시 삭제.
 * ========================================================================= */
.calendar-segment{flex:0 1 360px;display:flex;background:#eceef2;border-radius:9px;padding:2px;min-height:36px;}
.calendar-segment__btn{flex:1;border:0;background:transparent;font-size:13px;font-weight:600;color:#6b7086;padding:6px 4px;border-radius:7px;cursor:pointer;white-space:nowrap;}
.calendar-segment__btn.on{background:#fff;color:#222;font-weight:700;box-shadow:0 1px 2px rgba(20,25,40,.15);}

/* 정렬 : 라벨 없는 원형 아이콘 버튼. 탭할 때마다 최신순↔오래된순 반전(현재값은 aria-label로만 안내). */
.calendar-sort-icon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #E0E2E6;background:#fff;cursor:pointer;}
.calendar-sort-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;stroke:#3677f6;}
.calendar-sort-icon:active{background:#f4f6fa;}

/* =========================================================================
 * 리스트형 일정(nType=CALENDAR) 아이템 — 참석 상태를 채워진 솔리드 칩으로(3안, 사용자 선택).
 * 공용 .vote-state/.badge(다른 화면에서도 재사용됨)는 건드리지 않고 이 리스트 전용 클래스로 분리한다.
 * ========================================================================= */
.calendar-vote-chip{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:#eceef2;color:#6b7086;font-size:11.5px;font-weight:700;margin-bottom:4px;}
.calendar-vote-chip.is-attend{background:rgba(54,119,246,.12);color:#3677f6;}
.calendar-vote-chip.is-absence{background:rgba(245,60,20,.1);color:#f53c14;}