/* PC 디자인 정리 (2026-09-29 GS 확정 — 상품권 나머지 페이지 2차) — 분류 허브 /department /mobile /online /travel /mart /point /etc /mobile-department /department-gift
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 순위/라벨 칩은 회색 글자 · 장식 상자·칩 줄·목록은 구분선으로 평평하게. 주요 카드·로고 카드 그리드·시세 숫자 색·H1 부제는 그대로.
 */
/* ===== 분류 허브 (/department · /mobile · /online · /travel · /mart · /point · /etc · /mobile-department) PC 시안 — 2026-09-29 =====
 * 남긴 주요 카드(원래 모양 그대로): 시세 통계 표(.stat-table-wrap), 매입가·구매가 순위 카드(.hgr-card — 1위 원·'전체 시세 자세히' 버튼까지),
 *   시세 추이 카드 그리드(.trend-card — 상품권별 작은 카드 여러 장). 시세 숫자 주황·파랑, H1 은 그대로.
 */

/* 섹션 제목 — 22/700 으로 통일 (원래 24·20·17 이 섞여 있음) */
#main-content .hs-title, #main-content .section-title, #main-content .hgr-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; margin-bottom: 12px !important; }
#main-content .sec-sub, #main-content .stat-caption { font-size: 13px !important; color: var(--ink-faint) !important; margin-bottom: 12px !important; }

/* 매입 최고가 / 구매 최저가 두 칸 — 상자 걷고 두 칸 줄 (gc 와 같은 처리, 방향색 제목은 유지) */
#main-content .bsq { background: transparent !important; box-shadow: none !important; gap: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 0 !important; margin: 12px 20px 8px !important; }
#main-content .bsq-btn { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 18px 14px 6px !important; }
#main-content .bsq-btn.buy { border-left: 1px solid var(--line-soft) !important; padding-left: 20px !important; }
#main-content .bsq-btn:hover { background: var(--surface-2) !important; transform: none !important; }
#main-content .bsq-t::after { content: " →"; color: var(--ink-faint); font-weight: 500; }

/* 사용처 카드 5~10장 → 두 칸 목록(윗선 1px line, 행 사이 line-soft). '쇼핑·외식 한번에' 같은 알약 → 회색 작은 글자 */
#main-content .usage-list { gap: 0 32px !important; border-top: 1px solid var(--line) !important; }
#main-content .usage-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 6px !important; margin: 0 !important; }
#main-content .usage-item:hover { background: var(--surface-2) !important; transform: none !important; box-shadow: none !important; }
#main-content .usage-head { align-items: baseline !important; }
#main-content .usage-best, #main-content .usage-trade { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .usage-more { color: var(--ink-soft) !important; font-weight: 500 !important; }

/* 시세 추이 카드 안 변동 배지만 회색 글자 (카드 자체는 그대로) */
#main-content .trend-badge { background: none !important; padding: 0 !important; font-weight: 500 !important; color: var(--ink-faint) !important; }

/* 권역별 시세 — 흰 상자 걷고 목록 (윗선 1px line, 행 사이 line-soft). 권역 평균 주황 숫자는 그대로 */
#main-content .area-list { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
#main-content .area-row { background: transparent !important; border-bottom: 1px solid var(--line-soft) !important; padding-left: 6px !important; padding-right: 6px !important; }
#main-content .area-row:hover { background: var(--surface-2) !important; }
#main-content .area-rank { color: var(--ink-faint) !important; font-weight: 500 !important; }

/* 관련 가이드 작은 카드(모바일·온라인 등) → 상자 없는 목록 */
#main-content .guide-row { gap: 0 24px !important; border-top: 1px solid var(--line) !important; }
#main-content .guide-link { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 6px !important; }
#main-content .guide-link:hover { background: var(--surface-2) !important; transform: none !important; box-shadow: none !important; }
#main-content .guide-link svg { color: var(--ink-faint) !important; }

/* 다음에 볼 콘텐츠 — 목록 맨 윗선 */
#main-content .rl-wrap { border-top: 1px solid var(--line) !important; }