@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

:root {
    --point-color : #6b7bb1;
    --point-opacity: rgba(107,123,177,0.2);
    --default-color : #393f53;
}

/* 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:12px;}
.charsheet .sheet-wrap * {color:#000; outline:0 !important; font-family:"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:#2a413b; 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;}
.charsheet .sheet-wrap .repcontrol > * {height:20px; line-height:20px; padding:0 10px; font-size:11px; font-weight:400; color:#fff;}

.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/jEaObym.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(0, 0, 0, .3);}
.charsheet .sheet-wrap textarea::placeholder {color:rgba(0, 0, 0, .3);}

.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; padding:1px;}
.sheet-wrap .sheet-wrap-inner {display:block; position:relative; min-height:400px; padding:10px; }
.sheet-wrap .sheet-wrap-inner .sheet-acc {content:""; display:block; position:absolute; width:90px; height:90px; background:url('https://i.imgur.com/SUQqmE1.png') no-repeat 50% 50%; background-size:contain;}
.sheet-wrap .sheet-wrap-inner .sheet-acc.sheet-top-left {left:-24px; top:-24px;}
.sheet-wrap .sheet-wrap-inner .sheet-acc.sheet-top-right {right:-24px; top:-24px; transform:rotate(90deg);}
.sheet-wrap .sheet-wrap-inner .sheet-acc.sheet-bottom-left {left:-24px; bottom:-24px; transform:rotate(270deg);}
.sheet-wrap .sheet-wrap-inner .sheet-acc.sheet-bottom-right {right:-24px; bottom:-24px; transform:rotate(180deg);}

.sheet-line-box {box-sizing:border-box; background:rgba(255,255,255,.6); backdrop-filter:blur(2px); border:1px solid var(--point-color);}
.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-checkbox-area:has(input[type="checkbox"]:checked) + .sheet-toggle-wrap {display:block;}

.sheet-toggle-button {border-radius: 10px; border:1px solid #000; background: var(--default-color); margin-bottom:10px;}
.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: #2c4740 2px 0px 0px, #2c4740 1.75517px 0.958851px 0px, #2c4740 1.0806px 1.68294px 0px, #2c4740 0.141474px 1.99499px 0px, #2c4740 -0.832294px 1.81859px 0px, #2c4740 -1.60229px 1.19694px 0px, #2c4740 -1.97998px 0.28224px 0px, #2c4740 -1.87291px -0.701566px 0px, #2c4740 -1.30729px -1.5136px 0px, #2c4740 -0.421592px -1.95506px 0px, #2c4740 0.567324px -1.91785px 0px, #2c4740 1.41734px -1.41108px 0px, #2c4740 1.92034px -0.558831px 0px;}
.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:"▲";}


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

.sheet-top-header {position:relative; padding:0 23% 0 23%; overflow:hidden;}
.sheet-top-header .sheet-profile {display:block; position:absolute; top:0; left:0; width:23%; bottom:0; padding:40px 10px 10px;}
.sheet-top-header .sheet-profile > div > div {display:table; width:100%; height:100%;}
.sheet-top-header .sheet-profile > div > div > * {display:table-cell; vertical-align:middle;}
.sheet-top-header .sheet-profile > div > div > strong {width:3em;}
.sheet-top-header .sheet-profile > div > div input {display:block; position:relative; width:100%; height:25px !important; border-bottom:1px solid var(--point-opacity) !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:var(--point-color); 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;}

.sheet-top-header .sheet-pic {display:block; position:absolute; width:23%; top:0; bottom:0; right:0; overflow:hidden;}
.sheet-top-header .sheet-pic img {display:block; position:absolute; height:100%; max-width:10000000%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}

.sheet-top-header .sheet-spec {display:block; position:relative; text-align:center; padding:5px 5px 0; overflow:hidden;}
.sheet-top-header .sheet-spec .sheet-title {display:block; position:relative; padding-bottom:20px; padding-top:10px; filter: invert(1);}
.sheet-top-header .sheet-spec .sheet-item {display:block; position:relative; width:32.73%; float:left; box-sizing:border-box; margin:.3%; padding-left:5em; border-radius: 15px; overflow: hidden;}
.sheet-top-header .sheet-spec .sheet-item .sheet-tit {display:block; position:absolute; top:0; left:0; bottom:0; width:5em; line-height:30px; text-align:center; background:var(--point-color); z-index:0;}
.sheet-top-header .sheet-spec .sheet-item .sheet-tit + div {display:block; position:relative; width:80px; margin:0 auto;}
.sheet-top-header .sheet-spec .sheet-item .sheet-tit strong {line-height:30px; font-size:12px; color:#fff; font-weight:400;}

.sheet-top-header .sheet-spec .sheet-item input[type="text"],
.sheet-top-header .sheet-spec .sheet-item input[type="number"],
.sheet-top-header .sheet-spec .sheet-item select {height:30px !important; text-align:center; width:100%; font-size:15px; font-weight:800; color:var(--point-color); 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:var(--point-color); 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:var(--point-color); 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:block; 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-tit {display:inline-block; position:relative; line-height:30px;}
.sheet-mid-header .sheet-tit strong {border-bottom:1px solid var(--point-color); color:#000; padding:0; font-size:1.1em; min-width:3em;}
.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 var(--point-color);}
.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 var(--point-color); margin-right:3px;}
.sheet-mid-header .sheet-control .sheet-checkbox-area input:checked + span:before {background:var(--point-color);}

.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 {width:9em; background:var(--point-opacity); border-radius: 15px;}
.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:45px; 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(0,0,0,.1);}
.sheet-graph-box .sheet-bar > span:before {content:""; display:block; position:absolute; top:0; bottom:0; left:0; background:var(--point-color); 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:var(--point-color); transform:translateX(-50%); -webkit-transform:translateX(-50%);}
.sheet-graph-box .sheet-bar i:after {content:""; display:block; position:absolute; top:100%; height:7px; width:1px; background:#ff6666; left:80%;}

.sheet-graph-per[value="1"]~ div .sheet-bar span:before {width:1%;} .sheet-graph-per[value="2"]~ div .sheet-bar span:before {width:2%;} .sheet-graph-per[value="3"]~ div .sheet-bar span:before {width:3%;} .sheet-graph-per[value="4"]~ div .sheet-bar span:before {width:4%;} .sheet-graph-per[value="5"]~ div .sheet-bar span:before {width:5%;} .sheet-graph-per[value="6"]~ div .sheet-bar span:before {width:6%;} .sheet-graph-per[value="7"]~ div .sheet-bar span:before {width:7%;} .sheet-graph-per[value="8"]~ div .sheet-bar span:before {width:8%;} .sheet-graph-per[value="9"]~ div .sheet-bar span:before {width:9%;} .sheet-graph-per[value="10"]~ div .sheet-bar span:before {width:10%;} 
.sheet-graph-per[value="11"]~ div .sheet-bar span:before {width:11%;} .sheet-graph-per[value="12"]~ div .sheet-bar span:before {width:12%;} .sheet-graph-per[value="13"]~ div .sheet-bar span:before {width:13%;} .sheet-graph-per[value="14"]~ div .sheet-bar span:before {width:14%;} .sheet-graph-per[value="15"]~ div .sheet-bar span:before {width:15%;} .sheet-graph-per[value="16"]~ div .sheet-bar span:before {width:16%;} .sheet-graph-per[value="17"]~ div .sheet-bar span:before {width:17%;} .sheet-graph-per[value="18"]~ div .sheet-bar span:before {width:18%;} .sheet-graph-per[value="19"]~ div .sheet-bar span:before {width:19%;} .sheet-graph-per[value="20"]~ div .sheet-bar span:before {width:20%;} 
.sheet-graph-per[value="21"]~ div .sheet-bar span:before {width:21%;} .sheet-graph-per[value="22"]~ div .sheet-bar span:before {width:22%;} .sheet-graph-per[value="23"]~ div .sheet-bar span:before {width:23%;} .sheet-graph-per[value="24"]~ div .sheet-bar span:before {width:24%;} .sheet-graph-per[value="25"]~ div .sheet-bar span:before {width:25%;} .sheet-graph-per[value="26"]~ div .sheet-bar span:before {width:26%;} .sheet-graph-per[value="27"]~ div .sheet-bar span:before {width:27%;} .sheet-graph-per[value="28"]~ div .sheet-bar span:before {width:28%;} .sheet-graph-per[value="29"]~ div .sheet-bar span:before {width:29%;} .sheet-graph-per[value="30"]~ div .sheet-bar span:before {width:30%;} 
.sheet-graph-per[value="31"]~ div .sheet-bar span:before {width:31%;} .sheet-graph-per[value="32"]~ div .sheet-bar span:before {width:32%;} .sheet-graph-per[value="33"]~ div .sheet-bar span:before {width:33%;} .sheet-graph-per[value="34"]~ div .sheet-bar span:before {width:34%;} .sheet-graph-per[value="35"]~ div .sheet-bar span:before {width:35%;} .sheet-graph-per[value="36"]~ div .sheet-bar span:before {width:36%;} .sheet-graph-per[value="37"]~ div .sheet-bar span:before {width:37%;} .sheet-graph-per[value="38"]~ div .sheet-bar span:before {width:38%;} .sheet-graph-per[value="39"]~ div .sheet-bar span:before {width:39%;} .sheet-graph-per[value="40"]~ div .sheet-bar span:before {width:40%;} 
.sheet-graph-per[value="41"]~ div .sheet-bar span:before {width:41%;} .sheet-graph-per[value="42"]~ div .sheet-bar span:before {width:42%;} .sheet-graph-per[value="43"]~ div .sheet-bar span:before {width:43%;} .sheet-graph-per[value="44"]~ div .sheet-bar span:before {width:44%;} .sheet-graph-per[value="45"]~ div .sheet-bar span:before {width:45%;} .sheet-graph-per[value="46"]~ div .sheet-bar span:before {width:46%;} .sheet-graph-per[value="47"]~ div .sheet-bar span:before {width:47%;} .sheet-graph-per[value="48"]~ div .sheet-bar span:before {width:48%;} .sheet-graph-per[value="49"]~ div .sheet-bar span:before {width:49%;} .sheet-graph-per[value="50"]~ div .sheet-bar span:before {width:50%;} 
.sheet-graph-per[value="51"]~ div .sheet-bar span:before {width:51%;} .sheet-graph-per[value="52"]~ div .sheet-bar span:before {width:52%;} .sheet-graph-per[value="53"]~ div .sheet-bar span:before {width:53%;} .sheet-graph-per[value="54"]~ div .sheet-bar span:before {width:54%;} .sheet-graph-per[value="55"]~ div .sheet-bar span:before {width:55%;} .sheet-graph-per[value="56"]~ div .sheet-bar span:before {width:56%;} .sheet-graph-per[value="57"]~ div .sheet-bar span:before {width:57%;} .sheet-graph-per[value="58"]~ div .sheet-bar span:before {width:58%;} .sheet-graph-per[value="59"]~ div .sheet-bar span:before {width:59%;} .sheet-graph-per[value="60"]~ div .sheet-bar span:before {width:60%;} 
.sheet-graph-per[value="61"]~ div .sheet-bar span:before {width:61%;} .sheet-graph-per[value="62"]~ div .sheet-bar span:before {width:62%;} .sheet-graph-per[value="63"]~ div .sheet-bar span:before {width:63%;} .sheet-graph-per[value="64"]~ div .sheet-bar span:before {width:64%;} .sheet-graph-per[value="65"]~ div .sheet-bar span:before {width:65%;} .sheet-graph-per[value="66"]~ div .sheet-bar span:before {width:66%;} .sheet-graph-per[value="67"]~ div .sheet-bar span:before {width:67%;} .sheet-graph-per[value="68"]~ div .sheet-bar span:before {width:68%;} .sheet-graph-per[value="69"]~ div .sheet-bar span:before {width:69%;} .sheet-graph-per[value="70"]~ div .sheet-bar span:before {width:70%;} 
.sheet-graph-per[value="71"]~ div .sheet-bar span:before {width:71%;} .sheet-graph-per[value="72"]~ div .sheet-bar span:before {width:72%;} .sheet-graph-per[value="73"]~ div .sheet-bar span:before {width:73%;} .sheet-graph-per[value="74"]~ div .sheet-bar span:before {width:74%;} .sheet-graph-per[value="75"]~ div .sheet-bar span:before {width:75%;} .sheet-graph-per[value="76"]~ div .sheet-bar span:before {width:76%;} .sheet-graph-per[value="77"]~ div .sheet-bar span:before {width:77%;} .sheet-graph-per[value="78"]~ div .sheet-bar span:before {width:78%;} .sheet-graph-per[value="79"]~ div .sheet-bar span:before {width:79%;} .sheet-graph-per[value="80"]~ div .sheet-bar span:before {width:80%;} 
.sheet-graph-per[value="81"]~ div .sheet-bar span:before {width:81%;} .sheet-graph-per[value="82"]~ div .sheet-bar span:before {width:82%;} .sheet-graph-per[value="83"]~ div .sheet-bar span:before {width:83%;} .sheet-graph-per[value="84"]~ div .sheet-bar span:before {width:84%;} .sheet-graph-per[value="85"]~ div .sheet-bar span:before {width:85%;} .sheet-graph-per[value="86"]~ div .sheet-bar span:before {width:86%;} .sheet-graph-per[value="87"]~ div .sheet-bar span:before {width:87%;} .sheet-graph-per[value="88"]~ div .sheet-bar span:before {width:88%;} .sheet-graph-per[value="89"]~ div .sheet-bar span:before {width:89%;} .sheet-graph-per[value="90"]~ div .sheet-bar span:before {width:90%;} 
.sheet-graph-per[value="91"]~ div .sheet-bar span:before {width:91%;} .sheet-graph-per[value="92"]~ div .sheet-bar span:before {width:92%;} .sheet-graph-per[value="93"]~ div .sheet-bar span:before {width:93%;} .sheet-graph-per[value="94"]~ div .sheet-bar span:before {width:94%;} .sheet-graph-per[value="95"]~ div .sheet-bar span:before {width:95%;} .sheet-graph-per[value="96"]~ div .sheet-bar span:before {width:96%;} .sheet-graph-per[value="97"]~ div .sheet-bar span:before {width:97%;} .sheet-graph-per[value="98"]~ div .sheet-bar span:before {width:98%;} .sheet-graph-per[value="99"]~ div .sheet-bar span:before {width:99%;} .sheet-graph-per[value="100"]~ div .sheet-bar span:before {width:100%;}

.sheet-graph-per2[value="1"]~ div .sheet-bar span i {width:1%;} .sheet-graph-per2[value="2"]~ div .sheet-bar span i {width:2%;} .sheet-graph-per2[value="3"]~ div .sheet-bar span i {width:3%;} .sheet-graph-per2[value="4"]~ div .sheet-bar span i {width:4%;} .sheet-graph-per2[value="5"]~ div .sheet-bar span i {width:5%;} .sheet-graph-per2[value="6"]~ div .sheet-bar span i {width:6%;} .sheet-graph-per2[value="7"]~ div .sheet-bar span i {width:7%;} .sheet-graph-per2[value="8"]~ div .sheet-bar span i {width:8%;} .sheet-graph-per2[value="9"]~ div .sheet-bar span i {width:9%;} .sheet-graph-per2[value="10"]~ div .sheet-bar span i {width:10%;} 
.sheet-graph-per2[value="11"]~ div .sheet-bar span i {width:11%;} .sheet-graph-per2[value="12"]~ div .sheet-bar span i {width:12%;} .sheet-graph-per2[value="13"]~ div .sheet-bar span i {width:13%;} .sheet-graph-per2[value="14"]~ div .sheet-bar span i {width:14%;} .sheet-graph-per2[value="15"]~ div .sheet-bar span i {width:15%;} .sheet-graph-per2[value="16"]~ div .sheet-bar span i {width:16%;} .sheet-graph-per2[value="17"]~ div .sheet-bar span i {width:17%;} .sheet-graph-per2[value="18"]~ div .sheet-bar span i {width:18%;} .sheet-graph-per2[value="19"]~ div .sheet-bar span i {width:19%;} .sheet-graph-per2[value="20"]~ div .sheet-bar span i {width:20%;} 
.sheet-graph-per2[value="21"]~ div .sheet-bar span i {width:21%;} .sheet-graph-per2[value="22"]~ div .sheet-bar span i {width:22%;} .sheet-graph-per2[value="23"]~ div .sheet-bar span i {width:23%;} .sheet-graph-per2[value="24"]~ div .sheet-bar span i {width:24%;} .sheet-graph-per2[value="25"]~ div .sheet-bar span i {width:25%;} .sheet-graph-per2[value="26"]~ div .sheet-bar span i {width:26%;} .sheet-graph-per2[value="27"]~ div .sheet-bar span i {width:27%;} .sheet-graph-per2[value="28"]~ div .sheet-bar span i {width:28%;} .sheet-graph-per2[value="29"]~ div .sheet-bar span i {width:29%;} .sheet-graph-per2[value="30"]~ div .sheet-bar span i {width:30%;} 
.sheet-graph-per2[value="31"]~ div .sheet-bar span i {width:31%;} .sheet-graph-per2[value="32"]~ div .sheet-bar span i {width:32%;} .sheet-graph-per2[value="33"]~ div .sheet-bar span i {width:33%;} .sheet-graph-per2[value="34"]~ div .sheet-bar span i {width:34%;} .sheet-graph-per2[value="35"]~ div .sheet-bar span i {width:35%;} .sheet-graph-per2[value="36"]~ div .sheet-bar span i {width:36%;} .sheet-graph-per2[value="37"]~ div .sheet-bar span i {width:37%;} .sheet-graph-per2[value="38"]~ div .sheet-bar span i {width:38%;} .sheet-graph-per2[value="39"]~ div .sheet-bar span i {width:39%;} .sheet-graph-per2[value="40"]~ div .sheet-bar span i {width:40%;} 
.sheet-graph-per2[value="41"]~ div .sheet-bar span i {width:41%;} .sheet-graph-per2[value="42"]~ div .sheet-bar span i {width:42%;} .sheet-graph-per2[value="43"]~ div .sheet-bar span i {width:43%;} .sheet-graph-per2[value="44"]~ div .sheet-bar span i {width:44%;} .sheet-graph-per2[value="45"]~ div .sheet-bar span i {width:45%;} .sheet-graph-per2[value="46"]~ div .sheet-bar span i {width:46%;} .sheet-graph-per2[value="47"]~ div .sheet-bar span i {width:47%;} .sheet-graph-per2[value="48"]~ div .sheet-bar span i {width:48%;} .sheet-graph-per2[value="49"]~ div .sheet-bar span i {width:49%;} .sheet-graph-per2[value="50"]~ div .sheet-bar span i {width:50%;} 
.sheet-graph-per2[value="51"]~ div .sheet-bar span i {width:51%;} .sheet-graph-per2[value="52"]~ div .sheet-bar span i {width:52%;} .sheet-graph-per2[value="53"]~ div .sheet-bar span i {width:53%;} .sheet-graph-per2[value="54"]~ div .sheet-bar span i {width:54%;} .sheet-graph-per2[value="55"]~ div .sheet-bar span i {width:55%;} .sheet-graph-per2[value="56"]~ div .sheet-bar span i {width:56%;} .sheet-graph-per2[value="57"]~ div .sheet-bar span i {width:57%;} .sheet-graph-per2[value="58"]~ div .sheet-bar span i {width:58%;} .sheet-graph-per2[value="59"]~ div .sheet-bar span i {width:59%;} .sheet-graph-per2[value="60"]~ div .sheet-bar span i {width:60%;} 
.sheet-graph-per2[value="61"]~ div .sheet-bar span i {width:61%;} .sheet-graph-per2[value="62"]~ div .sheet-bar span i {width:62%;} .sheet-graph-per2[value="63"]~ div .sheet-bar span i {width:63%;} .sheet-graph-per2[value="64"]~ div .sheet-bar span i {width:64%;} .sheet-graph-per2[value="65"]~ div .sheet-bar span i {width:65%;} .sheet-graph-per2[value="66"]~ div .sheet-bar span i {width:66%;} .sheet-graph-per2[value="67"]~ div .sheet-bar span i {width:67%;} .sheet-graph-per2[value="68"]~ div .sheet-bar span i {width:68%;} .sheet-graph-per2[value="69"]~ div .sheet-bar span i {width:69%;} .sheet-graph-per2[value="70"]~ div .sheet-bar span i {width:70%;} 
.sheet-graph-per2[value="71"]~ div .sheet-bar span i {width:71%;} .sheet-graph-per2[value="72"]~ div .sheet-bar span i {width:72%;} .sheet-graph-per2[value="73"]~ div .sheet-bar span i {width:73%;} .sheet-graph-per2[value="74"]~ div .sheet-bar span i {width:74%;} .sheet-graph-per2[value="75"]~ div .sheet-bar span i {width:75%;} .sheet-graph-per2[value="76"]~ div .sheet-bar span i {width:76%;} .sheet-graph-per2[value="77"]~ div .sheet-bar span i {width:77%;} .sheet-graph-per2[value="78"]~ div .sheet-bar span i {width:78%;} .sheet-graph-per2[value="79"]~ div .sheet-bar span i {width:79%;} .sheet-graph-per2[value="80"]~ div .sheet-bar span i {width:80%;} 
.sheet-graph-per2[value="81"]~ div .sheet-bar span i {width:81%;} .sheet-graph-per2[value="82"]~ div .sheet-bar span i {width:82%;} .sheet-graph-per2[value="83"]~ div .sheet-bar span i {width:83%;} .sheet-graph-per2[value="84"]~ div .sheet-bar span i {width:84%;} .sheet-graph-per2[value="85"]~ div .sheet-bar span i {width:85%;} .sheet-graph-per2[value="86"]~ div .sheet-bar span i {width:86%;} .sheet-graph-per2[value="87"]~ div .sheet-bar span i {width:87%;} .sheet-graph-per2[value="88"]~ div .sheet-bar span i {width:88%;} .sheet-graph-per2[value="89"]~ div .sheet-bar span i {width:89%;} .sheet-graph-per2[value="90"]~ div .sheet-bar span i {width:90%;} 
.sheet-graph-per2[value="91"]~ div .sheet-bar span i {width:91%;} .sheet-graph-per2[value="92"]~ div .sheet-bar span i {width:92%;} .sheet-graph-per2[value="93"]~ div .sheet-bar span i {width:93%;} .sheet-graph-per2[value="94"]~ div .sheet-bar span i {width:94%;} .sheet-graph-per2[value="95"]~ div .sheet-bar span i {width:95%;} .sheet-graph-per2[value="96"]~ div .sheet-bar span i {width:96%;} .sheet-graph-per2[value="97"]~ div .sheet-bar span i {width:97%;} .sheet-graph-per2[value="98"]~ div .sheet-bar span i {width:98%;} .sheet-graph-per2[value="99"]~ div .sheet-bar span i {width:99%;} .sheet-graph-per2[value="100"]~ div .sheet-bar span i {width:100%;}

.sheet-graph-box .sheet-other-box {width:140px; 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:var(--point-opacity);}
.sheet-graph-box .sheet-ohter-control button {font-size:12px !important; border-radius:0 !important; width:100%; background:var(--point-color); color:#fff; 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:#414141; opacity:.5; 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:var(--point-color); 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:var(--point-color); 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:var(--point-opacity);}
.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:var(--point-color); 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:var(--point-color); 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(60,87,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:var(--point-color); 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(0,0,0,.5);}

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

.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 var(--point-opacity);}
.charsheet .sheet-spec-list .sheet-group.last {border:none;}
.charsheet .sheet-spec-list * {font-family: 'RIDIBatang';}

.charsheet .sheet-spec-item {display:block; position:relative; padding-left:35px;}
.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/5ilHQae.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:#0f0f10;}
.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(107,123,177,0.15); text-align:center; color:#000;}
.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(0,0,0,.2); text-align:center; color:#000;}
.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 var(--point-color);}
.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:var(--point-color); 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:400;}
.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:var(--point-color); 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; border:1px solid var(--point-color);
	background: var(--point-color);
	background: linear-gradient(0deg, rgba(107,123,177,0.5) 0%, var(--point-color) 100%);
}
.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 15px; 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 {height:105px; padding: 10px !important; line-height:21px; background: #fff;
; border-radius: 15px !important;}
.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 {display:inline-block; position:relative; line-height:30px; margin-bottom:10px;}
.charsheet .sheet-backs-group .sheet-tit strong {border-bottom:1px solid var(--point-color); color:#000; padding:0; font-size:1.1em; min-width:3em;}
.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:#fff; background:var(--point-color); width:55px; border-top:1px solid #fff; box-sizing:border-box; overflow:hidden; font-weight:100; border-radius: 10px;}
.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;}