/* =========================================================================== 보부상 게임 — 타이포그래피 + 글자 결함 수정 (2026-08-14 · 그래픽 관할) 근거: graphics/FONT_LIST_0814.md · graphics/text_issues.html 검사: graphics/scripts/text_audit.py (화면 20개를 돌며 박스를 재고 찍는다) ■ 왜 이 파일이 따로 있나 글자 크기가 CSS 6장에 45곳으로 흩어져 있었다. 거기를 다 고치면 빌드 쪽 작업과 충돌하고 되돌리기도 어렵다. 그래서 **마지막에 로드해 덮는 한 파일**로 모았다. 선택자를 원본과 똑같이 써서 특이도가 같고, 순서가 뒤라서 이긴다. 되돌리려면 index.html 의 이 파일 한 줄만 지우면 된다. 원본 CSS 는 안 건드렸다. ■ 무엇을 하나 — 다섯 가지 ① 무대를 1280px 에 못 박고 창에 맞출 때 **통째로** 축소·확대한다 ② 굵게(Bold)를 없앤다 ③ 글자 크기를 **격자의 정수배**로 맞춘다 (큰 글자 Galmuri11 12배수 / 작은 글자 Galmuri14 15배수) ④ 글자가 가려지거나 읽기 나쁜 자리를 고친다 ⑤ 글자 획의 색번짐을 막는다 ■ 격자란 — 폰트 이름의 숫자가 아니다 아웃라인 좌표를 직접 재 보니(graphics/scripts/font_grid.py) Galmuri11 → 격자 **12** (11 이 아니다) → 12 · 24 · 36 · 48px 에서 선명 Galmuri14 → 격자 **15** → 15 · 30 · 45px 에서 선명 비트맵 글리프는 격자의 정수배에서만 도트가 딱 떨어진다. 그동안 20 · 16 · 15 · 12 · 8.5px 를 썼는데 12의 배수가 **12 하나뿐**이었다. 나머지는 1.25~1.67배로 늘어나 획 하나가 어떤 자리는 1도트, 어떤 자리는 2도트가 됐다 — 그게 「글자가 깨진다」의 정체였다. ⚠️ 크기를 바꿀 때 지킬 것 Galmuri11 을 쓰는 곳 → **12의 배수** (12 · 24 · 36 · 48) Galmuri14 를 쓰는 곳 → **15의 배수** (15 · 30 · 45) 18 이나 20 으로 두면 다시 깨진다. =========================================================================== */ /* ══ ① 무대 고정 + 통째 스케일 ═══════════════════════════════════════════════ 지금까지 무대는 min(100vw, 177.78vh) 라 창 크기를 따라 **연속으로** 변했다. 창이 1173px 이면 글자가 18.18px 같은 소수가 되어 어떤 격자의 정수배도 될 수 없다. → 무대를 1280px 에 못 박고, 화면에 맞출 때는 **전체를 한 덩어리로** scale 한다. 글자만 따로 늘어나는 일이 없어진다. 픽셀 게임의 표준 방식이다. 덤으로 따라오는 것: 창이 좁아도 요소끼리 겹치지 않는다. 무대 폭이 늘 1280 이라 cqw 값이 상수가 되어 **비율 관계가 아예 안 변하기** 때문이다. (좁은 창에서 손님 이름표가 HUD 칩에 가리던 것 — 폰트와 무관한 그 버그가 같이 사라진다.) ⚠️ container-type:inline-size 는 **레이아웃 크기**를 본다. transform 은 레이아웃 이후에 걸리므로 컨테이너는 계속 1280px 로 계산된다. 그래서 기존 cqw 수치를 하나도 안 고쳐도 된다 — 전부 1280 기준 값으로 고정된다. 이게 이 방식의 핵심이다. */ /* 무대를 뷰포트에 딱 맞춘다. min-height 로 두면 무대가 창보다 커져서 가운데 정렬의 기준이 어긋나고, scale 한 화면의 아래쪽이 잘린다. */ .bs-stage{ height:100vh; min-height:0; overflow:hidden; } /* ⚠️ 2026-08-14 3차 수정 — **창이 1280 이상이면 scale 을 쓰지 않는다.** 처음엔 어떤 창에서든 1280px 무대를 scale 로 키웠는데, 그러면 화면 전체가 1280×720 으로 한 번 그려진 뒤 확대되어 **초상·배경이 뭉갠다**(실측 비교: graphics/drafts/char_probe/비교_얼굴.png — 눈·수염 디테일이 눈에 띄게 무너졌다). 초상 원본은 1025×1536 인데 레이어 안에서 590px 로 그려진 뒤 738px 로 늘어났다. → 창이 무대보다 크면 **무대 자체를 창에 맞춰 넓힌다**(옛 방식). 그러면 그림이 최종 해상도로 직접 그려져 선명하다. 글자는 type.css 가 고정 px 로 잡으므로 무대가 넓어져도 **정수배가 그대로 지켜진다** — 이게 두 마리를 다 잡는 지점이다. → 창이 1280 보다 좁을 때만 1280 무대를 통째로 **축소**한다. 축소는 확대와 달리 디테일을 잃을 뿐 뭉개지지 않고, 요소끼리 겹치는 것도 막아 준다. index.html 의 fitStage() 가 --bs-w9 / --bs-k9 두 값을 함께 넣는다. ⚠️ will-change:transform 은 **넣지 마라.** 레이어를 강제하면 배율이 1 이어도 화면이 한 번 래스터화되어 그림이 흐려진다(그 때문에 뺐다). */ .bs-stage > .bs-screen{ width:var(--bs-w9, 1280px); flex:none; transform:scale(var(--bs-k9, 1)); transform-origin:center center; } .bs-stage > .bs-title{ width:var(--bs-w32, 1280px); flex:none; transform:scale(var(--bs-k32, 1)); /* 타이틀만 3:2 다 (배경 원본이 1536×1024) */ transform-origin:center center; } /* 오프닝 카드·편지도 같은 무대를 쓴다 */ .bs-op-frame{ width:var(--bs-w9, 1280px); transform:scale(var(--bs-k9, 1)); transform-origin:center center; } /* ══ ② 굵게 없애기 ═══════════════════════════════════════════════════════════ 「굵은 글씨가 정말 안 보인다」— 재 보니 사실이었다. 「썩」한 글자의 채움 비율(글자 상자에서 검은 도트가 차지하는 비율): Galmuri11 Regular 0.36 Galmuri11 Bold 0.61 ← 1.7배 획 사이의 빈 도트가 메워져 글자가 검은 덩어리가 된다. 작은 크기일수록 심하다. CSS 41곳에 font-weight:700~900 이 흩어져 있는데, 그걸 다 고치는 대신 **볼드 자체가 존재하지 않게** 막는다. 두 겹으로 확실히 한다: ㉠ bobusang-font.css 에서 Bold 자족을 안 매단다 (그 파일 주석 참조) ㉡ font-synthesis:none — 자족이 없을 때 브라우저가 획을 굵게 **덧그리는** 합성 볼드를 금지한다. 이게 없으면 ㉠만으로는 여전히 뭉갠다. 강조가 필요한 곳은 굵기 대신 **색**으로 한다(--gold 가 이미 그 용도다). 실측 확인: weight 400 / 700 / 900 의 렌더 도트 수가 전부 1528 로 같다. */ .bs-screen, .bs-title, .bs-op, .bs-stage{ font-synthesis:none; } /* ══ ③ 글자 크기 ═════════════════════════════════════════════════════════════ 아래 선택자는 원본 CSS 에서 그대로 옮긴 것이다(graphics/scripts/type_audit.py 로 뽑음). 특이도가 같으므로 로드 순서가 뒤인 이 파일이 이긴다. ⚠️ 원본 쪽 선택자를 바꾸면 여기도 같이 바꿔야 한다. 안 그러면 조용히 안 먹는다. */ /* ── 바닥값: 작은 글자는 Galmuri14 @15px ─────────────────────────────────── 2026-08-14 2차 수정. 빌드를 훑어 보니 12px 가 화면마다 13~33곳이었고, 「오크 이빨 목걸이 · 매입가 10G · 풍문 27~64G」「인내심 100」처럼 **흥정에 반드시 필요한 숫자**까지 전부 그 크기였다. 작아서 안 읽힌다. 그런데 Galmuri11 은 격자가 12라 **12px 다음이 24px** 이다. 그 사이가 없다. 24 로 올리면 상품명이 칸을 넘고(「밀가루 포대」 6글자 × 24 = 144px > 칸 138px) HUD 도 겹친다. → 작은 글자만 **격자 15인 Galmuri14** 로 바꿔 **15px** 을 쓴다. 12 대비 25% 크고 정수배도 지킨다. 덤으로 같은 크기에서 획이 더 성기다 —「썩」채움 비율 Galmuri11 0.36 vs Galmuri14 0.29. ⚠️ 두 폰트가 한 화면에 있지만 같은 Galmuri 계열이라 자형이 어긋나지 않는다. **다른 폰트를 섞지 마라.** ⚠️ 이 바닥값이 중요하다 — 크기를 따로 안 준 요소가 **브라우저 기본 16px** 을 물려받고 있었다. 실측으로 잡힌 것: .bs-topbar · .bs-chip · .bs-days · b.bad · .bs-slot · .box … 개별로 쫓는 대신 바닥값을 깔아 놓친 곳도 자동으로 맞게 한다. */ .bs-screen, .bs-op, .bs-title, .bs-stage{ font-family:"Galmuri14","Galmuri11",system-ui,"Malgun Gothic",sans-serif; font-size:15px; } /* ── 큰 글자는 Galmuri11 (격자 12) 로 되돌린다 ───────────────────────────── 바닥값이 Galmuri14 라 이 줄이 없으면 24 · 36 · 48px 이 격자 15에 안 맞아 깨진다. ⚠️ 이 목록의 크기는 **12의 배수**, 나머지는 전부 **15의 배수**다. 섞지 마라. */ .bs-screen .bs-vntxt, .bs-screen .bs-total, .bs-screen .bs-mark, .bs-screen .bs-debt, .bs-screen .bs-verdict .txt, .bs-screen.flowC .bs-verdict .txt, .bs-screen .bs-goldpop, .bs-screen .bs-btn, .bs-screen.bs-shop .bs-slot .warn, .bs-let-hd, .bs-let-paper p, .bs-op-band p{ font-family:"Galmuri11",system-ui,"Malgun Gothic",sans-serif; } /* 주요 행동 버튼 — 「그록나르로 건너간다」「좌판을 펼친다」. 눌러야 할 것이라 크게 간다 */ .bs-screen .bs-btn{ font-size:24px } /* em 으로 잡힌 어깨글씨들 — 바닥값을 깔아도 여기는 .72em·.6em 이라 곱셈이라 안 맞는다. 원본 CSS 에서 em 단위 font-size 를 전부 찾아(3곳) 고정 px 로 못 박는다. · .bs-keeptab .ttl 「도매상」 — 「도매상 야콥에서 도매상이 안 보인다」던 그 자리 · .bs-npc-title 「아낙」 — 손님 직함(흥정 힌트라 지울 수 없다) · .bs-debt span 빚 숫자 옆 단위 ⚠️ 새로 em 단위 크기를 쓰지 마라. 부모가 15든 24든 곱하면 배수를 벗어난다. */ .bs-screen.bs-shop .bs-keeptab .ttl { font-size:15px } .bs-screen .bs-debt span { font-size:15px } /* ── 협상 화면 (bobusang-ui.css) ─────────────────────────────────────────── */ .bs-screen .bs-hud { font-size:15px } /* 15 → 정수배로 */ /* [개정 2026-08-16 · HANDOFF_ui_style ③] 이름·인내심 — 볼드 금지. [개정 2026-08-20 · 그래픽 · 사용자 확정] 고정 12px → **무대폭 비례**(1280 기준 12px = 0.009375). 타이틀 메뉴와 같은 비율 문제: 큰 창에서 무대(--bs-w9)는 커지는데 글자만 고정 px 라 전체화면에서 상대적으로 작아졌다. 작은 창은 --bs-w9=1280px 고정 + scale 이라 종전과 동일. (1920 전체화면 → 18px · 대사창 등 cqw 단위 요소들과 같은 스케일로 돈다) */ .bs-screen .bs-npc-name, .bs-screen .bs-npc-name .bs-npc-title, .bs-screen .bs-npc-num, .bs-screen .bs-npc-num b{ font-size:calc(var(--bs-w9, 1280px) * 0.01640625); font-weight:400; /* [0820 3차] 18→21px(1280 기준) — 사용자 「좀 더」 */ font-family:"Galmuri11",system-ui,"Malgun Gothic",sans-serif; } .bs-screen .bs-bub { font-size:15px } /* 17 → */ .bs-screen .bs-sys { font-size:15px } /* 14 → */ .bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-bub { font-size:15px } .bs-screen .bs-row:not(:nth-last-child(-n+3)) .bs-sys { font-size:15px } .bs-screen .bs-input input, .bs-screen .bs-input .bs-placeholder { font-size:15px } /* 16 → */ .bs-screen .bs-send { font-size:15px } /* 15 → */ .bs-screen .bs-verdict .txt { font-size:48px } /* 44 → 12×4 */ /* ── 밤 정산·봇짐 (bobusang-screens.css) ──────────────────────────────────── */ .bs-screen .bs-icon { font-size:15px } /* 11 → */ .bs-screen .bs-item .ds { font-size:15px } /* 12 → */ .bs-screen .bs-cell { font-size:15px } /* 11 → */ .bs-screen .bs-total { font-size:24px } /* 18 → 12×2 */ .bs-screen .bs-debt { font-size:36px } /* 30 → 12×3 */ .bs-screen .bs-memo p { font-size:15px } /* 14 → */ .bs-screen .bs-mark { font-size:24px } /* 20 → 12×2 */ /* ── 대사창 (bobusang-flow.css) ───────────────────────────────────────────── */ /* ⚠️ 대사 본문 20 → 24px. 한 줄이 39자에서 **33자**가 된다. 장 나누기(game.jsx 의 paginateParas)는 실측으로 나누므로 코드는 안 고쳐도 되지만, 장 수가 늘 수 있다. 긴 대사에서 ▼ 가 몇 번 뜨는지 확인할 것. */ .bs-screen .bs-vntxt { font-size:24px } /* 20 → 12×2 ★ */ .bs-screen .bs-laybtn { font-size:15px } /* 13 → */ .bs-screen .bs-vn.more::after { font-size:15px } /* 15 → */ .bs-screen .bs-vnpg { font-size:15px } /* 15 → */ .bs-screen .bs-vntab { font-size:15px } /* 16 → */ .bs-screen .bs-vnoff { font-size:15px } /* 16 → */ .bs-screen .bs-vnlog { font-size:15px } /* 15 → */ .bs-screen.flowC .bs-verdict .txt { font-size:36px } /* 32 → 12×3 */ /* ── 아침 도매상 (bobusang-shop.css) ──────────────────────────────────────── */ /* [2026-08-25] 15 → 24. 말칸이 하단 전폭이 되면서(.bs-keepsay, shop.css 맨 끝) 폭 34% 시절의 15px 가 통째로 작아 보였다 — 사용자 지적 「야콥 글자칸이 너무 작음」. ⚠️ 24px 는 Galmuri11 격자 12의 배수다. 22·26 으로 바꾸지 마라(획이 뭉갠다) — 아래 §글자 격자 절과 .bs-tutsay 24px 가 같은 이유로 맞춰져 있다. */ .bs-screen.bs-shop .bs-keepsay { font-size:24px } /* 15 → 전폭 대사창급 */ .bs-screen.bs-shop .bs-keeptab { font-size:15px } /* 16 → 이름표는 그대로 */ .bs-screen.bs-shop .bs-cart .ct { font-size:15px } /* 16 → */ .bs-screen.bs-shop .bs-cart .cs { font-size:15px } /* 12 → */ .bs-screen.bs-shop .bs-cart .cnt { font-size:15px } /* 13 → */ .bs-screen.bs-shop .bs-slot .pr { font-size:15px } /* 15 → */ .bs-screen.bs-shop .bs-slot .nm { font-size:15px } /* 12 → */ /* .bs-slot .warn 24px — 은퇴 [2026-08-17 · 상함 시스템 폐지] */ .bs-screen.bs-shop .bs-cell { font-size:15px } /* 11 → */ /* ── 타이틀 (bobusang-title.css) ──────────────────────────────────────────── */ /* .ti-btn 24px — 은퇴 [2026-08-16 · 타이틀 V9]. 구판 메뉴는 어두운 판+24px 였다. V9 메뉴는 배경 위 텍스트 15px(title.css) — 바닥값(Galmuri14 격자 15)에 정합이라 여기서 덮을 것이 없다. 24px 로 되돌리면 V9 좌표(46/52.5/59%)에서 줄이 겹친다. */ /* ── 편지·팝업 (bobusang-build.css §10) ───────────────────────────────────── */ /* ⚠️ 여기는 빌드 관할 파일이라 원본을 안 건드리고 여기서만 덮는다 */ .bs-screen .bs-goldpop { font-size:36px } /* 34 → 12×3 */ .bs-let-hd { font-size:24px } /* 19 → 자간이 넓어 본문과 구분된다 */ .bs-let-paper p { font-size:24px } /* 20 → 12×2 */ .bs-let-sign { font-size:15px } /* 16 → */ .bs-let-seal { font-size:15px } /* 글자는 투명이라 크기는 형식상 */ .bs-let-hint { font-size:15px } /* 14 → */ /* ── 오프닝 (bobusang-opening.css) ────────────────────────────────────────── */ .bs-op-band p { font-size:24px } /* 26 → 12×2 */ .bs-op-skip { font-size:15px } /* 14 → */ .bs-op.bs-let .bs-let-paper.more::after { font-size:15px } /* 18 → */ .bs-op.bs-let .bs-let-pg { font-size:15px } /* 13 → */ /* ── 튜토리얼·로비·정산 (bobusang-build.css §11) ─────────────────────────── 2026-08-14 3차. 흥정을 실제로 끝내 보니 **여기 20곳이 통째로 빠져 있었다.** 튜토리얼·로비·획득 팝업·판매 정산은 좌판까지만 도는 검사로는 안 나오는 화면이라 1차 정리 때 놓쳤다. 「야콥에게 가져가자 ▶」가 12px 로 남아 있던 것이 그 흔적이다. */ .bs-screen .bs-quest { font-size:15px } /* 14 → */ .bs-screen.bs-town .bs-spot { font-size:15px } .bs-screen.bs-town .bs-spot i { font-size:15px } /* 12 → */ /* [수정 2026-08-16] 원래 .here::before/.isnew::after 로 적혀 있었는데 실제 클래스는 .hot/.fresh 다 — 선택자가 안 걸려 배지가 11px(격자 이탈)로 남아 있었다 */ .bs-screen.bs-town .bs-spot.hot::after { font-size:12px; font-family:"Galmuri11",system-ui,sans-serif } /* 「여기」 */ .bs-screen.bs-town .bs-spot.fresh::after{ font-size:12px; font-family:"Galmuri11",system-ui,sans-serif } /* 「NEW」 */ .bs-screen .bs-locked { font-size:15px } /* 14 → */ .bs-screen .bs-locked b { font-size:15px } /* 17 → */ .bs-screen .bs-tutsay { font-size:24px } /* 20 → 대사 본문급이라 24 */ .bs-screen .bs-tutsay .bs-tuttab { font-size:15px } /* 17 → */ .bs-screen .bs-tutsay .bs-tuttab .ttl { font-size:15px } /* .72em → 곱셈이라 어긋난다 */ .bs-screen .bs-tutsay .bs-tutnx { font-size:15px } /* 12 → 「야콥에게 가져가자 ▶」 */ .bs-screen .bs-getpop .ico { font-size:15px } /* 13 → */ .bs-screen .bs-getpop .ttl { font-size:24px } /* 18 → 획득한 물건 이름이라 크게 */ .bs-screen .bs-getpop .dsc { font-size:15px } /* 14 → */ .bs-screen .bs-getpop .nx { font-size:15px } /* 12 → */ /* .bs-done* 5줄 — 은퇴 [2026-08-18]. 정산서가 .bs-led* 로 갈아탔다(build.css §13 주석) */ /* .bs-tutsay 본문만 Galmuri11(격자 12)로 — 24px 는 12의 배수다 */ .bs-screen .bs-tutsay, .bs-screen.bs-shop .bs-keepsay, .bs-screen .bs-getpop .ttl{ font-family:"Galmuri11",system-ui,"Malgun Gothic",sans-serif; } /* ══ ④ 글자가 가려지거나 읽기 나쁜 자리 ══════════════════════════════════════ 실제 빌드를 크롬으로 띄워 화면 20개를 돌며 박스를 재서 찾은 것들이다 (graphics/scripts/text_audit.py · 목록은 graphics/text_issues.html). */ /* ── 4-1 · 편지 서명이 인장에 완전히 가린다 ────────────────────────────────── 「— 돈놀이꾼 하겐」에서 **서명자 이름이 통째로 안 보였다.** 「— 돈놀이꾼」까지만 읽힌다. 서명은 오른쪽 정렬(text-align:right), 인장은 오른쪽 아래 absolute — 같은 자리를 쓴다. 인장이 CSS 사각형에서 그림으로 바뀌며 커진 뒤(62 → 94px) 겹치기 시작했다. → 서명 오른쪽에 **인장 폭 + 여백**만큼 자리를 비운다. ⚠️ 인장 크기를 바꾸면 이 값도 같이 바꿔야 한다. 인장: width clamp(44px,7.6cqw,94px) · right clamp(6px,1.4cqw,18px) */ .bs-op.bs-let .bs-let-sign{ padding-right:clamp(56px,10cqw,128px); box-sizing:border-box; } /* ── 4-2 · 상황 서술 띠가 대사창 이름표와 겹친다 ───────────────────────────── 이름표(.bs-vntab)는 대사창 위로 **17px** 올라와 걸치는 탭이다(의도된 디자인). 그런데 그 바로 위 상황 서술 띠(.bs-vnband)의 아래 끝이 탭과 6px 겹친다(실측). 로그가 쌓이면 마지막 줄이 탭 뒤로 들어간다. → 띠를 탭 높이(25px ≒ 무대 높이의 3.5%)만큼 위로 올린다. 38.7% → 42.2% ⚠️ 대사창(.bs-vn top:62.8%)을 움직이면 이 값도 같이 움직여야 한다. */ .bs-screen .bs-vnband{ bottom:42.2%; } /* ── 4-3 · 상황 서술이 가운데 정렬이라 길게 늘어서 읽기 나쁘다 ──────────────── 「야콥의 말이 떠오른다 — "값은 자네가 먼저 부르게. 다만 헐값은 안 되네."」 [문안 2026-08-24 개정] 같은 긴 문장이 **가운데 정렬로 한 줄에 쭉 늘어서** 눈이 다음 줄을 못 찾는다. 둘째 줄이 「말게."」처럼 짧게 떨어져 더 어색하다. → 왼쪽 정렬로 바꾸고 폭을 좁혀 **자연스럽게 줄이 나뉘게** 한다. ⚠️ .bs-sys 는 원래 letter-spacing:.11em 과 가운데 정렬로 「띠」처럼 보이게 한 것이다. 왼쪽 정렬로 바꾸면서 자간도 줄여야 글줄이 안 흩어진다. */ .bs-screen .bs-sys{ text-align:left; letter-spacing:.02em; max-width:46%; /* 37% 는 너무 좁아 두 글자씩 끊겼다 */ line-height:1.55; } /* 좌우분리(flowC)는 오른쪽 패널이 넓어 82% 면 한 줄이 40자를 넘는다. 한글은 한 줄 35~45자가 편하다 — 15px 기준 62% 가 그 언저리다. */ .bs-screen.flowC .bs-sys{ max-width:62%; } .bs-screen.flowC .bs-bub{ max-width:70%; } /* 82% → 대사 말풍선도 같이 좁힌다 */ /* 대사 말풍선도 왼쪽 정렬로 통일한다(기본값이지만 못 박아 둔다). 여러 줄일 때 가운데 정렬이면 줄마다 시작점이 달라 읽는 흐름이 끊긴다. */ .bs-screen .bs-bub{ text-align:left; line-height:1.55; } /* ── 4-5 · 퀘스트 배지가 손님 이름표를 덮는다 ★ ────────────────────────────── 흥정을 실제로 끝내 보고서야 나온 결함이다. 퀘스트 배지(.bs-quest 「물건을 팔아 보자 1 / 3」)와 손님 이름표(.bs-npc-name 「대장장이 그레타 인내심 100」)가 **둘 다 상단 중앙 top:4%** 라 완전히 포개진다. 배지가 위(z-index 6)라서 이름표는 「대」와 「0」만 삐져나온다 — 실측 캡처로 확인. 손님 이름과 인내심은 **흥정에 반드시 필요한 정보**다. → 손님 이름표가 있는 화면(협상)에서만 배지를 **왼쪽 위**로 보낸다. 협상 화면의 왼쪽 위는 완전히 비어 있다(도매·로비 화면은 거기에 날짜 띠가 있으므로 :has() 로 협상 화면만 골라 옮긴다). ⚠️ 배지를 가운데로 되돌리지 마라. 이름표와 같은 자리다. ⚠️ :has() 는 크롬 105+ 다. 심사 환경이 그보다 낮으면 배지가 제자리로 돌아가 다시 겹친다. */ .bs-screen:has(.bs-npc-name) .bs-quest{ left:2.2%; transform:none; top:4%; } /* ── 4-6 · 캐릭터 크기 — 신판 반신 초상 기준 (개정 2026-08-17) ★ ────────────── [개정 2026-08-17 사용자 확정 · 시안 graphics/size_mockup_live_0817.html · 지시서 graphics/output/characters/SIZE_APPLY_0817.md] 옛 104%/-10% 는 **구판 전신 초상**용이었다. 신판 반신 초상에 그대로 쓰니 화면 폭 55% 를 덮고 말풍선을 가렸다 → 88%/-4% 로 확정 (폭 점유 ~46%). 아이(지크·테오)는 작게 서는 게 자연스러워 별도 66%/-2% — game.jsx 가 npcName 으로 .child 클래스를 붙인다. ⚠️ 88/66 은 화질값이기도 하다 — run/portraits 가 이 표시 크기 기준으로 사전 축소된 세트(어른 950px·아이 713px)라, 값을 바꾸면 fullHD 1:1 이 깨져 도트가 다시 뭉갠다. 바꾸려면 아트에 리샘플을 다시 발주해야 한다. ⚠️ 호흡을 scaleY 로 바꾸지 마라 — 한 번 그렇게 고쳤다가 되돌렸다. translateY 는 위치만 옮기지만 scaleY 는 초상을 **비정수 배율로 세로 축소**해서 외곽선이 지글거린다. 원본 charanim.css 의 translateY 방식을 그대로 쓴다. */ .bs-screen{ --char-h:88%; } .bs-screen .bs-charwrap{ bottom:-4%; } .bs-screen .bs-charwrap.child{ --char-h:66%; height:var(--char-h); bottom:-2%; } /* ── 4-4 · 상인 대사가 아래쪽 칩 줄에 덮인다 ───────────────────────────────── 「오늘 시세」를 누르면 켜지는 **개발용 디버그 칩**(「다음 손님: …」「+100G」)이 .bs-topbar 로 그려지는데 z-index 가 6, 상인 대사는 5 라 대사가 뒤로 밀린다. 디버그는 제출본에 없어야 하지만, 켜진 채로 두어도 대사가 가리지 않게 순서를 뒤집는다. ⚠️ 상단 HUD 띠도 같은 .bs-topbar 다. 대사는 화면 아래라 서로 자리가 겹치지 않으므로 z-index 를 올려도 상단 HUD 를 가리지 않는다(실측 확인). */ .bs-screen.bs-shop .bs-keepsay{ z-index:7; } /* ══ ⑤ 글자 획의 색번짐 막기 ═════════════════════════════════════════════════ 확대해 보면 획 가장자리에 **청록·노랑이 섞여** 있다. 단색조 화면인데 글자만 색이 돈다. 서브픽셀 안티에일리어싱(LCD 렌더링) 때문이다. 왜 생기나 — 글자 시작 위치가 **정수 픽셀이 아닐 때** 심해진다. 가운데 정렬은 (칸폭 − 글자폭) ÷ 2 라 반 픽셀에 떨어지기 쉽다(칸 138 − 글자 65 → 36.5px). ⚠️ -webkit-font-smoothing:none 은 **맥 전용**이다. 윈도우 크롬에서는 아무 효과가 없다 (원본 CSS 에 그게 걸려 있는데도 색번짐이 남아 있던 이유다). ⚠️ 2026-08-14 3차 — **will-change:transform 을 뺐다.** 레이어로 올리면 색번짐은 사라지지만 화면 전체가 한 번 래스터화되어 **초상·배경이 뭉갠다.** 글자 색번짐보다 그림이 뭉개지는 쪽이 훨씬 크게 보인다 (실측 비교: graphics/drafts/char_probe/비교_얼굴.png). 그래서 색번짐은 **다른 방식으로** 줄인다 — 글자 크기를 격자의 정수배로 맞추면 획이 픽셀 경계에 가깝게 떨어져 번짐이 크게 준다. 그건 이미 위 §3 에서 했다. 가운데 정렬로 반 픽셀에 놓이는 자리만 남는데, 그 정도는 그림이 뭉개지는 값을 치를 만큼이 아니다. ⚠️ 색번짐을 없애겠다고 will-change 나 translateZ(0) 를 다시 넣지 마라. 그림이 상한다. */ /* ═══════════════════════════════════════════════════════════════════════════ ⑥ UI 스타일 — 황동 3상태 + MoneyPixel 크기 + 잔여 격자 스냅 [2026-08-16 · HANDOFF_ui_style.md · HANDOFF_남은작업.md] ■ 왜 여기 있나 — 이 절은 여러 파일의 요소를 한 규칙(3상태)으로 다시 칠한다. type.css 가 마지막에 로드되므로 같은 특이도로 전부 이긴다. 원본을 안 건드린다. ■ 규칙: 화면에서 **황동(#d89050)을 찾으면 그것이 다음 행동**이다. 황동 = 로비 명패 · 「말하기」 / 중립 = HUD 칩·상품 패널·대사창·이름표 / 잠김 = 못 가는 곳 ⚠️ 「다음 손님」·「야콥에게 가져가자」는 황동 대상으로 지시됐지만 **결재된 아트 종이 버튼** (btn_paper_*.png · 영수증/장부)을 이미 쓰고 있어 덮지 않았다 — 기획 판단 필요. ⚠️ 모서리 점은 ::before/::after 가 아니라 background-image 로 찍는다 — 명패 배지(hot/fresh)·대사창 ▼(.more::after)가 이미 의사요소를 쓰고 있어 충돌한다. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 공통 프레임 — 변수 세 개(--fl 면 · --li 안쪽선 · --lo 바깥선)로 상태가 갈린다 ── */ .bs-screen.bs-town .bs-spot, .bs-screen .bs-send, .bs-screen .bs-hud .bs-chip, .bs-screen .bs-quest, .bs-screen .bs-ip, .bs-screen .bs-vn, .bs-screen .bs-vntab, .bs-screen .bs-input{ border:0; border-radius:0; background-color:var(--fl); box-shadow: inset 0 0 0 1px var(--li), inset 0 0 0 3px var(--fl), inset 0 0 0 4px var(--lo), 2px 2px 0 rgba(8,10,4,.55); /* 모서리 점 — 좌상·우하 */ background-image: linear-gradient(var(--li), var(--li)), linear-gradient(var(--li), var(--li)); background-size:0.55cqw 0.55cqw, 0.55cqw 0.55cqw; background-position:0.28cqw 0.28cqw, calc(100% - 0.28cqw) calc(100% - 0.28cqw); background-repeat:no-repeat; } /* 황동(누름) — 이것이 다음 행동이다 */ .bs-screen.bs-town .bs-spot, .bs-screen .bs-send{ --fl:rgba(44,26,12,.9); --li:#d89050; --lo:rgba(140,84,36,.85); color:#f6ddb8; cursor:pointer; } .bs-screen.bs-town .bs-spot i{ color:#d6ab84; } .bs-screen .bs-send:disabled{ filter:saturate(0) brightness(.75); cursor:default; color:#8e8a76; } /* 중립(정보) — 길게 읽어도 편하게 */ .bs-screen .bs-hud .bs-chip, .bs-screen .bs-quest, .bs-screen .bs-ip, .bs-screen .bs-vn, .bs-screen .bs-vntab, .bs-screen .bs-input{ --fl:rgba(26,30,14,.86); --li:rgba(214,206,158,.85); --lo:rgba(150,144,102,.6); color:#efe8c4; } .bs-screen .bs-vn.me{ --fl:rgba(38,42,20,.88); } /* 내 말이 떠 있는 동안의 옅은 톤 차이 */ .bs-screen .bs-vn.angry{ --li:var(--danger); } /* 화난 대사는 안쪽선째 붉게 */ .bs-screen .bs-vntab{ color:#efe8c4; } .bs-screen .bs-quest b{ color:var(--gold); } /* ── 저녁 명패 색 ── [2026-08-23 · EVENING_APPLY_0823.md §7-3 → **개정 · 사용자 확정**] 위 「황동 = 다음 행동」 규칙의 **의도된 예외**다. 저녁 화면은 갈 곳이 셋뿐이라 색으로 가른다. 🚨 **두 갈래다. 셋이 아니다.** [개정 2026-08-23 · 저녁 도매상 추가] · 떠난다 → 관문만 **차갑게**(횃불빛 파랑) · 이 마을에서 한다 → 도매상·여관은 **놋빛으로 통일** 셋을 전부 다른 색으로 칠하면 「색으로 고른다」가 아니라 「색을 외운다」가 된다. (초판은 여관을 따뜻한 앰버로 뒀었다 — 도매상이 들어오면서 통일로 바뀌었다. 되돌리지 마라) ⚠️ 면(--fl)까지 갈라야 한다 — 선만 바꾸면 관문에 파란 선만 얹힌 채 바탕이 황동이라 색이 싸운다. ⚠️ 프레임 문법(inset 4겹 · 모서리 점)은 건드리지 마라 — 변수 셋만 갈아끼운다. ⚠️ --glow 를 빠뜨리지 마라 — 호버 등불(0 0 16px var(--glow))이 투명해져 아예 안 켜진다. ⚠️ 이 블록은 아래 「잠김」보다 **앞**에 있어야 한다(특이도가 같아서 순서로 갈린다). 뒤로 옮기면 잠긴 관문이 파란 기가 도는 채 회색으로 눌린다 */ .bs-screen.bs-town .bs-spot.shop, .bs-screen.bs-town .bs-spot.inn { --fl:rgba(24,32,20,.90); --li:#b8cc8a; --lo:rgba(112,132,74,.85); --glow:rgba(184,204,138,.55); } .bs-screen.bs-town .bs-spot.gate{ --fl:rgba(18,26,32,.88); --li:#a8cfe8; --lo:rgba(90,122,146,.85); --glow:rgba(120,190,240,.55); } /* 잠김 — 무채색 + 45° 빗금. 호버·누름 반응 없음 */ .bs-screen.bs-town .bs-spot.off{ --fl:rgba(14,16,8,.9); --li:rgba(130,126,98,.5); --lo:rgba(80,78,58,.4); color:#8e8a76; cursor:default; opacity:1; filter:saturate(0); /* 어떤 강조색을 써도 잠김은 항상 무채색 */ background-image: linear-gradient(var(--li), var(--li)), linear-gradient(var(--li), var(--li)), repeating-linear-gradient(45deg, rgba(0,0,0,.38) 0 3px, rgba(0,0,0,0) 3px 8px); background-size:0.55cqw 0.55cqw, 0.55cqw 0.55cqw, auto; background-position:0.28cqw 0.28cqw, calc(100% - 0.28cqw) calc(100% - 0.28cqw), 0 0; } .bs-screen.bs-town .bs-spot.off i{ color:#726e5e; } .bs-screen.bs-town .bs-spot.off:hover{ filter:saturate(0); } /* 상호작용 — 황동만 반응한다. lit 은 명패 호버와 건물 레이어(townHover)가 묶인 상태 [개정 2026-08-17 · hover B 확정 · HANDOFF_lobby_fx 4절] 전이는 steps() — ease 를 쓰면 도트가 미끄러진다. ⚠️ scale 앞의 translateX(-50%) 를 빠뜨리면 명패가 오른쪽으로 반 칸 튄다(중앙정렬 보정) */ .bs-screen.bs-town .bs-spot{ transition:filter .08s steps(2), transform .06s steps(1); } /* ── ③ 마우스 ON ── [개정 2026-08-23 · EVENING_APPLY_0823.md §6③] 예전엔 밝기+확대뿐이라 **어두운 저녁 배경에서 밝기 변화가 안 읽혔다.** 한 칸 떠오르고(그림자도 같이 길어진다) 등불이 세지며 모서리 점이 2개 → 4개로 늘어난다. ⚠️ 모서리 점은 ::before/::after 가 아니라 background-image 다(위 ⑥절 주석) — hot/fresh 배지가 의사요소를 쓴다. ⚠️ transform 에서 가운데 정렬 translate(-50%,-50%) 를 빠뜨리면 명패가 반 칸 튄다 */ .bs-screen.bs-town .bs-spot:not(.off):hover, .bs-screen.bs-town .bs-spot:not(.off).lit{ filter:brightness(1.14); transform:translate(-50%,-50%) translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 1px var(--li), inset 0 0 0 3px var(--fl), inset 0 0 0 4px var(--lo), 3px 3px 0 rgba(8,10,4,.55), /* 그림자도 같이 길어진다 */ 0 0 16px var(--glow); /* 등불이 세진다 */ background-image: linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)); background-size:0.55cqw 0.55cqw, 0.55cqw 0.55cqw, 0.55cqw 0.55cqw, 0.55cqw 0.55cqw; background-position:0.28cqw 0.28cqw, calc(100% - 0.28cqw) 0.28cqw, 0.28cqw calc(100% - 0.28cqw), calc(100% - 0.28cqw) calc(100% - 0.28cqw); } /* ── ④ 눌렀을 때 · 0.2s ── [§6④] 딸깍 1프레임 → 그림자를 잃고 내려앉는다 → 제자리. 🚨 0.2s 를 넘기지 마라 — 누르면 곧 화면이 넘어간다(여관→밤 · 관문→DAY 카드). 길면 연출이 잘린 것처럼 보인다. 🚨 box-shadow 를 애니메이션하면 **프레임 4겹을 전부 다시 적어야 한다** — 빠뜨리면 애니메이션이 도는 동안 명패 프레임이 통째로 사라진다 */ .bs-screen.bs-town .bs-spot:not(.off):active{ animation:bsSpotClack .2s steps(3) both } @keyframes bsSpotClack{ 0% { transform:translate(-50%,-50%) translateY(2px); filter:brightness(1.6); box-shadow:inset 0 0 0 1px var(--li), inset 0 0 0 3px var(--fl), inset 0 0 0 4px var(--lo), 0 0 20px rgba(255,240,200,.7) } 45% { transform:translate(-50%,-50%) translateY(2px); filter:brightness(.78); box-shadow:inset 0 0 0 1px var(--li), inset 0 0 0 3px var(--fl), inset 0 0 0 4px var(--lo) } 100%{ transform:translate(-50%,-50%); filter:none; box-shadow:inset 0 0 0 1px var(--li), inset 0 0 0 3px var(--fl), inset 0 0 0 4px var(--lo), 2px 2px 0 rgba(8,10,4,.55) } } .bs-screen .bs-send:not(:disabled):hover { filter:brightness(1.18) } .bs-screen .bs-send:not(:disabled):active{ transform:translateY(2px); filter:brightness(.82) } /* ── MoneyPixel 크기 — 흥정 화면 (표의 px 값 · 전부 12의 배수 = Galmuri11) ── */ .bs-screen .bs-quest, .bs-screen .bs-hud .bs-chip, .bs-screen .bs-vntab, .bs-screen .bs-input input, .bs-screen .bs-input .bs-placeholder, .bs-screen .bs-send{ font-size:24px; font-weight:400; font-family:"Galmuri11",system-ui,"Malgun Gothic",sans-serif; } .bs-screen .bs-quest{ padding:0.62cqw 1.25cqw; } .bs-screen .bs-hud .bs-chip{ padding:0.7cqw 1.5cqw; } .bs-screen .bs-vntab{ padding:0.52cqw 1.5cqw; } .bs-screen .bs-vn{ padding:1.6cqw 2cqw; } .bs-screen .bs-input{ left:20%; right:20%; width:auto; transform:none; padding:0.9cqw 1cqw 0.9cqw 1.4cqw; gap:1.2cqw; } .bs-screen .bs-send{ padding:0.62cqw 1.8cqw; flex:0 0 auto; } /* ── 잔여 격자 스냅 — type.css §3 이 못 덮고 있던 곳들 (HANDOFF_남은작업 전역 점검) ── */ .bs-screen.bs-shop .bs-slot .bs-arrow{ font-size:24px; font-family:"Galmuri11",system-ui,sans-serif } /* 25.6 → */ .bs-screen .bs-goal, .bs-screen .bs-goal b{ font-size:15px } /* 14 → */ .bs-op.bs-daycard .bs-day-big{ font-size:72px; font-family:"Galmuri11",system-ui,sans-serif } /* 6vw → */ .bs-op.bs-daycard .bs-day-sub{ font-size:15px } /* 1.1vw → */ .bs-op.bs-knock .bs-kn-bang{ font-size:48px; font-family:"Galmuri11",system-ui,sans-serif } /* 3.4vw → */ .bs-op.bs-knock .bs-kn-voice{ font-size:24px; font-family:"Galmuri11",system-ui,sans-serif } /* 1.7vw → */ .bs-op.bs-let .bs-let-open{ font-size:15px } /* 18 → */ .bs-op-next{ font-size:24px; font-family:"Galmuri11",system-ui,sans-serif } /* 21.76 → */ .bs-op.bs-let .bs-let-fromline{ font-size:15px } /* 18 → */ /* ── 프레임 전환 후속 보정 ── */ /* 이름표가 24px 로 커져 옛 top 오프셋(-19px)으로는 창 안으로 파고든다. 탭 높이 ≈ 24px + 패딩(0.52cqw×2) ≈ 37px → 2.9cqw 만큼 올린다 */ .bs-screen .bs-vntab{ top:calc(-1 * 2.9cqw); } /* flow.css 의 .bs-vn.me .bs-vntab{ background:var(--c4) } 이 더 특이해서 이긴다 — 중립 면색으로 되돌린다 (me 상태도 이름표는 중립이다) */ .bs-screen .bs-vn.me .bs-vntab{ background:var(--fl); } /* 목표 칩이 네샤 퀘스트를 질 때 [2026-08-25] — 「남은 N일」과 달리 **지금 할 일**이라 눈에 띄어야 한다. ⚠️ 칩 한 줄에 10글자까지다(실측). 문구를 늘리려거든 여기 폭부터 재라. */ .bs-screen .bs-topbar .bs-chip.quest{ border-color:var(--gold); color:var(--gold); font-weight:700; }