/* 온말 홈페이지 — 네 페이지가 함께 쓰는 것.
   리셋 · 본문 바탕 · 신호 문법 · nav 부품 · 포커스 · 축소 모션.

   ⚠️ 여기 넣을 수 있는 것은 <b>네 페이지에서 값이 같은 규칙</b>뿐입니다.
      본문 line-height(첫 화면 1.65 / 문서 1.75), .wrap 너비(1080 / 760 / 860),
      링크 색(inherit / 아쿠아)은 페이지마다 달라서 home.css·doc.css 에 있습니다.
      여기로 끌어올리면 그 순간 한쪽이 조용히 바뀝니다. */

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

/* 🔴 앵커로 들어온 사람이 제목을 보게 합니다. 앱 정보 화면의 [로드맵] 버튼이
   #roadmap 으로 들어오는데, nav 가 sticky 가 되는 날 이 값이 없으면 제목이
   nav 뒤에 숨습니다. sticky 를 넣게 되면 이 값을 nav 높이로 올리십시오. */
section[id]{scroll-margin-top:24px}

body{
  background:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:16px; -webkit-font-smoothing:antialiased;

  /* 🔴 <b>한국어는 낱말 안에서 끊으면 안 됩니다.</b> 기본값은 글자 아무 데서나
     끊으므로 "자막이" 가 <c>자 / 막이</c> 로, "지연이" 가 <c>지 / 연이</c> 로
     갈라졌습니다 — 제목이 커질수록 더 자주 납니다. 애플 한국어 페이지도 body 에
     같은 값을 겁니다(apple.com/kr 실측 2026-08-03: body·모든 제목 keep-all).
     ⚠️ 짝인 <c>overflow-wrap</c> 은 <b>지우지 마십시오.</b> keep-all 만 두면 칸보다
        긴 덩어리(이메일 주소·긴 영문 낱말)가 <b>칸 밖으로 삐져나갑니다.</b>
        이 값은 삐져나갈 때만 끊습니다.
     🚫 CJK 만의 규칙이 아닙니다 — 31개 언어 중 29개가 이 한 줄을 함께 씁니다. 라틴·키릴은
        원래 공백에서만 끊으므로 달라지는 것이 없고, 태국어(공백 없음)는
        line-break 가 따로 봅니다.
     ⚠️ <b>일본어·중국어 둘만 예외입니다</b> — 바로 아래 :lang() 규칙에서 되돌립니다.
        (2026-08-06 이전에는 예외가 없어서 일본어 첫 화면이 가로로 넘쳤습니다.) */
  word-break:keep-all; overflow-wrap:break-word;
}

/* 🔴 <b>일본어·중국어는 위 규칙에서 빼야 합니다</b> (2026-08-06).
   keep-all 은 "낱말 안에서 끊지 마라"입니다. 한국어는 낱말을 <b>공백으로</b> 나누므로
   끊을 자리가 남습니다 — 그래서 위 규칙이 한국어에서 맞습니다. 일본어·중국어에는
   그 공백이 없어서, keep-all 이 <b>문단 하나를 통째로 안 끊기는 덩어리 하나</b>로
   만듭니다.

   그러면 그 덩어리의 min-content 가 문단 전체 길이가 됩니다. 격자의 <c>1fr</c> 은
   <c>minmax(auto,1fr)</c> 이라 min-content 아래로 못 줄어들고, 칸이 문단만큼 벌어져
   <b>페이지가 가로로 넘칩니다</b> — 2026-08-06 일본어 첫 화면에서 1265px 창에
   scrollWidth 1407px. 짝인 overflow-wrap:break-word 는 <b>구해 주지 못합니다.</b>
   그 값은 넘칠 때만 끊고 <b>min-content 계산에는 안 들어가기</b> 때문입니다.

   측정(#how .step 한 문단, ja): keep-all 552.66px → normal 65.66px.
   ⚠️ <c>:lang(zh)</c> 는 <c>zh-cn</c>·<c>zh-tw</c> 를 함께 잡습니다(하이픈 앞 대조).
      한국어·태국어는 여기 걸리지 않으므로 위 keep-all 을 그대로 씁니다.
   ⚠️ 되돌리려거든 ja·zh-cn·zh-tw 로 첫 화면을 열어 scrollWidth 를 <b>먼저 재십시오.</b>
      정적 검사기(check-site.ps1)는 배치를 못 재므로 이것을 잡아 주지 않습니다. */
:lang(ja), :lang(zh){ word-break:normal }

::selection{background:var(--jade);color:var(--ink)}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:4px}

/* ── 건너뛰기 링크 ────────────────────────────────────────────────────────
   키보드로만 다니는 사람은 페이지를 열 때마다 nav 를 지나야 본문에 닿습니다.
   페이지가 넷이고 nav 에 항목이 넷이니 그것만으로 매번 네 번을 누릅니다.

   ⚠️ <c>display:none</c> 으로 숨기면 <b>탭 순서에서도 사라져</b> 아무 소용이
      없습니다. 화면 밖으로 밀어 두었다가 포커스를 받으면 돌아오게 합니다.
   ⚠️ 위치는 <c>inset-inline-start</c> 입니다 — 아랍어(RTL)에서 오른쪽으로 갑니다. */
.skip{position:absolute;inset-inline-start:-9999px;top:12px;z-index:100;
  background:var(--night);color:var(--paper);border:1px solid var(--jade);
  border-radius:8px;padding:10px 16px;text-decoration:none;font-weight:600;font-size:14.5px}
.skip:focus{inset-inline-start:24px}

/* ── 신호 문법 — 섹션 머리표 ──────────────────────────────────────────────
   온말이 하는 일은 하나입니다: 고르지 않은 목소리를 고른 글로 바꾸는 것.
   앱 아이콘이 이미 그 그림입니다(파형 5개 위, 자막 바 아래).

   <b>마크업이 아니라 ::before</b> 로 그립니다 — 열 군데 넘는 kicker 에 <i> 를
   손으로 넣으면 하나는 반드시 빠지고, 31개 언어 번역 키와도 무관해야 합니다. */
.kicker::before,.eyebrow::before{
  content:"";width:10px;height:12px;flex-shrink:0;margin-bottom:1px;
  background:
    linear-gradient(currentColor,currentColor) 0   100%/2px 6px  no-repeat,
    linear-gradient(currentColor,currentColor) 4px 100%/2px 12px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 100%/2px 4px  no-repeat}

/* ── nav 부품 ─────────────────────────────────────────────────────────────
   nav 컨테이너 자체(padding·gap·flex-wrap)는 페이지마다 달라 각자 파일에 있습니다. */
nav img{width:34px;height:34px;border-radius:9px}
nav b{font-family:var(--display);font-weight:700;font-size:21px}
nav .sp{flex:1}

.lsel{font-family:var(--mono);font-size:12.5px;color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:7px 10px;cursor:pointer;max-width:170px}
.lsel:hover{color:var(--paper);border-color:var(--jade)}
/* 드롭다운 목록은 OS 가 그립니다 — 어두운 팔레트를 물려주면 글자가 안 보입니다. */
.lsel option{color:#111;background:#fff}

.tbtn{width:37px;height:37px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;font-size:15px;line-height:1;
  transition:.12s ease-out}
.tbtn:hover{color:var(--paper);border-color:var(--jade)}

/* ── 축소 모션 ────────────────────────────────────────────────────────────
   ⚠️ 이 규칙은 <b>여기 남습니다</b>. motion.css(C9)는 애니메이션을 넣는 파일이고
      이것은 끄는 규칙이라, 링크가 실패하거나 파일을 지웠을 때도 살아 있어야 합니다. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}