/*
Theme Name: 4RRAY WPT V6
Theme URI: https://4rray.com
Author: Gruu Family
Author URI: https://4rray.com 
Description: Theme for websites from Gruu Family
Version: 251004
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+Sans+KR:wght@400;500;600;700&display=swap');

:root {
	--c-yellow: 	#FFBB00;
	--ff-mso: 		'Material Symbols Sharp';
}

*, :before, :after 	{ box-sizing: border-box; margin: 0; padding: 0; }
html 				{ background: #F1F1F1; color: #1F1F1F; font-family: "IBM Plex Sans KR", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
body 				{ position: relative; margin: 0; font-size: 1rem; }
a 					{ text-decoration: none; color: blue; }
ul 					{ padding-left: 1.2rem; }
ul ::marker 		{ font-size: x-small; }
ol 					{ padding-left: 2rem; }
ol ::marker 		{ font-size: .9em; }
p 					{ margin: 1em 0; }
sup 				{ margin: 0 .5em; font-weight: 500; color: gray; }

/* preset */
	.ff-mso, .ff_mso 	{ font-family: var(--ff-mso); }
	.topbutton 			{ display: inline-flex; align-items: center; padding: .5rem; border: 1px solid #ffffff33; border-radius: .5rem; line-height: 1; box-shadow: 1px 1px 2px #00000033; background: #ffffff08; gap: .33em; }
	.topbutton:before 	{ font-weight: normal; }
	.topbutton:hover 	{ background: #ffffff22; }
/* site */
	/* header */
		.site.header 	{ z-index: 1; position: sticky; top: 0; display: grid; grid-template-areas: 'left right' 'bottom bottom'; grid-template-columns: min-content; gap: 0 .5rem; padding: .5rem; background: #000000cc; color: #f1f1f1; line-height: 1; }
		.site.header a 	{ color: var(--c-yellow); }
		/* left */
			.site.header .left 	{ grid-area: left; }
			/* custom logo */
				.custom-logo-link 	{ display: inline-flex; align-items: center; gap: .25rem; font-weight: bold; }
				.custom-logo 		{ width: 2rem; }
		/* right */
			.site.header .right 	{ grid-area: right; text-align: right; display: flex; flex-direction: row-reverse; align-items: center; gap: .25rem; font-size: larger; }
		/* bottom */
			.site.header .bottom 					{ grid-area: bottom; display: flex; align-items: center; font-size: small; }
			.site.header .bottom span 				{ display: flex; align-items: center; gap: .5em; margin: 0 .25rem; font-weight: bold; }
			.site.header .bottom span:before 		{ font-family: var(--ff-mso); font-size: 1.2em; font-weight: normal; }
			.site.header .bottom .is-index:before 	{ content: '\e8ef'; }
			.site.header .bottom .is-single:before 	{ content: 'folder'; }
	/* body */
		.site.body 	{ background: white; padding: 1rem; }
		/* main */
			main 	{ display: flex; flex-direction: column; gap: 1rem; max-width: 980px; margin: 0 auto; }
			/* article */
				article 	{ display: flex; flex-direction: column; gap: 1rem; }
				/* header */
					article > header 		{ display: flex; flex-direction: column; gap: .5rem; justify-content: center; text-align: center; padding: 2rem 1rem; }
					article h1 	{ font-weight: normal; line-height: 1.33; }
					/* meta */
						header .meta 				{ font-size: .85rem; font-weight: bold; }
						header .meta .button		{ color: gray; }
				/* content */
					article .content 	{ overflow: hidden; }
					article h2 	{ margin: 1em 0 1rem; font-weight: 500; }
					article h3 	{ margin: 1em 0 1rem; font-weight: 500; }
					/* wp-caption */
						.wp-caption 		{ max-width: 100%; }
						.wp-caption-text 	{ margin: 0; font-size: small; font-weight: 500; color: gray; }
						.aligncenter 		{ margin: 1.5rem auto; }
					/* footnotes */
						.footnotes 		{ display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; font-size: .9rem; }
						.footnotes hr	{ border: 0; border-top: 1px solid gray; }
				/* footer */
					article footer 	{ font-size: .9rem; }
						/* tags */
							.tags 		{ display: flex; gap: .5em; line-height: 1; white-space: nowrap; flex-wrap: wrap; }
							.tags span	{ padding: .5em; font-weight: bold; }
							a[rel=tag] 	{ background: #00000011; border-radius: .5em; padding: .5em; color: black; }
			/* entry */
				.entry 				{ display: flex; flex-direction: column; gap: 1rem; list-style-type: none; padding: 0; }
				.entry .title 		{ color: #1f1f1f; font-weight: 500; margin-right: .5em; }
				.entry .excerpt 	{ display: block; color: gray; }
			/* nav */
				main nav 			{ line-height: 1; font-size: small; font-weight: 500; }
				main .nav-links 	{ display: flex; gap: .33rem; }
				.page-numbers 		{ min-width: 2rem; border: 1px solid #00000022; border-radius: .5rem; padding: .5rem; text-align: center; }
	/* footer */
		.site.footer 		{ padding: 1rem; font-size: small; }
		.site.footer .inner	{ margin: 0 auto; max-width: 980px; }
	/* etc */
		/* searchform */
			.entry #searchform 	{ padding: 1.5rem 0 0; }
			.searchform 		{ display: grid; grid-template-columns: auto 2rem; margin: 1rem 0; border: 1px solid; background: white; font-size: 1rem; }
			.searchform input 	{ border: 0; background: transparent; padding: .5rem; font-size: 1rem; }
			.searchform button 	{ border: 0; background: transparent; padding: .5rem; font-size: 1rem; font-weight: bold; }

@media screen and (min-width: 1024px) {
	/* site */
		/* header */
			.site.header 	{ grid-template-areas: 'left bottom right'; }
			/* bottom */
				.site.header .bottom span:before 	{ content: '\f754' !important; }
}