/* ─────────────────────────────────────────────────────────────
   로그인(잠금) 화면 — 전 페이지 공통
   쓰는 곳: /interview/, /nonsul/, /essay-teacher.html
   마크업 구조는 세 곳이 같고, 기존 스크립트가 잡는 id만 페이지마다 다르다.
   페이지 본문 스타일과 섞이지 않도록 ylg- 접두사를 쓰고, 팔레트도 여기서 독립적으로 정한다.
   ───────────────────────────────────────────────────────────── */
.ylg{
  --ylg-bg:#f6f4ef; --ylg-card:#ffffff; --ylg-ink:#16282B; --ylg-ink2:#4a4741;
  --ylg-muted:#7c7a73; --ylg-line:#ddd8cc; --ylg-accent:#16282B; --ylg-err:#9a3324;
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:24px; background:var(--ylg-bg); color:var(--ylg-ink);
  font-family:"Noto Sans KR","Malgun Gothic",sans-serif; overflow-y:auto;
}
@media (prefers-color-scheme:dark){
  .ylg{
    --ylg-bg:#12161a; --ylg-card:#1a1f24; --ylg-ink:#eceae4; --ylg-ink2:#c2beb5;
    --ylg-muted:#8d8a83; --ylg-line:#2e353b; --ylg-accent:#4a8b7a; --ylg-err:#d97a6c;
  }
}

/* ── 공통 상단 ── */
.ylg-top{display:flex; align-items:center; justify-content:center;}
.ylg-brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ylg-ink); text-decoration:none; font-size:17px; font-weight:700; letter-spacing:-.01em;
}
.ylg-brand:hover{opacity:.75;}
.ylg-brand img{height:34px; width:auto; display:block;}
.ylg-brand .dark-only{display:none;}
@media (prefers-color-scheme:dark){
  .ylg-brand .light-only{display:none;}
  .ylg-brand .dark-only{display:block;}
}
.ylg-brand b{font-weight:700; color:var(--ylg-muted); font-size:14px; letter-spacing:.06em;}

/* ── 카드 ── */
.ylg-card{
  width:100%; max-width:380px; box-sizing:border-box;
  background:var(--ylg-card); border:1px solid var(--ylg-line); border-radius:14px;
  padding:32px 28px 26px; box-shadow:0 10px 34px rgba(0,0,0,.07); text-align:left;
}
.ylg-kicker{
  margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ylg-accent);
}
.ylg-card h1{
  margin:0 0 9px; font-size:23px; font-weight:700; line-height:1.32;
  letter-spacing:-.015em; color:var(--ylg-ink);
}
.ylg-desc{margin:0 0 24px; font-size:14px; line-height:1.7; color:var(--ylg-muted);}
.ylg-card label{
  display:block; margin-bottom:7px; font-size:12.5px; font-weight:700; color:var(--ylg-ink2);
}
.ylg-card input[type="password"],
.ylg-card input[type="text"]{
  width:100%; box-sizing:border-box; padding:12px 14px;
  font-family:inherit; font-size:15px; color:var(--ylg-ink);
  background:var(--ylg-bg); border:1.5px solid var(--ylg-line); border-radius:9px;
}
.ylg-card input[type="password"]:focus,
.ylg-card input[type="text"]:focus{
  outline:2px solid var(--ylg-accent); outline-offset:1px; border-color:transparent;
}
.ylg-card button{
  width:100%; margin-top:14px; padding:13px; border:0; border-radius:9px;
  background:var(--ylg-accent); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.ylg-card button:hover{filter:brightness(1.12);}
.ylg-card button:focus-visible{outline:2px solid var(--ylg-err); outline-offset:2px;}

/* 입력값 보기 체크박스 (쓰는 페이지에서만 나온다) */
.ylg-show{
  display:flex; align-items:center; gap:7px; margin:11px 0 0;
  font-size:12.5px; color:var(--ylg-muted); font-weight:400; cursor:pointer;
}
.ylg-show input{width:auto; margin:0;}

.ylg-err{margin:13px 0 0; min-height:19px; font-size:13px; color:var(--ylg-err);}

/* ── 하단 ── */
.ylg-foot{
  margin:0; font-size:12px; line-height:1.8; color:var(--ylg-muted); text-align:center;
}
.ylg-foot a{color:inherit;}

/* 스크립트가 통과 처리하면 감춘다 — 페이지마다 쓰는 방식이 달라 셋 다 받는다 */
.ylg.gate-hide, .ylg.hidden{display:none !important;}

@media print{.ylg{display:none !important;}}