:root {
            --on-primary:#ffffff;
            --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            --icon-blue:#8ab4ff;
            --icon-violet:#c4a1ff;
            --icon-cyan:#67d8e9;
            --icon-pink:#ff91b7;
        }
        body { --on-primary:#0b1020; }
        body.light-mode {
            --bg-color: #e9edf3;
            --card-bg: #ffffff;
            --card-bg-hover: #f8fafc;
            --inset-bg: #eef1f6;
            --input-bg: #ffffff;
            --text-main: #0f172a;
            /* ⚠️ #6b7280 은 본문 배경(#e9edf3)에서 대비 4.39 로 WCAG AA(4.5) 에 못 미쳤다.
               「나만의 북로그」·「지금 백업」·「표지 켜짐」 같은 작은 보조 글자가 걸렸다.
               #5f6672 면 5.25(본문) / 5.78(카드) 로 넉넉하고 보조 글자 느낌도 유지된다. */
            --text-sub: #5f6672;
            --text-dim: #5f6672;
            --border-color: #d3d8e0;
            --divider: #e2e6ee;
            --primary: #5b8def;
            --primary-hover: #4b7be5;
            --primary-soft: #e9f0fe;
            --icon-blue:#2563eb;
            --icon-violet:#7c3aed;
            --icon-cyan:#0e7490;
            --icon-pink:#db2777;
            --green: #10b981;
            --green-soft: rgba(16,185,129,0.10);
            --amber: #d97706;
            --amber-soft: rgba(217,119,6,0.10);
            --red: #dc2626;
            --red-soft: rgba(220,38,38,0.08);
            --hm1: #e3e8f7;
            --hm2: #b4c0ed;
            --hm3: #7f93e4;
            --hm4: #4f67cc;
            --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.03);
            --shadow-strong: 0 4px 16px rgba(15,23,42,0.10);
        }
        *, *::before, *::after { box-sizing: border-box; }
        .ui-icon-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
        .ui-icon { display:inline-block; width:1em; height:1em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em; }
        .ui-icon:has(> use[href="#ui-icon-book"], > use[href="#ui-icon-book-open"], > use[href="#ui-icon-chart"], > use[href="#ui-icon-clock"], > use[href="#ui-icon-calendar"], > use[href="#ui-icon-database"], > use[href="#ui-icon-cloud"], > use[href="#ui-icon-device-mobile"], > use[href="#ui-icon-search"], > use[href="#ui-icon-home"], > use[href="#ui-icon-users"], > use[href="#ui-icon-quote"], > use[href="#ui-icon-rewind"], > use[href="#ui-icon-grid"]) { color:var(--icon-blue); }
        .ui-icon:has(> use[href="#ui-icon-sparkles"], > use[href="#ui-icon-palette"], > use[href="#ui-icon-moon"], > use[href="#ui-icon-shuffle"], > use[href="#ui-icon-film"], > use[href="#ui-icon-user"], > use[href="#ui-icon-edit"], > use[href="#ui-icon-dice"], > use[href="#ui-icon-gamepad"], > use[href="#ui-icon-key"], > use[href="#ui-icon-lock"], > use[href="#ui-icon-unlock"]) { color:var(--icon-violet); }
        .ui-icon:has(> use[href="#ui-icon-image"], > use[href="#ui-icon-image-off"], > use[href="#ui-icon-message"]) { color:var(--icon-cyan); }
        .ui-icon:has(> use[href="#ui-icon-heart"]) { color:var(--icon-pink); }
        .ui-icon:has(> use[href="#ui-icon-check"], > use[href="#ui-icon-shield"], > use[href="#ui-icon-sprout"], > use[href="#ui-icon-thumb-up"]) { color:var(--green); }
        .ui-icon:has(> use[href="#ui-icon-bell"], > use[href="#ui-icon-alert"], > use[href="#ui-icon-star"], > use[href="#ui-icon-trophy"], > use[href="#ui-icon-flame"], > use[href="#ui-icon-sun"], > use[href="#ui-icon-megaphone"], > use[href="#ui-icon-pause"]) { color:var(--amber); }
        .ui-icon:has(> use[href="#ui-icon-circle-x"], > use[href="#ui-icon-frown"], > use[href="#ui-icon-thumb-down"], > use[href="#ui-icon-trash"]) { color:var(--red); }
        body.modal-open {
            position: fixed;
            inset-inline: 0;
            width: 100%;
            overflow: hidden;
        }

        .header-area {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--divider);
        }
        h1 {
            margin: 0;
            font-size: 1.5em;
            font-weight: 600;
            letter-spacing: -0.025em;
            display: flex; align-items: center; gap: 10px;
        }
        h1 .tagline { font-size: 0.5em; font-weight: 400; color: var(--text-sub); letter-spacing: 0; }
        .header-brand h1 .brand-name { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
        .header-brand h1 .brand-name .ui-icon { width:1.1em; height:1.1em; }
        .stat-title .stat-icon { margin-right:4px; }
        .header-brand { display:flex; align-items:center; gap:10px; min-width:0; }
        .notification-button {
            position:relative;
            flex:0 0 44px;
            width:44px;
            min-width:44px;
            height:44px;
            min-height:44px;
            padding:0;
            overflow:visible;
            border-color:transparent;
            background:transparent;
            font-size:1.05em;
        }
        .notification-button:hover { color:var(--text-main); border-color:var(--border-color); }
        .notification-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
        .world-switch {
            display:inline-flex;
            min-width:64px;
            min-height:44px;
            align-items:center;
            justify-content:center;
            gap:5px;
            padding:6px 10px;
            border:1px solid var(--border-color);
            border-radius:999px;
            background:var(--card-bg);
            color:var(--text-sub);
            font:inherit;
            font-size:0.78em;
            font-weight:600;
            white-space:nowrap;
            cursor:pointer;
        }
        .world-switch:hover { color:var(--text-main); border-color:var(--primary); }
        .world-switch:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

        .stats-dashboard {
            margin-bottom: 14px;
        }
        .stats-card {
            display: grid;
            /* ⚠️ 100px 이면 320px 화면에서 3칸이 **세로로 쌓여** 284px 을 먹는다.
               그 탓에 기록이 한 권도 안 보인 채 시작한다(실측). 88px 이면 한 줄에 들어간다. */
            grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .stat-box {
            min-width: 0;
            padding: 18px;
            display: flex; flex-direction: column; justify-content: center; gap: 6px;
        }
        .stat-box + .stat-box { border-left: 1px solid var(--divider); }
        .stat-title {
            color: var(--text-sub);
            font-size: 0.74em;
            font-weight: 500;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .stat-value {
            min-width: 0;
            overflow-wrap: anywhere;
            font-size: 1.95em;
            font-weight: 600;
            letter-spacing: -0.025em;
            color: var(--text-main);
            line-height: 1.1;
        }
        .stat-value .unit {
            display: block;
            margin-top: 5px;
            font-size: 0.42em;
            font-weight: 400;
            color: var(--text-sub);
            letter-spacing: 0;
            line-height: 1.4;
        }

        .input-group {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 18px 20px;
            margin-bottom: 18px;
        }

        input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background-color: var(--input-bg);
            color: var(--text-main);
            outline: none;
            font-family: inherit;
            font-size: 0.92em;
            transition: border-color .12s, box-shadow .12s;
        }
        input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select {
            min-height: 44px;
        }
        /* 날짜 칸의 달력 아이콘: 기본 아이콘은 어두운 색이라 다크 테마에서 안 보였다(사장님 제보 2026-10-06).
           color-scheme 으로 아이콘을 테마에 맞는 색으로 그리고, 눌러야 하는 곳이라는 게 보이게 틀을 씌운다. */
        input[type="date"] { color-scheme: dark; }
        body.light-mode input[type="date"] { color-scheme: light; }
        input[type="date"]::-webkit-calendar-picker-indicator {
            width: 20px; height: 20px; padding: 6px; margin-left: 6px;
            border-radius: var(--radius-sm); cursor: pointer;
            background-color: var(--primary-soft);
            border: 1px solid var(--primary);
            opacity: 1;
        }
        input::placeholder, textarea::placeholder {
            color: var(--text-sub);
            opacity: 1;
        }
        input:focus, select:focus, textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-soft);
        }
        .add-input { flex: 1; min-width: 0; }
        .search-input {
            width: 100%;
            padding: 11px 14px;
            font-size: 0.95em;
            margin-bottom: 12px;
            border-radius: var(--radius);
        }

        button {
            padding: 8px 14px;
            min-height: 44px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-main);
            cursor: pointer;
            border-radius: var(--radius-sm);
            font-weight: 500;
            font-size: 0.88em;
            font-family: inherit;
            transition: background-color .12s, border-color .12s, transform .16s cubic-bezier(.34, 1.56, .64, 1);
        }
        button:hover { background: var(--card-bg-hover); }
        button:not(:disabled):active {
            transform:scale(.96);
            transition-timing-function:cubic-bezier(.3, 0, .7, .2);
        }
        @media (prefers-reduced-motion: reduce) {
            button:not(:disabled):active { transform:none; transition:none; }
        }
        .mtab { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-sub); font-size:0.82em; padding:8px 0; cursor:pointer; font-family:inherit; margin-bottom:-1px; }
        .mtab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
        .modal-tabs { display:flex; flex-shrink:0; border-bottom:1px solid var(--border-color); margin-bottom:14px; }
        #editModal > .modal-content,
        #webtoonModal > .modal-content,
        #webnovelModal > .modal-content,
        #movieModal > .modal-content,
        #animeModal > .modal-content,
        #videoModal > .modal-content,
        #gameModal > .modal-content,
        #boardgameModal > .modal-content {
            display:flex;
            flex-direction:column;
            height:min(640px, 90vh);
            height:min(640px, 90dvh);
            overflow:hidden;
        }
        html.visual-viewport-modal #editModal > .modal-content,
        html.visual-viewport-modal #webtoonModal > .modal-content,
        html.visual-viewport-modal #webnovelModal > .modal-content,
        html.visual-viewport-modal #movieModal > .modal-content,
        html.visual-viewport-modal #animeModal > .modal-content,
        html.visual-viewport-modal #videoModal > .modal-content,
        html.visual-viewport-modal #gameModal > .modal-content,
        html.visual-viewport-modal #boardgameModal > .modal-content {
            height:min(640px, calc(var(--app-vh) * 0.9));
        }
        /* 오버레이는 position:fixed라 레이아웃 뷰포트(키보드가 올라와도 안 줄어듦) 기준으로
           가운데 정렬된다. 콘텐츠 높이만 줄이면 중심이 그대로라 하단이 잘린다.
           보이는 영역 높이로 오버레이를 함께 줄여야 저장 버튼이 화면 안에 남는다. */
        html.visual-viewport-modal .modal-overlay {
            height:var(--app-vh);
        }
        .modal-scroll-body {
            flex:1 1 auto;
            width:100%;
            min-width:0;
            min-height:0;
            overflow-x:hidden;
            overflow-y:auto;
            padding-right:2px;
            scrollbar-gutter:stable;
        }
        .modal-scroll-body > .detail-tab-body {
            width:100%;
            min-width:0;
            overflow:visible;
        }
        .detail-tab-panel { min-width:0; }
        #basicPagesRow > div,
        .detail-field-row > div { min-width:0; }
        #basicPagesRow input,
        .detail-field-row input,
        .detail-field-row select { min-width:0; }
        .detail-tab-panel input[type="file"],
        .quote-text-input { min-width:0; max-width:100%; }
        .modal-scroll-body > .media-secondary-actions {
            display:flex; align-items:center; justify-content:flex-start; gap:2px;
            margin-top:12px; padding-top:8px; border-top:1px solid var(--border-color);
        }
        .modal-scroll-body > .media-secondary-actions button {
            min-width:44px; min-height:44px; padding-inline:10px;
            border-color:transparent; background:transparent; color:var(--text-dim); font-size:0.78em;
        }
        .modal-actions { flex-shrink:0; gap:8px; flex-wrap:nowrap; }
        .modal-actions > div:last-child { display:flex; justify-content:flex-end; gap:4px; flex-wrap:nowrap; }
        .media-detail-actions {
            display:grid !important;
            grid-template-columns:auto minmax(0, 1fr);
            align-items:center;
        }
        .media-detail-actions > span { display:none; }
        .media-detail-actions .media-delete-action { grid-column:1; grid-row:1; justify-self:start; }
        .media-detail-actions .media-primary-actions {
            grid-column:2; grid-row:1;
            display:flex; align-items:center; justify-content:flex-end; gap:4px; flex-wrap:nowrap;
        }
        .media-detail-actions .media-primary-actions .btn-save { margin-right:0; }
        .btn-add { background: var(--primary); color: var(--on-primary); border-color: var(--primary); white-space: nowrap; }
        @media (hover: hover) and (pointer: fine) {
            .btn-add:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
        }
        .btn-ghost { background: transparent; color: var(--text-sub); white-space: nowrap; }
        .search-candidate-item { flex-shrink: 0; white-space: normal; }
        .serial-search-candidate { border:1px solid var(--border-color); }
        .serial-search-candidate:hover, .serial-search-candidate:focus-visible { border-color:var(--primary); }
        .search-candidate-hint { flex-shrink:0; padding:8px 4px 2px; color:var(--text-dim); font-size:0.78em; text-align:center; }

        .controls-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 18px 0 14px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
        @media (min-width: 769px) {
            .controls-wrapper { justify-content: flex-start; }
            .controls-wrapper > .filter-primary-group { display: contents; }
            .controls-wrapper > .filter-primary-group > .filter-status { order: 1; }
            .controls-wrapper > .filter-more-panel { order: 2; }
            .controls-wrapper > .filter-primary-group > .filter-sort { order: 3; }
            .controls-wrapper > .filter-primary-group > .filter-owner { order: 4; }
            .controls-wrapper > .filter-primary-group > .filter-rating { order: 5; }
            .controls-wrapper > .filter-primary-group > .covers-toggle { order: 6; }
            .controls-wrapper > .filter-primary-group > .view-mode-toggle { order: 7; }
            .controls-wrapper > .filter-primary-group > [id$="SecretAccessBtn"] { order: 8; }
            .controls-wrapper > .filter-search-group { order: 9; margin-left: auto; }
            #bookFilterScope > .controls-wrapper > #bookMoreFilters { display:contents; }
            #bookFilterScope #statusFilter { order:1; }
            #bookFilterScope #categoryFilter,
            #bookFilterScope #finishedYearFilter,
            #bookFilterScope #rowsPerPageSelect,
            #bookFilterScope #resetFiltersBtn { order:2; }
            #bookFilterScope #sortOrder { order:3; }
            #bookFilterScope #bookOwnerFilter { order:4; }
            #bookFilterScope #bookRatingFilter { order:5; }
            #bookFilterScope .covers-toggle { order:6; }
            #bookFilterScope .view-mode-toggle { order:7; }
            #bookFilterScope #bookSecretAccessBtn { order:8; }
            #bookFilterScope .filter-search-group { order:9; margin-left:auto; }
        }
        .mobile-filter-toggle { display:none; }
        .filter-active-count {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:20px;
            height:20px;
            padding:0 6px;
            border-radius:999px;
            background:var(--primary);
            color:var(--on-primary);
            font-size:.76em;
            font-weight:700;
            line-height:1;
        }
        .selection-toolbar {
            display:flex;
            justify-content:flex-end;
            align-items:center;
            gap:8px;
            margin:0 0 14px;
        }
        .selection-actions {
            display:none;
            flex:1 1 100%;
            align-items:center;
            justify-content:flex-end;
            gap:8px;
            flex-wrap:wrap;
        }
        .selection-toolbar.active .selection-start { display:none; }
        .selection-toolbar.active .selection-actions { display:flex; }
        .selection-count {
            margin-right:auto;
            color:var(--text-sub);
            font-size:.86em;
            font-weight:650;
            white-space:nowrap;
        }
        .selection-toolbar button:disabled { opacity:.45; cursor:not-allowed; }
        .selection-delete { color:var(--red); border-color:var(--red); background:transparent; }
        .selection-secret { color:var(--primary); border-color:var(--primary); background:var(--primary-soft); }
        .custom-select {
            cursor: pointer;
            background-color: var(--card-bg);
            color: var(--text-main);
            border-radius: var(--radius-sm);
            padding: 10px;
            font-size: 0.85em;
        }
        .filter-search-group input[type="search"]::-webkit-search-cancel-button,
        .filter-search-group input[type="search"]::-webkit-search-decoration {
            -webkit-appearance:none;
            appearance:none;
            display:none;
        }
        .filter-owner { min-height:44px; }
        .filter-rating { min-height:44px; }
        .covers-toggle {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:112px;
            padding-inline:11px;
        }
        .covers-toggle[aria-pressed="false"] {
            color:var(--primary);
            border-color:var(--primary);
            background:var(--primary-soft);
        }
        .view-mode-toggle {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:104px;
            padding-inline:10px;
            white-space:nowrap;
        }

        .book-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 20px;
            margin-top: 18px;
            /* FAB의 56px 높이만큼 목록 안쪽에 확보한다. safe-area는 body/FAB에서만 계산한다. */
            padding-bottom: 56px;
        }
        /* 「페이지당 전체」에서 남은 카드를 이어 보일 때가 됐는지 재는 표지(js/app.js showPage). */
        .book-reveal-sentinel { grid-column: 1 / -1; height: 1px; }
        .empty-library {
            grid-column:1/-1;
            text-align:center;
            color:var(--text-dim);
            padding:56px 20px;
        }
        .empty-library .big {
            font-size:3em;
            line-height:1;
            margin-bottom:16px;
        }
        .empty-library-title {
            color:var(--text-main);
            font-size:1.05em;
            font-weight:650;
            line-height:1.45;
        }
        .empty-library-description {
            max-width:380px;
            margin:7px auto 18px;
            color:var(--text-sub);
            font-size:.86em;
            line-height:1.55;
            word-break:keep-all;
        }
        .empty-library-action { min-width:150px; }
        /* 필터 전 전체가 0개인 첫 빈 상태(data-first-run)에서는 쓸 수 없는 필터 줄을 접어 「첫 …을 추가해보세요」가 첫 화면에 보이게 한다.
           표식은 Shared.firstRunMark 가 붙인다 — 필터 결과 0개인 화면에는 없으니 필터를 풀 길이는 남는다. */
        :is(#bookView, #webtoonView, #webnovelView, #movieView, #animeView, #gameView, #boardgameView, #videoView):has(.empty-library[data-first-run]) .filter-scope { display:none; }
        /* 검색 결과 없음 화면은 제목 바로 아래에 버튼이 붙어 답답했다.
           설명 문구가 있으면 그게 여백을 만들지만(.empty-library-description),
           검색 결과 모달에는 설명이 없어 제목과 버튼이 맞닿는다.
           애니·영화·게임·보드게임이 같은 구조라 여기서 한 번에 띄운다. */
        .empty-library > button { margin-top:18px; }
        .media-skeleton {
            min-width:0;
            cursor:default;
            pointer-events:none;
            animation:mediaSkeletonPulse 1.4s ease-in-out infinite;
        }
        .media-skeleton-cover { background:var(--inset-bg); }
        .media-skeleton .card-body {
            min-height:128px;
            gap:10px;
        }
        .media-skeleton-line {
            height:12px;
            border-radius:6px;
            background:var(--inset-bg);
        }
        .media-skeleton-line.title { width:78%; height:15px; }
        .media-skeleton-line.meta { width:52%; }
        .media-skeleton-line.chips { width:68%; height:22px; margin-top:4px; }
        .media-skeleton-line.progress { width:100%; height:7px; margin-top:auto; }
        @keyframes mediaSkeletonPulse {
            0%, 100% { opacity:.55; }
            50% { opacity:1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .media-skeleton { animation:none; opacity:.72; }
        }
        /* 매체 목록 첫 불러오기 전(MediaList.create 가 view 에 붙인다): 통계 숫자 「0」 대신 빈 막대.
           0 이 먼저 보였다가 바뀌면 「기록이 사라졌다」로 읽힌다(2026-09-29 점검 B1). */
        [data-media-loading] .stat-value > span:not(.unit),
        [data-media-loading] .stat-value b {
            color:transparent;
            border-radius:6px;
            background:var(--inset-bg);
            animation:mediaSkeletonPulse 1.4s ease-in-out infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            [data-media-loading] .stat-value > span:not(.unit),
            [data-media-loading] .stat-value b { animation:none; }
        }
        /* 검색 후보를 누른 뒤 상세를 받는 동안(MediaList.candidateBusy) */
        .search-candidate-item:disabled { cursor:progress; }
        .search-candidate-item:disabled:not(.is-loading) { opacity:.5; }
        .search-candidate-item.is-loading { border-color:var(--primary); opacity:1; }
        .candidate-loading-note {
            display:block;
            margin-top:6px;
            color:var(--primary);
            font-size:0.8em;
            font-weight:650;
        }
        .candidate-loading-note::before {
            content:'';
            display:inline-block;
            width:.8em;
            height:.8em;
            margin-right:6px;
            vertical-align:-1px;
            border:2px solid currentColor;
            border-right-color:transparent;
            border-radius:50%;
            animation:candidateSpin .8s linear infinite;
        }
        @keyframes candidateSpin { to { transform:rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .candidate-loading-note::before { animation:none; }
        }
        .book-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            overflow: hidden;
            transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
            display: flex; flex-direction: column;
            cursor: pointer;
            position: relative;
        }
        .book-card:focus-visible {
            outline:3px solid var(--primary);
            outline-offset:3px;
        }
        @media (hover: hover) and (pointer: fine) {
            .book-card:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-strong);
                border-color: var(--primary);
            }
            .book-card.media-skeleton:hover {
                transform:none;
                border-color:var(--border-color);
                box-shadow:none;
            }
        }
        .book-card:hover .card-edit-hint { opacity: 1; }
        .video-grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
        .video-card .video-thumb {
            position:relative;
            width:100%;
            aspect-ratio:16 / 9;
            overflow:hidden;
            border-bottom:1px solid var(--border-color);
            background:var(--inset-bg);
        }
        .video-card .video-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
        .video-thumb-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:2.2em; }
        .video-card .card-body { gap:7px; }
        .video-card .card-author { margin-bottom:2px; }
        .video-card-badges { display:flex; align-items:center; gap:6px; min-height:22px; flex-wrap:wrap; }
        .video-status { display:inline-block; padding:3px 8px; border-radius:10px; background:var(--inset-bg); color:var(--text-sub); font-size:.7em; font-weight:650; }
        .video-status.done { background:var(--green-soft); color:var(--green); }
        .video-time-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; color:var(--text-sub); font-size:.78em; font-variant-numeric:tabular-nums; }
        .video-progress { width:100%; height:7px; overflow:hidden; border-radius:999px; background:var(--inset-bg); }
        .video-progress > span { display:block; width:var(--video-progress, 0%); height:100%; border-radius:inherit; background:var(--primary); }
        .video-bump-actions { display:flex; gap:6px; width:100%; margin-top:3px; }
        .video-bump-actions button { flex:1 1 0; min-width:0; min-height:44px; padding-inline:6px; color:var(--primary); border-color:var(--primary); background:var(--primary-soft); white-space:nowrap; }
        .video-import-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
        .video-import-error { display:none; margin-top:10px; padding:9px 11px; border-radius:8px; background:var(--red-soft); color:var(--red); font-size:.82em; line-height:1.45; }
        .video-preview { display:none; grid-template-columns:minmax(150px, 210px) minmax(0, 1fr); gap:14px; margin-top:14px; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .video-preview img { width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:7px; background:var(--card-bg); }
        .video-preview-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; }
        .video-preview-title { width:100%; color:var(--text-main); font-size:.94em; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
        .video-preview-meta { color:var(--text-sub); font-size:.78em; line-height:1.4; }
        .video-preview-actions { display:flex; align-items:center; gap:8px; margin-top:auto; flex-wrap:wrap; }
        .video-playlist-loading { display:none; margin-top:14px; padding:16px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); color:var(--text-sub); font-size:.86em; text-align:center; }
        .video-playlist-preview { display:none; min-width:0; margin-top:14px; padding:14px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); overflow:hidden; }
        .video-playlist-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-width:0; }
        .video-playlist-heading { min-width:0; }
        .video-playlist-title { color:var(--text-main); font-size:1em; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
        .video-playlist-count { flex:0 0 auto; color:var(--text-sub); font-size:.82em; white-space:nowrap; }
        .video-playlist-note { margin-top:5px; color:var(--amber); font-size:.78em; line-height:1.45; }
        .video-playlist-duration-note { margin-top:8px; color:var(--text-sub); font-size:.78em; line-height:1.45; }
        .video-playlist-tools { display:flex; align-items:center; gap:7px; margin:12px 0 8px; flex-wrap:wrap; }
        .video-playlist-tools button { padding:6px 10px; font-size:.78em; }
        .video-playlist-items { display:flex; flex-direction:column; min-width:0; max-height:520px; overflow-x:hidden; overflow-y:auto; border-top:1px solid var(--divider); }
        .video-playlist-item { display:grid; grid-template-columns:28px minmax(76px, 120px) minmax(0, 1fr); align-items:center; gap:10px; min-width:0; padding:10px 0; border-bottom:1px solid var(--divider); cursor:pointer; }
        .video-playlist-item.registered { cursor:default; opacity:.68; }
        .video-playlist-check { width:20px; height:20px; margin:0; accent-color:var(--primary); cursor:pointer; }
        .video-playlist-check:disabled { cursor:default; }
        .video-playlist-thumb { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:6px; background:var(--card-bg); }
        .video-playlist-copy { display:block; min-width:0; text-align:left; }
        .video-playlist-item-title { display:block; color:var(--text-main); font-size:.86em; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
        .video-playlist-item-meta { display:block; margin-top:3px; color:var(--text-sub); font-size:.74em; line-height:1.35; overflow-wrap:anywhere; }
        .video-playlist-registered { display:inline-block; margin-top:4px; padding:2px 7px; border-radius:9px; background:var(--green-soft); color:var(--green); font-size:.7em; font-weight:700; }
        .video-playlist-more { display:flex; justify-content:center; margin-top:12px; }
        .video-playlist-more button { max-width:100%; min-width:150px; white-space:normal; }
        .video-playlist-footer { display:flex; justify-content:flex-end; margin-top:12px; }
        .video-playlist-footer .btn-add { min-width:150px; }
        .video-time-error { display:none; margin-top:5px; color:var(--red); font-size:.76em; line-height:1.4; }
        .card-select-control {
            display:none;
            position:absolute;
            top:6px;
            left:6px;
            z-index:4;
            width:44px;
            height:44px;
            align-items:center;
            justify-content:center;
            border-radius:50%;
            background:color-mix(in srgb, var(--card-bg) 88%, transparent);
            cursor:pointer;
        }
        .card-select-control input {
            width:22px;
            height:22px;
            margin:0;
            accent-color:var(--primary);
            cursor:pointer;
        }
        .selection-mode .card-select-control { display:flex; }
        .selection-mode .book-card .card-edit-hint { display:none; }
        .selection-mode .book-card .wt-plus { pointer-events:none; }
        .selection-mode .book-card.selected {
            border-color:var(--primary);
            box-shadow:0 0 0 2px var(--primary-soft);
        }
        .card-img-top {
            width: 100%;
            height: 230px;
            object-fit: cover;
            display: block;
            border-bottom: 1px solid var(--border-color);
        }
        .no-img {
            width: 100%;
            height: 230px;
            background: hsl(var(--cover-hue, 220) 24% 30%);
            display: flex; align-items: center; justify-content: center;
            color: #f8fafc;
            border-bottom: 1px solid var(--border-color);
            overflow:hidden;
            padding:20px;
            text-align:center;
        }
        body.light-mode .no-img {
            background: hsl(var(--cover-hue, 220) 24% 82%);
            color: #26313f;
        }
        .no-img-copy {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            width:100%;
            min-width:0;
            max-height:100%;
            gap:10px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.16);
        }
        .no-img-title {
            max-width:100%;
            font-size:1em;
            font-weight:700;
            line-height:1.45;
            letter-spacing:-0.025em;
            word-break:keep-all;
            overflow-wrap:anywhere;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:5;
            overflow:hidden;
        }
        .no-img-author {
            max-width:100%;
            color:color-mix(in srgb, currentColor 78%, transparent);
            font-size:.72em;
            line-height:1.4;
            word-break:keep-all;
            overflow-wrap:anywhere;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            overflow:hidden;
        }
        .no-img.no-img-small {
            width: 42px;
            height: 60px;
            flex-shrink: 0;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding:4px;
        }
        .no-img-small .no-img-copy { gap:0; }
        .no-img-small .no-img-title { font-size:.5em; line-height:1.3; -webkit-line-clamp:4; }
        .no-img-small .no-img-author { display:none; }
        .card-body {
            padding: 14px 15px 15px;
            flex-grow: 1;
            display: flex; flex-direction: column; gap: 4px;
        }
        .card-title {
            font-size: 0.98em;
            font-weight: 600;
            margin: 0 0 3px 0;
            line-height: 1.35;
            color: var(--text-main);
            letter-spacing: -0.01em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; word-break: break-word;
        }
        .card-author {
            color: var(--text-sub);
            font-size: 0.82em;
            margin-bottom: 8px;
            display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            overflow: hidden; word-break: break-word;
        }
        .card-edit-hint {
            position: absolute;
            top: 8px; right: 8px;
            width: 26px; height: 26px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.55);
            color: #fff;
            border-radius: 50%;
            font-size: 0.82em;
            opacity: 0;
            transition: opacity 0.15s;
            pointer-events: none;
            z-index: 1;
        }
        body.light-mode .card-edit-hint { background: rgba(255,255,255,0.92); color: var(--text-main); }

        .badges-container { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } /* 하트(44px)와 한 줄이 되면 평점 이모지 칩이 줄 높이만큼 늘어났다(사장님 제보 2026-10-06) — 위아래 중앙에 둔다 */
        .rating-row { display:flex; gap:8px; }
        .rating-btn { flex:1; min-width:44px; min-height:44px; padding:9px 6px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); color:var(--text-sub); cursor:pointer; font-size:0.85em; font-family:inherit; transition:border-color .12s, background .12s, transform .16s cubic-bezier(.34, 1.56, .64, 1); }
        @media (hover: hover) and (pointer: fine) {
            .rating-btn:hover { border-color:var(--primary); }
        }
        .rating-btn.active[data-rating="최고예요"] { background:var(--primary-soft); color:var(--primary-hover); border-color:var(--primary-hover); font-weight:600; }
        .rating-btn.active[data-rating="좋아요"] { background:var(--green-soft); color:var(--green); border-color:var(--green); font-weight:600; }
        .rating-btn.active[data-rating="보통이에요"] { background:var(--amber-soft); color:var(--amber); border-color:var(--amber); font-weight:600; }
        .rating-btn.active[data-rating="별로예요"] { background:var(--red-soft); color:var(--red); border-color:var(--red); font-weight:600; }
        .rating-btn.active[data-rating="최악이에요"] { background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
        /* 계정 모달의 구글 연결 안내. 연결 전에만 눈에 띄게 하고, 연결되면 조용해진다.
           비밀번호 재설정 경로가 없어서 구글 연결이 사실상 유일한 복구 수단이다. */
        .google-account { margin:0 0 14px; padding:12px; border:1px solid var(--border-color); border-radius:8px; text-align:left; }
        .google-account.unlinked { border-color:var(--primary); background:var(--primary-soft); }
        .google-account-status { font-size:0.82em; color:var(--text-sub); margin:0 0 6px; }
        .google-account-status b { color:var(--text-main); }
        .google-account.unlinked .google-account-status b { color:var(--primary-hover); }
        .google-account-why { font-size:0.78em; color:var(--text-sub); margin:0 0 10px; line-height:1.5; }
        .google-account:not(.unlinked) .google-account-why { display:none; }
        .google-link-btn { width:100%; border:1px solid var(--border-color); }
        .google-account.unlinked .google-link-btn { border-color:var(--primary); color:var(--primary-hover); font-weight:600; }

        /* 기록이 하루도 없는 잔디는 접는다. 빈 히트맵이 화면 절반을 먹어
           정작 봐야 할 목록이 스크롤 아래로 밀렸다. 기록이 생기면 저절로 펴진다. */
        .streak-card.is-empty .heatmap-wrap,
        .streak-card.is-empty .hm-legend { display:none; }
        .streak-card.is-empty { padding-bottom:14px; margin-bottom:14px; }

        /* 추가 폼은 접어두고 ＋ 버튼이나 FAB 으로 편다. 늘 펼쳐두면 목록이 스크롤 아래로 밀린다. */
        .input-group.is-collapsed { display:none; }
        .add-panel-toggle {
            width:100%; margin-bottom:12px; padding:10px;
            background:var(--card-bg); color:var(--text-sub);
            border:1px dashed var(--border-color); border-radius:var(--radius-sm);
            font-family:inherit; font-size:0.86em; font-weight:500; cursor:pointer;
        }
        .add-panel-toggle:hover { color:var(--text-main); border-color:var(--primary); }
        .add-panel-toggle[aria-expanded="true"] { border-style:solid; color:var(--text-main); }

        .rating-chip { display:inline-block; padding:3px 9px; border-radius:10px; font-size:0.72em; font-weight:600; white-space:nowrap; }
        .rating-chip.r-best { background:var(--primary-soft); color:var(--primary-hover); }
        .rating-chip.r-good { background:var(--green-soft); color:var(--green); }
        .rating-chip.r-mid { background:var(--amber-soft); color:var(--amber); }
        .rating-chip.r-bad { background:var(--red-soft); color:var(--red); }
        .rating-chip.r-worst { background:var(--red); color:#fff; }
        /* ⚠️ 라이트 모드에서 평가 칩이 흐렸다 — 옅은 색 배경에 같은 색조의 옅은 글자라
           대비가 좋아요 2.31 · 보통 2.86 · 최고 3.55 로 WCAG AA(4.5)에 못 미쳤다.
           다크에서는 어두운 배경 덕에 문제가 없어서 안 드러나던 자리다.
           **배경 색조는 그대로 두고 글자만 진하게** 한다 — 칩의 색 인상은 유지된다. */
        body.light-mode .rating-chip.r-best { color:#1d4ed8; }
        body.light-mode .rating-chip.r-good { color:#047857; }
        body.light-mode .rating-chip.r-mid { color:#b45309; }
        body.light-mode .rating-chip.r-bad { color:#b91c1c; }
        .category-chip { font-size:0.68em; padding:3px 8px; border-radius:10px; border:1px solid var(--border-color); color:var(--text-sub); background:transparent; display:inline-flex; align-items:center; word-break:keep-all; overflow-wrap:anywhere; }
        /* 한국어는 기본 줄바꿈이 글자 사이에서 끊겨 「시뮬레이/션」·「플레이 5/시간」처럼 보였다(사장님 제보 2026-10-06).
           keep-all 로 띄어쓰기에서만 끊는다. 칩 안 낱말이 칸보다 길 때만 overflow-wrap 이 글자 사이를 끊는다. */
        .game-play-time { word-break:keep-all; line-height:1.3; }
        .comment-badge { font-size:0.68em; font-weight:600; padding:3px 8px; border-radius:10px; border:1px solid var(--border-color); color:var(--text-sub); background:transparent; display:inline-flex; align-items:center; white-space:nowrap; }
        .media-tag-chip { max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .search-mode-btn { padding:0 14px; font-size:0.82em; border:1px solid var(--border-color); background:transparent; color:var(--text-sub); cursor:pointer; white-space:nowrap; font-family:inherit; }
        .search-mode-btn:first-child { border-radius:6px 0 0 6px; border-right:none; }
        .search-mode-btn:last-child { border-radius:0 6px 6px 0; }
        .search-mode-btn.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
        @keyframes btnspin { to { transform: rotate(360deg); } }
        .btn-save:disabled { cursor: not-allowed; }
        .btn-save.loading { opacity:0.85; }
        .btn-save.loading::after { content:''; display:inline-block; width:11px; height:11px; margin-left:7px; vertical-align:-1px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation: btnspin 0.6s linear infinite; }
        .candidate-check { width:18px; height:18px; margin:0; flex-shrink:0; accent-color:var(--primary); cursor:pointer; }
        .candidate-check:disabled { cursor:not-allowed; opacity:.55; }
        .candidate-selection-bar { margin-top:10px; padding:10px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .candidate-selection-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
        .candidate-selection-actions button { min-height:38px; padding:7px 10px; }
        .candidate-selection-actions .btn-save { margin:0 0 0 auto; }
        .candidate-selection-note { margin-top:7px; color:var(--text-sub); font-size:.72em; line-height:1.45; }
        #bookSecretAccessBtn.active,
        #webtoonSecretAccessBtn.active,
        #webnovelSecretAccessBtn.active,
        #videoSecretAccessBtn.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
        #genreStatsView { margin-top:0; }
        .stats-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
        .stats-doneonly { display:flex; align-items:center; gap:5px; font-size:0.82em; color:var(--text-sub); cursor:pointer; margin-left:auto; user-select:none; }
        .stats-body { display:flex; gap:32px; align-items:center; flex-wrap:wrap; justify-content:center; background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:28px 24px; }
        .stats-pie { position:relative; width:220px; height:220px; border-radius:50%; flex-shrink:0; }
        .stats-pie-center { position:absolute; inset:58px; border-radius:50%; background:var(--card-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; }
        .stats-pie-center b { font-size:1.4em; }
        .stats-pie-center span { font-size:0.72em; color:var(--text-sub); }
        .stats-legend { display:flex; flex-direction:column; gap:9px; min-width:210px; max-width:380px; }
        .stats-legend-row { display:flex; align-items:center; gap:8px; font-size:0.88em; }
        .stats-dot { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
        .stats-legend-row .cat { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .stats-legend-row .pct { margin-left:auto; color:var(--text-sub); font-variant-numeric:tabular-nums; white-space:nowrap; }
        .stats-section-title { font-size:0.88em; font-weight:600; color:var(--text-sub); margin:18px 2px 8px; }
        .mstats-body { background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:26px 20px 18px; }
        .mstats-scroll { overflow-x:auto; }
        .mstats-chart { display:flex; align-items:flex-end; gap:8px; padding:0 4px; min-width:100%; width:max-content; }
        .mstats-col { flex:1 0 34px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:34px; }
        .mstats-count { font-size:0.78em; color:var(--text-sub); font-variant-numeric:tabular-nums; margin-bottom:4px; min-height:1.2em; }
        .mstats-bar { width:70%; max-width:34px; background:var(--primary); border-radius:5px 5px 2px 2px; }
        .mstats-col.zero .mstats-bar { background:var(--border-color); }
        .mstats-label { font-size:0.72em; color:var(--text-dim); margin-top:6px; white-space:nowrap; }
        .mstats-caption { font-size:0.82em; color:var(--text-sub); margin-top:16px; text-align:center; }
        .mstats-empty { color:var(--text-dim); padding:30px; text-align:center; }
        @media (max-width: 600px) {
            .stats-pie { width:180px; height:180px; }
            .stats-pie-center { inset:46px; }
            .stats-body { gap:20px; padding:20px 14px; }
            .mstats-chart { gap:3px; }
            .mstats-label { font-size:0.62em; }
        }
        .status-badge {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 12px;
            font-size: 0.7em;
            font-weight: 600;
            text-align: center;
            width: fit-content;
            letter-spacing: 0.02em;
        }
        .status-done { background-color: var(--green-soft); color: var(--green); }
        .status-progress { background-color: var(--amber-soft); color: var(--amber); }
        .status-paused { background-color:var(--primary-soft); color:var(--primary); }
        .status-abandoned { background-color:var(--red-soft); color:var(--red); }
        .status-not-started { background-color: var(--inset-bg); color: var(--text-sub); }
        body.light-mode .status-done { color: #047857; }
        body.light-mode .status-progress { color: #b45309; }
        .book-status-field { margin-bottom:12px; }
        .book-status-field label { display:block; margin-bottom:5px; color:var(--text-sub); font-size:0.8em; }
        .book-status-field select { width:100%; min-height:44px; }
        .book-status-hint { margin-top:5px; color:var(--text-dim); font-size:0.72em; line-height:1.45; }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 36px;
            gap: 4px;
            align-items: center;
            padding-bottom: 30px;
        }
        .page-btn {
            background-color: var(--card-bg);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            padding: 6px 11px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            min-width: 34px;
            font-size: 0.85em;
            font-weight: 500;
        }
        .page-btn:hover:not(:disabled) { background-color: var(--card-bg-hover); }
        .page-btn.active { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); }
        .page-btn:disabled { color: var(--text-dim); cursor: not-allowed; }
        .dots { padding: 6px 4px; color: var(--text-dim); font-weight: 600; }
        .page-size-control { display:inline-flex; align-items:center; gap:7px; margin-right:8px; color:var(--text-sub); font-size:0.85em; }
        .page-size-select { min-width:82px; padding-block:6px; }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        /* 확인 모달은 인증 게이트(5100)와 토스트(5200)를 포함한 모든 UI보다 위에 둔다. */
        #discardChangesModal,
        #actionConfirmModal,
        #logoutConfirmModal,
        #syncChoiceModal,
        #guestMergeModal {
            z-index: 5300;
        }
        .modal-content {
            background: var(--card-bg);
            padding: 24px;
            border-radius: var(--radius-lg);
            width: 420px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-strong);
            text-align: center;
            border: 1px solid var(--border-color);
            color: var(--text-main);
        }
        .modal-title { font-size: 1.05em; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.01em; }
        /* ⚠️ 상세 모달은 세로 flex 에 overflow:hidden 이다. 머리글이 flex 로 눌리면
           내용이 긴 탭(정보)에서 작품 이름이 반쯤 잘려 보인다. 눌리지 않게 고정한다. */
        .modal-content > .modal-title,
        #editModal > .modal-content > #modalBookTitle { flex-shrink: 0; }
        .modal-fixed-close-wrap { position:sticky; top:0; z-index:20; display:flex; justify-content:flex-end; height:0; pointer-events:none; }
        .modal-fixed-close { pointer-events:auto; width:44px; height:44px; min-width:44px; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--card-bg); color:var(--text-sub); font-size:26px; line-height:1; cursor:pointer; transform:translate(12px,-12px); }
        .modal-fixed-close:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
        #bestsellerModal .bestseller-modal-content { display:flex; flex-direction:column; overflow:hidden; }
        #bestsellerModal .bestseller-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
        .btn-save { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); margin-right: 8px; }
        @media (hover: hover) and (pointer: fine) {
            .btn-save:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
        }
        .btn-close { background-color: transparent; color: var(--text-sub); }
        #syncChoiceModal {
            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        }
        .sync-choice-content { width:460px; text-align:left; }
        .sync-choice-intro { margin:0 0 14px; color:var(--text-sub); font-size:0.84em; line-height:1.55; }
        .sync-choice-list { display:flex; flex-direction:column; gap:9px; }
        .sync-choice-option {
            width:100%;
            min-height:0;
            padding:12px 13px;
            text-align:left;
            white-space:normal;
            background:var(--inset-bg);
        }
        .sync-choice-option strong { display:block; margin-bottom:4px; color:var(--text-main); font-size:0.98em; }
        .sync-choice-option span { display:block; color:var(--text-sub); font-size:0.84em; line-height:1.45; font-weight:400; }
        .sync-choice-option.sync-choice-default {
            border-color:var(--primary);
            background:var(--primary-soft);
        }
        .sync-choice-backup { margin-bottom:14px; }
        .sync-choice-backup .btn-ghost { width:100%; border:1px solid var(--border-color); }
        .sync-choice-backup .btn-ghost { border:1px solid var(--border-color); }
        /* 게스트 → 계정 겹치는 작품 선택. 폰 폭(393px)에서 작품이 많아도 목록만 스크롤되고 버튼은 늘 보인다. */
        #guestMergeModal {
            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        }
        .guest-merge-content {
            width:480px;
            max-width:100%;
            text-align:left;
            display:flex;
            flex-direction:column;
            max-height:calc(100dvh - 24px);
            overflow:hidden;
        }
        .guest-merge-tools { display:flex; justify-content:flex-end; margin-bottom:8px; }
        .guest-merge-tools .btn-ghost { min-height:44px; border:1px solid var(--border-color); }
        .guest-merge-list { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; min-height:0; }
        .guest-merge-item { padding:12px 0; border-top:1px solid var(--border-color); }
        .guest-merge-item:first-child { border-top:none; padding-top:4px; }
        .guest-merge-item-title { font-weight:600; color:var(--text-main); overflow-wrap:anywhere; }
        .guest-merge-kind {
            display:inline-block;
            margin-right:4px;
            padding:1px 7px;
            border-radius:999px;
            background:var(--inset-bg);
            color:var(--text-sub);
            font-size:0.78em;
            font-weight:500;
            vertical-align:1px;
        }
        .guest-merge-compare { margin:4px 0 8px; color:var(--text-sub); font-size:0.84em; }
        .guest-merge-deleted { color:var(--red); font-size:0.78em; font-weight:500; }
        .guest-merge-meta { margin:3px 0 0; color:var(--text-sub); font-size:0.8em; overflow-wrap:anywhere; }
        .guest-merge-option-text .guest-merge-warning { color:var(--red); }
        .guest-merge-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .guest-merge-option {
            display:flex;
            align-items:flex-start;
            gap:8px;
            min-height:44px;
            padding:10px 11px;
            border:1px solid var(--border-color);
            border-radius:var(--radius-sm);
            background:var(--inset-bg);
            cursor:pointer;
        }
        .guest-merge-option:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); }
        .guest-merge-option input { margin:3px 0 0; flex:0 0 auto; width:18px; height:18px; accent-color:var(--primary); }
        .guest-merge-option-text strong { display:block; color:var(--text-main); font-size:0.92em; }
        .guest-merge-option-text span { display:block; margin-top:2px; color:var(--text-sub); font-size:0.8em; line-height:1.4; }
        .guest-merge-actions { display:flex; gap:10px; margin-top:12px; flex:0 0 auto; }
        .guest-merge-actions > button { flex:1; min-height:44px; margin:0; }
        .guest-merge-actions .btn-ghost { border:1px solid var(--border-color); }
        @media (max-width: 400px) {
            .guest-merge-options { grid-template-columns:1fr; }
        }
        #logoutConfirmModal {
            padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        }
        .logout-confirm-text { margin:0 0 18px; color:var(--text-sub); font-size:0.88em; line-height:1.65; }
        .logout-confirm-text strong { color:var(--text-main); }
        .logout-confirm-text.is-warning {
            padding:12px 14px;
            color:var(--red);
            background:var(--red-soft);
            border:1px solid var(--red);
            border-radius:var(--radius-sm);
        }
        /* 백업은 보조 동작이라 본문 폭을 꽉 채우되 시각적 무게는 낮춘다 */
        .logout-confirm-backup { margin-bottom:18px; }
        .logout-confirm-backup .btn-ghost { width:100%; border:1px solid var(--border-color); }
        /* 취소/확인은 같은 크기로 나란히 — 크기 차이로 한쪽을 유도하지 않는다 */
        .logout-confirm-actions { display:flex; gap:10px; }
        .logout-confirm-actions > button { flex:1; min-height:44px; }
        .logout-confirm-danger { background:transparent; border:1px solid var(--red); color:var(--red); }
        /* 파괴적 동작이 로그아웃보다 눈에 띄면 안 된다. 조용한 링크형으로 두고
           확인 단계(아이디 직접 입력)에서 무게를 준다. */
        .account-delete-button {
            width:100%; min-height:44px; margin-top:14px; padding:8px;
            background:transparent; border:0; color:var(--text-dim);
            font-family:inherit; font-size:0.8em; cursor:pointer;
            text-decoration:underline; text-underline-offset:3px;
        }
        .account-delete-button:hover { color:var(--red); }
        /* 수동 업로드는 예외 기능이라 접어둔다 — 계정 모달 절반을 먹고 있었다. */
        .account-sync { margin:0 0 12px; text-align:left; }
        /* 줄 전체는 이미 .account-sync label 이 44px 로 잡는다. 여기서는 네모 자체가
           13px 이라 눈으로 상태를 읽기 어려운 것만 키운다. 줄 높이는 그대로다. */
        .account-sync-types {
            display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin:0 0 12px;
            color:var(--text-main); font-size:0.86em;
        }
        .account-sync-types label { display:flex; align-items:center; gap:7px; cursor:pointer; }
        .account-sync-types input[type="checkbox"] { width:18px; height:18px; flex:0 0 18px; margin:0; }
        .account-sync summary {
            min-height:44px;
            list-style:none; cursor:pointer; text-align:center;
            color:var(--text-sub); font-size:0.84em; padding:9px;
            border:1px solid var(--border-color); border-radius:var(--radius-sm);
        }
        .account-sync summary::-webkit-details-marker { display:none; }
        .account-sync summary:hover { color:var(--text-main); }
        .account-sync[open] summary { margin-bottom:12px; }
        .account-sync label { min-height:44px; }
        .account-delete-confirm {
            margin-top:10px;
            padding:14px;
            border:1px solid var(--red);
            border-radius:var(--radius-sm);
            background:var(--red-soft);
            text-align:left;
        }
        .account-delete-confirm p { margin:0 0 8px; color:var(--text-sub); font-size:0.82em; line-height:1.55; }
        .account-delete-confirm strong { color:var(--red); }
        .account-delete-confirm label { display:block; margin:12px 0 6px; color:var(--text-main); font-size:0.8em; }
        .account-delete-backup { width:100%; min-height:44px; margin-top:4px; border:1px solid var(--border-color); }
        .account-delete-actions { display:flex; gap:8px; margin-top:10px; }
        .account-delete-actions > button { flex:1; min-height:44px; }
        .logout-confirm-danger:disabled { opacity:0.45; cursor:not-allowed; }
        .decision-copy { margin:0 0 18px; color:var(--text-sub); font-size:0.88em; line-height:1.65; }
        .decision-actions { display:flex; gap:10px; }
        .decision-actions > button { flex:1; min-height:44px; white-space:normal; }
        .decision-actions-stack { display:flex; flex-direction:column; gap:8px; }
        .decision-actions-stack > button { width:100%; min-height:44px; white-space:normal; line-height:1.35; }
        .decision-actions .btn-save, .decision-actions-stack .btn-save, .search-error-actions .btn-save { margin-right:0; }
        .search-error { padding:14px 8px 6px; text-align:center; color:var(--text-sub); font-size:0.88em; line-height:1.55; }
        .search-error-actions { display:flex; justify-content:center; gap:8px; margin-top:14px; }
        .search-error-actions > button { min-height:44px; }
        @media (hover: hover) and (pointer: fine) {
            .logout-confirm-danger:hover { background:var(--red); border-color:var(--red); color:#fff; }
        }
        @media (max-width:420px) {
            .decision-actions, .search-error-actions { flex-direction:column; }
            .decision-actions > button, .search-error-actions > button { width:100%; }
        }

        .theme-toggle, .icon-btn {
            background: var(--card-bg);
            color: var(--text-sub);
            border: 1px solid var(--border-color);
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            font-size: 0.85em;
            cursor: pointer;
            font-weight: 500;
        }
        .theme-toggle:hover, .icon-btn:hover { color: var(--text-main); }
        .header-actions {
            display:flex;
            align-items:center;
            justify-content:flex-end;
            flex-wrap:wrap;
            gap:8px;
            min-width:0;
        }
        .header-area .theme-toggle, .header-area .icon-btn {
            min-width:44px;
            min-height:44px;
        }
        .hdr-icons { display:contents; }
        /* 「더보기」 래퍼·버튼의 기본값(숨김). 481px 이상·480px 이하 미디어쿼리가 각각 켠다. */
        .hdr-more { display:contents; }
        .hdr-more-btn, .hdr-more-dot { display:none; }
        .settings-shortcut {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:5px;
            white-space:nowrap;
        }
        .account-settings-shortcut { position:relative; overflow:visible; }
        .settings-shortcut[hidden] { display:none; }
        .settings-friend-badge {
            position:absolute;
            top:-5px;
            right:-5px;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:center;
            min-width:18px;
            height:18px;
            padding:0 4px;
            border:2px solid var(--card-bg);
            border-radius:999px;
            /* 토큰을 쓴다. 다크는 index.html 인라인 블록의 --red(#f87171),
               라이트는 여기 --red(#dc2626) 다. 하나를 박으면 한쪽에서 안 읽힌다. */
            background:var(--red);
            color:#fff;
            font-size:11px;
            font-weight:700;
            line-height:1;
            pointer-events:none;
        }
        .notification-badge {
            position:absolute;
            top:-5px;
            right:-5px;
            z-index:1;
            display:flex;
            align-items:center;
            justify-content:center;
            min-width:18px;
            height:18px;
            padding:0 4px;
            border:2px solid var(--card-bg);
            border-radius:999px;
            background:var(--red);
            color:#fff;
            font-size:11px;
            font-weight:700;
            line-height:1;
            pointer-events:none;
        }
        .notification-content {
            width:min(460px, calc(100vw - 28px)) !important;
            max-height:90vh;
            text-align:left;
        }
        .notification-list {
            display:flex;
            flex-direction:column;
            gap:8px;
            max-height:min(62vh, 560px);
            overflow-y:auto;
        }
        .notification-row {
            display:grid;
            grid-template-columns:minmax(0, 1fr) 52px;
            gap:8px;
            align-items:center;
        }
        .notification-item {
            display:grid;
            grid-template-columns:minmax(0, 1fr) auto;
            gap:4px 12px;
            width:100%;
            min-height:64px;
            padding:11px 12px;
            border:1px solid var(--border-color);
            border-radius:var(--radius);
            background:var(--card-bg);
            text-align:left;
            white-space:normal;
        }
        .notification-item:hover { border-color:var(--primary); background:var(--card-bg-hover); }
        .notification-item-primary { min-width:0; overflow-wrap:anywhere; }
        .notification-item-title { min-width:0; overflow-wrap:anywhere; }
        .notification-item-time { color:var(--text-dim); font-size:.76em; font-weight:400; white-space:nowrap; }
        .notification-item-body {
            margin:0;
            color:var(--text-main);
            font-size:1em;
            font-weight:700;
            line-height:1.45;
            overflow-wrap:anywhere;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            max-height:2.9em;
            overflow:hidden;
        }
        .notification-item-secondary {
            grid-column:1 / -1;
            color:var(--text-sub);
            font-size:.78em;
            font-weight:400;
        }
        .notification-delete {
            width:44px;
            min-width:44px;
            min-height:44px;
            padding:0;
            border:1px solid transparent;
            background:transparent;
            color:var(--text-dim);
            font-size:1.15em;
            line-height:1;
        }
        .notification-delete:hover, .notification-delete:focus-visible {
            border-color:var(--red);
            color:var(--red);
        }
        .notification-clear-button { width:100%; min-height:44px; margin-bottom:10px; }
        .notification-empty {
            padding:28px 14px;
            border:1px dashed var(--border-color);
            border-radius:var(--radius);
            color:var(--text-sub);
            line-height:1.65;
            text-align:center;
        }
        .notification-empty strong { display:block; color:var(--text-main); }
        /* 헤더 드롭다운 (사용자 메뉴 · 더보기) */
        .hdr-menu { position: relative; display: inline-block; }
        .hdr-btn { background: var(--card-bg); color: var(--text-sub); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 4px); padding: 5px 10px; font-size: 0.8em; cursor: pointer; font-family: inherit; white-space: nowrap; }
        .hdr-btn:hover { color: var(--text-main); }
        .hdr-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 5px); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; min-width: 160px; max-width: calc(100vw - 20px); max-height: min(70vh, 420px); box-shadow: 0 8px 24px rgba(0,0,0,0.28); z-index: 1500; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
        .hdr-dropdown.open { display: block; }
        .hdr-dropdown a, .hdr-dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; padding: 8px 10px; border-radius: 7px; color: var(--text-sub); text-decoration: none; font-size: 0.84em; line-height: 1.35; white-space: normal; background: none; border: none; cursor: pointer; font-family: inherit; }
        .hdr-ico { display: inline-flex; flex: 0 0 20px; align-items: center; justify-content: center; width: 20px; color: var(--primary); }
        .hdr-dropdown a:hover, .hdr-dropdown button:hover { background: var(--primary-soft); color: var(--text-main); }
        .hdr-dropdown a:focus-visible, .hdr-dropdown button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
        .hdr-icons-heading { display: none; grid-column: 1 / -1; margin: 2px 2px 0; color: var(--text-sub); font-size: 0.72em; font-weight: 700; line-height: 1.2; }
        #hdrIcons:has(> [data-menu-group="community"]:not([hidden])) > [data-menu-heading="community"],
        #hdrIcons:has(> [data-menu-group="account"]:not([hidden])) > [data-menu-heading="account"],
        #hdrIcons:has(> [data-menu-group="preferences"]:not([hidden])) > [data-menu-heading="preferences"],
        #hdrIcons:has(> [data-menu-group="help"]:not([hidden])) > [data-menu-heading="help"],
        #hdrIcons:has(> [data-menu-group="admin"]:not([hidden])) > [data-menu-heading="admin"] { display: block; }
        .header-actions .hdr-icons > button { width: 100%; min-width: 0; min-height: 60px; flex-direction: column; gap: 4px; padding: 7px 4px; border-radius: 8px; }
        .header-actions .hdr-icons > button:hover { background: var(--primary-soft); border-color: var(--primary); }
        .header-actions .hdr-icons > button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
        .hdr-icons .settings-shortcut-icon { font-size: 1.08em; line-height: 1; }
        .hdr-icons .settings-shortcut-label { max-width: 100%; overflow: visible; text-align: center; text-overflow: clip; white-space: normal; font-size: 0.74em; line-height: 1.2; overflow-wrap: anywhere; }
        .hdr-link { color: var(--text-sub); font-size: 0.78em; text-decoration: none; border: 1px solid var(--border-color); padding: 5px 10px; border-radius: var(--radius-sm, 4px); white-space: nowrap; }
        .hdr-link:hover { color: var(--text-main); }

        .toast-container {
            position: fixed;
            right:20px;
            /* 상단 고정. 하단으로 내렸더니 +1화 같은 즉시 피드백이 손에서 멀어졌다.
               다만 헤더를 덮으면 안 된다. 헤더 높이는 폭·모드에 따라 98~146px로 달라져
               고정값으로 못 맞추므로, JS(ResizeObserver)가 실제 높이를 --toast-top에 넣는다. */
            top:calc(var(--toast-top, 150px) + env(safe-area-inset-top));
            z-index: 2000;
            display: flex; flex-direction: column; gap: 8px;
            max-width: 360px;
            pointer-events: none;
        }
        .toast {
            background: var(--card-bg);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            border-left: 3px solid var(--primary);
            border-radius: var(--radius-sm);
            padding: 12px 14px;
            box-shadow: var(--shadow-strong);
            font-size: 0.86em;
            pointer-events: auto;
            display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
            animation: toastIn 0.18s ease-out;
        }
        /* 모달이 열려 있으면 토스트를 아래로 내린다. 상단 고정은 카드에서 「+1화」 같은
           즉시 피드백을 손 가까이 두려는 것인데, 모달이 그 카드를 덮고 있으면 그 이유가 없다.
           그대로 두면 모달 내용을 가린다 — 친구 화면에서 하필 「내 코드」를 덮었다.
           #addFab 과 같은 방식으로 판정한다(:has 미지원 브라우저는 JS 가 붙이는 클래스). */
        @supports selector(body:has(*)) {
            body:has(.modal-overlay[style*="flex"]) .toast-container {
                top:auto; bottom:calc(18px + env(safe-area-inset-bottom));
            }
        }
        body.fab-modal-open .toast-container {
            top:auto; bottom:calc(18px + env(safe-area-inset-bottom));
        }
        /* 모달 내용 아래에 자리가 없으면(키 큰 모달의 저장·닫기 단추) 위로 올린다 — js/app.js placeToastsAroundModal. */
        @supports selector(body:has(*)) {
            body:has(.modal-overlay[style*="flex"]) .toast-container.toast-modal-top {
                top:calc(8px + env(safe-area-inset-top)); bottom:auto;
            }
        }
        body.fab-modal-open .toast-container.toast-modal-top {
            top:calc(8px + env(safe-area-inset-top)); bottom:auto;
        }
        .toast.toast-error { border-left-color: var(--red); }
        .toast.toast-success { border-left-color: var(--green); }
        .toast.fading { opacity: 0; transform: translateY(-8px); pointer-events:none; transition: opacity 0.3s, transform 0.3s; }
        .toast-close { min-width:44px; background: none; border: none; color: var(--text-sub); font-size: 1.05em; cursor: pointer; padding: 0 2px; line-height: 1; }
        .toast-undo { align-items:center; }
        /* 등록한 책 「보기」로 데려간 카드를 잠깐 밝힌다(js/app.js revealBookCard). */
        .book-card.book-card-flash { outline:3px solid var(--primary); outline-offset:3px; transition:outline-color .3s; }
        /* 검색 후보의 체크박스를 44px 라벨로 감싸 누르는 자리를 넓힌다. 줄 높이는 그대로 두려고 안쪽 여백만큼 당긴다. */
        .candidate-check-hit { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; margin:-10px -6px -10px -10px; cursor:pointer; }
        .toast-undo-action {
            flex:0 0 auto;
            min-height:44px;
            padding:6px 10px;
            border:none;
            background:transparent;
            color:var(--primary);
            font-weight:700;
        }
        @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateX(0); } }

        /* 이어읽기 배너 · 오늘의 문장 */
        .home-banner { display:none; align-items:center; gap:14px; background:var(--card-bg); border:1px solid var(--border-color); border-left:3px solid var(--primary); border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:14px; cursor:pointer; transition:border-color .12s; }
        @media (hover: hover) and (pointer: fine) {
            .home-banner:hover { border-color:var(--primary); }
        }
        .today-quote { display:none; width:100%; min-width:0; min-height:44px; background:var(--card-bg); color:var(--text-main); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:18px; text-align:left; font-family:inherit; font-weight:400; cursor:pointer; }
        .today-quote-head { display:flex; align-items:center; gap:7px; margin-bottom:6px; color:var(--text-sub); font-size:0.72em; letter-spacing:0.04em; }
        .today-quote-text { display:block; font-size:0.98em; line-height:1.6; font-style:italic; overflow-wrap:anywhere; }
        .today-quote-meta { display:block; margin-top:8px; color:var(--text-sub); font-size:0.78em; text-align:right; overflow-wrap:anywhere; }
        .quote-formatted { max-width:100%; min-width:0; white-space:pre-wrap; }
        .quote-formatted-table { overflow-x:auto; overflow-y:hidden; white-space:pre; overflow-wrap:normal; font-family:var(--font-mono); font-style:normal; touch-action:pan-x pan-y; cursor:grab; }
        .quote-formatted-table:active { cursor:grabbing; }
        /* 스트릭 + 히트맵 */
        .streak-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:18px; }
        .streak-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
        .streak-num { font-size:1.5em; font-weight:700; letter-spacing:-0.02em; }
        .streak-num small { font-size:0.5em; font-weight:500; color:var(--text-sub); margin-left:4px; }
        #addFab {
            position:fixed;
            right:20px;
            bottom:calc(var(--mode-tabbar-height) + 16px + env(safe-area-inset-bottom));
            z-index:900;
            width:56px;
            height:56px;
            min-width:56px;
            min-height:56px;
            padding:0;
            display:flex;
            align-items:center;
            justify-content:center;
            border:none;
            border-radius:50%;
            background:var(--accent);
            color:var(--on-primary);
            font-size:1.8em;
            line-height:1;
            box-shadow:var(--shadow-strong);
        }
        #addFab:hover { background:var(--primary-hover); }
        #addFab:focus-visible { outline:3px solid var(--primary-soft); outline-offset:3px; }
        #addFab.is-occluded { visibility:hidden; pointer-events:none; }
        @supports selector(body:has(*)) {
            body:has(.modal-overlay[style*="flex"]) #addFab { display:none; }
        }
        body.fab-modal-open #addFab { display:none; }

        /* 액센트 색상 스와치 */
        .accent-swatches { display:flex; gap:0; flex-wrap:nowrap; }
        /* 실제 타깃은 44px, 안쪽에 칠하는 원은 기존 30px을 유지한다. */
        .accent-swatch { position:relative; flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; padding:7px; border:0; border-radius:50%; background-clip:content-box !important; cursor:pointer; transition:transform .16s cubic-bezier(.34, 1.56, .64, 1); }
        .accent-swatch::after { content:''; position:absolute; inset:7px; border:2px solid transparent; border-radius:50%; box-shadow:inset 0 0 0 2px var(--card-bg); pointer-events:none; }
        @media (hover: hover) and (pointer: fine) {
            .accent-swatch:hover { transform:scale(1.1); }
        }
        .accent-swatch.active::after { border-color:var(--text-main); }

        /* 설정 모달 */
        .settings-content { width:400px; text-align:left; }
        .settings-intro { margin:0 0 12px; color:var(--text-sub); font-size:0.82em; line-height:1.5; }
        .settings-groups { display:flex; flex-direction:column; gap:10px; }
        .settings-group {
            padding:12px;
            border:1px solid var(--border-color);
            border-radius:var(--radius);
            background:var(--inset-bg);
            min-width:0;
        }
        .settings-group-title {
            margin:0 0 9px;
            color:var(--text-main);
            font-size:0.88em;
            font-weight:600;
        }
        .settings-group-copy { margin:0 0 9px; color:var(--text-sub); font-size:0.78em; line-height:1.45; }
        .settings-support-label { color:var(--text-sub); font-size:0.78em; }
        .settings-support-address {
            display:block;
            margin:6px 0 10px;
            padding:10px 12px;
            border:1px solid var(--border-color);
            border-radius:var(--radius-sm);
            background:var(--card-bg);
            color:var(--text-main);
            font-size:0.76em;
            line-height:1.5;
            overflow-wrap:anywhere;
        }
        .settings-support-actions { display:flex; align-items:center; gap:12px; }
        .settings-support-actions a { color:var(--text-sub); font-size:0.78em; text-underline-offset:3px; }
        .settings-support-actions a:hover { color:var(--text-main); }
        .settings-primary { width:100%; }
        /* 로그인한 계정 버튼: 첫 줄은 누르면 하는 일, 둘째 줄은 아이디(auth.js renderAccountButton). */
        #accountBtn .account-btn-main { display:block; }
        #accountBtn .account-btn-sub {
            display:block; margin-top:2px; font-size:0.8em; font-weight:400; opacity:0.85;
            overflow:hidden; text-overflow:ellipsis;
        }
        .settings-action-grid {
            display:grid;
            grid-template-columns:repeat(2, minmax(140px, 1fr));
            gap:8px;
        }
        .settings-action-grid button { min-width:0; white-space:normal; line-height:1.3; }
        .settings-wide-action { width:100%; margin-top:8px; white-space:normal; }
        .storage-status {
            margin-top:9px;
            padding:10px 11px;
            border:1px solid var(--border-color);
            border-radius:var(--radius-sm);
            background:var(--card-bg);
            min-width:0;
            overflow-wrap:anywhere;
        }
        .storage-status.is-unpersisted { border-color:var(--amber); background:var(--amber-soft); }
        .cover-usage-status.is-low { border-color:var(--amber); background:var(--amber-soft); }
        .cover-usage-status.is-error { border-color:var(--red); background:var(--red-soft); }
        .storage-status-line { margin:0; color:var(--text-main); font-size:0.78em; line-height:1.45; }
        .storage-status-warning { margin:7px 0 0; color:var(--text-main); font-size:0.76em; line-height:1.5; }
        .sync-failure-panel { border-color:var(--red); background:var(--red-soft, var(--card-bg)); }
        .sync-failure-list {
            max-height:150px;
            margin:8px 0 0;
            padding-left:20px;
            color:var(--text-sub);
            font-size:0.74em;
            line-height:1.55;
            overflow:auto;
        }
        .settings-details { margin-top:7px; color:var(--text-sub); font-size:0.76em; line-height:1.5; }
        .settings-details summary {
            width:fit-content;
            /* 손가락 타깃 44px(C11). 글자 크기는 그대로 두고 위아래 여백만 키운다.
               display 를 바꾸면 펼침 삼각형(list-item 표지)이 사라지니 그대로 둔다. */
            min-height:44px;
            box-sizing:border-box;
            padding:12px 0;
            color:var(--text-sub);
            cursor:pointer;
            font-weight:500;
        }
        .settings-details p { margin:6px 0 0; }
        .settings-security-list { display:flex; flex-direction:column; gap:8px; }
        .home-section-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
        .home-section-toggle input { width:19px; height:19px; flex-shrink:0; accent-color:var(--primary); cursor:pointer; }
        .settings-security-row {
            padding:10px;
            border:1px solid var(--border-color);
            border-radius:var(--radius-sm);
            background:var(--card-bg);
            min-width:0;
        }
        .settings-security-head {
            display:flex;
            align-items:center;
            gap:7px;
            min-width:0;
            margin-bottom:8px;
        }
        .settings-security-name { font-size:0.84em; font-weight:600; white-space:nowrap; }
        .settings-state-badge {
            display:inline-flex;
            align-items:center;
            min-height:22px;
            padding:2px 8px;
            border:1px solid var(--border-color);
            border-radius:999px;
            background:var(--inset-bg);
            font-size:0.68em;
            font-weight:600;
            white-space:nowrap;
        }
        .settings-security-meta {
            min-width:0;
            margin-left:auto;
            color:var(--text-sub);
            font-size:0.68em;
            font-weight:500;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .settings-control-row { display:flex; gap:6px; min-width:0; }
        #secretCurrentRow { margin-bottom:6px; }
        #secretAccessRow { margin-top:6px; }
        .secret-content { width:420px; text-align:left; }
        .secret-content .settings-security-row { padding:12px; }
        .secret-content #secretAccessRow { margin:0 0 10px; }
        .secret-content #secretAccessRow.secret-access-open #secretAccessBtn { flex:1; }
        .secret-content .settings-details { margin-top:10px; }
        .secret-close { margin-top:14px; text-align:center; }
        .trash-content { width:520px; }
        .trash-empty-button { margin:0 0 10px; }
        .trash-list { max-height:55vh; overflow-y:auto; }
        .trash-empty-state { margin:16px 0; color:var(--text-sub); font-size:0.84em; text-align:center; }
        .trash-item { display:flex; align-items:center; gap:10px; }
        .trash-item-main { flex:1; min-width:0; }
        .trash-item-head { display:flex; align-items:center; gap:7px; min-width:0; }
        .trash-item-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.86em; font-weight:600; }
        .trash-item-time { margin-top:5px; color:var(--text-sub); font-size:0.72em; }
        .trash-item-actions { display:flex; gap:6px; flex-shrink:0; }
        /* ⚠️ 38px 이었다. 「영구 삭제」는 되돌릴 수 없는 동작이라 오탭이 나면 안 된다.
           이 저장소의 손가락 타깃 기준은 44px 이다(회귀 747). */
        .trash-item-actions button { min-height:44px; min-width:44px; padding:6px 9px; font-size:0.76em; white-space:nowrap; }
        .trash-footnote { margin-top:10px; text-align:center; }
        .settings-control-row input {
            flex:1;
            min-width:0;
            width:100%;
            padding:8px 10px;
            border:1px solid var(--border-color);
            border-radius:var(--radius-sm);
            background:var(--input-bg);
            color:var(--text-main);
            outline:none;
            font:inherit;
            font-size:0.82em;
        }
        .settings-control-row button { min-height:44px; padding:7px 10px; font-size:0.8em; }
        .settings-notice { margin:0 0 7px; color:var(--amber); font-size:0.76em; line-height:1.45; }
        .settings-security-row .settings-details { margin-top:5px; }
        .settings-close { margin-top:12px; text-align:center; }
        .notify-status { margin-top:9px; }
        .notify-status.error { color:var(--red); }
        .notify-media-list { margin-top:6px; }
        /* 마스터 스위치 아래 두 묶음(오늘 볼 작품 / 친구 활동)을 구분해 준다. */
        .notify-sub-title { margin:14px 0 0; color:var(--text-dim); font-size:0.74em; letter-spacing:0.02em; }
        /* 매체(무엇을)와 친구 활동(어떤 일)은 축이 다르다. 간격은 같게 두되 살짝 띄워
           두 묶음임을 보이게 한다. 예전엔 친구 두 줄이 목록 바깥이라 간격만 어긋났다. */
        .notify-event-list { margin-top:9px; }
        .feedback-entry { position:relative; min-height:44px; }
        .friends-content, .friend-library-content {
            width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow-y:auto; text-align:left;
        }
        .friend-section { margin-top:12px; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .friends-content .friend-section { margin-top:8px; padding:10px; border-radius:8px; }
        .friends-content .friend-privacy { margin:0; }
        .friends-content .friend-privacy summary { padding:6px 0; }
        .friends-content .friend-disclosure { padding:0; }
        .friends-content .friend-disclosure > summary { min-height:44px; padding:0 10px; cursor:pointer; }
        .friends-content .friend-disclosure > summary h3 { margin:0; }
        .friends-content .friend-disclosure > .friend-list { padding:0 10px 10px; }
        .friend-section h3 { margin:0 0 8px; font-size:0.9em; }
        .friend-inline-control { display:flex; gap:8px; align-items:center; }
        .friend-inline-control input { min-width:0; flex:1; min-height:44px; box-sizing:border-box; }
        .friend-inline-control button { min-height:44px; white-space:nowrap; }
        .friend-code-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
        .friend-code-row > div { min-width:0; }
        .friend-code-row span { display:block; color:var(--text-dim); font-size:0.72em; }
        .friend-code-row strong { display:block; margin-top:3px; letter-spacing:0.12em; white-space:nowrap; user-select:all; -webkit-user-select:all; }
        /* 폰에서 코드가 「PCNVMAVLB / B」로 쪼개졌다(복사·공유 버튼이 늘어 칸이 좁아짐). 좁으면 버튼을 아래 줄로 보낸다. */
        .friend-code-row { flex-wrap:wrap; }
        .friend-code-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
        .friend-code-actions button { min-height:44px; }
        .friend-request-message { margin:8px 0 0; font-size:0.8em; line-height:1.45; }
        .friend-warning { margin:7px 0 0; color:var(--amber); font-size:0.75em; line-height:1.45; }
        .friend-list { display:flex; flex-direction:column; gap:8px; }
        /* ⚠️ flex + space-between 이면 이름 칸이 0 까지 눌려 「태림」이 「태..」가 된다.
           이름 칸에 최소 폭을 주고, 별명은 아래 한 줄을 통째로 쓴다. */
        .friend-row { display:grid; grid-template-columns:minmax(88px, 1fr) auto; align-items:center; gap:8px 12px; min-width:0; padding:9px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); }
        .friend-row-copy { min-width:0; }
        .friend-row-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.84em; }
        .friend-row-copy span { display:block; margin-top:3px; color:var(--text-dim); font-size:0.68em; }
        .friend-row-copy { grid-column:1; }
        .friend-row-actions { grid-column:2; justify-self:end; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
        .friend-row-alias { grid-column:1 / -1; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--border-color); }
        .friend-alias-label { color:var(--text-dim); font-size:0.72em; }
        /* 파괴적인 동작이 「서재 보기」보다 눈에 띄면 안 된다. 간격으로도 떼어 놓는다. */
        .friend-row-actions .friend-danger { border-color:var(--border-color); margin-left:10px; }
        .friend-row-actions .friend-danger:hover { border-color:var(--red); }
        .friend-alias-control { flex:1; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; }
        .friend-alias-control input { width:120px; min-height:44px; box-sizing:border-box; font-size:0.76em; }
        /* 손가락 타깃 44px(D11). 40px 이던 승인·거절·서재 보기·끊기·별명 저장이 폰에서 빗맞았다. */
        .friend-row-actions button, .friend-alias-control button, .friend-danger { min-height:44px; padding:7px 10px; font-size:0.76em; }
        .friend-library-toggle[aria-checked="true"] { border-color:var(--primary); background:var(--primary-soft); color:var(--primary-hover); }
        .friend-library-toggle::before { content:'○'; margin-right:5px; }
        .friend-library-toggle[aria-checked="true"]::before { content:'●'; }
        .friend-danger { border:1px solid var(--red); border-radius:6px; background:transparent; color:var(--red); cursor:pointer; }
        /* 본문 안 링크도 손가락 타깃을 지킨다. 실측 60×18 이었다. */
        .tap-safe { display:inline-flex; align-items:center; min-height:44px; }
        .friend-empty { margin:0; padding:10px 4px; color:var(--text-dim); font-size:0.8em; text-align:center; }
        .friend-modal-actions { display:flex; justify-content:center; gap:8px; margin-top:12px; }
        .friend-library-notice { margin:0 0 12px; padding:10px 12px; border:1px solid var(--amber); border-radius:8px; background:var(--amber-soft); color:var(--amber); font-size:0.8em; line-height:1.5; }
        .friend-library-list { display:flex; flex-direction:column; gap:10px; }
        .friend-library-card { display:grid; grid-template-columns:68px minmax(0, 1fr); gap:12px; padding:11px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); }
        .friend-library-cover { width:68px; height:96px; overflow:hidden; border-radius:6px; background:var(--inset-bg); }
        .friend-library-cover > img, .friend-library-cover .book-cover { width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
        .friend-library-main { min-width:0; }
        .friend-library-type { color:var(--text-dim); font-size:0.68em; }
        .friend-library-main h3 { margin:3px 0 7px; overflow-wrap:anywhere; font-size:0.94em; }
        .friend-library-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--text-sub); font-size:0.78em; }
        .friend-library-progress { margin-top:6px; color:var(--text-sub); font-size:0.78em; font-variant-numeric:tabular-nums; }
        .friend-library-main details { margin-top:10px; padding-top:8px; border-top:1px solid var(--border-color); }
        .friend-library-main summary { min-height:36px; color:var(--primary-hover); cursor:pointer; font-size:0.78em; }
        .friend-library-main section { margin-top:8px; }
        .friend-library-main section strong { font-size:0.74em; }
        .friend-library-main section p { margin:4px 0 0; color:var(--text-sub); font-size:0.8em; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
        .friend-library-card-actions { display:flex; justify-content:flex-end; margin-top:8px; }
        /* ⚠️ 손가락 타깃 44px. 실측으로 36px 이던 것을 올렸다 — 신고·삭제는 잘못 누르면
           곤란한 동작이라 오히려 더 정확히 눌려야 한다. */
        .friend-record-report, .comment-report { padding:3px 7px; border:0; background:transparent; color:var(--red); cursor:pointer; font-size:0.75em; min-width:44px; min-height:44px; }
        .comment-section { padding:2px 0 4px; }
        .comment-section > h3 { margin:0 0 10px; font-size:0.9em; }
        .comment-subscription { margin:0 0 12px; padding:9px 10px; border:1px solid var(--border-color); border-radius:9px; background:var(--inset-bg); }
        .comment-subscription-main { display:flex; align-items:center; gap:8px; }
        .comment-subscription-label { flex:1; color:var(--text-main); font-size:0.8em; }
        .comment-subscription-toggle { min-width:58px; min-height:44px; padding:5px 9px; }
        .comment-subscription small { display:block; margin-top:5px; color:var(--text-dim); font-size:0.7em; }
        .comment-subscription .comment-subscription-message.error { color:var(--red); }
        .friend-comment-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border-color); }
        /* 팀(모임, 2026-10-06) — 친구 창과 같은 틀(friend-section·friend-row·friend-library-card)을 재사용한다. */
        .teams-content { width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow-y:auto; text-align:left; }
        .teams-content .modal-title { text-align:center; }
        .friend-row-copy .teams-chip { display:inline-flex; margin-top:0; font-size:0.74em; color:var(--text-sub); }
        .friend-row-copy .teams-chip.is-leader { color:var(--primary); }
        .teams-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
        .teams-title { flex:1; text-align:center; margin:0; }
        .teams-head-btn { min-width:44px; min-height:44px; }
        .teams-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
        .teams-actions > button { flex:1 1 140px; min-height:44px; }
        .teams-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
        .teams-chip { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:14px; border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-sub); font-size:0.74em; white-space:nowrap; font-family:inherit; }
        .teams-chip.is-leader { color:var(--primary); border-color:var(--primary); }
        .teams-chip.is-count { font-variant-numeric:tabular-nums; }
        button.teams-filter { cursor:pointer; min-height:36px; }
        .teams-filter.is-on { border-color:var(--primary); background:var(--primary-soft); color:var(--text-main); }
        .teams-team-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
        .teams-count { color:var(--text-dim); font-size:0.78em; }
        .teams-sub { margin:12px 0 6px; font-size:0.85em; }
        .team-media-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
        .team-media-option { min-height:44px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); color:var(--text-sub); cursor:pointer; font-family:inherit; }
        .team-media-option.is-on { border:1.5px solid var(--primary); background:var(--primary-soft); color:var(--text-main); }
        .team-media-option:disabled { opacity:.4; cursor:default; }
        button.team-row { width:100%; text-align:left; cursor:pointer; background:var(--card-bg); color:inherit; font-family:inherit; }
        .teams-chips + .teams-chips, #teamMemberChips { margin-bottom:10px; }
        /* 팀 2단계: 함께 읽는 작품 카드·진행 보드·팀 토론 */
        .team-reading-card { margin:0 0 12px; }
        .team-reading { display:grid; grid-template-columns:56px minmax(0, 1fr); gap:12px; padding:11px; border:1px solid var(--primary); border-radius:10px; background:var(--primary-soft); }
        .team-reading-cover { width:56px; height:78px; overflow:hidden; border-radius:6px; background:var(--inset-bg); }
        .team-reading-cover > img, .team-reading-cover .book-cover, .team-reading-cover .no-img { width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
        .team-reading-main { min-width:0; }
        .team-reading-main h3 { margin:2px 0 6px; font-size:0.95em; overflow-wrap:anywhere; }
        .team-reading-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
        .team-reading-actions button { min-height:36px; }
        .team-reading-empty { margin:0; padding:10px 12px; border:1px dashed var(--border-color); border-radius:10px; color:var(--text-sub); font-size:0.8em; line-height:1.5; }
        .team-board-head { margin-bottom:8px; }
        .team-board-row { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); }
        .team-board-row-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .team-board-row-head strong { font-size:0.88em; }
        .team-progress { height:8px; border-radius:4px; background:var(--inset-bg); overflow:hidden; }
        .team-progress > i { display:block; height:100%; border-radius:4px; background:var(--primary); }
        .team-progress > i.is-done { background:var(--green); }
        .team-board-meta { color:var(--text-sub); font-size:0.78em; font-variant-numeric:tabular-nums; }
        .team-board-none { color:var(--text-dim); font-size:0.78em; }
        .team-spoiler { padding:8px 10px; border-radius:8px; background:var(--inset-bg); color:var(--text-dim); font-size:0.76em; text-align:center; }
        .team-board-row details { margin-top:2px; }
        .team-board-row summary { min-height:32px; color:var(--primary-hover); cursor:pointer; font-size:0.78em; }
        .team-board-row details p { margin:4px 0 0; color:var(--text-sub); font-size:0.8em; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
        .team-post-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
        .team-post { padding:9px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); }
        .team-post-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:0.78em; color:var(--text-dim); }
        .team-post-head strong { color:var(--text-main); font-size:1em; }
        .team-post-head .friend-danger { margin-left:auto; min-height:32px; padding:0 8px; font-size:0.9em; }
        .team-post p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:0.86em; line-height:1.55; }
        .team-post-input { width:100%; box-sizing:border-box; resize:vertical; min-height:72px; }
        .team-post-actions { justify-content:space-between; margin-top:8px; }
        /* 지금 댓글을 보는 친구 기록 — 눌러 둔 카드가 어느 것인지 포커스 링이 사라진 뒤에도 남는다. */
        .friend-library-card.is-selected { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 1px var(--primary); }
        .friend-library-card.is-selected .friend-library-type::after { content:' · 댓글 보는 중'; color:var(--primary); font-weight:600; }
        .friend-comment-context { margin:8px 0 12px; padding:10px 12px; border-radius:8px; background:var(--inset-bg); }
        .friend-comment-context[hidden] { display:none; }
        .friend-comment-context section + section { margin-top:8px; }
        .friend-comment-context strong { font-size:0.74em; }
        .friend-comment-context p { margin:4px 0 0; color:var(--text-sub); font-size:0.82em; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
        .friend-comment-context .friend-comment-context-empty { margin:0; color:var(--text-dim); }
        .comment-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
        .comment-card { padding:10px 11px; border:1px solid var(--border-color); border-radius:9px; background:var(--inset-bg); }
        .comment-card-head { display:flex; align-items:center; gap:7px; color:var(--text-sub); font-size:0.72em; }
        .comment-card-head strong { color:var(--text-main); font-size:1.08em; }
        .comment-card-head time { flex:1; }
        .comment-delete { padding:3px 7px; border:0; background:transparent; color:var(--red); cursor:pointer; font-size:0.95em; min-width:44px; min-height:44px; }
        .comment-card-body { margin:7px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-main); font-size:0.84em; line-height:1.55; }
        .comment-empty { margin:8px 0 12px; color:var(--text-dim); text-align:center; font-size:0.82em; }
        .comment-form textarea { width:100%; min-height:72px; resize:vertical; box-sizing:border-box; }
        .comment-form-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; }
        .comment-form-actions span { color:var(--text-dim); font-size:0.72em; }
        .comment-form-actions .btn-save { min-width:72px; }
        .comment-message { min-height:1.4em; margin:7px 0 0; }
        .reaction-control { display:flex; align-items:center; gap:8px; min-width:0; }
        .reaction-bar { justify-content:flex-end; min-height:44px; margin:-3px 0 7px; }
        .friend-reaction-bar { margin:10px 0 0; }
        /* ⚠️ 실측 31×28 이었다. 하트는 친구 기록에서 가장 자주 누르는 버튼인데
           손가락 최소 권장(44px)의 3분의 2였다. 전 기기에서 같았다. */
        .reaction-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; min-width:44px; padding:5px 12px; border:1px solid var(--border-color); border-radius:999px; background:var(--card-bg); color:var(--text-sub); cursor:pointer; font:inherit; font-size:0.78em; }
        .reaction-button.active { border-color:#e85d75; color:#d83f5d; background:color-mix(in srgb, #e85d75 10%, var(--card-bg)); }
        .reaction-button:disabled { cursor:default; opacity:0.58; }
        .reaction-icon { font-size:1.2em; line-height:1; }
        .reaction-button.active .reaction-icon .ui-icon { fill:currentColor; }
        .reaction-count { min-width:1ch; font-variant-numeric:tabular-nums; }
        .reaction-message { min-width:0; color:var(--text-dim); font-size:0.72em; line-height:1.3; }
        .reaction-message.error { color:var(--red); }
        .reaction-card-control { display:inline-flex; margin-left:auto; }
        /* ⚠️ 카드 안 하트는 28px 이었다 — 목록에서 가장 자주 누르는 버튼인데 손가락 최소의 3분의 2다.
           보이는 알약은 그대로 두고, 위아래 여백으로 **누를 수 있는 넓이만** 44px 로 넓힌다. */
        .reaction-card-control .reaction-button { min-height:44px; padding:11px 8px; }
        .reaction-card-control .reaction-label { display:none; }
        .reaction-card-control .reaction-message { display:none; }
        .owner-badge { border:1px solid rgba(255,255,255,0.06); color:#fff; }
        /* 내 카드의 이름표는 색을 안 쓴다 — 친구는 사람마다 색이 다르고, 내 것은 하나뿐이라
           같이 칠하면 「또 다른 친구」로 읽힌다. 테두리만 있는 조용한 모양으로 둔다. */
        .own-owner-badged .owner-badge {
            background:transparent; color:var(--text-sub); border-color:var(--border-color);
        }
        body.light-mode .owner-badge { border-color:rgba(0,0,0,0.06); }
        .feedback-unread-dot {
            display:inline-block; width:9px; height:9px; margin-left:7px;
            border-radius:50%; background:var(--red); box-shadow:0 0 0 3px var(--red-soft);
            vertical-align:middle;
        }
        #moderationModal { box-sizing:border-box; padding:12px; }
        #moderationModal .moderation-content {
            width:440px !important; max-width:100%; box-sizing:border-box;
            text-align:left; overflow-x:hidden;
        }
        .moderation-notice { margin:8px 0 14px; color:var(--text-sub); font-size:0.82em; line-height:1.55; }
        .moderation-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
        .moderation-card { min-width:0; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .moderation-card-title { margin:0; color:var(--text-main); font-size:0.92em; overflow-wrap:anywhere; }
        .moderation-card-meta { margin:5px 0 0; color:var(--text-dim); font-size:0.72em; }
        .moderation-card-reason { margin:10px 0 0; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
        .moderation-appeal-open, .moderation-appeal-send { min-width:44px; min-height:44px; margin:10px 0 0; }
        .moderation-appeal-form { margin-top:10px; }
        .moderation-appeal-message { display:block; width:100%; min-height:92px; box-sizing:border-box; resize:vertical; line-height:1.5; }
        .moderation-appeal-send { width:100%; }
        .moderation-appeal-status, .moderation-appeal-message-result {
            margin:10px 0 0; color:var(--text-sub); font-size:0.78em; line-height:1.45;
        }
        .moderation-appeal-message-result.error { color:var(--red); }
        #feedbackModal, #feedbackAdminModal { box-sizing:border-box; padding:12px; }
        #feedbackModal .feedback-content, #feedbackAdminModal .feedback-content {
            width:440px !important; max-width:100%; box-sizing:border-box;
            text-align:left; overflow-x:hidden;
        }
        .feedback-label { display:block; margin-bottom:7px; font-size:0.84em; font-weight:700; }
        .feedback-textarea {
            display:block; width:100%; min-height:132px; box-sizing:border-box; resize:vertical;
            line-height:1.55; overflow-wrap:anywhere;
        }
        .feedback-compose-meta {
            display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
            min-width:0; margin-top:6px; color:var(--text-sub); font-size:0.75em;
        }
        .feedback-compose-meta > :last-child { margin-left:auto; white-space:nowrap; }
        .feedback-offline { color:var(--amber); line-height:1.45; overflow-wrap:anywhere; }
        .feedback-context-details { margin:12px 0; }
        .feedback-context-details summary { display:flex; align-items:center; min-height:44px; padding:0; }
        .feedback-context-list {
            display:grid; grid-template-columns:minmax(76px, auto) minmax(0, 1fr);
            gap:5px 10px; margin:8px 0 0; padding:9px; border-radius:8px; background:var(--inset-bg);
        }
        .feedback-context-list dt { color:var(--text-dim); }
        .feedback-context-list dd { margin:0; text-align:right; overflow-wrap:anywhere; color:var(--text-main); }
        .feedback-send { width:100%; min-height:44px; margin:0; }
        .feedback-message { min-height:1.45em; margin:7px 0 0; color:var(--text-sub); font-size:0.78em; line-height:1.45; }
        .feedback-message.error { color:var(--red); }
        .feedback-history-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; }
        .feedback-history-head h3 { margin:0; font-size:0.92em; }
        .feedback-history-head button { min-width:88px; min-height:44px; }
        .feedback-history { display:flex; flex-direction:column; gap:10px; margin-top:8px; min-width:0; }
        .feedback-card { min-width:0; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .feedback-card-time { margin:0 0 6px; color:var(--text-dim); font-size:0.7em; }
        .feedback-card-body, .feedback-reply-body { margin:0; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
        .feedback-reply { margin-top:10px; padding:10px; border-left:3px solid var(--primary); border-radius:6px; background:var(--primary-soft); }
        .feedback-reply-label { margin:0 0 5px; color:var(--primary-hover); font-size:0.75em; font-weight:700; }
        .feedback-pending { margin:10px 0 0; color:var(--text-sub); font-size:0.78em; }
        .feedback-empty { margin:0; padding:18px 8px; color:var(--text-dim); text-align:center; font-size:0.82em; }
        .feedback-admin-section { margin-top:18px; padding-top:2px; border-top:1px solid var(--border-color); }
        .feedback-admin-card.unanswered { border-left:3px solid var(--amber); }
        .feedback-admin-cover-note {
            margin:0 0 8px; font-size:0.8em; color:var(--text-sub); overflow-wrap:anywhere;
        }
        .feedback-admin-cover {
            display:block; width:auto; height:auto; max-width:100%; max-height:160px;
            margin:0 0 8px; border-radius:6px; object-fit:contain;
        }
        .feedback-admin-reply {
            display:block; width:100%; min-height:82px; margin-top:10px; box-sizing:border-box;
            resize:vertical; line-height:1.5;
        }
        .feedback-admin-actions { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; margin-top:8px; }
        .feedback-admin-send, .feedback-admin-delete { min-height:44px; margin:0; }
        .feedback-admin-delete { padding:8px 14px; border-radius:6px; cursor:pointer; }
        .feedback-admin-moderation { margin-top:10px; }
        .feedback-admin-state { margin:0 0 8px; color:var(--text-sub); font-size:0.82em; line-height:1.45; }
        .feedback-admin-moderation-reason { width:100%; min-height:44px; box-sizing:border-box; }
        .feedback-admin-moderation-actions {
            display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:8px;
        }
        .feedback-admin-moderation-actions button { min-width:44px; min-height:44px; margin:0; }
        .account-usage-totals {
            display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:8px;
        }
        .account-usage-stat { min-width:0; padding:10px 6px; border-radius:9px; background:var(--inset-bg); text-align:center; }
        .account-usage-stat strong, .account-usage-stat span { display:block; overflow-wrap:anywhere; }
        .account-usage-stat strong { font-size:0.95em; }
        .account-usage-stat span { margin-top:3px; color:var(--text-dim); font-size:0.7em; }
        .account-usage-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
        .account-usage-card-head {
            display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
            min-height:44px; cursor:pointer; list-style:none;
        }
        .account-usage-card-head::-webkit-details-marker { display:none; }
        .account-usage-card-head::after { content:'⌄'; margin-left:auto; color:var(--primary); flex:0 0 auto; }
        .account-usage-card[open] > .account-usage-card-head::after { content:'⌃'; }
        .account-usage-card-head:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
        .account-usage-card-head strong { font-size:0.84em; }
        .account-usage-card-head span { color:var(--text-sub); font-size:0.74em; text-align:right; }
        .account-usage-counts {
            display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px 8px;
            margin:10px 0 0; padding:9px; border-radius:8px; background:var(--card-bg);
        }
        .account-usage-counts dt { color:var(--text-dim); font-size:0.68em; }
        .account-usage-counts dd { margin:0; text-align:right; font-size:0.76em; font-weight:700; }
        .account-usage-times { margin:9px 0 0; line-height:1.45; }
        @media (max-width:360px) {
            #feedbackModal .feedback-content, #feedbackAdminModal .feedback-content { padding-left:12px; padding-right:12px; }
            .feedback-compose-meta { flex-wrap:wrap; }
            .feedback-context-list { grid-template-columns:1fr; }
            .feedback-context-list dd { text-align:left; margin-bottom:4px; }
            .account-usage-counts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .account-usage-card-head { align-items:center; }
            .account-usage-card-head span { text-align:left; }
        }
        @media (max-width: 360px) {
            .settings-action-grid { grid-template-columns:1fr; }
            .settings-security-meta { display:none; }
        }
        @media (max-width: 520px) {
            /* 좁은 화면에서는 한 칸으로 쌓는다. auto 칸이 남으면 이름이 다시 눌린다. */
            .friend-row { grid-template-columns:minmax(0, 1fr); }
            .friend-row-actions { grid-column:1; justify-self:stretch; width:100%; justify-content:flex-start; }
            .friend-alias-control { width:100%; justify-content:flex-start; }
            .friend-alias-control input { flex:1; width:auto; min-width:120px; }
            .friend-library-card { grid-template-columns:56px minmax(0, 1fr); }
            .friend-library-cover { width:56px; height:80px; }
            .trash-item { align-items:stretch; flex-direction:column; }
            .trash-item-actions button { flex:1; }
        }

        /* 백업 리마인더 배너 */
        .backup-banner { display:flex; align-items:center; gap:12px; background:var(--amber-soft); border:1px solid var(--amber); border-radius:var(--radius); padding:11px 14px; margin-bottom:16px; font-size:0.86em; }
        .sync-banner { padding:5px 10px; margin-bottom:8px; }
        .sync-banner:not(.sync-banner-failed) { background:var(--inset-bg); border-color:var(--border-color); }
        #syncStatus.sync-status-synced { width:fit-content; max-width:100%; margin:12px auto 0; padding:6px 10px; border:1px solid var(--green-soft); border-radius:999px; background:var(--green-soft); color:var(--green); font-weight:600; }
        #syncStatus.sync-status-synced::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:currentColor; vertical-align:1px; }
        .backup-banner .bb-text { flex:1; min-width:0; color:var(--text-main); }
        /* 업데이트 안내는 백업 배너와 같은 자리·같은 모양을 쓴다. 새 요소를 만들지 않는다. */
        .update-banner { border-color:var(--accent-base); }
        .backup-banner button { min-width:44px; min-height:44px; border:none; border-radius:var(--radius-sm); padding:7px 12px; font-size:0.92em; cursor:pointer; font-weight:600; white-space:nowrap; }
        .backup-banner .bb-do { background:var(--amber); color:#1a1206; }
        .backup-banner .bb-x { background:transparent; color:var(--text-sub); padding:7px 8px; }
        #backupBanner { background:var(--inset-bg); border-color:var(--border-color); }
        #backupBanner .bb-do { background:transparent; color:var(--text-sub); text-decoration:underline; text-underline-offset:3px; }
        #backupBanner.backup-warning { background:var(--amber-soft); border-color:var(--amber); }
        #backupBanner.backup-warning .bb-do { background:var(--amber); color:#1a1206; text-decoration:none; }
        .heatmap-wrap { max-width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; }
        .heatmap { display:flex; gap:3px; }
        .hm-months { display:flex; gap:3px; height:14px; margin-bottom:3px; }
        .hm-mcol { width:12px; flex:0 0 12px; font-size:0.66em; line-height:14px; color:var(--text-sub); white-space:nowrap; overflow:visible; }
        .hm-col { display:flex; flex-direction:column; gap:3px; }
        .hm-cell { width:12px; height:12px; border-radius:2px; background:var(--inset-bg); }
        .hm-cell[data-date] { cursor:pointer; }
        .hm-cell[data-date]:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
        .hm-l0 { background:var(--inset-bg); }
        .hm-l1 { background:var(--hm1); }
        .hm-l2 { background:var(--hm2); }
        .hm-l3 { background:var(--hm3); }
        .hm-l4 { background:var(--hm4); }
        .hm-legend { display:flex; align-items:center; gap:5px; justify-content:flex-start; margin-top:8px; font-size:0.72em; color:var(--text-dim); }
        /* 리와인드 */
        .rw-tabs { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
        .rw-tab { padding:6px 16px; border-radius:20px; border:1px solid var(--border-color); background:transparent; color:var(--text-sub); cursor:pointer; font-size:0.85em; }
        .rw-tab.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); font-weight:600; }
        .rewind-preview { border-radius:12px; overflow:hidden; max-width:320px; margin:0 auto 16px; box-shadow:var(--shadow-strong); }
        /* 감상평 모음 */
        .pace-hint { display:none; margin:-2px 0 14px; padding:10px 12px; border-left:3px solid var(--accent, #7c8df0); border-radius:6px; background:var(--primary-soft); color:var(--text-sub); font-size:0.8em; line-height:1.55; }
        .pace-hint b { color:var(--text-main); }
        .review-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 12px; margin-bottom:12px; border-radius:8px; background:var(--inset-bg); font-size:0.82em; }
        .needs-review { display:inline-block; padding:3px 7px; border:1px solid var(--accent, #7c8df0); border-radius:999px; color:var(--accent, #7c8df0); font-size:0.72em; font-weight:600; }
        /* 웹툰 · 웹소설 공용 보기 */
        .media-view-modal { width:min(520px, calc(100vw - 28px)) !important; text-align:left; max-height:90vh; overflow-y:auto; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
        .media-weekly-list, .media-reviews-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
        .media-weekly-section { min-width:0; overflow:hidden; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); }
        .media-weekly-section.today { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); background:var(--primary-soft); }
        .media-weekly-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:9px 12px; color:var(--text-main); font-size:0.88em; font-weight:650; }
        .media-weekly-heading span { color:var(--text-sub); font-size:0.82em; font-weight:500; }
        .media-weekly-item { display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:0; border-top:1px solid var(--divider); border-radius:0; background:var(--card-bg); text-align:left; white-space:normal; }
        .media-weekly-item:hover { background:var(--card-bg-hover); }
        .media-weekly-name { flex:1; min-width:0; color:var(--text-main); font-size:0.92em; font-weight:600; overflow-wrap:anywhere; }
        .media-weekly-meta { flex:0 1 48%; min-width:0; color:var(--text-sub); font-size:0.78em; font-weight:400; line-height:1.45; text-align:right; overflow-wrap:anywhere; }
        .media-weekly-empty { padding:11px 12px; border-top:1px solid var(--divider); color:var(--text-dim); font-size:0.8em; text-align:center; }
        .media-review-item { display:flex; align-items:flex-start; gap:12px; width:100%; min-width:0; min-height:98px; padding:12px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); text-align:left; white-space:normal; font-weight:400; }
        @media (hover: hover) and (pointer: fine) {
            .media-review-item:hover { border-color:var(--primary); }
        }
        .media-review-cover { display:flex; align-items:center; justify-content:center; width:52px; height:74px; flex:0 0 52px; overflow:hidden; border-radius:4px; background:var(--inset-bg); color:var(--text-dim); }
        .media-review-cover img { width:100%; height:100%; object-fit:cover; }
        .media-review-cover-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:1.25em; }
        .media-review-body { min-width:0; flex:1; }
        .media-review-title { display:block; margin-bottom:5px; color:var(--text-main); font-size:0.92em; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
        .media-review-meta { display:block; margin-bottom:7px; color:var(--text-sub); font-size:0.75em; line-height:1.4; overflow-wrap:anywhere; }
        .media-review-summary { display:block; color:var(--text-sub); font-size:0.82em; line-height:1.55; overflow-wrap:anywhere; }
        .media-quote-editor { min-width:0; margin-bottom:10px; }
        .media-quote-editor-label { margin-bottom:6px; color:var(--text-sub); font-size:0.8em; }
        .media-quote-row { display:grid; grid-template-columns:72px minmax(0, 1fr) 44px; align-items:start; gap:6px; min-width:0; margin-bottom:6px; }
        #webtoonModal .modal-content, #webnovelModal .modal-content, #movieModal .modal-content, #animeModal .modal-content, #unifiedQuotesModal .media-quotes-modal { max-width:calc(100vw - 40px) !important; }
        .media-quote-episode-input, .media-quote-text-input { width:100%; min-width:0; min-height:44px; padding:8px; font-size:0.85em; }
        .media-quote-text-input { resize:vertical; font-family:inherit; }
        /* 구절 칸이 2줄 고정이라 조금만 길어도 안에서 스크롤해야 했다(사장님 「너무 작다」, 2026-09-29).
           기본 4줄쯤, 내용이 길면 화면 절반까지 따라 늘어난다. field-sizing 을 모르는 옛 브라우저는 rows=4 고정. */
        /* 로그아웃 확인창의 「다른 기기에서도 모두 로그아웃」 — 평소 로그아웃은 이 기기만(2026-10-01). */
        .logout-all-devices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:44px; margin:10px 0 16px; font-size:0.9em; cursor:pointer; }
        .logout-all-devices input { width:20px; height:20px; margin:0; }
        .logout-all-devices small { flex-basis:100%; padding-left:28px; color:var(--text-sub); font-size:0.85em; }
        .quote-text-input, .media-quote-text-input { field-sizing:content; min-height:6.2em; max-height:50vh; line-height:1.45; }
        .media-quote-delete { width:44px; height:44px; padding:0; border:1px solid var(--red); border-radius:4px; background:transparent; color:var(--red); cursor:pointer; }
        .media-quote-add { width:100%; min-height:44px; padding:8px 12px; border:1px dashed var(--border-color); border-radius:4px; background:transparent; color:var(--text-sub); cursor:pointer; font-size:0.85em; }
        .media-season-editor { min-width:0; margin-bottom:10px; }
        .media-season-editor-label { margin-bottom:6px; color:var(--text-sub); font-size:0.8em; }
        .media-season-list { min-width:0; }
        .media-season-row { display:grid; grid-template-columns:58px minmax(70px, 96px) 18px 40px; align-items:center; gap:6px; min-width:0; margin-bottom:6px; }
        .media-season-label, .media-season-unit { color:var(--text-sub); font-size:0.82em; white-space:nowrap; }
        .media-season-count { width:100%; min-width:0; min-height:40px; padding:7px 8px; box-sizing:border-box; text-align:right; }
        .media-season-delete { width:40px; height:40px; padding:0; border:1px solid var(--red); border-radius:4px; background:transparent; color:var(--red); cursor:pointer; }
        .media-season-delete:disabled { visibility:hidden; cursor:default; }
        .media-season-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
        .media-season-add { min-height:44px; padding:7px 12px; border:1px dashed var(--border-color); border-radius:4px; background:transparent; color:var(--text-sub); cursor:pointer; font-size:0.82em; white-space:nowrap; }
        .media-season-summary { min-width:0; color:var(--text-sub); font-size:0.78em; text-align:right; overflow-wrap:anywhere; }
        .media-season-hint { min-height:1.2em; margin-top:4px; color:var(--text-sub); font-size:0.72em; }
        .boardgame-play-editor { min-width:0; margin-top:14px; }
        .boardgame-play-editor-label { margin-bottom:6px; color:var(--text-sub); font-size:0.8em; }
        .boardgame-play-summary { margin-bottom:8px; color:var(--text-sub); font-size:0.78em; line-height:1.45; overflow-wrap:anywhere; }
        .boardgame-play-record-row { display:grid; grid-template-columns:132px minmax(0, 1.2fr) minmax(0, .9fr) 44px; align-items:start; gap:6px; min-width:0; margin-bottom:6px; }
        .boardgame-play-record-row input { width:100%; min-width:0; min-height:44px; padding:8px; box-sizing:border-box; font-size:0.82em; }
        .boardgame-play-note { grid-column:1 / 4; }
        .boardgame-play-delete { width:44px; height:44px; padding:0; border:1px solid var(--red); border-radius:4px; background:transparent; color:var(--red); cursor:pointer; }
        .boardgame-play-add { width:100%; min-height:44px; padding:8px 12px; border:1px dashed var(--border-color); border-radius:4px; background:transparent; color:var(--text-sub); cursor:pointer; font-size:0.85em; }
        .media-quotes-search { width:100%; min-height:44px; margin-bottom:12px; font-size:0.9em; }
        .media-quotes-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
        .media-quotes-count { color:var(--text-sub); font-size:0.7em; font-weight:500; }
        .media-quote-card { display:block; width:100%; min-width:0; min-height:44px; padding:12px 14px; border:1px solid var(--border-color); border-radius:8px; background:var(--inset-bg); text-align:left; white-space:normal; font-weight:400; }
        @media (hover: hover) and (pointer: fine) {
            .media-quote-card:hover { border-color:var(--primary); }
        }
        .media-quote-card-text { display:block; color:var(--text-main); font-size:0.95em; font-style:italic; line-height:1.6; overflow-wrap:anywhere; }
        .media-quote-card-text.quote-formatted-table { overflow-wrap:normal; font-style:normal; }
        .media-quote-card-meta { display:block; margin-top:8px; color:var(--text-sub); font-size:0.78em; line-height:1.45; text-align:right; overflow-wrap:anywhere; }
        .media-quotes-modal .btn-close { min-height:44px; }
        .unified-record-head { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
        .unified-media-badge { display:inline-flex; align-items:center; min-height:22px; padding:2px 7px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:0.72em; font-style:normal; font-weight:700; line-height:1.2; }
        .unified-record-pagination { margin-top:12px; }
        .media-empty { padding:24px 12px; color:var(--text-dim); text-align:center; font-size:0.88em; }
        .media-modal-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:16px; }
        .media-modal-actions .btn-save { margin-right:0; }
        #mediaBestModal .media-modal-actions { position:sticky; bottom:0; z-index:1; padding-top:10px; border-top:1px solid var(--border-color); background:var(--card-bg); }
        .share-card-preview-content { width:min(460px, 92vw); }
        .share-card-preview-image { display:block; width:100%; max-height:68vh; object-fit:contain; border-radius:8px; background:var(--inset-bg); }
        .share-card-preview-actions { display:flex; justify-content:center; gap:6px; margin-top:14px; flex-wrap:wrap; }
        .share-card-preview-actions .btn-save { margin-right:0; }
        .media-best-source-item { display:inline-flex; min-width:0; max-width:100%; }
        .media-best-source-item[hidden] { display:none; }
        .media-best-source-item .rw-tab { min-width:0; }
        .media-best-source-order-list { display:flex; flex-direction:column; width:100%; min-width:0; margin-bottom:14px; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; }
        .media-best-source-order-list[hidden] { display:none; }
        .media-best-source-order-row { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; align-items:center; gap:8px; width:100%; min-width:0; min-height:52px; padding:4px 8px; background:var(--card-bg); }
        .media-best-source-order-row + .media-best-source-order-row { border-top:1px solid var(--divider); }
        .media-best-source-order-row.is-active { background:var(--primary-soft); }
        .media-best-source-order-rank { color:var(--text-dim); font-size:.82em; text-align:center; }
        .media-best-source-order-name { min-width:0; overflow:hidden; color:var(--text-main); font-size:.88em; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
        .media-best-source-order-moves { display:flex; flex:0 0 auto; gap:4px; }
        .media-best-source-move { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--inset-bg); color:var(--text-sub); cursor:pointer; }
        .media-best-source-move:disabled { opacity:.35; cursor:not-allowed; }
        .media-best-source-order-actions { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:-8px 0 14px; }
        .media-best-source-order-actions .btn-ghost { padding:6px 12px; border:1px solid var(--border-color); border-radius:20px; font-size:.8em; cursor:pointer; }
        .media-best-list { display:flex; flex-direction:column; gap:8px; min-width:0; }
        .media-best-item { display:grid; grid-template-columns:30px 52px minmax(0, 1fr) auto; align-items:center; gap:10px; min-width:0; padding:10px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); }
        .media-best-rank { color:var(--primary); font-size:1.02em; font-weight:750; text-align:center; }
        .media-best-cover { display:flex; align-items:center; justify-content:center; width:52px; height:74px; overflow:hidden; border:1px solid var(--border-color); border-radius:5px; background:var(--inset-bg); color:var(--text-dim); }
        .media-best-cover img { width:100%; height:100%; object-fit:cover; }
        .media-best-info { min-width:0; }
        .media-best-title { color:var(--text-main); font-size:0.92em; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
        .media-best-author { margin-top:4px; color:var(--text-sub); font-size:0.77em; line-height:1.4; overflow-wrap:anywhere; }
        .media-best-platform { display:inline-block; max-width:100%; margin-top:4px; padding:2px 6px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:0.7em; line-height:1.4; overflow-wrap:anywhere; }
        .media-best-add { min-width:58px; min-height:44px; margin:0; padding:8px 10px; }
        .media-best-add:disabled { opacity:.58; cursor:not-allowed; }
        .media-report-summary { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
        .media-report-stat { min-width:0; padding:12px 9px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); text-align:center; }
        .media-report-stat-value { color:var(--text-main); font-size:1.22em; font-weight:750; line-height:1.25; overflow-wrap:anywhere; }
        .media-report-stat-label { margin-top:4px; color:var(--text-sub); font-size:0.72em; line-height:1.4; }
        .media-report-section + .media-report-section { margin-top:18px; }
        .media-report-heading { margin:0 0 9px; color:var(--text-main); font-size:0.86em; font-weight:650; }
        .media-report-rows { display:flex; flex-direction:column; gap:8px; }
        .media-report-row { display:grid; grid-template-columns:minmax(72px, 1fr) minmax(90px, 1.45fr) auto; align-items:center; gap:8px; min-width:0; }
        .media-report-row::before, .media-report-row::after { content:""; grid-column:2; grid-row:1; height:9px; border-radius:999px; }
        .media-report-row::before { width:100%; background:var(--inset-bg); }
        .media-report-row::after { width:var(--media-report-percent); max-width:100%; background:var(--primary); }
        .media-report-label { grid-column:1; grid-row:1; min-width:0; color:var(--text-sub); font-size:0.78em; line-height:1.35; overflow-wrap:anywhere; }
        .media-report-count { grid-column:3; grid-row:1; min-width:2.5em; color:var(--text-main); font-size:0.76em; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
        .media-stats-months { display:flex; flex-direction:column; gap:8px; }
        .media-stats-month-row { display:grid; grid-template-columns:minmax(72px, 1fr) minmax(90px, 1.45fr) auto; align-items:center; gap:8px; min-width:0; }
        .media-stats-month-row::before, .media-stats-month-row::after { content:""; grid-column:2; grid-row:1; height:9px; border-radius:999px; }
        .media-stats-month-row::before { width:100%; background:var(--inset-bg); }
        .media-stats-month-row::after { width:var(--media-stats-percent); max-width:100%; background:var(--primary); }
        .media-stats-month-label { grid-column:1; grid-row:1; min-width:0; color:var(--text-sub); font-size:0.78em; line-height:1.35; }
        .media-stats-month-count { grid-column:3; grid-row:1; min-width:2.5em; color:var(--text-main); font-size:0.76em; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
        .media-roulette-result { display:flex; align-items:center; justify-content:center; gap:16px; min-width:0; min-height:150px; margin:14px 0; padding:14px; border-radius:12px; background:var(--inset-bg); text-align:left; }
        .media-roulette-cover { display:flex; align-items:center; justify-content:center; width:88px; height:124px; flex:0 0 88px; overflow:hidden; border-radius:7px; background:var(--card-bg); color:var(--text-dim); }
        .media-roulette-cover img { width:100%; height:100%; object-fit:cover; }
        .media-roulette-cover-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:1.8em; }
        .media-roulette-copy { min-width:0; flex:1; }
        .media-roulette-title { color:var(--text-main); font-size:1.08em; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
        .media-roulette-meta { margin-top:8px; color:var(--text-sub); font-size:0.8em; line-height:1.5; overflow-wrap:anywhere; }
        .media-roulette-hint { color:var(--text-sub); font-size:0.82em; line-height:1.55; text-align:center; }
        .media-roulette-result.is-empty { display:block; min-height:0; padding:28px 14px; text-align:center; }
        .media-roulette-result.is-empty .media-roulette-title { font-size:0.94em; }
        .media-roulette-result.is-empty .media-roulette-meta { margin-top:5px; }
        .media-roulette-actions button:disabled { opacity:.45; cursor:not-allowed; }
        .media-rewind-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
        .media-rewind-top { padding:13px 12px; border:1px solid var(--border-color); border-radius:10px; background:var(--inset-bg); min-width:0; }
        .media-rewind-top-label { color:var(--text-sub); font-size:0.72em; }
        .media-rewind-top-value { margin-top:5px; color:var(--text-main); font-size:0.94em; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
        .media-rewind-ranking { margin:0; padding:0; list-style:none; border:1px solid var(--border-color); border-radius:10px; overflow:hidden; }
        .media-rewind-rank { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:8px; min-height:52px; padding:9px 11px; background:var(--card-bg); }
        .media-rewind-rank + .media-rewind-rank { border-top:1px solid var(--divider); }
        .media-rewind-number { color:var(--primary); font-weight:750; }
        .media-rewind-work { min-width:0; }
        .media-rewind-title { color:var(--text-main); font-size:0.84em; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
        .media-rewind-meta { margin-top:3px; color:var(--text-sub); font-size:0.7em; line-height:1.35; overflow-wrap:anywhere; }
        .media-rewind-episodes { color:var(--text-main); font-size:0.8em; font-weight:650; white-space:nowrap; }
        .media-rewind-basis { margin:16px 0 0; color:var(--text-dim); font-size:0.72em; line-height:1.5; text-align:center; }

        /* 검색 플랫폼 선택 칩 */
        .plat-chips { display:flex; gap:6px; flex-wrap:wrap; }
        .plat-chip { min-height:38px; padding:7px 11px; border-radius:999px; border:1px solid var(--border-color); background:transparent; color:var(--text-sub); cursor:pointer; font-size:0.8em; font-family:inherit; }
        .plat-chip.on { background:var(--primary); color:var(--on-primary); border-color:var(--primary); font-weight:600; }
        /* 가이드 */
        .guide-copy { color:var(--text-main); font-size:0.88em; line-height:1.6; }
        .guide-intro { margin:0 0 14px; color:var(--text-sub); }
        .guide-section-title { margin:17px 0 8px; color:var(--primary); font-size:0.84em; font-weight:700; }
        .guide-item { padding:10px 12px; margin-bottom:8px; background:var(--inset-bg); border-left:3px solid var(--primary); border-radius:6px; }
        .guide-item > b:first-child { display:block; margin-bottom:5px; color:var(--text-main); }
        .guide-item p { margin:0; }
        .guide-item p + p { margin-top:7px; }
        .guide-list { margin:5px 0 7px; padding-left:20px; color:var(--text-sub); }
        .guide-list li + li { margin-top:3px; }
        .guide-list b { color:var(--text-main); }
        .guide-content {
            position:relative;
            display:flex;
            flex-direction:column;
            overflow:hidden !important;
        }
        .guide-scroll-body { min-height:0; overflow-y:auto; padding-right:2px; }
        .guide-actions {
            flex:0 0 auto;
            margin-top:12px;
            padding:12px 0 max(2px, env(safe-area-inset-bottom));
            text-align:center;
            background:var(--card-bg);
            border-top:1px solid var(--divider);
        }
        /* 첫 로그인 튜토리얼 — 320px 화면에서도 한 단계만 짧게 보여준다. */
        #tutorialModal { padding:12px; }
        .tutorial-content {
            width:420px;
            max-width:calc(100vw - 24px);
            max-height:calc(100dvh - 24px);
            overflow-y:auto;
            text-align:left;
        }
        .tutorial-step[hidden] { display:none; }
        .tutorial-step { min-height:128px; }
        .tutorial-step .modal-title { margin-bottom:12px; font-size:1.15em; }
        .tutorial-body { color:var(--text-sub); font-size:0.88em; line-height:1.55; word-break:keep-all; }
        .tutorial-body p { margin:0; }
        .tutorial-body p + p { margin-top:8px; }
        .tutorial-body b { color:var(--text-main); }
        .tutorial-progress { display:flex; justify-content:center; gap:7px; margin:18px 0 14px; }
        .tutorial-dot { width:7px; height:7px; border-radius:50%; background:var(--border-color); }
        .tutorial-dot.active { width:18px; border-radius:999px; background:var(--primary); }
        .tutorial-actions { display:flex; justify-content:space-between; gap:8px; }
        .tutorial-actions button { min-width:96px; }
        .tutorial-actions .btn-save { margin-right:0; }
        /* 모드 스위처 */
        /* 로그인 게이트 — 처음 여는 사람이 이 앱이 뭔지 알 수 있게. 게이트일 때만 나온다. */
        .auth-brand { text-align:center; margin-bottom:14px; }
        .auth-brand-name { font-size:1.7em; font-weight:700; color:var(--text-main); letter-spacing:-0.02em; }
        .auth-brand-tagline { margin-top:2px; font-size:0.9em; font-weight:500; color:var(--primary); }
        .auth-brand-desc {
            margin:10px 0 0; color:var(--text-dim); font-size:0.78em; line-height:1.5;
            word-break:keep-all; overflow-wrap:normal;
        }
        .auth-entry-options { display:grid; gap:8px; position:relative; }
        .auth-password-panel:not([hidden]) { display:contents; }
        .auth-entry-options .auth-field-label { margin-bottom:-6px; color:var(--text-sub); font-size:.8em; line-height:1.2; }
        .auth-entry-options #authUsernameLabel { order:1; }
        .auth-entry-options #authUsername { order:2; margin-bottom:0 !important; }
        .auth-entry-options #authPasswordLabel { order:3; }
        .auth-entry-options #authPassword { order:4; margin-bottom:0 !important; }
        .auth-entry-options .btn-save.auth-primary { order:5; }
        .auth-entry-options .auth-google-button { order:6; }
        .auth-tier-gap { order:7; height:4px; }
        .auth-entry-options .auth-secondary { order:8; }
        .auth-entry-options .auth-register-action { order:8; }
        .auth-entry-options .auth-register-action:not([hidden]) { display:grid; gap:4px; }
        .auth-register-hint { margin:0; color:var(--text-sub); font-size:.78em; line-height:1.4; text-align:center; }
        .auth-entry-options .auth-guest-button { order:9; }
        .auth-entry-options .auth-guest-note { order:10; }
        .auth-entry-options .auth-google-only { order:11; }
        .auth-primary { width:100%; height:46px; min-height:46px; margin-right:0; font-size:0.98em; }
        .auth-google-button {
            display:flex; align-items:center; justify-content:center; gap:11px;
            padding:9px 18px; border:1px solid #747775;
            border-radius:var(--radius-sm); background:#fff; color:var(--on-primary);
            font-family:inherit; font-size:0.98em; font-weight:600; line-height:1.25;
            cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,0.12);
        }
        .auth-google-button:hover { background:#f8fafc; border-color:#5f6368; }
        .auth-google-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
        .auth-google-button[hidden] { display:none; }
        .auth-google-logo { width:19px; height:19px; flex:0 0 19px; }
        .auth-guest-button { width:100%; min-height:48px; color:var(--text-main); border:1px solid var(--border-color); background:var(--card-bg); }
        .auth-guest-button:hover { color:var(--text-main); border-color:var(--border-color); background:var(--inset-bg); }
        .auth-guest-note { margin:-4px 0 0; color:var(--text-sub); font-size:.78em; line-height:1.4; text-align:center; }
        .auth-google-only { margin:2px 0 0; text-align:center; color:var(--text-dim); font-size:0.78em; }
        /* 로그인 방법을 기다리는 자리(index.html #authMethodsPending). 진짜 입력·버튼과 같은 요소라 높이가 같고,
           보이지 않게(visibility) 자리만 차지한다. 응답이 와서 진짜 버튼으로 바뀌어도 「둘러보기」가 움직이지 않는다.
           ⚠️ .auth-gated #authModal * { visibility:visible } 보다 구체적이어야 한다(아이디 1 + 클래스 2). */
        .auth-methods-pending { display:none; }
        .auth-caps-pending .auth-methods-pending { display:contents; }
        #authModal .auth-entry-options .auth-pending-slot { visibility:hidden; pointer-events:none; }
        .auth-entry-options .auth-pending-slot[data-slot] { width:100%; box-sizing:border-box; margin:0; }
        .auth-entry-options .auth-pending-slot[data-slot="username"] { order:1; }
        .auth-entry-options .auth-pending-slot[data-slot="password"] { order:2; }
        .auth-caps-no-password .auth-pending-slot[data-cap="password"],
        .auth-caps-no-register .auth-pending-slot[data-cap="register"],
        .auth-caps-no-google .auth-pending-slot[data-cap="google"] { display:none; }
        /* 안내 한 줄은 첫 줄 자리 위에 겹쳐 띄운다 — 자기 높이를 보태면 비워 둔 자리가 그만큼 커진다. */
        .auth-pending-label {
            position:absolute; grid-column:1; grid-row:1 / 2; inset:0; margin:0;
            display:flex; align-items:center; justify-content:center;
            color:var(--text-sub); font-size:0.85em; pointer-events:none;
        }
        /* 44px 손가락 타깃을 음수 마진으로 만들면, 보이지 않는 상자가 위아래 글줄을 15px 씩
           덮는다. 360px 에서 소개 문구와 안내 문구가 실제로 이 링크의 터치 영역 안에 들어와
           있었다. 자리를 실제로 차지하게 두고 둘레 여백에서 그만큼을 덜어낸다. */
        .auth-legal { display:flex; justify-content:center; margin:4px 0 0; text-align:center; font-size:0.76em; }
        .auth-legal a {
            display:inline-flex; align-items:center; min-height:44px; padding-inline:8px;
            border:0; background:transparent; box-shadow:none; color:var(--text-dim); text-decoration:none;
        }
        .auth-legal a > span { text-decoration:underline; text-underline-offset:3px; }
        .auth-legal a:hover { color:var(--text-sub); }
        /* 기본 초점 테두리는 44px 상자를 통째로 둘러 흰 사각형처럼 보인다. 안쪽으로 당긴다. */
        .auth-legal a:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; border-radius:var(--radius-sm); }
        .auth-secondary {
            width:100%; min-height:44px; border:1px solid var(--primary);
            background:var(--primary-soft); color:var(--primary-hover); font-weight:600;
        }
        .auth-secondary:hover { border-color:var(--primary-hover); color:var(--text-main); }
        /* 게이트는 모달이 아니라 화면이다 — 떠 있는 카드처럼 보이지 않게 한다. */
        .auth-gated #authModal { align-items:stretch; padding:0; }
        .auth-gated #authModal .modal-content {
            width:100% !important; max-width:420px; margin:0 auto; border:0; border-radius:0;
            box-shadow:none; background:transparent;
            /* 카드가 아니라 화면이므로 90vh 로 잘리면 안 된다 — 잘리면 안쪽 스크롤이 생긴다. */
            max-height:100dvh;
            /* 세로 정중앙에 두면 아래로 쏠려 보인다. 위쪽에서 시작하되 숨 쉴 여백만. */
            padding:10vh 22px calc(32px + env(safe-area-inset-bottom));
        }
        @media (max-height: 700px) {
            .auth-gated #authModal .modal-content {
                max-height:100dvh; padding:calc(12px + env(safe-area-inset-top)) 22px calc(12px + env(safe-area-inset-bottom)) !important;
            }
            .auth-brand { margin-bottom:10px; }
            .auth-brand-desc { margin-top:6px; }
            .auth-gated #authIntro { margin-top:0; margin-bottom:8px !important; }
            .auth-gated .auth-gate-backup { margin-top:8px; padding-top:4px; }
            .auth-gated .auth-legal { margin-top:0; }
            .auth-gated #authMsg:empty { min-height:0 !important; margin-top:0 !important; }
        }
        .auth-gate-backup summary {
            display:flex; min-height:44px; align-items:center; justify-content:center; gap:5px;
            list-style:none; cursor:pointer; text-align:center;
            color:var(--text-dim); font-size:0.78em; padding:6px 0;
        }
        .auth-gate-backup summary::after { content:'▾'; font-size:0.9em; }
        .auth-gate-backup[open] summary::after { content:'▴'; }
        .auth-gate-backup summary::-webkit-details-marker { display:none; }
        .auth-gate-backup summary:hover { color:var(--text-sub); }
        .auth-gate-backup { margin-top:14px; padding-top:14px; border-top:1px solid var(--divider); text-align:center; }
        .auth-gate-backup p { margin:0 0 9px; color:var(--text-dim); font-size:0.76em; line-height:1.45; }
        .auth-gate-backup .btn-ghost { width:100%; min-height:44px; }
        .deletion-login-warning { padding:16px; border:1px solid var(--amber); border-radius:var(--radius); background:var(--amber-soft); }
        .deletion-login-warning p { margin:0; color:var(--text-sub); font-size:0.84em; line-height:1.6; }
        .deletion-login-warning .deletion-login-title { margin-bottom:6px; color:var(--text-main); font-size:0.92em; }
        .deletion-login-warning strong { color:var(--red); }
        .deletion-login-actions { display:flex; gap:8px; margin-top:14px; }
        .deletion-login-actions button { flex:1; min-height:44px; }
        .deletion-login-actions .bb-do { border:0; border-radius:var(--radius-sm); background:var(--amber); color:#1a1206; font-weight:600; cursor:pointer; }
        .offline-banner { border-color:var(--primary); background:var(--primary-soft); }
        .offline-banner .bb-text { line-height:1.45; }
        .guest-banner { border-color:var(--amber); background:var(--amber-soft); }
        /* 전체 공지(2026-10-06): 안내=기본 띠, 중요=노란 띠. 글은 길어도 줄바꿈으로 다 보인다. */
        .announcement-banner { border-color:var(--primary); background:var(--primary-soft); }
        .announcement-banner[data-level="warn"] { border-color:var(--amber); background:var(--amber-soft); }
        .announcement-banner[hidden] { display:none; }
        .announcement-banner .bb-text { line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; word-break:keep-all; min-width:0; }
        .announcement-banner .bb-link { flex:none; align-self:center; min-height:32px; padding:4px 10px; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; font-size:0.78em; cursor:pointer; }
        .announcements-content { max-width:480px; }
        .announcements-list { display:flex; flex-direction:column; gap:10px; margin:0 0 12px; max-height:min(60vh, 520px); overflow-y:auto; }
        .update-notes-content { max-width:520px; display:flex; flex-direction:column; overflow:hidden; }
        .update-notes-content > .modal-title,
        .update-notes-content > .settings-group-copy { flex-shrink:0; }
        .update-notes-list { display:flex; flex:1 1 auto; flex-direction:column; gap:10px; min-height:0; margin:0 0 12px; overflow-y:auto; overscroll-behavior:contain; }
        .update-notes-day { padding:12px; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--card-bg); }
        .update-notes-day h3 { margin:0 0 8px; color:var(--text-main); font-size:0.94em; }
        .update-notes-day ul { display:grid; gap:6px; margin:0; padding-left:1.15em; }
        .update-notes-day li { color:var(--text-sub); line-height:1.5; overflow-wrap:anywhere; }
        .update-notes-empty { margin:0; padding:18px 8px; text-align:center; opacity:0.75; }
        .announcement-item { text-align:left; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--card-bg); }
        .announcement-item[data-live="1"] { border-color:var(--primary); background:var(--primary-soft); }
        .announcement-item[data-level="warn"] { border-color:var(--amber); }
        .announcement-item-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:6px; font-size:0.78em; color:var(--text-sub); }
        .announcement-item-tag, .announcement-item-live { padding:1px 8px; border-radius:999px; border:1px solid currentColor; word-break:keep-all; }
        .announcement-item-live { color:var(--primary); }
        .announcement-item-tools { margin-left:auto; display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
        .announcement-item-btn { min-height:32px; padding:2px 10px; font-size:1em; }
        .announcement-edit { display:flex; flex-direction:column; gap:8px; }
        .announcement-edit-text { width:100%; box-sizing:border-box; padding:8px; font:inherit; line-height:1.5; resize:vertical; }
        .announcement-edit-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
        .announcement-edit-row select { min-height:36px; }
        .announcement-edit-count { margin-left:auto; font-size:0.9em; opacity:0.7; }
        .announcement-edit-actions { display:flex; gap:8px; }
        .announcement-item-text { margin:0; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; word-break:keep-all; }
        .announcements-empty { margin:0; padding:18px 8px; text-align:center; opacity:0.75; }
        .announcement-gate { display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; padding:11px 14px; border:1px solid var(--primary); border-radius:var(--radius); font-size:0.86em; text-align:left; }
        .announce-admin-current { margin:8px 0; color:var(--text-sub); font-size:0.82em; line-height:1.5; overflow-wrap:anywhere; }
        .announce-admin-text { width:100%; box-sizing:border-box; resize:vertical; min-height:72px; }
        .announce-admin-row { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
        .announce-admin-count { margin-right:auto; color:var(--text-dim); font-size:0.78em; font-variant-numeric:tabular-nums; }
        .announce-admin-actions { display:flex; gap:8px; }
        .guest-banner .bb-text { line-height:1.45; }
        .mode-switch {
            position:fixed;
            right:0;
            bottom:0;
            left:0;
            z-index:890;
            display:grid;
            grid-template-columns:repeat(var(--world-mode-count, 3), minmax(0, 1fr));
            width:100%;
            height:calc(var(--mode-tabbar-height) + env(safe-area-inset-bottom));
            min-height:calc(56px + env(safe-area-inset-bottom));
            margin:0;
            padding:0 4px env(safe-area-inset-bottom);
            border:0;
            border-top:1px solid var(--border-color);
            border-radius:0;
            background:var(--card-bg);
            box-shadow:0 -4px 16px rgba(0,0,0,0.16);
        }
        .mode-switch button {
            display:flex;
            min-width:0;
            min-height:56px;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            gap:3px;
            padding:6px 4px;
            border:0;
            border-radius:0;
            background:transparent;
            color:var(--text-sub);
            font:inherit;
            font-weight:600;
            line-height:1;
            cursor:pointer;
        }
        .mode-switch button[hidden] { display:none; }
        .mode-switch .mode-icon { font-size:1.25rem; line-height:1; }
        .mode-switch .mode-label { max-width:100%; font-size:0.75rem; line-height:1.1; white-space:nowrap; }
        .mode-switch button.active { background:transparent; color:var(--primary); }
        /* ⚠️ 라이트 모드에서 **선택된 세계가 선택 안 된 것보다 흐렸다.** 고른 것이 더 안 보이면 거꾸로다.
           강조색을 글자에 그대로 쓰는데 흰 배경에서는 앰버 1.67 · 에메랄드 1.92 로 대비가 무너진다.
           테두리·배경은 강조색 그대로 두고 **글자만** 어둡게 섞는다 — 검정 45% 면 6종 모두 5.11 이상.
           color-mix 를 못 쓰면 앞줄의 안전한 색이 남는다. */
        body.light-mode .mode-switch button.active .mode-label { color:#334155; }
        @supports (color: color-mix(in srgb, red 50%, black)) {
            body.light-mode .mode-switch button.active .mode-label { color:color-mix(in srgb, var(--primary) 55%, #000); }
        }
        .mode-switch button:focus-visible { outline:2px solid var(--primary); outline-offset:-4px; }
        .mode-switch.single-mode-world { grid-template-columns:minmax(96px, 160px); justify-content:center; }
        /* 웹툰 배지 · 오늘 볼 웹툰 */
        .wt-badge { display:inline-block; padding:3px 9px; border-radius:10px; font-size:0.7em; font-weight:600; white-space:nowrap; }
        .wt-platform { background:var(--primary-soft); color:var(--primary); }
        .wt-weekday { background:var(--inset-bg); color:var(--text-sub); border:1px solid var(--border-color); }
        .wt-ep { font-size:0.82em; font-weight:600; color:var(--text-main); }
        .wt-fav { color:var(--red); }
        .today-wt, .today-wn { background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:18px; }
        .today-wt-title { font-size:0.95em; font-weight:600; margin-bottom:10px; }
        .today-wt-empty { color:var(--text-dim); font-size:0.85em; text-align:center; padding:8px; }
        .today-wt-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--divider); }
        .today-wt-row:first-of-type { border-top:none; }
        .today-wt-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.92em; }
        .today-wt-meta { font-size:0.78em; color:var(--text-sub); }
        .wt-plus { min-height:44px; background:var(--primary); color:var(--on-primary); border:none; border-radius:var(--radius-sm); padding:6px 12px; font-size:0.82em; font-weight:600; cursor:pointer; white-space:nowrap; }
        .movie-watch-on { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
        .movie-watch-chip { display:inline-block; padding:3px 8px; border:1px solid var(--border-color); border-radius:999px; background:var(--inset-bg); color:var(--text-sub); font-size:0.7em; white-space:nowrap; }
        .wt-plus:disabled { opacity:.45; cursor:not-allowed; }
        .media-url-field { display:flex; align-items:stretch; gap:6px; }
        .media-url-field > input { flex:1 1 auto; width:auto !important; min-width:0; }
        .media-url-open { flex:0 0 auto; min-width:58px; min-height:44px; padding:7px 12px; border:1px solid var(--border-color); border-radius:6px; background:var(--inset-bg); color:var(--text-main); font:inherit; font-size:0.82em; font-weight:600; cursor:pointer; }
        .media-episode-row > div { min-width:0; }
        .media-episode-input { min-height:44px; }
        .secret-check { display:flex; align-items:center; gap:8px; margin:10px 0; padding:9px 11px; border:1px solid var(--border-color); border-radius:8px; background:var(--inset-bg); color:var(--text-main); font-size:0.84em; cursor:pointer; }
        .secret-check input { width:16px; height:16px; accent-color:var(--primary); }
        .secret-badge { display:inline-block; padding:3px 8px; border-radius:10px; background:var(--primary-soft); color:var(--primary); border:1px solid color-mix(in srgb, var(--primary) 45%, transparent); font-size:0.7em; font-weight:650; white-space:nowrap; }
        .secret-inline-badge { font-size:0.78em; color:var(--primary); }
        .wd-checks { display:flex; gap:4px; flex-wrap:wrap; }
        .wd-checks label { display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; gap:3px; font-size:0.82em; padding:5px 9px; border:1px solid var(--border-color); border-radius:8px; cursor:pointer; color:var(--text-sub); }
        .wd-checks input { display:none; }
        .wd-checks input:checked + span { color:var(--primary); font-weight:700; }
        .wd-checks label:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); }
        .wt-ten-day-start { display:flex; align-items:center; gap:8px; min-width:0; margin-top:8px; padding:8px 10px; border:1px solid var(--border-color); border-radius:8px; background:var(--inset-bg); color:var(--text-sub); font-size:0.8em; flex-wrap:wrap; }
        .wt-ten-day-start label { flex:0 0 auto; color:var(--text-main); font-weight:600; }
        .wt-ten-day-start input { width:72px; min-width:0; min-height:44px; box-sizing:border-box; text-align:center; }
        .wt-ten-day-start small { flex:1 1 150px; min-width:0; color:var(--text-dim); line-height:1.4; }

        @media (max-width: 768px) {
            input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]),
            select,
            textarea { font-size:16px !important; }
            .hdr-btn { min-height: 44px; }
            .hdr-dropdown a, .hdr-dropdown button { min-height: 44px; display: flex; align-items: center; }
            .mtab { min-height: 44px; }
            #searchForm { flex-wrap: wrap; }
            body { padding-inline:14px; padding-top:calc(16px + env(safe-area-inset-top)); }
            h1 { font-size: 1.2em; }
            .stat-box { padding: 14px 12px; }
            .stat-value { font-size: 1.55em; }
            .stats-dashboard { margin-bottom:10px; }
            .input-group { padding: 14px; }
            .controls-wrapper {
                flex-direction:row;
                flex-wrap:wrap;
                gap:4px;
                align-items:center;
                margin:8px 0;
            }
            .filter-group { justify-content:space-between; gap:4px; }
            .custom-select { flex: 1; min-width:0; }
            /* flex-basis가 없으면 select들이 줄바꿈 대신 한 줄에서 무한정 쪼그라든다.
               (웹툰은 5개라 390px에서 66px까지 눌려 "전체 플랫폼"이 잘렸다.)
               한 줄에 두 개씩 감기게 기준 너비를 준다.
               2026-08-14 실측으로 재확인. */
            .filter-group select.custom-select {
                flex:1 1 calc(50% - 4px);
                min-width:140px;
            }
            .filter-primary-group { display:contents; }
            .filter-primary-group > :not(.covers-toggle):not(.view-mode-toggle),
            .filter-more-panel > * {
                flex:1 1 calc(50% - 4px);
                min-width:140px;
                order:1;
            }
            .filter-primary-group > .covers-toggle,
            .filter-primary-group > .view-mode-toggle {
                flex:1 1 calc(50% - 4px);
                min-width:140px;
                padding-inline:6px;
                order:0;
            }
            .filter-scope.mobile-filters-open .filter-more-panel > [id$="SecretAccessBtn"] { order:0; }
            .mobile-filter-toggle {
                display:inline-flex;
                flex:0 0 90px;
                align-items:center;
                justify-content:center;
                gap:3px;
                min-width:90px;
                padding-inline:6px;
                white-space:nowrap;
            }
            .mobile-filter-label { line-height:1; }
            .mobile-filter-toggle .filter-active-count {
                min-width:18px;
                height:18px;
                padding:0 4px;
                font-size:.72em;
                margin:0;
            }
            .mobile-filter-toggle::after {
                content:'▾';
                font-size:.9em;
                line-height:1;
            }
            .mobile-filter-toggle[aria-expanded="true"]::after { content:'▴'; }
            /* 모바일은 검색 줄만 남기고, 필터 버튼을 열 때 전체 조작 항목을 보여준다. */
            .filter-scope:not(.mobile-filters-open) .filter-primary-group > :not(.covers-toggle):not(.view-mode-toggle),
            .filter-scope:not(.mobile-filters-open) .filter-more-panel { display:none; }
            /* 필터를 접어도 선택 진입은 검색 줄 아래에서 계속 보이게 둔다. */
            .filter-scope > .selection-toolbar { display:flex; }
            .filter-scope.mobile-filters-open .filter-more-panel { display:contents; }
            .filter-search-group { flex:1 1 184px; min-width:184px; flex-wrap:nowrap; }
            .filter-scope .filter-search-group { order:-1; flex:1 1 100%; min-width:0; }
            .filter-search-group input.custom-select {
                flex:1 1 110px;
                min-width:110px !important;
            }
            .filter-search-group > button { min-width:62px; }
            .filter-scope > .selection-toolbar { margin-top:-4px; }
            .selection-actions { justify-content:flex-start; }
            .selection-count { flex:1 1 100%; width:100%; }
            .selection-actions button { flex:1 1 auto; min-width:0; padding-left:10px; padding-right:10px; }
            .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin-top:8px; }
            .video-grid { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
            .card-img-top, .no-img { height: 200px; }
            .card-body { padding: 11px 12px 12px; }
            .card-title { font-size: 0.92em; }
            .modal-content { width: 90vw !important; max-width: 420px; padding: 20px; }
            .guide-actions .btn-save { width:100%; min-height:44px; margin-right:0; }
            .header-area { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
            .theme-toggle, .icon-btn { padding: 8px 12px; }
            .header-actions { flex:1 1 100%; width:100%; flex-wrap:wrap; }
            /* 아이콘만 있으면 눌러보기 전엔 뭔지 모른다(실제로 휴지통을 못 찾았다).
               정사각형 대신 아이콘 위·라벨 아래로 쌓고 6개가 한 줄에 들어가게 나눠 갖는다. */
            .header-actions .theme-toggle, .header-actions .icon-btn {
                flex:1 1 0;
                min-width:0;
                min-height:48px;
                padding:5px 2px;
            }
            .header-actions .settings-shortcut {
                flex-direction:column;
                gap:2px;
            }
            .settings-shortcut-icon { font-size:1.05em; line-height:1.1; }
            .settings-shortcut-label {
                font-size:0.6em; line-height:1.1; font-weight:500;
                max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
            }
            .pagination { gap: 6px; flex-wrap: wrap; }
            .page-btn { padding: 9px 13px; min-width: 44px; min-height:44px; font-size: 0.9em; }
            .page-size-control { flex:1 0 100%; justify-content:center; margin-right:0; }
            .page-size-select { min-height:44px; }
            .streak-card { padding:8px 10px; margin-bottom:8px; }
            .streak-head { align-items:flex-start; margin-bottom:4px; }
            .streak-num { font-size:1.1em; }
            .heatmap-wrap { padding-bottom:1px; }
            .heatmap, .hm-months { gap:2px; }
            .hm-months { height:10px; margin-bottom:2px; }
            .heatmap .hm-col { gap:2px; }
            .heatmap .hm-col, .hm-months .hm-mcol { width:9px; flex:0 0 9px; }
            .hm-months .hm-mcol { font-size:.58em; line-height:10px; }
            .heatmap .hm-cell, .hm-legend .hm-cell { width:9px; height:9px; }
            .hm-legend { gap:3px; margin-top:3px; font-size:.66em; }
            /* 「오늘 볼 것」도 잔디와 같은 여백으로 — 혼자 16px/18px 을 쓰고 있었다 */
            .today-wt, .today-wn { padding:10px 12px; margin-bottom:8px; }
            .today-wt-title { margin-bottom:6px; }
            .today-wt.is-empty, .today-wn.is-empty { padding-top:6px; padding-bottom:6px; line-height:1.35; }
            .today-wt.is-empty .today-wt-title,
            .today-wn.is-empty .today-wt-title { display:inline; margin:0 6px 0 0; }
            .today-wt.is-empty .today-wt-empty,
            .today-wn.is-empty .today-wt-empty { display:inline; padding:0; text-align:left; }
            .add-panel-toggle { margin-bottom:6px; }
            .modal-content { width: 92vw !important; max-width: 460px; padding: 18px; }
            .rewind-preview { max-width: 100%; }
        }
        /* ⚠️ 세로가 짧은 기기(320×568 같은 것)에서는 통계·필터가 화면을 다 먹어
           **기록이 한 권도 안 보인 채 시작한다.** 실측: 첫 기록이 y=944, 화면은 568.
           숫자 크기는 그대로 두고 여백만 줄인다 — 읽기 어려워지면 압축한 뜻이 없다. */
        @media (max-height: 700px) {
            .stats-dashboard { margin-bottom: 8px; }
            .stat-box { padding: 10px 12px; gap: 3px; }
            .add-panel-toggle { margin: 6px 0; }
            .filter-scope { gap: 6px; }
        }
        @media (max-width: 600px) {
            .hdr-dropdown a, .hdr-dropdown button { white-space: normal; }
            .boardgame-play-record-row { grid-template-columns:minmax(0, 1fr) 44px; }
            .boardgame-play-record-row input { grid-column:1; }
            .boardgame-play-delete { grid-column:2; grid-row:1; }
        }
        @media (max-width: 480px) {
            .header-brand { flex:1 1 100%; width:100%; }
            .header-brand h1 { flex:1 1 0; min-width:0; white-space:nowrap; }
            .header-brand h1 .tagline { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
            .header-brand .world-switch { flex:0 0 auto; }
            /* 아이콘만 44px 정사각으로 늘어놓으면 무슨 버튼인지 알 수 없다.
               bookui처럼 라벨 있는 드롭다운을 1줄, 설정류 아이콘을 2줄로 나눈다. */
            /* 오른쪽만 맞고 왼쪽이 비면 아래 카드들과 어긋나 보인다(390px에서 왼쪽 187px 공백).
               두 줄 모두 카드와 같은 좌우 선까지 늘려 한 덩어리로 앉힌다. */
            .header-actions .hdr-menu { flex:1 1 0; min-width:0; }
            .hdr-btn { display:flex; width:100%; align-items:center; justify-content:center; gap:2px; padding:5px 10px; }
            /* 첫 화면이 무거웠다(2026-10-06): 기록·탐색 아래 아이콘 여섯 줄이 따로 있었다.
               기록·탐색·더보기를 한 줄에 놓고, 여섯은 더보기를 눌렀을 때 라벨 달린 칸으로 펼친다
               (아이콘만 두면 휴지통을 못 찾았던 교훈 — 펼치면 라벨이 그대로 보인다). */
            .hdr-more { display:block; position:relative; flex:1 1 0; min-width:0; }
            .hdr-more-btn {
                display:flex; width:100%; min-height:44px; align-items:center; justify-content:center; gap:2px;
                padding:5px 10px; position:relative;
                background:var(--card-bg); color:var(--text-sub); border:1px solid var(--border-color);
                border-radius:var(--radius-sm, 4px); font-size:0.8em; font-family:inherit; white-space:nowrap; cursor:pointer;
            }
            .hdr-more-btn:hover { color:var(--text-main); }
            .hdr-more-dot {
                position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%;
                background:var(--red, #dc2626); border:2px solid var(--bg-color, #0b0d14);
            }
            .hdr-more:has(.settings-friend-badge) .hdr-more-dot { display:block; }
            .hdr-icons {
                display:none;
                position:absolute; right:0; top:calc(100% + 5px); z-index:20;
                width:min(calc(100vw - 32px), 360px);
                grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:10px;
                background:var(--card-bg); border:1px solid var(--border-color); border-radius:8px;
                box-shadow:0 8px 24px rgba(0,0,0,0.4); max-height:min(70dvh, calc(100dvh - 190px)); overflow-y:auto; overscroll-behavior:contain;
            }
            .hdr-icons.open { display:grid; }
            /* 칸을 폭에 맞춰 늘리면 컬럼(≈24.6px)과 칸(16px) 사이에 8px씩 틈이 벌어져
               격자가 흩뿌려져 보였다. bookui처럼 칸을 고정 크기로 두고 gap만 줘
               촘촘한 덩어리로 뭉치게 한다. 폭이 남으면 남긴다. */
            .heatmap, .hm-months { width:auto; min-width:0; }
            .heatmap .hm-col, .hm-months .hm-mcol { width:9px; flex:0 0 9px; }
            .heatmap .hm-cell { width:9px; height:9px; max-width:none; aspect-ratio:auto; }
            .heatmap { justify-content:flex-start; }
            .video-preview { grid-template-columns:1fr; }
            .video-preview-actions { width:100%; }
            .video-preview-actions button { flex:1 1 100%; min-width:0; white-space:normal; }
            .video-playlist-head { flex-wrap:wrap; }
            .video-playlist-item { grid-template-columns:28px 84px minmax(0, 1fr); gap:8px; }
            .video-playlist-more button { width:100%; min-width:0; }
            .video-playlist-footer .btn-add { width:100%; min-width:0; white-space:normal; }
        }
        /* 데스크톱·태블릿도 같은 「더보기」 칸을 쓴다(2026-10-07). 칸이 열두 개로 늘어 한 줄에 다 얹으면 로고가 두 줄로 꺾이고
           칸이 둘째 줄로 밀렸다. 폰과 똑같이 ☰ 더보기 뒤 격자로 접는다. */
        @media (min-width: 481px) {
            .hdr-more { display:block; position:relative; }
            .hdr-more-btn {
                display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:4px;
                padding:5px 10px; position:relative;
                background:var(--card-bg); color:var(--text-sub); border:1px solid var(--border-color);
                border-radius:var(--radius-sm, 4px); font-size:0.8em; font-family:inherit; white-space:nowrap; cursor:pointer;
            }
            .hdr-more-btn:hover { color:var(--text-main); }
            .hdr-more-dot {
                position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%;
                background:var(--red, #dc2626); border:2px solid var(--bg-color, #0b0d14);
            }
            .hdr-more:has(.settings-friend-badge) .hdr-more-dot { display:block; }
            .hdr-icons {
                display:none;
                position:absolute; right:0; top:calc(100% + 5px); z-index:20; width:380px;
                grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:10px;
                background:var(--card-bg); border:1px solid var(--border-color); border-radius:8px;
                box-shadow:0 8px 24px rgba(0,0,0,0.4); max-height:70vh; overflow-y:auto; overscroll-behavior:contain;
            }
            .hdr-icons.open { display:grid; }
        }
        @media (min-width: 361px) and (max-width: 480px) {
            .header-actions { gap:6px; }
        }
        @media (max-width: 360px) {
            /* 320px 설정 카드에서도 44px 타깃 여섯 개를 한 줄에 둔다. */
            .accent-swatches { margin-inline:-16px; }
            /* 320px에서 가로 44px×6 + 여백은 넘친다. 폭만 40px 로 줄여 한 줄을 지키고,
               세로는 라벨이 들어갈 만큼 남긴다(폭과 달리 높이는 한 줄 유지와 무관하다). */
            .header-actions .theme-toggle, .header-actions .icon-btn {
                height:auto; min-width:40px; min-height:46px;
            }
            .settings-shortcut-label { font-size:0.56em; }
            .hdr-icons { gap:4px; padding:8px; }
            .mode-switch button { padding-inline:2px; }
            .mode-switch .mode-icon { font-size:1.1rem; }
            .mode-switch .mode-label { font-size:0.7rem; }
            .toast-container { left:14px; right:14px; max-width:none; }
            .video-playlist-preview { padding:10px; }
            .video-playlist-item { grid-template-columns:26px 72px minmax(0, 1fr); gap:7px; }
            .video-playlist-item-title { font-size:.8em; }
            .video-playlist-item-meta { font-size:.7em; }
            .tutorial-content { padding:16px !important; }
            .tutorial-step { min-height:122px; }
            .tutorial-step .modal-title { margin-bottom:10px; }
            .tutorial-progress { margin:14px 0 12px; }
            .tutorial-actions button { min-width:0; flex:1; }
        }
        @media (max-width: 400px) {
            .book-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .card-img-top, .no-img { height: 160px; }
            .stat-value { font-size: 1.35em; }
            .secret-content #secretPinRow { flex-wrap:wrap; }
            .secret-content #secretPinRow input { flex-basis:100%; }
            .secret-content #secretPinRow button { flex:1; }
            .sync-choice-content { padding:16px !important; }
            .sync-choice-option { padding:11px 12px; }
            .media-weekly-item { align-items:flex-start; flex-direction:column; gap:3px; }
            .media-weekly-meta { max-width:100%; text-align:left; }
            .media-report-row { grid-template-columns:minmax(64px, .9fr) minmax(72px, 1.2fr) auto; gap:6px; }
            .media-stats-month-row { grid-template-columns:minmax(64px, .9fr) minmax(72px, 1.2fr) auto; gap:6px; }
            .media-roulette-result { gap:12px; padding:12px; }
            .media-roulette-cover { width:76px; height:108px; flex-basis:76px; }
            .media-best-item { grid-template-columns:26px 44px minmax(0, 1fr) auto; gap:8px; padding:9px 8px; }
            .media-best-cover { width:44px; height:63px; }
            .media-best-add { min-width:54px; padding-left:8px; padding-right:8px; }
        }
        @media (max-width: 330px) {
            .rating-row { gap:4px; }
            /* ⚠️ 여기서 1열로 내리면 통계 3칸이 세로로 쌓여 **284px** 을 먹는다.
               320×568 화면에서 기록이 한 권도 안 보인 채 시작하던 원인이다(실측).
               한 줄로 두고 글자만 줄인다 — 292px 폭에 3칸이 들어간다. */
            .stats-card { grid-template-columns:repeat(3, 1fr); }
            .stat-box { padding:10px 6px; gap:2px; }
            .stat-title { font-size:0.62em; }
            .stat-box + .stat-box { border-left:0; border-top:1px solid var(--divider); }
        }
        @media (min-width: 900px) {
            .mode-switch {
                right:auto;
                left:50%;
                width:min(560px, 100%);
                transform:translateX(-50%);
                border-right:1px solid var(--border-color);
                border-left:1px solid var(--border-color);
                border-radius:14px 14px 0 0;
            }
        }

        /* 표지 표시 설정은 카드 생성 방식과 무관하게 모든 모드에 한 번에 적용한다. */
        body.covers-off .card-img-top,
        body.covers-off .no-img,
        body.covers-off .video-card .video-thumb {
            display:none;
        }
        body.covers-off .book-grid {
            grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
            gap:12px;
        }
        body.covers-off .video-grid {
            grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
        }
        body.covers-off .card-body { padding:10px 11px 11px; }
        body.covers-off .media-skeleton .card-body { min-height:96px; }
        @media (max-width: 768px) {
            body.covers-off .book-grid { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
            body.covers-off .video-grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
        }
        @media (max-width: 400px) {
            body.covers-off .book-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
        }

        /* 갤러리와 같은 카드 DOM을 유지하고 body 클래스만으로 여덟 매체를 한 줄 목록으로 바꾼다. */
        body.list-view .book-grid,
        body.list-view .video-grid,
        body.covers-off.list-view .book-grid,
        body.covers-off.list-view .video-grid {
            grid-template-columns:minmax(0, 1fr);
            gap:4px;
        }
        body.list-view .book-card {
            flex-direction:row;
            min-width:0;
            min-height:46px;
            border-radius:var(--radius-sm);
        }
        body.list-view .card-img-top,
        body.list-view .no-img,
        body.list-view .video-card .video-thumb {
            flex:0 0 34px;
            width:34px;
            height:44px;
            aspect-ratio:auto;
            padding:0;
            border-right:1px solid var(--border-color);
            border-bottom:0;
        }
        body.list-view .video-card .video-thumb img { width:100%; height:100%; object-fit:cover; }
        /* 34px 폭에서는 글자를 줄여도 읽히지 않고 얼룩처럼 보인다.
           리스트에서는 색 블록만 남겨 「표지 없음」을 조용히 알린다. */
        body.list-view .no-img-copy { display:none; }
        body.list-view .card-body,
        body.covers-off.list-view .card-body,
        body.list-view .video-card .card-body {
            position:relative;
            min-width:0;
            min-height:44px;
            padding:4px 10px;
            display:grid;
            grid-template-columns:minmax(0, 1fr) 140px 150px;
            align-items:center;
            column-gap:10px;
            overflow:hidden;
        }
        body.list-view .card-body:has(.wt-plus) { padding-right:88px; }
        body.list-view .video-card .card-body { padding-right:102px; gap:0 10px; }
        body.list-view .card-title,
        body.list-view .card-author {
            min-width:0;
            margin:0;
            display:block;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        body.list-view .card-title { grid-column:1; }
        body.list-view .card-author { grid-column:2; }
        body.list-view .card-edit-hint { display:none; }
        /* ⚠️ :has(.wt-plus) 를 빼두지 않으면 빠른 조작 버튼이 든 줄까지 숨는다.
           아래에 되살리는 규칙이 있지만 이 선택자의 특이도가 더 높아 이긴다 —
           그래서 320px 리스트에서 「+1화」가 0×0 이 됐다(회귀 521 이 실측한다). */
        body.list-view .card-body > :not(.card-title):not(.card-author):not(.badges-container):not(.video-card-badges):not(.video-bump-actions):not(:has(.wt-plus)) {
            display:none !important;
        }
        body.list-view .badges-container,
        body.list-view .video-card-badges {
            grid-column:3;
            min-width:0;
            min-height:0;
            margin:0;
            display:flex;
            align-items:center;
            justify-content:flex-end;
            gap:4px;
            flex-wrap:nowrap;
            overflow:hidden;
        }
        body.list-view .badges-container > *,
        body.list-view .video-card-badges > * { display:none; }
        body.list-view .badges-container > :first-child,
        body.list-view .video-card-badges > .video-status { display:inline-block; }
        /* ⚠️ 리스트는 배지 줄의 **첫 번째만** 보여준다. 이름표를 맨 앞에 넣으면 상태를
           밀어내고 그 자리를 차지한다 — 원하는 건 「상태 왼쪽에 이름」이라 둘 다 나와야 한다.
           이름표가 있을 때만 앞의 둘을 보여준다(없는 카드는 종전 그대로). */
        body.list-view .badges-container:has(> .owner-badge:first-child) > :nth-child(-n+2),
        body.list-view .video-card-badges:has(> .owner-badge:first-child) > :nth-child(-n+2) {
            display:inline-block;
        }
        body.list-view .movie-card .badges-container:has(> .wt-badge:nth-child(2)) > :first-child,
        body.list-view .anime-card .badges-container:has(> .wt-badge:nth-child(2)) > :first-child,
        body.list-view .game-card .badges-container:has(> .wt-badge:nth-child(2)) > :first-child { display:none; }
        body.list-view .movie-card .badges-container > .wt-badge:nth-child(2),
        body.list-view .anime-card .badges-container > .wt-badge:nth-child(2),
        body.list-view .game-card .badges-container > .wt-badge:nth-child(2) { display:inline-block; }
        body.list-view .badges-container:has(> .secret-badge) > *,
        body.list-view .video-card-badges:has(> .secret-badge) > * { display:none; }
        body.list-view .badges-container > .secret-badge,
        body.list-view .video-card-badges > .secret-badge { display:inline-block; }
        body.list-view .badges-container > *,
        body.list-view .video-card-badges > * {
            max-width:100%;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        body.list-view .card-body > div:has(.wt-plus),
        body.list-view .card-body > div:has(.wt-plus) div { display:contents !important; }
        body.list-view .card-body > div:has(.wt-plus) span,
        body.list-view .card-body > div:has(.wt-plus) [role="progressbar"] { display:none !important; }
        body.list-view .wt-plus {
            position:absolute;
            top:0;
            right:4px;
            z-index:2;
            min-width:44px;
            min-height:44px;
            max-width:80px;
            padding:5px 7px;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        body.list-view .video-bump-actions {
            position:absolute;
            top:0;
            right:4px;
            z-index:2;
            width:auto;
            margin:0;
            gap:4px;
        }
        body.list-view .video-bump-actions button {
            flex:0 0 44px;
            width:44px;
            min-width:44px;
            min-height:44px;
            padding:4px 2px;
            font-size:.68em;
        }
        body.list-view .media-skeleton .card-body { min-height:44px; }
        body.list-view .media-skeleton .card-body > .media-skeleton-line.title {
            display:block !important;
            grid-column:1;
            width:78%;
        }
        body.covers-off.list-view .selection-mode .card-body { padding-left:52px; }
        /* 리스트에서는 썸네일이 34px 라 44px 원형 배경이 표지를 통째로 덮었다.
           ⚠️ 보이는 것만 줄이고 **누르는 영역은 44px 로 유지**한다 —
           선택 모드에서 이 체크가 유일한 선택 수단이다. */
        body.list-view .card-select-control {
            top:0;
            left:0;
            width:44px;
            height:100%;
            border-radius:0;
            background:none;
            justify-content:flex-start;
            padding-left:3px;
        }
        body.list-view .card-select-control input {
            width:17px;
            height:17px;
            border-radius:3px;
            box-shadow:0 0 0 2px var(--card-bg);
        }
        @media (max-width:760px) {
            body.list-view .card-body,
            body.covers-off.list-view .card-body,
            body.list-view .video-card .card-body {
                grid-template-columns:minmax(0, 1fr) 110px 130px;
            }
        }
        @media (max-width:560px) {
            body.list-view .card-body,
            body.covers-off.list-view .card-body,
            body.list-view .video-card .card-body {
                grid-template-columns:minmax(0, 1fr) 72px;
                padding-top:4px;
                padding-bottom:4px;
                column-gap:7px;
            }
            /* ⚠️ 이름표가 붙으면 칩이 둘이라 72px 에 안 들어간다(「라..」 「📖..」로 잘렸다).
               있을 때만 넓히고, 긴 별명이 상태를 밀어내지 않게 이름 쪽에 상한을 둔다. */

            body.list-view .card-body:has(.owner-badge) {
                grid-template-columns:minmax(0, 1fr) 132px;
            }
            body.list-view .owner-badge { max-width:60px; }
            body.list-view .card-body:has(.wt-plus) { padding-right:84px; }
            body.list-view .video-card .card-body { padding-right:100px; }
            body.list-view .card-author { display:none; }
            body.list-view .badges-container,
            body.list-view .video-card-badges { grid-column:2; }
        }