/* ============================================================================
   배때지 V2 가이드(replica*) — 통합 반응형 디자인 시스템
   2026-07-30 전면 정리. 이 파일 하나가 가이드 103개의 레이아웃 SSOT 다.

   설계 규칙 (이 파일 안에서 예외 없음)
     1) 모든 카드/그리드는 repeat(auto-fit, minmax(--*-min, 1fr)) 로만 만든다.
        · auto-fit 이라 아이템이 트랙 수보다 적으면 «빈 트랙이 접힌다».
          (카드 2장이 4열 그리드에서 오른쪽 절반을 비워 두던 문제의 근본 해결)
        · 열 수를 미디어쿼리로 박지 않는다. --*-min 만 단계별로 바꾼다.
     2) 고정 width/height 를 쓰지 않는다. 크기는 clamp() 로 뷰포트에 연동한다.
        (예외: 아이콘 배지 .v2g-mono 는 정사각 배지라 aspect-ratio 로 고정)
     3) 텍스트를 자르지 않는다. line-clamp·ellipsis 로 감추는 대신
        word-break:keep-all + overflow-wrap:anywhere + text-wrap:pretty 로
        «넘치지 않게» 만든다. → 잘림 0, overflow 0.
     4) 링크/버튼의 실효 터치 영역은 44px 이상. 본문 문장 안 인라인 링크는
        WCAG 2.5.8 예외라 건드리지 않는다(문장 줄간격이 깨진다).
     5) 하단 고정 내비는 높이 68px + safe-area. 본문 하단 여백에 반영한다.
     6) !important 금지. 충돌은 스코프(.v2g …)로 이긴다.

   브레이크포인트 (미디어쿼리는 «토큰 값 변경» 용도로만 쓴다)
     ~479   : 1열, 좌우 14px
     480~767: 내용에 따라 1~2열
     768~1023: 2~3열
     1024~1439: 3~4열
     1440~  : .v2live-shell(max 1320px)이 폭을 제한 — 좌우 과공백 방지
   ========================================================================== */

.v2g * { box-sizing: border-box; }

.v2g {
    /* ── 색/모양 (기존 값 유지) ── */
    --ink: #14141a;
    --sub: #5c5c6a;
    --line: #ececef;
    --card: #fff;
    --bg: #f4f4f6;
    --ac: #6f6cff;
    --ac2: #8b93ff;
    --ink-grad: linear-gradient(155deg, #1c1c26 0%, #111119 62%);
    --radius: 18px;

    /* ── 반응형 토큰 (한 곳에서만 정의, 미디어쿼리로 값만 갱신) ── */
    --g-inset: 14px;          /* 본문 좌우 여백 */
    --g-gap: 10px;            /* 그리드 간격 */
    --g-nav-min: 138px;       /* 아이콘형 내비 카드 최소폭 (320px 에서 2열이 되는 값) */
    --g-tile-min: 100%;       /* 텍스트형 타일 최소폭 (100% = 1열) */
    --g-ai-min: 116px;        /* 히어로 요약 카드 최소폭 (히어로 내부폭 기준 320px 2열) */
    --g-toc-min: 100%;        /* 목차 항목 최소폭 */
    --g-card-pad-y: 18px;
    --g-card-pad-x: 16px;
    --g-tap: 44px;            /* 최소 터치 영역 */

    background: var(--bg);
    color: var(--ink);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    line-height: 1.75;
    /* 한글은 어절 단위로 줄바꿈, 대신 끊을 곳이 없는 긴 영문/URL 은 강제로 끊어
       카드 밖으로 넘치지 않게 한다(둘을 함께 써야 «넘침 0 + 자연스러운 줄바꿈»). */
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
}
.v2g a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* 제목·카드 문구의 «마지막 줄에 한 단어만 남는» 어색한 줄바꿈 방지.
   (미지원 브라우저는 무시하고 기존과 동일하게 동작 — 폴백 불필요) */
.v2g h1, .v2g h2, .v2g h3,
.v2g .v2g-navcard strong, .v2g .v2g-tile strong,
.v2g .v2g-tile h3, .v2g .v2g-tile p, .v2g .v2g-navcard span { text-wrap: pretty; }

/* 토큰 단계 전환 — 여기서 바뀌는 것은 «값» 뿐이고 열 수를 직접 쓰지 않는다 */
@media (min-width: 480px) {
    .v2g { --g-inset: 16px; --g-gap: 12px; --g-tile-min: 210px; --g-toc-min: 220px; }
}
@media (min-width: 768px) {
    .v2g { --g-inset: 20px; --g-gap: 14px; --g-nav-min: 178px; --g-tile-min: 220px;
           --g-ai-min: 160px; --g-card-pad-y: 22px; --g-card-pad-x: 22px; }
}
@media (min-width: 1024px) {
    .v2g { --g-inset: 28px; --g-gap: 16px; --g-nav-min: 200px; --g-tile-min: 240px; }
}
@media (min-width: 1280px) {
    /* nav-min 을 214 로 두면 1264px 에서 5열이 되어 6장 카드가 5+1 로 깨진다.
       250 이면 4열이 확정되고 6/10/20장 모두 균형 있게 채워진다. */
    .v2g { --g-gap: 18px; --g-nav-min: 250px; --g-tile-min: 250px; }
}

/* ---------- 상단 V2 헤더 (가이드 자체 헤더를 쓰는 페이지용) ---------- */
.v2g-head {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.v2g-head-in {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 0 var(--g-inset);
}
.v2g-logo { font-size: 20px; font-weight: 900; letter-spacing: .12em; }
.v2g-logo b { color: var(--ac); }
.v2g-head-spacer { flex: 1; }
.v2g-head a.v2g-head-cta {
    display: inline-flex; align-items: center;
    min-height: var(--g-tap); padding: 8px 14px; border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 800;
}
.v2g-tabs {
    max-width: 1180px; margin: 0 auto;
    display: flex; gap: 6px; padding: 8px 12px;
    overflow-x: auto; scrollbar-width: none;
}
.v2g-tabs::-webkit-scrollbar { display: none; }
.v2g-tabs a {
    flex: none; display: inline-flex; align-items: center;
    min-height: var(--g-tap); padding: 8px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--sub);
    background: #fff; border: 1px solid var(--line); white-space: nowrap;
}
.v2g-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 본문 래퍼 ----------
   폭은 공용 셸(.v2live-shell, max 1320px)이 담당한다. 여기서는 좌우 인셋과
   푸터 앞 여백만 책임진다.

   ★ 하단 고정 내비 회피는 여기서 하지 않는다.
     bottom-nav-common.css 가 이미 body 에
       padding-bottom: calc(var(--v2-nav-height) + env(safe-area-inset-bottom))
     를 걸어 «네비 높이 + safe-area» 를 전역 1회 예약한다.
     예전 90~110px 하단 패딩은 그 예약과 겹쳐 가이드마다 68px 짜리 죽은 공간을
     한 번 더 만들고 있었다(실측). 여기서는 푸터와의 시각적 간격만 둔다.
     → 검증: 8뷰포트 전부 «네비에 가려진 요소 0», 푸터 하단 여유 90~114px. */
.v2g-wrap {
    max-width: none; margin: 0;
    padding: var(--g-inset) var(--g-inset) clamp(28px, 4vw, 44px);
}

/* ---------- HERO ---------- */
.v2g-hero {
    position: relative; overflow: hidden;
    padding: clamp(20px, 5vw, 34px) clamp(16px, 4vw, 26px);
    border-radius: clamp(16px, 3vw, 24px);
    background:
        radial-gradient(circle at 100% 0%, rgba(111,108,255,.34), transparent 44%),
        var(--ink-grad);
    color: #fff;
    box-shadow: 0 22px 48px rgba(15,15,25,.24);
}
.v2g-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: var(--ac2); font-size: 11px; font-weight: 900; letter-spacing: .12em;
}
/* 34px 고정 → 뷰포트 연동. letter-spacing 도 px 고정을 버리고 em 으로 바꿔
   작은 화면에서 글자가 뭉치지 않게 한다. */
.v2g-hero h1 {
    margin: clamp(10px, 2.4vw, 16px) 0 12px;
    font-size: clamp(21px, 4.6vw, 38px); line-height: 1.24;
    font-weight: 900; letter-spacing: -.025em; color: #fff;
}
.v2g-hero-lead {
    margin: 0; font-size: clamp(13.5px, 1.4vw, 15.5px);
    color: rgba(255,255,255,.82); max-width: 68ch;
}

/* HERO 내 요약 카드 */
.v2g-ai-cards {
    display: grid; gap: var(--g-gap); margin-top: clamp(14px, 2.4vw, 20px);
    grid-template-columns: repeat(auto-fit, minmax(var(--g-ai-min), 1fr));
}
.v2g-ai-card {
    padding: 13px 14px; border-radius: 14px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
}
.v2g-ai-card b { display: block; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.v2g-ai-card span { font-size: 12.5px; color: rgba(255,255,255,.72); }

/* ---------- 섹션 제목 ----------
   좁은 화면에서 제목과 부제가 한 줄에 눌리지 않게 wrap 을 허용한다. */
.v2g-secttl {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 8px; margin: clamp(20px, 3.4vw, 28px) 2px 12px;
}
.v2g-secttl h2 { margin: 0; font-size: clamp(17px, 2.2vw, 20px); font-weight: 900; letter-spacing: -.02em; }
.v2g-secttl small { color: var(--sub); font-size: 12.5px; }

/* ---------- 카드형 내비 그리드 ----------
   열 수 고정(2/3/4) 제거 → minmax + auto-fit. 카드 수가 적으면 빈 트랙이 접힌다. */
.v2g-navgrid {
    display: grid; gap: var(--g-gap); align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(var(--g-nav-min), 1fr));
}
.v2g-navcard {
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    padding: clamp(13px, 2.4vw, 18px); border-radius: 16px;
    min-height: var(--g-tap);
    background: var(--card); border: 1px solid var(--line);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.v2g-navcard:hover { transform: translateY(-3px); border-color: var(--ac); box-shadow: 0 12px 26px rgba(111,108,255,.16); }
.v2g-navcard:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ── [2026-08-25] 카드 앵커 단일화 (늘린링크) ──────────────────────────────
   종전에는 카드 «전체» 가 <a> 였다. 그래서 크롤러가 읽는 앵커 텍스트가
   배지 + 제목 + 설명 + 화살표를 통째로 이어붙인 문자열이 됐다 —
   실측 「구매구매 가이드종합 구매 가이드자세히 →」 형태로 883건.
   (aria-hidden 은 스크린리더만 가릴 뿐 검색엔진 앵커에는 그대로 들어간다)

   이제 마크업은 <div class="v2g-navcard"> 이고 링크는 제목 하나뿐이다:
       <strong><a class="v2g-navlink" href="…">레플리카 시계 가이드</a></strong>
   카드 전체를 계속 클릭할 수 있도록 그 링크에 늘린링크(::after)를 얹는다.
   · .v2g-navcard 에 position:relative 가 있어야 ::after 가 카드에 맞춰진다.
   · 링크가 <strong> 안에 있으므로 기존 `.v2g-navcard strong` 타이포는 그대로 산다.
   · div 는 :focus-visible 이 걸리지 않으므로 :focus-within 으로 키보드 포커스를 살린다.
   ※ 2026-08-20 내부앵커 정비 때 다른 카드들에 적용한 것과 «같은» 방식이다.
   ---------------------------------------------------------------------- */
.v2g-navcard { position: relative; }
.v2g-navcard strong > .v2g-navlink { color: inherit; text-decoration: none; }
.v2g-navcard strong > .v2g-navlink::after {
    content: ""; position: absolute; inset: 0; border-radius: 16px;
}
.v2g-navcard:focus-within { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 정사각 배지 — width/height 고정 대신 폭 clamp + aspect-ratio */
.v2g-mono {
    flex: none; width: clamp(38px, 8vw, 48px); aspect-ratio: 1 / 1;
    border-radius: 14px; display: grid; place-items: center;
    background: var(--ink-grad); color: #fff;
    font-size: clamp(15px, 3.4vw, 18px); font-weight: 900; letter-spacing: .02em;
}
/* 제목·설명·화살표 3단 정렬 통일:
   제목/설명은 위에서 쌓이고, 화살표(.v2g-go)는 항상 카드 바닥에 붙는다.
   설명이 없는 카드도 같은 위치에 화살표가 오도록 설명 칸을 flex:1 로 둔다. */
.v2g-navcard strong { font-size: clamp(14px, 1.5vw, 15px); font-weight: 800; line-height: 1.4; }
.v2g-navcard > span { font-size: 13px; color: var(--sub); line-height: 1.55; }
.v2g-navcard > span:not(.v2g-mono):not(.v2g-go) { flex: 1 1 auto; }
.v2g-navcard .v2g-go {
    flex: none; margin-top: auto; padding-top: 2px;
    font-size: 12px; font-weight: 800; color: var(--ac);
}

/* ---------- 정보 카드 (섹션) ---------- */
.v2g-card {
    margin-top: var(--g-gap);
    padding: var(--g-card-pad-y) var(--g-card-pad-x);
    border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(20,20,40,.04);
}
.v2g-card h2 { margin: 0 0 12px; font-size: clamp(17px, 2.3vw, 21px); font-weight: 900; letter-spacing: -.025em; }
.v2g-card h3 { margin: 18px 0 8px; font-size: clamp(15px, 1.7vw, 16px); font-weight: 800; }
.v2g-card p { margin: 0 0 12px; font-size: clamp(14px, 1.5vw, 15px); color: var(--sub); }
.v2g-card p:last-child { margin-bottom: 0; }
.v2g-card > h2:first-child + .lead:empty { display: none; }   /* 빈 lead 가 여백만 만드는 경우 */

/* 타일 그리드 — 텍스트 밀도가 높아 nav 카드보다 최소폭이 크다 */
.v2g-tilegrid {
    display: grid; gap: var(--g-gap); margin-top: 14px; align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(var(--g-tile-min), 1fr));
}
.v2g-tile {
    padding: clamp(13px, 2.6vw, 16px); border-radius: 13px;
    background: #fafaff; border: 1px solid var(--line);
    display: block; color: inherit; min-height: var(--g-tap);
}
.v2g-tile strong { display: block; margin-bottom: 6px; font-size: clamp(14px, 1.5vw, 15px); font-weight: 800; line-height: 1.45; }
.v2g-tile span { font-size: 13.5px; color: var(--sub); line-height: 1.55; }
.v2g-tile h3 { margin: 0 0 6px; font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.4; }
.v2g-tile p { margin: 0; font-size: 13.5px; line-height: 1.6; }
a.v2g-tile:hover { border-color: var(--ac); }
a.v2g-tile:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 타일 안 목록(최근 등록 상품 / 최근 구매후기) — 링크 하나하나가 내비게이션이므로
   44px 터치 영역을 준다. 인라인 <a> 라 높이가 19px 밖에 안 됐다. */
.v2g-tile ul { margin: 12px 0 0; padding-left: 18px; }
.v2g-tile ul li { line-height: 1.5; }
.v2g-tile ul li + li { margin-top: 2px; }
.v2g-tile ul li > a {
    display: block; min-height: var(--g-tap);
    padding: 11px 2px; font-size: 14px; line-height: 1.45;
    border-bottom: 1px solid transparent;
}
.v2g-tile ul li > a:hover,
.v2g-tile ul li > a:focus-visible { border-bottom-color: currentColor; }

/* ---------- 비교표 ----------
   ~479px: th/td 를 블록으로 풀어 «라벨 위 / 값 아래» 카드형으로 읽힌다.
           (가로 스크롤보다 2열 key-value 표에서 훨씬 읽기 좋다)
   480px~ : 원래의 2열 표. th 고정폭 180px 은 min-width 로 바꿔 눌리지 않게. */
.v2g-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 14px;
    border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
    table-layout: auto;
}
.v2g-table th, .v2g-table td {
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    text-align: left; font-size: 14px; color: var(--sub); vertical-align: top;
}
.v2g-table th { background: #fafaff; color: var(--ink); font-weight: 800; }
.v2g-table tr:last-child th, .v2g-table tr:last-child td { border-bottom: 0; }
@media (min-width: 480px) {
    .v2g-table th { min-width: 150px; width: 22%; }
}
@media (max-width: 479px) {
    .v2g-table, .v2g-table tbody, .v2g-table tr, .v2g-table th, .v2g-table td { display: block; width: auto; }
    .v2g-table th { border-bottom: 0; padding-bottom: 4px; border-radius: 0; }
    .v2g-table td { padding-top: 0; }
    .v2g-table tr + tr th { border-top: 1px solid var(--line); padding-top: 12px; }
}

/* 체크리스트 — ol/ul 어느 쪽이든 같은 모양 */
.v2g-checklist { margin: 14px 0 0; padding: 0; }
.v2g-checklist ol, .v2g-checklist ul { margin: 0; padding: 0; list-style: none; }
.v2g-checklist li {
    position: relative; padding-left: 28px; margin-bottom: 10px;
    font-size: clamp(14px, 1.5vw, 14.5px); color: var(--sub);
}
.v2g-checklist li:last-child { margin-bottom: 0; }
.v2g-checklist li:before {
    /* 아이콘 마커 — 글자 크기에 비례하게 em 으로 둔다(px 고정 없음) */
    content: "✓"; position: absolute; left: 0; top: .2em;
    width: 1.4em; height: 1.4em; display: grid; place-items: center;
    border-radius: 6px; background: #e9e9ff; color: var(--ac);
    font-size: 12px; font-weight: 900;
}

/* 칩 */
.v2g-chip {
    display: inline-flex; align-items: center; min-height: 34px;
    margin: 3px 5px 3px 0; padding: 6px 12px;
    border-radius: 999px; background: #f0f0ff; border: 1px solid #e2e2ff;
    color: #4b48d6; font-size: 13px; font-weight: 700;
}
a.v2g-chip { min-height: var(--g-tap); }

/* 강조 노트 */
.v2g-note {
    margin-top: 16px; padding: 16px 18px; border-radius: 13px;
    background: var(--ink-grad); color: #fff;
}
.v2g-note strong { display: block; margin-bottom: 5px; font-size: 15px; color: #fff; }
.v2g-note p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; }

/* ---------- FAQ ----------
   두 가지 마크업이 공존한다(둘 다 살린다).
     A) <div class="v2g-faq"><strong>Q</strong><p>A</p>  → 아코디언 (가이드 10개)
     B) <div class="v2g-faq"><h3 class="q">Q</h3><div class="a">A</div> → 정적 (replica.php)
   좌측 44px 인덴트가 모바일에서 본문 폭을 크게 먹어 padding 을 뷰포트 연동으로 바꿨다. */
.v2g-faq {
    border: 1px solid var(--line); border-radius: 13px; margin-top: 10px;
    background: #fff; overflow: hidden;
    --faq-ind: clamp(34px, 9vw, 44px);
}
.v2g-faq > strong,
.v2g-faq > .v2g-faq__q {
    display: block; position: relative; margin: 0;
    min-height: var(--g-tap);
    padding: 13px 40px 13px var(--faq-ind);
    font-size: clamp(14.5px, 1.6vw, 15px); font-weight: 800; color: var(--ink); line-height: 1.5;
}
/* (2026-08-01) 토글 어포던스 복구 — 값·모양은 그대로, 셀렉터만 넓혔다.
   목차 필터가 <strong> 을 <h3 class="v2g-faq__q"> 로 바꾼 뒤로 아래 cursor 와
   ＋/－ 표시가 «아무것도 매칭하지 않아» 사라져 있었다. 정적형(.q)은 원래 설계대로
   토글 표시를 붙이지 않으므로 :not(.q) 로 제외한다. */
.v2g-faq > strong,
.v2g-faq > .v2g-faq__q:not(.q) { cursor: pointer; }
.v2g-faq > strong:before,
.v2g-faq > .v2g-faq__q:before {
    content: "Q"; position: absolute; left: 12px; top: 14px;
    width: 1.35em; height: 1.35em; display: grid; place-items: center;
    border-radius: 6px; background: var(--ac); color: #fff; font-size: 12px; font-weight: 900;
}
/* 정적형(B)은 항상 펼쳐져 있으므로 ＋/－ 토글 표시를 붙이지 않는다 */
.v2g-faq > strong:after,
.v2g-faq > .v2g-faq__q:not(.q):after {
    content: "＋"; position: absolute; right: 14px; top: 13px; color: var(--sub); font-weight: 700;
    transition: transform .2s ease;
}
.v2g-faq.open > strong:after,
.v2g-faq.open > .v2g-faq__q:not(.q):after { content: "－"; }
.v2g-faq > p {
    margin: 0; max-height: 0; overflow: hidden;
    padding: 0 16px 0 var(--faq-ind);
    font-size: clamp(14px, 1.5vw, 14.5px); color: var(--sub);
    transition: max-height .25s ease, padding .25s ease;
}
/* 600px 고정이면 긴 답변이 잘렸다. 전환 애니메이션에 필요한 상한만 넉넉히 둔다. */
.v2g-faq.open > p { max-height: 2400px; padding: 0 16px 15px var(--faq-ind); }
.v2g-faq > .a, .v2g-faq > div:not(.v2g-faq__q) {
    padding: 0 16px 14px var(--faq-ind);
    font-size: clamp(14px, 1.5vw, 14.5px); color: var(--sub); line-height: 1.75;
}

/* ---------- 핵심 요약 / 목차 ----------
   (이전에는 guide_head_extra.php 인라인에 있었다. 레이아웃 규칙은 이 파일로 통합한다.) */
.v2g-tldr { border-left: 4px solid #c9a227; }
.v2g-tldr__ttl { margin: 0 0 10px; font-size: clamp(15.5px, 1.8vw, 17px); letter-spacing: -.01em; }
.v2g-tldr__body { margin: 0; line-height: 1.85; color: var(--sub); }

.v2g-toc {
    margin: 18px 0; padding: clamp(14px, 2.6vw, 18px) clamp(14px, 2.8vw, 20px);
    border: 1px solid rgba(0,0,0,.09); border-radius: 14px; background: rgba(0,0,0,.02);
}
.v2g-toc__ttl { margin: 0 0 8px; font-size: clamp(15px, 1.7vw, 16px); font-weight: 700; letter-spacing: -.01em; }
/* CSS columns 는 항목이 열 경계에서 쪼개진다 → grid + auto-fit 으로 교체.
   항목마다 44px 터치 영역을 준다(목차는 순수 내비게이션). */
.v2g-toc__list {
    display: grid; gap: 0 clamp(16px, 3vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(var(--g-toc-min), 1fr));
    margin: 0; padding: 0; list-style: none; counter-reset: v2gtoc;
}
.v2g-toc__list li { margin: 0; counter-increment: v2gtoc; min-width: 0; }
.v2g-toc__list li > a {
    display: flex; gap: 8px; align-items: baseline;
    min-height: var(--g-tap); padding: 10px 2px;
    font-size: clamp(13.5px, 1.5vw, 14.5px); line-height: 1.5; color: inherit;
    border-bottom: 1px solid transparent;
}
.v2g-toc__list li > a:before {
    content: counter(v2gtoc) "."; flex: none; color: var(--sub); font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2g-toc__list li > a:hover,
.v2g-toc__list li > a:focus-visible { border-bottom-color: currentColor; }

/* 앵커 이동 시 고정 헤더에 제목이 가리지 않게 */
.v2g :target { scroll-margin-top: 96px; }

/* ---------- 하단 관련 가이드 (공용 v2tc 블록) ----------
   .v2tc 는 SHOP·상품상세와 공유하는 컴포넌트다. 가이드 안에서만 본문 카드와
   좌우 기준선을 맞춘다(가이드에서 본문보다 32px 안쪽으로 들어가 있었다). */
.v2g-related { margin-top: 10px; }
.v2g .v2tc {
    /* 공용 컴포넌트는 max-width:var(--v2tc-maxw,1200px) 로 자체 폭을 제한한다.
       가이드에서는 셸(.v2live-shell)이 이미 1320px 로 폭을 잡고 .v2g-card 가
       그 안을 꽉 쓰므로, 1200px 상한이 걸리면 1440px 에서 관련링크 블록만
       64px 좁아져 왼쪽선은 맞고 오른쪽선이 어긋난다(실측 1200 vs 1264).
       변수를 덮어써 카드와 같은 폭으로 맞춘다(원본 CSS 무수정). */
    --v2tc-maxw: 100%;
    margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
.v2g .v2tc__list { grid-template-columns: repeat(auto-fit, minmax(var(--g-tile-min), 1fr)); }
/* 공용 v2tc 는 -webkit-line-clamp:2 다. 영문 가이드 제목("Cartier Replica Watch
   Guide (English)")이 3줄이라 768px 에서 잘렸다 → 가이드 안에서만 상한을 올린다.
   (SHOP·상품상세의 2줄 정책은 그대로 둔다 — 스코프가 .v2g 로 한정된다) */
.v2g .v2tc__lk { -webkit-line-clamp: 4; }

/* ---------- 언어 전환 / 가격비교 요약 (replica.php 에서 사용) ---------- */
.v2g-langsw { margin: 14px 0 4px; }
.v2g-langsw__a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: var(--g-tap); padding: 10px 16px;
    border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    text-decoration: none; color: inherit; background: #fff;
}
.v2g-langsw__a:hover { border-color: rgba(0,0,0,.32); }
.v2g-langsw__a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.v2g-langsw__t { font-size: 14px; font-weight: 800; }
.v2g-langsw__g { font-size: 14px; font-weight: 700; color: #2f6fed; white-space: nowrap; }

/* 도매원가 가격비교 요약표
   ~479px: 행 단위 카드로 변환(3열 표는 320px 에서 읽을 수 없다).
           라벨은 th[data-label]/td[data-label] 값을 ::before 로 붙인다.
   480px~ : 일반 표 + 좁으면 래퍼가 가로 스크롤. */
.v2g-pcwrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.v2g-pc { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2g-pc th, .v2g-pc td {
    /* 링크가 44px 를 차지하므로 셀 상하 padding 을 줄여 행 높이를 유지한다 */
    padding: 4px 12px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.06); line-height: 1.45;
}
.v2g-pc thead th { padding: 9px 12px; }
.v2g-pc td:not(:has(a)) { padding-top: 14px; padding-bottom: 14px; }
.v2g-pc thead th { font-size: 12px; font-weight: 800; color: var(--sub); background: #fafaff; white-space: nowrap; }
.v2g-pc tbody tr:last-child th, .v2g-pc tbody tr:last-child td { border-bottom: 0; }
.v2g-pc tbody th { font-weight: 800; color: var(--ink); }
.v2g-pc a {
    color: #2f6fed; display: inline-flex; align-items: center;
    min-height: var(--g-tap);   /* 표 안 링크도 내비게이션이라 44px 확보 */
}
.v2g-pc a:hover { text-decoration: underline; }
.v2g-pcsave {
    display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800;
    color: #c0392b; background: #fdecec; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.v2g-pcnote { margin: 10px 2px 0; font-size: 13px; line-height: 1.7; color: var(--sub); }
.v2g-pcmore {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--g-tap); margin-top: 12px; padding: 0 18px;
    border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    font-size: 14px; font-weight: 800; text-decoration: none; color: inherit;
}
.v2g-pcmore:hover { border-color: rgba(0,0,0,.3); }
@media (min-width: 480px) {
    .v2g-pc { min-width: 460px; }
    .v2g-pc tbody th { white-space: nowrap; }
}
@media (max-width: 479px) {
    .v2g-pcwrap { overflow-x: visible; border: 0; border-radius: 0; background: transparent; }
    .v2g-pc, .v2g-pc tbody, .v2g-pc tr, .v2g-pc th, .v2g-pc td { display: block; width: auto; }
    /* 카드 모드에서는 «열» 개념이 없다. 각 값이 data-label 로 자기 라벨을 달고
       브랜드는 <th scope="row"> 이므로 thead 는 중복이다 → 감춘다.
       (sr-only 로 남기면 1px 박스 안에 109px 텍스트가 갇혀 «잘림» 으로 잡힌다) */
    .v2g-pc thead { display: none; }
    .v2g-pc tbody tr {
        border: 1px solid var(--line); border-radius: 12px; background: #fff;
        padding: 6px 12px 10px; margin-bottom: 10px;
    }
    .v2g-pc tbody tr:last-child { margin-bottom: 0; }
    .v2g-pc tbody th, .v2g-pc tbody td { border-bottom: 0; padding: 5px 0; }
    .v2g-pc tbody th { font-size: 15px; }
    .v2g-pc tbody td[data-label]:before {
        content: attr(data-label) " "; color: var(--sub); font-size: 12px; font-weight: 800;
    }
    .v2g-pc tbody th a { min-height: var(--g-tap); }
}

/* ---------- 영문판 언어바 (.v2g-langbar / i18n-en.css) ----------
   링크가 26px 라 터치 영역이 부족했다. 색·보더는 i18n-en.css 원본 그대로 두고
   높이만 채운다(원본은 영문 전용 파일이라 여기서 스코프 오버라이드). */
.v2g .v2g-langbar .v2g-lang-alt,
.v2g .v2g-langbar .v2g-lang-cur {
    display: inline-flex; align-items: center; min-height: var(--g-tap);
}

/* ---------- 브랜드 가이드 «전체 보기» 접기 (replica.php) ----------
   hidden 속성으로만 접는다 — display:none 으로 DOM 에서 지우면 크롤러가
   링크를 따라가지 못한다. 버튼은 모바일에서 폭을 채워 누르기 쉽게. */
#v2bg-grid [data-bg-more][hidden] { display: none; }
.v2bg-morewrap { display: flex; justify-content: center; margin: 14px 0 4px; }
.v2bg-morebtn {
    appearance: none; border: 1px solid #d7d1c7; background: #fff; color: #2b2620;
    border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 700;
    cursor: pointer; min-height: var(--g-tap); line-height: 1.2;
}
.v2bg-morebtn:hover { background: #faf8f5; }
.v2bg-morebtn:focus-visible { outline: 2px solid #c8a24a; outline-offset: 2px; }
.v2bg-cnt { color: #8a8378; font-weight: 600; }
@media (max-width: 479px) { .v2bg-morebtn { width: 100%; max-width: 340px; } }

/* ---------- 목록형 타일 (최근 등록 상품 / 최근 구매후기) ----------
   1행 2장짜리 그리드라서 auto-fit 덕에 PC 에서도 오른쪽이 비지 않는다.
   내부는 링크 목록이므로 카드 padding 을 조금 줄이고 항목 간 구분선을 준다. */
.v2g-tile--list { padding: clamp(14px, 2.6vw, 18px) clamp(12px, 2.4vw, 16px); }
.v2g-tile--list > h3 { margin: 0 0 4px; }
.v2g-tile--list ul { margin: 6px 0 0; padding: 0; list-style: none; }
.v2g-tile--list ul li + li { margin-top: 0; border-top: 1px solid var(--line); }
.v2g-tile--list ul li > a { padding: 12px 2px; }

/* ---------- 다크 모드 (기존 톤 유지) ---------- */
@media (prefers-color-scheme: dark) {
    .v2g-toc { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
    .v2g-langsw__a { border-color: rgba(255,255,255,.16); background: transparent; }
    .v2g-langsw__a:hover { border-color: rgba(255,255,255,.4); }
    .v2g-langsw__g { color: #7fa8ff; }
}

/* ---------- 모션 최소화 선호 ---------- */
@media (prefers-reduced-motion: reduce) {
    .v2g-navcard, .v2g-faq > p, .v2g-faq > strong:after { transition: none; }
    .v2g-navcard:hover { transform: none; }
}

/* ============================================================================
   등급 비교 매트릭스 (.v2g-gtable)                            2026-08-25
   ----------------------------------------------------------------------------
   기존 .v2g-table 은 «2열 key-value» 전용이다(th 22% 고정 + 479px 이하에서
   th/td 를 block 으로 풀어 카드형으로 읽힌다). 등급 비교처럼 열이 3개 이상인
   표에 그 규칙을 쓰면 모든 셀이 세로로 풀려 매트릭스가 사라진다.
   그래서 별도 클래스를 둔다 — 기존 표는 한 줄도 바뀌지 않는다.
     · 좁은 화면에서는 래퍼가 가로 스크롤(본문(body)은 절대 가로로 밀리지 않는다)
     · 첫 열(등급명)은 sticky 로 남겨 스크롤 중에도 어느 행인지 보이게 한다
   ========================================================================== */
.v2g-gtwrap{
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-top:14px; border:1px solid var(--line); border-radius:13px;
}
.v2g-gtable{
    width:100%; min-width:560px; border-collapse:separate; border-spacing:0;
    table-layout:auto; background:#fff;
}
.v2g-gtable th, .v2g-gtable td{
    padding:11px 13px; border-bottom:1px solid var(--line);
    text-align:left; font-size:13.5px; line-height:1.7; color:var(--sub);
    vertical-align:top; word-break:keep-all;
}
.v2g-gtable thead th{
    background:#fafaff; color:var(--ink); font-weight:800; font-size:13px;
    white-space:nowrap;
}
.v2g-gtable tbody th{
    background:#fff; color:var(--ink); font-weight:800; white-space:nowrap;
    position:sticky; left:0; z-index:1; border-right:1px solid var(--line);
}
.v2g-gtable tr:last-child th, .v2g-gtable tr:last-child td{border-bottom:0;}
.v2g-gtnote{margin-top:10px; font-size:12.5px; line-height:1.7; color:var(--sub);}
@media (max-width:479px){
    .v2g-gtable th, .v2g-gtable td{padding:10px 11px; font-size:13px;}
}