/* NowHitz frame for every page except the home: the home's header, left column (live issues), right column (kitten panel)
   and phone tab bar around the page's own content. Rules for the side columns and kitten panel are copied from app.css (computer widths). */
:root{--ink:#1D1D1F;--ink2:#48484A;--ink3:#86868B;--line:#E5E5EA;--acc:#D2412E;--sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard","Noto Sans KR","Hiragino Sans","Noto Sans JP","Malgun Gothic",sans-serif}
@media (min-width:1024px){
 .side-l,.side-r{position:fixed;top:0;bottom:0;overflow-y:auto;background:#fff;box-sizing:border-box;z-index:2;scrollbar-width:none;font-family:var(--sys);color:var(--ink)}
 .side-l{left:0;width:var(--sideL);border-right:1px solid #EDEDF0;padding:26px 18px 32px}
 .side-r{right:0;width:var(--sideR);border-left:1px solid #EDEDF0;padding:22px 22px 40px}
 .sl-wx{display:flex;align-items:center;gap:10px;margin:0 2px 10px;font-size:13px;color:#86868B}
 .sl-sky{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600}.sl-sky svg{width:16px;height:16px}
 .sl-cat{all:unset;position:relative;display:block;width:86%;aspect-ratio:9/16;max-height:46vh;margin:0 auto 14px;cursor:pointer;overflow:hidden;border-radius:0;box-shadow:none}
 .sl-cat video{width:100%;height:100%;object-fit:contain;transform:scale(2.0);transform-origin:52% 58%;mix-blend-mode:multiply;display:block}
 .sl-cat img.wstill{display:block;width:100%;height:100%;object-fit:contain;transform:none;mix-blend-mode:multiply}.wstill[hidden],.sl-cat video[hidden]{display:none}
 .sl-fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
 .sl-snow{position:absolute;inset:-20px 0 0;pointer-events:none;background-image:radial-gradient(3px 3px at 20% 10%,#fff 60%,transparent 61%),radial-gradient(2px 2px at 70% 30%,#fff 60%,transparent 61%),radial-gradient(3px 3px at 40% 60%,#fff 60%,transparent 61%),radial-gradient(2px 2px at 85% 80%,#fff 60%,transparent 61%),radial-gradient(2.5px 2.5px at 10% 85%,#fff 60%,transparent 61%);background-size:120px 160px;filter:drop-shadow(0 0 1px rgba(0,0,0,.25));animation:slsnow 9s linear infinite}
 @keyframes slsnow{to{background-position:0 160px,20px 160px,-10px 160px,15px 160px,-20px 160px}}
 @media (prefers-reduced-motion:reduce){.sl-snow{animation:none}}
 .sl-h{display:flex;align-items:center;gap:7px;margin:0 2px 10px;font-size:15px;font-weight:700;letter-spacing:-.02em}
 .sl-h small{margin-left:auto;font-size:11px;font-weight:500;color:#A1A1A6;font-variant-numeric:tabular-nums}
 .sl-live{width:7px;height:7px;border-radius:50%;background:#D2412E;animation:sllive 1.6s ease-in-out infinite}
 @keyframes sllive{50%{opacity:.25;transform:scale(.7)}}
 .sl-hot li{opacity:1}
 .sl-hot li.in{animation:slin .5s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--i) * 60ms)}
 @keyframes slin{from{opacity:0;transform:translateY(8px)}}
 .sl-hot .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
 .sl-hot .tx b{font-weight:500;font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
 .sl-hot .tx small{font-size:12px;line-height:1.45;color:#86868B;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
 .sl-hot li.fo .tx small,.sl-hot li:hover .tx small{max-height:3.2em;opacity:1}
 .sl-hot li.fo button{background:linear-gradient(90deg,rgba(210,65,46,.06),transparent 70%)}
 .sl-hot a{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:baseline;width:100%;padding:10px 2px;border-bottom:1px solid #F0F0F2;cursor:pointer}
 .sl-hot li.fo a{background:linear-gradient(90deg,rgba(210,65,46,.06),transparent 70%)}
 .sl-hot .tr{font-style:normal;font-size:11px;color:#A1A1A6}
 .sl-hot .mv{flex:none;font-style:normal;font-size:10.5px;font-weight:700;align-self:flex-start;margin-top:2px}
 .sl-hot .mv.n{color:#D2412E}.sl-hot .mv.u{color:#D2412E}.sl-hot .mv.d{color:#3B6FD8}.sl-hot .mv.s{color:#C7C7CC}
 @media (prefers-reduced-motion:reduce){.sl-live,.sl-hot li.in{animation:none}}
 .sl-hot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
 .sl-hot button{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:baseline;width:100%;padding:10px 2px;border-bottom:1px solid #F0F0F2;cursor:pointer}
 .sl-hot .rk{flex:none;width:22px;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
 .sl-hot li:nth-child(-n+3) .rk{color:#D2412E}
 .sl-hot button:hover .tx{text-decoration:underline;text-underline-offset:3px}
 .sm-p{margin:0 0 10px;font-size:13px;line-height:1.5;color:#86868B;word-break:keep-all}
 .sm-btn{all:unset;box-sizing:border-box;display:block;width:100%;padding:13px 0;border-radius:999px;background:#0E0E0F;color:#fff;text-align:center;font-size:14.5px;font-weight:600;cursor:pointer}
 .sm-name{margin:0 2px 8px;font:700 16px/1.3 var(--sys)}
 .sm-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .sm-outs button{all:unset;box-sizing:border-box;cursor:pointer;border-radius:14px;padding:4px 2px 6px;text-align:center;box-shadow:0 0 0 1px #EDEDF0}
 .sm-outs button[aria-pressed="true"]{box-shadow:0 0 0 1.5px #0E0E0F}
 .sm-outs img{width:100%;display:block;mix-blend-mode:multiply}.sm-outs span{font-size:11.5px;font-weight:600}
 .sm-row{display:flex;gap:16px;margin-top:10px}
 .sm-link{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
 .sl-greet{margin:0 2px 12px;font-size:15px;line-height:1.45;white-space:pre-line;word-break:keep-all;color:var(--ink)}
 .sl-diary{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border-radius:20px;box-shadow:0 0 0 1px #EDEDF0;color:inherit;text-decoration:none}
 .sl-diary b{font-size:14px}.sl-diary span{flex:1 1 100%;order:3;font-size:12.5px;color:#86868B}.sl-diary i{margin-left:auto;font-style:normal;color:#A1A1A6}
 /* the live row under the lead is already the left column on wide screens */
@media (min-width:1024px){
 .side-r{padding-top:24px}
 .sl-wx{font-size:15px;margin:0 2px 8px;min-height:44px}
 .sl-sky svg{width:19px;height:19px}.sl-sky b{font-size:16px}
 .sl-greet{display:flex;flex-direction:column;gap:2px;white-space:normal;margin:0 2px 14px}
 .sl-greet b{font-size:17px;font-weight:600;line-height:1.35}
 .sl-greet span{font-size:15px;color:#48484A}
}
.side-l .sl-hot button{position:relative}
.sl-th{position:absolute;right:0;bottom:10px;width:44px;height:44px;border-radius:10px;object-fit:cover}
.side-l .sl-hot li:has(.sl-th) .tx{padding-right:52px}
.side-l .sl-hot .tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr-th{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}
}
.sl-nav button{all:unset;box-sizing:border-box;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;cursor:pointer;font:600 11.5px/1 var(--sys);color:#1D1D1F}
.sl-nav button:hover{background:#F5F5F7}
.sl-nav svg{width:20px;height:20px}
.sl-nav .plus{display:grid;place-items:center}

/* ---- the frame ---- */
html{--sideL:min(18vw,260px);--sideR:min(24vw,340px)}
body.nhf{margin:0;background:#fff;color:var(--ink);font-family:var(--sys);-webkit-font-smoothing:antialiased;padding-bottom:0}
body.nhf .layout{display:block;max-width:none;margin:0;padding:0;background:#fff}
body.nhf .layout>main{max-width:760px;margin:0 auto;padding:8px 20px 150px;box-sizing:border-box;min-width:0}
body.nhf .skip{position:absolute;left:-9999px}
.nhf-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;height:56px;padding:0 16px;background:#fff;box-sizing:border-box}
.nhf-logo img{height:18px;width:auto;display:block}
.nhf-search{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink3);text-decoration:none;font-size:15px}
.nhf-search svg{width:21px;height:21px;color:var(--ink);flex:none}
.nhf-search span{display:none}
.nhf-hr{display:flex;align-items:center;gap:2px;margin-left:auto;position:relative}
.nhf-lang{all:unset;box-sizing:border-box;height:40px;padding:0 6px;font:600 14px/40px var(--sys);color:var(--ink);cursor:pointer}
.nhf-menu{position:absolute;right:0;top:46px;min-width:160px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #E5E5EA,0 12px 32px rgba(0,0,0,.12);display:none;z-index:40}
.nhf-menu.on{display:block}
.nhf-menu p{margin:6px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink3)}
.nhf-menu a{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 12px;border-radius:12px;font-size:16px;color:var(--ink);text-decoration:none}
.nhf-menu a:hover{background:#F5F5F7}
.nhf-menu a[aria-current="true"]::after{content:"✓";font-size:14px;color:var(--acc)}
.side-l,.side-r{display:none}
@media (max-width:1023px){body.nhf .layout>main{padding-bottom:170px}}
@media (min-width:1024px){
 body.nhf .layout{margin:0 var(--sideR) 0 var(--sideL)}
 body.nhf .layout>main{max-width:820px;padding:8px 36px 80px}
 .nhf-head{margin:0 var(--sideR) 0 var(--sideL);padding:0 36px;height:70px}
 .nhf-head .nhf-logo{display:none}
 .nhf-search{flex:1;height:44px;padding:0 16px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #E5E5EA;max-width:640px}
 .nhf-search span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nhf-hr{margin-left:12px}
 .side-l,.side-r{display:block}
 .side-l .sl-logo img{height:24px;width:auto;display:block}
 .side-l .sl-hot li{list-style:none}
 .sl-hot a{text-decoration:none;color:inherit}
 body.nhf .nhs-bar{display:none}
}
.sl-nav a{box-sizing:border-box;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;font:600 11.5px/1.2 var(--sys);color:#1D1D1F;text-decoration:none;text-align:center}
.sl-nav a:hover{background:#F5F5F7}
.sl-nav a span{word-break:keep-all}
/* same look as the home menu (QA 2026-10-31): three in a row, 11.5px/600 labels, 20px icons, 24px logo */
body.nhf .side-l .sl-logo{display:block;margin:0 2px 22px}
body.nhf .side-l .sl-nav{display:flex;gap:6px;margin:6px 0 18px}
body.nhf .side-l .sl-nav a{box-sizing:border-box;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;font:600 11.5px/1 var(--sys);color:#1D1D1F;text-decoration:none;text-align:center}
body.nhf .side-l .sl-nav a:hover{background:#F5F5F7}
body.nhf .side-l .sl-nav svg{width:20px;height:20px;display:block}

/* phones: nothing scrolls sideways, the ask button and the booking bar stack above the tab bar instead of on top of each other,
   and the small labels are readable (HQ review 2026-10-31 B1, B2, B6) */
body.nhf .layout>main{overflow-x:clip}
@media (max-width:1023px){
 .nha-b{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 html.nha-up .nha-b{bottom:calc(158px + env(safe-area-inset-bottom,0px))}
 .nhs-tabs a{font-size:11.5px}
 .nh-photo-caption,.card .references,.card .references a{font-size:11.5px}
}
.sl-cat img.wstill{object-fit:contain;transform:scale(2.0);transform-origin:52% 58%}
@keyframes wstep{0%,100%{translate:0 0}50%{translate:-2px -3px}}.sl-cat img.wstill:not([hidden]){animation:wstep .9s ease-in-out infinite}

/* opaque white, kitten art multiplied (owner 2026-10-31) */
.side-r,.sl-cat{background:#fff}
#slV,.sl-cat video,.sl-cat .wstill,#tcat,.tcat img,img[src*="/assets/app/cats/tab-"]{mix-blend-mode:multiply}
.pl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.pl-n{all:unset;box-sizing:border-box;cursor:pointer;color:inherit;font:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.pl-n:focus-visible,.pl-go:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px}
.pl-a{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}
.pl-a[hidden]{display:none!important}
.pl-go{all:unset;box-sizing:border-box;cursor:pointer;height:28px;padding:0 12px;border-radius:999px;background:#fff;color:#1D1D1F;font:600 12.5px/28px system-ui,sans-serif;box-shadow:inset 0 0 0 1px #1D1D1F}
.pl-m{font-size:12.5px;color:#48484A}
/* the booking/compare button sits in the page after the text, not as a third layer over it and the tab bar */
body.nhf .rd-sh-bar,body.nhf .nhs-bar~.rd-sh-bar{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:760px;margin:0 auto;padding:0 20px 24px;box-sizing:border-box}
body.nhf .rd-sh-bar button{box-shadow:none;background:#0E0E0F;color:#fff;border-radius:999px}
body.nhf,body.nhf:has(.rd-sh-bar){padding-bottom:0!important}
@media (max-width:1023px){body.nhf .rd-sh-bar{margin-bottom:96px}}
/* place pages: nothing is wider than the screen; the address-copy and map links are pill buttons like everywhere else */
body.nhf main.pl{min-width:0;width:100%;max-width:100%;box-sizing:border-box;overflow-x:clip}
body.nhf main.pl>*{min-width:0;max-width:100%}
body.nhf main.pl .plgo-m{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body.nhf main.pl .plgo [data-copy],body.nhf main.pl .plgo-m a{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E5E5EA;color:#1D1D1F;font:600 14px/1 var(--sys);cursor:pointer}
body.nhf main.pl .plgo [data-copy]{margin-top:10px}