:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#101010;--paper:#fffdf3;--paper-2:#f7f0dc;--acid:#f8f240;--cyan:#42d9ff;--pink:#ff5aa5;--green:#2ee66b;--orange:#ff8a00;--blue:#355dff;--shadow:8px 8px 0 var(--ink);--shadow-sm:4px 4px 0 var(--ink);--oil-market-card-width:calc((100vw - 112px) / 4)}*{box-sizing:border-box}html{background:var(--paper);min-width:320px}body{background:linear-gradient(90deg, #1010100d 1px, transparent 1px), linear-gradient(#1010100d 1px, transparent 1px), var(--paper);color:var(--ink);background-size:28px 28px;margin:0;font-family:Arial,Apple SD Gothic Neo,Noto Sans KR,sans-serif}button,input,select{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.oil-app{min-height:100vh;padding:20px}.hero-band{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:stretch;gap:18px;min-height:min(72vh,720px);display:grid}.hero-copy,.photo-slab,.panel,.control-strip{border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);border-radius:8px}.hero-copy{background:linear-gradient(135deg, transparent 0 72%, #ff5aa538 72% 100%), var(--acid);flex-direction:column;justify-content:space-between;padding:clamp(24px,5vw,56px);display:flex}.topline,.panel-heading,.station-title,.station-tags,.coord-row,.global-row,.lowest-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.stamp,.data-pill,.label,.updated,.location-chip,.station-tags span{border:2px solid var(--ink);letter-spacing:0;white-space:nowrap;background:#fff;border-radius:999px;justify-content:center;align-items:center;padding:8px 10px;font-size:12px;font-weight:900;line-height:1;display:inline-flex}.data-pill.good{background:var(--green)}.data-pill.warn{background:var(--orange)}.data-pill.demo{background:var(--cyan)}.hero-copy h1{letter-spacing:0;word-break:keep-all;margin:36px 0 0;font-size:clamp(64px,13vw,168px);line-height:.88}.hero-subtitle{max-width:680px;margin:20px 0 0;font-size:clamp(19px,3vw,34px);font-weight:900;line-height:1.15}.hero-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px;display:grid}.hero-metrics div{border:3px solid var(--ink);min-width:0;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;padding:16px}.hero-metrics strong{overflow-wrap:anywhere;font-size:clamp(24px,3vw,42px);line-height:1;display:block}.hero-metrics span{margin-top:8px;font-size:13px;font-weight:900;display:block}.photo-slab{background:var(--cyan);min-height:420px;position:relative;overflow:hidden}.photo-slab img{object-fit:cover;filter:saturate(1.3)contrast(1.12);width:100%;height:100%;min-height:100%}.photo-slab:after{content:"";mix-blend-mode:multiply;background:linear-gradient(135deg,#f8f240cc,#0000 46%),repeating-linear-gradient(-8deg,#1010101f 0 6px,#0000 6px 16px);position:absolute;inset:0}.pump-card{z-index:2;border:3px solid var(--ink);background:var(--pink);width:160px;height:160px;box-shadow:var(--shadow);border-radius:8px;place-items:center;display:grid;position:absolute;bottom:22px;right:22px;transform:rotate(-2deg)}.pump-card span{font-size:76px;font-weight:900;line-height:.8}.pump-card strong{font-size:18px}.control-strip{background:#fff;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:center;gap:14px;margin:28px 0;padding:14px;display:grid}.segmented,.radius-control{scrollbar-width:none;flex-wrap:wrap;gap:8px;min-width:0;display:flex;overflow:visible}.segmented{grid-column:1/-1}.segmented::-webkit-scrollbar{display:none}.radius-control::-webkit-scrollbar{display:none}.segmented button,.radius-control button,.locate-button,.area-select select{border:3px solid var(--ink);background:var(--paper-2);white-space:nowrap;min-height:44px;box-shadow:var(--shadow-sm);border-radius:8px;font-weight:900}.segmented button{min-width:92px;padding:0 16px}.radius-control button{min-width:68px}.segmented button.active,.radius-control button.active{background:var(--cyan);box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.locate-button{background:var(--green);justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex}.location-place{border:3px solid var(--ink);text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:280px;min-height:44px;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;align-items:center;padding:0 12px;font-size:13px;font-weight:900;display:inline-flex;overflow:hidden}.area-select{align-items:center;gap:8px;min-width:142px;font-weight:900;display:inline-flex}.area-select span{border:3px solid var(--ink);background:var(--acid);height:44px;box-shadow:var(--shadow-sm);border-radius:8px;justify-content:center;align-items:center;padding:0 10px;display:inline-flex}.area-select select{appearance:none;background:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%), #fff;background-position:calc(100% - 16px) 18px,calc(100% - 10px) 18px,0 0;background-repeat:no-repeat;background-size:7px 7px,7px 7px,100% 100%;width:96px;padding:0 34px 0 12px}.district-select{min-width:168px}.district-select select{width:118px}.area-select select:disabled{color:#555;cursor:not-allowed;opacity:.7}.locate-icon{border:3px solid var(--ink);background:#fff;border-radius:50%;width:16px;height:16px;position:relative}.locate-icon:after{content:"";background:var(--ink);border-radius:50%;position:absolute;inset:3px}.dashboard-grid{grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);align-items:start;gap:18px;display:grid}.price-panels{grid-column:1/-1;grid-template-columns:minmax(0, calc(var(--oil-market-card-width) + 42px)) minmax(0, calc(var(--oil-market-card-width) + 42px)) minmax(360px, 1fr);align-items:stretch;gap:18px;display:grid}.price-column,.price-panels>.lowest-panel,.price-panels>.map-panel{width:100%;min-width:0}.price-column{grid-template-rows:auto minmax(0,1fr);gap:18px;display:grid}.price-column>.panel{width:100%}.panel{background:#fff;padding:18px}.rank-panel{grid-row:auto}.news-panel{grid-column:1/-1}.panel-heading{align-items:flex-start;margin-bottom:16px}.panel-heading h2{margin:8px 0 0;font-size:clamp(24px,3vw,42px);line-height:1}.label{background:var(--pink)}.updated{background:var(--acid)}.station-list{justify-items:start;gap:6px;display:grid}.station-row{border:2px solid var(--ink);background:var(--paper);min-height:50px;box-shadow:var(--shadow-sm);width:min(100%, var(--oil-market-card-width));border-radius:8px;grid-template-columns:34px minmax(0,1fr) minmax(74px,auto);align-items:center;gap:6px;padding:5px 7px;display:grid}.station-row:nth-child(2n){background:#eafff0}.station-row.active{background:var(--acid);box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.station-row.highlighted:not(.active){background:#dffbff}.station-row:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.station-row.skeleton{background:linear-gradient(90deg, #efefef, #fff, #efefef), var(--paper);background-size:240px 100%;min-height:50px;animation:1.2s linear infinite shimmer}.station-empty{border:2px solid var(--ink);min-height:50px;box-shadow:var(--shadow-sm);width:min(100%, var(--oil-market-card-width));background:#fff;border-radius:8px;align-content:center;gap:4px;padding:8px 10px;display:grid}.station-empty strong,.station-empty span{display:block}.station-empty strong{font-size:14px;line-height:1.25}.station-empty span{color:#343434;font-size:12px;font-weight:900;line-height:1.35}@keyframes shimmer{0%{background-position:-240px 0}to{background-position:240px 0}}.rank{border:2px solid var(--ink);background:var(--orange);border-radius:50%;place-items:center;width:30px;height:30px;font-size:16px;font-weight:900;display:grid}.station-main{min-width:0}.station-title strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;line-height:1.1;overflow:hidden}.station-title span{border:2px solid var(--ink);background:var(--cyan);border-radius:8px;flex:none;padding:2px 5px;font-size:10px;font-weight:900}.station-main p{color:#343434;text-overflow:ellipsis;white-space:nowrap;margin:1px 0 2px;font-size:11px;line-height:1.15;overflow:hidden}.station-tags{flex-wrap:wrap;justify-content:flex-start;gap:4px}.station-tags span{background:#fff;padding:2px 5px;font-size:10px}.station-price{text-align:right}.station-price strong{font-size:clamp(18px,2vw,24px);line-height:.95;display:block}.station-price span,.global-price span{margin-top:2px;font-size:10px;font-weight:900;display:block}.map-panel{background:var(--cyan);flex-direction:column;min-width:0;display:flex}.osm-map{border:3px solid var(--ink);background:#dffbff;border-radius:8px;flex:250px;height:auto;min-height:230px;position:relative;overflow:hidden}.map-tiles{position:absolute;inset:0}.map-tiles img{-webkit-user-select:none;user-select:none;width:256px;max-width:none;height:256px;position:absolute}.user-marker,.map-marker{z-index:2;border:3px solid var(--ink);border-radius:50%;place-items:center;font-weight:900;display:grid;position:absolute;transform:translate(-50%,-50%)}.user-marker{background:var(--pink);width:30px;height:30px;box-shadow:0 0 0 8px #ff5aa538}.user-marker:after{content:"";background:var(--ink);border-radius:50%;width:8px;height:8px}.map-marker{background:var(--green);width:34px;height:34px;box-shadow:3px 3px 0 var(--ink)}.map-marker.active{z-index:4;background:var(--acid);width:42px;height:42px;box-shadow:5px 5px 0 var(--ink)}.map-marker.highlighted:not(.active){z-index:4;background:var(--pink);box-shadow:5px 5px 0 var(--ink)}.map-marker:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.map-popover{z-index:5;border:3px solid var(--ink);width:232px;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;padding:10px;position:absolute;transform:translate(-50%)}.map-popover strong,.map-popover span,.map-popover a{display:block}.map-popover strong{font-size:15px;line-height:1.22}.map-popover span{margin-top:6px;font-size:12px;font-weight:900}.map-popover-tags{flex-wrap:wrap;gap:5px;margin-top:8px;display:flex}.map-popover-tags em{border:2px solid var(--ink);background:var(--cyan);border-radius:999px;padding:4px 6px;font-size:11px;line-height:1}.map-popover a{border:2px solid var(--ink);background:var(--green);text-align:center;border-radius:8px;margin-top:8px;padding:7px 8px;font-size:12px;font-weight:900}.map-controls{z-index:3;gap:6px;display:grid;position:absolute;top:10px;right:10px}.map-controls button{border:3px solid var(--ink);width:34px;height:34px;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;font-size:20px;font-weight:900;line-height:1}.map-credit{z-index:3;border:2px solid var(--ink);background:#ffffffeb;border-radius:8px;padding:5px 7px;font-size:11px;font-weight:900;position:absolute;bottom:8px;right:8px}.coord-row{flex-wrap:wrap;margin-top:12px}.price-panels>.map-panel .coord-row{margin-top:8px}.coord-row span{border:2px solid var(--ink);background:#fff;border-radius:8px;padding:8px 10px;font-weight:900}.price-panels>.map-panel .coord-row span{padding:5px 7px;font-size:11px}.location-diagnostics{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.price-panels>.map-panel .location-diagnostics{gap:5px;margin-top:7px}.location-diagnostics span{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:7px 9px;font-size:12px;font-weight:900}.price-panels>.map-panel .location-diagnostics span{padding:4px 7px;font-size:10px}.permission-state.granted{background:var(--green)}.permission-state.prompt,.permission-state.unknown{background:var(--acid)}.permission-state.denied{background:var(--pink)}.permission-state.unsupported{background:var(--orange)}.best-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;display:grid}.price-panels>.map-panel .best-compare{gap:6px;margin-top:7px}.best-compare div{border:2px solid var(--ink);background:#fff;border-radius:8px;min-width:0;padding:10px}.price-panels>.map-panel .best-compare div{padding:6px}.best-compare span,.best-compare strong,.best-compare em{display:block}.best-compare span{font-size:11px;font-weight:900}.best-compare strong{margin-top:5px;font-size:22px;line-height:1}.price-panels>.map-panel .best-compare strong{margin-top:3px;font-size:18px}.best-compare em{text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-size:12px;font-style:normal;font-weight:900;line-height:1.25;overflow:hidden}.price-panels>.map-panel .best-compare em{margin-top:3px;font-size:10px}.map-detail{border-top:3px solid var(--ink);grid-template-columns:minmax(0,1fr) auto;gap:14px;margin-top:12px;padding-top:12px;display:grid}.price-panels>.map-panel .map-detail{gap:8px;margin-top:8px;padding-top:8px}.map-detail-main{min-width:0}.map-detail-main strong{margin-top:8px;font-size:20px;line-height:1.2;display:block}.price-panels>.map-panel .map-detail-main strong{margin-top:5px;font-size:16px}.map-detail-main p{color:#343434;margin:7px 0 10px;font-size:14px;line-height:1.35}.price-panels>.map-panel .map-detail-main p{text-overflow:ellipsis;white-space:nowrap;margin:4px 0 6px;font-size:11px;line-height:1.2;overflow:hidden}.map-detail-side{text-align:right;min-width:116px}.price-panels>.map-panel .map-detail-side{min-width:86px}.map-detail-side strong,.map-detail-side span,.map-detail-side a{display:block}.map-detail-side strong{font-size:34px;line-height:.95}.price-panels>.map-panel .map-detail-side strong{font-size:22px}.map-detail-side span{margin-top:4px;font-size:12px;font-weight:900}.map-detail-side a{border:3px solid var(--ink);background:var(--acid);text-align:center;box-shadow:var(--shadow-sm);border-radius:8px;margin-top:12px;padding:9px 12px;font-weight:900}.price-panels>.map-panel .map-detail-side a{border-width:2px;margin-top:7px;padding:6px 8px;font-size:12px}.location-chip.loading{background:var(--orange)}.location-chip.ready{background:var(--green)}.location-chip.blocked,.averages-panel{background:var(--pink)}.price-column .averages-panel .panel-heading{margin-bottom:10px}.price-column .averages-panel .panel-heading h2{font-size:24px}.average-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.average-card{border:3px solid var(--ink);min-width:0;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;padding:12px}.price-column .average-grid{gap:6px}.price-column .average-card{border-width:2px;padding:7px}.average-card.active{background:var(--acid)}.average-card span,.average-card strong,.average-card em{display:block}.average-card span{font-size:13px;font-weight:900}.price-column .average-card span{font-size:11px}.average-card strong{margin-top:8px;font-size:clamp(22px,4vw,34px);line-height:1}.price-column .average-card strong{margin-top:4px;font-size:20px}em{font-style:normal;font-weight:900}.up{color:#b01131}.down{color:#135f2b}.global-panel{background:var(--acid);grid-column:1/-1}.global-title-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.outlook-pill{border:2px solid var(--ink);white-space:nowrap;background:#fff;border-radius:999px;align-items:center;padding:5px 8px;font-size:12px;font-weight:900;line-height:1;display:inline-flex}.outlook-pill.up{background:var(--pink)}.outlook-pill.down{color:#fff;background:var(--blue)}.outlook-pill.down.strong{box-shadow:4px 4px 0 var(--blue);background:#101010;border-width:3px;transform:translate(-1px,-1px)}.outlook-pill.flat,.outlook-pill.wait{background:var(--paper-2)}.global-outlook-summary{max-width:760px;margin-top:7px;font-size:14px;line-height:1.25;display:block}.global-outlook-summary.down.strong{border:3px solid var(--ink);box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;padding:7px 9px;display:inline-block}.global-outlook-detail{margin-top:6px;font-size:12px;font-weight:900;display:block}.lowest-panel{background:var(--green)}.global-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.global-row{border:3px solid var(--ink);box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:12px;display:grid}.global-row div:first-child{min-width:0}.global-row div:first-child strong{font-size:22px;display:block}.global-row div:first-child span{margin-top:3px;font-size:12px;font-weight:900;display:block}.global-price{text-align:right}.global-price strong{font-size:24px;line-height:1}.global-row em{border:2px solid var(--ink);background:var(--paper-2);border-radius:999px;grid-column:1/-1;justify-self:end;padding:5px 8px;font-size:12px;line-height:1}.global-charts{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;display:grid}.mini-oil-chart{border:2px solid var(--ink);background:#fff;border-radius:8px;min-width:0;padding:6px}.mini-chart-head,.mini-chart-scale{justify-content:center;align-items:center;gap:6px;display:flex}.mini-chart-head{justify-content:space-between}.mini-chart-head span,.mini-chart-head strong{border:2px solid var(--ink);border-radius:999px;align-items:center;min-height:20px;padding:0 6px;font-size:10px;font-weight:900;line-height:1;display:inline-flex}.mini-chart-head span{background:var(--paper-2)}.mini-chart-head strong{background:var(--acid)}.mini-oil-chart svg{background-color:#f7fbff;background-image:linear-gradient(#1010100f 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:100% 18px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:2px solid #10101038;border-radius:6px;width:100%;height:96px;margin-top:4px;overflow:visible}.mini-oil-chart .chart-grid{stroke:#1010102e;stroke-width:1px}.mini-oil-chart .chart-axis{stroke:var(--ink);stroke-width:2px}.mini-oil-chart .chart-x-tick{stroke:var(--ink);stroke-width:1.5px}.mini-oil-chart .chart-y-label,.mini-oil-chart .chart-x-label{fill:var(--ink);font-size:9px;font-weight:900}.mini-oil-chart .chart-x-label{text-anchor:middle}.mini-oil-chart polygon{fill:#355dff24}.mini-oil-chart polyline{fill:none;stroke:var(--blue);stroke-linecap:round;stroke-linejoin:round;stroke-width:4px}.mini-oil-chart.up polyline{stroke:#b01131}.mini-oil-chart.up polygon{fill:#ff5aa529}.mini-oil-chart.down polyline{stroke:var(--blue)}.mini-oil-chart.down .mini-chart-head strong{color:#fff;background:var(--blue)}.lowest-list{justify-items:start;gap:6px;display:grid}.lowest-row{border:2px solid var(--ink);min-height:48px;box-shadow:var(--shadow-sm);width:min(100%, var(--oil-market-card-width));background:#fff;border-radius:8px;flex-wrap:wrap;gap:6px;padding:5px 7px}.lowest-row.skeleton{background:linear-gradient(90deg, #efefef, #fff, #efefef), var(--paper);background-size:240px 100%;min-height:48px;animation:1.2s linear infinite shimmer}.lowest-row>div:nth-child(2){flex:auto;min-width:0}.lowest-row>div:nth-child(2) strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.1;display:block;overflow:hidden}.lowest-row>div:nth-child(2) span{border:2px solid var(--ink);background:var(--cyan);border-radius:8px;margin-top:2px;padding:2px 5px;font-size:10px;font-weight:900;display:inline-block}.lowest-row p{color:#343434;text-overflow:ellipsis;white-space:nowrap;margin:1px 0 0;font-size:11px;line-height:1.15;overflow:hidden}.news-panel{background:var(--blue)}.news-panel .panel-heading{color:#fff}.news-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.news-list a{border:3px solid var(--ink);min-height:160px;box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;flex-direction:column;justify-content:space-between;padding:14px;display:flex}.news-list strong{font-size:16px;line-height:1.32;display:block}.news-list em{color:#222;border-top:2px solid #1010102e;margin-top:10px;padding-top:10px;font-size:14px;font-style:normal;font-weight:900;line-height:1.35;display:block}.news-list span{margin-top:16px;font-size:12px;font-weight:900;display:block}@media (max-width:1120px){:root{--oil-market-card-width:calc((100vw - 92px) / 2)}.price-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.price-panels>.map-panel{grid-column:1/-1}.hero-band,.dashboard-grid{grid-template-columns:1fr}.hero-band{min-height:auto}.photo-slab{min-height:320px}.rank-panel{grid-row:auto}.news-list,.global-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){:root{--oil-market-card-width:calc(100vw - 62px)}.price-panels{grid-template-columns:1fr}.price-panels>.map-panel{grid-column:auto}.oil-app{padding:10px}.hero-copy,.photo-slab,.panel,.control-strip{box-shadow:5px 5px 0 var(--ink)}.topline,.panel-heading{flex-wrap:wrap}.hero-copy{padding:22px}.hero-copy h1{font-size:clamp(54px,22vw,96px)}.hero-metrics,.average-grid,.global-list,.news-list,.control-strip{grid-template-columns:1fr}.location-place{max-width:none}.area-select{width:100%}.area-select select{flex:auto;width:auto}.segmented button{min-width:78px}.station-row{grid-template-columns:34px minmax(0,1fr);align-items:start}.rank{width:30px;height:30px;font-size:16px}.station-price{grid-column:1/-1;justify-content:flex-end;align-items:baseline;gap:4px;display:flex}.station-price strong{font-size:28px}.map-detail{grid-template-columns:1fr}.map-detail-side{text-align:left}.global-row,.lowest-row{grid-template-columns:1fr;align-items:start}.global-price{text-align:left}.photo-slab{min-height:260px}.pump-card{width:118px;height:118px;bottom:14px;right:14px}.pump-card span{font-size:56px}}