body{
    padding-top: 80px;
}
body[p="card"] li[page="card"],
body[p="profile"] li[page="profile"],
body[p="security"] li[page="security"],
body[p="chat"] li[page="chat"]
{
    color: #fff;
    background-color: #91846f;
    border-color: #91846f;
    
}


.SettingMenu{
    display: flex;
    justify-content: center;
    gap: 10px;
    width: min(960px, calc(100% - 48px));
    margin: 18px auto 24px;
    padding: 8px;
    text-align: center;
    background-color: #ffffff73;
    border: 1px solid #ffffffb0;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(71, 65, 58, 0.06);

    li{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        margin: 0;
        padding: 0 18px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: #515151;
        white-space: nowrap;
        border: 1px solid transparent;
        border-radius: 999px;
        transition: color 0.2s, background-color 0.2s, border-color 0.2s;

        &:hover{
            color: #716552;
            background-color: #ffffffa6;
            border-color: #ded6cb;
        }
    }
}


.SettingMain{
    display: block;
    width: 100%;
    padding-bottom: 100px;

    h1{
        color: #716552;
        font-weight: 400;
        letter-spacing: 5px;
    }


    section.chat{
        margin-left: 30px;
        margin-right: 30px;
    }

    section.setting{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        max-width: 840px;
        margin: auto;

        padding-left: 25px;
        padding-right: 25px;

        text-align: left;



        .steptitle{
            grid-column: 1 / -1;
            font-size: 30px;
            text-align: left;
            margin-bottom: 50px;
        }

        > .btn,
        > #cardImg {
            grid-column: 1 / -1;
        }

        > #cardImg {
            max-width: 100% !important;
        }

        .mapRangePanel{
            grid-column: 1 / -1;
            display: grid;
            gap: 12px;
            margin-bottom: 28px;

            .mapSectionTitle{
                color: #716552;
                font-size: 22px;
                font-weight: 700;
                letter-spacing: 2px;
            }

            .mapEditor{
                height: 360px;
                overflow: hidden;
                background: #f9f9f9;
                border: 1px solid #ffffffa8;
                border-radius: 6px;
                box-shadow: 0 0 18px rgba(0, 0, 0, 0.08);
            }

            .mapRangeEditor{
                padding: 12px;
                background: #ffffff5e;
            }

            .mapSearchBar{
                display: grid;
                grid-template-columns: minmax(0, 1fr) 96px;
                gap: 8px;
                align-items: center;
                padding-bottom: 12px;

                input,
                button{
                    height: 44px;
                }

                .mapKeywordWrap{
                    position: relative;
                    min-width: 0;
                }

                input{
                    width: 100%;
                    border: none;
                    border-bottom: 2px solid #cfc8bf;
                    background: #ffffffa8;
                    color: #5f5b55;
                    font-weight: 600;
                    padding-top: 0;
                    padding-bottom: 0;
                    padding-left: 12px;
                    padding-right: 12px;
                    outline: none;

                    &:focus{
                        border-bottom-color: #ae9659;
                    }
                }

                .mapPlaceSuggestions{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: calc(100% + 4px);
                    display: none;
                    max-height: 190px;
                    overflow-y: auto;
                    margin: 0;
                    padding: 6px;
                    list-style: none;
                    background: rgba(255, 255, 255, 0.98);
                    border: 1px solid #e2d9cf;
                    border-radius: 5px;
                    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
                    z-index: 20;

                    &.is-open{
                        display: block;
                    }

                    li{
                        padding: 8px 10px;
                        color: #5f5b55;
                        border-radius: 4px;
                        font-size: 15px;
                        font-weight: 700;
                        cursor: pointer;

                        &:hover,
                        &.is-selected{
                            background: #dbede6;
                        }
                    }
                }

                button{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    color: #fff;
                    background: #8ecb82;
                    border: none;
                    border-radius: 5px;
                    font-weight: 700;

                    span{
                        font-size: 20px;
                        line-height: 1;
                    }
                }
            }

            .mapSearchStatus{
                min-height: 22px;
                padding: 0 12px 8px;
                color: #8d867a;
                font-size: 14px;
                font-weight: 600;

                &[data-type="error"]{
                    color: #c44f55;
                }

                &[data-type="success"]{
                    color: #5bb53d;
                }
            }

            .mapPointList{
                display: grid;
                gap: 6px;
            }

            .mapPointHeader{
                display: grid;
                grid-template-columns: 32px minmax(0, 1fr) 128px 70px;
                gap: 8px;
                padding: 0 12px 4px;
                color: #9d968b;
                font-size: 13px;
                font-weight: 700;

                div{
                    text-align: center;
                }
            }

            .mapPointEmpty,
            .mapPointItem{
                background: #ffffff91;
                padding: 5px;
            }

            .mapPointItem{
                display: grid;
                grid-template-columns: 32px minmax(0, 1fr) 128px 70px;
                gap: 8px;
                align-items: center;

                &.is-active{
                    background-color: #dbede6;
                }

                .mapPointIndex{
                    display: grid;
                    width: 28px;
                    height: 28px;
                    place-items: center;
                    color: #fff;
                    background: #ae9659;
                    border-radius: 50%;
                    font-weight: 700;
                }

                input,
                select,
                button{
                    height: 40px;
                }

                input{
                    width: 100%;
                    padding-top: 0;
                    padding-bottom: 0;
                }

                select{
                    padding-top: 0;
                    padding-bottom: 0;
                }

                button{
                    color: #8b5c5c;
                    background: #fff;
                    border: 1px solid #d8c8c8;
                    border-radius: 5px;
                }
            }
        }

        .cardSaveBar{
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-top: 24px;

            button{
                min-width: 220px;
                height: 52px;
                color: #fff;
                background: #716552;
                border: none;
                border-radius: 999px;
                font-weight: 700;
                letter-spacing: 2px;
            }

            button:disabled{
                opacity: 0.65;
                cursor: wait;
            }

            .cardSaveStatus{
                min-width: 180px;
                color: #746b5f;
                font-size: 14px;
            }

            .cardSaveStatus[data-type="success"]{
                color: #4b9e42;
            }

            .cardSaveStatus[data-type="error"]{
                color: #c24f4f;
            }
        }


        .part{
            margin-bottom: 50px;
        }


        .text{
            margin-bottom: 15px;
        }
        

        .subtitle{
            border-bottom: 2px dashed #b2b2b2;
            padding-bottom: 15px;
            margin-bottom: 25px;
            text-align: left;

            .icon{
                display: inline-block;
                vertical-align: middle;
                color: #92856f;
                font-size: 30px;
            }
            h2{
                text-align: left;
                color: #92856f;
                margin-block-end: 0px;
                margin-block-start: 0;
                display: inline-block;
                vertical-align: middle;
                font-weight: 500;
            }
        }

        label.formeach {
            display: block;
            text-align: left;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            background-color: #ffffff91;
            padding: 20px;
            width: auto;

            input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="number"]{
                    width: calc(100% - 30px);
                    display: inline-block;

                    &.widthauto{
                                width: auto;
                                text-align: center;
                                min-width: 0px;
                    }
                    
            }

            .btn{
                display: inline-block;

                &.line_connect.active{
                    background-color: #36ae37;
                    color: #FFF;
                    border: none;
                }
                &.google_connect.active{
                    background-color: #d04a47;
                    color: #FFF;
                    border: none;
                }
                &.apple_connect.active{
                    background-color: #000;
                    color: #FFF;
                    border: none;
                }

                &.black{
                    background-color: #666666;
                }



            }
        }

    }

    .partshowWrap{
        background-color: #ffffff63;
        padding: 20px;
    }
}


/* ............................................................ */
@media screen and (max-width: 1240px) {

    .SettingMenu {
        justify-content: flex-start;
        gap: 8px;
        width: calc(100% - 28px);
        max-width: none;
        margin-top: 8px;
        margin-bottom: 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        scrollbar-width: none;

        &::-webkit-scrollbar{
            display: none;
        }

        li {
            flex: 0 0 auto;
            min-height: 36px;
            padding: 0 14px;
            font-size: 14px;
            letter-spacing: 0px;
            
        }
    }

    .SettingMain {
        display: block;
        width: auto;
        vertical-align: top;

        & section.setting {
            display: block;

            .mapRangePanel{
                .mapSearchBar,
                .mapPointItem{
                    grid-template-columns: 1fr;
                }
            }

            .cardSaveBar{
                display: grid;
                gap: 10px;

                .cardSaveStatus{
                    min-width: 0;
                    text-align: center;
                }
            }

            label.formeach {
                text-align: left;
                margin-left: 0px;
                margin-right: 0px;
                width: 100%;
                margin-bottom: 5px;

                input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="number"]{
                    width: calc(100% - 35px);


                    &.widthauto{
                                width: auto;
                                text-align: center;
                                min-width: 0px;
                    }
                }
            }
        }
    }
    .SettingMain {
        h1 {
            font-size: 25px;
        }
    }


}