/* PC 디자인 정리 (2026-09-29 GS 확정 시안 v5) — 가이드 /guide/[slug]
 * PC(768px 이상)에서만 읽힙니다: Base.astro 가 <link media="(min-width: 768px)"> 로 붙입니다. 모바일에는 영향 없음.
 * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고).
 * 방향: 형광펜 제거 · 순위/라벨 칩은 회색 글자 · 장식 목록·FAQ·칩 줄은 구분선으로 평평하게.
 *       페이지마다 주요 카드 1~3개는 원래 모양(웜크림·그림자·1위 강조) 그대로. 시세 숫자 주황·파랑은 유지.
 */
/* ===== 가이드(/guide/best-platform-comparison) PC 목업 — ②③④⑤ (시세 숫자 색은 전부 유지) ===== */

/* ② 분류 알약 "거래 방법" → 회색 작은 글자 */
#main-content .article-category { background: none !important; filter: none !important; padding: 0 !important; border-radius: 0 !important; color: var(--ink-faint) !important; font-weight: 600 !important; font-size: 12px !important; }

/* ④ + ② 한눈에 보기 — 그림자 상자 → 위 1px 선, 주황 알약 → 회색 라벨 */
#main-content .tldr-box { background: transparent !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 4px 4px !important; }
#main-content .tldr-badge { background: none !important; padding: 0 !important; border-radius: 0 !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0 !important; }


/* ⑤ 목차 — 회색 바탕 → 위 선, 주황 순번 → 검정 */
#main-content .toc { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
#main-content .toc-h2 .toc-link::before { color: var(--ink) !important; }


/* ② 본문 장식 주황 — 소제목 위 짧은 막대, 목록 점 → 검정/회색 */
#main-content .article-body h2::before { background: var(--ink) !important; }
#main-content .article-body ul > li::before { background: var(--ink-faint) !important; opacity: 1 !important; }

/* ⑤ FAQ 상자 → 구분선 */
#main-content .article-body .faq-list { border-top: 1px solid var(--line) !important; }
#main-content .article-body .faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
#main-content .article-body .faq-list { display: block !important; gap: 0 !important; }
#main-content .article-body .faq-q { padding-left: 4px !important; padding-right: 4px !important; }

/* ⑤ 관련 상품권 현재 시세 — 카드 2장 → 구분선 줄 (92%·85% 색 유지), 칩 줄 → 글자 줄 */
#main-content .rate-cards { gap: 0 !important; border-top: 1px solid var(--line) !important; }
#main-content .rate-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px !important; }
#main-content .rate-card:hover { background: var(--surface-2) !important; }
#main-content .rate-shops { border-top: 0 !important; gap: 0 !important; }
#main-content .rate-shop { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 12px !important; }
#main-content .rate-shops-lbl + .rate-shop { padding-left: 6px !important; }
#main-content .rate-shop + .rate-shop { border-left: 1px solid var(--line) !important; }

/* ④ 매입 최고가 / 할인 구매 최저가 — 그림자 상자 + 버튼 2개 → 상자 없는 두 칸 (방향 제목 색 유지) */
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 0 0 !important; margin: 22px 20px !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:first-child { text-align: left !important; padding-left: 4px !important; }
#main-content div[style*="shadow-card"] div[style*="grid-template-columns"] { gap: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content div[style*="shadow-card"] div[style*="grid-template-columns"] > a { border: 0 !important; border-radius: 0 !important; text-align: left !important; padding: 14px 6px 13px !important; }
#main-content div[style*="shadow-card"] div[style*="grid-template-columns"] > a + a { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content div[style*="shadow-card"] div[style*="grid-template-columns"] > a:hover { background: var(--surface-2) !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > a[href="/rates"] { text-align: left !important; padding-left: 4px !important; }

/* ⑤ 이 글 공유 — 회색 상자 → 위 구분선 (공유 버튼은 유지) */
#main-content .article-share { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 16px 4px 0 !important; }

/* ② 섹션 제목 옆 주황 아이콘 → 검정 */
#main-content .section-title svg { color: var(--ink) !important; }

/* ⑤ 인기 상품권 시세 — 카드 6장 → 구분선 2단 목록 (92% 등 색 유지) */
#main-content .popular-grid { gap: 0 !important; column-gap: 32px !important; }
#main-content .popular-grid { border-top: 1px solid var(--line) !important; margin: 0 20px !important; padding: 0 !important; }
#main-content .popular-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px !important; }
#main-content .popular-item:hover { background: var(--surface-2) !important; }

/* ===== 09-29 다듬기 — PC 디자인 시스템 맞춤 ===== */
/* 글 전체를 감싼 흰 카드 → 걷기 (다른 페이지처럼 바탕 위에 바로). 글 머리·본문 왼쪽 끝을 한 줄로 */
#main-content .article-page { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
#main-content .article-header { border-bottom: 0 !important; padding-bottom: 20px !important; }
#main-content .article-body { padding: 8px 20px 24px !important; }

/* 글 머리 블록(한눈에 보기 · 목차) — 같은 폭 · 블록 사이 24 · 선 겹침 없애기 */
#main-content .tldr-box { margin: 0 20px 24px !important; padding: 14px 4px 14px !important; }
#main-content .tldr-meta { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .toc { margin: 0 20px 24px !important; padding: 14px 4px !important; }

/* 본문 소제목 22/700 · 위 48 · 제목~내용 14 (짧은 막대 장식은 검정 그대로) */
#main-content .article-body h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 48px 0 14px !important; }
#main-content .article-body h3 { font-size: 16px !important; font-weight: 700 !important; }

/* 본문 표 — 큰 데이터 표 상자: 12px 모서리 · 1px 선 · 그림자 없음. 머리글 12/500 회색 */
#main-content .article-body .table-wrap { border-radius: 12px !important; border: 1px solid var(--line) !important; box-shadow: none !important; background: var(--surface) !important; margin: 24px 0 !important; }
#main-content .article-body th { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--line) !important; }
#main-content .article-body td { padding: 13px 14px !important; }
#main-content .article-body tr:hover td { background: var(--surface-2) !important; }

/* FAQ — 본문 폭에 맞춤 */
#main-content .article-body .faq-list { max-width: none !important; margin: 0 0 8px !important; }
#main-content .article-body .faq-q { padding-top: 13px !important; padding-bottom: 13px !important; }

/* 글 끝 위젯 — 제목은 소제목(16/700), 값은 오른쪽 끝 정렬 */
#main-content .rate-widget { margin-top: 24px !important; }
#main-content .rate-widget-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 12px !important; }
#main-content .rate-widget-title svg { color: var(--ink) !important; }
#main-content .rate-cards { display: block !important; }
#main-content .rate-card { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; column-gap: 16px !important; align-items: center !important; padding: 13px 4px !important; }
#main-content .rate-card-name { grid-column: 1 !important; grid-row: 1 !important; font-size: 14px !important; }
#main-content .rate-card-platform { grid-column: 1 !important; grid-row: 2 !important; margin: 2px 0 0 !important; font-size: 12px !important; color: var(--ink-faint) !important; }
#main-content .rate-card-rate { grid-column: 2 !important; grid-row: 1 / span 2 !important; text-align: right !important; font-size: 22px !important; }
#main-content .rate-card-cta { display: none !important; }
#main-content .rate-shops { margin-top: 12px !important; padding-top: 0 !important; align-items: center !important; }
#main-content .rate-shops-lbl { font-size: 13px !important; color: var(--ink-faint) !important; }
#main-content .rate-shop { font-size: 14px !important; padding: 2px 14px !important; }
#main-content .rate-shop + .rate-shop { border-left: 0 !important; background: linear-gradient(var(--line), var(--line)) left center / 1px 12px no-repeat !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) { margin: 48px 20px 0 !important; padding: 0 !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:first-child { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 12px !important; }
#main-content .article-share { margin: 48px 20px 0 !important; padding: 16px 4px 0 !important; border-top: 1px solid var(--line) !important; }
#main-content .article-share .share-text strong { font-size: 16px !important; font-weight: 700 !important; }
#main-content .article-body + .ad-slot, #main-content .article-page > .ad-slot { margin: 24px 20px 0 !important; }

/* 글 아래 섹션(관련 가이드 · 인기 시세) — 제목 22/700 · 섹션 사이 48 · 목록 윗선 1px line */
#main-content .article-page ~ .section { margin: 48px 0 0 !important; }
#main-content .section-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 0 20px 12px !important; padding: 0 !important; align-items: center !important; gap: 8px !important; }
#main-content .rl-wrap { margin: 0 20px !important; border-top: 1px solid var(--line) !important; column-gap: 32px !important; }
#main-content .rl-link { padding: 13px 4px !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rl-link:hover { background: var(--surface-2) !important; }
#main-content .rl-tag { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; background: none !important; padding: 0 !important; }
#main-content .rl-title { font-size: 14px !important; font-weight: 600 !important; }
#main-content .popular-item { padding: 13px 4px !important; }
#main-content .adfit-con { margin-top: 24px !important; }
#main-content div:has(> .rl-wrap) { padding: 0 !important; }
/* 글 머리 블록 — 아랫선 걷고 다음 블록 윗선 하나로 (24px 간격 평행선 두 줄 방지) */
#main-content .tldr-box, #main-content .toc { border-bottom: 0 !important; padding-bottom: 4px !important; }

/* ===== 09-29 GS "시세 순위표·주요 카드는 웜크림 카드 유지" (아래 "핵심 카드 1~3개" 블록이 다시 평평하게 덮음) ===== */
/* 글 끝: 관련 상품권 현재 시세 */
#main-content .rate-cards { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .rate-card { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rate-card:last-child { border-bottom: 0 !important; }
/* 매입 최고가 / 구매 최저가 두 칸 — 두 장의 카드 */
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; border: 0 !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) > a { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 14px 18px !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) > a:hover { background: var(--surface-2) !important; }
/* 인기 상품권 시세 */
#main-content .popular-grid { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .popular-item { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .popular-item:nth-child(odd):nth-last-child(-n+2), #main-content .popular-item:nth-child(odd):nth-last-child(-n+2) ~ .popular-item { border-bottom: 0 !important; }

/* ===== 09-29 GS "핵심 카드 1~3개만 웜크림" — 오늘 격차·매입가 추이만 카드, 나머지는 다시 평평하게 ===== */
/* 관련 상품권 현재 시세 */
#main-content .rate-cards { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .rate-card, #main-content .rate-card:last-child { border-bottom: 1px solid var(--line-soft) !important; }
/* 매입 최고가 / 구매 최저가 두 칸 */
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) { gap: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) > a { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 14px 6px 13px !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) > a + a { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content div[style*="shadow-card"]:has(a[href="/sell"]) > div:nth-child(2) > a:hover { background: var(--surface-2) !important; }
/* 인기 상품권 시세 */
#main-content .popular-grid { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
#main-content .popular-item, #main-content .popular-item:nth-child(odd):nth-last-child(-n+2), #main-content .popular-item:nth-child(odd):nth-last-child(-n+2) ~ .popular-item { border-bottom: 1px solid var(--line-soft) !important; }

/* 2026-09-29 GS "원래 모양 그대로" — 오늘 격차(.guide-live) · 매입가 추이(.guide-trend) 규칙은 지워 원래 카드로 */
/* 매입가 추이 — 원래는 흰 글 카드 안에서 좌우 끝까지(margin 0). 글 카드를 걷은 v4 폭에 맞춰 바깥 여백만 v4 그대로 */
#main-content .guide-trend { margin: 0 20px 24px !important; }