@charset "utf-8";
@layer theme {
	:root{
		--grey-0: oklch(1. .0000 263.28);  
		--grey-2: oklch(.985 .0018 248.57);  
		--grey-4: oklch(.970 .0030 264.51);  
		--grey-5: oklch(.961 .0018 248.55);
		--grey-7: oklch(.942 .0030 242.77);
		--grey-10: oklch(.923 .0043 236.98);  
		--grey-15: oklch(.884 .0053 248.11);  
		--grey-20: oklch(.845 .0070 233.96);  
		--grey-25: oklch(.804 .0088 236.80);  
		--grey-30: oklch(.765 .0115 235.03);  
		--grey-35: oklch(.724 .0127 240.10);  
		--grey-40: oklch(.683 .0146 233.97);  
		--grey-45: oklch(.640 .0166 235.63);  
		--grey-50: oklch(.599 .0196 234.80);  
		--grey-55: oklch(.556 .0172 235.69);  
		--grey-60: oklch(.511 .0156 234.08);  
		--grey-65: oklch(.465 .0140 232.01);  
		--grey-70: oklch(.419 .0133 235.21);  
		--grey-75: oklch(.371 .0106 236.94);  
		--grey-80: oklch(.321 .0088 234.04);  
		--grey-83: oklch(.285 .0039 264.50);  
		--grey-85: oklch(.269 .0069 229.22);  
		--grey-90: oklch(.215 .0061 236.93);  
		--grey-95: oklch(.158 .0027 248.08);  
		--grey-97: oklch(.134 .0000 263.28);  
		--grey-100: oklch(.000 .0000 .00);

  	--spacing: 0.25rem;
  	--item-size: 256px;		

	  --text-xs: .75rem;
    --text-xs--line-height: calc(1/.75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25/.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5/1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75/1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75/1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2/1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25/1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5/2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;

	  --radius-xs: 0.125rem;
	  --radius-sm: 0.25rem;
	  --radius-md: 0.375rem;
	  --radius-lg: 0.5rem;
	  --radius-xl: 0.75rem;
	  --radius-2xl: 1rem;
	  --radius-3xl: 1.5rem;
	  --radius-4xl: 2rem;    

    color-scheme: light dark;
	}
	html,html.light{
		--bg-header:oklch(.982 .001 286.376);
		--body-bg-color:var(--grey-4);
		--content-bg-color:oklch(1.000 .0000 .00);  
		--default:oklch(.000 .0000 .00);  

	  --text-1st:var(--grey-85);
	  --text-2st:var(--grey-60);
	  --text-3rd:var(--grey-50);
	  --text-4th:var(--grey-30);
	  --text-color:var(--text-1st);
	  --bg-active:var(--grey-7);

		--link-color: oklch(0.633 0.209 29.733);
		--link-hover-color: oklch(0.583 0.209 29.733);
		--link-bg-color: oklch(.961 .0176 259.87);  
		--selection-bg: oklch(.911 .0679 259.58);  
		--selection-color: oklch(.357 .1443 286.19);  
		--border-color:var(--grey-10);
		--blockquote-color: oklch(.438 .0076 276.91);  
		--brand-color: oklch(1. .0001 263.28);  
		--brand-hover-color: oklch(1. .0001 263.28);  
		--table-row-odd-bg-color: oklch(.986 .0016 257.29);  
		--table-row-hover-bg-color: oklch(.970 .0022 261.85);  
		--hilightjs-header-bg-color: oklch(.339 .009 274.00);
		--hilightjs-text-color: oklch(.918 .006 255.47);
	}
	html.dark{
		--bg-header:#27282a;
    --body-bg-color: #27282a;
    --content-bg-color: #1d1e20;
    --default: oklch(1 .0001 .28);

    --text-1st: var(--grey-10);
    --text-2st: var(--grey-30);
    --text-3rd: var(--grey-45);
    --text-4th: var(--grey-60);
    --text-color: var(--text-1st);
    --bg-active:oklch(0.65 0.02 276.5 / 0.5);

    --link-color: #e73f22;
    --link-hover-color: #ff5425;
    --link-bg-color: oklch(.200 .0500 259.87);
    --selection-bg: oklch(.300 .1000 259.58);
    --selection-color: oklch(.900 .2000 286.19);
    --border-color: var(--grey-75);
    --blockquote-color: oklch(.700 .0200 276.91);
    --brand-color: oklch(.100 .0050 263.28);
    --brand-hover-color: oklch(.200 .0100 263.28);
    --table-row-odd-bg-color: var(--grey-80);
    --table-row-hover-bg-color: var(--grey-75);
		--hilightjs-header-bg-color: oklch(.289 .009 234.00);  
		--hilightjs-text-color: oklch(.918 .006 255.47);
	}
}	/* 레이어 theme */

/* 기본 리셋 css */
@layer base {
	/* v5 심플 */
	*,:after,:before,::backdrop{box-sizing:border-box}body{height:100%;max-width:100vw;margin:0;padding:0;vertical-align:baseline;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard Variable",Pretendard,Roboto,"Noto Sans KR","Segoe UI","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;font-weight:400;font-size:1rem;line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4,h5,h6,p,blockquote,figure,dd,li,table,fieldset,form,pre,iframe,hr{margin:0;padding:0}ol,ul{list-style:none}table{width:100%;border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:inherit;cursor:pointer}img,svg,video,canvas{display:block;max-width:100%;height:auto}video{outline:none;border:0}button,input,select,textarea{font:inherit;margin:0;padding:0;border:0;outline:none;appearance:none;background:transparent}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{appearance:none}textarea{resize:vertical}button{cursor:pointer;border-radius:0}[role="button"]{cursor:pointer}abbr:where([title]){text-decoration:underline dotted;cursor:help}[hidden]{display:none!important}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}caption,legend{position:absolute;clip:rect(0,0,0,0);clip-path:circle(0);margin:-1px;padding:0;border:0;white-space:nowrap;text-indent:-999em}

	/*  */
	*,:after,:before{border:0 solid var(--border-color)}
	body{color:var(--text-color);background-color:var(--body-bg-color);transition:background-color 0.3s,color 0.3s;font-family:var(--font-Pretendard);font-feature-settings:'ss01','ss02','ss07','ss08'!important;text-wrap:pretty}
	::selection {background:var(--selection-bg);color:var(--selection-color)}
	*:not(pre):not(code) {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-weight:bold}
	h1{font-size:var(--text-3xl)}
	h2{font-size:var(--text-2xl)}
	h3{font-size:var(--text-xl)}
	h4{font-size:var(--text-lg)}
	h5{font-size:var(--text-base)}
	h6{font-size:var(--text-sm)}
	p{margin:0 0 20px}
	a{color:var(--link-color);outline:0}
	a:hover{color:var(--link-hover-color)}
	abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}
	b,strong{font-weight:bolder;}
	small{font-size:80%}
	kbd,.kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--content-bg-color);background-color:var(--text-color);border-radius:.25rem}
	code,kbd,pre,samp{font-family:var(--font-monospace);font-size:1em}
	code{font-size:.875em;color:var(--hilightjs-text-color);word-wrap:break-word}
	code, kbd, .kbd {margin-right:3px;margin-left:3px;}
	pre code{font-size:inherit;color:inherit;word-break:normal}
	sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
	sub{bottom:-0.25em;}
	sup{top:-0.5em;}
	.lead{font-size:1.25rem;font-weight:300}	
	input:where([type=button],[type=reset],[type=submit]){appearance:button}
	mark,.mark{padding:.1875em;color:var(--text-1st);background-color:#fff3cd}
}