/* ssam.itnvalue.co.kr — A02 강사 첫 로그인·신청 진입 · 정적 화면.
   Stage5 사용자 선택 concept-01(GRID OFFICE)의 토큰·밀도를 출발점으로 한다(세부 변경 가능).
   실제 인증·가입 신청 미구현: 입력 필드는 disabled, form·script 없음. 타 origin 리소스 없음(로고 이미지는 같은 origin 경로만 참조). */

:root {
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --ink: #1B2B45;
  --muted: #53637A;
  --line: #CBD5E3;
  --accent: #2457C5;
  --soft: #E8EFFD;
  --wait: #825018;
  --wait-bg: #FFF3DD;
  --field-bg: #F7F9FC;
  --btn-off: #6F80A0;
  --focus: #245ADB;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

h1, p { margin-top: 0; }
h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.3; letter-spacing: -0.03em; margin: 6px 0 10px; font-weight: 750; }

main, section, header, footer, div { min-width: 0; }

.skip {
  position: absolute; left: 16px; top: -200px; z-index: 20;
  background: var(--surface); color: var(--ink);
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

/* 상단 브랜드 */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.brand {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: baseline; gap: 12px; min-height: 56px;
}
/* 로고는 공식 ITNVALUE wordmark 이미지(같은 origin /assets/itnvalue-logo-wordmark.png) 하나만 쓴다.
   텍스트·CSS로 로고를 재구성하지 않는다. 원본 3151×750 비율 유지, 흰 표면(.top) 위에 둔다. */
.brand-name { display: block; flex: none; width: 168px; height: auto; aspect-ratio: 3151 / 750; }
.brand-scope { font-size: 12px; color: var(--muted); }

/* 로그인 카드 */
main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px 40px; }
.login-card {
  width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 9px 30px rgba(27, 43, 69, 0.03);
  padding: 32px 28px 28px;
}
.eyebrow {
  font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0;
}
.intro { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

.status {
  background: var(--wait-bg); color: var(--wait);
  border-left: 4px solid var(--wait); border-radius: 6px;
  padding: 12px 14px; font-size: 14px; margin-bottom: 20px;
}
.status strong { display: block; margin-bottom: 4px; }
.status p { margin: 0; }

.field { margin-top: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--field-bg); color: var(--ink); font: inherit;
}
.field input:disabled { cursor: not-allowed; color: var(--muted); }

.btn {
  width: 100%; min-height: 48px; margin-top: 22px;
  border: 0; border-radius: 7px; font: inherit; font-weight: 700; font-size: 15px;
  background: var(--accent); color: #FFFFFF;
}
.btn:disabled { background: var(--btn-off); color: #FFFFFF; cursor: not-allowed; }

.quiet { font-size: 12px; color: var(--muted); margin: 18px 0 0; }

.app-footer {
  padding: 14px 20px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted); text-align: center;
}
.app-footer p { margin: 0; }

@media (max-width: 620px) {
  main { padding: 24px 16px 32px; }
  .login-card { padding: 24px 18px 22px; border-radius: 10px; }
  .brand { padding: 12px 16px; }
  .brand-name { width: 144px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }