/* KRATO 소개 사이트 — 반응형 · 줄바꿈 보정(원본 CSS 바로 뒤). 원본 규칙은 고치지 않고 덮기만 한다. 글자는 바꾸지 않는다. README 구간표 */

/* 한글은 낱말 단위로 줄을 바꾼다(사용자 결정 2026-11-08, 모든 폭) — 원본은 제목 · 리드 몇 곳에만 keep-all 이라 문단이 "포트|폴리오" 처럼 갈렸다.
   낱말 하나가 칸보다 길 때만 그 안에서 끊는다(break-word 는 칸의 최소 폭을 바꾸지 않는다 — 배치 그대로) */
html[data-lang=ko] body{word-break:keep-all;overflow-wrap:break-word}
/* 사파리 keep-all 버그 우회: fix/typeset.js 가 버그를 재서 <html data-ka="wj"> 를 켜고 한글 낱말 안에 U+2060 을 넣는다 */
html[data-ka=wj] body,html[data-ka=wj] body *{word-break:normal!important}

/* 메뉴 카드 글자 그림(휴대폰 2칸 · 칸 안 68~117px): 원본 20px 'INDUSTRIES.' 가 칸을 51px 넘친다(≤418) — 글자 그림을 칸 폭에 맞춰 줄인다.
   칸 폭의 16.4% = 'INDUSTRIES.' 가 꼭 들어가는 크기, 작은 머리글(8px)은 'SECURITY / AI' 가 한 줄에 드는 10%(320px 에서 'AI' 두 글자가 홀로 떨어졌다). 칸이 넓으면 원본 크기 그대로 */
@media(max-width:430px){
  .mega-type-preview{container-type:inline-size}
  .mega-type-preview strong{font-size:min(20px,16.4cqi)}
  .mega-type-preview>span{font-size:min(8px,10cqi)}
}

/* 기술 예시 머리글 'EXAMPLE / BOUNCE WITHOUT PARTICIPATION'(Geist Mono 11px, 한 줄 고정): 351px 아래에서 칸(화면 − 68px)보다 길어
   격자 칸을 밀고 320~328px 는 페이지가 옆으로 밀린다 — 글자 크기를 칸에 맞춰 줄인다(38자 × 0.68em = 25.84em, 자간 비율 그대로) */
@media(max-width:360px){.example .mono{font-size:min(11px,calc((100vw - 70px) / 25.9))}}

/* 머리 줄(≤366): 언어 · 도입 문의 · 메뉴가 한 줄로 서려면 225px 가 필요한데 320px 에서는 179px 뿐이라, 원본은 '도입 문의 ↗' 버튼을
   46px 로 눌러 세 줄로 접는다(영어는 머리 줄이 화면 밖으로 22px). 버튼을 한 줄로 두고 간격 · 버튼 안쪽 여백만 폭에 따라 줄인다.
   필요한 양 = 370.8 − 화면 폭(로고와 4px 띄움) — 366 · 359 · 341px 세 계단. 로고는 그대로 */
@media(max-width:366px){
  .contact-btn{white-space:nowrap}
  .nav-right{gap:10px}
  .lang{margin-right:4px}
}
@media(max-width:359px){
  .lang button{padding:5px 7px}
  .contact-btn{padding:9px}
}
@media(max-width:341px){
  .nav-right{gap:7px}
  .lang{margin-right:0}
  .lang button{padding:5px}
  .contact-btn{padding:9px 8px}
  .contact-btn span{margin-left:4px}
}

/* 시장 줄(≤760, 가운데 문구는 원본이 숨김): 시계와 'GAINERS – DECLINERS' 가 한 줄에 다 안 들어가면(≈400px 아래) 원본은 둘 다 두 줄로 접어
   시각 · 'DECLINERS' 가 홀로 떨어진다. 각자 한 줄로 두고, 모자랄 때만 버튼이 다음 줄로 내려간다 */
@media(max-width:760px){
  .mbar{flex-wrap:wrap;row-gap:8px}
  .mbar #now,.mbar .gd span{white-space:nowrap}
}

/* 세 가지 렌즈 — 다이버전스 짝 목록(≤392 · 렌즈가 세 칸으로 서는 1051~1110): 이름 칸이 58~71px 뿐이라(막대 칸 70px) 'Index ↔ / Breadth' 처럼 한 단어가 떨어진다.
   막대를 이름 아래 둘째 줄로 내려 이름 칸을 넓힌다(번호 · 이름 · 값 · 막대 그대로, 차례만 두 줄) */
@media(max-width:392px),(min-width:1051px) and (max-width:1110px){
  .pairs .pr{grid-template-columns:22px 1fr 34px;row-gap:6px}
  .pairs .pr .pb{grid-row:2;grid-column:2/4}
}

/* 화면 갤러리 이름표: 이름(짧은 이름표)과 설명이 한 줄을 나눠 쓰다 이름이 눌려 'Indicators · / Macro' 'Topology · / 확대' 로 접힌다(320~410 · 770~810).
   이름은 줄어들지 않게, 420px 아래에서는 설명을 이름 아래 줄로 */
.gallery-grid button>div:last-child span:first-child{flex-shrink:0}
@media(max-width:420px){.gallery-grid button>div:last-child{flex-direction:column;align-items:flex-start;gap:6px}}

/* 렌즈 · 지표 카드 머리(≤400 · 렌즈가 세 칸인 1051~1110): 이름표와 꼬리표가 서로 눌려 'Fed / funds' 'alert / 0.35' 로 접힌다 — 둘이 한 줄에 안 들어갈 때만 꼬리표가 다음 줄로 */
@media(max-width:400px),(min-width:1051px) and (max-width:1110px){.lc .lh{flex-wrap:wrap;row-gap:4px}}

/* 조립 시트 머리(≤400): 제목이 'SHEET 01 / 03' 옆 120px 칸에 들어가 네 줄이 되고 끝말이 홀로 남는다 — 쪽 번호를 제목 위로 */
@media(max-width:400px){
  .sheet-head{grid-template-columns:1fr;row-gap:8px}
  .sheet-head .sheet-no{order:-1;justify-self:start}
}

/* 조립 안내 머리(≤400): 'OPX · LPM' 이 'OPX · / LPM' 으로 접힌다 — 한 줄로 두고 왼쪽 이름표가 줄을 바꾼다 */
@media(max-width:400px){
  .ha-head{gap:12px}
  .ha-head .ha-model{white-space:nowrap;flex-shrink:0}
}

/* 메뉴 카드 설명(휴대폰 두 칸 · 한 줄 8자 남짓): 끝 두 낱말이 한 줄에 다 안 들어가 묶을 수 없다 — 이 문단만 그 기기 글꼴로 끝줄 한 낱말을 피해 줄을 나눈다.
   (메뉴는 화면보다 길어 한 칸으로 늘릴 수 없다 — 원본 메뉴는 스크롤되지 않는다) */
@media(max-width:430px){.mega-card p{text-wrap:pretty}}

/* 문서 표(≤486): 세 칸이 274px 에 눌려 '리테일 / 심리' '지표 / 발표 · / 정책 / 경로' 처럼 한두 글자씩 떨어진다.
   원본처럼 상자 안에서 가로로 밀어 보게 두고(원본도 320px 에서 15px 넘친다), 표가 440px 아래로는 줄지 않게 */
@media(max-width:486px){.docs-table table{min-width:440px}}

/* 메뉴 카드 제목(휴대폰 두 칸): 제목 칸 96px(오른쪽 화살표 ↗ 포함)에 16px 'Certifications' 'About KRATO'(105px)가 안 들어가 'Certifica|tions' 로 쪼개지거나
   두 낱말이 한 줄씩 된다(≤354) — 카드 안쪽 폭(화면/2 − 58px)의 12.8% 로 줄인다(320px 에서 13px, 366px 위는 원본 16px).
   카드에 container-type 을 걸면 카드의 자연 폭이 0 이 되어 메뉴 패널이 쪼그라든다 — 화면 폭으로 계산한다 */
@media(max-width:430px){.mega-panel .mega-card h2{font-size:min(16px,calc(6.4vw - 7.4px))}}

/* 도면 바닥 줄(≥761, 한 줄 배치): 긴 설명문과 함께 양 끝 이름표('KRATO / OPX' 'UNIT · mm')까지 줄어들어 'UNIT · / mm' 으로 접힌다 — 이름표는 줄어들지 않게 */
.bp-foot>:first-child,.bp-foot>:last-child{flex-shrink:0}

/* 메인 결정 표(.cmp, 4칸 자동 폭): 첫 칸의 짧은 대응 이름표('익스포저 유지' 'Adjust after confirmation')가 650~1150px 에서 82px 로 눌려
   '익스포저 / 유지' 로 접힌다(사파리) — 첫 칸은 한 줄로, 나머지 칸이 조금씩 양보한다(넓은 폭에서는 원래 한 줄이라 그대로) */
.cmp td:first-child{white-space:nowrap}

/* 문서 표 첫 칸(채널 · 항목 이름표, 가장 긴 것 'C3 News · interpretation'): 칸이 눌려 'C3 News · / interpretation' 으로 접힌다 — 한 줄로 */
.docs-table td:first-child{white-space:nowrap}