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

:root {
	--ff-normal: 	'NanumHuman';
	--ff-bold: 		'NanumHumanBold';
	--ff-eb: 		'NanumHumanEB';
	--ff-heavy: 	'NanumHumanHeavy';
	--ff-mso: 		'Material Symbols Outlined';
	
	--c-cyan: 			#00F0FF;
	--c-cyan-dim: 		#00F0FF28;
	--c-green: 			#52FFB8;
	--c-green-dim: 		#52FFB828;
	--c-navy: 			#0F172A;
	--c-yellow: 		#ffe600;
	--c-silver: 		#e2e8f0;
	--c-silver-dark: 	#94A3B8;
	--c-white: 			#FFFFFF;
	
	--c-background: var(--c-navy);
	--c-text: 		var(--c-silver);
	--c-text-h: 	var(--c-white);
	--c-text-dark: 	var(--c-silver-dark);
	--c-strong: 	var(--c-yellow);
	--c-border: 	var(--c-green);
	--c-border-dim: var(--c-green-dim);
	--c-link: 		var(--c-cyan);
	--c-link-dim: 	var(--c-cyan-dim);
}

html, body, input, button, textarea, select 	{ font-family: var(--ff-normal), sans-serif; }

html 	{ margin: 0; padding: 0; font-size: 15px; line-height: 1.75; background: var(--c-background); color: var(--c-text); }
body 	{ margin: 0; padding: 0; font-size: 1rem; position: relative; }
a 		{ color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul 		{ padding-left: 1.1rem; }
ul ul 	{ list-style: disc; }

summary 			{ cursor: pointer; }
summary::marker 	{ display: none; content: ''; }

fieldset, .fieldset 	{ border: 1px solid var(--c-border); min-inline-size: min-content; padding-block: 0.35em 0.625em; padding-inline: 0.75em; }
legend, .legend 		{ unicode-bidi: isolate; padding-inline: 2px; }

.ff-mso 	{ font-family: var(--ff-mso); }
.ff-bold 	{ font-family: var(--ff-bold); }
.ff-heavy 	{ font-family: var(--ff-heavy); }

/* site */
	.site 	{ margin: 0 auto; padding: 1rem; }
	/* header */
		.site.header 				{ position: sticky; top: 0; left: 0; right: 0; background: #000c; display: flex; align-items: center; justify-content: space-between; line-height: 1; }
		.site.header button 		{ display: inline-flex; align-items: center; justify-content: space-around; width: 2rem; height: 2rem; font-size: 1.25rem; padding: 0; border: 2px solid transparent; background: var(--c-border-dim); border-radius: .33rem; color: var(--c-border); cursor: pointer; }
		.site.header button:hover 	{ border: 2px solid var(--c-border); }
		/* left */
			.site.header .left 	{ display: inline-flex; align-items: center; gap: 1rem; }
		/* dialog */
			.site.header dialog 			{ height: 100vh; width: 100%; max-width: min(300px, calc(100% - 2rem)); border: 0; border-radius: 1rem; background: var(--c-background); color: var(--c-text); }
			.site.header dialog::backdrop 	{ background: #0008; backdrop-filter: blue(8px); }	
			.site.header dialog .inner 		{ display: flex; flex-direction: column; gap: 1.5rem; }
			/* left */
				#dialog-left 	{ margin-left: 0; }
				/* aside */
					/* widget */
						.site.header .widget 	{ display: flex; flex-direction: column; gap: .75rem; }
						.site.header .widget h3	{ margin: 0; font-family: var(--ff-bold); font-size: .9rem; color: var(--c-text-h); }
						/* searchform */
							.searchform 		{ display: grid; grid-template-columns: 1fr 2rem; gap: .5rem; align-items: center; padding: .33rem; border: 1px solid var(--c-border); border-radius: .33rem; }
							.searchform input 	{ border: 0; margin: 0; padding: .25rem .5rem; background: transparent; color: var(--c-border); outline: none; }
						/* menu */
							.menu-ul 			{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
							.menu-item a		{ display: block; padding: .75rem; background: var(--c-link-dim); border: 2px solid transparent; border-radius: .33rem; }
							.menu-item a:hover 	{ border-color: var(--c-link); text-decoration: none; }
							.sub-menu 			{ list-style: none; display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; padding-left: 2rem; } 
			/* right */
				#dialog-right 	{ margin-right: 0; }
	/* body */
		.site.body { max-width: 728px; }
		/* singular */
			/* article */
				article 	{ display: flex; flex-direction: column; gap: 1.5rem; }
				/* header */
					h1 	{ color: var(--c-text-h); font-family: var(--ff-normal); font-weight: 400; }
				/* content */
					/* footnotes */
						.footnotes 					{ margin: 1.5rem 0; font-size: .9rem; }
						.jetpack-footnote:before 	{ content: '['; }
						.jetpack-footnote:after 	{ content: ']'; }
					/* headings */
						h2 	{ color: var(--c-text-h); font-family: var(--ff-bold); }
					/* strong */
						strong 	{ font-family: var(--ff-bold); color: var(--c-strong); }
					/* wp-caption */
						.wp-caption 		{ max-width: 100%; }
						.wp-caption-text 	{ font-size: small; margin: 0; }
						.aligncenter 		{ margin: 1.5rem auto; text-align: center; }
				/* footer */
					/* tags */
						.tags 				{ display: flex; flex-wrap: wrap; gap: .75em; font-size: .9rem; line-height: 1; }
						a[rel=tag] 			{ padding: .5em; border: 1px solid var(--c-link-dim); border-radius: .33em; }
						a[rel=tag]:hover 	{ border-color: var(--c-link); background: var(--c-link-dim); text-decoration: none; }
		/* entry */
			.entry 		{ display: flex; flex-direction: column; gap: 1rem; }
			.entry ul 	{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
			/* h1 */
				.entry h1 					{ display: flex; gap: .5em; }
				.entry h1:before 			{ font-family: var(--ff-mso); }
				.entry h1.cat:before 		{ content: '\e2c7'; }
				.entry h1.tag:before 		{ content: '\e9ef'; }
				.entry h1.search:before 	{ content: '\e8b6'; }
				.entry h1.article:before 	{ content: '\ef42'; }
			/* item */
				.excerpt 	{ margin: 0; font-size: .9rem; color: var(--c-text-dark); }
			/* nav */
				.entry .nav-links 			{ display: flex; align-items: center; line-height: 1; gap: .75rem; }
				.entry .page-numbers 		{ display: inline-flex; align-items: center; justify-content: space-around; min-width: 2rem; height: 2rem; border-radius: .33rem; border: 2px solid transparent; }
				.entry a.page-numbers 		{ background: var(--c-link-dim); }
				.entry .current 			{ color: var(--c-link); font-family: var(--ff-bold); border-color: var(--c-link); }
				.entry nav a:hover 			{ text-decoration: none; border-color: var(--c-link-dim); }
	/* footer */
		.site.footer { max-width: 728px; text-align: center; font-size: .9rem; }