/* 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;
}

.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;
}


















/* =========================================
   Doctor Community Dashboard Styling (최종 통합본)
   ========================================= */

/* 0. 대시보드 전체 래퍼 */
.dashboard-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/* 1. 인증 유도 섹션 (비인증 유저 전용) */
.auth-promotion-section {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 40px;
}
.auth-promo-box .icon-lock {
    font-size: 40px;
    color: #455BB7;
    margin-bottom: 20px;
}
.auth-promo-box h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}
.auth-promo-box .main-desc {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}
.btn-auth-link {
    display: inline-block;
    background-color: #455BB7;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

/* 2. 유저 헤더 섹션 (프로필 + 검색/배너) */
.user-header-section {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
}

/* 프로필 카드 */
.profile-card {
    width: calc((100% - 24px) / 2);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}
.profile-card hr {
    height: 1px;
    border: none;
    background-color: #D9D9D9;
    margin: 24px 0;
}

.user-info-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.user-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.user-details .name {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 4px;
}
.user-details .job-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #666;
}

/* 인증 배지 */
.cert-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}
.cert-badge.success { background-color: #28a745; }
.cert-badge.fail { background-color: #6c757d; }

/* 프로필 하단 통계 */
.user-stats-grid { margin: 0; }
.stat-row { }
.stat-item { display: flex; justify-content: space-between; align-items: center; }
.stat-item .label { color: #555; font-size: 0.95rem; }
.stat-item .val { font-weight: bold; color: #333; }

.btn-dashboard-write {
    display: block;
    width: 100%;
    text-align: center;
    background: #4a5fb4;
    color: #fff;
    padding: 12px 0;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
}

/* 우측 검색/배너 영역 */
.header-right-area { width: calc((100% - 24px) / 2); }
.header-search-box { width: 320px; position: relative; margin-bottom: 20px; }
.dashboard-wrapper .header-search-box { width: 100%;}
.header-search-box input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 1rem;
}
.header-search-box button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #888;
}
.home-banner-area img { width: 100%; border-radius: 12px; }

/* 3. 대시보드 메인 콘텐츠 */
/* 섹션 간의 넓은 간격 (image_c075c0 참고) */
.dashboard-contents {
    display: flex;
    flex-direction: column;
    gap: 40px; /* 섹션과 섹션 사이의 거리 */
}

/* 타이틀과 박스를 묶어주는 부모 */
.dashboard-section-wrapper {
    display: flex;
    flex-direction: column;
}

/* 타이틀과 바로 아래 박스 사이의 좁은 간격 (image_bf9c86 참고) */
.briefing-header-outer {
    margin-bottom: 12px; /* 타이틀과 박스 사이의 실제 간격 */
}

/* 2열 구조 내부 컬럼 간격 */
.dash-row-2col {
    display: flex;
    gap: 24px;
}
.dash-column {
    flex: 1;
}

/* 섹션 공통 스타일 */
/* 박스 디자인 유지 */
.dash-section {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}



/* 섹션 헤더 (일반) */
.sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}
.sec-header h3 { font-size: 16px; font-weight: 700; color: #333; }
.more-link { font-size: 12px; color: #999; text-decoration: none; }

/* 탭 메뉴 */
.dash-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.dash-tabs button {
    background: none;
    border: none;
    font-size: 13px;
    color: #888;
    cursor: pointer;
}
.dash-tabs button.active {
    color: #455BB7;
    font-weight: 700;
    position: relative;
}
.dash-tabs button.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #455BB7;
    position: absolute;
    bottom: -11px;
    left: 0;
}

/* =========================================
   주간 브리핑 전용 디자인 (박스 외부 헤더 구조)
   ========================================= */

/* 박스 바깥 상단 헤더 */
.briefing-header-outer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}
.briefing-header-outer h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 브리핑 카드 섹션 전용 패딩 */
.briefing-section-card {
    padding: 0 30px !important; /* 내부 패딩 넓게 (스크린샷 스타일) */
    border: 1px solid #e1e4e8;
}

/* 리스트 및 아이템 디자인 (기존 클래스명 활용) */
.briefing-list-new { list-style: none; padding: 0; margin: 0; }

/* =========================================
   주간 브리핑 아이템 호버 효과 추가
   ========================================= */
.dash-list li:hover {
    background: #f7f8fb !important;
}
.briefing-card-item {
    padding: 35px 30px !important; /* 좌우 여백을 주어 배경색이 꽉 차게 조절 */
    margin: 0 -30px; /* 섹션 패딩 상쇄를 위해 마이너스 마진 사용 */
    border-bottom: 1px solid #f2f4f7;
    transition: background-color 0.2s ease; /* 부드러운 전환 효과 */
}

.briefing-card-item:hover {
    background-color: #f7f8fb !important; /* 요청하신 배경색 적용 */
}

.briefing-card-item:last-child {
    border-bottom: none;
}

/* 호버 시 제목 색상도 살짝 변경하면 더 직관적입니다 */
.briefing-card-item:hover .item-title {
    color: #455BB7 !important;
}

/* 링크 영역이 아이템 전체를 감싸도록 설정 */
.briefing-card-item a.item-link {
    text-decoration: none;
    display: block;
    width: 100%;
}

.item-title {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.3;
}
.item-summary {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 메타 정보 */
.item-meta { display: flex; justify-content: space-between; font-size: 13px; color: #999; }
.meta-left { display: flex; align-items: center; }
.meta-left .cate-blue { color: #455BB7; font-weight: 600; }
.item-meta .sep { margin: 0 12px; color: #eee; }
.meta-right { display: flex; align-items: center; }
.meta-right .user-nick { color: #666; font-weight: 500; }

/* =========================================
   기타 리스트 및 그리드 스타일
   ========================================= */

.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list li { padding: 8px 0; border-bottom: 1px solid #f9f9f9; }
.dash-list li:last-child { border-bottom: none; }
.dash-list li a { text-decoration: none; color: inherit; }

/* 3열 카드형 그리드 */
.grid-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px 0;
}
.grid-list .grid-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.grid-list .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}
.grid-list .preview-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}
.grid-list .badge-cate {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 600;
}
.grid-list .badge-cate.type-latest { background-color: #e3f2fd; color: #1e88e5; }
.grid-list .badge-cate.type-qna { background-color: #f3e5f5; color: #8e24aa; }

.grid-list .meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
}

/* 블러 처리 */
.locked-blur {
    filter: blur(5px);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}



/* 반응형 */
@media (max-width: 768px) {
    .user-header-section { flex-direction: column; }
    .profile-card, .header-right-area { width: 100%; }
    .grid-list { grid-template-columns: 1fr; }
    .dash-row-2col { flex-direction: column; }
}