@charset "UTF-8";
/* 취미명당 리뉴얼(V2) - 모바일 웹
 * 기준 폭 375px. 색/폰트 토큰 + 6종 카드(A~F) + 헤더 스크롤 전환 + 띠배너.
 */

:root {
    --hp2-gray900: #252525;
    --hp2-gray800: #555555;
    --hp2-gray600: #A8A8A8;
    --hp2-outline: #D7D7D7;
    --hp2-pink600: #FF5862;
    --hp2-pink300: #FFE1E3;
    --hp2-pink200: #FFF0F1;
    --hp2-pink100: #FFF1F2;
    --hp2-blue700: #6A82EC;
    --hp2-blue300: #EEF1FF;
}

/* ===== base ===== */
.hp2-body { margin: 0; background: #fff; letter-spacing: -0.08px; }
.hp2-body * { letter-spacing: -0.08px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.hp2-container { width: 100%; max-width: 100%; overflow-x: hidden; padding-bottom: 40px; }
.hp2-sections { width: 100%; }
.hide { display: none !important; }
.hp2-ellipsis-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hp2-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 상단 헤더 (플로팅 → 흰색 전환) ===== */
.hp2-header {
    position: fixed; top: 0; left: 50%;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
    width: 100%; max-width: 480px; z-index: 100;
    height: 50px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px; background: rgba(255,255,255,0);
    -webkit-transition: background 0.15s linear; transition: background 0.15s linear;
}
.hp2-header.bottom-line { border-bottom: 1px solid #f0f0f0; }
.hp2-header-btn {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* 기존 취미명당/상세 헤더와 동일한 GNB 아이콘 에셋 사용 (텍스트는 text-indent로 숨김) */
.hp2-header-btn a {
    display: block; width: 30px; height: 30px;
    background-position: center center; background-repeat: no-repeat; background-size: contain;
    text-indent: -3000em; overflow: hidden; cursor: pointer;
}
.hp2-back a { background-image: url(/m/statics/img/icon/btn-gnb-back-black@3x.png); }
.hp2-share a { background-image: url(/m/statics/img/icon/btn-gnb-share-black@3x.png); }
.hp2-header.w-mode .hp2-back a { background-image: url(/m/statics/img/icon/btn-gnb-back-white@3x.png); }
.hp2-header.w-mode .hp2-share a { background-image: url(/m/statics/img/icon/btn-gnb-share-white@3x.png); }
.hp2-header-title {
    flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700;
    color: var(--hp2-gray900); opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}
.hp2-header.w-mode .hp2-header-title { opacity: 0; }

/* ===== 히어로 (375x350, 검정 50% 오버레이) ===== */
.hp2-hero {
    position: relative; width: 100%; aspect-ratio: 375 / 350;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding-bottom: 46px; overflow: hidden;
}
/* aspect-ratio 미지원 폴백 (컬럼 최대 480px 기준) */
@supports not (aspect-ratio: 1 / 1) {
    .hp2-hero { height: calc(min(100vw, 480px) * 350 / 375); }
}
.hp2-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.hp2-hero-content {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center; padding: 0 16px;
}
.hp2-hero-badge {
    border: 0.7px solid #fff; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff;
    padding: 0 11px; height: 22.8px; line-height: 22.8px; display: inline-block;
}
.hp2-hero-title { font-size: 37px; font-weight: 700; color: #fff; letter-spacing: -0.099px; line-height: 1.1; }
.hp2-hero-subtitle { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.085px; line-height: 1.1; }

/* ===== 검색 바 ===== */
.hp2-search-wrap { padding: 30px 15px 0; }
.hp2-search {
    display: flex; align-items: center; height: 46px; background: var(--hp2-blue300); border-radius: 5px;
    padding: 0 10px 0 15px; text-decoration: none;
}
.hp2-search-icon { font-size: 14px; color: var(--hp2-blue700); margin-right: 8px; }
.hp2-search-text { font-size: 14px; font-weight: 400; color: var(--hp2-blue700); }

/* ===== 섹션 공통 ===== */
.hp2-section { margin-top: 45px; }
.hp2-sec-head {
    display: flex; align-items: flex-end; justify-content: space-between; padding: 0 15px; gap: 8px;
}
.hp2-sec-head-left { min-width: 0; }
.hp2-sec-title { font-size: 18px; font-weight: 700; color: var(--hp2-gray900); line-height: 1.3; margin: 0; }
.hp2-sec-sub { font-size: 13px; font-weight: 400; color: var(--hp2-gray600); margin-top: 4px; }
.hp2-sec-more {
    flex: none; display: inline-flex; align-items: center; font-size: 13px; font-weight: 400; color: var(--hp2-gray600);
    text-decoration: none; white-space: nowrap;
}
.hp2-sec-more i { font-size: 14px; margin-left: 2px; color: var(--hp2-gray600); }
.hp2-sec-body { margin-top: 15px; }
.hp2-sec-head + .hp2-tabs { margin-top: 15px; }
.hp2-tabs + .hp2-sec-body { margin-top: 15px; }

/* 가로스크롤 공통 */
.hp2-hscroll { width: 100%; overflow: hidden; }
.hp2-hscroll .swiper-slide { width: auto; height: auto; }

/* ===== 탭 칩 ===== */
.hp2-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 15px; -webkit-overflow-scrolling: touch; }
.hp2-tabs::-webkit-scrollbar { display: none; }
.hp2-tab {
    flex: none; box-sizing: border-box; height: 35px; line-height: 33px; padding: 0 16px; border-radius: 100px;
    border: 1px solid #D7D7D7; background: #fff; color: #555; font-size: 12px; font-weight: 400; letter-spacing: -0.08px; cursor: pointer; white-space: nowrap;
}
.hp2-tab.on { background: var(--hp2-gray900); color: #fff; font-weight: 700; border-color: var(--hp2-gray900); }

/* ===== 카드 공통: 라벨 / 하트 / 판매완료 ===== */
.hp2-thumb { position: relative; overflow: hidden; background: #f4f4f4; }
.hp2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp2-labels { position: absolute; top: 6px; left: 6px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; }
.hp2-label { font-size: 10px; font-weight: 700; padding: 4.5px 6px; border-radius: 2px; line-height: 1; white-space: nowrap; }
.hp2-label-quick {
    background: var(--hp2-pink600); color: #fff; font-size: 10px; font-weight: 700; padding: 4.5px 6px; border-radius: 2px;
}
.hp2-heart {
    position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hp2-heart i { font-size: 20px; line-height: 1; }
.hp2-heart i.off { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.3); display: inline; }
.hp2-heart i.on { color: var(--hp2-pink600); display: none; }
.hp2-heart.on i.off { display: none; }
.hp2-heart.on i.on { display: inline; }
.hp2-soldout { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.hp2-soldout span { color: #fff; font-size: 13px; font-weight: 700; }

/* 프로모(쿠폰) 라벨 */
.hp2-coupons { display: flex; flex-wrap: wrap; gap: 4px; }
.hp2-coupon { font-size: 10px; font-weight: 700; padding: 3px 5px; border-radius: 2px; line-height: 1.2; background: var(--hp2-pink200); color: var(--hp2-pink600); white-space: nowrap; }

/* 가격 공통 */
.hp2-price { display: flex; align-items: center; gap: 4px; }
.hp2-price .rate { font-size: 14px; font-weight: 700; color: var(--hp2-pink600); }
.hp2-price .cost { font-size: 14px; font-weight: 700; color: var(--hp2-gray900); }

/* ===== Card A : 썸네일형 (지역 인이미지 + 타이틀) ===== */
.hp2-card-a { display: block; text-decoration: none; }
.hp2-card-a .hp2-thumb { border-radius: 5px; aspect-ratio: 168 / 146; }
.hp2-card-a .hp2-thumb::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2));
}
.hp2-card-a .hp2-loc {
    position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 6px 4px;
}
.hp2-card-a .hp2-loc i { font-size: 14px; color: #fff; }
.hp2-card-a .hp2-loc span { font-size: 12px; font-weight: 400; color: #fff; }
.hp2-card-a .hp2-title { margin-top: 7px; font-size: 13px; font-weight: 400; color: var(--hp2-gray900); line-height: 1.4; height: 36px; }
.hp2-card-a.mini { width: 134px; }
.hp2-card-a.mini .hp2-thumb { aspect-ratio: 134 / 118; }

/* 섹션1 그리드 (2열) */
.hp2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 15px; }

/* ===== Card B : 일반형 ===== */
.hp2-card-b { display: block; width: 162px; text-decoration: none; }
.hp2-card-b .hp2-thumb { width: 162px; height: 150px; border-radius: 5px; }
.hp2-card-b .hp2-info { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.hp2-card-b .hp2-loctitle { display: flex; flex-direction: column; gap: 6px; }
.hp2-card-b .hp2-region { font-size: 12px; font-weight: 400; color: var(--hp2-gray600); }
.hp2-card-b .hp2-title { font-size: 13px; font-weight: 400; color: var(--hp2-gray900); line-height: 1.35; }
.hp2-card-b .hp2-priceblock { display: flex; flex-direction: column; gap: 6px; }
/* 관심/BEST/모임: 카드 균일 높이(상단 정렬). 2줄 타이틀+쿠폰이 넘칠 때 잘리지 않도록 min-height 사용 → Swiper가 가장 큰 슬라이드에 맞춰 stretch, 짧은 카드는 하단 여백 */
.hp2-card-b.fixed { min-height: 262px; }
/* 솜씨키트 변형 */
.hp2-card-b.skit { width: 156px; }
.hp2-card-b.skit .hp2-thumb { width: 156px; height: 136px; border-radius: 3px; }

/* ===== Card C : 지역 정사각 + 더보기 (섹션3) ===== */
.hp2-sec-curation { background: var(--hp2-pink100); padding: 40px 0 24px; }
.hp2-sec-curation .hp2-sec-head { padding: 0 15px; }
.hp2-sec-curation .hp2-grid-c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 15px; margin-top: 15px; }
.hp2-card-c {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden;
    display: block; text-decoration: none; background: #f4f4f4;
}
.hp2-card-c img { width: 100%; height: 100%; object-fit: cover; }
.hp2-card-c::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.hp2-card-c .hp2-c-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 18px 12px; text-align: center; }
.hp2-card-c .hp2-c-title { width: 100%; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.25; }
.hp2-card-c .hp2-c-more { margin-top: 6px; font-size: 10px; font-weight: 400; color: #fff; }

/* ===== Card D : 패키지 커버 + 미니 (섹션4) ===== */
.hp2-card-d { display: block; width: 278px; text-decoration: none; }
.hp2-card-d .hp2-cover { position: relative; width: 278px; height: 258px; border-radius: 5px; overflow: hidden; background: #f4f4f4; }
.hp2-card-d .hp2-cover img { width: 100%; height: 100%; object-fit: cover; }
.hp2-card-d .hp2-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); }
.hp2-card-d .hp2-cover-title { position: absolute; left: 20px; bottom: 25px; z-index: 1; width: 258px; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25; }
.hp2-card-d .hp2-minis { margin-top: 15px; display: flex; gap: 10px; }

/* ===== Card E : 타운카드 (섹션9) ===== */
.hp2-card-e { position: relative; width: 147px; height: 195px; border-radius: 5px; overflow: hidden; display: block; text-decoration: none; background: #f4f4f4; }
.hp2-card-e img { width: 100%; height: 100%; object-fit: cover; }
.hp2-card-e::after { content: ""; position: absolute; inset: 0; background: rgba(85,85,85,0.4); }
.hp2-card-e .hp2-e-badge { position: absolute; left: 12px; top: 26px; z-index: 1; font-size: 12px; font-weight: 400; color: #fff; }
.hp2-card-e .hp2-e-body { position: absolute; left: 16px; top: 125px; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.hp2-card-e .hp2-e-region { font-size: 18px; font-weight: 700; color: #fff; }
.hp2-card-e .hp2-e-sub { font-size: 12px; font-weight: 400; color: #fff; }

/* ===== Card F : 랭킹 핑크카드 (섹션7) ===== */
.hp2-ticket-list { display: flex; flex-direction: column; gap: 10px; padding: 0 15px; }
.hp2-card-f {
    display: flex; align-items: center; gap: 10px; background: var(--hp2-pink600); border-radius: 10px;
    padding: 10px 13px; text-decoration: none;
}
.hp2-card-f .hp2-f-num { flex: none; width: 16px; font-size: 20px; font-weight: 700; color: #fff; text-align: center; }
.hp2-card-f .hp2-f-thumb { flex: none; width: 70px; height: 70px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.2); }
.hp2-card-f .hp2-f-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp2-card-f .hp2-f-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hp2-card-f .hp2-f-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 18px; height: 36px; }
.hp2-card-f .hp2-f-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hp2-card-f .hp2-f-loc { display: flex; align-items: center; gap: 3px; min-width: 0; }
.hp2-card-f .hp2-f-loc i { font-size: 12px; color: #fff; }
.hp2-card-f .hp2-f-loc span { font-size: 12px; font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp2-card-f .hp2-f-go { flex: none; display: inline-flex; align-items: center; font-size: 10px; font-weight: 400; color: var(--hp2-pink300); }
.hp2-card-f .hp2-f-go i { font-size: 12px; color: var(--hp2-pink300); margin-left: 1px; }

/* ===== 띠배너 (섹션5) ===== */
.hp2-strip { position: relative; width: 100%; margin-top: 40px; }
.hp2-strip .hp2-strip-swiper { width: 100%; height: calc(min(100vw, 480px) * 66 / 375); }
.hp2-strip .swiper-slide { width: 100%; height: 100%; }
.hp2-strip .swiper-slide a { display: block; width: 100%; height: 100%; }
.hp2-strip .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp2-strip-indicator {
    position: absolute; right: 12px; bottom: 10px; z-index: 5; background: rgba(0,0,0,0.4); color: #fff;
    font-size: 11px; font-weight: 400; padding: 2px 8px; border-radius: 10px;
}
.hp2-strip-indicator .cur { font-weight: 700; }