/* =========================
   SIDEBAR LAYOUT & BASE
   ========================= */

.sidebar {
    width: 28%; /* 너비 조정으로 본문과 밀착 */
    padding-left: 15px; 
}

/* 위젯 제목 스타일 */
.sidebar h2, 
.sidebar h3,
.sidebar .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f5f9;
    position: relative;
}

.sidebar h2::after, 
.sidebar h3::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #1a73e8;
}


/* =========================
   SIDEBAR WIDGET BOX (여백 최적화)
   ========================= *
/* 위젯 박스 */
.sidebar .widget {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
/* 🔥 안쪽 여백 조절 (상 하 좌 우) */
    padding: 15px 15px 15px 20px  !important; /* 위아래 15px, 좌우 18px로 슬림하게 조정 */
    margin-bottom: 15px;            /* 박스들 사이의 바깥 간격 */
    transition: all 0.2s ease;
}

.sidebar .widget:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}


/* 위젯 제목과 내부 리스트 사이의 간격도 좁히고 싶다면? */
.sidebar .widget-title, 
.sidebar h2, 
.sidebar h3 {
    margin-top: 0 !important;      /* 제목 위 여백 제거 */
    margin-bottom: 12px !important; /* 제목 아래 리스트와의 간격 축소 */
    padding-bottom: 8px !important;
    font-size: 17px !important;     /* 제목 크기도 살짝 조절 가능 */
}

















/* =========================
   SIDEBAR LIST (정리됨)
   ========================= */

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 0px 0;  /* 링크들간의 간격 */
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.sidebar li:last-child {
    border-bottom: none;
}

.sidebar li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #475569;
    font-size: 14.5px;
    font-weight: 500;
}

.sidebar li a::before {
    content: "•";
    margin-right: 8px;
    color: #cbd5e1;
    font-size: 18px;
}

.sidebar li:hover {
    padding-left: 5px;
}

.sidebar li:hover a {
    color: #1a73e8;
}








/* =========================
   SEARCH BOX (Google Style)
   ========================= */

.widget_search {
    border: none !important;
    background: none !important;
    padding: 0 !important;
	    margin-top: -90px !important;
    margin-bottom: 5px !important;
}

.widget_search h2, .widget_search h3, .widget_search label {
    display: none !important;
}

.widget_search form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    padding: 0 14px;
    height: 48px;
    transition: all 0.2s ease;
}

.widget_search form:hover,
.widget_search form:focus-within {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: transparent;
}

/* 🔥 검색 버튼 색상 수정 (회색 텍스트) */
.widget_search form button,
.widget_search form input[type="submit"] {
    background: transparent !important;
    border: none !important;
    color: #70757a !important; /* 구글 서치 특유의 회색 텍스트 */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s ease;
}

/* 버튼 호버 시 약간 더 진하게 (선택사항) */
.widget_search form button:hover,
.widget_search form input[type="submit"]:hover {
    color: #202124 !important; 
}

/* 모바일 대응 */
@media (max-width: 991px) {
    .sidebar {
        width: 100% !important;
        padding-left: 0 !important;
        margin-top: 40px;
    }





/* ==================================================
   SIDEBAR WIDGET (강제 통합 및 박스 합치기)
   ================================================== */

/* 1. 사이드바 내의 모든 개별 박스 초기화 */
.widget-area .widget, 
.sidebar .widget, 
#right-sidebar .widget {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 16px !important;
    padding: 0 !important; /* 내부 여백을 일단 0으로 */
    margin-bottom: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important; /* 자식 요소가 튀어나가지 않게 */
}

/* 2. 위젯 제목 (박스 상단에 밀착) */
.widget-title {
    background: #f8faff !important; /* 제목 배경색 살짝 다르게 */
    margin: 0 !important;
    padding: 18px 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    border: none !important;
    border-bottom: 2px solid #1a73e8 !important; /* 제목 하단 포인트 */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. 위젯 내용/리스트 영역 (제목 바로 아래 밀착) */
.widget > ul, 
.widget > div, 
.widget-content {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 15px 20px 20px !important; /* 리스트 내부 여백 */
    box-shadow: none !important;
}

/* 4. 자동 생성된 리스트 아이템 스타일 */
.widget ul li {
    list-style: none !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 0 !important;
}

.widget ul li:last-child {
    border-bottom: none !important;
}

/* 링크 색상 */
.widget ul li a {
    color: #4a5568 !important;
    text-decoration: none !important;
    display: block !important;
}

.widget ul li a:hover {
    color: #1a73e8 !important;
}




/* ==================================================
   MOBILE SIDEBAR (이미지, 최신글, 검색창만 살림)
   ================================================== */
@media screen and (max-width: 768px) {
    /* [Step 1] 모든 위젯을 일단 숨김 */
    .sidebar .widget, 
    #secondary .widget, 
    .widget-area .widget {
        display: none !important;
    }

    /* [Step 2] 이미지 위젯 살림 */
    .sidebar .widget_media_image, 
    .sidebar .widget:has(img) {
        display: block !important;
        order: 1 !important;
        margin-bottom: 25px !important;
    }

    /* [Step 3] 최신 글(Recent Repair Guides) 살림 */
    .sidebar .widget_recent_entries, 
    .sidebar [id*="recent-posts"],
    .sidebar .widget_recent_posts {
        display: block !important;
        order: 2 !important; 
        border: 1px solid #eef2f6 !important;
        padding: 20px !important;
        background: #fff !important;
        margin-bottom: 30px !important;
    }

    /* [Step 4] 핵심: 검색창 차단 해제 🔥 */
    /* 기존의 display: none !important; 를 지우고 아래처럼 수정하세요 */
    .sidebar .widget_search {
        display: block !important; /* 다시 보이게 함 */
        /* 위치는 content.css의 order: -1 에 의해 본문 위로 올라갑니다 */
    }
}