/* 캘린더 위젯 스킨 — vue-widget 셸 기반
   @version 20260301-001 */

/* 헤더 — 캘린더 전용 오버라이드 (아이콘+월 | nav+더보기) */
.cal-widget .cal-widget-header {
    padding: 12px 16px;
}

.cal-widget-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-widget-title {
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-primary);
}

.cal-widget-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal-widget-nav {
    background: none;
    border: none;
    color: var(--gb-text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
    font-size: var(--gb-font-sm);
}

.cal-widget-nav:hover {
    color: var(--gb-text-primary);
    background: var(--gb-surface-raised);
}

/* 본문 — 캘린더 전용 패딩 */
.cal-widget .cal-widget-body {
    padding: 12px 16px 16px;
}

/* 요일 헤더 */
.cal-widget-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.25rem;
}

.cal-widget-dow {
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-tertiary);
    padding: 0.25rem 0;
}

.cal-widget-dow.cal-sun { color: var(--gb-danger); }
.cal-widget-dow.cal-sat { color: var(--gb-primary); }

/* 날짜 그리드 */
.cal-widget-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    transition: opacity 0.2s;
}

.cal-widget-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0 0.2rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.15s;
    min-height: 2.5rem;
}

.cal-widget-day:hover:not(.cal-empty) {
    background: var(--gb-surface-raised);
}

.cal-widget-day.cal-empty {
    cursor: default;
}

.cal-day-num {
    font-size: var(--gb-font-sm);
    line-height: 1;
    color: var(--gb-text-secondary);
}

.cal-widget-day.cal-sun .cal-day-num { color: var(--gb-danger); }
.cal-widget-day.cal-sat .cal-day-num { color: var(--gb-primary); }

/* 오늘 */
.cal-widget-day.cal-today .cal-day-num {
    background: var(--gb-primary);
    color: var(--gb-text-on-primary);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 선택된 날짜 */
.cal-widget-day.cal-selected {
    background: var(--gb-primary-light);
}

/* 이벤트 도트 */
.cal-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* 다가오는 일정 */
.cal-widget-upcoming {
    border-top: 1px solid var(--gb-border-subtle);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.cal-widget-upcoming-title {
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-secondary);
    margin-bottom: 0.5rem;
    cursor: pointer;
}

/* vue-widget-list 오버라이드 — 캘린더 이벤트 행 */
.cal-widget .cal-widget-event-list {
    padding: 0;
}

.cal-widget .cal-widget-event-list > .cal-widget-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gb-border-subtle);
    font-size: var(--gb-font-sm);
    transition: opacity 0.2s;
}

.cal-widget .cal-widget-event-list > .cal-widget-event:last-child {
    border-bottom: none;
}

.cal-widget-event .cal-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

.cal-event-date {
    color: var(--gb-text-tertiary);
    font-size: var(--gb-font-xs);
    white-space: nowrap;
    min-width: 4.5rem;
}

.cal-event-title {
    flex: 1;
    color: var(--gb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-event-time {
    color: var(--gb-text-tertiary);
    font-size: var(--gb-font-xs);
    white-space: nowrap;
}

/* 날짜 선택 시 일정 dim */
.cal-widget-event.cal-event-dim {
    opacity: 0.3;
}

/* 빈 상태 */
.cal-widget-empty {
    text-align: center;
    padding: 1rem 0;
    color: var(--gb-text-tertiary);
    font-size: var(--gb-font-sm);
}