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

/* ③ 제목 형광펜 — 이 페이지엔 없음 */

/* ④ 히어로(.oil-hero 와 안쪽 추세 문장·보조 숫자 3칸·유종 5칸·버튼) — 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로": 규칙 전부 걷음 */
/* ⑤ 콜아웃(청록 그라데이션 상자) → 구분선, 제목·문장 강조 청록 → 검정 */
#main-content .oil-call { 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: 18px 6px 16px !important; margin-top: 28px !important; }
#main-content .oil-call > h2 { color: var(--ink) !important; }
#main-content .oil-call > p strong { color: var(--ink) !important; }

/* ⑤ 알약 링크 줄 → 상자 없는 글자 줄 (링크 청록은 유지) */
#main-content .oil-call-links, #main-content .oil-links, #main-content .oil-sec > p.oil-links { gap: 0 !important; }
#main-content .oil-call-links a, #main-content .oil-links a { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 3px 14px 3px 0 !important; font-size: 13px !important; font-weight: 700 !important; }
#main-content .oil-call-links a + a, #main-content .oil-links a + a { padding-left: 14px !important; border-left: 1px solid var(--line) !important; }
#main-content .oil-call-links a::after, #main-content .oil-links a::after { content: " →"; font-weight: 500; }
#main-content .oil-call-links a:hover, #main-content .oil-links a:hover { background: none !important; text-decoration: underline !important; }
/* 지역 16개 링크(더 자세히 보기 아래)는 여러 줄이라 세로 막대 대신 간격만 */
#main-content .oil-sec > div.oil-links { gap: 6px 22px !important; border-top: 1px solid var(--line-soft) !important; padding-top: 12px !important; }
#main-content .oil-sec > div.oil-links a { padding: 3px 0 !important; border-left: 0 !important; font-weight: 600 !important; }
#main-content .oil-sec > div.oil-links a::after { content: none !important; }

/* ⑤ 표 — 상자·머리 배경 → 구분선, 1위 줄 연청록 바탕 없앰 (숫자 색 유지)
   2026-09-29: 남긴 카드(시도별 평균표·가장 싼 주유소표)는 원래 모양 그대로 → 아래 표 규칙은 평평하게 둔 두 표(싼 동네 10곳·유종별)로만 좁힘 */
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) { border: 0 !important; border-top: 1px solid var(--ink) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) thead th { background: transparent !important; border-bottom: 1px solid var(--line) !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) th, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) td { border-bottom-color: var(--line-soft) !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr:last-child th, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr:last-child td { border-bottom: 1px solid var(--line-soft) !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr.is-best th, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr.is-best td { background: transparent !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr.is-best th { color: var(--ink) !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr:hover th, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr:hover td { background: var(--surface-2) !important; }

/* ② 순위 칩(회색 네모 · 1위 청록 네모) → 회색 작은 숫자 (평평한 표만) */
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) .oil-rk, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) .oil-rk.top { background: none !important; color: var(--ink-faint) !important; min-width: 18px !important; padding: 0 !important; margin-right: 8px !important; justify-content: flex-start !important; font-weight: 600 !important; }

/* ⑤ 점선 안내 상자 → 상자 없는 회색 메모 */
#main-content .oil-stamp, #main-content .oil-sec > p.oil-stamp { border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; color: var(--ink-faint) !important; }

/* ④ 40리터 아끼는 돈 — 카드 2장 → 상자 없는 두 칸 (1,105원 청록 · 4,460원 주황 유지) */
#main-content .oil-save { gap: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .oil-save-t { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 6px !important; }
#main-content .oil-save-t + .oil-save-t { border-left: 1px solid var(--line-soft) !important; padding-left: 18px !important; }
#main-content .oil-save-t:hover { background: var(--surface-2) !important; }
/* 상품권 할인 알약 → 글자 줄 (할인율 주황 유지) */
#main-content .oil-save-brands { gap: 0 !important; margin-top: 12px !important; }
#main-content .oil-save-brands a { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 2px 14px 2px 0 !important; font-size: 13px !important; color: var(--ink) !important; }
#main-content .oil-save-brands a + a { padding-left: 14px !important; border-left: 1px solid var(--line) !important; }
#main-content .oil-save-brands > span { margin-bottom: 4px; }

/* ⑤ 출처 상자 2개 → 구분선 목록 */
#main-content .oil-srcs { gap: 0 !important; border-top: 1px solid var(--ink) !important; }
#main-content .oil-src { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 13px 6px !important; }
#main-content a.oil-src:hover { background: var(--surface-2) !important; }

/* ⑤ 가이드 카드 목록 → 구분선 목록 */
#main-content .oil-glist { gap: 0 !important; grid-auto-rows: auto !important; border-top: 1px solid var(--ink) !important; }
#main-content .oil-gcard { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 6px !important; }
#main-content .oil-gcard:hover { background: var(--surface-2) !important; }

/* ⑤ FAQ 상자 → 구분선, 펼친 질문 청록 → 검정 */
#main-content .oil-faq { gap: 0 !important; border-top: 1px solid var(--ink) !important; }
#main-content .oil-faq details { border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; background: transparent !important; }
#main-content .oil-faq summary { padding: 14px 40px 14px 6px !important; font-size: 14px !important; }
#main-content .oil-faq details[open] summary { color: var(--ink) !important; }
#main-content .oil-faq p { padding: 0 6px 14px !important; }

/* ⑤ 더 자세히 보기 카드 6장 → 상자 없는 한 줄 6칸 */
#main-content .oil-cards { grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--line-soft) !important; }
#main-content .oil-card { background: transparent !important; border: 0 !important; border-left: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 14px 12px !important; }
#main-content .oil-cards > .oil-card:first-child { border-left: 0 !important; padding-left: 6px !important; }
#main-content .oil-card:hover { background: var(--surface-2) !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; box-shadow: none !important; padding: 12px 6px !important; }
#main-content .sis-row:hover { background: var(--surface-2) !important; }

/* ======================================================================
   2026-09-29 다듬기 — PC 디자인 시스템에 맞춤 (청록 시세 숫자·▲▼ 색 그대로)
   ====================================================================== */

/* 1. 섹션 제목 22px·700, 제목~내용 12px, 섹션 사이 48px */
#main-content .oil-sec > h2, #main-content .oil-call > 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 .oil-sec > h2 + p, #main-content .oil-sec > h2 + .oil-stamp, #main-content .sis-lead { margin-bottom: 12px !important; }
#main-content .oil-sec > h2:has(+ .oil-save, + .oil-srcs, + .oil-faq, + .oil-cards) { margin-bottom: 12px !important; }
#main-content .oil-sec { margin-top: 48px !important; }
#main-content .oil-call { margin-top: 48px !important; }
#main-content .sis { margin-top: 48px !important; }
#main-content .oil-cards { margin-top: 0 !important; }

/* 2. 구분선 위계 — 데이터 표(보조 숫자·시도·시군구·주유소·유종 표)만 검정 윗선, 나머지 목록은 1px var(--line) */
#main-content .oil-call, #main-content .oil-save, #main-content .oil-srcs, #main-content .oil-glist,
#main-content .oil-faq, #main-content .oil-cards, #main-content .sis-list { border-top-color: var(--line) !important; }
/* 콜아웃은 상자 없는 섹션이라 안쪽 들여쓰기 없이 다른 섹션과 같은 왼쪽 선에 */
#main-content .oil-call { padding: 16px 0 16px !important; }
#main-content .oil-call > h2, #main-content .oil-call > p { padding-left: 4px !important; padding-right: 4px !important; }

/* 4. 표 머리글 12px·500·회색, 행 12px, 좌우 끝 4~6px */
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) thead th { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-faint) !important; text-transform: none !important; padding: 10px 8px !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody th, #main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody td { padding: 12px 8px !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tr > :first-child { padding-left: 4px !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tr > :last-child { padding-right: 6px !important; }
/* 유종 표 — '휘발유보통휘발유'처럼 이름과 설명이 붙어 보이던 것 */
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) th.oil-2l small { margin-left: 6px !important; }

/* 6. 글자 링크 줄 — 14px·500, 사이 세로선 12px (링크 청록은 유지) */
#main-content .oil-call-links a, #main-content .oil-links a { font-size: 14px !important; font-weight: 500 !important; padding: 3px 12px 3px 0 !important; }
#main-content .oil-call-links a + a, #main-content .oil-links a + a { padding-left: 12px !important; border-left: 0 !important; background: linear-gradient(var(--line), var(--line)) no-repeat left center / 1px 12px !important; }
#main-content .oil-sec > div.oil-links { gap: 6px 20px !important; border-top: 0 !important; padding-top: 16px !important; }
#main-content .oil-sec > div.oil-links a { padding: 3px 0 !important; background: none !important; font-weight: 500 !important; }
#main-content .oil-save-brands a { font-size: 14px !important; font-weight: 500 !important; padding: 2px 12px 2px 0 !important; }
#main-content .oil-save-brands a + a { padding-left: 12px !important; border-left: 0 !important; background: linear-gradient(var(--line), var(--line)) no-repeat left center / 1px 12px !important; }
#main-content .oil-save-brands { padding-left: 0 !important; }
#main-content .oil-save-more { font-size: 14px !important; }
#main-content .oil-links, #main-content .oil-call-links { padding-left: 0 !important; }

/* 목록 행 — 세로 13px, 좌우 4~6px */
#main-content .oil-src { padding: 13px 6px 13px 4px !important; }
#main-content .oil-gcard { padding: 13px 6px 13px 4px !important; }
#main-content .oil-faq summary { padding: 13px 40px 13px 4px !important; }
#main-content .oil-faq p { padding: 0 4px 13px !important; }
#main-content .sis-row { padding: 12px 6px 12px 4px !important; }

/* 8. 블록 간격 — 표/목록 아래 설명 12px, 설명 아래 링크 8px */
#main-content .oil-sec > .oil-note { margin-top: 12px !important; }
#main-content .oil-sec > .oil-links:not(div) { margin-top: 12px !important; }
#main-content .oil-save-brands { margin-top: 16px !important; }

/* 2026-09-29 GS "시세 순위·주요 카드는 카드 유지" — 기름값은 흰 카드(var(--surface)). 숫자가 줄지어 나오는 덩어리만 카드로:
   시도별 휘발유 평균표·싼 동네 10곳·오늘 가장 싼 주유소·유종별 전국 평균표·40리터 아끼는 돈 두 칸·숫자 출처 목록.
   평평하게 둔 것: 12,148원 안내 문단·상품권 할인 줄·읽을 글·FAQ·더 자세히 보기(링크 격자)·지역 링크 줄·다른 시세(sis). */
#main-content .oil-save,
#main-content .oil-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 .oil-srcs > .oil-src:last-child { border-bottom: 0 !important; }

/* 2026-09-29 GS 좁힘 "페이지당 핵심 카드 1~3개만" — 기름값: 히어로·시도별 휘발유 평균표·오늘 가장 싼 주유소만 카드로 남기고
   싼 동네 10곳·유종별 표·40리터 두 칸·숫자 출처는 다시 평평하게(배경 없음·테두리/모서리 없음·목록 윗선 1px var(--line)·행 사이 line-soft). */
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw),
#main-content .oil-save,
#main-content .oil-srcs { background: transparent !important; border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--line) !important; padding: 0 !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) { overflow-x: auto !important; }
#main-content :is(.oil-tw:has(+ .oil-links), .oil-sec:has(> .oil-stamp) + .oil-sec > .oil-tw) tbody tr:last-child > * { border-bottom: 1px solid var(--line-soft) !important; }
#main-content .oil-save { border-bottom: 1px solid var(--line-soft) !important; overflow: visible !important; }
#main-content .oil-srcs { overflow: visible !important; }
#main-content .oil-srcs > .oil-src:last-child { border-bottom: 1px solid var(--line-soft) !important; }

/* 2026-09-29 GS "남긴 주요 카드는 원래 모양 그대로" — 히어로·시도별 평균표·가장 싼 주유소표를 겨냥한 규칙을 지워 원래 모양(흰 카드·그림자·1위 바탕·순위 칩)으로 돌림.
   싼 동네 10곳·유종별 표는 v4 그대로 평평 — 표 규칙을 :is(…) 로 그 두 표에만 좁혔습니다. */