/* ========== 테마 변수 ========== */
:root { color-scheme: light; --bg:#ffffff; --card:#ffffff; --text:#1a1a1a; --text2:#888888; --border:#e0e0e0; --input-bg:#f5f5f5; --accent:#667eea; --success:#4CAF50; }
/* 라이트 전용 */
/* 시스템 다크모드 자동 적용 비활성화 — 유저가 직접 선택해야 다크 */
/*

*/
/* 수동 다크모드 */
/* 수동 라이트모드 */
/* 라이트 전용 — data-theme 속성 불필요 */

/* ========== 하단 네비게이션 ========== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001;
    background: var(--card); border-top: 1px solid var(--border);
    display: flex; height: 56px; box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; color: var(--text2); font-size: 10px; gap: 2px;
    transition: color 0.2s; border: none; background: none;
    min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.nav-item.active { color: #667eea; }
.nav-icon { font-size: 22px; }
.nav-label { font-weight: 600; }

/* 탭 컨텐츠 */
.tab-content {
    position: fixed; top: 48px; left: 0; right: 0; bottom: 56px;
    z-index: 997; background: var(--input-bg); overflow-y: auto; display: none;
}
.tab-content.active { display: block; }

.coming-soon { text-align: center; padding: 80px 20px; color: var(--text2); }
.coming-soon .icon { font-size: 48px; margin-bottom: 12px; }
.coming-soon h3 { font-size: 18px; color: var(--text2); margin-bottom: 8px; }
.coming-soon p { font-size: 14px; }
/* ========== 로그인 UI ========== */

/* 로그인 팝업 오버레이 */
.auth-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: authOverlayIn .3s ease forwards;
}
@keyframes authOverlayIn { to { background: rgba(0,0,0,0.5); } }

.auth-modal {
    position: relative;
    background: var(--card);
    border-radius: 20px;
    padding: 32px 16px;
    width: 320px;
    max-width: calc(100vw - 40px);
    text-align: center;
    transform: translateY(30px);
    opacity: 0;
    animation: authModalIn .35s ease forwards;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.auth-modal-icon { font-size: 40px; margin-bottom: 12px; }
.auth-modal h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.4;
}
.auth-modal p {
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 20px;
}

.auth-kakao-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #FEE500;
    color: #191919;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 12px;
}
.auth-kakao-btn:hover { background: #F0D800; }

.auth-close-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    color: var(--text2);
    font-size: 14px;
    cursor: pointer;
}
.auth-close-btn:hover { color: #667eea; }

/* 프로필 바 */
.auth-profile-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.auth-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.auth-profile-img-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.auth-profile-name {
    font-size: 14px;
    font-weight: 600;
}
.auth-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(76,175,80,0.12);
    color: #2e7d32;
}
.auth-badge-unverified {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text2);
}
.auth-logout-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
}
.auth-logout-btn:hover { border-color: #e74c3c; color: #e74c3c; }

@keyframes authModalIn { to { transform: translateY(0); opacity: 1; } }
/* ========== 문의하기 ========== */

.inquiry-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inquiry-modal {
    background: var(--card);
    border-radius: 20px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.inquiry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.inquiry-header h3 { font-size: 18px; margin: 0; }
.inquiry-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text2);
}

.inquiry-body {
    padding: 16px 20px;
}
.inquiry-body > p {
    font-size: 14px;
    color: var(--text2);
    margin-bottom: 16px;
}

.inquiry-field {
    margin-bottom: 14px;
}
.inquiry-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text2);
}
.inquiry-field select,
.inquiry-field input,
.inquiry-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.inquiry-field select:focus,
.inquiry-field input:focus,
.inquiry-field textarea:focus {
    border-color: #667eea;
}
.inquiry-field textarea { resize: vertical; }

.inquiry-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
}
.inquiry-submit:hover { opacity: 0.9; }
.inquiry-submit:disabled { opacity: 0.5; cursor: default; }

.inquiry-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.inquiry-link-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background: rgba(102,126,234,0.08);
    color: #667eea;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.inquiry-link-btn:hover { background: #e0e0ff; }
.inquiry-link-btn.secondary {
    background: var(--input-bg);
    color: var(--text2);
}
.inquiry-link-btn.secondary:hover { background: var(--input-bg); }

/* 문의 내역 */
.inquiry-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.inquiry-item-cat {
    font-size: 11px;
    color: #667eea;
    font-weight: 600;
}
.inquiry-item-content {
    font-size: 14px;
    margin: 4px 0;
    color: var(--text);
}
.inquiry-item-time {
    font-size: 11px;
    color: #bbb;
}
.inquiry-item-status {
    font-size: 12px;
    margin-top: 4px;
}

/* 답변 */
.inquiry-answer {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(102,126,234,0.08);
    border-radius: 10px;
    font-size: 13px;
}
.inquiry-answer strong {
    color: #667eea;
    display: block;
    margin-bottom: 4px;
}
.inquiry-answer p {
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}
.inquiry-answer-time {
    font-size: 11px;
    color: var(--text2);
    display: block;
    margin-top: 4px;
}

/* 문의 버튼 (네비바 옆) */
.inquiry-fab {
    position: fixed;
    bottom: 124px;
    right: 72px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card);
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inquiry-fab:hover { background: var(--input-bg); }
/* ========== 코인 시스템 스타일 ========== */

/* 코인 잔액 카드 */
.coin-balance-card {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 16px rgba(247, 151, 30, 0.3);
}
.coin-balance-card .coin-icon { font-size: 36px; margin-bottom: 4px; }
.coin-balance-card .coin-amount { font-size: 36px; font-weight: 800; }
.coin-balance-card .coin-label { font-size: 13px; opacity: 0.9; margin-top: 2px; }
.coin-balance-card .coin-history-btn {
    margin-top: 12px;
    padding: 10px 20px;
    min-height: 44px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.coin-balance-card .coin-history-btn:active { background: rgba(255,255,255,0.4); }

/* 코인 히스토리 모달 */
.coin-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.coin-modal {
    background: var(--card);
    border-radius: 16px;
    width: 100%;
    max-width: min(92vw, 720px);
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.coin-modal-header {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.coin-modal-header .close-btn {
    background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text2);
}
.coin-modal-body {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
}
.coin-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f8f8f8;
}
.coin-history-item:last-child { border-bottom: none; }
.coin-history-reason { font-size: 14px; font-weight: 500; color: var(--text); }
.coin-history-date { font-size: 11px; color: var(--text2); margin-top: 2px; }
.coin-history-amount { font-size: 16px; font-weight: 700; }
.coin-history-amount.earn { color: #f7971e; }
.coin-history-amount.spend { color: #e74c3c; }
.coin-history-empty {
    text-align: center; padding: 32px 20px; color: var(--text2); font-size: 14px;
}

/* 토스트 알림 */
.coin-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 16px;
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #fff;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(247, 151, 30, 0.4);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.coin-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* ========== 챗봇 UI ========== */

/* 인라인 모드 (탭 내) */
.chat-panel-inline {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card);
}

/* 챗봇 헤더 */
.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-header-title {
    font-size: 15px;
    font-weight: 700;
}
.chat-header-sub {
    font-size: 11px;
    opacity: 0.8;
}
.chat-close { display: none; }

/* 메시지 영역 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--input-bg);
}

/* 메시지 버블 */
.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}
.chat-msg.bot {
    background: var(--card);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.chat-msg.user {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* 빠른 버튼 */
.chat-quick-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.chat-quick-btn {
    padding: 10px 14px;
    border-radius: 16px;
    min-height: 44px;
    border: 1.5px solid #667eea;
    background: var(--card);
    color: #667eea;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.chat-quick-btn:hover {
    background: #667eea;
    color: white;
}

/* 시간 표시 */
.chat-msg-time{font-size:10px;color:var(--text2);opacity:0.6;margin-top:4px}
.chat-msg.user .chat-msg-time{text-align:right;color:rgba(255,255,255,0.6)}

/* 타이핑 인디케이터 */
.chat-typing{display:flex;gap:4px;padding:12px 16px !important}
.typing-dot{width:8px;height:8px;border-radius:50%;background:var(--text2);opacity:0.4;animation:typingBounce 1.4s infinite ease-in-out}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0);opacity:0.4}40%{transform:translateY(-6px);opacity:1}}

/* 카드형 결과 */
.chat-result-cards{display:flex;gap:8px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chat-result-cards::-webkit-scrollbar{display:none}
.chat-result-card{min-width:160px;max-width:200px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;flex-shrink:0;transition:transform .15s}
.chat-result-card:active{transform:scale(0.97)}
.chat-card-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chat-card-badge{font-size:9px;padding:1px 6px;border-radius:6px;font-weight:600;flex-shrink:0}
.chat-card-badge.local{background:#fff3cd;color:#856404}
.chat-card-badge.onnuri{background:#d4edda;color:#155724}
.chat-card-info{font-size:11px;color:var(--text2);margin-bottom:2px}
.chat-card-addr{font-size:11px;color:var(--text2);opacity:0.7}

/* 입력 영역 */
.chat-input-area {
    display: flex;
    padding: 10px 12px;
    background: var(--card);
    border-top: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}
.chat-input:focus {
    border-color: #667eea;
}
.chat-input::placeholder {
    color: #bbb;
}
.chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-send:hover { opacity: 0.9; }
.chat-send:disabled { opacity: 0.5; cursor: default; }

/* 타이핑 인디케이터 */
.typing {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    align-self: flex-start;
}
.typing span {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    animation: typing 1s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-4px); }
}
/* ========== 알림 시스템 v2 ========== */

/* 헤더 벨 아이콘 */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 6px;
}
.notif-bell:active { background: rgba(255,255,255,.35); }

.notif-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: #f44336; color: white;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(244,67,54,.4);
}
.notif-badge:empty, .notif-badge[data-count="0"] { display: none; }

/* 하단 네비 빨간 점 */
.nav-notif-dot {
    position: absolute; top: 4px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f44336;
    display: none;
}
.nav-notif-dot.show { display: block; }

/* 오버레이 */
.notif-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.notif-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* 알림 패널 (슬라이드 다운) */
.notif-panel {
    position: fixed;
    top: 0; left: 0; right: 0;
    max-height: 70vh;
    background: var(--input-bg);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0);
}
.notif-panel.open {
    transform: translateY(0);
}

.notif-panel-body {
    padding-bottom: 16px;
}

/* 알림 헤더 */
.notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 16px 8px;
    position: sticky; top: 0;
    background: var(--input-bg);
    z-index: 1;
}
.notif-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.notif-mark-all {
    background: none; border: none;
    color: #667eea; font-size: 13px;
    cursor: pointer; font-weight: 600;
    padding: 4px 8px;
}

/* 알림 목록 */
.notif-list {
    padding: 0 12px 12px;
}

.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 12px;
    background: var(--card);
    border-radius: 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s, transform 0.1s;
}
.notif-item:active {
    background: var(--input-bg);
    transform: scale(0.98);
}
.notif-item.read { opacity: 0.5; }

.notif-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.notif-body { flex: 1; min-width: 0; }
.notif-msg {
    font-size: 14px; color: var(--text); line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time { font-size: 11px; color: var(--text2); margin-top: 3px; }

.notif-unread-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #667eea;
    flex-shrink: 0;
    margin-top: 8px;
}
.notif-unread-dot.read { display: none; }

.notif-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text2);
    font-size: 14px;
}
/* ===== 상세 패널 카드 스타일 ===== */
.panel-card {
background: var(--card); border-radius: 14px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
padding: 14px 16px; margin-bottom: 12px;
border: 1px solid #f0f0f0;
}
.panel-card-title {
font-size: 14px; font-weight: 700; color: var(--text);
margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.panel-quick-actions {
display: flex; gap: 8px; margin-bottom: 12px;
}
.panel-quick-actions button {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 10px 4px; border-radius: 12px; border: 1px solid #f0f0f0;
background: var(--input-bg); cursor: pointer; font-size: 11px; color: var(--text); font-weight: 500;
transition: all 0.15s;
}
.panel-quick-actions button:active { background: var(--input-bg); transform: scale(0.97); }
.panel-quick-actions button .qa-icon { font-size: 20px; }
.panel-quick-actions button.disabled { opacity: 0.3; pointer-events: none; }
.panel-quick-actions button.fav-active { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.panel-quick-actions button.dangol-active { border-color: #667eea; background: #f0f4ff; color: #4a5aba; }

.review-summary-bar {
display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.review-summary-bar .bar-label { font-size: 13px; min-width: 28px; text-align: center; }
.review-summary-bar .bar-track {
flex: 1; height: 8px; border-radius: 4px; background: var(--input-bg); overflow: hidden;
}
.review-summary-bar .bar-fill {
height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.review-summary-bar .bar-pct { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }
.bar-fill.taste { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bar-fill.revisit { background: linear-gradient(90deg, #f472b6, #ec4899); }
.review-summary-total { font-size: 12px; color: var(--text2); text-align: right; margin-top: 4px; }

.price-info-item {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0; border-bottom: 1px solid #f8f8f8;
}
.price-info-item:last-child { border-bottom: none; }
.price-info-name { font-size: 14px; color: var(--text); }
.price-info-right { text-align: right; }
.price-info-val { font-size: 15px; font-weight: 700; color: var(--text); }
.price-info-count { font-size: 11px; color: var(--text2); }

.no-data-hint { font-size: 13px; color: #bbb; text-align: center; padding: 8px 0; }

/* 다크모드 카드 */

.detail-section-title {
font-size: 15px; font-weight: 700; margin: 20px 0 10px; color: var(--text);
display: flex; align-items: center; gap: 6px;
}
.facility-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.facility-tag {
padding: 6px 12px; border-radius: 16px; font-size: 12px;
background: #f0f4ff; color: #4a5aba; border: 1px solid #e0e5f5;
display: inline-flex; align-items: center; gap: 4px;
}
.facility-tag .tag-count { font-size: 10px; color: var(--text2); }
.tag-report-btn {
padding: 6px 14px; border-radius: 16px; font-size: 12px;
background: var(--card); color: #667eea; border: 1.5px dashed #667eea;
cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}

/* Leaflet 클러스터 커스텀 */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
background: rgba(102,126,234,0.3) !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
background: linear-gradient(135deg, #667eea, #764ba2) !important;
color: white !important; font-weight: bold;
}
/* 클러스터 목록 패널 */
.cluster-list-overlay { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; }
.cluster-list-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.cluster-list-panel { position:relative; z-index:1; width:100%; max-width:420px; max-height:60vh; background: var(--card); border-radius:16px 16px 0 0; display:flex; flex-direction:column; animation:clSlideUp .3s ease; }
@keyframes clSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.cluster-list-header { display:flex; align-items:center; padding:16px; border-bottom:1px solid #f0f0f0; }
.cluster-list-header h3 { flex:1; margin:0; font-size:16px; }
.cluster-list-close { background:none; border:none; font-size:20px; color: var(--text2); cursor:pointer; padding:4px 8px; }
.cluster-list-body { overflow-y:auto; flex:1; }
.cluster-list-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #f5f5f5; cursor:pointer; transition:background .15s; }
.cluster-list-item:active { background:var(--input-bg); }
.cluster-list-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.cluster-list-info { flex:1; min-width:0; }
.cluster-list-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cluster-list-addr { font-size:12px; color: var(--text2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cluster-list-badge { font-size:11px; flex-shrink:0; }

.my-menu-item {
padding: 14px 16px; font-size: 14px; cursor: pointer;
border-bottom: 1px solid #f0f0f0; transition: background 0.2s;
min-height: 44px; display: flex; align-items: center;
}
.my-menu-item:last-child { border-bottom: none; }
.my-menu-item:active { background: var(--input-bg); }

/* ===== 다크모드 ===== */

/* 다크 변수는 상단에서 통합 관리 */
/* html[data-theme="dark"] .header 제거됨 */
/* ========== Level & Badge System ========== */
.level-card { background: var(--card); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.level-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.level-icon { font-size: 36px; width: 48px; text-align: center; }
.level-info { flex: 1; }
.level-name { font-size: 16px; font-weight: 800; color: var(--text); }
.level-score { font-size: 12px; color: var(--text2); margin-top: 2px; }
.level-bar-wrap { height: 8px; background: var(--input-bg); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.level-bar { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 4px; transition: width 0.6s ease; }
.level-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text2); flex-wrap: wrap; }
.level-stats span { background: var(--input-bg); padding: 3px 8px; border-radius: 6px; }

.badge-section { margin-bottom: 20px; }
.badge-section-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.badge-item { background: var(--card); border-radius: 12px; padding: 14px 8px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.2s; }
.badge-item.earned { border: 2px solid #667eea; }
.badge-item.locked { opacity: 0.35; filter: grayscale(0.8); }
.badge-icon { font-size: 28px; margin-bottom: 4px; }
.badge-name { font-size: 12px; font-weight: 700; color: var(--text); }
.badge-desc { font-size: 10px; color: var(--text2); margin-top: 2px; }

.badge-toast { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 12px 20px; border-radius: 12px; font-size: 14px; z-index: 10000; box-shadow: 0 4px 16px rgba(102,126,234,0.4); transition: top 0.3s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.badge-toast.show { top: 20px; }

/* 트렌딩 지역 필터 */
.trend-region-filter { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.trend-region-filter::-webkit-scrollbar { display: none; }
.trend-region-chip {
    padding: 6px 14px; border-radius: 16px; font-size: 13px;
    background: var(--input-bg); color: var(--text2); cursor: pointer; white-space: nowrap;
    border: 1.5px solid transparent; transition: all 0.2s;
}
.trend-region-chip.active { background: #667eea; color: white; border-color: #667eea; }

/* ========== 다크모드: 트렌딩/커뮤니티/MY ========== */

/* 트렌딩 */
/* 커뮤니티 */
/* MY 탭 */
/* 홈 피드 */
/* 공연/축제 피드 */
/* ========== Manual dark theme overrides ========== */
/* 트렌딩 */
/* ========== 다크모드 배너 톤다운 ========== */
/* ========== 다크모드 전체 그라데이션 톤다운 ========== */
/* 즐겨찾기 목록 */
.fav-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.fav-list-item:hover { background: var(--input-bg); }
.fav-list-item:last-child { border-bottom: none; }

/* ========== 다크모드 보강 ========== */
.comm-accordion { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin: 8px 16px; overflow: hidden; }
.comm-acc-header:active { background: var(--input-bg); }
.map-loading-spin { display:inline-block; animation: mapSpin 1s linear infinite; }
@keyframes mapSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ========== 할인 강조 배너 ========== */
.discount-highlight-banner {
    background: linear-gradient(135deg, #f0ad4e15, #e67e2215);
    border: 1.5px solid #f0ad4e40;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: #e67e22;
    text-align: center;
    animation: discountPulse 2s ease-in-out infinite;
}
@keyframes discountPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,173,78,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(240,173,78,0); }
}
/* 할인 필터 버튼 활성 */
#discountFilterBtn.active {
    background: linear-gradient(135deg, #f0ad4e, #e67e22) !important;
    color: white !important;
    border-color: #e67e22 !important;
}

/* ========== 챗봇 카테고리 퀵 버튼 ========== */
.chat-category-wrap{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.chat-cat-group{background:var(--card);border-radius:12px;padding:10px 12px}
.chat-cat-label{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}
.chat-cat-btns{display:flex;flex-wrap:wrap;gap:6px}

/* ===== 더보기 버튼 ===== */
.cat-chip-more {
  background: var(--accent, #667eea) !important;
  color: #fff !important;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========== Ripple 클릭 이펙트 ========== */
.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,0.4);transform:scale(0);animation:rippleAnim 0.6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ========== 코인 뱃지 ========== */
.coin-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f0ad4e,#e67e22);color:#fff;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:700}
.pro-lock-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f0ad4e,#e67e22);color:#fff;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:700}

/* ========== 알림 벨 숨김 ========== */
.notif-bell{display:none!important}

/* ========== 코인 공유 카운터 ========== */
.hf-coin-counter{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;margin:8px 16px 0;border-radius:10px;background:linear-gradient(135deg,rgba(240,173,78,0.1),rgba(230,126,34,0.1));font-size:11px;color:var(--text2);cursor:pointer}
.hf-coin-count{font-weight:700;color:#f0ad4e}

/* ========== 공통 바텀시트 (detail-sheet) ========== */
.detail-sheet{position:relative;z-index:1;background:var(--bg,#fff);border-radius:20px 20px 0 0;width:100%;max-width:min(92vw, 720px);padding:16px 16px 24px;box-shadow:0 -4px 24px rgba(0,0,0,0.12)}
.detail-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 10px}
.detail-sheet-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:4px}
.detail-sheet-addr{font-size:13px;color:var(--text2);margin-bottom:2px}
.detail-sheet-phone{font-size:13px;margin-bottom:2px}
.detail-sheet-cat{font-size:12px;color:var(--text2);margin-bottom:8px}
.detail-sheet-actions{display:flex;gap:8px}
.detail-sheet-btn{flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:inline-block}
.detail-sheet-btn:first-child{background:var(--accent,#667eea);color:#fff;border-color:var(--accent,#667eea)}
/* 시트 섹션 구분선 */
.sheet-divider{height:1px;background:var(--border);margin:10px -16px}
.sheet-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.ss-section{margin:8px 0;padding:12px 0;border-top:1px solid var(--border,#eee)}
.ss-section:empty{display:none}
.ss-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}

/* ========== 공공시설 방문후기 ========== */
.place-review-section{padding:0 4px;margin-top:8px}

/* ========== 바텀시트 스켈레톤 ========== */
.bs-skeleton-line{height:14px;background:var(--border);border-radius:4px;animation:bsSkelPulse 1.2s ease-in-out infinite}
@keyframes bsSkelPulse{0%,100%{opacity:0.4}50%{opacity:1}}

/* ========== 큰 화면 반응형 (태블릿/PC 공통) ========== */
@media (min-width: 768px) {
  /* 🔒 근본적 overflow 방지 — 모든 그리드/flex 자식에 min-width:0 */
  /* 이유: grid/flex 아이템의 기본 min-width는 auto → 내용물이 셀 밖으로 넘침 */
  /* min-width:0으로 바꾸면 부모가 정한 폭을 존중함 */
  /* 가로 스크롤 컨테이너 overflow 방지 */
  .hf-section, .trend-card, .comm-browse-card {
    min-width: 0;
    overflow: hidden;
  }

  /* html/body 가로 스크롤 차단 */
  html, body { overflow-x: hidden; }

  /* 모든 탭 콘텐츠 — 최대 너비 + 중앙 정렬 */
  .tab-content {
    max-width: 1200px;
    left: 50% !important;
    right: auto !important;
    width: 100%;
    transform: translateX(-50%);
    overflow-x: hidden;
  }
  /* 지도는 전체 폭 유지 */
  #tabMap, #map-container, #map {
    max-width: none;
    left: 0 !important;
    right: 0 !important;
    width: auto;
    transform: none;
  }

  /* 헤더/필터/탭바도 지도와 동일하게 전체 폭 */
  .filter-bar, .tag-filter-bar, .category-bar {
    max-width: none;
  }
  .tab-bar, .bottom-nav {
    max-width: 1200px;
    width: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* 홈 피드 */
  .hf-wrap { max-width: 1200px; margin: 0 auto; }
  /* hfNearby, hfInsight — 그리드 없으므로 별도 규칙 불필요 */

  /* My 페이지 — 중앙 정렬 */
  .my-container, .my-wrap { max-width: min(92vw, 720px); margin: 0 auto; }

  /* 바텀시트/패널 — 600px 제한 중앙 */
  .bottom-sheet, .detail-sheet, .tp-detail-panel, .info-panel {
    max-width: min(92vw, 720px);
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(100%) !important;
  }
  .bottom-sheet.show, .info-panel.show {
    transform: translateX(-50%) translateY(0) !important;
  }
  /* uni-sheet-panel은 overlay가 flex center로 정렬하므로 left/translateX 불필요 */
  .uni-sheet-panel {
    max-width: min(92vw, 720px);
  }

  .snap-modal { max-width: min(92vw, 720px); margin: 0 auto; }

  /* ===== PC 모달/오버레이 480px 제한 공통 규칙 ===== */
  /* 로그인 프롬프트, auth 모달 등 fixed 팝업 */
  .auth-modal { max-width: 320px; }
  .auth-overlay { /* 전체 덮는 건 OK — 안의 auth-modal이 제한됨 */ }
  .tp-modal-inner { max-width: 1200px; margin: 0 auto; }
  
  /* 
   * 🔒 PC 480px 규칙 (새 UI 추가 시 필수 확인!)
   * - 바텀시트/패널: max-width 480px + left:50% + translateX(-50%)
   * - 모달 내부: max-width 480px (또는 적절한 크기)
   * - fixed overlay: 내부 컨텐츠에 max-width 걸기
   * - 탭 콘텐츠: .tab-content 1200px가 자동 적용됨
   */

  /* 🔒 PC 플로팅 버튼 — 콘텐츠 영역(1200px) 안으로 제한 */
  .my-location,
  .floating-myloc,
  .snap-camera-fab,
  .floating-game {
    right: max(16px, calc(50% - 600px + 16px)) !important;
  }
  /* 지도 탭은 전체 폭이므로 원래대로 */
  body[data-tab="map"] .my-location,
  body[data-tab="map"] .floating-myloc {
    right: 16px !important;
  }
}

/* 1024px+ 추가 규칙 없음 — 모바일 레이아웃 유지, max-width만 제한 */

/* ========== Task 4: 내 위치 버튼 위치 통일 ========== */
/* 내 위치 버튼: 두 번째 줄 (FAB 위) */
.floating-myloc {
  position: fixed !important;
  bottom: 140px !important;
  right: 16px !important;
  z-index: 999 !important;
}
/* 스냅 지도 내 위치 버튼도 동일 */
#tabSnap .my-location {
  position: fixed !important;
  bottom: 140px !important;
  right: 16px !important;
  z-index: 999 !important;
}

/* ========== Task 5: 스냅 카메라 버튼 (최하단, 탭바 위) ========== */
.snap-camera-fab {
  position: fixed !important;
  bottom: 72px !important;
  right: 16px !important;
  z-index: 999;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white; border: none;
  box-shadow: 0 2px 8px rgba(102,126,234,0.4);
  cursor: pointer; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.snap-camera-fab:active { transform: scale(0.93); }

/* ===== Login Gate Blur ===== */
.login-blur-wrap { position:relative; }
.login-blur-wrap .login-blur-content { filter:blur(8px); pointer-events:none; user-select:none; }
.login-blur-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:5; background:rgba(255,255,255,0.3); border-radius:12px; }
.login-blur-overlay button { padding:10px 28px; background:var(--accent,#667eea); color:#fff; border:none; border-radius:20px; font-size:14px; font-weight:600; cursor:pointer; }
.login-blur-overlay p { font-size:13px; color:var(--text2); margin-bottom:8px; }