@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

/* Default Theme (Option 1: Toss Clean Tech) */
:root, body.theme-toss {
    --bg-main: #f8fafc;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --text-primary: #191f28;
    --text-secondary: #4e5968;
    --text-muted: #8b95a1;

    --accent-blue: #3182f6;
    --accent-blue-hover: #1b64da;
    --accent-blue-light: #e8f3ff;

    --accent-green: #00b493;
    --accent-green-light: #e6f7f4;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fff7ed;
    --accent-red: #f04452;
    --accent-red-light: #ffeeee;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #f5f3ff;

    --font-family: 'Pretendard', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --card-radius: 12px;
    --btn-radius: 9px;
    --box-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Option 2: Pop Pink (MZ Y2K Pop Neon Pink & Violet) 💖 */
body.theme-pop {
    --bg-main: #fdf2f8;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #fbcfe8;
    --border-light: #fce7f3;
    --text-primary: #831843;
    --text-secondary: #9d174d;
    --text-muted: #be185d;

    --accent-blue: #ec4899;
    --accent-blue-hover: #db2777;
    --accent-blue-light: #fce7f3;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #f43f5e;
    --accent-red-light: #ffe4e6;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #f5f3ff;

    --font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
    --card-radius: 14px;
    --btn-radius: 10px;
    --box-shadow-soft: 0 4px 18px rgba(236, 72, 153, 0.08);
}

/* Option 3: Studio Warm Beige */
body.theme-warm {
    --bg-main: #f7f5f0;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #e6e2d8;
    --border-light: #f2efe9;
    --text-primary: #24211d;
    --text-secondary: #6e675f;
    --text-muted: #a39b90;

    --accent-blue: #1a2b4c;
    --accent-blue-hover: #0f1a30;
    --accent-blue-light: #eaeef6;

    --accent-green: #2d6a4f;
    --accent-green-light: #e8f3ed;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #b91c1c;
    --accent-red-light: #fef2f2;
    --accent-purple: #6b21a8;
    --accent-purple-light: #faf5ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 8px;
    --btn-radius: 6px;
    --box-shadow-soft: 0 2px 10px rgba(36, 33, 29, 0.04);
}

/* Option 4: Apple Soft Slate & Glass */
body.theme-apple {
    --bg-main: #f1f5f9;
    --card-bg: #ffffff;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --border-color: #cbd5e1;
    --border-light: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --accent-blue: #0ea5e9;
    --accent-blue-hover: #0284c7;
    --accent-blue-light: #e0f2fe;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #f43f5e;
    --accent-red-light: #ffe4e6;
    --accent-purple: #a855f7;
    --accent-purple-light: #f3e8ff;

    --font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;
    --card-radius: 16px;
    --btn-radius: 20px;
    --box-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* Option 5: Cyber Lime Matcha (MZ Street Cyber Lime & Matcha) 🍵 */
body.theme-lime {
    --bg-main: #f7fee7;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #d9f99d;
    --border-light: #ecfccb;
    --text-primary: #1a2e05;
    --text-secondary: #365314;
    --text-muted: #4d7c0f;

    --accent-blue: #65a30d;
    --accent-blue-hover: #4d7c0f;
    --accent-blue-light: #ecfccb;

    --accent-green: #16a34a;
    --accent-green-light: #dcfce7;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #e11d48;
    --accent-red-light: #ffe4e6;
    --accent-purple: #9333ea;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(101, 163, 13, 0.08);
}

/* Option 6: Dark Onyx (High-Contrast Midnight Dark Mode) 🌙 */
body.theme-dark {
    --bg-main: #0f172a;
    --card-bg: #1e293b;
    --panel-bg: #1e293b;
    --border-color: #334155;
    --border-light: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --accent-blue: #38bdf8;
    --accent-blue-hover: #0284c7;
    --accent-blue-light: rgba(56, 189, 248, 0.15);

    --accent-green: #34d399;
    --accent-green-light: rgba(52, 211, 153, 0.15);
    --accent-amber: #fbbf24;
    --accent-amber-light: rgba(251, 191, 36, 0.15);
    --accent-red: #f87171;
    --accent-red-light: rgba(248, 113, 113, 0.15);
    --accent-purple: #c084fc;
    --accent-purple-light: rgba(192, 132, 252, 0.15);

    --font-family: 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Option 7: French Lavender (Elegant Pastel Violet & Indigo) 🪻 */
body.theme-lavender {
    --bg-main: #f5f3ff;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #ddd6fe;
    --border-light: #ede9fe;
    --text-primary: #3b0764;
    --text-secondary: #5b21b6;
    --text-muted: #7c3aed;

    --accent-blue: #7c3aed;
    --accent-blue-hover: #6d28d9;
    --accent-blue-light: #ede9fe;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #ef4444;
    --accent-red-light: #fee2e2;
    --accent-purple: #a855f7;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
    --card-radius: 14px;
    --btn-radius: 9px;
    --box-shadow-soft: 0 4px 18px rgba(124, 58, 237, 0.08);
}

/* Option 8: Sunset Coral (Vibrant Tangerine & Coral Gold) 🍊 */
body.theme-orange {
    --bg-main: #fff7ed;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #ffedd5;
    --border-light: #fff7ed;
    --text-primary: #7c2d12;
    --text-secondary: #9a3412;
    --text-muted: #c2410c;

    --accent-blue: #ea580c;
    --accent-blue-hover: #c2410c;
    --accent-blue-light: #ffedd5;

    --accent-green: #16a34a;
    --accent-green-light: #dcfce7;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #e11d48;
    --accent-red-light: #ffe4e6;
    --accent-purple: #9333ea;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(234, 88, 12, 0.08);
}

/* Option 9: Ocean Mint (Cool Turquoise & Seafoam Mint) 🌊 */
body.theme-mint {
    --bg-main: #f0fdf4;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #bbf7d0;
    --border-light: #dcfce7;
    --text-primary: #064e3b;
    --text-secondary: #047857;
    --text-muted: #059669;

    --accent-blue: #0d9488;
    --accent-blue-hover: #0f766e;
    --accent-blue-light: #ccfbf1;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #f43f5e;
    --accent-red-light: #ffe4e6;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #f5f3ff;

    --font-family: 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(13, 148, 136, 0.08);
}

/* Option 10: Nordic Forest (Deep Emerald & Sage Minimal) 🌲 */
body.theme-nordic {
    --bg-main: #f1f7f6;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #d1e5e1;
    --border-light: #e6f2f0;
    --text-primary: #132e2b;
    --text-secondary: #244a46;
    --text-muted: #3b6e68;

    --accent-blue: #1f5e57;
    --accent-blue-hover: #15423d;
    --accent-blue-light: #e1f0ed;

    --accent-green: #2d6a4f;
    --accent-green-light: #e8f3ed;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #991b1b;
    --accent-red-light: #fee2e2;
    --accent-purple: #581c87;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 10px;
    --btn-radius: 7px;
    --box-shadow-soft: 0 4px 14px rgba(31, 94, 87, 0.06);
}

/* Option 11: Pantone Peach Fuzz (2024-2026 Trend Peach) 🍑 */
body.theme-pantone {
    --bg-main: #fff4ed;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #fed7aa;
    --border-light: #ffedd5;
    --text-primary: #7c2d12;
    --text-secondary: #9a3412;
    --text-muted: #c2410c;

    --accent-blue: #fb923c;
    --accent-blue-hover: #f97316;
    --accent-blue-light: #ffedd5;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #ef4444;
    --accent-red-light: #fee2e2;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #f5f3ff;

    --font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
    --card-radius: 14px;
    --btn-radius: 9px;
    --box-shadow-soft: 0 4px 18px rgba(251, 146, 60, 0.08);
}

/* Option 12: Neo Future Mint (Bio Cyan & Electric Mint) 🧪 */
body.theme-neo-mint {
    --bg-main: #e0f2fe;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #bae6fd;
    --border-light: #e0f2fe;
    --text-primary: #0369a1;
    --text-secondary: #075985;
    --text-muted: #0284c7;

    --accent-blue: #0284c7;
    --accent-blue-hover: #0369a1;
    --accent-blue-light: #e0f2fe;

    --accent-green: #14b8a6;
    --accent-green-light: #ccfbf1;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #f43f5e;
    --accent-red-light: #ffe4e6;
    --accent-purple: #6366f1;
    --accent-purple-light: #e0e7ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(2, 132, 199, 0.08);
}

/* Option 13: Deep Cherry Mocha (Luxe Mahogany & Berry Wine) 🍒 */
body.theme-cherry {
    --bg-main: #fff1f2;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #fecdd3;
    --border-light: #ffe4e6;
    --text-primary: #881337;
    --text-secondary: #9f1239;
    --text-muted: #be123c;

    --accent-blue: #e11d48;
    --accent-blue-hover: #be123c;
    --accent-blue-light: #ffe4e6;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #be123c;
    --accent-red-light: #ffe4e6;
    --accent-purple: #a855f7;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(225, 29, 72, 0.08);
}

/* Option 14: Neon Cyberpunk (Midnight Black & Electric Cyan) ⚡ */
body.theme-cyberpunk {
    --bg-main: #090d16;
    --card-bg: #131b2e;
    --panel-bg: #131b2e;
    --border-color: #253352;
    --border-light: #18233c;
    --text-primary: #00f0ff;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;

    --accent-blue: #00f0ff;
    --accent-blue-hover: #00c8d6;
    --accent-blue-light: rgba(0, 240, 255, 0.15);

    --accent-green: #39ff14;
    --accent-green-light: rgba(57, 255, 20, 0.15);
    --accent-amber: #ffe600;
    --accent-amber-light: rgba(255, 230, 0, 0.15);
    --accent-red: #ff0055;
    --accent-red-light: rgba(255, 0, 85, 0.15);
    --accent-purple: #b026ff;
    --accent-purple-light: rgba(176, 38, 255, 0.15);

    --font-family: 'Plus Jakarta Sans', sans-serif;
    --card-radius: 8px;
    --btn-radius: 6px;
    --box-shadow-soft: 0 4px 22px rgba(0, 240, 255, 0.2);
}

/* Option 15: Desert Sage (Earthy Minimal Sage & Soft Khaki) 🌾 */
body.theme-sage {
    --bg-main: #f4f6f0;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #dce2d5;
    --border-light: #eaeee7;
    --text-primary: #2d3627;
    --text-secondary: #44523c;
    --text-muted: #5e7053;

    --accent-blue: #526647;
    --accent-blue-hover: #3e4f34;
    --accent-blue-light: #e4ebe0;

    --accent-green: #16a34a;
    --accent-green-light: #dcfce7;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #b91c1c;
    --accent-red-light: #fee2e2;
    --accent-purple: #7e22ce;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 10px;
    --btn-radius: 7px;
    --box-shadow-soft: 0 4px 14px rgba(82, 102, 71, 0.06);
}

/* Option 16: Digital Violet (Deep Ultra Violet & Hyper Purple) 🔮 */
body.theme-violet {
    --bg-main: #f3e8ff;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #e9d5ff;
    --border-light: #f3e8ff;
    --text-primary: #581c87;
    --text-secondary: #6b21a8;
    --text-muted: #7e22ce;

    --accent-blue: #9333ea;
    --accent-blue-hover: #7e22ce;
    --accent-blue-light: #f3e8ff;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #ef4444;
    --accent-red-light: #fee2e2;
    --accent-purple: #c084fc;
    --accent-purple-light: #faf5ff;

    --font-family: 'Pretendard', sans-serif;
    --card-radius: 14px;
    --btn-radius: 9px;
    --box-shadow-soft: 0 4px 18px rgba(147, 51, 234, 0.08);
}

/* Option 17: Butter Cream (Warm Pastel Vanilla & Soft Gold) 🧈 */
body.theme-butter {
    --bg-main: #fefce8;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #fef08a;
    --border-light: #fef9c3;
    --text-primary: #713f12;
    --text-secondary: #854d0e;
    --text-muted: #a16207;

    --accent-blue: #ca8a04;
    --accent-blue-hover: #a16207;
    --accent-blue-light: #fef9c3;

    --accent-green: #16a34a;
    --accent-green-light: #dcfce7;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #dc2626;
    --accent-red-light: #fee2e2;
    --accent-purple: #9333ea;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 18px rgba(202, 138, 4, 0.08);
}

/* Option 18: Vintage Denim (Classic Indigo & Faded Washed Blue) 👖 */
body.theme-denim {
    --bg-main: #f0f4f8;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #cbd5e1;
    --border-light: #e2e8f0;
    --text-primary: #1e3a8a;
    --text-secondary: #1e40af;
    --text-muted: #2563eb;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-blue-light: #dbeafe;

    --accent-green: #059669;
    --accent-green-light: #d1fae5;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #dc2626;
    --accent-red-light: #fee2e2;
    --accent-purple: #7c3aed;
    --accent-purple-light: #ede9fe;

    --font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
    --card-radius: 10px;
    --btn-radius: 7px;
    --box-shadow-soft: 0 4px 14px rgba(37, 99, 235, 0.08);
}

/* Option 19: Champagne Rose Gold (Luxury Blush Pink & Rose Gold) 🍾 */
body.theme-rose-gold {
    --bg-main: #fff0f5;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #ffd1dc;
    --border-light: #ffe4e9;
    --text-primary: #5c2438;
    --text-secondary: #7e324c;
    --text-muted: #9e4363;

    --accent-blue: #d87093;
    --accent-blue-hover: #c71585;
    --accent-blue-light: #ffe4e9;

    --accent-green: #10b981;
    --accent-green-light: #d1fae5;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fef3c7;
    --accent-red: #e11d48;
    --accent-red-light: #ffe4e6;
    --accent-purple: #8b5cf6;
    --accent-purple-light: #f5f3ff;

    --font-family: 'Outfit', 'Pretendard', sans-serif;
    --card-radius: 14px;
    --btn-radius: 9px;
    --box-shadow-soft: 0 4px 18px rgba(216, 112, 147, 0.08);
}

/* Option 20: Matcha Latte (Soft Creamy Green Tea & Latte Milk) 🍵 */
body.theme-matcha-latte {
    --bg-main: #f2f7f2;
    --card-bg: #ffffff;
    --panel-bg: #ffffff;
    --border-color: #d2e3d2;
    --border-light: #e4efe4;
    --text-primary: #234223;
    --text-secondary: #335c33;
    --text-muted: #447744;

    --accent-blue: #447744;
    --accent-blue-hover: #335c33;
    --accent-blue-light: #e4efe4;

    --accent-green: #16a34a;
    --accent-green-light: #dcfce7;
    --accent-amber: #d97706;
    --accent-amber-light: #fef3c7;
    --accent-red: #b91c1c;
    --accent-red-light: #fee2e2;
    --accent-purple: #7e22ce;
    --accent-purple-light: #f3e8ff;

    --font-family: 'Pretendard', sans-serif;
    --card-radius: 12px;
    --btn-radius: 8px;
    --box-shadow-soft: 0 4px 14px rgba(68, 119, 68, 0.06);
}

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

/* 화면 밖(오프캔버스)에 숨겨둔 매물등록/사진갤러리 패널들(.side-panel)이
   position:fixed + right:-100vw 로 안 보이게 밀려나 있는데, html/body의
   overflow-x가 기본값(visible)이면 모바일에서 가로로 스와이프하거나
   화면 폭 계산이 살짝 어긋날 때 그 숨겨진 패널들이 스크롤로 딸려 들어와
   버린다 (여러 패널이 옆으로 나란히 늘어서 보이는 원인). 뷰포트 밖으로는
   아예 스크롤이 안 되게 막아서 원천 차단한다. */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Base Body Font Size +2px Increased to 15.5px */
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 15.5px;
    line-height: 1.45;
    letter-spacing: -0.15px;
    transition: background-color 0.2s, color 0.2s;
}

/* Header Navbar */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;

    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--box-shadow-soft);
    transition: background-color 0.2s, border-color 0.2s;
}

.logo-area {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-area:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.035));
}

.logo-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 7.5px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 7px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.logo-area:hover .logo-icon-box {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.logo-icon {
    font-size: 12.5px;
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.logo-text {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.7px;
    line-height: 1.2;
    white-space: nowrap;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, var(--text-primary, #0f172a) 20%, var(--accent-blue, #2563eb) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
    transition: all 0.2s ease;
}

.logo-user-badge {
    background: var(--accent-blue-light, #e0f2fe);
    color: var(--accent-blue, #0284c7);
    border: 1px solid rgba(2, 132, 199, 0.16);
    padding: 2.5px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
    white-space: nowrap;
    letter-spacing: -0.2px;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.logo-user-badge:hover {
    background: #bae6fd;
    color: #0369a1;
}

.user-badge-wrapper {
    position: relative;
    display: inline-block;
}

.user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    min-width: 155px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 6px 0;
    animation: fadeIn 0.15s ease-out;
}

.footer-menu-dropdown {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.15), 0 -4px 6px -2px rgba(0, 0, 0, 0.08) !important;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.user-menu-item:hover {
    background: var(--bg-main, #f1f5f9);
    color: var(--accent-blue, #3182f6);
}

.user-menu-item.logout-btn {
    color: #ef4444;
}

.user-menu-item.logout-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

.user-menu-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 4px 0;
}

.badge {
    font-size: 12.5px;
    background: var(--accent-blue-light);
    color: var(--accent-blue);
    padding: 2px 8px;
    border-radius: var(--btn-radius);
    font-weight: 600;
    letter-spacing: -0.1px;
}

.badge-done {
    background: var(--border-light);
    color: var(--text-secondary);
}

.search-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    padding: 5px 12px;
    width: 310px;
    transition: border-color 0.15s;
}

.search-box:focus-within { border-color: var(--accent-blue); }

.search-box input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    margin-left: 8px;
    font-size: 15.5px;
    outline: none;
}

.filter-tabs {
    display: flex;
    gap: 4px;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 500;
    transition: all 0.15s;
}

.tab-btn.active, .tab-btn:hover {
    background: var(--accent-blue);
    color: #ffffff;
    font-weight: 600;
    border-color: var(--accent-blue);
}

/* Advanced Search Filter Panel (Find Home White Style) */
.advanced-search-panel {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 18px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 700;
    white-space: nowrap;
}

.filter-item input, .filter-item select {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--btn-radius);
    padding: 4px 8px;
    font-size: 11.5px;
    height: 29px;
}

/* Translucent & Smaller Filter Placeholders (최소, 최대) */
.filter-item input::placeholder {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    opacity: 0.75 !important;
}

/* Translucent & Smaller Filter Dropdowns & Option Button (전체, 옵션 선택, 세입자현황 등) */
.filter-item select,
#filterOptionsBtn {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    opacity: 0.75 !important;
    font-weight: 500 !important;
}

.filter-item select option {
    color: var(--text-primary, #1e293b);
    opacity: 1;
}

/* Options Filter Button (옵션 선택) */
#filterOptionsBtn {
    padding: 4px 9px !important;
    height: 29px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--btn-radius) !important;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
}

.range-inputs input {
    width: 75px;
}

.search-btn-item {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn {
    padding: 7px 15px;
    border-radius: var(--btn-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.btn-primary { background: var(--accent-blue); color: #ffffff; }
.btn-primary:hover { background: var(--accent-blue-hover); }
.btn-yellow { background: var(--accent-blue); color: #ffffff; }
.btn-yellow:hover { background: var(--accent-blue-hover); }
.btn-warning { background: var(--accent-blue); color: #ffffff; }
.btn-warning:hover { background: var(--accent-blue-hover); }
.btn-outline { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary); }
.btn-outline:hover { background: var(--bg-main); border-color: var(--text-muted); color: var(--text-primary); }
.btn-sm { padding: 4px 10px; font-size: 13.5px; }
.btn:active { transform: scale(0.98); }

/* Favorite Star Styling - 즐겨찾기는 통일감보다 인식성이 중요해서 노란색 유지 */
.star-btn {
    background: transparent;
    border: none;
    color: var(--border-color);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, color 0.15s;
}

.star-btn.active, .star-btn:hover {
    color: #eab308;
    transform: scale(1.15);
}

/* Price Styling */
.price-sale-tag {
    color: #1d4ed8;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.2px;
}
.price-rent-tag {
    color: #e11d48;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.2px;
}
.price-jeonse-tag {
    color: #7c3aed;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.2px;
}

/* Table Styling */
.main-container {
    padding: 10px 14px;
    transition: margin-right 0.3s ease;
}

.panel-view { display: none; }
.panel-view.active { display: block; }

.table-container {
    overflow-x: auto;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-soft);
    max-height: calc(100vh - 125px);
}

.property-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    white-space: nowrap;
    table-layout: fixed;
}

.property-table th {
    background: var(--bg-main);
    padding: 9px 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.1px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: grab;
    user-select: none;
    text-align: center;
    position: relative;
}

.property-table th:active { cursor: grabbing; }

.property-table th.dragging {
    opacity: 0.6;
    background: var(--accent-blue-light);
}

/* Easy Resizer Handle (Enlarged Hitbox & Visual Line) */
.resizer {
    position: absolute;
    right: -7px;
    top: 0;
    height: 100%;
    width: 14px;
    background: transparent;
    cursor: col-resize;
    user-select: none;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resizer::after {
    content: "";
    display: block;
    width: 2px;
    height: 50%;
    background: transparent;
    border-radius: 1px;
    transition: background 0.15s, height 0.15s;
}

.resizer:hover::after, .resizer.resizing::after {
    background: var(--accent-blue);
    height: 100%;
    box-shadow: 0 0 6px var(--accent-blue);
}

.property-table td {
    padding: 7px 9px;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    text-align: center;
}

/* Center-align helper class */
.tc { text-align: center !important; }

.property-table tr:hover { background: rgba(0, 0, 0, 0.02); }

/* Column Title (건물이름) - Bold 700, font-size 13.5px */
.property-table td.col-title,
.property-table td.col-title *,
.col-title,
.col-title * {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    font-size: 13.5px !important;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.col-title:hover {
    color: var(--accent-blue) !important;
    background: var(--accent-blue-light) !important;
}

/* Column Price (금액) - Bold 700, font-size 13.5px */
.property-table td.col-price,
.property-table td.col-price *,
.col-price,
.col-price *,
.price-sale-tag,
.price-rent-tag,
.price-jeonse-tag {
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

/* Column 1: Balanced Pastel 2x2 Icon Action Cell */
.col-action { width: 50px !important; text-align: center; padding: 2px 4px !important; }

.action-cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.action-2x2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5px;
    width: 41px;
    margin: 0 auto;
}

/* Option 3: 2x2 Text + Icon Chip Grid Layout */
.action-cell-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-chip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 116px;
}

.action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 22px;
    padding: 0 4px;
    border-radius: 4px;
    border: none;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.action-chip i {
    font-size: 10px;
}

/* 카메라 사진 유무 100% 확실 구분 (없음: 회색, 있음: 핫핑크) */
.action-chip.chip-photo {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #cbd5e1;
}

.action-chip.chip-photo.has-photo {
    background: #ff477e !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 5px rgba(255, 71, 126, 0.35) !important;
}

.action-chip.chip-map {
    background: #e0f2fe;
    color: #0284c7;
}

.action-chip.chip-detail {
    background: #fef3c7;
    color: #b45309;
}

.action-chip.chip-navi {
    background: #dcfce7;
    color: #15803d;
}

.action-chip:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.icon-btn:hover {
    transform: scale(1.14);
    z-index: 5;
}

.icon-btn:active {
    transform: scale(0.94);
}

/* 사진 유무 구분 100% 확실화 (사진 있음: 핫핑크/흰색, 사진 없음: 회색) */
.icon-btn.btn-photo {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #cbd5e1;
}

.icon-btn.btn-photo.has-photo {
    background: #ff477e !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(255, 71, 126, 0.35) !important;
}

.icon-btn.btn-photo:hover {
    filter: brightness(0.95);
}

.icon-btn.btn-map {
    background: #e0f2fe;
    color: #0284c7;
}

.icon-btn.btn-map:hover {
    background: #bae6fd;
    color: #0369a1;
}

.icon-btn.btn-naver {
    background: #dcfce7;
    color: #15803d;
}

.icon-btn.btn-naver:hover {
    background: #bbf7d0;
    color: #166534;
}

.icon-btn.btn-detail {
    background: #fef3c7;
    color: #b45309;
}

.icon-btn.btn-detail:hover {
    background: #fde68a;
    color: #92400e;
}

/* Inline Cell Edit Highlighting */
.editable-cell {
    cursor: pointer;
    border-radius: 3px;
    padding: 3px 6px;
    transition: background 0.2s;
}

.editable-cell:hover {
    background: #e0f2fe;
    outline: 1px dashed var(--accent-blue);
}

.cell-input {
    background: #ffffff;
    border: 1px solid var(--accent-blue);
    color: #0f172a;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 4px;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   NOTION STYLE WHITE RIGHT SIDE PANEL (SIDE DRAWER FORM)
   ───────────────────────────────────────────────────────────── */
.side-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 580px;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.active { right: 0; }

/* 매물 등록 패널만 데스크톱에서 더 넓게 - 3열로 배치해서 스크롤 없이 한 화면에
   더 많은 항목이 들어가게 한다 (모바일에서는 기존처럼 100vw로 별도 오버라이드됨).
   주의: 닫혀있을 때 화면 밖으로 완전히 나가는 거리(right)도 넓어진 폭(760px)에
   맞게 같이 늘려야 한다. 안 그러면(기존 -600px 그대로 두면) 패널이 닫혀있어도
   760-600=160px 만큼 화면 오른쪽에 계속 삐져나와 보이는 심각한 버그가 생긴다. */
#registerSidePanel.side-panel {
    width: 760px;
    right: -800px;
}

#registerSidePanel.side-panel.active {
    right: 0;
}

.side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.side-panel-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.photo-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.photo-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.photo-toolbar-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.side-panel-body {
    padding: 8px 16px;
    overflow-y: auto;
    flex: 1;
}

.side-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 10px;
}

.side-form-grid .full-width { grid-column: span 3; }

.side-form-grid label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.side-form-grid input, .side-form-grid select, .side-form-grid textarea {
    width: 100%;
    padding: 5px 7px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    color: var(--text-primary);
    font-size: 13px;
}

.side-form-grid input:focus, .side-form-grid select:focus, .side-form-grid textarea:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.input-row-one {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mb-1 { margin-bottom: 8px; }

/* Horizontal Checkbox Layout (Clean Inline Rows) */
.checkbox-group-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 4px 0;
}

.checkbox-group-horizontal label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.checkbox-group-horizontal input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-blue);
    margin: 0;
}

.side-panel-footer {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-main);
}

.section-divider-sm {
    grid-column: span 3;
    border-top: 1px dashed var(--border-color);
    margin-top: 2px;
    padding-top: 4px;
}

.section-title-sm {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-blue);
}

.highlight-input {
    border: 1px solid var(--accent-blue) !important;
    background: var(--accent-blue-light);
    transition: background 0.4s ease;
}

/* Regular Modals for Detail & Photo Gallery */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    z-index: 2500 !important;
    align-items: center;
    justify-content: center;
}

.modal.active { display: flex; }

.lightbox-modal {
    background: rgba(0, 0, 0, 0.88) !important;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* 사진 확대보기 좌우 넘기기 클릭 영역 (예전엔 CSS가 없어서 안 눌렸음) */
.lb-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lb-zone:hover { opacity: 1; }
.lb-left { left: 0; justify-content: flex-start; padding-left: 14px; }
.lb-right { right: 0; justify-content: flex-end; padding-right: 14px; }
.lb-arrow-icon {
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    pointer-events: none;
}

/* Side Panel Backdrop Overlay */
.side-panel-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 890;
    transition: opacity 0.25s ease;
}
.side-panel-backdrop.active { display: block; }

/* Unified Notion-Style Building Info Card */
.building-info-card {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.45;
}
.bld-info-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.bld-label {
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}
.bld-val {
    font-weight: 600;
    color: #0f172a;
}

.glass-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 900px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.close-btn { font-size: 22px; cursor: pointer; color: var(--text-secondary); }

.modal-body { padding: 18px; }

/* 전화 걸기 선택 모달 (모바일 카드 "전화" 버튼) */
.call-sheet-content {
    background: #ffffff;
    border-radius: 16px;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.call-sheet-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.call-sheet-group-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.call-sheet-numbers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.call-sheet-number-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--accent-green, #00b493);
    background: var(--accent-green-light, #e6f7f4);
    color: var(--accent-green, #00b493);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.call-sheet-number-btn:active { transform: scale(0.97); }

/* 전화번호로 인식 안 된 메모성 텍스트 - 통화는 안 되니 버튼과 다르게 무채색으로 */
.call-sheet-text-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--border-color, #e2e8f0);
    background: var(--bg-main, #f8fafc);
    color: var(--text-secondary, #4e5968);
    font-weight: 600;
    font-size: 14px;
}

.csn-num { flex: 0 0 auto; }

/* 번호 뒤에 붙어있던 통신사/이름 등 설명 - 어떤 번호로 걸어야 할지 구분하는 용도 */
.csn-label {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #4e5968);
    background: rgba(255, 255, 255, 0.75);
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-sheet-empty {
    color: var(--text-muted);
    font-size: 13px;
}

/* Detail Modal Grid */
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 16px;
}

.detail-card {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 14px;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: 13px;
}

.info-list.building-value-only li {
    justify-content: flex-start !important;
    font-size: 13.5px !important;
    padding: 7px 0 !important;
}

.info-list.building-value-only strong {
    color: var(--text-color) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

.info-list.building-value-only strong#detAreasAndShare {
    white-space: nowrap !important;
    font-size: 13.5px !important;
    letter-spacing: -0.3px !important;
    display: inline-block !important;
    word-break: keep-all !important;
}

pre {
    background: #f1f5f9;
    padding: 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px !important;
    white-space: pre-wrap;
    word-break: keep-all;
    max-height: 220px;
    overflow-y: auto;
    color: #0f172a;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
}

/* Photo Gallery Grid */
.upload-dropzone {
    border: 2px dashed var(--accent-blue);
    border-radius: 6px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    background: #f0f9ff;
    margin-bottom: 16px;
    font-size: 13.5px;
}

.drop-icon { font-size: 32px; color: var(--accent-blue); margin-bottom: 8px; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.photo-grid img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Map Layout */
.map-layout {
    display: flex;
    height: 82vh;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.map-box { flex: 1; height: 100%; }

.map-sidebar {
    width: 280px;
    background: #ffffff;
    padding: 14px;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
}

/* ── 주소 자동추천 드롭다운 ── */
.addr-suggestions {
    position: relative;
    z-index: 50;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.addr-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}
.addr-suggestion-item:last-child { border-bottom: none; }
.addr-suggestion-item:hover { background: var(--accent-blue-light, #e0f2fe); }
.addr-suggestion-item .addr-road {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ── 거주현황 / EV / 상태 토글 버튼 ── */
.toggle-pair {
    display: flex;
    gap: 4px;
}
.toggle-btn {
    flex: 1;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}
.toggle-btn.active {
    background: var(--accent-blue, #0284c7);
    border-color: var(--accent-blue, #0284c7);
    color: #ffffff;
}

/* 세입자현황/EV처럼 버튼 하나로 값을 토글하는 경우 (공실↔거주중, EV없음↔EV있음).
   클릭할 때마다 반대 값으로 바뀌고 텍스트도 같이 바뀐다 - 두 버튼을 나란히
   두는 대신 하나로 합쳐서 자리를 절약한다. */
.toggle-btn.single-toggle {
    display: block;
    width: 100%;
}

/* EV처럼 칸 전체를 채울 필요 없이 옵션 칩 하나만큼만 작아도 되는 토글 버튼 */
.toggle-btn.single-toggle.chip-sized {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 64px;
    height: 22px;
    padding: 0 10px;
    font-size: 10.5px;
}

/* 즐겨찾기 필터 버튼 활성 상태 */
#favFilterBtn.active {
    background: #fef3c7;
    border-color: #eab308;
    color: #b45309;
}

/* 진행중/완료 토글 (Actions Area 통일감 스타일) */
.actions-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-toggle-top {
    display: inline-flex;
    gap: 3px;
    background: var(--bg-main);
    padding: 3px;
    border-radius: var(--btn-radius);
    border: 1px solid var(--border-color);
}

.status-toggle-btn {
    padding: 6px 14px;
    font-size: 14.5px;
    font-weight: 700;
    border: none;
    border-radius: calc(var(--btn-radius) - 2px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.status-toggle-btn.active[data-status="진행중"] {
    background: var(--accent-blue);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.status-toggle-btn.active[data-status="완료"] {
    background: var(--accent-green);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* 모든 입력창(input, select, textarea) 및 라벨 폰트 크기 시원시원하게 대폭 확대 (16px) */
input, select, textarea {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
}

textarea, #regFeatures {
    font-family: inherit !important;
    font-size: 16px !important;
    color: var(--text-color) !important;
    line-height: 1.45 !important;
}

.side-form-grid label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

/* 위의 전역 "input, select, textarea { font-size:16px !important }" 규칙이
   매물등록 패널의 입력창까지 다시 크게 만들어버리는 것을 막는다 (한 화면에
   다 들어가게 하려고 일부러 좁게 만든 거라서, 여기서만 다시 작게 되돌려야 함).
   #regFeatures는 별도 ID 규칙(#regFeatures{font-size:16px!important})이 있어서
   그것도 같이 이겨야 하므로 id를 한 번 더 감싸서 특이도를 올린다. */
#registerSidePanel .side-form-grid input,
#registerSidePanel .side-form-grid select,
#registerSidePanel .side-form-grid textarea {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px 7px !important;
}

#registerSidePanel #regFeatures {
    font-size: 13px !important;
}

/* App Bottom Footer Bar (화면 맨 아래 슬림 풋터) */
.app-bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 18px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--text-muted);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-theme-select {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-theme-select select {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 10.2px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    outline: none;
    transition: color 0.15s ease;
}

.footer-theme-select select:hover {
    color: var(--accent-blue, #0284c7);
}

.footer-theme-select select option {
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #1e293b);
    font-size: 12px;
}

.footer-divider {
    color: var(--border-color);
    font-size: 11px;
}

.footer-util-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.footer-util-btn:hover {
    color: var(--accent-blue);
    background: var(--bg-main);
}

/* ── 지도 매물 상세 패널 (마우스 커서 근처에 떠서 나온다) ── */
.map-detail-float {
    display: none;
    position: fixed;
    width: 320px;
    max-height: 480px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(34,31,26,0.16);
    z-index: 1500;
    flex-direction: column;
}

/* PC & 모바일 공통: chip-toggle 토글 버튼 디자인 (공실/거주중, EV없음/EV있음과 100% 동일 디자인) */
.chip-toggle-group {
    display: grid !important;
    gap: 4px !important;
}

.chip-toggle-group.option-grid {
    grid-template-columns: repeat(6, 1fr) !important;
}

.chip-toggle-group.mitem-grid {
    grid-template-columns: repeat(6, 1fr) !important;
}

.mfee-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.chip-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    padding: 0 3px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    border: 1px solid var(--border-color) !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
}

.chip-toggle input[type="checkbox"] {
    display: none !important;
}

.chip-toggle:has(input[type="checkbox"]:checked),
.chip-toggle.active {
    background: var(--accent-blue) !important;
    color: #ffffff !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE SYSTEM (@media max-width: 768px)
   ───────────────────────────────────────────────────────────── */

/* Desktop Defaults (Hidden on PC) */
.mobile-card-list { display: none; }
.mobile-bottom-bar { display: none; }
.mobile-filter-toggle-btn { display: none; }

@media (max-width: 768px) {
    .mobile-filter-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--accent-blue-light);
        color: var(--accent-blue);
        border: none;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        margin-left: 4px;
    }

    /* Mobile Hide Advanced Filter Panel by Default for Cleanliness */
    .advanced-search-panel {
        display: none;
    }

    .advanced-search-panel.mobile-open {
        display: block !important;
        animation: fadeIn 0.2s ease-out;
    }
    /* Hide Desktop Heavy Components */
    .table-container { display: none !important; }
    .app-bottom-footer { display: none !important; }

    /* Mobile Header Layout */
    .app-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px 12px;
    }

    .logo-area {
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .logo-text {
        font-size: 17px !important;
        font-weight: 800 !important;
        text-align: center !important;
    }

    .search-area {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }

    .search-box {
        width: 100% !important;
        padding: 4px 10px;
    }

    .search-box input {
        font-size: 14px;
    }

    .filter-tabs {
        overflow-x: auto;
        white-space: nowrap;
        gap: 4px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex: 0 0 auto;
        padding: 4px 10px;
        font-size: 13px;
        border-radius: 6px;
    }

    /* Mobile Header Action Buttons - Hide top register button on mobile since bottom nav has it */
    .actions-area .btn-primary, .header-reg-btn, #headerRegisterBtn {
        display: none !important;
    }

    .actions-area {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .actions-area .btn {
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        padding: 5px 8px !important;
        font-size: 13px !important;
        height: 32px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* 로그인 사용자 정보 / 통합관리·업체관리 / 비번변경 / 로그아웃 영역.
       위 버튼들(진행중·즐겨찾기·지도)과 한 줄에 같이 두면 좁은 화면에서 넘쳐서
       화면 밖으로 밀려나 버렸다(그리고 가로 스크롤을 막아둔 뒤로는 아예 접근 불가가 됨).
       -> 폭이 부족하면 자동으로 다음 줄 전체를 차지하도록 내려서 항상 보이게 한다. */
    .user-info-area {
        flex: 1 1 100% !important;
        order: 10 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        padding-top: 8px !important;
        margin-top: 2px !important;
        border-top: 1px solid var(--border-color, #e2e8f0) !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }

    .user-info-area .btn {
        flex: 0 0 auto !important;
    }

    .user-info-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: auto;
    }

    /* 화면이 더 좁으면(iPhone SE 등) 통합관리/관리 버튼의 글자는 생략하고
       아이콘만 남긴다 - title 속성으로 여전히 툴팁은 뜬다. */
    @media (max-width: 420px) {
        .user-info-area .btn-label {
            display: none;
        }
        .user-info-area .btn {
            padding: 5px 7px !important;
        }
    }

    .status-toggle-top {
        flex: 0 0 auto !important;
        height: 30px !important;
    }

    /* Mobile Card 3-Line Info Rows */
    .m-card-info-rows {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 6px 0 8px 0;
        padding: 8px 10px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        font-size: 12px;
        cursor: pointer;
    }

    .m-info-line {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .m-info-line.line-1 {
        font-weight: 700;
        color: var(--text-color);
        font-size: 12.5px;
        display: flex;
        justify-content: space-between;
    }

    .m-info-line.line-1 .item-addr {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .m-info-line.line-1 .item-badge {
        font-weight: 600;
        font-size: 11.5px;
        color: #475569;
        white-space: nowrap;
    }

    .m-info-line.line-2 {
        font-size: 11.5px;
        gap: 6px;
    }

    .m-info-line.line-2 span {
        background: #ffffff;
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid #cbd5e1;
        font-size: 11px;
    }

    .m-info-line.line-3 {
        font-size: 11.5px;
        gap: 6px;
    }

    .m-info-line.line-3 span {
        background: #f1f5f9;
        color: #334155;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid #e2e8f0;
        font-size: 11px;
    }

    .status-toggle-btn {
        padding: 2px 8px !important;
        font-size: 12px !important;
        height: 24px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    /* Detail Modal Compact Slim Layout for 1-Screen Viewport Fit */
    #detailModal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 6px auto !important;
        padding: 8px 10px !important;
        max-height: 94vh !important;
    }

    #detailModal .modal-header {
        padding: 6px 10px !important;
    }

    #detailModal .modal-header h2 {
        font-size: 15px !important;
    }

    #detailModal .modal-body {
        padding: 6px 4px !important;
    }

    #detailModal .modal-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #detailModal .detail-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    #detailModal .detail-card h3 {
        font-size: 13.5px !important;
        margin-bottom: 4px !important;
    }

    #detailModal .info-list li {
        padding: 2px 0 !important;
        font-size: 12px !important;
    }

    #detailModal pre {
        padding: 6px 8px !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        border-radius: 6px !important;
        margin: 4px 0 !important;
    }

    #detailModal .card-tab-content button {
        padding: 4px 10px !important;
        font-size: 12px !important;
        height: 30px !important;
    }

    /* Mobile Kakao Map Fullscreen Layout Fix */
    #mapView {
        height: auto !important;
    }

    .map-layout {
        flex-direction: column !important;
        height: calc(100vh - 165px) !important;
        min-height: 480px !important;
        border-radius: 10px !important;
    }

    .map-box {
        width: 100% !important;
        height: 65% !important;
        flex: none !important;
    }

    .map-sidebar {
        width: 100% !important;
        height: 35% !important;
        border-left: none !important;
        border-top: 1px solid var(--border-color) !important;
        padding: 10px !important;
    }

    /* Mobile Map Detail Float Popup Centering & Slim Sizing Fix */
    .map-detail-float {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 88vw !important;
        max-width: 340px !important;
        max-height: 65vh !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25) !important;
        overflow-y: auto !important;
        z-index: 8500 !important;
    }

    .modal.active {
        z-index: 10000 !important;
    }

    /* Mobile Register Drawer / Panel Compact Uniform Styling */
    #registerSidePanel.side-panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .side-panel-header {
        padding: 10px 14px !important;
    }

    .side-panel-header h2 {
        font-size: 16px !important;
    }

    .side-panel-body {
        padding: 10px 12px !important;
    }

    .side-form-grid {
        gap: 8px 10px !important;
    }

    .side-form-grid label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .side-form-grid input[type="text"],
    .side-form-grid input[type="number"],
    .side-form-grid select,
    .side-form-grid textarea {
        padding: 4px 8px !important;
        font-size: 13px !important;
        height: 32px !important;
        border-radius: 6px !important;
    }

    .side-form-grid textarea {
        height: 50px !important;
    }

    /* 토글 버튼 디자인 통일 (진행중/완료, 공실/거주중, EV없음/EV있음) */
    .toggle-pair {
        display: flex !important;
        height: 32px !important;
        border-radius: 6px !important;
        background: #f1f5f9 !important;
        padding: 2px !important;
        border: 1px solid var(--border-color) !important;
    }

    .toggle-btn {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 4px !important;
        color: #64748b !important;
        cursor: pointer !important;
        transition: all 0.15s !important;
    }

    .toggle-btn.active {
        background: var(--accent-blue) !important;
        color: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    /* chip-toggle 토글 버튼 디자인 (공실/거주중, EV없음/EV있음과 100% 동등 디자인) */
    .chip-toggle-group {
        display: grid !important;
        gap: 5px !important;
    }

    .chip-toggle-group.option-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .chip-toggle-group.mitem-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .chip-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        padding: 0 4px !important;
        border-radius: 6px !important;
        background: #f1f5f9 !important;
        border: 1px solid var(--border-color) !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        user-select: none !important;
        transition: all 0.15s ease !important;
        margin: 0 !important;
    }

    .chip-toggle input[type="checkbox"] {
        display: none !important;
    }

    .chip-toggle:has(input[type="checkbox"]:checked),
    .chip-toggle.active {
        background: var(--accent-blue) !important;
        color: #ffffff !important;
        border-color: var(--accent-blue) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    }

    /* Mobile Structured & Balanced Advanced Search Filter Panel Grid */
    .advanced-search-panel {
        padding: 12px 14px !important;
        margin: 8px 10px !important;
        background: var(--card-bg, #ffffff) !important;
        border: 1px solid var(--border-color, #e2e8f0) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    }

    .filter-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 10px !important;
        align-items: flex-end !important;
    }

    .filter-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .filter-item-range {
        grid-column: span 2 !important;
    }

    .filter-item-half {
        grid-column: span 1 !important;
    }

    .filter-item label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-secondary, #475569) !important;
    }

    .range-inputs {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .range-inputs input {
        flex: 1 !important;
        width: 100% !important;
        height: 33px !important;
        text-align: center !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    .range-inputs span {
        color: var(--text-muted, #94a3b8) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .filter-item select,
    #filterOptionsBtn {
        width: 100% !important;
        height: 33px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .search-btn-item {
        grid-column: span 2 !important;
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .search-btn-item button {
        width: 100% !important;
        height: 35px !important;
        justify-content: center !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    #customDateRangeWrap {
        display: none !important;
    }

    .search-btn-item {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        margin-top: 2px;
        gap: 6px;
    }

    .search-btn-item .btn {
        padding: 4px 10px;
        font-size: 12.5px;
        height: 28px;
        border-radius: 5px;
    }

    /* Main Container Padding */
    .main-container {
        padding: 8px 8px 65px 8px;
    }

    /* Mobile Property Card List View */
    .mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .m-prop-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px;
        box-shadow: var(--box-shadow-soft);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .m-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .m-card-title-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .m-card-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.3px;
    }

    /* 가격과 사진 버튼을 같은 줄에 (사진 버튼이 있어도 가격이 다음 줄로 안 밀리게) */
    .m-card-price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 1px 0;
    }

    .m-card-price {
        font-size: 16.5px;
        font-weight: 800;
        color: var(--accent-blue);
        letter-spacing: -0.3px;
        white-space: nowrap;
    }

    .m-card-photo-btn-inline {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 5px;
        height: 34px;
        padding: 0 14px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-secondary);
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }

    .m-card-photo-btn-inline:active {
        transform: scale(0.96);
        background: var(--border-light);
    }

    .m-card-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 8px;
        background: var(--bg-main);
        padding: 6px 8px;
        border-radius: 7px;
        font-size: 12.5px;
        color: var(--text-secondary);
    }

    .m-card-info-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .m-card-actions {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        margin-top: 2px;
    }

    .m-card-btn {
        height: 30px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
    }

    .m-card-btn:active {
        transform: scale(0.96);
        background: var(--border-light);
    }

    /* Mobile Full Width Side Panel Drawer & Form Styling */
    .side-panel {
        width: 100vw !important;
        right: -100vw;
    }

    .side-panel-header {
        padding: 10px 14px;
    }

    .side-panel-header h2 {
        font-size: 15px;
    }

    .side-panel-header .btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
        height: 28px !important;
    }

    .side-panel-body {
        padding: 10px 14px;
    }

    .side-form-grid label {
        font-size: 12.5px;
        margin-bottom: 2px;
    }

    .side-form-grid input, .side-form-grid select, .side-form-grid textarea {
        padding: 4px 8px;
        font-size: 13px;
        height: 30px;
        border-radius: 5px;
    }

    /* Mobile Bottom Navigation Bar */
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 52px;
        background: var(--panel-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        z-index: 999;
        justify-content: space-around;
        align-items: center;
    }

    .m-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 10.5px;
        font-weight: 600;
        cursor: pointer;
    }

    .m-nav-item i {
        font-size: 15px;
    }

    .m-nav-item.active {
        color: var(--accent-blue);
    }

    .m-nav-add {
        color: var(--accent-blue);
    }

    .m-nav-add i {
        background: var(--accent-blue);
        color: #ffffff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-top: -6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
}
.map-detail-float.active { display: flex; }
.map-tab-chip {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: var(--radius, 6px);
    background: var(--bg-main);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    border: none;
}
.map-tab-chip.active {
    background: var(--accent-blue);
    color: #ffffff;
}
.map-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 12.5px;
}
.map-detail-row:first-child { border-top: none; }
.map-detail-row .k { color: #64748b; flex-shrink: 0; margin-right: 10px; }
.map-detail-row .v { text-align: right; }
.map-detail-btn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}
.map-detail-btn-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    padding: 6px 2px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    color: #334155;
}
.map-detail-btn-grid button:hover { background: #f8fafc; }
.map-detail-btn-grid button i { font-size: 15px; }

/* ── 지도 핀에 건물명 라벨 (커스텀 오버레이) ── */
.map-building-pin {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px 4px 7px;
    border-radius: 14px;
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transform: translateY(-4px);
}
.map-building-pin i { font-size: 11px; }

/* ── 다중선택 칩: 카테고리별 조화로운 파스텔 톤 ── */
.chip-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 관리비항목 (Maintenance Items) - Fresh Mint Teal */
.chip-tag.chip-tag-mitem {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

/* 옵션 (Options) - Soft Pastel Indigo Blue */
.chip-tag.chip-tag-option {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.chip-tag-lg {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 6px;
}



/* 지도 매물정보 민감정보: 터치해서 공개 */
.map-sensitive-row {
    cursor: pointer;
    user-select: none;
}

/* 지도 라벨을 누른 최초 터치가 민감정보 공개로 이어지는 클릭 관통 방지 */
.map-sensitive-row.reveal-guard {
    pointer-events: none;
}

.map-sensitive-row .map-sensitive-value {
    min-width: 0;
}
.map-sensitive-row.is-masked .map-sensitive-value {
    display: flex;
    justify-content: flex-end;
}
.map-sensitive-mask {
    display: inline-block;
    min-width: 112px;
    padding: 2px 8px;
    border-radius: 6px;
    color: transparent;
    background: rgba(100, 116, 139, 0.16);
    filter: blur(4px);
    position: relative;
}
.map-sensitive-mask::after {
    content: '터치해서 보기';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    filter: blur(0);
    font-size: 11px;
    font-weight: 700;
}
.map-sensitive-row:not(.is-masked) {
    background: #f8fafc;
}
.map-phone-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}
.map-phone-sep { color: #94a3b8; }

@media (max-width: 768px) {
    .map-sensitive-row { display: flex !important; }
}

/* Mobile photo panel: keep it above the map and use the full screen. */
@media (max-width: 768px) {
    #photoSidePanel.side-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        right: -100vw !important;
        z-index: 12000 !important;
    }

    #photoSidePanel.side-panel.active {
        right: 0 !important;
    }

    #photoSidePanel .side-panel-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile photo panel hardening */
@media (max-width: 768px) {
  #photoSidePanel.side-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    transform: translateX(105%) !important;
    z-index: 10050 !important;
    background: #fff !important;
  }
  #photoSidePanel.side-panel.active {
    display: flex !important;
    transform: translateX(0) !important;
  }
  #photoSidePanel .side-panel-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  body.photo-panel-open { overflow: hidden !important; }
}


/* Photo gallery cards + drag-to-trash deletion */
.photo-empty-message {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
}

.photo-item {
    position: relative;
    cursor: grab;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.photo-item:active { cursor: grabbing; }

.photo-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: 0;
    transition: transform .2s, opacity .2s;
    pointer-events: auto;
    -webkit-user-drag: none;
}

.photo-item:hover > img { transform: scale(1.03); }
.photo-item.photo-dragging > img { opacity: .28; transform: scale(.97); }

.photo-item-actions {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.photo-item-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .76);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    backdrop-filter: blur(3px);
}

.photo-item-btn:active { transform: scale(.94); }

.photo-trash-zone {
    position: sticky;
    bottom: 8px;
    z-index: 20;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 58px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: rgba(248, 250, 252, .96);
    color: #64748b;
    font-weight: 700;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.photo-trash-zone i { font-size: 20px; }
.photo-drag-active .photo-trash-zone {
    border-color: #ef4444;
    background: rgba(254, 242, 242, .98);
    color: #dc2626;
}
.photo-trash-zone.drag-over {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
    transform: scale(1.025);
}

.photo-drag-ghost {
    position: fixed;
    z-index: 20000;
    width: 132px;
    aspect-ratio: 4 / 3;
    transform: translate(-50%, -50%) rotate(2deg);
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .32);
    opacity: .9;
}
.photo-drag-ghost img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    #photoPanelGrid.photo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #photoPanelGrid.photo-grid .photo-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .photo-trash-zone {
        bottom: 6px;
        min-height: 62px;
        margin-top: 10px;
        font-size: 14px;
    }

    .photo-drag-ghost { width: 116px; }
}



/* Restored original photo-grid frame: no hero wrapper, full-width two columns on mobile. */
.photo-item-actions,
.photo-download-btn {
    display: none !important;
}

.photo-download-all-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: auto;
}
.photo-download-all-btn:disabled { opacity: .45; cursor: default; }

#lightbox.lightbox-modal,
.lightbox-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
}
#lightbox.lightbox-modal.active,
.lightbox-modal.active { display: flex !important; }
body.lightbox-open { overflow: hidden !important; }

@media (max-width: 768px) {
    #photoSidePanel .side-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
    }
    #photoSidePanel .side-panel-header h2 {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #photoSidePanel .side-panel-body {
        padding: 10px 12px 18px !important;
    }
    .photo-panel-toolbar {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    .photo-toolbar-btn {
        padding: 6px 9px !important;
        font-size: 11.5px !important;
    }
}
@media (max-width: 420px) {
    .photo-toolbar-btn span { display: none; }
    .photo-toolbar-btn {
        flex: 1 1 0;
        justify-content: center !important;
        padding: 8px 4px !important;
    }
}

/* 999.0.41 - Mobile register form balance and consistency */
@media (max-width: 768px) {
    #registerSidePanel .side-panel-body {
        padding: 12px 14px 24px !important;
    }

    #registerSidePanel .side-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 12px !important;
    }

    #registerSidePanel .side-form-grid > .full-width,
    #registerSidePanel .section-divider-sm,
    #registerSidePanel .reg-address-block,
    #registerSidePanel .reg-room-block,
    #registerSidePanel .reg-rooms-info-block {
        grid-column: 1 / -1 !important;
    }

    #registerSidePanel .reg-type-block {
        grid-column: 1 !important;
    }

    #registerSidePanel .reg-price-block {
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    #registerSidePanel .side-form-grid label {
        display: block !important;
        min-height: 18px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
        word-break: keep-all !important;
    }

    #registerSidePanel .side-form-grid input[type="text"],
    #registerSidePanel .side-form-grid input[type="number"],
    #registerSidePanel .side-form-grid select,
    #registerSidePanel .side-form-grid textarea,
    #registerSidePanel .single-toggle {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 8px 10px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    #registerSidePanel .reg-address-block #regRoadAddress {
        margin-top: 7px !important;
    }

    #registerSidePanel #addrStatusMsg,
    #registerSidePanel #manualAddrHint {
        margin-top: 6px !important;
        line-height: 1.35 !important;
    }

    #registerSidePanel .input-row-one {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(72px, 1fr) !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    #registerSidePanel .input-row-one input {
        width: 100% !important;
    }

    #registerSidePanel .section-divider-sm {
        margin: 4px 0 0 !important;
        padding-top: 12px !important;
    }

    #registerSidePanel .section-title-sm {
        font-size: 16px !important;
    }

    #registerSidePanel .register-flex-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: end !important;
        width: 100% !important;
    }

    #registerSidePanel .register-flex-row > * {
        min-width: 0 !important;
        width: 100% !important;
    }

    #registerSidePanel .register-flex-main {
        grid-column: 1 / -1 !important;
    }

    #registerSidePanel .option-grid,
    #registerSidePanel .mitem-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #registerSidePanel .chip-toggle {
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 7px 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        border-radius: 8px !important;
        word-break: keep-all !important;
    }

    #registerSidePanel .mfee-container {
        display: grid !important;
        grid-template-columns: 86px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    #registerSidePanel #regMfee {
        width: 100% !important;
        height: 100% !important;
        min-height: 40px !important;
    }

    #registerSidePanel .register-contact-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #registerSidePanel .ev-field {
        grid-column: 1 / -1 !important;
    }

    #registerSidePanel .ev-field .single-toggle {
        max-width: none !important;
    }

    #registerSidePanel #regFeatures {
        min-height: 82px !important;
        height: 82px !important;
        padding: 10px !important;
    }

    #registerSidePanel .building-info-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    #registerSidePanel .bld-info-row {
        min-height: 34px !important;
        padding: 7px 8px !important;
    }
}

@media (max-width: 390px) {
    #registerSidePanel .side-panel-body {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    #registerSidePanel .side-form-grid {
        column-gap: 8px !important;
    }

    #registerSidePanel .option-grid,
    #registerSidePanel .mitem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #registerSidePanel .mfee-container {
        grid-template-columns: 74px minmax(0, 1fr) !important;
    }
}

/* 999.0.42 - Compact mobile register form: show more information at once */
@media (max-width: 768px) {
    #registerSidePanel .side-panel-header {
        min-height: 52px !important;
        padding: 9px 14px !important;
    }

    #registerSidePanel .side-panel-header h2 {
        font-size: 20px !important;
    }

    #registerSidePanel .side-panel-body {
        padding: 8px 10px 18px !important;
    }

    #registerSidePanel .side-form-grid {
        column-gap: 7px !important;
        row-gap: 7px !important;
    }

    #registerSidePanel .side-form-grid label {
        min-height: 0 !important;
        margin-bottom: 3px !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
    }

    #registerSidePanel .side-form-grid input[type="text"],
    #registerSidePanel .side-form-grid input[type="number"],
    #registerSidePanel .side-form-grid select,
    #registerSidePanel .single-toggle {
        height: 34px !important;
        min-height: 34px !important;
        padding: 5px 7px !important;
        font-size: 13px !important;
        border-radius: 7px !important;
    }

    #registerSidePanel .input-row-one {
        gap: 5px !important;
        margin-top: 5px !important;
    }

    #registerSidePanel .reg-address-block #regRoadAddress {
        margin-top: 5px !important;
    }

    #registerSidePanel #addrStatusMsg,
    #registerSidePanel #manualAddrHint {
        margin-top: 3px !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    #registerSidePanel .section-divider-sm {
        margin: 1px 0 0 !important;
        padding-top: 7px !important;
    }

    #registerSidePanel .section-title-sm {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    #registerSidePanel .register-flex-row {
        gap: 6px !important;
    }

    /* 옵션 6개를 모바일 한 줄에 배치 */
    #registerSidePanel .option-grid,
    #registerSidePanel .mitem-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    #registerSidePanel .chip-toggle {
        min-height: 31px !important;
        height: 31px !important;
        padding: 2px 1px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        border-radius: 6px !important;
        letter-spacing: -0.5px !important;
        overflow: hidden !important;
    }

    /* 체크박스는 숨기고 버튼 전체 색상으로 선택 여부 표시 */
    #registerSidePanel .chip-toggle input {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #registerSidePanel .mfee-container {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    #registerSidePanel #regMfee {
        min-height: 31px !important;
        height: 31px !important;
        padding: 4px 5px !important;
        font-size: 12px !important;
    }

    /* 옵션 아래 세입자현황/이사는 한 줄, 관리비 아래 두 입력도 한 줄 */
    #registerSidePanel .occupancy-field,
    #registerSidePanel .movein-field,
    #registerSidePanel .current-lease-field,
    #registerSidePanel .key-field {
        min-width: 0 !important;
    }

    #registerSidePanel .register-contact-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px !important;
        gap: 6px !important;
    }

    #registerSidePanel .register-contact-row .ev-field {
        grid-column: 3 !important;
    }

    #registerSidePanel .register-contact-row .ev-field .single-toggle {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    #registerSidePanel #regFeatures {
        min-height: 56px !important;
        height: 56px !important;
        padding: 6px 7px !important;
        font-size: 13px !important;
        border-radius: 7px !important;
    }

    #registerSidePanel .building-info-card {
        padding: 8px !important;
        border-radius: 9px !important;
    }

    #registerSidePanel .bld-info-row {
        min-height: 28px !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 390px) {
    #registerSidePanel .side-panel-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #registerSidePanel .side-form-grid {
        column-gap: 5px !important;
        row-gap: 6px !important;
    }

    #registerSidePanel .option-grid,
    #registerSidePanel .mitem-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    #registerSidePanel .chip-toggle {
        font-size: 9px !important;
        letter-spacing: -0.7px !important;
    }

    #registerSidePanel .mfee-container {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    #registerSidePanel .register-contact-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px !important;
    }
}

/* 999.0.43 - Mobile option/maintenance chips: exact horizontal and vertical centering */
@media (max-width: 768px) {
    #registerSidePanel .option-grid .chip-toggle,
    #registerSidePanel .mitem-grid .chip-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-content: center !important;
        place-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 1px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
}

/* AI 임시등록함 */
.ai-draft-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:4px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;line-height:1}
.ai-draft-inbox-content{max-width:820px;width:min(94vw,820px);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.ai-draft-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-color);background:#f8fafc}
.ai-draft-toolbar p{margin:3px 0 0;font-size:12px;color:#64748b}
.ai-draft-title-count{font-size:12px;color:#64748b;font-weight:600;margin-left:5px}
.ai-draft-inbox-status{padding:10px 18px 0;font-size:12px;color:#64748b}
.ai-draft-inbox-list{padding:14px 18px 20px;overflow-y:auto;display:grid;gap:12px}
.ai-draft-simple-card{border:1px solid #dbe3ed;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.05);padding:15px}
.ai-draft-simple-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ai-draft-simple-head h3{font-size:15px;line-height:1.4;margin:0;color:#0f172a;word-break:break-word}
.ai-draft-simple-head p{font-size:12.5px;color:#334155;margin:6px 0 0}
.ai-draft-simple-head small{display:block;font-size:11px;color:#64748b;margin-top:6px}
.ai-draft-provider{white-space:nowrap;padding:4px 8px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:700}
.ai-draft-raw{margin-top:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;overflow:hidden}
.ai-draft-raw summary{cursor:pointer;padding:10px 12px;font-size:12.5px;font-weight:800;color:#334155;user-select:none}
.ai-draft-raw summary:hover{background:#f1f5f9}
.ai-draft-raw pre{white-space:pre-wrap;word-break:break-word;margin:0;padding:0 12px 12px;font:12.5px/1.6 inherit;color:#334155}
.ai-draft-simple-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:12px}
.ai-draft-simple-actions .btn{justify-content:center}
.ai-draft-empty{text-align:center;padding:55px 15px;color:#94a3b8}
.ai-draft-empty i{font-size:34px;margin-bottom:10px;display:block}
.mobile-ai-draft-icon{position:relative;display:inline-block}
.mobile-ai-draft-icon b{position:absolute;top:-8px;right:-11px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:9px;line-height:16px;text-align:center}
@media(max-width:768px){
 .ai-draft-inbox-content{width:100%;max-width:none;height:92vh;max-height:92vh;border-radius:16px 16px 0 0;position:absolute;bottom:0;margin:0}
 .ai-draft-toolbar{align-items:flex-start}
 .ai-draft-simple-actions{display:grid;grid-template-columns:1fr 1.5fr}
 .ai-draft-simple-actions .btn{width:100%}
}

/* 999.0.46 - Mobile account + AI sheets */
.ai-register-sheet{width:min(94vw,520px);max-width:520px;overflow:hidden}
.ai-sheet-header{min-height:62px}
.ai-register-body{padding:18px}
.ai-register-help{margin:0 0 14px;color:#64748b;font-size:13px;line-height:1.55}
.ai-register-label{display:block;margin-bottom:7px;color:#334155;font-size:12px;font-weight:800}
#aiInputText{box-sizing:border-box;width:100%;min-height:150px;border:1px solid #cbd5e1;border-radius:12px;padding:13px 14px;font-size:14px;line-height:1.55;resize:vertical;background:#fff;color:#0f172a;outline:none}
#aiInputText:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.ai-upload-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.ai-upload-btn{min-height:42px}
.ai-upload-note{font-size:12px;color:#94a3b8}
.ai-image-preview-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ai-input-status{min-height:18px;margin-top:10px;color:#64748b;font-size:12px;line-height:1.5;white-space:pre-line}
.ai-register-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:14px}
.ai-register-actions .btn{min-height:46px;justify-content:center;font-weight:800}

.mobile-account-sheet{width:100%;max-width:560px;position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.18);padding:8px 16px calc(18px + env(safe-area-inset-bottom));animation:mobileSheetUp .2s ease-out}
.mobile-sheet-handle{width:42px;height:5px;background:#d7dee8;border-radius:999px;margin:4px auto 14px}
.mobile-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 4px 16px;border-bottom:1px solid #e5e7eb}
.mobile-account-head strong{display:block;font-size:18px;color:#0f172a}
.mobile-account-head span{display:block;margin-top:4px;font-size:12px;color:#64748b}
.mobile-sheet-close{border:0;background:#f1f5f9;color:#475569;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
.mobile-account-links{padding-top:8px}
.mobile-account-links a,.mobile-account-links form button{box-sizing:border-box;width:100%;display:grid;grid-template-columns:28px 1fr 16px;align-items:center;gap:10px;min-height:52px;padding:0 10px;border:0;border-bottom:1px solid #f1f5f9;background:#fff;color:#0f172a;text-decoration:none;text-align:left;font-size:15px;font-weight:700;cursor:pointer}
.mobile-account-links a i:first-child,.mobile-account-links form button i:first-child{color:#3b82f6;text-align:center}
.mobile-account-links a i:last-child{color:#cbd5e1;font-size:11px}
.mobile-account-links form{margin:0}
.mobile-account-links .mobile-logout-btn{grid-template-columns:28px 1fr;color:#dc2626;border-bottom:0}
.mobile-account-links .mobile-logout-btn i{color:#dc2626!important}
@keyframes mobileSheetUp{from{transform:translate(-50%,24px);opacity:.65}to{transform:translate(-50%,0);opacity:1}}

@media(max-width:768px){
 body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 .mobile-bottom-bar{grid-template-columns:repeat(4,1fr)!important;height:64px!important;padding-bottom:env(safe-area-inset-bottom)!important}
 .m-nav-item{font-size:10.5px!important;gap:3px!important;min-width:0!important;padding:7px 2px!important}
 .m-nav-item i{font-size:18px!important}
 .m-nav-add{transform:none!important;border-radius:0!important;background:transparent!important;color:var(--accent-blue,#3b82f6)!important;box-shadow:none!important}
 .m-nav-add i{width:32px;height:32px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-blue,#3b82f6);color:#fff!important;font-size:16px!important}

 #aiRegisterModal{align-items:flex-end!important;padding:0!important}
 .ai-register-sheet{position:absolute;left:0;right:0;bottom:0;margin:0;width:100%;max-width:none;height:auto;max-height:90vh;border-radius:20px 20px 0 0;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
 .ai-sheet-header{position:sticky;top:0;z-index:2;background:#fff;min-height:58px;padding:0 16px;border-bottom:1px solid #e5e7eb}
 .ai-sheet-header h2{font-size:21px!important;letter-spacing:-.5px}
 .ai-sheet-header .close-btn{font-size:28px!important;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
 .ai-register-body{padding:16px}
 .ai-register-help{font-size:13px;line-height:1.5;margin-bottom:12px}
 #aiInputText{min-height:180px;font-size:16px!important;border-radius:14px;padding:14px}
 .ai-upload-row{justify-content:space-between}
 .ai-upload-btn{width:auto!important;min-height:44px;font-size:14px!important;border-radius:12px!important}
 .ai-register-actions{position:sticky;bottom:0;background:#fff;padding-top:10px;padding-bottom:4px;margin-top:12px}
 .ai-register-actions .btn{height:50px!important;font-size:15px!important;border-radius:13px!important}

 #aiDraftInboxModal{align-items:flex-end!important;padding:0!important}
 .ai-draft-inbox-content{height:88vh!important;max-height:88vh!important;border-radius:20px 20px 0 0!important;position:absolute!important;bottom:0!important;width:100%!important;margin:0!important}
 .ai-draft-modal-header{min-height:58px!important;padding:0 16px!important;background:#fff!important}
 .ai-draft-modal-header h2{font-size:19px!important;white-space:nowrap}
 .ai-draft-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:12px 14px!important;background:#f8fafc!important}
 .ai-draft-toolbar strong{font-size:15px!important}
 .ai-draft-toolbar p{font-size:11.5px!important;line-height:1.45!important;margin-top:3px!important}
 .ai-draft-toolbar .btn{width:auto!important;min-width:88px!important;height:40px!important;padding:0 12px!important;white-space:nowrap!important;font-size:13px!important;border-radius:11px!important;writing-mode:horizontal-tb!important}
 .ai-draft-inbox-status{padding:7px 14px 0!important;font-size:11px!important}
 .ai-draft-inbox-list{padding:10px 12px calc(18px + env(safe-area-inset-bottom))!important;gap:10px!important}
 .ai-draft-simple-card{padding:13px!important;border-radius:14px!important;box-shadow:none!important}
 .ai-draft-simple-head h3{font-size:14px!important;line-height:1.4!important}
 .ai-draft-simple-head p{font-size:12px!important;margin-top:5px!important}
 .ai-draft-simple-head small{font-size:10.5px!important;margin-top:5px!important}
 .ai-draft-provider{font-size:10px!important;padding:3px 7px!important}
 .ai-draft-raw{margin-top:10px!important}
 .ai-draft-raw summary{padding:11px 12px!important;font-size:13px!important}
 .ai-draft-raw pre{font-size:13px!important;line-height:1.6!important;padding:0 12px 12px!important}
 .ai-draft-simple-actions{grid-template-columns:1fr 1.45fr!important;gap:8px!important;padding-top:10px!important}
 .ai-draft-simple-actions .btn{height:44px!important;font-size:13px!important;border-radius:11px!important}
}