@charset "utf-8";

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

:root {
    --cal-text: #1a3a5c;
    --cal-text-muted: #2a5a8c;
    --cal-accent: #00aacc;
    --cal-border: rgba(0, 150, 200, 0.3);
}

.unified-wrapper {
    background: transparent;
    padding: 0px;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
    color: var(--cal-text);
    align-content: center;
}

/* --- [메인 프레임] --- */
.elf-board {
    padding: 25px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1100px;
    margin: 0px auto;
    position: relative;
}

.elf-board::before {
    display: none;
}

/* --- 헤더 --- */
.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: #1a3a5c;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}


.btn-mv {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(100, 180, 220, 0.6);
    border-radius: 50%;  /* 원형으로 */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    transform: none;  /* 마름모 회전 제거 */
    box-shadow: 0 2px 6px rgba(100, 180, 220, 0.3);
}

.btn-mv:hover {
    background: rgba(100, 180, 220, 0.7);
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(100, 180, 220, 0.6);
}

.calendar-header .btn-mv:first-child::after {
    content: '◀';
    display: block;
    transform: none;
    font-size: 11px;
    color: #1a3a5c;
}

.calendar-header .btn-mv:last-child::after {
    content: '▶';
    display: block;
    transform: none;
    font-size: 11px;
    color: #1a3a5c;
}

.calendar-header .btn-mv:first-child:hover::after,
.calendar-header .btn-mv:last-child:hover::after {
    color: white; /* 호버 컬러 */
}


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

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

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

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

.day:hover { 
    background: rgba(100, 255, 218, 0.08); 
    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: rgba(100, 200, 218, 0.3);
    border: 1px solid var(--cal-accent);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.1);
}
.day.selected { background: rgba(100, 255, 218, 0.15) !important; border-color: var(--cal-accent); }

.date-num {
    font-size: 0.9em; color: #2a5a8c; font-weight: 700; 
    margin-bottom: 4px; 
}
.day.today .date-num { color: #0077aa; font-weight: 700; }
.days-grid > div:nth-child(7n+1) .date-num { color: #cc4444; }
.days-grid > div:nth-child(7n) .date-num   { color: #2266cc; }


/* --- 일정 표시 --- */
.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: #1a3a5c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.6);
    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: #b39ddb; background: rgba(179, 157, 219, 0.4); }
.evt.type-2 { border-left-color: #80cbc4; background: rgba(128, 203, 196, 0.4); }
.evt.type-3 { border-left-color: #ef9a9a; background: rgba(239, 154, 154, 0.4); }
.evt.type-4 { border-left-color: #ffe082; background: rgba(255, 224, 130, 0.4); }
.evt.type-5 { border-left-color: #b0bec5; background: rgba(176, 190, 197, 0.4); }

.m-bar.type-1 { background: #b39ddb; color: #b39ddb; }
.m-bar.type-2 { background: #80cbc4; color: #80cbc4; }
.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: rgba(0,0,0,0.2);
    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: #b39ddb; box-shadow: 0 0 5px #b39ddb; }
.dot.type-2 { background: #80cbc4; box-shadow: 0 0 5px #80cbc4; }
.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 { font-family: monospace; 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; }
.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. 상단 여백 제거 (메뉴바 고려) */
    }

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