/* share.dev cloud 브랜드 — 서체와 워드마크.
 *
 * **얼굴을 정하는 파일은 하나다.** 화면마다 @font-face 와 워드마크 마크업을 적어
 * 두면 갈라지고, 갈라진 것은 한쪽만 고쳐진다. 색은 여기서 정하지 않는다 —
 * 화면마다 밝기·대비가 달라서, 각 화면의 `--fg`·`--dim`·`--accent` 를 빌려 쓴다.
 *
 * 서체는 `sdc-api` 가 `/app/fonts/` 로 준다(fonts/README.md). 외부 CDN 은 CSP 가
 * 막는다.
 */

/* **스크롤바 자리를 늘 스크롤바가 차지한다.**
 *
 * 문제는 둘이었다. ① 목록이 한 화면을 넘느냐에 따라 스크롤바가 생겼다 사라지면서
 * 본문 폭이 그만큼 움직여 글자가 좌우로 튀었다. ② `scrollbar-gutter: stable` 로
 * 자리를 비워 두었더니, 머리말·탭이 **화면 끝까지 배경을 칠하는 띠**라서 그 비운
 * 자리만 배경이 안 칠해져 **빈 띠**로 보였다.
 *
 * `overflow-y: scroll` 은 둘 다 없앤다: 스크롤할 것이 없어도 스크롤바를 **그린다.**
 * 폭이 늘 같아서 안 튀고, 그 자리는 빈 곳이 아니라 스크롤바다.
 *
 * 겹쳐 뜨는 스크롤바(맥 기본)에서는 애초에 자리를 안 뺏으므로 아무 일도 안 
 * 일어난다 — `scrollbar-gutter` 는 그런 환경에서도 자리를 비워서 **없던 띠를
 * 만든다.** 그래서 이쪽을 쓴다. */
html { overflow-y: scroll; }

/* `swap` 이다. 173KB 를 기다리느라 흰 화면을 보여 주지 않는다 — 시스템 글꼴로 먼저
   읽히고 바뀐다. 초대 링크를 처음 여는 사람에게는 글자가 늦게 뜨는 것이 더 나쁘다. */
@font-face {
  font-family: 'SUIT'; font-weight: 400; font-style: normal; font-display: swap;
  src: url(/app/fonts/suit-400-v1.woff2) format('woff2');
}
@font-face {
  font-family: 'SUIT'; font-weight: 600; font-style: normal; font-display: swap;
  src: url(/app/fonts/suit-600-v1.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Code Pro'; font-weight: 400; font-style: normal; font-display: swap;
  src: url(/app/fonts/source-code-pro-400-v1.woff2) format('woff2');
}

:root {
  --font-ui: 'SUIT', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 워드마크 — SHARE.DEV Cloud.
 *
 * **모노로 짠다**(2026-08-09 결정). 이 제품은 화면의 절반이 IP·CIDR·토큰이고
 * 가입도 콘솔에서 이뤄진다 — 워드마크가 같은 얼굴이면 "인프라 다루는 곳" 이
 * 한 번에 서고, 인트로에서 콘솔에 찍히는 로고와 로고가 따로 놀지 않는다.
 *
 * 도메인은 대문자로 묶어 로고처럼 굳히고, `Cloud` 는 설명어라 물러선다. 점 하나만
 * 강조색이다. **대문자는 자간을 벌린다** — 대문자는 글자 사이 여백이 원래 좁아서
 * 그냥 두면 뭉쳐 보인다.
 *
 * 선택자가 둘인 것은 마크업이 두 가지이기 때문이다: 약관 같은 정적 화면은
 * `<b>…<i>.</i>…</b><span>` 을 쓰고, 콘솔은 한 글자씩 찍으면서 점만 `<i class="dot">`
 * 로 넣는다. **모양은 한 곳에서 나온다.**
 */
.wordmark {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .85rem;
  color: var(--dim, #6b727d);
  font-weight: 400;
}
.wordmark b { font-weight: 600; color: var(--fg, #111418); letter-spacing: .12em; }
.wordmark b i, .wordmark .dot { font-style: normal; color: var(--accent, #0b5fff); }
.wordmark span { letter-spacing: .12em; margin-left: .5em; }