/* --- 기본 설정 수정 --- */
body {
    background-color: #fcfcfc; /* 약간 더 밝고 깨끗한 배경 */
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* --- 1. 상단 헤더 (타이틀 영역) 세련되게 수정 --- */
.site-header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0; /* 여백을 충분히 주어 고급스럽게 */
    margin-bottom: 40px;
}

.header-inner {
    max-width: 1000px; /* 본문과 동일한 너비 */
    width: 90%; /* 화면이 작아질 때를 대비한 안전장치 */
    display: flex;
    justify-content: flex-start; /* 좌측 정렬로 본문과 라인 맞춤 */
}

.site-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.site-title a {
    text-decoration: none;
    color:#542B55;
}



/* --- 2. 메인 컨테이너 레이아웃 --- */
.main-container {
    display: flex;
    gap: 50px; /* 사이 간격을 넓혀서 시원하게 */
    max-width: 1000px;
    width: 90%;
    align-items: flex-start;
}

/* --- 3. 사이드바 (프로필) --- */
.sidebar {
    width: 260px;
    position: sticky; /* PC에서만 따라오게 */
    top: 40px;
}

.profile-card {
    color: #2D242D;
    text-align: center;
}

.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    object-fit: cover;
}



.post {
    background: white;
    max-width: 700px;
    padding: 30px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

h1 { color: #542B55; margin-bottom: 10px; }
.date { color: #8E6C84; font-size: 0.9rem; margin-bottom: 30px; }



.image-container img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* 본문 단락 간격 및 가독성 추가 보강 */
.content p {
    line-height: 1.8;
    color: #2D242D;
    margin-bottom: 1.5em; /* 문단 사이의 간격을 명확히 줍니다 */
}

/* 기존 .image-container img 대신 .content 내의 모든 이미지를 대상으로 합니다 */
.content img {
    width: 100%;
    border-radius: 10px;
    margin: 20px 0; /* 위아래 여백을 주어 글과 겹치지 않게 합니다 */
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 선택사항: 이미지에 살짝 그림자 효과 */
}

/* 게시글 목록 링크 스타일 고도화 */
.content ul li a {
    text-decoration: none; /* 밑줄 제거 */
    color: #2D242D;       /* 세련된 진한 회색 */
    font-weight: 500;      /* 글자 두께 약간 두껍게 */
    transition: all 0.3s ease; /* 부드러운 변화 효과 */
}

/* 마우스를 올렸을 때 (Hover 효과) */
.content ul li a:hover {
    color: #542B55;     
    text-decoration: underline; /* 마우스 올릴 때만 밑줄 */
}

/* 날짜 텍스트 스타일 */
.content ul li {
    list-style: none;    /* 불필요한 점 제거 */
    margin-bottom: 12px; /* 간격 넓히기 */
    color: #8E6C84;      /* 날짜는 연하게 처리 */
}



/* 전체 레이아웃 컨테이너 */
.main-container {
    display: flex;
    gap: 40px; /* 사이드바와 메인 사이의 간격 */
    max-width: 1000px; /* 전체 너비 확장 */
    width: 100%;
    align-items: flex-start;
}


/* --- 모바일 및 확대 시 대응 (768px 이하) --- */
@media (max-width: 768px) {
        /* 1. 메인 컨테이너: 양옆에 '25px'의 확실한 여백을 줍니다 */
        .main-container {
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 0 25px;       /* 좌우 여백을 주어 화면 끝에 붙지 않게 함 */
            box-sizing: border-box; /* 여백이 너비에 포함되도록 계산 */
            gap: 30px;
        }

        /* 2. 사이드바(프로필): 고정을 풀고 중앙 정렬 유지 */
        .sidebar {
            width: 100%;
            position: static !important;
            margin-bottom: 10px;
        }

        /* 3. 게시글 목록 박스: 여백 정렬 */
        .post {
            width: 100%;
            display: block;
            padding: 0 20px; /* 부모인 main-container에서 여백을 잡아도 해결 안 돼서 여기에서도 20을 줌. */
        }

        /* 'POSTS' 텍스트와 목록 전체 정렬 */
        .date {
            margin-left: 0;
            padding-left: 0;
            text-align: left; /* 왼쪽 정렬 유지하되 위 padding 덕분에 여백이 생김 */
        }

        /* 4. 게시글 리스트 정렬 */
        .content ul {
            padding-left: 0;
            margin-left: 0;
            list-style: none; /* 불필요한 점 제거로 더 깔끔하게 */
        }

        .content ul li {
            margin-bottom: 18px; /* 글 간격도 조금 더 넓혀서 터치하기 편하게 */
            text-align: left;
        }

        /* 제목 아래로 날짜를 보내서 좁은 화면 대응 */
        .post-date {
            display: block;
            font-size: 0.85rem;
            margin-top: 5px;
        }


    }