/* BASIC css start */
.blind { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.page-header { display: flex; align-items: center; justify-content: center; height: 46px; margin: 24px 0 8px; }
.page-header .page-header__title { font-size: 16px; font-weight: 600; }

/* ==================== 로그인 ==================== */
.login-page { width: 100%; padding: 0 18px; box-sizing: border-box; }

/* 로그인 혜택 슬라이드 */
.login-benefit { width: 100%; overflow: hidden; }
.login-benefit .swiper-slide a { display: block; }
.login-benefit .swiper-slide img { width: 100%; }

/* SNS 로그인 */
.login-form__inner { margin-top: 12px; padding-bottom: 100px; }
.social-login { display: flex; flex-direction: column; gap: 8px; }
.social-login__button { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; font-size: 14px; font-weight: 500; text-decoration: none; }
.social-login__button--kakao { background: #FFE400; color: #000; }
.social-login__button--kakao::before { content: ''; display: block; width: 24px; height: 24px; background: url("/design/newcomfort/m/img/ico_kakao.svg") no-repeat center / 24px auto; }
.social-login__button--naver { background: #45C845; color: #fff; }
.social-login__button--naver::before { content: ''; display: block; width: 24px; height: 24px; background: url("/design/newcomfort/m/img/ico_naver.svg") no-repeat center / 24px auto; }

/* 구분선 */
.login-divider { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.login-divider__line { flex: 1; height: 1px; background: #B4B4B4; }
.login-divider__text { flex: 0 0 auto; color: #B4B4B4; font-size: 12px; }

/* 아이디 로그인 */
.login-form__fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.login-form__fields { display: flex; flex-direction: column; gap: 8px; }
.login-form__field { position: relative; }
.login-form__field .login-input { display: block; width: 100%; height: 50px; padding: 0 16px; border: 1px solid #B4B4B4; border-radius: 0; outline: none; background: #fff; color: #000; font-size: 13px; appearance: none; }
.login-form__field .login-input::placeholder { color: #646464; }
.login-form__field .login-input:focus { border-color: #000; }
.login-form__field--password {}
.login-form__password-toggle { position: absolute; top: 50%; right: 0px; width: 48px; height: 48px; padding: 0; border: 0; background: url("/design/newcomfort/m/img/ico_pw_off.png") no-repeat center / 32px auto; transform: translateY(-50%); cursor: pointer; }
.login-form__password-toggle[aria-pressed="true"] { background: url("/design/newcomfort/m/img/ico_pw_on.png") no-repeat center / 32px auto; }
.login-form__submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin-top: 20px; padding: 0; border: 0; background: #000; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }

/* 로그인 유틸 */
.login-util { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.login-util__link { position: relative; padding: 0 12px; color: #888; font-size: 12px; line-height: 1; text-decoration: none; }
.login-util__link + .login-util__link::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; background: #888; transform: translateY(-50%); }
/* BASIC css end */