/*
Theme Name: StatRec WPT V260914
Theme URI: https://statrec.com
Author: Gruu Family
Author URI: http://gruulab.dothome.co.kr 
Description: Theme for websites from Gruu Family - StatRec 
Version: 260914
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gruulab 
*/

:root {
	--c-blue-dark: 	#001122;
	--c-silver: 	#E2E8F0;
	--c-cyan: 		#00F0FF;
	--c-cyan-dim: 	#00F0FF44;
	--c-yellow: 	#FFDE43;
	--c-white: 		#fff;
	
	--c-background: 	var(--c-blue-dark);
	--c-text: 			var(--c-silver);
	--c-text-strong: 	var(--c-yellow);
	--c-text-heading: 	var(--c-white);
	--c-link: 			var(--c-cyan);
	--c-border: 		var(--c-cyan-dim);
	
	--ff-mso: 		'Material Symbols Outlined';
}

html, body, input, textarea 	{ font-family: 'Oxanium', monospace; }

html 	{ margin: 0; padding: 0; background: var(--c-background); font-size: 15px; line-height: 1.5; color: var(--c-text); }
body 	{ margin: 0; padding: 0; }
a 		{ color: var(--c-link); text-decoration: none; }

summary 	{ cursor: pointer; }

h1 	{ font-weight: normal; color: var(--c-text-strong); }
h2 	{ margin: 2rem 0 1rem; color: var(--c-text-heading); letter-spacing: -0.02em; line-height: 1.33; }

ul 	{ padding-left: 1.1rem; }

/* preset */
	/* ff-mso */
		.ff-mso:before 			{ font-family: var(--ff-mso); font-size: 1.2em; }
		.ff-mso.chart:before 	{ content: '\e922'; }
		.ff-mso.holiday:before 	{ content: '\e615'; }
	/* btn */
		.btn:not(.menu-item) 	{ display: inline-flex; margin: 0; line-height: 1; padding: .33em; font-size: 1.1rem; background: var(--c-link-dim); cursor: pointer; border-radius: .25em; border: 2px solid transparent; }
		.btn 					{ color: var(--c-link); }
		.btn:hover 				{ border-color: var(--c-link); }
		.btn:before 			{ font-family: var(--ff-mso); }
		.btn.search:before 		{ content: '\e8b6'; } 
		.btn.close:before 		{ content: '\e5cd'; } 
		.btn.edit:before 		{ content: '\e3c9'; }
		.btn.admin:before 		{ content: '\e8b8'; }
		.btn.menu:before 		{ content: '\e5d2'; }

/* site */
	.site 			{  }
	.site .inner 	{ padding: 1rem; }
	/* header */
		.site.header 	{ display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--c-border); }
		/* left */
			.site.header .left 	{ display: flex; gap: .5rem; align-items: center; line-height: 1; border-right: 1px solid var(--c-border); }
			/* custom-logo */
				img.custom-logo 	{ width: 1.33rem; height: auto; }
		/* right */
			.site.header .right 	{ display: grid; grid-template-columns: 1fr 2rem; gap: .5rem; }
			/* search */
				.searchform 	{ display: grid; grid-template-columns: 1fr 2rem; gap: .5rem; }
				.search_field 	{ box-sizing: border-box; padding-left: 1rem; border: 0; margin: 0; padding: 0; outline: none; color: var(--c-link); background: transparent; font-size: 1rem; width: 100%; }
	/* menu container */
		.site.menu 	{ display: none; } 
		/* menu */
			.site.menu ul.menu 					{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
			.site.menu .menu-item 				{ display: flex; gap: .5em; color: var(--c-link); align-items: center; border-bottom: 1px solid var(--c-border); padding: 1rem; }
			.site.menu .menu-item:hover a		{ text-decoration: underline; }
	/* body */
		/* entry */
			.entry ul 	{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; list-style: none; }
	/* footer */
		.site.footer 	{ font-size: .9rem; }

@media screen and ( min-width: 1280px ) {
body 	{ display: grid; grid-template-columns: 300px 1fr; grid-template-areas: 'header header' 'menu body' ' menu footer'; }
	/* site */
		/* header */
			.site.header 	{ grid-area: header; grid-template-columns: 300px 1fr; }
			/* right */
				.site.header .right 	{ display: block; }
				/* menu button */
					.site.header .right .btn.menu 	{ display: none; }
		/* menu */
			.site.menu 				{ grid-area: menu; display: block !important; border: 0; border-right: 1px solid var(--c-border); margin: 0; padding: 0; }
			.site.menu .btn.menu 	{ display: none; }
		/* body */
			.site.body 	{ grid-area: body; }
		/* footer */
			.site.footer 	{ grid-area: footer; }
}