/* ═══ 계정 · 설정 판 — 이 화면 하나만 쓰는 규칙 ══════════════════════════════ * 지침 : https://app.notion.com/p/3d4ecd7b030c80ca8104c9cfb4459ee2 (J.J 2026-09-13) * * ⛔ 색을 여기서 «정하지» 않는다 — 전부 이미 있는 이름이다. * 카드·글자 : styles.css 의 --muted · --border 상태 칩 : tokens.css 의 .chip6 한 벌 * 고정폭 : shell.css 의 --gr-mono * ⛔ styles.css 에 넣지 않았다 — 그 파일은 레인 여럿이 같이 만지는 377KB 짜리라, * 한 화면만 쓰는 규칙을 거기 섞으면 다음 사람이 «누구 것인지» 못 가른다. * ⚠️ 이름 앞을 전부 `gr-acct-` 로 뗀다 — 흔한 이름은 이 저장소에서 이미 여러 번 겹쳤다. * 🔴 2026-09-13 실측 — 처음엔 `ac-` 로 뗐다가 «곧바로 밟았다». styles.css:1716 에 이미 * `.ac-card`(승인 경고 카드)가 있어서, 내 카드에 금색 왼쪽 선과 다른 여백이 붙었다. * 오류는 0줄이고 «화면만» 달랐다. ⇒ 접두어를 겹치지 않는 것으로 바꿨고, * tests/test-account.js 가 「내 이름이 공용 CSS 에 이미 있나」를 이제 기계로 센다. * ⛔ 접두어를 짧게 줄이지 마라. 겹치면 지는 쪽은 «늘» 나중에 실리는 이 파일이 아니라 * 특정성이 더 센 쪽이고, 그건 파일을 봐서는 안 보인다. * ═══════════════════════════════════════════════════════════════════════════ */ /* 카드 사이 간격 — 판 안의 다른 화면(사용량)이 쓰는 리듬과 같게 */ [data-pane="account"] .gr-acct-card + .gr-acct-card { margin-top: 16px; } [data-pane="account"] .gr-acct-card h2 { margin: 0 0 14px; font-size: 17px; } /* 한 줄 = 이름 + 값. 🔴 좁은 화면에서는 «위아래»로 쌓는다 — 긴 이메일·긴 .myshopify 주소가 한 줄에 들어가려다 가로 스크롤을 만들던 자리다. */ [data-pane="account"] .gr-acct-row { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); } [data-pane="account"] .gr-acct-row:first-of-type { border-top: 0; padding-top: 0; } [data-pane="account"] .gr-acct-k { flex: none; width: 118px; font-size: 13px; color: var(--muted); } [data-pane="account"] .gr-acct-v { font-size: 14.5px; font-weight: 600; min-width: 0; } /* 🔴 긴 값은 «끊어서» 넘긴다. 안 끊으면 판이 옆으로 늘어난다(모바일 가로 스크롤). */ [data-pane="account"] .gr-acct-long { overflow-wrap: anywhere; word-break: break-word; } [data-pane="account"] .gr-acct-mono { font-family: var(--gr-mono); font-weight: 500; font-size: 13.5px; } /* 아직 못 읽은 값 · 없는 값 — 굵게 세우지 않는다. 「값이 있다」로 안 읽히게 */ [data-pane="account"] .gr-acct-대기, [data-pane="account"] .gr-acct-빈값 { color: var(--muted); font-weight: 500; } [data-pane="account"] .gr-acct-곁 { margin: 10px 0 0; } /* 🔄 10-21 통합 메뉴 — 계산대에서 옮겨 온 «연결된 스토어» 한 줄: 점 + 스토어 + 상태 글(billing.html .store/.dot 꼴 · 색 이름은 tokens.css 것) */ [data-pane="account"] .gr-acct-매장 { display: inline-flex; align-items: center; gap: 10px; } [data-pane="account"] .gr-acct-점 { width: 7px; height: 7px; border-radius: 50%; background: var(--done); flex: none; } [data-pane="account"] .gr-acct-점.gr-acct-꺼짐 { background: var(--muted); } [data-pane="account"] .gr-acct-매장상태 { color: var(--muted); font-size: 13px; font-weight: 500; } /* 🆕 10-16 단추는 «오른쪽 정렬»이 기본(J.J 10/16 3fbecd7b…dd83 · 특별한 까닭이 없으면 무조건). 줄바꿈돼도 오른쪽에 붙는다. */ [data-pane="account"] .gr-acct-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; } /* 도움말은 «진짜 링크»다(). styles.css 의 button.ghost 는 요소로 묶여 있어 안 걸린다 — 그래서 같은 모양을 이 한 줄로 맞춘다. ⛔