/* 헤더 스타일 */

    .main-header {

        background: var(--card-background);

        box-shadow: var(--shadow-sm);

        position: sticky;

        top: 0;

        z-index: 1000;

        border-bottom: 1px solid var(--border-color);

    }



    .header-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        height: 70px;

        padding: 0 1rem;

    }



/* 부모 요소와 이미지 모두에 outline 제거 */

.site-title {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    outline: none;

    text-decoration: none;

}



.site-title:focus, .site-logo:focus {

    outline: none;

    border: none;

}



/* 이미지 테두리와 포커스 완전 제거 */

.site-logo {

    width: 150px;

    height: auto;

    outline: none;

    border: none;

    box-shadow: none; /* 불필요한 그림자 제거 */

}





    .menu-toggle {

        display: none;

        background: none;

        border: none;

        cursor: pointer;

        padding: 10px;

        z-index: 1001;

    }



    .menu-icon {

        width: 24px;

        height: 2px;

        background-color: var(--text-primary);

        display: block;

        position: relative;

    }



    .menu-icon::before,

    .menu-icon::after {

        content: '';

        width: 24px;

        height: 2px;

        background-color: var(--text-primary);

        position: absolute;

        left: 0;

        transition: all 0.3s ease;

    }



    .menu-icon::before {

        top: -8px;

    }



    .menu-icon::after {

        top: 8px;

    }



    .menu-toggle.active .menu-icon {

        background-color: transparent;

    }



    .menu-toggle.active .menu-icon::before {

        transform: rotate(45deg);

        top: 0;

    }



    .menu-toggle.active .menu-icon::after {

        transform: rotate(-45deg);

        top: 0;

    }



    .main-nav {

        display: flex;

        align-items: center;

        gap: 1rem;

    }



    .nav-link {

        color: var(--text-primary);

        text-decoration: none;

        padding: 0.5rem 1rem;

        border-radius: 6px;

        transition: all 0.2s ease;

    }



    .nav-link:hover,

    .nav-link.active {

        background: var(--accent-color);

        color: white;

    }



    /* 카테고리 네비게이션 */

    .category-nav {

        background: var(--card-background);

        padding: 1rem 0;

        border-bottom: 1px solid var(--border-color);

    }



    .category-nav .container {

        display: flex;

        gap: 1rem;

        overflow-x: auto;

        padding: 0 1rem;

    }



    .category-link {

        color: var(--text-primary);

        text-decoration: none;

        padding: 0.5rem 1rem;

        border-radius: 6px;

        white-space: nowrap;

        transition: all 0.2s ease;

    }



    .category-link:hover,

    .category-link.active {

        background: var(--accent-color);

        color: white;

    }



    /* 반응형 */

    @media (max-width: 768px) {

        .header-content {

            padding: 0 0.5rem;

        }

        

        .site-title {

            font-size: 1.2rem;

        }

        

        .main-nav {

            display: none;

            flex-direction: column;

            position: absolute;

            top: 70px;

            left: 0;

            width: 100%;

            background-color: var(--card-background);

            box-shadow: var(--shadow-sm);

            z-index: 1001;

            padding: 1rem;

        }



        .main-nav.active {

            display: flex;

        }



        .menu-toggle {

            display: block;

        }



        .category-nav .container {

            padding: 0 0.5rem;

        }

    }