/*
         * 십자가 아이콘을 감싸는 컨테이너
         * span 태그를 사용했으므로 display: inline-block;을 추가합니다.
         */
        .cross-container {
            position: relative; /* 십자가 위치의 기준점 */
            display: inline-block; /* span 태그에 크기를 주기 위해 추가 */
            width: 20px;
            height: 20px;
            cursor: pointer;
            vertical-align: middle; /* 텍스트와 세로 정렬을 맞추기 위해 추가 */
        }

        /*
         * 십자가 아이콘 자체의 스타일
         * ::before와 ::after를 이용해 2개의 막대를 만들고 겹쳐서 십자가를 만듭니다.
         */
        .cross-container::before,
        .cross-container::after {
            content: '';
            position: absolute;
            background-color: #fff; /* 십자가 색상 */
            border-radius: 2px;
            box-shadow: 0 0 8px 2px #fff; /* 빛나는 그림자 효과 */
            transition: box-shadow 0.3s ease;
        }
        
        /* 세로 막대 (더 길게) */
        .cross-container::before {
            width: 4px;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* 가로 막대 (더 짧고 위쪽에 위치) */
        .cross-container::after {
            width: 70%; /* 너비를 70%로 줄여서 가로 막대를 짧게 만듦 */
            height: 4px;
            top: 25%; /* 위에서 25% 위치에 배치 */
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* 십자가에 마우스를 올렸을 때 빛 효과 강화 */
        .cross-container:hover::before,
        .cross-container:hover::after {
            box-shadow: 0 0 12px 4px #fff;
        }

/* 사용법
<span class="cross-container"></span>
*/