body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    text-align: center;
}

.header {
    background-color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 30px;
}

.menu {
    display: flex;
    gap: 15px;
    align-items: center;
}

.menu img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.user-menu-btn img{
    border-radius: 50%;
}

/* 🔹 검색창 오버레이 (초기에 숨김) */
#search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬 */
}

/* 🔹 검색창 활성화 시 표시 */
#search-overlay.active {
    display: flex;
}

/* 🔹 검색창 박스 */
.search-box {
    background: white;
    width: 100%;
    max-width: 400px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 400px) {
    .search-box {
        max-width: 315px;
    }
}

/* 🔹 검색창 헤더 (로고 & 닫기 버튼) */
.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 🔹 검색창 로고 */
.search-logo {
    width: 120px;
}

/* 🔹 닫기 버튼 */
#close-search {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* 🔹 검색 입력 필드 컨테이너 */
.search-input-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    background: #f9f9f9;
}

/* 🔹 검색 입력 필드 */
#search-input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    font-size: 16px;
    outline: none;
    background: transparent;
}

/* 🔹 검색 아이콘 */
.search-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.contact-button {
    border: none;

    border-radius: 5px;
    cursor: pointer;
}

.nav-bar {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.menu-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    font-weight: 900;
    display: inline;

}

.nav-links a {
    text-decoration: none;
    color: #A4A4A4;
    font-size: 13px;
}

@media (max-width: 400px) {
    .nav-links a {
        font-size: 10px;
    }
}

.banner-swiper-container {
    width: 100%;
    max-width: 350px; /* 모바일에서 딱 맞게 */
    height: 160px; /* 기존보다 조금 더 큰 높이 설정 */
    margin: 0 auto;
    overflow: hidden; /* Swiper가 넘어가지 않도록 */
    position: relative;
}

@media (max-width: 400px) {
    .banner-swiper-container {
        max-width: 300px; /* 모바일에서 딱 맞게 */
    }
}

.banner-swiper {
    width: 100%;
    height: 160px; /* 높이를 고정 */
}

.banner-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 160px; /* Swiper 크기와 동일하게 */
}


.banner-swiper .swiper-slide img {
    width: 100%;
    height: 100%; /* Swiper 높이와 맞추기 */
    object-fit: cover; /* 이미지 비율 유지하며 꽉 차게 */
    display: block;
}


.banner-swiper {
    width: 100%;
}

.banner-swiper .swiper-slide img {
    border-radius: 10px;
    width: 100%;
    max-width: 350px;
    height: 150px;
    display: block;
}

@media (max-width: 400px) {
    .banner-swiper .swiper-slide img {
        max-width: 300px; /* 모바일에서 딱 맞게 */
        height: 150px;
    }
}

.swiper-pagination {
    position: absolute !important;
    bottom: 15px !important; /* 캡처 이미지의 빨간색 부분에 맞게 이동 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}


/* 메뉴 바 스타일 수정 */
.menu-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding: 10px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff; /* 연한 배경색 추가 */
    padding: 15px;
    border-radius: 15px;
    width: 80px;
    height: 40px;
    text-align: center;
    box-shadow: none;
}

@media (max-width: 400px) {
    .menu-item {
        padding: 17px;
        width: 55px;
    }
}

@media (max-width: 350px) {
    .menu-item {
        padding: 11px;
        width: 55px;
    }
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 75px; /* 이미지 공간을 늘려서 꽉 차도록 조정 */
}

.menu-icon img {
    width: 130px; /* 이미지 크기 증가 */
    height: 65px;
}
@media (max-width: 400px) {
    .menu-icon img {
        width: 100px; /* 이미지 크기 증가 */
        height: 65px;
    }
}
@media (max-width: 350px) {
    .menu-icon img {
        width: 90px;
        height: 65px;
    }
}

.menu-item p {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-top: 5px; /* 텍스트가 이미지와 겹치지 않도록 조정 */
}

@media (max-width: 400px) {
    .menu-item p {
        font-size: 10px;
    }
}

.menu-item:hover {
    cursor: pointer;
}

.additional-section {
    margin: 0 20px 20px 20px;
    padding: 0 15px 15px 15px;
    background: white;
    border-radius: 10px;
}

.consult-options {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    gap: 10px; /* 기존보다 여백 추가 */
}

.consult-box{
    cursor: pointer;
}

.consult-box img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.phone-ad img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 10px;
}

.info-links {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    gap: 15px; /* 기존보다 넓은 간격 추가 */
}

.info-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 카테고리 아이콘 스타일 수정 */
.category-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #e7f8f2;
    padding: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 14%; /* 6개 아이콘이 한 줄에 맞도록 설정 */
}

.category-item .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
}

.category-item img {
    width: 28px;
    height: 28px;
}

.category-item span {
    display: block;
    font-size: 11px;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-top: 3px;
}

@media (max-width: 400px) {
    .category-item span {
        font-size: 9px;
    }
}


/* 실시간 활동 중인 변호사 스타일 수정 */
.lawyer-swiper-container {
    margin: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    position: relative;
}

.lawyer-swiper-container h3 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.lawyer-swiper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}

.lawyer-card {
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 20px;
    text-align: left;
    width: 100%;
    height: 250px;
    position: relative;
}

.lawyer-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.lawyer-photo-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 15px;
}

.lawyer-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.lawyer-status {
    width: 10px;
    height: 10px;
    background: #36d399;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: 2px solid white;
}

.lawyer-info {
    flex: 1;
    text-align: left;
}

.lawyer-name {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.lawyer-office {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.lawyer-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.tag {
    display: inline-block;
    background: #ffffff;
    color: #00695c;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 15px;
}

.lawyer-desc {
    font-size: 12px;
    color: #555;
    width: calc(100% - 20px);
    height: 50px;
    text-align: left;
    border-radius: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.consult-btn {
    display: block;
    width: calc(100% - 30px);
    padding: 15px;
    background-color: white;
    color: #00695c;
    border: 2px solid #00695c;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.swiper-pagination {
    position: absolute !important;
    bottom: 5px !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

@media (max-width: 400px) {
    .swiper-pagination {
        bottom: 20px !important;
    }
}

/* 실시간 베스트 댓글 스타일 */
.best-comments-section {
    padding: 15px;
    background: #f9f9f9;
}

/* 상단 타이틀 + 새로고침 버튼 */
.best-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.best-comments-header h3 {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.refresh-btn {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #009688;
    background: none;
    border: none;
    cursor: pointer;
}

.refresh-btn img {
    width: 75px;
    height: 22px;
    margin-left: 5px;
}

/* 댓글 영역 */
.comment {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    justify-content: space-between;
}

/* 프로필 이미지 */
.profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

/* 댓글 내용 */
.comment-content {
    flex: 1;
    text-align: left;
}

/* 유저 이름 + 시간 라인 */
.comment-header {
    display: flex;
    align-items: center;
    gap: 8px; /* 이름과 시간 사이 여백 */
}

/* "1분 전" 시간 태그 */
.comment-time {
    font-size: 12px;
    color: #999;
    background: #ffffff;
    padding: 2px 5px;
    border-radius: 5px;
}

/* 좋아요 아이콘 및 숫자 */
.like-section {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
    position: relative;
    top: -5px; /* 좋아요 아이콘을 위로 이동 */
}

.like-section img {
    width: 16px;
    height: 16px;
}

/* 상담 사례 베스트 글 스타일 */
.best-cases-section {
    margin: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
}

/* 상단 타이틀 + 새로고침 버튼 */
.best-cases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.best-cases-header h3 {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.refresh-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.refresh-btn img {
    width: 75px;
    height: 22px;
}

/* 상담 사례 글 스타일 */
.case {
    background: #ffffff;
    border-bottom: solid 0.1rem #999;
    padding: 15px;
    margin-bottom: 10px;
}

.case-content {
    display: flex;
    flex-direction: column;
}

.case-title {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.case-desc {
    text-align: left;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* 태그, 좋아요, 댓글, 프로필 정렬 */
.case-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-tag {
    font-size: 12px;
    color: white;
    background: #009688;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
}

.like-comment {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
}

.like-comment img {
    width: 16px;
    height: 16px;
}

/* 프로필 이미지 스타일 */
.profile-pic-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}


/* 커뮤니티 베스트 글 전체 스타일 */
.best-community-section {
    margin: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
}

/* 헤더 스타일 (제목 + 새로고침 버튼) */
.best-community-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.best-community-header h3 {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.refresh-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.refresh-btn img {
    width: 75px;
    height: 22px;
}

/* 각 게시글 스타일 */
.community-post {
    background: #ffffff;
    padding: 12px;
    border-bottom: solid 0.1rem #999;
    margin-bottom: 10px;
    text-align: left;
}

/* 게시글 제목 */
.post-header strong {
    font-size: 15px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

/* 게시글 내용 */
.community-post p {
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
}

/* 태그 & 아이콘이 포함된 하단 스타일 */
.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 카테고리 태그 */
.category-tag {
    font-size: 12px;
    color: #00695c;
    font-weight: bold;
    display: inline-block;
    padding: 3px 8px;
    background: #e7f8f2;
    border-radius: 5px;
    margin-right: 145px;
}

@media (max-width: 400px) {
    .category-tag {
        margin-right: 100px;
    }
}

/* 좋아요, 댓글 아이콘 */
.post-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666;
}

.icon {
    width: 16px;
    height: 16px;
}


/* 푸터 스타일 */
.footer {
    background: #f5f5f5;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: #777;
    border-top: 1px solid #ddd;
}

.footer p {
    margin: 5px 0;
}

.footer-links {
    border-top: solid 0.1rem lightgrey;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 11px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* 고객 문의 버튼 스타일 */
.customer-inquiry {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #008c72; /* 기존 색보다 더 진한 톤 */
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 10px;
    text-align: center;
    width: 90%;
    max-width: 320px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 아이콘과 글자 간격 */
    z-index: 1000;
}

@media (max-width: 400px) {
    .customer-inquiry {
        max-width: 265px;
    }
}

/* 고객 문의 아이콘 스타일 */
.customer-inquiry img {
    width: 22px;
    height: 22px;
}

/* 고객 문의 버튼과 푸터 사이 간격 추가 */
.footer {
    padding-bottom: 80px; /* 고객 문의 버튼과의 여백 확보 */
}

/* 레이어 팝업 스타일 */
.my-page-layer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.my-page-layer.active {
    right: 0;
}

.my-info {
    background: #008c72;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.my-info .user-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
}

.my-info .user-name {
    flex: 1;
    font-size: 15px;
    color: #fff;
}

.my-info .close-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.my-info .close-btn .close-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.my-info .close-btn:hover {
    background: rgba(255,255,255,0.1);
}

.my-page-layer .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
    gap: 10px;
    background: #008c72;
}

.my-page-layer .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
    padding: 0;
}

.my-page-layer .menu-item img {
    width: 50px;
    height: 50px;
    padding: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.my-page-layer .menu-item span {
    font-size: 13px;
    color: #fff;
}

.my-page-info {
    padding: 20px;
    background: #f8f9fa;
}

.info-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.info-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-stats .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.stat-label {
    color: #666;
}

.stat-value {
    color: #3b4890;
    font-weight: 500;
}

.menu-actions {
    padding: 10px 0;
}

.menu-action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    border: none;
    background: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.menu-action:active {
    background: #f8f9fa;
}

.menu-action img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}