/* theme.json 이 대부분을 처리한다. 여기에는 블록 설정으로 표현할 수 없는 것만 둔다. */

/* 본문 안의 표는 화면을 밀지 않고 표만 스크롤한다. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--lls-line);
	padding: 0.55rem 0.75rem;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--lls-soft);
}

/* 코드 블록도 마찬가지로 가로 스크롤만 준다. */
.wp-block-code {
	overflow-x: auto;
	background: var(--wp--preset--color--lls-soft);
	border: 1px solid var(--wp--preset--color--lls-line);
	border-radius: 4px;
	padding: 0.9rem 1rem;
	font-family: var(--wp--preset--font-family--lls-mono);
	font-size: 0.85rem;
}

/* 목록 줄간격은 본문보다 조금 좁게. 항목이 많은 페이지가 길어지는 걸 막는다. */
.wp-block-list li {
	margin-bottom: 0.4rem;
	line-height: 1.7;
}

/* 이미지가 컨테이너를 넘지 않게. FSE 기본값만으로는 넘치는 경우가 있다. */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* 키보드 사용자를 위한 초점 표시. 블록 테마 기본은 브라우저 기본에 맡겨져 흐리다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--lls-accent);
	outline-offset: 2px;
}

/* 본문 링크가 문단 안에서 눈에 띄되 밑줄이 글자를 가리지 않게. */
.wp-block-post-content a {
	text-underline-offset: 0.15em;
}

/* 모바일에서 헤더 메뉴가 제목과 붙는 것을 막는다. */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container-open {
		margin-left: auto;
	}
}