/* main_Layout.css */

/* --- 탭 네비게이션 스타일 --- */

/* [수정] _Layout.cshtml 변경에 따라 선택자를 'bg-gray-100'에서 'bg-white'로 변경 */
header > nav.bg-white .flex a {
    /* 요청 1: 글씨 크기를 1.2rem으로 설정합니다.
      이 스타일이 _Layout.cshtml의 'text-sm' 클래스보다 우선 적용됩니다.
    */
    font-size: 1.15rem;

    /* 글꼴 크기에 맞게 줄 높이를 조정합니다.
    */
    line-height: 1.5;

    /* 탭의 활성 상태를 부드럽게 전환하기 위해 transition을 추가합니다.
    */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

    /* [요청] 탭 가로 넓이 1.2배 증가 */
    /* _Layout.cshtml의 'px-3' (0.75rem)을 덮어쓰고 1.2배인 0.9rem으로 설정합니다. */
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* [수정] 요청: 'active-tab' 클래스가 적용되었을 때의 스타일을 '옅은 녹색'으로 변경합니다.
*/
header > nav.bg-white .flex a.active-tab {
    background-color: #D1FAE5; /* 옅은 녹색 (Tailwind's green-100) */
    color: #065F46; /* 짙은 녹색 텍스트 (가독성을 위함 - green-800) */
    font-weight: 700; /* 활성 탭 굵게 표시 */
}

/* [수정] 선택자를 'bg-white'로 변경합니다.
  활성화되지 않은 탭에 마우스를 올렸을 때의 스타일입니다.
*/
header > nav.bg-white .flex a:not(.active-tab):hover {
    background-color: #F3F4F6; /* 옅은 회색 배경 (Tailwind's gray-100) */
    color: #0284C7; /* 기존 hover:text-sky-600 색상 유지 */
}


/* '행보기향' 로고 텍스트의 굵기와 색상 */
#logo-btn span {
    font-weight: 700; /* 기존 font-bold (700)에서 400(보통 굵기)으로 변경 */
    color: blue;  /* 글씨 색상을 darkgray로 변경 */
    font-size: 1.2rem; 
    margin-left: 0.2rem; 
}

/* 게시글 카드 스타일 */
.post-card {
    transition: transform 0.2s, box-shadow 0.2s;
    /* 기본 그림자 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.post-card:hover {
    transform: translateY(-2px);
    /* 호버 시 그림자 강조 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 태그 스타일 */
.post-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px; /* Tailwind 'rounded-full' */
    font-size: 0.75rem; /* Tailwind 'text-xs' */
    line-height: 1;
    font-weight: 600;
}

/* PC/모바일 파이차트 한 줄 표시 */
.pie-chart-section {
    display: flex;
    flex-direction: row; /* PC에서는 가로로 정렬 */
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.pie-chart-item {
    flex: 1 1 30%; /* 각 아이템이 대략 30%의 너비를 차지하도록 설정 */
    min-width: 250px; /* 너무 작아지지 않도록 최소 너비 설정 */
    margin: 0 0.5rem;
}

/* 모바일에서는 세로로 정렬 */
@media (max-width: 768px) {
    .pie-chart-section {
        flex-direction: column;
        align-items: center;
    }
    .pie-chart-item {
        flex: 1 1 100%;
        min-width: 100%;
        margin: 0.5rem 0;
    }
}