/* 찾기 페이지(휠·자전거) — 휴대폰 중심 개선(2026-10-01 사용자: "모바일 최적화 · 휠 브랜드 순위도 접을 수 있게 · 처음 열려 있다가 슥 접히는 애니") · finder-mobile.js 와 짝(처음 wheels-mobile 로 만들었다가 자전거 찾기도 공용) */

/* ── 휠 브랜드 순위 접기(모든 폭) ── */
.wr-fold .section-title{cursor:pointer;-webkit-tap-highlight-color:transparent}
.wr-tog{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid #e3d9ca;border-radius:99px;background:#fff;font:inherit;font-size:13.5px;font-weight:800;color:#3d3a34;cursor:pointer;white-space:nowrap}
.wr-tog i{display:inline-block;font-style:normal;transition:transform .35s}
.wr-fold.closed .wr-tog i{transform:rotate(180deg)}
.wr-fold.closed .wr-tog{background:#1f1c18;border-color:#1f1c18;color:#fff}
.wr-body{overflow:hidden;transition:height .7s cubic-bezier(.65,0,.35,1),opacity .5s}
.wr-fold.closed .wr-body{opacity:.2}
.wr-peek{display:none;margin:10px 0 0;padding:12px 14px;border:1px dashed #e0d3bd;border-radius:14px;background:#fffaf1;font-size:13.5px;color:#6f6456;cursor:pointer}
.wr-peek b{color:#1f1c18}.wr-peek em{font-style:normal;color:#b3651d;font-weight:800;margin-left:6px;white-space:nowrap;display:inline-block}
.wr-fold.closed .wr-peek{display:block;animation:wrPeek .5s ease both}
@keyframes wrPeek{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wr-fold.hint .wr-tog{animation:wrPulse 1.1s ease 2}
@keyframes wrPulse{0%,100%{box-shadow:0 0 0 0 #e0661a00}50%{box-shadow:0 0 0 7px #e0661a33}}
@media (prefers-reduced-motion:reduce){.wr-body{transition:none}.wr-fold.hint .wr-tog,.wr-fold.closed .wr-peek{animation:none}}

/* ── 휴대폰 ── */
@media (max-width:760px){
  /* 순위 줄: 한 줄로 줄이기(순위 · 브랜드 · 점수) */
  .wheel-rank{margin-bottom:26px}
  .wheel-rank h2{font-size:23px}
  .wheel-rank .section-title{align-items:center;gap:10px}
  .wheel-rank .rank-list{gap:8px}
  .wheel-rank .rank-row{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:4px 10px!important;padding:12px 14px!important;border-radius:16px;align-items:center}
  .wheel-rank .rank-row .rr-rank{grid-column:1;display:grid;justify-items:center;line-height:1.05}
  .wheel-rank .rank-row .rr-rank b{font-size:19px}.wheel-rank .rank-row .rr-rank small{font-size:10px}
  .wheel-rank .rank-row.is-first .rr-rank .crown{font-size:17px}.wheel-rank .rank-row.is-first .rr-rank small{display:none}
  .wheel-rank .rank-row .rr-brand{grid-column:2;min-width:0}
  .wheel-rank .rank-row .rr-brand strong{font-size:17px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wheel-rank .rank-row .rr-brand span{font-size:11.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wheel-rank .rank-row .rr-score{grid-column:3;text-align:right;min-width:78px}
  .wheel-rank .rank-row .rr-score strong{font-size:20px}.wheel-rank .rank-row .rr-score strong small{font-size:11px}
  .wheel-rank .rank-row .rr-score .score-split{width:78px;margin-left:auto}
  .wheel-rank .rank-row .rr-score>small{display:none}
  .wheel-rank .rank-row .rr-rep,.wheel-rank .rank-row .rr-feat,.wheel-rank .rank-row .rr-country{display:none!important}
  .wheel-rank .rank-row.is-first{padding-top:14px!important;padding-bottom:14px!important}
  .wheel-rank .hot-note{font-size:11.5px;margin:4px 0 12px}

  /* 브랜드 로고 판: 가로로 밀어 보는 두 줄 */
  .brand-strip .bs-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,44px);grid-auto-columns:104px;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000)}
  .brand-strip .bs-grid::-webkit-scrollbar{display:none}
  .brand-strip .bs-logo{height:44px;scroll-snap-align:start}
  .brand-strip .bs-head{gap:6px}.brand-strip .bs-head span{flex:1 1 100%;order:3;font-size:12px}
  .brand-strip .bs-head button{height:32px;padding:0 11px;font-size:12.5px}

  /* 필터: 「상세 필터」 버튼으로 접기 */
  .mf-bar{display:flex;align-items:center;gap:8px;margin:0 0 12px}
  .mf-btn{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 16px;border:1.5px solid #1f1c18;border-radius:14px;background:#fff;font:inherit;font-size:15px;font-weight:900;color:#1f1c18;cursor:pointer}
  .mf-btn b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:#e0661a;color:#fff;font-size:12px}
  .mf-btn b[hidden]{display:none}
  .mf-btn i{font-style:normal;transition:transform .3s}
  .mf-open .mf-btn i{transform:rotate(180deg)}
  .mf-reset{height:48px;padding:0 14px;border:1px solid #e3d9ca;border-radius:14px;background:#fff;font:inherit;font-size:13.5px;font-weight:800;color:#6f6456}
  .finder-layout.mf .finder-filters{display:none!important}
  .finder-layout.mf.mf-open .finder-filters{display:block!important;animation:mfIn .35s ease both;margin-bottom:14px;padding:6px 14px 10px;border:1px solid #eee5d8;border-radius:18px;background:#fff}
  @keyframes mfIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  /* 결과 목록 더 보기 */
  .mf-more{display:block;width:100%;height:52px;margin:14px 0 4px;border:0;border-radius:14px;background:#1f1c18;color:#fff;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
  .mf-more small{font-weight:600;color:#c9bca6;margin-left:6px}
  #wheelGrid .fcard.mf-hide,#bikeGrid .fcard.mf-hide{display:none!important}

  /* 떠 있는 버튼: 비교 막대가 뜨면 그 위로 */
  body.has-tray .nsh-btn.page{bottom:calc(var(--tray-h,0px) + 12px)!important}
  body.has-tray .nch-btn{bottom:calc(var(--tray-h,0px) + 12px)!important}
  body.has-tray .totop{bottom:calc(var(--tray-h,0px) + 70px)!important}
}

/* 다크 */
:root[data-theme="dark"] .wr-tog,:root[data-theme="dark"] .mf-btn,:root[data-theme="dark"] .mf-reset{background:var(--nbl-surface,#181d18);border-color:var(--nbl-border,#2a312a);color:var(--nbl-text,#e9ede7)}
:root[data-theme="dark"] .wr-fold.closed .wr-tog{background:#e9ede7;color:#141813;border-color:#e9ede7}
:root[data-theme="dark"] .wr-peek{background:var(--nbl-surface2,#212721);border-color:var(--nbl-border,#2a312a);color:var(--nbl-sub,#a4aca2)}
:root[data-theme="dark"] .wr-peek b{color:var(--nbl-text,#e9ede7)}
:root[data-theme="dark"] .finder-layout.mf.mf-open .finder-filters{background:var(--nbl-surface,#181d18);border-color:var(--nbl-border,#2a312a)}
:root[data-theme="dark"] .mf-btn{border-color:#e9ede7}
:root[data-theme="dark"] .mf-more{background:#e9ede7;color:#141813}

/* 휴대폰 카드: 「국내 공식가」 왼쪽 · 「무게」 오른쪽 한 줄 — 카드 높이를 줄여 한 화면에 더 많이(2026-10-01 사용자). 휠 카드(.three, 3칸)는 그대로 */
@media (max-width:600px){
  .fcard-nums:not(.three){flex-direction:row;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px}
  .fcard-nums:not(.three) span{flex:0 1 auto;min-width:0}
  .fcard-nums:not(.three) span+span{text-align:right;flex:0 0 auto}
  .fcard-nums:not(.three) small{font-size:10.5px}
  .fcard-nums:not(.three) b{font-size:14px;letter-spacing:-.4px;white-space:nowrap}
  .fcard-nums:not(.three) em{font-size:11.5px;white-space:normal}
  .fcard:has(>.cc:not([hidden])) .fcard-body{padding-bottom:20px}   /* 오른쪽 아래 💬 숫자와 무게가 겹치지 않게 */
}
/* 휴대폰 카드 더 줄이기(2026-10-01 사용자: "좀 더 줄여, 그래야 많은 모델을 보지") — 사진 130→104 · 로고·제목·여백 축소 · 요약 줄의 무게는 아래 무게 칸과 겹쳐 뺌(finder-mobile.js) */
@media (max-width:600px){
  #bikeGrid .fcard-pic{height:104px}
  #bikeGrid .fcard-pic img{padding:6px 8px 0}
  #bikeGrid .fcard-add,#bikeGrid .fcard-hide{width:30px;height:30px;top:8px;font-size:17px}
  #bikeGrid .fcard-add{right:8px}#bikeGrid .fcard-hide{right:42px;font-size:19px}
  #bikeGrid .fcard-tags{left:8px;top:8px}
  #bikeGrid .fcard-tags .yr-badge+.pop-badge{margin-top:6px}
  #bikeGrid .fcard-tags .pop-badge:first-child{margin-top:28px}
  #bikeGrid .fcard-body{padding:9px 10px 10px}
  #bikeGrid .fcard-logo{height:14px;max-width:88px}
  #bikeGrid .fcard-brand{font-size:11px}
  #bikeGrid .fcard h3{font-size:13.5px;line-height:1.3;margin:5px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #bikeGrid .fcard-sub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bikeGrid .fcard-sum{font-size:11.5px;line-height:1.4;margin:3px 0 0;word-break:keep-all}
  #bikeGrid .fcard-nums:not(.three){margin-top:6px;padding-top:6px}
  #bikeGrid .fcard-nums small{font-size:10px;line-height:1.2}
}