@charset "utf-8";

body{font-size: 18px;}
/* 레이아웃 */
#header {background-color: #0f3561;}
#header .inner {display: flex; align-items: center; justify-content: space-between; height: 60px; color: #fff;}
#header .inner * { font-size: 20px;}

#footer {height: 171px; padding: 45px 0 60px 0; background-color: #f5f5f5; box-sizing: border-box;}
#footer .inner {display: flex; gap: 40px;}
#footer ul {display: flex; flex-direction: column; gap: 8px;}
#footer ul li {font-size: 13px; color: #333333;}
#footer ul li:not(:last-child) {font-weight: 600;}
#footer ul li:last-child {margin-top: 5px;}

#wrap {min-height: 100%; display: flex; flex-direction: column;}
#container {flex: 1;}

h4.sec-tit {margin: 70px 0 15px; padding-left: 12px; border-left: 2px solid #0d79c2; font-size: 18px; font-weight: 600; line-height: 1.3em; box-sizing: border-box;}

/* 테이블 공통 */
.tbl-wrap {position:relative; border-top: 1px solid #6d6d6d;}
.tbl {width: 100%; border-collapse: collapse; vertical-align: top; border-bottom: 1px solid #ececec;}
.tbl th,
.tbl td {height: 45px; padding: 8px 10px; border: 1px solid #ececec;}
.tbl th{background-color: #f9f9f9; border-bottom: 1px solid #cdcdcd;}
.tbl th label {line-height: 1.5;}
.tbl tr > *:first-child {border-left: none;}
.tbl tr > *:last-child {border-right: none;}
.tbl tbody > tr:last-child > * {border-bottom: none;}

/* 행테이블 */
.tbl.row th{border-bottom: 1px solid #ececec;}
.tbl.row tr th[rowspan] ~ th {height: 30px;}

.tbl td:has(.context) {padding: 10px}
.tbl .context {position: relative; z-index: 1; padding: 40px; background-color: #eef5f8; background:url(../../images/bg_line.jpg); box-sizing: border-box;}
.tbl .context:before {content: ''; position: absolute; z-index: -1; display: block; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); background-color: #fff;}
.tbl .context .context-tit {display:flex; align-items: center; margin-bottom: 20px; padding: 0 0 0 44px; color:#363c5a; font-size: 18px; height: 40px; background-image: url(../../images/img_promote.png); background-size: 34px; background-repeat: no-repeat; background-position: left top 6px;}

.list-tit {color: #363c5a; font-weight: 600; font-size: 15px;}
ol + .list-tit,
ul + .list-tit {margin-top: 18px;}
.list-tit + ol,
.list-tit + ul {font-size: 13px; margin-top: 8px;}
.list-tit + * > li {min-height: 20px;}
.list-tit + * > li + li {margin-top: 4px;}

ul.dot li,
ol.dot li {position: relative; min-height: 20px; padding-left: 14px;}
ul.dot li:before,
ol.dot li:before {content:''; position:absolute; left:0; top:4px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #363c5a;}
ul.dot li strong,
ol.dot li strong {color: #363c5a;}
ul.dot li+li,
ol.dot li+li{margin-top: 4px;}

.highlight {padding: 0 2px; background-color: #d7ecff;}

/* 폼 */
.form-section select,
.form-section [type=text],
.form-section [type=email],
.form-section textarea {display: flex; width: 100%; height: 35px; padding: 0 10px; border: 1px solid #ccc; box-sizing: border-box;;}

.form-section select:disabled,
.form-section [type=text]:disabled,
.form-section textarea:disabled {background-color: #eee;}

.form-section select:disabled::placeholder,
.form-section [type=text]:disabled::placeholder,
.form-section textarea:disabled::placeholder {color: #eee;}


.form-section [type=text]:read-only,
.form-section textarea:read-only {background-color: #fafafa;}


.form-section textarea {height: 100px; padding: 8px 10px; resize: none; /* 변경 불가능 */}

.form-section button {display: inline-flex; align-items: center; height: 35px; border: 1px solid #9f9f9f; cursor: pointer;}
.form-section th button {margin-top: 20px;}

.addr-wrap {display: flex; flex-direction: column; gap: 4px;}
.addr-wrap > div {display: flex; gap: 4px;}
.addr-wrap button {border: 1px solid #9f9f9f; cursor: pointer;}
.addr-wrap > div:has( > button) [type=text] {width: 130px;}

.chk-box {position:relative; display: flex; min-height: 35px; margin-bottom: 5px;}
.chk-box [type=radio],
.chk-box [type=checkbox] {width: 0px; height: 0px;}
.chk-box [type=radio] + label,
.chk-box [type=checkbox] + label {position:relative; display: flex; align-items: center; padding: 4px 0 4px 20px;}
.chk-box [type=radio]:focus + label,
.chk-box [type=checkbox]:focus + label {outline: 2px solid #000; border-radius: 2px;}
.chk-box [type=radio] + label::before,
.chk-box [type=radio] + label::after,
.chk-box [type=checkbox] + label::before,
.chk-box [type=checkbox] + label::after {content: ''; position: absolute; top: calc(50% - (16px / 2)); left: 0; width: 16px; height: 16px; box-sizing: border-box;}
.chk-box [type=radio] + label::before,
.chk-box [type=checkbox] + label::before {border: 1px solid #ccc;}
.chk-box [type=radio] + label::after,
.chk-box [type=checkbox] + label::after {top: calc(50% - (10px / 2)); left:calc((16px / 2) - (10px / 2)); width: 10px; height: 10px;}

.chk-box [type=radio] + label::before,
.chk-box [type=radio] + label::after {border-radius: 50%;}
.chk-box [type=radio]:checked + label::before {border: 1px solid #3795ff;}
.chk-box [type=radio]:checked + label::after {background-color: #3795ff;}

.chk-box [type=checkbox] + label::before,
.chk-box [type=checkbox] + label::after {border-radius: 4px;}
.chk-box [type=checkbox]:checked + label::before {border: 1px solid #3795ff; background-color: #3795ff;}
.chk-box [type=checkbox]:checked + label::after { background-size: 10px 10px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");}

.chk-box [type=radio]:disabled + label::before,
.chk-box [type=checkbox]:disabled + label::before {background-color: #eee;}

.chk-box-wrap {display: flex; gap: 2px 20px; flex-wrap: wrap;}

.pl-20 {padding-left: 20px;}
.h-300 {height: 300px !important;}
.caps {display: flex; gap: 2px; min-height: 20px; font-size: 14px;}
.tbl-wrap + .caps {margin-top: 5px;}

.question-box {
	padding:10px;
	border-color: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
}

.question-box>div{
	padding: 10px 10px;
}
.question-box .question-title {
	margin-left: 10px;
	font-weight: bold;
}
.question-box .question-expl-content{
	padding-left: 80px;
	white-space: pre-wrap;
}

.item-box {
	padding: 15px 0px 0px 25px;
}

.question-number {
	background: #667eea;
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 16px;
	min-width: 45px;
	text-align: center;
}

.question-text {
	font-size: 18px;
	font-weight: 500;
	color: #2d3748;
	line-height: 1.5;
	margin-bottom: 10px;
}

.question-description {
	font-size: 14px;
	color: #718096;
	background: #f7fafc;
	padding: 10px 15px;
	border-radius: 8px;
	margin-bottom: 15px;
	white-space: pre-line;
}

.chk-box .question-item-tc {
	margin-left:5px;
	width:60%;
}


/* .conts-wrap {display: none;} */
.btn-group {display: flex; justify-content: center; margin-top: 40px; gap:15px;}
.btn-submit {display: inline-flex; justify-content:center; align-items:center; width: 180px; height: 50px; border: none; background-color: #0d79c2; color: #fff; font-size: 15px; cursor: pointer; font-weight: 500;}
.btn-submit:hover {background-color: #0967a7; }

.col2 {flex-wrap: wrap; gap:0 20px;}
.col2 > * {flex:0 0 49%;}

.navigation-buttons { display: flex; justify-content: space-between; gap: 15px; }

.btn-nav {	padding: 12px 24px;	border-radius: 8px;	border: none;	font-size: 16px;	font-weight: 500;	cursor: pointer;	transition: all 0.3s;	display: flex;	align-items: center;	gap: 8px; }

.btn-prev { background: #edf2f7; color: #4a5568; }
.btn-prev:hover {	background: #e2e8f0; }

.btn-prev:disabled {	opacity: 0.5;	cursor: not-allowed;}

.btn-next,
.btn-submit {	background: #667eea;	color: white;}

.btn-next:hover,
.btn-submit:hover  {	background: #5a67d8;	transform: translateY(-1px);	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}

/* 진행률 표시 */
.progress-section {
	background: white;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	margin-bottom: 25px;
}

.progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.progress-text {
	font-size: 14px;
	color: #718096;
}

.progress-percentage {
	font-size: 18px;
	font-weight: 600;
	color: #667eea;
}

.progress-bar-container {
	background: #edf2f7;
	height: 8px;
	border-radius: 10px;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #667eea 0%, #48bb78 100%);
	border-radius: 10px;
	transition: width 0.5s ease;
}