* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    color: #fff;
}

/* 카테고리 페이지(투어/마사지&네일/숙박&차량/퐁당추천) 전용: 스크롤 없이 한 화면(100vh)에
   네비+히어로+캐러셀+상세패널이 전부 들어가도록 세로 방향 flex 컨테이너로 만든다.
   dvh 를 같이 써서 모바일 브라우저 주소창 때문에 100vh 가 실제 화면보다 커지는 문제를 피한다.
   nav/ai-assistant/모달은 전부 position:fixed 라 이 flex 흐름에 안 잡힌다.

   1100px 이상(= .detail-panel 이 4열 한 줄 레이아웃일 때)에서만 적용한다 — 그 아래 폭에서는
   detail-panel 이 2열/1열로 훨씬 길게 쌓이는 태블릿/모바일 전용 레이아웃이라 한 화면에 억지로
   구겨넣으면 지도·연락처 같은 내용이 스크롤도 못 하고 통째로 잘려서 안 보이게 된다.
   그래서 그 구간은 예전처럼 자연스럽게 스크롤되도록 그대로 둔다. */
@media (min-width: 1101px) {
    .page--noscroll {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* 화면이 넉넉하면 가운데로 모으고, 낮은 화면이라 넘칠 땐 safe 가 위쪽 기준으로
           바꿔줘서 고정 네비 밑으로 파고들지 않게 한다(food-carousel 의 safe center 와 같은 원리). */
        justify-content: safe center;
    }
}

.page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 0;
    pointer-events: none;
}

.nav {
    --nav-fg: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(10px, 1.8vh, 16px) 40px;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav--scrolled {
    --nav-fg: #1a1d24;
    padding: clamp(7px, 1.2vh, 10px) 40px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav__logo-img {
    display: block;
    height: clamp(38px, 6vh, 60px);
    width: auto;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.75))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.5));
}

.nav__menu {
    /* 예전엔 항목 일부가 햄버거 드롭다운 안에 숨어 있었는데,
       이제 전체 카테고리를 네비 한 줄(넓으면)/두 줄(좁으면)에 다 펼쳐서 보여준다. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    column-gap: 22px;
    list-style: none;
    max-width: min(96vw, 1600px);
}

.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--nav-fg);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.82;
    transition: opacity 0.2s ease, color 0.3s ease;
    white-space: nowrap;
}

.nav__link:hover {
    opacity: 1;
}

.nav__link--active {
    opacity: 1;
}

.nav__link--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* 아이콘 굵기/모서리는 SVG 안에 각각 쓰지 말고 여기서 한 번에 정한다.
   (CSS 가 SVG 속성보다 우선하므로 드롭다운·우측 미니 아이콘까지 같이 통일된다) */
.nav__icon,
.nav__mini-icon,
.nav__burger svg {
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav__icon {
    width: 23px;
    height: 23px;
}

.nav:not(.nav--scrolled) .nav__link {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.nav__right-wrap {
    /* nav__right(로그인/회원가입/찜목록)의 크기·위치는 예전 그대로 유지하고,
       이트레블만 position:absolute 로 그 아래에 얹는다(레이아웃에 영향 안 줌). */
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.nav__right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav__etravel {
    /* 로그인~찜목록 줄 전체 너비의 가운데 아래로 오도록 left:50%+translateX(-50%) 사용.
       글씨/아이콘 크기는 네비 다른 항목(.nav__link/.nav__icon)과 동일하게 맞춘다. */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--nav-fg);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.82;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.nav__etravel:hover {
    opacity: 1;
}

.nav__etravel-icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav:not(.nav--scrolled) .nav__etravel {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.nav__mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--nav-fg);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.nav__mini:hover {
    opacity: 1;
}

.nav__mini-icon {
    width: 20px;
    height: 20px;
}

.nav__mini span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.nav:not(.nav--scrolled) .nav__mini {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.nav__menu-more {
    position: relative;
    display: flex;
    align-items: center;
}

.nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--nav-fg);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.nav__burger svg {
    width: 24px;
    height: 24px;
}

.nav__burger:hover {
    opacity: 1;
}

.nav:not(.nav--scrolled) .nav__burger {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

.nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.1);
    padding: 14px;
    display: none;
    z-index: 950;
}

.nav__dropdown.is-open {
    display: block;
}

.nav__dropdown-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 4px;
}

.nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #1a1d24;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.nav__dropdown-link .nav__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav__dropdown-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav__dropdown-link--active {
    color: #3884ff;
}

.hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 128px 20px 0;
}

/* 카드 캐러셀 + 상세 패널이 있는 페이지는 한 화면에 다 보이도록 높이를 줄인 버전.
   .page--noscroll 의 flex 자식으로서 남는 공간만 차지하고(flex:0 0 auto),
   세로 여백은 화면 높이에 따라 줄어들게 vh 를 섞어 낮은 노트북에서도 잘리지 않게 한다. */
.hero--compact {
    min-height: auto;
    flex: 0 0 auto;
    padding: clamp(64px, 9vh, 124px) 20px 0;
}

.hero--compact .hero__subtext {
    /* vw로 폭을 정하면 화면이 넓어질수록(높이는 그대로여도) 비율 때문에 이미지가
       세로로 커져 높이 예산을 넘긴다. 세로 공간이 핵심이라 vh로 직접 높이를 정한다. */
    width: auto;
    height: clamp(30px, 7vh, 88px);
    max-width: 80vw;
}

.hero--compact .search {
    margin-top: clamp(10px, 2.4vh, 60px);
}

.hero--compact .food-carousel-wrap {
    margin-top: clamp(10px, 2.8vh, 52px);
}

.hero__subtext {
    width: clamp(280px, 42vw, 620px);
    height: auto;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.35));
}

/* 테두리 포인트: 안쪽은 흰 배경(padding-box), 테두리 자리에만 그라데이션(border-box)을 깔았다.
   border 를 투명하게 두는 게 핵심 — 색을 주면 그라데이션이 가려진다. */
.search {
    margin-top: 32px;
    width: clamp(300px, 38vw, 540px);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(120deg, #3884ff, #22d3ee 45%, #a855f7) border-box;
    padding: 7px 7px 7px 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.search:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(56, 132, 255, 0.18);
}

.search__btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #3884ff, #2563eb);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.search__btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.search__icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: #9aa0a6;
    transition: color 0.28s ease;
}

.search:focus-within .search__icon {
    color: #3884ff;
}

.search__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.98rem;
    color: #333;
    background: transparent;
}

.search__input::placeholder {
    color: #9aa0a6;
}

.ai-assistant {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 64px;
    height: 64px;
    z-index: 1000;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s ease;
}

.ai-assistant img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-assistant:hover {
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .nav {
        padding: 14px 22px;
    }

    .nav--scrolled {
        padding: 9px 22px;
    }

    .nav__menu {
        row-gap: 10px;
        column-gap: 20px;
        max-width: 84vw;
    }

    .nav__link {
        font-size: 0.9rem;
        gap: 8px;
    }

    .nav__icon {
        width: 24px;
        height: 24px;
    }

    .nav__right {
        gap: 14px;
    }

    .nav__mini span {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav__menu {
        row-gap: 8px;
        column-gap: 18px;
        max-width: 88vw;
    }

    .nav__link {
        gap: 0;
    }

    .nav__link span {
        display: none;
    }

    .nav__link--active::after {
        bottom: -7px;
    }

    .hero {
        padding-top: 100px;
    }

    .hero__subtext {
        width: min(84vw, 460px);
    }

    .search {
        width: min(90vw, 460px);
        padding: 10px 18px;
    }

    .ai-assistant {
        width: 54px;
        height: 54px;
        right: 16px;
        bottom: 16px;
    }

    .nav__logo-img {
        height: 45px;
    }

    .nav__dropdown {
        width: min(90vw, 340px);
    }

    .nav__dropdown-list {
        grid-template-columns: 1fr;
    }
}

/* ===== 카드 캐러셀 (맛집/투어/마사지&네일 등 공통으로 재사용) ===== */
/* 폭을 카드 개수에 맞춰 줄어들게 두면(width:auto) .hero 의 align-items:center 로
   행 전체가 화면 한가운데 오고, 화살표도 카드 옆에 딱 붙는다.
   예전처럼 width 를 1300px 로 고정하면 남는 공간이 전부 오른쪽에 몰려 왼쪽으로 치우쳐 보인다. */
.food-carousel-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    /* 카드가 딱 6장만 보이게: 카드 152px×6 + 카드 사이 gap 10px×5 = 962px,
       거기에 .food-carousel 자체 좌우 패딩(2px×2=4px)과 좌우 화살표(40px×2),
       화살표-캐러셀 gap(14px×2)을 더한 값. 이보다 넓혀서 7번째 카드가 반쯤
       걸치는 걸 막는다(overflow-x로 스크롤/화살표는 그대로 동작). */
    max-width: min(96vw, 1076px);
    margin-top: clamp(26px, 5vh, 52px);
}

.carousel-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1d24;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.carousel-arrow:hover {
    transform: scale(1.06);
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* safe center: 카드가 넘칠 땐(모바일) 가운데 정렬을 포기하고 왼쪽부터 보여준다.
   그냥 center 를 주면 넘칠 때 왼쪽 카드가 잘려서 스크롤로도 못 닿는다. */
.food-carousel {
    flex: 0 1 auto;
    display: flex;
    justify-content: safe center;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px 8px;
}

.food-carousel::-webkit-scrollbar {
    height: 6px;
}

.food-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

.food-card {
    position: relative;
    flex: 0 0 152px;
    align-self: stretch;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    border: 3px solid transparent;
    transition: transform 0.2s ease;
    font-family: inherit;
}

.food-card:hover {
    transform: translateY(-3px);
}

/* 선택된 카드: 테두리를 따라 그라데이션이 계속 도는 효과.
   --pdc-ang 를 @property 로 '각도'라고 알려줘야 브라우저가 부드럽게 보간한다.
   (@property 미지원 브라우저에서는 회전만 안 되고 그라데이션 테두리는 그대로 보인다) */
@property --pdc-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.food-card--active {
    border-color: transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--pdc-ang),
            #3884ff, #22d3ee, #a855f7, #ec4899, #f97316, #3884ff) border-box;
    animation: pdcBorderLoop 3.2s linear infinite;
    box-shadow: 0 14px 34px rgba(56, 132, 255, 0.34);
}

@keyframes pdcBorderLoop {
    to { --pdc-ang: 360deg; }
}

/* 참고: 예전엔 여기에 prefers-reduced-motion 가드가 있었는데,
   Windows 의 "애니메이션 효과"가 꺼져 있으면 이 루프가 통째로 멈춰버려서 뺐다.
   (사이트의 핵심 연출이라 항상 보이는 쪽을 택함) */

.food-card__img {
    display: block;
    width: 100%;
    height: clamp(110px, 20vh, 186px);
    object-fit: cover;
}

.food-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    z-index: 1;
}

.badge--recommend { background: #2563eb; }
.badge--hot { background: #f97316; }
.badge--new { background: #10b981; }
.badge--luxury { background: #7c3aed; }
.badge--none { display: none; }

.food-card__body {
    padding: 7px 10px 9px;
}

.food-card__name {
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1d24;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 지역명이 길면(예: 세부시티) 줄바꿈되면서 그 카드만 키가 커진다 — 한 줄로 고정 */
.food-card__meta {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.food-card__star {
    color: #f5b301;
}

.food-card__score {
    color: #1a1d24;
    font-weight: 800;
}

.food-card__area {
    margin-left: 4px;
}

.food-card__tags {
    font-size: 0.7rem;
    color: #3884ff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 상세 정보 패널 (모든 카테고리 페이지 공통) ===== */
.detail-panel {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: min(94vw, 1110px);
    margin: clamp(8px, 1.2vh, 40px) auto clamp(8px, 1.2vh, 28px);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    padding: clamp(8px, 1.1vh, 20px) clamp(14px, 1.8vw, 22px);
    display: grid;
    grid-template-columns: 1.15fr 150px 1fr 1.2fr;
    gap: clamp(8px, 1.3vh, 22px);
    align-items: center;
    color: #1a1d24;
}

/* 선택된 카드가 몇 번째인지 알려주는 세로 점. 패널 바깥 오른쪽에 두므로
   폭이 좁아지면 겹치기 전에 숨긴다. */
.detail-dots {
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: height 0.2s ease, background 0.2s ease;
}

.detail-dots button.is-active {
    height: 22px;
    background: #3884ff;
}

@media (max-width: 1320px) {
    .detail-dots { display: none; }
}

.detail-panel__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.detail-panel__name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    /* 업체명 길이가 다 달라서 2줄로 넘어가면 패널 높이가 들쭉날쭉해진다 — 항상 1줄로 고정 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.detail-panel__badge {
    /* flex-shrink:0 이 없으면 업체명이 길 때 배지가 좁아지면서 글자가 2줄로 접혀
       title-row(그리고 패널 전체) 높이가 늘어난다 — 배지는 항상 1줄 원래 크기를 유지 */
    flex-shrink: 0;
    white-space: nowrap;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
}

.detail-panel__rating {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
}

.detail-panel__star {
    color: #f5b301;
}

.detail-panel__score {
    color: #1a1d24;
    font-weight: 800;
}

.detail-panel__dot {
    margin: 0 6px;
}

.detail-panel__desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 12px;
    /* 업체마다 설명 길이가 달라서(1~3줄) 패널 높이가 들쭉날쭉했다 — 항상 3줄 자리를
       확보해두고(min-height), 혹시 더 긴 설명이 들어와도 3줄에서 잘리게(line-clamp) 고정한다. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.55em * 3);
}

.detail-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* 태그 줄도 높이를 고정한다. 태그 4개가 한 줄에 다 안 들어가는 경우가 많아서(대부분 2줄)
       1줄로 고정하면 태그가 잘려서 안 보인다 — 2줄(60px) 기준으로 고정해 태그가 전부 보이게 한다. */
    height: 60px;
    overflow: hidden;
}

.detail-panel__tags span {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
}

.detail-panel__thumb {
    width: 100%;
    height: clamp(76px, 10vh, 132px);
    object-fit: cover;
    border-radius: 14px;
}

.detail-panel__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-panel__row {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.detail-panel__icon {
    flex-shrink: 0;
    color: #94a3b8;
    line-height: 1.3;
}

.detail-panel__row-text {
    /* 주소는 길이가 제각각이라(1~2줄) 이 줄만큼 패널 높이가 달라졌다 — 영업시간·전화도
       포함해서 세 줄 다 똑같이 2줄 자리를 고정해두면 어느 업체든 연락처 영역 높이가 같아진다. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}

.detail-panel__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.detail-panel__btn {
    flex: 0 1 auto;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.detail-panel__btn:hover {
    transform: translateY(-1px);
}

.detail-panel__btn--primary {
    background: linear-gradient(135deg, #3884ff, #2563eb);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}

.detail-panel__btn--primary:hover {
    filter: brightness(1.06);
}

.detail-panel__btn--outline {
    background: #ffffff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.detail-panel__btn--outline:hover {
    border-color: #3884ff;
    color: #3884ff;
}

.detail-panel__btn--wishlist.is-active {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.detail-panel__btn--wishlist.is-active:hover {
    border-color: #dc2626;
    color: #dc2626;
}

/* 지도 자리. 좌표가 없는 항목은 .is-empty 로 안내 문구만 보여준다. */
.detail-panel__map {
    width: 100%;
    height: clamp(84px, 13vh, 186px);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: #eef2f7;
}

.detail-panel__map.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
}

/* Leaflet 기본 글꼴/모서리를 사이트에 맞춤 */
.detail-panel__map .leaflet-container {
    font-family: inherit;
    background: #eef2f7;
}

.detail-panel__map .leaflet-control-attribution {
    font-size: 9px;
    background: rgba(255, 255, 255, 0.72);
}

/* 핀 + 이름표를 마커 하나에 담는다.
   주의: Leaflet 은 divIcon 에 className 을 직접 주면 기본 클래스(leaflet-div-icon)를
   붙이지 않는다. 그래서 .leaflet-div-icon 을 끼워 선택하면 매칭이 안 된다.
   (실제로 그렇게 썼다가 display:flex 가 안 먹어 핀이 6px 조각으로 찌그러졌음) */
.pdc-marker-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    white-space: nowrap;
}

.pdc-pin {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3884ff;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* 핀에서 퍼져나가는 물결 */
.pdc-pin::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(56, 132, 255, 0.7);
    animation: pdcPing 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes pdcPing {
    0%   { transform: scale(0.55); opacity: 0.95; }
    75%  { transform: scale(1.75); opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

.pdc-pin-label {
    background: #ffffff;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1a1d24;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .detail-panel {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info thumb"
            "contact map";
    }

    .detail-panel__info { grid-area: info; }
    .detail-panel__thumb { grid-area: thumb; height: 130px; }
    .detail-panel__contact { grid-area: contact; }
    .detail-panel__map { grid-area: map; }
}

@media (max-width: 700px) {
    .detail-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "thumb"
            "info"
            "contact"
            "map";
        margin-top: -24px;
        padding: 18px;
    }

    .food-card {
        flex-basis: 170px;
    }

    .food-card__img {
        height: 100px;
    }
}

/* ===== 로그인 상태 표시 (닉네임 / 로그아웃) ===== */
.nav__mini--user {
    cursor: default;
}

.nav__mini--user span {
    font-weight: 800;
}

/* ===== 로그인 / 회원가입 카드 ===== */
.auth-hero {
    align-items: center;
    justify-content: center;
    padding-top: 96px;
}

.auth-card {
    position: relative;
    z-index: 2;
    width: min(92vw, 420px);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    padding: 36px 32px;
    color: #1a1d24;
    text-align: left;
}

.auth-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
}

.auth-card__error {
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.auth-card__switch {
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    color: #64748b;
}

.auth-card__switch a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form__label {
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
    margin-top: 10px;
}

.auth-form__input {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease;
    color: #1a1d24;
    background: #ffffff;
}

.auth-form__input:focus {
    border-color: #3884ff;
}

/* 여행후기에서 업체 회원이 쓴 글임을 알려주는 배지 (홍보성 글을 구분할 수 있게) */
.author-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 800;
    vertical-align: middle;
}

/* ===== 업체 회원 전용 화면 (business/) ===== */
.biz-status {
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.biz-status__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.biz-status__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #475569;
}

.biz-status--pending  { background: #fffbeb; border-color: #fde68a; }
.biz-status--pending  .biz-status__badge { background: #f59e0b; color: #ffffff; }
.biz-status--approved { background: #f0fdf4; border-color: #bbf7d0; }
.biz-status--approved .biz-status__badge { background: #16a34a; color: #ffffff; }
.biz-status--rejected { background: #fef2f2; border-color: #fecaca; }
.biz-status--rejected .biz-status__badge { background: #dc2626; color: #ffffff; }

.biz-status__sub {
    font-size: 0.8rem;
    color: #64748b;
}

.biz-status__desc {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.6;
}

.biz-summary__name {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.biz-summary__cat {
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 18px;
}

.biz-summary__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.biz-summary__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 0.9rem;
}

.biz-summary__row dt {
    color: #94a3b8;
    font-weight: 700;
}

.biz-summary__row dd {
    color: #334155;
    line-height: 1.6;
}

.biz-summary__empty {
    color: #cbd5e1;
}

.biz-summary__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.biz-saved {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.biz-hint {
    margin-top: 18px;
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* ===== 회원가입: 개인/업체 유형 선택 ===== */
.signup-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}

.signup-type__option {
    cursor: pointer;
}

/* 라디오 동그라미는 숨기고 박스 전체를 누르게 한다.
   display:none 대신 이렇게 해야 키보드 탭 이동이 살아있다. */
.signup-type__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.signup-type__box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.signup-type__option input:checked + .signup-type__box {
    border-color: #2563eb;
    background: #eff6ff;
}

.signup-type__option input:focus-visible + .signup-type__box {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.signup-type__name {
    font-weight: 800;
    font-size: 0.92rem;
    color: #1a1d24;
}

.signup-type__desc {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.45;
}

.signup-biz {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

/* [hidden] 속성은 브라우저 기본 스타일이 display:none 을 주는데, 클래스 선택자(.signup-biz)의
   display:flex 가 특이도(specificity)에서 이겨버려 숨겨지지 않는다 — 명시적으로 덮어써야 한다. */
.signup-biz[hidden] {
    display: none;
}

.signup-biz__notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 0.8rem;
    color: #92400e;
    line-height: 1.6;
    margin-bottom: 14px;
}

.auth-form__optional {
    color: #94a3b8;
    font-weight: 500;
}

@media (max-width: 480px) {
    .signup-type {
        grid-template-columns: 1fr;
    }
}

.auth-form__submit {
    margin-top: 20px;
    padding: 13px;
    border-radius: 999px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    font-family: inherit;
}

/* ===== 여행후기 게시판 ===== */
.hero--board {
    padding-bottom: 60px;
}

.board {
    position: relative;
    z-index: 2;
    width: min(94vw, 900px);
    margin: 56px auto 0;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    padding: 32px 36px 40px;
    color: #1a1d24;
    text-align: left;
}

.board--narrow {
    width: min(94vw, 760px);
}

.board--wide {
    width: min(94vw, 1100px);
}

.board__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.board__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.board__tab {
    padding: 8px 18px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.board__tab:hover {
    background: #e2e8f0;
}

.board__tab--active {
    background: #2563eb;
    color: #ffffff;
}

.board__write-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #1a1d24;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.board__write-btn:hover {
    transform: translateY(-1px);
}

.board__write-btn svg {
    width: 16px;
    height: 16px;
}

.board__empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.8;
}

.board__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.board__item {
    border-bottom: 1px solid #f1f5f9;
}

.board__item:last-child {
    border-bottom: none;
}

.board__item-link {
    display: block;
    padding: 18px 4px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.board__item-link:hover {
    background: #f8fafc;
}

.board__item-cat {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.board__item-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1d24;
    margin-bottom: 6px;
}

.board__item-excerpt {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.board__item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 600;
}

.board__item-dot {
    color: #cbd5e1;
}

.board__item-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.board__item-stat svg {
    width: 14px;
    height: 14px;
}

.board__page-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.board__back {
    display: inline-block;
    margin-bottom: 16px;
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.board__back:hover {
    color: #2563eb;
}

/* ===== 업체 카드 그리드 (검색 결과 / 찜목록 공용) ===== */
.search__result-count {
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 18px;
}

.listing-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.listing-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}

.listing-card:hover {
    transform: translateY(-3px);
}

.listing-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.listing-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #94a3b8;
    padding: 10px;
    text-align: center;
}

.listing-card__img-label {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.listing-card__body {
    display: block;
    padding: 12px 14px 14px;
}

.listing-card__cat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.listing-card__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1a1d24;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card__meta {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.listing-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

.listing-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: color 0.15s ease, transform 0.15s ease;
}

.listing-card__wish:hover {
    transform: scale(1.08);
}

.listing-card__wish.is-active {
    color: #dc2626;
}

/* ===== 여행후기 상세 글 ===== */
.post__title {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 6px 0 10px;
}

.post__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.86rem;
    color: #94a3b8;
    font-weight: 600;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 20px;
}

.post__content {
    font-size: 1rem;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 8px;
}

/* ===== 댓글 ===== */
.comments {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e2e8f0;
}

.comments__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.comments__empty {
    color: #94a3b8;
    font-size: 0.92rem;
    padding: 16px 0;
}

.comments__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.comments__item {
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px 16px;
}

.comments__item-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.comments__item-author {
    font-weight: 800;
    font-size: 0.88rem;
    color: #1a1d24;
}

.comments__item-date {
    font-size: 0.78rem;
    color: #94a3b8;
}

.comments__item-body {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.6;
}

.comment-form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.comment-form__textarea {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
}

.comment-form__textarea:focus {
    border-color: #3884ff;
}

.comment-form__submit {
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: 999px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.comments__login-prompt {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
    font-size: 0.9rem;
    color: #64748b;
}

.comments__login-prompt a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

/* ===== 여행후기 글쓰기 폼 ===== */
.write-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.write-form__textarea {
    resize: vertical;
    min-height: 200px;
    line-height: 1.6;
}

.write-form__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.write-form__actions .detail-panel__btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.write-form__submit {
    border: none;
}

@media (max-width: 700px) {
    .board {
        padding: 22px 18px 28px;
        margin-top: 32px;
    }

    .board--narrow {
        width: min(94vw, 760px);
    }

    .board__toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .comment-form {
        flex-direction: column;
    }

    .comment-form__submit {
        align-self: flex-end;
    }

    .auth-card {
        padding: 28px 22px;
    }
}

/* ===== 업체 상세보기 슬라이드 모달 ===== */
.detail-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.detail-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.detail-modal {
    position: relative;
    width: min(96vw, 720px);
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-modal-overlay.is-open .detail-modal {
    transform: translateY(0);
}

.detail-modal__handle {
    width: 44px;
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    margin: 12px auto 6px;
}

.detail-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #1a1d24;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.detail-modal__close svg {
    width: 18px;
    height: 18px;
}

.detail-modal__body {
    padding: 4px 28px 36px;
    color: #1a1d24;
    text-align: left;
}

.modal-detail__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.modal-section {
    margin-top: 28px;
}

.modal-section__title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.modal-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-product {
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px 16px;
}

.modal-product__name {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1a1d24;
    margin-bottom: 4px;
}

.modal-product__desc {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.5;
}

.modal-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.modal-photos__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

.modal-reviews {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-review {
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px 16px;
}

.modal-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.modal-review__author {
    font-weight: 800;
    font-size: 0.88rem;
    color: #1a1d24;
}

.modal-review__stars {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.modal-review__star {
    color: #e2e8f0;
}

.modal-review__star.is-filled {
    color: #f59e0b;
}

.modal-review__text {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .detail-modal__body {
        padding: 4px 18px 28px;
    }

    .modal-photos {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===== 2026-09-21 추가: 업체 회원 사진 업로드 ===== */
.biz-photo-preview {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin: 8px 0;
}

.biz-photo-remove {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: #b91c1c;
    margin-bottom: 10px;
}

/* ===== 2026-09-21 수정: 상세 팝업(모달)에서는 '카드 아래 패널 높이 통일' 규칙을 해제 =====
   .detail-panel__tags/__desc/__name 은 카드 아래 패널과 상세 팝업이 같은 클래스를 같이 쓴다.
   패널 높이를 통일하려고 걸어둔 고정 높이(태그 60px)·줄수 제한(설명 3줄)·한 줄 고정(업체명)이
   팝업에까지 적용되어, 태그 칩이 세로로 60px 늘어나 깨져 보이고 긴 설명·업체명이 잘렸다.
   팝업은 내용 길이에 맞게 자연스럽게 늘어나는 게 맞으므로 여기서 되돌린다. */
.detail-modal .detail-panel__tags {
    height: auto;
    overflow: visible;
}

.detail-modal .detail-panel__desc {
    -webkit-line-clamp: unset;
    min-height: 0;
    overflow: visible;
}

.detail-modal .detail-panel__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}