/* 게시판 공통 */
.board-wrap {
    width: 100%;
}

.board-wrap .number {
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-lightblack);
    text-align: right;
}

.board-wrap .number span {
    font-weight: 600;
}

/* 리스트형 게시판 */
.board {
    width: 100%;
}

.board > div {
    height: 70px;
    border-bottom: 1px solid var(--color-lightgray);
    overflow: hidden;
}

.board .title-line {
    display: flex;
    padding: 0 var(--board-padding);
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-gray);
}

.board .title-line > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-lightblack);
}

.board .list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--board-padding);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.board .list:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.board .list > .title {
    color: var(--color-lightblack);
}

.board .list:hover > .title {
    text-decoration: underline;
    color: var(--color-primary);
}

/* 댓글 수 표시 */
.comment-count {
    display: inline-block;
    margin-left: 5px;
    color: var(--color-primary);
    font-weight: 500;
}

/* 컬럼 너비 */
.board > div > .num { width: 35px; }
.board > div > .title { width: calc(100% - 400px); padding-left: 50px; justify-content: flex-start; }
.board > div > .writer { width: 200px; }
.board > div > .date { width: 150px; }

/* 갤러리형 게시판 */
.gallery-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.gallery-list li {
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    transition: transform 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.gallery-list li:hover {
    transform: translateY(-4px);
}

.gallery-list .thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    background-position: center;
    background-size: cover;
    border-radius: 10px 10px 0 0;
}

.gallery-list .title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--card-padding);
}

.gallery-list .title-box .date {
    width: 100%;
    font-size: 15px;
    color: var(--color-primary);
}

.gallery-list .title-box .title {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-lightblack);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.empty-gallery {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background-color: #f8f8f8;
    border: 1px dashed var(--color-lightgray);
    border-radius: 10px;
}

.empty-message {
    font-size: 16px;
    color: var(--color-gray);
}

/* 게시글 보기 스타일 */
.view-wrap { 
    width: 100%; 
}

/* 게시글 헤더 영역 - 신규 스타일 */
.post-header {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-lightgray);
}

.post-title {
    padding: 25px var(--board-padding) 20px;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-lightblack);
    line-height: 1.4;
    border-bottom: 1px dashed var(--color-lightgray);
}

.post-info {
    display: flex;
    align-items: center;
    padding: 15px var(--board-padding);
    background-color: rgba(0, 0, 0, 0.02);
}

.info-item {
    display: flex;
    align-items: center;
    margin-right: 30px;
    font-size: 15px;
    color: var(--color-gray);
}

.info-item i {
    margin-right: 8px;
    color: var(--color-primary);
}

.info-item span {
    color: var(--color-lightblack);
}

.info-item.author {
    font-weight: 500;
}

/* 파일 첨부 영역 */
.file-section {
    border-bottom: 1px solid var(--color-lightgray);
}

.file-item {
    display: flex;
    padding: 12px var(--board-padding);
    font-size: 15px;
    border-bottom: 1px dashed var(--color-lightgray);
}

.file-item:last-child {
    border-bottom: none;
}

.file-label {
    display: flex;
    align-items: center;
    min-width: 120px;
    color: var(--color-lightblack);
    font-weight: 500;
}

.file-label i {
    margin-right: 8px;
    color: var(--color-primary);
}

.file-link {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.file-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.view-wrap .file-wrap {
    display: flex;
    gap: 16px;
    padding: 16px var(--board-padding);
    border-bottom: 1px solid var(--color-lightgray);
    font-size: 15px;
}

.view-wrap .file-wrap span {
    color: var(--color-lightblack);
    font-weight: 500;
}

.view-wrap .file-wrap a {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.view-wrap .file-wrap a:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.view-wrap .content-box {
    padding: 40px var(--board-padding);
    min-height: 200px;
    line-height: 1.6;
    color: var(--color-lightblack);
    border-bottom: 1px solid var(--color-lightgray);
}

/* CKEditor 콘텐츠를 위한 스타일 */
.ck-content {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.ck-content p {
    margin-bottom: 1.2em;
}

.ck-content h1, 
.ck-content h2, 
.ck-content h3, 
.ck-content h4, 
.ck-content h5, 
.ck-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black);
}

.ck-content h1 { font-size: 28px; }
.ck-content h2 { font-size: 24px; }
.ck-content h3 { font-size: 22px; }
.ck-content h4 { font-size: 20px; }
.ck-content h5 { font-size: 18px; }
.ck-content h6 { font-size: 16px; }

.ck-content ul, 
.ck-content ol {
    margin-bottom: 1.2em;
    padding-left: 2em;
}

.ck-content ul li, 
.ck-content ol li {
    margin-bottom: 0.5em;
}

.ck-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em 0;
}

.ck-content blockquote {
    margin: 1.5em 0;
    padding: 15px 20px;
    border-left: 4px solid var(--color-primary);
    background-color: rgba(0, 0, 0, 0.02);
    font-style: italic;
}

.ck-content table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
}

.ck-content table th, 
.ck-content table td {
    padding: 10px 12px;
    border: 1px solid var(--color-lightgray);
}

.ck-content table th {
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
}

.ck-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.ck-content a:hover {
    color: var(--color-primary-dark);
}

.ck-content pre {
    margin: 1.5em 0;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-family: monospace;
    overflow-x: auto;
}

.ck-content code {
    font-family: monospace;
    background-color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
}

.view-wrap .list-wrap {
    margin-top: 40px;
    border-top: 1px solid var(--color-lightgray);
}

.view-wrap .list-wrap .list-line {
    border-bottom: 1px solid var(--color-lightgray);
}

.view-wrap .list-wrap .list-row {
    display: flex;
    gap: 24px;
    padding: 16px var(--board-padding);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.view-wrap .list-wrap .list-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.view-wrap .list-wrap .list-row:hover .title {
    text-decoration: underline;
    color: var(--color-primary);
}

.view-wrap .list-wrap .list {
    min-width: 60px;
    color: var(--color-primary);
    font-weight: 500;
}

.view-wrap .list-wrap .title {
    color: var(--color-lightblack);
}

/* 페이징 */
.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
}

.paging a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-lightblack);
    transition: all 0.2s ease;
}

.paging a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.paging a.active {
    background-color: var(--color-primary);
    color: #FFF;
    font-weight: 500;
}

.paging-list {
    display: flex;
    gap: 8px;
}

.paging-first,
.paging-prev,
.paging-next,
.paging-last {
    border: 1px solid var(--color-lightgray);
}

/* 반응형 */
@media screen and (max-width: 1439px) {
    .gallery-list {
        gap: 16px;
    }
    
    .board .title-line > div,
    .board .list {
        font-size: 16px;
    }
    
    .post-title {
        font-size: 22px;
        padding: 22px var(--board-padding) 18px;
    }
    
    .ck-content h1 { font-size: 26px; }
    .ck-content h2 { font-size: 22px; }
    .ck-content h3 { font-size: 20px; }
    .ck-content h4 { font-size: 18px; }
    .ck-content h5 { font-size: 16px; }
    .ck-content h6 { font-size: 15px; }
}

@media screen and (max-width: 1023px) {
    .gallery-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .board > div > .title { 
        width: calc(100% - 300px);
        padding-left: 20px;
    }
    .board > div > .writer { width: 150px; }
    .board > div > .date { width: 120px; }
    
    .post-title {
        font-size: 20px;
        padding: 20px var(--board-padding) 15px;
    }
    
    .post-info {
        flex-wrap: wrap;
        padding: 12px var(--board-padding);
    }
    
    .info-item {
        margin-right: 20px;
        margin-bottom: 5px;
        font-size: 14px;
    }
    
    .ck-content {
        font-size: 15px;
    }
    
    .ck-content h1 { font-size: 24px; }
    .ck-content h2 { font-size: 20px; }
    .ck-content h3 { font-size: 18px; }
    .ck-content h4 { font-size: 17px; }
    .ck-content h5 { font-size: 16px; }
    .ck-content h6 { font-size: 15px; }
}

@media screen and (max-width: 767px) {
    .post-title {
        font-size: 18px;
        padding: 18px var(--board-padding) 12px;
    }
    
    .post-info {
        padding: 10px var(--board-padding);
    }
    
    .info-item {
        margin-right: 15px;
        font-size: 13px;
    }
    
    .info-item i {
        margin-right: 6px;
    }

    .view-wrap .title-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px var(--board-padding);
    }

    .view-wrap .title-box .title {
        font-size: 18px;
    }

    .view-wrap .content-box {
        padding: 24px var(--board-padding);
        font-size: 15px;
    }
    
    .ck-content {
        font-size: 14px;
    }

    .gallery-list {
        padding: 0 16px;
    }
    
    .board > div {
        height: 60px;
    }
    
    .board .title-line > div,
    .board .list {
        font-size: 15px;
    }

    .board > div > .writer { 
        display: none; /* 작성자 칼럼 숨김 */
    }
    
    .board > div > .title { 
        width: calc(100% - 150px);
        padding-left: 16px;
    }
    .board > div > .date { 
        width: 100px;
        font-size: 14px;
    }

    .paging {
        gap: 4px;
    }
    
    .paging a {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    
    .paging-list {
        gap: 4px;
    }
    
    .file-item {
        flex-direction: column;
        gap: 8px;
        padding: 12px var(--board-padding);
    }
    
    .file-label {
        min-width: auto;
    }
    
    .ck-content h1 { font-size: 20px; }
    .ck-content h2 { font-size: 18px; }
    .ck-content h3 { font-size: 17px; }
    .ck-content h4 { font-size: 16px; }
    .ck-content h5 { font-size: 15px; }
    .ck-content h6 { font-size: 14px; }
}

@media screen and (max-width: 519px) {
    .gallery-list {
        grid-template-columns: 1fr;
    }
    
    .board > div {
        height: 50px;
    }
    
    .board .title-line > div,
    .board .list {
        font-size: 14px;
    }

    .board > div > .num { width: 30px; }
    .board > div > .title { 
        width: calc(100% - 120px);
        padding-left: 12px;
    }
    .board > div > .date { 
        width: 80px;
        font-size: 13px;
    }
    
    .post-title {
        font-size: 16px;
        padding: 15px var(--board-padding) 10px;
    }
    
    .post-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px var(--board-padding);
    }
    
    .info-item {
        margin-right: 0;
        margin-bottom: 0;
    }
    
    .view-wrap .content-box {
        padding: 20px var(--board-padding);
    }
    
    .ck-content {
        font-size: 14px;
    }
}