@charset "UTF-8";

/* =========================
   기본 구조
========================= */
div.main-head {
	margin:0 auto;
}

#reportMenu {
	gap:4px;
}

div.make-container {
	margin:0 auto;
	padding:0.5em;
	min-width:900px !important;
}

/* reportBody 레이아웃 */
#reportBody {
	display: flex;
	position: relative;
	overflow-y: hidden;
}

div.page-contents {
	padding:0 !important;
}

/* =========================
   옵션 / 공통
========================= */
div.sort-chart-wrapper {
	gap:4px;
	flex-wrap: wrap;
	border-radius: 3px;
	border: 1px solid #D9D9D9 !important;
	padding:5px 12px !important;
}

div.sort-chart-wrapper .result-type {
	padding:3px;
}

div.sort-chart-wrapper .config-multi {
	padding:5px 3px;
}

.sort-wrapper {
	background:none !important;
}
.sort-wrapper > .selected {
	border-color:#d9d9d9 !important;
	background:#f5f5f5 !important;
}

.result-left {
	padding-left: 12px;
}

table.cross {
	table-layout: fixed;
	width:auto;
	min-width: 100%;
	border-collapse: separate;
}

table.cross col.row-total-left {
	width:300px !important;
}

table.cross col.row-total-right {
	width:150px !important;
}

col.answer {
	min-width:80px;
}

.enter-droppable {
	background-color: white;
	border-style: solid;
}

#addCross {
	margin: 24px 0 0 12px;
	width:200px;
}

#addAll {
	font-weight:normal;
	font-size:9px !important;
	border-radius: 3px;
	background: #D9D9D9;
}

/* =========================
   UNIV LEFT SIDEBAR
========================= */

/* 왼쪽 사이드바 */
#univLeft {
	position: relative;
	width: 260px;
	flex-shrink: 0;
	background: #f5f5f5;
	transition: width 0.25s ease;
	border-top: 1px solid #ccc;
}

/* 접힘 */
#univLeft.collapsed {
	width: 0;
}

/* 내부 숨김 */
#univLeft.collapsed > * {
	display: none;
}

/* =========================
   TOGGLE BUTTON (독립)
========================= */

/* =========================
   TOGGLE BUTTON (수정된 부분)
========================= */

#sidebarToggle {
	position: absolute;
	top: 0;
	left: 237px;
	width: 24px;
	height: 35px;
	background: #fff;
	border: 1px solid #ddd;
	/* 펼쳐져 있을 땐 왼쪽 보더를 살리고 오른쪽 보더를 없애거나 취향껏 조절 */
	border-radius: 4px 0 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: left 0.25s ease;
}

/* 접힘 시 위치: rightWrapper의 가장 왼쪽(0)에 붙음 */
#univLeft.collapsed + #sidebarToggle {
	left: 0;
	border-left: 1px solid #ddd;
	border-radius: 0 4px 4px 0;
}

/* 아이콘 회전 logic은 유지 */
#sidebarToggle img {
	width: 12px;
	transition: transform 0.2s ease;
}

#univLeft.collapsed + #sidebarToggle img {
	transform: rotate(180deg);
}

/* =========================
   RIGHT 영역
========================= */

#rightWrapper {
	flex: 1;
	min-width: 0;
	position: relative;
}

/* =========================
   LEFT 내부 영역
========================= */

#leftTopWrapper {
	height: 200px;
	min-height: 80px;
	overflow: auto;
	padding:16px;
	scrollbar-gutter: stable;
}

#leftWrapper {
	width:260px;
	min-height: 120px;
	overflow: auto;
	background: #f5f5f5;
	scrollbar-gutter: stable;
	padding-right: 16px;
}

#leftSticky {
	background: #f5f5f5;
}

/* =========================
   RESIZE HANDLE
========================= */

#leftResizeHandle {
	height: 32px;
	cursor: row-resize;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#leftResizeHandle:hover {
	opacity: 0.7;
}

/* 가운데 선 */
#leftResizeHandle::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: #ccc;
}

/* 아이콘 */
#leftResizeHandle .resize-icon {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f5f5f5 !important;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 화살표 공통 */
#leftResizeHandle .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	background: #f5f5f5 !important;
}

/* 위 */
#leftResizeHandle .arrow.up {
	border: 1px solid #ccc;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
}

/* 아래 */
#leftResizeHandle .arrow.down {
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0 0 4px 4px;
}

/* 아이콘 크기 */
#leftResizeHandle img {
	width: 10px;
	height: 10px;
	display: block;
}

/* =========================
   RESULT 영역
========================= */

#reportResult {
	padding-right: 8px;
}

#questionListTitle {
	padding-top: 0;
}

#columnListTitle {
	font-weight: bold;
}
.q-count {
	font-size:12px;
	color:#999;
	margin-left: 4px;
}

#addColumn {
	width:18px;
	padding:0 0 1px;
	background: #d9d9d9;
	margin-left: 4px;
}

.popup-col-question-header {
	border: 1px solid #bbb;
	background-color: #e0e0e0;
	text-align: center;
}
.popup-col-question {
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #bbb;
	padding:2px 6px;
}
.popup-col-question-text {
	color:#999999;
	font-size:12px;
}

#colQuestionList {
	margin-top: 16px;
}
#colQuestionList > div.question-unit {
	font-size:85%;
	border:1px solid #d6dbdc;
	padding:12px;
	margin-bottom: 4px;
	background: linear-gradient(to bottom, #fbfbfb, white);
	z-index: 1;
}
#colQuestionList > div.question-unit.checked {
	border-color:#659dfe;
	background: #f3f8ff;
}
#colQuestionList > div.question-unit:hover {
	border-color: #67696c;
	cursor:pointer;
}
/*문항 제목*/
#colQuestionList > div.question-unit > .question-title {
	margin-bottom: 8px;
}
/*문항명*/
#colQuestionList > div.question-unit > .question-title > .qnum {
	font-weight: bold;
	color:#232c3e;
}
/*문항 설정 버튼*/
#colQuestionList > div.question-unit > .question-title > .config {
	display:none;
}

/*문항종류 설명*/
#colQuestionList > div.question-unit > .question-title > .qtype {
	color:#7b87a0;
	margin-left: 8px;
}
#colQuestionList > div.question-unit > .question-title > .qtype-src {
	color:#7b87a0;
	margin-left: auto;
	font-size:65%;
}
/*문항 선택됨 표시*/
#colQuestionList > div.question-unit > .question-title > .checked {
	display:none;
}
#colQuestionList > div.question-unit.checked > .question-title > .checked {
	display:block;
	width:12px;
	margin-left: 4px;
}

#recodePopup {
	border-radius: 3px;
	border: 1px solid #D9D9D9;
	background: #D9D9D9;
	font-size:11px !important;
	color:black !important;
	margin-bottom: 12px !important;
	padding:6px !important;
}

#questionList > div.question-unit {
	margin-bottom: 4px !important;
}

/*행/열 전체초기화 버튼*/
.reset-row-col {
	font-size:12px !important;
	border-radius: 3px
	border: 1px solid #D9D9D9;
	background: #F5F5F5 !important;
}

table.col-table {
	background: #F6EDFF !important;
}

table.col-table td.col-drag-box {
	border:1px dashed #C3A1E9;
	color:#8D4DD4;
}

.col-sub-drag-box {
	border:1px dashed #C3A1E9;
}

table.row-table {
	background: #E5F5FF !important;
	height:500px;
}

table.row-table td.row-drag-box {
	border:1px dashed #7CBDE1;
	color:#0882C3;
	height:100%;
}

#addCross {
	width:248px !important;
}

.control-box {
	padding:10px 4px 0 24px !important;
}

.empty-results {
	border-radius: 3px;
	background: #F5F5F5;
	height:457px;
	font-size:17px;
	display:flex;
	justify-content: center;
	align-items: center;
	color:rgba(0,0,0,0.7);
}

#reportConfig th {
	background:none !important;
	text-align:left;
	font-size:12px;
	padding-left:24px !important;
}

#reportConfig button {
	background-color:#f5f5f5 !important;
}

/*차트 팝업에서 선택된 차트*/
.chart-preview.selected {
	border-radius: 3px;
	border: 2px solid #8D4DD4 !important;
	background: #F6EDFF;
	mix-blend-mode: multiply;
}

#searchQuestionWrapper {
	background: white;
}
#searchQuestion {
	color:#999;
	font-size:11px;
}

.cross-caption {
	border:none !important;
}
.cross-caption td {
	padding:6px;
	text-align:left;
	border:none !important;
}
.cross-caption .cap-qnum{
	font-size:14px;
	font-weight:bold;
}
.cross-caption .cap-qtype{
	font-size:11px;
	color:#999;
	margin-left: 6px;
}
.cross-caption .cap-question{
	margin-top: 2px;
	font-size:14px;
	font-weight:bold;
}

.filter-unit.filtered {
	color:#8D4DD4;
	border-color: #8D4DD4;
	background: #F6EDFF;
}

.reportBody-screen{
	position: absolute;
	inset: 0;
	z-index: 10;

	/* 위는 투명, 아래는 흰색 */
	background: linear-gradient(
			to bottom,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0.35) 15%,
			rgba(255,255,255,0.75) 25%,
			rgba(255,255,255,1) 100%
	);

	/* 가운데 정렬 */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.reportBody-screen-text{
	font-size: 20px;
	font-weight: 700;
	color: #333;
	padding: 12px 20px;
}
.screen-h1 {
	font-size:34px;
	font-weight:bold;
}
.screen-h2 {
	margin-top: 24px;
	color:#414141;
	font-size:17px;
	font-weight:bold;
}
.buy-button-wrapper {
	margin-top: 48px;
}
#buyButton {
	cursor: pointer;
}

.cross-results {
	max-height:910px;
	overflow-x: auto !important;
	overflow-y: auto;
}

.col-wrapper {
	overflow-x: auto;
}