/* PC 디자인 정리 (2026-09-29 GS 확정 — 상품권 나머지 페이지 2차) — 상품권 시세표 /rates (첫 표 '백화점'은 카드 그대로) * PC(768px 이상)에서만 읽힙니다: Base.astro 가 로 붙입니다. 모바일에는 영향 없음. * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고). * 방향: 순위/라벨 칩은 회색 글자 · 장식 상자·칩 줄·목록은 구분선으로 평평하게. 주요 카드·로고 카드 그리드·시세 숫자 색·H1 부제는 그대로. */ /* ===== /rates/ (상품권 시세표) PC 시안 — 2026-09-29 ===== * 남긴 주요 카드: 없음(분류별 시세표 10개는 /sell 의 분류별 시세표처럼 평평하게), 큰 CTA(계산 버튼)·검색창은 그대로. * 시세 숫자 주황·파랑, H1 주황 부제는 그대로. */ /* 매입 최고가 / 할인 구매 최저가 두 칸 — 상자 걷고 두 칸 줄 (gc 의 .bsq 와 같은 처리) */ #main-content .sb-ql-wrap { gap: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line-soft) !important; margin-top: 16px !important; margin-bottom: 8px !important; padding: 0 !important; } #main-content .sb-ql { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 18px 14px 6px !important; } #main-content .sb-ql-buy { border-left: 1px solid var(--line-soft) !important; padding-left: 20px !important; } #main-content .sb-ql:hover { background: var(--surface-2) !important; transform: none !important; } #main-content .sb-ql-t::after { content: " →"; color: var(--ink-faint); font-weight: 500; } #main-content .sb-ql-wrap { margin-left: 20px !important; margin-right: 20px !important; } /* 분류 칩 줄 → 상자 없는 글자 줄 (개수는 회색) */ #main-content .cat-nav { column-gap: 20px !important; row-gap: 2px !important; } #main-content .cat-chip { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ink) !important; } #main-content .cat-chip:hover { text-decoration: underline; text-underline-offset: 4px; background: none !important; } #main-content .cat-chip .cat-ic { color: var(--ink-faint) !important; } #main-content .cat-chip em { color: var(--ink-faint) !important; font-weight: 500 !important; font-size: 13px !important; margin-left: 4px !important; } /* 30일 ▲▼ 안내 상자 → 상자 없는 회색 글 */ #main-content .rt-trend-note { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 4px 0 !important; } /* 30일 변화 알약(▲▼) — 배경 걷고 글자만 (색은 그대로) */ #main-content .rate-trend { background: none !important; padding: 0 0 0 3px !important; border-radius: 0 !important; } /* 순위·라벨 칩("최고", "정가", 지역) → 회색 작은 글자 */ #main-content .rate-group:not(#department) :is(.rate-best-badge, .rate-list-tag, .rate-area) { background: none !important; border: 0 !important; padding: 0 0 0 4px !important; border-radius: 0 !important; color: var(--ink-faint) !important; font-weight: 500 !important; } #main-content .group-count { background: none !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink-faint) !important; } /* 섹션 제목 22/700, 개수 baseline */ #main-content .group-title, #main-content .hs-title, #main-content .section-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; margin: 0 0 12px !important; align-items: baseline !important; } #main-content .group-more { font-size: 13px !important; font-weight: 500 !important; color: var(--ink-soft) !important; } /* 분류별 시세표 10개 — 흰 카드 → 평평한 표 (윗선 1px line, 행 사이 line-soft) */ #main-content .rate-group:not(#department) .rate-table { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; } #main-content .rate-group:not(#department) .rate-table th, #main-content .rate-group:not(#department) .rate-table td { background: transparent !important; border-radius: 0 !important; } #main-content .rate-group:not(#department) .rate-table thead th { background: var(--bg) !important; font-size: 12px !important; font-weight: 500 !important; border-bottom: 1px solid var(--line) !important; } #main-content .rate-group:not(#department) .rate-table thead th::before { display: none !important; } #main-content .rate-group:not(#department) .rate-table td { border-bottom: 1px solid var(--line-soft) !important; } #main-content .rate-group:not(#department) .rate-table tbody tr:last-child td { border-bottom: 1px solid var(--line-soft) !important; } #main-content .rate-group:not(#department) .rate-table tbody tr:hover > * { background: var(--surface-2) !important; } #main-content .rate-group:not(#department) .rate-table th:first-child, #main-content .rate-group:not(#department) .rate-table td:first-child { padding-left: 6px !important; } /* 오른쪽 '거래소' 칸이 표 밖으로 9px 넘쳐 잘리던 것 — 칸 사이 10→6, 거래소 칸 82→78 */ #main-content .rate-sell .rate-won, #main-content .rate-buy .rate-won, #main-content .rt-th-sub { margin-left: 6px !important; } #main-content .rate-sell .rate-where, #main-content .rate-buy .rate-where, #main-content .rt-th-shop { margin-left: 6px !important; width: 78px !important; } #main-content .rate-group:not(#department) .rate-table td.rate-sell, #main-content .rate-group:not(#department) .rate-table td.rate-buy, #main-content .rate-group:not(#department) .rate-table thead th:not(.rt-gc) { padding-left: 4px !important; padding-right: 6px !important; } /* 다음에 볼 콘텐츠 — 목록 맨 윗선 */ #main-content .related-section .rl-wrap { border-top: 1px solid var(--line) !important; } /* 섹션 사이 여백 */ #main-content .rate-group { margin-bottom: 36px !important; } #main-content .hero-summary, #main-content .faq-section, #main-content .related-section { margin-top: 40px !important; } /* 머리글 세 줄(매입 최고 · 10만원권 · 거래소) 모두 12/500 회색 */ #main-content .rt-th-main, #main-content .rt-th-sub, #main-content .rt-th-shop { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; } /* 분류 제목 앞 장식 아이콘 주황 → 회색 */ #main-content .group-ic { color: var(--ink-soft) !important; }