/* bora2.0 — magazine_list.css (페이지 전용 스타일) */

/* ── 헤더 ── */

    /* ── 카테고리 탭 ── */
    .fd-cats-wrap{position:relative;display:flex;align-items:center;}
    .fd-cats{display:flex;padding:20px 18px 16px;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1;}
    .fd-cats::-webkit-scrollbar{display:none;}
    .fd-cat{flex-shrink:0;padding:9px 20px;border-radius:20px;font-size:14px;font-weight:700;border:1.5px solid #e8e8e8;color:#aaa;background:#fff;cursor:pointer;transition:all .2s;letter-spacing:-.2px;}

    /* 화살표 버튼 — 모바일엔 숨김, PC에서만 표시 */
    .fd-cat-arrow{display:none;}
    .pc-on .fd-cat-arrow{
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;width:32px;height:32px;
      background:#fff;border:1.5px solid #e8e8e8;border-radius:50%;
      font-size:20px;line-height:1;color:#555;cursor:pointer;
      transition:all .2s;z-index:2;
      box-shadow:0 1px 4px rgba(0,0,0,.08);
      padding-bottom:1px;
    }
    .pc-on .fd-cat-arrow:hover{background:#f0f2f8;border-color:#b0bcdc;color:#2c3e7a;}
    .pc-on .fd-cat-arrow:active{transform:scale(.93);}
    .pc-on .fd-cat-arrow-left{margin-left:10px;}
    .pc-on .fd-cat-arrow-right{margin-right:10px;}
    .pc-on .fd-cat-arrow.hidden{opacity:0;pointer-events:none;}
    .pc-on .fd-cat-arrow.disabled{opacity:0.3;cursor:default;pointer-events:none;}
    .fd-cat[data-cat="전체"].active{background:#E8ECF5;border-color:#B0BCDC;color:#2C3E7A;}
    .fd-cat[data-cat="BORA소식"].active{background:#D6EAF8;border-color:#85C1E9;color:#1A6FA0;}
    .fd-cat[data-cat="꿀팁"].active{background:#D5F5E3;border-color:#82E0AA;color:#1E8449;}
    .fd-cat[data-cat="혜택정보"].active{background:#FCF3CF;border-color:#F7DC6F;color:#9A7D0A;}
    .fd-cat[data-cat="이벤트"].active{background:#FADBD8;border-color:#F1948A;color:#A93226;}

    /* ── 배지 컬러 ── */
    .badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.3px;}
    .badge-news{background:#D6EAF8;color:#1A6FA0;}
    .badge-tip{background:#D5F5E3;color:#1E8449;}
    .badge-benefit{background:#FCF3CF;color:#9A7D0A;}
    .badge-event{background:#FADBD8;color:#A93226;}

    /* ── 2열 그리드 리스트 ── */
    .fd-grid{padding:18px 18px 80px;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;}
    .fd-item{cursor:pointer;transition:opacity .15s;}
    .fd-item:active{opacity:.6;}
    .fd-item-thumb{width:100%;border-radius:var(--r-sm);overflow:hidden;margin-bottom:8px;}
    .fd-item-thumb-inner{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:24px;}
    .fd-item-thumb-inner.news{background:linear-gradient(145deg,#5F0080,#7B22A0);}
    .fd-item-thumb-inner.tip{background:linear-gradient(145deg,#1d4ed8,#3b82f6);}
    .fd-item-thumb-inner.benefit{background:linear-gradient(145deg,#065f46,#059669);}
    .fd-item-thumb-inner.event{background:linear-gradient(145deg,#92400e,#d97706);}
    .fd-item-body{display:flex;flex-direction:column;gap:5px;}
    .fd-item-title{font-size:12px;font-weight:700;color:var(--t1);line-height:1.5;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .fd-item-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
    .fd-item-date{font-size:10px;color:var(--t4);font-weight:500;}
    .fd-item-view{font-size:10px;color:var(--t4);font-weight:500;}

    /* ── 페이지네이션 ── */
    .fd-pagination{display:flex;justify-content:center;align-items:center;gap:4px;padding:24px 0 10px;}
    .fd-page-btn{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--t3);border:1.5px solid var(--line);cursor:pointer;transition:all .2s;}
    .fd-page-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}

    /* ── 페이드인 애니메이션 ── */
    @keyframes fadeUp {
      from{opacity:0;transform:translateY(12px);}
      to{opacity:1;transform:translateY(0);}
    }
    .fd-grid .fd-item{animation:fadeUp .4s ease both;}
    .fd-grid .fd-item:nth-child(1){animation-delay:.05s;}
    .fd-grid .fd-item:nth-child(2){animation-delay:.08s;}
    .fd-grid .fd-item:nth-child(3){animation-delay:.11s;}
    .fd-grid .fd-item:nth-child(4){animation-delay:.14s;}
    .fd-grid .fd-item:nth-child(5){animation-delay:.17s;}
    .fd-grid .fd-item:nth-child(6){animation-delay:.20s;}
    .fd-grid .fd-item:nth-child(7){animation-delay:.23s;}
    .fd-grid .fd-item:nth-child(8){animation-delay:.26s;}