@charset "utf-8";
#contents {
    min-height: 700px;
    padding: 55px 0;
}
.container {
    width: 1366px;
    height: 100%;
    margin: auto;
    position: relative;
    user-select: none;
}
.con-tit {
    font-size: 26px;
    color: #707070;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
.con-tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background-color: var(--color-primary);
}
.con-tit02 {
    font-size: 26px;
    color: #222;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-primary);
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.con-tit02 .btn-back {
    position: absolute;
    top: 0;
    left: 0;
}
.title01 {
	font-size: 18px;
	font-weight: 700;
	color: #222;
	margin-bottom: 16px;
	margin-top: 48px;
}
.preregister-view {
    border: 2px solid #00196c;
    border-radius: 20px;
    padding: 75px;
    width: 880px;
    margin: auto;
    position: relative;
}
.preregister-view .tit {
    font-size: 26px;
    color: #707070;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
.preregister-view .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background-color: #00196c;
}
.preregister-view .con-box {
    font-size: 16px;
    color: #707070;
    font-weight: 500;
    display: flex;
    justify-content: center;
}
.preregister-view .con-box ul li {
    margin-top: 15px;
}
.preregister-view .con-box ul li:first-child {
    margin-top: 0;
}
.preregister-view .con-box ul li .blank {
    display: inline-block;
    margin: 0 20px;
}
.preregister-view .con-box .con-left {
    margin-right: 50px;
}
.preregister-view .btn-back {
    position: absolute;
    top: 30px;
    left: 30px;
}
.preregister-view .con-box-bottom {
    margin-top: 50px;
    padding: 20px 0;
    border-top: 1px solid #707070;
}
.preregister-view .con-box-bottom ul {
    display: flex;
    justify-content: center;
}
.preregister-view .con-box-bottom ul li {
    font-size: 16px;
    color: #707070;
    font-weight: 500;
    margin: 0 50px;
}
.preregister-add {
    border: 3px solid #00196c;
    border-radius: 40px;
    padding: 75px;
    width: 600px;
    margin: auto;
    position: relative;
}
.preregister-add .tit {
    font-size: 26px;
    color: #707070;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
.preregister-add .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background-color: #00196c;
}
.preregister-add .btn-back {
    position: absolute;
    top: 30px;
    left: 30px;
}
.preregister-add .con-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.preregister-add .con-box .comment {
    margin-top: 100px;
}
.preregister-add .con-box .bottom-btns {
    margin-top: 20px;
}
.preregister-add .add-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.preregister-add .add-form dl {
    width: 350px;
    display: flex;
    margin-top: 20px;
    border-bottom: 1px solid #aaa;
}
.preregister-add .add-form dl dt {
    font-size: 15px;
    color: #707070;
    line-height: 32px;
    width: 200px;
}
.preregister-add .add-form dl dt .material-icons {
    margin-right: 10px;
}
.preregister-add .add-form dl dd {
    width: 100%;
}
.preregister-add .add-form input,
.preregister-add .add-form select {
    border: none;
}


#popup, .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    display: none;
}

#popup .inner,
.popup .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-primary);
    padding: 25px 95px;
	border-radius: 16px;
}
#popup .inner .tit,
.popup .inner .tit {
    font-size: 26px;
    color: #707070;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
#popup .inner .tit:after,
.popup .inner .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background-color: #00196c;
}
#popup .inner .titBox,
.popup .inner .titBox {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 50px;	
}
#popup .inner .titBox:after,
.popup .inner .titBox:after {
	content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 3px;
    background-color: #00196c;
}
#popup .inner .titBox .main,
.popup .inner .titBox .main {
	font-size: 26px;
    color: #707070;
    text-align: center;
}
#popup .inner .titBox .sub,
.popup .inner .titBox .sub {
	font-size: 14px;
    color: #707070;
    text-align: center;
}
#popup .inner .btn-close,
.popup .inner .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
}
#popup .inner .btn-close img,
.popup .inner .btn-close img {
    width: 32px;
}
.qna-type-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.qna-type-list ul li:first-child {
    margin-top: 0;
}
.qna-type-form select {
    width: 85px;
    margin-right: 10px;
}
.qna-type-form input {
    width: 440px;
}
.qna-type-form .btn {
    display: block;
    width: 50px;
    background-color: #ccc;
    font-size: 15px;
    color: #686868;
    line-height: 32px;
    text-align: center;
    margin-left: 10px;
}
.qna-type-add {
    margin-top: 50px;
    padding-top: 10px;
    border-top: 1px solid #cbcbcb;
}
.qna-type-add input {
    width: 500px;
}
.qna-type-add .btn {
    background-color: var(--color-primary);
    color: #fff;
}
.monitor-wrap {
    width: 920px;
    margin: auto;
    padding: 30px 0;
}
.monitor-wrap video {
    width: 100%;
    margin-top: 20px;
}
.monitor-wrap .bottom-btns {
    margin-top: 30px;
}
.login-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrap .inner {
    width: 1117px;
    height: 552px;
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #d9d9d9;
    border-radius: 25px;
    overflow: hidden;
}
.login-wrap .img-box {
    width: 50%;
    position: relative;
}
.login-wrap .img-box img {
    position: absolute;
    top: -1px;
    left: -3px;
    width: 557px;
    height: 550px;
}
.login-wrap .txt-box {
    width: 50%;
    padding: 70px 95px;
}
.login-wrap .txt-box dl {
    text-align: center;
    margin-bottom: 30px;
}
.login-wrap .txt-box dl dt {
    font-size: 30px;
	background: linear-gradient(90deg, #0046ff 0%, rgba(7,151,223, 0.65) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}
.login-wrap .txt-box dl dd {
    font-size: 18px;
    color: #717171;
	font-weight: 500;
    margin-top: 10px;
}
.login-wrap .txt-box .login-form ul li {
    margin-top: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid #707070;
    padding-left: 25px;
    position: relative;
}
.login-wrap .txt-box .login-form ul li:first-child {
    margin-top: 0;
}
.login-wrap .txt-box .login-form ul li .material-icons {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #707070;
}
.login-wrap .txt-box .login-form ul li img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.login-wrap .txt-box .login-form ul li input {
    border: none;
}
.login-wrap .txt-box .login-form ul li a {
    position: absolute;
    bottom: 5px;
    right: 0;
    border: 1px solid #707070;
    text-align: center;
    width: 85px;
    border-radius: 20px;
    text-align: center;
    line-height: 29px;
}
.login-wrap .txt-box .login-form label {
    display: block;
    margin-top: 25px;
}
.login-wrap .txt-box .login-form label input {
    margin-right: 5px;
    position: relative;
    top: 1px;
}
.login-wrap .txt-box .login-form .bottom-btn {
    display: block;
    margin-top: 48px;
    text-align: center;
    background-color: #4e73df;
    color: #fff;
    line-height: 56px;
    border-radius: 8px;
	font-size: 18px;
	font-weight: 500;
}
.login-wrap .txt-box .login-form .idpw-search {
    margin-top: 20px;
    text-align: center;
}
.login-wrap .txt-box .login-form .idpw-search a {
    position: relative;
    display: inline-block;
    margin: 0 15px;
}
.login-wrap .txt-box .login-form .idpw-search a:first-child:after {
    content: "/";
    position: absolute;
    top: 0;
    right: -17px;
}
#popup.settings-popup .inner {
    width: 580px;
    padding: 25px 35px;
}
#popup.settings-popup .bottom-btns {
    margin-top: 30px;
}
#popup .controls ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#popup .controls ul li {
    width: 50%;
    height: 62px;
    padding: 17px 22px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
#popup .controls ul li:nth-last-child(1), 
#popup .controls ul li:nth-last-child(2) {
	border-bottom: 0;
}
#popup .controls ul li .btn-tit {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    vertical-align: top;
}
#popup .controls ul li .onoff {
    display: inline-block;
    width: 70px;
    height: 27px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
    padding: 0 5px;
    text-align: left;
}
#popup .controls ul li .onoff .txt {
    line-height: 27px;
    font-weight: 600;
    padding-left: 50%;
}
#popup .controls ul li .onoff .circle {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
}
#popup .controls ul li .onoff .circle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    top: -1px;
    left: 0;
    transition: 0.2s;
}
#popup .controls ul li .onoff.on {
    background-color: #00196c;
}
#popup .controls ul li .onoff.on .txt {
    padding-left: 5px;
    color: #fff;
}
#popup .controls ul li .onoff.on .circle:after {
    transform: translateX(200%);
}
#popup.alert-popup .txt {
    text-align: center;
    font-size: 26px;
    color: #707070;
    font-weight: 500;
    padding: 50px 0;
}
.event-add-wrap .tit {
    font-size: 26px;
    color: #222;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #00196c;
}
.event-add-wrap .comment {
    text-align: right;
    padding: 10px 0;
    color: #222;
    font-weight: 600;
}
.account-add-form .form-list ul li {
    margin-top: 10px;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid #aaa;
}
.account-add-form .form-list ul li:first-child {
    margin-top: 0;
}
.account-add-form .form-list ul li .material-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #707070;
}
.account-add-form .form-list ul li input {
    border: none;
}
.account-add-form .form-list ul li img {
	position: absolute;
    top: 50%;
	left: 0;
    transform: translateY(-50%);
}
.account-add-form .comment {
    margin-top: 90px;
    text-align: center;
    color: #9b9b9b;
}
#filebox {
    position: relative;
}
#filebox .upload-hidden {
    display: none;
}
#filebox label {
    display: inline-block;
    line-height: 34px;
    padding: 0 10px;
    color: #fff;
    background-color: var(--color-primary);
}
#filebox input {
    height: 34px;
}

.sub-contents-wrap {
    width: 614px;
    margin: auto;
    border: 2px solid #787878;
    padding: 60px 125px;
    /* border-radius: 60px; */
    position: relative;
}
.sub-contents-wrap .btn-back {
    position: absolute;
    top: 30px;
    left: 30px;
}
.stockolder-wrap {
    padding: 130px 140px;
}
.stockolder-wrap .tit {
    font-size: 26px;
    color: #222;
    font-weight: 600;
    margin-bottom: 20px;
}
.stockolder-wrap .btn {
    display: block;
    border-radius: 30px;
    background-color: #00196c;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    margin-top: 20px;
}
.stockholder-search .flex {
    justify-content: space-between;
}
.stockholder-search .flex dl:nth-child(1) {
    width: 156px;
}
.stockholder-search .flex dl:nth-child(2) {
    width: 105px;
}
.stockholder-search .flex dl:nth-child(3) {
    width: 30px;
}
.stockholder-search dl {
    margin-bottom: 20px;
}
.stockholder-search dl:last-child {
    margin-top: 0;
}
.stockholder-search dl dt {
    color: #000;
    font-weight: 600;
}
.stockholder-search dl dd {
    margin-top: 5px;
}
.stockholder-search .search-result {
    margin-top: 30px;
}
.stockholder-search .search-result .tit02 {
    display: block;
    color: #222;
    font-weight: 600;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.stockholder-search .search-result .result {
    color: #707070;
}
#popup.pw-wrap .inner {
    width: 526px;
    padding: 80px;
}
#popup.pw-wrap .inner .bottom-btn {
    display: block;
    margin-top: 50px;
    text-align: center;
    background-color: #4e73df;
    color: #fff;
    line-height: 40px;
    border-radius: 25px;
}
#popup.pw-wrap .inner .input-form li {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #707070;
    margin-top: 50px;
}
#popup.pw-wrap .inner .input-form li:first-child {
    margin-top: 0;
}
#popup.pw-wrap .inner .input-form li input {
    width: 100%;
    border: none;
}
#popup.pw-wrap .inner .input-form li .material-icons {
    color: #707070;
    font-size: 20px;
    cursor: pointer;
}
.top-tit-box {
    font-size: 26px;
    color: #222;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #00196c;
    margin-bottom: 50px;
    padding-bottom: 10px;
}
.event-view-wrap {
    width: 1110px;
    margin: auto;
}
.event-detail {
    padding: 40px 57px;
}
.event-detail .con-box {
    border: 1px solid #7b7b7b;
    border-radius: 10px;
    margin-top: 40px;
    padding: 45px 30px;
}
.event-detail .con-box:first-child {
    margin-top: 0;
}
.event-detail .con-box .tit {
    font-size: 20px;
    color: #002891;
    font-weight: 600;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.event-detail .con-box .tit:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 12px;
    height: 2px;
    background-color: #00196c;
}
.event-detail .con-box dl {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.event-detail .con-box dl dt {
    width: 125px;
    color: #222;
    font-weight: 500;
}
.event-detail .con-box.con-box03 dl dt {
    width: 200px;
}
.event-detail .con-box dl dd {
    width: 220px;
}
.event-detail .con-box dl dd input {
    width: 100%;
}
.mypage {
    width: 457px;
    margin: auto;
    /* border-radius: 30px; */
    border: 2px solid var(--color-primary);
    padding: 50px;
}
.mypage .con-tit {
    margin-bottom: 20px;
}
.mypage .comment {
    text-align: right;
    color: #222;
    font-weight: 600;
}
.mypage dl {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.mypage dl dt {
    width: 65px;
}
.mypage dl dd {
    width: 100%;
}
.mypage dl dd .btn {
    display: inline-block;
    border: 1px solid #dbdbdb;
    padding: 0 20px;
    line-height: 30px;
}
.mypage .bottom-btns {
    margin-top: 50px;
}
/* 2022-02-21 dev */
.ss-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.ss-icon#id-icon {
	background: url(/static/resource_0.1.0/images/id_icon.svg) no-repeat; 
}
.ss-icon#group-icon {
	background: url(/static/resource_0.1.0/images/group.svg) no-repeat;
	height: 16px;
}


.id-check-btn {
	position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    border: 1px solid #707070;
    border-radius: 4px;
    padding: 3px;
}

.id-check-btn:hover {
	background-color: rgba(0,0,0,.1);
}
.writeArea {
	margin: 16px 0;
}
.writeArea dl {
	display: flex;
	font-size: 16px;
}
.writeArea dl + dl {
	margin-top: 16px;
}
.writeArea dl dt {
	flex: 1 1 20%;
	font-weight: 500;
}
.writeArea dl dd {
	flex: 1 1 80%;
}
.txtArea {
	border: 1px solid #bdbdbd;
	padding: 8px;
	height: 60px;
}
.uploadArea {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100px;
	background-color: #f8f8f8;
}
.uploadArea .txt1 {
	font-size: 16px;
	font-weight: 500;
	color: #707070;
}
.uploadArea .txt2 {
	font-size: 14px;
	color: #707070;
	margin-top: 8px;
}
.uploadArea + .bottom-btns {
	margin-top: 40px;
}
.wonbonUpload select {
	height: 40px;
	font-size: 16px;
	font-weight: 500;
}
.wonbonUpload select:focus {
	outline: none;
	border: 1px solid #bdbdbd;
}
.boardBottom {
	display: flex;
	justify-content: center;
	align-items: center;
}
.boardBottom .board-paging {
	flex-grow: 1;
}
.boardBottom .boardArray {
	position: absolute;
	left: 0;
	font-size: 16px;
}
.boardBottom select {
	margin-left: 8px;
	width: 90px;
	color: #717171;
}
.tableBox {
	display: flex;
	flex-wrap: wrap;
	padding: 24px;
	background-color: #f8f8f8;
	gap: 8px;
	margin-bottom: 24px;
}
.tableBox dl {
	width: calc(50% - 4px);
	display: flex;
	padding: 16px;
	background-color: #fff;
	font-size: 16px;
	font-weight: 500;
}
.tableBox dl dt {
	width: 100px;
	position: relative;
	margin-right: 16px;
	padding-right: 16px;
}
.tableBox dl dt::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	right: 0;
	width: 1px;
	height: 16px;
	background-color: #717171;
}
.tableBox dl dd {
	flex-grow: 1;
	color: #717171;
}
.titleLine {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 16px;
}
.titleLine .title01 {
	margin-bottom: 0;
}
.txtLink {
	display: inline;
	text-decoration: underline;
	color: var(--color-primary);
}
/* Top Bar */
#top-bar { display: flex; align-items: center;background: #fff;gap: 16px;}
#top-bar h1 { font-size: 18px; margin: 0; font-weight: 600; }
#top-bar button {width: 124px;}
#file-controls { display: flex; align-items: center; gap: 8px; }
#templateName { min-width: 450px; }
#pdfUrl { flex: 1; min-width: 300px; }
#view-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Main Container */
#main-container { display: flex; flex: 1; overflow: hidden; }

/* Left Toolbar */
#left-toolbar { width: var(--toolbar-width); background: #fff; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: 12px 16px; gap: 12px; }
#left-toolbar button { width: 100%; font-size: 14px; text-align: center; }
#left-toolbar select { width: 100%; height: 38px;font-weight: 500; }

/* Viewer */
#viewer-container { flex: 1; background: #e9ecef; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 20px; }
#canvas-wrapper { position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.15); }
#pdf-canvas { display: block; }
#overlay { position: absolute; left: 0; top: 0; }

/* Right Sidebar */
#right-sidebar { display: flex; border-left: 1px solid var(--border-color); }
#thumbnail-list { width: var(--thumbnail-width); background: #fff; overflow-y: auto; padding: 8px; border-right: 1px solid var(--border-color); }
.thumbnail-item { margin-bottom: 8px; text-align: center; }
.thumbnail-item canvas { border: 2px solid transparent; cursor: pointer; max-width: 100%; height: auto; }
.thumbnail-item canvas.active { border-color: var(--primary-color); }
.thumbnail-item p { font-size: 12px; margin: 4px 0 0; }

#field-panel { width: var(--editor-width); background: var(--background-color); padding: 16px; overflow-y: auto; }
#field-panel h3 { margin-bottom: 12px;font-size: 16px;font-weight: 500; }
#fieldList { max-height: 45vh; overflow-y: auto; margin-bottom: 20px;}
.field-item { padding: 8px; border: 1px solid #ccc;background: #fff; border-radius: 4px; cursor: pointer; }
.field-item + .field-item {margin-top: 8px;}
.field-item:hover { background: #e9ecef; }
.field-item.selected { border-color: var(--primary-color); background-color: #e7f1ff; } /* Default blue for text */
.field-item-type-checkbox.selected { border-color: #14812d; background-color: rgba(28, 184, 65, 0.1); }
.field-item-type-signature.selected { border-color: #4d44b5; background-color: rgba(102, 92, 226, 0.1); }
.field-item-type-number.selected { border-color: #d98d2a; background-color: rgba(240, 173, 78, 0.1); }
.field-item-type-amount.selected { border-color: #b92c28; background-color: rgba(217, 83, 79, 0.1); }
.field-item-type-date.selected { border-color: #28a7a7; background-color: rgba(40, 167, 167, 0.1); }
#field-editor { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); }
#field-editor label { font-size: 13px; display: block; margin-bottom: 4px; font-weight: 500; }
#field-editor input, #field-editor select { margin-bottom: 12px; }
/* Custom Confirm Dialog */
#custom-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#custom-confirm-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 400px;
  text-align: center;
}
#custom-confirm-message {
  font-size: 16px;
  margin: 0 0 20px;
}
#custom-confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}
#custom-confirm-buttons button {
  padding: 10px 20px;
  min-width: 80px;
}
:root {
  --primary-color: #0046ff;
  --border-color: #dee2e6;
  --background-color: #f8f9fa;
  --toolbar-width: 160px;
  --thumbnail-width: 150px;
  --editor-width: 320px;
}
/* General UI Elements */
.template input[type=text],
.template input[type=number],
.template select { width: 100%; height: 46px; line-height: 32px; padding: 0 8px; box-sizing: border-box; border: 1px solid #ccc;}
.template button { padding: 8px 12px; border: 1px solid #ccc; border-radius: 0; background-color: #fff; cursor: pointer; font-weight: 500; border-radius: 4px;  }
.template button:hover { background-color: #f0f0f0; }
.template button.primary { background-color: var(--color-primary); color: white; border-color: var(--color-primary); }
/*.template button.primary:hover { background-color: #0046ff; }*/
.template button:disabled { cursor: not-allowed; opacity: 0.6; }
/* Tab Styles */
.template .tab-container { display: flex;border-bottom: 1px solid var(--border-color);margin-bottom: 24px; }
.template .tab-button { padding: 16px; border: none; background: none; cursor: pointer; font-size: 15px;border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.template .tab-button.active { border-bottom-color: var(--color-primary); font-weight: 600; color: var(--color-primary); }
.template .tab-content { display: none; height: 100%; }
.template .tab-content.active { display: block; }
/* Party Manager Styles */
#info-settings-tab { padding: 20px; background: #f8f9fa;}
.form-section { margin-bottom: 24px; background: #fff; padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
.form-section h3 { font-size: 16px;font-weight: 500; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.party-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; margin-bottom: 8px; }
.party-item select,
.party-item input { padding: 0 8px; border: 1px solid #ccc; }
.party-item .role-type { flex: 1; }
.party-item .user-id { flex: 2; }
.party-item button {width: 56px; height: 46px;}
.bottomBtns {display: flex;justify-content: center;gap: 16px;}
.bottomBtns button {pwidth: 140px;height: 48px;}
.bottomBtns .btn { padding: 8px 12px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; font-weight: 500; }
.bottomBtns .btn:hover { background-color: #f0f0f0; }
.bottomBtns .btn.primary { background-color: var(--color-primary); color: white; border-color: var(--color-primary); }
.bottomBtns .btn.sm {padding: 4px 8px;font-size: 14px;height: 32px;}
/* Tab Styles */
.tab-nav { display: flex; border-bottom: 1px solid var(--border-color);margin-bottom: 24px; }
.tab-btn { padding: 12px 20px; cursor: pointer; background: none; border: none; font-size: 16px; font-weight: 500; color: #888; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
/* Form Styles */
.form-group {
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically align items */
}
.form-group + .form-group {
	margin-top: 8px;
}
.form-group label {
    display: inline-block; /* Change to inline-block */
    width: 200px; /* Give label a fixed width */
    margin-bottom: 0; /* Remove bottom margin */
    margin-right: 15px; /* Add right margin for spacing */
    font-weight: 500;
    color: var(--text-color);
    flex-shrink: 0; /* Prevent label from shrinking */
}
.form-group label.required-label::after { content: ' *'; color: red; }
.form-group input[type="text"], .form-group input[type="number"], .form-group input[type="date"], .form-group textarea {
    flex-grow: 1; /* Default: Allow input to take remaining space */
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
	height: 46px;
}
/* Specific width for input[type="text"] only */
.form-group input[type="text"]:not(.field-type-amount) {
    width: 600px; /* Force a wider fixed width */
    flex-grow: 0; /* Disable flex-grow for fixed width */
}
.form-group input[type="checkbox"] { width: auto; margin-right: 5px; flex-grow: 0; }
/* Special handling for checkbox to align with label */
.form-group input[type="checkbox"] + label { /* This targets the label *after* a checkbox */
    width: auto; /* Let checkbox label take natural width */
    margin-right: 0;
    margin-left: 5px; /* Space between checkbox and its label */
}
/* Need to adjust the switch div as well */
.form-group > div[th\:switch] {
    flex-grow: 1;
    display: flex; /* Make the switch div a flex container too */
    align-items: center; /* Align its content vertically */
}
.form-actions {
    margin-top: 30px;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    gap: 10px; /* Space between buttons */
}
/* PDF Viewer Styles */
#preview-container { display: flex; height: 70vh; border: 1px solid var(--border-color); }
#preview-viewer { flex: 1; background: #e9ecef; overflow: auto; text-align: center; padding: 20px; }
#preview-canvas-wrapper { display: inline-block; position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.15); }
#preview-canvas { display: block; }
#preview-thumbnails { width: 150px; background: #fff; overflow-y: auto; padding: 8px; border-left: 1px solid var(--border-color); }
.preview-thumbnail-item { margin-bottom: 8px; text-align: center; }
.preview-thumbnail-item canvas { border: 2px solid transparent; cursor: pointer; max-width: 100%; height: auto; }
.preview-thumbnail-item canvas.active { border-color: var(--primary-color); }
.preview-thumbnail-item p { font-size: 12px; margin: 4px 0 0; }
/* Field Type Specific Styles */
.form-group input.field-type-text { border-color: #00528a; } /* Blue */
.form-group input.field-type-number { border-color: #d98d2a; } /* Orange */
.form-group input.field-type-amount { border-color: #b92c28; } /* Red */
.form-group input.field-type-date { border-color: #28a7a7; } /* Teal */
.form-group input.field-type-checkbox { border-color: #14812d; } /* Green */
.form-group textarea.field-type-signature { border-color: #4d44b5; } /* Purple */
.form-group select {height: 46px;border-radius: 6px;border-color: var(--border-color);}
.innerBox {
	padding: 20px;
	background-color: #f8f9fa;
}
.innerBox .inner {
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.innerBox .inner + .inner {
	margin-top: 16px;
}
.typeList {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.typeList .box {
	width: 140px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.typeList .checkbox-label {
	display: block;
	width: 100%;
	font-size: 16px;
}
.typeList .box.double {
	width: 380px;
}
.typeList .box.double .checkbox-label {
	width: calc(50% - 2px);
}
.typeList p {
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
}
.selectedType {
	padding: 24px;
	background-color: #f8f8f8;
	border: 1px solid #d9d9d9;
	margin-bottom: 48px;
	font-size: 16px;
	position: relative;
}
.selectedType dl {
	display: flex;
}
.selectedType dl dt {
	width: 127px;
	padding: 5px 24px 0 0;
	margin-right: 24px;
	border-right: 1px solid #d9d9d9;
	font-weight: 500;
}
.selectedType dl dd {
	width: calc(100% - 151px);
	min-height: 35px;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 8px;
}
.selectedType dl dd label {
	padding: 4px 16px;
	border: 1px solid #d9d9d9;
	background-color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.selectedType dl dd label .material-icons {
	font-size: 17px;	
	vertical-align: top;
	margin-left: 4px;
	position: relative;
	left: 7px;
}
.selectedType dl dd label img {
	margin-left: 4px;
	position: relative;
	top: -2px;
	left: 7px;
}
.selectedType .bottomBtns {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
	flex-direction: column;
	gap: 8px;
}
.selectedType .bottomBtns .btn {
	width: 97px;
	padding: 4px;
}
.errorWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.errorWrap .txt01 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: #171719;
}
.errorWrap .txt02 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: #bababa;
  margin-top: 8px;
}
.errorWrap .btn {
  width: 84px;
  border-radius: 15px;
  margin-top: 20px;
  font-weight: 700;
}