/* 가독성 모드 — 좁은 뷰포트(580px 이하, 스마트폰·DevTools 테스트) */

@media (max-width: 580px) {

    /* 토글 버튼 (A) */
    #readability-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        margin-bottom: 0px;
        border: none;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.30);
        color: #fff;
        font-family: KiaSignature, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        position: fixed;
        right: 10px;
        bottom: 28px;
        z-index: 3;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.3s, transform 0.2s;
    }

    #readability-toggle:active {
        background-color: rgba(0, 0, 0, 0.95);
        transform: scale(0.95);
    }

    #readability-toggle.active {
        background-color: rgba(0, 0, 0, 0.8);
    }

    #readability-toggle[hidden] {
        display: none !important;
    }

    /* 가독성 모드 활성화 — 하단 내비(92px) 위 고정 UI */
    html.readability-mode #readability-toggle,
    body.readability-mode #readability-toggle {
        bottom: 86px;
    }

    html.readability-mode #lang,
    body.readability-mode #lang {
        left: 12px;
        right: auto;
        bottom: 86px;
        z-index: 3;
        background: rgb(0 0 0 / 80%) !important;
    }

    html.readability-mode #about-button,
    body.readability-mode #about-button {
        bottom: 88.5px;
        left: 16px;
        opacity: 1;
        display: none !important;
    }

    html.readability-mode footer,
    body.readability-mode footer {
        display: none !important;
    }

    /* 싱글: #single-wrapper 170px 스크롤 전 UI 숨김·클릭 방지 */
    html.readability-mode body.open-single:not(.readability-ui-visible) nav#single-nav,
    html.readability-mode body.open-single:not(.readability-ui-visible) #lang,
    html.readability-mode body.open-single:not(.readability-ui-visible) #readability-toggle,
    body.readability-mode.open-single:not(.readability-ui-visible) nav#single-nav,
    body.readability-mode.open-single:not(.readability-ui-visible) #lang,
    body.readability-mode.open-single:not(.readability-ui-visible) #readability-toggle {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    html.readability-mode body.open-single nav#single-nav,
    html.readability-mode body.open-single #lang,
    html.readability-mode body.open-single #readability-toggle,
    body.readability-mode.open-single nav#single-nav,
    body.readability-mode.open-single #lang,
    body.readability-mode.open-single #readability-toggle {
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    html.readability-mode body.open-single.readability-ui-visible nav#single-nav,
    html.readability-mode body.open-single.readability-ui-visible #lang,
    html.readability-mode body.open-single.readability-ui-visible #readability-toggle,
    body.readability-mode.open-single.readability-ui-visible nav#single-nav,
    body.readability-mode.open-single.readability-ui-visible #lang,
    body.readability-mode.open-single.readability-ui-visible #readability-toggle {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html.readability-mode body.open-single.readability-ui-visible nav#single-nav,
    body.readability-mode.open-single.readability-ui-visible nav#single-nav {
        z-index: 100;
    }

    /* 싱글 본문(#single-container z-index:5) 위에 고정 UI 표시 */
    html.readability-mode body.open-single #lang,
    body.readability-mode.open-single #lang,
    html.readability-mode body.open-single #readability-toggle,
    body.readability-mode.open-single #readability-toggle {
        z-index: 13;
    }

    /*
     * #index-container: #menu·#vol-nav를 컨테이너 하단으로 이동 (슬라이드와 함께 이동)
     * 일반 모드와 같이 vol-nav가 menu(92px) 중앙에 겹침 — 상단은 margin-top:-92px, 하단은 margin-top:-92px로 menu 위에 올림
     */
    html.readability-mode #index-container,
    body.readability-mode #index-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        padding-bottom: 72px;
    }

    html.readability-mode #index-container > .volume,
    body.readability-mode #index-container > .volume {
        order: 1;
    }

    html.readability-mode nav#menu,
    body.readability-mode nav#menu {
        order: 2;
        position: sticky;
        bottom: 10px;
        top: auto;
        margin-top: auto;
        margin-bottom: 0;
        margin-left: -10px;
        width: calc(100% + 20px);
        z-index: 98;
        border: 1px solid rgb(0 0 0 / 20%);
        border-radius: 7px;
        box-shadow: 0 4px 5px rgb(0 0 0 / 25%);
        /* background-color: #fff !important; */
        background: #ffffff;
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0.85) 95%, rgba(255, 255, 255, 0.9) 100%) !important;
    }

    html.readability-mode nav#menu ul,
    body.readability-mode nav#menu ul {
        height: 68px;
    }

    html.readability-mode nav#menu li,
    body.readability-mode nav#menu li {
        font-size: 18px;
        line-height: 25px;
        margin: 23px 20px;
    }

    html.readability-mode nav#vol-nav,
    body.readability-mode nav#vol-nav {
        order: 2;
        position: sticky;
        bottom: 10px;
        top: auto;
        width: 220px;
        left: calc(50% - 110px);
        padding: 0;
        margin: -92px 0 0;
        z-index: 999;
    }

    html.readability-mode nav#vol-nav select,
    body.readability-mode nav#vol-nav select {
        left: calc(50% - 60px);
        bottom: 10px;
    }

    /*
     * #single-container: #single-nav를 컨테이너 하단에 배치
     * absolute — #single-container 슬라이드와 함께 이동 (#menu와 동일 위치 역할)
     */
    html.readability-mode nav#single-nav,
    body.readability-mode nav#single-nav {
        top: auto;
        bottom: 10px;
        margin: 0 10px;
        width: calc(100% - 50px);
        padding: 0 15px;
        border: 1px solid rgb(0 0 0 / 20%);
        border-radius: 7px;
        box-shadow: 0 4px 5px rgb(0 0 0 / 25%);
        /* background-color: #fff !important; */
        background: #ffffff;
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0.85) 95%, rgba(255, 255, 255, 0.9) 100%) !important;
    }

    html.readability-mode nav#single-nav::before,
    body.readability-mode nav#single-nav::before {
        top: auto;
        bottom: 0;
        display: none !important;
    }

    html.readability-mode nav#single-nav ul,
    body.readability-mode nav#single-nav ul {
        height: 68px;
    }

    html.readability-mode nav#single-nav ul::before,
    body.readability-mode nav#single-nav ul::before {
        top: auto;
        bottom: 40%;
        background: linear-gradient(180deg, rgba(227, 223, 217, 0.00) 0%, #e3dfd9 100%);
        font-size: 14px;
    }

    html.readability-mode nav#single-nav li,
    body.readability-mode nav#single-nav li {
        margin: 23px 0;
        line-height: 22px;
    }

    html.readability-mode li#path,
    body.readability-mode li#path {
        margin: 2px 15px -2px !important;
        text-align: center;
        display: block;
    }

    html.readability-mode body.page li#path,
    body.readability-mode.page li#path {
        display: block;
    }

    html.readability-mode body.page li#path::before,
    html.readability-mode body.page li#path::after,
    body.readability-mode.page li#path::before,
    body.readability-mode.page li#path::after {
        display: none;
    }

    html.readability-mode li#path::after,
    body.readability-mode li#path::after {
        font-size: 14px;
    }

    html.readability-mode li#path .title,
    body.readability-mode li#path .title {
        line-height: 22px;
        font-size: 14px;
        text-align: center;
    }

    html.readability-mode #to-index::before, 
    body.readability-mode #to-index::before, 
    html.readability-mode #to-index::after, 
    body.readability-mode #to-index::after {
        height: 20px;
        top: calc(50% - 9px);
        border-radius: 1px;
    }

    html.readability-mode nav#single-nav li#block-nav-button,
    body.readability-mode nav#single-nav li#block-nav-button {
        display: block;
    }

    html.readability-mode #block-select-container,
    body.readability-mode #block-select-container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    html.readability-mode li#block-nav-button i,
    body.readability-mode li#block-nav-button i {
        position: relative;
        z-index: 0;
        pointer-events: none;
    }

    html.readability-mode #block-nav,
    body.readability-mode #block-nav {
        display: none !important;
        pointer-events: none;
    }

    html.readability-mode #content .note,
    body.readability-mode #content .note {
        padding: 15px 22px;
        border: none;
        border-bottom: 1px solid;
        font-size: 14px;
    }

    /* 가독성 향상 — 본문 */
    html.readability-mode #content,
    body.readability-mode #content {
        padding: 0px 0 112px;
        font-size: 18px;
        line-height: 1.9em;
        letter-spacing: 0.01em;
    }

    /* 이미지(figure)·임베드 영상 제외 블록 좌우 여백 */
    html.readability-mode #content > *:not(#content-cover):not(figure):not(.wp-block-image):not(.wp-block-embed):not(.wp-block-group),
    body.readability-mode #content > *:not(#content-cover):not(figure):not(.wp-block-image):not(.wp-block-embed):not(.wp-block-group) {
        margin-left: 17px;
        margin-right: 17px;
        max-width: calc(100% - 34px);
    }

    html.readability-mode #content blockquote,
    body.readability-mode #content blockquote,
    html.readability-mode #content .additional-note,
    body.readability-mode #content .additional-note,
    html.readability-mode #content .chapter-title,
    body.readability-mode #content .chapter-title,
    html.readability-mode #chapter-list,
    body.readability-mode #chapter-list,
    html.readability-mode #content :is(h1, h2, h3, h4, h5, h6),
    body.readability-mode #content :is(h1, h2, h3, h4, h5, h6),
    html.readability-mode #content p,
    body.readability-mode #content p,
    html.readability-mode #content .profile,
    body.readability-mode #content .profile {
        margin-left: 17px !important;
        margin-right: 17px !important;
        max-width: calc(100% - 34px) !important;
    }

    html.readability-mode #content > figure,
    body.readability-mode #content > figure,
    html.readability-mode #content > #content-cover *,
    body.readability-mode #content > #content-cover *,
    html.readability-mode #content > .wp-block-embed,
    body.readability-mode #content > .wp-block-embed,
    html.readability-mode #content .additional-note *,
    body.readability-mode #content .additional-note *,
    html.readability-mode #content .profile *,
    body.readability-mode #content .profile *,
    html.readability-mode #content .note p,
    body.readability-mode #content .note p,
    html.readability-mode #content .chapter-title p,
    body.readability-mode #content .chapter-title p,
    html.readability-mode #content blockquote p,
    body.readability-mode #content blockquote p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    html.readability-mode #content figure,
    body.readability-mode #content figure {
        margin: 2em 0 !important;
    }

    html.readability-mode #content-cover,
    body.readability-mode #content-cover {
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    html.readability-mode.page #content-cover,
    body.readability-mode.page #content-cover {
        height: 50vh;
    }

    html.readability-mode body:not(.page) #content-cover .cover,
    body.readability-mode:not(.page) #content-cover .cover {
        padding-top: 0 !important;
        height: 100%;
        min-height: 100%;
    }

    html.readability-mode body:not(.page) #content-cover video,
    body.readability-mode:not(.page) #content-cover video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    html.readability-mode #single-title,
    body.readability-mode #single-title {
        width: calc(100% - 40px);
        left: 20px;
        bottom: 25px;
    }

    html.readability-mode #content .additional-note h5,
    body.readability-mode #content .additional-note h5 {
        top: 1em;
    }

    html.readability-mode #content h3,
    body.readability-mode #content h3 {
        font-size: 1.125em;
    }
    

    /* 가독성 향상 — 인덱스 */
    html.readability-mode .post .title,
    body.readability-mode .post .title {
        font-size: 22px !important;
        line-height: 1.35;
    }

    html.readability-mode .post div.align-top,
    body.readability-mode .post div.align-top {
        font-size: 15px;
        line-height: 1.65;
        -webkit-line-clamp: 8;
    }

    html.readability-mode .post .excerpt,
    body.readability-mode .post .excerpt {
        line-height: 1.7;
    }

    html.readability-mode #single-title > .title,
    body.readability-mode #single-title > .title {
        font-size: 24px;
        line-height: 1.3;
    }

    html.readability-mode #chapter-list,
    body.readability-mode #chapter-list {
        font-size: 15px;
        line-height: 1.6;
    }

    .post .title {
        margin: 25px 0 15px !important;
    }

    html.readability-mode #vol-title::before, 
    body.readability-mode #vol-title::before, 
    html.readability-mode #vol-title::after, 
    body.readability-mode #vol-title::after, 
    html.readability-mode #vol-index li,
    body.readability-mode #vol-index li {
        height: 68px;
        line-height: 68px;

    }
}