body {
            background-color: #f7f7f7;
        }

		.logo {
            height: 40px; /* 로고의 높이를 조절합니다. 필요에 따라 조정하세요. */
            vertical-align: middle; /* 텍스트와 수직 정렬을 맞춥니다. */
            margin-left: 10px; /* 텍스트와 로고 사이의 간격을 조정합니다. */
        }
        .banner {
            display: flex;
            flex-direction: column;
            width: 70%;
            margin: 10px auto;
        }
        .year-divider {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .year-divider::before {
            content: "";
            flex-grow: 1;
            height: 1px;
            background: #000;
            margin-right: 10px;
        }
        .year-divider::after {
            content: "";
            flex-grow: 1;
            height: 1px;
            background: #000;
            margin-left: 10px;
        }
        .year {
            font-weight: bold;
            font-size: 1.5em;
        }
        .banner-item {
            background-color: #f0f0f0;
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            transition: transform 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .banner-item:hover {
            transform: scale(1.05);
        }
        @media (max-width: 768px) {
            .banner {
                width: 95%;
            }
            .banner-item {
                padding: 8px;
                font-size: 0.9em;
            }
        }
        @media (max-width: 480px) {
            .banner-item {
                padding: 6px;
                font-size: 0.8em;
            }
        }
        .wave {
            display: inline-block;
            transition: transform 0.3s;
        }
        .wave:hover {
            animation: wave-animation 0.5s infinite;
        }
        @keyframes wave-animation {
            0% { transform: translateY(0); }
            25% { transform: translateY(-10px); }
            50% { transform: translateY(0); }
            75% { transform: translateY(10px); }
            100% { transform: translateY(0); }
        }

        .home-link {
            font-size: 24px; /* 원하는 크기로 변경하세요 */
        }

        /* Research Area 카드 ------------------------------------------------
           각 분야 페이지로 연결되므로, 마우스를 올리면 클릭 가능한 것이 보이도록
           카드가 살짝 떠오르고 그림자와 테두리 강조가 들어간다. */

        #research .image.fit {
            display: block;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        #research .image.fit img {
            transition: border-color 0.2s ease, filter 0.2s ease;

            /* 원본 이미지 비율이 제각각(1.778 ~ 1.912)이라 카드 높이가 어긋난다.
               원본 파일은 그대로 두고 표시 비율만 16:9 로 통일한다.
               object-fit: cover 는 비율을 유지한 채 넘치는 부분만 잘라내므로
               이미지가 찌그러지지 않는다. */
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            object-position: center;
        }

        #research .image.fit:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16);
        }

        #research .image.fit:hover img {
            border-color: #4ecdf6;  /* 테마 강조색 */
            filter: brightness(1.04);
        }

        /* 카드 안 세부 연구주제 목록 */
        #research .research-topics {
            margin: 0 0 1em 0;
            padding-left: 1.1em;
            list-style: disc;
        }

        #research .research-topics li {
            padding-left: 0;
            margin-bottom: 0.4em;
            line-height: 1.4;
        }

        /* 제목 링크는 현재 사용하지 않음 (이미지 클릭만 사용).
           index.html 에서 제목 링크 주석을 되살릴 때 아래도 함께 푸세요.

        #research h3 a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        */