/* === 기름값 비교사이트 전용 스타일 === */
/* 테마: 다크 프리미엄 (히어로/차트) + 라이트 (콘텐츠) */
/* 메인 컬러: #E65100 (딥 오렌지) */

/* ========== Global Reset & Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'Pretendard', sans-serif; background: #f8f9fa; color: #333; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ========== 네비게이션 ========== */
.site-nav {
  background: #fff; border-bottom: 1px solid #eee;
  padding: 10px 16px; position: sticky; top: 0; z-index: 100;
}
.site-nav-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav-logo {
  font-size: 15px; font-weight: 700; color: #333;
  text-decoration: none;
}
.site-nav-links {
  display: flex; gap: 12px;
}
.site-nav-links a {
  font-size: 14px; color: #666; text-decoration: none; font-weight: 500;
}
.site-nav-links a:hover { color: #E65100; }

/* ========== 히어로 섹션 ========== */
.gas-hero {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: #fff; padding: 32px 20px; text-align: center;
}
.gas-hero h1 {
  font-size: 22px; font-weight: 800; line-height: 1.4; margin-bottom: 8px;
}
.gas-hero-subtitle {
  font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6;
}
.gas-hero-accent {
  color: #FF8A65; font-weight: 700;
}
.gas-hero-desc {
  font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px;
}
.gas-hero-bar {
  width: 40px; height: 3px; background: #E65100;
  margin: 16px auto 0; border-radius: 2px;
}

/* ========== 메인 콘텐츠 래퍼 ========== */
.gas-content {
  max-width: 640px; margin: 0 auto; padding: 0 16px;
}

/* ========== 섹션 타이틀 ========== */
.nf-section-title {
  font-size: 16px; font-weight: 700; color: #333;
  margin: 24px 0 12px; padding-left: 10px;
  border-left: 3px solid #E65100;
  line-height: 1;
}
.gas-chart-section .nf-section-title {
  color: #fff;
}

/* ========== 가격 날짜 ========== */
.gas-price-date {
  font-size: 11px; color: #999; text-align: center;
  margin: -4px 0 12px;
}

/* ========== 가격 카드 (메인 히어로) ========== */
.gas-hero-card {
  background: linear-gradient(135deg, #E65100, #FF6D00);
  border-radius: 16px; padding: 20px; color: #fff;
  position: relative; overflow: hidden; text-align: center;
}
.gas-hero-card::after {
  content: ''; position: absolute; top: -20px; right: -20px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.gas-hero-card-label {
  font-size: 12px; font-weight: 600; opacity: 0.85;
}
.gas-hero-card-price {
  font-size: 28px; font-weight: 800; margin: 6px 0 4px;
  line-height: 1; position: relative; z-index: 1;
}
.gas-hero-card-price small {
  font-size: 13px; font-weight: 400; opacity: 0.7;
}
.gas-hero-card-diff {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.2); padding: 3px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  position: relative; z-index: 1;
}

/* ========== 가격 카드 (서브 2x2) ========== */
.gas-sub-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 10px;
}
.gas-sub-card {
  background: #fff; border-radius: 12px; padding: 12px;
  border: 1px solid #eee; text-align: center;
}
.gas-sub-label {
  font-size: 11px; color: #888; font-weight: 500;
}
.gas-sub-price {
  font-size: 16px; font-weight: 700; color: #333; margin: 3px 0 2px;
}
.gas-sub-diff {
  font-size: 11px; font-weight: 500;
}

/* ========== 가격 등락 색상 ========== */
.price-up { color: #e53935; }
.price-down { color: #1565c0; }
.price-same { color: #999; }

/* ========== 차트 섹션 (다크) ========== */
.gas-chart-section {
  padding: 16px; background: #1a1a2e;
  border-radius: 16px; margin-top: 16px;
}
.gas-chart-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.gas-tab {
  padding: 6px 14px; border-radius: 16px;
  font-size: 12px; font-weight: 600;
  background: #2a2a3a; color: #888;
  border: none; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gas-tab:hover { color: #bbb; }
.gas-tab.active {
  background: #E65100; color: #fff;
}
/* 라이트 배경에서의 탭 */
.gas-region-section .gas-tab,
.gas-top10-section .gas-tab {
  background: #f0f0f0; color: #888;
}
.gas-region-section .gas-tab:hover,
.gas-top10-section .gas-tab:hover { color: #555; }
.gas-region-section .gas-tab.active,
.gas-top10-section .gas-tab.active {
  background: #E65100; color: #fff;
}

.gas-chart-wrap {
  position: relative; width: 100%;
}
.gas-chart-wrap canvas {
  width: 100% !important; height: auto !important;
}
.gas-chart-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); font-size: 13px;
}
.gas-chart-info {
  display: flex; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gas-chart-info-item {
  text-align: center; flex: 1;
}
.gas-chart-info-label {
  display: block;
  font-size: 10px; color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.gas-chart-info-val {
  font-size: 14px; font-weight: 700; color: #FF8A65;
}

/* ========== 지역별 섹션 ========== */
.gas-region-section {
  margin-top: 20px;
}

/* JS가 생성하는 지역별 카드 그리드 */
.region-c { margin-top: 4px; }
.region-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.region-card {
  background: #fff; border-radius: 10px; padding: 10px;
  text-align: center; border: 1px solid #eee;
  position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.region-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.region-card.best {
  border-color: #43A047; background: #f1f8e9;
}
.region-card.worst {
  border-color: #E53935; background: #fce4ec;
}
.rc-rank {
  position: absolute; top: -8px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.rc-name {
  font-size: 12px; font-weight: 600; color: #555;
}
.rc-price {
  font-size: 15px; font-weight: 800; color: #333;
  margin: 3px 0;
}
.rc-diff {
  font-size: 10px;
}

/* ========== TOP 10 섹션 ========== */
.gas-top10-section {
  margin-top: 20px;
}
.gas-top10-controls {
  margin-bottom: 10px;
}
.gas-select {
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid #ddd; font-size: 13px;
  width: 100%; margin-bottom: 10px;
  background: #fff; color: #333;
  appearance: auto;
}
.gas-select:focus {
  outline: none; border-color: #E65100;
}

/* JS가 생성하는 Top10 카드 그리드 */
.top10-b { margin-top: 4px; }
.station-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.st-card {
  background: #fff; border-radius: 12px; padding: 12px;
  border: 1px solid #eee; position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.st-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.st-card.gold {
  border-color: #E65100; border-width: 2px;
}
.st-rank {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #E65100; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.st-card.gold .st-rank {
  background: linear-gradient(135deg, #E65100, #FF6D00);
  box-shadow: 0 2px 6px rgba(230,81,0,0.3);
}
.st-brand {
  font-size: 10px; color: #888; margin-left: 28px;
  font-weight: 500;
}
.st-name {
  font-size: 13px; font-weight: 600; color: #333;
  margin: 4px 0 2px; line-height: 1.3;
}
.st-addr {
  font-size: 10px; color: #aaa; line-height: 1.4;
}
.st-price {
  font-size: 16px; font-weight: 800; color: #E65100;
  margin-top: 6px;
}

/* ========== CTA 배너 ========== */
.nf-cta-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 12px; padding: 16px; color: #fff;
  text-decoration: none; margin: 20px 0;
  transition: transform 0.15s;
}
.nf-cta-banner:hover {
  transform: translateY(-2px);
}
.nf-cta-icon {
  font-size: 28px; flex-shrink: 0;
}
.nf-cta-text {
  flex: 1;
}
.nf-cta-text strong {
  font-size: 14px; font-weight: 700; color: #fff;
  display: block; margin-bottom: 2px;
}
.nf-cta-text small {
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.nf-cta-arrow {
  font-size: 18px; color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* ========== 국제유가 위젯 ========== */
.gas-oil-section {
  margin: 20px 0;
}
.gas-oil-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 12px;
}
.gas-oil-card {
  border-radius: 12px; overflow: hidden;
  min-height: 180px;
}
.gas-oil-card .tradingview-widget-container {
  width: 100%; height: 100%;
}
.gas-oil-desc {
  font-size: 13px; line-height: 1.7; color: #555;
  margin-top: 12px;
}

/* ========== SEO 콘텐츠 ========== */
.nf-seo-section {
  margin: 24px 0; padding: 0;
}
.nf-seo-title {
  font-size: 18px; font-weight: 700; color: #333;
  padding-left: 12px; margin-bottom: 16px;
  border-left: 4px solid #E65100;
}
.nf-seo-section h3 {
  font-size: 15px; font-weight: 600; color: #444;
  margin-top: 16px; margin-bottom: 8px;
}
.nf-seo-section p {
  font-size: 14px; line-height: 1.8; color: #555;
  margin-bottom: 12px;
}

/* SEO 텍스트 강조 */
.nf-txt-b {
  font-weight: 700; color: #333;
}
.nf-txt-hl {
  background: linear-gradient(transparent 60%, rgba(230,81,0,0.15) 40%);
  font-weight: 600;
}
.nf-txt-ul {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(230,81,0,0.3);
}

/* ========== FAQ 섹션 ========== */
.nf-faq-item {
  margin-bottom: 8px;
}
.nf-faq-q {
  width: 100%; text-align: left; padding: 14px;
  background: #fff; border: 1px solid #eee;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #333; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.15s;
}
.nf-faq-q:hover { background: #fafafa; }
.nf-faq-arrow {
  font-size: 12px; color: #999;
  transition: transform 0.2s;
}
.nf-faq-arrow.open { transform: rotate(180deg); }
.nf-faq-a {
  display: none; padding: 12px 14px;
  font-size: 13px; line-height: 1.7; color: #555;
  background: #fafafa; border-radius: 0 0 10px 10px;
  border: 1px solid #eee; border-top: none;
}
.nf-faq-a.show {
  display: block;
}

/* ========== 광고 슬롯 ========== */
.nf-ad-slot {
  margin: 20px 0; text-align: center;
  min-height: 50px;
}
.nf-ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.nf-ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.nf-ad-slot:empty { display: none; }

/* ========== 면책 문구 ========== */
.nf-disclaimer {
  font-size: 11px; color: #999; text-align: center;
  padding: 16px; border-top: 1px solid #eee;
  margin-top: 20px; line-height: 1.6;
}

/* ========== 교차 추천 (크로스링크) ========== */
/* hub-common.css에서 대부분 처리, 오버라이드만 */

/* ========== 푸터 ========== */
.site-footer {
  background: #1a1a2e; color: rgba(255,255,255,0.5);
  padding: 20px 16px; text-align: center;
  font-size: 11px; line-height: 1.8;
}
.site-footer a {
  color: rgba(255,255,255,0.5); text-decoration: none;
  transition: color 0.15s;
}
.site-footer a:hover { color: #E65100; }
.site-footer-inner {
  max-width: 640px; margin: 0 auto;
}
.site-footer-links {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.site-footer-copy {
  font-size: 10px; color: rgba(255,255,255,0.3);
}

/* ========== 반응형 ========== */
@media (min-width: 768px) {
  .gas-hero h1 { font-size: 26px; }
  .gas-hero-card-price { font-size: 32px; }
  .region-grid { grid-template-columns: repeat(4, 1fr); }
  .station-cards { grid-template-columns: repeat(3, 1fr); }
}