/*
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-text:		#011; 
	--c-text-light: #fff; 
	
	--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', sans-serif; }

html 	{ margin: 0; padding: 0; font-size: 16px; background: black; }
body 	{ margin: 0; padding: 0; line-height: 1.75; font-weight: 400; }
a 		{ text-decoration: none; color: #2563EB; }

/* 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; }
					article .excerpt 	{ margin: 0; font-size: .9rem; opacity: .5; }
				/* content */
					article ul 	{ padding-left: 1.1rem; }
				/* footer */
					/* tags */
						.tags 		{ display: flex; flex-wrap: wrap; gap: .5rem; }
						a[rel=tag] 	{ line-height: 1; padding: .25em .5em; background: #0001; border-radius: .33em; }
	/* footer */
		.site.footer 	{ font-size: .9rem; text-align: center; color: var(--c-text-light); }
		
@media screen and ( min-width: calc(728px + 300px + 1.5rem + 2rem) ) {
	/* site */
		/* body */
			.site.body .inner 	{ max-width: calc(728px + 300px + 1.5rem); }
			/* article */
				article 			{ display: grid; grid-template-areas: 'header header' 'content abc' 'footer footer'; grid-template-columns: 728px 300px; gap: 1.5rem; }
				/* 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; }
}