@charset "utf-8";

/**********************************************************
	Magica Logia Sheet Style : Sample Code
-----------------------------------------------------------
	Made by. Rout (Avocado / Tateck)
**********************************************************/
.sheet-wrap * {transition:none; -webkit-transition:none;}
.sheet-wrap input[type="checkbox"] {cursor:pointer;}
.sheet-wrap input[type="text"],
.sheet-wrap input[type="number"],
.sheet-wrap select {display:block; width:100%;}
.sheet-wrap input[type="number"] {height:30px; text-align:center;}
.sheet-wrap input[type="number"]::-webkit-outer-spin-button,
.sheet-wrap input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin:0;}


.sheet-wrap {padding-top:1em;}

.sheet-default-info {display:block; position:relative; padding-left:130px; font-size:1em;}
.sheet-default-info .sheet-frame {position:relative; padding-top:100%; z-index:0;}
.sheet-default-info .sheet-frame .sheet-diamond {position:absolute; top:50%; left:50%; width:70%; height:70%; border-width:3px; transform:translate(-50%, -50%) rotate(-45deg); -webkit-transform:translate(-50%, -50%) rotate(-45deg); z-index:-1; padding:0;}
.sheet-default-info .sheet-frame p {position:absolute; bottom:52%; left:0; right:0; text-align:center; font-size:.9em; font-weight:800; z-index:0;}
.sheet-default-info .sheet-frame input {display:block; position:absolute; top:45%; width:80%; border-width:0; left:10%; right:10%; z-index:0; margin-top:3px; color:unset; background:transparent; font-size:1.5em; height:1.3em;}

.sheet-default-info .sheet-level {display:block; position:absolute; top:0; left:0; width:120px;}
.sheet-default-info .sheet-level .sheet-diamond {border-width:5px;}
.sheet-default-info .sheet-level p {font-size:1.2em;}
.sheet-default-info .sheet-level input {font-size:2em; padding:0; font-weight:800;}

.sheet-default-info .sheet-side {position:relative;}
.sheet-default-info .sheet-top {overflow:hidden; color:unset; border-radius:0; border-width:0; border-bottom-width:1px; background:transparent; padding:0; font-size:1em;}
.sheet-default-info .sheet-top > div {display:table; position:relative; vertical-align:middle; width:100%; max-width:50%; float:left; table-layout:fixed;}
.sheet-default-info .sheet-top > div > * {display:table-cell; vertical-align:middle;}
.sheet-default-info .sheet-top > div strong {width:3em; text-align:left;}
.sheet-default-info .sheet-top input {color:unset; background:transparent; border-width:0px; border-radius:0; width:auto; padding:0 .5em 0 0; max-width:100%; text-align:left; font-size:1.1em; font-weight:800;}

.sheet-default-info .sheet-bottom {display:table; width:100%; table-layout:fixed; margin-top:2em;}
.sheet-default-info .sheet-bottom input {color:unset; background:transparent; border-width:0px; border-bottom-width:1px; border-radius:0; width:auto; padding:0; max-width:100%; text-align:center; font-size:1.1em; font-weight:800;}
.sheet-default-info .sheet-bottom > * {display:table-cell; margin:0;}
.sheet-default-info .sheet-bottom dl {width:15%;}
.sheet-default-info .sheet-bottom dl.sheet-true {width:auto;}
.sheet-default-info .sheet-bottom dt {text-align:center; font-weight:600;}
.sheet-default-info .sheet-bottom dd {padding:0 .5em .5em; margin:0;}

.sheet-view-setting {}
.sheet-view-setting .sheet-duty {display:table; width:100%; table-layout:fixed; margin-top:2em; margin-bottom:.5em;}
.sheet-view-setting .sheet-duty + .sheet-duty {margin-top:.5em;}
.sheet-view-setting .sheet-duty > * {display:table-cell; vertical-align:top;}
.sheet-view-setting .sheet-duty dt {width:6em; font-weight:600; line-height:30px;}
.sheet-view-setting .sheet-duty dd input,
.sheet-view-setting .sheet-duty dd textarea {height:3em; color:unset; background:transparent; border-width:0px; border-left-width:2px; border-radius:0; padding:0 1em;}
.sheet-view-setting .sheet-duty dd textarea {padding:1em;}
.sheet-view-setting .sheet-duty dd input {border-bottom-width:1px;}

@media all and (max-width:640px) {
	.sheet-default-info {padding-left:110px;}
	.sheet-default-info .sheet-level {width:100px;}
	.sheet-default-info .sheet-bottom {margin-top:1em;}
}
@media all and (max-width:390px) {
	.sheet-default-info {padding-left:90px;}
	.sheet-default-info .sheet-level {width:85px; font-size:.9em;}
	.sheet-default-info .sheet-bottom {margin-top:1em;}
	.sheet-default-info .sheet-bottom dd {padding:0 0.2em 0;}
}

.sheet-error {margin-bottom:1em;}
.sheet-error .sheet-error-inner {position:relative; max-width:500px; margin:0 auto;}
.sheet-error td {padding:2em 0 !important;}
.sheet-error .sheet-item {display:inline-block; position:relative; width:12.5%; float:left; box-sizing:border-box;}
.sheet-error .sheet-item:before {content:""; display:block; padding-top:100%;}
.sheet-error .sheet-item input[type="checkbox"] {display:none;}
.sheet-error .sheet-item .sheet-diamond {position:absolute; top:50%; left:50%; width:70%; height:70%; border-width:2px; transform:translate(-50%, -50%) rotate(-45deg); -webkit-transform:translate(-50%, -50%) rotate(-45deg); z-index:0; padding:0; opacity:.3;}
.sheet-error .sheet-item input:checked + .sheet-diamond {opacity:1;}
.sheet-error .sheet-item label {display:block; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); -webkit-transform:translateY(-50%); text-align:center; z-index:1;}
.sheet-error .sheet-item-side {position:absolute; top:100%; left:0; right:0;}
.sheet-error .sheet-item-side input {height:20px; font-size:11px; text-align:center; color:unset; border-radius:0; border-width:0; border-bottom-width:1px; background:transparent; padding:0;}


/* Spect Table */

.sheet-spec-table {clear:both; padding:1em 0;}
.sheet-spec-table table {table-layout:fixed;}
.sheet-spec-table table th {position:relative; text-align:center;}
.sheet-spec-table table td {padding:0;}
.sheet-spec-table table td label {display:block; padding:.2em 0 .2em 1em;}
.sheet-spec-table table .sheet-chk {display:block; position:absolute; top:0; left:0; width:100%; height:2em; opacity:0;}

.sheet-spec-table input[type="checkbox"] {display:none;}
.sheet-spec-table input[type="checkbox"] + * {position:relative;}
.sheet-spec-table input[type="checkbox"] + *:before {content:"✔"; margin-right:.2em; opacity:.3;}
.sheet-spec-table input[type="checkbox"]:checked + * {font-weight:800;}
.sheet-spec-table input[type="checkbox"]:checked + *:before {opacity:1;}

.sheet-hurt-chk {display:inline-block; position:relative; width:1em; height:1em; overflow:hidden; text-indent:-999px; vertical-align:baseline; font-weight:400;}
.sheet-hurt-chk:before {content:"✗"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:1em; text-indent:0; opacity:.3;}

.sheet-soul input[type="text"] {color:unset; border-radius:0; border-width:0; background:transparent;}

@media all and (max-width:520px) {
	.sheet-spec-table {overflow:auto;}
	.sheet-spec-table table {width:550px;}
}

/* 갭 처리 */
.sheet-element-to-determine-style-Z:not(:checked) ~ div thead .sheet-style-Z {opacity:.5;}
.sheet-element-to-determine-style-A:not(:checked) ~ div thead .sheet-style-A {opacity:.5;}
.sheet-element-to-determine-style-B:not(:checked) ~ div thead .sheet-style-B {opacity:.5;}
.sheet-element-to-determine-style-C:not(:checked) ~ div thead .sheet-style-C {opacity:.5;}
.sheet-element-to-determine-style-D:not(:checked) ~ div thead .sheet-style-D {opacity:.5;}
.sheet-element-to-determine-style-E:not(:checked) ~ div thead .sheet-style-E {opacity:.5;}

.sheet-element-to-determine-style-Z:not(:checked) ~ div tbody .sheet-style-Z {background:transparent; border-color:transparent;}
.sheet-element-to-determine-style-A:not(:checked) ~ div tbody .sheet-style-A {background:transparent; border-color:transparent;}
.sheet-element-to-determine-style-B:not(:checked) ~ div tbody .sheet-style-B {background:transparent; border-color:transparent;}
.sheet-element-to-determine-style-C:not(:checked) ~ div tbody .sheet-style-C {background:transparent; border-color:transparent;}
.sheet-element-to-determine-style-D:not(:checked) ~ div tbody .sheet-style-D {background:transparent; border-color:transparent;}
.sheet-element-to-determine-style-E:not(:checked) ~ div tbody .sheet-style-E {background:transparent; border-color:transparent;}

.sheet-hurt-style-A:checked ~ div .sheet-hurt-A {color:red;}
.sheet-hurt-style-A:checked ~ div .sheet-hurt-A label:before {opacity:1;}
.sheet-hurt-style-B:checked ~ div .sheet-hurt-B {color:red;}
.sheet-hurt-style-B:checked ~ div .sheet-hurt-B label:before {opacity:1;}
.sheet-hurt-style-C:checked ~ div .sheet-hurt-C {color:red;}
.sheet-hurt-style-C:checked ~ div .sheet-hurt-C label:before {opacity:1;}
.sheet-hurt-style-D:checked ~ div .sheet-hurt-D {color:red;}
.sheet-hurt-style-D:checked ~ div .sheet-hurt-D label:before {opacity:1;}
.sheet-hurt-style-E:checked ~ div .sheet-hurt-E {color:red;}
.sheet-hurt-style-E:checked ~ div .sheet-hurt-E label:before {opacity:1;}
.sheet-hurt-style-F:checked ~ div .sheet-hurt-F {color:red;}
.sheet-hurt-style-F:checked ~ div .sheet-hurt-F label:before {opacity:1;}



.sheet-bookAnkerBox {overflow:hidden; padding-top:1em;}
.sheet-bookAnkerBox .sheet-title {display:block; font-size:1.1em; font-weight:800;}
.sheet-bookAnkerBox .sheet-anker-list {margin-top:2em;}

.sheet-list {display:block; border-top:1px solid rgba(0,0,0,.7); margin-top:10px; padding:10px 0 0 0;}

.sheet-data-item {display:block; position:relative; padding-left:25px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.1); overflow:hidden;}
.sheet-data-item .sheet-Magic_flag,
.sheet-data-item .sheet-Magic_flag-label {display:block !important; position:absolute !important; width:25px; height:25px !important; top:0; left:0; background:url('./img/ico_flag_open.png') no-repeat 50% 50%; float:none;}
.sheet-data-item .sheet-Magic_flag {z-index:5; opacity:0;}
.sheet-data-item .sheet-Magic_flag-label:before {display:none !important;}
.sheet-data-item input:checked + .sheet-Magic_flag-label {background-image:url('./img/ico_flag_close.png');}

.sheet-data-item input[type="text"],
.sheet-data-item input[type="number"],
.sheet-data-item select {}
.sheet-data-item .sheet-it {display:table; width:100%; table-layout:fixed;}
.sheet-data-item .sheet-it > * {display:table-cell; vertical-align:middle; padding:0 .2em;}
.sheet-data-item .sheet-effect {display:none; padding-top:.5em;}
.sheet-data-item .sheet-Magic_flag:checked ~ .sheet-effect {display:block;}
.sheet-data-item .sheet-effect textarea {display:block; color:unset; border-radius:0; border-width:0; background:transparent; height:4em; padding:.5em; min-height:0;}
.sheet-data-item .sheet-effect textarea + textarea {border-top-width:1px; border-top-style:dashed; height:3em;}

.sheet-data-item .sheet-grid-box {overflow:hidden;}
.sheet-data-item .sheet-grid-box > dl {display:table; width:33.33%; float:left; margin:0 0 1em;}
.sheet-data-item .sheet-grid-box > dl > * {display:table-cell; vertical-align:middle;}
.sheet-data-item .sheet-grid-box > dl dt {width:4em; font-weight:600; text-align:center;}
.sheet-data-item .sheet-grid-box > dl dd input[type="text"],
.sheet-data-item .sheet-grid-box > dl dd input[type="number"],
.sheet-data-item .sheet-grid-box > dl dd select {color:unset; border-radius:0; border-width:0; background:transparent; border-bottom-width:1px;}

.sheet-data-item .sheet-fate,
.sheet-data-item .sheet-type,
.sheet-data-item .sheet-skill {width:6em;}