/* ========================================================================== Pibo UI Kit — openpibo-os.pibo / openpibo-os.pibrain 공용 -------------------------------------------------------------------------- 빌드 없음. 한 줄로 쓴다. 기존 노랑 분위기를 그대로 유지하되, '노랑을 아껴 써서' 강조가 살아나게 한 것이 이 키트의 전부다. 원본은 design/pibo-ui.css 하나뿐이다. 각 앱의 static/ 으로는 design/sync.sh 가 복사한다. static/ 쪽을 직접 고치지 말 것. ========================================================================== */ /* ── 글꼴: Pretendard (SIL OFL 1.1, fonts/LICENSE.txt) ───────────────────── v2 글꼴 스택 맨 앞이 "Pretendard" 인데 파일을 안 싣고 있어서, 학교 윈도 노트북에서는 맑은 고딕·Arial 로 떨어졌다. 파이보가 직접 보낸다(인터넷 불필요). 원본 배포판의 KS X 1001 subset 을 **고치지 않고** 그대로 쓴다 — 우리가 subset 을 새로 만들면 OFL 의 Reserved Font Name 때문에 이름을 Pretendard 로 둘 수 없다. 파일은 두 굵기(보통 Regular 400 · 굵게 Bold 700)만 싣는다(260929). CSS 의 500 이하는 Regular, 600 이상은 Bold 로 그려진다(범위로 선언 — 브라우저가 가짜 굵기를 만들지 않는다). 다섯 벌(1.35MB)에서 두 벌(약 0.54MB)로. 파일은 IDE(80) 에만 있고 도구·분류기 서버는 IDE 주소로 넘긴다(run_tools / run_classify 의 SharedFonts) — 세 앱이 한 벌을 같이 캐시한다 */ @font-face { font-family: "Pretendard"; font-weight: 100 549; font-style: normal; font-display: swap; src: local("Pretendard Regular"), url("fonts/Pretendard-Regular.subset.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 550 900; font-style: normal; font-display: swap; src: local("Pretendard Bold"), url("fonts/Pretendard-Bold.subset.woff2") format("woff2"); } :root { /* ── 브랜드 색 ── 기존 값 그대로. 바꾸지 말 것 ───────────────────────── */ --yellow: #f4de3d; --dark-yellow: #f4d85a; --light-yellow: rgb(248, 242, 172); --teal: #13bfd5; /* tools 에 rgb(18,189,212) 로 1 만큼 어긋나 있었다 */ --dark-teal: #11abbf; --red: #f16449; --dark-red: #d85a41; --light-green: #edf5e0; --mid-gray: #6c6c6c; /* ── 의미 토큰 ── 컴포넌트는 위 브랜드 색을 직접 쓰지 않고 이걸 쓴다 ── */ --pb-bg: #ffffff; --pb-surface: #f7f7f7; /* 툴바·패널 바닥 */ --pb-surface-2: #ededed; /* 한 단계 더 눌린 면 */ --pb-border: #cfcfcf; --pb-border-strong: #9a9a9a; --pb-text: #1a1a1a; --pb-text-dim: var(--mid-gray); --pb-text-on-dark: #ffffff; --pb-brand: var(--yellow); /* 헤더 = 정체성 */ --pb-brand-2: var(--dark-yellow); --pb-accent: var(--yellow); /* 주 동작 = 노랑. 화면에 하나만 */ --pb-accent-edge: #c9ab00; --pb-danger: var(--red); --pb-danger-edge: var(--dark-red); --pb-info: var(--teal); --pb-ok: var(--light-green); --pb-focus: #0b63c4; /* 흰 배경 대비 6.4:1 */ /* ── 치수 ── 태블릿 기준. 터치 타겟 44px 밑으로 내리지 말 것 ────────── */ --pb-tap: 44px; --pb-header-h: 40px; --pb-radius: 10px; --pb-radius-s: 7px; --pb-gap: 10px; --pb-pad: 14px; /* ── 글자 ── 앱(ide/tools/classifier)이 원래 쓰던 스택과 같다. 키트 컴포넌트가 앱 본문과 다른 글꼴로 튀지 않게 한다. 한때 system-ui 를 앞에 둔 스택을 .pb(=body) 에 걸었더니 파일 목록·경로·상태바까지 앱 전체 글꼴과 크기가 바뀌었다(16px Helvetica/맑은 고딕 -> 15px system-ui). 글꼴을 바꾸려면 여기 값만 고친다. PiBrain 이 다르면 이 변수만 덮어쓴다. */ --pb-font: Helvetica, "맑은 고딕", "malgun gothic", "Apple SD Gothic Neo", "Apple SD 산돌고딕 Neo", "Microsoft NeoGothic", "Droid sans", sans-serif; --pb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pb-fs-s: 13px; --pb-fs: 15px; --pb-fs-l: 17px; --pb-shadow: 0 1px 2px rgba(0,0,0,.14); --pb-shadow-2: 0 3px 10px rgba(0,0,0,.18); } /* ========================================================================== 기본 ========================================================================== */ /* box-sizing 은 키트 컴포넌트에만 건다. `.pb *` 로 걸면 이 키트를 붙이는 것만으로 기존 레이아웃이 틀어질 수 있다. (이 리포의 세 앱은 이미 전역으로 border-box 를 쓰고 있어 무해하지만, PiBrain 쪽은 확인 전이다.) */ .pb-header, .pb-header__brand, .pb-iconbar, .pb-iconbtn, .pb-toolbar, .pb-btn, .pb-seg, .pb-seg > button, .pb-field, .pb-panel, .pb-note, .pb-badge, .pb-term, .pb-statusbar { box-sizing: border-box; } /* .pb 는 범위 표시일 뿐 앱 본문을 꾸미지 않는다. body 에 붙이므로 여기서 글꼴·크기·색을 정하면 앱 전체가 바뀐다. 키트 컴포넌트는 각자 글꼴을 지정한다. */ .pb { -webkit-text-size-adjust: 100%; } .pb-header, .pb-iconbtn, .pb-banner, .pb-toast, .pb-modal, .pb-runstat, .pb-statusbar { font-family: var(--pb-font); } .pb-header { color: var(--pb-text); } /* 앱이 bare `button { ... }` 을 꾸며 둬도(IDE 는 노랑 배경·min-width 80px·그림자· hover 시 filter:brightness·active 시 transform) 키트 버튼은 영향받지 않게 끊는다. 컴포넌트 규칙보다 앞에 둬서 각 컴포넌트의 min-width 등은 뒤에서 다시 잡힌다. */ .pb-btn, .pb-iconbtn, .pb-seg > button { min-width: 0; margin: 0; filter: none; transform: none; transition: background-color .12s ease, border-color .12s ease; -webkit-appearance: none; appearance: none; } .pb-btn:hover, .pb-iconbtn:hover, .pb-seg > button:hover, .pb-btn:active, .pb-iconbtn:active, .pb-seg > button:active { filter: none; } .pb-iconbtn:active, .pb-seg > button:active { transform: none; } /* 키보드 이동에만 링이 뜬다. 마우스 클릭에는 안 뜬다 */ .pb :focus-visible { outline: 3px solid var(--pb-focus); outline-offset: 2px; border-radius: var(--pb-radius-s); } /* ========================================================================== 헤더 — 노랑은 여기'만'. 브랜드 띠다 ========================================================================== */ .pb-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-gap); background: linear-gradient(var(--pb-brand), var(--pb-brand-2)); /* 40px. 버튼(32px)은 아이콘·라벨을 가로 한 줄로 둔다. 예전 54px(아이콘 위·라벨 아래)는 작업 화면을 너무 먹었다 */ padding: 0 var(--pb-pad); height: var(--pb-header-h); min-height: var(--pb-header-h); flex: 0 0 auto; border-bottom: 1px solid rgba(0,0,0,.18); } .pb-header__brand { font-weight: 700; font-size: 15px; letter-spacing: .2px; white-space: nowrap; display: flex; align-items: center; gap: 6px; } /* 헤더 안의 아이콘 버튼 — 아이콘만 두지 말고 글자 라벨을 같이 둔다. 태블릿에는 hover 가 없어서 title 툴팁이 뜨지 않는다. 라벨은 폭이 모자랄 때만 접는다 */ /*