/* =============================================================
   관리자 로그인 — 상단 바 LOGIN 버튼 · 매트릭스 접속 터미널 (src/js/auth.js)
   ============================================================= */
:root {
  --ak-green: #4AE548;
  --ak-glow: #C8FFC2;
  --ak-red: #FF4D5E;
  --ak-ink: #020604;
  --ak-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- 매트릭스 버튼 — LOGIN · 프로젝트 문의 · 자료실 · 사진 업로드 · 소리 ----------
   초록 테두리 · 어두운 바탕 · 고정폭 글꼴 · 글자 빛 번짐, 올리면 스캔 빛이 훑고 지나갑니다.
   자리 · 크기 · 보이는 조건은 각 버튼의 원래 규칙(landing.css · library.css · admin.css)을 그대로 씁니다.
   자료실 버튼은 나중에 붙는 library.css 보다 앞서도록 html 을 붙여 우선순위를 올립니다. */
.ak-login,
.lp-cta,
.lp-upload,
.lp-sound,
html .lib-fab,
html .adm-fab {
  border: 1px solid rgb(74 229 72 / 55%);
  border-radius: 6px;
  background: rgb(2 10 5 / 72%);
  color: var(--ak-green);
  font-family: var(--ak-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 8px rgb(74 229 72 / 55%);
  box-shadow: inset 0 0 0 0 rgb(74 229 72 / 0%), 0 0 0 0 rgb(74 229 72 / 0%);
  transition: box-shadow 200ms var(--ease, ease), background-color 200ms var(--ease, ease), color 200ms, border-color 200ms, opacity 200ms, visibility 200ms;
}
.ak-login,
.lp-cta { position: relative; }
.ak-login::before,
.lp-cta::before,
.lp-upload::before,
.lp-sound::before,
html .lib-fab::before,
html .adm-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(200 255 194 / 28%) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.ak-login:hover::before,
.lp-cta:hover::before,
.lp-upload:hover::before,
.lp-sound:hover::before,
html .lib-fab:hover::before,
html .adm-fab:hover::before { animation: ak-sweep 700ms ease-out; }
.ak-login:hover,
.lp-cta:hover,
.lp-upload:hover,
.lp-sound:hover,
html .lib-fab:hover,
html .adm-fab:hover {
  border-color: var(--ak-green) !important;
  background: rgb(4 24 10 / 88%);
  color: var(--ak-glow) !important;
  box-shadow: inset 0 0 12px rgb(74 229 72 / 25%), 0 0 16px rgb(74 229 72 / 35%);
}
.ak-login:focus-visible,
.lp-cta:focus-visible,
.lp-upload:focus-visible,
.lp-sound:focus-visible,
html .lib-fab:focus-visible,
html .adm-fab:focus-visible { outline: 2px solid var(--ak-green); outline-offset: 3px; }

/* 소리가 켜져 있으면 ADMIN 처럼 불이 들어온 상태 */
.lp-sound[aria-pressed='true'] { border-color: var(--ak-green); background: rgb(74 229 72 / 12%); }

/* 자료실 · 구체 사진 개수 — [ 0/40 ] 처럼 단말기 표시로 */
html .lib-fab__count,
html .adm-fab__count {
  padding: 3px 6px;
  border: 1px solid rgb(74 229 72 / 35%);
  border-radius: 3px;
  background: rgb(74 229 72 / 10%);
  color: var(--ak-green);
  font-family: var(--ak-mono);
  letter-spacing: 0.04em;
}

/* 밝은 페이지 위의 상단 바 — 짙은 초록 바탕으로 */
.lp-header[data-on='light'] .lp-cta { background: #08140B; border-color: #08140B; }
.lp-header[data-on='light'] .lp-cta:hover { background: #0C2412; color: var(--ak-glow); }

/* ---------- LOGIN 버튼 ---------- */
.ak-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  line-height: 1;
  cursor: pointer;
}
.ak-login__icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ak-login__label { min-width: 5ch; }
.ak-login__dot {
  display: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ak-green);
  box-shadow: 0 0 8px var(--ak-green);
  animation: ak-pulse 1.6s ease-in-out infinite;
}
.ak-login.is-admin { border-color: var(--ak-green); background: rgb(74 229 72 / 12%); }
.ak-login.is-admin .ak-login__dot { display: block; }
.ak-login.is-admin .ak-login__icon { display: none; }

/* 밝은 페이지 위에서는 짙은 초록으로 */
.lp-header[data-on='light'] .ak-login {
  background: #08140B;
  border-color: #08140B;
}

/* 좁은 화면 — 아이콘만 */
@media (max-width: 479px) {
  .ak-login { width: 40px; padding: 0; justify-content: center; }
  .ak-login__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ak-login.is-admin .ak-login__icon { display: none; }
}

/* 로그인하면 '관리자 전용' 안내용 자료실 버튼 대신 실제 자료실 버튼(.lib-fab)을 씁니다. */
html.is-admin .lp-library { display: none !important; }

/* ---------- ADMIN 메뉴 ---------- */
.ak-menu {
  position: fixed;
  z-index: 140;
  min-width: 200px;
  padding: 8px;
  border: 1px solid rgb(74 229 72 / 45%);
  border-radius: 8px;
  background: rgb(2 8 4 / 94%);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgb(0 0 0 / 55%), 0 0 24px rgb(74 229 72 / 12%);
  font-family: var(--ak-mono);
}
.ak-menu[hidden] { display: none; }
.ak-menu__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 6px 10px 10px;
  border-bottom: 1px dashed rgb(74 229 72 / 30%);
  color: var(--ak-green);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.ak-menu__who i { width: 7px; height: 7px; border-radius: 50%; background: var(--ak-green); box-shadow: 0 0 8px var(--ak-green); }
.ak-menu button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #E6FFE3;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.ak-menu button::before { content: '> '; color: var(--ak-green); }
.ak-menu button:hover,
.ak-menu button:focus-visible { background: rgb(74 229 72 / 14%); color: var(--ak-glow); outline: none; }

/* ---------- 접속 터미널 ---------- */
.ak-auth {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: var(--ak-ink);
  opacity: 0;
  transition: opacity 220ms ease;
}
.ak-auth[hidden] { display: none; }
.ak-auth.is-in { opacity: 1; }
html.ak-auth-open { overflow: hidden; }

.ak-auth__rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
/* 화면 줄무늬(CRT) + 가장자리 어둡게 */
.ak-auth__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0%) 0 2px, rgb(0 0 0 / 28%) 2px 3px),
    radial-gradient(ellipse at center, transparent 35%, rgb(0 0 0 / 75%) 100%);
}

.ak-term {
  position: relative;
  width: min(420px, 100%);
  border: 1px solid rgb(74 229 72 / 60%);
  border-radius: 10px;
  background: rgb(1 8 3 / 88%);
  backdrop-filter: blur(6px);
  color: #E6FFE3;
  font-family: var(--ak-mono);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 60%), 0 0 40px rgb(74 229 72 / 22%), inset 0 0 40px rgb(74 229 72 / 6%);
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 200ms, box-shadow 200ms;
}
.ak-auth.is-in .ak-term { transform: none; }

.ak-term__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid rgb(74 229 72 / 25%);
  font-size: 0.6875rem;
  color: rgb(74 229 72 / 75%);
  letter-spacing: 0.08em;
}
.ak-term__dots { display: flex; gap: 6px; }
.ak-term__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(74 229 72 / 30%); }
.ak-term__dots i:first-child { background: var(--ak-green); box-shadow: 0 0 6px var(--ak-green); }
.ak-term__path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-term__close {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgb(74 229 72 / 80%);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.ak-term__close:hover,
.ak-term__close:focus-visible { background: rgb(74 229 72 / 14%); color: var(--ak-glow); outline: none; }

.ak-term__body { padding: 22px 24px 20px; }
.ak-term__boot {
  min-height: 1.4em;
  margin: 0 0 14px;
  color: rgb(74 229 72 / 70%);
  font-size: 0.75rem;
}
.ak-term__title {
  position: relative;
  margin: 0;
  color: var(--ak-green);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgb(74 229 72 / 60%);
}
/* 제목 지지직 — 가끔 옆으로 찢어지는 잔상 */
.ak-term__title::before,
.ak-term__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.8;
  pointer-events: none;
}
.ak-term__title::before { color: var(--ak-glow); clip-path: inset(0 0 60% 0); animation: ak-tear 3.2s steps(1) infinite; }
.ak-term__title::after { color: #1F8F2A; clip-path: inset(55% 0 0 0); animation: ak-tear 2.7s steps(1) infinite reverse; }
.ak-term__sub { margin: 6px 0 22px; color: #9FC9A0; font-size: 0.8125rem; }

.ak-field { display: block; margin-bottom: 14px; }
.ak-field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--ak-green);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.ak-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgb(74 229 72 / 35%);
  border-radius: 4px;
  background: rgb(0 0 0 / 55%);
  color: var(--ak-glow);
  caret-color: var(--ak-green);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  transition: border-color 160ms, box-shadow 160ms;
}
.ak-field input:focus {
  outline: none;
  border-color: var(--ak-green);
  box-shadow: 0 0 0 3px rgb(74 229 72 / 18%), 0 0 16px rgb(74 229 72 / 25%);
}

.ak-term__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid var(--ak-green);
  border-radius: 4px;
  background: var(--ak-green);
  color: #021004;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background-color 160ms, box-shadow 160ms;
}
.ak-term__submit:hover { background: var(--ak-glow); box-shadow: 0 0 24px rgb(74 229 72 / 55%); }
.ak-term__submit:focus-visible { outline: 2px solid var(--ak-glow); outline-offset: 3px; }
.ak-term__submit:disabled { opacity: 0.6; cursor: progress; }

.ak-term__status {
  display: flex;
  align-items: center;
  min-height: 1.5em;
  margin: 16px 0 0;
  color: rgb(74 229 72 / 85%);
  font-size: 0.75rem;
}
.ak-caret {
  display: inline-block;
  width: 7px; height: 1em;
  margin-left: 3px;
  background: currentColor;
  animation: ak-blink 1s steps(1) infinite;
}
.ak-term[data-tone='err'] .ak-term__status { color: var(--ak-red); }
.ak-term[data-tone='ok'] .ak-term__status { color: var(--ak-glow); font-weight: 700; }

/* 실패 — 붉게 흔들림 */
.ak-term.is-denied {
  border-color: var(--ak-red);
  box-shadow: 0 0 40px rgb(255 77 94 / 30%), inset 0 0 40px rgb(255 77 94 / 8%);
  animation: ak-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
/* 성공 — 초록 번쩍 */
.ak-term.is-granted {
  border-color: var(--ak-glow);
  box-shadow: 0 0 80px rgb(74 229 72 / 55%), inset 0 0 60px rgb(74 229 72 / 25%);
}

/* ---------- 회원가입 · 비밀번호 찾기 · 회원 목록 ---------- */
.ak-term.is-wide { width: min(860px, 100%); }
.ak-auth .ak-term__rain { position: fixed; }
.ak-term__sub b { color: var(--ak-glow); font-weight: 700; }
.ak-term__sub small { color: rgb(159 201 160 / 75%); }

.ak-tabs {
  display: flex;
  gap: 4px;
  margin: -6px 0 18px;
  padding: 4px;
  border: 1px solid rgb(74 229 72 / 25%);
  border-radius: 6px;
  background: rgb(0 0 0 / 35%);
}
.ak-tab {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgb(74 229 72 / 60%);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.ak-tab:hover { color: var(--ak-glow); }
.ak-tab[aria-selected='true'] { background: rgb(74 229 72 / 16%); color: var(--ak-green); text-shadow: 0 0 8px rgb(74 229 72 / 55%); }
.ak-tab:focus-visible { outline: 2px solid var(--ak-green); outline-offset: 1px; }

.ak-links { margin: 14px 0 0; text-align: center; }
.ak-link {
  border: 0;
  background: none;
  color: #9FC9A0;
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ak-link:hover, .ak-link:focus-visible { color: var(--ak-glow); outline: none; }

.ak-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 6px;
  color: #9FC9A0;
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}
.ak-check input {
  flex: none;
  width: 16px; height: 16px;
  margin: 2px 0 0;
  accent-color: var(--ak-green);
}
.ak-check a { color: var(--ak-green); }

.ak-actions { display: grid; gap: 8px; margin-top: 18px; }
.ak-actions .ak-term__submit { margin-top: 0; }
.ak-term__submit.is-ghost { background: transparent; color: var(--ak-green); }
.ak-term__submit.is-ghost:hover { background: rgb(74 229 72 / 12%); color: var(--ak-glow); }
.ak-term__submit.is-danger { border-color: var(--ak-red); background: var(--ak-red); color: #1A0205; }
.ak-term__submit.is-danger:hover { background: #FF7A87; box-shadow: 0 0 24px rgb(255 77 94 / 45%); }

.ak-members { max-height: min(56vh, 520px); overflow: auto; margin-top: 4px; border: 1px solid rgb(74 229 72 / 22%); border-radius: 6px; }
.ak-members__empty { margin: 0; padding: 22px; color: #9FC9A0; font-size: 0.8125rem; text-align: center; }
.ak-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.ak-table th, .ak-table td { padding: 10px 12px; border-bottom: 1px solid rgb(74 229 72 / 14%); text-align: left; white-space: nowrap; }
.ak-table th { position: sticky; top: 0; background: #031007; color: var(--ak-green); font-size: 0.6875rem; letter-spacing: 0.12em; }
.ak-table__email { color: var(--ak-glow); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ak-ok { color: var(--ak-green); }
.ak-wait { color: #C9B458; }
.ak-del {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgb(255 77 94 / 45%);
  border-radius: 4px;
  background: transparent;
  color: #FF8C97;
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
}
.ak-del:hover, .ak-del.is-armed { background: var(--ak-red); color: #1A0205; }

@keyframes ak-sweep { to { transform: translateX(120%); } }
@keyframes ak-pulse { 50% { opacity: 0.35; } }
@keyframes ak-blink { 50% { opacity: 0; } }
@keyframes ak-shake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
@keyframes ak-tear {
  0%, 86%, 100% { transform: none; opacity: 0; }
  88% { transform: translate(-3px, 0); opacity: 0.8; }
  92% { transform: translate(3px, 0); opacity: 0.8; }
  95% { transform: translate(-1px, 0); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-login::before,
  .ak-login__dot,
  .ak-caret,
  .ak-term__title::before,
  .ak-term__title::after { animation: none !important; }
  .ak-term.is-denied { animation: none; }
  .ak-auth, .ak-term { transition: none; }
}