/* PanSol 전체 스타일시트 — 페이지 레이아웃·컴포넌트·반응형 포함 */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg:         #04040f;
            --bg2:        rgba(6, 6, 22, 0.96);
            --glass:      rgba(8, 8, 28, 0.88);
            --cyan:       #00e5ff;
            --purple:     #7c3aed;
            --green:      #10b981;
            --orange:     #f59e0b;
            --red:        #ef4444;
            --txt:        #e2e8f0;
            --txt2:       #7a8899;
            --border:     rgba(0, 229, 255, 0.14);
            --sidebar:    240px;
        }

        body {
            background: var(--bg);
            color: var(--txt);
            font-family: 'Noto Sans KR', sans-serif;
            /* --vh는 JS setVh()가 주소창 높이 반영해 업데이트 */
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100);
            display: flex;
            overflow: hidden;
        }

        /* ── SIDEBAR ───────────────────────────────── */
        #sidebar {
            width: var(--sidebar);
            background: var(--bg2);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            z-index: 20;
        }

        .sb-logo {
            padding: 22px 18px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .logo-hex {
            width: 38px; height: 38px; flex-shrink: 0;
            border-radius: 10px;
            display: block; object-fit: cover;
        }

        .logo-words { display: flex; flex-direction: column; }
        .logo-name {
            font-size: 21px; font-weight: 700; letter-spacing: -0.5px;
            background: linear-gradient(135deg, var(--cyan) 30%, #fff);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .logo-tag {
            font-size: 9px; color: var(--txt2); letter-spacing: 2px;
            text-transform: uppercase; margin-top: -2px;
        }

        /* min-height:0 필수 — 없으면 항목 많을 때 footer 밀려남 */
        .sb-nav { flex: 1; padding: 14px 10px; overflow-y: auto; min-height: 0; }

        .nav-group-title {
            font-size: 9.5px; color: var(--txt2);
            letter-spacing: 1.8px; text-transform: uppercase;
            padding: 10px 10px 5px;
        }

        .nav-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 12px; border-radius: 8px;
            cursor: pointer; transition: all .18s;
            font-size: 13.5px; color: var(--txt2);
            margin-bottom: 1px; position: relative;
        }
        .nav-item:hover { background: rgba(0,229,255,.07); color: var(--txt); }
        .nav-item.active {
            background: rgba(0,229,255,.11);
            color: var(--cyan);
            border: 1px solid rgba(0,229,255,.2);
        }
        .nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
        .nav-badge {
            margin-left: auto;
            background: var(--red);
            color: #fff; font-size: 9px;
            padding: 2px 6px; border-radius: 10px; font-weight: 700;
        }
        .nav-badge.new { background: var(--green); }

        .sb-footer {
            padding: 12px 14px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Google 로그인 버튼 (미로그인) */
        .google-login-btn {
            width: 100%; height: 38px;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 10px;
            color: var(--txt); font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            transition: all .18s;
        }
        .google-login-btn:hover {
            background: rgba(255,255,255,.12);
            border-color: rgba(255,255,255,.25);
        }

        /* 로그인 후 — 사용자 프로필 카드 */
        .sb-user-card {
            display: flex; align-items: center; gap: 9px;
            padding: 10px 11px;
            background: rgba(0,229,255,.06);
            border: 1px solid var(--border);
            border-radius: 12px;
            cursor: pointer; transition: all .18s;
        }
        .sb-user-card:hover {
            background: rgba(0,229,255,.1);
            border-color: rgba(0,229,255,.28);
        }
        .sb-ava-wrap {
            width: 36px; height: 36px; border-radius: 50%;
            flex-shrink: 0; overflow: hidden;
            border: 2px solid rgba(0,229,255,.3);
        }
        .sb-ava-img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .sb-ava-fallback {
            width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--cyan), var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; font-weight: 800; color: #04040f;
        }
        .sb-user-info { flex: 1; min-width: 0; }
        .sb-user-name {
            font-size: 13px; font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .sb-user-email {
            font-size: 10px; color: var(--txt2); margin-top: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .sb-user-badge {
            display: flex; align-items: center; gap: 4px;
            font-size: 9.5px; color: var(--txt2); margin-top: 3px;
        }
        .sb-provider-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--green); flex-shrink: 0;
        }
        .sb-logout-btn {
            flex-shrink: 0;
            width: 26px; height: 26px; border-radius: 7px;
            background: rgba(239,68,68,.1);
            border: 1px solid rgba(239,68,68,.25);
            color: var(--red); font-size: 14px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all .15s;
        }
        .sb-logout-btn:hover { background: rgba(239,68,68,.2); }

        .sb-footer .beta-box { width: 100%; }

        .site-footer {
            width: 100%;
            padding: 22px 24px;
            background: rgba(4,4,15,.95);
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }
        .footer-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .footer-action {
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.04);
            color: var(--txt);
            cursor: pointer;
            transition: all .18s ease;
            font-size: 13px;
            min-width: 170px;
            text-align: center;
        }
        .footer-action:hover {
            background: rgba(0,229,255,.12);
            border-color: rgba(0,229,255,.25);
        }
        .footer-copy {
            width: 100%;
            text-align: center;
            color: var(--txt2);
            font-size: 12px;
            margin-top: 8px;
        }
        .modal-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,.68);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease;
            z-index: 300;
        }
        .modal-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        .modal-dialog {
            width: min(560px,calc(100% - 32px));
            background: rgba(6,6,22,.98);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: 0 24px 80px rgba(0,0,0,.45);
            transform: translateY(24px);
            opacity: 0;
            transition: transform .25s ease, opacity .25s ease;
            overflow: hidden;
        }
        .modal-overlay.show .modal-dialog {
            transform: translateY(0);
            opacity: 1;
        }
        .modal-header {
            padding: 18px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
        }
        .modal-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--txt);
        }
        .modal-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.04);
            color: var(--txt);
            cursor: pointer;
            font-size: 18px;
        }
        .modal-body {
            padding: 18px 20px 22px;
            color: var(--txt2);
            line-height: 1.8;
            font-size: 14px;
        }
        .modal-body p { margin: 0 0 14px; }

        @media (max-width: 768px) {
            .site-footer { flex-direction: column; align-items: stretch; padding: 18px 18px; }
            .footer-actions { flex-direction: column; align-items: stretch; }
            .footer-action { min-width: initial; width: 100%; }
            .footer-copy { margin-top: 12px; }
        }

        .beta-box {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            text-align: center;
        }
        .beta-free { font-size: 18px; font-weight: 700; color: var(--cyan); }
        .beta-sub  { font-size: 10px; color: var(--txt2); margin-top: 1px; }

        /* ── MAIN ──────────────────────────────────── */
        #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

        /* ── CITY ──────────────────────────────────── */
        /* ── 홈 지도 영역 */
        #city-wrap {
            flex: 0 0 58%;
            position: relative;
            overflow: hidden;
            background: #04040f;
        }

        #home-map {
            width: 100%; height: 100%;
            /* Leaflet attribution 최소화 */
        }
        /* Leaflet attribution 다크 스타일 */
        .leaflet-control-attribution {
            background: rgba(4,4,15,.8) !important;
            color: rgba(255,255,255,.35) !important;
            font-size: 9px !important;
        }
        .leaflet-control-attribution a { color: rgba(255,255,255,.45) !important; }
        .leaflet-control-zoom a {
            background: rgba(6,6,22,.9) !important;
            color: var(--cyan) !important;
            border-color: var(--border) !important;
        }

        /* 파트너 마커 팝업 */
        .leaflet-popup-content-wrapper {
            background: rgba(8,8,28,.95) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
            backdrop-filter: blur(12px);
        }
        .leaflet-popup-tip { background: rgba(8,8,28,.95) !important; }
        .leaflet-popup-content { margin: 10px 14px !important; color: var(--txt); }
        .pm-name  { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
        .pm-meta  { font-size: 11px; color: var(--txt2); line-height: 1.7; }
        .pm-stars { color: var(--orange); }
        .pm-dist  { color: var(--cyan); font-weight: 600; }
        .pm-btn {
            width: 100%; margin-top: 10px; padding: 8px;
            background: var(--cyan); color: #04040f;
            border: none; border-radius: 8px;
            font-size: 12px; font-weight: 700; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif;
        }

        /* HUD 오버레이 */
        .hud {
            position: absolute; inset: 0; pointer-events: none;
            display: flex; flex-direction: column;
            justify-content: space-between; z-index: 400;
        }

        .hud-top {
            display: flex; justify-content: space-between;
            align-items: flex-start; padding: 12px 16px;
        }

        .hud-label {
            font-size: 10px; letter-spacing: 2px;
            color: rgba(0,229,255,.8); text-transform: uppercase;
            display: flex; align-items: center; gap: 6px;
            background: rgba(4,4,15,.75);
            border: 1px solid var(--border);
            border-radius: 20px; padding: 4px 12px;
        }
        .hud-live-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--red); animation: pulse 1.2s infinite;
        }

        .hud-stats { display: flex; gap: 7px; }
        .hud-stat {
            background: rgba(4,4,15,.82);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 11px; color: var(--txt2);
        }
        .hud-stat strong { color: var(--cyan); font-weight: 600; }

        /* 범례 */
        .hud-legend {
            display: flex; gap: 10px;
            padding: 0 16px;
            pointer-events: none;
        }
        .hl-item {
            display: flex; align-items: center; gap: 5px;
            font-size: 10px; color: rgba(255,255,255,.6);
            background: rgba(4,4,15,.75);
            border: 1px solid var(--border);
            border-radius: 10px; padding: 3px 8px;
        }
        .hl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

        .hud-bottom {
            display: flex; justify-content: center;
            padding-bottom: 10px;
        }

        .loc-pill {
            background: rgba(4,4,15,.88);
            border: 1px solid rgba(0,229,255,.3);
            border-radius: 20px;
            padding: 5px 16px;
            font-size: 11px; color: var(--cyan);
            display: flex; align-items: center; gap: 7px;
        }

        .pulse {
            width: 7px; height: 7px;
            background: var(--cyan); border-radius: 50%;
            animation: pulse 1.6s infinite;
        }

        @keyframes pulse {
            0%,100% { opacity:1; transform:scale(1); }
            50%      { opacity:.4; transform:scale(.75); }
        }

        /* ── CHAT ──────────────────────────────────── */
        #chat-wrap {
            flex: 1;
            min-height: 0;          /* flex child 수축 허용 — 입력창 가림 방지 */
            display: flex; flex-direction: column;
            background: var(--glass);
            border-top: 1px solid var(--border);
            backdrop-filter: blur(18px);
            overflow: hidden;
        }

        .chat-header {
            flex-shrink: 0;  /* 헤더 절대 축소 금지 */
            padding: 10px 18px;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 10px;
            position: relative;
        }

        .fullscreen-btn {
            margin-left: auto;
            padding: 6px 10px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 10px;
            background: rgba(255,255,255,.04);
            color: var(--txt);
            font-size: 12px;
            cursor: pointer;
            transition: all .18s;
            flex-shrink: 0;
        }
        .fullscreen-btn:hover {
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.2);
        }

        .ai-ava {
            width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; flex-shrink: 0;
        }

        .ai-name  { font-size: 14px; font-weight: 600; }
        .ai-status {
            font-size: 11px; color: var(--green);
            display: flex; align-items: center; gap: 4px; margin-top: 1px;
        }
        .status-dot {
            width: 6px; height: 6px;
            background: var(--green); border-radius: 50%;
        }

        #chat-msgs {
            flex: 1; min-height: 0; overflow-y: auto; /* min-height:0 필수 */
            padding: 14px 18px;
            display: flex; flex-direction: column; gap: 11px;
        }
        #chat-msgs::-webkit-scrollbar { width: 3px; }
        #chat-msgs::-webkit-scrollbar-thumb {
            background: rgba(0,229,255,.2); border-radius: 2px;
        }

        .msg { display: flex; gap: 9px; max-width: 82%; animation: fadeUp .28s ease; }
        .msg.user { align-self: flex-end; flex-direction: row-reverse; }

        @keyframes fadeUp {
            from { opacity:0; transform: translateY(8px); }
            to   { opacity:1; transform: translateY(0); }
        }

        .msg-ava {
            width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; flex-shrink: 0;
        }
        .msg.ai   .msg-ava { background: linear-gradient(135deg,var(--cyan),var(--purple)); }
        .msg.user .msg-ava { background: rgba(124,58,237,.25); border:1px solid rgba(124,58,237,.35); }

        .bubble {
            background: rgba(0,229,255,.05);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 9px 13px;
            font-size: 13px; line-height: 1.65;
        }
        .msg.user .bubble {
            background: rgba(124,58,237,.14);
            border-color: rgba(124,58,237,.28);
        }

        .msg-time { font-size: 10px; color: var(--txt2); margin-top: 3px; }

        /* typing dots */
        .typing { display:flex; align-items:center; gap:4px; padding: 8px 13px; }
        .dot {
            width:6px; height:6px; background:var(--cyan); border-radius:50%;
            animation: bounce 1.2s infinite;
        }
        .dot:nth-child(2) { animation-delay:.2s; }
        .dot:nth-child(3) { animation-delay:.4s; }
        @keyframes bounce {
            0%,60%,100% { transform:translateY(0); opacity:.5; }
            30%          { transform:translateY(-6px); opacity:1; }
        }

        /* steps */
        .steps { margin-top: 8px; }
        .step {
            display: flex; align-items: center; gap: 7px;
            padding: 3px 0; font-size: 12px; color: var(--txt2);
        }
        .step.done   { color: var(--green); }
        .step.active { color: var(--cyan); }

        /* partner card */
        .card {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 11px;
            padding: 13px;
            margin-top: 9px;
        }
        .card-label {
            font-size: 10px; color: var(--cyan);
            letter-spacing: 1px; text-transform: uppercase;
            margin-bottom: 9px;
        }
        .p-row  { display:flex; align-items:center; gap: 11px; }
        .p-ava  {
            width:44px; height:44px; border-radius:10px; flex-shrink: 0;
            background: linear-gradient(135deg,#12124a,#22226a);
            border: 1px solid var(--border);
            display:flex; align-items:center; justify-content:center;
            font-size:22px;
        }
        .p-name { font-weight:600; font-size:14px; }
        .p-meta { font-size:11px; color:var(--txt2); margin-top:2px; }
        .p-star { color:var(--orange); }
        .p-dist { color:var(--cyan); }
        .p-eta  { color:var(--green); }
        .p-btns { display:flex; gap:8px; margin-top:11px; }
        .btn-p {
            flex:1; border:none; border-radius:8px;
            padding: 8px 14px; font-size:12px; font-weight:700;
            cursor:pointer; transition:all .18s;
            font-family: 'Noto Sans KR', sans-serif;
        }
        .btn-p.primary {
            background: var(--cyan); color: #04040f;
        }
        .btn-p.primary:hover { filter: brightness(1.1); }
        .btn-p.secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--txt);
        }
        .btn-p.secondary:hover { background: rgba(0,229,255,.08); }

        /* web-search fallback */
        .web-card { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.04); }
        .web-label { color: var(--orange); }

        /* suggestions */
        #suggestions {
            flex-shrink: 0;  /* 빠른 버튼 줄 절대 축소 금지 */
            display: flex; gap: 7px;
            padding: 7px 16px;
            overflow-x: auto; scrollbar-width: none;
        }
        #suggestions::-webkit-scrollbar { display: none; }

        .chip {
            flex-shrink: 0;
            background: rgba(0,229,255,.05);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 12px; color: var(--txt2);
            cursor: pointer; transition: all .18s;
            white-space: nowrap;
            font-family: 'Noto Sans KR', sans-serif;
        }
        .chip:hover { background: rgba(0,229,255,.12); color: var(--cyan); border-color: rgba(0,229,255,.3); }

        /* image preview */
        #img-preview {
            display: none; flex-wrap: wrap; gap: 7px;
            padding: 7px 16px;
        }
        .preview-img {
            width: 58px; height: 58px; border-radius: 7px;
            object-fit: cover; border: 1px solid var(--border);
        }

        /* input row — flex-shrink:0 으로 절대 가려지지 않게 */
        #input-row {
            flex-shrink: 0;
            padding: 10px 14px;
            border-top: 1px solid var(--border);
            display: flex; align-items: center; gap: 8px;
            background: rgba(4,4,15,.55);
        }

        #chat-wrap.fullscreen {
            position: fixed;
            top: 54px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 150;
            background: rgba(4,4,15,.98);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
        }
        body.page-fullscreen #bottom-nav { display: none; }
        /* 전체화면(documentElement) 시 레이아웃 구조 유지 */
        :fullscreen body, :-webkit-full-screen body {
            overflow: hidden;
        }
        #chat-wrap.fullscreen #chat-msgs {
            min-height: 0;
        }
        #chat-wrap.fullscreen .chat-header {
            z-index: 1;
        }

        .icon-btn {
            width: 36px; height: 36px; flex-shrink: 0;
            border-radius: 8px;
            background: rgba(0,229,255,.07);
            border: 1px solid var(--border);
            color: var(--txt2); font-size: 16px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all .18s;
        }
        .icon-btn:hover { background: rgba(0,229,255,.14); color: var(--cyan); }

        #chat-in {
            flex: 1;
            background: rgba(0,229,255,.05);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 9px 14px;
            color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR', sans-serif;
            outline: none; transition: border-color .18s;
        }
        #chat-in:focus { border-color: rgba(0,229,255,.38); }
        #chat-in::placeholder { color: var(--txt2); }

        #send-btn {
            height: 36px; padding: 0 16px; flex-shrink: 0;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            border: none; border-radius: 8px;
            color: #fff; font-size: 13px; font-weight: 700;
            cursor: pointer; transition: all .18s;
            font-family: 'Noto Sans KR', sans-serif;
        }
        #send-btn:hover { opacity:.88; transform: scale(1.03); }

        /* chat img */
        .chat-img {
            max-width: 180px; border-radius: 8px;
            margin-top: 7px; display: block;
            border: 1px solid var(--border);
        }

        /* ══ PAGE SYSTEM ════════════════════════════════ */
        /* 데스크탑 상단 바가 추가되므로 height:100% → flex:1 로 변경 */
        .page { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
        .page.active { display: flex; }

        /* ══ REPAIR REQUEST PAGE ════════════════════════ */
        #page-repair {
            background: var(--bg);
            overflow-y: auto;
        }
        #page-repair::-webkit-scrollbar { width: 4px; }
        #page-repair::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* Step header */
        .rp-header {
            flex-shrink: 0;
            padding: 20px 32px 0;
            border-bottom: 1px solid var(--border);
            background: var(--bg2);
        }
        .rp-title {
            font-size: 18px; font-weight: 700;
            color: var(--txt);
            margin-bottom: 18px;
            display: flex; align-items: center; gap: 10px;
        }
        .rp-title span { color: var(--cyan); }

        /* Step indicator */
        .step-bar {
            display: flex; align-items: center; gap: 0;
            margin-bottom: -1px;
        }
        .si {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 20px 12px;
            font-size: 12px; color: var(--txt2);
            border-bottom: 2px solid transparent;
            cursor: default; white-space: nowrap;
        }
        .si.active { color: var(--cyan); border-bottom-color: var(--cyan); }
        .si.done   { color: var(--green); border-bottom-color: transparent; }
        .si-num {
            width: 20px; height: 20px; border-radius: 50%;
            background: rgba(255,255,255,.06);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 700;
        }
        .si.active .si-num { background: var(--cyan); color: #04040f; border-color: var(--cyan); }
        .si.done   .si-num { background: var(--green); color: #04040f; border-color: var(--green); }

        /* Step content area */
        .rp-body {
            flex: 1; overflow-y: auto;
            padding: 28px 32px;
        }
        .rp-body::-webkit-scrollbar { width: 3px; }
        .rp-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        .rp-step { display: none; animation: fadeUp .25s ease; }
        .rp-step.active { display: block; }

        .rp-step-title {
            font-size: 16px; font-weight: 600;
            margin-bottom: 6px;
        }
        .rp-step-sub {
            font-size: 12.5px; color: var(--txt2);
            margin-bottom: 22px;
        }

        /* Category grid */
        .cat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
        }
        .cat-card {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px 14px;
            cursor: pointer;
            transition: all .18s;
            text-align: center;
            position: relative;
        }
        .cat-card:hover {
            background: rgba(0,229,255,.09);
            border-color: rgba(0,229,255,.35);
            transform: translateY(-2px);
        }
        .cat-card.selected {
            background: rgba(0,229,255,.13);
            border-color: var(--cyan);
            box-shadow: 0 0 14px rgba(0,229,255,.15);
        }
        .cat-card.urgent-cat {
            border-color: rgba(239,68,68,.3);
        }
        .cat-card.urgent-cat:hover, .cat-card.urgent-cat.selected {
            background: rgba(239,68,68,.1);
            border-color: var(--red);
        }
        .cat-emoji { font-size: 28px; margin-bottom: 8px; }
        .cat-name  { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
        .cat-desc  { font-size: 10.5px; color: var(--txt2); line-height: 1.4; }
        .cat-check {
            position: absolute; top: 8px; right: 8px;
            width: 18px; height: 18px; border-radius: 50%;
            background: var(--cyan); color: #04040f;
            font-size: 10px; font-weight: 900;
            display: none; align-items: center; justify-content: center;
        }
        .cat-card.selected .cat-check { display: flex; }

        /* Form elements */
        .form-group { margin-bottom: 20px; }
        .form-label {
            font-size: 13px; font-weight: 600;
            margin-bottom: 7px; display: block;
            color: var(--txt);
        }
        .form-sub {
            font-size: 11px; color: var(--txt2);
            margin-bottom: 7px; display: block;
        }
        .form-textarea {
            width: 100%;
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR', sans-serif;
            resize: vertical; min-height: 100px;
            outline: none; transition: border-color .18s;
            line-height: 1.6;
        }
        .form-textarea:focus { border-color: rgba(0,229,255,.4); }
        .form-textarea::placeholder { color: var(--txt2); }
        .form-input {
            width: 100%;
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR', sans-serif;
            outline: none; transition: border-color .18s;
        }
        .form-input:focus { border-color: rgba(0,229,255,.4); }
        .form-input::placeholder { color: var(--txt2); }

        /* Urgency selector */
        .urgency-row { display: flex; gap: 10px; }
        .urgency-opt {
            flex: 1;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 10px;
            text-align: center;
            cursor: pointer;
            transition: all .18s;
            background: rgba(0,229,255,.03);
        }
        .urgency-opt:hover { border-color: rgba(0,229,255,.3); }
        .urgency-opt.selected { border-color: var(--cyan); background: rgba(0,229,255,.1); }
        .urgency-opt.urg-high { border-color: rgba(245,158,11,.3); }
        .urgency-opt.urg-high:hover, .urgency-opt.urg-high.selected {
            border-color: var(--orange); background: rgba(245,158,11,.1); }
        .urgency-opt.urg-sos { border-color: rgba(239,68,68,.3); }
        .urgency-opt.urg-sos:hover, .urgency-opt.urg-sos.selected {
            border-color: var(--red); background: rgba(239,68,68,.1); }
        .urgency-icon { font-size: 22px; margin-bottom: 5px; }
        .urgency-name { font-size: 12px; font-weight: 600; }
        .urgency-desc { font-size: 10px; color: var(--txt2); margin-top: 2px; }

        /* Photo drop zone */
        .drop-zone {
            border: 2px dashed var(--border);
            border-radius: 12px;
            padding: 28px 20px;
            text-align: center;
            cursor: pointer;
            transition: all .18s;
            background: rgba(0,229,255,.02);
        }
        .drop-zone:hover { border-color: rgba(0,229,255,.4); background: rgba(0,229,255,.05); }
        .drop-zone.drag-over { border-color: var(--cyan); background: rgba(0,229,255,.08); }
        .dz-icon { font-size: 32px; margin-bottom: 8px; }
        .dz-text { font-size: 13px; color: var(--txt2); }
        .dz-sub  { font-size: 11px; color: var(--txt2); opacity: .6; margin-top: 4px; }
        .dz-previews {
            display: flex; flex-wrap: wrap; gap: 8px;
            margin-top: 12px; justify-content: center;
        }
        .dz-thumb {
            width: 70px; height: 70px; border-radius: 8px;
            object-fit: cover; border: 1px solid var(--border);
            position: relative;
        }

        /* Time slots */
        .time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .time-slot {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 9px 6px;
            text-align: center;
            cursor: pointer;
            transition: all .18s;
            font-size: 12px;
        }
        .time-slot:hover { border-color: rgba(0,229,255,.35); color: var(--cyan); }
        .time-slot.selected { border-color: var(--cyan); background: rgba(0,229,255,.1); color: var(--cyan); font-weight: 600; }

        /* Date row */
        .date-row { display: flex; gap: 10px; flex-wrap: wrap; }
        .date-chip {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 14px;
            cursor: pointer;
            transition: all .18s;
            font-size: 12.5px;
        }
        .date-chip:hover { border-color: rgba(0,229,255,.35); }
        .date-chip.selected { border-color: var(--cyan); background: rgba(0,229,255,.1); color: var(--cyan); font-weight: 600; }

        /* Location row */
        .loc-row { display: flex; gap: 8px; }
        .loc-row .form-input { flex: 1; }
        .loc-btn {
            padding: 10px 14px;
            background: rgba(0,229,255,.08);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--cyan); font-size: 12px;
            cursor: pointer; white-space: nowrap;
            font-family: 'Noto Sans KR', sans-serif;
            transition: all .18s;
        }
        .loc-btn:hover { background: rgba(0,229,255,.15); }

        /* Two-col layout */
        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

        /* Step 4 — Matching result */
        .quote-box {
            background: linear-gradient(135deg, rgba(0,229,255,.07), rgba(124,58,237,.07));
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 18px 22px;
            margin-bottom: 22px;
            display: flex; align-items: center; gap: 20px;
        }
        .quote-icon { font-size: 36px; }
        .quote-range { font-size: 22px; font-weight: 700; color: var(--cyan); }
        .quote-label { font-size: 11px; color: var(--txt2); margin-top: 2px; }

        .partner-list { display: flex; flex-direction: column; gap: 10px; }

        .p-card {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            transition: all .18s;
        }
        .p-card:hover { border-color: rgba(0,229,255,.3); }
        .p-card.best {
            border-color: rgba(0,229,255,.35);
            background: rgba(0,229,255,.07);
        }
        .p-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
        .p-card-ava {
            width: 46px; height: 46px; border-radius: 10px;
            background: linear-gradient(135deg,#10104a,#22226a);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; flex-shrink: 0;
        }
        .p-card-name  { font-size: 14px; font-weight: 600; }
        .p-card-stars { color: var(--orange); font-size: 12px; margin-top: 2px; }
        .p-card-badge {
            margin-left: auto;
            background: rgba(0,229,255,.15);
            border: 1px solid rgba(0,229,255,.3);
            color: var(--cyan);
            font-size: 10px; font-weight: 700;
            padding: 3px 8px; border-radius: 6px;
        }
        .p-card-meta {
            display: flex; gap: 14px; flex-wrap: wrap;
            font-size: 12px; color: var(--txt2);
            margin-bottom: 12px;
        }
        .p-card-meta span { display: flex; align-items: center; gap: 4px; }
        .p-card-btns { display: flex; gap: 8px; }
        .p-btn-main {
            flex: 1; background: var(--cyan); color: #04040f;
            border: none; border-radius: 8px;
            padding: 9px; font-size: 12.5px; font-weight: 700;
            cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
            transition: all .18s;
        }
        .p-btn-main:hover { filter: brightness(1.1); }
        .p-btn-sub {
            padding: 9px 14px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px; color: var(--txt);
            font-size: 12px; cursor: pointer;
            font-family: 'Noto Sans KR', sans-serif;
            transition: all .18s;
        }
        .p-btn-sub:hover { background: rgba(0,229,255,.07); }

        /* Bottom nav bar */
        .rp-nav {
            flex-shrink: 0;
            padding: 14px 32px;
            border-top: 1px solid var(--border);
            background: var(--bg2);
            display: flex; justify-content: space-between; align-items: center;
        }
        .rp-nav-left { font-size: 12px; color: var(--txt2); }
        .rp-nav-btns { display: flex; gap: 10px; }
        .nav-back {
            padding: 9px 20px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px; color: var(--txt);
            font-size: 13px; cursor: pointer;
            font-family: 'Noto Sans KR', sans-serif;
            transition: all .18s;
        }
        .nav-back:hover { background: rgba(255,255,255,.05); }
        .nav-next {
            padding: 9px 24px;
            background: linear-gradient(135deg, var(--cyan), var(--purple));
            border: none; border-radius: 8px;
            color: #fff; font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
            transition: all .18s;
        }
        .nav-next:hover { opacity: .88; transform: scale(1.02); }
        .nav-next:disabled { opacity: .35; transform: none; cursor: not-allowed; }

        /* Matching animation */
        .match-loading {
            text-align: center; padding: 40px 20px;
        }
        .match-spinner {
            width: 48px; height: 48px;
            border: 3px solid var(--border);
            border-top-color: var(--cyan);
            border-radius: 50%;
            animation: spin .8s linear infinite;
            margin: 0 auto 16px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .match-steps { margin-top: 16px; text-align: left; max-width: 260px; margin-left: auto; margin-right: auto; }
        .m-step { font-size: 12.5px; padding: 4px 0; color: var(--txt2); display: flex; gap: 8px; }
        .m-step.done   { color: var(--green); }
        .m-step.active { color: var(--cyan); }

        /* ══ 공통 페이지 레이아웃 ═══════════════════════ */
        .pg-header {
            flex-shrink: 0;
            padding: 18px 28px;
            border-bottom: 1px solid var(--border);
            background: var(--bg2);
            display: flex; align-items: center; justify-content: space-between;
        }
        .pg-title-row { display: flex; align-items: center; gap: 12px; }
        .pg-icon { font-size: 22px; }
        .pg-name { font-size: 17px; font-weight: 700; }
        .pg-sub  { font-size: 11px; color: var(--txt2); margin-top: 1px; }
        .pg-actions { display: flex; gap: 8px; }
        .pg-body {
            flex: 1; overflow-y: auto; padding: 24px 28px;
        }
        .pg-body::-webkit-scrollbar { width: 3px; }
        .pg-body::-webkit-scrollbar-thumb { background: var(--border); border-radius:2px; }

        /* 공통 섹션 제목 */
        .section-title {
            font-size: 13px; font-weight: 700;
            color: var(--txt2); letter-spacing: .8px;
            text-transform: uppercase; margin-bottom: 12px;
            padding-bottom: 8px; border-bottom: 1px solid var(--border);
        }

        /* 공통 스탯 카드 */
        .stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px; }
        .stat-card {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 12px; padding: 16px;
        }
        .stat-val  { font-size: 22px; font-weight: 700; color: var(--cyan); }
        .stat-lbl  { font-size: 11px; color: var(--txt2); margin-top: 3px; }
        .stat-sub  { font-size: 10px; color: var(--green); margin-top: 2px; }

        /* 공통 탭 */
        .tab-row {
            display: flex; gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 18px;
        }
        .tab {
            padding: 8px 16px; font-size: 13px;
            color: var(--txt2); cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all .15s;
        }
        .tab:hover { color: var(--txt); }
        .tab.active { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; }

        /* 공통 빈 상태 */
        .empty-state {
            text-align: center; padding: 60px 20px;
            color: var(--txt2);
        }
        .empty-icon { font-size: 44px; margin-bottom: 14px; opacity: .5; }
        .empty-text { font-size: 14px; margin-bottom: 6px; color: var(--txt); }
        .empty-sub  { font-size: 12px; }

        /* ══ 서비스 내역 ══════════════════════════════ */
        .health-bar-wrap {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 14px; padding: 18px 22px;
            display: flex; align-items: center; gap: 22px;
            margin-bottom: 24px;
        }
        .health-ring {
            position: relative; width: 72px; height: 72px; flex-shrink: 0;
        }
        .health-ring svg { transform: rotate(-90deg); }
        .health-score {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; font-weight: 800; color: var(--cyan);
        }
        .health-info .h-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .health-info .h-desc  { font-size: 12px; color: var(--txt2); line-height: 1.6; }
        .health-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .h-tag {
            font-size: 10.5px; padding: 3px 10px; border-radius: 12px;
            background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25);
            color: var(--green);
        }
        .h-tag.warn {
            background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25);
            color: var(--orange);
        }
        .history-card {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 16px;
            margin-bottom: 10px; transition: all .18s;
            display: flex; gap: 14px; align-items: flex-start;
        }
        .history-card:hover { border-color: rgba(0,229,255,.3); }
        .h-icon {
            width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
            background: linear-gradient(135deg,#10104a,#22226a);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
        }
        .h-content { flex: 1; }
        .h-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
        .h-svc   { font-size: 14px; font-weight: 600; }
        .h-badge {
            font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 700;
        }
        .badge-done    { background: rgba(16,185,129,.15); color: var(--green); }
        .badge-active  { background: rgba(0,229,255,.15); color: var(--cyan); }
        .badge-cancel  { background: rgba(239,68,68,.12); color: var(--red); }
        .h-partner { font-size: 12px; color: var(--txt2); margin-bottom: 5px; }
        .h-bottom  { display: flex; align-items: center; gap: 12px; }
        .h-date    { font-size: 11px; color: var(--txt2); }
        .h-price   { font-size: 13px; font-weight: 700; color: var(--cyan); margin-left: auto; }
        .h-stars   { color: var(--orange); font-size: 11px; }
        .h-rebtn {
            font-size: 11px; padding: 4px 10px;
            background: transparent; border: 1px solid var(--border);
            border-radius: 6px; color: var(--txt2);
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            transition: all .15s;
        }
        .h-rebtn:hover { border-color: var(--cyan); color: var(--cyan); }

        /* ══ 파트너 지도 ══════════════════════════════ */
        #page-map { position: relative; }
        .map-filter-bar {
            flex-shrink: 0; padding: 10px 18px;
            border-bottom: 1px solid var(--border);
            background: var(--bg2);
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .map-filter-label { font-size: 11px; color: var(--txt2); flex-shrink: 0; }
        .mf-chip {
            padding: 5px 12px; border-radius: 16px;
            border: 1px solid var(--border);
            font-size: 12px; color: var(--txt2);
            cursor: pointer; transition: all .15s;
            font-family: 'Noto Sans KR',sans-serif;
        }
        .mf-chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.08); }
        .map-main { flex: 1; position: relative; overflow: hidden; }
        #gmap { width: 100%; height: 100%; }
        #map-error {
            position: absolute; inset: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            background: var(--bg); gap: 14px; text-align: center; padding: 24px;
        }
        #map-error .err-icon { font-size: 40px; }
        #map-error .err-title { font-size: 15px; font-weight: 700; }
        #map-error .err-desc  { font-size: 12px; color: var(--txt2); line-height: 1.7; max-width: 320px; }
        #map-error code {
            background: rgba(0,229,255,.1); border: 1px solid var(--border);
            border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--cyan);
        }
        /* 파트너 커스텀 마커 라벨 */
        .gm-style .partner-label {
            background: rgba(6,6,22,.9);
            border: 1px solid rgba(0,229,255,.3);
            border-radius: 8px; padding: 5px 9px;
            font-size: 12px; font-weight: 600;
            color: #e2e8f0; white-space: nowrap;
            box-shadow: 0 2px 12px rgba(0,0,0,.4);
        }
        .map-legend {
            position: absolute; top: 12px; right: 12px;
            background: rgba(6,6,20,.88); border: 1px solid var(--border);
            border-radius: 10px; padding: 10px 14px; font-size: 11px;
        }
        .legend-item { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
        .legend-item:last-child { margin-bottom: 0; }
        .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .map-bottom-panel {
            flex-shrink: 0;
            background: var(--bg2); border-top: 1px solid var(--border);
            padding: 14px 20px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .map-selected-info { font-size: 13px; }
        .map-selected-name { font-weight: 600; margin-bottom: 2px; }
        .map-selected-meta { font-size: 11px; color: var(--txt2); }
        .map-connect-btn {
            padding: 8px 18px; background: var(--cyan);
            color: #04040f; border: none; border-radius: 8px;
            font-size: 12px; font-weight: 700; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif;
        }

        /* ══ 긴급 출동 ════════════════════════════════ */
        #page-sos .pg-header { border-bottom-color: rgba(239,68,68,.3); }
        /* ── 긴급출동 정보 바 */
        .sos-info-bar {
            display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
        }
        .sos-info-pill {
            background: rgba(0,229,255,.06); border: 1px solid var(--border);
            border-radius: 20px; padding: 6px 14px;
            font-size: 12px; color: var(--txt2);
            display: flex; align-items: center; gap: 5px;
        }
        .sos-info-pill strong { color: var(--cyan); }
        .sos-info-pill.warn  { border-color: rgba(245,158,11,.3); }
        .sos-info-pill.warn strong { color: var(--orange); }

        /* ── 알림 배너 — PanSol 글라스 스타일 */
        .sos-alert {
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border);
            border-left: 3px solid var(--red);
            border-radius: 12px;
            padding: 14px 18px; margin-bottom: 20px;
            display: flex; align-items: flex-start; gap: 14px;
        }
        .sos-alert-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; animation: blink 1.6s infinite; }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
        .sos-alert-text { font-size: 13px; line-height: 1.7; color: var(--txt2); }
        .sos-alert-text strong { color: var(--txt); }

        /* ── 카테고리 그리드 — 수리요청과 동일 톤앤매너 */
        .sos-cat-grid {
            display: grid; grid-template-columns: repeat(4,1fr); gap: 9px;
            margin-bottom: 20px;
        }
        .sos-cat {
            background: rgba(0,229,255,.04);
            border: 2px solid var(--border);
            border-radius: 13px; padding: 15px 8px;
            text-align: center; cursor: pointer;
            transition: all .18s; position: relative;
        }
        .sos-cat:hover {
            background: rgba(0,229,255,.09);
            border-color: rgba(0,229,255,.38);
            transform: translateY(-2px);
        }
        .sos-cat.selected {
            background: rgba(239,68,68,.09);
            border-color: var(--red);
            box-shadow: 0 0 16px rgba(239,68,68,.18);
        }
        .sos-cat-emoji { font-size: 26px; margin-bottom: 6px; line-height: 1; }
        .sos-cat-name  { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
        .sos-cat-desc  { font-size: 10px; color: var(--txt2); line-height: 1.4; }
        .sos-cat-check {
            position: absolute; top: 6px; right: 6px;
            width: 17px; height: 17px; border-radius: 50%;
            background: var(--red); color: #fff; font-size: 9px; font-weight: 900;
            display: none; align-items: center; justify-content: center;
        }
        .sos-cat.selected .sos-cat-check { display: flex; }

        /* ── 긴급도 선택 */
        .sos-urgency-row { display: flex; gap: 8px; margin-bottom: 18px; }
        .sos-urg-btn {
            flex: 1; border-radius: 11px; padding: 11px 8px;
            border: 1px solid var(--border);
            background: rgba(0,229,255,.04);
            text-align: center; cursor: pointer; transition: all .18s;
            font-family: 'Noto Sans KR',sans-serif;
        }
        .sos-urg-btn:hover { border-color: rgba(0,229,255,.3); background: rgba(0,229,255,.08); }
        .sos-urg-btn.active {
            border-color: var(--cyan); background: rgba(0,229,255,.1);
        }
        .sos-urg-icon { font-size: 20px; margin-bottom: 5px; }
        .sos-urg-name { font-size: 12.5px; font-weight: 700; }
        .sos-urg-sub  { font-size: 10px; color: var(--txt2); margin-top: 2px; }
        .sos-urg-btn.active .sos-urg-sub { color: rgba(0,229,255,.65); }

        /* ── 위치 박스 */
        .sos-loc-box {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 12px; padding: 13px 16px; margin-bottom: 16px;
            display: flex; align-items: center; gap: 10px;
        }
        .sos-loc-icon { font-size: 18px; flex-shrink: 0; }
        .sos-loc-detail { flex: 1; }
        .sos-loc-title { font-size: 10px; color: var(--txt2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
        .sos-loc-addr  { font-size: 13.5px; font-weight: 600; color: var(--txt); }

        /* ── 선택 미리보기 */
        .sos-sel-bar {
            display: none;
            background: rgba(239,68,68,.08);
            border: 1px solid rgba(239,68,68,.25);
            border-radius: 10px; padding: 10px 14px;
            margin-bottom: 14px;
            align-items: center; gap: 10px;
            font-size: 13px;
        }
        .sos-sel-bar.visible { display: flex; }
        .sos-sel-emoji { font-size: 20px; }
        .sos-sel-text  { flex: 1; font-weight: 600; }
        .sos-sel-urg   { font-size: 11px; color: var(--orange); border: 1px solid rgba(245,158,11,.3); border-radius: 6px; padding: 2px 8px; }

        /* ── 출동 버튼 */
        .sos-btn-wrap { text-align: center; }
        .sos-big-btn {
            width: 100%; padding: 18px;
            background: linear-gradient(135deg,#b91c1c,#ef4444);
            border: none; border-radius: 14px;
            color: #fff; font-size: 16px; font-weight: 800;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            letter-spacing: .5px; transition: all .2s;
            box-shadow: 0 4px 24px rgba(239,68,68,.3);
        }
        .sos-big-btn:not(:disabled):hover  { transform: scale(1.02); box-shadow: 0 6px 32px rgba(239,68,68,.45); }
        .sos-big-btn:active  { transform: scale(.98); }
        .sos-big-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

        /* ── 결과 섹션 */
        .sos-result { display: none; text-align: center; padding: 16px 0; }
        .sos-result-spinner {
            width: 52px; height: 52px;
            border: 3px solid rgba(239,68,68,.15);
            border-top-color: var(--red);
            border-radius: 50%; animation: spin .7s linear infinite;
            margin: 0 auto 14px;
        }
        /* 검색 단계 트래커 */
        .sos-find-steps {
            display: flex; align-items: center; justify-content: center;
            gap: 0; margin: 10px auto 0; max-width: 280px;
        }
        .sos-fs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .sos-fs-dot {
            width: 20px; height: 20px; border-radius: 50%;
            border: 2px solid var(--border); background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 9px; font-weight: 700; transition: all .3s;
        }
        .sos-fs-dot.done   { background: var(--green); border-color: var(--green); color: #04040f; }
        .sos-fs-dot.active { background: var(--cyan);  border-color: var(--cyan);  color: #04040f; animation: stPulse 1.4s infinite; }
        .sos-fs-label { font-size: 9.5px; color: var(--txt2); white-space: nowrap; }
        .sos-fs-label.active { color: var(--cyan); }
        .sos-fs-line { flex: 1; height: 2px; background: var(--border); margin-bottom: 14px; min-width: 20px; }
        .sos-fs-line.done { background: var(--green); }

        /* ── ETA 카드 */
        .sos-eta-card {
            background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.28);
            border-radius: 16px; padding: 22px 20px; margin-top: 16px; display: none;
        }
        .sos-eta-num   { font-size: 52px; font-weight: 900; color: var(--green); line-height: 1; }
        .sos-eta-label { font-size: 13px; color: var(--txt2); margin-top: 4px; }
        .sos-eta-partner {
            display: flex; align-items: center; gap: 12px;
            margin-top: 16px; padding-top: 14px;
            border-top: 1px solid rgba(16,185,129,.18);
            text-align: left;
        }
        .sos-eta-ava {
            width: 42px; height: 42px; border-radius: 50%;
            background: linear-gradient(135deg,#10104a,#22226a);
            border: 2px solid rgba(16,185,129,.3);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }
        .sos-eta-p-name  { font-size: 14px; font-weight: 700; }
        .sos-eta-p-meta  { font-size: 11px; color: var(--txt2); margin-top: 2px; }
        .sos-eta-track {
            display: flex; align-items: center; justify-content: center;
            gap: 0; margin-top: 16px;
        }
        .sos-trk-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
        .sos-trk-dot  {
            width: 22px; height: 22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
        }
        .sos-trk-dot.done   { background: var(--green); color: #04040f; }
        .sos-trk-dot.active { background: var(--cyan);  color: #04040f; animation: stPulse 1.4s infinite; }
        .sos-trk-dot.wait   { border: 2px solid var(--border); color: var(--txt2); }
        .sos-trk-lbl  { font-size: 9.5px; color: var(--txt2); }
        .sos-trk-lbl.active { color: var(--cyan); }
        .sos-trk-line { flex: 1; height: 2px; background: var(--border); margin-bottom: 14px; min-width: 24px; }
        .sos-trk-line.done  { background: var(--green); }
        .sos-eta-recall {
            width: 100%; margin-top: 14px; padding: 11px;
            background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
            border-radius: 10px; color: var(--green);
            font-size: 13px; font-weight: 700; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif; transition: all .18s;
        }
        .sos-eta-recall:hover { background: rgba(16,185,129,.2); }

        @media (max-width: 768px) {
            .sos-cat-grid  { grid-template-columns: repeat(3,1fr); gap: 8px; }
            .sos-cat       { padding: 12px 6px; }
            .sos-cat-emoji { font-size: 22px; }
            .sos-cat-desc  { display: none; }
        }
        @media (max-width: 420px) {
            .sos-cat-grid { grid-template-columns: repeat(2,1fr); }
        }

        /* ══ 정기 케어 ════════════════════════════════ */
        .care-plan-current {
            background: linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,58,237,.08));
            border: 1px solid var(--border); border-radius: 14px;
            padding: 18px 22px; margin-bottom: 24px;
            display: flex; align-items: center; gap: 16px;
        }
        .care-plan-icon { font-size: 32px; }
        .care-plan-name { font-size: 16px; font-weight: 700; }
        .care-plan-status { font-size: 12px; color: var(--green); margin-top: 3px; }
        .care-tier-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
            margin-bottom: 28px;
        }
        .tier-card {
            background: rgba(0,229,255,.03);
            border: 1px solid var(--border);
            border-radius: 14px; padding: 20px 16px;
            text-align: center; cursor: pointer;
            transition: all .18s; position: relative;
        }
        .tier-card:hover { border-color: rgba(0,229,255,.3); transform: translateY(-3px); }
        .tier-card.popular {
            border-color: var(--cyan);
            background: rgba(0,229,255,.06);
        }
        .tier-popular-badge {
            position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            background: var(--cyan); color: #04040f;
            font-size: 9px; font-weight: 800; padding: 3px 10px; border-radius: 10px;
            letter-spacing: .5px;
        }
        .tier-name  { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
        .tier-price {
            font-size: 22px; font-weight: 800;
            color: var(--cyan); margin: 10px 0 4px;
        }
        .tier-price span { font-size: 13px; font-weight: 400; color: var(--txt2); }
        .tier-desc { font-size: 11.5px; color: var(--txt2); line-height: 1.5; }
        .tier-features { text-align: left; margin-top: 14px; }
        .tier-feat {
            font-size: 12px; padding: 4px 0;
            display: flex; align-items: center; gap: 7px; color: var(--txt2);
        }
        .tier-feat.yes { color: var(--txt); }
        .tier-feat .chk { color: var(--green); font-weight: 700; }
        .tier-feat .no  { color: var(--txt2); opacity:.4; }
        .tier-btn {
            width: 100%; margin-top: 16px; padding: 9px;
            border: 1px solid var(--border); border-radius: 8px;
            background: transparent; color: var(--txt);
            font-size: 12.5px; font-weight: 600;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            transition: all .18s;
        }
        .tier-card.popular .tier-btn {
            background: var(--cyan); color: #04040f; border-color: var(--cyan);
        }
        .care-schedule {
            display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
        }
        .sched-card {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 10px; padding: 12px; text-align: center;
        }
        .sched-month { font-size: 10px; color: var(--txt2); margin-bottom: 4px; }
        .sched-icon  { font-size: 22px; margin-bottom: 5px; }
        .sched-name  { font-size: 11.5px; font-weight: 600; }
        .sched-date  { font-size: 10px; color: var(--cyan); margin-top: 3px; }

        /* ══ 업체 등록 ════════════════════════════════ */
        .partner-benefit-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
            margin-bottom: 26px;
        }
        .benefit-card {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 12px; padding: 16px; text-align: center;
        }
        .benefit-icon { font-size: 26px; margin-bottom: 8px; }
        .benefit-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .benefit-desc { font-size: 11px; color: var(--txt2); line-height: 1.5; }
        .reg-step-bar {
            display: flex; align-items: center; gap: 0;
            margin-bottom: 24px;
        }
        .reg-si {
            display: flex; align-items: center; gap: 7px;
            font-size: 12px; color: var(--txt2);
        }
        .reg-si.active { color: var(--cyan); }
        .reg-si.done   { color: var(--green); }
        .reg-num {
            width: 22px; height: 22px; border-radius: 50%;
            background: rgba(255,255,255,.06); border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 700;
        }
        .reg-si.active .reg-num { background: var(--cyan); color: #04040f; border-color: var(--cyan); }
        .reg-si.done   .reg-num { background: var(--green); color: #04040f; border-color: var(--green); }
        .reg-sep { flex: 1; height: 1px; background: var(--border); margin: 0 10px; }
        .radius-preview {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 12px; height: 180px;
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
            margin-bottom: 12px;
        }
        .radius-dot { width: 12px; height: 12px; background: var(--cyan); border-radius: 50%; z-index:2; }
        .radius-ring {
            position: absolute; border-radius: 50%;
            border: 1px solid rgba(0,229,255,.25);
            background: rgba(0,229,255,.04);
        }
        .range-row { display: flex; align-items: center; gap: 12px; }
        .range-input {
            flex: 1; -webkit-appearance: none; height: 4px;
            background: linear-gradient(to right, var(--cyan) 50%, rgba(0,229,255,.2) 50%);
            border-radius: 2px; outline: none;
        }
        .range-input::-webkit-slider-thumb {
            -webkit-appearance: none; width: 16px; height: 16px;
            background: var(--cyan); border-radius: 50%; cursor: pointer;
        }
        .range-val { font-size: 13px; font-weight: 700; color: var(--cyan); width: 48px; }

        /* ══ 내 정보 ══════════════════════════════════ */
        .profile-header {
            background: linear-gradient(135deg,rgba(0,229,255,.07),rgba(124,58,237,.07));
            border: 1px solid var(--border); border-radius: 14px;
            padding: 22px; margin-bottom: 22px;
            display: flex; align-items: center; gap: 18px;
        }
        .profile-ava {
            width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; cursor: pointer;
            border: 3px solid rgba(0,229,255,.3);
        }
        .profile-info .p-name-big { font-size: 20px; font-weight: 700; }
        .profile-info .p-level {
            display: inline-block; margin-top: 5px;
            background: rgba(0,229,255,.12); border: 1px solid rgba(0,229,255,.3);
            color: var(--cyan); font-size: 11px; font-weight: 700;
            padding: 3px 10px; border-radius: 10px;
        }
        .profile-info .p-since { font-size: 11px; color: var(--txt2); margin-top: 5px; }
        .profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

        /* ══ 설정 ════════════════════════════════════ */
        .settings-group {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 12px; overflow: hidden; margin-bottom: 18px;
        }
        .settings-item {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 18px; border-bottom: 1px solid var(--border);
            transition: background .15s;
        }
        .settings-item:last-child { border-bottom: none; }
        .settings-item:hover { background: rgba(0,229,255,.04); }
        .settings-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink:0; }
        .settings-info { flex: 1; }
        .settings-name { font-size: 13.5px; font-weight: 500; }
        .settings-desc { font-size: 11px; color: var(--txt2); margin-top: 1px; }
        .toggle {
            width: 42px; height: 24px; border-radius: 12px;
            background: rgba(255,255,255,.1); border: none;
            position: relative; cursor: pointer; transition: background .2s;
            flex-shrink: 0;
        }
        .toggle.on { background: var(--cyan); }
        .toggle::after {
            content: ''; position: absolute;
            width: 18px; height: 18px; border-radius: 50%;
            background: #fff; top: 3px; left: 3px;
            transition: transform .2s;
        }
        .toggle.on::after { transform: translateX(18px); }
        .settings-arrow { color: var(--txt2); font-size: 14px; }
        .danger-btn {
            width: 100%; padding: 12px;
            background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
            border-radius: 10px; color: var(--red);
            font-size: 13.5px; font-weight: 600;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            transition: all .18s; margin-top: 8px;
        }
        .danger-btn:hover { background: rgba(239,68,68,.14); }

        /* ══ 서비스 내역 추가 스타일 ═════════════════ */
        /* 검색/필터 바 */
        .hist-tool-bar {
            display: flex; gap: 8px; align-items: center;
            margin-bottom: 18px; flex-wrap: wrap;
        }
        .hist-search {
            flex: 1; min-width: 160px;
            background: rgba(0,229,255,.05);
            border: 1px solid var(--border); border-radius: 10px;
            padding: 8px 14px; color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR',sans-serif; outline: none;
            transition: border-color .18s;
        }
        .hist-search:focus { border-color: rgba(0,229,255,.38); }
        .hist-search::placeholder { color: var(--txt2); }
        .period-chip {
            padding: 7px 13px; border-radius: 8px;
            border: 1px solid var(--border);
            font-size: 12px; color: var(--txt2);
            cursor: pointer; transition: all .15s;
            white-space: nowrap;
            font-family: 'Noto Sans KR',sans-serif;
        }
        .period-chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.09); }

        /* 월별 지출 차트 */
        .monthly-chart-wrap {
            background: rgba(0,229,255,.03);
            border: 1px solid var(--border);
            border-radius: 14px; padding: 16px 18px;
            margin-bottom: 20px;
        }
        .chart-title {
            font-size: 12px; color: var(--txt2);
            text-transform: uppercase; letter-spacing: .8px;
            margin-bottom: 14px;
        }
        .chart-bars {
            display: flex; align-items: flex-end;
            gap: 6px; height: 80px;
        }
        .chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .chart-bar {
            width: 100%; border-radius: 4px 4px 0 0;
            background: linear-gradient(to top, var(--cyan), rgba(0,229,255,.4));
            transition: height .4s ease; position: relative; cursor: pointer;
        }
        .chart-bar:hover { filter: brightness(1.3); }
        .chart-bar.zero { background: rgba(0,229,255,.1); }
        .chart-lbl { font-size: 10px; color: var(--txt2); }

        /* 카테고리 분포 */
        .cat-dist-wrap {
            background: rgba(0,229,255,.03);
            border: 1px solid var(--border);
            border-radius: 14px; padding: 16px 18px;
            margin-bottom: 20px;
        }
        .cat-dist-row {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 8px;
        }
        .cat-dist-row:last-child { margin-bottom: 0; }
        .cat-dist-name { font-size: 12px; width: 80px; flex-shrink: 0; color: var(--txt2); }
        .cat-dist-bar-bg {
            flex: 1; height: 8px; border-radius: 4px;
            background: rgba(255,255,255,.06);
        }
        .cat-dist-bar {
            height: 100%; border-radius: 4px;
            background: linear-gradient(to right, var(--cyan), var(--purple));
            transition: width .5s ease;
        }
        .cat-dist-pct { font-size: 11px; color: var(--cyan); width: 32px; text-align: right; flex-shrink: 0; }

        /* 진행중 상태 트래커 */
        .status-tracker {
            display: flex; align-items: center;
            gap: 0; margin: 10px 0 4px;
        }
        .st-step {
            display: flex; flex-direction: column; align-items: center; gap: 3px;
        }
        .st-dot {
            width: 18px; height: 18px; border-radius: 50%;
            border: 2px solid var(--border);
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 9px; font-weight: 700;
        }
        .st-dot.done   { background: var(--green);   border-color: var(--green); color: #04040f; }
        .st-dot.active { background: var(--cyan);    border-color: var(--cyan);  color: #04040f; animation: stPulse 1.4s infinite; }
        .st-dot.wait   { border-color: var(--border); color: var(--txt2); }
        @keyframes stPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.4)} 50%{box-shadow:0 0 0 5px rgba(0,229,255,0)} }
        .st-label { font-size: 9px; color: var(--txt2); white-space: nowrap; }
        .st-label.active { color: var(--cyan); }
        .st-line {
            flex: 1; height: 2px; margin-bottom: 12px;
            background: var(--border);
        }
        .st-line.done { background: var(--green); }

        /* 히스토리 카드 버튼 그룹 */
        .h-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
        .h-action-btn {
            font-size: 11px; padding: 5px 11px;
            border-radius: 6px; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif;
            transition: all .15s;
        }
        .h-action-btn.primary {
            background: var(--cyan); color: #04040f;
            border: none; font-weight: 700;
        }
        .h-action-btn.secondary {
            background: transparent; border: 1px solid var(--border); color: var(--txt2);
        }
        .h-action-btn.secondary:hover { border-color: var(--cyan); color: var(--cyan); }
        .h-action-btn.warn {
            background: transparent; border: 1px solid rgba(245,158,11,.35); color: var(--orange);
        }
        .star-display { color: var(--orange); font-size: 12px; letter-spacing: 1px; }

        /* 모달 공통 */
        .modal-overlay {
            display: none;
            position: fixed; inset: 0; z-index: 500;
            background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
            align-items: center; justify-content: center;
            padding: 20px;
        }
        .modal-overlay.show { display: flex; }
        .modal-box {
            background: #0c0c28; border: 1px solid var(--border);
            border-radius: 16px; width: 100%; max-width: 480px;
            max-height: 88vh; overflow-y: auto;
            animation: modalIn .22s ease;
        }
        .modal-box::-webkit-scrollbar { width: 3px; }
        .modal-box::-webkit-scrollbar-thumb { background: var(--border); border-radius:2px; }
        @keyframes modalIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        .modal-header {
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .modal-title { font-size: 16px; font-weight: 700; }
        .modal-close {
            width: 30px; height: 30px; border-radius: 50%;
            background: rgba(255,255,255,.06); border: none;
            color: var(--txt2); font-size: 16px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all .15s;
        }
        .modal-close:hover { background: rgba(255,255,255,.12); color: var(--txt); }
        .modal-body { padding: 18px 20px; }

        /* 상세보기 모달 */
        .detail-row {
            display: flex; justify-content: space-between; align-items: flex-start;
            padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
        }
        .detail-row:last-child { border-bottom: none; }
        .detail-key   { font-size: 12px; color: var(--txt2); }
        .detail-val   { font-size: 13px; font-weight: 500; text-align: right; max-width: 60%; }
        .cost-box {
            background: rgba(0,229,255,.05); border: 1px solid var(--border);
            border-radius: 10px; padding: 14px 16px; margin-top: 14px;
        }
        .cost-row {
            display: flex; justify-content: space-between;
            font-size: 12.5px; padding: 4px 0; color: var(--txt2);
        }
        .cost-row.total {
            border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px;
            font-size: 15px; font-weight: 700; color: var(--cyan);
        }

        /* 리뷰 모달 */
        .star-picker { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
        .star-btn {
            font-size: 28px; cursor: pointer; transition: transform .15s;
            background: none; border: none; line-height: 1;
        }
        .star-btn:hover { transform: scale(1.2); }
        .star-btn.lit  { filter: brightness(1); }
        .star-btn.dim  { filter: grayscale(1) brightness(.5); }
        .review-textarea {
            width: 100%;
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border); border-radius: 10px;
            padding: 11px 14px; color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR',sans-serif;
            resize: vertical; min-height: 90px; outline: none;
            transition: border-color .18s;
        }
        .review-textarea:focus { border-color: rgba(0,229,255,.38); }
        .review-textarea::placeholder { color: var(--txt2); }

        @media (max-width: 768px) {
            .hist-tool-bar { gap: 6px; }
            .monthly-chart-wrap, .cat-dist-wrap { padding: 12px 14px; }
            .cat-dist-name { width: 60px; font-size: 11px; }
            .modal-box { max-width: 100%; margin: 0; border-radius: 14px; }
        }

        /* ══ 데스크탑 상단 바 ════════════════════════ */
        #desktop-top-bar {
            display: flex; align-items: center; gap: 14px;
            padding: 0 20px; height: 54px; flex-shrink: 0;
            background: var(--bg2);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(16px);
            z-index: 50; position: relative;
        }

        /* 로고 */
        .dtb-logo {
            display: flex; align-items: center; gap: 8px;
            cursor: pointer; flex-shrink: 0; user-select: none;
        }
        .dtb-logo-img { width: 32px; height: 32px; border-radius: 8px; }
        .dtb-logo-name {
            font-size: 17px; font-weight: 800; letter-spacing: -.5px;
            background: linear-gradient(135deg, var(--cyan) 30%, #fff);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        body.light-mode .dtb-logo-name {
            background: linear-gradient(135deg, #0077aa, #1a2840);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }

        /* 검색창 */
        .dtb-search-wrap { flex: 1; max-width: 480px; }
        .dtb-search-input {
            width: 100%; height: 36px;
            background: rgba(0,229,255,.06); border: 1px solid var(--border);
            border-radius: 20px; padding: 0 16px;
            color: var(--txt); font-size: 13px;
            font-family: 'Noto Sans KR', sans-serif; outline: none;
            transition: all .18s;
        }
        .dtb-search-input:focus {
            border-color: rgba(0,229,255,.45);
            background: rgba(0,229,255,.1);
        }
        .dtb-search-input::placeholder { color: var(--txt2); }
        body.light-mode .dtb-search-input { background: rgba(255,255,255,.7); }

        /* 우측 액션 그룹 */
        .dtb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
        .dtb-action-btn {
            height: 34px; padding: 0 14px; border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(0,229,255,.07); color: var(--txt);
            font-size: 12.5px; font-weight: 700; cursor: pointer;
            font-family: 'Noto Sans KR', sans-serif; transition: all .18s;
            white-space: nowrap;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .dtb-action-btn:hover { background: rgba(0,229,255,.15); }
        .dtb-action-btn.sos {
            background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3);
            color: var(--red);
        }
        .dtb-action-btn.sos:hover { background: rgba(239,68,68,.22); }

        /* 테마 버튼 */
        /* 전체화면 버튼 */
        .dtb-fullscreen-btn {
            width: 36px; height: 36px; border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(0,229,255,.07);
            font-size: 20px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all .18s; color: var(--txt);
        }
        .dtb-fullscreen-btn:hover {
            background: rgba(0,229,255,.16);
            transform: scale(1.08);
            color: var(--cyan);
        }
        /* 전체화면 활성 상태 */
        .dtb-fullscreen-btn.active {
            background: rgba(0,229,255,.18);
            border-color: rgba(0,229,255,.45);
            color: var(--cyan);
        }

        .dtb-theme-btn {
            width: 36px; height: 36px; border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(0,229,255,.07); font-size: 18px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all .18s;
        }
        .dtb-theme-btn:hover { background: rgba(0,229,255,.16); transform: scale(1.08); }

        /* 유저 영역 */
        .dtb-user-area {
            display: flex; align-items: center; gap: 7px;
            height: 36px; padding: 0 10px; border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(0,229,255,.05);
            cursor: pointer; transition: all .18s;
        }
        .dtb-user-area:hover { background: rgba(0,229,255,.12); }
        .dtb-ava {
            width: 26px; height: 26px; border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; flex-shrink: 0; overflow: hidden;
        }
        .dtb-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        .dtb-user-name { font-size: 12.5px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* 모바일에서 데스크탑 바 숨김 */
        @media (max-width: 768px) { #desktop-top-bar { display: none; } }

        /* 라이트 모드 데스크탑 바 */
        body.light-mode #desktop-top-bar { background: rgba(240,246,255,.98); }

        /* ── 사이드바 구분선 */
        .nav-divider {
            height: 1px;
            background: var(--border);
            margin: 8px 14px;
        }

        /* ══ 협력업체 광고 페이지 ════════════════════ */
        .ads-hero {
            background: linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,58,237,.06));
            border: 1px solid var(--border); border-radius: 16px;
            padding: 24px 22px; margin-bottom: 24px;
        }
        .ads-hero-badge {
            display: inline-block; font-size: 11px; font-weight: 700;
            background: rgba(0,229,255,.12); color: var(--cyan);
            border: 1px solid rgba(0,229,255,.28); border-radius: 20px;
            padding: 3px 12px; margin-bottom: 12px;
        }
        .ads-hero-title { font-size: 22px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
        .ads-hero-sub   { font-size: 13px; color: var(--txt2); line-height: 1.7; margin-bottom: 18px; }
        .ads-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; }
        .ads-stat-item  { text-align: center; }
        .ads-stat-val   { font-size: 18px; font-weight: 800; color: var(--cyan); }
        .ads-stat-lbl   { font-size: 10px; color: var(--txt2); margin-top: 2px; }

        .ads-package-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
            margin-bottom: 28px;
        }
        .ads-pkg-card {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; padding: 20px 16px;
            text-align: center; position: relative;
        }
        .ads-pkg-card.popular {
            border-color: var(--cyan); background: rgba(0,229,255,.06);
        }
        .ads-pkg-popular-badge {
            position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            background: var(--cyan); color: #04040f;
            font-size: 9px; font-weight: 800; padding: 3px 10px; border-radius: 10px;
        }
        .ads-pkg-icon  { font-size: 28px; margin-bottom: 8px; }
        .ads-pkg-name  { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .ads-pkg-price { font-size: 18px; font-weight: 800; color: var(--cyan); margin: 8px 0 12px; }
        .ads-pkg-features { text-align: left; margin-bottom: 16px; }
        .ads-pkg-feat { font-size: 12px; padding: 3px 0; color: var(--txt2); }
        .ads-pkg-feat.dim { opacity: .45; }
        .ads-pkg-btn {
            width: 100%; padding: 9px; border-radius: 8px; cursor: pointer;
            font-size: 13px; font-weight: 600;
            font-family: 'Noto Sans KR',sans-serif; transition: all .18s;
            background: transparent; border: 1px solid var(--border); color: var(--txt);
        }
        .ads-pkg-btn:hover { background: rgba(255,255,255,.06); }
        .ads-pkg-btn.primary {
            background: var(--cyan); color: #04040f; border-color: var(--cyan);
        }
        .ads-pkg-btn.primary:hover { filter: brightness(1.1); }

        .ads-banner-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
        .ads-banner-card {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-left: 3px solid var(--ads-color, var(--cyan));
            border-radius: 12px; padding: 14px 16px;
            display: flex; align-items: center; gap: 14px;
        }
        .ads-banner-logo { font-size: 28px; flex-shrink: 0; }
        .ads-banner-info { flex: 1; min-width: 0; }
        .ads-banner-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
        .ads-banner-desc { font-size: 12px; color: var(--txt2); }
        .ads-banner-tag  {
            display: inline-block; margin-top: 5px; font-size: 10px;
            background: rgba(0,229,255,.1); color: var(--cyan);
            border: 1px solid rgba(0,229,255,.22); border-radius: 8px; padding: 2px 8px;
        }
        .ads-banner-cta {
            flex-shrink: 0; padding: 7px 13px;
            background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.25);
            border-radius: 8px; color: var(--cyan); font-size: 12px; font-weight: 600;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            white-space: nowrap; transition: all .15s;
        }
        .ads-banner-cta:hover { background: rgba(0,229,255,.15); }

        .ads-effect-box {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 14px; padding: 18px 20px;
        }
        .ads-effect-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
        .ads-effect-grid  { display: flex; gap: 0; }
        .ads-effect-item  { flex: 1; text-align: center; padding: 0 10px; border-right: 1px solid var(--border); }
        .ads-effect-item:last-child { border-right: none; }
        .ads-effect-num   { font-size: 22px; font-weight: 800; color: var(--cyan); }
        .ads-effect-lbl   { font-size: 11px; color: var(--txt2); margin-top: 3px; }

        /* ══ 쇼핑몰 페이지 ══════════════════════════ */
        .shop-cart-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 7px 14px; border-radius: 10px;
            background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.25);
            color: var(--cyan); font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            position: relative; transition: all .18s;
        }
        .shop-cart-btn:hover { background: rgba(0,229,255,.15); }
        .shop-cart-badge {
            background: var(--red); color: #fff;
            font-size: 10px; font-weight: 800;
            min-width: 18px; height: 18px; border-radius: 9px;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0 4px;
        }
        .shop-search-bar { margin-bottom: 12px; }
        .shop-cat-chips {
            display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px;
        }
        .shop-chip {
            padding: 6px 13px; border-radius: 20px;
            border: 1px solid var(--border);
            font-size: 12px; color: var(--txt2);
            cursor: pointer; transition: all .15s;
            font-family: 'Noto Sans KR',sans-serif;
        }
        .shop-chip.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.09); }
        .shop-chip:hover  { border-color: rgba(0,229,255,.3); color: var(--txt); }

        .shop-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
        }
        .shop-card {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden; transition: all .18s;
        }
        .shop-card:hover { border-color: rgba(0,229,255,.3); transform: translateY(-2px); }
        .shop-thumb {
            width: 100%; aspect-ratio: 1;
            background: linear-gradient(135deg,#0d1b3e,#060618);
            display: flex; align-items: center; justify-content: center;
            font-size: 52px; border-bottom: 1px solid var(--border);
            position: relative;
        }
        .shop-cat-tag {
            position: absolute; top: 8px; left: 8px;
            font-size: 10px; font-weight: 700; padding: 2px 8px;
            border-radius: 8px; background: rgba(0,229,255,.15);
            color: var(--cyan); border: 1px solid rgba(0,229,255,.25);
        }
        .shop-card-body { padding: 12px; }
        .shop-card-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; line-height: 1.4; }
        .shop-card-desc { font-size: 11px; color: var(--txt2); margin-bottom: 10px; line-height: 1.5; }
        .shop-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .shop-price      { font-size: 15px; font-weight: 800; color: var(--cyan); }
        .shop-add-btn {
            padding: 6px 12px; border-radius: 8px;
            background: var(--cyan); color: #04040f;
            border: none; font-size: 11.5px; font-weight: 700;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            transition: all .18s; white-space: nowrap;
        }
        .shop-add-btn:hover { filter: brightness(1.1); }
        .shop-add-btn.added {
            background: var(--green); color: #04040f;
        }

        /* 장바구니 패널 */
        #cart-panel {
            position: fixed; right: -320px; top: 0; bottom: 0; width: 300px;
            background: rgba(8,8,28,.97); border-left: 1px solid var(--border);
            z-index: 801; transition: right .28s cubic-bezier(.4,0,.2,1);
            display: flex; flex-direction: column;
            backdrop-filter: blur(20px);
        }
        #cart-panel.open { right: 0; }
        .cart-header {
            padding: 16px 18px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .cart-title { font-size: 15px; font-weight: 700; }
        .cart-close {
            width: 28px; height: 28px; border-radius: 50%;
            background: rgba(255,255,255,.07); border: none;
            color: var(--txt); font-size: 14px; cursor: pointer; transition: all .15s;
        }
        .cart-close:hover { background: rgba(255,255,255,.14); }
        .cart-items { flex: 1; overflow-y: auto; padding: 12px; }
        .cart-items::-webkit-scrollbar { width: 3px; }
        .cart-items::-webkit-scrollbar-thumb { background: var(--border); border-radius:2px; }
        .cart-empty { text-align: center; padding: 40px 20px; }
        .cart-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
        }
        .cart-item:last-child { border-bottom: none; }
        .cart-item-emoji { font-size: 24px; flex-shrink: 0; }
        .cart-item-info  { flex: 1; min-width: 0; }
        .cart-item-name  { font-size: 12.5px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cart-item-price { font-size: 11px; color: var(--cyan); font-weight: 700; margin-top: 2px; }
        .cart-item-qty   {
            display: flex; align-items: center; gap: 6px; flex-shrink: 0;
        }
        .qty-btn {
            width: 22px; height: 22px; border-radius: 50%;
            background: rgba(255,255,255,.08); border: none;
            color: var(--txt); font-size: 14px; cursor: pointer; line-height: 1;
            transition: all .15s;
        }
        .qty-btn:hover { background: rgba(0,229,255,.2); color: var(--cyan); }
        .qty-num { font-size: 12px; font-weight: 700; min-width: 16px; text-align: center; }
        .cart-footer { padding: 14px 16px; border-top: 1px solid var(--border); }
        .cart-total-row { display: flex; justify-content: space-between; font-size: 14px; }
        .cart-total-val { font-size: 18px; font-weight: 800; color: var(--cyan); }

        @media (max-width: 768px) {
            .ads-package-grid { grid-template-columns: 1fr; }
            .ads-hero-stats   { gap: 12px; }
            .shop-grid        { grid-template-columns: repeat(2,1fr); gap: 10px; }
            .ads-banner-card  { flex-wrap: wrap; }
            .ads-banner-cta   { width: 100%; }
            .ads-effect-grid  { flex-direction: column; gap: 10px; }
            .ads-effect-item  { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
            .ads-effect-item:last-child { border-bottom: none; }
            #cart-panel { width: 100%; right: -100%; }
        }
        @media (max-width: 420px) {
            .shop-grid { grid-template-columns: 1fr; }
        }

        /* ── 추천 코드 카드 */
        .ref-code-card {
            background: linear-gradient(135deg,rgba(0,229,255,.06),rgba(124,58,237,.05));
            border: 1px solid rgba(0,229,255,.22);
            border-radius: 14px; padding: 18px 18px 14px;
            margin-bottom: 20px;
        }
        .ref-code-top {
            display: flex; align-items: center;
            justify-content: space-between; gap: 12px;
            margin-bottom: 10px;
        }
        .ref-code-label {
            font-size: 11px; font-weight: 700; color: var(--txt2);
            letter-spacing: .8px; text-transform: uppercase;
            margin-bottom: 5px;
        }
        .ref-code-value {
            font-size: 22px; font-weight: 900; color: var(--cyan);
            letter-spacing: 2px; font-family: 'JetBrains Mono', monospace, sans-serif;
        }
        .ref-copy-btn {
            padding: 8px 14px; border-radius: 9px;
            background: rgba(0,229,255,.1);
            border: 1px solid rgba(0,229,255,.25);
            color: var(--cyan); font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: 'Noto Sans KR',sans-serif;
            white-space: nowrap; transition: all .18s; flex-shrink: 0;
        }
        .ref-copy-btn:hover { background: rgba(0,229,255,.18); }
        .ref-code-desc {
            font-size: 12.5px; color: var(--txt2); line-height: 1.65;
            margin-bottom: 12px; word-break: keep-all;
        }
        .ref-code-desc strong { color: var(--cyan); }
        .ref-share-row {
            display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
        }
        .ref-share-btn {
            flex: 1; min-width: 80px; padding: 9px 8px;
            border-radius: 9px; border: none;
            font-size: 12px; font-weight: 700; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif;
            transition: all .18s;
        }
        .ref-share-btn.kakao { background: #fee500; color: #3a1d1d; }
        .ref-share-btn.sms   { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
        .ref-share-btn.link  { background: rgba(0,229,255,.08); color: var(--cyan); border: 1px solid rgba(0,229,255,.22); }
        .ref-share-btn:hover { filter: brightness(1.1); }
        .ref-stats-row {
            display: flex; gap: 0;
            border-top: 1px solid rgba(0,229,255,.12); padding-top: 12px;
        }
        .ref-stat {
            flex: 1; text-align: center;
            border-right: 1px solid rgba(0,229,255,.1);
        }
        .ref-stat:last-child { border-right: none; }
        .ref-stat .rs-val {
            display: block; font-size: 18px; font-weight: 900;
            color: var(--cyan); line-height: 1;
        }
        .ref-stat .rs-lbl {
            display: block; font-size: 10px; color: var(--txt2); margin-top: 3px;
        }

        /* ══ 내 정보 페이지 ═════════════════════════ */
        /* 프로필 헤더 */
        .profile-header {
            background: linear-gradient(135deg,rgba(0,229,255,.07),rgba(124,58,237,.07));
            border: 1px solid var(--border); border-radius: 16px;
            padding: 22px; margin-bottom: 20px;
        }
        .profile-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
        .profile-ava {
            width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 26px; cursor: pointer;
            border: 3px solid rgba(0,229,255,.3); overflow: hidden;
        }
        .profile-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .profile-meta { flex: 1; min-width: 0; }
        .p-name-big   { font-size: 19px; font-weight: 700; }
        .p-email      { font-size: 12px; color: var(--txt2); margin-top: 2px; }
        .p-badges     { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
        .p-badge {
            font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
        }
        .pb-customer { background: rgba(0,229,255,.12); color: var(--cyan); border: 1px solid rgba(0,229,255,.28); }
        .pb-partner  { background: rgba(16,185,129,.12); color: var(--green); border: 1px solid rgba(16,185,129,.28); }
        .pb-beta     { background: rgba(124,58,237,.15); color: #a78bfa; border: 1px solid rgba(124,58,237,.3); }
        .p-login-row {
            display: flex; align-items: center; gap: 8px;
            font-size: 11.5px; color: var(--txt2);
            padding-top: 12px; border-top: 1px solid var(--border);
        }
        .p-login-row strong { color: var(--txt); }
        .p-login-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }

        /* 계정 유형 탭 */
        .pf-type-bar {
            display: flex; gap: 0; margin-bottom: 22px;
            background: rgba(0,229,255,.04);
            border: 1px solid var(--border); border-radius: 12px;
            padding: 4px; overflow: hidden;
        }
        .pf-type-tab {
            flex: 1; padding: 10px 12px; border-radius: 9px;
            text-align: center; cursor: pointer; transition: all .2s;
            font-size: 13px; font-weight: 600; color: var(--txt2);
            display: flex; align-items: center; justify-content: center; gap: 7px;
        }
        .pf-type-tab.active {
            background: rgba(0,229,255,.14);
            color: var(--cyan); box-shadow: 0 1px 8px rgba(0,229,255,.15);
        }
        .pf-type-tab.partner-tab.active {
            background: rgba(16,185,129,.14); color: var(--green);
            box-shadow: 0 1px 8px rgba(16,185,129,.15);
        }
        .pf-tab-icon { font-size: 16px; }

        /* 섹션 내용 */
        .pf-section { display: none; }
        .pf-section.active { display: block; }

        /* 고객 — 멤버십 카드 */
        .membership-card {
            background: linear-gradient(135deg,rgba(0,229,255,.07),rgba(124,58,237,.06));
            border: 1px solid var(--border); border-radius: 14px;
            padding: 16px 18px; margin-bottom: 20px;
            display: flex; align-items: center; gap: 16px;
        }
        .mc-icon { font-size: 30px; }
        .mc-plan { font-size: 15px; font-weight: 700; }
        .mc-desc { font-size: 11.5px; color: var(--txt2); margin-top: 3px; }
        .mc-badge {
            margin-left: auto;
            background: rgba(0,229,255,.1); color: var(--cyan);
            border: 1px solid rgba(0,229,255,.25);
            font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 8px;
            white-space: nowrap;
        }

        /* 고객 — 결제 수단 */
        .payment-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
        }
        .payment-item:last-child { border-bottom: none; }
        .pay-icon  { font-size: 22px; width: 28px; text-align: center; flex-shrink: 0; }
        .pay-info  { flex: 1; }
        .pay-name  { font-size: 13.5px; font-weight: 500; }
        .pay-sub   { font-size: 11px; color: var(--txt2); margin-top: 1px; }
        .pay-badge { font-size: 10px; background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.28); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
        .pay-add-btn {
            width: 100%; padding: 11px;
            background: rgba(0,229,255,.05); border: 1px dashed rgba(0,229,255,.25);
            border-radius: 10px; color: var(--txt2);
            font-size: 12.5px; cursor: pointer; transition: all .18s;
            font-family: 'Noto Sans KR',sans-serif;
        }
        .pay-add-btn:hover { background: rgba(0,229,255,.1); color: var(--cyan); }

        /* 파트너 — 영업 상태 */
        .partner-status-card {
            background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.25);
            border-radius: 14px; padding: 18px 20px; margin-bottom: 20px;
            display: flex; align-items: center; gap: 16px;
        }
        .partner-status-card.offline {
            background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.2);
        }
        .ps-icon { font-size: 28px; }
        .ps-info { flex: 1; }
        .ps-title { font-size: 15px; font-weight: 700; color: var(--green); }
        .partner-status-card.offline .ps-title { color: var(--red); }
        .ps-desc  { font-size: 11.5px; color: var(--txt2); margin-top: 3px; }
        .ps-toggle {
            width: 52px; height: 28px; border-radius: 14px;
            background: var(--green); border: none; cursor: pointer;
            position: relative; transition: background .2s; flex-shrink: 0;
        }
        .ps-toggle.off { background: rgba(255,255,255,.12); }
        .ps-toggle::after {
            content: ''; position: absolute;
            width: 22px; height: 22px; border-radius: 50%; background: #fff;
            top: 3px; left: 3px; transition: transform .2s;
        }
        .ps-toggle.on::after  { transform: translateX(24px); }

        /* 파트너 — 수익 카드 */
        .partner-revenue-card {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
        }
        .rev-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }
        .rev-row:last-child { border-bottom: none; }
        .rev-row .rev-val { font-weight: 700; color: var(--cyan); }
        .rev-row.total-row .rev-val { font-size: 16px; color: var(--green); }

        /* 파트너 — 서비스 설정 미리보기 */
        .service-cfg-row {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
            font-size: 13px;
        }
        .service-cfg-row:last-child { border-bottom: none; }
        .scr-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
        .scr-label { flex: 1; color: var(--txt2); font-size: 12px; }
        .scr-val   { font-weight: 600; }
        .scr-edit  { font-size: 11px; color: var(--cyan); cursor: pointer; }

        /* 포인트/쿠폰 바 */
        .point-bar {
            display: flex; gap: 10px; margin-bottom: 20px;
        }
        .point-card {
            flex: 1; background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px;
        }
        .pc-val  { font-size: 20px; font-weight: 800; color: var(--cyan); }
        .pc-lbl  { font-size: 11px; color: var(--txt2); margin-top: 3px; }
        .pc-sub  { font-size: 10px; color: var(--green); margin-top: 2px; }

        @media (max-width: 768px) {
            .profile-top { flex-direction: row; }
            .point-bar { flex-direction: row; }
            .membership-card { flex-wrap: wrap; }
            .mc-badge { margin-left: 0; }
        }

        /* ══ 업체 등록 개선 ══════════════════════════ */
        .rate-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        .rate-table th {
            font-size: 11px; color: var(--txt2); letter-spacing: .8px;
            text-transform: uppercase; padding: 8px 12px;
            border-bottom: 1px solid var(--border); text-align: left;
        }
        .rate-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }
        .rate-table tr:last-child td { border-bottom: none; }
        .rate-table input[type=number] {
            width: 110px; background: rgba(0,229,255,.05);
            border: 1px solid var(--border); border-radius: 7px;
            padding: 6px 10px; color: var(--txt); font-size: 12px;
            outline: none; font-family: 'Noto Sans KR',sans-serif;
        }
        .rate-table input[type=number]:focus { border-color: rgba(0,229,255,.38); }
        .earnings-calc {
            background: linear-gradient(135deg,rgba(0,229,255,.07),rgba(124,58,237,.06));
            border: 1px solid var(--border); border-radius: 12px;
            padding: 16px 18px; margin-top: 18px;
        }
        .earnings-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
        .earnings-total { font-size: 18px; font-weight: 800; color: var(--cyan); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
        /* 프로필 미리보기 카드 */
        .preview-partner-card {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 14px; padding: 20px; margin-bottom: 18px;
        }
        .preview-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
        .preview-ava {
            width: 54px; height: 54px; border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--purple));
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; flex-shrink: 0;
        }
        .preview-name { font-size: 16px; font-weight: 700; }
        .preview-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
        .preview-cat-tag {
            font-size: 10.5px; padding: 3px 8px; border-radius: 10px;
            background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.22);
            color: var(--cyan);
        }
        .preview-stats { display: flex; gap: 16px; font-size: 12px; color: var(--txt2); }
        .preview-intro { font-size: 12.5px; color: var(--txt2); line-height: 1.7; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }

        /* ══ 관리자 대시보드 ══════════════════════════ */
        .admin-kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }
        .kpi-card {
            background: rgba(0,229,255,.04); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px 16px;
        }
        .kpi-icon { font-size: 20px; margin-bottom: 6px; }
        .kpi-val  { font-size: 22px; font-weight: 800; color: var(--cyan); line-height: 1.1; }
        .kpi-lbl  { font-size: 11px; color: var(--txt2); margin-top: 3px; }
        .kpi-trend{ font-size: 10px; margin-top: 4px; }
        .kpi-trend.up   { color: var(--green); }
        .kpi-trend.down { color: var(--red); }

        .admin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }

        /* 실시간 피드 */
        .live-feed-box {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden;
        }
        .live-feed-header {
            padding: 12px 16px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .live-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: blink 1.2s infinite; margin-right: 6px; display: inline-block; }
        .feed-list { max-height: 280px; overflow-y: auto; }
        .feed-list::-webkit-scrollbar { width: 3px; }
        .feed-list::-webkit-scrollbar-thumb { background: var(--border); border-radius:2px; }
        .feed-item {
            padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
            display: flex; align-items: center; gap: 10px;
            animation: fadeUp .3s ease;
        }
        .feed-item:last-child { border-bottom: none; }
        .feed-emoji { font-size: 18px; flex-shrink: 0; }
        .feed-info { flex: 1; min-width: 0; }
        .feed-svc  { font-size: 12.5px; font-weight: 600; }
        .feed-meta { font-size: 11px; color: var(--txt2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .feed-time { font-size: 10px; color: var(--txt2); flex-shrink: 0; }
        .feed-status {
            font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; flex-shrink: 0;
        }
        .fs-wait   { background: rgba(245,158,11,.15); color: var(--orange); }
        .fs-match  { background: rgba(0,229,255,.15);  color: var(--cyan); }
        .fs-done   { background: rgba(16,185,129,.15); color: var(--green); }

        /* 수익 차트 */
        .revenue-box {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden;
        }
        .revenue-header {
            padding: 12px 16px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .rev-toggle { display: flex; gap: 4px; }
        .rev-tog {
            padding: 4px 10px; border-radius: 6px;
            border: 1px solid var(--border); font-size: 11px;
            cursor: pointer; color: var(--txt2);
            font-family: 'Noto Sans KR',sans-serif; transition: all .15s;
        }
        .rev-tog.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.09); }
        .revenue-chart-area { padding: 14px 16px; }
        .rev-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
        .rev-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .rev-bar {
            width: 100%; border-radius: 4px 4px 0 0;
            background: linear-gradient(to top, var(--purple), var(--cyan));
            transition: height .4s ease; cursor: pointer;
            min-height: 4px;
        }
        .rev-bar:hover { filter: brightness(1.2); }
        .rev-lbl { font-size: 9.5px; color: var(--txt2); }
        .rev-total { font-size: 13px; font-weight: 700; color: var(--cyan); margin-top: 10px; }

        /* 파트너 테이블 */
        .partner-mgmt-box {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden; margin-bottom: 20px;
        }
        .mgmt-header {
            padding: 12px 16px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .mgmt-search {
            flex: 1; min-width: 140px;
            background: rgba(0,229,255,.05); border: 1px solid var(--border);
            border-radius: 8px; padding: 7px 12px; color: var(--txt); font-size: 12px;
            font-family: 'Noto Sans KR',sans-serif; outline: none;
        }
        .admin-tab { padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--txt2); border: 1px solid transparent; transition: all .15s; }
        .admin-tab.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.08); }
        .partner-row {
            padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
            display: flex; align-items: center; gap: 12px;
        }
        .partner-row:last-child { border-bottom: none; }
        .pr-ava {
            width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
            background: linear-gradient(135deg,#10104a,#22226a);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center; font-size: 16px;
        }
        .pr-info { flex: 1; min-width: 0; }
        .pr-name { font-size: 13px; font-weight: 600; }
        .pr-meta { font-size: 11px; color: var(--txt2); margin-top: 1px; }
        .pr-rating { color: var(--orange); font-size: 11px; }
        .pr-status {
            font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px; flex-shrink: 0;
        }
        .ps-active   { background: rgba(16,185,129,.15); color: var(--green); }
        .ps-pending  { background: rgba(245,158,11,.15);  color: var(--orange); }
        .ps-suspend  { background: rgba(239,68,68,.12);   color: var(--red); }
        .pr-actions  { display: flex; gap: 5px; flex-shrink: 0; }
        .pr-btn {
            padding: 5px 9px; border-radius: 6px; font-size: 11px; cursor: pointer;
            font-family: 'Noto Sans KR',sans-serif; transition: all .15s;
        }
        .pr-btn.approve { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
        .pr-btn.suspend { background: rgba(245,158,11,.12); color: var(--orange); border: 1px solid rgba(245,158,11,.3); }
        .pr-btn.reject  { background: rgba(239,68,68,.1);   color: var(--red);    border: 1px solid rgba(239,68,68,.25); }
        .pr-btn.contact { background: rgba(0,229,255,.08);  color: var(--cyan);   border: 1px solid rgba(0,229,255,.25); }
        .pr-btn:hover { filter: brightness(1.2); }

        /* 히트맵 */
        .heatmap-box {
            background: rgba(0,229,255,.03); border: 1px solid var(--border);
            border-radius: 14px; overflow: hidden; margin-bottom: 20px;
        }
        .heatmap-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding: 14px 16px; }
        .hm-cell {
            border-radius: 8px; padding: 10px 6px; text-align: center;
            cursor: pointer; transition: all .18s; position: relative;
        }
        .hm-cell:hover { transform: scale(1.05); z-index: 1; }
        .hm-name  { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.85); }
        .hm-count { font-size: 11px; font-weight: 800; margin-top: 2px; }
        .heatmap-legend { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; font-size: 11px; color: var(--txt2); }
        .hm-leg-bar { height: 8px; flex: 1; border-radius: 4px; background: linear-gradient(to right, rgba(0,229,255,.1), rgba(0,229,255,.9)); }

        /* 승인 대기 */
        .approval-list { display: flex; flex-direction: column; gap: 8px; }
        .approval-card {
            background: rgba(245,158,11,.04); border: 1px solid rgba(245,158,11,.22);
            border-radius: 12px; padding: 14px 16px;
            display: flex; align-items: center; gap: 12px;
        }
        .ap-ava { width: 40px; height: 40px; border-radius: 50%; background: rgba(245,158,11,.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        .ap-info { flex: 1; }
        .ap-name { font-size: 13.5px; font-weight: 600; }
        .ap-meta { font-size: 11px; color: var(--txt2); margin-top: 2px; }
        .ap-cats { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
        .ap-cat-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: rgba(245,158,11,.12); color: var(--orange); border: 1px solid rgba(245,158,11,.25); }
        .ap-btns { display: flex; gap: 6px; flex-shrink: 0; }

        @media (max-width: 768px) {
            .admin-kpi-grid { grid-template-columns: repeat(2,1fr); }
            .admin-two { grid-template-columns: 1fr; }
            .heatmap-grid { grid-template-columns: repeat(4,1fr); }
            .pr-actions { flex-wrap: wrap; }
            .approval-card { flex-wrap: wrap; }
            .ap-btns { width: 100%; }
            .kpi-val { font-size: 18px; }
        }

        /* ══ 라이트 모드 ══════════════════════════════ */
        body.light-mode {
            --bg:     #f0f6ff;
            --bg2:    rgba(232,242,255,0.98);
            --glass:  rgba(255,255,255,0.95);
            --txt:    #1a2840;
            --txt2:   #4a6070;
            --border: rgba(0,140,180,0.2);
            background-color: var(--bg);
        }
        body.light-mode #mob-header,
        body.light-mode #bottom-nav {
            background: rgba(232,242,255,0.98);
            border-color: var(--border);
        }
        body.light-mode #sidebar { background: var(--bg2); }
        body.light-mode .sb-footer { background: var(--bg2); }
        body.light-mode .nav-item { color: var(--txt2); }
        body.light-mode .nav-item.active { color: #0088bb; }
        body.light-mode .nav-item.active { background: rgba(0,140,180,.1); border-color: rgba(0,140,180,.25); }
        body.light-mode .nav-item:hover { background: rgba(0,140,180,.06); color: var(--txt); }
        body.light-mode .nav-divider { background: rgba(0,140,180,.15); }
        body.light-mode .beta-box { background: rgba(0,140,180,.08); border-color: var(--border); }
        body.light-mode .pg-header,
        body.light-mode .rp-header,
        body.light-mode .chat-header { background: var(--bg2); border-color: var(--border); }
        body.light-mode .bubble { background: rgba(0,140,180,.07); border-color: var(--border); }
        body.light-mode .msg.user .bubble { background: rgba(100,80,200,.12); }
        body.light-mode #chat-wrap { background: var(--glass); }
        body.light-mode #city-wrap { background: #c8dff0; }
        body.light-mode .hud-stat,
        body.light-mode .loc-pill { background: rgba(240,248,255,.9); color: #0077aa; border-color: rgba(0,140,180,.3); }
        body.light-mode .hud-label { color: rgba(0,100,140,.8); }
        body.light-mode .settings-group { background: rgba(0,140,180,.04); }
        body.light-mode .settings-item:hover { background: rgba(0,140,180,.06); }
        body.light-mode .settings-name { color: var(--txt); }
        body.light-mode #input-row { background: rgba(230,242,255,.8); }
        body.light-mode #chat-in {
            background: rgba(255,255,255,.8); border-color: rgba(0,140,180,.2);
            color: var(--txt);
        }
        body.light-mode .stat-card,
        body.light-mode .history-card,
        body.light-mode .p-card,
        body.light-mode .kpi-card { background: rgba(255,255,255,.8); border-color: var(--border); }
        body.light-mode .mob-ham span { background: var(--txt2); }
        body.light-mode .mob-logo-name {
            -webkit-text-fill-color: unset;
            color: var(--txt);
        }
        body.light-mode .bn-item { color: var(--txt2); }
        body.light-mode .bn-item.active { color: #0088bb; }
        /* 스크롤바 */
        body.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,140,180,.25); }

        /* ══ MOBILE HEADER ═══════════════════════════ */
        #mob-header {
            display: none;
            position: fixed; top: 0; left: 0; right: 0; z-index: 200;
            height: 54px;
            background: rgba(6,6,22,.97);
            border-bottom: 1px solid var(--border);
            backdrop-filter: blur(16px);
            align-items: center;
            padding: 0 14px;
            gap: 12px;
        }
        .mob-ham {
            width: 38px; height: 38px; flex-shrink: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 5px;
            cursor: pointer; border-radius: 8px;
            transition: background .15s;
        }
        .mob-ham:hover { background: rgba(0,229,255,.08); }
        .mob-ham span {
            width: 20px; height: 2px;
            background: var(--txt2); border-radius: 2px;
            transition: all .25s;
            display: block;
        }
        .mob-ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); background: var(--cyan); }
        .mob-ham.open span:nth-child(2) { opacity: 0; }
        .mob-ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); background: var(--cyan); }
        .mob-logo-wrap { display: flex; align-items: center; gap: 8px; flex: 1; }
        /* 모바일 테마 전환 버튼 */
        .mob-theme-btn {
            width: 44px; height: 44px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.04);
            font-size: 18px; cursor: pointer; transition: all .18s;
        }
        .mob-theme-btn:hover { background: rgba(255,255,255,.1); }

        /* 모바일 전체화면 버튼 — 더 크게, cyan 강조 */
        .mob-chat-btn {
            width: 44px; height: 44px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(0,229,255,.35);
            background: rgba(0,229,255,.1);
            color: var(--cyan);
            font-size: 20px;
            cursor: pointer;
            transition: all .18s;
        }
        .mob-chat-btn:hover { background: rgba(0,229,255,.2); }
        .mob-logo-hex {
            width: 28px; height: 28px;
            border-radius: 7px;
            display: block; object-fit: cover;
        }
        .mob-logo-name {
            font-size: 17px; font-weight: 700;
            background: linear-gradient(135deg,var(--cyan),#fff);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .mob-loc-pill {
            font-size: 10.5px; color: var(--cyan);
            background: rgba(0,229,255,.08);
            border: 1px solid rgba(0,229,255,.2);
            border-radius: 14px; padding: 4px 10px;
            display: flex; align-items: center; gap: 4px;
            white-space: nowrap; max-width: 130px; overflow: hidden;
        }
        .mob-loc-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--cyan); flex-shrink: 0;
            animation: pulse 1.6s infinite;
        }

        /* ══ SIDEBAR OVERLAY ════════════════════════ */
        #sb-overlay {
            display: none;
            position: fixed; inset: 0; z-index: 90;
            background: rgba(0,0,0,.6);
            backdrop-filter: blur(2px);
        }
        #sb-overlay.show { display: block; }

        /* ══ BOTTOM NAV ══════════════════════════════ */
        #bottom-nav {
            display: none;
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
            height: 58px;
            background: rgba(6,6,22,.97);
            border-top: 1px solid var(--border);
            backdrop-filter: blur(16px);
            align-items: center; justify-content: space-around;
        }
        .bn-item {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 3px; flex: 1; height: 100%;
            cursor: pointer; transition: all .15s;
            color: var(--txt2); position: relative;
        }
        .bn-item.active { color: var(--cyan); }
        .bn-item.sos-tab {
            background: linear-gradient(135deg,rgba(239,68,68,.25),rgba(239,68,68,.1));
            border-radius: 14px; margin: 6px 4px;
            height: calc(100% - 12px); flex: none; width: 56px;
            border: 1px solid rgba(239,68,68,.3);
        }
        .bn-item.sos-tab .bn-icon { font-size: 20px; }
        .bn-item.sos-tab .bn-label { color: var(--red); }
        .bn-icon  { font-size: 18px; line-height: 1; }
        .bn-label { font-size: 9.5px; font-weight: 500; }
        .bn-dot {
            position: absolute; top: 6px; right: calc(50% - 14px);
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--red);
            border: 1.5px solid rgba(6,6,22,.97);
        }

        /* ══ RESPONSIVE ══════════════════════════════ */
        @media (max-width: 768px) {
            body { flex-direction: column; }

            /* 사이드바 → 드로어: 모바일 헤더(54px) 아래에서 시작 */
            #sidebar {
                position: fixed; top: 54px; left: -244px;
                height: calc(100% - 54px);
                z-index: 100; transition: left .28s cubic-bezier(.4,0,.2,1);
                box-shadow: none;
                overflow-y: auto;
            }
            #sidebar.drawer-open {
                left: 0;
                box-shadow: 4px 0 32px rgba(0,0,0,.5);
            }

            /* 모바일 헤더·바텀 표시 */
            #mob-header { display: flex; }
            #bottom-nav { display: flex; }

            /* 메인 영역 여백 — iOS 주소창 반영 --vh 사용 */
            #main {
                padding-top: 54px;
                padding-bottom: 68px;
                height: 100vh;
                height: calc(var(--vh, 1vh) * 100);
            }

            /* 홈 지도 비율 + 여유 공간 */
            #city-wrap { flex: 0 0 46%; }
            .hud-top { padding: 16px 14px 10px; }   /* 상단 여유 증가 */
            .hud-stats { gap: 5px; }
            .hud-stat  { padding: 4px 8px; font-size: 10px; }
            .hud-legend { gap: 6px; }
            .hl-item { font-size: 9px; padding: 2px 6px; }

            /* 채팅 입력창 — 전송 버튼 잘림 수정 */
            #input-row { padding: 8px 10px; gap: 6px; overflow: hidden; }
            #loc-btn   { display: none; }           /* 위치 버튼 숨겨 공간 확보 */
            #chat-in   { min-width: 0; padding: 8px 10px; font-size: 13px; flex: 1 1 0; }
            #send-btn  { padding: 0 14px; font-size: 12px; flex: 0 0 auto; white-space: nowrap; }

            /* 전체화면 버튼 — 모바일에서 표시 보장 */
            .fullscreen-btn { display: flex !important; padding: 5px 8px; font-size: 11px; }
            .chat-header { padding: 8px 12px; gap: 8px; }

            /* 채팅 빠른 버튼 */
            #chat-in { font-size: 14px; }
            #send-btn { padding: 0 12px; font-size: 12px; }
            .chip { font-size: 11px; padding: 5px 10px; }

            /* 페이지 공통 패딩 축소 */
            .pg-header { padding: 14px 16px; }
            .pg-body   { padding: 16px; }
            .rp-header { padding: 14px 16px 0; }
            .rp-body   { padding: 16px 18px 16px 16px; }
            .rp-nav {
                padding: 12px 16px;
                position: sticky;
                bottom: 58px;
                z-index: 5;
                background: var(--bg2);
            }

            /* 통계 3칸 → 유지 (숫자 축소) */
            .stat-val { font-size: 18px; }

            /* 카테고리 그리드 */
            .cat-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
            .cat-card { padding: 12px 6px; }
            .cat-emoji { font-size: 22px; }
            .cat-name  { font-size: 11px; }
            .cat-desc  { display: none; }

            /* 긴급도 */
            .urgency-desc { display: none; }

            /* 두 칸 → 단일 칸 */
            .two-col { grid-template-columns: 1fr; }
            .profile-form-grid { grid-template-columns: 1fr; }

            /* 케어 플랜 카드 세로 */
            .care-tier-grid { grid-template-columns: 1fr; }
            .tier-card { padding: 16px; }

            /* 케어 일정 2×2 */
            .care-schedule { grid-template-columns: repeat(2,1fr); }

            /* 파트너 혜택 */
            .partner-benefit-grid { grid-template-columns: 1fr; }

            /* 스텝 인디케이터 텍스트 숨김 */
            .si { font-size: 0; padding: 10px 10px 12px; }
            .si-num { width: 22px; height: 22px; font-size: 10px; }
            .si.active::after {
                content: attr(data-label);
                font-size: 11px; margin-left: 6px;
                color: var(--cyan);
            }

            /* 집 건강 */
            .health-bar-wrap { flex-direction: column; text-align: center; padding: 14px; }
            .health-tags { justify-content: center; }

            /* 히스토리 카드 */
            .h-bottom { flex-wrap: wrap; gap: 6px; }

            /* 지도 바텀 패널 */
            .map-bottom-panel { padding: 10px 14px; }
            .map-connect-btn { padding: 7px 14px; font-size: 11px; }

            /* 프로필 헤더 */
            .profile-header { flex-direction: column; text-align: center; }
            .profile-ava    { margin: 0 auto; }

            /* 업체등록 반경 */
            .radius-preview { height: 140px; }

            /* 정기 케어 현재 플랜 */
            .care-plan-current { flex-direction: column; text-align: center; gap: 8px; }
        }

        @media (max-width: 420px) {
            .cat-grid { grid-template-columns: repeat(2,1fr); }
            .stat-grid { grid-template-columns: repeat(3,1fr); }
            .stat-val  { font-size: 16px; }
            .stat-lbl  { font-size: 10px; }
            .time-grid { grid-template-columns: repeat(2,1fr); }
            .pg-name   { font-size: 15px; }
        }

        /* ══ 태블릿 전용 (769px ~ 1024px) ══════════════════════════
           세로 모드에서 지도 비율 줄여 채팅 입력창이 보이도록        */
        @media (min-width: 769px) and (max-width: 1024px) {
            /* 모바일 헤더·바텀탭 표시 */
            #mob-header { display: flex; }
            #bottom-nav { display: flex; }
            #desktop-top-bar { display: none; }

            /* 사이드바 드로어 전환 */
            #sidebar {
                position: fixed; top: 54px; left: -260px;
                width: 260px; height: calc(100% - 54px);
                z-index: 100; transition: left .28s cubic-bezier(.4,0,.2,1);
                overflow-y: auto;
            }
            #sidebar.drawer-open { left: 0; box-shadow: 4px 0 32px rgba(0,0,0,.5); }
            #sb-overlay.show { display: block; }

            /* 메인 여백 */
            #main {
                padding-top: 54px;
                padding-bottom: 58px;
                height: 100vh;
                height: calc(var(--vh, 1vh) * 100);
            }

            /* 지도 비율: 세로 모드 40%, 가로 모드는 자동 */
            #city-wrap { flex: 0 0 40%; }

            /* 입력창 확보 */
            #input-row { padding: 8px 12px; gap: 6px; }
            #loc-btn   { display: none; }
            #chat-in   { min-width: 0; flex: 1 1 0; }
            #send-btn  { padding: 0 14px; font-size: 12.5px; flex: 0 0 auto; white-space: nowrap; }
            .fullscreen-btn { display: flex !important; }
        }

        /* 태블릿 가로 모드 (가로 > 세로): 지도 더 줄이기 */
        @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
            #city-wrap { flex: 0 0 50%; }
        }

/* ══ 언어 선택기 (i18n) ══════════════════════════ */
.lang-switcher {
    position: relative;
    margin-bottom: 8px;
}
.lang-btn {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: var(--txt2);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    transition: background .2s;
}
.lang-btn:hover { background: rgba(0,229,255,.08); color: var(--cyan); }
.lang-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0; right: 0;
    background: #0d0d26;
    border: 1px solid rgba(0,229,255,.25);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.7);
    z-index: 200;
}
body.light-mode .lang-dropdown {
    background: #dce8f8;
    border-color: rgba(0,150,200,.25);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.lang-opt {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--txt);
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lang-opt:hover { background: rgba(0,229,255,.1); color: var(--cyan); }

/* ══ 스크롤바 전역 숨김 ══════════════════════════ */
/* 사이드바 메뉴 */
.sb-nav,
/* 채팅 메시지 */
#chat-msgs,
/* 각 페이지 본문 */
.pg-body,
.rp-body,
#page-repair,
#page-history,
#page-profile,
#page-settings,
#page-admin,
#page-care,
#page-shop,
#page-partner,
#page-ads {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge */
}
.sb-nav::-webkit-scrollbar,
#chat-msgs::-webkit-scrollbar,
.pg-body::-webkit-scrollbar,
.rp-body::-webkit-scrollbar,
#page-repair::-webkit-scrollbar,
#page-history::-webkit-scrollbar,
#page-profile::-webkit-scrollbar,
#page-settings::-webkit-scrollbar,
#page-admin::-webkit-scrollbar,
#page-care::-webkit-scrollbar,
#page-shop::-webkit-scrollbar,
#page-partner::-webkit-scrollbar,
#page-ads::-webkit-scrollbar { display: none; }  /* Chrome / Safari / Edge */