/* BASIC css start */
/* ==================== 로그인 ==================== */
.login-page { width: 100%; padding: 0 20px; box-sizing: border-box; }
.sub-page.login-page .page-header { display: flex; align-items: center; justify-content: center; height: 60px; margin: 20px 0 20px; }
.sub-page.login-page .page-header__title { font-size: 28px; font-weight: 600; color: #000; }

.login-form__inner { width: 360px; margin: 0 auto; padding-bottom: 120px; }

/* 화면 전환 */
.login-step { display: none; }
.login-step.is-active { display: block; }

/* 공용 버튼 */
.login-button { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 50px; padding: 0 24px; border: 0; box-sizing: border-box; background: #000; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.login-button--kakao { background: #FFE400; color: #000; }
.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; }
.login-button--naver { background: #fff; color: #000; border: 1px solid #ddd; }
.login-button--naver::before { content: ''; display: block; width: 24px; height: 24px; background: url("/design/newcomfort/m/img/ico_naver_color.svg") no-repeat center / 24px auto; }
.login-button--outline { background: #fff; color: #666; border: 1px solid #ddd; }

/* 1번 화면 : 혜택 배너 */
.login-benefit { width: 100%; overflow: hidden; }
.login-benefit .swiper-slide a { display: block; }
.login-benefit .swiper-slide img { display: block; width: 100%; }

.login-lead { margin: 16px 0 24px; font-size: 18px; font-weight: 500; color: #000; text-align: center; }

.social-login { display: flex; flex-direction: column; gap: 8px; }
.social-login .login-button--kakao {  margin-bottom: 32px; }
.social-login .login-step__trigger { background-color: #f5f5f5; color: #000; border: 1px solid #ddd; }

.login-divider { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.login-divider__line { flex: 1; height: 1px; background: #ddd; }
.login-divider__text { flex: 0 0 auto; font-size: 12px; color: #999; }

.login-util { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.login-util__menu { display: flex; align-items: center; }
.login-util__link { position: relative; padding: 0 10px; font-size: 12px; line-height: 1; color: #666; text-decoration: none; }
.login-util__link:first-child { padding-left: 0; }
.login-util__link + .login-util__link::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; background: #999; transform: translateY(-50%); }
.login-util__apple { font-size: 12px; color: #666; text-decoration: none; white-space: nowrap; }


/* 2번 화면 : 아이디 로그인 */
.login-form__fieldset { min-width: 0; margin: 0; padding: 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 #ddd; outline: none; background: #fff; color: #000; font-size: 13px; box-sizing: border-box; appearance: none; }
.login-form__field .login-input::placeholder { color: #999; }
.login-form__field .login-input:focus { border-color: #000; }

.login-form__password-toggle { position: absolute; top: 50%; right: 0; width: 48px; height: 48px; padding: 0; border: 0; background: url("/design/newcomfort/m/img/ico_pw_off.png") no-repeat center / 24px auto; transform: translateY(-50%); cursor: pointer; }
.login-form__password-toggle[aria-pressed="true"] { background-image: url("/design/newcomfort/m/img/ico_pw_on.png"); }

.login-form__option { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.login-checkbox { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; cursor: pointer; }
.login-checkbox input { position: absolute; width: 16px; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
.login-checkbox__box { position: relative; display: block; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 2px; box-sizing: border-box; background: #fff; }
.login-checkbox input:checked ~ .login-checkbox__box { background: #000; border-color: #000; }
.login-checkbox input:checked ~ .login-checkbox__box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

.login-form__submit { margin-top: 16px; }

.login-join { margin-top: 32px; }
.login-join__text { margin-bottom: 16px; font-size: 14px; color: #000; }
.login-join .login-button + .login-button { margin-top: 8px; color: #000; }
/* BASIC css end */