/**********************************
	font
**********************************/
@font-face {
  font-family: 'Pretendard';
  src: local('Pretendard Thin'),
    url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-display: fallback;
  font-weight: 100;
  font-style: normal;
}

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

@font-face {
  font-family: 'Pretendard';
  src: local('Pretendard Bold'),
    url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-display: fallback;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'IBMPlexSansKR';
  src: local('IBMPlexSansKR Medium'),
    url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Medium.woff') format('woff');
  font-display: fallback;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'IBMPlexSansKR';
  src: local('IBMPlexSansKR Bold'),
    url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Bold.woff') format('woff');
  font-display: fallback;
  font-weight: 700;
  font-style: normal;
}

/* Icecandy fork: Noto Sans KR @font-face 제거.
   원본 url 이 fonts.googleapis.com 의 CSS 엔드포인트(woff 가 아닌 CSS) 라
   브라우저가 font-src 위반으로 차단해 콘솔에 매번 경고가 쌓였다.
   어떤 selector 도 'Noto Sans KR' 를 참조하지 않아 시각적 영향은 0.
   upstream 재동기화 시 다시 들어오면 이 주석 자리에서 다시 제거하면 된다. */

/****************************************************
	reset
****************************************************/

select,
div,
button,
textarea,
span,
input,
img,
label {
  width: auto;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.ui-dialog .charsheet {
  padding: 0;
}
.charsheet {
  padding: 0 !important;
}
.charsheet *,
.sheet-rolltemplate-field *,
.sheet-rolltemplate-ninpo *,
.sheet-rolltemplate-ohgi *,
.sheet-rolltemplate-other * {
  box-sizing: border-box;
  font-size: 13px;
  font-family: Pretendard, sans-serif;
}
.charsheet p {
  margin: 0;
  font-size: 13px;
  letter-spacing: -0.2px;
  line-height: 1.4;
  font-family: Pretendard, sans-serif;
  color: #505050;
}
.charsheet input,
.charsheet textarea,
.charsheet select,
.charsheet .uneditable-input {
  flex-shrink: 0;
  height: inherit;
  max-height: none;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Pretendard, sans-serif;
}
.charsheet label {
  color: #1f2123;
  padding: 0;
  margin: 0;
  font-size: 13px;
  letter-spacing: -0.2px;
}
.charsheet input[type='checkbox'] {
  outline: 0;
}
.charsheet input::placeholder,
.charsheet textarea::placeholder {
  color: #bfbfbf;
}
.charsheet input:hover,
.charsheet input:focus,
.charsheet select:hover,
.charsheet select:focus {
  background-color: rgba(0, 0, 0, 0.04);
}

.charsheet input[type='text'],
.charsheet input[type='number'],
.charsheet select {
  /* border: 0; */
  vertical-align: middle;
}
.charsheet input[type='number']::-webkit-outer-spin-button,
.charsheet input[type='number']::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
.charsheet input[type='number'] {
  width: auto;
}
.charsheet select,
.charsheet label,
.charsheet input[type='checkbox'],
.charsheet input[type='radio'],
.charsheet button {
  cursor: pointer;
  border: none;
}
.charsheet button {
  border: none;
  background-color: transparent;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.charsheet button:before {
  display: none !important;
}
.charsheet input:-internal-autofill-selected {
  background-color: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.charsheet textarea {
  display: block;
  position: relative;
  padding: 5px 0;
  line-height: 1.7;
  border: none;
  background: transparent;
  resize: none;
  width: 100%;
}
.charsheet select option[value=''][disabled] {
  display: none;
}

.charsheet input[list] {
  padding-right: 2px !important;
  line-height: 1;
  height: 27px;
}

/**********************************
	common
**********************************/

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-row-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charsheet input.underlined,
.charsheet select.underlined {
  flex-grow: 1;
  padding: 4px 8px;
  border-bottom: 1px solid #959595;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: #505050;
}
select.outlined {
  flex-grow: 0;
  padding: 4px 30px 4px 20px;
  border: 1px solid #959595;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: #1f2123;
  background-color: #fff !important;
}

select.arrow-down {
  background: url('https://imgur.com/C8AUOi2.png') no-repeat;
  background-position: top 50% right 8px;
  background-size: 9px;
}
input.arrow-down-btn {
  width: 12px;
  height: 12px;
  background: url('https://imgur.com/pRyZRWt.png') no-repeat;
  background-position: 50% 50%;
  background-size: 11px;
}
div.input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  max-height: 27px;
  z-index: 1;
}
label.input-label {
  flex-shrink: 0;
  width: auto;
  min-width: 46px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: -0.2px;
  color: #1f2123;
  line-height: 1.1;
}

.part-title-wrapper {
  margin-right: 18px;
}

.part-title-wrapper span {
  display: block;
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: -0.2px;
  color: #505050;
}
.part-title-wrapper p,
.part-title-wrapper label {
  padding: 0;
  margin: 0;
  margin-top: 1px;
  font-family: IBMPlexSansKR, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 16px;
  color: #171717;
}

input.checked-circle {
  width: 13px;
  height: 13px !important;
  padding: 0;
  border-radius: 100%;
  border: 2px solid #3f3f3f !important;
  box-sizing: content-box;
  background-color: #fff;
  z-index: 3;
  transition: all 200ms ease-in;
}
input.checked-circle:checked {
  width: 13px;
  height: 13px !important;
  padding: 0;
  border-radius: 100%;
  border: 0 !important;
  outline: 1px solid #fff;
  box-sizing: border-box;
  background-image: url('https://imgur.com/12KEyUk.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #fff;
}

input.checked-circle:hover {
  transform: scale(1.3);
  outline: 0;
}
input.checked-circle:focus {
  outline: 0;
}
input.checked-number {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 13px !important;
  height: 14px !important;
  padding: 0;
  border-radius: 100%;
  box-sizing: content-box;
  z-index: 6;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
.checked-number:focus,
.checked-number:hover {
  outline: 0;
}
input.dice-btn,
button.dice-btn {
  flex: none;
  background-image: url('https://imgur.com/Kx6suGS.png');
  width: 22px;
  height: 22px;
  margin: 0 4px !important;
  background-size: 21px;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  transition: all 200ms ease-in !important;
}
input.dice-btn:hover,
button.dice-btn:hover {
  outline: 0;
  transform: scale(1.2);
  background-color: transparent !important;
  background-position: 50% 100%;
}
.dice-btn:focus {
  outline: 0;
  background-color: transparent !important;
  background-position: 50% 100%;
}
.auto-btn {
  background-image: url('https://imgur.com/HUlnuSB.png');
  width: 22px !important;
  height: 22px !important;
  /* margin: 0 4px !important; */
  background-size: 18px;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  transition: all 200ms ease-in !important;
}
.auto-btn:hover {
  transform: scale(1.2);
}
.btn:hover {
  border-radius: 4px;
}
/* ===== AUTO EXPAND TEXTAREA ===== */
.auto-expand {
  position: relative;
  width: 100px;
  cursor: text;
  font-size: 13px;
  line-height: 1.5;
  min-height: 24px;
  text-align: left;
}
.auto-expand span {
  visibility: hidden;
  display: block;
  padding: 2px 10px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  text-align: inherit;
  min-height: inherit;
  text-overflow: ellipsis;
  word-wrap: break-word;
  letter-spacing: -0.2px;
}
.auto-expand > textarea,
.auto-expand > select,
.auto-expand > input {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 2px 10px;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  text-align: inherit;
  min-height: inherit;
  text-overflow: ellipsis;
  word-wrap: break-word;
  letter-spacing: -0.2px;
}
.auto-expand textarea:focus,
.auto-expand textarea:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.essential {
  position: relative;
}
.essential::after {
  content: '*';
  display: block;
  position: absolute;
  top: 1px;
  left: 100%;
  margin-left: 3px;
  font-weight: normal;
  font-size: 12px;
  color: #c80000;
}

/***********************************
css
*********************************/
ul.nav-tabs.nav {
  position: sticky;
  top: 0;
  left: 0;
  width: calc(100% + 20px);
  margin-left: -20px;
  padding-left: 20px;
  /* background-color: #f5f5f5; */
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(2px);
  z-index: 99;
}
ul.nav-tabs.nav li.active {
  font-weight: bold;
  font-family: IBMPlexSansKR, sans-serif;
}
.nav-tabs > li > a {
  text-shadow: 0 0 5px #fff;
}
.nav-tabs > li.active > a {
  text-decoration: none;
  color: #1f2123;
  background-color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.nav-tabs > li.active > a:hover {
  color: #c80000;
}
.nav-tabs > li:not(.active) > a:hover,
.nav-tabs > li:not(.active) > a:focus {
  text-decoration: none;
  color: #c80000;
  cursor: pointer;
}
.wrapper {
  position: relative;
  height: 100%;
  border-top: 10px solid #c80000;
  overflow: hidden;
  margin: auto;
  margin-top: -18px;
  margin-left: -20px;
  max-width: 890px;
  min-width: 890px;
  background-image: url(https://imgur.com/ywdbE8N.png);
  background-size: cover;
  background-position: 50% 50%;
}
.wrapper .anchor {
  padding-top: 54px;
  margin-top: -54px;
  visibility: hidden;
}
.quick-bar {
  position: fixed;
  top: 17px;
  right: 30px;
  z-index: 100;
  justify-content: flex-end;
  gap: 18px;
  line-height: 1;
}
.quick-bar a {
  text-decoration: none;
  font-size: 11px;
  font-family: Pretendard, sans-serif;
  color: #1f2123;
  letter-spacing: -0.2px;
  text-shadow: 0 0 5px #fff;
}
.quick-bar a:hover,
.quick-bar a:focus {
  text-decoration: underline;
  color: #c80000;
}

.list-control {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 16px;
  border-left: 1px solid #959595;
}
.is-close-button[value=''] ~ div .open-list,
.is-close-button[value='on'] ~ div .close-list {
  display: block;
}
.list-control button {
  display: none;
  /*height: 22px;*/
  border-radius: 100px;
  padding-right: 20px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.2px;
  background-size: 18px;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  text-shadow: 0 0 5px #fff;
  transition: all 200ms ease-in !important;
}
.list-control button:hover {
  background-size: 24px;
  background-position: 105% 50%;
}
.list-control .open-list {
  background-image: url('https://imgur.com/BYQsJ51.png');
}
.list-control .close-list {
  background-image: url('https://imgur.com/nECmInL.png');
}

.banner {
  display: inline-block;
  margin-top: -4px;
  margin-left: -10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  background-color: #8dd4d4;
  color: #fff;
}

/**********************************
sheet-first-row
**********************************/

.first-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  height: 301px;
  padding: 26px 20px 20px;
}

/* sheet-profile-box =========================*/
.profile-box {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 250px;
  width: 100%;
  height: 100%;
}

.profile-overlay-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.logo {
  width: auto;
  height: 54px;
  margin-bottom: 10px;
}

.logo img {
  width: auto;
  height: 100%;
}
.clan-wrapper {
  width: fit-content;
  position: relative;
  padding: 4px 8px;
  margin-left: -6px;
}
.low-clan-wrapper {
  width: fit-content;
  max-width: 140px;
  margin-left: -2px;
  word-break: keep-all;
}
.title-select {
  align-items: baseline;
  width: max-content;
  padding-right: 30px;
  padding-left: 4px;
  margin-left: -4px;
  border-radius: 4px;
  font-size: 20px;
  font-family: IBMPlexSansKR, sans-serif;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 1px rgba(255, 255, 255, 1), 0 0 1px rgba(255, 255, 255, 1),
    0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1);
  color: #1f2123;
  background: url('https://imgur.com/2yVRPxl.png') no-repeat;
  background-position: top 50% right 8px;
  background-size: 14px;
}
.clan-wrapper:hover,
.clan-wrapper:focus {
  background-color: rgba(255, 255, 255, 0.5);
}
.title-select-hidden {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

span.title-low {
  font-size: 15px !important;
  font-weight: normal;
}

.clan-logo {
  width: 26px;
  height: 26px;
  overflow: hidden;
}
.clan-logo img {
  width: 26px;
  display: none;
}
.lowclan,
.lowclan-radio,
.clan-ancient {
  display: none;
}
.attr-clan[value='clanHasuba'] ~ div .clan-logo img.clanHasuba,
.attr-clan[value='clanKurama'] ~ div .clan-logo img.clanKurama,
.attr-clan[value='clanHagure'] ~ div .clan-logo img.clanHagure,
.attr-clan[value='clanHirasaka'] ~ div .clan-logo img.clanHirasaka,
.attr-clan[value='clanOtogi'] ~ div .clan-logo img.clanOtogi,
.attr-clan[value='clanOni'] ~ div .clan-logo img.clanOni,
.attr-lowclan-hasuba[value='clanHasubaSubTsuba'] ~ div .clan-logo img.clanHasubaSubTsuba,
.attr-lowclan-hasuba[value='clanHasubaSubTsuchi'] ~ div .clan-logo img.clanHasubaSubTsuchi,
.attr-lowclan-hasuba[value='clanHasubaSubSashi'] ~ div .clan-logo img.clanHasubaSubSashi,
.attr-lowclan-hasuba[value='clanHasubaSubKugi'] ~ div .clan-logo img.clanHasubaSubKugi,
.attr-lowclan-hasuba[value='clanHasubaSubKenban'] ~ div .clan-logo img.clanHasubaSubKenban,
.attr-lowclan-kurama[value='clanKuramaSubKarasu'] ~ div .clan-logo img.clanKuramaSubKarasu,
.attr-lowclan-kurama[value='clanKuramaSubBayonet'] ~ div .clan-logo img.clanKuramaSubBayonet,
.attr-lowclan-kurama[value='clanKuramaSubMaou'] ~ div .clan-logo img.clanKuramaSubMaou,
.attr-lowclan-kurama[value='clanKuramaSubRenge'] ~ div .clan-logo img.clanKuramaSubRenge,
.attr-lowclan-kurama[value='clanKuramaSubMitsu'] ~ div .clan-logo img.clanKuramaSubMitsu,
.attr-lowclan-hagure[value='clanHagureSubYoru'] ~ div .clan-logo img.clanHagureSubYoru,
.attr-lowclan-hagure[value='clanHagureSubNo9'] ~ div .clan-logo img.clanHagureSubNo9,
.attr-lowclan-hagure[value='clanHagureSubSekai'] ~ div .clan-logo img.clanHagureSubSekai,
.attr-lowclan-hagure[value='clanHagureSubKagee'] ~ div .clan-logo img.clanHagureSubKagee,
.attr-lowclan-hagure[value='clanHagureSubShiranui'] ~ div .clan-logo img.clanHagureSubShiranui,
.attr-lowclan-hagure[value='clanHagureSubTogame'] ~ div .clan-logo img.clanHagureSubTogame,
.attr-lowclan-hagure[value='clanHagureSubBremen'] ~ div .clan-logo img.clanHagureSubBremen,
.attr-lowclan-hagure[value='clanHagureSubShroud'] ~ div .clan-logo img.clanHagureSubShroud,
.attr-lowclan-hirasaka[value='clanHirasakaSubTokoyo'] ~ div .clan-logo img.clanHirasakaSubTokoyo,
.attr-lowclan-hirasaka[value='clanHirasakaSubShikome'] ~ div .clan-logo img.clanHirasakaSubShikome,
.attr-lowclan-hirasaka[value='clanHirasakaSubKouan'] ~ div .clan-logo img.clanHirasakaSubKouan,
.attr-lowclan-hirasaka[value='clanHirasakaSubJakou'] ~ div .clan-logo img.clanHirasakaSubJakou,
.attr-lowclan-hirasaka[value='clanHirasakaSubGaijiN'] ~ div .clan-logo img.clanHirasakaSubGaijiN,
.attr-lowclan-otogi[value='clanOtogiSubKyoushi'] ~ div .clan-logo img.clanOtogiSubKyoushi,
.attr-lowclan-otogi[value='clanOtogiSubSeitokai'] ~ div .clan-logo img.clanOtogiSubSeitokai,
.attr-lowclan-otogi[value='clanOtogiSubTarao'] ~ div .clan-logo img.clanOtogiSubTarao,
.attr-lowclan-otogi[value='clanOtogiSubKyuukou'] ~ div .clan-logo img.clanOtogiSubKyuukou,
.attr-lowclan-otogi[value='clanOtogiSubMacfaden'] ~ div .clan-logo img.clanOtogiSubMacfaden,
.attr-lowclan-oni[value='clanOniSubTsuchigumo'] ~ div .clan-logo img.clanOniSubTsuchigumo,
.attr-lowclan-oni[value='clanOniSubXieshe'] ~ div .clan-logo img.clanOniSubXieshe,
.attr-lowclan-oni[value='clanOniSubMagatsubi'] ~ div .clan-logo img.clanOniSubMagatsubi,
.attr-lowclan-oni[value='clanOniSubChangeling'] ~ div .clan-logo img.clanOniSubChangeling,
.attr-lowclan-oni[value='clanOniSubEnmasuji'] ~ div .clan-logo img.clanOniSubEnmasuji {
  display: block;
}
.attr-clan[value=''] ~ div .low-clan-wrapper,
.attr-clan[value='select_clan'] ~ div .low-clan-wrapper,
.attr-lowclan-hasuba:not([value='0']) ~ div .clan-logo img.clanHasuba,
.attr-lowclan-kurama:not([value='0']) ~ div .clan-logo img.clanKurama,
.attr-lowclan-hagure:not([value='0']) ~ div .clan-logo img.clanHagure,
.attr-lowclan-hirasaka:not([value='0']) ~ div .clan-logo img.clanHirasaka,
.attr-lowclan-otogi:not([value='0']) ~ div .clan-logo img.clanOtogi,
.attr-lowclan-oni:not([value='0']) ~ div .clan-logo img.clanOni {
  display: none;
}

.lowclan-radio:checked + .lowclan {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.conviction-area {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  max-width: 180px;
}

.conviction {
  display: block;
  margin-left: -4px;
  margin-right: 4px;
  font-weight: 600;
  font-size: 32px !important;
}

.conviction-small {
  font-size: 16px;
  font-family: IBMPlexSansKR, sans-serif;
  font-weight: normal;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
  word-break: keep-all;
}

.profile-img-area {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
}
.profile-img-area::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f3f3;
  mix-blend-mode: multiply;
}
.profile-img-area img {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  /* opacity: 0.5; */
  transform: scale(1.05);
}

/* sheet-story-box =========================*/
.info-box {
  flex: 1;
}
.story-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 28px;
  height: 88px;
}

.names-area {
  flex: 1;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-name-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 3px;
}
.player-name-wrapper label {
  width: 80px;
  font-size: 13px;
  letter-spacing: -0.2px;
  white-space: pre;
}

.character-name-wrapper input {
  width: 100%;
  flex: 1 1 auto;
  font-size: 18px;
  font-family: IBMPlexSansKR, sans-serif;
  font-weight: bold;
  color: #1f2123;
}

.info-area {
  display: flex;
  gap: 28px;
}

.info-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.score-wrapper input {
  width: 36px;
}
.info-inner .input-wrapper {
  margin-bottom: 2px;
}

.info-inner input {
  max-width: 90px;
}

/* sheet-memo-box =========================*/
.memo-box {
  display: flex;
  width: 100%;
  margin-top: 15px;
}

.memo-box .input-wrapper {
  max-height: none;
  align-items: flex-start;
  flex: 1 1 auto;
}
.memo-box textarea {
  height: 80px;
  flex: 1 1 auto;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: #505050;
}
.memo-box textarea::placeholder {
  color: #cfcfcf;
}

/* sheet-class-box =========================*/

.class-box {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  row-gap: 4px;
}

.class-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}
.class-row input {
  flex: 1 1 auto;
  width: 100%;
}
.class-row .input-wrapper:last-child {
  max-width: 200px;
}

/* sheet-class-box =========================*/

.second-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 57px;
  padding: 0 20px;
  transition: all 200ms ease-in;
  background-color: rgba(0, 0, 0, 0.04);
}

/* sheet-hp-box =========================*/
div.hp-wrapper {
  height: 100%;
  max-height: none;
  align-items: flex-end;
}
.hp-wrapper input {
  max-width: 32px;
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  letter-spacing: -0.5px;
  color: #1f2123;
  text-overflow: unset;
}
.hp-wrapper span {
  padding: 0 6px;
  font-size: 14px;
  color: #bbb;
}
input.hp {
  color: #1f2123 !important;
  font-size: 24px !important;
  font-weight: bold;
}
.hp-box .auto-btn {
  margin-left: 4px;
  margin-bottom: 4px;
  opacity: 0.3;
}
.hp-box .auto-btn:checked {
  opacity: 1;
}

/* debuff-box */
.debuff-box .flex-column {
  padding: 8px 0;
}
.debuff-box .part-title-wrapper {
  margin-right: 4px;
}
.debuff-title-inner {
  width: 50px;
  justify-content: space-between;
}
.debuff-area {
  align-items: center;
}
.debuff-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 10px;
  border-radius: 100px;
}
.general-debuff,
.old-debuff {
  gap: 4px;
  justify-content: space-between;
  width: 100%;
  height: 26px;
}
.debuff-wrapper label {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  margin-left: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #333;
  cursor: pointer;
}
.debuff-options-flag {
  background-image: url('https://imgur.com/XGTy2yt.png');
  width: 22px !important;
  height: 22px !important;
  margin-left: 0 !important;
  margin-right: 4px !important;
  background-size: 22px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
  transition: all 200ms ease-in;
  background-color: transparent !important;
}
.debuff-options-flag:checked {
  transform: rotate(0deg);
}
.attr-regulation[value='0'] ~ div .old-debuff,
.attr-regulation[value='1'] ~ div .old-debuff,
.attr-regulation[value='2'] ~ div .general-debuff,
.attr-regulation[value='3'] ~ div .general-debuff {
  /* display: none; */
  height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: all 200ms ease-in;
}
.attr-regulation[value='0'] ~ div .debuff-options-flag:checked ~ .debuff-order .old-debuff,
.attr-regulation[value='1'] ~ div .debuff-options-flag:checked ~ .debuff-order .old-debuff,
.attr-regulation[value='2'] ~ div .debuff-options-flag:checked ~ .debuff-order .general-debuff,
.attr-regulation[value='3'] ~ div .debuff-options-flag:checked ~ .debuff-order .general-debuff {
  display: flex;
  height: 24px;
  padding: 14px 0;
  margin-top: 4px;
}
.debuff-options-flag:hover {
  transform: rotate(0deg) scale(1.2);
}
.debuff-options-flag:checked:hover {
  transform: rotate(-90deg) scale(1.2);
}
.debuff-options-flag:focus {
  transform: rotate(-90deg);
}
.debuff-options-flag:checked:focus {
  transform: rotate(0deg);
}
.debuff-wrapper > input {
  transition: all 200ms ease-in;
}
.debuff-wrapper > input:checked {
  margin-top: 6px;
  margin-bottom: 6px;
}
.debuff-wrapper input:checked {
  background-color: #fff;
}
.debuff-wrapper input:checked + label::before {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: '';
  display: block;
  margin-left: -29px;
  margin-top: -5px;
  padding: 4px 7px 4px 30px;
  border: 1px solid #656565;
  border-radius: 100px;
  background-color: #fff;
  cursor: pointer;
}
.checked-number + input.checked-circle:checked {
  background: none;
  background-color: #c80000;
}
input.status-options-flag,
button.status-options {
  position: absolute;
  width: 100%;
  height: 100% !important;
  z-index: 9;
  margin-left: -6px;
  padding: 4px 10px 4px 30px;
  border-radius: 100px;
  background-color: transparent !important;
  cursor: pointer;
}
input.status-options-flag:checked ~ .debuff-modal,
input.status-options-flag:checked ~ .bg {
  display: flex;
}
input.status-options-flag:hover ~ input,
button.status-options:hover ~ input {
  transform: scale(1.3);
}
.debuff-modal {
  display: none;
  position: absolute;
  z-index: 110;
  inset: 100% 0 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 80px;
  min-height: 30px;
  width: min-content;
  height: min-content;
  border: 1px solid #eae5e5;
  padding: 0;
  box-shadow: 2px 2px 6px 0 rgba(0, 42, 105, 0.1);
  background-color: #fff;
}
.bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.debuff-modal p {
  width: 100%;
  padding: 8px 14px;
  /* font-weight: bold; */
  font-size: 13px;
  font-family: IBMPlexSansKR, sans-serif;
  background-color: #1f2123;
  color: #fff;
}
.debuff-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: 4px;
  padding: 8px 14px;
}
.debuff-modal input[type='checkbox'] {
  margin-right: 4px;
}
.debuff-modal input[type='checkbox']:checked + span {
  font-weight: bold;
}
.status-modal .input-wrapper {
  display: none;
}
.status-modal input[type='hidden']:not([value='']) + .input-wrapper {
  display: flex;
}
.status-modal .input-wrapper span {
  width: max-content;
}
.status-modal .repcontrol {
  display: none;
}

.attr-paralysis-A2[value='1'] > button ~ div .field-A2,
.attr-paralysis-B2[value='1'] ~ div .field-B2 > button,
.attr-paralysis-C2[value='1'] ~ div .field-C2 > button,
.attr-paralysis-D2[value='1'] ~ div .field-D2 > button,
.attr-paralysis-E2[value='1'] ~ div .field-E2 > button,
.attr-paralysis-F2[value='1'] ~ div .field-F2 > button,
.attr-paralysis-A3[value='1'] ~ div .field-A3 > button,
.attr-paralysis-B3[value='1'] ~ div .field-B3 > button,
.attr-paralysis-C3[value='1'] ~ div .field-C3 > button,
.attr-paralysis-D3[value='1'] ~ div .field-D3 > button,
.attr-paralysis-E3[value='1'] ~ div .field-E3 > button,
.attr-paralysis-F3[value='1'] ~ div .field-F3 > button,
.attr-paralysis-A4[value='1'] ~ div .field-A4 > button,
.attr-paralysis-B4[value='1'] ~ div .field-B4 > button,
.attr-paralysis-C4[value='1'] ~ div .field-C4 > button,
.attr-paralysis-D4[value='1'] ~ div .field-D4 > button,
.attr-paralysis-E4[value='1'] ~ div .field-E4 > button,
.attr-paralysis-F4[value='1'] ~ div .field-F4 > button,
.attr-paralysis-A5[value='1'] ~ div .field-A5 > button,
.attr-paralysis-B5[value='1'] ~ div .field-B5 > button,
.attr-paralysis-C5[value='1'] ~ div .field-C5 > button,
.attr-paralysis-D5[value='1'] ~ div .field-D5 > button,
.attr-paralysis-E5[value='1'] ~ div .field-E5 > button,
.attr-paralysis-F5[value='1'] ~ div .field-F5 > button,
.attr-paralysis-A6[value='1'] ~ div .field-A6 > button,
.attr-paralysis-B6[value='1'] ~ div .field-B6 > button,
.attr-paralysis-C6[value='1'] ~ div .field-C6 > button,
.attr-paralysis-D6[value='1'] ~ div .field-D6 > button,
.attr-paralysis-E6[value='1'] ~ div .field-E6 > button,
.attr-paralysis-F6[value='1'] ~ div .field-F6 > button,
.attr-paralysis-A7[value='1'] ~ div .field-A7 > button,
.attr-paralysis-B7[value='1'] ~ div .field-B7 > button,
.attr-paralysis-C7[value='1'] ~ div .field-C7 > button,
.attr-paralysis-D7[value='1'] ~ div .field-D7 > button,
.attr-paralysis-E7[value='1'] ~ div .field-E7 > button,
.attr-paralysis-F7[value='1'] ~ div .field-F7 > button,
.attr-paralysis-A8[value='1'] ~ div .field-A8 > button,
.attr-paralysis-B8[value='1'] ~ div .field-B8 > button,
.attr-paralysis-C8[value='1'] ~ div .field-C8 > button,
.attr-paralysis-D8[value='1'] ~ div .field-D8 > button,
.attr-paralysis-E8[value='1'] ~ div .field-E8 > button,
.attr-paralysis-F8[value='1'] ~ div .field-F8 > button,
.attr-paralysis-A9[value='1'] ~ div .field-A9 > button,
.attr-paralysis-B9[value='1'] ~ div .field-B9 > button,
.attr-paralysis-C9[value='1'] ~ div .field-C9 > button,
.attr-paralysis-D9[value='1'] ~ div .field-D9 > button,
.attr-paralysis-E9[value='1'] ~ div .field-E9 > button,
.attr-paralysis-F9[value='1'] ~ div .field-F9 > button,
.attr-paralysis-A10[value='1'] ~ div .field-A10 > button,
.attr-paralysis-B10[value='1'] ~ div .field-B10 > button,
.attr-paralysis-C10[value='1'] ~ div .field-C10 > button,
.attr-paralysis-D10[value='1'] ~ div .field-D10 > button,
.attr-paralysis-E10[value='1'] ~ div .field-E10 > button,
.attr-paralysis-F10[value='1'] ~ div .field-F10 > button,
.attr-paralysis-A11[value='1'] ~ div .field-A11 > button,
.attr-paralysis-B11[value='1'] ~ div .field-B11 > button,
.attr-paralysis-C11[value='1'] ~ div .field-C11 > button,
.attr-paralysis-D11[value='1'] ~ div .field-D11 > button,
.attr-paralysis-E11[value='1'] ~ div .field-E11 > button,
.attr-paralysis-F11[value='1'] ~ div .field-F11 > button,
.attr-paralysis-A12[value='1'] ~ div .field-A12 > button,
.attr-paralysis-B12[value='1'] ~ div .field-B12 > button,
.attr-paralysis-C12[value='1'] ~ div .field-C12 > button,
.attr-paralysis-D12[value='1'] ~ div .field-D12 > button,
.attr-paralysis-E12[value='1'] ~ div .field-E12 > button,
.attr-paralysis-F12[value='1'] ~ div .field-F12 > button {
  text-decoration: line-through;
}
.attr-paralysis-A2[value='1'] ~ div .field-A2 > input,
.attr-paralysis-B2[value='1'] ~ div .field-B2 > input,
.attr-paralysis-C2[value='1'] ~ div .field-C2 > input,
.attr-paralysis-D2[value='1'] ~ div .field-D2 > input,
.attr-paralysis-E2[value='1'] ~ div .field-E2 > input,
.attr-paralysis-F2[value='1'] ~ div .field-F2 > input,
.attr-paralysis-A3[value='1'] ~ div .field-A3 > input,
.attr-paralysis-B3[value='1'] ~ div .field-B3 > input,
.attr-paralysis-C3[value='1'] ~ div .field-C3 > input,
.attr-paralysis-D3[value='1'] ~ div .field-D3 > input,
.attr-paralysis-E3[value='1'] ~ div .field-E3 > input,
.attr-paralysis-F3[value='1'] ~ div .field-F3 > input,
.attr-paralysis-A4[value='1'] ~ div .field-A4 > input,
.attr-paralysis-B4[value='1'] ~ div .field-B4 > input,
.attr-paralysis-C4[value='1'] ~ div .field-C4 > input,
.attr-paralysis-D4[value='1'] ~ div .field-D4 > input,
.attr-paralysis-E4[value='1'] ~ div .field-E4 > input,
.attr-paralysis-F4[value='1'] ~ div .field-F4 > input,
.attr-paralysis-A5[value='1'] ~ div .field-A5 > input,
.attr-paralysis-B5[value='1'] ~ div .field-B5 > input,
.attr-paralysis-C5[value='1'] ~ div .field-C5 > input,
.attr-paralysis-D5[value='1'] ~ div .field-D5 > input,
.attr-paralysis-E5[value='1'] ~ div .field-E5 > input,
.attr-paralysis-F5[value='1'] ~ div .field-F5 > input,
.attr-paralysis-A6[value='1'] ~ div .field-A6 > input,
.attr-paralysis-B6[value='1'] ~ div .field-B6 > input,
.attr-paralysis-C6[value='1'] ~ div .field-C6 > input,
.attr-paralysis-D6[value='1'] ~ div .field-D6 > input,
.attr-paralysis-E6[value='1'] ~ div .field-E6 > input,
.attr-paralysis-F6[value='1'] ~ div .field-F6 > input,
.attr-paralysis-A7[value='1'] ~ div .field-A7 > input,
.attr-paralysis-B7[value='1'] ~ div .field-B7 > input,
.attr-paralysis-C7[value='1'] ~ div .field-C7 > input,
.attr-paralysis-D7[value='1'] ~ div .field-D7 > input,
.attr-paralysis-E7[value='1'] ~ div .field-E7 > input,
.attr-paralysis-F7[value='1'] ~ div .field-F7 > input,
.attr-paralysis-A8[value='1'] ~ div .field-A8 > input,
.attr-paralysis-B8[value='1'] ~ div .field-B8 > input,
.attr-paralysis-C8[value='1'] ~ div .field-C8 > input,
.attr-paralysis-D8[value='1'] ~ div .field-D8 > input,
.attr-paralysis-E8[value='1'] ~ div .field-E8 > input,
.attr-paralysis-F8[value='1'] ~ div .field-F8 > input,
.attr-paralysis-A9[value='1'] ~ div .field-A9 > input,
.attr-paralysis-B9[value='1'] ~ div .field-B9 > input,
.attr-paralysis-C9[value='1'] ~ div .field-C9 > input,
.attr-paralysis-D9[value='1'] ~ div .field-D9 > input,
.attr-paralysis-E9[value='1'] ~ div .field-E9 > input,
.attr-paralysis-F9[value='1'] ~ div .field-F9 > input,
.attr-paralysis-A10[value='1'] ~ div .field-A10 > input,
.attr-paralysis-B10[value='1'] ~ div .field-B10 > input,
.attr-paralysis-C10[value='1'] ~ div .field-C10 > input,
.attr-paralysis-D10[value='1'] ~ div .field-D10 > input,
.attr-paralysis-E10[value='1'] ~ div .field-E10 > input,
.attr-paralysis-F10[value='1'] ~ div .field-F10 > input,
.attr-paralysis-A11[value='1'] ~ div .field-A11 > input,
.attr-paralysis-B11[value='1'] ~ div .field-B11 > input,
.attr-paralysis-C11[value='1'] ~ div .field-C11 > input,
.attr-paralysis-D11[value='1'] ~ div .field-D11 > input,
.attr-paralysis-E11[value='1'] ~ div .field-E11 > input,
.attr-paralysis-F11[value='1'] ~ div .field-F11 > input,
.attr-paralysis-A12[value='1'] ~ div .field-A12 > input,
.attr-paralysis-B12[value='1'] ~ div .field-B12 > input,
.attr-paralysis-C12[value='1'] ~ div .field-C12 > input,
.attr-paralysis-D12[value='1'] ~ div .field-D12 > input,
.attr-paralysis-E12[value='1'] ~ div .field-E12 > input,
.attr-paralysis-F12[value='1'] ~ div .field-F12 > input {
  background-image: url('https://imgur.com/wmb0EK2.png') !important;
}
.attr-oblivion-01[value='1'] ~ div #attr_relation_sense_01,
.attr-oblivion-02[value='1'] ~ div #attr_relation_sense_02,
.attr-oblivion-03[value='1'] ~ div #attr_relation_sense_03,
.attr-oblivion-04[value='1'] ~ div #attr_relation_sense_04,
.attr-oblivion-05[value='1'] ~ div #attr_relation_sense_05,
.attr-oblivion-06[value='1'] ~ div #attr_relation_sense_06,
.attr-oblivion-07[value='1'] ~ div #attr_relation_sense_07,
.attr-oblivion-08[value='1'] ~ div #attr_relation_sense_08,
.attr-oblivion-09[value='1'] ~ div #attr_relation_sense_09,
.attr-oblivion-10[value='1'] ~ div #attr_relation_sense_10 {
  border: 0 !important;
  background-image: url('https://imgur.com/wmb0EK2.png') !important;
  background-size: contain;
}
.attr-cursed-01[value='1'] ~ div .dice-01,
.attr-cursed-02[value='1'] ~ div .dice-02,
.attr-cursed-03[value='1'] ~ div .dice-03,
.attr-cursed-04[value='1'] ~ div .dice-04,
.attr-cursed-05[value='1'] ~ div .dice-05,
.attr-cursed-06[value='1'] ~ div .dice-06,
.attr-cursed-07[value='1'] ~ div .dice-07,
.attr-cursed-08[value='1'] ~ div .dice-08,
.attr-cursed-09[value='1'] ~ div .dice-09,
.attr-cursed-10[value='1'] ~ div .dice-10,
.attr-cursed-11[value='1'] ~ div .dice-11,
.attr-cursed-12[value='1'] ~ div .dice-12,
.attr-cursed-13[value='1'] ~ div .dice-13,
.attr-cursed-14[value='1'] ~ div .dice-14,
.attr-cursed-15[value='1'] ~ div .dice-15,
.attr-cursed-16[value='1'] ~ div .dice-16,
.attr-cursed-17[value='1'] ~ div .dice-17,
.attr-cursed-18[value='1'] ~ div .dice-18,
.attr-cursed-19[value='1'] ~ div .dice-19,
.attr-cursed-20[value='1'] ~ div .dice-20 {
  background-image: url('https://imgur.com/WADdCkL.png') !important;
}
.attr-oblivion-01[value='1'] ~ div #attr_relation_name_01,
.attr-oblivion-02[value='1'] ~ div #attr_relation_name_02,
.attr-oblivion-03[value='1'] ~ div #attr_relation_name_03,
.attr-oblivion-04[value='1'] ~ div #attr_relation_name_04,
.attr-oblivion-05[value='1'] ~ div #attr_relation_name_05,
.attr-oblivion-06[value='1'] ~ div #attr_relation_name_06,
.attr-oblivion-07[value='1'] ~ div #attr_relation_name_07,
.attr-oblivion-08[value='1'] ~ div #attr_relation_name_08,
.attr-oblivion-09[value='1'] ~ div #attr_relation_name_09,
.attr-oblivion-10[value='1'] ~ div #attr_relation_name_10,
.attr-cursed-01[value='1'] ~ div #attr_Ninpo_01_Name,
.attr-cursed-02[value='1'] ~ div #attr_Ninpo_02_Name,
.attr-cursed-03[value='1'] ~ div #attr_Ninpo_03_Name,
.attr-cursed-04[value='1'] ~ div #attr_Ninpo_04_Name,
.attr-cursed-05[value='1'] ~ div #attr_Ninpo_05_Name,
.attr-cursed-06[value='1'] ~ div #attr_Ninpo_06_Name,
.attr-cursed-07[value='1'] ~ div #attr_Ninpo_07_Name,
.attr-cursed-08[value='1'] ~ div #attr_Ninpo_08_Name,
.attr-cursed-09[value='1'] ~ div #attr_Ninpo_09_Name,
.attr-cursed-10[value='1'] ~ div #attr_Ninpo_10_Name,
.attr-cursed-11[value='1'] ~ div #attr_Ninpo_11_Name,
.attr-cursed-12[value='1'] ~ div #attr_Ninpo_12_Name,
.attr-cursed-13[value='1'] ~ div #attr_Ninpo_13_Name,
.attr-cursed-14[value='1'] ~ div #attr_Ninpo_14_Name,
.attr-cursed-15[value='1'] ~ div #attr_Ninpo_15_Name,
.attr-cursed-16[value='1'] ~ div #attr_Ninpo_16_Name,
.attr-cursed-17[value='1'] ~ div #attr_Ninpo_17_Name,
.attr-cursed-18[value='1'] ~ div #attr_Ninpo_18_Name,
.attr-cursed-19[value='1'] ~ div #attr_Ninpo_19_Name,
.attr-cursed-20[value='1'] ~ div #attr_Ninpo_20_Name {
  text-decoration: line-through;
}
.attr-breakdown-hidden[value='1'] ~ div .item-box button.dice-btn {
  background-image: url('https://imgur.com/WADdCkL.png') !important;
}

/* sheet-plot-box =========================*/
.plot-box select {
  width: 56px;
}

/* sheet-third-row =========================*/
.third-row {
  width: 100%;
  height: 60px;
  padding: 16px 20px;
}
.dice-box {
  flex: 1;
  justify-content: space-between;
  gap: 20px;
}
.third-row .input-wrapper {
  flex: 1;
  min-width: 0;
}
.third-row select {
  min-width: 56px;
}
select#attr_random_dice_stat {
  min-width: 70px;
}
.third-row label {
  width: auto;
  padding: 0;
  margin: 0;
  margin-right: 8px;
  font-size: 13px;
  letter-spacing: -0.2px;
}
.dice-random-field label,
.dice-random-stat label,
.free-dice-wrapper label {
  min-width: 50px;
}
div.free-dice-wrapper {
  flex: 1;
}
div.table-dice-wrapper {
  flex: 1.7 !important;
}
select#attr_table_dice {
  flex: 1;
  width: 100%;
  /* min-width: 170px; */
}
input#attr_free_dice {
  width: 40px;
}

/* sheet-fourth-row =========================*/
.fourth-row {
  padding: 0 20px;
}
.field-roll-table {
  border: 1px solid #959595;
  overflow: hidden;
  transition: all 200ms ease-in;
}
div.attr-diabolization {
  width: 60px !important;
  margin-left: 18px;
  color: #1f2123;
}
input.attr-diabolization {
  flex: none;
  width: 26px !important;
  height: 26px !important;
  padding: 0;
  border-radius: 100px;
  border: 0 !important;
  box-sizing: border-box;
  background-image: url('https://imgur.com/YHDr6A9.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  background-position: 50% 50%;
  transition: all 200ms ease-in;
}
input.attr-diabolization:focus,
input.attr-diabolization:hover {
  background-color: transparent !important;
}
input.attr-diabolization:checked {
  background-image: url('https://imgur.com/EI7G2kH.png');
  transition: all 200ms ease-in;
}
.attr-diabolization[value='on'] ~ .wrapper {
  background-color: #fff5ee;
  background-blend-mode: multiply;
}
.attr-diabolization[value='on'] ~ div input::placeholder,
.attr-diabolization[value='on'] ~ div textarea::placeholder {
  color: #b0b0b0;
}
.attr-diabolization[value='on'] ~ div p.copyright {
  color: #d0d0d0;
}
.attr-diabolization[value='on'] ~ .field-A-dirty[value='1'] ~ div .field-A,
.attr-diabolization[value='on'] ~ .field-B-dirty[value='1'] ~ div .field-B,
.attr-diabolization[value='on'] ~ .field-C-dirty[value='1'] ~ div .field-C,
.attr-diabolization[value='on'] ~ .field-D-dirty[value='1'] ~ div .field-D,
.attr-diabolization[value='on'] ~ .field-E-dirty[value='1'] ~ div .field-E,
.attr-diabolization[value='on'] ~ .field-F-dirty[value='1'] ~ div .field-F {
  background-color: #c80000;
}
.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  /* border-right: 1px solid #959595; */
  border-bottom: 1px solid #959595;
}
.table-header {
  height: 30px !important;
}
.row-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  min-height: 100%;
  background-color: #171717;
}
.row-header span {
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.field-select-wrapper {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #171717;
}
.field-select-wrapper select {
  flex: 1;
  font-size: 12px;
  text-align: center;
  font-family: IBMPlexSansKR, sans-serif;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #fff;
  background-image: url('https://imgur.com/9tnZNqH.png');
  background-repeat: no-repeat;
  background-position: top 50% right 12px;
  background-size: 10px;
}
.field-select-wrapper select:hover {
  color: #ff2525;
}
.field-select-wrapper select:focus {
  color: #fff;
  background-color: #171717;
}
.field-select-wrapper select option[value='@{Violence(dirty)}'],
.field-select-wrapper select option[value='@{Body(dirty)}'],
.field-select-wrapper select option[value='@{Stealth(dirty)}'],
.field-select-wrapper select option[value='@{Scheme(dirty)}'],
.field-select-wrapper select option[value='@{Strategy_Field(dirty)}'],
.field-select-wrapper select option[value='@{Sorcery(dirty)}'],
.attr-regulation[value='2'] ~ div .clan-normal,
.attr-regulation[value='3'] ~ div .clan-normal,
.attr-regulation[value='0'] ~ div .attr-diabolization,
.attr-regulation[value='2'] ~ div .attr-diabolization {
  display: none;
}
.attr-regulation[value='1'] ~ div .dice-target-wrapper::after,
.attr-regulation[value='3'] ~ div .dice-target-wrapper::after {
  right: -50px;
}
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Violence(dirty)}'],
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Body(dirty)}'],
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Stealth(dirty)}'],
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Scheme(dirty)}'],
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Strategy_Field(dirty)}'],
.attr-regulation[value='1'] ~ div .field-select-wrapper select option[value='@{Sorcery(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Violence(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Body(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Stealth(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Scheme(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Strategy_Field(dirty)}'],
.attr-regulation[value='3'] ~ div .field-select-wrapper select option[value='@{Sorcery(dirty)}'],
.attr-regulation[value='2'] ~ div .clan-ancient,
.attr-regulation[value='3'] ~ div .clan-ancient {
  display: block !important;
}
.attr-regulation[value='2'] ~ div .debuff-order,
.attr-regulation[value='3'] ~ div .debuff-order {
  flex-direction: column-reverse;
}

.table-gap {
  width: 10px;
  height: 100%;
}
.table-gap input {
  flex: none;
  width: 10px;
  height: 100% !important;
  padding: 0;
  border-right: 1px solid #959595 !important;
  background-color: transparent;
}
.table-gap-A,
.table-gap-B,
.table-gap-C,
.table-gap-D,
.table-gap-E,
.table-gap-Z {
  border-left: 1px solid #959595 !important;
  border-right: 1px solid #959595 !important;
}
.table-gap-A[value='1'] ~ div .table-gap-A,
.table-gap-B[value='1'] ~ div .table-gap-B,
.table-gap-C[value='1'] ~ div .table-gap-C,
.table-gap-D[value='1'] ~ div .table-gap-D,
.table-gap-E[value='1'] ~ div .table-gap-E,
.table-gap-Z[value='1'] ~ div .table-gap-Z {
  background-color: #171717;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.field-A-lost[value='1'] ~ div .field-A,
.field-B-lost[value='1'] ~ div .field-B,
.field-C-lost[value='1'] ~ div .field-C,
.field-D-lost[value='1'] ~ div .field-D,
.field-E-lost[value='1'] ~ div .field-E,
.field-F-lost[value='1'] ~ div .field-F {
  background-color: #efefef;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
.field-A-lost[value='1'] ~ div .field-A input,
.field-A-lost[value='1'] ~ div .field-A button,
.field-B-lost[value='1'] ~ div .field-B input,
.field-B-lost[value='1'] ~ div .field-B button,
.field-C-lost[value='1'] ~ div .field-C input,
.field-C-lost[value='1'] ~ div .field-C button,
.field-D-lost[value='1'] ~ div .field-D input,
.field-D-lost[value='1'] ~ div .field-D button,
.field-E-lost[value='1'] ~ div .field-E input,
.field-E-lost[value='1'] ~ div .field-E button,
.field-F-lost[value='1'] ~ div .field-F input,
.field-F-lost[value='1'] ~ div .field-F button {
  color: inherit;
}
.field-A-dirty[value='1'] ~ div .field-A,
.field-B-dirty[value='1'] ~ div .field-B,
.field-C-dirty[value='1'] ~ div .field-C,
.field-D-dirty[value='1'] ~ div .field-D,
.field-E-dirty[value='1'] ~ div .field-E,
.field-F-dirty[value='1'] ~ div .field-F {
  /* background-color: #5a5b67; */
  background-color: #36454f;
  mix-blend-mode: multiply;
  opacity: 0.9;
  border-color: #fff;
}
.field-A-dirty[value='1'] ~ div .field-A input,
.field-A-dirty[value='1'] ~ div .field-A button,
.field-B-dirty[value='1'] ~ div .field-B input,
.field-B-dirty[value='1'] ~ div .field-B button,
.field-C-dirty[value='1'] ~ div .field-C input,
.field-C-dirty[value='1'] ~ div .field-C button,
.field-D-dirty[value='1'] ~ div .field-D input,
.field-D-dirty[value='1'] ~ div .field-D button,
.field-E-dirty[value='1'] ~ div .field-E input,
.field-E-dirty[value='1'] ~ div .field-E button,
.field-F-dirty[value='1'] ~ div .field-F input,
.field-F-dirty[value='1'] ~ div .field-F button {
  color: #fff;
}
.field-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-left: 6px;
  min-width: 0;
  color: #1f2123;
  transition: all 200ms ease-in;
  mix-blend-mode: multiply;
}
.field-wrapper button[type='action'] {
  position: absolute;
  left: 30px;
  right: 30px;
  flex: 1;
  height: 100%;
  font-size: 13px !important;
  letter-spacing: -0.2px;
  background: transparent;
  color: inherit;
  text-shadow: none;
  line-height: 1;
}
.field-wrapper .button-bg {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -999;
  flex: 1;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.08) !important;
}
.field-wrapper button[type='action']:hover {
  font-weight: bold;
}
.field-wrapper button[type='action']:hover + .button-bg {
  display: block;
}
.field-inner-box {
  height: 100%;
  border-left: 1px solid #959595;
}
.field-wrapper input[type='text'] {
  width: 20px;
  height: 100%;
  padding: 0;
  font-size: 12px;
  text-align: center;
  color: inherit;
}
.field-wrapper input:checked + button,
.field-wrapper input:checked + span,
.field-wrapper input:checked + label {
  font-weight: 700;
}
.no-field label {
  font-weight: normal;
  text-align: center;
  padding-right: 18px;
  line-height: 1.1;
}
.table-row-last {
  border-bottom: 0;
  height: 32px;
}
.table-row-last > .flex-row {
  width: 100%;
  justify-content: space-between;
}
.table-row-last .field-wrapper {
  width: 124px;
  height: 30px;
  text-align: center;
}
.table-row-last .table-gap {
  width: 11px;
  height: 30px;
}
.table-row-last span {
  width: 100%;
  margin-right: 18px;
  letter-spacing: -0.5px;
}
.table-row-last .dice-reset {
  margin: 0 !important;
  background-image: url('https://imgur.com/a183rsE.png') !important;
  background-size: 16px;
  background-position: 50% 50%;
}
.table-row-last .dice-reset:hover {
  background-position: 50% 50%;
}
.dice-target-wrapper {
  position: relative;
  width: 350px;
  height: 32px;
  gap: 10px;
  padding-left: 50px;
  padding-right: 10px;
  color: #fff;
}
.dice-target-wrapper::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: -20px;
  right: 10px;
  bottom: 0;
  transform: skew(-30deg);
  background-color: #171717;
}
.dice-target-wrapper::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: -20px;
  right: 0;
  bottom: 0;
  background-color: #d6dbdf;
  mix-blend-mode: multiply;
  transform: skew(-30deg);
}
.table-row-last .input-wrapper {
  flex: none;
  display: flex;
  justify-content: center;
  width: 124px;
  height: 30px;
  padding-left: 6px;
}
.dice-target-wrapper label,
.dice-target-wrapper input {
  width: auto;
  color: inherit !important;
  font-size: 12px;
}
.dice-target-wrapper label {
  margin-right: 4px;
  color: #bbb;
  line-height: 1.1;
}
.dice-target-wrapper input {
  height: 22px !important;
}
.dice-target-wrapper .input-wrapper:nth-child(1) input {
  color: #10c700 !important;
}
.dice-target-wrapper .input-wrapper:nth-child(2) input {
  color: #ff2525 !important;
}
.dice-target-wrapper input:hover,
.dice-target-wrapper input:focus {
  background-color: #505050;
}

/* sheet-fifth-row =========================*/

.fifth-row {
  display: grid;
  grid-template-columns: 500px minmax(0px, 100%);
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0 20px 20px;
}
.fifth-row .part-title-wrapper {
  justify-content: flex-start;
}
.left-box {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 500px;
  max-width: 500px;
}
.left-box .list-options {
  margin-left: -42px;
  padding-left: 42px;
}
.left-box .list-options > div,
.right-box .list-options > div {
  margin-bottom: 3px;
}
.left-box .list-options > div:last-child,
.right-box .list-options > div:last-child {
  margin-bottom: 0;
}
.right-box {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 100%;
}
.right-box .list-header,
.right-box .list-row-header {
  padding-right: 20px;
}
.right-box .list-options {
  padding-left: 22px;
}
.part-header-wrapper {
  justify-content: space-between;
  align-items: flex-start;
}
.right-box .part-header-wrapper {
  padding-right: 20px;
}

/* sheet-list-area =========================*/

.list-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list-area .part-title-wrapper {
  margin-bottom: 8px;
}

.view-count-input[value='0'] ~ .list-content,
.view-count-input[value='0'] ~ .list-header,
.view-count-input[value='1'] ~ .list-content > .list-row:nth-child(1) ~ *,
.view-count-input[value='2'] ~ .list-content > .list-row:nth-child(2) ~ *,
.view-count-input[value='3'] ~ .list-content > .list-row:nth-child(3) ~ *,
.view-count-input[value='4'] ~ .list-content > .list-row:nth-child(4) ~ *,
.view-count-input[value='5'] ~ .list-content > .list-row:nth-child(5) ~ *,
.view-count-input[value='6'] ~ .list-content > .list-row:nth-child(6) ~ *,
.view-count-input[value='7'] ~ .list-content > .list-row:nth-child(7) ~ *,
.view-count-input[value='8'] ~ .list-content > .list-row:nth-child(8) ~ *,
.view-count-input[value='9'] ~ .list-content > .list-row:nth-child(9) ~ *,
.view-count-input[value='10'] ~ .list-content > .list-row:nth-child(10) ~ *,
.view-count-input[value='11'] ~ .list-content > .list-row:nth-child(11) ~ *,
.view-count-input[value='12'] ~ .list-content > .list-row:nth-child(12) ~ *,
.view-count-input[value='13'] ~ .list-content > .list-row:nth-child(13) ~ *,
.view-count-input[value='14'] ~ .list-content > .list-row:nth-child(14) ~ *,
.view-count-input[value='15'] ~ .list-content > .list-row:nth-child(15) ~ *,
.view-count-input[value='16'] ~ .list-content > .list-row:nth-child(16) ~ *,
.view-count-input[value='17'] ~ .list-content > .list-row:nth-child(17) ~ *,
.view-count-input[value='18'] ~ .list-content > .list-row:nth-child(18) ~ *,
.view-count-input[value='19'] ~ .list-content > .list-row:nth-child(19) ~ *,
.view-count-input[value='20'] ~ .list-content > .list-row:nth-child(20) ~ * {
  display: none;
}

.view-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: Pretendard, sans-serif;
  font-weight: bold;
}
.view-count span {
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  font-size: inherit;
  color: #777;
}
.view-count input {
  max-width: 20px;
  height: 24px !important;
  font-size: 12px !important;
}
.view-count p {
  display: inline;
  margin-left: 4px;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

.list-header {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  max-height: 16px;
  margin: 0;
  margin-top: 3px;
  margin-left: 50px;
  /* margin-right: 2px; */
  margin-bottom: 4px;
  list-style: none;
  text-align: left;
}
.no-dice .list-header {
  margin-left: 30px;
}
.list-header li {
  flex: 1 1 auto;
  display: block;
  padding-left: 8px;
}
.list-header span {
  display: block;
  width: fit-content;
  font-family: Pretendard, sans-serif;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.pre-margin {
  margin-left: 4px;
}
.list-content,
.list-content .repcontainer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.list-row {
  width: 100%;
  display: grid;
  grid-template-areas:
    'btn header'
    'detail .';
  grid-template-columns: auto 1fr;
  grid-auto-flow: dense;
  flex-wrap: nowrap;
}

.list-options-flag {
  grid-area: btn;
  background-image: url('https://imgur.com/XGTy2yt.png');
  width: 20px !important;
  height: 27px !important;
  background-size: 22px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
  transition: all 200ms ease-in;
  background-color: transparent !important;
}
.list-options-flag:checked {
  transform: rotate(0deg);
}
.list-options-flag:checked ~ .list-options {
  display: block;
}
.list-options-flag:hover {
  transform: rotate(0deg) scale(1.2);
}
.list-options-flag:checked:hover {
  transform: rotate(-90deg) scale(1.2);
}
.list-options-flag:focus {
  transform: rotate(-90deg);
}
.list-options-flag:checked:focus {
  transform: rotate(0deg);
}

.list-row-header {
  grid-area: header;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 26px;
}
.list-row .dice-btn {
  margin-left: 0 !important;
}
.ninpo-name {
  width: 160px;
}
.ninpo-type {
  width: 70px;
}
.ninpo-assigned {
  width: 72px;
}
.list-number {
  max-width: 30px;
  text-align: center;
  padding: 4px 0 !important;
}

.list-options {
  grid-area: detail;
  display: none;
  grid-column: 2 / -1;
  margin-left: -20px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 0;
  background-color: rgba(0, 0, 0, 0.04);
}
.list-options-wrapper {
  align-items: flex-start;
  gap: 2px;
}
.list-options label {
  width: max-content;
  min-width: 28px;
  padding: 0;
  margin-top: 3px;
  font-size: 11px;
  font-weight: bold;
  color: #1f2123;
}
.list-options .essential::after {
  left: auto;
  right: 1px;
  top: 2px;
}
.list-options .auto-expand {
  flex: 1;
  letter-spacing: -0.2px;
}
.list-options .auto-expand textarea,
.list-options .auto-expand span {
  padding-right: 20px;
}
.options-etc {
  align-items: flex-start;
  gap: 18px;
}
.options-explain-wrapper {
  flex: 2.5;
}
.options-explain-wrapper textarea {
  padding-right: 10px !important;
}
.options-clan-wrapper input {
  max-width: 120px;
  padding-right: 20px;
  height: 24px !important;
}

/* sheet-relation-area =========================*/
.list-header.no-dice {
  gap: 16px;
}
.relation-area .list-options-flag {
  margin-right: 4px;
}
.relation-area .list-header li {
  padding-left: 0;
}
.relation-name {
  padding-left: 8px;
  min-width: 145px;
}
.relation-location,
.relation-secret {
  flex: none !important;
}
.relation-emotion {
  width: 114px;
}
.relation-ohgi {
  width: 176px;
}
.relation-area .ninpo-name {
  width: 146px;
}
.relation-area .ninpo-assigned {
  width: 110px;
}
.list-area .checked-circle {
  margin-left: 16px;
}
.relation-emotion-detail {
  width: 66px;
}

/* sheet-background-area =========================*/
.background-name {
  width: 124px;
}
.background-type {
  width: 54px;
}
.background-score {
  width: 28px;
}

/* sheet-secret-area =========================*/
.sixth-row {
  position: relative;
  margin-top: 20px;
}
.secret-area {
  display: grid;
  grid-template-columns: 500px minmax(0px, 100%);
  justify-content: space-between;
  gap: 30px;
  height: 0 !important;
  min-height: 0;
  padding-left: 20px;
  transition: all 200ms ease-in;
  overflow: hidden;
}
.secret-header.part-title-wrapper {
  gap: 6px;
  width: 100%;
  height: 34px;
  padding-left: 54px;
  background: url('https://imgur.com/wUAIn7M.png') no-repeat;
  background-color: #1f2123;
  background-position: 23px 50%;
  background-size: 15px;
}
.secret-header.part-title-wrapper p {
  color: #fff;
  flex-shrink: 0;
  font-size: 14px;
}
.secret-header.part-title-wrapper span {
  flex-shrink: 0;
  color: #cfcfcf;
  line-height: 0;
}
.secret-header.part-title-wrapper .caption {
  display: block;
  flex: 1;
  padding-right: 40px;
  font-size: 11px;
  text-align: right;
}
input.secret-expand[value='0'] ~ div .secret-header.part-title-wrapper .caption {
  display: none;
}
.secret-header.part-title-wrapper hr {
  width: 100%;
  height: 1px;
  border: 0;
  border-bottom: 1px dashed #666;
}
input.secret-expand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px !important;
  background: url('https://imgur.com/mnkCRMH.png') no-repeat;
  background-position: top 50% right 23px;
  background-size: 12px;
  transform: scaleY(-1);
}
input.secret-expand:checked {
  background: url('https://imgur.com/mnkCRMH.png') no-repeat;
  background-position: top 50% right 23px;
  background-size: 12px;
  transform: scaleY(1);
}
.secret-expand:checked + .secret-area {
  min-height: 150px;
  height: auto !important;
  margin-top: 16px;
  padding-bottom: 24px;
}

.item-box {
  gap: 18px;
  margin-top: 23px;
  margin-bottom: 30px;
}
.item-row {
  width: 100%;
  padding-right: 20px;
  justify-content: space-between;
}
.item-box .dice-btn {
  margin-right: 6px !important;
}
.item-box .input-wrapper {
  flex: 0;
}
label.item-label {
  width: 36px;
  padding: 0;
  margin: 0;
  margin-right: 4px;
  font-size: 13px;
  letter-spacing: -0.2px;
  white-space: pre;
}
.item-box .custom-item-count {
  max-width: 50px;
}

.ohgi-name {
  width: 180px;
}
.ohgi-type {
  width: 100px;
}
.ohgi-assigned {
  width: 80px;
}
.ohgi-sub-type {
  min-width: 31px;
  flex: 0 !important;
}
.ohgi-gimmick {
  display: flex;
  justify-content: center;
  min-width: 30px;
}
.ohgi-gimmick .checked-circle {
  margin-left: 0;
}
.attr-ohgi-gimmick + .list-options-wrapper {
  display: none;
}
.attr-ohgi-gimmick[value='on'] + .list-options-wrapper {
  display: flex;
}
.gimmick-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
}
.gimmick-wrapper .list-options-wrapper {
  flex: 1;
  line-height: 24px;
}
.list-options-wrapper.not-expand input {
  flex: 1;
  height: 24px;
  padding: 2px 10px;
}
.gimmick-wrapper .list-options-wrapper.not-expand input {
  padding: 2px 6px;
  padding-right: 20px;
}
.double-options .list-options-wrapper {
  flex: 1;
}
.image-wrapper input {
  background-image: none;
  background-size: 20px;
  background-position: 8px 50%;
  background-repeat: no-repeat;
  transition: all 200ms ease-in;
}
.image-wrapper input[type='hidden']:not([value='']) + input {
  opacity: 0.7;
  padding-right: 20px;
  background-image: url('https://imgur.com/6UvkjwQ.png');
  color: transparent;
}
.image-wrapper input[type='hidden'][value=''] + input {
  opacity: 1;
  background-image: none;
}
.image-wrapper [type='hidden']:not([value='']) + input::placeholder {
  color: transparent;
  /*transition: all 200ms ease-in;*/
}
.image-wrapper [type='hidden']:not([value='']) + input:focus,
.image-wrapper [type='hidden']:not([value='']) + input:hover {
  opacity: 1;
  color: inherit;
  background-image: none;
}
.image-wrapper [type='hidden']:not([value='']) + input:focus::placeholder,
.image-wrapper [type='hidden']:not([value='']) + input:hover::placeholder {
  color: #bfbfbf;
}
.datalist {
  padding-right: 0 !important;
}

.secret-area .right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}
p.copyright {
  margin-right: 20px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  text-align: right;
  font-weight: 400;
  color: #ccc;
}

/* rolltemplate */
.sheet-rolltemplate-field,
.sheet-rolltemplate-ninpo,
.sheet-rolltemplate-other {
  max-width: 300px;
  padding-top: 5px;
}
.sheet-rolltemplate-ohgi {
  max-width: 400px;
  padding-top: 5px;
}
.sheet-rolltemplate-field .sheet-container,
.sheet-rolltemplate-ninpo .sheet-container,
.sheet-rolltemplate-ohgi .sheet-container,
.sheet-rolltemplate-other .sheet-container {
  min-height: 40px;
  border: 1px solid #1f2123;
  border-top: 10px solid #c80000;
  background-color: #fff;
}
.sheet-rolltemplate-field *,
.sheet-rolltemplate-ninpo *,
.sheet-rolltemplate-ohgi *,
.sheet-rolltemplate-other * {
  letter-spacing: -0.2px;
}

.sheet-rolltemplate-field .sheet-common,
.sheet-rolltemplate-ninpo .sheet-common,
.sheet-rolltemplate-ohgi .sheet-common,
.sheet-rolltemplate-other .sheet-common {
  text-align: center;
}

.sheet-rolltemplate-field .sheet-title,
.sheet-rolltemplate-ninpo .sheet-title,
.sheet-rolltemplate-ohgi .sheet-title,
.sheet-rolltemplate-other .sheet-title {
  background-color: #1f2123;
}

.sheet-rolltemplate-field .sheet-character-name,
.sheet-rolltemplate-ninpo .sheet-character-name,
.sheet-rolltemplate-ohgi .sheet-character-name,
.sheet-rolltemplate-other .sheet-character-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 6px 14px;
  margin: 0;
  color: #fff;
  text-align: center;
}
.sheet-rolltemplate-field .sheet-character-name strong,
.sheet-rolltemplate-ninpo .sheet-character-name strong,
.sheet-rolltemplate-ohgi .sheet-character-name strong,
.sheet-rolltemplate-other .sheet-character-name strong {
  font-size: 13px;
  font-weight: bold;
  color: inherit;
}
.sheet-rolltemplate-field .sheet-character-name .sheet-suffix,
.sheet-rolltemplate-ninpo .sheet-character-name .sheet-suffix,
.sheet-rolltemplate-ohgi .sheet-character-name .sheet-suffix,
.sheet-rolltemplate-other .sheet-character-name .sheet-suffix {
  font-size: 13px;
  color: inherit;
}
.sheet-rolltemplate-field .sheet-field,
.sheet-rolltemplate-ninpo .sheet-field,
.sheet-rolltemplate-ohgi .sheet-field,
.sheet-rolltemplate-other .sheet-field {
  display: block;
  margin: 0;
  padding: 6px 14px;
  padding-top: 0;
  padding-bottom: 8px;
  font-family: IBMPlexSansKR, sans-serif;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #1f2123;
}
.sheet-rolltemplate-field .sheet-status-warning,
.sheet-rolltemplate-ninpo .sheet-status-warning,
.sheet-rolltemplate-ohgi .sheet-status-warning,
.sheet-rolltemplate-other .sheet-status-warning {
  display: inline-block;
  font-size: 12px;
  color: #ff2525;
}
.sheet-rolltemplate-field .sheet-roll-wrapper,
.sheet-rolltemplate-ninpo .sheet-roll-wrapper,
.sheet-rolltemplate-ohgi .sheet-roll-wrapper,
.sheet-rolltemplate-other .sheet-roll-wrapper {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
  padding: 0 14px;
  background-color: #f5f5f5;
}
.sheet-rolltemplate-field .sheet-roll-name,
.sheet-rolltemplate-ninpo .sheet-roll-name,
.sheet-rolltemplate-ohgi .sheet-roll-name,
.sheet-rolltemplate-other .sheet-roll-name {
  padding: 12px 0;
  font-family: IBMPlexSansKR, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #1f2123;
}
.sheet-rolltemplate-field .sheet-dice,
.sheet-rolltemplate-ninpo .sheet-dice,
.sheet-rolltemplate-ohgi .sheet-dice,
.sheet-rolltemplate-other .sheet-dice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
}
.sheet-rolltemplate-field .sheet-dice .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-dice .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-dice .inlinerollresult,
.sheet-rolltemplate-other .sheet-dice .inlinerollresult {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid #565656;
  font-size: 26px;
  font-weight: bold;
  background-color: #fff;
}
.sheet-rolltemplate-field .sheet-dice .sheet-small,
.sheet-rolltemplate-ninpo .sheet-dice .sheet-small,
.sheet-rolltemplate-ohgi .sheet-dice .sheet-small,
.sheet-rolltemplate-other .sheet-dice .sheet-small {
  position: relative;
  display: flex;
  align-items: center;
  font-family: IBMPlexSansKR, sans-serif;
  font-size: 18px;
  font-weight: 100;
}
.sheet-rolltemplate-field .sheet-plus,
.sheet-rolltemplate-ninpo .sheet-plus,
.sheet-rolltemplate-ohgi .sheet-plus,
.sheet-rolltemplate-other .sheet-plus {
  margin-left: 12px;
}
.sheet-rolltemplate-field .sheet-plus::before,
.sheet-rolltemplate-ninpo .sheet-plus::before,
.sheet-rolltemplate-ohgi .sheet-plus::before,
.sheet-rolltemplate-other .sheet-plus::before {
  content: '+';
  position: absolute;
  top: 9px;
  left: 0;
  font-family: Pretendard, sans-serif;
  font-weight: 800;
  font-size: 26px;
  transform: scale(0.8);
}
.sheet-rolltemplate-field .sheet-minus,
.sheet-rolltemplate-ninpo .sheet-minus,
.sheet-rolltemplate-ohgi .sheet-minus,
.sheet-rolltemplate-other .sheet-minus {
  transform: translateX(-8px);
}
.sheet-rolltemplate-field .sheet-dice .sheet-small .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-dice .sheet-small .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-dice .sheet-small .inlinerollresult,
.sheet-rolltemplate-other .sheet-dice .sheet-small .inlinerollresult {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  margin-left: 4px;
  font-family: Pretendard, sans-serif;
  font-weight: 800;
  letter-spacing: 6px;
  background-color: transparent;
  transform: scale(0.8);
}
.sheet-rolltemplate-field .sheet-dice .fullcrit,
.sheet-rolltemplate-ninpo .sheet-dice .fullcrit,
.sheet-rolltemplate-ohgi .sheet-dice .fullcrit,
.sheet-rolltemplate-other .sheet-dice .fullcrit {
  border: 1px solid #10c700;
}
.sheet-rolltemplate-field .sheet-dice .fullfail,
.sheet-rolltemplate-ninpo .sheet-dice .fullfail,
.sheet-rolltemplate-ohgi .sheet-dice .fullfail,
.sheet-rolltemplate-other .sheet-dice .fullfail {
  border: 1px solid #ff2525;
}
.sheet-rolltemplate-field .sheet-roll-result,
.sheet-rolltemplate-ninpo .sheet-roll-result,
.sheet-rolltemplate-ohgi .sheet-roll-result,
.sheet-rolltemplate-other .sheet-roll-result {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 32px;
  padding: 6px 14px;
  color: #777;
  background-color: #fff;
}
.sheet-rolltemplate-field .sheet-roll-result::after,
.sheet-rolltemplate-ninpo .sheet-roll-result::after,
.sheet-rolltemplate-ohgi .sheet-roll-result::after,
.sheet-rolltemplate-other .sheet-roll-result::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 1px;
  background-color: #acacac;
}
.sheet-rolltemplate-field .sheet-end-row,
.sheet-rolltemplate-ninpo .sheet-end-row,
.sheet-rolltemplate-ohgi .sheet-end-row,
.sheet-rolltemplate-other .sheet-end-row {
  width: 100%;
  padding: 8px;
  background-color: #f5f5f5;
  text-align: center;
}
.sheet-rolltemplate-field div:last-child::after,
.sheet-rolltemplate-ninpo div:last-child::after,
.sheet-rolltemplate-ohgi div:last-child::after,
.sheet-rolltemplate-other div:last-child::after {
  content: none;
}
.sheet-rolltemplate-field .sheet-target,
.sheet-rolltemplate-ninpo .sheet-target,
.sheet-rolltemplate-ohgi .sheet-target,
.sheet-rolltemplate-other .sheet-target,
.sheet-rolltemplate-field .sheet-target .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-target .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-target .inlinerollresult,
.sheet-rolltemplate-other .sheet-target .inlinerollresult {
  padding: 0;
  border: 0;
  margin-left: 2px;
  font-size: 14px;
  font-weight: bold;
  color: #1f2123;
  background-color: transparent;
}
.sheet-rolltemplate-field .sheet-subtarget,
.sheet-rolltemplate-ninpo .sheet-subtarget {
  margin-left: 2px;
  font-size: 13px;
  color: #777;
}
.sheet-rolltemplate-field .sheet-subtarget .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-subtarget .inlinerollresult {
  padding: 1px;
  border: 0;
  color: inherit;
  font-size: inherit;
  background-color: transparent;
}
.sheet-rolltemplate-field .sheet-roll-result .sheet-success,
.sheet-rolltemplate-ninpo .sheet-roll-result .sheet-success,
.sheet-rolltemplate-ohgi .sheet-roll-result .sheet-success,
.sheet-rolltemplate-other .sheet-roll-result .sheet-success {
  color: #28921f;
}
.sheet-rolltemplate-field .sheet-roll-result .sheet-special,
.sheet-rolltemplate-ninpo .sheet-roll-result .sheet-special,
.sheet-rolltemplate-ohgi .sheet-roll-result .sheet-special,
.sheet-rolltemplate-other .sheet-roll-result .sheet-special {
  font-size: 14px;
  font-weight: bold;
  color: #10c700;
}
.sheet-rolltemplate-field .sheet-special .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-special .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-special .inlinerollresult,
.sheet-rolltemplate-other .sheet-special .inlinerollresult,
.sheet-rolltemplate-field .sheet-fumble .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-fumble .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-fumble .inlinerollresult,
.sheet-rolltemplate-other .sheet-fumble .inlinerollresult {
  border: 0;
  background-color: transparent;
}
.sheet-rolltemplate-field .sheet-roll-result .sheet-fail,
.sheet-rolltemplate-ninpo .sheet-roll-result .sheet-fail,
.sheet-rolltemplate-ohgi .sheet-roll-result .sheet-fail,
.sheet-rolltemplate-other .sheet-roll-result .sheet-fail {
  color: #b32e2e;
}
.sheet-rolltemplate-field .sheet-roll-result .sheet-fumble,
.sheet-rolltemplate-ninpo .sheet-roll-result .sheet-fumble,
.sheet-rolltemplate-ohgi .sheet-roll-result .sheet-fumble,
.sheet-rolltemplate-other .sheet-roll-result .sheet-fumble {
  font-size: 14px;
  font-weight: bold;
  color: #ff2525;
}
.sheet-rolltemplate-field .sheet-content-wrapper,
.sheet-rolltemplate-ninpo .sheet-content-wrapper,
.sheet-rolltemplate-other .sheet-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  padding-bottom: 12px;
  text-align: left;
}
.sheet-rolltemplate-ohgi .sheet-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  padding-bottom: 12px;
  text-align: left;
}
.sheet-rolltemplate-field .sheet-item-row,
.sheet-rolltemplate-ninpo .sheet-item-row,
.sheet-rolltemplate-ohgi .sheet-item-row,
.sheet-rolltemplate-other .sheet-item-row {
  display: inline-block;
  line-height: 1.5;
  word-break: keep-all;
}
.sheet-rolltemplate-field .sheet-type-item,
.sheet-rolltemplate-ninpo .sheet-type-item,
.sheet-rolltemplate-ohgi .sheet-type-item,
.sheet-rolltemplate-other .sheet-type-item {
  flex-shrink: 0;
  display: inline-block;
  margin-right: 5px;
  font-size: 11px;
  font-weight: bold;
  color: #cf0000;
}
.sheet-rolltemplate-field .sheet-item-wrapper,
.sheet-rolltemplate-ninpo .sheet-item-wrapper,
.sheet-rolltemplate-ohgi .sheet-item-wrapper,
.sheet-rolltemplate-other .sheet-item-wrapper {
  display: inline;
}
.sheet-rolltemplate-ohgi .sheet-item-wrapper {
  display: block;
}
.sheet-rolltemplate-field .sheet-item-wrapper::after,
.sheet-rolltemplate-ninpo .sheet-item-wrapper::after,
.sheet-rolltemplate-other .sheet-item-wrapper::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  margin: 3px 6px;
  background-color: #777;
}
.sheet-rolltemplate-field .sheet-item-wrapper:last-child::after,
.sheet-rolltemplate-ninpo .sheet-item-wrapper:last-child::after,
.sheet-rolltemplate-ohgi .sheet-item-wrapper:last-child::after,
.sheet-rolltemplate-other .sheet-item-wrapper:last-child::after {
  content: none;
}
.sheet-rolltemplate-field .sheet-type-value,
.sheet-rolltemplate-ninpo .sheet-type-value,
.sheet-rolltemplate-ohgi .sheet-type-value,
.sheet-rolltemplate-other .sheet-type-value {
  margin-left: -2px;
  color: #1f2123;
  font-weight: bold;
}
.sheet-rolltemplate-field .sheet-effect-wrapper,
.sheet-rolltemplate-ninpo .sheet-effect-wrapper,
.sheet-rolltemplate-ohgi .sheet-effect-wrapper,
.sheet-rolltemplate-other .sheet-effect-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sheet-rolltemplate-field .sheet-effect,
.sheet-rolltemplate-ninpo .sheet-effect,
.sheet-rolltemplate-ohgi .sheet-effect,
.sheet-rolltemplate-other .sheet-effect {
  display: block;
  line-height: 1.5;
  font-size: 13px;
  text-align: left;
}
.sheet-rolltemplate-field .sheet-italic,
.sheet-rolltemplate-ninpo .sheet-italic,
.sheet-rolltemplate-ohgi .sheet-italic,
.sheet-rolltemplate-other .sheet-italic {
  width: 100%;
  font-style: italic;
  color: #777;
}
.sheet-rolltemplate-ninpo .sheet-effect-inner-wrapper,
.sheet-rolltemplate-ohgi .sheet-effect-inner-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sheet-rolltemplate-ninpo .sheet-effect-inner-wrapper .sheet-effect,
.sheet-rolltemplate-ohgi .sheet-effect-inner-wrapper .sheet-effect {
  display: inline-block;
}
.sheet-rolltemplate-ninpo .sheet-effect-inner-wrapper .sheet-item-wrapper {
  display: block;
  /*margin-left: 8px;*/
  word-break: break-word;
}
.sheet-rolltemplate-ninpo .sheet-effect-inner-wrapper .sheet-type-item,
.sheet-rolltemplate-ohgi .sheet-effect-inner-wrapper .sheet-type-item {
  position: relative;
  color: #1f2123;
}
.sheet-rolltemplate-ninpo .sheet-effect-inner-wrapper .sheet-italic,
.sheet-rolltemplate-ohgi .sheet-effect-inner-wrapper .sheet-italic {
  display: inline;
  width: auto;
  margin-left: 0;
}
.sheet-rolltemplate-field .sheet-rolltable-wrapper,
.sheet-rolltemplate-ninpo .sheet-rolltable-wrapper,
.sheet-rolltemplate-ohgi .sheet-rolltable-wrapper,
.sheet-rolltemplate-other .sheet-rolltable-wrapper {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px;
}
.sheet-rolltemplate-field .sheet-rolltable-wrapper .inlinerollresult,
.sheet-rolltemplate-ninpo .sheet-rolltable-wrapper .inlinerollresult,
.sheet-rolltemplate-ohgi .sheet-rolltable-wrapper .inlinerollresult,
.sheet-rolltemplate-other .sheet-rolltable-wrapper .inlinerollresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #565656;
}
.sheet-rolltemplate-field .sheet-rolltable-wrapper .fullcrit,
.sheet-rolltemplate-ninpo .sheet-rolltable-wrapper .fullcrit,
.sheet-rolltemplate-ohgi .sheet-rolltable-wrapper .fullcrit,
.sheet-rolltemplate-other .sheet-rolltable-wrapper .fullcrit {
  border: 1px solid #10c700;
}
.sheet-rolltemplate-field .sheet-rolltable-wrapper .fullfail,
.sheet-rolltemplate-ninpo .sheet-rolltable-wrapper .fullfail,
.sheet-rolltemplate-ohgi .sheet-rolltable-wrapper .fullfail,
.sheet-rolltemplate-other .sheet-rolltable-wrapper .fullfail {
  border: 1px solid #ff2525;
}
.sheet-rolltemplate-field .sheet-emotion,
.sheet-rolltemplate-ninpo .sheet-emotion,
.sheet-rolltemplate-ohgi .sheet-emotion,
.sheet-rolltemplate-other .sheet-emotion {
  display: block;
  line-height: 1.5;
}
.sheet-rolltemplate-field .sheet-random-field,
.sheet-rolltemplate-ninpo .sheet-random-field,
.sheet-rolltemplate-ohgi .sheet-random-field,
.sheet-rolltemplate-other .sheet-random-field {
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 8px;
  font-size: 13px;
}
.sheet-rolltemplate-field .sheet-upper-rfield,
.sheet-rolltemplate-ninpo .sheet-upper-rfield,
.sheet-rolltemplate-ohgi .sheet-upper-rfield,
.sheet-rolltemplate-other .sheet-upper-rfield {
  display: block;
  line-height: 1.5;
  font-size: 13px;
}
.sheet-rolltemplate-field .sheet-random-field .fullcrit,
.sheet-rolltemplate-ninpo .sheet-random-field .fullcrit,
.sheet-rolltemplate-ohgi .sheet-random-field .fullcrit,
.sheet-rolltemplate-other .sheet-random-field .fullcrit,
.sheet-rolltemplate-field .sheet-random-field .fullfail,
.sheet-rolltemplate-ninpo .sheet-random-field .fullfail,
.sheet-rolltemplate-ohgi .sheet-random-field .fullfail,
.sheet-rolltemplate-other .sheet-random-field .fullfail {
  border: 1px solid #565656;
}
.sheet-rolltemplate-field .sheet-rfield-wrapper,
.sheet-rolltemplate-ninpo .sheet-rfield-wrapper,
.sheet-rolltemplate-ohgi .sheet-rfield-wrapper,
.sheet-rolltemplate-other .sheet-rfield-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-rolltemplate-field .sheet-rfield-title,
.sheet-rolltemplate-ninpo .sheet-rfield-title,
.sheet-rolltemplate-ohgi .sheet-rfield-title,
.sheet-rolltemplate-other .sheet-rfield-title {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
  font-size: 13px;
  font-weight: bold;
}
.sheet-rolltemplate-field .sheet-rfield-name,
.sheet-rolltemplate-ninpo .sheet-rfield-name,
.sheet-rolltemplate-ohgi .sheet-rfield-name,
.sheet-rolltemplate-other .sheet-rfield-name {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
  font-size: 13px;
}
.sheet-rolltemplate-other .sheet-flex-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sheet-rolltemplate-ninpo .sheet-flex-column,
.sheet-rolltemplate-other .sheet-flex-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sheet-rolltemplate-ohgi .sheet-flex-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
}
.sheet-rolltemplate-ohgi .sheet-flex-column:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #acacac;
}
.sheet-rolltemplate-field .sheet-type-effect,
.sheet-rolltemplate-ninpo .sheet-type-effect,
.sheet-rolltemplate-ohgi .sheet-type-effect,
.sheet-rolltemplate-other .sheet-type-effect {
  line-height: 1.5;
  font-size: 13px;
  word-break: keep-all;
}