/* 2026-09-28 readability pass: bundled bold Korean type + clearer map. */
@font-face{font-family:"K7 Sans";src:url(fonts/NotoSansKR-Regular.woff) format("woff");font-weight:100 449;font-display:swap}
@font-face{font-family:"K7 Sans";src:url(fonts/NotoSansKR-Medium.woff) format("woff");font-weight:450 749;font-display:swap}
@font-face{font-family:"K7 Sans";src:url(fonts/NotoSansKR-Bold.woff) format("woff");font-weight:750 849;font-display:swap}
@font-face{font-family:"K7 Sans";src:url(fonts/NotoSansKR-Black.woff) format("woff");font-weight:850 1000;font-display:swap}
:root{--font:"K7 Sans","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif}
body,button,input{font-family:var(--font)}

/* Only the main headline is heavy; everything else keeps the original lighter weights. */
.finder-header h1,.menu-head h2{font-weight:900;letter-spacing:-1.2px}

/* Map: sea vs land contrast */
.map-panel,#map{background:#ffffff}

/* Map labels: darker, bolder, with a clear white halo */
.map-place{font-family:var(--font);font-weight:700;color:#1e3329;font-size:13px;line-height:28px;letter-spacing:-.3px;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,1px 1px 1px #fff,-1px -1px 1px #fff,1px -1px 1px #fff,-1px 1px 1px #fff}
.place-city{font-size:17px;font-weight:800;color:#10241b}
.place-town{font-size:14px;font-weight:700;color:#1e3329}
.place-suburb{font-size:13px;font-weight:700;color:#35503f}
.place-road{font-size:12px;font-weight:700;color:#6b5a33}

.place-building{font-size:11px;font-weight:700;color:#58655e}

/* Store markers: larger, higher contrast */
.map-store-dot>span{width:22px;height:22px;background:#008455;border:4px solid #fff;box-shadow:0 0 0 2px #00845555,0 3px 8px #00362255}
.map-store-dot:hover>span{background:#f58220;box-shadow:0 0 0 2px #f5822066,0 3px 8px #00362255;transform:scale(1.12)}
.map-store-dot.is-selected>span{width:28px;height:28px;background:#f58220;border-color:#fff;box-shadow:0 0 0 3px #e63232,0 0 0 9px #e6323222,0 3px 10px #00362255}
.spot-cluster{font-weight:800;border-width:4px;box-shadow:0 0 0 2px #00845540,0 4px 12px #00362240;font-size:16px}

@media(max-width:760px){.place-city{font-size:15px}.map-place{font-size:12px}}

/* Store names under pins when zoomed in to street level */
.store-name-tip{display:none;background:#fff;border:2px solid #008455;border-radius:6px;padding:2px 8px;font:700 12px/1.5 var(--font);color:#0b3d27;box-shadow:0 2px 6px #00362233;white-space:nowrap}
.store-name-tip:before{display:none}
.store-names .store-name-tip{display:block}
.place-poi{font-size:11.5px;font-weight:700;color:#4a7488}

/* Narrow phones: keep both header buttons visible */
@media(max-width:430px){.site-header{gap:8px;padding:0 14px}.brand-logo{width:122px}.brand-partner img{width:40px;height:40px}.header-nav{gap:12px}.header-nav .text-button{font-size:12.5px}}
@media(max-width:350px){.brand-logo{width:104px}.brand-partner{display:none}}

/* 7-Eleven International Brand Standards (2023) — 3.3 Colors, 3.4 Stripes
   Official stripes: Orange (thin) / Green (thick) / Red (thin), always in this order.
   Stripes math: gap W = 25% of thin T; Green = T + 2W.  (T=4px, W=1px, G=6px -> 16px)
   Official stripes sit only on white or black backgrounds. */
:root{--k7-orange:#ff6c00;--k7-green:#007350;--k7-red:#ec0f2a;
  --k7-stripes:linear-gradient(var(--k7-orange) 0 4px,#fff 4px 5px,var(--k7-green) 5px 11px,#fff 11px 12px,var(--k7-red) 12px 16px)}
.site-header{background:#fff;border-bottom:0;box-shadow:none}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;pointer-events:none;background:var(--k7-stripes)}
.brand-stripes{width:24px;height:16px;background:var(--k7-stripes)}
/* Stripes as pattern on the near-black page: same ratio, gaps show the black background */
.workspace:before{background:linear-gradient(135deg,transparent 72%,var(--k7-orange) 72% 76%,transparent 76% 77%,var(--k7-green) 77% 83%,transparent 83% 84%,var(--k7-red) 84% 88%,transparent 88%),radial-gradient(ellipse at 8% 2%,#28544155,transparent 55%)}
/* Corner mark on white: read from the outer edge inward = orange, green, red, thin/thick/thin with 25% gaps */
.finder-header{background:#fff}
.finder-header:before{border-width:12px;border-color:var(--k7-red);box-shadow:0 0 0 3px #fff,0 0 0 21px var(--k7-green),0 0 0 24px #fff,0 0 0 36px var(--k7-orange)}
/* No stripes on the colored promo card (guide: not on background colors) */
.matcha-card:after{display:none}

/* Red as a point color */
.result-number{background:var(--k7-red)}
.store-item.selected{border-color:var(--k7-red);box-shadow:inset 4px 0 var(--k7-red)}
.store-item:hover .item-arrow,.store-item.selected .item-arrow{color:var(--k7-red)}
.map-location-label>.icon{color:var(--k7-red)}
.fit-map{box-shadow:2px 2px 0 var(--k7-red)}
.search-form:focus-within{box-shadow:3px 3px 0 var(--k7-red)}
.header-nav .text-button:hover{color:var(--k7-red)}
@media(max-width:760px){
  .site-header{border-bottom:0;box-shadow:none}
  .site-header:after{height:12px;background:linear-gradient(var(--k7-orange) 0 3px,#fff 3px 3.75px,var(--k7-green) 3.75px 8.25px,#fff 8.25px 9px,var(--k7-red) 9px 12px)}
  .workspace:before{background:linear-gradient(135deg,transparent 72%,var(--k7-orange) 72% 77%,transparent 77% 78.25%,var(--k7-green) 78.25% 85.75%,transparent 85.75% 87%,var(--k7-red) 87% 92%,transparent 92%)}
}

/* Header breathing room: keep content clear of the stripes (logo clear space) */
.site-header{height:112px;padding-bottom:16px;box-sizing:border-box}
.site-header .brand,.site-header .header-nav,.site-header .preview-badge{margin-bottom:12px}
.workspace{height:calc(100dvh - 112px);padding-top:30px}
@media(max-width:760px){
  .site-header{height:92px;padding-bottom:12px}
  .site-header .brand,.site-header .header-nav{margin-bottom:8px}
  .workspace{height:auto;min-height:calc(100dvh - 92px)}
}

/* Store count badge hidden (user request) */
#result-count,.result-number{display:none!important}

/* Header menu: clear, tappable menu items in the key-visual style */
.header-nav{align-self:center;align-items:center;gap:10px;margin-left:auto}
.header-nav .nav-item{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:10px;border:1.5px solid #142820;background:#fff;color:#142820;font-size:14px;font-weight:700;box-shadow:2px 2px 0 #142820;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.header-nav .nav-item .icon{width:18px;height:18px;stroke-width:2}
.header-nav .nav-item:hover{background:#fff4e8;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--k7-orange);color:#142820}
.header-nav .nav-item:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #142820}
.header-nav .nav-active.nav-item{background:var(--k7-green);border-color:#142820;color:#fff;box-shadow:2px 2px 0 var(--k7-orange)}
.header-nav .nav-active.nav-item:hover{background:#00603f;color:#fff}
.header-nav .nav-item:after{display:none!important}
.preview-badge{margin-left:14px}
@media(max-width:1120px){.preview-badge{display:none}}
@media(max-width:760px){
  .header-nav{gap:6px}
  .header-nav .nav-active{display:none!important}
  .header-nav .nav-item{height:36px;padding:0 10px;font-size:12.5px;gap:5px;border-radius:8px}
  .header-nav .nav-item .icon{width:15px;height:15px}
}
@media(max-width:400px){.header-nav .nav-item .icon{display:none}.header-nav .nav-item{padding:0 9px}}
.header-nav .nav-item{flex-shrink:0}
@media(max-width:400px){.header-nav{gap:4px}}
/* Keep the promo visible on the first (city-level) view; hide it only at street level */
@media(min-width:761px){.street-detail .matcha-card{display:block}.store-names .matcha-card{display:none}}