/* PC 디자인 정리 (2026-09-29 GS 확정 시안 v5) — 환전 /fx * PC(768px 이상)에서만 읽힙니다: Base.astro 가 로 붙입니다. 모바일에는 영향 없음. * 시안을 CSS 덧씌우기로 만든 그대로 옮겨서 !important 가 많습니다(원래 스타일을 이기려고). * 방향: 형광펜 제거 · 순위/라벨 칩은 회색 글자 · 장식 목록·FAQ·칩 줄은 구분선으로 평평하게. * 페이지마다 주요 카드 1~3개는 원래 모양(웜크림·그림자·1위 강조) 그대로. 시세 숫자 주황·파랑은 유지. */ /* ===== /fx/ PC 목업 — ②③④⑤ (환율·수수료 숫자의 파랑/주황은 전부 유지) ===== */ /* ③ 제목 형광펜(.fx-hl) 없애기 */ #main-content .fx-hl { text-decoration: none !important; padding: 0 !important; } /* ④ 히어로 — 상자 없애고 위 1px 검정 · 구분선. 대표 숫자 1,352원(파랑)은 유지 */ /* 바로가기 줄 — 큰 CTA(첫 버튼)는 유지, 나머지 알약 → 상자 없는 글자 링크 */ /* ⑤ 처음이면 이것만 — 흰 상자 → 구분선 (아이콘 타일은 유지) */ #main-content .fx-easy { 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: 14px 4px 16px !important; } /* ② + ⑤ 오늘의 판정 · 오늘 자리 — 파란 왼쪽 띠 상자 → 구분선, '오늘의 판정' 라벨 파랑 → 회색 */ #main-content .fx-verdict { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 4px !important; margin-bottom: 0 !important; } #main-content .fx-verdict::before { color: var(--ink-faint) !important; font-weight: 700 !important; } #main-content .fx-pos { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 12px 4px 14px !important; margin: 0 0 24px !important; } /* ⑤ 1,000달러 수수료 막대 — 흰 상자 → 구분선 (막대·앱 우대 파랑 값 유지) */ #main-content .fx-bars { 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; padding: 14px 4px !important; } /* ② + ⑤ 여행상품권 안내 — 주황 상자 → 구분선, 주황 제목 → 검정 (96.5%·3.5% 숫자 색은 유지) */ #main-content .fx-gift { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-soft) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 4px !important; } #main-content .fx-gift-h { color: var(--ink) !important; } /* 통화 격자(.fx-cards.v2)·은행 순위(.fx-rank) — 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로": 카드·행·순번 동그라미·배지 규칙 전부 걷음 */ /* ⑤ 링크 알약 줄 → 상자 없는 글자 줄 */ #main-content .fx-links { gap: 0 !important; } #main-content .fx-links a { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 4px 14px !important; color: var(--ink) !important; } #main-content .fx-links a:first-child { padding-left: 4px !important; } #main-content .fx-links a + a { border-left: 1px solid var(--line) !important; } #main-content .fx-links a:hover { background: none !important; text-decoration: underline !important; } /* ⑤ 우대율 표 — 테두리 상자 → 위 1px 검정. 90% 우대 줄의 파란 배경만 빼고 왼쪽 띠는 남김 */ #main-content .fx-tw { border: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; background: transparent !important; } #main-content .fx-tw tr > :first-child { background: transparent !important; box-shadow: none !important; padding-left: 4px !important; } #main-content .fx-tw tr.is-best th, #main-content .fx-tw tr.is-best td { background: transparent !important; } #main-content .fx-tw tbody tr.is-best > :first-child { box-shadow: inset 2px 0 0 var(--buy) !important; padding-left: 10px !important; } /* ⑤ 은행별 최대 우대율 — 로고 타일 16장 → 상자 없는 8칸 격자 (최대 90% 파랑 유지) */ #main-content .fx-bstrip { gap: 0 !important; border-top: 1px solid var(--ink) !important; } #main-content .fx-bstrip li { border-bottom: 1px solid var(--line-soft) !important; } #main-content .fx-bstrip a { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 4px 10px !important; } #main-content .fx-bstrip a:hover { background: var(--surface-2) !important; transform: none !important; box-shadow: none !important; } /* ⑤ 출처 3곳 — 카드 → 위 1px 검정, 세로 구분선 */ #main-content .fx-srcs { gap: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; } #main-content .fx-src { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 14px 16px !important; } #main-content .fx-srcs > .fx-src:first-child { padding-left: 4px !important; } #main-content .fx-src + .fx-src { border-left: 1px solid var(--line-soft) !important; } /* ⑤ 가이드 목록 → 구분선 */ #main-content .fx-glist { gap: 0 !important; border-top: 1px solid var(--ink) !important; } #main-content .fx-gcard { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 4px !important; } #main-content .fx-gcard:hover { background: var(--surface-2) !important; } /* ⑤ 더 자세히 보기 카드 10장 → 상자 없는 5칸 격자 */ #main-content .fx-cards.ico { gap: 0 !important; border-top: 1px solid var(--ink) !important; grid-template-columns: repeat(5, 1fr) !important; } #main-content .fx-cards.ico .fx-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-left: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 14px !important; } #main-content .fx-cards.ico > .fx-card:nth-child(5n+1) { border-left: 0 !important; padding-left: 4px !important; } #main-content .fx-cards.ico .fx-card:hover { background: var(--surface-2) !important; } /* ⑤ FAQ — 목록 맨 위 1px 검정 + 질문마다 가는 구분선 */ #main-content .fx-faq dl { border-top: 1px solid var(--ink) !important; margin-top: 10px !important; } #main-content .fx-faq dt { border-top: 1px solid var(--line-soft) !important; padding: 14px 4px 0 !important; margin-top: 0 !important; } #main-content .fx-faq dt:first-child { border-top: 0 !important; } #main-content .fx-faq dd { padding: 0 4px 14px !important; } /* ⑤ 시세보다의 다른 시세 — 카드 3장 → 구분선 (자매 사이트 이름색·아이콘 유지) */ #main-content .sis-list { gap: 0 !important; border-top: 1px solid var(--ink) !important; } #main-content .sis-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 12px 4px !important; } #main-content .sis-row:hover { background: var(--surface-2) !important; } /* ====================================================================== 2026-09-29 다듬기 — PC 디자인 시스템에 맞춤 (환율·수수료 숫자 파랑/주황 그대로) ====================================================================== */ /* 1. 섹션 제목 22px·700, 제목~내용 12px, 섹션 사이 48px */ #main-content .fx-sec > h2, #main-content .sis-h { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.35 !important; margin: 0 0 8px !important; } #main-content .fx-sec > h2 .fx-hl { font-weight: 700 !important; } #main-content .fx-sec > h2:last-child { margin-bottom: 0 !important; } #main-content .fx-sec > h2 + p, #main-content .sis-lead { margin-bottom: 12px !important; } #main-content .fx-sec { margin: 48px 0 !important; } #main-content .sis { margin-top: 48px !important; } /* '처음이면 이것만' 상자 제목은 소제목(16px·700) */ #main-content .fx-easy-h { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* 2. 구분선 위계 — 데이터(수수료 막대·통화 격자·은행 순위·우대율 표·은행 우대율 격자)만 검정 윗선 */ #main-content .fx-easy, #main-content .fx-srcs, #main-content .fx-glist, #main-content .fx-cards.ico, #main-content .fx-faq dl, #main-content .sis-list { border-top-color: var(--line) !important; } /* 히어로 아랫선 + '처음이면' 윗선이 16px 사이로 두 번 겹쳐 보이던 것 → 히어로 아랫선 없애고 붙임 */ #main-content .fx-easy { margin-bottom: 0 !important; } /* 통화 격자 아래 설명 간격 */ #main-content .fx-cards.v2 + .fx-note { margin-top: 14px !important; } /* 4. 우대율 표 머리글 12px·500·회색, 행 좌우 끝 4~6px */ #main-content .fx-tw thead th { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; background: none !important; text-transform: none !important; border-bottom: 1px solid var(--line) !important; } #main-content .fx-tw th:last-child, #main-content .fx-tw td:last-child { padding-right: 6px !important; } #main-content .fx-tw tbody td, #main-content .fx-tw tbody th { padding-top: 12px !important; padding-bottom: 12px !important; } /* 6. 링크 줄 — 글자 14px·500, 사이 세로선 12px */ #main-content .fx-links { margin-top: 4px !important; } #main-content .fx-links a { font-size: 14px !important; font-weight: 500 !important; padding: 4px 12px !important; } #main-content .fx-links a:first-child { padding-left: 4px !important; } #main-content .fx-links a + a { border-left: 0 !important; background: linear-gradient(var(--line), var(--line)) no-repeat left center / 1px 12px !important; } /* FAQ 질문 — 목록 행 제목 크기(14px·700)로, 행 간격 13px */ #main-content .fx-faq dt { font-size: 14px !important; font-weight: 700 !important; padding: 13px 4px 0 !important; } #main-content .fx-faq dd { padding: 0 4px 13px !important; margin-top: 4px !important; } /* 목록 행 좌우 끝 */ #main-content .fx-gcard { padding: 13px 6px 13px 4px !important; } #main-content .fx-srcs > .fx-src:last-child { padding-right: 6px !important; } /* 8. 블록 간격 — 표/목록 아래 설명 12px, 설명 아래 링크 줄 붙이기 */ #main-content .fx-sec > .fx-note { margin: 12px 0 0 !important; } #main-content .fx-sec > .fx-note + .fx-links { margin-top: 8px !important; } #main-content .fx-bars { margin: 0 !important; } #main-content .fx-srcs { margin: 0 !important; } #main-content .fx-bstrip { margin-bottom: 0 !important; } #main-content .fx-gift { margin-top: 24px !important; } /* 2026-09-29 GS "PC 히어로 카드 웜크림 배경 유지" — 히어로 카드는 카드로 둡니다(상품권=크림, 금·환전·기름값=원래 흰 카드). 그림자는 빼고 1px 선만. */ /* 2026-09-29 GS "시세 순위·주요 카드는 카드 유지" — 환전은 흰 카드(var(--surface)). 숫자가 줄지어 나오는 덩어리만 카드로: 1,000달러 수수료 막대·통화 12종 격자·은행 순위 TOP5·우대율 표·은행별 최대 우대율 격자·숫자 출처(3곳). 평평하게 둔 것: 처음이면 이것만·판정/자리 문단·여행상품권 안내·읽을 글·더 자세히 보기(링크 격자)·FAQ·다른 시세(sis). */ #main-content .fx-bars, #main-content .fx-tw, #main-content .fx-bstrip, #main-content .fx-srcs { 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; } /* 카드 안 마지막 행 아랫선 없음 */ #main-content .fx-tw tbody tr:last-child > * { border-bottom: 0 !important; } #main-content .fx-bstrip > li:nth-last-child(-n+8) { border-bottom: 0 !important; } /* 행 없는 막대 카드 — 위아래 숨 쉴 틈 */ #main-content .fx-bars > .fx-bar:first-child { margin-top: 14px !important; } #main-content .fx-bars > .fx-bar:last-child { margin-bottom: 14px !important; } /* 통화 격자: 카드 안에서 제목(p) 아래 12px */ #main-content .fx-cards.v2 { margin-top: 12px !important; } /* 출처 카드: 첫 칸 왼쪽 여백은 카드 안쪽 여백이 대신 */ #main-content .fx-srcs > .fx-src:first-child { padding-left: 4px !important; } /* 출처 카드 3칸 — 카드 안쪽 여백만큼 칸이 좁아져 "팔 / 때 1,335.91원"처럼 끊기던 것: 칸 좌우 여백 12px, 두 줄이면 균형 줄바꿈 */ #main-content .fx-srcs > .fx-src { padding-left: 12px !important; padding-right: 12px !important; } #main-content .fx-srcs > .fx-src:first-child { padding-left: 4px !important; } #main-content .fx-srcs > .fx-src:last-child { padding-right: 4px !important; } #main-content .fx-src-body > span { text-wrap: balance; } /* 2026-09-29 GS 좁힘 "페이지당 핵심 카드 1~3개만" — 환전: 히어로·은행 순위 TOP5·통화 12종 격자만 카드로 남기고 수수료 막대·우대율 표·은행별 우대율 격자·숫자 출처는 다시 평평하게(배경 없음·테두리/모서리 없음·목록 윗선 1px var(--line)·행 사이 line-soft). */ #main-content .fx-bars, #main-content .fx-tw, #main-content .fx-bstrip, #main-content .fx-srcs { background: transparent !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; padding: 0 !important; } #main-content .fx-bars, #main-content .fx-tw, #main-content .fx-srcs { border-bottom: 1px solid var(--line-soft) !important; } #main-content .fx-bars { padding: 14px 4px !important; overflow: visible !important; } #main-content .fx-bars > .fx-bar:first-child, #main-content .fx-bars > .fx-bar:last-child { margin: 0 !important; } #main-content .fx-tw { overflow-x: auto !important; } #main-content .fx-bstrip, #main-content .fx-srcs { overflow: visible !important; } #main-content .fx-bstrip > li:nth-last-child(-n+8) { border-bottom: 1px solid var(--line-soft) !important; } #main-content .fx-srcs > .fx-src { padding: 14px 16px !important; } #main-content .fx-srcs > .fx-src:first-child { padding-left: 4px !important; } #main-content .fx-srcs > .fx-src:last-child { padding-right: 6px !important; } /* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 은행 순위·통화 격자도 히어로처럼 규칙을 지워 원래 모양으로 돌림 */ /* 2026-09-29 — 환전 히어로(.fxh)는 GS 캡처대로 원래 모양(흰 카드·옅은 그림자·알약 버튼) 그대로 둡니다: 위에서 .fxh 규칙을 모두 뺐습니다 */