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

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

/* ② 제목 옆 금색 라벨 알약("1돈 환산", "62일 · 순금 팔 때", "36곳", "오늘 · 팔 때") → 회색 작은 글자 */
.gold-page .gold-h2-sub { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-left: 8px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; vertical-align: 1px !important; }

/* ④ 히어로 — 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로": 히어로 규칙 전부 걷음(원래 흰 카드·그림자·여백) */

/* ⑤ "오늘 팔 때 값은 최근 30일 중 가장 낮습니다" 크림 상자 → 상자 없는 한 줄 */
.gold-page .grank-line { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 4px 4px 14px !important; }

/* ⑤ 순도별 시세 · 품목별 폭 표 — 흰 상자 → 위 1px 검정 구분선 (숫자 색 유지) */
.gold-page .gold-note + .gtable-wrap { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 0 !important; }
.gold-page .gold-note + .gtable-wrap .gtable th[scope=row] { padding-left: 4px !important; }
.gold-page .gold-note + .gtable-wrap .gtable tbody tr:hover { background: var(--surface-2) !important; }

/* ⑤ 칩 줄(형태별·지역별) → 상자 없는 글자 줄. 장식 숫자(72·81…, 13, 돈·g) → 검정 */
.gold-page .gchip-rail { gap: 0 !important; padding: 0 !important; }
.gold-page .gchip-rail a { background: none !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important; padding: 4px 14px !important; font-weight: 600 !important; }
.gold-page .gchip-rail a:first-child { padding-left: 4px !important; }
.gold-page .gchip-rail a + a { border-left: 1px solid var(--line) !important; }
.gold-page .gchip-rail a:hover { background: none !important; text-decoration: underline !important; }
.gold-page .gchip-rail a em { color: var(--ink) !important; font-weight: 500 !important; }
.gold-page .gchip-rail a.gchip-all { color: var(--ink) !important; }

/* ⑤ 시세 출처 카드(.gold-sources)는 원래 모양 그대로 — 아래 평평 규칙은 국제 금시세(.gspot-sec) 카드에만 */
.gold-page .gspot-sec .src-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--ink) !important; }
.gold-page .gspot-sec .src-footer { background: transparent !important; border-top: 0 !important; border-bottom: 1px solid var(--line-soft) !important; text-align: left !important; padding: 12px 4px !important; }

/* 국제 금시세 — 같은 src-card 규칙 적용, 줄 들여쓰기만 맞춤 */
.gold-page .gspot-top, .gold-page .gspot-row { padding-left: 4px !important; }

/* 금 시세 계산기 — 크림 상자 → 구분선(입력칸·빠른 중량 버튼은 그대로) */
.gold-page .gcalc-box { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 16px 4px !important; }
.gold-page .gcalc-result { border-top: 1px solid var(--line-soft) !important; }

/* ⑤ + ② 금 팔 때 알아 둘 것 — 번호 카드 → 구분선, 장식 순번(금색 동그라미) → 검정 글자 */
.gold-page .gold-steps { gap: 0 !important; border-top: 1px solid var(--ink) !important; }
.gold-page .gold-steps li { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 16px 14px 36px !important; }
.gold-page .gold-steps li::before { background: none !important; color: var(--ink) !important; left: 4px !important; width: auto !important; font-size: 14px !important; }

/* 전화로 물어볼 것 — 크림 상자 → 구분선 */
.gold-page .gold-ask-cta { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--line-soft) !important; padding: 14px 4px !important; margin-top: 0 !important; }

/* ⑤ 이어서 볼 것 / 팔기 전에 읽을 것 — 흰 상자 목록 → 구분선 */
.gold-page .gold-next-list, .gold-page .gold-next > .gold-next-list--folded { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.gold-page .gold-next-list li { padding-left: 4px !important; }
.gold-page .gold-next-list li:last-child { border-bottom: 1px solid var(--line-soft) !important; }
.gold-page .gold-next-list li:hover { background: var(--surface-2) !important; }
.gold-page .gold-next-list li::after { border-color: var(--ink-faint) !important; }
.gold-page .gold-next > .gold-next-list--folded li:last-child { border-bottom: 1px solid var(--line-soft) !important; }
.gold-page .gold-next-fold { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
.gold-page .gold-next-fold summary { padding-left: 4px !important; }
.gold-page .gold-next-fold .gold-next-list { border-top: 0 !important; }

/* ⑤ FAQ 상자 → 구분선 */
.gold-page .gold-sec > .gold-h2 + .faq-item { border-top: 1px solid var(--ink) !important; }
.gold-page .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; }
.gold-page .faq-item[open] { border-color: var(--line-soft) !important; }
.gold-page .faq-q { padding-left: 4px !important; padding-right: 4px !important; }

/* ⑤ 시세보다의 다른 시세 — 카드 3장 → 구분선 (자매 사이트 이름색·아이콘은 유지) */
.gold-page .sis-list { gap: 0 !important; border-top: 1px solid var(--ink) !important; }
.gold-page .sis-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 12px 4px !important; }
.gold-page .sis-row:hover { background: var(--surface-2) !important; }

/* 국제 금시세 맨 아래 환율 기준 주석(금색 굵은 글씨) → 회색 보조 문구 — 시세 비교가 아닌 환산 기준 안내라서 */
.gold-page .gspot-sec .src-footer { color: var(--ink-faint) !important; font-weight: 500 !important; }

/* ======================================================================
   2026-09-29 다듬기 — PC 디자인 시스템에 맞춤 (색 결정은 위 그대로)
   ====================================================================== */

/* 1. 섹션 제목 22px·700, 옆 보조 글자 13px 회색·baseline, 섹션 사이 48px */
.gold-page .gold-h2, .gold-page .sis-h { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 0 0 12px !important; }
.gold-page .gold-h2 .gold-hl { font-weight: 700 !important; }
.gold-page .gold-h2-sub { vertical-align: baseline !important; margin-left: 8px !important; }
.gold-page .gold-h2 .gs-sub { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; margin-top: 2px !important; }
.gold-page .gold-sec, .gold-page .gold-sources { margin: 48px 0 !important; }
.gold-page .sis { margin-top: 48px !important; }
.gold-page .sis-h + p, .gold-page .sis-sub { margin-bottom: 12px !important; }

/* 2. 구분선 위계 — 데이터 표(순도별·출처·국제·품목별 폭)만 검정 윗선, 나머지 목록은 1px var(--line) */
.gold-page .gcalc-box,
.gold-page .gold-steps,
.gold-page .gold-next-list, .gold-page .gold-next > .gold-next-list--folded,
.gold-page .gold-sec > .gold-h2 + .faq-item,
.gold-page .sis-list { border-top-color: var(--line) !important; }
.gold-page .gold-next-fold .gold-next-list { border-top: 0 !important; }

/* 상자를 걷었으니 선이 표·목록과 같은 폭으로 — 히어로(680px)·한 줄 요약·전화 문구의 선 끝이 짧게 끊기던 것 */
.gold-page .grank-line, .gold-page .gold-ask-cta { max-width: none !important; }
.gold-page .grank-line { margin-top: 0 !important; padding: 14px 4px !important; }
.gold-page .gold-ask-cta a { margin-top: 2px !important; }

/* 3·4. 표 — 머리글 12px·500·회색(첫 칸도), 행 12px, 좌우 끝 4~6px */
.gold-page .gold-note + .gtable-wrap .gtable thead th { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; text-transform: none !important; background: none !important; padding: 10px 8px !important; border-bottom: 1px solid var(--line) !important; }
.gold-page .gold-note + .gtable-wrap .gtable th:first-child, .gold-page .gold-note + .gtable-wrap .gtable td:first-child { padding-left: 4px !important; }
.gold-page .gold-note + .gtable-wrap .gtable th:last-child, .gold-page .gold-note + .gtable-wrap .gtable td:last-child { padding-right: 6px !important; }
.gold-page .gold-note + .gtable-wrap .gtable tbody th, .gold-page .gold-note + .gtable-wrap .gtable tbody td { padding-top: 12px !important; padding-bottom: 12px !important; }

/* 목록 행 — 오른쪽 끝 6px (시세 출처 행은 원래대로) */
.gold-page .gspot-top { padding: 14px 6px 14px 4px !important; }
.gold-page .gspot-row { padding-right: 6px !important; }

/* 6. 칩 줄 — 글자 14px·500, 사이 세로선 12px(행 전체 높이 선 대신) */
.gold-page .gchip-rail a { font-size: 14px !important; font-weight: 500 !important; padding: 4px 10px !important; }
.gold-page .gchip-rail a:first-child { padding-left: 4px !important; }
.gold-page .gchip-rail a + a { border-left: 0 !important; background: linear-gradient(var(--line), var(--line)) no-repeat left center / 1px 12px !important; }
.gold-page .gchip-rail a.gchip-all { font-weight: 700 !important; }

/* FAQ 질문 글자 14px (다른 목록 행과 맞춤) */
.gold-page .faq-q { font-size: 14px !important; padding: 13px 4px !important; }

/* 8. 섹션 안 블록 간격 — 설명 문단 뒤 24px */
.gold-page .gold-sec > .gold-note:not(:last-child) { margin-bottom: 16px !important; }
.gold-page .gold-note + .gtable-wrap + .gold-note { margin-top: 12px !important; }


/* 2026-09-29 GS "시세 순위·주요 카드는 카드 유지" — 금은 흰 카드(var(--surface)). 숫자가 줄지어 나오는 덩어리만 카드로: 
   순도별 시세표·시세 출처 목록·국제 금시세·최근 흐름(62일)·계산기·품목별 고시처 폭 표. 읽을거리·링크·FAQ·칩 줄·팔 때 알아 둘 것·다른 시세(sis)는 평평하게. */
.gold-page .gold-note + .gtable-wrap,
.gold-page .gspot-sec .src-card,
.gold-page .gband,
.gold-page .gcalc-box { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 4px 16px !important; overflow: hidden !important; max-width: none !important; }
/* 카드 안: 맨 윗 검정선 없음(카드 테두리가 대신), 마지막 행 아랫선 없음 */
.gold-page .gold-note + .gtable-wrap .gtable tbody tr:last-child > * { border-bottom: 0 !important; }
.gold-page .gspot-rows > .gspot-row:last-child { border-bottom: 0 !important; }
/* 행 없는 카드(흐름 막대·계산기)는 안쪽 첫·끝 요소에 숨 쉴 틈 */
.gold-page .gband-track { margin-top: 16px !important; }
.gold-page .gband-say { margin-bottom: 14px !important; }
.gold-page .gcalc-box > :first-child { margin-top: 14px !important; }
.gold-page .gcalc-box > .gcalc-result { margin-bottom: 10px !important; }
/* 섹션 제목 ~ 카드 12px, 카드 ~ 설명 문단 12px */
.gold-page .gold-h2 + .gband, .gold-page .gold-h2 + .gcalc-box { margin-top: 0 !important; }
.gold-page .gold-sec > .gband + .gold-note, .gold-page .gold-sec > .gcalc-box + .gold-note, .gold-page .gspot-sec > .src-card + .gold-note { margin-top: 12px !important; }

/* 2026-09-29 GS 좁힘 "페이지당 핵심 카드 1~3개만" — 금: 히어로·순도별 시세표·시세 출처 7곳만 카드로 남기고
   국제 금시세·최근 흐름·계산기·품목별 고시처 폭 표는 다시 평평하게(배경 없음·테두리/모서리 없음·목록 윗선 1px var(--line)·행 사이 line-soft). */
.gold-page .gspot-sec .src-card,
.gold-page .gband,
.gold-page .gcalc-box,
.gold-page .gold-note + .gtable-wrap { background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.gold-page .gspot-sec .src-card { border-top: 1px solid var(--line) !important; padding: 0 !important; }
.gold-page .gspot-sec .src-footer { border-bottom: 1px solid var(--line-soft) !important; }
.gold-page .gband { padding: 2px 0 0 !important; }
.gold-page .gband-track { margin-top: 6px !important; }
.gold-page .gband-say { margin-bottom: 0 !important; }
.gold-page .gcalc-box { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 16px 4px !important; }
.gold-page .gcalc-box > :first-child { margin-top: 0 !important; }
.gold-page .gcalc-box > .gcalc-result { margin-bottom: 0 !important; }
.gold-page .gold-note + .gtable-wrap { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; padding: 0 !important; overflow-x: auto !important; }

/* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 히어로·순도별 시세표·시세 출처 카드를 겨냥한 규칙을 지워 원래 모양(흰 카드·그림자·행·여백)으로 돌림.
   국제 금시세·품목별 폭 표 등 v4에서 평평하게 둔 것은 위 규칙을 그 요소로만 좁혀 그대로 유지. */

/* 2026-10-03 GS "이런건 PC에서도 카드형으로 해줘야지" — 금 시세 계산기를 PC 에서도 카드로 되돌림.
   위(42·133·150·157줄)에서 구분선으로 평평하게 했던 계산기만 모바일과 같은 원래 모양(옅은 금빛 카드·그림자)으로.
   입력칸·버튼·결과 점선은 원래 스타일 그대로입니다. 다른 평평한 덩어리(국제 금시세·흐름·폭 표)는 건드리지 않습니다. */
.gold-page .gcalc-box { background: var(--warn-soft) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--shadow-card) !important; padding: 20px !important; overflow: visible !important; }
.gold-page .gcalc-result { border-top: 1px dashed var(--gold-line) !important; }