.mrk {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  @media screen and (max-width:800px) {
    display: block;
  }
  .mrk_out_wrp {
    border: 1px solid var( --cmnbdr02 );
    padding: 15px;
    width: 50%;
    overflow-y: auto;
    height: calc( 100svh - 188px );
    @media screen and (max-width:800px) {
      width: auto;
      margin-bottom: 15px;
      height: calc( 500px );
    }
    #mrk_out {
      margin-top: 0;
    }
    section {
      &:first-of-type {
        margin-top: 0;
      }
    }
  }
}
.editor {
  width: 50%;
  @media screen and (max-width:800px) {
    width: auto;
    position: relative;
  }
  textarea {
    height: calc( 100svh - 300px );
    tab-size: 4;
    margin-bottom: 20px;
    @media screen and (max-width:800px) {
      height: auto;
      font-size: 1.1rem;
      field-sizing: content;
    }
  }

  #result {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 0;
  }
  .button_area {
    font-size: 0;
    @media screen and (max-width:800px) {
      position: sticky;
      bottom: 10px;
      margin-right: 65px;
      margin-left: 0;
    }
    button {
      min-width: 2.4em;
      margin-right: 5px;
      font-size: 1.1rem;
      vertical-align: middle;
      text-align: center;
      margin-bottom: 10px;
      line-height: 1.61;
      background: var( --bs-gray-600 );
      &:before {
        display: inline-block;
        font-family: 'Material Symbols Rounded';
        text-decoration: none;
        font-weight: 500;
        line-height: 1;
        font-size: 2rem;
      }
      &#inputImg {
        font-size: 0;
        padding: 8px 6px 6px;
        &:before {
          content: '\e3f4';
        }
      }
      &#inputcode {
        font-size: 0;
        padding: 8px 6px 6px;
        &:before {
          content: '\f84d';
        }
      }
      &#saveMemo {
        font-size: 0;
        padding: 8px 6px 6px;
        background: var( --bs-green );
        &:before {
          content: '\e161';
        }
      }
      &#showHtml {
        font-size: 0;
        padding: 8px 6px 6px;
        background: var( --bs-blue );
        &:before {
          content: '\eb7e';
        }
      }
      &#reloadMemo {
        font-size: 0;
        padding: 8px 6px 6px;
        background: var( --bs-orange );
        &:before {
          content: '\e5d5';
        }
      }
    }
  }
}
#html_bassui {
  width: 100%;
  max-width: 700px;
}




.md_file_list {
  font-size: 1.05rem;
  margin-bottom: 15px;
  a {
    vertical-align: top;
    display: inline-block;
    text-decoration: none;
  }
  ul {
    margin-bottom: 0;
    list-style-type: none;
    padding-left: 1rem;
  }
  li {
    line-height: 1.2;
  }
  .dir_list {
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
    &.dir_open {

    }
  }
  .file_icon , .dir_icon {
    display: inline-block;
    vertical-align: top;
    font-size: .95rem;
    &.active {
      color: var( --linktxt_hovercolor );
      position: relative;
      padding-left: 10px;
      &:before {
        position: absolute;
        display: inline-block;
        content: '\e5df';
        font-family: 'Material Symbols Rounded';
        vertical-align: -6px;
        font-size: 1.6rem;
        text-indent: -0.6rem;
        width: 0.5rem;
        text-decoration: none;
        margin-right: 2px;
        line-height: 1;
        left: 0;
        top: 50%;
        margin-top: -0.85rem;
      }
    }
    .ttl {
      &:before {
        font-family: 'Material Symbols Rounded';
        vertical-align: -2px;
        font-size: 1.1rem;
        text-decoration: none;
        margin-right: 3px;
      }
    }
  }
  .file_icon {
    .ttl {
      &:before {
        content: '\ef42';
      }
    }
  }
  .dir_icon {
    cursor: pointer;
    color: var( --linktxt_color );
    display: block;
    padding: 15px 0;
    &:hover {
      color: var( --linktxt_hovercolor );
    }
    .ttl {
      &:before {
        content: '\e2c7';
      }
    }
  }
  .date {
    display: block;
    font-size: 74%;
    line-height: 1.7;
    margin-left: 0.1rem;
  }
  .ttl {
    margin-bottom: .1rem;
    display: inline-block;
  }
  .file_name {
    display: block;
    font-size: 74%;
    line-height: 1.4;
    margin-left: 0.1rem;
  }
}

.md_link {
  display: inline-block;
  position: sticky;
  top: 15px;
  @media screen and (max-width:750px) {
    position: static;
  }
  p {
    margin: 0;
    text-align: left;
    display: inline-block;
    a {
      display: inline-block;
      background: var(--bs-primary);
      padding: .5em;
      border-radius: 5px;
      text-decoration: none;
      font-weight: 500;
      &:before {
        display: inline-block;
        font-family: 'Material Symbols Rounded';
        font-size: 120%;
        text-decoration: none;
        margin-right: .15em;
        content: '\f88c';
        line-height: 1;
        vertical-align: -4px;
      }
    }
  }
}