/* ============================================================
   홍아저씨중고가전 — 게시판 (목록 / 상세 / 작성 / 비밀글)
   공통 토큰 · 헤더 · 푸터 · 상단 배너는 site.css 참조
   ============================================================ */

.hj-board-page { padding: 72px var(--hj-gutter) 110px; }

.hj-board-page__inner {
    max-width: var(--hj-max);
    margin: 0 auto;
}

/* ---------- 상단 도구줄 ---------- */

.hj-board-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.hj-board-bar__count {
    font-size: 15px;
    color: var(--hj-muted);
}

.hj-board-bar__count strong {
    font-weight: 800;
    color: var(--hj-ink-strong);
}

/* ---------- 카테고리 ---------- */

.hj-cats {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hj-cat {
    padding: 10px 18px;
    border: 1px solid var(--hj-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--hj-muted);
}

.hj-cat:hover { border-color: var(--hj-navy); color: var(--hj-navy); }

.hj-cat.is-on {
    background: var(--hj-navy);
    border-color: var(--hj-navy);
    color: #fff;
}

.hj-cat.is-on:hover { color: #fff; }

/* ---------- 목록형 표 ---------- */

.hj-table-wrap {
    margin-top: 28px;
    overflow-x: auto;
}

.hj-table {
    width: 100%;
    /* 제목 칸이 남은 폭을 가져가고 긴 제목은 말줄임 되도록 고정 레이아웃을 쓴다 */
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 2px solid #22282f;
}

.hj-table th {
    padding: 16px 8px;
    border-bottom: 1px solid #ddd8ce;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--hj-muted-light);
    text-align: center;
    white-space: nowrap;
}

.hj-table td {
    padding: 16px 8px;
    border-bottom: 1px solid #f0ede7;
    font-size: 14px;
    color: var(--hj-muted);
    text-align: center;
}

.hj-table th.is-subject,
.hj-table td.is-subject {
    text-align: left;
    padding-left: 14px;
}

.hj-table tbody tr:hover { background: #faf9f6; }

/* 열 너비 — 좁은 화면에서 미디어 쿼리로 줄이거나 감춘다 */
.hj-col-no { width: 80px; }
.hj-col-cat { width: 110px; }
.hj-col-writer { width: 120px; }
.hj-col-date { width: 110px; }
.hj-col-views { width: 80px; }
.hj-col-votes { width: 80px; }

.hj-table tr.is-notice { background: #fdf9ee; }
.hj-table tr.is-notice:hover { background: #fbf4e2; }

.hj-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hj-subject__link {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #22282f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 작성자 이름도 좁은 칸에서 넘치지 않게 */
.hj-col-writer,
.hj-col-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hj-subject__link:hover { color: var(--hj-red); }

.hj-subject__lock {
    flex: none;
    font-size: 12px;
    color: var(--hj-red);
}

.hj-subject__depth {
    flex: none;
    color: var(--hj-muted-lighter);
    font-size: 13px;
}

.hj-subject__count {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    color: var(--hj-navy);
}

.hj-subject__clip {
    flex: none;
    font-size: 12px;
    color: var(--hj-muted-lighter);
}

.hj-badge {
    flex: none;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.hj-badge--new { background: var(--hj-red); color: #fff; }
.hj-badge--notice { background: var(--hj-red); color: #fff; }
.hj-badge--cat { background: var(--hj-navy-tint); color: #5f6c7b; }

/* ---------- 갤러리형 ---------- */

.hj-gallery {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(var(--hj-gallery-cols, 3), minmax(0, 1fr));
    gap: 24px;
}

.hj-gallery__item {
    display: block;
    background: #fff;
    border: 1px solid var(--hj-line);
    border-radius: 18px;
    overflow: hidden;
    color: inherit;
    box-shadow: var(--hj-shadow-sm);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hj-gallery__item:hover {
    border-color: var(--hj-navy);
    transform: translateY(-5px);
    box-shadow: var(--hj-shadow-lg);
    color: inherit;
}

.hj-gallery__media {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--hj-cream);
}

.hj-gallery__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hj-gallery__body {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--hj-line-soft);
}

.hj-gallery__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hj-ink-strong);
    overflow: hidden;
}

.hj-gallery__title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hj-gallery__meta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hj-muted-light);
}

/* 글쓰기 폼의 캡차 영역 */
.hj-form__captcha {
    padding: 16px 0 0;
    border-top: 1px solid var(--hj-line-soft);
}

.hj-form__captcha .kina-recaptcha-note { margin-top: 0; }

/* ---------- 판매 상태 (중고가전판매) ---------- */

.hj-onsale { margin-top: 8px; }

.hj-onsale__head {
    margin-top: 32px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hj-ink-strong);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* '전체 상품' 머리글은 판매중 섹션과 간격을 더 벌린다 */
.hj-onsale__head--all { margin-top: 52px; }

.hj-onsale__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--hj-ink-strong);
}

.hj-onsale__count {
    font-size: 14px;
    font-weight: 700;
    color: var(--hj-muted-light);
}

/* 판매완료 카드 — 리본을 얹고 사진을 낮춰 판매중과 한눈에 갈리게 한다 */
.hj-sold {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(22, 32, 44, .88);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hj-gallery__item.is-sold .hj-gallery__media img {
    filter: grayscale(.9) brightness(.86);
}

.hj-gallery__item.is-sold .hj-gallery__title { color: var(--hj-muted); }

.hj-gallery__item.is-sold:hover .hj-gallery__media img { filter: none; }

/* ---------- 블로그형 ---------- */

.hj-bloglist {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hj-blogitem {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--hj-line);
    border-radius: 16px;
    box-shadow: var(--hj-shadow-sm);
}

.hj-blogitem--noimg { grid-template-columns: minmax(0, 1fr); }

.hj-blogitem__media {
    height: 170px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hj-cream);
}

.hj-blogitem__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hj-blogitem__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--hj-ink-strong);
}

.hj-blogitem__summary {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hj-muted);
}

.hj-blogitem__meta {
    margin-top: 16px;
    font-size: 13px;
    color: var(--hj-muted-light);
}

/* ---------- 빈 목록 ---------- */

.hj-empty {
    margin-top: 28px;
    padding: 80px 20px;
    border: 1px dashed #d8d2c6;
    border-radius: 16px;
    text-align: center;
    font-size: 16px;
    color: var(--hj-muted-light);
    background: var(--hj-cream);
}

/* ---------- 페이지네이션 ---------- */

.hj-pagination {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hj-pagination__item {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1efe9;
    color: #5f6c7b;
    font-size: 14px;
    font-weight: 700;
}

.hj-pagination__item:hover { background: #e6e2d8; color: var(--hj-ink); }

.hj-pagination__item.is-active {
    background: var(--hj-navy);
    color: #fff;
}

.hj-pagination__item.is-active:hover { background: var(--hj-navy); color: #fff; }

/* ---------- 검색 ---------- */

.hj-search {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hj-select,
.hj-input,
.hj-textarea {
    padding: 12px 14px;
    background: #faf9f6;
    border: 1px solid #ddd8ce;
    border-radius: 9px;
    color: var(--hj-ink);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.hj-select:focus,
.hj-input:focus,
.hj-textarea:focus { border-color: var(--hj-navy); background: #fff; }

.hj-textarea {
    width: 100%;
    line-height: 1.7;
    resize: vertical;
}

.hj-search .hj-input { width: 240px; }

.hj-input--sm {
    width: 130px;
    padding: 8px 10px;
    font-size: 13px;
}

/* ---------- 상세 ---------- */

.hj-post {
    margin-top: 28px;
    border-top: 2px solid #22282f;
}

.hj-post__head {
    padding: 30px 4px 22px;
    border-bottom: 1px solid var(--hj-line);
}

.hj-post__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.35;
    color: var(--hj-ink-strong);
}

.hj-post__meta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--hj-muted-light);
}

.hj-post__meta strong {
    font-weight: 700;
    color: var(--hj-muted);
}

.hj-post__notice {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--hj-navy-tint);
    font-size: 15px;
    font-weight: 600;
    color: #244a75;
}

.hj-post__embed {
    margin-top: 24px;
    position: relative;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
}

.hj-post__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hj-post__body {
    padding: 40px 4px 48px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--hj-text);
    word-break: break-word;
}

.hj-post__body img { max-width: 100%; height: auto; }
.hj-post__body a { text-decoration: underline; }
.hj-post__body table { max-width: 100%; }

.hj-post__files {
    padding: 22px 24px;
    border-radius: 12px;
    background: var(--hj-cream);
    border: 1px solid var(--hj-line);
}

.hj-post__files-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--hj-muted);
}

.hj-post__files ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hj-post__files li {
    font-size: 15px;
    color: var(--hj-muted);
}

.hj-post__files a { font-weight: 600; }

.hj-vote {
    margin-top: 34px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hj-post__actions {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--hj-line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hj-post__actions-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 이전/다음 글 */
.hj-siblings {
    margin-top: 40px;
    border-top: 1px solid var(--hj-line);
}

.hj-siblings__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--hj-line-soft);
}

.hj-siblings__label {
    flex: none;
    width: 72px;
    font-size: 13px;
    font-weight: 800;
    color: var(--hj-muted-light);
}

.hj-siblings__link {
    font-size: 15px;
    color: #22282f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hj-siblings__link:hover { color: var(--hj-red); }

/* ---------- 댓글 ---------- */

.hj-comments { margin-top: 56px; }

.hj-comments__title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hj-ink-strong);
}

.hj-comments__title em {
    font-style: normal;
    margin-left: 6px;
    color: var(--hj-red);
}

.hj-comments__list {
    margin-top: 20px;
    border-top: 1px solid var(--hj-line);
}

.hj-comment {
    padding: 20px 4px;
    border-bottom: 1px solid var(--hj-line-soft);
}

.hj-comment--reply {
    padding-left: 26px;
    border-left: 3px solid var(--hj-line);
    background: #faf9f6;
}

.hj-comment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.hj-comment__who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hj-ink);
}

.hj-comment__date {
    font-size: 13px;
    font-weight: 500;
    color: var(--hj-muted-lighter);
}

.hj-comment__body {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--hj-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.hj-comment__body.is-deleted {
    color: var(--hj-muted-lighter);
    font-style: italic;
}

.hj-comment__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hj-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--hj-muted-light);
    cursor: pointer;
}

.hj-linkbtn:hover { color: var(--hj-red); }

.hj-comment-form {
    margin-top: 24px;
    padding: 24px;
    background: var(--hj-cream);
    border: 1px solid var(--hj-line);
    border-radius: 16px;
}

.hj-comment-form--reply {
    margin-top: 16px;
    padding: 18px;
}

.hj-comment-form__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hj-comment-form__row .hj-input { width: 180px; }

.hj-comment-form__send {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- 작성 폼 ---------- */

.hj-form {
    margin-top: 28px;
    border-top: 2px solid #22282f;
}

.hj-field {
    padding: 22px 4px;
    border-bottom: 1px solid var(--hj-line-soft);
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.hj-field__label {
    padding-top: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--hj-ink);
}

.hj-field__label i {
    font-style: normal;
    color: var(--hj-red);
}

.hj-field__body { min-width: 0; }

.hj-field__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hj-field__hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--hj-muted-light);
}

.hj-field .hj-input,
.hj-field .hj-select { width: 100%; max-width: 100%; }

.hj-field__row .hj-input { width: 220px; }
.hj-field .hj-select { max-width: 240px; }

.hj-checks {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.hj-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hj-muted);
    cursor: pointer;
}

.hj-check input { width: 17px; height: 17px; accent-color: var(--hj-red); }

.hj-form__actions {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* CKEditor 높이 */
.ck-editor__editable { min-height: 400px; }

/* ---------- 비밀글 확인 ---------- */

.hj-secret {
    max-width: 520px;
    margin: 0 auto;
    padding: 44px 40px;
    background: #fff;
    border: 1px solid var(--hj-line);
    border-radius: 18px;
    box-shadow: var(--hj-shadow-sm);
    text-align: center;
}

.hj-secret__ico {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hj-red-tint);
    color: var(--hj-red);
    font-size: 27px;
}

.hj-secret__title {
    margin-top: 22px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hj-ink-strong);
}

.hj-secret__meta {
    margin-top: 10px;
    font-size: 14px;
    color: var(--hj-muted-light);
}

.hj-secret__desc {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hj-muted);
}

.hj-secret__error {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--hj-red-tint);
    border: 1px solid #f3ccc9;
    font-size: 14px;
    font-weight: 600;
    color: #99241d;
}

.hj-secret__form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hj-secret__form .hj-input { text-align: center; font-size: 17px; }

.hj-secret__note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--hj-muted-lighter);
}

/* 대화상자(.hj-dialog) 스타일은 공용이라 site.css로 옮겼다 — 퀵메뉴도 쓴다 */

.hj-dialog__body .hj-input { width: 100%; margin-top: 10px; }

/* ---------- 반응형 ---------- */

@media (max-width: 980px) {
    .hj-board-page { padding: 48px var(--hj-gutter) 80px; }

    .hj-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hj-blogitem {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hj-post__title { font-size: 23px; }

    .hj-field {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hj-field__label { padding-top: 0; }
}

@media (max-width: 640px) {
    .hj-gallery { grid-template-columns: 1fr; }

    /* 좁은 화면에서는 부가 열을 감추고 남은 열을 좁힌다 */
    .hj-col-views,
    .hj-col-votes,
    .hj-col-cat { display: none; }

    .hj-col-no { width: 48px; }
    .hj-col-writer { width: 66px; }
    .hj-col-date { width: 78px; }

    .hj-table th,
    .hj-table td { padding: 14px 4px; font-size: 12px; }

    .hj-subject__link { font-size: 14px; }

    .hj-search { flex-direction: column; }
    .hj-search .hj-input,
    .hj-search .hj-select,
    .hj-search .hj-btn { width: 100%; }

    .hj-post__actions,
    .hj-form__actions { flex-direction: column-reverse; }

    .hj-post__actions-group { width: 100%; }
    .hj-post__actions .hj-btn,
    .hj-form__actions .hj-btn { flex: 1 1 auto; }

    .hj-comment-form__row .hj-input { width: 100%; }

    .hj-secret { padding: 34px 24px; }
}