/* ============================================================
   Finger of Doom — fd.noligo.co.kr
   Design system: dark roguelike / pixel-arcade
   ============================================================ */

:root {
  /* --- surface --- */
  --void:      #08080F;
  --bg:        #0B0B18;
  --panel:     #13132A;
  --panel-2:   #1A1A38;
  --raised:    #232349;
  --line:      #2C2C55;
  --line-soft: #1F1F3E;

  /* --- ink --- */
  --ink:       #EDEBF7;
  --ink-2:     #B4B0D4;
  --ink-3:     #7A76A0;

  /* --- accents --- */
  --doom:      #E8463B;   /* primary — 파멸 */
  --doom-dim:  #8E241D;
  --gold:      #F5B93F;   /* 골드 */
  --soul:      #A472F0;   /* 소울 */
  --jade:      #46D98A;   /* 양호 */
  --ice:       #52B6F0;   /* 정보 */

  /* --- semantic --- */
  --crit:      #FF4D42;
  --high:      #FF8A3D;
  --med:       #F5C63F;
  --low:       #6FA8DC;
  --ok:        #46D98A;

  /* --- type --- */
  --f-pixel: 'Press Start 2P', ui-monospace, monospace;
  --f-body: 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* --- space --- */
  --maxw: 1120px;
  --r: 4px;
  --r-lg: 8px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  word-break: keep-all;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,70,59,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(164,114,240,0.07), transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- scanline / pixel texture overlay ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.014) 0px,
    rgba(255,255,255,0.014) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(8,8,15,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-pixel);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--gold); }
.brand__mark {
  width: 22px; height: 22px;
  flex: none;
}
.navlinks {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
  font-size: 13.5px;
  font-weight: 500;
}
.navlinks a {
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.navlinks a:hover { color: var(--ink); text-decoration: none; }
.navlinks a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r);
  font-family: var(--f-pixel);
  font-size: 10px;
  line-height: 1;
  border: 1px solid var(--doom);
  background: linear-gradient(180deg, var(--doom) 0%, #B92E25 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 4px 0 0 #7A1B15;
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { text-decoration: none; transform: translateY(1px); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 3px 0 0 #7A1B15; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 0 #7A1B15; }
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: none; box-shadow: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }

.eyebrow {
  font-family: var(--f-pixel);
  font-size: 9.5px;
  color: var(--doom);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--doom-dim), transparent);
}

h1, h2, h3, h4 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(30px, 5.4vw, 54px); }
h2 { font-size: clamp(24px, 3.6vw, 36px); }
h3 { font-size: clamp(17px, 2.1vw, 21px); }
h4 { font-size: 15px; font-weight: 700; }
p  { margin: 0 0 1.1em; color: var(--ink-2); }
.lead { font-size: clamp(15px, 1.9vw, 18px); color: var(--ink-2); }

.dim { color: var(--ink-3); }
.mono { font-family: var(--f-mono); font-size: .86em; }
.pix { font-family: var(--f-pixel); }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
}
.card--flat { background: var(--panel); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* stat tile */
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  text-align: left;
}
.stat__v {
  font-family: var(--f-pixel);
  font-size: 22px;
  line-height: 1.1;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}
.stat__l { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.stat--doom .stat__v { color: var(--doom); }
.stat--soul .stat__v { color: var(--soul); }
.stat--jade .stat__v { color: var(--jade); }
.stat--ice  .stat__v { color: var(--ice); }

/* tags */
.tag {
  display: inline-block;
  font-family: var(--f-pixel);
  font-size: 8px;
  padding: 5px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
  line-height: 1;
  vertical-align: middle;
}
.t-crit { color: var(--crit); background: rgba(255,77,66,.10); }
.t-high { color: var(--high); background: rgba(255,138,61,.10); }
.t-med  { color: var(--med);  background: rgba(245,198,63,.10); }
.t-low  { color: var(--low);  background: rgba(111,168,220,.10); }
.t-ok   { color: var(--ok);   background: rgba(70,217,138,.10); }
.t-soul { color: var(--soul); background: rgba(164,114,240,.10); }

/* ============================================================
   TABLES
   ============================================================ */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
thead th {
  background: var(--raised);
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(odd) { background: rgba(255,255,255,.012); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 90px;
  padding: 40px 0 60px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
.foot a { color: var(--ink-2); }

/* ============================================================
   UTIL
   ============================================================ */
.hr { height: 1px; background: var(--line-soft); border: 0; margin: 48px 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
figure { margin: 0; }
figcaption { font-size: 12px; color: var(--ink-3); margin-top: 10px; text-align: center; }
svg { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}