/* 짧은 게시물(타임라인) 공통 스타일: index, /post, /post-detail 에서 공유한다 */

.post-compose {
    border: 1px solid #E0DFE0;
    background-color: #FFFFFF;
    padding: 10px;
    margin-bottom: 10px;
}
.post-compose textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    font-size: 10pt;
    border: 0px;
    outline: none;
    padding: 0px;
}
.post-compose-identity {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 6px;
}
.post-compose-identity input {
    font-size: 10pt;
    width: 50px;
}
.post-compose-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 6px;
    font-size: 9pt;
}
.post-compose-info input[type="datetime-local"] {
    font-size: 9pt;
}
.post-compose-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 8px;
    margin-top: 4px;
}
.post-compose-footer input[type="submit"], .comment-compose-footer input[type="submit"] {
    margin-left: auto;
}
/* 게시글/댓글 작성 박스에서는 닉네임·비밀번호 입력을 작성 버튼과 같은 줄에 배치한다 */
.post-compose-footer .post-compose-identity, .comment-compose-footer .post-compose-identity {
    flex: 1 1 auto;
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}
.post-compose-footer .post-compose-identity input, .comment-compose-footer .post-compose-identity input {
    flex: 1 1 0;
    min-width: 0;
}
.post-card {
    display: flex;
    gap: 10px;
    padding: 0 10px;
    margin-bottom: 8px;
}
/* 게시글/댓글 트리 공용 부품: 작성일자를 점(node)으로 삼고, 하나의 선(rail)으로 같은 레벨끼리 이어준다.
   (Claude Code 채팅창의 프로세스 트리, reddit.com의 대댓글 트리를 참고한 디자인) */
.tree-col {
    flex: 0 0 16px;
    position: relative;
}
.tree-col::before {
    content: '';
    position: absolute;
    left: 7.5px;
    top: 0;
    bottom: -8px;
    width: 1px;
    background-color: #E0DFE0;
}
.tree-col.tree-col-stop::before {
    bottom: 0;
}
.post-card:last-child > .tree-col::before {
    bottom: 0;
}
/* 게시글(post-card)/댓글(comment-item)의 tree-col은 점 대신 작성자 프로필 이미지를 노드로 쓰므로
   폭을 넓히고 세로선을 아바타 중심(32px의 절반)으로 옮긴다 */
.post-card > .tree-col, .comment-item .tree-col {
    flex: 0 0 32px;
}
.post-card > .tree-col::before, .comment-item .tree-col::before {
    left: 15.5px;
}
.tree-avatar {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid #E0DFE0;
    border-radius: 50%;
    background-color: #FFFFFF;
    z-index: 1;
    object-fit: cover;
}
/* 댓글 아바타(노드) 컬럼의 선은 같은 레벨의 형제와 연결되는 구간만 그린다.
   아바타 중심(top: 10px + 24px/2 = 22px)을 기준으로 위/아래 구간을 잘라낸다. */
.tree-col-node-no-above::before {
    top: 22px;
}
.tree-col-node-no-below::before {
    bottom: auto;
    height: 22px;
}
.tree-col-node-isolated::before {
    display: none;
}
/* 부모의 형제가 없어 새로 갈라져 나온 댓글은 부모 tree 줄기에서 곡선 커넥터로 이어진다.
   depth 1은 게시글 tree-col(자신의 왼쪽 32px+gap 10px = 42px 바깥)에서,
   그 외 대댓글은 바로 왼쪽 조상 컬럼(32px 바깥)에서 갈라져 나온다. */
.tree-col-first-link::after, .tree-col-parent-link::after {
    content: '';
    position: absolute;
    top: 0;
    height: 22px;
    box-sizing: border-box;
    border-left: 1px solid #E0DFE0;
    border-bottom: 1px solid #E0DFE0;
    border-bottom-left-radius: 14px;
}
.tree-col-first-link::after {
    left: -26px;
    width: 42px;
}
.tree-col-parent-link::after {
    left: -16px;
    width: 32px;
}
.post-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
}
.post-meta {
    color: gray;
    font-size: 8.5pt;
    margin-bottom: 4px;
}
.post-contents {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.post-empty {
    color: gray;
    text-align: center;
    padding: 20px;
}
.post-actions {
    margin-top: 6px;
    font-size: 8.5pt;
}
.post-actions a, .post-actions button.link-like {
    color: gray;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}
.post-actions a:hover, .post-actions button.link-like:hover {
    text-decoration: underline;
}
.post-more {
    text-align: center;
    margin-bottom: 10px;
}
.reply-form, .edit-form {
    display: none;
    margin-top: 8px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 8px;
}
.reply-form textarea, .edit-form textarea, .comment-compose textarea {
    width: 100%;
    min-height: 50px;
    resize: vertical;
    font-family: inherit;
    font-size: 9.5pt;
}
.reply-form-footer, .edit-form-footer {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
/* 게시글 프로세스(post-card의 tree-col)와 댓글 프로세스(comment-item의 tree-col)는
   서로 독립된 트리이므로 정렬을 맞추지 않고 별도 영역으로 분리한다. */
.comments-section {
    display: none;
    margin-top: 8px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 4px;
}
.comment-item {
    display: flex;
    align-items: stretch;
    margin-top: 8px;
}
.comment-item:first-child {
    margin-top: 0;
}
.comment-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0 2px 0;
}
.comment-compose {
    margin-top: 8px;
    border-top: 1px dotted #E0DFE0;
    padding-top: 8px;
}
.comment-compose-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}