@font-face{
  font-family:"KongText";
  src:url("/assets/fonts/KONGTEXT.TTF") format("truetype");
  font-display:swap;
}

:root{
  --bg1:#0b3a7a;  /* blue */
  --bg2:#071a3a;  /* deep navy */
  --bg3:#02040a;  /* near black */
  --panel:rgba(10,14,24,.78);
  --panel2:rgba(12,18,36,.88);
  --text:#eaf2ff;
  --muted:#a7b7d9;
  --accent:#52e1ff;
  --accent2:#a78bfa;
  --border:rgba(82,225,255,.22);
  --border2:rgba(0,0,0,.55);
  --max:1080px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(82,225,255,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, rgba(167,139,250,.16), transparent 55%),
    linear-gradient(140deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  line-height:1.55;
}

/* 아주 약한 스캔라인(게임 화면 느낌) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
  opacity:.18;
  mix-blend-mode:overlay;
}

.container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

.outline{
  text-shadow:
    2px 0 0 rgba(0,0,0,.78),
   -2px 0 0 rgba(0,0,0,.78),
    0 2px 0 rgba(0,0,0,.78),
    0 -2px 0 rgba(0,0,0,.78),
    2px 2px 0 rgba(0,0,0,.78),
   -2px 2px 0 rgba(0,0,0,.78),
    2px -2px 0 rgba(0,0,0,.78),
   -2px -2px 0 rgba(0,0,0,.78);
}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(2,4,10,.65);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}

.brand{ display:flex; align-items:center; gap:10px; min-width:200px; }
.brand img{
  width:44px; height:44px; object-fit:contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
}
.brand-title{
  font-family:"KongText", ui-monospace, monospace;
  font-size:14px; letter-spacing:.5px;
}

.navlinks{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.tab{
  display:inline-flex; align-items:center;
  padding:9px 10px;
  border:2px solid rgba(255,255,255,.10);
  background:rgba(10,14,24,.68);
  box-shadow:0 0 0 2px rgba(0,0,0,.40) inset;
  font-family:"KongText", ui-monospace, monospace;
  font-size:12px;
}
.tab:hover{ text-decoration:none; border-color:var(--border); }
.tab.active{
  border-color:rgba(82,225,255,.70);
  box-shadow:0 0 0 2px rgba(0,0,0,.55) inset, 0 0 18px rgba(82,225,255,.18);
}

.panel{
  background:var(--panel);
  border:2px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 2px rgba(0,0,0,.45) inset, 0 18px 50px rgba(0,0,0,.45);
}

.hero{ padding:26px 0 14px; }
.hero .panel{ padding:18px; }
.h1{
  margin:0 0 10px;
  font-family:"KongText", ui-monospace, monospace;
  font-size:20px;
}
.p{ margin:0 0 12px; color:var(--muted); font-size:14px; }

.kv{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(12,18,36,.75);
  box-shadow:0 0 0 2px rgba(0,0,0,.45) inset;
  font-family:"KongText", ui-monospace, monospace;
  font-size:12px;
}
.btn.primary{ border-color:rgba(82,225,255,.75); }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.section{ padding:10px 0 34px; }
.section h2{
  margin:0 0 10px;
  font-family:"KongText", ui-monospace, monospace;
  font-size:14px;
}
.grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:900px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.card{ padding:16px; background:var(--panel2); border:2px solid rgba(255,255,255,.08); }
.card h3{ margin:0 0 8px; font-family:"KongText", ui-monospace, monospace; font-size:13px; }
.card p{ margin:0; color:var(--muted); font-size:14px; }

.list{ margin:0; padding:0; list-style:none; }
.item{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 14px; margin-bottom:10px;
  background:var(--panel2); border:2px solid rgba(255,255,255,.08);
}
.item .meta{ color:var(--muted); font-size:12px; font-family:"KongText", ui-monospace, monospace; }
.footer{ padding:22px 0 40px; color:rgba(167,183,217,.85); font-size:12px; }