/* 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)}
/* M4: rank number in front of each row (text, same look as the category page rank / the feature toplist .rk: 13px 800 tabular); the link takes the free space so the neighbourhood stays at the right edge */
.toplinks .rk{flex:none;width:20px;font-size:13px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.toplinks a{margin-right:auto}
@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} /* LIVE since 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}

/* ---- (dist29: the dist13 rule that stacked the 3 neighbour cards between 768 and 1199 is removed; the store body is one centred column now, see the "dist29 (1)" block below) ---- */

/* ---- 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}
}

/* ---- LIVE since M3: romanised shop line (lang="ko-Latn") under the store name on cards (.card-id), the detail h1 (.rom--h1) and mini cards. NEW in M3: components.css has ".mini span{font-size:14px;color:var(--ink-2)}", which
   would also shrink the span lang="ko" that now sits inside .mini b (the v4 draft has the same structure and the same rule); .mini b>span gives the name back the b size and colour. ---- */
.mini b>span{font-size:inherit;color:inherit}
.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;font-size:13px;color:var(--ink-3)} /* dist20: u3 ".mini span{font-size:14px;color:var(--ink-2)}" (0,1,1) beat ".rom" (0,1,0), so the romanised line in a mini card rendered 14px / ink-2; (0,2,0) here gives the v4 values 13px / ink-3 (same as .rom) */
.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}
}

/* =====================================================================================================================
   v4 urgent fix (hero height), dev T057 M-fix. u3 responsive.css gives .hero at 768+ "padding:140px 48px 48px;min-height:540px;display:flex;justify-content:flex-end":
   a fixed 540px box with the content pushed to the bottom, so on a wide window (about 1800px) the home hero is 183px taller than its content (top empty, title and stat card low,
   the category tiles start at about y 670 and the first row ends at about 838, below the fold on an 800px high window). The v4 mock-up filled the 540 with a search box and hero-sub; the
   generated home has only h1 + flag + a card, so the fixed height is dropped on the home hero.
   - min-height 0 from 768: the hero is as tall as its content (the 4 home pages; .hero.hero--sub keeps its 440 through the stronger selector, the <768 rules are untouched).
   - padding-top 96 (was 140): the sticky nav overlaps the hero (hero-shell margin-top -68 = nav-wrap 12 + nav 56), so 68 of the top padding is the nav; 96 leaves 28 below the nav, the same
     clearance the <768 base rule has (padding-top 96 under a 66px nav). Left / right / bottom padding stay 48.
   Selector .hero:not(.hero--sub) = (0,2,0), later than responsive.css, so it wins; pages whose hero carries .hero--sub (category, store, 404) do not match and are unchanged.
   Header (mobile): no change needed, see README "v4 urgent fix" width table (no overflow at 320..767 with or without JS).
   ===================================================================================================================== */
@media (min-width:768px){
  .hero:not(.hero--sub){min-height:0;padding-top:96px}
}

/* =====================================================================================================================
   dist20 (v4 M5, dev T057): fold fixes found by the first real-browser sweep (a line of 1-2 characters). README "dist20" lists every rule with before / after / reason.
   (a) .tile-count: number (32px) + small label. The label wrapped inside the one text line, so a 1-2 character piece was left (ja 「0店営業中・全7店」, zh 「0家营业中 · 共7家」 at 320 / 360 / 768).
       Now the number and the label are flex items: when the label does not fit next to the number it moves under it as its own balanced block (no 1-2 character rest, translation text untouched).
   (b) ja .sec-title (<768): auto-phrase keeps 「ナイトライフ店舗マップ」 (11 characters) as one unit; 30px made it 330px, wider than the 328px column at 360px, so the emergency break left 「プ」 alone.
       The size shrinks with the width (30 -> 24px) so the unit always fits; wider than about 395px nothing changes.
   (c) home top-store links (.toplist a, .toplinks a): the name is 「<span lang=ko>상호</span> (<span lang=ko-Latn>Roman</span>)」. The ko / ko-Latn rule overflow-wrap:anywhere (v4 14.2) lets the flex item shrink to one
       character and break inside a word (「Gwaenchana」 / 「문크리스탈」). Inside these links the spans use break-word (a word is never broken unless it is wider than the line), and the .toplinks link is a block (an inline-flex
       container turned the text pieces around the spans into separate flex items, which also swallowed the space before the 「(」).
   (d) store page .mini card (language builds): <b>name</b> + block .rom + sub line live in one div; the measuring tool counts the 2-character name line and the sub line as one block = a false fold. The name is its own block now
       (same picture: name line, romanised line, sub line); the <br> that follows the name when there is no romanised line is dropped there. Korean pages keep the inline name + <br>.
   (e) ja .sum-grid dd (the category row holds the explained label 「High Public（個室ラウンジ）」): 116px wide at 320px; auto-phrase made 「（個室ラウンジ）」 one unit, the forced break plus the line-start rule for 「）」 left 「ジ）」.
       Normal CJK breaking + balance gives three even lines at 320px. (Body text keeps the long explained label.)
   ===================================================================================================================== */
.tile-count{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:2px;row-gap:4px}
.tile-count small{margin-left:0;min-width:0;text-wrap:balance}
@media (max-width:767px){:lang(ja) .sec-title{font-size:clamp(24px,7.6vw,30px)}}
.toplist a [lang],.toplinks a [lang]{overflow-wrap:break-word}
.toplinks a{display:block;padding:9px 0;line-height:26px}
html:not(:lang(ko)) .mini b{display:block}
html:not(:lang(ko)) .mini b+br{display:none}
:lang(ja) .sum-grid dd{text-wrap:balance}
:lang(ja) .sum-grid dd,:lang(ja) .sum-grid dd *{word-break:normal} /* the * matters: ":lang(ja){word-break:auto-phrase}" also sets the value on the link inside the dd, so the dd alone is not enough (first round: no effect) */
/* (f) the neighbourhood next to a top-store link (.dn, 3-4 CJK characters): "论岘/洞" at 320 in zh. One line (zh / ja only; the en value 「Nonhyeon-dong」 stays wrappable at its hyphen). */
:lang(zh) .toplist .dn,:lang(zh) .toplinks .dn,:lang(ja) .toplist .dn,:lang(ja) .toplinks .dn{white-space:nowrap}

/* =====================================================================================================================
   pa1 (plan A1, dev T057): google-deploy 손님 눈 점검 + design 336 values that need CSS. README "dist21" lists every rule with before / after / reason.
   (a) home map: the iframe is attached by the script near the viewport (state idle -> loading -> loaded | failed). While loading the iframe is transparent and does not take pointer events, so the static picture and the
       button stay visible as the placeholder; the box keeps its fixed ratio in every state (CLS 0). Loaded: the picture + button are hidden by the rule above ([data-state="loaded"]). Failed: the iframe is removed and the
       new-tab link is shown again (no CSS needed).
   (b) the feature tile has no store list inside any more: the 300px floor it needed for the list is dropped below 768 (768+ keeps its two-row span).
   (c) category description line (language builds, key categories/<slug>.description): on the tile (.tile-desc, the place of the old capital-letter internal key) and in the category hero (.cat-desc).
   (d) mini card (same-category / same-neighbourhood cards on a store page): 「name / neighbourhood · short category label / status」. The meta line is ONE line (nowrap); when it is too wide the neighbourhood part gives way first
       (flex-shrink 1000, ellipsis at its end, floor 2.4em), then the label (ellipsis at its end); the status pill never shrinks. Same size and colour as the old meta line (components.css ".mini span": 14px / ink-2).
       M5 observation fixed: ".mini span" (0,1,1) also won over ".pill--ok" / ".pill--closed" (0,1,0) and painted the status text grey and 14px; ".mini .pill*" (0,2,0) gives the design values back (13px, ok green / off grey).
   ===================================================================================================================== */
.mapbox[data-state="loading"] iframe{opacity:0;pointer-events:none}
@media (max-width:767px){.bento .tile--feature{min-height:168px}}
.tile-desc{font-size:12px;line-height:1.35;font-weight:700;color:var(--ink-3);text-wrap:balance}
.tile--feature .tile-desc{color:#d7cdf0}
.cat-desc{margin-top:var(--s2);font-size:16px;line-height:1.45;font-weight:500;text-wrap:balance}
/* sweep fix (A1 final): a long status pill (en 「Permanently closed」) left the card too narrow for the one-line meta, so the sweep found the neighbourhood and label cut by an ellipsis (en closed mini cards at 320 / 768).
   The card now wraps: when meta + pill do not fit side by side the pill moves under the text block (the meta line stays ONE line, nothing is cut); short statuses (ko 「폐업」·「영업 중」) still sit next to it. */
.mini{flex-wrap:wrap;row-gap:var(--s2)}
.mini .mm{display:flex;align-items:baseline;min-width:0;white-space:nowrap}
.mini .mm-dong{flex:0 1000 auto;min-width:2.4em;overflow:hidden;text-overflow:ellipsis}
.mini .mm-sep{flex:none;padding:0 .4em}
.mini .mm-cat{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mini .pill{flex:none;font-size:13px}
.mini .pill--ok{color:var(--ok)}
.mini .pill--closed{color:var(--off)}

/* =====================================================================================================================
   dist29 (1): store detail body width (google-deploy hand check: at 1440 the body sat in a ~760px left column with the right half empty, and the 「소개」 paragraph was ~200px wide).
   Cause (code): u3 responsive.css (768+) has ".store-layout{grid-template-columns:1fr 340px}" (v3 had a 340px aside = the contact bar, which this build does not render, so the one child sat in the 1fr column,
   wrap 1136 - 340 - 32 gap = 764) and ".prose{grid-template-columns:repeat(3,1fr)}" (v3 put three short paragraphs side by side; the store intro is one long paragraph, so it took one third of the column, ~200px).
   Fix (same specificity, later file): from 768 the body is ONE column, centred, max 880px; the intro paragraphs are one column of 40em (16px body: about 40 Hangul per line, 35-45 target).
   The dist13 rule that stacked the three neighbour cards between 768 and 1199 (the old main column was only ~330px wide) is removed: the column is now 704px at 768 and 880 from about 944.
   ===================================================================================================================== */
@media (min-width:768px){
  .store-layout{grid-template-columns:minmax(0,1fr);max-width:880px;margin-left:auto;margin-right:auto}
  .store-layout .prose{grid-template-columns:minmax(0,1fr);max-width:40em}
}
/* dist35 (google-deploy 5376 (2) + (4)):
   (2) en store h1 ran to 3 lines at 64px (u3: .display--store 64 from 768, the hero text column is only ~590px at 1280: 9.2em; the en h1 carries the name, the category label and the staff tail). Estimate by synthetic width (no browser):
       lines >= 3 on 76 of 111 en pages at 64px; with the en size clamp(24px,3vw,40px) 0 pages at 768..1920 (also with a 8% wider text); 40px is also close to the 36px every language uses below 768. en only (:lang(en)), the ko / zh / ja sizes are untouched.
   (4) the breadcrumb sat at the left edge of the 1200 wrap while the store body column is centred at max 880 (dist29): the breadcrumb takes the same column (only the store page nav carries .crumbs--store). */
@media (min-width:768px){
  :lang(en) .display--store{font-size:clamp(24px,3vw,40px)}
  .crumbs--store{max-width:880px;margin-left:auto;margin-right:auto}
}

/* pa2:begin ===================================================================================================================
   pa2 (plan A2, dev T057, step 2): staff cards (lib/staffcards.mjs) + address block (lib/store.mjs infoBlock). One block, begin / end markers on purpose:
   build.mjs writes this block into the output site.css ONLY when an output page uses it (a page with .staff-card, .nw or .addr-sub); a build without input data therefore stays byte-identical to the build before pa2.
   Variables used (all defined by u3 design-tokens.css): --r-md --r-pill --surface --line --ink --ink-2 --ink-3 --brand-purple --seg-track --seg-on --s1; class .sr is defined by u3 components.css.
   No style attribute, no url(), no external resource. Source of the cards CSS before the merge: assets/staffcards.css (now a pointer only).
   ============================================================================================================================ */
.staff-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}
.addr-sub{margin-top:var(--s1);font-size:13px;line-height:1.4;color:var(--ink-3)}
.addr-sub-l{margin-right:4px;font-weight:700}
.staff-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:520px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.staff-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.staff-card{min-width:0;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-md,16px);background:var(--surface,#fff);box-shadow:inset 0 0 0 1px var(--line,rgba(21,17,31,.12))}
.staff-head{display:flex;align-items:center;gap:8px;min-width:0}
.staff-name{flex:0 1 auto;min-width:0;margin:0;font-size:18px;line-height:1.3;font-weight:700;color:var(--ink,#15111f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-badge{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--ink-3,#6b6578);font-size:12px;font-weight:600;line-height:1;color:var(--ink-2,#4a4458);white-space:nowrap}
.staff-rom{margin:0}
.staff-legend{margin:6px 0 0;font-size:12px;line-height:1.3;color:var(--ink-3,#6b6578)}
.staff-hp{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.staff-hp-link{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--brand-purple,#5b3fd1);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.staff-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
@media (min-width:520px){.staff-contacts{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}}
.staff-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;height:44px;padding:0 10px;border:0;border-radius:var(--r-pill,999px);background:var(--seg-track,#efeaf7);color:var(--ink,#15111f);font:inherit;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.staff-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.staff-btn:hover{background:var(--seg-on,#e4dcf3)}
.staff-ic{flex:none;width:18px;height:18px}
.staff-resid{margin-top:12px}
/* dist35 (D): a card without any contact button kept the row height of its taller neighbour (grid stretch: an empty band under the name). It now keeps its own height; cards with buttons are unchanged. A browser without :has() keeps the old stretch. */
.staff-card:not(:has(.staff-contacts)){align-self:start}
/* dist35 (A): hero CTA = the store's primary contact (tel / telegram), under the hero sub line. White pill, dark text (contrast far above 4.5 on the purple hero), 44px high, wraps on a narrow screen. Icons are inline svg (.hero-cta-ic). */
.hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.hero-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 20px;border-radius:var(--r-pill,999px);background:#fff;color:#15111f;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.hero-cta-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero-cta-btn:hover{background:#efeaf7}
.hero-cta-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-cta-ic{flex:none;width:18px;height:18px}
@media (prefers-contrast:more){.staff-card,.staff-badge{box-shadow:inset 0 0 0 2px var(--ink,#15111f)}}
/* pa2 U7: address copy button + store map box (lib/store.mjs, lib/mapscript.mjs STORE_ACTIONS). The copy button and the box exist for JS only (.js is set before the first paint by the head script): without JS the box is hidden and only the
   「지도에서 열기」 link is left. The box is the home .mapbox (fixed ratio 4:3, 16:9 from 768, contain layout paint, iframe transparent while loading, picture hidden once loaded) with a top margin; its size is the same in every
   state (CLS 0). Failed: the picture stays and the short failure sentence (.map-fail, empty = hidden) sits at the bottom of the box. */
.addr-copy{display:none}
.js .addr-copy{display:inline-flex}
.addr-copy-note{align-self:center;min-width:0;font-size:13px;line-height:1.35;color:var(--ink-2,#4a4458)}
.addr-copy-note:empty{display:none}
.mapbox--store{display:none;margin-top:var(--s4)}
.js .mapbox--store{display:block}
.mapbox--store .map-fail{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:8px 12px;border-radius:var(--r-md,16px);background:var(--surface,#fff);color:var(--ink,#15111f);font-size:14px;line-height:1.4;box-shadow:var(--shadow-1)}
.mapbox--store .map-fail:empty{display:none}
/* pa2:end */

/* T124 stage 1 addendum (generator-side; the design files staff.css / store-info.css / provenance.css / fixes.css load after this file and win on equal specificity):
   - 44px touch targets the design css does not cover: home category tile link, the price-ask link inside the info table, the hero state chip spacing;
   - the gradient rank numbers of the category list (audit-1003: contrast 1:1 on 21 elements) get a solid token colour (--cat-fg: 4b2a8a light / d2c0ff dark, both above 4.5:1 on --surface);
   - the static map picture needs a positioned parent for the link row (design store-info.css .map-cta--pair assumes the home .mapbox rules). */
.tile-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.info dd a.info-ask{display:inline-flex;align-items:center;min-height:44px;margin-left:var(--s2)}
.card .rank.grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cat-fg)}
.mapbox--static{position:relative}
.hero-sub.former-name{margin-top:var(--s1);font-size:13px;opacity:.85}
.info-price{margin-top:var(--s3);font-size:14px;color:var(--ink-2)}
.info-official dd a{display:inline-flex;align-items:center;min-height:44px}
.now-line{font-size:15px;font-weight:700}

/* T124 mail 641 (5): home top stores, rows after the first 3 folded per category (static details, no JS) */
.top-more summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--cat-fg);cursor:pointer;list-style:none}
.top-more summary::-webkit-details-marker{display:none}
.top-more .when-open{display:none}
.top-more[open] .when-closed{display:none}
.top-more[open] .when-open{display:inline}
.closed-cat{margin-top:var(--s4)}
.closed-cat a{min-height:44px;display:inline-flex;align-items:center}
/* T124 mail 647 [B]: trade mark flag line; the emoji alone waves (transform only: no layout, no CLS), 2.6s cycle, off for prefers-reduced-motion */
.flag-wave{display:inline-block;transform-origin:15% 90%;animation:flag-wave 2.6s ease-in-out infinite;will-change:transform}
@keyframes flag-wave{0%,100%{transform:rotate(-4deg) skewX(0deg)}50%{transform:rotate(5deg) skewX(-7deg)}}
@media (prefers-reduced-motion:reduce){.flag-wave{animation:none}}
/* mail 647 D4: no hyphenation inside headings (「Perma-nently」) */
h1,h2,h3,.display{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal}