/* File: style.css
   Description: 마닌포스트 댓글 (Final: 화살표 복구 + 카운트 표시)
*/

/* 1. 전체 레이아웃 */
#manin-comments-wrap {
    margin-top: 50px;
    margin-bottom: 120px !important;
    border-top: 2px solid #333;
    padding-top: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    max-width: 100%;
    overflow: visible !important; /* ★ 화살표가 밖으로 나가도 잘리지 않게 함 */
}

/* 2. 제목 스타일 (댓글 N개) */
#manin-comments-wrap h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    padding-left: 10px;
}
/* 숫자만 색깔 다르게 포인트 (선택사항) */
#manin-comments-wrap h3 span {
    color: #e74c3c;
}

/* 3. 입력 폼 디자인 */
.manin-form-wrap {
    background: #fff !important;
    padding: 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px;
    margin-top: 30px;
}
.manin-comment-form .input-row { display: flex; gap: 10px; margin-bottom: 10px; }
#manin-comments-wrap input[type="text"],
#manin-comments-wrap input[type="password"] {
    width: 150px !important; height: 40px !important; padding: 0 12px !important;
    font-size: 14px !important; border: 1px solid #ddd !important; border-radius: 4px !important;
    background: #fdfdfd !important;
}
#manin-comments-wrap textarea {
    width: 100% !important; height: 100px !important; padding: 12px !important;
    border: 1px solid #ddd !important; border-radius: 4px !important;
    font-size: 14px !important; resize: vertical; margin-bottom: 10px; background: #fff !important;
}
#manin-comments-wrap button[type="submit"] {
    display: block; width: 100% !important; max-width: 120px; height: 42px;
    background: #4b5469 !important; color: #fff !important; border: none !important;
    border-radius: 4px !important; font-size: 14px !important; font-weight: bold;
    cursor: pointer; margin-left: auto;
}
#manin-comments-wrap button[type="submit"]:hover { background: #384052 !important; }

/* 4. 댓글 목록 초기화 */
.manin-comment-ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.manin-comment-li { margin-bottom: 0 !important; border-bottom: 1px solid #eee; position: relative; }

/* 5. 댓글 본체 (공통) */
.comment-body {
    padding: 12px 10px !important;
    background: #fff !important;
    position: relative;
    z-index: 2; /* 화살표보다 위에 있게 */
}

/* =================================================
   ★ [핵심] 대댓글 화살표(↳) 복구 & 디자인
   ================================================= */

/* Depth 1 (대댓글) 컨테이너 */
.manin-comment-ul.depth-1 {
    margin-top: 5px;
    margin-left: 0 !important;
}

/* 대댓글 박스 위치 잡기 */
.manin-comment-ul.depth-1 .manin-comment-li {
    margin-left: 30px; /* 왼쪽 공간 확보 (화살표 자리) */
    border-bottom: none !important;
    overflow: visible !important; /* ★ 중요: 화살표 보이게 */
}

/* 평탄화 (대대댓글도 똑같이 30px만 밈) */
.manin-comment-ul.depth-1 .manin-comment-ul.depth-1 .manin-comment-li {
    margin-left: 0 !important;
}

/* ★ 화살표 아이콘 (↳) */
.manin-comment-ul.depth-1 .manin-comment-li::before {
    content: "\21B3";      /* ↳ 유니코드 */
    position: absolute;
    left: -22px;           /* 박스 왼쪽으로 뺌 */
    top: 10px;             /* 높이 조절 */
    font-size: 20px;
    color: #bbb;           /* 연한 회색 */
    font-weight: bold;
    font-family: Arial, sans-serif; /* 특수문자 잘 나오는 폰트 */
    z-index: 1;
}

/* 대댓글 박스 스타일 (인벤 스타일) */
.manin-comment-ul.depth-1 .comment-body {
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 5px;
    padding: 10px 15px !important;
    margin-bottom: 8px;
}

/* 6. 메타 정보 + 버튼 상단 배치 */
.meta { 
    margin-bottom: 6px; font-size: 13px; display: flex; 
    justify-content: space-between; align-items: center; 
}
.left-info { display: flex; align-items: center; }
.meta .nick { font-weight: bold; color: #333; margin-right: 6px; font-size: 14px; }
.meta .ip { color: #999; font-size: 11px; }

.right-info { display: flex; align-items: center; gap: 8px; }
.meta .date { color: #bbb; font-size: 12px; }

.right-info button {
    background: none !important; border: 1px solid #ddd !important; border-radius: 3px;
    font-size: 11px !important; color: #777 !important; cursor: pointer;
    padding: 2px 6px !important; line-height: 1.2;
}
.right-info button:hover { color: #333 !important; border-color: #999 !important; background: #f0f0f0 !important; }

/* 7. 본문 */
.content {
    font-size: 14px;       /* 15px가 좀 크면 14px로, 유지하려면 15px */
    color: #333;
    line-height: 0.9;     /* 기존 1.5 -> 1.35 (이게 국룰) */
    margin-bottom: 0 !important;
    white-space: pre-wrap;
    padding-top: 5px;
    word-break: break-all;
}

/* 8. 답글 입력창 */
.reply-box { margin-left: 30px; padding-top: 5px; }