/**
 * Quant Helper - Mobile Optimized Styles
 * 모바일 최적화를 위한 전용 스타일시트
 */

/* ===== 모바일 브레이크포인트 변수 ===== */
:root {
    /* Breakpoints */
    --mobile-breakpoint-sm: 480px;    /* 작은 모바일 */
    --mobile-breakpoint-md: 768px;    /* 태블릿 / 큰 모바일 */
    --mobile-breakpoint-lg: 1024px;   /* 데스크톱 */
    
    /* Mobile-specific spacing */
    --mobile-header-height: 56px;
    --mobile-bottom-nav-height: 56px;
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    
    /* Touch target sizes */
    --mobile-touch-target: 44px;
    --mobile-touch-target-lg: 48px;
}

/* ===== 기본 모바일 리셋 ===== */
@media (max-width: 768px) {
    /* 터치 하이라이트 제거 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* iOS 자동 확대 방지 */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* 부드러운 스크롤 */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* body 패딩 조정 (하단 네비게이션 공간 확보) */
    body {
        padding-top: var(--mobile-header-height);
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
    }
}

/* ===== 모바일 유틸리티 클래스 ===== */

/* 모바일에서만 표시 */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    
    .mobile-only-flex {
        display: flex !important;
    }
    
    .mobile-only-inline {
        display: inline !important;
    }
}

/* 모바일에서 숨김 */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* 데스크톱에서만 표시 */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* ===== 모바일 헤더 ===== */
.mobile-header {
    display: none;
}

@media (max-width: 768px) {
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--mobile-header-height);
        background: var(--robinhood-bg-primary);
        border-bottom: 1px solid var(--robinhood-border-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--robinhood-space-3);
        z-index: var(--robinhood-z-fixed);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .mobile-header-back {
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--robinhood-text-primary);
        cursor: pointer;
        border-radius: var(--robinhood-radius-sm);
        transition: background var(--robinhood-transition-base);
    }
    
    .mobile-header-back:hover,
    .mobile-header-back:active {
        background: var(--robinhood-bg-secondary);
    }
    
    .mobile-header-back svg {
        width: 24px;
        height: 24px;
    }
    
    .mobile-header-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--robinhood-font-body-lg);
        font-weight: var(--robinhood-weight-semibold);
        color: var(--robinhood-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
    }
    
    .mobile-header-action {
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--robinhood-text-primary);
        cursor: pointer;
        border-radius: var(--robinhood-radius-sm);
    }
    
    .mobile-header-action svg {
        width: 24px;
        height: 24px;
    }
    
}

/* 데스크톱 헤더는 모바일에서 숨김 */
@media (max-width: 768px) {
    .robinhood-header {
        display: none !important;
    }
}

/* 모바일 헤더는 데스크톱에서 숨김 */
@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
}

/* ===== 하단 네비게이션 바 ===== */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--mobile-bottom-nav-height);
        background: var(--robinhood-bg-primary);
        border-top: 1px solid var(--robinhood-border-light);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: var(--robinhood-z-fixed);
        padding-bottom: var(--mobile-safe-area-bottom);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        transition: transform var(--robinhood-transition-base);
    }
    
    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 0;
        color: var(--robinhood-text-secondary);
        text-decoration: none;
        font-size: 10px;
        font-weight: var(--robinhood-weight-medium);
        transition: color var(--robinhood-transition-base);
        min-height: var(--mobile-touch-target);
    }
    
    .bottom-nav-item svg {
        width: 24px;
        height: 24px;
        transition: transform var(--robinhood-transition-base);
    }
    
    .bottom-nav-item.active {
        color: var(--robinhood-success);
    }
    
    .bottom-nav-item.active svg {
        transform: scale(1.1);
    }
    
    .bottom-nav-item:active {
        opacity: 0.7;
    }
    
    .bottom-nav-label {
        font-size: 10px;
        line-height: 1;
    }
    
    /* 버튼 형태의 네비게이션 아이템 */
    button.bottom-nav-item {
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: var(--robinhood-font-family);
    }
}

/* ===== 사이드 드로어 메뉴 ===== */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--robinhood-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--robinhood-transition-base), visibility var(--robinhood-transition-base);
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--robinhood-bg-primary);
    z-index: calc(var(--robinhood-z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--robinhood-transition-slow);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.drawer.open {
    transform: translateX(0);
}

.drawer-header {
    padding: var(--robinhood-space-6) var(--robinhood-space-4);
    border-bottom: 1px solid var(--robinhood-border-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.drawer-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--robinhood-space-1);
}

.drawer-user-name {
    font-size: var(--robinhood-font-heading-sm);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
}

.drawer-user-email {
    font-size: var(--robinhood-font-body-sm);
    color: var(--robinhood-text-secondary);
}

.drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--robinhood-bg-secondary);
    color: var(--robinhood-text-primary);
    border-radius: var(--robinhood-radius-sm);
    cursor: pointer;
    transition: background var(--robinhood-transition-base);
}

.drawer-close:hover,
.drawer-close:active {
    background: var(--robinhood-bg-tertiary);
}

.drawer-close svg {
    width: 20px;
    height: 20px;
}

.drawer-nav {
    flex: 1;
    padding: var(--robinhood-space-4);
    overflow-y: auto;
}

.drawer-nav-section {
    margin-bottom: var(--robinhood-space-4);
}

.drawer-nav-section-title {
    font-size: var(--robinhood-font-caption);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--robinhood-space-2) var(--robinhood-space-3);
}

.drawer-nav-item {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    padding: var(--robinhood-space-3) var(--robinhood-space-3);
    color: var(--robinhood-text-primary);
    text-decoration: none;
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    border-radius: var(--robinhood-radius-sm);
    transition: background var(--robinhood-transition-base);
    min-height: var(--mobile-touch-target);
}

.drawer-nav-item:hover,
.drawer-nav-item:active {
    background: var(--robinhood-bg-secondary);
}

.drawer-nav-item.active {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
}

.drawer-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.drawer-divider {
    height: 1px;
    background: var(--robinhood-border-light);
    margin: var(--robinhood-space-4) 0;
}

.drawer-footer {
    padding: var(--robinhood-space-4);
    border-top: 1px solid var(--robinhood-border-light);
}

.drawer-logout {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    padding: var(--robinhood-space-3);
    color: var(--robinhood-danger);
    text-decoration: none;
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    border-radius: var(--robinhood-radius-sm);
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    min-height: var(--mobile-touch-target);
    transition: background var(--robinhood-transition-base);
}

.drawer-logout:hover,
.drawer-logout:active {
    background: var(--robinhood-danger-light);
}

.drawer-logout svg {
    width: 20px;
    height: 20px;
}

/* ===== 모바일 카드 컴포넌트 ===== */
.mobile-card {
    background: var(--robinhood-bg-primary);
    border: 1px solid var(--robinhood-border-light);
    border-radius: var(--robinhood-radius-md);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-3);
    box-shadow: var(--robinhood-shadow-sm);
}

.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-3);
}

.mobile-card-title {
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
    font-size: var(--robinhood-font-body-lg);
}

.mobile-card-badge {
    padding: var(--robinhood-space-1) var(--robinhood-space-2);
    border-radius: var(--robinhood-radius-pill);
    font-size: var(--robinhood-font-caption);
    font-weight: var(--robinhood-weight-medium);
}

.mobile-card-badge.success {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
}

.mobile-card-badge.danger {
    background: var(--robinhood-danger-light);
    color: var(--robinhood-danger);
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--robinhood-space-2) 0;
    border-bottom: 1px solid var(--robinhood-border-light);
}

.mobile-card-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mobile-card-label {
    color: var(--robinhood-text-secondary);
    font-size: var(--robinhood-font-body-sm);
}

.mobile-card-value {
    font-weight: var(--robinhood-weight-medium);
    color: var(--robinhood-text-primary);
    font-size: var(--robinhood-font-body-sm);
}

.mobile-card-value.positive {
    color: var(--robinhood-success);
}

.mobile-card-value.negative {
    color: var(--robinhood-danger);
}

/* ===== 모바일 탭 컴포넌트 ===== */
.mobile-tabs {
    display: flex;
    background: var(--robinhood-bg-tertiary);
    border-radius: var(--robinhood-radius-sm);
    padding: 4px;
    margin-bottom: var(--robinhood-space-4);
}

.mobile-tab {
    flex: 1;
    padding: var(--robinhood-space-3) var(--robinhood-space-4);
    text-align: center;
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    color: var(--robinhood-text-secondary);
    border-radius: var(--robinhood-radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all var(--robinhood-transition-base);
    min-height: var(--mobile-touch-target);
}

.mobile-tab.active {
    background: var(--robinhood-bg-primary);
    color: var(--robinhood-text-primary);
    box-shadow: var(--robinhood-shadow-sm);
}

/* ===== 플로팅 액션 버튼 (FAB) - Step 3.3 ===== */
.fab {
    display: none;
}

@media (max-width: 768px) {
    .fab {
        position: fixed;
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 16px);
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: var(--robinhood-radius-full);
        background: var(--robinhood-success);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 200, 5, 0.4);
        z-index: calc(var(--robinhood-z-fixed) - 1);
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent;
    }
    
    .fab:active {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0, 200, 5, 0.3);
    }
    
    .fab svg {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
    }
    
    .fab.hidden {
        transform: translateY(100px);
        opacity: 0;
        pointer-events: none;
    }
    
    .fab.visible {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* FAB 레이블 (확장 FAB) */
    .fab-extended {
        width: auto;
        padding: 0 20px;
        border-radius: 28px;
        gap: 8px;
    }
    
    .fab-label {
        font-size: var(--robinhood-font-body-sm);
        font-weight: var(--robinhood-weight-semibold);
        white-space: nowrap;
    }
    
    /* FAB 색상 변형 */
    .fab.fab-primary {
        background: var(--robinhood-success);
        box-shadow: 0 4px 12px rgba(0, 200, 5, 0.4);
    }
    
    .fab.fab-secondary {
        background: var(--robinhood-bg-secondary);
        color: var(--robinhood-text-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .fab.fab-danger {
        background: var(--robinhood-danger);
        box-shadow: 0 4px 12px rgba(255, 80, 0, 0.4);
    }
    
    /* FAB 그룹 (서브 액션) */
    .fab-group {
        position: fixed;
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 16px);
        right: 16px;
        z-index: calc(var(--robinhood-z-fixed) - 1);
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 12px;
    }
    
    .fab-group .fab-main {
        width: 56px;
        height: 56px;
    }
    
    .fab-group .fab-sub {
        width: 48px;
        height: 48px;
        transform: scale(0);
        opacity: 0;
        transition: all 0.2s ease;
    }
    
    .fab-group.open .fab-sub {
        transform: scale(1);
        opacity: 1;
    }
    
    .fab-group.open .fab-main svg {
        transform: rotate(45deg);
    }
    
    .fab-sub-label {
        position: absolute;
        right: 60px;
        background: var(--robinhood-bg-secondary);
        color: var(--robinhood-text-primary);
        padding: 6px 12px;
        border-radius: var(--robinhood-radius-sm);
        font-size: var(--robinhood-font-body-xs);
        font-weight: var(--robinhood-weight-medium);
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateX(10px);
        transition: all 0.2s ease;
    }
    
    .fab-group.open .fab-sub-label {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* FAB 스크롤 시 숨김 애니메이션 */
    .fab.scroll-hidden {
        transform: translateY(100px) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }
    
    /* FAB 펄스 애니메이션 (주목 유도) */
    @keyframes fabPulse {
        0%, 100% {
            box-shadow: 0 4px 12px rgba(0, 200, 5, 0.4);
        }
        50% {
            box-shadow: 0 4px 24px rgba(0, 200, 5, 0.6);
        }
    }
    
    .fab.pulse {
        animation: fabPulse 2s ease-in-out infinite;
    }
}

/* ===== 모바일 폼 스타일 ===== */
@media (max-width: 768px) {
    .mobile-form-group {
        margin-bottom: var(--robinhood-space-4);
    }
    
    .mobile-form-label {
        display: block;
        font-size: var(--robinhood-font-body-sm);
        font-weight: var(--robinhood-weight-medium);
        color: var(--robinhood-text-secondary);
        margin-bottom: var(--robinhood-space-2);
    }
    
    .mobile-form-input {
        width: 100%;
        padding: var(--robinhood-space-3) var(--robinhood-space-4);
        font-size: 16px !important; /* iOS 확대 방지 */
        border: 1.5px solid var(--robinhood-border);
        border-radius: var(--robinhood-radius-sm);
        background: var(--robinhood-bg-primary);
        color: var(--robinhood-text-primary);
        transition: border-color var(--robinhood-transition-base), box-shadow var(--robinhood-transition-base);
        -webkit-appearance: none;
        appearance: none;
    }
    
    .mobile-form-input:focus {
        outline: none;
        border-color: var(--robinhood-success);
        box-shadow: 0 0 0 3px var(--robinhood-success-light);
    }
    
    .mobile-form-input::placeholder {
        color: var(--robinhood-text-tertiary);
    }
}

/* ===== 모바일 버튼 스타일 ===== */
@media (max-width: 768px) {
    .mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--robinhood-space-2);
        width: 100%;
        padding: var(--robinhood-space-4);
        font-size: var(--robinhood-font-body);
        font-weight: var(--robinhood-weight-semibold);
        border-radius: var(--robinhood-radius-pill);
        border: none;
        cursor: pointer;
        transition: all var(--robinhood-transition-base);
        min-height: var(--mobile-touch-target-lg);
    }
    
    .mobile-btn-primary {
        background: var(--robinhood-success);
        color: white;
    }
    
    .mobile-btn-primary:active {
        background: var(--robinhood-success-hover);
        transform: scale(0.98);
    }
    
    .mobile-btn-secondary {
        background: var(--robinhood-bg-secondary);
        color: var(--robinhood-text-primary);
        border: 1px solid var(--robinhood-border);
    }
    
    .mobile-btn-secondary:active {
        background: var(--robinhood-bg-tertiary);
    }
    
    .mobile-btn-danger {
        background: var(--robinhood-danger);
        color: white;
    }
    
    .mobile-btn-danger:active {
        background: var(--robinhood-danger-hover);
    }
}

/* ===== 모바일 리스트 스타일 ===== */
@media (max-width: 768px) {
    .mobile-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mobile-list-item {
        display: flex;
        align-items: center;
        gap: var(--robinhood-space-3);
        padding: var(--robinhood-space-4);
        background: var(--robinhood-bg-primary);
        border-bottom: 1px solid var(--robinhood-border-light);
        text-decoration: none;
        color: inherit;
        min-height: 56px;
        transition: background var(--robinhood-transition-base);
    }
    
    .mobile-list-item:first-child {
        border-radius: var(--robinhood-radius-md) var(--robinhood-radius-md) 0 0;
    }
    
    .mobile-list-item:last-child {
        border-bottom: none;
        border-radius: 0 0 var(--robinhood-radius-md) var(--robinhood-radius-md);
    }
    
    .mobile-list-item:only-child {
        border-radius: var(--robinhood-radius-md);
    }
    
    .mobile-list-item:active {
        background: var(--robinhood-bg-secondary);
    }
    
    .mobile-list-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--robinhood-bg-secondary);
        border-radius: var(--robinhood-radius-sm);
        flex-shrink: 0;
    }
    
    .mobile-list-content {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-list-title {
        font-weight: var(--robinhood-weight-medium);
        color: var(--robinhood-text-primary);
        font-size: var(--robinhood-font-body);
        margin-bottom: 2px;
    }
    
    .mobile-list-subtitle {
        font-size: var(--robinhood-font-body-sm);
        color: var(--robinhood-text-secondary);
    }
    
    .mobile-list-value {
        text-align: right;
        flex-shrink: 0;
    }
    
    .mobile-list-value-main {
        font-weight: var(--robinhood-weight-semibold);
        color: var(--robinhood-text-primary);
        font-size: var(--robinhood-font-body);
    }
    
    .mobile-list-value-sub {
        font-size: var(--robinhood-font-body-sm);
    }
    
    .mobile-list-value-sub.positive {
        color: var(--robinhood-success);
    }
    
    .mobile-list-value-sub.negative {
        color: var(--robinhood-danger);
    }
    
    .mobile-list-arrow {
        color: var(--robinhood-text-tertiary);
        flex-shrink: 0;
    }
    
    .mobile-list-arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* ===== 토스트 알림 - Step 3.4 ===== */
.toast-container {
    position: fixed;
    top: calc(var(--mobile-header-height) + 16px);
    left: 16px;
    right: 16px;
    z-index: var(--robinhood-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--robinhood-space-2);
    pointer-events: none;
}

.toast {
    background: var(--robinhood-text-primary);
    color: var(--robinhood-text-inverse);
    padding: var(--robinhood-space-3) var(--robinhood-space-4);
    border-radius: var(--robinhood-radius-md);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    pointer-events: auto;
    transform: translateY(-20px);
    opacity: 0;
    animation: toastIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    max-width: 100%;
    word-break: keep-all;
}

.toast.hide {
    animation: toastOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 토스트 유형별 스타일 */
.toast-success {
    background: var(--robinhood-success);
}

.toast-error {
    background: var(--robinhood-danger);
}

.toast-warning {
    background: #f59e0b;
}

.toast-info {
    background: #3b82f6;
}

/* 토스트 아이콘 */
.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.toast svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 토스트 콘텐츠 */
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-weight: var(--robinhood-weight-semibold);
    font-size: var(--robinhood-font-body-sm);
}

.toast-message {
    font-size: var(--robinhood-font-body-xs);
    opacity: 0.9;
}

/* 토스트 닫기 버튼 */
.toast-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    margin: -4px;
    margin-left: 8px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.toast-close:hover,
.toast-close:active {
    opacity: 1;
}

.toast-close svg {
    width: 16px;
    height: 16px;
}

/* 토스트 액션 버튼 */
.toast-action {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: inherit;
    padding: 6px 12px;
    border-radius: var(--robinhood-radius-sm);
    font-size: var(--robinhood-font-body-xs);
    font-weight: var(--robinhood-weight-semibold);
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.toast-action:hover,
.toast-action:active {
    background: rgba(255, 255, 255, 0.3);
}

/* 토스트 진행 표시줄 */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--robinhood-radius-md) var(--robinhood-radius-md);
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    transform-origin: left;
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

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

@keyframes toastOut {
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* 하단 토스트 (선택적) */
.toast-container.bottom {
    top: auto;
    bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 16px);
}

.toast-container.bottom .toast {
    transform: translateY(20px);
}

.toast-container.bottom .toast.hide {
    animation: toastOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastOutBottom {
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* ===== 로딩 스켈레톤 - Step 3.5 ===== */
.skeleton {
    background: linear-gradient(90deg, 
        var(--robinhood-bg-secondary) 25%, 
        var(--robinhood-bg-tertiary) 50%, 
        var(--robinhood-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--robinhood-radius-sm);
    position: relative;
    overflow: hidden;
}

/* 기본 텍스트 스켈레톤 */
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-text-sm {
    height: 12px;
    margin-bottom: 6px;
}

.skeleton-text-lg {
    height: 18px;
    margin-bottom: 10px;
}

/* 제목 스켈레톤 */
.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: 12px;
}

.skeleton-title-lg {
    height: 32px;
    width: 40%;
    margin-bottom: 16px;
}

/* 카드 스켈레톤 */
.skeleton-card {
    height: 120px;
    margin-bottom: 16px;
    border-radius: var(--robinhood-radius-md);
}

/* 아바타 스켈레톤 */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--robinhood-radius-full);
    flex-shrink: 0;
}

.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar-lg {
    width: 56px;
    height: 56px;
}

/* 버튼 스켈레톤 */
.skeleton-button {
    height: 44px;
    width: 100px;
    border-radius: var(--robinhood-radius-md);
}

.skeleton-button-full {
    width: 100%;
}

/* 이미지/차트 스켈레톤 */
.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--robinhood-radius-md);
}

.skeleton-chart {
    width: 100%;
    height: 250px;
    border-radius: var(--robinhood-radius-md);
}

/* 리스트 아이템 스켈레톤 */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    padding: var(--robinhood-space-4);
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-md);
    margin-bottom: var(--robinhood-space-3);
}

.skeleton-list-item .skeleton-content {
    flex: 1;
}

/* 계좌 카드 스켈레톤 */
.skeleton-account-card {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-3);
    border: 1px solid var(--robinhood-border-light);
}

.skeleton-account-card .skeleton-header {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    margin-bottom: var(--robinhood-space-4);
}

.skeleton-account-card .skeleton-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--robinhood-radius-md);
}

.skeleton-account-card .skeleton-info {
    flex: 1;
}

.skeleton-account-card .skeleton-actions {
    display: flex;
    gap: var(--robinhood-space-2);
    margin-top: var(--robinhood-space-3);
}

/* 주문 카드 스켈레톤 */
.skeleton-order-card {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-md);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-3);
    border: 1px solid var(--robinhood-border-light);
}

.skeleton-order-card .skeleton-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-2);
}

.skeleton-order-card .skeleton-row:last-child {
    margin-bottom: 0;
}

/* 대시보드 히어로 스켈레톤 */
.skeleton-hero {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-6);
    margin-bottom: var(--robinhood-space-4);
    text-align: center;
}

.skeleton-hero .skeleton-value {
    height: 48px;
    width: 60%;
    margin: 0 auto var(--robinhood-space-2);
}

.skeleton-hero .skeleton-label {
    height: 16px;
    width: 40%;
    margin: 0 auto;
}

/* 테이블 스켈레톤 */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
}

.skeleton-table-row {
    display: flex;
    gap: var(--robinhood-space-3);
    padding: var(--robinhood-space-3) 0;
    border-bottom: 1px solid var(--robinhood-border-light);
}

.skeleton-table-cell {
    flex: 1;
    height: 14px;
}

.skeleton-table-cell:first-child {
    flex: 2;
}

/* 탭 스켈레톤 */
.skeleton-tabs {
    display: flex;
    gap: var(--robinhood-space-2);
    margin-bottom: var(--robinhood-space-4);
}

.skeleton-tab {
    height: 36px;
    flex: 1;
    border-radius: var(--robinhood-radius-md);
}

/* 통계 카드 스켈레톤 */
.skeleton-stat-card {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-md);
    padding: var(--robinhood-space-4);
    text-align: center;
}

.skeleton-stat-value {
    height: 32px;
    width: 50%;
    margin: 0 auto var(--robinhood-space-2);
}

.skeleton-stat-label {
    height: 12px;
    width: 70%;
    margin: 0 auto;
}

/* 스켈레톤 펄스 효과 (대안) */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 로딩 오버레이 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--robinhood-z-modal);
    gap: var(--robinhood-space-4);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--robinhood-bg-tertiary);
    border-top-color: var(--robinhood-success);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: var(--robinhood-font-body);
    color: var(--robinhood-text-secondary);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 인라인 로딩 스피너 */
.inline-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--robinhood-bg-tertiary);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: var(--robinhood-space-2);
}

/* 버튼 로딩 상태 */
.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 콘텐츠 로딩 페이드 */
.content-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.content-loaded {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Pull to Refresh (Step 3.1) ===== */
.pull-to-refresh {
    position: fixed;
    top: var(--mobile-header-height);
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--robinhood-space-2);
    padding: var(--robinhood-space-3) var(--robinhood-space-4);
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-pill);
    box-shadow: var(--robinhood-shadow-lg);
    z-index: calc(var(--robinhood-z-fixed) - 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.pull-to-refresh.visible {
    opacity: 1;
}

.pull-refresh-content {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pull-refresh-arrow {
    width: 20px;
    height: 20px;
    color: var(--robinhood-success);
    transition: transform 0.2s ease;
}

.pull-refresh-spinner {
    position: absolute;
    width: 24px;
    height: 24px;
    color: var(--robinhood-success);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pull-to-refresh.refreshing .pull-refresh-arrow {
    opacity: 0;
}

.pull-to-refresh.refreshing .pull-refresh-spinner {
    opacity: 1;
    animation: spin 0.8s linear infinite;
}

.pull-refresh-text {
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    color: var(--robinhood-text-secondary);
    white-space: nowrap;
}

.pull-to-refresh.refreshing .pull-refresh-text {
    color: var(--robinhood-success);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 다크 모드 지원 (비활성화) */
/*
@media (prefers-color-scheme: dark) {
    .pull-to-refresh {
        background: #1a1a1a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
}
*/

/* ===== 스와이프 가능 카드 (Step 3.2) ===== */
.swipeable-card {
    position: relative;
    overflow: hidden;
    background: var(--robinhood-bg-primary);
}

.swipeable-content {
    position: relative;
    z-index: 2;
    background: var(--robinhood-bg-primary);
    transition: transform 0.3s ease;
    will-change: transform;
}

/* 스와이프 액션 영역 */
.swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--robinhood-space-4);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.swipe-action-left {
    left: 0;
    background: linear-gradient(90deg, var(--robinhood-success) 0%, var(--robinhood-success) 80%, transparent 100%);
    color: white;
}

.swipe-action-right {
    right: 0;
    background: linear-gradient(-90deg, var(--robinhood-danger) 0%, var(--robinhood-danger) 80%, transparent 100%);
    color: white;
}

.swipe-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-1);
    padding: var(--robinhood-space-3);
    color: white;
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    cursor: pointer;
    border: none;
    background: transparent;
    min-width: 60px;
}

.swipe-action-btn svg {
    width: 24px;
    height: 24px;
}

.swipe-action-btn:active {
    opacity: 0.8;
    transform: scale(0.95);
}

/* 스와이프 힌트 애니메이션 */
@keyframes swipeHint {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

.swipeable-card.show-hint .swipeable-content {
    animation: swipeHint 1s ease-in-out 2;
}

/* 삭제 확인 상태 */
.swipeable-card.confirm-delete .swipeable-content {
    transform: translateX(-100%) !important;
}

.swipeable-card.confirm-delete .swipe-action-right {
    width: 100%;
    opacity: 1;
    justify-content: center;
    background: var(--robinhood-danger);
}

.confirm-delete-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-4);
    width: 100%;
}

.confirm-delete-text {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    color: white;
}

.confirm-delete-btn {
    padding: var(--robinhood-space-2) var(--robinhood-space-4);
    border-radius: var(--robinhood-radius-sm);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-semibold);
    cursor: pointer;
    border: none;
}

.confirm-delete-btn.cancel {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.confirm-delete-btn.confirm {
    background: white;
    color: var(--robinhood-danger);
}

/* 스와이프 탭 전환 */
.swipeable-tabs-container {
    overflow: hidden;
}

.swipeable-tabs-panels {
    display: flex;
    transition: transform 0.3s ease;
}

.swipeable-tabs-panels .mobile-tab-panel {
    flex-shrink: 0;
    width: 100%;
}

/* 스와이프 인디케이터 */
.swipe-indicator {
    display: flex;
    justify-content: center;
    gap: var(--robinhood-space-2);
    padding: var(--robinhood-space-3);
}

.swipe-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--robinhood-bg-tertiary);
    transition: all 0.3s ease;
}

.swipe-indicator-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--robinhood-success);
}

/* ===== 반응형 그리드 조정 ===== */
@media (max-width: 768px) {
    /* 그리드를 1열로 변경 */
    .account-grid,
    .menu-grid,
    .summary-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 작은 모바일에서 요약 카드 2열 */
    .summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--robinhood-space-2) !important;
    }
    
    /* 컨테이너 패딩 조정 */
    .container,
    .robinhood-container {
        padding-left: var(--robinhood-space-3) !important;
        padding-right: var(--robinhood-space-3) !important;
    }
}

/* ===== 테이블 모바일 대응 ===== */
@media (max-width: 768px) {
    /* 테이블 가로 스크롤 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--robinhood-space-3));
        padding: 0 var(--robinhood-space-3);
    }
    
    /* 테이블 최소 너비 */
    .table-responsive table {
        min-width: 600px;
    }
}

/* ===== 모달 모바일 대응 ===== */
@media (max-width: 768px) {
    .modal-content {
        width: 100% !important;
        max-width: none !important;
        min-height: 50vh;
        border-radius: var(--robinhood-radius-lg) var(--robinhood-radius-lg) 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
        transition: transform var(--robinhood-transition-slow) !important;
    }
    
    .modal.show .modal-content {
        transform: translateY(0) !important;
    }
    
    /* 모달 핸들 */
    .modal-handle {
        width: 40px;
        height: 4px;
        background: var(--robinhood-border-dark);
        border-radius: var(--robinhood-radius-pill);
        margin: 12px auto 0;
    }
}

/* ===== 터치 최적화 (Step 1.5) ===== */
@media (max-width: 768px) {
    /* 모든 버튼 터치 타겟 최소 44px */
    button,
    [type="button"],
    [type="submit"],
    [type="reset"],
    .btn,
    .robinhood-btn {
        min-height: var(--mobile-touch-target);
        min-width: var(--mobile-touch-target);
        padding: var(--robinhood-space-3) var(--robinhood-space-4);
    }
    
    /* 링크 터치 영역 확대 */
    a {
        display: inline-block;
        padding: var(--robinhood-space-1) 0;
    }
    
    /* 네비게이션 링크는 충분한 터치 영역 */
    nav a,
    .nav a,
    .robinhood-nav-link {
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
    }
    
    /* 입력 필드 터치 최적화 */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        min-height: var(--mobile-touch-target-lg);
        padding: var(--robinhood-space-3) var(--robinhood-space-4);
        font-size: 16px !important; /* iOS 확대 방지 */
        border-radius: var(--robinhood-radius-sm);
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* 체크박스/라디오 터치 영역 */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-right: var(--robinhood-space-3);
    }
    
    /* 체크박스/라디오 라벨 터치 영역 확대 */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex;
        align-items: center;
        min-height: var(--mobile-touch-target);
        padding: var(--robinhood-space-2) 0;
        cursor: pointer;
    }
    
    /* 폼 그룹 간격 */
    .form-group,
    .input-box,
    .mobile-form-group {
        margin-bottom: var(--robinhood-space-4);
    }
    
    /* 카드 터치 피드백 */
    .card,
    .mobile-card,
    .robinhood-card {
        transition: transform var(--robinhood-transition-fast), 
                    box-shadow var(--robinhood-transition-fast);
    }
    
    .card:active,
    .mobile-card:active,
    .robinhood-card:active {
        transform: scale(0.98);
    }
    
    /* 리스트 아이템 터치 영역 */
    .list-item,
    .mobile-list-item,
    li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: var(--robinhood-space-3) var(--robinhood-space-4);
    }
    
    /* 터치 피드백 효과 */
    .touch-feedback {
        position: relative;
        overflow: hidden;
    }
    
    .touch-feedback::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }
    
    .touch-feedback:active::after {
        width: 200%;
        height: 200%;
    }
    
    /* 스크롤 스냅 (선택적) */
    .scroll-snap-x {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .scroll-snap-x > * {
        scroll-snap-align: start;
    }
    
    /* 드래그 방지 (이미지, 텍스트 선택) */
    .no-select {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    /* 이미지 드래그 방지 */
    img {
        -webkit-user-drag: none;
        user-drag: none;
    }
    
    /* 테이블 셀 터치 최적화 */
    th, td {
        padding: var(--robinhood-space-3) var(--robinhood-space-2);
        min-height: 44px;
        vertical-align: middle;
    }
    
    /* 드롭다운/셀렉트 터치 최적화 */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235D5D5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }
    
    /* 액션 버튼 그룹 (고정 하단) */
    .action-buttons-fixed {
        position: fixed;
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
        left: 0;
        right: 0;
        background: var(--robinhood-bg-primary);
        padding: var(--robinhood-space-3) var(--robinhood-space-4);
        border-top: 1px solid var(--robinhood-border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: calc(var(--robinhood-z-fixed) - 2);
        display: flex;
        gap: var(--robinhood-space-3);
    }
    
    .action-buttons-fixed button {
        flex: 1;
    }
    
    /* 스와이프 액션 힌트 */
    .swipe-hint {
        position: relative;
    }
    
    .swipe-hint::before {
        content: '← 스와이프';
        position: absolute;
        right: -60px;
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--robinhood-font-caption);
        color: var(--robinhood-text-tertiary);
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .swipe-hint:hover::before {
        opacity: 1;
    }
    
    /* 긴 텍스트 줄임 */
    .text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 2줄 줄임 */
    .text-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* 숫자 입력 시 숫자 키패드 표시를 위한 클래스 */
    .input-numeric {
        inputmode: numeric;
        pattern: "[0-9]*";
    }
    
    /* 금액 입력 (쉼표 허용) */
    .input-currency {
        inputmode: decimal;
    }
    
    /* 긴 버튼 (전체 너비) */
    .btn-block {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== 모바일 총 자산 요약 카드 (Step 2.1) ===== */
.mobile-summary-hero {
    background: linear-gradient(135deg, var(--robinhood-success) 0%, #00A004 100%);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-5);
    margin-bottom: var(--robinhood-space-4);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 200, 5, 0.3);
}

.mobile-summary-main {
    text-align: center;
    margin-bottom: var(--robinhood-space-4);
}

.mobile-summary-label {
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--robinhood-space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-summary-value {
    font-size: 36px;
    font-weight: var(--robinhood-weight-bold);
    color: white;
    line-height: 1.1;
    margin-bottom: var(--robinhood-space-2);
}

.mobile-summary-change {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--robinhood-space-1);
}

.mobile-summary-change.positive {
    color: #c6ffca;
}

.mobile-summary-change.negative {
    color: #ffcccc;
}

.mobile-summary-daily {
    font-size: var(--robinhood-font-body-sm);
    background: rgba(255, 255, 255, 0.2);
    padding: var(--robinhood-space-1) var(--robinhood-space-3);
    border-radius: var(--robinhood-radius-pill);
    margin-top: var(--robinhood-space-1);
}

.mobile-summary-empty {
    font-size: var(--robinhood-font-body-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--robinhood-space-2);
}

.mobile-summary-stats {
    display: flex;
    justify-content: center;
    gap: var(--robinhood-space-6);
    padding-top: var(--robinhood-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mobile-summary-stat-value {
    font-size: var(--robinhood-font-heading-sm);
    font-weight: var(--robinhood-weight-bold);
    color: white;
}

.mobile-summary-stat-label {
    font-size: var(--robinhood-font-caption);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
}

/* ===== 모바일 계좌 카드 리스트 (Step 2.2) ===== */
.mobile-account-list {
    display: flex;
    flex-direction: column;
    gap: var(--robinhood-space-3);
}

.mobile-account-card {
    background: var(--robinhood-bg-primary);
    border: 1px solid var(--robinhood-border-light);
    border-radius: var(--robinhood-radius-md);
    padding: var(--robinhood-space-4);
    box-shadow: var(--robinhood-shadow-sm);
}

.mobile-account-header {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-3);
    margin-bottom: var(--robinhood-space-3);
}

.mobile-account-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--robinhood-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--robinhood-bg-secondary);
    flex-shrink: 0;
}

.mobile-account-icon.weedaeri {
    background: #dbeafe;
}

.mobile-account-icon.dongpa {
    background: #fee2e2;
}

.mobile-account-info {
    flex: 1;
    min-width: 0;
}

.mobile-account-name {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-account-strategy {
    font-size: var(--robinhood-font-body-sm);
    color: var(--robinhood-text-secondary);
    margin-top: 2px;
}

.mobile-account-profit {
    text-align: right;
    flex-shrink: 0;
}

.mobile-account-rate {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-bold);
    color: var(--robinhood-text-primary);
}

.mobile-account-profit.positive .mobile-account-rate {
    color: var(--robinhood-success);
}

.mobile-account-profit.negative .mobile-account-rate {
    color: var(--robinhood-danger);
}

.mobile-account-pnl {
    font-size: var(--robinhood-font-body-sm);
    color: var(--robinhood-text-secondary);
    margin-top: 2px;
}

.mobile-account-profit.positive .mobile-account-pnl {
    color: var(--robinhood-success);
}

.mobile-account-profit.negative .mobile-account-pnl {
    color: var(--robinhood-danger);
}

.mobile-account-actions {
    display: flex;
    gap: var(--robinhood-space-2);
    padding-top: var(--robinhood-space-3);
    border-top: 1px solid var(--robinhood-border-light);
}

.mobile-account-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-2);
    padding: var(--robinhood-space-3);
    background: var(--robinhood-bg-secondary);
    border: 1px solid var(--robinhood-border-light);
    border-radius: var(--robinhood-radius-sm);
    color: var(--robinhood-text-primary);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    text-decoration: none;
    transition: all var(--robinhood-transition-base);
    min-height: 44px;
}

.mobile-account-btn:active {
    background: var(--robinhood-bg-tertiary);
    transform: scale(0.98);
}

.mobile-account-btn svg {
    flex-shrink: 0;
}

.mobile-account-btn-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--robinhood-bg-secondary);
    border: 1px solid var(--robinhood-border-light);
    border-radius: var(--robinhood-radius-sm);
    color: var(--robinhood-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-account-btn-icon:active {
    background: var(--robinhood-bg-tertiary);
}

.mobile-add-account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-2);
    padding: var(--robinhood-space-4);
    background: transparent;
    border: 2px dashed var(--robinhood-border);
    border-radius: var(--robinhood-radius-md);
    color: var(--robinhood-text-secondary);
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-medium);
    cursor: pointer;
    transition: all var(--robinhood-transition-base);
    min-height: 56px;
    width: 100%;
}

.mobile-add-account-btn:active {
    border-color: var(--robinhood-success);
    color: var(--robinhood-success);
    background: var(--robinhood-success-light);
}

.mobile-add-icon {
    font-size: 20px;
    font-weight: var(--robinhood-weight-bold);
}

/* 빈 상태 (Empty State) */
.mobile-empty-state {
    text-align: center;
    padding: var(--robinhood-space-8) var(--robinhood-space-4);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--robinhood-radius-lg);
    border: 2px dashed #bae6fd;
}

.mobile-empty-icon {
    font-size: 48px;
    margin-bottom: var(--robinhood-space-4);
}

.mobile-empty-state h3 {
    font-size: var(--robinhood-font-heading-md);
    font-weight: var(--robinhood-weight-semibold);
    color: #0c4a6e;
    margin: 0 0 var(--robinhood-space-2) 0;
}

.mobile-empty-state p {
    font-size: var(--robinhood-font-body);
    color: #075985;
    margin: 0;
}

/* ===== 모바일 주문 요약 카드 (Step 2.3) ===== */
.mobile-order-summary {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-4);
    box-shadow: var(--robinhood-shadow-md);
    border: 1px solid var(--robinhood-border-light);
}

.mobile-order-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-4);
    padding-bottom: var(--robinhood-space-3);
    border-bottom: 1px solid var(--robinhood-border-light);
}

.mobile-order-summary-date {
    display: flex;
    flex-direction: column;
}

.mobile-order-date-label {
    font-size: var(--robinhood-font-caption);
    color: var(--robinhood-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-order-date-value {
    font-size: var(--robinhood-font-heading-sm);
    font-weight: var(--robinhood-weight-bold);
    color: var(--robinhood-text-primary);
}

.mobile-order-summary-mode {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
    padding: var(--robinhood-space-1) var(--robinhood-space-3);
    border-radius: var(--robinhood-radius-pill);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-semibold);
}

.mobile-order-summary-stats {
    display: flex;
    justify-content: space-around;
    gap: var(--robinhood-space-2);
    margin-bottom: var(--robinhood-space-4);
}

.mobile-order-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: var(--robinhood-space-3);
    background: var(--robinhood-bg-secondary);
    border-radius: var(--robinhood-radius-sm);
}

.mobile-order-stat-icon {
    font-size: 20px;
    margin-bottom: var(--robinhood-space-1);
}

.mobile-order-stat-icon.buy {
    color: var(--robinhood-success);
}

.mobile-order-stat-icon.sell {
    color: var(--robinhood-danger);
}

.mobile-order-stat-label {
    font-size: var(--robinhood-font-caption);
    color: var(--robinhood-text-tertiary);
    margin-bottom: 2px;
}

.mobile-order-stat-value {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-bold);
    color: var(--robinhood-text-primary);
}

.mobile-order-stat.positive .mobile-order-stat-value {
    color: var(--robinhood-success);
}

.mobile-order-stat.negative .mobile-order-stat-value {
    color: var(--robinhood-danger);
}

.mobile-order-summary-profit {
    display: flex;
    gap: var(--robinhood-space-4);
    padding-top: var(--robinhood-space-3);
    border-top: 1px solid var(--robinhood-border-light);
}

.mobile-order-profit-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mobile-order-profit-label {
    font-size: var(--robinhood-font-caption);
    color: var(--robinhood-text-tertiary);
    margin-bottom: 2px;
}

.mobile-order-profit-value {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
}

.mobile-order-profit-item.positive .mobile-order-profit-value {
    color: var(--robinhood-success);
}

.mobile-order-profit-item.negative .mobile-order-profit-value {
    color: var(--robinhood-danger);
}

/* ===== 모바일 주문 탭 + 카드 (Step 2.4) ===== */
.mobile-order-tabs-container {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-4);
    box-shadow: var(--robinhood-shadow-md);
    border: 2px solid var(--robinhood-success);
}

.mobile-order-tabs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-4);
}

.mobile-order-tabs-title {
    font-size: var(--robinhood-font-heading-sm);
    font-weight: var(--robinhood-weight-bold);
    color: var(--robinhood-text-primary);
    margin: 0;
}

.mobile-order-refresh-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--robinhood-bg-secondary);
    border: 1px solid var(--robinhood-border);
    border-radius: var(--robinhood-radius-sm);
    color: var(--robinhood-text-secondary);
    cursor: pointer;
    transition: all var(--robinhood-transition-base);
}

.mobile-order-refresh-btn:active {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
    border-color: var(--robinhood-success);
}

.mobile-order-refresh-btn svg {
    width: 18px;
    height: 18px;
}

/* 탭 카운트 배지 */
.mobile-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--robinhood-bg-tertiary);
    border-radius: var(--robinhood-radius-pill);
    font-size: var(--robinhood-font-caption);
    font-weight: var(--robinhood-weight-semibold);
    margin-left: var(--robinhood-space-1);
}

.mobile-tab.active .mobile-tab-count {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
}

/* 주문 패널 */
.mobile-order-panel {
    display: flex;
    flex-direction: column;
    gap: var(--robinhood-space-3);
    margin-top: var(--robinhood-space-3);
}

/* 주문 카드 */
.mobile-order-card {
    background: var(--robinhood-bg-secondary);
    border-radius: var(--robinhood-radius-md);
    padding: var(--robinhood-space-4);
    border-left: 4px solid var(--robinhood-border);
}

.mobile-order-card.sell {
    border-left-color: var(--robinhood-danger);
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
}

.mobile-order-card.buy {
    border-left-color: var(--robinhood-success);
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f9e7 100%);
}

.mobile-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-3);
}

.mobile-order-type-badge {
    padding: var(--robinhood-space-1) var(--robinhood-space-3);
    border-radius: var(--robinhood-radius-pill);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-semibold);
}

.mobile-order-type-badge.sell {
    background: var(--robinhood-danger-light);
    color: var(--robinhood-danger);
}

.mobile-order-type-badge.buy {
    background: var(--robinhood-success-light);
    color: var(--robinhood-success);
}

.mobile-order-order-type {
    font-size: var(--robinhood-font-caption);
    font-weight: var(--robinhood-weight-medium);
    color: var(--robinhood-text-tertiary);
    background: var(--robinhood-bg-primary);
    padding: var(--robinhood-space-1) var(--robinhood-space-2);
    border-radius: var(--robinhood-radius-sm);
    border: 1px solid var(--robinhood-border-light);
}

.mobile-order-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--robinhood-space-2);
}

.mobile-order-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-order-label {
    font-size: var(--robinhood-font-body-sm);
    color: var(--robinhood-text-secondary);
}

.mobile-order-value {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
}

.mobile-order-card-footer {
    margin-top: var(--robinhood-space-3);
    padding-top: var(--robinhood-space-3);
    border-top: 1px solid var(--robinhood-border-light);
}

.mobile-order-copy-btn {
    width: 100%;
    padding: var(--robinhood-space-3);
    background: var(--robinhood-bg-primary);
    border: 1px solid var(--robinhood-border);
    border-radius: var(--robinhood-radius-sm);
    color: var(--robinhood-text-primary);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    cursor: pointer;
    transition: all var(--robinhood-transition-base);
    min-height: 44px;
}

.mobile-order-copy-btn:active {
    background: var(--robinhood-success-light);
    border-color: var(--robinhood-success);
    color: var(--robinhood-success);
}

/* 빈 상태 */
.mobile-order-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--robinhood-space-8);
    color: var(--robinhood-text-tertiary);
    text-align: center;
}

.mobile-order-empty-icon {
    font-size: 32px;
    margin-bottom: var(--robinhood-space-2);
}

/* ===== 모바일 대시보드 히어로 (Step 2.6) ===== */
.mobile-dashboard-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-5);
    margin-bottom: var(--robinhood-space-4);
    color: white;
    box-shadow: 0 4px 20px rgba(15, 52, 96, 0.4);
}

.mobile-dashboard-value-section {
    text-align: center;
    margin-bottom: var(--robinhood-space-4);
}

.mobile-dashboard-label {
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--robinhood-space-1);
}

.mobile-dashboard-value {
    font-size: 32px;
    font-weight: var(--robinhood-weight-bold);
    color: white;
    line-height: 1.1;
    margin-bottom: var(--robinhood-space-2);
}

.mobile-dashboard-change {
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-2);
}

.mobile-dashboard-change.positive {
    color: #4ade80;
}

.mobile-dashboard-change.negative {
    color: #f87171;
}

.mobile-dashboard-pnl {
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    color: rgba(255, 255, 255, 0.8);
}

.mobile-dashboard-metrics {
    display: flex;
    justify-content: space-around;
    gap: var(--robinhood-space-3);
    padding: var(--robinhood-space-4) 0;
    margin-bottom: var(--robinhood-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-dashboard-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.mobile-dashboard-metric.positive .mobile-dashboard-metric-value {
    color: #4ade80;
}

.mobile-dashboard-metric.negative .mobile-dashboard-metric-value {
    color: #f87171;
}

.mobile-dashboard-metric-value {
    font-size: var(--robinhood-font-heading-sm);
    font-weight: var(--robinhood-weight-bold);
    color: white;
    line-height: 1.2;
}

.mobile-dashboard-metric-label {
    font-size: var(--robinhood-font-caption);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.mobile-dashboard-actions {
    display: flex;
    gap: var(--robinhood-space-3);
}

.mobile-dashboard-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--robinhood-space-2);
    padding: var(--robinhood-space-3) var(--robinhood-space-4);
    border-radius: var(--robinhood-radius-pill);
    font-size: var(--robinhood-font-body);
    font-weight: var(--robinhood-weight-semibold);
    text-decoration: none;
    transition: all var(--robinhood-transition-base);
    min-height: 48px;
    border: none;
    cursor: pointer;
}

.mobile-dashboard-action-btn.primary {
    background: var(--robinhood-success);
    color: white;
    box-shadow: 0 2px 10px rgba(0, 200, 5, 0.3);
}

.mobile-dashboard-action-btn.primary:active {
    background: var(--robinhood-success-hover);
    transform: scale(0.98);
}

.mobile-dashboard-action-btn.secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-dashboard-action-btn.secondary:active {
    background: rgba(255, 255, 255, 0.25);
}

.mobile-dashboard-action-btn svg {
    width: 18px;
    height: 18px;
}

/* ===== 모바일 차트 컨테이너 (Step 2.7) ===== */
.mobile-chart-container {
    background: var(--robinhood-bg-primary);
    border-radius: var(--robinhood-radius-lg);
    padding: var(--robinhood-space-4);
    margin-bottom: var(--robinhood-space-4);
    box-shadow: var(--robinhood-shadow-md);
    border: 1px solid var(--robinhood-border-light);
}

.mobile-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--robinhood-space-3);
}

.mobile-chart-title {
    font-size: var(--robinhood-font-body-lg);
    font-weight: var(--robinhood-weight-semibold);
    color: var(--robinhood-text-primary);
    margin: 0;
}

.mobile-chart-period-tabs {
    display: flex;
    gap: 4px;
    background: var(--robinhood-bg-tertiary);
    border-radius: var(--robinhood-radius-pill);
    padding: 3px;
}

.mobile-period-btn {
    padding: var(--robinhood-space-2) var(--robinhood-space-3);
    border: none;
    background: transparent;
    color: var(--robinhood-text-secondary);
    font-size: var(--robinhood-font-body-sm);
    font-weight: var(--robinhood-weight-medium);
    border-radius: var(--robinhood-radius-pill);
    cursor: pointer;
    transition: all var(--robinhood-transition-base);
    min-height: 32px;
}

.mobile-period-btn.active {
    background: var(--robinhood-bg-primary);
    color: var(--robinhood-text-primary);
    box-shadow: var(--robinhood-shadow-sm);
}

.mobile-period-btn:active:not(.active) {
    background: var(--robinhood-bg-secondary);
}

.mobile-chart-wrapper {
    height: 200px;
    position: relative;
    margin-bottom: var(--robinhood-space-3);
}

.mobile-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.mobile-chart-legend {
    display: flex;
    justify-content: center;
    gap: var(--robinhood-space-5);
    padding-top: var(--robinhood-space-2);
    border-top: 1px solid var(--robinhood-border-light);
}

.mobile-legend-item {
    display: flex;
    align-items: center;
    gap: var(--robinhood-space-2);
    font-size: var(--robinhood-font-body-sm);
    color: var(--robinhood-text-secondary);
}

.mobile-legend-color {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

/* 차트 터치 인터랙션 개선 */
.mobile-chart-wrapper canvas {
    touch-action: pan-y pinch-zoom;
}

/* ===== 퉁치기 계산기 모바일 (Step 2.8) ===== */
@media (max-width: 768px) {
    /* 매도 주문 카드 */
    .mobile-sell-order-card {
        background: var(--robinhood-bg-primary);
        border: 1px solid var(--robinhood-border-light);
        border-radius: var(--robinhood-radius-md);
        padding: var(--robinhood-space-4);
        margin-bottom: var(--robinhood-space-3);
        position: relative;
        box-shadow: var(--robinhood-shadow-sm);
    }
    
    .mobile-sell-order-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--robinhood-space-3);
        padding-bottom: var(--robinhood-space-3);
        border-bottom: 1px solid var(--robinhood-border-light);
    }
    
    .mobile-sell-order-number {
        font-size: var(--robinhood-font-body);
        font-weight: var(--robinhood-weight-semibold);
        color: var(--robinhood-text-primary);
    }
    
    .mobile-sell-order-delete {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--robinhood-danger-light);
        color: var(--robinhood-danger);
        border: none;
        border-radius: var(--robinhood-radius-sm);
        cursor: pointer;
        transition: all var(--robinhood-transition-base);
    }
    
    .mobile-sell-order-delete:active {
        background: var(--robinhood-danger);
        color: white;
    }
    
    .mobile-sell-order-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--robinhood-space-3);
    }
    
    .mobile-sell-order-inputs .form-group:first-child {
        grid-column: 1 / -1;
    }
    
    /* 결과 카드 강조 */
    .mobile-result-highlight {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border: 2px solid var(--robinhood-success);
        border-radius: var(--robinhood-radius-lg);
        padding: var(--robinhood-space-5);
        margin-top: var(--robinhood-space-4);
    }
    
    .mobile-result-title {
        font-size: var(--robinhood-font-heading-sm);
        font-weight: var(--robinhood-weight-bold);
        color: var(--robinhood-success);
        margin-bottom: var(--robinhood-space-4);
        display: flex;
        align-items: center;
        gap: var(--robinhood-space-2);
    }
    
    .mobile-result-card {
        background: white;
        border-radius: var(--robinhood-radius-md);
        padding: var(--robinhood-space-4);
        margin-bottom: var(--robinhood-space-3);
        box-shadow: var(--robinhood-shadow-sm);
    }
    
    .mobile-result-card:last-child {
        margin-bottom: 0;
    }
    
    .mobile-result-card-label {
        font-size: var(--robinhood-font-body-sm);
        color: var(--robinhood-text-secondary);
        margin-bottom: var(--robinhood-space-2);
    }
    
    .mobile-result-card-value {
        font-size: var(--robinhood-font-body-lg);
        font-weight: var(--robinhood-weight-semibold);
        color: var(--robinhood-text-primary);
    }
    
    .mobile-result-card-value.buy {
        color: var(--robinhood-success);
    }
    
    .mobile-result-card-value.sell {
        color: var(--robinhood-danger);
    }
    
    /* 빈 상태 */
    .mobile-empty-orders {
        text-align: center;
        padding: var(--robinhood-space-6);
        color: var(--robinhood-text-tertiary);
        font-size: var(--robinhood-font-body);
    }
    
    .mobile-empty-orders-icon {
        font-size: 32px;
        margin-bottom: var(--robinhood-space-2);
    }
    
    /* 입력 힌트 */
    .mobile-input-hint {
        font-size: var(--robinhood-font-caption);
        color: var(--robinhood-text-tertiary);
        margin-top: var(--robinhood-space-1);
    }
}

/* ===== 입력 폼 모바일 최적화 (Step 2.9) ===== */
@media (max-width: 768px) {
    /* 모든 입력 필드 전체 너비 */
    .input-box,
    .form-group,
    .mobile-form-group {
        width: 100%;
        margin-bottom: var(--robinhood-space-4);
    }
    
    /* 라벨 상단 배치 */
    .input-box label,
    .form-group label,
    .mobile-form-group label {
        display: block;
        width: 100%;
        font-size: var(--robinhood-font-body-sm);
        font-weight: var(--robinhood-weight-medium);
        color: var(--robinhood-text-secondary);
        margin-bottom: var(--robinhood-space-2);
    }
    
    /* 입력 필드 스타일 통일 */
    .input-box input,
    .input-box select,
    .input-box textarea,
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: var(--robinhood-space-4);
        font-size: 16px !important; /* iOS 확대 방지 */
        border: 1.5px solid var(--robinhood-border);
        border-radius: var(--robinhood-radius-sm);
        background: var(--robinhood-bg-primary);
        color: var(--robinhood-text-primary);
        min-height: 48px;
        box-sizing: border-box;
        transition: border-color var(--robinhood-transition-base), box-shadow var(--robinhood-transition-base);
        -webkit-appearance: none;
        appearance: none;
    }
    
    .input-box input:focus,
    .input-box select:focus,
    .input-box textarea:focus,
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--robinhood-success);
        box-shadow: 0 0 0 3px var(--robinhood-success-light);
    }
    
    /* 숫자 입력 시 숫자 키패드 표시 */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    /* 날짜 입력 네이티브 피커 스타일 */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        position: relative;
        padding-right: 40px;
    }
    
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        cursor: pointer;
        opacity: 0.6;
    }
    
    /* 셀렉트 드롭다운 화살표 */
    .input-box select,
    .form-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235D5D5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px;
        padding-right: 44px;
    }
    
    /* 입력 그룹 (가로 배치 -> 세로 배치) */
    .input-row,
    .param-row,
    .settings-row {
        display: flex;
        flex-direction: column;
        gap: var(--robinhood-space-3);
    }
    
    /* 파라미터 그리드 (2열 유지) */
    .param-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--robinhood-space-3);
    }
    
    .param-grid .input-box {
        margin-bottom: 0;
    }
    
    /* 체크박스/라디오 그룹 */
    .checkbox-group,
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: var(--robinhood-space-2);
    }
    
    .checkbox-group label,
    .radio-group label {
        display: flex;
        align-items: center;
        gap: var(--robinhood-space-3);
        padding: var(--robinhood-space-3);
        background: var(--robinhood-bg-secondary);
        border-radius: var(--robinhood-radius-sm);
        cursor: pointer;
        min-height: 48px;
    }
    
    .checkbox-group label:active,
    .radio-group label:active {
        background: var(--robinhood-bg-tertiary);
    }
    
    .checkbox-group input[type="checkbox"],
    .radio-group input[type="radio"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        accent-color: var(--robinhood-success);
    }
    
    /* 작은 설명 텍스트 */
    .input-box small,
    .form-group small {
        display: block;
        font-size: var(--robinhood-font-caption);
        color: var(--robinhood-text-tertiary);
        margin-top: var(--robinhood-space-1);
        line-height: 1.4;
    }
    
    /* 에러 상태 */
    .input-box.error input,
    .input-box.error select,
    .form-group.error input,
    .form-group.error select {
        border-color: var(--robinhood-danger);
    }
    
    .input-box.error small,
    .form-group.error small {
        color: var(--robinhood-danger);
    }
    
    /* 성공 상태 */
    .input-box.success input,
    .input-box.success select,
    .form-group.success input,
    .form-group.success select {
        border-color: var(--robinhood-success);
    }
    
    /* 비활성화 상태 */
    .input-box input:disabled,
    .input-box select:disabled,
    .form-group input:disabled,
    .form-group select:disabled {
        background: var(--robinhood-bg-tertiary);
        color: var(--robinhood-text-tertiary);
        cursor: not-allowed;
    }
    
    /* 모달 내 폼 최적화 */
    .modal-content form {
        display: flex;
        flex-direction: column;
        gap: var(--robinhood-space-3);
    }
    
    .modal-content label {
        font-size: var(--robinhood-font-body-sm);
        font-weight: var(--robinhood-weight-medium);
        color: var(--robinhood-text-secondary);
        margin-bottom: var(--robinhood-space-1);
    }
    
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        width: 100%;
        padding: var(--robinhood-space-4);
        font-size: 16px !important;
        border: 1.5px solid var(--robinhood-border);
        border-radius: var(--robinhood-radius-sm);
        min-height: 48px;
        box-sizing: border-box;
    }
    
    .modal-content input:focus,
    .modal-content select:focus,
    .modal-content textarea:focus {
        outline: none;
        border-color: var(--robinhood-success);
        box-shadow: 0 0 0 3px var(--robinhood-success-light);
    }
    
    /* 버튼 그룹 (하단 고정) */
    .modal-actions,
    .form-actions {
        display: flex;
        gap: var(--robinhood-space-3);
        margin-top: var(--robinhood-space-4);
        padding-top: var(--robinhood-space-4);
        border-top: 1px solid var(--robinhood-border-light);
    }
    
    .modal-actions button,
    .form-actions button {
        flex: 1;
        min-height: 48px;
        font-size: var(--robinhood-font-body);
        font-weight: var(--robinhood-weight-semibold);
        border-radius: var(--robinhood-radius-pill);
    }
    
    /* 백테스트 파라미터 섹션 */
    .param-section {
        background: var(--robinhood-bg-secondary);
        border-radius: var(--robinhood-radius-md);
        padding: var(--robinhood-space-4);
        margin-bottom: var(--robinhood-space-4);
    }
    
    .param-section-title {
        font-size: var(--robinhood-font-body);
        font-weight: var(--robinhood-weight-semibold);
        color: var(--robinhood-text-primary);
        margin-bottom: var(--robinhood-space-3);
        padding-bottom: var(--robinhood-space-2);
        border-bottom: 1px solid var(--robinhood-border-light);
    }
    
    /* 토글 스위치 스타일 */
    .toggle-switch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--robinhood-space-3);
        background: var(--robinhood-bg-secondary);
        border-radius: var(--robinhood-radius-sm);
        cursor: pointer;
        min-height: 48px;
    }
    
    .toggle-switch-label {
        font-size: var(--robinhood-font-body);
        font-weight: var(--robinhood-weight-medium);
        color: var(--robinhood-text-primary);
    }
    
    .toggle-switch input[type="checkbox"] {
        width: 44px;
        height: 24px;
        appearance: none;
        -webkit-appearance: none;
        background: var(--robinhood-bg-tertiary);
        border-radius: 12px;
        position: relative;
        cursor: pointer;
        transition: background var(--robinhood-transition-base);
    }
    
    .toggle-switch input[type="checkbox"]::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform var(--robinhood-transition-base);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .toggle-switch input[type="checkbox"]:checked {
        background: var(--robinhood-success);
    }
    
    .toggle-switch input[type="checkbox"]:checked::before {
        transform: translateX(20px);
    }
    
    /* 입력 그룹 - 아이콘 포함 */
    .input-with-icon {
        position: relative;
    }
    
    .input-with-icon input {
        padding-left: 44px;
    }
    
    .input-with-icon .input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--robinhood-text-tertiary);
        pointer-events: none;
    }
    
    .input-with-icon .input-icon svg {
        width: 18px;
        height: 18px;
    }
    
    /* 입력 접미사/접두사 */
    .input-with-suffix,
    .input-with-prefix {
        position: relative;
    }
    
    .input-suffix {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--robinhood-text-tertiary);
        font-size: var(--robinhood-font-body-sm);
        pointer-events: none;
    }
    
    .input-with-suffix input {
        padding-right: 44px;
    }
    
    .input-prefix {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--robinhood-text-tertiary);
        font-size: var(--robinhood-font-body-sm);
        pointer-events: none;
    }
    
    .input-with-prefix input {
        padding-left: 32px;
    }
}

/* ===== 모바일 애니메이션 및 전환 효과 - Step 4.1 ===== */

/* 페이지 전환 애니메이션 */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pageExit {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 애니메이션 클래스 */
@media (max-width: 768px) {
    .animate-page-enter {
        animation: pageEnter 0.3s ease-out;
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 0.4s ease-out;
    }
    
    .animate-fade-in-down {
        animation: fadeInDown 0.4s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.3s ease-out;
    }
    
    .animate-slide-in-right {
        animation: slideInRight 0.3s ease-out;
    }
    
    .animate-slide-in-left {
        animation: slideInLeft 0.3s ease-out;
    }
    
    .animate-slide-in-up {
        animation: slideInUp 0.3s ease-out;
    }
    
    .animate-bounce-in {
        animation: bounceIn 0.5s ease-out;
    }
    
    /* 스태거드 애니메이션 (순차 등장) */
    .stagger-item {
        opacity: 0;
        animation: fadeInUp 0.4s ease-out forwards;
    }
    
    .stagger-item:nth-child(1) { animation-delay: 0ms; }
    .stagger-item:nth-child(2) { animation-delay: 50ms; }
    .stagger-item:nth-child(3) { animation-delay: 100ms; }
    .stagger-item:nth-child(4) { animation-delay: 150ms; }
    .stagger-item:nth-child(5) { animation-delay: 200ms; }
    .stagger-item:nth-child(6) { animation-delay: 250ms; }
    .stagger-item:nth-child(7) { animation-delay: 300ms; }
    .stagger-item:nth-child(8) { animation-delay: 350ms; }
    .stagger-item:nth-child(9) { animation-delay: 400ms; }
    .stagger-item:nth-child(10) { animation-delay: 450ms; }
    
    /* 카드 등장 애니메이션 */
    .mobile-account-card,
    .mobile-order-card {
        animation: fadeInUp 0.3s ease-out;
    }
    
    .mobile-account-card:nth-child(1) { animation-delay: 0ms; }
    .mobile-account-card:nth-child(2) { animation-delay: 80ms; }
    .mobile-account-card:nth-child(3) { animation-delay: 160ms; }
    .mobile-account-card:nth-child(4) { animation-delay: 240ms; }
    .mobile-account-card:nth-child(5) { animation-delay: 320ms; }
    
    .mobile-order-card:nth-child(1) { animation-delay: 0ms; }
    .mobile-order-card:nth-child(2) { animation-delay: 60ms; }
    .mobile-order-card:nth-child(3) { animation-delay: 120ms; }
    .mobile-order-card:nth-child(4) { animation-delay: 180ms; }
    
    /* 히어로 섹션 애니메이션 */
    .mobile-summary-hero,
    .mobile-dashboard-hero {
        animation: scaleIn 0.4s ease-out;
    }
    
    .mobile-summary-hero .mobile-summary-value,
    .mobile-dashboard-hero .mobile-hero-value {
        animation: fadeInUp 0.5s ease-out 0.1s both;
    }
    
    /* 버튼 터치 피드백 */
    .mobile-btn,
    .mobile-account-btn,
    .mobile-order-copy-btn,
    .fab,
    button:not([disabled]) {
        transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-btn:active,
    .mobile-account-btn:active,
    .mobile-order-copy-btn:active,
    button:active:not([disabled]) {
        transform: scale(0.96);
        opacity: 0.9;
    }
    
    /* 리플 효과 */
    .ripple-effect {
        position: relative;
        overflow: hidden;
    }
    
    .ripple-effect::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease, height 0.4s ease;
    }
    
    .ripple-effect:active::after {
        width: 200%;
        height: 200%;
    }
    
    /* 카드 호버/터치 효과 */
    .mobile-account-card,
    .mobile-order-card,
    .mobile-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .mobile-account-card:active,
    .mobile-order-card:active,
    .mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* 탭 전환 애니메이션 */
    .mobile-tab-panel {
        animation: fadeInUp 0.25s ease-out;
    }
    
    /* 모달/바텀시트 애니메이션 */
    .mobile-modal,
    .mobile-bottom-sheet {
        animation: fadeInUp 0.3s ease-out;
    }
    
    .mobile-modal-overlay,
    .mobile-bottom-sheet-overlay {
        animation: fadeIn 0.2s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* 부드러운 스크롤 스냅 */
    .scroll-snap-x {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .scroll-snap-x > * {
        scroll-snap-align: start;
    }
    
    .scroll-snap-y {
        scroll-snap-type: y proximity;
        -webkit-overflow-scrolling: touch;
    }
    
    .scroll-snap-y > * {
        scroll-snap-align: start;
    }
    
    /* 수평 스크롤 */
    .horizontal-scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--robinhood-space-3);
        padding: var(--robinhood-space-2) 0;
    }
    
    .horizontal-scroll::-webkit-scrollbar {
        display: none;
    }
    
    .horizontal-scroll > * {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* 트랜지션 유틸리티 */
    .transition-fast {
        transition-duration: 0.15s !important;
    }
    
    .transition-normal {
        transition-duration: 0.3s !important;
    }
    
    .transition-slow {
        transition-duration: 0.5s !important;
    }
    
    .transition-none {
        transition: none !important;
    }
    
    /* 성공 체크 애니메이션 */
    @keyframes checkmark {
        0% {
            stroke-dashoffset: 100;
        }
        100% {
            stroke-dashoffset: 0;
        }
    }
    
    .success-checkmark {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: checkmark 0.5s ease-out 0.2s forwards;
    }
    
    /* 숫자 카운트업 애니메이션 (CSS only 시각 효과) */
    .count-up {
        animation: countUp 0.8s ease-out;
    }
    
    @keyframes countUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 로딩 도트 애니메이션 */
    .loading-dots {
        display: inline-flex;
        gap: 4px;
    }
    
    .loading-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        animation: loadingDot 1.4s ease-in-out infinite;
    }
    
    .loading-dots span:nth-child(1) { animation-delay: 0s; }
    .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
    .loading-dots span:nth-child(3) { animation-delay: 0.4s; }
    
    @keyframes loadingDot {
        0%, 80%, 100% {
            transform: scale(0.6);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    /* 셰이크 애니메이션 (에러 피드백) */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
        20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
    
    .animate-shake {
        animation: shake 0.5s ease-in-out;
    }
    
    /* 입력 에러 상태 애니메이션 */
    .input-error {
        animation: shake 0.3s ease-in-out;
        border-color: var(--robinhood-danger) !important;
    }
}

/* 모션 감소 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 성능 최적화 스타일 - Step 4.4 ===== */

/* 이미지 지연 로딩 */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.loaded,
img[data-src][src] {
    opacity: 1;
}

/* 이미지 플레이스홀더 */
.img-placeholder {
    background: linear-gradient(90deg, 
        var(--robinhood-bg-secondary) 25%, 
        var(--robinhood-bg-tertiary) 50%, 
        var(--robinhood-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* GPU 가속 (하드웨어 가속) */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* 스크롤 성능 최적화 */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 콘텐츠 가시성 최적화 (content-visibility) */
@supports (content-visibility: auto) {
    .content-auto {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }
    
    .card-auto {
        content-visibility: auto;
        contain-intrinsic-size: 0 150px;
    }
    
    .list-item-auto {
        content-visibility: auto;
        contain-intrinsic-size: 0 60px;
    }
}

/* 렌더링 최적화 */
.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

.contain-strict {
    contain: strict;
}

.contain-content {
    contain: content;
}

/* 뷰포트 외 요소 숨김 (가상 스크롤용) */
.out-of-viewport {
    visibility: hidden;
}

.in-viewport {
    visibility: visible;
}

/* 터치 스크롤 최적화 */
@media (max-width: 768px) {
    .touch-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior-y: contain;
    }
    
    /* 빠른 탭 응답 */
    .fast-tap {
        touch-action: manipulation;
    }
    
    /* 불필요한 호버 효과 제거 (터치 기기) */
    @media (hover: none) {
        .hover-effect:hover {
            transform: none !important;
            box-shadow: inherit !important;
        }
    }
    
    /* 에너지 효율 최적화 (배터리 세이버) */
    @media (prefers-reduced-data: reduce) {
        img:not([data-critical="true"]) {
            display: none;
        }
        
        .decorative-image {
            display: none;
        }
        
        video {
            display: none;
        }
    }
}

/* 폰트 로딩 최적화 */
.font-loading {
    font-display: swap;
}

/* 크리티컬 렌더링 패스 최적화 */
.above-fold {
    /* 첫 화면에 보이는 콘텐츠 */
    contain: none;
}

.below-fold {
    /* 스크롤해야 보이는 콘텐츠 */
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* 애니메이션 성능 */
.animate-transform {
    will-change: transform;
}

.animate-opacity {
    will-change: opacity;
}

/* 애니메이션 완료 후 will-change 제거 */
.animation-done {
    will-change: auto;
}