/* game2 (game.metagrid1.com) — metagrid1.com·auth 로그인 화면과 같은 톤.
   외부 폰트/CDN 을 쓰지 않습니다(CSP default-src 'self' 유지).

   ★ faceup(game1)의 styles.css 를 통째로 베끼지 않았습니다.
     그쪽은 배팅 화면용 규칙이 대부분이고, 이 사이트는 아직 로비뿐입니다.
     색·글꼴·간격의 토큰만 같게 맞추어 두 사이트가 한 식구로 보이게 합니다. */

:root{
  --bg:#0b0e14; --surface:#131824; --line:rgba(255,255,255,.1);
  --text:#e8ecf4; --soft:#a8b2c6; --dim:#6f7b93;
  --brand:#6ee7ff; --brand2:#a78bfa; --err:#f87171; --ok:#4ade80; --warn:#fbbf24;
}
*,*::before,*::after{box-sizing:border-box}

/* 브라우저 기본 [hidden]{display:none} 은 작성자 스타일(display:grid 등)에
   그냥 집니다. 화면 전환을 hidden 으로 하므로 못 박아 둡니다. */
[hidden]{display:none !important}

body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
    "Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  line-height:1.6; letter-spacing:-.01em;
}
body.center{display:grid; place-items:center; padding:24px; text-align:center}

.grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
}

/* --- 상단 바 -------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; font-size:1.05rem;
  color:inherit; text-decoration:none}
.brand b{font-weight:800; letter-spacing:-.03em}
.dot{width:10px; height:10px; border-radius:50%;
  background:linear-gradient(120deg,var(--brand),var(--brand2))}
.tag{font-size:.72rem; font-weight:600; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.who{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--soft)}

/* --- 언어 선택 ------------------------------------------------------------
   여백은 상자가 아니라 <select> 에 줍니다. 상자 쪽에 padding 을 주면 지구본과
   화살표가 놓인 자리가 죽은 영역이 되어 글자를 정확히 눌러야 열립니다
   (인증 서버에서 실제로 겪은 문제라 같은 방식을 씁니다). */
.langpick{position:relative; display:inline-flex; align-items:center}
.langpick .globe{
  position:absolute; left:9px; width:15px; height:15px;
  fill:none; stroke:var(--dim); stroke-width:1.6; pointer-events:none;
}
.langpick::after{
  content:''; position:absolute; right:10px;
  width:6px; height:6px; border-right:1.6px solid var(--dim);
  border-bottom:1.6px solid var(--dim); transform:translateY(-2px) rotate(45deg);
  pointer-events:none;
}
.lang-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px;
  color:var(--soft); font:inherit; font-size:.82rem; font-weight:600;
  padding:6px 24px 6px 28px; cursor:pointer;
}
.lang-select:hover{color:var(--text); border-color:var(--brand)}
.lang-select:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.lang-select option{background:var(--surface); color:var(--text)}
[dir="rtl"] .langpick .globe{left:auto; right:9px}

/* --- 본문 ---------------------------------------------------------------- */
.wrap{max-width:1040px; margin:0 auto; padding:34px 22px 64px}
.page-title{font-size:1.6rem; font-weight:800; letter-spacing:-.03em; margin:0 0 6px}
.sub{color:var(--soft); margin:0 0 26px}
.muted{color:var(--dim)}
.note{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--soft); font-size:.88rem; padding:12px 15px; margin:0 0 22px;
}

/* --- 게임 카드 ------------------------------------------------------------ */
.games{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.game{
  display:flex; flex-direction:column; gap:6px; position:relative;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:16px 17px; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s;
}
.game:hover{border-color:var(--brand); transform:translateY(-2px)}
.game b{font-size:1.05rem; font-weight:700; letter-spacing:-.02em}
.game .engine{font-size:.76rem; color:var(--dim)}
.game .desc{font-size:.88rem; color:var(--soft)}

/* 준비 중인 카드 — 누를 수 없다는 것이 색만으로 보이면 안 됩니다.
   그래서 글자(준비 중)를 함께 붙입니다(로비 코드가 넣습니다). */
.game.soon{opacity:.6; cursor:default}
.game.soon:hover{border-color:var(--line); transform:none}
.badge{
  position:absolute; top:14px; inset-inline-end:14px;
  font-size:.7rem; font-weight:700; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px;
}

/* --- 안내 화면 (준비 중 · 없는 주소) ------------------------------------- */
.card{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  padding:34px 30px; max-width:440px;
}
.card h1{font-size:1.35rem; font-weight:800; letter-spacing:-.03em; margin:0 0 10px}
.card p{color:var(--soft); margin:0 0 18px}
.btn{
  display:inline-block; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.04); color:var(--text); text-decoration:none;
  font-weight:600; font-size:.92rem; padding:8px 16px; cursor:pointer;
}
.btn:hover{border-color:var(--brand)}

/* --- 게임 화면 (Factory Empire) -------------------------------------------
   자원 칸과 목록만으로 이루어져 있습니다. 방치형은 화면이 화려할 필요는 없고,
   **숫자가 어디에 있는지 눈이 기억할 수 있어야** 합니다. 그래서 자원 칸은 늘
   같은 자리에 같은 순서로 둡니다(자리가 흔들리면 읽는 속도가 떨어집니다). */
.game-wrap{max-width:1100px}

.banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:12px; background:var(--surface);
  padding:12px 15px; margin:0 0 18px; font-size:.92rem;
}
.banner.warn{border-left-color:var(--warn)}
.banner-actions{display:flex; gap:8px; margin-inline-start:auto}

/* --- 아이콘 --------------------------------------------------------------
   선 아이콘 하나를 currentColor 로 그립니다. 자원마다 다른 색(--tint)을 주면
   같은 아이콘이 그 자원의 색을 그대로 따릅니다. */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ico{
  width:1.15em; height:1.15em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- 게임 머리 ----------------------------------------------------------- */
.fe-hero{display:flex; align-items:center; gap:14px; margin:0 0 20px}
.fe-hero .page-title{margin:0}
.fe-hero .sub{margin:2px 0 0}
.fe-hero-icon{
  display:grid; place-items:center; width:52px; height:52px; flex:none;
  border-radius:15px; border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(110,231,255,.16),rgba(167,139,250,.16));
  color:var(--brand);
}
.fe-hero-icon .ico{width:26px; height:26px}

/* --- 자원 줄 -------------------------------------------------------------
   방치형에서 사람이 가장 자주 보는 줄입니다. 게임 화면에서는 위에 붙여 두어
   아래 목록을 훑는 동안에도 눈이 숫자를 잃지 않게 합니다.
   (관리자 화면도 같은 .res 를 쓰므로 붙이는 것은 .game-wrap 안에서만.) */
.res-bar{
  display:grid; gap:10px; margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.game-wrap .res-bar{
  position:sticky; top:0; z-index:5;
  padding:10px 0; margin-bottom:20px;
  background:linear-gradient(var(--bg) 78%,transparent);
}
.res{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:11px 14px;
}
/* 자원 색을 왼쪽 띠로만 씁니다 — 글자 색을 바꾸면 숫자가 읽기 어려워집니다. */
.res::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:var(--tint,var(--brand));
}
.res .label{
  display:flex; align-items:center; gap:6px;
  font-size:.76rem; color:var(--dim);
}
.res .label .ico{color:var(--tint,var(--brand)); opacity:.9}
.res .value{display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.25}
.res .flow{display:block; font-size:.78rem; color:var(--soft);
  font-variant-numeric:tabular-nums; min-height:1.2em}
.res .flow.neg{color:var(--err)}

/* 값이 늘어난 순간 살짝 튑니다. 숫자만 조용히 바뀌면 아무 일도 없는 것처럼
   보입니다 — 방치형에서 "지금 벌고 있다" 는 느낌이 곧 재미입니다. */
@media (prefers-reduced-motion: no-preference){
  .res .value.bump{animation:bump .28s ease-out}
  @keyframes bump{
    0%{transform:none}
    35%{transform:translateY(-2px) scale(1.045); color:var(--tint,var(--brand))}
    100%{transform:none}
  }
}

/* --- 공장 라인 -----------------------------------------------------------
   이 게임이 무엇인지 한눈에 보여 주는 자리입니다. 손 채굴에서 시작해 사슬을
   따라 자금까지 흐릅니다. 좁은 화면에서는 가로로만 넘깁니다. */
.fe-line{
  display:flex; align-items:stretch; gap:0;
  overflow-x:auto; padding:4px 2px 12px; margin:0 0 22px;
  scrollbar-width:thin;
}
.fe-station{display:flex; align-items:center; flex:none}
.fe-card{
  display:flex; flex-direction:column; gap:7px; align-items:center;
  width:132px; padding:13px 10px 11px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  text-align:center;
}
/* 아직 한 대도 없는 설비는 흐리게 — 라인이 어디까지 이어졌는지 보입니다. */
.fe-card.empty{opacity:.45}
.fe-card .ico{width:26px; height:26px; color:var(--tint,var(--brand))}
.fe-card .fe-name{font-size:.82rem; color:var(--soft); font-weight:600}
.fe-card .fe-count{font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums}
.fe-card .fe-out{font-size:.74rem; color:var(--dim); font-variant-numeric:tabular-nums}

/* 가동률 막대. 숫자(83%)보다 막대가 "모자란다" 를 훨씬 빨리 알려 줍니다. */
.fe-bar{width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.08)}
.fe-bar i{display:block; height:100%; border-radius:2px; background:var(--ok);
  transition:width .3s ease}
.fe-bar.low i{background:var(--warn)}

/* 칸과 칸 사이의 흐름. 실제로 흐를 때만 점이 움직입니다. */
.fe-link{
  position:relative; width:34px; height:2px; flex:none;
  background:rgba(255,255,255,.12); margin:0 2px;
}
.fe-link::after{
  content:''; position:absolute; top:-3px; inset-inline-start:0;
  width:8px; height:8px; border-radius:50%;
  background:var(--dim); opacity:.35;
}
@media (prefers-reduced-motion: no-preference){
  .fe-link.flowing::after{background:var(--brand); opacity:1; animation:flow 1.1s linear infinite}
  @keyframes flow{from{inset-inline-start:0} to{inset-inline-start:26px}}
}
/* 움직임을 끈 사람에게도 흐름 여부는 색으로 남습니다. */
.fe-link.flowing{background:rgba(110,231,255,.35)}
.fe-link.flowing::after{background:var(--brand); opacity:1}

/* --- 손 채굴 -------------------------------------------------------------
   초반 수십 번은 반드시 손으로 누릅니다. 이 되먹임이 게임의 첫인상입니다. */
.fe-hand{position:relative}
.click-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:132px; padding:15px 10px;
  border:1px solid var(--brand); border-radius:16px;
  background:linear-gradient(150deg,rgba(110,231,255,.16),rgba(167,139,250,.14));
  color:var(--text); font:inherit; font-weight:700; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.click-btn .ico{width:26px; height:26px; color:var(--brand)}
.click-btn .click-label{font-size:.86rem}
.click-btn b{color:var(--brand); font-variant-numeric:tabular-nums; font-size:1.05rem}
.click-btn:hover{background:linear-gradient(150deg,rgba(110,231,255,.26),rgba(167,139,250,.22))}
.click-btn:active{transform:translateY(2px) scale(.985)}
.click-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* 누를 때마다 위로 떠오르는 숫자. 이것 하나로 "눌렸다" 가 손에 잡힙니다. */
.fe-float{position:absolute; inset:0; pointer-events:none; overflow:visible}
.fe-float span{
  position:absolute; left:50%; top:12px;
  font-size:.95rem; font-weight:800; color:var(--brand);
  font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: no-preference){
  .fe-float span{animation:rise .9s ease-out forwards}
  @keyframes rise{
    from{opacity:1; transform:translate(-50%,0)}
    to{opacity:0; transform:translate(-50%,-46px)}
  }
}
@media (prefers-reduced-motion: reduce){ .fe-float span{display:none} }

.panels{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.panel-title{font-size:.95rem; font-weight:700; color:var(--soft);
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px}
.list{display:flex; flex-direction:column; gap:9px}

.item{
  display:grid; gap:2px 12px; align-items:center;
  grid-template-columns:auto 1fr auto;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:11px 13px;
  transition:border-color .15s, background .15s;
}
/* 아이콘은 세 줄을 가로질러 왼쪽에 섭니다. */
.item .item-icon{
  grid-row:span 3; display:grid; place-items:center;
  width:34px; height:34px; border-radius:11px;
  background:rgba(255,255,255,.05); color:var(--tint,var(--brand));
}
.item .item-icon .ico{width:19px; height:19px}
/* 지금 살 수 있는 것은 눈에 띄어야 합니다 — 방치형에서 사람이 화면에서 찾는
   것은 "지금 누를 수 있는 것" 하나입니다. 색만으로 알리지 않도록 단추도
   함께 살아납니다(disabled 가 풀립니다). */
.item.ready{border-color:rgba(110,231,255,.45); background:rgba(110,231,255,.04)}
.item .name{font-weight:700}
.item .meta{font-size:.8rem; color:var(--dim); font-variant-numeric:tabular-nums}
.item .flowline{font-size:.8rem; color:var(--soft); font-variant-numeric:tabular-nums}
.item .buttons{display:flex; gap:6px; grid-row:span 3; align-self:center}
/* 값을 모으는 중이라는 것을 가는 막대로. 얼마나 남았는지가 숫자보다 빨리 읽힙니다. */
.item .item-progress{
  grid-column:2 / -1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.07); margin-top:5px;
}
.item .item-progress i{display:block; height:100%; border-radius:2px;
  background:var(--tint,var(--brand)); opacity:.75; transition:width .3s ease}
.item.locked{opacity:.55}
.item.done{border-color:rgba(74,222,128,.4)}

.btn.small{font-size:.82rem; padding:5px 11px}
.btn.buy{min-width:86px; text-align:center}
.btn:disabled{opacity:.45; cursor:default}
.btn:disabled:hover{border-color:var(--line)}

.save-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.85rem;
}
.save-row .btn{margin-inline-start:auto}

/* --- 법인 설립(프레스티지) -------------------------------------------------
   설비·업그레이드와 같은 카드 모양이지만 한 칸 전체를 씁니다. 되돌릴 수 없는
   조작이라, 목록 사이에 섞여 실수로 눌리지 않게 따로 떼어 놓습니다. */
.prestige{
  margin-top:26px; padding:16px 18px;
  border:1px solid var(--line); border-left:3px solid var(--brand2);
  border-radius:14px; background:var(--surface);
}
.prestige-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.prestige-head .ico{color:var(--brand2)}
.prestige-head .panel-title{margin:0}
.prestige-head .btn{margin-inline-start:auto}
.prestige-desc{margin:8px 0 4px; font-size:.9rem; color:var(--soft)}
.prestige-stats{margin:0; font-size:.85rem; font-variant-numeric:tabular-nums}

/* --- 이동 (머리말) -------------------------------------------------------- */
.nav{display:flex; gap:6px}
.nav a{
  border:1px solid transparent; border-radius:9px; text-decoration:none;
  color:var(--soft); font-size:.9rem; font-weight:600;
  padding:6px 13px; transition:color .15s, border-color .15s, background .15s;
}
.nav a:hover{color:var(--text)}
/* 지금 보고 있는 곳. 색만으로 알리지 않고 aria-current 로도 알립니다. */
.nav a[aria-current="page"]{
  color:var(--text); background:rgba(255,255,255,.05); border-color:var(--line);
}

/* --- 랭킹 ----------------------------------------------------------------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px}
.tabs a{
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  color:var(--soft); font-size:.86rem; font-weight:600; padding:5px 14px;
}
.tabs a[aria-current="page"]{color:var(--text); border-color:var(--brand)}

.rank-table{
  width:100%; border-collapse:collapse;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--surface); font-variant-numeric:tabular-nums;
}
.rank-table th,.rank-table td{padding:10px 14px; text-align:start; font-size:.92rem}
.rank-table thead th{
  font-size:.76rem; font-weight:700; color:var(--dim);
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--line);
}
.rank-table tbody tr + tr td{border-top:1px solid rgba(255,255,255,.05)}
.rank-table td.num,.rank-table th.num{text-align:end}
/* 내 줄 — 색과 함께 "내 순위" 글자를 붙입니다(색만으로 알리지 않습니다). */
.rank-table tr.mine td{background:rgba(110,231,255,.07)}
.rank-table tr.mine .name::after{
  content:attr(data-me); margin-inline-start:8px; font-size:.72rem; font-weight:700;
  color:var(--brand); border:1px solid var(--line); border-radius:999px; padding:1px 7px;
}
/* 목록 밖의 내 순위는 따로 한 줄로 보여 줍니다. */
.rank-mine{
  margin-top:12px; border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:12px; background:var(--surface); padding:11px 14px; font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
/* 표가 좁은 화면에서 넘칠 때 가로로만 스크롤합니다(본문은 흔들리지 않게). */
.table-wrap{overflow-x:auto}

/* --- 일일 보상 ------------------------------------------------------------ */
.daily{
  margin:0 0 18px; padding:13px 16px;
  border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:12px; background:var(--surface);
}
.daily-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.daily-head .ico{color:var(--ok)}
.daily-head .btn{margin-inline-start:auto}
.daily-body{margin:6px 0 0; font-size:.86rem}
/* 오늘 몫을 이미 받은 상태 — 단추를 지우지 않고 흐리게 둡니다.
   자리가 사라지면 "내일 여기서 또 받는다" 는 것이 안 보입니다. */
.daily.done{border-left-color:var(--line); opacity:.75}

/* --- 업적 ----------------------------------------------------------------- */
.ach{margin-top:26px}
.ach-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.ach-head .panel-title{margin:0}
.ach-head .muted{font-size:.82rem}
.ach-list{
  display:grid; gap:9px; margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.ach-item{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:10px 13px;
}
.ach-item{display:flex; gap:10px; align-items:flex-start}
.ach-item .ico{width:17px; height:17px; margin-top:2px; color:var(--dim)}
.ach-item.done .ico{color:var(--ok)}
.ach-item b{display:block; font-size:.94rem}
.ach-item .ach-need{display:block; font-size:.78rem; color:var(--dim);
  font-variant-numeric:tabular-nums}
/* 아직 못 단 것은 흐리게. 다만 조건은 또렷하게 남깁니다(그게 할 일 목록입니다). */
.ach-item.locked{opacity:.55}
.ach-item.done{border-color:rgba(74,222,128,.45)}
.ach-item.done b::after{content:' ✓'; color:var(--ok)}

/* --- 알림 ----------------------------------------------------------------- */
.toast{
  position:fixed; inset-inline:0; bottom:24px; margin:0 auto; z-index:10;
  width:max-content; max-width:calc(100% - 32px);
  border:1px solid var(--brand); border-radius:12px;
  background:var(--surface); color:var(--text);
  padding:11px 18px; font-size:.92rem; font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.toast small{display:block; font-size:.76rem; font-weight:600; color:var(--brand)}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:toast-in .18s ease-out}
  @keyframes toast-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}

/* --- 관리자 화면 ----------------------------------------------------------
   사용자 화면과 같은 조각(.res-bar · .rank-table · .btn)을 그대로 씁니다.
   관리 화면만의 스타일을 따로 만들면 두 벌을 관리하게 됩니다. */
.adm-open{
  border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:14px; background:var(--surface); padding:15px 18px; margin:0 0 18px;
}
/* 공개 중일 때만 색이 바뀝니다 — 지금 어느 상태인지가 한눈에 보여야 합니다. */
.adm-open.on{border-left-color:var(--ok)}
.adm-open-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.adm-open-head b{font-size:1.05rem}
.adm-open-head .btn{margin-inline-start:auto}
.adm-open p{margin:8px 0 0; font-size:.85rem}

.adm-section{margin-top:26px}
.adm-section .panel-title{margin:0 0 10px}
.adm-foot{margin-top:26px; font-size:.8rem}

/* 업적의 자물쇠·체크 자리. 아이콘만 바꿔 끼우므로 크기를 못 박아 둡니다
   (안 그러면 상태가 바뀔 때 줄이 흔들립니다). */
.ach-mark{display:grid; place-items:center; width:17px; height:17px; margin-top:2px}

/* The selected game's name remains visible even for an empty leaderboard. */
.rank-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 14px}
.rank-heading .panel-title{margin:0;color:var(--text);letter-spacing:0;text-transform:none}