/* ============================================================
 * FILE: public/assets/css/board.css
 * ── 배치 정보 ──────────────────────────────────────────────────
 *   서버: 웹서버 (macOS, 172.20.200.10)
 *   경로: /Users/lajeong/Documents/Site/public/assets/css/board.css
 *   접근: 브라우저에서 직접 로드 — /assets/css/board.css
 * ── 역할 ──────────────────────────────────────────────────────
 *   게시판(목록·상세·작성) 페이지 전용 스타일.
 *   게시글 목록 테이블, 게시글 본문, 댓글 영역.
 *   좋아요 버튼, 페이지네이션.
 * ============================================================ */

/* ==============================
   게시판 2단 레이아웃
   ============================== */
.board-layout {
    display        : flex;
    gap            : 32px;
    max-width      : var(--container-max);
    margin         : 0 auto;
    padding        : 36px 24px;
    align-items    : flex-start;
}

/* ---- 사이드바 ---- */
.board-sidebar {
    width          : 190px;
    flex-shrink    : 0;
    position       : sticky;
    top            : 80px;
}

.sidebar-label {
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : .08em;
    text-transform : uppercase;
    color          : var(--color-text-muted);
    margin-bottom  : 8px;
    padding        : 0 8px;
}

.board-nav-list  { display: flex; flex-direction: column; gap: 2px; }

.board-nav-link {
    display        : block;
    padding        : 9px 12px;
    border-radius  : var(--radius-sm);
    font-size      : 14px;
    color          : var(--color-text-muted);
    transition     : background .15s, color .15s;
}
.board-nav-link:hover  { background: var(--color-surface-2); color: var(--color-text); }
.board-nav-link.active {
    background     : rgba(99,102,241,.1);
    color          : var(--color-primary);
    font-weight    : 600;
}

/* ---- 메인 ---- */
.board-main { flex: 1; min-width: 0; }

/* ==============================
   게시판 헤더
   ============================== */
.board-header {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 16px;
    margin-bottom  : 24px;
    padding-bottom : 20px;
    border-bottom  : 1px solid var(--color-border);
}

.board-title {
    font-size      : 22px;
    font-weight    : 700;
    color          : var(--color-text);
}
.board-desc {
    font-size      : 14px;
    color          : var(--color-text-muted);
    margin-top     : 4px;
}

/* ==============================
   정렬/검색 툴바
   ============================== */
.board-toolbar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 16px;
    gap            : 12px;
    flex-wrap      : wrap;
}

.sort-tabs { display: flex; gap: 4px; }

.sort-tab {
    padding        : 6px 14px;
    border-radius  : 20px;
    font-size      : 13px;
    color          : var(--color-text-muted);
    transition     : background .15s, color .15s;
    border         : 1px solid transparent;
}
.sort-tab:hover  { background: var(--color-surface-2); color: var(--color-text); }
.sort-tab.active {
    background     : var(--color-primary);
    color          : #fff;
    font-weight    : 600;
}

.board-search { display: flex; gap: 6px; }
.board-search__input { width: 160px; }

/* ==============================
   게시글 목록
   ============================== */
.post-list { display: flex; flex-direction: column; gap: 1px; }

.post-item {
    border-bottom  : 1px solid var(--color-border);
}

.post-item__link {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
    padding        : 16px 4px;
    transition     : background .15s;
    border-radius  : var(--radius-sm);
}
.post-item__link:hover { background: var(--color-surface-2); padding-left: 8px; }

/* 게시글 첫 번째 이미지 썸네일 */
.post-item__thumb {
    width          : 60px;
    height         : 60px;
    flex-shrink    : 0;
    border-radius  : var(--radius-sm);
    overflow       : hidden;
    background     : var(--color-surface-2);
    position       : relative;
}
.post-item__thumb img {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    display        : block;
}

.post-item__body  { flex: 1; min-width: 0; }

.post-item__title {
    font-size      : 15px;
    font-weight    : 500;
    color          : var(--color-text);
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
    margin-bottom  : 4px;
}

.post-item__meta {
    display        : flex;
    align-items    : center;
    gap            : 6px;
    font-size      : 13px;
    color          : var(--color-text-muted);
}
.post-meta-sep { opacity: .4; }

.post-item__stats {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    flex-shrink    : 0;
}

.post-stat {
    font-size      : 12px;
    color          : var(--color-text-muted);
    white-space    : nowrap;
}

.board-empty {
    text-align     : center;
    padding        : 60px 20px;
    color          : var(--color-text-muted);
}

/* ==============================
   게시글 상세 레이아웃
   ============================== */
.view-layout {
    max-width      : 760px;
    margin         : 0 auto;
    padding        : 36px 24px 80px;
}

/* ---- 게시글 헤더 ---- */
.post-article__header {
    margin-bottom  : 32px;
    padding-bottom : 24px;
    border-bottom  : 1px solid var(--color-border);
}

.post-breadcrumb {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    font-size      : 13px;
    color          : var(--color-text-muted);
    margin-bottom  : 16px;
}
.post-breadcrumb a:hover { color: var(--color-primary); }

.post-article__title {
    font-size      : 26px;
    font-weight    : 700;
    line-height    : 1.4;
    color          : var(--color-text);
    margin-bottom  : 20px;
    word-break     : keep-all;
}

.post-article__meta {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 12px;
}

/* 저자 정보 */
.post-author {
    display        : flex;
    align-items    : center;
    gap            : 10px;
}

.post-author__avatar {
    width          : 36px;
    height         : 36px;
    border-radius  : 50%;
    object-fit     : cover;
}
.post-author__avatar--default {
    background     : var(--color-primary);
    color          : #fff;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-weight    : 700;
    font-size      : 15px;
}

.post-author__name {
    font-weight    : 600;
    font-size      : 14px;
    color          : var(--color-text);
}
.post-author__date {
    font-size      : 13px;
    color          : var(--color-text-muted);
}

.post-meta-stats {
    display        : flex;
    gap            : 12px;
}

.post-actions-admin {
    display        : flex;
    gap            : 6px;
    margin-left    : auto;
}

/* ---- 게시글 본문 블록 ---- */
.post-body {
    line-height    : 1.85;
    font-size      : 16px;
    color          : var(--color-text);
    margin-bottom  : 40px;
}

.block-text { margin-bottom: 20px; }
.block-text h2 { font-size: 20px; margin: 24px 0 12px; }
.block-text h3 { font-size: 17px; margin: 20px 0 8px; }
.block-text p  { margin-bottom: 12px; }
.block-text ul, .block-text ol {
    padding-left   : 20px;
    margin-bottom  : 12px;
}
.block-text blockquote {
    border-left    : 3px solid var(--color-primary);
    padding        : 10px 18px;
    color          : var(--color-text-muted);
    margin         : 16px 0;
    background     : var(--color-surface);
    border-radius  : 0 var(--radius-sm) var(--radius-sm) 0;
}
.block-text a { color: var(--color-primary); text-decoration: underline; }

.block-image  { margin: 24px 0; }
.block-image img {
    width          : 100%;
    border-radius  : var(--radius-md);
    display        : block;
}

.block-youtube { margin: 24px 0; }
.youtube-embed-wrap {
    position       : relative;
    padding-bottom : 56.25%;   /* 16:9 비율 유지 */
    height         : 0;
    overflow       : hidden;
    border-radius  : var(--radius-md);
    background     : #000;
}
.youtube-embed-wrap iframe {
    position       : absolute;
    top            : 0; left : 0;
    width          : 100%;
    height         : 100%;
}

.block-divider {
    border         : none;
    border-top     : 1px solid var(--color-border);
    margin         : 32px 0;
}

/* ---- 반응 영역 ---- */
.post-reactions {
    display        : flex;
    align-items    : flex-start;
    gap            : 32px;
    padding        : 28px 0;
    border-top     : 1px solid var(--color-border);
    border-bottom  : 1px solid var(--color-border);
    margin-bottom  : 32px;
    flex-wrap      : wrap;
}

/* 좋아요 버튼 */
.like-btn {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 4px;
    padding        : 16px 24px;
    background     : var(--color-surface);
    border         : 1.5px solid var(--color-border);
    border-radius  : var(--radius-lg);
    cursor         : pointer;
    transition     : border-color .2s, background .2s, transform .1s;
    font-family    : inherit;
    min-width      : 80px;
}
.like-btn:hover { border-color: #ef4444; }
.like-btn.liked {
    border-color   : #ef4444;
    background     : rgba(239,68,68,.08);
}
.like-btn:active { transform: scale(.93); }

.like-btn__icon  { font-size: 24px; line-height: 1; }
.like-btn__count { font-size: 16px; font-weight: 700; color: var(--color-text); }

/* 별점 */
.rating-wrap { flex: 1; min-width: 200px; }

.rating-label {
    font-size      : 13px;
    color          : var(--color-text-muted);
    margin-bottom  : 8px;
}

.star-rating {
    display        : flex;
    gap            : 3px;
    margin-bottom  : 8px;
}

.star-btn {
    background     : none;
    border         : none;
    font-size      : 22px;
    color          : var(--color-border);
    cursor         : pointer;
    transition     : color .1s, transform .1s;
    padding        : 2px;
    line-height    : 1;
}
.star-btn.active { color: #f59e0b; }
.star-btn:hover  { transform: scale(1.15); }

.rating-summary {
    font-size      : 13px;
    color          : var(--color-text-muted);
}
.rating-summary strong {
    color          : #f59e0b;
    font-size      : 16px;
}

/* ---- 이전/다음 네비 ---- */
.post-navigate {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
    margin-bottom  : 48px;
    flex-wrap      : wrap;
}

.post-nav-link {
    display        : flex;
    flex-direction : column;
    gap            : 4px;
    max-width      : 240px;
}
.post-nav-label {
    font-size      : 12px;
    color          : var(--color-text-muted);
}
.post-nav-title {
    font-size      : 14px;
    color          : var(--color-text);
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}
.post-nav-link:hover .post-nav-title { color: var(--color-primary); }

/* ==============================
   댓글 섹션
   ============================== */
.comment-section { margin-top: 8px; }

.comment-section__title {
    font-size      : 18px;
    font-weight    : 700;
    margin-bottom  : 20px;
    color          : var(--color-text);
}

.comment-form {
    background     : var(--color-surface);
    border         : 1.5px solid var(--color-border);
    border-radius  : var(--radius-md);
    overflow       : hidden;
    margin-bottom  : 24px;
    transition     : border-color .2s;
}
.comment-form:focus-within { border-color: var(--color-primary); }

.comment-input {
    width          : 100%;
    padding        : 14px 16px;
    background     : transparent;
    border         : none;
    color          : var(--color-text);
    font-size      : 14px;
    font-family    : inherit;
    line-height    : 1.6;
    resize         : none;
    outline        : none;
}
.comment-input::placeholder { color: #555; }

.comment-form__footer {
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    gap            : 8px;
    padding        : 8px 12px;
    background     : var(--color-surface-2);
    border-top     : 1px solid var(--color-border);
}

.comment-char-count {
    font-size      : 12px;
    color          : var(--color-text-muted);
    margin-right   : auto;
}

.comment-login-notice {
    padding        : 16px;
    background     : var(--color-surface);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-md);
    font-size      : 14px;
    color          : var(--color-text-muted);
    text-align     : center;
    margin-bottom  : 24px;
}

/* 댓글 목록 */
.comment-list { display: flex; flex-direction: column; gap: 0; }

.comment-loading {
    text-align     : center;
    padding        : 24px;
    color          : var(--color-text-muted);
    font-size      : 14px;
}

.comment-empty {
    text-align     : center;
    padding        : 32px;
    color          : var(--color-text-muted);
    font-size      : 14px;
}

/* 댓글 아이템 */
.comment-item {
    display        : flex;
    gap            : 12px;
    padding        : 16px 0;
    border-bottom  : 1px solid var(--color-border);
}
.comment-item--reply {
    padding-left   : 40px;
    background     : rgba(255,255,255,.01);
}

.comment-avatar {
    width          : 36px;
    height         : 36px;
    border-radius  : 50%;
    background     : var(--color-surface-2);
    border         : 1px solid var(--color-border);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-weight    : 700;
    font-size      : 14px;
    flex-shrink    : 0;
    color          : var(--color-text-muted);
}

.comment-content { flex: 1; min-width: 0; }

.comment-meta {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    margin-bottom  : 6px;
}
.comment-author {
    font-size      : 13px;
    font-weight    : 700;
    color          : var(--color-text);
}
.comment-time {
    font-size      : 12px;
    color          : var(--color-text-muted);
}

.comment-body {
    font-size      : 14px;
    line-height    : 1.7;
    color          : var(--color-text);
    word-break     : keep-all;
    white-space    : pre-wrap;
}

.comment-deleted {
    font-size      : 13px;
    color          : var(--color-text-muted);
    font-style     : italic;
}

.comment-actions {
    display        : flex;
    gap            : 8px;
    margin-top     : 8px;
}
.comment-action-btn {
    font-size      : 12px;
    color          : var(--color-text-muted);
    background     : none;
    border         : none;
    cursor         : pointer;
    padding        : 2px 6px;
    border-radius  : var(--radius-sm);
    font-family    : inherit;
    transition     : color .15s, background .15s;
}
.comment-action-btn:hover { color: var(--color-text); background: var(--color-surface-2); }

/* 대댓글 입력 폼 */
.reply-form-wrap {
    margin-top     : 10px;
    background     : var(--color-surface);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-md);
    overflow       : hidden;
}
.reply-input { font-size: 13px; padding: 10px 14px; }

/* 대댓글 목록 */
.reply-list {
    margin-top     : 8px;
    border-top     : 1px solid var(--color-border);
}

/* ==============================
   게시글 작성 (write.php)
   ============================== */
.write-wrap {
    max-width      : 800px;
    margin         : 0 auto;
    padding        : 36px 24px 80px;
}

.write-header { margin-bottom: 24px; }
.write-title  { font-size: 22px; font-weight: 700; }

.write-title-wrap { margin-bottom: 16px; }
.write-title-input {
    width          : 100%;
    padding        : 16px 4px;
    background     : transparent;
    border         : none;
    border-bottom  : 2px solid var(--color-border);
    color          : var(--color-text);
    font-size      : 22px;
    font-weight    : 700;
    font-family    : inherit;
    outline        : none;
    transition     : border-color .2s;
}
.write-title-input:focus { border-color: var(--color-primary); }
.write-title-input::placeholder { color: #444; }

/* 블록 에디터 */
.block-editor {
    margin-bottom  : 24px;
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-md);
    overflow       : hidden;
}

.block-add-bar {
    display        : flex;
    align-items    : center;
    gap            : 4px;
    padding        : 10px 14px;
    background     : var(--color-surface-2);
    border-bottom  : 1px solid var(--color-border);
    flex-wrap      : wrap;
}

.block-add-label {
    font-size      : 12px;
    color          : var(--color-text-muted);
    font-weight    : 600;
    margin-right   : 4px;
}

.block-add-btn {
    padding        : 5px 12px;
    background     : var(--color-surface);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-sm);
    font-size      : 13px;
    color          : var(--color-text-muted);
    cursor         : pointer;
    font-family    : inherit;
    transition     : border-color .15s, color .15s;
}
.block-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.block-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

/* 개별 블록 래퍼 */
.block-wrap {
    display        : flex;
    gap            : 8px;
    align-items    : flex-start;
    padding        : 6px;
    border-radius  : var(--radius-sm);
    border         : 1px solid transparent;
    transition     : border-color .15s;
}
.block-wrap:hover { border-color: var(--color-border); }

/* 블록 컨트롤 버튼 */
.block-controls {
    display        : flex;
    flex-direction : column;
    gap            : 2px;
    flex-shrink    : 0;
    opacity        : 0;
    transition     : opacity .15s;
}
.block-wrap:hover .block-controls { opacity: 1; }

.block-ctrl-btn {
    width          : 24px;
    height         : 24px;
    background     : var(--color-surface-2);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-sm);
    font-size      : 12px;
    color          : var(--color-text-muted);
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : background .15s;
}
.block-ctrl-btn:hover { background: var(--color-border); color: var(--color-text); }
.block-ctrl-btn--del:hover { background: rgba(239,68,68,.15); color: var(--color-error); }

.block-inner { flex: 1; min-width: 0; }

/* 텍스트 블록 에디터 */
.text-block-toolbar {
    display        : flex;
    align-items    : center;
    gap            : 2px;
    padding        : 4px 6px;
    background     : var(--color-surface-2);
    border         : 1px solid var(--color-border);
    border-bottom  : none;
    border-radius  : var(--radius-sm) var(--radius-sm) 0 0;
    flex-wrap      : wrap;
}
.tb-btn {
    padding        : 3px 8px;
    background     : none;
    border         : 1px solid transparent;
    border-radius  : 4px;
    font-size      : 12px;
    color          : var(--color-text-muted);
    cursor         : pointer;
    font-family    : inherit;
    line-height    : 1.4;
}
.tb-btn:hover { background: var(--color-border); color: var(--color-text); }
.tb-sep { width: 1px; height: 16px; background: var(--color-border); margin: 0 2px; }

.text-block-editable {
    min-height     : 80px;
    padding        : 12px;
    background     : var(--color-bg);
    border         : 1px solid var(--color-border);
    border-radius  : 0 0 var(--radius-sm) var(--radius-sm);
    outline        : none;
    font-size      : 15px;
    line-height    : 1.75;
    color          : var(--color-text);
}
.text-block-editable:focus { border-color: var(--color-primary); }
.text-block-editable:empty:before {
    content        : attr(placeholder);
    color          : #555;
    pointer-events : none;
}

/* 이미지 블록 */
.image-upload-zone {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    padding        : 32px;
    border         : 2px dashed var(--color-border);
    border-radius  : var(--radius-md);
    cursor         : pointer;
    text-align     : center;
    transition     : border-color .2s;
    color          : var(--color-text-muted);
}
.image-upload-zone:hover { border-color: var(--color-primary); }

.image-block-preview img {
    width          : 100%;
    border-radius  : var(--radius-sm);
    display        : block;
}
.image-upload-msg { font-size: 13px; margin-top: 6px; }

/* YouTube 블록 */
.youtube-block-input { margin-bottom: 10px; }
.youtube-block-preview .youtube-embed-wrap { margin-top: 0; }
.block-divider-preview {
    border         : none;
    border-top     : 2px dashed var(--color-border);
    margin         : 8px 0;
}

/* 작성 하단 버튼 */
.write-footer {
    display        : flex;
    justify-content: flex-end;
    gap            : 10px;
    padding-top    : 16px;
    border-top     : 1px solid var(--color-border);
}

/* ==============================
   반응형
   ============================== */
@media (max-width: 900px) {
    .board-layout { flex-direction: column; padding: 20px 16px; }
    .board-sidebar { width: 100%; position: static; }
    .board-nav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .board-nav-link { padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 600px) {
    .post-article__title { font-size: 20px; }
    .post-article__meta  { flex-direction: column; align-items: flex-start; }
    .post-reactions      { flex-direction: column; gap: 20px; }
    .post-navigate       { flex-direction: column; }
    .star-btn            { font-size: 18px; }
    .view-layout         { padding: 20px 16px 60px; }
    .write-wrap          { padding: 20px 16px 60px; }
    .board-toolbar       { flex-direction: column; align-items: flex-start; }
    .board-search__input { width: 100%; }
}