/* 로그인 · 가입 신청 화면
 * 화면 전체를 덮는다. 로그인하기 전에는 아무것도 안 보이게.
 */

.lock{
  position:fixed; inset:0; z-index:100;
  background:var(--band);
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; overflow-y:auto;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.lock[hidden]{display:none}

/* margin:auto — 세로 가운데. 내용이 화면보다 길면(가입 폼) 잘리지 않고 스크롤된다. */
.lock-in{width:100%; max-width:400px; margin:auto}
.lock-brand{text-align:center; margin-bottom:28px}
.lock-logo{display:block; height:96px; width:auto; margin:0 auto 12px}
.lock-tag{font-size:12px; color:#8b9484; letter-spacing:.02em}

.lock-card{
  background:var(--card); border-radius:var(--r); padding:24px 22px 22px;
  border:1px solid rgba(0,0,0,.06);
}
/* 로그인/가입 제목·설명은 카드 안에서 가운데 정렬 (입력칸·라벨은 왼쪽 그대로) */
.lock-card h2{font-size:16px; font-weight:700; margin:0 0 5px; text-align:center}
.lock-card .sub{font-size:12.5px; color:var(--tx2); margin:0 0 18px; line-height:1.6; text-align:center}

/* 뒤로가기 (가입 화면 상단) */
.lock-back{
  display:inline-flex; align-items:center; gap:4px; border:0; background:none; cursor:pointer;
  color:var(--tx2); font-size:12.5px; font-weight:600; padding:2px 2px; margin:-4px 0 10px;
}
.lock-back:hover{color:var(--green)}

/* 관리자 연락처 안내 */
.admin-contact{
  margin-top:12px; padding:9px 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); color:#c8cfbf; font-size:12px; line-height:1.6;
  text-align:center;
}
.admin-contact b{color:#fff}
.lock-help .admin-contact{background:var(--chip); color:var(--tx2)}
.lock-help .admin-contact b{color:var(--tx)}

.field{margin-bottom:13px}
.field > label{
  display:block; font-size:11.5px; font-weight:700; color:var(--tx2);
  margin-bottom:6px; letter-spacing:.02em;
}
.field .hint{font-size:11px; color:var(--tx3); margin-top:5px; line-height:1.55}
.input{
  width:100%; border:1px solid var(--bd); background:var(--bg); color:var(--tx);
  border-radius:var(--r-sm); padding:10px 12px; font-size:14px; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.input:focus{border-color:var(--green); box-shadow:0 0 0 3px var(--gold-soft)}
.input::placeholder{color:var(--tx3)}

.btn-wide{
  width:100%; padding:12px; font-size:14px; font-weight:700;
  border-radius:var(--r-sm); border:0; cursor:pointer;
  background:var(--band); color:#fff; margin-top:6px;
}
.btn-wide:hover{background:var(--band-2)}
.btn-wide:disabled{opacity:.55; cursor:wait}

.lock-msg{
  font-size:12.5px; line-height:1.6; margin:12px 0 0; padding:10px 12px;
  border-radius:var(--r-sm); display:none;
}
.lock-msg.on{display:block}
.lock-msg.bad{background:var(--danger-bg); color:var(--danger)}
.lock-msg.good{background:var(--chip); color:var(--tx)}

.lock-switch{
  text-align:center; margin-top:16px; font-size:12.5px; color:#8b9484;
}
.lock-switch button{
  background:none; border:0; color:var(--gold); font-weight:700;
  cursor:pointer; font-size:12.5px; padding:2px 4px; text-decoration:underline;
}

/* 여러 개 고르기 — 지역·진료과 */
.picker{border:1px solid var(--bd); border-radius:var(--r-sm); background:var(--bg); padding:10px}
.picker-tabs{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px}
.ptab{
  border:1px solid var(--bd); background:var(--card); color:var(--tx2);
  border-radius:20px; padding:4px 10px; font-size:11.5px; cursor:pointer;
}
.ptab.on{background:var(--band); border-color:var(--band); color:#fff; font-weight:700}
.picker-body{display:flex; flex-wrap:wrap; gap:5px; max-height:186px; overflow-y:auto}
.pick{
  border:1px solid var(--bd); background:var(--card); color:var(--tx);
  border-radius:20px; padding:4px 10px; font-size:11.5px; cursor:pointer;
  transition:background .1s, border-color .1s;
}
.pick:hover{border-color:var(--green)}
.pick.on{background:var(--gold); border-color:var(--gold); color:#26301f; font-weight:700}

.picked{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; min-height:4px}
.picked .tag{
  background:var(--chip); color:var(--tx); border-radius:20px;
  padding:4px 6px 4px 10px; font-size:11.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
.picked .tag button{
  border:0; background:none; cursor:pointer; color:var(--tx2);
  font-size:14px; line-height:1; padding:0 2px;
}
.picked .none{font-size:11.5px; color:var(--tx3)}
/* 대표 회사 — 목록 맨 앞 하나. 나머지엔 「대표로」 버튼. */
.picked .tag.rep{background:var(--gold-soft); border:1px solid var(--gold)}
.rep-badge{
  background:var(--gold); color:#26301f; font-size:9.5px; font-weight:800;
  padding:1px 6px; border-radius:8px; letter-spacing:.02em;
}
.rep-set{
  border:0; background:none; cursor:pointer; color:var(--tx3);
  font-size:10.5px; font-weight:700; padding:0; text-decoration:underline;
}
.rep-set:hover{color:var(--green)}
.co-count{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  color:var(--tx2); background:var(--chip); border-radius:20px; padding:4px 10px;
}
.co-count.full{color:var(--warn); background:var(--warn-bg)}
.input:disabled{opacity:.6; cursor:not-allowed}

@media (max-width:520px){
  .lock{padding:28px 16px}
  .lock-logo{height:80px}
}

/* 비밀번호 잊음 안내 */
.lock-help{
  margin-top:12px; padding:12px 14px; border:1px solid var(--bd);
  border-radius:var(--r-sm); background:var(--chip);
  font-size:12px; line-height:1.8; color:var(--tx2); word-break:keep-all;
}
.lock-help b{color:var(--tx)}
.lock-help[hidden]{display:none}

/* 제약사 자동완성 */
.field{position:relative}
.ac{
  position:absolute; left:0; right:0; z-index:5; margin-top:3px;
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(28,35,26,.14); max-height:210px; overflow-y:auto;
}
.ac[hidden]{display:none}
.ac-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:none; font:inherit; color:var(--tx);
  padding:9px 12px; font-size:13px; cursor:pointer;
}
.ac-item:hover{background:var(--bg)}
.ac-item span{margin-left:auto; font-size:11px; color:var(--tx3); font-family:var(--font-num)}