/* NowHitz areas (2026-10-24): /go/area/<id>/ pages and the home #nh-areas block.
   New tokens are --nh-*, new classes .nh-a-*; rules live under body.nh-a-page or #nh-areas. Light/dark follows
   v2-theme.js (html[data-theme]) — no prefers-color-scheme. System fonts only. */
:root{--nh-bg:#fff;--nh-surface:#f5f5f7;--nh-fg:#1d1d1f;--nh-fg-2:#6e6e73;--nh-line:rgba(0,0,0,.08);--nh-accent:#0071e3;--nh-warn:#d70015;
 --nh-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Hiragino Sans","Noto Sans KR","Noto Sans JP","Segoe UI",sans-serif;
 --nh-spring-open:linear(0,0.25 8%,0.6 18%,0.86 32%,0.98 50%,1.015 64%,1.004 80%,1);--nh-ease-close:cubic-bezier(.3,0,.2,1);--nh-ease-micro:cubic-bezier(.2,.8,.2,1);--nh-sticky-top:56px}
:root[data-theme="dark"]{--nh-bg:#000;--nh-surface:#1c1c1e;--nh-fg:#f5f5f7;--nh-fg-2:#98989d;--nh-line:rgba(255,255,255,.10);--nh-accent:#2997ff;--nh-warn:#ff453a}

/* ---------- area page ---------- */
html body.nh-a-page{background:var(--nh-bg)}
body.nh-a-page .nh-a{font-family:var(--nh-font);color:var(--nh-fg);max-width:760px;margin:0 auto;padding:0 0 64px;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
body.nh-a-page .nh-a a{color:inherit}
body.nh-a-page .nh-a-cover{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--nh-surface)}
body.nh-a-page .nh-a-cover img{display:block;width:100%;height:100%;object-fit:cover;view-transition-name:var(--nh-vt);view-transition-class:nh-area}
body.nh-a-page .nh-a-ref,#nh-areas .nh-a-ref{position:absolute;left:12px;bottom:12px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:600 11px/16px var(--nh-font);letter-spacing:.01em;pointer-events:none}
body.nh-a-page .nh-a-i,#nh-areas .nh-a-i{position:absolute;right:4px;bottom:4px;z-index:3;width:44px;height:44px;display:grid;place-items:center;color:#fff;text-decoration:none;font:600 13px/1 var(--nh-font)}
body.nh-a-page .nh-a-i::before,#nh-areas .nh-a-i::before{content:"";position:absolute;inset:11px;border-radius:50%;background:rgba(0,0,0,.42);z-index:-1}
body.nh-a-page .nh-a-head{padding:20px 16px 4px}
body.nh-a-page .nh-a-head h1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;margin:0;font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.02em;word-break:keep-all}
body.nh-a-page .nh-a-head h1 .nh-a-h1s{font-size:17px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-lede{margin:12px 0 0;font-size:17px;line-height:1.6;word-break:keep-all;text-wrap:pretty}
body.nh-a-page .nh-a-st{margin:10px 0 0;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-st span{display:block}
body.nh-a-page .nh-a i{font-style:normal}

/* sticky section bar: anchors, not tabs (no role=tablist) */
body.nh-a-page .nh-a-tabs{position:sticky;top:var(--nh-sticky-top);z-index:20;margin-top:20px;background:color-mix(in srgb,var(--nh-bg) 80%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--nh-line)}
body.nh-a-page .nh-a-tabs-in{display:flex;justify-content:space-between;gap:2px;padding:0 8px;height:48px}
body.nh-a-page .nh-a-tabs a{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:44px;padding:0 6px;font-size:15px;font-weight:600;color:var(--nh-fg-2);text-decoration:none;white-space:nowrap;transition:color .18s var(--nh-ease-micro)}
body.nh-a-page .nh-a-tabs a::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--nh-fg);transform:scaleX(0);transition:transform .18s var(--nh-ease-micro)}
body.nh-a-page .nh-a-tabs a[aria-current="true"]{color:var(--nh-fg)}
body.nh-a-page .nh-a-tabs a[aria-current="true"]::after{transform:scaleX(1)}
html[lang="en"] body.nh-a-page .nh-a-tabs a{font-size:14px;padding:0 4px}

body.nh-a-page .nh-a-sec{margin-top:48px;padding:0 16px;scroll-margin-top:calc(var(--nh-sticky-top) + 48px + 8px)}
body.nh-a-page .nh-a-sec h2{margin:0 0 16px;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
body.nh-a-page .nh-a-sec h2 small{font-size:15px;font-weight:600;color:var(--nh-fg-2);margin-left:4px}
body.nh-a-page .nh-a-note,body.nh-a-page .nh-a-ck{margin:0 0 12px;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-p{margin:16px 0 8px;font-size:16px;line-height:1.65}
html[lang="en"] body.nh-a-page .nh-a-p{line-height:26px}
body.nh-a-page .nh-a-crowd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 12px;padding:12px 16px;border-radius:14px;background:var(--nh-surface);font-size:15px;line-height:20px;font-weight:600}
body.nh-a-page .nh-a-crowd a{margin-left:auto;color:var(--nh-accent);text-decoration:none;font-weight:600}
body.nh-a-page .nh-a-lv{width:8px;height:8px;border-radius:50%;background:#30d158}
body.nh-a-page .nh-a-lv2{background:#ffd60a}body.nh-a-page .nh-a-lv3,body.nh-a-page .nh-a-lv4{background:#ff9f0a}

/* rows */
body.nh-a-page .nh-a-list{list-style:none;margin:0;padding:0}
body.nh-a-page .nh-a-list>li{border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-list>li:first-child{border-top:0}
body.nh-a-page .nh-a-more .nh-a-list>li:first-child{border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-row{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 28px 14px 0;text-decoration:none;min-height:44px;border-radius:12px;transition:background-color .18s var(--nh-ease-micro)}
body.nh-a-page a.nh-a-row:active{background:var(--nh-surface)}
body.nh-a-page .nh-a-go{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--nh-fg-2);opacity:.6}
body.nh-a-page .nh-a-t{font-size:17px;line-height:22px;font-weight:600;word-break:keep-all}
body.nh-a-page .nh-a-s{font-size:15px;line-height:21px;color:var(--nh-fg-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
body.nh-a-page .nh-a-meta{font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-meta i{margin:0 5px;opacity:.6}
body.nh-a-page .nh-a-mi{display:inline-block;max-width:100%}
body.nh-a-page .nh-a-mi a{color:inherit;text-decoration:underline;text-decoration-color:var(--nh-line);text-underline-offset:2px}
body.nh-a-page .nh-a-nw{white-space:nowrap}
body.nh-a-page .nh-a-golist{list-style:none;margin:0;padding:0}
body.nh-a-page .nh-a-golist li{font-size:16px;line-height:1.65;padding:2px 0}
/* the site bar matches this page's background, so the bar and the page do not show two whites / two blacks */
body.nh-a-page .mobile-header{background:color-mix(in srgb,var(--nh-bg) 92%,transparent)}
body.nh-a-page .nh-a-tag{align-self:flex-start;font-size:13px;line-height:18px;font-weight:600;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-tag.nh-a-urgent{color:var(--nh-fg)}
body.nh-a-page .nh-a-warn{display:block;font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.nh-a-page .nh-a-warn::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;border-radius:50%;background:var(--nh-warn)}
body.nh-a-page .nh-a-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
body.nh-a-page .nh-a-chips em,#nh-areas .nh-a-chips em{font-style:normal;height:24px;padding:0 10px;border-radius:999px;background:var(--nh-surface);font-size:12px;line-height:24px;font-weight:600}
body.nh-a-page .nh-a-row .nh-a-ck{margin:2px 0 0;font-size:12px;line-height:16px}
body.nh-a-page .nh-a-map{position:absolute;right:0;top:12px;padding:4px 10px;border-radius:999px;background:var(--nh-surface);font-size:13px;font-weight:600;text-decoration:none;color:var(--nh-accent)}
body.nh-a-page .nh-a-row:has(.nh-a-map){padding-right:64px}

/* more / less, in place */
body.nh-a-page .nh-a-more summary{display:flex;align-items:center;min-height:44px;list-style:none;cursor:pointer;color:var(--nh-accent);font-size:15px;font-weight:600;border-top:1px solid var(--nh-line)}
body.nh-a-page .nh-a-more summary::-webkit-details-marker{display:none}
body.nh-a-page .nh-a-more summary::after{content:"";width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .24s var(--nh-ease-micro)}
body.nh-a-page .nh-a-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
body.nh-a-page .nh-a-more .nh-a-m2,body.nh-a-page .nh-a-more[open] .nh-a-m1{display:none}
body.nh-a-page .nh-a-more[open] .nh-a-m2{display:inline}
@supports (interpolate-size:allow-keywords){body.nh-a-page{interpolate-size:allow-keywords}
 body.nh-a-page .nh-a-more::details-content{height:0;overflow:clip;transition:height .24s var(--nh-ease-micro),content-visibility .24s allow-discrete}
 body.nh-a-page .nh-a-more[open]::details-content{height:auto}}

/* chip filter (cafés / shops) */
body.nh-a-page .nh-a-chipbar{display:flex;gap:8px;margin:0 0 8px}
body.nh-a-page .nh-a-chipbar button{min-height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--nh-surface);color:var(--nh-fg);font:600 14px/1 var(--nh-font);cursor:pointer;transition:background-color .18s var(--nh-ease-micro),color .18s var(--nh-ease-micro);position:relative}
body.nh-a-page .nh-a-chipbar button::before{content:"";position:absolute;inset:-4px 0}
body.nh-a-page .nh-a-chipbar button[aria-pressed="true"]{background:var(--nh-fg);color:var(--nh-bg)}
body.nh-a-page .nh-a-sec[data-f="cafe"] li[data-k]:not([data-k="cafe"]),body.nh-a-page .nh-a-sec[data-f="food"] li[data-k]:not([data-k="food"]),body.nh-a-page .nh-a-sec[data-f="shop"] li[data-k]:not([data-k="shop"]){display:none}

/* local Shorts */
body.nh-a-page .nh-a-shs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}
body.nh-a-page .nh-a-shs>li,body.nh-a-page .nh-a-more .nh-a-shs>li:first-child{border:0}
body.nh-a-page .nh-a-more .nh-a-shs{margin:12px 0 4px}
body.nh-a-page .nh-a-sh{display:block;text-decoration:none;transition:transform .12s var(--nh-ease-micro)}
body.nh-a-page .nh-a-sh:active{transform:scale(.97)}
body.nh-a-page .nh-a-shp{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--nh-surface)}
body.nh-a-page .nh-a-shp img{width:100%;height:100%;object-fit:cover;display:block}
body.nh-a-page .nh-a-shp i{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font-size:10px}
body.nh-a-page .nh-a-sh b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:13px;line-height:18px;font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
body.nh-a-page .nh-a-sh small{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--nh-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.nh-a-page .nh-a-all{margin:12px 0 0;font-size:15px;font-weight:600}
body.nh-a-page .nh-a-all a{color:var(--nh-accent);text-decoration:none}

body.nh-a-page .nh-a-credits{margin:64px 16px 0;padding-top:16px;border-top:1px solid var(--nh-line);font-size:13px;line-height:18px;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-credits h2{margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;color:var(--nh-fg-2)}
body.nh-a-page .nh-a-credits ol{margin:0;padding-left:18px}
body.nh-a-page .nh-a-credits li{word-break:keep-all;overflow-wrap:anywhere}
body.nh-a-page .nh-a-credits li:target{color:var(--nh-fg)}
body.nh-a-page .nh-a-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
body.nh-a-page .nh-a-ugcf{display:grid;gap:10px}

/* keep-all is for Korean only: Japanese has no spaces and would never wrap */
html[lang="ja"] body.nh-a-page .nh-a *,html[lang="ja"] #nh-areas *{word-break:normal;line-break:strict;overflow-wrap:anywhere}
body.nh-a-page .nh-a :focus-visible,#nh-areas :focus-visible{outline:2px solid var(--nh-accent);outline-offset:2px;border-radius:6px}
@media (max-width:767px){body.nh-a-page .nh-a-cover{width:100vw;margin-left:calc(50% - 50vw)}}
@media (min-width:768px){body.nh-a-page .nh-a-head{padding:24px 0 4px}body.nh-a-page .nh-a-sec{margin-top:64px;padding:0}body.nh-a-page .nh-a-credits{margin:64px 0 0}
 body.nh-a-page .nh-a-shs{grid-template-columns:repeat(3,minmax(0,180px));gap:20px 16px}body.nh-a-page .nh-a-tabs-in{justify-content:flex-start;gap:8px;padding:0}body.nh-a-page .nh-a-tabs a{flex:0 0 auto;padding:0 12px}}

/* ---------- home block (#nh-areas) ---------- */
#nh-areas{font-family:var(--nh-font);color:var(--nh-fg);margin:4px 0 0;-webkit-tap-highlight-color:transparent}
#nh-areas h2{margin:28px 0 16px;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
#nh-areas .nh-a-fx{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 16px;border-radius:14px;background:var(--nh-surface);color:var(--nh-fg);text-decoration:none;font-size:15px;line-height:20px;font-weight:600}
#nh-areas .nh-a-fx span{color:var(--nh-accent)}
#nh-areas .nh-a-grid,#nh-areas .nh-a-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#nh-areas .nh-a-bi{position:relative;min-width:0}
#nh-areas .nh-a-big{grid-column:1/-1}
#nh-areas .nh-a-blk{position:relative;display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--nh-surface);color:#fff;text-decoration:none;transform:translateZ(0);transition:transform .42s var(--nh-spring-open)}
#nh-areas .nh-a-big .nh-a-blk{aspect-ratio:3/2;border-radius:24px}
#nh-areas .nh-a-blk:active{transform:scale(.97);transition-duration:.12s;transition-timing-function:var(--nh-ease-micro)}
#nh-areas .nh-a-blk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;view-transition-name:var(--nh-vt);view-transition-class:nh-area}
#nh-areas .nh-a-blk::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 100%);pointer-events:none}
#nh-areas .nh-a-blk.nh-a-strong::after{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.82) 100%)}
#nh-areas .nh-a-cap{position:absolute;left:16px;right:44px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px}
#nh-areas .nh-a-cap b{font-size:17px;line-height:22px;font-weight:600;word-break:keep-all}
#nh-areas .nh-a-big .nh-a-cap b{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.01em}
#nh-areas .nh-a-cap small{font-size:13px;line-height:18px;opacity:.92}
#nh-areas .nh-a-badge{position:absolute;top:12px;right:12px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#nh-areas .nh-a-badge{background:rgba(0,0,0,.72)}}
#nh-areas .nh-a-ref{top:12px;bottom:auto}
#nh-areas .nh-a-type{background:var(--nh-surface);color:var(--nh-fg)}
#nh-areas .nh-a-type::after{display:none}
#nh-areas .nh-a-type .nh-a-cap b{font-size:28px;line-height:34px;font-weight:700}
#nh-areas .nh-a-basis{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--nh-fg-2)}
#nh-areas .nh-a-nw{white-space:nowrap}
#nh-areas .nh-a-cats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
#nh-areas .nh-a-cats a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;aspect-ratio:4/3;padding:12px 14px;border-radius:20px;background:var(--nh-surface);color:var(--nh-fg);text-decoration:none;transition:transform .42s var(--nh-spring-open)}
#nh-areas .nh-a-cats a:active{transform:scale(.97);transition-duration:.12s}
#nh-areas .nh-a-cats b{font-size:17px;line-height:22px;font-weight:600;word-break:keep-all}
#nh-areas .nh-a-cats small{font-size:13px;line-height:18px;color:var(--nh-fg-2)}
#nh-areas .nh-a-ci{position:absolute;left:14px;top:12px;width:28px;height:28px;color:var(--nh-fg-2)}
#nh-areas .nh-a-ci svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#nh-areas .nh-a-hr{margin:48px 0 0;border:0;border-top:1px solid var(--nh-line)}
#nh-areas .nh-a-moreh{margin:24px 0 8px}
@media (min-width:768px){#nh-areas .nh-a-grid{gap:24px}#nh-areas .nh-a-blk{aspect-ratio:4/3}#nh-areas .nh-a-big .nh-a-blk{aspect-ratio:3/2}#nh-areas .nh-a-cats{gap:24px}#nh-areas .nh-a-hr{margin-top:64px}}
@media (max-width:420px){#nh-areas .nh-a-cats a{aspect-ratio:auto;min-height:88px;padding-top:44px}#nh-areas .nh-a-ci{width:22px;height:22px}#nh-areas .nh-a-cats b{font-size:15px;line-height:20px}}

/* ---------- shared-photo transition between the block and the area hero ---------- */
@view-transition{navigation:auto}
::view-transition-group(*.nh-area){animation-duration:420ms;animation-timing-function:var(--nh-spring-open)}
:root.nh-back::view-transition-group(*.nh-area){animation-duration:320ms;animation-timing-function:var(--nh-ease-close)}
::view-transition-image-pair(*.nh-area){overflow:hidden;animation:nh-a-rad 420ms var(--nh-spring-open) both}
:root.nh-back::view-transition-image-pair(*.nh-area){animation:nh-a-rad 320ms var(--nh-ease-close) both reverse}
@keyframes nh-a-rad{from{border-radius:24px}to{border-radius:0}}
/* the site header is the same on both pages: it stays put instead of fading out and back in */
body.nh-a-page .mobile-header,body:has(#nh-areas) .mobile-header{view-transition-name:nh-header}
body.nh-a-page .layout>aside.left,body:has(#nh-areas) .layout>aside.left{view-transition-name:nh-side}
::view-transition-group(nh-header),::view-transition-group(nh-side),::view-transition-new(nh-header),::view-transition-new(nh-side){animation:none}
::view-transition-old(nh-header),::view-transition-old(nh-side){animation:none;opacity:0}
::view-transition-old(*.nh-area),::view-transition-new(*.nh-area){height:100%;object-fit:cover}
::view-transition-old(root){animation:120ms var(--nh-ease-micro) both nh-a-out}
::view-transition-new(root){animation:120ms var(--nh-ease-micro) 294ms both nh-a-in}
:root.nh-back::view-transition-new(root){animation-delay:194ms}
@keyframes nh-a-out{to{opacity:0}}
@keyframes nh-a-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
 body.nh-a-page .nh-a-cover img,#nh-areas .nh-a-blk img{view-transition-name:none}
 ::view-transition-old(root),::view-transition-new(root){animation:150ms linear both nh-a-in;animation-delay:0s}
 ::view-transition-old(root){animation-name:nh-a-out}
 #nh-areas .nh-a-blk:active,#nh-areas .nh-a-cats a:active,body.nh-a-page .nh-a-sh:active{transform:none}
 body.nh-a-page .nh-a-more::details-content{transition:none}}

/* related hubs */
.nh-a-more{margin:48px 0 0}.nh-a-more h2{font-size:22px;line-height:28px;font-weight:700;margin:0 0 12px}.nh-a-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.nh-a-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--nh-surface);color:var(--nh-fg);font-size:15px;font-weight:600;text-decoration:none}.nh-a-more a:focus-visible{outline:2px solid var(--nh-accent);outline-offset:2px}
/* desktop: category tiles keep a fixed, compact height instead of 4:3 so they do not read as empty cards */
@media (min-width:768px){#nh-areas .nh-a-cats a{aspect-ratio:auto;min-height:112px;padding:16px 18px}}