:root{
  --container: 1160px;
  --muted:#6b7280;
  --black:#111827;
  --purple:#3b2460;
  --card:#ffffff;
  --chip:#f3f4f6;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
}

body{background:#f9fafb;}
.auth-wrap{max-width:var(--container);margin:40px auto;padding:0 20px;}
.auth-card{max-width:460px;margin:0 auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px}
.auth-title{font-size:20px;font-weight:700;margin:0 0 18px}

.login-form{display:flex;flex-direction:column;gap:12px}
.social-box{display:flex;flex-direction:column;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;font-weight:600}
.btn.full{width:100%}
.btn.primary{background:#111827;color:#fff;border-color:#111827}

.btn.social{font-weight:700}
.btn.social.kakao{background:#fee500;border-color:#fee500}
.btn.social.naver{background:#03c75a;border-color:#03c75a;color:#fff}
.btn.social.google{background:#fff;border-color:#e5e7eb}

.divider{position:relative;text-align:center;margin:20px 0}
.divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e5e7eb}
.divider span{position:relative;background:#fff;padding:0 10px;color:var(--muted)}
.divider.thin{height:1px;background:#e5e7eb;margin:14px 0}

.join-simple{display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld .lbl{font-size:12px;color:var(--muted)}
.fld input{height:44px;border:1px solid #e5e7eb;border-radius:10px;padding:0 12px}

.row-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.signup-toggle{margin-top:8px}
.hidden{display:none !important}

.hint{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.hint a{color:#2563eb;font-weight:600}

@media (max-width:520px){
  .auth-card{margin:12px auto;padding:20px}
}

/* Modal (공용 구조 재사용) */
.mora-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.mora-modal.is-open{display:flex}
.mora-modal__dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.mora-modal__box{position:relative;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:min(640px,92vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.mora-modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee}
.mora-modal__close{background:none;border:none;font-size: 25px;line-height:1;cursor:pointer;padding:6px;position: absolute;top: 25px;right: 25px;}
.mora-modal__body{padding:18px;overflow: hidden;height: calc(86vh - 100px);}

/* ===== Auth Card Redesign (image-like) ===== */
:root{
  --card:#f5f5f5;
  --muted:#8c8c8c;
  --shadow:0 14px 32px rgba(0,0,0,.18);
}
body{background:#f0f2f5;}
.auth-card{
  background:var(--card);
  border:1px solid #e9e9e9;
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px 24px;
}
.auth-title{font-size:28px;font-weight:800;margin:0 0 10px;color:#111}
.auth-desc{font-size:14px;color:#6b6b6b;margin:0 0 22px;line-height:1.6;word-break: keep-all;}

/* Inputs: bottom border only */
.auth-card .fld input{
  height:46px;
  border:0;
  border-bottom:1px solid #dedede;
  border-radius:0;
  padding:0 4px;
  background:transparent;
}
.auth-card .fld .lbl{font-size:13px;color:#9b9b9b}
.auth-card .fld input::placeholder{color:#bdbdbd}

/* Login button style */
.auth-card .btn.primary{background:#e9e9e9;color:#111;border-color:#e9e9e9;border-radius:12px;height:50px}

/* Helper links below login */
.auth-links{display:flex;justify-content:space-between;align-items:center;margin:10px 0 6px;color:#a1a1a1;font-size:13px}
.auth-links a{color:#151515;text-decoration:none}

/* Divider on card background */
.auth-card .divider span{background:var(--card)}

/* Social buttons */
.btn.social{font-weight: 600;height:52px;border-radius:12px;font-size: 18px;}
.btn.social.kakao{background:#fee500;border-color:#fee500;color:#111}
.btn.social.naver{background:#03c75a;border-color:#03c75a;color:#fff}
.btn.social.google{background:#fff;border-color:#e5e7eb;color:#111}
.btn.social::before{content:"";display:inline-block;width:18px;height:18px;margin-right:8px}
.btn.social.kakao::before{content: "";background: url(/img/login_kakao.png) center/cover;width:30px;height:30px;line-height:1;font-size:16px;margin-right:10px}
.btn.social.naver::before{content:"";background: url(/img/lgoin_naver.png) center/cover;width:30px;height:30px;}
.btn.social.google::before{content:"";background: url(/img/login_google.png) center/cover;width:30px;height:30px;}

/* Hide legacy signup button to match design */
.signup-toggle{display:none}

@media (max-width:520px){
  .auth-card{margin:12px auto;padding:20px;border-radius:16px}
  .auth-title{font-size:24px}
}

/* ===== Register Wizard (registerModal) ===== */
#registerModal.reg-modal .mora-modal__box{width:min(520px,92vw);background:#f5f5f5;border-radius:20px;border:1px solid #e9e9e9}
#registerModal.reg-modal .mora-modal__body{padding: 25px;background: #fff;}
#registerModal .mora-modal__head{display:none}
.reg-title{font-size:26px;font-weight:800;line-height:1.35;color:#111;margin:0 0 6px}
.reg-sub{font-size:14px;color:#6b6b6b;margin: 0 0 30px;word-break: keep-all;}
.terms-list{display:flex;flex-direction:column;gap:10px;padding-bottom: 80px;height: calc(86vh - 345px); overflow-y: scroll;}
.terms-list::-webkit-scrollbar{
  display: none;
}
.t-row label{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding: 10px 14px;cursor:pointer}
.t-row.t-all label{background:#efefef;border-color:#efefef;padding: 14px;}
.t-inp{display:none}
.t-check{width:22px;height:22px;display:inline-block;background:url('/img/check_off.png') center/contain no-repeat;border-radius:0;box-shadow:none}
.t-inp:checked+label .t-check{background-image:url('/img/check_on.png')}
.t-text{flex:1;font-weight:700;color:#111}
.t-row:not(.t-all) .t-text{font-weight:600}
.t-arrow{color:#999}
.btn.brand{background:#2a1140;border-color:#2a1140;color:#fff;height:56px;border-radius:12px;margin-top:14px}
.reg-form-title{font-size:26px;font-weight:800;color:#111;margin: 0 0 30px;}
.reg-form .rg-field{margin-bottom: 20px;}
.reg-form .row{display:flex;align-items:center;justify-content:space-between;margin-bottom: 8px;}
.reg-form .lbl{font-weight:700;color:#111}
.reg-form .hint{font-size:12px}
.reg-form .hint.ok{color:#2563eb}
.reg-form .hint.bad{color:#ef4444}
.reg-form input[type=text],
.reg-form input[type=password],
.reg-form input[type=email]{width:100%;height: 55px;border-radius:10px;border: 1px solid #D9D9D9;padding:0 12px}
.reg-form .id-row{display:flex;gap:8px;position: relative;}
.reg-form .btn.small{height:46px;border-radius:10px;padding:0 12px;font-weight:700}
.reg-form .btn.line{background: #2563eb;color: #ffffff;position: absolute;right: 5px;top: 50%;transform: translateY(-50%);height: 30px;font-size: 14px;border-radius: 99px;padding: 0 15px;}
.reg-form input.is-valid{border-color:#2563eb;background:#eef5ff}
.reg-form input.is-invalid{border-color:#ef4444}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-btn{height:44px;border:1px solid #ddd;background:#fff;border-radius:10px;font-weight:700;color:#333;cursor:pointer}
.seg-btn.on{background:#2a1140;color:#fff;border-color:#2a1140}
.reg-step[hidden]{display:none!important}
.reg-step.is-active{display:block}

/* Register field check icons */
.reg-form .row .lbl{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.reg-form .row .lbl::after{
  content:"";
  display:inline-block;
  width:18px; height:18px;
  background:url('/img/check_off.png') center/contain no-repeat;
}
.reg-form .rg-field.valid .row .lbl::after{
  background-image:url('/img/check_blue.png');
}

.regi-list{height: calc(86vh - 280px);overflow: hidden;overflow-y: scroll;}
.pw2{
  margin-top: 10px;
}
.regi-list::-webkit-scrollbar{
  display: none;
}

/* ===== Find ID/PW Modal ===== */
#findModal .mora-modal__box{width:min(520px,92vw)}
#findModal .mora-modal__body{padding:24px}
.find-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.find-tab{height:44px;border:1px solid #ddd;background:#fff;border-radius:10px;font-weight:700;color:#333;cursor:pointer}
.find-tab.on{background:#2a1140;color:#fff;border-color:#2a1140}
.find-panel.is-active{display:block}
.find-panel[hidden]{display:none!important}

#findModal .regi-list{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.go_mian .auth-card{
  position: relative;
}
.go_mian .auth-card .btn.brand{
  position: static;
  background: #2563eb;
}