/* --- 1. Fonts --- */
@font-face {
font-family: 'SchoolSafetyGoodSupport';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareondotumR.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: 'SchoolSafetyGoodSupport';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareondotumB.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}

/* --- 2. Variables & Reset --- */
:root {
--bg-color: #ffffff;
--text-color: #3e3e3e;
--secondary-text: #b0b0b0;
--sidebar-width: 100px;
--font-main: 'SchoolSafetyGoodSupport', sans-serif;
--transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
overflow: hidden;
cursor: none;
/* 전체 화면 스크롤 방지 */
}

#app {
display: flex;
height: 100vh;
width: 100vw;
}

/* --- 3. Sidebar & Navigation --- */
#sidebar {
width: var(--sidebar-width);
height: 100%;
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 100;
}

.sidebar-menu {
list-style: none;
}

.sidebar-menu li {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 8px;
}

.sidebar-menu a {
text-decoration: none;
color: var(--secondary-text);
font-size: 1.1rem;
font-weight: 400;
transition: var(--transition);
}

.sidebar-menu a.active,
.sidebar-menu a:hover {
color: var(--text-color);
}

.back-symbol {
font-size: 1.2rem;
cursor: none;
line-height: 1;
color: var(--secondary-text);
transition: var(--transition);
}

.back-symbol:hover {
color: var(--text-color);
}

/* --- 4. Main Content Layout --- */
#content {
flex: 1;
position: relative;
overflow: hidden;
}

.view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
padding: 40px;
}

.view.active {
display: block;
animation: fadeIn 0.8s var(--transition);
}

/* --- Interactive Star Background --- */
#interactive-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 배경 이미지 위, 콘텐츠 아래 */
    overflow: hidden;
    pointer-events: none; /* 클릭 방해 금지 */
}

.star-particle {
    position: absolute;
    color: #3e3e3e;
    font-family: serif;
    user-select: none;
    pointer-events: none;
    transition: opacity 0.5s ease;
    will-change: transform;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

/* --- 5. Home / Gallery --- */
#home {
padding: 0;
background-color: #ffffff;
}

#home.active {
display: flex;
justify-content: center;
align-items: center;
}

.full-screen-img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}

/* --- 6. Calendar View (Text Section) --- */
.view#text {
background-color: #ffffff;
/* [수정] 스크롤을 완전히 막습니다 */
overflow: hidden;
position: relative;
height: 100vh;
}

.scatter-container {
position: relative;
width: 100%;
height: 100%;
min-height: auto; /* 기존 150vh 해제 */
padding-bottom: 15vh;
}

#calendar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3e3e3e;
z-index: 900;
display: none;
}

.scatter-container {
position: relative;
width: 100%;
min-height: 150vh;
}

.month-card {
position: absolute;
background: #eeeeee;
padding: 20px;
min-width: 140px;
max-height: 90vh;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform var(--transition), left var(--transition), top var(--transition);
cursor: pointer;
z-index: 10;
}

.month-card.zoomed {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) rotate(0deg) !important;
width: 400px !important;
z-index: 1000 !important;
}

.month-card.dark {
background: #3e3e3e;
color: #ffffff;
}

.month-card h4 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 15px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
padding-bottom: 10px;
}

.month-card.dark h4 {
border-bottom-color: rgba(255, 255, 255, 0.2);
}

.calendar-mini {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.8rem;
color: #999;
}

/* Calendar Focus Effect */
#calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000; /* Sidebar 보다는 위, 상세 페이지 보다는 아래 (또는 상황에 맞춰 조정) */
    display: none;
    backdrop-filter: blur(2px); /* 약간의 블러 효과 추가 */
}

.month-card.zoomed {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.1) rotate(0deg) !important;
    z-index: 1001 !important;
    cursor: default;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.calendar-mini span {
    width: 25px;
    text-align: center;
    border-radius: 5px;
    transition: 0.2s;
}

/* 일기가 있는 날짜의 숫자 스타일 */
.calendar-mini span.has-diary {
    color:#3e3e3e;
    font-weight: 700;
}

/* 다크 모드 카드일 경우 */
.month-card.dark .calendar-mini span.has-diary {
    color: #fff;
    font-weight: 700;
}

.calendar-mini span:hover {
    background: #f0f0f0;
    color: #3e3e3e;
}

.month-card.dark .calendar-mini span:hover {
background: #333;
color: #fff;
}

/* Diary Detail View - fav-detail-view와 동일하게 맞춤 */
#diary-view {
    background-color: #ffffff;
    padding: 40px 0 0 150px;
    height: 100vh;            /* min-height 대신 고정 높이 사용 */
    width: 100%;
    /* [수정] 세미콜론 위치를 옮기고 !important를 적용합니다 */
    overflow-y: scroll !important; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.diary-header {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--secondary-text);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.back-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--secondary-text);
}

.diary-detail-title {
    display: none; /* 일기장에는 제목이 없음 */
}

.diary-content,
.fav-detail-content {
    max-width:600px; /* 전문 폭 제한 */
    margin: 0;
    padding-bottom: 150px !important;
}

.diary-detail-body,
.fav-detail-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2; 
    color: #aaaaaa;
    text-align: left;
    word-break: keep-all;
    white-space: pre-wrap;
    margin-bottom: 0;
}


.year-tabs {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding-left: 110px; /* 사이드바 위치 고려 */
    z-index: 100;
    position: relative;
}

.year-tab {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 15px;
    color: #aaaaaa;
    transition: var(--transition);
    text-transform: lowercase;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

.year-tab.active {
    color: #3e3e3e; /* [수정] 클릭 상태: 진한 회색/검정 */
    font-weight: 500;
    border-bottom: 0.5px solid #3e3e3e; /* 밑줄 추가 (선택 사항) */
}

.year-tab:hover {
    color: var(--text-color);
}


/* --- 8. Fav Section (Archive) --- */

.view#fav {
background-color: #ffffff;
padding: 40px 40px 0 40px;
height: 100vh;
overflow: hidden;
}

.fav-columns {
display: grid;
grid-template-columns: repeat(3, 370px);
justify-content: end;
/* 오른쪽 정렬 */
gap: 30px;
/* 컬럼 사이 간격 */
width: 100%;
height: calc(100vh - 40px);
overflow-y: auto;
padding-right: 10px;
align-items: start;
}

.fav-column h3 {
font-size: 1.0rem;
/* 이전 단계에서 키운 크기 유지 */
font-weight: 400;
margin-bottom: 15px;
color: #3e3e3e;
text-transform: lowercase;
border-bottom: 0.5px solid #3e3e3e;
padding-bottom: 20px;
-ms-overflow-style: none; 
scrollbar-width: none;
}
.fav-column::-webkit-scrollbar { display: none; }

/* 개별 아이템 (글 사이 구분선) */
.fav-item {
    width: 350px;
    height: 300px; /* 고정 높이 유지 - 10줄 표시 대응 */ 
    margin-bottom: 20px;
    background: transparent;
    padding-top: 20px;
    border-top: 0.5px solid #aaaaaa;
    display: flex;
    flex-direction: column;
    /* 글이 넘치면 잘리도록 설정 */
    overflow: hidden; 
}

/* [수정] 각 기둥의 맨 첫 번째 글은 위쪽 선을 없애서 h3 라인과 겹치지 않게 함 */
.fav-column .fav-item:first-child {
border-top: none !important;
padding-top: 0 !important;
/* [수정] 확실하게 0으로 밀착 */
margin-top: 0 
}

.fav-item h4 {
font-size: 0.94rem;
font-weight: 400;
margin-bottom: 18px;
color: #3e3e3e;
}

.fav-item p {
    font-size: 0.88rem;
    color: #aaaaaa;
    line-height: 1.95;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10; /* 10줄 표시 */
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

/* --- Fav 상세 페이지 전용 디자인 (diary-view와 통합) --- */
#fav-detail-view {
    background-color: #ffffff;
    padding: 40px 0px 0 150px;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.fav-detail-title {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 0.5px solid #3e3e3e; /* 제목 아래 구분선 */
    padding-bottom: 10px;
}

/* --- 9. Mobile Responsive --- */
@media (max-width: 768px) {
#app {
flex-direction: column;
}

#sidebar {
width: 100%;
height: auto;
flex-direction: row;
gap: 30px;
padding: 20px;
}

.fav-columns {
grid-template-columns: 1fr;
justify-content: center;
}

.fav-item {
width: 100%;
}

.month-card {
width: 90% !important;
left: 5% !important;
position: relative;
margin-bottom: 0px;
}
}


/* style.css 맨 아래 추가 */
.symbol {
    /* 기호를 가장 잘 표현하는 영문 폰트(Inter)로 강제 지정 */
    font-family: 'Inter', sans-serif !important; 
    letter-spacing: 2px;             /* 점 사이 간격 확보 */
    color: var(--secondary-text);    /* 본문보다 살짝 연한 색 */
    font-weight: 300;                /* 가늘게 표현 */
}

.diary-img {
    display: block;            /* 줄바꿈 처리 */
    max-width: 100%;           /* 화면 너비를 넘지 않게 */
    height: auto;              /* 비율 유지 */
    margin-top: 10px;
    margin-bottom: 0px;      
    opacity: 0.9;              /* 너무 쨍하지 않게 살짝 흐리게 (선택) */
}
/* --- 10. Custom Cursor --- */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px; /* 적절한 크기로 조정 (원본 134x134에서 축소) */
    height: 60px;
    background-image: url('assets/mouse.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.1s ease-out, opacity 0.3s ease;
    opacity: 0; /* 초기 로드 시 숨김 */
}

#custom-cursor.visible {
    opacity: 1;
}

#custom-cursor.hovering {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1.2);
}

/* 모든 인터랙티브 요소에 대해 기본 커서 숨김 */
a, button, .nav-link, .year-tab, .month-card, .fav-item, .back-symbol {
    cursor: none !important;
}



/* --- 9. Mobile & Narrow Screen Responsive --- */
@media (max-width: 1024px) { /* 768px보다 조금 더 여유 있게 잡았습니다 */
    #app {
        flex-direction: column;
        height: auto; /* 높이 고정 해제 */
        overflow-y: auto; /* 전체 스크롤 허용 */
    }

    body {
        overflow: auto !important; /* 바디 스크롤 허용 */
    }

    #sidebar {
        width: 100%;
        height: auto;
        padding: 20px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1001;
    }

    #content {
        height: auto;
        overflow: visible;
    }

    /* [중요] 텍스트 섹션 설정 */
    .view#text {
        height: auto !important;
        overflow: visible !important;
        padding: 20px !important;
    }

    /* [중요] 연도 탭 상단 고정 */
    .year-tabs {
        padding-left: 0 !important;
        margin-top: 0;
        position: sticky;
        top: 0; /* 사이드바 아래에 딱 붙음 */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        padding: 0 0;
        margin-bottom: 20px;
        justify-content: center; /* 중앙 정렬 */
        border-bottom: 0.5px solid #aaaaaa
    }

    /* [중요] 카드 배치 초기화 */
    .scatter-container {
        display: flex;
        flex-direction: column; /* 가로가 아닌 세로로 나열 */
        align-items: center;
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 100px;
        gap: 20px; /* 카드 사이 간격 */
    }

    .month-card {
        /* JS에서 준 position: absolute를 무시하고 순서대로 배치 */
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        transform: none !important; /* 회전 제거 */
        width: 90% !important;
        max-width: 400px;
        margin: 0 auto;
    }
}