/* PC 디자인 정리 (2026-09-29 GS 확정 — 상품권 나머지 페이지 2차) — 채널 랜딩 /buy/card·phone·bank·visit · /sell/auto·visit
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 순위/라벨 칩은 회색 글자 · 장식 상자·칩 줄·목록은 구분선으로 평평하게. 주요 카드·로고 카드 그리드·시세 숫자 색·H1 부제는 그대로.
 */
/* ===== /sell/auto/ PC 시안 — 채널 랜딩 틀(/buy/card·phone·bank·visit, /sell/auto·visit 공통) (2026-09-29) ===== */
/* 남긴 주요 카드(원래 모양 그대로 — 규칙 없음): 지금 TOP3(.top3-grid/.top3-card)
 * H1 둘째 줄 주황 부제(.h1-sub)는 그대로. 시세 숫자 주황·파랑 그대로.
 * /buy/card·phone·bank 의 목록 행 '순위 보기' 줄 내림(w728.css)은 그대로 두고 상자만 걷습니다(칸·여백 규칙 안 씀).
 */

/* 섹션 제목 → 22/700, 제목~내용 12 */
#main-content .sec-title, #main-content .top3-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 0 0 12px !important; }

/* 머리 요약 칩(상품권 N종 · 거래소 N곳 · 최고/최저) → 상자 없는 회색 글자 줄 (강조 숫자 색은 그대로) */
#main-content .stat-chips { gap: 4px 18px !important; margin: 10px 0 2px !important; }
#main-content .stat-chip { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 13px !important; color: var(--ink-faint) !important; }
#main-content .stat-chip strong { font-weight: 700 !important; }

/* ⑤ 상품권별 최저/최고가 목록 — 줄마다 상자 → 구분선 (맨 윗선 var(--line)) */
#main-content .gc-list { gap: 0 !important; border-top: 1px solid var(--line) !important; }
#main-content .gc-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
#main-content .gc-row:hover { background: var(--surface-2) !important; }
#main-content .gc-off { border-left-color: var(--line-soft) !important; }

/* 라벨 알약(카드·휴대폰·무통장입금 / 공식 / 공식몰 / N곳 순위 ›) → 배경 없는 회색 작은 글자 */
#main-content .gc-list :is(.pay-badge, .off-badge, .gc-off-label, .gc-count) { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .gc-list .pay-badge { margin-right: 8px !important; }
#main-content .gc-list .gc-count:hover { background: none !important; color: var(--ink) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ⑤ 거래소 N곳 두 칸 목록 — 흰 상자 → 구분선, '구매 N종' 알약 → 회색 글자 */
#main-content .shop-list { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .shop-card { background: transparent !important; }
#main-content .shop-card:nth-child(n+3) { border-top-color: var(--line-soft) !important; }
#main-content .shop-card:nth-child(odd) { border-right-color: var(--line-soft) !important; padding-left: 6px !important; }
#main-content .shop-card:nth-child(even) { padding-right: 6px !important; }
#main-content .shop-card:hover { background: var(--surface-2) !important; }
#main-content .shop-list .off-badge { background: none !important; border: 0 !important; padding: 0 !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .shop-badge { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-weight: 500 !important; color: var(--ink-faint) !important; }

/* '나머지 N곳 더 보기' 상자 → 상자 없는 글자 줄 */
#main-content .more-shops { margin-top: 0 !important; }
#main-content .fold-summary { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 13px 6px !important; color: var(--ink-soft) !important; font-weight: 600 !important; }
#main-content .fold-summary:hover { background: var(--surface-2) !important; }
#main-content .fold-summary .fold-ic { color: var(--ink-faint) !important; }

/* 권역별 거래소 바로가기 — 상자 칩 격자 → 상자 없는 글자 줄 */
#main-content .area-grid { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; background: none !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 2px 0 !important; }
#main-content .area-chip { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 24px 11px 6px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ink) !important; text-align: left !important; }
#main-content .area-chip:hover { background: none !important; color: var(--ink) !important; text-decoration: underline; text-underline-offset: 4px; }

/* 체크리스트(/buy/phone 등) — 줄마다 상자 → 구분선 */
#main-content .check-list { gap: 0 !important; border-top: 1px solid var(--line) !important; }
#main-content .check-list li { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 13px 6px !important; }
#main-content .check-list li.ck-thin { border-bottom: 0 !important; padding: 10px 6px 0 !important; }

/* 안내 상자 → 구분선 위 글 */
#main-content .legal-note { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 6px 0 !important; }

/* 함께 보면 좋은 페이지 — 목록 맨 윗선 회색 */
#main-content .link-row-sec .rl-wrap { border-top: 1px solid var(--line) !important; }

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