@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
    --bg: #050505;
    --card: rgba(18, 18, 20, 0.5);
    /* 카드 배경 투명도 */
    --text: #ffffff;
    --text-dim: #a1a1aa;
    --accent: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    --border: rgba(255, 255, 255, 0.1);
    --font-main: 'Outfit', 'Pretendard', sans-serif;
}

:root[data-theme="light"] {
    --bg: #f8f9fa;
    --card: rgba(0, 0, 0, 0.05);
    --text: #1a1a1a;
    --text-dim: #555555;
    --border: rgba(0, 0, 0, 0.12);
    --font-main: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}

* {
    box-sizing: border-box;
    outline: none;
}

/* --- Google Fonts: Outfit --- */
/* Font import moved to top */

html {
    scroll-behavior: smooth;
    background-color: var(--bg) !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Theme Reversal for WebGL & Background Arrays in Light Mode --- */
html[data-theme="light"] .aurora-bg,
html[data-theme="light"] #particle-canvas {
    filter: invert(1) hue-rotate(180deg) opacity(0.5);
    /* Inverts colors to dark particles on light space, reduces opacity */
    transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Ensure completely transparent dark overlays in light mode */
html[data-theme="light"] body::before,
html[data-theme="light"] #parallax-bg {
    opacity: 0 !important;
    background: transparent !important;
}

/* 부드러운 스크롤 추가 */
body {
    background-color: transparent;
    /* Revert to transparent to show particles */
    /* Ensure fallback is black via html */
    color: var(--text);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Split Text Reveal Animation --- */
.reveal .split-text-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1), transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
}

.reveal.active .split-text-word {
    opacity: 1;
    transform: translateY(0);
}

/* Fix for parent h2 hiding the split-text animation */
.reveal h2.split-text,
.reveal:not(.active) h2.split-text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
}

/* --- Aurora Mesh Gradient Background --- */
.aurora-bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200vw;
    height: 200vh;
    z-index: -3;
    /* 파티클 위, 캔버스 아래 */
    pointer-events: none;
    background:
        radial-gradient(circle at 60% 40%, rgba(90, 30, 200, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(20, 100, 150, 0.5) 0%, transparent 50%);
    mix-blend-mode: screen;
    filter: blur(60px);
    opacity: 0.8;
    animation: auroraSpin 20s ease-in-out infinite alternate;
}

@keyframes auroraSpin {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* --- WebGL Unity Container (Sandbox) --- */
.sandbox-box {
    position: relative;
    /* Essential for absolute children (loader) */
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    background: #000;
    /* Aspect ratio or height setting might be needed here or handled by grid */
}

/* --- Particle Canvas (Background) --- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    /* Deep background */
    pointer-events: none;
    /* Interact via JS but don't block scroll */
}

/* --- 1. Custom UI Cursor & Background --- */
#aura-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, border 0.3s ease;
}

#aura-cursor.magnet-active {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    mix-blend-mode: normal;
}

#parallax-bg {
    /* display: none !important; REMOVED to show background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    z-index: -3;
    /* Deepest background */
    background: #000;
    /* Solid Black Background */
    opacity: 1;
    /* Full opacity */
}

/* Re-enable body overlay for readability */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.4);
    z-index: -2;
    /* Behind WebGL? No, WebGL particles should be BRIGHT. 
                    If WebGL is -1, and overlay -2... Overlay is behind particles.
                    This means particles are on TOP of the dark overlay. Good for "pop".
                    But text is at z-index 1 or auto (0).
                    So: Overlay(-2) -> Particles(-1) -> Content(0+). 
                    Wait, if overlay is behind particles, the particles will be very bright against it.
                    */
}

/* 
   Note: #aura-cursor and #parallax-bg are disabled 
   because they are replaced by the WebGL shader rendering.
*/

/* 숨쉬는 효과 (Event Horizon Pulse) */
@keyframes breathe {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.5;
    }
}

.breathing {
    animation: breathe 3s infinite ease-in-out;
    animation: breathe 3s infinite ease-in-out;
}

/* --- 2. Floating Organic Particles --- */
/* #particle-canvas styling removed to use full-screen WebGL instead */

/* 가독성을 위한 전체 오버레이 */
/* body::before is now hidden by the SOLO MODE rule */
/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.4);
    Reduced opacity from 0.7 to 0.4 to see background better
    z-index: -2;
}
*/

/* Header & Nav */
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

header.scrolled {
    background: rgba(18, 18, 20, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    height: 65px;
    border-radius: 3px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Reduced for tighter spacing */
}

.nav-right a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

/* --- Theme Toggle Button --- */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    margin-left: 5px;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    transform: scale(1.15) rotate(10deg);
    color: #3b82f6;
    /* Accent color on hover */
}

/* --- YouTube Button (Default: Rectangle with Text) --- */
.yt-btn {
    background: var(--accent);
    padding: 10px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: transform 0.2s;
    text-decoration: none;
    color: white;
    /* Ensure text is white */
}

/* Specific Style for Nav Button (Square Icon Only) */
header .yt-btn {
    padding: 10px;
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 6px;
    gap: 0;
}

header .yt-btn span {
    display: none;
    /* Hide text only in header button */
}

/* --- ShowRoom Card Styling --- */
.showroom-card {
    display: block;
    flex: 0 0 calc((100% - 40px) / 3);
    /* Strictly enforce 1/3 width minus the 2 gaps of 20px */
    width: calc((100% - 40px) / 3);
    max-width: none;
    /* Remove max-width constraint to allow 3 items to span fully */
    aspect-ratio: 20 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    /* Clean text containment */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Subtle border */
    text-decoration: none;
    /* Remove link underline */
}

/* Hover Effect: Scale up and Brighten */
.showroom-card:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
    /* Blue glow */
    border-color: rgba(255, 255, 255, 0.5);
    border-top-color: rgba(255, 255, 255, 0.8);
}

/* Gradient Overlay for Readability */
.showroom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            transparent 60%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align text to bottom */
    padding-bottom: 30px;
    /* Space from bottom */
    transition: background 0.4s ease;
}

.showroom-card:hover .showroom-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.6) 0%,
            transparent 60%);
    /* Slightly lighter on hover */
}

.showroom-text {
    font-size: 0.9rem;
    /* Reduced by half from ~1.76rem */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Also reduced letter-spacing slightly for smaller text */
    /* Wide tracking for cinematic feel */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0.6 !important;
    transition: all 0.3s ease;
}

.showroom-card:hover .showroom-text {
    opacity: 1;
    transform: translateY(-5px);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    /* Glowing text */
}

/* Tablet Responsiveness */
@media (max-width: 1024px) {
    .showroom-card {
        flex: 0 0 calc((100% - 20px) / 2);
        /* 2 cards per row on tablet, 1 gap of 20px */
        width: calc((100% - 20px) / 2);
        aspect-ratio: 20 / 9;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .showroom-card {
        flex: 0 0 100%;
        width: 100%;
        /* 1 card per row on mobile */
        aspect-ratio: 20 / 9;
        border-radius: 2px;
    }

    .showroom-text {
        font-size: 1.28rem;
    }
}

.yt-btn:hover {
    transform: scale(1.05);
}

.yt-icon {
    width: 20px;
    /* Restored middle size */
    fill: white;
}

/* Header icon slightly larger */
header .yt-icon {
    width: 24px;
}

/* ... (Section Common skipped) ... */

/* --- Interactive Info Fonts (Reduced) --- */
.info-card h3 {
    font-size: 1.5rem;
    /* Reduced from 1.8rem */
    margin-bottom: 10px;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.card-desc {
    color: var(--text-dim);
    margin-bottom: 25px;
    font-size: 0.9rem;
    /* Reduced from 1rem */
    line-height: 1.5;
}

.info-card li {
    margin-bottom: 15px;
    color: var(--text);
    font-size: 0.95rem;
    /* Reduced from 1.1rem */
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-left: 2px solid rgba(59, 130, 246, 0.5);
}

/* ... (Skipping to Connect Section) ... */

/* --- Connect Section Fonts (Reduced) --- */
.connect-desc {
    font-size: 1.0rem;
    /* Reduced from 1.2rem */
    color: var(--text-dim);
    margin-bottom: 50px;
    line-height: 1.6;
}

.contact-label {
    font-size: 0.9rem;
    /* Reduced from 1rem */
    color: var(--text-dim);
    font-weight: 500;
}

.contact-value {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

/* Section Common */
.section {
    padding: 120px 5% 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- 배경 숫자 디자인 (Background Number) --- */
.section-title {
    position: relative;
    /* 숫자를 절대 위치로 잡기 위한 기준 */
}

.bg-number {
    position: absolute;
    top: -50px;
    /* 타이틀보다 약간 위에 배치 */
    left: -40px;
    /* 타이틀보다 약간 왼쪽에 배치 */
    font-size: 12rem;
    /* 아주 큰 크기 */
    font-weight: 900;
    color: #ffffff;
    opacity: 0.04;
    /* 4%의 아주 낮은 투명도로 은은하게 처리 */
    z-index: -1;
    /* 타이틀 뒤로 보냄 */
    user-select: none;
    pointer-events: none;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}

html[data-theme="light"] .bg-number {
    color: #000000;
    opacity: 0.08;
    /* 라이트 모드에서는 조금 더 진하게 표시 */
}

/* --- 슬라이드 인 애니메이션 (Reveal Animation) --- */
.reveal {
    opacity: 0;
    transform: translateX(-50px);
    /* 나타날 때와 사라질 때 모두 부드러운 속도를 유지하도록 설정 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    visibility: hidden;
    will-change: opacity, transform;
    /* 애니메이션 성능 최적화 */
}

.reveal.active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

/* 배경 숫자의 경우 타이틀보다 조금 더 늦게 또는 은은하게 사라지도록 하고 싶다면 */
.bg-number {
    transition: opacity 1.2s ease-in-out;
}

/* --- (참고) 이전 요청사항 적용: 카드 투명도 20% --- */
:root {
    --card: rgba(18, 18, 20, 0.2);
    /* 20% 투명도 적용 */
}

.badge {
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 1.1rem;
    /* 배지 크기도 소폭 상승 */
    text-transform: uppercase;
    letter-spacing: 2px;
    /* 글자 사이 간격을 넓혀 고급스럽게 설정 */
    display: inline-block;
    margin-bottom: 15px;
}

h2 {
    font-size: 4.5rem;
    /* 기존 2.5rem에서 대폭 상향 (강렬한 임팩트) */
    font-weight: 800;
    line-height: 1.1;
    /* 글자가 커진 만큼 행간을 좁혀서 덩어리감 형성 */
    letter-spacing: -2px;
    /* 큰 글씨에서 자간을 좁히면 더 디자인적인 느낌이 남 */
    margin: 0;
    background: linear-gradient(to bottom, #ffffff 70%, #888888 100%);
    /* 살짝 그라데이션을 줘서 입체감 부여 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sandbox & Bento Grid 스타일은 기존과 동일하되, 배경색(var(--card))이 반투명하게 적용됨 */
.sandbox-box {
    width: 100%;
    height: 80vh;
    /* 화면 높이의 80%를 차지하도록 설정 (시원한 크기) */
    position: relative;
    overflow: hidden;
}

/* 유니티 실체(자식 캔버스) 설정 */
#unity-canvas {
    width: 100% !important;
    /* 부모 너비에 꽉 맞춤 */
    height: 100% !important;
    /* 부모 높이에 꽉 맞춤 */
    display: block;
    /* Removed background: #000 to fix black screen issue */
}

.bento-item iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 24px;
    object-fit: cover;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    /* 기존보다 높이를 키워 영상을 시원하게 만듦 */
    /* 기존보다 높이를 키워 영상을 시원하게 만듦 */
    row-gap: 6px;
    column-gap: 24px;
    padding: 20px 0;
}

.filter-btn {
    background: var(--card);
    backdrop-filter: blur(10px);
    /* 카드 자체에도 블러 효과 추가 */
    border: 1px solid var(--border);
}

/* 특수 사이즈 복구 */
.bento-item.wide {
    grid-column: span 2;
}

.bento-item.tall {
    grid-row: span 2;
}

/* --- 2. 유니티 전용 크기 설정 (유튜브에 영향 주지 않음) --- */
/* 유니티 전용 크기 설정 (유튜브에 영향 주지 않음) */
/* --- 2. 유니티 전용 크기 설정 (유튜브에 영향 주지 않음) --- */
.title-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.interactive-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    /* Rounded Square */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.toggle-btn-icon svg {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
    /* Default: Point Up (Fold) */
}

.toggle-btn-icon.collapsed svg {
    transform: rotate(0deg);
    /* Collapsed: Point Down (Unfold) */
}

.toggle-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dim);
    transition: color 0.3s ease;
}

.toggle-btn-icon:hover+.toggle-text {
    color: var(--text);
}

.toggle-btn.collapsed svg {
    transform: rotate(-90deg);
    /* Rotate arrow when collapsed */
}

.sandbox-box {
    position: relative;
    /* Essential for loader centering */
    width: 100%;
    height: 70vh;
    min-height: 500px;
    max-height: 800px;
    /* Flexible height for notebook screens */
    margin-bottom: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    /* 로딩 전 검은 배경 */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth collapse transition */
    opacity: 1;
}

.sandbox-box.collapsed {
    height: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 유니티 실체(자식 캔버스) 설정 */
#unity-canvas {
    width: 100% !important;
    /* 부모 너비에 꽉 맞춤 */
    height: 100% !important;
    /* 부모 높이에 꽉 맞춤 */
    display: block;
}

/* --- 3. Blur-to-Focus Reveal (Video Cards) --- */
/* --- 3. Blur-to-Focus Reveal (Video Cards) --- */
.bento-item {
    /* Glassmorphism Container Style */
    position: relative;
    /* Fix absolute positioning of children like ai-badge */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Glass highlight */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bento-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
    /* Soft white glow */
}

.bento-item iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 5px;
    object-fit: cover;
    object-fit: cover;
    /* Blur removed */
    opacity: 1;
    transition: all 0.3s ease-in-out;
    display: block;
    /* Remove gap */
}

/* 마우스 호버 시 선명해짐 */
.bento-item:hover iframe {
    filter: blur(0) grayscale(0%);
    opacity: 1;
    transform: scale(1.02);
    /* 살짝 확대되는 느낌 추가 */
}

/* AI Driven Badge on Portfolio Cards */
.ai-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    font-size: 0.5rem;
    /* Reduced from 0.65rem */
    font-weight: 600;
    /* Reduced from 700 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Reduced from 1px */
    padding: 3px 6px;
    /* Reduced from 4px 10px */
    border-radius: 4px;
    /* Reduced from 20px */
    z-index: 50;
    /* Increased to stay above video facade */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.bento-grid {
    display: grid;
    /* Max layout: 6 landscape items (span 2) = 12 columns */
    /* Max layout: 6 landscape items (span 2) = 12 columns */
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    /* Changed from 300px to fix PC vertical gap */
    gap: 6px 24px;
    padding: 20px 0;
    width: 100%;
    grid-auto-flow: dense;
    /* Allows smaller items to fill empty spaces left by bigger items */
}

/* Default Item (Landscape Video) -> Span 2 columns */
/* This results in:
   - 12 cols: 6 items
   - 8 cols: 4 items
   - 4 cols: 2 items
   - 2 cols: 1 item
*/
.bento-item {
    grid-column: span 2;
    /* Glassmorphism Container Style */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease-out;
}

/* Shorts -> Span 1 column (Half size of Landscape) */
.bento-item.shorts {
    grid-column: span 1;
}

/* Responsive Grid Breakpoints (6 -> 4 -> 2 -> 1) */

/* Ultra Wide: 12 Cols (6 Landscapes) - Already default if width allows, 
   but let's clamp it for standard desktops to 4 or 6? 
   User asked for 6:4:2:1. Let's assume >1600px is 6. */



.loading-content {
    text-align: center;
    width: 300px;
}

.loading-text {
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: 1px;
}

/* 로딩바 디자인 (시옷 그라데이션 적용) */
.loading-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

#loading-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    /* 블루-퍼플 그라데이션 */
    transition: width 0.3s ease;
}

/* 스피너 애니메이션 */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* --- Interactive Info Section --- */
.interactive-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    opacity: 1;
}


.info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    /* Slightly smaller radius */
    padding: 20px;
    /* Reduced padding 40px -> 20px */
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --- Interactive Info Fonts (Increased by 130%) --- */
.info-card h3 {
    font-size: 1.2rem;
    /* Increased from 0.9rem */
    margin-bottom: 10px;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.card-desc {
    color: var(--text-dim);
    margin-bottom: 25px;
    font-size: 0.8rem;
    /* Increased from 0.6rem */
    line-height: 1.5;
}

.info-card li {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.8rem;
    /* Increased from 0.6rem */
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-left: 2px solid rgba(59, 130, 246, 0.5);
}

.info-card li strong {
    margin-right: 8px;
    color: #fff;
    font-weight: 600;
}

/* --- Light Mode Overrides for Interactive Info Cards --- */
html[data-theme="light"] .info-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .info-card h3 {
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    /* 진한 파랑-보라 그라데이션 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .info-card li strong {
    color: var(--text);
    /* 다크 그레이 */
}

html[data-theme="light"] .info-card li {
    color: var(--text-dim);
}

/* ... (Skipping to Connect Section) ... */

/* --- Connect Section Fonts (Reduced heavily to 60%) --- */
.connect-desc {
    font-size: 0.6rem;
    /* Reduced from 1.0rem */
    color: var(--text-dim);
    margin-bottom: 50px;
    line-height: 1.6;
}

.contact-label {
    font-size: 0.6rem;
    /* Reduced from 0.9rem */
    color: var(--text-dim);
    font-weight: 500;
}

.contact-value {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.location-text {
    font-size: 0.75rem; /* ~80% of normal */
    /* Even smaller for long address */
    color: var(--text-dim);
    /* Slightly dimmer for hierarchy */
}

@media (max-width: 768px) {
    .interactive-info {
        grid-template-columns: 1fr;
    }
}

/* --- Connect Section --- */
.connect-section {
    text-align: center;
    padding-bottom: 80px;
    /* Reduced padding 150px -> 80px */
    /* Space for footer */
}

.connect-content {
    max-width: 800px;
    margin: 0 auto;
}

.connect-desc {
    font-size: 1.2rem;
    color: var(--text-dim);
    margin-bottom: 50px;
    line-height: 1.6;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reduced gap 20px -> 10px */
}

.contact-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    /* Reduced padding 30px -> 15px vertical */
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(10px);
    /* Slight slide effect */
}

.contact-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-value {
    font-size: 0.8rem; /* Further reduced */
    color: var(--text);
    font-weight: 500;
    word-break: break-all;
}

/* --- Light Mode Overrides for Connect Section --- */
html[data-theme="light"] .connect-desc {
    color: var(--text);
    /* 환영문구 진하게 */
    font-weight: 500;
}

html[data-theme="light"] .contact-item {
    background: #ffffff;
    /* 화이트 카드 배경 */
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* 화이트 카드 라인 */
}

html[data-theme="light"] .contact-label {
    color: var(--text-dim);
}

html[data-theme="light"] .contact-value {
    color: var(--text);
}

@media (max-width: 768px) {
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* 로딩 로고 스타일 및 깜빡임 애니메이션 */
.loading-logo {
    width: 80px;
    /* 로고 크기 조절 */
    margin-bottom: 20px;
    animation: logo-pulse 1.5s ease-in-out infinite;
}

@keyframes logo-pulse {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.3;
        transform: scale(0.95);
    }
}

/* Bento Grid */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.filter-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-btn.active {
    background: var(--text);
    color: var(--bg);
}

/* Portfolio Filter */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}

.filter-btn.active {
    background: var(--text);
    color: #000;
    border-color: var(--text);
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Light Mode Overrides for Filter Buttons */
html[data-theme="light"] .filter-btn {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-dim);
}

html[data-theme="light"] .filter-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

/* --- Portfolio Specific Bento Item Overrides --- */
#portfolio-grid .bento-item,
#shorts-grid .bento-item {
    padding: 3px !important;
    /* 영상 콘텐츠 위주의 유튜브 카드는 여백 최소화 */
}

html[data-theme="light"] .filter-btn.active {
    background: var(--text);
    color: #ffffff;
    border-color: var(--text);
    font-weight: 600;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* 8-Column Grid for finer control */
    gap: 6px 24px;
    grid-auto-flow: dense;
}

.bento-item {
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    aspect-ratio: 16 / 9;
}

/* ... Intro Overlay ... */
/* ... */

/* Grid Sizes */
.bento-item {
    grid-column: span 2;
    /* Default: Takes 2 of 8 columns (25% width) */
}

.wide {
    grid-column: span 4;
    /* Takes 4 of 8 columns (50% width) */
    aspect-ratio: 21 / 9 !important;
}



.shorts {
    grid-column: span 1 !important;
    /* Forces 1/8 width (12.5%) for very slim vertical shorts */
    aspect-ratio: 9 / 16 !important;
}

/* --- Intro Overlay (Timed Effect) --- */
.intro-overlay {
    position: absolute;
    /* Changed from fixed to stick to container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Allows Unity to be seen behind */
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 2000;
    /* High Z-index */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Changed from center to top */
    padding-top: 10%;
    /* Raised to top (was 30%) */
    opacity: 0;
    /* Hidden by default */
    transition: opacity 1.5s ease-in-out;
}

.intro-overlay.active {
    opacity: 1;
}

.intro-content {
    text-align: center;
    transform: scale(0.9);
    transition: transform 1.5s ease-out;
}

.intro-overlay.active .intro-content {
    transform: scale(1);
}

.intro-title {
    font-size: 5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 10px;
    margin: 0;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
    background: linear-gradient(to right, #ffffff, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.5s;
}

.intro-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-dim);
    letter-spacing: 8px;
    margin-top: 10px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.0s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .intro-title {
        font-size: 3rem;
    }

    .intro-subtitle {
        font-size: 0.9rem;
    }
}

.bento-item iframe {
    width: 100%;
    height: 100%;
    border: none;
}






/* Load More */
.load-more {
    display: block;
    margin: 60px auto;
    background: none;
    border: 1px solid var(--text-dim);
    color: var(--text);
    padding: 15px 40px;
    border-radius: 15px;
    cursor: pointer;
}

/* ---------------------------------------------------
   Community Section: Live Floating Messenger
   --------------------------------------------------- */
.community-container {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 600px;
    max-height: 800px;
    /* Flexible height for notebook screens */
    margin-top: 20px;
    margin-bottom: 50px;
}

/* Floating Canvas Area */
.floating-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    /* Optional grid background pattern - Made more visible */
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

.canvas-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-dim);
    font-size: 1.1rem;
    pointer-events: none;
    opacity: 0.5;
}

/* Individual Floating Card */
.floating-card {
    position: absolute;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
    cursor: grab;
    user-select: none;
    max-width: 300px;
    /* initial scale animation */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: box-shadow 0.2s, background 0.2s;
    /* Prevent text selection while dragging */
    touch-action: none;
}

.floating-card:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
}

.floating-card .fc-name {
    font-weight: 700;
    color: #a78bfa;
    font-size: 0.85rem;
    margin-bottom: 5px;
    display: block;
}

.floating-card .fc-msg {
    font-size: 1rem;
    line-height: 1.4;
    word-break: break-word;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---------------------------------------------------
   Fixed Chat Widget (Bottom Right)
   --------------------------------------------------- */
.chat-widget {
    position: absolute;
    bottom: -20px;
    right: 20px;
    width: 350px;
    background: rgba(15, 15, 20, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /* Increased to ensure it sits above Unity canvas */
    pointer-events: auto;
    /* Ensure clicks register */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Collapsed state */
.chat-widget.collapsed {
    transform: translateY(calc(100% - 45px));
}

.chat-header {
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.chat-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
}

.toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.chat-widget.collapsed .toggle-icon {
    transform: rotate(180deg);
}

.chat-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 400px;
}

/* Chat Feed (Logs) */
.chat-feed {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column-reverse;
    /* Newest at bottom */
    gap: 12px;
    margin-bottom: 15px;
}

.chat-feed::-webkit-scrollbar {
    width: 4px;
}

.chat-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.chat-msg-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    animation: slideUpFade 0.3s ease-out;
}

.chat-msg-item .msg-name {
    font-size: 0.8rem;
    color: #a78bfa;
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}

.chat-msg-item .msg-text {
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.4;
    word-break: break-word;
}

@keyframes slideUpFade {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Chat Input Form */
.chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.siot-input-sm {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: all 0.2s;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.siot-input-sm:focus {
    outline: none;
    border-color: #8b5cf6;
    background: rgba(0, 0, 0, 0.7);
}

.chat-textarea {
    resize: none;
    min-height: 60px;
}

.chat-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    color: #e2e8f0;
    transition: all 0.2s;
}

.attach-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #a78bfa;
}

.image-preview-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-preview-container img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.5);
    display: block;
}

.remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-image-btn:hover {
    background: #ef4444;
}

/* Rendered Image in Feed and Cards */
.attached-image {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 0;
    /* Removing top margin since it's aligned horizontally */
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.fc-image {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.siot-btn-sm {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border: none;
    padding: 10px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.siot-btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .community-container {
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
    }

    .floating-canvas {
        height: 350px;
        border-radius: 12px 12px 0 0;
        border-bottom-width: 0;
    }

    .chat-widget {
        position: relative;
        width: 100%;
        right: auto;
        bottom: auto;
        border-radius: 0 0 12px 12px;
        transform: none !important;
        box-shadow: none;
    }

    .chat-widget.collapsed {
        transform: none !important;
    }

    .chat-widget .chat-body {
        transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
        height: 400px;
        overflow: hidden;
    }

    .chat-widget.collapsed .chat-body {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }
}

footer {
    position: relative;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
    /* 로고 색상을 활용한 넓은 그라데이션 배경 */
    background: linear-gradient(-45deg, #050505, #1a1a2e, #3b82f6, #8b5cf6);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    border-top: 1px solid var(--border);
}

/* 그라데이션이 움직이는 애니메이션 */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

/* 푸터 내부에 로고 재배치 (강조) */
.footer-logo {
    height: 50px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    /* 푸터 검정 배경에 맞게 화이트로 변경 */
    opacity: 0.8;
}

/* Light Mode Overrides for Footer */
html[data-theme="light"] footer {
    background: #888888;
    /* 50% 그레이 톤으로 어둡게 */
    animation: none;
    /* 그라데이션 애니메이션 비활성화 */
}

html[data-theme="light"] footer p {
    color: #ffffff;
    /* 가독성 높은 밝은 텍스트 */
}

/* --- Portfolio Specific Bento Item Overrides --- */
#portfolio-grid .bento-item {
    padding: 3px;
    /* 영상 콘텐츠 위주의 유튜브 카드는 여백 최소화 */
}

html[data-theme="light"] .footer-logo {
    filter: brightness(0) invert(1);
    /* 밝은 배경이어도 로고는 화이트로 유지 요청에 부합하도록 (필요시 none로 변경 가능하나 우선 화이트 유지) */
    opacity: 1;
}

/* Mobile */
/* ============================================================
   [RESPONSIVE GRID SYSTEM (Stepped Cascade)]
   ============================================================ */
/* 1. Default (Large Desktop) -> 12 Columns (6 Items/Row) */

/* 2. Small Desktop (Max 1600px) -> 8 Columns (4 Items/Row) */
@media (max-width: 1600px) {
    .bento-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* 3. Large Tablet / Laptop (Max 1400px) -> 6 Columns (3 Items/Row) */
@media (max-width: 1400px) {
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    #portfolio-grid .bento-item,
    #portfolio-grid .tall {
        grid-column: span 2;
    }

    #portfolio-grid .wide {
        grid-column: span 3;
        aspect-ratio: 21 / 9;
    }

    #portfolio-grid .bento-item.shorts {
        grid-column: span 1;
    }
}

/* 4. Tablet Portrait (Max 1000px) -> 4 Columns (2 Items/Row) */
@media (max-width: 1000px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    #portfolio-grid .bento-item,
    #portfolio-grid .tall {
        grid-column: span 2;
    }

    #portfolio-grid .wide {
        grid-column: span 4;
        aspect-ratio: 21 / 9;
    }

    #portfolio-grid .bento-item.shorts {
        grid-column: span 1;
    }
}

/* 5. Mobile Landscape (Max 768px) -> 2 Columns (1 Item/Row) */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 15px;
        width: 100%;
        box-sizing: border-box;
    }

    #portfolio-grid .bento-item,
    #portfolio-grid .wide,
    #portfolio-grid .tall {
        grid-column: span 2;
        grid-row: span 1;
        height: auto;
    }

    #portfolio-grid .bento-item.shorts {
        grid-column: span 1;
        aspect-ratio: 9 / 16;
    }

    .sandbox-box {
        height: 350px;
        margin-bottom: 40px;
    }

    h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .bg-number {
        font-size: 6rem;
        top: -20px;
        left: -10px;
    }
}

/* 6. Small Mobile (Max 600px) -> 2 Columns adjustments */
@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #portfolio-grid .bento-item.shorts {
        grid-column: span 1;
    }
}

/* ============================================================
   [SECTION TITLE STAGGERED ANIMATION]
   ============================================================ */

/* 1. 기본 상태 (숨김 및 위치 하향 조정) */
.section-title .bg-number,
.section-title .badge,
.section-title h2:not(.split-text) {
    opacity: 0;
    transform: translateY(40px);
    /* 아래에서 위로 올라오는 초기값 */
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* 배경 숫자만 왼쪽에서 들어오도록 초기값 변경 */
.section-title .bg-number {
    transform: translateX(-60px) translateY(0);
}

/* 2. 활성화 상태 (Active - 순차적 지연 시간 부여) */

/* [01단계] 배경 숫자: 가장 먼저 등장 */
.reveal.active .bg-number {
    opacity: 0.08;
    /* 투명도 8% */
    transform: translateX(0) translateY(0);
    transition-delay: 0s;
}

/* [02단계] 배지: 0.2초 뒤 등장 */
.reveal.active .badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* [03단계] 메인 타이틀: 0.4초 뒤 등장 */
.reveal.active h2:not(.split-text) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* 3. 사라질 때 (Exit - 지연 없이 즉시 사라짐) */
.reveal:not(.active) .bg-number,
.reveal:not(.active) .badge,
.reveal:not(.active) h2:not(.split-text) {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    transition-delay: 0s !important;
    /* 나갈 때는 순서 없이 동시에 */
}

/* --- 4. Text Resonance (Typography) --- */
/* 글자 하나하나에 적용될 스타일 */
.resonance-char {
    display: inline-block;
    opacity: 0;
    transform: scale(1.5);
    filter: blur(10px);
    will-change: opacity, transform, filter;
    /* 초기값은 투명/확대/블러 */
}

/* 애니메이션 정의 */
@keyframes textResonance {
    0% {
        opacity: 0;
        transform: scale(1.5);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* active 클래스가 붙으면 애니메이션 실행 */
.reveal.active .resonance-char {
    animation: textResonance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Unity UI Overlay System --- */
.ui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ui-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

.overlay-content {
    background: rgba(20, 20, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
}

.ui-overlay.active .overlay-content {
    transform: translateY(0);
}

.overlay-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.overlay-text {
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 30px;
}

.close-overlay-btn {
    background: var(--accent);
    border: none;
    padding: 10px 30px;
    color: white;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.close-overlay-btn:hover {
    transform: scale(1.05);
}

/* --- Mobile Virtual Controls --- */
#mobile-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1500;
    display: none;
    /* Shown via JS detection */
}

.virtual-joystick-zone {
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    touch-action: none;
}

.virtual-joystick-knob {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    /* Mobile styles overrides if needed */
}

/* --- Unity WebGL Loading Overlay --- */
#unity-canvas {
    width: 100%;
    height: 100%;
    background: #000 !important;
    /* Prevent white flash */
}

/* --- Unity WebGL Loading Overlay --- */
#unity-loading-overlay {
    position: absolute;
    /* Relative to webgl-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 !important;
    /* Force Black */
    /* Black background for the 3D void */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    /* On top of unity-canvas, but entire container is -1 (behind site) */
    pointer-events: none;
}



.loading-bar-container {
    width: 200px;
    height: 10px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto 10px auto;
    /* Added "auto" for horizontal centering */
}

#loading-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    /* Restored Gradient */
    transition: width 0.2s;
}

#loading-text {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

/* --- ShowRoom Card Styling --- */
.showroom-card {
    /* 3D Tilt Effect Base */
    transform-style: preserve-3d;
    transform: perspective(1000px);
    border-radius: 8px;
    /* 모서리 라운드 15px -> 8px 축소 */
    overflow: hidden;
    /* 라운딩 영역 밖 숨김 */
    transition: transform 0.1s ease-out;
    /* Smooth but fast for tracking */
}

/* Glare Effect Layer */
.showroom-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: 12px;
    mix-blend-mode: overlay;
    z-index: 2;
}

.showroom-card:hover::after {
    opacity: 1;
}

/* Content Layer (Pop-out) */
.showroom-overlay {
    transform: translateZ(30px);
    /* Floating content */
    /* pointer-events: none; Ensure clicks pass if needed */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 0%,
            transparent 60%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align text to bottom */
    padding-bottom: 30px;
    /* Space from bottom */
    transition: background 0.4s ease;
}

.showroom-card:hover .showroom-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.6) 0%,
            transparent 60%);
    /* Slightly lighter on hover */
}

.showroom-text {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 4px;
    /* Wide tracking for cinematic feel */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.showroom-card:hover .showroom-text {
    opacity: 1;
    transform: translateY(-5px);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    /* Glowing text */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .showroom-text {
        font-size: 0.8rem;
        /* Reduced by half from 1.6rem */
    }
}

/* --- YouTube Shorts Grid (Resized to 50%) --- */
#shorts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding: 0 5px;
    max-width: 50%;
    /* 50% Size */
    margin: 40px auto;
    /* Center Align */
}

/* --- Work Section Promotional Text --- */
.work-promo-text {
    text-align: center;
    max-width: 800px;
    margin: -40px auto 50px;
    /* Negative margin to pull it up closer to title */
    color: var(--text-dim);
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 300;
}

/* ============================================================
   [Trusted By / Marquee Section]
   ============================================================ */
.trusted-section {
    padding: 60px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle separator */
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
}

.trusted-title {
    text-align: center;
    font-size: 1rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 40px;
    font-weight: 500;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    /* Optional: add mask image for faded edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    gap: 4rem;
    /* Space between items */
    padding-right: 4rem;
    /* Match gap for seamless loop */
    animation: marquee-scroll 35s linear infinite;
    align-items: center;
    white-space: nowrap;
}

/* Pause animation on hover */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* Text style simulating logos for now */
.marquee-item {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    transition: color 0.3s ease;
    cursor: default;
}

.marquee-item:hover {
    color: rgba(255, 255, 255, 0.9);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Scroll exactly half to loop duplicate set */
    }
}

@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 25s;
        /* Faster on mobile */
        gap: 2.5rem;
        padding-right: 2.5rem;
    }

    .marquee-item {
        font-size: 1rem;
    }
}

/* --- About Us Bento Grid --- */
.about-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(230px, auto);
    /* 높이 최소 기준 확보 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bento-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    /* 50% 수준으로 모서리 라운드 줄임 */
    padding: 30px;
    /* 글자 내용이 잘리지 않도록 내부 여백을 약간 줄여 공간 확보 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
    position: relative;
}

.bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.bento-item:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(79, 70, 229, 0.2);
}

.bento-item:hover::before {
    opacity: 1;
}

.bento-item>* {
    position: relative;
    z-index: 1;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes creditRoll {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.bento-mission {
    grid-column: span 4;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* 다른 CSS 속성 유지 */
    padding: 40px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

/* 켄 번즈 효과용 가상 배경 레이어 - 계속 보이게 유지 */
.bento-mission::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 그라데이션 오버레이를 조금 연하게(0.5~0.8) 조정하여 상시 이미지가 잘 보이게 함 */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%), url('assets/about.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    /* 부모 클래스의 opacity: 0 무시하고 항시 노출 */
    opacity: 1 !important;
    /* 부드러운 스케일 변환을 무한히 반복 */
    animation: kenBurns 20s ease-in-out infinite alternate;
}

/* 텍스트 요소들을 배경보다 위로 띄움 */
.bento-mission>* {
    position: relative;
    z-index: 1;
}

/* 텍스트 컨테이너(엔딩 크레딧) */
.credit-roll {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 15초 주기로 아래에서 위로 무한 스크롤 */
    animation: creditRoll 20s linear infinite;
}

.bento-mission h3 {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bento-mission p {
    font-size: 1.1rem;
    color: var(--text-dim);
}

.bento-service {
    grid-column: span 1;
    text-align: left;
}

.bento-icon {
    font-size: 1.5rem;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
    color: var(--text);
}

.bento-icon svg {
    width: 24px;
    height: 24px;
}

.bento-item:hover .bento-icon {
    transform: scale(1.1) rotate(5deg);
}

.bento-service h4 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 600;
    word-break: keep-all;
}

.bento-service p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: keep-all;
}

/* Light Mode Overrides for Bento */
html[data-theme="light"] .bento-item {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .bento-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(79, 70, 229, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .bento-mission {
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .bento-mission::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(243, 244, 246, 0.95) 100%), url('assets/about.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html[data-theme="light"] .bento-mission h3 {
    background: linear-gradient(to right, #111827, #4b5563);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .bento-icon {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text);
}

/* Responsive */
@media (max-width: 1024px) {
    .bento-service {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .bento-mission h3 {
        font-size: 1.4rem;
    }

    .bento-item {
        padding: 30px 20px;
    }

    .about-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-mission,
    .bento-service {
        grid-column: span 1;
    }
}

/* --- Mobile Fix for Shorts Grid --- */
@media (max-width: 768px) {
    #shorts-grid {
        max-width: 100%;
        /* Full width on mobile */
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns for visibility */
        padding: 0 15px;
        /* Safety padding */
    }
}

/* ============================================================
   [AI Chat UI]
   ============================================================ */
.ai-chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 68px;
    /* Slightly larger for presence */
    height: 68px;
    /* Luxurious Gradient Background */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px);
    /* Glowing Border */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    z-index: 9000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Base Shadow + Glow Animation */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: btn-pulse 3s infinite ease-in-out;
    overflow: hidden;
    /* For shine effect */
}

/* Sparkle/Shine Effect */
.ai-chat-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    animation: shine-sweep 5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

@keyframes btn-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 20px 0 rgba(59, 130, 246, 0.6);
        border-color: rgba(255, 255, 255, 0.7);
        transform: scale(1.02);
    }
}

@keyframes shine-sweep {
    0% {
        transform: translateX(-150%) translateY(-150%) rotate(45deg);
    }

    20% {
        transform: translateX(150%) translateY(150%) rotate(45deg);
    }

    /* Fast swipe */
    100% {
        transform: translateX(150%) translateY(150%) rotate(45deg);
    }

    /* Wait */
}

.ai-chat-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.ai-chat-window {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 350px;
    height: 500px;
    background: rgba(10, 10, 12, 0.85);
    /* Dark Glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ai-chat-window.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
}

.chat-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.chat-title::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #10b981;
    /* Online green */
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.close-chat-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.close-chat-btn:hover {
    color: white;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    word-break: keep-all;
}

.message.bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: #e4e4e7;
    border-bottom-left-radius: 2px;
}

.message.user {
    align-self: flex-end;
    background: var(--accent);
    /* Uses CSS variable gradient */
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 10px 15px;
    color: white;
    font-family: inherit;
}

#chat-input:focus {
    border-color: rgba(59, 130, 246, 0.5);
}

#send-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0 5px;
    color: white;
    opacity: 0.8;
}

#send-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* --- Bulletin Board / Guestbook Styles --- */
#guestbook {
    padding-top: 60px;
    /* Adjust spacing */
}

.bulletin-board-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Form Card */
.board-form-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 30px;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.board-form-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.input-group {
    position: relative;
}

#board-name,
#board-message {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#board-name:focus,
#board-message:focus {
    border-color: var(--accent);
    /* Fallback if var not works in focus, usually ignores gradient */
    border-color: #3b82f6;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#board-message {
    height: 100px;
    resize: none;
}

.board-submit-btn {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, opacity 0.2s;
}

.board-submit-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.board-submit-btn:active {
    transform: scale(0.95);
}

.board-status {
    font-size: 0.9rem;
    text-align: right;
    min-height: 1.4em;
    margin: 0;
}

.board-status.success {
    color: #10b981;
}

.board-status.error {
    color: #ef4444;
}

/* Message List */
.board-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.board-item {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    /* Only right side or soft radius */
    padding: 20px;
    animation: slideIn 0.5s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.board-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #3b82f6;
}

.board-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.board-author {
    font-weight: 700;
    color: #fff;
}

.board-date {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.board-content {
    color: var(--text);
    line-height: 1.6;
    font-size: 0.95rem;
    white-space: pre-wrap;
    /* Preserve newlines */
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Cinematic Loading Overlay --- */
#unity-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    /* Fallback color */
    z-index: 100;
    /* Ensure on top */
    display: flex;
    /* Center content */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Crop video if needed */
}

#loading-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the screen */
    z-index: 0;
    /* Behind content */
    opacity: 0.6;
    /* Slight dim for text readability */
}

/* Ensure content sits on top */
.loading-content {
    position: relative;

    z-index: 10;
}

/* --- Multilingual Welcome Section (Relocated) --- */
.welcome-section {
    position: relative;
    width: 100%;
    padding: 100px 20px 0px;
    /* Removed bottom padding entirely */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 10;
}

.welcome-content {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    letter-spacing: -0.02em;
    /* Tightened from 0.1em */
}

/* Light Mode Overrides for Welcome Text */
html[data-theme="light"] .welcome-content {
    color: var(--text);
    /* 진한 다크 그레이로 변경 */
}

.welcome-content {
    text-align: center;
    max-width: 800px;
    line-height: 1.4;
    /* Slightly tighter line height */
    animation: fadeInUp 1.5s ease-out;
    word-break: keep-all;
    /* Prevent awkward word breaks */
    padding: 0 20px;
    /* Add padding for mobile safety */
}

@media (max-width: 768px) {
    .nav-right {
        gap: 12px;
        /* Tighter navigation on mobile */
    }

    .welcome-content {
        font-size: 0.75rem;
        /* Reduced to ~70% from 1rem */
        line-height: 1.25;
        letter-spacing: -0.03em;
        /* Even tighter for mobile */
        padding: 0 10px;
        /* Reduced side padding */
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- YouTube Video Facade (Performance Optimization) --- */
.video-facade {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    z-index: 20;
    /* Ensure clickable above all else */
    visibility: visible !important;
    /* Force visibility */
    pointer-events: auto !important;
    /* Force clickability */
    transform: translateZ(0);
    /* Force GPU layer to fix some mobile z-index bugs */
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    opacity: 0.8;
}

.video-facade:hover img {
    transform: scale(1.05);
    opacity: 1 !important;
    filter: brightness(1.1);
}

.play-button {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 30px;
    /* Smaller size */
    height: 30px;
    background: var(--accent);
    /* SIOT brand gradient */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 51;
    /* Above facade */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    /* Let clicks pass through to container */
}

.play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    /* Scaled down triangle */
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
    /* Center visual alignment */
}

.video-facade:hover .play-button {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    /* Blue glow */
}

/* Explicit iframe sizing when active */
.video-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- YouTube Video Description --- */
.bento-item.has-description {
    aspect-ratio: auto !important;
    height: auto !important;
}

.bento-item.has-description .video-facade {
    height: auto !important;
    aspect-ratio: 16 / 9;
}

.video-description {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 20px;
    background: rgba(20, 20, 25, 0.95);
    color: var(--text-dim);
    font-size: 0.7rem;
    /* 기조 크기의 약 70% 수준으로 조정 */
    line-height: 1.6;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    border-top: 1px solid transparent;
}

/* Light mode overrides for video description */
html[data-theme="light"] .video-description {
    background: rgba(250, 250, 250, 0.98);
    color: var(--text);
    border-top: 1px solid var(--border);
}

.video-description.show {
    max-height: 500px;
    opacity: 1;
    padding: 20px;
    border-top: 1px solid var(--border);
}

.video-description p {
    margin: 0;
    padding-bottom: 10px;
}

/* Load More Button */
.load-more {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
    display: block;
    /* Ensure it respects margins */
}

.load-more:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* --- Random Inspiration Feature --- */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.5);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.7);
}

.floating-btn .tooltip {
    position: absolute;
    right: 70px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.floating-btn:hover .tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}


.modal-content {
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(20px);
    width: 90%;
    max-width: 850px;
    /* Reduced to fit notebook screens */
    border-radius: 10px;
    padding: 30px;
    position: relative;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.random-modal-title {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.2s;
}

/* Light Mode Overrides for Random Inspiration Tooltip & Modal */
html[data-theme="light"] .floating-btn {
    background: #4f46e5;
    /* 엑센트 컬러 유지 */
}

html[data-theme="light"] .floating-btn .tooltip {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .modal-overlay {
    background: rgba(255, 255, 255, 0.85);
    /* 밝은 반투명 배경 */
}

html[data-theme="light"] .modal-content {
    background: rgba(250, 250, 250, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text);
}

html[data-theme="light"] .close-modal {
    color: var(--text);
}

.close-modal:hover {
    color: var(--accent);
    transform: scale(1.1) rotate(90deg);
    opacity: 1;
}

#random-display-area {
    margin-bottom: 20px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Content Types */
.random-text {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 300;
    color: #fff;
    font-style: italic;
    margin-bottom: 20px;
}

/* Light Mode Overrides for Random Text */
html[data-theme="light"] .random-text {
    color: var(--text);
    /* 다크 그레이 적용 */
}

.random-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.random-video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.random-video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

.random-caption {
    margin-top: 15px;
    color: var(--text-dim);
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.reroll-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    margin-top: 10px;
}

.reroll-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

/* Animation for dice roll */
@keyframes shake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/* Portrait + Text Layout */
.random-content-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.random-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.random-text.small {
    font-size: 1.2rem;
    max-width: 100%;
}

@media (min-width: 600px) {
    .random-content-split {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 0 30px;
        justify-content: center;
    }

    .random-portrait {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
        margin-right: 20px;
    }

    .random-text.small {
        font-size: 1.4rem;
        flex: 1;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================================================
   [FOCUS OUT EFFECT :has(:hover)]
   ============================================================ */

/* 포트폴리오(Our Works) 벤토 아이템 포커스 아웃 */
.bento-grid:has(.bento-item:hover) .bento-item:not(:hover) {
    opacity: 0.3;
    filter: grayscale(80%) brightness(0.7);
    transform: scale(0.98);
}

/* 쇼룸(Experience The Virtual) 카드 포커스 아웃 */
.showroom-flex:has(.showroom-card:hover) .showroom-card:not(:hover) {
    opacity: 0.3;
    filter: grayscale(80%) brightness(0.7);
    transform: scale(0.98);
}

/* [LANG SELECTOR] */
.lang-selector {
    background: rgba(30, 30, 30, 0.5);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    margin-right: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.lang-selector:hover {
    border-color: var(--accent);
}

html[data-theme="light"] .lang-selector {
    background: rgba(220, 220, 220, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.2);
}


/* --- Mobile Hamburger Menu --- */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    /* Above mobile menu */
    margin-left: auto;
}

.mobile-menu-btn svg {
    transition: transform 0.3s ease;
}

.mobile-menu-btn .line-top,
.mobile-menu-btn .line-mid,
.mobile-menu-btn .line-bot {
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-btn.active .line-top {
    transform: translateY(6px) rotate(45deg);
}

.mobile-menu-btn.active .line-mid {
    opacity: 0;
}

.mobile-menu-btn.active .line-bot {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background: rgba(15, 15, 15, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 40px;
        gap: 25px;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    }

    html[data-theme="light"] .nav-right {
        background: rgba(250, 250, 250, 0.98);
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    }

    .nav-right.active {
        right: 0;
    }

    .nav-right a.nav-link {
        font-size: 1.5rem;
        font-weight: 700;
        width: 100%;
    }

    .lang-selector {
        margin-top: 10px;
        margin-right: 0;
        font-size: 1.1rem;
        padding: 8px 16px;
        width: 80%;
    }
}
/* --- Direct Contact Form & Footer Updates --- */
.contact-wrapper {
    display: flex;
    gap: 40px;
    align-items: stretch;
}
.contact-info {
    flex: 1; /* Less wide */
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-form-container {
    flex: 2; /* takes more space */
    max-width: 700px; /* Let it be wider */
    background: rgba(20, 20, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    backdrop-filter: blur(10px);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.form-group label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin-bottom: 2px;
}
.form-group input, .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04); /* Modern transparent */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 12px 15px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}
html[data-theme="light"] .contact-form-container {
    background: rgba(240, 240, 240, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.2);
    color: #000;
}
.submit-btn {
    width: 100%;
    justify-content: center;
    font-size: 1.1rem;
    padding: 15px;
}
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
}

/* --- Footer Updates --- */
.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 5% !important;
    background: rgba(10, 10, 12, 0.8);
    margin-top: 50px;
}
html[data-theme="light"] .site-footer {
    border-top-color: rgba(0, 0, 0, 0.1);
    background: rgba(250, 250, 252, 0.8);
}
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto 30px;
    gap: 30px;
}
.footer-info {
    text-align: left;
}
.footer-info p {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 5px 0;
    line-height: 1.5;
}
.footer-links {
    display: flex;
    gap: 20px;
}
.legal-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.legal-link:hover {
    color: var(--accent);
}
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}
html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
    .footer-links {
        margin-top: 20px;
    }
}


/* --- Contact Form Row Layout --- */
.form-row {
    display: flex;
    gap: 20px;
}
.form-row .form-group.name-group {
    flex: 0 0 160px; /* Make Name field narrower */
}
.form-row .form-group.email-group {
    flex: 1; /* Email field takes all remaining width */
}
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}


/* --- About Us Modern Layout (Trust & Creative) --- */
.about-modern-layout {
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1400px;
    margin: 60px auto;
}

/* Left: Trust & Information */
.about-trust-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.trust-title {
    font-size: 1.8rem;
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    margin: 0;
}

.trust-desc p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-dim);
    font-weight: 400;
    word-break: keep-all;
    margin: 0;
}

.trust-desc strong {
    color: var(--text);
    font-weight: 600;
}

.trust-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.highlight-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Right: Creative Visual */
.about-creative-visual {
    flex: 1.2;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0c;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.creative-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.creative-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}

.about-creative-visual:hover .creative-img {
    transform: scale(1.05);
}

.creative-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.creative-marquee-container {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
}

.creative-marquee {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

.creative-marquee span {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 2px;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.33%); }
}

.creative-slogan {
    position: absolute;
    bottom: 25px;
    left: 30px;
    right: 30px;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0;
    z-index: 2;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Responsive */
@media (max-width: 968px) {
    .about-modern-layout {
        flex-direction: column;
        gap: 40px;
    }
    .about-creative-visual {
        width: 100%;
    }
}

/* Light Mode Overrides */
html[data-theme="light"] .trust-title {
    color: #111;
}
html[data-theme="light"] .trust-desc p {
    color: #444;
}
html[data-theme="light"] .trust-desc strong {
    color: #000;
}
html[data-theme="light"] .highlight-item {
    background: #f0f0f0;
    border-color: #ddd;
    color: #333;
}
html[data-theme="light"] .highlight-item:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

/* Appended Service Card Grid CSS */
.about-creative-visual {
    display: flex !important;
    flex-direction: column !important;
}

.creative-image-wrapper {
    aspect-ratio: 16/9 !important; /* Limit height */
    position: relative !important;
    flex-shrink: 0 !important;
}

.service-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 30px;
    background: transparent;
}

.service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 16px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
}

.service-card h4 {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.service-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
    word-break: keep-all;
}

/* Light Mode Overrides for Service Grid */
html[data-theme="light"] .service-card {
    background: #f8f8f8;
    border-color: #eee;
}
html[data-theme="light"] .service-card:hover {
    background: #f0f0f0;
}
html[data-theme="light"] .service-card h4 {
    color: #111;
}
html[data-theme="light"] .service-card p {
    color: #555;
}

/* =========================================
   Light Mode Overrides for New About Section
   ========================================= */

/* Top Trust Info */
html[data-theme="light"] .tool-list {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #444 !important;
}

html[data-theme="light"] .tool-list span {
    color: #555 !important;
}

/* Right Marquee Text */
html[data-theme="light"] .creative-marquee span {
    color: rgba(0, 0, 0, 0.15) !important;
}

/* Right Slogan Text */
html[data-theme="light"] .creative-slogan {
    color: #fff !important; /* Keep it white since it's on a dark image overlay */
    text-shadow: 0 2px 5px rgba(0,0,0,0.8) !important;
}

/* Service Cards beneath Image */
html[data-theme="light"] .service-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .service-card:hover {
    background: #fdfdfd !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .service-card h4 {
    color: #111 !important;
}

html[data-theme="light"] .service-card p {
    color: #555 !important;
}

/* =========================================
   Light Mode Overrides for Trusted Section
   ========================================= */

html[data-theme="light"] .trusted-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.03)) !important;
    border-top-color: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .trusted-title {
    color: #777 !important;
}

html[data-theme="light"] .marquee-item {
    color: #555 !important;
}

/* Update version of CSS */

/* =========================================
   Trusted By Card Layout
   ========================================= */

.trusted-section {
    padding: 20px 20px 80px 20px;
    display: flex;
    justify-content: center;
    border-top: none; /* override previous full width border */
    background: none; /* override previous full width gradient */
}

.trusted-card {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Light mode overrides for the card */
html[data-theme="light"] .trusted-section {
    background: none !important;
    border-top-color: transparent !important;
}

html[data-theme="light"] .trusted-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* =========================================
   Width Alignment Fix for Trusted By Card
   ========================================= */
.trusted-section {
    padding: 20px 5% 80px 5% !important; /* Match About section horizontal padding */
    max-width: 1400px !important;
    margin: 0 auto !important;
}
.trusted-card {
    max-width: 100% !important; /* Be bounded by trusted-section's padding */
}

/* =========================================
   Light Mode Color Refinements
   ========================================= */

/* Fix Contact Form Input Visibility & Placeholder */
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #111 !important;
}

html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form textarea:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* Fix Live Floating Chat Input Visibility */
html[data-theme="light"] #chat-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #111 !important;
}

html[data-theme="light"] #chat-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] #chat-input:focus {
    border-color: #4f46e5 !important;
}

/* Fix Service Cards Background Color below About Image */
/* To make them stand out from the bright white body background */
html[data-theme="light"] .service-card {
    background: #f4f5f7 !important; /* Soft, elegant light gray */
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .service-card:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================
   Light Mode Minor Fixes 3
   ========================================= */

/* Contact info and Marquee fonts to sans-serif */
html[data-theme="light"] .marquee-item,
html[data-theme="light"] .contact-label,
html[data-theme="light"] .contact-value,
html[data-theme="light"] .location-text {
    font-family: 'Pretendard', sans-serif !important;
}

/* Service Card exact light gray background */
html[data-theme="light"] .service-card {
    background: #e8e8ea !important; /* brighter gray */
}

html[data-theme="light"] .service-card:hover {
    background: #f4f4f4 !important;
}

/* Chat feed box exact light gray background */
html[data-theme="light"] .chat-feed,
html[data-theme="light"] .chat-messages,
html[data-theme="light"] .chat-body {
    background: #f0f0f2 !important;
}

/* =========================================
   Light Mode Minor Fixes 4
   ========================================= */

/* Fix Live Chat Form Inputs (.siot-input-sm) background & text color */
html[data-theme="light"] .siot-input-sm {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #111 !important;
}

html[data-theme="light"] .siot-input-sm::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .siot-input-sm:focus {
    background: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* Fix About Us 4 Service Cards Container Background */
/* This container was heavily hardcoded to #0a0a0c (very dark) */
html[data-theme="light"] .about-creative-visual {
    background: #ffffff !important; /* Pure white so light-gray cards pop out */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================
   Light Mode Minor Fixes 5 (Fonts)
   ========================================= */

/* Top Navigation Font to Gothic in Light Mode */
html[data-theme="light"] .nav-link {
    font-family: 'Pretendard', sans-serif !important;
}

/* About Us Main Slogan ("2000?꾨???異뺤쟻??..") Font to Gothic in Light Mode */
html[data-theme="light"] .trust-title,
html[data-theme="light"] .trust-title span {
    font-family: 'Pretendard', sans-serif !important;
}

/* =========================================
   Light Mode Minor Fixes 6 (Footer)
   ========================================= */

/* Fix Footer Visibility */
html[data-theme="light"] .site-footer {
    background: #f4f5f7 !important; /* Soft light gray to separate from pure white body */
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .footer-info p,
html[data-theme="light"] .footer-links .legal-link,
html[data-theme="light"] .footer-bottom p,
html[data-theme="light"] #footer-attribution {
    color: #555555 !important;
}

/* Make sure the logo is visible (darkened) on light background */
html[data-theme="light"] .footer-info img {
    filter: invert(1) brightness(0.2) !important;
}

/* Darker borders for separation */
html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
   Light Mode Minor Fixes 7 (Footer Logo Revert)
   ========================================= */

/* Remove invert filter to show the original logo colors in light mode */
html[data-theme="light"] .footer-logo,
html[data-theme="light"] .footer-info img {
    filter: none !important;
}

/* =========================================
   Optimization Phase 1: Inlined Styles Moved to CSS
   ========================================= */

.hero-slogan {
    color: #a1a1aa;
    font-size: 1.1rem;
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.tool-list {
    display: inline-block;
    margin: 15px 0;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    line-height: 1.8;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

.tool-caption {
    display: block;
    margin-top: 10px;
    font-size: 80%;
    line-height: 1.5;
    font-family: 'Pretendard', sans-serif;
    color: var(--text-dim);
}