/* /verytrade2/vt2_style.css */

/* 기본 리셋에 가까운 느낌 */
.vt2-wrap * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

/* 전체 래퍼 */
.vt2-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    background-color: #f3f4f6; /* 연한 회색 배경 */
}

/* 페이지 제목 */
.vt2-page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* 카드 박스 */
.vt2-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    margin-bottom: 16px;
}

/* 폼 그룹 */
.vt2-form-group {
    margin-bottom: 12px;
}

.vt2-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.vt2-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    background-color: #ffffff;
}

.vt2-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

/* 라디오 그룹 */
.vt2-radio-group label {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    font-size: 13px;
    cursor: pointer;
}

.vt2-radio-group input[type="radio"] {
    margin-right: 4px;
}

/* 버튼 기본 */
.vt2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

/* 주요 버튼 (파란색) */
.vt2-btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.vt2-btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* 아웃라인 버튼 */
.vt2-btn-outline {
    background-color: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

.vt2-btn-outline:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* 위험 버튼 */
.vt2-btn-danger {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.vt2-btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* 뱃지 */
.vt2-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
}

.badge-waiting {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.badge-ongoing {
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.badge-done {
    background-color: #ecfdf5;
    color: #166534;
    border-color: #bbf7d0;
}

.badge-cancel {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

.badge-dispute {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* 상태별 행 배경 */
.vt2-row-done {
    background-color: #f9fafb;
}

.vt2-row-ongoing {
    background-color: #fffbeb;
}

.vt2-row-cancel {
    background-color: #f9fafb;
    opacity: 0.7;
}

.vt2-row-dispute {
    background-color: #fef2f2;
}

/* 상세 레이아웃 */
.vt2-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
}

.vt2-detail-title {
    font-size: 18px;
    font-weight: 600;
}

.vt2-detail-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.vt2-detail-box {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    background-color: #ffffff;
}

.vt2-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* 테이블 스타일 (리스트) */
.vt2-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.vt2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vt2-table th,
.vt2-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.vt2-table th {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background-color: #f9fafb;
}

.vt2-table tr:hover td {
    background-color: #f3f4f6;
}

/* 제목 열 */
.vt2-col-title {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 가격/수량 열 텍스트 정렬 */
.vt2-col-num {
    text-align: right;
    white-space: nowrap;
}

/* 상태/타입 태그 */
.vt2-tag {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 9999px;
    font-size: 11px;
    background-color: #f3f4f6;
    color: #4b5563;
}

/* 상단 요약 카드의 숫자 */
.vt2-stat-number {
    font-size: 18px;
    font-weight: 600;
}

/* ============================
   차트용 박스 스타일
   ============================ */
.vt2-chart-box {
    position: relative;
    width: 100%;
    height: 260px;
}

.vt2-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 반응형: 모바일에서 한 컬럼으로 */
@media (max-width: 768px) {
    .vt2-wrap {
        padding: 12px 10px 70px;
    }

    .vt2-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vt2-page-title {
        font-size: 18px;
    }

    .vt2-card {
        padding: 12px;
        border-radius: 8px;
    }

    .vt2-table th,
    .vt2-table td {
        padding: 7px 4px;
    }

    .vt2-chart-box {
        height: 220px;
    }
}

/* 페이지네이션 간단 스타일 (그누보드 get_paging과 같이 사용) */
.vt2-paging {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
}

.vt2-paging a,
.vt2-paging span {
    display: inline-block;
    padding: 4px 7px;
    margin: 0 2px;
    border-radius: 6px;
    text-decoration: none;
}

.vt2-paging a {
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.vt2-paging a:hover {
    background-color: #f9fafb;
}

.vt2-paging .current {
    background-color: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
}