/* 80억 명 중 나는 몇 번째 부자? (/ko/rich/) — 토큰·부품은 이민 가챠와 같은 값.
   사이트 메뉴(#yn-rail · #yn-header · #yn-dock · #yn-services)는 /assets/navigation/ 의 공용 CSS가 그린다: 여기서는 그 클래스(.top · .brand · .mark · .pick · .dock)를 쓰지 않는다.
   Layout: 입력 → 알아보기 연출(오버레이) → 결과 카드 · 다음 등급까지 · 나라별 순위 → 다른 나라 가챠 카드 */
@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(en) .hero h1,html:lang(th) .hero h1{font-size:clamp(28px,8vw,46px);letter-spacing:-.03em}
html:not(:lang(ko)) .seg button,html:not(:lang(ko)) .acts .btn{white-space:nowrap}
html:not(:lang(ko)) .acts .btn{font-size:13px;letter-spacing:-.01em}

*{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}}
.eyebrow{font:600 12px/1.2 var(--f-body);letter-spacing:.02em;color:var(--fun-ink)}
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}

/* ---------- hero + 입력 ---------- */
.hero{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.hero .spec{height:4px;border-radius:4px;background:linear-gradient(90deg,rgb(var(--fun-rgb)),rgb(var(--fun2-rgb)));width:96px}
.hero h1{font-size:clamp(32px,9.4vw,48px);line-height:1.12;letter-spacing:-.04em}
.hero h1 em{font-style:normal;background:var(--fun-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ask{gap:16px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font:700 15px/1.3 var(--f-body)}
.field label small{font-weight:500;font-size:12.5px;color:var(--faint);margin-left:6px}
.money{display:flex;align-items:center;gap:8px;height:54px;padding:0 16px;border-radius:15px;background:var(--surface-2);border:1px solid var(--glass-b)}
.money:focus-within{border-color:rgba(var(--fun-rgb),.7);box-shadow:0 0 0 3px rgba(var(--fun-rgb),.15)}
.money input{flex:1;min-width:0;width:100%;border:0;background:none;color:var(--text);font:800 22px/1 var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums;outline:none;height:32px;padding:0}
.money input::placeholder{color:var(--ph)}
.money span{font:600 14px var(--f-body);color:var(--muted);flex:none}
.said{min-height:18px;font:600 13px/1.4 var(--f-body);color:var(--fun-ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{flex:none;border:1px solid var(--glass-b);background:var(--glass);border-radius:999px;height:34px;padding:0 13px;font:600 13px var(--f-body);color:var(--muted);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:var(--inv)}
.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)}

/* 나라 릴 (이민 가챠와 같다) */

/* ---------- 결과 ---------- */
#result{display:flex;flex-direction:column;gap:12px;scroll-margin-top:88px}
/* 나라 카드(2026-10-21): 세계 카드 바로 아래 내 나라 카드, 🎲·차트 줄을 누르면 그 자리에서 다른 나라로 바뀐다 */
.country{display:flex;flex-direction:column;gap:10px;scroll-margin-top:88px}
.country:empty{display:none}
.cty-k{padding-top:2px}
.cty-back{margin-left:auto;border:1px solid var(--border);background:var(--tint);color:var(--text);border-radius:999px;padding:5px 11px;font:700 12px/1.2 var(--f-body);cursor:pointer}
.cty-back:hover{border-color:rgba(var(--fun-rgb),.6)}
.cty-note{padding-top:0}
.res-k{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 2px 0;font:600 12px/1.3 var(--f-body);color:var(--faint);flex-wrap:wrap}
.res-k span:first-child{color:var(--fun-ink)}
.res-k b{color:var(--text)}
.acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr) minmax(0,1fr);gap:8px}   /* 가운데 🎲 버튼이 주 버튼이라 조금 넓게(태국어 · 영어 문구) */
.acts .btn{height:52px;padding:0 6px;font-size:14px;font-weight:700}
.foot-note{font-size:12px;line-height:1.6;color:var(--faint);padding:2px 2px 0}

/* 티어 패(오너 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}

/* 결과 카드 한 장: 등급 색으로 물든 배경 */
.rank-card{--g-rgb:120,128,148;position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);box-shadow:var(--card-sh);padding:18px 18px 16px;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}
.cty-why b{color:var(--fun-ink);font-weight:800}
/* 부자 인증서 카드(오너 2026-10-22 "카드 대충 디자인할래? 제대로 디자인하라고"): 공유 이미지(card.js)와 사이트 직업 식별증 카드의 짜임 —
   머리 줄(로고 · 인증서 이름) · 티어 타일 + 가구 소득(금색, 가장 큼) · 세계 상위 % · 빛나는 큰 순위 · 80억 명 줄 · 수치 칸. 캡션 색은 티어 색(--g-rgb) */
.cert-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cert-brand{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 'Sora',var(--f-display);color:var(--muted)}
.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)}
.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}
.cert-main{display:flex;align-items:center;gap:16px;min-width:0}
.cert-kv{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1}
.cert-amt{font:900 clamp(30px,9vw,46px)/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,.35));margin-bottom:8px;overflow-wrap:anywhere}
.cert-top{font:800 clamp(26px,7.4vw,36px)/1.05 'Sora',var(--f-display);letter-spacing:-.02em;color:var(--text)}
.cert-k{margin:2px 0 -8px}
.rc-big.glow b,.cty-big.glow b{text-shadow:0 0 30px rgba(var(--g-rgb),.5)}
.cert-stat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10)}
.cert-stat-k{font:800 12.5px/1.2 var(--f-body);color:rgb(var(--g-rgb));margin-right:auto}
.cert-stat b{font:800 19px/1 'Sora',var(--f-display);letter-spacing:-.01em}
.cert-stat small{font:700 12px/1.2 var(--f-body);color:var(--muted)}
/* 티어 타일: 큰 티어 글자(티어 색 · 빛) · 아래 계층 이름 띠 — 공유 이미지의 타일과 같은 값 */
.tier-tile{--t1:#3DE8C6;--t2:#FFC83D;--trgb:61,232,198;--tink:#0B0D12;--ts:clamp(108px,30vw,148px);position:relative;flex:none;width:var(--ts);height:var(--ts);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:calc(var(--ts) * .25);
  background:radial-gradient(70% 60% at 50% 38%,rgba(var(--trgb),.45),transparent 70%),linear-gradient(180deg,rgba(var(--trgb),.36),rgba(var(--trgb),.07)),#10141E;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.tier-tile b{font:800 calc(var(--ts) * .5)/1 'Sora',var(--f-display);letter-spacing:-.02em;background:linear-gradient(135deg,var(--t1),var(--t2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(var(--trgb),.65))}
.tier-tile.len-1 b{font-size:calc(var(--ts) * .6)}
.tier-tile.len-3 b{font-size:calc(var(--ts) * .36)}
.tier-tile span{position:absolute;left:0;right:0;bottom:0;height:calc(var(--ts) * .25);display:grid;place-items:center;padding:0 6px;background:linear-gradient(90deg,var(--t1),var(--t2));color:var(--tink);font:900 clamp(12px,3.4vw,15px)/1.1 var(--f-body);text-align:center}
.tier-tile.g-A{--t1:#3DE8C6;--t2:#3DE8C6;--trgb:61,232,198;--tink:#05231c}
.tier-tile.g-B{--t1:#FFC83D;--t2:#FFC83D;--trgb:255,200,61;--tink:#1d1300}
.tier-tile.g-C{--t1:#AEB6C6;--t2:#AEB6C6;--trgb:174,182,198;--tink:#14171d}
.tier-tile.g-D{--t1:#FF7A45;--t2:#FF7A45;--trgb:255,122,69;--tink:#1f0b02}
.tier-tile.g-F{--t1:#FF3D8A;--t2:#FF3D8A;--trgb:255,61,138;--tink:#2a0414}
.rank-card.cty .cty-badge{position:absolute;top:16px;right:16px;margin:0}
.rc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc-top b{font:800 16px/1.2 var(--f-body)}
.rc-top span.pct{font:600 13px/1.2 var(--f-body);color:#cfd5df}
.rc-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:-2px}
.rc-big b{font:800 clamp(38px,11vw,54px)/1 var(--f-num);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rc-big span{font:700 17px/1.2 var(--f-body);color:#dfe3ea}
.rc-sub{font:500 13px/1.45 var(--f-body);color:#BCC2CF;margin-top:-6px}

/* 80억 명 줄: 100칸 막대 */
.line100{display:flex;flex-direction:column;gap:6px}
.l100{position:relative;display:grid;grid-template-columns:repeat(100,1fr);gap:1px;height:26px}
.l100 i{border-radius:1.5px;opacity:.38}
.l100 i.me{opacity:1;box-shadow:0 0 10px #fff;background:#fff!important;transform:scaleY(1.35)}
.l100-k{display:flex;justify-content:space-between;font:600 11px/1 var(--f-body);color:var(--faint)}

.row-v small{display:block;font:600 10.5px/1.3 var(--f-body);color:var(--faint);letter-spacing:0}
.row.off .row-v{color:var(--faint);font:600 12.5px/1.3 var(--f-body)}

/* ---------- 다른 나라 카드 (이민 가챠 국기 카드와 같은 문법) ---------- */
.life{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.life-c:last-child:nth-child(odd){grid-column:1/-1}
.life-c{display:flex;flex-direction:column;gap:6px;padding:10px 11px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border);min-width:0}
.life-h{display:flex;align-items:center;gap:6px;font:600 12px/1.2 var(--f-body);color:var(--muted)}
.life-h span{font-size:15px}
.life-c b{font:800 14px/1.25 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.dots i{height:5px;border-radius:3px;background:var(--surface-3)}
.dots i.on{background:var(--gc,#FFC83D)}

/* ---------- 알림 · 바닥글 ---------- */
.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 .seg button{height:36px;font-size:13px}
.ch-list{display:flex;flex-direction:column}
.cb-k{display:grid;grid-template-columns:94px minmax(0,1fr) 40px 72px;gap:8px;padding:0 0 7px;border-bottom:1px solid var(--line);font:600 11px/1.2 var(--f-body);color:var(--faint)}
.cb-k span:nth-child(2){grid-column:span 2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-k span:last-child{text-align:right}
.cb{display:grid;grid-template-columns:94px minmax(0,1fr) 40px 72px;align-items:center;gap:8px;min-height:34px;cursor:pointer;border-radius:10px;outline:none}
.cb:hover .cb-n span,.cb:focus-visible .cb-n span{text-decoration:underline;text-underline-offset:3px}
.cb:focus-visible{box-shadow:inset 0 0 0 2px rgba(var(--fun-rgb),.7)}
.cb-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{position:relative;height:10px;border-radius:6px;background:var(--tint)}
.cb-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:6px;transform-origin:left center;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.ch.on .cb-bar i{transform:scaleX(1)}
.cb .grade{height:20px;min-width:0;width:40px;padding:0;font-size:11px;border-radius:6px}
.cb-v{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;white-space:nowrap}
.cb-v b{font:800 14px/1 var(--f-display);letter-spacing:-.02em}
.cb-v small{font:600 10px/1 var(--f-body);color:var(--faint)}
.cb.me{margin:2px -8px;padding:0 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}

/* ---------- 공유 이미지 시트(이민 가챠와 같은 값) ---------- */
.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}
.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-b .hint{margin:-4px 0 0}
.share-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-acts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.share-acts .btn{height:52px;padding:0 8px;font-size:14.5px;font-weight:700}

@media (prefers-reduced-motion:reduce){.cb-bar i{transition:none;transform:none}.nx-track i::after{animation:none}}

/* 나라 카드(2026-10-21 오너: 색만 칠한 큰 칸 말고 세계 카드처럼 한 장에): 나라 줄 · 등급 · 큰 숫자 · 100칸 줄 · 사실 두 개 · 생활 */
.cty{gap:12px}
.cty-place{display:flex;align-items:center;gap:10px;min-width:0}
.cty-flag{font-size:30px;line-height:1;flex:none}
.cty-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.cty-name b{font:800 19px/1.15 var(--f-display);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cty-name small{font:600 11.5px/1.3 var(--f-body);color:var(--muted)}
.cty-badge{margin-left:auto;flex:none;font:800 11px/1 var(--f-body);letter-spacing:.03em;padding:6px 8px;border-radius:9px;border:1px solid currentColor;background:rgba(5,7,11,.35)}
.cty-badge.is-home{color:rgb(var(--fun-rgb))}
.cty-big{font:700 17px/1.15 var(--f-body);color:#dfe3ea;margin-top:-2px}
.cty-big b{font:800 clamp(40px,12vw,56px)/1 var(--f-num);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;margin:0 3px}
.cty-facts{display:flex;flex-wrap:wrap;gap:6px}
.cty-facts span{padding:7px 10px;border-radius:10px;background:rgba(5,7,11,.38);border:1px solid rgba(255,255,255,.08);font:500 12.5px/1.3 var(--f-body);color:#cfd4de}
.cty-facts b{color:var(--text);font-weight:800}
.cty-life-h{font:700 12.5px/1.2 var(--f-body);color:rgb(var(--fun-rgb));margin-top:2px}
.cty-why{font:600 13px/1.45 var(--f-body);color:var(--soft-4);padding:0 2px}
.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)}
/* 소득으로 보기 / 자산으로 보기(2026-10-22): 입력 칸 위 전환 */
.ask .seg.basis{margin-bottom:2px}
.ask .seg.basis button{height:42px;font-size:14.5px}
.acts.two{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 뽑을 나라가 없을 때(자산 자료가 내 나라뿐) */

/* ---------- 공유(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)}
/* 첫 화면 공유 줄(오너 fix 2): 세계 카드의 티어 타일 · 세계 상위 % 바로 아래 */
.rc-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rc-share .btn{height:50px;padding:0 8px;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
/* 친구와 비교(fix 7): 공유 줄 밑 — 친구 · 나 두 칸 + 내 결과 보내기 */
.rc-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px;border-radius:16px;background:rgba(5,7,11,.38);border:1px solid rgba(255,255,255,.10)}
.rc-vs-k{grid-column:1/-1;font:800 12.5px/1.2 var(--f-body);color:rgb(var(--fun-rgb))}
.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 rgba(255,255,255,.10)}
.rc-vs-go{grid-column:1/-1;height:44px;font-size:14px;font-weight:700}
/* 공유 창: 카카오톡(한국) · 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)}}
@media (prefers-reduced-motion:reduce){.share-hold.flash{animation:none}}