body {
    font-family: 'Noto Sans KR', sans-serif;
}

.profile-dropdown  {
    max-height: 0;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    visibility: hidden;
}

.profile-dropdown.show {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
}

.swiper-pagination-bullet {
    background-color: oklch(0.871 0.006 286.286) !important;
}

/* 활성화된 bullet의 색상 변경 */
.swiper-pagination-bullet-active {
    background-color: oklch(0.546 0.245 262.881) !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.result-card {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-in-out forwards;
}

/* 툴팁 */
[data-tooltip] {
    position: relative;
}

/* 스켈레톤 로딩 */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* 호버 효과 */
.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 필터 드롭다운 */
.form-checkbox {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #4b5563;
    border-radius: 0.25rem;
    background-color: transparent;
    cursor: pointer;
}

.form-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* 아이콘 그리드 */
.icon-grid .shadow-3d {
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    transform: 
        perspective(1000px)
        rotateX(10deg)
        rotateY(-5deg);
}

.icon-grid .shadow-3d-hover {
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    transform: 
        perspective(1000px)
        rotateX(5deg)
        rotateY(-2deg)
        translateZ(10px);
}

/* 아이콘 컨테이너에 약간의 회전 적용 */
.icon-grid .flex {
    transform-style: preserve-3d;
}

/* 버튼 광택 효과 */
.recommend-btn {
    position: relative;
    overflow: hidden;
}

.recommend-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    transform: skewX(-25deg);
}

.recommend-btn:hover::before {
    animation: shine 1s 1;
}

@keyframes shine {
    0% {
        left: -75%;
    }

    100% {
        left: 150%;
    }
}

/* 에디터 커스텀 스타일 */
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid rgb(63, 63, 70) !important;
    background-color: oklch(0.21 0.006 285.885 / 0.4) !important;
    padding: 8px !important;
}

.ql-container.ql-snow {
    border: none !important;
    font-family: 'Noto Sans KR', sans-serif !important;
}

.ql-editor {
    min-height: 300px !important;
    font-size: 14px !important;
    color: rgb(212, 212, 216) !important;
}

.ql-editor.ql-blank::before {
    color: rgb(113, 113, 122) !important;
    font-style: normal !important;
    font-size: 14px !important;
}

/* 툴바 버튼 스타일링 */
.ql-toolbar button {
    color: rgb(212, 212, 216) !important;
}

.ql-toolbar button:hover {
    color: white !important;
}

.ql-toolbar .ql-stroke {
    stroke: rgb(212, 212, 216) !important;
}

.ql-toolbar .ql-fill {
    fill: rgb(212, 212, 216) !important;
}

.ql-toolbar button:hover .ql-stroke {
    stroke: white !important;
}

.ql-toolbar button:hover .ql-fill {
    fill: white !important;
}

.ql-toolbar .ql-picker {
    color: rgb(212, 212, 216) !important;
}

.ql-toolbar .ql-picker-options {
    background-color: rgb(39, 39, 42) !important;
    border: 1px solid rgb(63, 63, 70) !important;
}

.ql-toolbar .ql-picker-item:hover {
    color: white !important;
    background-color: rgb(63, 63, 70) !important;
}

/* 토스트 메시지 스타일 */
#toast {
    pointer-events: none;
    max-width: 90%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

#toast.show {
    opacity: 1;
}

.tooltip-content {
    max-height: 400px;
    overflow-y: auto;
    box-sizing: border-box;
}

.tooltip-content::-webkit-scrollbar,
.m-tooltip-content::-webkit-scrollbar,
.prompt-box::-webkit-scrollbar {
    width: 4px;
}

.tooltip-content::-webkit-scrollbar-thumb,
.m-tooltip-content::-webkit-scrollbar-thumb,
.prompt-box::-webkit-scrollbar-thumb {
    background: #00000020;
    border-radius: 16px;
}

.dark .tooltip-content::-webkit-scrollbar-thumb,
.dark .m-tooltip-content::-webkit-scrollbar-thumb,
.dark .prompt-box::-webkit-scrollbar-thumb {
    background: #ffffff20;
    border-radius: 16px;
}

.tooltip-content::-webkit-scrollbar-track,
.m-tooltip-content::-webkit-scrollbar-track,
.prompt-box::-webkit-scrollbar-track {
    background: transparent;
}

@keyframes swipeLeftRight {
    0%, 100% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
}

.swipe-animation {
    animation: swipeLeftRight 1.5s ease-in-out infinite;
}

/* 3초 후에 힌트 박스의 애니메이션 멈추기 */
@media (prefers-reduced-motion: no-preference) {
    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        animation-delay: 1s;
        animation-iteration-count: 3;
    }
}

.pg_tit {
    display: none;
}

/* 단계별 트랜지션 효과 */
.upload-step-content {
    transition: opacity 0.3s, transform 0.3s;
    transform: translateX(0);
    opacity: 1;
}

.upload-step-content.hidden {
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
}

/* 콘텐츠 타입 카드 선택 효과 */
.content-type-card.selected {
    border-color: #a855f7;
    background-color: rgba(168, 85, 247, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease forwards;
}

/* 애니메이션 효과 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 업로드 버튼 펄스 효과 */
@keyframes pulseSecond {
    0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

#publish-showcase:hover {
    animation: pulseSecond 1.5s infinite;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@media (max-width: 1024px) {
    .mobile-menu {
        max-height: 0;
        opacity: 0;
        transition: all 0.2s ease-in-out;
        visibility: hidden;
    }
    .mobile-menu.show {
        max-height: 400px;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
    .category-nav {
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: 64px;
        z-index: 10;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
    }
    
    .category-nav.show {
        max-height: 400px;
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
    }
    .category-nav::-webkit-scrollbar {
        width: 4px;
    }
    .category-nav::-webkit-scrollbar-thumb {
        background: oklch(0.623 0.214 259.815);
        border-radius: 10px;
    }
    .category-nav::-webkit-scrollbar-track {
        background: oklch(0.37 0.013 285.805);
        border-radius: 10px;
    }
    .toggle-menu-btn .close-icon,
    .toggle-menu-btn .open-icon {
        transition: all 0.14s ease-in-out;
    }
    .toggle-menu-btn .close-icon {
        opacity: 0;
    }
    .toggle-menu-btn.show .close-icon {
        opacity: 1;
    }
    .toggle-menu-btn.show .open-icon {
        opacity: 0;
    }
    .mobile-upper {
        transform: translateY(-64px);
    }
}

@media (min-width: 640px) {
    #toast {
        max-width: 400px;
    }
}