/* yeojido static-v2 site-specific additions (dev T057). Not part of the u3 CSS; loaded after responsive.css.
   Only what the generator needs on top of u3: values are u3 tokens, no external resources. */

/* design mail 282 item 1 (footer category links really 44px high, padding not a pseudo hit area): the dist13 lines here (.foot-links gap, .foot-links a min-height / padding) are
   superseded by the v4 footer block in the "v4 merge" section at the end of this file (same 44px height; the <768 gap becomes 0 / 16 as in v4, the 768+ gap stays 8). */

/* section top spacing used by the category page (v3 inline styles moved here) */
.section--gap-5{padding-top:var(--s5)}
.section--gap-6{padding-top:var(--s6)} /* store detail layout (was an inline style; same single-class weight as u3 .section, loaded later, so it wins at every width) */
.section--gap-8{padding-top:var(--s8)}
.svg-defs{position:absolute} /* zero-size SVG filter holder (was an inline style); aria-hidden / focusable stay on the element */
.btns--first{margin-top:0}

/* feature tile: the whole tile is clickable through the title link (no empty anchor); toplist links stay above it (u3 z-index 3) */
.tile--feature .tile-name{font-size:30px}
.tile-link{color:inherit;text-decoration:none}
.tile-link::after{content:"";position:absolute;inset:0;z-index:2}

/* home "top stores per category" section */
.top-grid{display:grid;gap:var(--s3)}
.toplinks li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.toplinks a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600}
.toplinks a:hover{text-decoration:underline}
.toplinks .dn{font-size:13px;color:var(--ink-3)}
@media (min-width:768px){.top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.top-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* home "top stores" ranking rule block (M2): sits between the section head and the per-category lists */
.top-rule{margin-bottom:var(--s3)}

/* home map slot (M2): the v4 .mapbox (fixed box + inline-svg placeholder + centred button) is in the "v4 MERGE" section below. The dist13 rules of the old .map-slot / .map-actions markup
   (.map-actions, html:not(.js) [data-map-open], the JS-less .btn--line promotion) were removed in M2: without JS the slot holds a.btn.btn--ink.map-btn (a plain new-tab link, already the primary button look). */

/* dist13 (design mail 302): category toolbar (search -> status / dong chips -> sort) stacks in three rows below 1200px; group titles never wrap by character, chips wrap horizontally.
   NOTE: the generated pages have no .toolbar element yet (the search / filter row is a JS enhancement that this build leaves out), so this block is inert until it is added. CSS only, no JS. */
@media (min-width:768px) and (max-width:1199px){.toolbar{grid-template-columns:minmax(0,1fr);align-items:stretch;row-gap:var(--s3)}}
.toolbar .tb-label{white-space:nowrap}
.toolbar .chips{flex-wrap:wrap}

/* (the provisional .lang-switch block of dist5-dist15 was replaced in M2 by the v4 language switch: .lang / .lang-btn / .lang-menu / .ln-full / .ln-code in the "v4 MERGE" section below) */

/* store detail (U6) */
.info .addr-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.links-list{list-style:none;padding:0;margin:0}
.prices .price-hint{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.5;color:var(--ink-3)} /* tcJjik helper line: always visible text, no hover */
.price-empty a{min-height:44px;display:inline-flex;align-items:center}

/* =====================================================================================================================
   v4 MERGE (M1, dev T057, 2026-10-01). Source: design yeojido v4 styles.css (v4.1). The generator markup is unchanged in this step.
   Loaded after u3 (design-tokens / components / responsive), so a rule with the same specificity here wins. Where u3 uses a stronger selector
   (.rows .row, .info>div ...) the same stronger selector is used here. Order matters for equal-specificity pairs (.display before .display--store).
   Sections marked LIVE change the current pages; sections marked DEAD match no element in the current markup (they switch on in the later steps M2-M6).
   No inline style, no external resource.
   ===================================================================================================================== */

/* ---- LIVE: map placeholder tokens (used only by DEAD .mapbox below, defined in both themes) ---- */
:root{--map-land:#ece7f6;--map-block:#e2daf0;--map-road:#ffffff;--map-water:#d6e4fa;--map-pin:#ff3a4e}
html[data-theme="dark"]{--map-land:#1b1428;--map-block:#221a31;--map-road:#2f2547;--map-water:#16203a;--map-pin:#ff5a6c}
@media (prefers-color-scheme:dark){html:not([data-theme]){--map-land:#1b1428;--map-block:#221a31;--map-road:#2f2547;--map-water:#16203a;--map-pin:#ff5a6c}}

/* ---- LIVE: line-break rules per language (v4 handoff 14.2). u3 put keep-all + anywhere on body for every language; that moves into the :lang blocks. ---- */
body{word-break:normal;overflow-wrap:normal}
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
:lang(en){word-break:normal;overflow-wrap:break-word;hyphens:auto}
:lang(zh),:lang(ja){word-break:normal;overflow-wrap:break-word;line-break:strict}
:lang(ja){word-break:auto-phrase} /* browsers without auto-phrase drop this declaration and keep the normal one above */
:lang(ko-Latn){word-break:normal;overflow-wrap:anywhere;hyphens:manual} /* DEAD until M3 (romanised shop line) */
:lang(zh){--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
:lang(ja){--font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif}
:lang(zh) *,:lang(ja) *{letter-spacing:0!important}
:lang(zh) [lang="ko"],:lang(ja) [lang="ko"]{--font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
[lang="ko"],[lang="ko-Latn"]{font-family:var(--font)}
:lang(zh) .hero-intro p,:lang(ja) .hero-intro p{word-break:normal} /* keep-all on CJK left only the last two characters on a line */
h1,h2,h3{text-wrap:balance}
p,dd,dt,li,small{text-wrap:pretty}
.prices .basis,.hero-card p,.hero-intro p,.stat,.sec-note,.stat span,.calc-flag,.trust span,.row-meta,.card-meta,.calc-lines dt,.tile-en,.hero-sub,.updated,.modified,.card-time{text-wrap:balance}
.nw1{white-space:nowrap} /* DEAD until M3 (card meta pieces) */
.clamp1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* DEAD (one-line ellipsis helper) */

/* ---- LIVE: grid / flex children may shrink below their longest word (v4 handoff 14.2, the min-width:0 list) ---- */
.hero-grid>*{min-width:0}
.bento>li,.cards>li,.prose>*,.staff>li,.mini-cards>*,.stats>*,.sum-grid>*,.info>div>*,.card>*,.row>*,.calc-row>*,.tile>*,.person>*{min-width:0}
.sec-head{flex-wrap:wrap}
.sec-head>*{min-width:0}
.mini>div{min-width:0}
.mini .pill,.card-top .pill,.row-name .pill{flex:none}
.store-layout>*,.toolbar>*{min-width:0}

/* ---- LIVE: skip link (u3 .skip-link is the element in the markup; v4 calls it .skip). Hidden by a 1px clip, shown on focus at left 16 / top 16, z 100, inner 3px white ring, width cap 92 (<520) / 220. ---- */
.skip-link{left:auto;top:auto;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus,.skip-link:focus-visible{position:fixed;left:16px;top:16px;z-index:100;width:auto;max-width:92px;height:auto;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:4px 10px;border-radius:12px;background:var(--btn-ink-bg);color:var(--btn-ink-fg);font-size:13px;font-weight:700;line-height:1.25;text-decoration:none;outline:none;box-shadow:inset 0 0 0 3px #fff,0 6px 18px -6px rgba(0,0,0,.5)}
@media (min-width:520px){.skip-link:focus,.skip-link:focus-visible{max-width:220px;font-size:14px}}

/* ---- LIVE: header boundaries (v4 handoff 14.6): <520 the main nav link is hidden, <768 the wordmark is hidden, <1200 the extra links are hidden.
   M2: the language switch is its own element (div.lang, not .nav-links) so it is never touched by the <520 rule; it stays reachable at every width.
   The one hidden nav link (categories) is also the footer shortcut link (nav.foot-links--short), so its destination stays reachable. ---- */
@media (max-width:519px){.nav-end>.nav-links{display:none}}
@media (min-width:520px) and (max-width:767px){.brand-word{display:none}}
@media (min-width:768px) and (max-width:1199px){.nav-links .nav-extra{display:none;}.staff{grid-template-columns:minmax(0,1fr)}} /* nav-extra + .staff are DEAD (no such markup yet) */
@media (min-width:1200px){.nav-links .nav-extra{display:inline-flex}.staff{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- LIVE: hero. h1 sizes as clamp (v4.1). .display--store is repeated after .display on purpose (same specificity, later wins). ---- */
.display{font-size:clamp(34px,11.5vw,44px)}
.display--store{font-size:36px}
.hero-sub{margin-top:var(--s2)}
.stats{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}
@media (min-width:768px){
  .display{font-size:clamp(44px,6.2vw,80px)}
  .display--store{font-size:clamp(36px,5vw,64px)}
}

/* ---- LIVE: category cards (title up to 2 lines, status pill never shrinks, wraps instead). .card-id / .rom / .row* are DEAD (no such markup yet). ---- */
.card-top{align-items:flex-start}
.card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.card-id{flex:1 1 120px;min-width:0}
.card--closed .rom{color:var(--ink-2)}
.rows .row{grid-template-columns:minmax(0,1fr) auto}
.row-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.row .rom{grid-column:1}
.row-time{grid-row:1/4}

/* ---- LIVE: store detail, the 3 same-category cards stack until 1200 (the main column is narrow between 768 and 1199) ---- */
@media (min-width:768px) and (max-width:1199px){.store-layout .mini-cards{grid-template-columns:minmax(0,1fr)}}

/* ---- LIVE: footer links really 44 high. <768 a vertical list in two columns (gap 0, boxes touch, never overlap); 768+ one wrapping row, gap 8. ---- */
.foot-links{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:var(--s4)}
.foot-links--short{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))} /* LIVE since M2: the shortcut nav (only the links whose destination exists: 업종) */
.foot-links a{display:block;line-height:44px;min-height:44px;height:44px;padding:0 4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* M2: display:block (was flex) so text-overflow:ellipsis really applies to the link text (QA M1: flex clipped silently); line-height 44 keeps the label vertically centred in the 44px box */
.foot-links a:focus-visible{outline-offset:-3px}
.foot-links--short+.foot-links{margin-top:var(--s2)} /* LIVE since M2 */
@media (min-width:768px){
  .foot-links,.foot-links--short{display:flex;flex-wrap:wrap;gap:8px}
  .foot-links a{padding:0 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.06)}
}

/* ---- LIVE: reduced motion. u3 had only ".flow,.orb"; .orb.o1 / .orb.o2 carry the animation with a stronger selector, so the orbs kept moving (v4.1 fix). ---- */
@media (prefers-reduced-motion:reduce){
  .flow,.orb,.orb.o1,.orb.o2{animation:none}
}

/* =====================================================================================================================
   DEAD until the later steps: nothing in the current markup carries these classes. Values are v4 as delivered.
   ===================================================================================================================== */

/* ---- LIVE since M2: language switch, one list with two looks (button.lang-btn + ul.lang-menu), v4 as delivered. >= 1024 the list is a 4-cell pill (button hidden); < 1024 with JS (.js is set before the
   first paint by the theme-init script) the chip button shows and the list becomes a dropdown (.is-open); without JS the pill is always shown. ---- */
.lang{flex:none}
.lang-btn{display:none;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--seg-track);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.lang-btn svg{width:16px;height:16px;flex:none}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--seg-on)}
.lang-btn[aria-expanded="true"]{box-shadow:0 1px 3px rgba(21,17,31,.18)}
.lang-btn:focus-visible{border-radius:var(--r-pill)}
.lang-menu{display:flex;gap:2px;margin:0;padding:0;border-radius:var(--r-pill);background:var(--seg-track)}
.lang-menu a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--r-pill);text-decoration:none;font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.lang-menu a:hover{color:var(--ink)}
.lang-menu a:focus-visible{outline-offset:2px;border-radius:var(--r-pill)}
.lang-menu a[aria-current="page"]{background:var(--seg-on);color:var(--ink);box-shadow:0 1px 3px rgba(21,17,31,.18)}
.ln-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-contrast:more){.lang-menu a[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--ink)}}
@media (max-width:359px){.lang-btn svg{display:none}}
@media (max-width:1023px){
  .js .lang-btn{display:inline-flex}
  .js .lang:not(.is-open) .lang-menu{display:none}
  .js .lang-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:60;display:block;width:max-content;min-width:176px;padding:6px;border-radius:var(--r-md);background:var(--glass-opaque);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-2)}
  .js .lang-menu a{justify-content:space-between;gap:12px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink)}
  .js .lang-menu a:hover{background:var(--hover)}
  .js .lang-menu a:focus-visible{outline-offset:-3px;border-radius:12px}
  .js .lang-menu a[aria-current="page"]{background:var(--surface-tint);font-weight:800;box-shadow:none}
  .js .lang-menu a[aria-current="page"]::after{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--brand-purple)}
  .js .ln-full{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .js .ln-code{display:none}
}

/* ---- DEAD (M3): romanised shop line (lang="ko-Latn") ---- */
.rom{display:block;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.01em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rom--h1{margin-top:var(--s2);font-size:20px;line-height:1.25;font-weight:700;letter-spacing:0;color:#fff;white-space:normal;overflow:visible;text-overflow:clip}
.mini .rom{display:block;margin-top:1px}
.r-name .rom{display:inline;margin-left:6px;font-size:13px}
@media (min-width:768px){.rom--h1{font-size:24px;font-weight:600}}

/* ---- LIVE since M2: home map slot (fixed box + static picture + iframe only after the button). The picture is an inline svg whose fills come from these classes (no style attribute: CSP style-src 'self'). ---- */
.mapbox{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--map-land);box-shadow:var(--shadow-1);contain:layout paint}
@media (min-width:768px){.mapbox{aspect-ratio:16/9}}
.mapbox>svg{position:absolute;inset:0;width:100%;height:100%}
.mapbox .m-land{fill:var(--map-land)}
.mapbox .m-water{fill:var(--map-water)}
.mapbox .m-block{fill:var(--map-block)}
.mapbox .m-road{stroke:var(--map-road)}
.mapbox .m-pin{fill:var(--map-pin)}
.map-cta{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s4)}
.map-btn{position:relative;gap:8px;min-height:48px;box-shadow:0 8px 24px -8px rgba(21,17,31,.5)}
.map-btn svg{width:18px;height:18px}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--map-land)}
.mapbox[data-state="loaded"] .map-cta,.mapbox[data-state="loaded"]>svg{display:none}
.map-note{margin-top:var(--s3);font-size:14px;color:var(--ink-2)}

/* ---- DEAD (M6): price empty state, bottle list, legend, calculator, summary, staff card details ---- */
.p-empty{display:grid;gap:var(--s3);justify-items:start;padding:var(--s5);background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.p-empty p{font-size:17px;line-height:1.45;font-weight:700}
.legend li>span:first-child{flex:none}
.bottles li{flex-wrap:wrap;gap:0 var(--s3);font-size:15px}
.bottles b{white-space:nowrap;margin-left:auto}
.calc-total{flex-wrap:wrap}
.calc-total output{min-width:0;overflow-wrap:anywhere}
@media (max-width:359px){.sum-today .v{font-size:16px}.calc-total output{font-size:26px}}
@media (max-width:399px){.person .btn--sm svg{display:none}}

/* ---- DEAD (M5): category toolbar. The dist13 block above already stacks it below 1200; these are the v4 1200+ three columns with a floor per column. ---- */
.tb-label{display:block}
@media (min-width:1200px){
  .toolbar{grid-template-columns:minmax(240px,300px) minmax(280px,1fr) max-content;align-items:end;column-gap:var(--s6)}
  .toolbar .tb-search{min-width:240px}
  .toolbar .tb-status{min-width:280px}
  .toolbar .tb-sort{min-width:max-content}
}
@media (min-width:768px){.hero:not(.hero--sub){min-height:0;padding-top:96px}}