/* PC 디자인 정리 (2026-09-29 GS 확정 — 상품권 나머지 페이지 2차) — 할인 구매 메인 /buy
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 순위/라벨 칩은 회색 글자 · 장식 상자·칩 줄·목록은 구분선으로 평평하게. 주요 카드·로고 카드 그리드·시세 숫자 색·H1 부제는 그대로.
 */
/* ===== /buy/ (할인 구매 메인) PC 시안 — /sell/ 와 같은 틀이라 sell 시안 규칙을 그대로 옮김 (2026-09-29) =====
 * 남긴 주요 카드(원래 모양 그대로 — 규칙 없음): 지금 가장 싸게 살 수 있는 상품권 TOP5(.tb-grid/.tb-card), 가장 크게 갈리는 상품권 차액 표(.gapsec-card)
 * H1 둘째 줄 주황 부제(.h1-sub)는 그대로. 시세 숫자 파랑 그대로.
 */

/* ② 부제 속 강조 → 검정 */
#main-content .page-subtitle strong { color: var(--ink) !important; }

/* ⑤ 계좌이체 / 카드 / 휴대폰 / 방문·등기 상자 4칸 → 상자 없는 네 칸(구분선) */
#main-content .paynav { gap: 0 !important; padding: 14px 20px 18px !important; }
#main-content .paynav-link { background: none !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 13px 10px !important; font-size: 13px !important; color: var(--ink) !important; box-shadow: none !important; }
#main-content .paynav-link + .paynav-link { border-left: 1px solid var(--line-soft) !important; }
#main-content .paynav-link svg { color: var(--ink-faint) !important; }
#main-content .paynav-link:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
#main-content .paynav-link::after { content: " →"; color: var(--ink-faint); font-weight: 500; }

/* 섹션 제목 4종 → 22/700, 제목~내용 12 */
#main-content .tb-title, #main-content .gapsec-h, #main-content .ss-title, #main-content .ss-h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 0 0 12px !important; display: flex !important; align-items: baseline !important; gap: 8px !important; }
#main-content .ss-count { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .gapsec-h { margin-bottom: 6px !important; }
#main-content .gapsec-lead { margin: 0 0 14px !important; font-size: 13px !important; }

/* 섹션 사이 48 */
#main-content .top-band { margin-top: 40px !important; }
#main-content .gapsec, #main-content .buy-section, #main-content .buy-seo, #main-content .related-section, #main-content .buy-faq { margin-top: 48px !important; }

/* ⑤ 분류별 시세표 10개 — 흰 상자 → 평평한 표 (윗선 var(--line), 행 사이 line-soft, 구매율 파랑 숫자 유지) */
#main-content .ss-table { border-collapse: collapse !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#main-content .ss-table thead th { background: transparent !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; padding-top: 10px !important; padding-bottom: 9px !important; border-bottom: 1px solid var(--line) !important; vertical-align: bottom !important; }
#main-content .ss-table .th-denom { display: inline !important; margin-left: 3px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .ss-table th:first-child, #main-content .ss-table td:first-child { padding-left: 4px !important; }
#main-content .ss-table th:last-child, #main-content .ss-table td:last-child { padding-right: 4px !important; }
#main-content .ss-table tbody td { background: transparent !important; padding-top: 12px !important; padding-bottom: 12px !important; }
#main-content .ss-table tbody tr > * { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .ss-table tbody tr:hover > * { background: var(--surface-2) !important; }

/* 다음에 볼 콘텐츠 · FAQ — 목록 맨 윗선 회색 */
#main-content .related-section .rl-wrap { border-top: 1px solid var(--line) !important; }
#main-content .buy-faq .ss-h2 + .faq-item, #main-content .buy-faq .faq-item:first-of-type { border-top: 1px solid var(--line) !important; }
#main-content .faq-q { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 15px !important; }

/* 레일 — 장식용 주황 숫자만 검정 */
.rl-chip.is-hot em { color: var(--ink) !important; }