/* 🔴 표 셀의 font-size 와 padding 은 지정하지 않습니다. Material 기본값(0.64rem,
   0.9375em 1.25em)을 그대로 씁니다. 값을 주면 기본값을 덮어써서 표가 본문보다 크게 보이고,
   같은 저자의 다른 가이드북(sagemaker-finetune-serve-e2e)과 글자 크기가 어긋납니다. */

/* 표 안의 긴 문자열이 줄바꿈되지 않아 표가 오른쪽으로 삐져나가는 문제를 막습니다.
   이 레포는 78자 ECR URI(sagemaker-tritonserver 이미지)와 68자 CloudWatch 지표명
   (SageMakerInferenceComponentConcurrentRequestsPerCopyHighResolution)이 표 안에
   들어갑니다. 공백이 없어 브라우저가 스스로 줄을 못 나눕니다.
   텍스트 자체는 그대로 두고 표시만 여러 줄로 흘립니다. */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 그래도 넘치면 표 자체를 가로 스크롤합니다(본문은 밀리지 않게).
   Material 기본값이지만 위 줄바꿈으로 대부분 해결되고 이건 최후 방어입니다. */
.md-typeset .md-typeset__table {
  display: block;
  overflow-x: auto;
}

/* 인라인 코드(`option.tensor_parallel_degree` 같은 긴 식별자)도 같은 이유로 처리합니다.
   Material 기본값 word-break:break-word 는 '단어 경계'만 끊는데, 공백도 하이픈도 없는
   식별자는 한 단어로 취급돼 끊기지 않고 표를 밀어냅니다.
   🔴 pre 안의 code(=코드블록)는 제외합니다. 코드블록에 줄바꿈을 강제하면 셸 명령이
   중간에서 꺾여 복사와 읽기가 어려워집니다. */
.md-typeset :not(pre) > code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 표 안의 인라인 code 는 셀 폭이 좁아 더 공격적으로 끊습니다. 여기도 pre 는 제외합니다. */
.md-typeset table:not([class]) td :not(pre) > code,
.md-typeset table:not([class]) th :not(pre) > code {
  word-break: break-all;
}

/* 코드 블록 안의 긴 명령(uv run python ...)은 줄바꿈 없이 가로 스크롤합니다. */
.md-typeset pre > code {
  white-space: pre;
}

/* 표를 감싸는 사각 테두리를 없앱니다. Material 기본값은 검정 12%(#0000001f) 테두리 +
   둥근 모서리인데, 이 레포는 표 124개 중 86개가 2~3열이라 폭이 짧습니다. 좁은 표에서는
   테두리가 내용보다 먼저 눈에 들어와 무겁게 읽힙니다.
   헤더 음영과 행 구분선(둘 다 아래에 있음)만으로 구조가 충분히 드러납니다. */
.md-typeset table:not([class]) {
  border: none;
  border-radius: 0;
}

/* 표 헤더에만 옅은 회색을 깔아 본문 행과 구분합니다. mkdocs-material 기본값은 흰 배경 +
   굵은 글씨뿐이어서, 이 레포처럼 표가 많으면 헤더가 첫 데이터 행처럼 읽힙니다.
   🔴 본문 행은 줄무늬 없이 단색으로 둡니다. 헤더 경계만 있으면 충분하고, 줄무늬를 더하면
   셀 안의 코드나 강조 배경과 겹쳐 지저분해집니다. */
.md-typeset table:not([class]) th {
  background-color: #f0f1f3;
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  font-weight: 600;
}

/* 다크 모드에 같은 회색을 깔면 배경보다 밝아져 헤더가 튀어 보입니다.
   테마 변수로 살짝만 띄웁니다(스킴을 바꿔도 따라옵니다). */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--md-default-fg-color--lightest);
}

/* 실측 수치를 강조하는 굵은 표기가 표에서 묻히지 않게 */
.md-typeset table:not([class]) strong {
  color: var(--md-primary-fg-color);
}