@import url('https://fonts.googleapis.com/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');

:root { 
    --cursor-x: 50%; 
    --cursor-y: 50%; 
    --primary-color: #6366f1; /* ±âº» Àεð°í */
    --nav-height: 80px;
}

html { scroll-behavior: smooth; }
body { 
    font-family: 'Pretendard', sans-serif; 
    background: #fdfdff; 
    color: #1e293b; 
    overflow-x: hidden; 
    letter-spacing: -0.02em; 
    padding-top: var(--nav-height); /* ³»ºñ°ÔÀÌ¼Ç ³ôÀ̸¸Å­ º»¹® ¹Ð¾î³»±â */
}

/* ==========================================================================
   1. ÅëÇÕ ³»ºñ°ÔÀÌ¼Ç ¹Ù (Unified Navigation)
   ========================================================================== */
#mainNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 9999 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ½ºÅ©·Ñ ½Ã À¯¸® Áú°¨ °­È­ */
#mainNav.scrolled {
    height: 70px;
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* ·Î°í ¼½¼Ç */
.nav-logo-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.nav-logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#mainNav:hover .nav-logo-icon {
    transform: rotate(15deg) scale(1.1);
}

/* ¸Þ´º ¸µÅ© ½Ã½ºÅÛ */
.nav-links {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-link-item {
    position: relative;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8; /* Slate 400 */
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

/* ºê·£µåº° È£¹ö Ä÷¯ Á¤ÀÇ */
.nav-link-item.nav-yt:hover { color: #ef4444; } /* YouTube Red */
.nav-link-item.nav-ig:hover { color: #ec4899; } /* Insta Pink */
.nav-link-item.nav-tk:hover { color: #06b6d4; } /* TikTok Cyan */
.nav-link-item.nav-nb:hover { color: #22c55e; } /* Blog Green */
.nav-link-item.nav-ts:hover { color: #f97316; } /* Tistory Orange */

/* ¹ØÁÙ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú */
.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link-item:hover::after {
    width: 100%;
}

/* È°¼ºÈ­ »óÅ (Active) */
.nav-link-item.active {
    color: #1e293b;
}

.nav-link-item.active::after {
    width: 100%;
    height: 3px;
}

/* Á¾·á/¾×¼Ç ¹öÆ° */
.nav-exit-btn {
    background: #f1f5f9;
    padding: 0.7rem 1.6rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 900;
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.nav-exit-btn:hover {
    background: #0f172a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* [½ºÆ©µð¿À ¾î½Ã½ºÅÏÆ® °¡À̵å - ´ÙÅ© ¸ðµå ½ºÅ¸ÀÏ] */
.next-step-guide {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 10000; /* ÃÖ»ó´Ü ³ëÃâ º¸Àå */
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    
    /* ĸó À̹ÌÁö ½ºÅ¸ÀÏ Àû¿ë: ¾îµÎ¿î ¹è°æ + µÕ±Ù ¸ð¼­¸® */
    background: #0f172a; /* ¾ÆÁÖ ¾îµÎ¿î ³×À̺ñ/ºí·¢ */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3rem; /* µÕ±Ù ĸ½¶ ÇüÅ */
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); /* ±íÀº ±×¸²ÀÚ */
    
    /* ¾Ö´Ï¸ÞÀÌ¼Ç ¼³Á¤ */
    opacity: 0;
    transform: translateY(150%);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-family: 'Pretendard', sans-serif !important;
    cursor: pointer;
}

/* È°¼ºÈ­ ½Ã ³ªÅ¸³ª±â */
.next-step-guide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ¸¶¿ì½º ¿Ã·ÈÀ» ¶§ È¿°ú */
.next-step-guide:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px -10px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
}

/* ¾ÆÀÌÄÜ ¹Ú½º: ±×¶óµ¥ÀÌ¼Ç Àû¿ë (ù ¹ø° »çÁø ½ºÅ¸ÀÏ) */
.guide-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    
    /* Àεð°í -> ÇÎÅ© ±×¶óµ¥ÀÌ¼Ç */
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}
/* ==========================================================================
   2. ±âÁ¸ ¹è°æ ¹× UI ÄÄÆ÷³ÍÆ® (Fluid & Aurora)
   ========================================================================== */
.fluid-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(99, 102, 241, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(255, 0, 204, 0.08) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(0, 255, 204, 0.05) 0%, transparent 50%); transition: background 0.2s ease-out; }
.aurora-blur { position: fixed; width: 140vw; height: 140vh; top: -20vh; left: -25vw; z-index: -2; background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 25%, #fae8ff 50%, #f0fdf4 100%); filter: blur(120px); animation: auroraRotate 25s linear infinite; }
@keyframes auroraRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ĵ¹ö½º ¹× Ä«µå ½Ã½ºÅÛ */
.mag-card { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(40px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2.5rem; padding: 2.5rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); height: fit-content; position: relative; z-index: 10; }
.mag-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.6); border-color: var(--primary-color); }

.aspect-shorts {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 340px; /* ³Êºñ¸¦ 360px -> 340px·Î Ãà¼ÒÇÏ¿© ³¯·ÆÇÏ°Ô */
    margin: 0 auto;
    position: relative;
    
    /* ½º¸¶Æ®Æù º£Á©(Å׵θ®) µðÀÚÀÎ */
    border: 14px solid #ffffff; /* µÎ²¨¿î Èò»ö Å׵θ® */
    border-radius: 55px; /* µÕ±Ù ¸ð¼­¸® */
    background: #000; /* ³»ºÎ ¹è°æ */
    
    /* ÀÔü°¨ ÀÖ´Â ±×¸²ÀÚ */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); 
    box-sizing: content-box; /* Å׵θ®¸¦ ³Êºñ¿¡ Æ÷ÇÔÇÏÁö ¾ÊÀ½ */
    z-index: 10;
}

/* ĵ¹ö½º ·¡ÆÛ (½ºÅ² ¾ÈÂÊ È­¸é) */
.canvas-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    
    /* Å׵θ® ¾ÈÂÊ¿¡ µü ¸Â°Ô ¼³Á¤ */
    border-radius: 40px; 
    overflow: hidden !important;
    
    /* ĵ¹ö½º Æ¢¾î³ª¿È ¹æÁö ¸¶½ºÅ· */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    
    border: none; /* ³»ºÎ Å׵θ® Á¦°Å */
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain !important; /* À̹ÌÁö°¡ À߸®Áö ¾Ê°í ºñÀ²À» À¯ÁöÇÏ¸ç ¾È¿¡ ¸ÂÃã */
    background-color: #000; /* ºó °ø°£Àº °ËÁ¤»öÀ¸·Î ä¿ò */
}

/* °è´ÜÇü ÇÁ·Î¼¼½º Ä¿½ºÅÒ */
.step-badge { 
    display: inline-flex; align-items: center; justify-content: center; 
    width: 2.2rem; height: 2.2rem; background: var(--primary-color); 
    color: white; border-radius: 50%; font-size: 0.85rem; 
    font-weight: 900; margin-right: 0.75rem; 
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ¸ð¹ÙÀÏ ´ëÀÀ ÃÖÀûÈ­ */
@media (max-width: 1024px) {
    #mainNav { padding: 0 2rem; }
    .nav-links { display: none; } /* ¸ð¹ÙÀÏ ¸Þ´º´Â º°µµ ±¸Çö ±ÇÀå */
    .mag-card { padding: 1.5rem; }
    body { padding-top: 70px; }
}