
*{box-sizing:border-box}html,body{margin:0;font-family:Pretendard,"Noto Sans KR",Arial,sans-serif;color:#15243a;background:#f5f8fc}
a{text-decoration:none;color:inherit}button,input,select{font:inherit}
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(360px,.92fr) minmax(540px,1.08fr)}
.auth-brand{position:relative;overflow:hidden;padding:54px 64px;color:#fff;background:linear-gradient(145deg,#062d65,#0751a1 58%,#0a8a91)}
.auth-brand:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 26%),radial-gradient(circle at 90% 80%,rgba(27,214,180,.24),transparent 32%)}
.auth-brand>*{position:relative;z-index:1}.auth-logo{display:flex;align-items:center;gap:12px}.auth-logo img:first-child{width:54px;height:54px;object-fit:contain}.auth-logo img:last-child{width:210px;max-height:52px;object-fit:contain;filter:brightness(0) invert(1)}
.auth-brand-copy{max-width:520px;margin-top:125px}.auth-brand-copy .eyebrow{font-size:12px;letter-spacing:2.2px;font-weight:800;opacity:.72}.auth-brand-copy h1{font-size:46px;line-height:1.2;letter-spacing:-2px;margin:18px 0}.auth-brand-copy p{font-size:16px;line-height:1.9;color:rgba(255,255,255,.8)}
.brand-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:38px}.brand-points div{padding:17px 13px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:rgba(255,255,255,.08);backdrop-filter:blur(5px)}.brand-points b,.brand-points small{display:block}.brand-points b{font-size:17px}.brand-points small{margin-top:5px;color:rgba(255,255,255,.65);font-size:11px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:55px 40px;background:linear-gradient(145deg,#fff,#f6f9fd)}
.auth-box{width:min(100%,560px)}.back-home{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#64748b;margin-bottom:24px}.auth-title span{font-size:11px;letter-spacing:2px;color:#1764c7;font-weight:900}.auth-title h2{font-size:34px;letter-spacing:-1.5px;margin:9px 0}.auth-title p{margin:0 0 28px;color:#718096;line-height:1.7}
.form-card{background:#fff;border:1px solid #e1e8f0;border-radius:24px;padding:32px;box-shadow:0 18px 55px rgba(28,57,91,.09)}
.field{margin-bottom:18px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}.field input,.field select{width:100%;height:50px;border:1px solid #dce4ed;border-radius:10px;padding:0 14px;outline:none;background:#fff;color:#203047}.field input:focus,.field select:focus{border-color:#3979d4;box-shadow:0 0 0 3px rgba(57,121,212,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.help{font-size:11px;color:#8a98aa;margin-top:6px;line-height:1.55}.auth-btn{width:100%;height:52px;border:0;border-radius:10px;background:linear-gradient(90deg,#1458bd,#2479e8);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(30,100,205,.2)}
.form-options{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:5px 0 22px;color:#63758a}.form-options label{display:flex;gap:6px;align-items:center}.form-options a{color:#1764c7;font-weight:700}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:#6b7c91}.auth-switch a{color:#125cb9;font-weight:900}
.member-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px;padding:5px;background:#f0f4f9;border-radius:12px}.member-tab{height:44px;border:0;border-radius:9px;background:transparent;font-weight:800;color:#6b7c91;cursor:pointer}.member-tab.active{background:#fff;color:#0e57ad;box-shadow:0 3px 12px rgba(34,66,101,.1)}
.premium-only{display:none}.premium-mode .premium-only{display:block}.id-preview{display:flex;gap:8px}.id-preview input{background:#f6f8fb;font-weight:900;color:#0b57ad}.small-btn{border:1px solid #ccd9e7;background:#fff;border-radius:10px;padding:0 14px;white-space:nowrap;font-weight:800;color:#24527f}
.stepbar{display:flex;align-items:center;gap:8px;margin:0 0 22px}.stepbar span{font-size:11px;color:#8a98aa}.stepbar b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#eaf1fb;color:#1764c7;font-size:11px}.stepbar .on{background:#1764c7;color:#fff}
@media(max-width:900px){.auth-page{grid-template-columns:1fr}.auth-brand{display:none}.auth-main{padding:34px 18px}.form-card{padding:24px}.auth-title h2{font-size:29px}}
@media(max-width:560px){.form-row{grid-template-columns:1fr}.auth-main{align-items:flex-start}.form-card{border-radius:18px}.auth-box{width:100%}}

/* v3 auth/register refinements */
.auth-brand-symbol{display:flex;justify-content:center;align-items:center;margin:22px auto 28px;width:100%}
.auth-brand-symbol img{display:block;width:min(350px,82%);height:auto;object-fit:contain}
.password-wrap{position:relative}
.password-wrap input{padding-right:48px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1}
.field-error{display:none;color:#c53939;font-size:12px;margin-top:6px;font-weight:700}
.field.has-error input,.field.has-error select{border-color:#e05252!important;box-shadow:0 0 0 3px rgba(224,82,82,.08)}
.field.has-error .field-error{display:block}
.gift-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.gift-count{font-size:12px;font-weight:800;color:#1c65d8}
.gift-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.gift-option{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:10px 12px;border:1px solid #e1e8f0;border-radius:10px;background:#fff;cursor:pointer}
.address-row{display:grid;grid-template-columns:150px 1fr;gap:10px}
.postcode-btn{border:1px solid #1f67d8;background:#fff;color:#165abf;border-radius:10px;font-weight:800;cursor:pointer;padding:0 14px}
.login-link-box{text-align:center;margin-top:18px;color:#6b7687;font-size:14px}
.login-link-box a{color:#145fc9;font-weight:800;text-decoration:none}
@media(max-width:760px){
 .auth-brand-symbol{margin:12px auto 18px}
 .auth-brand-symbol img{width:min(250px,72%)}
 .gift-options{grid-template-columns:1fr}
 .address-row{grid-template-columns:1fr}
 .postcode-btn{height:46px}
}

/* v4 balanced auth layout */
@media (min-width: 761px){
  .auth-brand{position:relative}
  .auth-brand-symbol{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, calc(-50% + 150px));
    width:100%;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .auth-brand-symbol img{
    width:min(350px,72%);
    max-height:260px;
    object-fit:contain;
  }
}
.auth-switch,.login-link-box{
  text-align:center;
  margin-top:18px;
  color:#7b8493;
  font-size:14px;
  line-height:1.6;
}
.auth-switch a,.login-link-box a{
  color:#145fc9;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
}
.password-wrap{position:relative}
.password-wrap input{padding-right:48px!important}
.password-toggle{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#6f7a89!important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
.password-toggle:hover,.password-toggle:focus{background:transparent!important;border:0!important;box-shadow:none!important}
.password-toggle svg{width:21px;height:21px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
 .auth-brand-symbol{position:static;transform:none;margin:12px auto 18px}
}

/* ===== AUTH UI V5 - FORCE FINAL LAYOUT ===== */

/* PC: top wordmark -> centered 350px symbol -> copy */
@media (min-width:761px){
  .auth-brand{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:100vh!important;
    padding:54px 64px!important;
  }
  .auth-brand .auth-logo{
    flex:0 0 auto!important;
  }
  .auth-brand .auth-brand-symbol{
    position:static!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:100%!important;
    height:auto!important;
    margin:125px auto 0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    pointer-events:none!important;
    flex:0 0 auto!important;
  }
  .auth-brand .auth-brand-symbol img{
    width:350px!important;
    max-width:80%!important;
    height:auto!important;
    max-height:260px!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
  .auth-brand .auth-brand-copy{
    margin-top:42px!important;
    max-width:520px!important;
    flex:0 0 auto!important;
  }
}

/* login/register link same style */
.auth-switch,
.login-link-box{
  text-align:center!important;
  margin-top:18px!important;
  color:#6b7c91!important;
  font-size:13px!important;
  line-height:1.6!important;
}
.auth-switch a,
.login-link-box a{
  color:#125cb9!important;
  font-size:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
}

/* eye icon: only SVG, no visible button frame */
.password-wrap{
  position:relative!important;
}
.password-wrap input{
  width:100%!important;
  padding-right:48px!important;
}
.password-wrap .password-toggle{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
  color:#697687!important;
  cursor:pointer!important;
  z-index:10!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.password-wrap .password-toggle:hover,
.password-wrap .password-toggle:focus,
.password-wrap .password-toggle:active{
  border:0!important;
  outline:0!important;
  background:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.password-wrap .password-toggle svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  pointer-events:none!important;
}

@media(max-width:760px){
 .auth-brand .auth-brand-symbol{
   position:static!important;
   transform:none!important;
   margin:12px auto 18px!important;
 }
 .auth-brand .auth-brand-symbol img{
   width:min(250px,72%)!important;
 }
}

/* ===== REGISTER GIFT ALIGNMENT V9 ===== */
#gifts .gift-options{
  align-items:stretch;
}
#gifts .gift-option{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-width:0;
  padding:10px 12px!important;
  text-align:left!important;
  cursor:pointer;
}
#gifts .gift-option input[type="checkbox"]{
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  flex:0 0 16px!important;
  margin:0!important;
  padding:0!important;
  box-shadow:none!important;
}
#gifts .gift-option span{
  display:block!important;
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
  padding:0!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:700;
  color:#314256;
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:760px){
  #gifts .gift-options{grid-template-columns:1fr!important}
  #gifts .gift-option{min-height:40px;padding:9px 11px!important}
  #gifts .gift-option span{font-size:12px!important}
}

/* ===== REGISTER GIFT SIZE V10 ===== */
#gifts .gift-option input[type="checkbox"]{
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  flex:0 0 24px!important;
}

/* ===== WE FIXED CODE INPUT V13 ===== */
.we-code{
  display:flex;
  align-items:center;
  width:100%;
  height:50px;
  overflow:hidden;
  border:1px solid #dce4ed;
  border-radius:10px;
  background:#fff;
}
.we-code:focus-within{border-color:#3979d4;box-shadow:0 0 0 3px rgba(57,121,212,.10)}
.we-code>span{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  border-right:1px solid #dce4ed;
  background:#f3f6fa;
  color:#145fc0;
  font-size:14px;
  font-weight:900;
}
.field .we-code>input{
  flex:1!important;
  min-width:0!important;
  width:auto!important;
  height:48px!important;
  margin:0!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.premium-sponsor{display:none}
.premium-mode .premium-sponsor{display:block}
.premium-mode .family-center{display:none}

/* ===== JOIN TYPES V18 ===== */
.normal-mode .referral-row{display:none!important}
.member-tabs.three{grid-template-columns:repeat(3,1fr)!important}
.join-choice-page{min-height:100vh;background:linear-gradient(135deg,#f4f9ff,#f8fbf7);padding:34px 20px}
.choice-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 30px}.choice-logo img:first-child{width:52px;height:52px;object-fit:contain}.choice-logo img:last-child{max-width:190px;max-height:48px;object-fit:contain}
.join-choice-box{max-width:1040px;margin:auto;text-align:center}.choice-eyebrow{font-size:11px;letter-spacing:2px;font-weight:900;color:#155fc1}.join-choice-box h1{font-size:34px;margin:8px 0}.join-choice-box>p{color:#718096;margin:0 auto 28px}
.join-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.join-choice{display:flex;flex-direction:column;text-align:left;min-height:245px;padding:25px;border:1px solid #dfe7f0;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(30,57,83,.06);color:#27394c;text-decoration:none;transition:.2s}.join-choice:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(30,57,83,.11)}.join-choice em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:1.5px;color:#155fc1}.join-choice strong{font-size:21px;margin-top:13px}.join-choice span{font-size:12px;line-height:1.7;color:#758398;margin-top:10px}.join-choice b{margin-top:auto;color:#155fc1;font-size:12px}.join-choice.premium{border:2px solid #3279d4;background:linear-gradient(160deg,#fff,#f0f6ff)}.join-choice.family{border-top:4px solid #20a477}.join-choice.normal{border-top:4px solid #94a3b8}.choice-login{margin-top:25px;color:#7b8796;font-size:12px}.choice-login a{color:#155fc1;font-weight:900}
@media(max-width:700px){.join-choice-page{padding:24px 14px}.join-choice-box h1{font-size:25px}.join-choice-grid{grid-template-columns:1fr;gap:10px}.join-choice{min-height:155px;padding:20px}.member-tabs.three .member-tab{font-size:11px;padding-left:5px;padding-right:5px}}

/* ===== V25 SAME MEMBERSHIP IMAGES ===== */
.join-choice{padding:0!important;overflow:hidden}
.join-choice-image{height:150px;overflow:hidden;background:#eef4fa}
.join-choice-image img{display:block;width:100%;height:100%;object-fit:cover}
.join-choice>em,.join-choice>strong,.join-choice>span,.join-choice>b{margin-left:24px;margin-right:24px}
.join-choice>em{margin-top:20px}
.join-choice>b{margin-bottom:22px}
@media(max-width:700px){.join-choice-image{height:145px}.join-choice>em,.join-choice>strong,.join-choice>span,.join-choice>b{margin-left:20px;margin-right:20px}}

/* V27 - 메인 회원카드와 동일한 회원가입 유형 카드 */
.join-choice-box{max-width:1240px!important}
.join-grid-reference{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important}
.join-ref-card{display:flex!important;flex-direction:column!important;min-height:510px!important;padding:32px 30px 30px!important;border:1px solid #dfe6ee!important;border-radius:22px!important;background:#fff!important;box-shadow:none!important;text-align:left!important;color:inherit!important;text-decoration:none!important;overflow:visible!important}
.join-ref-card.premium{border:1.5px solid #7da9e8!important;box-shadow:0 18px 38px rgba(36,104,200,.10)!important}
.join-card-top{display:flex;align-items:flex-start;justify-content:space-between;min-height:56px;margin-bottom:18px}
.join-letter{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#eef5ff;color:#1764c0;font-size:20px;font-weight:900}
.join-ref-card.normal .join-letter{background:#f2f4f7;color:#607287}
.join-premium-badge{padding:7px 12px;border-radius:999px;background:#1767dd;color:#fff;font-size:9px;font-weight:900}
.join-ref-card small{display:block;color:#8994a3;font-size:10px;letter-spacing:1.1px;margin:0 0 10px!important}
.join-ref-card strong{display:block;color:#102a48;font-size:25px;line-height:1.25;margin:0 0 20px!important}
.join-ref-card p{min-height:66px;color:#728095;font-size:12px;line-height:1.8;margin:0 0 18px!important}
.join-ref-card ul{margin:0 0 28px;padding-left:18px;color:#65758a;font-size:11px;line-height:1.9}
.join-ref-btn{margin:auto 0 0!important;width:100%;min-height:48px;display:flex!important;align-items:center;justify-content:center;border-radius:10px;font-size:12px;font-weight:900}
.join-ref-card .premium-btn{background:#2268e8;color:#fff!important}
.join-ref-card .family-btn,.join-ref-card .general-btn{background:#edf4ff;color:#175fc0!important}
@media(max-width:1000px){.join-grid-reference{grid-template-columns:1fr!important;max-width:620px;margin-left:auto!important;margin-right:auto!important}.join-ref-card{min-height:auto!important}.join-ref-card p{min-height:0}}
