@charset "utf-8";

/* 홈 개편 새 구역 공용 스타일 (2026-10-27, honeyme-specs/2610-home-redesign/plan.md) — 색·크기 기준은 honeyme-specs/design/사이트_디자인_기준.md

   [지금 많이 찾는 OO용 토이] skin/index/rank-review.inc.php
   카드는 홈 다른 상품 줄(hm_render_category_scroll)과 같은 main.002 카드·같은 폭 — 회색 바탕 위 정사각형 사진 + 흰 가격 영역.
   다른 점은 사진 왼쪽 위 순위 배지(css/shop/default.css .hm-item-badge--rank)와 가격 아래 후기 한 줄. 색·크기 기준은 honeyme-specs/design/사이트_디자인_기준.md */

/* 화면 양끝까지 넘기기 (홈 다른 상품 줄과 같은 좌우 여백) */
.hm-hrank-bleed {
    margin-left: calc(-1 * var(--bs-gutter-x) * .5);
    margin-right: calc(-1 * var(--bs-gutter-x) * .5);
    overflow: hidden;
}

/* 처음 화면에서 첫 카드 왼쪽에 회색 바탕이 살짝 보이게(최근 업데이트된 제품 줄과 같은 여백).
   .swiper.○○로 쓴 이유: Swiper 기본 CSS의 .swiper { padding: 0 }이 같은 무게의 클래스 하나를 덮어써서 여백이 사라졌었음 */
.swiper.hm-hrank-swiper {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    overflow: visible;
}

.hm-hrank-swiper .swiper-slide {
    display: flex;
    width: 140px;
    height: auto; /* 같은 줄 카드 높이를 맞춤(후기 한 줄 유무와 상관없이) */
}

.hm-hrank-swiper .hm-grid-cell {
    display: flex;
    width: 100%;
}

.hm-hrank-swiper .inner-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0 !important;
}

.hm-hrank-swiper .discount-price {
    font-size: .75rem;
}

/* 가격 아래 후기 한 줄 — 카드 흰 영역 안, 가격 글자와 같은 좌우 여백(.5rem). 줄 모양(글자·테두리·평점)은 상품 목록 카드와 공용 css/shop/hm_item_review_line.css */
.hm-hrank-swiper .hm-hrank-review { /* 홈 랭킹 줄 안에서만 — 이 파일을 같이 불러오는 키워드 페이지의 상품 목록 카드(.hm-lc-review)엔 좌우 여백이 붙지 않게 */
    margin: 0 .5rem .6rem; /* 위 0 = 가격 바로 아래(간격은 아래 가격 줄 padding-bottom = --hm-rv-gap). 예전엔 auto로 카드 맨 아래에 붙여서, 다른 카드의 후기가 길면 가격과 후기 사이가 크게 벌어졌음(2026-11-03) */
}

/* 후기 한 줄이 있는 카드는 가격 줄 아래 여백(.main-002-price-wrap padding-bottom .6rem)을 공용 간격(--hm-rv-gap, hm_item_review_line.css)으로 — 후기 칸은 가격 바로 아래에 붙으니 이 값이 가격과 후기 사이 간격(상품 목록 카드와 같음) */
.hm-hrank-swiper .inner-wrap:has(.hm-hrank-review) .main-002-price-wrap {
    padding-bottom: var(--hm-rv-gap, 6px);
}

/* 홈 다른 상품 줄과 같은 작은 화면 폭 */
@media (max-width: 768px) {
    .hm-hrank-swiper .swiper-slide {
        width: 115px;
    }
}

/* [오늘의 심층리뷰] skin/index/today-review.inc.php — 회색 바탕 위 흰 카드 하나. 썸네일은 심층리뷰 목록 카드(.rv-card-img)와 같은 정사각형 —
   원래 비율(3:4)은 세로로 길어 PC에서 오른쪽 글 아래가 비었음(사용자 의견) */
.hm-today {
    padding: 16px 0; /* 다른 구역(pt-3 pb-3)과 같은 위아래 간격 */
}

.hm-today-date {
    margin: 2px 0 10px !important; /* default.css의 p { margin-bottom: 0 !important } */
    font-size: 12px;
    color: #666666;
}

.hm-today-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 0; /* 홈 카드는 모서리 없이(랭킹 카드 기준, 2026-10-29) */
    background: #ffffff;
    color: #1e1e1e;
    text-decoration: none;
}

.hm-today-card:hover {
    color: #1e1e1e;
}

.hm-today-top {
    display: flex;
    gap: 14px;
}

.hm-today-thumb {
    position: relative;
    flex: none;
    width: 38%;
    max-width: 180px;
    border-radius: 0;
    overflow: hidden;
    background: #f2f2f2;
}

/* 높이: 최소 정사각형, 오른쪽 글이 더 길면(좁은 모바일) 그 높이까지 늘어남(flex 기본 stretch) — 썸네일 아래가 비지 않게 */
.hm-today-thumb::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.hm-today-thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-today-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px; /* 썸네일 높이를 넘지 않게 촘촘히(사용자 의견) */
}

.hm-today-item {
    font-size: 12px;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-today-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 리뷰어는 제목 바로 아래 — 예전엔 썸네일 아래쪽에 붙여서(margin-top: auto) 제목 아래가 비어 보였음.
   남는 자리는 좋아요·아쉬워요(없으면 본문 첫 부분)가 채운다 */
.hm-today-who {
    font-size: 12px;
    color: #555555;
}

.hm-today-pc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 3px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

/* 라벨과 글을 글자 밑선으로 맞춤(글이 두 줄이어도 첫 줄에) — 공통 .hm-ir-tag의 margin-top 2px 때문에 글이 위로 떠 보였음 */
.hm-today-pc-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hm-today-pc .hm-ir-tag {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.4;
}

.hm-today-pc-txt {
    font-size: 12px;
    line-height: 1.45;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 점수 상자 — 왼쪽 큰 총 만족도, 오른쪽 세부 항목 2칸씩 */
.hm-today-score {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 0;
    background: #f5f5f5;
}

.hm-today-total {
    flex: none;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hm-today-total strong {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--hm-main);
}

.hm-today-total span {
    font-size: 11px;
    color: #555555;
}

.hm-today-items {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    font-size: 12px;
    color: #444444;
}

/* 항목 하나 = 이름·값 한 줄 + 아래 막대(글 보기 점수 상자 view.skin.php .hm-score-item과 같은 모양, 홈은 조금 얇게) */
.hm-today-si {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hm-today-si-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hm-today-si strong {
    color: #1e1e1e;
    white-space: nowrap;
}

.hm-today-si-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-today-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}

.hm-today-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to right, #f59b63, var(--hm-main));
}

/* 자극 강도 — 만족도가 아니라 세기라 막대 대신 5칸, 고른 단계 한 칸만 주황(글 보기 .hm-score-scale과 같게) */
.hm-today-level {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}

.hm-today-level i {
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}

.hm-today-level i.is-on {
    background: var(--hm-main);
}

.hm-today-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 화면에서만 세 줄 — HTML엔 첫 부분 전체 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 요약이 없는 글 — 오른쪽 제목 아래에 본문 첫 부분 */
.hm-today-excerpt.is-side {
    margin-top: 3px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    line-height: 1.5;
    -webkit-line-clamp: 4;
}

.hm-today-more {
    align-self: flex-end;
    font-size: 12px;
    color: #666666;
}

/* 모바일 — 썸네일을 좁히고 오른쪽 글을 한 줄씩(제목·좋아요·아쉬워요), 썸네일과 높이가 비슷하게 (사용자 의견).
   줄 수는 화면에서만 줄인 것 — HTML엔 전체 글자가 있어 SEO·GEO 영향 없음 */
@media (max-width: 768px) {
    .hm-today-thumb {
        width: 28%;
    }

    .hm-today-title {
        font-size: 15px;
        -webkit-line-clamp: 1;
    }

    .hm-today-pc-txt {
        -webkit-line-clamp: 1;
    }

    .hm-today-excerpt.is-side {
        -webkit-line-clamp: 2;
    }
}

/* [평이 좋은 제품의 후기] skin/index/honest-review.inc.php — 회색 바탕 위 흰 후기 카드 좌우 줄(첫 카드 앞 회색 여백은 랭킹 줄과 같게).
   순서는 사이트 공통(좋아요 → 아쉬워요), 아쉬운 점은 굵게 하지 않고 3줄까지(사용자 결정) */
.hm-honest-sub {
    margin: 2px 0 10px !important; /* default.css의 p { margin-bottom: 0 !important } */
    font-size: 12px;
    color: #666666;
}

.swiper.hm-honest-swiper {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    overflow: visible;
}

.hm-honest-swiper .swiper-slide {
    display: flex;
    width: 250px;
    height: auto; /* 같은 줄 카드 높이를 맞춤 */
}

.hm-honest-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    background: #ffffff;
    color: #1e1e1e;
    text-decoration: none;
}

.hm-honest-card:hover {
    color: #1e1e1e;
}

/* 라벨과 글을 글자 밑선으로 맞춤(오늘의 심층리뷰 .hm-today-pc-row와 같게) */
.hm-honest-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hm-honest-row .hm-ir-tag {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.4;
}

.hm-honest-txt {
    font-size: 12px;
    line-height: 1.5;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 아쉬운 점은 좋아요와 같은 글자 모양(굵게 하지 않음, 사용자 결정) — 이 구역의 주인공이라 줄 수만 3줄 */
.hm-honest-row.is-con .hm-honest-txt {
    -webkit-line-clamp: 3; /* 화면에서만 세 줄 — HTML엔 90자까지 */
}

.hm-honest-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto; /* 카드 아래쪽에 붙임(줄마다 글 길이가 달라도 정렬) */
    font-size: 11px;
    color: #888888;
    white-space: nowrap;
}

.hm-honest-star {
    color: #1e1e1e;
    font-weight: 700;
}

.hm-honest-star > span[aria-hidden] {
    color: var(--hm-main);
}

.hm-honest-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-honest-meta time {
    margin-left: auto;
}

.hm-honest-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.hm-honest-img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: #f2f2f2;
}

.hm-honest-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-honest-name {
    min-width: 0;
    font-size: 12px;
    color: #555555;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .hm-honest-swiper .swiper-slide {
        width: 230px;
    }
}

/* 상품 줄: 이름 아래 가격 — 글자 크기·색은 다른 홈 카드(main.002)의 .item-price-002·.dc-price-percent-002 그대로, 정가는 흐린 회색 취소선 */
.hm-honest-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hm-honest-info .hm-honest-name {
    display: block; /* 심층리뷰 카드 상품 칩(.c-product-name)처럼 11px 한 줄 말줄임 */
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hm-honest-price {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
}

.hm-honest-regular {
    display: block;
    font-size: 11px;
    color: #999999;
    line-height: 1.2;
}

.hm-honest-sale {
    display: block;
    line-height: 1.2;
}

.hm-honest-now {
    font-size: .77rem; /* 홈 상품 카드 가격과 같은 크기 */
    font-weight: 600;
    color: #000000;
}

.hm-honest-rate {
    font-size: 10px; /* 가격보다 작게(사용자 요청 2026-10-29) */
    font-weight: 700;
    color: red;
}

/* [최근 본 제품의 후기] skin/index/viewed-review.inc.php — '평이 좋은 제품의 후기' 카드와 같은 모양(후기 → 별점 → 상품 줄, 사용자 결정) */

/* 본 뒤에 올라온 후기 — 사이트 보조색(라임) 작은 표시 */
.hm-viewed-new {
    flex: none;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--hm-accent);
    color: var(--hm-accent-ink);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

/* [브랜드로 골라보는 테스터 리뷰] skin/index/brand-review.inc.php — 브랜드 칩 줄 + 칸마다 심층리뷰 카드 줄(카드는 심층리뷰 목록과 같은 rv-card — 아래 .hm-rvl)
   레퍼런스 honeyme-specs/2610-home/home-brand-select.png. 칩 크기는 사이트 디자인 기준의 작은 버튼(32px·13px) */
.swiper.hm-brv-chips,
.swiper.hm-rvl-swiper {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    overflow: visible;
}

.hm-brv-chips {
    margin-bottom: 12px;
}

/* 칩 두 줄을 한 덩어리(슬라이드 하나)로 좌우로 넘김 — 줄마다 제 길이 */
.hm-brv-chips .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
}

.hm-brv-line {
    display: flex;
    gap: 3px; /* 같은 줄 칩 사이(사용자 결정 2026-10-28) */
}

.hm-brv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dddddd;
    border-radius: 999px;
    background: #ffffff;
    color: #444444;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
}

.hm-brv-chip:hover {
    color: #1e1e1e;
}

.hm-brv-chip.is-on {
    border-color: #1e1e1e;
    color: #1e1e1e;
    font-weight: 700;
}

/* 칩 앞 둥근 로고(홈 '입점 브랜드'와 같은 img/brand/round/btn-*.png) — 로고 있는 칩은 왼쪽 여백을 줄여 동그라미가 칩 테두리 안쪽에 붙게 */
.hm-brv-chip img {
    flex: none;
    width: 22px;
    height: 22px;
    margin-left: -8px;
    border-radius: 50%;
}

.hm-rvl-swiper .swiper-slide {
    width: 147px; /* 140 + 카드 사이 간격 7px을 없앤 만큼(2026-10-29 비교 중, 되돌리려면 140px·간격 7) */
    height: auto;
}

@media (max-width: 768px) {
    .hm-rvl-swiper .swiper-slide {
        width: 122px; /* 115 + 없앤 간격 7px */
    }
}

/* 끝 카드 — 그 브랜드 심층리뷰 전체로 */
.hm-brv-more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 200px;
    padding: 14px;
    border-radius: 0;
    background: #ffffff;
    color: #1e1e1e;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}

.hm-brv-more:hover {
    color: #1e1e1e;
}

.hm-brv-more strong {
    font-size: 14px;
}

.hm-brv-more span {
    color: #666666;
}

.hm-brv-more svg {
    width: 18px;
    height: 18px;
    color: var(--hm-main);
}

/* 홈 심층리뷰 카드(브랜드 구역·이번 주 테마 줄, .hm-rvl) = 심층리뷰 목록(/review)의 rv-card 마크업 그대로(skin/parts/review-card.php) + '지금 많이 찾는 토이' 카드 모양으로 맞춤(2026-10-29 사용자 결정):
   모서리 없이 사진(회색 바탕) 위 · 흰 아래 칸, 글자 12px/500, 좌우 여백 .5rem, 폭 140px(작은 화면 115px). 상품 칩은 사진·회색 상자를 빼고 이름·가격만 랭킹 카드 가격 줄처럼 */
.hm-rvl .rv-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
    background: #ffffff;
}

.hm-rvl .rv-card:active {
    transform: none;
}

.hm-rvl .rv-card-img,
.hm-rvl .rv-placeholder {
    background: #f2f2f2 !important; /* 목록의 분홍·보라 등 색 바탕 대신 랭킹 카드와 같은 회색 */
}

.hm-rvl .rv-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .25rem .5rem .6rem;
}

.hm-rvl .c-title {
    margin: .25rem 0 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    -webkit-line-clamp: 3;
}

/* 제목을 화면에서 뺌(사용자 비교 요청 2026-10-29) — 글자는 HTML에 그대로 둠(검색엔진·AI·화면 읽기 프로그램이 읽음, display:none 아님). 되돌리려면 이 블록 삭제 */
.hm-rvl .c-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hm-rvl .c-proscons {
    margin-top: .35rem; /* 제목이 빠진 자리 위쪽 여백 */
}

/* 좋아요·아쉬워요: 카드 폭이 좁아 라벨 위·글 아래(평이 좋은 제품의 후기 카드와 같게), 글은 2줄까지 — HTML엔 전체 */
.hm-rvl .c-proscons {
    gap: 4px;
    margin-bottom: 6px;
}

.hm-rvl .c-pc {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px; /* 라벨(좋아요·아쉬워요)과 글 사이 — 1px에서 살짝 넓힘(2026-10-29) */
    font-size: 11px;
}

.hm-rvl .c-pc .hm-ir-tag {
    align-self: flex-start;
    min-width: 0;
    font-size: 9px;
    padding: 2px 5px;
}

.hm-rvl .c-pc-txt {
    display: -webkit-box;
    white-space: normal;
    color: #444444;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hm-rvl .c-pc-more {
    display: none;
}

.hm-rvl .c-meta-row {
    gap: 2px 4px;
    margin-bottom: 8px;
}

.hm-rvl .c-reviewer,
.hm-rvl .c-score,
.hm-rvl .c-hit {
    font-size: 10px;
}

.hm-rvl .c-hit {
    display: none; /* 조회수 뺌(사용자 요청 2026-10-29) — 점수·닉네임만 */
}

/* 상품 칩 → 랭킹 카드의 이름·가격 줄 모양(위에 가는 선, 사진·상자 없음) */
.hm-rvl .c-product-chip {
    margin-top: auto;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0 0;
    border-top: 1px solid #f0f0f0;
    border-radius: 0;
    background: none;
}

.hm-rvl .c-product-chip:active {
    background: none;
}

.hm-rvl .c-product-avatar,
.hm-rvl .c-product-avatar-empty {
    display: none !important;
}

.hm-rvl .c-product-name {
    font-size: 11px;
    color: #555555;
}

.hm-rvl .c-product-price-original {
    font-size: 11px;
    color: #999999;
}

.hm-rvl .c-product-price {
    font-size: .77rem;
    font-weight: 600;
    color: #000000;
}

.hm-rvl .c-product-discount-rate {
    color: red; /* 랭킹 카드의 할인율과 같은 빨강 */
    font-weight: 700;
}

/* [이번 주 베스트리뷰] skin/index/review-award.inc.php — 시안: 테두리 카드(BEST·작성자·별점 / 좋아요 / 아쉬워요 / 사진 / 상품 줄) + 아래 회색 카운트다운 상자.
   위쪽 둥근 모서리는 예전 그대로(아래 최신 리뷰와 이어지는 흰 판) */
.hm-award {
    border-radius: 25px 25px 0 0;
}

.hm-award-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.hm-award-rule {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #666666;
    text-decoration: none;
    white-space: nowrap;
}

.hm-award-rule svg {
    width: 14px;
    height: 14px;
}

/* 테두리 없이(사용자 결정 2026-10-28) — 흰 판 위에 글이 제목과 같은 줄에서 시작 */
.hm-award-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-award-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    color: #555555;
}

.hm-award-best {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: var(--hm-accent);
    color: var(--hm-accent-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.hm-award-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-award-star {
    flex: none;
    margin-left: auto;
    color: #1e1e1e;
    font-weight: 700;
}

.hm-award-star > span[aria-hidden] {
    color: var(--hm-main);
}

/* 좋아요·아쉬워요 — 최신 리뷰 카드와 같게 라벨 오른쪽에 글(첫 줄 글자 밑선 맞춤, 사용자 결정 2026-10-28). 좋아요 5줄·아쉬워요 3줄까지, 화면에서만 줄임 */
.hm-award-pc {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hm-award-pc .hm-ir-tag {
    flex: none;
    margin-top: 0;
    font-size: 10px;
    line-height: 1.4;
}

.hm-award-text {
    margin: 0 !important; /* default.css의 p { margin-bottom: 0 !important } */
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-award-text.is-pro {
    color: #1e1e1e;
    -webkit-line-clamp: 5;
}

.hm-award-photos {
    display: flex;
    gap: 6px;
}

.hm-award-photos img {
    width: 76px;
    height: 76px;
    border-radius: 6px;
    object-fit: cover;
    background: #f2f2f2;
}

.hm-award-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    color: #1e1e1e;
    text-decoration: none;
}

.hm-award-item:hover {
    color: #1e1e1e;
}

.hm-award-item time {
    flex: none;
    margin-left: auto;
    font-size: 11px;
    color: #888888;
}

.hm-award-empty {
    margin: 0 !important;
    font-size: 13px;
    color: #666666;
}

/* 다음 발표까지 — 회색 상자, 숫자는 굵게·자리 고정(바뀔 때 흔들리지 않게) */
.hm-award-cd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f5f5f5;
    font-size: 13px;
    color: #444444;
}

.hm-award-cd strong {
    font-size: 17px;
    font-weight: 800;
    color: #1e1e1e;
    font-variant-numeric: tabular-nums;
}

/* [최신 리뷰] skin/index/review-stream.inc.php(#hm-review-stream) — 카드 부품(skin/index/partials/review_item.partial.php)은 상품 상세 후기와 같이 쓰므로
   HTML은 그대로 두고 홈에서만 모양을 바꾼다: 테두리 없이(베스트리뷰와 같게) 후기 사이는 화면 끝까지 닿는 5px 회색 띠,
   순서 = 이름·날짜·별점 → 좋아요 → 아쉬워요 → 사진 → 도움돼요 → 맨 아래 상품 줄(다른 후기 카드와 같게) */
#hm-review-stream #hm-review-list > li {
    margin-bottom: 0 !important;
}

#hm-review-stream .divider-m {
    display: none;
}

/* 맨 마지막 후기 아래엔 띠 없음([후기 더 보기] 버튼 바로 위 — 더 불러오면 새 마지막 후기 기준으로 다시 맞춰짐) */
#hm-review-stream #hm-review-list > li:last-child .hm-ir-card {
    border-bottom: 0 !important;
}

#hm-review-stream .hm-ir-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 calc(var(--bs-gutter-x) * -.5) !important; /* 구분 띠가 화면 양끝까지 닿게 */
    padding: 18px calc(var(--bs-gutter-x) * .5) !important; /* 부품에 붙은 Bootstrap p-0(!important)을 덮음 */
    border: 0 !important; /* 테두리 없이(사용자 결정 2026-10-28) */
    border-bottom: 5px solid #f5f5f5 !important; /* 후기 사이 — 가는 선은 잘 안 보여서 예전 구분 띠(divider-m)와 같은 굵기·색, 여백만 줄임 */
    border-radius: 0 !important;
    background: #ffffff;
}

#hm-review-stream .hm-ir-card-head {
    order: 0;
    align-items: center;
    margin: 0;
}

#hm-review-stream .hm-ir-card-name {
    font-size: 13px;
    color: #1e1e1e;
}

#hm-review-stream .hm-ir-card-date {
    font-size: 11px;
    color: #999999;
}

#hm-review-stream .hm-ir-card-score {
    font-size: 13px;
}

#hm-review-stream .hm-ir-card-body {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #333333;
}

#hm-review-stream .hm-ir-card-adv,
#hm-review-stream .hm-ir-card-dis {
    align-items: baseline; /* 라벨과 첫 줄 글자 밑선 맞춤(다른 홈 카드와 같게) */
    margin: 0;
}

#hm-review-stream .hm-ir-card-body .hm-ir-tag {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.4;
}

#hm-review-stream .hm-ir-card-images {
    order: 2;
    margin: 0 !important;
    gap: 6px !important;
}

#hm-review-stream .hm-ir-card-images img {
    width: 76px !important;
    height: 76px !important;
}

#hm-review-stream .use-reply-wrap {
    order: 3;
    margin: 0 !important;
}

#hm-review-stream .use-vote {
    order: 4;
    margin: 0;
}

#hm-review-stream .hm-ir-card .review-item-img-wrapper {
    order: 5;
    margin: 0;
    padding: 10px 0 0 !important;
    border-top: 1px solid #f0f0f0;
    border-radius: 0;
    background: none;
}

#hm-review-stream .hm-ir-card .review-item-img-wrapper img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

#hm-review-stream .hm-ir-card .review-item-title {
    font-weight: 400;
    color: #555555;
}

/* [긴 글 더보기] js/hm_clamp_more.js — 글 전체는 HTML에 두고 화면에서만 몇 줄까지, 잘린 글에만 [더보기](누르면 끝까지).
   줄 수: 베스트리뷰 좋아요 5줄·아쉬워요 3줄(.hm-award-text), 최신 리뷰 4줄. 버튼은 상품 상세 후기의 더보기(.btn-more)와 같은 작은 알약 모양 */
#hm-review-stream [data-hm-clamp] {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-hm-clamp].is-open {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

.hm-award-body {
    flex: 1;
    min-width: 0;
}

.hm-clamp-more {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 3px 9px;
    border: 1px solid #d7d7d7;
    border-radius: 999px;
    background: #ffffff;
    color: #444444;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
}

.hm-clamp-more:hover {
    background: #f6f6f6;
}

/* [지금 가장 많이 보는 글] skin/index/popular-talk.inc.php — 허니톡 최신글 / 인기 탭 + 글 목록(앞 숫자 없음, 글 앞에 허니톡 카테고리) */
.hm-pop-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.hm-pop-tab {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #ffffff;
    color: #555555;
    cursor: pointer;
    line-height: 1.5;
}

.hm-pop-tab.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.hm-pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hm-pop-list[hidden] {
    display: none;
}

.hm-pop-item {
    display: flex;
    align-items: baseline;
    padding: 5px 0;
    text-decoration: none;
    color: inherit;
}

.hm-pop-title-wrap {
    display: flex; /* 제목이 길면 제목만 …으로 줄이고 카테고리·댓글 수는 늘 보이게 */
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    color: #111111;
}

.hm-pop-subject {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-pop-board,
.hm-pop-comment {
    flex: none;
    white-space: nowrap;
}

/* 글 맨 앞 작성자 성별 아이콘 — 허니톡 목록과 같은 마크업(.hm-sex-badge), 홈에선 프로필 사진 모서리가 아니라 글 앞에 작은 원으로 */
.hm-pop-title-wrap .hm-sex-badge {
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 9px;
    line-height: 1;
}

.hm-pop-title-wrap .hm-sex-f {
    background: #f0708a;
}

.hm-pop-title-wrap .hm-sex-m {
    background: #4a9be8;
}

.hm-pop-title-wrap .hm-sex-n {
    background: #c8c8c8; /* 성별 정보 없음 */
}

.hm-pop-board {
    font-size: 12px;
    color: #aaaaaa;
}

.hm-pop-comment {
    font-size: 12px;
    color: var(--hm-main);
}

.hm-pop-item {
    gap: 8px;
}

.hm-pop-time {
    flex: none;
    font-size: 11px;
    color: #aaaaaa;
    white-space: nowrap;
}

.hm-pop-empty {
    font-size: 13px;
    color: #aaaaaa;
    padding: 20px 0;
    text-align: center;
}