/* 로그인·회원가입 화면. app.css 의 토큰을 그대로 쓴다. */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.auth-card{width:min(100%,440px);padding:32px;border:1px solid var(--app-line);border-radius:18px;background:#fff;box-shadow:0 18px 50px rgba(20,23,33,.07)}
.auth-card--wide{width:min(100%,680px)}
.auth-head{margin-bottom:24px}
.auth-brand{display:inline-block;margin-bottom:14px;color:var(--app-primary);font-size:1.2rem;font-weight:950;letter-spacing:-.05em}
.auth-head h1{margin:0 0 6px;font-size:1.5rem;letter-spacing:-.03em}
.auth-head p{margin:0;color:var(--app-muted);font-size:.8rem;line-height:1.7;word-break:keep-all}
.auth-alert{margin:0 0 18px;padding:11px 14px;border-radius:10px;background:#fff0f2;color:var(--app-danger);font-size:.78rem;line-height:1.6}

.auth-form{display:grid;gap:20px}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.auth-field{display:grid;gap:6px;min-width:0}
.auth-field--wide{grid-column:1/-1}
.auth-field label{font-size:.78rem;font-weight:750}
.auth-field input{width:100%;min-height:46px;padding:11px 13px;border:1px solid #dcdfe6;border-radius:10px;background:#fff;font:inherit;font-size:.85rem;transition:border-color .15s,box-shadow .15s}
.auth-field input:focus{border-color:var(--app-primary);box-shadow:0 0 0 3px rgba(105,84,232,.12);outline:0}
.auth-field[data-state=error] input{border-color:var(--app-danger)}
.auth-help{margin:0;color:var(--app-muted);font-size:.7rem;line-height:1.6;word-break:keep-all}
.auth-note{margin:0;font-size:.72rem;line-height:1.6;word-break:keep-all}
.auth-note:empty{display:none}
.auth-note[data-state=error]{color:var(--app-danger)}
.auth-note[data-state=ok]{color:#1c8b5f}
.auth-note[data-state=busy]{color:var(--app-muted)}

/* 가입 유형 — 라디오를 카드로 */
.auth-roles{margin:0;padding:0;border:0}
.auth-roles legend{padding:0;font-size:.78rem;font-weight:750}
.auth-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.auth-role{display:grid;gap:3px;padding:13px 15px;border:1px solid var(--app-line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.auth-role:has(input:checked){border-color:var(--app-primary);background:var(--app-primary-soft)}
.auth-role input{margin-bottom:3px;accent-color:var(--app-primary)}
.auth-role b{font-size:.82rem}
.auth-role small{color:var(--app-muted);font-size:.7rem;line-height:1.5;word-break:keep-all}

/* 소속 자동완성 */
.auth-combo{position:relative}
.auth-combo__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:260px;margin:0;padding:5px;overflow:auto;list-style:none;border:1px solid var(--app-line);border-radius:12px;background:#fff;box-shadow:0 16px 38px rgba(20,23,33,.14)}
.auth-combo__option{display:grid;gap:2px;padding:9px 11px;border-radius:8px;cursor:pointer}
.auth-combo__option:hover,.auth-combo__option[aria-selected=true]{background:var(--app-primary-soft)}
.auth-combo__option strong{font-size:.82rem;font-weight:700}
.auth-combo__option small{color:var(--app-muted);font-size:.68rem}
.auth-combo__empty{padding:11px;color:var(--app-muted);font-size:.74rem;line-height:1.5}

/* 비밀번호 */
.auth-secret{position:relative;display:flex}
.auth-secret input{padding-right:62px}
.auth-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:6px 9px;border:0;border-radius:7px;background:transparent;color:var(--app-muted);font:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.auth-reveal:hover{color:var(--app-primary)}
.auth-meter{display:flex;align-items:center;gap:9px}
.auth-meter span{flex:1;height:5px;border-radius:99px;background:#e9ecf3;overflow:hidden;position:relative}
.auth-meter span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:12%;border-radius:inherit;background:var(--app-danger);transition:width .2s,background .2s}
.auth-meter[data-level="1"] span::after{width:40%;background:#e0885a}
.auth-meter[data-level="2"] span::after{width:72%;background:#3d9970}
.auth-meter[data-level="3"] span::after{width:100%;background:#1c8b5f}
.auth-meter b{font-size:.7rem;font-weight:700;color:var(--app-muted)}

.auth-actions{display:grid;gap:10px;justify-items:center}
.auth-actions .button{min-height:48px}
.auth-submit-note{margin:0;color:var(--app-muted);font-size:.72rem}
.auth-submit-note:empty{display:none}
.auth-switch{margin:0;color:var(--app-muted);font-size:.76rem}
.auth-switch a{color:var(--app-primary);font-weight:750}

@media(max-width:600px){
  .auth-card{padding:22px 18px;border-radius:14px}
  .auth-grid,.auth-role-grid{grid-template-columns:1fr}
}
.auth-req{margin-left:3px;color:var(--app-danger);font-weight:800}
.auth-optional{color:var(--app-muted);font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.auth-context{margin:12px 0 0;padding:11px 14px;border-radius:10px;background:var(--app-primary-soft);color:var(--app-primary);font-size:.78rem;line-height:1.6;word-break:keep-all}
.auth-context b{font-weight:800}

/* PC 에서는 카드를 넓힌다.
 *
 * 680px 카드에 2단을 넣으면 한 칸이 320px 남짓이라, 넓은 화면에서도 모바일 화면을 그대로
 * 옮겨 놓은 것처럼 답답하다. 화면이 있을 때는 그만큼 쓰고, 좁은 화면의 1단 배치는 그대로 둔다.
 */
@media (min-width: 900px) {
  .auth-shell { padding: 48px 32px; }
  /* app.css 의 .auth-card{max-width:400px} 가 폭을 묶는다 — width 만 고쳐서는 넓어지지 않는다. */
  .auth-card { width: min(100%, 520px); max-width: 520px; padding: 40px 42px; }
  .auth-card--wide { width: min(100%, 880px); max-width: 880px; padding: 44px 48px; }
  .auth-head { margin-bottom: 28px; }
  .auth-head h1 { font-size: 1.75rem; }
  .auth-head p { font-size: .85rem; }
  .auth-form { gap: 24px; }
  .auth-grid { gap: 20px 24px; }
  .auth-field input { min-height: 48px; font-size: .9rem; }
  .auth-role-grid { gap: 14px; }
}
@media (min-width: 1280px) {
  .auth-card--wide { width: min(100%, 960px); max-width: 960px; }
}

/* PC 2단 배치 — 이름|이메일 / 연락처|소속 / 비밀번호|비밀번호 확인.
 *
 * 마크업은 이 다섯 칸을 줄 전체로 쓰라고(`--wide`) 표시해 두었는데, 카드가 넓어진 뒤로는
 * 한 줄에 입력칸 하나만 덩그러니 남아 오히려 허전하다. 넓은 화면에서만 두 칸으로 되돌린다.
 * 비밀번호는 새 줄에서 시작하게 못 박는다 — 선택 칸(학과·학년·학번)이 켜진 대회에서도
 * '비밀번호 | 비밀번호 확인' 이 반드시 한 줄로 붙게 하려는 것이다.
 */
@media (min-width: 900px) {
  .auth-grid > .auth-field--wide { grid-column: auto; }
  .auth-grid > [data-field="password"] { grid-column: 1; }
  /* 옆 칸에 안내가 길면 격자가 줄 높이를 맞추느라 입력칸을 늘인다 — 위에서부터 쌓게 둔다. */
  .auth-grid > .auth-field { align-content: start; }
}
.auth-forgot{justify-self:end;margin-top:-6px;color:var(--app-muted);font-size:.76rem}
.auth-forgot:hover{color:var(--app-primary)}