/*
Theme Name: 4RRAY WordPress Theme v4 
Theme URI: https://4rray.com
Author: Gruu Family
Author URI: https://4rray.com 
Description: Theme for websites from Gruu Family
Version: 250618
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4rray 
*/


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

:root 	{
	--ff-mso: 	'Material Symbols Sharp';
	--ff-mono: 	'IBM Plex Mono';
}

*, :before, :after 	{ box-sizing: border-box; margin: 0; padding: 0; }
html 		{ font-family: "IBM Plex Sans KR", 'Nanum Gothic', system-ui, sans-serif; font-size: 16px; font-weight: 400;line-height: 1.75; background: white; }
body 		{ position: relative; }
strong 		{ font-weight: 500; }
a 			{ text-decoration: none; color: steelblue; }
sup 		{ margin: 0 .33em; }
.ff_mso 	{ font-family: var(--ff-mso); }
::marker 	{ font-size: x-small; color: lightgray; }

/* site */
	.site > .inner 	{ padding: 1.5rem; max-width: calc(728px + 3rem); margin: 0 auto; }
	/* header */
		.site.header 			{ text-align: center; }
		.site.header > .inner 	{ display: flex; flex-direction: column; gap: .75rem;  }
		/* home */
			.site.header .home 	{ font-weight: bold; font-size: large; letter-spacing: .2em; color: black; }
		/* custom logo */
			.custom-logo 	{ width: auto; height: auto; max-width: 128px; max-height: 48px; }
		/* nav */
			.site.header .menu 		{ display: inline-flex; flex-direction: row; gap: .5rem; list-style: none; line-height: 1; font-size: .9rem; }
			.site.header .menu a	{ color: black; font-weight: 500; }
	/* body */
		.site.body 				{ box-shadow: 0 0 1px black; }
		.site.body > .inner 	{ display: flex; flex-direction: column; gap: 1.5rem; }
		/* article */
			article 	{ display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #00000022; }
			/* header */
				article header 				{ display: flex; flex-direction: column; gap: .75em; text-align: center; }
				article header .thumbnail 	{ margin: 0 auto; border-radius: 4rem; border: 3px solid lightgray; padding: 2px; width: calc(4rem + 5px); height: auto; }
				article h1 					{ font-size: 2rem; font-weight: 400; text-align: center; }
				article .meta 				{ display: flex; gap: .5em; justify-content: center; }
				article .meta span			{ display: inline-flex; gap: .25em; align-items: center; padding: .25em .75em; background: #00000011; border-radius: 2rem; }
				article .meta .cat:before 		{ font-family: var(--ff-mso); content: '\e2c7'; }
				article .meta .pv:before 		{ font-family: var(--ff-mso); content: '\ea03'; }
				article .meta .update:before 	{ font-family: var(--ff-mso); content: '\f8bb'; }
			/* content */
				article > .content 	{ border-top: 1px solid #00000022; padding: 1.5rem 0; }
				.content > p 		{ margin: 1em 0; }
				.content ul 		{ margin: 1em 0; padding-left: 1.1rem; }
				.content ul ul 		{ margin: .5em 0; list-style: disc; }
				.content strong 	{ background: #ffff0028; }
				/* blockquote */
					.content blockquote 	{ margin: 1.5rem 0; background: #00000011; padding: 1rem; border-left: 4px solid #00000011; }
				/* headings */
					.content h2 	{ margin: 1rem 0; font-size: 1.5rem; font-weight: 400; border-bottom: 1px solid #00000022; overflow: hidden; }
					.content h3 	{ margin: 1rem 0; font-size: 1.25rem; font-weight: 500; }
				/* table */
					.content table 	{ display: block; overflow-x: auto; border-collapse: collapse; font-size: .925rem; }
					.content th 	{ font-size: 1rem; font-weight: 600; }
				/* wp-caption */
					.wp-caption 		{ margin: 1em auto; max-width: 100%; }
					.wp-caption-text 	{ font-size: small; text-align: center; color: gray; }
				/* footnotes */
					.footnotes 			{ font-size: .9rem; }
					.footnotes hr		{ border: 0; border-top: 2px solid #00000014; margin: 1.5rem 0; }
					.footnotes ol		{ padding-left: 2rem; }
					.footnotes ::marker	{ font-size: .9rem; color: black; }
			/* footer */
				article footer 	{ font-size: .9rem; }
				/* tag */
					article .tags 	{ display:flex; gap: .5em; flex-wrap: wrap; line-height: 1; }
					article .tag 	{ padding: .33rem .66rem; border-radius: .33rem; background: #00000014; }
					article .tag a 	{ color: black; }
					article .tag a:hover 	{ text-decoration: underline; }
		/* entry */
			.entry 				{ list-style: none; }
			.entry small 		{ color: gray; }
			.entry-item 		{ display: grid; grid-template-areas: 'title cat' 'excerpt pv'; gap: .25rem .5rem; border-bottom: 1px solid #00000018; padding: .8rem 0; line-height: 1.5; }
			.entry .title 		{ grid-area: title; font-weight: 500; }
			.entry .excerpt 	{ grid-area: excerpt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
			.entry .cat 		{ grid-area: cat; display: flex; justify-content: end; align-items: center; gap: .25em; }
			.entry .pv 			{ grid-area: pv; display: flex; justify-content: end; align-items: center; gap: .25em; }
			.entry .cat:before 	{ font-family: var(--ff-mso); content: '\e2c7'; }
			.entry .pv:before 	{ font-family: var(--ff-mso); content: '\ea03'; }
		/* pagination */
			.pagination 		{ display: flex; align-items: center; justify-content: space-between; font-weight: 700; line-height: 1; }
			.pagination a		{ display: inline-block; padding: .5rem; border-radius: 2rem; color: black; }
			.pagination a:hover	{ background: #00000022; }
			.pagination .pages	{ font-size: small; }
		/* search form */
			.searchform 				{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 auto; max-width: 300px; width: 100%; padding: .25rem; border-width: 2px 0; line-height: 1; background: #00000014; border-radius: 2rem; }
			.searchform input			{ border: 0; background: transparent; outline: none; width: 100%; padding: 0 .75rem; }
			.searchform button			{ border: 0; background: transparent; padding: .5rem; font-family: var(--ff-mso); cursor: pointer; border-radius: 2rem; font-weight: 700; line-height: 1; }
			.searchform button:hover	{ background: #00000011; }
	/* footer */
		.site.footer 			{ font-size: .9rem; text-align: center; }
		.site.footer > .inner 	{ display: flex; flex-direction: column; gap: 1.5rem; }
		/* widgets */
			.site.footer .widgets 	{ text-align: initial; line-height: 1.5; }
		
@media screen and (min-width: calc(300px + 728px + 300px + 9rem)) {
	body { display: grid; grid-template-areas: 'header body footer'; grid-template-columns: calc(300px + 3rem) auto calc(300px + 3rem); }
	/* site */
		.site 			{ position: relative; }
		.site .sticky 	{ position: sticky; top: 1.5rem; }
		/* header */
			.site.header 	{ text-align: left; }
			/* menu */
				.site.header .menu 			{ flex-direction: column; gap: 0; width: 100%; border-top: 1px solid #00000014; }
				.site.header .menu-item 	{ padding: .75em 0; border-bottom: 1px solid #00000014; }
		/* body */
			.site.body 	{ box-shadow: 0 -1px 1px black; }
			/* article */
				/* content */
					.alignright 	{ float: right; margin: 1rem; margin-right: 0; }
		/* footer */
			.site.footer 			{ position: relative; text-align: right; }
}