/* 모바일 레이아웃 스크롤 개선 */
@media (max-width: 768px) {
    /* 전체 배경색 통일 */
    body {
        background: var(--bg-secondary);
    }
    
    /* 모바일에서 주문 섹션 화면 밖으로 이동 (모달에서 사용하기 위해 유지) */
    .order-section {
        position: fixed;
        left: -9999px;
        top: -9999px;
        visibility: hidden;
    }
    
    /* 모달 내부에서는 표시 */
    .mobile-order-modal .order-section {
        position: static;
        left: auto;
        top: auto;
        visibility: visible;
        display: block !important;
    }
    
    /* 호가창 섹션 완전히 숨기기 - 중요도 최대치로 설정 */
    .orderbook-section {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 호가창 모달 바깥에 있는 모든 호가창 숨김 */
    body > .orderbook-section,
    .main-container > .orderbook-section,
    .app-wrapper .orderbook-section {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    /* 전체 앱 래퍼 스크롤 개선 */
    .app-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto; /* 세로 스크롤 허용 */
        background: var(--bg-secondary); /* 배경색 통일 */
    }
    
    /* 메인 컨테이너 - 전체 공간 사용 */
    .main-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: calc(100vh - var(--header-height)); /* 헤더 높이만 제외 */
        overflow: visible;
        padding-bottom: 0; /* 하단 패딩 제거 */
    }
    
    /* 차트 섹션 - 고정 높이 */
    .chart-section {
        flex: 0 0 auto;
        height: 400px; /* 고정 높이 */
        display: flex;
        flex-direction: column;
        overflow: visible;
        background: var(--bg-primary);
    }
    
    /* 차트 컨테이너 - flex로 남은 공간 채우기 */
    .chart-container {
        flex: 1;
        min-height: 300px;
        background: var(--bg-primary);
        position: relative;
        overflow: visible;
    }
    
    /* 차트 캔버스가 제대로 표시되도록 */
    #candlestick-chart {
        width: 100% !important;
        height: 100% !important;
        position: relative;
        z-index: 1;
    }
    
    /* 포지션 패널 - 고정 높이 */
    .position-panel {
        flex: 0 0 auto;
        height: auto; /* 자동 높이 */
        min-height: 400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--bg-secondary);
        margin-bottom: 140px; /* 주문버튼 + 바텀네비 공간 */
        padding-bottom: 0;
    }
    
    /* 패널 탭 - 고정 높이 */
    .panel-tabs {
        flex-shrink: 0;
        height: 44px;
    }
    
    /* 패널 컨텐츠 - 스크롤 가능 */
    .panel-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain; /* 과도한 스크롤 방지 */
        padding: 12px;
        padding-bottom: 20px; /* 하단 여백 추가 */
    }
    
    /* 모바일 포지션 컨테이너 - 부드러운 스크롤 */
    .mobile-positions-container,
    .mobile-orders-container,
    .mobile-trades-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 20px; /* 하단 여백 추가 */
    }
    
    /* 카드 터치 반응 개선 */
    .position-card,
    .order-card,
    .trade-card {
        touch-action: manipulation; /* 터치 지연 제거 */
        -webkit-tap-highlight-color: transparent; /* 터치 하이라이트 제거 */
    }
    
    /* 바텀 네비게이션 - 고정 */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        z-index: 1000;
    }
    
    /* iOS 안전 영역 대응 */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(56px + env(safe-area-inset-bottom));
        }
        
        .main-container {
            height: calc(100vh - var(--header-height) - 56px - env(safe-area-inset-bottom));
        }
    }
    
    /* 스크롤바 스타일링 */
    .panel-content::-webkit-scrollbar {
        width: 4px;
    }
    
    .panel-content::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .panel-content::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
    
    .panel-content::-webkit-scrollbar-thumb:hover {
        background: var(--border-light);
    }
    
    /* 카드 디자인 개선 */
    .position-card {
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }
    
    /* 포지션 타입별 액센트 */
    .position-card.long::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--color-buy);
    }
    
    .position-card.short::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--color-sell);
    }
    
    /* 카드 헤더 정렬 개선 */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        gap: 12px;
    }
    
    /* 디테일 아이템 레이아웃 */
    .card-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 12px;
    }
    
    /* 중요 정보 강조 */
    .detail-item.highlight {
        background: var(--bg-hover);
        padding: 8px;
        border-radius: 6px;
    }
    
    /* 손익 표시 개선 */
    .pnl-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding: 12px;
        background: var(--bg-hover);
        border-radius: 8px;
    }
    
    .pnl-main {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .pnl-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .pnl-info .pnl-value {
        font-size: 18px;
        font-weight: 700;
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
    }
    
    .pnl-percent {
        font-size: 14px;
        font-weight: 500;
    }
    
    /* ROE 표시 스타일 */
    .roe-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: right;
    }
    
    .roe-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .roe-info .roe-value {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
    }
    
    .roe-info .roe-value.positive {
        background: rgba(14, 203, 129, 0.15);
        color: var(--color-buy);
    }
    
    .roe-info .roe-value.negative {
        background: rgba(246, 70, 93, 0.15);
        color: var(--color-sell);
    }
    
    /* 청산 위험도 표시 */
    .liquidation-risk-indicator {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 12px;
        text-align: center;
        justify-content: center;
    }
    
    .liquidation-risk-indicator.low {
        background: rgba(81, 207, 102, 0.1);
        border: 1px solid rgba(81, 207, 102, 0.3);
        color: #51cf66;
    }
    
    .liquidation-risk-indicator.medium {
        background: rgba(255, 169, 77, 0.1);
        border: 1px solid rgba(255, 169, 77, 0.3);
        color: #ffa94d;
    }
    
    .liquidation-risk-indicator.high {
        background: rgba(246, 70, 93, 0.1);
        border: 1px solid rgba(246, 70, 93, 0.3);
        color: #f6465d;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    /* 액션 버튼 개선 */
    .position-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }
    
    .action-btn {
        flex: 1;
        padding: 10px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    
    .action-btn.close {
        background: rgba(246, 70, 93, 0.1);
        border: 1px solid var(--color-sell);
        color: var(--color-sell);
    }
    
    .action-btn.close:active {
        background: var(--color-sell);
        color: white;
        transform: scale(0.95);
    }
    
    /* 거래내역 카드 디자인 */
    .mobile-trade-card {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
        margin-bottom: 12px;
        position: relative;
        overflow: hidden;
    }
    
    .mobile-trade-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--border-color);
    }
    
    .mobile-trade-card.close-trade::before {
        background: var(--color-brand);
    }
    
    .mobile-trade-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }
    
    .mobile-trade-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .mobile-trade-coin {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .mobile-trade-badges {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    
    .mobile-trade-type {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
    }
    
    .mobile-trade-type.long {
        background: rgba(14, 203, 129, 0.1);
        color: var(--color-buy);
    }
    
    .mobile-trade-type.short {
        background: rgba(246, 70, 93, 0.1);
        color: var(--color-sell);
    }
    
    .mobile-trade-status-time {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    
    .mobile-trade-status {
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
    }
    
    .mobile-trade-status.closed {
        background: rgba(240, 185, 11, 0.1);
        color: var(--color-brand);
    }
    
    .mobile-trade-status.executed {
        background: rgba(14, 203, 129, 0.1);
        color: var(--color-buy);
    }
    
    .mobile-trade-time {
        font-size: 11px;
        color: var(--text-muted);
    }
    
    .mobile-trade-price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 8px;
    }
    
    .mobile-trade-label {
        font-size: 12px;
        color: var(--text-secondary);
    }
    
    .mobile-trade-price-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        font-family: var(--font-mono);
    }
    
    .mobile-trade-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 8px;
    }
    
    .mobile-trade-detail-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .mobile-detail-label {
        font-size: 11px;
        color: var(--text-secondary);
    }
    
    .mobile-detail-value {
        font-size: 13px;
        color: var(--text-primary);
        font-weight: 500;
        font-family: var(--font-mono);
    }
    
    .mobile-trade-pnl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: var(--bg-hover);
        border-radius: 6px;
        margin-top: 12px;
    }
    
    .mobile-pnl-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .mobile-pnl-value {
        font-size: 16px;
        font-weight: 700;
        font-family: var(--font-mono);
    }
    
    .mobile-pnl-value.profit {
        color: var(--color-buy);
    }
    
    .mobile-pnl-value.loss {
        color: var(--color-sell);
    }
    
    /* 미체결 주문 카드 - 포지션 카드와 일관성 있게 디자인 */
    .order-card,
    .mobile-order-card {
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 18px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
        margin-bottom: 12px;
        transition: all 0.2s;
    }
    
    .order-card:hover,
    .mobile-order-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }
    
    /* 주문 타입별 액센트 */
    .order-card.buy::before,
    .mobile-order-card.buy::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--color-buy);
    }
    
    .order-card.sell::before,
    .mobile-order-card.sell::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--color-sell);
    }
    
    /* 주문 헤더 */
    .order-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }
    
    .order-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .order-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .order-coin-name {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }
    
    .order-direction {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .order-direction.long {
        color: var(--color-buy);
    }
    
    .order-direction.short {
        color: var(--color-sell);
    }
    
    .order-badges {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    
    .order-type-badge {
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    .order-type-badge.single {
        background: rgba(138, 116, 249, 0.1);
        color: #8a74f9;
    }
    
    .order-type-badge.cross {
        background: rgba(240, 185, 11, 0.1);
        color: var(--color-brand);
    }
    
    .order-time {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
    }
    
    /* 취소 버튼 */
    .order-card .cancel-btn,
    .mobile-order-card .cancel-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(246, 70, 93, 0.1);
        border: 1px solid rgba(246, 70, 93, 0.3);
        border-radius: 8px;
        color: var(--color-sell);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .order-card .cancel-btn:hover,
    .mobile-order-card .cancel-btn:hover {
        background: rgba(246, 70, 93, 0.2);
        border-color: var(--color-sell);
    }
    
    .order-card .cancel-btn:active,
    .mobile-order-card .cancel-btn:active {
        transform: scale(0.9);
        background: var(--color-sell);
        color: white;
    }
    
    /* 주문 상세 정보 */
    .order-details {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 14px;
    }
    
    .order-detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .order-detail-item {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .order-label {
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 500;
        letter-spacing: 0.02em;
    }
    
    .order-value {
        font-size: 15px;
        color: var(--text-primary);
        font-weight: 600;
        font-family: var(--font-mono);
        letter-spacing: -0.01em;
    }
    
    .order-value.large {
        font-size: 16px;
        font-weight: 700;
    }
    
    .order-value.highlight {
        color: var(--color-brand);
    }
    
    /* 가격 정보 특별 스타일 */
    .order-price-section {
        background: var(--bg-hover);
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .order-price-main {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 8px;
    }
    
    .order-price-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .order-price-value {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        font-family: var(--font-mono);
    }
    
    .order-amount-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }
    
    .order-amount-label {
        font-size: 11px;
        color: var(--text-muted);
    }
    
    .order-amount-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }
    
    /* 현재가와 가격 차이 표시 */
    .order-price-comparison {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        background: linear-gradient(135deg, var(--bg-hover) 0%, rgba(44, 48, 56, 0.5) 100%);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        margin-top: 12px;
    }
    
    .current-price-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .current-price-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .current-price-label {
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .current-price-value {
        font-size: 14px;
        font-weight: 600;
        font-family: var(--font-mono);
        color: var(--text-primary);
    }
    
    .price-diff {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-mono);
    }
    
    .price-diff.higher {
        background: rgba(14, 203, 129, 0.15);
        color: var(--color-buy);
    }
    
    .price-diff.lower {
        background: rgba(246, 70, 93, 0.15);
        color: var(--color-sell);
    }
    
    .price-diff svg {
        width: 14px;
        height: 14px;
    }
    
    .price-diff-percent {
        font-size: 12px;
        opacity: 0.9;
    }
    
    /* 타임스탬프 */
    .order-timestamp {
        font-size: 11px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
    }
    
    .order-timestamp svg {
        width: 12px;
        height: 12px;
    }
    
    /* 빈 상태 개선 */
    .empty-state {
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 40px;
        text-align: center;
    }
    
    .empty-state svg {
        width: 80px;
        height: 80px;
        color: var(--text-muted);
        opacity: 0.2;
    }
    
    .empty-state span {
        color: var(--text-muted);
        font-size: 15px;
        font-weight: 500;
    }
    
    /* 페이지네이션 스타일 */
    .mobile-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
        margin-top: 8px;
    }
    
    .mobile-pagination-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-hover);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-pagination-btn:hover:not(:disabled) {
        background: var(--border-light);
        border-color: var(--color-brand);
    }
    
    .mobile-pagination-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    
    .mobile-pagination-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .mobile-pagination-info {
        font-size: 14px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    
    .mobile-pagination-info .current-page {
        color: var(--text-primary);
        font-weight: 600;
    }
    
    /* 페이지 숨김 */
    .page-hidden {
        display: none !important;
    }
    
    /* PC 페이지네이션 숨기기 */
    #pending-pagination,
    .pagination {
        display: none !important;
    }
}

/* 태블릿 대응 */
@media (min-width: 769px) and (max-width: 1024px) {
    .position-panel {
        height: 450px;
    }
    
    .panel-content {
        padding: 16px;
    }
}