/* BASIC css start */
/* =========================================================
   AKKINARA MOBILE ORDER LOOKUP LOGIN
   Prefix : akorderlogin-
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.akorderlogin-page,
.akorderlogin-page * {
    box-sizing: border-box;
}

.akorderlogin-page {
    --akorderlogin-brown: #8a5a44;
    --akorderlogin-dark: #252825;
    --akorderlogin-text: #656964;
    --akorderlogin-muted: #929590;
    --akorderlogin-line: #e5e0d9;
    --akorderlogin-soft: #f8f5f1;

    width: 100%;
    max-width: 560px;

    margin: 0 auto;
    padding: 0 16px 42px;

    background: #fff;

    color: var(--akorderlogin-dark);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
}

.akorderlogin-page * {
    min-width: 0;
}

.akorderlogin-page a {
    text-decoration: none !important;
}

.akorderlogin-page p,
.akorderlogin-page h1,
.akorderlogin-page h2,
.akorderlogin-page h3,
.akorderlogin-page ul,
.akorderlogin-page fieldset {
    margin: 0;
    padding: 0;
}

.akorderlogin-page ul {
    list-style: none;
}

.akorderlogin-page fieldset {
    min-width: 0;

    border: 0;
}

.akorderlogin-page legend {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.akorderlogin-page img {
    display: block;

    max-width: 100%;
}


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

.akorderlogin-header {
    padding: 30px 0 23px;
}

.akorderlogin-header h1 {
    color: #252825;

    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;

    letter-spacing: -.04em;
}

.akorderlogin-header p {
    margin-top: 8px !important;

    color: #7d817c;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   TAB
========================================================= */

.akorderlogin-tabs {
    display: grid !important;

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

    gap: 4px;

    width: 100%;

    margin: 0 0 26px !important;
    padding: 4px !important;

    border: 0 !important;
    border-radius: 12px;

    background: #f3f0eb;
}

.akorderlogin-tabs a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;

    color: #7c807b !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 46px !important;

    text-align: center !important;
}

.akorderlogin-tabs a.act {
    border: 0 !important;

    background: #fff !important;

    color: #8a5a44 !important;

    font-weight: 800 !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .07) !important;
}


/* =========================================================
   PANELS
========================================================= */

.akorderlogin-panel {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}

.akorderlogin-panel[hidden] {
    display: none !important;
}


/* =========================================================
   MEMBER INPUT
========================================================= */

.akorderlogin-login-input,
.akorderlogin-guest-input {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.akorderlogin-field {
    display: block;

    width: 100%;
}

.akorderlogin-field + .akorderlogin-field {
    margin-top: 10px;
}

.akorderlogin-login-input input,
.akorderlogin-guest-input input {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;

    padding:
        0
        15px !important;

    border:
        1px solid
        #d7d1c9 !important;

    border-radius:
        10px !important;

    background:
        #fff !important;

    color:
        #222 !important;

    font-family:
        inherit !important;

    font-size:
        15px !important;

    line-height:
        normal !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    -webkit-appearance:
        none !important;

    appearance:
        none !important;
}

.akorderlogin-login-input input:focus,
.akorderlogin-guest-input input:focus {
    border-color:
        var(--akorderlogin-brown) !important;

    box-shadow:
        0 0 0 3px
        rgba(138, 90, 68, .07) !important;
}


/* =========================================================
   CHECKBOX
========================================================= */

.akorderlogin-check-area {
    display: flex !important;

    flex-wrap: wrap !important;
    align-items: center !important;

    gap:
        10px
        17px !important;

    width:
        100% !important;

    margin:
        16px
        0
        0 !important;

    padding:
        0
        0
        22px !important;

    border-bottom:
        1px solid
        #eeeae4 !important;

    background:
        transparent !important;
}

.akorderlogin-check-area label {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #626661 !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    line-height:
        20px !important;

    white-space:
        nowrap !important;
}

.akorderlogin-check-area input[type="checkbox"] {
    flex:
        0 0
        17px;

    width:
        17px !important;

    height:
        17px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    accent-color:
        var(--akorderlogin-brown);
}


/* =========================================================
   INVITE
========================================================= */

.akorderlogin-invite {
    width:
        100% !important;

    margin:
        18px
        0
        0 !important;

    padding:
        0 !important;
}

.akorderlogin-invite input {
    display:
        block !important;

    width:
        100% !important;

    height:
        48px !important;

    margin:
        0 !important;

    padding:
        0
        14px !important;

    border:
        1px solid
        #d7d1c9 !important;

    border-radius:
        9px !important;

    background:
        #fff !important;

    font-size:
        12px !important;
}


/* =========================================================
   KEYBOARD
========================================================= */

.akorderlogin-keyboard {
    width:
        100%;

    margin-top:
        24px;
}

.akorderlogin-keyboard p {
    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;
}

.akorderlogin-keyboard-toggle {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    width:
        100% !important;

    min-height:
        46px !important;

    margin:
        0 !important;

    padding:
        0
        14px !important;

    border:
        1px solid
        #dfdad3 !important;

    border-radius:
        9px !important;

    background:
        #f8f6f2 !important;

    color:
        #5f635e !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}

.akorderlogin-keyboard-arrow {
    width:
        7px;

    height:
        7px;

    margin-top:
        -4px;

    border-right:
        1.5px solid
        #777;

    border-bottom:
        1.5px solid
        #777;

    transform:
        rotate(45deg);

    transition:
        transform
        .18s
        ease;
}

.akorderlogin-keyboard-toggle[aria-expanded="true"]
.akorderlogin-keyboard-arrow {
    margin-top:
        4px;

    transform:
        rotate(225deg);
}

.akorderlogin-keyboard-image {
    width:
        100%;

    margin-top:
        9px;

    padding:
        10px;

    border:
        1px solid
        #e5e0da;

    border-radius:
        8px;

    background:
        #fff;
}

.akorderlogin-keyboard-image img {
    width:
        100% !important;

    height:
        auto !important;

    margin:
        0 auto !important;
}


/* =========================================================
   MEMBER LOGIN ACTION
========================================================= */

.akorderlogin-login-actions {
    display:
        block !important;

    width:
        100% !important;

    margin:
        21px
        0
        0 !important;

    padding:
        0 !important;
}

.akorderlogin-submit {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        56px !important;

    margin:
        0 !important;

    padding:
        0
        15px !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        56px !important;

    text-align:
        center !important;
}

.akorderlogin-submit:link,
.akorderlogin-submit:visited,
.akorderlogin-submit:hover,
.akorderlogin-submit:active {
    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;
}

.akorderlogin-find {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    min-height:
        44px !important;

    margin:
        8px
        0
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #686c67 !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        44px !important;

    text-align:
        center !important;
}


/* =========================================================
   SNS LOGIN
========================================================= */

.akorderlogin-sns {
    display:
        block !important;

    width:
        100% !important;

    margin:
        28px
        0
        0 !important;

    padding:
        24px
        0
        0 !important;

    border:
        0 !important;

    border-top:
        1px solid
        var(--akorderlogin-line) !important;

    background:
        #fff !important;
}

.akorderlogin-sns-title {
    display:
        flex;

    align-items:
        center;

    width:
        100%;

    margin-bottom:
        17px;
}

.akorderlogin-sns-title::before,
.akorderlogin-sns-title::after {
    flex:
        1
        1
        auto;

    height:
        1px;

    background:
        #ebe7e1;

    content:
        "";
}

.akorderlogin-sns-title span {
    flex:
        0
        0
        auto;

    padding:
        0
        11px;

    color:
        #797d78;

    font-size:
        12px;

    font-weight:
        700;
}

.akorderlogin-sns > ul {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


/* MakeShop SNS reset */

.akorderlogin-sns > ul > li,
.akorderlogin-sns > ul > li.naver,
.akorderlogin-sns > ul > li.kakaotalk,
.akorderlogin-sns > ul > li.apple,
.akorderlogin-sns > ul > li.facebook {
    position:
        static !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    float:
        none !important;

    border:
        0 !important;

    background:
        transparent !important;
}

.akorderlogin-sns > ul > li + li {
    margin-top:
        13px !important;
}

.akorderlogin-sns > ul > li > a {
    position:
        static !important;

    display:
        flex !important;

    align-items:
        center !important;

    width:
        100% !important;

    height:
        54px !important;

    margin:
        0 !important;

    padding:
        0
        16px !important;

    float:
        none !important;

    border-radius:
        10px !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        54px !important;

    text-indent:
        0 !important;
}

.akorderlogin-sns > ul > li > a::before,
.akorderlogin-sns > ul > li > a::after {
    display:
        none !important;

    content:
        none !important;
}

.akorderlogin-sns-icon {
    position:
        static !important;

    display:
        flex !important;

    flex:
        0
        0
        28px !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        28px !important;

    height:
        28px !important;

    margin:
        0
        12px
        0
        0 !important;

    padding:
        0 !important;

    border-radius:
        50% !important;

    background-image:
        none !important;

    font-size:
        13px !important;

    font-weight:
        900 !important;

    line-height:
        28px !important;
}

.akorderlogin-sns > ul > li > a > strong {
    display:
        block;

    flex:
        1
        1
        auto;

    padding-right:
        40px;

    font-size:
        13px;

    font-weight:
        700;

    text-align:
        center;
}


/* NAVER */

.akorderlogin-sns
li.naver > a {
    border:
        1px solid
        #03c75a !important;

    background:
        #03c75a !important;

    color:
        #fff !important;
}

.akorderlogin-sns
li.naver
.akorderlogin-sns-icon {
    background:
        rgba(255,255,255,.16) !important;

    color:
        #fff !important;
}


/* KAKAO */

.akorderlogin-sns
li.kakaotalk > a {
    border:
        1px solid
        #ecd700 !important;

    background:
        #fee500 !important;

    color:
        #191919 !important;
}

.akorderlogin-sns
li.kakaotalk
.akorderlogin-sns-icon {
    background:
        rgba(0,0,0,.06) !important;

    color:
        #191919 !important;
}


/* APPLE */

.akorderlogin-sns
li.apple > a {
    border:
        1px solid
        #111 !important;

    background:
        #111 !important;

    color:
        #fff !important;
}

.akorderlogin-sns
li.apple
.akorderlogin-sns-icon {
    background:
        rgba(255,255,255,.14) !important;

    color:
        #fff !important;
}


/* FACEBOOK */

.akorderlogin-sns
li.facebook > a {
    border:
        1px solid
        #315b9d !important;

    background:
        #315b9d !important;

    color:
        #fff !important;
}

.akorderlogin-sns
li.facebook
.akorderlogin-sns-icon {
    background:
        rgba(255,255,255,.14) !important;

    color:
        #fff !important;
}


/* =========================================================
   GUEST
========================================================= */

.akorderlogin-guest-head {
    margin-bottom:
        20px;

    padding:
        0
        2px;
}

.akorderlogin-guest-head h2 {
    color:
        #292c29;

    font-size:
        19px;

    font-weight:
        800;

    line-height:
        1.35;

    letter-spacing:
        -.03em;
}

.akorderlogin-guest-head p {
    margin-top:
        7px !important;

    color:
        #7d817c;

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   ORDER LOOKUP BUTTON
========================================================= */

.akorderlogin-guest-action {
    width:
        100% !important;

    margin:
        20px
        0
        0 !important;

    padding:
        0 !important;
}

.akorderlogin-lookup-button {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        56px !important;

    margin:
        0 !important;

    padding:
        0
        15px !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        56px !important;

    text-align:
        center !important;
}

.akorderlogin-lookup-button:link,
.akorderlogin-lookup-button:visited,
.akorderlogin-lookup-button:hover,
.akorderlogin-lookup-button:active {
    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;
}


/* =========================================================
   JOIN CARD
========================================================= */

.akorderlogin-join {
    display:
        block !important;

    width:
        100% !important;

    margin:
        30px
        0
        0 !important;

    padding:
        24px
        19px !important;

    border:
        1px solid
        #ddd7cf !important;

    border-radius:
        15px !important;

    background:
        #f8f5f1 !important;

    text-align:
        center !important;
}

.akorderlogin-join-copy h3 {
    color:
        #252825;

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1.4;

    letter-spacing:
        -.025em;
}

.akorderlogin-join-copy p {
    margin-top:
        8px !important;

    color:
        #6d716c;

    font-size:
        12px;

    line-height:
        1.65;
}

.akorderlogin-join-button {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    height:
        52px !important;

    margin:
        18px
        0
        0 !important;

    padding:
        0
        16px !important;

    border:
        1px solid
        #8a5a44 !important;

    border-radius:
        10px !important;

    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        52px !important;

    text-align:
        center !important;
}

.akorderlogin-join-button:link,
.akorderlogin-join-button:visited,
.akorderlogin-join-button:hover,
.akorderlogin-join-button:active {
    background:
        #8a5a44 !important;

    color:
        #fff !important;

    -webkit-text-fill-color:
        #fff !important;
}


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

@media screen and (max-width:350px) {

    .akorderlogin-page {
        padding-left:
            12px;

        padding-right:
            12px;
    }

    .akorderlogin-check-area {
        gap:
            9px
            12px !important;
    }

    .akorderlogin-check-area label {
        font-size:
            11px !important;
    }

    .akorderlogin-join {
        padding-left:
            15px !important;

        padding-right:
            15px !important;
    }

}
/* BASIC css end */