@charset "UTF-8";

/* 스크롤 바 전체 스타일 */
::-webkit-scrollbar {
    width: 4px; /* 스크롤 바의 너비 */
    height: 4px;
}
/* 스크롤 트랙 스타일 (스크롤 바의 배경) */
::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤 트랙의 배경색 */
}
/* 스크롤 핸들(스크롤 바의 실질적인 스크롤 부분) 스타일 */
::-webkit-scrollbar-thumb {
    background-color: rgb(211,215,223); /* 스크롤 핸들의 배경색 */
}
/* 마우스 오버시 스크롤 핸들 스타일 */
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(149,158,178); /* 마우스 오버시 스크롤 핸들의 배경색 */
}

.gap-5 {gap: 5px;}
.v-top {vertical-align: top !important;}
.v-middle {vertical-align: middle !important;}
.v-bottom {vertical-align: bottom !important;}
.text-right {text-align: right !important;}
.b {font-weight: bold !important;}

/* 테두리 관련 처리 */
.left-no-border {
    border-left: none !important;
}
.right-no-border {
    border-right: none !important;
}
.top-no-border {
    border-top: none !important;
}
.bottom-no-border {
    border-bottom: none !important;
}

/* All borders */
table.cross .gdr-border-blrt {
    border: 1px solid #aaa !important;
}

/* No borders */
table.cross .gdr-border-none {
    border: none !important;
}

/* Single borders */
table.cross .gdr-border-b {
    border-bottom: 1px solid #aaa !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
table.cross .gdr-border-l {
    border-bottom: none !important;
    border-left: 1px solid #aaa !important;
    border-right: none !important;
    border-top: none !important;
}
table.cross .gdr-border-r {
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid #aaa !important;
    border-top: none !important;
}
table.cross .gdr-border-t {
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #aaa !important;
}

/* Two borders */
table.cross .gdr-border-bl {
    border-bottom: 1px solid #aaa !important;
    border-left: 1px solid #aaa !important;
    border-right: none !important;
    border-top: none !important;
}
table.cross .gdr-border-br {
    border-bottom: 1px solid #aaa !important;
    border-left: none !important;
    border-right: 1px solid #aaa !important;
    border-top: none !important;
}
table.cross .gdr-border-bt {
    border-bottom: 1px solid #aaa !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #aaa !important;
}
table.cross .gdr-border-lr {
    border-bottom: none !important;
    border-left: 1px solid #aaa !important;
    border-right: 1px solid #aaa !important;
    border-top: none !important;
}
table.cross .gdr-border-lt {
    border-bottom: none !important;
    border-left: 1px solid #aaa !important;
    border-right: none !important;
    border-top: 1px solid #aaa !important;
}
table.cross .gdr-border-rt {
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid #aaa !important;
    border-top: 1px solid #aaa !important;
}

/* Three borders */
table.cross .gdr-border-blr {
    border-bottom: 1px solid #aaa !important;
    border-left: 1px solid #aaa !important;
    border-right: 1px solid #aaa !important;
    border-top: none !important;
}
table.cross .gdr-border-blt {
    border-bottom: 1px solid #aaa !important;
    border-left: 1px solid #aaa !important;
    border-right: none !important;
    border-top: 1px solid #aaa !important;
}
table.cross .gdr-border-brt {
    border-bottom: 1px solid #aaa !important;
    border-left: none !important;
    border-right: 1px solid #aaa !important;
    border-top: 1px solid #aaa !important;
}
table.cross .gdr-border-lrt {
    border-bottom: none !important;
    border-left: 1px solid #aaa !important;
    border-right: 1px solid #aaa !important;
    border-top: 1px solid #aaa !important;
}
/* All four borders */
table.cross .gdr-border-blrt {
    border: 1px solid #aaa !important;
}

/*리포트 기본 input*/
.report-input {
    border:1px solid #cbd1db;
    color:#757575;
    padding:6px;
    outline: none;
    border-radius: 6px;
}

/*리포트 기본 테이블*/
.report-table {
    font-size:90%;
    width:100%;
    table-layout: fixed;
    color:#636f87;
}
.report-table > tbody > tr > * {
    border-top:1px dotted #dde1e8;
    border-bottom:1px dotted #dde1e8;
}
.report-table > tbody > tr > th {
    padding:4px;
    background-color: #f9fafd;
    color:#636f87;
}
.report-table > tbody > tr > td {
    padding:4px;
    height:3.1em;
}
.report-table > tbody > tr:first-child > * {border-top:1px solid #dde1e8;}
.report-table > tbody > tr:last-child > * {border-bottom:1px solid #dde1e8;}

/*radio 또는 checkbox*/
.report-label {

}
.report-label > input {
    margin-right: 4px;
}

/*정사각형 아이콘 버튼*/
.icon-button {
    width:2.3em;
    height:2.3em;
    padding:.2em !important;
}
.icon-button > img {
    width:100%;
    height:100%;
}

/*샘플들 처음엔 안보이게*/
.type-unit-sample, .question-unit-sample, .filter-unit-sample, .filter-checkbox-unit-sample,
.result-unit-sample, .cross-unit-sample,
.col-sub-sample, tr.cross-question-unit-sample,
.docu-page-unit-sample, .col-unit-sample
{
    display:none !important;
}

/*적용 버튼*/
.button-apply, .button-apply:hover {
    background-color: #ebeef3 !important;
    color:#636f87 !important;
}
.button-apply:hover {
    border-color:#7b87a0;
}

/*팝업*/
.popup {
    font-size:85%;
}

/*팝업 닫기 버튼*/
.close-popup:hover {
    border-color:#7b87a0;
}

/*검색어 제거 버튼*/
.search-clear {
    margin:0;
    padding: 4px 0 0;
    border: none;
    background: none;
}

/*흔한 버튼*/
button.common {
    display:inline-block;
    text-decoration: none;
    cursor:pointer;
    background-color: #ebeef3;
    color:#636f87;
    border:1px solid #dde1e8;
    border-radius: 5px;
    padding:.3em .4em;
}
button.common:hover {
    border-color:#7b87a0;
    cursor:pointer;
}

/*흔한 select*/
select.common {
    padding:4px;
    border-radius: 4px;
    border-color: #dde1e8;
    outline: none;
}

/*흔한 label (radio, checkbox)*/
label.common {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
}
label.common:not(:last-child) {
    margin-right: 4px;
}
label.common > input {
    margin-right: 2px;
}

/*상단 버튼*/
ul#reportMenu {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    align-items: start;
    padding:4px 0 0 16px;
    margin:0;
    border-bottom: 1px solid #dde1e8;
}
ul#reportMenu li {
    display:inline-block;
    text-decoration: none;
    font-size:14px;
    color:#777;
    padding:4px 8px 8px;
    cursor:pointer;
}
ul#reportMenu li.selected {
    text-decoration: none;
    color:#1f8dd6;
    font-weight: bold;
    border-bottom: 3px solid #1f8dd6;
}
ul#reportMenu li:hover {
    color:#1f8dd6;
    font-weight: bold;
}
ul#reportMenu li.button {
    background-color: #ebeef3;
    color:#636f87;
    font-size:90%;
    border:1px solid #dde1e8;
    border-radius: 5px;
    padding:6px 8px;
}
ul#reportMenu li.button:hover {
    font-weight: normal;
    border-color:#7b87a0;
    cursor:pointer;
}
.versionName {
    margin-top: 4px;
    margin-right: 4px;
    color:#1f8dd6;
}


/*상단 메뉴를 제외한 본문 부분*/
#reportBody {
    margin: 0;
    padding: 0;
    display: flex;
    overflow-x: hidden;
}

/*왼쪽 문항 영역*/
#leftWrapper {
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
    display:block;
    width: 300px;
    overflow-y: scroll;
    padding:0px 22px 16px 16px;
    background: linear-gradient(to left, #f9f9f9, white 3%);
}
/*문항 검색과 종류별 체크*/
#questionTypeWrapper {
    border:1px solid #dde1e1;
}
/*문항 검색 상단 고정*/
#leftSticky {
    padding-top: 16px;
    padding-bottom: 8px;
    position: sticky; /* 상단에 고정하는 방법 */
    top: 0; /* 상단에 고정할 위치를 지정합니다 */
    background-color: white; /* 배경색을 설정하여 스크롤 시에도 제목이 잘 보이도록 합니다 */
    z-index: 1;
}
/*문항 검색*/
#searchQuestionWrapper {
    padding:8px 12px;
    background-color: #f8fafc;
}
/*문항 검색 input*/
#searchQuestion {
    background: none;
    border:none;
    outline: none;
}
#searchQuestion::placeholder {
    font-weight: bold;
}
/*문항 유형 목록*/
#questionTypeList {
    padding:12px 12px 2px;
    display:none !important;
}
/*문항 유형*/
#questionTypeList > label.type-unit {
    font-size:95%;
    display:block;
    margin-bottom: 8px;
}
#questionTypeList > label.type-unit > span {
    margin-left: 4px;
}

/*문항 선택 부분*/
#questionListWrapper {
}

/*선택한 문항 개수*/
#questionListTitle {
    padding:16px 0 12px;
    font-weight: bold;
}
#questionListTitle > div.apply.applied {
    margin-left: 8px;
    padding:4px;
    background-color: #f0f2f4;
    color:#5c677f;
    font-size:80%;
    font-weight: normal;
}
#questionListTitle > div.apply.total {
    margin-left: 8px;
    padding:4px;
    background-color: #f0f2f4;
    color:#5c677f;
    font-size:80%;
    font-weight: normal;
}

/*문항 목록*/
#questionList > div.question-unit {
    font-size:85%;
    border:1px solid #d6dbdc;
    padding:12px;
    margin-bottom: 8px;
    background: linear-gradient(to bottom, #fbfbfb, white);
    z-index: 999;
}
#questionList > div.question-unit.checked {
    border-color:#659dfe;
    background: #f3f8ff;
}
#questionList > div.question-unit:hover {
    border-color: #67696c;
    cursor:pointer;
}
/*문항 제목*/
#questionList > div.question-unit > .question-title {
    margin-bottom: 8px;
}
/*문항명*/
#questionList > div.question-unit > .question-title > .qnum {
    font-weight: bold;
    color:#232c3e;
}
/*문항 설정 버튼*/
#questionList > div.question-unit > .question-title > .config {
    display:none;
}
#questionList > div.question-unit:hover > .question-title > .config {
    display:block;
    width:15px;
    margin-left: 4px;
}
/*문항종류 설명*/
#questionList > div.question-unit > .question-title > .qtype {
    color:#7b87a0;
    margin-left: 8px;
}
#questionList > div.question-unit > .question-title > .qtype-src {
    color:#7b87a0;
    margin-left: auto;
    font-size:65%;
}
/*문항 선택됨 표시*/
#questionList > div.question-unit > .question-title > .checked {
    display:none;
}
#questionList > div.question-unit.checked > .question-title > .checked {
    display:block;
    width:12px;
    margin-left: 4px;
}

.question-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 표시할 줄 수 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*오른쪽 영역*/
#rightWrapper {
    flex:1 1 auto;
    -ms-flex:1 1 auto;
    display:block;
    min-width: 800px;
    padding:0;
    border-left:1px solid #dde1e8;
}

#reportResult {
    overflow-y: auto;
    padding:16px;
}

/*문항 유닛*/
.qname-unit {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    font-size:90%;
    width:140px;
    border:1px solid #dde1e8;
    border-radius: 5px;
    background-color: white;
    padding:6px 8px;
}
.qname-unit:hover {
    border-color:#7b87a0;
    cursor:pointer;
}
.qname-unit .icon {
    height:1.2em;
}
.qname-unit.selected {
    border-color:#96bcff;
    background-color: #f3f8ff;
    color:#659dfe;
}

/*버튼 유닛*/
.button-unit {
    background-color: #ebeef3;
    color:#636f87;
    font-size:90%;
    border:1px solid #dde1e8;
    border-radius: 5px;
    padding:6px 8px;
    display:inline-block;
}
.button-unit:hover {
    border-color:#7b87a0;
    cursor:pointer;
}

/*유닛들*/
.unit-wrapper {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding:8px;
    width: 100%;
    gap:6px;
}

/*필터박스*/
#filterWrapper {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #f9fafd;
    padding:8px;
    width: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 2px;
}
/*필터*/
.filter-unit {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    font-size:90%;
    width:140px;
    border:1px solid #dde1e8;
    border-radius: 5px;
    background-color: white;
    padding:6px 8px;
}
.filter-unit:hover {
    border-color:#7b87a0;
    cursor:pointer;
}
.filter-unit > .qnum {
    display: inline-block;   /* 또는 block */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-unit .icon {
    height:1.2em;
}
.filter-unit.filtered {
    border-color:#96bcff;
    background-color: #f3f8ff;
    color:#659dfe;
}
/*필터 팝업 전체 선택 줄*/
#filterAllLine {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    border-bottom: 1px solid #dde1e8;
    margin:6px;
    padding-bottom: 6px;
}
#filterAllLine > .div-button {
    margin-left: 4px;
    font-size:90%;
}
/*필터 팝업 체크박스들*/
#filterCheckboxes {
    margin:6px;
    max-height: 300px;
    overflow-y: auto;
}
#filterCheckboxes > label {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:start;
    margin-bottom: 4px;
}
#filterCheckboxes > label > input {
    margin-top: 2px;
    margin-right: 4px;
}
#filterCheckboxes > label > span {
    margin-top: -1px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

/*필터 추가 버튼*/
#addFilter {
    background-color: #ebeef3;
    color:#636f87;
    font-size:90%;
    border:1px solid #dde1e8;
    border-radius: 5px;
    padding:6px 8px;
}
#addFilter:hover {
    border-color:#7b87a0;
    cursor:pointer;
}

/*팝업 제목*/
.popup-title {
    text-align: center;
    font-weight: bold;
    font-size:110%;
    padding:8px 0 16px;
}

/*필터 추가에서 문항 검색*/
#searchFilterQuestion {
    width:100%;
    border:1px solid #cbd1db;
    color:#757575;
    padding:6px;
    outline: none;
    border-radius: 6px;
    margin-bottom: 8px;
}

/*필터 추가에서 문항들*/
#searchFilterQuestionResult {
    max-height: 300px;
    overflow-y: auto;
}
.filter-question {
    padding:6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x:hidden;
}
.filter-question:hover {
    background-color: #f3f8ff;
    cursor:pointer;
}

/*필터 값 선택 팝업*/
#filterPopup {
    display: none;
    position: absolute;
    border:1px solid #96bcff;
    background: #fbfbfb;
    box-shadow: 0 2px 5px #96bcff;
    z-index: 999;
    width: 360px;
    top:0;
    left:0;
    padding:8px;
}
/*필터 추가 팝업*/
#addFilterPopup {
    display: none;
    position: absolute;
    border:1px solid #96bcff;
    background: #fbfbfb;
    box-shadow: 0 2px 5px #96bcff;
    z-index: 999;
    width: 360px;
    top:0;
    left:0;
    padding:8px;
}
/*문항별 결과의 버튼*/
.div-button {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    border:1px solid #dde1e8;
    border-radius: 6px;
    padding:2px 6px;
    background:none;
}
.div-button:hover {
    background-color: #fbfbfb;
    cursor:pointer;
}
.div-button img {
    height:1.2em;
    margin: 4px;
}

/*교차분석의 표 왼쪽 밑 테두리*/
.cross-unit table.cross tbody tr td:first-child {
    border-left:1px solid #e2e2e2;
}
.cross-unit table.cross tbody tr:last-child td {
    border-bottom:1px solid #e2e2e2;
}
/*교차분석의 값 셀*/
.cross-unit td.val,.cross-unit td.row-total {
    border:1px solid #e2e2e2;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}
.cross-unit td.val > div {
    padding-left: 5px;
    padding-right: 4px;
    text-align: center;
}

/*로딩중*/
div.loading {
    text-align: center;
    padding:4em;
}

/*표*/
table.report {
    width:100%;
    table-layout: fixed;
    color:#636f87;
}
table.report > tbody > tr > * {
    border-top:1px dotted #dde1e8;
    border-bottom:1px dotted #dde1e8;
}
table.report > tbody > tr > th {
    padding:4px;
    background-color: #f9fafd;
    color:#636f87;
    text-align: center;
}
table.report > tbody > tr > td {
    padding:4px;
}
table.report > tbody > tr:first-child > * {border-top:1px solid #dde1e8;}
table.report > tbody > tr:last-child > * {border-bottom:1px solid #dde1e8;}

/*문항 리코드 버튼*/
#recodePopup {
    color:#659dfe;
    border-color:#659dfe;
    background-color: #f3f8ff;
}

/*문항별 결과*/
.result-unit {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 12px;
    border:1px solid #3c3f41;
}
/*문항별 결과의 질문*/
.result-question {
    padding:12px 16px;
    background-color: #7f8182;
    color:#f0f0f0;
    /*background-color: #fafafa;*/
    /*color:#555;*/
}
/*문항별 결과의 종류/응답수*/
.type-count {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    color:#414141;
    padding:12px 16px;
    border-bottom:1px solid #dde1e8;
    font-size:11px;
}
.type-count {
    gap:6px;
}
.type-count div.type {
    margin-right: 6px;
}
.type-count div.count {
    margin-left: 6px;
    margin-right: 2px;
}
/*정렬과 차트 버튼*/
.sort-chart-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    -ms-flex-align:center;
    align-items:center;
    color:#414141;
    font-size:11px;
    padding:4px 16px;
    border-bottom:1px solid #dde1e8;
}
.sort-wrapper {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    /*margin:0 6px;*/
    background-color: #fbfbfb;
    border:1px solid #d6dbdc;
    border-radius: 4px;
    padding:2px;
}
.sort-wrapper > div {
    border:1px solid #fbfbfb;
    border-radius: 4px;
    padding:2px 4px;
    cursor:pointer;
}
.sort-wrapper > div:not(:first-child) {
    margin-left:2px;
}
.sort-wrapper > div.selected {
    border:1px solid #96bcff;
    background-color: #f3f8ff;
}
.sort-wrapper > div:hover {
    border-color:#96bcff;
    color:#659dfe;
}
.chart-button {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    -ms-flex-align:center;
    align-items:center;
    border:none;
    border-radius: 6px;
    padding:4px;
    margin-left: 4px;
}
.chart-button:hover,.chart-button.selected {
    background-color: #f2f4f8;
    cursor:pointer;
}
.chart-button img {
    height:1.2em;
    margin: 4px;
}

/*차트 내용과 기타*/
.chart-etc {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
}
.chart-etc .chart-parent {
    padding:16px;
    flex:1 1 auto;
    -ms-flex:1 1 auto;
    display:block;
}
.chart-etc .etc {
    width:260px;
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
    display:block;
    border-left:1px solid #dde1e8;
}
.etc-titles {
    background-color: #fafafa;
    padding:12px;
}
.etc-contents {
    overflow-y: auto;
}
.etc-text {
    padding:8px 12px;
    font-size:90%;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
}
.etc-text:nth-child(even) {
    background-color: #fafafa;
}
.etc-text-left {
    color:rgb(149,149,149);
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
    width:2em;
    text-align:center;
    margin-right: 12px;
}
.etc-text-right {
    flex:1 1 auto;
    -ms-flex:1 1 auto;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.etc-text-count {
    color:rgb(149,149,149);
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
    width:5em;
    text-align:center;
    margin-right: 0;
}





/*사용 불가능한 문항 목록*/
#questionList > .question-unit[disabled=disabled] {
    background: #f0f2f4;
}
#questionList > .question-unit[disabled=disabled] * {
    color:#9ea6b8 !important;
}
#questionList > .question-unit[disabled=disabled]:hover {
    cursor:not-allowed !important;
}

/*버튼처럼 생긴 박스*/
.desc-box {
    padding:4px 6px;
    border-radius: 6px;
}

/*결과 부분*/
#reportResult {
    font-size:90%;
    padding:8px 0;
}

/*결과 왼쪽 부분*/
.result-left {
    width:260px;
    margin-right: 12px;
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
}

/*초기화 버튼*/
[data-reset] {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    color:#959595;
    font-size:90%;
    margin-bottom: 4px;
}
[data-reset] > *:first-child {
    margin-left: auto !important;
}
[data-reset] svg {
    width:18px;
    height: 18px;
}
[data-reset] > * {
    cursor:pointer;
}

/*분석단위 부분*/
.col-wrapper {
    flex:1 1 auto;
    -ms-flex:1 1 auto;
}

/*분석 단위*/
.col-table {
    background-color: #eef8ff;
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px;
}

/*분석 단위 드래그 상자*/
.col-drag-box {
    border:1px dashed #0078d4;
    position: relative;
    color:#0078d4;
    min-width:200px;
    height: 80px;
    text-align: center;
}
/*분석 단위 설명칸*/
.col-drag-box .desc-box {
    background-color: #ddf0ff;
    color:#0078d4;
    position: absolute;
    font-weight: bold;
    left:8px;
    top:8px;
}
/*분석 단위 서브 드래그 상자*/
.col-sub-drag-box {
    border:1px dashed #0078d4;
    text-align: center;
}
.col-sub-drag-box:not(:last-child) {
    margin-bottom: 8px;
}
.col-sub-drag-box > div.on-drag {
    margin:9px;
}
.col-sub-drag-box > div.off-drag {
    margin:12px;
}

/*옵션*/
.options {
    margin:8px 0;
}
.options select {
    padding:4px;
    border-radius: 4px;
}

/*분석 대상*/
.row-table {
    background-color: #fcf3f4;
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px;
}

/*분석 대상 드래그 상자*/
.row-drag-box {
    border:1px dashed #d74655;
    position: relative;
    color:#d74655;
    height: 80px;
    text-align: center;
}
/*분석 대상 설명칸*/
.row-drag-box .desc-box {
    background-color: #fae4e7;
    color:#d74655;
    position: absolute;
    font-weight: bold;
    left:8px;
    top:8px;
}

/*분석에 포함시킨 문항 칸*/
.cross-unit div.cross-question-unit {
    font-size:85%;
    border:1px solid #dde1e8;
    padding:12px;
    margin-bottom: 8px;
    background-color: white;
}
.cross-unit div.cross-question-unit img.delete {
    width:16px;
    cursor: pointer;
}
.cross-unit div.cross-question-unit .grade-selector,
.cross-unit div.cross-question-unit .set-group {
    margin-top: 8px;
    width:100%;
}
/*서브 문항*/
.col-sub {
    vertical-align: top;
    min-width:200px;
}
/*서브 문항 마지막 요소는 아래 여백 제거 */
.col-sub > *:last-child {
    margin-bottom: 0 !important;
}
/*문항 제목*/
.cross-unit div.cross-question-unit > .question-title {
    margin-bottom: 8px;
}
/*문항명*/
.cross-unit div.cross-question-unit > .question-title > .qnum {
    font-weight: bold;
    color:#232c3e;
}
/*문항종류 설명*/
.cross-unit div.cross-question-unit > .question-title > .qtype {
    color:#7b87a0;
    margin-left: 8px;
}
.question-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 표시할 줄 수 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*교차분석표*/
table.cross {
    font-size:90%;
}
.cross-sticky {
    position: sticky;
    left: 0; /* 왼쪽에 고정 */
    z-index: 1; /* 고정된 요소가 다른 요소들 위에 오도록 */
    background-color: #fff; /* 고정된 요소 배경 설정 (테이블 배경색과 일치하게) */
    border-right: 1px solid #ddd; /* 고정된 셀 사이에 경계선 추가 */
}
.cross-sticky:first-child {
    left: 0; /* 첫 번째 열 고정 위치 */
}

.cross-sticky:nth-child(2) {
    left: 300px; /* 두 번째 열은 첫 번째 열 오른쪽에 위치 */
}
/*교차분석표 질문줄*/
table.cross tr.question-row td {
    background-color: #e5e5e5;
    padding:3px 6px;
    text-align:center;
    border: 1px solid #cccccc;
    min-width:80px;
}
table.cross tr.question-row td.question-td {
    text-align:left;
    min-width:300px;
}
table.cross tr.question-row td .qtype {
    font-weight:bold;
}
table.cross tr.total-count td {
    background-color: #f7f7f7;
    text-align:center;
    padding:2px 4px;
}
/*교차분석표 보기 줄*/
table.cross tr.answer td {
    text-align:right;
    padding:4px;
    color:#414141;
}
table.cross tr.answer td.question-td {
    background-color: #e5e5e5;
    border: 1px solid #cccccc;
}

/*보고서의 분석단위*/
.col-unit {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
    -ms-flex-align:center;
    align-items:center;
    font-size:90%;
    width:140px;
    border:1px solid #dde1e8;
    border-radius: 5px;
    background-color: white;
    padding:6px 8px;
    /*margin-right: 6px;*/
}
.col-unit .icon {
    height:1.2em;
    cursor:pointer;
}

/*요약페이지 평균 칸*/
.avg-wrapper {
    padding:8px 16px;
    color:#414141;
}

/*교차분석에서 차트 선택 버튼*/
.chart-selector {
    background-color: #ebeef3;
    color:#636f87;
    font-size:90%;
    border:1px solid #dde1e8;
    border-radius: 5px;
    padding:6px 8px;
}
.chart-selector:hover {
    border-color:#7b87a0;
    cursor:pointer;
}

/*차트 종류 선택 팝업*/
#chartTypePopup {
    max-width:1000px;
}
#chartTypePopup .chart-preview {
    display:inline-block;
    height:120px;
    border:1px solid #ccc;
    border-radius: 6px;
    padding:4px;
    margin-bottom: 4px;
}
#chartTypePopup .chart-preview:hover {
    border:1px solid #0078d4;
    cursor: pointer;
}
#chartTypePopup .chart-preview .chart-title  {
    font-size:12px;
    height:20px;
}
#chartTypePopup .chart-preview:hover .chart-title {
    color:#0078d4;
}
#chartTypePopup .chart-preview img {
    height:calc(100% - 20px);
}

/*강조값 높음*/
td.strong-high {
    background-color: #fee9ea;
}
td.strong-low {
    background-color: #deebf7;
}

/*사례수 불충분*/
table.cross tr.answer td.not-enough {
    color:#ccc;
}

/*차트 vbar*/
tr.vbar td:not(:first-child) {
    padding:8px 8px 0;
    vertical-align: bottom;
    overflow-y: hidden;
}
/*차트 vbar의 범례줄*/
tr.vbar .legend-unit {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
}
/*차트 vbar의 범례 색깔상자*/
tr.vbar .legend-box {
    width:1em;
    height: 1em;
    display:inline-block;
    margin-top: 3px;
    margin-right: 4px;
    flex:0 0 auto;
    -ms-flex: 0 0 auto;
}
tr.vbar td {
    height:210px;
}
tr.vbar.vbar-short td {
    height:100px;
    overflow-y: hidden;
}
/*차트 vbar의 열별 차트*/
tr.vbar .bar {
    width:90%;
    max-width:80px;
    height:90%;
    margin:0 auto;
    position: relative;
}
/*차트 vbar의 열별 차트 값*/
tr.vbar .bar .bar-text {
    border-radius: 2px;
    display:block;
    text-align: center;
    color:#aaa;
    position: absolute;
    width:100%;
}
tr.vbar .bar .bar-text.light-bg {
    color:#333;
}

/*세로 바 차트*/
.vbar-chart {
    margin-top: 1.5em;
    height: 100%;
    position: relative;
}
.vbar-chart > .text {
    position:absolute;
    text-align: center;
    width:100%;
}
table.cross tr.answer > td[data-count] {
    background-color: #f7f7f7;
    text-align:right;
    padding:2px 4px;
    border: 1px solid #cccccc;
    width:60px;
}
/*bar 차트 요소*/
.bg-div-parent {
    position: relative;
    min-height: 15px;
}
/*bar 차트 배경*/
div.bg-divs {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
/*bar와 글자가 겹치는 것 방지*/
tr.answer div.bg-divs {
    width:75%;
}
/*밑에서 위로 가는 방향*/
div.bg-divs.to-top {
    flex-direction: column-reverse;
    top:unset;
    bottom:0;
    height: 100%;
}
/*위에서 아래로 가는 방향*/
div.bg-divs.to-bottom {
    flex-direction: column;
    height: 100%;
}
/*bar 차트 값*/
div.val-div {
    position: absolute;
    top:0;
    right:4px;
}
/*모달창*/
.modal {
    border:1px solid #96bcff !important;
    border-radius: 0 !important;
    background: #fbfbfb;
}
/*교차분석표에서 제목줄*/
.question-row .line2-box {
    overflow-wrap: break-word;
    word-break: keep-all;
}
/*vbar 마우스오버*/
.valueTooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    display: none; /* 기본적으로 감추기 */
    white-space: pre-line; /* 줄바꿈 유지 */
    z-index: 1000;
}
/*설명문*/
span.desc {
    color:#999;
}
/*버전 팝업에서 문항*/
.popup-question-header {
    border: 1px solid #bbb;
    background-color: #e0e0e0;
    text-align: center;
}
.popup-question {
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #bbb;
    padding:2px 6px;
}
.popup-question-text {
    color:#999999;
    font-size:12px;
}

tr.set-group td {
    background-color: #f0f0f0;
}

.not-enough-hide {
    background: transparent !important;
}

.not-enough-hide .bg-divs,
.not-enough-hide .val-div,
.not-enough-hide .text,
.not-enough-hide .vbar-chart {
    display: none !important;
}