:root{
  --fuel-bg-1:#051a31;
  --fuel-bg-2:#0b2a49;
  --fuel-bg-3:#11375a;
  --fuel-card:rgba(255,255,255,.08);
  --fuel-card-2:rgba(255,255,255,.05);
  --fuel-panel:#102743;
  --fuel-border:rgba(255,255,255,.12);
  --fuel-border-strong:rgba(120,199,255,.35);
  --fuel-text:#eef6ff;
  --fuel-sub:#b6cee8;
  --fuel-muted:#87a7c7;
  --fuel-brand:#2a89ff;
  --fuel-brand-2:#0f63d9;
  --fuel-shadow:0 18px 42px rgba(0,0,0,.28);
  --fuel-radius-xl:22px;
  --fuel-radius-lg:18px;
  --fuel-radius-md:14px;
  --fuel-radius-sm:12px;
}

html,
body{
  min-height:100%;
}

body.ooxoo-fuel-page{
  margin:0;
  color:var(--fuel-text);
  background:
    radial-gradient(circle at 15% 15%, rgba(60,140,255,.18), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(70,180,255,.14), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(80,160,255,.12), transparent 26%),
    linear-gradient(145deg,var(--fuel-bg-1),var(--fuel-bg-2) 45%,var(--fuel-bg-3));
}

body.ooxoo-fuel-page #page,
body.ooxoo-fuel-page .site,
body.ooxoo-fuel-page .site-content,
body.ooxoo-fuel-page .content-area,
body.ooxoo-fuel-page main{
  background:transparent !important;
}

body.ooxoo-fuel-page .ooxoo-page-shell,
body.ooxoo-fuel-page .ooxoo-page{
  box-sizing:border-box;
}

.ooxoo-fuel-page-shell{
  width:100%;
  padding:14px 12px 40px;
}

.ooxoo-fuel-wrap{
  width:100%;
  max-width:1050px;
  margin:0 auto;
}

.ooxoo-fuel-main > section + section,
.ooxoo-fuel-main > nav{
  margin-top:14px;
}

.ooxoo-fuel-top-header{
  width:100%;
  min-height:52px;
  margin:0 0 12px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.ooxoo-fuel-top-header .ooxoo-home-link{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%, -50%);
  text-decoration:none;
  color:var(--fuel-text);
}

.ooxoo-fuel-top-header .oox-logo-switch,
.ooxoo-fuel-top-header .oox-logo-en{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.ooxoo-fuel-top-header .oox-logo-en{
  font-size:34px;
  font-weight:900;
  letter-spacing:.05em;
  text-shadow:0 10px 24px rgba(0,0,0,.24);
}

.ooxoo-dashboard-actions-placeholder{
  width:84px;
  min-width:84px;
  opacity:0;
  pointer-events:none;
}

.ooxoo-beta-notice,
.ooxoo-location-topbar,
.ooxoo-fuel-hero-card,
.ooxoo-fuel-controls,
.ooxoo-empty,
.ooxoo-pagination,
.ooxoo-fuel-card{
  background:linear-gradient(180deg,var(--fuel-card),var(--fuel-card-2));
  border:1px solid var(--fuel-border);
  box-shadow:var(--fuel-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.ooxoo-beta-notice{
  margin:0 0 12px !important;
  padding:12px 14px !important;
  border-radius:var(--fuel-radius-md) !important;
  color:var(--fuel-text) !important;
  text-align:left !important;
}

.ooxoo-beta-notice *{
  color:inherit !important;
}

.ooxoo-location-topbar{
  margin:0 0 14px;
  padding:10px 12px;
  min-height:48px;
  border-radius:var(--fuel-radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--fuel-text);
  font-size:14px;
  font-weight:800;
  text-align:center;
}

.ooxoo-location-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.ooxoo-btn,
.ooxoo-icon-btn,
.fuel-tab,
.price-chip,
.ooxoo-summary-item,
.ooxoo-page-link,
.pill-check,
#ooxoo-fuel-sort,
#ooxoo-fuel-q{
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ooxoo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:var(--fuel-radius-sm);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-sizing:border-box;
}

.ooxoo-btn:hover,
.ooxoo-icon-btn:hover,
.fuel-tab:hover,
.price-chip:hover,
.ooxoo-summary-item:hover,
.ooxoo-page-link:hover,
.pill-check:hover{
  transform:translateY(-1px);
}


.ooxoo-btn[disabled],
.ooxoo-icon-btn[disabled],
.ooxoo-page-link[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
}


.ooxoo-btn-primary{
  color:#fff;
  background:linear-gradient(180deg,var(--fuel-brand),var(--fuel-brand-2));
  box-shadow:0 12px 24px rgba(20,110,220,.28);
}

.ooxoo-btn-ghost,
.ooxoo-icon-btn,
.pill-check,
#ooxoo-fuel-sort,
#ooxoo-fuel-q,
.ooxoo-page-link{
  color:var(--fuel-text);
  background:rgba(4,18,37,.55);
  border:1px solid rgba(255,255,255,.12);
}

.ooxoo-icon-btn{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.ooxoo-fuel-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--fuel-radius-xl);
  padding:20px 16px 16px;
}

.ooxoo-fuel-hero-card::before{
  content:"";
  position:absolute;
  top:12px;
  left:16px;
  right:16px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(120,199,255,.55), rgba(255,255,255,.08));
}

.ooxoo-fuel-hero-kicker{
  font-size:12px;
  font-weight:900;
  color:var(--fuel-sub);
  letter-spacing:.02em;
}

.ooxoo-fuel-hero-title{
  margin:6px 0 0;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:950;
  color:var(--fuel-text);
}

.ooxoo-fuel-hero-fuel-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}

.fuel-tab{
  min-height:42px;
  padding:0 8px;
  border-radius:14px;
  background:rgba(4,18,37,.58);
  border:1px solid rgba(255,255,255,.10);
  color:var(--fuel-sub);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.fuel-tab.is-active,
.fuel-tab[aria-selected="true"]{
  color:#fff;
  background:linear-gradient(135deg, rgba(44,113,255,.34), rgba(111,200,255,.18));
  border-color:var(--fuel-border-strong);
  box-shadow:0 10px 22px rgba(30,120,255,.15);
}

.ooxoo-fuel-hero-body{
  margin-top:16px;
}

.ooxoo-fuel-hero-loc{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:900;
  color:var(--fuel-sub);
}

.ooxoo-fuel-hero-price{
  margin-top:10px;
  min-height:48px;
  font-size:48px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.05em;
  color:#fff;
}

.ooxoo-fuel-hero-sub{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
  line-height:1.5;
  color:var(--fuel-sub);
  font-weight:800;
}

.ooxoo-fuel-hero-save{
  display:none;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}

.ooxoo-fuel-hero-cta{
  margin-top:14px;
}

.ooxoo-fuel-hero-cta .ooxoo-btn{
  width:100%;
  min-height:44px;
}

.ooxoo-fuel-summary-strip{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.ooxoo-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.ooxoo-summary-title{
  font-size:13px;
  font-weight:900;
  color:var(--fuel-text);
}

.ooxoo-summary-sub{
  font-size:12px;
  color:var(--fuel-sub);
  font-weight:800;
}

.ooxoo-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.ooxoo-summary-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:68px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(4,18,37,.48);
  color:var(--fuel-text);
  cursor:pointer;
}

.ooxoo-summary-item.is-active{
  background:linear-gradient(135deg, rgba(44,113,255,.32), rgba(111,200,255,.16));
  border-color:var(--fuel-border-strong);
}

.ooxoo-summary-item.is-loading{
  opacity:.75;
}

.ooxoo-summary-label{
  font-size:11px;
  font-weight:900;
  color:var(--fuel-muted);
}

.ooxoo-summary-value{
  margin-top:4px;
  font-size:18px;
  font-weight:950;
  color:#fff;
}

.ooxoo-fuel-controls{
  border-radius:var(--fuel-radius-lg);
  padding:16px;
}

.ooxoo-fuel-controls-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ooxoo-section-title{
  margin:0;
  font-size:28px;
  line-height:1.1;
  font-weight:950;
  color:#fff;
}

.ooxoo-section-sub{
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
  color:var(--fuel-sub);
  font-weight:800;
}

.ooxoo-fuel-controls-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ooxoo-fuel-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.filter-item{
  display:flex;
  align-items:center;
}

.filter-item.is-grow{
  flex:1 1 280px;
  min-width:220px;
}

.filter-sort{
  flex:0 0 112px;
}

#ooxoo-fuel-q,
#ooxoo-fuel-sort{
  width:100%;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  box-sizing:border-box;
  font-size:13px;
  font-weight:800;
  outline:none;
}

#ooxoo-fuel-q::placeholder{
  color:var(--fuel-muted);
}

#ooxoo-fuel-q:focus,
#ooxoo-fuel-sort:focus,
.pill-check:has(input:focus-visible){
  border-color:var(--fuel-border-strong);
  box-shadow:0 0 0 3px rgba(58,167,255,.12);
}

.pill-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}

.pill-check input{
  margin:0;
}

.ooxoo-list-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.ooxoo-fuel-card{
  border-radius:18px;
  padding:14px;
  min-height:168px;
  box-sizing:border-box;
}

.fuel-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.fuel-card-main{
  min-width:0;
  flex:1 1 auto;
}

.fuel-card-title-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.fuel-brand{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(42,137,255,.16);
  border:1px solid rgba(120,199,255,.18);
  color:#d6ebff;
  font-size:11px;
  font-weight:900;
}

.fuel-card-title{
  min-width:0;
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.02em;
  color:#fff;
  font-weight:950;
}

.fuel-card-addr{
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:var(--fuel-muted);
  word-break:break-word;
}

.fuel-card-distance,
.fuel-card-updated{
  font-size:12px;
  font-weight:900;
  color:var(--fuel-sub);
  white-space:nowrap;
}

.price-multi{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.price-chip{
  min-height:58px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  cursor:pointer;
}

.price-chip.is-active{
  background:linear-gradient(135deg, rgba(44,113,255,.32), rgba(111,200,255,.16));
  border-color:var(--fuel-border-strong);
}

.price-chip .label{
  font-size:10px;
  font-weight:900;
  color:var(--fuel-muted);
}

.price-chip .value{
  font-size:15px;
  line-height:1.1;
  font-weight:950;
  color:#fff;
}

.price-chip .unit{
  font-size:10px;
  font-weight:900;
  color:var(--fuel-sub);
}

.fuel-card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.fuel-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#d6ebff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.tag.is-muted{
  color:var(--fuel-muted);
}

.ooxoo-empty{
  border-radius:16px;
  padding:16px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:var(--fuel-sub);
}

.ooxoo-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:12px;
  border-radius:16px;
}

.ooxoo-page-link{
  min-width:36px;
  height:36px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.ooxoo-page-link.is-active{
  color:#fff;
  background:linear-gradient(180deg,var(--fuel-brand),var(--fuel-brand-2));
  border-color:rgba(255,255,255,.16);
}

.ooxoo-page-link[disabled]{
  opacity:.4;
  cursor:default;
  transform:none;
}

.ooxoo-page-ellipsis{
  padding:0 4px;
  color:var(--fuel-muted);
  font-weight:900;
}

.ooxoo-location-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}

.ooxoo-location-modal[aria-hidden="false"]{
  display:flex;
}

.ooxoo-location-modal .modal-box{
  width:min(380px, 92vw);
  padding:18px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.is-skeleton{
  position:relative;
  overflow:hidden;
}

.is-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-100%);
  animation:ooxooFuelShimmer 1.4s infinite;
}

.skeleton-line,
.skeleton-badge,
.skeleton-chip,
.skeleton-tag,
.skeleton-date{
  display:block;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.skeleton-title{
  width:58%;
  height:18px;
}

.skeleton-sub{
  width:84%;
  height:12px;
  margin-top:10px;
}

.skeleton-badge{
  width:54px;
  height:18px;
}

.skeleton-prices{
  margin-top:14px;
}

.skeleton-chip{
  width:100%;
  height:56px;
}

.skeleton-tags{
  display:flex;
  gap:6px;
}

.skeleton-tag{
  width:46px;
  height:24px;
}

.skeleton-date{
  width:88px;
  height:16px;
}

@keyframes ooxooFuelShimmer{
  100%{
    transform:translateX(100%);
  }
}

@media (max-width: 980px){
  .ooxoo-fuel-controls-row{
    flex-direction:column;
  }

  .ooxoo-fuel-controls-right{
    width:100%;
    justify-content:flex-start;
  }

  .ooxoo-list-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767px){
  .ooxoo-fuel-page-shell{
    padding:12px 10px 32px;
  }

  .ooxoo-fuel-top-header .oox-logo-en{
    font-size:30px;
  }

  .ooxoo-location-topbar{
    flex-wrap:wrap;
    padding:10px;
  }

  .ooxoo-fuel-hero-card,
  .ooxoo-fuel-controls,
  .ooxoo-fuel-card,
  .ooxoo-empty,
  .ooxoo-pagination{
    border-radius:16px;
  }

  .ooxoo-fuel-hero-card{
    padding:18px 14px 14px;
  }

  .ooxoo-fuel-hero-title{
    font-size:24px;
  }

  .ooxoo-fuel-hero-price{
    font-size:40px;
  }

  .ooxoo-fuel-hero-fuel-tabs,
  .ooxoo-summary-grid,
  .price-multi{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ooxoo-summary-head,
  .fuel-card-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .ooxoo-fuel-controls-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .ooxoo-fuel-controls-right .ooxoo-btn{
    width:100%;
  }

  .ooxoo-fuel-controls-right .ooxoo-btn:last-child{
    grid-column:1 / -1;
  }

  .filter-item.is-grow,
  .filter-sort,
  .filter-item{
    width:100%;
    flex:1 1 100%;
  }

  .pill-check{
    width:100%;
    justify-content:flex-start;
    border-radius:12px;
  }

  .price-chip{
    min-height:54px;
  }
}

@media (max-width: 420px){
  .ooxoo-fuel-hero-price{
    font-size:34px;
  }

  .ooxoo-section-title{
    font-size:24px;
  }

  .ooxoo-fuel-hero-fuel-tabs,
  .ooxoo-summary-grid{
    gap:6px;
  }
}


/* =========================================
   legacy compact fuel look (2026-04-15)
   - smaller fuel tabs
   - digit hero price
   - inline card prices (no inner blocks)
   ========================================= */

.ooxoo-fuel-summary-strip{
  display:none !important;
}

.ooxoo-fuel-hero-fuel-tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:14px !important;
}

.fuel-tab{
  min-width:0 !important;
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:-.01em;
}

.ooxoo-fuel-hero-price{
  display:flex !important;
  align-items:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-height:72px !important;
  margin-top:14px !important;
  font-size:0 !important;
  line-height:1 !important;
}

.hero-digit-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.hero-digit{
  width:52px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(56,103,255,.96), rgba(46,83,227,.92));
  box-shadow:0 10px 24px rgba(36,83,220,.28);
  color:#fff;
  font-size:30px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.03em;
}

.hero-unit{
  display:inline-flex;
  align-items:flex-end;
  height:54px;
  color:#fff;
  font-size:22px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.03em;
}

.hero-price-fallback{
  font-size:28px;
  font-weight:950;
  color:#fff;
  line-height:1;
}

.ooxoo-fuel-hero-sub{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
  margin-top:12px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--fuel-sub) !important;
}

.ooxoo-fuel-hero-save{
  display:block;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  color:var(--fuel-text) !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.ooxoo-fuel-card{
  padding:14px 14px 12px !important;
}

.fuel-card-top{
  align-items:flex-start !important;
  gap:12px !important;
  margin-bottom:10px !important;
}

.fuel-card-main{
  min-width:0;
  flex:1 1 auto;
}

.fuel-card-title-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.fuel-card-title{
  font-size:16px !important;
  line-height:1.25 !important;
  letter-spacing:-.02em;
}

.fuel-brand{
  padding:3px 8px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(120,199,255,.18) !important;
  color:#d9ebff !important;
  font-size:10px !important;
  font-weight:900 !important;
}

.fuel-card-addr{
  margin-top:6px !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

.fuel-card-distance{
  font-size:12px !important;
  font-weight:900 !important;
  white-space:nowrap;
}

.fuel-card-price-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.fuel-inline-price{
  appearance:none;
  -webkit-appearance:none;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:1px;
  text-align:left;
  cursor:pointer;
  color:var(--fuel-sub);
}

.fuel-inline-price:hover{
  transform:none !important;
  box-shadow:none !important;
}

.fuel-inline-label{
  font-size:11px;
  font-weight:900;
  color:var(--fuel-muted);
  line-height:1.1;
}

.fuel-inline-value{
  font-size:14px;
  font-weight:900;
  color:var(--fuel-text);
  line-height:1.1;
  letter-spacing:-.02em;
}

.fuel-inline-unit{
  font-size:10px;
  font-weight:900;
  color:var(--fuel-muted);
  line-height:1.1;
}

.fuel-inline-price.is-active .fuel-inline-label{
  color:#ffffff;
}

.fuel-inline-price.is-active .fuel-inline-value{
  font-size:20px;
  color:#ffffff;
}

.fuel-inline-price.is-active .fuel-inline-unit{
  color:#ffffff;
}

.fuel-card-bottom{
  margin-top:12px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fuel-tags{
  gap:6px !important;
}

.tag{
  font-size:11px !important;
  padding:4px 9px !important;
}

.fuel-card-updated{
  font-size:11px !important;
  font-weight:800 !important;
  color:var(--fuel-sub) !important;
  white-space:nowrap;
}

@media (max-width: 767px){
  .fuel-tab{
    min-height:34px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  .hero-digit{
    width:46px;
    height:48px;
    border-radius:12px;
    font-size:26px;
  }

  .hero-unit{
    height:48px;
    font-size:19px;
  }

  .ooxoo-fuel-hero-price{
    min-height:64px !important;
  }

  .fuel-card-price-strip{
    gap:8px;
  }

  .fuel-inline-label{
    font-size:10px;
  }

  .fuel-inline-value{
    font-size:13px;
  }

  .fuel-inline-price.is-active .fuel-inline-value{
    font-size:18px;
  }

  .fuel-inline-unit{
    font-size:9px;
  }
}


/* =========================================
   fuel page tune to match internal dashboard
   1) header/logo spacing + font
   2) centered compact notice
   3) slightly smaller hero text
   4) slightly smaller hero price
   5) map modal connected
   6) reduce footer gap
   7) footer color matches internal dashboard
   ========================================= */

body.ooxoo-fuel-page{
  min-height:100vh;
}

body.ooxoo-fuel-page .ooxoo-page-shell{
  padding:18px 14px 18px !important;
}

.ooxoo-fuel-wrap{
  max-width:1050px !important;
}

.ooxoo-fuel-top-header{
  max-width:1050px !important;
  margin:0 auto 12px !important;
  min-height:56px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  position:relative !important;
}

.ooxoo-fuel-top-header .ooxoo-home-link{
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
  color:var(--fuel-text) !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
}

.ooxoo-fuel-top-header .oox-logo-switch{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--fuel-text) !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-shadow:0 12px 28px rgba(0,0,0,.28) !important;
}

.ooxoo-fuel-top-header .oox-logo-en,
.ooxoo-fuel-top-header .oox-logo-ko{
  display:inline-block !important;
  line-height:1 !important;
  font-size:36px !important;
  font-weight:800 !important;
  color:var(--fuel-text) !important;
}

.ooxoo-fuel-top-header .oox-logo-ko{
  display:none !important;
}

.ooxoo-fuel-top-header .ooxoo-home-link:hover .oox-logo-en,
.ooxoo-fuel-top-header .ooxoo-home-link:focus-visible .oox-logo-en{
  display:none !important;
}

.ooxoo-fuel-top-header .ooxoo-home-link:hover .oox-logo-ko,
.ooxoo-fuel-top-header .ooxoo-home-link:focus-visible .oox-logo-ko{
  display:inline-block !important;
}

.ooxoo-dashboard-actions-placeholder{
  width:84px !important;
  min-width:84px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.ooxoo-beta-notice{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  margin:0 auto 12px !important;
  padding:12px 16px !important;
  text-align:center !important;
  line-height:1.5 !important;
  font-size:13px !important;
  font-weight:700 !important;
}

.ooxoo-beta-notice-line{
  width:100%;
  color:var(--fuel-text) !important;
}

.ooxoo-beta-notice-line--strong{
  font-weight:800 !important;
}

.ooxoo-fuel-hero-card{
  padding:18px 16px 14px !important;
}

.ooxoo-fuel-hero-card::before{
  top:14px !important;
  left:18px !important;
  right:18px !important;
}

.ooxoo-fuel-hero-kicker{
  font-size:11px !important;
}

.ooxoo-fuel-hero-title{
  margin-top:6px !important;
  font-size:26px !important;
  line-height:1.14 !important;
}

.ooxoo-fuel-hero-fuel-tabs{
  gap:7px !important;
  margin-top:13px !important;
}

.fuel-tab{
  min-height:34px !important;
  padding:0 11px !important;
  border-radius:12px !important;
  font-size:11px !important;
}

.ooxoo-fuel-hero-loc{
  font-size:13px !important;
}

.ooxoo-fuel-hero-price{
  margin-top:12px !important;
  min-height:66px !important;
}

.hero-digit-wrap{
  gap:6px !important;
}

.hero-digit{
  width:48px !important;
  height:50px !important;
  border-radius:13px !important;
  font-size:28px !important;
}

.hero-unit{
  height:50px !important;
  font-size:20px !important;
}

.hero-price-fallback{
  font-size:24px !important;
}

.ooxoo-fuel-hero-sub{
  margin-top:10px !important;
  font-size:12px !important;
}

.ooxoo-fuel-hero-save{
  font-size:12px !important;
}

.ooxoo-fuel-hero-cta{
  margin-top:12px !important;
}

.ooxoo-section-title{
  font-size:22px !important;
}

.ooxoo-section-sub{
  font-size:12px !important;
}

.ooxoo-fuel-controls-right .ooxoo-btn{
  min-height:38px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

#ooxoo-fuel-q,
#ooxoo-fuel-sort,
.pill-check{
  font-size:12px !important;
}

.fuel-card-title{
  font-size:15px !important;
}

.fuel-card-addr,
.fuel-card-distance,
.fuel-card-updated{
  font-size:11px !important;
}

.fuel-inline-label{
  font-size:10px !important;
}

.fuel-inline-value{
  font-size:13px !important;
}

.fuel-inline-price.is-active .fuel-inline-value{
  font-size:18px !important;
}

.fuel-inline-unit{
  font-size:9px !important;
}

#ooxoo-fuel-pagination:empty{
  display:none !important;
}

.ooxoo-pagination{
  margin-top:12px !important;
  margin-bottom:0 !important;
}

body.ooxoo-fuel-page footer,
body.ooxoo-fuel-page #colophon,
body.ooxoo-fuel-page .site-footer{
  margin-top:16px !important;
  padding-top:0 !important;
  background:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
  color:var(--fuel-muted) !important;
}

body.ooxoo-fuel-page footer *,
body.ooxoo-fuel-page #colophon *,
body.ooxoo-fuel-page .site-footer *{
  color:var(--fuel-muted) !important;
}

body.ooxoo-fuel-page footer a:hover,
body.ooxoo-fuel-page #colophon a:hover,
body.ooxoo-fuel-page .site-footer a:hover{
  color:var(--fuel-sub) !important;
}

body.ooxoo-fuel-page .ooxoo-page-shell + footer,
body.ooxoo-fuel-page .ooxoo-page-shell + #colophon{
  margin-top:14px !important;
}

body.ooxoo-modal-open{
  overflow:hidden;
}

.ooxoo-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10010;
}

.ooxoo-modal[aria-hidden="false"]{
  display:block;
}

.ooxoo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}

.ooxoo-modal-panel{
  position:relative;
  width:min(1050px, calc(100% - 24px));
  margin:32px auto;
  border-radius:20px;
  background:linear-gradient(180deg,var(--fuel-card),var(--fuel-card-2));
  border:1px solid var(--fuel-border);
  box-shadow:var(--fuel-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

.ooxoo-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ooxoo-modal-title{
  font-size:18px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
}

.ooxoo-modal-sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:var(--fuel-sub);
  font-weight:800;
}

.ooxoo-modal-close{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(4,18,37,.55);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.ooxoo-fuel-map-body{
  padding:14px 16px 16px;
}

.ooxoo-fuel-map-box{
  width:100%;
  height:min(68vh, 620px);
  border-radius:16px;
  overflow:hidden;
  background:#0b2038;
  border:1px solid rgba(255,255,255,.10);
}

.ooxoo-fuel-map-note{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  color:var(--fuel-sub);
  font-weight:700;
}

.ooxoo-map-popup-title{
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  color:#0f172a;
}

.ooxoo-map-popup-addr{
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:#475569;
}

.ooxoo-map-popup-price{
  margin-top:8px;
  display:flex;
  align-items:flex-end;
  gap:4px;
  color:#0f172a;
}

.ooxoo-map-popup-price .label{
  font-size:11px;
  font-weight:900;
  color:#2563eb;
}

.ooxoo-map-popup-price .value{
  font-size:17px;
  font-weight:900;
  line-height:1;
}

.ooxoo-map-popup-price .unit{
  font-size:11px;
  font-weight:800;
}

.ooxoo-map-popup-meta{
  margin-top:6px;
  font-size:11px;
  color:#64748b;
  line-height:1.4;
}

@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-page-shell{
    padding:14px 10px 14px !important;
  }

  .ooxoo-fuel-top-header .oox-logo-en,
  .ooxoo-fuel-top-header .oox-logo-ko{
    font-size:34px !important;
  }

  .ooxoo-beta-notice{
    font-size:12px !important;
    padding:11px 12px !important;
  }

  .ooxoo-fuel-hero-title{
    font-size:23px !important;
  }

  .hero-digit{
    width:44px !important;
    height:46px !important;
    font-size:25px !important;
  }

  .hero-unit{
    height:46px !important;
    font-size:18px !important;
  }

  .ooxoo-modal-panel{
    width:calc(100% - 14px);
    margin:12px auto;
  }

  .ooxoo-fuel-map-box{
    height:72vh;
  }
}


/* === 2026-04-15 fuel card / map nationwide / good station patch === */
.ooxoo-fuel-card{
  min-height:auto !important;
  padding:12px 14px !important;
}

.fuel-card-top{
  align-items:flex-start;
  gap:12px;
}

.fuel-card-main{
  min-width:0;
  flex:1 1 auto;
}

.fuel-card-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.fuel-brand-badge{
  width:22px;
  height:22px;
  min-width:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.fuel-brand-badge.is-fallback{
  background:rgba(42,137,255,.22);
  color:#dcebff;
}

.fuel-brand-logo{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}

.fuel-card-title{
  font-size:15px !important;
  line-height:1.28 !important;
}

.fuel-brand-text,
.fuel-kind-chip,
.fuel-good-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.fuel-brand-text{
  color:#9ec7f1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.fuel-kind-chip{
  color:#dcebff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.fuel-good-chip{
  color:#fff4e8;
  background:linear-gradient(180deg, rgba(255,138,0,.20), rgba(255,78,0,.12));
  border:1px solid rgba(255,166,95,.30);
}

.fuel-good-chip img{
  width:14px;
  height:14px;
  display:block;
}

.fuel-card-addr{
  margin-top:5px !important;
  padding-left:28px;
}

.fuel-card-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:110px;
}

.fuel-card-distance{
  font-size:12px !important;
  font-weight:900 !important;
}

.fuel-card-side-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.fuel-mini-action{
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:var(--fuel-text);
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.fuel-mini-action:hover{
  background:rgba(42,137,255,.18);
  border-color:rgba(120,199,255,.28);
}

.fuel-card-price-strip{
  margin-top:10px !important;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.fuel-inline-price{
  min-height:52px !important;
}

.fuel-card-meta{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

.fuel-card-updated{
  font-size:11px !important;
  color:var(--fuel-sub) !important;
}

.ooxoo-map-divicon{
  background:transparent !important;
  border:none !important;
}

.ooxoo-map-marker-bubble{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  color:#111827;
  white-space:nowrap;
}

.ooxoo-map-marker-bubble.is-focus{
  box-shadow:0 0 0 3px rgba(255,92,92,.18), 0 12px 28px rgba(15,23,42,.24);
  border-color:rgba(255,92,92,.38);
}

.ooxoo-map-marker-bubble .fuel-brand-badge{
  width:20px;
  height:20px;
  min-width:20px;
  border-color:rgba(15,23,42,.08);
  background:#fff;
  color:#3b4f6a;
}

.ooxoo-map-marker-prices{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.map-marker-price{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:900;
  color:#111827;
}

.map-marker-price .label{
  color:#2968d7;
}

.map-marker-price.is-active{
  color:#d22f2f;
}

.ooxoo-map-popup-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.ooxoo-map-popup-title-wrap{
  min-width:0;
  flex:1 1 auto;
}

.ooxoo-map-popup-title{
  font-size:14px;
  font-weight:900;
  color:#111827;
}

.ooxoo-map-popup-badges{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.ooxoo-map-popup-addr{
  margin-top:8px;
  font-size:12px;
  color:#64748b;
  line-height:1.45;
}

.ooxoo-map-popup-prices{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.map-price-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fbff;
  color:#111827;
  font-size:12px;
  font-weight:900;
}

.map-price-item .label{
  color:#2968d7;
}

.map-price-item .unit{
  color:#64748b;
  font-size:11px;
}

.map-price-item.is-active{
  background:#eef5ff;
  border-color:rgba(41,104,215,.24);
}

.ooxoo-map-popup-meta{
  margin-top:10px;
  font-size:12px;
  font-weight:800;
  color:#64748b;
}

@media (max-width: 860px){
  .fuel-card-top{
    flex-direction:column;
  }

  .fuel-card-side{
    width:100%;
    min-width:0;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .fuel-card-addr{
    padding-left:28px;
  }
}

@media (max-width: 640px){
  .fuel-card-price-strip{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .fuel-card-side{
    flex-direction:column;
    align-items:flex-start;
  }

  .fuel-card-side-actions{
    justify-content:flex-start;
  }

  .fuel-card-addr{
    padding-left:0;
  }
}


/* =========================================================
   FINAL COMPACT / GOOD MAP / MOBILE FILTER TUNE (2026-04-15)
   ========================================================= */
.ooxoo-fuel-hero-cta,
#ooxoo-fuel-scroll{display:none !important;}

.ooxoo-fuel-controls-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ooxoo-fuel-controls-right .ooxoo-btn{min-height:36px !important;padding:0 12px !important;border-radius:12px !important;}

.ooxoo-fuel-filters{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.ooxoo-fuel-filter-search-row{display:flex;align-items:center;gap:10px;min-width:0;}
.ooxoo-fuel-filter-search-row .filter-item.is-grow{flex:0 1 520px;min-width:0;}
.ooxoo-fuel-filter-search-row .filter-sort{flex:0 0 110px;min-width:110px;}
.ooxoo-fuel-filter-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ooxoo-fuel-filter-pills .filter-item{flex:0 0 auto;}
#ooxoo-fuel-q{width:100%;min-width:0;}
#ooxoo-fuel-sort{width:100%;}
.pill-check{min-height:34px !important;padding:0 10px !important;border-radius:999px !important;font-size:12px !important;gap:6px !important;white-space:nowrap;}
.pill-check input{margin:0;transform:none !important;}

.ooxoo-fuel-hero-card{padding:16px 16px 14px !important;}
.ooxoo-fuel-hero-title{font-size:24px !important;line-height:1.12 !important;}
.ooxoo-fuel-hero-price{min-height:58px !important;margin-top:10px !important;}
.hero-digit{width:44px !important;height:46px !important;font-size:26px !important;border-radius:12px !important;}
.hero-unit{height:46px !important;font-size:18px !important;}
.ooxoo-fuel-hero-sub{margin-top:8px !important;gap:4px !important;}

.ooxoo-btn-primary{background:linear-gradient(180deg,#1f6fd8,#1658b5) !important;box-shadow:0 10px 22px rgba(20,82,170,.24) !important;}
.ooxoo-btn-primary:hover{background:linear-gradient(180deg,#2879e1,#1a63c5) !important;}

.ooxoo-fuel-card{border-radius:18px !important;padding:12px 14px !important;min-height:auto !important;}
.fuel-card-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.fuel-brand-badge{width:24px;height:24px;min-width:24px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.10);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-size:10px;font-weight:900;line-height:1;}
.fuel-brand-badge.is-fallback{background:rgba(255,255,255,.08);color:#c7dbf4;}
.fuel-brand-logo{width:16px;height:16px;display:block;object-fit:contain;}
.fuel-card-title{font-size:15px !important;line-height:1.22 !important;letter-spacing:-.02em;min-width:0;}
.fuel-kind-chip,.fuel-good-chip{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:900;line-height:1;white-space:nowrap;}
.fuel-kind-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#dcebff;}
.fuel-good-chip{background:linear-gradient(180deg, rgba(255,138,0,.20), rgba(255,78,0,.12));border:1px solid rgba(255,166,95,.30);color:#fff4e8;}
.fuel-good-chip img{width:14px;height:14px;display:block;}
.fuel-good-chip.is-map{min-height:20px;padding:0 7px;font-size:10px;}
.fuel-card-meta-row{margin-top:5px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
.fuel-card-addr{font-size:12px !important;line-height:1.35 !important;color:var(--fuel-muted) !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fuel-card-inline-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;}
.fuel-card-distance{font-size:12px !important;font-weight:900 !important;color:var(--fuel-sub) !important;}
.fuel-mini-action{min-height:28px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:var(--fuel-text);font-size:12px;font-weight:900;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.fuel-mini-action:hover{background:rgba(42,137,255,.18);border-color:rgba(120,199,255,.28);}
.fuel-card-price-row{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:16px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
.fuel-card-price-row::-webkit-scrollbar{display:none;}
.fuel-inline-price{appearance:none;-webkit-appearance:none;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;display:inline-flex;align-items:baseline;gap:6px;color:var(--fuel-sub);min-height:0 !important;cursor:pointer;white-space:nowrap;}
.fuel-inline-price:hover{transform:none !important;box-shadow:none !important;}
.fuel-inline-label{font-size:11px !important;font-weight:900;color:var(--fuel-muted) !important;line-height:1;}
.fuel-inline-amount{font-size:13px !important;font-weight:900;color:var(--fuel-text) !important;line-height:1;letter-spacing:-.02em;}
.fuel-inline-price.is-active .fuel-inline-label{color:#ffffff !important;}
.fuel-inline-price.is-active .fuel-inline-amount{font-size:15px !important;color:#ffffff !important;}

.ooxoo-fuel-divicon{background:transparent !important;border:none !important;}
.ooxoo-map-marker-bubble{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#ffffff;border:1px solid rgba(15,23,42,.12);box-shadow:0 10px 24px rgba(15,23,42,.18);color:#111827;white-space:nowrap;}
.ooxoo-map-marker-bubble.is-focus{box-shadow:0 0 0 3px rgba(255,92,92,.18),0 12px 28px rgba(15,23,42,.24);border-color:rgba(255,92,92,.38);}
.ooxoo-map-marker-main{display:inline-flex;flex-direction:column;gap:2px;min-width:0;}
.ooxoo-map-marker-name{font-size:12px;font-weight:900;line-height:1.1;color:#111827;}
.ooxoo-map-marker-prices{display:inline-flex;align-items:center;gap:6px;}
.map-marker-price{display:inline-flex;align-items:baseline;gap:3px;font-size:12px;font-weight:900;color:#111827;}
.map-marker-price .label{color:#2968d7;}
.map-marker-price .unit{font-size:11px;color:#64748b;}
.map-marker-price.is-active{color:#d22f2f;}
.ooxoo-map-popup-title-row{display:flex;align-items:flex-start;gap:8px;}
.ooxoo-map-popup-badges{margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ooxoo-map-popup-chip{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:900;border:1px solid rgba(15,23,42,.08);background:#f8fbff;color:#334155;}
.ooxoo-map-popup-chip.is-good{background:#fff6ea;border-color:rgba(255,166,95,.32);color:#9a5311;}
.ooxoo-map-popup-prices{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.map-price-item{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 8px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:#f8fbff;color:#111827;font-size:12px;font-weight:900;}
.map-price-item .label{color:#2968d7;}
.map-price-item.is-active{background:#eef5ff;border-color:rgba(41,104,215,.24);}
#ooxoo-fuel-pagination:empty{display:none !important;}

@media (max-width: 767px){
  .ooxoo-fuel-hero-card{padding:14px 14px 12px !important;}
  .ooxoo-fuel-hero-kicker{font-size:10px !important;}
  .ooxoo-fuel-hero-title{font-size:21px !important;line-height:1.12 !important;}
  .ooxoo-fuel-hero-fuel-tabs{margin-top:10px !important;gap:6px !important;}
  .fuel-tab{min-height:32px !important;padding:0 10px !important;font-size:11px !important;}
  .hero-digit{width:40px !important;height:42px !important;font-size:23px !important;}
  .hero-unit{height:42px !important;font-size:17px !important;}
  .ooxoo-fuel-hero-sub{display:none !important;}
  .ooxoo-fuel-controls-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;}
  .ooxoo-fuel-controls-right .ooxoo-btn{width:100%;}
  .ooxoo-fuel-filter-search-row{gap:8px;}
  .ooxoo-fuel-filter-search-row .filter-item.is-grow{flex:1 1 auto;}
  .ooxoo-fuel-filter-search-row .filter-sort{flex:0 0 96px;min-width:96px;}
  .ooxoo-fuel-filter-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .ooxoo-fuel-filter-pills::-webkit-scrollbar{display:none;}
  .pill-check{min-height:30px !important;padding:0 9px !important;font-size:11px !important;}
  .fuel-card-meta-row{align-items:flex-start;gap:8px;}
  .fuel-card-addr{flex:1 1 auto;white-space:normal;line-height:1.32 !important;}
  .fuel-card-inline-tools{gap:4px;}
  .fuel-mini-action{min-height:26px;padding:0 8px;font-size:11px;}
  .fuel-card-price-row{gap:12px;}
  .fuel-inline-label{font-size:10px !important;}
  .fuel-inline-amount{font-size:12px !important;}
  .fuel-inline-price.is-active .fuel-inline-amount{font-size:14px !important;}
}



/* =========================================================
   FINAL HOTFIX R2 (2026-04-15)
   ========================================================= */
#ooxoo-location-topbar,
.ooxoo-location-topbar{
  background:linear-gradient(180deg, var(--fuel-card), var(--fuel-card-2)) !important;
  background-color:#16314e !important;
  border:1px solid var(--fuel-border) !important;
  color:var(--fuel-text) !important;
  box-shadow:var(--fuel-shadow) !important;
}
#ooxoo-location-label{color:var(--fuel-text) !important;}

.ooxoo-btn-goodmap{display:inline-flex;align-items:center;gap:8px;}
.ooxoo-btn-goodmap-icon{width:18px;height:18px;display:block;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}

.fuel-brand-badge{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.fuel-brand-badge.is-generic,
.fuel-brand-badge.is-fallback{
  background:rgba(255,255,255,.10) !important;
}
.fuel-brand-logo{
  width:24px !important;
  height:24px !important;
  object-fit:contain !important;
}
.fuel-card-title-row{gap:8px !important;}
.fuel-card-title{font-size:16px !important;}
.fuel-kind-chip,
.fuel-good-chip{
  min-height:24px !important;
  padding:0 9px !important;
  font-size:11px !important;
}
.fuel-card-meta-row{
  align-items:center !important;
}
.fuel-card-inline-tools{
  gap:8px !important;
}
.fuel-mini-action{
  min-height:30px !important;
  padding:0 11px !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.fuel-card-price-row{
  gap:18px !important;
}
.fuel-inline-price{
  align-items:center !important;
}
.fuel-inline-amount{
  font-size:14px !important;
  white-space:nowrap !important;
}
.fuel-inline-price.is-active .fuel-inline-amount{
  font-size:16px !important;
}

.ooxoo-fuel-map-note{display:none !important;}
.ooxoo-modal-head{position:relative;padding-right:64px !important;}
.ooxoo-modal-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:40 !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(7,22,40,.86) !important;
  color:#ffffff !important;
  font-size:24px !important;
  line-height:1 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}
.ooxoo-modal-close:hover{background:rgba(22,61,104,.96) !important;}
@media (max-width: 768px){
  .ooxoo-modal-panel{margin:12px auto !important;width:calc(100% - 14px) !important;}
  .ooxoo-modal-head{padding-right:58px !important;}
  .ooxoo-modal-close{
    top:8px !important;
    right:8px !important;
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }
  .fuel-brand-badge{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }
  .fuel-brand-logo{width:20px !important;height:20px !important;}
}


/* =========================================================
   R4 HOTFIX (2026-04-15)
   ========================================================= */
#ooxoo-location-topbar,
.ooxoo-location-topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  background-color:#16314e !important;
  border:1px solid rgba(255,255,255,.13) !important;
  color:#eef6ff !important;
}

#ooxoo-location-topbar .ooxoo-location-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.ooxoo-location-current-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(4,18,37,.62) !important;
  color:#eef6ff !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.16) !important;
}

#ooxoo-location-refresh,
#ooxoo-location-address-open{
  color:#eef6ff !important;
  background:rgba(4,18,37,.62) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  font-size:15px !important;
  font-weight:900 !important;
}

.ooxoo-btn-goodmap{gap:10px !important;}
.ooxoo-btn-goodmap-icon{
  width:24px !important;
  height:24px !important;
  display:block !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.20)) !important;
}

.fuel-brand-badge{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
}
.fuel-brand-logo{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
}
.fuel-brand-badge.is-generic,
.fuel-brand-badge.is-fallback{
  background:rgba(255,255,255,.12) !important;
}

.fuel-good-chip{
  min-height:26px !important;
  padding:0 10px !important;
  gap:6px !important;
  font-size:11px !important;
  font-weight:900 !important;
  background:linear-gradient(180deg, rgba(255,173,76,.28), rgba(255,120,52,.18)) !important;
  border:1px solid rgba(255,191,124,.42) !important;
  color:#fff7ee !important;
}
.fuel-good-chip img{
  width:18px !important;
  height:18px !important;
}
.fuel-good-chip.is-map.is-map-large{
  min-height:30px !important;
  padding:0 12px !important;
  gap:7px !important;
  font-size:12px !important;
}
.fuel-good-chip.is-map.is-map-large img{
  width:22px !important;
  height:22px !important;
}

.ooxoo-fuel-filters{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.ooxoo-fuel-filter-search-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 0 54% !important;
  min-width:0 !important;
}
.filter-item.is-grow{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.filter-sort{
  flex:0 0 108px !important;
}
#ooxoo-fuel-q{
  min-width:0 !important;
}
.ooxoo-fuel-filter-pills{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow-x:auto !important;
  padding-bottom:2px !important;
}
.ooxoo-fuel-filter-pills::-webkit-scrollbar{
  height:6px;
}
.ooxoo-fuel-filter-pills::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}
.pill-check{
  min-height:34px !important;
  padding:0 10px !important;
  font-size:12px !important;
  gap:6px !important;
}

@media (max-width: 900px){
  .ooxoo-fuel-filters{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .ooxoo-fuel-filter-search-row{
    flex:1 1 auto !important;
    width:100% !important;
  }
  .ooxoo-fuel-filter-pills{
    width:100% !important;
  }
}

@media (max-width: 768px){
  .ooxoo-location-current-btn{
    min-height:32px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
  .ooxoo-btn-goodmap-icon{
    width:22px !important;
    height:22px !important;
  }
  .fuel-brand-badge{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
  .fuel-brand-logo{
    width:24px !important;
    height:24px !important;
  }
}



/* R7 FIX */
#ooxoo-location-current,
.ooxoo-location-current-btn,
#ooxoo-fuel-neighborhood{
  display:none !important;
}

.ooxoo-fuel-filters{
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
.ooxoo-fuel-filter-search-row{
  flex:0 1 56% !important;
}
.ooxoo-fuel-filter-pills{
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
}
.ooxoo-fuel-card{
  padding:10px 12px !important;
}
.fuel-card-meta-row{
  margin-top:4px !important;
}
.fuel-card-addr{
  margin-top:0 !important;
  line-height:1.25 !important;
}
@media (max-width: 900px){
  .ooxoo-fuel-filters{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .ooxoo-fuel-filter-search-row{
    flex:1 1 auto !important;
  }
}
/*
  OOXOO Fuel Page
  - Desktop max width: 1050px
  - List: 2 columns desktop, 1 column mobile
  - Main hero card: “내 동네 최저가” 스타일
*/

:root{
  --ooxoo-bg:#f4f7fb;
  --ooxoo-card:#ffffff;
  --ooxoo-ink:#0f172a;
  --ooxoo-sub:#475569;
  --ooxoo-blue:#1e40af;
  --ooxoo-blue2:#2563eb;
  --ooxoo-border:#e5e7eb;
  --ooxoo-pill:#eef2ff;
  --ooxoo-shadow:0 10px 28px rgba(15,23,42,.08);
}

body.ooxoo-fuel-page{
  background:var(--ooxoo-bg);
  color:var(--ooxoo-ink);
}

.ooxoo-fuel-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:22px 14px 40px;
}

/* Header */
.ooxoo-page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 0 8px;
}
.ooxoo-page-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--ooxoo-blue);
  text-decoration:none;
}
.ooxoo-page-title:hover{
  opacity:.92;
}
.ooxoo-page-actions{
  position:absolute;
  right:0;
}

/* Notice */
.ooxoo-page-notice{
  margin:10px 0 14px;
  padding:10px 14px;
  background:#f8fafc;
  border:1px dashed #c7d2fe;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-blue);
  text-align:center;
}

/* Buttons */
.ooxoo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.ooxoo-btn-ghost{
  background:#ffffff;
  border:1px solid var(--ooxoo-border);
  color:var(--ooxoo-ink);
}
.ooxoo-btn-ghost:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.ooxoo-btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-btn-primary:hover{
  filter:brightness(1.02);
}

.ooxoo-icon-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--ooxoo-blue);
}
.ooxoo-icon-btn:hover{
  background:rgba(30,64,175,.06);
}

/* Location bar */
.ooxoo-location-topbar{
  margin:0 auto 16px;
  padding:10px 14px;
  background:#eaf0ff;
  border-radius:12px;
  color:var(--ooxoo-blue);
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ooxoo-location-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Address modal (reuse IDs, just style overrides) */
.ooxoo-location-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}
.ooxoo-location-modal[aria-hidden="false"]{ display:flex; }
.ooxoo-location-modal .modal-box{
  background:#fff;
  border-radius:16px;
  padding:18px;
  width:min(380px, 92vw);
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-location-modal .modal-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
}
.ooxoo-location-modal .addr-row{ margin-bottom:8px; }
.ooxoo-location-modal select{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
}
.ooxoo-location-modal .modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.ooxoo-location-modal .btn-primary,
.ooxoo-location-modal .btn-secondary{
  min-width:110px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ooxoo-location-modal .btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-location-modal .btn-secondary{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #d1d5db;
}

/* Hero */
.ooxoo-fuel-hero{ margin:10px 0 16px; }
.ooxoo-fuel-hero-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-fuel-hero-kicker{
  font-size:14px;
  font-weight:800;
  color:#111827;
}
.ooxoo-fuel-hero-title{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-fuel-hero-fuel-tabs{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fuel-tab{
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.fuel-tab.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}

.ooxoo-fuel-hero-body{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-hero-loc{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-hero-price{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.hero-digit{
  width:56px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#2d4fd3;
  color:#fff;
  font-size:32px;
  font-weight:900;
  line-height:1;
}
.hero-comma{
  font-size:32px;
  font-weight:900;
  color:#2d4fd3;
  margin:0 -2px 0 0;
}
.hero-unit{
  font-size:28px;
  font-weight:900;
  color:#111827;
  margin-bottom:2px;
}

.ooxoo-fuel-hero-sub{
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-hero-sub b{ color:var(--ooxoo-blue2); }
.ooxoo-fuel-hero-save{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.ooxoo-fuel-hero-cta{ margin-top:6px; }
.ooxoo-fuel-hero-cta .ooxoo-btn{ width:100%; height:46px; }

/* Controls */
.ooxoo-fuel-controls{ margin:18px 0 12px; }
.ooxoo-fuel-controls-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ooxoo-section-title{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.ooxoo-section-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.ooxoo-fuel-filters{
  margin-top:12px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.filter-item{ display:flex; align-items:center; gap:8px; }
.filter-item.is-grow{ flex:1 1 260px; }
.filter-item input[type="search"]{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:700;
}
.filter-item select{
  height:40px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
}
.pill-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
}
.pill-check input{ transform:translateY(1px); }

/* List grid */
.ooxoo-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 880px){
  .ooxoo-list-grid{ grid-template-columns:1fr; }
  .ooxoo-page-actions{ right:0; }
}

.ooxoo-fuel-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.fuel-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.fuel-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
}
.fuel-brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f6f8ff;
  border:1px solid rgba(30, 64, 175, 0.12);
  overflow:hidden;
  flex:0 0 auto;
}

.fuel-card-title .fuel-brand-logo{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  flex:0 0 auto;
}
.fuel-card-title .brand{
  color:var(--ooxoo-blue);
  font-weight:900;
  margin-right:0;
}
.fuel-card-distance{
  font-size:12px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}
.fuel-card-addr{
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  margin-top:4px;
}

.fuel-card-mid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* When sparkline is not available, keep price chips aligned to the start */
.fuel-card-mid.no-spark{
  justify-content:flex-start;
}


/* Price chips (multi fuel) */
.price-multi{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.price-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.price-chip:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.price-chip.is-active{
  border-color:#dbeafe;
  background:#eff6ff;
}
.price-chip .label{
  font-size:11px;
  color:var(--ooxoo-blue);
  line-height:1;
}
.price-chip .value{
  font-size:15px;
  color:#0f172a;
  line-height:1;
}
.price-chip .unit{
  font-size:11px;
  color:#0f172a;
  line-height:1;
}
.price-chip .delta{
  font-size:11px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}


.price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  cursor:pointer;
  font-weight:900;
}
.price-pill:hover{ filter:brightness(1.02); }
.price-pill .label{
  font-size:12px;
  color:var(--ooxoo-blue);
}
.price-pill .value{
  font-size:18px;
  color:#0f172a;
}
.price-pill .unit{
  font-size:12px;
  color:#0f172a;
}
.price-pill .delta{
  font-size:12px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.delta.up{ color:#b91c1c; }
.delta.down{ color:#1d4ed8; }

.sparkline{
  width:92px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sparkline svg{ width:100%; height:100%; }

.fuel-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fuel-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  background:var(--ooxoo-pill);
  color:var(--ooxoo-blue);
  border:1px solid #c7d2fe;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.fuel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-mini{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-mini.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
}

/* Empty */
.ooxoo-empty{
  margin:14px 0 0;
  padding:14px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
  font-weight:800;
  color:var(--ooxoo-sub);
}

/* Pagination */
.ooxoo-pagination{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-page-link{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}
.ooxoo-page-link.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}
.ooxoo-page-ellipsis{
  padding:0 6px;
  font-weight:900;
  color:#64748b;
}

/* Modal */
.ooxoo-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10010;
}
.ooxoo-modal[aria-hidden="false"]{ display:block; }
.ooxoo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.ooxoo-modal-panel{
  position:relative;
  max-width:720px;
  width:calc(100% - 22px);
  margin:60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--ooxoo-shadow);
  border:1px solid rgba(15,23,42,.08);
}
@media (max-width: 520px){
  .ooxoo-modal-panel{ margin:16px auto; }
}

.ooxoo-modal-head{
  padding:16px 16px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ooxoo-modal-title{
  font-size:16px;
  font-weight:900;
}
.ooxoo-modal-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-modal-body{ padding:14px 16px 16px; }

.ooxoo-modal-kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .ooxoo-modal-kpis{ grid-template-columns:1fr; }
}
.kpi{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.kpi-label{ font-size:12px; font-weight:800; color:var(--ooxoo-sub); }
.kpi-value{ margin-top:4px; font-size:14px; font-weight:900; color:#0f172a; }

.ooxoo-chart-wrap{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  position:relative;
}
.ooxoo-chart-wrap canvas{
  width:100%;
  display:block;
}
.ooxoo-chart-tooltip{
  position:absolute;
  pointer-events:none;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius:10px;
  transform:translate(-50%, -110%);
  white-space:nowrap;
}

.ooxoo-modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.ooxoo-modal-actions .ooxoo-btn{ flex:1; }

.ooxoo-modal-note{
  margin-top:12px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* ------------------------------
   Map modal (Fuel)
------------------------------ */
.ooxoo-fuel-map-panel{
  max-width:1050px;
}
.ooxoo-fuel-map-body{
  padding:12px 14px 14px;
}
.ooxoo-fuel-map-box{
  width:100%;
  height:min(70vh, 640px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
@media (max-width: 520px){
  .ooxoo-fuel-map-box{ height:72vh; }
}
.ooxoo-fuel-map-note{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* Leaflet tweaks to match OOXOO look */
.leaflet-container{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.leaflet-popup-content{
  margin:10px 12px;
}
.ooxoo-map-popup-title{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-map-popup-addr{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-map-popup-prices{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-map-popup-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.ooxoo-map-popup-actions a{
  text-decoration:none;
}

/* Leaflet popup styling (Fuel) */
.ooxoo-map-popup-title{
  font-weight:700;
  font-size:14px;
  margin:0 0 4px;
}
.ooxoo-map-popup-addr{
  font-size:12px;
  color:#64748b;
  margin:0 0 8px;
}
.ooxoo-map-popup-prices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 8px;
}
.ooxoo-map-popup-actions{
  margin-top:8px;
}


/* ==============================
   Fuel brand logos + map markers
   ============================== */

.ooxoo-fuel-map-brands{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar{
  height:6px;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.12);
  border-radius:999px;
}

.map-brand-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.map-brand-chip .i{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
}
.map-brand-chip .i img{
  width:22px;
  height:22px;
  display:block;
}
.map-brand-chip .c{
  font-size:11px;
  font-weight:900;
  color:var(--ooxoo-sub);
}
.map-brand-chip.is-active{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}

/* Leaflet div icons (custom station markers) */
.leaflet-div-icon.ooxoo-fuel-divicon{
  background:transparent;
  border:none;
}

.ooxoo-fuel-marker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  white-space:nowrap;
  position:relative;
}
.ooxoo-fuel-marker:before{
  content:'';
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:rgba(15,23,42,.14);
}
.ooxoo-fuel-marker:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#ffffff;
}
.ooxoo-fuel-marker .m-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-fuel-marker .m-logo img{
  width:22px;
  height:22px;
  display:block;
}
.ooxoo-fuel-marker .m-fuel-icon{
  font-size:14px;
}
.ooxoo-fuel-marker .m-prices{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.ooxoo-fuel-marker .m-pr{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.16);
  background:#f8fafc;
  font-weight:900;
  font-size:12px;
  color:#0f172a;
}
.ooxoo-fuel-marker .m-pr .t{
  font-size:11px;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-marker .m-pr.is-active{
  background:#eff6ff;
  border-color:rgba(37,99,235,.35);
}

/* Map popup title with logo */
.ooxoo-map-popup-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.ooxoo-popup-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-popup-title-text{
  font-weight:900;
  color:#0f172a;
}
/*-----------------------------------------------*/
/*  "주유소" Page                             */
/*-----------------------------------------------*/
body.page-id-94 .ooxoo-fuel-hero-card .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-price-pill{
	width:90px;
}

body.page-id-94 #ooxoo-fuel-list div .value{
	font-size:12px;
	position:relative;
	left:-4px;
}

body.page-id-94 #ooxoo-fuel-list div .label{
	font-size:10px;
}

body.page-id-94 #ooxoo-fuel-list div .unit{
	position:relative;
	left:-8px;
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-list div .btn-mini{
	height:30px;
	width:35px;
	position:relative;
	left:5px;
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-route{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	height:28px;
	font-size:10px !important;
}

body.page-id-94 .ooxoo-fuel-controls .ooxoo-fuel-controls-right a.ooxoo-btn-ghost{
	font-size:12px;
}

body.page-id-94 .ooxoo-fuel-filters .filter-item label{
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-q{
	width:360px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-sort{
	position:relative;
	left:-200px;
}

body.page-id-94 #ooxoo-fuel-list .ooxoo-fuel-card{
	height:107px;
}

@media (min-width:769px){

	body.page-id-94 .ooxoo-fuel-wrap header{
	padding-top:0px !important;
	}

}


/* =========================================================
   R8 COMPACT FIX (current working list version base)
   ========================================================= */
body.ooxoo-fuel-page #ooxoo-location-current,
body.ooxoo-fuel-page #ooxoo-fuel-neighborhood,
body.ooxoo-fuel-page .ooxoo-location-current-btn,
body.ooxoo-fuel-page #ooxoo-fuel-scroll,
body.ooxoo-fuel-page .ooxoo-fuel-hero-cta{
  display:none !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
  display:flex !important;
  grid-template-columns:none !important;
  width:auto !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
  width:auto !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap{
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap-icon{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  display:block !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filters{
  display:block !important;
  margin-top:12px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item{
  flex:0 0 auto !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 380px !important;
  min-width:180px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 96px !important;
  width:96px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-q{
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-sort{
  width:100% !important;
  min-height:36px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page .pill-check{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:12px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:16px 16px 14px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:24px !important;
  line-height:1.14 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-price{
  min-height:60px !important;
  margin-top:10px !important;
}

body.ooxoo-fuel-page .hero-digit{
  width:44px !important;
  height:46px !important;
  font-size:26px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .hero-unit{
  height:46px !important;
  font-size:18px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-sub{
  margin-top:8px !important;
  gap:4px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:12px 14px !important;
  min-height:auto !important;
  border-radius:18px !important;
}

body.ooxoo-fuel-page .fuel-brand-badge{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

body.ooxoo-fuel-page .fuel-brand-logo{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
}

body.ooxoo-fuel-page .fuel-card-title-row{
  gap:7px !important;
}

body.ooxoo-fuel-page .fuel-card-title{
  font-size:15px !important;
  line-height:1.2 !important;
}

body.ooxoo-fuel-page .fuel-kind-chip,
body.ooxoo-fuel-page .fuel-good-chip{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:11px !important;
  gap:5px !important;
}

body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:4px !important;
  gap:8px !important;
  align-items:center !important;
}

body.ooxoo-fuel-page .fuel-card-addr{
  margin-top:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:var(--fuel-muted) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
}

body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:6px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-card-distance{
  font-size:12px !important;
}

body.ooxoo-fuel-page .fuel-mini-action{
  min-height:28px !important;
  padding:0 9px !important;
  border-radius:10px !important;
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:9px !important;
  padding-top:9px !important;
  gap:14px !important;
}

body.ooxoo-fuel-page .fuel-inline-price{
  align-items:center !important;
  min-height:0 !important;
}

body.ooxoo-fuel-page .fuel-inline-label{
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:13px !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:15px !important;
}

body.ooxoo-fuel-page .ooxoo-map-divicon{
  background:transparent !important;
  border:none !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-bubble{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-name{
  font-size:12px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large{
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large img{
  width:18px !important;
  height:18px !important;
}

body.ooxoo-fuel-page .ooxoo-modal-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:50 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-map-note{
  display:none !important;
}

@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
    justify-content:flex-start !important;
    width:100% !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
    flex:1 1 calc(100% - 104px) !important;
    min-width:0 !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
    flex:0 0 96px !important;
    width:96px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .fuel-brand-badge{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  body.ooxoo-fuel-page .fuel-brand-logo{
    width:20px !important;
    height:20px !important;
  }

  body.ooxoo-fuel-page .fuel-card-meta-row{
    align-items:flex-start !important;
  }

  body.ooxoo-fuel-page .fuel-card-inline-tools{
    gap:4px !important;
  }

  body.ooxoo-fuel-page .fuel-mini-action{
    min-height:26px !important;
    padding:0 8px !important;
  }
}
/*
  OOXOO Fuel Page
  - Desktop max width: 1050px
  - List: 2 columns desktop, 1 column mobile
  - Main hero card: “내 동네 최저가” 스타일
*/

:root{
  --ooxoo-bg:#f4f7fb;
  --ooxoo-card:#ffffff;
  --ooxoo-ink:#0f172a;
  --ooxoo-sub:#475569;
  --ooxoo-blue:#1e40af;
  --ooxoo-blue2:#2563eb;
  --ooxoo-border:#e5e7eb;
  --ooxoo-pill:#eef2ff;
  --ooxoo-shadow:0 10px 28px rgba(15,23,42,.08);
}

body.ooxoo-fuel-page{
  background:var(--ooxoo-bg);
  color:var(--ooxoo-ink);
}

.ooxoo-fuel-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:22px 14px 40px;
}

/* Header */
.ooxoo-page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 0 8px;
}
.ooxoo-page-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--ooxoo-blue);
  text-decoration:none;
}
.ooxoo-page-title:hover{
  opacity:.92;
}
.ooxoo-page-actions{
  position:absolute;
  right:0;
}

/* Notice */
.ooxoo-page-notice{
  margin:10px 0 14px;
  padding:10px 14px;
  background:#f8fafc;
  border:1px dashed #c7d2fe;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-blue);
  text-align:center;
}

/* Buttons */
.ooxoo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.ooxoo-btn-ghost{
  background:#ffffff;
  border:1px solid var(--ooxoo-border);
  color:var(--ooxoo-ink);
}
.ooxoo-btn-ghost:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.ooxoo-btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-btn-primary:hover{
  filter:brightness(1.02);
}

.ooxoo-icon-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--ooxoo-blue);
}
.ooxoo-icon-btn:hover{
  background:rgba(30,64,175,.06);
}

/* Location bar */
.ooxoo-location-topbar{
  margin:0 auto 16px;
  padding:10px 14px;
  background:#eaf0ff;
  border-radius:12px;
  color:var(--ooxoo-blue);
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ooxoo-location-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Address modal (reuse IDs, just style overrides) */
.ooxoo-location-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}
.ooxoo-location-modal[aria-hidden="false"]{ display:flex; }
.ooxoo-location-modal .modal-box{
  background:#fff;
  border-radius:16px;
  padding:18px;
  width:min(380px, 92vw);
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-location-modal .modal-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
}
.ooxoo-location-modal .addr-row{ margin-bottom:8px; }
.ooxoo-location-modal select{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
}
.ooxoo-location-modal .modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.ooxoo-location-modal .btn-primary,
.ooxoo-location-modal .btn-secondary{
  min-width:110px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ooxoo-location-modal .btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-location-modal .btn-secondary{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #d1d5db;
}

/* Hero */
.ooxoo-fuel-hero{ margin:10px 0 16px; }
.ooxoo-fuel-hero-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-fuel-hero-kicker{
  font-size:14px;
  font-weight:800;
  color:#111827;
}
.ooxoo-fuel-hero-title{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-fuel-hero-fuel-tabs{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fuel-tab{
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.fuel-tab.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}

.ooxoo-fuel-hero-body{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-hero-loc{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-hero-price{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.hero-digit{
  width:56px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#2d4fd3;
  color:#fff;
  font-size:32px;
  font-weight:900;
  line-height:1;
}
.hero-comma{
  font-size:32px;
  font-weight:900;
  color:#2d4fd3;
  margin:0 -2px 0 0;
}
.hero-unit{
  font-size:28px;
  font-weight:900;
  color:#111827;
  margin-bottom:2px;
}

.ooxoo-fuel-hero-sub{
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-hero-sub b{ color:var(--ooxoo-blue2); }
.ooxoo-fuel-hero-save{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.ooxoo-fuel-hero-cta{ margin-top:6px; }
.ooxoo-fuel-hero-cta .ooxoo-btn{ width:100%; height:46px; }

/* Controls */
.ooxoo-fuel-controls{ margin:18px 0 12px; }
.ooxoo-fuel-controls-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ooxoo-section-title{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.ooxoo-section-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.ooxoo-fuel-filters{
  margin-top:12px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.filter-item{ display:flex; align-items:center; gap:8px; }
.filter-item.is-grow{ flex:1 1 260px; }
.filter-item input[type="search"]{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:700;
}
.filter-item select{
  height:40px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
}
.pill-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
}
.pill-check input{ transform:translateY(1px); }

/* List grid */
.ooxoo-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 880px){
  .ooxoo-list-grid{ grid-template-columns:1fr; }
  .ooxoo-page-actions{ right:0; }
}

.ooxoo-fuel-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.fuel-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.fuel-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
}
.fuel-brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f6f8ff;
  border:1px solid rgba(30, 64, 175, 0.12);
  overflow:hidden;
  flex:0 0 auto;
}

.fuel-card-title .fuel-brand-logo{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  flex:0 0 auto;
}
.fuel-card-title .brand{
  color:var(--ooxoo-blue);
  font-weight:900;
  margin-right:0;
}
.fuel-card-distance{
  font-size:12px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}
.fuel-card-addr{
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  margin-top:4px;
}

.fuel-card-mid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* When sparkline is not available, keep price chips aligned to the start */
.fuel-card-mid.no-spark{
  justify-content:flex-start;
}


/* Price chips (multi fuel) */
.price-multi{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.price-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.price-chip:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.price-chip.is-active{
  border-color:#dbeafe;
  background:#eff6ff;
}
.price-chip .label{
  font-size:11px;
  color:var(--ooxoo-blue);
  line-height:1;
}
.price-chip .value{
  font-size:15px;
  color:#0f172a;
  line-height:1;
}
.price-chip .unit{
  font-size:11px;
  color:#0f172a;
  line-height:1;
}
.price-chip .delta{
  font-size:11px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}


.price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  cursor:pointer;
  font-weight:900;
}
.price-pill:hover{ filter:brightness(1.02); }
.price-pill .label{
  font-size:12px;
  color:var(--ooxoo-blue);
}
.price-pill .value{
  font-size:18px;
  color:#0f172a;
}
.price-pill .unit{
  font-size:12px;
  color:#0f172a;
}
.price-pill .delta{
  font-size:12px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.delta.up{ color:#b91c1c; }
.delta.down{ color:#1d4ed8; }

.sparkline{
  width:92px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sparkline svg{ width:100%; height:100%; }

.fuel-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fuel-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  background:var(--ooxoo-pill);
  color:var(--ooxoo-blue);
  border:1px solid #c7d2fe;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.fuel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-mini{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-mini.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
}

/* Empty */
.ooxoo-empty{
  margin:14px 0 0;
  padding:14px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
  font-weight:800;
  color:var(--ooxoo-sub);
}

/* Pagination */
.ooxoo-pagination{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-page-link{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}
.ooxoo-page-link.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}
.ooxoo-page-ellipsis{
  padding:0 6px;
  font-weight:900;
  color:#64748b;
}

/* Modal */
.ooxoo-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10010;
}
.ooxoo-modal[aria-hidden="false"]{ display:block; }
.ooxoo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.ooxoo-modal-panel{
  position:relative;
  max-width:720px;
  width:calc(100% - 22px);
  margin:60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--ooxoo-shadow);
  border:1px solid rgba(15,23,42,.08);
}
@media (max-width: 520px){
  .ooxoo-modal-panel{ margin:16px auto; }
}

.ooxoo-modal-head{
  padding:16px 16px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ooxoo-modal-title{
  font-size:16px;
  font-weight:900;
}
.ooxoo-modal-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-modal-body{ padding:14px 16px 16px; }

.ooxoo-modal-kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .ooxoo-modal-kpis{ grid-template-columns:1fr; }
}
.kpi{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.kpi-label{ font-size:12px; font-weight:800; color:var(--ooxoo-sub); }
.kpi-value{ margin-top:4px; font-size:14px; font-weight:900; color:#0f172a; }

.ooxoo-chart-wrap{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  position:relative;
}
.ooxoo-chart-wrap canvas{
  width:100%;
  display:block;
}
.ooxoo-chart-tooltip{
  position:absolute;
  pointer-events:none;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius:10px;
  transform:translate(-50%, -110%);
  white-space:nowrap;
}

.ooxoo-modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.ooxoo-modal-actions .ooxoo-btn{ flex:1; }

.ooxoo-modal-note{
  margin-top:12px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* ------------------------------
   Map modal (Fuel)
------------------------------ */
.ooxoo-fuel-map-panel{
  max-width:1050px;
}
.ooxoo-fuel-map-body{
  padding:12px 14px 14px;
}
.ooxoo-fuel-map-box{
  width:100%;
  height:min(70vh, 640px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
@media (max-width: 520px){
  .ooxoo-fuel-map-box{ height:72vh; }
}
.ooxoo-fuel-map-note{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* Leaflet tweaks to match OOXOO look */
.leaflet-container{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.leaflet-popup-content{
  margin:10px 12px;
}
.ooxoo-map-popup-title{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-map-popup-addr{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-map-popup-prices{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-map-popup-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.ooxoo-map-popup-actions a{
  text-decoration:none;
}

/* Leaflet popup styling (Fuel) */
.ooxoo-map-popup-title{
  font-weight:700;
  font-size:14px;
  margin:0 0 4px;
}
.ooxoo-map-popup-addr{
  font-size:12px;
  color:#64748b;
  margin:0 0 8px;
}
.ooxoo-map-popup-prices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 8px;
}
.ooxoo-map-popup-actions{
  margin-top:8px;
}


/* ==============================
   Fuel brand logos + map markers
   ============================== */

.ooxoo-fuel-map-brands{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar{
  height:6px;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.12);
  border-radius:999px;
}

.map-brand-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.map-brand-chip .i{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
}
.map-brand-chip .i img{
  width:22px;
  height:22px;
  display:block;
}
.map-brand-chip .c{
  font-size:11px;
  font-weight:900;
  color:var(--ooxoo-sub);
}
.map-brand-chip.is-active{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}

/* Leaflet div icons (custom station markers) */
.leaflet-div-icon.ooxoo-fuel-divicon{
  background:transparent;
  border:none;
}

.ooxoo-fuel-marker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  white-space:nowrap;
  position:relative;
}
.ooxoo-fuel-marker:before{
  content:'';
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:rgba(15,23,42,.14);
}
.ooxoo-fuel-marker:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#ffffff;
}
.ooxoo-fuel-marker .m-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-fuel-marker .m-logo img{
  width:22px;
  height:22px;
  display:block;
}
.ooxoo-fuel-marker .m-fuel-icon{
  font-size:14px;
}
.ooxoo-fuel-marker .m-prices{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.ooxoo-fuel-marker .m-pr{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.16);
  background:#f8fafc;
  font-weight:900;
  font-size:12px;
  color:#0f172a;
}
.ooxoo-fuel-marker .m-pr .t{
  font-size:11px;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-marker .m-pr.is-active{
  background:#eff6ff;
  border-color:rgba(37,99,235,.35);
}

/* Map popup title with logo */
.ooxoo-map-popup-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.ooxoo-popup-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-popup-title-text{
  font-weight:900;
  color:#0f172a;
}
/*-----------------------------------------------*/
/*  "주유소" Page                             */
/*-----------------------------------------------*/
body.page-id-94 .ooxoo-fuel-hero-card .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-price-pill{
	width:90px;
}

body.page-id-94 #ooxoo-fuel-list div .value{
	font-size:12px;
	position:relative;
	left:-4px;
}

body.page-id-94 #ooxoo-fuel-list div .label{
	font-size:10px;
}

body.page-id-94 #ooxoo-fuel-list div .unit{
	position:relative;
	left:-8px;
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-list div .btn-mini{
	height:30px;
	width:35px;
	position:relative;
	left:5px;
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-route{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	height:28px;
	font-size:10px !important;
}

body.page-id-94 .ooxoo-fuel-controls .ooxoo-fuel-controls-right a.ooxoo-btn-ghost{
	font-size:12px;
}

body.page-id-94 .ooxoo-fuel-filters .filter-item label{
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-q{
	width:360px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-sort{
	position:relative;
	left:-200px;
}

body.page-id-94 #ooxoo-fuel-list .ooxoo-fuel-card{
	height:107px;
}

@media (min-width:769px){

	body.page-id-94 .ooxoo-fuel-wrap header{
	padding-top:0px !important;
	}

}


/* =========================================================
   R8 COMPACT FIX (current working list version base)
   ========================================================= */
body.ooxoo-fuel-page #ooxoo-location-current,
body.ooxoo-fuel-page #ooxoo-fuel-neighborhood,
body.ooxoo-fuel-page .ooxoo-location-current-btn,
body.ooxoo-fuel-page #ooxoo-fuel-scroll,
body.ooxoo-fuel-page .ooxoo-fuel-hero-cta{
  display:none !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
  display:flex !important;
  grid-template-columns:none !important;
  width:auto !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
  width:auto !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap{
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap-icon{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  display:block !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filters{
  display:block !important;
  margin-top:12px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item{
  flex:0 0 auto !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 380px !important;
  min-width:180px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 96px !important;
  width:96px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-q{
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-sort{
  width:100% !important;
  min-height:36px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page .pill-check{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:12px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:16px 16px 14px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:24px !important;
  line-height:1.14 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-price{
  min-height:60px !important;
  margin-top:10px !important;
}

body.ooxoo-fuel-page .hero-digit{
  width:44px !important;
  height:46px !important;
  font-size:26px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .hero-unit{
  height:46px !important;
  font-size:18px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-sub{
  margin-top:8px !important;
  gap:4px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:12px 14px !important;
  min-height:auto !important;
  border-radius:18px !important;
}

body.ooxoo-fuel-page .fuel-brand-badge{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

body.ooxoo-fuel-page .fuel-brand-logo{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
}

body.ooxoo-fuel-page .fuel-card-title-row{
  gap:7px !important;
}

body.ooxoo-fuel-page .fuel-card-title{
  font-size:15px !important;
  line-height:1.2 !important;
}

body.ooxoo-fuel-page .fuel-kind-chip,
body.ooxoo-fuel-page .fuel-good-chip{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:11px !important;
  gap:5px !important;
}

body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:4px !important;
  gap:8px !important;
  align-items:center !important;
}

body.ooxoo-fuel-page .fuel-card-addr{
  margin-top:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:var(--fuel-muted) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
}

body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:6px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-card-distance{
  font-size:12px !important;
}

body.ooxoo-fuel-page .fuel-mini-action{
  min-height:28px !important;
  padding:0 9px !important;
  border-radius:10px !important;
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:9px !important;
  padding-top:9px !important;
  gap:14px !important;
}

body.ooxoo-fuel-page .fuel-inline-price{
  align-items:center !important;
  min-height:0 !important;
}

body.ooxoo-fuel-page .fuel-inline-label{
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:13px !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:15px !important;
}

body.ooxoo-fuel-page .ooxoo-map-divicon{
  background:transparent !important;
  border:none !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-bubble{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-name{
  font-size:12px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large{
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large img{
  width:18px !important;
  height:18px !important;
}

body.ooxoo-fuel-page .ooxoo-modal-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:50 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-map-note{
  display:none !important;
}

@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
    justify-content:flex-start !important;
    width:100% !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
    flex:1 1 calc(100% - 104px) !important;
    min-width:0 !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
    flex:0 0 96px !important;
    width:96px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .fuel-brand-badge{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  body.ooxoo-fuel-page .fuel-brand-logo{
    width:20px !important;
    height:20px !important;
  }

  body.ooxoo-fuel-page .fuel-card-meta-row{
    align-items:flex-start !important;
  }

  body.ooxoo-fuel-page .fuel-card-inline-tools{
    gap:4px !important;
  }

  body.ooxoo-fuel-page .fuel-mini-action{
    min-height:26px !important;
    padding:0 8px !important;
  }
}


/* =========================================================
   R9 COMPACT / BRAND PREFIX FIX (2026-04-17)
   ========================================================= */
body.ooxoo-fuel-page .ooxoo-beta-notice{
  padding:10px 14px !important;
  min-height:0 !important;
}
body.ooxoo-fuel-page .ooxoo-beta-notice .ooxoo-beta-notice-line + .ooxoo-beta-notice-line{
  display:none !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:22px !important;
  line-height:1.12 !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs{
  display:flex !important;
  grid-template-columns:none !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
  flex:0 0 auto !important;
  min-width:96px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-row{
  gap:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right{
  gap:6px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right .ooxoo-btn{
  min-height:34px !important;
  padding:0 10px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filters{
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 360px !important;
  min-width:220px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 92px !important;
  width:92px !important;
}
body.ooxoo-fuel-page .pill-check{
  min-height:30px !important;
  padding:0 9px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:11px 12px !important;
  border-radius:17px !important;
}
body.ooxoo-fuel-page .fuel-brand-badge{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}
body.ooxoo-fuel-page .fuel-brand-logo{
  width:20px !important;
  height:20px !important;
}
body.ooxoo-fuel-page .fuel-card-title-row{
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-title{
  font-size:14px !important;
  line-height:1.18 !important;
}
body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:3px !important;
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-addr{
  font-size:11px !important;
  line-height:1.22 !important;
  margin-top:0 !important;
}
body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:4px !important;
}
body.ooxoo-fuel-page .fuel-mini-action{
  min-height:26px !important;
  padding:0 8px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:8px !important;
  padding-top:8px !important;
  gap:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-label{
  font-size:10px !important;
}
body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:14px !important;
}
@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{min-width:72px !important; padding:0 12px !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line{flex-wrap:wrap !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{flex:1 1 calc(100% - 100px) !important; min-width:0 !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{flex:0 0 92px !important;}
}
/*
  OOXOO Fuel Page
  - Desktop max width: 1050px
  - List: 2 columns desktop, 1 column mobile
  - Main hero card: “내 동네 최저가” 스타일
*/

:root{
  --ooxoo-bg:#f4f7fb;
  --ooxoo-card:#ffffff;
  --ooxoo-ink:#0f172a;
  --ooxoo-sub:#475569;
  --ooxoo-blue:#1e40af;
  --ooxoo-blue2:#2563eb;
  --ooxoo-border:#e5e7eb;
  --ooxoo-pill:#eef2ff;
  --ooxoo-shadow:0 10px 28px rgba(15,23,42,.08);
}

body.ooxoo-fuel-page{
  background:var(--ooxoo-bg);
  color:var(--ooxoo-ink);
}

.ooxoo-fuel-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:22px 14px 40px;
}

/* Header */
.ooxoo-page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 0 8px;
}
.ooxoo-page-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--ooxoo-blue);
  text-decoration:none;
}
.ooxoo-page-title:hover{
  opacity:.92;
}
.ooxoo-page-actions{
  position:absolute;
  right:0;
}

/* Notice */
.ooxoo-page-notice{
  margin:10px 0 14px;
  padding:10px 14px;
  background:#f8fafc;
  border:1px dashed #c7d2fe;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-blue);
  text-align:center;
}

/* Buttons */
.ooxoo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.ooxoo-btn-ghost{
  background:#ffffff;
  border:1px solid var(--ooxoo-border);
  color:var(--ooxoo-ink);
}
.ooxoo-btn-ghost:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.ooxoo-btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-btn-primary:hover{
  filter:brightness(1.02);
}

.ooxoo-icon-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--ooxoo-blue);
}
.ooxoo-icon-btn:hover{
  background:rgba(30,64,175,.06);
}

/* Location bar */
.ooxoo-location-topbar{
  margin:0 auto 16px;
  padding:10px 14px;
  background:#eaf0ff;
  border-radius:12px;
  color:var(--ooxoo-blue);
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ooxoo-location-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Address modal (reuse IDs, just style overrides) */
.ooxoo-location-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}
.ooxoo-location-modal[aria-hidden="false"]{ display:flex; }
.ooxoo-location-modal .modal-box{
  background:#fff;
  border-radius:16px;
  padding:18px;
  width:min(380px, 92vw);
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-location-modal .modal-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
}
.ooxoo-location-modal .addr-row{ margin-bottom:8px; }
.ooxoo-location-modal select{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
}
.ooxoo-location-modal .modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.ooxoo-location-modal .btn-primary,
.ooxoo-location-modal .btn-secondary{
  min-width:110px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ooxoo-location-modal .btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-location-modal .btn-secondary{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #d1d5db;
}

/* Hero */
.ooxoo-fuel-hero{ margin:10px 0 16px; }
.ooxoo-fuel-hero-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-fuel-hero-kicker{
  font-size:14px;
  font-weight:800;
  color:#111827;
}
.ooxoo-fuel-hero-title{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-fuel-hero-fuel-tabs{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fuel-tab{
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.fuel-tab.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}

.ooxoo-fuel-hero-body{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-hero-loc{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-hero-price{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.hero-digit{
  width:56px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#2d4fd3;
  color:#fff;
  font-size:32px;
  font-weight:900;
  line-height:1;
}
.hero-comma{
  font-size:32px;
  font-weight:900;
  color:#2d4fd3;
  margin:0 -2px 0 0;
}
.hero-unit{
  font-size:28px;
  font-weight:900;
  color:#111827;
  margin-bottom:2px;
}

.ooxoo-fuel-hero-sub{
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-hero-sub b{ color:var(--ooxoo-blue2); }
.ooxoo-fuel-hero-save{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.ooxoo-fuel-hero-cta{ margin-top:6px; }
.ooxoo-fuel-hero-cta .ooxoo-btn{ width:100%; height:46px; }

/* Controls */
.ooxoo-fuel-controls{ margin:18px 0 12px; }
.ooxoo-fuel-controls-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ooxoo-section-title{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.ooxoo-section-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.ooxoo-fuel-filters{
  margin-top:12px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.filter-item{ display:flex; align-items:center; gap:8px; }
.filter-item.is-grow{ flex:1 1 260px; }
.filter-item input[type="search"]{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:700;
}
.filter-item select{
  height:40px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
}
.pill-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
}
.pill-check input{ transform:translateY(1px); }

/* List grid */
.ooxoo-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 880px){
  .ooxoo-list-grid{ grid-template-columns:1fr; }
  .ooxoo-page-actions{ right:0; }
}

.ooxoo-fuel-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.fuel-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.fuel-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
}
.fuel-brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f6f8ff;
  border:1px solid rgba(30, 64, 175, 0.12);
  overflow:hidden;
  flex:0 0 auto;
}

.fuel-card-title .fuel-brand-logo{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  flex:0 0 auto;
}
.fuel-card-title .brand{
  color:var(--ooxoo-blue);
  font-weight:900;
  margin-right:0;
}
.fuel-card-distance{
  font-size:12px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}
.fuel-card-addr{
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  margin-top:4px;
}

.fuel-card-mid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* When sparkline is not available, keep price chips aligned to the start */
.fuel-card-mid.no-spark{
  justify-content:flex-start;
}


/* Price chips (multi fuel) */
.price-multi{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.price-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.price-chip:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.price-chip.is-active{
  border-color:#dbeafe;
  background:#eff6ff;
}
.price-chip .label{
  font-size:11px;
  color:var(--ooxoo-blue);
  line-height:1;
}
.price-chip .value{
  font-size:15px;
  color:#0f172a;
  line-height:1;
}
.price-chip .unit{
  font-size:11px;
  color:#0f172a;
  line-height:1;
}
.price-chip .delta{
  font-size:11px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}


.price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  cursor:pointer;
  font-weight:900;
}
.price-pill:hover{ filter:brightness(1.02); }
.price-pill .label{
  font-size:12px;
  color:var(--ooxoo-blue);
}
.price-pill .value{
  font-size:18px;
  color:#0f172a;
}
.price-pill .unit{
  font-size:12px;
  color:#0f172a;
}
.price-pill .delta{
  font-size:12px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.delta.up{ color:#b91c1c; }
.delta.down{ color:#1d4ed8; }

.sparkline{
  width:92px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sparkline svg{ width:100%; height:100%; }

.fuel-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fuel-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  background:var(--ooxoo-pill);
  color:var(--ooxoo-blue);
  border:1px solid #c7d2fe;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.fuel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-mini{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-mini.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
}

/* Empty */
.ooxoo-empty{
  margin:14px 0 0;
  padding:14px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
  font-weight:800;
  color:var(--ooxoo-sub);
}

/* Pagination */
.ooxoo-pagination{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-page-link{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}
.ooxoo-page-link.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}
.ooxoo-page-ellipsis{
  padding:0 6px;
  font-weight:900;
  color:#64748b;
}

/* Modal */
.ooxoo-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10010;
}
.ooxoo-modal[aria-hidden="false"]{ display:block; }
.ooxoo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.ooxoo-modal-panel{
  position:relative;
  max-width:720px;
  width:calc(100% - 22px);
  margin:60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--ooxoo-shadow);
  border:1px solid rgba(15,23,42,.08);
}
@media (max-width: 520px){
  .ooxoo-modal-panel{ margin:16px auto; }
}

.ooxoo-modal-head{
  padding:16px 16px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ooxoo-modal-title{
  font-size:16px;
  font-weight:900;
}
.ooxoo-modal-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-modal-body{ padding:14px 16px 16px; }

.ooxoo-modal-kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .ooxoo-modal-kpis{ grid-template-columns:1fr; }
}
.kpi{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.kpi-label{ font-size:12px; font-weight:800; color:var(--ooxoo-sub); }
.kpi-value{ margin-top:4px; font-size:14px; font-weight:900; color:#0f172a; }

.ooxoo-chart-wrap{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  position:relative;
}
.ooxoo-chart-wrap canvas{
  width:100%;
  display:block;
}
.ooxoo-chart-tooltip{
  position:absolute;
  pointer-events:none;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius:10px;
  transform:translate(-50%, -110%);
  white-space:nowrap;
}

.ooxoo-modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.ooxoo-modal-actions .ooxoo-btn{ flex:1; }

.ooxoo-modal-note{
  margin-top:12px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* ------------------------------
   Map modal (Fuel)
------------------------------ */
.ooxoo-fuel-map-panel{
  max-width:1050px;
}
.ooxoo-fuel-map-body{
  padding:12px 14px 14px;
}
.ooxoo-fuel-map-box{
  width:100%;
  height:min(70vh, 640px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
@media (max-width: 520px){
  .ooxoo-fuel-map-box{ height:72vh; }
}
.ooxoo-fuel-map-note{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* Leaflet tweaks to match OOXOO look */
.leaflet-container{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.leaflet-popup-content{
  margin:10px 12px;
}
.ooxoo-map-popup-title{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-map-popup-addr{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-map-popup-prices{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-map-popup-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.ooxoo-map-popup-actions a{
  text-decoration:none;
}

/* Leaflet popup styling (Fuel) */
.ooxoo-map-popup-title{
  font-weight:700;
  font-size:14px;
  margin:0 0 4px;
}
.ooxoo-map-popup-addr{
  font-size:12px;
  color:#64748b;
  margin:0 0 8px;
}
.ooxoo-map-popup-prices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 8px;
}
.ooxoo-map-popup-actions{
  margin-top:8px;
}


/* ==============================
   Fuel brand logos + map markers
   ============================== */

.ooxoo-fuel-map-brands{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar{
  height:6px;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.12);
  border-radius:999px;
}

.map-brand-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.map-brand-chip .i{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
}
.map-brand-chip .i img{
  width:22px;
  height:22px;
  display:block;
}
.map-brand-chip .c{
  font-size:11px;
  font-weight:900;
  color:var(--ooxoo-sub);
}
.map-brand-chip.is-active{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}

/* Leaflet div icons (custom station markers) */
.leaflet-div-icon.ooxoo-fuel-divicon{
  background:transparent;
  border:none;
}

.ooxoo-fuel-marker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  white-space:nowrap;
  position:relative;
}
.ooxoo-fuel-marker:before{
  content:'';
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:rgba(15,23,42,.14);
}
.ooxoo-fuel-marker:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#ffffff;
}
.ooxoo-fuel-marker .m-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-fuel-marker .m-logo img{
  width:22px;
  height:22px;
  display:block;
}
.ooxoo-fuel-marker .m-fuel-icon{
  font-size:14px;
}
.ooxoo-fuel-marker .m-prices{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.ooxoo-fuel-marker .m-pr{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.16);
  background:#f8fafc;
  font-weight:900;
  font-size:12px;
  color:#0f172a;
}
.ooxoo-fuel-marker .m-pr .t{
  font-size:11px;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-marker .m-pr.is-active{
  background:#eff6ff;
  border-color:rgba(37,99,235,.35);
}

/* Map popup title with logo */
.ooxoo-map-popup-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.ooxoo-popup-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-popup-title-text{
  font-weight:900;
  color:#0f172a;
}
/*-----------------------------------------------*/
/*  "주유소" Page                             */
/*-----------------------------------------------*/
body.page-id-94 .ooxoo-fuel-hero-card .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-price-pill{
	width:90px;
}

body.page-id-94 #ooxoo-fuel-list div .value{
	font-size:12px;
	position:relative;
	left:-4px;
}

body.page-id-94 #ooxoo-fuel-list div .label{
	font-size:10px;
}

body.page-id-94 #ooxoo-fuel-list div .unit{
	position:relative;
	left:-8px;
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-list div .btn-mini{
	height:30px;
	width:35px;
	position:relative;
	left:5px;
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-route{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	height:28px;
	font-size:10px !important;
}

body.page-id-94 .ooxoo-fuel-controls .ooxoo-fuel-controls-right a.ooxoo-btn-ghost{
	font-size:12px;
}

body.page-id-94 .ooxoo-fuel-filters .filter-item label{
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-q{
	width:360px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-sort{
	position:relative;
	left:-200px;
}

body.page-id-94 #ooxoo-fuel-list .ooxoo-fuel-card{
	height:107px;
}

@media (min-width:769px){

	body.page-id-94 .ooxoo-fuel-wrap header{
	padding-top:0px !important;
	}

}


/* =========================================================
   R8 COMPACT FIX (current working list version base)
   ========================================================= */
body.ooxoo-fuel-page #ooxoo-location-current,
body.ooxoo-fuel-page #ooxoo-fuel-neighborhood,
body.ooxoo-fuel-page .ooxoo-location-current-btn,
body.ooxoo-fuel-page #ooxoo-fuel-scroll,
body.ooxoo-fuel-page .ooxoo-fuel-hero-cta{
  display:none !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
  display:flex !important;
  grid-template-columns:none !important;
  width:auto !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
  width:auto !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap{
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap-icon{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  display:block !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filters{
  display:block !important;
  margin-top:12px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item{
  flex:0 0 auto !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 380px !important;
  min-width:180px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 96px !important;
  width:96px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-q{
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-sort{
  width:100% !important;
  min-height:36px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page .pill-check{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:12px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:16px 16px 14px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:24px !important;
  line-height:1.14 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-price{
  min-height:60px !important;
  margin-top:10px !important;
}

body.ooxoo-fuel-page .hero-digit{
  width:44px !important;
  height:46px !important;
  font-size:26px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .hero-unit{
  height:46px !important;
  font-size:18px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-sub{
  margin-top:8px !important;
  gap:4px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:12px 14px !important;
  min-height:auto !important;
  border-radius:18px !important;
}

body.ooxoo-fuel-page .fuel-brand-badge{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

body.ooxoo-fuel-page .fuel-brand-logo{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
}

body.ooxoo-fuel-page .fuel-card-title-row{
  gap:7px !important;
}

body.ooxoo-fuel-page .fuel-card-title{
  font-size:15px !important;
  line-height:1.2 !important;
}

body.ooxoo-fuel-page .fuel-kind-chip,
body.ooxoo-fuel-page .fuel-good-chip{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:11px !important;
  gap:5px !important;
}

body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:4px !important;
  gap:8px !important;
  align-items:center !important;
}

body.ooxoo-fuel-page .fuel-card-addr{
  margin-top:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:var(--fuel-muted) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
}

body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:6px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-card-distance{
  font-size:12px !important;
}

body.ooxoo-fuel-page .fuel-mini-action{
  min-height:28px !important;
  padding:0 9px !important;
  border-radius:10px !important;
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:9px !important;
  padding-top:9px !important;
  gap:14px !important;
}

body.ooxoo-fuel-page .fuel-inline-price{
  align-items:center !important;
  min-height:0 !important;
}

body.ooxoo-fuel-page .fuel-inline-label{
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:13px !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:15px !important;
}

body.ooxoo-fuel-page .ooxoo-map-divicon{
  background:transparent !important;
  border:none !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-bubble{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-name{
  font-size:12px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large{
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large img{
  width:18px !important;
  height:18px !important;
}

body.ooxoo-fuel-page .ooxoo-modal-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:50 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-map-note{
  display:none !important;
}

@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
    justify-content:flex-start !important;
    width:100% !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
    flex:1 1 calc(100% - 104px) !important;
    min-width:0 !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
    flex:0 0 96px !important;
    width:96px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .fuel-brand-badge{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  body.ooxoo-fuel-page .fuel-brand-logo{
    width:20px !important;
    height:20px !important;
  }

  body.ooxoo-fuel-page .fuel-card-meta-row{
    align-items:flex-start !important;
  }

  body.ooxoo-fuel-page .fuel-card-inline-tools{
    gap:4px !important;
  }

  body.ooxoo-fuel-page .fuel-mini-action{
    min-height:26px !important;
    padding:0 8px !important;
  }
}


/* =========================================================
   R9 COMPACT / BRAND PREFIX FIX (2026-04-17)
   ========================================================= */
body.ooxoo-fuel-page .ooxoo-beta-notice{
  padding:10px 14px !important;
  min-height:0 !important;
}
body.ooxoo-fuel-page .ooxoo-beta-notice .ooxoo-beta-notice-line + .ooxoo-beta-notice-line{
  display:none !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:22px !important;
  line-height:1.12 !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs{
  display:flex !important;
  grid-template-columns:none !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
  flex:0 0 auto !important;
  min-width:96px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-row{
  gap:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right{
  gap:6px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right .ooxoo-btn{
  min-height:34px !important;
  padding:0 10px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filters{
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 360px !important;
  min-width:220px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 92px !important;
  width:92px !important;
}
body.ooxoo-fuel-page .pill-check{
  min-height:30px !important;
  padding:0 9px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:11px 12px !important;
  border-radius:17px !important;
}
body.ooxoo-fuel-page .fuel-brand-badge{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}
body.ooxoo-fuel-page .fuel-brand-logo{
  width:20px !important;
  height:20px !important;
}
body.ooxoo-fuel-page .fuel-card-title-row{
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-title{
  font-size:14px !important;
  line-height:1.18 !important;
}
body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:3px !important;
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-addr{
  font-size:11px !important;
  line-height:1.22 !important;
  margin-top:0 !important;
}
body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:4px !important;
}
body.ooxoo-fuel-page .fuel-mini-action{
  min-height:26px !important;
  padding:0 8px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:8px !important;
  padding-top:8px !important;
  gap:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-label{
  font-size:10px !important;
}
body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:14px !important;
}
@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{min-width:72px !important; padding:0 12px !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line{flex-wrap:wrap !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{flex:1 1 calc(100% - 100px) !important; min-width:0 !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{flex:0 0 92px !important;}
}


/* =========================================================
   R10 COMPACT WIDTH + BRAND PREFIX FIX
   ========================================================= */
.ooxoo-fuel-wrap{max-width:1000px !important;}
.ooxoo-beta-notice,
#ooxoo-location-topbar,
.ooxoo-fuel-hero,
.ooxoo-fuel-controls,
.ooxoo-fuel-list,
.ooxoo-pagination,
.ooxoo-empty{max-width:1000px !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;}
.ooxoo-beta-notice .ooxoo-beta-notice-line:not(:first-child){display:none !important;}
.ooxoo-beta-notice{padding:12px 14px !important;}
.ooxoo-fuel-hero-card{padding:16px 16px 14px !important;}
.ooxoo-fuel-hero-fuel-tabs{display:flex !important;flex-wrap:wrap !important;grid-template-columns:none !important;gap:8px !important;margin-top:12px !important;}
.fuel-tab{flex:0 0 auto !important;min-width:94px !important;padding:0 14px !important;border-radius:12px !important;}
.ooxoo-fuel-controls{padding:14px 14px 12px !important;}
.ooxoo-fuel-controls-right{gap:8px !important;}
.ooxoo-fuel-filters,
.ooxoo-fuel-filter-line{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;}
.ooxoo-fuel-filters{margin-top:12px !important;}
.ooxoo-fuel-filter-line{width:100% !important;min-width:0 !important;}
.filter-item.is-grow{flex:1 1 auto !important;min-width:0 !important;}
.filter-sort{flex:0 0 94px !important;min-width:94px !important;}
.pill-check{min-height:32px !important;padding:0 9px !important;font-size:11px !important;}
#ooxoo-fuel-q,#ooxoo-fuel-sort{min-height:36px !important;font-size:12px !important;}
.ooxoo-fuel-card{padding:12px 14px 11px !important;}
.fuel-card-title-row{gap:8px !important;align-items:center !important;min-height:36px;}
.fuel-card-title{font-size:15px !important;line-height:1.2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:calc(100% - 96px);}
.fuel-card-addr{margin-top:4px !important;font-size:11px !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.fuel-card-meta-row{margin-top:4px !important;gap:8px !important;}
.fuel-card-inline-tools{gap:6px !important;}
.fuel-brand-badge{width:34px !important;height:34px !important;min-width:34px !important;}
.fuel-brand-logo{width:22px !important;height:22px !important;}
.fuel-kind-chip,.fuel-good-chip{min-height:22px !important;padding:0 8px !important;font-size:10px !important;}
@media (max-width: 900px){
  .ooxoo-fuel-wrap,
  .ooxoo-beta-notice,
  #ooxoo-location-topbar,
  .ooxoo-fuel-hero,
  .ooxoo-fuel-controls,
  .ooxoo-fuel-list,
  .ooxoo-pagination,
  .ooxoo-empty{max-width:100% !important;}
}
@media (max-width: 767px){
  .ooxoo-fuel-hero-fuel-tabs{gap:6px !important;}
  .fuel-tab{min-width:76px !important;padding:0 10px !important;}
  .ooxoo-fuel-filters,.ooxoo-fuel-filter-line{flex-wrap:wrap !important;}
  .filter-item.is-grow{width:100% !important;}
  .filter-sort{flex:0 0 100px !important;min-width:100px !important;}
  .fuel-card-title{max-width:100% !important;white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;}
  .fuel-card-addr{white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;}
}
/*
  OOXOO Fuel Page
  - Desktop max width: 1050px
  - List: 2 columns desktop, 1 column mobile
  - Main hero card: “내 동네 최저가” 스타일
*/

:root{
  --ooxoo-bg:#f4f7fb;
  --ooxoo-card:#ffffff;
  --ooxoo-ink:#0f172a;
  --ooxoo-sub:#475569;
  --ooxoo-blue:#1e40af;
  --ooxoo-blue2:#2563eb;
  --ooxoo-border:#e5e7eb;
  --ooxoo-pill:#eef2ff;
  --ooxoo-shadow:0 10px 28px rgba(15,23,42,.08);
}

body.ooxoo-fuel-page{
  background:var(--ooxoo-bg);
  color:var(--ooxoo-ink);
}

.ooxoo-fuel-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:22px 14px 40px;
}

/* Header */
.ooxoo-page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 0 8px;
}
.ooxoo-page-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--ooxoo-blue);
  text-decoration:none;
}
.ooxoo-page-title:hover{
  opacity:.92;
}
.ooxoo-page-actions{
  position:absolute;
  right:0;
}

/* Notice */
.ooxoo-page-notice{
  margin:10px 0 14px;
  padding:10px 14px;
  background:#f8fafc;
  border:1px dashed #c7d2fe;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-blue);
  text-align:center;
}

/* Buttons */
.ooxoo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.ooxoo-btn-ghost{
  background:#ffffff;
  border:1px solid var(--ooxoo-border);
  color:var(--ooxoo-ink);
}
.ooxoo-btn-ghost:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.ooxoo-btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-btn-primary:hover{
  filter:brightness(1.02);
}

.ooxoo-icon-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--ooxoo-blue);
}
.ooxoo-icon-btn:hover{
  background:rgba(30,64,175,.06);
}

/* Location bar */
.ooxoo-location-topbar{
  margin:0 auto 16px;
  padding:10px 14px;
  background:#eaf0ff;
  border-radius:12px;
  color:var(--ooxoo-blue);
  font-size:14px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ooxoo-location-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Address modal (reuse IDs, just style overrides) */
.ooxoo-location-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}
.ooxoo-location-modal[aria-hidden="false"]{ display:flex; }
.ooxoo-location-modal .modal-box{
  background:#fff;
  border-radius:16px;
  padding:18px;
  width:min(380px, 92vw);
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-location-modal .modal-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
}
.ooxoo-location-modal .addr-row{ margin-bottom:8px; }
.ooxoo-location-modal select{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
}
.ooxoo-location-modal .modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.ooxoo-location-modal .btn-primary,
.ooxoo-location-modal .btn-secondary{
  min-width:110px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ooxoo-location-modal .btn-primary{
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
  color:#fff;
  border:none;
}
.ooxoo-location-modal .btn-secondary{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #d1d5db;
}

/* Hero */
.ooxoo-fuel-hero{ margin:10px 0 16px; }
.ooxoo-fuel-hero-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--ooxoo-shadow);
}
.ooxoo-fuel-hero-kicker{
  font-size:14px;
  font-weight:800;
  color:#111827;
}
.ooxoo-fuel-hero-title{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-fuel-hero-fuel-tabs{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fuel-tab{
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.fuel-tab.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}

.ooxoo-fuel-hero-body{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-hero-loc{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-hero-price{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.hero-digit{
  width:56px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#2d4fd3;
  color:#fff;
  font-size:32px;
  font-weight:900;
  line-height:1;
}
.hero-comma{
  font-size:32px;
  font-weight:900;
  color:#2d4fd3;
  margin:0 -2px 0 0;
}
.hero-unit{
  font-size:28px;
  font-weight:900;
  color:#111827;
  margin-bottom:2px;
}

.ooxoo-fuel-hero-sub{
  font-size:14px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-hero-sub b{ color:var(--ooxoo-blue2); }
.ooxoo-fuel-hero-save{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  color:#111827;
}

.ooxoo-fuel-hero-cta{ margin-top:6px; }
.ooxoo-fuel-hero-cta .ooxoo-btn{ width:100%; height:46px; }

/* Controls */
.ooxoo-fuel-controls{ margin:18px 0 12px; }
.ooxoo-fuel-controls-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ooxoo-section-title{
  margin:0;
  font-size:22px;
  font-weight:900;
}
.ooxoo-section-sub{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-fuel-controls-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.ooxoo-fuel-filters{
  margin-top:12px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.filter-item{ display:flex; align-items:center; gap:8px; }
.filter-item.is-grow{ flex:1 1 260px; }
.filter-item input[type="search"]{
  width:100%;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:700;
}
.filter-item select{
  height:40px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
}
.pill-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  font-size:13px;
  font-weight:800;
  color:#0f172a;
  cursor:pointer;
}
.pill-check input{ transform:translateY(1px); }

/* List grid */
.ooxoo-list-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 880px){
  .ooxoo-list-grid{ grid-template-columns:1fr; }
  .ooxoo-page-actions{ right:0; }
}

.ooxoo-fuel-card{
  background:var(--ooxoo-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ooxoo-fuel-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.fuel-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.fuel-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
}
.fuel-brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f6f8ff;
  border:1px solid rgba(30, 64, 175, 0.12);
  overflow:hidden;
  flex:0 0 auto;
}

.fuel-card-title .fuel-brand-logo{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  flex:0 0 auto;
}
.fuel-card-title .brand{
  color:var(--ooxoo-blue);
  font-weight:900;
  margin-right:0;
}
.fuel-card-distance{
  font-size:12px;
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}
.fuel-card-addr{
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  margin-top:4px;
}

.fuel-card-mid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* When sparkline is not available, keep price chips aligned to the start */
.fuel-card-mid.no-spark{
  justify-content:flex-start;
}


/* Price chips (multi fuel) */
.price-multi{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.price-chip{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.price-chip:hover{
  border-color:#cbd5e1;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.price-chip.is-active{
  border-color:#dbeafe;
  background:#eff6ff;
}
.price-chip .label{
  font-size:11px;
  color:var(--ooxoo-blue);
  line-height:1;
}
.price-chip .value{
  font-size:15px;
  color:#0f172a;
  line-height:1;
}
.price-chip .unit{
  font-size:11px;
  color:#0f172a;
  line-height:1;
}
.price-chip .delta{
  font-size:11px;
  font-weight:900;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}


.price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  cursor:pointer;
  font-weight:900;
}
.price-pill:hover{ filter:brightness(1.02); }
.price-pill .label{
  font-size:12px;
  color:var(--ooxoo-blue);
}
.price-pill .value{
  font-size:18px;
  color:#0f172a;
}
.price-pill .unit{
  font-size:12px;
  color:#0f172a;
}
.price-pill .delta{
  font-size:12px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.delta.up{ color:#b91c1c; }
.delta.down{ color:#1d4ed8; }

.sparkline{
  width:92px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sparkline svg{ width:100%; height:100%; }

.fuel-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fuel-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  background:var(--ooxoo-pill);
  color:var(--ooxoo-blue);
  border:1px solid #c7d2fe;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.fuel-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-mini{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-mini.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,var(--ooxoo-blue2),var(--ooxoo-blue));
}

/* Empty */
.ooxoo-empty{
  margin:14px 0 0;
  padding:14px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--ooxoo-border);
  font-size:13px;
  font-weight:800;
  color:var(--ooxoo-sub);
}

/* Pagination */
.ooxoo-pagination{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-page-link{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--ooxoo-border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}
.ooxoo-page-link.is-active{
  background:var(--ooxoo-pill);
  border-color:#c7d2fe;
  color:var(--ooxoo-blue);
}
.ooxoo-page-ellipsis{
  padding:0 6px;
  font-weight:900;
  color:#64748b;
}

/* Modal */
.ooxoo-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10010;
}
.ooxoo-modal[aria-hidden="false"]{ display:block; }
.ooxoo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.ooxoo-modal-panel{
  position:relative;
  max-width:720px;
  width:calc(100% - 22px);
  margin:60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--ooxoo-shadow);
  border:1px solid rgba(15,23,42,.08);
}
@media (max-width: 520px){
  .ooxoo-modal-panel{ margin:16px auto; }
}

.ooxoo-modal-head{
  padding:16px 16px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ooxoo-modal-title{
  font-size:16px;
  font-weight:900;
}
.ooxoo-modal-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:var(--ooxoo-sub);
}
.ooxoo-modal-body{ padding:14px 16px 16px; }

.ooxoo-modal-kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .ooxoo-modal-kpis{ grid-template-columns:1fr; }
}
.kpi{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.kpi-label{ font-size:12px; font-weight:800; color:var(--ooxoo-sub); }
.kpi-value{ margin-top:4px; font-size:14px; font-weight:900; color:#0f172a; }

.ooxoo-chart-wrap{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  position:relative;
}
.ooxoo-chart-wrap canvas{
  width:100%;
  display:block;
}
.ooxoo-chart-tooltip{
  position:absolute;
  pointer-events:none;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius:10px;
  transform:translate(-50%, -110%);
  white-space:nowrap;
}

.ooxoo-modal-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.ooxoo-modal-actions .ooxoo-btn{ flex:1; }

.ooxoo-modal-note{
  margin-top:12px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* ------------------------------
   Map modal (Fuel)
------------------------------ */
.ooxoo-fuel-map-panel{
  max-width:1050px;
}
.ooxoo-fuel-map-body{
  padding:12px 14px 14px;
}
.ooxoo-fuel-map-box{
  width:100%;
  height:min(70vh, 640px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
@media (max-width: 520px){
  .ooxoo-fuel-map-box{ height:72vh; }
}
.ooxoo-fuel-map-note{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
  line-height:1.4;
}

/* Leaflet tweaks to match OOXOO look */
.leaflet-container{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.leaflet-popup-content{
  margin:10px 12px;
}
.ooxoo-map-popup-title{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
}
.ooxoo-map-popup-addr{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:var(--ooxoo-sub);
}
.ooxoo-map-popup-prices{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ooxoo-map-popup-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}
.ooxoo-map-popup-actions a{
  text-decoration:none;
}

/* Leaflet popup styling (Fuel) */
.ooxoo-map-popup-title{
  font-weight:700;
  font-size:14px;
  margin:0 0 4px;
}
.ooxoo-map-popup-addr{
  font-size:12px;
  color:#64748b;
  margin:0 0 8px;
}
.ooxoo-map-popup-prices{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 8px;
}
.ooxoo-map-popup-actions{
  margin-top:8px;
}


/* ==============================
   Fuel brand logos + map markers
   ============================== */

.ooxoo-fuel-map-brands{
  margin-top:10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar{
  height:6px;
}
.ooxoo-fuel-map-brands::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.12);
  border-radius:999px;
}

.map-brand-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:999px;
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  white-space:nowrap;
}
.map-brand-chip .i{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
}
.map-brand-chip .i img{
  width:22px;
  height:22px;
  display:block;
}
.map-brand-chip .c{
  font-size:11px;
  font-weight:900;
  color:var(--ooxoo-sub);
}
.map-brand-chip.is-active{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 10px 22px rgba(37,99,235,.12);
}

/* Leaflet div icons (custom station markers) */
.leaflet-div-icon.ooxoo-fuel-divicon{
  background:transparent;
  border:none;
}

.ooxoo-fuel-marker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(15,23,42,.14);
  white-space:nowrap;
  position:relative;
}
.ooxoo-fuel-marker:before{
  content:'';
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:rgba(15,23,42,.14);
}
.ooxoo-fuel-marker:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#ffffff;
}
.ooxoo-fuel-marker .m-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-fuel-marker .m-logo img{
  width:22px;
  height:22px;
  display:block;
}
.ooxoo-fuel-marker .m-fuel-icon{
  font-size:14px;
}
.ooxoo-fuel-marker .m-prices{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.ooxoo-fuel-marker .m-pr{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.16);
  background:#f8fafc;
  font-weight:900;
  font-size:12px;
  color:#0f172a;
}
.ooxoo-fuel-marker .m-pr .t{
  font-size:11px;
  color:var(--ooxoo-blue);
}
.ooxoo-fuel-marker .m-pr.is-active{
  background:#eff6ff;
  border-color:rgba(37,99,235,.35);
}

/* Map popup title with logo */
.ooxoo-map-popup-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.ooxoo-popup-logo{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:#fff;
  flex:0 0 auto;
}
.ooxoo-popup-title-text{
  font-weight:900;
  color:#0f172a;
}
/*-----------------------------------------------*/
/*  "주유소" Page                             */
/*-----------------------------------------------*/
body.page-id-94 .ooxoo-fuel-hero-card .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-price-pill{
	width:90px;
}

body.page-id-94 #ooxoo-fuel-list div .value{
	font-size:12px;
	position:relative;
	left:-4px;
}

body.page-id-94 #ooxoo-fuel-list div .label{
	font-size:10px;
}

body.page-id-94 #ooxoo-fuel-list div .unit{
	position:relative;
	left:-8px;
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-list div .btn-mini{
	height:30px;
	width:35px;
	position:relative;
	left:5px;
}

body.page-id-94 #ooxoo-fuel-list div .ooxoo-slim-route{
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
	height:28px;
	font-size:10px !important;
}

body.page-id-94 .ooxoo-fuel-controls .ooxoo-fuel-controls-right a.ooxoo-btn-ghost{
	font-size:12px;
}

body.page-id-94 .ooxoo-fuel-filters .filter-item label{
	font-size:12px;
}

body.page-id-94 #ooxoo-fuel-q{
	width:360px;
	-webkit-transform:translatex(0px) translatey(0px);
	-ms-transform:translatex(0px) translatey(0px);
	transform:translatex(0px) translatey(0px);
}

body.page-id-94 #ooxoo-fuel-sort{
	position:relative;
	left:-200px;
}

body.page-id-94 #ooxoo-fuel-list .ooxoo-fuel-card{
	height:107px;
}

@media (min-width:769px){

	body.page-id-94 .ooxoo-fuel-wrap header{
	padding-top:0px !important;
	}

}


/* =========================================================
   R8 COMPACT FIX (current working list version base)
   ========================================================= */
body.ooxoo-fuel-page #ooxoo-location-current,
body.ooxoo-fuel-page #ooxoo-fuel-neighborhood,
body.ooxoo-fuel-page .ooxoo-location-current-btn,
body.ooxoo-fuel-page #ooxoo-fuel-scroll,
body.ooxoo-fuel-page .ooxoo-fuel-hero-cta{
  display:none !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
  display:flex !important;
  grid-template-columns:none !important;
  width:auto !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
  width:auto !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap{
  gap:8px !important;
}

body.ooxoo-fuel-page .ooxoo-btn-goodmap-icon{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  display:block !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filters{
  display:block !important;
  margin-top:12px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item{
  flex:0 0 auto !important;
  min-width:0 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 380px !important;
  min-width:180px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 96px !important;
  width:96px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-q{
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  padding:0 12px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page #ooxoo-fuel-sort{
  width:100% !important;
  min-height:36px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

body.ooxoo-fuel-page .pill-check{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:12px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:16px 16px 14px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:24px !important;
  line-height:1.14 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-price{
  min-height:60px !important;
  margin-top:10px !important;
}

body.ooxoo-fuel-page .hero-digit{
  width:44px !important;
  height:46px !important;
  font-size:26px !important;
  border-radius:12px !important;
}

body.ooxoo-fuel-page .hero-unit{
  height:46px !important;
  font-size:18px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-hero-sub{
  margin-top:8px !important;
  gap:4px !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:12px 14px !important;
  min-height:auto !important;
  border-radius:18px !important;
}

body.ooxoo-fuel-page .fuel-brand-badge{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

body.ooxoo-fuel-page .fuel-brand-logo{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
}

body.ooxoo-fuel-page .fuel-card-title-row{
  gap:7px !important;
}

body.ooxoo-fuel-page .fuel-card-title{
  font-size:15px !important;
  line-height:1.2 !important;
}

body.ooxoo-fuel-page .fuel-kind-chip,
body.ooxoo-fuel-page .fuel-good-chip{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:11px !important;
  gap:5px !important;
}

body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:4px !important;
  gap:8px !important;
  align-items:center !important;
}

body.ooxoo-fuel-page .fuel-card-addr{
  margin-top:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  color:var(--fuel-muted) !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:normal !important;
}

body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:6px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-card-distance{
  font-size:12px !important;
}

body.ooxoo-fuel-page .fuel-mini-action{
  min-height:28px !important;
  padding:0 9px !important;
  border-radius:10px !important;
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:9px !important;
  padding-top:9px !important;
  gap:14px !important;
}

body.ooxoo-fuel-page .fuel-inline-price{
  align-items:center !important;
  min-height:0 !important;
}

body.ooxoo-fuel-page .fuel-inline-label{
  font-size:11px !important;
}

body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:13px !important;
  white-space:nowrap !important;
}

body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:15px !important;
}

body.ooxoo-fuel-page .ooxoo-map-divicon{
  background:transparent !important;
  border:none !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-bubble{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;
}

body.ooxoo-fuel-page .ooxoo-map-marker-name{
  font-size:12px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large{
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11px !important;
  gap:6px !important;
}

body.ooxoo-fuel-page .fuel-good-chip.is-map.is-map-large img{
  width:18px !important;
  height:18px !important;
}

body.ooxoo-fuel-page .ooxoo-modal-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:50 !important;
}

body.ooxoo-fuel-page .ooxoo-fuel-map-note{
  display:none !important;
}

@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right{
    justify-content:flex-start !important;
    width:100% !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-controls-right .ooxoo-btn{
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item.is-grow{
    flex:1 1 calc(100% - 104px) !important;
    min-width:0 !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-sort{
    flex:0 0 96px !important;
    width:96px !important;
  }

  body.ooxoo-fuel-page .ooxoo-fuel-controls .ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
    flex:0 0 auto !important;
  }

  body.ooxoo-fuel-page .fuel-brand-badge{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  body.ooxoo-fuel-page .fuel-brand-logo{
    width:20px !important;
    height:20px !important;
  }

  body.ooxoo-fuel-page .fuel-card-meta-row{
    align-items:flex-start !important;
  }

  body.ooxoo-fuel-page .fuel-card-inline-tools{
    gap:4px !important;
  }

  body.ooxoo-fuel-page .fuel-mini-action{
    min-height:26px !important;
    padding:0 8px !important;
  }
}


/* =========================================================
   R9 COMPACT / BRAND PREFIX FIX (2026-04-17)
   ========================================================= */
body.ooxoo-fuel-page .ooxoo-beta-notice{
  padding:10px 14px !important;
  min-height:0 !important;
}
body.ooxoo-fuel-page .ooxoo-beta-notice .ooxoo-beta-notice-line + .ooxoo-beta-notice-line{
  display:none !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-card{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-title{
  font-size:22px !important;
  line-height:1.12 !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs{
  display:flex !important;
  grid-template-columns:none !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{
  flex:0 0 auto !important;
  min-width:96px !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls{
  padding:14px 14px 12px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-row{
  gap:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right{
  gap:6px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-controls-right .ooxoo-btn{
  min-height:34px !important;
  padding:0 10px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filters{
  margin-top:10px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:0 1 360px !important;
  min-width:220px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 92px !important;
  width:92px !important;
}
body.ooxoo-fuel-page .pill-check{
  min-height:30px !important;
  padding:0 9px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .ooxoo-fuel-card{
  padding:11px 12px !important;
  border-radius:17px !important;
}
body.ooxoo-fuel-page .fuel-brand-badge{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}
body.ooxoo-fuel-page .fuel-brand-logo{
  width:20px !important;
  height:20px !important;
}
body.ooxoo-fuel-page .fuel-card-title-row{
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-title{
  font-size:14px !important;
  line-height:1.18 !important;
}
body.ooxoo-fuel-page .fuel-card-meta-row{
  margin-top:3px !important;
  gap:6px !important;
}
body.ooxoo-fuel-page .fuel-card-addr{
  font-size:11px !important;
  line-height:1.22 !important;
  margin-top:0 !important;
}
body.ooxoo-fuel-page .fuel-card-inline-tools{
  gap:4px !important;
}
body.ooxoo-fuel-page .fuel-mini-action{
  min-height:26px !important;
  padding:0 8px !important;
  font-size:11px !important;
}
body.ooxoo-fuel-page .fuel-card-price-row{
  margin-top:8px !important;
  padding-top:8px !important;
  gap:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-label{
  font-size:10px !important;
}
body.ooxoo-fuel-page .fuel-inline-amount{
  font-size:12px !important;
}
body.ooxoo-fuel-page .fuel-inline-price.is-active .fuel-inline-amount{
  font-size:14px !important;
}
@media (max-width: 767px){
  body.ooxoo-fuel-page .ooxoo-fuel-hero-fuel-tabs .fuel-tab{min-width:72px !important; padding:0 12px !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line{flex-wrap:wrap !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-item.is-grow{flex:1 1 calc(100% - 100px) !important; min-width:0 !important;}
  body.ooxoo-fuel-page .ooxoo-fuel-filter-line .filter-sort{flex:0 0 92px !important;}
}


/* =========================================================
   R10 COMPACT WIDTH + BRAND PREFIX FIX
   ========================================================= */
.ooxoo-fuel-wrap{max-width:1000px !important;}
.ooxoo-beta-notice,
#ooxoo-location-topbar,
.ooxoo-fuel-hero,
.ooxoo-fuel-controls,
.ooxoo-fuel-list,
.ooxoo-pagination,
.ooxoo-empty{max-width:1000px !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;}
.ooxoo-beta-notice .ooxoo-beta-notice-line:not(:first-child){display:none !important;}
.ooxoo-beta-notice{padding:12px 14px !important;}
.ooxoo-fuel-hero-card{padding:16px 16px 14px !important;}
.ooxoo-fuel-hero-fuel-tabs{display:flex !important;flex-wrap:wrap !important;grid-template-columns:none !important;gap:8px !important;margin-top:12px !important;}
.fuel-tab{flex:0 0 auto !important;min-width:94px !important;padding:0 14px !important;border-radius:12px !important;}
.ooxoo-fuel-controls{padding:14px 14px 12px !important;}
.ooxoo-fuel-controls-right{gap:8px !important;}
.ooxoo-fuel-filters,
.ooxoo-fuel-filter-line{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;}
.ooxoo-fuel-filters{margin-top:12px !important;}
.ooxoo-fuel-filter-line{width:100% !important;min-width:0 !important;}
.filter-item.is-grow{flex:1 1 auto !important;min-width:0 !important;}
.filter-sort{flex:0 0 94px !important;min-width:94px !important;}
.pill-check{min-height:32px !important;padding:0 9px !important;font-size:11px !important;}
#ooxoo-fuel-q,#ooxoo-fuel-sort{min-height:36px !important;font-size:12px !important;}
.ooxoo-fuel-card{padding:12px 14px 11px !important;}
.fuel-card-title-row{gap:8px !important;align-items:center !important;min-height:36px;}
.fuel-card-title{font-size:15px !important;line-height:1.2 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:calc(100% - 96px);}
.fuel-card-addr{margin-top:4px !important;font-size:11px !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.fuel-card-meta-row{margin-top:4px !important;gap:8px !important;}
.fuel-card-inline-tools{gap:6px !important;}
.fuel-brand-badge{width:34px !important;height:34px !important;min-width:34px !important;}
.fuel-brand-logo{width:22px !important;height:22px !important;}
.fuel-kind-chip,.fuel-good-chip{min-height:22px !important;padding:0 8px !important;font-size:10px !important;}
@media (max-width: 900px){
  .ooxoo-fuel-wrap,
  .ooxoo-beta-notice,
  #ooxoo-location-topbar,
  .ooxoo-fuel-hero,
  .ooxoo-fuel-controls,
  .ooxoo-fuel-list,
  .ooxoo-pagination,
  .ooxoo-empty{max-width:100% !important;}
}
@media (max-width: 767px){
  .ooxoo-fuel-hero-fuel-tabs{gap:6px !important;}
  .fuel-tab{min-width:76px !important;padding:0 10px !important;}
  .ooxoo-fuel-filters,.ooxoo-fuel-filter-line{flex-wrap:wrap !important;}
  .filter-item.is-grow{width:100% !important;}
  .filter-sort{flex:0 0 100px !important;min-width:100px !important;}
  .fuel-card-title{max-width:100% !important;white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;}
  .fuel-card-addr{white-space:normal !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;}
}


/* =========================================================
   R11 PATCH
   - stronger brand normalization UI
   - working local filters
   - highlight focused station in map
   - readable good map label
   ========================================================= */
.ooxoo-fuel-wrap,
.ooxoo-beta-notice,
.ooxoo-location-topbar,
.ooxoo-fuel-hero,
.ooxoo-fuel-controls,
.ooxoo-fuel-list,
.ooxoo-pagination{
  max-width:1050px;
  margin-left:auto;
  margin-right:auto;
}

.ooxoo-beta-notice{
  padding:12px 14px !important;
}
.ooxoo-beta-notice .ooxoo-beta-notice-line + .ooxoo-beta-notice-line{
  display:none !important;
}

.ooxoo-fuel-hero-fuel-tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.fuel-tab{
  min-width:92px !important;
  flex:0 0 auto !important;
}

.ooxoo-fuel-filter-line{
  flex-wrap:nowrap !important;
  align-items:center !important;
}
.ooxoo-fuel-filter-line .filter-item.is-grow{
  flex:1 1 420px !important;
  min-width:240px !important;
}
.ooxoo-fuel-filter-line .filter-sort{
  flex:0 0 96px !important;
}
.ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
  flex:0 0 auto !important;
}
.pill-check{
  min-height:32px !important;
  padding:0 10px !important;
}
.fuel-card-title{
  font-size:15px !important;
  line-height:1.18 !important;
}
.fuel-card-addr{
  margin-top:4px !important;
  font-size:11px !important;
  line-height:1.26 !important;
}
.fuel-card-meta-row{
  gap:8px !important;
}
.fuel-card-inline-tools{
  gap:5px !important;
}
.fuel-mini-action{
  min-height:26px !important;
  padding:0 9px !important;
  font-size:11px !important;
}
.fuel-card-price-row{
  gap:14px !important;
}
.fuel-inline-label{
  font-size:10px !important;
}
.fuel-inline-amount{
  font-size:13px !important;
}
.fuel-inline-price.is-active .fuel-inline-amount{
  font-size:15px !important;
}

.ooxoo-map-marker-bubble.is-good-only{
  box-shadow:0 0 0 3px rgba(255,180,91,.24), 0 12px 28px rgba(15,23,42,.22);
  border-color:rgba(255,170,84,.42);
}
.fuel-good-chip.is-map.is-map-large{
  min-height:30px !important;
  padding:0 11px !important;
  gap:7px !important;
  background:linear-gradient(180deg,#ffe0ba,#ffc98f) !important;
  border:1px solid rgba(255,166,95,.58) !important;
  color:#7a3a00 !important;
  font-size:12px !important;
  font-weight:950 !important;
}
.fuel-good-chip.is-map.is-map-large img{
  width:18px !important;
  height:18px !important;
}
.ooxoo-map-marker-bubble.is-good-only .map-marker-price{
  color:#b02020;
}

@media (max-width: 900px){
  .ooxoo-fuel-filter-line{
    flex-wrap:wrap !important;
  }
  .ooxoo-fuel-filter-line .filter-item.is-grow{
    flex:1 1 calc(100% - 104px) !important;
    min-width:0 !important;
  }
  .ooxoo-fuel-filter-line .filter-sort{
    flex:0 0 96px !important;
  }
  .ooxoo-fuel-filter-line .filter-item:nth-child(n+3){
    flex:0 0 auto !important;
  }
}
@media (max-width: 640px){
  .ooxoo-fuel-filter-line{
    gap:6px !important;
  }
  .pill-check{
    min-height:30px !important;
    padding:0 8px !important;
    font-size:11px !important;
  }
  .fuel-tab{
    min-width:84px !important;
  }
}


/* =========================================================
   R30 LOCATION MAIN PARITY — 20260506_r30_main_location_parity
   Only topbar/modal location UI. No fuel card/list/hero layout override.
   ========================================================= */
body.ooxoo-fuel-page #ooxoo-location-topbar{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:10px 16px !important;
  text-align:center !important;
}
body.ooxoo-fuel-page #ooxoo-location-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100% - 76px) !important;
  flex:0 1 auto !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
}
body.ooxoo-fuel-page #ooxoo-location-topbar .ooxoo-location-actions{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
body.ooxoo-fuel-page #ooxoo-location-refresh,
body.ooxoo-fuel-page #ooxoo-location-address-open{
  width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;
  padding:0 !important;border-radius:8px !important;transform:none !important;
}
body.ooxoo-fuel-page #ooxoo-location-address{
  position:fixed !important;inset:0 !important;background:rgba(0,0,0,.45) !important;
  align-items:center !important;justify-content:center !important;z-index:10001 !important;
  padding:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
body.ooxoo-fuel-page #ooxoo-location-address[aria-hidden="false"],
body.ooxoo-fuel-page #ooxoo-location-address.is-open{display:flex !important;}
body.ooxoo-fuel-page #ooxoo-location-address .modal-box{
  background:#fff !important;color:#0f172a !important;border-radius:14px !important;padding:18px !important;
  max-width:360px !important;width:90% !important;max-height:calc(100vh - 40px) !important;overflow:auto !important;
  text-align:center !important;box-shadow:0 24px 60px rgba(0,0,0,.18) !important;border:0 !important;
}
body.ooxoo-fuel-page #ooxoo-location-address .modal-title{margin:0 0 10px !important;font-size:15px !important;font-weight:900 !important;color:#0f172a !important;}
body.ooxoo-fuel-page #ooxoo-location-address input,
body.ooxoo-fuel-page #ooxoo-location-address select{width:100% !important;min-height:42px !important;padding:9px 10px !important;border-radius:12px !important;border:1px solid #d7e0ea !important;background:#fff !important;color:#0f172a !important;font-size:13px !important;font-weight:800 !important;box-shadow:none !important;}
body.ooxoo-fuel-page #ooxoo-location-address .modal-actions{margin-top:12px !important;display:flex !important;gap:10px !important;justify-content:center !important;}
body.ooxoo-fuel-page #ooxoo-location-address .ooxoo-location-current-btn,
body.ooxoo-fuel-page #ooxoo-location-address #ooxoo-location-current,
body.ooxoo-fuel-page #ooxoo-location-address [data-location-current],
body.ooxoo-fuel-page #ooxoo-location-address [data-current-location],
body.ooxoo-fuel-page #ooxoo-location-address [data-action="current-location"],
body.ooxoo-fuel-page #ooxoo-location-address [data-action="current"]{display:none !important;}
@media(max-width:767px){
  body.ooxoo-fuel-page #ooxoo-location-topbar{padding:10px 14px !important;gap:8px !important;}
  body.ooxoo-fuel-page #ooxoo-location-label{max-width:calc(100% - 68px) !important;font-size:13px !important;letter-spacing:-.035em !important;}
  body.ooxoo-fuel-page #ooxoo-location-address .modal-box{max-width:360px !important;width:calc(100% - 28px) !important;padding:18px !important;}
}