/* 로그인 · 알림 한 장. 모양은 목업 login.html(걷어낸 커밋의 바로 앞 판에 남음)에서 옮겼다.
   색 값은 여기 적지 않는다 — style.css의 토큰만 부른다. */

[hidden]{display:none!important}          /* display를 준 요소(.card 등)에도 hidden이 먹게 */

/* 로그인 화면에서는 이름표를 제목 자리로 옮긴다. 자리는 그대로 두어 밝기 단추가 오른쪽에 남는다 */
body[data-view="login"] .mark{visibility:hidden}

/* 한 장짜리 화면을 위아래 가운데에. 넘치면 위에서부터 흐른다(auto 여백은 잘리지 않는다).
   아래 여백을 조금 더 두어 눈으로 보는 가운데(조금 위)에 놓는다 */
.sheet{display:flex;flex-direction:column;padding-bottom:calc(56px + 6vh)}
.card{margin-block:auto;width:100%}
.card.narrow{max-width:440px;margin-inline:auto}
.card h1:focus{outline:0}                 /* 갈래 화면을 열 때 제목에 초점을 옮긴다. 읽기용이라 테두리는 안 그린다 */

/* ── 칸 ── 면담의 쓰는 칸과 같은 테두리. 초점은 강조색 2px(style.css) ── */
.fld{margin-top:26px}
.fld + .fld{margin-top:20px}
.fld label{display:block;margin-bottom:8px;font-size:17px;font-weight:600;color:var(--ink)}
.fld input{
  display:block;width:100%;height:58px;padding:0 16px;
  border:2px solid var(--rule);border-radius:10px;background:var(--paper);
  font:inherit;font-size:19px;color:var(--ink);
  transition:background .18s;
}
/* 틀려도 칸 테두리를 빨갛게 하지 않는다 — 아래 안내 한 줄이면 된다. aria-invalid는 화면 낭독기에만 알린다 */
.fld input::-ms-reveal,.fld input::-ms-clear{display:none}   /* 브라우저 자체 눈 모양과 겹치지 않게 */
.pw{position:relative}
.pw input{padding-right:64px;font-family:var(--mono);letter-spacing:.04em}
.pw .eye{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:8px;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--dim);
  transition:background .12s,color .12s;
}
.pw .eye:hover{background:var(--fill);color:var(--ink)}
.pw .eye svg{width:22px;height:22px}
.caps{margin-top:8px;font-size:15px;color:var(--dim)}

/* 틀렸을 때 — 오류 안내(.trouble)와 같은 옅은 면 하나. 겁주지 않는다 */
.card .trouble{margin-top:22px}
.trouble:empty{display:none}

/* 큰 단추는 칸 폭에 맞춘다 */
.login .big{align-self:stretch;width:100%;margin-top:28px}
.big:disabled{cursor:default}

@media(max-width:600px){
  .fld{margin-top:22px}
  .fld label{font-size:16px}
  .fld input{height:56px;font-size:18px}
}