    <style>
        /* 기본 스타일 초기화 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Noto Sans KR', sans-serif; color: #333; line-height: 1.6; }

        /* 상단 영역 (배너 등) */
        .header-banner {
            height: 250px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #666;
        }

        /* ⭐ 중간 탭 메뉴 스타일 */
        .tab-menu-container {
            text-align: center;
            padding: 30px 0;
            background-color: #ffffff;
            position: relative;
        }

        .tab-menu {
            display: inline-flex;
            gap: 40px;
            list-style: none;
        }

        .tab-item {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            cursor: pointer;
            position: relative;
            padding-bottom: 8px;
            transition: color 0.3s ease;
        }

        /* 마우스를 올리거나 활성화 되었을 때 효과 */
        .tab-item:hover, .tab-item.active {
            color: #1e7b75; /* 이미지의 시그니처 그린 색상 계열 */
        }

        /* 활성화된 탭 밑줄 효과 */
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #1e7b75;
            border-radius: 2px;
        }

        /* 본문 콘텐츠 컨테이너 */
        .tab-content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 20px;
        }

        /* 각 섹션 기본 스타일 */
        .tab-content {
            text-align: center;
            margin-bottom: 60px; /* 처음 전체 보일 때의 간격 */
            animation: fadeIn 0.4s ease;
        }
        
        .tab-content h1 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #1e7b75;
        }

        .tab-content h2 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #1e7b75;
        }


        /* --------------------------------------------------
           ⭐ 핵심: 처음 '전체 보기' 상태와 '탭 전환' 상태 제어
        -------------------------------------------------- */
        
        /* 1. 탭이 하나라도 클릭되면 (body에 .tab-activated 가 붙으면) 기본적으로 모든 콘텐츠를 숨김 */
        body.tab-activated .tab-content {
            display: none;
        }

        /* 2. 그 중 활성화된(클릭한) 탭의 콘텐츠만 보임 */
        body.tab-activated .tab-content.active {
            display: block;
        }

        /* 부드럽게 나타나는 애니메이션 효과 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>