
@charset "utf-8";

#wrap {
    width: 100%;
    height: 100%;

    /* header */
    #header {
        width: 100%;
        height: 4.4rem;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--secondary5);

        .logoArea {
            display: flex;
            align-items: center;

            .logo {
            width: 4.3rem;
            height: 4.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url(../assets/images/logo.svg) no-repeat center / contain;
            }

            .logoTxt {
            color: var(--white);
            font-weight: var(--fw-bold);
            }
        }

        aside {
            ul {
            display: flex;

            li {
                width: 3rem;
                height: 3rem;
                margin-right: .9rem;

                a {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 3rem;

                &.alram {
                    background-image: url(../assets/images/ico_alarm.svg);
                }

                &.set {
                    background-image: url(../assets/images/ico_set.svg);
                }

                &.user {
                    background-image: url(../assets/images/ico_user.svg);
                }
                }
            }
            }
        }

        .badge {
            position: absolute;
            top: .6rem;
            right: .8rem;
            display: block;
            width: .5rem;
            height: .6rem;
            border-radius: 50%;
            background-color: var(--alert);
        }
    }

    #sidePanel {
        /* gnb */
        #nav {
            position: fixed;
            top: 4.4rem;
            left: 0;
            z-index: 100;
            width: 4.3rem;
            height: calc(100% - 4.4rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: var(--secondary1);
            border-right: 1px solid var(--tertiary2);

            .gnb {
                width: 4.2rem;
                display: flex;
                flex-direction: column;

                li {
                width: 100%;
                height: 4.4rem;
                display: flex;
                align-items: center;
                justify-content: center;

                a {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 3rem;

                    /* 공통 상태 */
                    &:hover,
                    &:active,
                    &.active {
                    background-color: var(--primary1);
                    }

                    /* gnb icons */
                    &.gnb1 {
                    background-image: url(../assets/images/ico_gnb01.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb01_on.svg);
                    }
                    }

                    &.gnb2 {
                    background-image: url(../assets/images/ico_gnb02.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb02_on.svg);
                    }
                    }

                    &.gnb3 {
                    background-image: url(../assets/images/ico_gnb03.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb03_on.svg);
                    }
                    }

                    &.gnb4 {
                    background-image: url(../assets/images/ico_gnb04.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb04_on.svg);
                    }
                    }

                    &.gnb5 {
                    background-image: url(../assets/images/ico_gnb05.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb05_on.svg);
                    }
                    }

                    &.gnb6 {
                    background-image: url(../assets/images/ico_gnb06.svg);

                    &:hover,
                    &:active,
                    &.active {
                        background-image: url(../assets/images/ico_gnb06_on.svg);
                    }
                    }
                }
                }
            }
        }


        /* side-pannel */
        .slidePanel {
            position: fixed;
            top: 4.4rem;
            left: 4.3rem;
            width: 54rem;
            height: calc(100% - 4.4rem);
            display: flex;
            flex-direction: column;
            background-color: var(--secondary2);
            z-index: 99;
            transform: translateX(0);
            transition: transform .3s ease;

            /* 닫힘 상태 */
            &.is-closed {
                transform: translateX(-100%);

                .toogle::after {
                transform: translate(-50%, -50%) rotate(180deg);
                }
            }

            .tabBox {
                flex-shrink: 0;
                width: 100%;
                height: 4.8rem;
                padding: 0 1.9rem;
                margin-top: 1.5rem;
            }

            .tabWrap {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;

                &.is-active {
                display: flex;
                }

                .tabTop {
                flex-shrink: 0;
                width: 100%;
                padding: 0 2rem;
                border-bottom: 1px solid var(--secondary1);

                .title {
                    height: 6.4rem;
                    font-size: var(--fs-ml);
                    color: var(--white);
                    padding: 2rem 0;
                }
                }

                .tabBtm {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 3rem 1.9rem;
                }
            }

            .toogle {
                position: absolute;
                overflow: hidden;
                z-index: 10;
                top: 50%;
                left: 100%;
                width: 2.4rem;
                height: 5rem;
                border-radius: 0 1rem 1rem 0;
                transform: translateY(-50%);
                background-color: var(--secondary2);
                border: solid 1px var(--secondary3);

                &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 2.4rem;
                height: 2.4rem;
                transform: translate(-50%, -50%);
                background: url(../assets/images/ico_toggle.svg) no-repeat center / 2.4rem;
                transition: transform .3s ease;
                }
            }
        }

    }
    /* main */
    #main {
        width: 100%;
        height: calc(100% - 4.4rem);
        position: relative;

        /* top-bar */
        .topBar {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 1.5rem 5.4rem;
        }

        /* top-location */
        .locationInfo {
            grid-column: 2;
            width: 71rem;
            max-width: 100%;
            height: 3.8rem;
            background-color: rgba(var(--secondary6-rgb), .9);

            ul {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;

            li {
                display: flex;
                align-items: center;
                height: 100%;
                padding: 0 1rem;
                color: var(--white);
                font-weight: var(--fw-bold);
                font-size: 1.3rem;

                &:first-child,
                &:last-child {
                padding: 0;
                }

                span + span {
                padding-right: .5rem;
                }

                &.divider {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 1.8rem;
                    background-color: rgba(255, 255, 255, .3);
                }
                }

                .wgs {
                display: flex;
                align-items: center;
                padding-right: .5rem;

                &::before {
                    content: "";
                    display: block;
                    width: 2rem;
                    height: 2rem;
                    margin-right: .5rem;
                    background: url(../assets/images/ico_globe.svg) no-repeat center / 2rem;
                }
                }

                .kst {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 3.1rem;
                height: 1.8rem;
                margin-right: .5rem;
                border-radius: .3rem;
                background-color: var(--tertiary3);
                color: var(--white);
                font-size: var(--fs-s);
                }
            }
            }

            button {
            width: 4rem;
            height: 3.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-sizing: border-box;
            background-color: var(--secondary3);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 3rem;

            &:hover,
            &.active {
                background-color: rgba(var(--primary1-rgb), .8);
            }

            &.map {
                background-image: url(../assets/images/ico_map.svg);
            }

            &.ship {
                background-image: url(../assets/images/ico_ship.svg);
            }

            &.set {
                width: 2rem;
                height: 2rem;
                background-color: transparent;
                background-image: url(../assets/images/ico_set_s.svg);
                background-size: 2rem;

                &:hover,
                &.active {
                background-color: transparent;
                }
            }
            }
        }

        /* top-search */
        .schBox {
            position: relative;
            grid-column: 3;
            justify-self: end;
            width: 20rem;
            height: 3.8rem;

            .sch {
            width: 100%;
            height: 100%;
            padding-right: 4.4rem;
            border-radius: 2rem;
            background-color: rgba(var(--secondary6-rgb), .9);

            &::placeholder {
                color: var(--white);
            }
            }

            .mainSchBtn {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 4rem;
            height: 3.8rem;
            font-size: 0;
            text-indent: -999999em;
            border: none;
            cursor: pointer;
            background: url(../assets/images/ico_search_main.svg) no-repeat center left / 2.4rem;
            }
        }
    }

    /* tool-bar */
    #tool {
        .toolBar {
            position: absolute;
            top: 5.9rem;
            right: .9rem;
            width: 3rem;
            height: 41rem;
        }

        .control {
            position: absolute;
            bottom: 1.8rem;
            right: .9rem;
            width: 3rem;
            height: 20rem;
        }

        .toolItem {
            width: 100%;
            display: flex;
            flex-direction: column;

            &.space {
            li {
                margin-bottom: .5rem;
            }
            }

            &.zoom {
            li {
                height: 3rem;

                &.num {
                background-color: var(--white);
                color: var(--gray-scale2);
                border-left: 1px solid rgba(var(--secondary6-rgb), .8);
                border-right: 1px solid rgba(var(--secondary6-rgb), .8);
                font-size: var(--fs-m);
                }

                button {
                padding-bottom: 0;
                }
            }
            }

            li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 4.2rem;
            background-color: rgba(var(--secondary6-rgb), .8);

            &:hover,
            &.active {
                background-color: rgba(var(--primary1-rgb), .8);
            }

            button {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                padding-bottom: .2rem;
                cursor: pointer;
                text-align: center;
                font-size: var(--fs-xxs);
                color: var(--white);
                background-repeat: no-repeat;
                background-position: top left;
                background-size: 3rem;

                &::before {
                content: "";
                flex-shrink: 0;
                width: 3rem;
                height: 3rem;
                }

                &.tool01 { background-image: url(../assets/images/ico_tool01.svg); }
                &.tool02 { background-image: url(../assets/images/ico_tool02.svg); }
                &.tool03 { background-image: url(../assets/images/ico_tool03.svg); }
                &.tool04 { background-image: url(../assets/images/ico_tool04.svg); }
                &.tool05 { background-image: url(../assets/images/ico_tool05.svg); }
                &.tool06 { background-image: url(../assets/images/ico_tool06.svg); }
                &.tool07 { background-image: url(../assets/images/ico_tool07.svg); }
                &.tool08 { background-image: url(../assets/images/ico_tool08.svg); }

                &.zoomin   { background-image: url(../assets/images/ico_plus.svg); }
                &.zoomout  { background-image: url(../assets/images/ico_minus.svg); }
                &.legend   { background-image: url(../assets/images/ico_legend.svg); }
                &.minimap  { background-image: url(../assets/images/ico_minimap.svg); }
            }
            }
        }
    }

}