html, body {
    margin: 0;
    height: 100%;
    position: relative;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
        text-align: center;
    }
}

.container {
    width: 100%;
    max-width: 600px;
    padding-inline: 1rem;
    display: grid;
    gap: 1rem;

    & section { display: none; }

    &[data-step="0"] {
        grid-template-areas:
            "a"
            "b";
        #room-group {
            display: block;
            grid-area: a;
        }
        #info-group {
            display: block;
            grid-area: b;
        }
    }

    &[data-step="1"] {
        grid-template-areas:
            "a"
            "b"
            "c";
        #room-group {
            display: block;
            grid-area: a;
        }
        #wall-input-group {
            display: block;
            grid-area: b;
        }
        #wall-img-group {
            display: block;
            grid-area: c;
        }
    }
    &[data-step="2"] {
        grid-template-areas:
            "a"
            "b"
            "c"
            "d";
        #room-group {
            display: block;
            grid-area: a;
        }
        #wall-input-group {
            display: block;
            grid-area: b;
        }
        #shelf-input-group {
            display: block;
            grid-area: c;
        }
        #shelf-img-group {
            display: block;
            grid-area: d;
        }
    }
    &[data-step="3"] {
        grid-template-areas:
            "a a"
            "b c"
            "d d";
        #room-group {
            display: block;
            grid-area: a;
        }
        #wall-input-group {
            display: block;
            grid-area: b;
        }
        #shelf-input-group {
            display: block;
            grid-area: c;
        }
        #book-group {
            display: block;
            grid-area: d;
        }
    }
}

#room-group {
    textarea {
        width: 100%;
        resize: vertical;
    }
}

#room-input {
    min-block-size: 3lh;
    field-sizing: content;
}

#wall-img, #shelf-img {
    max-width: 100%;
}

#wall-input-group,
#wall-img-group,
#shelf-input-group,
#shelf-img-group,
#book-group
{
    margin: auto;
}

#book-group {
    ol {
        display: flex;
        flex-direction: column;

        list-style-type: decimal-leading-zero;
        list-style-position: inside;
        
        background-color: white;
        border: 1px solid black;
        padding: 5px;
        gap: 5px;

        li {
            border: 3px double black;
            padding: 5px;
            padding-top: 8px;
            a {
                counter-increment: book;
                font-size: 1.2rem;
                text-decoration: none;
                &::before { content:  "『"; }
                &::after { content: "』"; }
            }
            &:nth-child(8n+1):not(:first-child) {
                margin-top: 20px;
                counter-reset: book;
            }
        }
    }
}