/*
Theme Name: sarchive
Description: 일상글·리뷰를 올리는 개인 아카이브 블로그. 미니멀, 텍스트 중심.
Author: sah
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarchive
*/

/* 색·글꼴·간격은 theme.json에서 정한다. 여기엔 거기서 못 하는 것만 쓴다. */

/* 지금 보고 있는 메뉴는 굵게. 밑줄은 hover에 쓰고 있어서 굵기로 구분한다. */
.wp-block-navigation .current-menu-item a {
	font-weight: 500;
}

/* 푸터 링크도 UI 링크다. 평소 밑줄 없음, hover 때 밑줄. */
.sarchive-footer a {
	text-decoration: none;
}

.sarchive-footer a:hover {
	text-decoration: underline;
}

/* 헤더·본문·푸터 사이의 여백은 헤더와 푸터의 안쪽 여백(padding) 하나로만 만든다.
   워드프레스가 넣는 블록 사이 기본 간격을 여기서 없앤다.
   안 없애면 헤더 padding + 블록 간격이 겹쳐 쌓여서 눈에 보이는 거리가 두 배가 된다. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* 유튜브 썸네일. 받아 오는 그림이 4:3이라 위아래에 검은 띠가 있어서 16:9로 잘라 쓴다. */
.sarchive-youtube__link {
	display: block;
	position: relative;
}

.sarchive-youtube__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 누르면 유튜브로 나간다는 표시. 가운데 재생 삼각형. */
.sarchive-youtube__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.55);
}

.sarchive-youtube__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.5rem 0 0.5rem 0.85rem;
	border-color: transparent transparent transparent #fff;
	transform: translateX(0.1rem);
}

.sarchive-youtube__link:hover .sarchive-youtube__play {
	background: rgba(20, 20, 20, 0.75);
}

/* 썸네일 아래 여백은 기본 카드의 대표 이미지와 같은 값으로 맞춘다.
   검색·태그·첫 화면에서 기본 카드와 나란히 서기 때문에 다르면 눈에 띈다.
   기본 카드는 템플릿이 inline 으로 1rem을 주는데, 이 썸네일은 우리가 만든 것이라
   여기서 같은 값을 준다(보이는 거리 22.7px). */
.sarchive-youtube {
	margin-bottom: 16px;
}

/* 날짜가 빠지면서 제목이 카드의 마지막이 됐다.
   제목이 들고 있던 아래 여백은 이제 푸터와의 거리에 더해져 보이므로 없앤다.
   템플릿(index.html)이 inline 으로 넣는 값이라 !important 로만 덮을 수 있다. */
.sarchive-list-np .sarchive-cards .wp-block-post-title {
	margin-bottom: 3px !important;
}

@supports (text-box: trim-both cap alphabetic) {
	.sarchive-list-np .sarchive-cards .wp-block-post-title {
		text-box: trim-end cap alphabetic;
	}
}

/* 글 페이지의 재생기. 본문 폭에 맞추고 16:9로 둔다. */
.sarchive-youtube-player {
	aspect-ratio: 16 / 9;
}

/* block 으로 두지 않으면 iframe이 글자처럼 줄에 얹혀 아래에 9px쯤이 남는다. */
.sarchive-youtube-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 인용 목록(한 단). 날짜는 템플릿에 아예 없다. 제목 → 본문만 있다.
   간격 숫자는 템플릿(list-quote.html)에 있다: 제목→본문 29px, 글 사이 51px.
   여기서는 그 숫자가 눈에 보이는 거리(24px / 48px)와 같아지도록 줄 높이 여유를 잘라낸다. */
@supports (text-box: trim-both cap alphabetic) {
	.sarchive-quotes .wp-block-post-title {
		text-box: trim-both cap alphabetic;
	}

	.sarchive-quotes .wp-block-post-content > :first-child {
		text-box: trim-start cap alphabetic;
	}

	.sarchive-quotes .wp-block-post-content > :last-child {
		text-box: trim-end cap alphabetic;
	}

	/* 인용문이 한 문단이면 그 하나가 처음이자 끝이다. 위아래 다 잘라야 한다. */
	.sarchive-quotes .wp-block-post-content > :first-child:last-child {
		text-box: trim-both cap alphabetic;
	}
}

/* 글 끝에 빈 문단이 남아 있으면 목록에서 한 줄만큼 더 벌어져 글 사이 간격이 들쭉날쭉해진다.
   글 내용은 그대로 두고 목록에서만 자리를 안 차지하게 한다. */
.sarchive-quotes .wp-block-post-content p:empty {
	display: none;
}

/* 목록 맨 끝 항목의 아래 여백은 푸터와의 거리에 그대로 더해져 보인다.
   항목 사이를 띄우려고 준 여백이라 맨 끝에는 필요 없다. */
.sarchive-timeline__item:last-child,
.sarchive-nearby__item:last-child {
	padding-bottom: 0;
}

/* 헤더·푸터 안쪽 여백. 템플릿이 아니라 여기서 한 번에 정한다.
   목표는 "상자 숫자"가 아니라 "눈에 보이는 간격 48px"이다.
   글자 위아래에는 줄 높이 때문에 눈에 안 보이는 여유가 붙어서,
   그만큼 뺀 값을 준다. 그래서 헤더와 푸터 숫자가 다르다.
   아래 @supports 블록이 먹는 브라우저에서는 여유를 잘라내고 48px을 그대로 쓴다. */
header.wp-block-group {
	padding-block: 43px;
}

.sarchive-footer {
	padding-block: 35px;
}

/* 글자 위아래의 보이지 않는 여유를 브라우저가 직접 잘라낸다.
   자르고 나면 상자 끝이 글자 끝과 거의 같아져서,
   여백에 적은 숫자가 그대로 눈에 보이는 간격이 된다. 화면마다 값을 따로 둘 필요가 없다.
   지원 안 하는 브라우저는 위의 43/35px 값으로 비슷하게 맞춰진다. */
@supports (text-box: trim-both cap alphabetic) {
	/* 바깥 여백에 맞닿는 쪽만 자른다.
	   양쪽을 다 자르면 제목과 날짜 사이 같은 안쪽 간격까지 좁아진다. */

	/* 위아래가 모두 여백과 맞닿는 것 */
	.wp-block-navigation-item__content,
	main .wp-block-query-no-results p {
		text-box: trim-both cap alphabetic;
	}

	/* 윗부분만 여백과 맞닿는 것
	   글·고정페이지의 제목만 고른다. `main >` 를 빼면 카드 안 제목까지 걸려서
	   카드의 사진과 제목이 붙어 버린다(실제로 6.8px 좁아졌다). */
	main.wp-block-group > .wp-block-post-title,
	main.wp-block-group > .wp-block-query-title,
	.sarchive-footer p:first-child {
		text-box: trim-start cap alphabetic;
	}

	/* 아랫부분만 여백과 맞닿는 것
	   목록은 **맨 끝 줄만** 고른다. 전부 고르면 줄마다 높이가 줄어서
	   목록 전체의 줄 간격이 좁아진다(실제로 8.9px 좁아졌다). */
	.sarchive-cards .wp-block-post-date,
	main .wp-block-post-content > p:last-child,
	main .wp-block-post-content > .wp-block-quote:last-child p:last-child,
	.sarchive-timeline__year:last-child .sarchive-timeline__item:last-child > *,
	.sarchive-nearby__item:last-child > *,
	.sarchive-footer p:last-child {
		text-box: trim-end cap alphabetic;
	}

	/* 잘라내도 글자마다 남는 미세한 차이가 있어서, 재서 보정한 값을 쓴다.
	   목표는 "눈에 보이는 간격 48px"이고 이 숫자는 그걸 맞추기 위한 값이다. */
	header.wp-block-group {
		padding-block: 52.5px;
	}

	.sarchive-footer {
		padding-block: 43px;
	}
}

/* 본문 맨 위·맨 아래 요소가 들고 있는 자기 여백은 헤더·푸터 여백에 그대로 더해진다.
   가장자리에서만 없앤다. 가운데 요소들의 간격은 건드리지 않는다. */
main.wp-block-group > :first-child,
main.wp-block-group .wp-block-query > :first-child,
main.wp-block-group .wp-block-query-no-results > :first-child {
	margin-block-start: 0;
}

/* 숨긴 목록 제목은 자리를 차지하지 않는데, 그 다음 블록에는 블록 사이 간격이 붙는다.
   보이지 않는 것 때문에 생기는 간격이라 없앤다. */
main.wp-block-group > .screen-reader-text + * {
	margin-block-start: 0;
}

main.wp-block-group > :last-child,
main.wp-block-group .wp-block-query > :last-child,
main.wp-block-group .wp-block-query-no-results > :last-child {
	margin-block-end: 0;
}

/* 푸터 링크는 한 문단 안에 있어서 여백을 못 준다. 줄로 세워서 헤더 메뉴와 같은 간격을 준다. */
.sarchive-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

/* 지금 보고 있는 쪽 숫자도 메뉴와 같은 방식으로 굵게. */
.wp-block-query-pagination .page-numbers.current {
	font-weight: 500;
}

/* 숫자끼리는 붙여 둔다(이전/다음과의 간격은 블록 설정을 따른다). */
.wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

/* 리뷰 정보. 선·배경·상자 없이 여백으로만 본문과 나눈다. */
.sarchive-review-meta {
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.sarchive-review-meta__row {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	padding: 0.25rem 0;
}

.sarchive-review-meta__label {
	flex: 0 0 5rem;
	margin: 0;
	color: var(--wp--preset--color--gray-70);
}

.sarchive-review-meta__value {
	margin: 0;
}

/* 좁은 화면에서는 라벨과 값을 위아래로. */
@media (max-width: 480px) {
	.sarchive-review-meta__row {
		display: block;
	}

	.sarchive-review-meta__label {
		margin-bottom: 0.125rem;
	}
}

/* 같은 카테고리 글 목록. 카드가 아니라 글자 목록이다. */
.sarchive-nearby__heading {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gray-70);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.sarchive-nearby__heading:hover {
	text-decoration: underline;
}

.sarchive-nearby__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sarchive-nearby__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--30);
	padding: 0.375rem 0;
}

/* 제목이 길면 줄바꿈하고, 날짜는 오른쪽 끝에 남는다. */
.sarchive-nearby__title {
	flex: 1 1 14rem;
	min-width: 0;
	text-decoration: none;
}

.sarchive-nearby__title:hover {
	text-decoration: underline;
}

.sarchive-nearby__title.is-current {
	font-weight: 500;
}

.sarchive-nearby__date {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--wp--preset--color--gray-70);
	font-size: var(--wp--preset--font-size--small);
}

/* 좁은 화면에서는 날짜를 제목 아래로 내린다. */
@media (max-width: 480px) {
	.sarchive-nearby__title {
		flex: 1 1 100%;
	}

	.sarchive-nearby__date {
		margin-left: 0;
	}
}

/* 본문 속 구분선 블록은 선을 그리지 않고 빈 여백으로만 보이게 한다. */
.wp-block-separator {
	border: 0;
	height: 0;
	margin-block: var(--wp--preset--spacing--50);
}

/* 글 아래 태그는 태그 목록 화면 제목과 같이 "#기록" 형식으로 쓴다. */
.wp-block-post-terms.taxonomy-post_tag a::before {
	content: "#";
}

/* 연도 타임라인. 날짜 - 제목 - 갈래 한 줄. 선이나 카드를 쓰지 않는다. */
.sarchive-timeline__year + .sarchive-timeline__year {
	margin-top: var(--wp--preset--spacing--70);
}

.sarchive-timeline__year-name {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sarchive-timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sarchive-timeline__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--30);
	padding: 0.375rem 0;
}

/* 날짜는 고정 폭 칸에 두고 숫자 폭을 맞춰 세로로 줄을 세운다. */
.sarchive-timeline__date {
	flex: 0 0 3.5rem;
	color: var(--wp--preset--color--gray-70);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.sarchive-timeline__title {
	flex: 1 1 10rem;
	min-width: 0;
	text-decoration: none;
}

.sarchive-timeline__title:hover {
	text-decoration: underline;
}

.sarchive-timeline__category {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--wp--preset--color--gray-70);
	font-size: var(--wp--preset--font-size--small);
}

/* 좁은 화면: 윗줄에 날짜·갈래, 아랫줄에 제목 전체 폭. */
@media (max-width: 480px) {
	.sarchive-timeline__item {
		padding: 0.5rem 0;
	}

	.sarchive-timeline__date {
		flex: 0 0 auto;
		order: 1;
	}

	.sarchive-timeline__category {
		order: 2;
		margin-left: 0;
	}

	.sarchive-timeline__title {
		order: 3;
		flex: 1 1 100%;
	}
}

/* 검색창. 「선 없음」 원칙의 예외 — 글자를 쓰는 칸이라 아래 선 한 줄만 둔다.
   입력칸과 「검색」 버튼이 같은 밑줄 위에 나란히 선다. */
.wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-70);
	border-radius: 0;
	padding: 0;
	gap: var(--wp--preset--spacing--20);
}

/* 입력칸이나 버튼에 포커스가 가면 밑줄이 진해진다. */
.wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--wp--preset--color--contrast);
}

.wp-block-search__input {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0.25rem 0;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: inherit;
}

/* 코어는 이 배치에서 입력칸의 포커스 표시를 지운다. 되살린다. */
.wp-block-search__input:focus {
	outline: revert;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--gray-70);
	opacity: 1;
}

/* 버튼은 글자만. UI 링크와 같이 평소 밑줄 없음, hover 때 밑줄. */
.wp-block-search__button {
	flex: 0 0 auto;
	min-width: max-content;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0.25rem 0;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-search__button:hover {
	text-decoration: underline;
}

/* 본문 사진은 폭을 본문 폭(672px)으로 통일한다. 세로·가로가 섞여도 왼쪽 끝이 맞는다.
   높이는 제한하지 않는다. 세로 사진은 한 화면보다 길어져도 둔다. */
.wp-block-post-content img {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* 본문 속 강조. 브라우저 기본 굵기(700)를 쓰지 않는다. */
.wp-block-post-content strong,
.wp-block-post-content b {
	font-weight: 500;
}

/* 작은 회색 글자(14px, gray-70)는 300에서 너무 흐려서 한 단계만 올린다.
   날짜·갈래·리뷰 라벨·푸터 표시 등. */
.wp-block-post-date,
.sarchive-nearby__heading,
.sarchive-nearby__date,
.sarchive-timeline__date,
.sarchive-timeline__category,
.sarchive-review-meta__label,
.has-gray-70-color.has-small-font-size {
	font-weight: 400;
}