:root {
    --hh-login-ink: #151a17;
    --hh-login-green: #19594c;
    --hh-login-green-soft: #edf5f2;
    --hh-login-line: #dfe4e1;
    --hh-login-muted: #68716c;
    --hh-login-surface: #f6f8f6;
}

.hh-login-page {
    color: var(--hh-login-ink);
    background: #fff;
}

.hh-login-page #wrap {
    min-width: 0;
    padding: 0;
    background: #fff;
}

.hh-login-page .hh-mobile-dock {
    display: none !important;
}

.hh-login-page input,
.hh-login-page button {
    font: inherit;
}

.hh-login-main {
    min-height: 65vh;
}

.hh-login-hero {
    border-bottom: 1px solid var(--hh-login-line);
    background: #fff;
}

.hh-login-hero__inner {
    min-height: 226px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 50px;
    padding-bottom: 46px;
}

.hh-login-hero__inner > p,
.hh-login-kicker {
    margin: 0;
    color: var(--hh-login-green);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 720;
    letter-spacing: .13em;
}

.hh-login-hero h1 {
    margin: 13px 0 0;
    color: var(--hh-login-ink);
    font-size: clamp(38px, 3.15vw, 52px);
    line-height: 1.06;
    font-weight: 680;
    letter-spacing: -.055em;
}

.hh-login-hero__inner > span {
    margin-top: 15px;
    color: #56615b;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: -.02em;
}

.hh-login-content {
    padding: 72px 0 112px;
    background: var(--hh-login-surface);
}

.hh-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    align-items: start;
    gap: clamp(54px, 7vw, 108px);
}

.hh-login-guide {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 34px 0 0;
}

.hh-login-guide h2 {
    margin: 14px 0 0;
    color: var(--hh-login-ink);
    font-size: clamp(31px, 3vw, 44px);
    line-height: 1.22;
    font-weight: 650;
    letter-spacing: -.05em;
}

.hh-login-benefits {
    order: 2;
    display: grid;
    gap: 0;
    max-width: 560px;
    margin: 38px 0 0;
    padding: 0;
    border-top: 1px solid var(--hh-login-line);
    list-style: none;
}

.hh-login-benefits li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 21px 0;
    border-bottom: 1px solid var(--hh-login-line);
}

.hh-login-benefits li > span {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hh-login-green-soft);
    color: var(--hh-login-green);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .05em;
}

.hh-login-benefits strong {
    display: block;
    color: var(--hh-login-ink);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 630;
}

.hh-login-benefits p {
    margin: 5px 0 0;
    color: var(--hh-login-muted);
    font-size: 13px;
    line-height: 1.55;
}

.hh-guest-panel {
    order: 3;
    max-width: 560px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 26px;
    margin-top: 26px;
    padding: 24px;
    border: 1px solid #cfded8;
    border-radius: 14px;
    background: #fff;
}

.is-order-entry .hh-guest-panel {
    order: 2;
    margin-top: 30px;
    background: var(--hh-login-green);
    border-color: var(--hh-login-green);
    box-shadow: 0 18px 40px rgba(25, 89, 76, .14);
}

.is-order-entry .hh-login-benefits {
    order: 3;
    margin-top: 27px;
}

.hh-guest-panel > div > p {
    margin: 0;
    color: var(--hh-login-green);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 720;
    letter-spacing: .12em;
}

.hh-guest-panel h3 {
    margin: 8px 0 0;
    color: var(--hh-login-ink);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -.035em;
}

.hh-guest-panel > div > span {
    display: block;
    margin-top: 7px;
    color: var(--hh-login-muted);
    font-size: 12px;
    line-height: 1.55;
}

.is-order-entry .hh-guest-panel > div > p,
.is-order-entry .hh-guest-panel h3,
.is-order-entry .hh-guest-panel > div > span {
    color: #fff;
}

.is-order-entry .hh-guest-panel > div > span {
    opacity: .74;
}

.hh-guest-panel__actions {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.hh-guest-order-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 15px;
    border-radius: 9px;
    background: #fff;
    color: var(--hh-login-green);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
    white-space: nowrap;
}

.hh-guest-order-link b {
    font-size: 14px;
}

.hh-guest-lookup-link {
    color: var(--hh-login-green);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.is-order-entry .hh-guest-lookup-link {
    color: #fff;
    opacity: .76;
}

.hh-login-card {
    padding: 36px;
    border: 1px solid var(--hh-login-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(23, 36, 29, .08);
}

.hh-login-card h2 {
    margin: 10px 0 0;
    color: var(--hh-login-ink);
    font-size: 29px;
    line-height: 1.2;
    font-weight: 670;
    letter-spacing: -.045em;
}

.hh-login-card__lead {
    display: block;
    margin-top: 10px;
    color: var(--hh-login-muted);
    font-size: 13px;
    line-height: 1.55;
}

#loginfrm {
    margin: 26px 0 0;
}

.hh-login-fields {
    display: grid;
    gap: 15px;
}

.hh-login-fields label {
    display: grid;
    gap: 8px;
}

.hh-login-fields label > span {
    color: var(--hh-login-ink);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 620;
}

.hh-login-fields input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 1px solid #cfd6d2;
    border-radius: 10px;
    outline: 0;
    box-sizing: border-box;
    background: #fff;
    color: var(--hh-login-ink);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.hh-login-fields input::placeholder {
    color: #9aa29e;
}

.hh-login-fields input:focus {
    border-color: var(--hh-login-green);
    box-shadow: 0 0 0 3px rgba(25, 89, 76, .08);
}

.hh-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.hh-login-options > a {
    color: #626b66;
    font-size: 12px;
    line-height: 1.4;
}

.hh-login-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #626b66;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.hh-login-save input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.hh-login-save > span {
    width: 18px;
    height: 18px;
    position: relative;
    display: inline-block;
    border: 1px solid #c8cfcb;
    border-radius: 5px;
    background: #fff;
}

.hh-login-save input:checked + span {
    border-color: var(--hh-login-green);
    background: var(--hh-login-green);
}

.hh-login-save input:checked + span::after {
    content: "";
    width: 7px;
    height: 4px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
}

.hh-login-save input:focus-visible + span {
    outline: 2px solid var(--hh-login-green);
    outline-offset: 2px;
}

.hh-login-page .hh-login-submit {
    width: 100%;
    height: 56px;
    margin-top: 23px;
    border: 1px solid var(--hh-login-green);
    border-radius: 10px;
    background: var(--hh-login-green);
    color: #fff !important;
    font-size: 15px;
    line-height: 1;
    font-weight: 670;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(25, 89, 76, .16);
}

.hh-login-page .hh-login-submit:hover {
    border-color: #124b40;
    background: #124b40;
}

.hh-login-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 27px 0 17px;
    color: #8b928e;
    font-size: 11px;
    line-height: 1.2;
}

.hh-login-divider::before,
.hh-login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--hh-login-line);
}

.hh-login-sns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.hh-sns-button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.hh-login-alert {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid #ffd0c8;
    border-radius: 9px;
    background: #fff5f2;
    color: #b63724;
    font-size: 13px;
    line-height: 1.5;
}

.hh-sns-button b {
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.hh-sns-button.is-kakao {
    border-color: #fee500;
    background: #fee500;
    color: #17130a;
}

.hh-sns-button.is-kakao b {
    background: rgba(23, 19, 10, .12);
    color: #17130a;
}

.hh-sns-button.is-naver {
    border-color: #03c75a;
    background: #03c75a;
    color: #fff;
}

.hh-sns-button.is-naver b {
    background: rgba(255, 255, 255, .17);
    color: #fff;
}

.hh-login-register {
    margin: 24px 0 0;
    color: #707873;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.hh-login-register a {
    margin-left: 4px;
    color: var(--hh-login-green);
    font-weight: 680;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    .hh-login-layout {
        grid-template-columns: minmax(0, 1fr) 460px;
        gap: 42px;
    }

    .hh-guest-panel {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .hh-guest-panel__actions {
        justify-items: start;
    }
}

@media (max-width: 860px) {
    .hh-login-content {
        padding: 42px 0 76px;
    }

    .hh-login-layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .hh-login-card {
        order: 1;
        width: 100%;
        max-width: 560px;
        align-self: center;
        box-sizing: border-box;
    }

    .hh-login-guide {
        order: 2;
        width: 100%;
        max-width: 560px;
        align-self: center;
        padding-top: 22px;
    }

    .hh-login-layout.is-order-entry .hh-login-guide {
        order: 1;
        padding-top: 0;
    }

    .hh-login-layout.is-order-entry .hh-login-card {
        order: 2;
    }

    .is-order-entry .hh-login-benefits {
        display: none;
    }
}

@media (max-width: 720px) {
    .hh-login-page .hh-footer {
        margin-bottom: 0;
    }

    .hh-login-hero__inner {
        min-height: 181px;
        padding-top: 30px;
        padding-bottom: 31px;
    }

    .hh-login-hero h1 {
        margin-top: 10px;
        font-size: 34px;
    }

    .hh-login-hero__inner > span {
        margin-top: 11px;
        font-size: 13px;
    }

    .hh-login-content {
        padding: 20px 0 58px;
    }

    .hh-login-card {
        padding: 25px 19px;
        border-radius: 14px;
        box-shadow: none;
    }

    .hh-login-card h2 {
        font-size: 25px;
    }

    .hh-login-guide h2 {
        font-size: 29px;
    }

    .hh-login-benefits {
        margin-top: 27px;
    }

    .hh-guest-panel,
    .is-order-entry .hh-guest-panel {
        margin-top: 22px;
        padding: 20px;
    }

    .is-order-entry .hh-login-guide > .hh-login-kicker,
    .is-order-entry .hh-login-guide > h2 {
        display: none;
    }

    .is-order-entry .hh-guest-panel {
        margin-top: 0;
    }
}

@media (max-width: 430px) {
    .hh-login-sns {
        grid-template-columns: 1fr;
    }

    .hh-login-options {
        align-items: flex-start;
    }

    .hh-guest-order-link {
        width: 100%;
        box-sizing: border-box;
    }

    .hh-guest-panel__actions {
        width: 100%;
    }
}