:root {
	--font-color: black;
	--font-color-light: silver;
	--font-color-link: #58a6ff;
	--font-color-dark: white;
	--background-color: #f3f3f3;
	--background-color-bold: white;
	--background-color-action: #c0c0c066;
	--background-color-dark: black;
	--background-color-popup: #515e7b;
	--border-color: #999999;
	--border-color-dark: black;
	--border-color-light: #d0d7de88;
	--toggle-color: #cccccc;
	--toggle-color-active: #78cd78;
	--toogle-color-disable: #5555ff;
	
	--fontawesome: 'Font Awesome 6 Free';
}

@media (prefers-color-scheme: dark) { 
	:root {
		--font-color: #e4e6eb;
		--font-color-light: gray;
		--font-color-link: #58a6ff;
		--font-color-dark: black;
		--background-color: #242526;
		--background-color-bold: #1e1e1e;
		--background-color-action: #353535;
		--background-color-dark: white;
		--background-color-popup: #515e7b;
		--background-color: black;
		--border-color: #aaaaaa;
		--border-color-dark: white;
		--border-color-light: #494c5088;
		--toggle-color: #555555;
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { font-family:"Nanum Gothic rev=3", sans-serif; margin:0; }
body { font-family:"Noto Sans KR", sans-serif; }
body { background:var(--background-color); color:var(--font-color); font-size:14px; }

a, a:focus, a:active, a:hover, a:visited {
	color:var(--font-color-link);
	text-decoration: none;
	-webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none;
    outline: rgba(0, 0, 0, 0);
}

.desktop a:hover { text-decoration:underline; }

input:not(:focus), select:not(:focus) { border:0; }
textarea { border:1px solid #ccc; border-radius:4px; color:#555; background:#fff; }
select:focus, button:focus, .btn:focus, input:focus, textarea:focus, [contenteditable]:focus { 
	outline: 0;
	border:1px solid var(--border-color-light);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px gray;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px gray;
}

:focus-visible { outline:none; }

a { font-size:1em; }
input { font-size:1em; padding:4px 15px; border-radius:8px; flex-shrink:0; background:var(--background-color-bold); }
input:not(:focus), textarea:not(:focus), select:not(:focus) { border:1px solid transparent; }
select { font-size:1em; padding:4px; border-radius:8px; flex-shrink:0; background:var(--background-color-bold); }


@media (prefers-color-scheme: dark) { 
	input[readonly] { background:var(--border-color-light) !important; }
}

/* .mobile :focus { outline:0; border:1px solid #ccc; box-shadow:initial; -webkit-box-shadow:initial; } */

::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
::-webkit-inner-spin-button { -webkit-appearance: none; display: none; }
::-webkit-clear-button { -webkit-appearance: none; display: none; }
::-webkit-calendar-picker-indicator { filter:grayscale(100%); }
::-webkit-scrollbar { display: none; }

[type=datetime-local], [type=date], [type=time], [type=number], [type=text], [type=password], textarea { -moz-appearance: textfield; background-clip:padding-box; -webkit-appearance:none; -moz-appearance:none; appearance:none; }

[overflow] { overflow:auto; }
[overflow=x] { overflow-y:hidden; }
[overflow=y] { overflow-x:hidden; }

@media ( hover:none ) {
	[overflow] { -webkit-overflow-scrolling:touch; }
}

label.toggle { flex:0 0; display:inline-flex; gap:.2em; align-items:center; line-height:1; margin:0; font-weight:normal; 	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space:nowrap; }

label.toggle + label.toggle { /*margin-left:1em;*/ }
label.toggle [type=checkbox] { display:none; }
label.toggle [type=checkbox].slide + span { position:relative; height:1.2em; width:2em; border:2px solid var(--toggle-color); border-radius:.6em; background:var(--toggle-color); font-size:1.2em; }
label.toggle [type=checkbox].slide + span:before { transition:all .2s; content:''; display:block; position:absolute; height:calc(1.2em - 4px); width:calc(1.2em - 4px); border-radius:50%; background:white; left:0; }
label.toggle [type=checkbox].slide:checked + span { border:2px solid var(--toggle-color-active); background:var(--toggle-color-active); }
label.toggle [type=checkbox].slide:disabled + span { border:2px solid #5555ff; background:#5555ff; }
label.toggle [type=checkbox].slide:checked + span:before { left:.8em; }

label.toggle [type=checkbox]:not(.slide) + span:after { font-family:var(--fontawesome); content:'\f0c8'; font-weight:400; font-size:1.5em; color:var(--toggle-color); }
label.toggle [type=checkbox]:not(.slide):checked + span:after { content:'\f14a'; color:var(--toggle-color-active); }
label.toggle [type=checkbox][disabled]:not(.slide) + span:after { opacity:.4; }

label.toggle [type=radio] { display:none; }
label.toggle [type=radio] + span:after { font-family:var(--fontawesome); content:'\f111'; font-weight:400; font-size:1.5em; color:var(--toggle-color); }
label.toggle [type=radio]:checked + span:after { content:'\f192'; color:var(--toggle-color-active); }
label.toggle [type=radio][disabled] + span:after { opacity:.4; }
label.toggle [type=radio]:checked.toggle + span:after { content:'\f058'; }

.dropdown-menu-center { right: auto; left: 50%; -webkit-transform: translate(-50%, 0); }

.popup { position:fixed; top:0; left:0; }
.popup > div { z-index:1040; position:fixed; width:100%; top:0; left:0; display:flex; justify-content:center; }
.popup.top > div { width:100%; align-items:center }
.popup.center > div { height:100%; align-items:center }
.popup.overlay > div { height:100%; width:100%; }
.popup.left > div { height:100%; width:100%; }

.popup .popup-back { z-index:1040; position:fixed; top:0; left:0; display:flex; justify-content:center; align-items:center; height:100vh; width:100vw; font-size:3em; transition:opacity .3s; }

.popup:nth-of-type(2) .popup-back { background:var(--background-color-popup); opacity:.5; }
.popup:last-of-type:not(.overlay) .popup-back { background:var(--background-color-popup); opacity:.5; }
		
body.mobile .popup.overlay .popup-back { display:none; }

.popup .popup-body { color:var(--font-color); background:var(--background-color); position:absolute; width:100%; max-height:calc(100vh - 40px); overflow:hidden; }

.popup.top .popup-body { left:calc(var(--left) + 10px); width:calc(100vw - var(--left) - 20px); }
.popup.bottom .popup-body { left:calc(var(--left) + 10px); width:calc(100vw - var(--left) - 20px); }
.popup.center .popup-body { max-width:calc(100vw - var(--left) - 20px); margin-left:var(--left); }


.popup-body.move, .popup-body.drag { transition:none !important; }
.popup-body.move [overflow], .popup-body.drag [overflow] { overflow:hidden !important; }

.popup.overlay .popup-body { left:100vw; transition:left .3s; height:100%; width:calc(100% - var(--left)); max-height:initial; max-width:initial; padding:15px; }
.popup.left .popup-body { left:-100vw; transition:left .3s; height:100vh; width:initial; padding:0; max-width:calc(100vw - 50px); }
.popup.fullscreen .popup-body { opacity:0; transition:opacity .3s; height:100vh; width:100vw; max-height:initial; max-width:initial; padding:15px; }
.popup.center .popup-body { transition:opacity .1s; position:initial; width:initial; border-radius:15px; padding:20px; box-shadow:0 0 4px var(--border-color); }
.popup.bottom .popup-body { transition:bottom .3s; bottom:-200vh; border-radius:15px 15px 0 0; padding:20px; /*box-shadow:0 -2px 2px var(--border-color-light);*/ }
.popup.top .popup-body { margin-top:10px; transition:top .3s; top:-100vh; border-radius:8px; padding:20px; /*box-shadow:inset 0 0 4px var(--border-color);*/ }

:is(.popup.primary, .popup.info, .popup.success, .popup.warning, .popup.danger) .popup-body { font-size:1.2em; padding:15px; text-align:center; display:flex; gap:10px; align-items:center; justify-content:center; word-break:break-all; }

@media (max-width:320px) { 
	.popup.overlay .popup-body { padding:5px; }
	.popup.top .popup-body { padding:10px; }
	.popup.bottom .popup-body { padding:10px; }
	.popup.center .popup-body { padding:10px; }
}

.popup.primary .popup-body { background:#337ab7; color:#ffffff; border-color:#337ab7; }
.popup.info .popup-body { background:#d9edf7; color:#31708f; border-color:#d6e9c6; }
.popup.success .popup-body { background:#dff0d8; color:#3c763d; border-color:#bce8f1; }
.popup.warning .popup-body { background:#fcf8e3; color:#8a6d3b; border-color:#faebcc; }
.popup.danger .popup-body { background:#f2dede; color:#a94442; border-color: #ebccd1; }

.popup.primary.icon .popup-body:before { content:"\f0f3"; font-family:var(--fontawesome); font-size:1.4em; }
.popup.info.icon .popup-body:before { content:"\f05a"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }
.popup.success.icon .popup-body:before { content:"\f058"; font-family:"FontAwesome"; font-size:1.4em; }
.popup.warning.icon .popup-body:before { content:"\f06a"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }
.popup.danger.icon .popup-body:before { content:"\f05e"; font-weight:900; font-family:var(--fontawesome); font-size:1.4em; }

.popup.confirm .popup-body { padding:16px 32px; border-radius:20px; display:flex; flex-direction:column; gap:15px; max-width:calc(100vw - 30px); }
.popup.confirm .popup-body > :first-child { font-size:1.2em; }
.popup.confirm .popup-body > :last-child { display:flex; gap:10px; justify-content:center; }
.popup.confirm .btn { padding:8px 20px; border-radius:10px; }

.popup.confirm .btn { background:var(--background-color-bold); border:0; }
.popup.confirm .btn-default { color:silver; }
.popup.confirm .btn-primary { color:black; }

@media (prefers-color-scheme: dark) { 
	.popup.confirm .btn-default { color:#7d7d7d; }
	.popup.confirm .btn-primary { color:white; }
}

.popup.confirm .btn-default:empty:after { content:var(--cancel); }
.popup.confirm .btn-primary:empty:after { content:var(--confirm); }

.popup.alert .popup-body { padding:20px 40px; border-radius:20px; display:flex; flex-direction:column; gap:15px; max-width:calc(100vw - 30px); }
.popup.alert .popup-body > :first-child { font-size:1.2em; }
.popup.alert .popup-body > :last-child { display:flex; gap:10px; justify-content:center; }
.popup.alert .btn { padding:8px 20px; border-radius:10px; }

.popup.alert .btn-default { opacity:.8; }
.popup.alert .btn-primary { background:black; border:1px solid black; }
.popup.alert .btn-primary:empty:after { content:var(--confirm); }

.popup .top { flex-shrink:0; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; justify-content:space-between; }
.popup .top [close] { display:flex; gap:5px; align-items:center; font-size:1.2em; padding:10px; margin:-10px; }

.popup .top [close]:before { content:"\f053"; font-family:'fontAwesome'; } 
.popup .top [close]:after { content:"이전"; } 

.popup:not(.overlay) .top [close]:before { content:"\f00d"; } 
.popup:not(.overlay) .top [close]:after { content:""; }
.desktop .popup:not(.overlay) .top [close]:after { content:"ESC"; opacity:.4; }

.popup .top > :nth-child(2) { font-size:1.4em; justify-self:center; }
.popup .top > :nth-child(3) { justify-self:end; display:flex; gap:10px; align-items:center; }

.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

:root {
	--confirm : "확인";
	--cancel  : "취소";

	--left: 0px;
	--left-padding: -25vw;
}	

.sect { border-radius:8px; background:var(--background-color-bold); flex-shrink:0; }
.sect > * { display:flex; justify-content:space-between; transition:background .3s; align-items:stretch; }
.sect > :first-child:last-child { height:100%; }
.sect > *:first-child { border-radius:8px 8px 0 0; }
.sect > *:last-child { border-radius:0 0 8px 8px; }
.sect > * > * { padding:10px 16px 10px 0; line-height:1.4; }
.sect > * > :first-child { margin-left:16px; }
.sect > * > :nth-last-child(2) { flex-grow:1; }
.sect > * > :first-child:last-child { flex-grow:1; }
.sect > * .fa-chevron-right:last-child:before { opacity:.4; }

.sect > * > .icon { flex:0 0; }
.sect > :nth-last-child(n+2) > :not(.icon) { border-bottom:1px solid var(--border-color-light); }

.sect .sect { padding:0; }

.popup:nth-last-of-type(n+2) .sect > *.focus { position:relative; }
.popup:nth-last-of-type(n+2) .sect > *.focus:after { content:' '; position:absolute; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }

.base:nth-last-of-type(n+2) .sect > *.focus { position:relative; }
.base:nth-last-of-type(n+2) .sect > *.focus:after { content:' '; position:absolute; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }

/*
팝업메뉴가 안보이는 오류가 발생함
.sect > *.focus:first-child { overflow:hidden; }
.sect > *.focus:last-child { overflow:hidden; }
*/

.sect.union { padding:10px 0; }
.sect.union > * > * { border:0 !important; }
.sect.union .divider { margin-left:16px; border-bottom:1px solid var(--border-color-light); }
.sect.union .divider:last-child { display:none; }
.sect.union .divider + .divider { display:none; }

.sect.compress > * > * { padding:5px 16px 5px 0; }

.mobile .sect:not(.drag) :not(input,textarea) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.sect input { background:transparent; border:0; padding:0; resize:none; width:100%; color:var(--font-color); }
.sect textarea { background:transparent; border:0; padding:0; resize:none; width:100%; color:var(--font-color); min-height:2em; max-height:50vh; }
.sect :is(input:focus, textarea:focus) { outline:0; box-shadow:none; border:0; }

.tree [toggle] { display:flex; justify-content:space-between; gap:1em; }
.tree [toggle]:after { content:"\f0d7"; opacity:.4; font-family:fontAwesome; padding-left:1em; }
.tree [toggle][open] { font-style:italic; }
.tree [toggle][open]:after { content:"\f0d8"; font-style:normal; }
.tree .node { display:none; padding-left:1.5em; }

.gray { color:gray; }


.dropdown-menu { background:var(--background-color); opacity:.9; border:1px solid var(--border-color-light); box-shadow:inset 0 0 4px var(--border-color); border-radius:8px; padding:4px; }
.dropdown-menu li a { background:transparent; color:var(--font-color); padding:8px 20px; }
.dropdown-menu li.active a { background:var(--background-color-bold); color:var(--font-color); }
.dropdown-menu li.active:hover a { background:var(--background-color-bold); color:var(--font-color);  }
.dropdown-menu li:hover a { background:var(--background-color-bold); color:var(--font-color); }

.vscroll { 
	--c : 2;
	--l : 5px;
	--g : 10px;
	--w : calc( (100% - var(--l) * 2 - var(--g) * (var(--c) + 1)) / var(--c) );
}

@media (max-width:300px) { .vscroll { --c : 1; } }
@media (min-width:500px) { .vscroll { --c : 3; } }
@media (min-width:700px) { .vscroll { --c : 4; } }
@media (min-width:900px) { .vscroll { --c : 5; } }

.vscroll { display:flex; gap:var(--g); scroll-padding:calc( var(--g) + var(--l) ); scroll-snap-type: x mandatory; scroll-snap-stop:always; }
.vscroll > * { scroll-snap-align:start; flex-shrink:0; width:var(--w); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; }

.vscroll > :first-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-left:calc( var(--g) + var(--l) ); }
.vscroll > :last-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-right:calc( var(--g) + var(--l) ); }
.vscroll > :first-child:last-child { width:calc( var(--w) + var(--g) + var(--l) ); padding-right:0; }

.vscroll > * > div:nth-child(1) { position:relative; height:var(--w); width:var(--w); display:flex; align-items:center; justify-content:center; }


debug { max-height:50vh; position:fixed; right:0; bottom:0; padding:5px; width:calc(100% - var(--left)); z-index:10000000; max-width:500px; font-family:monospace; }
debug:empty { display:none; }
debug > * { padding:2px 4px; text-align:right; background:rgba( 0, 0, 0, 0.5 ); color:white; font-size:8pt; word-break:break-all; }

@media (prefers-color-scheme: dark) { 
	debug > * { background:rgba( 255,255,255,0.5 ); }
}

.dropdown { position: relative; display: inline-block; }

.dropdown .content {
	display: none;
	border-radius:4px;
	position: absolute;
	background-color: var(--background-color-bold);
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	margin: 2px 0;
}

@media (prefers-color-scheme: dark) { 
	.dropdown .content { box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2); }
}

.dropdown.open .content { display: block; }
.dropdown.up .content { top: auto; bottom: 100%; }
.dropdown.right .content { right: 0; left: auto; }
.dropdown.center .content { right:auto; left:50%; transform:translate(-50%,0); }

.dropdown .content a { color: var(--font-color); padding: 8px 20px; text-decoration: none; display: block; white-space:nowrap; position:relative; }

.dropdown .content hr { border-top:1px solid var(--border-color); opacity:.2; }
.dropdown .content a:hover { position:relative; }

.dropdown .content > .active:before { content:' '; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--border-color-dark); opacity:.05; }
.dropdown .content > a:hover:before { content:' '; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--border-color-dark); opacity:.2; }

.flip { perspective: 1000px; }
.flip .inner { position: relative; width: 100%; height: 100%; transition: transform .3s; transform-style: preserve-3d; }
.flip .inner > * { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip.on .inner, .flip .back { transform: rotateY(180deg); }
.flip.vertical.on .inner, .flip.vertical .back { transform: rotateX(180deg); }

.hidden { display:none !important; }

.table { width:100%; }
.table thead th { position:sticky; top:0; padding:5px 10px; background:var(--background-color-bold); font-size:1.1em; white-space:nowrap; }
.table tfoot th { position:sticky; bottom:0; padding:5px 10px; background:var(--background-color-bold); font-size:1.1em; white-space:nowrap; }
.table tr > * { padding:5px 10px; }

.table thead tr > * { border-bottom:1px solid var(--border-color-light); }
.table tfoot tr > * { border-top:1px solid var(--border-color-light); }