/* Abyss Hub 사이트 공통 (다운로드 · 주간 일정 · 랭포 순위)
   방향: 프로그램 표시창과 같은 청록빛 검정 + 하늘색 강조 + 남은 시간은 금색. 글꼴 Pretendard, 숫자는 고정폭. */
:root{
  --bg:#070F14;--bg-2:#0A161C;--surface:#0F1E25;--surface-2:#14272F;--surface-3:#1A313A;
  --border:rgba(148,226,236,.10);--border-2:rgba(148,226,236,.18);--ring:#38BDF8;
  --text:#E8F1F4;--text-2:#9DB2B8;--text-3:#728A90;
  --accent:#38BDF8;--accent-2:#2DD4BF;--gold:#F2C45A;--gain:#4ADE80;--loss:#F87171;
  --cta-from:#5EEAD4;--cta-to:#38BDF8;--on-cta:#03212A;
  --radius:16px;--radius-sm:10px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,"Malgun Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}

/* 배경: 위쪽에 옅은 심연 빛 */
.glow{position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;z-index:-1;
  background:radial-gradient(700px 420px at 78% 8%,rgba(56,189,248,.13),transparent 65%),
             radial-gradient(600px 380px at 12% 0%,rgba(45,212,191,.09),transparent 70%)}

/* ── 머리줄 ── */
.top{position:sticky;top:0;z-index:20;background:rgba(7,15,20,.72);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:16px;letter-spacing:-.01em;flex:none}
.brand img{width:30px;height:30px;border-radius:8px}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;text-decoration:none;color:var(--text-2);
  font-size:14px;font-weight:700;white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.top .btn{flex:none}
.cheer{border-bottom:1px solid var(--border);font-size:13px;color:var(--text-3)}
.cheer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding-top:8px;padding-bottom:8px}
.cheer a{flex:none;color:var(--text);font-weight:600;text-decoration:none}
.cheer a:hover{color:var(--accent)}
@media (max-width:640px){.top .btn{display:none}.nav a{padding:0 10px}}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border-radius:12px;
  font-weight:800;font-size:15px;line-height:1;font-family:inherit;text-decoration:none;cursor:pointer;border:0;
  transition:transform .15s var(--ease),filter .15s,background .15s,border-color .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:linear-gradient(100deg,var(--cta-from),var(--cta-to));color:var(--on-cta);
  box-shadow:0 10px 30px -8px rgba(56,189,248,.45)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{transform:scale(.98)}
.btn-lg{min-height:56px;padding:0 26px;font-size:17px;border-radius:14px}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:rgba(56,189,248,.4)}

/* ── 글 ── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-2);
  padding:6px 12px 6px 8px;border:1px solid var(--border-2);border-radius:999px;background:rgba(15,30,37,.6)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px rgba(45,212,191,.18)}
.eyebrow b{color:var(--accent)}
h1,.h1{font-weight:800;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
.h1{font-size:clamp(30px,5vw,40px);margin:14px 0 10px}
h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--accent-2);text-transform:uppercase;margin-bottom:10px}
.sec-sub{color:var(--text-2);font-size:16px;margin-top:10px;max-width:40em}
.note{color:var(--text-3);font-size:14px;margin-top:14px}
.link{color:var(--accent);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.link:hover{text-decoration:underline;text-underline-offset:3px}

section{padding:72px 0}
section.first{padding:40px 0 56px}
.sec-head{margin-bottom:32px}

/* ── 카드 · 칸 ── */
.card{background:linear-gradient(180deg,var(--surface),rgba(15,30,37,.6));border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  color:var(--accent);background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.3)}

/* ── 고르기 ── */
.select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 40px 0 14px;border-radius:12px;border:1px solid var(--border-2);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239DB2B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:var(--text);font-weight:700;font-size:15px;line-height:1;font-family:inherit;cursor:pointer}
.select:hover{border-color:rgba(56,189,248,.4)}
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 24px}
.pick .hint{color:var(--text-2);font-size:14px}

/* ── 표 ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.tbl th{color:var(--text-3);font-weight:700;font-size:13px;background:var(--bg-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(56,189,248,.04)}

.empty{color:var(--text-2);background:var(--surface);border:1px dashed var(--border-2);border-radius:var(--radius);padding:28px;text-align:center}

/* ── 아래 ── */
footer{border-top:1px solid var(--border);padding:36px 0 56px;color:var(--text-3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:18px}
footer a{text-decoration:none;color:var(--text-2)}
footer a:hover{color:var(--text)}

/* 스크롤하면 살짝 나타남 (움직임 줄이기 설정이면 없음) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:0s!important;animation-duration:0s!important}
}