/* ========================================
   구제맵 스타일 - onzgram 디자인 시스템
   ======================================== */

:root {
    /* Colors — onzgram tokens */
    --primary: #17191a;        /* gray900 - text/헤더 */
    --primary-light: #2f3133;  /* gray800 */
    --accent: #2c79ff;         /* blue700 - primary CTA */
    --accent-light: #5ebcff;   /* blue300 */
    --accent-hover: #3067ec;   /* blue800 */
    --green: #25a36a;          /* secondary1 */
    --orange: #fa7226;         /* secondary2 */
    --bg: #f2f4f6;             /* gray50 */
    --card: #ffffff;
    --border: #e5eaee;         /* gray100 */
    --border-strong: #cad3d8;  /* gray200 */
    --text: #17191a;           /* gray900 */
    --text-secondary: #464a4d; /* gray700 */
    --text-tertiary: #757b80;  /* gray500 */
    --kakao: #FEE500;
    --naver: #03C75A;
    --danger: #e1322e;         /* red600 */
    --success: #1b8a4a;        /* green700 */
    --warning: #ffbf00;        /* yellow500 */

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows — onzgram soft diffusion */
    --shadow-sm: 0 0 8px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 0 16px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 20px 4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 32px 8px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition: all 0.2s ease;
}

/* ========================================
   Reset & Base
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #ffffff;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

/* ========================================
   Layout
   ======================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.main-content {
    min-height: calc(100vh - 60px - 54px); /* header + tab bar(54px) */
    min-height: calc(100dvh - 60px - 54px);
    /* 모바일 하단 GNB 여백은 body(아래 @media)가 전담 — 여기 중복 padding 두면
       body 여백과 합쳐져 콘텐츠 아래 과잉 공백(≈164px) 생김 */
}
@media (min-width: 640px) {
    .main-content { padding-bottom: 96px; }   /* 플로팅 GNB가 웹에도 노출 → 하단 여백 확보 */
}

/* ========================================
   Header
   ======================================== */

.header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

/* 모바일: 로고를 중앙 → 왼쪽 상단 정렬 (nav는 space-between으로 오른쪽) */
@media (max-width: 639px) {
    .logo {
        position: static;
        left: auto;
        transform: none;
    }
}

.logo-icon {
    display: flex;
    align-items: center;
}
.logo-icon svg { display: block; }

.logo-text {
    display: inline-flex;
    align-items: center;
    color: var(--text);   /* 검정 글씨 */
    font-weight: 700;
    line-height: 1;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;   /* 로고 absolute → nav 우측 끝 고정 */
    z-index: 1;
}

.header-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg);
}

.header-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.813rem;
    font-weight: 700;
}

.header-nickname {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.user-greeting {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

/* ========================================
   Tab Bar
   ======================================== */

/* 플로팅 타원형 GNB — 하단 중앙에 떠다니는 pill */
.tab-bar {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    height: 58px;
    padding: 0 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    z-index: 100;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    color: var(--text-secondary);
    font-size: 0.68rem;
    transition: var(--transition);
    padding: 0.4rem 1.15rem;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
}

.tab-item svg {
    width: 20px;
    height: 20px;
}

.tab-item.active {
    color: var(--accent);
    font-weight: 600;
    background: var(--bg);
}

.tab-item:hover {
    color: var(--accent);
}

.tab-register .register-icon {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
    box-shadow: var(--shadow-lg);
    color: white;
}

.tab-register.active .register-icon {
    background: var(--primary);
}

@media (min-width: 640px) {
    .tab-bar {
        height: 62px;    /* 웹에서도 플로팅 GNB 노출 (약간 크게) */
    }
    .tab-item { padding: 0.45rem 1.5rem; }
}

/* ========================================
   Map Page
   ======================================== */

.map-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;   /* iOS Safari 주소창 대응 — 실제 보이는 뷰포트 높이 */
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 100%;
}

/* 내 주변 매장 수 히어로 — 지도 상단 중앙 pill */
.nearby-hero {
    position: absolute;
    top: 6.2rem;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 15;
    background: rgba(23, 25, 26, 0.86);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.nearby-hero b { color: var(--accent-light, #5ebcff); font-weight: 700; }
.nearby-hero.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 639px) {
    .nearby-hero { top: calc(6.2rem + env(safe-area-inset-top, 0px)); }
}

.filter-bar {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.875rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .filter-bar {
        left: 1rem;
        right: auto;
        width: 360px;
    }
}

.filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-box {
    flex: 1;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 16px;   /* iOS: 16px 미만 입력창 포커스 시 자동 확대됨 → 16px로 방지 */
    background: white;
}

.search-box .btn-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* 검색 자동완성 드롭다운 */
.search-suggest {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.suggest-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest-item:hover { background: var(--bg); }
.suggest-ico { flex-shrink: 0; }
.suggest-area b { color: var(--accent); }
.suggest-addr { color: var(--text-tertiary); font-size: 0.78rem; margin-left: auto; padding-left: 0.5rem; }

.category-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: white;
    font-size: 0.813rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--accent);
}

.chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ===== 칩 셀렉트 (등록폼: 카테고리 라디오 / 스타일 체크박스) ===== */
.chip-select {
    position: relative;   /* 내부 숨김 input(absolute) 기준 — 조상으로 튀어 레이아웃 깨짐 방지 */
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-width: 100%;
}
.chip-select.scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}
.chip-select.scroll::-webkit-scrollbar { height: 0; }
/* 숨김 input — sr-only(레이아웃 미점유). label이 실제 칩. */
.chip-select input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
.chip-select label {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    user-select: none;
}
.chip-select label:hover { border-color: var(--accent); }
.chip-select input:checked + label {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.chip-select input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 리뷰/가격 미확인 안내 (배치 적재 매장) */
.shop-rating-empty { font-size: 0.85rem; color: var(--text-tertiary, #999); margin: 0.2rem 0; }
.modal-rating-empty { color: var(--text-tertiary, #999); font-size: 0.85rem; }

/* 매장 스타일 태그 칩 */
.shop-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.shop-tag-chip {
    font-size: 0.82rem;
    color: var(--accent, #2c79ff);
    background: rgba(44, 121, 255, 0.1);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
}
.shop-tag-chip:hover { background: rgba(44, 121, 255, 0.2); }

/* 매장 인스타 링크 */
.shop-insta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #c13584;
    text-decoration: none;
}
.shop-insta-link svg { width: 18px; height: 18px; }
.shop-insta-link:hover { text-decoration: underline; }

/* 매장 찜 버튼 (상세 헤더) */
.shop-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.shop-name-row .shop-name { flex: 1; min-width: 0; }
.shop-name-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
/* 가봤어요 원탭 체크인 */
.checkin-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.85rem 0 0.25rem;
}
.checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    border: 1.5px solid var(--accent);
    background: #fff;
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.checkin-btn:hover { background: #eef4ff; }
.checkin-btn:active { transform: scale(0.96); }
.checkin-btn.checked {
    background: var(--accent);
    color: #fff;
}
.checkin-btn:disabled { opacity: 0.6; cursor: default; }
.checkin-count { font-size: 0.875rem; color: var(--text-secondary); }
.checkin-count b { color: var(--text); }
.checkin-count.zero { display: none; }

/* 간편 별점 (경량 리뷰) */
.quick-rate {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.quick-rate-label { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.quick-stars { display: inline-flex; gap: 0.15rem; }
.quick-star {
    background: none; border: none; padding: 0 0.1rem; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: #d0d5da; transition: color 0.1s ease, transform 0.1s ease;
}
.quick-star:hover { transform: scale(1.15); }
.quick-star.hl { color: #ffb400; }
.quick-rate-login {
    display: inline-block; margin-bottom: 1rem; font-size: 0.9rem;
    color: var(--accent); font-weight: 600; text-decoration: none;
}

.shop-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.shop-like-btn svg { width: 18px; height: 18px; }
.shop-like-btn:hover { border-color: #e0245e; color: #e0245e; }
.shop-like-btn.liked {
    background: #fdecf2;
    border-color: #e0245e;
    color: #e0245e;
}
.shop-like-btn.liked svg { fill: #e0245e; }

/* 상세 태그 칩 */
.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0.2rem;
}
.item-tag-chip {
    font-size: 0.8rem;
    color: var(--accent, #D4A574);
    background: rgba(212, 165, 116, 0.1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
}
.item-tag-chip:hover { background: rgba(212, 165, 116, 0.2); }

/* 개인 게시 컴포즈: 카테고리·스타일 칩 블록 */
.compose-meta {
    padding: 0.9rem 1rem 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.compose-meta .meta-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}
.compose-meta .meta-label .opt {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-tertiary, #999);
    margin-left: 0.2rem;
}

.price-filter {
    flex: 1;
}

.price-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.813rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.price-slider-container {
    display: flex;
    gap: 0.5rem;
}

.price-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--border);
    outline: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.price-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* Shop List Sheet */
.shop-list-sheet {
    position: absolute;
    bottom: 82px; /* above tab bar + gap */
    left: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.25rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    z-index: 20;
    max-height: 38vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: max-height 0.25s ease;
}

@media (min-width: 640px) {
    .shop-list-sheet {
        bottom: 1rem;
        left: 1rem;
        right: auto;
        width: 360px;
        max-height: 45vh;
    }
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-full);
    margin: 0.75rem auto;
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.sheet-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.sheet-title span {
    color: var(--accent);
}

.sheet-content {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
}

.shop-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.shop-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.shop-card-link {
    display: flex;
    gap: 1rem;
}

.shop-card-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.shop-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-image-placeholder-sm {
    width: 100%;
    height: 100%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.shop-card-content {
    flex: 1;
    min-width: 0;
}

.shop-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-card-address {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-card-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.shop-card-price {
    font-size: 0.813rem;
    color: var(--accent);
    font-weight: 500;
}

.shop-card-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

/* ========================================
   Shop Detail Page
   ======================================== */

.shop-detail-page {
    padding-top: 1rem;
}

.shop-header {
    background: var(--card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.shop-image-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

/* 가게 사진 캐러셀 — carousel-track/nav/dots(공용)를 250px 배너 컨테이너에 얹음 */
.shop-carousel {
    position: relative;
    background: #000;
}
.shop-carousel .carousel-slide img.shop-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 5rem;
    opacity: 0.5;
}

.shop-info {
    padding: 1.5rem;
}

.shop-category {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
/* 상세 헤더 뱃지 — 많이 다녀간 곳/리뷰 많은 곳 */
.shop-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.shop-badge.visit { color: #e2503a; background: #ffece8; }
.shop-badge.review { color: #1f9d55; background: #e7f7ee; }

.shop-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.shop-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.stars {
    display: flex;
    gap: 0.125rem;
}

.star {
    font-size: 1.25rem;
}

.star-filled {
    color: var(--accent);
}

.star-empty {
    color: var(--border);
}

.rating-text {
    font-size: 1rem;
    font-weight: 600;
}

.shop-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-weight: 600;
}

.shop-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header .section-title {
    margin: 0;
}

.detail-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.detail-content {
    flex: 1;
}

.detail-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.detail-value {
    font-size: 0.938rem;
    line-height: 1.6;
    overflow-wrap: anywhere;   /* 긴 무공백 주소/URL이 가로 스크롤 유발하지 않게 */
}

.link {
    color: var(--accent);
    text-decoration: underline;
}

.mini-map-wrap {
    position: relative;
}

.mini-map {
    width: 100%;
    height: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}

/* '위치' 제목 + 구제맵 확인 버튼: 제목 바로 오른쪽에 살짝 띄워, 세로 중앙 정렬 */
.loc-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.loc-title-row .section-title {
    margin: 0;          /* 제목 기본 하단마진 제거 → 버튼과 세로 중앙 일치 */
    line-height: 1.2;
}
.loc-title-row .map-check-btn {
    line-height: 1.2;
}

.map-open-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    background: var(--accent, #D4A574);
    color: #fff;
    border: none;
    border-radius: var(--radius-full, 999px);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.map-open-btn:hover { filter: brightness(0.95); }

/* 위치 헤더 옆 '구제맵에서 확인하기' 버튼 */
.map-check-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.4rem 0.75rem;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-full, 999px);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.map-check-btn:hover { filter: brightness(0.95); }

/* Reviews */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.review-user {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.user-name {
    font-weight: 600;
    font-size: 0.938rem;
}

.user-level {
    display: inline-flex;
    align-items: center;
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
}

.review-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.review-rating {
    display: flex;
    gap: 0.125rem;
}

.star-sm {
    font-size: 1rem;
}

.review-content {
    line-height: 1.7;
    margin: 0 0 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;   /* 긴 무공백 텍스트/URL 가로 스크롤 방지 */
}

.review-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.review-image img {
    width: 100%;
    height: auto;
    display: block;
}

.review-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-owner-actions {
    display: flex;
    gap: 0.75rem;
}

/* ========================================
   Forms
   ======================================== */

.page-header {
    text-align: center;
    padding: 2rem 0;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.shop-form,
.review-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-section {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.938rem;
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.form-textarea {
    resize: vertical;
}

.form-help {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.input-with-button {
    display: flex;
    gap: 0.5rem;
}

.input-with-button .form-input {
    flex: 1;
}

.price-input-group {
    position: relative;
}

.input-suffix {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.price-input-group .form-input {
    padding-right: 3rem;
}

/* Image Upload */
.image-upload-area {
    position: relative;
}

.image-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
}

.image-upload-label:hover {
    border-color: var(--accent);
    background: var(--bg);
}

.image-preview {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.btn-remove-image {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-remove-image:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 매장 사진 여러 장 미리보기 그리드 */
.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.image-preview-grid .preview-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}
.btn-text-remove {
    margin-top: 0.6rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.form-label .opt {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-left: 0.35rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 2rem 0;
}

/* Alpine x-cloak — 초기 렌더 깜빡임 방지 */
[x-cloak] { display: none !important; }

/* 마이페이지 닉네임 수정 */
.profile-name-row { display: flex; align-items: center; gap: 0.5rem; }
.nickname-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--border); border-radius: 8px;
    background: #fff; color: var(--text-tertiary); cursor: pointer;
}
.nickname-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.nickname-edit-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.nickname-input {
    padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong);
    border-radius: 8px; font-size: 0.95rem; max-width: 180px;
}
.nickname-input:focus { outline: none; border-color: var(--accent); }

/* 매장 상세 공유 버튼 (좋아요 옆) */
.shop-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    flex: none;
    transition: border-color .15s, color .15s;
}
.shop-share-btn svg { width: 18px; height: 18px; }
.shop-share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 매장 관리·주인 인증 안내 박스 */
.shop-manage-guide {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
    border: 1px solid #dbe7ff;
    border-radius: 12px;
}
.shop-manage-guide .guide-icon { flex: none; margin-top: 2px; color: var(--accent); }
.shop-manage-guide .guide-text { font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }
.shop-manage-guide .guide-text p { margin: 0 0 0.4rem; }
.shop-manage-guide .guide-text p:last-child { margin-bottom: 0; }
.shop-manage-guide .guide-text b { color: var(--text); font-weight: 700; }
.shop-manage-guide .guide-mail a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.2rem; padding: 0.35rem 0.7rem;
    background: #fff; border: 1px solid var(--accent);
    border-radius: 999px; color: var(--accent);
    font-weight: 700; text-decoration: none; font-size: 0.85rem;
}
.shop-manage-guide .guide-mail a:hover { background: var(--accent); color: #fff; }

/* 매장 정보 헤더 + 주인 수정/삭제 아이콘 */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.shop-owner-icons { display: inline-flex; align-items: center; gap: 0.4rem; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: #fff; color: var(--text-secondary); cursor: pointer;
    text-decoration: none;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn-danger:hover { border-color: #b91c1c; color: #b91c1c; background: #fef2f2; }

/* 매장 관리/신고 액션 바 */
.shop-manage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0;
    margin-bottom: 0.5rem;
}
.manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.manage-btn:hover { border-color: var(--accent); color: var(--accent); }
.manage-btn-danger { color: #b91c1c; border-color: #fecaca; }
.manage-btn-danger:hover { border-color: #b91c1c; color: #b91c1c; background: #fef2f2; }
.manage-claim-status {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    padding: 0.4rem 0.2rem;
}

/* 미니 모달 (신고/주인인증) */
.mini-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.mini-modal[hidden] { display: none; }
.mini-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mini-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mini-modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0; }
.mini-modal-desc { font-size: 0.85rem; color: var(--text-tertiary); margin: 0; line-height: 1.5; }
.mini-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.25rem; }
.mini-modal-actions .btn-primary, .mini-modal-actions .btn-secondary { padding: 0.55rem 1.1rem; }

/* 등록폼 하단 경고 문구 (허위정보 삭제 안내) */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #9a3412;
    font-size: 0.82rem;
    line-height: 1.5;
}
.form-notice svg {
    flex: none;
    margin-top: 1px;
}

/* ========================================
   MyPage
   ======================================== */

.mypage {
    padding-top: 1rem;
}

.profile-section {
    margin-bottom: 2rem;
}

.profile-card {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 1rem;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* 프로필 수정 — 사진 미리보기 */
.profile-edit-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.profile-edit-preview {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-edit-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-edit-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.profile-info {
    flex: 1;
    color: white;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.profile-level {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.level-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.level-title {
    font-size: 0.938rem;
}

.exp-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.exp-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.exp-label {
    font-weight: 600;
}

.exp-value {
    font-weight: 600;
    color: var(--accent);
}

.exp-bar {
    height: 12px;
    background: var(--bg);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.exp-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    transition: width 0.3s ease;
}

.exp-description {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-item {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.content-section {
    margin-bottom: 2rem;
}

.shop-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-more-btn {
    display: block;
    width: 100%;
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.shop-more-btn:hover { background: var(--bg); }
.shop-more-btn:disabled { opacity: 0.55; cursor: default; }

.review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-shop-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.review-shop-name {
    font-weight: 600;
    color: var(--primary);
}

.review-shop-name:hover {
    color: var(--accent);
}

.review-likes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.review-edit-actions {
    display: flex;
    gap: 0.75rem;
}

.settings-list {
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item:hover {
    background: var(--bg);
}

/* ========================================
   Buttons
   ======================================== */

.btn-primary,
.btn-secondary,
.btn-primary-outline {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    display: inline-block;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-primary-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.btn-primary-outline:hover {
    background: var(--accent);
    color: white;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.btn-block {
    width: 100%;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-icon:hover {
    border-color: var(--accent);
    background: var(--bg);
}

.btn-icon-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    border-radius: var(--radius-md);
}

.btn-icon-text:hover {
    color: var(--accent);
    background: var(--bg);
}

.btn-icon-text.active {
    color: var(--danger);
}

.btn-text,
.btn-text-sm {
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-text:hover {
    color: var(--primary);
}

.btn-text-sm {
    font-size: 0.875rem;
}

.btn-primary-sm {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary-sm:hover {
    background: var(--primary);
}

.text-danger {
    color: var(--danger);
}

/* ========================================
   Badges
   ======================================== */

.badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.813rem;
    font-weight: 500;
}

.badge-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.badge-category {
    background: var(--accent);
    color: white;
}

/* ========================================
   Utilities
   ======================================== */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;   /* grid(item-gallery) 안에서도 전체 폭 차지 → 중앙 정렬 */
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state p {
    margin: 0 0 1rem;
}

.text-secondary {
    color: var(--text-secondary);
}

/* ========================================
   Toast Notifications
   ======================================== */

.toast-container {
    position: fixed;
    top: 80px;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--accent);
    min-width: 250px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    border-left-color: var(--success);
}

.toast-error {
    border-left-color: var(--danger);
}

.toast-warning {
    border-left-color: var(--warning);
}

/* ========================================
   Responsive
   ======================================== */

@media (min-width: 640px) {
    .container {
        padding: 0 2rem;
    }

    .shop-card-link {
        gap: 1.5rem;
    }

    .shop-card-image {
        width: 120px;
        height: 120px;
    }

    .stats-grid {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .shop-list-sheet {
        max-height: 50vh;
    }
}

/* ========================================
   Compact overlay + My location + Modal
   ======================================== */

/* Minimal search overlay — map dominant */
.filter-bar {
    top: calc(0.6rem + env(safe-area-inset-top, 0px));   /* 노치/상태바 아래로 */
    padding: 0.6rem 0.7rem;
    gap: 0.45rem;
    width: auto;
    max-width: calc(100% - 1.5rem);
}

@media (min-width: 640px) {
    .filter-bar {
        width: 320px;
    }
}

/* Hide price slider row — keep it minimal */
.filter-row-price {
    display: none;
}

/* Category chips: single-line horizontal scroll, small */
.category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.category-chips::-webkit-scrollbar {
    display: none;
}

.filter-bar .chip {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
}

.search-input {
    padding: 0.6rem 2.75rem 0.6rem 0.9rem;
}

.search-box .btn-icon {
    right: 0.9rem;
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
}

/* Account button (top-right) */
.map-account {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    z-index: 15;
}

.account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}

.account-btn:hover {
    transform: scale(1.06);
}

/* 매장 등록 FAB (+ 원형, 내 위치 위) — 주요 액션 */
.register-fab {
    position: absolute;
    right: 1rem;
    bottom: 5rem;      /* 데스크탑: 현위치 버튼 바로 위(붙임) */
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(44, 121, 255, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.register-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(44, 121, 255, 0.55);
}

.register-fab:active {
    transform: scale(0.95);
}

/* 모바일: 우상단 계정/피드 버튼 숨김 (하단 GNB가 대체) */
@media (max-width: 639px) {
    .map-account {
        display: none;
    }
    /* 두 FAB를 GNB(54px) 바로 위에 세로로 붙여 고정.
       ⚠️ .map-page 접두어로 specificity를 올려야 함 — 기본 .location-fab 정의가
       이 미디어쿼리보다 CSS 뒤에 있어, 접두어 없으면 cascade에서 기본값
       (position:absolute; bottom:1.5rem)이 이겨 모바일 규칙이 무효화되고
       현위치 버튼이 GNB 뒤로 잘렸음.
       position:fixed — iOS 100vh로 map-page 하단이 화면 밖으로 밀리는 것 대비.
       z-index 110 — GNB(z100) 위로 올려 겹쳐도 안 잘리게. */
    .map-page .location-fab, .map-page .register-fab {
        position: fixed;
        z-index: 110;
    }
    .map-page .location-fab {
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 0.75rem);
    }
    .map-page .register-fab {
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 0.75rem + 3.4rem);
    }
}

/* Current location floating button (bottom-right) */
.location-fab {
    position: absolute;
    right: 1rem;
    bottom: 1.5rem;        /* 데스크탑: 하단 (모바일은 아래 미디어쿼리서 GNB 위) */
    z-index: 30;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--accent, #D4A574);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.location-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.location-fab:active {
    transform: scale(0.96);
}


/* My location marker — cute face pin */
.my-location {
    position: relative;
    width: 38px;
    height: 46px;
}

.my-location-pin {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 3px solid var(--accent, #D4A574);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: myloc-bounce 1.6s ease-in-out infinite;
    transform-origin: center bottom;
}

.my-location-face {
    transform: rotate(45deg);
    font-size: 18px;
    line-height: 1;
}

.my-location-pulse {
    position: absolute;
    left: 9px;
    bottom: 0;
    width: 20px;
    height: 8px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    animation: myloc-shadow 1.6s ease-in-out infinite;
}

@keyframes myloc-bounce {
    0%, 100% { transform: rotate(-45deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(-6px); }
}

@keyframes myloc-shadow {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(0.7); opacity: 0.2; }
}

/* Shop detail modal */
.shop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.shop-modal.open {
    display: block;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.modal-panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    /* 하단 GNB(54px)+iOS safe-area 만큼 여백 확보 → 버튼이 GNB에 가리지 않음 */
    padding: 1.25rem 1.25rem calc(1.25rem + 54px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
    overflow-y: auto;
    animation: modal-up 0.25s ease;
}

@media (min-width: 640px) {
    .modal-panel {
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 1.25rem;
        padding: 1.25rem;   /* 데스크탑은 GNB 없음 → 여백 원복 */
        animation: none;
    }
}

@keyframes modal-up {
    from { transform: translate(-50%, 100%); }
    to { transform: translate(-50%, 0); }
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    color: #333;
}

.modal-shop-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 0.9rem;
    margin-bottom: 0.9rem;
    display: block;
}

.modal-shop-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card, #f5f0e8);
    font-size: 3rem;
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.modal-badge {
    background: var(--accent, #D4A574);
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full, 999px);
    font-size: 0.75rem;
    font-weight: 500;
}

.modal-price {
    color: var(--accent, #D4A574);
    font-weight: 700;
    font-size: 0.9rem;
}

.modal-title {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.modal-rating {
    color: var(--accent, #D4A574);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

.modal-rating span {
    color: #666;
    font-size: 0.85rem;
}

.modal-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.modal-row {
    display: flex;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: #444;
    line-height: 1.4;
}

.modal-row-icon {
    flex-shrink: 0;
}

.modal-row a {
    color: var(--accent, #D4A574);
    text-decoration: none;
}

.modal-detail-btn {
    display: block;
    text-align: center;
    background: var(--accent, #D4A574);
    color: #fff;
    padding: 0.75rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ========================================
   아이템(옷) 레이어
   ======================================== */

/* 지도 계정/피드 버튼 세로 스택 */
.map-account { display: flex; flex-direction: column; gap: 0.5rem; }

/* 페이지 헤더 (등록/피드/상세) */
.page-head { padding: 1.5rem 0 1rem; }
.page-title { font-size: 1.5rem; font-weight: 730; margin: 0 0 0.3rem; letter-spacing: -0.02em; }
.page-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

/* 아이템 갤러리 (매장상세·마이페이지) */
.item-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 피드처럼 가로 3칸 고정 */
    gap: 0.5rem;
}
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}
.item-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.item-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-2px); }
.item-thumb { position: relative; aspect-ratio: 1/1; background: var(--bg); overflow: hidden; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--bg); }
.item-info { padding: 0.6rem 0.7rem; }
.item-cat { font-size: 0.68rem; color: var(--accent); font-weight: 600; }
.item-name { margin: 0.15rem 0; font-size: 0.85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-price { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.item-shop-mini { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-badge-status {
    position: absolute; top: 0.5rem; left: 0.5rem;
    background: rgba(0,0,0,0.7); color: #fff;
    font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 5px;
}
.item-badge-status.lg { font-size: 0.85rem; padding: 0.3rem 0.7rem; top: 1rem; left: 1rem; }

/* 피드 필터 */
.feed-filter { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.3rem; -ms-overflow-style: none; scrollbar-width: none; }
.feed-filter::-webkit-scrollbar { display: none; }

/* 아이템 상세 */
.item-detail-image { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; margin-top: 1rem; }
.item-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.item-detail-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.item-detail-body { padding: 1.25rem 0; }
.item-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.item-detail-name { font-size: 1.3rem; font-weight: 730; margin: 0 0 0.3rem; }
.item-detail-price { font-size: 1.4rem; font-weight: 780; color: var(--accent); margin: 0 0 1rem; }
.item-detail-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary); }
.item-detail-meta b { color: var(--text-tertiary); font-weight: 500; margin-right: 0.3rem; }
.item-detail-desc { font-size: 0.92rem; line-height: 1.6; color: var(--text); margin-bottom: 1.25rem; white-space: pre-line; }
.item-shop-link { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg); border-radius: var(--radius-lg); }
.item-shop-name { margin: 0 0 0.2rem; font-weight: 600; }
.item-shop-addr { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }
.item-shop-go { color: var(--accent); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

/* 찜 버튼 */
.like-btn {
    display: flex; align-items: center; gap: 0.3rem;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: 0.4rem 0.8rem; cursor: pointer; color: var(--text-tertiary); font-weight: 600; font-size: 0.85rem;
    transition: var(--transition);
}
.like-btn .heart { font-size: 1rem; }
.like-btn.liked { color: var(--danger); border-color: var(--danger); background: #fdeaea; }

/* 이미지 업로드 */
.image-upload { display: block; cursor: pointer; }
.image-upload-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    aspect-ratio: 4/3; background: var(--bg); border: 2px dashed var(--border); border-radius: var(--radius-lg);
    color: var(--text-tertiary); font-size: 0.9rem;
}
.image-upload-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.upload-icon { font-size: 2rem; }

/* 폼 */
.item-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.form-label .req { color: var(--danger); }
.form-input {
    width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: 16px; font-family: inherit; background: var(--card); color: var(--text);
    /* 16px — iOS Safari는 폰트 <16px 입력창 포커스 시 자동 확대(줌)해 레이아웃이 틀어짐 */
}
.form-input:focus { outline: none; border-color: var(--accent); }

/* select — 브라우저 기본(회색/disabled 느낌) 제거하고 form-input과 동일하게 밝게 + 커스텀 화살표 */
select.form-input, .form-select {
    width: 100%;
    padding: 0.7rem 2.2rem 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: inherit;
    color: var(--text);
    background-color: var(--card);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232c79ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
select.form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); }
select.form-input:disabled, .form-select:disabled { background-color: var(--bg); color: var(--text-tertiary); cursor: default; }

.form-row { display: flex; gap: 0.75rem; }
.form-row .form-group { flex: 1; }
/* 등록폼 가격 입력(가격+원) — 위쪽 .input-suffix(position:absolute) 정의를 덮어야
   가격칸이 사진 영역 위로 튀어 겹치지 않음 */
.input-suffix { display: flex; align-items: center; gap: 0.4rem; position: static; transform: none; pointer-events: auto; }
.input-suffix .form-input { flex: 1; }
.input-suffix span { color: var(--text-tertiary); font-size: 0.9rem; }

/* 기본 버튼 (온즈그램 CTA) */
.basic-button {
    width: 100%; padding: 0.85rem; border: none; border-radius: var(--radius-lg);
    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.95rem; font-family: inherit;
    cursor: pointer; transition: var(--transition);
}
.basic-button:hover { background: var(--accent-hover); }

/* ========================================
   쿠팡 파트너스 광고
   ======================================== */

/* 아이템 상세 하단 배너 */
.coupang-ad {
    margin-top: 1.25rem;
    text-align: center;
}
.coupang-ad a { display: inline-block; max-width: 100%; }
.coupang-ad img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.ad-notice {
    margin: 0.5rem 0 0;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* 맵 하단 배너 (중앙 하단, 컨트롤과 분리) */
.map-ad {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    z-index: 20;
    max-width: calc(100% - 6rem);   /* 우하단 FAB 영역 피함 */
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    box-shadow: var(--shadow-md);
}
.map-ad a { display: block; line-height: 0; }
.map-ad img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.map-ad-notice {
    display: block;
    font-size: 0.62rem;
    color: var(--text-tertiary);
    padding: 0.15rem 0 0.05rem;
}

/* 광고 반응형: 데스크탑 728x90 / 모바일 320x100 */
.map-ad .ad-mobile, .coupang-ad .ad-mobile { display: none; }
.map-ad .ad-desktop, .coupang-ad .ad-desktop { display: inline-block; }

@media (max-width: 639px) {
    .map-ad .ad-desktop, .coupang-ad .ad-desktop { display: none; }
    .map-ad .ad-mobile, .coupang-ad .ad-mobile { display: inline-block; }

    .map-ad {
        left: 0.5rem;              /* 좌측 정렬 — 우하단 FAB(현위치·등록)와 겹치지 않게 */
        right: auto;
        transform: none;           /* 중앙정렬(translateX) 해제 */
        bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 0.5rem);  /* GNB(54px+홈바) 위 */
        max-width: calc(100% - 5rem);  /* 우측 FAB 영역 확보 */
    }
}

/* ========================================
   인스타형 피드
   ======================================== */
.feed-list {
    max-width: 480px;
    margin: 1.25rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.feed-post {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.feed-post-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
}
.feed-post-shop { font-weight: 600; font-size: 0.9rem; color: var(--text); }
/* 시간: 사진/캡션 하단, 작게 */
.feed-post-time { display: block; padding: 0 0.9rem 0.9rem; font-size: 0.74rem; color: var(--text-tertiary); }
.feed-post-media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--bg);
}
.feed-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-post-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.feed-post-foot {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem 0.9rem;
}
.feed-like {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    font-weight: 600;
    font-size: 0.9rem;
    flex: none;
}
.feed-like .heart { font-size: 1.35rem; line-height: 1; }
.feed-like.liked { color: var(--danger); }
.feed-post-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.feed-post-cat {
    font-size: 0.68rem;
    color: var(--accent);
    font-weight: 700;
    flex: none;
}
.feed-post-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.feed-post-price { font-weight: 700; font-size: 0.92rem; color: var(--text); flex: none; }

/* 헤더 마이페이지 버튼 (로그인 버튼 대체) */
.header-my {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text);
    transition: var(--transition);
}
.header-my:hover { background: var(--bg); color: var(--accent); }

/* 피드 게시 FAB */
.post-fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 0.75rem);   /* GNB(54px+홈바) 위 */
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(44, 121, 255, 0.45);
    transition: transform 0.15s ease;
}
.post-fab:hover { transform: scale(1.06); }
.post-fab:active { transform: scale(0.95); }
@media (min-width: 640px) {
    .post-fab { bottom: 1.5rem; }   /* 데스크탑은 GNB 없음 */
}

/* 해시태그 링크 (아이템 설명 내 #매장명) */
.hashtag { color: var(--accent); font-weight: 600; }
.hashtag:hover { text-decoration: underline; }

/* ===== 온즈그램형 게시글 상세 ===== */
.post-detail { padding-bottom: 2rem; }

/* 사진 캐러셀 */
.carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 1rem;
}
.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
    touch-action: pan-y;
}
.carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--bg); }
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: #222;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: opacity 0.15s ease;
}
.carousel-nav.prev { left: 0.6rem; }
.carousel-nav.next { right: 0.6rem; }
.carousel-nav.hidden { opacity: 0; pointer-events: none; }
.carousel-dots {
    position: absolute;
    bottom: 0.7rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: var(--transition); cursor: pointer; }
.carousel-dot.active { background: #fff; width: 7px; height: 7px; }
@media (hover: none) { .carousel-nav { display: none; } }

/* 게시글 본문 */
.post-body { padding: 1rem 0 0; }

/* 액션바 (좋아요·댓글·공유 이모지) */
.post-actions { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.act-btn {
    background: none; border: none; cursor: pointer; padding: 0.25rem;
    line-height: 1; transition: transform 0.12s ease;
}
.act-btn:active { transform: scale(0.85); }
.act-emoji { font-size: 1.6rem; }
.act-btn.liked .act-emoji { animation: pop 0.25s ease; }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.post-likecount { font-size: 0.92rem; margin: 0 0 0.9rem; }
.post-likecount b { font-weight: 700; }

/* 댓글 */
.comments { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.comments-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.9rem; }
.comment-list { display: flex; flex-direction: column; gap: 0.9rem; }
.comment { display: flex; gap: 0.6rem; }
.comment.reply { margin-top: 0.8rem; }
.c-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar.ph { background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9rem; }
.c-body { flex: 1; min-width: 0; }
.c-head { margin: 0; font-size: 0.82rem; color: var(--text-tertiary); }
.c-nick { color: var(--text); font-weight: 700; font-size: 0.88rem; margin-right: 0.4rem; }
.c-text { margin: 0.15rem 0 0.3rem; font-size: 0.92rem; line-height: 1.5; color: var(--text); word-break: break-word; white-space: pre-line; }
.c-actions { display: flex; gap: 0.9rem; }
.c-reply, .c-del { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-tertiary); }
.c-reply:hover, .c-del:hover { color: var(--accent); }
.c-replies { margin-top: 0.6rem; }
.comment-empty { font-size: 0.88rem; color: var(--text-tertiary); padding: 0.5rem 0; }

/* 댓글 입력바 (하단 고정) */
.comment-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;   /* 상세는 GNB 숨김 → 입력바를 화면 맨 아래 고정 (홈바 safe-area만 확보) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 95;
    background: var(--card);
    border-top: 1px solid var(--border);
}
.comment-bar-inner { max-width: 560px; margin: 0 auto; padding: 0.6rem 1rem; }
.reply-hint { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.reply-hint b { color: var(--accent); }
.reply-hint button { background: none; border: none; color: var(--text-tertiary); font-size: 0.76rem; cursor: pointer; margin-left: 0.4rem; text-decoration: underline; }
.comment-bar-row { display: flex; align-items: center; gap: 0.5rem; }
.comment-input {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: 0.55rem 0.9rem; font-size: 0.9rem; font-family: inherit; outline: none; background: var(--bg);
}
.comment-input:focus { border-color: var(--accent); }
.comment-send { background: none; border: none; color: var(--accent); font-weight: 700; font-size: 0.9rem; cursor: pointer; flex: none; padding: 0.3rem; }
.comment-send:disabled { opacity: 0.5; }
/* 상세 하단 여백: 댓글 입력바(약 63px) + 여유. GNB 여백은 body가 담당 */
.post-detail { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

/* ===== 전역: 하단 GNB(54px)에 콘텐츠 안 가리게 (모바일) ===== */
@media (max-width: 639px) {
    body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 32px); }
    /* shop-detail-page 계열(가게상세·게시글상세·등록)은 GNB를 숨김 → GNB 예약 여백 불필요.
       하단 고정바 여백은 각 페이지 내부요소(post-detail 댓글바 / item-form 게시바)가 담당.
       하단바 없는 가게상세는 2rem만. (이전엔 body86+컨테이너118 중첩으로 빈 스크롤 과다) */
    body:has(.shop-detail-page) { padding-bottom: 0; }
    .shop-detail-page { padding-bottom: 2rem; }
}
.post-author { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.post-author-info { display: flex; align-items: center; gap: 0.6rem; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-avatar.ph { background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem; }
.post-nick { margin: 0; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 0.375rem; }
.post-time { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--text-tertiary); }
.post-listing { margin-bottom: 0.9rem; }
.post-listing .item-detail-name { margin: 0.4rem 0 0.2rem; }
.post-listing .item-detail-price { margin: 0 0 0.7rem; }
.post-text { font-size: 0.98rem; line-height: 1.65; color: var(--text); white-space: pre-line; margin-bottom: 1.25rem; word-break: break-word; }

/* like-btn (상세 작성자 줄) */
.like-btn {
    display: flex; align-items: center; gap: 0.3rem;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-full);
    padding: 0.35rem 0.7rem; cursor: pointer; color: var(--text-tertiary); font-weight: 600; font-size: 0.9rem;
    transition: var(--transition);
}
.like-btn .heart { font-size: 1.1rem; line-height: 1; }
.like-btn.liked { color: var(--danger); border-color: var(--danger); }

/* ===== 피드 캡션 (카드 하단) ===== */
.feed-post-caption { padding: 0 0.9rem 0.3rem; }
.cap-title { display: inline-block; color: var(--text); font-size: 0.92rem; }
.cap-title b { font-weight: 700; }
.cap-price { color: var(--accent); font-weight: 700; margin-left: 0.3rem; }
.cap-text {
    margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--text); word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cap-muted { font-size: 0.85rem; color: var(--text-tertiary); }

/* ===== 게시글 등록: 사진 썸네일 그리드 ===== */
.post-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.post-thumb, .post-thumb-add { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-thumb-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
    border: 2px dashed var(--border-strong); background: var(--bg); color: var(--text-tertiary);
    font-size: 0.78rem; cursor: pointer; transition: var(--transition);
}
.post-thumb-add:hover { border-color: var(--accent); color: var(--accent); }
.post-thumb-add .upload-icon { font-size: 1.5rem; }
.post-hint { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--text-tertiary); }

/* 등록 화면 하단 고정 게시 바 (GNB 숨김 + 항상 보이는 게시 버튼) */
.post-submit-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
}
.post-submit-bar .basic-button { display: block; max-width: 560px; margin: 0 auto; }
/* 게시 바에 폼 마지막이 안 가리게 여백 */
.item-form { padding-bottom: 84px; }
/* 등록폼은 GNB를 숨김 → GNB 예약 여백(body/shop-detail-page) 제거. 게시바 여백(item-form 84px)만 남겨
   설명 아래 과도한 빈 스크롤 제거 */
body:has(.item-form) { padding-bottom: 0; }
.shop-detail-page:has(.item-form) { padding-bottom: 0; }

/* ===== 온즈그램형 통합 컴포즈 (개인 게시) ===== */
.post-compose {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;   /* 자동완성 드롭다운 안 잘리게 */
    margin-top: 0.5rem;
}
/* 대표 사진 영역 (정사각) */
.compose-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg);
    cursor: pointer;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}
.compose-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.compose-media-empty {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    color: var(--text-tertiary);
}
.compose-media-empty .upload-icon { font-size: 2.6rem; }
.compose-media-empty span:nth-child(2) { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); }
.compose-media-hint { font-size: 0.78rem; }
/* 썸네일 스트립 (가로 스크롤) */
.compose-thumbs {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    -ms-overflow-style: none; scrollbar-width: none;
}
.compose-thumbs::-webkit-scrollbar { display: none; }
.compose-thumbs .post-thumb { flex: 0 0 56px; width: 56px; height: 56px; aspect-ratio: unset; }
.compose-thumbs .post-thumb-add {
    flex: 0 0 56px; width: 56px; height: 56px; aspect-ratio: unset; gap: 0.1rem; font-size: 0.65rem;
}
.compose-thumbs .post-thumb-add .upload-icon { font-size: 1.1rem; }
/* 캡션 (contenteditable, 경계선만, 라벨 없음) */
.compose-caption-wrap { position: relative; }
.compose-caption {
    width: 100%;
    min-height: 120px;
    border-top: 1px solid var(--border);
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
    background: transparent;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.compose-caption:empty:before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}
/* 입력 중 완성된 #매장명 (파랑 하이퍼링크처럼) */
.hashtag-live { color: var(--accent); font-weight: 600; }

/* 매장명 자동완성 드롭다운 */
.tag-suggest {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: calc(100% - 0.3rem);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
}
.tag-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
}
.tag-suggest-item:hover, .tag-suggest-item:active { background: var(--bg); color: var(--accent); }
.ts-pin { font-size: 0.85rem; }

/* ===== 라인 아이콘(이모지 대체, 담백 톤) ===== */
.act-ico { width: 26px; height: 26px; display: block; }
.post-actions .act-btn { color: var(--text); }
.act-btn.liked .ico-heart { fill: var(--danger); stroke: var(--danger); }
.like-ico { width: 22px; height: 22px; display: block; color: var(--text-tertiary); }
.feed-like.liked .like-ico { fill: var(--danger); stroke: var(--danger); color: var(--danger); }
.feed-like.liked { color: var(--danger); }
.ph-ico { width: 56px; height: 56px; color: var(--border-strong); }
.carousel-placeholder .ph-ico { width: 64px; height: 64px; }
.feed-post-empty .ph-ico { width: 56px; height: 56px; }
.mini-ico { width: 0.95em; height: 0.95em; vertical-align: -2px; color: var(--text-tertiary); }
.ts-ico { display: inline-flex; width: 16px; height: 16px; color: var(--text-tertiary); flex: none; }
.ts-ico svg { width: 100%; height: 100%; }
.upload-ico { width: 2.4rem; height: 2.4rem; color: var(--text-tertiary); }
.post-thumb-add .upload-ico { width: 1.5rem; height: 1.5rem; }
/* mypage / shop 아이콘 */
.avatar-icon svg { width: 32px; height: 32px; color: var(--text-secondary); }
.stat-icon svg { width: 24px; height: 24px; color: var(--text-secondary); }
.empty-icon svg { width: 40px; height: 40px; color: var(--border-strong); }
.placeholder-icon svg { width: 56px; height: 56px; color: var(--border-strong); }
.item-thumb-placeholder svg { width: 2.4rem; height: 2.4rem; color: var(--text-tertiary); }
.shop-image-placeholder-sm svg { width: 2rem; height: 2rem; color: var(--text-tertiary); }
.user-avatar svg { width: 20px; height: 20px; color: var(--text-secondary); }

/* ===== 인스타그램형 피드 카드 ===== */
.feed-list { max-width: 470px; }
.feed-post-media { aspect-ratio: 1 / 1; }
.feed-author { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; }
.feed-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fa-ph { width: 100%; height: 100%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem; }
.feed-author-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.feed-author-nick { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.feed-author-loc { display: flex; align-items: center; gap: 2px; font-size: 0.72rem; color: var(--text-secondary); }
.feed-author-loc svg { width: 0.85em; height: 0.85em; }
.feed-actions { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.75rem 0.25rem; }
.feed-actions .feed-like, .feed-actions .feed-act, .feed-actions .feed-share { background: none; border: none; padding: 0; cursor: pointer; color: var(--text); display: flex; }
.feed-actions svg { width: 24px; height: 24px; }
.feed-actions .feed-like.liked .like-ico { fill: var(--danger); stroke: var(--danger); }
.feed-likes { padding: 0 0.75rem; margin: 0.1rem 0 0.35rem; font-size: 0.87rem; color: var(--text); }
.feed-likes b { font-weight: 700; }
.feed-caption { padding: 0 0.75rem; font-size: 0.87rem; line-height: 1.5; color: var(--text); word-break: break-word; }
.feed-caption .cap-nick { font-weight: 600; margin-right: 0.3rem; }
.feed-caption .cap-price { color: var(--accent); font-weight: 600; }
.feed-comments-link { display: block; padding: 0.35rem 0.75rem 0; font-size: 0.82rem; color: var(--text-tertiary); }
.feed-post .feed-post-time { padding: 0.3rem 0.75rem 0.8rem; font-size: 0.7rem; }

/* ===== 사진 확대 라이트박스 ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-close {
    position: absolute;
    top: calc(0.8rem + env(safe-area-inset-top, 0px));
    right: 0.9rem;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ===== 지역 랜딩 페이지 (SEO) ===== */
.area-hero { padding: 1.5rem 0 1rem; text-align: center; }
.area-title { font-size: 1.6rem; font-weight: 730; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.area-sub { color: var(--text-secondary); font-size: 0.95rem; margin: 0 0 0.8rem; }
.area-sub b { color: var(--accent); font-size: 1.1rem; }
.area-map-link { display: inline-block; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; text-decoration: none; }

.area-shop-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.area-shop-card { display: flex; gap: 0.9rem; padding: 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: var(--transition); }
.area-shop-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.area-shop-thumb { flex: 0 0 88px; width: 88px; height: 88px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.area-shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.area-shop-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.area-shop-thumb-ph svg { width: 32px; height: 32px; }
.area-shop-body { flex: 1; min-width: 0; }
.area-shop-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.25rem; }
.area-shop-oneliner { font-size: 0.875rem; color: var(--text); margin: 0 0 0.35rem; }
.area-shop-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.area-tag { font-size: 0.75rem; color: var(--accent); background: rgba(44,121,255,0.1); padding: 0.1rem 0.5rem; border-radius: var(--radius-full); }
.area-shop-addr { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.area-shop-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: var(--text-tertiary); }
.area-shop-insta { color: #c13584; font-weight: 600; }

.area-others { margin: 2rem 0 3rem; }
.area-others-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.6rem; }
.area-others-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area-others-links a { padding: 0.4rem 0.8rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.82rem; text-decoration: none; color: var(--text-secondary); }
.area-others-links a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.area-others-links a:hover { border-color: var(--accent); }

/* ===== KREAM형 피드 ===== */
.kream-topbar {
    position: sticky;
    top: 60px;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 1rem;
}
.kream-cats {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.kream-cats::-webkit-scrollbar { display: none; }
.kream-cat {
    flex: none;
    padding: 0.38rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    color: var(--text-secondary);
}
.kream-cat.active {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
    font-weight: 700;
}
.kream-cat:hover:not(.active) {
    border-color: var(--text-secondary);
    color: var(--text);
}
.kream-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--border);
    min-height: 200px;
}
.kream-card {
    display: block;
    background: #fff;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.kream-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--bg);
    overflow: hidden;
}
.kream-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.kream-card:hover .kream-thumb img { transform: scale(1.04); }
.kream-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-strong);
}
.kream-thumb-empty svg { width: 36px; height: 36px; }
.kream-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.kream-status.sold { background: rgba(0,0,0,0.48); color: #fff; }
.kream-status.reserved { background: rgba(44,121,255,0.52); color: #fff; }
.kream-info { padding: 0.55rem 0.65rem 0.8rem; }
.kream-shop {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kream-name {
    margin: 0 0 0.28rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.kream-price {
    margin: 0 0 0.22rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
}
.kream-card.is-sold .kream-price {
    color: var(--text-tertiary);
    text-decoration: line-through;
    font-weight: 500;
}
.kream-likes {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--text-tertiary);
}
.kream-likes svg { width: 11px; height: 11px; }
.kream-loadmore {
    padding: 0.7rem 2.5rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.kream-loadmore:hover { border-color: var(--text); color: var(--text); }

/* 홈 상단바 (검색 + 카테고리) */
/* 홈 콘텐츠 중앙 정렬 — 넓은 화면에서 리스트가 양옆으로 늘어지지 않게 */
.home-wrap {
    max-width: 680px;
    margin: 0 auto;
}

.home-topbar {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px 0;
}
.home-topbar--search-only { padding-bottom: 12px; }
.home-search-wrap { position: relative; }
.home-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #d0d0d0;
    border-radius: 12px;
    padding: 0 14px;
    height: 46px;
    transition: border-color 0.15s;
}
.home-search-box:focus-within {
    border-color: #999;
}
.home-search-ico { width: 17px; height: 17px; color: #666; flex-shrink: 0; }
.home-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    color: var(--text);
    outline: none;
    font-family: inherit;
}
.home-search-input::placeholder { color: #aaa; }
.home-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    color: #999;
}
.home-search-clear svg { width: 16px; height: 16px; }
.home-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    list-style: none;
    padding: 4px 0;
    z-index: 200;
}
.home-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.88rem;
}
.home-suggest-item:hover { background: #f6f6f6; }
.home-suggest-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-suggest-addr { color: #aaa; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* 지역 탐색 섹션 */
.area-section { padding: 20px 0 4px; background: #ffffff; }
.area-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 12px;
}
.area-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.area-section-more {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    text-decoration: none;
}
.area-section-more:hover { color: var(--text); }

.area-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.area-scroll::-webkit-scrollbar { display: none; }

.area-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    text-decoration: none;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.area-card:hover {
    border-color: var(--area-color, #888);
    background: color-mix(in srgb, var(--area-color, #888) 6%, white);
}
.area-card-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.area-card-tag {
    font-size: 0.71rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* 피드(내 주변 구제샵) 섹션 헤더 */
.feed-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 10px;
    border-top: 1px solid var(--border);
}
.feed-section-title-row { display: flex; align-items: center; gap: 8px; }
.feed-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.feed-section-more {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    text-decoration: none;
    flex-shrink: 0;
}
.feed-section-more:hover { color: var(--text); }

/* 위치 배지 */
.loc-badge {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: #f0f0f0;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

/* 위치 허용 배너 */
.loc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    background: #f7f9ff;
    border-bottom: 1px solid #e0e8ff;
    margin-bottom: 2px;
}
.loc-banner-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #444;
    flex: 1;
}
.loc-banner-btn {
    background: #2c79ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.loc-banner-btn:hover { background: #1a65e0; }

/* 매장 카드 그라디언트 썸네일 (이미지 없을 때) */
.kream-thumb-grad {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kream-thumb-initial {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
    letter-spacing: -1px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* 매장 카드 추가 요소 */
.sc-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.sc-cat {
    font-size: 0.7rem;
    color: #2c79ff;
    background: #edf3ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.sc-dist {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}
.sc-score {
    font-size: 0.72rem;
    color: #e6a817;
    font-weight: 600;
    margin-left: auto;
}
.sc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 3px 0 2px;
}
.sc-tag {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    background: #f5f5f5;
    padding: 1px 6px;
    border-radius: 4px;
}

/* 매장 리스트 (홈화면) */
.shop-list { list-style: none; margin: 0; padding: 0; }

.sl-item { border-bottom: 1px solid var(--border); }
.sl-item:last-child { border-bottom: none; }

.sl-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.sl-link:hover, .sl-link:active { background: #f8f8f8; }

.sl-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
}
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sl-thumb-grad {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.5px;
}

.sl-info { flex: 1; min-width: 0; }

.sl-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sl-addr {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    margin: 0 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sl-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.sl-cat {
    font-size: 0.68rem;
    color: #2c79ff;
    background: #edf3ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.sl-score {
    font-size: 0.7rem;
    color: #e6a817;
    font-weight: 600;
}
.sl-tag {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 4px;
}
/* 카드 뱃지 — 많이 다녀감/리뷰 많아요 */
.sl-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.sl-badge.visit { color: #e2503a; background: #ffece8; }
.sl-badge.review { color: #1f9d55; background: #e7f7ee; }
.sl-arrow {
    width: 16px;
    height: 16px;
    color: #ccc;
    flex-shrink: 0;
}

/* 마이페이지 개인 문의 푸터 */
.mypage-contact { text-align: center; padding: 1.5rem 1rem 2.5rem; margin-top: 1rem; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 0.82rem; }
.mypage-contact .contact-title { font-weight: 600; color: var(--text-secondary); margin: 0 0 0.45rem; }
.mypage-contact .contact-line { margin: 0.18rem 0; }
.mypage-contact a { color: var(--accent); text-decoration: none; }
.mypage-contact a:hover { text-decoration: underline; }

/* ── 전역 푸터 (지역 내부링크 SEO + 서비스 안내) ── */
.site-footer {
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 2rem 1.25rem 5.5rem;   /* 하단 여백: 모바일 GNB(tab-bar) 가림 방지 */
    color: var(--text-tertiary);
    font-size: 0.85rem;
}
/* 지도(메인) 풀스크린 페이지에선 시각적으로 숨김 — 링크는 DOM에 남아 크롤러가 발견 */
body:has(.map-page) .site-footer { display: none; }
.footer-inner {
    max-width: 900px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem;
}
.footer-brand { flex: 1 1 220px; min-width: 200px; }
.footer-logo { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 1.05rem; }
.footer-logo b { font-weight: 800; letter-spacing: -0.5px; }
.footer-tagline { margin: 0.6rem 0 0; color: var(--text-tertiary); line-height: 1.5; }
.footer-col-title { font-weight: 700; color: var(--text-secondary); margin: 0 0 0.7rem; font-size: 0.85rem; }
.footer-areas ul, .footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-areas ul {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1.25rem;
}
.footer-areas li, .footer-links li { margin: 0; }
.footer-areas a, .footer-links a {
    color: var(--text-secondary); text-decoration: none; line-height: 1.9;
    display: inline-block;
}
.footer-links a { line-height: 2; }
.footer-areas a:hover, .footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-copy {
    max-width: 900px; margin: 1.75rem auto 0; padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center; font-size: 0.78rem; color: var(--text-tertiary);
}
@media (min-width: 768px) {
    .site-footer { padding-bottom: 2.5rem; }   /* 데스크탑은 GNB 없음 */
}