:root {
  --bg: #1C2027;
  --panel: #252A33;
  --line: #363C47;
  --text: #E6E8EC;
  --muted: #9AA1AD;
  --violet: #8C7BE0;
  --violet-hover: #9D8EE8;
  --ink: #15121F;
  --mango: #E3A63B;
  --rose: #E07A9A;
  --caribbean: #2DB7A3;
  --danger: #F07167;
  --r-s: 4px;
  --font: "IBM Plex Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.tc { font-variant-numeric: tabular-nums; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-decoration: none;
}
.wordmark i { width: 10px; height: 18px; background: var(--violet); border-radius: 2px; }

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }

.auth-stage {
  padding: 48px 56px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.stage-copy h1 {
  margin: 0 0 16px; max-width: 13em;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.18; font-weight: 600; letter-spacing: -0.02em;
}
.stage-copy p { margin: 0; max-width: 32em; color: var(--muted); }
.stage-foot { margin: 0; color: var(--muted); font-size: 13px; }

.timeline { position: relative; margin-top: 44px; max-width: 640px; }
.track {
  position: relative; display: flex; gap: 4px;
  padding: 6px 0 6px 40px; border-bottom: 1px solid var(--line);
}
.track:first-of-type { border-top: 1px solid var(--line); }
.track-name {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted);
}
.clip {
  height: 46px; padding: 6px 10px; border-radius: var(--r-s);
  display: flex; flex-direction: column; justify-content: center;
  font-size: 13px; font-weight: 500; line-height: 1.25; color: #14161B;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.clip small { font-weight: 400; opacity: 0.72; }
.clip.video { background: var(--violet); flex: 3; }
.clip.image { background: var(--mango); flex: 1.5; }
.clip.gif { background: var(--rose); flex: 1.2; }
.clip.audio { background: var(--caribbean); flex: 3.6; }
.clip.gap { background: transparent; flex: 2.1; }

.playhead {
  position: absolute; top: -10px; bottom: -10px; left: 40px; width: 2px;
  background: var(--text); pointer-events: none;
  animation: sweep 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.4s forwards;
}
.playhead::before {
  content: ""; position: absolute; top: 0; left: -5px;
  border: 6px solid transparent; border-top-color: var(--text);
}
@keyframes sweep { to { left: calc(100% - 2px); } }
@media (prefers-reduced-motion: reduce) {
  .playhead { animation: none; left: calc(100% - 2px); }
}

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--panel); }
.form { width: 100%; max-width: 360px; }
.form h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.form .lede { margin: 0 0 28px; color: var(--muted); font-size: 14px; }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.input {
  width: 100%; height: 42px; padding: 0 12px;
  background: var(--bg); color: var(--text); font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-s);
}
.input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(140, 123, 224, 0.25); }
.field-error { margin-top: 6px; font-size: 13px; color: #F7B0AA; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-s); border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--violet); color: var(--ink); }
.btn-primary:hover { background: var(--violet-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 20px; font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.alt { margin-top: 24px; font-size: 14px; color: var(--muted); }

.notice { margin-bottom: 20px; padding: 10px 12px; border: 1px solid; border-radius: var(--r-s); font-size: 14px; }
.notice.error { border-color: rgba(240, 113, 103, 0.5); background: rgba(240, 113, 103, 0.08); color: #F7B0AA; }
.notice.ok { border-color: rgba(45, 183, 163, 0.5); background: rgba(45, 183, 163, 0.08); color: #9EE3D8; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-stage { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 24px; gap: 32px; }
  .stage-copy h1 { font-size: 30px; }
  .timeline { margin-top: 32px; }
  .auth-panel { padding: 32px 24px 48px; }
}