@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap');
  
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

  
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Black';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-style: strong;
}

@font-face {
    font-family: 'neurimboGothicRegular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/neurimboGothicRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'YUniverse-B';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_yuniverse@1.0/YUniverse-B.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* Reset */
.charsheet select,
.charsheet div,
.charsheet button,
.charsheet textarea,
.charsheet span,
.charsheet input,
.charsheet img,
.charsheet label{box-sizing: border-box; outline:0; outline:0; appearance:none !important; -webkit-appearance:none !important;}
.ui-dialog .charsheet {padding:0;}
.charsheet .sheet-wrap {font-size:13px;}
.charsheet .sheet-wrap * {color:#fff; outline:0 !important; font-family: 'Pretendard-Regular';"Malgun Gothic","맑은 고딕","Nanum Gothic",Dotum,'돋움',Helvetica,sans-serif; letter-spacing:-0.02em;}
.charsheet .sheet-wrap p {margin:0;}
.charsheet .sheet-wrap input,
.charsheet .sheet-wrap textarea,
.charsheet .sheet-wrap select,
.charsheet .sheet-wrap .uneditable-input {margin:0; /*border-radius:0 !important;*/}
.charsheet .sheet-wrap input[type="checkbox"],
.charsheet .sheet-wrap input[type="radio"] {display:block; position:absolute; top:0; left:0; opacity:0; border:none !important;}

.charsheet .sheet-wrap input[type="text"],
.charsheet .sheet-wrap input[type="number"] {
	border:none; height:30px; border-radius:0; background:transparent; padding:0 5px; font-size:12px; width:100%;}

.charsheet .sheet-wrap select {border:none; height:30px; padding:0 5px; font-size:12px; width:100%; background:transparent;}
.charsheet .sheet-wrap input[type="number"]::-webkit-outer-spin-button,
.charsheet .sheet-wrap input[type="number"]::-webkit-inner-spin-button {appearance:none; -webkit-appearance:none; -moz-appearance:none; margin:0;}
.charsheet .sheet-wrap select,
.charsheet .sheet-wrap input[type="checkbox"],
.charsheet .sheet-wrap input[type="radio"],
.charsheet .sheet-wrap button {cursor:pointer;}
.charsheet .sheet-wrap button[type="roll"]:before {display:none !important;}
.charsheet .sheet-wrap input:-internal-autofill-selected {background-color:transparent !important; appearance:none !important; -webkit-appearance:none !important;  -moz-appearance:none !important;}
.charsheet .sheet-wrap input[type="number"] {}
.charsheet .sheet-wrap select * {color:#000 !important;}
.charsheet .sheet-wrap input[type="checkbox"],
.charsheet .sheet-wrap input[type="radio"],
.charsheet .sheet-wrap button,
.charsheet .sheet-wrap select {box-shadow: none !important; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.charsheet .sheet-wrap select {padding-right:15px; background:url('https://i.imgur.com/zexyzpS.png') no-repeat top 50% right 0px;}
.charsheet .sheet-wrap button {border:none; margin:0; background:transparent; font-size:12px; text-shadow:none !important;}
.charsheet .sheet-wrap textarea {width:100%; background:transparent; border:none; resize:none; line-height:1.5;}
.charsheet .sheet-wrap fieldset {margin:0; padding:0; border:none;}
.charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol {z-index:990 !important; height:auto; top:0; bottom:0;}
.charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol button,
.charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol a {width:30px; height:30px; border:none; border-radius:0; line-height:30px; padding:0; text-align:center;}
.charsheet .sheet-wrap .repcontainer.editmode .repitem .itemcontrol button {background:red;}

.charsheet .sheet-wrap .repcontrol {display:block; position:relative; overflow:hidden; margin-bottom:30px; background-image: linear-gradient(135deg, #7088ff, #81838b);border-radius:0; font-size:11px;}
.charsheet .sheet-wrap .repcontrol:before {content:""; display:block; position:absolute; width:1px; top:5px; bottom:5px; left:50%; background:#fff; opacity:.5;}

/* 기능치 Edit 과학 언어 외국어 등 */
.charsheet .sheet-wrap .repcontrol > * {height:20px; line-height:20px; padding:0 10px; font-size:11px; font-weight:400; color:#111214;}

/*아이콘 2*/
.charsheet .sheet-wrap .sheet-dice {display:inline-block; vertical-align:middle; border:none; padding:0 !important; margin:0 !important; width:20px; height:20px; border-radius:0; background:url('https://i.imgur.com/AgUBUaa.png') no-repeat 50% 50%; background-size:90% auto;}
.charsheet .sheet-wrap .sheet-dice:before {display:none !important;}

/*플레이스홀더*/
.charsheet .sheet-wrap input::placeholder {color:rgba(255, 255, 255, .6);}
.charsheet .sheet-wrap textarea::placeholder {color:rgba(255, 255, 255, .6);}

.charsheet .sheet-tal {text-align:left !important;}
.charsheet .sheet-tar {text-align:right !important;}
.charsheet .sheet-tac {text-align:center !important;}

.charsheet .sheet-wrap .inlinerollresult {display:inline !important; font-size:1em !important; opacity:1 !important; padding:0 !important; background:transparent !important; border:none !important;}


/* 기본 레이아웃 틀 작업 */

.sheet-wrap {display:block; position:relative; max-width:850px; min-width:820px; margin:0 auto; border:1px solid #ffffff; padding:1px;}

/*배경*/
.sheet-wrap .sheet-wrap-inner {
	border: 1px solid #7088ff;
	display:block; position:relative; min-height:500px; padding:10px; 		
	background:url('https://i.imgur.com/zlwft8I.png') no-repeat, #111214; 
	background-size:100% auto;}


.sheet-line-box {
	box-sizing:border-box;
	backdrop-filter:blur(2px);
	border:1px solid #7088ff;}
.sheet-tit {position:relative; z-index:0;}
.sheet-tit strong {display:block; position:relative; z-index:-1;}
.sheet-tit button {display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:2;}

.sheet-checkbox-area {position:relative; z-index:0;}
.sheet-checkbox-area span {display:block; position:relative; z-index:-1;}
.sheet-checkbox-area input[type="checkbox"],
.sheet-checkbox-area input[type="radio"]{display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:2;}

.sheet-toggle-wrap {display:none; position:relative; padding:10px 0 30px;}
.sheet-toggle-menu[value="1"] + .sheet-toggle-wrap {display:block;}

.sheet-toggle-button {
	background:url('');
	margin-bottom:10px;}
	
/*파트별 제목*/
.sheet_ribbon 
	{padding-top: 20px;
	text-align: center;}

.sheet-toggle-button span {
	display:block; position:relative; z-index:-1; padding:10px 20px; color:#fff !important; font-weight:800; font-size:15px;
	text-shadow:0px 0px 5px #ffffff,0px 0px 5px #ffffff;
}
.sheet-toggle-button span:after {content:"▼"; display:block; position:absolute; right:1em; top:10px;}
.sheet-toggle-button input[type="checkbox"]:checked + span:after,
.sheet-toggle-button input[type="radio"]:checked + span:after {content:"▲";}




/* ----------------상단 : 프로필 레이아웃------------------ */


/* 시나리오 제목 + topview 세로 */
.sena-tit {
	margin:225px 0 200px 0;
	text-align:center;
	height:25px;
	background-position: center;
}
.sena-tit input {
	border-radius: 1em !important;
	padding: 2 0 12px !important;
	background: black !important;
	width:60% !important;
	text-align:center;
	font-size: 17pt !important;
	font-family: 'neurimboGothicRegular' !important;
	color:#fff !important;
	text-shadow:0px 0px 5px #100965,0px 0px 5px #100965;
	padding-bottom: 8px;}

.sena-tit .sena-tit-star {
	font-family: 'YUniverse-B' !important;
	display: inline-block;
	font-size: 10pt;
	color:#fff !important;
	text-shadow:0px 0px 5px #100965,0px 0px 5px #100965;
	position: relative;
    top: -2px;
}

.sheet-top-header {
	border: 1px solid #7088ff;
		border-top:18px solid #7088ff;
	width:824px; 
	height:320px;
	padding:20px;
	position:relative;
	overflow:hidden;
	display: inline-flex;
}


/* KPC, PC 이름 */
.kpc-pc-name {
	text-shadow:0px 0px 5px #100965,0px 0px 5px #100965;
	position:absolute;
	top:290px;
	left:360px;
	width:40%;}

.pc-name {
	display:inline-block;}


/* 각성자시민증 */
.notice {
	position:absolute;
	right:20px;
	bottom:20px;}


/* 캐릭터 기본정보 */
.sheet-profile-tit {
	font-family: 'neurimboGothicRegular' !important;
	font-size:17pt;
	color:#fff !important;
	padding:25px 0 5px 0;
	text-align:center;}

.sheet-top-header .info {
    width:250px; 
}
.sheet-top-header .sheet-profile {
	display:block;
	position:relative;
	width:190px;
	margin-top:72px;
	margin-left:18px;
	height:196px;}
.sheet-top-header .sheet-profile > div > div {display:table; width:100%; height:31px;}
.sheet-top-header .sheet-profile > div > div > * {display:table-cell; vertical-align:middle;}
.sheet-top-header .sheet-profile > div > div > strong {width:3em;color: #fff;}
.sheet-top-header .sheet-profile > div > div input {display:block; position:relative; width:100%; height:25px !important; border-bottom:1px solid #fff !important; text-align:center;}
.sheet-top-header .sheet-profile .sheet-tit {display:block; position:absolute; left:0; right:0; top:0; height:30px; line-height:30px; text-align:center; color:#fff; background:#ffffff; color:#fff;}
.sheet-top-header .sheet-profile .sheet-tit input {text-align:center !important; color:#fff !important; font-weight:400; font-family:'Do Hyeon', serif; font-size:18px;}


/* 캐릭터 이미지, 이름 */
.cha-pic-frame {
	position: absolute;}

.sheet-top-header .pic-name {width:193px;}
.sheet-top-header .pic-name input { 
	height: 40px !important;
	text-align:center;
	font-size: 13pt !important;
	font-family: 'Pretendard-Black' !important;
	color:#ffffff !important;
	text-shadow:0px 0px 5px #fff,0px 0px 5px #fff;
	border-bottom:1px solid #ffffff !important; 
}
.cha-name {
    position: absolute;
    width: 400px;
    margin: 0 0 0 204px;
}

/*실제 이미지 삽입부*/
.sheet-top-header .pic-name .sheet-pic {
	border: 1px solid #7088ff;
	background-color:#2a2a2a;
	display:block;
	position:relative;
	width:193px; height:260px;
	overflow:hidden;}
.sheet-top-header .pic-name .sheet-pic img {
	width: 193px;
	display:block; position:absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}

.dormitory {
	position:absolute;
	margin: 300px 0 0 370px;}


/* 캐릭터 특성치 */
.sheet-spec-sub {
	margin-top:73px;
	width:380px;}

.sheet-top-header .sheet-spec {
	display:block; 
	position:relative;  
	overflow:hidden;}

.sheet-top-header .sheet-spec .sheet-title {
	display:block; position:relative; padding-bottom:20px; padding-top:10px;}
.sheet-top-header .sheet-spec .sheet-item {
	display:block;
	position:relative;
	float:left;
	box-sizing:border-box;
	margin-top: 2px;
}

/* 특성치 세부항목 근력 건강 배경 */
.sheet-top-header .sheet-spec .sheet-tit {
	display:block;
	position: relative;
	margin: 0 auto;
	width:100%;
	height: 2em;
	line-height:2em;
	text-align:center;
	background-image: linear-gradient(135deg, #7088ff, #81838b);
	z-index:0;}

.sheet-top-header .sheet-spec .spec-cell {
	float: left;
	margin: 2px 5px;
	text-align:center;
	width: 80px;
	height:60px;
}


.sheet-top-header .sheet-spec .spec-cell .sheet-item .sheet-tit + div {display:block; position:relative; width:80px; margin:0 auto;}

/*특성치 세부항목 근력 건강 제목*/
.sheet-top-header .sheet-spec .spec-cell .sheet-tit strong {
	font-size:12px; color:#fff; font-weight:900;}

.sheet-top-header .sheet-spec .spec-cell .sheet-item input[type="text"],
.sheet-top-header .sheet-spec .spec-cell .sheet-item input[type="number"],
.sheet-top-header .sheet-spec .spec-cell .sheet-item select {
	height:23px !important; 
	margin: 0 auto;
	text-align:center; 
	width:100%; 
	font-size:13px; 
	font-weight:500; 
	color:#fff; 
	padding:0 !important; 
	background:transparent;}

.sheet-top-header .sheet-control {display:block; position:relative; text-align:center; margin-top:10px; margin-bottom:20px; color:#fff;}
.sheet-top-header .sheet-control > * {display:inline-block; position:relative; vertical-align:middle;}
.sheet-top-header .sheet-control > span {color:#fff;}
.sheet-top-header .sheet-control > span span {display:block; position:absolute; bottom:100%; left:0; right:0; text-align:center; font-size:10px; color:#fff; margin-bottom:2px; opacity:.7;}
.sheet-top-header .sheet-control input {height:20px !important; border-radius:9em !important; background:rgba(255,255,255,.2) !important; text-align:center; color:#fff !important;}
.sheet-top-header .sheet-control input.sheet-write-able {background:rgba(255,255,255,.4) !important;}
.sheet-top-header .sheet-control input.sheet-point {background:rgba(238,255,90,.2) !important; color:#fff !important; font-weight:800;}
.sheet-top-header .sheet-control strong {color:#fff; margin-right:5px;}
.sheet-top-header .sheet-control button {height:20px !important; border-radius:9em; background:#ffffff; color:#fff; font-size:11px !important; padding:0 5px !important; font-weight:100 !important; margin-left:5px; border:1px solid #a4a7a6;}
.sheet-top-header .sheet-control button + button {margin-left:0px;}




/* 중간 : 스태이터스 */

.sheet-mid-header {display:inline-flex; position:relative; margin:7px 0; overflow:hidden;}
.sheet-mid-header > div {box-sizing:border-box; margin:3px 0; padding:5px 10px 10px;}
.sheet-mid-header .sheet-left {width:70%; float:left;}
.sheet-mid-header .sheet-right {width:29%; float:right;}
.sheet-mid-header .sheet-san {width:40%;}
.sheet-mid-header .sheet-block {width:20%;margin-right: 10px;}
.sheet-mid-header .sheet-block:last-child {margin-right: 0;}

.sheet-mid-header .sheet-tit {display:inline-block; position:relative; line-height:22px;margin-top:5px;}
.sheet-mid-header .sheet-tit strong {
	text-align:center;
	background:#7088ff;
	color:#fff; 
	padding:0; font-size:1em;
	padding: 0 5px;}


.sheet-mid-header .san-control {
	margin-top: 6px;
	text-align: left;
	width: 70%;
	display:block; position:absolute; }
.sheet-mid-header .san-control > * {
	color:#7088ff;}
.sheet-mid-header .san-control input[type="text"],
.sheet-mid-header .san-control input[type="number"],
.sheet-mid-header .san-control select {height:20px; width:auto;}
.sheet-mid-header .san-control input[type="number"] {width:2em; text-align:center;}
.sheet-mid-header .san-control .sheet-checkbox-area {display:inline-block; }
.sheet-mid-header .san-control .sheet-checkbox-area span:before {content:""; display:inline-block; position:relative; width:.7em; height:.7em; vertical-align:middle;  margin-right:3px;border:1px solid #ffffff}
.sheet-mid-header .san-control .sheet-checkbox-area input:checked + span:before {background:#ffffff;}



.sheet-mid-header .sheet-control {display:block; position:absolute; top:10px; right:10px;}
.sheet-mid-header .sheet-control > * {line-height:20px; margin-left:10px;}
.sheet-mid-header .sheet-control input[type="text"],
.sheet-mid-header .sheet-control input[type="number"],
.sheet-mid-header .sheet-control select {height:20px; width:auto; border-bottom:1px solid #ffffff;}
.sheet-mid-header .sheet-control input[type="number"] {width:3em; text-align:center;}
.sheet-mid-header .sheet-control .sheet-checkbox-area {display:inline-block; margin-left:10px;}
.sheet-mid-header .sheet-control .sheet-checkbox-area span:before {content:""; display:inline-block; position:relative; width:.7em; height:.7em; vertical-align:middle; border:1px solid #ffffff; margin-right:3px;}
.sheet-mid-header .sheet-control .sheet-checkbox-area input:checked + span:before {background:#ffffff;}

.sheet-graph-box {display:table; width:100%; table-layout:fixed; padding-top:10px;}
.sheet-graph-box > * {display:table-cell; vertical-align:middle;}
.sheet-graph-box .sheet-graph-input-box {
	text-align: center;
	width:9em; background:#353638;}
.sheet-graph-box .sheet-graph-input-box > * {display:inline-block; vertical-align:middle;}
.sheet-graph-box .sheet-graph-input-box input[type="text"],
.sheet-graph-box .sheet-graph-input-box input[type="number"] {width:30px; text-align:center; font-size:1.2em; font-weight:800;}
.sheet-graph-box .sheet-bar {padding-left:10px;}
.sheet-graph-box .sheet-bar > span {display:block; position:relative; height:7px; background:rgba(255,255,255,.1);}
.sheet-graph-box .sheet-bar > span:before {content:""; display:block; position:absolute; top:0; bottom:0; left:0; background-image: linear-gradient(-90deg, #ffffff, #ffffff); transition:.3s all; -webkit-transition:.3s all; z-index:0;}
.sheet-graph-box .sheet-bar i {display:block; position:absolute; bottom:100%; left:0;  transition:.3s all; -webkit-transition:.3s all; z-index:2;}
.sheet-graph-box .sheet-bar i:before {content:""; display:block; position:absolute; bottom:3px; left:80%; border:5px solid transparent; border-bottom-width:0; border-top-color:#ffffff; transform:translateX(-50%); -webkit-transform:translateX(-50%);}

.sheet-graph-box .sheet-other-box {padding-right:5px;}
.sheet-graph-box .sheet-other-box input[type="text"],
.sheet-graph-box .sheet-other-box input[type="number"] {text-align:center; font-size:1.2em; font-weight:800; background:#353638;}
.sheet-graph-box .sheet-ohter-control button {font-size:12px !important; border-radius:0 !important; width:100%; background-image: linear-gradient(135deg, #7088ff, #81838b); color:#fff; font-weight:800; height:30px;} 


.sheet-view-menu {display:table; width:100%; table-layout:fixed; overflow:hidden; margin-bottom:20px;}
.sheet-view-menu > * {display:table-cell; vertical-align:middle;}
.sheet-view-menu > * + * {text-align:right;}

.sheet-dice-setting {padding-left:1em;}
.sheet-dice-setting > div {height:37px; line-height:37px;}
.sheet-dice-setting .sheet-dice-check {display:block; position:relative; float:left; height:37px; line-height:37px;}
.sheet-dice-setting .sheet-dice-check > span {display:block; position:relative; padding:0 .8em; color:#fff; opacity:.3; z-index:0;}
.sheet-dice-setting .sheet-dice-check > span:before {content:""; display:block; position:absolute; top:-10px; left:50%; border:6px solid transparent; border-bottom-width:0; border-top-color:#ffffff; transform:translateX(-50%); -webkit-transform:translateX(-50%); opacity:0; transition:.3s all; -webkit-transition:.3s all;}
.sheet-dice-setting .sheet-dice-check > input[type="radio"] {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
.sheet-dice-setting .sheet-dice-check > input[type="radio"]:checked + span {opacity:1; color:#ffffff; font-weight:800;}
.sheet-dice-setting .sheet-dice-check > input[type="radio"]:checked + span:before {top:0; opacity:1;}

.sheet-dice-setting .sheet-free-dice {float:right;}
.sheet-dice-setting .sheet-free-dice > * {float:left;}
.sheet-dice-setting .sheet-free-dice > span {padding-right:10px;}
.sheet-dice-setting .sheet-free-dice > input[type="text"] {width:80px !important; height:25px !important; text-align:center; margin:6px 0; border-radius:9em; background:rgba(70,70,80,.2);}
.sheet-dice-setting .sheet-free-dice .sheet-dice {height:37px !important; width:30px !important;}

.sheet-toggle-menu {width:30%;}
.sheet-toggle-menu div {display:block; position:relative; height:24px; z-index:0;}
.sheet-toggle-menu div:before {content:""; display:block; position:absolute; top:0; bottom:0; border-radius:9em; width:33.33%; background:#ffffff; transition:.3s all; -webkit-transition:.3s all;}
.sheet-toggle-menu div > * {display:block; position:absolute; width:33.33% !important; height:24px !important; line-height:24px; text-align:center; transition:.3s all; -webkit-transition:.3s all;}
.sheet-toggle-menu div span {z-index:0;}
.sheet-toggle-menu div input[type="radio"] {z-index:2;}
.sheet-toggle-menu div input[type="radio"]:checked + span {color:#fff;}
.sheet-toggle-menu div .sheet-view-def {left:0 !important;}
.sheet-toggle-menu div .sheet-view-att {left:33.33% !important;}
.sheet-toggle-menu div .sheet-view-bak {left:66.66% !important;}


/* Skill List */

.charsheet .sheet-specs-wrap {position:relative; padding:25px 10px 15px; margin:0 -20px;}
.charsheet .sheet-chk-edit,
.charsheet .sheet-chk-edit-label {display:block; position:absolute; width:75px; height:15px !important; top:0 !important; right:20px; left:auto !important;}
.charsheet .sheet-chk-edit-label span {display:block; float:left; margin-right:3px; color:#ffffff; font-weight:600;}
.charsheet .sheet-chk-edit {z-index:2;}
.charsheet .sheet-chk-edit-label {z-index:0; opacity:.8;}
.charsheet .sheet-chk-edit-label strong {display:block; position:relative; float:right; width:40px; height:11px; border-radius:9em; overflow:hidden; background:rgba(70,70,80,.3); margin-top:3px;}
.charsheet .sheet-chk-edit-label strong:before {content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:60%; border-radius:9em; background:#ffffff; transition:.3s all; -webkit-transition:.3s all;}
.charsheet .sheet-chk-edit:checked + .sheet-chk-edit-label {opacity:1;}
.charsheet .sheet-chk-edit:checked + .sheet-chk-edit-label strong:before {left:40%;}
.charsheet .sheet-chk-edit:checked ~ * .sheet-spec-item .sheet-edit {display:block !important;}
.charsheet .sheet-chk-edit:checked ~ * .sheet-spec-item .sheet-read {display:none !important;}

.charsheet .sheet-chk-edit ~ * .sheet-group .repcontrol {display:none !important;}
.charsheet .sheet-chk-edit:checked ~ * .sheet-group .repcontrol {display:block !important; margin-top:5px !important;}
.charsheet .sheet-chk-edit:checked ~ * .sheet-group .sheet-w-txt > input[type="text"] {border-bottom:1px solid rgba(255,255,255,.5);}

.charsheet .sheet-group .sheet-w-txt > input[type="text"] {font-size:13px; color:#fff;}

.charsheet .sheet-spec-list {display:block; position:relative; overflow:hidden; margin-top:10px;}
.charsheet .sheet-spec-list .sheet-group {display:block; position:relative; width:33.33%; padding:0 10px; float:left; border-right:1px solid rgba(70,70,80,.2);}
.charsheet .sheet-spec-list .sheet-group.last {border:none;}
.charsheet .sheet-spec-list * {font-family: 'Pretendard-Regular';}

.charsheet .sheet-spec-item {display:block; position:relative; padding-left:35px;}

/* 아이콘 1 */
.charsheet .sheet-spec-item .sheet-chk-spec {display:block; position:absolute; left:0; width:24px; height:25px !important; top:50% !important; transform:translateY(-50%); -webit-transform:translateY(-50%); background:url('https://i.imgur.com/qNKQ4n4.png') no-repeat left 5px top 50%; opacity:1 !important; z-index:1;}
.charsheet .sheet-spec-item .sheet-chk-spec:checked {background-position:right 4px top 50%;}
.charsheet .sheet-spec-item .sheet-edit {display:none !important;}
.charsheet .sheet-spec-item .sheet-name {display:block; position:relative; margin-right:45px; height:30px; line-height:30px; z-index:0; font-size:13px; }
.charsheet .sheet-spec-item .sheet-name p {display:block; position:relative; line-height:30px; color:#fff;}
.charsheet .sheet-spec-item .sheet-name .sheet-read,
.charsheet .sheet-spec-item .sheet-name .sheet-edit {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.charsheet .sheet-spec-item .sheet-name .sheet-read button {display:block; position:relative; width:100%; height:100%;}
.charsheet .sheet-spec-item .sheet-grade {display:block; position:absolute; right:0; top:0; width:40px; bottom:0; z-index:1;}
.charsheet .sheet-spec-item .sheet-grade > input[type="number"].sheet-read {display:block; position:absolute; top:5px; right:0; left:0; width:100%; height:20px; border-radius:9em !important; background:rgba(70,70,80,.30); text-align:center; color:#fff;}
.charsheet .sheet-spec-item .sheet-grade > input[type="number"].sheet-edit {display:block; position:absolute; top:5px; right:0; left:0; width:100%; height:20px; border-bottom:1px solid rgba(255,255,255,.2); text-align:center; color:#fff;}
.charsheet .sheet-spec-item .sheet-name .sheet-w-txt {display:block; position:relative; padding-right:40px;}
.charsheet .sheet-spec-item .sheet-name .sheet-w-txt span {display:block; position:absolute; top:0; right:0; bottom:0; width:40px;}


/* Fight */

.sheet-fight-box {display:block; overflow:hidden; margin:0 -.3% 10px;}
.sheet-fight-box .sheet-item {display:block; position:relative; width:24.4%; height:41px; float:left; box-sizing:border-box; margin:0 .3%; padding-left:7em; border:1px solid #7088ff;}
.sheet-fight-box .sheet-item .sheet-tit {display:block; position:absolute; top:0; left:0; bottom:0; width:7em; line-height:30px; text-align:center; background-image: linear-gradient(135deg, #7088ff, #81838b);z-index:0;}
.sheet-fight-box .sheet-item .sheet-tit.sheet-full {width:100%;}
.sheet-fight-box .sheet-item .sheet-tit + div {display:block; position:relative; width:80px; margin:0 auto;}
.sheet-fight-box .sheet-item .sheet-tit strong {line-height:40px; font-size:12px; color:#fff; font-weight:800;}
.sheet-fight-box .sheet-item input[type="text"],
.sheet-fight-box .sheet-item input[type="number"],
.sheet-fight-box .sheet-item select {height:40px !important; text-align:center; width:100%; font-size:15px; font-weight:800; color:#ffffff; padding:0 !important; background:transparent;}


/* Table */

.charsheet .sheet-table {display:block; position:relative;}
.charsheet .sheet-table + .sheet-table {margin-top:15px;}
.charsheet .sheet-table select {background-size:10px auto; background-position:top 50% right 10px;}
.charsheet .sheet-table .sheet-header {display:table; width:100%; overflow:hidden; height:30px; margin:0 0; padding:0;
	background-image: linear-gradient(135deg, #7088ff, #81838b);
}
.charsheet .sheet-table .sheet-row {display:table; width:100%; position:relative; margin:0; border-bottom:1px solid rgb(60 87 80 / 20%);}
.charsheet .sheet-table .sheet-header > *,
.charsheet .sheet-table .sheet-row > * {display:table-cell; position:relative; vertical-align:middle;}
.charsheet .sheet-table .sheet-row > * {padding:5px 0;}
.charsheet .sheet-table .sheet-row > * > * {text-align:center;}
.charsheet .sheet-table .sheet-header > * {line-height:30px; height:30px; text-align:center; color:#fff; font-weight:600; font-size:13px;}
.charsheet .sheet-table .sheet-family-data {display:none;}
.charsheet .sheet-table .sheet-dic > button {width:30px !important; height:30px !important; top:5px !important; left:2px !important; opacity:1 !important;}
.charsheet .sheet-table .sheet-name > input {text-align:center; font-size:13px; height:30px;}
.charsheet .sheet-table .sheet-effect > input {font-size:12px; height:30px;}
.charsheet .sheet-table .sheet-func > * {text-align:center; text-align-last:center; padding-right:15px !important; padding-left:5px !important;}
.charsheet .sheet-table .sheet-dam > * {display:block; width:40% !important; float:left;}
.charsheet .sheet-table .sheet-dam > * + * {width:60% !important;}
.charsheet .sheet-table .sheet-name {width:20%;}
.charsheet .sheet-table .sheet-effect {width:80%;}
.charsheet .sheet-table .sheet-dic {width:35px;}
.charsheet .sheet-table .sheet-weapon {}
.charsheet .sheet-table .sheet-func {width:130px;}
.charsheet .sheet-table .sheet-dam {width:110px;}
.charsheet .sheet-table .sheet-dir {width:55px;}
.charsheet .sheet-table .sheet-count {width:55px;}
.charsheet .sheet-table .sheet-bullet {width:55px;}
.charsheet .sheet-table .sheet-fix {width:60px;}
.charsheet .sheet-table .sheet-pice {width:80px;}
.charsheet .sheet-table .sheet-def {width:100px;}
.charsheet .sheet-table .sheet-desc {width:395px;}
.charsheet .sheet-table .sheet-flag {width:35px; text-align:center;}
.charsheet .sheet-table .sheet-flag > input[type="checkbox"] {position:relative !important; width:20px !important; height:20px !important; background:url(https://i.imgur.com/1Y9WTdS.png) no-repeat 50% 50%; opacity:1; margin:0 auto;}
.charsheet .sheet-table .sheet-time {width:130px;}
.charsheet .sheet-table .sheet-cost {width:280px;}
.charsheet .sheet-table .sheet-flag-chkecked ~ .sheet-magic-desc {display:none; border-bottom:1px solid rgb(60 87 80 / 20%); padding-left:17px;}
.charsheet .sheet-table .sheet-flag-chkecked ~ .sheet-magic-desc textarea {display:block; position:relative; height:100px; padding:15px; box-sizing:border-box; border-left:1px solid rgb(60 87 80 / 20%);}
.charsheet .sheet-table .sheet-flag-chkecked[value="1"] ~ .sheet-magic-desc {display:block;}


/* Background Setting */

.charsheet .sheet-backs-group {overflow:hidden;}
.charsheet .sheet-backs-group .sheet-backs {
	display:block; position:relative; width:50%; padding:10px 5px; float:left;}
.charsheet .sheet-backs-group ~ .sheet-sub-title {margin-left:15px;}
.charsheet .sheet-backs-group .sheet-backs .sheet-cols-wrap {display:block; position:relative; overflow:hidden;}
.charsheet .sheet-backs-group .sheet-backs .sheet-cols-wrap .sheet-cols {display:block; position:relative; padding:0 5px;}
.charsheet .sheet-backs-group .sheet-backs .sheet-cols-wrap .sheet-cols + .sheet-cols {margin-top:10px;}
.charsheet .sheet-backs-group .sheet-backs .sheet-cols-wrap .sheet-cols textarea {display:block; position:relative; height:60px;}
.charsheet .sheet-backs-group .sheet-rows {display:block; position:relative; padding-left:60px; height:30px; line-height:30px; margin-bottom:5px;}
.charsheet .sheet-backs-group .sheet-rows strong {display:block; position:absolute; top:0; left:0; width:50px;}
.charsheet .sheet-backs-group .sheet-rows span {display:block; position:relative; height:30px;}
.charsheet .sheet-backs-group .sheet-txt {clear:both;}
.charsheet .sheet-backs-group .sheet-txt textarea {
	border-radius: 0;
	height:105px;
	padding:5px;
	line-height:21px; border: 1px solid #7088ff;
	background-attachment: local;
	background: rgba(255,255,255,0.2);;
}
.charsheet .sheet-backs-group .sheet-txt input[type="text"] {height:21px !important; border-bottom:1px solid rgb(60 87 80 / 20%);}
.charsheet .sheet-backs-group .sheet-tit {
    margin: 0 auto;
    line-height: 2em;
    text-align: center;
    background-image: linear-gradient(135deg, #7088ff, #81838b);
    z-index: 0;
	display:inline-block; position:relative; margin-bottom:10px;}
.charsheet .sheet-backs-group .sheet-tit strong {color:#fff; padding:0; font-size:1em; min-width:10em;}
.charsheet .sheet-backs-group .sheet-tit-both {overflow:hidden;}
.charsheet .sheet-backs-group .sheet-title-text {display:block; position:relative; padding-left:60px; width:49%; box-sizing:border-box; float:left;}
.charsheet .sheet-backs-group .sheet-title-text + .sheet-title-text {float:right;}
.charsheet .sheet-backs-group .sheet-title-text strong {display:block; position:absolute; top:0; left:0; height:21px; line-height:21px; text-align:center; color:#111214; background:#ffffff; width:55px; border-top:1px solid #fff; box-sizing:border-box; overflow:hidden; font-weight:100;}
.charsheet .sheet-backs-wrap textarea {background:rgb(60 87 80 / 20%); border-radius:10px !important; padding:10px; line-height:1.5; font-size:12px;}
.charsheet .sheet-backs-wrap input[type="text"] {background:rgb(60 87 80 / 20%); border-radius:10px !important; padding:0 10px !important; line-height:1.5; font-size:12px;}
.charsheet .sheet-memo-wrap textarea {background:rgba(0,0,0,.1); border-radius:10px !important; min-height:600px; padding:10px; line-height:1.5; font-size:12px;}

.sheet-copyright {text-align:center; padding:20px 0 20px; font-size:11px; opacity:.5;}


/*다이스 프레임*/
.sheet-rolltemplate-coc {position:relative; overflow:hidden; z-index:0;}
.sheet-rolltemplate-coc:before {
	content:""; 
	display:block; 
	position:absolute; 
	top:0; left:0; right:0; bottom:0; 
	border-style: solid;
	border-image-source: url('https://i.imgur.com/8VJdHW3.png');
	border-image-slice: 75 75 75 75;
      border-top-width: 75px;
      border-right-width: 75px;
      border-left-width: 75px;
      border-bottom-width: 75px;
	z-index:-1;}
	
/*다이스 배경*/
.sheet-rolltemplate-coc:after {content:""; display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:url('https://i.imgur.com/VU5Gpti.jpg') repeat-y; background-size:100% auto; z-index:-2;}
.sheet-rolltemplate-coc * {color:#fff;font-family: 'Pretendard-Regular'; }
.sheet-rolltemplate-coc .inlinerollresult {display:inline !important; font-size:1em !important; opacity:1 !important; padding:0 !important; background:transparent !important; border:none !important;}
.sheet-rolltemplate-coc .sheet-coc-wrap {position:relative; padding:25px 15px; min-height:100px; font-size:12px; text-align:center; box-sizing:border-box;}

.sheet-rolltemplate-coc .sheet-tit {
	font-family: 'Pretendard-Regular';
	display:block; 
	position:relative; 
	text-align:center; 
	z-index:1;
	color:#ffffff !important;
	text-shadow:0px 0px 5px #fff;}
.sheet-rolltemplate-coc .sheet-wrap-single {display:table; width:100%; height:50px;}
.sheet-rolltemplate-coc .sheet-wrap-single .sheet-tit {display:table-cell; vertical-align:middle; margin-bottom:0; padding-bottom:0; background:transparent;}

.sheet-rolltemplate-coc .sheet-tit strong {
	font-weight: 500;
	color:#fff;
	display:block; position:relative; font-size:24px; line-height:1.3; font-family: 'neurimboGothicRegular';}
.sheet-rolltemplate-coc .sheet-tit span {
	font-family: 'Pretendard-Regular';display:block; position:relative; font-size:11px; font-style:normal; color:#fff; opacity:.8; line-height:15px; padding-bottom:5px;}

.sheet-rolltemplate-coc .sheet-dice-con {display:block; position:relative;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dice-result {
	font-family: 'Pretendard-Regular';
	display:block; 
	position:relative; 
	margin:0 auto; 
	width:80px; height:60px; 
	text-align:center; 
	line-height:60px; 
	font-size:30px; 
	color:#fff; 
	white-space:nowrap; 
	z-index:0;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dice-result:before {content:""; display:block; position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0;}
.sheet-rolltemplate-coc .sheet-coc-wrap .sheet-dice-result * {
	color:#fff !important; 
	font-family: 'DM Serif Display', serif;
	text-shadow: 0px 0px 5px #ffffff;}

.sheet-rolltemplate-coc .sheet-dice-con .sheet-dice-spec {display:block; position:relative; margin-right:0; text-align:center; margin-bottom:10px;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dice-spec > span {font-family: 'Pretendard-Regular';display:inline-block; vertical-align:middle; margin:0 .3em; width:20px; height:20px; line-height:20px; border-radius:100%; background:#ffffff; color:#000; font-size:11px;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dice-spec > span * {font-family: 'Pretendard-Regular';color:#000; font-size:11px; font-weight:100;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result {display:block; position:relative;  margin-right:0; padding-top:15px; text-align:center;}
.sheet-rolltemplate-coc .sheet-dice-con * + .sheet-result {font-family: 'Pretendard-Regular';padding-top:0;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result > span {display:block; position:relative; height:25px; line-height:25px; text-align:center; color:#fff; background: rgb(0,0,0); background: linear-gradient(-97deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); }
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-fumble {background:rgb(255,0,42); background: linear-gradient(-97deg, rgba(255,0,42,0) 0%, rgba(255,0,42,1) 20%, rgba(255,0,42,1) 80%, rgba(255,0,42,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-fale {background:rgb(84,0,0); background: linear-gradient(-97deg, rgba(84,0,0,0) 0%, rgba(84,0,0,1) 20%, rgba(84,0,0,1) 80%, rgba(84,0,0,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-success {background:rgb(21,105,96); background: linear-gradient(-97deg, rgba(21,105,96,0) 0%, rgba(21,105,96,1) 20%, rgba(21,105,96,1) 80%, rgba(21,105,96,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-hard-success {background:rgb(82,153,78); background: linear-gradient(-97deg, rgba(82,153,78,0) 0%, rgba(82,153,78,1) 20%, rgba(82,153,78,1) 80%, rgba(82,153,78,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-extreme-success {background:rgb(62,192,181); background: linear-gradient(-97deg, rgba(62,192,181,0) 0%, rgba(62,192,181,1) 20%, rgba(62,192,181,1) 80%, rgba(62,192,181,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-result .sheet-critical {background:rgb(104, 185, 0); background: linear-gradient(-97deg, rgba(104, 185, 0,0) 0%, rgba(104, 185, 0,1) 20%, rgba(104, 185, 0,1) 80%, rgba(104, 185, 0,0) 100%);}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dicetype {
	font-family: 'Pretendard-Regular'; color:fff;
	display:block; position:relative; margin-right:0; text-align:center; font-size:12px; line-height:30px; height:30px; margin-bottom:10px; font-weight:800;}
.sheet-rolltemplate-coc .sheet-dice-con .sheet-dicetype em {font-style:normal;}
.sheet-rolltemplate-coc .sheet-dice-list {
	font-family: 'Pretendard-Regular';display:table; width:100%; padding:20px 0 0; table-layout:fixed;}
.sheet-rolltemplate-coc .sheet-dice-list > div {display:table-cell; text-align:center; vertical-align:middle; padding:0; font-size:15px;}
.sheet-rolltemplate-coc .sheet-dice-list > div.sheet-50 {width:50%;}
.sheet-rolltemplate-coc .sheet-dice-list > div.sheet-33 {width:33.33%;}
.sheet-rolltemplate-coc .sheet-dice-list > div + div {border-left:1px solid rgba(0,0,0,.1);}
.sheet-rolltemplate-coc .sheet-dice-list .inlinerollresult {font-weight:600;}

.sheet-rolltemplate-coc .sheet-desc {display:block; position:relative; text-align:center; background:url('https://i.imgur.com/E5lmjlv.png') no-repeat 50% 0; background-size:100% 5px; padding-top:10px; margin-top:15px;}
.sheet-rolltemplate-coc .sheet-tit + .sheet-desc,
.sheet-rolltemplate-coc .sheet-dice-con + .sheet-desc {padding-top:0; background:transparent; margin-top:0;}
.sheet-rolltemplate-coc .sheet-dice-list + .sheet-desc {margin-top:15px !important;}
.sheet-rolltemplate-coc .sheet-desc-inner {display:block; position:relative; padding:15px 0; font-size:12px; line-height:1.5; font-weight:400; z-index:0; word-break:keep-all;}

.sheet-rolltemplate-coc .sheet-magic-desc .sheet-desc-inner {background:rgba(255,255,255, .2);}

.sheet-rolltemplate-coc .sheet-desc .sheet-desc-tit {display:block; position:relative; padding-bottom:10px; font-family: 'neurimboGothicRegular';text-align:center; font-size:16px; font-weight:500;}
.sheet-rolltemplate-coc .sheet-desc .sheet-desc-bot {display:block; position:relative; background:url('https://i.imgur.com/E5lmjlv.png') no-repeat 50% 0; background-size:100% 5px; padding-top:10px; margin-top:15px;}
.sheet-rolltemplate-coc .sheet-desc p {font-family: 'Pretendard-Regular';font-size:12px; font-weight:400; word-break:keep-all;}
.sheet-rolltemplate-coc .sheet-desc.sheet-single-txt {margin-top:0;}
.sheet-rolltemplate-coc .sheet-desc.sheet-single-txt .sheet-desc-inner {padding:10px;}
.sheet-rolltemplate-coc .sheet-desc.sheet-single-txt:before,
.sheet-rolltemplate-coc .sheet-desc.sheet-single-txt:after {display:none;}
.sheet-rolltemplate-coc .sheet-side-tit {
	font-family: 'Pretendard-Regular';
	display:inline-block; vertical-align:middle; border-radius:9em; line-height:25px; background:#7088ff; color:#fff; padding:0 10px; font-weight:400; margin:5px 2px;}

.sheet-rolltemplate-coc .sheet-desc .sheet-time,
.sheet-rolltemplate-coc .sheet-desc .sheet-cost {text-align:left; margin:5px 0; padding:0 10px;}
.sheet-rolltemplate-coc .sheet-desc .sheet-time:before {content:"시전시간"; font-family:'Nanum Myeongjo'; font-weight:800; padding-right:1em;}
.sheet-rolltemplate-coc .sheet-desc .sheet-cost:before {content:"비용"; font-family:'Nanum Myeongjo'; font-weight:800; padding-right:1em;}

.sheet-rolltemplate-coc .sheet-desc .sheet-time,
.sheet-rolltemplate-coc .sheet-desc .sheet-cost {margin-top:15px;} 
.sheet-rolltemplate-coc .sheet-desc .sheet-time + .sheet-cost {margin-top:5px;}

.sheet-rolltemplate-coc .sheet-body {font-size:14px;}
.sheet-rolltemplate-coc .sheet-body em {font-style:normal;}


.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap {
	background:
		url(https://i.imgur.com/gwvdcpn.png) no-repeat 50% 0,
		url(https://i.imgur.com/AobmOfD.png) no-repeat 50% 28px,
		url(https://i.imgur.com/LoQgQ8s.jpg) no-repeat 50% 0
	;
	background-size:auto 70px, auto 200px, 100% auto;
}
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-tit * {color:#fff !important; text-shadow:none;}
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-tit span  {text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;}
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-dice-spec * {color:#fff !important;}
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-dice-con .sheet-dice-result:before {border-color:#fff;}
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-dice-con:before,
.sheet-rolltemplate-coc .sheet-theme-1 ~ .sheet-coc-wrap .sheet-dice-con:after {background:#fff;}