/* 팝업 오버레이의 초기 상태를 설정합니다 */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: 50;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.5s ease-in-out;
        }

        /* 팝업이 보여지는 상태를 설정합니다 */
        .popup-overlay.show {
            visibility: visible;
            opacity: 1;
        }

        /* 팝업 컨테이너의 초기 상태를 설정합니다 (화면 밖 위쪽에 위치) */
        .popup-container {
            width: 100%;
            max-width: 36rem; /* max-w-xl */
            background-color: #fff; /* bg-white */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
            padding: 1.5rem;
            position: relative;
            display: flex;
            flex-direction: column;
            transform: translateY(-100%);
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        /* 팝업이 보여질 때 컨테이너가 제자리로 내려오게 합니다 */
        .popup-overlay.show .popup-container {
            transform: translateY(0);
        }

        /* 버튼 스타일 */
        .cc-popup-btn {
            padding: 0.5rem 1.5rem;
            border-radius: 0.375rem; /* rounded-md */
            font-weight: 500; /* font-medium */
            transition: background-color 0.15s ease-in-out; /* transition-colors */
            border: none;
            cursor: pointer;
        }
        .cc-popup-btn-gray {
            background-color: #e5e7eb; /* bg-gray-200 */
            color: #374151; /* text-gray-700 */
        }
        .cc-popup-btn-gray:hover {
            background-color: #d1d5db; /* hover:bg-gray-300 */
        }
        .cc-popup-btn-blue {
            background-color: #2563eb; /* bg-blue-600 */
            color: #fff; /* text-white */
        }
        .cc-popup-btn-blue:hover {
            background-color: #1d4ed8; /* hover:bg-blue-700 */
        }

        /* 유틸리티 클래스 */
        .container {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .container.mx-auto {
            margin-left: auto;
            margin-right: auto;
        }
        .p-8 { padding: 2rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .font-bold { font-weight: 700; }
        .mb-4 { margin-bottom: 1rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-gray-600 { color: #4b5563; }
        .mt-2 { margin-top: 0.5rem; }
        .grid { display: grid; }
        .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
        .gap-6 { gap: 1.5rem; }
        .mt-8 { margin-top: 2rem; }
        .bg-white { background-color: #fff; }
        .rounded-lg { border-radius: 0.5rem; }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .p-6 { padding: 1.5rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .font-semibold { font-weight: 600; }
        .mb-2 { margin-bottom: 0.5rem; }
        .text-gray-700 { color: #374151; }
        .flex { display: flex; }
        .justify-between { justify-content: space-between; }
        .items-center { align-items: center; }
        .pb-4 { padding-bottom: 1rem; }
        .border-b { border-bottom-width: 1px; }
        .border-gray-200 { border-color: #e5e7eb; }
        .flex-grow { flex-grow: 1; }
        .overflow-y-auto { overflow-y: auto; }
        .justify-end { justify-content: flex-end; }
        .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }