:root {
	--font-color: black;
	--font-color-link: #58a6ff;
	--background-color: #f3f3f3;
	--background-color-bold: white;
	--background-color-action: #c0c0c066;
	--border-color: #999999;
	--border-color-dark: black;
	--border-color-light: #d0d7de88;

	--fontawesome: 'Font Awesome 6 Free';
}

@media (prefers-color-scheme: dark) { 
	:root {
		--font-color: #e4e6eb;
		--font-color-link: #58a6ff;
		--background-color: #242526;
		--background-color-bold: black;
		--border-color: #aaaaaa;
		--border-color-dark: white;
		--border-color-light: #494c5088;

		--background-color-bold: #151515;
		--background-color-bold: #1e1e1e;
		--background-color-action: #353535;
		--background-color: black;
	}
}


html { scroll-behavior: smooth; }
body { font-family:"Nanum Gothic rev=3", sans-serif; }
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);
}

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 #66afe9;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

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

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	display: none;
}

input[type=time]::-webkit-inner-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
}

input[type=time][required]::-webkit-clear-button,
input[type=date][required]::-webkit-clear-button {
	-webkit-appearance: none;
	display: none;
}

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


[overflow] { -webkit-overflow-scrolling:touch; overflow:auto; }
[overflow]::-webkit-scrollbar { display: none; }

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

label.toggle + label.toggle { }
label.toggle [type=checkbox] { display:none; }
label.toggle [type=checkbox] + span { position:relative; height:1.2em; width:2em; border:2px solid gray; border-radius:.6em; background:gray; font-size:1.2em; }
label.toggle [type=checkbox] + 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]:checked + span { border:2px solid #78cd78; background:#78cd78; }
label.toggle [type=checkbox]:checked + span:before { left:.8em; }


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

.popup > div { z-index:1040; position:absolute; 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 { background:#515e7b; background:transparent; z-index:1040; position:absolute; top:0; left:0; display:flex; justify-content:center; align-items:center; height:100%; width:100%; opacity:0; transition:opacity .5s; font-size:3em; }

.popup.overlay { /*height:100%;*/ }
.popup.overlay .popup-back { height:100%; }

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

.popup :is(.popup-body.move, .popup-body.drag) { transition:none !important; }
.popup :is(.popup-body.move, .popup-body.drag) * { /*overflow:hidden !important;*/ }

.popup.overlay .popup-body { left:100vw; transition:left .3s; height:100%; width:100%; max-height:initial; max-width:initial; padding:15px; }
.popup.left .popup-body { left:-100vw; transition:left .3s; height:100%; width:initial; padding:0; max-width:calc(100vw - 50px); }
.popup.fullscreen .popup-body { opacity:0; transition:opacity .3s; height:100%; width:100%; 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);*/ max-height:calc(100vh - 50px); }

: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:"Font Awesome 6 Free"; font-size:1.4em; }
.popup.info.icon .popup-body:before { content:"\f05a"; font-weight:900; font-family:"Font Awesome 6 Free"; font-size:1.4em; }
.popup.success.icon .popup-body:before { content:"\f058"; font-family:"Font Awesome 6 Free"; font-size:1.4em; }
.popup.warning.icon .popup-body:before { content:"\f06a"; font-weight:900; font-family:"Font Awesome 6 Free"; font-size:1.4em; }
.popup.danger.icon .popup-body:before { content:"\f05e"; font-weight:900; font-family:"Font Awesome 6 Free"; 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 .popup-body > div { transition:scale .3s; transform-origin:center; }

.popup.overlay.shrink .popup-body > div  { scale:.95; }
.popup.overlay .popup-body.move [overflow] { overflow-y:hidden; }

.popup.fullscreen.shrink .popup-body > div  { scale:.95; }

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

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

.section { overflow:hidden; background:var(--background-color-bold); border-radius:8px; display:flex; flex-direction:column; flex-shrink:0; }
.section > * { display:flex; padding:10px 16px; gap:16px; align-items:center; }

.section > * > :nth-child(n+2):last-child { margin-left:auto; }

.section > *:nth-child(n+2) { border-top:1px solid var(--border-color-light); position:relative; }
.section > *:nth-child(n+2).cont { border:0; margin-top:0px; }

.section > *:nth-child(n+2):not(.cont):before { content:' '; position:absolute; top:-1px; left:0; display:block; width:16px; border-top:1px solid var(--background-color-bold); }
.section > * > :first-child { position:relative; }

.section > *:nth-child(n+2):not(.cont) > .icon:first-child { align-self:center; }
.section > *:nth-child(n+2):not(.cont) > .icon:first-child:after { content:' '; position:absolute; top:-11px; left:0px; display:block; width:calc(100% + 16px); border-top:1px solid var(--background-color-bold); }

.section > *:nth-child(n+2):not(.cont) > .fa:first-child { align-self:center; }
.section > *:nth-child(n+2):not(.cont) > .fa:first-child:after { content:' '; position:absolute; top:-11px; left:0px; display:block; width:calc(100% + 16px); border-top:1px solid var(--background-color-bold); }

.section :is(input,textarea) { flex-grow:1; background:transparent; border:0; padding:0; resize:none; width:100%; color:var(--font-color); }
.section :is(input:focus, textarea:focus) { outline:0; box-shadow:none; border:0; }
.section .fa-chevron-right:last-child { opacity:.4; }

.section .section > * { padding:10px 0px; }
.section .section > :last-child { padding-bottom:0; }

.popup:nth-last-child(n+2) .section > .focus:before { border:0; }
.popup:nth-last-child(n+2) .section > .focus > .icon:first-child:after { border:0; }

.popup:nth-last-child(n+2) .section > .focus + *:before { border:0; }
.popup:nth-last-child(n+2) .section > .focus + * > .icon:first-child:after { border:0; }

.body:nth-last-child(n+2) .section > .focus:before { border:0; }
.body:nth-last-child(n+2) .section > .focus > .fa:first-child:after { border:0; }

.body:nth-last-child(n+2) .section > .focus + *:before { border:0; }
.body:nth-last-child(n+2) .section > .focus + * > .fa:first-child:after { border:0; }

.section > .focus { transition:background-color .3s; }
.section > .focus + .cont { transition:background-color .3s; }

.section .section > *:not(.cont):after { content:' '; position:absolute; top:-1px; height:1px; right:-16px; display:block; width:16px; border-top:1px solid var(--border-color-light); }
.section .section > *:not(.cont):before { border:0; }

.body:not(:last-child) .section > *.focus { background-color:var(--border-color-light); }
.popup:not(:last-child) .section > *.focus { background-color:var(--border-color-light); }

.body:not(:last-child) .section > *.focus + .cont { background-color:var(--border-color-light); }
.popup:not(:last-child) .section > *.focus + .cont { background-color:var(--border-color-light); }

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

.sect { border-radius:8px; background:var(--background-color-bold); }
.sect > * { display:flex; justify-content:space-between; align-items:center; transition:background .3s; display:flex; align-items:stretch; }
.sect > *:first-child { border-top-left-radius:8px; border-top-right-radius:8px; }
.sect > *:last-child { border-bottom-left-radius:8px; border-bottom-right-radius: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 > :nth-child(n+2):not(.cont) > * { border-top:1px solid var(--border-color-light); }
.sect > :nth-child(n+2) > .icon { border-color:transparent; }

.sect .sect { padding:0; }

.popup:nth-last-child(n+2) .sect > *.focus { background:var(--border-color-light); }
.popup:nth-last-child(n+2) .sect > *.focus > :first-child { margin-left:0; padding-left:16px; }
.popup:nth-last-child(n+2) .sect > *.focus + * > :first-child { margin-left:0; padding-left:16px; }
.popup:nth-last-child(n+2) .sect > *.focus:nth-child(n+2) > * { border-top:1px solid var(--border-color-light); }
.popup:nth-last-child(n+2) .sect > *.focus + * > .icon { border-color:var(--border-color-light); }

.body:nth-last-child(n+2) .sect > *.focus { background:var(--border-color-light); }
.body:nth-last-child(n+2) .sect > *.focus > :first-child { margin-left:0; padding-left:16px; }
.body:nth-last-child(n+2) .sect > *.focus + * > :first-child { margin-left:0; padding-left:16px; }
.body:nth-last-child(n+2) .sect > *.focus:nth-child(n+2) > * { border-top:1px solid var(--border-color-light); }
.body:nth-last-child(n+2) .sect > *.focus + * > .icon { border-color:var(--border-color-light); }

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

.sect :is(input,textarea) { flex-grow:1; background:transparent; border:0; padding:0; resize:none; width:100%; color:var(--font-color); }
.sect :is(input:focus, textarea:focus) { outline:0; box-shadow:none; border:0; }

.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; }

@media (prefers-color-scheme: dark) { 
	::-webkit-calendar-picker-indicator { filter:invert(100%); }
}