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

/* ③ 제목 형광펜 없애기 */
.hl-pen { text-decoration: none !important; padding: 0 !important; }

/* ② 제목 안 주황 → 검정 */
#main-content .trc-h-name { color: var(--ink) !important; }

/* ④ 히어로 — 상품권 탭(상자) → 밑줄 탭, 대표 답 숫자 2개는 색 유지 */
#main-content .trc-chips { gap: 0 !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--line) !important; }
#main-content .trc-chip { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 10px 12px 9px !important; margin-bottom: -1px !important; color: var(--ink-faint) !important; }
#main-content .trc-chip[aria-selected=true] { border-bottom-color: var(--ink) !important; color: var(--ink) !important; font-weight: 700 !important; background: none !important; }

/* ④ 매입 최고가 / 구매 최저가 카드 2장 → 상자 없는 두 칸 */
#main-content .hero-ql-wrap { margin-top: 18px !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .hero-ql { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 14px 6px 13px !important; }
#main-content .hero-ql-buy { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .hero-ql:hover { background: var(--surface-2) !important; }
#main-content .hero-ql .ql-t::after { content: " →"; color: var(--ink-faint); font-weight: 500; }

/* ② + ⑤ 오늘의 시세 변화 — 흰 상자 → 구분선, 숫자 검정, 색은 열 머리글에만 */

/* ② + ⑤ 지금 인기 상품권 — 카드 상자 → 세로 구분선, 숫자 검정 */
#main-content .card-scroll { gap: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; margin: 0 20px !important; padding: 0 !important; }
#main-content .gc-card { background: transparent !important; border: 0 !important; border-left: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 18px 14px !important; }
#main-content .card-scroll > .gc-card:first-child { border-left: 0 !important; padding-left: 4px !important; }
#main-content .gc-card:hover { background: var(--surface-2) !important; }
#main-content .gc-best-val { color: var(--ink) !important; font-size: 26px !important; font-weight: 800 !important; }
#main-content .gc-rate-val, #main-content .gc-rate-val.buy-val { color: var(--ink-soft) !important; }
#main-content .card-scroll-wrap::after { bottom: 1px !important; right: 20px !important; }

/* ② 주요 상품권 시세표 — 분류 알약 → 회색 글자, 숫자 검정(열 머리글 색은 유지) */

/* ② + ⑤ 기프티콘 진입 — 크림 상자 → 구분선, 첫 줄(최저가 1위)만 파랑 */

/* ⑤ 시세 읽는 법 — 흰 상자 → 구분선 */
#main-content .editorial-inner > p { background: transparent !important; border-radius: 0 !important; border-top: 1px solid var(--ink) !important; padding: 16px 0 6px !important; }
#main-content .editorial-fold { background: transparent !important; border-radius: 0 !important; padding: 0 0 14px !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .editorial-fold summary { color: var(--ink) !important; }

/* ⑤ 가이드 카드 3장 → 상자 없는 3칸 */
#main-content .guide-list { gap: 0 !important; margin: 0 20px !important; padding: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .article-card { background: transparent !important; border: 0 !important; border-left: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .guide-list > .article-card:first-child { border-left: 0 !important; }
#main-content .guide-list > .article-card:first-child .article-body { padding-left: 4px !important; }
#main-content .article-card:hover { background: var(--surface-2) !important; }
#main-content .article-cat { font-size: 12px !important; color: var(--ink-faint) !important; }

/* ② 최근 갱신된 가이드 — 주황 분류 → 회색, 목록 맨 위 1px 검정 */
#main-content .rg-list { border-top: 1px solid var(--ink) !important; }
#main-content .rg-row { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .rg-cat { color: var(--ink-faint) !important; font-weight: 500 !important; }

/* ⑤ FAQ 상자 → 구분선 */
#main-content .faq-wrap { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content .faq-item { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .faq-item summary, #main-content .faq-fold summary { padding-left: 4px !important; padding-right: 4px !important; }


/* 레일 — 장식용 주황 숫자만 검정 */
.rl-chip.is-hot em { color: var(--ink) !important; }
#main-content .faq-item, #main-content .faq-item summary, #main-content .faq-fold, #main-content .faq-fold summary { background: transparent !important; box-shadow: none !important; }

/* ===================================================================
   다듬기 (2026-09-29) — PC 디자인 시스템 맞춤
   =================================================================== */

/* 1. 섹션 제목 22/700/-0.02em · 위 48 · 아래 12, 옆 개수/기준일 13/500 faint baseline */
#main-content .section-title, #main-content .editorial-h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 48px 20px 12px !important; align-items: baseline !important; }
#main-content .editorial-h2 { margin: 48px 0 12px !important; }
#main-content .section-title .more-link, #main-content .section-sub { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }
#main-content .cp-basis { font-size: 13px !important; margin: -4px 20px 12px !important; }
#main-content .rate-summary-intro { margin: -4px 20px 14px !important; }
#main-content .section-title + .cp-basis { margin-top: -4px !important; }

/* 8. 섹션 사이 48 — 섹션 자체 여백은 0, 제목 위 48 로만 */
#main-content .hero { margin-bottom: 0 !important; }
#main-content > section:not(.hero) { margin-bottom: 0 !important; padding-top: 0 !important; }
#main-content .editorial-section { padding-top: 0 !important; }
#main-content > section[style], #main-content > section { background: transparent !important; }

/* 히어로 — 결과 판 크림 바탕 걷기, 빠른 링크 두 칸은 목록이라 윗선 회색 */
#main-content .hero-ql-wrap { border-top: 1px solid var(--line) !important; }

/* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 히어로 판(.trc-card)·오늘의 시세 변화(.cp-*)·주요 상품권 시세표(.rate-summary-*) 규칙을 모두 뺐습니다.
   (남긴 것: 오늘의 시세 변화 분류 뒤 " · " 버그 가리기 한 줄) */
#main-content .cp-cat::after { content: none !important; }

/* 지금 인기 상품권 — 카드 목록이라 윗선 회색 */
#main-content .card-scroll { border-top: 1px solid var(--line) !important; }

/* 회색 알약 버튼 → 다른 "전체 보기 →" 와 같은 글자 링크 */
#main-content .rate-cta { padding: 16px 20px 0 !important; }
#main-content .rc-t { background: none !important; padding: 0 !important; border-radius: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; }
#main-content .rc-t::after { content: " →" !important; }
#main-content .rc-t:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
#main-content .rc-s { flex-basis: auto !important; font-size: 13px !important; padding-left: 0 !important; }

/* 기프티콘 진입 — 상자 선 걷고 섹션처럼, 오른쪽 목록만 윗선 회색 */
#main-content > section.gt-entry { padding: 48px 20px 0 !important; }

/* 목록들 — 맨 윗선 회색 */
#main-content .editorial-inner > p { border-top: 1px solid var(--line) !important; }
#main-content .guide-list { border-top: 1px solid var(--line) !important; }
#main-content .rg-list { border-top: 1px solid var(--line) !important; }
#main-content .rg-row { padding: 12px 4px !important; }
#main-content .rg-row:hover { background: var(--surface-2) !important; }
#main-content .faq-wrap { border-top: 1px solid var(--line) !important; }
#main-content .faq-item summary { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 15px !important; }
#main-content .faq-item summary:hover { background: var(--surface-2) !important; }
#main-content section:has(> .faq-wrap) { padding: 0 !important; }



/* ===================================================================
   2026-09-29 GS "시세 순위나 주요 카드는 웜크림 배경 카드 유지" — 데이터 순위표·주요 카드만 다시 카드로
   (상품권 쪽 = var(--cream) · 1px var(--line) · radius 16 · 그림자 없음 · 안쪽 4px 16px · 맨 윗 검정선 없음)
   =================================================================== */
/* 매입 최고가 / 구매 최저가 두 칸 */
#main-content .hero-ql-wrap { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; overflow: hidden !important; }


/* 지금 인기 상품권 카드 줄 */
#main-content .card-scroll { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 4px 16px !important; }


/* 기프티콘 최저가 표 (오른쪽 3줄) */

/* 카드 줄 오른쪽 흐림 — 마스크가 카드 테두리까지 지워서, 테두리 안쪽 크림 그라데이션으로 대체 */
#main-content .card-scroll { -webkit-mask-image: none !important; mask-image: none !important; }
#main-content .card-scroll-wrap::after { top: 1px !important; bottom: 1px !important; right: 21px !important; width: 48px !important; border-radius: 0 15px 15px 0 !important; background: linear-gradient(90deg, transparent, var(--cream) 85%) !important; }

/* ===================================================================
   2026-09-29 GS 좁힘 — 웜크림 카드는 핵심 1~3개만: 히어로(.trc-card)·오늘의 시세 변화·주요 상품권 시세표.
   나머지(매입 최고가/구매 최저가 두 칸·인기 카드 줄·기프티콘 3줄·금·환전·기름값 칸)는 다시 평평하게.
   =================================================================== */
#main-content .hero-ql-wrap { 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; padding: 0 !important; overflow: visible !important; }

#main-content .card-scroll { 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; padding: 0 !important; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%) !important; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%) !important; }
#main-content .card-scroll-wrap::after { top: 0 !important; bottom: 1px !important; right: 20px !important; width: 40px !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent, var(--bg) 90%) !important; }




/* 2026-09-29 GS "이건 카드로" — 홈 기프티콘 최저가 묶음(.gt-entry-card·.gt-entry-picks)을 평평하게 하던 규칙을 지워 원래 카드로 */

/* ===================================================================
   2026-09-30 GS "이전에 배경색 있는 버전으로 · 내용·카드 줄이자" — 금·환전·기름값 띠의 PC 덧씌우기를 걷고
   모바일과 같은 색 띠(--gold-band·--fx-band·--oil-band)로 되돌립니다. 위 '#main-content > section { background: transparent }'
   규칙이 띠 색까지 지우므로 이 세 띠만 다시 칠합니다. 모양·여백은 index.astro 의 공통 규칙 하나로.
   =================================================================== */
#main-content > section.home-gold { background: var(--gold-band) !important; }
#main-content > section.home-fx { background: var(--fx-band) !important; }
#main-content > section.home-oil { background: var(--oil-band) !important; }