/*
* next-bridge.css — **퍼블리싱 원본이 아니다.** Next 쪽 전역 CSS 와 design.css 사이를 잇는 다리다.
*
* design.css 는 관리자(`/mng`)와 섞이면 안 되므로 사용자 사이트 레이아웃에서만 `` 로 문다
* (`app/(site)/layout.tsx`). 그런데 루트 레이아웃이 들고 있는 `globals.css` 는 앱 전체에 깔리고,
* 아래 둘을 design.css 보다 **높은 명시도**로 잡고 있어서 그대로 두면 사이트 화면이 어긋난다.
*
* 1. `body { font-family: Outfit; background: #f9fafb; color: #344054 }` — 명시도는 같지만
* 번들 CSS 와 이 의 순서가 보장되지 않는다. `html body` 로 올려서 순서 싸움을 끝낸다.
* 2. `html.dark body { background: #101828 }` — 사용자 사이트는 **라이트 고정**이다
* (2026-08-31 사용자 확정). design.css 에는 다크 토큰이 아예 없어서(0건), 관리자가 `/mng`
* 에서 다크를 켜 둔 채로 넘어오면 배경만 검게 뜬다.
*
* design.css 자체는 손대지 않는다 — 원본(relaxrimm/dmonster_project_maxwell)이 단일 진실이고
* 고칠 일이 생기면 거기서 고쳐 rsync 로 당겨 온다 (docs/publishing/_이관_안내.md).
*/
html body {
font-family: var(--font-family-base);
font-size: var(--font-size-md);
color: var(--color-text-primary);
background: var(--color-bg-surface-default);
}
/*
* 🔴 **`body` 에 붙은 Tailwind 유틸이 위 규칙을 이긴다** (2026-09-02 발주사 지적 —
* *"폰트가 다르다"*).
*
* 루트 레이아웃이 `` 로 연다. Tailwind 가
* 그것을 `.font-outfit { font-family: Outfit, Pretendard, … }` 로 뽑는데, **클래스는
* 명시도 0,1,0** 이라 위의 `html body`(0,0,2)를 이긴다. 그래서 사용자 사이트가
* 퍼블리싱의 **Wanted Sans 가 아니라 Outfit** 으로 그려지고 있었다.
*
* Outfit 에는 **한글 글리프가 없어** 한글은 그다음 후보로 떨어진다 — `Pretendard` 는
* 이 프로젝트에 실려 있지 않으므로 결국 macOS 는 Apple SD Gothic Neo, Windows 는
* 맑은 고딕이 된다. **보는 사람마다 한글 폰트가 달라진다.**
*
* 자산이 빠진 것이 아니다 — `WantedSansVariable.woff2` 는 실려 있고 `@font-face` 도
* design.css 에 있다(1.2MB · 200 응답 실측). 순전히 명시도 문제다.
*
* ⚠️ `layout.tsx` 에서 `font-outfit` 을 떼지 않는다. **관리자(`/mng`)와 선생님 화면은
* Outfit 이 맞다** — 목업이 그렇다. 뗄 수 있는 것은 사용자 사이트뿐인데, 그쪽만
* 걸러 내는 조건을 루트 레이아웃에 넣는 것보다 이 파일이 되받는 편이 낫다.
* 이 파일은 **사용자 사이트 레이아웃에서만** 물리기 때문이다.
*/
html body.font-outfit {
font-family: var(--font-family-base);
}
/* 이중 클래스(html.dark.dark)는 globals.css 의 `html.dark body` 와 **명시도를 벌리기 위함**이다.
같은 명시도면 로드 순서로 이기고 지는데, 번들 CSS 와 이 의 순서는 보장되지 않는다.
design.css 가 Tailwind 의 .container 를 `.container.container` 로 막아 둔 것과 같은 수법이다. 제거 금지 */
html.dark.dark body {
color: var(--color-text-primary);
background: var(--color-bg-surface-default);
}
/*
* 아직 안 만든 화면으로 가는 자리 — 회원가입 · 아이디/비밀번호 찾기 · 수강 상담 · GNB 6메뉴.
* 「비활성 모양만」으로 두기로 했다 (2026-08-31 사용자 확정). 링크가 아니라 이라
* 클릭이 안 되고, 화면을 옮길 때마다 로 바꿔 끼우면 된다. 404 를 만들지 않는 게 요점.
*/
[data-todo] {
cursor: default;
}
/*
* 로그인 여부가 확정되기 전의 헤더 — **두 벌을 다 실어 두고 여기서 고른다.**
*
* 서버가 보내는 HTML 은 로그인 여부를 모른다(캐시되어 누구에게나 같다). 첫 페인트 전에
* 도는 인라인 스크립트(`app/layout.tsx` 의 `sessionHintScript`)가 ``
* 을 달아 두면, 브라우저는 **그리기도 전에** 맞는 쪽만 남긴다.
*
* ⚠️ `display: contents` 라야 `.hdr_act` 의 flex 배치가 그대로 산다 — 감싸는 상자가
* 끼어들면 간격이 틀어진다.
* ⚠️ `.hdr_act.is_user` 는 `gap` 하나만 바꾼다(design.css 2417). 확정 전에는 그 클래스를
* 못 붙이므로 같은 값을 여기서 준다. 🚫 design.css 를 고치지 말 것 — 원본이 단일 진실이다.
*/
/*
* 🔴 **규칙은 여기 없다 — `app/layout.tsx` 의 인라인 `