/* 윈도우에는 국기 이모지 글리프가 아예 없어서 "KR" 두 글자로 렌더된다.
   unicode-range를 국기(Regional Indicator)로 묶어두었으므로 아래 스택 맨 앞에 두어도
   나머지 글자에는 영향이 없다. */
@font-face{
  font-family:"Twemoji Country Flags";
  src:url("../TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF;
  font-display:swap;
}
:root{
  --void:#0a0d1c;
  --surface:#141a33;
  --surface2:#1c2445;
  --line:#2a3158;
  --ink:#ece9f5;
  --muted:#9a98b5;
  --gold:#f3c95c;
  --gold-dim:rgba(243,201,92,.14);
  --serif:"Twemoji Country Flags","Nanum Myeongjo","Noto Serif KR","Apple SD Gothic Neo",Batang,serif;
  --sans:"Twemoji Country Flags","Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* .chips{display:grid} 같은 작성자 규칙은 UA의 [hidden]{display:none}을 무조건
   이긴다(명시도 무관). !important 없이는 hidden 속성이 조용히 무시된다. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}

/* 언어 전환: 우상단 고정. 모달(백드롭)보다 아래, 콘텐츠보다 위. */
.lang-switch{
  position:fixed;top:12px;right:12px;z-index:40;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;padding:3px;max-width:calc(100vw - 24px);
  background:rgba(20,26,51,.85);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.lang-switch button{
  border:0;background:transparent;color:var(--muted);
  font-family:var(--sans);font-size:11px;line-height:1;
  padding:6px 10px;border-radius:999px;cursor:pointer;
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.active{background:var(--gold-dim);color:var(--gold);cursor:default}
#confetti{position:fixed;inset:0;z-index:50;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:40px 20px 60px}
/* 좁은 화면에서는 우상단 언어 위젯이 가운데 정렬된 제목과 겹치므로 콘텐츠를 그 아래로 내린다 */
@media (max-width:640px){.wrap{padding-top:64px}}

header{text-align:center;margin-bottom:28px}
.eyebrow{font-size:11px;letter-spacing:.35em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
h1{
  font-family:var(--serif);
  font-size:clamp(30px,6vw,44px);
  font-weight:800;
  margin:0 0 8px;
  text-wrap:balance;
  text-shadow:0 0 40px rgba(243,201,92,.25);
}
.tagline{color:var(--muted);font-size:14px;margin:0}
.lifeno{color:var(--gold);font-size:13px;margin:10px 0 0;font-variant-numeric:tabular-nums;min-height:20px}

.hero{
  --rarity-color:var(--line);
  background:linear-gradient(180deg,var(--surface) 0%,#10152b 100%);
  border:1px solid var(--rarity-color);
  border-radius:20px;
  padding:34px 24px 28px;
  text-align:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 0 46px -18px var(--rarity-color);
  transition:border-color .5s,box-shadow .5s;
}
.shared-note{
  font-size:12px;color:var(--gold);background:var(--gold-dim);
  border:1px solid rgba(243,201,92,.3);border-radius:99px;
  padding:6px 14px;margin:0 auto 14px;display:inline-block;
}
/* 위조·구버전 링크. 금색(=좋은 것)과 같은 배지로 보이면 안 된다. */
.shared-note.bad{
  color:#ff9c8a;background:rgba(255,120,100,.12);border-color:rgba(255,120,100,.4);
}
.popline{font-size:13px;color:var(--muted);margin:0 0 14px;min-height:20px}
/* 실시간 피드. 결과 카드 맨 아래 한 줄 — 배지보다 약하게 깔려 결과를 가리지 않는다.
   min-height를 안 주면 줄이 나타날 때 카드가 커지며 리롤 버튼이 밀린다. */
.livefeed{font-size:12px;color:var(--muted);opacity:.8;margin:14px 0 0;min-height:18px}
.livefeed .lf-ago{opacity:.6}
.pop-prob{font-size:.85em;opacity:.75;white-space:nowrap}
.flag{
  font-size:clamp(72px,16vw,104px);
  line-height:1.15;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));
  transition:transform .2s;
  min-height:1.15em;
}
.code-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:50%;
  border:3px solid var(--gold);background:var(--surface2);
  font-family:var(--sans);font-size:.42em;font-weight:800;letter-spacing:.06em;color:var(--gold);
}
.country{
  font-family:var(--serif);
  font-size:clamp(26px,5.4vw,38px);
  font-weight:800;margin:10px 0 4px;text-wrap:balance;
}
.subline{color:var(--muted);font-size:14px;margin:0 0 4px}
/* 배지는 뜰 때도 있고 안 뜰 때도 있다. 자리를 미리 잡아두지 않으면 리롤할 때마다
   아래 "다시 환생하기" 버튼이 배지 한 줄만큼 오르내린다. */
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;min-height:29px}
.badge{
  font-size:12px;padding:4px 12px;border-radius:99px;
  background:var(--gold-dim);border:1px solid rgba(243,201,92,.4);color:var(--gold);
}

.chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-top:14px;
}
.chip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  opacity:0;transform:translateY(10px);
}
.chip.reveal{opacity:1;transform:none;transition:opacity .45s,transform .45s}
.chip .k{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.chip .v{font-size:16px;font-weight:700;margin-top:3px;line-height:1.35}
.chip .s{font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}

.controls{margin-top:22px;text-align:center}
button{
  font-family:var(--sans);cursor:pointer;
  border-radius:14px;border:1px solid var(--line);
  background:var(--surface2);color:var(--ink);
  font-size:14px;padding:10px 18px;
}
button:hover{border-color:var(--gold)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{
  font-size:19px;font-weight:800;
  padding:16px 44px;border-radius:99px;border:none;
  background:linear-gradient(135deg,#f3c95c,#e09b3d);
  color:#241a05;
  box-shadow:0 8px 34px -8px rgba(243,201,92,.55);
  transition:transform .15s;
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:translateY(1px)}
.share-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
/* iOS식 공유 아이콘(상자 + 위로 나가는 화살표)을 마스크로 넣는다 — 유니코드엔 표준 공유
   글리프가 없어 SVG를 쓴다. 마스크라 currentColor를 물어 버튼·헤더 글자색을 그대로 따른다.
   텍스트는 textContent로 갱신되고 아이콘은 ::before라, i18n이 문구를 바꿔도 아이콘이 안 지워진다. */
.has-share-ic::before{
  content:"";display:inline-block;width:1em;height:1em;vertical-align:-.14em;
  background:currentColor;
  -webkit-mask:var(--share-ic) center/contain no-repeat;
          mask:var(--share-ic) center/contain no-repeat;
}
:root{--share-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M20 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6'/%3E%3C/svg%3E")}
button.has-share-ic{display:inline-flex;align-items:center;gap:.4em}
h3.has-share-ic{display:flex;align-items:center;gap:.4em}
/* 아이콘 전용 버튼(프로필 공유)은 텍스트가 없어 gap이 필요 없고, 아이콘을 조금 키운다 */
.mh-share.has-share-ic::before{width:1.1em;height:1.1em;vertical-align:-.18em}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 22px;
  margin-top:22px;
}
.card h3{margin:0 0 6px;font-size:16px}
.card .hint{color:var(--muted);font-size:13px;margin:0 0 14px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 12px;text-align:center;
}
.stat .n{font-size:20px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.3}
.stat .l{font-size:11px;color:var(--muted);letter-spacing:.1em;margin-top:2px}

details.card summary{cursor:pointer;font-weight:700;font-size:15px}
details.card summary::marker{color:var(--gold)}
.odds-list{margin:14px 0 0;padding:0;list-style:none}
.odds-list li{
  display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);
  font-size:14px;font-variant-numeric:tabular-nums;
}
.odds-list li:last-child{border-bottom:none}
.odds-list .pc{color:var(--gold);font-weight:700}
.odds-note{color:var(--muted);font-size:13px;margin-top:12px}

.controls-sub{display:flex;gap:10px;justify-content:center;margin-top:12px}
.fortune-line{color:#b78ef0;font-size:14px;margin:10px 0 0}
.sg-row{display:flex;gap:8px}
.sg-input{
  flex:1;min-width:0;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface2);
  color:var(--ink);font-family:var(--sans);font-size:14px;
}
.sg-input::placeholder{color:var(--muted);opacity:.7}
.sg-input:focus{outline:none;border-color:var(--gold)}
.sg-send{font-size:13px;padding:9px 16px;border-radius:10px;background:var(--surface2);white-space:nowrap}
.sg-send:disabled{opacity:.5}
.sg-note{font-size:11px;color:var(--muted);margin:8px 0 0;opacity:.75}
@media(max-width:420px){.sg-row{flex-wrap:wrap}.sg-send{width:100%}}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--surface2);border:1px solid var(--gold);color:var(--ink);
  padding:10px 18px;border-radius:99px;font-size:14px;z-index:80;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:90vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.stat-btn{cursor:pointer;font-family:var(--sans)}
.stat-btn:hover{border-color:var(--gold)}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(4,6,14,.72);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  width:min(680px,100%);max-height:82vh;display:flex;flex-direction:column;
  padding:18px 20px;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.modal-head h3{margin:0;font-size:17px}
/* 모달 헤더 오른쪽 묶음: 프로필 공유 + 닫기. 닫기 하나였던 자리라 space-between이
   유지되도록 둘을 한 덩어리로 싼다. */
.mh-actions{display:flex;gap:8px;align-items:center}
.mh-share{padding:5px 11px;font-size:15px;line-height:1}
.mh-share:hover{border-color:var(--gold)}
.dex-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px;overflow-y:auto;padding:6px 2px 2px;
}
.dex-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface2);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px;opacity:.32;text-align:center;
}
.dex-item.owned{opacity:1;border-color:var(--tc)}
.dex-flag{font-size:22px;line-height:1.2}
.dex-code{
  font-size:12px;font-weight:800;color:var(--gold);border:2px solid var(--gold);
  border-radius:50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
}
.dex-name{font-size:11px;line-height:1.3}
.dex-prob{font-size:10px;font-weight:800;color:var(--tc);font-variant-numeric:tabular-nums}

.share-modal{width:min(400px,100%)}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.share-opt{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 6px;font-size:12px;border-radius:12px;
}
.share-opt .so-ico{font-size:24px;line-height:1}

footer{margin-top:36px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7}
footer a{color:var(--gold)}

@media (max-width:480px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat .n{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.chip.reveal{opacity:1;transform:none;transition:none}
  .btn-primary{transition:none}
}

/* ===== 휴대폰: 국가 + 칩 11개 + 다시 환생하기를 한 화면에 =====
   기본 레이아웃은 전부 보려면 1,250px이 필요한데, 모바일 브라우저는 주소창·툴바를 빼면
   550~750px밖에 안 남는다. 그래서 700px 가까이 줄인다.
   폭(휴대폰)과 높이(낮은 창) 둘 다 걸어야 한다 — 높이만 걸면 화면이 큰 폰(745·830px)이
   빠져나가 옛 레이아웃 그대로 1,235px을 요구하게 된다.
   줄이는 원칙: 칩에 이미 있는 정보(성별·태어난 곳)와 장식을 먼저 버리고, 값 자체는 남긴다. */
@media (max-width:480px), (max-height:720px){
  .wrap{padding-top:14px;padding-bottom:32px}

  /* 고정 위젯이 가운데 정렬된 제목을 덮는다 — 좁은 화면에서는 흐름 안(제목 위 오른쪽)으로 내린다 */
  .lang-switch{position:static;margin:8px 12px 0 auto;width:max-content}

  /* 헤더는 결과를 보러 온 화면에서 가장 덜 중요하다 */
  .eyebrow,.tagline{display:none}
  h1{font-size:26px;margin-bottom:4px}
  header{margin-bottom:10px}
  .lifeno{font-size:12px;margin-top:4px;min-height:16px}

  /* subline(대륙·도시/농촌·성별)은 칩의 "태어난 곳"·"성별"과 겹친다 */
  .hero{padding:14px 14px 12px;border-radius:16px}
  .popline{font-size:11px;margin-bottom:6px;min-height:0}
  .livefeed{font-size:11px;margin-top:8px;min-height:16px}
  .flag{font-size:44px}
  .country{font-size:26px;margin:4px 0 2px}
  .subline{display:none}
  .badges{margin-top:8px;min-height:24px}
  .badge{font-size:11px;padding:3px 9px}

  .controls{margin-top:12px}
  .btn-primary{padding:12px 26px;font-size:15px}

  /* 칩 11개를 631px → 200px대로. 설명줄(.s)은 값이 아니라 해설이라 여기서만 접는다.
     3열이면 "당뇨 합병증" 같은 긴 값도 안 깨진다. */
  .chips{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
  .chip{padding:6px 8px;border-radius:10px}
  .chip .k{font-size:9px;letter-spacing:.06em}
  .chip .v{font-size:13px;margin-top:1px;line-height:1.25}
  .chip .s{display:none}
}

/* 세로가 넉넉한 휴대폰이면 설명줄("국가 내 약 99.7%")을 되살린다.
   min-height 미디어쿼리는 쓰지 않는다 — 모바일에서 주소창이 접힐 때마다 재평가돼
   설명줄이 스크롤 내내 깜빡인다. 높이 판정은 로드·회전 때 한 번만 하는
   html.tall 클래스(index.html의 인라인 스크립트)가 담당한다. */
@media (max-width:480px){
  html.tall .chip .s{display:block;font-size:10px;margin-top:1px}
}
@media (prefers-reduced-motion:reduce){
  .chip,.chip.reveal{opacity:1;transform:none;transition:none}
  .btn-primary{transition:none}
}

/* ===== 광고 슬롯 =====
   화면 밖(통계·확률표 아래)에만 놓는다. 게시자 ID가 없으면 app/ads.js가 이 요소를
   통째로 제거하므로, 미설정 상태에서는 이 스타일이 적용될 대상 자체가 없다.
   "광고" 라벨은 콘텐츠와 광고를 구분하라는 애드센스 정책 요건이기도 하다. */
.ad-slot{
  max-width:720px;margin:22px auto 0;padding:0 4px;
  text-align:center;min-height:0;
}
.ad-slot .ad-label{
  display:block;font-size:10px;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;margin-bottom:6px;opacity:.6;
}
.ad-slot .adsbygoogle{min-height:90px}

/* ===== 칭호 · 도감 진행률 (실험) ===== */
/* 대표 칭호는 이 생의 배지와 구분돼야 한다 — 일회성이 아니라 누적 성취이므로 금색으로 세운다 */
.badge-title{
  background:linear-gradient(180deg,rgba(243,201,92,.22),rgba(243,201,92,.10));
  border-color:rgba(243,201,92,.55);color:var(--gold);font-weight:700;
}
/* 정체성 줄: 칭호 + 생 번호를 한 줄에. 기존 .lifeno 줄에 얹으므로 세로가 거의 안 는다
   (모바일에서 "국가+칩12+버튼 한 화면" 제약을 지켜야 한다). */
.idrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.idrow .lifeno{margin:0}
.idrow .badge-title{font-size:12px;padding:3px 10px}
@media (max-width:480px),(max-height:720px){
  .idrow{margin-top:4px;gap:6px}
  .idrow .badge-title{font-size:11px;padding:2px 8px}
}

/* 진행률 바 — 숫자만 두면 "얼마나 남았는지"가 안 읽힌다. 시각화 자체가 리텐션 장치다. */
.dexbar{margin-top:8px;height:5px;border-radius:99px;background:rgba(236,233,245,.12);overflow:hidden}
.dexbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#6fb1e8,#f3c95c);transition:width .5s ease}
.dexgoal{margin-top:6px;font-size:11px;color:var(--gold);opacity:.9;min-height:14px}
@media (max-width:480px){
  .dexgoal{font-size:10px}
  .dexbar{margin-top:6px;height:4px}
}

/* ===== 업적 목록 (실험) ===== */
.badge-title{cursor:pointer}
/* .modal 은 max-height:82vh 플렉스 컬럼이라, 목록이 스스로 스크롤해야 밖으로 넘치지 않는다.
   min-height:0 이 없으면 플렉스 자식이 안 줄어들어 overflow-y가 안 먹는다. */
.ach-grid{display:grid;gap:14px;margin-top:10px;overflow-y:auto;min-height:0;padding:2px}
.ach-group h4{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:600}
.ach-count{color:var(--gold);font-variant-numeric:tabular-nums}
.ach-item{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;
  background:rgba(236,233,245,.04);border:1px solid rgba(236,233,245,.08);margin-bottom:6px}
/* 딴 것만 금색으로 세운다 — 못 딴 것이 흐려야 목표로 읽힌다 */
.ach-item.ok{background:linear-gradient(180deg,rgba(243,201,92,.14),rgba(243,201,92,.06));
  border-color:rgba(243,201,92,.4)}
.ach-item.ok .ach-name{color:var(--gold);font-weight:700}
.ach-name{font-size:13px}
.ach-item:not(.ok) .ach-name{opacity:.65}
.ach-sub{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 딴 칭호의 "어떻게 땄나" 한 줄 — 자리는 늘 잡아 두고 투명도만 움직인다.
   높이를 hover 때 바꾸면 안 되는 이유: .ach-grid.cols 가 CSS 멀티컬럼이라 한 칸이
   커지는 순간 컬럼이 통째로 재배치돼 목록이 눈에 띄게 흔들린다. 절대 위치 툴팁도
   같은 이유로 못 쓴다 — 멀티컬럼 조각 경계에서 잘린다. */
.ach-how{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 딴 칭호는 눌러서 상단 대표로 지정할 수 있다 — 클릭 커서 + 지금 대표는 강조·별표 */
.ach-item.pickable{cursor:pointer}
.ach-item.pickable:hover{border-color:var(--gold)}
.ach-item.current{outline:1.5px solid var(--gold);outline-offset:-1px;
  background:linear-gradient(180deg,rgba(243,201,92,.22),rgba(243,201,92,.10))}
.ach-star{font-size:10px;color:var(--gold);font-weight:700;white-space:nowrap;margin-left:2px}
.pin-hint{font-size:11px;color:var(--muted);margin:0 0 8px;opacity:.85}
.ach-item.ok:hover .ach-how,.ach-item.ok:focus-visible .ach-how{opacity:.85}
/* 터치 기기엔 hover가 없다 — 영영 못 보느니 처음부터 옅게 깔아 둔다 */
@media (hover:none){.ach-how{opacity:.5}}
.ach-bar{height:4px;border-radius:99px;background:rgba(236,233,245,.12);overflow:hidden}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#6fb1e8,#f3c95c)}
/* 2열은 그룹이 여러 개인 칭호 탭에서만 쓴다. 기록·수집 목록은 한 덩어리라
   2열을 걸면 왼쪽 절반만 쓰고 오른쪽이 통째로 빈다.
   ⚠ grid 로 2열을 만들면 안 된다 — 그리드는 행마다 높이를 맞춰 늘려서(stretch)
   항목이 적은 그룹이 옆 그룹 높이에 끌려간다(민족 4개가 877px를 먹었다).
   멀티컬럼은 신문처럼 흘려 담아 빈틈이 안 생긴다. break-inside 로 그룹이 두 칸에
   쪼개지는 것만 막으면 된다. */
@media (min-width:560px){
  .ach-grid.cols{display:block;columns:2;column-gap:14px}
  .ach-grid.cols .ach-group{
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    margin-bottom:14px;
  }
}

/* 업적 탭 — 축이 늘어나면 한 화면에 다 못 담는다. 축별로 갈라 보여준다. */
.ach-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.ach-tab{background:rgba(236,233,245,.06);border:1px solid rgba(236,233,245,.12);
  color:var(--muted);border-radius:99px;padding:6px 12px;font-size:12px;cursor:pointer}
.ach-tab.on{background:rgba(243,201,92,.16);border-color:rgba(243,201,92,.5);
  color:var(--gold);font-weight:700}
/* 기록실 — 값이 주인공이라 좌우 정렬로 읽히게 */
.rec-list{display:flex;flex-direction:column;gap:6px}
.rec-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 11px;border-radius:10px;background:rgba(236,233,245,.04);
  border:1px solid rgba(236,233,245,.08)}
.rec-k{font-size:13px;color:var(--muted)}
.rec-v{font-size:14px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.rec-none{color:var(--muted);font-weight:400;opacity:.7}
/* 업적 모달 안의 수집 그리드는 자체 스크롤을 갖지 않는다 — 바깥 .ach-grid 가 스크롤한다 */
#achGrid .dex-grid{overflow:visible}