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

/* ③ 제목 형광펜 없애기 + 개수 배지 → 회색 글자 */
.hl-pen { text-decoration: none !important; padding: 0 !important; background: none !important; }
.trend-badge, .bb-badge { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 0 0 6px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; }

/* ② 제목 두 번째 줄 주황 큰 글씨 → 회색 보조 문구 */
.h1-tail { color: var(--ink-soft) !important; font-size: .56em !important; font-weight: 500 !important; margin-top: 10px !important; letter-spacing: -0.01em !important; }
.bb-h2-sub { color: var(--ink-soft) !important; font-size: 15px !important; font-weight: 500 !important; margin-top: 4px !important; }


/* ⑤ '어디서 쓰나' 상자 → 구분선 */
.fa { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 6px !important; }

/* 팔 때/살 때 이동 상자 2칸 → 상자 없는 두 칸 줄 (방향색은 머리글에만) */
.gc-jump { gap: 0 !important; border-top: 1px solid var(--line-soft) !important; border-bottom: 1px solid var(--line-soft) !important; }
.gcj { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 6px !important; }
.gcj.is-buy { border-left: 1px solid var(--line-soft) !important; padding-left: 20px !important; }


/* 방문·등기 접힌 상자 → 구분선 */
.visit-box { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }

/* 살 때 — 결제수단별 카드 → 목록 (가장 싼 값 하나만 파랑) */
.bb-list { gap: 0 !important; border-top: 1px solid var(--ink) !important; }
.bb-row, .bb-row.is-cheap { 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; padding-left: 6px !important; padding-right: 6px !important; }
.bb-row:hover { background: var(--surface-2) !important; }
.bb-tag { background: none !important; border: 0 !important; padding: 0 0 0 4px !important; color: var(--ink-faint) !important; font-weight: 500 !important; }
.bb-num b { color: var(--ink) !important; }
.bb-row.is-cheap .bb-num b { color: var(--buy) !important; }

/* 기간 최저/최고 작은 카드 → 구분선 */
.bb-stats, .trend-stats { gap: 0 !important; border-top: 1px solid var(--line-soft) !important; border-bottom: 1px solid var(--line-soft) !important; }
.bb-stats > div, .trend-stats > div { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.bb-stats > div + div, .trend-stats > div + div { border-left: 1px solid var(--line-soft) !important; }

/* ② 금액권표 — 숫자 검정, 색은 열 머리글에만 */
.denom-table td.denom-sell, .denom-table td.denom-buy { color: var(--ink) !important; }
.denom-table td { border-bottom-color: var(--line-soft) !important; }
.denom-table th:nth-child(2) { color: var(--accent-dark) !important; }
.denom-table th:nth-child(3) { color: var(--buy) !important; }
.denom-calc-line a { color: var(--ink) !important; }

/* 1~10위 차 상자, 팩트 카드 → 구분선 */
.fact-figs { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
.fact-card { 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; padding: 18px 6px !important; }
.ff-cap + .fact-card { border-top: 1px solid var(--ink) !important; margin-top: 8px !important; }

/* 칩 줄 → 상자 없는 글자 줄 */
.channel-chips .cc-chip, .related-chip { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 14px 6px 0 !important; color: var(--ink) !important; font-weight: 600 !important; }
.related-chip { font-weight: 500 !important; }
.hub-compare-btn { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 6px !important; padding-right: 6px !important; }
.hub-compare-arrow { color: var(--ink) !important; }

/* 매입 최고가 / 구매 최저가 허브 카드 2장 → 구분선 */
.bsq { box-shadow: none !important; gap: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; }
.bsq-btn { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.bsq-btn.buy { border-left: 1px solid var(--line-soft) !important; }

/* 공식 정보 상자 3개 → 구분선, 주황 소제목 → 검정 */
.info-block { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 6px !important; margin: 0 !important; }
.info-block + .info-block { border-top: 1px solid var(--line-soft) !important; }
.cat-block h4 { color: var(--ink) !important; }

/* 본문 설명 큰 상자 + 접는 상자 → 평평하게 */
.seo-content { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.seo-fold { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; margin: 0 !important; }
.seo-content h3 + .seo-fold, .seo-content p + .seo-fold { border-top: 1px solid var(--ink) !important; margin-top: 16px !important; }

/* 약관 회색 상자 → 평평하게, dt 주황 → 검정 */
.terms-sec { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.terms-sec .section-title { padding-left: 0 !important; margin-left: 0 !important; }
.terms-list { border-top: 1px solid var(--ink) !important; padding-top: 0 !important; }
.terms-row { border-bottom: 1px solid var(--line-soft) !important; padding: 10px 6px !important; margin: 0 !important; }
.terms-row dt { color: var(--ink) !important; }

/* FAQ 상자 → 구분선 */
.faq { gap: 0 !important; }
.faq details { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.faq details:first-child { border-top: 1px solid var(--ink) !important; }
.faq details a { color: var(--ink) !important; }

/* ② 온라인 상품권 오늘 매입가 표 — 숫자 검정, 1위 값만 주황 */
.gsib-rank, .gsib-rank.top { color: var(--ink-faint) !important; background: transparent !important; border-bottom-color: var(--line-soft) !important; }
.gsib-name, .gsib-rate { background: transparent !important; border-bottom-color: var(--line-soft) !important; }
.gsib-rate, .gsib-rate .num-unit { color: var(--ink) !important; }
.gsib-tbl tr:first-child .gsib-rate, .gsib-tbl tr:first-child .gsib-rate .num-unit { color: var(--accent-dark) !important; }
.gsib-self { color: var(--ink) !important; font-weight: 700 !important; }

/* 관련 가이드 — 목록 맨 위 1px 검정 */
.rl-wrap { border-top: 1px solid var(--ink) !important; }

/* 레일 — 장식 숫자 검정, 색은 열 머리글에만 */
.rlc-sv, .rlc-bv { color: var(--ink) !important; }
.rlc-cs { color: var(--accent-dark) !important; }
.rlc-cb { color: var(--buy) !important; }

/* ===== 2026-09-29 PC 다듬기 — 디자인 시스템 맞춤 ===== */
/* 1. 제목 — h2 22px·700, 부제 13px 회색, h3 16px */
#main-content .section-title, #main-content .bb-h2, #main-content .bb-h3, #main-content .gsib-h, #main-content .seo-content > h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
#main-content .section-title .hl-pen, #main-content .gsib-h { font-weight: 700 !important; }
#main-content .title-sub { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; margin-top: 4px !important; }
#main-content .bb-h2-sub { display: inline !important; margin: 0 0 0 8px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; letter-spacing: 0 !important; }
#main-content .bb-sub { margin-top: 4px !important; font-size: 13px !important; color: var(--ink-faint) !important; }
#main-content .seo-content h3, #main-content .info-block h3 { font-size: 16px !important; font-weight: 700 !important; }
#main-content .gsib-h { margin: 0 0 12px !important; align-items: baseline !important; }
#main-content .gsib-cap { margin-left: 0 !important; }


/* 금액권표 — 상자·회색 머리글 배경 걷기, 머리글 12px·500 (열 색은 유지) */
#main-content .denom-table { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; border-collapse: collapse !important; }
#main-content .denom-table th { background: transparent !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 10px 6px !important; }
#main-content .denom-table td { padding: 12px 6px !important; }
#main-content .denom-table tr:hover td { background: var(--surface-2) !important; }

/* 온라인 상품권 오늘 매입가 — 흰 상자·그림자 걷고 데이터 표 규칙 */
#main-content .gsib-card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
#main-content .gsib-rank { padding-left: 6px !important; }
#main-content .gsib-rate { padding-right: 6px !important; }
#main-content .gsib-name, #main-content .gsib-rank, #main-content .gsib-rate { padding-top: 12px !important; padding-bottom: 12px !important; }

/* 2. 표가 아닌 목록·요약의 맨 윗선은 1px 회색 */
#main-content .fa, #main-content .fact-figs, #main-content .ff-cap + .fact-card, #main-content .hub-compare-btn, #main-content .bsq,
#main-content .info-block, #main-content .terms-list, #main-content .rl-wrap { border-top-color: var(--line) !important; }
#main-content .seo-content h3 + .seo-fold, #main-content .seo-content p + .seo-fold { border-top: 1px solid var(--line) !important; }
#main-content .faq details:first-child { border-top: 1px solid var(--line) !important; }
/* 이중선 — '어디서 쓰나' 아랫선 + 팔 때/살 때 윗선 → 하나만 */
#main-content .fa { border-bottom: 0 !important; margin-bottom: 20px !important; }
/* 구매가 추이 위의 가는 선 → 여백으로 구분 */
#main-content .bb-trend { border-top: 0 !important; margin-top: 40px !important; padding-top: 0 !important; }

/* 6. 칩 줄 — 14px·500, 간격 20px */
#main-content .channel-chips .cc-chip, #main-content .related-chip { font-size: 14px !important; font-weight: 500 !important; padding: 6px 0 !important; margin-right: 20px !important; }
#main-content .channel-chips .cc-chip:hover, #main-content .related-chip:hover { text-decoration: underline; text-underline-offset: 4px; }

/* FAQ — 질문 16px·600, 좌우 6px, 행 사이 연한 선 */
#main-content .faq details { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .faq summary { font-size: 16px !important; padding-left: 6px !important; padding-right: 6px !important; }

/* 8. 여백 — 계산기 버튼 뒤, 접는 글 뒤 간격 맞춤 */
#main-content .gc-calc-row { margin-bottom: 26px !important; }
#main-content .seo-content { padding-bottom: 0 !important; }
#main-content .terms-sec { padding-top: 0 !important; }
#main-content .section-title { margin-top: 34px !important; margin-bottom: 12px !important; }
#main-content .bb-h2 { margin-top: 12px !important; }
#main-content .gsib { margin-top: 30px !important; }

/* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 히어로(.hero-card)·매입 TOP5·구매 TOP5(.rate-table, 행·1위 바탕·최고가 배지·막대·더 보기 줄 포함)를 겨냥한 규칙은 모두 지웠습니다(원래 카드로 복귀). */

/* ===== 2026-09-29 GS "시세 순위·주요 카드는 웜크림 카드 유지" — 팔 때/살 때 두 칸·매입/구매 TOP5·결제수단별 최저가·추이 2개·금액권표·매입 최고가/구매 최저가 두 칸·온라인 상품권 오늘 매입가를 카드로 ===== */
#main-content .gc-jump, #main-content .bb-list, #main-content .bsq, #main-content .gsib-card {
  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 .bb-list > .bb-row:last-child { border-bottom: 0 !important; }
/* 두 칸 카드(팔 때/살 때, 매입 최고가/구매 최저가) — 가운데 세로선만 */
#main-content .gc-jump, #main-content .bsq { padding: 0 !important; }
#main-content .gcj { padding: 16px 20px 15px !important; }
#main-content .gcj.is-buy { padding-left: 20px !important; }
#main-content .bsq-btn { padding: 16px 20px 15px !important; }
/* 금액권표 — 표 자체를 카드로 (collapse 풀고 모서리 둥글게) */
#main-content .denom-table { background: var(--cream) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; border-collapse: separate !important; border-spacing: 0 !important; padding: 4px 16px !important; overflow: hidden !important; }
#main-content .denom-table tbody tr:last-child td { border-bottom: 0 !important; }
/* 추이 2개 — 그래프(윗칸)+기간 최고/최저(아랫칸)를 한 장의 카드로 이어 붙임 */
#main-content .bb-chart, #main-content .trend-chart { background: var(--cream) !important; border: 1px solid var(--line) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; padding: 16px 16px 8px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
#main-content .bb-stats, #main-content .trend-stats { background: var(--cream) !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--line-soft) !important; border-radius: 0 0 16px 16px !important; margin-top: 0 !important; overflow: hidden !important; }
#main-content .bb-stats + .bb-cap, #main-content .trend-stats + .gc-verdict { margin-top: 12px !important; }

/* ===== 2026-09-29 GS "주요 카드 1~3개만 웜크림" — gc 는 히어로 + 매입 TOP5 + 구매 TOP5 만 카드. 나머지(팔 때/살 때·결제수단·추이 2개·금액권표·최고/최저 두 칸·온라인 상품권 순위)는 다시 평평하게 ===== */
#main-content .gc-jump, #main-content .bb-list, #main-content .bsq, #main-content .gsib-card, #main-content .denom-table,
#main-content .bb-chart, #main-content .trend-chart, #main-content .bb-stats, #main-content .trend-stats {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
/* 목록 맨 윗선 1px 회색, 행 사이 연한 선 */
#main-content .gc-jump { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; } /* 윗 '어디서 쓰나' 는 아랫선이 없어 이중선 아님 */
#main-content .bb-list, #main-content .gsib-card, #main-content .denom-table { border-top: 1px solid var(--line) !important; }
#main-content .bsq { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .bb-list > .bb-row:last-child { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .denom-table { border-collapse: collapse !important; }
#main-content .gcj { padding: 12px 6px !important; }
#main-content .gcj.is-buy { padding-left: 20px !important; }
#main-content .bsq-btn { padding: 16px 18px 14px !important; }
/* 추이 — 그래프는 맨바닥, 기간 최고/최저는 연한 선 위아래 */
#main-content .bb-chart { margin-bottom: 8px !important; }
#main-content .trend-chart { padding: 4px 0 2px !important; }
#main-content .trend-stats { margin-top: 8px !important; }
#main-content .bb-stats, #main-content .trend-stats { border-top: 1px solid var(--line-soft) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .bb-stats + .bb-cap, #main-content .trend-stats + .gc-verdict { margin-top: 8px !important; }