/* 기본 리셋 및 변수 */
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --accent-color: #ffe66d;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.15);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important; /* 모든 요소에 대해 박스 사이징 강제 */
}

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* 가로 스크롤 완전 차단 */
    position: relative;
}

body {
    font-family: 'Segoe UI', 'Noto Sans JP', 'Apple SD Gothic Neo', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 회원 전용(user-area) 레이아웃에서는
   - body 전체 스크롤을 막고
   - main 내부에서만 스크롤이 발생하도록 처리 */
.user-area {
    overflow-y: auto; /* 스크롤 허용 (footer 고정 해제) */
    overflow-x: hidden;
}

/* 회원 전용 페이지에서 footer가 일반 문서 흐름을 따르도록 설정 (고정 해제) */
.user-area .footer {
    position: relative !important;
    bottom: auto !important;
    margin-top: 0 !important; /* flex 레이아웃에서 자동 하단 배치 제거 */
}

main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 네비게이션 바 */
.navbar {
    background: var(--bg-white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    min-height: 60px;
    width: 100%;
}

/* 헤더 및 주요 버튼/링크의 포커스 표시(테두리, 글로우) 절대 금지 */
.navbar-brand,
.app-launcher-btn,
.hamburger-btn,
.app-launcher-close,
.desktop-menu li a,
.app-item,
button, 
a {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.navbar-brand:focus,
.app-launcher-btn:focus,
.hamburger-btn:focus,
.app-launcher-close:focus,
.desktop-menu li a:focus,
.app-item:focus,
.navbar-brand:focus-visible,
.app-launcher-btn:focus-visible,
.hamburger-btn:focus-visible,
.app-launcher-close:focus-visible,
.desktop-menu li a:focus-visible,
.app-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
    min-height: 60px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    line-height: 1;
    height: 100%;
    margin-right: 15px;
}

.navbar-brand:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.navbar-brand i {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    line-height: 1;
}

.logo-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 앱 런처 (Google 스타일 서비스 메뉴) */
.navbar-brand-wrapper {
    display: flex;
    align-items: center;
    gap: 2px; /* 간격을 좁혀 로고에 더 붙게 설정 */
}

.app-launcher {
    position: relative;
    display: flex;
    align-items: center;
}

.app-launcher-btn {
    background: none;
    border: none;
    padding: 5px; /* 여백 축소로 거리 단축 */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .app-launcher {
        margin-right: auto; /* PC에서 아이콘 오른쪽을 밀어서 메뉴를 끝으로 보냄 */
    }
}

@media (max-width: 1023px) {
    .app-launcher {
        margin-left: auto; /* 모바일에서 로고로부터 멀어져 오른쪽 끝으로 이동 */
        margin-right: 5px; /* 햄버거 버튼과 5px 간격 */
    }
    
    .app-launcher-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 280px !important; /* 모바일에서 너비 축소 */
        max-width: calc(100vw - 20px) !important; /* 화면 너비를 넘지 않도록 제한 */
    }
}

.app-launcher-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

.app-launcher-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    width: 340px; /* 여백을 위해 살짝 넓힘 */
    background: #fff;
    border-radius: 24px; /* 더 둥근 모서리로 현대적인 SaaS 느낌 강조 */
    padding: 30px 20px 20px; /* 내부 여백 최적화 */
    display: none;
    z-index: 2000;
    
    /* 1. 테두리: 연한 민트 계열의 아주 낮은 불투명도 */
    border: 1px solid rgba(78, 205, 196, 0.25) !important;
    
    /* 2. 그림자: 넓은 블러와 낮은 농도로 부드럽게 떠 있는 효과(Elevation) */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), 
                0 10px 20px rgba(78, 205, 196, 0.04) !important;
    
    /* 3. 배경 블러: 뒷 배경이 살짝 비치는 효과로 고급감 추가 */
    backdrop-filter: blur(10px);
}

.app-launcher-close {
    position: absolute;
    top: 15px; /* 위치 미세 조정 */
    right: 15px;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: all 0.2s;
    z-index: 2001;
    opacity: 0.5; /* 기본 투명도 낮춤 */
}

.app-launcher-close:hover {
    opacity: 1;
    color: var(--secondary-color); /* 호버 시 민트색으로 반응 */
}

.app-launcher-dropdown.show {
    display: block;
    animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.app-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.app-item {
    position: relative; /* 마우스 오버 시 전체 텍스트의 기준점 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 5px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.2s ease;
    text-align: center;
    height: 100%; /* 고정된 높이감 유지 */
    min-width: 0; /* 텍스트 길이에 따라 늘어나는 것 방지 */
}

.app-item:hover {
    background: #f8f9fa;
    transform: translateY(-2px); /* 살짝 올라가는 느낌 추가 */
    z-index: 10;
}

.app-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.app-item:hover .app-icon {
    transform: scale(1.1);
}

.app-title {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... 처리 */
    margin-top: 8px;
    padding: 0 5px;
    transition: all 0.2s ease;
}

/* 마우스 오버 상태: 툴팁 형태로 텍스트 전체 노출 */
.app-item:hover .app-title {
    position: absolute;
    top: 100%; /* 기본은 아래쪽 */
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    white-space: normal;
    overflow: visible;
    background: #fff;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--primary-color);
    pointer-events: none;
    margin-top: 5px;
    animation: tooltipFadeIn 0.2s ease-out;
}

/* 마지막 줄 아이템은 툴팁을 위로 띄움 (박스 하단 잘림 방지) */
.app-item:nth-last-child(-n+3):hover .app-title {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 10px;
}

/* 1열(왼쪽): 툴팁을 왼쪽 정렬 */
.app-launcher-grid .app-item:nth-of-type(3n+1):hover .app-title {
    left: 0 !important;
    transform: none !important;
}

/* 3열(오른쪽): 툴팁을 오른쪽 정렬 */
.app-launcher-grid .app-item:nth-of-type(3n):hover .app-title {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translate(-50%, 5px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* 양 끝 열 애니메이션 보정 */
.app-launcher-grid .app-item:nth-of-type(3n+1):hover .app-title,
.app-launcher-grid .app-item:nth-of-type(3n):hover .app-title {
    animation: tooltipFadeInSimple 0.2s ease-out;
}

@keyframes tooltipFadeInSimple {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-launcher-empty {
    grid-column: span 3;
    padding: 30px 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* 모바일 대응 */
@media (max-width: 576px) {
    .app-launcher-dropdown {
        position: fixed;
        top: 65px;
        left: auto;
        right: 15px;
        width: 280px; /* 폭을 슬림하게 조정 */
        max-width: calc(100vw - 30px);
        padding: 25px 15px 15px;
    }

    /* 모바일 툴팁 폭 미세 조정 */
    .app-item:hover .app-title {
        width: 140px;
    }
}


/* 데스크톱 메뉴 */
.desktop-menu {
    display: none;
    list-style: none;
    gap: 30px;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100%;
}

.desktop-menu li {
    display: flex;
    align-items: center;
    height: 100%;
}

.desktop-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    line-height: 1.5;
    height: 100%;
}

.desktop-menu li a:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

.desktop-menu li a i {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    line-height: 1;
}

.desktop-menu li a span {
    display: flex;
    align-items: center;
    line-height: 1.5;
}

/* 햄버거 버튼 */
.hamburger-btn {
    display: none; /* 기본적으로 숨김 (모바일에서만 표시) */
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-dark);
    cursor: pointer;
    padding: 8px;
    transition: var(--transition);
}

.hamburger-btn:hover {
    color: var(--primary-color);
}

/* 모바일 메뉴 오버레이 */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden; /* 오버레이 자체의 가로 스크롤 차단 */
}

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

.mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 가로 흔들림 방지 */
    touch-action: pan-y; /* 수직 스크롤만 허용 (가로 스와이프 간섭 방지) */
}

.mobile-menu-overlay.active .mobile-menu {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--bg-light);
}

.mobile-menu-header .navbar-brand {
    margin-right: 0; /* 헤더 내 여백 제거 */
    width: auto;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dark);
    cursor: pointer;
    padding: 8px;
    transition: var(--transition);
}

.close-btn:hover {
    color: var(--primary-color);
}

.mobile-menu-list {
    list-style: none;
    padding: 20px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* 리스트 영역 가로 스크롤 차단 */
}

.mobile-menu-list * {
    max-width: 100%; /* 모든 자식 요소가 부모 너비를 넘지 못하게 제한 */
    box-sizing: border-box;
}

.mobile-menu-list li {
    border-bottom: 1px solid var(--bg-light);
}

/* 모바일 메뉴 내의 회원 전용 메뉴 항목 스타일 통일 */
.mobile-menu-list .user-menu-item {
    border-left: none;
    border-bottom: 1px solid var(--bg-light);
    padding: 18px 20px;
    width: 100%;
    word-break: break-all; /* 긴 텍스트(계좌번호 등) 줄바꿈 처리 */
}

.mobile-menu-list .user-menu-item.active {
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.mobile-menu-list .user-menu-divider {
    margin: 10px 20px;
}

.mobile-menu-list li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.mobile-menu-list li a:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

.mobile-menu-list li a i {
    font-size: 1.3rem;
    width: 24px;
}

.mobile-menu-list .mobile-menu-divider {
    border-bottom: 2px solid #e0e0e0;
    margin: 10px 0;
    padding: 0;
    height: 0;
}

.mobile-menu-list .mobile-menu-divider:last-child {
    border-bottom: none;
}

/* HERO 섹션 */
.hero-section {
    position: relative;
    min-height: 60vh; /* 원래의 넉넉한 높이로 복구 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px 0 30px 0; /* 원래의 넉넉한 여백으로 복구 */
}

/* --- 히어로 섹션 계절 테마 스타일 --- */
.season-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* 1. 봄 (개나리 꽃잎) */
.petal {
    position: absolute;
    background: #FFEB3B; /* 개나리 노란색 */
    border-radius: 150% 0 150% 0;
    width: 12px;
    height: 12px;
    opacity: 0.7;
    animation: petalFall 10s linear infinite;
}

@keyframes petalFall {
    0% { transform: translate(0, -10%) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translate(100vw, 110%) rotate(720deg); opacity: 0; }
}

.season-spring .petal:nth-child(odd) { background: #FFEE58; }
.season-spring .petal:nth-child(3n) { animation-duration: 12s; }
.season-spring .petal:nth-child(2n) { animation-duration: 8s; }

/* 2. 여름 (파도 효과) */
.ocean {
    height: 150px; /* 파도 영역 높이 */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
}

.wave {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-31.8z' fill='%23ffffff'/%3E%3C/svg%3E");
    position: absolute;
    width: 200%;
    height: 100%;
    animation: waveMove 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    transform: translate3d(-50%, 0, 0);
}

.wave:nth-of-type(2) {
    bottom: 10px;
    opacity: 0.5;
    animation: waveMove 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) reverse infinite;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 3. 가을 (낙엽 효과) */
.leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #D32F2F; /* 단풍 빨강 */
    border-radius: 50% 0 50% 0;
    opacity: 0.8;
    animation: leafFall 12s linear infinite;
}

@keyframes leafFall {
    0% { transform: translate(0, -10%) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(50vw, 110%) rotate(1080deg); opacity: 0; }
}

.season-autumn .leaf:nth-child(2n) { background: #EF6C00; border-radius: 0 50% 0 50%; } /* 주황색 */
.season-autumn .leaf:nth-child(3n) { background: #8D6E63; animation-duration: 15s; } /* 갈색 */

/* 4. 겨울 (눈 효과) */
.snow {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    opacity: 0.8;
    animation: snowFall 10s linear infinite;
}

@keyframes snowFall {
    0% { transform: translate(0, -10%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(20vw, 110%); opacity: 0; }
}

.season-winter .snow:nth-child(3n) { width: 8px; height: 8px; filter: blur(1px); animation-duration: 13s; }
.season-winter .snow:nth-child(2n) { width: 3px; height: 3px; animation-duration: 7s; }

/* 랜덤 배치 (간단한 수동 배치 예시) */
.petal:nth-child(1) { left: 5%; animation-delay: 0s; }
.petal:nth-child(2) { left: 15%; animation-delay: 2s; }
.petal:nth-child(3) { left: 25%; animation-delay: 4s; }
.petal:nth-child(4) { left: 35%; animation-delay: 1s; }
.petal:nth-child(5) { left: 45%; animation-delay: 3s; }
.petal:nth-child(6) { left: 55%; animation-delay: 5s; }
.petal:nth-child(7) { left: 65%; animation-delay: 0.5s; }
.petal:nth-child(8) { left: 75%; animation-delay: 2.5s; }
.petal:nth-child(9) { left: 85%; animation-delay: 4.5s; }
.petal:nth-child(10) { left: 95%; animation-delay: 1.5s; }
.petal:nth-child(11) { left: 10%; animation-delay: 6s; }
.petal:nth-child(12) { left: 20%; animation-delay: 8s; }
.petal:nth-child(13) { left: 30%; animation-delay: 7s; }
.petal:nth-child(14) { left: 40%; animation-delay: 9s; }
.petal:nth-child(15) { left: 50%; animation-delay: 6.5s; }
.petal:nth-child(16) { left: 60%; animation-delay: 8.5s; }
.petal:nth-child(17) { left: 70%; animation-delay: 7.5s; }
.petal:nth-child(18) { left: 80%; animation-delay: 9.5s; }
.petal:nth-child(19) { left: 90%; animation-delay: 5.5s; }
.petal:nth-child(20) { left: 2%; animation-delay: 10s; }

/* 낙엽/눈도 동일한 패턴으로 배치 (공통 클래스 활용 가능하나 여기선 각각 정의) */
.leaf:nth-child(1) { left: 5%; animation-delay: 0s; }
.leaf:nth-child(2) { left: 15%; animation-delay: 3s; }
.leaf:nth-child(3) { left: 25%; animation-delay: 6s; }
.leaf:nth-child(4) { left: 35%; animation-delay: 1s; }
.leaf:nth-child(5) { left: 45%; animation-delay: 4s; }
.leaf:nth-child(6) { left: 55%; animation-delay: 7s; }
.leaf:nth-child(7) { left: 65%; animation-delay: 2s; }
.leaf:nth-child(8) { left: 75%; animation-delay: 5s; }
.leaf:nth-child(9) { left: 85%; animation-delay: 8s; }
.leaf:nth-child(10) { left: 95%; animation-delay: 0.5s; }
.leaf:nth-child(11) { left: 10%; animation-delay: 9s; }
.leaf:nth-child(12) { left: 20%; animation-delay: 11s; }
.leaf:nth-child(13) { left: 30%; animation-delay: 10s; }
.leaf:nth-child(14) { left: 40%; animation-delay: 12s; }
.leaf:nth-child(15) { left: 50%; animation-delay: 9.5s; }

.snow:nth-child(5n+1) { left: 5%; animation-delay: 0s; }
.snow:nth-child(5n+2) { left: 25%; animation-delay: 2s; }
.snow:nth-child(5n+3) { left: 45%; animation-delay: 4s; }
.snow:nth-child(5n+4) { left: 65%; animation-delay: 1s; }
.snow:nth-child(5n+5) { left: 85%; animation-delay: 3s; }
.snow:nth-child(3n) { left: 15%; animation-delay: 5s; }
.snow:nth-child(4n) { left: 35%; animation-delay: 6s; }
.snow:nth-child(2n) { left: 55%; animation-delay: 7s; }
.snow:nth-child(7n) { left: 75%; animation-delay: 8s; }
.snow:nth-child(6n) { left: 95%; animation-delay: 9s; }
/* ... (50개까지의 눈송이는 nth-child 패턴으로 자동 분산됨) */

/* 모바일에서 공백 줄이기 및 레이아웃 최적화 */
@media (max-width: 767px) {
    .hero-section {
        min-height: 50vh;
        padding: 30px 0 20px 0;
    }

    .phones-container {
        display: flex !important; /* 강제 표시 */
        flex-direction: row !important; /* 가로 배치 유지 */
        gap: 5px !important; /* 간격 좁게 */
        transform: scale(0.65); /* 화면에 맞게 전체 크기 더 축소 */
        margin: -25px 0 !important; /* 축소로 인한 여백 보정 */
    }

    .hero-phone {
        display: block !important; /* 강제 표시 */
        width: 130px !important; /* 너비 더 축소 */
        height: 240px !important; /* 높이 더 축소 */
    }

    .arrow-container {
        min-width: 50px !important; /* 화살표 영역 축소 */
        height: 30px !important;
        margin: 0 5px !important;
    }

    .hero-wing {
        max-width: 85px !important; /* 말풍선 너비 더 축소 */
    }
    
    .message-bubble {
        padding: 4px 6px !important;
    }
    
    .message-bubble p {
        font-size: 0.6rem !important;
    }

    .kakao-btn {
        margin-top: -40px !important; /* 모바일에서 위로 대폭 이동 */
        padding: 10px 20px !important; 
        font-size: 0.9rem !important;
    }
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--bg-white);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    overflow: visible; /* 자식이 부모보다 커도 잘리지 않게 */
}

.hero-content * {
    pointer-events: auto;
}

/* 휴대폰 컨테이너 */
.phones-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 9;
    margin-top: 80px; /* 문구와 겹치지 않도록 아래로 이동 */
    margin-bottom: 0 !important; /* 하단 여백 제거 */
    min-height: 270px; /* 180px -> 270px (1.5배) */
}

/* 스마트폰 이미지 */
.hero-phone {
    position: relative;
    z-index: 9;
    margin-top: 0;
    animation: phoneFloat 6s ease-in-out infinite;
}

.phone-left {
    animation-delay: 0s;
}

.phone-right {
    animation-delay: 3s;
}

/* 전선 컨테이너 */
.arrow-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 60px; /* 40px -> 60px (1.5배) */
    position: relative;
    align-self: center;
    margin: 0 20px;
}

/* 전선 (수평선) - 위쪽 선 */
.wire-line-top {
    position: absolute;
    width: 100%;
    height: 3px; /* 2px -> 3px (1.5배) */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 100%);
    top: 30%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* 전선 (수평선) - 아래쪽 선 */
.wire-line-bottom {
    position: absolute;
    width: 100%;
    height: 3px; /* 2px -> 3px (1.5배) */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 100%);
    top: 70%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* 데이터 패킷 (양방향 이동) */
.data-packet {
    position: absolute;
    width: 18px; /* 12px -> 18px (1.5배) */
    height: 18px; /* 12px -> 18px (1.5배) */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(154, 245, 255, 0.6);
}

/* 위쪽 선 - 왼쪽에서 오른쪽으로 이동하는 데이터 */
.data-packet-top-left {
    left: 0;
    top: 30%;
    transform: translateY(-50%);
    animation: moveRight 2s ease-in-out infinite;
}

/* 위쪽 선 - 오른쪽에서 왼쪽으로 이동하는 데이터 */
.data-packet-top-right {
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    animation: moveLeft 2s ease-in-out infinite;
    animation-delay: 1s;
}

/* 아래쪽 선 - 왼쪽에서 오른쪽으로 이동하는 데이터 */
.data-packet-bottom-left {
    left: 0;
    top: 70%;
    transform: translateY(-50%);
    animation: moveRight 2s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* 아래쪽 선 - 오른쪽에서 왼쪽으로 이동하는 데이터 */
.data-packet-bottom-right {
    right: 0;
    top: 70%;
    transform: translateY(-50%);
    animation: moveLeft 2s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* 오른쪽으로 이동 애니메이션 */
@keyframes moveRight {
    0% {
        left: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 18px); /* 12px -> 18px */
        opacity: 0;
    }
}

/* 왼쪽으로 이동 애니메이션 */
@keyframes moveLeft {
    0% {
        right: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        right: calc(100% - 18px); /* 12px -> 18px */
        opacity: 0;
    }
}

@keyframes phoneFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

.phone-frame {
    width: 150px; /* 100px -> 150px (1.5배) */
    height: 300px; /* 200px -> 300px (1.5배) */
    background: transparent;
    border-radius: 27px; /* 18px -> 27px (1.5배) */
    padding: 12px 8px; /* 8px 5px -> 12px 8px */
    box-shadow: none;
    position: relative;
    border: 2px solid #ffffff;
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 9px; /* 6px -> 9px */
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* 40px -> 60px */
    height: 6px; /* 4px -> 6px */
    background: transparent;
    border-radius: 3px;
    border: 1px solid #ffffff;
    box-shadow: none;
    z-index: 101;
}

.phone-frame::after {
    content: '';
    position: absolute;
    bottom: 6px; /* 4px -> 6px */
    left: 50%;
    transform: translateX(-50%);
    width: 38px; /* 25px -> 38px */
    height: 38px; /* 25px -> 38px */
    background: transparent;
    border-radius: 50%;
    border: 1px solid #ffffff;
    box-shadow: none;
    z-index: 101;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 18px; /* 12px -> 18px */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.phone-content {
    color: #ffffff;
    font-size: 3rem; /* 2rem -> 3rem (1.5배) */
    opacity: 1;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.phone-content i {
    font-size: 3rem; /* 2rem -> 3rem (1.5배) */
    color: #ffffff;
}

.chat-bubble {
    background: #FEE500;
    color: #3C1E1E;
    padding: 8px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    font-size: 0.5rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid #ffffff;
    max-width: 80px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FEE500;
}

.chat-bubble i {
    font-size: 0.6rem;
    color: #3C1E1E;
}

.chat-bubble span {
    font-size: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* 히어로 메인 비주얼 (날개형 배치) */
.hero-main-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: -35px 0 20px 0 !important; /* 위로 대폭 상향 조정 */
    position: relative;
}

.hero-wing {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 15px; /* 세로 간격 6px로 압축, 가로 간격 15px */
    z-index: 5;
    flex: 1;
    max-width: 550px; /* 가로폭 확장 */
}

/* 왼쪽 날개: 오른쪽(휴대폰쪽) 정렬 및 넓은 분포 */
.left-wing {
    justify-content: end;
}

.left-wing .chat-message {
    position: relative;
    text-align: right;
    transform: translateX(var(--tx, 0));
    animation: floatLeftWing 6s ease-in-out infinite;
}

/* 오른쪽 날개: 왼쪽(휴대폰쪽) 정렬 및 넓은 분포 */
.right-wing {
    justify-content: start;
}

.right-wing .chat-message {
    position: relative;
    text-align: left;
    transform: translateX(var(--tx, 0));
    animation: floatRightWing 6s ease-in-out infinite;
}

/* 왼쪽 날개 2열 배치에 따른 부채꼴 곡선 재계산 */
/* 홀수 번째(왼쪽 열 - 더 바깥쪽): 더 큰 음수 tx */
.left-wing .chat-message:nth-child(odd) { --tx: -70px; animation-delay: 0.2s; }
/* 짝수 번째(오른쪽 열 - 휴대폰 쪽): 작은 음수 tx */
.left-wing .chat-message:nth-child(even) { --tx: -20px; animation-delay: 0.7s; }

/* 중앙 부분은 조금 더 안으로 모으기 (곡선 효과) */
.left-wing .chat-message:nth-child(5),
.left-wing .chat-message:nth-child(6),
.left-wing .chat-message:nth-child(7),
.left-wing .chat-message:nth-child(8) { 
    --tx: -10px; 
}

/* 위아래 끝부분은 더 바깥으로 (곡선 효과 강화) */
.left-wing .chat-message:nth-child(1),
.left-wing .chat-message:nth-child(2),
.left-wing .chat-message:nth-child(11),
.left-wing .chat-message:nth-child(12) {
    --tx: -90px;
}

/* 오른쪽 날개 2열 배치에 따른 부채꼴 곡선 재계산 */
/* 홀수 번째(왼쪽 열 - 휴대폰 쪽): 작은 양수 tx */
.right-wing .chat-message:nth-child(odd) { --tx: 20px; animation-delay: 0.4s; }
/* 짝수 번째(오른쪽 열 - 더 바깥쪽): 더 큰 양수 tx */
.right-wing .chat-message:nth-child(even) { --tx: 70px; animation-delay: 0.9s; }

/* 중앙 부분 모으기 */
.right-wing .chat-message:nth-child(5),
.right-wing .chat-message:nth-child(6),
.right-wing .chat-message:nth-child(7),
.right-wing .chat-message:nth-child(8) { 
    --tx: 10px; 
}

/* 끝부분 바깥으로 */
.right-wing .chat-message:nth-child(1),
.right-wing .chat-message:nth-child(2),
.right-wing .chat-message:nth-child(11),
.right-wing .chat-message:nth-child(12) {
    --tx: 90px;
}

/* 날개 전용 둥실둥실 애니메이션 */
@keyframes floatLeftWing {
    0%, 100% { transform: translateX(var(--tx, 0)) translateY(0); }
    50% { transform: translateX(var(--tx, 0)) translateY(-8px); }
}

@keyframes floatRightWing {
    0%, 100% { transform: translateX(var(--tx, 0)) translateY(0); }
    50% { transform: translateX(var(--tx, 0)) translateY(-8px); }
}

/* 기존 메시지 공통 스타일 수정 */
.chat-message {
    opacity: 0.95;
    z-index: 1;
    margin: 0;
    padding: 0;
}

/* 네온사인 효과: chat-msg-20 (일본 모든대행 가능!!) */
.chat-msg-20 .message-bubble {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.15), rgba(0, 191, 255, 0.15));
    border: 2px solid #ff1493;
    box-shadow: 
        0 0 10px #ff1493,
        0 0 20px #ff1493,
        0 0 30px #ff1493,
        0 0 40px #00bfff,
        0 0 70px #00bfff,
        0 0 100px #00bfff,
        inset 0 0 20px rgba(255, 20, 147, 0.3);
    animation: neonPulse 2s ease-in-out infinite;
}

.chat-msg-20 .message-bubble p {
    color: #ffffff;
    text-shadow: 
        0 0 5px #ff1493,
        0 0 10px #ff1493,
        0 0 15px #ff1493,
        0 0 20px #00bfff,
        0 0 35px #00bfff,
        0 0 40px #00bfff;
    font-weight: bold;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 
            0 0 10px #ff1493,
            0 0 20px #ff1493,
            0 0 30px #ff1493,
            0 0 40px #00bfff,
            0 0 70px #00bfff,
            0 0 100px #00bfff,
            inset 0 0 20px rgba(255, 20, 147, 0.3);
        border-color: #ff1493;
    }
    50% {
        box-shadow: 
            0 0 5px #ff1493,
            0 0 10px #ff1493,
            0 0 15px #ff1493,
            0 0 20px #00bfff,
            0 0 35px #00bfff,
            0 0 50px #00bfff,
            inset 0 0 15px rgba(255, 20, 147, 0.2);
        border-color: #00bfff;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

.message-bubble {
    background: var(--bg-white);
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    max-width: 220px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    /* 겹침 방지 */
    display: inline-block;
    min-width: fit-content;
    /* 겹침 방지: 각 버블이 독립적으로 표시되도록 */
    pointer-events: auto;
}

.message-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bg-white);
}

.message-bubble p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.4;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    letter-spacing: 0.3px;
}

.hero-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
    position: relative;
    z-index: 11;
    color: #FFFFFF;
    text-shadow: 0 0 20px rgba(180, 120, 255, 0.45), 
                0 0 40px rgba(180, 120, 255, 0.3), 
                0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 60px rgba(154, 245, 255, 0.2);
    text-align: center;
}

.hero-slogan {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 24px;
    margin: 20px 0 5px 0 !important; /* 하단 여백 대폭 축소 */
    position: relative;
    z-index: 11;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.hero-slogan:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.hero-slogan span {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.kakao-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FEE500;
    color: #3C1E1E;
    padding: 18px 35px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    border: 2px solid #ffffff;
    cursor: pointer;
    position: relative;
    z-index: 20; /* 레이어 순서 상향 */
    margin-top: -60px !important; /* 위로 대폭 상향 조정 */
}

.kakao-btn:hover {
    background: #FDD835;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: #3C1E1E;
    border-color: #ffffff;
}

.kakao-btn i {
    font-size: 1.3rem;
}

/* 푸터 */
.footer {
    background: var(--text-dark);
    color: var(--bg-white);
    padding: 40px 0;
    text-align: center;
    margin-top: auto;
    width: 100%;
    position: relative; /* 고정 해제 */
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-links .language-selector-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a {
    color: var(--bg-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    opacity: 0.9;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--secondary-color);
}

.footer-divider {
    color: var(--bg-white);
    opacity: 0.5;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-text {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* 언어 선택 (푸터 안) */
.language-selector-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-selector-footer i {
    font-size: 1rem;
    color: var(--bg-white);
    opacity: 0.9;
}

.language-selector-footer .form-select {
    border: none;
    border-radius: 0;
    padding: 5px 25px 5px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 100px;
    background-color: transparent;
    color: var(--bg-white);
    opacity: 0.9;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.language-selector-footer .form-select:hover {
    opacity: 1;
}

.language-selector-footer .form-select:focus {
    outline: none;
    opacity: 1;
}

.language-selector-footer .form-select option {
    background-color: var(--text-dark);
    color: var(--bg-white);
}

/* 반응형 디자인 - 모바일 */
@media (max-width: 767px) {
    .hamburger-btn {
        display: flex; /* 모바일에서만 표시 */
    }
    
    .desktop-menu {
        display: none; /* 모바일에서 데스크톱 메뉴 숨김 */
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }

    .footer-divider {
        display: none;
    }

    .footer-links .language-selector-footer {
        margin-top: 5px;
    }

    /* 모바일에서 날개형 배치 최적화 */
    .hero-main-visual {
        flex-direction: row;
        align-items: center; /* 중앙 정렬로 변경 */
        justify-content: center; /* 중앙 정렬로 변경 */
        gap: 2px;
        margin: -25px 0 10px 0 !important; /* 모바일에서도 위로 이동 */
    }

    .hero-wing {
        display: flex; 
        flex-direction: column;
        gap: 3px;
        max-width: 85px;
    }

    .left-wing .chat-message,
    .right-wing .chat-message {
        transform: none !important; /* 모바일에서는 곡선 효과 제거하고 일직선 정렬 */
        margin-bottom: 0px !important; /* 하단 여백 제거 */
    }

    .message-bubble {
        max-width: 90px;
        padding: 4px 8px;
        font-size: 0.6rem;
    }
    
    .message-bubble p {
        font-size: 0.6rem;
    }

    .chat-msg-20 .message-bubble {
        box-shadow: 
            0 0 5px #ff1493,
            0 0 10px #00bfff,
            inset 0 0 5px rgba(255, 20, 147, 0.2);
    }
    
    .chat-msg-20 .message-bubble p {
        text-shadow: 0 0 5px #ff1493;
    }

    .hero-phone {
        margin-top: 0;
    }

    .phones-container {
        display: flex;
        flex-direction: row; /* 가로 배치 유지 */
        gap: 15px;
        min-height: auto;
    }
    
    .phone-right {
        display: block; /* 숨김 해제 */
    }
    
    .arrow-container {
        flex-direction: row; /* 가로 배치 유지 */
        gap: 10px;
        min-width: auto;
        width: auto;
        justify-content: center;
        height: auto;
    }
    
    /* 모바일에서는 전파 애니메이션 비활성화 (가로 방향 유지) */
    .arrow-dashed,
    .arrow-solid {
        width: 40px;
        height: 3px;
        border: none;
        border-top: 2px dashed #ffffff;
        border-radius: 0;
        animation: none;
    }
    
    .arrow-dashed::before,
    .arrow-dashed::after,
    .arrow-solid::before,
    .arrow-solid::after {
        display: none;
    }
    
    .arrow-solid {
        border-left: 3px solid #ffffff;
    }
    
    .phone-frame {
        width: 100px;
        height: 200px;
        border-radius: 18px;
        padding: 8px 5px;
    }

    .phone-frame::before {
        width: 40px;
        height: 4px;
        top: 6px;
        z-index: 101;
    }

    .phone-frame::after {
        width: 25px;
        height: 25px;
        bottom: 4px;
        z-index: 101;
    }

    .phone-screen {
        border-radius: 12px;
    }
    
    .chat-bubble {
        padding: 8px 12px;
        font-size: 0.5rem;
        max-width: 80px;
    }
    
    .chat-bubble i {
        font-size: 0.6rem;
    }
    
    .chat-bubble span {
        font-size: 0.5rem;
    }
    
    .chat-bubble::after {
        bottom: -5px;
        left: 15px;
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
    }

    .phone-content {
        font-size: 1.5rem;
    }
    
    .phone-content i {
        font-size: 1.5rem;
    }
    
    .phones-container {
        margin-bottom: 20px;
    }
    
    .phone-right {
        display: none;
    }
    
    .arrow-container {
        display: none;
    }
    
    .kakao-btn {
        font-size: 0.95rem;
        padding: 12px 24px !important;
        margin-top: -30px !important;
    }
    
    .hero-title {
        margin-bottom: 0;
        font-size: 1.4rem;
        padding: 0 15px;
        word-break: keep-all;
        overflow-wrap: break-word;
        line-height: 1.2;
    }
    
    .hero-slogan {
        padding: 10px 18px;
        margin: 10px 0 5px 0 !important; /* 하단 여백 축소 */
        white-space: nowrap;
        max-width: calc(100% - 30px);
        box-sizing: border-box;
        border-color: rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 
                    inset 0 0 10px rgba(255, 255, 255, 0.3);
    }
    
    .hero-slogan span {
        font-size: 0.9rem;
        font-weight: 700;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.9),
                     0 0 15px rgba(255, 255, 255, 0.6);
        white-space: nowrap;
        display: inline-block;
    }
}

/* 매우 작은 스마트폰 (360px 이하) */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.1rem;
        padding: 0 10px;
        line-height: 1.15;
    }
    
    .hero-slogan {
        padding: 8px 15px;
    }
    
    .hero-slogan span {
        font-size: 0.85rem;
    }
}

/* 초소형 스마트폰 (320px 이하) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1rem;
        padding: 0 8px;
    }
    
    .hero-slogan {
        padding: 6px 12px;
    }
    
    .hero-slogan span {
        font-size: 0.8rem;
    }
}

/* 반응형 디자인 - 태블릿 */
@media (min-width: 768px) {
    .hamburger-btn {
        display: none;
    }

    .desktop-menu {
        display: flex;
    }

    .hero-title {
        font-size: 3rem;
        line-height: 1.3;
        margin: 0;
        color: #FFFFFF;
        text-shadow: 0 0 25px rgba(180, 120, 255, 0.45), 
                    0 0 50px rgba(180, 120, 255, 0.3), 
                    0 2px 10px rgba(0, 0, 0, 0.3),
                    0 0 80px rgba(154, 245, 255, 0.2);
        text-align: center;
    }
    
    .hero-slogan {
        padding: 14px 28px;
        margin: 15px 0 5px 0 !important; /* 하단 여백 축소 */
    }
    
    .hero-slogan span {
        font-size: 1.1rem;
    }
    
    /* 태블릿에서 메시지 버블 크기를 hero-slogan과 정확히 동일하게 */
    .message-bubble p {
        font-size: 1.1rem !important;
        line-height: 1.4;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .hero-phone {
        margin-top: 0;
    }

    .phones-container {
        gap: 25px;
    }
    
    .arrow-container {
        gap: 15px;
        min-width: 50px;
    }
    
    /* 태블릿에서는 전파 애니메이션 비활성화 */
    .arrow-dashed,
    .arrow-solid {
        width: 3px;
        height: 40px;
        border: none;
        border-left: 3px dashed #ffffff;
        border-radius: 0;
        animation: none;
    }
    
    .arrow-dashed::before,
    .arrow-dashed::after,
    .arrow-solid::before,
    .arrow-solid::after {
        display: none;
    }
    
    .arrow-solid {
        border-left: 3px solid #ffffff;
    }
    
    .phone-frame {
        width: 100px;
        height: 200px;
        border-radius: 18px;
        padding: 8px 5px;
    }

    .phone-frame::before {
        width: 40px;
        height: 4px;
        top: 6px;
        z-index: 101;
    }

    .phone-frame::after {
        width: 25px;
        height: 25px;
        bottom: 4px;
        z-index: 101;
    }

    .phone-screen {
        border-radius: 12px;
    }
    
    .chat-bubble {
        padding: 8px 12px;
        font-size: 0.5rem;
        max-width: 80px;
    }
    
    .chat-bubble i {
        font-size: 0.6rem;
    }
    
    .chat-bubble span {
        font-size: 0.5rem;
    }
    
    .chat-bubble::after {
        bottom: -5px;
        left: 15px;
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
    }

    .phone-content {
        font-size: 1.8rem;
    }
    
    .phone-content i {
        font-size: 1.8rem;
    }
    
    .phones-container {
        margin-bottom: 0;
    }
    
    .kakao-btn {
        font-size: 1rem;
        padding: 16px 32px;
        margin-top: -50px !important;
    }

    /* 태블릿에서 날개형 배치 유지 및 크기 고정 (반응형 비활성화) */
    .hero-main-visual {
        width: 1500px !important; /* 전체 객체들이 여유 있게 들어갈 너비 */
        min-width: 1500px !important;
        flex-shrink: 0;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px;
        margin: -30px 0 20px 0 !important;
        /* 기존 left/transform 방식 제거 */
    }

    .hero-wing {
        flex: none !important;
        width: 450px !important;
        max-width: none !important;
        gap: 8px 15px;
    }

    /* 작은 화면에서 네온사인 효과 조정 */
    .chat-msg-20 .message-bubble {
        box-shadow: 
            0 0 6px #ff1493,
            0 0 12px #ff1493,
            0 0 20px #ff1493,
            0 0 30px #00bfff,
            0 0 50px #00bfff,
            inset 0 0 12px rgba(255, 20, 147, 0.2);
    }
    
    .chat-msg-20 .message-bubble p {
        text-shadow: 
            0 0 3px #ff1493,
            0 0 6px #ff1493,
            0 0 10px #ff1493,
            0 0 14px #00bfff,
            0 0 24px #00bfff;
    }

    .message-bubble {
        max-width: 170px;
        padding: 7px 11px;
    }

    .message-bubble p {
        font-size: 0.73rem;
    }
}

/* 페이지 섹션 */
.page-section {
    padding: 60px 20px;
    min-height: 70vh;
}

.page-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: center;
}

.content-box {
    background: var(--bg-white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto;
}

.content-box h2 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.content-box p {
    margin-bottom: 15px;
    color: var(--text-light);
    line-height: 1.8;
}

.content-box ol {
    padding-left: 25px;
    color: var(--text-light);
    line-height: 2;
}

.content-box ol li {
    margin-bottom: 10px;
}

/* 인증 박스 */
.auth-box {
    max-width: 500px;
    margin: 60px auto;
    background: var(--bg-white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.auth-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 500;
}

.form-group label i {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.form-text {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
}

.form-text.text-danger {
    color: #dc3545;
    font-weight: 500;
    margin-top: 8px;
}

/* reCAPTCHA 스타일 */
.g-recaptcha {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.g-recaptcha > div {
    margin: 0 auto;
}

#recaptcha-error {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.password-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-group .form-control {
    padding-right: 45px;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    color: var(--primary-color);
}

.password-toggle-btn:focus {
    outline: none;
}

/* 로그인 유지 토글 스위치 */
.remember-login-group {
    margin-bottom: 25px;
}

.remember-toggle {
    display: block;
    width: 100%;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.remember-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background-color: #e0e0e0;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 0 50px;
    box-sizing: border-box;
}

.toggle-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-weight: 500;
    user-select: none;
    transition: opacity 0.3s ease;
    z-index: 1;
    white-space: nowrap;
}

.toggle-text.off {
    color: var(--text-dark);
    opacity: 1;
}

.toggle-text.on {
    color: #ffffff;
    opacity: 0;
}

.remember-toggle input[type="checkbox"]:checked ~ .toggle-inner {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.remember-toggle input[type="checkbox"]:checked ~ .toggle-inner .toggle-text.off {
    opacity: 0;
}

.remember-toggle input[type="checkbox"]:checked ~ .toggle-inner .toggle-text.on {
    opacity: 1;
}

.toggle-thumb {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: right 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.remember-toggle input[type="checkbox"]:checked ~ .toggle-inner .toggle-thumb {
    right: calc(100% - 44px);
}

.remember-toggle input[type="checkbox"]:focus ~ .toggle-inner {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

.form-control.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6 .4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.btn-primary {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--bg-white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* 보안 안내 문구 */
.security-notice {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(255, 107, 107, 0.1));
    border: 2px solid rgba(78, 205, 196, 0.3);
    border-radius: var(--border-radius);
    padding: 15px 20px;
    margin-bottom: 25px;
    width: 100%;
    box-sizing: border-box;
}

.security-notice-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.security-notice-header i {
    font-size: 1.2rem;
}

.security-notice-content {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-dark);
    width: 100%;
    box-sizing: border-box;
}

.security-notice-content p {
    margin: 6px 0;
    padding: 0;
    position: relative;
    text-align: left;
}

.security-notice-content p:first-child {
    font-weight: 500;
}

/* 로딩 오버레이 */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    text-align: center;
    color: var(--bg-white);
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.loading-text {
    margin-top: 20px;
    font-size: 1.1rem;
    color: var(--bg-white);
}

/* 확인 페이지 스타일 */
.confirm-description {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.confirm-info-box {
    background: var(--bg-white);
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.info-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.info-label i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.info-value {
    padding: 12px 15px;
    background: var(--bg-light);
    border-radius: 8px;
    color: var(--text-dark);
    font-size: 1rem;
    word-break: break-word;
}

.confirm-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.confirm-form-item {
    flex: 1;
}

.btn-edit,
.btn-confirm {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-edit {
    background: #6c757d;
    color: var(--bg-white);
}

.btn-edit:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-confirm {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--bg-white);
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* 반응형 디자인 - 보안 안내 문구 */
@media (max-width: 768px) {
    .auth-box {
        padding: 25px 20px;
        margin: 30px auto;
        max-width: 100%;
    }
    
    .toggle-inner {
        height: 44px;
        padding: 0 46px;
    }
    
    .toggle-thumb {
        width: 36px;
        height: 36px;
        right: 4px;
    }
    
    .remember-toggle input[type="checkbox"]:checked ~ .toggle-inner .toggle-thumb {
        right: calc(100% - 40px);
    }
    
    .toggle-text {
        font-size: 0.9rem;
    }
    
    .form-control {
        font-size: 16px; /* iOS에서 자동 줌 방지 */
        padding: 14px 15px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    .form-control:focus {
        font-size: 16px; /* iOS에서 포커스 시에도 자동 줌 방지 */
    }
    
    .password-toggle-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn-primary {
        padding: 16px;
        font-size: 1rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .security-notice {
        padding: 12px 15px;
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .security-notice-header {
        font-size: 0.9rem;
    }
    
    .security-notice-content {
        font-size: 0.8rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .security-notice-content p {
        padding: 0;
        text-align: left;
        word-break: keep-all;
    }
    
    .form-group label {
        font-size: 0.95rem;
        word-break: keep-all;
    }

    .form-text {
        word-break: keep-all;
        line-height: 1.4;
    }

    .input-group {
        flex-wrap: nowrap !important; /* 줄바꿈 방지 */
    }

    .input-group .form-control {
        flex: 7 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .input-group .btn,
    .input-group .btn-outline-primary,
    .input-group .btn-outline-secondary {
        flex: 3 !important;
        white-space: nowrap !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 약관 동의 체크박스 줄바꿈 방지 및 가독성 최적화 */
    .checkbox-label {
        font-size: 0.88rem !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: flex !important;
        align-items: center !important;
    }
    
    .checkbox-label span {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .terms-section-title {
        font-size: 1.05rem !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        gap: 8px !important;
    }

    /* 회원가입 버튼 및 안내 문구 줄바꿈 방지 */
    .security-notice-header {
        white-space: nowrap !important;
    }

    .form-group label {
        white-space: nowrap !important;
        font-size: 0.9rem !important;
    }

    .confirm-description {
        font-size: 0.88rem;
        word-break: keep-all;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    .confirm-info-box {
        padding: 18px 12px;
        margin-bottom: 20px;
    }

    .info-item {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .info-label {
        font-size: 0.85rem;
        word-break: keep-all;
    }

    .info-label i {
        font-size: 1rem;
    }

    .info-value {
        font-size: 0.92rem;
        padding: 10px 12px;
        word-break: keep-all;
        line-height: 1.5;
    }
    
    .confirm-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    
    .btn-edit,
    .btn-confirm {
        width: 100%;
        margin: 0 !important;
        padding: 14px;
        font-size: 1rem;
    }
}

/* 반응형 디자인 - 데스크톱 */
@media (min-width: 1024px) {
    .hero-title {
        font-size: 3.5rem;
        line-height: 1.3;
        margin: 0;
        color: #FFFFFF;
        text-shadow: 0 0 30px rgba(180, 120, 255, 0.45), 
                    0 0 60px rgba(180, 120, 255, 0.3), 
                    0 2px 12px rgba(0, 0, 0, 0.3),
                    0 0 100px rgba(154, 245, 255, 0.2);
        text-align: center;
    }
    
    .hero-slogan {
        padding: 16px 32px;
        margin: 20px 0 10px 0 !important; /* 하단 여백 축소 */
    }
    
    .hero-slogan span {
        font-size: 1.2rem;
    }
    
    /* 데스크톱에서 메시지 버블 크기를 hero-slogan과 정확히 동일하게 */
    .message-bubble {
        max-width: 250px;
        padding: 14px 18px;
        opacity: 0.85; /* 투명도 0.5로 조정 */
        transition: all 0.3s ease;
    }
    
    .message-bubble:hover {
        opacity: 1;
        transform: scale(1.05);
        z-index: 10;
    }
    
    .message-bubble p {
        font-size: 1.2rem !important;
        line-height: 1.4;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    /* 데스크톱에서 날개형 배치 최적화 및 크기 고정 (반응형 비활성화) */
    .hero-main-visual {
        width: 1700px !important; /* 데스크톱에서는 너비 더 확장 */
        min-width: 1700px !important;
        flex-shrink: 0;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 50px;
        margin: -45px 0 30px 0 !important; /* 데스크톱에서 더 많이 상향 조정 */
        /* 기존 left/transform 방식 제거 */
    }

    .hero-wing {
        flex: none !important;
        width: 550px !important;
        max-width: none !important;
        gap: 12px 25px;
    }

    .hero-phone {
        margin-top: 0;
        z-index: 100 !important;
        position: relative;
    }
    
    .phone-frame {
        z-index: 100 !important;
        position: relative;
    }
    
    .phone-screen {
        z-index: 100 !important;
        position: relative;
    }

    .phones-container {
        gap: 30px;
        z-index: 100 !important;
        position: relative;
        margin-top: 80px; /* 데스크톱에서 조금 더 여유 있게 아래로 이동 */
    }
    
    .chat-message {
        z-index: 1 !important;
    }
    
    .arrow-container {
        min-width: 250px;
        height: 75px; /* 50px -> 75px (1.5배) */
        margin: 0 30px;
    }
    
    .wire-line-top,
    .wire-line-bottom {
        height: 4.5px; /* 3px -> 4.5px (1.5배) */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    .data-packet {
        width: 21px; /* 14px -> 21px (1.5배) */
        height: 21px; /* 14px -> 21px (1.5배) */
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.9),
                    0 0 25px rgba(154, 245, 255, 0.7);
    }
    
    .phone-frame {
        width: 150px; /* 100px -> 150px (1.5배) */
        height: 300px; /* 200px -> 300px (1.5배) */
        border-radius: 27px; /* 18px -> 27px (1.5배) */
        padding: 12px 8px; /* 8px 5px -> 12px 8px */
    }

    .phone-frame::before {
        width: 60px; /* 40px -> 60px */
        height: 6px; /* 4px -> 6px */
        top: 9px; /* 6px -> 9px */
        z-index: 101;
    }

    .phone-frame::after {
        width: 38px; /* 25px -> 38px */
        height: 38px; /* 25px -> 38px */
        bottom: 6px; /* 4px -> 6px */
        z-index: 101;
    }

    .phone-screen {
        border-radius: 18px; /* 12px -> 18px */
    }
    
    .chat-bubble {
        padding: 8px 12px;
        font-size: 0.5rem;
        max-width: 80px;
    }
    
    .chat-bubble i {
        font-size: 0.6rem;
    }
    
    .chat-bubble span {
        font-size: 0.5rem;
    }
    
    .chat-bubble::after {
        bottom: -5px;
        left: 15px;
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 5px;
    }

    .phone-content {
        font-size: 3rem; /* 2rem -> 3rem */
    }
    
    .phone-content i {
        font-size: 3rem; /* 2rem -> 3rem */
    }
    
    .phones-container {
        margin-bottom: 0;
    }
    
    .kakao-btn {
        font-size: 1.1rem;
        padding: 18px 35px;
        margin-top: -60px !important;
    }
    
    /* PC에서 전선 애니메이션 적용 */
    .arrow-container {
        height: 90px; /* 60px -> 90px (1.5배) */
    }
    
    .wire-line-top,
    .wire-line-bottom {
        height: 4.5px; /* 3px -> 4.5px (1.5배) */
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    }
    
    .data-packet {
        width: 24px; /* 16px -> 24px (1.5배) */
        height: 24px; /* 16px -> 24px (1.5배) */
        box-shadow: 0 0 18px rgba(255, 255, 255, 1),
                    0 0 30px rgba(154, 245, 255, 0.8);
    }

    .message-bubble {
        max-width: 180px;
        padding: 8px 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .message-bubble p {
        font-size: 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .page-title {
        font-size: 3rem;
    }
}

/* 우편번호 검색 모달 */
.postcode-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.postcode-modal-content {
    background-color: var(--bg-white);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.postcode-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid #e0e0e0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.postcode-modal-header h3 {
    margin: 0;
    color: var(--bg-white);
    font-size: 1.3rem;
    font-weight: bold;
}

.postcode-close-btn {
    background: none;
    border: none;
    color: var(--bg-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    border-radius: 5px;
}

.postcode-close-btn:hover {
    transform: rotate(90deg);
    background-color: rgba(255, 255, 255, 0.2);
}

.postcode-modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 400px;
}

#postcode-wrap {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
    overflow: visible;
    display: block;
}

#postcode-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    border: none !important;
    display: block !important;
}

.postcode-modal-footer {
    padding: 15px 25px;
    border-top: 2px solid #e0e0e0;
    background-color: #f8f9fa;
    text-align: center;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.postcode-modal-footer p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .postcode-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .postcode-modal-header {
        padding: 15px 20px;
    }

    .postcode-modal-header h3 {
        font-size: 1.1rem;
    }

    .postcode-modal-body {
        min-height: 350px;
    }

    #postcode-wrap {
        min-height: 350px;
    }

    .postcode-modal-footer {
        padding: 12px 20px;
    }

    .postcode-modal-footer p {
        font-size: 0.85rem;
    }
}

/* 약관 동의 페이지 스타일 */
.terms-box {
    max-width: 900px;
    margin: 40px auto;
    background: var(--bg-white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.terms-description {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 1rem;
}

.terms-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
}

.terms-section:last-of-type {
    border-bottom: none;
}

.terms-section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terms-section-title i {
    font-size: 1.5rem;
}

.terms-content {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.terms-article {
    margin-bottom: 25px;
}

.terms-article:last-child {
    margin-bottom: 0;
}

.terms-article h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 12px;
    margin-top: 0;
}

.terms-article p {
    margin-bottom: 12px;
    color: var(--text-dark);
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.terms-article ul,
.terms-article ol {
    margin: 12px 0;
    padding-left: 25px;
    color: var(--text-dark);
    line-height: 1.8;
}

.terms-article ul li,
.terms-article ol li {
    margin-bottom: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.terms-agree {
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
}

.terms-agree-all {
    padding: 20px;
    background: #f0f0f0;
    border-radius: var(--border-radius);
    margin: 30px 0;
    border: 2px solid var(--primary-color);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-dark);
    user-select: none;
}

.checkbox-label-all {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.checkbox-label span {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.terms-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-cancel {
    padding: 12px 30px;
    background: #6c757d;
    color: var(--bg-white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.alert {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-danger i {
    font-size: 1.2rem;
}

/* 약관 페이지 반응형 */
@media (max-width: 768px) {
    .terms-box {
        padding: 25px 20px;
        margin: 20px auto;
    }
    
    .page-title {
        font-size: 1.8rem !important;
        white-space: nowrap !important;
        letter-spacing: -1px;
        word-break: keep-all;
    }

    .terms-description {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.5px;
        word-break: keep-all;
    }
    
    .terms-section-title {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
    }
    
    .terms-content {
        padding: 20px 15px;
        max-height: 350px;
        font-size: 0.9rem;
    }
    
    .terms-article h3 {
        font-size: 1rem;
    }
    
    .terms-article p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    
    .terms-article ul,
    .terms-article ol {
        padding-left: 20px;
        font-size: 0.9rem;
    }
    
    .terms-article ul li,
    .terms-article ol li {
        margin-bottom: 6px;
        line-height: 1.7;
    }
    
    .terms-agree-all {
        padding: 15px;
    }
    
    .checkbox-label {
        font-size: 0.95rem;
    }
    
    .checkbox-label-all {
        font-size: 1rem;
    }
    
    .terms-buttons {
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-primary {
        width: 100%;
        justify-content: center;
        white-space: nowrap !important; /* 버튼 내 텍스트 줄바꿈 방지 */
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .auth-box {
        padding: 20px 15px;
        margin: 15px auto;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .page-title {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
        letter-spacing: -1.2px !important;
    }

    .terms-description {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.8px !important;
    }

    .btn-cancel,
    .btn-primary {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    .terms-box {
        padding: 20px 15px;
        margin: 15px auto;
    }
    
    .terms-section-title {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .terms-content {
        padding: 15px 12px;
        max-height: 300px;
        font-size: 0.85rem;
    }
    
    .terms-article h3 {
        font-size: 0.95rem !important;
        word-break: keep-all !important;
    }
    
    .terms-article p {
        font-size: 0.85rem !important;
        line-height: 1.6;
        word-break: keep-all !important;
    }
    
    .terms-article ul,
    .terms-article ol {
        padding-left: 18px;
        font-size: 0.85rem;
    }
    
    .checkbox-label {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    .checkbox-label-all {
        font-size: 0.9rem !important;
    }

    .confirm-description {
        font-size: 0.85rem;
    }

    .confirm-info-box {
        padding: 15px 10px;
    }

    .info-label {
        font-size: 0.8rem;
    }

    .info-value {
        font-size: 0.88rem;
        padding: 8px 10px;
    }

    .btn-edit,
    .btn-confirm {
        padding: 12px;
        font-size: 0.95rem;
    }
}

/* 법적 문서 페이지 스타일 (이용약관, 개인정보처리방침) */
.legal-document-box {
    max-width: 1000px;
    margin: 40px auto;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.legal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 50px 40px;
    text-align: center;
    color: var(--bg-white);
    position: relative;
}

.legal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.legal-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.legal-icon.privacy-icon {
    background: rgba(78, 205, 196, 0.3);
}

.legal-icon i {
    font-size: 2.5rem;
    color: var(--bg-white);
}

.legal-title {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    word-break: keep-all;
    line-height: 1.3;
}

.legal-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

.legal-content {
    padding: 50px 40px;
    line-height: 1.8;
}

.legal-article {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.legal-article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.article-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary-color);
}

.article-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    width: auto;
    padding: 0 12px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--bg-white);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.article-name {
    color: var(--text-dark);
}

.article-content {
    padding-left: 65px;
    color: var(--text-dark);
}

.article-content p {
    margin-bottom: 15px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-list {
    margin: 15px 0;
    padding-left: 25px;
    list-style: none;
}

.article-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.contact-info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.contact-info p {
    margin-bottom: 10px;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    text-decoration: underline;
}

.legal-footer {
    padding: 30px 40px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: var(--primary-color);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.btn-back:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--bg-white);
}

.btn-back i {
    font-size: 1.1rem;
}

/* 법적 문서 페이지 반응형 */
@media (max-width: 768px) {
    .legal-document-box {
        margin: 20px auto;
    }
    
    .legal-header {
        padding: 35px 25px;
    }
    
    .legal-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    
    .legal-icon i {
        font-size: 2rem;
    }
    
    .legal-title {
        font-size: 1.3rem;
        word-break: keep-all;
        line-height: 1.3;
    }
    
    .legal-subtitle {
        font-size: 0.9rem;
    }
    
    .legal-content {
        padding: 30px 25px;
    }
    
    .legal-article {
        margin-bottom: 30px;
        padding-bottom: 25px;
    }
    
    .article-title {
        font-size: 1.2rem;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .article-number {
        min-width: 55px;
        width: auto;
        padding: 0 10px;
        height: 45px;
        font-size: 0.9rem;
    }
    
    .article-content {
        padding-left: 0;
        margin-top: 15px;
    }
    
    .article-content p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .article-list {
        padding-left: 20px;
    }
    
    .article-list li {
        padding-left: 22px;
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .contact-info {
        padding: 15px;
    }
    
    .legal-footer {
        padding: 25px 20px;
    }
    
    .btn-back {
        width: 100%;
        justify-content: center;
        padding: 14px 30px;
    }
}

@media (max-width: 480px) {
    .legal-header {
        padding: 30px 20px;
    }
    
    .legal-icon {
        width: 50px;
        height: 50px;
    }
    
    .legal-icon i {
        font-size: 1.5rem;
    }
    
    .legal-title {
        font-size: 1.1rem;
        word-break: keep-all;
        line-height: 1.3;
    }
    
    .legal-content {
        padding: 25px 20px;
    }
    
    .article-title {
        font-size: 1.1rem;
    }
    
    .article-number {
        min-width: 50px;
        width: auto;
        padding: 0 8px;
        height: 40px;
        font-size: 0.85rem;
    }
    
    .article-content p {
        font-size: 0.9rem;
    }
    
    .article-list li {
        font-size: 0.9rem;
    }
}

/* Scroll to Top 버튼 */
.scroll-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: none; /* JS에서 flex로 전환 */
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4) !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2147483647 !important; /* 브라우저 최대값으로 상향 */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.scroll-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.scroll-to-top:active {
    transform: translateY(-1px);
}

.scroll-to-top i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* 문의하기 모달 스타일 */
.contact-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh; /* 동적 뷰포트 높이 */
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.contact-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.contact-modal-container {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 85dvh; /* 높이 제한 강화 */
    overflow: hidden; 
    z-index: 10001;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    border-bottom: 2px solid #e0e0e0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    flex-shrink: 0;
}

.contact-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--bg-white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-modal-title i {
    font-size: 1.5rem;
}

.contact-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--bg-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.contact-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.contact-modal-body {
    padding: 30px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.contact-info-text {
    margin-bottom: 30px;
}

.contact-main-text {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 15px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-main-text i {
    color: var(--secondary-color);
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-privacy-text {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.8;
    padding: 15px 20px;
    background: #fff3cd;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}

.contact-privacy-text i {
    color: #ffc107;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-secret-image {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
}

.secret-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: transparent;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.privacy-illustration {
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 
                0 4px 12px rgba(0, 0, 0, 0.15),
                0 6px 20px rgba(0, 0, 0, 0.12);
    animation: floatIllustration 2.5s ease-in-out infinite;
}

@keyframes floatIllustration {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.contact-chat-bubbles {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.chat-bubble-left,
.chat-bubble-right {
    display: flex;
    max-width: 75%;
    animation: bubbleAppear 0.5s ease;
}

.chat-bubble-left {
    align-self: flex-start;
}

.chat-bubble-right {
    align-self: flex-end;
}

@keyframes bubbleAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-bubble-left .chat-bubble-content {
    background: var(--bg-white);
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    line-height: 1.6;
    color: var(--text-dark);
}

.chat-bubble-left .chat-bubble-content::before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--bg-white) transparent transparent;
}

.chat-bubble-right .chat-bubble-content {
    background: #FEE500;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    line-height: 1.6;
    color: #3C1E1E;
}

.chat-bubble-right .chat-bubble-content::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FEE500;
}

.chat-bubble-content {
    font-size: 0.95rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.contact-modal-footer {
    padding: 20px 30px;
    border-top: 2px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    text-align: center;
    flex-shrink: 0;
}

.kakao-friend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: #FEE500;
    color: #3C1E1E;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: bold;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(254, 229, 0, 0.3);
    border: 2px solid #FEE500;
}

.kakao-friend-btn:hover {
    background: #FDD835;
    border-color: #FDD835;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4);
    color: #3C1E1E;
}

.kakao-friend-btn i {
    font-size: 1.3rem;
}

.contact-link {
    cursor: pointer;
}

/* 로그아웃 확인 모달 최적화 */
#userLogoutConfirmModal .contact-modal-container {
    max-width: 420px;
    border-radius: 20px;
}

#userLogoutConfirmModal .contact-modal-header {
    padding: 18px 25px;
}

#userLogoutConfirmModal .contact-modal-title {
    font-size: 1.25rem;
}

#userLogoutConfirmModal .contact-modal-body {
    padding: 30px 25px;
}

#userLogoutConfirmModal .contact-main-text {
    padding: 15px 20px;
    font-size: 1.05rem;
    margin-bottom: 0;
    line-height: 1.6;
}

#userLogoutConfirmModal .contact-modal-footer {
    padding: 15px 25px 25px;
    border-top: none;
}

#userLogoutConfirmModal .btn {
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .contact-modal-container {
        width: 95%;
        max-height: 95vh;
    }
    
    .contact-modal-header {
        padding: 20px 25px;
    }
    
    .contact-modal-title {
        font-size: 1.3rem;
    }
    
    .contact-modal-body {
        padding: 25px 20px;
    }
    
    .contact-main-text {
        font-size: 1rem;
        padding: 12px 16px;
    }
    
    .contact-privacy-text {
        font-size: 0.95rem;
        padding: 12px 16px;
    }
    
    .secret-placeholder {
        width: 120px;
        height: 120px;
    }
    
    .privacy-illustration {
        max-width: 100px;
        max-height: 100px;
    }
    
    .contact-chat-bubbles {
        padding: 15px;
        gap: 12px;
    }
    
    .chat-bubble-left,
    .chat-bubble-right {
        max-width: 85%;
    }
    
    .chat-bubble-content {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
    
    .contact-modal-footer {
        padding: 18px 20px;
    }
    
    .kakao-friend-btn {
        padding: 14px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .contact-modal.active {
        align-items: flex-end; 
    }

    .contact-modal-container {
        width: 100%;
        max-height: 85svh; /* Small Viewport Height 사용 */
        border-radius: 20px 20px 0 0;
        margin-top: auto;
        margin-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom); /* iOS 하단 세이프 에어리어 */
    }

    .contact-modal-footer {
        padding: 15px 15px calc(15px + env(safe-area-inset-bottom)); /* 하단 버튼 영역에 세이프 에어리어 추가 */
    }
    
    .contact-modal-title {
        font-size: 1.1rem;
    }

    .contact-modal-close {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }
    
    .contact-modal-body {
        padding: 15px;
    }
    
    .contact-info-text {
        margin-bottom: 20px;
    }
    
    .contact-main-text {
        font-size: 0.9rem;
        padding: 10px 12px;
        flex-direction: row; /* 컬럼 대신 로우 유지 */
        align-items: center;
        gap: 8px;
    }
    
    .contact-privacy-text {
        font-size: 0.85rem;
        padding: 10px 12px;
        flex-direction: row; /* 컬럼 대신 로우 유지 */
        align-items: center;
        gap: 8px;
    }
    
    .contact-secret-image {
        margin: 15px 0;
        padding: 10px;
    }
    
    .secret-placeholder {
        width: 80px;
        height: 80px;
    }
    
    .privacy-illustration {
        max-width: 70px;
        max-height: 70px;
    }
    
    .contact-chat-bubbles {
        margin-top: 15px;
        padding: 12px;
    }
    
    .chat-bubble-content {
        font-size: 0.8rem;
        padding: 8px 10px;
    }
    
    .contact-modal-footer {
        padding: 15px;
    }
    
    .kakao-friend-btn {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* 일본 인기 사이트 모음 섹션 */
.jp-sites-section {
    padding: 60px 20px;
    background: var(--bg-light);
}

.jp-sites-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* 카테고리 탭 */
.jp-sites-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0 10px;
}

.jp-tab-btn {
    padding: 10px 24px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jp-tab-btn:hover {
    border-color: #e0e0e0;
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    background: #ffffff;
    transform: none;
    box-shadow: none;
}

.jp-tab-btn.active {
    background: #ffffff;
    border-color: #e0e0e0;
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
}

.jp-tab-btn.active:hover {
    background: #ffffff;
    border-color: #e0e0e0;
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

/* 사이트 카드 그리드 */
.jp-sites-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.jp-site-card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

/* 내정보 보안 시각화 영역 (경량 애니메이션) */
.profile-security-visual {
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.12), rgba(102, 126, 234, 0.12));
    display: flex;
    align-items: center;
    gap: 18px;
    overflow: hidden;
}

.profile-security-lock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-security-lock-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), rgba(102, 126, 234, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
    animation: securityPulse 3s ease-in-out infinite;
}

.profile-security-lock-icon i {
    color: #ffffff;
    font-size: 1.3rem;
}

.profile-security-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-security-line {
    position: relative;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
}

.profile-security-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.8), transparent);
    animation: securityScan 2.2s linear infinite;
}

.profile-security-line-2::before {
    animation-delay: 1s;
}

.profile-security-masked {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: rgba(30, 39, 46, 0.9);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes securityScan {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(260%);
        opacity: 0;
    }
}

@keyframes securityPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 18px rgba(102, 126, 234, 0.6);
    }
}

@media (max-width: 768px) {
    .profile-security-visual {
        padding: 10px 12px;
        gap: 12px;
    }

    .profile-security-lock-icon {
        width: 36px;
        height: 36px;
    }

    .profile-security-masked {
        font-size: 0.75rem;
    }
}

.jp-site-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.jp-site-card.hidden {
    display: none;
}

.jp-site-logo {
    width: 100%;
    max-width: 120px;
    height: 80px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jp-site-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.jp-site-logo-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    word-break: keep-all;
    line-height: 1.4;
}

.jp-site-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 10px;
    word-break: keep-all;
    line-height: 1.4;
}

/* 하단 고지 문구 */
.jp-sites-notice {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
    margin-top: 40px;
}

.jp-sites-notice p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* 반응형 디자인 - 태블릿 */
@media (max-width: 1023px) {
    .jp-sites-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .jp-sites-title {
        font-size: 1.7rem;
    }
    
    .jp-tab-btn {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

/* 반응형 디자인 - 모바일 */
@media (max-width: 767px) {
    .jp-sites-section {
        padding: 30px 10px; /* 40px 15px → 30px 10px로 축소 */
    }
    
    .jp-sites-title {
        font-size: 1.3rem; /* 1.4rem → 1.3rem로 축소 */
        margin-bottom: 25px; /* 30px → 25px로 축소 */
        padding: 0 10px; /* 좌우 패딩 추가 */
        word-break: keep-all; /* 단어 단위 줄바꿈 방지 */
        line-height: 1.3; /* 줄간격 축소 */
    }
    
    .jp-sites-tabs {
        gap: 6px; /* 8px → 6px로 축소 */
        margin-bottom: 25px; /* 30px → 25px로 축소 */
        padding: 0 5px; /* 좌우 패딩 축소 */
        justify-content: center; /* 모바일에서도 가운데 정렬로 유지 */
    }
    
    .jp-tab-btn {
        font-size: 0.8rem; /* 0.85rem → 0.8rem로 축소 */
        padding: 6px 12px; /* 8px 14px → 6px 12px로 축소 */
        white-space: nowrap; /* 이미 있지만 명시적으로 유지 */
        flex-shrink: 0; /* 버튼 크기 고정 */
    }
    
    .jp-sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* 15px → 12px로 축소 */
        margin-bottom: 25px; /* 30px → 25px로 축소 */
    }
    
    .jp-site-card {
        padding: 12px; /* 15px → 12px로 축소 */
        min-height: 120px; /* 130px → 120px로 축소 */
    }
    
    .jp-site-logo {
        max-width: 100px;
        height: 70px;
        margin-bottom: 10px;
    }
    
    .jp-site-name {
        font-size: 0.85rem; /* 0.9rem → 0.85rem로 축소 */
        margin-top: 6px; /* 8px → 6px로 축소 */
        word-break: keep-all; /* 단어 단위 줄바꿈 */
        line-height: 1.3; /* 줄간격 축소 */
    }
    
    .jp-sites-notice {
        padding: 15px 12px; /* 패딩 조정 */
        margin-top: 25px;
        border-radius: 12px;
        background: #fdfdfd;
    }
    
    .jp-sites-notice p {
        font-size: 0.8rem;
        line-height: 1.6;
        word-break: keep-all; /* 단어 단위 줄바꿈 방지 */
        text-wrap: balance; /* 줄 균형 조절 */
        padding: 0 5px;
        text-align: center;
    }
    
    /* container 패딩 모바일 최적화 */
    .jp-sites-section .container {
        padding: 0 10px; /* 기본 20px → 10px로 축소 */
    }
}

/* 매우 작은 모바일 */
@media (max-width: 480px) {
    .jp-sites-title {
        font-size: 1.1rem; /* 1.2rem → 1.1rem로 축소 */
        padding: 0 5px; /* 좌우 패딩 추가 */
    }
    
    .jp-tab-btn {
        font-size: 0.75rem; /* 0.8rem → 0.75rem로 축소 */
        padding: 5px 10px; /* 7px 12px → 5px 10px로 축소 */
    }
    
    .jp-sites-tabs {
        gap: 4px; /* 더 작은 간격 */
        padding: 0; /* 패딩 제거 */
    }
    
    .jp-site-card {
        min-height: 110px; /* 120px → 110px로 축소 */
        padding: 10px; /* 12px → 10px로 축소 */
    }
    
    .jp-site-logo {
        max-width: 80px;
        height: 60px;
    }
    
    .jp-site-name {
        font-size: 0.8rem; /* 0.85rem → 0.8rem로 축소 */
    }
    
    .jp-sites-notice {
        padding: 12px 10px;
    }
    
    .jp-sites-notice p {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    /* 로그아웃 모달 모바일 최적화 (풀스크린 방지) */
    #userLogoutConfirmModal .contact-modal-container {
        width: 88% !important;
        max-height: auto !important;
        border-radius: 20px !important;
        margin: auto !important;
    }
    
    #userLogoutConfirmModal .contact-modal-header {
        padding: 15px 20px !important;
        border-radius: 20px 20px 0 0 !important;
    }
    
    #userLogoutConfirmModal .contact-modal-title {
        font-size: 1.15rem !important;
    }
    
    #userLogoutConfirmModal .contact-modal-body {
        padding: 25px 20px !important;
    }
    
    #userLogoutConfirmModal .contact-main-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        flex-direction: row !important;
        text-align: left !important;
        gap: 10px !important;
    }
    
    #userLogoutConfirmModal .contact-modal-footer {
        padding: 10px 20px 20px !important;
    }
    
    #userLogoutConfirmModal .btn {
        padding: 10px !important;
        font-size: 0.95rem !important;
    }
}

/* ============================================
   회원 전용 마이페이지 스타일
   ============================================ */

/* main 영역
   - header / footer 밖에서만 flex 동작
   - 전체 높이: header, footer를 제외한 영역을 flex:1로 채움
   - 스크롤은 body에서 발생하도록 변경 (footer 고정 해제를 위해) */
.user-main {
    flex: 1 1 auto;
    background-color: var(--bg-light);
    padding: 0;
    display: flex;
    /* overflow: hidden 제거하여 body 레벨에서 스크롤 허용 */
}

/* 모바일 햄버거 메뉴 버튼 (회원 전용 페이지용) */
.user-menu-toggle {
    display: none; /* 기본적으로 숨김 (모바일에서만 표시) */
    position: fixed;
    top: 70px;
    left: 15px;
    z-index: 1001;
    background: var(--bg-white);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.user-menu-toggle:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.user-menu-toggle i {
    font-size: 1.3rem;
}

/* 사용자 컨테이너 */
.user-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0; /* 내부 스크롤용 */
    width: 100% !important;
    overflow-x: hidden !important; /* 가로 넘침 방지 강제 */
    box-sizing: border-box !important;
}

/* 좌측 사이드 메뉴 */
.user-sidebar {
    width: 240px; /* 280px에서 240px로 축소 */
    background: var(--bg-white);
    border-right: 1px solid #e0e0e0;
    height: 100%;
    overflow-y: auto;
    flex-shrink: 0;
}

.user-sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-sidebar-header h2 {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.user-sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-dark);
    cursor: pointer;
    padding: 5px;
    transition: var(--transition);
}

.user-sidebar-close:hover {
    color: var(--primary-color);
}

/* 메뉴 네비게이션 */
.user-menu {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: var(--text-dark);
    text-decoration: none;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.user-menu-item i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.user-menu-item:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.user-menu-item.active {
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.user-menu-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 10px 20px;
    border: none;
}

.user-menu-logout {
    color: #dc3545;
    margin-top: auto;
}

.user-menu-logout:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left-color: #dc3545;
}

/* 우측 콘텐츠 영역 */
.user-content {
    flex: 1 1 auto;
    padding: 30px 40px;
    min-height: 0;      /* flex 컨테이너 내에서 자식 높이 제한 */
    overflow-y: auto;   /* 우측 콘텐츠 영역만 세로 스크롤 */
    overflow-x: hidden !important; /* 가로 넘침 방지 강제 */
    box-sizing: border-box !important;
    width: 100% !important;
}

.user-content-header {
    margin-bottom: 30px;
}

.user-content-header h1 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0 0 8px 0;
}

.user-content-subtitle {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}

.user-content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 의뢰 카드 */
.user-request-card {
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.user-request-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.user-request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.user-request-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 5px 0;
}

.user-request-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

.user-request-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-received {
    background-color: #e3f2fd;
    color: #1976d2;
}

.status-purchased {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.status-shipping {
    background-color: #fff3e0;
    color: #e65100;
}

.status-delivered {
    background-color: #e8f5e9;
    color: #388e3c;
}

.user-request-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-request-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
}

.user-request-link i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.user-request-link a {
    color: var(--primary-color);
    text-decoration: none;
    word-break: break-all;
    transition: var(--transition);
}

.user-request-link a:hover {
    text-decoration: underline;
}

.user-request-description {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

/* 빈 상태 */
.user-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.user-empty-state i {
    font-size: 4rem;
    color: #e0e0e0;
    margin-bottom: 20px;
}

.user-empty-state p {
    font-size: 1.1rem;
    margin: 10px 0;
}

.user-empty-state-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* 내정보 보기 화면 하단 버튼 정렬 (항상 50% : 50%) */
.profile-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin: 0 auto;
}

.profile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    text-align: center;
}

/* 모바일 메뉴 오버레이 */
.user-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

/* 모바일 반응형 */
@media (max-width: 1023px) {
    .user-container {
        flex-direction: column;
    }

    /* 모바일에서는 사이드바 완전히 숨김 (상단 네비게이션 메뉴 사용) */
    .user-sidebar {
        display: none;
    }

    .user-content {
        padding: 20px 15px;
        width: 100%;
    }

    .user-content-header h1 {
        font-size: 1.5rem;
    }

    .user-menu-toggle {
        display: none; /* 모바일에서도 숨김 (상단 햄버거 메뉴 사용) */
    }

    .user-menu-overlay {
        display: none; /* 모바일에서도 숨김 */
    }

    .user-request-header {
        flex-direction: column;
        gap: 10px;
    }

    .user-request-status {
        align-self: flex-start;
    }
}

@media (max-width: 767px) {
    /* 모바일에서 footer 고정 해제 */
    .footer {
        position: relative !important;
        bottom: auto !important;
    }
    
    /* 회원 전용 페이지에서도 footer 고정 해제 */
    .user-area .footer {
        position: relative !important;
        bottom: auto !important;
        margin-top: 0 !important;
    }
    
    .user-content {
        padding: 15px;
    }

    .user-content-header h1 {
        font-size: 1.3rem;
    }

    .user-request-card {
        padding: 15px;
    }

    .user-request-info h3 {
        font-size: 1rem;
    }
}
/* ============================================
   ?�어�??�션 ?�계???�과 (Spring, Summer, Autumn, Winter)
   ============================================ */

#season-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* ?�어�?배경보다???? 콘텐츠보?�는 ?�래 */
    overflow: hidden;
}

/* ?�� �? 개나�?(Forsythia) 꽃잎 ?�과 */
.season-spring .petal {
    position: absolute;
    background-color: #ffeb3b; /* 개나�??��???*/
    border-radius: 150% 0 150% 0;
    opacity: 0.8;
    z-index: 1;
    animation: springFall linear infinite;
}

@keyframes springFall {
    0% {
        transform: translate(0, -10px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translate(100px, 100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ?�� ?�름: ?�도 (Wave) ?�과 */
.season-summer {
    display: flex;
    align-items: flex-end;
}

.season-summer .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    margin-bottom: -5px;
    min-height: 100px;
    max-height: 150px;
}

.season-summer .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.season-summer .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.season-summer .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.season-summer .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.season-summer .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes move-forever {
    0% { transform: translate3d(-90px,0,0); }
    100% { transform: translate3d(85px,0,0); }
}

/* ?�� 가?? ?�엽 (Maple) ?�과 */
.season-autumn .leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 1;
    animation: autumnFall linear infinite;
}

@keyframes autumnFall {
    0% {
        transform: translate(0, -20px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate(-100px, 100vh) rotate(360deg);
        opacity: 0;
    }
}

/* ?�️ 겨울: ?�박??(Snow) ?�과 */
.season-winter .snowflake {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.8;
    z-index: 1;
    filter: blur(1px);
    animation: winterSnow linear infinite;
}

@keyframes winterSnow {
    0% {
        transform: translateY(-10px) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}
/* ?�� ?�름: ?�도 (Wave) ?�과 */
.season-summer {
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.season-summer .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* ?�이 ?�간 증�? */
    margin-bottom: -5px;
    min-height: 100px;
    max-height: 150px;
    z-index: 2; /* 배경보다 ?�로 */
}

/* ?�도 ?�상?????�원???�색 계열�?강조 */
.season-summer .parallax > use:nth-child(1) { fill: rgba(255,255,255,0.3); animation-delay: -2s; animation-duration: 7s; }
.season-summer .parallax > use:nth-child(2) { fill: rgba(255,255,255,0.5); animation-delay: -3s; animation-duration: 10s; }
.season-summer .parallax > use:nth-child(3) { fill: rgba(255,255,255,0.2); animation-delay: -4s; animation-duration: 13s; }
.season-summer .parallax > use:nth-child(4) { fill: rgba(255,255,255,0.8); animation-delay: -5s; animation-duration: 20s; }

/* ============================================
   모바???�용 ?�어�?비주???��???   ============================================ */

.hero-main-visual-mobile {
    width: 100%;
    max-width: 400px;
    margin: 0 auto; /* 상단 마진 제거하여 정확한 중앙 배치 */
    position: relative;
    height: 380px; /* ?�당???�로 ???�보 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-visual-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* 중앙 정렬을 위한 추가 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 중앙 ?��???강조 */
.phone-mobile-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important; /* phoneFloat 애니메이션 override */
    z-index: 5;
    width: 140px !important; /* 100px → 140px로 확대 */
    height: 280px !important; /* 200px → 280px로 확대 */
    /* 정확한 중앙 정렬 보장 */
    margin: 0;
    /* phoneFloat 애니메이션 비활성화 */
    animation: none !important;
}

.phone-mobile-center .phone-frame {
    width: 140px !important;
    height: 280px !important;
    border-width: 8px !important;
}

.phone-mobile-center .phone-content i {
    font-size: 3.5rem !important; /* 2.5rem → 3.5rem로 확대 */
}

/* 모바?�용 말풍??공통 ?��???*/
/* 紐⑤컮?쇱슜 留먰뭾??怨듯넻 ?ㅽ???- 怨듭쟾 ?좊땲硫붿씠???곸슜 */
.m-chat {
    position: absolute;
    background: rgba(255, 255, 255, 0.3); /* 투명도 추가 (30% 불투명) */
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 3; /* 스마트폰(z-index: 5)보다 낮게 설정 */
    white-space: nowrap;
    /* 공전 애니메이션 적용 (각 말풍선마다 개별 설정) */
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    /* 추가 투명도 효과 */
    backdrop-filter: blur(2px);
}

/* 怨듭쟾 ?좊땲硫붿씠???ㅽ봽?덉엫 (媛?留먰뭾?좊쭏???ㅻⅨ ?띾룄?€ ?쒖옉 媛곷룄) */
@keyframes orbit1 {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes orbit2 {
    0% { transform: translate(-50%, -50%) rotate(45deg) translateX(130px) rotate(-45deg); }
    100% { transform: translate(-50%, -50%) rotate(405deg) translateX(130px) rotate(-405deg); }
}
@keyframes orbit3 {
    0% { transform: translate(-50%, -50%) rotate(90deg) translateX(140px) rotate(-90deg); }
    100% { transform: translate(-50%, -50%) rotate(450deg) translateX(140px) rotate(-450deg); }
}
@keyframes orbit4 {
    0% { transform: translate(-50%, -50%) rotate(135deg) translateX(125px) rotate(-135deg); }
    100% { transform: translate(-50%, -50%) rotate(495deg) translateX(125px) rotate(-495deg); }
}
@keyframes orbit5 {
    0% { transform: translate(-50%, -50%) rotate(180deg) translateX(135px) rotate(-180deg); }
    100% { transform: translate(-50%, -50%) rotate(540deg) translateX(135px) rotate(-540deg); }
}
@keyframes orbit6 {
    0% { transform: translate(-50%, -50%) rotate(225deg) translateX(130px) rotate(-225deg); }
    100% { transform: translate(-50%, -50%) rotate(585deg) translateX(130px) rotate(-585deg); }
}
@keyframes orbit7 {
    0% { transform: translate(-50%, -50%) rotate(270deg) translateX(140px) rotate(-270deg); }
    100% { transform: translate(-50%, -50%) rotate(630deg) translateX(140px) rotate(-630deg); }
}
@keyframes orbit8 {
    0% { transform: translate(-50%, -50%) rotate(315deg) translateX(120px) rotate(-315deg); }
    100% { transform: translate(-50%, -50%) rotate(675deg) translateX(120px) rotate(-675deg); }
}

/* 留먰뭾??媛쒕퀎 怨듭쟾 ?ㅼ젙 (?몃뱶??以묒떖?쇰줈 ?먰삎 沅ㅻ룄) */
.m-msg-1 { 
    animation: orbit1 20s linear infinite;
}
.m-msg-2 { 
    animation: orbit2 25s linear infinite;
}
.m-msg-3 { 
    animation: orbit3 30s linear infinite;
}
.m-msg-4 { 
    animation: orbit4 22s linear infinite;
}
.m-msg-5 { 
    animation: orbit5 28s linear infinite;
}
.m-msg-6 { 
    animation: orbit6 24s linear infinite;
}
.m-msg-7 { 
    animation: orbit7 26s linear infinite;
}
.m-msg-8 { 
    animation: orbit8 23s linear infinite;
    background: #ffeb3b !important;
    color: #000 !important;
}

/* 모바?�에??기존 PC ?��???강제 ?��? �?간격 조정 */
@media (max-width: 767px) {
    .hero-section {
        /* 1. 패딩을 구체적으로 설정 (상단 여백을 직접 통제) */
        padding: 50px 0 40px !important; 
        
        /* 2. min-height를 100vh 대신 유동적으로 변경 (주소창 문제 해결) */
        min-height: auto !important; 
        
        /* 3. 중앙 정렬(center) 대신 위쪽 정렬(flex-start)로 변경 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important; 
        align-items: center;
        
        /* 4. 헤더(70px) 공간만큼 확실히 띄워주기 */
        margin-top: 0; 
    }

    .hero-content {
        /* 콘텐츠 뭉치가 위로 붙도록 설정 */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 5px !important; /* 10px → 5px로 축소 */
    }
    .hero-slogan {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important; /* 20px → 8px로 대폭 축소 */
    }
    
    .hero-main-visual-mobile {
        margin-top: 5px !important; /* 상단 마진 추가하여 간격 조정 */
    }
    
    .kakao-btn {
        margin-top: 8px !important; /* 10px → 8px로 축소 */
    }
}

@keyframes orbit9 {
    0% { transform: translate(-50%, -50%) rotate(15deg) translateX(115px) rotate(-15deg); }
    100% { transform: translate(-50%, -50%) rotate(375deg) translateX(115px) rotate(-375deg); }
}
@keyframes orbit10 {
    0% { transform: translate(-50%, -50%) rotate(60deg) translateX(145px) rotate(-60deg); }
    100% { transform: translate(-50%, -50%) rotate(420deg) translateX(145px) rotate(-420deg); }
}
@keyframes orbit11 {
    0% { transform: translate(-50%, -50%) rotate(105deg) translateX(110px) rotate(-105deg); }
    100% { transform: translate(-50%, -50%) rotate(465deg) translateX(110px) rotate(-465deg); }
}
@keyframes orbit12 {
    0% { transform: translate(-50%, -50%) rotate(150deg) translateX(150px) rotate(-150deg); }
    100% { transform: translate(-50%, -50%) rotate(510deg) translateX(150px) rotate(-510deg); }
}
@keyframes orbit13 {
    0% { transform: translate(-50%, -50%) rotate(195deg) translateX(125px) rotate(-195deg); }
    100% { transform: translate(-50%, -50%) rotate(555deg) translateX(125px) rotate(-555deg); }
}
@keyframes orbit14 {
    0% { transform: translate(-50%, -50%) rotate(240deg) translateX(135px) rotate(-240deg); }
    100% { transform: translate(-50%, -50%) rotate(600deg) translateX(135px) rotate(-600deg); }
}
@keyframes orbit15 {
    0% { transform: translate(-50%, -50%) rotate(285deg) translateX(155px) rotate(-285deg); }
    100% { transform: translate(-50%, -50%) rotate(645deg) translateX(155px) rotate(-645deg); }
}
@keyframes orbit16 {
    0% { transform: translate(-50%, -50%) rotate(30deg) translateX(105px) rotate(-30deg); }
    100% { transform: translate(-50%, -50%) rotate(390deg) translateX(105px) rotate(-390deg); }
}
@keyframes orbit17 {
    0% { transform: translate(-50%, -50%) rotate(75deg) translateX(160px) rotate(-75deg); }
    100% { transform: translate(-50%, -50%) rotate(435deg) translateX(160px) rotate(-435deg); }
}
@keyframes orbit18 {
    0% { transform: translate(-50%, -50%) rotate(120deg) translateX(118px) rotate(-120deg); }
    100% { transform: translate(-50%, -50%) rotate(480deg) translateX(118px) rotate(-480deg); }
}
@keyframes orbit19 {
    0% { transform: translate(-50%, -50%) rotate(165deg) translateX(142px) rotate(-165deg); }
    100% { transform: translate(-50%, -50%) rotate(525deg) translateX(142px) rotate(-525deg); }
}
@keyframes orbit20 {
    0% { transform: translate(-50%, -50%) rotate(210deg) translateX(128px) rotate(-210deg); }
    100% { transform: translate(-50%, -50%) rotate(570deg) translateX(128px) rotate(-570deg); }
}
@keyframes orbit21 {
    0% { transform: translate(-50%, -50%) rotate(255deg) translateX(148px) rotate(-255deg); }
    100% { transform: translate(-50%, -50%) rotate(615deg) translateX(148px) rotate(-615deg); }
}
@keyframes orbit22 {
    0% { transform: translate(-50%, -50%) rotate(300deg) translateX(112px) rotate(-300deg); }
    100% { transform: translate(-50%, -50%) rotate(660deg) translateX(112px) rotate(-660deg); }
}
@keyframes orbit23 {
    0% { transform: translate(-50%, -50%) rotate(345deg) translateX(138px) rotate(-345deg); }
    100% { transform: translate(-50%, -50%) rotate(705deg) translateX(138px) rotate(-705deg); }
}
@keyframes orbit24 {
    0% { transform: translate(-50%, -50%) rotate(22.5deg) translateX(132px) rotate(-22.5deg); }
    100% { transform: translate(-50%, -50%) rotate(382.5deg) translateX(132px) rotate(-382.5deg); }
}

.m-msg-9 { 
    animation: orbit9 21s linear infinite;
}
.m-msg-10 { 
    animation: orbit10 27s linear infinite;
}
.m-msg-11 { 
    animation: orbit11 19s linear infinite;
}
.m-msg-12 { 
    animation: orbit12 29s linear infinite;
}
.m-msg-13 { 
    animation: orbit13 18s linear infinite;
}
.m-msg-14 { 
    animation: orbit14 32s linear infinite;
}
.m-msg-15 { 
    animation: orbit15 26s linear infinite;
}
.m-msg-16 { 
    animation: orbit16 22s linear infinite;
}
.m-msg-17 { 
    animation: orbit17 31s linear infinite;
}
.m-msg-18 { 
    animation: orbit18 20s linear infinite;
}
.m-msg-19 { 
    animation: orbit19 28s linear infinite;
}
.m-msg-20 { 
    animation: orbit20 24s linear infinite;
    background: #ffeb3b !important;
    color: #000 !important;
}
.m-msg-21 { 
    animation: orbit21 25s linear infinite;
}
.m-msg-22 { 
    animation: orbit22 23s linear infinite;
}
.m-msg-23 { 
    animation: orbit23 27s linear infinite;
}
.m-msg-24 { 
    animation: orbit24 21s linear infinite;
}

/* ============================================ */
/* 히어로 캐러셀 (Hero Carousel) 스타일 */
/* ============================================ */
#heroCarousel {
    position: relative;
    width: 100%;
    height: 700px; /* 데스크탑 기본 높이 */
    overflow: hidden;
    background-color: #000;
}

.carousel-item {
    height: 700px;
}

.hero-carousel-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-item.active .hero-carousel-bg {
    /* 확대 효과 제거됨 */
}

/* 캐러셀 링크 오버레이 */
.carousel-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
}

/* 캐러셀 인디케이터 스타일링 */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 6px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    width: 30px;
    border-radius: 10px;
    background-color: #fff;
    border-color: #fff;
}

/* 컨트롤 버튼 스타일링 */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next {
    opacity: 0.8;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background-size: 50%;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    #heroCarousel, .carousel-item {
        height: 450px; /* 모바일 높이 축소 */
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        display: none; /* 모바일에서는 화살표 숨김 (스와이프 위주) */
    }
    
    .carousel-indicators {
        bottom: 15px;
    }
}

/* 캐러셀 아이템이 없는 경우의 기본 섹션 */
.hero-section.no-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-align: center;
    color: #fff;
    padding: 100px 20px;
}