@charset "utf-8";

.lg-body { background: #fff; }

.lg { display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; max-width: 420px; margin: 0 auto; padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 72px); }
.lg__logo { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.lg__logo img { width: 30px; height: 30px; }
.lg__logo span { font-size: 21px; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.lg__title { font-size: 26px; font-weight: 400; line-height: 1.45; letter-spacing: -.03em; color: var(--ink); }
.lg__title b { font-weight: 800; }
.lg__label { margin: 48px 0 10px 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.lg__btns { display: flex; flex-direction: column; gap: 12px; }
.lg__btn { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 56px; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; transition: filter .15s, transform .08s; }
.lg__btn:hover { filter: brightness(.97); }
.lg__btn:active { transform: translateY(1px); }
.lg__btn svg { position: absolute; left: 24px; width: 20px; height: 20px; }
.lg__btn.is-naver { background: #03c75a; color: #fff; }
.lg__btn.is-naver svg { width: 16px; height: 16px; left: 26px; }
.lg__btn.is-kakao { background: #fee500; color: #191919; }
.lg__btn.is-google { background: #fff; border: 1px solid var(--line-strong); color: var(--ink); }
.lg__btn.is-email { background: var(--ink); color: #fff; list-style: none; }
.lg__btn.is-email::-webkit-details-marker { display: none; }
.lg__email[open] .lg__btn.is-email { background: #fff; color: var(--ink); border: 1px solid var(--ink); }

.lg__err { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--hot-soft); color: var(--hot); font-size: 13.5px; font-weight: 600; }
.lg__form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lg__form input[type=email], .lg__form input[type=password] { width: 100%; height: 54px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.lg__form input::placeholder { color: var(--ink-4); }
.lg__form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.lg__keep { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 2px 0 2px 2px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.lg__keep input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lg__keep i { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 5px; background: #fff; transition: background .15s, border-color .15s; }
.lg__keep i::after { content: ""; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.lg__keep input:checked + i { background: var(--accent); border-color: var(--accent); }
.lg__keep input:checked + i::after { opacity: 1; }
.lg__keep input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.lg__submit { height: 54px; border: 0; border-radius: 14px; background: var(--accent); color: var(--ink); cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; }
.lg__submit:hover { background: var(--accent-ink); }
.lg__join { margin-top: 4px; text-align: center; font-size: 14px; color: var(--ink-3); }
.lg__join a { font-weight: 700; color: var(--brand); }

.lg__help { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.lg__tel { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.lg__ask { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); }
.lg__ask svg { width: 16px; height: 16px; }
.lg__ask:hover { border-color: var(--ink); }
.lg__legal { margin-top: 14px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--ink-4); }
.lg__legal a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .lg { padding-top: 32px; min-height: calc(100dvh - 100px); }
  .lg__title { font-size: 23px; }
  .lg__label { margin-top: 36px; }
}

body.su-body { background: var(--bg-page, #f3f5f8); }
.su { display: flex; justify-content: center; padding: 40px 16px; }
.su-card { width: 100%; max-width: 480px; padding: 40px 40px 28px; border-radius: 28px; background: #fff; box-shadow: 0 24px 60px rgba(12,20,14,.08); }
@media (max-width: 640px) {
  body.su-body { background: #fff; }
  .su { padding: 20px 20px 28px; }
  .su-card { padding: 8px 0 0; border-radius: 0; box-shadow: none; }
}
.su-title { display: flex; align-items: center; gap: 10px; margin-bottom: 28px;  font-size: 26px; font-weight: 700; letter-spacing: -.04em; }

.su-prov { flex: none; display: inline-block; width: 26px; height: 26px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 15px; }
.su-prov.is-kakao { background-color: #fee500; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191919' d='M12 4C7 4 3 7.1 3 11c0 2.5 1.6 4.6 4.1 5.9l-1 3.6c-.1.3.3.6.6.4l4.2-2.8h1.1c5 0 9-3.1 9-7S17 4 12 4z'/%3E%3C/svg%3E"); }
.su-prov.is-naver { background-color: #03c75a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15.6 12.8 8.1 2H2v20h6.4V11.2L15.9 22H22V2h-6.4z'/%3E%3C/svg%3E"); background-size: 11px; }
.su-prov.is-google { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.6 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.6c2.1-1.9 3.3-4.8 3.3-8z'/%3E%3Cpath fill='%2334A853' d='M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.7c-1 .7-2.2 1.1-3.7 1.1-2.9 0-5.3-1.9-6.2-4.5H2.1v2.8A11 11 0 0 0 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.8 14.2a6.6 6.6 0 0 1 0-4.3V7.1H2.1a11 11 0 0 0 0 9.9z'/%3E%3Cpath fill='%23EA4335' d='M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2A11 11 0 0 0 2.1 7.1l3.7 2.8C6.7 7.3 9.1 5.4 12 5.4z'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 1px var(--line-strong); }
.su-given { position: relative; }
.su-given .su-prov { position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); background-size: 13px; }
.su-given .su-prov.is-naver { background-size: 9px; }
.su-given input { padding-left: 44px !important; }

.su-field { margin-bottom: 18px; }
.su-field > label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.su-field input { width: 100%; height: 52px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.su-field input::placeholder { color: #b0b6be; }
.su-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,220,132,.10); }
.su-field input[readonly] { background: var(--bg-soft); color: var(--ink-3); }
.su-field input.is-error { border-color: var(--hot); }
.su-row { display: flex; gap: 8px; }
.su-row + .su-row { margin-top: 8px; }
.su-row > input, .su-row > .su-lock { flex: 1; min-width: 0; }
.su-side { flex: none; width: 112px; height: 50px; border: 0; border-radius: 14px; background: #f1f3f1; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.su-side:hover:not(:disabled) { background: #e7eaef; }
.su-side:disabled { color: #aab0ba; cursor: default; }
.su-lock { position: relative; }
.su-lock input { padding-right: 70px; }
.su-timer { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: var(--hot); font-variant-numeric: tabular-nums; pointer-events: none; }
.su-gap { margin-top: 8px; }
.su-pw { position: relative; }
.su-pw input { padding-right: 50px; }
.su-eye { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; transform: translateY(-50%); border: 0; border-radius: 6px; background: none; color: #9aa2b1; cursor: pointer; }
.su-eye:hover { color: #222; background: #f2f4f7; }
.su-eye svg { width: 20px; height: 20px; }
.su-done { margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--brand); }
.su-done[hidden] { display: none; }

.su-ferr { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 13px; color: var(--hot); }
.su-ferr::before { content: "!"; flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--hot); color: #fff; font-size: 10.5px; font-weight: 800; }
.su-ferr[hidden] { display: none; }
.su-ferr--form { margin: 0 0 12px; }

.su-agree { margin-top: 26px; }
.su-check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.su-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-check i { position: relative; flex: none; width: 22px; height: 22px; border: 1.5px solid #c9ced6; border-radius: 4px; background: #fff; transition: background-color .15s, border-color .15s; }
.su-check i::after { content: ""; position: absolute; top: 3px; left: 6.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.su-check input:checked + i { border-color: var(--brand); background: var(--brand); }
.su-check input:checked + i::after { opacity: 1; }
.su-check input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.su-check a { text-decoration: underline; text-underline-offset: 3px; }
.su-check small { color: var(--ink-4); font-size: 12.5px; }
.su-all { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 700; }
.su-items { margin: 0; padding: 0; list-style: none; }
.su-items li { padding: 3px 0; }

.su-btns { display: flex; gap: 8px; margin-top: 28px; }
.su-btn { flex: 1; display: grid; place-items: center; height: 52px; border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .15s; }
.su-btn:hover:not(:disabled) { background: var(--accent-ink); }
.su-btn:disabled { background: #eef0f3; color: #b4bac4; cursor: default; }
.su-btn-line { background: #f1f3f6; color: var(--ink); }
.su-btn-line:hover { background: #e7eaef !important; }
.su-btn.is-busy { position: relative; color: transparent; }
.su-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(12,20,14,.2); border-top-color: var(--ink); border-radius: 50%; animation: su-spin .7s linear infinite; }
@keyframes su-spin { to { transform: rotate(360deg); } }
.su-help { margin-top: 18px; font-size: 14px; text-align: center; color: var(--ink-3); }
.su-help a { font-weight: 700; color: var(--brand); }

.su-toast { position: fixed; left: 50%; bottom: 32px; z-index: 900; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 6px; background: rgba(25,28,36,.94); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 12px 32px -8px rgba(17,19,24,.35); opacity: 0; visibility: hidden; transform: translate(-50%, 24px); transition: opacity .25s, transform .35s ease, visibility .35s; pointer-events: none; }
.su-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }