/* 80억 명 중 나는 몇 번째 부자? (/{시장}/rich/) — 토큰·부품은 이민 가챠와 같은 값.
   사이트 메뉴(#yn-rail · #yn-header · #yn-dock · #yn-services)는 /assets/navigation/ 의 공용 CSS가 그린다: 여기서는 그 클래스(.top · .brand · .mark · .pick · .dock)를 쓰지 않는다.
   시안 B(2026-11-09, 오너 "B가 좋겠다"): 첫 화면(제목 · 흐린 티어 미터 · 시작하기) → 금액 고르기(타일 8개 · 직접 입력 키패드) → 결과 문서(N번째 · 인증서 카드의 티어 미터 · 공유 줄 · 자세히 보기). 목표 모양은 어두운 테마 */
@font-face{font-family:'KDot';src:local('Apple SD Gothic Neo'),local('AppleSDGothicNeo-Regular'),local('Noto Sans KR'),local('NotoSansKR-Regular'),local('Malgun Gothic');unicode-range:U+00B7}
/* fallback faces: start */
/* 글꼴이 오기 전의 대체 글꼴(2026-10-29 rich-cls-runtime): 웹 글꼴(Sora · Instrument Sans · Noto Sans KR/JP/TC/Thai)과 같은 글자 폭 · 줄 높이로
   맞춘 이 기기의 글꼴(Apple: Arial · Apple SD Gothic Neo · Hiragino · PingFang · Thonburi). 웹 글꼴이 늦게 와도 줄바꿈 · 칸 높이가 거의 그대로라
   화면이 밀리지 않는다(레이아웃 이동 CLS). 숫자는 따로 맞춘다(Sora 숫자는 글자보다 훨씬 넓다; 'YN SoraT' = 고정폭 숫자 tabular-nums 자리).
   그 글꼴이 없는 기기는 이 줄을 건너뛴다. 값: research/2026-10-29-rich-cls-runtime/fallback_faces.py */
@font-face{font-family:'YN Sora';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:109.2%;ascent-override:88.8%;descent-override:26.6%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Sora';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:114%;ascent-override:85.1%;descent-override:25.4%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Sora';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:77.7%;ascent-override:124.8%;descent-override:37.3%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:109.2%;ascent-override:88.8%;descent-override:26.6%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:114%;ascent-override:85.1%;descent-override:25.4%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:77.7%;ascent-override:124.8%;descent-override:37.3%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 749;size-adjust:110.2%;ascent-override:88%;descent-override:26.3%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 749;size-adjust:115.4%;ascent-override:84.1%;descent-override:25.1%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 749;size-adjust:75.6%;ascent-override:128.3%;descent-override:38.4%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:750 900;size-adjust:111.1%;ascent-override:87.3%;descent-override:26.1%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:750 900;size-adjust:116.7%;ascent-override:83.1%;descent-override:24.9%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Sora';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:750 900;size-adjust:73.4%;ascent-override:132.2%;descent-override:39.5%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN SoraT';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:121.5%;ascent-override:79.8%;descent-override:23.9%;unicode-range:U+0030-0039}
@font-face{font-family:'YN SoraT';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 900;size-adjust:121.5%;ascent-override:79.8%;descent-override:23.9%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Inst';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:105%;ascent-override:92.4%;descent-override:23.8%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Inst';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:102.2%;ascent-override:94.9%;descent-override:24.5%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Inst';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:71.4%;ascent-override:135.9%;descent-override:35%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:99.2%;ascent-override:97.8%;descent-override:25.2%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:103.8%;ascent-override:93.4%;descent-override:24.1%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 649;size-adjust:69.6%;ascent-override:139.4%;descent-override:35.9%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 900;size-adjust:100.6%;ascent-override:96.4%;descent-override:24.9%;unicode-range:U+0000-001F,U+0021-002F,U+003A-009F,U+00A1-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 900;size-adjust:104.9%;ascent-override:92.5%;descent-override:23.8%;unicode-range:U+0030-0039}
@font-face{font-family:'YN Inst';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:650 900;size-adjust:68.4%;ascent-override:141.8%;descent-override:36.5%;unicode-range:U+0020,U+00A0}
@font-face{font-family:'YN KR';src:local('Apple SD Gothic Neo Medium'),local('AppleSDGothicNeo-Medium');font-weight:100 549;size-adjust:106.4%;ascent-override:109%;descent-override:27.3%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:'YN KR';src:local('Apple SD Gothic Neo SemiBold'),local('AppleSDGothicNeo-SemiBold');font-weight:550 649;size-adjust:106.4%;ascent-override:109%;descent-override:27.3%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:'YN KR';src:local('Apple SD Gothic Neo Bold'),local('AppleSDGothicNeo-Bold');font-weight:650 749;size-adjust:106.4%;ascent-override:109%;descent-override:27.3%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:'YN KR';src:local('Apple SD Gothic Neo ExtraBold'),local('AppleSDGothicNeo-ExtraBold');font-weight:750 849;size-adjust:106.4%;ascent-override:109%;descent-override:27.3%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:'YN KR';src:local('Apple SD Gothic Neo Heavy'),local('AppleSDGothicNeo-Heavy');font-weight:850 900;size-adjust:106.4%;ascent-override:109%;descent-override:27.3%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
@font-face{font-family:'YN JP';src:local('Hiragino Sans W3'),local('HiraginoSans-W3');font-weight:100 549;size-adjust:100%;ascent-override:116%;descent-override:29%;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'YN JP';src:local('Hiragino Sans W6'),local('HiraginoSans-W6');font-weight:550 749;size-adjust:100%;ascent-override:116%;descent-override:29%;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'YN JP';src:local('Hiragino Sans W7'),local('HiraginoSans-W7');font-weight:750 900;size-adjust:100%;ascent-override:116%;descent-override:29%;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'YN TC';src:local('PingFang TC Regular'),local('PingFangTC-Regular');font-weight:100 549;size-adjust:100%;ascent-override:116%;descent-override:29%;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'YN TC';src:local('PingFang TC Semibold'),local('PingFangTC-Semibold');font-weight:550 900;size-adjust:100%;ascent-override:116%;descent-override:29%;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:'YN TH';src:local('Thonburi');font-weight:100 549;size-adjust:95.8%;ascent-override:110.6%;descent-override:47%;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'YN TH';src:local('Thonburi Bold'),local('Thonburi-Bold');font-weight:550 649;size-adjust:97.7%;ascent-override:108.5%;descent-override:46.1%;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'YN TH';src:local('Thonburi Bold'),local('Thonburi-Bold');font-weight:650 749;size-adjust:99.7%;ascent-override:106.3%;descent-override:45.1%;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'YN TH';src:local('Thonburi Bold'),local('Thonburi-Bold');font-weight:750 900;size-adjust:101.3%;ascent-override:104.6%;descent-override:44.4%;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
/* fallback faces: end */
:root{
  /* 밝은 테마(2026-10-30 오너: 밝은 바탕, 결과 카드는 어둡게 — research/2026-10-30-light-theme/PALETTE.md). 예전 어두운 값은 아래 [data-theme="dark"] 블록 */
  --bg:#F5F6F9;--surface:#FFFFFF;--surface-2:#EFF1F6;--surface-3:#E2E6EF;
  --glass:rgba(255,255,255,.88);--glass-b:rgba(28,38,56,.11);
  --border:rgba(28,38,56,.10);
  --text:#161B26;--muted:#5B6476;--faint:#667185;
  --inv:#202735;--inv-text:#FFFFFF;--ring:#B52464;
  --shadow-1:0 1px 2px rgba(28,38,56,.03),0 4px 12px rgba(28,38,56,.04);
  --top-bg:rgba(255,255,255,.91);
  /* 밝은 바탕 위의 Fun 금색 글자 · 제목 그라디언트(네온 금색은 채움 · 단추 · 막대에만), 옅은 채움 · 선 · 시트 · 막 · 그림자 */
  --fun-ink:#936100;--fun-grad:linear-gradient(90deg,#936100,#BC471D 60%,#BF245D);
  --tint:rgba(28,38,56,.05);--tint-2:rgba(28,38,56,.03);--track:rgba(28,38,56,.07);--track-b:rgba(28,38,56,.05);--line:rgba(28,38,56,.10);--line-2:rgba(28,38,56,.08);
  --sheet:#FFFFFF;--soft-3:#5B6476;--soft-4:#3B4456;--ph:#8A93A6;
  --ov:rgba(22,29,43,.42);--sheet-sh:0 2px 6px rgba(28,38,56,.03),0 12px 34px rgba(28,38,56,.07);--img-sh:0 10px 30px rgba(28,38,56,.18);
  --card-sh:0 2px 6px rgba(28,38,56,.06),0 14px 36px rgba(28,38,56,.14);
  --fun-rgb:255,200,61;
  --fun2-rgb:255,61,138;
  /* 등급 색: 이민 가챠 .grade.g-* 와 같다 */
  --gS:#3DE8C6;--gA:#3DE8C6;--gB:#FFC83D;--gC:#AEB6C6;--gD:#FF7A45;--gF:#FF3D8A;
  --f-display:'KDot','Sora','YN Sora','Noto Sans KR','YN KR',system-ui,-apple-system,sans-serif;
  --f-body:'KDot','Instrument Sans','YN Inst','Noto Sans KR','YN KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'Sora','YN SoraT',var(--f-display);   /* 고정폭 숫자(tabular-nums) 자리: 대체 글꼴의 숫자를 Sora 고정폭 숫자 폭으로 */
  color-scheme:light;
}
/* 어두운 값: 다음 테마 전환(:root[data-theme="dark"]) + 늘 어둡게 두는 결과 카드 .rank-card(인증서 카드, 공유 이미지 card.js 와 같은 짜임).
   카드 안의 모든 것은 예전 그대로 그려진다. 카드 그림자만 밝은 바탕에 맞춘 값(--card-sh) */
:root[data-theme="dark"],.rank-card{
  --bg:#0B0D12;--surface:#12151E;--surface-2:#191D29;--surface-3:#232838;
  --glass:rgba(255,255,255,.05);--glass-b:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.08);
  --text:#F2F4F8;--muted:#A3A9BA;--faint:#858CA0;
  --inv:#F5F6FA;--inv-text:#0B0D12;--ring:#F5F6FA;
  --top-bg:rgba(11,13,18,.72);
  --fun-ink:rgb(255,200,61);--fun-grad:linear-gradient(90deg,rgb(255,200,61),#FF9A3D 60%,rgb(255,61,138));
  --tint:rgba(255,255,255,.06);--tint-2:rgba(255,255,255,.035);--track:rgba(255,255,255,.07);--track-b:rgba(255,255,255,.05);--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.06);
  --sheet:#141925;--soft-3:#BCC2CF;--soft-4:#dfe3ea;--ph:#4a5163;
  --ov:rgba(4,5,9,.66);--sheet-sh:0 20px 60px #000a;--img-sh:0 10px 40px #0009;
  color-scheme:dark;color:var(--text);
}
:root[data-theme="dark"]{--shadow-1:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);--card-sh:var(--shadow-1)}
/* 다른 시장 페이지(2026-10-21): 한글 글꼴 자리에 그 언어 글꼴(이민 가챠 style.css 와 같은 순서). 일본어 · 중국어는 글자 사이에서 줄을 바꾼다 */
html:lang(ja){--f-display:'KDot','Sora','YN Sora','Noto Sans JP','YN JP',system-ui,-apple-system,sans-serif;--f-body:'KDot','Instrument Sans','YN Inst','Noto Sans JP','YN JP',system-ui,-apple-system,'Segoe UI',sans-serif}
html:lang(zh){--f-display:'KDot','Sora','YN Sora','Noto Sans TC','YN TC','PingFang TC','Microsoft JhengHei',sans-serif;--f-body:'KDot','Instrument Sans','YN Inst','Noto Sans TC','YN TC','PingFang TC','Microsoft JhengHei',sans-serif}
html:lang(th){--f-display:'KDot','Sora','YN Sora','Noto Sans Thai','YN TH','Leelawadee UI','Thonburi',sans-serif;--f-body:'KDot','Instrument Sans','YN Inst','Noto Sans Thai','YN TH','Leelawadee UI','Thonburi',sans-serif}
html:lang(en){--f-display:'KDot','Sora','YN Sora',system-ui,-apple-system,sans-serif;--f-body:'KDot','Instrument Sans','YN Inst',system-ui,-apple-system,'Segoe UI',sans-serif}
html:lang(ja) body,html:lang(zh) body{word-break:normal}
html:lang(ja) .rr-h{word-break:keep-all}   /* 제목은 <br> · <wbr> 에서만 줄을 바꾼다: 何番目の / お金持ち？ */
html:lang(en) .rr-h,html:lang(th) .rr-h{font-size:clamp(30px,8.4vw,46px);letter-spacing:-.03em}
html:lang(th) .rr-h,html:lang(th) .rr-q{line-height:1.3}
html:not(:lang(ko)) .seg button,html:not(:lang(ko)) .rc-share .btn{white-space:nowrap}
/* 티어 미터 · 무대(시안 B)의 밝은 값. 어두운 값(다음 테마 · 결과 카드 안)은 바로 아래 */
:root{--rr-mt:rgba(28,38,56,.36);--rr-mt-on:rgba(28,38,56,.78);--rr-hi:#161B26;--rr-grid:rgba(28,38,56,.05);--rr-blob:.16;
  --rr-tile:linear-gradient(180deg,#FFFFFF,#F8F9FC);--rr-key:#FFFFFF;--rr-key-on:var(--surface-3);--rr-h-grad:var(--fun-grad);
  --rr-q1:#7B86E8;--rr-q2:#5A66D6;--rr-q-ink:#FFFFFF;--rr-q-glow:rgba(92,104,214,.35)}
:root[data-theme="dark"],.rank-card{--rr-mt:rgba(255,255,255,.34);--rr-mt-on:rgba(255,255,255,.75);--rr-hi:#FFFFFF;--rr-grid:rgba(255,255,255,.045);--rr-blob:.55;
  --rr-tile:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));--rr-key:rgba(255,255,255,.06);--rr-key-on:rgba(255,255,255,.14);
  --rr-h-grad:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);
  --rr-q1:rgba(184,192,255,.28);--rr-q2:rgba(140,155,255,.12);--rr-q-ink:#DDE2FF;--rr-q-glow:rgba(140,155,255,.45)}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{margin:0;font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- page ---------- */
.wrap{width:100%;max-width:720px;margin:0 auto;padding:16px 20px 0;display:flex;flex-direction:column;gap:16px}
/* 첫 화면에서 바닥글은 화면 밖에서 시작한다(2026-10-29 rich-cls-runtime): 첫 화면 밑 광고 칸(103) · 결과 문서의 결과가 나중에 들어와도 보이던 바닥글이
   밀려 내려가지 않게(레이아웃 이동) */
#root>main.wrap{min-height:100vh}
/* 컴퓨터(961px~): 모든 서비스와 같은 왼쪽 선(메뉴 224px + 32px = x 256)에서 시작하고, 오른쪽은 광고 레일 자리로 비운다(오너 2026-10-21 '항상 왼쪽 정렬') */
@media(min-width:961px){#yn-standalone>#root>main.wrap{margin-left:0;margin-right:auto;padding:24px 32px 0}}
h1{font:800 clamp(27px,7.2vw,38px)/1.2 var(--f-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;font:600 15px var(--f-body);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.btn svg{width:19px;height:19px}
.btn-secondary{background:var(--glass);border-color:var(--glass-b);color:var(--text)}
.btn-fun{background:linear-gradient(100deg,rgb(var(--fun-rgb)),#FF9A3D);color:#1d1300;box-shadow:0 8px 28px rgba(var(--fun-rgb),.22);font-weight:700;height:56px;font-size:16.5px}
.btn.block{width:100%}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.hint{font-size:12.5px;line-height:1.55;color:var(--faint)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--tint);border:1px solid var(--glass-b)}
.seg button{height:40px;border:0;border-radius:10px;background:none;font:700 14px var(--f-body);color:var(--muted)}
.seg [aria-pressed="true"]{background:var(--inv);color:var(--inv-text)}

/* ---------- 무대(시안 B): 격자 + 빛 두 덩이(릴스 · 직업 카드와 같은 문법). 휴대폰은 화면 끝까지, 컴퓨터는 좌우를 흐리게 ---------- */
#start,#result{position:relative;isolation:isolate}
.rr-bg{position:absolute;z-index:-1;inset:-16px -20px -40px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 62%,transparent);mask:linear-gradient(180deg,#000 62%,transparent)}
.rr-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--rr-grid) 1px,transparent 1px),linear-gradient(90deg,var(--rr-grid) 1px,transparent 1px);background-size:24px 24px}
.rr-bg .g1,.rr-bg .g2{position:absolute;border-radius:50%;filter:blur(64px);opacity:var(--rr-blob)}
.rr-bg .g1{width:440px;height:440px;left:-190px;top:-200px;background:radial-gradient(circle,#FF3D8A 0%,transparent 70%)}
.rr-bg .g2{width:480px;height:480px;right:-220px;bottom:-60px;background:radial-gradient(circle,#3DE8C6 0%,transparent 70%)}
/* 결과: 빛 두 덩이를 내 세계 티어 색으로 */
#result{--tc-rgb:174,182,198;--tc2-rgb:120,132,200}
#result[data-g="S"]{--tc-rgb:61,232,198;--tc2-rgb:255,200,61}
#result[data-g="A"]{--tc-rgb:61,232,198;--tc2-rgb:92,184,255}
#result[data-g="B"]{--tc-rgb:255,200,61;--tc2-rgb:255,122,69}
#result[data-g="D"]{--tc-rgb:255,122,69;--tc2-rgb:255,61,138}
#result[data-g="F"]{--tc-rgb:255,61,138;--tc2-rgb:255,122,69}
#result .rr-bg .g1{background:radial-gradient(circle,rgb(var(--tc-rgb)) 0%,transparent 70%)}
#result .rr-bg .g2{background:radial-gradient(circle,rgb(var(--tc2-rgb)) 0%,transparent 70%);opacity:calc(var(--rr-blob) * .9)}

/* ---------- 첫 화면: 제목 · 흐린 티어 미터('?' 핀) · 시작하기(휴대폰은 엄지 자리) ---------- */
.hero{display:flex;flex-direction:column;gap:18px;padding-top:10px}
#start{min-height:calc(100svh - 150px)}
#start[data-view="step"],#start[data-view="pad"]{min-height:0;gap:14px}
.rr-h{margin:0;font:800 clamp(34px,9.6vw,50px)/1.12 var(--f-display);letter-spacing:-.04em;color:var(--text);text-wrap:balance}
.rr-h em{font-style:normal;background:var(--rr-h-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rr-ask{display:flex;flex-direction:column;margin-top:auto;padding-bottom:6px}
#start[data-view="step"] .rr-ask,#start[data-view="pad"] .rr-ask{margin-top:0;padding-bottom:0}
.rr-start{height:58px;font-size:17px;font-weight:800}

/* 티어 미터(SSS 위 → F 아래 12줄): 첫 화면은 흐리게, 결과 카드 안은 내 티어까지 켜고 핀 두 개 */
.rr-meter{position:relative;display:flex;flex-direction:column;gap:5px}
.rr-mr{--rc:174,182,198;position:relative;display:grid;grid-template-columns:32px minmax(44px,.5fr) minmax(0,1.7fr);align-items:center;column-gap:10px;height:22px}
.rr-mr.g-S,.rr-mr.g-A{--rc:61,232,198}
.rr-mr.g-B{--rc:255,200,61}
.rr-mr.g-D{--rc:255,122,69}
.rr-mr.g-F{--rc:255,61,138}
.rr-mt{font:800 12px/1 'Sora',var(--f-display);letter-spacing:.02em;color:var(--rr-mt);text-align:right;white-space:nowrap}
.rr-mb{position:relative;display:block;height:12px;border-radius:5px;background:rgba(var(--rc),.13)}
.rr-mr.g-S .rr-mb{background:linear-gradient(90deg,rgba(61,232,198,.13),rgba(255,200,61,.13))}
.rr-mr.is-lit .rr-mt{color:var(--rr-mt-on)}
.rr-mr.is-lit .rr-mb{background:rgba(var(--rc),.34)}
.rr-mr.g-S.is-lit .rr-mb{background:linear-gradient(90deg,rgba(61,232,198,.34),rgba(255,200,61,.34))}
.rr-mr.is-home .rr-mt{color:var(--rr-hi)}
.rr-mr.is-home .rr-mb{background:rgb(var(--rc));box-shadow:0 0 12px rgba(var(--rc),.6)}
.rr-mr.is-world .rr-mt{color:var(--rr-hi);font-size:14px}
.rr-mr.is-world .rr-mb{height:16px;background:rgb(var(--rc));box-shadow:0 0 18px rgba(var(--rc),.8)}
.rr-mr.g-S.is-world .rr-mb,.rr-mr.g-S.is-home .rr-mb{background:linear-gradient(90deg,#3DE8C6,#FFC83D)}
.rr-mp{display:flex;align-items:center;gap:8px;height:22px;min-width:0;white-space:nowrap}
.rr-pin-w{display:inline-flex;align-items:center;gap:10px}
.rr-pin-w .rr-pin-g{height:38px;min-width:58px;padding:0 12px;font-size:22px;border-radius:12px;box-shadow:0 0 26px rgba(var(--rc),.65)}
.rr-pin-w small{display:block;font:700 11px/1.1 var(--f-body);color:var(--muted)}
.rr-pin-w b{display:block;font:800 22px/1.05 'Sora',var(--f-display);letter-spacing:-.025em;color:var(--text);text-shadow:0 0 18px rgba(var(--rc),.5)}
.rr-pin-h{display:inline-flex;align-items:center;gap:6px}
.rr-pin-h i{font-style:normal;font-size:15px;line-height:1}
.rr-pin-h small{font:700 12px/1 var(--f-body);color:var(--soft-3)}
.rr-pin-h b{font:800 14px/1 'Sora',var(--f-display);color:var(--text)}
.rr-pin-h .grade{height:20px;min-width:30px;padding:0 6px;font-size:11px;border-radius:6px}
.rr-pin-w+.rr-pin-h{margin-left:4px}
.rr-pin-h.is-tight small{display:none}
/* 내 나라 줄이 세계 줄 바로 위 · 아래면 그 사이를 조금 벌린다(세계 핀의 큰 티어 패가 위아래로 8px 넘친다) */
.rr-mr.is-home.is-below{margin-top:6px}
.rr-mr.is-home.is-above{margin-bottom:6px}
/* 친구 링크로 왔으면 친구 티어 줄 막대 끝에 '친구' */
.rr-fpin{position:absolute;right:3px;top:50%;transform:translateY(-50%);height:16px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;
  background:#B8C0FF;color:#14183a;font:800 10px/1 var(--f-body);white-space:nowrap;box-shadow:0 0 10px rgba(184,192,255,.6)}
/* 첫 화면의 흐린 미터: 핀 칸 없이 두 칸, 가운데 '?' 핀이 위아래로 */
.rr-meter.is-ghost .rr-mr{height:20px;grid-template-columns:34px minmax(0,1fr)}
.rr-meter.is-ghost .rr-mb{height:10px}
.rr-qpin{position:absolute;right:10%;top:28%;width:66px;height:66px;border-radius:20px;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(160deg,var(--rr-q1),var(--rr-q2));border:1px solid rgba(184,192,255,.55);box-shadow:0 0 40px var(--rr-q-glow),inset 0 1px 0 rgba(255,255,255,.2);animation:rrBob 2.4s ease-in-out infinite}
.rr-qpin b{font:800 38px/1 'Sora',var(--f-display);color:var(--rr-q-ink);text-shadow:0 0 18px rgba(184,192,255,.9)}
@keyframes rrBob{0%,100%{transform:translateY(-10px)}50%{transform:translateY(34px)}}

/* ---------- 금액 고르기: 소득 / 자산 · 금액 타일 8개 · 직접 입력 ---------- */
.rr-v-step{display:flex;flex-direction:column;gap:14px}
.rr-steptop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rr-back{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--glass-b);background:var(--glass);color:var(--text)}
.rr-back svg{width:22px;height:22px}
.rr-steptop .seg{display:inline-grid;grid-template-columns:auto auto;padding:3px;border-radius:999px}
.rr-steptop .seg button{height:34px;padding:0 15px;border-radius:999px;font-size:13px}
.rr-q{margin:4px 0 2px;font:800 clamp(24px,7vw,32px)/1.25 var(--f-display);letter-spacing:-.03em;color:var(--text);text-wrap:balance}
.rr-q:focus{outline:none}
.rr-v-tiles{display:flex;flex-direction:column;gap:10px}
.rr-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rr-tile{display:flex;align-items:center;justify-content:center;gap:8px;height:64px;padding:0 8px;border-radius:16px;border:1px solid var(--glass-b);background:var(--rr-tile);box-shadow:var(--shadow-1);
  color:var(--text);font:800 21px/1 var(--f-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .12s,background-color .12s}
@media(hover:hover){.rr-tile:hover{border-color:rgba(var(--fun-rgb),.55)}}
.rr-tile:active,.rr-tile.is-on{transform:scale(.97);border-color:rgba(var(--fun-rgb),.8);background:rgba(var(--fun-rgb),.16);color:var(--fun-ink)}
.rr-direct{width:100%;font:700 15px/1 var(--f-body);letter-spacing:0;color:var(--muted);background:none;box-shadow:none;border-style:dashed}
.rr-direct svg{width:18px;height:18px;flex:none}
/* 키패드: 금액 줄 · 읽어 주는 줄 · 숫자 12칸 · 알아보기(빈 칸이면 흐리게, 누르면 알림) */
.rr-v-pad{display:flex;flex-direction:column;gap:12px}
.rr-pad-amt{display:flex;align-items:baseline;gap:10px;min-width:0;padding:6px 2px 10px;border-bottom:2px solid rgb(var(--fun-rgb))}
.rr-pad-amt output{flex:1;min-width:0;overflow:hidden;font:800 clamp(40px,12vw,54px)/1.05 var(--f-num);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.rr-pad-amt output.is-long{font-size:clamp(32px,9.4vw,44px)}
.rr-pad-amt output.is-xlong{font-size:clamp(26px,7.6vw,36px)}
.rr-pad-amt output.is-empty{color:var(--ph)}
.rr-pad-amt span{flex:none;font:700 18px/1 var(--f-body);color:var(--muted)}
.rr-said{min-height:18px;font:700 13px/1.4 var(--f-body);color:var(--fun-ink);margin-top:-4px}
.rr-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rr-keys button{height:54px;border-radius:14px;border:1px solid var(--line-2);background:var(--rr-key);color:var(--text);font:700 24px/1 'Sora',var(--f-display);display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.rr-keys button:active{background:var(--rr-key-on)}
.rr-keys svg{width:24px;height:24px}
#go.is-off{opacity:.45;filter:saturate(.4)}

/* ---------- 결과: 80억 명 중 N번째 · 인증서 카드(티어 미터) · 공유 줄 · 자세히 보기 ---------- */
#result{display:flex;flex-direction:column;gap:16px;padding-top:12px;scroll-margin-top:88px}
.rr-ans{margin:0;display:flex;flex-direction:column;gap:2px;font-weight:800}
.rr-crowd{font:800 clamp(20px,5.6vw,26px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--muted)}
.rr-crowd::first-letter{text-transform:uppercase}   /* en card.crowd 'out of 8 billion,'(공유 이미지 안의 이어지는 말)이 제목 첫 줄일 때 */
.rr-line{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;min-width:0}
.rr-big{font:800 clamp(50px,15vw,76px)/1.02 var(--f-display);font-style:normal;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--rr-h-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(var(--tc-rgb),.35))}
.rr-nth{font:800 clamp(22px,6.2vw,30px)/1.2 var(--f-display);letter-spacing:-.03em;color:var(--text)}

/* 티어 패(오너 2026-10-22: 사주가챠와 같은 SSS → F 12칸 · 같은 패) — demo/luck/style.css .tier 와 같은 모양 · 색. 색은 묶음(fam): SSS·SS·S 청록 → 금, A 청록, B 금, C 회색, D 주황, F 분홍 */
.grade{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:8px;font:800 12.5px/1 'Sora',var(--f-display);letter-spacing:.03em;color:#0B0D12;flex:none;white-space:nowrap}
.grade.g-S{background:linear-gradient(100deg,#3DE8C6,#FFC83D)}
.grade.g-A{background:#3DE8C6;color:#05231c}
.grade.g-B{background:#FFC83D;color:#1d1300}
.grade.g-C{background:#AEB6C6;color:#14171d}
.grade.g-D{background:#FF7A45;color:#1f0b02}
.grade.g-F{background:#FF3D8A;color:#2a0414}

/* 인증서 카드: 등급 색으로 물든 배경(공유 이미지 card.js 와 같은 짜임) — 머리 줄(로고 · 인증서 이름) · 금액(금색) · 티어 미터 */
.rank-card{--g-rgb:120,128,148;position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--border);box-shadow:var(--card-sh);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;
  background:radial-gradient(110% 80% at 100% 0%,rgba(var(--g-rgb),.30),transparent 62%),radial-gradient(80% 70% at 0% 100%,rgba(var(--g-rgb),.12),transparent 70%),linear-gradient(160deg,#1b2030,#0e1118)}
.rank-card.g-S{--g-rgb:61,232,198;background:radial-gradient(110% 80% at 100% 0%,rgba(255,200,61,.26),transparent 60%),radial-gradient(90% 80% at 40% 0%,rgba(61,232,198,.16),transparent 65%),radial-gradient(80% 80% at 0% 100%,rgba(61,232,198,.2),transparent 70%),linear-gradient(160deg,#16241f,#0e1118)}
.rank-card.g-A{--g-rgb:61,232,198}
.rank-card.g-B{--g-rgb:255,200,61}
.rank-card.g-C{--g-rgb:174,182,198}
.rank-card.g-D{--g-rgb:255,122,69}
.rank-card.g-F{--g-rgb:255,61,138}
.rr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px}
.cert-brand{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 'Sora',var(--f-display);color:var(--muted);white-space:nowrap}
.ring{flex:none;width:13px;height:13px;border-radius:50%;background:conic-gradient(from 210deg,#3DE8C6,#FFC83D,#FF7A45,#FF3D8A,#3DE8C6);-webkit-mask:radial-gradient(circle,transparent 3.4px,#000 3.9px);mask:radial-gradient(circle,transparent 3.4px,#000 3.9px)}
.rr-pill{display:inline-flex;align-items:center;gap:7px;min-width:0;height:30px;padding:0 13px;border-radius:999px;background:rgba(var(--g-rgb),.14);border:1px solid rgba(var(--g-rgb),.6);color:rgb(var(--g-rgb));font:800 12.5px/1 var(--f-display);white-space:nowrap}
.rr-pill i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
html:lang(en) .rr-pill,html:lang(th) .rr-pill{gap:6px;padding:0 10px;font-size:11px}   /* 긴 인증서 이름(INCOME TIER CERTIFICATE · ใบรับรองเทียร์ทรัพย์สิน)도 로고와 한 줄에 */
.cap{font:800 11.5px/1.25 var(--f-body);letter-spacing:.16em;color:rgb(var(--g-rgb))}
html:lang(th) .cap{letter-spacing:0}
.rr-amt{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.rr-gold{font:900 clamp(24px,7vw,32px)/1.08 var(--f-display);letter-spacing:-.03em;background:linear-gradient(100deg,#FFE7A3,#FFC83D 55%,#E9A92A);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,200,61,.3));overflow-wrap:anywhere;text-wrap:balance}   /* balance: 1조가 넘는 금액이 320 폭에서 두 줄이 될 때 '원'만 따로 떨어지지 않게 */
.rr-card .rr-meter{margin-top:2px}

/* 공유 줄(2026-10-29 viral-fun, 오너 fix 2: 휴대폰 첫 화면 안): [공유하기][인증서 저장] · 친구와 비교 · 다시 하기 | 인증서 발급받기 */
.rr-acts{display:flex;flex-direction:column;gap:8px}
.rc-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rc-share .btn{height:54px;padding:0 8px;font-size:15.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.rr-act2{display:flex;justify-content:center;gap:6px}
.rr-link{position:relative;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border:0;border-radius:12px;background:none;font:700 14px/1 var(--f-body);color:var(--muted);text-decoration:none}
@media(hover:hover){.rr-link:hover{color:var(--text);background:var(--tint)}}
.rr-link+.rr-link::before{content:'';position:absolute;left:-4px;top:13px;bottom:13px;width:1px;background:var(--line)}
/* 친구와 비교(fix 7): 공유 줄 밑 — 친구 · 나 두 칸 + 내 결과 보내기 */
.rc-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px;border-radius:16px;background:var(--tint-2);border:1px solid var(--line)}
.rc-vs-k{grid-column:1/-1;font:800 12.5px/1.2 var(--f-body);color:var(--fun-ink)}
.rc-vs-side{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.rc-vs-side small{font:700 12px/1.2 var(--f-body);color:var(--muted)}
.rc-vs-side.me small{color:var(--text)}
.rc-vs-side b{flex-basis:100%;font:800 17px/1.1 'Sora',var(--f-display);letter-spacing:-.01em;white-space:nowrap}   /* 두 칸 모두 '이름 · 티어' 다음 줄에 % */
.rc-vs-side.me{padding-left:10px;border-left:1px solid var(--line)}
.rc-vs-go{grid-column:1/-1;height:44px;font-size:14px;font-weight:700}
/* 자세히 보기(처음엔 접힘) · 출처 확인하기(창) */
.rr-more-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.rr-more{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 4px;border:0;background:none;color:var(--soft-4);font:700 14.5px/1 var(--f-body)}
.rr-more svg{width:16px;height:16px;transition:transform .2s}
.rr-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.rr-src{height:40px;padding:0 2px;border:0;background:none;color:var(--faint);font:600 12.5px/1 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.rr-det{display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.rr-oecd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.rr-oecd-k{margin-right:auto;font:700 14px/1.3 var(--f-body);color:var(--soft-4)}
.rr-oecd b{font:800 18px/1 'Sora',var(--f-display);letter-spacing:-.01em}
.rr-oecd small{font:700 12px/1.2 var(--f-body);color:var(--muted)}

/* ---------- 알림 · 바닥글 ---------- */
.rr-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px) + var(--yn-anchor,0px));z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--inv);color:var(--inv-text);font:600 13px var(--f-body);padding:10px 14px;border-radius:12px;transition:.25s}
.rr-toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:961px){.rr-toast{bottom:32px}}
.foot{width:100%;max-width:720px;margin:28px auto 0;padding:18px 20px 28px;display:flex;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--border);font:500 12.5px/1.5 var(--f-body);color:var(--faint)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}
/* ---------- 섹션 머리 ---------- */
.sec-h{display:flex;flex-direction:column;gap:3px}
.sec-h b{font:800 17px/1.25 var(--f-body);letter-spacing:-.02em}
.sec-h small{font:500 12.5px/1.4 var(--f-body);color:var(--faint)}

/* ---------- 다음 등급까지: 경험치 막대 ---------- */
.nx{gap:16px}
.nx-row{display:flex;flex-direction:column;gap:7px}
.nx-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.nx-top b{font:700 14px/1.3 var(--f-body)}
.nx-more{font:800 18px/1 var(--f-display);letter-spacing:-.02em;color:var(--fun-ink);white-space:nowrap}
.nx-more.done{font:700 12.5px/1.2 var(--f-body);color:var(--muted)}
.nx-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.nx-bar .grade{height:22px;min-width:28px;padding:0 6px;font-size:11.5px}
.nx-track{position:relative;height:12px;border-radius:7px;background:var(--track);box-shadow:inset 0 0 0 1px var(--track-b);overflow:hidden}
.nx-track i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;overflow:hidden}
.nx-track i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:nxShine 2.6s ease-in-out infinite}
@keyframes nxShine{60%,100%{transform:translateX(100%)}}
.nx-sub{font:500 12px/1.4 var(--f-body);color:var(--faint)}
.nx-track i.g-S,.cb.g-S .cb-bar i{background:linear-gradient(90deg,#3DE8C6,#FFC83D)}
.nx-track i.g-A,.cb.g-A .cb-bar i{background:linear-gradient(90deg,#9FF0DC,#3DE8C6)}
.nx-track i.g-B,.cb.g-B .cb-bar i{background:linear-gradient(90deg,#FFE08A,#FFC83D)}
.nx-track i.g-C,.cb.g-C .cb-bar i{background:linear-gradient(90deg,#D5DAE3,#AEB6C6)}
.nx-track i.g-D,.cb.g-D .cb-bar i{background:linear-gradient(90deg,#FFB08A,#FF7A45)}
.nx-track i.g-F,.cb.g-F .cb-bar i{background:linear-gradient(90deg,#FF8FB8,#FF3D8A)}

/* ---------- 나라별 목록: 이 돈 들고 가면 그 나라 상위 몇 %(가로 막대, % 만) ---------- */
.ch{gap:12px;padding:16px 14px}
.ch-why{font:500 12.5px/1.55 var(--f-body);color:var(--soft-3);padding:10px 12px;border-radius:12px;background:var(--tint-2);border:1px solid var(--line-2)}
/* 일본어 질문은 、 뒤에서만 줄을 바꾼다: 800万円で移住したら、/ その国で上位何％でしょう？ (でし / ょう 처럼 낱말 가운데서 끊지 않는다. keep-all 이면
   ％ 뒤도 끊을 수 있는 자리라 balance 로 두 줄 길이를 맞춰 、 를 고르게 한다. 터무니없이 큰 금액만 body 의 overflow-wrap 으로 넘치지 않게 끊긴다) */
html:lang(ja) .ch-why{word-break:keep-all;text-wrap:balance}
.ch-list{display:flex;flex-direction:column}
/* 나라 이름은 어느 언어에서도 잘리지 않는다(2026-11-09 측정: 가장 긴 이름 en 'United States (you)' 114px, ja ニュージーランド 100px, th สหราชอาณาจักร 84px).
   휴대폰: 한 줄에 국기 · 이름 · 티어 · 상위 %, 그 밑에 막대가 줄 너비 그대로. 넓은 화면(480px~): 한 줄, 이름 칸 150px(가장 긴 이름 139px + 여유).
   360px 보다 좁은 화면(320px): 간격을 줄여 이름 자리 105px(ja 100px 은 한 줄), 그래도 넘치는 이름은 띄어쓰기에서 두 줄(United States / (you)) */
.cb{display:grid;grid-template-columns:minmax(0,1fr) 40px 74px;grid-template-areas:"n g v" "b b b";align-items:center;column-gap:8px;row-gap:5px;padding:6px 0}
.cb-n{grid-area:n;display:flex;align-items:center;gap:6px;min-width:0;font:600 12.5px/1.2 var(--f-body);color:var(--soft-4)}
.cb-n i{flex:none;font-style:normal;font-size:15px;line-height:1}
.cb-n span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-bar{grid-area:b;position:relative;height:6px;border-radius:6px;background:var(--tint)}
.cb-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.cb .grade{grid-area:g;height:20px;min-width:0;width:40px;padding:0;font-size:11px;border-radius:6px}
.cb-v{grid-area:v;font:800 13.5px/1 var(--f-display);letter-spacing:-.02em;text-align:right;white-space:nowrap}
.cb.me{margin:2px -8px;padding-left:8px;padding-right:8px;border-radius:10px;background:rgba(var(--fun-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--fun-rgb),.45)}
.cb.me .cb-n{color:var(--fun-ink);font-weight:800}
@media(min-width:480px){
  .cb{grid-template-columns:150px minmax(0,1fr) 40px 74px;grid-template-areas:"n b g v";row-gap:0;padding:0;min-height:34px}
  .cb-bar{height:10px}
}
@media(max-width:359px){
  .cb{column-gap:6px}
  .cb-n{gap:4px}
  .cb-n span{white-space:normal}
}

/* ---------- 창(공유 이미지 · 출처, 이민 가챠와 같은 값) ---------- */
.scrim{position:fixed;inset:0;z-index:55;background:var(--ov);display:flex;align-items:flex-end}
/* 구글 하단 앵커 광고(휴대폰)는 모든 막 위에 뜬다: 창은 그 위에 선다(html{--yn-anchor}, AMENDMENTS A3) */
.scrim{padding-bottom:var(--yn-anchor,0px)}
.scrim .sheet{max-height:calc(86vh - var(--yn-anchor,0px))}
.sheet{width:100%;max-width:560px;margin:0 auto;max-height:86vh;display:flex;flex-direction:column;border-radius:26px 26px 0 0;background:var(--sheet);border:1px solid var(--glass-b);box-shadow:var(--sheet-sh);overflow:hidden}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 13px;border-bottom:1px solid var(--border)}
.sheet-h b{font:800 19px/1.1 var(--f-body);letter-spacing:-.02em}
.x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-b);background:none;color:inherit}
.x svg{width:17px;height:17px;color:var(--muted)}
.sheet-b{padding:12px 14px 18px;overflow:auto}
.src-body{font:500 13px/1.75 var(--f-body);color:var(--soft-3);overflow-wrap:anywhere}
.src-body a{color:var(--text);text-underline-offset:3px}
.share-sheet{max-height:94vh}
.share-b{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.share-opts{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.hide-amt{height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--glass-b);background:var(--tint);font:700 14px var(--f-body);color:var(--muted);white-space:nowrap}
.hide-amt[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:var(--inv)}
.share-prev{display:grid;place-items:center;min-height:200px}
.share-prev img{display:block;max-width:100%;max-height:56vh;border-radius:14px;box-shadow:var(--img-sh);background:#0B0D12;transition:opacity .2s}
.share-prev img.busy{opacity:.35}
.share-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-acts .btn{height:52px;padding:0 8px;font-size:14.5px;font-weight:700}
@media (max-width:359px){.share-acts{gap:6px}.share-acts .btn{padding:0 5px}}

/* ---------- 공유(2026-10-29 viral-fun) ---------- */
/* 친구 띠: 친구 링크(#t=&p=&b=)로 왔을 때 첫 화면 맨 위 — 친구의 티어 패 · '친구는 80억 명 중 상위 7.8%, S 티어예요' · 나는 몇 번째 부자일까요? */
.rr-friend{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(var(--fun-rgb),.08);border:1px solid rgba(var(--fun-rgb),.38)}
.rr-friend .grade{height:34px;min-width:48px;padding:0 10px;border-radius:10px;font-size:16px}
.rr-friend p{display:flex;flex-direction:column;gap:3px;min-width:0}
.rr-friend b{font:800 15px/1.35 var(--f-body);letter-spacing:-.01em;color:var(--text)}
.rr-friend small{font:600 12.5px/1.35 var(--f-body);color:var(--muted)}
/* 공유 창: 카카오톡(한국) · X 줄, 인앱 브라우저의 길게 눌러 저장 도움말. 줄이 늘어도 휴대폰 한 화면에 들게 미리보기를 조금 줄이고,
   그래도 넘치면(인앱 도움말) 미리보기를 눌러 겹치게 하지 않고 창 안에서 스크롤한다 */
.share-b>*{flex-shrink:0}
.share-prev img{max-height:min(56vh,calc(86vh - 340px))}
.share-sheet.in-app .share-prev img{max-height:max(220px,calc(86vh - 420px))}
.share-nets{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.share-nets .btn{height:48px;padding:0 8px;font-size:14.5px;font-weight:700;gap:7px}
.share-nets svg{width:18px;height:18px;flex:none}
.net-kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.share-hold{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:10px 12px;border-radius:14px;background:rgba(var(--fun-rgb),.08);border:1px solid rgba(var(--fun-rgb),.38)}
.share-hold b{font:800 15px/1.35 var(--f-body);color:var(--text)}
.share-hold small{font:600 12.5px/1.5 var(--f-body);color:var(--muted)}
.share-hold .btn{height:42px;font-size:14px}
.share-hold.flash{animation:rr-hold .9s ease}
@keyframes rr-hold{0%,100%{box-shadow:0 0 0 0 rgba(var(--fun-rgb),0)}30%{box-shadow:0 0 0 4px rgba(var(--fun-rgb),.55)}}

/* ---------- 컴퓨터(961px~): 첫 화면은 높이를 채우지 않고, 미터는 넓게, 타일은 4칸 ---------- */
@media(min-width:961px){
  .hero{padding-top:14px;gap:20px}
  #start{min-height:0}
  .rr-ask{margin-top:8px}
  .rr-v-first{max-width:360px}
  .rr-bg{inset:-24px -32px -40px;-webkit-mask:linear-gradient(180deg,#000 55%,transparent),linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
    mask:linear-gradient(180deg,#000 55%,transparent),linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
  .rr-bg .g1{width:560px;height:560px;left:-220px;top:-260px}
  .rr-bg .g2{width:560px;height:560px;right:-200px;bottom:-80px}
  .rr-meter{gap:6px}
  .rr-mr{grid-template-columns:40px minmax(120px,1fr) minmax(0,1.5fr);height:24px}
  .rr-meter.is-ghost .rr-mr{grid-template-columns:40px minmax(0,1fr)}
  .rr-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rr-v-pad{max-width:420px}
  .rank-card{padding:22px 24px 24px;gap:16px}
  .rr-big{font-size:84px}
}

/* 낮은 휴대폰 화면(높이 820px 이하): 미터 줄과 사이를 조금 줄여 공유 줄이 첫 화면(아래 메뉴 위)에 들게 */
@media(max-width:960px) and (max-height:820px){
  #result{padding-top:6px;gap:14px}
  .rr-card{gap:12px}
  .rr-meter{gap:4px}
  .rr-mr{height:20px}
}

/* 움직임 줄이기: '?' 핀 · 막대 반짝임 · 저장 도움말 깜빡임 없이 */
@media (prefers-reduced-motion:reduce){.rr-qpin,.nx-track i::after,.share-hold.flash{animation:none}.rr-tile,.rr-more svg{transition:none}}