/* ==========================================================================
   [P6] 홈화면 전면 개편
   참조 : requirement/app_home_screen.jpg 및 requirement/slices/home-*.jpg

   전역 클래스를 덮어쓰지 않도록 모든 신규 규칙은 gg- 접두어를 쓴다.
   ========================================================================== */

:root {
    /* [P6-5] 지정 브랜드 컬러 */
    --gg-primary: #095b1b;
    --gg-primary-dark: #063f13;

    /* ⚠️ 선택·활성 어포던스는 브랜드 컬러와 분리해 둔다.
       기존 #009C21(59곳) / #07D436(6곳) 이 :checked / .on 상태를 담당하고 있어
       일괄 통일하면 선택 상태를 구분할 수 없게 된다(계약 §P6-5 경고).
       별첨 5-4 결정 전까지 활성색은 기존 값을 유지한다. */
    --gg-active: #009C21;
    --gg-active-strong: #07D436;

    --gg-danger: #e02020;
    --gg-radius: 2px;      /* 작업지침 2번 : 썸네일·배너 모서리 라운드 2 */
    --gg-gap: 8px;         /* 작업지침 2번 : 썸네일 간 여백 */
}

/* --------------------------------------------------------------------------
   섹션 공통
   -------------------------------------------------------------------------- */
.gg-section {
    /* 섹션 위아래 간격을 하나로 묶어 둔다. 배너도 같은 값을 쓴다. */
    padding: 32px 20px 0;
    box-sizing: border-box;
}

/* 제목과 더보기가 한 줄. 분류(탭)는 아랫줄 전체 폭을 쓴다. */
.gg-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    /* [F01-10] [F01-16] 제목을 바로 아래 분류 쪽으로 붙인다 */
    margin-bottom: 4px;
}

.gg-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

/* 분류(탭) 줄 — 더보기가 빠져 폭을 다 쓰므로 마지막 분류까지 넘어간다 */
.gg-section-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

/* [P6-2] 소분류 탭 — 개수가 5개든 7개든 줄바꿈되지 않도록 가로 스크롤 */
.gg-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.gg-tabs::-webkit-scrollbar {
    display: none;
}

.gg-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 1.35rem;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    padding-bottom: 5px;
}

.gg-tabs a.on {
    color: var(--gg-active);
    font-weight: 700;
    border-bottom: 2px solid var(--gg-active);
}

/* [P6-3] 섹션별 더보기 */
.gg-section-more {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1.35;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
}

.gg-section-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    font-size: 1.3rem;
    color: #999;
}

/* --------------------------------------------------------------------------
   [F01-05~07] [F01-11~13] [F01-17~19] [F01-20~22]
   단락 슬라이더 — 6개가 한 단락, 총 3단락(18개).

   카드 하나씩 밀리면 "6개가 동시에 넘어간다"가 되지 않는다.
   스크롤 스냅 단위를 단락(폭 100%)으로 잡아 한 번에 한 단락씩 이동시킨다.
   -------------------------------------------------------------------------- */
.gg-pager {
    display: flex;
    flex-wrap: nowrap;
    /* [5C-06] 단락마다 제 높이 — 상자 높이는 보이는 단락에 맞춘다(main.blade 의 fitPager).
       종전에는 가장 긴 단락 높이로 늘어나, 짧은 단락(견적 카드 등) 밑에 점까지 빈자리가 생겼다. */
    align-items: flex-start;
    overflow-y: hidden;
    transition: height .25s ease;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

.gg-pager::-webkit-scrollbar {
    display: none;
}

.gg-page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
}

/* 3열 2줄 */
.gg-pager.is-grid .gg-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px var(--gg-gap);
    align-content: start;
}

/* [2C-005] 한 줄 4개 (베스트 클럽/샤프트).
   종전에는 6개를 한 줄에 욱여넣어 글자를 .92~1.05rem 까지 줄여야 했고
   "너무 안 보인다" 는 지적을 받았다. 4개가 되어 자리가 늘었으므로
   글자도 다른 구획과 같은 크기로 되돌린다. */
.gg-pager.is-row4 .gg-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-content: start;
}

/* 뱃지는 한 줄 구획에서 자리를 너무 먹어 그대로 접어 둔다 */
.gg-pager.is-row4 .gg-card-badges { display: none; }

/* 단락 표시 점 */
.gg-pager-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.gg-pager-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #d6d6d6;
    cursor: pointer;
}

.gg-pager-dots button.on {
    width: 16px;
    border-radius: 3px;
    background-color: var(--gg-active);
}

/* --------------------------------------------------------------------------
   [P6-4] 상품 카드
   -------------------------------------------------------------------------- */
.gg-card {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.gg-card-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--gg-radius);
    background-color: #f5f5f5;
}

.gg-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gg-card-thumb.is-soldout img {
    filter: grayscale(100%);
    opacity: .55;
}

/* [5C-08] 판매완료는 중고 목록처럼 썸네일 가운데에만 적는다 (special/market 의 .soldout-badge 와 같은 모양) */
.gg-card-soldout {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 10px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

/* [F01-32] 모든 상품 카드의 찜은 썸네일 오른쪽 위 한 자리로 통일한다.
   [F01-33] 얇고 작은 회색 하트. 채움 여부로 선택/미선택을 구분한다. */
.gg-card-like {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    /* [2C-046] 그림 비율(24×22)을 지키도록 contain. 18×18 로 박으면 눌려 보였다 */
    background: transparent url(/assets/images/ico_heart_gray.svg) no-repeat center / contain;
    cursor: pointer;
}

.gg-card-like.on {
    background-image: url(/assets/images/ico_heart_gray_on.svg?v=5c40);
}

.gg-card-brand {
    display: block;
    margin-top: 8px;
    /* [2C-015] 브랜드가 없는 상품이 많다. 줄 자리를 비워 두지 않으면
       한 줄에 놓인 카드들의 아래쪽(값·찜수)이 들쭉날쭉해진다. */
    min-height: 1.4rem;
    font-size: 1.15rem;
    /* [2C-015] 브랜드는 흐린색으로. 눈이 제품명에 먼저 가야 한다.
       기존 화면이 쓰는 흐린 보조색(#999999)을 그대로 쓴다. */
    font-weight: 500;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-card-name {
    /* [2C-015] 제품명은 최대 두 줄(넘치면 …).
       [5C-26] 한 줄짜리 이름은 두 줄 자리를 잡지 않는다 — 아래 가격·찜 줄이 바로 붙어 올라온다.
       [5C-01] 낱말 단위로 통째 넘기지 않고 줄 끝까지 이어 쓴다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 2px;
    font-size: 1.35rem;
    line-height: 1.35;
    word-break: break-all;
    overflow-wrap: anywhere;
    /* [2C-018] 기존 화면(운영)의 본문 기준을 그대로 쓴다 — #222222 · 굵기 500.
       종전 #555 굵기 400 은 기존 본문보다 옅어 글자가 흐려 보였다. */
    color: #222;
    font-weight: 500;
    overflow: hidden;
}

.gg-card-price {
    display: block;
    margin-top: 4px;
    /* [5C-04] [5C-05] 가격은 수정본보다 한 단계 크고 굵게 — 골프용품·중고 목록과 같은 값 */
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
}

.gg-card-price.is-soldout {
    color: #bbb;
}

.gg-card-discount {
    margin-right: 4px;
    /* [5C-04] [5C-05] 할인율은 초록 (목록과 같게) */
    color: #075C19;
    font-weight: 700;
    font-style: normal;
    /* [2C-015] 할인가가 할인율보다 커야 한다. 종전에는 둘이 같은 크기였다. */
    font-size: 1.15rem;
    vertical-align: 1px;
}

/* 뱃지 */
.gg-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
    min-height: 17px;
}

.gg-badge {
    padding: 1px 5px;
    border-radius: var(--gg-radius);
    background-color: #f2f2f2;
    font-size: .95rem;
    font-style: normal;
    color: #666;
    white-space: nowrap;
}

.gg-badge.is-soldout {
    background-color: #ddd;
    color: #777;
}

/* 찜 수 · 평점 (리뷰 수) */
.gg-card-stats {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
    font-size: 1.05rem;
    /* [2C-018] 기존 화면의 보조 기준 — #555555 · 굵기 500.
       종전 #999 굵기 400 은 기존 화면에서 가장 옅은 색을 본문 옆에 쓴 것이었다. */
    color: #555;
    font-weight: 500;
}

.gg-card-stats em {
    font-style: normal;
    /* [2C-018] reset.css 가 em 의 굵기를 normal 로 못박아 두어
       물려받은 굵기가 적용되지 않는다. em 에 직접 준다. */
    font-weight: 500;
}

.gg-stat-like::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 3px;
    vertical-align: -1px;
    background: url(/assets/images/ico_heart_gray_on.svg?v=5c40) no-repeat center / contain;
    opacity: .8;
}

.gg-stat-score {
    margin-left: 5px;
}

.gg-stat-score::before {
    content: '★';
    margin-right: 2px;
    color: #bbb;
}

/* --------------------------------------------------------------------------
   [P6-1] 배너 슬롯
   -------------------------------------------------------------------------- */
.gg-banner {
    padding: 20px 20px 0;
    box-sizing: border-box;
}

.gg-banner img {
    display: block;
    width: 100%;
    border-radius: var(--gg-radius);
}

/* 배너4 — 1 대형 + 3 소형 */
.gg-banner-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gg-gap);
}

.gg-banner-main {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gg-radius);
}

.gg-banner-main img {
    height: 100%;
    object-fit: cover;
}

.gg-banner-caption {
    position: absolute;
    left: 14px;
    bottom: 52px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.gg-banner-caption strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.gg-banner-caption em {
    display: block;
    margin-top: 4px;
    font-size: 1.15rem;
    font-style: normal;
}

.gg-banner-all {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 1.2rem;
}

.gg-banner-subs {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gg-gap);
}

.gg-banner-subs a {
    display: block;
    overflow: hidden;
    border-radius: var(--gg-radius);
}

.gg-banner-subs img {
    height: 100%;
    object-fit: cover;
}

/* 배너5 — 2단 나란히 */
.gg-banner-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-gap);
}

.gg-banner-duo a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gg-radius);
}

.gg-banner-duo-tit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   [P6-5] 작업지침 2번 — "오늘의 베스트 클럽 ~ 골프공감 스토리 전"까지
   배너·제품·리스트 썸네일 모서리 라운드 2 (메인 메뉴 아이콘 제외)
   -------------------------------------------------------------------------- */
#main .mainvisualSwiper .img-box,
#main .mainBannerSwiper .img-box,
#main .mainBannerSwiper .img-box1,
#main .mainBannerSwiper .img-box2,
#main [data-home-section="nearby_shop"] .img-box,
#main [data-home-section="nearby_pro"] .img-box {
    border-radius: var(--gg-radius) !important;
    overflow: hidden;
}

/* 메인 메뉴 아이콘은 라운드 대상에서 제외 */
#main [data-home-section="main_menu"] .tab-menu img {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   [P6-5] 하단 독바 재배치
   참조 : requirement/slices/home-13-푸터_하단독바.jpg
   ⚠️ 59개 화면이 공유하므로 기존 클래스 구조는 유지하고 필요한 규칙만 덮어쓴다.
   -------------------------------------------------------------------------- */

/* 상단 행 : 좌 주변검색 / 우 클럽상담 — 글자만 */
footer .foot-my-info a {
    color: #333;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
}

/* 중앙 MY 원형 — 독바 위로 솟아오른다.

   그림(ico_footer_pin.png)이 흰 원과 초록 핀을 함께 품고 있다.
   content.css 의 초록 바탕을 그대로 두면 원이 겹쳐 보이므로 걷어내고,
   그림이 단추를 꽉 채우게 한다. */
footer .container > a.foot-my-circle {
    flex-direction: column;
    gap: 0;
    z-index: 2;
    background-color: transparent;
    overflow: hidden;
}

footer .container > a.foot-my-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

footer .container > a.foot-my-circle em {
    display: block;
    margin-top: 1px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

/* 하단 4개(홈·클럽견적 / 쇼핑·중고마켓)는 중앙 원형을 피해 좌우로 나뉜다 */
.footer-menu .right a:last-of-type img {
    display: block;
}

/* --------------------------------------------------------------------------
   메인 메뉴 5종 — 카드 형태
   참조 : requirement/app_home_screen.jpg

   종전에는 배경도 테두리도 없이 아이콘만 놓여 있었고, 아이콘 크기가
   18·30·41·40·40px 로 제각각이라 줄이 맞지 않았다.
   디자인대로 흰 카드에 올리고 아이콘 자리를 고정 높이로 잡아 세로 가운데에 세운다.
   -------------------------------------------------------------------------- */
#main [data-home-section="main_menu"] .tab-menu {
    display: flex;
    align-items: stretch;
    gap: 7px;
    padding: 18px 0 14px;
}

#main [data-home-section="main_menu"] .tab-menu a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    margin-bottom: 0;
    padding: 14px 2px 12px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    font-size: 1.2rem;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* 아이콘 자리를 고정해 그림 크기가 달라도 글자 줄이 맞는다 */
#main [data-home-section="main_menu"] .tab-menu a img {
    width: auto;
    max-width: 34px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 9px;
}

#main [data-home-section="main_menu"] .tab-menu a::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    margin: 7px auto 0;
    background-color: #d0d0d0;
    transition: background-color .15s ease;
}

#main [data-home-section="main_menu"] .tab-menu a:hover::after,
#main [data-home-section="main_menu"] .tab-menu a:active::after,
#main [data-home-section="main_menu"] .tab-menu a.on::after {
    background-color: var(--gg-danger);
}

/* 견적 상품(클럽·샤프트) 표시.
   카드 전체가 견적 화면으로 가므로 버튼이 아니라 구분 표시다. */
.gg-card-estimate {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(9, 91, 27, .92);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   [F01-01] 로고 — 더 굵게, 오른쪽으로 한 칸
   [F01-02] 우측 헤더 아이콘 간격 정렬
   -------------------------------------------------------------------------- */
#header .header-row .logo a {
    font-weight: 800 !important;
    letter-spacing: -0.6px;
    /* 본문 섹션의 왼쪽 선(20px)과 같은 자리에서 시작한다 */
    padding-left: 0;
}

/* 오른쪽 아이콘도 같은 여백(20px)으로 맞춘다 */
#header .header-body .header-inner {
    padding-right: 20px;
}

/* 장바구니·알림·로그인·검색이 제각각 붙어 있어 줄이 맞지 않았다.
   간격을 하나로 두고 가운데 정렬한다. */
#header .header-util .util-lis,
#header .header-util .af-wrap {
    gap: 16px !important;
    align-items: center;
}

#header .header-util .util-lis li a {
    display: flex;
    align-items: center;
    line-height: 1;
}

#header .header-util .util-lis li a img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 하단 독바 — 네 칸의 글자 굵기·색을 하나로 맞춘다.
   (선택했을 때 아이콘 색까지 통일하려면 골프 용품·중고마켓의
    선택 상태 아이콘 파일이 필요하다 — 디자인 산출물 대기) */
.footer-menu a {
    color: #222;
    font-weight: 600;
}

.footer-menu a.on {
    color: var(--gg-active);
}

/* [4C-05] 새 아이콘은 그림마다 같은 정사각 칸에 가운데로 맞춰 두었다.
   옛 홈 아이콘만 쓰던 왼쪽 2px 보정은 이제 필요 없다. */
.footer-menu a img {
    width: 24px;
    height: 24px;
    margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   [F01-08] [F01-14] [F01-23] [F01-30] 배너 위아래 간격
   배너는 앞뒤 섹션과 같은 리듬(위 24 / 아래 4)을 갖는다.
   -------------------------------------------------------------------------- */
#main .gg-banner,
#main [data-home-section="banner2"],
#main [data-home-section="banner3"] {
    /* .gg-section 의 위 여백(32px)과 같은 값 */
    margin-top: 32px;
    margin-bottom: 0;
}

/* 홈에서는 썸네일 위의 "견적" 딱지를 걷어낸다 */
#main .gg-card-estimate {
    display: none;
}

#main [data-home-section="banner3"] .cont-wrap > p {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   [F01-25] [F01-26] 우리동네 골프&피팅샵 — 3열 2줄 × 3단락
   [F01-27] [F01-29] 피팅샵·레슨프로 썸네일을 상품 카드와 같은 정사각으로 통일
   -------------------------------------------------------------------------- */
#main [data-home-section="nearby_shop"] .gg-page,
#main [data-home-section="nearby_pro"] .gg-page {
    gap: 16px var(--gg-gap);
}

#main [data-home-section="nearby_shop"] .gg-card-thumb,
#main [data-home-section="nearby_pro"] .gg-card-thumb {
    aspect-ratio: 1 / 1;
}

#main [data-home-section="nearby_pro"] .gg-pager.is-row3 .gg-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px var(--gg-gap);
}

.gg-shop-addr {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-shop-name {
    display: block;
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-shop-price {
    display: block;
    margin-top: 3px;
    font-size: 1.2rem;
    color: #444;
}

/* [F01-28] 레슨 프로는 1줄을 유지한다 — 가로 스크롤, 카드 3개가 보이는 폭 */
.gg-row-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gg-gap);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.gg-row-scroll::-webkit-scrollbar {
    display: none;
}

.gg-row-scroll > .gg-card {
    flex: 0 0 calc((100% - var(--gg-gap) * 2) / 3);
    min-width: 0;
}

/* --------------------------------------------------------------------------
   [F09-02] [F09-03] [F09-04] 마이페이지 상단
   적립금·총 제안 앞의 아이콘을 지우고 적립금 영역을 왼쪽으로 붙인다.
   -------------------------------------------------------------------------- */
.my-info-wrap .my-point-quote .box1 a:first-child::before,
.my-info-wrap .my-point-quote .estcop-num a:last-child::before,
.my-info-wrap .my-point-quote .estcop-num a:first-child::before {
    display: none !important;
    content: none !important;
}

/* 아이콘 자리로 비워 두던 왼쪽 여백도 함께 없앤다 */
.my-info-wrap .my-point-quote a:first-child { padding-left: 0; }
.my-info-wrap .my-point-quote .box1 { text-align: left; }
.my-info-wrap .my-point-quote .box1 a { display: block; text-align: left; }
.my-info-wrap .my-point-quote .box1 a span { margin-left: 0; text-align: left; }

/* [2C-106] 독바 위 "마이페이지" 옆 받은 견적 건수.
   [6C-02] 글자 크기는 "마이페이지"(1.2rem)와 같게, 위아래 가운데를 맞춘다.
           바탕·색·굵기·둥근 모서리는 그대로 둔다. */
footer .foot-my-info a.foot-my-link {
    display: inline-flex;
    align-items: center;
}
.foot-my-info .foot-my-count {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 10px;
    background-color: #e7f8eb;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    color: #075C19;
    white-space: nowrap;
}


/* ==========================================================================
   4차 피드백 — 홈 (2026-10-14)
   ========================================================================== */

/* [4C-11] 구획 위아래 간격을 하나로.
   기준은 메인 메뉴 카드 아래 → "베스트 클럽/샤프트" 제목 사이 46px.
   그 아래 TIP 위까지 모든 구획(제품·배너·큐레이션)이 앞 구획의 보이는 끝에서
   46px 떨어져 시작한다. 구획 상자 안의 위아래 여백은 걷어 내고 바깥 간격 하나로만 띄운다. */
#main > [data-home-section] {
    --gg-rhythm: 46px;
}
#main > .gg-section,
#main > .gg-banner,
#main > [data-home-section="banner2"],
#main > [data-home-section="banner3"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: var(--gg-rhythm) !important;
    margin-bottom: 0 !important;
}
#main > .gg-banner { padding-left: 20px; padding-right: 20px; }
/* 메인 메뉴 상자는 카드 아래로 14px 를 더 갖고 있다 — 그만큼 덜 띄운다 */
#main > [data-home-section="main_menu"] + [data-home-section] {
    margin-top: calc(var(--gg-rhythm) - 14px) !important;
}
/* TIP 표시는 스토리 구획 위로 33px 튀어나와 있다 — 튀어나온 끝에서 46px */
#main > [data-home-section="story"] {
    margin-top: calc(var(--gg-rhythm) + 33px) !important;
}

/* [4C-14] [4C-15] 우리 동네·레슨 프로 — 제목과 더보기를 한 줄(글자 바닥)에.
   이 두 구획만 머리줄이 링크로 감싸여 가운데 맞춤이라 더보기가 11px 내려가 있었다. */
#main [data-home-section="nearby_shop"] .gg-section-head > a,
#main [data-home-section="nearby_pro"] .gg-section-head > a {
    align-items: baseline !important;
}
#main [data-home-section="nearby_shop"] .gg-section-title,
#main [data-home-section="nearby_pro"] .gg-section-title {
    margin: 0;
}
/* [5C-09] [5C-12] 제목과 카드 사이를 실시간 골프 용품과 같게 — 그쪽 머리줄은 37px 높이라
   제목 글자 밑에서 카드까지 25px 인데, 이 두 구획은 머리줄이 17px 라 5px 뿐이었다. */
#main [data-home-section="nearby_shop"] .gg-section-head,
#main [data-home-section="nearby_pro"] .gg-section-head {
    margin-bottom: 24px;
}

/* [4C-13] 배너4 — 1대형 + 3소형. 권장 크기 대형 700×900 · 소형 320×290 의 비율대로
   구획 폭을 다 쓴다 (처음 드린 시안 home-08). */
#main .gg-banner-slot-grid .gg-banner-grid {
    display: grid;
    grid-template-columns: 700fr 320fr;
    gap: var(--gg-gap);
}
#main .gg-banner-slot-grid .gg-banner-main { aspect-ratio: 700 / 900; }
#main .gg-banner-slot-grid .gg-banner-main img,
#main .gg-banner-slot-grid .gg-banner-subs img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
/* 소형 3개는 대형의 높이를 셋으로 나눠 쓴다 — 두 줄 끝이 맞는다 */
#main .gg-banner-slot-grid .gg-banner-subs {
    display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--gg-gap);
    height: 100%; min-height: 0;
}
#main .gg-banner-slot-grid .gg-banner-subs a { position: relative; min-height: 0; height: 100%; }
#main .gg-banner-slot-grid .gg-banner-subs img { position: absolute; inset: 0; }

/* [4C-16] 배너5 — 2단 나란히, 구획 폭을 반씩 (처음 드린 시안 home-11).
   [5C-13] 권장 크기를 500×700(세로형)으로 바꿨다 — 발주처가 원래 세로형을 요청했다. 관리자 안내도 같이. */
#main .gg-banner-slot-duo .gg-banner-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-gap);
}
#main .gg-banner-slot-duo .gg-banner-duo a { aspect-ratio: 500 / 700; }
#main .gg-banner-slot-duo .gg-banner-duo img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}

/* [4C-12] 배너3 — 가로 슬라이드형.
   접힘 : 대표 그림 상자(폭 91.43%)를 그림 비율(1029×420)대로 — 종전 31.43% 는 위아래가 잘렸다.
          뒤에 깔린 펼침 그림이 오른쪽에 살짝 보이고, 열기 단추는 대표 그림 오른쪽 끝에 온전히 보인다.
   펼침 : 펼침 그림(1029×800)을 비율대로 흐름 안에 놓는다. 구획이 자라므로 아래 간격은 그대로다. */
#main .gg-b3 .mainBanner {
    position: relative !important;
    overflow: hidden !important;
    /* [5C-07] 모서리를 다른 배너(배너2·4·5 의 2px)와 같게 — 종전 10px */
    border-radius: 2px;
}
#main .gg-b3 .img-box1 {
    position: relative !important;
    width: 91.43% !important;
    padding-bottom: calc(91.43% * 420 / 1029) !important;
    overflow: visible !important;
    z-index: 2;
}
#main .gg-b3 .img-box1 > a:not(.b3-more) > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* [5C-07] 대표 그림 오른쪽 모서리도 다른 배너와 같은 2px */
    border-radius: 0 2px 2px 0;
}
#main .gg-b3 .img-box2 { position: absolute; inset: 0; z-index: 1; }
#main .gg-b3 .img-box2 .img-box {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    z-index: 1 !important;
    transform: none !important;
}
#main .gg-b3 .img-box2 .img-box img { width: 100%; height: 100%; object-fit: cover; }

#main .gg-b3 .b3-more,
#main .gg-b3 .b3-close {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background-color: rgba(255, 255, 255, .85);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
    z-index: 5;
}
#main .gg-b3 .b3-more { top: 50%; right: -15px; transform: translateY(-50%); }
#main .gg-b3 .b3-more img { width: 7px !important; height: 10px !important; position: relative; right: 1px; }
#main .gg-b3 .b3-close { display: none; top: 10px; right: 10px; }
#main .gg-b3 .b3-close img { width: 9px !important; height: 9px !important; }

#main .gg-b3 .mainBanner.is-open .img-box1 { display: none; }
#main .gg-b3 .mainBanner.is-open .img-box2 { position: relative; inset: auto; }
#main .gg-b3 .mainBanner.is-open .img-box2 .img-box {
    position: relative !important;
    inset: auto !important;
    height: 0 !important;
    padding-bottom: calc(100% * 800 / 1029) !important;
}
#main .gg-b3 .mainBanner.is-open .img-box2 .img-box img { position: absolute; inset: 0; }
#main .gg-b3 .mainBanner.is-open .b3-close { display: flex; }

/* [4C-11] 레슨 프로 가로 줄의 아래 4px(스크롤 막대 자리)도 걷어 다음 구획과 46px 로 */
#main > [data-home-section="nearby_pro"] .gg-row-scroll { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   [5C-04] [5C-05] 찜 수 · (골프용품) 후기 수 · (중고) 상태등급 · 올린 시일 — 목록의 .list-meta 와 같게
   [5C-03] 견적 카드(클럽·샤프트)는 브랜드 · 제품명 · 태그 — 제품쪽 견적 화면(.ep-*)과 같게
   -------------------------------------------------------------------------- */
.gg-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
    font-size: 1.1rem;
    color: #999;
}
.gg-card-meta em { font-style: normal; font-weight: 500; }
.gg-card-meta .gg-meta-grade { font-weight: 700; color: #777; }

.gg-card.is-estimate .gg-card-brand { margin-top: 6px; font-size: 1.1rem; color: #888; }
.gg-card.is-estimate .gg-card-name { font-size: 1.2rem; font-weight: 600; }
.gg-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
/* [5C-33] 태그 글자는 상자 안 위아래·좌우 가운데. 견적·골프용품·중고 모두 같은 태그 모양 */
.gg-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 2px;
    background: #eaf2ec;
    color: #095b1b;
    font-size: 1.05rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.3;
    white-space: nowrap;
}