@charset "UTF-8";

  @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

        /* 블로그 충돌 방지를 위해 body 대신 특정 래퍼 클래스에 적용 */
        .vogue-widget-container {
            --color-pearl: #FDFBF7;
            --color-sand: #E8E0D5;
            --color-peach: #F6CDBA;
            --color-sage: #A3B18A;
            --color-rose: #D8A4B1;
            --color-text: #2D2D2A;

            font-family: 'Noto Sans KR', sans-serif;
            background-color: var(--color-pearl);
            color: var(--color-text);
            /* 블로그 본문 내에서 안정적으로 자리잡도록 설정 */
            position: relative;
            width: 100%;
            overflow: hidden; 
        }

        .vogue-widget-container h1, 
        .vogue-widget-container h2, 
        .vogue-widget-container h3, 
        .vogue-widget-container .font-serif-custom {
            font-family: 'Cinzel', 'Noto Sans KR', serif;
        }

        .vogue-widget-container .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            max-height: 400px;
        }

        @media (min-width: 768px) {
            .vogue-widget-container .chart-container {
                height: 400px;
            }
        }

        .vogue-widget-container .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .vogue-widget-container .tab-active {
            border-bottom: 2px solid #2D2D2A;
            font-weight: 700;
        }
        
        .vogue-widget-container .color-swatch:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease;
        }