/******************************
            DEFAULT         
  ******************************/
  @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css");
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
  @import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css");
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100..900&display=swap');

  :root {
    --main-color: #ffffff;
	--default-font: 'Pretendard JP Variable';
	--light-mode-color-01: #111111; /*라이트 모드 글씨 색01*/
	--light-mode-color-02: #ffffff; /*라이트 모드 글씨 색02*/
	--light-mode-bak-01: rgba(255,255,255,.7); /*라이트 모드 박스 색*/
	--light-mode-bak-02: rgba(0,0,0,.9); /*라이트 모드 박스 색*/
	--light-mode-bak-03: #000000; /*라이트 모드 박스 색*/
	--dark-mode-color-01: #ffffff; /*다크 모드 글씨 색01*/
	--dark-mode-color-02: #111111; /*다크 모드 글씨 색02*/
	--dark-mode-bak-01: rgba(0,0,0,.7); /*다크 모드 박스 색*/
	--dark-mode-bak-02: rgba(255,255,255,.9); /*다크 모드 박스 색*/
	--dark-mode-bak-03: #ffffff; /*다크 모드 박스 색*/

	/** 커스텀 영역 **/
	--left-character-color-01: #34373e; /*좌측 캐릭터 색상 #01*/
	--left-character-color-02: #ebd26c; /*좌측 캐릭터 색상 #02*/
	--left-character-color-03: #ffffff; /*좌측 캐릭터 색상 #03*/
	--left-character-color-04: #ebd26c; /*좌측 캐릭터 색상 #04*/
	--right-character-color-01: #badbf7; /*우측 캐릭터 색상 #01*/
	--right-character-color-02: #e4231d; /*우측 캐릭터 색상 #02*/
	--right-character-color-03: #11368a; /*우측 캐릭터 색상 #03*/
	--right-character-color-04: #e4231d; /*우측 캐릭터 색상 #04*/
	--pair-color-01:#ebd26c; /*페어 색상 #01*/
	--pair-color-02:#badbf7; /*페어 색상 #02*/
  }

  .sheet-rolltemplate-coc {
    --main-color:#ffffff;
	--font-color:#111111;
	--bak-color:#ffffff;

	/** 커스텀 영역 **/
   --custom-color:#ebd26c; /*기본 포인트 컬러*/
   --font-c-color:#ffffff; /*글씨 색상*/
   --bak-c-color:#000000; /*배경 색상*/
   --box-custom-color:#000000; /*박스 안 글씨 색상*/
   --success-color:#077A00; /*성공 컬러*/
   --hard-color:#0BBE00; /*어려운 성공 컬러*/
   --extreme-color:#A1FF9A; /*극단적 성공 컬러*/
   --fail-color:#AF0007; /*실패 컬러*/
   --fumble-color:#EB0003; /*대실패 컬러*/
   --critical-color:#03FF00; /*대성공 컬러*/
  }


  #sheet-allcontent {
    width: 780px;
    position: relative;
    font-family: var(--default-font);
    color: var(--font-color);
    padding: 40px 0;
  }

  #sheet-allcontent * {
    position: relative;
    transition: 0.3s all;
  }

  #sheet-allcontent input,
  #sheet-allcontent select {
    border: none;
    background: transparent;
    font-weight: 500;
    color: var(--font-color);
    font-family: var(--default-font);
    outline: none;
    padding: 0 2px;
    border-radius: 0;
    width: fit-content;
    margin-bottom: 0;
    height: fit-content;
  }



  .sheet-rolltemplate-coc .sheet-rolltemplate {
    font-family: 'Noto Sans Kr';
    position: relative;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate * {
    position: relative;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate {
    max-width: 220px;
    text-align: center;
    border: 1px solid #000;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate>div {
    background: var(--bak-color);
    color: var(--font-color);
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-0 {
    --font-color: #111111;
    --bak-color: #ffffff;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-1 {
    --bak-color: #111111;
    --font-color: #ffffff;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-dice-detail {
    display: inline-grid;
    grid-template-columns: 24px auto;
    gap: 1px 6px;
    justify-content: center;
  }

  .sheet-rolltemplate-coc .sheet-template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1px;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate i:nth-of-type(1) {
    background: var(--main-color);
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate i:nth-of-type(2) {
    background: var(--font-color);
  }

  .sheet-rolltemplate-coc .sheet-pair {
    color: var(--bak-color);
    background: var(--main-color);
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 12px;
  }

  .sheet-rolltemplate-coc .sheet-template-middle {
    padding-top: 6px;
  }

  .sheet-rolltemplate-coc .sheet-name {
    border-top: 1px solid var(--font-color);
    border-bottom: 2px solid var(--font-color);
    font-size: 16px;
    padding: 4px 0;
    margin-bottom: 2px;
  }

  .sheet-rolltemplate-coc .sheet-ability {
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
    gap: 2px;
  }

  .sheet-rolltemplate-coc .sheet-ability>span {
    background: var(--main-color);
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }

  .sheet-rolltemplate-coc .sheet-dot {
    display: flex;
    gap: 4px;
  }

  .sheet-rolltemplate-coc .sheet-dot>div {
    width: 4px;
    height: 4px;
    background: var(--font-color);
    border-radius: 50%;
  }

  .sheet-rolltemplate-coc span .inlinerollresult,
  .sheet-rolltemplate-coc span .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc span .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc span .inlinerollresult.importantroll {
    color: var(--bak-color);
  }

  .sheet-rolltemplate-coc .sheet-diceroll .inlinerollresult,
  .sheet-rolltemplate-coc .sheet-diceroll .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc .sheet-diceroll .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc .sheet-diceroll .inlinerollresult.importantroll {
    font-size: 28px;
    font-weight: 900;
  }

  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll .inlinerollresult,
  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll .inlinerollresult.importantroll {
    font-size: 1.1em;
    font-weight: 500;
  }

  .sheet-rolltemplate-coc .sheet-diceroll {
    position: relative;
  }

  .sheet-rolltemplate-coc .sheet-diceroll:before,
  .sheet-rolltemplate-coc .sheet-diceroll:after {
    font-family: 'Noto Serif KR';
    font-size: 32px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
  }

  .sheet-rolltemplate-coc .sheet-diceroll:before {
    content: '(';
    left: 20px;
  }

  .sheet-rolltemplate-coc .sheet-diceroll:after {
    content: ')';
    right: 20px;
  }

  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll:before,
  .sheet-rolltemplate-coc .sheet-diceroll-outer-in .sheet-diceroll:after {
    content: none;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-subject {
    font-size: 24px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 24px;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-template-madness-desc {
    margin: 6px 0 12px;
    font-weight: 600;
    background: var(--main-color);
    color: var(--bak-color);
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-diceroll-outer {
    margin-top: 20px;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-diceroll-outer-in {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-dice-detail>div:nth-child(2n+1) {
    background: var(--main-color);
    color: var(--bak-color);
  }

  .sheet-rolltemplate-coc .inlinerollresult,
  .sheet-rolltemplate-coc .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc .inlinerollresult.importantroll {
    border: none !important;
    display: inline-block;
    background: transparent !important;
    font-weight: 500;
    color: var(--font-color);
  }

  .sheet-rolltemplate-coc .sheet-template-footer {
    margin-top: 16px;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-template-val {
    padding: 2px 0;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-success {
    background: #077A00;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-hard {
    background: #0BBE00;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-extreme {
    background: #A1FF9A;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-fail {
    background: #AF0007;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-fumble {
    background: #EB0003;
  }

  .sheet-rolltemplate-coc .sheet-template-footer .sheet-critical {
    background: #03FF00;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-0 {
    --main-color: #ba1833;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-1 {
    --main-color: #f61456;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-2 {
    --main-color: #ed8297;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-3 {
    --main-color: #851848;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-4 {
    --main-color: #f66837;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-5 {
    --main-color: #f6cd66;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-6 {
    --main-color: #066852;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-7 {
    --main-color: #d1dc7b;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-8 {
    --main-color: #7c826b;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-9 {
    --main-color: #15dde1;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-10 {
    --main-color: #8dbde1;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-11 {
    --main-color: #0548b0;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-12 {
    --main-color: #041e3e;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-13 {
    --main-color: #b42eb0;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-14 {
    --main-color: #836eaf;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-15 {
    --main-color: #ffffff;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-16 {
    --main-color: #aaaaaa;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-17 {
    --main-color: #000000;
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-18 {
    --main-color: var(--custom-color);
    --font-color: var(--font-c-color);
    --bak-color: var(--bak-c-color);
    background: var(--bak-c-color);
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-18,
  .sheet-rolltemplate-coc .sheet-theme-color-18 .inlinerollresult,
  .sheet-rolltemplate-coc .sheet-theme-color-18 .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc .sheet-theme-color-18 .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc .sheet-theme-color-18 .inlinerollresult.importantroll {
    color: var(--font-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer>div,
  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-18 .sheet-dice-detail>div:nth-child(2n+1),
  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-theme-color-18 .sheet-pair,
  .sheet-rolltemplate-coc .sheet-theme-color-18 span .inlinerollresult,
  .sheet-rolltemplate-coc .sheet-theme-color-18 span .inlinerollresult.fullcrit,
  .sheet-rolltemplate-coc .sheet-theme-color-18 span .inlinerollresult.fullfail,
  .sheet-rolltemplate-coc .sheet-theme-color-18 span .inlinerollresult.importantroll {
    color: var(--box-custom-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-success {
    background: var(--success-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-hard {
    background: var(--hard-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-extreme {
    background: var(--extreme-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-fail {
    background: var(--fail-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-fumble {
    background: var(--fumble-color);
  }

  .sheet-rolltemplate-coc .sheet-theme-color-18 .sheet-template-footer .sheet-critical {
    background: var(--critical-color);
  }

  .sheet-rolltemplate-coc .sheet-rolltemplate .sheet-custom-bak {
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
  }

  .sheet-rolltemplate-coc .sheet-custom-bak img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .sheet-rolltemplate-coc .sheet-custom-in {
    backdrop-filter: blur(2px);
    padding: 8px 8px 12px;
  }