/* 목차 토글 버튼 */
#toc-toggle {
  all: unset;
  position: fixed;
  bottom: 0.1em;
  right: 0.3em;
  width: 2em;
  height: 4em;
  aspect-ratio: 1 / 2;
  background-image: url(https://chottolatte.mycafe24.com//wp-content/mu-plugins/css/img/Pokemon-S-S-texi.webp);
  background-position: center bottom;
  background-size: cover;
  opacity: 0.3;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 9998;
}
#toc-toggle:hover {
  opacity: 1;
  background-image: url(https://chottolatte.mycafe24.com//wp-content/mu-plugins/css/img/Pokemon-S-S-texi-hover.webp);
}
@media (min-width: 768px) {
  #toc-toggle {
  width: auto;
  height: 5em;
  }
}

/* 전역 설정용 */
:root {
 --cut--background: 30px;
 --cut--g: calc(100% - (100% - var(--cut--background)));
 --cut--g--right: calc(100% - (100% - (100% - var(--cut--background))));
 --cut--m-background: 15px;
 --cut--m-g: calc(100% - (100% - var(--cut--m-background)));
 --cut--m-g--right: calc(100% - (100% - (100% - var(--cut--m-background))));
}

/* 스토리 대사 백업용 */
.wp-block-quote.is-style-plain > p {
  text-indent: 0!important;
}
.story-bub-box1,
.story-bub-box1.main-chara {
  font-family: 'EliceDigitalBaeum_Regular' , sans-serif;
  margin-top: 0;
  display: inline-block;
  text-align: justify;
  min-width: 30%;
  border-radius: 20px;
  border: 1px solid var(--wp--preset--color--accent-6);
  background: linear-gradient(115deg, #dddddd var(--cut--g), #eeeeee var(--cut--g), #eeeeee calc(var(--cut--g--right) - 15px), #dddddd calc(var(--cut--g--right) - 15px));
  color: #222222;
  padding: 15px 35px;
  box-shadow: 3px 3px 2px var(--wp--preset--color--accent-6);
}
.story-bub-box1::after { display:none; }

.story-bub-outside,
.story-bub-outside.main-chara {
  display: inline-block;
  background: #3B3D3B;
  color: #eeeeee;
  border-radius: 5px;
  padding: 5px 35px;
}
.story-bub-box1.another:not(:first-child) {
  margin-top: 1.2rem;
}
.story-bub-box1.another {
  background: linear-gradient(115deg, #252C28 var(--cut--g), #3A3C39 var(--cut--g), #3A3C39 calc(var(--cut--g--right) - 15px), #252C28 calc(var(--cut--g--right) - 15px));
  color: #eeeeee;
  border-radius: 5px;
}

/* 이미지 스타일 */
.wp-block-post-content img:not([class*="emoji"]),
.wp-block-post-content :is(figure.wp-block-embed-youtube .wp-block-embed__wrapper,figure.wp-block-image img) {
  position: relative;
  mask-image: linear-gradient(115deg, 
transparent var(--cut--g), #00000060 var(--cut--g), #00000060 calc(var(--cut--g) + 15px), black calc(var(--cut--g) + 15px),
black calc(var(--cut--g--right) - 15px), #00000060 calc(var(--cut--g--right) - 15px), #00000060 var(--cut--g--right), transparent var(--cut--g--right));
  box-sizing: border-box;
  border-radius: 10px;
}
@media (max-width: 768px) {
.wp-block-post-content img:not([class*="emoji"]),
.wp-block-post-content :is(figure.wp-block-embed-youtube .wp-block-embed__wrapper,figure.wp-block-image img) {
  mask-image: linear-gradient(115deg, transparent var(--cut--m-g), #00000060 var(--cut--m-g), #00000060 calc(var(--cut--m-g) + 15px), black calc(var(--cut--m-g) + 15px), black calc(var(--cut--m-g--right) - 15px), #00000060 calc(var(--cut--m-g--right) - 15px), #00000060 var(--cut--m-g--right), transparent var(--cut--m-g--right));
  }
}
.wp-block-post-content :is(figure.wp-block-embed-youtube,figure.wp-block-image) {
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 2px var(--wp--preset--color--accent-6));
}


/* 헤딩 스타일 */
:is(.wp-block-post-content,.has-heading) > :is(h1,h2,h3,h4,h5,h6),
:is([class*="custom-style-h"]) {
  font-size: var(--wp--preset--font-size--x-large);
  font-family: 'EliceDigitalBaeum_Regular';
  font-weight: bold;
  text-indent: 0!important;
  position: relative;
}
:is(.wp-block-post-content,.has-heading) > :is(h1), .custom-style-h1 {
  background: linear-gradient(115deg, #0499DF ,#53BEBF var(--cut--g--right), transparent var(--cut--g--right));
  display: block;
  position: relative;
  margin-bottom: calc( 35px + 1.2rem );
  min-width: 40%;
  padding: 15px 4rem 15px 15px;
  color: #fff;
}

:is(.wp-block-post-content,.has-heading) > :is(h2), .custom-style-h2 {
  background: linear-gradient(115deg, transparent var(--cut--g),#C73F54 var(--cut--g));
  display: block;
  position: relative;
  min-width: 40%;
  padding: 15px 15px 15px 4rem;
  color: #fff;
  margin-bottom: calc(10px + 1.2rem);
}

:is(.wp-block-post-content,.has-heading) > :is(h3), .custom-style-h3 {
  background: linear-gradient(115deg, transparent calc(var(--cut--g) + 15px), #ffffff calc(var(--cut--g) + 15px), #ffffff calc(var(--cut--g--right) - 15px), transparent calc(var(--cut--g--right) - 15px)), linear-gradient(115deg, transparent var(--cut--g), #333333 var(--cut--g), #333333 var(--cut--g--right), transparent var(--cut--g--right));
  padding: 15px 55px;
  color: #333333;
  display: inline-flex;
  transform: translateX(-50%);
  left: 50%;
  top: 0;
  text-align: center;
  position: relative;
}

/* 헤딩 공통 after 스타일 */
:is(
:is(.wp-block-post-content,.has-heading) > :is(h1,h2,h3,h4,h5,h6),
:is([class*="custom-style-h"]))::after {
  position: absolute;
  /* content: ''; */
  background: linear-gradient(115deg, #3B3D3B calc(var(--cut--g--right) - 15px), transparent calc(var(--cut--g--right) - 15px));
  color: #eee;
  transform: translateY(100%);
  min-width: 50%;
  font-size: 20px;
  padding: 5px 4rem 5px 20px;
  bottom: 0;
  left: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
:is(
:is(.wp-block-post-content,.has-heading) > :is(h1,h2,h3,h4,h5,h6),
:is([class*="custom-style-h"])):is([data-text],[subtitle-text]) {
  margin-bottom: calc( 35px + 1.2rem );
}
:is(
:is(.wp-block-post-content,.has-heading) > :is(h1,h2,h3,h4,h5,h6),
:is([class*="custom-style-h"]))[data-text]::after {
  content: attr(data-text);
}
:is(
:is(.wp-block-post-content,.has-heading) > :is(h1,h2,h3,h4,h5,h6),
:is([class*="custom-style-h"]))[subtitle-text]::after {
  content: attr(subtitle-text);
}

:is(
:is(.wp-block-post-content,.has-heading) > :is(h1),
:is(.custom-style-h1))::after {
  content: '플레이 날짜';
}

:is(
:is(.wp-block-post-content,.has-heading) > :is(h2),
:is(.custom-style-h2))::after {
  content: ' ';
  background: linear-gradient(115deg, transparent var(--cut--g),#3B3D3B var(--cut--g));
  width: 70%;
  left: auto;
  right: 0;
  padding: 5px 10px 5px 4rem;
}