/* ============================================================
   /enter (학교 코드 입력) 페이지 단독 스타일
   ============================================================ */
:root {
  --bg:              #F8FAFC;
  --bg-cool:         #F1F5F9;
  --surface:         #FFFFFF;

  --primary:         #2563EB;
  --primary-hover:   #1D4ED8;
  --primary-dark:    #1E40AF;
  --primary-soft:    #EFF6FF;
  --primary-tint:    #DBEAFE;

  --text-primary:    #0F172A;
  --text-secondary:  #475569;
  --text-tertiary:   #94A3B8;

  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;

  --success:         #16A34A;
  --danger:          #EF4444;

  --shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:       0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:       0 16px 40px rgba(15, 23, 42, 0.08);
  --shadow-xl:       0 32px 64px rgba(15, 23, 42, 0.12);

  --radius:          14px;
  --radius-sm:       10px;

  --font-display:    'Pretendard Variable', Pretendard, 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:       'Inter', 'JetBrains Mono', monospace;

  --track-humanities:  #6366F1;
  --track-social:      #3B82F6;
  --track-education:   #14B8A6;
  --track-engineering: #F97316;
  --track-natural:     #10B981;
  --track-medical:     #EC4899;
  --track-arts:        #A855F7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.student-enter {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.student-enter::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.05) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.04) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
body.student-enter > * { position: relative; z-index: 1; }

/* ============================================================
   Navigation
   ============================================================ */
nav.enter-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.enter-nav .logo {
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.enter-nav .logo svg { width: 26px; height: 26px; }
.enter-nav .nav-right { display: flex; align-items: center; gap: 14px; }
.enter-nav .nav-back-link {
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  font-weight: 500;
}
.enter-nav .nav-back-link:hover { color: var(--text-secondary); }
.lang-selector {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.lang-selector button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.lang-selector .active { background: var(--primary-soft); color: var(--primary); }

/* ============================================================
   Main wrap — PC에서는 한 화면에 모두 들어오게
   ============================================================ */
main.enter-main {
  flex: 1;
  padding: 32px 32px 24px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Flash */
.enter-flashes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.enter-flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 10px;
}
.enter-flash svg { width: 18px; height: 18px; flex-shrink: 0; }
.enter-flash.error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.enter-flash.error svg { color: var(--danger); }
.enter-flash.info    { background: var(--primary-soft); border-color: var(--primary-tint); color: var(--primary-dark); }
.enter-flash.info svg { color: var(--primary); }
.enter-flash.warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.enter-flash.warning svg { color: #D97706; }

/* ============================================================
   2단 레이아웃 (PC 기본) — 좌측 안내 / 우측 폼
   align-items: stretch → 우측 카드가 좌측 콘텐츠 높이에 맞춰 늘어남
   ============================================================ */
.enter-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: stretch;
}

/* ============================================================
   좌측: 안내 (인사말 + h1 + 일러스트 + 3단계)
   ============================================================ */
.intro {
  text-align: left;
  margin-bottom: 20px;
}
.greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.greeting .wave {
  width: 16px;
  height: 16px;
  color: var(--primary);
  display: inline-block;
}

.intro-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.intro-title .accent { color: var(--primary); }
.intro-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 480px;
  margin: 0;
  line-height: 1.6;
}

/* 7계열 일러스트 — PC 컴팩트 (좌측 카드, 우측 폼과 baseline 맞춤) */
.tracks-illustration {
  max-width: 100%;
  margin: 24px 0 0;
  padding: 16px 18px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.tracks-illustration svg {
  width: 100%;
  height: auto;
  max-height: 150px;
  display: block;
}
.tracks-illustration .pillar-anim {
  transform-origin: bottom center;
  animation: tilePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes tilePop {
  0% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
.tracks-caption {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
}
.tracks-caption strong { color: var(--primary); font-weight: 700; }

/* 3단계 미리보기 — 좌측 일러스트 아래, 가로 한 줄 */
.preview-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 16px 0 0;
}
.preview-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: all 0.2s;
}
.preview-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.preview-step-icon {
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-step-icon svg { width: 18px; height: 18px; color: white; }
.preview-step-1 { background: var(--track-engineering); }
.preview-step-2 { background: var(--track-social); }
.preview-step-3 { background: var(--track-medical); }
.preview-step-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.preview-step-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ============================================================
   우측: 코드 입력 폼 (좌측 컬럼 높이에 맞춰 stretch)
   ============================================================ */
.enter-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.entry-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 30px 28px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* 카드가 wrap 높이만큼 늘어나도록 + 자식들 세로 배치 */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.entry-form-header {
  text-align: center;
  margin-bottom: 22px;
}
.entry-form-header svg.entry-form-icon {
  width: 36px; height: 36px;
  padding: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 10px;
  box-sizing: content-box;
}
.entry-form-title {
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 4px;
  letter-spacing: -0.01em;
}
.entry-form-sub {
  font-size: 14px;
  color: var(--text-secondary);
}

.entry-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 18px 16px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-primary);
  text-transform: uppercase;
  margin-bottom: 12px;
  transition: all 0.2s;
}
.entry-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.entry-input::placeholder {
  color: #CBD5E1;
  letter-spacing: 0.4em;
}
.entry-input.field-error {
  border-color: var(--danger);
  background: #FEF2F2;
}

.field-errors {
  margin-top: -6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--danger);
}

.entry-submit {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 15px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.entry-submit:hover { background: var(--primary-hover); transform: translateY(-1px); }
.entry-submit:active { transform: translateY(0); }
.entry-submit svg { width: 18px; height: 18px; }

.privacy-note {
  margin-top: 16px;
  padding: 11px 14px;
  background: var(--primary-soft);
  border-radius: 10px;
  font-size: 13px;
  color: var(--primary-dark);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}
.privacy-note svg {
  width: 16px; height: 16px;
  flex-shrink: 0; margin-top: 2px;
  color: var(--primary);
}
.privacy-note strong { font-weight: 700; }

/* Help link — 폼 카드 내부 맨 아래로 push (좌측 높이 맞춤) */
.entry-help {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: auto;             /* 핵심: flex column 안에서 카드 맨 아래로 push */
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.entry-help a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.entry-help a:hover { text-decoration: underline; }

/* ============================================================
   Scroll hint — 모바일에서만 보이는 "↓ 학교 코드 입력하기"
   ============================================================ */
.scroll-hint {
  display: none;
  margin: 18px 0 8px;
  text-align: center;
}
.scroll-hint a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-tint);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.scroll-hint a:hover { background: var(--primary-tint); }
.scroll-hint .arrow {
  width: 16px;
  height: 16px;
  animation: bounceDown 1.4s ease-in-out infinite;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ============================================================
   Footer
   ============================================================ */
footer.enter-footer {
  padding: 18px 32px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
.enter-footer a { color: var(--text-tertiary); text-decoration: none; margin: 0 8px; }
.enter-footer a:hover { color: var(--text-secondary); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  main.enter-main { padding: 32px 24px 16px; justify-content: flex-start; }
  .enter-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .intro { text-align: center; margin-bottom: 8px; }
  .intro-title { font-size: 30px; }
  .intro-subtitle { margin: 0 auto; }
  .tracks-illustration { max-width: 460px; margin: 16px auto 0; }
  .tracks-illustration svg { max-height: 200px; }
  .preview-steps { max-width: 540px; margin: 0 auto 12px; }
  .scroll-hint { display: block; }   /* 모바일에서만 노출 */
  .entry-form { max-width: 480px; }
}
@media (max-width: 580px) {
  nav.enter-nav { padding: 12px 18px; }
  .enter-nav .nav-back-link { display: none; }
  main.enter-main { padding: 24px 18px 16px; }
  .intro-title { font-size: 26px; }
  .intro-subtitle { font-size: 15px; }
  .tracks-illustration { padding: 18px 14px; }
  .preview-steps { grid-template-columns: 1fr; gap: 10px; }
  .preview-step { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; }
  .preview-step-icon { margin: 0; flex-shrink: 0; }
  .entry-form { padding: 24px 20px; }
  .entry-input { font-size: 24px; padding: 16px 12px; letter-spacing: 0.3em; }
}

/* 짧은 데스크탑 화면 (1080p 등) — 좀 더 압축 */
@media (min-width: 961px) and (max-height: 820px) {
  main.enter-main { padding: 20px 32px 16px; }
  .intro { margin-bottom: 14px; }
  .intro-title { font-size: 28px; }
  .tracks-illustration { padding: 12px 16px 10px; margin: 14px 0 14px; }
  .tracks-illustration svg { max-height: 130px; }
  .tracks-caption { margin-top: 8px; }
  .entry-form { padding: 24px 24px; }
  .entry-input { font-size: 24px; padding: 16px 14px; margin-bottom: 10px; }
  .privacy-note { margin-top: 12px; padding: 10px 12px; font-size: 12.5px; }
  .entry-help { margin-top: 14px; }
}