/*
Theme Name: ARRAY Wordpress theme v260706
Theme URI: https://4rray.com 
Author: Gruu Family
Author URI: http://gruulab.dothome.co.kr 
Description: Theme for websites from Gruu Family - 4RRAY
Version: 260706
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gruulab 
*/

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov-dynamic-subset.min.css");

:root 	{
	--c-blue: 	#0056B3;
	
	--c-text:		#011; 
	--c-text-light: #fff; 
	--c-link: 		var(--c-blue);
	
	--ff-mso: 'Material Symbols Outlined';
}

/* preset */
	.ff-mso 	{ font-family: 'Material Symbols Outlined'; vertical-align: bottom; padding: .25em; }
	::marker 	{ font-size: x-small; }
	
body, input, button, textarea, select { font-family: "Pretendard GOV", "Nanum Gothic Coding", 'IBM Plex Sans KR', sans-serif; }

html 	{ margin: 0; padding: 0; font-size: 16px; font-weight: 400; background: black; }
body 	{ margin: 0; padding: 0; line-height: 1.75; }
a 		{ text-decoration: none; color: var(--c-link); }

/* site */
	.site 	{ padding: 1rem; }
	/* header */
		.site.header 	{ display: flex; flex-direction: row; gap: 1rem; align-items: center; justify-content: space-between; }
		/* left */
			.site.header .left 	{ display: flex; gap: .5rem; align-items: center; line-height: 1;  }
			.custom-logo-link 	{ display: inline-block; line-height: 0; }
			img.custom-logo 	{ width: 1.25rem; height: auto; }
			a.home 				{ color: var(--c-text-light); }
		/* right */
			.searchform 		{ box-sizing: border-box; border: 0; border-radius: .33rem; display: inline-flex; align-items: center; background: #fff6; }
			.searchform .field 	{ border: 0; background: transparent; padding: .5rem .75rem; outline: none; color: var(--c-text-light); }
			.searchform button 	{ border: 0; background: transparent; padding: .33rem; cursor: pointer; font-weight: bold; color: var(--c-text-light); }
	/* body */
		.site.body 	{ background: white; padding: 3rem 1rem; }
		/* inner */
			.site.body .inner 	{ margin: 0 auto; max-width: 728px; }
			/* article */
				article 	{ display: flex; flex-direction: column; gap: 1.5rem; }
				/* header */
					article header 		{ margin: 1.5rem 0; text-align: center; }
					article h1 			{ margin: 0; font-weight: 400; line-height: 1.33; word-break: keep-all; }
					article .excerpt 	{ margin: 0; font-size: .9rem; opacity: .5; }
				/* content */
					article ul 	{ padding-left: 1.1rem; }
					article h2 	{ font-size: 1.3rem; font-weight: 500; }
					article h3 	{ font-size: 1rem; font-weight: 500; }
				/* footer */
					/* tags */
						.tags 		{ display: flex; flex-wrap: wrap; gap: .5rem; }
						a[rel=tag] 	{ line-height: 1; padding: .25em .5em; background: #0001; border-radius: .33em; }
			/* index */
				/* entry */
					.entry 	{ padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.5rem;  }
					/* item */
						.entry .excerpt 	{ display: block;  }
				/* nav */
					.pagination 			{ line-height: 1; text-align: center; }
					.nav-links 				{ display: flex; margin: 0 auto; width: fit-content; gap: 0; line-height: 1; }
					.page-numbers 			{ display: inline-flex; min-width: 1rem; justify-content: space-around; align-content: center; border: 1px solid #ccc; margin-left: -1px; padding: .5em; }
					a.page-numbers:hover 	{ background: #eee; }
					nav .current 			{ color: var(--c-text-light); background: black; border-color: black; }
					nav .prev, nav .next 	{ display: none !important; }
	/* footer */
		.site.footer 	{ font-size: .9rem; text-align: center; color: var(--c-text-light); }
		/* menu */
			.footer-menu-ul 		{ display: inline-flex; gap: .75em; margin: 0; padding: 0 0 0 .75em; list-style-type: none; }
			.footer-menu-ul:before 	{ content: '|'; }
			.footer-menu-ul a 		{ color: var(--c-text-light); }
			.footer-menu-ul a:hover { text-decoration: underline; }
		
@media screen and ( min-width: calc(728px + 300px + 3rem + 2rem) ) {
	/* site */
		/* body */
			.site.body .inner 	{ max-width: calc(728px + 300px + 3rem); }
			/* article */
				article 			{ display: grid; grid-template-areas: 'header header' 'content abc' 'content aaf' 'footer aaf'; grid-template-columns: 728px 300px; gap: 1.5rem 3rem; }
				/* header */
					article header 		{ grid-area: header; }
				/* content */
					article .content 		{ grid-area: content; }
				/* aside */
					article aside.abc 	{ grid-area: abc; position: relative; }
					aside.abc .inner 	{ grid-area: abc; position: sticky; top: 1.5rem; }
				/* footer */
					article footer 		{ grid-area: footer; }
				/* aside - aaf */
					article aside.aaf 	{ grid-area: aaf; display: flex; flex-direction: column; justify-content: end; }
}