/* 內頁樣式 */
:root {
  --nav-color: rgb(214, 197, 158);
  --border-color: rgb(109, 102, 91);
  --highlight: rgb(255, 204, 0);
  --highlight2: rgb(249, 142, 237);
  --highlight3: rgb(255, 78, 78);
  --td-highlight: rgb(180, 123, 54);
  --att-color: rgb(255, 232, 34);
  --th-bgcolor: rgb(160, 144, 105);
  --page-color: rgb(191, 185, 174);
}


.page,
.page .content {
  width: 100%;
}

.prose {
  --gap: 20px;
  width: 100%;
  /* color: #141414; */
  font-size: 1rem;
  min-height: 600px;
  /* overflow: hidden; */
  padding: var(--gap) 0 100px;
}

.prose a {
  text-decoration: underline;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight: 700;
}



.prose .prose-header {
  margin: 0 var(--gap);
  border-bottom: 2px solid var(--border-color);
  position: relative;
  top: 0;
  z-index: 10;
  padding: 10px 0;
  /* background-color: #444; */
}

.prose header h1 {
  background: linear-gradient(to bottom, #d0c7a0 50%, #a09069 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  --prose_h1: 30px;
  font-size: var(--prose_h1);
  font-weight: 700;
  margin: 0;
}

.prose .content {
  width: calc(100% - var(--gap) * 2);
  margin: 0 var(--gap);
}


.prose ol,
.prose ul {
  margin-bottom: 1rem;
}

.prose ol {
  list-style: decimal;
}

.prose ul {
  list-style: disc;
}

.prose li {
  margin-left: 24px;
}

.prose>p {
  margin: .7rem 0;
}

.prose .content>img {
  margin-top: .75rem;
  margin-bottom: 3rem;
}

.prose .page_button_block+img {
  margin-bottom: 0;
}






.prose .prose-header .btn-copy {
  width: var(--btn-copy);
  aspect-ratio: 1/1;
  background: linear-gradient(to bottom, #d0c7a0 30%, #97865f 100%);
  position: absolute;
  right: 0;
  top: 50%;
  text-indent: -1000rem;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  mask-image: url(../images/icons/btn_link.svg);
  mask-size: 100% auto;
  transition: .25s filter cubic-bezier(0.4, 0, 0.2, 1);
}

.prose-header::before {
  content: "";
  width: var(--btn-copy);
  aspect-ratio: 1/1;
  display: block;
  background: linear-gradient(to bottom, #333 10%, #222 100%);
  font-size: 0;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  opacity: 0;
  transition: .25s opacity cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.9);
}

.prose-header:has(.btn-copy:hover)::before {
  opacity: 1;
}

.prose .prose-header .btn-copy:hover {
  filter: brightness(1.2);
}

.toc {
  background-color: #e9e9e9;
  color: #242424;
  font-size: 1rem;
  margin: 20px 0;
  padding: 16px 20px;
  position: relative;
}

.toc,
.toc .btn-toggle {
  border: 1px solid #cbcbcb;
}

.toc .btn-toggle {
  background: url(../images/icons/ico_collapse.png) no-repeat 50% 50%/ 16px auto #fff;
  height: 30px;
  position: absolute;
  right: 12px;
  text-indent: -1000rem;
  top: 12px;
  width: 30px;
}

.toc .toc-title {
  color: #948662;
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
}

.toc .toc-content {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: margin-top .4s, max-height .4s cubic-bezier(0, 1, 0, 1);
}

.toc .toc-content .toc-list {
  line-height: 24px;
  list-style: none;
  margin: 0;
}

.toc .toc-content .toc-list .toc-list {
  margin-left: 20px;
}

.toc .toc-content .toc-list .toc-list-item {
  margin: 0;
}

.toc.is-expend .toc-content {
  margin-top: 16px;
  max-height: 9999px;
  transition: margin-top .4s, max-height .4s cubic-bezier(.65, 0, .35, 1);
}

.wp-block-table table td {
  background-color: #eae7e2;
}

.wp-block-table table thead th {
  background-color: var(--th-bgcolor);
  border-color: var(--th-bgcolor);
  color: #fff;
}

.p9_35 .wp-block-table table tbody>tr>td:nth-of-type(1) {
  background-color: var(--bg-color);
  border-left-color: var(--bg-color);
}

.p9_35 .wp-block-table table tbody>tr:nth-of-type(1)>td:nth-of-type(1) {
  --bg-color: #4f8f6a;
}
.p9_35 .wp-block-table table tbody>tr:nth-of-type(2)>td:nth-of-type(1) {
  --bg-color: #85a85f;
}
.p9_35 .wp-block-table table tbody>tr:nth-of-type(3)>td:nth-of-type(1) {
  --bg-color: #c49a3a;
}
.p9_35 .wp-block-table table tbody>tr:nth-of-type(4)>td:nth-of-type(1) {
  --bg-color: #be6a6a;
}
.p9_35 .wp-block-table table tbody>tr:nth-of-type(5)>td:nth-of-type(1) {
  --bg-color: #6689b3;
}

.wp-block-table table td,
.wp-block-table table th {
  border: 1px solid #fff;
  padding: 6px 12px;
}

.wp-block-table figcaption {
  text-align: center;
}

/* ------------------ wide view ------------------ */

@media screen and (min-width:1024px) {

  .prose {
    --gap: 60px;
    font-size: 1.15rem;
    line-height: 2rem;
    max-width: 970px;
  }

  .prose .prose-header {
    line-height: 1;
    margin: 0 var(--gap) 32px;
    padding: 0 0 20px;
  }

  .prose header h1 {
    font-size: calc(var(--prose_h1)* 1.3);
  }

  .prose .prose-header .btn-copy {
    width: calc(var(--btn-copy) * 1.2);
    margin-top: -10px;
  }

  .prose-header::before {
    width: calc(var(--btn-copy) * 1.2);
    margin-top: -4px;
  }




  .prose h4,
  .prose h5,
  .prose h6 {
    margin: 1.75rem 0;
  }

  .toc {
    margin: 32px 0 74px
  }

  .toc .btn-toggle {
    right: 14px;
    top: 14px
  }

  /* .wp-block-table table td,
  .wp-block-table table th {
    padding: .5rem 1rem;
  } */

  ;
}


/* --------------------------以下各頁內容------------------------------ */

/* p5-p6 */
.page .content {
  color: var(--page-color);
}

.page .content ul li {
  list-style: "\25C6";
  padding-inline-start: .5rem;
  padding: .25rem;
}

.page .content ul li::marker {
  font-size: .9rem;
}

.page .content ul li::before {
  margin-right: .5rem;
}

.page .content span.sp1 {
  color: var(--highlight);
}
.page .content td span.sp1 {
  color: rgb(184, 122, 0);
}

.page .content span.sp2 {
  color: var(--att-color);
}

.page .content span.sp3 {
  color: var(--highlight2);
}

.page .content span.sp4 {
  color: var(--td-highlight);
}

.page .content span.sp5 {
  color: var(--highlight3);
  font-weight: 600;
}

.page table th,
.page table td {
  vertical-align: middle;
}

.page table thead {
  text-align: center;
}

.page table thead th span {
  display: inline-block;
}

.page table tbody {
  color: #242424 !important;
  text-align: center;
}


.page table.nav_list tbody {
  text-align: initial;
  font-weight: 700;
}

.page table.nav_list .nav_name {
  vertical-align: middle;
}

.page table.nav_list .nav_name span {
  display: inline;
}

.page table.nav_list .link {
  width: calc(var(--wp--preset--font-size--medium) * 7);
  text-align: center;
}

.page_button_block {
  width: 100%;
  margin: 2rem auto;
  text-align: center;
  display: flex;
  display: -ms-flexbox;
  justify-content: center;
  -ms-flex-pack: center;
  padding: .5rem 0;
}

.page_button {
  width: 60%;
  font-size: 1.35rem;
  font-weight: 600;
  color: #e8b870;
  /* line-height: 2; */
  border: 2px solid hsl(40, 31%, 30%);
  background-color: #0000007e;
  border-radius: 8px;
  cursor: pointer;
  margin: 5px 5px;
  padding: 3px 15px;
  box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.52);
  /*  white-space: nowrap; */
  transition: all 0.24s;
}

.page_button a {
  width: 100%;
  text-decoration: none;
  transition: all .3s;
}

@media (hover) {
  .page_button:hover {
    border-color: #907e52;
  }

  .page_button a:hover {
    color: var(--nav-color);
  }
}

/* .page.p5_1 table thead th:nth-last-of-type(n+2) {
  white-space: nowrap;
} */


.p5_1 .wp-block-table,
.p5_3 .wp-block-table,
.p5_5 .wp-block-table,
.p5_6 .wp-block-table {
  overflow: auto;
  max-height: 80vh;
  position: relative;
}

.p5_1 .wp-block-table table,
.p5_3 .wp-block-table table,
.p5_5 .wp-block-table table,
.p5_6 .wp-block-table table {
 background-color: #eae7e2;
}

.p5_5 .wp-block-table table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.p5_1 .wp-block-table thead th,
.p5_3 .wp-block-table thead th,
.p5_5 .wp-block-table thead th,
.p5_6 .wp-block-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
}

/* 左邊第一欄固定 */
.p5_1 .sticky-col,
.p5_3 .sticky-col,
.p5_5 .sticky-col,
.p5_6 .sticky-col {
  position: sticky;
  left: 0;
  z-index: 9;
}


.p5_1 .wp-block-table thead th.sticky-col,
.p5_3 .wp-block-table thead th.sticky-col,
.p5_5 .wp-block-table thead th.sticky-col,
.p5_6 .wp-block-table thead th.sticky-col {
  z-index: 11;
}

/* p9 */
.page.p9_1 table td:nth-of-type(1) {
  text-align: center;
}

.page.p9_1 table td:nth-of-type(2) {
  text-align: left;
}

.text_icon {
  display: inline-block;
  padding: 0 1%;
  width: 100%;
  max-width: 60px;
}

.text_icon2 {
  display: inline-block;
  padding: 0 1%;
  width: 100%;
  max-width: 45px;
}

.text_icon3 {
  display: inline-block;
  padding: 0 1%;
  width: 100%;
  max-width: 70px;
}

.page.p9_6 table img {
  margin: 0 auto;
}

.page.p9_6 table td:nth-of-type(3) {
  text-align: left;
}

.page.p9_6 table.map_mark td:nth-of-type(1) {
  text-align: center;
  color: #ffffff;
}

.page.p9_6 table.map_mark td:nth-of-type(2) {
  text-align: left;
}

.page.p9_14 table td:nth-of-type(3) {
  display: flex;
  justify-content: center;
}

.p9_4_menu {
  margin: 0 auto;
  text-align: center;
  display: flex;
  display: -ms-flexbox;
  justify-content: center;
  -ms-flex-pack: center;
}

.p9_4_link {
  width: 75%;
  height: auto;
  display: flex;
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: center;
  -ms-flex-pack: center;
}

.p9_4_list {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2;
  border: 2px solid hsl(39, 36%, 46%);
  border-radius: 8px;
  cursor: pointer;
  margin: 5px 5px;
  padding: 3px 15px;
  box-shadow: 3px 3px 13px rgba(0, 0, 0, 0.52);
}

.p9_4_list a {
  width: 100%;
  text-decoration: none;
  transition: all .3s;
}

.p9_4_list a:hover {
  color: #ffebb9;
  font-size: 1.4rem;
}






.page h2 {
  margin-bottom: 1.5rem;
  font-size: 1.9rem;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 247, 217, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.page h2:nth-of-type(1) {
  margin-top: 2.5rem;
}

.page h2:nth-of-type(n+2) {
  margin-top: 4rem;
}

.page h2::before,
.page h2::after {
  content: "";
  height: 2px;
  margin: 0 .5rem;
  background: linear-gradient(to right, rgba(109, 102, 91, 1) 30%, rgba(109, 102, 91, 0) 100%);
  flex: 1 1 auto;
}

.page h2::before {
  transform: scale(-1);
}

.page h2>span,
.page h3>span {
  --cutsize: 1.5rem;
  color: #2d2d2d;
  background: var(--page-color);
  background: -webkit-linear-gradient(-45deg, rgb(182, 166, 127) 20%, rgb(153, 137, 98) 100%);
  text-shadow: 1px 1px 1px rgba(255, 247, 217, 0.5);
  box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.2) inset;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
  clip-path: polygon(calc(100% - var(--cutsize)) 0, 100% 50%, calc(100% - var(--cutsize)) 100%, var(--cutsize) 100%, 0% 50%, var(--cutsize) 0);
}

.page h2>span {
  padding: .5rem 2rem;
}

.page h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.page h3>span {
  --cutsize: 1rem;
  padding: .1rem 1.5rem .25rem;
  background: var(--page-color);
  clip-path: polygon(calc(100% - var(--cutsize)) 0, 100% 50%, calc(100% - var(--cutsize)) 100%, var(--cutsize) 100%, 0% 50%, var(--cutsize) 0);
}

.page h3.att {
  font-size: 1.25rem;
}

.page h3.att>span {
  --cutsize: .6rem;
  padding: .05rem 1rem .1rem .8rem;
  background: var(--page-color);
  font-weight: 500;
  color: rgb(36, 36, 36);
  clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - var(--cutsize)), calc(100% - var(--cutsize)) 100%, 0% 100%);
}

.page h2 span,
.page h3.att span {
  display: inline-block;
}

.page.p5_3 table td:nth-of-type(1),
.page.p6_3 table td:nth-of-type(1) {
  white-space: nowrap;
}



/* p6
天品 → class="grade9"
地品 → class="grade8"
玄品 → class="grade7"
黃品 → class="grade6"
絕品 → class="grade5"
極品 → class="grade4"
上品 → class="grade3"
良品 → class="grade2"
凡品 → class="grade1"
 */
.page table td.grade1 {
  background-color: #d7d7d7;
}

.page table td.grade2 {
  background-color: #d1dbcd;
}

.page table td.grade3 {
  background-color: #cfd8e5;
}

.page table td.grade4 {
  background-color: #dfcfd6;
}

.page table td.grade5 {
  background-color: #cccae0;
}

.page table td.grade6 {
  background-color: #dad7bd;
}

.page table td.grade7 {
  background-color: #e6b8bf;
}

.page table td.grade8 {
  background-color: #ddc79f;
}

.page table td.grade9 {
  background-color: #b0e6e4;
}

.page.p6_3 table {
  font-size: 1rem;
}





@media screen and (max-width:430px) {

  /* p5-p6 */
  .page table thead {
    font-size: 1.1rem;
  }

  .page .content p,
  .page .content ul li {
    font-size: 1rem;
  }

  .page h2 {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  .page h2>span {
    padding: .2rem 1.5rem;
  }

  .page h3 {
    font-size: 1.2rem;
  }

  .page table thead {
    font-size: 1rem;
  }


  /*     .page.p6_3 table thead{display:none;}

    .page.p6_3 table tbody tr,
    .page.p6_3 table tbody td{ display: block;}

    .page.p6_3 table tbody tr{ margin-bottom:1rem !important;}

    .page.p6_3 table tbody td{
		width:100% !important; padding:0;
		display:flex; justify-content:stretch; align-items: center;
	} 
    .page.p6_3 table tbody tr>td:not(:nth-last-of-type(1)){border-bottom: 0;}
    
    .page.p6_3 table tbody td>span,.page.p6_3 table tbody td::before{padding:.75rem;}

    .page.p6_3 table tbody td::before{
        width:25%; background-color: var(--th-bgcolor); color:#fff;
    }
    .page.p6_3 table tbody td>span{padding-left: 1rem;}

    .page.p6_3 table tbody>tr>td:nth-of-type(1)::before{ content:"階級";}
    .page.p6_3 table tbody>tr>td:nth-of-type(2)::before{ content:"召喚名稱";}
    .page.p6_3 table tbody>tr>td:nth-of-type(3)::before{ content:"召喚機率";}
    .page.p6_3 table tbody>tr>td:nth-of-type(4)::before{ content:"上品";}
    .page.p6_3 table tbody>tr>td:nth-of-type(5)::before{ content:"極品";}
    .page.p6_3 table tbody>tr>td:nth-of-type(6)::before{ content:"絕品";} */

}