html, body { margin: 0; }

.header { display: flex; background: #fff; height: 50px; box-shadow: 0 3px 5px #0d112e08; position: relative; z-index: 1; }
.section { display: flex; width: 100%; background: #f7f8fb; }

.header > div,					.section > div,					#superoverlay > div		{ box-sizing: border-box; }
.header > div.panel_left,	.section > div.panel_left	,	#superoverlay > div.panel_left { width: calc((100% - 972px) / 2); }
.header > div.panel_main,	.section > div.panel_main,	#superoverlay > div.panel_main { width: 972px; }

.header > div.panel_right,	.section > div.panel_right,  #superoverlay > div.panel_right { width: calc((100% - 972px) / 2); }
									.section > div.panel_main, .section > div.left_panel { overflow-y: auto; }	
									

.header > div .menu { display: inline-block; margin: 0; height: 100%; vertical-align: top; padding: 0; margin-left: 40px; }
.header > div .menu li { list-style: none; display: inline-block; height: 100%;  line-height: 50px;  box-sizing: border-box; padding: 0 20px; text-align: center; font-weight: 700; }
.header > div .menu li.on { border-bottom: 4px solid var(--blue-color); color: var(--blue-color); }
.header > .panel_main > div { display: inline-flex; padding-left: 40px; }
.header > .panel_main > div h3 { margin-left: 20px; line-height: 50px; }
.header > .panel_main > div h5 { background: var(--yellow-color); place-self: center; padding: 0 8px; border-radius: 12px; }
.header > .panel_main > div h6 { place-self: center; margin-left: 10px; color: #ccc; }

.header > .panel_right { padding-right: 40px; display: flex; justify-content: flex-end; }
.header > .panel_right > .button { place-self: center; margin-left: 10px; }

.section > div { height: calc(100vh - 50px); padding: 30px; }
.section > div > .inner_wrap { padding: 30px 15px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px #262a380d; }

/* 설문 설정 */
.section#survey_setup { }
.section#survey_setup > div.panel_main > .inner_wrap { padding: 30px 40px; }
.section#survey_setup > div.panel_main > .inner_wrap > table tr { line-height: 45px; }

/* 설문 문항 등록 */
.section > div.panel_left > .inner_wrap > ol { padding: 0px; border-radius: 5px; font-size: 0.8rem; list-style: none; counter-reset: list; margin: 0; }
.section > div.panel_left > .inner_wrap > ol > ul.page{ border: 1px solid var(--sky-color); border-radius: 5px; font-size: 0.8rem; margin: 0 0 10px;  position: relative; list-style: none; padding: 0; }
.section > div.panel_left > .inner_wrap > ol > ul.page:before { counter-increment: list; content: counter(list)"P"; position: absolute; top: 5px; left: 5px; background: var(--orange-color); color: #fff; padding: 0 5px;  border-radius: 5px; }
.section > div.panel_left > .inner_wrap > ol > ul.on { border: 1px dashed var(--orange-color); }
.section > div.panel_left > .inner_wrap > ol > ul > li{ position: relative; box-sizing: border-box; padding:0 60px; height:30px; line-height: 30px; border-bottom: 1px solid #ececec; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.section > div.panel_left > .inner_wrap > ol > ul > li:last-child { border: 0; }
.section > div.panel_left > .inner_wrap > ol > ul > li.drop { height: 60px; }
.section > div.panel_left > .inner_wrap > ol > ul > li.drop::after { content: "이동하기"; color: var(--orange-color); display: block; background: #fafafa; position: absolute; height: 30px; line-height: 30px; border-top: 1px dashed var(--orange-color); width: 100%; left: 0; text-align: center; }
.section > div.panel_left > .inner_wrap > ol > ul > li::before { content: attr(data-qno)"."; position: absolute; left: 45px; }
.section > div.panel_left > .inner_wrap > ol > ul > li.drop + li { border-top: 1px dashed var(--orange-color); }

.section > div.panel_left > .inner_wrap > ol > ul.empty { padding: 40px 0; text-align: center; border-style: dashed; color: #ccc; }

.section > div.panel_main > .inner_wrap { counter-reset: page; } 
.section > div.panel_main > .inner_wrap > div:is(.page, .logic){ padding: 40px 40px 0; border: 1px solid var(--sky-color); border-radius: 20px; margin-bottom: 40px; position: relative; }
.section > div.panel_main > .inner_wrap > div:is(.page, .logic) :is(.question_set, .logic_item){ padding: 40px 20px 40px; border: 1px dashed rgba(0,0,0,0); border-radius: 12px;  margin-bottom: 20px; position: relative; overflow: hidden; }

.section > div.panel_main > .inner_wrap > div.page .question_set .overlay{ display: none; }
.section > div.panel_main > .inner_wrap > div.page .question_set:hover .overlay { display: flex; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 2; width: 100%; height: 100%;  align-items: center; justify-content: center;}
.section > div.panel_main > .inner_wrap > div.page .question_set:hover .overlay .button { margin: 0 5px }

.section > div.panel_main > .inner_wrap > div.page:before { counter-increment: page; content: counter(page)"페이지"; position: absolute; top: 10px; left: 10px; background: var(--orange-color); color: #fff; border-radius: 5px; padding: 0 5px; font-size: 0.8rem; }
.section > div.panel_main > .inner_wrap > div.page:hover { border-style: dashed; border-color: var(--orange-color); }

.section > div.panel_main > .inner_wrap > div.page .question_set:hover { border-color: var(--orange-color); }
.section > div.panel_main > .inner_wrap > div.page .question_set.add { border: 1px dashed var(--orange-color); text-align: center; color: orange; }

.section > div.panel_right { }
.section > div.panel_right > .inner_wrap  { padding-bottom: 25px; }
.section > div.panel_right > .inner_wrap > .button_wrap { display: flex; flex-wrap: wrap; }
.section > div.panel_right > .inner_wrap > .button_wrap > .button { flex: 1 1 30%; margin: 0 5px 5px 0px; border-radius: 5px; }
.section > div.panel_right > .inner_wrap > .button_wrap > .button:nth-child(3n) { margin-right: 0; }
.section > div.panel_right > .inner_wrap > .button_wrap > .button.on { background: var(--blue-color); color: #fff; border-color: var(--blue-color); }
.section > div.panel_right > .inner_wrap.button_detail { margin-top: 20px; }

/* 설문 문항 설정 */
#superoverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.3); display: flex; }
#superoverlay > div > .inner_wrap { padding: 30px 15px; margin-top: 100px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px #262a380d; }
#superoverlay > div > .inner_wrap .button_wrap { margin-top: 40px; }

/* 로직 설정 */
#additory.section > div.panel_left > .inner_wrap > ol > ul > li.logic::after { position: absolute; right: 10px; top: 5px; content: "logic"; background: var(--yellow-color); border-radius: 5px; padding: 0 5px; width: 30px; height: 20px; line-height: 20px; text-align: center; }

#additory.section > div.panel_main > .inner_wrap > .page > ul { padding-bottom: 25px; }
#additory.section > div.panel_main > .inner_wrap > .page > ul > li { margin-bottom: 10px; font-size: 0.9rem; }
#additory.section > div.panel_main > .inner_wrap > .page > ul > li::before { content: "로직"attr(data-lno); background: var(--yellow-color); padding: 0 5px; border-radius: 5px; }

#additory.section > div.panel_main > .inner_wrap > .page > ul > li > span { padding: 0 5px; width: 30px; height: 20px; border-radius: 5px;}
#additory.section > div.panel_main > .inner_wrap > .page > ul > li > span.title {  background: var(--orange-color); color: #fff; }
#additory.section > div.panel_main > .inner_wrap > .page > ul > li > span.condition { background: #ececec; color: var(--orange-color); }
#additory.section > div.panel_main > .inner_wrap > .page > ul > li > span.contents { background: var(--blue-color); color: #fff; }
#additory.section > div.panel_main > .inner_wrap > .page > ul > li > .button { height: 24px; line-height: 10px; vertical-align: top; float: right; margin-left: 5px;  }

#additory.section > div.panel_right > .inner_wrap > ul { padding: 0; font-size: 0.9rem; }
#additory.section > div.panel_right > .inner_wrap > ul > li { margin-bottom: 10px; }