/* T126 stage 2 generator-side rules (not a design file). The open-now neighbourhood circles are placed by classes, not by style attributes (no inline style anywhere: CSP style-src 'self').
   Coordinates = design unique/spec.md 「동 배치」 (left / top in percent of the 10:8 diagram). */
.on-p-jamwon{--x:12%;top:20%}
.on-p-sinsa{--x:33%;top:18%}
.on-p-cheongdam{--x:72%;top:18%}
.on-p-nonhyeon{--x:36%;top:48%}
.on-p-samseong{--x:80%;top:50%}
.on-p-yeoksam{--x:52%;top:78%}
.on-p-daechi{--x:85%;top:84%}
.on-hw-42{--hw:42px}.on-hw-43{--hw:43px}.on-hw-44{--hw:44px}.on-hw-45{--hw:45px}.on-hw-46{--hw:46px}.on-hw-47{--hw:47px}.on-hw-48{--hw:48px}.on-hw-49{--hw:49px}.on-hw-50{--hw:50px}
.on-hw-51{--hw:51px}.on-hw-52{--hw:52px}.on-hw-53{--hw:53px}.on-hw-54{--hw:54px}.on-hw-55{--hw:55px}.on-hw-56{--hw:56px}.on-hw-57{--hw:57px}.on-hw-58{--hw:58px}.on-hw-59{--hw:59px}.on-hw-60{--hw:60px}
.on-hw-61{--hw:61px}.on-hw-62{--hw:62px}.on-hw-63{--hw:63px}.on-hw-64{--hw:64px}.on-hw-65{--hw:65px}.on-hw-66{--hw:66px}.on-hw-67{--hw:67px}.on-hw-68{--hw:68px}.on-hw-69{--hw:69px}.on-hw-70{--hw:70px}
.on-hw-71{--hw:71px}.on-hw-72{--hw:72px}.on-hw-73{--hw:73px}.on-hw-74{--hw:74px}.on-hw-75{--hw:75px}.on-hw-76{--hw:76px}.on-hw-77{--hw:77px}.on-hw-78{--hw:78px}.on-hw-79{--hw:79px}.on-hw-80{--hw:80px}

/* mail 773 (design common/route spec 4): map buttons 48px high, text wraps, 2 columns up to 599px; Apple Maps only on iOS / iPadOS WebKit (no JS) */
.map-cta--pair .map-btn{min-height:48px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
.map-apple{display:none !important}
@supports (-webkit-touch-callout:none){.map-apple{display:inline-flex !important}}
@media (max-width:599px){
  .map-cta--pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-left:var(--s3);padding-right:var(--s3)}
  .map-cta--pair .map-btn{width:100%}
  @supports (-webkit-touch-callout:none){.map-apple{grid-column:1/-1}}
}
/* pv dialog: long link words wrap instead of widening the body (320px) */
.pv-dlg-body dd,.pv-dlg-body a{min-width:0;overflow-wrap:anywhere}

/* mail 768: the single 「view on a map」 link of home and category pages (44px button, wraps freely) */
.map-seeall{margin:var(--s4) 0 0}
.map-seeall .btn{min-height:44px;max-width:100%;white-space:normal;text-align:left}
.map-seeall .btn svg{width:18px;height:18px;flex:none}

/* ---- mail 763 (design clip check) ----
   (1) origin timeline year never breaks (「202 / 2」): 4 characters, no wrap; on narrow cards the archive stamp shrinks and the reserved right padding with it */
.tl-y{white-space:nowrap}
@media (max-width:479px){
  .tl-stamp{width:60px;height:60px;right:10px;top:14px}
  .tl-item--key .tl-when{min-height:60px;padding-right:68px}
  .tl-item--key .tl-y{font-size:38px}
}
/* narrow screens (291 = 320 at 110% text): the timeline items may shrink; the evidence badge may wrap */
.tl>li,.tl-card,.tl-when{min-width:0}
@media (max-width:359px){.tl-badge{white-space:normal;max-width:100%}.tl-item--key .tl-y{font-size:34px}}
/* (5) the 「same as footer hash」 link: the arrow flows with the text and may wrap with it */
.tl-check--anchor{max-width:100%;overflow-wrap:anywhere}
.tl-check--anchor .tl-arr{display:inline}
/* (3) en: no automatic hyphenation in the category hero (「20 list-ed」); stat labels keep whole words */
.hero-card,.hero-card *{-webkit-hyphens:manual;hyphens:manual}
.stat span{overflow-wrap:normal;word-break:normal}
/* (4) taxi button never wider than its box */
.addr-actions{max-width:100%;flex-wrap:wrap}
.addr-actions .tx-btn{max-width:100%;min-width:0;white-space:normal;text-align:left}
/* (6b) ja / zh h1: a full-width opening bracket at a line start takes no blank half em */
h1:lang(ja),h1:lang(zh-Hans),:lang(ja) h1,:lang(zh-Hans) h1{text-spacing-trim:trim-start;font-feature-settings:"palt"}
/* (2b) narrow screens: the diagram gets a taller box and the circles move apart, so that no two 72px circles touch at 288..414px (checked 291..414) */
@media (max-width:479px){
  .on-map{aspect-ratio:10/11}
  .on-p-jamwon{--x:16%;top:20%}
  .on-p-sinsa{--x:46%;top:18%}
  .on-p-cheongdam{--x:80%;top:18%}
  .on-p-nonhyeon{--x:30%;top:48%}
  .on-p-samseong{--x:74%;top:50%}
  .on-p-yeoksam{--x:50%;top:78%}
  .on-p-daechi{--x:82%;top:86%}
}
/* (2c) circle labels stay INSIDE their circle: Latin labels wrap after the hyphen at 10px, centred (G13 at +8% glyph width) */
html:not(:lang(ko)) .on-dn{font-size:8.5px;letter-spacing:-.01em;line-height:1.15;white-space:normal;max-width:58px;text-align:center;overflow-wrap:normal}
@media (min-width:1024px){html:not(:lang(ko)) .on-dn{font-size:11px;max-width:76px}}
/* (2d) home top-store rows: at least 8px between the neighbourhood and the staff count (G13 at +8% glyph width) */
.toplinks .top-staff{margin-left:calc(var(--s2) - var(--s3))}
/* when name + neighbourhood + count do not fit one line, the count moves to the next line instead of the neighbourhood being cut under it (text boxes never overlap) */
.toplinks a.tl-row{flex-wrap:wrap}
.toplinks .dn:has(+ .top-staff){flex:none;overflow:visible;text-overflow:clip}
/* (2) open-now diagram: every circle keeps its whole label inside the card. left = clamp(--hw, --x, 100% - --hw); --hw = max(42px, half of the label width) comes from the class on-hw-N (lib/opennow.mjs, computed from the label text) */
.on-dong{left:clamp(var(--hw,42px),var(--x,50%),calc(100% - var(--hw,42px)))}

/* CLS 0 on desktop: the list is filled by the page script after the first paint. From 1024 (map and list side by side, inside the first screen) the list box has a FIXED height (= the diagram height, rows scroll inside),
   the bar keeps its height and the 「more」 button keeps its place while hidden, so filling the list moves nothing below it. Below 1024 the section is under the first screen (measured CLS 0). */
.on-bar{min-height:44px}
@media (min-width:1024px){
  .on-list{height:416px;overflow-y:auto;align-content:start}
  .on-more[hidden]{display:inline-flex;visibility:hidden}
}

.hrs-note{margin:0 0 var(--s2);font-size:13px;font-weight:600;color:var(--ink-2)}
/* today's hours row: emphasis by weight and colour only (no 「오늘」 word) */
.hrs-row.is-today .hrs-days{font-weight:800;color:var(--ink)}

/* origin timeline: folded earlier records (details/summary, no JS) and the 「proof pending」 text */
.tl-fold{list-style:none;position:relative}
.tl-prev>summary{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);cursor:pointer;font-weight:700;color:var(--cat-fg)}
.tl-prev-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s4)}
.tl-pending{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink-2)}

/* CLS 0: the state chip (hero / summary / hours block) is judged by yj-add.js after the first paint. Until then it keeps its place, invisible (its text is the longer 「within business hours」 wording), instead of
   appearing later and pushing the hero card down. Without JS (html:not(.js)) it stays out of the layout as before. */
.hrs-state[hidden]{display:block;visibility:hidden}
html:not(.js) .hrs-state[hidden]{display:none}

/* sticky header: the 10px band above the pill (.nav-wrap padding-top) is transparent, so while scrolling the lower half of a label that passes under it showed through (user 21:36, live 1440 dark: 「수록 매장」「업종」).
   Once the page is scrolled (.is-scrolled, set by yj-add.js) that band is painted with the page background; at the very top it stays transparent (the hero art runs under the header there). */
.nav-wrap.is-scrolled{background:none}
.nav-wrap.is-scrolled::after{opacity:0} /* google-deploy 861 (user capture): no full-width band and no fade shadow under the header while scrolled; only the pill itself floats: */
.nav-wrap.is-scrolled>.nav{background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} /* google-deploy 845: the page background up to the bottom of the floating header (the band above AND at both sides of the pill) while scrolled; the existing ::after fade softens its lower edge */

/* hero stats: the middle cell (live 「open now」 number) has the same form as its neighbours (big number + label below). Until the script has judged the clock it keeps its place, invisible (no layout shift); without JS it is out of the layout. */
.stat--now[hidden]{display:block;visibility:hidden}
html:not(.js) .stat--now[hidden]{display:none}

/* design 874 (2): the English circle label 「Cheongdam-dong」 at 110% text stays inside its circle: one step smaller than the other languages (8.5 -> 8px, 11 -> 10.5px on wide screens) */
html:lang(en) .on-dn{font-size:8px}
@media (min-width:1024px){html:lang(en) .on-dn{font-size:10.5px}}

/* design 828 (3): a hero stat cell may shrink below its content (the 3-column grid must not be pushed wider by an English label); 359px and below the English label is 12px */
.stat{min-width:0}
@media (max-width:359px){:lang(en) .stat span{font-size:12px}}

/* design 828 (4) ja map buttons: a button label is never split over two lines (カカオ|マップ, NAVERマッ|プ): keep-all + nowrap, the size follows the width; at 389px and below the buttons stack one per row */
:lang(ja) .map-cta--pair .map-btn{overflow-wrap:normal;word-break:keep-all;white-space:nowrap;font-size:clamp(13px,3.8vw,15px);padding-inline:10px}
/* design 874 (1): at 389px and below the ja buttons stack, so the fixed-ratio box would be too short (320px: 20px of the top button cut off). The box grows with its content: a minimum height (the old 4:3 box) instead of a ratio, the button group takes part in the flow, the drawing stays behind it. */
@media (max-width:389px){
  :lang(ja) .mapbox--static{aspect-ratio:auto;min-height:75vw}
  :lang(ja) .mapbox--static .map-cta{position:relative;inset:auto;min-height:75vw;align-content:center}
}
:lang(ja) .map-cta--pair .map-mymap{grid-column:1/-1} /* the long My Maps label takes a whole row in the 2-column layout (390px: 179px of text in a 163px cell) */
@media (max-width:389px){:lang(ja) .map-cta--pair{grid-template-columns:1fr}:lang(ja) .map-cta--pair .map-load{grid-column:auto}}

/* design 828 (5) ja map title: the second half stays whole */
.nb{white-space:nowrap}

/* design 828 (6) timeline badge never wider than its box */
.tl-badge{max-width:100%}

/* staff rows (final5e7): name + channel icon buttons on the first line; the staff member's own homepage links on a second line (wrap, long hosts break anywhere, 44px touch height) */
.staff-row{flex-wrap:wrap}
.staff-row-name{flex:1 1 8em}
.staff-row-hp{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:0 var(--s4);padding:0 0 var(--s2)}
.staff-hp-link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;font-size:14px;font-weight:600;color:var(--cat-fg);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* closed cards: one small grey line under the name (reason · confirmed date) */
.card-closed-info{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}

/* category cards: the 「within business hours」 badge (assets/now-count.js). While the clock is outside the hours (or before the script runs) it keeps its place invisible, so showing it never moves the card (CLS 0); no JS = out of the layout. */
.card-now{min-height:24px;font-size:12px;white-space:normal}
.card-now[hidden]{display:inline-flex;visibility:hidden}
html:not(.js) .card-now{display:none}

/* open-now section: one basis line under the footnote (N = stores with confirmed hours = the population of the map, the list and the counters) */
.on-basis{margin:var(--s2) 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}

/* home map: the user's Google My Maps (click to load, assets/mymap.js). The load button spans the whole row; after the embed has loaded the link row sits under the box. */
.map-cta--pair .map-load{grid-column:1/-1;flex:1 1 100%;min-height:48px}
.map-load[hidden]{display:none}
.map-cta--pair.map-cta--below{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);padding:var(--s3) 0 0}
.map-cta--below .map-btn{width:100%}