@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Pretendard:wght@300;500;700;900&display=swap');

        /* 문서 기본 스타일 */
        body {
            font-family: 'Pretendard', sans-serif;
            background-color: #000000;           /* 심플한 검은 배경 */
            color: #e2e8f0;                      /* 밝은 텍스트 */
            overflow-x: hidden;
            padding-top: 76px;                   /* 고정 네비게이션 여유 */
        }
        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        
        /* 3D 장면 컨테이너: 원근감 설정 및 드래그 인터랙션 */
        .scene {
            perspective: 1000px;             /* 원근감: 작을수록 강함 */
            width: 260px;
            height: 260px;
            margin: 0 auto;
            cursor: grab;                    /* 드래그 가능 상태 표시 */
        }
        .scene:active {
            cursor: grabbing;                /* 드래그 중 상태 표시 */
        }

        /* 면 렌더링 */
        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;    /* 자식 요소의 3D 변환 유지 */
            /* JS에서 마우스 드래그에 따라 rotateX/Y 값 동적으로 적용 */
        }

        /* 면 렌더링 */
        .cube-face {
            position: absolute;
            width: 260px;
            height: 260px;
            border: 2px solid rgba(148, 163, 184, 0.2);  /* 은은한 경계 */
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); /* 내부 음영 */
            color: #cbd5e1;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: visible;   /* 뒷면도 표시 */
            overflow: hidden;
            border-radius: 4px;
            user-select: none;              /* 텍스트 선택 방지 */
            opacity: 0.95;
        }

        
        .face-front  { transform: rotateY(0deg) translateZ(130px); }
        .face-back   { transform: rotateY(180deg) translateZ(130px); }
        .face-right  { transform: rotateY(90deg) translateZ(130px); }
        .face-left   { transform: rotateY(-90deg) translateZ(130px); }
        .face-top    { transform: rotateX(90deg) translateZ(130px); }
        .face-bottom { transform: rotateX(-90deg) translateZ(130px); }

        
        /* F1: Rose (Front - 시작점 / 일자리 시작) */
        .face-front  { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.6); color: #fda4af; }
        /* F6: Orange (Back - 결론 / 종합) */
        .face-back   { background: rgba(251, 146, 60, 0.15); border-color: rgba(251, 146, 60, 0.6); color: #fdba74; }
        /* F3: Yellow (Right - 성공 / 달성) */
        .face-right  { background: rgba(250, 204, 21, 0.15); border-color: rgba(250, 204, 21, 0.6); color: #fde047; }
        /* F4: Blue (Left - 정보 / 관찰) */
        .face-left   { background: rgba(96, 165, 250, 0.15); border-color: rgba(96, 165, 250, 0.6); color: #93c5fd; }
        /* F5: Teal (Top - 배움 / 교훈) */
        .face-top    { background: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.6); color: #6ee7b7; }
        /* F2: Purple (Bottom - 의미화 / 성찰) */
        .face-bottom { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.6); color: #c4b5fd; }

        /* 글래스모피즘 패널: 반투명 + 블러 효과로 모던한 UI */
        .glass-panel {
            background: rgba(20, 20, 20, 0.6);
            backdrop-filter: blur(12px);     /* 배경 이미지 흐림 */
            border: 1px solid rgba(255, 255, 255, 0.28);
        }

        /* ASCII 아트 텍스트 스타일 (고정 너비, 줄바꿈 유지) */
        .ascii-art {
            line-height: 1.1;               /* 코드 가독성을 위한 좁은 줄간격 */
            white-space: pre;               /* 스페이스/줄바꿈 보존 */
            text-align: center;
        }

        
        @keyframes flow {
            0% { transform: translateX(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateX(20px); opacity: 0; }
        }
        .flow-arrow {
            animation: flow 2s infinite;
        }

        @keyframes flow-y {
            0% { transform: translateY(-100%); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(100%); opacity: 0; }
        }
        .flow-line-y {
            animation: flow-y 2s infinite linear;
        }

        @keyframes flow-x {
            0% { transform: translateX(-100%); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateX(100%); opacity: 0; }
        }
        .flow-line-x {
            animation: flow-x 2s infinite linear;
        }

        @keyframes flow-x-reverse {
            0% { transform: translateX(100%); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateX(-100%); opacity: 0; }
        }
        .flow-line-x-reverse {
            animation: flow-x-reverse 2s infinite linear;
        }

        /* Chart Animations */
        .chart-line {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .chart-area {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 2s ease, transform 2s ease;
        }

        .chart-marker {
            opacity: 0;
            transform: scale(0);
            transform-origin: center;
            transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .animate-active .chart-line,
        #performance-chart.animate-active path.chart-line {
            stroke-dashoffset: 0;
        }

        .animate-active .chart-area,
        #performance-chart.animate-active path.chart-area {
            opacity: 1;
            transform: translateY(0);
        }

        .animate-active .chart-marker,
        #performance-chart.animate-active g.chart-marker {
            opacity: 1;
            transform: scale(1);
        }

        /* Delays for markers - SVG g 요소 직접 선택 */
        .chart-marker.marker-1,
        g.chart-marker.marker-1 { transition-delay: 0.5s; }

        .chart-marker.marker-2,
        g.chart-marker.marker-2 { transition-delay: 1.5s; }