/* common */
html, body {background:#F9FAFC; min-width:1500px;}
.disabled:not(.btn) {background:#F1F1F1 !important; border-color:#C5C5C6 !important;}
.error {border-color:#F65A3A !important;}
.radio-box.error {border: 1px solid #F65A3A !important;}
.check-box.error {border: 1px solid #F65A3A !important;}

/* logo-box */
.logo-box img {display:block; margin:0 auto;}

/* check-box */
.check-box {position:relative;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; position:relative; padding:0 0 0 28px;}
.check-box label:before {position:absolute; left:0; top:0; display:inline-block; content:""; width:20px; height:20px; margin:0 8px 0 0; background:url('../images/icon_check.svg') no-repeat center / cover;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_check_on.svg');}
.check-box.single label {font-size:0; justify-content:center; padding:0;}
.check-box.single label:before {margin:0; position:static;}
.check-group-box {display:flex; flex-wrap:wrap; align-items:center; gap:20px;}

/* check-list-box */
.check-list-box {max-width:380px;}
.check-list-box ul {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.check-list-box ul li {width:calc(33.33% - 10px); margin:0 5px 10px; position:relative;}
.check-list-box ul li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-list-box ul li label {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:34px; border-radius:6px; border:1px solid #c5c5c6; font-size:14px; text-align:center;}
.check-list-box ul li input:checked ~ label {border-color:var(--color-active); color:var(--color-active2);}
.check-list-box.full {max-width:100%;}
.check-list-box.full ul li {width:calc(20% - 10px);}

/* radio-box */
.radio-box {position:relative;}
.radio-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.radio-box label {display:flex; flex-wrap:wrap; align-items:center;}
.radio-box label:before {display:inline-block; content:""; width:20px; height:20px; margin:0 8px 0 0; background:url('../images/icon_radio.svg') no-repeat center / cover;}
.radio-box input:checked ~ label:before {background-image:url('../images/icon_radio_on.svg');}
.radio-box.single label {justify-content:center; font-size:0;}
.radio-box.single label:before {margin:0;}
.radio-group-box {display:flex; flex-wrap:wrap; align-items:center; gap:20px;}

/* switch-box */
.switch-box {display:flex; flex-wrap:wrap; align-items:center;}
.switch-box b {font-size:16px; margin:0 15px 0 0;}
.switch-box .inner {position:relative;}
.switch-box .inner input {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.switch-box .inner label {position:relative; display:block; width:32px; height:18.39px; border-radius:50px; transition:all ease 0.5s; background:#C5C5C6; font-size:0;}
.switch-box .inner label:before {position:absolute; left:1px; top:1px; transition:all ease 0.3s; width:16px; height:16px; border-radius:50%; background:#fff; border-radius:50%; content:"";}
.switch-box .inner input:checked ~ label {background:var(--color-active);}
.switch-box .inner input:checked ~ label:before {left:15px;}

/* input-box */
.input-box {position:relative; display:flex; flex-wrap:wrap; align-items:center; border:1px solid #d1d5dc; border-radius:6px; background:#fff; padding:0 10px; gap:10px;}
.input-box input {flex:1; min-width:0; height:38px; background:none; font-size:14px;}
.input-box input::placeholder {color:#939393;}
.input-box time {font-size:14px; color:#F65A3A;}
.input-box .delete {width:24px; height:24px; font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover; display:none;}
.input-box .search {width:16px; height:16px; font-size:0; background:url('../images/icon_search.svg') no-repeat center / cover;}
.input-box .pw-toggle {width:24px; height:24px; font-size:0; background:url('../images/icon_eye.svg') no-repeat center / cover;}
.input-box .tooltip-box {position:absolute; top:50%; transform:translateY(-50%); right:-28px;}
.input-box.large {border-radius:14px; padding:0 16px; gap:12px;}
.input-box.large input {height:53px; font-size:16px;}
.input-box.pw .pw-toggle {background-image:url('../images/icon_eye_off.svg');}
.input-box.press .delete {display:block;}
.input-box.has-value .delete {display:block;}
.input-box input[readonly] + .delete {display:none !important;}

.input-box input[type=date]::-webkit-calendar-picker-indicator,
.input-box input[type=datetime-local]::-webkit-calendar-picker-indicator,
.input-box input[type=time]::-webkit-calendar-picker-indicator,
.input-box input[type=month]::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;}
.input-box input[type=date]:before,
.input-box input[type=datetime-local]:before,
.input-box input[type=time]:before,
.input-box input[type=month]:before {position:absolute; border-radius:6px; left:0; top:0; content:attr(data-placeholder); background:#fff; padding:0 10px; width:100%; height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-gray-700); display:flex; flex-wrap:wrap; align-items:center; box-sizing:border-box;}
.input-box input[type=date]:after,
.input-box input[type=datetime-local]:after,
.input-box input[type=time]:after,
.input-box input[type=month]:after {position:absolute; right:10px; top:50%; transform:translateY(-50%); content:""; width:24px; height:24px; background:url('../images/icon_date.svg') no-repeat center / cover;}
.input-box input[type=date]:focus:before,
.input-box input[type=datetime-local]:focus:before,
.input-box input[type=time]:focus:before,
.input-box input[type=month]:focus:before {opacity:0;}
.input-box.has-value input[type=date]:before,
.input-box.has-value input[type=datetime-local]:before,
.input-box.has-value input[type=time]:before,
.input-box.has-value input[type=month]:before {display:none;}
.input-box.disabled input:before {background:#F1F1F1 !important;}

/* input-unit-box */
.input-unit-box em {font-size:14px; font-weight:500;}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:330px; border:1px solid #d1d5dc; border-radius:6px; padding:10px; font-size:14px;}
.textarea-box textarea::placeholder {color:#939393;}
.textarea-box textarea:read-only {background:#F9FAFC; height:150px;}
.textarea-box.md textarea {height:240px;}

/* select-box */
.select-box {position:relative; display:flex; flex-wrap:wrap; align-items:center; border:1px solid #d1d5dc; border-radius:6px; background:#fff; gap:10px;}
.select-box select {flex:1; min-width:0; height:38px; font-size:14px; padding:0 32px 0 10px; background:url('../images/icon_select.svg') no-repeat calc(100% - 10px) center / 16px; color:#939393;}
.select-box.has-value select {color:#000;}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;}
.button-box .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:38px; border-radius:6px; padding:0 16px; font-size:14px;}
.button-box .btn-sm {height:28px; font-size:14px; padding:0 8px;}
.button-box .btn-sm:before {width:14px !important; height:14px !important; margin:0 3px 0 0 !important;}
.button-box .btn-md {height:40px; border-radius:6px; font-size:16px; min-width:120px;}
.button-box .btn-lg {height:56px; border-radius:8px; font-weight:500; font-size:16px;}
.button-box .btn-full {flex:1; min-width:0; padding:0;}
.button-box .btn-shadow {box-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);}
.button-box .btn-navy {background:#5162B6; color:#fff;}
.button-box .btn-lightnavy {background:#9CADD8; color:#fff;}
.button-box .btn-active {color:#fff;}
.button-box .btn-active2 {color:#fff;}
.button-box .btn-outline {border:1px solid #878EB3; color:#878EB3;}
.button-box .btn-outline-full {background:#C6D2FF; color:#fff;}
.button-box .btn-white.ft-active {color:var(--color-active) !important;}
.button-box .btn-white-outline {border:1px solid #D1D5DC !important; color:#151515 !important;}
.button-box .btn.disabled {background:#C5C5C6 !important;}
.button-box .btn-upload:before {display:inline-block; content:""; width:15px; height:15px; margin:0 10px 0 0; background:url('../images/icon_upload.svg') no-repeat center / cover;}
.button-box .btn-add:before {display:inline-block; content:""; width:12px; height:12px; margin:0 10px 0 0; background:url('../images/icon_btn_add.svg') no-repeat center / cover;}
.button-box .btn-submit:before {display:inline-block; content:""; width:19px; height:19px; margin:0 10px 0 0; background:url('../images/icon_btn_submit.svg') no-repeat center / cover;}
.button-box .btn-print:before {display:inline-block; content:""; width:17px; height:16px; margin:0 10px 0 0; background:url('../images/icon_btn_print.svg') no-repeat center / cover;}

/* badge-box */
.badge-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.badge-box * {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:25px; border-radius:5px; font-size:14px; padding:0 8px;}
.badge-box *.green {border:1px solid #00BB70; color:#00BB70; background:#E4FFE3;}
.badge-box *.blue {border:1px solid #2C96E2; color:#2C96E2; background:#E7FDFF;}
.badge-box *.gray {border:1px solid #9D9D9D; background:#F8F8F8;}

/* icon-box */
.icon {display:block; width:20px; height:20px; font-size:0; background-size:cover; background-position:center;}
.icon-email {background-image:url('../images/icon_email.svg');}
.icon-password {background-image:url('../images/icon_password.svg');}
.icon-calendar {background-image:url('../images/icon_date.svg');}
.icon-time {background-image:url('../images/icon_time.svg');}

/* message-box */
.message-box {margin:5px 0 0;}
.message-box p {font-size:14px; word-break:keep-all; position:relative; padding:0 0 0 26px;}
.message-box p.error-message {color:#F65A3A; background:url('../images/icon_error.svg') no-repeat left 1px / 20px;}
.message-box p.alert-message {color:#405FF4; background:url('../images/icon_alert.svg') no-repeat left 1px / 20px;}
.message-box p.alert-message.gray {color:#AEB8C2; background:url('../images/icon_alert_gray.svg') no-repeat left 1px / 20px;}

/* login-box */
.login-box.login-01 {height:100vh; background:url('../images/bg_login_01.png') no-repeat center / cover; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-box.login-01 .box {width:550px; margin:0 auto; background:#fff; border-radius:20px; box-shadow:0 0 8px 3px rgba(56,73,152,0.1); padding:35px 100px;}
.login-box.login-01 .box h2 {font-size:30px; font-weight:600; text-align:center; color:#334151; margin:0 0 30px;}
.login-box.login-02 {height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-box.login-02 .box {width:1295px; margin:0 auto; display:flex; flex-wrap:wrap; border-radius:30px; overflow:hidden; box-shadow:0 0 32px 6px rgba(0,0,0,0.12); position:relative;}
.login-box.login-02 .box:before {display:block; content:""; flex:1; min-width:0; background:linear-gradient(to bottom right, #5B68FF, #3379ED);}
.login-box.login-02 .box:after {width:552px; height:430px; content:""; position:absolute; left:-50px; top:50%; transform:translateY(-50%); background:url('../images/bg_login_02.png') no-repeat center / cover;}
.login-box.login-02 .box .login-content {padding:100px 0; flex:1; min-width:0;}
.login-box.login-02 .box .login-content .content-inner {max-width:448px; margin:0 auto;}
.login-box.login-02 .box .login-content .content-inner .logo-box img {margin:0;}
.login-box.login-02 .box .login-content .content-inner h2 {font-size:36px; font-weight:700;}
.login-box.login-02 .box .login-content .content-inner h2 small {display:block; font-size:17px; color:#4A5565;}
.login-box.login-02 .box .login-content .content-inner .tit {display:block; font-size:16px; font-weight:600; margin:0 0 5px;}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:50%; top:0; transform:translateX(-50%); min-width:1500px; width:100%; height:100%; background:rgba(0,0,0,0.5); transition:all ease 0.5s; z-index:9999;}
.modal-box .box.alert {pointer-events:none; opacity:0; width:360px; transition:all ease 0.5s;  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); background:#fff; border-radius:10px; box-shadow:3px 4px 12px rgba(0,0,0,0.25); padding:32px 20px;}
.modal-box .box.alert .modal-head {position:absolute; right:9px; top:9px;}
.modal-box .box.alert .modal-head .modal-close {width:30px; height:30px; display:block; font-size:0; background:url('../images/icon_modal_close.svg') no-repeat center / cover;}
.modal-box .box.alert .modal-body .modal-alert-text:before {display:block; margin:0 auto 10px; content:""; width:46px; height:46px; background-size:cover; background-position:center;}
.modal-box .box.alert .modal-body .modal-alert-text .tit {font-size:16px; font-weight:500; text-align:center; word-break:keep-all;}
.modal-box .box.alert .modal-body .modal-alert-text.required:before {background-image:url('../images/icon_alert_required.png');}
.modal-box .box.alert .modal-body .modal-alert-text.save:before {background-image:url('../images/icon_alert_save.png');}
.modal-box .box.alert .modal-body .modal-alert-text.delete:before {background-image:url('../images/icon_alert_delete.png');}
.modal-box .box.alert .modal-body .modal-alert-text.message:before {background-image:url('../images/icon_alert_message.png');}
.modal-box .box.alert .modal-body .button-box {gap:14px; margin:24px 0 0;}
.modal-box .box.alert.large {width:600px; padding-bottom:60px;}
.modal-box .box.alert.large .modal-head {right:25px; top:25px;}
.modal-box .box.alert.large .modal-head .modal-close {width:24px; height:24px; background-image:url('../images/icon_modal_close_b.svg');}
.modal-box .box.default {width:600px; display:flex; flex-direction:column; overflow:hidden; position:absolute; padding:0 0 26px; left:50%; top:45%; max-height:90%; transform:translate(-50%,-50%); background:#fff; border-radius:10px; box-shadow:3px 4px 12px rgba(0,0,0,0.25); transition:all ease 0.5s;}
.modal-box .box.default .modal-head {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative;}
.modal-box .box.default .modal-head h2 {padding:20px; font-size:24px; font-weight:500; word-break:keep-all;}
.modal-box .box.default .modal-head .modal-close {position:absolute; right:20px; top:50%; transform:translateY(-50%); width:24px; height:24px; background:url('../images/icon_modal_close_b.svg') no-repeat center / cover; font-size:0;}
.modal-box .box.default .modal-head.space {justify-content:space-between; border-bottom:1px solid #405FF4; margin:0 0 30px;}
.modal-box .box.default .modal-body {position:relative; width:100%; height:100%; padding:0 20px 20px; overflow-y:auto;}
.modal-box .box.default .modal-foot {width:100%; padding:0 20px;}
.modal-box .box.default .modal-foot .button-box .btn {width:120px; height:40px; font-size:16px;}
.modal-box .box.default .modal-foot.border .button-box {border-top:1px solid #C7D5E2; padding:35px 0 0; margin:15px 0 0;}
.modal-box .box.default.large {width:860px;}
.modal-box .box.default.xlarge {width:1000px;}
.modal-box .box.default.full {width:calc(100% - 80px);}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box.alert {pointer-events:inherit; opacity:1; top:50%;}
.modal-box.fixed .box.default {pointer-events:inherit; opacity:1; top:50%;}

/* tooltip-box */
.tooltip-box {position:relative;}
.tooltip-box .tooltip-btn {display:block; font-size:0; width:24px; height:24px; background:url('../images/icon_tooltip.svg') no-repeat center / cover;}
.tooltip-box .tooltip-inner {box-shadow:3px 4px 12px rgba(0,0,0,0.25); pointer-events:none; opacity:0; transition:all ease 0.5s; z-index:10; content:attr(data-tooltip); position:absolute; background:#fff;; border-radius:6px; padding:15px; white-space:nowrap;}
.tooltip-box .tooltip-inner strong {display:block; font-size:16px; font-weight:500; margin:0 0 5px;}
.tooltip-box .tooltip-inner p {font-size:15px; word-break:keep-all;}
.tooltip-box:hover {z-index:20;}
.tooltip-box:hover .tooltip-inner {pointer-events:inherit; opacity:1;}
.tooltip-box:hover .tooltip-inner:before {pointer-events:inherit; opacity:1;}
.tooltip-box.tooltip-top .tooltip-inner {left:50%; transform:translateX(-50%); bottom:calc(100% + 8px);}
.tooltip-box.tooltip-top .tooltip-inner:before {left:50%; transform:translateX(-50%); top:calc(100% - 2.5px); border-color:var(--color-black) transparent transparent transparent;}
.tooltip-box.tooltip-bottom .tooltip-inner {left:50%; transform:translateX(-50%); top:calc(100% + 8px);}
.tooltip-box.tooltip-bottom .tooltip-inner:before {left:50%; transform:translateX(-50%); top:calc(0% - 8px); border-color:transparent transparent var(--color-black) transparent;}
.tooltip-box.tooltip-left .tooltip-inner {right:calc(100% + 8px); top:50%; transform:translateY(-50%);}
.tooltip-box.tooltip-left .tooltip-inner:before {left:calc(100% - 1.5px); border-color:transparent transparent transparent var(--color-black);}
.tooltip-box.tooltip-right .tooltip-inner {left:calc(100% + 8px); top:50%; transform:translateY(-50%);}
.tooltip-box.tooltip-right .tooltip-inner:before {right:calc(100% - 1.5px); left:auto; transform:translateY(-50%); border-color:transparent var(--color-black) transparent transparent;}
.tooltip-box.focus {z-index:20;}
.tooltip-box.focus .tooltip-inner {pointer-events:inherit; opacity:1;}
.tooltip-box.focus .tooltip-inner:before {pointer-events:inherit; opacity:1;}
.tooltip-box.active {z-index:19;}
.tooltip-box.active .tooltip-inner {pointer-events:inherit; opacity:1;}
.tooltip-box.active .tooltip-inner:before {pointer-events:inherit; opacity:1;}

/* tab-box */
.tab-box.tab1 {border-bottom:1px solid rgba(0,0,0,0.1); margin:0 0 24px;}
.tab-box.tab1 ul {display:flex; flex-wrap:wrap; align-items:center;}
.tab-box.tab1 ul li {flex:1; min-width:0;}
.tab-box.tab1 ul li .tab {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:47px; font-weight:500; color:#99A1AF; width:100%;}
.tab-box.tab1 ul li .tab.active {font-weight:600; color:#151515; position:relative;}
.tab-box.tab1 ul li .tab.active:after {position:absolute; content:""; left:0; bottom:0; width:100%; height:2px; background:#151515;}

/* toggle-radio-box */
.toggle-radio-box > ul > li {margin:0 0 15px;}
.toggle-radio-box > ul > li:last-of-type {margin:0;}
.toggle-radio-box > ul > li .toggle {display:flex; flex-wrap:wrap; align-items:center; width:100%; font-size:14px; font-weight:500;}
.toggle-radio-box > ul > li .toggle:before {display:inline-block; content:""; width:18px; height:18px; margin:0 10px 0 0; background:url('../images/icon_radio.svg') no-repeat center / cover;}
.toggle-radio-box > ul > li .toggle-content {padding:15px 0 15px 28px; display:none;}
.toggle-radio-box > ul > li.active .toggle:before {background-image:url('../images/icon_radio_on.svg');}
.toggle-radio-box > ul > li.active .toggle-content {display:block;}

/* find-box */
.find-box {background:#F9FAFC; border:1px solid #D1D5DC; border-radius:6px; padding:10px;}
.find-box p {font-size:14px; text-align:center;}

/* title-box */
.title-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid #D8E4EE; padding:0 0 16px; margin:0 0 24px;}
.title-box h3 {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:500;}
.title-box h3:before {display:inline-block; content:""; width:4px; height:4px; background:#151515; border-radius:50%; margin:0 10px 0 0;}

/* write-box */
.write-box {width:50%;}
.write-box > ul > li {display:flex; flex-wrap:wrap; align-items:center; padding:7px 0;}
.write-box > ul > li .tit {width:146px; margin:0 22px 0 0; display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:500;}
.write-box > ul > li .tit.req:after {display:inline-block; content:"*"; font-size:16px; font-weight:500; color:#F65A3A; margin:0 0 0 5px;}
.write-box > ul > li .cont {flex:1; min-width:0;}
.write-box > ul > li .cont > p {font-size:18px; padding:7px 0;}
.write-box > ul > li .cont > p b {font-size:18px;}
.write-box > ul > li .cont > img.thumb {max-width:200px;}
.write-box > ul > li.border {border-bottom:1px solid #D8E4EE; margin:0 0 10px; padding:0 0 10px;}

/* button-control-box */
.button-control-box {border-top:1px solid #D8E4EE; padding:24px 15px 0; margin:24px 0 0;}
.button-control-box .button-box {justify-content:flex-start;}
.button-control-box .button-box .btn {width:120px; padding:0; font-size:16px; height:40px;}

/* profile-box */
.profile-box {position:relative; width:100px;}
.profile-box .profile-image {width:100%; height:100px; border:1px solid #C7D5E2; border-radius:50%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.profile-box .profile-image img {width:82px; height:82px; border-radius:50%; object-fit:cover;}
.profile-box .profile-file {position:absolute; right:0; bottom:0; width:22px; height:22px;}
.profile-box .profile-file a {display:block; width:100%; height:100%; font-size:0; background:url('../images/icon_camera.svg') no-repeat center / cover; cursor:pointer;}


/* logo-box */
.logo-box {position:relative; width:200px;}
.logo-box .logo-image {width:100%; height:100px; border:1px solid #C7D5E2;  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.logo-box .logo-image img {width:200px; height:100px; object-fit:cover;}
.logo-box .logo-file {position:absolute; right:-10px; bottom:-10px; width:22px; height:22px;}
.logo-box .logo-file a {display:block; width:100%; height:100%; font-size:0; background:url('../images/icon_camera.svg') no-repeat center / cover; cursor:pointer;}


/* file-upload-box */
.file-upload-box .file-btn {display:flex; flex-wrap:wrap; align-items:center; align-content:center; position:relative;}
.file-upload-box .file-btn input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.file-upload-box .file-btn label {display:flex; flex-wrap:wrap; align-items:center; height:38px; border-radius:6px; padding:0 12px; font-size:16px; color:#fff; background:#5162B6;}
.file-upload-box .file-btn label:before {display:inline-block; content:""; width:15px; height:15px; margin:0 10px 0 0; background:url('../images/icon_upload.svg') no-repeat center / cover;}
.file-upload-box .file-inner {margin:10px 0 0; border:1px dashed #AEB8C2; border-radius:6px; padding:15px 15px 25px; max-width:550px;}
.file-upload-box .file-inner p {font-size:14px; text-align:center; color:#AEB8C2;}
.file-upload-box .file-inner p:before {display:block; content:""; width:45px; height:45px; margin:0 auto; background:url('../images/icon_file_uploade.svg') no-repeat center / cover;}
.file-upload-box .file-image {width:105px; height:105px; border-radius:6px; padding:10px; border:1px dashed #AEB8C2; position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.file-upload-box .file-image .delete {position:absolute; right:0; top:0; width:15px; height:15px; background:url('../images/icon_file_delete.svg') no-repeat center / cover; font-size:0; z-index:3;}
.file-upload-box .file-image img {max-width:100%; max-height:100%; object-fit:cover; display:block; margin:0 auto;}
.file-upload-box .file-inner ul li {display:flex; align-items:center; gap:10px;}
.file-upload-box .file-inner ul li p span {font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#155DFC;}
.file-upload-box .file-inner ul li p:before {display:none;}
.file-upload-box .file-inner ul li .delete {width:15px; height:15px; background:url('../images/icon_file_delete.svg') no-repeat center / cover; font-size:0; z-index:3; display:block;}

/* list-top-box */
.list-top-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 15px;}
.list-top-box .list-top-inner {display:flex; flex-wrap:wrap; align-items:center; gap:15px;}
.list-top-box .list-top-inner p {font-size:16px; font-weight:500;}
.list-top-box .list-top-inner p b {font-size:16px; font-weight:600; color:var(--color-active);}

/* paging-box */
.paging-box {margin:24px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:36px; height:40px; font-size:16px;}
.paging-box ul li.active a {color:var(--color-active); position:relative; font-weight:600;}
.paging-box ul li.active a:after {position:absolute; left:0; bottom:0; content:""; width:100%; height:1px; background:var(--color-active);}
.paging-box ul li.pg.prev a {display:block; font-size:0; background:url('../images/icon_paging_prev.svg') no-repeat center / 24px;}
.paging-box ul li.pg.next a {display:block; font-size:0; background:url('../images/icon_paging_next.svg') no-repeat center / 24px;}

/* board-list-box */
.board-list-box table {border-collapse:collapse;}
.board-list-box table thead tr th {font-size:16px; font-weight:600; background:#F5F8FF; border:1px solid #D8E4EE; padding:10px;}
.board-list-box table tbody tr td {border:1px solid #D8E4EE; font-size:16px; padding:10px;}
.board-list-box table tbody tr td a:not(.btn) {font-size:16px; text-decoration:underline;}
.board-list-box table tbody tr td a.subject {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left;}
.board-list-box table tbody tr td a.subject b {font-size:16px; color:#F65A3A;}

/* board-view-box */
.board-view-box .view-head {border-bottom:1px solid #D8E4EE; padding:0 0 15px; margin:0 0 15px;}
.board-view-box .view-head ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:20px;}
.board-view-box .view-head ul li {font-size:16px; font-weight:500;}
.board-view-box .view-foot {margin:24px 0 0;}
.board-view-box .view-foot > ul > li {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #D8E4EE; padding:14px 0;}
.board-view-box .view-foot > ul > li > b {display:flex; flex-wrap:wrap; align-items:center; width:190px; font-size:16px; font-weight:500;}
.board-view-box .view-foot > ul > li > b:before {display:inline-block; content:""; width:20px; height:20px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.board-view-box .view-foot > ul > li > span {flex:1; min-width:0; font-size:16px; color:#999;}
.board-view-box .view-foot > ul > li > a {display:flex; align-items:center; flex:1; min-width:0; gap:5px;}
.board-view-box .view-foot > ul > li > a b {font-size:16px; color:#F65A3A; flex-shrink:0;}
.board-view-box .view-foot > ul > li > a p {font-size:16px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left;}
.board-view-box .view-foot > ul > li > a:hover {text-decoration:underline;}
.board-view-box .view-foot > ul > li:first-of-type > b:before {background-image:url('../images/icon_board_prev.svg');}
.board-view-box .view-foot > ul > li:last-of-type > b:before {background-image:url('../images/icon_board_next.svg');}

/* survey-view-box */
.survey-view-box .view-name {display:flex; flex-wrap:wrap; align-items:center;}
.survey-view-box .view-name strong {display:flex; flex-wrap:wrap; align-items:center; height:45px; padding:0 28px; border-radius:6px 6px 0 0; background:#405FF4; font-size:24px; font-weight:500; color:#fff;}
.survey-view-box .view-inner {background:#fff; border-radius:10px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); margin:0 0 15px;}
.survey-view-box .view-inner:last-of-type {margin:0;}
.survey-view-box .view-inner h3 {margin:0 0 15px; font-size:20px; font-weight:600; word-break:keep-all; color:#364153;}
.survey-view-box .view-inner .inner-content {padding-left:48px;}
.survey-view-box .view-inner .inner-content > * {margin:0 0 15px;}
.survey-view-box .view-inner .inner-content > *:last-child {margin:0;}
.survey-view-box .view-inner .inner-content h4 {margin:0 0 15px; font-size:18px; font-weight:600; word-break:keep-all;}
.survey-view-box .view-inner .inner-content p {font-size:14px; color:#364153; word-break:keep-all;}
.survey-view-box .view-inner .inner-content small {display:block; font-size:12px; color:#99A1AF;}
.survey-view-box .view-inner .inner-content dl dt {font-size:14px; font-weight:600; color:#364153; word-break:keep-all;}
.survey-view-box .view-inner .inner-content dl dd {padding:0 0 0 15px; font-size:14px; color:#364153; word-break:keep-all;}
.survey-view-box .view-inner .inner-content dl dd small {display:block; font-size:12px; color:#4A5565; word-break:keep-all; padding:0 0 0 6px;}
.survey-view-box .view-inner .inner-content strong {display:block; word-break:keep-all; font-size:16px;}
.survey-view-box .view-inner .inner-content strong.req:after {display:inline-block; content:"*"; color:#F65A3A; margin:0 0 0 5px;}
.survey-view-box .view-inner .inner-content .input-box {border-radius:0; border-width:0 0 1px; padding:0;}
.survey-view-box .view-inner .inner-content .input-box.date {border-width:1px; border-radius:10px; padding:0 15px;}
.survey-view-box .view-inner .inner-content .input-box.date input {text-align:center; height:45px; font-size:16px; text-align:left;}
.survey-view-box .view-inner .inner-content .input-box.date input:before {border-radius:10px; padding:0 16px;}
.survey-view-box .view-inner .inner-content .input-box.date input[type=time]:after {background-image:url('../images/icon_time.svg');}
.survey-view-box .view-inner.required {border:1px solid #FB2C36;}
.survey-view-box .view-bottom {margin:24px 0 0;}
.survey-view-box .view-title {margin:0 0 15px;}
.survey-view-box .view-title h4 {display:flex; flex-wrap:wrap; align-items:center; background:var(--color-active); color:#fff; border-radius:10px; padding:10px 24px; font-size:18px; font-weight:600;}
.survey-view-box .view-title * {display:flex; flex-wrap:wrap; align-items:center; background:var(--color-active); color:#fff; border-radius:10px; padding:10px 10px; }
.survey-view-box .view-section {margin:0 0 40px;}
.survey-view-box .view-section:last-of-type {margin:0;}
.survey-view-box .view-section .view-name + .view-inner {border-top-left-radius:0;}
.survey-view-box.center {margin:0 auto;}

/* write-table-box */
.write-table-box table {table-layout:fixed;}
.write-table-box table thead tr th {background:#F5F8FF; border-bottom:1px solid #E4E6E7; padding:10px; font-size:16px; font-weight:600;}
.write-table-box table thead tr th.req:after {display:inline-block; content:"*"; color:#F65A3A; font-weight:600; font-size:16px; margin:0 0 0 5px;}
.write-table-box table thead tr th:first-of-type {border-radius:6px 0 0 0;}
.write-table-box table thead tr th:last-of-type {border-radius:0 6px 0 0;}
.write-table-box table tbody tr td {border-bottom:1px solid #D8E4EE; padding:8px 5px;}
.write-table-box table tbody tr td .cell-delete {display:inline-block; font-size:0; width:32px; height:32px; margin:0 auto; background:url('../images/icon_close.svg') no-repeat center / 24px;}
.write-table-box table tbody tr td .cell-sort {display:block; font-size:0; width:14px; height:14px; background:url('../images/icon_sort.svg') no-repeat center / cover; cursor:grab;}
.write-table-box table tbody tr td .cell-sort:active {cursor:grabbing;}
.write-table-box table tbody tr.is-dragging {display:none;}
.write-table-box table tbody tr.sort-placeholder td {height:44px; background:#F0F4FF; border-top:2px dashed #405FF4; border-bottom:2px dashed #405FF4;}
.write-table-box table tbody tr.sort-placeholder td:first-child {border-left:2px dashed #405FF4;}
.write-table-box table tbody tr.sort-placeholder td:last-child {border-right:2px dashed #405FF4;}
.sort-ghost {opacity:0.9; border-radius:6px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.sort-ghost table {border-collapse:collapse; background:#fff;}
.sort-ghost table td {padding:10px; font-size:14px; border-bottom:1px solid #D8E4EE;}
.sort-ghost-li {border-radius:10px; transform:scale(0.6); transform-origin:left top; opacity:0.7;}
.sort-ghost-li > ul > li {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #405FF4; border-radius:10px; padding:15px; gap:12px; background:#fff; margin:0 0 5px;}
.sort-ghost-li > ul > li:last-child {margin:0;}
.sort-ghost-li > ul > li.depth-2 {margin-left:16px;}
.sort-ghost-li > ul > li.depth-3 {margin-left:32px;}
.sortable > li.is-dragging {opacity:0.3 !important; pointer-events:none !important;}
.sort-placeholder-li {margin:0 0 10px; border:2px dashed #405FF4; border-radius:10px; background:#F0F4FF; transition:margin-left 0.15s, width 0.15s;}
.sort-placeholder-li.depth-2 {margin-left:16px; width:calc(100% - 16px);}
.sort-placeholder-li.depth-3 {margin-left:32px; width:calc(100% - 32px);}
.sortable > li > .sort {cursor:grab;}
.sortable > li > .sort:active {cursor:grabbing;}
.menu-head .delete.sort-delete-ready {outline:2px dashed #D1D5DC; outline-offset:4px; border-radius:6px; transition:all 0.2s;}
.menu-head .delete.sort-delete-hover {outline-color:#FB2C36; background-color:rgba(251,44,54,0.08); outline-offset:4px; border-radius:6px;}
.sortable > li.sort-nest-target {border-color:#405FF4; background:#F0F4FF; box-shadow:inset 0 0 0 1px #405FF4; transition:all 0.15s;}
.sortable > li.sort-insert-before,
.sortable > li.sort-insert-after {position:relative;}
.sortable > li.sort-insert-before::before {content:""; position:absolute; top:-7px; left:0; right:0; height:3px; background:#405FF4; border-radius:2px; z-index:1;}
.sortable > li.sort-insert-after::after {content:""; position:absolute; bottom:-7px; left:0; right:0; height:3px; background:#405FF4; border-radius:2px; z-index:1;}
.write-table-box table tfoot tr td {background:#F9FAFC; border-bottom:1px solid #D8E4EE; padding:10px; font-size:14px; font-weight:600;}

/* survey-list-box */
.survey-list-box > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
.survey-list-box > ul > li:last-of-type {margin:0;}
.survey-list-box > ul > li a {display:flex; flex-wrap:wrap; align-items:center; height:30px; border:1px solid #1427A3; color:#1427A3; background:#E1EBFF; border-radius:6px; padding:0 15px; font-size:16px; font-weight:500;}
.survey-list-box > ul > li a:before {display:inline-block; content:""; width:20px; height:20px; margin:0 8px 0 0; background:url('../images/icon_suvey.svg') no-repeat center / cover;}
.survey-list-box > ul > li .check-box {flex:1; min-width:0;}
.survey-list-box > ul > li .check-box label {font-size:16px;}
.survey-list-box > ul > li p {flex:1; min-width:0; font-size:16px; word-break:keep-all;}

/* file-list-box */
.file-list-box > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center;}
.file-list-box > ul > li:last-of-type {margin:0;}
.file-list-box > ul > li .delete {display:block; font-size:0; width:20px; height:20px; margin:0 15px 0 0; background:url('../images/icon_file_delete2.svg') no-repeat center / cover;}
.file-list-box > ul > li a {gap:4px; flex:1; min-width:0; display:flex; align-items:center;}
.file-list-box > ul > li a:before {display:inline-block; content:""; width:16px; height:16px; margin:0 8px 0 0; flex-shrink:0; background:url('../images/icon_file_download.svg') no-repeat center / cover;}
.file-list-box > ul > li a p {font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.file-list-box > ul > li a time {font-size:15px; color:#BFBFBF; flex-shrink:0;}

/* list-none-box */
.list-none-box {padding:45px 0;}
.list-none-box p {font-size:16px; text-align:center;}
.list-none-box:before {display:block; content:""; width:216px; height:177px; margin:0 auto 23px; background:url('../images/icon_list_none.png') no-repeat center / cover;}

/* search-wrap-box */
.search-wrap-box {background:#F9FAFC; border-radius:6px; padding:20px;}
.search-wrap-box h3 {margin:0 0 10px; font-size:18px; font-weight:600; word-break:keep-all; text-align:center;}
.search-wrap-box > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.search-wrap-box > div .input-box {width:350px;}

/* content-box */
.content-box {display:flex; flex-wrap:wrap; min-height:100vh;}
.content-box .content-left {width:312px; background:#fff; border-right:1px solid #C7D5E2;}
.content-box .content-left .left-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid #C7D5E2; padding:10px 15px; height:59px;}
.content-box .content-left .left-head h3 {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:600;}
.content-box .content-left .left-head h3:before {display:inline-block; content:""; width:4px; height:4px; border-radius:50%; background:#151515; margin:0 8px 0 0;}
.content-box .content-left .left-body > ul {padding:15px; margin:0 0 50px;}
.content-box .content-left .left-body > ul > li {display:flex; flex-wrap:wrap; margin:0 0 10px;}
.content-box .content-left .left-body > ul > li:last-of-type {margin:0;}
.content-box .content-left .left-body > ul > li > strong {font-size:16px; font-weight:500; width:110px;}
.content-box .content-left .left-body > ul > li > div {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:5px;}
.content-box .content-left .left-body > ul > li > div p {font-size:16px; word-break:keep-all;}
.content-box .content-right {flex:1; min-width:0;}
.content-box .content-right .right-head {border-bottom:1px solid #C7D5E2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px; background:#fff;}
.content-box .content-right .right-head .btn-orange-outline {background:#FFECE9;}
.content-box .content-right .right-head .btn-orange-outline:before {display:inline-block; content:""; width:18px; height:18px; margin:0 8px 0 0; background:url('../images/icon_btn_content_01.svg') no-repeat center / cover;}
.content-box .content-right .right-head .btn-blue-outline {background:#E1EBFF;}
.content-box .content-right .right-head .btn-blue-outline:before {display:inline-block; content:""; width:20px; height:20px; margin:0 6px 0 0; background:url('../images/icon_btn_content_02.svg') no-repeat center / cover;}
.content-box .content-right .right-head  p {font-size:16px; font-weight:500;}
.content-box .content-right .right-body .body-top {background:#fff; padding:10px 20px 0;}
.content-box .content-right .right-body .body-top ul {display:block; overflow-x:auto; white-space:nowrap; font-size:0; padding:0 0 10px;}
.content-box .content-right .right-body .body-top ul::-webkit-scrollbar {background:#EAEAEA; border-radius:50px; height:8px;}
.content-box .content-right .right-body .body-top ul::-webkit-scrollbar-thumb {background:#949DCC; border-radius:50px; height:8px;}
.content-box .content-right .right-body .body-top ul li {display:inline-block; font-size:0; margin:0 3px 0 0;}
.content-box .content-right .right-body .body-top ul li:last-of-type {margin:0;}
.content-box .content-right .right-body .body-top ul li a {border-radius:6px; height:40px; background:#E1EBFF; padding:0 12px; font-size:16px; font-weight:500; color:#727CC0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.content-box .content-right .right-body .body-top ul li a.active {background:#1427A3; color:#fff;}
.content-box .content-right .right-body .body-bottom {padding:30px 20px;}
.content-box .content-right .right-body .body-bottom .bottom-content {border-radius:10px; background:#fff; padding:20px; box-shadow:2px 2px 8px rgba(0,0,0,0.13); margin:0 0 20px;}
.content-box .content-right .right-body .body-bottom .bottom-content:last-of-type {margin:0;}

/* table-box */
.table-box table thead tr th {border-bottom:1px solid #D8E4EE; padding:10px; font-size:16px; font-weight:500;}
.table-box table tbody tr td {border-bottom:1px solid #D8E4EE; padding:10px; font-size:16px;}
.table-box table tbody tr:last-of-type td {border:0;}
.table-box table tbody tr:nth-of-type(even) td {background:#F5F8FF;}

/* info-list-box */
.info-list-box > ul {display:flex; flex-wrap:wrap; margin:0 -20px -40px;}
.info-list-box > ul > li {width:calc(33.33% - 40px); margin:0 20px 40px; border-radius:6px; overflow:hidden;}
.info-list-box > ul > li dl dt {font-size:16px; font-weight:600; background:#F5F8FF; border-bottom:1px solid #C7D5E2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:15px 20px;}
.info-list-box > ul > li dl dt > * {font-size:16px; font-weight:600;}
.info-list-box > ul > li dl dt.req {justify-content:flex-start;}
.info-list-box > ul > li dl dt.req:after {display:inline-block; content:"*"; justify-content:flex-start; color:#F65A3A; font-weight:600; margin:0 0 0 5px;}
.info-list-box > ul > li dl dd {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #D8E4EE; padding:15px 20px;}
.info-list-box > ul > li dl dd b {width:100px; font-size:16px;}
.info-list-box > ul > li dl dd p {flex:1; min-width:0; font-size:16px;}
.info-list-box > ul > li dl dd p.check {flex:none; width:14px; height:14px; font-size:0; background:url('../images/icon_info_check.svg') no-repeat center /cover;}
.modal-box .info-list-box > ul {margin:0 -10px -20px;}
.modal-box .info-list-box > ul > li {width:calc(33.33% - 10px); margin:0 5px 10px;}
.modal-box .info-list-box > ul > li dl dd {padding:15px 10px;}

/* state-box */
.state-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.state-box * {display:flex; flex-wrap:wrap; align-items:center; font-size:16px;}
.state-box *:before {display:inline-block; content:""; width:20px; height:20px; background-size:cover; background-position:center; margin:0 5px 0 0;}
.state-box *.step1 {color:#F65A3A;}
.state-box *.step1:before {background-image:url('../images/icon_state_01.svg');}
.state-box *.step2 {color:#151515;}
.state-box *.step2:before {background-image:url('../images/icon_state_02.svg');}
.state-box *.step3 {color:#3C91FF;}
.state-box *.step3:before {background-image:url('../images/icon_state_03.svg');}

/* report-box */
.report-box {display:flex; flex-wrap:wrap; gap:15px;}
.report-box .report-inner {flex:1; min-width:0; border:1px solid #C5C5C6; border-radius:6px; padding:20px;}
.report-box .report-inner.active {border:2px solid #405FF4;}
.report-box .report-inner .title-box {margin:0 0 10px; padding:0; border:0;}
.report-box .report-inner .report-score b {display:flex; flex-wrap:wrap; align-items:center; height:38px; border-radius:6px; padding:0 10px; font-size:20px; font-weight:600;}
.report-box .report-inner .report-score b.blue {color:#405FF4; background:#F5F8FF;}
.report-box .report-inner .report-score b.red {color:#F65A3A; background:#FFECE9;}
.report-box .report-inner .report-table > ul > li {margin:0 0 16px;}
.report-box .report-inner .report-table > ul > li:last-of-type {margin:0;}
.report-box .report-inner .report-table > ul > li table {table-layout:fixed;}
.report-box .report-inner .report-table > ul > li table thead tr th {border-bottom:1px solid #D8E4EE; padding:10px; font-size:15px; font-weight:600; position:relative; z-index:2; border-top:1px solid #949DCC;}
.report-box .report-inner .report-table > ul > li table thead tr th.tit {height:46px; background:#F5F8FF; text-align:left;}
.report-box .report-inner .report-table > ul > li table thead tr th .radio-box label {justify-content:center; font-size:16px; font-weight:600;}
.report-box .report-inner .report-table > ul > li table tbody tr td {position:relative; border-bottom:1px solid #D8E4EE; padding:10px; font-size:15px;}
.report-box .report-inner .report-table > ul > li table tbody tr td.active {background:#F9FAFC;}
.report-box .report-inner .report-table > ul > li table tbody tr td.red {background:#FFF1F1;}
.report-box .report-inner .report-table > ul > li table tfoot tr td {position:relative; background:#F9FAFC; border-bottom:1px solid #C7D5E2; padding:10px 20px; font-size:15px; font-weight:600;}
.report-box .report-inner .report-table > ul > li table tfoot tr td .tooltip-box {position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.report-box .report-inner .report-table > ul > li table tfoot tr.blue td {background:#F5F8FF; color:#2C96E2;}
.report-box .report-inner .report-table > ul > li table tfoot tr.red td {background:#FFF1F1; color:#F65A3A;}
.report-box .report-inner .report-table > ul > li table .br {border-right:1px solid #D8E4EE;}
.report-box .report-inner .report-graph {gap:10px; display:flex; flex-wrap:wrap;}
.report-box .report-inner .report-graph .graph-left {flex:1; min-width:0;}
.report-box .report-inner .report-graph .graph-right {width:45%; position:relative; border:1px solid #C5C5C6; border-radius:6px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.report-box .report-inner .report-graph .graph-right .chart-container {width:100%;}
.report-box .report-inner .report-graph .graph-right canvas {width:100% !important; height:100% !important;}
.report-box .report-inner .report-total table {table-layout:fixed;}
.report-box .report-inner .report-total table thead tr th {background:#E0FFE4; padding:8px; font-size:14px; font-weight:600; border-bottom:1px solid #D8E4EE;}
.report-box .report-inner .report-total table thead tr th.bdr-l {border-radius:6px 0 0 6px;}
.report-box .report-inner .report-total table thead tr th.bdr-r {border-radius:0 6px 6px 0;}
.report-box .report-inner .report-total table tbody tr td {background:#E0FFE4; padding:8px; font-size:14px; border-bottom:1px solid #D8E4EE;}

/* print-box */
.print-box {border:1px solid #D8E4EE; border-radius:12px;}
.print-box .print-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:24px 10px 0; margin:0 0 24px;}
.print-box .print-head h3 {font-size:20px; font-weight:600; flex:1; min-width:0; word-break:keep-all;}
.print-box .print-head img {max-width:100px;}
.print-box .print-head:after {display:block; content:""; width:100%; height:2px; background:url('../images/bg_print_border.png') no-repeat center / cover; margin:6px 0 0;}
.print-box .print-body {padding:0 20px 25px;}
.print-box .print-body .body-inner {margin:0 0 35px;}
.print-box .print-body .body-inner:last-of-type {margin:0;}
.print-box .print-body .body-inner .inner-head {border-bottom:1px solid #FC8218; margin:0 0 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 0 10px;}
.print-box .print-body .body-inner .inner-head h4 {font-size:20px; font-weight:600; color:#FC8218;}
.print-box .print-body .body-inner .inner-head .body-person {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.print-box .print-body .body-inner .inner-head .body-person p {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:500;}
.print-box .print-body .body-inner .inner-head .body-person p:first-of-type:after {display:inline-block; content:""; width:1px; height:21px; background:#151515; margin:0 0 0 10px;}
.print-box .print-body .body-inner .inner-head .body-person:before {display:inline-block; content:""; width:14px; height:26px; background:url('../images/icon_person.svg') no-repeat center / cover;}
.print-box .print-body .body-inner .inner-body .body-info ul {display:flex; flex-wrap:wrap; margin:0 -7.5px -15px;}
.print-box .print-body .body-inner .inner-body .body-info ul li {width:calc(33.33% - 15px); margin:0 7.5px 15px; border:1px solid #D1D5DC; border-radius:4px; overflow:hidden;}
.print-box .print-body .body-inner .inner-body .body-info ul li:nth-of-type(1),
.print-box .print-body .body-inner .inner-body .body-info ul li:nth-of-type(2) {width:calc(50% - 15px);}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dt {background:#F9FAFB; border-bottom:1px solid #D1D5DC; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:8px 10px;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dt b {font-size:14px; font-weight:600;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dt p {font-size:14px;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dd {padding:5px 10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dd p {font-size:14px;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dd:nth-of-type(1) {padding-top:15px;}
.print-box .print-body .body-inner .inner-body .body-info ul li dl dd:last-child {padding-bottom:15px;}
.print-box .print-body .body-inner .inner-body .body-text ul li {margin:0 0 10px; display:flex; flex-wrap:wrap;}
.print-box .print-body .body-inner .inner-body .body-text ul li:last-of-type {margin:0;}
.print-box .print-body .body-inner .inner-body .body-text ul li b {font-size:15px; margin:0 10px 0 0;}
.print-box .print-body .body-inner .inner-body .body-text ul li p {flex:1; min-width:0; font-size:15px; word-break:keep-all;}
.print-box .print-body .body-inner .inner-body .body-graph {gap:15px; display:flex; flex-wrap:wrap;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table {width:145px; display:flex; flex-direction:column; gap:15px;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner {width:100%; border:1px solid #D1D5DC; border-radius:4px; overflow:hidden;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner h5 {border-bottom:1px solid #D1D5DC; background:#F9FAFB; padding:10px; font-size:14px; font-weight:600;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner ul {padding:10px;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner ul li {margin:0 0 5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner ul li:last-of-type {margin:0;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner ul li p {font-size:14px;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner ul li p.check {width:14px; height:14px; font-size:0; background:url('../images/icon_info_check.svg') no-repeat center /cover;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-table .inner:last-of-type {flex:1; min-width:0;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-inner {flex:1; min-width:0; border:1px solid #D1D5DC; border-radius:4px; padding-top:35px;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-inner > p {text-align:center; font-size:16px; font-weight:600;}
.print-box .print-body .body-inner .inner-body .body-graph .graph-inner > p b {font-size:16px; font-weight:600; color:#949DCC;}

/* main-box */
.main-box {margin:-30px 0 0;}
.main-box .main-top {display:flex; flex-wrap:wrap;}
.main-box .main-top .top-left {width:calc(45% - 30px); margin:0 30px 0 0; display:flex; flex-direction:column; gap:30px;}
.main-box .main-top .top-left .main-inner {flex:1; min-width:0;}
.main-box .main-top .top-right {flex:1; min-width:0; display:flex; flex-direction:column; gap:30px;}
.main-box .main-top .top-right .main-inner:last-of-type {flex:1; min-width:0;}
.main-box .main-bottom {margin:30px 0 0;}
.main-box .main-inner {width:100%; background:#fff; border-radius:10px; padding:24px; border:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.main-box .main-inner .inner-title {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 24px;}
.main-box .main-inner .inner-title h2 {font-size:18px; font-weight:600;}
.main-box .main-inner .inner-title a {font-size:14px; font-weight:500; color:#6A7282;}
.main-box .main-inner .inner-title a:hover {text-decoration:underline;}
.main-box .main-state ul {display:flex; flex-wrap:wrap; margin:0 -5px;}
.main-box .main-state ul li {width:calc(33.33% - 10px); margin:0 5px;}
.main-box .main-state ul li b {font-size:24px; font-weight:700;}
.main-box .main-state ul li p {margin:0 0 5px; font-size:16px;}
.main-box .main-state ul.auto {margin:0; gap:16px;}
.main-box .main-state ul.auto li {width:auto; margin:0; min-width:140px;}
.main-box .main-list ul li {margin:0 0 10px;}
.main-box .main-list ul li:last-of-type {margin:0;}
.main-box .main-list ul li a {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.main-box .main-list ul li a p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px;}
.main-box .main-list ul li a p b {font-size:16px; color:var(--color-red); font-weight:500;}
.main-box .main-list ul li a time {font-size:14px; color:#99A1AF;}
.main-box .main-list ul li a:hover p {text-decoration:underline;}
.main-box .main-bar {margin:24px 0 0;}
.main-box .main-bar .bar-name {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 8px;}
.main-box .main-bar .bar-name p {font-size:14px;}
.main-box .main-bar .bar-name b {font-size:14px; font-weight:600;}
.main-box .main-bar .bar-graph {background:#E5E7EB; height:12px; position:relative; border-radius:50px;}
.main-box .main-bar .bar-graph > div {position:absolute; left:0; top:0; height:100%; border-radius:50px; background:#151515;}
.main-box .main-graph {display:flex; flex-wrap:wrap; margin:0 -20px;}
.main-box .main-graph .graph {width:calc(25% - 40px); margin:0 20px;}
.main-box .main-graph .graph > p {margin:0 0 15px; font-size:16px; font-weight:500;}

/* menu-box */
.menu-box {max-width:580px;}
.menu-box .menu-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 10px;}
.menu-box .menu-head .delete {width:42px; height:36px; font-size:0; display:block; background:url('../images/icon_menu_delete.svg') no-repeat center / cover;}
.menu-box .menu-body .body-list > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; border:1px solid #C5C5C6; border-radius:10px; padding:15px; gap:12px;}
.menu-box .menu-body .body-list > ul > li:last-of-type {margin:0;}
.menu-box .menu-body .body-list > ul > li .sort {width:20px; height:20px; font-size:0; background:url('../images/icon_sort.svg') no-repeat center / 14px;}
.menu-box .menu-body .body-list > ul > li .subject {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
.menu-box .menu-body .body-list > ul > li .subject p {flex:1; min-width:0; font-size:16px; font-weight:500;}
.menu-box .menu-body .body-list > ul > li .state * {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:28px; border-radius:4px; background:#F3F4F6; padding:0 12px; font-size:14px; color:#bfbfbf;}
.menu-box .menu-body .body-list > ul > li.depth .subject:before {display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_menu_arrow.svg') no-repeat center / cover;}
.menu-box .menu-body .body-list > ul > li.depth-2 {margin:0 0 10px 16px; width:calc(100% - 16px);}
.menu-box .menu-body .body-list > ul > li.depth-3 {margin:0 0 10px 32px; width:calc(100% - 32px);}
.menu-box .menu-body .body-text {margin:35px 0 0;}
.menu-box .menu-body .body-text ul li {margin:0 0 5px; color:#364153; word-break:keep-all;}
.menu-box .menu-body .body-text ul li:last-of-type {margin:0;}

/* menu-check-box */
.menu-check-box {max-width:375px;}
.menu-check-box > ul > li {margin:0 0 10px; position:relative;}
.menu-check-box > ul > li:last-of-type {margin:0;}
.menu-check-box > ul > li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.menu-check-box > ul > li label {font-size:16px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border:1px solid #C5C5C6; border-radius:10px; padding:8px 16px;}
.menu-check-box > ul > li label:after {display:block; content:""; width:18px; height:18px; background:url('../images/icon_check.svg') no-repeat center / cover;}
.menu-check-box > ul > li input:checked ~ label:after {background-image:url('../images/icon_check_on.svg');}

/* .agree-box */
.agree-box .list-none {font-size:16px; word-break:keep-all;}
.agree-box > ul > li {margin:0 0 30px;}
.agree-box > ul > li:last-of-type {margin:0;}
.agree-box > ul > li > * {margin:0 0 5px;}
.agree-box > ul > li > *:last-child {margin:0;}
.agree-box > ul > li h2 {margin:0 0 20px; font-size:18px; font-weight:600; word-break:keep-all;}
.agree-box > ul > li p {font-size:16px; word-break:keep-all;}
.agree-box > ul > li ul {padding:0 0 0 30px;}
.agree-box > ul > li ul > li {list-style:disc; font-size:16px; word-break:keep-all; margin:0 0 5px;}
.agree-box > ul > li ul > li:last-of-type {margin:0;}

/* error-box */
.error-box {margin:30px 0;}
.error-box strong {display:block; text-align:center; font-size:24px; font-weight:700; word-break:keep-all;}
.error-box p {margin:15px 0 0; font-size:16px; text-align:center; word-break:keep-all;}
.error-box ul {margin:15px auto 0; max-width:460px; border-radius:10px; background:#D8E4EE; padding:12px 20px;}
.error-box ul li {text-align:center; word-break:keep-all; margin:0 0 5px; font-size:16px; font-weight:500;}
.error-box ul li:last-of-type {margin:0;}
.error-box:before {display:block; margin:0 auto 15px; width:100px; height:100px; background-size:cover; background-position:center; content:"";}
.error-box.page:before {background-image:url('../images/icon_error_01.png');}
.error-box.server:before {background-image:url('../images/icon_error_02.png');}
.error-box.service:before {background-image:url('../images/icon_error_03.png');}
.error-box.authority:before {background-image:url('../images/icon_error_04.png');}

/* report-graph-box */
.report-graph-box > ul {display:flex; flex-wrap:wrap; gap:30px;}
.report-graph-box > ul > li {flex:1; min-width:0; border:1px solid #E5E7EB; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); padding:24px; border-radius:10px;}
.report-graph-box > ul > li > strong {font-size:18px; font-weight:700;}
.report-graph-box > ul > li > p {font-size:14px; color:#6A7282; margin:0 0 10px;}

/* ============================
   설문지 빌더 (sb-)
   ============================ */

/* 설문지 상단 도구 모음 */
.sb-toolbar {display:flex; align-items:center; justify-content:space-between; height:61px; background:#fff; border-bottom:1px solid #C7D5E2; padding:0 24px; gap:40px;}
.sb-toolbar-left {flex:1; min-width:0; display:flex; align-items:center;}
.sb-toolbar-right {display:flex; align-items:center; gap:20px;}
.sb-name-input {flex:1; min-width:0; border:none; border-bottom:2px solid transparent; font-size:18px; font-weight:600; width:220px; height:36px; padding:0 4px; outline:none; transition:border-color 0.2s;}
.sb-name-input:focus {border-bottom-color:rgba(0,0,0,1);}
.sb-name-input::placeholder {color:#bfbfbf; font-weight:400;}
.sb-toolbar-icons {display:flex; align-items:center; gap:4px;}
.sb-icon-btn {width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:none; border:none; cursor:pointer; transition:background 0.15s; font-size:0;}
.sb-icon-btn:after {display:block; content:""; width:18px; height:18px; background-size:cover; background-position:center;}
.sb-icon-btn:hover {background:#D8E4EE;}
.sb-icon-btn#sbPreView:after {background-image:url('../images/icon_sb_01.png');}
.sb-icon-btn#sbUndo:after {background-image:url('../images/icon_sb_02.png');}
.sb-icon-btn#sbRedo:after {background-image:url('../images/icon_sb_03.png');}
.sb-icon-btn#sbLinkBtn:after {background-image:url('../images/icon_sb_04.png');}

/* 설문지 본문 영역 */
.sb-body {background:#F9FAFC; min-height:calc(100vh - 260px); padding:30px; position:relative;}
.sb-canvas {max-width:864px; margin:0 auto;}
.sb-canvas b, .sb-canvas strong { font-weight: bold; }

/* 설문지 헤더 카드 */
.sb-header-card {background:#fff; border:1px solid #D1D5DC; border-radius:10px; padding:16px 20px 16px 28px; position:relative; cursor:pointer; margin:0 0 14px; transition:border-color 0.2s;}
.sb-header-card.active {border-width:2px; border-color:#405FF4;}
.sb-header-title {display:block; width:100%; border:none; border-bottom:1px solid #D8E4EE; font-size:20px; font-weight: 400; padding:8px 0; outline:none; background:none; transition:border-color 0.2s;}
.sb-header-title:focus {border-bottom-color:#405FF4;}
.sb-header-title::placeholder {color:#bfbfbf;}
.sb-header-hr {border:none; border-top:1px solid #E5E7EB; margin:4px 0 8px;}
.sb-header-desc {display:block; width:100%; border:none; border-bottom:1px solid transparent; font-size:14px; padding:6px 0; outline:none; background:none; transition:border-color 0.2s;}
.sb-header-desc:focus {border-bottom-color:#405FF4;}
.sb-header-desc::placeholder {color:#bfbfbf;}

/* 질문 카드 */
.sb-question-card {background:#fff; border:1px solid #D1D5DC; border-radius:6px; margin:0 0 14px; padding:0 25px 1px; transition:border-color 0.2s; cursor:pointer; position:relative;}
.sb-question-card.active {border:2px solid #405FF4; padding:0 24px 0px;}
.sb-grip {text-align:center; padding:4px 0 0; cursor:grab; color:#ccc; font-size:0; width:20px; height:20px; background:url('../images/icon_sb_grip.png') no-repeat center / cover; user-select:none; line-height:1; margin:0 auto;}
.sb-grip:active {cursor:grabbing;}
.sb-q-header {display:flex; align-items:flex-start; gap:16px; padding:4px 0 12px;}
.sb-q-title {flex:1; min-width:0; border:none; border-bottom:1px solid #D8E4EE; height:40px; font-size:14px; padding:4px 10px; outline:none; transition:border-color 0.2s;}
.sb-q-title:focus {border-bottom-color:#405FF4; background:#fff;}
.sb-q-title::placeholder {color:#bfbfbf;}
.sb-q-desc {display:block; width:100%; border:none; border-bottom:1px solid #D8E4EE; height:36px; font-size:13px; padding:4px 15px; outline:none; margin:0 0 8px; color:#6B7280; transition:border-color 0.2s;}
.sb-q-desc:focus {border-bottom-color:#405FF4;}
.sb-q-desc::placeholder {color:#bfbfbf;}
.sb-q-type {width:207px; flex-shrink:0;}
/* 기존 네이티브 셀렉트는 커스텀 드롭다운으로 대체됨 */
.sb-q-body {padding:6px 0 8px;}
.sb-q-footer {display:flex; align-items:center; justify-content:flex-end; gap:13px; border-top:1px solid #E5E7EB; padding:12px 0;}
.sb-q-footer .switch-box {gap:8px;}
.sb-q-footer .switch-box b {font-size:13px; margin:0;}
.sb-footer-btn {width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; transition:background 0.15s;}
.sb-footer-btn:after {display:block; content:""; width:18px; height:18px; background-size:cover; background-position:center;}
.sb-footer-btn:hover {background:#D8E4EE;}
.sb-footer-btn.sb-copy-btn:after {background-image:url('../images/icon_sb_footer_01.png');}
.sb-footer-btn.sb-delete-btn:after {background-image:url('../images/icon_sb_footer_02.png'); width:16px; height:18px;}
.sb-footer-divider {display:block; width:1px; height:24px; background:#D1D5DC; margin:0 4px;}

/* 옵션 행 */
.sb-option-row {display:flex; align-items:center; gap:12px; min-height:36px; margin:3px 0; padding:2px 0;}
.sb-radio-icon {display:block; width:16px; height:16px; border:1.5px solid #000; border-radius:50%; opacity:0.4; flex-shrink:0;}
.sb-check-icon {display:block; width:16px; height:16px; border:1.5px solid #000; border-radius:3px; opacity:0.4; flex-shrink:0;}
.sb-option-text {flex:1; min-width:0; border:none; border-bottom:1px solid transparent; height:36px; font-size:14px; padding:4px 0; outline:none; transition:border-color 0.2s;}
.sb-option-text:focus {border-bottom-color:#405FF4;}
.sb-score-input {width:150px; border:none; border-bottom:1px solid transparent; height:36px; font-size:14px; padding:4px 0; outline:none; transition:border-color 0.2s;}
.sb-score-input:focus {border-bottom-color:#405FF4;}
.sb-option-delete {width:33px; height:33px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#9CA3AF; font-size:20px; border-radius:4px; flex-shrink:0; line-height:1; font-size:0; background:url('../images/icon_option_delete.svg') no-repeat center / cover;}
.sb-option-add {display:flex; align-items:center; gap:12px; min-height:36px; margin:3px 0; padding:2px 0;}
.sb-option-add-text {display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:14px;}
.sb-option-add-text a {text-decoration:underline; cursor:pointer;}
.sb-option-add-text a:hover {color:#1427A3;}
.sb-duplicate-warn {color:#F65A3A; font-size:13px; margin:0 0 4px; padding:0 0 0 28px;}

/* 답변 플레이스홀더 */
.sb-answer-placeholder {height:40px; color:#bfbfbf; font-size:14px; padding:8px 10px; display:flex; align-items:center;}

/* 섹션 구분선 (래퍼) */
.sb-section-divider {margin:0 0 20px; position:relative; cursor:pointer;}
/* 섹션 카드 */
.sb-section-card {background:#fff; border:1px solid #D1D5DC; border-radius:0 6px 6px 6px; padding:0 25px 12px; transition:border-color 0.2s;}
.sb-section-divider.active .sb-section-card {border:2px solid #405FF4; padding:0 24px 11px; border-radius:0 6px 6px 6px;}
.sb-section-title {display:block; width:100%; border:none; border-bottom:1px solid #D8E4EE; font-size:16px; font-weight: 400; padding:8px 0; outline:none; background:none; transition:border-color 0.2s;}
.sb-section-title:focus {border-bottom-color:#405FF4;}
.sb-section-title::placeholder {color:#bfbfbf;}
.sb-section-desc {display:block; width:100%; border:none; border-bottom:1px solid transparent; font-size:13px; padding:6px 0; outline:none; background:none; color:#6B7280; transition:border-color 0.2s;}
.sb-section-desc:focus {border-bottom-color:#405FF4;}
.sb-section-desc::placeholder {color:#bfbfbf;}

/* 에디터 콘텐츠 플레이스홀더 (contenteditable) */
.sb-editor-content { position: relative; }
.sb-editor-content[placeholder]:empty:before {
	content: attr(placeholder);
	color: #bfbfbf;
	pointer-events: none;
	display: block;
	position: absolute;
	left: 0;
	top: 4px; /* 패딩 4px~8px 사이 조정 */
}

/* 사이드 패널 */
.sb-side-panel {position:fixed; right:40px; top:50%; transform:translateY(-50%); background:#fff; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.12); width:52px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0; z-index:50;}
.sb-side-btn {width:32px; height:32px; margin:0 0 4px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:0; background:none; border:none; cursor:pointer; transition:background 0.15s;}
.sb-side-btn:after {display:block; content:""; width:28px; height:28px; background-size:cover; background-position:center;}
.sb-side-btn:last-of-type {margin:0;}
.sb-side-btn:hover {background:#F3F4F6;}
.sb-side-btn#sbAddQuestion:after {background-image:url('../images/icon_sb_side_01.png');}
.sb-side-btn#sbAddSection:after {background-image:url('../images/icon_sb_side_02.png');}
.sb-side-btn#sbAddDivider:after {background-image:url('../images/icon_sb_side_03.png');}

/* 링크 팝업 */
.sb-link-popup {position:fixed; background:#fff; border-radius:6px; box-shadow:3px 4px 12px rgba(0,0,0,0.25); width:494px; padding:20px; z-index:100; right:40px; top:120px;}
.sb-link-popup-title {font-size:16px; font-weight:600; margin:0 0 14px;}
.sb-link-popup-url {margin:0 0 16px;}
.sb-link-popup-url input {display:block; width:100%; height:40px; border:1px solid #D1D5DC; border-radius:6px; padding:0 12px; font-size:14px; color:#6B7280; background:#F9FAFC; outline:none;}
.sb-link-popup-foot {border-top:1px solid #E5E7EB; padding:16px 0 0;}
.sb-link-popup-foot .button-box {justify-content:flex-end;}

/* [2번] 커스텀 셀렉트 드롭다운 */
.sb-custom-select {position:relative; width:100%;}
.sb-custom-select-btn {display:flex; align-items:center; gap:8px; width:100%; height:40px; padding:0 10px; border:1px solid #D1D5DC; border-radius:6px; background:#fff; cursor:pointer; font-size:14px; outline:none;}
.sb-custom-select-btn:hover {border-color:#405FF4;}
.sb-custom-select-label {flex:1; min-width:0; text-align:left;}
.sb-custom-select-arrow {width:16px; height:16px; background:url('../images/icon_select.svg') no-repeat center / cover; flex-shrink:0; transition:transform 0.2s;}
.sb-custom-select.open .sb-custom-select-arrow {transform:rotate(180deg);}
.sb-custom-select-list {display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid #D1D5DC; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:20; padding:4px 0; max-height:280px; overflow-y:auto;}
.sb-custom-select.open .sb-custom-select-list {display:block;}
.sb-custom-select-item {display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:14px; cursor:pointer; transition:background 0.1s;}
.sb-custom-select-item:hover {background:#F3F4F6;}
.sb-custom-select-item.active {background:#E8EEFF; color:#405FF4; font-weight:500;}
.sb-custom-select-icon {width:20px; height:20px; flex-shrink:0; background-size:contain; background-position:center; background-repeat:no-repeat;}

/* 질문 유형 아이콘 (CSS 이미지 처리 예정, 현재 기본 형태) */
.sb-type-icon-radio {display:inline-block; width:20px; height:20px; background:url('../images/icon_sb_type_01.png') no-repeat center / cover;}
.sb-type-icon-checkbox {display:inline-block; width:20px; height:20px; background:url('../images/icon_sb_type_02.png') no-repeat center / cover;}
.sb-type-icon-short {display:inline-block; width:20px; height:20px; flex-shrink:0; position:relative; background:url('../images/icon_sb_type_03.png') no-repeat center / cover;}
.sb-type-icon-long {display:inline-block; width:20px; height:20px; flex-shrink:0; position:relative; background:url('../images/icon_sb_type_04.png') no-repeat center / cover;}
.sb-type-icon-date {display:inline-block; width:20px; height:20px; flex-shrink:0; background:url('../images/icon_sb_type_05.png') no-repeat center / cover;}
.sb-type-icon-time {display:inline-block; width:20px; height:20px; flex-shrink:0; background:url('../images/icon_sb_type_06.png') no-repeat center / cover;}
.sb-type-icon-datetime {display:inline-block; width:20px; height:20px; flex-shrink:0; background:url('../images/icon_sb_type_07.png') no-repeat center / cover;}

/* [4,5번] 에디터 툴바 */
.sb-header-field {position:relative;}
.sb-editor-toolbar {display:none; align-items:center; gap:15px; padding:6px 0; opacity:0; transition:opacity 0.2s;}
.sb-header-field:focus-within .sb-editor-toolbar {display:flex; opacity:1;}
.sb-editor-btn {width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; border-radius:4px; cursor:pointer; font-size:0; color:#6B7280; transition:background 0.15s; position:relative;}
.sb-editor-btn:after {display:block; content:""; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat;}
.sb-editor-btn.active {background:#D8E4EE; color:#fff;}
.sb-editor-btn.sb-ed-bold:after {background-image:url('../images/icon_sb_editor_01.png');}
.sb-editor-btn.sb-ed-italic:after {background-image:url('../images/icon_sb_editor_02.png');}
.sb-editor-btn.sb-ed-underline:after {background-image:url('../images/icon_sb_editor_03.png'); width:25px; height:25px;}
.sb-editor-btn.sb-ed-link:after {background-image:url('../images/icon_sb_editor_04.png'); width:25px; height:25px;}
.sb-editor-btn.sb-ed-ol:after {background-image:url('../images/icon_sb_editor_05.png'); width:30px; height:30px;}
.sb-editor-btn.sb-ed-ul:after {background-image:url('../images/icon_sb_editor_06.png'); width:30px; height:30px;}
.sb-editor-btn.sb-ed-clear:after {background-image:url('../images/icon_sb_editor_07.png'); width:27px; height:27px;}
.sb-editor-divider {display:block; width:1px; height:18px; background:#D1D5DC; margin:0 4px;}

/* 호버 툴팁 (::before만 사용, ::after 아이콘과 충돌 방지) */
.sb-has-tooltip {position:relative;}
.sb-has-tooltip[data-tooltip]::before {content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#333; color:#fff; font-size:12px; font-weight:400; padding:4px 10px; border-radius:4px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.2s; z-index:100;}
.sb-has-tooltip:hover[data-tooltip]::before {opacity:1;}
.sb-side-btn.sb-has-tooltip[data-tooltip]::before {bottom:auto; top:50%; left:auto; right:calc(100% + 10px); transform:translateY(-50%);}

/* [8번] 섹션 접기 */
.sb-section-collapse-btn {background:#D8E4EE;}
.sb-section-collapse-btn:after {background-image:url('../images/icon_header_arrow.png') !important; width:28px !important; height:28px !important; transition:transform 0.2s; position:relative; top:1px;}
.sb-section-divider.collapsed .sb-section-body {display:none;}
.sb-section-divider.collapsed .sb-section-collapse-btn:after {transform:rotate(180deg);}

/* [9번] 중복 옵션 에러 스타일 */
.sb-option-text.sb-option-error {border-bottom-color:#F65A3A !important;}
.sb-duplicate-warn {display:flex; align-items:center; gap:4px;}
.sb-warn-icon {display:inline-block; width:14px; height:14px; background:url('../images/icon_error.svg') no-repeat center / cover; flex-shrink:0;}

/* [10번] 옵션 드래그 핸들 */
.sb-option-sort {display:block; width:14px; height:14px; background:url('../images/icon_sort.svg') no-repeat center / cover; cursor:grab; flex-shrink:0; opacity:0.5; transition:opacity 0.15s;}
.sb-option-sort:hover {opacity:1;}
.sb-option-sort:active {cursor:grabbing;}

/* 드래그 삽입 위치 표시 */
.sb-insert-before {position:relative;}
.sb-insert-before::before {content:""; position:absolute; top:-8px; left:0; right:0; height:3px; background:#405FF4; border-radius:2px; z-index:1;}
.sb-insert-after {position:relative;}
.sb-insert-after::after {content:""; position:absolute; bottom:-8px; left:0; right:0; height:3px; background:#405FF4; border-radius:2px; z-index:1;}
.sb-option-row.sb-insert-before::before {top:-4px; height:2px;}
.sb-option-row.sb-insert-after::after {bottom:-4px; height:2px;}

/* 섹션 헤더 행 */
.sb-section-header-row {display:flex; align-items:center;}
.sb-section-label {display:flex; flex-wrap:wrap; align-items:center; height:45px; border-radius:6px 6px 0 0; background:#405FF4; font-size:24px; font-weight:500; color:#fff; padding:0 28px;}
.sb-section-title-row {display:flex; align-items:flex-start; gap:12px;}
.sb-section-title-row .sb-section-title-field {flex:1; min-width:0;}
.sb-section-title-row .sb-section-title {flex:1; min-width:0;}
.sb-section-actions {display:flex; align-items:center; gap:4px; position:relative; flex-shrink:0;}

/* 섹션 더보기 메뉴 버튼 */
.sb-section-kebab-btn:after {background:url('../images/icon_sb_kebab.png') no-repeat center / cover !important; width:18px !important; height:26px !important;}

/* 섹션 더보기 드롭다운 메뉴 */
.sb-section-kebab-menu {position:absolute; top:100%; right:0; background:#fff; border:1px solid #D1D5DC; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:30; min-width:160px; padding:4px 0;}
.sb-section-kebab-menu ul {list-style:none; padding:0; margin:0;}
.sb-section-kebab-menu ul li a {display:block; padding:8px 16px; font-size:14px; color:#364153; text-decoration:none; transition:background 0.1s;}
.sb-section-kebab-menu ul li a:hover {background:#F3F4F6;}

/* 섹션 이동 네비게이션 (카드 하단 연결) */
.sb-section-nav {margin:16px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.sb-section-nav-row {display:flex; align-items:center; gap:12px;}
.sb-section-nav-label {font-size:18px; font-weight:500; white-space:nowrap;}
.sb-section-nav-select {flex:1; min-width:0;}
.sb-section-nav-dropdown {padding-right:20px; width:100%; height:36px; border-bottom:1px solid #000;  font-size:14px; outline:none; cursor:pointer; background:none; font-size:18px; font-weight:600; background:url('../images/icon_select_copy.svg') no-repeat right center / 16px;}
.sb-section-nav-dropdown:focus {border-color:#405FF4;}

/* Error Page Styles */
.error-page-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.error-content .error-code {
    font-size: 8rem;
    font-weight: 700;
    color: #405FF4; /* Primary Color */
    margin-bottom: 20px;
}

.error-content .error-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.error-content .error-description {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.error-content .error-actions .btn {
    margin: 0 5px;
}

.date-picker-wrap {
    display: flex;
    align-items: center;
}

.date-picker-wrap button {
    text-decoration: none;
    /*border: 1px solid #bbb;*/
    display: block;
    /*padding: 8.5px 12px;*/
    border-left: 0;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    line-height: 1;
}

.date-picker-wrap i {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}