.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding:
        var(--space-6)
        var(--space-4);
}


/* setup */

#setup-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}




.reader-card {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}


.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


.textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
}


.file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-height: 44px;
    cursor: pointer;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.setting-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}


.setting-group h3 {
  display: inline-block;
  width:100px;
    margin: 0;
    font-size: var(--font-size-md);
}


.setting-group label {
    display: inline-flex;
    width:100px;
    align-items: center;
    gap: var(--space-2);
}


button {
    min-height: 44px;
}


/* reader */

#reader-view {
    height: calc(100dvh - var(--header-height));
    display: flex;
    flex-direction: column;
}


.reader-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.reader-toolbar {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}


.reader-action-button {
    width: 80px;
    min-height: 40px;
    margin: 0;
}


.reader-container {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}


.reader-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: var(--space-8);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}


/* direction */

.reader-content.horizontal {
    writing-mode: horizontal-tb;
}


.reader-content.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}


/* font size */

.reader-content.font-small {
    font-size: 1rem;
}


.reader-content.font-medium {
    font-size: 1.2rem;
}


.reader-content.font-large {
    font-size: 1.5rem;
}


/* line height */

.reader-content.line-narrow {
    line-height: 1.3;
}


.reader-content.line-normal {
    line-height: 1.8;
}


.reader-content.line-wide {
    line-height: 2.2;
}


/* font */

.reader-content.font-sans {
    font-family: var(--font-family);
}


.reader-content.font-serif {
    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;
}


/* setting panel */

#setting-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
}


.reader-setting-card {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 320px;
    max-width: calc(100% - var(--space-4));
    padding: var(--space-6);
    z-index: 10;
}


.reader-setting-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}


.reader-setting-item h3 {
    margin: 0;
}


.reader-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}


/* progress */

#progress-display {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    padding:
        var(--space-2)
        var(--space-4);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    z-index: 3;
}


/* hidden */

[hidden] {
    display: none !important;
}


/* mobile */

@media (max-width:600px) {

    .container {
        padding:
            var(--space-4);
    }


    .reader-card {
        padding:
            var(--space-4);
    }


    .reader-content {
        padding:
            var(--space-4);
    }


    .file-button {
        width: 100%;
    }


    .reader-setting-card {
        width:
            calc(100% - var(--space-4));
    }


    .reader-content.font-large {
        font-size: 1.3rem;
    }

}