/* ============================================================ korean-fix.css — 한글 자연스러움 보정 레이어 ------------------------------------------------------------ 원칙: 기존 theme.css / brand.css 는 절대 수정하지 않는다. 이 파일을 두 CSS '다음에' 로드하여 한글만 덧칠로 보정한다. 로드 순서: theme.css → brand.css → korean-fix.css ------------------------------------------------------------ 어색함의 원인(영문 기준 규칙이 한글에 새어듦)을 5블록으로 보정. 각 블록은 독립적이라 필요 없으면 통째로 지워도 된다. ============================================================ */ /* [0] Pretendard 로드 + 한글 폰트 통일 -------------------------- 화면은 두 체계로 나뉜다: · home/index → brand.css (Pretendard + Space Grotesk/Mono) · 그 외 11개 → theme.css (Poppins + Noto Sans KR) theme.css 페이지는 Pretendard 가 없어 한글이 Noto Sans KR 로 떠서 brand 페이지와 느낌이 달라진다. Pretendard 를 직접 import 하고, 본문 폰트군에 'Poppins 다음, Noto 앞'으로 Pretendard 를 끼워넣어 영문/숫자는 Poppins 그대로 두고 '한글만' Pretendard 로 통일한다. */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"); /* 기본(primary) 폰트 = Pretendard. 한국 웹/관리자 UI에서 가장 널리 쓰이는 한글 웹폰트로, 라틴·숫자 글리프도 우수해 본문을 통째로 맡겨도 자연스럽다. Poppins 는 맨 뒤 보조로만 둔다. (대시보드 숫자·헤딩 액센트인 Space Grotesk = var(--disp) 는 유지) */ :root{ --bs-body-font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Poppins',sans-serif; } /* [1] mono 폰트군에 한글 폴백 추가 (brand.css 페이지) ------------- Space Mono 에는 한글 글리프가 없어, 한글이 시스템 기본 고딕 (맑은 고딕/굴림)으로 떨어져 굵기·자폭이 따로 논다. CSS 변수만 덮어쓰면 var(--mono)를 쓰는 모든 곳이 한 번에 보정된다. 숫자·영문은 그대로 Space Mono(고정폭), 한글만 Pretendard로 폴백. */ :root{ --mono:'Space Mono','Pretendard','Apple SD Gothic Neo','Noto Sans KR',ui-monospace,monospace; } /* [2] 한글 줄바꿈 규칙 — 가장 큰 자연스러움 향상 ------------------ 기본값은 글자 단위로 아무 데서나 끊겨 "회원관\n리" 처럼 어색하다. keep-all 로 '어절(띄어쓰기) 단위'로만 끊고, 긴 영문/코드는 예외 허용. */ body, .theme-console, .console-card, .panel, table, td, th, p, li, .lbl, .k, .v{ word-break: keep-all; overflow-wrap: anywhere; } /* [3] 영문 대문자용 '넓은 자간'이 한글에 새는 곳 완화 -------------- letter-spacing 은 대문자 라틴 라벨용이지 한글용이 아니다. 원본과 동일 specificity 로 작성해 '나중 로드 우선'으로 덮어쓴다. */ .theme-console .sidebar .nav-section{ letter-spacing:.04em; } /* .12em → 한글 섹션명 뭉개짐 해소 */ .eyebrow{ letter-spacing:.12em; } /* .24em → 한글 꼬리(요일 등) 완화 */ /* [4] 디스플레이 음수 자간이 한글에 과한 것 완화 ----------------- Space Grotesk 용 -.02em 음수 트래킹은 한글 음절을 서로 붙여 답답하게 만든다. 0 근처로 완화 (영문 헤딩은 거의 차이 없음). */ .console-head h1{ letter-spacing:-.005em; } .panel-h h3{ letter-spacing:0; } .balance .side .val, .balance .meta .m .v{ letter-spacing:-.01em; } /* [5] 인라인 letter-spacing 이 박힌 한글 mono 라벨 보정 ---------- "지급 예정액" 등은 요소 인라인 style 에 letter-spacing:.1em 이 직접 박혀 있어, 외부 CSS 로 덮으려면 !important 가 필요하다. 콘솔 화면 내부로 범위를 한정해 부작용을 최소화. */ .theme-console .mono[style*="letter-spacing"]{ letter-spacing:.02em !important; } /* ------------------------------------------------------------ 참고: i18n(다국어) 전환 시 React 변환 후 언어 전환을 붙이면, [2]~[5] 의 한글 전용 보정은 일 때만 적용되도록 아래처럼 감싸는 것을 권장. html[lang="ko"] .theme-console .sidebar .nav-section { ... } 중文/English/Tiếng Việt 일 때는 원본 자간이 살아나도록. (지금은 기본 화면이 한국어라 무조건 적용해도 무방.) ------------------------------------------------------------ */