/* ==========================================
       ARCHIVES SYSTEM (archives.html)
    ========================================== */
    /* 🌟 ล็อกหัวข้อ + แท็บ ไว้เป็น "ก้อนเดียว" แทนที่จะให้แต่ละอันคำนวณ top ของตัวเองแยกกัน
       (ของเดิม .arc-tabs เคยเดา top จากความสูง .arc-header เป็นตัวเลขตายตัว 53px — ถ้าความสูงจริง
       ต่างไปจากนี้แม้แต่นิดเดียว เช่น safe-area-inset-top ต่างกันไปตามอุปกรณ์ แท็บจะเหลื่อม/ลอยไม่ติด
       กับหัวข้อพอดี ห่อไว้ในกล่องเดียวกันแล้วให้กล่องนั้น sticky ตัวเดียว ไม่ต้องคำนวณเผื่อกันเองอีก) 🌟 */
    .arc-sticky-top { position: sticky; top: 0; z-index: 100; }
    .arc-header {
        left: 0; width: 100%;
        display: flex; justify-content: space-between; align-items: center;
        padding: max(16px, env(safe-area-inset-top)) 20px 16px;
        background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--line); color: #fff;
    }
    .arc-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px;}
    .arc-icon-btn { 
        width: 36px; height: 36px; border-radius: 50%; background: transparent; 
        display: flex; align-items: center; justify-content: center; 
        color: #fff; font-size: 28px; cursor: pointer; transition: 0.2s; border: none;
    }
    .arc-icon-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.9); }
    
    .arc-select-btn { 
        background: transparent; color: var(--accent-color, #0095F6); border: none; 
        font-weight: 600; font-size: 15px; cursor: pointer; transition: 0.2s;
    }
    .arc-select-btn:active { transform: scale(0.95); opacity: 0.7; }
    .arc-select-btn.cancel-mode { color: #fff; }

    /* 🌟 Tabs — ไม่ต้องมี position/top ของตัวเองแล้ว อยู่ในกล่อง .arc-sticky-top ที่ sticky แทน 🌟 */
    .arc-tabs {
        display: flex; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--line);
    }
    .arc-tab {
        flex: 1; text-align: center; padding: 12px 0; color: var(--text-secondary); font-size: 14px; font-weight: 600;
        cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s;
    }
    .arc-tab.active { color: #fff; border-bottom-color: #fff; }

    /* 🌟 Grid Layout — เหมือนกริดโพสต์โปรไฟล์/กริดสตอรี่ในไฮไลท์ (2 คอลัมน์, มุมโค้ง 24px)
       ให้ระบบแสดงผลเหมือนกันทั้งเว็บ ไม่ใช่กริด 3 คอลัมน์แยกแบบของตัวเองเหมือนเดิม 🌟 */
    .arc-container { width: 100%; max-width: 600px; margin: 0 auto; padding-bottom: 120px; }
    .arc-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1px; column-gap: 8px; padding: 0 8px; }

    .arc-item {
        position: relative; aspect-ratio: 4 / 5; background: var(--bg3); cursor: pointer; overflow: hidden;
        border-radius: 24px; margin-bottom: 8px;
    }
    .arc-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* ปกความละเอียดต่ำ (เบลอ) อยู่ชั้นล่าง — โพสต์ใช้ ph_mini, สตอรี่ใช้ cover_mini/cover เหมือนกริดสตอรี่ในไฮไลท์
       ซ่อนด้วย JS ตอนรูปจริงโหลดเสร็จ (ดู arc-real.onload) ไม่ใช้ CSS sibling selector เพราะขึ้นกับลำดับ DOM */
    .arc-item .arc-ph { position: absolute; inset: 0; z-index: 1; filter: blur(15px); transform: scale(1.08); transition: opacity 0.35s ease; }
    .arc-item .arc-real { position: relative; z-index: 2; opacity: 0; transition: opacity 0.35s ease; }
    .arc-item .arc-real.loaded { opacity: 1; }

    /* สำหรับบทความที่ไม่มีรูป */
    .arc-text-only { padding: 12px; font-size: 12px; color: #fff; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

    /* 🌟 Skeleton Loading Grid — ชิมเมอร์แบบเดียวกับ skeleton กริดโพสต์โปรไฟล์ ไม่ใช่แค่กะพริบทึบๆ 🌟 */
    .arc-grid-skeleton { display: none; grid-template-columns: repeat(2, 1fr); column-gap: 8px; padding: 0 8px; }
    .arc-grid-skeleton.active { display: grid; }
    .arc-skel-item {
        aspect-ratio: 4 / 5; border-radius: 24px; margin-bottom: 8px; overflow: hidden;
        background: linear-gradient(90deg, #181818 25%, #242424 50%, #181818 75%);
        background-size: 200% 100%; animation: arcShimmer 1.5s infinite linear;
    }
    @keyframes arcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* 🌟 การ์ดโผล่ทีละใบตอนเลื่อนเข้าจอ (เหมือนกริดโพสต์โปรไฟล์ waterDrop) ไม่ใช่ทั้งกริดโผล่มาทีเดียว 🌟 */
    .arc-item { opacity: 0; transform: translateY(24px) scale(0.94); transition: none; }
    .arc-item.show { animation: arcPop 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
    @keyframes arcPop { from { opacity: 0; transform: translateY(24px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

    /* 🌟 โครงกระดูก "กำลังโหลดเพิ่ม" ท้ายกริด ตอนเลื่อนใกล้สุด — ใช้คลาส arc-grid-skeleton เดิม
       ซ้อนกันได้เลย (แค่ 2 ชิ้นพอ ไม่ต้องเต็มจอเหมือนตอนโหลดครั้งแรก) เหมือนกริดโพสต์โปรไฟล์ 🌟 */
    #arc-load-more { padding-bottom: 40px; opacity: 0.6; }

    /* 🌟 Selection Checkbox 🌟 */
    .arc-checkbox {
        position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
        border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.8); background: rgba(0,0,0,0.3);
        display: none; align-items: center; justify-content: center; transition: 0.2s; z-index: 10;
        backdrop-filter: blur(5px);
    }
    .arc-container.selection-mode .arc-checkbox { display: flex; }
    .arc-container.selection-mode .arc-item img { opacity: 0.8; }
    
    .arc-item.selected .arc-checkbox { background: #0095F6; border-color: #0095F6; }
    .arc-item.selected .arc-checkbox::after { content: '\ebd3'; font-family: boxicons; color: #fff; font-size: 14px; font-weight: bold; }
    .arc-item.selected img { transform: scale(0.95); border-radius: 8px; opacity: 1; }

    /* 🌟 Empty State 🌟 */
    .arc-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: var(--text-secondary); }
    .arc-empty i { font-size: 50px; margin-bottom: 12px; color: var(--bg4); }
    .arc-empty span { font-size: 14px; font-weight: 500; }

    /* 🌟 Bottom Action Bar 🌟 */
    .arc-bottom-bar {
        position: fixed; bottom: 0; left: 0; width: 100%; padding: 16px 20px max(16px, env(safe-area-inset-bottom));
        background: rgba(25, 25, 25, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--line); display: none; justify-content: space-between; align-items: center; gap: 12px; z-index: 1000;
        animation: slideUp 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);
    }
    .arc-container.selection-mode ~ .arc-bottom-bar { display: flex; }
    
    .arc-action-btn {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 14px; border-radius: 16px; border: none; font-size: 14px; font-weight: 600;
        cursor: pointer; transition: 0.2s; color: #fff; background: rgba(255,255,255,0.1);
    }
    .arc-action-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.2); }
    .arc-action-btn.danger { color: #FF3B30; background: rgba(255, 59, 48, 0.1); }
    .arc-action-btn.danger:active { background: rgba(255, 59, 48, 0.2); }
    .arc-action-btn:disabled { opacity: 0.4; pointer-events: none; }
    
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }