/* AEMAZON Post List v3.0.8 — continuous feed divider hotfix */
:root{
    --bg:#ffffff; --card:#fff; --line:#e6e7e9; --text:#1a1a1b;
    --muted:#7c7c7c; --brand:#ff4500; --pill:#f6f7f8; --container:1100px;
    --sbw:270px; --gutter-left:90px; --gutter-right:24px; --right-rail:320px;
    --side-left-gap:30px;
    --ctrl-h:32px; --avatar-size:20px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Roboto,"Noto Sans KR",Arial,sans-serif;}
  a{text-decoration:none;color:inherit}

  button, input[type="button"], input[type="submit"]{
    -webkit-appearance:none; appearance:none;
    color:var(--text) !important; font:inherit; line-height:1.2; background-clip:padding-box;
  }
  .btn, .btn.sm, .page{
    -webkit-appearance:none; appearance:none;
    display:inline-flex; align-items:center; justify-content:center; color:var(--text) !important;
    min-height:var(--ctrl-h);
  }
  .btn{appearance:none;border:1px solid #dcdfe3;background:#fff;padding:6px 12px;border-radius:20px;cursor:pointer;font-weight:700}
  .btn.sm{padding:6px 10px;border-radius:16px;font-size:13px}
  .btn.primary, .btn.sm.primary{ color:#fff !important; }
  .page.cur{ color:#fff !important; }

  .topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:600;}
  .topin{max-width:var(--container);margin:0 auto;height:50px;display:flex;align-items:center;gap:12px;padding:0 16px}
  .logo{font-weight:900;color:#ff4500;font-size:18px}
  .spacer{flex:1}
  .userlink{
    display:inline-flex; align-items:center; gap:8px;
    height:var(--ctrl-h); padding:0 4px; border:none; background:transparent;
    cursor:pointer; font-weight:700; color:#333; text-decoration:none;
  }
  .avatar-xs{ width:var(--avatar-size); height:var(--avatar-size); border-radius:50%; object-fit:cover; background:#f6f7f8; border:1px solid rgba(0,0,0,.06); flex:0 0 var(--avatar-size); }

  .frame{ display:grid; grid-template-columns: var(--sbw) var(--gutter-left) minmax(0,1fr) var(--gutter-right) var(--right-rail); width:100%; margin:0; position:relative; }
  .sidebar{ grid-column:1; position:sticky; top:50px; align-self:start; background:#fff; padding:12px 0 12px var(--side-left-gap); border-right:1px solid var(--line); z-index:650; min-height:calc(100vh - 50px); }
  .side-group{margin-bottom:18px}
  .side-title{font-size:12px;font-weight:800;color:#8a8a8a;letter-spacing:.3px;margin:10px 16px}
  .side-list{list-style:none;margin:0;padding:0}
  .side-list li a{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:var(--text)}
  .side-list li a:hover{background:#f6f7f8}
  .side-list li.on a{background:#f6f7f8;font-weight:800}
  .ic{width:18px;text-align:center}
  .label{white-space:nowrap}

  .feed{grid-column:3; min-width:0; padding:16px 0;}
  .right-rail{grid-column:5;}

  /* 화면 공간을 차지하지 않는 접근성용 페이지 제목.
     SEO 메타데이터와 JSON-LD는 head 영역에서 그대로 제공한다. */
  .sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .search{margin:0 0 14px; display:flex; gap:8px}
  .search input{flex:1; padding:9px 14px; border:1px solid #dcdfe3; border-radius:20px; background:#f6f7f8; outline:none}
  .search button{border:none; background:#fff; border-radius:20px; padding:8px 12px; font-weight:700; cursor:pointer}
  .search button svg{width:18px;height:18px;stroke:#111;}

  /* 홈 배너 CSS는 동적 파셜에서 별도 JSP 클래스로 렌더링한다. */

  /* ✅ 리스트는 gap 제거(구분선 1줄 방식으로 갈 거라서) */
.post-stack{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0; /* ✅ */
}

/* ✅ 카드: 좌/우 테두리 제거, 아래 선만 */
.card{
  display:flex;
  flex-direction:column;
  background:var(--card);

  border-left:none !important;
  border-right:none !important;
  border-top:none !important;                 /* ✅ 위 선은 없애고 */
 /* ✅ (임시 OFF) 게시글 하단 구분선
     - 다시 살리고 싶으면 아래 주석을 풀면 됨
  */
   border-bottom:1px solid var(--line) !important; 
   /* ✅ 아래 선만 */

  border-radius:0;       /* (선택) 리스트 느낌. 유지하고 싶으면 14px로 */
  padding:14px;
  transition:box-shadow .2s;
  height:auto;
  overflow:hidden;
}

/* ✅ (임시 OFF) 리스트 첫 게시글 상단선도 같이 끄기
   - 아래 주석을 풀면 다시 시작선이 생김
*/

#postList > article.card:first-child{
  border-top:1px solid var(--line) !important;
}

  .card.has-media{ min-height:580px; }
  .card:hover{box-shadow:0 6px 20px rgba(0,0,0,.06)}
  .title{ font-weight:900; margin:0 0 6px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .meta{font-size:12px;color:#666;display:flex;gap:6px;align-items:center;margin-bottom:8px;flex:0 0 auto;flex-wrap:wrap}
  .vehicle-badges{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;flex-wrap:wrap}
  .vehicle-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:0;background:#fff;line-height:1}
  .vehicle-badge-logo{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
  .meta a.author{ color:inherit; text-decoration:none; }
  .meta a.author:hover{ text-decoration:underline; }
  .meta button.author{ border:none; background:transparent; padding:0; cursor:pointer; font:inherit; color:inherit; }
.meta button.author:hover{ text-decoration:underline; }

  .maint-review-list-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin:7px 0 11px;
    padding:10px;
    border:1px solid #e5e6e8;
    border-radius:14px;
    background:linear-gradient(145deg,#fff 0%,#fff7f3 100%);
    color:#222;
  }
  .maint-review-list-card:hover{border-color:#ffb69a;background:#fff5ef}
  .maint-review-list-card.is-inactive{background:#f7f7f7;color:#777}
  .maint-review-list-image{
    width:48px;height:48px;border-radius:11px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:#1d1d1d;color:#fff;font-size:18px;font-weight:950;
  }
  .maint-review-list-image img{display:block;width:100%;height:100%;object-fit:cover}
  .maint-review-list-kicker{display:block;color:#e64000;font-size:9px;font-weight:950;letter-spacing:.03em}
  .maint-review-list-name{display:block;margin-top:2px;font-size:13px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .maint-review-list-meta{display:block;margin-top:3px;color:#74777d;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .maint-review-list-arrow{color:#e64000;font-size:11px;font-weight:950;white-space:nowrap}
  .maint-review-compact-link{
    display:inline-flex;align-items:center;max-width:100%;margin-top:5px;
    padding:4px 8px;border-radius:999px;background:#fff0e9;color:#d83d00;
    font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  @media(max-width:560px){
    .maint-review-list-card{grid-template-columns:42px minmax(0,1fr);gap:9px}
    .maint-review-list-image{width:42px;height:42px}
    .maint-review-list-arrow{display:none}
  }
  

  .post-media{ width:100%; height:420px; object-fit:cover; border-radius:8px; display:block; border:1px solid var(--line); flex:0 0 auto; margin-bottom:8px; }
  /* ✅ 모바일: 이미지/영상(미디어)만 좌우 풀폭 */
@media (max-width:900px){

  /* =========================
     1️⃣ 단일 이미지/영상 (vwrap 포함)
  ========================== */

  /* 이미지 or video가 직접 자식일 때 */
  #postList > article.card.has-media > .post-media,
  /* video가 vwrap으로 감싸졌을 때 */
  #postList > article.card.has-media > .vwrap{
    width: calc(100% + 28px) !important;   /* card padding 14px * 2 */
    margin-left: -14px !important;
    margin-right: -14px !important;
    border-radius: 0 !important;
  }

  /* vwrap 안의 video 실제 크기 강제 */
  #postList > article.card.has-media > .vwrap > video.post-media{
    width: 100% !important;
    display: block !important;
    border: 0 !important;           /* 기본 border 제거 */
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  /* =========================
     2️⃣ 슬라이더 (여러 장 미디어)
  ========================== */

  /* 슬라이더 컨테이너 */
  #postList > article.card.has-media > .mini-slider{
    width: calc(100% + 28px) !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    border-radius: 0 !important;
  }

  /* 슬라이더 내부 미디어 공통 */
  #postList > article.card.has-media > .mini-slider .mini-media,
  #postList > article.card.has-media > .mini-slider .vwrap{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: block !important;
  }

  /* 슬라이더 안 video가 vwrap에 감싸진 경우 */
  #postList > article.card.has-media > .mini-slider .vwrap > video.mini-media{
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }
}
  .content{ font-size:14px; line-height:1.55; white-space:pre-wrap; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; flex:1 1 auto; min-height:0; }
  .content img, .content video{ display:none !important; }
  
  /* =========================
   ✅ 리스트 프리뷰: 유튜브/링크프리뷰 예외 처리
   - 원인: .content는 3줄 clamp + overflow hidden이라 iframe이 잘림
   - 원인: .content img 숨김 때문에 link-preview 썸네일도 안 보임
========================= */

/* 1) iframe 임베드는 리스트에서 "잘리는" 문제가 많아서: 아예 숨기거나(권장) */
/*    만약 리스트에서 임베드를 꼭 보여주고 싶으면 아래 '숨김' 대신 '클램프 해제'를 써라. */
.post-stack .content .lp-embed,
.post-stack .content iframe{
  display:none !important; /* ✅ 권장: 리스트는 썸네일/텍스트만 */
}

/* 2) link-preview 카드 썸네일은 예외로 표시 */
.post-stack .content .link-preview img{
  display:block !important;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid var(--line);
  margin:8px 0;
}

/* 3) link-preview 카드 자체가 있으면 clamping이 카드 UI를 망가뜨리니 약하게 풀어줌(선택) */
.post-stack .content .link-preview{
  display:block;
}

  .actbar{ display:flex; align-items:center; gap:8px; margin-top:10px; flex:0 0 auto; }
  
  .actbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:13px;font-weight:800;cursor:pointer;}
  .likepill{display:inline-flex;align-items:center;gap:6px;background:var(--pill);border:1px solid #e5e7eb;padding:6px 10px;border-radius:999px;font-weight:800;font-size:13px;color:#333;user-select:none;cursor:pointer}
  .likepill.on{ background:#111; color:#fff; border-color:#111; }

  #spinner{display:none; justify-content:center; align-items:center; gap:8px; padding:14px 0; color:#555; font-weight:700;}
  #spinner.on{display:flex;}
  .loader{width:18px;height:18px;border:2px solid #e5e7eb;border-top-color:#999;border-radius:50%;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .pagi{display:none}
  noscript .pagi{display:flex;gap:6px;justify-content:center;margin:18px 6px 26px}
  .page{border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:10px;color:#111}
  .page.cur{font-weight:900;background:#111;color:#fff;border-color:#111}

  .mobile-toggle{ display:none; width:32px; height:32px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:900; align-items:center; justify-content:center; }
  .sb-dim{ display:none; }

  .topbar .btn-ghost{ border:none; background:transparent; padding:0 6px; box-shadow:none; }
  .topbar .btn-ghost:hover{ background:transparent; }
  .topbar .mobile-toggle{ border:none; background:transparent; }

  .topbar #mobileToggle{ border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; }
  .topbar form[action$="/auth/logout"] > .btn.sm{ border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 6px !important; }
  .topbar .topin > button.btn.sm[onclick*="/posts/create"]{ border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 6px !important; }
  
  
  /* =========================
   주간 TOP 랭킹 뱃지
========================= */
.weekly-rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  margin-left:6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:#fff;
}

.weekly-rank-badge.rank-1{ background:#d4af37; } /* gold */
.weekly-rank-badge.rank-2{ background:#c0c0c0; } /* silver */
.weekly-rank-badge.rank-3{ background:#cd7f32; } /* bronze */
.weekly-rank-badge.rank-4{ background:#4b5563; } /* dark gray */
.weekly-rank-badge.rank-5{ background:#6b7280; } /* gray */
  
  
/* ===== 공지 팝업 (FOUC/깜빡임 방지 버전) ===== */

/* ✅ 기본은 숨김: JS가 조건 만족할 때만 .on 붙여서 보여줌 */
.notice-popup{
  position: fixed;
  inset: 0;                      /* top:0;left:0;right:0;bottom:0 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);

  display: none;                 /* ✅ 여기! 기본은 숨김 */
  align-items: center;
  justify-content: center;

  z-index: 9999;
}

/* ✅ 보여줄 때만 on */
.notice-popup.on{
  display: flex;
}

/* 모달 카드 */
.notice-content{
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  overflow: hidden;

  /* 선택: 살짝 더 고급스러운 느낌 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* 이미지 */
.notice-image{
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
}

/* 선택: 모바일에서 카드 여백 조금 더 자연스럽게 */
@media (max-width: 420px){
  .notice-content{
    padding: 14px;
    border-radius: 14px;
  }
}

  /* ===== 무료 룰렛 팝업 ===== */
  .roulette-promo-popup{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    padding: 16px;
  }
  .roulette-promo-popup.on{
    display: flex;
  }

  .roulette-promo-card{
    width: min(420px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    overflow: hidden;
  }

  .roulette-promo-body{
    padding: 22px 18px 18px;
    text-align: center;
  }

  .roulette-promo-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
  }

  .roulette-promo-title{
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #111;
    line-height: 1.2;
    letter-spacing: -.03em;
  }

  .roulette-promo-desc{
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.65;
  }

  .roulette-promo-points{
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 0;
  }

  .roulette-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #111;
    font-size: 13px;
    font-weight: 900;
  }

  .roulette-chip.main{
    background: #fff7ed;
    border-color: #fdba74;
    color: #ea580c;
  }

  .roulette-promo-actions{
    display: flex;
    gap: 10px;
    margin-top: 18px;
  }

  .roulette-promo-btn{
    appearance: none;
    border: none;
    border-radius: 14px;
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    flex: 1 1 0;
  }

  .roulette-promo-btn.primary{
    background: #ff5a1f;
    color: #fff !important;
  }

  .roulette-promo-btn.secondary{
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111 !important;
  }

  .roulette-promo-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    flex-wrap: wrap;
  }

  .roulette-hide-today{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
  }

  .roulette-hide-today input{
    width: 16px;
    height: 16px;
    accent-color: #ff5a1f;
  }

  .roulette-promo-mini{
    color: #9ca3af;
    font-size: 12px;
    font-weight: 700;
  }

  @media (max-width: 520px){
    .roulette-promo-body{
      padding: 20px 14px 16px;
    }
    .roulette-promo-title{
      font-size: 21px;
    }
    .roulette-promo-actions{
      flex-direction: column;
    }
    .roulette-promo-btn{
      width: 100%;
    }
  }

  

  @media (max-width:900px){
    html, body { overflow-x: hidden; }
    .frame { overflow-x: hidden; }
    .topin{height:50px; gap:8px}
    .btn.sm{font-size:13px}
    .frame{ grid-template-columns:1fr; }
    .right-rail{ display:none; }
    .sidebar{
      grid-column:auto; position:fixed; top:94px; left:0; bottom:0; width:var(--sbw);
      border-right:1px solid var(--line); border-bottom:none;
      transform: translateX(-100%); transition: transform .25s ease;
      min-height:auto; padding:12px 0 12px var(--side-left-gap);
      z-index:650; background:#fff;
    }
    body:not(.mobile-sidebar-open) .sidebar{
      border-right:none;
      transform: translateX(calc(-100% - 1px));
      left:0;
    }
    body.mobile-sidebar-open .sidebar{ transform: translateX(0); }
    body:not(.mobile-sidebar-open) .sidebar,
    body:not(.mobile-sidebar-open) .sidebar * { pointer-events:none !important; }
    .sb-dim{ position:fixed; inset:94px 0 0 0; background:rgba(0,0,0,.35); display:none; z-index:640; }
    body.mobile-sidebar-open .sb-dim{ display:block; }
    .mobile-toggle{ display:inline-flex; margin-left:8px; }
  .feed{
    grid-column:1;
    padding-top:12px;
    padding-bottom:12px;
  }

  /* 🔥 카드형만 좌우 여백 제거 */
  /*.view-card .feed{
    padding-left:0 !important;
    padding-right:0 !important;
  }*/
    .post-stack{ width:100%; padding:0; margin:0; }
    .card{ max-width:100%; }
    .card.has-media{ min-height:520px; }
    .post-media{ height:360px; }
  }

  /* ============ ▶ 리스트용 미니 슬라이더 ============ */
  .mini-slider{position:relative; margin-bottom:8px; border:1px solid var(--line); border-radius:8px; background:#0b0b0b; overflow:hidden; flex:0 0 auto;}
  .mini-scroll{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
  .mini-scroll::-webkit-scrollbar{display:none}
  .mini-slide{flex:0 0 100%; scroll-snap-align:center; display:grid; place-items:center; background:#000;}
  .mini-media{max-width:100%; max-height:420px; width:auto; height:auto; display:block; background:#000;}

  .mini-prev,.mini-next{
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:999px; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.35); color:#fff;
  }
  .mini-prev{left:8px} .mini-next{right:8px}
  .mini-prev:hover,.mini-next:hover{background:rgba(0,0,0,.5)}

  .mini-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; display:flex; gap:6px}
  .mini-dot{width:8px; height:8px; border-radius:999px; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0}
  .mini-dot.on{background:#fff}

  .mini-counter{
    position:absolute; top:8px; right:8px;
    padding:3px 7px; border-radius:999px; background:rgba(0,0,0,.55);
    color:#fff; font-size:11px; font-weight:800; line-height:1;
  }

  /* 리스트 전용: 비디오 컨트롤 숨김 */
  .post-stack .post-media::-webkit-media-controls{ display:none !important; }
  .mini-slider .mini-media::-webkit-media-controls{ display:none !important; }

  /* 볼륨 버튼 */
  .vwrap{ position:relative; }
  .vwrap > video{ display:block; }
  .vol-btn{
    position:absolute; right:8px; bottom:8px;
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:1px solid var(--line); color:#111;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:5;
  }
  .vol-btn:hover{ background:#fff; }
  .vol-btn svg{ width:20px; height:20px; display:block; }

  /* ✅ (추가) 유튜브/링크 embed 반응형 스타일 */
  .card .lp-embed{ width:100%; margin:8px 0; }
  .card .lp-embed-inner{ width:100%; padding-top:56.25%; position:relative; }
  .card .lp-embed-inner iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

  /* ✅ 정비 서브 탭 */
  .subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
  .subtabs li{list-style:none}
  .subtabs a{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:12px}
  .subtabs .on a{font-weight:600;border-color:#111}
  
  /* ▶ 맨 위로 이동 버튼 (오른쪽 하단 고정) */
.scroll-top-btn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* 기본은 숨김 → 스크립트가 .show 붙이면 나타남 */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1000;
}
.scroll-top-btn.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* 모바일 여백 미세 조정(선택) */
@media (max-width: 900px){
  .scroll-top-btn{ right: 12px; bottom: 20px; }
}

/* === 닉네임 드롭다운 === */
.udrop{ position:relative; }
.udrop-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--ctrl-h); padding:0 4px; border:none; background:transparent;
  cursor:pointer; font-weight:700; color:#333;
}
.udrop-btn svg{ width:14px; height:14px; }
.udrop-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  width:220px; background:#fff; border:1px solid #e6e7e9; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:6px; display:none; z-index:900;
}
.udrop.open .udrop-menu{ display:block; }
.udrop-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:10px; color:#111; background:#fff; border:none;
  text-decoration:none; cursor:pointer; font:inherit;
}
.udrop-item:hover{ background:#f6f7f8; }
.udrop-sep{ height:1px; background:#eee; margin:6px 0; }
/* ✅ 에디터 썸네일: 본문+썸네일만 가로 배치 */
.card.has-ethumb .ethumb-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

/* 본문 영역 */
.card.has-ethumb .card-main{
  flex:1 1 auto;
  min-width:0; /* 중요: flex 줄바꿈/말줄임 깨짐 방지 */
}

/* 오른쪽 썸네일 */
.card.has-ethumb .ethumb-wrap{
  flex:0 0 108px;
  width:108px;
  height:108px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f6f7f8;
}

/* 이미지 */
.card.has-ethumb .ethumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ 리스트 프리뷰에서 렌더 HTML 기본 마진 제거 */
.post-stack .content p,
.post-stack .content h1,
.post-stack .content h2,
.post-stack .content h3,
.post-stack .content blockquote,
.post-stack .content ul,
.post-stack .content ol,
.post-stack .content li {
  margin: 0;
  padding: 0;
}

/* 문단 사이 간격을 “조금만” 주고 싶으면 */
.post-stack .content p + p { margin-top: 6px; }


.nick-menu{
  position:absolute;
  min-width:160px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.14);
  padding:6px;
  z-index:5000;
}
.nick-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 12px;
  border:none;
  background:#fff;
  cursor:pointer;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
  color:#111827;
  text-align:left;
}
.nick-item:hover{ background:#f6f7f8; }
.nick-item.danger{ color:#b91c1c; }

article.card[data-href]{ cursor:pointer; }
article.card[data-href] a,
article.card[data-href] button{ cursor:auto; }

.feed-controls{
  display:flex; gap:10px; align-items:center;
  margin: 0 0 12px;
}
.ctrl{ position:relative; }
.ctrl-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.ctrl-menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:160px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  padding:6px;
  display:none;
  z-index:2000;
}
.ctrl.open .ctrl-menu{ display:block; }
.ctrl-menu a{
  display:block; padding:10px 10px; border-radius:10px;
  font-weight:800;
}
.ctrl-menu a:hover{ background:#f6f7f8; }
/* 기본은 카드형 그대로 */

.compact-left{ flex:1; min-width:0; }
.compact-title{
  font-weight:900;
  font-size:16px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compact-meta{
  margin-top:6px;
  font-size:12px;
  color:#777;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.compact-thumb{
  width:84px;
  height:84px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--line);
  flex:0 0 84px;
}

/* ✅ 축약형(원래 버전): post-compact 카드 외형 */
.post-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}

/* ===== feed-controls 아이콘 강제 표시 ===== */
.feed-controls .ctrl-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.feed-controls .ctrl-btn .ctrl-ic,
.feed-controls .ctrl-btn .ctrl-caret{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}

.feed-controls .ctrl-btn svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  stroke:currentColor !important;
  fill:none !important;
}

.feed-controls .ctrl-btn:hover{
  background:#f6f7f8 !important;
}


/* ✅ 컨트롤 버튼: 테두리/배경 제거 */
.feed-controls .ctrl-btn{
  border: none !important;
  background: transparent !important;
  padding: 6px 6px !important;
  border-radius: 10px !important; /* 클릭 영역만 */
  gap: 6px !important;
  box-shadow: none !important;
}

/* ✅ 한글 라벨 숨기기 */
.feed-controls .ctrl-label{
  display:none !important;
}

/* ✅ 아이콘/화살표 크기 조금 줄이기 */
.feed-controls .ctrl-btn .ctrl-ic,
.feed-controls .ctrl-btn .ctrl-caret{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

.feed-controls .ctrl-btn svg{
  width: 16px !important;
  height: 16px !important;
  display:block !important;
}

/* (선택) hover는 아주 은은하게 */
.feed-controls .ctrl-btn:hover{
  background: rgba(0,0,0,.04) !important;
}


/* ✅ 피드 상단 우측 내 프로필 버튼 */
.feed-profile-btn{
  margin-left:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 12px 0 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:13px;
  font-weight:900;
  color:#111 !important;
  cursor:pointer;
  white-space:nowrap;
}

/* 카페 원정대: 검색창 아래, 내 프로필 바로가기 왼쪽 */
.feed-expedition-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  height:34px;
  padding:0 11px 0 8px;
  border:1px solid #ff7a3c;
  border-radius:999px;
  background:#ff4500;
  color:#fff !important;
  font-size:12px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(255,69,0,.18);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.feed-expedition-btn:hover{
  background:#e93f00;
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(255,69,0,.24);
}
.feed-expedition-icon{
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
  background:#fff;
  color:#111;
}
.feed-expedition-icon svg{width:12px;height:12px;display:block}
.feed-expedition-season{
  padding-left:7px;
  border-left:1px solid rgba(255,255,255,.45);
  font-size:10px;
  letter-spacing:.05em;
  opacity:.9;
}

.feed-profile-btn:hover{
  background:#f6f7f8;
}

.feed-profile-btn .feed-profile-avatar{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  background:#f6f7f8;
  border:1px solid rgba(0,0,0,.06);
  flex:0 0 22px;
}

.feed-profile-btn svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

/* 모바일에서는 텍스트 숨기고 동그란 아이콘처럼 */
@media (max-width:520px){
  .feed-controls{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) 34px;
    gap:6px;
  }
  .feed-expedition-btn{
    margin-left:0;
    width:100%;
    padding:0 9px 0 7px;
    gap:6px;
    font-size:11px;
  }
  .feed-expedition-icon{width:19px;height:19px;flex-basis:19px}
  .feed-expedition-season{display:none}
  .feed-profile-btn{
    width:34px;
    height:34px;
    padding:0;
    justify-content:center;
  }

  .feed-profile-btn .feed-profile-text,
  .feed-profile-btn svg{
    display:none;
  }

  .feed-profile-btn .feed-profile-avatar{
    width:24px;
    height:24px;
  }
}

/* ===== inline comments (match post_detail.jsp 1:1) ===== */
.cmt-panel{ margin-top:12px; border-top:1px solid var(--line); }
/*.cmt-panel[hidden]{ display:none; }*/

/* ✅ 댓글 많을 때 깨짐 방지: 패널 높이 제한 + 리스트 스크롤 + 폼 sticky */
.cmt-panel.open{
  display:block;
  max-height: min(70vh, 560px);
  overflow:hidden;
}

.cmt-panel .cmt-box{ margin-top:12px; }
.cmt-panel .cmt-title{ font-weight:800; font-size:16px; margin:4px 0 10px; }

.cmt-panel .cmt-loading{ font-size:13px; color:var(--muted); padding:6px 0; display:none; }
.cmt-panel.loading .cmt-loading{ display:block; }

/* ✅ 리스트만 스크롤 */
.cmt-panel .cmt-list{
  overflow:auto;
  padding:0 0 10px;
  max-height: calc(min(70vh, 560px) - 210px); /* 폼 공간 남김 */
}

.cmt-panel .cmt{ padding:10px 0; border:none; background:transparent; border-radius:0; position:relative; }
.cmt-panel .op-badge{
  margin-left:4px;width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#b45309;background:#fde68a;border:1px solid #f59e0b;line-height:1
}
.cmt-panel .cmt .head{
  display:flex; gap:8px; align-items:center; color:#787c7e;
  font-size:12.5px; margin-bottom:6px; flex-wrap:wrap
}
.cmt-panel .cmt .head b{ color:#444; }
.cmt-panel .cmt .body{ white-space:pre-wrap; line-height:1.6; font-size:14.5px; }

.cmt-panel .cmt.child{ margin-left:28px; padding-left:12px; }
.cmt-panel .cmt.child::before{
  content:""; position:absolute; left:-6px; top:18px;
  width:14px; height:14px;
  border-left:2px solid #e5e7eb; border-bottom:2px solid #e5e7eb;
  border-bottom-left-radius:6px
}

/* ✅ 폼은 하단 sticky */
.cmt-panel .cmt-form{
  position: sticky;
  bottom: 0;
  border:1px dashed var(--line);
  background:#fff;
  border-radius:8px;
  padding:12px;
  margin-top:10px;
  z-index: 2;
}

/* post_detail.jsp의 input/textarea 스타일 매치 */
.cmt-panel .input, .cmt-panel textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14.5px;
  background:#fff;
}
.cmt-panel .input:focus, .cmt-panel textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.14)
}

/* ✅ 댓글 패널 안에서 닉네임 버튼(닉팝) 버튼 스타일 제거 */
.cmt-panel .nick-pop{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  cursor:pointer;
  color:#444;
  font:inherit;
}
.cmt-panel .nick-pop b{ font-weight:800; }
.cmt-panel .nick-pop:hover{ text-decoration:underline; }

/* 포커스 링/박스도 제거 */
.cmt-panel .nick-pop:focus,
.cmt-panel .nick-pop:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* ✅ 댓글 리스트 스크롤바 숨기기(스크롤은 유지) */
.cmt-panel .cmt-list{
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.cmt-panel .cmt-list::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* ✅ 댓글 패널 안 primary 버튼 글자색 복구 */
.cmt-panel .btn.primary,
.cmt-panel .btn.sm.primary{
  color:#111 !important;      /* 글자 검정 */
  background:#fff !important; /* 흰 배경 유지 */
  border:1px solid var(--line);
}

/* ✅ Comment mention dropdown (post_detail.jsp와 1:1) */
#aemMentionBoxC{
  position:absolute;
  min-width:220px;
  max-width:320px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  padding:6px;
  z-index:3000;
  display:none;
}
#aemMentionBoxC .item{
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
}
#aemMentionBoxC .item.active{ background:#f3f4f6; }

/* @멘션 하이라이트 (post_detail.jsp와 1:1) */
.aem-mention-tag{
  display:inline-block;
  padding:2px 6px;
  margin:0 1px;
  border-radius:6px;
  color:#ff4500;
  font-weight:800;
  cursor:pointer;
}
.aem-mention-tag:hover{
  background:rgba(255,69,0,0.2);
  text-decoration:underline;
}

/* ✅ 댓글 패널(드르륵 열리는 영역)만 연한 회색 배경 */
.cmt-panel .cmt-box{
  background:#f6f7f8;            /* 아주 연한 회색 */
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}

/* 내부 댓글 박스/폼은 흰색으로 떠 있게(가독성) */
.cmt-panel .cmt{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:12px;
  margin:10px 0;
}
.cmt-panel .cmt.child{
  background:#fff;
}

/* 폼도 흰색 유지 */
.cmt-panel .cmt-form{
  background:#fff;
}


/* =========================
   ✅ 축약형(view=compact) 전용 간격/레이아웃
   - 게시글끼리 위아래 간격 확보
========================= */

/* postList는 이미 .post-stack이라 flex column이지만,
   혹시 깨졌을 때를 대비해 display까지 강제 */
.view-compact #postList{
  display:flex !important;
  flex-direction:column !important;
  gap: 14px !important;           /* ✅ 게시글 간격 */
  padding: 0 !important;
  margin: 0 !important;
}

/* 축약형 카드(article.post-compact)끼리 margin 충돌 방지 */
.view-compact #postList > article.post-compact{
  margin: 0 !important;
}

/* (선택) 모바일에서 축약형 좌우 패딩만 살짝 */
@media (max-width: 900px){
  .view-compact .feed{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

.view-compact #postList{ gap:14px !important; }
.view-compact #postList > article.post-compact{ margin:0 !important; }

  
  
  /* ✅ 유튜브 썸네일 */
.post-media.yt-thumb{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
  display:block;
  margin-bottom:8px;
}
@media (max-width:900px){
  .post-media.yt-thumb{ height:360px; border-radius:0; border-left:0; border-right:0; }
}

/* Android 댓글 안보이는 문제 해결 */
.cmt-panel.open{
  max-height:none !important;
  overflow:visible !important;
}

.cmt-list{
  max-height:none !important;
  min-height:120px !important;
  overflow:visible !important;
}

/* =========================
   ✅ 축약형: 세로 테두리 제거 + 가로줄 1줄만
========================= */

/* 1) 카드의 기존 테두리/배경 처리 (필요시) */
.view-compact #postList > article.post-compact{
  border: 0 !important;          /* 기존 전체 테두리 제거 */
  border-radius: 0 !important;   /* (선택) 둥근 모서리 제거 */
  background: transparent !important; /* (선택) 카드 배경 없애고 싶으면 */
}

/* 2) 카드 사이 구분선: "top"만 사용 → 중첩(2줄) 방지 */
.view-compact #postList > article.post-compact{
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: 0 !important;
}

/* 3) 맨 첫 번째 카드에는 위쪽 줄 제거(리스트 맨 위는 깔끔하게) */
.view-compact #postList > article.post-compact:first-child{
  border-top: 0 !important;
}

/* 4) 리스트 맨 아래에만 마지막 줄 1개 추가 */
.view-compact #postList{
  border-bottom: 1px solid #e6e6e6 !important;
}

.cmt-upload-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

.cmt-file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border:1px solid #dcdfe3;
  border-radius:999px;
  background:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.cmt-file-btn:hover{
  background:#f6f7f8;
}

.cmt-file-input{
  display:none;
}

.cmt-upload-note{
  font-size:12px;
  color:#6b7280;
}

.cmt-img-preview{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
  gap:8px;
  margin-top:10px;
}

.cmt-img-preview .item{
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#f8fafc;
  aspect-ratio:1/1;
}

.cmt-img-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cmt-images{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:8px;
  margin-top:10px;
}

.cmt-images a{
  display:block;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#000;
}

.cmt-images img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}

@media (max-width:520px){
  .cmt-images{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:900px){
  .post-stack .post-media::-webkit-media-controls,
  .mini-slider .mini-media::-webkit-media-controls{
    display: initial !important;
  }
}

/* ========================================================================== */
/* AEMAZON Post List v3.0.6                                                   */
/* ========================================================================== */

body.post-list-v3{
  --pl-orange:#ff4d0a;
  --pl-orange-deep:#e84200;
  --pl-text:#171717;
  --pl-muted:#777b82;
  --pl-line:#ececee;
  --pl-soft:#f6f6f7;
  --pl-feed:1040px;
  background:#fff;
  color:var(--pl-text);
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.post-list-v3 header#globalTopbar{
  height:50px !important;
  min-height:50px !important;
  border-bottom:1px solid var(--pl-line) !important;
  box-shadow:none !important;
}
body.post-list-v3 header#globalTopbar .topin{
  height:50px !important;
  min-height:50px !important;
}
body.post-list-v3 header#globalTopbar .logo-img{height:27px !important}

body.post-list-v3 .frame{
  display:grid;
  grid-template-columns:250px minmax(0,var(--pl-feed)) minmax(0,1fr);
  gap:32px;
  width:min(100%,1420px);
  margin:0 auto;
  overflow:visible;
}
body.post-list-v3 .sidebar{grid-column:1;top:50px}
body.post-list-v3 .feed{
  grid-column:2;
  width:100%;
  min-width:0;
  max-width:var(--pl-feed);
  padding:14px 0 24px;
}
body.post-list-v3 .right-rail{grid-column:3}

/* Search: one input, one magnifier. */
body.post-list-v3 .search{
  position:relative;
  display:block;
  height:42px;
  margin:0 0 14px;
}
body.post-list-v3 .search input[type="search"]{
  width:100%;
  height:42px;
  padding:0 46px 0 16px;
  border:1px solid #dedfe2;
  border-radius:999px;
  outline:0;
  background:#f7f7f8;
  color:#202124;
  font-size:14px;
  line-height:42px;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
body.post-list-v3 .search input[type="search"]::-webkit-search-cancel-button{display:none}
body.post-list-v3 .search input[type="search"]:focus{
  border-color:#babdc2;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,77,10,.08);
}
body.post-list-v3 .search button{
  position:absolute;
  top:0;
  right:2px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#171717 !important;
}
body.post-list-v3 .search button svg{width:19px !important;height:19px !important}

/* Main promotion banner */
body.post-list-v3 .home-banner-slider{
  width:100% !important;
  margin:0 0 14px !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(18,18,20,.09) !important;
}
body.post-list-v3 .home-banner-viewport,
body.post-list-v3 .home-banner-slide::after{border-radius:16px !important}
body.post-list-v3 .home-banner-slide{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16/7;
}
body.post-list-v3 .home-banner-copy{
  width:62% !important;
  padding:22px 28px 30px !important;
}
body.post-list-v3 .home-banner-title{font-size:25px !important}
body.post-list-v3 .home-banner-description{font-size:12.5px !important}
body.post-list-v3 .home-banner-dots{bottom:10px !important}

/* Horizontal categories */
body.post-list-v3 .feed-category-rail{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  margin:0 0 11px;
  padding:1px 0 3px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
body.post-list-v3 .feed-category-rail::-webkit-scrollbar{display:none}
body.post-list-v3 .feed-category-chip{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid #e3e4e6;
  border-radius:999px;
  background:#fff;
  color:#62666d;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body.post-list-v3 .feed-category-chip.on{
  border-color:#171717;
  background:#171717;
  color:#fff;
}

/* Sort, view and shortcut row */
body.post-list-v3 .feed-controls{
  min-height:38px;
  margin:0 0 4px;
  gap:3px;
  padding:0 2px;
  border:0;
}
body.post-list-v3 .feed-controls .ctrl-btn{
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
}
body.post-list-v3 .feed-controls .ctrl-btn .ctrl-ic{
  width:17px !important;height:17px !important;flex-basis:17px !important;
}
body.post-list-v3 .feed-controls .ctrl-btn .ctrl-caret{
  width:12px !important;height:12px !important;flex-basis:12px !important;
  margin-left:-1px;
}
body.post-list-v3 .feed-controls .ctrl-btn svg{width:15px !important;height:15px !important}
body.post-list-v3 .feed-expedition-btn{
  height:32px;
  min-height:32px;
  border:0;
  box-shadow:none;
  font-size:11px;
}
body.post-list-v3 .feed-profile-btn{
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border-color:#e4e5e7;
  justify-content:center;
}
body.post-list-v3 .feed-profile-btn .feed-profile-text,
body.post-list-v3 .feed-profile-btn > svg{display:none}
body.post-list-v3 .feed-profile-btn .feed-profile-avatar{width:23px;height:23px;flex-basis:23px}

/* Feed cards */
body.post-list-v3 #postList{
  gap:0 !important;
  border:0 !important;
  background:#fff;
}
body.post-list-v3 #postList > article.card{
  position:relative;
  display:flex;
  min-height:0 !important;
  margin:0;
  padding:18px 0 16px;
  overflow:visible;
  border:0 !important;
  border-bottom:1px solid var(--pl-line) !important;
  border-radius:0 !important;
  background:#fff;
  box-shadow:none !important;
  cursor:default;
}
body.post-list-v3 #postList > article.card:first-child{border-top:0 !important}
body.post-list-v3 #postList > article.card:hover{box-shadow:none !important}
body.post-list-v3 #postList > article.card .title{
  order:0;
  margin:0 0 7px;
  color:#171717;
  font-size:19px;
  font-weight:850;
  letter-spacing:-.035em;
  line-height:1.34;
  -webkit-line-clamp:2;
}
body.post-list-v3 #postList > article.card .title a{display:block}
body.post-list-v3 #postList > article.card .meta{
  order:1;
  min-height:24px;
  margin:0 0 10px;
  gap:5px;
  color:var(--pl-muted);
  font-size:11.5px;
  line-height:1.35;
}
body.post-list-v3 #postList > article.card .meta .avatar-xs{
  width:23px;
  height:23px;
  flex-basis:23px;
}
body.post-list-v3 #postList > article.card .meta .author{font-size:12.5px;color:#262626}
body.post-list-v3 #postList > article.card .vehicle-badges{gap:4px}
body.post-list-v3 #postList > article.card .vehicle-badge{width:18px;height:18px}
body.post-list-v3 #postList > article.card .vehicle-badge-logo{width:17px;height:17px;flex-basis:17px}
body.post-list-v3 #postList > article.card .weekly-rank-badge{transform:scale(.9);transform-origin:left center}

body.post-list-v3 #postList > article.card .content{
  order:5;
  display:-webkit-box;
  min-height:0;
  margin:9px 0 0;
  overflow:hidden;
  color:#373737;
  font-size:14px;
  line-height:1.55;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
body.post-list-v3 #postList > article.card .content:empty{display:none}

/* Media preserves its full composition instead of cropping. */
body.post-list-v3 #postList > article.card > .post-media,
body.post-list-v3 #postList > article.card > .vwrap,
body.post-list-v3 #postList > article.card > .mini-slider{
  order:4;
}
body.post-list-v3 #postList .post-media,
body.post-list-v3 #postList .post-media.yt-thumb{
  display:block;
  width:100%;
  height:auto !important;
  max-height:72svh;
  margin:0;
  border:0;
  border-radius:14px;
  background:#0c0c0d;
  object-fit:contain !important;
  object-position:center;
}
body.post-list-v3 #postList .vwrap{
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:14px;
  background:#0c0c0d;
}
body.post-list-v3 #postList .vwrap > video{width:100%;border-radius:inherit}
body.post-list-v3 #postList video.post-media{
  width:100%;
  min-height:230px;
  height:min(64svh,620px) !important;
  object-fit:contain !important;
}
body.post-list-v3 #postList > article.card.has-media > .vwrap > video.post-media,
body.post-list-v3 #postList > article.card.has-media > .mini-slider .vwrap > video.mini-media{
  object-fit:contain !important;
}
body.post-list-v3 #postList .vol-btn{
  right:10px;
  bottom:10px;
  width:32px;
  height:32px;
  border:0;
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 9px rgba(0,0,0,.18);
}
body.post-list-v3 #postList .vol-btn svg{width:17px;height:17px}

/* Multi-media slider: native horizontal scrolling remains the source of truth. */
body.post-list-v3 #postList .mini-slider{
  width:100%;
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:14px;
  background:#0c0c0d;
}
body.post-list-v3 #postList .mini-scroll{
  display:flex;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
body.post-list-v3 #postList .mini-scroll::-webkit-scrollbar{display:none}
body.post-list-v3 #postList .mini-slide{
  display:grid;
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  min-height:230px;
  place-items:center;
  overflow:hidden;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  background:#0c0c0d;
}
body.post-list-v3 #postList .mini-media{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  max-height:72svh;
  margin:0;
  object-fit:contain !important;
  object-position:center;
  pointer-events:auto;
  user-select:none;
}
body.post-list-v3 #postList video.mini-media{
  min-height:230px;
  height:min(64svh,620px) !important;
}
body.post-list-v3 #postList .mini-dots{bottom:10px;gap:5px}
body.post-list-v3 #postList .mini-dot{
  width:6px;height:6px;background:rgba(255,255,255,.58);box-shadow:0 1px 4px rgba(0,0,0,.25)
}
body.post-list-v3 #postList .mini-dot.on{width:17px;background:var(--pl-orange)}
body.post-list-v3 #postList .mini-counter{
  top:10px;right:10px;padding:5px 8px;background:rgba(0,0,0,.56);font-size:10px
}

/* Compact, quiet action bar — no surrounding divider. */
body.post-list-v3 #postList .actbar{
  order:6;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:46px;
  margin:10px 0 0;
  padding:8px 0 0;
  gap:5px;
  border:0 !important;
}
body.post-list-v3 #postList .cmt-panel{order:7}
body.post-list-v3 #postList .post-action,
body.post-list-v3 #postList .likepill.post-action{
  display:inline-flex;
  flex:0 1 auto;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:42px;
  margin:0;
  padding:0 10px;
  gap:6px;
  border:0 !important;
  border-radius:9px;
  background:transparent !important;
  box-shadow:none !important;
  color:#171717 !important;
  font-size:13px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .12s ease,background .12s ease,transform .12s ease;
}
body.post-list-v3 #postList .post-action:hover{background:#f5f5f6 !important;color:#000 !important}
body.post-list-v3 #postList .post-action.just-pressed{transform:scale(.92)}
body.post-list-v3 #postList .post-action-icon{
  display:block;
  width:19px;
  height:19px;
  flex:0 0 19px;
  fill:none;
  stroke:currentColor;
}
body.post-list-v3 #postList .post-action-count{font-variant-numeric:tabular-nums}
body.post-list-v3 #postList .likepill.on{
  color:#f1324c !important;
  background:transparent !important;
}
body.post-list-v3 #postList .likepill.on .post-action-icon{fill:currentColor}
body.post-list-v3 #postList .post-save-btn{margin-left:auto !important}
body.post-list-v3 #postList .post-save-btn.on{color:#171717 !important}
body.post-list-v3 #postList .post-save-btn.on .post-action-icon{fill:currentColor}

/* Editor-thumbnail cards */
body.post-list-v3 #postList .ethumb-row{order:4;margin-top:1px}
body.post-list-v3 #postList .ethumb-row .content{margin:0}
body.post-list-v3 #postList .ethumb-wrap{width:96px;height:96px;flex-basis:96px;border:0;border-radius:12px}

/* Existing special cards retain their data while matching the new rhythm. */
body.post-list-v3 .maint-review-list-card,
body.post-list-v3 .ghost-list-preview{order:3;margin:2px 0 10px}

/* In-feed promotions */
body.post-list-v3 #postList > .feed-promotion-card{
  width:100%;
  margin:14px 0 !important;
  border:1px solid #ffd0bf !important;
  border-radius:15px !important;
  box-shadow:none !important;
}
body.post-list-v3 #postList > .feed-promotion-card .feed-promotion-link{min-height:142px}
body.post-list-v3 #postList > .feed-promotion-card .feed-promotion-title{font-size:18px}
body.post-list-v3 #postList > .feed-promotion-card .feed-promotion-description{font-size:12px}

/* Compact list option remains available. */
body.post-list-v3.view-compact #postList{gap:0 !important}
body.post-list-v3.view-compact #postList > article.post-compact{
  min-height:96px;
  padding:13px 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--pl-line) !important;
  background:#fff !important;
}
body.post-list-v3.view-compact .compact-title{font-size:15px;line-height:1.35}
body.post-list-v3.view-compact .compact-meta{font-size:11px;gap:5px}
body.post-list-v3.view-compact .compact-thumb{width:72px;height:72px;flex-basis:72px;border:0;border-radius:11px}

/* Comments become a focused bottom sheet on phones. */
body.post-list-v3 .post-list-comment-sheet-dim{
  position:fixed;
  inset:0;
  z-index:2147482990;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(0,0,0,.34);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.post-list-v3.post-list-comment-sheet-mode.post-list-comment-sheet-open .post-list-comment-sheet-dim{
  opacity:1;
  pointer-events:auto;
}
body.post-list-v3 .post-list-v3-toast{
  position:fixed;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:5000;
  max-width:calc(100vw - 32px);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(20,20,21,.92);
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .16s ease,transform .16s ease;
}
body.post-list-v3 .post-list-v3-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1180px) and (min-width:901px){
  body.post-list-v3 .frame{
    grid-template-columns:230px minmax(0,var(--pl-feed));
    justify-content:center;
    gap:28px;
    width:100%;
    padding:0 20px;
  }
  body.post-list-v3 .right-rail{display:none}
}

@media (max-width:900px){
  body.post-list-v3 .frame{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:none;
    padding:0;
    gap:0;
    overflow:hidden;
  }
  body.post-list-v3 .feed{
    grid-column:1;
    width:100%;
    max-width:none;
    padding:10px 0 calc(22px + env(safe-area-inset-bottom,0px));
  }
  body.post-list-v3 .right-rail{display:none}
  body.post-list-v3 .search{margin:0 14px 12px}
  body.post-list-v3 .home-banner-slider{
    width:calc(100% - 28px) !important;
    margin:0 14px 13px !important;
    border-radius:15px !important;
  }
  body.post-list-v3 .home-banner-viewport,
  body.post-list-v3 .home-banner-slide::after{border-radius:15px !important}
  body.post-list-v3 .home-banner-copy{width:70% !important;padding:18px 18px 27px !important}
  body.post-list-v3 .home-banner-title{font-size:20px !important;line-height:1.15 !important}
  body.post-list-v3 .home-banner-description{
    max-width:270px !important;
    margin:6px 0 9px !important;
    font-size:10.5px !important;
    -webkit-line-clamp:1 !important;
  }
  body.post-list-v3 .home-banner-cta{min-height:29px !important;padding:6px 10px !important;font-size:10.5px !important}
  body.post-list-v3 .home-banner-badge{top:10px !important;right:10px !important;font-size:8px !important}
  body.post-list-v3 .home-banner-dots{bottom:9px !important}
  body.post-list-v3 .feed-category-rail{width:calc(100% - 28px);margin:0 14px 9px}
  body.post-list-v3 .feed-controls{margin:0 12px 2px;padding:0}
  body.post-list-v3 .subtabs{margin-left:14px;margin-right:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}

  body.post-list-v3 #postList > article.card{
    padding:16px 14px 14px;
    border-bottom:1px solid var(--pl-line) !important;
  }
  body.post-list-v3 #postList > article.card .title{font-size:18px;margin-bottom:6px}
  body.post-list-v3 #postList > article.card .meta{margin-bottom:9px;font-size:11px}
  body.post-list-v3 #postList > article.card .content{font-size:13.5px;margin-top:8px}

  body.post-list-v3 #postList > article.card > .post-media,
  body.post-list-v3 #postList > article.card > .vwrap,
  body.post-list-v3 #postList > article.card > .mini-slider{
    width:calc(100% + 28px) !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    border-radius:0 !important;
  }
  body.post-list-v3 #postList .post-media,
  body.post-list-v3 #postList .post-media.yt-thumb,
  body.post-list-v3 #postList .vwrap,
  body.post-list-v3 #postList .mini-slider,
  body.post-list-v3 #postList .mini-media{
    border-radius:0 !important;
  }
  body.post-list-v3 #postList .post-media,
  body.post-list-v3 #postList .mini-media{max-height:68svh}
  body.post-list-v3 #postList video.post-media,
  body.post-list-v3 #postList video.mini-media{height:min(62svh,560px) !important}
  body.post-list-v3 #postList .mini-prev,
  body.post-list-v3 #postList .mini-next{display:none !important}
  body.post-list-v3 #postList .mini-scroll{scroll-behavior:auto}

  body.post-list-v3 #postList .actbar{margin-top:8px;min-height:48px;padding-top:8px}
  body.post-list-v3 #postList .post-action,
  body.post-list-v3 #postList .likepill.post-action{
    min-height:42px;
    padding:0 9px;
    gap:5px;
    font-size:13px;
  }
  body.post-list-v3 #postList .post-action-icon{width:19px;height:19px;flex-basis:19px}

  body.post-list-v3 #postList > .feed-promotion-card{
    width:calc(100% - 28px) !important;
    margin:12px 14px !important;
    border-radius:14px !important;
  }
  body.post-list-v3 #postList > .feed-promotion-card .feed-promotion-link{min-height:128px}
  body.post-list-v3 #postList > .feed-promotion-card .feed-promotion-title{font-size:16px}

  body.post-list-v3.view-compact .feed{padding-left:0 !important;padding-right:0 !important}
  body.post-list-v3.view-compact #postList{padding:0 14px !important}
  body.post-list-v3.view-compact #postList > article.post-compact{padding:12px 0 !important}

  body.post-list-v3.post-list-comment-sheet-open{overflow:hidden}
  body.post-list-v3 #postList .cmt-panel.open{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2002;
    display:block !important;
    width:100%;
    height:min(76svh,680px);
    max-height:min(76svh,680px) !important;
    margin:0;
    padding:0;
    overflow:hidden !important;
    border:0;
    border-radius:20px 20px 0 0;
    background:#fff;
    box-shadow:0 -14px 40px rgba(0,0,0,.15);
  }
  body.post-list-v3 #postList .cmt-panel.open::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:8px auto 1px;
    border-radius:999px;
    background:#d7d7da;
  }
  body.post-list-v3 #postList .cmt-panel.open .cmt-box{
    display:flex;
    flex-direction:column;
    height:calc(100% - 13px);
    margin:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#fff;
  }
  body.post-list-v3 #postList .cmt-panel.open .cmt-title{flex:0 0 auto;font-size:15px;margin:0 0 8px}
  body.post-list-v3 #postList .cmt-panel.open .cmt-list{
    flex:1 1 auto;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  body.post-list-v3 #postList .cmt-panel.open .cmt-form{position:relative;flex:0 0 auto;bottom:auto;margin-top:7px}
}

@media (max-width:430px){
  body.post-list-v3 .home-banner-copy{width:74% !important;padding:16px 15px 26px !important}
  body.post-list-v3 .home-banner-eyebrow{font-size:8px !important}
  body.post-list-v3 .home-banner-title{font-size:18px !important}
  body.post-list-v3 .home-banner-description{display:none !important}
  body.post-list-v3 .home-banner-cta{margin-top:7px}
  body.post-list-v3 #postList .post-action-label{display:none}
  body.post-list-v3 #postList .post-action,
  body.post-list-v3 #postList .likepill.post-action{min-width:64px;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  body.post-list-v3 *,body.post-list-v3 *::before,body.post-list-v3 *::after{
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}

/* Android WebView can report a desktop-width CSS viewport on a phone.
   The JS adds this mode class and portals the active panel directly under body. */
body.post-list-v3.post-list-comment-sheet-mode.post-list-comment-sheet-open{
  overflow:hidden !important;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  z-index:2147483000 !important;
  display:block !important;
  width:100% !important;
  height:76vh;
  height:min(76vh,680px);
  height:min(76dvh,680px);
  min-height:320px;
  max-height:680px !important;
  max-height:min(76vh,680px) !important;
  max-height:min(76dvh,680px) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:20px 20px 0 0 !important;
  background:#fff !important;
  box-shadow:0 -14px 40px rgba(0,0,0,.18) !important;
  transform:translate3d(0,0,0) !important;
  backface-visibility:hidden;
  isolation:isolate;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal::before{
  content:"";
  display:block;
  width:38px;
  height:4px;
  margin:8px auto 1px;
  border-radius:999px;
  background:#d7d7da;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal .cmt-box{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:13px;
  right:0;
  bottom:0;
  left:0;
  height:auto !important;
  min-height:0;
  margin:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#fff;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal .cmt-title{
  flex:0 0 auto;
  margin:0 0 8px;
  font-size:15px;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal .cmt-list{
  display:block !important;
  flex:1 1 120px;
  width:100%;
  height:auto !important;
  min-height:120px !important;
  max-height:none !important;
  overflow-y:auto !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#222 !important;
  content-visibility:visible !important;
  contain:none !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateZ(0);
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal .cmt-list.cmt-list-rendered > .cmt{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#222 !important;
}
body.post-list-v3.post-list-comment-sheet-mode > .cmt-panel.open.post-list-comment-sheet-portal .cmt-form{
  position:relative;
  bottom:auto;
  flex:0 0 auto;
  margin-top:7px;
}

/* v3.0.6 — ROOT(20260818-050102).war desktop sidebar/feed coordinates. */
@media (min-width:901px){
  body.post-list-v3{
    --sbw:270px;
    --gutter-left:90px;
    --gutter-right:24px;
    --right-rail:320px;
    --side-left-gap:30px;
  }
  body.post-list-v3 .frame{
    display:grid;
    grid-template-columns:var(--sbw) var(--gutter-left) minmax(0,1fr) var(--gutter-right) var(--right-rail);
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    gap:0;
    position:relative;
    justify-content:stretch;
  }
  body.post-list-v3 .sidebar{
    grid-column:1;
    width:auto;
    margin:0;
    top:50px;
    transform:none;
  }
  body.post-list-v3 .feed{
    grid-column:3;
    width:auto;
    max-width:none;
    min-width:0;
    padding:16px 0;
  }
  body.post-list-v3 #postList > article.card{
    padding:14px;
  }
  body.post-list-v3 .right-rail{
    display:block;
    grid-column:5;
  }
}