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

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

.gradient-text {
    background: linear-gradient(90deg, #4F46E5, #8B5CF6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
}

.section-container {
    max-width: 64rem; /* max-w-5xl */
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

/* 히어로 섹션 AI 아이콘 스타일 */
.hero-icon-container {
    display: inline-block;
    margin-bottom: 1rem; /* mb-4 */
    padding: 0.5rem; /* p-2 */
    background-color: rgba(255, 255, 255, 0.7); /* bg-white bg-opacity-70 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.hero-icon {
    height: 8rem; /* h-32 */
    width: 8rem; /* w-32 */
    border-radius: 9999px; /* rounded-full */
    background-image: linear-gradient(to bottom right, #6366F1, #A855F7); /* bg-gradient-to-br from-indigo-500 to-purple-600 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem; /* text-5xl */
    font-weight: 300; /* font-light */
}

.project-grid {
    display: grid;
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

.project-card {
    background-color: white;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.project-icon-container {
    height: 12rem; /* h-48 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #6366F1, #A855F7); /* from-indigo-500 to-purple-600 */
}

.project-icon {
    font-size: 3.75rem; /* text-6xl */
    color: white;
    opacity: 0.8;
}

.project-content {
    padding: 1.5rem; /* p-6 */
}

.project-title {
    font-weight: 700; /* font-bold */
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 0.5rem; /* mb-2 */
}

.project-description {
    color: #475569; /* text-slate-600 */
    margin-bottom: 1rem; /* mb-4 */
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* gap-2 */
    margin-bottom: 1rem; /* mb-4 */
}

.project-tag {
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    background-color: #F1F5F9; /* bg-slate-100 */
    color: #334155; /* text-slate-700 */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.75rem; /* text-xs */
}

.project-link {
    color: #4F46E5; /* text-indigo-600 */
    font-weight: 500; /* font-medium */
    transition: color 0.2s;
}

.project-link:hover {
    color: #3730A3; /* hover:text-indigo-800 */
}

.menu-button {
    position: absolute;
    background-color: white;
    padding: 0.5rem; /* p-2 */
    right: 0; /* 우측 정렬 */
    border-radius: 0.5rem; /* 부드러운 사각형으로 변경 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.menu-button:hover {
    background-color: #F3F4F6; /* hover:bg-gray-100 */
}

.menu-button:focus {
    outline: none;
}

.menu-icon {
    color: #4F46E5; /* text-indigo-600 */
    font-size: 1.25rem; /* text-xl */
}

.icon-margin-right {
    margin-right: 0.5rem; /* mr-2 */
}

.menu-dropdown {
    position: absolute;
    right: 0; /* 우측 정렬 */
    margin-top: 2.5rem; /* mt-2 */
    width: 12rem; /* w-48 */
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    overflow: hidden;
    text-align: right; /* 내부 텍스트 우측 정렬 */
}

.menu-item {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    cursor: pointer;
    text-align: right; /* 우측 정렬 */
}

.menu-item:hover {
    background-color: #F3F4F6; /* hover:bg-gray-100 */
}

.submenu {
    padding-right: 1rem; /* 왼쪽 패딩 대신 오른쪽 패딩 */
    margin-top: 0.5rem; /* mt-2 */
    border-right: 2px solid #C7D2FE; /* 왼쪽 테두리 대신 오른쪽 테두리 */
    text-align: right; /* 우측 정렬 */
}

.submenu-link {
    display: block;
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem;
    font-size: 0.875rem; /* text-sm */
    color: #4F46E5; /* text-indigo-600 */
}

.submenu-link:hover {
    color: #3730A3; /* hover:text-indigo-800 */
}

.header-button {
    padding: 0.75rem 2rem; /* px-8 py-3 */
    background-color: #4F46E5; /* bg-indigo-600 */
    color: white;
    border-radius: 9999px; /* rounded-full */
    font-weight: 500; /* font-medium */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.header-button:hover {
    background-color: #4338CA; /* hover:bg-indigo-700 */
}

.scroll-top-button {
    position: fixed;
    bottom: 1.5rem; /* bottom-6 */
    right: 1.5rem; /* right-6 */
    height: 3rem; /* h-12 */
    width: 3rem; /* w-12 */
    border-radius: 9999px; /* rounded-full */
    background-color: #4F46E5; /* bg-indigo-600 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: background-color 0.2s;
}

.scroll-top-button:hover {
    background-color: #4338CA; /* hover:bg-indigo-700 */
}

.scroll-top-button:focus {
    outline: none;
}

.hidden
{
    display:none;
}

.justify-center {
    display: flex;
    justify-content: center;
}