/* 로그인 화면 전용 시트. 타이포 토큰은 /tokens.css 가 소유하고 여기서는 색만 둔다.

   레이아웃은 두 겹이다:
     1) .stage — 화면 스크린샷 카드가 5열로 흐르는 3D 벽(장식)
     2) .login-shell — 그 위에 얹힌 전경 패널(브랜드·헤드라인·구글 버튼)

   전경 레이어가 화면 전체를 덮으면 배경 카드의 hover 가 죽는다. 그래서 .login-shell
   자체는 pointer-events:none 이고, 실제로 이벤트를 받는 것은 .login-panel 뿐이다. */

:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --paper: #ffffff;
  --line: #e4e8ef;
  --line-strong: #d7e0ee;
  --text: #171a20;
  --muted: #5b6472;
  --muted-soft: #9aa2af;
  --accent: #2878d7;
  --accent-2: #7b61ff;
  --shadow: 0 24px 60px rgba(30, 40, 70, 0.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  /* 카드 월이 뷰포트 밖까지 흐르므로 문서 스크롤은 없다. */
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ===== 배경: 카드 월 ===== */

.stage {
  position: fixed;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  overflow: hidden;
}

/* grayscale 은 plane 이 아니라 각 타일 이미지가 든다 — 커서가 닿은 타일만 개별로
   컬러가 살아나게. plane 에 filter 를 걸면 3D 자식이 평면으로 접힌다. */
.plane {
  position: absolute;
  left: 32%;
  top: -45%;
  width: 100%;
  height: 220%;
  transform-origin: 55% 40%;
  transform: rotateX(0deg) rotateZ(0deg) scale(1);
  opacity: 0.38;
  filter: contrast(0.95);
  transition: transform 1s cubic-bezier(0.55, 0.06, 0.25, 1), opacity 1s ease-in-out;
  will-change: transform, opacity;
}

.plane.tilted {
  transform: rotateX(24deg) rotateZ(-19deg) scale(1.18);
  opacity: 0.95;
}

.cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  height: 100%;
}

.col { overflow: hidden; }

/* 스크롤은 JS rAF 가 굴린다 — hover 시 속도를 점프 없이 감속하려면 CSS 애니메이션으로는
   안 된다(애니메이션은 되감기 없이 멈추거나 튄다). */
.col-inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  will-change: transform;
}

/* 실제 화면 스크린샷 카드 — 타일마다 고유 액센트 --ta 를 인라인으로 받는다. */
.tile {
  --ta: #2f5bff;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(30, 40, 70, 0.16);
  overflow: hidden;
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

.tile:hover {
  background: color-mix(in srgb, var(--ta) 9%, #ffffff);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--ta) 30%, rgba(30, 40, 70, 0.15));
}

.tile .bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
}

.tile .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d3d8e2;
  transition: background 0.45s ease;
}

.tile:hover .dot:first-child { background: var(--ta); }

.tile img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transition: filter 0.45s ease;
}

.tile:hover img { filter: grayscale(0); }

/* 왼쪽 스크림: 전경 텍스트의 가독성을 카드 밝기와 무관하게 만든다. */
.scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--bg) 8%,
    rgba(244, 246, 250, 0.85) 30%,
    rgba(244, 246, 250, 0) 62%
  );
}

/* ===== 전경: 로그인 ===== */

.login-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 7vw;
  /* 여기서 auto 로 두면 화면 전체가 전경이 되어 카드 hover 가 죽는다. */
  pointer-events: none;
}

.login-panel {
  width: min(420px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: auto;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-name strong {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.brand-name span {
  font-size: 12px;
  color: var(--muted-soft);
}

.domain-pill {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  color: var(--muted);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 .soft { color: #8d95a3; }

/* 한 줄짜리 타이프라이터. min-height 를 비워 두면 줄이 지워질 때 아래 카드가
   위아래로 떨린다. */
.type-line {
  margin: 0;
  min-height: 1.5em;
  color: var(--muted);
  font-size: 15px;
}

.type-line .caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  vertical-align: -2px;
  background: var(--muted);
  animation: login-caret-blink 1s steps(1) infinite;
}

@keyframes login-caret-blink {
  50% { opacity: 0; }
}

.login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.google-button:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(40, 120, 215, 0.16);
  transform: translateY(-1px);
}

.google-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.google-icon {
  width: 18px;
  height: 18px;
}

.access-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-soft);
  text-align: center;
}

.access-note strong {
  color: var(--muted);
  font-weight: 600;
}

/* 에이전트 계정 로그인. 기본 동선(구글)보다 한 단계 조용해야 하므로 버튼이 아니라
   밑줄 링크처럼 보이는 토글이고, 펼친 폼도 카드 안의 얇은 구획으로 남는다. */
.agent-toggle {
  align-self: center;
  border: 0;
  background: none;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.agent-toggle:hover {
  color: var(--text);
}

.agent-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.agent-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* `display:flex` 는 브라우저 기본 스타일시트의 `[hidden] { display: none }` 보다
   구체성이 높아 그냥 두면 접혀 있어야 할 폼이 처음부터 펼쳐진다. 접힘 상태의
   정본은 `hidden` 속성(스크립트가 토글한다)이므로 여기서 다시 눌러 준다. */
.agent-form[hidden] {
  display: none;
}

.agent-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.agent-field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

.agent-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.agent-submit {
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--text);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.agent-submit:hover {
  border-color: var(--accent);
}

.agent-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 오류는 색만으로 알리지 않는다 — 문구 자체가 사유다. */
.agent-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #b3261e;
}

.login-footer {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted-soft);
}

/* 전경 등장 오케스트레이션 — body.go 는 인트로 회전과 같은 순간에 붙는다.
   시작 상태가 .js-intro 에 매달린 것이 요점이다: 스크립트가 없으면 이 규칙이 아예
   적용되지 않아 패널이 처음부터 보인다(login.html head 의 한 줄이 그 스위치다). */
.js-intro .login-panel > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.go .login-panel > * {
  opacity: 1;
  transform: none;
}

body.go .login-panel > :nth-child(2) { transition-delay: 0.12s; }
body.go .login-panel > :nth-child(3) { transition-delay: 0.24s; }
body.go .login-panel > :nth-child(4) { transition-delay: 0.36s; }
body.go .login-panel > :nth-child(5) { transition-delay: 0.48s; }

@media (max-width: 720px) {
  .login-shell {
    padding-left: 24px;
    padding-right: 24px;
  }
  .plane { left: 42%; }
}

/* 장식만 끈다 — 레이아웃 값은 그대로다. rAF 루프와 타이프라이터는 login.html 의
   스크립트가 같은 질의로 멈춘다. */
@media (prefers-reduced-motion: reduce) {
  .plane,
  .login-panel > *,
  .tile,
  .tile .dot,
  .tile img,
  .google-button {
    transition: none;
  }
  .type-line .caret { animation: none; }
  .google-button:hover { transform: none; }
}