/**
 * 컴포넌트 공통 스타일 (Sneat 테마 색상/클래스 기반으로 부족한 부분만 보완)
 *
 * 색상 (Sneat 기본값)
 *   제목 #566a7f / 본문 #697a8d / 흐린 글자 #a1acb8 / 포인트 #696cff / 구분선 #eceef1
 */

/* =========================================================
 * 게시글 목록 (post/post)
 * ========================================================= */
/* 카드 없이 콘텐츠 영역 폭 그대로 사용 → 좌우 끝이 상단 검색 바(navbar)와 맞음 */

/* 말머리 탭 : 둥근 칩, 좁은 화면에서는 가로 스크롤 */
.post-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #d9dee3;  /* 회색 바탕 위라서 #eceef1 보다 진한 선 */
}
.post-tabs::-webkit-scrollbar {
    display: none;
}
.post-tabs button {
    flex: none;
    height: 2.125rem;
    padding: 0 0.875rem;
    border: 1px solid #d9dee3;
    border-radius: 999px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #566a7f;
}
.post-tabs button:hover {
    border-color: #696cff;
    color: #696cff;
}
.post-tabs button[aria-pressed="true"] {
    border-color: #696cff;
    background: #696cff;
    color: #fff;
}
.post-tabs button:focus-visible {
    outline: 2px solid #696cff;
    outline-offset: 2px;
}

/* 행 : 썸네일(정사각형 고정 --thumb) + 글 영역(같은 높이)
   → 모든 행 높이가 같고, 썸네일 위·아래 끝이 글 영역과 맞음
   (사진을 행 높이에 맞춰 늘리면 제목 길이마다 썸네일 크기가 달라지므로 고정 크기 + 줄 수 제한) */
.post-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.post-rows li {
    border-bottom: 1px solid #d9dee3;
}
.post-row {
    --thumb: 6.75rem;           /* 108px = 제목 2줄 + 미리보기 1줄 + 정보 줄 */
    display: grid;
    grid-template-columns: var(--thumb) minmax(0, 1fr);
    gap: 1.125rem;
    padding: 1.125rem 0;        /* 좌우 여백 없음 → 썸네일 왼쪽 끝이 검색 바 왼쪽 끝과 맞음 */
    color: inherit;
}
.post-row:focus-visible {
    outline: 2px solid #696cff;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.post-thumb.avatar {            /* Sneat .avatar 크기만 바꿔서 사용 */
    width: var(--thumb);
    height: var(--thumb);
}
.post-thumb img {
    object-fit: cover;
}
.post-thumb .bx {
    font-size: 2rem;
}

.post-row-body {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* 제목·미리보기·정보를 한 덩어리로 묶어 썸네일 가운데에 맞춤 (짧은 글도 사이가 벌어지지 않음) */
    min-width: 0;
    min-height: var(--thumb);
}
.post-row-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;      /* 긴 제목은 두 줄까지, 전체 제목은 마우스를 올리면 보임 */
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.625rem;
    color: #566a7f;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.post-row:hover .post-row-title {
    color: #696cff;
}
.post-row-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 0.125rem;
    font-size: 0.90625rem;
    line-height: 1.375rem;
    color: #5e6b79;
}
.post-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: #5e6b79;             /* hover 배경 위에서도 대비 4.5:1 이상 (#a1acb8 은 2.3:1) */
}
.post-row-who {
    display: flex;
    gap: 0.375rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.post-row-who b {
    font-weight: 600;
    color: #566a7f;
}
.post-row-meta i {
    font-size: 1rem;
    vertical-align: -3px;
    margin-right: 0.25rem;
}

/* 모바일 : 폭이 좁아 조회수는 빼고 제목 2줄 + 미리보기 1줄 + 정보 줄, 썸네일 92px */
@media (max-width: 575.98px) {
    .post-row {
        --thumb: 5.75rem;
        gap: 0.75rem;
        padding: 1rem 0;
    }
    .post-thumb .bx {
        font-size: 1.625rem;
    }
    .post-row-title {
        font-size: 1rem;
        line-height: 1.375rem;
    }
    .post-row-views {
        display: none;
    }
}

.post-list-empty {
    margin: 0;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #5e6b79;
}

/* =========================================================
 * 게시글 상세 (post/postDetail)
 * ========================================================= */
/* 카드 없이 콘텐츠 영역 폭 그대로 사용 → 좌우 끝이 상단 검색 바(navbar)와 맞음
   게시물과 댓글은 바탕색 없이 넉넉한 여백 + 가는 선 + 댓글 제목으로 나눔 */
.post-detail-head {
    padding-bottom: 0;          /* 제목 아래 선은 두지 않음 → 화면의 가는 선은 게시물/댓글 경계 하나뿐 */
}

.post-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5e6b79;
}
.post-detail-back i {
    font-size: 1.25rem;
}
.post-detail-back:hover {
    color: #696cff;
}
.post-detail-back:focus-visible {
    outline: 2px solid #696cff;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.post-detail-title {
    max-width: 26em;
    margin: 1rem 0 1.125rem;
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.025em;
    color: #233446;             /* Sneat $dark : 화면에서 가장 진한 글자 */
    text-wrap: balance;
    word-break: keep-all;       /* 한글이 단어 중간에서 줄바꿈되지 않도록 */
}

.post-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #5e6b79;             /* 흰 바탕 위 대비 5.45:1 (#a1acb8 은 2.3:1) */
    font-variant-numeric: tabular-nums;
}
.post-detail-meta > * + *::before {
    content: "·";
    margin-right: 0.5rem;
}

/* 본문 : Quill 에디터 HTML 을 그대로 보여주는 영역 (화면이 넓어도 한 줄이 너무 길지 않게 760px 까지) */
.post-detail-body.ql-editor {
    max-width: 47.5rem;
    margin: 2.125rem 0 0;
    padding: 0;
    height: auto;
    overflow: visible;
    white-space: normal;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #4e5d6c;             /* 기본 본문색보다 조금 진하게 → 긴 글 가독성 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.post-detail-body.ql-editor p {
    margin-bottom: 0.5em;
}
.post-detail-body.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}


/* =========================================================
 * 댓글 (post/postReply)
 *   - 댓글 영역은 흰 바탕 그대로, 위쪽 가는 선과 여백으로 게시물과 구분
 *   - 작성 폼은 맨 위, 평소엔 한 줄 → 누르면 펼쳐지고 등록 버튼이 나타남 (답글 폼도 같음)
 *   - 단계별 바탕색 : 댓글 흰색 → 대댓글 #fbfbfb → 대대댓글 #f7f7f7 (옛 상세 화면과 같은 색)
 * ========================================================= */
.post-detail-comments {
    --cm-av: 2.25rem;
    --cm-av-sm: 1.75rem;
    --cm-gap: 0.75rem;
    --cm-line: #d9dee3;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid #d9dee3;
}
@media (max-width: 575.98px) {
    .post-detail-comments {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
    }
}
/* 댓글 영역(입력창·답글 상자·페이징)은 검색 바 폭을 꽉 채움 → 페이징이 화면 가운데에 옴
   글자 줄 길이만 .cm-body 에서 제한 */

.cm-title {
    margin: 0 0 1.125rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #233446;
}

/* 작성 폼 : 아바타 + 입력창, 비어 있고 포커스가 없으면 한 줄짜리 입력창만 보임 */
.cm-form {
    display: flex;
    gap: var(--cm-gap);
}
.cm-form .avatar {
    width: var(--cm-av);
    height: var(--cm-av);
}
.cm-form-main {
    flex: 1;
    min-width: 0;
}
.cm-form textarea {
    display: block;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: #fff;
    line-height: 1.5;
    resize: none;
    transition: min-height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cm-form:focus-within textarea,
.cm-form textarea:not(:placeholder-shown) {
    min-height: 5.5rem;
    resize: vertical;
}
.cm-form-actions {
    display: none;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.cm-form:focus-within .cm-form-actions,
.cm-form:has(textarea:not(:placeholder-shown)) .cm-form-actions {
    display: flex;
}
[data-depth="0"] > .cm-form {
    margin-bottom: 1.75rem;     /* 폼과 첫 댓글 사이 */
}

/* 목록 */
.cm-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cm-item {
    display: flex;
    gap: var(--cm-gap);
}
.cm-item + .cm-item {
    margin-top: 1.5rem;
}
.cm-item > .avatar {
    width: var(--cm-av);
    height: var(--cm-av);
}
.cm-main {
    flex: 1;
    min-width: 0;               /* 긴 글자가 영역을 넘치지 않도록 */
}
.cm-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
    line-height: 1.4;
}
.cm-author {
    font-size: 0.875rem;
    font-weight: 700;
    color: #233446;
}
.cm-time {
    font-size: 0.8125rem;
    color: #5e6b79;
}
.cm-body {
    max-width: 47.5rem;         /* 상자는 넓어도 글은 읽기 좋은 길이에서 줄바꿈 (본문과 같은 폭) */
    margin: 0.25rem 0 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #4e5d6c;
    white-space: pre-wrap;      /* 입력한 줄바꿈 유지 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 답글 열기 버튼 : 작은 알약 모양 (누르기 쉬운 높이 확보) */
.cm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.75rem;
    margin-left: -0.5rem;       /* 글자 시작을 본문과 맞춤 */
    padding: 0 0.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #696cff;
}
.cm-toggle:hover {
    background: #e7e7ff;
}
.cm-toggle:focus-visible {
    outline: 2px solid #696cff;
    outline-offset: 1px;
}
.cm-toggle i {
    font-size: 1rem;
}

/* 답글 영역 : 부모 본문 아래로 들여쓰기 + 단계별로 미묘하게 진해지는 바탕색 */
.cm-children {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: #fbfbfb;        /* 대댓글 */
    box-shadow: inset 0 0 0 1px #f0f1f3;  /* 흰 바탕 위에서 상자 경계가 살짝 보이게 */
}
.cm-children .cm-children {
    background: #f7f7f7;        /* 대대댓글 */
    box-shadow: inset 0 0 0 1px #eceef1;
}
.cm-children .cm-item > .avatar {
    width: var(--cm-av-sm);
    height: var(--cm-av-sm);
}
.cm-children .cm-item + .cm-item {
    margin-top: 1rem;
}
.cm-children .cm-form {
    margin-top: 0.875rem;       /* 답글 목록 아래 한 줄 입력창 */
}
.cm-children .cm-form textarea {
    min-height: 2.375rem;       /* 답글 입력창은 댓글 입력창보다 한 단계 작게 */
    padding: 0.4375rem 0.75rem;
    font-size: 0.875rem;
}
.cm-children .cm-form:focus-within textarea,
.cm-children .cm-form textarea:not(:placeholder-shown) {
    min-height: 4.5rem;
}
.cm-children .cm-list:empty + .cm-form,
.cm-children [data-list]:empty + .cm-form {
    margin-top: 0;
}

/* 빈 목록 */
.cm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0 0.5rem;
    color: #5e6b79;
    text-align: center;
}
.cm-empty i {
    font-size: 1.75rem;
    color: #8592a3;
}

/* =========================================================
 * 어르신용 게시판 (oldPost/postList, oldPost/postDetail)
 *   - 기본 글자 20px 이상, 진한 글자색(대비 높게), 누르기 쉬운 큰 버튼(높이 56px 이상)
 *   - .old 영역 안에서만 적용 → 다른 화면에는 영향 없음
 * ========================================================= */
.old {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.25rem;         /* 20px */
    line-height: 1.7;
    color: #222;
    word-break: keep-all;
}

.old-page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.old-page-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* 큰 버튼 : 글자 + 넓은 누름 영역 */
.old .old-btn {
    min-height: 56px;
    padding: 0.625rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-width: 2px;
    border-radius: 0.75rem;
}
.old .old-btn i {
    font-size: 1.5rem;
    vertical-align: -4px;
}

/* 목록 : 글 하나가 카드 하나, 카드 전체를 눌러서 열기 */
.old-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.old-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    background: #fff;
    border: 2px solid #d9dee3;
    border-radius: 1rem;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.old-item:hover,
.old-item:focus-visible {
    border-color: #696cff;
    background: #f5f5ff;
    outline: none;
}
.old-item-title {
    display: block;
    font-size: 1.625rem;        /* 26px */
    font-weight: 700;
    line-height: 1.4;
    color: #222;
    overflow-wrap: anywhere;
}
.old-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.5rem;
    font-size: 1.125rem;
    color: #555;                /* 흐린 회색 대신 충분히 진한 회색 */
}
.old-item-go {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4f52e0;
}
.old-item-go i {
    font-size: 1.5rem;
    vertical-align: -5px;
}

.old-empty {
    text-align: center;
    padding: 3rem 0;
    font-size: 1.375rem;
    color: #555;
}

/* 이전 / 다음 */
.old-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.old-pager-now {
    min-width: 4em;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
}

/* 상세 */
.old-detail-card {
    padding: 2rem;
}
.old-detail-title {
    font-size: 2.25rem;         /* 36px */
    font-weight: 700;
    line-height: 1.35;
    color: #222;
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
}
.old-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    font-size: 1.125rem;
    color: #555;
}
.old-detail-body.ql-editor {
    padding: 0;
    height: auto;
    overflow: visible;
    white-space: normal;
    font-size: 1.375rem;        /* 22px */
    line-height: 1.9;
    color: #222;
    overflow-wrap: anywhere;
}
.old-detail-body.ql-editor p {
    margin-bottom: 0.75em;
}
.old-detail-body.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* 최신글 / 글 번호순 (oldPost/leftPost, oldPost/rightPost) */
.old-box {
    padding: 1.5rem;
    background: #fff;
    border: 2px solid #d9dee3;
    border-radius: 1rem;
}
.old-box-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
}
.old-box-title i {
    vertical-align: -3px;
}
.old-rows {
    list-style: none;
    padding: 0;
    margin: 0;
}
.old-rows li + li {
    border-top: 1px solid #d9dee3;
}
.old-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 64px;           /* 한 줄도 누르기 쉽게 */
    padding: 0.75rem 0.5rem;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.old-row:hover,
.old-row:focus-visible {
    background: #f5f5ff;
    outline: none;
}
.old-row-title {
    flex: 1;
    min-width: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: #222;
    overflow-wrap: anywhere;
}
.old-row-side {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: #555;
}
.old-row-no {
    flex-shrink: 0;
    min-width: 4.5em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: #e7e7ff;
    color: #4f52e0;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
}

/* 댓글 (oldPost/postReply) */
.old-reply-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
}
.old-reply-title i {
    vertical-align: -3px;
}
.old-reply-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.old-reply-item {
    padding: 1.25rem 0;
    border-top: 1px solid #d9dee3;
}
.old-reply-item:first-child {
    border-top: 0;
}
.old-reply-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}
.old-reply-author {
    font-size: 1.25rem;
    font-weight: 700;
    color: #222;
}
.old-reply-time {
    font-size: 1.0625rem;
    color: #555;
}
.old-reply-body {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.25rem;
    line-height: 1.8;
    color: #222;
    white-space: pre-wrap;      /* 입력한 줄바꿈 유지 */
    overflow-wrap: anywhere;
}
.old .old-reply-toggle {
    min-height: 48px;
    padding: 0.375rem 1.125rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
}
.old-reply-toggle i {
    font-size: 1.25rem;
    vertical-align: -3px;
}

/* 답글 영역 : 왼쪽 굵은 선으로 "누구에게 단 답글인지" 구분 */
.old-reply-children {
    margin-top: 1rem;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-left: 4px solid #c7c8ff;
}
.old-reply-children .old-reply-children {
    border-left-color: #e0e0e0;
}

/* 작성 폼 */
.old-reply-form {
    margin-top: 1.5rem;
}
.old-reply-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.old-reply-form textarea {
    min-height: 120px;
    font-size: 1.25rem;
    line-height: 1.7;
    border-width: 2px;
    resize: vertical;
}
.old-reply-children .old-reply-form textarea {
    min-height: 96px;
}
.old-reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

@media (max-width: 575.98px) {
    .old-page-title,
    .old-detail-title {
        font-size: 1.875rem;
    }
    .old-item,
    .old-detail-card {
        padding: 1.25rem;
    }
    .old-pager .old-btn {
        flex: 1;                /* 휴대폰에서는 버튼을 넓게 */
    }
}