@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    /* [Moonlit Theme Colors] */
    --cal-bg: rgb(242 242 242 / 85%);       /* 캘린더 배경 */
    --cal-accent: #fc310b;                  /* 민트 포인트 */
    --cal-border: rgb(252 49 11 / 20%); /* 빛나는 테두리 */
    --cal-text: #3f3f3f;
    --cal-text-muted: #9e9e9e;
    --cal-grid-line: rgba(255, 255, 255, 0.05);
}

.unified-wrapper {
    background: transparent;
    padding: 0px;
    /*min-height: 100vh;*/
    box-sizing: border-box;
    color: var(--cal-text);
    align-content: center;
}

/* --- [메인 프레임] --- */
.elf-board {
    background: var(--cal-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 8px; 
    border: 1px solid var(--cal-border);
    /*box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(100, 255, 218, 0.05);*/
    padding: 25px;
    max-width: 1100px;
    margin: 0px auto;
    position: relative;
}

.elf-board::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cal-accent), transparent);
    opacity: 0.5;
}

/* --- 헤더 --- */
.calendar-header {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 25px; gap: 20px;
}

.calendar-header .title {
    font-size: 1.6em; font-weight: 700; color: var(--cal-text);
    text-transform: uppercase; letter-spacing: 2px;
}

.btn-mv {
    background: transparent; border: 1px solid var(--cal-border);
    color: var(--cal-text-muted);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
    transform: rotate(45deg);
    border-radius: 100%;
}
.btn-mv svg { transform: rotate(-45deg); width: 14px; height: 14px; fill: currentColor; }

.btn-mv:hover {
    background: var(--cal-border); color: var(--cal-accent); border-color: var(--cal-accent);
    /*box-shadow: 0 0 10px var(--cal-accent);*/
}

/* --- 그리드 영역 --- */
.parchment-area { background: transparent; }

.week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); 
    text-align: center;
    padding-bottom: 10px; margin-bottom: 0;
}
.week-days div { font-size: 0.85em; color: var(--cal-text-muted); font-weight: 600; letter-spacing: 1px; }
.week-days div:first-child { color: #ff8e8e; }
.week-days div:last-child { color: #62a0cd; }

/* 날짜 그리드 */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    
    /* 높이 480px 고정 (6주 기준) */
    height: 480px; 
    grid-template-rows: repeat(6, 1fr);
    
    /* [수정] 갭을 넓혀서 칸 분리감을 줌 */
    gap: 4px; 
    background: transparent; /* 배경 투명하게 (선 없앰) */
    border: none; /* 외곽선 제거 */
}

/* 날짜 칸 (활성 날짜) */
.day {
    /* [수정] 활성 날짜만 배경색과 테두리 부여 */
    background: #9e9e9e33;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    height: 100%;
    min-height: 0;
    padding: 6px;
    position: relative;
    transition: all 0.2s;
    display: flex; flex-direction: column;
}

.day:hover { 
    background: rgb(44 44 44 / 15%); 
    border-color: var(--cal-border);
    transform: translateY(-2px);
}

/* [핵심 수정] 빈 칸 (날짜 없음) */
.day.empty { 
    background: transparent !important; /* 배경 없음 */
    border: none !important; /* 테두리 없음 */
    box-shadow: none !important;
    cursor: default;
    pointer-events: none; /* 클릭 불가 */
    opacity: 0.3; /* 희미하게 */
}
/* 빈 칸에 빗금 패턴 추가 (선택사항 - 원치 않으면 삭제 가능) */
.day.empty::after {
    content: '×'; /* 또는 빗금 이미지 */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.05); font-size: 1.5em; font-weight: 100;
}


/* 오늘 날짜 */
.day.today {
    /*background: rgb(252 49 11 / 15%);*/
    border: 1px solid var(--cal-accent);
    box-shadow: 0 0 10px  rgb(44 44 44 / 15%);
}
.day.selected { background: rgb(252 49 11 / 15%) !important; border-color: var(--cal-accent); }

.date-num {
    font-size: 0.9em; font-weight: 500; color: var(--cal-text-muted);
    margin-bottom: 4px; 
}
.day.today .date-num { color: var(--cal-accent); font-weight: 700; }
.days-grid > div:nth-child(7n+1) .date-num { color: #ff8e8e; }
.days-grid > div:nth-child(7n) .date-num { color: #62a0cd; }


/* --- 일정 표시 --- */
.event-list { display: flex; flex-direction: column; gap: 2px; }

.mobile-indicators { 
    display: none; 
    gap: 3px; margin-top: auto; justify-content: center; flex-wrap: wrap;
}

/* PC 일정 바 */
.evt {
    display: block; width: 100%;
    padding: 2px 5px; 
    font-size: 0.8em; 
    color: #fff; border-radius: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,255,255,0.1);
    border-left: 3px solid transparent; transition: transform 0.2s;
}
.evt:hover { transform: translateX(2px); opacity: 0.9; }

/* 모바일 점 */
.m-bar { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 4px currentColor; }

.evt.type-1 { border-left-color: #fc310b; background: linear-gradient(90deg, #fc310b26, transparent); color: #3f3f3fbf; }
.evt.type-2 { border-left-color: #a3c359; background: linear-gradient(90deg, #b3cb8480, transparent); color: #3f3f3fbf; }
.evt.type-3 { border-left-color: #ef9a9a; background: linear-gradient(90deg, rgba(239,154,154,0.2), transparent); color: #3f3f3fbf; }
.evt.type-4 { border-left-color: #ffe082; background: linear-gradient(90deg, rgba(255,224,130,0.2), transparent); color: #3f3f3fbf; }
.evt.type-5 { border-left-color: #b0bec5; background: linear-gradient(90deg, rgba(176,190,197,0.2), transparent); color: #3f3f3fbf; }

.m-bar.type-1 { background: #fc310b; color: #fc310b; }
.m-bar.type-2 { background: #a3c359; color: #a3c359; }
.m-bar.type-3 { background: #ef9a9a; color: #ef9a9a; }
.m-bar.type-4 { background: #ffe082; color: #ffe082; }
.m-bar.type-5 { background: #b0bec5; color: #b0bec5; }


/* --- 하단 상세 리스트 --- */
#calendar-event-list {
    margin-top: 20px; padding: 20px; background: #9e9e9e33;
    border-radius: 4px; border-left: 2px solid var(--cal-accent);
}
#calendar-event-list h3 { margin: 0 0 15px 0; font-size: 1.1em; color: var(--cal-accent); }
.list-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.list-item:last-child { border-bottom: none; }
.list-item .dot { width: 6px; height: 6px; transform: rotate(45deg); margin-right: 15px; background: var(--cal-text-muted); }
.dot.type-1 { background: #fc310b; box-shadow: 0 0 5px #fc310b; }
.dot.type-2 { background: #a3c359; box-shadow: 0 0 5px #a3c359; }
.dot.type-3 { background: #ef9a9a; box-shadow: 0 0 5px #ef9a9a; }
.dot.type-4 { background: #ffe082; box-shadow: 0 0 5px #ffe082; }
.list-item .time {color: var(--cal-text-muted); margin-right: 10px; font-size: 0.9em; }
.list-item .title { color: var(--cal-text); }

.calendar-footer-controls {margin-top: 15px;text-align: right;}
.calendar-footer-controls2 {text-align: right;}
.btn-refresh { background: transparent; border: none; color: var(--cal-text-muted); font-size: 0.8em; cursor: pointer; }
.btn-refresh:hover { color: var(--cal-accent); text-decoration: underline; }


/* --- [모바일 반응형 처리] --- */
.is-mobile-view .days-grid {
    height: auto !important;
    grid-template-rows: auto !important;
    gap: 4px; /* 모바일에서도 갭 유지 */
}
.is-mobile-view .day { 
    min-height: 60px; height: auto; padding: 4px; 
}
.is-mobile-view .event-list { display: none !important; }
.is-mobile-view .mobile-indicators { display: flex !important; }

/* iframe 스크롤 */
.is-iframe-mode::-webkit-scrollbar { width: 4px; }
.is-iframe-mode::-webkit-scrollbar-thumb { background: var(--cal-border); }

/* --- [모바일 화면 전체 덮기 & 상단 정렬 패치] --- */
@media (max-width: 768px) {
    .unified-wrapper {
        align-content: start !important; /* 상단 정렬 */
        padding-top: 0px !important;     /* 1. 상단 여백 제거 (메뉴바 고려) */
    }
        #container_wr {padding: 0;}
        #footer {display: none;}

    .elf-board {
        /* 2. 박스가 배경을 모두 가리도록 화면 꽉 채우기 */
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh;           /* 높이도 화면 전체로 확장 */
        margin: 0 !important;        /* 여백 제거 */
        border-radius: 0;            /* 둥근 모서리 제거 */
        border: none;                /* 외곽선 제거 */
        
        /* 배경을 불투명(1)하게 변경하여 뒤를 완전히 가림 */
        box-shadow: none;
    }

    .calendar-footer-controls{display: none;}
    .calendar-footer-controls2 {margin-top: 15px;}

}