/* 일본(ja) 전용 오버라이드 페이지 공통 규칙. app/ja/layout.tsx 에서 로드하며,
   5개 JP 오버라이드 페이지(home·company·advertising·contents·research)에만 적용된다.
   (폴백 경로 /ja/careers 등은 app/[locale] 트리라 이 CSS 를 로드하지 않는다.) */

/* 일본어 텍스트를 문자 단위가 아니라 자연스러운 단어(문절) 경계에서 개행한다.
   - word-break: auto-phrase → Chromium 119+ 가 사전 기반으로 일본어 문절 단위 줄바꿈.
     미지원 브라우저(Safari/Firefox 등)는 이 값을 무시하고 기본 동작으로 폴백한다.
   - line-break: strict → 소가나·장음(ー)·약물(、。) 앞 개행 금지 등 일본어 조판 규칙 적용.
   body 에 지정해 상속시키되, 개별 요소의 명시적 word-break(예: .cscard h3 의 keep-all)는
   상속값보다 항상 우선하므로 기존 의도된 스타일은 그대로 유지된다. */

/* 일본어 페이지 전체에 Meiryo(メイリオ)체 적용.
   각 페이지 CSS 는 --font 를 :root 에 정의하므로, 여기서 **body 에** --font 를 재정의하면
   (body 는 :root 보다 상속 체인상 가까움) 링크 순서와 무관하게 body 하위 전체가 이 값을
   상속받는다. body{font-family:var(--font)} 이 전 텍스트·SVG 라벨에 전파된다.
   NOTE: Meiryo 는 Windows 번들 폰트라 웹임베드 불가 → 非Windows(mac/iOS=Hiragino,
   Android=Noto Sans JP)는 동급 일본어 폰트로 폴백한다. */
body {
  --font:
    "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Noto Sans JP", "Pretendard", -apple-system,
    BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  word-break: auto-phrase;
  line-break: strict;
}

/* home 의 .why/.solutions 제목은 `<br>` 로 2줄을 의도하지만, JP 카피가 원본(ko)보다 길어
   둘째 줄이 .sec-head 의 max-width:760px 를 넘는다(803px·801px @46px). 상자보다 넓은
   줄에는 text-align:center 가 적용될 수 없어 좌측에 붙은 채 오른쪽으로 삐져나가고,
   그 결과 두 줄의 가운데가 어긋나 보인다(font-size 가 clamp 상한 46px 에 닿는 약 1210px
   이상에서 발생). 상자는 margin:0 auto 라 중심 x 는 그대로 → 이미 들어맞던 줄의 위치는
   변하지 않는다.
   폭 920px 의 근거는 이 상자에서 가장 긴 줄인 .why 의 sec-sub 첫 줄 891.6px
   (`…獲得からアクティベーション、リマーケティングまで、`) 이다. 제목 최장 줄 803px 도
   당연히 들어간다.
   NOTE: company 의 `#why` 는 id 라 이 클래스 선택자에 걸리지 않는다 — home 전용. */
.why .sec-head.center,
.solutions .sec-head.center {
  max-width: 920px;
}

/* 위 두 제목은 home.css 의 `.why .sec-title,.solutions .sec-title{word-break:keep-all}`
   대상이라 상자를 넘겨도 줄바꿈으로 흡수되지 않는다. 데스크톱은 위 840px 로 해결되지만
   상자가 그보다 좁아지는 모바일(약 560px 이하)에서는 제목이 뷰포트 밖으로 잘려 나간다
   — body 가 overflow-x:hidden 이라 스크롤조차 되지 않고 글자가 그대로 사라진다.
   keep-all(한국어용 규칙) 대신 body 와 동일한 auto-phrase 로 되돌려, 들어가지 않을 때만
   문절 단위로 접히게 한다. 데스크톱에서는 840px 안에 들어가 줄바꿈이 일어나지 않으므로
   의도한 2줄 구성이 그대로 유지된다.
   `.section.why` 로 특이도를 올린 이유: home.css 의 keep-all 과 특이도가 같으면 두 CSS 의
   로드 순서에 결과가 좌우된다. 미지원 브라우저는 normal 로 폴백 → 문절 경계는 못 지켜도
   잘리지 않고 접히므로 안전하다. */
.section.why .sec-title,
.section.solutions .sec-title {
  word-break: auto-phrase;
}

/* hero 제목(4개 JP 페이지 전부)도 같은 뿌리의 문제다. `.hero h1`(home·company·contents)
   과 `.product-hero-copy h1`(advertising) 모두 word-break:keep-all 이라 JP 한 줄이 통째로
   끊기지 않는 덩어리가 된다. 게다가 `.hero-text`/`.product-hero-copy` 는 flex 이고
   h1 의 폭이 fit-content = max(min-content, 가용폭) 으로 잡히는데, keep-all 이면
   min-content 가 줄 전체 폭이라 가용폭을 무시하고 넘친다. align-items:center 인
   home·company·contents 는 넘친 만큼 **좌우 양쪽**으로 삐져나가 글자가 잘린다
   (390px 기준: home 좌52·우37, contents 좌75·우60, company 좌15, advertising 우145).
   body 가 overflow-x:hidden 이라 스크롤도 안 되고 그대로 사라진다.
   auto-phrase 로 되돌리면 min-content 가 문절 단위로 작아져 정상적으로 접힌다.
   auto-phrase 로 되돌리면 min-content 가 문절 단위로 작아져 정상적으로 접힌다.

   sec-title 과 달리 **모바일에만** 적용한다: 데스크톱의 hero h1 은 이미 max-width:880px
   를 넘고 있으나(1440px 에서 첫 줄 1033px) 뷰포트가 넓어 잘리지는 않는다. 여기에
   auto-phrase 를 무조건 걸면 그 줄들이 접혀 데스크톱 줄 구성이 바뀐다(home·contents
   2→3줄, advertising 2→5줄). 잘림이 실제로 발생하는 구간은 약 740px 이하이므로, 원본이
   모바일 레이아웃 분기로 쓰는 760px 를 그대로 재사용해 그 아래에서만 접는다.
   → 761px 이상은 이 규칙이 아예 적용되지 않아 데스크톱은 기존과 픽셀 동일하다.
   특이도를 원본 규칙보다 한 단계 올린 이유는 위 sec-title 과 동일(로드 순서 비의존).
   cf. company.css 의 `.cta-box h2.cta-jp-line .grad` 도 같은 이유로 auto-phrase 를 쓴다. */
@media (max-width: 760px) {
  .hero .hero-text h1,
  .hero .hero-l h1,
  .product-hero .product-hero-copy h1 {
    word-break: auto-phrase;
  }

  /* advertising 전용 보강: `.product-hero-copy` 는 grid item 이라 min-width:auto
     (= min-content) 때문에 열이 가용폭보다 좁아지지 못한다 — 390px 에서도 h1 상자가
     492px 로 잡힌다. 그러면 위 auto-phrase 가 "상자 기준"으로는 잘 접혀도 상자 자체가
     화면 밖이라 360px 이하에서 여전히 잘린다. min-width:0 으로 열이 실제 가용폭까지
     줄어들게 해야 auto-phrase 가 의미를 갖는다. */
  .product-hero .product-hero-copy {
    min-width: 0;
  }
}

/* JP 카피 길이에 맞춘 상자 폭 보정. 아래 두 곳은 `<br>` 로 의도한 줄 구성이 있는데
   JP 카피가 상자보다 길어 원치 않는 줄바꿈이 한 번 더 일어난다. 넓은 화면에서 의도대로
   보이도록 상자만 넓힌다(둘 다 margin:0 auto 중앙 정렬이라 중심 x 는 불변, max-width 라
   좁은 화면에서는 그대로 줄어든다).
   각 페이지 CSS 가 이 파일보다 **나중에** 로드되므로 선택자 특이도를 한 단계씩 올렸다.

   - hero-body: `…仕組みを構築するゲーム特化型マーケティングパートナーです。` 한 줄이
     766.4px 인데 max-width 가 620px 이라 두 줄로 쪼개졌다 → 800px.
     부모(.hero-grid)가 880px 이라 이 안에 들어간다.
   - cta-box .inner: home CTA 의 `ゲームビジネスを次のステージへ。` 한 줄이 711.6px 인데
     max-width 가 700px — 겨우 12px 모자라 `次の / ステージへ。` 로 끊겼다 → 740px.
     `.inner` 는 4개 페이지 CTA 가 모두 쓰므로 마커 클래스로 home 에만 적용한다.
     (공통으로 넓히면 company CTA 본문의 줄바꿈 위치까지 바뀐다 — 확인함.) */
.hero .hero-body {
  max-width: 800px;
}
.cta-box .inner.cta-jp-wide {
  max-width: 740px;
}

/* contents CTA 는 문장이 더 길어 880px 이 필요하다(`<br>` 로 2줄을 의도했으나 700px 안에서
   4줄로 쪼개져 있었다: `コンテンツだけでは / 伝えきれない、` + `実際のキャンペーン運用を /
   ご紹介します。`). 두 줄이 각각 712.5px·840.9px 이라 최장 840.9px 기준.
   단, inner 를 880px 로 넓히면 바로 아래 .csub 가 그 폭에 맞춰 재개행하면서
   `…コミュニテ / ィ活性化までを設計します。` 로 가타카나 중간이 끊긴다(실측). 그래서 .csub
   만 740px 로 되묶어 `…目標アクション、` 뒤에서 끊기던 기존 동작을 지킨다.
   home·company(cta-jp-wide, 740px)와 값이 달라 클래스를 분리했다. 880px 로 통일해도
   그 두 페이지의 렌더는 같지만(상자가 margin:0 auto 라 중심 불변), 뷰포트 916~1056px
   구간에서는 상자 폭이 실제로 달라져 재개행이 생길 수 있어 건드리지 않는다. */
.cta-box .inner.cta-jp-wide-lg {
  max-width: 880px;
}
.cta-box .inner.cta-jp-wide-lg .csub {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* `.grad` 디센더 잘림 방지.
   `.grad{background:...;background-clip:text;color:transparent}` 는 배경을 **요소 박스
   안에만** 칠한 뒤 글자 모양으로 오려낸다. 인라인 요소의 박스 높이는 폰트의
   ascent+descent 로 정해지므로, 글리프 잉크가 폰트 descent 보다 더 내려가면 그 부분은
   칠할 배경이 없어 사라진다 — `Playio` 의 `y` 꼬리가 잘려 보이는 원인.
   실측(Noto Sans CJK JP): 배경 하단 = 베이스라인 +13px, `y` 잉크 하단 = +11px 로
   **여유가 2px** 뿐이다(56px 폰트도 3px). descent 지표가 조금만 더 타이트한 폰트
   (Meiryo/Hiragino 등 실제 사용자 환경)면 곧바로 음수가 되어 잘린다.
   padding-bottom 으로 배경 영역만 아래로 넓혀 여유를 9~12px 로 확보한다. 인라인 요소의
   세로 padding 은 줄 높이·줄바꿈에 영향이 없고(3개 페이지에서 줄 구성 동일 확인),
   배경은 글자 모양으로 오려지므로 넓힌 영역에 추가로 칠해지는 것도 없다.
   대상: `.grad` 중 디센더를 가진 3곳(`Playioの実績`·`Playioのキャンペーン`·
   `Playioの最新情報`). 나머지 14곳은 디센더가 없어 무영향.
   NOTE: padding-bottom 은 어느 페이지 CSS 도 .grad 에 지정하지 않아 로드 순서와 무관하다. */
.grad {
  padding-bottom: 0.16em;
}

/* 가운데 정렬 hero 제목의 줄 끝 전각 마침표(。) 시각 보정.
   전각 마침표는 글리프(작은 원)가 em 상자의 좌측에 몰려 있고 오른쪽 약 0.5em 이 빈
   여백이다. 이 여백까지 줄 폭에 포함돼 text-align:center 가 "여백 포함 상자" 기준으로
   정렬하므로, 눈에 보이는 잉크는 중앙보다 왼쪽으로 치우친다(실측 1440px: 둘째 줄 잉크
   중심이 중앙보다 contents 15.5px·company 15px 좌측). 마침표에 음수 우측 마진을 줘 그
   빈 여백만큼 줄 폭에서 덜어내면 재중앙정렬로 줄이 오른쪽으로 밀려 잉크가 중앙에 온다.
   Chromium 은 hanging-punctuation 미지원이라 이 수동 보정을 쓴다. 적용 대상은 줄 끝
   마침표를 `<span class="hpd">。</span>` 로 감싼 곳(contents·company hero h1)뿐이다.
   home 은 둘째 줄에 마침표가 없고(첫 줄 끝 `、` 는 실측상 정렬 영향 없음),
   advertising 은 hero 가 좌측정렬이라 해당 없음. */
.hero h1 .hpd {
  margin-right: -0.5em;
}

/* `.meiryo` 무력화. 원본은 `社` 6곳을 `<span class="meiryo">社</span>` 로 감싸 일본어
   자형을 강제했다 — 당시 --font 가 Pretendard(한국어 폰트) 였기 때문이다. 그런데 위에서
   body --font 를 Meiryo 우선 JP 스택으로 바꾼 지금, 이 클래스는 불필요할 뿐 아니라
   **의도와 정반대로 동작한다**:
     .meiryo{font-family:'Meiryo',sans-serif} → Windows 가 아니면 Meiryo 가 없어 일반
     sans-serif 로 폴백 → fontconfig 가 한국어 CJK 를 고른다.
   실측(Linux/Chrome): 해당 문단이 `Noto Sans CJK JP × 39자 + Noto Sans CJK KR × 1자` 로
   `社` 한 글자만 한국어 폰트였다. 자형을 바로잡으려던 장치가 자형을 깨뜨린 셈.
   font-family:inherit 로 body 의 JP 스택을 그대로 물려받게 하면 Windows=Meiryo,
   mac=Hiragino, Android=Noto Sans JP 로 어디서나 주변 텍스트와 같은 일본어 자형이 된다
   (수정 후 실측: 문단 전체 `Noto Sans CJK JP × 40자` 단일 폰트).
   마크업의 span 은 원본 그대로 두고 CSS 만 무력화한다. `span.meiryo` 로 특이도를 올린
   이유는 다른 규칙들과 동일 — 각 페이지 CSS 가 이 파일보다 나중에 로드된다. */
span.meiryo {
  font-family: inherit;
}

/* company > Why It Matters 섹션(`<section class="section" id="why">`). 여기도 JP 카피가
   .sec-head 의 760px 를 넘어 `<br>` 로 의도한 줄 구성 위에 줄바꿈이 한 번 더 얹힌다.
   - 제목  `ゲームが再び選ばれる理由になります。`                    801.3px → `理由に / なります。`
   - 본문  `プレイヤーが自らの時間や…生み出す仕組みです。`          878.6px → `…体験を / 生み出す仕組みです。`
   → 최장 878.6px 이 들어가도록 920px.
   NOTE: 이 섹션은 class 가 아니라 id 라 company.css 의 `.why .sec-title{word-break:keep-all}`
   대상이 아니다. 즉 넘치지 않고 정상적으로 접혀 왔고, 각 줄은 이미 좌우 대칭이었다
   (측정: 66.3/66.3, 89.2/89.2). 어긋나 보인 건 정렬 버그가 아니라 어색한 분할 탓이며,
   한 줄로 합쳐지면 해소된다. id 선택자라 특이도가 충분해 마커 클래스가 필요 없다. */
#why .sec-head.center {
  max-width: 920px;
}

/* advertising > Global Presence 섹션. `<br>` 로 의도한 줄 구성이 있는데 JP 카피가
   .sec-head 의 760px 를 넘어 원치 않는 줄바꿈이 한 번 더 일어난다.
   - 제목  `Playioのキャンペーンを展開できます。`                          805.6px
   - 본문  `実際のプレイデータに基づく…広告運用を支援します。`            860.9px
   → 최장 860.9px 이 들어가도록 900px. 부모(.wrap 내부)가 1176px 이라 여유 있다.
   이 페이지엔 `.sec-head.center` 가 4곳이라 공통으로 넓히면 다른 섹션의 줄 구성까지
   바뀌므로, 마크업에 `gp-jp-wide` 마커 클래스를 붙여 이 섹션에만 적용한다
   (company.css 의 `.cta-box h2.cta-jp-line` 과 동일한 접근. `gp-` 는 advertising.css
   가 이미 Global Presence 네임스페이스로 쓰는 접두사). */
.sec-head.center.gp-jp-wide {
  max-width: 900px;
}

/* 원본 파편화 보정 ①: 푸터 반응형 축소.
   4개 페이지 CSS 모두 기본값은 `.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr}` 인데,
   이를 좁은 화면에서 줄이는 단계가 home.css 에만 있다(920px→2열, 760px→1열).
   company·advertising·contents 는 모바일에서도 4열을 유지해 푸터가 뷰포트를 넘친다
   (390px 기준 .foot-col 이 최대 +203px). 원본 html 을 확인한 결과 playio_jp_home.html
   에만 이 단계가 있고 나머지 3개 원본에는 실제로 없다 — 추출 누락이 아니라 원본의 구멍.
   home 의 값을 그대로 이식해 4개 페이지를 통일한다(home 은 동일 값이라 무영향).
   `.footer` 를 붙인 이유: 이 파일은 각 페이지 CSS 보다 **먼저** 로드되므로(<link> 순서
   jp-common → {home,company,...}.css), 특이도가 같으면 페이지 CSS 의 기본 4열 규칙이
   항상 이긴다. 미디어 쿼리는 특이도를 올려주지 않는다. */
@media (max-width: 920px) {
  .footer .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 760px) {
  .footer .foot-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* 원본 파편화 보정 ②: 모바일 hero 제목 축소.
   `@media(max-width:480px){.hero h1{font-size:26px;line-height:1.22}}` 역시 home.css
   에만 있다. 그래서 company·contents 는 320px 에서도 32px 를 유지하고, contents 는
   `ゲームマーケティングの`(11자 × 32px = 339px) 가 가용폭 305px 에 문절 단위로는
   물리적으로 들어갈 수 없어 잘린다. home 과 동일한 값으로 맞춘다.
   (advertising 은 `.product-hero-copy h1` 이라 이 선택자에 걸리지 않는다.)
   특이도를 `.hero .hero-text h1` 로 올린 이유는 위와 동일 — 각 페이지 CSS 의
   `.hero h1` 기본 규칙과 특이도가 같으면 로드 순서에 좌우된다. */
@media (max-width: 480px) {
  .hero .hero-text h1 {
    font-size: 26px;
    line-height: 1.22;
  }
}

/* JP → 기존 다국어 홈 탈출(Global). 원본 마크업에 없던 최소 추가. */
.gnb-lang {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500, #5b6472);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 4px;
}
.gnb-lang:hover {
  color: var(--blue-ink, #1a4cff);
}
.m-lang {
  font-size: 16px;
  font-weight: 600;
  padding: 15px 8px;
  border-bottom: 1px solid var(--line, #e6e9f0);
  color: var(--ink-700, #2c3340);
  text-decoration: none;
}
.foot-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.foot-lang {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}
.foot-lang:hover {
  opacity: 1;
  text-decoration: underline;
}