html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}

body {
  margin: 0;
}

#main{
  margin: 0;
  padding: auto;
}

main {
  padding: 1em;
  gap: 1em;
}

main .main-article{
  display: flex;
  max-width: 1200px;
  margin: auto;
}


/* 中央本文 */
.main-article article {
  max-width: min(80%, 1000px);
  padding: 0 2em;
  word-wrap: break-word;
}
.main-article article h1,
.main-article article h2,
.main-article article h3,
.main-article article h4,
.main-article article h5,
.main-article article h6 {
  font-family: var(--global--font-article);
}
.main-article article h1 {
  font-size: 2em;
}
.main-article article h2 {
  font-size: 1.5em;
  margin-bottom: 1em;


  color: var(--global--key-color-dark);

  padding-top: calc(var(--header-height) + 0.2em);
  margin-top: calc(1.2em + var(--header-height) * -1);
}

.main-article article h2 span{
  padding-left: 0.5em;
  border-left: 5px solid rgb(164, 184, 189);
}
.main-article article h3 {
  font-size: 1.3em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: var(--global--key-color-dark);

  padding-top: calc(var(--header-height));
  margin-top: calc(1em + var(--header-height) * -1);
}
.main-article article h4, article h5, article h6 {
  font-size: 1.0em;
  margin-top: 1em;
  margin-bottom: 0em;

  padding-top: calc(var(--header-height));
  margin-top: calc(1em + var(--header-height) * -1);
}

.main-article hr{
  height: 1px;
  margin: 1em 0 0.5em 0;
  padding: 0;
  border: 0;
  background-color:rgb(169, 195, 207);
}
.main-article article p{
  margin-bottom: 1em;
  line-height: 1.5em;
}
.main-article code{
  padding: 0 0.25em;
  /*border: 1px solid #ccc;*/
  border-radius: 4px;
}
.main-article pre > code::before{
  border-bottom: none;
}
.main-article pre > code[data-title]::before{
  display: block;
  margin: -0.5em;
  padding: 0.5em;
  content: attr(data-title);
  font-family: var(--global--font-heading);
  letter-spacing: 1px;
  font-weight: 700;
  border-bottom : 1px solid var(--global--key-color);
  margin-bottom : 0.5em;
}



.main-article pre > code{
  padding: 1em;
  border: none;
}
.main-article a{
  color: var(--global--key-color-dark);
  text-decoration: none;
}
.main-article a:hover{
  text-decoration: underline;
}
.main-article pre{
  padding: 0;

}
pre {
  overflow-x: auto; /* コードブロックはスクロール可に */
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--global--key-color); 
  margin: 1em 0;
}
main table{
  width: auto;
  border-collapse: collapse;
  margin: 1em 0;
  
}
main table {
  table-layout: fixed;
  width: min(400px 100%);
}
@media (max-width: 768px){
  main table{
    width: 100%;
  }
  
  td{
    font-size: 85%;
  }
}
main table td{
  white-space: wrap;
  word-break: break-all;
}
main table tr:nth-child(odd) {
  background-color: var(--global--key-color-light);
}

main details{
  margin: 1em 0 1.5em;
  padding: 0 1em;
  border: 1px solid var(--global--key-color);
  border-radius: 4px;
  background-color: var(--global--key-color-light);
}
main details > pre{
  border: 1px solid var(--global--key-color);
}
main img{
  max-width: 100%;
  height: auto;
  margin: 1em 0 2em 0;
  padding: 0.2em;
  border: 1px solid #ccc;
}
.frontmatter{
  display: none;
}

.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
}
.tab-label {
  color: var(--global--color-background-white);
  background: rgb(196, 198, 204);
  margin-right: 0px;
  padding: 3px 15px;
  order: -1;
  margin: 0;
  transition: all 0.2s;
}
[theme="dark"] .tab-label{
  background-color: var(--global--key-color);
}
.tab-label:first-of-type {
  border-radius: 4px 0 0 0;
}
.tab-label:last-of-type {
  border-radius: 0 4px 0 0;
}
.tab-content {
  width: 100%;
  display: none;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
}
[theme="dark"] .tab-content{
  border-color: #515f5f;
}
.tab-content pre{
  margin: 0;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background:var(--global--key-color-dark);
}
.tab-switch:checked+.tab-label+.tab-content {
    display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}
.custom-block {
  border-left: 4px solid rgb(202, 202, 202);
  background:rgb(248, 248, 248);
  padding: 1em;
  margin: 1em ;
  border-radius: 6px;
}
.custom-block p {
  margin: 0;
}
.custom-block pre {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.custom-block{
  --infoblock-info: rgb(232, 239, 245);
  --infoblock-info-dark: rgb(122, 146, 178);
  --infoblock-note: #eeeeee;
  --infoblock-note-dark: #a1a1a1;
  --infoblock-warn: rgb(244, 245, 232);
  --infoblock-warn-dark: rgb(162, 167, 113);
  --infoblock-tip: rgb(232, 245, 235);
  --infoblock-tip-dark: rgb(126, 174, 136);
}
[theme="dark"] .custom-block{
  --infoblock-info: rgb(53, 63, 70);
  --infoblock-note: #474747;
  --infoblock-warn: rgb(65, 65, 51);
  --infoblock-tip: rgb(48, 64, 52);
}

.custom-block.note{
  border-left: 4px solid var(--infoblock-note-dark);
  background: var(--infoblock-note);
}
.custom-block.info{
  border-left: 4px solid var(--infoblock-info-dark);
  background: var(--infoblock-info);
}
.custom-block.warning{
  border-left: 4px solid var(--infoblock-warn-dark);
  background: var(--infoblock-warn);
}
.custom-block.tip{
  border-left: 4px solid var(--infoblock-tip-dark);
  background: var(--infoblock-tip);
}

.custom-block-header{
  margin: -0em 0;
  align-items: center;
}
.info > .custom-block-header{
  color: var(--infoblock-info-dark);
}
.note > .custom-block-header{
  color: var(--infoblock-note-dark);
}
.warning > .custom-block-header{
  color: var(--infoblock-warn-dark);
}
.tip > .custom-block-header{
  color: var(--infoblock-tip-dark);
}

.custom-block-icon{
  font-family: "Material Symbols Outlined";
  font-size: 1.5em;
  display: inline;
  vertical-align: middle;
}
.info > .custom-block-header > .custom-block-icon:before{
  content: "Info";
}
.note > .custom-block-header > .custom-block-icon:before{
  content: "Description";
}
.warning > .custom-block-header > .custom-block-icon:before{
  content: "Error";
}
.tip > .custom-block-header > .custom-block-icon:before{
  content: "Lightbulb";
}
.custom-block-title{
  margin-left: 0.5em;
  font-weight: bold;
  display: inline;
  vertical-align: middle;
}
code.language-kotlin::before,
code.language-swift::before{
  display: block;
  font-family: var(--global--font-heading);
  font-size: 0.9em;
  letter-spacing: 1px;
  color: var(--global--key-color-dark);
  border-bottom : 1px solid var(--global--key-color);
  margin-top : -2.5em;  
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}
code.language-swift::before{
  content: "Swift";
}
code.language-kotlin::before{
  content: "Kotlin";
}


/* mermaid */
.mermaid *{
  position: relative;
}
.mermaid path, .mermaid polygon{
  stroke: var(--global--key-color-dark) !important;
  fill: var(--global--key-color-light) ;
}
.mermaid .nodeLabel{
  font-family: var(--global--font-heading) !important;
  padding: 0.5em;
  color: var(--global--key-color-dark) !important;
}

.mermaid rect{
  fill: var(--global--key-color-light) !important;
  stroke: var(--global--key-color-dark) !important;
  stroke-width: 1px !important;
}
.mermaid rect.outer.title-state{
  height: 2.5em!important;
}
.mermaid .divider {
  display: none;
}
.mermaid .edgeLabel {
  display: inline-block;
  color: var(--global--key-color-dark) !important;
  background: var(--global--key-color-light) !important;
}
.mermaid .edgePaths path{
  color: var(--global--key-color-dark) !important;
  background: var(--global--key-color-light) !important;
}


main .excerpt-block{
  margin: 0.5em 0;
  padding: 1.5em;
  background-color: var(--global--key-color-light);
  border: 1px solid var(--global--key-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
main .excerpt-block .excerpt-source{
  display: block;
  font-family: var(--global--font-heading), sans-serif;
  font-weight: 700;
  color: var(--global--key-color-dark);
}


/* 右目次 */
main #doc-index {
  color:rgb(154, 215, 219);
  width: 280px;
  padding: 0.5em;
  font-size: 0.8em;
  border-left: 1px solid #ccc;
  border-radius: 0 8px 8px 0;
  align-self: stretch;

  position: sticky;
  top: 5em;
  align-self: flex-start;
  height: fit-content;

}
main #doc-index ul {
  word-break: break-all;
  list-style: none;
  padding-left: 1em;
  margin: 0;
}
main #doc-index a {
  text-decoration: none;
  color: var(--global--key-color-dark);
}
main #doc-index a:hover {
  text-decoration: underline;
}


main .prev-next-doc{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid var(--global--key-color);
}
main .prev-next-doc a{
  font-size: 0.85em;
  text-decoration: none;
  color : var(--global--key-color-dark);
  vertical-align: middle;
}
main .prev-next-doc a > .arrow-icon{
  font-family: "Material Symbols Outlined";
  font-size: 1em;
  vertical-align: middle;
}

/* code copy button */

#main pre > button.copy-btn{
  position: absolute;
  font-family: 'Material Symbols Outlined';
  padding: 0.05em 0.33em;
  top: 0.5em;
  right: 0.5em;
  background: transparent;
  color: var(--global--key-color-dark);
  
  border: 1px solid transparent;
  border-radius: 0.5em;
}
#main pre > button.copy-btn:hover{
  border: 1px solid var(--global--key-color-dark);
  background: var(--global--key-color-dark);
  color: var(--global--key-color-light);
}

@media (min-width: 769px) {
  main [name="doc-visibility"] + label{
    display: none ;
  }
}

@media (max-width: 768px) {
  body {
    margin-left: 0 !important; /* 左カラム分のスペースを削除 */
  }
  main {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  main [name="doc-visibility"] + label{
    display: block;
    position: fixed;
    font-family: var(--global--font-heading);
    font-size: 1em;
    font-weight: 600;

    bottom: 1rem;
    left: 0em;
    z-index: 100;
    background: var(--global--key-color-dark);
    color: var(--global--key-color);

    padding: 0.4em 0.6em 0.4em 2em;
    border-radius: 0 0.3em 0.3em 0;
    cursor: pointer;

    transition: all 0.2s ease-out;
  }
  main [name="doc-visibility"] + label:active{
    overlay: none;
  }
  
  /* doc tree menu */
  main > .tree-toggle-button::before{
    content: "Menu";
    vertical-align: middle;
  }
  main > .index-toggle-button::before{
    content: "Index";
    vertical-align: middle;
  }
  main > #doc-tree {
    width: 100% !important;
    font-size: 1em;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
  }
  #tree-button-open {
    display: none;
  }
  input[name="doc-visibility"]:checked + label {
    padding-left: calc(1em) !important;
  }
  input[name="doc-visibility"]:checked + label::before{
    content: none;
  }
  input[name="doc-visibility"]:checked + label #tree-button-open {
    display: block;
  }
  input[name="doc-visibility"]:checked + label #tree-button-closed {
    display: none;
  }
  #doc-tree-toggle:checked ~ #doc-tree {
    transform: translateX(0);
  }

    /* index menu */
  main #doc-index-toggle + label{
    bottom: 4rem;
  }
  #doc-content{
    min-width: 100%;
  }
  #doc-index{
    visibility: hidden;
    opacity: 0;
    font-size: 1.1em !important;
    display: block;
    position: fixed !important;
    border: 1px solid var(--global--key-color);
    border-left: none !important;
    padding: 2em 1.5em !important;

    top: var(--header-height) !important;
    left: 0;
    
    max-height: 70%;
    overflow-y: auto;

    background: #ffffffdd;
    transform: translateX(-10%);
    transition: all 0.2s ease-out;
  }
  [theme="dark"] #doc-index{
    background: #222222dd;
  }
  #doc-index li > ul > li{
    padding-left: 1em;
    border-left: 1px solid var(--global--key-color);
  }
  #doc-index li > ul > li:last-of-type{
    border-bottom: 1px solid var(--global--key-color);
    margin-bottom: 1em;  
  }

  :has(#doc-index-toggle:checked) #doc-index{
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

}