/* static/css/tokens.css — 이 서비스의 **모든** 화면이 공유하는 가장 아래 층. 디자인 토큰(팔레트)·폰트·전역 리셋만 담는다. 컴포넌트는 하나도 없다. 왜 shell.css 와 갈라져 있나 — 운영자 콘솔(admin.html)은 팔레트는 공유해야 하지만 껍데기는 공유하면 안 된다. admin 은 자체 `.header`(sticky 는 바깥 .topbar 가 맡는다)· `.modal`(작은 확인 대화상자)·`.toast`(하단 고정)를 쓰는데, shell.css 의 같은 이름 규칙이 함께 걸리면 admin 이 재정의하지 않은 속성만 섞여 들어가 깨진다(예: shell 의 top:50% 와 admin 의 bottom:28px 가 동시에 걸린 토스트). 그래서 토큰만 이 파일로 내렸다. 로드 조합 — 어느 페이지든 tokens.css 를 **가장 먼저** 깐다: index·upload·complete·browse·mypages : tokens + shell + app + pages/<이름> help·mcp : tokens + shell + doc + pages/<이름> admin : tokens + pages/admin 팔레트의 소유자는 이 파일 하나다. 예전에는 app.css·help.html·mcp.html·admin.html 네 곳에 복제돼 있었고 실제로 어긋난 자리가 생겼다(help/mcp 의 .legal-mail 이 --ink/#fff 로 복제돼 다크 테마에서 흰 배경에 흰 글자가 됐다). */ /* Pretendard 가변폰트(자체 호스팅) — 라틴+한글을 한 폰트로 통일. 외부 CDN 의존 없음. */ @font-face{ font-family:'Pretendard'; src:url('/fonts/PretendardVariable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; } /* =========================================================================== Uber 스타일 흑백 디자인 시스템 — 화이트 캔버스 + 잉크 블랙 듀엣. 두 번째 강조색 없음 · pill 999px 시그니처 · 카드 16px · Pretendard(라틴+한글). 테마(라이트 Paper / 다크 Studio)는 로 갈린다 — 팔레트 값의 소유자는 JS 가 아니라 이 파일이고, JS 는 어느 쪽을 쓸지 속성만 지정한다. 그래야 각 페이지 의 인라인 스니펫이 첫 페인트 전에 속성을 stamp 하는 것만으로 흰 화면 깜빡임이 사라진다. ========================================================================= */ :root{ color-scheme:light; --font:'Pretendard',system-ui,-apple-system,sans-serif; --bg:#FFFFFF; --panel:#FFFFFF; --panel2:#F3F3F3; --ink:#000000; --muted:#5E5E5E; --mute:#AFAFAF; --line:rgba(0,0,0,.12); --softline:rgba(0,0,0,.07); --lineStrong:rgba(0,0,0,.22); --shadow:rgba(0,0,0,.16) 0 4px 16px 0; --accent:#000000; --accentSoft:#EFEFEF; --accentInk:#FFFFFF; --danger:#d33; --heroSize:clamp(28px,3.4vw,44px); } /* 다크(Studio) — 같은 토큰의 폴라리티만 뒤집는다(잉크=흰색, 캔버스=검정). 컴포넌트 규칙은 전부 토큰만 참조하므로 이 블록 하나로 화면 전체가 뒤집힌다. 토큰을 안 쓰고 색을 직접 박은 자리(항상 어두운 푸터 밴드 등)만 개별 보정한다. --danger 는 텍스트·보더용이라 어두운 배경에서 읽히게 밝히고, 채움 버튼(운영자 콘솔의 .btn-danger)은 두 테마 공통으로 진한 빨강을 유지한다(밝힌 빨강 위 흰 글자는 대비가 무너진다). */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#000000; --panel:#0B0B0B; --panel2:#161616; --ink:#FFFFFF; --muted:#AFAFAF; --mute:#6E6E6E; --line:rgba(255,255,255,.16); --softline:rgba(255,255,255,.08); --lineStrong:rgba(255,255,255,.30); --shadow:rgba(0,0,0,.6) 0 4px 16px 0; --accent:#FFFFFF; --accentSoft:rgba(255,255,255,.12); --accentInk:#000000; --danger:#ff7a7a; } /* ---- 전역 리셋 ---- */ *{box-sizing:border-box} /* word-break:keep-all — 한국어가 좁은 폭에서 단어 중간에 꺾이지 않게 전역 적용. overflow-wrap 은 긴 URL·영단어가 keep-all 로 컨테이너를 넘치는 것을 방어한다. */ body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink); font-family:var(--font);-webkit-font-smoothing:antialiased; word-break:keep-all;overflow-wrap:break-word} ::selection{background:rgba(0,0,0,.12)} :root[data-theme="dark"] ::selection{background:rgba(255,255,255,.22)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:8px;border:3px solid transparent;background-clip:content-box} :root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24)} a{color:var(--accent)} button{font-family:inherit} input::placeholder,textarea::placeholder{color:var(--mute)} /* 한/영 프리렌더 토글 — 활성 언어만 남기고 반대 언어 블록/라벨을 숨긴다. 보이는 쪽은 기본 display 를 그대로 두고(오버라이드 없음), data-lang 미설정(무JS)이면 첫 규칙만 걸려 한국어가 뜬다. 프리렌더로 두 언어를 다 싣는 페이지(help·mcp)가 쓴다. */ html:not([data-lang="en"]) .i18n[lang="en"]{display:none} html[data-lang="en"] .i18n[lang="ko"]{display:none}