@charset "UTF-8";

/* variables */
/* 배경 색상 */
@property --bgc {
 	syntax: '<color>';
 	initial-value: #ffffff;
 	inherits: true;
}

/* 글씨 크기 */
@property --fs {
 	syntax: '<length>';
 	initial-value: 16px;
 	inherits: true;
}

/* 글씨 색상 */
@property --fc {
 	syntax: '<color>';
 	initial-value: #000000;
 	inherits: true;
}

/* 테두리 색상 */
@property --bdc {
 	syntax: '<color>';
 	initial-value: #969696;
 	inherits: true;
}

/* 디자인 맞추기용 가로크기 */
@property --frame {
 	syntax: '<length> <percentage>';
 	initial-value: 1920px;
 	inherits: true;
}

/* 세로 센터보정값 */
@property --cv-vertical {
 	syntax: '<length>';
 	initial-value: 0px;
 	inherits: true;
}

:root {
	/* 상태구분용 색상 */
	--primary: #000000;
	--secondary: #969696;
	--info: #7ae0f6;
	--success: #7fe4b3;
	--warning: #ffe088;
	--danger: #ea8d95;
}
/* variables */

/* init setting */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  cursor: default;
  box-sizing: border-box;
}

html { 
	-moz-text-size-adjust: none;
  	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
	font-family: "Noto Sans KR", sans-serif;
}

body { overflow:hidden; --cv-vertical: calc( ( 50 * var(--fvh) ) - ( 50 * var(--vh) ) ); font-size:var(--fs); }
body.mobile { --cv-vertical: calc( 50vh - ( 50 * var(--vh) ) ); }

img { display:block; }

/* cursor */
[act]:not(.popup) { cursor:pointer; }
[act]not(.popup):disabled { cursor:not-allowed; }

/* test */
._test:not(.test), ._dev:not(.dev), ._beta:not(.beta) { display:none !important; }

/* init setting */


/* component */

/* overflow */
[overflow] { overflow:auto; }

/* sticky */
[sticky] { position:sticky; z-index:99; top:0; background:var(--bgc); }

/* popup */
.popup .popup-back { background:black; opacity:.5; }
.popup .popup-body { background:transparent; font-size:var(--fs); color:var(--fc); }

/* timer */
[timer] { color:var(--fc); }
[timer][cond=go] { --fc:var(--secondary); }
[timer][cond=over] { --fc:var(--danger); }

/* debug */
[debug] { max-height:50vh; position:fixed; left:0; bottom:40px; z-index:10000000; color:white; font-size:8pt; }
[debug] > * { width:fit-content; margin-bottom:5px; padding:2px 4px; background:rgba( 0, 0, 0, 0.5 ); animation-duration:.3s; animation-name: slideIn; }

/* textbox */
.tbox {
	display: -webkit-box; 
    -webkit-box-orient: vertical;
    overflow: hidden;
	white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: keep-all;
}
.tbox[line="1"] { -webkit-line-clamp:1; }
.tbox[line="2"] { -webkit-line-clamp:2; }
.tbox[line="3"] { -webkit-line-clamp:3; }
.tbox[line="4"] { -webkit-line-clamp:4; }
.tbox[line="5"] { -webkit-line-clamp:5; }

/* button */
.btn { 
	width: initial;
	padding: 0.5rem 1.25rem;
	line-height: 1;
	outline: 0;
	border: 0;
	border-radius: 0.25em;
	border-color: var(--bdc);
	font-family: inherit;
	font-size: inherit;
	color: var(--fc);
	background: var(--bgc);
	
	--bgc: var(--secondary);
	--bdc: var(--secondary);
	--fc: #333333;
}
.btn:disabled, .btn:not(:disabled):hover { opacity:0.7; }

.btn.btn-xs { padding:0.3rem 0.65rem; }
.btn.btn-sm { padding:0.4rem 0.95rem; }
.btn.btn-lg { padding:0.6rem 1.55rem; }
.btn.btn-xl { padding:0.7rem 1.85rem; }

.btn.btn-primary { --bgc:var(--primary); --bdc:var(--primary); --fc:#ffffff; }
.btn.btn-secondary { --bgc:var(--secondary); --bdc:var(--secondary); --fc:#ffffff; }
.btn.btn-success { --bgc:var(--success); --bdc:var(--success); --fc:#333333; }
.btn.btn-warning { --bgc:var(--warning); --bdc:var(--warning); --fc:#333333; }
.btn.btn-danger { --bgc:var(--danger); --bdc:var(--danger); --fc:#ffffff; }
.btn.btn-info { --bgc:var(--info); --bdc:var(--info); --fc:#333333; }

.btn.btn-default { border:1.7px solid #8a8a8a; background:transparent; color:#717171; font-weight:bold; }
.btn.btn-default:not(:disabled):hover { background:#333333; border-color:#333333; color:#ffffff; }

.btn.btn-round {
	border-radius: 2em;
}

.btn.btn-thin {
	padding:0.2rem 0.35rem;
}

.btn.btn-outline {
	border: 1.7px solid var(--bdc);
	background: white !important;
	color: var(--bdc);
}
.btn.btn-outline:disabled, .btn.btn-outline:not(:disabled):hover { opacity:0.5; } 

/* input */
.form-control { 
	width: 100%;
	outline: 0;
	border: 1px solid var(--bdc);
	border-radius: 0.2em;
	padding: 0.3em 0.4em;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
	background: var(--bgc);
	color: var(--fc);
}
.form-control.error { --bdc:var(--danger); }
.form-control::placeholder { color:var(--fc); --fc:#969696; }

.form-control.form-control-xl { padding: 0.1em 0.2em; }
.form-control.form-control-sm { padding: 0.2em 0.3em; }
.form-control.form-control-lg { padding: 0.4em 0.5em; }
.form-control.form-control-xl { padding: 0.5em 0.6em; }

/* checkbox */
label.checkbox { display:flex; position:relative; align-items:center; }
		
label.checkbox > span { 
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid var(--bdc);
	background: var(--bgc);
	position: relative;
	font-size: inherit;
	
	--bgc:white;
	--bdc:gray;
}
label.checkbox.checkbox-square > span { border-radius:0.4em; }

label.checkbox > span::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 30%;
	height: 55%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-70%) rotateZ(40deg);
	border-right: 1.5px solid var(--bdc);
	border-bottom: 1.5px solid var(--bdc);
}

label.checkbox > div { padding-left:0.5em; padding-top:0.2em; }

label.checkbox > [type=checkbox] { display:none; }
label.checkbox > [type=checkbox]:checked + span { border:0; --bgc:var(--primary); }
label.checkbox > [type=checkbox]:checked + span::before { --bdc:white; }
label.checkbox > [type=radio] { display:none; }
label.checkbox > [type=radio]:checked + span { border:0; --bgc:var(--primary); }
label.checkbox > [type=radio]:checked + span::before { --bdc:white; }

/* radio button */
label.radio { display:flex; position:relative; align-items:center; }

label.radio > span { 
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid var(--bdc);
	background: var(--bgc);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: inherit;
	
	--bgc:transparent;
	--bdc:gray;
}
label.radio.radio-square > span { border-radius:0.4em; }

label.radio > span::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 65%;
	height: 65%;
	border-radius: 50%;
	background: var(--bgc);
	font-size: inherit;
	
	--bgc:transparent;
}
label.radio.radio-square > span::before { border-radius:calc(0.65 * 0.4em); }

label.radio > div { padding-left:0.5em; padding-top:0.2em; }

label.radio > [type=checkbox] { display:none; }
label.radio > [type=checkbox]:checked + span::before { --bgc:var(--primary); }
label.radio > [type=radio] { display:none; }
label.radio > [type=radio]:checked + span::before { --bgc:var(--primary); }

/* component */