/* ==========================================================================
   가요가요 — 디자인 톤 레이어
   레이아웃·구성은 gayogayo-mvp.css 를 그대로 두고, 색·서체·굵기·모서리만 조정한다.

   2026-09-12 개정 — 자동 생성물처럼 보이던 신호를 걷어냈다.
     · 모든 블록이 카드(테두리+라운드+그림자)였던 것 → 목록은 헤어라인, 그림자 제거
     · 본문 글자까지 브랜드 네이비였던 것 → 무채색 잉크, 브랜드 색은 버튼·활성 상태에만
     · 굵기 800 남발 → 제목 600~700, 800은 가격 같은 숫자에만
     · 연파랑 칩 반복 → 무채색 칩, 유채색은 할인 하나만
     · 아이콘 전부 선 2px → 선 1.7px, 하단 탭 활성은 면(filled)
   반드시 gayogayo-mvp.css 뒤에 로드할 것.
   ========================================================================== */

:root {
    /* ── 브랜드 (로고 실측값) — 버튼·활성 상태·링크에만 쓴다 ── */
    --gy-brand: #0048E8;
    --gy-brand-dark: #0038B8;
    --gy-navy: #00265E;

    /* ── 무채색 잉크 — 본문에는 브랜드 색을 쓰지 않는다 ── */
    --gy-ink: #17191C;
    --gy-ink-2: #6E737A;
    --gy-ink-3: #9AA0A8;
    --gy-line: #EDEEF0;
    --gy-fill: #F4F5F6;   /* 칩 배경 · 섹션 구분 띠 */

    --color-primary: var(--gy-brand);
    --color-primary-dark: var(--gy-brand-dark);
    --color-primary-soft: var(--gy-fill);
    --color-text: var(--gy-ink);
    --color-text-secondary: var(--gy-ink-2);
    --color-text-tertiary: var(--gy-ink-3);
    --color-border: var(--gy-line);

    /* 유채색은 할인 하나뿐이므로 선명하게 */
    --color-deal: #E5322D;
    --color-deal-soft: #FDF0EF;

    --radius-card: 12px;
    --radius-control: 10px;
    --radius-input: 10px;
    --radius-chip: 4px;

    /* 그림자는 쓰지 않는다. 구분은 헤어라인과 여백으로. */
    --shadow-card: none;
    --shadow-soft: 0 6px 20px rgba(23, 25, 28, .10);

    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.gg-mvp,
.gg-mvp button,
.gg-mvp input,
.gg-mvp select,
.gg-mvp textarea {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    letter-spacing: -0.02em;
}
.gg-mvp [class] { font-synthesis-weight: none; }

/* 흰 바탕. 섹션 구분은 회색 띠로 준다. */
.gg-mvp,
.gg-mvp .page { background: #FFFFFF; }
.gg-mvp .page { box-shadow: none; }

/* ── 제목 ──────────────────────────────────────────────────── */
.gg-mvp .brand-word {
    color: var(--gy-brand);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.gg-mvp .page-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
}
.gg-mvp .section-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
}
.gg-mvp .section-caption {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 400;
}
.gg-mvp .detail-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

/* ── 딜 카드 ───────────────────────────────────────────────── */
.gg-mvp .deal-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
}
.gg-mvp .deal-store,
.gg-mvp .meta-line,
.gg-mvp .caption-line {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 400;
}
/* 800 은 숫자에만 남긴다 */
.gg-mvp .deal-price {
    color: var(--gy-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.gg-mvp .original-price {
    color: var(--color-text-tertiary);
    font-size: 12.5px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.gg-mvp .save-price {
    color: var(--color-deal);
    font-size: 12.5px;
    font-weight: 600;
}

/* 배지 — 작고 각지게. 색은 할인에만. */
.gg-mvp .deal-badge,
.gg-mvp .sponsored-badge,
.gg-mvp .new-badge,
.gg-mvp .tiny-badge {
    min-height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-chip);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
}
.gg-mvp .deal-badge      { background: var(--color-deal); color: #fff; }
.gg-mvp .sponsored-badge { background: var(--gy-fill); color: var(--gy-ink-2); }
.gg-mvp .new-badge       { background: var(--gy-fill); color: var(--gy-ink-2); }
.gg-mvp .tiny-badge      { background: var(--gy-fill); color: var(--gy-ink-2); }

/* 상태 칩 — 정보이지 장식이 아니다 */
.gg-mvp .status-chip {
    min-height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: var(--radius-chip);
    background: var(--gy-fill);
    color: var(--gy-ink-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.gg-mvp .status-chip.primary,
.gg-mvp .status-chip.success,
.gg-mvp .status-chip.warning { background: var(--gy-fill); color: var(--gy-ink-2); }

/* ── 이미지 비율 ───────────────────────────────────────────── */
.gg-mvp .hero-image        { aspect-ratio: 16 / 10; background: #F0F1F3; }
.gg-mvp .card-scroll .image-shell,
.gg-mvp .deal-thumb        { aspect-ratio: 16 / 10; }
.gg-mvp .detail-media      { aspect-ratio: 16 / 10; }
.gg-mvp .creator-thumb     { aspect-ratio: 3 / 4; }
.gg-mvp .image-shell       { background: #F0F1F3; }

/* ── 목록은 카드가 아니라 행 ───────────────────────────────
   가로형 딜 카드는 테두리·라운드·그림자를 벗고 헤어라인으로 나눈다. */
.gg-mvp .deal-card.horizontal {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 14px 0;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
}
.gg-mvp .deal-card.horizontal + .deal-card.horizontal {
    margin-top: 0;
    border-top: 1px solid var(--gy-line);
}
.gg-mvp .deal-card.horizontal .card-image {
    min-height: 0;
    height: auto;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
}
.gg-mvp .deal-card.horizontal .card-body { padding: 0; }

/* 세로형(레일) 카드와 히어로는 객체로 남기되 그림자는 뺀다 */
.gg-mvp .deal-card.vertical,
.gg-mvp .hero-card {
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-card);
    box-shadow: none;
}

/* 박스류 — 테두리만 */
.gg-mvp .info-box,
.gg-mvp .store-box,
.gg-mvp .trust-box,
.gg-mvp .review-card,
.gg-mvp .coupon-card,
.gg-mvp .gg-review-card,
.gg-mvp .gg-info-box,
.gg-mvp .gg-store-box,
.gg-mvp .gg-trust {
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-card);
    box-shadow: none;
}

/* 섹션 사이는 8px 회색 띠로 나눈다 */
.gg-mvp .gg-section + .gg-section {
    position: relative;
    padding-top: 26px;
}
.gg-mvp .gg-section + .gg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(-1 * var(--page-gutter));
    right: calc(-1 * var(--page-gutter));
    height: 8px;
    background: var(--gy-fill);
}

/* ── 버튼 ──────────────────────────────────────────────────── */
.gg-mvp .primary-button,
.gg-mvp .cta-main {
    border-radius: var(--radius-control);
    background: var(--gy-brand);
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.gg-mvp .primary-button:hover,
.gg-mvp .cta-main:hover { background: var(--gy-brand-dark); }
.gg-mvp .cta-main strong { font-size: 16px; font-weight: 700; }
.gg-mvp .cta-main span   { font-size: 12.5px; font-weight: 400; opacity: .85; }

/* 보조 버튼 — 흰 배경에 --gy-line(#EDEEF0) 테두리는 거의 보이지 않아
   누를 수 있는 것으로 읽히지 않았다. 옅은 회색 면 + 또렷한 테두리로 세운다. */
.gg-mvp .secondary-button,
.gg-mvp .ghost-button {
    border: 1px solid #DDE0E4;
    border-radius: var(--radius-control);
    background: var(--gy-fill);
    color: var(--gy-ink);
    font-size: 15px;
    font-weight: 600;
}
.gg-mvp .secondary-button:hover,
.gg-mvp .ghost-button:hover { background: #ECEEF0; border-color: #CFD3D8; }
.gg-mvp .secondary-button:active,
.gg-mvp .ghost-button:active { background: #E3E6E9; }
.gg-mvp .small-link,
.gg-mvp .link-button { color: var(--gy-ink-2); font-weight: 500; font-size: 13px; }
.gg-mvp .small-link:hover,
.gg-mvp .link-button:hover { color: var(--gy-brand); }

/* ── 검색창 / 입력 ─────────────────────────────────────────── */
.gg-mvp .search-entry {
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-input);
    background: var(--gy-fill);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 400;
}
.gg-mvp input,
.gg-mvp textarea,
.gg-mvp select { border-radius: var(--radius-input); }

/* ── 카테고리 ──────────────────────────────────────────────────
   업종마다 파스텔 타일을 다른 색으로 깔던 것을 무채색으로 통일한다.
   4색 파스텔 타일은 지금 가장 흔한 자동 생성 패턴이고,
   '유채색은 할인 하나만' 이라는 이 화면의 규칙과도 어긋났다.
   구분은 색이 아니라 아이콘 모양과 글자가 한다. */
.gg-mvp .category-icon,
.gg-mvp .category-pill[data-category] .category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--gy-fill);
    color: var(--gy-ink);
}
.gg-mvp .category-pill .ui-icon { width: 22px; height: 22px; }
.gg-mvp .category-pill span { font-size: 12.5px; font-weight: 500; letter-spacing: -0.02em; color: var(--gy-ink); }
.gg-mvp .category-pill:hover .category-icon { background: #ECEEF0; }
/* shop-renewal.css 가 nth-child 로 칸마다 색을 따로 지정한다 — 그쪽이 특정도가 높아
   위 규칙만으로는 덮이지 않으므로 같은 형태로 한 번 더 눌러 준다. */
.gg-mvp .gg-category-row a:nth-child(1) .gg-category-icon,
.gg-mvp .gg-category-row a:nth-child(2) .gg-category-icon,
.gg-mvp .gg-category-row a:nth-child(3) .gg-category-icon,
.gg-mvp .gg-category-row a:nth-child(4) .gg-category-icon,
.gg-mvp .gg-category-row a:nth-child(5) .gg-category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--gy-fill);
    color: var(--gy-ink);
}

/* ── 가로 스크롤 줄 — 잘린 게 아니라 더 있다는 신호를 준다 ────
   칩·카드 레일이 화면 오른쪽에서 딱 끊겨 '잘림' 으로 읽혔다.
   끝을 흐리게 처리해 이어진다는 것을 보여주고, 마지막 항목이
   가장자리에 붙지 않도록 오른쪽 여백을 준다. */
.gg-mvp .chip-row,
.gg-mvp .card-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    scrollbar-width: none;
}
.gg-mvp .chip-row::-webkit-scrollbar,
.gg-mvp .card-scroll::-webkit-scrollbar { display: none; }
.gg-mvp .chip-row { padding-right: calc(var(--page-gutter) + 20px); }
.gg-mvp .card-scroll { padding-right: calc(var(--page-gutter) + 20px); }
/* 스냅이 왼쪽 여백을 무시하고 첫 카드를 화면 끝에 붙이던 문제 */
.gg-mvp .card-scroll { scroll-padding-inline: var(--page-gutter); }
/* 끝까지 스크롤하면 흐림을 걷는다 */
.gg-mvp .chip-row.at-end,
.gg-mvp .card-scroll.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ── 아이콘 — 선을 얇게 ────────────────────────────────────── */
.gg-mvp .ui-icon { stroke-width: 1.7; }

/* ── 하단 내비 — 떠 있는 카드가 아니라 바닥에 붙은 바 ───────── */
.gg-mvp .bottom-nav {
    border: 0;
    border-top: 1px solid var(--gy-line);
    border-radius: 0;
    background: #fff;
}
.gg-mvp .bottom-nav a {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gy-ink-3);
}
/* 활성 탭 — gayogayo-mvp.css 가 넣는 배경 알약을 걷어낸다.
   탭 하나에만 회색 판이 깔려 지저분했다. */
.gg-mvp .bottom-nav a.active {
    background: none;
    /* 채움 아이콘을 브랜드 블루로 칠하니 파란 덩어리로 보였다.
       활성은 무채색 잉크로 두고, 형태(선→면)와 굵기로만 구분한다.
       브랜드 색은 버튼 같은 '누르는 것' 에만 남긴다. */
    color: var(--gy-ink);
    font-weight: 600;
}
/* 색만이 아니라 형태로도 구분한다 — 선 아이콘을 면으로 바꾼다.
   마스크 정의는 gayogayo-icons.css 의 --icon-*-fill. */
.gg-mvp .bottom-nav a.active .icon-house      { -webkit-mask-image: var(--icon-house-fill);      mask-image: var(--icon-house-fill); }
.gg-mvp .bottom-nav a.active .icon-map-pin    { -webkit-mask-image: var(--icon-map-pin-fill);    mask-image: var(--icon-map-pin-fill); }
.gg-mvp .bottom-nav a.active .icon-search     { -webkit-mask-image: var(--icon-search-fill);     mask-image: var(--icon-search-fill); }
.gg-mvp .bottom-nav a.active .icon-ticket     { -webkit-mask-image: var(--icon-ticket-fill);     mask-image: var(--icon-ticket-fill); }
.gg-mvp .bottom-nav a.active .icon-user-round { -webkit-mask-image: var(--icon-user-round-fill); mask-image: var(--icon-user-round-fill); }

/* 비활성이 너무 흐려 눌러야 할 곳으로 안 읽힌다 — 한 단계 진하게 */
.gg-mvp .bottom-nav a { color: #7C828A; }
.gg-mvp .bottom-nav a .ui-icon { width: 23px; height: 23px; }

/* ── 구분선 ────────────────────────────────────────────────── */
.gg-mvp .top-bar,
.gg-mvp .gg-info-row,
.gg-mvp .info-row,
.gg-mvp .section-head { border-color: var(--gy-line); }
.gg-mvp .top-bar { background: #fff; }

/* 본문 하단 여백 — 고정 내비 몫은 푸터가 진다 */
.gg-mvp .page > .container,
.gg-mvp .screen.has-sticky-cta,
.gg-mvp.has-detail-cta .page > .container { padding-bottom: 24px; }

/* ==========================================================================
   푸터
   ========================================================================== */
.gg-mvp .site-foot {
    width: var(--content-width);
    margin: 0 auto;
    padding: 28px var(--page-gutter) calc(var(--nav-height) + var(--safe-bottom) + 16px);
    border-top: 1px solid var(--gy-line);
    background: var(--gy-fill);
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.65;
    box-shadow: none;
}
.gg-mvp.has-detail-cta .site-foot {
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 92px);
}
.gg-mvp .foot-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    max-width: 1120px;
    margin: 0 auto;
}
.gg-mvp .foot-brand { grid-column: 1 / -1; }
.gg-mvp .foot-slogan {
    margin: 4px 0 10px;
    color: var(--gy-brand);
    font-size: 13.5px;
    font-weight: 600;
}
.gg-mvp .foot-desc { margin: 0; }
.gg-mvp .foot-desc br { display: none; }
.gg-mvp .foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.gg-mvp .foot-col h2 {
    margin: 0 0 2px;
    color: var(--gy-ink);
    font-size: 13px;
    font-weight: 600;
}
.gg-mvp .foot-col a,
.gg-mvp .foot-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.gg-mvp .foot-col a:hover,
.gg-mvp .foot-link:hover { color: var(--gy-brand); text-decoration: underline; }
.gg-mvp .foot-legal {
    max-width: 1120px;
    margin: 22px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--gy-line);
    font-size: 12px;
    color: var(--gy-ink-3);
}
.gg-mvp .foot-legal p { margin: 0 0 4px; }
.gg-mvp .foot-company { color: var(--color-text-secondary); font-weight: 600; }
.gg-mvp .foot-note { margin-top: 10px; line-height: 1.55; }
.gg-mvp .foot-copy { margin-top: 8px; }

/* ── 공식 로고 ─────────────────────────────────────────────── */
.gg-mvp .brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.gg-mvp .brand-logo img { width: auto; height: 26px; }
.gg-mvp .foot-logo { line-height: 0; }
.gg-mvp .foot-logo img { width: auto; height: 24px; }

/* ==========================================================================
   내 주변 — 위치 안내 바
   ========================================================================== */
.gg-mvp .gg-loc-bar {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 4px 0 16px;
    padding: 13px 14px;
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: none;
}
.gg-mvp .gg-loc-bar.on { border-color: var(--gy-brand); background: #F5F8FF; }
.gg-mvp .gg-loc-bar > .ui-icon { flex: none; color: var(--gy-ink-2); }
.gg-mvp .gg-loc-bar.on > .ui-icon { color: var(--gy-brand); }
.gg-mvp .gg-loc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gg-mvp .gg-loc-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--gy-ink);
    letter-spacing: -0.02em;
}
.gg-mvp .gg-loc-text span { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.gg-mvp .gg-loc-btn {
    flex: none;
    height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--gy-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
}
.gg-mvp .gg-loc-btn:disabled { opacity: .55; cursor: default; }
.gg-mvp .gg-loc-btn.ghost {
    border: 1px solid var(--gy-line);
    background: #fff;
    color: var(--color-text-secondary);
    font-weight: 500;
}
.gg-mvp .gg-loc-msg {
    margin: -8px 0 14px;
    padding: 10px 12px;
    border-radius: var(--radius-input);
    background: var(--color-deal-soft);
    color: var(--color-deal);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ==========================================================================
   내 주변 지도 (Leaflet + OpenStreetMap)
   ========================================================================== */
.gg-mvp .gg-map-wrap {
    margin: 0 0 16px;
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: none;
    /* Leaflet 레이어(z-index 400대)가 고정 헤더 위로 올라오지 않게 지도 안에 가둔다 */
    position: relative;
    isolation: isolate;
    z-index: 0;
}
.gg-mvp .gg-map-canvas { height: 280px; background: #F0F1F3; }
.gg-mvp .gg-map-fallback {
    margin: 0; padding: 18px;
    color: var(--color-text-secondary);
    font-size: 13px; text-align: center;
}
.gg-mvp .gg-pin-wrap { background: none; border: 0; }
.gg-mvp .gg-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--color-deal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(23, 25, 28, .28);
}
.gg-mvp .leaflet-popup-content {
    margin: 12px 14px;
    font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gy-ink);
}
.gg-mvp .leaflet-popup-content b { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.gg-mvp .gg-pop-price { font-size: 15px; font-weight: 800; color: var(--gy-ink); }
.gg-mvp .gg-pop-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--gy-brand);
    font-weight: 600;
    text-decoration: underline;
}
.gg-mvp .leaflet-container { font-family: inherit; }

/* ==========================================================================
   딜 상세 공유
   ========================================================================== */
.gg-mvp .gg-detail-top { justify-content: space-between; }
.gg-mvp .gg-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 13px 0 11px;
    border: 1px solid var(--gy-line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--gy-ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}
.gg-mvp .gg-share-btn .ui-icon { width: 17px; height: 17px; color: var(--gy-ink); }
.gg-mvp .gg-share-btn:hover { background: var(--gy-fill); }
.gg-mvp .gg-share-btn:active { transform: translateY(1px); }

.gg-mvp .gg-share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + var(--safe-bottom) + 88px);
    z-index: 60;
    transform: translateX(-50%);
    max-width: min(320px, calc(100% - 40px));
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(23, 25, 28, .93);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

/* ── 이미지 대체 표현 ──────────────────────────────────────── */
.ph { background: linear-gradient(135deg, #EEF0F2, #F5F6F7); }
.ph .ph-emoji { position: relative; z-index: 2; font-size: clamp(26px, 13%, 48px); opacity: .5; }
.ph::before, .ph::after { display: none; }

[hidden] { display: none !important; }

/* ── 모바일 터치·입력 보정 ──────────────────────────────────
   반응형 점검(320/375/430/768)에서 레이아웃 넘침·잘림은 없었고,
   남은 문제는 '손가락으로 누르기'와 'iOS 입력 확대' 두 가지였다. */

/* iOS 사파리는 글자 16px 미만 입력칸에 포커스가 가면 페이지를 확대해 버린다.
   확대된 화면은 되돌아오지 않아 이후 조작이 전부 어긋난다.
   본문 기준 15px 과 무관하게 입력칸만 16px 로 못박는다. */
.gg-mvp input,
.gg-mvp select,
.gg-mvp textarea,
.gg-mvp .gg-search-input input { font-size: 16px; }

/* 푸터 링크가 21px 높이에 7px 간격이라 옆 줄을 잘못 누르기 쉬웠다.
   글자 크기는 그대로 두고 누를 수 있는 상자만 34px 로 키운다. */
.gg-mvp .foot-col { gap: 0; }
.gg-mvp .foot-col a,
.gg-mvp .foot-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

/* 헤더의 지역 버튼(호치민)은 24px 이라 눌리는 면적이 좁다.
   음수 마진으로 배치는 그대로 두고 히트 영역만 넓힌다. */
.gg-mvp .location-button {
    padding: 5px 8px;
    margin: -5px -8px;
}

/* ── 홈 개편안(/?preview=v2) 섹션 배치 ─────────────────────────
   새 카드·새 색을 만들지 않는다. 기존 토큰과 기존 컴포넌트 위에서 배치만 정한다. */

/* 대표 딜 — 기존 hero-card 안에 할인받기 버튼 */
.gg-mvp .gg-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 14px;
}

/* 내 주변 — 지도는 미리보기 크기로, 누르면 내 주변 화면 */
.gg-mvp .gg-map-preview { display: block; margin-bottom: 14px; }
.gg-mvp .gg-map-preview .gg-map-canvas { height: 180px; pointer-events: none; }

/* 새로 나온 딜 — 기존 세로 카드를 2열로 */
.gg-mvp .gg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
}
.gg-mvp .gg-grid-2 .deal-card.vertical { width: auto; min-width: 0; }
.gg-mvp .gg-grid-2 .card-image { height: auto; aspect-ratio: 4 / 3; }
.gg-mvp .gg-grid-2 .card-body { padding: 10px 12px 12px; gap: 2px; }
.gg-mvp .gg-grid-2 .deal-price { font-size: 17px; }
.gg-mvp .gg-grid-2 .original-price { font-size: 12px; }
.gg-mvp .gg-grid-2 .deal-title { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-mvp .gg-grid-2 .deal-store { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 이번 주 많이 사용한 딜 — 순위형 목록 */
.gg-mvp .gg-rank-list { margin: 0; padding: 0; list-style: none; }
.gg-mvp .gg-rank-list li + li { border-top: 1px solid var(--gy-line); }
.gg-mvp .gg-rank-list a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    color: inherit;
    text-decoration: none;
}
.gg-mvp .gg-rank-no { font-size: 17px; font-weight: 800; color: var(--gy-brand); letter-spacing: -0.02em; }
.gg-mvp .gg-rank-body { display: grid; gap: 2px; min-width: 0; }
.gg-mvp .gg-rank-body .deal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-mvp .gg-rank-price { font-size: 14px; font-weight: 700; color: var(--gy-ink); }
.gg-mvp .gg-rank-price em { font-style: normal; color: var(--color-deal); }
.gg-mvp .gg-rank-uses { font-size: 12.5px; color: var(--gy-ink-2); white-space: nowrap; }

/* 모바일 최소 푸터 — 하단 내비가 있으므로 회사명·약관만 남기고 사업자 정보는 접는다 */
.gg-mvp .site-foot-compact { padding-top: 20px; font-size: 12px; color: var(--gy-ink-2); }
.gg-mvp .site-foot-compact .foot-company { margin: 0 0 6px; }
.gg-mvp .foot-mini { display: flex; gap: 14px; }
.gg-mvp .foot-mini a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gy-ink-2); font-size: 12.5px; }
.gg-mvp .foot-mini strong { font-weight: 600; color: var(--gy-ink); }
.gg-mvp .foot-biz summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-size: 12.5px; }
.gg-mvp .foot-biz p { margin: 0 0 3px; }
.gg-mvp .site-foot-compact .foot-note { margin: 8px 0 0; line-height: 1.55; }
.gg-mvp .gg-creator-stack { display: grid; gap: 10px; }