/* 반응형 레이아웃 공통 스타일 */

/* 모바일에서는 배경 조정 */
@media (max-width: 1199px) {
    .layout-wrapper {
        max-width: none;
        margin: 0;
        box-shadow: none;
    }
}

/* 전체 레이아웃 래퍼 */
.layout-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    background-color: #f8f9fa;
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 좌측 소개 섹션 (데스크톱에서만 표시) */
.layout-left-section {
    display: none; /* 기본적으로 숨김 (모바일) */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-right: 1px solid #e9ecef;
}

/* 우측 앱 섹션 */
.layout-right-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
    position: relative;
}

/* 데스크톱에서의 반응형 레이아웃 */
@media (min-width: 1200px) {
    body {
        background-color: white !important;
        background: white !important;
    }
    
    html {
        background-color: white !important;
        background: white !important;
    }
    
    .layout-wrapper {
        background-color: #f8f9fa;
        border-radius: 0;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    }
    
    .layout-left-section {
        display: flex;
        flex: 1;
        max-width: 600px;
        min-width: 500px;
        background-color: #ffffff;
    }
    
    .layout-right-section {
        flex: 0 0 450px;
        padding: 20px;
        background-color: white !important;
    }
}

/* 좌측 섹션 스타일링 */
.intro-logo {
    width: 120px;
    height: auto;
    margin-bottom: 40px;
    object-fit: contain;
}

.intro-logo-text {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.intro-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
    margin-bottom: 16px;
}

.intro-subtitle {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
    margin-bottom: 24px;
}

.intro-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 40px;
}

.intro-contact {
    background: linear-gradient(135deg, #ff3b30, #ff6b5a);
    border-radius: 16px;
    padding: 20px 24px;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.intro-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 59, 48, 0.3);
    color: white;
    text-decoration: none;
}

.intro-contact-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

.intro-contact-number {
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}