/* =========================================================================
 * 동네업소(business) 상세 페이지
 * inc/business-ui.php 가 그리는 마크업 전용. 색은 전부 시즌 브랜드 변수를 따른다.
 * 하드코딩 hex 는 중립 그레이와 카카오 옐로우(#FEE500)만 허용.
 * ========================================================================= */

.nz-biz {
    --biz-r-sm: 8px;
    --biz-r: 12px;
    --biz-r-lg: 16px;
    --biz-ink: #212529;
    --biz-ink-2: #495057;
    --biz-ink-3: #868e96;
    --biz-line: #e9ecef;
    --biz-line-2: #f1f3f5;
    --biz-surface: #fff;
    --biz-surface-2: #f8f9fa;
    --biz-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    --biz-shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--biz-surface);
    color: var(--biz-ink);
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nz-biz *,
.nz-biz *::before,
.nz-biz *::after {
    box-sizing: border-box;
}

.nz-biz :focus-visible {
    outline: 2px solid var(--primary-color, #ff6f0f);
    outline-offset: 2px;
    border-radius: 4px;
}

.nz-biz .nz-biz-i {
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 상단바
 * ------------------------------------------------------------------------- */
.nz-biz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--biz-line);
    background: var(--biz-surface);
}

.nz-biz-tb-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nz-biz-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--biz-r-sm);
    color: var(--biz-ink-2);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease;
}

.nz-biz-tb-btn:hover {
    background: var(--biz-surface-2);
}

@media (max-width: 767px) {
    .nz-biz-tb-label {
        display: none;
    }
}

/* 더보기 메뉴 */
.nz-biz-menu {
    position: relative;
}

.nz-biz-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--biz-surface);
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r);
    box-shadow: var(--biz-shadow-lg);
}

.nz-biz-menu-list[hidden] {
    display: none;
}

.nz-biz-menu-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--biz-r-sm);
    color: var(--biz-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.nz-biz-menu-list a:hover {
    background: var(--biz-surface-2);
    color: var(--biz-ink);
}

.nz-biz-menu-list a.is-danger {
    color: #d64545;
}

.nz-biz-menu-list a.is-danger:hover {
    background: #fdeded;
}

/* -------------------------------------------------------------------------
 * 히어로
 * ------------------------------------------------------------------------- */
/*
 * 높이는 aspect-ratio 로 잡지 않는다.
 * aspect-ratio 와 max-height 를 같이 걸면 넓은 화면에서 max-height 가 이기면서
 * 박스가 3:1 처럼 납작해지고, cover 로 잘라낸 상하가 통째로 날아간다.
 */
.nz-biz-hero {
    position: relative;
    width: 100%;
    height: min(75vw, 400px);
    background: var(--biz-surface-2);
    overflow: hidden;
}

.nz-biz-hero .swiper,
.nz-biz-hero-one {
    width: 100%;
    height: 100%;
}

.nz-biz-hero img {
    display: block;
    width: 100%;
    height: 100%;
    /*
     * 모바일은 한 장을 꽉 채우는 히어로라 cover 가 맞다.
     * 칸이 4:3 에 가까워서 잘려 나가는 양도 얼마 안 된다.
     * 넓은 화면(여러 장 나열)에서는 아래에서 contain 으로 바꾼다.
     */
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* 슬라이드 폭은 Swiper 가 slidesPerView 에 맞춰 인라인으로 잡으므로 건드리지 않는다 */
.nz-biz-hero .swiper-slide {
    height: 100%;
}

.nz-biz-hero .nz-lightbox-trigger {
    /* 전역 .nz-lightbox-trigger 가 inline-block 이라 베이스라인 여백이 생긴다 */
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.nz-biz-hero--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-bg, #fff4e6), var(--biz-surface));
    border-bottom: 1px solid var(--biz-line);
}

.nz-biz-hero-mark {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--primary-color, #ff6f0f);
    opacity: .55;
}

.nz-biz-hero-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: rgba(20, 20, 20, .38);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: background .18s ease;
}

.nz-biz-hero-nav:hover {
    background: rgba(20, 20, 20, .62);
}

.nz-biz-hero-nav.prev {
    left: 10px;
    transform: rotate(90deg);
}

.nz-biz-hero-nav.next {
    right: 10px;
    transform: rotate(-90deg);
}

.nz-biz-hero-count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    padding: 4px 11px;
    background: rgba(20, 20, 20, .55);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    backdrop-filter: blur(3px);
}

/*
 * 슬라이드가 다 들어차서 넘길 게 없으면(Swiper isLocked) 가운데로 모으고
 * 화살표·장수 표시를 감춘다. 사진이 2~3장뿐인 업소에서 왼쪽에 몰려 보이지 않게.
 */
.nz-biz-hero.is-locked .swiper-wrapper {
    justify-content: center;
}

.nz-biz-hero.is-locked .nz-biz-hero-nav,
.nz-biz-hero.is-locked .nz-biz-hero-count {
    display: none;
}

/*
 * 넓은 화면에서는 한 장을 가로로 늘리는 대신 여러 장을 나란히 세우고 넘긴다.
 *
 * 칸을 균등 분할(slidesPerView: 3)하고 contain 으로 맞추던 때는, 세로 사진이
 * 칸보다 훨씬 좁아서 양옆에 연회색 필러박스가 100px 넘게 남았다. 사진 사이가
 * 휑하게 벌어져 보이던 원인이 그 여백이다(간격 자체는 10~12px 였다).
 * 지금은 높이만 고정하고 폭을 사진 비율이 정하게 둔다(slidesPerView: 'auto').
 * 세로 사진은 좁은 칸, 가로 사진은 넓은 칸이 되어 여백이 아예 생기지 않고
 * 잘려 나가는 것도 없다.
 */
@media (min-width: 768px) {
    .nz-biz-hero {
        width: auto;
        height: 300px;
        margin: 12px 16px 0;
        border-radius: var(--biz-r-lg);
        background: transparent;
    }

    .nz-biz-hero .swiper-slide {
        width: auto;
        background: var(--biz-surface-2);
        border-radius: var(--biz-r);
        overflow: hidden;
    }

    /* 칸 폭은 안쪽 img 의 실제 폭이 정한다 — 여기서 100% 를 걸면 다시 균등 분할이 된다 */
    .nz-biz-hero .nz-lightbox-trigger {
        width: auto;
    }

    /*
     * height 만 고정하고 width: auto → 사진 비율 그대로 칸이 만들어진다.
     * 파노라마처럼 지나치게 긴 사진만 max-width 로 자른다(그 경우만 cover 가 일한다).
     */
    .nz-biz-hero img {
        width: auto;
        min-width: 120px;
        max-width: min(70vw, 520px);
        object-fit: cover;
    }

    /* 사진이 한 장뿐이면 통짜로 늘리지 않고 알맞은 폭으로 가운데 세운다 */
    .nz-biz-hero--single {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    /* img 가 width: auto 라 그냥 두면 왼쪽에 붙는다 — 한 장짜리는 가운데로 */
    .nz-biz-hero--single .nz-biz-hero-one {
        display: flex;
        justify-content: center;
        background: var(--biz-surface-2);
        border-radius: var(--biz-r);
        overflow: hidden;
    }
}

@media (min-width: 1024px) {
    .nz-biz-hero {
        height: 330px;
    }
}

/* -------------------------------------------------------------------------
 * 본체 레이아웃
 * ------------------------------------------------------------------------- */
.nz-biz-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px 16px 0;
}

.nz-biz-main {
    min-width: 0;
    flex: 1;
}

.nz-biz-side {
    display: none;
}

@media (min-width: 992px) {
    .nz-biz-shell {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
        padding: 22px 20px 0;
    }

    .nz-biz-side {
        display: block;
        flex: 0 0 320px;
        width: 320px;
        position: sticky;
        top: 90px;
    }

    body.admin-bar .nz-biz-side {
        top: 122px;
    }
}

/* -------------------------------------------------------------------------
 * 정체성 블록
 * ------------------------------------------------------------------------- */
.nz-biz-identity {
    margin-bottom: 16px;
}

.nz-biz-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.nz-biz-badges:empty {
    display: none;
}

.nz-biz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.nz-biz-badge.is-verified {
    background: var(--primary-bg, #fff4e6);
    border-color: var(--primary-border, #ffe8cc);
    color: var(--primary-dark, #e8590c);
}

.nz-biz-badge.is-new {
    background: #e6f7ed;
    border-color: #b7e4c9;
    color: #0f7b3e;
}

.nz-biz-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.nz-biz-title {
    margin: 0 0 8px;
    font-size: clamp(21px, 4.6vw, 28px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: var(--biz-ink);
    word-break: keep-all;
}

.nz-biz-metaline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--biz-ink-3);
}

.nz-biz-meta-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--biz-ink-2);
    text-decoration: none;
}

.nz-biz-meta-rating strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--biz-ink);
}

.nz-biz-meta-rating span {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--biz-line);
}

.nz-biz-meta-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nz-biz-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 0;
}

.nz-biz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.nz-biz-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--biz-surface-2);
    border: 1px solid var(--biz-line);
    border-radius: 999px;
    color: var(--biz-ink-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}

.nz-biz-chip:hover {
    border-color: var(--primary-border, #ffe8cc);
    background: var(--primary-bg, #fff4e6);
    color: var(--primary-dark, #e8590c);
}

.nz-biz-chip.is-cat {
    background: var(--primary-bg, #fff4e6);
    border-color: var(--primary-border, #ffe8cc);
    color: var(--primary-dark, #e8590c);
}

/* -------------------------------------------------------------------------
 * 버튼
 * ------------------------------------------------------------------------- */
.nz-biz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--biz-r);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.nz-biz-btn:active {
    transform: scale(.97);
}

.nz-biz-btn.is-primary {
    background: var(--cta-color, var(--primary-color, #ff6f0f));
    color: var(--cta-ink, #1a1a1a);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb, 255, 111, 15), .22);
}

.nz-biz-btn.is-primary:hover {
    background: var(--cta-dark, var(--primary-dark, #e8590c));
}

.nz-biz-btn.is-cta {
    background: var(--primary-color, #ff6f0f);
    color: #fff;
}

.nz-biz-btn.is-cta:hover {
    background: var(--primary-dark, #e8590c);
}

.nz-biz-btn.is-ghost {
    background: var(--biz-surface);
    border-color: var(--biz-line);
    color: var(--biz-ink-2);
}

.nz-biz-btn.is-ghost:hover {
    background: var(--biz-surface-2);
    border-color: #dde1e6;
}

.nz-biz-btn.is-kakao,
.nz-biz-btn.is-kakao-primary {
    background: #FEE500;
    color: #3c1e1e;
    box-shadow: none;
}

.nz-biz-btn.is-kakao:hover,
.nz-biz-btn.is-kakao-primary:hover {
    background: #f5dd00;
}

.nz-biz-btn.is-danger {
    background: #d64545;
    color: #fff;
}

.nz-biz-btn.is-danger:hover {
    background: #c03434;
}

/* 액션 줄 — 1차 버튼이 남은 폭을 먹고, 아이콘 버튼은 정사각.
   전화·카톡·길찾기·웹사이트·찜이 모두 있는 업소도 있으므로, 좁은 화면에서는
   찌그러뜨리는 대신 다음 줄로 넘긴다. */
.nz-biz-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.nz-biz-actions .nz-biz-btn {
    flex: 1 1 auto;
}

.nz-biz-actions .nz-biz-btn:not(.is-icon) {
    min-width: 96px;
}

.nz-biz-actions .nz-biz-btn.is-primary {
    flex: 2 1 0;
}

.nz-biz-actions .nz-biz-btn.is-icon {
    flex: 0 0 52px;
    width: 52px;
    padding: 12px 0;
}

.nz-biz-actions .nz-biz-btn.is-icon .nz-biz-btn-t {
    display: none;
}

.nz-biz-fav.is-on {
    background: #fdecec;
    border-color: #f4b8b8;
    color: #d64545;
}

.nz-biz-fav.is-on .nz-biz-i {
    fill: currentColor;
}

/* 사이드 열 안에서는 세로로 쌓는다 */
.nz-biz-actions--side {
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.nz-biz-actions--side .nz-biz-btn.is-primary {
    flex: 1 0 100%;
}

/*
 * 데스크톱에서는 우측 sticky 카드가 스크롤 내내 같은 버튼을 들고 다닌다.
 * 본문 위쪽 줄까지 두면 같은 CTA 가 화면에 두 번 보이므로 본문 쪽을 접는다.
 * (하단 고정 바는 이미 992px 이상에서 숨김 — 세 벌이 겹치지 않는다)
 */
@media (min-width: 992px) {
    .nz-biz-actions--inline {
        display: none;
    }
}

/*
 * 모바일에서는 줄바꿈을 막는다. 전화·카톡·길찾기·웹사이트·찜이 전부 있는 업소는
 * 기본값(min-width 96px + 아이콘 52px)으로 360px 화면에서 380px 를 요구해
 * 찜이 둘째 줄로 떨어졌다. 아이콘 버튼을 좁히고 텍스트 버튼의 min-width 를 풀어
 * 한 줄에 밀어 넣는다. 본문 줄·하단 고정 바 둘 다 같은 규칙을 쓴다.
 */
@media (max-width: 991px) {

    .nz-biz-actions--inline,
    .nz-biz-actions--sticky {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .nz-biz-actions--inline .nz-biz-btn,
    .nz-biz-actions--sticky .nz-biz-btn {
        min-height: 44px;
        padding: 11px 8px;
        font-size: 14px;
    }

    /* min-width 를 풀어 남는 폭이 모자랄 때 줄바꿈 대신 조금씩 줄어들게 한다 */
    .nz-biz-actions--inline .nz-biz-btn:not(.is-icon),
    .nz-biz-actions--sticky .nz-biz-btn:not(.is-icon) {
        min-width: 0;
    }

    /* 기본값은 flex-basis 0(2 1 0) 이라 줄바꿈을 막으면 1차 버튼이 글자보다
       좁게 찌그러진다. 모바일에서는 글자 폭에서 출발해 남는 만큼만 늘린다. */
    .nz-biz-actions--inline .nz-biz-btn.is-primary,
    .nz-biz-actions--sticky .nz-biz-btn.is-primary {
        flex: 2 1 auto;
    }

    .nz-biz-actions--inline .nz-biz-btn.is-icon,
    .nz-biz-actions--sticky .nz-biz-btn.is-icon {
        flex: 0 0 42px;
        width: 42px;
        padding: 11px 0;
    }
}

/* 아주 좁은 기기(≤359px)에서는 카톡도 아이콘만 남겨야 다섯 개가 들어간다.
   (카톡이 1차 버튼인 업소는 .is-kakao-primary 라 여기 걸리지 않는다) */
@media (max-width: 359px) {

    .nz-biz-actions--inline .nz-biz-btn.is-icon,
    .nz-biz-actions--sticky .nz-biz-btn.is-icon {
        flex: 0 0 40px;
        width: 40px;
    }

    .nz-biz-actions--inline .nz-biz-btn.is-kakao,
    .nz-biz-actions--sticky .nz-biz-btn.is-kakao {
        flex: 0 0 40px;
        width: 40px;
        padding: 11px 0;
    }

    .nz-biz-actions--inline .nz-biz-btn.is-kakao span,
    .nz-biz-actions--sticky .nz-biz-btn.is-kakao span {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * 하단 고정 CTA
 * .fixed-action-bar 가 position/transform/bottom 을 !important 로 잡으므로
 * 여기서는 opacity·visibility 로만 등퇴장을 만든다.
 * ------------------------------------------------------------------------- */
.nz-biz-sticky {
    z-index: 90;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--biz-line);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.nz-biz-sticky.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nz-biz-sticky .nz-biz-actions {
    margin-bottom: 0;
}

/*
 * 모바일에서는 바가 본문을 가리는 시간이 길다. 그래서
 *  (1) 하단 내비 바로 위(80px + 8px)까지 내려 붙이고
 *  (2) 스크롤을 내리는 동안에는 .is-tucked 로 치운다 (js/nz-business.js)
 * 버튼을 한 줄에 밀어 넣는 규칙은 위 액션 줄 섹션에서 본문 줄과 공유한다.
 */
@media (max-width: 991px) {
    .nz-biz-sticky.fixed-action-bar {
        bottom: 88px !important;
        padding: 8px 10px;
    }

    .nz-biz-sticky.is-tucked {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-50%) translateY(140%) !important;
    }
}

@media (min-width: 992px) {
    .nz-biz-sticky {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
 * 탭
 * ------------------------------------------------------------------------- */
.nz-biz-tabbar-wrap {
    position: sticky;
    top: 88px;
    z-index: 40;
    margin: 0 -16px 16px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--biz-line);
    backdrop-filter: blur(8px);
}

body.admin-bar .nz-biz-tabbar-wrap {
    top: 120px;
}

/* 모바일에서는 아예 고정하지 않는다 — 본문 위에 계속 떠 있는 게 더 불편하다.
   탭 줄은 제자리에서 같이 스크롤돼 올라가고, 바꾸려면 위로 올리면 된다. */
@media (max-width: 767px) {
    .nz-biz-tabbar-wrap {
        position: static;
        backdrop-filter: none;
    }
}

.nz-biz-tabbar {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nz-biz-tabbar::-webkit-scrollbar {
    display: none;
}

.nz-biz-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--biz-ink-3);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease;
}

.nz-biz-tab:hover {
    color: var(--biz-ink-2);
}

.nz-biz-tab.is-active {
    color: var(--primary-color, #ff6f0f);
    border-bottom-color: var(--primary-color, #ff6f0f);
}

.nz-biz-tab-n {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    background: var(--biz-surface-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--biz-ink-3);
}

.nz-biz-tab.is-active .nz-biz-tab-n {
    background: var(--primary-bg, #fff4e6);
    color: var(--primary-dark, #e8590c);
}

/* 모바일에서는 탭 줄을 얇게 — 화면에 계속 붙어 있는 요소라 높이가 곧 손해다 */
@media (max-width: 767px) {
    .nz-biz-tab {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* JS 가 붙기 전에는 모든 패널을 그대로 보여준다 (스크립트 실패 시에도 내용 유실 없음) */
.nz-biz-panels.js-tabs .nz-biz-panel {
    display: none;
}

.nz-biz-panels.js-tabs .nz-biz-panel.is-active {
    display: block;
}

/* -------------------------------------------------------------------------
 * 공통 블록
 * ------------------------------------------------------------------------- */
.nz-biz-block {
    margin-bottom: 28px;
}

.nz-biz-h2 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--biz-ink);
    letter-spacing: -.2px;
    word-break: keep-all;
}

.nz-biz-h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--biz-ink-2);
}

.nz-biz-card {
    background: var(--biz-surface);
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r-lg);
    box-shadow: var(--biz-shadow);
}

.nz-biz-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    background: var(--biz-surface);
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r-sm);
    color: var(--biz-ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease;
}

.nz-biz-more:hover {
    background: var(--biz-surface-2);
}

.nz-biz-more[aria-expanded="true"] .nz-biz-i,
.nz-biz-more.is-open .nz-biz-i {
    transform: rotate(180deg);
}

.nz-biz-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--biz-ink-3);
    font-size: 14px;
    line-height: 1.7;
    list-style: none;
}

/* -------------------------------------------------------------------------
 * 영업시간
 * ------------------------------------------------------------------------- */
.nz-biz-hours {
    margin-bottom: 24px;
    padding: 14px 16px;
}

.nz-biz-hours-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nz-biz-hours-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.nz-biz-hours-now {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.nz-biz-hours-now strong {
    font-size: 15px;
    font-weight: 800;
}

.nz-biz-hours-now span {
    font-size: 13px;
    color: var(--biz-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nz-biz-hours-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 6px 8px 10px;
    background: none;
    border: none;
    color: var(--biz-ink-3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nz-biz-hours-toggle .nz-biz-i {
    transition: transform .2s ease;
}

.nz-biz-hours-toggle[aria-expanded="true"] .nz-biz-i {
    transform: rotate(180deg);
}

.nz-biz-hours-list {
    display: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--biz-line-2);
    list-style: none;
}

.nz-biz-hours-list.is-open {
    display: block;
}

.nz-biz-hours-list li {
    padding: 7px 2px;
    font-size: 14px;
    color: var(--biz-ink-2);
    line-height: 1.5;
    word-break: keep-all;
}

.nz-biz-hours-list li.is-today {
    font-weight: 800;
    color: var(--biz-ink);
}

/* -------------------------------------------------------------------------
 * 소개 본문
 * ------------------------------------------------------------------------- */
.nz-biz-prose {
    position: relative;
    font-size: 15px;
    line-height: 1.75;
    color: var(--biz-ink-2);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.nz-biz-prose p {
    margin: 0 0 1.1em;
}

.nz-biz-prose img,
.nz-biz-prose iframe,
.nz-biz-prose video {
    max-width: 100%;
    height: auto;
    border-radius: var(--biz-r);
}

.nz-biz-prose a {
    color: var(--primary-dark, #e8590c);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nz-biz-prose.is-clamped {
    max-height: 320px;
    overflow: hidden;
}

.nz-biz-prose.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--biz-surface));
    pointer-events: none;
}

#nz-biz-intro-more {
    margin-top: 10px;
}

/* -------------------------------------------------------------------------
 * 연락처
 * ------------------------------------------------------------------------- */
.nz-biz-contact {
    margin: 0;
    padding: 4px 0;
    list-style: none;
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r-lg);
}

.nz-biz-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
}

.nz-biz-contact li+li {
    border-top: 1px solid var(--biz-line-2);
}

.nz-biz-contact-ico {
    flex: 0 0 auto;
    display: flex;
    color: var(--biz-ink-3);
    padding-top: 1px;
}

.nz-biz-contact-k {
    flex: 0 0 56px;
    font-size: 14px;
    font-weight: 700;
    color: var(--biz-ink-3);
}

.nz-biz-contact-v {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--biz-ink);
    text-decoration: none;
    word-break: break-all;
    line-height: 1.5;
}

.nz-biz-contact-v:hover {
    color: var(--primary-dark, #e8590c);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 지도 (지연 로드)
 * ------------------------------------------------------------------------- */
.nz-biz-map {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: var(--biz-r-lg);
    overflow: hidden;
    background: #e9ecef;
}

@media (min-width: 768px) {
    .nz-biz-map {
        height: 380px;
    }
}

.nz-biz-map-canvas {
    width: 100%;
    height: 100%;
}

.nz-biz-map-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: linear-gradient(135deg, var(--biz-surface-2), #eef0f2);
    color: var(--biz-ink-3);
    text-align: center;
}

.nz-biz-map-ph p {
    margin: 0;
    max-width: 320px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--biz-ink-2);
    word-break: keep-all;
}

.nz-biz-map-ph .nz-biz-more {
    width: auto;
    min-width: 140px;
}

.nz-biz-map-cta {
    width: 100%;
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * 사진 갤러리
 * ------------------------------------------------------------------------- */
.nz-biz-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

@media (min-width: 768px) {
    .nz-biz-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

.nz-biz-gallery-item {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--biz-r-sm);
    overflow: hidden;
    background: var(--biz-surface-2);
    cursor: zoom-in;
}

.nz-biz-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.nz-biz-gallery-item:hover img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------------------
 * 리뷰
 * ------------------------------------------------------------------------- */
.nz-biz-rsum {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    margin-bottom: 16px;
}

.nz-biz-rsum-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 92px;
}

.nz-biz-rsum-score strong {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.nz-biz-rsum-score span {
    font-size: 12px;
    color: var(--biz-ink-3);
}

.nz-biz-rsum-dist {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nz-biz-rsum-dist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.nz-biz-rsum-k {
    flex: 0 0 26px;
    font-size: 12px;
    color: var(--biz-ink-3);
}

.nz-biz-rsum-bar {
    flex: 1;
    height: 6px;
    background: var(--biz-line);
    border-radius: 999px;
    overflow: hidden;
}

.nz-biz-rsum-bar i {
    display: block;
    height: 100%;
    background: #ffb703;
    border-radius: 999px;
}

.nz-biz-rsum-n {
    flex: 0 0 22px;
    font-size: 12px;
    color: var(--biz-ink-3);
    text-align: right;
}

.nz-biz-reviews {
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r-lg);
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.nz-biz-photorev {
    padding: 16px;
    border-bottom: 1px solid var(--biz-line-2);
}

.photo-reviews-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.photo-reviews-scroll::-webkit-scrollbar {
    display: none;
}

.nz-biz-photorev-item {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    padding: 0;
    border: none;
    border-radius: var(--biz-r-sm);
    overflow: hidden;
    background: var(--biz-surface-2);
    cursor: zoom-in;
}

.nz-biz-photorev-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nz-biz-reviews-head {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--biz-ink-2);
}

.nz-biz-reviews .nzlm-comments-list {
    margin: 0;
}

.nz-biz-reviews .nzlm-comments-list .children {
    list-style: none;
    padding-left: 40px;
    margin: 0;
}

@media (max-width: 768px) {
    .nz-biz-reviews .nzlm-comments-list .children {
        padding-left: 20px;
    }
}

.nzlm-comments-pagination {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
}

.nz-biz-reviews-form {
    padding: 16px;
    background: var(--biz-surface-2);
    border-top: 1px solid var(--biz-line);
}

.nz-biz-login-nudge {
    padding: 22px 16px;
    background: var(--biz-surface);
    border: 1px dashed #d5dae0;
    border-radius: var(--biz-r);
    text-align: center;
}

.nz-biz-login-nudge p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--biz-ink-2);
}

.nz-biz-flabel {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--biz-ink-2);
}

.nz-biz-reviews-form .form-submit,
.nzlm-comment-form .form-submit {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}

.nz-biz-reviews-form .nzlm-comment-submit {
    width: 100%;
}

/* 별점 입력 — row-reverse 라 :checked ~ label 이 왼쪽(낮은 별)에 걸린다 */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 4px;
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    font-size: 28px;
    line-height: 1;
    color: #dfe3e8;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.star-rating-input label:hover {
    transform: scale(1.1);
}

.star-rating-input input:checked~label,
.star-rating-input label:hover,
.star-rating-input label:hover~label {
    color: #ffb703;
}

/* -------------------------------------------------------------------------
 * 사이드 카드
 * ------------------------------------------------------------------------- */
.nz-biz-sidecard {
    padding: 18px;
}

.nz-biz-side-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 800;
}

.nz-biz-side-facts {
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--biz-line-2);
    list-style: none;
}

.nz-biz-side-facts li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--biz-ink-2);
    word-break: keep-all;
}

.nz-biz-side-facts .nz-biz-i {
    color: var(--biz-ink-3);
    margin-top: 1px;
}

/* -------------------------------------------------------------------------
 * 사장님 바
 * ------------------------------------------------------------------------- */
.nz-biz-owner {
    margin: 0 0 24px;
    padding: 16px;
    background: var(--primary-bg, #fff4e6);
    border: 1px solid var(--primary-border, #ffe8cc);
    border-radius: var(--biz-r-lg);
}

.nz-biz-owner-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.nz-biz-owner-tag {
    padding: 4px 10px;
    background: var(--primary-color, #ff6f0f);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.nz-biz-owner-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nz-biz-owner-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--primary-border, #ffe8cc);
    border-radius: var(--biz-r-sm);
    color: var(--primary-dark, #e8590c);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease;
}

.nz-biz-owner-link:hover {
    background: #fff;
}

.nz-biz-owner-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--biz-surface);
    border-radius: var(--biz-r);
}

.nz-biz-owner-cta-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: var(--primary-bg, #fff4e6);
    border-radius: 50%;
    color: var(--primary-color, #ff6f0f);
}

.nz-biz-owner-cta-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nz-biz-owner-cta-copy strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--biz-ink);
    word-break: keep-all;
}

.nz-biz-owner-cta-copy span {
    font-size: 12.5px;
    color: var(--biz-ink-3);
    word-break: keep-all;
}

.nz-biz-owner-cta-copy b {
    color: var(--primary-dark, #e8590c);
}

.nz-biz-owner-cta .nz-biz-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 14px;
}

@media (max-width: 560px) {
    .nz-biz-owner-cta {
        flex-wrap: wrap;
    }

    .nz-biz-owner-cta .nz-biz-btn {
        flex: 1 0 100%;
    }
}

/* -------------------------------------------------------------------------
 * 추천 업소 / 고지
 * ------------------------------------------------------------------------- */
.nz-biz-related {
    margin: 8px 0 0;
    padding: 26px 16px 0;
    border-top: 1px solid var(--biz-line-2);
}

.nz-biz-related .business-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .nz-biz-related {
        padding: 30px 20px 0;
    }

    .nz-biz-related .business-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

.nz-biz-related .business-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--biz-surface);
    border: 1px solid var(--biz-line);
    border-radius: var(--biz-r);
    overflow: hidden;
    box-shadow: var(--biz-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.nz-biz-related .business-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--biz-shadow-lg);
}

.nz-biz-related .business-image-container {
    position: relative;
    height: 140px;
    background: var(--biz-surface-2);
}

.nz-biz-related .business-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nz-biz-related .business-category-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    background: rgba(0, 0, 0, .58);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.nz-biz-related .business-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px;
}

.nz-biz-related .business-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--biz-ink);
}

.nz-biz-related .business-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 12px;
}

.nz-biz-related .business-address,
.nz-biz-related .business-description {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--biz-ink-3);
}

.nz-biz-related .business-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.nz-biz-related .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
}

.nz-biz-related .btn-primary {
    background: var(--primary-color, #ff6f0f);
    color: #fff;
}

.nz-biz-related .btn-primary:hover {
    background: var(--primary-dark, #e8590c);
}

.nz-biz-related .btn-secondary:hover {
    background: var(--biz-surface-2);
}

.nz-biz-legal {
    margin: 34px 0 0;
    padding: 20px 16px;
    background: var(--biz-surface-2);
    border-top: 1px solid var(--biz-line);
    color: var(--biz-ink-3);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    word-break: keep-all;
}

.nz-biz-legal strong {
    display: block;
    margin-bottom: 4px;
    color: var(--biz-ink-2);
}

/* 하단 고정 CTA + 하단 내비에 가리지 않도록 */
.nz-biz-tail {
    height: 120px;
}

@media (min-width: 992px) {
    .nz-biz-tail {
        height: 40px;
    }
}

/* -------------------------------------------------------------------------
 * 모달 (기존 JS 가 display:flex 로 여닫는다)
 * ------------------------------------------------------------------------- */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .78);
}

.report-content {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 24px;
    background: #fff;
    border-radius: var(--biz-r-lg, 16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.nz-biz-modal-box {
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

.nz-biz-modal-box.is-narrow {
    max-width: 320px;
    text-align: center;
}

.nz-biz-modal-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: #212529;
}

.nz-biz-modal-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.6;
}

.nz-biz-modal-msg {
    margin: 12px 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.nz-biz-modal-box textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.nz-biz-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.nz-biz-modal-foot .nz-biz-btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14px;
}

.nz-biz-modal-box .nzlm-form-group {
    margin-bottom: 16px;
}

/* 리뷰 라이트박스 */
.lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 10001;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    color: #f1f1f1;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    color: #bbb;
}

.lightbox-slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.lightbox-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .3s ease-out;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    z-index: 10005;
    transform: translateY(-50%);
    padding: 16px;
    background: rgba(255, 255, 255, .18);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: background .18s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, .38);
}

.lightbox-prev {
    left: 16px;
}

.lightbox-next {
    right: 16px;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 10005;
    transform: translateX(-50%);
    padding: 5px 13px;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
}

/* PC 에서는 카메라 촬영 버튼을 숨긴다 (업로더 공통 규약) */
@media (min-width: 1024px) {
    .camera-only {
        display: none !important;
    }
}
