/* * 일본어 화면 조판 규칙 (AXBL-413) * --------------------------------------------------------------------------- * 이 파일이 일본어 줄바꿈 규칙의 단일 출처다. * * 적용 방법 — blade의 안에 아래 한 줄을 넣는다. * @include('helper.ja_typography') * 태그에는 @include('helper.html_lang') 이 함께 있어야 한다 (lang이 없으면 이 규칙이 * 매칭되지 않는다). * * ⚠️ 폰트는 이 파일의 범위가 아니다 (2026-08-20 개발자 결정) — * 일본어 폰트(PretendardJP) 통일은 v2 디자인 정리 시점에 함께 진행한다. v2가 * --lnd-font-body 토큰으로 폰트를 설계해 두었는데 여기서 !important 로 덮으면 그 토큰이 * JA에서 무력화되고, v2 정리 때 다시 걷어내야 해서 같은 일을 두 번 하게 된다. * 그때까지는 화면별 인라인 폰트 지정(@lib/fontStack 의 JP_FONT_FALLBACK_STYLE 등)이 * 그대로 남아 있다. 조사 내용은 doc/plan/AXBL-413/font.md 에 보관돼 있다. * * 왜 일본어에만 적용하나 — * KO/EN까지 바꾸면 전 화면 렌더링이 함께 바뀌어 회귀 범위를 통제할 수 없다. * html[lang="ja"] 로 한정하면 한국어·영어 화면에는 규칙이 매칭조차 되지 않아 영향이 0이다. */ /* =========================================================================== * 조판 (줄바꿈) * =========================================================================== * * 증상 — 한 글자만 다음 줄로 떨어지거나, 「、」「。」가 줄 맨 앞에 오거나, * 기기 폭에 따라 개행 위치가 제각각으로 어긋난다. * * 원인 — word-break: break-all 이 161곳(CSS 108 + Tailwind 클래스 53)에 걸려 있다. * break-all 은 "어디서든 끊어도 된다"는 뜻이라, 일본어 금칙처리(행두금칙 — 「、」「。」 * 「っ」「ゃ」 등이 줄 첫머리에 오지 못하게 하는 규칙)를 통째로 무력화한다. * 원래 목적은 긴 URL·영문이 영역 밖으로 넘치는 것을 막는 것이었는데, 그 목적은 * overflow-wrap 으로 달성하면서 금칙처리는 살릴 수 있다. * * 아래 3단 구성 — * ① word-break: normal break-all 해제. 브라우저의 기본 금칙처리가 되살아난다 * ② overflow-wrap: break-word 긴 URL·영문 넘침 방지 (break-all 의 원래 목적을 대체) * * ⚠️ anywhere 가 아니라 break-word 인 이유 (2026-08-18 정정) * anywhere 는 min-content 폭 계산에도 "어디서든 끊을 수 있다"를 반영한다. * 그래서 표(table) 안에서는 브라우저가 열 폭을 단어보다 좁게 잡아버리고, * 결과적으로 단어 중간에서 끊긴다 —「（オーダーメイ / ド）」처럼. * break-word 는 min-content 를 '가장 긴 단어' 로 유지하므로 열이 그만큼 * 확보되어 단어 중간 개행이 일어나지 않는다. 넘침 방지 효과는 동일하다. * ③ line-break: strict 금칙처리를 엄격 모드로. 작은 가나(っゃゅょ)까지 행두에 안 온다 * * `*` 로 자손 전체를 덮는 이유 — break-all 이 개별 요소에 직접 박혀 있어서, * body 에만 걸면 상속이 그 선언에 진다. (white-space: nowrap 요소는 nowrap 이 * 우선이라 영향받지 않는다 — 메뉴·버튼·칩 등) */ html[lang='ja'] body, html[lang='ja'] body * { /* !important 인 이유 — 이 선택자의 특이도는 0,1,2 인데 기존 break-all 선언 85곳이 0,2,0 이상이라 그냥 두면 이 규칙이 져서 금칙처리가 살아나지 않는 화면이 있었다. 특이도를 올려 이기는 방법은 더 강한 선언이 하나만 새로 생겨도 다시 깨진다 (2026-08-18) */ word-break: normal !important; overflow-wrap: break-word !important; line-break: strict !important; } /* * 문절(文節) 단위 줄바꿈 — 단어 한가운데에서 끊기지 않게 한다. * 「日本語の文章を」/「読みやすく」 처럼 의미 덩어리로 끊기므로, 조사 하나만 다음 줄로 * 떨어지는 개행이 사라진다. 「、の次の文字から改行して欲しい」가 이 규칙으로 해결된다. * * 무엇을 지킬지 골라야 한다 — 일본어는 글자마다 끊을 수 있는 언어라 둘 다는 안 된다. * ① auto-phrase → 「ダウンロード」가 안 갈린다. 대신 다음 문절이 남은 폭에 못 들어가면 * 통째로 내려가 행 끝에 빈 공간이 조금 생긴다 * ② normal → 행 끝은 가지런하다. 대신 「ダウン / ロード」처럼 단어가 갈린다 * CTEE 는 **①(단어를 지키는 쪽)** 을 택했다 — 읽다가 걸리는 것이 더 크기 때문. * * ⚠️ ①의 빈 공간을 text-wrap: balance 로 메우려 했다가 철회했다 (아래 블록 참고) — * balance 는 빈 공간을 없애는 게 아니라 **모든 줄에 고르게 나눠** 오히려 키웠다. * * @supports 로 감싼 이유 — 2026-08 기준 Chrome/Edge 만 지원(119+). * Safari·Firefox 는 이 블록을 무시하고 위의 normal 을 쓴다 (점진적 향상 — * 지원 브라우저는 더 좋아지고, 미지원 브라우저도 break-all 시절보다 나빠지지 않는다). * * ⛔ **Safari 에서는 이 규칙이 안 걸린다는 것을 전제로 화면을 짠다.** * 즉 폭이 모자란 곳의 단어 갈림은 조판 규칙으로 못 막는다. 고정 폭이 한국어 기준으로 * 잡혀 있으면 일본어에서 갈리므로, **폭 자체를 고쳐야 한다** * (1차 QA — 「コンテンツを見る」 버튼 104px. 아래 화면별 예외 참고). */ @supports (word-break: auto-phrase) { html[lang='ja'] body, html[lang='ja'] body * { word-break: auto-phrase !important; } } /* ═══════════════════════════════════════════════════════════════════ * ⛔ text-wrap: balance 는 본문에 넣지 않는다 (2026-08-19 도입 → 2026-08-25 철회) * * 넣었던 이유 — 마지막 줄에 몇 글자만 남는 것(고아 줄)을 막으려 했다. * コンテンツに関するお知らせを入力してください。この内容は販売ページの上部に表示され * ます。 ← 「ます。」만 떨어짐 * * 뺀 이유 — balance 는 고아 줄을 없애는 규칙이 아니라 **각 줄의 길이를 균등하게 * 다시 나누는** 규칙이다. 그래서 마지막 줄이 길어지는 대신 **앞 줄들이 짧아진다.** * 결과적으로 오른쪽에 큰 빈 공간이 생긴다. * * 1차 QA 실측 (알림 목록, iPhone Safari) — 한 줄에 약 21자가 들어가는 칸인데 * 14자만 쓰고 **7자분(약 30%)이 비어 있었다.** 2~6줄짜리 글은 전부 이렇게 된다 * (브라우저가 balance 를 6줄 이하에만 적용하므로, 짧은 글일수록 더 티가 난다). * * 고아 줄은 **일본어에서 정상**이다 — note·minne·BOOTH 어디도 balance 를 쓰지 않고, * 줄을 끝까지 채운 뒤 남는 만큼만 마지막 줄에 둔다. 빈 오른쪽이 훨씬 눈에 띈다. * * 특정 짧은 제목 하나에 필요하면 **그 화면에서 개별로** 넣는다. 요소 종류나 body 로 * 일괄 적용하지 않는다 — 같은 속성이 제목에는 도움이 되고 본문에는 해가 된다. * ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ * 화면별 예외 — 한국어 기준으로 고정된 폭이 일본어에서 모자란 곳 * * ⚠️ 어디에 적을지 — 아래 순서로 정한다. **여기는 마지막 수단이다.** * ① 컴포넌트 전용 스타일시트가 있으면 거기에 * (예: guide.scss 의 `.landing-v2[lang='ja'] .guide__hero-title`) * ② Tailwind 유틸만 쓰는 컴포넌트면 **컴포넌트 안에서 언어로 분기**한다 * (예: StreamMediaItem.jsx 의 TOGGLE_WIDTH_CLASS — `Language.getCodeAwait()`) * ③ 위 둘 다 안 되는 옛 화면만 여기에 둔다 * * ②를 ③보다 앞에 두는 이유 — 이 파일은 Vite 번들 밖(public/)이라 클래스명으로만 연결된다. * 그 연결은 문자열뿐이라 빌드·린트가 검증하지 못하고, 클래스명이 바뀌면 일본어 화면에서만 * 조용히 원래 값으로 돌아간다 (2026-08-25 셀프리뷰 지적으로 stream-media-toggle 을 ②로 옮김). * * 일본어는 같은 뜻이라도 한국어보다 글자 수가 많다. * 이메일(3자) → メールアドレス(7자) * 라벨 폭이 px 로 고정돼 있으면 일본어만 넘쳐서 「メールアドレ / ス」처럼 끊긴다. * 문구를 줄이는 게 아니라 **폭을 넓히는 것**이 맞다 — 용어는 확정돼 있다. * * ⚠️ auto 로 두지 않는 이유 — 라벨 폭이 제각각이 되어 입력칸의 시작선이 어긋난다. * 고정폭을 유지한 채 일본어에서만 값을 키운다. * ═══════════════════════════════════════════════════════════════════ */ /* 프로필 수정 (App_modify) — 가장 긴 라벨이 「メールアドレス」(7자) * * 이 값은 폰트가 바뀌어도 재실측이 필요 없다 (2026-08-20 결론) — * 전각 문자의 advance width 는 어느 CJK 폰트에서든 정확히 1em 이고, 폭을 정하는 것은 * font-family 가 아니라 font-size 다. 「メールアドレス」는 전각 7자 = 7em 이므로 * 14px 기준 98px / 16px 기준 112px. 데스크톱 124px · 모바일 108px 둘 다 여유가 있다. * (font-weight 가 빠진 것도 무관 — CJK 전각은 굵어져도 1em 그대로다) */ html[lang='ja'] .App_modify .contents_label { width: 124px; } @media (max-width: 453px) { html[lang='ja'] .App_modify .contents_label { width: 108px; } } /* ═══════════════════════════════════════════════════════════════════ * ⛔ 버튼 일괄 가운데 정렬은 넣지 않는다 (2026-08-19 시도 후 철회) * * 「버튼은 가운데 정렬」이라는 규칙을 button·[role=button]·.btn 에 걸었더니, * **버튼으로 만들어진 선택 카드**까지 가운데로 갔다. * [ダウンロード] ← 제목은 왼쪽 * 　　ファイルをアップロードすると ← 설명문이 가운데로 밀렸다 * 　　購入者がダウンロードできます * * :where() 로 특이도를 0 으로 낮췄지만, **아무 지정도 없는 요소**(상속에 기대는 * 카드형 버튼)에는 그대로 먹는다. 0 특이도는 "아무것도 없는 것"에는 이긴다. * * 그리고 진짜 버튼(