/* Vavoom AI — 카테고리 AI 상품 추천 위젯. 폰트는 테마 상속(font-family 지정 안 함, 컨트롤만 font:inherit).
   v1.9.0: 제품 요약 카드와 같은 보라 스파클 마크, #F7F7F7 박스 + 10px 라운드(그림자·테두리 없음). 입력부는 상단 고정 바(옵션), 결과부는 순위 리스트. */

/* ---------- 박스 공통 ---------- */
.vai-rec{margin:0 0 12px;padding:14px;border:0;border-radius:10px;background:#F7F7F7;box-sizing:border-box}
.vai-rec *{box-sizing:border-box}
.vai-rec__head{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 8px;font-size:15px;line-height:1.35;color:#1f2937}
.vai-rec__head strong{font-weight:700}
.vai-rec__icon{flex:0 0 auto;width:18px;height:18px;display:block}
.vai-rec__badge{flex:0 0 auto;margin-left:auto;font-size:11px;line-height:1.4;color:#b26a00;background:#fff4e0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.vai-rec__tagline{flex-basis:100%;margin-top:-3px;font-size:14px;line-height:1.45;color:#6b7280}
.vai-rec__examples-row{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0}
.vai-rec__ex-label{flex:0 0 auto;padding-top:7px;font-size:14px;line-height:1.4;color:#9ca3af} /* 7px = 칩 border 1 + padding 6 → 첫 줄 칩 글자와 높이 맞춤 */
.vai-rec__examples{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px} /* 768px 미만: 한 줄 가로 스크롤(터치·휠→JS) — 고정 바 높이를 키우지 않는다. 768px 이상은 아래 미디어 쿼리에서 줄바꿈 */
.vai-rec__examples::-webkit-scrollbar{display:none}
.vai-rec__example{flex:0 0 auto;margin:0;padding:6px 12px;border:1px solid #E5E5E5;border-radius:999px;background:#fff;color:#374151;font:inherit;font-size:14px;line-height:1.4;white-space:nowrap;cursor:pointer}
.vai-rec__example:hover{border-color:#7c3aed;color:#1f2937}
.vai-rec__form{display:flex;gap:8px;margin:0}
.vai-rec__hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none} /* 허니팟 — 사람에게는 보이지 않는다 */
.vai-rec__input{flex:1 1 auto;min-width:0;margin:0;padding:10px 12px;border:1px solid #E5E5E5;border-radius:10px;font:inherit;font-size:14px;line-height:1.4;background:#fff;color:inherit}
.vai-rec__input::placeholder{color:#9ca3af}
.vai-rec__input:focus{outline:none;border-color:#7c3aed}
.vai-rec__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:10px 16px;border:0;border-radius:10px;background:#111;color:#fff;font:inherit;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;text-decoration:none;white-space:nowrap}
.vai-rec__btn:hover{color:#fff;opacity:.9}
.vai-rec__btn:disabled{opacity:.5;cursor:default}

/* ---------- 상단 고정 바 (옵션 sticky) — 같은 박스 스타일, 스크롤해도 상단에 고정 ---------- */
.vai-rec--bar{position:-webkit-sticky;position:sticky;top:var(--vai-rec-top,0px);z-index:20;margin:0 0 10px;padding:12px 14px}
.vai-rec--bar .vai-rec__head{margin:0 0 8px;font-size:14px}
.vai-rec--bar .vai-rec__input{padding:9px 12px;font-size:13px}
.vai-rec--bar .vai-rec__btn{padding:9px 14px;font-size:13px}

/* ---------- 관리자 전용 숨김 사유 (테스트 모드, 성인인증 쿠키 없음) ---------- */
.vai-rec--hint{padding:8px 12px;border:1px dashed rgba(0,0,0,.2);background:#fff8ec;color:#7a4b00;font-size:12px;line-height:1.5}

/* ---------- 결과 영역 ---------- */
.vai-rec__result{margin-top:12px}
.vai-rec__result:empty{display:none}
.vai-rec__result--panel{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:#F7F7F7} /* 바와 같은 박스. 응답 뒤 스크롤 보정은 JS reveal() 이 바 높이를 재서 처리 */
.vai-rec__loading{min-height:56px;display:flex;align-items:center;gap:8px;color:#6b7280;font-size:13px}
.vai-rec__spinner{flex:0 0 auto;width:16px;height:16px;border:2px solid rgba(0,0,0,.12);border-top-color:#7c3aed;border-radius:50%;animation:vai-rec-spin .8s linear infinite}
@keyframes vai-rec-spin{to{transform:rotate(360deg)}}
.vai-rec__msg{margin:0 0 10px;font-size:14px;line-height:1.5;color:#374151}
.vai-rec__msg--warn{color:#b26a00}
.vai-rec__msg--error{color:#c0392b}
.vai-rec__debug{margin:8px 0 0;font-size:12px;line-height:1.5;color:#9ca3af} /* 테스트 모드 진단 줄 */
.vai-rec__links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0} /* 다른 카테고리 이동 버튼 */
.vai-rec__link{display:inline-block;padding:8px 14px;border:1px solid #E5E5E5;border-radius:999px;background:#fff;color:#1f2937;font-size:14px;line-height:1.4;text-decoration:none}
.vai-rec__link:hover{border-color:#7c3aed;color:#1f2937;text-decoration:none}

/* ---------- 순위 리스트 카드 (회색 박스 위 흰 카드) ---------- */
.vai-rec__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}
.vai-rec__card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;align-items:start;padding:8px;text-decoration:none;color:inherit;border:0;border-radius:10px;background:#fff}
.vai-rec__card:hover{color:inherit;background:#fff;box-shadow:none;outline:1px solid #E5E5E5}
.vai-rec__thumb{grid-row:1/4;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#f0f0f0}
.vai-rec__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.vai-rec__rank{position:absolute;left:12px;top:12px;z-index:1;width:20px;height:20px;border-radius:6px;background:#7c3aed;color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center}
.vai-rec__name{font-size:14px;font-weight:700;line-height:1.35;color:#1f2937;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vai-rec__price{margin-top:2px;font-size:14px;font-weight:700;color:#1f2937}
.vai-rec__price del{opacity:.5;font-weight:400;margin-right:4px}
.vai-rec__reason{margin-top:4px;font-size:13px;line-height:1.5;color:#4b5563}

/* ---------- 안내(비로그인·미인증) ---------- */
.vai-rec--gate .vai-rec__gate-text{margin:0 0 10px;font-size:14px;line-height:1.5;color:#4b5563}

@media (min-width:768px){
  .vai-rec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vai-rec__examples{flex-wrap:wrap;overflow:visible;padding-bottom:0} /* PC 는 휠이 세로라 가로 스크롤 대신 줄바꿈으로 전부 노출 */
  .vai-rec__example{max-width:100%;white-space:normal;text-align:left} /* 행 폭보다 긴 예시도 박스 밖으로 안 나가고 안에서 줄바꿈 */
}
@media (max-width:480px){.vai-rec:not(.vai-rec--bar) .vai-rec__form{flex-direction:column}}