/* static/css/essaystyle.css */

/* =========================================
   0. [NEW] 에세이 컨테이너 박스 (종이 질감)
   ========================================= */
.essay-paper-box {
    border: 3px solid #859a85;       /* 요청하신 쑥색 테두리 3px */
    border-radius: 15px;             /* 모서리 둥글게 */

    /* 배경 설정 (CSS 파일 기준 상위 폴더의 oldpaper.png) */
    background-image: url('../oldpaper.png');
    background-repeat: repeat;     /* 반복 */
    background-size: auto;         /* 원래 크기 */
    background-position: top left; /* 시작 위치 */

    /* 내부 여백 (글 좌우 여백 확보) */
    padding: 3rem 4rem;

    /* 그림자 효과로 입체감 주기 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    /* 상하 여백 */
    margin-bottom: 2rem;
}

.essay-paper-box,
.essay-paper-box * {
  font-family: "Gowun Dodum", sans-serif !important;
}

/* 모바일에서는 패딩 줄이기 */
@media (max-width: 768px) {
    .essay-paper-box {
        padding: 1.5rem 1rem;

        }
     .essay-content {
        font-size: 1.0rem; /* 모바일에서 글자 크기 약간 축소 */

    }

}


/* =========================================
   1. 에세이 리스트 페이지 (List)
   ========================================= */
.essay-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* 테두리 연하게 */
    background-color: transparent; /* 배경 투명하게 해서 종이 질감 보이게 */
}

.essay-card:hover {
    background-color: rgba(255,255,255,0.4); /* 호버 시 살짝 하얗게 */
    transform: translateX(5px);
    border-radius: 8px;
}

.essay-date {
    color: #666;
    font-size: 0.75rem;
    font-family: 'Gowun Dodum', monospace;
    flex: 0 0 auto;
  white-space: nowrap;
}

.essay-title {
    font-weight: 700;
    color: #706b69;
    text-decoration: none;
    font-size: 1.15rem;
    font-family: "Gowun Dodum", serif;
    max-width: 75%;
    line-height: 1.5;
}


/* =========================================
   2. 에세이 상세 페이지 (Detail)
   ========================================= */


/* 상단 헤더 영역 */
.essay-header {
    font-family: "Gowun Dodum", serif;
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* 구분선 연하게 */
}

.essay-meta {
    color: #666;
    font-size: 0.9rem;
    margin-top: 15px;
    font-family: 'Gowun Dodum', sans-serif;
}

/* 본문 타이포그래피 */
.essay-content {
    font-family: "Gowun Dodum", serif;
    line-height: 1.8;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: normal;
    color: #3e3836;

   word-wrap: break-word;       /* 긴 단어를 박스 안에서 강제 줄바꿈 */



}

.essay-content p {
    margin-bottom: 1.5rem;
    word-break: keep-all;

    }

.essay-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #1d3557;
    font-size: 1.6rem;
    font-family: "Gowun Dodum", serif;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
}

.essay-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.3rem;
    color: #457b9d;
    font-family: "Gowun Dodum", serif;
}

/* 인용구 스타일 */
.essay-content blockquote {
    border-left: 5px solid #859a85; /* 인용구 포인트 색도 테두리색과 매칭 */
    padding-left: 1rem;
    margin: 2rem 0;
    color: #444;
    background: rgba(255,255,255,0.5); /* 반투명 흰색 배경 */
    padding: 20px;
    border-radius: 0 10px 10px 0;
}

/* 이미지 스타일 */
.essay-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.essay-content figure {
    text-align: center;
    margin-bottom: 2rem;
}

.essay-content figcaption {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

/* 테이블 반응형 처리 */
.table-responsive {
    margin: 2rem 0;
}

/* =========================================
   3. 페이지네이션 스타일
   ========================================= */
.pagination {
    font-family: "Gowun Dodum", sans-serif;
}

.pagination .page-link {
    color: #706b69;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0.75rem;
    margin: 0 3px;
    border-radius: 5px;
    transition: all 0.3s;
}

.pagination .page-link:hover {
    background-color: #859a85;
    color: white;
    border-color: #859a85;
}

.pagination .page-item.active .page-link {
    background-color: #859a85;
    border-color: #859a85;
    color: white;
    font-weight: bold;
}

.pagination .page-item.disabled .page-link {
    background-color: rgba(0, 0, 0, 0.05);
    color: #ccc;
    border-color: rgba(0, 0, 0, 0.1);
}