/*
* 렌탈마켓 공개 HOME — .hm-* 전용
*
* 설계 정본 PUBLIC-UI-001-HOME-DESIGN-v0.1.12.md §16-3
* 정의 범위 .pub-root 하위의 .hm-* 만
* 허용 .hm-* 내부 scope 에서의 토큰 조정
* 금지 .pd-* / .dt-* / .hd / .ft / .card / .btn / .badge / .price 재정의
* :root 에서 --pub-* 재정의
* .rm-* 신규 정의
* !important
*
* 색 규칙 마젠타는 돈과 행동에만. 이 파일이 다루는 Hero·브랜드·기획 진입 영역은
* 돈도 행동도 아니므로 잉크와 중립만 쓴다.
*
* .pd-grid 는 재사용하지 않는다(HOME 은 열 규칙이 다르다).
* 이번 1차 범위는 Hero · 브랜드 · 진행 중인 기획 3개다.
*/
/* ── 섹션 제목 행 ───────────────────────────────────────── */
.pub-root .hm-sechead{margin-bottom:var(--s6);}
/* ── Hero ──────────────────────────────────────────────
* PUBLIC-FINAL-BUNDLE-001: 중앙 카드형 캐러셀.
*
* 전체 폭에서 카드형으로 바꾼 이유
* 화면 끝까지 채우면 배너가 페이지를 지배해 아래 콘텐츠로 시선이 안 넘어간다.
* 카드형은 좌우 여백이 생기고 이웃 배너가 살짝 보여
* "더 있다" 를 도트가 아니라 배너 자체로 전달한다.
*
* 전환은 트랙 하나를 transform 으로 민다.
* 비율은 기존과 같다. 모바일 68:73 / 768px 이상 3:1.
* 관리자 업로드 비율이 달라도 중앙 크롭으로 레이아웃이 흔들리지 않는다.
*/
.pub-root .hm-hero{position:relative;overflow:hidden;
padding:var(--s5) 0 var(--s8);}
.pub-root .hm-hero__track{display:flex;gap:var(--s4);
transition:transform .62s cubic-bezier(.33,.9,.28,1);
will-change:transform;}
.pub-root .hm-hero__slide{position:relative;flex:0 0 86%;
aspect-ratio:68/73;border-radius:var(--r2);overflow:hidden;
background:var(--pub-bg-3);
opacity:.45;transition:opacity .62s ease;}
.pub-root .hm-hero__slide[aria-current="true"]{opacity:1;}
/*
* 활성/비활성 시각 크기 (PATCH-004 RC2 · 00 C안).
*
* layout geometry 는 건드리지 않는다.
* 모든 슬라이드의 flex-basis · offsetWidth 가 동일하다.
* public-home.js 의 중앙 offset 계산이 offsetLeft · offsetWidth 를 쓰므로
* 폭이 슬라이드마다 다르면 넘길 때 카드가 좌우로 흔들린다.
*
* 그래서 transform: scale 로 "보이는 크기"만 줄인다.
* scale 은 레이아웃을 바꾸지 않는다. 자리는 그대로 두고 그려지는 크기만 준다.
* 트랙은 translateX, 슬라이드는 scale 로 축이 갈리므로 서로 덮어쓰지 않는다.
*
* 기본이 축소이고 활성만 원래 크기다.
* aria-current 는 JS 가 붙인다. JS 가 없거나 실패하면 아무 슬라이드도 활성이 아니라
* 전부 축소된 채로 남는다. 그건 "작지만 보이는" 상태라 읽을 수 있다.
* 반대로 기본을 scale(1) 로 두면 JS 실패 시 전부 커져 겹친다.
*/
.pub-root .hm-hero__slide{
transform:scale(var(--hm-hero-scale, 1));
transform-origin:center center;
transition:opacity .62s ease, transform .62s cubic-bezier(.33,.9,.28,1);
}
.pub-root .hm-hero__link{display:block;width:100%;height:100%;}
.pub-root .hm-hero__link:hover{text-decoration:none;}
.pub-root .hm-hero picture{display:block;width:100%;height:100%;}
.pub-root .hm-hero img{width:100%;height:100%;object-fit:cover;}
@media (min-width:768px){
.pub-root .hm-hero{padding:var(--s6) 0 var(--s10);}
.pub-root .hm-hero__slide{flex:0 0 74%;aspect-ratio:3/1;}
}
@media (min-width:1024px){
/*
* PC 배너 폭 (PATCH-004 RC2).
*
* 본문 컨테이너 content-box 와 같은 폭으로 맞춘다.
* 배너만 좁으면 카테고리·카드와 좌우 선이 어긋나 보인다.
*
* 좁은 화면에서는 100vw 쪽이 작아 그쪽을 따른다.
* 고정값만 두면 화면 밖으로 나가 가로 스크롤이 생긴다.
*
* 비활성(이웃) 배너도 같은 폭이다.
* 폭을 다르게 하면 JS 중앙 정렬이 슬라이드마다 다른 값을 계산해
* 넘길 때 카드가 좌우로 흔들린다.
* 활성/비활성 구분은 opacity 로만 한다(위 .hm-hero__slide 참조).
*/
/*
* HERO active 폭 (PATCH-005).
*
* 1136 → 1216px. container 1280 확대에 맞춘다.
* --container 1280 · --gutter 32(>=1024)
* 1280 - 32*2 = 1216 = .container 의 content-box 폭
*
* 실측으로 확인했다(1440 뷰포트).
* 조정 전 콘텐츠 정렬선 x=112 · HERO x=149 → 37px 어긋남
* 조정 후 둘 다 x=112
*
* 1216 을 직접 적지 않고 토큰에서 계산한다.
* --container 가 다시 바뀌면 HERO 도 따라온다.
*
* min() 으로 화면 폭을 넘지 않게 한다.
* 1024~1279 구간에서는 화면이 1216 보다 좁아 고정값만 두면 넘친다.
*/
.pub-root .hm-hero__slide{
flex:0 0 min(calc(var(--container) - var(--gutter) * 2),
calc(100vw - var(--gutter) * 2));
}
/*
* 비활성 축소 비율 (PC 전용).
*
* 1216 * 0.792 ≈ 963px. 이웃 배너가 살짝 보이는 정도를 유지한다.
* 모바일·태블릿은 슬라이드가 이미 86% / 74% 라 더 줄이지 않는다.
* 좁은 화면에서 축소하면 이웃이 뭉개져 무엇인지 알 수 없다.
*/
.pub-root .hm-hero__slide{--hm-hero-scale:.792;}
.pub-root .hm-hero__slide[aria-current="true"]{--hm-hero-scale:1;}
/*
* 배너가 1건이면 JS 가 붙지 않아 aria-current 도 없다.
* 그대로 두면 유일한 배너가 축소된 채로 남는다.
*/
.pub-root .hm-hero--single .hm-hero__slide{--hm-hero-scale:1;}
}
/* 화살표 — 배너 위에 얹히므로 밝은 사진에서도 보이게 흰 판을 깐다.
넓은 화면에서는 중앙 카드 안쪽 가장자리에 붙인다.
화면 끝에 두면 이웃 배너 위에 얹혀 무엇을 넘기는 버튼인지 흐려진다. */
.pub-root .hm-hero__arw{position:absolute;top:50%;z-index:2;
width:44px;height:44px;margin-top:-22px;padding:0;
border:0;border-radius:var(--r-pill);
box-shadow:inset 0 0 0 1px var(--pub-line);
background:rgba(255,255,255,.92);cursor:pointer;
display:grid;place-items:center;transition:background .15s ease;}
.pub-root .hm-hero__arw:hover{background:#fff;}
.pub-root .hm-hero__arw::before{content:"";width:9px;height:9px;
border-top:2px solid var(--pub-ink-2);border-right:2px solid var(--pub-ink-2);}
.pub-root .hm-hero__arw--prev{left:var(--gutter);}
.pub-root .hm-hero__arw--prev::before{transform:rotate(-135deg);margin-left:3px;}
.pub-root .hm-hero__arw--next{right:var(--gutter);}
.pub-root .hm-hero__arw--next::before{transform:rotate(45deg);margin-right:3px;}
@media (min-width:1024px){
.pub-root .hm-hero__arw--prev{left:calc(50% - 520px + var(--s4));}
.pub-root .hm-hero__arw--next{right:calc(50% - 520px + var(--s4));}
}
/*
* 숫자 · 진행선 인디케이터를 뺐다 (D-RC35-HERO-CONTROL-OVERLAP-01).
*
* 도트와 같은 자리(중앙 하단)에 겹쳐 있었다.
* 둘 다 "지금 몇 번째" 를 말하는데 화면에서 서로를 가렸다.
* 도트만 남긴다. 누를 수 있고 focus 가 되며 44px 손가락 영역을 지킨다.
*/
/*
* 도트 — 시각 8px, 터치 영역 44px. 캐러셀 아래 중앙.
*
* 음수 margin 을 뺐다.
* 인디케이터가 배너 안쪽 아래에 떠 있어서 도트를 위로 당겨 붙였었다.
* 인디케이터가 사라졌으므로 배너 아래에 그대로 둔다.
* 당겨 두면 배너 모서리와 도트가 다시 겹친다.
*/
.pub-root .hm-hero__dots{display:flex;justify-content:center;align-items:center;gap:2px;}
.pub-root .hm-hero__dot{width:44px;height:44px;padding:0;border:0;background:none;
display:grid;place-items:center;cursor:pointer;}
.pub-root .hm-hero__dot::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);
background:var(--pub-line-2);transition:width .15s ease,background .15s ease;}
.pub-root .hm-hero__dot[aria-current="true"]::before{width:20px;background:var(--pub-ink);}
/* 움직임을 줄이도록 설정한 사용자에게는 전환 애니메이션을 걸지 않는다. */
@media (prefers-reduced-motion:reduce){
.pub-root .hm-hero__track,
.pub-root .hm-hero__slide{transition:none;}
}
/* ── 브랜드 바로가기 ─────────────────────────────────────
* 텍스트 타일. 버튼처럼 보이면 CTA 위계와 충돌하므로 .btn 을 재사용하지 않는다.
* 개수가 늘어도 열 수만 유지하고 행이 늘어난다.
*/
/*
* 가운데 정렬 flex 다 (HOME-SECTION-HEAD-CENTER-001).
* 격자로 두면 브랜드 수가 열 수의 배수가 아닐 때 — 지금은 8열에 7개 —
* 마지막 칸이 비어 줄 전체가 왼쪽으로 치우쳐 보인다.
* 제목이 가운데인데 타일만 왼쪽이면 축이 어긋난다.
*/
.pub-root .hm-brand__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);}
/*
* 폭은 에 준다. flex 항목은 이고 .hm-brand__item 은 그 안의 다.
* 에 width:50% 를 주면 내용만큼 줄어든 의 50% 가 되어 타일이 찌그러진다
* (실측: 390px 에서 26px). 격자에서 flex 로 바꾸면서 생긴 결함이다.
*/
.pub-root .hm-brand__list > li{display:flex;width:148px;max-width:100%;min-width:0;}
.pub-root .hm-brand__item{display:flex;align-items:center;justify-content:center;
width:100%;
min-width:0;min-height:56px;padding:0 var(--s2);
border:1px solid var(--pub-line);border-radius:var(--r1);
font-size:var(--fs-label);font-weight:var(--fw-sb);color:var(--pub-ink-2);
text-align:center;line-height:1.3;word-break:keep-all;}
.pub-root .hm-brand__item:hover{border-color:var(--pub-line-2);color:var(--pub-ink);
text-decoration:none;}
/* 긴 브랜드명(청호나이스)이 좁은 화면에서 넘치지 않도록 한 단계 내린다 */
@media (max-width:399px){
.pub-root .hm-brand__item{font-size:var(--fs-caption);}
}
/* 좁은 화면에서는 두 장씩 들어가도록 폭을 줄인다. 148px 고정이면 한 장씩 떨어진다. */
@media (max-width:539px){
.pub-root .hm-brand__list > li{width:calc(50% - (var(--s2) / 2));}
}
@media (min-width:768px){
.pub-root .hm-brand__list{gap:var(--s3);}
.pub-root .hm-brand__item{min-height:64px;}
}
@media (min-width:1024px){
.pub-root .hm-brand__item{min-height:72px;}
}
/* ── 진행 중인 기획 ─────────────────────────────────────
* 이미지·링크 진입 영역이다. 가격·혜택 수치를 담지 않는다.
*/
.pub-root .hm-plan__list{display:grid;gap:var(--s4);}
.pub-root .hm-plan__item{min-width:0;}
.pub-root .hm-plan__media{display:block;position:relative;width:100%;aspect-ratio:16/9;
overflow:hidden;border-radius:var(--r2);background:var(--pub-bg-3);}
.pub-root .hm-plan__media:hover{text-decoration:none;}
.pub-root .hm-plan__media picture{display:block;width:100%;height:100%;}
.pub-root .hm-plan__media img{width:100%;height:100%;object-fit:cover;}
@media (min-width:768px){
.pub-root .hm-plan__list{grid-template-columns:repeat(2,1fr);gap:var(--s6);}
}
/* ══ PUBLIC-FINAL-BUNDLE-001 신규 섹션 ═════════════════════ */
/* ── 섹션 헤더: 제목 + 더보기 ─────────────────────────────
* 더보기는 링크다. .btn 을 재사용하지 않는다.
* 버튼처럼 보이면 페이지의 CTA 위계와 충돌한다.
*/
/*
* 섹션 머리.
*
* 제목과 본문 사이가 좁아 붙어 보였다. 간격을 명시한다.
* 섹션 자체의 상하 여백(72px)은 그대로 둔다.
* 여백까지 늘리면 스크롤만 길어지고 한 화면에 들어오는 정보가 줄어든다.
*/
/*
* 섹션 제목은 가운데 · 32px 다 (HOME-SECTION-HEAD-CENTER-001).
*
* .t-section 자체를 가운데로 보내지 않는다.
* 같은 클래스를 상품 상세의 「전체 렌탈 조건표」와 정책 페이지 제목이 쓴다.
* 홈에서만 쓰는 .hm-sechead 를 기준으로 걸어 그 둘을 건드리지 않는다.
*/
.pub-root .hm-sechead{margin-bottom:var(--s12);text-align:center;}
.pub-root .hm-sechead .t-section{font-size:var(--fs-section-lg);}
@media (max-width:767px){
.pub-root .hm-sechead{margin-bottom:var(--s8);}
}
.pub-root .hm-sechead--row{display:flex;align-items:baseline;
justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);}
/*
* 더보기 알약 (HOME-SECTION-MORE-PILL-001).
*
* 머리줄 오른쪽의 작은 글자 링크를 격자 아래 버튼으로 내렸다.
* 15px 텍스트 링크는 손가락으로 누르기 어렵고, 제목을 가운데로 보내면
* 머리줄에서 그 링크만 오른쪽에 남아 축이 어긋난다.
*
* ★ 여기가 00 계약 N3b 의 「본문 동선」이다 (PUBLIC-SHELL-CATALOG-NAV-REMOVAL-001).
* 메뉴에서 전체 제품을 지우는 대신 본문에 남기기로 한 그 길이며,
* _categories.php 에서 이 자리로 옮겨 왔다. 없애면 전체 상품으로 갈 길이 사라진다.
*/
.pub-root .hm-secfoot{display:flex;justify-content:center;margin-top:var(--s12);}
.pub-root .hm-morebtn{display:inline-flex;align-items:center;justify-content:center;
gap:var(--s3);min-height:56px;padding:0 var(--s8);
border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--pub-line-2);
font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--pub-ink);
transition:box-shadow .15s ease,background .15s ease;}
.pub-root .hm-morebtn:hover{text-decoration:none;background:var(--pub-bg-2);
box-shadow:inset 0 0 0 1px var(--pub-ink-3);}
.pub-root .hm-morebtn__ico{display:block;flex:0 0 auto;}
/* 좁은 화면에서는 가로로 채운다. 390px 에서 가운데 작은 알약은 누르기 애매하다. */
@media (max-width:539px){
.pub-root .hm-secfoot{margin-top:var(--s8);}
.pub-root .hm-morebtn{width:100%;min-height:52px;padding:0 var(--s5);}
}
/* 더보기는 링크지만 단독 터치 대상이다.
인라인 높이(25px)로 두면 손가락으로 누르기 어렵다.
시각 크기는 그대로 두고 세로 여백으로 44px 를 확보한다. */
.pub-root .hm-more{flex:0 0 auto;display:inline-flex;align-items:center;
min-height:44px;
font-size:var(--fs-label);color:var(--pub-ink-3);white-space:nowrap;}
.pub-root .hm-more:hover{color:var(--pub-ink);}
/* ── 카테고리 퀵메뉴 (HOME-CATEGORY-QUICKMENU-001) ──────────
*
* 글자 pill 을 원형 배지 + 제품 사진으로 바꿨다.
* 제목(「무엇을 찾으시나요」)과 「전체 제품 →」 링크는 없앴다.
* 제목은 아이콘 다섯 개만으로도 무엇인지 읽히고,
* 전체 상품 동선은 「추천 제품 더보기」 알약으로 내려갔다
* (00 계약 N3b · PUBLIC-SHELL-CATALOG-NAV-REMOVAL-001 본문 동선 이전).
*
* 가운데 정렬이다. 다섯 개가 넓은 화면에서 왼쪽에 몰려 있으면
* 그 아래 가운데 정렬된 섹션 제목들과 축이 어긋난다.
*
* 배경색은 카테고리 code 로 붙인다. 순서(nth-child)로 붙이면
* 카테고리를 하나 추가·재정렬할 때 기존 카테고리의 색이 따라 바뀐다.
* code 가 없는 새 카테고리는 아래 기본 회색으로 뜬다.
*/
/*
* 좁은 화면은 5열 격자다. 고정 폭 + 줄바꿈으로 두면 390px 에서 넘친다
* (92px × 5 + 간격 = 460px 이상). 칸을 나눠 쓰면 몇 개든 한 줄에 들어간다.
* 넓은 화면에서만 가운데 정렬 flex 로 바꾼다 — 격자로 두면 넓은 화면에서
* 칸 하나가 200px 를 넘어 아이콘 사이가 텅 빈다.
*/
.pub-root .hm-qm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:var(--s1);margin:0;padding:0;list-style:none;}
.pub-root .hm-qm__link{display:flex;flex-direction:column;align-items:center;
gap:var(--s2);width:auto;}
.pub-root .hm-qm__link:hover{text-decoration:none;}
.pub-root .hm-qm__badge{display:flex;align-items:center;justify-content:center;
width:64px;height:64px;border-radius:var(--r-pill);background:var(--pub-bg-3);
transition:transform .15s ease;}
.pub-root .hm-qm__link:hover .hm-qm__badge{transform:translateY(-2px);}
.pub-root .hm-qm__img{display:block;width:46px;height:46px;object-fit:contain;}
/*
* 라벨은 --fs-label(15px) 이다. --fs-caption(13px) 을 쓰지 않는다.
* 13px 는 토큰 파일에 「최소」라고 적힌 값이고, 00 이 「작은 폰트 남용」으로 지목한 자리다.
* 최소치는 단위·법적 고지처럼 안 읽어도 되는 것에만 쓴다 —
* 카테고리 이름은 이 구역의 주된 탐색 수단이라 거기 들어가면 안 된다.
*/
.pub-root .hm-qm__name{font-size:var(--fs-label);font-weight:var(--fw-m);
color:var(--pub-ink-2);text-align:center;line-height:var(--lh-tight);word-break:keep-all;}
/* 카테고리별 배경색. 운영 루트 5개 기준이며, 없는 code 는 기본 회색이다. */
.pub-root .hm-qm__badge[data-cat="water_purifier"]{background:#E4EFFF;}
.pub-root .hm-qm__badge[data-cat="air_purifier"]{background:#E1F2F2;}
.pub-root .hm-qm__badge[data-cat="bidet"]{background:#EAE7FB;}
.pub-root .hm-qm__badge[data-cat="bed"]{background:#FDF2DA;}
.pub-root .hm-qm__badge[data-cat="mc"]{background:#FAE9EE;}
/*
* 아주 좁은 화면은 3열 2줄이다.
* 320px 에서 5열이면 한 칸이 54px 라 「공기청정기」가 칸을 19px 넘고
* 옆 라벨과 간격이 0 이 되어 서로 붙는다 (실측).
* 라벨을 13px 로 줄여 맞추지 않는다 — 13px 는 토큰 파일의 「최소」이고
* 카테고리 이름은 이 구역의 주된 탐색 수단이다. 줄을 늘리고 글자를 지킨다.
*/
@media (max-width:359px){
.pub-root .hm-qm{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
}
@media (min-width:768px){
.pub-root .hm-qm{display:flex;flex-wrap:wrap;justify-content:center;
align-items:flex-start;gap:28px;}
.pub-root .hm-qm__link{width:96px;gap:var(--s3);}
.pub-root .hm-qm__badge{width:96px;height:96px;}
.pub-root .hm-qm__img{width:68px;height:68px;}
.pub-root .hm-qm__name{line-height:var(--lh-snug);}
}
/*
* 넓은 화면 — 사용자 지정 (배지 140px · 간격 60px).
*
* 768px 부터 바로 140 으로 가지 않는다. 5×140 + 4×60 = 940px 이라
* 768 구간(쓸 수 있는 폭 약 720px)에서는 넘친다. 한 단계를 두고 1024 부터 올린다.
*
* 항목 폭도 140 으로 맞춘다. 좁을 때 두 줄로 꺾이던 「매트리스 / 프레임」이
* 여기서는 한 줄에 들어간다.
*/
@media (min-width:1024px){
.pub-root .hm-qm{gap:60px;}
.pub-root .hm-qm__link{width:140px;gap:var(--s4);}
.pub-root .hm-qm__badge{width:140px;height:140px;}
.pub-root .hm-qm__img{width:96px;height:96px;}
}
/* ── 이번 달 렌탈 혜택 ───────────────────────────────────
* 왼쪽 선택 제품 정보 + 오른쪽 이미지 릴레이.
*
* 릴레이는 스크롤 컨테이너를 쓰지 않는다.
* 트랙 하나를 transform 으로 민다.
* 스크롤 위치와 DOM 순서 두 좌표계를 오가면 재배치 순간 화면이 튄다.
* transform 은 좌표가 하나뿐이라 동기화 지점이 없다.
*/
.pub-root .hm-feat{position:relative;}
@media (min-width:1024px){
/*
* 패널 폭을 300 → 340px 로 넓힌다.
* 제목·부제·제품명·가격 2줄·버튼 2개가 들어가는데 300px 는 빠듯했다.
* 릴레이가 828px 인데 패널이 300px 면 한쪽으로 치우쳐 보인다.
*
* align-items:start 를 쓰지 않는다.
* 패널 291px, 릴레이 450px 라 패널 아래가 통째로 비었다.
* center 로 두면 두 덩어리의 시각 중심이 맞는다.
*/
/*
* 좌측 열에 제목 + 패널, 우측 열에 릴레이.
* 제목이 flex 자식이라 모바일에서 order 로 맨 위에 남는데,
* PC 에서는 grid 로 패널과 같은 열에 붙여야 좌측 상단이 비지 않는다.
*
* 릴레이는 두 행에 걸쳐 세로 중앙에 온다.
* 패널(291px)과 릴레이(450px)의 높이 차를 중앙 정렬로 흡수한다.
*/
.pub-root .hm-feat{display:grid;
grid-template-columns:340px minmax(0,1fr);
grid-template-rows:auto auto;
gap:0 var(--s10);align-items:center;}
.pub-root .hm-feat__head{grid-column:1;grid-row:1;
align-self:end;margin-bottom:var(--s5);}
.pub-root .hm-feat__panel{grid-column:1;grid-row:2;align-self:start;}
.pub-root .hm-feat__reelwrap{grid-column:2;grid-row:1 / span 2;min-width:0;}
}
@media (min-width:1280px){
.pub-root .hm-feat{grid-template-columns:380px minmax(0,1fr);}
}
.pub-root .hm-feat__panel{display:flex;flex-direction:column;gap:var(--s3);
min-width:0;margin-bottom:var(--s5);}
@media (min-width:1024px){ .pub-root .hm-feat__panel{margin-bottom:0;} }
.pub-root .hm-feat__sub{font-size:var(--fs-label);color:var(--pub-ink-3);word-break:keep-all;}
/* 제목이 패널 밖으로 나가면서 이 구분선은 쓰이지 않는다.
마크업에서 제거했으므로 규칙도 남기지 않는다. */
.pub-root .hm-feat__brand{font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .hm-feat__name{font-size:var(--fs-subtitle);font-weight:var(--fw-sb);
color:var(--pub-ink);line-height:var(--lh-snug);word-break:keep-all;}
.pub-root .hm-feat__name a{color:inherit;}
.pub-root .hm-feat__act{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1);}
.pub-root .hm-feat__act .btn{min-height:var(--h-md);}
/* 모바일은 이미지를 먼저 보고 가격을 읽는 흐름이 자연스럽다.
패널을 릴레이 아래로 내린다. */
@media (max-width:1023px){
.pub-root .hm-feat{display:flex;flex-direction:column;}
.pub-root .hm-feat__panel{order:2;margin-top:var(--s5);padding-top:var(--s5);
border-top:1px solid var(--pub-line);}
}
/* 뷰포트는 넘치는 부분을 감추고 트랙이 그 안에서 움직인다.
가장자리는 mask 로 흐린다. 카드가 칼로 자른 듯 끊기면 잘린 것처럼 보인다. */
.pub-root .hm-feat__viewport{overflow:hidden;
margin:0 calc(var(--s4) * -1);padding:var(--s5) var(--s4);
--fade-l:0px; --fade-r:24px;
-webkit-mask:linear-gradient(to right,
transparent 0, #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent 100%);
mask:linear-gradient(to right,
transparent 0, #000 var(--fade-l),
#000 calc(100% - var(--fade-r)), transparent 100%);}
.pub-root .hm-feat__reel{display:flex;align-items:center;gap:var(--s4);
margin:0;padding:0;list-style:none;
transition:transform .52s cubic-bezier(.33,.9,.28,1);will-change:transform;
cursor:grab;}
.pub-root .hm-feat__reel[data-drag]{cursor:grabbing;transition:none;}
.pub-root .hm-feat__reel[data-drag] *{pointer-events:none;}
/* 카드 폭은 정수 px 로 고정한다.
% 로 두면 254.7px 같은 소수가 나오고 이미지·그림자 가장자리가 흐려진다.
선택 시 16px 만 넓힌다. scale() 을 쓰지 않는다. */
.pub-root .hm-feat__reel > li{flex:0 0 240px;}
.pub-root .hm-feat__reel > li.is-on{flex-basis:256px;}
@media (min-width:768px){
.pub-root .hm-feat__reel > li{flex:0 0 264px;}
.pub-root .hm-feat__reel > li.is-on{flex-basis:280px;}
}
.pub-root .hm-feat__item{display:block;width:100%;padding:0;border:0;background:none;
cursor:pointer;text-align:left;}
.pub-root .hm-feat__media{position:relative;display:grid;place-items:center;
aspect-ratio:4/5;border-radius:var(--r2);overflow:hidden;
background:var(--pub-bg-3);
/* 테두리를 border 로 그리지 않는다. border 1px 이 양쪽에서 2px 를 먹어
4:5 세로가 소수 픽셀이 된다. inset 은 박스 크기를 바꾸지 않는다. */
box-shadow:inset 0 0 0 1px var(--pub-line);
transition:box-shadow .42s ease;}
.pub-root .hm-feat__media img{width:100%;height:100%;object-fit:cover;}
.pub-root .hm-feat__noimg{font-size:var(--fs-caption);color:var(--pub-ink-4);}
/* 선택 표시는 확대 + 그림자다. 검은 테두리를 두르지 않는다.
포토샵 각도 135도 · 거리 10px · 스프레드 0 · 크기 10px 환산값. */
.pub-root .hm-feat__item[aria-current="true"] .hm-feat__media{
box-shadow:7px 7px 10px 0 rgba(30,23,35,.30);}
.pub-root .hm-feat__cap{display:block;margin-top:var(--s3);
font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-root .hm-feat__item[aria-current="true"] .hm-feat__cap{
color:var(--pub-ink);font-weight:var(--fw-sb);}
/* 혜택 줄은 항상 자리를 차지한다.
없는 카드만 짧아지면 align-items:center 가 그 카드를 아래로 내려 윗선이 어긋난다. */
.pub-root .hm-feat__bnf{display:block;margin-top:2px;min-height:1.55em;
font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-benefit-ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 화살표 — 트랙 방식은 화면 밖 카드를 클릭할 수 없다.
이것이 없으면 뒤쪽 제품은 진행바로만 도달하게 된다.
좁은 화면에서는 카드를 가리므로 숨긴다. 스와이프가 정본이다. */
/* 시각 40px, 터치 44px. 카드 위에 얹히므로 시각 크기는 작게 둔다. */
.pub-root .hm-feat__arw{position:absolute;top:38%;z-index:2;
width:40px;height:40px;margin-top:-20px;padding:0;
border:0;border-radius:var(--r-pill);
box-shadow:0 2px 10px rgba(30,23,35,.16),inset 0 0 0 1px var(--pub-line);
background:rgba(255,255,255,.94);cursor:pointer;
display:grid;place-items:center;transition:opacity .15s ease;}
.pub-root .hm-feat__arw::before{content:"";width:9px;height:9px;
border-top:2px solid var(--pub-ink-2);border-right:2px solid var(--pub-ink-2);}
.pub-root .hm-feat__arw--prev{left:calc(var(--s4) * -1);}
.pub-root .hm-feat__arw--prev::before{transform:rotate(-135deg);margin-left:3px;}
.pub-root .hm-feat__arw--next{right:calc(var(--s4) * -1);}
.pub-root .hm-feat__arw--next::before{transform:rotate(45deg);margin-right:3px;}
.pub-root .hm-feat__arw::after{content:"";position:absolute;
left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.pub-root .hm-feat__arw[disabled]{opacity:0;pointer-events:none;}
@media (max-width:767px){ .pub-root .hm-feat__arw{display:none;} }
/* 진행바 — 보기만 하는 표시가 아니라 잡아서 끌 수 있는 컨트롤이다.
터치 영역을 세로로 넓히되 선 자체는 얇게 보인다. */
.pub-root .hm-feat__bar{position:relative;height:24px;margin-top:var(--s1);
cursor:grab;touch-action:pan-y;}
.pub-root .hm-feat__bar[data-drag]{cursor:grabbing;}
.pub-root .hm-feat__bar::before{content:"";position:absolute;left:0;right:0;top:11px;
height:2px;background:var(--pub-line);border-radius:var(--r-pill);}
.pub-root .hm-feat__bar-fill{position:absolute;top:10px;height:4px;
background:var(--pub-accent);border-radius:var(--r-pill);
transition:left .2s ease,width .2s ease;}
/* ── 제휴카드 진입 배너 (HOME-CARDCTA-BANNER-001 · 2026-10-19) ──
* 금액을 쓰지 않는다. 카드사·실적구간마다 달라 특정 숫자가 과장이 된다.
*
* 띠 전체가 링크다. 안에 버튼을 따로 두지 않으므로 .btn 규칙이 없다.
*
* 바탕색을 --pub-accent-bg(연보라빛 파랑) 에서 그라데이션으로 바꿨다.
* accent 계열은 「가격과 행동」 축이다. 이 띠는 가격을 말하지 않는 **이동 장치**라
* HOME 의 흰 섹션 사이에서 이 구간만 색을 갖는다.
* --pub-ai-1~3 이 비슷한 민트·시안이지만 AI 상담 버튼 전용으로 선언된 토큰이라 빌리지 않는다.
*
* 정지점은 제작자가 준 띠 이미지에서 실측한 값이다.
* 원본 1216×200 의 좌단 #F3FFE9 · 우단 #C0FFF1 (가로 선형).
* 그림에서 카드만 떼어냈으므로 바탕은 CSS 가 이어 그린다. 이음매가 생기지 않도록
* 같은 두 끝을 쓰고 중간값만 보간해 넣었다.
*
* 색값을 토큰으로 올리지 않고 여기에 둔 이유
* 이 세 정지점은 이 띠 하나에만 쓴다. 토큰은 두 곳 이상이 공유할 때 만든다.
* 명암비 실측(2026-10-19): 제목·화살표 #171A23 → 16.79:1 · 15.57:1 (양 끝)
* 사용자 지정값이고 --pub-ink 와 같다. 화살표도 같은 색으로 맞췄다(2026-10-19 지시).
* 화살표는 비텍스트 그래픽이라 기준이 3:1 이지만 실제로는 제목과 같은 16.79 를 쓴다.
* 바탕을 어둡게 바꾸면 이 색을 뒤집어야 한다.
*/
.pub-root .hm-cardcta{position:relative;display:grid;align-items:center;
grid-template-columns:1fr;gap:var(--s6);
padding:var(--s10) var(--s6) var(--s8);border-radius:var(--r2);overflow:hidden;
background:linear-gradient(90deg,#F3FFE9 0%,#DCFCF2 52%,#C0FFF1 100%);}
.pub-root .hm-cardcta:hover{text-decoration:none;}
/*
* 제목. 크기·굵기·자간을 섹션 제목(.rm-section-title · h2) 과 같은 값으로 맞춘다
* (사용자 지시 2026-10-19). 네 값이 모두 같아야 「또 하나의 제목」 이 아니라
* 같은 급의 제목으로 읽힌다 — --fs-section-lg · --fw-b · --lh-tight · --tr-3.
* 굵기는 한때 --fw-eb(800) 였고 --fw-b(700) 로 내렸다.
*
* --fs-section(24) 이 아니라 --fs-section-lg(32) 를 쓴다.
* 섹션 제목과 같은 크기면 이 띠가 「또 하나의 섹션 제목」으로 읽혀
* 눌러야 할 것이라는 신호가 서지 않는다.
* 두 줄은 span 으로 끊는다. 화면 폭에 따라 끊길 자리를 브라우저에 맡기지 않는다.
*/
.pub-root .hm-cardcta__t{display:block;font-size:var(--fs-section-lg);
font-weight:var(--fw-b);line-height:var(--lh-tight);letter-spacing:var(--tr-3);
color:#171A23;word-break:keep-all;}
.pub-root .hm-cardcta__t span{display:block;}
/*
* 행동 표시. 화면에는 화살표 하나뿐이고 글자는 .sr-only 로 남아 있다.
* 글자가 없으므로 hover 밑줄이 보이지 않는다 — 화살표를 한 뼘 밀어 응답을 만든다.
* 모션 최소화 설정에서는 전역 규칙이 transition 을 꺼 즉시 이동한다.
*/
.pub-root .hm-cardcta__go{display:inline-flex;align-items:center;
margin-top:var(--s5);color:#171A23;}
.pub-root .hm-cardcta__arw{flex:0 0 auto;transition:transform .18s ease;}
.pub-root .hm-cardcta:hover .hm-cardcta__arw{transform:translateX(6px);}
/*
* 일러스트.
* 모바일(세로 쌓기)에서는 폭에 맞추고,
* 768 이상에서는 띠 높이를 꽉 채워 위아래로 흘러넘치게 둔다.
* 원본이 그렇게 잘려 있으므로 그때 원본과 같은 모습이 된다.
* 흘러넘친 부분은 .hm-cardcta 의 overflow:hidden 이 둥근 모서리로 잘라 준다.
*/
/*
* 1024 미만 — 글자 아래로 내려온다.
*
* mask 를 쓰지 않는다.
* 제작자가 준 컷아웃(437×370)은 **위쪽이 완전 투명**이다(실측 불투명도 0).
* 앞서 쓰던 1216×200 띠 이미지는 위아래가 잘려 있어 모서리에 붙이고
* 위쪽을 mask 로 흐려 끊어야 했다. 이제 그 장치가 전부 필요 없다.
* 좌·우·하단에 남은 값(77·53·21)은 카드가 아니라 번지는 그림자다.
* (public_final_bundle_test CC8i 가 파일의 네 변 알파를 직접 재서 이 전제를 고정한다)
*/
.pub-root .hm-cardcta__art{justify-self:end;width:min(100%,300px);}
.pub-root .hm-cardcta__art img{width:100%;height:auto;display:block;}
/*
* 1024 부터 좌우 배치.
*
* 그리드로 두 칸을 나누지 않고 그림을 오른쪽에 **띄워** 둔다.
* 그리드로 두면 그림의 자연 치수(1112×400)가 한 칸을 차지해
* 1024 에서 글자 칸이 211px 까지 눌린다(실측: 띠 높이 468px 로 붕괴).
* 그림을 흐름에서 빼고 글자 폭에만 상한을 주면 둘이 자리를 다투지 않는다.
*
* 높이는 확정값이다.
* height:100% 로 두면 백분율이 풀릴 기준이 없어 자연 치수로 되돌아간다(실측).
* min-height 는 백분율 기준이 되지 못한다.
* 18vw 로 함께 줄어들어 좁은 데스크톱에서 그림이 글자 쪽으로 넘어오지 않는다.
*
* 넘친 부분은 .hm-cardcta 의 overflow:hidden 이 둥근 모서리로 잘라 준다.
* 원본이 위아래로 잘려 있으므로 그때 원본과 같은 모습이 된다.
*/
@media (min-width:1024px){
/*
* 띠 높이를 제작자 원본(1216×200) 에 맞춘다 (사용자 지시 2026-10-19).
* 글자가 차지하는 높이는 32px 두 줄(80) + 간격 + 화살표 + 위아래 padding 64 이고
* 200 안에 들어간다(실측).
*/
.pub-root .hm-cardcta{display:block;padding:var(--s10) var(--s10) var(--s8);
min-height:200px;}
.pub-root .hm-cardcta__body{position:relative;z-index:1;display:block;max-width:52%;}
.pub-root .hm-cardcta__art{position:absolute;right:var(--s6);top:50%;
/*
* 그림을 띠보다 크게 두고 위아래를 **자른다** (사용자 지시).
* 원본 띠 이미지가 그랬듯 카드가 경계 밖으로 흘러넘치는 모습이 된다.
* .hm-cardcta 의 overflow:hidden 이 둥근 모서리로 잘라 준다.
* 잘리는 쪽은 카드 모서리와 그림자뿐이고 칩·번호·브랜드 마크는 가운데에 남는다.
*/
width:auto;height:clamp(240px,26vw,320px);margin:0;
/*
* -50% 가 아니라 -58% 다.
* -50 으로 가운데를 맞추면 아래 경계가 분홍 카드의 번호 줄을 **글자 중간에서** 자른다(실측).
* 8% 올리면 번호가 온전히 보이고 잘리는 자리가 빈 카드 면이 된다.
*/
transform:translateY(-58%);}
.pub-root .hm-cardcta__art img{width:auto;height:100%;max-width:none;}
}
/* ── 상담 CTA ───────────────────────────────────────────
* 하단 1회만. sticky 를 쓰지 않는다.
* 제품 상세의 sticky CTA 와 겹치면 화면 아래가 버튼으로 덮인다.
*/
.pub-root .hm-counsel{display:flex;flex-direction:column;align-items:center;
gap:var(--s2);padding:var(--s14) 0;text-align:center;
border-top:1px solid var(--pub-line);}
.pub-root .hm-counsel__t{font-size:var(--fs-title);font-weight:var(--fw-b);
color:var(--pub-ink);word-break:keep-all;}
.pub-root .hm-counsel__d{font-size:var(--fs-label);color:var(--pub-ink-3);
word-break:keep-all;}
.pub-root .hm-counsel__act{margin-top:var(--s3);}
/* ── 스크롤 등장 ────────────────────────────────────────
* 섹션이 뷰포트에 들어올 때 아래에서 살짝 올라온다.
* 이동 거리를 짧게(16px) 두고 한 번만 실행한다.
* 콘텐츠를 숨기지 않는다. JS 가 없거나 실패하면 그대로 보인다(JS 쪽에서 처리).
*/
.pub-root [data-reveal].is-ready{opacity:0;transform:translateY(16px);
transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
.pub-root [data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.pub-root [data-reveal].is-ready{opacity:1;transform:none;transition:none;}
.pub-root .hm-feat__reel{transition:none;}
}
/* ── 추천 제품 가로 레일 (모바일 전용) ────────────────────
* HOME 에서 8개를 2열 4행으로 쌓으면 모바일 화면을 길게 먹는다.
* <1024px 에서만 가로 스크롤로 바꾼다. PC 는 4열 격자를 그대로 둔다.
*
* 혜택 릴레이(.hm-feat)와 조작 방식을 일부러 다르게 한다.
* 혜택 transform 트랙 + 화살표 · 진행바 (고르는 컨트롤)
* 추천 네이티브 스크롤 + snap (밀어 훑는 목록)
* 같은 화면에서 같은 조작이 두 번 나오면 무엇이 다른지 알기 어렵다.
*
* 네이티브 스크롤을 쓰는 이유
* JS 가 필요 없다. 스크롤바 · 관성 · 접근성을 브라우저가 처리한다.
* 여기서는 "고르는" 것이 아니라 "훑는" 것이라 정교한 제어가 필요 없다.
*/
@media (max-width:1023px){
.pub-root .pd-grid--rail{
display:flex;
gap:var(--s3);
/* 컨테이너 여백을 뚫고 화면 끝까지 흐르게 한다.
가운데 정렬된 목록은 끝에서 잘려 "여기가 끝" 처럼 보인다. */
margin:0 calc(var(--gutter) * -1);
padding:0 var(--gutter) var(--s3);
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
/* 스크롤바는 감춘다. snap 과 카드 일부 노출로 더 있다는 것이 전달된다. */
scrollbar-width:none;
}
.pub-root .pd-grid--rail::-webkit-scrollbar{display:none;}
/*
* 카드 폭.
* 46%(168px)로 잡았더니 "제휴카드 할인가 · 월 29,900원"이 2줄로 접혔다.
* 가격은 한 줄로 읽혀야 한다. 최소 190px 를 준다.
* 오른쪽 카드가 살짝 보여 더 있다는 것이 전달되는 폭이다.
*/
.pub-root .pd-grid--rail > li{
flex:0 0 auto;
width:190px;
scroll-snap-align:start;
}
/*
* snap 이 첫 카드를 컨테이너 padding 만큼 밀어 왼쪽 여백을 먹는다.
* scroll-padding 으로 snap 기준선을 여백 안쪽으로 옮긴다.
*/
.pub-root .pd-grid--rail{scroll-padding-left:var(--gutter);}
}
@media (max-width:1023px) and (min-width:600px){
.pub-root .pd-grid--rail > li{width:220px;}
}
/* ── HERO 배너 1건 (PATCH-002 RC2) ───────────────────────
* 다중 배너는 JS 가 transform 으로 중앙 정렬한다.
* 1건은 JS 가 관여하지 않아 카드가 track 시작점에 붙는다.
*
* single 상태에만 justify-content 를 건다.
* .hm-hero__track 전역에 걸면 2건 이상에서
* slide.offsetLeft · root.clientWidth 가 달라져 transform 계산이 틀어진다.
*/
.pub-root .hm-hero--single .hm-hero__track{justify-content:center;}
/* 1건이면 좌우로 넘길 것이 없다. 화살표·인디케이터는 서버가 이미 렌더하지 않는다. */
/* 움직임을 줄이도록 설정한 사용자에게는 크기 전환을 없앤다.
크기 차이 자체는 남긴다. 어느 것이 활성인지는 알아야 한다. */
@media (prefers-reduced-motion: reduce){
.pub-root .hm-hero__slide{transition:opacity .01s linear;}
}
/* ══ 이번 달 렌탈 혜택 — 브랜드 카드 (HOME-MONTHLY-RENTAL-BENEFIT-REDESIGN-001) ══
*
* 같은 크기 카드를 여러 장 나란히 둔다. 한 장을 크게 키우지 않는다.
* >=1280 3장 · 768~1279 2장 · <=767 1장 (옆 카드가 살짝 보인다)
*
* 카드 폭은 slide 하나에 준다. 트랙은 transform 으로만 움직인다.
* JS 가 없으면 가로 스크롤로 볼 수 있다(overflow-x:auto). 그때도 내용은 다 읽힌다.
*/
.pub-root .hmb{margin-top:var(--s14);}
.pub-root .hmb__head{display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--s4);margin-bottom:var(--s5);}
.pub-root .hmb__title{font-size:var(--fs-section);font-weight:var(--fw-eb);
letter-spacing:var(--tr-3);margin:0;}
.pub-root .hmb__sub{margin:6px 0 0;font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .hmb__arrows{display:flex;gap:var(--s2);flex:0 0 auto;}
.pub-root .hmb__arw{width:40px;height:40px;border-radius:var(--r-pill);
border:1px solid var(--pub-line-2);background:var(--pub-bg);color:var(--pub-ink-2);
display:grid;place-items:center;cursor:pointer;padding:0;}
.pub-root .hmb__arw:hover{background:var(--pub-bg-2);}
.pub-root .hmb__arw[disabled]{opacity:.35;cursor:default;}
.pub-root .hmb__arw[hidden]{display:none;}
.pub-root .hmb__ico{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;}
.pub-root .hmb__ico--prev{transform:rotate(-135deg);margin-left:3px;}
.pub-root .hmb__ico--next{transform:rotate(45deg);margin-right:3px;}
/* JS 가 준비되면 가로 스크롤을 끄고 transform 으로 움직인다. */
.pub-root .hmb__vp{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding-block:2px;}
.pub-root .hmb__vp::-webkit-scrollbar{display:none;}
.pub-root [data-hmb-ready] .hmb__vp{overflow:hidden;}
.pub-root .hmb__track{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0;
align-items:stretch;}
.pub-root [data-hmb-ready] .hmb__track{transition:transform 460ms cubic-bezier(.22,.61,.36,1);
touch-action:pan-y;will-change:transform;}
.pub-root [data-hmb-ready] .hmb__track[data-drag]{transition:none;}
.pub-root .hmb__slide{flex:0 0 calc((100% - var(--s4)) / 2);min-width:0;display:flex;}
@media (min-width:768px){
.pub-root .hmb__slide{flex-basis:calc((100% - var(--s4)) / 2);}
}
@media (min-width:1280px){
.pub-root .hmb__slide{flex-basis:calc((100% - var(--s4) * 2) / 3);}
}
@media (max-width:767px){
/* 옆 카드가 살짝 보이게 한다. 다음 장이 있다는 신호다. */
.pub-root .hmb__slide{flex-basis:86%;}
.pub-root .hmb__arrows{display:none;}
}
/* ── 카드 ─────────────────────────────────────────────── */
.pub-root .hmb-card{width:100%;display:flex;flex-direction:column;
background:var(--pub-bg);border:1px solid var(--pub-line);border-radius:var(--r2);
overflow:hidden;}
.pub-root .hmb-card__banner{position:relative;display:grid;place-items:center;
aspect-ratio:16/7;background:var(--pub-bg-3);text-decoration:none;padding:var(--s4);}
.pub-root .hmb-card__banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pub-root .hmb-card__logo{position:relative;z-index:1;font-size:var(--fs-label);
font-weight:var(--fw-eb);letter-spacing:var(--tr-3);color:var(--pub-ink);
word-break:keep-all;text-align:center;}
/* 배너 사진이 있으면 그 위에 글자를 겹치지 않는다. 사진이 브랜드를 이미 보여 준다. */
.pub-root .hmb-card__banner:has(img) .hmb-card__logo{display:none;}
/* 브랜드 이름 — 배너 아래에 걸친다 */
.pub-root .hmb-card__name{position:relative;z-index:2;margin:-21px var(--s4) 0;
min-height:42px;display:flex;align-items:center;justify-content:center;
background:var(--pub-bg);border:1px solid var(--pub-line);border-radius:var(--r-pill);
padding:9px var(--s4);text-decoration:none;color:var(--pub-ink);}
.pub-root .hmb-card__name span{font-size:var(--fs-label);font-weight:var(--fw-b);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-root .hmb-card__name:hover span{text-decoration:underline;text-underline-offset:3px;}
/* ── 제품 줄 ──────────────────────────────────────────── */
.pub-root .hmb-card__rows{list-style:none;margin:0;padding:var(--s4);display:grid;gap:var(--s2);
align-content:start;}
/*
* 크기는 카탈로그 · 목록 카드와 같은 체계를 쓴다 (사용자 결정 2026-09-17).
* 제품명 --fs-body (카드의 .card__name 과 같다)
* 금액 --fs-price (카드의 .price__num 과 같다)
* 라벨 --fs-caption (카드의 .pline dt 와 같다)
* 제휴카드가 --fs-price-sub (카드의 .price--sub 와 같다)
* 화면마다 크기 체계가 다르면 같은 제품이 다른 급으로 보인다.
*
* 썸네일 96px — 금액이 21px 로 커져 줄 높이가 늘었다. 그 높이에 맞춘 크기다.
* 좁은 화면에서는 80px 로 줄인다. 그래야 금액이 한 줄에 들어간다(아래 media).
*/
.pub-root .hmb-row{display:grid;grid-template-columns:96px minmax(0,1fr) 14px;gap:var(--s3);
align-items:center;padding:var(--s2);border-radius:var(--r1);
text-decoration:none;color:inherit;transition:background 160ms ease;}
.pub-root .hmb-row:hover{background:var(--pub-bg-2);}
.pub-root .hmb-row__thumb{width:96px;height:96px;border-radius:var(--r1);overflow:hidden;
background:var(--pub-bg-3);box-shadow:inset 0 0 0 1px var(--pub-line);}
/*
* 좁은 화면에서는 썸네일을 80px 로 줄인다. 21px 금액이 한 줄에 들어가야 한다.
*
* 이 블록은 반드시 위의 96px 선언 «뒤» 에 있어야 한다.
* 선택자 우선순위가 같아서, 앞에 두면 뒤의 96px 이 이겨 모바일에서 적용되지 않는다.
* (RC57 에서 실제로 그랬다. 순서로만 결정되므로 !important 는 쓰지 않는다.)
*/
@media (max-width:767px){
.pub-root .hmb-row{grid-template-columns:80px minmax(0,1fr) 14px;}
.pub-root .hmb-row__thumb{width:80px;height:80px;}
}
.pub-root .hmb-row__thumb img{width:100%;height:100%;object-fit:cover;}
.pub-root .hmb-row__ph{display:block;width:100%;height:100%;}
.pub-root .hmb-row__body{min-width:0;}
.pub-root .hmb-row__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;font-size:var(--fs-body);font-weight:var(--fw-m);line-height:1.3;
margin-bottom:5px;word-break:keep-all;overflow-wrap:anywhere;}
.pub-root .hmb-row__price{display:block;font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .hmb-row__price b{font-size:var(--fs-price);font-weight:var(--fw-b);
color:var(--pub-ink);letter-spacing:var(--tr-3);white-space:nowrap;}
.pub-root .hmb-row__price--muted{color:var(--pub-ink-3);}
.pub-root .hmb-row__card{display:block;margin-top:1px;font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .hmb-row__card b{font-size:var(--fs-price-sub);font-weight:var(--fw-b);
color:var(--pub-accent);white-space:nowrap;}
.pub-root .hmb-row__bnf{display:inline-block;margin-top:5px;max-width:100%;
font-size:11px;font-weight:var(--fw-b);color:var(--pub-benefit-grad-ink);
background:var(--pub-benefit-grad);border:1px solid var(--pub-benefit-grad-line);
border-radius:var(--r-pill);padding:2px 8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-root .hmb-row__go,
.pub-root .hmb-card__go{width:7px;height:7px;border-top:2px solid var(--pub-ink-4);
border-right:2px solid var(--pub-ink-4);transform:rotate(45deg);}
.pub-root .hmb-row:hover .hmb-row__go{border-color:var(--pub-ink-2);}
.pub-root .hmb-card__more{margin-top:auto;padding:0 var(--s4) var(--s4);
display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
text-decoration:none;color:var(--pub-ink-2);font-size:var(--fs-label);font-weight:var(--fw-sb);}
.pub-root .hmb-card__more:hover{color:var(--pub-ink);}
/* ── 진행 표시 ────────────────────────────────────────── */
.pub-root .hmb__foot{display:flex;align-items:center;justify-content:center;margin-top:var(--s5);}
.pub-root .hmb__foot[hidden]{display:none;}
.pub-root .hmb__dots{display:flex;gap:6px;}
.pub-root .hmb__dot{width:8px;height:8px;border:0;padding:0;border-radius:var(--r-pill);
background:var(--pub-line-2);cursor:pointer;transition:width 220ms ease,background 220ms ease;}
.pub-root .hmb__dot[aria-current="true"]{width:22px;background:var(--pub-ink);}
/* 모바일에서는 손가락이 닿을 만큼 키운다. 보이는 점은 그대로 둔다. */
@media (max-width:767px){
.pub-root .hmb__dot{position:relative;}
.pub-root .hmb__dot::after{content:"";position:absolute;inset:-12px -6px;}
}
@media (prefers-reduced-motion: reduce){
.pub-root .hmb__track,
.pub-root .hmb-row,
.pub-root .hmb__dot{transition:none !important;}
}
/* ════════════════════════════════════════════════════════════════════
* HOME V6 — 섹션 머리 · 컨테이너 · 브랜드 카드 캐러셀
* 정본: RENTAL-MARKET-HOME-V6-FULL.css (sha256 0d2afedc7095c690…) — 값은 그대로 옮겼다.
*
* ★ 캐러셀 엔진(public-home.js)은 그대로다. 엔진은 트랙을 transform 으로 민다.
* 정본의 .hmb-rail(overflow-x 스크롤 · snap) 을 트랙에 붙이면 두 방식이 충돌한다.
* 그래서 정본 클래스 대신 엔진 hook 클래스에 «같은 값» 을 준다.
* 정본 .hmb-rail → .hmb__track (gap 20/12 · 정렬) + 여백 -4/4 는 .hmb__vp
* 정본 .hmb-slide → .hmb__slide (3 / 2 / 1+다음 카드 일부)
* 정본 .hmb-arrow → .hmb__arw (44px 원형)
* 정본 .hmb-dots → .hmb__foot · .hmb__dots
* 정본 .hmb-dot → .hmb__dot (JS 가 만든다 · 36px 터치 영역 · 8px 점 · 현재 20px)
* 엔진은 track 의 column-gap 을 읽어 한 칸 폭을 잰다. gap 을 track 에 두는 이유다.
*
* 정본에 없는 줄은 LEGACY 표시 3곳 · 배너 fallback 겹침 1곳 · V6 보완 1(좁은 폭 가격 줄바꿈) 뿐이다.
* ════════════════════════════════════════════════════════════════════ */
/* HOME-V6-SECTION-ALIGN-001 (D-HOME-V6-SECTION-ALIGN-01 · A) — 기존 PUBLIC .container 와 같은 계산.
정본 FULL.css 는 width:min(1280px,calc(100% - 32px)) (본문 1280) 이었으나 기존 섹션 본문(1216 · gutter 16/24/32)과
시작선이 어긋났다 (1440 에서 좌우 32px · 1280 16px · 768 8px). 사이트 기준에 맞춘다. */
.rm-home-v6 .rm-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.rm-home-v6 .rm-section + .rm-section{margin-top:var(--s18);}
.rm-home-v6 .rm-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--s8);}
.rm-home-v6 .rm-section-title{margin:0;font-size:var(--fs-section-lg);font-weight:var(--fw-b);
line-height:var(--lh-tight);letter-spacing:var(--tr-3);}
.rm-home-v6 .rm-section-more{font-size:15px;white-space:nowrap;}
/*
* 가운데 제목 (HOME-SECTION-HEAD-CENTER-001).
*
* 「이번 달 렌탈 혜택」 머리줄에는 캐러셀 화살표가 같이 있다.
* 그냥 justify-content:center 로 두면 제목이 화살표 폭만큼 왼쪽으로 밀려
* 다른 섹션 제목과 축이 어긋난다.
* 화살표를 흐름에서 빼 오른쪽에 띄워야 제목이 진짜 가운데에 선다.
* 캐러셀 JS(public-home.js)가 찾는 hook 은 건드리지 않는다. 위치만 CSS 로 옮긴다.
*/
.rm-home-v6 .rm-section-head--center{position:relative;justify-content:center;
text-align:center;margin-bottom:var(--s12);}
.rm-home-v6 .rm-section-head--center .hmb-controls{position:absolute;top:50%;right:0;
transform:translateY(-50%);}
.rm-home-v6 .hmb__vp{margin:-4px;padding:4px;}
.rm-home-v6 .hmb__track{display:flex;align-items:stretch;gap:20px;list-style:none;margin:0;padding:0;}
.rm-home-v6 .hmb__slide{display:flex;flex:0 0 calc((100% - 40px)/3);min-width:0;}
.rm-home-v6 .hmb-card{width:100%;background:var(--pub-bg);border:0;border-radius:14px;box-shadow:var(--sh);overflow:hidden;}
.rm-home-v6 .hmb-header{position:relative;min-width:0;}
.rm-home-v6 .hmb-card__banner{position:relative;display:block;aspect-ratio:1200/420;overflow:hidden;background:#EFF1F5;padding:0;}
.rm-home-v6 .hmb-card__banner img{display:block;width:100%;height:100%;object-fit:cover;}
/* 배너 fallback 겹침 — fallback 글자를 항상 깔고 이미지를 위에 덮는다.
이미지(alt="")가 실패하면 투명해져 브랜드명이 보인다. 이미지가 뜨면 가려진다. */
.rm-home-v6 .hmb-card__banner img{position:absolute;inset:0;z-index:1;}
.rm-home-v6 .hmb-card__fallback{display:flex;height:100%;min-height:96px;align-items:center;justify-content:center;
font-size:24px;font-weight:700;}
.rm-home-v6 .hmb-card__name{position:relative;display:block;min-height:44px;margin:-22px 20px 0;padding:12px 16px;
background:var(--pub-bg);border:0;border-radius:999px;box-shadow:0 4px 12px rgba(30,23,35,.08);z-index:1;
text-align:center;font-size:15px;line-height:20px;font-weight:500;}
.rm-home-v6 .hmb-product-list{display:grid;gap:20px;margin:0;padding:20px 20px 24px;list-style:none;min-width:0;}
.rm-home-v6 .hmb-product-list > li{min-width:0;margin:0;padding:0;border:0;}
.rm-home-v6 .hmb-row{display:flex;align-items:center;gap:20px;min-width:0;margin:0;padding:0;border:0;}
.rm-home-v6 .hmb-row + .hmb-row{border:0;}
/* LEGACY 1 — .pub-root .hmb-row:hover(0,3,0) 의 배경을 푼다. 정본에는 행 hover 배경이 없다. */
.rm-home-v6 .hmb-row:hover{background:transparent;}
.rm-home-v6 .hmb-row__thumb{position:relative;display:block;flex:0 0 128px;width:128px;height:128px;overflow:hidden;border:0;
border-radius:8px;background:var(--pub-bg);box-shadow:none;}
.rm-home-v6 .hmb-row__thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--pub-line);
pointer-events:none;z-index:3;}
.rm-home-v6 .hmb-row__thumb > img{display:block;width:100%;height:100%;object-fit:contain;}
.rm-home-v6 .hmb-row__body{flex:1;min-width:0;}
.rm-home-v6 .hmb-row__identity{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;padding:0;border:0;}
.rm-home-v6 .hmb-row__brand{margin:0;font-size:13px;line-height:1.45;color:var(--pub-ink-2);font-weight:500;}
.rm-home-v6 .hmb-row__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:auto;
min-height:0;margin:0;padding:0;border:0;font-size:16px;font-weight:500;line-height:1.45;}
.rm-home-v6 .hmb-row__pricing{display:block;margin-top:8px;padding:0;border:0;}
.rm-home-v6 .hmb-row__prices{display:grid;gap:4px;margin:0;padding:0;border:0;}
.rm-home-v6 .hmb-row__price,
.rm-home-v6 .hmb-row__card{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;margin:0;padding:0;border:0;}
.rm-home-v6 .hmb-row__prices .price-amount{justify-content:flex-start;}
/* LEGACY 3 — .pub-root .hmb-row__price · __card 의 color(--pub-ink-3) · font-size(caption) 가 금액으로 상속되지 않게 한다.
정본은 이 요소에 색을 두지 않는다 → 행(잉크)에서 상속. */
.rm-home-v6 .hmb-row__price,
.rm-home-v6 .hmb-row__card{color:inherit;font-size:inherit;}
/* V6 보완 1 (RC68) — 브랜드 행 가격: 좁은 카드에서 금액이 행 밖으로 나가지 않게, 넘칠 때만 금액이 다음 줄(왼쪽 정렬)로 내려간다.
실측: 375px 1,234,567원 오른쪽 -12px · 360px -27px (RC66 옛 행은 라벨이 없어 들어갔다). 들어갈 때는 정본 그대로 한 줄. */
.rm-home-v6 .hmb-row__price,
.rm-home-v6 .hmb-row__card{flex-wrap:wrap;row-gap:0;}
.rm-home-v6 .hmb-row__benefit{display:table;margin:8px 0 0;padding:0 4px;font-size:13px;font-weight:400;color:#2743E0;background:#F1F3FF;}
.rm-home-v6 .hmb-controls{display:flex;align-items:center;gap:8px;}
.rm-home-v6 .hmb__arw{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--pub-line);border-radius:50%;
background:#FFFFFF;color:var(--pub-ink-2);}
.rm-home-v6 .hmb__arw:disabled{opacity:.45;cursor:default;}
.rm-home-v6 .hmb__foot{margin-top:8px;}
.rm-home-v6 .hmb__dots{display:flex;justify-content:center;gap:4px;}
.rm-home-v6 .hmb__dot{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:0;background:transparent;}
.rm-home-v6 .hmb__dot::before{content:"";width:8px;height:8px;border-radius:999px;background:#C6CAD6;}
/* LEGACY 2 — .pub-root .hmb__dot[aria-current](0,3,0) 의 22px · 진한 배경을 푼다. 표시는 ::before 가 한다. */
.rm-home-v6 .hmb__dot[aria-current="true"]{width:36px;background:transparent;}
.rm-home-v6 .hmb__dot[aria-current="true"]::before{width:20px;background:var(--pub-ink);}
.rm-home-v6 .hmb__dot[hidden]{display:none;}
@media (max-width:1279px){
.rm-home-v6 .hmb__slide{flex-basis:calc((100% - 20px)/2);}
.rm-home-v6 .hmb-product-list{padding:20px 16px 24px;}
.rm-home-v6 .hmb-row{gap:16px;}
.rm-home-v6 .hmb-row__thumb{flex-basis:96px;width:96px;height:96px;}
}
@media (max-width:767px){
.rm-home-v6 .rm-section + .rm-section{margin-top:var(--s12);}
.rm-home-v6 .rm-section-head{margin-bottom:var(--s6);}
/*
* 좁은 화면에서는 화살표를 제목 아래 줄로 내린다.
* 390px 에서 제목(26px)과 화살표(44px 두 개)를 한 줄에 두면
* 제목을 가운데에 세우는 순간 둘이 겹친다.
* 화살표를 감추면 넘기는 수단이 점만 남으므로 감추지 않는다.
*/
.rm-home-v6 .rm-section-head--center{flex-direction:column;align-items:center;
gap:8px;margin-bottom:var(--s8);}
.rm-home-v6 .rm-section-head--center .hmb-controls{position:static;transform:none;}
.rm-home-v6 .hmb__track{gap:12px;}
.rm-home-v6 .hmb__slide{flex-basis:calc(100% - 32px);}
.rm-home-v6 .hmb-card__name{margin-inline:16px;}
.rm-home-v6 .hmb-product-list{gap:24px;}
.rm-home-v6 .hmb-row{gap:12px;}
.rm-home-v6 .hmb-row__thumb{flex-basis:80px;width:80px;height:80px;}
}
@media (prefers-reduced-motion:reduce){
.rm-home-v6 .hmb-card{animation:none;transition:none;}
}