/**
 * =========================================================
 * 파일명 : map.css
 * 위치 : /www/assets/css/pages
 * ---------------------------------------------------------
 * 목적
 * - 오시는 길
 * =========================================================
 */

/* =========================
   Map
========================= */

.map{

    background:var(--color-background);

}

/* =========================
   Kakao Map
========================= */

.map-canvas{

    width:100%;

    aspect-ratio:16 / 9;

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

    border-radius:16px;

    overflow:hidden;

    background:#f5f7fa;

}

/* =========================
   Info
========================= */

.map-info{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:24px;

}

.map-info-item{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:18px 20px;

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

    border-radius:12px;

    background:#fff;

}

.map-info-item strong{

    font-size:15px;

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

}

.map-info-item span{

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

    line-height:1.7;

}

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

@media (min-width:992px){

    .map-info{

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:20px;

    }

}