/* ===== v84 홈 대대적 개편 =====
   벤치마킹: 토스(한 화면 한 가지 · 굵은 제목과 옅은 보조글의 뚜렷한 위계 · 20px 좌우 여백 · 4px 단위 간격 · 둥근 모서리 · 그림자 없음)
           + 인스타그램(사진이 주인공 · 스토리 링 동그라미 · 얇은 1px 선 · 파란 '팔로우' 글자 버튼 · 피드 카드).
   대표님 규칙: 회색 바탕 · 회색 버튼 · 상자 바탕 없음 → 토스의 회색 바탕/회색 버튼 자리는 흰 바탕 + 얇은 선으로 바꿈.
   모든 크기는 휴대폰 보정값 var(--z)를 곱해 실제 화면에서 정확한 px가 되게 함. 홈(html.home-mode)에만 적용. */
html.home-mode{--h84-blue:#0095F6}

/* ── 1. 섹션 제목: 토스식 굵은 제목 + 옅은 한 줄 설명, '전체보기'는 회색 바탕 없이 글자만 ── */
html.home-mode #app .sec-head{align-items:flex-end;margin-bottom:calc(16px*var(--z,1))}
html.home-mode #app .sec-head h2,html.home-mode #app h2.benefits-title{font-size:calc(22px*var(--z,1))!important;font-weight:800!important;letter-spacing:-.02em!important;line-height:1.25!important;color:var(--ink)!important}
html.home-mode #app .sec-head p,html.home-mode #app .sec-head .hl-sub{margin-top:calc(4px*var(--z,1))!important;font-size:calc(14px*var(--z,1))!important;font-weight:500!important;letter-spacing:-.01em;color:var(--muted)!important;line-height:1.4!important}
html.home-mode #app .sec-head a.more,html.home-mode #app a.more{background:none!important;padding:0!important;border:0!important;border-radius:0!important;font-size:calc(13.5px*var(--z,1))!important;font-weight:600!important;color:var(--muted)!important;gap:calc(2px*var(--z,1));min-height:0;line-height:1.4}
html.home-mode #app a.more svg.i{width:calc(14px*var(--z,1));height:calc(14px*var(--z,1))}
html.home-mode #app .taste-edit{font-size:calc(13.5px*var(--z,1))!important;font-weight:600!important;color:var(--muted)!important;text-decoration:none!important;background:none!important}

/* ── 2. 상품 카드: 사진 둥근 모서리(토스 12px) · 분류는 옅게 · 이름 14px · 할인율 빨강 + 가격 굵게 ── */
html.home-mode #app .pc330 .c330-img{border-radius:calc(12px*var(--z,1))!important;overflow:hidden;isolation:isolate}
html.home-mode #app .pc330 .pc-body{padding-top:calc(10px*var(--z,1))!important}
html.home-mode #app .pc330 .pc-cat{color:var(--muted)!important;font-weight:500!important;font-size:calc(12px*var(--z,1))!important;margin-bottom:calc(2px*var(--z,1))!important}
html.home-mode #app .pc330 .pc-name{color:var(--ink)!important;font-size:calc(14px*var(--z,1))!important;font-weight:500!important;line-height:1.45!important;letter-spacing:-.015em}
html.home-mode #app .pc330 .c330-tags{left:calc(8px*var(--z,1));top:calc(8px*var(--z,1))}
html.home-mode #app .pc330 .c330-tags i{border-radius:calc(6px*var(--z,1));font-size:calc(10px*var(--z,1))!important;font-weight:700;letter-spacing:.02em;padding:calc(3px*var(--z,1)) calc(6px*var(--z,1))!important}

/* ── 3. 카테고리 동그라미: 인스타그램 스토리 링(NAEIP 보라 → 핑크 → 살구) + 흰 틈 ── */
html.home-mode #app .category-circle-art{padding:calc(2.5px*var(--z,1));background:linear-gradient(45deg,#f6a96b 0%,#e8558f 50%,#6a33b8 100%);clip-path:circle(50%)}
html.home-mode #app .category-circle-art img{border:calc(2.5px*var(--z,1)) solid var(--bg);box-sizing:border-box}
html.home-mode #app .category-circle>span:last-child{font-size:calc(12.5px*var(--z,1))!important;font-weight:600!important;letter-spacing:-.01em;color:var(--ink)}

/* ── 3-1. 카테고리 이야기(남성의류·실내복·여성의류): 사진·썸네일 둥글게, 분류는 옅게, '전체보기'는 둥근 얇은 선 버튼 ── */
html.home-mode #app .rd-story-photo{border-radius:calc(16px*var(--z,1));overflow:hidden}
html.home-mode #app .rd-row img{border-radius:calc(10px*var(--z,1))}
html.home-mode #app .rd-row-body>b{color:var(--muted)!important;font-weight:500!important;font-size:calc(12px*var(--z,1))!important}
html.home-mode #app .rd-story-more{min-height:calc(52px*var(--z,1));border-radius:calc(14px*var(--z,1))!important;border:1px solid var(--line)!important;background:transparent!important;font-size:calc(15px*var(--z,1))!important}
html.home-mode #app .cat-head h1{font-size:calc(22px*var(--z,1))!important;font-weight:800!important;letter-spacing:-.02em!important}

/* ── 4. 큰 배너: 토스처럼 더 둥글게 ── */
html.home-mode #app .hero .slide{border-radius:calc(20px*var(--z,1))}

/* ── 5. 버튼·탭: 회색 바탕 없이 흰 바탕 + 얇은 선, 고른 것만 진하게(한 화면 한 가지 강조) ── */
html.home-mode #app .trending-more.c330-more{min-height:calc(52px*var(--z,1))!important;border-radius:calc(14px*var(--z,1))!important;font-size:calc(15px*var(--z,1))!important;font-weight:600!important;border:1px solid var(--line)!important;background:transparent!important}
html.home-mode #app .pp-tab{height:calc(36px*var(--z,1))!important;border-radius:999px!important;border:1px solid var(--line)!important;background:var(--bg)!important;font-size:calc(13.5px*var(--z,1))!important;font-weight:600!important;color:var(--ink)!important}
html.home-mode #app .pp-tab small{color:var(--muted)!important}
html.home-mode #app .pp-tab[aria-selected="true"]{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important}
html.home-mode #app .pp-tab[aria-selected="true"] small{color:var(--bg)!important;opacity:.7}
html.home-mode #app .fchip{border-radius:999px!important}

/* ── 6. BRANDS · NAEIP PARTNERS (인스타그램 광고 카드를 흰 화면으로) ── */
.home-brands .bc84-list{display:flex;flex-direction:column;gap:calc(28px*var(--z,1))}
.bc84{background:var(--bg);color:var(--ink)}
.bc84-h{display:flex;align-items:center;gap:calc(10px*var(--z,1));padding:calc(10px*var(--z,1)) 0}
.bc84-av{flex:none;width:calc(38px*var(--z,1));height:calc(38px*var(--z,1));border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;padding:calc(6px*var(--z,1))}
.bc84-av.dark{background:#111;box-shadow:none}
.bc84-av img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bc84-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:calc(1px*var(--z,1))}
.bc84-id b{font-size:calc(14px*var(--z,1));font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc84-id span{font-size:calc(12.5px*var(--z,1));color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc84-follow{flex:none;border:0;background:none;padding:calc(6px*var(--z,1)) calc(4px*var(--z,1));font:inherit;font-size:calc(14px*var(--z,1));font-weight:700;color:var(--h84-blue,#0095F6);cursor:pointer}
.bc84-follow.on{color:var(--ink)}
.bc84-more{flex:none;border:0;background:none;width:calc(32px*var(--z,1));height:calc(32px*var(--z,1));display:grid;place-items:center;color:var(--ink);cursor:pointer;margin-right:calc(-6px*var(--z,1))}
.bc84-more svg{width:calc(20px*var(--z,1));height:calc(20px*var(--z,1));fill:currentColor}
.bc84-hero{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.bc84-hero img{width:100%;height:100%;object-fit:cover;display:block}
.bc84-row{display:flex;gap:calc(6px*var(--z,1));overflow-x:auto;scrollbar-width:none;padding:calc(10px*var(--z,1)) 0;scroll-snap-type:x proximity}
.bc84-row::-webkit-scrollbar{display:none}
.bc84-cut{flex:0 0 calc(84px*var(--z,1));aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:calc(6px*var(--z,1));overflow:hidden;scroll-snap-align:start}
.bc84-cut img{width:100%;height:100%;object-fit:cover;display:block}
.bc84-cta{display:flex;align-items:center;justify-content:space-between;padding:calc(13px*var(--z,1)) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:calc(14.5px*var(--z,1));font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.bc84-cta svg.i{width:calc(16px*var(--z,1));height:calc(16px*var(--z,1))}
.bc84-menu{display:flex;flex-direction:column;padding:calc(4px*var(--z,1)) calc(4px*var(--z,1)) calc(12px*var(--z,1))}
.bc84-menu b{font-size:calc(15px*var(--z,1));padding:calc(8px*var(--z,1)) 0 calc(12px*var(--z,1));border-bottom:1px solid var(--line)}
.bc84-menu a,.bc84-menu button{display:block;text-align:left;padding:calc(14px*var(--z,1)) 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:calc(15px*var(--z,1));font-weight:500;color:var(--ink);width:100%}
.bc84-menu button[data-bfollow]{color:var(--h84-blue,#0095F6);font-weight:700}
.bc84-menu button[data-bfollow][aria-pressed="true"]{color:var(--ink)}
/* 휴대폰: 인스타그램 피드처럼 사진을 화면 끝까지 */
@media (max-width:760px){
 .bc84-hero{margin:0 calc(var(--gutter,20px)*-1)}
 .bc84-row{margin:0 calc(var(--gutter,20px)*-1);padding-left:var(--gutter,20px);padding-right:var(--gutter,20px);scroll-padding-left:var(--gutter,20px)}
}
/* 넓은 화면: 카드 여러 개를 나란히 */
@media (min-width:761px){.home-brands .bc84-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px 24px}}

/* ── 7. 다크 모드에서 어두운 바탕 위 검은 글자로 안 보이던 곳(기존 문제) 바로잡기 ── */
html[data-theme=dark] .pc330 .price b,html[data-theme=dark] .rd-row .price b{color:var(--ink)!important}
html[data-theme=dark].home-mode #app .trending-more.c330-more,html[data-theme=dark].home-mode #app .rd-story-more,html[data-theme=dark].home-mode #app .rd-story-head h2,html[data-theme=dark].home-mode #app .pp-meta b{color:var(--ink)!important}
html[data-theme=dark].home-mode #app .rd-story-head p{color:var(--muted)!important}
html[data-theme=dark].home-mode #app .rd-row-name{color:var(--ink-2)!important}
html[data-theme=dark].home-mode #app .home-living{background:var(--bg)!important}