/* pretendard 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 전체 컨테이너 폰트 설정 */
.doctor-container {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
    color: #111111;
    line-height: 1.4;
    background-color: #fff; /* 배경 흰색 확보 */
    padding-bottom: 50px;
}

/* =========================================
   1. 헤더 영역 (제목 + 검색창)
   ========================================= */
.community-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important; /* 밑선 기준 정렬 */
    margin-bottom: 40px;
    width: 100%;
    padding-top: 10px;
}

.community-header .text-group h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.5px;
}

.community-header .text-group p {
    font-size: 15px !important;
    color: #666 !important;
    margin: 0 !important;
    font-weight: 400;
}

/* 검색창 디자인 */
.header-search-box {
    position: relative;
    width: 320px;
}

.header-search-box input {
    width: 100%;
    height: 48px;
    padding: 0 50px 0 20px; /* 아이콘 공간 확보 */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.header-search-box input:focus {
    border-color: #455BB7 !important;
}

.header-search-box button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   2. 탭 메뉴 (가로형 리스트)
   ========================================= */
.sub-tabs-wrapper {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.sub-tabs-list {
    list-style: none !important; /* 점 제거 */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important; /* 가로 배치 */
    flex-wrap: wrap;
    gap: 30px; /* 탭 간 간격 */
}

.sub-tabs-list li {
    font-size: 16px;
    color: #888;
    padding-bottom: 15px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    transition: color 0.2s;
    list-style-type: none !important; /* 강제 점 제거 */
}

.sub-tabs-list li:hover {
    color: #333;
}

.sub-tabs-list li.active {
    color: #111 !important;
    font-weight: 700 !important;
}

/* 활성화된 탭 하단 바 (검은색) */
.sub-tabs-list li.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* border-bottom 위에 겹치게 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111;
}

/* =========================================
   3. 리스트 컨트롤 (개수, 정렬, 버튼)
   ========================================= */
.list-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px;
    width: 100%;
}

.list-controls .total-count {
    font-size: 14px;
    color: #333;
}

.list-controls .right-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 정렬 셀렉트 박스 (배경 없애고 깔끔하게) */
.list-controls select {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    outline: none;
    padding-right: 5px;
    text-align: right;
    appearance: none; /* 기본 화살표 제거 가능하면 제거 */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 14px;
    padding-right: 20px;
}

/* 작성하기 버튼 */
.postWriteBtn {
    background-color: #455BB7 !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    text-decoration: none;
}

.postWriteBtn:hover {
    background-color: #354aa0 !important;
}

/* =========================================
   4. 데이터 테이블 (1열 리스트 변환)
   ========================================= */
/* 기존 테이블 헤더 완전 숨김 */
#datatable.one-column-table thead {
    display: none !important;
}

/* 테이블 셀 스타일 초기화 및 카드화 */
#datatable.one-column-table tbody td {
    display: block !important;
    width: 100% !important;
    padding: 25px 0 !important;
    border-bottom: 1px solid #eee !important;
    background: none !important;
}

/* DataTables 기본 stripe 배경 제거 */
table.dataTable.display tbody tr.odd>.sorting_1, 
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: transparent !important;
}
table.dataTable tbody tr:hover {
    background-color: #fafafa !important; /* 호버 시 아주 연한 회색 */
}

/* =========================================
   5. 게시글 카드 (내부 디자인)
   ========================================= */
.post-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.post-card .post-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    margin-bottom: 2px;
}

.post-card .post-title:hover {
    text-decoration: underline;
}

/* 본문 미리보기 (2줄 말줄임) */
.post-card .post-preview {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em; /* 2줄 높이 제한 */
}

/* 메타 정보 (카테고리 | 좋아요 | 댓글 등) */
.post-card .post-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    flex-wrap: wrap; /* 모바일 대응 */
}

.post-card .category-badge {
    color: #455BB7; /* 포인트 컬러 */
    font-weight: 600;
}

/* 구분선 (|) */
.post-card .divider {
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #ddd;
    margin: 0 10px;
}

/* 하단 페이지네이션 컨트롤 숨김/조정 (필요시) */
.bottom-controls {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

















.form-group-row { display: flex; margin-bottom: 20px; align-items: center; }
.form-group-row.align-top { align-items: flex-start; }
.form-label { width: 80px; font-weight: bold; color: #333; font-size: 16px; flex-shrink: 0; }
.form-inputs { flex-grow: 1; width: 100%; }

.custom-select {
    height: 48px; border: 1px solid #ddd; border-radius: 4px; padding: 0 15px;
    font-size: 14px; min-width: 200px; outline: none; background: #fff;
}
.custom-input {
    width: 100%; height: 48px; border: 1px solid #ddd; border-radius: 4px; padding: 15px;
    font-size: 16px; outline: none;
}
.custom-input:focus, .custom-select:focus { border-color: #455BB7; }

.btn { padding: 0 30px; height: 48px; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; border: none; }
.btn-cancel { background: #ccc; color: #fff; }
.btn-submit { background: #455BB7; color: #fff; }
.btn-submit:hover { background: #354aa0; }














/* =========================================
   의사광장 하단 레이아웃 및 댓글 시스템
   ========================================= */


/* 좋아요 버튼 기본 스타일 */
.btn-custom-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-radius: 8px;
    color: #767676;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    line-height: 1;           /* 중요: 폰트의 상하 여백 제거 */
}
/* 아이콘 정렬 보정 */
.btn-custom-like .like-icon {
    display: flex;
    align-items: center;
    /* 만약 아이콘이 여전히 위로 치우쳐 보인다면 아래 주석 해제 후 조정 */
    /* transform: translateY(1px); */
}

/* 활성화 상태 (Main Color 변수 적용) */
.btn-custom-like.active {
    border-color: var(--main-color);
    color: var(--main-color);
    /* background-color: #f0f2ff;  */
}

/* 하트 애니메이션 및 색상 채우기 */
.btn-custom-like.active svg {
    animation: heart-pump 0.4s ease-out;
    fill: var(--main-color); /* 테두리뿐만 아니라 내부도 메인 컬러로 */
}

.btn-custom-like.active svg path {
    stroke: var(--main-color);
}

@keyframes heart-pump {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.btn-custom-like:active {
    transform: scale(0.95);
}









/* 댓글 입력창 메인 컨테이너 */
.main-comment-input-section {
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    margin-bottom: 40px;
}

#main-comment-editor {
    border: none;
    width: 100%;
    min-height: 80px;
    resize: none;
    font-size: 15px;
    outline: none;
}

.main-form-btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    border-top: 1px solid #F1F1F1;
    padding-top: 10px;
}

.main-comment-submit {
    background-color: #455BB7 !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 6px 20px;
    font-weight: 500;
    border: none;
}

/* 댓글 아이템 래퍼 (기본) */
.comment-item-wrapper {
    padding: 20px 0;
    border-bottom: 1px solid #F1F1F1;
    position: relative;
}

.comment-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.user-name {
    font-weight: 700;
    font-size: 15px;
    color: #333;
}

.author-badge {
    background: #F0F2FF;
    color: #455BB7;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

.comment-date {
    font-size: 13px;
    color: #999;
    margin-left: 10px;
}

.comment-body-content {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #444;
    word-break: break-all;
}

.reply-target {
    color: #455BB7;
    font-weight: 600;
    margin-right: 8px;
}

/* 하단 액션 버튼 */
.comment-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-toggle-replies {
    background: none;
    border: none;
    color: #455BB7;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}



/* [디자인 변경] 대댓글(답글) 영역 전체 회색 박스 */
.comment-replies-area {
    background-color: #F8F9FA; /* 연회색 배경 */
    border-radius: 8px;
    margin-top: 15px;
    padding: 0 20px; /* 내부 여백 */
}

/* 대댓글 개별 항목 (Flex 구조) */
.comment-item-wrapper.reply-level-2 {
    display: flex;
    align-items: flex-start; /* 상단 기준 정렬 */
    padding: 20px 0;
    gap: 10px; /* 화살표와 콘텐츠 사이 간격 */
}

.comment-item-wrapper.reply-level-2:last-child {
    border-bottom: none;
}

/* 2. 화살표 위치 미세 조정 (닉네임 텍스트 높이와 맞추기) */
.reply-arrow-box {
    flex-shrink: 0;
    padding-top: 2px; /* 닉네임 첫 줄과 높이를 맞추기 위해 추가 */
}

.reply-arrow-box svg {
    display: block;
}

/* 3. 콘텐츠 영역을 꽉 채우도록 설정 */
.reply-content-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 4. [중요] 답글쓰기, 수정, 삭제 버튼을 우측으로 정렬 */
.reply-content-container .comment-bottom-row {
    display: flex;
    justify-content: flex-end; /* 왼쪽에서 오른쪽 끝으로 이동 */
    align-items: center;
    margin-top: 10px;
}

/* 5. 버튼 사이의 간격 조정 */
.btn-action {
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    margin-left: 12px; /* 버튼들 사이의 간격 */
    cursor: pointer;
    padding: 0;
}


.btn-action:hover {
    color: #455BB7;
    text-decoration: underline;
}

/* 좋아요 버튼 */
.btn-comment-like {
    background: #FFF;
    border: 1px solid #EEE;
    border-radius: 15px;
    padding: 4px 12px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-comment-like.active {
    border-color: #FF4D4D;
    color: #FF4D4D;
}

/* 답글 입력창 섹션 */
.reply-input-section {
    background: #FFF;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.reply-textarea {
    width: 100%;
    border: none;
    min-height: 60px;
    resize: none;
    outline: none;
    font-size: 14px;
}

/* 삭제/수정 상태 */
.deleted-msg { color: #BBB; font-style: italic; }
.deleted-text { text-decoration: line-through; color: #CCC; }
.hide { display: none !important; }




/* [추가/수정] 화살표와 닉네임 수직 정렬 정교화 */
.reply-arrow-box {
    flex-shrink: 0;
    width: 20px; /* SVG 너비에 맞춤 */
    padding-top: 4px; /* 닉네임 텍스트의 첫 줄 중심선에 맞게 조정 */
}

/* [추가] 답글 내 유저 정보 행 정렬 */
.reply-content-container .comment-top-row {
    margin-bottom: 5px; /* 본문과의 간격 축소 */
    min-height: 24px; /* 닉네임 높이 확보 */
}

/* [추가] 수정 모드 시 버튼 우측 정렬 유지 */
.edit-btns-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* [추가] 답글 더보기 버튼 디자인 (스크린샷 스타일) */
.reply-more-btn-wrapper {
    border-top: 1px solid #EEE;
    margin: 0 -20px; /* 회색 박스 안쪽 여백 상쇄 */
    padding: 10px 20px;
}

.load-more-replies-btn {
    color: #666 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-decoration: none !important;
}


/* 수정 모드 시 나타나는 버튼 컨테이너 */
.edit-form-container {
    margin-top: 10px;
    display: block !important; /* 부모가 숨겨져도 보이도록 강제 */
}

.edit-action-row {
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    gap: 8px;
    margin-top: 10px;
}

/* 수정완료 버튼 스타일 */
.btn-edit-submit {
    background-color: #455BB7;
    color: #fff;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

/* 취소 버튼 스타일 */
.btn-edit-cancel {
    background-color: #eee;
    color: #666;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}






/* 삭제된 댓글 행 배경 및 텍스트 스타일 */
.deleted-row-bg {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
}

.deleted-msg-text {
    color: #aaa !important;
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* @대상 닉네임 스타일 */
.reply-target {
    color: #455BB7;
    font-weight: 600;
    margin-right: 5px;
    font-size: 14px;
}





.lastModifiedColor {
    color: #999;
    font-size: 11px;
    margin-left: 5px;
    font-weight: normal;
}


/* @비공개 전용 스타일 (lastModifiedColor와 동일) */
.reply-target.is-dimmed {
    color: #999 !important;
}




.comment-like-area {
    margin-left: auto;
}






.comment-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}



/* 댓글/답글 좋아요 버튼 기본 스타일 */
.btn-comment-like {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

/* 아이콘 위치 정렬 보정 */
.btn-comment-like .like-icon {
    display: flex;
    align-items: center;
}

/* 마우스 호버 시 */
.btn-comment-like:hover {
    color: var(--main-color);
}

/* 클릭하는 순간 버튼 전체가 살짝 눌리는 효과 */
.btn-comment-like:active {
    transform: scale(0.9);
}

/* 좋아요 활성화 상태 (Active) */
.btn-comment-like.active {
    color: var(--main-color);
}

/* 활성화 시 하트 애니메이션 및 내부 색상 채우기 */
.btn-comment-like.active .like-icon svg {
    animation: heart-pump 0.4s ease-out;
    fill: var(--main-color); /* 하트 내부 채우기 */
}

.btn-comment-like.active .like-icon svg path {
    stroke: var(--main-color); /* 하트 테두리 색상 */
}

/* 하트가 커졌다 작아지는 애니메이션 (게시글과 동일) */
@keyframes heart-pump {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}


.admin-badge {
    background-color: #fdeaea;
    color: #e74c3c;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: bold;
}