/* ================== Base ================== */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #0b0c0e;
  color: #e9edf1;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ================== Top bar / Brand ================== */
.topbar { display:flex; align-items:center; height:64px; padding:0 28px; }
.brand { font-weight:800; font-size:24px; letter-spacing:.2px; }
.brand .myungha { color:#9BE28C; }

/* 텍스트 로고 드래그/선택 방지 */
.brand, .brand *{
  user-select:none; -webkit-user-select:none; -ms-user-select:none; -webkit-touch-callout:none;
}
.brand img, .brand svg{ -webkit-user-drag:none; user-drag:none; }

/* CDN 글자 그라데이션 */
.brand .cdn, .title .cdn{
  color:#7fb2ff; /* fallback */
  background: linear-gradient(90deg, #ffffff 0%, #afafaf 40%, #474747 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ================== Hero / Title ================== */
.hero { max-width:1080px; margin:12px auto 48px; padding:0 20px; text-align:center; }
.title {
  font-size:48px; margin:18px 0 6px; font-weight:800; line-height:1.15;
  text-shadow: 0 0 18px rgba(120,170,255,.15), 0 0 40px rgba(120,255,170,.08);
}
.title .myungha { color:#9BE28C; }

.subtitle { color:#b9c0c7; margin:0 0 22px; font-size:18px; }
.subtitle b { font-variant-numeric: tabular-nums; }

/* ================== Panel / Dropzone ================== */
.panel {
  background:#14161a; border:1px solid #232730; border-radius:28px;
  padding:36px; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.dropzone{
  position:relative; border:2px dashed #3b424e; border-radius:22px; padding:84px 24px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:#a7afbb; outline:none; transition:.2s ease; cursor:pointer;
}
/* 드롭존 내부 선택/드래그 방지 */
.dropzone, .dropzone *{
  user-select:none; -webkit-user-select:none; -ms-user-select:none; -webkit-touch-callout:none;
}
.dropzone img, .dropzone svg{ -webkit-user-drag:none; user-drag:none; }

.dropzone:hover, .dropzone:focus{
  border-color:#79e0b2; box-shadow:0 0 0 4px rgba(121,224,178,.12) inset; background:#101317;
}
.dropzone.drag{ border-color:#79e0b2; background:#0f1318; color:#e7fff3; }

/* 드롭존 전체를 덮는 투명 input(클릭 어디든 작동) */
.file-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; padding:0; margin:0; z-index:10;
  margin-bottom: 10px;
}
/* 내부 콘텐츠는 이벤트 무시 → 클릭이 input으로 전달 */
.cloud, .dz-text{ pointer-events:none; }

.cloud{ color:#a7afbb; opacity:.9; }
.dz-title{ font-size:22px; color:#d3d7dd; font-weight:700; letter-spacing:.2px; }
.dz-sub{ color:#9aa3ad; font-size:15px; }

/* ================== Progress ================== */
.progress{ height:8px; background:#232730; border-radius:10px; overflow:hidden; margin:16px auto 0; max-width:720px; }
.bar{ height:100%; width:0%; background:linear-gradient(90deg,#79e0b2,#87b5ff); transition:width .2s; }

/* ================== Result Card ================== */
.result{
  margin-top:18px; background:#111418; border:1px solid #222831;
  border-radius:18px; padding:16px; max-width:900px; margin-left:auto; margin-right:auto;
  font-family:ui-monospace, Menlo, monospace; word-break:break-all;
}
.upload-card{ display:flex; align-items:center; gap:16px; }
.thumb{
  width:64px; height:64px; border-radius:10px; background:#0d0f12;
  border:1px solid #20262f; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 64px;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }

.meta{ flex:1; min-width:0; text-align:left; }
.meta .name{
  font-weight:800; font-size:16px; color:#e7ebf0; margin:0 0 2px 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meta .sub{ color:#99a3ad; font-size:13px; line-height:1.4; }
.meta .sub .dot{ margin:0 .5ch; opacity:.5; }
.meta .id{ color:#8aa0b7; font-family:ui-monospace, Menlo, monospace; }

.actions{ display:flex; align-items:center; gap:8px; }
.iconbtn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px;
  background:#2a3340; border:1px solid #323a46; color:#e7ebf0; cursor:pointer;
}
.iconbtn:hover{ filter:brightness(1.05); }
.primary{ background:linear-gradient(180deg,#3aa671,#2b7a52); border-color:#2b7a52; }

/* 링크 바 – 입력창 느낌 */
.linkline{
  margin-top:12px; padding:0; border:1px solid #1e232b; border-radius:12px; background:#0d1114;
  display:flex; align-items:center; overflow:hidden;
}
.linkline .url{
  flex:1; padding:10px 12px; font-family:ui-monospace, Menlo, monospace;
  color:#aecdff; word-break:break-all;
}
.linkline .copychip{
  background:#39414d; color:#e9edf1; border:0; padding:10px 12px; height:100%;
  display:flex; align-items:center; gap:6px; cursor:pointer; border-left:1px solid #1e232b;
}

/* 기본 링크 스타일 */
.result a{ color:#9cc8ff; text-decoration:none; }
.result a:hover{ text-decoration:underline; }

/* ================== Toast ================== */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  min-width:220px; max-width:80vw; padding:12px 16px; border-radius:12px;
  background:#12161c; color:#e9edf1; border:1px solid #233042;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  font-size:14px; text-align:center; z-index:9999;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success{ background:linear-gradient(180deg,#1b2a22,#141a1f); border-color:#2b7a52; }
.toast.error{ background:#2a1b1b; border-color:#7a2b2b; }

/* ================== Footer ================== */
.footer{ text-align:center; color:#7d8693; padding:28px 0 36px; font-size:12px; }

/* ================== Glowing number ================== */
.glow-num{
  position:relative; font-weight:800;
  background: linear-gradient(90deg,#9BE28C 0%, #39d0a7 45%, #87B5FF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.glow-num::before{
  content: attr(data-value);
  position:absolute; inset:0; color:transparent;
  text-shadow: 0 0 6px rgba(155,226,140,.8),
               0 0 14px rgba(135,181,255,.7),
               0 0 26px rgba(135,181,255,.45);
  animation: glowPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{ opacity:.75; filter:blur(.2px); }
  50%{ opacity:1; filter:blur(.6px); }
}
@media (prefers-reduced-motion: reduce){
  .glow-num::before{ animation:none; }
}

.turnstile-wrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}