/* =====================================================
   기본
===================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

}


body {

    font-family:
        Arial,
        "Noto Sans KR",
        sans-serif;

    background: #fff;

    color: #222;

}



/* =====================================================
   HEADER
===================================================== */

header {

    width: 100%;

    padding: 35px 20px;

    text-align: center;

}


.logo {

    font-size: 42px;

    font-weight: 900;

    color: #164b8c;

    margin-bottom: 10px;

}


header h1 {

    margin: 0;

    font-size: 32px;

    font-weight: 800;

}



/* =====================================================
   QUICK MENU
===================================================== */

.quick {

    width: 100%;

    max-width: 1200px;

    margin: 30px auto;

    padding: 0 20px;

    display: grid;

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

    gap: 20px;

}

.quick-2 {

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

    margin-top: 20px;

}

.quick-2 .card:only-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
}

.card {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 130px;

    padding: 25px;

    text-align: center;

    text-decoration: none;

    color: #fff;

    background: #164b8c;

    border-radius: 15px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.6;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.15);

}



/* =====================================================
   FOOTER
===================================================== */

footer {

    width: 100%;

    margin-top: 50px;

    padding: 30px 20px;

    text-align: center;

}


.footer-inner {

    width: 100%;

    max-width: 1024px;

    margin: 0 auto;

}


.footer-inner img {

    display: block;

    width: 100%;

    max-width: 1024px;

    height: auto;

    margin: 0 auto;

}



/* =====================================================
   POPUP 전체 컨테이너
===================================================== */

.popup-layer {

    position: fixed;

    left: 0;
    top: 0;

    z-index: 99999;

    width: auto;
    height: auto;

    background: transparent;

    opacity: 1;

    pointer-events: auto;

}



/* =====================================================
   POPUP BOX
===================================================== */

.popup-box {

    position: relative;

    width: min(520px, 90vw);

    max-width: 90vw;

    max-height: 90vh;

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 10px 40px
        rgba(0,0,0,.28);

    opacity: 1;

    user-select: none;

}



/* =====================================================
   팝업 제목 / 드래그 영역
===================================================== */

.popup-dragbar {

    position: relative;

    width: 100%;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 40px 0 15px;

    background: #222;

    color: #fff;

    font-size: 13px;

    font-weight: 500;

    cursor: move;

    touch-action: none;

    user-select: none;

}


/* =====================================================
   data-title 자동 표시 제목
===================================================== */

.popup-title {

    display: block;

    width: 100%;

    overflow: hidden;

    text-align: center;

    white-space: nowrap;

    text-overflow: ellipsis;

    line-height: 34px;

}



/* =====================================================
   드래그 중
===================================================== */

.popup-layer.dragging {

    z-index: 100000;

}



.popup-layer.dragging
.popup-dragbar {

    cursor: grabbing;

    background: #111;

}



/* =====================================================
   닫기 버튼
===================================================== */

.popup-close {

    position: absolute;

    top: 4px;
    right: 5px;

    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.20);

    color: #fff;

    font-size: 22px;

    line-height: 27px;

    cursor: pointer;

    z-index: 20;

}


.popup-close:hover {

    background:
        rgba(255,255,255,.40);

}



/* =====================================================
   팝업 이미지
===================================================== */

.popup-image-link {

    display: block;

    width: 100%;

    line-height: 0;

    background: #fff;

}


.popup-image-link img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height:
        calc(90vh - 80px);

    object-fit: contain;

}



/* =====================================================
   POPUP FOOTER
===================================================== */

.popup-footer {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    width: 100%;

    min-height: 42px;

    padding: 8px 12px;

    background: #fff;

    border-top:
        1px solid #eee;

    color: #333;

    font-size: 13px;

}


.popup-footer label {

    display: flex;

    align-items: center;

    gap: 5px;

    cursor: pointer;

    white-space: nowrap;

}


.popup-footer input {

    margin: 0;

}


.popup-footer button {

    padding: 4px 8px;

    border: 0;

    background: transparent;

    color: #333;

    cursor: pointer;

    font-size: 13px;

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {


    header {

        padding:
            25px 15px;

    }


    header h1 {

        font-size: 26px;

    }


    .quick {

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

        gap: 15px;

    }


    .card {

        min-height: 110px;

        font-size: 15px;

    }


    .popup-box {

        width: 88vw;

        max-width: 88vw;

        max-height: 88vh;

    }


    .popup-image-link img {

        max-height:
            calc(88vh - 75px);

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {


    .logo {

        font-size: 32px;

    }


    header h1 {

        font-size: 21px;

        line-height: 1.4;

    }


    .quick {

        grid-template-columns:
            1fr;

        padding:
            0 15px;

    }
.quick-2 {
        grid-template-columns: 1fr;
	
    }
.quick-2 .card:only-child {
        width: 100%;
    }
    .card {

        min-height: 95px;

    }


    footer {

        padding:
            20px 10px;

    }


    .popup-box {

        width: 92vw;

        max-width: 92vw;

        max-height: 85vh;

        border-radius: 8px;

    }


    .popup-dragbar {

        height: 29px;

        font-size: 11px;

    }


    .popup-title {

        line-height: 29px;

        font-size: 11px;

    }


    .popup-close {

        width: 24px;

        height: 24px;

        line-height: 24px;

        font-size: 19px;

    }


    .popup-image-link img {

        max-height:
            calc(85vh - 70px);

    }


    .popup-footer {

        min-height: 36px;

        padding:
            5px 8px;

        font-size: 11px;

    }


}



/* =====================================================
   아주 작은 스마트폰
===================================================== */

@media (max-width: 380px) {


    .popup-box {

        width: 94vw;

        max-width: 94vw;

    }


    .popup-footer {

        font-size: 10px;

    }

}