@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100; 0,200; 0,300; 0,400; 0,500; 0,600; 0,700; 0,800; 0,900; 1,100; 1,200; 1,300; 1,400; 1,500; 1,600; 1,700; 1,800; 1,900&display=swap'); 

:root { 
 --bg: #0b0c10; 
 --panel: rgba(255, 255, 255, 0.06); 
 --panel-border: rgba(255, 255, 255, 0.12); 
 --text: rgba(255, 255, 255, 0.92); 
 --muted: rgba(255, 255, 255, 0.7); 
 --muted-2: rgba(255, 255, 255, 0.55); 
 --focus: rgba(255, 255, 255, 0.22); 
 --radius: 18px; 
 --header-h: 80px; 
 --header-gap: 14px; 
 } 

*,
*::before,
*::after { box-sizing: border-box; } 

html, body { height: 100%; overflow-y: hidden; } 

body { 
 margin: 0; 
 background: radial-gradient(1200px 800px at 20% 10%, rgba(120, 120, 255, 0.22), transparent 60%),
 radial-gradient(900px 600px at 85% 30%, rgba(0, 220, 255, 0.18), transparent 55%),
 var(--bg); 
 color: var(--text); 
 font-family: "Poppins", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
 Roboto, "Apple SD Gothic Neo", "Malgun Gothic", Arial, "Segoe UI Emoji", "Segoe UI Symbol"; 
 line-height: 1.5; 
 transition: opacity 220ms ease, transform 220ms ease; 
 } 

 body.page-enter { 
 opacity: 0; 
 transform: translateY(6px); 
 } 

body.page-leave { 
 opacity: 0; 
 transform: translateY(6px); 
 pointer-events: none; 
 } 

.page-loader { 
 position: fixed; 
 inset: 0; 
 display: grid; 
 place-items: center; 
 padding: 24px; 
 z-index: 9999; 

 opacity: 0; 
 visibility: hidden; 
 pointer-events: none; 
 transition: opacity 180ms ease, visibility 180ms ease; 

 background: rgba(0, 0, 0, 0.35); 
 backdrop-filter: blur(8px); 
 } 

.page-loader--show { 
 opacity: 1; 
 visibility: visible; 
 pointer-events: all; 
 } 

.page-loader__card { 
 width: min(420px, calc(100% - 24px)); 
 border-radius: 18px; 
 border: 1px solid rgba(255, 255, 255, 0.16); 
 background: rgba(20, 20, 26, 0.88); 
 box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45); 
 padding: 16px 16px; 
 display: flex; 
 align-items: center; 
 gap: 12px; 
 } 

.page-loader__text { 
 margin: 0; 
 color: var(--text); 
 font-size: 14px; 
 word-break: break-word; 
 } 

.page-loader__spinner { 
 width: 18px; 
 height: 18px; 
 border-radius: 999px; 
 border: 2px solid rgba(255, 255, 255, 0.25); 
 border-top-color: rgba(255, 255, 255, 0.85); 
 animation: ui-spin 900ms linear infinite; 
 } 

@media (prefers-reduced-motion: reduce) { 
 body { 
 transition: none; 
 } 
 body.page-enter,
 body.page-leave { 
 transform: none; 
 } 
 .page-loader { 
 transition: none; 
 } 
 } 

/* ===== Header ===== */
.app-header { 
 position: fixed; 
 top: 0; left: 0; right: 0; 
 height: var(--header-h); 
 z-index: 50; 
 background: rgb(61 61 61 / 36%); 
 border-bottom: 1px solid rgba(255, 255, 255, 0.10); 
 backdrop-filter: blur(12px); 
 } 

.app-header__inner { 
 height: 100%; 
 width: min(1100px, 100%); 
 margin: 0 auto; 
 padding: 0 16px; 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 12px; 
 } 

.app-header__brand { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 min-width: 0; 
 } 

.brand-mark { 
 width: 36px; 
 height: 36px; 
 aspect-ratio: 1 / 1; 
 object-fit: contain; 
 display: block; 
 border-radius: 10px; 
 background: rgba(255,255,255,0.08); 
 border: 1px solid rgba(255,255,255,0.18); 
 box-shadow: 0 10px 30px rgba(0,0,0,0.35); 
 } 

.brand-text { display: grid; line-height: 1.05; } 
.brand-top { 
 font-size: 12px; 
 letter-spacing: 0.18em; 
 text-transform: uppercase; 
 color: rgba(255,255,255,0.70); 
 } 
.brand-bottom { 
 font-size: 16px; 
 font-weight: 850; 
 letter-spacing: -0.02em; 
 color: rgba(255,255,255,0.95); 
 } 

.app-header__right { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 } 

.app-header__user { 
 font-size: 14px; 
 color: rgba(255,255,255,0.78); 
 padding: 8px 10px; 
 border-radius: 999px; 
 border: 1px solid rgba(255,255,255,0.14); 
 background: rgba(255,255,255,0.06); 
 white-space: nowrap; 
 } 

.app-header__logout { 
 border: 1px solid rgba(255, 255, 255, 0.18); 
 background: rgba(255, 255, 255, 0.10); 
 color: var(--text); 
 border-radius: 999px; 
 padding: 10px 12px; 
 font-weight: 800; 
 cursor: pointer; 
 transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease; 
 } 
.app-header__logout:hover { filter: brightness(0.96); } 
.app-header__logout:active { transform: translateY(1px); } 

/* ===== Layout (큰 모니터 세로 간격 줄이기) ===== */
.downloader,
.auth { 
 min-height: 100svh; 
 display: grid; 
 justify-items: center; 
 padding: clamp(18px, 3.6vh, 34px) 16px; 
 align-content: start; 
 max-height:100dvh; 
 } 

.downloader { 
 padding-top: calc(var(--header-h) + var(--header-gap)); 
 } 

@media (min-height: 900px) { 
 .auth { align-content: center; } 
 } 

/* ===== Downloader ===== */
.downloader__header { 
 width: min(720px, 100%); 
 margin-top: clamp(10px, 4vh, 32px); 
 margin-bottom: clamp(10px, 2vh, 16px); 
 text-align: left; 
 } 

.downloader__title { 
 margin: 0 0 6px; 
 font-size: clamp(22px, 4vw, 34px); 
 letter-spacing: -0.02em; 
 } 

.downloader__subtitle { margin: 0; color: var(--muted); } 

.downloader__card,
.auth__card { 
 width: min(720px, 100%); 
 background: var(--panel); 
 border: 1px solid var(--panel-border); 
 border-radius: var(--radius); 
 padding: 18px; 
 backdrop-filter: blur(10px); 
 box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35); 
 } 

.auth__card { width: min(520px, 100%); } 

.downloader__form,
.auth__form { display: grid; gap: 14px; } 

.downloader__field,
.auth__field { display: grid; gap: 8px; } 

.downloader__label,
.auth__label { font-size: 14px; color: var(--muted-2); } 

.downloader__input,
.downloader__select,
.auth__input { 
 width: 100%; 
 border-radius: 14px; 
 border: 1px solid var(--panel-border); 
 background: rgba(0, 0, 0, 0.25); 
 color: var(--text); 
 padding: 12px 12px; 
 outline: none; 
 transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; 
 } 

.downloader__input::placeholder { color: rgba(255, 255, 255, 0.45); } 

.downloader__input:focus,
.downloader__select:focus,
.auth__input:focus { 
 border-color: var(--focus); 
 box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); 
 background: rgba(0, 0, 0, 0.32); 
 } 

.downloader__actions { 
 display: grid; 
 grid-template-columns: 1fr; 
 gap: 10px; 
 } 

.downloader__button,
.auth__button { 
 border: 0; 
 border-radius: 14px; 
 padding: 12px 14px; 
 font-weight: 700; 
 cursor: pointer; 
 background: rgba(255, 255, 255, 0.92); 
 color: rgba(0, 0, 0, 0.9); 
 transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease; 
 } 
.downloader__button:hover,
.auth__button:hover { filter: brightness(0.95); } 
.downloader__button:active,
.auth__button:active { transform: translateY(1px); } 

.downloader__button--disabled,
.auth__button--disabled { opacity: 0.7; cursor: not-allowed; } 

.downloader__hint { margin: 0; color: var(--muted-2); font-size: 13px; } 

/* ===== Toast ===== */
.downloader__toast,
.auth__toast { 
 position: fixed; 
 left: 50%; 
 bottom: 18px; 
 transform: translateX(-50%); 
 width: min(520px, calc(100% - 24px)); 
 pointer-events: none; 
 opacity: 0; 
 visibility: hidden; 
 transition: opacity 220ms ease, visibility 220ms ease; 
 } 

.downloader__toast--show,
.auth__toast--show { opacity: 1; visibility: visible; } 

.downloader__toast-inner,
.auth__toast-inner { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 padding: 12px 14px; 
 border-radius: 14px; 
 background: rgba(20, 20, 26, 0.86); 
 border: 1px solid rgba(255, 255, 255, 0.14); 
 box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35); 
 backdrop-filter: blur(10px); 
 } 

.downloader__toast-text,
.auth__toast-text { margin: 0; font-size: 14px; color: var(--text); word-break: break-word; } 

.downloader__toast-spinner,
.auth__toast-spinner { 
 width: 16px; height: 16px; 
 border-radius: 999px; 
 border: 2px solid rgba(255, 255, 255, 0.25); 
 border-top-color: rgba(255, 255, 255, 0.85); 
 animation: ui-spin 900ms linear infinite; 
 } 

.auth__header { margin-bottom: 12px; } 
.auth__title { margin: 0 0 6px; font-size: clamp(20px, 4vw, 28px); letter-spacing: -0.02em; } 
.auth__subtitle { margin: 0; color: var(--muted); font-size: 14px; } 

.auth__hint { 
 margin: 0; 
 min-height: 18px; 
 color: rgba(255, 170, 170, 0.9); 
 font-size: 13px; 
 } 

 /* ===== Login Brand (favicon logo) ===== */
.auth__brand { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 margin-bottom: 14px; 
 } 

.auth__brand-mark { 
 width: 36px; 
 height: 36px; 
 aspect-ratio: 1 / 1; 
 object-fit: contain; 
 display: block; 
 border-radius: 10px; 

 background: rgba(255, 255, 255, 0.08); 
 border: 1px solid rgba(255, 255, 255, 0.18); 
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); 
 } 

.auth__brand-text { 
 display: grid; 
 line-height: 1.05; 
 } 

.auth__brand-top { 
 font-size: 12px; 
 letter-spacing: 0.18em; 
 text-transform: uppercase; 
 color: rgba(255, 255, 255, 0.70); 
 } 

.auth__brand-bottom { 
 font-size: 16px; 
 font-weight: 850; 
 letter-spacing: -0.02em; 
 color: rgba(255, 255, 255, 0.95); 
 } 
 
 /* ===== Progress UI ===== */
.progress { 
 margin-top: 6px; 
 padding-top: 10px; 
 border-top: 1px solid rgba(255, 255, 255, 0.10); 
 } 

.progress__top { 
 display: flex; 
 align-items: baseline; 
 justify-content: space-between; 
 gap: 12px; 
 margin-bottom: 8px; 
 } 

.progress__title { 
 margin: 0; 
 font-size: 14px; 
 color: var(--text); 
 } 

.progress__percent { 
 margin: 0; 
 font-size: 13px; 
 color: var(--muted); 
 font-variant-numeric: tabular-nums; 
 } 

.progress__bar { 
 width: 100%; 
 height: 10px; 
 border-radius: 999px; 
 overflow: hidden; 
 background: rgba(255, 255, 255, 0.10); 
 border: 1px solid rgba(255, 255, 255, 0.14); 
 } 

.progress__fill { 
 height: 100%; 
 width: 0%; 
 border-radius: 999px; 
 background: rgba(255, 255, 255, 0.92); 
 transition: width 220ms ease; 
 } 

.progress__sub { 
 margin: 8px 0 0; 
 font-size: 13px; 
 color: var(--muted-2); 
 } 

@media (max-width: 420px) { 
 .brand-bottom { font-size: 14px; } 
 .app-header__user { display: none; } 
 } 

@keyframes ui-spin { to { transform: rotate(360deg); } 
 }