/* ---------------------------------- */
/* 0. 기본 스타일 */
/* ---------------------------------- */
body {
    font-family: "Noto Sans KR", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: #fafafa;
}

header, main, footer {
    max-width: 800px;
    margin: auto;
    padding: 10px;
    background: #fff;
}

/* 🌟🌟🌟 수정된 부분 1: 기존 h1 a 스타일 유지 (이제 콘텐츠 제목에만 적용) 🌟🌟🌟 */
/* 이 부분은 view.php에서 h2가 h1으로 승격되었기 때문에 글 제목의 링크 스타일에 영향을 줍니다. */
h1 a {
    text-decoration: none;
    color: #222;
}
/* ---------------------------------- */

article {
    border-bottom: 1px solid #ddd;
    padding: 0px 0;
    margin-top: 0px;
}

article h2 {
    margin-top: 0;
    margin-bottom: 1px;
}

/* index.php 글 목록의 제목 링크 밑줄 제거 */
article h3 a {
    text-decoration: none; /* 밑줄 제거 */
    color: #222; /* 제목 색상 유지 (선택 사항, 기존 h1 a와 통일) */
}

/* 마우스 오버 시 밑줄이 생기게 하려면 (선택 사항) */
article h3 a:hover {
    text-decoration: underline; 
}


img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
}

.content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
        padding: 0 5px; /* 외부 여백 최소화 */

    }
    
    /* 🌟 내부 여백도 줄여서 본문을 넓게 사용 🌟 */
    header, main, footer {
        padding: 5px; /* 내부 패딩을 20px에서 10px로 축소 */
    }
    
}

/* 1. .content 스타일 수정 */
.content {
    /* white-space: pre-line; 제거!
        CKEditor가 만든 HTML을 그대로 사용하므로 이 속성은 불필요하며 충돌을 일으킵니다. */
    margin-top: 15px;
    font-size: 16px;
    /* line-height를 명시적으로 지정하여 행간을 제어합니다. */
    line-height: 1.6; 
}

/* 2. .content 내부의 <p> 태그 스타일 추가 (가장 중요한 부분) */
.content p {
    /* 문단 위/아래 여백을 적절한 값(예: 0.8em)으로 재설정하여 간격을 좁힙니다. 
        margin: 0; 으로 설정하면 문단 간 여백이 사라집니다. */
    margin: 0.8em 0; 
    
    /* 혹시 모를 충돌을 막기 위해 line-height를 부모와 동일하게 재설정합니다. */
    line-height: inherit; 
}

/* 3. 빈 문단으로 인해 생기는 공간을 최소화 (선택 사항) */
.content p:empty {
    /* 내용이 없는 <p> 태그는 높이를 최소화합니다. */
    min-height: 0.5em; 
}

/*
    * 표(Table) 스타일 추가
    * CKEditor로 작성된 표의 테두리를 명확하게 표시합니다.
    */

/* 1. 표(table) 자체의 스타일 */
.content table {
    width: 100%; /* 표가 내용 영역을 가득 채우도록 */
    border-collapse: collapse; /* 셀 경계선을 하나로 합쳐서 이중선 방지 */
    margin: 20px 0; /* 표 위아래 여백 */
}

/* 2. 셀(td, th)의 스타일 */
.content th,
.content td {
    border: 1px solid #ccc; /* 옅은 회색으로 테두리 추가 (굵기: 1px) */
    padding: 8px 12px; /* 셀 내부 여백 */
    text-align: left; /* 텍스트 왼쪽 정렬 (필요에 따라 center로 변경 가능) */
}

/* 3. 헤더 셀(th)에 배경색을 추가하여 구분 */
.content th {
    background-color: #f7f7f7; /* 약간의 배경색으로 헤더 강조 */
    font-weight: bold;
}

/* 카테고리 드롭다운 메뉴 배경색 변경 */
.category-nav {
    /* 배경색을 흰색으로 설정 */
    background-color: #fff; 
    /* 드롭다운 영역의 테두리를 추가하여 시각적으로 분리 (선택 사항) */
    border: 1px solid #ddd;
    /* 테두리 안쪽 여백 추가 */
    padding: 10px;
    /* 드롭다운이 페이지의 너비를 완전히 차지하도록 설정 */
    width: 100%;
    /* 필요에 따라 z-index를 높여 다른 요소 위에 표시되게 합니다. */
    z-index: 100;
    /* 상자 그림자 추가 (선택 사항) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 카테고리 링크 스타일 (선택 사항: 마우스 오버 시 효과 추가) */
.category-nav a {
    /* 블록 요소로 만들어 클릭 영역을 넓게 만듭니다. */
    padding: 5px 10px;
    /* 마우스 오버 시 배경색을 약간 회색으로 변경 */
}

.category-nav a:hover {
    background-color: #f0f0f0;
    /* 활성 링크의 폰트 색상을 유지합니다. */
    color: inherit !important; 
}

/* ---------------------------------- */
/* Header Layout & Navigation Styles */
/* ---------------------------------- */

/* 블로그 제목과 버튼들을 한 줄에 배치하고 양 끝으로 분산시키는 Flex 컨테이너 */
.header-top-row {
    display: flex;
    justify-content: space-between; /* 좌우 끝으로 배치 */
    align-items: center; /* 수직 중앙 정렬 */
}

/* 🌟🌟🌟 수정된 부분 2: .header-top-row 내부의 h1 태그 제거 후, .logo 내의 span 태그를 타겟 🌟🌟🌟 */
/* .logo 컨테이너에 flex 레이아웃에 맞게 마진/패딩 제거 */
.header-top-row .logo {
    margin: 0; 
    padding: 0;
    line-height: 1; /* 높이 조정 */
}

/* '전체 메뉴' 버튼과 기타 버튼들을 묶는 컨테이너 스타일 */
.header-actions {
    display: flex;
    gap: 10px; /* 버튼 간 간격 */
    align-items: center;
}

/* 🌟🌟🌟 수정된 부분 3: 블로그 제목 텍스트와 링크 스타일을 모두 .header-title에 적용 🌟🌟🌟 */
.header-title {
    font-size: 2em; /* <h1>에 준하는 크기 */
    font-weight: 700;
    line-height: 1.2;
}

/* 🌟🌟🌟 수정된 부분 4: header-title 내부의 링크 (<a>) 스타일 강제 적용 🌟🌟🌟 */
.header-title a {
    text-decoration: none; /* 밑줄 제거 */
    color: #222;          /* 항상 검은색 (기존 h1 a 스타일 상속) */
}

/* '전체 메뉴' 버튼 기본 스타일 */
#menu-toggle {
    padding: 7px 13px; 
    cursor: pointer; 
    background-color: #fff; 
    border: 1px solid #ccc;
    border-radius: 2px; 
    color: #000;
}

/* '글쓰기' 및 '글 수정' 버튼 기본 스타일 (<a> 태그) */
.write-btn, .edit-btn {
    text-decoration: none; 
    padding: 7px 13px; 
    border-radius: 2px; 
    font-weight: bold;
    display: inline-block; /* a 태그를 버튼처럼 보이게 */
}

/* '글쓰기' 버튼 색상 */
.write-btn {
    border: 1px solid #007bff; 
    background-color: #007bff; 
    color: white; 
}

/* '글 수정' 버튼 색상 */
.edit-btn {
    border: 1px solid #f90; 
    background-color: #f90; 
    color: white; 
}


/* ---------------------------------- */
/* Search Form Styles */
/* ---------------------------------- */
.search-container { 
    margin-top: 15px; 
    margin-bottom: 15px; 
}
.search-form { 
    display: flex; 
}
.search-form input[type="search"] { 
    flex-grow: 1; 
    padding: 7px 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px 0 0 4px; 
    box-sizing: border-box;
}
.search-form button { 
    padding: 7px 10px; 
    background-color: #333; 
    color: white; 
    border: none; 
    border-radius: 0 4px 4px 0; 
    cursor: pointer;
}

    /* 검색 결과 피드백 스타일 */
    .search-feedback { 
        margin: 10px 0; 
        padding: 10px; 
        background-color: #f0f0f0; 
        border-left: 5px solid #007bff; 
        font-size: 0.95em;
    }
/* ---------------------------------- */
/* Category Dropdown Styles */
/* ---------------------------------- */
.category-nav a {
    text-decoration: none; 
    color: #333; 
    display: block; 
    padding: 5px 10px;
}

.category-nav a.active {
    font-weight: bold; 
    color: #007bff; 
}