@charset 'utf-8';
/* default setting */
* {box-sizing: border-box; text-decoration: none; list-style: none; margin: 0; padding: 0; }
*::after, *::before {margin: 0 auto; padding: 0; box-sizing: border-box;}
html, body {width: 100%;  max-width: 100%; font-size: 18px; color:#333; line-height: 1.3;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
body { overflow-x:hidden;}
img {display: inline; border: 0;}
a {color: inherit; text-decoration: none;}
ol, ul, li {list-style: none;}
em {font-style: normal;}
strong, b {font-weight: 600;}
sub, sup {font-size: 0.7rem;}
fieldset {border: 0;}
button {font-family: 'pretendard'; font-size: 18px; line-height: 1; background: none; border: none; cursor: pointer;}
textarea {resize: none;}
table {border-collapse: collapse; border-spacing: 0;}
legend, caption {font-size: 0; line-height: 0; overflow: hidden; width: 0; height: 0; text-indent: -999999999px;}
input[type="text"] {box-sizing: border-box;}
img {max-width: 100%;}

:root {
	--main-navy: #1B263C;
	--main-blue: #3178F6;
	--blueLight: #EAF2FF;
	--main-orange: #FF8A15;
	--orangeLight: #FFE9D3;
	--main-green: #16BA5B;
	--greenLight: #e5ffe7;
	--main-red: #DF1C1C;
	--redLight: #FFE2E2;
	--main-grey: #A1A1A1;
	--greyLight: #EBEBEB;
	--greyDark: #666;
	--border-grey: #D4D4D4;
	--tableBg: #F4F4F4;
	--radius-lg:20px;
	--radius-md:12px;
	--radius-sm:8px;
	--radius-xs:4px;
}

/* header*/
.headerWrap {width:100%; background-color:var(--main-navy); display:flex; align-items:center; justify-content:space-between; min-height: 60px; height: auto; padding:10px 20px; gap:20px; color:#fff;	 flex-shrink: 0; position:relative;}
.headerWrap .menuBtn {display:none;}
.headerWrap .leftArea {width:auto; display:flex; flex-flow:row wrap; align-items: center; justify-content: flex-start;gap:10px 50px;}
.headerWrap .rightArea {width:auto; display:flex; flex-flow:row wrap; align-items: center; justify-content: flex-end;gap:10px 30px;}
.headerWrap .logoArea {font-size:1.2em; font-weight:600;}
.headerWrap .depthWrap {width:auto;display:flex; flex-flow:row wrap; align-items: center; justify-content: flex-start; gap:6px 30px;}
.headerWrap .depthWrap .depthBtn {font-size:0.9em; color: #D0D0D0; position: relative;}
.headerWrap .depthWrap .depthBtn::after {content:''; position:absolute; top:50%; right:-15px; width:1px; height:12px; background:#666; transform:translateY(-50%);}
.headerWrap .depthWrap .depthBtn:last-child::after {display: none;}
.headerWrap .depthWrap .depthBtn.active {color: var(--main-blue); text-decoration: underline; font-weight: 600;}
.headerWrap .btnWrap {display:flex; align-items:center; flex-flow:row wrap; justify-content: flex-end; gap:14px; flex-shrink: 0;}
.headerWrap .btnWrap .btn.active {display:inline-flex;}
.headerWrap .btnWrap .btn {width:auto; height:28px; padding: 0 12px; font-size:12px; display:none; align-items:center; justify-content:center;  border-radius:var(--radius-xs); cursor:pointer; transition:background 0.2s ease, transform 0.1s ease; border:1px solid #fff; color:#fff;}
.headerWrap .btnWrap .btn:hover {  background-color: #fff; color: var(--main-blue);   font-weight: 600; }
.headerWrap .btnWrap .btn.logout i {transform:rotate(-180deg);}
.headerWrap .btnWrap .btn .icon {display: inline-block; margin-left: 6px;}
.headerWrap .userArea {font-size: 0.8em; color: #D0D0D0; position: relative;}
.headerWrap .userArea::after {content:''; position:absolute; top:50%; right:-15px; width:1px; height:12px; background:#666; transform:translateY(-50%);}
.headerWrap .userArea .accent {font-weight: 600; color: #fff;}
.headerWrap .userArea .normal {font-weight: 500;}

/* login */
.loginBody {width:100%; height:auto; min-height:100vh; min-height:100dvh; background:url('../images/loginBg.jpg') bottom left / cover no-repeat; display:flex; align-items:center; justify-content:center;}
.loginBody .loginWrap {width:100%; max-width:600px; display:flex; flex-flow:column wrap; align-items:center; justify-content:center; gap:36px; }
.loginBody .loginWrap .titleArea {display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.loginBody .loginWrap .titleArea .mainTitle {font-size:2em; font-weight:800; line-height:1.2; color:var(--main-blue); }
.loginBody .loginWrap .titleArea .subTitle {font-size:0.9em; font-weight:400; color:var(--main-grey);}
.loginBody .loginWrap .loginArea {width:100%; display:flex; flex-direction:column; gap:28px; padding:34px; background-color:#F3F3F3; border-radius:var(--radius-lg); box-shadow:4px 6px 12px rgba(0,0,0,0.08);}
.loginBody .loginWrap .loginArea .loginTitle {display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.loginBody .loginWrap .loginArea .loginTitle .title {font-size:1.45em; font-weight:700; line-height:1.2; color:#333;}
.loginBody .loginWrap .loginArea .loginTitle .subTitle {font-size:0.8em; font-weight:400; color:#666;}
.loginBody .loginWrap .loginArea .loginForm {display:flex; flex-direction:column; gap:18px;}
.loginBody .loginWrap .loginArea .loginForm .inputArea {display:flex; flex-direction:column; gap:8px;}
.loginBody .loginWrap .loginArea .loginForm .inputArea .inputTitle {position:relative; padding-left:12px; font-size:0.8em; font-weight:500; color:#333;}
.loginBody .loginWrap .loginArea .loginForm .inputArea .inputTitle::before {content:''; position:absolute; top:50%; left:0; width:3px; height:14px; background:var(--main-blue); border-radius:2px; transform:translateY(-50%);}
.loginBody .loginWrap .loginArea .loginForm .inputArea .loginInput {width:100%; height:48px; padding:0 14px; font-family:inherit; font-size:0.8em; color:#333; background:#fff; border:1px solid var(--border-grey); border-radius:var(--radius-xs); outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease;}
.loginBody .loginWrap .loginArea .loginForm .inputArea .loginInput::placeholder {color:var(--main-grey);}
.loginBody .loginWrap .loginArea .loginForm .inputArea .loginInput:focus {border-color:var(--main-blue); box-shadow:0 0 0 3px rgba(49,120,246,0.1);}
.loginBody .loginWrap .loginArea .loginForm .loginBtn {width:100%; height:48px;  display:flex; align-items:center; justify-content:center;  font-weight:600; color:#fff; background:var(--main-blue); border-radius:var(--radius-xs); cursor:pointer; transition:background 0.2s ease, transform 0.1s ease;}
.loginBody .loginWrap .loginArea .loginForm .loginBtn:hover {background:#266be1;}
.loginBody .loginWrap .loginArea .loginForm .loginBtn:active {transform:translateY(1px);}
.loginBody .loginWrap .infoArea {width:100%; display:flex; flex-direction:column; gap:14px; padding:34px; background:#F3F3F3; border-radius:var(--radius-lg); box-shadow:4px 6px 12px rgba(0,0,0,0.08);}
.loginBody .loginWrap .infoArea .infoTitle {display:flex; align-items:center; gap:10px;}
.loginBody .loginWrap .infoArea .infoTitle .iconArea {flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.loginBody .loginWrap .infoArea .infoTitle .infoIcon {display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background-color:#fff; border-radius:50%;}
.loginBody .loginWrap .infoArea .infoTitle .infoIcon img {max-height:18px;}
.loginBody .loginWrap .infoArea .infoTitle .title {font-size:0.9em; font-weight:700; color:var(--main-blue);}
.loginBody .loginWrap .infoArea .infoText {font-size:0.8em; font-weight:500; word-break:break-all; text-align:justify; line-height:1.5;}
.loginBody .loginWrap .infoArea .contactArea {width:100%; display:flex; align-items:center; justify-content: space-between; flex-flow:row wrap; gap:14px;}
.loginBody .loginWrap .infoArea .contactArea .contactItem {display:flex; align-items:center; gap:10px; min-width:0; color:var(--greyDark); font-size:0.8em; position:relative;}
.loginBody .loginWrap .infoArea .contactArea .contactItem::after {content:''; position:absolute; top:50%; right:-35%; width:1px; height:12px; background-color:#cccccc; transform:translateY(-50%);}
.loginBody .loginWrap .infoArea .contactArea .contactItem:last-child::after {display:none;}
.loginBody .loginWrap .infoArea .contactArea .contactItem .iconArea {flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.loginBody .loginWrap .infoArea .contactArea .contactItem .contactIcon {width:10px; height:10px;}
.loginBody .loginWrap .infoArea .contactArea .contactItem .contactText { font-weight:400;  white-space:nowrap;}

.loginBody .loginWrap .loginArea .loginForm .anchorBtn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); background-color: rgba(255, 255, 255, 0.6); color: #888; font-size: 0.75em; cursor: pointer; transition: all 0.2s ease-in-out;}
.loginBody .loginWrap .loginArea .loginForm .anchorBtn:hover {background:#EBEBEB;}
.loginBody .loginWrap .loginArea .loginForm .anchorBtn:active {transform:translateY(1px);}

/* main */
.mainBody {width:100%; height:100vh; display:flex; flex-flow:column nowrap; align-items:center; justify-content:flex-start; }
.mainBody .mainWrap {width:100%; flex:1; min-height:0; padding:20px; display:flex; flex-flow:column nowrap; align-items:stretch; justify-content:flex-start; gap:24px;}
.mainBody .mainWrap .secLeft {min-width:0; width:55%; }
.mainBody .mainWrap .secRight {flex:1; min-width:0; display:flex; flex-direction:column; border:1px solid #B9DFF8; border-radius:var(--radius-lg); overflow:hidden;}

.mainBody .mainWrap .topArea {width:100%; flex:1.5 1 0; min-height:0; display:flex; align-items:stretch; justify-content:space-between; gap:24px;}
.mainBody .mainWrap .botArea {width:100%; flex:1 1 0;  min-height:0; display:flex; align-items:stretch; justify-content:space-between; gap:24px;}

.mainBody .mainWrap .surveyArea {display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; border:1px solid var(--greyLight); border-radius:var(--radius-lg); overflow:hidden; box-shadow:4px 6px 12px rgba(0,0,0,0.08); background:url('../images/mainBg.png') bottom center / cover no-repeat;}
.mainBody .mainWrap .surveyArea .surveyContent {width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; padding:20px; text-align:center;}
.mainBody .mainWrap .surveyArea .surveyContent .textWrap {display:flex; flex-flow: column nowrap; align-items:center; justify-content:center; gap:18px;}
.mainBody .mainWrap .surveyArea .surveyContent .mainTitle {font-size:2.2em; font-weight:800; line-height:1.2; color:#002F68;}
.mainBody .mainWrap .surveyArea .surveyContent .subTitle {font-size:0.9em; font-weight:400; line-height:1.5; color:#666; word-break:keep-all;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyPeriod {display:flex; align-items:center; justify-content:center; flex-flow:row wrap; gap:40px; font-size:0.95em;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyPeriod .periodTitle {font-weight:400; color:#666; position:relative;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyPeriod .periodTitle::after {content:''; position:absolute; top:50%; right:-20px; width:1px; height:12px; background-color:#ccc; transform:translateY(-50%);}
.mainBody .mainWrap .surveyArea .surveyContent .surveyPeriod .periodDate {font-weight:700;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn {display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 20px; background-color:var(--main-blue); border-radius:var(--radius-sm); color:#fff; font-size:0.95em; font-weight:600; cursor:pointer; transition:background 0.2s ease;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn:hover {background-color:var(--main-navy); font-weight:700;}
.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn .iconArea {width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;}
.mainBody .mainWrap .surveyArea .surveyContent .linkWrap {display:flex; align-items:center; justify-content:center; flex-flow:row wrap; gap:10px; margin-top:8px;}
.mainBody .mainWrap .surveyArea .surveyContent .linkWrap .linkBtn {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:8px 12px; border:1px solid var(--border-grey); border-radius:var(--radius-sm); background-color:rgba(255,255,255,0.6); color:#888; font-size:0.75em; cursor:pointer; transition: all 0.2s ease-in-out;}
.mainBody .mainWrap .surveyArea .surveyContent .linkWrap .linkBtn:hover {color: var(--main-blue); font-weight: 600; background-color: #fff;}
.mainBody .mainWrap .surveyArea .surveyContent .linkWrap .linkBtn .iconArea {width:12px; height:12px; display:inline-flex; align-items:center; justify-content:center;}
.mainBody .mainWrap .surveyArea.noData .surveyContent {gap:20px;}
.mainBody .mainWrap .surveyArea.noData .surveyContent .icon img {max-height: 130px;}
.mainBody .mainWrap .surveyArea.noData .surveyContent .textWrap {gap:10px;}
.mainBody .mainWrap .surveyArea.noData .surveyContent .mainTitle {font-size: 1.8em;}
.mainBody .mainWrap .surveyArea.noData .surveyContent .subTitle {font-size: 1em; line-height: 1.4;}

.mainBody .boardHeader {width:100%; height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; background-color:var(--blueLight); flex-shrink: 0;}
.mainBody .boardHeader .titleArea {display:flex; align-items:center; gap:12px;}
.mainBody .boardHeader .titleArea .iconArea {width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;}
.mainBody .boardHeader .titleArea .title {font-size:1.1em; font-weight:800;}
.mainBody .boardHeader .moreBtn {font-size:0.9em; color:var(--main-grey); cursor:pointer;}
.mainBody .boardHeader .moreBtn:hover {font-weight:600;}
.mainBody .boardHeader .moreBtn .icon {display:inline-block; font-size:1.2em; transition:transform 0.2s ease; width:22px; height:22px; transform-origin:center center;}
.mainBody .boardHeader .moreBtn .icon i {line-height: 0.9;}
.mainBody .boardHeader .moreBtn:hover .icon {transform:rotate(180deg);}

.mainBody .mainWrap .boardArea .tabArea {width:auto; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; gap:40px;}
.mainBody .mainWrap .boardArea .tabArea .tabBtn {position:relative;  color:var(--main-grey); font-weight:500;   cursor:pointer; transition:color 0.2s ease;}
.mainBody .mainWrap .boardArea .tabArea .tabBtn::after {content:''; display:block; width:1px; height:12px; background-color:#ccc; position:absolute; top:50%; right:-20px; transform:translateY(-50%); }
.mainBody .mainWrap .boardArea .tabArea .tabBtn:last-child::after {display:none;}
.mainBody .mainWrap .boardArea .tabArea .tabBtn.active {color:#333; font-weight: 800;}
.mainBody .mainWrap .boardArea .boardContent {width:100%; display:flex; flex-direction:column; height: calc(100% - 60px);}
.mainBody .mainWrap .boardArea .boardContent .tabContent {display:none;}
.mainBody .mainWrap .boardArea .boardContent .tabContent.active {display:flex; flex-flow:column nowrap; align-items:stretch; justify-content:flex-start; gap:0; min-height: 0; flex: 1;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink {font-size:0.9em; width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 18px; border-bottom:1px solid var(--blueLight); height: calc( 100% / 5 ); }
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink:nth-child(5) {border-bottom:none;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink:hover {background-color: rgb(249 249 249 / 70%);}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardTitle {min-width:0; flex:1; display:flex; align-items:center; gap:14px; font-size:0.9em; font-weight:600;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardTitle .bullet {flex:0 0 auto; width:5px; height:5px; background-color:#002F68; border-radius:50%;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardTitle .text {min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardDate {flex:0 0 auto; color:#737373; font-size:0.8em; font-weight:400;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .noData {width: 100%; height: 100%; padding: 1em; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap:10px; background-color: #fafafa;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .icon {}
.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .icon img {max-height: 60px;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .text {font-size:0.9em; color:#666;}
.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .text.accent {font-size:1.15em; font-weight: 700; color:#333;}

.mainBody .mainWrap .referenceArea { min-width:0; display:flex; flex-direction:column; border:1px solid #B9DFF8; border-radius:var(--radius-lg); overflow:hidden; width:55%;}
.mainBody .mainWrap .referenceArea .referWrap {width:100%; padding:18px; overflow-y:auto;flex:1; min-height:0; }
.mainBody .mainWrap .referenceArea .referWrap .referArea {width:100%; display:flex; flex-direction:column; gap:18px;}
.mainBody .mainWrap .referenceArea .referWrap .referArea .item {position:relative; padding-left:18px; font-size:0.85em; font-weight:500; line-height:1.55; word-break:keep-all;}
.mainBody .mainWrap .referenceArea .referWrap .referArea .item::before {content:''; position:absolute; top:9px; left:0; width:5px; height:5px; background-color:#002F68; border-radius:50%;}

.mainBody .mainWrap .managerArea .manageWrap {width:100%; display:flex; flex-flow:row wrap; align-items:stretch; gap:12px; padding:18px; overflow-y: auto; flex:1; min-height:0;}
.mainBody .mainWrap .managerArea .manageWrap .item {width:calc(50% - 6px); display:flex; flex-direction:column; justify-content: center; gap:12px; padding:14px; background-color:#FAFAFA; border:1px solid var(--border-grey); border-radius:var(--radius-sm);}
.mainBody .mainWrap .managerArea .manageWrap.odd .item {width:calc( ( 100% - 24px ) / 3 );}
.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle {display:flex; align-items:center; gap:12px;}
.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .iconArea {flex:0 0 auto; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background-color:var(--blueLight); border-radius:50%;}
.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .titleText {min-width:0; display:flex; flex-direction:column; gap:2px;}
.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .titleText .name {font-size:0.9em; font-weight:700; color:#333;}
.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .titleText .position {font-size:0.72em; font-weight:400; color:var(--main-grey);}
.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo {width:100%; display:flex; flex-direction:column; gap:4px; padding-top:14px; border-top:1px solid var(--border-grey); }
.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo .infoItem {display:flex; align-items:center; gap:10px; min-width:0; font-size:0.7em;}
.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo .infoItem .infoTitle {flex:0 0 auto; color:var(--main-grey);}
.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo .infoItem .infoText {min-width:0; color:#666;word-break: break-all; }

.mainBody .mainWrap .managerArea .manageWrap2 {display:flex; flex-direction:column; flex:1; min-height:0; width:100%;}
.mainBody .mainWrap .managerArea .manageWrap2 .tableArea {flex:1; min-height:0; overflow-y:auto;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable {width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable caption {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .colType {width:17%;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .colName {width:20%;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .colDept{width:15%;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .colTel {width:24%;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .colMail {width:24%;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable th {position:sticky; top:0; z-index:1; height:36px; padding:0 8px; border-bottom:1px solid var(--border-grey); background:var(--tableBg); color:var(--greyDark); font-size:1em; font-weight:700; text-align:left;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable td {padding:0 8px; border-bottom:1px solid var(--greyLight); font-size:1em; text-align:left; height:46px; }
.mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody tr:hover td {background:#FAFAFA;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .cate {padding:4px; line-height:1.2;  border-radius:var(--radius-md); font-size: 0.9em; display: inline-block;  word-break: keep-all; text-align: center; width:100%; font-weight:500;}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .cate.color01 {background-color:var(--blueLight); color:var(--main-blue);}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .cate.color02 {background-color:var(--orangeLight); color:var(--main-orange);}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .cate.color03 {background-color:var(--greenLight); color:var(--main-green);}
.mainBody .mainWrap .managerArea .manageWrap2 .listTable .name {font-weight:700;}



/* dashboard common */
.dot {width:8px; height:8px; border-radius:50%; display:inline-block; background-color:var(--status-color);}
.blue {--status-color: var(--main-blue); --status-bg: var(--blueLight);}
.green {--status-color: var(--main-green); --status-bg: var(--greenLight);}
.red {--status-color: var(--main-red); --status-bg: var(--redLight);}
.orange {--status-color: var(--main-orange); --status-bg: var(--orangeLight);}
.grey {--status-color: var(--main-grey); --status-bg: var(--greyLight);}

.whiteWrap {width:100%; background:#fff; border:1px solid var(--border-grey); border-radius:var(--radius-sm); overflow:hidden; padding:20px;}
.whiteWrap .titleWrap {width:100%; display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between;}
.whiteWrap .titleWrap:not(:has(.rightArea)) {justify-content:flex-start;}
.whiteWrap .titleWrap .leftArea {width:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; gap:16px;}
.whiteWrap .titleWrap .rightArea {width:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; gap:8px;}
.whiteWrap .titleWrap .title { padding-left:10px; font-size:1em; font-weight:700; line-height:1.2; border-left:3px solid var(--main-blue);}
.whiteWrap .titleWrap .title.red {border-color: var(--main-red);}
.whiteWrap .titleWrap .title.green {border-color: var(--main-green);}
.whiteWrap .titleWrap .title.orange {border-color: var(--main-orange);}
.whiteWrap .titleWrap .title.grey {border-color: var(--main-grey);}
.whiteWrap .contArea {width:100%; min-height:0;}

/* table result number */
.whiteWrap .titleWrap:has(.resultArea) {}
.whiteWrap .resultArea {width:fit-content; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 0.85em;}
.whiteWrap .resultArea .box {width: auto; position: relative; display: inline-flex; align-items: center; color: #666; line-height: 1;} 
.whiteWrap .resultArea .box::after {content: ''; display: inline-block; position: absolute; top: 50%;  right: -16px;  transform: translate(0, -50%); width:10px; height:1px; background-color: var(--border-grey);}
/* .whiteWrap .resultArea .box::after {content: '·'; display: inline-block; position: absolute; top: -50%;  right: -10px;  transform: translate(0, 50%);} */
.whiteWrap .resultArea .box:last-child::after {display: none;}
.whiteWrap .resultArea .box .accent {font-weight: 700; padding:0 4px; color: var(--main-blue);}
.whiteWrap .resultArea .box .accent .normal {font-weight: 500;}

/* 대학별 현황의 상태 집계: 다른 화면의 결과 영역에는 적용하지 않는다. */
.whiteWrap.tabCont .titleWrap.surveyUnivResultTitle {flex-flow:row wrap; gap:10px 16px;}
.whiteWrap .surveyUnivResultTitle > .leftArea {min-width:0; max-width:100%;}
.whiteWrap .resultArea.surveyStatusSummary {display:block; max-width:100%; line-height:1.6; text-align:left;}
.whiteWrap .surveyStatusSummary .box {white-space:nowrap; line-height:inherit;}
.whiteWrap .surveyStatusSummary .box::after {display:none;}
#surveyListTable .surveyUnivStatus {font-weight:700; white-space:nowrap; color:inherit;}
.whiteWrap .surveyStatusSummary .box[data-status="BFR"] .accent {color:#FF8A15;}
.whiteWrap .surveyStatusSummary .box[data-status="WRT"] .accent {color:#3178F6;}
.whiteWrap .surveyStatusSummary .box[data-status="SBMSN"] .accent {color:#16BA5B;}
.whiteWrap .surveyStatusSummary .box[data-status="APRV"] .accent {color:#7C3AED;}
.whiteWrap .surveyStatusSummary .box[data-status="RJCT"] .accent {color:#DF1C1C;}

/* 대학별 현황의 조사 상태 도움말 */
#surveyListTable .surveyStatusHelpButton {display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:#666; font-size:15px; vertical-align:middle; cursor:pointer;}
#surveyListTable .surveyStatusHelpButton:hover,
#surveyListTable .surveyStatusHelpButton[aria-expanded="true"] {background:#e8e8e8; color:#333;}
#surveyListTable .surveyStatusHelpButton:focus-visible {outline:2px solid var(--main-blue); outline-offset:2px;}
.surveyStatusHelp {position:fixed; z-index:1000; width:350px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow-y:auto; box-sizing:border-box; padding:16px; border:1px solid #d5d5d5; border-radius:8px; background:#fff; color:#333; box-shadow:0 4px 16px rgba(0,0,0,0.14); font-size:13px; line-height:1.6; text-align:left; white-space:normal; word-break:keep-all; overflow-wrap:anywhere;}
.surveyStatusHelp[hidden] {display:none;}
.surveyStatusHelpTitle {display:block; margin-bottom:10px; font-size:14px;}
.surveyStatusHelp dl {display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px 12px; margin:0;}
.surveyStatusHelp dt {font-weight:700;}
.surveyStatusHelp dd {margin:0;}
.surveyStatusHelp p {margin-top:12px; padding-top:10px; border-top:1px solid #e8e8e8; color:#666; font-size:12px;}

.whiteWrap .flexWrap {display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin-bottom:6px;}
.whiteWrap .flexWrap.between {justify-content: space-between;}
.whiteWrap .flexWrap .leftArea {width:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; gap:10px;}
.whiteWrap .flexWrap .rightArea {width:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end; gap:10px;}

.whiteWrap.tabCont .titleWrap {padding-bottom:14px;}
.whiteWrap.tabCont .contArea {padding-top: 14px; border-top: 1px solid #ccc; }
.whiteWrap .contArea .textArea {width:100%; max-height: 250px; overflow-y: scroll; color:#666; font-weight: 500; font-size:0.85em; line-height:1.6; word-break:keep-all; padding:0 14px;}
.foldWrap .contArea {display:none;}
.foldWrap.isOpen .titleWrap {padding-bottom:14px;}
.foldWrap.isOpen .contArea {display:block; padding-top:14px; border-top:1px solid #ccc;}
.foldBtn {display:inline-flex; align-items:center; justify-content:center; gap:7px; color:#999; font-size:0.75em; flex-shrink: 0;}
.foldBtn .text {line-height:1;}
.foldBtn i {font-size:0.85em; transition:transform 0.2s ease; transform:rotate(0deg);}
.whiteWrap.isOpen .foldBtn i {transform:rotate(180deg);}

.depth02Wrap {width:100%;}
/* .depth02Tab {width:100%; display:flex; flex-flow:row nowrap; align-items:stretch; justify-content:flex-start; border-bottom:2px solid var(--main-blue); overflow:hidden; gap: 4px;} */
.depth02Tab {width:100%; display:flex; flex-flow:row nowrap; align-items:stretch; justify-content:flex-start; border-bottom:2px solid var(--main-blue); overflow:hidden; gap: 4px; overflow-x:auto;}
.depth02Tab .tabBtn {width:240px; height:40px; padding:0 10px; display:inline-flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; border:1px solid var(--border-grey); border-bottom:none; background:#fff; color:#666; font-size:0.85em; transition:all 0.2s ease; border-radius: var(--radius-sm) var(--radius-sm) 0 0;}
.depth02Tab .tabBtn .text {min-width:0; flex:1; font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;}
.depth02Tab .tabBtn .stateIcon {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:0.85em;}
.depth02Tab .tabBtn.green .stateIcon {color:var(--main-green);}
.depth02Tab .tabBtn.blue .stateIcon {color:var(--main-blue);}
.depth02Tab .tabBtn.red .stateIcon {color:var(--main-red);}
.depth02Tab .tabBtn.orange .stateIcon {color:var(--main-orange);}
.depth02Tab .tabBtn.grey {background:#f7f7f7; color:#bbb; cursor:not-allowed;}
.depth02Tab .tabBtn.grey .stateIcon {color:#bbb;}
.depth02Tab .tabBtn:hover:not(:disabled):not(.active) {background:#f7f7f7;}
.depth02Tab .tabBtn.active {position:relative; z-index:1; background:var(--main-blue); border-color:var(--main-blue); color:#fff; font-weight:600;}
.depth02Tab .tabBtn.active .stateIcon {color:#fff;}
.depth02Tab .tabBtn:disabled {background:#f7f7f7; color:#bbb; cursor:not-allowed;}
.depth02Cont {width:100%;}

.depth02Tab.is-hidden {display: none !important;}
.detailSec .depth02Cont > .whiteWrap.tabCont {display:none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);}
.detailSec .depth02Cont > .whiteWrap.tabCont.active {display:block;}

/* 항목별 현황 전용: 많은 테이블별 탭을 여러 줄로 배치하며 조사작성 탭에는 적용하지 않는다. */
.artclPrstDetail .depth02Tab {flex-wrap:wrap; gap:6px; padding-bottom:8px; overflow:visible;}
.artclPrstDetail .depth02Tab .tabBtn {width:220px; max-width:100%; height:auto; min-height:40px; padding:10px; border-bottom-style:solid; border-bottom-width:1px; border-radius:var(--radius-xs);}
.artclPrstDetail .depth02Tab .tabBtn .text {white-space:normal; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere;}

.subTitleWrap {width:100%; margin-bottom:10px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.subTitleWrap .leftArea {width:auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;}
.subTitleWrap .rightArea {width:auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px;}
.subTitleWrap .rightArea .baseBtn {font-size:11.5px; height: 22px; padding:0 6px;}
.subTitleWrap .subTitle {padding-left:10px; font-size:0.9em; font-weight:700; line-height:1.2; border-left:3px solid var(--main-navy);}

/* 공통 입력 안내 */
.noticeBox {width:100%; min-width:0; display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:12px 14px; border:1px solid var(--border-grey); border-radius:var(--radius-sm); background:var(--tableBg); line-height:1.6; word-break:keep-all; overflow-wrap:anywhere;}
.noticeBox .noticeIcon {flex:0 0 auto; margin-top:3px; color:var(--main-blue); font-size:16px;}
.noticeBox .noticeContent {min-width:0;}
.noticeBox .noticeTitle {color:var(--main-navy); font-size:14px; font-weight:600;}
.noticeBox .noticeText {margin-top:3px; color:var(--greyDark); font-size:13px;}

/* table */
.tableWrap {width:100%; margin-bottom:1.5em;}
.tableWrap:last-child {margin-bottom:0;}
.tableWrap .tableArea {width:100%; min-width:0;}
.tableWrap button.icon {font-size:16px; color: var(--main-grey);}
.tableWrap button.icon.delete:hover {color: var(--main-red);}
.tableWrap button.icon.add:hover {color: var(--main-blue);}
.baseTable {width:100%; table-layout:auto; border-collapse:collapse; white-space:nowrap; font-size:0.8em;  }
.baseTable th, .baseTable td {padding:4px; border:1px solid var(--border-grey); text-align:center; vertical-align:middle;}
.baseTable th {min-height:28px; background:var(--tableBg); color:#333; font-weight:500;}
.baseTable td {min-height:35px; background:#fff; color:#333;}
.baseTable td.alignLeft {text-align:left;}
.baseTable td.alignCenter {text-align:center;}
.baseTable td.alignRight {text-align:right;}
.baseTable .groupRow th {height:22px; padding:2px; font-weight:600; white-space: normal;}
.baseTable .headRow th {height:26px; min-width:70px;}

/* 장문 조회 표: 셀 너비에 맞춰 줄바꿈하고 입력한 개행을 유지한다. */
.tableArea .baseTable.textWrapTable {min-width:100%; table-layout:fixed;}
.baseTable.textWrapTable th, .baseTable.textWrapTable td {white-space:normal; overflow-wrap:anywhere; word-break:normal; line-height:1.5;}
.baseTable.textWrapTable td.alignLeft {white-space:pre-line;}

/* 2026-09-29 추가 */
.baseTable td.nestedTableCell {padding:0;}
.baseTable .nestedTable {width:100%; border-collapse:collapse; font-size:inherit;}
.baseTable .nestedTable th, .baseTable .nestedTable td {min-height:0; padding:4px 6px; border:0; border-bottom:1px solid var(--border-grey); text-align:left;}
.baseTable .nestedTable th {width:60px; border-right:1px solid var(--border-grey);}
.baseTable .nestedTable tr:last-child th, .baseTable .nestedTable tr:last-child td {border-bottom:0;}

.tableWrap.fullWidth .tableArea {overflow: unset;}
.tableArea.fullWidth .baseTable {min-width: 100%; table-layout: fixed;}
.fullWidth .baseTable td {padding: 8px; white-space: normal; line-height: 1.5;}
.fullWidth .baseTable td.alignLeft {text-align:left;}
.fullWidth .baseTable td.alignCenter {text-align:center;}
.fullWidth .baseTable td.alignRight {text-align:right;}
.fullWidth .baseTable .accent {font-weight: 700; }
.fullWidth .baseTable .accent.blue {color: var(--main-blue);}
.fullWidth .baseTable .accent.red {color: var(--main-red);}
.fullWidth .baseTable .accent.green {color: var(--main-green);}
.fullWidth .baseTable .accent.orange {color: var(--main-orange);}
.fullWidth .baseTable .accent.grey {color: var(--main-grey);}

/* search Area */
.searchWrap {width:100%; padding:1em; background-color:#f7f9fc; border-radius:var(--radius-sm); display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:1em;}
.searchWrap.expand {display:block;}
.searchWrap .searchList {width:100%; display:flex; flex-flow:row wrap; align-items:center; align-content:flex-start; justify-content:center; gap:1em;}
.searchWrap .searchBox {min-width:0; flex:1 1 auto;}
.searchWrap.unit1 .searchBox {flex:1 1 100%;}
.searchWrap.unit2 .searchBox {flex:1 1 calc((100% - 1em) / 2);}
.searchWrap.unit3 .searchBox {flex:1 1 calc((100% - 2em) / 3);}
.searchWrap.unit4 .searchBox {flex:1 1 calc((100% - 3em) / 4);}
.searchWrap.unit5 .searchBox {flex:1 1 calc((100% - 4em) / 5);}
.searchWrap.unit6 .searchBox {flex:1 1 calc((100% - 5em) / 6);}
.searchWrap.unit7 .searchBox {flex:1 1 calc((100% - 6em) / 7);}
.searchWrap.unit8 .searchBox {flex:1 1 calc((100% - 7em) / 8);}
.searchWrap.unit9 .searchBox {flex:1 1 calc((100% - 8em) / 9);}
.searchWrap.unit10 .searchBox {flex:1 1 calc((100% - 9em) / 10);}
.searchWrap .searchBox .title {margin-bottom:4px;}
.searchWrap .searchBox .title .icon {font-size:0.8em; color:var(--main-blue);}

/* search expand */
.searchWrap.expand .searchList {max-height:var(--search-close-height, 0); overflow:hidden; transition:max-height 0.3s ease;}
.searchWrap.expand.isOpen .searchList {max-height:var(--search-open-height, 2000px);}
.searchWrap .expandBtn {width:100%; margin-top:1em; padding-top:1em; display:flex; align-items:center; justify-content:center; gap:0.5em; color:var(--greyDark); border-top:1px solid var(--border-grey); font-size:0.9em;}
.searchWrap .expandBtn:hover {font-weight: 600;}
.searchWrap .expandBtn[hidden] {display:none;}
.searchWrap .expandBtn i {font-size:0.75em; transition:transform 0.3s ease;}
.searchWrap.isOpen .expandBtn i {transform:rotate(180deg);}

/* select */
.formItem {width:100%; min-width:74px; height:30px; padding:0 5px; border:1px solid var(--border-grey); border-radius:var(--radius-xs); background:#fff; color:#333; font-family:inherit; outline:none;}
select.formItem {padding-right:20px; color:#777;}
.formItem:focus {border-color:var(--main-blue);}
.formItem:disabled {background:#f5f5f5; color:#aaa; cursor:not-allowed;}
.formItem.alignRight {text-align:right;}

/* input */
.inputItem {width:100%; min-width:74px; height:30px; padding:0 5px; border:1px solid var(--border-grey); border-radius:var(--radius-xs); background:#fff; color:#333; font-family:inherit; outline:none;}
.inputItem:focus {border-color:var(--main-blue);}
.inputItem:disabled {background:#f5f5f5; color:#aaa; cursor:not-allowed;}

/* calendar */
.inputItem[type="date"] {color:#aaa;}
.calendarArea {width:100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 1em;}

/* form */
.baseTable .formItem {width:100%; min-width:74px; height:30px; padding:0 5px; border:1px solid var(--border-grey); border-radius:var(--radius-sm); background:#fff; color:#333; font-family:inherit; outline:none;}
.baseTable select.formItem {padding-right:20px; color:#777;}
.baseTable .formItem:focus {border-color:var(--main-blue);}
.baseTable .formItem:disabled {background:#f5f5f5; color:#000000; cursor:not-allowed;}
.baseTable .formItem.alignRight {text-align:right;}
.baseTable .accent.blue {color: var(--main-blue);} /* 2026-09-29 추가 */

/* choice */
.choiceItem {position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#777; font-size:0.8em; cursor:pointer;}
.choiceItem input {position:absolute; width:14px; height:14px; margin:0; opacity:0; cursor:pointer; z-index:1;}
.choiceItem .mark {position:relative; width:14px; height:14px; display:block; flex-shrink:0; border:1px solid var(--border-grey); background:#fff;}
.choiceItem .text {line-height:1; white-space:nowrap;}

/* checkbox */
.choiceItem input[type="checkbox"] + .mark {border-radius:2px;}
.choiceItem input[type="checkbox"]:checked + .mark {border-color:var(--main-blue); background:var(--main-blue);}
.choiceItem input[type="checkbox"]:checked + .mark::after {content:''; position:absolute; top:1px; left:4px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* radio */
.choiceItem input[type="radio"] + .mark {border-radius:50%;}
.choiceItem input[type="radio"]:checked + .mark {border-color:var(--main-blue);}
.choiceItem input[type="radio"]:checked + .mark::after {content:''; position:absolute; top:3px; left:3px; width:6px; height:6px; border-radius:50%; background:var(--main-blue);}

/* disabled */
.choiceItem input:disabled {cursor:not-allowed;}
.choiceItem input:disabled + .mark {background:#f3f3f3; border-color:#ccc;}
.choiceItem:has(input:disabled) {color:#aaa; cursor:not-allowed;}

.botBtnWrap {width:100%; margin-top:12px; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:20px;}
.botBtnWrap:not(:has(.rightArea)), .botBtnWrap:not(:has(.leftArea)) {justify-content:center; gap: 10px;}
.botBtnWrap .leftArea {width:auto; display:flex; align-items:center; justify-content:flex-start; gap:7px;}
.botBtnWrap .rightArea {width:auto; display:flex; align-items:center; justify-content:flex-end; gap:7px;}

/* button */
.baseBtn {height:28px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border-grey); border-radius:var(--radius-xs); background:#fff; color:#777; font-size:13px; transition:all 0.2s ease;}
.baseBtn .text {line-height:1; white-space:nowrap;}
.baseBtn i {font-size:10px;}
.baseBtn:hover {background:#f7f7f7;}
.baseBtn.blue {border-color:#8cb7ff; color:var(--main-blue);}
.baseBtn.blue:hover {background:var(--blueLight);}
.baseBtn.green {border-color: #88be3e; color:var(--main-green);}
.baseBtn.green:hover {background:var(--greenLight);}
.baseBtn.fillBlue {border-color:var(--main-blue); background:var(--main-blue); color:#fff;}
.baseBtn.fillBlue:hover {background:#266be1;}
.baseBtn.red {border-color:var(--main-red); color:var(--main-red);}
.baseBtn.red:hover {background:var(--redLight);}
.baseBtn:disabled {background:#f5f5f5; border-color:#ddd; color:#aaa; cursor:not-allowed;}

.topBtn {position: fixed; bottom:10px; right:10px; font-size: 1.5em; z-index: 100; width:50px; height:50px; border-radius:8px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--border-grey); transition: all 0.2s ease-in-out; }
.topBtn:hover {background-color: var(--main-blue); color: #fff;}

/* dashboard */
.dashBody {background-color:#F9F9FC;}
.dashBody .dashWrap {width:100%; height: auto; padding: 20px; font-size: 16px;}
.dashMainTitle {width:100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap:10px; margin-bottom:1em; padding-bottom:1em;  font-size:1.5em; border-bottom:1px solid var(--border-grey);}
.dashMainTitle .text {padding-left:10px; border-left:5px solid var(--main-blue); line-height:1.2;}
.dashSec {width:100%; margin-bottom: 2em;}
.dashSec:last-child {margin-bottom: 0;}
.dashSec .dashTabWrap {width:100%; display:flex; flex-flow:row wrap; align-items: center; justify-content: space-between;margin-bottom: 1em;}
.dashSec .dashTabWrap .leftArea {width:auto; display:flex; flex-flow:row wrap; align-items: center; justify-content: flex-start; gap:30px;}
.dashSec .dashTabWrap .tabBtn {font-size: 1.2em; position: relative; color: #929292;}
.dashSec .dashTabWrap .tabBtn::after {content:''; position:absolute; top:50%; right:-15px; width:1px; height:12px; background:var(--border-grey); transform:translateY(-50%);}
.dashSec .dashTabWrap .tabBtn.active {font-weight: 700; color: var(--main-blue);}
.dashSec .dashTabWrap .tabBtn:last-child::after {display: none;}
.dashSec .dashTabWrap .rightArea {width:auto; display:flex; flex-flow:row wrap; align-items: center; justify-content: flex-end;  gap: 14px;}
.dashSec .dashTabWrap .rightArea .alert {display: inline-flex; align-items: center; gap: 6px;}
.dashSec .dashTabWrap .rightArea .alert .dot {}
.dashSec .dashTabWrap .rightArea .alert .text {line-height: 1; font-size: 0.85em; color: var(--greyDark); font-weight: 500;}

.dashSec .dashContWrap {}
.dashSec .dashContWrap .tabContent {display: none;}
.dashSec .dashContWrap .tabContent.active {display: flex;}
/* view full tab */
.dashSec .dashContWrap .tabContent.full {width:100%; background-color: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border-grey); flex-direction: column; align-items: stretch; justify-content: flex-start;}
.dashSec .dashContWrap .tabContent.full .tabBox {width:100%; border-bottom: 1px solid var(--border-grey); padding: 10px 20px; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap:50px;}
.dashSec .dashContWrap .tabContent.full .tabBox:last-child {border-bottom: none;}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea {padding-left: 10px; border-left: 3px solid #ddd; display: flex; align-items: center; justify-content: space-between; width:230px; flex-shrink: 0;}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea.blue {border-color: var(--main-blue);}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea.green {border-color:var(--main-green);}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea.red {border-color:var(--main-red);}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea.orange {border-color:var(--main-orange);}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea.grey {border-color:var(--main-grey);}
.dashSec .dashContWrap .tabContent.full .tabBox .titleArea .title {font-size: 1.05em; line-height: 1.2;}
.dashSec .dashContWrap .tabContent .badge {font-size:12px; font-weight:500; line-height:1; width:48px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:20px; color:var(--status-color); background-color:var(--status-bg);}
.dashSec .dashContWrap .tabContent.full .tabBox .line {width: 36px; height: 1px; background-color: #D4D4D4; display: inline-block;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea {flex: 1; width: auto; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; gap: 14px;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab {width: calc( ( 100% - 70px ) / 6 ); display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 8px; border-radius: var(--radius-xs); border: 1px solid #e9e9e9;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab .text {font-size: 0.8em; color: #666; width:auto; flex: 1;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; text-align: left;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab:hover .text {font-weight: 600;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab .dot {}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab.grey {background-color: #F5F5F5; cursor: not-allowed;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab.grey .text{ color: #BFBFBF;}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab.active {background-color: var(--blueLight); border-color: var(--main-blue);}
.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab.active .text {color: var(--main-blue); font-weight: 600; }

.dashSec .dashContWrap .tabContent.specific {width:100%; display: none; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; gap:20px;}
.dashSec .dashContWrap .tabContent.specific.active {display: flex; }
.dashSec .dashContWrap .tabContent.specific .tabBox {display: inline-flex; flex-flow: column nowrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px; border-radius: var(--radius-sm); border: 1px solid #e9e9e9; width: calc( ( 100% - 100px ) / 6 ); transition: all 0.3s ease-in-out;}
.dashSec .dashContWrap .tabContent.specific .tabBox:hover {background-color: #ededed;}
.dashSec .dashContWrap .tabContent.specific .tabBox.active {background-color: var(--blueLight); border: 1px solid var(--main-blue);}
.dashSec .dashContWrap .tabContent.specific .tabBox.active .title {font-weight: 700; color: var(--main-blue);}
.dashSec .dashContWrap .tabContent.specific .tabBox .title { font-size: 0.95em; width:100%; text-align: left;color: #666; font-weight: 500; }
.dashSec .dashContWrap .tabContent.specific .tabBox.active .state {display: inline-flex; align-items: center; justify-content: flex-end; width: fit-content; border: 1px solid var(--main-blue); border-radius: 20px;}
.dashSec .dashContWrap .tabContent.specific .tabBox.active .state .badge {background-color: var(--main-blue); color: #fff; font-weight: 500;}
.dashSec .dashContWrap .tabContent.specific .tabBox .state .number {display: none; letter-spacing: 0.2em;  color: var(--main-blue); font-size: 12px; padding: 0 6px; }
.dashSec .dashContWrap .tabContent.specific .tabBox.active .state .number {display: inline-flex;}
.dashSec .dashContWrap .tabContent.specific .tabBox.grey {background-color: #F5F5F5; cursor: not-allowed;}
.dashSec .dashContWrap .tabContent.specific .tabBox.grey .title {color: #BFBFBF;}

/* modal */
.modalWrap {width:100vw; height:100vh; display:none; align-items: center; justify-content: center; position: relative; font-size: 16px;}
.modalWrap.active {display: flex;}
.modalWrap::before {content: ''; display: block; background-color: rgba(0,0,0,0.2); position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index: 0;  width: 100vw;  height: 100vh; }
.modalWrap .modalContent {width: 100%;display: flex; flex-direction: column; position: relative; z-index: 10;  border-radius: var(--radius-sm); overflow: hidden;}
.modalWrap.large .modalContent {width:min(90vw, 1200px); max-height: 90vh;}
.modalWrap.medium .modalContent {width:min(90vw, 700px); max-height: 80vh;}
.modalWrap.small .modalContent {width:min(90vw, 500px); max-height: 70vh;}
.modalWrap .modalContent .modalTitle {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; background-color: var(--main-blue); color: #fff; padding:14px 20px;}
.modalWrap .modalContent .modalTitle .title {font-size: 1.4em; line-height: 1;}
.modalWrap .modalContent .modalTitle .closeBtn {color: #fff; transition: transform 0.2s ease-in-out; transform-origin: center;}
.modalWrap .modalContent .modalTitle .closeBtn:hover {transform: rotate(135deg);}
.modalWrap .modalContent .whiteWrap { flex: 1; min-height: 0;  border-radius: 0; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start;  gap: 14px;}
.modalWrap .modalContent .whiteWrap .titleWrap { flex-shrink: 0;}
.modalWrap .modalContent .whiteWrap .contArea {width: 100%;  flex: 1; min-height: 0;  overflow-y: auto;}
.modalWrap .modalContent .whiteWrap .contArea .tableArea, .modalWrap .modalContent .whiteWrap .contArea .textArea  {width:100%; overflow: auto; margin-bottom: 10px;}
.modalWrap .modalContent .whiteWrap .contArea .tableArea:last-child, .modalWrap .modalContent .whiteWrap .contArea .textArea:last-child {margin-bottom: 0;}
.modalWrap .modalContent .whiteWrap .contArea .textArea {padding: 0; font-size:0.9em;}
.modalWrap .modalContent .whiteWrap .contArea .tableArea .baseTable {min-width: 800px;}
.modalWrap .modalContent .whiteWrap .contArea .tableArea .baseTable.textWrapTable {min-width:100%;}
.modalWrap .modalContent button.icon {font-size: 16px; color: var(--main-grey);}
.modalWrap .modalContent button.icon.add:hover {color: var(--main-blue);}
.modalWrap .modalContent button.icon.delete:hover {color: var(--main-red);}
.modalWrap .modalContent .btnWrap { flex-shrink: 0; width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 10px; }

/* faq accordion */
.faqWrap {width:100%; display:flex; flex-flow:column nowrap; }
.faqWrap .faqBox {width:100%; border-bottom:1px solid var(--border-grey);}
.faqWrap .faqBox.active {background-color:#FAFAFA;}
.faqWrap .faqBox .qText {width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; cursor:pointer; transition:background 0.2s ease;}
.faqWrap .faqBox .qText:hover {background-color:#FAFAFA; }
.faqWrap .faqBox .alpha {width:28px; height:28px; line-height: 0.9; background-color: var(--blueLight); color: var(--main-blue); border-radius: 50%; flex-shrink:0;font-weight:700; display: inline-flex; align-items: center; justify-content: center;}
.faqWrap .faqBox .qText .question {min-width:0; flex:1; display:flex; align-items:baseline; gap:10px; font-size:0.9em; font-weight:600; color:#333;}
.faqWrap .faqBox .qText .question .alpha {}
.faqWrap .faqBox .qText .question .centerBadge {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; min-width:40px; height:24px; padding:0 8px; border:1px solid var(--border-grey); border-radius:var(--radius-xs); background-color:var(--tableBg); color:var(--greyDark); font-size:12px; font-weight:500; line-height:1; white-space:nowrap;}
.faqWrap .faqBox .qText .question .text {min-width:0; }
.faqWrap .faqBox .qText .icon {flex-shrink:0; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:var(--main-grey); font-size:0.85em; transition:transform 0.2s ease, color 0.2s ease;}
.faqWrap .faqBox.active .qText .question {color:var(--main-blue);}
.faqWrap .faqBox.active .qText .icon {color:var(--main-blue);}
.faqWrap .faqBox .aText {display:none; padding:14px; background-color:#F7F7F7; border-top:1px dotted var(--border-grey);}
.faqWrap .faqBox.active .aText {display:block;}
.faqWrap .faqBox .aText .answer {display:flex; align-items:flex-start; gap:10px; font-size:0.9em; font-weight:500; color:#333; line-height:1.6; word-break:keep-all;}
.faqWrap .faqBox .aText .answer .alpha {background-color: var(--main-blue); color: #fff;}
.faqWrap .faqBox .aText .answer .text {min-width:0; text-align: justify;}
.baseTable .attachmentLink {max-width:100%; font:inherit; color:var(--main-blue); text-align:left; white-space:normal; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:3px;}
.faqWrap .faqBox .aText .attachWrap {width: 100%; margin-top: 14px;}
.faqWrap .faqBox .aText .attachBox {width:100%; display:inline-flex; align-items:center; justify-content: flex-start; gap:10px; font-size:0.8em; font-weight:500; color:var(--main-grey); text-decoration:underline; cursor:pointer; margin-bottom: 6px;}
.faqWrap .faqBox .aText .attachBox:last-child {margin-bottom: 0;}
.faqWrap .faqBox .aText .attachBox:hover {font-weight:700;}
.faqWrap .faqBox .aText .attachBox .icon {font-size:0.9em; width:28px; text-align: center;}

/* select2 */
.select2-container--default .select2-dropdown { border: 1px solid var(--border-grey); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 13px; box-sizing: border-box;}
.select2-container--default .select2-dropdown--below { border-top-left-radius: 0; border-top-right-radius: 0;}
.select2-container--default .select2-dropdown--above { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.select2-container--default .select2-search--dropdown { padding: 5px;}
.select2-container--default .select2-search--dropdown .select2-search__field { width: 100%; height: 26px; padding: 0 5px; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 13px; color: #333; line-height: 24px; outline: none; box-sizing: border-box;}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--border-grey); outline: none; box-shadow: none;}
.select2-container--default .select2-results > .select2-results__options { max-height: 200px; margin: 0; padding: 0; overflow-y: auto; list-style: none;}
.select2-container--default .select2-results__option { height: 30px; margin: 0; padding: 0 7px; background: #fff; font-family: inherit; font-size: 13px; font-weight: normal; line-height: 30px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; cursor: pointer;}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #4f8fe9; color: #fff;}
.select2-container--default .select2-results__option[aria-selected="true"] { background-color: #f5f5f5; color: #333;}
.select2-container--default .select2-results__option[aria-selected="true"] .select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted { background-color: #4f8fe9; color: #fff;}

.baseTable .select2-container { width: 100% !important; min-width: 74px; font-family: inherit; font-size: 13px; box-sizing: border-box;}
.baseTable .select2-container--default .select2-selection--single { width: 100%; height: 30px; padding: 0 5px; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 13px; color: #777; outline: none; box-sizing: border-box;}
.baseTable .select2-container--default .select2-selection--single .select2-selection__rendered { height: 28px; line-height: 28px; padding: 0 20px 0 0; font-family: inherit; font-size: 13px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.baseTable .select2-container--default .select2-selection--single .select2-selection__arrow { width: 20px; height: 28px; top: 0; right: 0;}
.baseTable .select2-container--default.select2-container--focus .select2-selection--single, .baseTable .select2-container--default.select2-container--open .select2-selection--single { border: 1px solid var(--border-grey); outline: none; box-shadow: none;}
.baseTable .select2-container--default.select2-container--disabled .select2-selection--single { background: #f5f5f5; color: #999; cursor: not-allowed;}
.baseTable .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999;}

.searchWrap .select2-container { width: 100% !important; min-width: 74px; font-family: inherit; font-size: 13px; box-sizing: border-box;}
.searchWrap .select2-container--default .select2-selection--single { width: 100%; height: 30px; padding: 0 5px; border: 1px solid var(--border-grey); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 13px; color: #777; outline: none; box-sizing: border-box;}
.searchWrap .select2-container--default .select2-selection--single .select2-selection__rendered { height: 28px; line-height: 28px; padding: 0 20px 0 0; font-family: inherit; font-size: 13px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.searchWrap .select2-container--default .select2-selection--single .select2-selection__arrow { width: 20px; height: 28px; top: 0; right: 0;}
.searchWrap .select2-container--default.select2-container--focus .select2-selection--single, .baseTable .select2-container--default.select2-container--open .select2-selection--single { border: 1px solid var(--border-grey); outline: none; box-shadow: none;}
.searchWrap .select2-container--default.select2-container--disabled .select2-selection--single { background: #f5f5f5; color: #999; cursor: not-allowed;}
.searchWrap .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999;}


@media only screen and (max-width:1440px){
	/* login */
	.loginBody {font-size:17px;}
	.loginBody .loginWrap {gap:28px;}
	.loginBody .loginWrap .loginArea, .loginBody .loginWrap .infoArea {padding:28px; border-radius:var(--radius-sm);}

	/* main */
	.mainBody .mainWrap {font-size:17px;}
	.mainBody .mainWrap .topArea {flex:1.3 1 0;}
	.mainBody .mainWrap .topArea, .mainBody .mainWrap .botArea, .mainBody .mainWrap {gap:20px;}
	.mainBody .mainWrap .surveyArea .surveyContent {gap:30px;}
	.mainBody .mainWrap .surveyArea .surveyContent .mainTitle {font-size:1.9em;}
	.mainBody .mainWrap .surveyArea .surveyContent .textWrap {gap:14px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink {padding:0 18px;}
	.mainBody .mainWrap .managerArea .manageWrap .item {gap:10px;}
	.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .iconArea {width:30px; height: 30px;}
	.mainBody .mainWrap .managerArea .manageWrap .item .manageTitle .titleText {flex-direction: row; gap: 10px; align-items: center;}

	/* dashboard */
	.depth02Tab .tabBtn {width:165px;}
	.whiteWrap .titleWrap {min-height:40px;}
	.whiteWrap.tabCont .contArea {padding: 14px 0 0 0;}
	.tableWrap .tableArea {overflow-x:auto; overflow-y:hidden; padding-bottom: 4px;}
	.tableArea .baseTable {font-size:0.75em;min-width:1440px; }

}

@media only screen and (max-width:1280px){
	body.menu-open { overflow: hidden; }

	.headerWrap {min-height:50px; padding:14px 20px;}
	.headerWrap .menuBtn {display:flex; font-size:1.3em; color:#fff; transition: all 0.2s ease-in-out;}
	.headerWrap.active .menuBtn {transform: rotate(90deg);}
	.headerWrap .depthWrap { display:none; position:absolute; top:100%; left:0; width:100vw; height:calc(100vh - var(--header-height, 100px)); flex-flow:column nowrap; align-items:stretch; gap:0; padding:0 20px; background-color:var(--main-navy); overflow-y:auto; z-index:999; }
	.headerWrap.active .depthWrap {display:flex; border-top:1px solid rgba(255,255,255,0.15);  position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100dvh - var(--header-height));  overflow-y: auto;  overscroll-behavior: contain;  background: var(--main-navy);  z-index: 1000;}
	.headerWrap .depthWrap .depthBtn { width:100%; padding:16px 0; font-size:1em; border-bottom:1px solid rgba(255,255,255,0.15); position: relative;}
	.headerWrap .depthWrap .depthBtn.active::after {content:'\f105'; font-family: 'fontAwesome'; width:24px; height:24px; font-size:1.2em; display: inline-flex; align-items: center; justify-content: center; position: absolute; top:50%; right:0; transform: translate(0,-50%); background: none;}
	.headerWrap .depthWrap .depthBtn::after { background: none;}
	.headerWrap .leftArea {gap:10px 20px;}

	/* main */
	.mainBody .boardHeader {padding: 0 10px; height: 44px;}
	.mainBody .mainWrap .boardArea .boardContent {height: calc(100% - 44px);}

	.mainBody .mainWrap {font-size:16px;}
	.mainBody .mainWrap .topArea {flex:1 1 0;}
	.mainBody .mainWrap .managerArea .manageWrap .item {padding:8px; border-radius: var(--radius-xs);}
	.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo {padding-top: 10px;}
	.mainBody .mainWrap .managerArea .manageWrap.odd .item {width: calc( ( 100% - 12px ) / 2 );}

	.mainBody .mainWrap .secRight, .mainBody .mainWrap .secLeft {border-radius: var(--radius-sm);}
	.mainBody .mainWrap .surveyArea .surveyContent {gap:20px;}
	.mainBody .mainWrap .surveyArea .surveyContent .mainTitle {font-size: 1.9em;}
	.mainBody .mainWrap .surveyArea .surveyContent .textWrap {gap:10px;}
	.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn {padding:12px;}
	.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn .iconArea {width:12px; height: 12px;}
	.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn, .mainBody .mainWrap .surveyArea .surveyContent .linkWrap .linkBtn {border-radius: var(--radius-xs);}
	.mainBody .mainWrap .referenceArea .referWrap, .mainBody .mainWrap .managerArea .manageWrap {padding: 10px; gap:10px; }

	/* dashboard */
	.dashSec {margin-bottom: 1em;}
	.depth02Tab {overflow-x:auto;}
	.depth02Tab .tabBtn {width:160px;}
	.whiteWrap {padding:14px;}
	.whiteWrap .titleWrap {gap:12px; min-height: unset;}
	.whiteWrap .titleWrap .leftArea {gap:12px;}
	.whiteWrap .titleWrap .rightArea {gap:6px;}
	.whiteWrap .titleWrap .title {font-size:0.95em;}
	.dashSec .dashTabWrap .tabBtn {font-size:1.05em;}
	.dashSec .dashContWrap .tabContent.specific .tabBox .title {font-size:0.85em;}
	.dashSec .dashContWrap .tabContent.full .tabBox {gap:30px; padding:10px 14px;}
	.dashSec .dashContWrap .tabContent.full .tabBox .titleArea .title {font-size:1em;}
	.foldWrap.isOpen .titleWrap { padding-bottom: 12px;}
	.tableArea .baseTable {font-size:0.75em;}
}


@media only screen and (max-width:1024px){
	.headerWrap {font-size:14px;}

	/* login */
	.loginBody .loginWrap {max-width:90vw; width:100%; }
	.loginBody .loginWrap .infoArea .contactArea .contactItem::after {display: none;}

	/* main */
	.mainBody .mainWrap {font-size:14px;}
	.mainBody .mainWrap .surveyArea .surveyContent {gap:14px;}
	.mainBody .mainWrap .surveyArea .surveyContent .surveyBtn {padding: 8px;}
	.mainBody .mainWrap .surveyArea .surveyContent .linkWrap .linkBtn {padding:4px;}
	.mainBody .mainWrap .managerArea .manageWrap .item .managerInfo .infoItem .infoText {  word-break: break-all;}

	.mainBody .boardHeader .titleArea .iconArea {width:16px; height:16px;}

	/* dashboard */
	.depth02Tab .tabBtn {width:150px;}
	.baseTable {font-size:0.62em;}
	.fullWidth .baseTable td { word-break: break-all; }
	.dot {width:6px; height:6px;}

	.dashBody .dashWrap {font-size:15px;}
	.dashSec .dashTabWrap {gap:14px;}
	.dashSec .dashContWrap .tabContent.full .tabBox {flex-direction: column; align-items: flex-start; gap: 10px;}
	.dashSec .dashContWrap .tabContent.full .tabBox .line {display: none;}
	.dashSec .dashContWrap .tabContent.full .tabBox .titleArea {width:100%;}
	.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea {flex:unset; width:100%;}
	.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab {gap:14px; width: calc( ( 100% - 50px ) / 6 ); font-size:14px;}

	/* search Area */
	.searchWrap.unit5 .searchBox, .searchWrap.unit6 .searchBox, .searchWrap.unit7 .searchBox,.searchWrap.unit8 .searchBox, .searchWrap.unit9 .searchBox, .searchWrap.unit10 .searchBox  {flex:1 1 calc((100% - 3em) / 4);}

	.mainBody .mainWrap .managerArea .manageWrap2 .tableArea {padding:10px;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable { font-size:12px;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable, .mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody {display:block;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable colgroup {display:none;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody {display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:10px;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody tr {display:flex; flex-flow: row wrap;  align-items: center;  justify-content: flex-start; padding:14px; border:1px solid var(--border-grey); border-radius:var(--radius-sm); background:#FAFAFA; gap:6px;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody tr:hover td {background:unset;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable td {display:inline-block; height:auto; padding:0; border:0;  overflow-wrap:anywhere;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable .sort {align-self:flex-start; width:fit-content;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable .name {font-size:1.1em; line-height:1.4;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable .depart {padding-top:6px; border-top:1px solid var(--greyLight); }
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable td:not(.sort):not(.name) {display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; align-items:baseline; justify-content:start; text-align:left; width: 100%;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable td:not(.sort):not(.name)::before {content:attr(data-label); color:var(--greyDark); font-size:0.9em; font-weight:600; text-align:center;}
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable .cate {width:auto; }
}


@media only screen and (max-width:890px){
	.topBtn { font-size: 1.2em; width:40px; height:40px; border-radius:6px; } 
	.mainBody {height: auto; min-height: 100vh;}
	.mainBody .mainWrap {}
	.mainBody .mainWrap .topArea, .mainBody .mainWrap .botArea {flex-flow: column wrap; min-height: 0; flex:unset;}
	.mainBody .mainWrap .secLeft, .mainBody .mainWrap .secRight {width: 100%;}
	
	.mainBody .mainWrap .surveyArea {width:100%;}
	.mainBody .mainWrap .surveyArea .surveyContent {padding:3em 1em;}
	.mainBody .mainWrap .surveyArea.noData .surveyContent {gap:10px;}
	.mainBody .mainWrap .surveyArea.noData .surveyContent .icon img {max-height: 80px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent:has(.noData) {background-color: #fafafa;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .noData {padding:2em;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .icon img {max-height: 50px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .text.accent {font-size:1em;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .text {font-size:0.8em;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent.active {min-height:177px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink {padding:10px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink:nth-child(6) {border-bottom:none;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardTitle {gap:6px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .boardLink .boardTitle .bullet {width: 4px;  height: 4px;}
	.mainBody .mainWrap .boardArea .tabArea {gap:30px;}
	.mainBody .mainWrap .boardArea .tabArea .tabBtn::after {right:-15px;}
	.mainBody .mainWrap .referenceArea {width:100%;}
	.mainBody .mainWrap .referenceArea .referWrap {height:200px; overflow-y: scroll; flex: unset;}
	.mainBody .mainWrap .referenceArea .referWrap .referArea {gap:6px;}
	.mainBody .mainWrap .referenceArea .referWrap .referArea .item {padding-left:14px;}
	.mainBody .mainWrap .referenceArea .referWrap .referArea .item::before {  top: 7px;  width: 4px;  height: 4px;}
	
	.dashSec .dashTabWrap:has(.rightArea) {flex-direction: column; align-items: flex-start; gap: 10px;}
	.dashSec .dashTabWrap .rightArea {justify-content: flex-start; gap: 10px;}
	.dashSec .dashContWrap .tabContent.specific {gap:14px;}
	.dashSec .dashContWrap .tabContent.specific .tabBox {padding:10px; width: calc((100% - 70px) / 6);}
	.dashSec .dashContWrap .tabContent.specific .tabBox .title {font-size:0.8em; line-height:1.2; word-break:keep-all;}
	.dashSec .dashContWrap .tabContent.specific .tabBox.active .state {flex-direction:column; border-radius: 4px;}
	.dashSec .dashContWrap .tabContent.specific .tabBox.active .state .badge {border-radius: 2px 2px 0 0; }
	.dashSec .dashContWrap .tabContent.specific .tabBox.active .state .number {padding:2px 0;}

	.tableArea .baseTable {min-width:890px;}
	.tableArea.fullWidth .baseTable {min-width:890px;}

	.mainBody .mainWrap .managerArea .manageWrap2 {flex:unset;}
	.mainBody .mainWrap .managerArea .manageWrap2 .tableArea {flex:unset; max-height:250px;}
}

@media only screen and (max-width:768px){
	.headerWrap {flex-direction: column; gap: 12px;}
	.headerWrap .leftArea {flex-shrink: 0; flex-flow: row nowrap; width:100%; justify-content:space-between;}
	.headerWrap .rightArea {display: none;}
	.headerWrap.active .rightArea {display: flex; width:100%; justify-content:space-between;}
	.headerWrap .userArea::after {display: none;}

	.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab {width: calc((100% - 30px) / 4);}

	/* search Area */
	.searchWrap.unit4 .searchBox, .searchWrap.unit5 .searchBox, .searchWrap.unit6 .searchBox, .searchWrap.unit7 .searchBox,.searchWrap.unit8 .searchBox, .searchWrap.unit9 .searchBox, .searchWrap.unit10 .searchBox  {flex:1 1 calc((100% - 2em) / 3);}

}


@media only screen and (max-width:550px){
	.topBtn { font-size: 1em; width:32px; height:32px; border-radius:4px; } 

	.headerWrap {padding: 14px 2.5vw;}
	.headerWrap .rightArea {flex-flow: row nowrap;}
	.headerWrap .depthWrap {padding:0 2.5vw;}
	.headerWrap .btnWrap .btn {flex-shrink: 0;}
	.headerWrap .userArea {word-break: keep-all;}
	.baseBtn {height: 24px; min-width:24px;  padding: 0 8px; gap:4px; font-size:11.5px;}
	.baseBtn i {font-size:8px;}

	.loginBody .loginWrap {padding: 10vh 0;}
	.loginBody .loginWrap .titleArea .mainTitle {font-size:1.7em;}
	.loginBody .loginWrap .loginArea, .loginBody .loginWrap .infoArea {padding:20px;}

	.dashMainTitle {font-size:1.25em; word-break: keep-all;}
	.mainBody .boardHeader .titleArea {gap:6px;}
	.mainBody .boardHeader .moreBtn .icon {width:18px; height:18px;}
	.mainBody .mainWrap {padding:14px;}
	.mainBody .mainWrap .boardArea .tabArea {gap:14px;}
	.mainBody .mainWrap .boardArea .tabArea .tabBtn::after {right: -8px; height:8px;}
	.mainBody .mainWrap .boardArea .boardContent .tabContent .noData .icon img {max-height: 30px;}
	.mainBody .mainWrap .managerArea .manageWrap .item, .mainBody .mainWrap .managerArea .manageWrap.odd .item {width:100%;}

	.dashBody .dashWrap {padding:20px 2.5vw;}
	.dashSec .dashTabWrap .rightArea {gap: 4px 10px;}
	.dashSec .dashContWrap .tabContent .badge {font-size:10px;}
	.dashSec .dashContWrap .tabContent.full .tabBox {padding:10px;}
	.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea {gap:6px ;}
	.dashSec .dashContWrap .tabContent.full .tabBox .fullTabArea .fullTab {width: calc((100% - 6px) / 2); padding:8px;}

	.dashSec .dashContWrap .tabContent.specific {gap:10px;}
	.dashSec .dashContWrap .tabContent.specific .tabBox {width: calc((100% - 20px) / 3);}

	.whiteWrap.tabCont .titleWrap:has(.rightArea) {flex-direction: column; align-items: flex-start; gap: 10px;}

	.depth02Tab .tabBtn {width:auto;}

	.subTitleWrap {flex-direction: column; align-items: flex-start; gap: 6px;}
	.subTitleWrap:has(.rightArea) {flex-direction: column; align-items: flex-start; gap: 10px;}
	
	/* search Area */
	.searchWrap.unit2 .searchBox, .searchWrap.unit3 .searchBox, .searchWrap.unit4 .searchBox, .searchWrap.unit5 .searchBox, .searchWrap.unit6 .searchBox, .searchWrap.unit7 .searchBox,.searchWrap.unit8 .searchBox, .searchWrap.unit9 .searchBox, .searchWrap.unit10 .searchBox  {flex:unset; width:100%;}

	.faqWrap .faqBox .alpha {width:20px; height:20px;}
	.faqWrap .faqBox .aText .attachBox .icon {width:20px;}
	
	.mainBody .mainWrap .managerArea .manageWrap2 .listTable tbody tr {flex-direction:row; align-items: center;}
}

@media only screen and (max-width:425px){
	.headerWrap .btnWrap {gap:10px;}
	.headerWrap .btnWrap .btn {height:24px; padding:2px 4px; font-size:11px;}
}


@media only screen and (max-width:375px){
	.mainBody .boardHeader {flex-flow: row wrap;}
	.mainBody .boardHeader {height: auto; min-height: 40px; padding: 10px; gap:4px 8px;}
	.mainBody .mainWrap .managerArea .manageWrap .item {width:100%;}
}

/* 2026.10.21 로딩 배경 색 변경 */
.loadingoverlay { background-color: rgba(0, 0, 0, 0.4); }