@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;700;900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Noto+Serif+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.16), transparent 40%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.calendar-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 20%),
        rgba(15, 23, 42, 0.72);
}

.calendar-sheet {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.calendar-sheet:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16);
}

.monthly-note-render {
    display: none;
}

.day-memo-print {
    display: none;
}

.today-highlight {
    box-shadow: inset 0 0 0 2px var(--planner-accent);
}

.loading-spinner {
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid #3b82f6;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.monthly-note-title {
    font-size: 0 !important;
    line-height: 1 !important;
}

.monthly-note-title::before {
    content: "메모" !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media print {
    @page {
        margin: 10mm;
    }

    body {
        background: #ffffff;
    }

    .no-print {
        display: none !important;
    }

    .print-wrap {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .calendar-sheet {
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* space-between을 제거해 헤더 바로 아래에 밀착 정렬 */
    }

    /* 본문 콘텐츠 감싸는 div 팽창 및 정렬 */
    .calendar-sheet > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        justify-content: space-between !important;
    }

    .calendar-sheet > div:first-child {
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }

    .calendar-grid {
        flex-grow: 1 !important;
        display: grid !important;
        grid-template-cols: repeat(7, 1fr) !important;
        grid-template-rows: auto repeat(6, 1fr) !important;
        break-inside: avoid;
    }

    .calendar-day {
        min-height: 0 !important;
        height: 100% !important;
        box-shadow: none !important;
    }

    .day-memo-input {
        display: none !important;
    }

    .day-memo-print {
        display: block !important;
        white-space: pre-wrap !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        color: #334155 !important;
    }

    .print-badge {
        display: none !important;
    }

    .monthly-note-print {
        margin-top: 8px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        padding-top: 6px !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
        background-color: #ffffff !important;
        border-radius: 0 !important;
    }

    .monthly-note-input {
        display: none !important;
    }

    .monthly-note-render {
        display: block !important;
        flex-grow: 1 !important;
        white-space: pre-wrap !important;
        overflow: hidden !important;
        line-height: 20px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        border: none !important;
    }

    /* 가로(Landscape) / 세로(Portrait) 인쇄 레이아웃 1페이지 고정 높이 제어 */
    @media (orientation: portrait) {
        .calendar-sheet {
            height: 258mm !important;
        }
        .calendar-sheet > div:last-child {
            height: calc(258mm - 60px) !important; /* 헤더 추정 높이 공제 */
        }
        .monthly-note-print {
            height: 32mm !important;
        }
    }

    @media (orientation: landscape) {
        .calendar-sheet {
            height: 142mm !important;
        }
        .calendar-sheet > div:last-child {
            height: calc(142mm - 50px) !important;
        }
        .monthly-note-print {
            height: 16mm !important;
        }
    }
}

/* 드래그 앤 드롭 피드백 */
.drag-over {
    background-color: rgba(59, 130, 246, 0.08) !important;
    outline: 2px dashed var(--planner-accent) !important;
    outline-offset: -2px;
}

.draggable-day-header {
    cursor: grab;
}
.draggable-day-header:active {
    cursor: grabbing;
}

/* 모바일 텍스트 축소 요약 뷰 */
.day-memo-summary {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    cursor: pointer;
}

/* 모달 컴포넌트 스타일 */
.modal-overlay {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
}

.modal-content {
    animation: modal-up 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modal-up {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 모바일 전용 반응형 그리드 높이 및 레이아웃 조절 */
@media (max-width: 767px) {
    .calendar-day {
        min-height: 84px !important;
        padding: 6px !important;
    }
    
    .day-memo-input {
        display: none !important;
    }
    
    .day-memo-summary {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .day-memo-summary {
        display: none !important;
    }
}

/* html2pdf.js 고화질 PDF 다운로드 전용 임시 스타일 복제 적용 */
.html2pdf-mode .no-print,
.html2pdf-mode .print-badge,
.html2pdf-mode .print\:hidden,
.html2pdf-mode [class*="print:hidden"] {
    display: none !important;
}

.html2pdf-mode {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* space-between 해제 */
    background: #ffffff !important;
    color: #0f172a !important;
}

.html2pdf-mode > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

.html2pdf-mode > div:first-child {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
}

.html2pdf-mode .calendar-grid {
    flex-grow: 1 !important;
    display: grid !important;
    grid-template-cols: repeat(7, 1fr) !important;
    grid-template-rows: auto repeat(6, 1fr) !important;
    break-inside: avoid;
}

.html2pdf-mode .calendar-day {
    min-height: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

.html2pdf-mode .day-memo-input {
    display: none !important;
}

.html2pdf-mode .day-memo-print {
    display: block !important;
    white-space: pre-wrap !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #334155 !important;
}

.html2pdf-mode .monthly-note-print {
    margin-top: 8px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
}

.html2pdf-mode .monthly-note-input {
    display: none !important;
}

.html2pdf-mode .monthly-note-render {
    display: block !important;
    flex-grow: 1 !important;
    white-space: pre-wrap !important;
    overflow: hidden !important;
    line-height: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border: none !important;
}

/* PDF 다운로드 가로/세로 방향 고정 높이 제어 */
.html2pdf-portrait {
    height: 258mm !important;
}
.html2pdf-portrait > div:last-child {
    height: calc(258mm - 60px) !important;
}
.html2pdf-portrait .monthly-note-print {
    height: 32mm !important;
}

.html2pdf-landscape {
    height: 142mm !important;
}
.html2pdf-landscape > div:last-child {
    height: calc(142mm - 50px) !important;
}
.html2pdf-landscape .monthly-note-print {
    height: 16mm !important;
}

/* ==========================================================================
   템플릿 테마 스타일 정의 (5종)
   ========================================================================== */

/* 1. 공통 서체 설정 */
.theme-minimal-modern,
.theme-minimal-modern input,
.theme-minimal-modern textarea,
.theme-minimal-modern .day-memo-print,
.theme-minimal-modern .monthly-note-render {
    font-family: 'Inter', 'Noto Sans KR', sans-serif !important;
}

.theme-classic-navy,
.theme-classic-navy input,
.theme-classic-navy textarea,
.theme-classic-navy .day-memo-print,
.theme-classic-navy .monthly-note-render {
    font-family: 'Inter', 'Noto Sans KR', sans-serif !important;
}

.theme-retro-warm,
.theme-retro-warm input,
.theme-retro-warm textarea,
.theme-retro-warm .day-memo-print,
.theme-retro-warm .monthly-note-render {
    font-family: 'Courier Prime', 'Noto Sans KR', monospace !important;
}

.theme-editorial-serif,
.theme-editorial-serif input,
.theme-editorial-serif textarea,
.theme-editorial-serif .day-memo-print,
.theme-editorial-serif .monthly-note-render {
    font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
}

.theme-midnight-dark,
.theme-midnight-dark input,
.theme-midnight-dark textarea,
.theme-midnight-dark .day-memo-print,
.theme-midnight-dark .monthly-note-render {
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif !important;
}

/* 2. 테마별 스타일 상세 - 화면 & PDF 기본 */

/* [미니멀 모던] - 극도로 간결하고 부드러운 라인 */
.theme-minimal-modern {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
.theme-minimal-modern .calendar-day {
    border: 0.5px solid #f1f5f9 !important;
}
.theme-minimal-modern .calendar-grid {
    border-top: 1px solid #e2e8f0 !important;
    border-left: 1px solid #e2e8f0 !important;
}
.theme-minimal-modern .calendar-day {
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* [클래식 네이비] - 격자 구조 강조 및 요일 네이비 */
.theme-classic-navy {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
.theme-classic-navy .calendar-sheet > div:first-child {
    border-bottom: 2px solid var(--planner-accent) !important;
}
.theme-classic-navy .calendar-grid {
    border-top: 1.5px solid var(--planner-accent) !important;
    border-left: 1px solid #cbd5e1 !important;
}
.theme-classic-navy .calendar-day {
    border-right: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
.theme-classic-navy .calendar-grid > div:first-child {
    background-color: #f8fafc !important; /* 요일 라인 배경 */
    border-bottom: 1.5px solid #cbd5e1 !important;
}

/* [레트로 웜] - 크림색 배경과 다크 브라운 선, 타자기 느낌 */
.theme-retro-warm {
    background-color: #fdfbf7 !important;
    color: #4b3621 !important;
}
.theme-retro-warm .calendar-day {
    background-color: #fdfbf7 !important;
    border-right: 1px solid #dcd5c7 !important;
    border-bottom: 1px solid #dcd5c7 !important;
}
.theme-retro-warm .calendar-grid {
    border-top: 2px solid #4b3621 !important;
    border-left: 1px solid #dcd5c7 !important;
    border-bottom: 1px solid #dcd5c7 !important;
}
.theme-retro-warm h2 {
    color: #4b3621 !important;
    font-weight: 700 !important;
}
.theme-retro-warm .day-memo-input {
    background-color: #fcfaf2 !important;
    color: #4b3621 !important;
    border-color: #e6dfd3 !important;
}
.theme-retro-warm .monthly-note-print {
    border-top: 1.5px solid #4b3621 !important;
    background-color: #fcfaf2 !important;
}
.theme-retro-warm .monthly-note-input {
    background-color: #fcfaf2 !important;
    color: #4b3621 !important;
    border-color: #e6dfd3 !important;
}
/* 토, 일 레트로 색상 반전 */
.theme-retro-warm .text-rose-600 {
    color: #c2410c !important; /* 레트로 오렌지 */
}
.theme-retro-warm .text-blue-600 {
    color: #0369a1 !important; /* 레트로 블루 */
}

/* [에디토리얼 명조] - 세로선이 제거된 우아한 여백 레이아웃 */
.theme-editorial-serif {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
.theme-editorial-serif .calendar-grid {
    border-top: 2.5px solid var(--planner-accent) !important;
    border-left: none !important;
    border-right: none !important;
}
.theme-editorial-serif .calendar-day {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.theme-editorial-serif .calendar-grid > div:first-child {
    border-bottom: 2px solid var(--planner-accent) !important;
}
.theme-editorial-serif h2 {
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
}

/* [럭셔리 미드나잇] - 시크한 다크 골드 플래너 */
.theme-midnight-dark {
    background-color: #18181b !important;
    color: #fafafa !important;
}
.theme-midnight-dark h2 {
    color: #ffffff !important;
}
.theme-midnight-dark .calendar-grid {
    border-top: 2px solid var(--planner-accent) !important;
    border-left: 1px solid #27272a !important;
}
.theme-midnight-dark .calendar-day {
    background-color: #18181b !important;
    border-right: 1px solid #27272a !important;
    border-bottom: 1px solid #27272a !important;
    color: #f4f4f5 !important;
}
.theme-midnight-dark .text-slate-900 {
    color: #f4f4f5 !important;
}
.theme-midnight-dark .text-slate-400 {
    color: #71717a !important;
}
.theme-midnight-dark .border-slate-100 {
    border-color: #27272a !important;
}
.theme-midnight-dark .day-memo-input {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}
.theme-midnight-dark .day-memo-input::placeholder {
    color: #52525b !important;
}
.theme-midnight-dark .day-memo-print {
    color: #d4d4d8 !important;
}
.theme-midnight-dark .text-rose-600 {
    color: #fb7185 !important; /* 밝은 레드 */
}
.theme-midnight-dark .text-blue-600 {
    color: #38bdf8 !important; /* 밝은 블루 */
}
.theme-midnight-dark .monthly-note-print {
    background-color: #27272a !important;
    border-top: 1.5px solid var(--planner-accent) !important;
}
.theme-midnight-dark .monthly-note-input {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}
.theme-midnight-dark .monthly-note-input::placeholder {
    color: #52525b !important;
}
.theme-midnight-dark .monthly-note-render {
    color: #fafafa !important;
}

/* 3. 럭셔리 미드나잇 인쇄 시 자동 화이트 반전 (에코 인쇄 모드) */
@media print {
    /* PDF 다운로드(.html2pdf-mode) 상태가 아닐 때만 반전 적용 */
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) {
        background-color: #ffffff !important;
        color: #0f172a !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) h2 {
        color: #0f172a !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-grid {
        border-top: 2px solid var(--planner-accent) !important;
        border-left: 1px solid #cbd5e1 !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day {
        background-color: #ffffff !important;
        border-right: 1px solid #cbd5e1 !important;
        border-bottom: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .text-slate-900 {
        color: #0f172a !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .text-slate-400 {
        color: #64748b !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .border-slate-100 {
        border-color: #cbd5e1 !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .day-memo-print {
        color: #334155 !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .text-rose-600 {
        color: #dc2626 !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .text-blue-600 {
        color: #2563eb !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .monthly-note-print {
        background-color: #ffffff !important;
        border-top: 1.5px solid var(--planner-accent) !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .monthly-note-render {
        color: #0f172a !important;
    }
}

/* ==========================================================================
   일정 중요도 파스텔 컬러 태그 스타일
   ========================================================================== */

/* 라이트 모드용 기본 파스텔 하이라이트 */
.calendar-day.tag-blue {
    background-color: rgba(219, 234, 254, 0.5) !important; /* bg-blue-100/50 */
    border-left: 4px solid #3b82f6 !important;
}
.calendar-day.tag-green {
    background-color: rgba(209, 250, 229, 0.5) !important; /* bg-emerald-100/50 */
    border-left: 4px solid #10b981 !important;
}
.calendar-day.tag-orange {
    background-color: rgba(254, 237, 222, 0.5) !important; /* bg-orange-100/50 */
    border-left: 4px solid #f97316 !important;
}
.calendar-day.tag-purple {
    background-color: rgba(243, 232, 255, 0.5) !important; /* bg-purple-100/50 */
    border-left: 4px solid #a855f7 !important;
}
.calendar-day.tag-pink {
    background-color: rgba(254, 226, 226, 0.5) !important; /* bg-rose-100/50 */
    border-left: 4px solid #ec4899 !important;
}

/* 럭셔리 미드나잇 다크 테마에서의 가독성 오버라이드 */
.theme-midnight-dark .calendar-day.tag-blue {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-left: 4px solid #3b82f6 !important;
}
.theme-midnight-dark .calendar-day.tag-green {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-left: 4px solid #10b981 !important;
}
.theme-midnight-dark .calendar-day.tag-orange {
    background-color: rgba(249, 115, 22, 0.15) !important;
    border-left: 4px solid #f97316 !important;
}
.theme-midnight-dark .calendar-day.tag-purple {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border-left: 4px solid #a855f7 !important;
}
.theme-midnight-dark .calendar-day.tag-pink {
    background-color: rgba(236, 72, 153, 0.15) !important;
    border-left: 4px solid #ec4899 !important;
}

/* 레트로 웜 테마에서의 컬러 톤 조율 */
.theme-retro-warm .calendar-day.tag-blue {
    background-color: rgba(3, 105, 161, 0.08) !important;
    border-left: 4px solid #0369a1 !important;
}
.theme-retro-warm .calendar-day.tag-green {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-left: 4px solid #10b981 !important;
}
.theme-retro-warm .calendar-day.tag-orange {
    background-color: rgba(194, 65, 12, 0.08) !important;
    border-left: 4px solid #c2410c !important;
}
.theme-retro-warm .calendar-day.tag-purple {
    background-color: rgba(168, 85, 247, 0.08) !important;
    border-left: 4px solid #a855f7 !important;
}
.theme-retro-warm .calendar-day.tag-pink {
    background-color: rgba(225, 29, 72, 0.08) !important;
    border-left: 4px solid #e11d48 !important;
}

/* 인쇄 및 PDF 저장 시 다크 테마가 반전되더라도 컬러 태그는 은은하게 출력 보장 */
@media print {
    /* 미드나잇 다크 테마 인쇄 반전 시 태그 컬러도 라이트 톤으로 전환 */
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day.tag-blue {
        background-color: rgba(219, 234, 254, 0.5) !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day.tag-green {
        background-color: rgba(209, 250, 229, 0.5) !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day.tag-orange {
        background-color: rgba(254, 237, 222, 0.5) !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day.tag-purple {
        background-color: rgba(243, 232, 255, 0.5) !important;
    }
    .calendar-sheet.theme-midnight-dark:not(.html2pdf-mode) .calendar-day.tag-pink {
        background-color: rgba(254, 226, 226, 0.5) !important;
    }
}