/* G-Coin 공용 CSS — 단추(.gc-pay) · 딱지(.gc-tag) · 남은수(.남음) * * 🔴 왜 «따로» 파일인가: 이 셋이 서는 화면이 하나가 아니다. * 포털 본문(styles.css 를 싣는다)과 리무버 둘째 창(image-edit.html · 홀로 서는 창이라 안 싣는다). * 한쪽에 베끼면 사본이 둘이 되고 정본이 움직일 때 «한쪽만» 고쳐진다. * ⇒ 두 화면이 이 «한 파일»을 link 한다. 사본 0개. * * 정본: ~/globalroad-notes/정본-G코인-유료단추-공용-20260902.html * 고침이력: ~/globalroad-notes/정본-G코인단추-고침이력.md ← 사본이 낡았나를 여기서 센다 * ⛔ 여기 값을 손으로 고치지 마라. 정본을 고치고 «통째로» 다시 떠라. * ⚠️ 이 파일은 --tx · --tx2 · --tx3 · --read 를 쓴다. 그 이름이 없는 창은 «다리»를 놓아야 한다 * (image-edit.html 이 그렇게 한다 — 이름을 이름에 잇는다. 다리에 «값»을 적으면 그 순간 사본이다). */ /* ══════════════════════════════════════════════════════════════════════════ G-Coin 유료 단추 — 앱 «공용» 정본 (J.J 확정 2026-09-02) 정본 파일: ~/globalroad-notes/정본-G코인-유료단추-공용-20260902.html ⏱ 벤 시각: 2026-09-02 17:58 (딱지 .gc-tag 까지 정본 «안»으로 들어온 판) 📒 정본 고침 이력: ~/globalroad-notes/정본-G코인단추-고침이력.md — 마지막 줄이 위 시각보다 새 것이면 다시 뜬다 🔴 정본이 이 시각보다 새 것이면 «손으로 깁지 말고 통째로 다시 떠라». 오늘 하루에만 정본이 여섯 번 움직였다 — 사본은 «벤 순간»의 값이다. ⛔ 다시 뜰 땐 «이 덩어리 하나»만 갈아 끼운다. gc-* 를 덩어리 밖에 두지 마라 — 두 벌이 되면 뒤엣것이 이겨서 앞엣것을 고쳐도 화면이 안 바뀐다(시험이 그걸 센다). ⛔ 여기서 색·모양·기울기·빛·크기를 «고치지 마라». 이 덩어리는 정본을 통째로 베낀 것이고, 정본이 움직이면 손으로 깁지 말고 **통째로 다시 베낀다** (손으로 기우면 한 벌만 낡는다 — 실측 2026-09-02: 「작게」가 34px→32px 로 바뀐 걸 사본이 두 시간 동안 몰랐다). ⛔ 새 코인색·새 알약을 만들지 마라. 화면마다 다르면 손님이 «다른 돈»으로 읽는다. ── 이 단추를 «어디에» 세우나 ───────────────────────────────────────────── 🔴 알약은 «누르면 진짜로 값이 나가는» 자리에만 선다. 값이 안 나가는 손잡이(물음으로 가는 길)엔 아래 .gc-tag «딱지»를 쓴다. 알약을 길목에 세우면 「누르면 나간다」는 거짓말이 되고, 이웃 손잡이보다 커서 내용을 가린다. · 기본(42px) — 창·판의 주 행동 · .작게(32px) — 카드 «한 줄» 안에 곁으로 설 때 ⛔ 그림을 CSS 아이콘·이모지·임시 SVG 로 바꾸지 마라 — /brand/g-coin-*.png 가 정본 자산이다. 🔴 그림은 «32» 를 쓴다. 그리는 자리가 16px(작게 14px)이라 2배 화면까지 32 로 덮인다. 더 큰 벌을 쓰면 눈에 보이는 것은 그대로인데 바이트만 는다 (64=10.1KB · 32=4.5KB, 실측). ⛔ 정본 파일은 그림을 «박아» 둔다 — 시안이 «혼자 열려야» 해서다. 앱에선 자산을 가리켜라. 다시 베낄 때도 그 한 줄만은 /brand/g-coin-32.png 로 바꿔라 (중앙 M · 나 둘 다 실측 2026-09-02). ── 다크·라이트 (J.J 확정 2026-09-02: 라이트는 «밝은 금속») ───────────────── 🔴 이 앱에서 이 선택자가 도는 까닭을 적어 둔다 — 안 적으면 다음 사람이 못 믿고 고친다. shell-theme.js 가 «첫 그림 전»에 `document.documentElement.dataset.theme` 을 늘 채운다 (기본 dark). 그래서 `:root:not([data-theme="dark"])` 는 라이트일 때만 참이다. ⚠️ 다만 껍데기 셋(기둥·맨 위 띠·홈)은 «자기 요소»에 data-theme="dark" 를 든다. 그 안에 이 단추를 세우면 root 가 라이트일 때 «밝은 금속»이 어두운 판 위에 선다. 지금 이 단추가 서는 곳은 본문(편집 화면)뿐이라 안 걸린다 — 껍데기에 세울 일이 생기면 그때 «요소 판»까지 보는 선택자를 정본에 더해야 한다(내가 정하지 않는다). ══════════════════════════════════════════════════════════════════════════ */ .gc-pay{ display:inline-flex; align-items:center; height:42px; padding:0 15px 0 13px; border-radius:9999px; cursor:pointer; font:inherit; /* ① 위→아래 차콜 기울기 — ⛔ 한 색으로 칠하지 마라. 평면 알약이 된다 */ background:linear-gradient(180deg,#24262B 0%,#1A1C20 45%,#0E0F12 100%); /* ② 정지된 실버 외곽선 — 완전 흰색이 아니다 */ border:1px solid rgba(205,210,218,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), /* ③ 윗면의 얇은 흰빛 */ 0 0 0 1px rgba(255,255,255,.03), /* ④ 아주 약한 외부 실버 빛 */ 0 0 12px rgba(210,218,230,.10), /* 테두리 바깥 3~10px 에서만 */ 0 8px 18px rgba(0,0,0,.34), /* ⑤ 아래쪽 검은 그림자 */ 0 2px 5px rgba(0,0,0,.28); transition:background .18s,border-color .18s,box-shadow .18s,transform .09s; } .gc-pay .gc-cost{ display:inline-flex; align-items:center; gap:6.5px } /* ⛔ CSS 아이콘·임시 SVG·단색·이모지로 바꾸지 마라 — 정본 자산이다 */ .gc-pay .gc-ico{ width:16px; height:16px; flex:none; border-radius:50%; background:url("/brand/g-coin-32.png") center/contain no-repeat } /* 금색은 «값»에만. 금색=비용 · 흰색=내가 할 행동 */ .gc-pay .gc-n{ font-size:13.5px; font-weight:800; color:#F4C84A; font-variant-numeric:tabular-nums } /* 바깥 테두리보다 한 단계 어둡게 — 밝으면 단추가 둘로 갈려 보인다 */ .gc-pay .gc-div{ width:1px; height:21px; flex:none; margin:0 12px; background:rgba(190,195,204,.40) } .gc-pay .gc-do{ font-size:13.5px; font-weight:700; color:#F3F4F6; white-space:nowrap } /* ══ 라이트 벌 — ㉡ 밝은 금속 (J.J 확정 2026-09-02) ═════════════════════════════ 🔴 다크판이 말하던 것은 «어둡다»가 아니라 **«금속이고 무겁다»** 다. 라이트에서 그 뜻을 지키려면 어둠이 아니라 «밝은 금속 + 진짜 그림자»로 옮긴다. (같은 규율을 코인 아이콘 빛에서도 밟았다: 규칙이 뜻한 건 밝기가 아니라 «바탕에서 한 걸음 떨어진다») ⛔ 코인·값·세로선·글자 위치·크기(42/32)는 «한 개도» 안 바뀐다. 갈리는 것은 세 줄뿐 — 바탕 · 테두리 · 글자색. 그래서 «단추 두 벌»이 아니라 «같은 단추의 두 테마»다. ⛔ 흰 알약 + 금 테두리로 가지 마라 — 「돈 나가는 행동」치고 너무 가벼워 실수로 누르기 쉽다(㉢ 기각). ⛔ 라이트에서 검은 알약을 그대로 두지 마라 — 옆 취소 단추만 테마를 따라가 둘이 다른 세계가 된다(㉠ 기각). ⚠️ 값 글자는 #F4C84A 가 아니라 #845B00 이다. 흰 바탕에서 밝은 금은 «안 읽힌다». 🔴 2026-09-05 J.J 확정 — «한 톤 진하게». #8F6300 → #845B00. 결(H 41.5° · S 100%)은 그대로 두고 «밝기만» 28.0% → 25.9% 로 내렸다 — 새 색이 아니라 같은 금이다. ⛔ 「두 톤」(#664700)까지 가지 않는다 — J.J 가 «과하게 진하게는 말라»고 못박았다. 잰 값(가장 어두운 바탕 기준): 알약 아랫면 #E4E7EC 에서 4.29 → **4.87**. ⚠️ 아래 두 선택자는 tokens.css 와 «같은 모양»이다: 손으로 고른 라이트 + 시스템 라이트. 다크는 이 파일의 기본이라 따로 안 적는다. ═════════════════════════════════ */ [data-theme="light"] .gc-pay, :root:not([data-theme="dark"]) .gc-pay{ background:linear-gradient(180deg,#FEFEFF 0%,#F4F5F7 45%,#E4E7EC 100%); border:1px solid #C7CCD4; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), /* 윗면 흰빛 — 다크의 ③ 과 같은 자리 */ inset 0 -1px 0 rgba(0,0,0,.05), /* 아랫면 한 줄 — 금속의 두께 */ 0 0 0 1px rgba(0,0,0,.02), 0 6px 14px rgba(16,24,40,.13), /* 다크의 ⑤ 와 같은 자리 — 흰 바탕용으로 옅게 */ 0 2px 4px rgba(16,24,40,.10); } [data-theme="light"] .gc-pay .gc-n, :root:not([data-theme="dark"]) .gc-pay .gc-n{ color:#845B00 } [data-theme="light"] .gc-pay .gc-do, :root:not([data-theme="dark"]) .gc-pay .gc-do{ color:#16181D } [data-theme="light"] .gc-pay .gc-div, :root:not([data-theme="dark"]) .gc-pay .gc-div{ background:rgba(80,90,105,.30) } [data-theme="light"] .gc-pay:hover, :root:not([data-theme="dark"]) .gc-pay:hover{ background:linear-gradient(180deg,#fff 0%,#F7F8FA 45%,#E9ECF1 100%); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(16,24,40,.16), 0 2px 5px rgba(16,24,40,.12); } [data-theme="light"] .gc-pay:active, :root:not([data-theme="dark"]) .gc-pay:active{ background:linear-gradient(180deg,#EFF1F4 0%,#E6E9EE 100%); box-shadow:inset 0 1px 3px rgba(16,24,40,.16), 0 1px 2px rgba(16,24,40,.10); } /* ══ 곁딸린 것: 값 «딱지» .gc-tag — 알약이 아니라 «알림»이다 ═══════════════════ 2026-09-02 소싱18 이 만들어 라이브에 섰다. 알약과 «같은 줄»에 서므로 정본에 같이 둔다. ⛔ 언제 딱지고 언제 알약인가: 알약 .gc-pay «누르면 값이 나가는» 단추 (진짜 나가는 물음) 딱지 .gc-tag 값을 «알리기만» 하는 표시 · 안 눌린다 (물음으로 가는 길목의 손잡이) 길목에 알약을 세우면 「누르면 나간다」는 거짓말이 되고, 이웃 손잡이보다 커서 내용을 가린다. ⚠️ 금색이 «둘이면» 손님 눈에 «두 가지 돈»이 된다 — 딱지는 알약과 «같은 금»을 쓴다. 라이트에서 #F4C84A 는 흰 바탕 대비 1.59:1 로 안 읽힌다(11.5px 잣대 4.5:1). 🔴 처음 값 #9A6B00 은 «흰 바탕에서만» 4.69 였고, 실제로 쓰이는 가장 어두운 라이트 바탕 (#F1F2F4)에서는 4.19 로 «미달»이었다. 잣대는 «가장 어두운 바탕»이다. 🔴 2026-09-05 J.J 확정 «한 톤 진하게» — #8F6300 → **#845B00** (알약과 «같은 금»을 그대로 쓴다). 딱지가 서는 바탕에서 잰 값: 흰 6.04 · #F7F8F9 5.68 · #F1F2F4 5.39 (전엔 5.31 · 5.00 · 4.74). ⛔ 알약과 딱지를 «다른 금»으로 가르지 마라 — 손님 눈에 「두 가지 돈」이 된다. ⚠️ 딱지에도 «가까운 판» 규칙이 그대로 걸린다 — 아래 세 줄이 한 벌이다. 하나만 베끼지 마라. */ .gc-tag{ display:inline-flex; align-items:center; gap:4px; flex:none } .gc-tag .gc-c{ width:13px; height:13px; flex:none; border-radius:50%; background:url("/brand/g-coin-32.png") center/contain no-repeat } .gc-tag .gc-n{ font-size:11.5px; font-weight:800; color:#F4C84A; font-variant-numeric:tabular-nums } [data-theme="light"] .gc-tag .gc-n, :root:not([data-theme="dark"]) .gc-tag .gc-n{ color:#845B00 } :root [data-theme="dark"] .gc-tag .gc-n{ color:#F4C84A } /* ══ 🔴 «가까운 판»이 이긴다 — 어두운 판 «안»에 서면 다시 어두운 알약 ═════════════ 이 앱의 껍데기 셋(기둥 · 맨 위 띠 · 홈)은 «자기 요소»에 data-theme="dark" 를 들고 있다 (index.html:77 `