/*
Theme Name:   Neonomad
Theme URI:    https://neonomadj.com/
Author:       Neonomad
Description:  몽골 사업 운영과 AI·시스템 실전 기록을 위한 블록 테마. 한글 본문 가독성을 최우선으로 설계했다.
Version:      1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  neonomad
Tags:         blog, one-column, block-patterns, full-site-editing, custom-colors, editor-style
*/

/* ==========================================================================
   1. 한글 타이포그래피
   한글은 단어 중간에서 줄바꿈되면 가독성이 크게 떨어진다.
   keep-all 로 막되, 긴 URL 은 깨져야 하므로 overflow-wrap 을 함께 준다.
   ========================================================================== */

:root {
	--nn-line: var(--wp--preset--color--line);
	--nn-muted: var(--wp--preset--color--muted);
	--nn-radius: 6px;
	/* 아바타는 따로 뺐다. 원형으로 바꾸려면 50% 로만 고치면 된다. */
	--nn-avatar-radius: var(--nn-radius);
}

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, th, td,
figcaption, blockquote, .wp-block-post-excerpt__excerpt {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
	text-wrap: pretty;
}

/* 숫자·영문이 섞인 한글 본문에서 자간이 벌어지는 것을 막는다 */
body {
	font-variant-numeric: tabular-nums lining-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 코드·URL 은 단어 유지 규칙에서 제외 */
code, kbd, samp, pre, .wp-block-code {
	word-break: break-all;
	overflow-wrap: normal;
}

/*
 * 메뉴 라벨도 제외한다.
 * 위 규칙이 li 에 걸려 있어서 「AX 노트」나 「전체 글」이 공백에서 끊겨 두 줄이 된다.
 * 본문은 공백에서 끊겨야 읽기 좋지만 메뉴 항목은 통째로 유지돼야 한다.
 */
.wp-block-navigation-item__label {
	white-space: nowrap;
}

/* ==========================================================================
   2. 본문 리듬
   ========================================================================== */

.wp-block-post-content > * + * {
	margin-block-start: 1.6em;
}

.wp-block-post-content h2 {
	margin-block-start: 2.8em;
	margin-block-end: 0.8em;
}

.wp-block-post-content h3 {
	margin-block-start: 2.2em;
	margin-block-end: 0.6em;
}

.wp-block-post-content :where(ul, ol) {
	padding-inline-start: 1.25em;
}

.wp-block-post-content li + li {
	margin-block-start: 0.5em;
}

.wp-block-post-content figcaption {
	text-align: center;
}

/* ==========================================================================
   3. 섹션 레이블 — "대표글", "AX Notes" 처럼 섹션을 여는 작은 제목
   ========================================================================== */

.nn-section-label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-block-end: var(--wp--preset--spacing--30);
}

/*
 * 섹션 시작을 브랜드 색 막대로 표시한다.
 * 글자 자체를 accent 로 칠하면 링크와 같은 색이라 누를 수 있는 것처럼 보인다.
 * 그래서 색은 장식에만 준다.
 */
.nn-section-label::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

.nn-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--nn-line);
}

/* ==========================================================================
   4. 히어로
   ========================================================================== */

/*
 * 히어로는 글 | 이미지 좌우 분할이다(core/media-text).
 * 이미지가 세로를 채우므로 별도 패딩 없이도 높이가 나온다.
 * 배경에 깔고 글을 얹지 않은 이유 — 어두운 오버레이가 필요해지고
 * 나머지 섹션이 전부 밝아서 혼자 튄다.
 */
/*
 * 히어로는 neonomad-home 플러그인이 그린다 (외모 → 홈 섹션).
 * 배경 사진·막 농도·글자색을 관리자에서 고르므로 스타일도 그쪽(assets/home.css)에 둔다.
 */

/* ==========================================================================
   5. 글 카드 (Query Loop)
   ========================================================================== */

.nn-card {
	display: flex;
	gap: 0.5rem;
}

/* 대표글 그리드 — 이미지 위, 글 아래 */
.wp-block-post-template-is-layout-grid .nn-card {
	flex-direction: column;
}

/* 목록형 — 썸네일 좌, 글 우 */
.nn-list .nn-card {
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
}

.nn-list .nn-card > .wp-block-post-featured-image {
	flex: 0 0 88px;
	margin: 0;
}

.nn-list .nn-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
	min-width: 0;
}

.nn-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.55;
	margin: 0;
}

.nn-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nn-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.nn-card .wp-block-post-featured-image img {
	aspect-ratio: 1.9;
	object-fit: cover;
}

/* 이미지·미디어 라운드 */
.wp-block-post-featured-image img,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-media-text__media img,
.wp-block-cover,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-embed video {
	border-radius: var(--nn-radius);
}

.wp-block-post-featured-image,
.wp-block-image,
.wp-block-cover {
	overflow: hidden;
	border-radius: var(--nn-radius);
}

/* 단일 글 대표이미지.
   원본 비율을 유지해 잘리지 않게 하고, 대신 높이 상한으로 크기를 제한한다.
   세로로 긴 이미지는 높이에 걸려 자동으로 작아진다. */
.nn-post-hero {
	text-align: center;
}

.nn-post-hero img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 460px;
	object-fit: contain;
	margin-inline: auto;
}

/* 입력 요소 */
.wp-block-search__input,
.wp-block-search__button,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	border-radius: var(--nn-radius);
}

/* 목록형 (최신글) */
.nn-list .wp-block-post {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--nn-line);
}

.nn-list .wp-block-post:first-child {
	border-block-start: 1px solid var(--nn-line);
}

/* ==========================================================================
   5.5 아바타
   댓글·글쓴이 영역의 프로필 이미지. 코어가 내보내는 마크업이 문맥마다 달라
   나오는 모든 형태를 함께 잡는다.
   ========================================================================== */

.wp-block-avatar img,
img.avatar,
.wp-block-post-author__avatar img,
.comment-author img,
.avatar-container img {
	border-radius: var(--nn-avatar-radius);
	display: block;
}

/* 이미지가 정사각형이 아니어도 찌그러지지 않게 잘라서 채운다 */
.wp-block-avatar img,
img.avatar {
	object-fit: cover;
	aspect-ratio: 1;
}

/* ==========================================================================
   6. 헤더 / 푸터
   ========================================================================== */

.nn-header {
	border-block-end: 1px solid var(--nn-line);
}

.nn-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.nn-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.nn-header .wp-block-navigation a {
	text-decoration: none;
}

.nn-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.nn-footer {
	border-block-start: 1px solid var(--nn-line);
	color: var(--nn-muted);
	font-size: var(--wp--preset--font-size--small);
}

.nn-footer a {
	color: var(--nn-muted);
}

/* ==========================================================================
   7. 접근성
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   8. 제목만 있는 글 목록 (홈 최신글, 관련 글, 404)
   날짜를 붙이면 오래된 글이 낡아 보여 클릭을 막는다.
   제목만 두고 행 자체를 넓은 클릭 영역으로 만든다.
   ========================================================================== */

.nn-recent .wp-block-post-template {
	gap: 0;
}

/* 코어 flow 레이아웃은 자식에 margin-block-start(=blockGap) 를 건다.
   gap 으로는 제거되지 않으므로 마진을 직접 0 으로 만든다. */
.nn-recent .wp-block-post-template > li,
.nn-list .wp-block-post-template > li {
	margin-block-start: 0;
	margin-block-end: 0;
}

.nn-recent .wp-block-post {
	border-block-start: 1px solid var(--nn-line);
}

.nn-recent .wp-block-post:last-child {
	border-block-end: 1px solid var(--nn-line);
}

.nn-recent-item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-block: 0.6rem;
	padding-inline: 0.6rem;
	margin-inline: -0.6rem;
	border-radius: var(--nn-radius);
	transition: background-color 120ms ease;
}

.nn-recent-item > .wp-block-post-featured-image {
	flex: 0 0 56px;
	margin: 0;
}

.nn-recent-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.nn-recent-item .wp-block-post-terms {
	color: var(--nn-muted);
	line-height: 1.4;
}

.nn-recent-item .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.nn-recent-item .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.nn-recent-item:hover {
	background-color: var(--wp--preset--color--surface);
}

.nn-recent-item .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.nn-recent-item .wp-block-post-title a {
	display: block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nn-recent-item:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   9. 이전 / 다음 글
   실제 제목을 보여주므로 길이가 길다. 두 칸으로 나누고 줄바꿈을 허용한다.
   ========================================================================== */

.wp-block-post-navigation-link {
	max-width: 48%;
	line-height: 1.5;
}

.wp-block-post-navigation-link.post-navigation-link-next {
	text-align: right;
}

.wp-block-post-navigation-link a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	color: var(--nn-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 0.2rem;
}

@media (max-width: 781px) {
	.wp-block-post-navigation-link {
		max-width: 100%;
	}

	.wp-block-post-navigation-link.post-navigation-link-next {
		text-align: left;
	}
}

/* 섹션 하단 더보기 링크 */
.nn-more a {
	text-decoration: none;
	font-weight: 600;
}

.nn-more a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 모바일 — 썸네일 축소 */
@media (max-width: 600px) {
	.nn-recent-item > .wp-block-post-featured-image {
		flex-basis: 48px;
	}

	.nn-list .nn-card > .wp-block-post-featured-image {
		flex-basis: 72px;
	}
}

/* ==========================================================================
   11. 모바일
   한 곳에 모아 둔다. 782px 미만을 모바일/좁은 태블릿으로 본다.
   ========================================================================== */

/* --- 11.1 간격 축소 -------------------------------------------------------
   theme.json 이 만든 간격 토큰을 좁은 화면에서만 다시 정의한다.
   토큰 하나만 바꾸면 이를 참조하는 모든 섹션 여백이 함께 줄어든다. */

@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--40: 1.75rem;
		--wp--preset--spacing--50: 2.5rem;
		--wp--preset--spacing--60: 3.25rem;
	}
}

/* --- 11.2 대표글 가로 슬라이드 --------------------------------------------
   좁은 화면에서 4열 그리드는 카드가 150px 안팎으로 찌그러지고,
   1열로 떨어뜨리면 카드 8개가 세로로 쌓여 스크롤이 길어진다.
   스크롤 스냅으로 스와이프하게 만든다. 자바스크립트는 쓰지 않는다. */

/* 모바일 대표글 캐러셀은 neonomad-home 플러그인으로 옮겼다.
   (여기 있던 규칙은 정적 쿼리 루프를 겨냥해서 이미 죽어 있었다) */

/* --- 11.3 히어로 ---------------------------------------------------------- */

@media (max-width: 781px) {
	.nn-hero .nn-hero-lead {
		max-width: none;
	}

	.nn-hero .wp-block-buttons {
		width: 100%;
	}

	.nn-hero .wp-block-button {
		flex: 1 1 auto;
	}

	.nn-hero .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* --- 11.4 푸터 ------------------------------------------------------------ */

@media (max-width: 781px) {
	/* 좁은 화면에서는 메뉴가 여러 줄로 흐른다. 줄 간격을 조금 더 준다. */
	.nn-footer-nav .wp-block-navigation__container {
		row-gap: 0.35rem;
	}
}

/* --- 11.5 본문 요소 넘침 방지 ---------------------------------------------
   표와 코드 블록은 좁은 화면에서 가로로 삐져나와 페이지 전체를 밀어낸다.
   자기 영역 안에서만 가로 스크롤되게 가둔다. */

.wp-block-post-content :where(table),
.wp-block-table,
.wp-block-post-content pre,
.wp-block-code {
	max-width: 100%;
	overflow-x: auto;
}

.wp-block-post-content :where(img, video, iframe, embed, object) {
	max-width: 100%;
	height: auto;
}

/* 코드 블록은 줄바꿈보다 가로 스크롤이 읽기 좋다 */
.wp-block-code code {
	white-space: pre;
	word-break: normal;
}

/* ==========================================================================
   12. 헤더 검색
   코어 검색 블록의 "클릭 시 펼치기" 를 쓴다. 상호작용은 코어가 담당한다.
   ========================================================================== */

.nn-header-right {
	gap: 0.75rem;
	align-items: center;
}

.nn-header-search .wp-block-search__button {
	background: none;
	border: none;
	color: var(--wp--preset--color--contrast);
	padding: 0.35rem;
	min-width: 0;
}

.nn-header-search .wp-block-search__button:hover {
	background: none;
	color: var(--wp--preset--color--accent);
}

.nn-header-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.nn-header-search .wp-block-search__input {
	border: none;
	border-block-end: 1px solid var(--nn-line);
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.35rem 0.25rem;
}

.nn-header-search .wp-block-search__input:focus {
	outline: none;
	border-block-end-color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   13. 본문 목차 (TOC)
   좁은 화면에서는 본문 위 접이식 상자,
   넓은 화면에서는 왼쪽 여백에 붙어 스크롤을 따라오는 고정 목차.
   ========================================================================== */

.nn-toc {
	margin-block-end: var(--wp--preset--spacing--40);
	border: 1px solid var(--nn-line);
	border-radius: var(--nn-radius);
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.nn-toc-title {
	display: none;
	margin: 0 0 0.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--nn-muted);
}

.nn-toc-toggle {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.nn-toc-toggle::after {
	content: "＋";
	float: right;
	color: var(--nn-muted);
	font-weight: 400;
}

.nn-toc.is-open .nn-toc-toggle::after {
	content: "−";
}

.nn-toc-list {
	display: none;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.nn-toc.is-open .nn-toc-list {
	display: block;
}

.nn-toc-item + .nn-toc-item {
	margin-block-start: 0.35rem;
}

.nn-toc-level-3 {
	padding-inline-start: 0.9rem;
}

.nn-toc-list a {
	color: var(--nn-muted);
	text-decoration: none;
	display: block;
	border-inline-start: 2px solid transparent;
	padding-inline-start: 0.6rem;
	margin-inline-start: -0.6rem;
}

.nn-toc-list a:hover {
	color: var(--wp--preset--color--contrast);
}

.nn-toc-list a.is-current {
	color: var(--wp--preset--color--accent);
	border-inline-start-color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* 앵커로 이동했을 때 제목이 화면 맨 위에 딱 붙지 않게 여유를 준다 */
.wp-block-post-content :where(h2, h3) {
	scroll-margin-block-start: 2rem;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- 넓은 화면: 왼쪽 여백에 고정 ----------------------------------------- */

@media (min-width: 1200px) {
	.nn-toc {
		position: sticky;
		top: 2rem;
		float: left;
		width: 11rem;
		/* 코어 constrained 레이아웃이 자식에 margin:auto !important 를 건다 */
		margin-inline-start: -13.5rem !important;
		margin-inline-end: 0 !important;
		margin-block-end: 1rem;
		border: none;
		border-inline-start: 1px solid var(--nn-line);
		border-radius: 0;
		padding: 0 0 0 1rem;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}

	.nn-toc-toggle {
		display: none;
	}

	.nn-toc-title {
		display: block;
	}

	.nn-toc-list {
		display: block;
		margin-block-start: 0;
	}
}

/* ==========================================================================
   카테고리 칩 — 글 목록 · 아카이브 상단
   메뉴에 5개만 두는 대신, 나머지 분류는 여기서 한눈에 닿게 한다.
   core/categories 가 그리므로 분류가 바뀌어도 손댈 곳이 없다.
   ========================================================================== */

.nn-cat-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-cat-chips li {
	margin: 0;
}

.nn-cat-chips a {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid var(--nn-line);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--nn-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}

.nn-cat-chips a:hover {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nn-cat-chips a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* 지금 보고 있는 분류 */
.nn-cat-chips .current-cat > a {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	/* 모바일에서는 줄바꿈 대신 가로로 흘린다. 9개가 3줄을 차지하면
	   목록이 화면 아래로 밀려난다. 음수 마진은 쓰지 않는다 —
	   constrained 레이아웃 안에서 가로 스크롤이 생길 수 있다. */
	.nn-cat-chips ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.nn-cat-chips ul::-webkit-scrollbar {
		display: none;
	}
}

/* 푸터 링크 — 「푸터」 내비게이션 메뉴로 관리한다.
   가운뎃점 구분은 CSS 로 넣어, 링크를 추가해도 구분자를 손댈 일이 없다. */
.nn-footer-nav .wp-block-navigation__container {
	gap: 0;
	align-items: center;
}

/*
 * 구분자는 앞 항목에 붙인다.
 * ::before 로 뒤 항목에 붙이면 줄바꿈될 때 가운뎃점이 다음 줄 맨 앞에 혼자 남는다.
 * 마지막 항목에는 붙지 않으므로 :not(:last-child) 로 거른다.
 */
.nn-footer-nav .wp-block-navigation-item:not(:last-child)::after {
	content: "·";
	margin-inline: 0.5rem;
	color: var(--nn-line);
}

.nn-footer-nav .wp-block-navigation-item__content {
	color: var(--nn-muted);
	text-decoration: none;
}

.nn-footer-nav .wp-block-navigation-item__content:hover,
.nn-footer-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* 저작권 줄. 푸터 위쪽 테두리가 이미 본문과 갈라주므로 선을 더 긋지 않는다. */
.nn-footer-copy {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--nn-muted);
}

/*
 * 푸터 윗줄 — 메뉴는 왼쪽, SNS 는 오른쪽.
 *
 * flex + space-between 으로 두면 메뉴가 제 너비를 받지 못하고 줄바꿈된다.
 * 폭을 내용에서 역산하는 방식이라 그렇다. 그리드로 칸을 명시하면
 * 첫 칸(1fr)이 남는 폭을 전부 가져가므로 메뉴가 쪼그라들 일이 없다.
 *
 * SNS 를 하나도 안 넣으면 둘째 칸이 0 이 되어 메뉴만 왼쪽에 남는다.
 * 코어의 `body .is-layout-flex{display:flex}` 를 이기려면 선택자가 두 마디여야 한다.
 */
.nn-footer .nn-footer-top {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* SNS 아이콘 — 배치·크기는 플러그인(assets/social.css)이 맡고 색만 여기서 맞춘다.
   아이콘이 단색이라 링크와 같은 흐림/강조 규칙을 그대로 쓸 수 있다. */

/* 아이콘은 사방에 누를 여백을 두르고 있어서 글자보다 안쪽으로 들어가 보인다.
   끝을 저작권 줄과 맞추려면 그 여백만큼 당겨야 한다. */
.nn-footer .nn-social {
	margin-right: -0.5rem;
}

.nn-footer .nn-social__link {
	color: var(--nn-muted);
}

.nn-footer .nn-social__link:hover,
.nn-footer .nn-social__link:focus-visible {
	color: var(--wp--preset--color--contrast);
	background: var(--nn-line);
}

@media (max-width: 781px) {
	/* 좁은 화면에서는 양끝으로 가를 폭이 없다. 한 칸으로 만들어 세로로 쌓는다. */
	.nn-footer .nn-footer-top {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.nn-footer .nn-social {
		margin-right: 0;
		margin-left: -0.5rem;
	}

	/*
	 * 메뉴가 두 줄로 흐를 수 있는 폭이다. 이때는 가운뎃점을 쓰지 않는다.
	 * 구분자가 항목에 붙어 있어서, 줄이 바뀌면 줄 끝에 점만 덩그러니 남는다.
	 * 간격으로 구분해도 넷뿐이라 읽는 데 지장이 없다.
	 */
	.nn-footer-nav .wp-block-navigation__container {
		gap: 0.35rem 1rem;
	}

	.nn-footer-nav .wp-block-navigation-item:not(:last-child)::after {
		content: none;
	}
}