/* 1mm 글로벌 회원 — 로그인 / 가입 화면 (11개 언어 공용)
   상담 폼(_assets/globalform/gform-global.css)과 같은 디자인 언어를 쓴다.
   ⚠ 이 블록들은 테마(Salient)의 .dark 행 안에 들어간다. 테마가 span 을 크림색으로,
     button 배경을 같은 색으로 덮어쓰므로 맨 아래 오버라이드 섹션이 반드시 필요하다.
     (상담 폼이 같은 함정을 먼저 밟았다 — gform-global.css 꼬리말 참고) */

.gma-wrap{
  --gma-accent:#c1e151;
  --gma-ink:#242424;
  --gma-ink-2:#565656;
  --gma-ink-3:#8b8b8b;
  --gma-line:#e0e0e0;
  --gma-bg-soft:#f7f7f5;
  --gma-err:#d63b3b;
  --gma-ok:#2f6b33;
  max-width:480px;margin:0 auto;
  font-family:inherit;color:var(--gma-ink);
  text-align:left;
}
.gma-wrap.wide{max-width:620px;}          /* 가입은 칸이 많아 조금 넓게 */
[dir="rtl"] .gma-wrap{text-align:right;}

/* ── 머리 ── */
.gma-head{margin-bottom:30px;text-align:center;}
.gma-head h3{
  font-size:28px;line-height:1.3;font-weight:700;color:var(--gma-ink);
  margin:0 0 10px;letter-spacing:-.01em;
}
.gma-head p{font-size:14.5px;line-height:1.7;color:var(--gma-ink-2);margin:0;}

/* ── 칸 ── */
.gma-row{display:flex;flex-wrap:wrap;gap:0 18px;}
.gma-f{flex:1 1 100%;margin-bottom:18px;min-width:0;}
.gma-f.c2{flex:1 1 calc(50% - 9px);}
.gma-f.cc{flex:0 0 190px;}
.gma-f.tel{flex:1 1 180px;}

.gma-f > label,.gma-f > .gma-lab{
  display:block;font-size:13.5px;font-weight:600;color:var(--gma-ink);
  margin-bottom:7px;line-height:1.4;
}
.gma-req{color:var(--gma-err);margin-inline-start:3px;font-weight:700;}
/* 필수가 아닌 칸. * 자리에 '선택' 이 들어간다 — 별표를 빼기만 하면
   '안 써도 되는 칸' 인지 '깜빡한 칸' 인지 구분이 안 된다. */
.gma-opt{
  margin-inline-start:5px;font-size:11px;font-weight:400;letter-spacing:0;
  color:var(--gma-ink-3);
}
.gma-hint{display:block;font-size:12px;font-weight:400;color:var(--gma-ink-3);margin-top:5px;line-height:1.5;}

.gma-wrap input[type=text],
.gma-wrap input[type=email],
.gma-wrap input[type=tel],
.gma-wrap input[type=password],
.gma-wrap select{
  width:100%;box-sizing:border-box;
  padding:13px 14px;border:1px solid var(--gma-line);border-radius:4px;
  background:#fff;color:var(--gma-ink);
  /* 16px 미만이면 iOS 가 화면을 확대한다. select 는 예외라 그대로 둔다. */
  font-size:16px;font-family:inherit;line-height:1.4;
  transition:border-color .15s;
}
.gma-wrap select{font-size:15px;}
.gma-wrap input:focus,.gma-wrap select:focus{
  outline:none;border-color:var(--gma-ink);
}
.gma-wrap input::placeholder{color:#b4b4b4;}

/* 비밀번호 보기 */
.gma-pw{position:relative;}
.gma-pw input{padding-inline-end:52px!important;}
.gma-pw button{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;margin:0;cursor:pointer;
  color:var(--gma-ink-3);font-size:12px;font-family:inherit;font-weight:600;
  line-height:1;letter-spacing:.02em;
}
.gma-pw button:hover{color:var(--gma-ink);}

/* ── 체크 ── */
.gma-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;line-height:1.55;}
.gma-check input{
  flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--gma-ink);cursor:pointer;
}
.gma-check > span{font-size:13.5px;color:var(--gma-ink-2);}
.gma-check a{color:var(--gma-ink);text-decoration:underline;}

/* ── 제출 ── */
.gma-submit{
  display:block;width:100%;padding:17px 20px;margin-top:4px;
  background:var(--gma-ink);color:#fff;border:0;border-radius:4px;
  font-size:16px;font-weight:700;font-family:inherit;letter-spacing:.02em;
  cursor:pointer;transition:background .15s;
}
.gma-submit:hover{background:#000;}
.gma-submit:active{transform:translateY(1px);}
.gma-submit[disabled]{opacity:.55;cursor:default;}

/* ── 아래 안내 ── */
.gma-alt{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--gma-line);
  text-align:center;font-size:14px;color:var(--gma-ink-2);line-height:1.7;
}
.gma-alt a{color:var(--gma-ink);font-weight:700;text-decoration:underline;}

/* ── 오류 ── */
.gma-f.err input,.gma-f.err select{border-color:var(--gma-err);}
.gma-msg{display:none;font-size:12.5px;color:var(--gma-err);margin-top:6px;line-height:1.5;}
.gma-f.err .gma-msg{display:block;}
.gma-formerr{
  display:none;margin:0 0 20px;padding:13px 16px;border-radius:4px;
  background:#fdeeee;border:1px solid #f0c2c2;color:var(--gma-err);
  font-size:14px;line-height:1.6;
}
.gma-formerr.on{display:block;}

/* ── 허니팟 — display:none 은 일부 봇이 걸러내므로 화면 밖으로 민다 ── */
.gma-hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;}

/* ── 성공 ── */
/* ⚠ 기본은 숨김이다. 이걸 빠뜨려서 가입·재설정 화면에 '가입이 완료되었습니다' 가
   폼과 함께 늘 떠 있었다. 제출 성공 시 폼에 .done 이 붙으면 이것만 남는다. */
.gma-done{
  display:none;
  margin:8px 0 0;padding:26px 22px;border-radius:6px;
  background:#f2f8f0;border:1px solid #cfe3c6;text-align:center;
}
.gma-done strong{display:block;margin-bottom:8px;font-size:19px;line-height:1.4;color:var(--gma-ok);}
.gma-done span{display:block;font-size:14px;line-height:1.7;color:#4a6b4d;}
.gma-form.done > *:not(.gma-done){display:none!important;}
.gma-form.done .gma-done{display:block!important;}

/* ── 재설정 화면 ── */
.gma-lead{
  font-size:14.5px;line-height:1.7;color:var(--gma-ink-2);
  margin:0 0 22px;text-align:center;
}
/* 재설정 화면의 두 갈래. 기본값은 '링크 요청' 이고, ?t= 를 들고 왔을 때만
   auth.js 가 갈아 끼운다. JS 가 안 돌아도 링크 요청 폼은 쓸 수 있어야 한다. */
.gma-reset-page [data-gma-mode="reset"]{display:none;}
.gma-expired{
  display:none;
  padding:26px 22px;border-radius:6px;text-align:center;
  background:var(--gma-bg-soft);border:1px solid var(--gma-line);
}
.gma-expired strong{
  display:block;margin-bottom:18px;font-size:15.5px;font-weight:600;
  line-height:1.6;color:var(--gma-ink);
}
/* 이 버튼은 <a> 다. 아래 테마 오버라이드가 button 만 잡으므로 따로 되돌려야 한다. */
.gma-expired .gma-submit{
  display:inline-block;max-width:280px;margin:0 auto;
  text-decoration:none;text-align:center;
}

/* ── 이미 로그인한 사람이 이 화면에 왔을 때 ── */
.gma-already{
  padding:26px 22px;border-radius:6px;text-align:center;
  background:var(--gma-bg-soft);border:1px solid var(--gma-line);
}
.gma-already strong{display:block;margin-bottom:8px;font-size:18px;color:var(--gma-ink);}
.gma-already span{display:block;font-size:14px;line-height:1.7;color:var(--gma-ink-2);}
.gma-already .gma-submit{max-width:260px;margin:16px auto 0;}

/* ── 테마(Salient) 오버라이드 ──
   이 블록이 .dark 행 안에 놓이면 테마가 span 을 크림색(#f8f7e0)으로,
   button 을 같은 색 배경으로 덮는다. 해당 지점만 되돌린다. */
.gma-wrap .gma-f > label,
.gma-wrap .gma-f > .gma-lab,
.gma-wrap .gma-head h3{color:var(--gma-ink)!important;}
.gma-wrap .gma-head p,
.gma-wrap .gma-check > span,
.gma-wrap .gma-alt{color:var(--gma-ink-2)!important;}
.gma-wrap .gma-hint,.gma-wrap .gma-opt{color:var(--gma-ink-3)!important;}
.gma-wrap .gma-req,.gma-wrap .gma-msg,.gma-wrap .gma-formerr{color:var(--gma-err)!important;}
.gma-wrap .gma-check a,.gma-wrap .gma-alt a{color:var(--gma-ink)!important;}
.gma-wrap .gma-pw button{color:var(--gma-ink-3)!important;background:none!important;
  box-shadow:none!important;text-shadow:none!important;padding:8px!important;
  width:auto!important;height:auto!important;}
.gma-wrap .gma-done strong{color:var(--gma-ok)!important;}
.gma-wrap .gma-done span{color:#4a6b4d!important;}
.gma-wrap .gma-already strong{color:var(--gma-ink)!important;}
.gma-wrap .gma-already span{color:var(--gma-ink-2)!important;}

.gma-wrap button.gma-submit{
  background:var(--gma-ink)!important;color:#fff!important;
  border:0!important;box-shadow:none!important;text-shadow:none!important;
  border-radius:4px!important;line-height:1.3!important;height:auto!important;
  width:100%!important;max-width:none!important;display:block!important;
  padding:17px 20px!important;
}
.gma-wrap button.gma-submit:hover{background:#000!important;color:#fff!important;}
.gma-wrap .gma-already button.gma-submit{max-width:260px!important;}

/* 재설정 안내의 '다시 요청' 은 <a> 라 위 button 규칙에 안 걸린다. 같은 모양으로 맞춘다. */
.gma-wrap a.gma-submit{
  background:var(--gma-ink)!important;color:#fff!important;
  border:0!important;box-shadow:none!important;text-shadow:none!important;
  border-radius:4px!important;line-height:1.3!important;height:auto!important;
  display:inline-block!important;padding:15px 26px!important;
  text-decoration:none!important;font-weight:700;font-size:15px;
}
.gma-wrap a.gma-submit:hover{background:#000!important;color:#fff!important;}
.gma-wrap .gma-lead{color:var(--gma-ink-2)!important;}
.gma-wrap .gma-expired strong{color:var(--gma-ink)!important;}
.gma-wrap label{margin-bottom:7px;}

/* 테마가 label 을 display:block 으로, p 의 margin 을 0 으로 덮는다(실측).
   체크박스와 글자가 붙어 버리고, 아래 안내줄이 버튼에 달라붙는다.
   여기만 !important 로 되돌린다 — 선택자를 더 좁혀도 테마가 이긴다. */
.gma-wrap .gma-check{
  display:flex!important;align-items:flex-start!important;gap:9px!important;
  margin-bottom:0!important;
}
.gma-wrap .gma-alt{margin:22px 0 0!important;padding-top:20px!important;}
.gma-wrap .gma-f.err .gma-msg{display:block!important;}

/* ── 헤더의 로그인 자리 (로그인하면 이름·로그아웃으로 바뀐다) ── */
.gma-me-name{white-space:nowrap;}

/* ── 반응형 ── */
@media (max-width:640px){
  .gma-head h3{font-size:23px;}
  .gma-f.c2,.gma-f.cc,.gma-f.tel{flex:1 1 100%;}
}