diff --git a/forgedInDungeon/forgedInDungeon.css b/forgedInDungeon/forgedInDungeon.css
new file mode 100644
index 0000000000..5a1861961a
--- /dev/null
+++ b/forgedInDungeon/forgedInDungeon.css
@@ -0,0 +1,2464 @@
+@import url('https://webfontworld.github.io/heiroflight/HeirofLight.css');
+
+.fid {
+    box-sizing: border-box;
+    position: relative;
+    color: black;
+    width: 840px;
+    max-width: 840px;
+    word-break: keep-all;
+}
+
+.fid * {
+    box-sizing: border-box;
+}
+
+.fid > div {
+    background: #f0f0f0;
+    background-image: url('asset/bg-sheet.png');
+    background-position-y: -70px;
+    background-repeat: repeat-y;
+    padding: 5px;
+}
+
+.fid > div > div {
+    margin: 10px;
+}
+
+.fid .box-item {
+    background: #fff;
+    margin: 0 0 10px 0;
+}
+.fid small {
+    text-align: inherit;
+}
+
+.fid textarea {
+    height: 40px;
+    resize: vertical;
+    border: none;
+    border-bottom: 1px solid black;
+    border-radius: 0;
+    margin: 0 10px;
+    margin-bottom: 5px;
+    width: calc(100% - 20px);
+}
+
+.fid textarea::placeholder {
+    color:#b3b3b3;
+}
+
+.fid input {
+    color:black;
+}
+
+.fid input[type=number] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    font: inherit;
+    background: inherit;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid black;
+    text-align: center;
+}
+.fid input[type=number]::-webkit-outer-spin-button,
+.fid input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.fid input[type=text] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    font: inherit;
+    background: inherit;
+    padding: 0;
+    padding-left: 5px;
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid black;
+    width: 100%;
+    display: inline-block;
+}
+
+.fid input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    border-radius: 0;
+    border: 1px solid black;
+    position: relative;
+}
+
+.fid input[type="checkbox"]:hover {
+    background: rgba(0,0,0,.1);
+}
+
+.fid input[type="checkbox"]::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 1px;
+    color: black;
+    line-height: 1;
+}
+
+.fid input[type="checkbox"]:checked::after {
+    content: "✔";
+}
+
+.fid input[type=text]::placeholder {
+    color:#b3b3b3;
+}
+
+.fid label {
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    width: auto;
+    display: inline-block;
+    font-size: inherit;
+    line-height: normal;
+    vertical-align: middle;
+}
+
+.fid select {
+    width: 140px;
+    margin: 0;
+    border-radius: 0;
+    border: 1px solid;
+}
+
+.fid table {
+    text-align: center;
+}
+
+.fid table input::placeholder {
+    text-align: center;
+}
+
+.fid button {
+    border: none;
+    text-shadow: none;
+    box-shadow: none;
+}
+
+.fid ul {
+    margin-bottom: 0;
+}
+
+/* -----------------------------------------------
+    button init
+ ------------------------------------------------ */
+.ui-dialog .charsheet .fid button[type=roll],
+.ui-dialog .charsheet .fid button[type=compendium] {
+    font-size: inherit;
+}
+
+.ui-dialog .charsheet .fid button[type=roll]:not(.btn-normal) {
+    width: 23px;
+    height: 20px;
+    background:url('asset/ico-roll.png');
+}
+.ui-dialog .charsheet .fid button[type=roll]:not(.btn-normal):hover {
+    background:url('asset/ico-roll-hover.png');
+}
+
+.character .tab-content .tab-shaman .shaman-scroll button.btn-text,
+.character .skill #class-G-skill button.btn-text {
+    background-image: url('asset/ico-roll-alt.png');
+}
+.character .tab-content .tab-shaman .shaman-scroll button.btn-text:hover,
+.character .skill #class-G-skill button.btn-text:hover {
+    background-image: url('asset/ico-roll-alt-hover.png');
+}
+
+.character .item-name:has(.roll-check:not(:checked)) ~ button.btn-dice,
+.character .item-name:has(.roll-check:checked) ~ button.btn-text {
+    display: block;
+}
+.character .item-name:has(.roll-check:not(:checked)) ~ button.btn-text,
+.character .item-name:has(.roll-check:checked) ~ button.btn-dice {
+    display: none;
+}
+
+.ui-dialog .charsheet .fid button[type=roll]::before,
+.ui-dialog .charsheet .fid .own-stat button.btn-resist[type=roll]::before,
+.ui-dialog .charsheet .fid button.btn-normal[type=roll]::before {
+    content: "";
+}
+.ui-dialog .charsheet .fid button.btn-normal[type=roll] {
+    padding: 2px 15px;
+    font-weight: 700;
+}
+
+.ui-dialog .charsheet .fid button.btn-resist[type=roll] {
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    border-radius: 0;
+    background: #333;
+    color: #fff;
+    font-weight: bolder;
+    padding: 5px 0;
+    font-size: 14px;
+}
+
+.ui-dialog .charsheet .fid button.btn-resist[type=roll]:hover {
+    color: #000;
+    background: #ff8d00;
+}
+
+
+.ui-dialog .charsheet .fid .repcontainer.editmode .repitem .itemcontrol {
+    position: absolute;
+    z-index: 1;
+}
+
+.ui-dialog .charsheet .repcontrol_edit,
+.ui-dialog .charsheet .repcontrol_add {
+    background: #b3b3b3;
+    color: #333;
+    border-radius: 0;
+    font-size: 10px;
+}
+.ui-dialog .charsheet .repcontrol_edit:hover,
+.ui-dialog .charsheet .repcontrol_add:hover {
+    background: #fff;
+}
+
+/* -----------------------------------------------
+    FID class style
+ ------------------------------------------------ */
+.fid .heir {
+    font-family: 'HeirofLight' !important;
+    margin-top: -.2em;
+}
+
+.fid button.tool-tip {
+    cursor: pointer;
+    border-radius: 30px;
+    border: none;
+    background: #f0f0f0;
+    color: black;
+    font-weight: 900;
+    padding: 0;
+    width: 18px;
+    height: 18px;
+    line-height: normal;
+}
+
+.fid button.tool-tip:hover {
+    background: #b3b3b3;
+}
+
+.fid .disable {
+    pointer-events:none;
+}
+
+.fid input.non-input {
+    border:none;
+}
+
+.fid .dn {
+    display: none;
+}
+
+.fid .unique {
+    background-color: #dcdcdc;
+}
+
+.fid .left,
+.fid .right {
+    display: inline-block;
+    width: 49%;
+    vertical-align: top;
+}
+.fid .left {
+    float:left;
+}
+.fid .right {
+    float: right;
+}
+.fid *:has(.left)::after,
+.fid *:has(.right)::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.fid .checkgroup {
+    display: inline-block;
+}
+
+.fid .field-title-box {
+    background: #333;
+    padding: 7px;
+    text-align: left;
+    margin-bottom: 10px;
+}
+
+.fid .field-title-box.inline {
+    display: inline-block;
+    min-width: 50px;
+    height: 35px;
+    margin-bottom: 0;
+    margin-right: -5px;
+    line-height: 1.7;
+    text-align: center;
+}
+
+.fid .item-title.field-title-box {
+    margin: 0;
+}
+
+.fid .field-title {
+    color: #ff8d00;
+    text-align: left;
+    font-weight: bolder;
+}
+
+.fid .field-input-box {
+    display: inline-block;
+}
+
+.fid .char-name .field-input-box,
+.fid .char-desc .field-input-box {
+    width: 340px;
+}
+.fid .camefrom .field-input-box {
+    width: 240px;
+}
+.fid .priest-info .field-input-box,
+.fid .shaman-info .field-input-box {
+    width: 740px;
+}
+.fid .priest-info .laws-row .field-input-box {
+    width: 690px;
+}
+.fid .party .info .party-purpose .field-input-box,
+.fid .party .info .party-rival .field-input-box {
+    width: 620px;
+}
+
+.fid .font-white {
+    color: white;
+}
+
+.fid .btn-orange {
+    background: #ff8d00;
+}
+.fid .btn-orange:hover {
+    background: #ff5e00;
+    color: #fff9f9;
+}
+.fid .btn-gray {
+    background: #f0f0f0;
+}
+.fid .btn-gray:hover {
+    background: #b3b3b3;
+}
+.fid .btn-normal {
+    border-radius: 0;
+}
+
+/* -----------------------------------------------
+    SELECTOR
+ ------------------------------------------------ */
+.fid > .selector {
+   padding-top: 20px; 
+}
+
+.fid > .selector .logo,
+.fid > .selector .contents,
+.fid > .selector .choose {
+    width: 650px;
+    margin: 0 auto;
+    text-align: center;
+}
+.fid > .selector .logo img {
+    width: 70px;
+    height: auto;
+}
+.fid > .selector .contents {
+    background: #fff;
+    margin: 20px auto;
+    padding: 20px;
+}
+.fid > .selector .contents h1 {
+    margin-bottom: 10px;
+    font-size: 42px;
+    line-height: inherit;
+}
+.fid > .selector .contents p {
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+.fid > .selector .choose button {
+    color: #fff;
+    background: #333;
+    padding: 10px 20px;
+    width: 150px;
+    margin-bottom: 30px;
+}
+.fid > .selector .choose button:first-child {
+    margin-right: 10px;
+}
+.fid > .selector .choose button:hover {
+    background-color: #ff8d00;
+}
+.fid > .selector .copyright {
+    background: #b3b3b3;
+    font-size: 10px;
+    color: #444;
+    text-align: center;
+    padding: 10px;
+}
+
+/* -----------------------------------------------
+    item-row
+ ------------------------------------------------ */
+.fid .item-title {
+    font-weight: bolder;
+    font-size:15px
+}
+
+.fid .item-row {
+    position: relative;
+    width: 100%;
+    padding: 6px;
+    background: #fff;
+}
+
+.fid .item-row:nth-child(even) {
+    background: #f5f5f5;
+}
+
+.fid .repcontainer .repitem:nth-child(odd) .item-row {
+    background: #fff;
+}
+
+.fid .repcontainer .repitem:nth-child(even) .item-row {
+    background: #f5f5f5;
+}
+
+
+.fid .item-row > div,
+.fid .item-row .item-check,
+.fid .item-row .item-count {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.fid .skill .item-row .item-count {
+    position: initial;
+}
+
+.fid .item-row .item-name {
+    position: relative;
+    width: 120px;
+    vertical-align: top;
+}
+.fid .item-row .item-name .item-check input {
+    border: 0;
+    background: #dcdcdc;
+    vertical-align: top;
+}
+.fid .item-row .item-name .item-check input::after {
+    left: 2px;
+    top: 1px;
+}
+
+.fid .item-row .item-name span {
+    font-weight: bolder;
+    vertical-align: top;
+}
+
+.fid .item-row:nth-child(even) {
+    background: #f5f5f5;
+}
+.fid .item-row .item-desc {
+    display: inline-block;
+    width: 610px;
+}
+.fid .item-row .togglebox,
+.scroll-content {
+    padding-top: 5px;
+}
+.fid .item-row .togglebox p {
+    font-size: 11px;
+    color: #333;
+    padding: 5px 0;
+    margin: 0;
+}
+.fid .item-row .togglebox textarea {
+    width: 100%;
+    margin: 0;
+}
+.fid .item-row .togglebox .checkgroup {
+    padding-bottom: 5px;
+    font-size: 12px;
+}
+.fid .item-row .togglebox .checkgroup input {
+    margin-right: 2px;
+}
+.fid .item-row .togglebox .checkgroup label {
+    margin-right: 5px;
+}
+.fid .item-row .togglebox .checkgroup input:checked {
+    background: #ff8d00;
+}
+.fid .items .item-row:nth-child(even) .togglebox textarea {
+    background: #fff;
+}
+
+.fid .class-item,
+.fid .equip-item,
+.fid .common-skill {
+    margin-bottom: 20px;
+}
+
+.fid .class-item .item-title input[name$="name"] {
+    width: 100px;
+    color: #ff8d00;
+}
+.fid .items .item-title button.tool-tip {
+    float:right;
+    margin-top: 2px;
+}
+
+.fid .class-item .item-row .item-name,
+.fid .own-item .item-row .item-name,
+.fid .equip-item .item-row .item-name {
+    width: 100%;
+}
+.fid .class-item .item-row .item-name .item-check,
+.fid .own-item .item-row .item-name .item-check,
+.fid .equip-item .item-row .item-name .item-check {
+    width: 60px;
+}
+.fid .item-row .item-count {
+    position: absolute;
+    left: 180px;
+}
+
+
+/* -----------------------------------------------
+    HEADER
+ ------------------------------------------------ */
+.fid .header {
+    position: relative;
+    background: #fff;
+}
+.fid .header .class-header,
+.fid .header .class-name,
+.fid .header .class-desc {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+}
+
+.fid .header .class-header {
+    background: url('asset/bg-sheet-title.png');
+    padding: 10px;
+    width: 620px;
+    height: 65px;
+    margin: 0;
+}
+
+.fid .header .class-name {
+    position: relative;
+}
+
+.fid .header .class-name select {
+    position: absolute;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    margin: 0;
+    padding: 0;
+    border: none;
+    height: 100%;
+}
+
+.fid .header .class-desc {
+    width: 420px;
+    vertical-align: bottom;
+}
+.fid .header .class-desc input {
+    font-style: italic;
+}
+
+.fid .header .class-name h1 {
+    display: inline-block;
+    width: 150px;
+    line-height: inherit;
+}
+
+.fid .header .class-name h1 input {
+    color: #ff8d00;
+}
+
+.fid .header .header-buttons {
+    position: absolute;
+    text-align: right;
+    top: 5px;
+    right: 10px;
+}
+.fid .header .header-buttons button[name$="allReset"] {
+    margin: 0 5px 5px 0;
+    font-size: 11px;
+}
+
+/* -----------------------------------------------
+    character profile
+ ------------------------------------------------ */
+.character .profile::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+.character .profile .class-stat .field-title-box {
+    height: 40px;
+    vertical-align: middle;
+}
+.character .profile .class-stat .field-title {
+    vertical-align: middle;
+    line-height: normal;
+}
+.character .profile .class-stat .class-box {
+    display: inline-block;
+    width: 140px;
+    padding-left: 5px;
+}
+.character .profile .class-stat .class-box .checkgroup input[type="text"] {
+    width: 50px;
+    padding: 0;
+    text-align: center;
+}
+.character .profile .class-stat .class-box .checkgroup button {
+    padding: 2px 5px;
+}
+.character .profile .class-stat .class-box .checkgroup button:hover input[type="text"] {
+    color: #fff9f9;
+}
+.character .profile .class-stat .class-box .checkgroup input[type="text"]::placeholder {
+    color: black;
+}
+.character .profile .class-stat .class-box-1 {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.character .profile .class-stat .class-box-2 {
+    width: 140px;
+    vertical-align: middle;
+}
+.character .profile .class-stat .class-box-2 input[type="number"] {
+    width: 30px;
+    margin-right: 10px;
+}
+
+.character .profile .class-stat .class-box-3 {
+    vertical-align: middle;
+}
+.character .profile .class-stat .class-box-4 {
+    width: 80px;
+    vertical-align: middle;
+}
+
+.character .profile .stat-box .stat-row {
+    padding: 12px 7px;
+}
+.character .profile .stat-box .stat-row:nth-child(2) {
+    padding: 0px 7px;
+}
+
+.character .logo {
+    padding: 15px 10px;
+}
+.character .logo .img,
+.character .logo .desc {
+    display: inline-block;
+    vertical-align: middle;
+}
+.character .logo .img {
+    width: 140px;
+}
+.character .logo .desc {
+    text-align: center;
+    width: 230px;
+}
+.character .logo .desc h2 {
+    font-size: 28px;
+    margin-bottom: 10px;
+}
+.character .logo .desc small {
+    margin-bottom: 10px;
+}
+.character .logo .desc button.btn-normal {
+    width: 150px;
+}
+
+.character .camefrom select {
+    width: 100px;
+}
+
+.fid .own-stat {
+    width: 397px;
+}
+
+.fid .own-stat > div {
+    display: inline-block;
+    width: 129px;
+}
+.fid .own-stat .own-stat-2 {
+    margin-right: 1px;
+}
+
+/* -----------------------------------------------
+    middle TABS
+ ------------------------------------------------ */
+.character > .tabs,
+.party > .tabs {
+    text-align: center;
+    margin: 10px;
+    padding: 10px;
+    background-color: #333;
+    background-image: url('asset/bg-tabs.png');
+    background-repeat: no-repeat;
+    background-position-x: 150px;
+    position: relative;
+}
+.character > .tabs button[type="action"],
+.party > .tabs button[type="action"] {
+    background: transparent ;
+    color: #fff;
+    font-size: 17px;
+    vertical-align: middle;
+    padding: 0 25px;
+}
+.character > .tabs .tool-tip {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+.character #nowTab2[value="status"] ~ .tabs {
+    background-position-x: 60px;
+}
+.character #nowTab2[value="clock"] ~ .tabs,
+.party #nowTab3[value="party-clock"] ~ .tabs {
+    background-position-x: 150px;
+}
+.character #nowTab2[value="skill"] ~ .tabs {
+    background-position-x: 260px;
+}
+.party #nowTab3[value="party-native"] ~ .tabs {
+    background-position-x: 30px;
+}
+.party #nowTab3[value="party-common"] ~ .tabs {
+    background-position-x: 320px;
+}
+
+.character #nowTab2[value="status"] ~ .tabs button[name$="status"],
+.character #nowTab2[value="clock"] ~ .tabs button[name$="clock"],
+.character #nowTab2[value="skill"] ~ .tabs button[name$="skill"],
+.party #nowTab3[value="party-native"] ~ .tabs button[name$="native"],
+.party #nowTab3[value="party-clock"] ~ .tabs button[name$="clock"],
+.party #nowTab3[value="party-common"] ~ .tabs button[name$="common"] {
+    color: #ff8d00;
+    font-size: 19px;
+    font-weight: bolder;
+}
+
+.character .status,
+.character .clock,
+.character .skill,
+.party .party-native,
+.party .party-clock,
+.party .party-common {
+    background: #dcdcdc;
+    margin-top: -10px;
+    padding: 10px;
+}
+
+.character .status .char-xp .field-title-box,
+.party .party-xp .field-title-box {
+    padding: 0;
+    float: left;
+}
+.character .status .char-xp .field-title-box button,
+.party .party-xp .field-title-box button {
+    width: 80px;
+    height: 35px;
+    background: transparent;
+}
+.party .party-xp .field-title-box button {
+    padding-right: 11px;
+}
+.character .status .char-xp .field-title-box button:hover,
+.party .party-xp .field-title-box button:hover {
+    background: #ff8d00;
+    color: black
+}
+.character .status .char-xp .field-title-box button::before,
+.party .party-xp .field-title-box button::before {
+    content:"XP";
+    display: block;
+    text-align: center;
+}
+.character .status .char-xp .field-title-box button:hover::before,
+.party .party-xp .field-title-box button:hover::before {
+    content:"XP 초기화";
+}
+.character .status .char-xp .checkgroup {
+    width: 710px;
+    margin-left:5px;
+}
+
+.party .party-xp .checkgroup {
+    width: 737px;
+    margin-left: -2px;
+}
+
+.character .status .char-xp .checkgroup input[type="radio"],
+.party .party-xp .checkgroup input[type="radio"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0;
+    float: left;
+    width: 71px;
+    height: 35px;
+    border: 1px solid black;
+    border-left: 0;
+}
+
+.party .party-xp .checkgroup input[type="radio"] {
+    width: 61.4px;
+}
+.character .status .char-xp .checkgroup input[type="radio"]:hover,
+.party .party-xp .checkgroup input[type="radio"]:hover {
+    background-color: #dcdcdc;
+}
+.character .status .char-xp .checkgroup input[type="radio"][value="10"]:hover {
+    background-color: #b3b3b3;
+}
+.character .status .char-xp .checkgroup input[type="hidden"][value="1"] ~ input[type="radio"].xp-1,
+.character .status .char-xp .checkgroup input[type="hidden"][value="2"] ~ input[type="radio"].xp-2,
+.character .status .char-xp .checkgroup input[type="hidden"][value="3"] ~ input[type="radio"].xp-3,
+.character .status .char-xp .checkgroup input[type="hidden"][value="4"] ~ input[type="radio"].xp-4,
+.character .status .char-xp .checkgroup input[type="hidden"][value="5"] ~ input[type="radio"].xp-5,
+.character .status .char-xp .checkgroup input[type="hidden"][value="6"] ~ input[type="radio"].xp-6,
+.character .status .char-xp .checkgroup input[type="hidden"][value="7"] ~ input[type="radio"].xp-7,
+.character .status .char-xp .checkgroup input[type="hidden"][value="8"] ~ input[type="radio"].xp-8,
+.character .status .char-xp .checkgroup input[type="hidden"][value="9"] ~ input[type="radio"].xp-9,
+.character .status .char-xp .checkgroup input[type="hidden"][value="10"] ~ input[type="radio"].xp-10,
+.party .party-xp .checkgroup input[type="hidden"][value="1"] ~ input[type="radio"].xp-1,
+.party .party-xp .checkgroup input[type="hidden"][value="2"] ~ input[type="radio"].xp-2,
+.party .party-xp .checkgroup input[type="hidden"][value="3"] ~ input[type="radio"].xp-3,
+.party .party-xp .checkgroup input[type="hidden"][value="4"] ~ input[type="radio"].xp-4,
+.party .party-xp .checkgroup input[type="hidden"][value="5"] ~ input[type="radio"].xp-5,
+.party .party-xp .checkgroup input[type="hidden"][value="6"] ~ input[type="radio"].xp-6,
+.party .party-xp .checkgroup input[type="hidden"][value="7"] ~ input[type="radio"].xp-7,
+.party .party-xp .checkgroup input[type="hidden"][value="8"] ~ input[type="radio"].xp-8,
+.party .party-xp .checkgroup input[type="hidden"][value="9"] ~ input[type="radio"].xp-9,
+.party .party-xp .checkgroup input[type="hidden"][value="10"] ~ input[type="radio"].xp-10,
+.party .party-xp .checkgroup input[type="hidden"][value="11"] ~ input[type="radio"].xp-11,
+.party .party-xp .checkgroup input[type="hidden"][value="12"] ~ input[type="radio"].xp-12 {
+    background: #ff8d00;
+}
+.character .status .char-xp .checkgroup input[type="hidden"][value="10"] ~ input[type="radio"][value="10"] {
+    background: #ff5e00;
+}
+
+.character .status .char-xp .xp-row:last-child,
+.party .party-xp .xp-row:last-child {
+    padding: 10px;
+}
+.character .status .char-xp p {
+    font-weight: bolder;
+}
+.character .status .char-xp span,
+.party .party-xp .xp-row:last-child span {
+    margin-right: 10px;
+    font-size: 12px;
+}
+.character .status .char-xp label,
+.party .party-xp label {
+    border: 1px solid black;
+    padding: 5px 10px;
+    margin-top: -10px;
+    float: right;
+}
+.character .status .char-xp label:hover,
+.party .party-xp label:hover {
+    background: #f0f0f0;
+}
+.character .status .char-xp textarea,
+.party .party-xp textarea {
+    margin: 10px 0 5px;
+    width: 100%;
+}
+.character .status .char-xp::after,
+.party .party-xp::after {
+    content:"";
+    display: block;
+    clear: both;
+}
+
+.character .status .inside input[type="text"] {
+    width: 250px;
+}
+.character .status .inside label {
+    display: inline-block;
+    width: auto;
+}
+.character .status .inside .inside-row {
+    margin-bottom: 5px;
+    padding: 5px;
+}
+.character .status .inside .inside-row:last-child {
+    margin-bottom: 10px;
+}
+.character .status .inside .inside-row span {
+    font-weight: bolder;
+    margin-right: 5px;
+    padding-left: 5px;
+}
+.character .status .inside .inside-row input[type="text"] {
+    width: 310px;
+    margin-right: 5px;
+}
+.character .status .inside .inside-row input[type="checkbox"] {
+    background: #333;
+}
+.character .status .inside .inside-row input[type="checkbox"]::after {
+    color: #fff;
+}
+
+.character .status .inside > .inside-row:nth-child(5):has(input[type="text"]:placeholder-shown) span,
+.character .status .inside > .inside-row:nth-child(6):has(input[type="text"]:placeholder-shown) span {
+    color: lightgray;
+}
+
+.character .status .trauma .checkgroup {
+    width: 310px;
+    margin-left: 5px;
+    text-align: center;
+}
+
+.character .status .trauma .checkgroup input {
+    margin-right: 5px;
+}
+.character .status .trauma .checkgroup input:hover {
+    background: #b3b3b3;
+}
+
+.character .status .trauma.field-title-box,
+.character .status .damage .field-title-box,
+.character .status .stress .field-title-box {
+    margin: 0;
+}
+
+.character .status .trick .font-white,
+.character .status .stress .font-white {
+    margin-left: 10px;
+}
+
+.character .status .stress::before {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.character .status .trick input[type="number"],
+.character .status .stress input[type="number"] {
+    width: 30px;
+    border-bottom-color: #fff;
+    margin: 0 5px;
+}
+
+.character .status .trick .field-title-box {
+    vertical-align: middle;
+}
+.character .status .trick .checkgroup {
+    margin-left: 5px;
+    width: 195px;
+    text-align: center;
+}
+
+.character .status .damage .field-title-box button,
+.character .status .stress .field-title-box button {
+    float:right;
+    margin-top: -3px;
+}
+.character .status .stress .field-title-box button {
+    margin-top: -2px;
+}
+
+.character .status .damage table tr,
+.character .status .damage table td {
+    border-bottom: 5px solid #dcdcdc;
+}
+.character .status .damage table td {
+    border-right: 4px solid #dcdcdc;
+    padding: 5px 7px;
+}
+.character .status .damage table tr:first-child td {
+    padding: 11px 0;
+}
+.character .status .damage table td.step,
+.character .status .damage table td.result {
+    background: #b3b3b3;
+}
+.character .status .damage table tr:last-child td {
+    border-bottom: 0;
+}
+.character .status .damage table td:last-child {
+    border-right: 0;
+}
+.character .status .damage table td input[type="text"] {
+    padding: 0;
+}
+
+.character .status .damage table .equip-checker {
+    display: inline-block;
+    margin: 0 10px;
+}
+
+.party .party-skill {
+    margin-bottom: 10px;
+}
+
+/* -----------------------------------------------
+    STRESS, TRICK
+ ------------------------------------------------ */
+.character .status .stress .checkgroup {
+    width: 480px;
+    text-align: center;
+}
+
+.character .profile .class-box-2 .checkgroup input[type="checkbox"],
+.character .status .stress .checkgroup input[type="checkbox"],
+.character .status .trick .checkgroup input[type="checkbox"] {
+    appearance: none;
+    border: none;
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    box-sizing: content-box;
+    background: #b3b3b3;
+}
+
+.character .profile .class-box-2 .checkgroup input[type="checkbox"]::after,
+.character .status .stress .checkgroup input[type="checkbox"]::after,
+.character .status .trick .checkgroup input[type="checkbox"]::after {
+    color: #fff;
+    left: 2px;
+    top: 1px;
+}
+
+.character .profile .class-box-2 input[type="hidden"][value="1"] ~ .checkgroup input.mana1,
+.character .profile .class-box-2 input[type="hidden"][value="2"] ~ .checkgroup input.mana2,
+.character .profile .class-box-2 input[type="hidden"][value="3"] ~ .checkgroup input.mana3,
+.character .profile .class-box-2 input[type="hidden"][value="4"] ~ .checkgroup input.mana4,
+.character .status .stress input[type="hidden"][value="1"] ~ .checkgroup input.stress1,
+.character .status .stress input[type="hidden"][value="2"] ~ .checkgroup input.stress2,
+.character .status .stress input[type="hidden"][value="3"] ~ .checkgroup input.stress3,
+.character .status .stress input[type="hidden"][value="4"] ~ .checkgroup input.stress4,
+.character .status .stress input[type="hidden"][value="5"] ~ .checkgroup input.stress5,
+.character .status .stress input[type="hidden"][value="6"] ~ .checkgroup input.stress6,
+.character .status .stress input[type="hidden"][value="7"] ~ .checkgroup input.stress7,
+.character .status .stress input[type="hidden"][value="8"] ~ .checkgroup input.stress8,
+.character .status .stress input[type="hidden"][value="9"] ~ .checkgroup input.stress9,
+.character .status .stress input[type="hidden"][value="10"] ~ .checkgroup input.stress10,
+.character .status .stress input[type="hidden"][value="11"] ~ .checkgroup input.stress11,
+.character .status .stress input[type="hidden"][value="12"] ~ .checkgroup input.stress12,
+.character .status .stress input[type="hidden"][value="13"] ~ .checkgroup input.stress13,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="1"]) ~ .checkgroup input.trick1,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="2"]) ~ .checkgroup input.trick2,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="3"]) ~ .checkgroup input.trick3,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="4"]) ~ .checkgroup input.trick4,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="5"]) ~ .checkgroup input.trick5,
+.character .status .trick .field-title-box:has(input[type="hidden"][value="6"]) ~ .checkgroup input.trick6 {
+    background: #ff8d00;
+    border: none;
+}
+
+
+/* -----------------------------------------------
+    character FOOTER
+ ------------------------------------------------ */
+
+.character .footer .asset .field-input-box {
+    width: 740px;
+    padding-right: 10px;
+    text-align: right;
+}
+.character .footer .asset .field-input-box > div {
+    display: inline-block;
+    width: 200px;
+}
+.character .footer .asset .field-input-box > div input {
+    max-width: 140px;
+    text-align: right;
+}
+
+
+/* -----------------------------------------------
+    CLOCK
+ ------------------------------------------------ */
+.clock .clock-instance {
+    width: 390px;
+    padding: 10px;
+    display: inline-block;
+}
+
+.clock .clock-instance.clock-bard,
+.clock .clock-instance.clock-shaman {
+    width: 100%;
+    background: #fff;
+}
+.clock .clock-bard.box-item,
+.clock .clock-shaman.box-item {
+    background: transparent;
+}
+
+.clock .clock-instance.clock-bard .clock-name span:last-child,
+.clock .clock-instance.clock-shaman .clock-name span:last-child {
+    float: right;
+    font-size: 10px;
+}
+
+.clock .clock-instance textarea {
+    margin: 0;
+    width: 100%;
+    min-height: 75px;
+}
+
+.clock .clock-instance .clock-name h3 {
+    display: inline;
+}
+
+.clock .clock-set {
+    width: 100px;
+    display: inline-block;
+    position: relative;
+}
+
+.clock .clock-set select {
+    width: 70px;
+}
+
+.clock .clock-set button[type="roll"] {
+    margin: 0;
+}
+
+.clock .clock-info {
+    display: inline-block;
+    vertical-align: top;
+    width: calc(100% - 105px);
+}
+
+.clock .clock-set .clock-img {
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 6px;
+    position: relative;
+    padding: 5px;
+}
+
+.clock .clock-set .clock-img input {
+    opacity: 0;
+    position: absolute;
+}
+
+/*4*/
+.clock .clock-set input[name*="type"][value="4"] ~ .clock-img input {width: 35px;height: 35px;}
+.clock .clock-set input[name*="type"][value="4"] ~ .clock-img input[value="1"] {left: 40px;}
+.clock .clock-set input[name*="type"][value="4"] ~ .clock-img input[value="2"] {left: 40px;top: 40px;}
+.clock .clock-set input[name*="type"][value="4"] ~ .clock-img input[value="3"] {top: 40px;}
+
+/*6*/
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input {width: 25px;height: 25px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="1"] {left: 40px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="2"] {left: 54px;top: 27px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="3"] {left: 40px;top: 50px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="4"] {left: 15px;top: 50px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="5"] {top: 27px;left: 2px;}
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[value="6"] {left: 15px;}
+
+/*8*/
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input {width: 21px;height: 21px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="1"] {left: 40px;top: 4px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="2"] {left: 55px;top: 19px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="3"] {left: 55px;top: 40px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="4"] {left: 40px;top: 55px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="5"] {left: 19px;top: 55px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="6"] {left: 4px;top: 40px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="7"] {left: 4px;top: 19px;}
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[value="8"] {left: 19px;top: 4px;}
+
+/*10*/
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input {width: 19px;height: 19px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="1"] {left: 39px;top: 3px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="2"] {left: 54px;top: 13px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="3"] {left: 60px;top: 30px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="4"] {left: 54px;top: 48px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="5"] {left: 39px;top: 58px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="6"] {top: 58px;left: 22px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="7"] {top: 48px;left: 7px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="8"] {top: 30px;left: 1px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="9"] {top: 13px;left: 7px;}
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input[value="10"] {left: 22px;top: 3px;}
+
+/*12*/
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input {width: 18px;height: 18px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="1"] {left: 39px;top: 2px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="2"] {left: 53px;top: 9px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="3"] {left: 61px;top: 23px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="4"] {left: 61px;top: 39px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="5"] {left: 53px;top: 53px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="6"] {left: 39px;top: 61px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="7"] {top: 61px;left: 23px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="8"] {top: 53px;left: 9px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="9"] {top: 39px;left: 1px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="10"] {top: 23px;left: 1px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="11"] {top: 9px;left: 9px;}
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img input[value="12"] {top: 2px;left: 23px;}
+
+/* 4 */
+.clock .clock-set input[name*="type"][value="4"] ~ input[name*="step"][value="0"] ~ .clock-img {background-image: url('asset/clock/4-0.png');}
+.clock .clock-set input[name*="type"][value="4"] ~ input[name*="step"][value="1"] ~ .clock-img {background-image: url('asset/clock/4-1.png');}
+.clock .clock-set input[name*="type"][value="4"] ~ input[name*="step"][value="2"] ~ .clock-img {background-image: url('asset/clock/4-2.png');}
+.clock .clock-set input[name*="type"][value="4"] ~ input[name*="step"][value="3"] ~ .clock-img {background-image: url('asset/clock/4-3.png');}
+.clock .clock-set input[name*="type"][value="4"] ~ input[name*="step"][value="4"] ~ .clock-img {background-image: url('asset/clock/4-4.png');}
+
+/* 6 */
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="0"] ~ .clock-img {background-image: url('asset/clock/6-0.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="1"] ~ .clock-img {background-image: url('asset/clock/6-1.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="2"] ~ .clock-img {background-image: url('asset/clock/6-2.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="3"] ~ .clock-img {background-image: url('asset/clock/6-3.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="4"] ~ .clock-img {background-image: url('asset/clock/6-4.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="5"] ~ .clock-img {background-image: url('asset/clock/6-5.png');}
+.clock .clock-set input[name*="type"][value="6"] ~ input[name*="step"][value="6"] ~ .clock-img {background-image: url('asset/clock/6-6.png');}
+
+/* 8 */
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="0"] ~ .clock-img {background-image: url('asset/clock/8-0.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="1"] ~ .clock-img {background-image: url('asset/clock/8-1.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="2"] ~ .clock-img {background-image: url('asset/clock/8-2.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="3"] ~ .clock-img {background-image: url('asset/clock/8-3.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="4"] ~ .clock-img {background-image: url('asset/clock/8-4.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="5"] ~ .clock-img {background-image: url('asset/clock/8-5.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="6"] ~ .clock-img {background-image: url('asset/clock/8-6.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="7"] ~ .clock-img {background-image: url('asset/clock/8-7.png');}
+.clock .clock-set input[name*="type"][value="8"] ~ input[name*="step"][value="8"] ~ .clock-img {background-image: url('asset/clock/8-8.png');}
+
+/* 10 */
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="0"] ~ .clock-img {background-image: url('asset/clock/10-0.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="1"] ~ .clock-img {background-image: url('asset/clock/10-1.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="2"] ~ .clock-img {background-image: url('asset/clock/10-2.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="3"] ~ .clock-img {background-image: url('asset/clock/10-3.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="4"] ~ .clock-img {background-image: url('asset/clock/10-4.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="5"] ~ .clock-img {background-image: url('asset/clock/10-5.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="6"] ~ .clock-img {background-image: url('asset/clock/10-6.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="7"] ~ .clock-img {background-image: url('asset/clock/10-7.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="8"] ~ .clock-img {background-image: url('asset/clock/10-8.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="9"] ~ .clock-img {background-image: url('asset/clock/10-9.png');}
+.clock .clock-set input[name*="type"][value="10"] ~ input[name*="step"][value="10"] ~ .clock-img {background-image: url('asset/clock/10-10.png');}
+
+/* 12 */
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="0"] ~ .clock-img {background-image: url('asset/clock/12-0.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="1"] ~ .clock-img {background-image: url('asset/clock/12-1.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="2"] ~ .clock-img {background-image: url('asset/clock/12-2.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="3"] ~ .clock-img {background-image: url('asset/clock/12-3.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="4"] ~ .clock-img {background-image: url('asset/clock/12-4.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="5"] ~ .clock-img {background-image: url('asset/clock/12-5.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="6"] ~ .clock-img {background-image: url('asset/clock/12-6.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="7"] ~ .clock-img {background-image: url('asset/clock/12-7.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="8"] ~ .clock-img {background-image: url('asset/clock/12-8.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="9"] ~ .clock-img {background-image: url('asset/clock/12-9.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="10"] ~ .clock-img {background-image: url('asset/clock/12-10.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="11"] ~ .clock-img {background-image: url('asset/clock/12-11.png');}
+.clock .clock-set input[name*="type"][value="12"] ~ input[name*="step"][value="12"] ~ .clock-img {background-image: url('asset/clock/12-12.png');}
+
+.clock .clock-set .clock-img ~ input[value="0"] {
+    background: #b3b3b3;
+    color: #fff;
+    border: none;
+    appearance: none;
+    position: absolute;
+    top: 65px;
+    padding: 2px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.clock .clock-set .clock-img ~ input[value="0"]::after {
+    display: inline-block;
+    content: "X";
+    cursor: pointer;
+}
+
+.clock .clock-set input[name*="type"] ~ input[name*="step"][value="0"] ~ input[type="radio"][value="0"] {
+    display: none;
+}
+
+.clock .clock-set input[name*="type"] ~ input[name*="step"]:not([value="0"]) ~ input[type="radio"][value="0"] {
+    display: block;
+}
+
+.clock .clock-set .clock-img .clock-6 {
+    display: none;
+}
+
+.clock .clock-set input[name*="type"][value="6"] ~ .clock-img input[class$="clock-6"] {
+    display: inline;
+}
+
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[class$="clock-6"],
+.clock .clock-set input[name*="type"][value="8"] ~ .clock-img input[class$="clock-8"] {
+    display: inline;
+}
+
+.clock .clock-set input[name*="type"][value="10"] ~ .clock-img input:not([class$="clock-12"]) {
+    display: inline;
+}
+
+.clock .clock-set input[name*="type"][value="12"] ~ .clock-img * {
+    display: inline;
+}
+
+.party .party-reputation-clock button[type="roll"] {
+    float: right;
+    margin: 0;
+}
+
+/* -----------------------------------------------
+    TOGGLE and TOGGLEBOX
+ ------------------------------------------------ */
+input[type=checkbox].toggle {
+    position: relative;
+}
+
+input[type=checkbox].toggle::after {
+    content: "▾";
+    font-size: 20px;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: -1px;
+    font-weight: bolder;
+}
+
+input[type=checkbox].toggle ~ .togglebox {
+    display: none;
+}
+input[type=checkbox]:checked.toggle::after {
+    content: "▴";
+}
+
+input[type=checkbox]:checked.toggle ~ .togglebox {
+    display: block;
+}
+
+/* -----------------------------------------------
+    item-tag
+ ------------------------------------------------ */
+.item-row .item-tag,
+.item-row input.toggle,
+.item-row button[type="roll"] {
+    position: absolute;
+    right: 0;
+}
+
+.item-row button[type="roll"] {
+    top: 5px;
+}
+
+.item-row input.toggle {
+    top: 6px;
+    right: 30px;
+    border: none;
+    width: 18px;
+    height: 18px;
+    background: transparent;
+}
+
+.item-row .item-tag {
+    top: 6px;
+    border-radius: 30px;
+    width: 18px;
+    height: 18px;
+    background: #333;
+    right: 53px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 1.3;
+}
+.togglebox:has(input.input-tag:placeholder-shown) ~ .item-tag {
+    color: #fff;
+}
+.togglebox:has(input.input-tag:not(:placeholder-shown)) ~ .item-tag {
+    color: #ff8d00;
+}
+
+/* -----------------------------------------------
+    tag - TUNE
+ ------------------------------------------------ */
+.fid .items .item-row .input-tag {
+    width: 320px;
+    background: #f5f5f5;
+    padding: 5px;
+}
+
+.fid .items .item-row:not(:has(.item-tune)) .input-tag {
+    width: 100%;
+}
+
+.fid .items .item-row:nth-child(even) .input-tag {
+    background: #fff;
+}
+
+.fid .items .item-row .item-tune {
+    display: inline-block;
+}
+.fid .items .item-row .item-tune .tunechecker::after {
+    content: "조율";
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 15px;
+    line-height: 1.2;
+}
+.fid .items .item-row .item-tune .tunechecker:hover::after {
+    color: #ff3300;
+}
+.fid .items .item-row .item-tune .tunechecker:checked {
+    background: #ff8d00;
+}
+
+.fid .items .item-row:has(.tunechecker:checked) .item-name span,
+.fid .items .item-row:has(.tunechecker:checked) .item-name span input {
+    color: #ff8d00;
+}
+.fid .items .item-row:has(.tunechecker:checked + .tunechecker:checked) .item-name span,
+.fid .items .item-row:has(.tunechecker:checked + .tunechecker:checked) .item-name span input {
+    color: #ff3300;
+}
+
+/* -----------------------------------------------
+    SELECTOR toggle
+ ------------------------------------------------ */
+.character, .party {display: none;}
+input#nowTab1[value="character"] ~ .character,
+input#nowTab1[value="party"] ~ .party {display: block;}
+input#nowTab1[value="character"] ~ .selector,
+input#nowTab1[value="party"] ~ .selector {display: none;}
+
+
+/* -----------------------------------------------
+    TABS toggle
+ ------------------------------------------------ */
+.character .status,
+.character .clock,
+.character .skill {display: none;}
+input#nowTab2[value="status"] ~ .status,
+input#nowTab2[value="clock"] ~ .clock,
+input#nowTab2[value="skill"] ~ .skill {display: block;}
+
+/* -----------------------------------------------
+    top TABS toggle
+ ------------------------------------------------ */
+.character .top-tabs .tab-priest,
+.character .top-tabs .tab-shaman,
+.character .top-tabs .tab-common {
+    display: inline-block;
+    line-height: normal;
+}
+
+.character .top-tabs .tab-priest label,
+.character .top-tabs .tab-shaman label,
+.character .top-tabs .tab-common label {
+    padding: 5px 10px;
+}
+
+.character .top-tabs .tab-priest label:hover,
+.character .top-tabs .tab-shaman label:hover,
+.character .top-tabs .tab-common label:hover {
+    background: #ff5e00;
+    color: #fff9f9;
+}
+
+.character .top-tabs .tab-priest,
+.character .top-tabs .tab-shaman {
+    display: none;
+}
+
+.character .tab-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 90px;
+    z-index: 1;
+    margin: 0;
+    padding: 0 10px 10px;
+    background-color: #f0f0f0;
+    box-shadow: 0 0 15px 0 rgb(0 0 0 / 50%);
+}
+
+.character .tab-content .tab-priest,
+.character .tab-content .tab-shaman,
+.character .tab-content .tab-common {
+    padding-top: 10px;
+}
+
+.character .header:has(.top-tabs input[name$="tab"]:checked) ~ .tab-content {
+    display: block;
+    width: 100%;
+}
+
+.character .header:has(.top-tabs input[name="attr_only-priest-tab"]:checked) ~ .tab-content .tab-priest,
+.character .header:has(.top-tabs input[name="attr_only-shaman-tab"]:checked) ~ .tab-content .tab-shaman,
+.character .header:has(.top-tabs input[name="attr_common-tab"]:checked) ~ .tab-content .tab-common {
+    display: block;
+}
+
+/* -----------------------------------------------
+    top TABS
+ ------------------------------------------------ */
+.character .tab-content .priest-info .god-name,
+.character .tab-content .shaman-info .shaman-info-row:first-child {
+    background-color: #333;
+}
+
+.character .tab-content .priest-info .god-name .field-input-box input,
+.character .tab-content .shaman-info .shaman-info-row:first-child .field-input-box input {
+    text-align: center;
+    border-bottom-color: #ff8d00;
+    color: #ff8d00;
+    font-size: 17px;
+}
+.character .tab-content .priest-info .god-name .field-input-box input::placeholder,
+.character .tab-content .shaman-info .shaman-info-row:first-child .field-input-box input::placeholder {
+    text-align: center;
+    color: #b3b3b3;
+}
+.character .tab-content .priest-info .god-category,
+.character .tab-content .priest-info .god-category .content .field-title-box,
+.character .tab-content .priest-info .god-category .content textarea {
+    text-align: center;
+}
+.character .tab-content .priest-info .god-category .content {
+    display: inline-block;
+    width: 230px;
+}
+.character .tab-content .shaman-info .checkgroup {
+    margin: 0 5px 0 10px;
+}
+.character .tab-content .shaman-info-row.left .checkgroup {
+    width: 220px;
+    text-align: center;
+    margin-right: 0;
+}
+.character .tab-content .shaman-info .pollution-types {
+    display: inline-block;
+    font-size: 12px;
+}
+.character .tab-content .shaman-info .pollution-types label {
+    margin-right: 2px;
+}
+.character .tab-content .shaman-info .pollution-types input[id$="1"]:checked ~ label[for$="1"],
+.character .tab-content .shaman-info .pollution-types input[id$="2"]:checked ~ label[for$="2"],
+.character .tab-content .shaman-info .pollution-types input[id$="3"]:checked ~ label[for$="3"],
+.character .tab-content .shaman-info .pollution-types input[id$="4"]:checked ~ label[for$="4"],
+.character .tab-content .shaman-info .pollution-types input[id$="5"]:checked ~ label[for$="5"],
+.character .tab-content .shaman-info .pollution-types input[id$="6"]:checked ~ label[for$="6"],
+.character .tab-content .shaman-info .pollution-types input[id$="7"]:checked ~ label[for$="7"] {
+    background: #333;
+    color: #fff;
+}
+
+.fid .item-row.common .togglebox,
+.fid .item-row.upgrade .togglebox,
+.fid .item-row.skill .togglebox {
+    padding-left: 125px;
+    max-width: 750px;
+}
+.fid .item-row.shaman .togglebox {
+    padding-left: 155px;
+    max-width: 730px;
+}
+
+/* -----------------------------------------------
+    item-row EACH (common...)
+ ------------------------------------------------ */
+.fid .item-row.common .item-name span,
+.fid .item-row.shaman .item-name span,
+.fid .item-row.priest .item-name span,
+.fid .item-row.upgrade .item-name span,
+.fid .item-row.skill .item-name span {
+    max-width: 100px;
+    display: inline-block;
+}
+
+.fid .item-row .item-name .roll-check {
+    position: absolute;
+    left: 125px;
+}
+
+.fid .item-row .item-name:has(.roll-check) ~ .item-desc {
+    padding-left: 30px;
+}
+
+
+/* -----------------------------------------------
+ ------------------------------------------------ */
+
+.character .class-stat .class-box-2,
+.character .class-stat .class-box-3,
+.character .class-stat .class-box-4,
+.character .skill #class-A-skill,
+.character .skill #class-B-skill,
+.character .skill #class-C-skill,
+.character .skill #class-D-skill,
+.character .skill #class-E-skill,
+.character .skill #class-F-skill,
+.character .skill #class-G-skill,
+.character .skill #class-H-skill,
+.character .skill #class-I-skill,
+.character .skill #class-J-skill,
+.character .items #class-A-item,
+.character .items #class-B-item,
+.character .items #class-C-item,
+.character .items #class-D-item,
+.character .items #class-E-item,
+.character .items #class-F-item,
+.character .items #class-G-item,
+.character .items #class-H-item,
+.character .items #class-I-item,
+.character .items #class-J-item,
+.character .clock .clock-bard,
+.character .clock .clock-shaman {
+    display: none;
+}
+
+.character .equip-item #special-item-B-1,
+.character .equip-item #special-item-B-2,
+.character .equip-item .only-sniper {
+    display: inline-block;
+}
+
+/* 전사 */
+input#currentClass[value="a"] ~ .character .skill #class-A-skill,
+input#currentClass[value="a"] ~ .character .items #class-A-item {
+    display: block;
+}
+input#currentClass[value="a"] ~ .character .equip-item #special-item-B-2 {
+    display: none;
+}
+
+/* 야만전사 */
+input#currentClass[value="b"] ~ .character .skill #class-B-skill,
+input#currentClass[value="b"] ~ .character .items #class-B-item {
+    display: block;
+}
+
+/* 도적 */
+input#currentClass[value="c"] ~ .character .skill #class-C-skill,
+input#currentClass[value="c"] ~ .character .items #class-C-item {
+    display: block;
+}
+input#currentClass[value="c"] ~ .character .equip-item #special-item-B-1 {
+    display: none;
+}
+
+
+/* 사냥꾼 */
+input#currentClass[value="d"] ~ .character .skill #class-D-skill,
+input#currentClass[value="d"] ~ .character .items #class-D-item {
+    display: block;
+}
+input#currentClass[value="d"] ~ .character .equip-item .only-sniper {
+    display: none;
+}
+
+/* 음유시인 */
+input#currentClass[value="e"] ~ .character .skill #class-E-skill,
+input#currentClass[value="e"] ~ .character .items #class-E-item,
+input#currentClass[value="e"] ~ .character .clock .clock-bard {
+    display: block;
+}
+
+/* 드루이드 */
+input#currentClass[value="f"] ~ .character .skill #class-F-skill,
+input#currentClass[value="f"] ~ .character .items #class-F-item {
+    display: block;
+}
+
+/* 마법사 */
+input#currentClass[value="g"] ~ .character .skill #class-G-skill,
+input#currentClass[value="g"] ~ .character .items #class-G-item {
+    display: block;
+}
+input#currentClass[value="g"] ~ .character .class-stat .class-box-2,
+input#currentClass[value="g"] ~ .character .class-stat .class-box-2 p {
+    display: inline-block;
+}
+input#currentClass[value="g"] ~ .character .class-stat .class-box-1 {
+    display: none;
+}
+input#currentClass[value="g"] ~ .character > .tabs .tool-tip {
+    display: block;
+}
+
+/* 사제 */
+input#currentClass[value="h"] ~ .character .skill #class-H-skill,
+input#currentClass[value="h"] ~ .character .items #class-H-item {
+    display: block;
+}
+input#currentClass[value="h"] ~ .character .top-tabs .tab-priest,
+input#currentClass[value="h"] ~ .character .class-stat .class-box-3 {
+    display: inline-block;
+}
+input#currentClass[value="h"] ~ .character .class-stat .class-box-1,
+input#currentClass[value="h"] ~ .character .equip-item #special-item-B-2 {
+    display: none;
+}
+
+/* 주술사 */
+input#currentClass[value="i"] ~ .character .skill #class-I-skill,
+input#currentClass[value="i"] ~ .character .items #class-I-item,
+input#currentClass[value="i"] ~ .character .clock .clock-shaman {
+    display: block;
+}
+input#currentClass[value="i"] ~ .character .top-tabs .tab-shaman,
+input#currentClass[value="i"] ~ .character .class-stat .class-box-4 {
+    display: inline-block;
+}
+input#currentClass[value="i"] ~ .character .class-stat .class-box-1 {
+    display: none;
+}
+
+/* 마도학자 */
+input#currentClass[value="j"] ~ .character .skill #class-J-skill,
+input#currentClass[value="j"] ~ .character .items #class-J-item {
+    display: block;
+}
+
+/* -----------------------------------------------
+    own-item
+ ------------------------------------------------ */
+.character .items .own-item .item-row .item-name {
+    display: none;
+}
+.character .items .own-item .item-row .item-name span {
+    display: none;
+}
+.character .items .own-item .repcontrol {
+    background-color: #f0f0f0;
+}
+
+/* -----------------------------------------------
+    weight
+ ------------------------------------------------ */
+.character .items .item-row:has(.item-weight-selector) .item-check input {
+    display: none;
+}
+.character .items .item-row:has(.item-weight-selector) .item-name .item-check {
+    display: none;
+}
+.character .items .item-row .item-weight-selector{
+    width: 220px;
+}
+.character .items .item-row .item-weight-selector input[type="radio"],
+.character .items .item-row .item-count-selector input[type="radio"],
+.character .items .item-row .item-tune-selector input[type="radio"] {
+    appearance: none;
+    border: none;
+    background-color: #b3b3b3;
+}
+.character .items .item-row .item-weight-selector input[type="radio"]:hover,
+.character .items .item-row .item-count-selector input[type="radio"]:hover,
+.character .items .item-row .item-tune-selector input[type="radio"]:hover {
+    background: #ff5e00;
+}
+.character .items .item-row .item-weight-selector input[type="radio"]::after,
+.character .items .item-row .item-count-selector input[type="radio"]::after,
+.character .items .item-row .item-tune-selector input[type="radio"]::after {
+    display: inline-block;
+    content: "";
+    cursor: pointer;
+    color: #fff;
+    font-size: 11px;
+    padding: 2px 5px;
+}
+
+.character .items .item-row .item-weight-selector input[type="radio"][value="0"]::after {
+    content: "0";
+}
+.character .items .item-row .item-weight-selector input[type="radio"][value="1"]::after {
+    content: "1";
+}
+.character .items .item-row .item-weight-selector input[type="radio"][value="2"]::after {
+    content: "2";
+}
+.character .items .item-row .item-weight-selector input[type="radio"][value="3"]::after {
+    content: "3";
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="null"]) ~ .item-name {
+    width: auto;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])){
+    display: none;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-name .item-check {
+    display: inline-block;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="0"]) ~ .item-name span{
+    font-style: italic;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="0"]) ~ .item-name .item-check input[name$="Z"] {
+    display: inline-block;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="1"]) ~ .item-name .item-check input[name$="A"] {
+    display: inline-block;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="2"]) ~ .item-name .item-check input[name$="A"],
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="2"]) ~ .item-name .item-check input[name$="B"] {
+    display: inline-block;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="3"]) ~ .item-name .item-check input[name$="A"],
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="3"]) ~ .item-name .item-check input[name$="B"],
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="3"]) ~ .item-name .item-check input[name$="C"] {
+    display: inline-block;
+}
+
+/* -----------------------------------------------
+    own-item COUNT
+ ------------------------------------------------ */
+.character .items .item-row:has(.item-count-selector) .item-count {
+    display: none;
+}
+
+.character .items .item-row:has(.item-count-selector) .item-count input {
+    display: none;
+}
+
+.character .items .item-row .item-count-selector {
+    width: 300px;
+    display: none;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector {
+    display: inline-block;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) {
+    display: none;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"][value="1"]) ~ .item-name span,
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"][value="2"]) ~ .item-name span,
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"][value="3"]) ~ .item-name span {
+    width: 190px;
+}
+
+.character .items .item-row .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count {
+    display: inline-block;
+    left: 265px;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="null"]) ~ .item-count-selector:has(input[type="hidden"][value="null"]) ~ .item-count {
+    display: inline-block;
+}
+
+.character .items .item-row .item-count-selector input[type="radio"][value="0"]::after {
+    content: "제한없음";
+}
+.character .items .item-row .item-count-selector input[type="radio"][value="1"]::after {
+    content: "1회";
+}
+.character .items .item-row .item-count-selector input[type="radio"][value="2"]::after {
+    content: "2회";
+}
+.character .items .item-row .item-count-selector input[type="radio"][value="3"]::after {
+    content: "3회";
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"][value="null"]) ~ .item-count-selector:has(input[type="hidden"][value="null"]) ~ .item-name .item-check {
+    display: none;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"][value="null"]) ~ .item-name .item-check {
+    display: none;
+}
+
+.character .items .item-row .item-count-selector:has(input[type="hidden"]:not([value="null"])){
+    display: none;
+}
+
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="0"]) ~ .item-count {
+    display: none;
+}
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="1"]) ~ .item-count input[name$="A"] {
+    display: inline-block;
+}
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="2"]) ~ .item-count input[name$="A"],
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="2"]) ~ .item-count input[name$="B"] {
+    display: inline-block;
+}
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="3"]) ~ .item-count input[name$="A"],
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="3"]) ~ .item-count input[name$="B"],
+.character .items .item-row .item-count-selector:has(input[type="hidden"][value="3"]) ~ .item-count input[name$="C"] {
+    display: inline-block;
+}
+
+/* -----------------------------------------------
+    own-item TUNE
+ ------------------------------------------------ */
+.character .items .item-row:has(.item-tune-selector) .item-tune,
+.character .items .item-row:has(.item-tune-selector) .item-tune input[name$="B"] {
+    display: none;
+}
+.character .items .item-row .item-tune-selector {
+    width: 300px;
+    display: none;
+}
+.character .items .item-row .item-tune-selector input[type="radio"][value="1"]::after {
+    content: "1";
+}
+.character .items .item-row .item-tune-selector input[type="radio"][value="2"]::after {
+    content: "2";
+}
+.character .items .item-tune-selector:has(input[type="hidden"]:not([value="null"])) ~ .togglebox .item-tune {
+    display: inline-block;
+}
+.character .items .item-tune-selector:has(input[type="hidden"][value="2"]) ~ .togglebox .input-tag {
+    width: 290px;
+}
+.character .items .item-tune-selector:has(input[type="hidden"][value="2"]) ~ .togglebox .input-tag ~ .item-tune input[name$="A"] {
+    margin-right: 30px;
+}
+.character .items .item-tune-selector:has(input[type="hidden"][value="2"]) ~ .togglebox .input-tag ~ .item-tune input[name$="B"] {
+    display: inline-block;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"][value="null"]) {
+    display: inline-block;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"]:not([value="null"])),
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"][value="null"]) ~ .item-name .item-check,
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"][value="null"]) ~ .item-count {
+    display: none;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-name,
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-tune-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-name span {
+    display: inline-block;
+}
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-count-selector:has(input[type="hidden"][value="0"]) ~ .item-tune-selector:has(input[type="hidden"]:not([value="null"])) ~ .item-name span {
+    width: 250px;
+}
+
+/* -----------------------------------------------
+    own-item COMMON
+ ------------------------------------------------ */
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"]))
+~ .item-count-selector:has(input[type="hidden"]:not([value="null"]))
+~ .item-tune-selector {
+    display: inline-block;
+}
+
+.character .items .item-row .item-weight-selector ~ .item-count-selector ~ .item-tune-selector ~ .item-name .item-check {
+    display: none;
+}
+
+.character .items .item-row .item-weight-selector:has(input[type="hidden"]:not([value="null"]))
+~ .item-count-selector:has(input[type="hidden"]:not([value="null"]))
+~ .item-tune-selector:has(input[type="hidden"]:not([value="null"]))
+~ .item-name .item-check {
+    display: inline-block;
+}
+
+/* -----------------------------------------------
+    party
+------------------------------------------------ */
+.party .header {
+    position: relative;
+}
+.party .header::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.party .header .party-type input {
+    width: 450px;
+}
+
+.party .party-class {
+    float: right;
+    text-align: center;
+    width: 80px;
+    padding: 10px;
+}
+
+.party .party-class span {
+    display: block;
+    font-size: 11px;
+}
+.party .party-class input {
+    text-align: center;
+    padding: 0;
+    font-weight: bolder;
+    font-size: 20px;
+}
+.party .party-class input::placeholder {
+    text-align: center;
+}
+
+.party .info .left,
+.party .info .right {
+    width: inherit;
+}
+.party .info .party-reputation,
+.party .info .party-reputation-clock {
+    display: inline-block;
+    vertical-align: top;
+}
+.party .info .party-reputation,
+.party .info .party-purpose,
+.party .info .party-rival {
+    width: 680px;
+}
+.party .info .party-reputation-clock .clock-instance {
+    width: inherit;
+}
+.party .info .party-reputation .party-reputation-selector {
+    float: right;
+}
+.party .info .party-reputation .party-reputation-selector label {
+    color: #b3b3b3;
+    padding: 0 5px;
+    margin-left: 5px;
+}
+.party .info .party-reputation .party-reputation-selector label:hover {
+    background: #444;
+}
+
+.party .info .party-reputation .party-reputation-selector input[id$="1"]:checked ~ label[for$="1"],
+.party .info .party-reputation .party-reputation-selector input[id$="2"]:checked ~ label[for$="2"],
+.party .info .party-reputation .party-reputation-selector input[id$="3"]:checked ~ label[for$="3"],
+.party .info .party-reputation .party-reputation-selector input[id$="4"]:checked ~ label[for$="4"],
+.party .info .party-reputation .party-reputation-selector input[id$="5"]:checked ~ label[for$="5"],
+.party .info .party-reputation .party-reputation-selector input[id$="6"]:checked ~ label[for$="6"],
+.party .info .party-reputation .party-reputation-selector input[id$="7"]:checked ~ label[for$="7"] {
+    background: #ff8d00;
+    color: #fff;
+}
+
+/* -----------------------------------------------
+    party on/off
+ ------------------------------------------------ */
+.party .party-rival,
+.party .party-native #party-A,
+.party .party-native #party-A-skill,
+.party .party-native #party-B,
+.party .party-native #party-B-skill,
+.party .party-native #party-C,
+.party .party-native #party-C-skill,
+.party .party-common #bro-common,
+.party .party-xp .party-a-xp,
+.party .party-xp .party-b-xp,
+.party .party-xp .party-c-xp {
+    display: none;
+}
+
+input#currentParty[value="a"] ~ .party .party-rival,
+input#currentParty[value="a"] ~ .party .party-native #party-A,
+input#currentParty[value="a"] ~ .party .party-native #party-A-skill {
+    display: block;
+}
+input#currentParty[value="b"] ~ .party .party-native #party-B,
+input#currentParty[value="b"] ~ .party .party-native #party-B-skill {
+    display: block;
+}
+
+input#currentParty[value="c"] ~ .party .party-native #party-C,
+input#currentParty[value="c"] ~ .party .party-native #party-C-skill,
+input#currentParty[value="c"] ~ .party .party-common #bro-common {
+    display: block;
+}
+
+input#currentParty[value="a"] ~ .party .party-xp .party-a-xp,
+input#currentParty[value="b"] ~ .party .party-xp .party-b-xp,
+input#currentParty[value="b"] ~ .party .party-xp .party-c-xp {
+    display: inline;
+}
+
+/* -----------------------------------------------
+    party TABS toggle
+ ------------------------------------------------ */
+.party-native, .party-clock, .party-common {display: none;}
+input#nowTab3[value="party-native"] ~ .party-native,
+input#nowTab3[value="party-clock"] ~ .party-clock,
+input#nowTab3[value="party-common"] ~ .party-common {display: block;}
+
+/* -----------------------------------------------
+    party repeat
+ ------------------------------------------------ */
+.party .item-row .item-name span:has(input[name$="name-repeat"]) {
+    width: 100px;
+    display: inline-block;
+}
+
+/* -----------------------------------------------
+    FOOTER
+ ------------------------------------------------ */
+.fid .footer .copyright {
+    background: #333;
+    padding: 10px;
+    color: #b3b3b3;
+    text-align: center;
+    font-size: 9px;
+}
+.sheet-rolltemplate-text-roll *,
+.sheet-rolltemplate-dice-roll * {
+    box-sizing: border-box;
+}
+
+.sheet-rolltemplate-text-roll .sheet-header,
+.sheet-rolltemplate-dice-roll .sheet-header {
+    background: #333;
+    color: #ff8d00;
+    padding: 5px 10px;
+    font-weight: 900;
+    background-image: url('asset/bg-rolltemplate-title.png');
+    background-position: center right;
+    background-repeat: no-repeat;
+}
+
+.sheet-rolltemplate-text-roll .sheet-header span.sheet-type,
+.sheet-rolltemplate-dice-roll .sheet-header span.sheet-type {
+    font-size: 10px;
+    display: block;
+    color:#fff;
+    font-weight: normal;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body,
+.sheet-rolltemplate-dice-roll .sheet-body {
+    background: #f0f0f0;
+    padding-top: 10px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body:not(:has(.sheet-result)),
+.sheet-rolltemplate-dice-roll .sheet-body:not(:has(.sheet-result)) {
+    padding-bottom: 0.1px; /* NEED BUG FIX */
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row {
+    margin: 0 10px 10px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-title,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-title,
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-text,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-text,
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-max-title,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-max-title,
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-max,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-max {
+    display: inline-block;
+    padding: 5px;
+    text-align: center;
+    vertical-align: middle;
+    background: #fff;
+    width: 100%;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-title,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-title {
+    background: #333;
+    color: #ff8d00;
+    font-weight: bolder;
+    width: 40px;
+    max-width: 40px;
+    float:left;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-text,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-text {
+    width: calc(100% - 40px);
+    clear: both;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-max-title,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-max-title {
+    display: block;
+    background: #333;
+    color: #ff8d00;
+    font-weight: bolder;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-row .sheet-row-max,
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-row .sheet-row-max {
+    display: block;
+
+}
+
+.sheet-rolltemplate-text-roll .sheet-body > .sheet-result,
+.sheet-rolltemplate-dice-roll .sheet-body > .sheet-result {
+    background: #333;
+    color: #ff8d00;
+    text-align: center;
+    font-weight: 700;
+    font-size: 17px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-result .sheet-result-perpect,
+.sheet-rolltemplate-dice-roll .sheet-result .sheet-result-perpect {
+    background: #ff8d00;
+    color: #000;
+}
+
+/* ---- only text roll ---- */
+.sheet-rolltemplate-text-roll .sheet-body .sheet-clock {
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-clock img {
+    max-width: 80px;
+    max-height: 80px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max {
+    background: #ff8d00;
+    color: #fff;
+    vertical-align: middle;
+    font-size: 11px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max .sheet-count-left {
+    float: left;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max .sheet-count-right {
+    float: right;
+    text-align: right;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max .sheet-count-cent {
+    display: inline-block;
+    margin: 0 auto;
+    color: #000;
+    text-align: center;
+    font-weight: 700;
+    font-size: 17px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-count .sheet-row-max .sheet-count-cent span {
+    color: #f0f0f0;
+    font-weight: normal;
+    margin: 0 5px;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-list ul {
+    text-align: left;
+    font-size: 11px;
+    margin: 0 0 0 20px;
+    list-style-type: square;
+}
+
+.sheet-rolltemplate-text-roll .sheet-body .sheet-ele {
+    padding: 1px 5px;
+    background: #ff8d00;
+}
+
+/* ---- only dice roll ---- */
+.sheet-rolltemplate-dice-roll .sheet-header:has(.sheet-special) {
+    padding-top: 20px;
+    background-image: url('asset/bg-rolltemplate-title-special.png');
+}
+
+.sheet-rolltemplate-dice-roll .sheet-header:has(.sheet-special) ~ .sheet-body {
+    background-color: #333;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-header:has(.sheet-special) ~ .sheet-body .sheet-row {
+    margin-bottom: 0;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-header:has(.sheet-special) ~ .sheet-body:not(:has(.sheet-result)) .sheet-lucky-memo,
+.sheet-rolltemplate-dice-roll .sheet-header:has(.sheet-special) ~ .sheet-body:not(:has(.sheet-result)) .sheet-dice {
+    margin-bottom: 10px;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-shaman-stress .sheet-row-max {
+    background: #333;
+    font-size: 11px;
+    color: #fff;
+    vertical-align: middle;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-shaman-stress .sheet-row-max::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-shaman-stress .sheet-stress-left {
+    float: left;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-body .sheet-shaman-stress .sheet-stress-right {
+    float:right;
+    font-size: 17px;
+    font-weight: 700;
+    color: #ff8d00;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice span:not(.sheet-zero-dice) {
+    background-repeat: no-repeat;
+    text-align: center;
+    font-weight: 700;
+    line-height: normal;
+    display: inline-block;
+    width: 23px;
+    height: 20px;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-1,
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-2,
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-3 {
+    background-image: url('asset/ico-dice-bad.png');
+    color: #fff;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-4,
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-5 {
+    background-image: url('asset/ico-dice-cool.png');
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-dice-6 {
+    background-image: url('asset/ico-dice-perpect.png');
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice ~ .sheet-result span{
+    display: none;
+    padding: 10px 0;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice ~ .sheet-result .sheet-shaman-alter {
+    padding: 10px;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-1) ~ .sheet-result span.sheet-result-bad,
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-2) ~ .sheet-result span.sheet-result-bad,
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-3) ~ .sheet-result span.sheet-result-bad {
+    display: block;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-4) ~ .sheet-result span.sheet-result-cool,
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-5) ~ .sheet-result span.sheet-result-cool {
+    display: block;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-4) ~ .sheet-result span:not([class$="cool"]),
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-5) ~ .sheet-result span:not([class$="cool"]) {
+    display: none;
+}
+
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6) ~ .sheet-result span.sheet-result-great {
+    display: block;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6) ~ .sheet-result span:not([class$="great"]) {
+    display: none;
+}
+
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6 ~ span.sheet-dice-6) ~ .sheet-result span.sheet-result-perpect {
+    display: block;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6 ~ span.sheet-dice-6) ~ .sheet-result span:not([class$="perpect"]) {
+    display: none;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6 ~ span.sheet-dice-6) ~ .sheet-result.sheet-priest .sheet-type2 ~ span.sheet-result-great,
+.sheet-rolltemplate-dice-roll .sheet-result.sheet-priest span.sheet-result-warn {
+    display: block;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:not(:has(span)) {
+    display: none;
+}
+.sheet-rolltemplate-dice-roll .sheet-result.sheet-priest span.sheet-result-warn {
+    font-size: 12px;
+    color: red;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-dice-6 ~ span.sheet-dice-6) ~ .sheet-result.sheet-preist .sheet-type2 ~ span:not([class$="great"]) {
+    display: none;
+}
+
+/* ---- zero dice : 2D6kl1 roll ---- */
+.sheet-rolltemplate-dice-roll .sheet-dice span.sheet-zero-dice {
+    display: block;
+    font-size: 10px;
+    color: #b3b3b3;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice) ~ .sheet-result span.sheet-result-bad,
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice) ~ .sheet-result span.sheet-result-cool,
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice) ~ .sheet-result span.sheet-result-great {
+    display: block;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice) ~ .sheet-result span.sheet-result-perpect {
+    display: none;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-6) ~ .sheet-result span:not([class$="great"]) {
+    display: none;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-6) ~ .sheet-result span[class$="great"] {
+    display: block;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-4) ~ .sheet-result span:not([class$="cool"]),
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-5) ~ .sheet-result span:not([class$="cool"]) {
+    display: none;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-4) ~ .sheet-result span[class$="cool"],
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-5) ~ .sheet-result span[class$="cool"] {
+    display: block;
+}
+
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-1) ~ .sheet-result span:not([class$="bad"]),
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-2) ~ .sheet-result span:not([class$="bad"]),
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-3) ~ .sheet-result span:not([class$="bad"]) {
+    display: none;
+}
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-1) ~ .sheet-result span[class$="bad"],
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-2) ~ .sheet-result span[class$="bad"],
+.sheet-rolltemplate-dice-roll .sheet-dice:has(span.sheet-zero-dice ~ span.sheet-dice-3) ~ .sheet-result span[class$="bad"] {
+    display: block;
+}