#reciting-list-screen .reciting-list-container {
            max-width: var(--app-column, 700px);  /* 읽기 기둥(base.html) */
            margin: 0 auto;
            padding: 20px 20px 0;
            min-height: 90vh;
        }

        #reciting-list-screen .fab-create {
            position: fixed;
            bottom: calc(var(--bottom-nav-occupied) + 14px);
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: #800020;
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(128, 0, 32, 0.24);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            z-index: 100;
            font-size: 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #reciting-list-screen .fab-create:hover {
            transform: scale(1.1);
            background-color: #600018;
            box-shadow: 0 6px 20px rgba(96, 0, 24, 0.3);
            color: white;
            text-decoration: none;
        }

        #reciting-list-screen .reciting-grid {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* 날짜 구분선. 카드마다 날짜를 반복하는 대신 날짜가 바뀌는 자리에만
           한 줄 넣는다. 아래 day-head 안에 들어 있고, day-head 가 그리드의
           직계 자식이라 위아래 24px 간격을 카드와 똑같이 받는다. */
        #reciting-list-screen .date-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #8a8f94;
            font-size: 0.78rem;
            white-space: nowrap;
        }
        #reciting-list-screen .date-divider::before,
        #reciting-list-screen .date-divider::after {
            content: "";
            flex: 1 1 auto;
            height: 1px;
            background: #d1d1d6;
        }

        /* 날짜 구분선과 그날의 업로드 게이지를 한 덩어리로 묶는다. 이 묶음이
           그리드의 직계 자식이라 위아래 간격은 카드와 같고, 안에서 구분선과
           게이지는 8px 로 붙는다. */
        #reciting-list-screen .day-head {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #reciting-list-screen .day-gauge {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        /* 알약 모양 바. 채움의 빛번짐이 잘리지 않도록 트랙에 overflow 를 두지 않는다. */
        #reciting-list-screen .day-gauge-bar {
            flex: 1 1 auto;
            height: 14px;
            border-radius: 999px;
            background: #e6e8ec;
        }
        /* 눈금·구획 없이 하나로 이어진 채움. 열릴 때 왼쪽에서 부드럽게 차오른다.
           도착 폭·불투명도는 요소 자신의 값이 정하므로 from 만 선언한다. 폭 0에서
           빛번짐 점이 먼저 튀지 않도록 불투명도도 0에서 시작한다. */
        #reciting-list-screen .day-gauge-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #b8f55a 0%, #5ff5d8 100%);
            box-shadow: 0 0 12px rgba(95, 245, 216, 0.55);
            animation: day-gauge-grow 0.6s ease-out;
        }
        @keyframes day-gauge-grow {
            from { width: 0; opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            #reciting-list-screen .day-gauge-fill {
                animation: none;
            }
        }
        #reciting-list-screen .day-gauge-percent {
            flex: 0 0 auto;
            min-width: 3.4em;
            text-align: right;
            color: #1d1d1f;
            font-size: 1.05rem;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }
        /* % 기호만 더 작고 옅게 둔다. */
        #reciting-list-screen .day-gauge-unit {
            margin-left: 1px;
            font-size: 0.72em;
            color: #9a9ea3;
        }
        /* 목표를 채운 날은 빛번짐을 더 진하게 하고 숫자를 굵게 한다. 색은 그대로다. */
        #reciting-list-screen .day-gauge.is-done .day-gauge-fill {
            box-shadow: 0 0 18px rgba(95, 245, 216, 0.85);
        }
        #reciting-list-screen .day-gauge.is-done .day-gauge-percent {
            font-weight: 700;
        }

        #reciting-list-screen .reciting-card {
            background: white;
            border-radius: 8px;
            /* overflow:hidden 을 두지 않는다. 더보기 메뉴가 카드 밖으로
               내려오는데, 잘라내면 '삭제'가 반쯤 가린 채 나온다. 안의 썸네일은
               자기 border-radius 를 갖고 있어 이것 없이도 모양이 유지된다. */
            border: 1px solid #e5e5ea;
        }

        #reciting-list-screen .card-body {
            padding: 0.5rem;
        }

        #reciting-list-screen .content-row {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            width: 100%;
        }

        #reciting-list-screen .audio-section {
            flex: 1;
            min-width: 0;
            /* 제목을 닉네임 아래에서 시작시키려면 아바타 폭만큼 들여써야 한다.
               두 값을 여기 두고 아래에서 가져다 쓰면, 아바타를 키웠을 때
               제목 들여쓰기가 따라온다 — 숫자를 두 군데 적으면 어긋난다. */
            --rec-avatar: 20px;
            --rec-label-gap: 3px;
        }

        #reciting-list-screen .audio-label {
            font-size: 0.75rem;
            color: #6c757d;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: var(--rec-label-gap);
        }

        /* 제목. 닉네임·시각 줄과 재생바 사이에 한 줄로 놓는다.
           오른쪽에 붙이지 않는 이유: 썸네일이 달린 카드는 그 줄의 남는 폭이
           절반 이하라 대부분 잘린다. 한 줄을 쓰면 폭에 관계없이 같게 보인다.
           그래도 아주 긴 제목은 말줄임한다 — 카드 높이가 제목마다 달라지면
           목록이 들쭉날쭉해진다. */
        #reciting-list-screen .reciting-title {
            font-size: 0.82rem;
            font-weight: 600;
            color: #1d1d1f;
            /* 닉네임 아래에서 시작하도록 아바타 폭만큼 들여쓴다. 아바타 왼쪽
               끝에 맞춰 두면 닉네임보다 23px 왼쪽으로 튀어나와 보인다.
               재생줄은 그대로 둔다 — 아바타·버튼이 같은 선을 이룬다. */
            margin: 4px 0 6px calc(var(--rec-avatar) + var(--rec-label-gap));
            /* base.html의 .content-container가 text-align:center라 상속된다. */
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ── 이름줄 ─────────────────────────────────────────── */
        #reciting-list-screen .rec-avatar {
            width: var(--rec-avatar); height: var(--rec-avatar);
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        #reciting-list-screen .rec-name { font-size: 0.8rem; }
        #reciting-list-screen .rec-time { font-size: 0.6rem; }

        /* ── 더보기 ─────────────────────────────────────────── */
        #reciting-list-screen .rec-menu {
            position: relative;
            margin-left: auto;      /* 이름·시각을 왼쪽에 두고 끝으로 민다 */
            flex-shrink: 0;
        }
        #reciting-list-screen .rec-menu-btn {
            position: relative;
            width: 26px; height: 26px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: #9aa0a6;
            line-height: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }
        /* 보이는 크기는 26px 로 두고 누르는 면만 44px 로 넓힌다. 버튼 자체를
           키우면 이름줄 높이가 그만큼 밀려 카드가 두꺼워진다. */
        #reciting-list-screen .rec-menu-btn::after {
            content: "";
            position: absolute;
            inset: -9px;
        }
        #reciting-list-screen .rec-menu-btn:hover { color: #007aff; }
        #reciting-list-screen .rec-menu-btn[aria-expanded="true"] {
            color: #007aff;
            background: rgba(0, 122, 255, 0.1);
        }

        /* 프로필 화면의 설정 드롭다운과 같은 모양으로 맞춘다. */
        #reciting-list-screen .rec-menu-sheet {
            position: absolute;
            top: 34px;
            right: 0;
            min-width: 132px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
            overflow: hidden;
            z-index: 60;
            text-align: left;
        }
        #reciting-list-screen .rec-menu-sheet[hidden] { display: none; }
        /* 아이콘 + 글자. 앱의 다른 수정·삭제는 이모지를 쓰는데, 🗑 은 변이
           선택자가 붙은 것과 아닌 것이 섞여 있어 화면마다 흑백/컬러로 갈린다.
           인라인 SVG 는 그 문제가 없고 currentColor 로 글자색을 따라간다. */
        #reciting-list-screen .menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 12px 16px;
            background: none;
            border: none;
            font-size: 0.88rem;
            color: #333;
            text-align: left;
            cursor: pointer;
            font-family: inherit;
            -webkit-tap-highlight-color: transparent;
        }
        #reciting-list-screen .menu-item:hover { background: #f5f5f7; }
        #reciting-list-screen .menu-item.danger { color: #ff3b30; }
        /* 선으로 그린다. 색을 채우면 휴지통 안쪽 홈을 흰색으로 덮어야 하는데,
           그 흰색이 hover 배경(#f5f5f7) 위에서 어긋나 보인다. */
        #reciting-list-screen .menu-ico {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.3;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #reciting-list-screen .menu-item .menu-label { white-space: nowrap; }
        #reciting-list-screen .menu-divider { height: 1px; background: #f0f0f0; }

        /* ── 재생기 ─────────────────────────────────────────── */
        #reciting-list-screen .rec-player {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 2px;
        }
        #reciting-list-screen .rec-play {
            width: 44px; height: 44px;      /* 권장 터치 영역 */
            flex-shrink: 0;
            border: none;
            border-radius: 50%;
            background: #1d1d1f;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease;
        }
        #reciting-list-screen .rec-play:hover { background: #000; }
        #reciting-list-screen .rec-play .ico-play { margin-left: 2px; }   /* 삼각형은 시각적으로 왼쪽으로 쏠린다 */

        /* 어느 아이콘을 그릴지는 버튼에 붙은 상태가 정한다.
           예전에는 JS 가 svg.hidden = true/false 로 감췄는데, hidden 은
           HTMLElement 에만 있는 속성이라 SVG 에 대입해도 DOM 속성이 붙지
           않는다. 그래서 눌러도 ▶ 가 그대로였다(aria-label 만 바뀌었다). */
        #reciting-list-screen .rec-play .ico-pause { display: none; }
        #reciting-list-screen .rec-play.playing .ico-play { display: none; }
        #reciting-list-screen .rec-play.playing .ico-pause { display: block; }

        /* 누를 면은 넓게, 보이는 선은 얇게. 위아래 여백이 손가락을 받는다. */
        /* 누를 면은 28px, 보이는 선은 4px. 위아래 여백이 손가락을 받는다. */
        #reciting-list-screen .rec-bar {
            flex: 1;
            min-width: 0;
            height: 28px;
            position: relative;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        #reciting-list-screen .rec-bar::before {
            content: "";
            position: absolute;
            left: 0; right: 0; top: 50%;
            transform: translateY(-50%);
            height: 4px;
            background: #e5e5ea;
            border-radius: 2px;
        }
        #reciting-list-screen .rec-bar-fill {
            position: absolute;
            left: 0; top: 50%;
            transform: translateY(-50%);
            height: 4px;
            width: 0%;
            background: #007aff;
            border-radius: 2px;
            pointer-events: none;
        }
        #reciting-list-screen .rec-bar:focus-visible {
            outline: 2px solid #007aff;
            outline-offset: 4px;
        }
        #reciting-list-screen .rec-time {
            font-size: 0.72rem;
            color: #9aa0a6;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;
            min-width: 6.4em;
            text-align: right;
        }

        #reciting-list-screen .default-profile {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
        }

        #reciting-list-screen .meditation-preview {
            flex: 0 0 80px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 카드 높이를 채우고 그 안에서 가운데로 모은다.
               제목이 있는 카드는 왼쪽 열(닉네임·제목·재생바)이 더 길어지는데,
               이 열이 위에 붙어 있으면 남는 높이가 전부 버튼 아래로 몰려
               20px 가까이 비어 보였다. 가운데로 모으면 위아래로 나뉜다. */
            align-self: stretch;
            justify-content: center;
        }

        /* 썸네일은 사진 비율과 무관하게 같은 크기로 잘라 넣는다.
           예전에는 마크업에 style="width:100%; height:auto;"가 붙어 있어 이
           height를 덮었고, 세로로 긴 사진이면 썸네일이 70×183px까지 늘어나
           카드 하나가 다른 카드의 2~3배가 됐다(78~104px 대 218px).
           object-fit:cover가 비율을 유지한 채 가운데를 잘라내므로 찌그러지지
           않는다. */
        #reciting-list-screen .meditation-preview img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #dee2e6;
        }

        #reciting-list-screen .meditation-preview video {
            width: 80px;
            height: 60px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
        }

        #reciting-list-screen .meditation-label {
            font-size: 0.65rem;
            color: #6c757d;
            margin-top: 3px;
            line-height: 1.1;
            align-self: center;
        }

        /* 수정·삭제 버튼. 수정이 왼쪽, 삭제가 오른쪽이다. */
                
                #reciting-list-screen .pagination-container {
            text-align: center;
            margin: 2rem 0;
        }

        #reciting-list-screen .pagination {
            display: inline-flex;
            gap: 0.3rem;
        }

        #reciting-list-screen .page-link {
            padding: 6px 12px;
            border-radius: 15px;
            text-decoration: none;
            color: #007aff;
            border: 1px solid #dee2e6;
            transition: all 0.2s ease;
            font-size: 0.8rem;
        }

        #reciting-list-screen .page-link:hover {
            background-color: #007aff;
            color: white;
            text-decoration: none;
        }

        #reciting-list-screen .page-link.current {
            background-color: #007aff;
            color: white;
            border-color: #007aff;
        }

        /* 모달 스타일은 static/style.css 의 .modal-overlay 규칙을 쓴다.
           예전에는 이 파일이 전체를 복붙해 들고 있었다(#123 이 detail 5곳만
           정리하면서 목록 페이지인 여기는 빠졌다). 제목 수정 모달의 저장
           버튼만 공용에 없는 색이라 남긴다. */
        #reciting-list-screen .modal-btn-save {
            background: #007aff;
            color: white;
        }

        @media (max-width: 700px) {
            #reciting-list-screen .reciting-list-container {
                padding-top: 10px;
            }

            #reciting-list-screen .content-row {
                gap: 8px;
            }

            #reciting-list-screen .meditation-preview {
                flex: 0 0 70px;
            }

            #reciting-list-screen .meditation-preview img,
            #reciting-list-screen .meditation-preview video {
                width: 70px;
                height: 50px;
            }

            #reciting-list-screen .meditation-label {
                font-size: 0.6rem;
            }

        }