/**
 * =========================================================
 * 파일명 : transaction.css
 * 위치 : /www/assets/css/pages
 * ---------------------------------------------------------
 * 목적
 * - 최근 실거래
 * =========================================================
 */

/* =========================
   Transaction
========================= */

.transaction{

    background:var(--color-background);

}

/* =========================
   Table
========================= */

.transaction-table{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/* =========================
   Head
========================= */

.transaction-head{

    display:none;

}

/* =========================
   Row
========================= */

.transaction-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    padding:18px;

    border:1px solid var(--color-border);

    border-radius:12px;

    background:#fff;

    box-shadow:var(--shadow-sm);

}

.transaction-row > div{

    font-size:15px;

    color:var(--color-text-primary);

}

/* =========================
   Desktop
========================= */

@media (min-width:992px){

    .transaction-table{

        gap:0;

        border:1px solid var(--color-border);

        border-radius:12px;

        overflow:hidden;

    }

    .transaction-head{

        display:grid;

        grid-template-columns:1.2fr 1fr .7fr 1fr;

        background:#f8f9fb;

        font-weight:700;

    }

    .transaction-head div{

        padding:16px 20px;

    }

    .transaction-row{

        display:grid;

        grid-template-columns:1.2fr 1fr .7fr 1fr;

        gap:0;

        border:none;

        border-top:1px solid var(--color-border);

        border-radius:0;

        box-shadow:none;

        padding:0;

    }

    .transaction-row > div{

        padding:16px 20px;

    }

}