@tailwind base;
@tailwind components;
@tailwind utilities;


/* @font-face {
    font-family: 'KoreaInstituteOfMachineryAndMaterials';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
} */

@font-face {
    font-family: 'KoreaInstituteOfMachineryAndMaterials';
    src: url('/assets/fonts/KIMM_Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}


@font-face {
  font-family: 'Alternox';
  src: url('/assets/fonts/Alternox-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Google Sans Flex';
    src: url('/assets/fonts/google-sans-flex.woff2') format('woff2');
    /* 가변 폰트의 모든 범위를 지원하도록 설정 */
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: oblique 0deg 10deg;
    font-display: swap;
}






.font-alternox {
  font-family: 'Alternox', sans-serif !important;
  letter-spacing: -0.2rem; /* 피그마 자간 -5% 느낌 */
}

.font-Montserrat {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.05em; /* 피그마 자간 -5% 느낌 */
  }

  

:root {
    --primary: #AC71FF;
    --secondary: #7ADBFF;
    --tertiary: #FF98E2;
    --bg: #000000;
    --n-1: #FFFFFF;
    --n-2: #C6D3DD; /* CAC6DD */
    --n-3: #89849c;
    --n-6: #232324;
    --max-width: 1440px;
}

:root {

    --surface: #0a0a0a;
    /* --border: rgba(255, 255, 255, 0.08); */
    --text: #cbcbcb;
    --text-dim: #888888;

}

/* Tailwind는 브라우저 기본값인 1rem = 16px를 기준으로 동작합니다. */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 17px; /* 기본 16px에서 18px로 전체 상향 */
}

body {
    background-color: var(--bg);
    color: var(--n-2);
    overflow-x: hidden;

    /* font-family: 'Google Sans Flex', sans-serif;
    font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14;
    letter-spacing: -0.02em; */

    font-family: 'Google Sans Flex', sans-serif;
    
    /* variation-settings 대신 표준 속성 권장 */
    font-weight: 400; 
    
    /* 꼭 필요한 가변 속성만 남기기 */
    font-variation-settings: "wdth" 100, "opsz" 10; 
    
    letter-spacing: -0.02em;
    
    /* 폰트 렌더링을 더 날카롭게 (Mac/iOS 효과적) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: 'Alternox', sans-serif;
    font-size: 5rem;
    /* font-style: normal; */
    /* letter-spacing: 0.05em; */
    line-height: 1.1; 
    letter-spacing: -0.05em;
    /* font-weight: 700;
    text-transform: uppercase; */
}



h2 {
    font-family: 'Alternox', sans-serif;
    letter-spacing: -0.08em; 
    line-height: 1.2;
    font-weight: 400;
    
    /* 모바일에서 적당히 큼직하게 */
    font-size: 32px !important;
    }


    
    /* 데스크톱으로 가면 더 시원하게 확장 */
    @media (min-width: 768px) {
    h2 {
        font-size: 42px !important;;
    }
    }


.menu > a {display: block;  text-align: center}
 /* #pricing  a {  text-align: center !important       } */
 footer a { text-align: initial !important  }
 
 p {
    /* 라이드 모드 레귤러 굵기 (400) */
    font-weight: 400;
  
    /* 중간 그레이 (Tailwind gray-500과 동일한 Hex값) */
    color: #e5e7eb;
  
    /* 글자 부기 빼주는 속성 (이게 핵심) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* 가독성 (간격) */
    /* line-height: 1.625; */
  }
.doc p{    color: #475569; /* slate-600 */

} 
        .container-custom {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 40px;
        } 


        /* Brainwave Grid Background */
        .grid-bg {
            position: fixed;
            inset: 0;
            background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
            background-size: 40px 40px;
            z-index: -1;
        }

        /* Glowing Orbs */
        .orb {
            position: absolute;
            filter: blur(120px);
            border-radius: 50%;
            z-index: -1;
            opacity: 0.15;
        }

        .gradient-text {
            background: linear-gradient(90deg, #AC71FF, #7ADBFF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .brainwave-border {
            position: relative;
            border-radius: 20px; /* 1.25rem */
        
            /* 배경: 70% 투명도의 어두운 색 */
            /* background: rgba(24, 24, 24, 0.7); */
            background:#13111C80;
            /* 글래스모피즘: 맑은 느낌을 주는 핵심 */
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
        
            /* 테두리: 은은하게 보일 정도로만 설정 (이게 없으면 경계가 흐릿함) */
            border: 1px solid rgba(255, 255, 255, 0.08);
        }







          .bg-gradient-600 {
            background: linear-gradient(90deg, #AC71FF, #7ADBFF);
            border: none; /* 기존 보더 제거 */
          }

          
          /* 유리에 비치는 듯한 효과를 원하신다면 (선택 사항) */
          .glass {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
          }
          

          .text-blue-500 {
            /* --tw-text-opacity: 1;
            color: rgb(59 130 246 / var(--tw-text-opacity, 1)); */
            color:#A46EF5 !important;
          }

        .btn-gradient {
            background: linear-gradient(90deg, #AC71FF, #7ADBFF);
            color: white;
            padding: 2px;
            border-radius: 0.5rem;
            display: inline-block;
            transition: transform 0.2s;
            cursor: pointer;
        }

        .btn-gradient:hover {
            /* 밝기를 10% 정도 올림 */
            filter: brightness(1.1); 
            /* 또는 살짝 투명하게 하여 배경과 섞임 */
            opacity: 0.7;
          }

        /* .btn-gradient:hover {
            transform: translateY(-2px);
        } */


        .btn-gradient:hover {
            /* 1. 위치 이동 제거 (원치 않으시면 반드시 포함) */
            transform: none; 
        
            /* 2. 밝기와 대비를 살짝 올려서 '발광'하는 느낌 부여 */
            filter: brightness(1.15) contrast(1.1); 
        
            /* 3. 투명도는 0.7보다는 0.9 정도로 최소화하거나, 아예 쓰지 않는 것을 추천합니다. */
            /* 0.7은 배경의 검은색이 올라와서 색상이 죽어 보일 수 있습니다. */
            opacity: 1; 
        
            /* 4. (선택사항) 은은한 보라/하늘색 그림자를 추가하면 더욱 입체적입니다. */
            box-shadow: 0 0 20px rgba(172, 113, 255, 0.3);
            
            transition: all 0.3s ease;
        }



        .btn-gradient span {
            background: var(--bg);
            display: block;
            padding: 0.75rem 2rem;
            border-radius: 0.45rem;
            font-weight: 600;
            font-size: 0.875rem;


        }










        .tech-tag {
            font-family: 'Source Code Pro', monospace;
            font-size: 0.9rem;
            color: var(--n-3);
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .nav-link {
            color: var(--n-3);
            font-weight: 600;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            transition: color 0.3s;
        }

        .nav-link:hover {
            color: var(--n-1);
        }

        /* 배경 고정 설정 변경 */
        #hero-canvas-container {
            position: fixed;
            /* absolute에서 fixed로 변경하여 스크롤 시에도 화면에 고정 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 0;
            opacity: 0.6;
            pointer-events: none;
        }


        /* 샌드박스 */
        .preview-container-wrapper{
            position: relative;
            
            background: rgba(15, 17, 23, 0.75); /* 추천드렸던 깊은 색상 */
            backdrop-filter: blur(25px) saturate(180%);/* 글래스 효과의 핵심 */
            -webkit-backdrop-filter: blur(25px) saturate(180%);

            /* 테두리: 너무 밝지 않게 은은하게 */
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            /* 렌더링 뷰를 더 깊어 보이게 하는 그림자 */
                box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

            overflow: hidden; /* 내부 3D 화면이 모서리를 뚫지 못하게 함 */

        }


        #preview-container {
            width: 100%;
            height: 500px;
            /* background: rgba(19, 17, 28, 0.8); */
            
            /* border-radius: 1rem; */
            position: relative;
            display: none;
            overflow: hidden;
        }


        @keyframes scan {
            0% {
                transform: translateY(-100%);
            }

            100% {
                transform: translateY(100%);
            }
        }

        .scanner {
            height: 40%;
            width: 100%;
            background: linear-gradient(to bottom, transparent, rgba(122, 219, 255, 0.1), transparent);
            position: absolute;
            animation: scan 4s linear infinite;
            pointer-events: none;
        }


        .asset-btn {
            background: rgba(255, 255, 255, 0.02);
            border:solid 1px #1F1F1F;            
        }

        .asset-btn.active {
            background: rgba(255, 255, 255, 0.05);
            border:solid 1px #1F1F1F;            
        }

        .asset-btn.active {
            background: rgba(15, 17, 23, 0.8); /* 렌더링 박스와 유사한 딥 네이비 톤 */
            
            /* 핵심: 왼쪽 상단이나 하단에 아주 미세한 블루 글로우(Glow) 추가 */
            box-shadow: 
                inset 0 0 20px rgba(0, 242, 255, 0.05), 
                0 8px 32px rgba(0, 0, 0, 0.4);

            /* border: 1px solid rgba(0, 242, 255, 0.05);     */
            border: 1px solid rgba(202, 253, 255, 0.2); /* 테두리에도 블루 기운을 섞음 */
            
            /* border: 1px solid rgba(255, 255, 255, 0.08); */
        }


        /* 수정 css */
        /* Bento Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .bento-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 32px;
            padding: 40px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .bento-item:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.05);
        }

        .bento-title {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }