/* ==========================================
       SAVED (saved.html) — บันทึกโพสต์ + อัลบั้ม แบบบอร์ดของ Pinterest
       • หน้าต่าง "บันทึกไปที่" (svd-sheet): บันทึกทั้งหมด / อัลบั้มที่มี / สร้างอัลบั้มใหม่
       • หน้า "บันทึกไว้" (#view-saved): กริดอัลบั้ม (ปกภาพปะติด 3 รูป) → เข้าอัลบั้ม = กริดโพสต์ masonry
       มือถือ/แท็บเล็ต/คอม/จอใหญ่ ปรับคอลัมน์ตามความกว้างเอง
    ========================================== */
    #view-saved { background: #000; }
    .svd-page { width: 100%; padding: 0 12px calc(env(safe-area-inset-bottom) + 120px); box-sizing: border-box; color: #fff; }
    .svd-head {
        display: flex; align-items: center; gap: 12px;
        padding: calc(env(safe-area-inset-top) + 18px) 4px 18px;
    }
    .svd-head-title { flex: 1; min-width: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
    .svd-icon-btn {
        width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
        background: rgba(255,255,255,0.08); color: #fff; font-size: 24px;
        display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .svd-icon-btn:active { transform: scale(0.9); background: rgba(255,255,255,0.16); }

    /* ── กริดอัลบั้ม ── */
    .svd-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
    .svd-board { cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
    .svd-board:active .svd-cover { transform: scale(0.97); }
    .svd-cover {
        position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden;
        display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
        background: #000; transition: transform 0.15s;
    }
    .svd-cover > div { position: relative; overflow: hidden; background: #1c1c1c; }
    .svd-cover > div:first-child { grid-row: 1 / span 2; }
    .svd-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; }
    .svd-cover img.loaded { opacity: 1; }
    .svd-cover.empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1e1e, #121212); }
    .svd-cover.empty i { font-size: 38px; color: rgba(255,255,255,0.35); }
    .svd-board-name { margin: 10px 2px 2px; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .svd-board-meta { margin: 0 2px; font-size: 12.5px; color: rgba(255,255,255,0.55); }

    /* โครงกระดูก */
    .svd-shimmer {
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%) !important;
        background-size: 200% 100% !important; animation: svdShimmer 1.5s infinite linear;
    }
    @keyframes svdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .svd-skel-line { height: 14px; border-radius: 6px; margin: 10px 2px 0; width: 60%; }
    .svd-skel-line.short { width: 35%; height: 11px; margin-top: 6px; }

    /* ── หน้าในอัลบั้ม ── */
    .svd-album-head { text-align: center; padding: 4px 0 22px; }
    .svd-album-title { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; word-break: break-word; }
    .svd-album-count { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,0.6); }
    .svd-grid { display: flex; align-items: flex-start; gap: 8px; }
    .svd-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .svd-item { position: relative; width: 100%; border-radius: 18px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
    .svd-item:active { transform: scale(0.97); }
    .svd-item:not(.ready) {
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%; animation: svdShimmer 1.5s infinite linear;
    }
    .svd-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; }
    .svd-item > img:not(.svd-ph):not(.pm-slide) { position: relative; z-index: 1; }
    .svd-item .svd-ph { position: absolute; inset: 0; filter: blur(14px); transform: scale(1.3); opacity: 0; transition: opacity 0.25s ease; }
    .svd-item .svd-ph.on { opacity: 1; }
    .svd-item img.loaded { opacity: 1; }
    .svd-item .pm-slide { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
    .svd-item .pm-slide.active-slide { opacity: 1; }
    .svd-item .svd-multi { position: absolute; top: 10px; left: 10px; z-index: 3; color: #fff; font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); pointer-events: none; }
    .svd-empty { text-align: center; padding: 70px 24px; color: rgba(255,255,255,0.6); }
    .svd-empty i { font-size: 54px; color: rgba(255,255,255,0.3); }
    .svd-empty .t { margin-top: 14px; font-size: 17px; font-weight: 700; color: #fff; }
    .svd-empty .d { margin-top: 6px; font-size: 14px; line-height: 1.5; }
    .svd-more-spin { display: none; justify-content: center; padding: 22px 0; }
    .svd-more-spin.active { display: flex; }

    @media (min-width: 600px) {
        .svd-boards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 14px; }
    }
    @media (min-width: 768px) {
        .svd-page { padding-left: 32px; padding-right: 32px; }
        .svd-head { padding-top: 28px; padding-bottom: 24px; }
        .svd-head-title { font-size: 32px; }
        .svd-boards { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 30px 16px; }
        .svd-grid, .svd-col { gap: 16px; }
        .svd-album-title { font-size: 36px; }
    }

    /* ── หน้าต่าง "บันทึกไปที่" ── */
    .svd-sheet { display: none; position: fixed; inset: 0; z-index: 1000020; }
    .svd-sheet.open { display: block; }
    /* สีพื้นคงที่ (จางเข้าด้วย opacity) — ระบบแผ่นรองใต้แถบ Safari (index.html) อ่านสีนี้ไปทำแผ่นเต็มจอบน iPhone */
    .svd-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.25s ease; }
    .svd-sheet.shown .svd-sheet-bg { opacity: 1; }
    .svd-panel {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column;
        background: #161616; border-radius: 28px 28px 0 0; color: #fff;
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
        transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    }
    .svd-sheet.shown .svd-panel { transform: translateY(0); }
    @media (min-width: 700px) {
        .svd-panel {
            left: 50%; right: auto; bottom: auto; top: 50%; width: 420px; max-height: min(640px, 86vh);
            border-radius: 28px; padding-bottom: 10px;
            transform: translate(-50%, -46%) scale(0.96); opacity: 0;
            transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s ease;
        }
        .svd-sheet.shown .svd-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }
    .svd-grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); margin: 10px auto 0; }
    @media (min-width: 700px) { .svd-grab { display: none; } }
    .svd-panel-head { position: relative; text-align: center; padding: 14px 56px 12px; font-size: 17px; font-weight: 800; }
    .svd-panel-close { position: absolute; right: 12px; top: 8px; width: 36px; height: 36px; font-size: 22px; }
    .svd-panel-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 10px 6px; }
    .svd-sec { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); padding: 14px 10px 6px; }
    .svd-row {
        display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 16px;
        background: transparent; border: none; color: #fff; text-align: left; cursor: pointer; font: inherit;
        transition: background 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .svd-row:hover { background: rgba(255,255,255,0.05); }
    .svd-row:active { background: rgba(255,255,255,0.09); }
    .svd-thumb { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; overflow: hidden; background: #262626; display: flex; align-items: center; justify-content: center; position: relative; }
    .svd-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .svd-thumb i { font-size: 24px; color: rgba(255,255,255,0.7); }
    .svd-row-text { flex: 1; min-width: 0; }
    .svd-row-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .svd-row-sub { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 1px; }
    .svd-check { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 18px; color: transparent; transition: 0.15s; }
    /* แตะ = เลือก (โฟกัส) — ยังไม่บันทึกจนกดปุ่มด้านล่าง */
    .svd-row.sel { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); }
    .svd-row.sel .svd-check { background: #fff; border-color: #fff; color: #000; }
    .svd-row.inside .svd-row-sub { color: rgba(255,255,255,0.75); }
    .svd-row.inside:not(.sel) .svd-check { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.75); }
    .svd-new-row .svd-thumb { background: rgba(255,255,255,0.08); border: 1.5px dashed rgba(255,255,255,0.3); }
    .svd-create { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; }
    .svd-create.sel { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); }
    .svd-create input {
        flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1.5px solid rgba(255,255,255,0.25);
        color: #fff; font-size: 16px; padding: 10px 2px; outline: none; font-family: inherit; border-radius: 0;
    }
    .svd-create input:focus { border-bottom-color: #fff; }
    .svd-foot {
        display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .svd-go { flex: 1; height: 50px; border-radius: 25px; font-size: 16px; }
    .svd-go.danger { background: #ED4956; color: #fff; }
    .svd-unsave-link { background: transparent; border: none; color: #ff6b77; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 0 6px; white-space: nowrap; font-family: inherit; }
    /* ฟอนต์ของเครื่อง (ระบบ) ในหน้าต่างบันทึก/กล่องถาม */
    .svd-sheet, .svd-sheet button, .svd-sheet input, .svd-dialog, .svd-dialog button, .svd-dialog input {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
    }
    .svd-btn { border: none; border-radius: 14px; padding: 0 18px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; background: #fff; color: #000; transition: transform 0.15s, opacity 0.15s; }
    .svd-btn:disabled { opacity: 0.35; cursor: default; }
    .svd-btn:active:not(:disabled) { transform: scale(0.95); }
    .svd-btn.ghost { background: rgba(255,255,255,0.1); color: #fff; }
    .svd-btn.danger { background: #ED4956; color: #fff; }
    .svd-remove { display: block; width: calc(100% - 20px); margin: 6px 10px 0; padding: 14px; border-radius: 16px; border: none; background: rgba(237,73,86,0.12); color: #ff6b77; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .svd-remove:active { transform: scale(0.98); }
    .svd-skel-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
    .svd-skel-row .a { width: 52px; height: 52px; border-radius: 14px; }
    .svd-skel-row .b { height: 13px; border-radius: 6px; width: 45%; }

    /* กล่องถาม (ตั้งชื่อ/ยืนยันลบ) */
    .svd-dialog { display: none; position: fixed; inset: 0; z-index: 1000030; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .svd-dialog.open { display: flex; }
    .svd-dialog-card { width: 100%; max-width: 360px; background: #1a1a1a; border-radius: 24px; padding: 22px 18px 16px; color: #fff; animation: svdPop 0.22s cubic-bezier(0.2, 0.9, 0.25, 1); }
    @keyframes svdPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .svd-dialog-title { font-size: 17px; font-weight: 800; text-align: center; }
    .svd-dialog-msg { font-size: 14px; color: rgba(255,255,255,0.65); text-align: center; margin-top: 8px; line-height: 1.5; }
    .svd-dialog input { width: 100%; box-sizing: border-box; margin-top: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; color: #fff; font-size: 15px; padding: 12px 14px; outline: none; font-family: inherit; }
    .svd-dialog-actions { display: flex; gap: 8px; margin-top: 16px; }
    .svd-dialog-actions .svd-btn { flex: 1; height: 46px; }