/* 공통 스타일 — 다크 테마, 외부 폰트·라이브러리 없이 순수 CSS. */
:root {
  --bg: #0f1117; --panel: #1a1d27; --line: #2a2f3c;
  --ink: #e8eaf0; --muted: #9aa3b2; --accent: #6d8cff; --ok: #34d399; --err: #f87171;
}
* { box-sizing: border-box; }
/* display 를 지정한 클래스(.btn.primary 등)가 hidden 속성을 덮어쓰지 않게 한다. */
[hidden] { display: none !important; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1c2233, var(--bg));
  color: var(--ink); min-height: 100vh;
}
main { max-width: 960px; margin: 0 auto; padding: 2.2rem 1.1rem 4rem; }
header h1 { margin: 0 0 .4rem; font-size: 1.9rem; display: flex; align-items: center; gap: .5rem; }
.logo { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
header p { color: var(--muted); line-height: 1.5; margin: 0 0 1.6rem; }

.dropzone {
  border: 2px dashed var(--line); border-radius: 16px; padding: 2.6rem 1rem;
  text-align: center; cursor: pointer; background: rgba(255,255,255,.02);
  transition: border-color .15s, background .15s, transform .05s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); outline: none; }
.dropzone.over { border-color: var(--accent); background: rgba(109,140,255,.10); }
.dz-icon { font-size: 2.4rem; }
.dz-title { font-size: 1.15rem; margin: .5rem 0 .2rem; }
.dz-sub { color: var(--muted); margin: 0; font-size: .9rem; }

.status { margin: 1.2rem 0 0; padding: .7rem 1rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); font-size: .92rem; }
.status.busy { border-color: var(--accent); }
.status.ok { border-color: var(--ok); color: var(--ok); }
.status.err { border-color: var(--err); color: var(--err); }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1020;
  font-weight: 600; padding: .6rem 1rem; display: inline-block; }
.btn.primary:hover { filter: brightness(1.08); }
.meta { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fname { font-weight: 600; margin: 0; word-break: break-all; font-size: .95rem; }
.fsize { color: var(--muted); margin: 0; font-size: .82rem; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.btn { font: inherit; font-size: .82rem; padding: .4rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: #232838; color: var(--ink);
  cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--accent); }

/* 로그인 화면 */
main.narrow { max-width: 380px; padding-top: 5rem; }
.panel { display: grid; gap: .9rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; }
.panel label { display: grid; gap: .35rem; font-size: .9rem; color: var(--muted); }
.panel input { font: inherit; color: var(--ink); background: #11141c;
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; }
.panel input:focus { outline: none; border-color: var(--accent); }
.panel .btn.primary { font-size: .95rem; margin-top: .3rem; }
.panel .btn.secondary { font-size: .95rem; padding: .6rem 1rem; background: none; }