/**
 * schedule.css - "일정" 탭 (캘린더 뷰) 전용 컴포넌트
 * 색상은 전부 tokens.css 변수만 사용 (신규 하드코딩 금지).
 * .know-row/.know-list 등 목록 스타일은 knowledge.css를 그대로 재사용하므로 여기선 정의하지 않는다.
 */

.cal-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.cal-header #cal-month-label {
    flex: 1;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cal-header #cal-add-btn {
    margin-left: 0.4rem;
}

.cal-grid {
    padding: 0.8rem 1.1rem;
    flex-shrink: 0;
}

/* 요일 헤더 (한 번만) */
.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-weekday {
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-secondary);
    padding-bottom: 0.4rem;
    font-weight: 600;
}

/* 🆕 2026-07-26: 한 주(week) 단위 블록 — 높이를 고정해서 일정 유무와 상관없이 항상 동일한 크기.
   날짜 칸(.cal-day)이 이 고정 높이를 꽉 채우고, 칩 레이어(.cal-bars-layer)는 그 위에 오버레이로 얹혀서
   칩이 없는 빈 공간을 눌러도 날짜 칸 클릭이 그대로 통과되도록 한다. */
.cal-week {
    position: relative;
    height: 70px;
    margin-bottom: 2px;
}
.cal-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    height: 100%;
}
.cal-day {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.cal-day.empty {
    cursor: default;
}
.cal-day:not(.empty):hover {
    background: var(--card-hover-bg);
}
.cal-day-num {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
}
.cal-day.today .cal-day-num {
    color: var(--primary-color);
    font-weight: 700;
}
.cal-day.selected {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}
.cal-day.selected .cal-day-num {
    color: var(--primary-color);
    font-weight: 700;
}

/* 🆕 2026-07-26: 하루짜리/며칠짜리 구분 없이 전부 색깔 칩(바)으로 통일 (구글/삼성 캘린더 방식)
   날짜 칸 위에 겹쳐지는 오버레이 — 레이어 자체는 pointer-events:none으로 클릭을 통과시키고,
   칩(.cal-bar/.cal-bar-more) 자신만 pointer-events:auto로 다시 받아서 클릭 가능하게 한다. */
.cal-bars-layer {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
}
.cal-bar {
    position: absolute;
    pointer-events: auto;
    height: 15px;
    color: #fff;
    font-size: 0.58rem;
    line-height: 15px;
    padding: 0 4px;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
}
/* 일정별 색상 순환 팔레트 (가독성) */
.cal-bar.c1 { background: var(--cal-color-1); }
.cal-bar.c2 { background: var(--cal-color-2); }
.cal-bar.c3 { background: var(--cal-color-3); }
.cal-bar.c4 { background: var(--cal-color-4); }
.cal-bar.c5 { background: var(--cal-color-5); }
.cal-bar.c6 { background: var(--cal-color-6); }

/* 클리핑된 쪽(주 경계를 넘어 이전/다음 줄로 이어짐)은 둥근 모서리를 생략해 "계속됨"을 암시 */
.cal-bar.clip-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.cal-bar.clip-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.cal-bar-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 한 주에 표시 가능한 줄 수를 넘긴 날짜의 "+N" 더보기 */
.cal-bar-more {
    position: absolute;
    pointer-events: auto;
    height: 14px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 14px;
    color: var(--text-secondary);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.cal-day-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.1rem;
    border-top: 1px solid var(--border-color);
}
.cal-day-list-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
    padding: 2rem 1rem;
}