/* 메인: 라이더 커뮤니티 미리보기 + 섹션 접기 (home-extra.js) */
.hcm .section-title{margin-bottom:14px}
.hcm-go{display:flex;gap:10px;align-items:center}
.hcm-write{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:6px;background:#1f1c18;color:#fff!important;font-weight:800;font-size:14px;text-decoration:none}
.hcm-notice{display:grid;gap:4px;margin:0 0 12px;padding:10px 14px;background:#fff8ec;border:1px solid #f5d9b0;border-radius:8px}
.hcm-notice a{display:flex;align-items:center;gap:8px;color:#1f1c18;font-weight:700;font-size:14px;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hcm-notice a:hover{text-decoration:underline}
.hcm-notice em{flex:none;font-style:normal;font-size:11px;font-weight:900;color:#fff;background:#e0661a;border-radius:3px;padding:2px 6px}
.hcm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hcm-box{background:#fff;border:1px solid #e6dccb;border-top:3px solid #1f1c18;padding:0 14px 8px;min-width:0}
.hcm-box h3{display:flex;justify-content:space-between;align-items:center;margin:0;height:44px;border-bottom:1px solid #efe8dc;font-size:15.5px;font-weight:900;letter-spacing:-.3px}
.hcm-box h3 a{color:#1f1c18;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.hcm-box h3 a:hover{color:#e0661a}
.hcm-box h3 .hcm-more{font-size:12px;font-weight:700;color:#a89c89}
.hcm-box.b-market{border-top-color:#e0661a}.hcm-box.b-qna{border-top-color:#2c5da8}.hcm-box.b-mybike{border-top-color:#2f7a4b}.hcm-box.b-news{border-top-color:#b0671b}
.hcm-box ol{list-style:none;margin:0;padding:4px 0 0}
.hcm-box li a{display:flex;align-items:center;gap:4px;height:31px;color:#2b2722;font-size:13.5px;text-decoration:none;border-bottom:1px dotted #efe8dc}
.hcm-box li:last-child a{border-bottom:0}
.hcm-box li a:hover .hcm-t{text-decoration:underline}
.hcm-t{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hcm-t em{font-style:normal;font-size:10.5px;font-weight:900;color:#2c5da8;border:1px solid #2c5da8;border-radius:3px;padding:0 4px;margin-right:4px}
.hcm-t em.done{background:#2f7a4b;border-color:#2f7a4b;color:#fff}
.hcm-box li i{flex:none;font-style:normal;font-size:12px;font-weight:800;color:#e0661a}
.hcm-n{flex:none;display:inline-grid;place-items:center;width:14px;height:14px;border-radius:3px;background:#e0661a;color:#fff;font-size:9.5px;font-weight:900}
.hcm-d{flex:none;margin-left:auto;padding-left:8px;font-size:12px;color:#a89c89;font-variant-numeric:tabular-nums}
.hcm-empty{margin:0;padding:22px 0;text-align:center;color:#a89c89;font-size:13px;display:grid;gap:6px}
.hcm-empty a{color:#e0661a;font-weight:800;text-decoration:none}
.hcm-join{background:#1f1c18;border-color:#1f1c18;color:#e9e1d3;display:flex;flex-direction:column;justify-content:center;padding:18px}
.hcm-join h3{height:auto;border:0;color:#fff;font-size:17px;margin-bottom:6px}
.hcm-join p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:#c9bca6}
.hcm-join #hcmJoin{display:flex;gap:8px}
.hcm-cta{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:6px;background:#f0c35a;color:#1f1c18;font-weight:900;font-size:14px;text-decoration:none}
.hcm-cta.ghost{background:none;border:1px solid #5a5347;color:#e9e1d3}
@media (max-width:980px){.hcm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hcm-grid{grid-template-columns:1fr}.hcm-go .hcm-write{display:none}}

/* 섹션 접기 */
.fold-btn{flex:none;margin-left:12px;height:30px;padding:0 12px;border:1px solid #d9cdb9;border-radius:99px;background:#fff;color:#6f6456;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.fold-btn:hover{border-color:#1f1c18;color:#1f1c18}
.fold-btn:focus-visible{outline:3px solid #eac559;outline-offset:2px}
.section-title>.fold-btn{align-self:center}
.section-title:has(.fold-btn){align-items:center}
.section-kicker{position:relative}
.section-kicker>.fold-btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.fold-abs{position:relative}.fold-abs>.fold-btn{position:absolute;right:5.4%;top:18px;z-index:2}
.wheel-cat .fold-btn{background:transparent;color:#e9e1d3;border-color:#5a5347}
.fold-bar{display:none}
.is-folded>*:not(.fold-keep):not(.fold-bar):not(.fold-btn){display:none!important}
.is-folded{padding-top:14px!important;padding-bottom:14px!important;min-height:0!important}
.is-folded .section-title{margin-bottom:0!important}
.is-folded.fold-abs>.fold-keep{display:none!important}
.is-folded.fold-abs>.fold-bar{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:36px}
.fold-bar b{font-size:18px;font-weight:900}.fold-bar span{font-size:12.5px;color:#a89c89}
.is-folded .section-title p.eyebrow{margin-bottom:0}
@media (max-width:620px){.fold-btn{height:28px;padding:0 10px;font-size:12px}}
.section-title:has(>.fold-btn){justify-content:flex-start}.section-title:has(>.fold-btn)>:nth-child(2){margin-left:auto}

/* 이벤트 띠 (메인·커뮤니티) */
.ev-banner{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 16px;border-radius:10px;background:#1f1c18;color:#fff;text-decoration:none;flex-wrap:wrap}
.ev-banner span{font-size:12px;font-weight:900;letter-spacing:.08em;color:#1f1c18;background:#9be15d;border-radius:4px;padding:2px 8px}
.ev-banner b{font-size:15px;font-weight:800}.ev-banner em{font-style:normal;color:#9be15d}
.ev-banner i{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:#f0c35a}
.ev-banner:hover b{text-decoration:underline}

/* 메인 커뮤니티 박스도 게시판과 같은 나눔고딕 */
.hcm-box,.hcm-notice{font-family:'Nanum Gothic','나눔고딕',NanumGothic,'돋움',Dotum,sans-serif}
.hcm-box li a{font-size:13px}.hcm-box h3{font-weight:800}
/* 박스 키움(2026-09-28 사용자: 새 글 여러 개 보이게) — 글 10개 */
.hcm-notice[hidden]{display:none!important}
.hcm-grid{gap:16px}
.hcm-box{min-height:392px;display:flex;flex-direction:column}
.hcm-box ol{flex:1}
.hcm-box li a{height:33px;font-size:13.5px}
.hcm-box .hcm-empty{flex:1;align-content:center}
.hcm-join{min-height:0}
@media (max-width:620px){.hcm-box{min-height:0}}

/* 메인 커뮤니티 박스: 맑은 고딕 15px */
.hcm-box,.hcm-notice{font-family:'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif}
.hcm-box li a{font-size:15px;height:36px}.hcm-box h3{font-size:16px;font-weight:700}
.hcm-d{font-size:13px}.hcm-box{min-height:420px}
/* 접기 버튼이 오른쪽 설명 글을 덮던 것(2026-09-28) — 버튼 자리만큼 비운다 */
.section-kicker:has(>.fold-btn){position:relative;padding-right:100px}
.fold-abs:has(>.fold-btn)>.section-title,.fold-abs:has(>.fold-btn)>.section-kicker{padding-right:100px}
/* 섹션 접기·펼치기 버튼 통일(2026-09-29 사용자: "우측 정렬 고정, 크기 고정, 컬러 통일") — 모든 섹션 오른쪽 위 같은 자리 */
.fold-abs{position:relative}
.fold-abs>.fold-btn,.fold-btn{position:absolute!important;top:var(--fold-top,18px)!important;right:var(--fold-right,max(16px,4.4%))!important;left:auto!important;bottom:auto!important;transform:none!important;margin:0!important;z-index:3;
 display:inline-flex;align-items:center;justify-content:center;gap:5px;width:92px;height:34px;padding:0!important;
 background:#fff!important;color:#1f1c18!important;border:1px solid #d9cdb9!important;border-radius:99px;font-size:13px!important;font-weight:800;box-shadow:0 2px 8px #2a221612}
.fold-btn:hover{background:#1f1c18!important;color:#fff!important;border-color:#1f1c18!important}
.fold-btn span{font-size:11px}
/* 제목이 버튼 밑으로 들어가지 않게 오른쪽 여백 */
.fold-abs>.fold-keep{padding-right:108px;box-sizing:border-box}
.fold-abs.is-folded{min-height:70px}
@media (max-width:760px){.fold-abs>.fold-btn,.fold-btn{width:84px;height:32px}.fold-abs>.fold-keep{padding-right:96px}}
:root[data-theme="dark"] .fold-btn{background:#2b2722!important;color:#e9e1d3!important;border-color:#4a4438!important}
:root[data-theme="dark"] .fold-btn:hover{background:#e0661a!important;color:#fff!important;border-color:#e0661a!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fold-btn{background:#2b2722!important;color:#e9e1d3!important;border-color:#4a4438!important}}

/* ── 메인 섹션 정렬 통일(2026-09-29 사용자: "섹션마다 왼쪽 정렬 기준이 다르다 — PC·모바일 전부 같은 세로선") ──
   격자: 내용 최대 폭 1176px 가운데, 좌우 여백 --g = max(20px, 화면폭/2 - 588px), 폰(≤760px) 16px.
   섹션은 화면 폭 전체(배경 띠 그대로), 안쪽 내용만 [--g, 화면폭 - --g] 에 맞춘다.
   % 는 main 폭(= clientWidth, 스크롤바 제외) 기준이라 home-extra.js placeFolds 의 R 과 정확히 같다. */
main{--g:max(20px,calc(50% - 588px))}
@media (max-width:760px){main{--g:16px}}
main>.quick-menu{margin-left:var(--g)!important;margin-right:var(--g)!important;width:auto!important;max-width:none!important}
#brands,#hot,#community,#discover,#wheels,#news,#deals,#granfondo,#history{
 box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
 padding-left:var(--g)!important;padding-right:var(--g)!important}
/* 구분선은 한 가지 — 화면 폭 꽉 차게(브랜드 순위 위아래 선이 5.4% 안쪽에서 끊기던 것) */
#brands{border-left:0;border-right:0}
/* 뉴스 박스는 테두리 선이 격자에 닿는다(안쪽 글은 박스 padding 만큼 들어감) */
#newsBox{margin-left:0;margin-right:0}

/* (warm-style.css 의 #hot,#discover… padding-top:70px!important 가 id 선택자라 여기도 id 로 이긴다)
   접힌 섹션 높이 통일(2026-09-29 사용자: "접었을 때 섹션 세로 높이도 전부 같게") — 64px, 폰 56px.
   섹션 원래 위아래 padding·margin·min-height 는 없애고 fold-bar 한 줄만. 배경 띠(휠 검정·베이지)는 그대로, 아래 1px 선은 꽉 차게 */
main>section.is-folded,#brands.is-folded,#hot.is-folded,#community.is-folded,#discover.is-folded,#wheels.is-folded,#news.is-folded,#deals.is-folded,#granfondo.is-folded,#history.is-folded{display:block!important;height:64px!important;min-height:0!important;max-height:64px;
 padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;
 border-top:0!important;border-bottom:1px solid var(--line,#eeeae4)!important;overflow:hidden}
#wheels.is-folded{border-bottom-color:#2e2b27!important}
main>section.is-folded.fold-abs>.fold-bar{display:flex;align-items:center;height:100%;min-height:0;margin:0!important;padding:0 108px 0 0!important;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.is-folded>.fold-bar b{flex:none}
.is-folded>.fold-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){main>section.is-folded,#brands.is-folded,#hot.is-folded,#community.is-folded,#discover.is-folded,#wheels.is-folded,#news.is-folded,#deals.is-folded,#granfondo.is-folded,#history.is-folded{height:56px!important;max-height:56px}main>section.is-folded.fold-abs>.fold-bar{padding-right:96px!important}.is-folded>.fold-bar b{font-size:16px}}
/* 히스토리는 두 칸 격자라 오른쪽 사진 카드가 섹션 맨 위까지 올라와 접기 버튼(위 16px·높이 34px)이 카드 모서리를 가렸다 → 카드가 버튼 아래에서 시작 */
@media (min-width:901px){#history:not(.is-folded){padding-top:62px!important}}

/* 지금 핫한 로드바이크들 — 흰 카드·얇은 테두리·세리프 강조어 (2026-09-30 사용자 지정: "훨 깔끔하네"). 라이트에서만, 다크는 기존 규칙 유지 */
#hot .section-title h2{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;font-weight:700;letter-spacing:-.035em}
#hot .section-title h2 em{font-style:normal;font-weight:900;font-size:1.22em;letter-spacing:-.045em;line-height:1}
#hot .eyebrow{font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:600;letter-spacing:.14em;color:#9aa0ac}
#hot .hot-note{color:#9aa0ac}
:root[data-theme="light"] #hot .hot-list{gap:14px}
:root[data-theme="light"] #hot .hot-list a{background:#fff;border:1px solid #e8e9ef;border-radius:24px;padding:18px 18px 20px;box-shadow:none;font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif}
:root[data-theme="light"] #hot .hot-list a:hover{border-color:#14151a;box-shadow:0 1px 2px rgba(20,21,26,.04),0 8px 28px rgba(20,21,26,.06);transform:translateY(-2px)}
:root[data-theme="light"] #hot .hot-rank{font:600 15px 'Pretendard Variable',Pretendard,sans-serif;color:#9aa0ac;left:18px;top:16px}
:root[data-theme="light"] #hot .hot-brand{font:600 10.5px 'Pretendard Variable',Pretendard,sans-serif;letter-spacing:.12em;color:#9aa0ac}
:root[data-theme="light"] #hot .hot-list strong{font-weight:700;letter-spacing:-.035em;color:#14151a}
:root[data-theme="light"] #hot .hot-list small{color:#6b6f7b}

/* 라이더 커뮤니티(메인) — 위 「핫한 로드바이크」와 같은 스타일, 글자는 더 작게 (2026-09-30 사용자). 라이트에서만, 다크는 기존 규칙 유지 */
.hcm .section-title h2{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;font-weight:700;letter-spacing:-.035em}
.hcm .section-title h2 em{font-style:normal;font-weight:900;font-size:1.22em;letter-spacing:-.045em;line-height:1}
.hcm .eyebrow{font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:600;letter-spacing:.14em;color:#9aa0ac}
:root[data-theme="light"] .hcm{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif}
:root[data-theme="light"] .hcm-grid{gap:14px}
:root[data-theme="light"] .hcm-box{background:#fff;border:1px solid #e8e9ef;border-top:1px solid #e8e9ef;border-radius:24px;padding:4px 20px 12px}
:root[data-theme="light"] .hcm-box h3{height:50px;border-bottom:1px solid #e8e9ef;font-size:14px;font-weight:700;letter-spacing:-.02em}
:root[data-theme="light"] .hcm-box h3 a,:root[data-theme="light"] .hcm-box li a{color:#14151a}
:root[data-theme="light"] .hcm-box h3 a:hover{color:#14151a;text-decoration:underline}
:root[data-theme="light"] .hcm-box h3 .hcm-more{font-size:11px;font-weight:600;color:#9aa0ac}
:root[data-theme="light"] .hcm-box li a{height:31px;font-size:12.5px;border-bottom:0}
:root[data-theme="light"] .hcm-d{font-size:11px;color:#9aa0ac}
:root[data-theme="light"] .hcm-box li i{background:none;color:#3d7bff;font-size:11px;font-weight:700}
:root[data-theme="light"] .hcm-n{background:#3d7bff;color:#fff;width:13px;height:13px;font-size:9px}
:root[data-theme="light"] .hcm-t em{border-color:#e0e2ea;color:#6b6f7b;font-size:10px;font-weight:600}
:root[data-theme="light"] .hcm-t em.done{background:#14151a;border-color:#14151a;color:#fff}
:root[data-theme="light"] .hcm-box.b-market,:root[data-theme="light"] .hcm-box.b-qna,:root[data-theme="light"] .hcm-box.b-mybike,:root[data-theme="light"] .hcm-box.b-news{border-top-color:#e8e9ef}
:root[data-theme="light"] .hcm-empty{color:#9aa0ac;font-size:12px}
:root[data-theme="light"] .hcm-empty a{color:#14151a;text-decoration:underline}
:root[data-theme="light"] .hcm-notice{background:#f6f7fa;border:1px solid #e8e9ef;border-radius:16px;padding:10px 14px}
:root[data-theme="light"] .hcm-notice a{color:#14151a;font-size:13px}
:root[data-theme="light"] .hcm-notice em{background:#14151a;color:#fff;border-radius:99px;padding:2px 9px}
:root[data-theme="light"] .hcm-write{background:#14151a;color:#fff!important;height:36px;padding:0 18px;border-radius:99px;font-size:13px;font-weight:700}
:root[data-theme="light"] .hcm-join{background:linear-gradient(140deg,#ece7ff,#e4eeff 55%,#e0f5ec);border:0}
:root[data-theme="light"] .hcm-join h3{color:#14151a;font-size:17px;font-weight:700;height:auto;border:0}
:root[data-theme="light"] .hcm-join p{color:#6b6f7b;font-size:12.5px}
:root[data-theme="light"] .hcm-cta{background:#14151a;color:#fff;height:38px;padding:0 18px;border-radius:99px;font-size:13px;font-weight:700}
:root[data-theme="light"] .hcm-cta.ghost{background:transparent;border:1px solid #14151a;color:#14151a}
/* 커뮤니티 섹션 아래 여백 — 다음 섹션(베이지 띠)과 붙지 않게 (2026-09-30 사용자) */
.hcm{padding-bottom:64px}
@media (max-width:620px){.hcm{padding-bottom:48px}}

/* 메인 「라이더 커뮤니티」 제목 = 커뮤니티 페이지로 가는 링크(2026-09-30 사용자). 마우스를 올리면 글자색이 바뀌고 화살표가 나타나 눌러지는 글자임을 알린다 */
.hcm .hcm-tt{color:inherit;text-decoration:none;cursor:pointer;transition:color .15s}
.hcm .hcm-tt::after{content:"→";display:inline-block;margin-left:.3em;font-size:.8em;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .15s}
.hcm .hcm-tt:hover,.hcm .hcm-tt:focus-visible{color:#3d7bff}
.hcm .hcm-tt:hover::after,.hcm .hcm-tt:focus-visible::after{opacity:1;transform:none}
.hcm .hcm-tt:focus-visible{outline:3px solid #3d7bff55;outline-offset:4px;border-radius:6px}
:root[data-theme="dark"] .hcm .hcm-tt:hover,:root[data-theme="dark"] .hcm .hcm-tt:focus-visible{color:#8fb3ff}

/* 메인 중고장터 박스 강조 — 제목 줄에 거래하는 너구리 둘(상반신)이 앉아 있다 (2026-09-30 사용자: "중고거래를 더 부각") */
html .hcm-box.b-market{border:2px solid #f3a86b!important;background:linear-gradient(180deg,#fff3e6 0,#fff 88px)!important;box-shadow:0 6px 18px #e0661a1f}
html .hcm-box.b-market h3{height:62px!important;gap:8px;border-bottom-color:#f3cfae!important}
html .hcm-box.b-market h3>a:first-child{color:#d9560c!important;font-size:17px;font-weight:900}
.hcm-peek{flex:none;align-self:flex-end;margin:0 auto 0 4px;width:108px;line-height:0;transform-origin:50% 100%;animation:hcmPeek 2.8s ease-in-out infinite}
.hcm-peek img{width:100%;height:auto;display:block}
.hcm-peek:hover{animation-play-state:paused}
@keyframes hcmPeek{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.hcm-peek{animation:none}}
.hcm-mkev{flex:none;margin-right:6px;padding:4px 10px;border-radius:99px;background:#e0661a;color:#fff!important;font-size:11.5px;font-weight:900;text-decoration:none!important;white-space:nowrap;box-shadow:0 3px 8px #e0661a55}
.hcm-mkev:hover{background:#c64f07}
.hcm-mkev[hidden]{display:none}
:root[data-theme="dark"] .hcm-box.b-market{background:linear-gradient(180deg,#34261a 0,#1c1a17 88px)!important;border-color:#8a4a1c!important}
@media (max-width:400px){.hcm-peek{width:92px}}
html .hcm-box.b-market h3 .hcm-more{white-space:nowrap;flex:none}
.hcm-box.b-market h3>a:first-child{flex:none;white-space:nowrap}
.hcm-peek{min-width:0;width:auto;max-width:104px;flex:0 1 104px}
@media (max-width:1100px) and (min-width:981px){.hcm-mkev{font-size:10.5px;padding:3px 8px}}