/* 2026-10-04 Claude: 모든 화면 공통 — 버튼 색 변수와 한글 크기감 보정.
   버튼 색: 감독 "버튼 블랙 마음에드네 버튼은 다 블랙으로 가자", "나중에 설정에서 버튼 색 바꿀수 있게 해주자".
   채운 버튼은 모두 --pg-btn-bg / --pg-btn-fg 를 쓴다(어두운 화면에서는 밝은 회색 버튼에 어두운 글자). 나중에 설정에서 이 두 값만 바꾸면 된다. */
:root{--pg-btn-bg:#1f2329;--pg-btn-bg-hover:#2c3139;--pg-btn-fg:#ffffff;--pg-accent:#1f2329}
body.dark{--pg-btn-bg:#e8ecf3;--pg-btn-bg-hover:#ffffff;--pg-btn-fg:#151a24;--pg-accent:#e8ecf3}
/* 2026-10-06 Claude (감독 B5 '설정에서 버튼 색 바꿀수 있게'): 설정 › 버튼 색. html[data-btn] 하나로 채운 버튼·강조색이 함께 바뀐다(밝은·어두운 화면 같은 색, 흰 글자 대비 5:1 이상).
   기본(검정)은 위 값 그대로 — 어두운 화면에서는 밝은 회색 버튼. 값은 계정 키 playground-button-color(cloud-store.js가 첫 그림 전에 붙임). */
html[data-btn="sea"] :is(body,body.dark){--pg-btn-bg:#1d6068;--pg-btn-bg-hover:#174e55;--pg-btn-fg:#ffffff;--pg-accent:#1d6068}
html[data-btn="blue"] :is(body,body.dark){--pg-btn-bg:#2f49b8;--pg-btn-bg-hover:#263c97;--pg-btn-fg:#ffffff;--pg-accent:#2f49b8}
html[data-btn="purple"] :is(body,body.dark){--pg-btn-bg:#6a3fc0;--pg-btn-bg-hover:#57339e;--pg-btn-fg:#ffffff;--pg-accent:#6a3fc0}
html[data-btn="green"] :is(body,body.dark){--pg-btn-bg:#1f7a4d;--pg-btn-bg-hover:#19643f;--pg-btn-fg:#ffffff;--pg-accent:#1f7a4d}
html[data-btn="orange"] :is(body,body.dark){--pg-btn-bg:#c2410c;--pg-btn-bg-hover:#a1360a;--pg-btn-fg:#ffffff;--pg-accent:#c2410c}

/* 한글 크기감 보정(감독 "왜 영어랑 한글이랑 사이즈감이 다른거 같지?").
   영어는 Arial, 한글은 기기의 한글 글꼴로 그려지는데, 같은 글자 크기여도 한글은 네모 칸을 꽉 채우는 모양이라 약 10% 크고 무거워 보인다.
   한글 글자 범위에만 기기 한글 글꼴을 92%로 줄인 "PG Hangul" 을 만들고, 글꼴 묶음마다 Arial(또는 시스템 글꼴) 바로 뒤에 둔다.
   영문·숫자는 그대로 Arial. 기기에 아래 글꼴이 하나도 없으면 이 칸은 건너뛰어 예전처럼 시스템 글꼴이 쓰인다. */
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:100 300;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-Light"),local("Apple SD Gothic Neo Light"),local("Malgun Gothic Semilight"),local("MalgunGothic-Semilight"),local("Noto Sans KR Light"),local("NotoSansKR-Light"),local("Noto Sans CJK KR Light"),local("NotoSansCJKkr-Light")}
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:400;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-Regular"),local("Apple SD Gothic Neo Regular"),local("Malgun Gothic"),local("MalgunGothic"),local("MalgunGothicRegular"),local("Noto Sans KR"),local("NotoSansKR-Regular"),local("Noto Sans CJK KR"),local("NotoSansCJKkr-Regular")}
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:500;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-Medium"),local("Apple SD Gothic Neo Medium"),local("Noto Sans KR Medium"),local("NotoSansKR-Medium"),local("Noto Sans CJK KR Medium"),local("NotoSansCJKkr-Medium"),local("Malgun Gothic"),local("MalgunGothic"),local("MalgunGothicRegular")}
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:600;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-SemiBold"),local("Apple SD Gothic Neo SemiBold"),local("Noto Sans KR SemiBold"),local("NotoSansKR-SemiBold"),local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("MalgunGothic-Bold"),local("Noto Sans CJK KR Bold"),local("NotoSansCJKkr-Bold")}
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:700;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-Bold"),local("Apple SD Gothic Neo Bold"),local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("MalgunGothic-Bold"),local("Noto Sans KR Bold"),local("NotoSansKR-Bold"),local("Noto Sans CJK KR Bold"),local("NotoSansCJKkr-Bold")}
@font-face{font-family:"PG Hangul";font-style:normal;font-weight:800 900;size-adjust:92%;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF;
 src:local("AppleSDGothicNeo-ExtraBold"),local("Apple SD Gothic Neo ExtraBold"),local("AppleSDGothicNeo-Heavy"),local("Noto Sans KR Black"),local("NotoSansKR-Black"),local("Noto Sans CJK KR Black"),local("NotoSansCJKkr-Black"),local("Malgun Gothic Bold"),local("MalgunGothicBold")}
/* 2026-10-05 Claude (감독 '메뉴 타이틀과 서브타이틀 기타 텍스트의 위계를 세워줘'): one ladder of text for every screen —
   screen (menu) title 17/700 (the phone's top bar size) · identity/hero 24/700 · section title 15/700 · body 14/400 · description and meta 12.5/400
   in the muted colour. New screens use these instead of their own sizes. */
:root{--pg-t-screen:17px;--pg-t-hero:24px;--pg-t-section:15px;--pg-t-body:14px;--pg-t-meta:12.5px;--pg-ink:#1d2433;--pg-muted:#6b7385}
body.dark{--pg-ink:#e7ecf5;--pg-muted:#9aa6ba}

/* 2026-10-08 Claude (피드백 #9 "맨위 텍스트 스케일이 자연스럽지 않은듯"): the logo, language, theme and message buttons of the top bar keep their own
   size — the text-size setting (120% on computers) is for reading text, and scaling the bar made the logo oversized next to small buttons. */
header.topbar,header.topbar *,.brand,.brand *{--pg-ts:1}