/* 로드 ↔ MTB 전환 (2026-10-01) — bikes.html · brands.html · index.html 공용. 토글 버튼 자체 모양은 disc.js 가 head 에서 넣는다(첫 그림부터 보이게) */

/* ── 찾기 페이지 맨 위 큰 토글 ── */
.disc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.disc-top .nbl-disc{box-shadow:inset 0 0 0 1px #e6dccd}
.disc-top .disc-hint{font-size:13px;color:#8a7f70;font-weight:600}
.disc-top .disc-hint b{color:#1f1c18}
html[data-disc="mtb"] .disc-top .disc-hint .r,html:not([data-disc="mtb"]) .disc-top .disc-hint .m{display:none}

/* 「나에게 맞는 자전거 픽」 추천 팝업은 로드 자료(recommend.js)로만 고른다 → MTB 화면에선 숨김 */
html[data-disc="mtb"] .finder-hero .match-inline{display:none}

/* MTB 자료를 받는 동안: 결과 자리만 살짝 흐리게(빈 화면 대신 안내 글) */
html.disc-wait #bikeGrid,html.disc-wait #filters,html.disc-wait #brandStrip{opacity:.35;pointer-events:none;transition:opacity .15s}
.mt-load{font-weight:800;color:#6b6358}
.mt-tag{display:inline-block;margin-right:4px;padding:2px 8px;border-radius:8px;background:#2f6b3a;color:#fff;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.02em;vertical-align:1px}
h2 .mt-tag{font-size:14px;vertical-align:4px}

/* MTB 필터 칩(바퀴·트래블) — 사이즈 칩 모양 재사용, 2열 */
.mt-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.mt-chips.mt-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.mt-chip{padding:7px 4px!important}
.mt-chip span{font-size:12.5px!important;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.seg.seg-wrap{flex-wrap:wrap}.seg.seg-wrap button{flex:1 1 40%}

/* 품절 배지(카드 사진 왼쪽 아래) · 팝업 상태 줄 */
.so-badge{position:absolute;left:12px;bottom:12px;background:#4a4540;color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:12px;letter-spacing:.04em}
.deal-badge~.so-badge{bottom:42px}
.fcard:has(.so-badge) .fcard-pic img{opacity:.72}
.kr-state.so{background:#efebe6;color:#4a4540}
.mt-pic{background:#fff;border-radius:20px;overflow:hidden;display:flex;justify-content:center;aspect-ratio:8/5;max-height:360px;margin-bottom:8px}
.mt-pic img{height:100%;max-width:100%;object-fit:contain}

/* ── 메인 「지금 핫한」 탭 ── */
.hot-disc{margin:16px 0 0}
#hot .section-title{flex-wrap:wrap;gap:12px}
.hot-list.mt-list .hot-tag{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;color:#2f6b3a}
.hot-list .so{color:#8a5a50;font-weight:800}
.hot-wait{grid-column:1/-1;padding:28px 0;text-align:center;color:#8a7f70;font-weight:700}

/* ── 브랜드 순위 탭 ── */
.br-disc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 20px}
.br-disc .disc-hint{font-size:13px;color:#8a7f70}
html.disc-wait #directoryGrid,html.disc-wait #rankSort{opacity:.35;pointer-events:none}
.br-mtb-note{margin:-6px 0 18px;font-size:13px;color:#7a7063}

/* 첫 화면 깜빡임 방지: 기억값이 MTB 면(disc.js 가 head 에서 <html data-disc="mtb">) 로드 순위·로드 핫 목록을 MTB 로 바꿀 때까지 가린다.
   스크립트가 실패해도 4초 뒤엔 보이게(애니메이션 보험) */
html[data-disc="mtb"] .directory-main:not(.disc-ok) :is(#rankingMethod,#rankingNote,#directoryGrid,#rankSort,.eyebrow,h1,.directory-intro),
html[data-disc="mtb"] #hot:not(.disc-ok) :is(#hotList,#hotTitle,.hot-note){visibility:hidden;animation:discShow 0s 4s forwards}
@keyframes discShow{to{visibility:visible}}

/* 휴대폰: 토글은 손가락 크기, 가로 넘침 없음 */
@media (max-width:600px){
 .disc-top{margin-bottom:14px}
 .disc-top .nbl-disc,.br-disc .nbl-disc{display:flex;width:100%}
 .disc-top .nbl-disc button,.br-disc .nbl-disc button,.hot-disc.nbl-disc button{flex:1;min-height:44px;padding:0 10px}
 .hot-disc.nbl-disc{display:flex;width:100%}
 .disc-top .disc-hint,.br-disc .disc-hint{font-size:12px}
}

/* ── 다크 ── */
[data-theme="dark"] .disc-top .nbl-disc{box-shadow:inset 0 0 0 1px #3a423a}
[data-theme="dark"] .disc-top .disc-hint,[data-theme="dark"] .br-disc .disc-hint,[data-theme="dark"] .br-mtb-note{color:#a4aca2}
[data-theme="dark"] .disc-top .disc-hint b{color:#e9ede7}
[data-theme="dark"] .mt-load{color:#c8cfc6}
[data-theme="dark"] .mt-tag{background:#3f8a4c}
[data-theme="dark"] .so-badge{background:#6b645c}
[data-theme="dark"] .kr-state.so{background:#2a2622;color:#d9d2c8}
[data-theme="dark"] .mt-pic{background:#f4f1ec}
[data-theme="dark"] .hot-list.mt-list .hot-tag{color:#7fc48b}
[data-theme="dark"] .hot-list .so{color:#e0a596}
[data-theme="dark"] .hot-wait{color:#a4aca2}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .disc-top .disc-hint,:root:not([data-theme="light"]) .br-disc .disc-hint{color:#a4aca2}
 :root:not([data-theme="light"]) .mt-tag{background:#3f8a4c}
 :root:not([data-theme="light"]) .kr-state.so{background:#2a2622;color:#d9d2c8}
}

/* 2026-10-01 3차: GPT 확인값 딱지 · 출처/판매가 안내 한 줄 · 320px 카드 가격 넘침 */
.vf-tag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:6px;background:#eef0f7;color:#4a5175;font-size:10.5px;font-weight:800;vertical-align:1px;white-space:nowrap}
.mt-src{margin:2px 0 6px;font-size:12.5px;color:#7a7063;line-height:1.5}
@media (max-width:340px){
 html.disc-mtb .fcard-nums:not(.three) b{font-size:12.5px;letter-spacing:-.6px}
 html.disc-mtb .fcard-nums:not(.three) span+span{flex:0 1 auto;min-width:0}
}
[data-theme="dark"] .vf-tag{background:#2b3046;color:#c3c9ea}
[data-theme="dark"] .mt-src{color:#a4aca2}

/* 2026-10-01 배포 후 검토: 결과 줄 「품절 빼고 보기」 · 검색 가격 낱말 안내 */
.so-tog{margin-left:6px;height:28px;padding:0 11px;border:1px solid #d9cfc0;border-radius:99px;background:#fff;font:inherit;font-size:12.5px;font-weight:800;color:#4a4540;cursor:pointer;vertical-align:1px}
.so-tog.on{background:#1f1c18;border-color:#1f1c18;color:#fff}
.so-tog:focus-visible{outline:2px solid #e8621a;outline-offset:2px}
.mt-qnote{display:block;margin-top:4px;font-size:12.5px;color:#2f6b3a;font-weight:700}
[data-theme="dark"] .so-tog{background:#212721;border-color:#3a423a;color:#e9ede7}
[data-theme="dark"] .so-tog.on{background:#e9ede7;color:#141813}
[data-theme="dark"] .mt-qnote{color:#7fc48b}