* {
    padding: 0;
    margin: 0;
}

header {
    padding: 8px;
    border-bottom: 3px #000 solid;
}

header .logo {
    font-size: 24px;
    font-weight: bold;
}

html {
    position: relative;
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;
    max-width: 100%;
    display: grid;
    grid-template-rows: min-content auto;
}

.main {
    display: grid;
    grid-template-columns: min-content auto min-content;
}

.outline {
    border-right: 1px #000 solid;
    display: grid;
    grid-template-columns: 0 min-content;
}

.outline.expanded {
    grid-template-columns: 300px min-content;
}

.outline .expand-btn {
    background-color: transparent;
    border: none;
    display: block;
    margin: auto;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
}

.outline .outline-wrap {
    position: relative;
    overflow-x: hidden;
}

.outline .outline-list-body {
    box-sizing: border-box;
    position: absolute;
}

.outline.expanded .outline-list-body {
    padding: 8px;
}

.outline .outline-list-body a {
    display: block;
    cursor: pointer;
}

.outline .outline-list-body a:hover {
    background-color: #f1eeee;
}

.outline .outline-list-body li > li {
    margin-left: 20px;
}

.outline .tools {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.outline .expand-btn {
    width: 40px;
    height: 40px;
}

.outline .expand-btn:hover {
    background-color: #dcdcdc;
}

.outline .tools .tools-btn button, .outline .tools .tools-btn a {
    display: block;
    box-sizing: border-box;
    line-height: 0;
    border: 0;
    background-color: transparent;
    padding: 4px;
}

.outline .tools .tools-btn button:hover, .outline .tools .tools-btn a:hover {
    background-color: #dcdcdc;
}

.outline .tools .tools-btn img {
    width: 32px;
}

.viewer-wrap {
    position: relative;
    max-height: 100%;
}

.tool-bar {
    width: 32px;
    border-left: 1px #000 solid;
}

.viewer-wrap .markdown-previewer-body {
    position: absolute;
    box-sizing: border-box;
    /* min-width: 800px; 640 + 80 + 80 */
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding-left: 80px;
    padding-right: 80px;
}

/* 平板 */
@media screen and (max-width: 1200px) {
    .viewer-wrap .markdown-previewer-body {
        /* min-width: 720px; 640 + 40 + 40 */
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* 大手機 */
@media screen and (max-width: 800px) {
    .viewer-wrap .markdown-previewer-body {
        /* min-width: 680px; 640 + 20 + 20 */
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 小手機 */
@media screen and (max-width: 576px) {
    .main {
        grid-template-rows: min-content auto min-content;
        grid-template-columns: 1fr;
    }

    .outline {
        border-left: 0;
        border-bottom: 1px #000 solid;
        grid-template-columns: 1fr;
        grid-template-rows: 0 min-content;
    }

    .outline.expanded {
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content;
    }

    .outline .outline-list-body {
        position: relative;
    }

    .outline .tools {
        flex-direction: row;
    }

    .viewer-wrap .markdown-previewer-body {
        font-size: 16px;
        position: absolute;
        box-sizing: border-box;
        /* min-width: 480px; */
        max-width: 100%;
        max-height: 100%;
        overflow-y: auto;
        padding-left: 8px;
        padding-right: 8px;
    }
}