/* 
  여행 계획 앱 - 메인 스타일시트
  
  애플리케이션 전반의 테마, 레이아웃, 컴포넌트 스타일 및 
  반응형 디자인을 위한 미디어 쿼리를 정의합니다.
*/

:root {
            /* Colors — .pen design system (light theme) */
            --color-accent-red: #FF6B6B;
            --color-accent-teal: #4ECDC4;
            --color-accent-yellow: #FFE66D;
            --color-bg-primary: #FAFAFA;
            --color-bg-secondary: #FFFFFF;
            --color-bg-tertiary: #F8F8F8;
            --color-bg-input: #F5F5F5;
            --color-bg-light: #FAFAFA;
            --color-white: #FFFFFF;
            --color-text-primary: #000000;
            --color-text-secondary: #666666;
            --color-text-tertiary: #999999;
            --color-border: #E5E5E5;
            --color-border-light: #E0E0E0;
            --color-border-sidebar: #EAEAEA;

            /* Fonts */
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Inter', sans-serif;

            /* Font sizes */
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-md: 14px;
            --font-size-lg: 16px;
            --font-size-xl: 20px;
            --font-size-2xl: 24px;
            --font-size-3xl: 28px;

            /* Spacing */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 24px;
            --spacing-2xl: 32px;
            --spacing-3xl: 40px;

            /* Border radius */
            --radius-none: 0;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;

            /* Transitions */
            --transition: 0.25s ease-out;
            --transition-fast: 0.15s ease-out;

            /* Shadows */
            --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
            --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
        }

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

        body {
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            background-color: var(--color-bg-primary);
            display: flex;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .app-container {
            width: 100%;
            max-width: 1440px;
            height: 100vh;
            display: flex;
        }

        /* ==================== SIDEBAR ==================== */
        .sidebar {
            width: 380px;
            min-width: 380px;
            height: 100vh;
            background: var(--color-bg-secondary);
            padding: 36px 28px;
            display: flex;
            flex-direction: column;
            gap: 28px;
            border-right: 1px solid var(--color-border-sidebar);
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            z-index: 10;
            transition: width var(--transition), min-width var(--transition), padding var(--transition), border-color var(--transition);
        }

        .sidebar.collapsed {
            width: 0;
            min-width: 0;
            padding-left: 0;
            padding-right: 0;
            border-right-color: transparent;
        }

        .sidebar.collapsed > *:not(.toggle-sidebar) {
            opacity: 0;
            pointer-events: none;
        }

        /* Toggle Button */
        .toggle-sidebar {
            position: absolute;
            right: 0;
            top: 32px;
            width: 22px;
            height: 44px;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-right: none;
            border-radius: 6px 0 0 6px;
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-tertiary);
            transition: all var(--transition);
        }
        .toggle-sidebar:hover {
            background: var(--color-bg-tertiary);
            color: var(--color-text-primary);
        }
        .toggle-sidebar svg { width: 14px; height: 14px; transition: transform var(--transition); }

        .sidebar.collapsed .toggle-sidebar {
            right: -22px;
            border-radius: 0 6px 6px 0;
            border-right: 1px solid var(--color-border);
            border-left: none;
            background: var(--color-bg-secondary);
        }

        .sidebar.collapsed .toggle-sidebar svg {
            transform: rotate(180deg);
        }

        .sidebar::-webkit-scrollbar { width: 3px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--color-text-tertiary);
            font-size: 13px;
            text-decoration: none;
            transition: all var(--transition);
            margin-bottom: -12px;
        }
        .back-link:hover { color: var(--color-text-primary); }
        .back-link svg { width: 14px; height: 14px; }

        .sidebar-header { display: flex; flex-direction: column; gap: 8px; }
        .sidebar-header h1 {
            color: var(--color-text-primary);
            font-family: var(--font-heading);
            font-size: 28px;
            font-weight: 600;
            font-style: italic;
            letter-spacing: -0.5px;
        }
        .sidebar-header p { color: var(--color-text-secondary); font-size: 14px; }

        /* Search */
        .search-box {
            width: 100%;
            background: var(--color-bg-input);
            border: none;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            transition: all var(--transition);
        }
        .search-box:focus-within {
            box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
        }
        .search-box svg { width: 18px; height: 18px; color: var(--color-text-tertiary); flex-shrink: 0; }
        .search-box input {
            border: none; background: none; outline: none;
            font-family: var(--font-body); font-size: 14px; color: var(--color-text-primary); width: 100%;
        }
        .search-box input::placeholder { color: var(--color-text-tertiary); }

        /* Search results */
        .search-results {
            position: absolute; top: calc(100% + 4px); left: 0; right: 0;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 100; display: none;
            max-height: 360px; overflow-y: auto;
        }
        .search-results.active { display: block; }

        .search-result-item {
            padding: 12px 16px; cursor: pointer;
            display: flex; align-items: center; gap: 12px;
            transition: all var(--transition-fast);
            border-bottom: 1px solid var(--color-border-light);
        }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-item:hover { background: var(--color-bg-tertiary); }

        .search-result-item .result-icon {
            width: 36px; height: 36px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .search-result-item .result-icon svg { width: 16px; height: 16px; }
        .search-result-item .result-info { display: flex; flex-direction: column; gap: 2px; }
        .search-result-item .result-name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
        .search-result-item .result-country { font-size: 12px; color: var(--color-text-tertiary); }
        .search-result-item .result-tag {
            font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
            margin-left: auto; flex-shrink: 0;
        }

        /* ==================== DESTINATION LIST ==================== */
        .destination-list { display: flex; flex-direction: column; gap: 8px; }

        .dest-item {
            display: flex; align-items: center; gap: 12px;
            padding: 16px 14px;
            border-radius: var(--radius-md);
            border: 1px solid #F0F0F0;
            background: var(--color-bg-secondary);
            cursor: grab;
            transition: all var(--transition);
            position: relative;
        }
        .dest-item:hover {
            background: var(--color-bg-tertiary);
            box-shadow: 0 10px 24px rgba(0,0,0,0.09);
            transform: translateY(-2px);
        }
        .dest-item.active-item {
            border-color: var(--color-accent-teal);
            box-shadow: 0 0 0 2px rgba(78,205,196,0.15);
        }
        .dest-item.dragging { opacity: 0.4; transform: scale(0.96); }
        .dest-item.drag-over { border-color: var(--color-accent-teal); border-style: dashed; }

        .drag-handle {
            width: 24px; height: 24px;
            display: flex; justify-content: center; align-items: center;
            cursor: grab; color: var(--color-border); flex-shrink: 0;
            transition: color var(--transition);
        }
        .drag-handle:hover { color: var(--color-text-tertiary); }
        .drag-handle svg { width: 16px; height: 16px; }

        /* ==================== TRAVEL LEG (이동 구간 연결) ==================== */
        .travel-leg {
            display: flex; align-items: center; gap: 8px;
            padding: 2px 0 2px 48px;
            position: relative;
        }
        .travel-leg-track {
            display: flex; flex-direction: column; align-items: center;
            flex-shrink: 0; gap: 0;
        }
        .travel-leg-line-v {
            width: 2px; height: 28px; border-radius: 1px;
            opacity: 0.55;
        }
        .travel-leg-chip {
            display: flex; align-items: center; gap: 5px;
            font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
            background: var(--color-bg-tertiary);
            border: 1px solid var(--color-border-light);
            border-radius: 20px; padding: 4px 10px;
            white-space: nowrap;
        }
        .travel-leg-chip.loading { opacity: 0.45; }
        .travel-leg-chip-icon { font-size: 12px; }
        .travel-time-value { color: var(--color-text-primary); }

        /* Colored markers matching .pen design system */
        .dest-marker {
            width: 40px; height: 40px; border-radius: 20px;
            display: flex; justify-content: center; align-items: center;
            font-size: 14px; font-weight: 600; flex-shrink: 0;
            transition: all var(--transition);
            position: relative;
        }
        .dest-marker.marker-red {
            background: var(--color-accent-red);
            color: #fff;
            box-shadow: 0 2px 8px rgba(255,107,107,0.4);
        }
        .dest-item:hover .dest-marker.marker-red {
            box-shadow: 0 4px 16px rgba(255,107,107,0.5);
            transform: scale(1.08);
        }
        .dest-marker.marker-teal {
            background: var(--color-accent-teal);
            color: #000;
            box-shadow: 0 2px 8px rgba(78,205,196,0.4);
        }
        .dest-item:hover .dest-marker.marker-teal {
            box-shadow: 0 4px 16px rgba(78,205,196,0.5);
            transform: scale(1.08);
        }
        .dest-marker.marker-yellow {
            background: var(--color-accent-yellow);
            color: #000;
            box-shadow: 0 2px 8px rgba(255,230,109,0.4);
        }
        .dest-item:hover .dest-marker.marker-yellow {
            box-shadow: 0 4px 16px rgba(255,230,109,0.5);
            transform: scale(1.08);
        }
        .dest-marker.marker-dark {
            background: var(--color-text-primary);
            color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .dest-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
        .dest-name {
            color: var(--color-text-primary); font-size: 15px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dest-duration { color: var(--color-text-tertiary); font-size: 13px; }
        .dest-days-edit {
            cursor: pointer;
            border-bottom: 1px dashed transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .dest-days-edit:hover {
            color: var(--color-accent-teal);
            border-color: var(--color-accent-teal);
        }
        .dest-inline-editor {
            display: inline-flex;
            gap: 4px;
            align-items: center;
        }
        .dest-inline-editor input {
            font-size: 12px;
            padding: 2px 4px;
            border: 1px solid var(--color-border);
            border-radius: 4px;
            background: var(--color-bg-secondary);
            color: var(--color-text-primary);
            outline: none;
        }
        .dest-inline-editor input:focus {
            border-color: var(--color-accent-teal);
        }
        .dest-inline-editor .inline-days {
            width: 44px;
            text-align: center;
        }
        .dest-inline-editor .inline-date {
            width: 120px;
        }

        .delete-btn {
            width: 32px; height: 32px;
            background: transparent;
            border-radius: 6px;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; flex-shrink: 0;
            transition: all var(--transition); border: 1px solid transparent;
        }
        .delete-btn:hover {
            background: #FFF0F0;
            border-color: rgba(255,75,75,0.15);
        }
        .delete-btn svg { width: 14px; height: 14px; color: var(--color-text-tertiary); transition: color var(--transition); }
        .delete-btn:hover svg { color: var(--color-accent-red); }

        /* Add button */
        .add-dest-btn {
            display: flex; justify-content: center; align-items: center; gap: 12px;
            padding: 14px 18px; border-radius: var(--radius-md);
            border: 1px solid #E8E8E8;
            background: var(--color-bg-light);
            cursor: pointer; transition: all var(--transition);
        }
        .add-dest-btn:hover {
            border-color: var(--color-accent-teal);
            background: rgba(78,205,196,0.05);
        }
        .add-dest-btn svg { width: 16px; height: 16px; color: var(--color-text-tertiary); transition: color var(--transition); }
        .add-dest-btn:hover svg { color: var(--color-accent-teal); }
        .add-dest-btn span { color: var(--color-text-tertiary); font-size: 15px; font-weight: 500; transition: color var(--transition); }
        .add-dest-btn:hover span { color: var(--color-accent-teal); }

        .sidebar-divider { width: 100%; height: 1px; background: var(--color-border); }

        /* Trip Summary */
        .trip-summary { display: flex; flex-direction: column; gap: 16px; }
        .trip-summary h3 { color: var(--color-text-primary); font-size: 16px; font-weight: 600; }
        .summary-stats { display: flex; flex-direction: column; gap: 12px; }
        .stat-row { display: flex; justify-content: space-between; }
        .stat-label { color: var(--color-text-secondary); font-size: 14px; }
        .stat-value { color: var(--color-text-primary); font-size: 14px; font-weight: 600; }

        /* ==================== SUMMARY CARDS ==================== */
        .summary-3d-cards { display: flex; gap: 8px; }
        .summary-card-3d {
            flex: 1; padding: var(--spacing-md);
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-border);
            background: var(--color-bg-secondary);
            display: flex; flex-direction: column; gap: 6px; align-items: center;
            text-align: center; transition: all var(--transition); cursor: default;
        }
        .summary-card-3d:hover {
            border-color: #BBBBBB;
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }
        .summary-card-3d .card-icon {
            width: 30px; height: 30px; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
        }
        .summary-card-3d .card-icon svg { width: 15px; height: 15px; }
        .summary-card-3d .card-value { font-size: 18px; font-weight: 700; font-family: var(--font-heading); font-style: italic; }
        .summary-card-3d .card-label { font-size: 11px; color: var(--color-text-tertiary); }

        .card-red .card-icon { background: rgba(255,107,107,0.1); }
        .card-red .card-icon svg { color: var(--color-accent-red); }
        .card-red .card-value { color: var(--color-accent-red); }

        .card-teal .card-icon { background: rgba(78,205,196,0.1); }
        .card-teal .card-icon svg { color: var(--color-accent-teal); }
        .card-teal .card-value { color: var(--color-accent-teal); }

        .card-yellow .card-icon { background: rgba(255,230,109,0.15); }
        .card-yellow .card-icon svg { color: #c4920a; }
        .card-yellow .card-value { color: #c4920a; }

        /* ==================== ACTION BUTTONS ==================== */
        .action-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

        .save-btn {
            width: 100%; padding: 14px 0;
            background: #111111; border-radius: var(--radius-md);
            display: flex; justify-content: center; align-items: center; gap: 8px;
            cursor: pointer; border: none;
            transition: all var(--transition);
        }
        .save-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
        .save-btn:active { opacity: 0.9; }
        .save-btn span { color: #fff; font-size: 15px; font-weight: 600; }
        .save-btn svg { width: 16px; height: 16px; color: #fff; }

        .share-btn {
            width: 100%; padding: 14px 0;
            background: var(--color-bg-input);
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
            display: flex; justify-content: center; align-items: center; gap: 8px;
            cursor: pointer; transition: all var(--transition);
        }
        .share-btn:hover { border-color: var(--color-border); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
        .share-btn span { color: var(--color-text-primary); font-size: 15px; font-weight: 500; }
        .share-btn svg { width: 16px; height: 16px; color: var(--color-text-secondary); }

        /* ==================== MAP AREA ==================== */
        .map-area {
            flex: 1; height: 100vh;
            display: flex; flex-direction: column;
            position: relative;
        }

        .map-controls {
            width: 100%; background: var(--color-bg-secondary);
            padding: 16px 28px;
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid var(--color-border-sidebar);
            z-index: 1000;
        }

        .controls-left { display: flex; gap: 12px; align-items: center; }

        /* 현재 출발지 칩 (지도 컨트롤 중앙) */
        .departure-chip {
            display: none; align-items: center; gap: 7px;
            padding: 5px 12px; border-radius: 20px;
            background: rgba(78,205,196,0.1);
            border: 1px solid rgba(78,205,196,0.35);
            font-size: 12px; font-weight: 600; color: var(--color-text-primary);
            max-width: 220px; overflow: hidden;
            animation: chipFadeIn 0.3s ease;
        }
        .departure-chip.visible { display: flex; }
        @keyframes chipFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .departure-chip-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #4ECDC4; flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(78,205,196,0.25);
            animation: pulseDot 1.8s ease-in-out infinite;
        }
        @keyframes pulseDot {
            0%,100% { box-shadow: 0 0 0 3px rgba(78,205,196,0.25); }
            50%      { box-shadow: 0 0 0 6px rgba(78,205,196,0.08); }
        }
        .departure-chip-label {
            font-size: 10px; color: var(--color-text-tertiary);
            font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .departure-chip-name {
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        /* 사이드바 출발지 아이템 강조 */
        .dest-item.is-departure {
            border-color: rgba(78,205,196,0.5);
            background: linear-gradient(135deg, rgba(78,205,196,0.06) 0%, var(--color-bg-secondary) 100%);
        }
        .dest-item.is-departure .dest-marker {
            outline: 2px solid rgba(78,205,196,0.5);
            outline-offset: 2px;
        }
        .departure-tag {
            font-size: 10px; font-weight: 700; color: #4ECDC4;
            background: rgba(78,205,196,0.12); border-radius: 4px;
            padding: 1px 6px; letter-spacing: 0.2px;
        }

        .view-btn {
            padding: 10px 18px; border-radius: 6px;
            display: flex; justify-content: center; align-items: center; gap: 6px;
            cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500;
            border: none; transition: all var(--transition);
        }
        .view-btn.active {
            background: var(--color-text-primary); color: #fff;
        }
        .view-btn:not(.active) {
            background: var(--color-bg-input); color: var(--color-text-secondary);
            border: 1px solid transparent;
        }
        .view-btn:not(.active):hover {
            background: var(--color-bg-input);
            color: var(--color-text-primary);
        }
        .view-btn svg { width: 14px; height: 14px; }

        .controls-right { display: flex; gap: 8px; align-items: center; }

        .map-ctrl-btn {
            width: 44px; height: 44px; border-radius: 6px;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: all var(--transition);
        }
        .map-ctrl-btn:hover {
            background: var(--color-bg-input);
            border-color: #BBBBBB;
        }
        .map-ctrl-btn:active { transform: scale(0.93); }
        .map-ctrl-btn svg { width: 16px; height: 16px; color: var(--color-text-secondary); }
        .map-ctrl-btn.on {
            background: rgba(78, 205, 196, 0.12);
            border-color: #4ECDC4;
        }
        .map-ctrl-btn.on svg { color: #4ECDC4; }
        .map-ctrl-btn.on:hover { background: rgba(78, 205, 196, 0.2); }
        .map-ctrl-divider { width: 1px; height: 22px; background: var(--color-border); margin: 0 2px; }

        /* ── 핀 필터 드롭다운 ── */
        .pin-filter-wrap { position: relative; }
        .pin-filter-wrap .map-ctrl-btn.has-hidden {
            background: rgba(231,76,60,0.12);
            border-color: #E74C3C;
        }
        .pin-filter-wrap .map-ctrl-btn.has-hidden svg { color: #E74C3C; }

        .pin-filter-dropdown {
            display: none; position: absolute; top: calc(100% + 6px); right: 0;
            min-width: 220px; max-height: 420px; overflow-y: auto;
            background: var(--color-bg-secondary); border: 1px solid var(--color-border);
            border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            z-index: 2000; padding: 6px 0;
        }
        .pin-filter-dropdown.open { display: block; }

        .pin-filter-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 14px 6px; border-bottom: 1px solid var(--color-border);
            margin-bottom: 4px;
        }
        .pin-filter-header span {
            font-size: 12px; font-weight: 700; color: var(--color-text-primary);
        }
        .pin-filter-toggle-all {
            font-size: 11px; color: #4ECDC4; cursor: pointer;
            background: none; border: none; font-weight: 600;
            padding: 2px 6px; border-radius: 4px;
        }
        .pin-filter-toggle-all:hover { background: rgba(78,205,196,0.1); }

        .pin-filter-group {
            padding: 4px 0;
        }
        .pin-filter-group-header {
            display: flex; align-items: center; gap: 8px;
            padding: 6px 14px; cursor: pointer; user-select: none;
        }
        .pin-filter-group-header:hover { background: var(--color-bg-input); }
        .pin-filter-group-toggle {
            width: 16px; height: 16px; border-radius: 3px;
            border: 2px solid var(--color-border); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s ease;
        }
        .pin-filter-group-toggle.checked {
            background: #4ECDC4; border-color: #4ECDC4;
        }
        .pin-filter-group-toggle.partial {
            background: rgba(78,205,196,0.4); border-color: #4ECDC4;
        }
        .pin-filter-group-toggle.checked::after { content: ''; display: block; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
        .pin-filter-group-toggle.partial::after { content: ''; display: block; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
        .pin-filter-group-emoji { font-size: 14px; display: flex; align-items: center; }
        .pin-filter-group-emoji .cat-icon { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,0.2)); }
        .pin-filter-group-label { font-size: 12px; font-weight: 600; color: var(--color-text-primary); flex: 1; }
        .pin-filter-group-count { font-size: 10px; color: var(--color-text-tertiary); font-weight: 500; }

        .pin-filter-sub { padding-left: 24px; }
        .pin-filter-item {
            display: flex; align-items: center; gap: 8px;
            padding: 4px 14px 4px 0; cursor: pointer; user-select: none;
        }
        .pin-filter-item:hover { background: var(--color-bg-input); }
        .pin-filter-item-toggle {
            width: 14px; height: 14px; border-radius: 3px;
            border: 1.5px solid var(--color-border); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s ease;
        }
        .pin-filter-item-toggle.checked {
            background: #4ECDC4; border-color: #4ECDC4;
        }
        .pin-filter-item-toggle.checked::after { content: ''; display: block; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); }
        .pin-filter-item-label { font-size: 11px; color: var(--color-text-secondary); flex: 1; }
        .pin-filter-item-count { font-size: 10px; color: var(--color-text-tertiary); }

        /* ── 지역 필터 섹션 ── */
        .pin-filter-region-section {
            padding: 6px 0;
            border-bottom: 1px solid var(--color-border);
            margin-bottom: 4px;
        }
        .pin-filter-region-header {
            display: flex; align-items: center; gap: 8px;
            padding: 4px 14px 6px; cursor: pointer; user-select: none;
        }
        .pin-filter-region-header:hover { background: var(--color-bg-input); }
        .pin-filter-region-title {
            font-size: 12px; font-weight: 600; color: var(--color-text-primary);
        }
        .pin-filter-region-chips {
            display: flex; flex-wrap: wrap; gap: 4px;
            padding: 2px 14px 4px;
        }
        .pin-filter-region-chip {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 8px; border-radius: 12px;
            font-size: 11px; font-weight: 500; cursor: pointer;
            border: 1px solid var(--color-border);
            background: var(--color-bg-tertiary);
            color: var(--color-text-secondary);
            transition: all 0.15s ease;
        }
        .pin-filter-region-chip:hover { background: var(--color-bg-input); }
        .pin-filter-region-chip.active {
            background: color-mix(in srgb, var(--region-color) 15%, transparent);
            border-color: color-mix(in srgb, var(--region-color) 50%, transparent);
            color: var(--region-color);
            font-weight: 600;
        }
        /* PNG 이미지 아이콘 공통 (흰 배경에서: invert로 검정 아이콘) */
        .place-icon {
            width: 18px; height: 18px;
            flex-shrink: 0;
            object-fit: contain;
            border-radius: 3px;
            filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,0.3));
        }
        /* 어두운 배경 핀 마커: 밝기 + 글로우 강화 */
        .place-marker .place-icon {
            width: 30px; height: 30px;
            filter: brightness(1.15) drop-shadow(0 0 3px rgba(255,255,255,0.4));
            border-radius: 50%;
        }
        /* 어두운 배경 클러스터 마커 */
        .cluster-marker-icon .place-icon {
            width: 30px; height: 30px;
            filter: brightness(1.15) drop-shadow(0 0 3px rgba(255,255,255,0.4));
            border-radius: 50%;
        }
        .cluster-multi .place-icon {
            width: 20px; height: 20px;
            filter: brightness(1.1) drop-shadow(0 0 2px rgba(255,255,255,0.3));
            border-radius: 3px;
        }
        /* 어두운 배경 패널 아이템: 밝기 강화 */
        .cluster-panel-item-icon .place-icon {
            width: 22px; height: 22px;
            filter: brightness(1.1) drop-shadow(0 0 2px rgba(255,255,255,0.3));
            border-radius: 3px;
        }
        .cluster-panel-tab .place-icon {
            width: 16px; height: 16px;
            vertical-align: -2px;
            filter: brightness(1.1);
            border-radius: 2px;
        }
        .region-icon {
            width: 12px; height: 12px;
            vertical-align: -1px;
            flex-shrink: 0;
        }
        .cat-popup-region-tab .region-icon {
            width: 11px; height: 11px;
        }

        .pin-filter-region-chip-count {
            font-size: 10px; opacity: 0.7;
        }

        .map-canvas { flex: 1; position: relative; }
        #map { width: 100%; height: 100%; background: #1a1a2e; }

        /* ==================== CUSTOM MAP MARKERS ==================== */
        .custom-marker {
            width: 40px; height: 40px; border-radius: 20px;
            display: flex; justify-content: center; align-items: center;
            font-family: var(--font-body); font-size: 14px; font-weight: 600;
            border: 2px solid rgba(255,255,255,0.9);
            transition: all var(--transition);
            position: relative;
        }
        .custom-marker::after {
            content: '';
            position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
            width: 24px; height: 6px;
            border-radius: 50%;
            filter: blur(3px); opacity: 0.4;
        }
        .custom-marker:hover { transform: scale(1.2) translateY(-4px); }

        .marker-red-map {
            background: var(--color-accent-red); color: #fff;
            box-shadow: 0 4px 16px rgba(255,107,107,0.5);
        }
        .marker-red-map::after { background: var(--color-accent-red); }

        .marker-teal-map {
            background: var(--color-accent-teal); color: #000;
            box-shadow: 0 4px 16px rgba(78,205,196,0.5);
        }
        .marker-teal-map::after { background: var(--color-accent-teal); }

        .marker-yellow-map {
            background: var(--color-accent-yellow); color: #000;
            box-shadow: 0 4px 16px rgba(255,230,109,0.5);
        }
        .marker-yellow-map::after { background: var(--color-accent-yellow); }

        .marker-dark-map {
            background: var(--color-text-primary); color: #fff;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            border-color: rgba(0,0,0,0.2);
        }
        .marker-dark-map::after { background: #000; }

        /* Marker pulse animation */
        .marker-pulse {
            position: absolute; inset: -8px;
            border-radius: 16px;
            border: 2px solid;
            animation: pulse 2s ease-out infinite;
            pointer-events: none;
        }
        @keyframes pulse {
            0% { opacity: 0.6; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.5); }
        }

        /* ==================== PLACE MARKERS (attractions / restaurants / landmarks) ==================== */
        .place-marker {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            background: rgba(10, 14, 24, 0.95);
            border: 3px solid var(--pin-color, #4ECDC4);
            box-shadow: 0 2px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .place-marker::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.06), transparent 55%);
            pointer-events: none;
        }
        .place-marker:hover { transform: scale(1.3); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }

        .place-marker-attraction {
            width: 20px; height: 20px;
            background: #FF6B6B;
            box-shadow: 0 2px 8px rgba(255,107,107,0.65);
        }
        .place-marker-restaurant {
            width: 20px; height: 20px;
            background: #4ECDC4;
            box-shadow: 0 2px 8px rgba(78,205,196,0.65);
        }
        .place-marker-landmark {
            width: 30px; height: 30px;
            background: #FFE66D;
            box-shadow: 0 3px 14px rgba(255,215,0,0.75);
            border-color: rgba(184,134,11,0.55);
            font-size: 15px; line-height: 1;
        }
        .popup-place-type {
            font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
            text-transform: uppercase; opacity: 0.55; margin-bottom: 3px;
        }
        .popup-place-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
        .popup-add-btn {
            margin-top: 10px; width: 100%;
            padding: 8px 12px; border-radius: 6px; border: none;
            background: var(--color-text-primary); color: #fff;
            font-size: 12px; font-weight: 600; font-family: var(--font-body);
            cursor: pointer; transition: background 0.15s ease, transform 0.1s ease;
            display: flex; align-items: center; justify-content: center; gap: 5px;
        }
        .popup-add-btn:hover { background: #2a2a2a; transform: translateY(-1px); }
        .popup-add-btn.added {
            background: #4ECDC4; color: #000;
            pointer-events: none;
        }
        .popup-add-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

        /* Leaflet overrides */
        .leaflet-container { background: #1a1a2e !important; }
        .leaflet-tile-pane { opacity: 1; }

        /* 프로그레시브 타일 로딩 — 저해상도 배경 + 고해상도 전경 */
        .tile-layer-low {
            opacity: 1;
            image-rendering: auto;    /* 저해상도 확대 시 보간 처리 (부드럽게) */
            filter: brightness(0.85); /* 저해상도는 약간 어둡게 (전환 자연스럽게) */
        }
        .tile-layer-high .leaflet-tile {
            will-change: opacity;
            transition: opacity 0.3s ease-in;
        }
        .leaflet-popup-content-wrapper {
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
        }
        .leaflet-popup-content { margin: 14px 18px; font-family: var(--font-body); }
        .leaflet-popup-tip { background: var(--color-bg-secondary); }
        .popup-title { font-weight: 600; font-size: 14px; color: var(--color-text-primary); margin-bottom: 4px; }
        .popup-duration { font-size: 12px; color: var(--color-text-tertiary); }
        .popup-budget { font-size: 12px; color: var(--color-accent-teal); margin-top: 4px; font-weight: 600; }

        /* ==================== ROUTE INFO ==================== */
        .route-info {
            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
            background: var(--color-bg-secondary);
            padding: 11px 20px; border-radius: 10px;
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-md);
            z-index: 800;
            display: none; align-items: center; gap: 16px;
        }
        .route-info.active { display: flex; }
        .route-info .route-stat { display: flex; align-items: center; gap: 6px; }
        .route-info .route-stat svg { width: 14px; height: 14px; color: var(--color-accent-teal); }
        .route-info .route-stat span { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
        .route-info .route-divider { width: 1px; height: 16px; background: var(--color-border); }

        /* ==================== FLOATING GLOBE ==================== */
        .floating-globe {
            position: absolute;
            bottom: 80px; right: 20px;
            width: 48px; height: 48px;
            border-radius: 50%;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            z-index: 900;
            box-shadow: var(--shadow-md);
            transition: all var(--transition);
            animation: float 3s ease-in-out infinite;
        }
        .floating-globe:hover {
            transform: scale(1.1) translateY(-3px);
            box-shadow: var(--shadow-lg);
            border-color: var(--color-accent-teal);
        }
        .floating-globe svg { width: 20px; height: 20px; color: var(--color-text-secondary); }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        /* ==================== TOAST ==================== */
        .toast {
            position: fixed; bottom: 24px; left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: var(--color-text-primary);
            color: #fff; padding: 12px 20px; border-radius: var(--radius-md);
            font-family: var(--font-body); font-size: 14px; font-weight: 500;
            box-shadow: var(--shadow-lg);
            z-index: 10000; opacity: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
            display: flex; align-items: center; gap: 10px;
        }
        .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        .toast svg { width: 16px; height: 16px; flex-shrink: 0; }

        /* ==================== MODAL ==================== */
        .modal-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.35);
            z-index: 9000;
            display: none; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.25s;
        }
        .modal-overlay.active { display: flex; opacity: 1; }

        .modal {
            background: var(--color-bg-secondary);
            border: none;
            border-radius: 16px; padding: 28px;
            width: 440px; max-width: 90vw;
            box-shadow: 0 8px 40px rgba(0,0,0,0.09);
            display: flex; flex-direction: column; gap: 20px;
            transform: scale(0.95) translateY(12px);
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .modal-overlay.active .modal { transform: scale(1) translateY(0); }

        .modal-header { display: flex; justify-content: space-between; align-items: center; }
        .modal h2 {
            font-family: var(--font-heading); font-size: 22px; font-weight: 600;
            font-style: italic; color: var(--color-text-primary);
        }
        .modal-close {
            width: 32px; height: 32px; border-radius: 16px;
            background: var(--color-bg-input);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; border: none; transition: all var(--transition);
        }
        .modal-close:hover { background: var(--color-border); }
        .modal-close svg { width: 14px; height: 14px; color: var(--color-text-secondary); }

        .modal-field { display: flex; flex-direction: column; gap: 6px; }
        .modal-field label { font-size: 14px; font-weight: 600; color: #111111; letter-spacing: 0.3px; }
        .modal-field input, .modal-field select {
            padding: 14px 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md); background: var(--color-bg-input);
            font-family: var(--font-body); font-size: 14px;
            color: var(--color-text-primary); outline: none;
            transition: all var(--transition);
        }
        .modal-field input:focus {
            border-color: #111111;
            border-width: 1.5px;
        }
        .modal-field input::placeholder { color: var(--color-text-tertiary); }
        .modal-field select { appearance: none; cursor: pointer; background: var(--color-bg-input); }

        .modal-row { display: flex; gap: 12px; }
        .modal-row .modal-field { flex: 1; }

        .modal-actions { display: flex; gap: 12px; }

        .modal-cancel {
            flex: 1; padding: 0; border-radius: var(--radius-md); height: 46px;
            border: none;
            background: var(--color-bg-input);
            cursor: pointer; font-family: var(--font-body); font-size: 14px;
            font-weight: 500; color: var(--color-text-secondary);
            transition: all var(--transition);
        }
        .modal-cancel:hover { background: var(--color-border); color: var(--color-text-primary); }

        .modal-confirm {
            flex: 1; padding: 0; border-radius: var(--radius-md); height: 46px; border: none;
            background: #111111; color: #fff;
            cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600;
            transition: all var(--transition);
        }
        .modal-confirm:hover { background: #222; box-shadow: var(--shadow-sm); }

        /* ==================== TRANSPORT MODAL ==================== */
        .transport-modal { width: 400px; align-items: center; gap: 20px; }
        .transport-route-bar {
            display: flex; align-items: center; gap: 10px; width: 100%;
            padding: 12px 16px; background: var(--color-bg-tertiary);
            border-radius: var(--radius-md); border: 1px solid var(--color-border);
        }
        .transport-route-city {
            font-size: 13px; font-weight: 600; color: var(--color-text-primary);
            flex: 1; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .transport-route-arrow { font-size: 18px; color: var(--color-text-tertiary); flex-shrink: 0; }
        .transport-options { display: flex; gap: 10px; width: 100%; }
        .transport-opt-btn {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 18px 8px; border: 2px solid var(--color-border);
            border-radius: 10px; background: var(--color-bg-secondary);
            cursor: pointer; transition: all 0.2s ease; font-family: var(--font-body);
        }
        .transport-opt-btn:hover {
            border-color: #4ECDC4; background: rgba(78,205,196,0.05);
            transform: translateY(-3px); box-shadow: var(--shadow-sm);
        }
        .transport-opt-icon { font-size: 26px; line-height: 1; }
        .transport-opt-label { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }

        /* ==================== BASE TIME BADGE ==================== */
        .base-time-badge {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 12px 14px;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            position: relative;
            cursor: pointer;
        }
        .base-time-icon {
            font-size: 16px; line-height: 1;
            padding-top: 1px; flex-shrink: 0;
        }
        .base-time-info { flex: 1; min-width: 0; }
        .base-time-label {
            font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
            text-transform: uppercase; color: var(--color-text-tertiary);
        }
        .base-time-value {
            font-size: 14px; font-weight: 700;
            color: var(--color-text-primary); margin-top: 3px;
            letter-spacing: -0.2px;
        }
        .base-time-sub {
            font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px;
        }
        .base-time-edit {
            background: none; border: none; cursor: pointer;
            padding: 4px; border-radius: 5px;
            color: var(--color-text-tertiary); flex-shrink: 0;
            transition: all var(--transition);
        }
        .base-time-edit:hover { background: var(--color-border); color: var(--color-text-primary); }
        .base-time-edit svg { width: 13px; height: 13px; display: block; }

        /* Time indicator chip on destination item */
        .dest-time-chip {
            display: inline-block;
            font-size: 10px; font-weight: 600;
            color: var(--color-accent-teal);
            background: rgba(78,205,196,0.1);
            border-radius: 4px; padding: 1px 5px;
            margin-left: 4px; vertical-align: middle;
        }

        /* ==================== FLIGHT SCHEDULE MODAL ==================== */
        .flight-schedule-modal { width: 540px; max-width: 94vw; }

        .flight-sched-title { display: flex; align-items: center; gap: 12px; }
        .flight-sched-icon {
            width: 40px; height: 40px;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }
        .flight-sched-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 3px; }

        .flight-sched-route-bar {
            display: flex; align-items: center; gap: 10px;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: 10px; padding: 14px 20px;
        }
        .flight-sched-airport { flex: 1; }
        .flight-sched-airport-right { text-align: right; }
        .flight-sched-code {
            font-size: 22px; font-weight: 700; letter-spacing: 2px;
            color: var(--color-text-primary);
        }
        .flight-sched-city { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }

        .flight-sched-route-line {
            flex: 1; display: flex; align-items: center; gap: 6px;
        }
        .flight-sched-route-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--color-border); flex-shrink: 0;
        }
        .flight-sched-route-track {
            flex: 1; height: 1px; background: var(--color-border);
            display: flex; align-items: center; justify-content: center;
        }
        .flight-sched-plane-icon { font-size: 13px; color: var(--color-text-tertiary); line-height: 1; }

        .flight-sched-section-label {
            font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
            text-transform: uppercase; color: var(--color-text-tertiary);
            padding-bottom: 6px;
            border-bottom: 1px solid var(--color-border-light);
        }

        /* Flight tab switcher */
        .flight-tab-switcher {
            display: flex; gap: 0;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md); overflow: hidden;
        }
        .flight-tab-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 9px 12px; font-size: 13px; font-weight: 600;
            background: var(--color-bg-secondary);
            border: none; cursor: pointer;
            color: var(--color-text-secondary);
            transition: all var(--transition);
        }
        .flight-tab-btn:first-child { border-right: 1px solid var(--color-border); }
        .flight-tab-btn.active {
            background: var(--color-text-primary);
            color: #fff;
        }
        .flight-tab-btn.active svg { stroke: #fff; }
        .flight-tab-btn:not(.active):hover { background: var(--color-bg-tertiary); }

        /* Flight tab panels */
        .flight-tab-panel { display: none; flex-direction: column; gap: 16px; }
        .flight-tab-panel.active { display: flex; }

        /* 도착 위치 입력 (추천 + 지도 픽) */
        .trnTo-field { position: relative; }
        .trnTo-input-row { display: flex; gap: 6px; }
        .trnTo-input-row input { flex: 1; }
        .trnTo-pick-btn {
            flex-shrink: 0; width: 38px; height: 38px;
            background: var(--color-bg-primary);
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-md); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--color-text-secondary);
            transition: all var(--transition);
        }
        .trnTo-pick-btn:hover { border-color: #4ECDC4; color: #4ECDC4; }
        .trnTo-pick-btn.active { border-color: #4ECDC4; background: rgba(78,205,196,0.12); color: #4ECDC4; }
        .trnTo-pick-btn svg { width: 15px; height: 15px; }

        /* 추천 장소 드롭다운 */
        .trnTo-dropdown {
            display: none;
            position: absolute; left: 0; right: 0; top: 100%;
            z-index: 200;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            max-height: 220px; overflow-y: auto;
            margin-top: 4px;
        }
        .trnTo-dropdown.open { display: block; }
        .trnTo-section-label {
            font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
            text-transform: uppercase; color: var(--color-text-tertiary);
            padding: 8px 12px 4px;
        }
        .trnTo-place-item {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 12px; cursor: pointer;
            transition: background var(--transition);
        }
        .trnTo-place-item:hover { background: var(--color-bg-tertiary); }
        .trnTo-place-emoji { font-size: 14px; flex-shrink: 0; }
        .trnTo-place-name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
        .trnTo-place-dist { font-size: 11px; color: var(--color-text-tertiary); margin-top: 1px; }

        /* 지도 픽 모드 배너 */
        .map-pick-banner {
            position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
            z-index: 1000;
            display: flex; align-items: center; gap: 10px;
            background: var(--color-text-primary);
            color: var(--color-bg-secondary);
            padding: 10px 16px; border-radius: 24px;
            font-size: 13px; font-weight: 600;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            white-space: nowrap;
            pointer-events: all;
        }
        .map-pick-banner button {
            background: rgba(255,255,255,0.2); border: none; border-radius: 12px;
            color: inherit; padding: 3px 10px; font-size: 12px; font-weight: 600;
            cursor: pointer; transition: background var(--transition);
        }
        .map-pick-banner button:hover { background: rgba(255,255,255,0.35); }

        /* Transport mode select (교통정보 모달) */
        .transport-mode-select { display: flex; gap: 6px; }
        .transport-mode-btn {
            flex: 1; padding: 7px 2px;
            font-size: 12px; font-weight: 600; text-align: center;
            background: var(--color-bg-primary);
            border: 1.5px solid var(--color-border);
            border-radius: var(--radius-md); cursor: pointer;
            color: var(--color-text-secondary);
            transition: all var(--transition);
        }
        .transport-mode-btn.active {
            background: rgba(78,205,196,0.12);
            border-color: #4ECDC4; color: #4ECDC4;
        }
        .transport-mode-btn:not(.active):hover { background: var(--color-bg-tertiary); }

        /* Transport segment card (경로 목록에 표시) */
        .transport-segment-card {
            display: flex; align-items: center; gap: 8px;
            padding: 4px 10px 4px 48px;
        }
        .tsc-inner {
            flex: 1; display: flex; align-items: center; gap: 8px;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border-light);
            border-radius: 10px; padding: 7px 10px;
            min-width: 0;
        }
        .tsc-icon {
            font-size: 14px; flex-shrink: 0;
            width: 26px; height: 26px; border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            background: var(--color-bg-tertiary);
        }
        .tsc-route {
            font-size: 12px; font-weight: 600;
            color: var(--color-text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            flex: 1; min-width: 0;
        }
        .tsc-time {
            font-size: 11px; color: var(--color-text-tertiary);
            white-space: nowrap; flex-shrink: 0;
        }

        /* Add Category Modal */
        .add-category-modal { width: 400px; max-width: 92vw; }

        .add-category-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .add-category-card {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; padding: 24px 16px;
            background: var(--color-bg-primary);
            border: 1.5px solid var(--color-border);
            border-radius: 14px; cursor: pointer;
            transition: all 0.18s ease;
            text-align: center;
        }
        .add-category-card:hover {
            border-color: #4ECDC4;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(78,205,196,0.15);
        }
        .add-category-card:active { transform: translateY(0) scale(0.97); }

        .add-category-icon {
            width: 48px; height: 48px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .add-category-icon svg { width: 22px; height: 22px; }

        .add-category-label {
            font-size: 14px; font-weight: 700;
            color: var(--color-text-primary);
        }
        .add-category-desc {
            font-size: 11px; color: var(--color-text-tertiary); line-height: 1.4;
        }

        /* Share modal */
        .share-link-row { display: flex; gap: 8px; }
        .share-link-row input {
            flex: 1; padding: 10px 14px;
            border: 1px solid var(--color-border); border-radius: 6px;
            font-family: var(--font-body); font-size: 13px;
            color: var(--color-text-secondary); background: var(--color-bg-input);
            outline: none;
        }
        .copy-btn {
            padding: 10px 16px; border-radius: 6px; border: none;
            background: var(--color-text-primary); color: #fff;
            cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600;
            transition: all var(--transition); white-space: nowrap;
        }
        .copy-btn:hover { background: #222; }

        .share-tabs { display: flex; gap: 4px; background: var(--color-bg-input); border-radius: var(--radius-md); padding: 4px; }
        .share-tab {
            flex: 1; padding: 7px 14px; border-radius: 6px; text-align: center;
            font-size: 13px; font-weight: 500; cursor: pointer;
            transition: all var(--transition); border: none; background: none;
            color: var(--color-text-tertiary);
        }
        .share-tab.active {
            background: var(--color-bg-secondary); color: var(--color-text-primary);
            box-shadow: var(--shadow-sm);
        }
        .share-tab:not(.active):hover { color: var(--color-text-primary); }

        .share-email-row { display: flex; gap: 8px; }
        .share-email-row input {
            flex: 1; padding: 10px 14px;
            border: 1px solid var(--color-border); border-radius: 6px;
            background: var(--color-bg-input);
            font-family: var(--font-body); font-size: 13px;
            color: var(--color-text-primary); outline: none;
        }
        .share-email-row input::placeholder { color: var(--color-text-tertiary); }

        .share-invite-btn {
            width: 100%; padding: 12px 0;
            background: var(--color-text-primary); border-radius: 6px;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; border: none;
            font-family: var(--font-body); font-size: 14px; font-weight: 600;
            color: #fff; transition: all var(--transition);
        }
        .share-invite-btn:hover { background: #222; }

        /* Delete confirm modal */
        .delete-modal-icon {
            width: 56px; height: 56px; border-radius: 28px;
            background: #FFF0F0;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto;
        }
        .delete-modal-icon svg { width: 24px; height: 24px; color: #FF4444; }

        .delete-modal-title {
            font-family: var(--font-heading); font-size: 20px; font-weight: 600;
            color: var(--color-text-primary); text-align: center;
        }
        .delete-modal-desc { font-size: 14px; color: var(--color-text-tertiary); text-align: center; line-height: 1.6; }
        .delete-modal-actions { display: flex; gap: 12px; }
        .delete-keep-btn {
            flex: 1; padding: 12px 0; border-radius: var(--radius-md);
            background: var(--color-bg-input); border: none;
            cursor: pointer; font-family: var(--font-body); font-size: 14px;
            font-weight: 500; color: var(--color-text-primary); transition: all var(--transition);
        }
        .delete-keep-btn:hover { background: var(--color-border-light); }
        .delete-remove-btn {
            flex: 1; padding: 12px 0; border-radius: var(--radius-md);
            background: #FF4444; border: none;
            cursor: pointer; font-family: var(--font-body); font-size: 14px;
            font-weight: 600; color: #fff; transition: all var(--transition);
        }
        .delete-remove-btn:hover { background: #ff5252; box-shadow: 0 4px 16px rgba(255,75,75,0.25); }

        /* Empty state */
        .empty-state {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; padding: 28px 0;
        }
        .empty-state svg { width: 40px; height: 40px; color: var(--color-border); }
        .empty-state p { font-size: 13px; color: var(--color-text-tertiary); }

        /* ==================== WELCOME POPUP ==================== */
        .welcome-overlay {
            position: fixed; inset: 0;
            background: rgba(240,242,245,0.92);
            backdrop-filter: blur(8px);
            z-index: 99999;
            display: flex; align-items: center; justify-content: center;
            opacity: 1; transition: opacity 0.4s ease;
        }
        .welcome-overlay.fade-out { opacity: 0; pointer-events: none; }

        .welcome-modal {
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: 44px 40px 36px;
            width: 480px; max-width: 92vw;
            display: flex; flex-direction: column; align-items: center;
            gap: 24px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.10);
            transform: scale(1) translateY(0);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: center;
        }
        .welcome-overlay.fade-out .welcome-modal { transform: scale(0.95) translateY(10px); }

        .welcome-globe-wrap {
            position: relative;
            width: 80px; height: 80px;
        }
        .welcome-globe-ring {
            position: absolute; inset: -10px;
            border-radius: 50%;
            border: 1.5px solid rgba(78,205,196,0.35);
            animation: welcome-ring-spin 8s linear infinite;
        }
        .welcome-globe-ring::before {
            content: '';
            position: absolute; top: -4px; left: 50%;
            transform: translateX(-50%);
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--color-accent-teal);
            box-shadow: 0 0 8px rgba(78,205,196,0.8);
        }
        @keyframes welcome-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        .welcome-globe-ring2 {
            position: absolute; inset: -20px;
            border-radius: 50%;
            border: 1px solid rgba(255,230,109,0.3);
            animation: welcome-ring-spin 14s linear infinite reverse;
        }
        .welcome-globe-ring2::before {
            content: '';
            position: absolute; bottom: -3px; right: 10px;
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--color-accent-yellow);
            box-shadow: 0 0 8px rgba(255,230,109,0.8);
        }

        .welcome-globe-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, #e8f8f7 0%, #f5f5f5 100%);
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid rgba(78,205,196,0.25);
            box-shadow: 0 4px 20px rgba(78,205,196,0.12);
            animation: welcome-globe-pulse 3s ease-in-out infinite;
        }
        .welcome-globe-icon svg { width: 36px; height: 36px; color: var(--color-accent-teal); }

        @keyframes welcome-globe-pulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(78,205,196,0.12); }
            50% { box-shadow: 0 4px 28px rgba(78,205,196,0.22); }
        }

        .welcome-text { display: flex; flex-direction: column; gap: 8px; }
        .welcome-text h2 {
            font-family: var(--font-heading); font-size: 28px; font-weight: 600;
            font-style: italic; color: var(--color-text-primary);
            letter-spacing: -0.5px;
        }
        .welcome-text p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }

        .welcome-search {
            width: 100%;
            background: var(--color-bg-input);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            display: flex; align-items: center;
            gap: 10px; padding: 13px 16px;
            transition: all var(--transition);
        }
        .welcome-search:focus-within {
            border-color: #AAAAAA;
            background: var(--color-bg-secondary);
            box-shadow: var(--shadow-sm);
        }
        .welcome-search svg { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; }
        .welcome-search input {
            flex: 1; border: none; background: none; outline: none;
            font-family: var(--font-body); font-size: 14px; color: var(--color-text-primary);
        }
        .welcome-search input::placeholder { color: var(--color-text-tertiary); }

        .welcome-autocomplete {
            position: absolute; top: calc(100% + 4px); left: 0; right: 0;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 200; display: none;
            max-height: 220px; overflow-y: auto;
        }
        .welcome-autocomplete.active { display: block; }

        .welcome-suggestions {
            width: 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
        }
        .welcome-chip {
            padding: 6px 14px; border-radius: 20px;
            border: 1px solid var(--color-border);
            background: var(--color-bg-secondary);
            font-size: 13px; color: var(--color-text-secondary);
            cursor: pointer; transition: all var(--transition);
        }
        .welcome-chip:hover {
            border-color: var(--color-accent-teal);
            background: rgba(78,205,196,0.06);
            color: var(--color-accent-teal);
        }

        .welcome-start-btn {
            width: 100%; padding: 14px 0; border: none; border-radius: var(--radius-md);
            background: var(--color-text-primary);
            color: #fff; font-family: var(--font-body);
            font-size: 14px; font-weight: 600; cursor: pointer;
            transition: all var(--transition);
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .welcome-start-btn:hover { background: #222; transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .welcome-start-btn:active { transform: translateY(0); }
        .welcome-start-btn svg { width: 16px; height: 16px; }

        .welcome-skip {
            font-size: 13px; color: var(--color-text-tertiary);
            cursor: pointer; transition: color var(--transition);
            background: none; border: none; font-family: var(--font-body);
        }
        .welcome-skip:hover { color: var(--color-text-secondary); }

        /* ==================== 3D TILT UTIL ==================== */
        .tilt-3d {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        /* Flight animation styles moved to css/flight-animation.css */

        /* ==================== RECOMMENDATIONS ==================== */
        .rec-section { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; margin-bottom: 12px; }
        .rec-header { font-family: var(--font-heading); font-size: 20px; font-weight: 600; font-style: italic; color: var(--color-text-primary); }
        .rec-tabs { display: flex; gap: 8px; }
        .rec-tab {
            padding: 6px 12px; border-radius: 20px;
            font-size: 12px; font-weight: 500; cursor: pointer;
            background: var(--color-bg-input); color: var(--color-text-secondary);
            transition: all var(--transition); border: 1px solid transparent;
        }
        .rec-tab.active {
            background: var(--color-text-primary); color: #fff; font-weight: 600;
        }
        .rec-tab:not(.active):hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); }

        .rec-list { display: flex; flex-direction: column; gap: 8px; }
        .rec-item {
            display: flex; gap: 12px; align-items: flex-start;
            padding: 12px; border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
            background: var(--color-bg-secondary);
            transition: all var(--transition); cursor: pointer;
        }
        .rec-item:hover {
            border-color: #BBBBBB; box-shadow: var(--shadow-sm); transform: translateY(-1px);
        }
        .rec-marker {
            width: 12px; height: 12px; border-radius: 50%;
            flex-shrink: 0;
        }
        .rec-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
        .rec-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
        .rec-desc { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* 필수 랜드마크 뱃지 */
        .must-show-badge {
            display: inline-flex; align-items: center; gap: 3px;
            font-size: 10px; font-weight: 700; color: #B8860B;
            background: rgba(255,230,109,0.35); border: 1px solid rgba(255,200,0,0.45);
            border-radius: 4px; padding: 1px 6px; letter-spacing: 0.2px;
            flex-shrink: 0;
        }
        .must-show-badge svg { width: 9px; height: 9px; }
        .rec-item.must-show {
            border-color: rgba(255,200,0,0.4);
            background: linear-gradient(135deg, #FFFEF5 0%, var(--color-bg-secondary) 100%);
        }
        .rec-weight-bar {
            width: 100%; height: 3px; border-radius: 2px;
            background: var(--color-border); margin-top: 4px; overflow: hidden;
        }
        .rec-weight-fill {
            height: 100%; border-radius: 2px;
            background: linear-gradient(90deg, #4ECDC4, #FFE66D);
            transition: width 0.4s ease;
        }

/* ==================== PLACE MARKERS (WIKIDATA) ==================== */
.place-marker {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.place-marker:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    z-index: 1000;
}

/* ── 마커 별점 (지도 핀 아래) ── */
.marker-stars {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.marker-stars .place-stars {
    font-size: 8px;
    letter-spacing: -0.5px;
}
.marker-stars .star-filled { color: #FFD700; }
.marker-stars .star-empty  { color: rgba(255,255,255,.45); }

/* 클러스터 상태에서는 별점 숨김 — 단독 핀에서만 표시 */
.marker-cluster .marker-stars,
.leaflet-marker-icon .marker-cluster-small .marker-stars,
.leaflet-marker-icon .marker-cluster-medium .marker-stars,
.leaflet-marker-icon .marker-cluster-large .marker-stars {
    display: none;
}

/* ── 사이드바 / 팝업 별점 ── */
.place-stars {
    font-size: 11px;
    letter-spacing: 0px;
    vertical-align: middle;
    margin-left: 4px;
}
.place-stars .star-filled { color: #F39C12; }
.place-stars .star-empty  { color: rgba(150,150,150,.4); }

.place-stars-lg {
    font-size: 14px;
    letter-spacing: 1px;
}
.place-stars-lg .star-filled { color: #F39C12; }
.place-stars-lg .star-empty  { color: rgba(150,150,150,.4); }

.popup-stars {
    margin: 2px 0 4px;
    line-height: 1;
}

/* Recommendation Loading & Error States */
.rec-loading {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.rec-error {
    padding: 24px;
    text-align: center;
    color: #FF6B6B;
    font-size: 14px;
}

/* 거리 뱃지 */
.rec-dist {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 6px;
    margin-right: 6px;
    white-space: nowrap;
}

/* 파도별 로딩 진행 상태바 */
.rec-loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
    font-size: 11px;
}

.loading-spinner-sm {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--color-primary, #7C6FF7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.rec-tab-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 12px;
}

.rec-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Recommendation Item Enhanced */
.rec-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rec-item:hover {
    border-color: var(--color-accent-teal);
    background: var(--color-bg-light);
    transform: translateX(4px);
}

.rec-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: rgba(10, 14, 24, 0.95);
    border: 2.5px solid var(--pin-color, #4ECDC4);
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.rec-icon .place-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    filter: brightness(1.15) drop-shadow(0 0 3px rgba(255,255,255,0.35));
}

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

.rec-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rec-desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 핀 고정된 아이템 스타일 */
.rec-item.pinned {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.08);
}
.rec-item.pinned:hover {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.15);
}

.rec-pin-indicator {
    flex-shrink: 0;
    font-size: 14px;
    width: 20px;
    text-align: center;
    align-self: center;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.rec-item:hover .rec-pin-indicator:empty::after {
    content: '📍';
    opacity: 0.25;
}

.rec-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.rec-add-btn:hover {
    background: var(--color-accent-teal);
    border-color: var(--color-accent-teal);
    color: white;
    transform: scale(1.1);
}

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

/* ── OSM 메타 배지 ────────────────────────────────────── */
.rec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.rec-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.rec-badge-cuisine { background: rgba(231,76,60,0.1);  color: #E74C3C; border-color: rgba(231,76,60,0.3); }
.rec-badge-stars   { background: rgba(243,156,18,0.12); color: #F39C12; border-color: rgba(243,156,18,0.3); }
.rec-badge-hours   { background: rgba(52,152,219,0.1);  color: #3498DB; border-color: rgba(52,152,219,0.3); max-width: 200px; }
.rec-badge-phone   { background: rgba(39,174,96,0.1);   color: #27AE60; border-color: rgba(39,174,96,0.3); }
.rec-badge-web     { background: rgba(155,89,182,0.1);  color: #9B59B6; border-color: rgba(155,89,182,0.3); cursor: pointer; }
.rec-badge-web:hover { background: rgba(155,89,182,0.2); }
.rec-badge-free    { background: rgba(39,174,96,0.15);  color: #27AE60; border-color: rgba(39,174,96,0.4); }
.rec-badge-fee     { background: rgba(231,76,60,0.1);   color: #E74C3C; border-color: rgba(231,76,60,0.3); }
.rec-badge-wc      { background: rgba(52,152,219,0.1);  color: #3498DB; border-color: rgba(52,152,219,0.3); }

/* OSM 출처 태그 */
.rec-source-osm {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(78,205,196,0.15);
    color: #4ECDC4;
    border: 1px solid rgba(78,205,196,0.3);
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.3px;
}

/* 팝업 메타 행 */
.popup-meta {
    font-size: 11px;
    color: var(--color-text-secondary, #aaa);
    margin-top: 2px;
    word-break: break-all;
}
.popup-meta a { color: #4ECDC4; text-decoration: none; }
.popup-meta a:hover { text-decoration: underline; }

/* 팝업 사진 썸네일 */
.popup-photo-wrap {
    margin: -14px -18px 10px;
    border-radius: var(--radius-md) 8px 0 0;
    overflow: hidden;
    line-height: 0;
    background: #f0f0f0;
}
.popup-photo-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.popup-photo-skeleton {
    width: 100%;
    height: 140px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: popup-skeleton-shimmer 1.5s infinite;
}
@keyframes popup-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 사진 있는 핀 — 초록 회전 링 */
.place-marker-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.place-marker-photo-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2.5px solid rgba(76, 175, 80, 0.2);
    border-top-color: #4CAF50;
    border-right-color: #4CAF50;
    animation: photo-ring-spin 1.4s linear infinite;
    pointer-events: none;
    box-sizing: border-box;
}
@keyframes photo-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── 추천 섹션 헤더 ── */
.rec-section {
    margin-top: 16px;
}

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

.rec-header {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.rec-total-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ── 아코디언 리스트 ── */
.rec-list {
    max-height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── 아코디언 그룹 ── */
.rec-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    transition: border-color 0.2s;
}

.rec-group.open {
    border-color: rgba(255,255,255,0.12);
}

.rec-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.rec-group-header:hover {
    background: rgba(255,255,255,0.05);
}

.rec-group-emoji {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.rec-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-group-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px 7px;
    flex-shrink: 0;
}

.rec-group.open .rec-group-count {
    background: rgba(78,205,196,0.15);
    color: #4ECDC4;
}

.rec-group-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rec-group.open .rec-group-chevron {
    transform: rotate(180deg);
    color: #4ECDC4;
}

/* ── 아코디언 바디 ── */
.rec-group-body {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 6px 8px 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.rec-group.open .rec-group-body {
    display: flex;
}

/* ── "더 보기" 버튼 ── */
.rec-group-more {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-align: center;
    padding: 6px 0 2px;
    cursor: pointer;
    transition: color 0.15s;
}

.rec-group-more:hover {
    color: #4ECDC4;
}

/* Custom Scrollbar for Recommendations */
.rec-list::-webkit-scrollbar {
    width: 6px;
}

.rec-list::-webkit-scrollbar-track {
    background: var(--color-bg-light);
    border-radius: 3px;
}

.rec-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.rec-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Popup Button for Adding Places */
.popup-desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* ==================== TRIP SETTINGS ==================== */
.trip-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.setting-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setting-field select,
.setting-field input[type="date"] {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--color-bg-secondary);
    outline: none;
}

.auto-adjust-btn {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.auto-adjust-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.auto-adjust-btn svg { width: 14px; height: 14px; }

/* ==================== COMPLETION STATUS BAR ==================== */
.completion-status-bar {
    margin: 16px 0;
    padding: 14px;
    background: var(--color-bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.completion-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.completion-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: linear-gradient(135deg, #FFE66D 0%, #FFB347 100%);
}

.completion-status-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.completion-status-desc {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.toggle-completion-btn {
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
    color: white;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.toggle-completion-btn:hover {
    transform: scale(1.05);
}

/* ==================== DELETE MODAL LAYOUT ==================== */
.delete-modal-content {
    width: 400px;
    align-items: center;
    gap: 16px;
    padding: 32px;
}

/* ==================== TRANSPORT MODAL LAYOUT ==================== */
.transport-modal-header {
    width: 100%;
}

.transport-modal-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* ==================== MODAL FIELD FLEX ==================== */
.modal-field-flex-2 { flex: 2; }
.modal-field-flex-1-4 { flex: 1.4; }

/* ==================== SHARE MODAL ==================== */
.share-desc {
    font-size: 14px;
    color: var(--color-text-tertiary);
}

.share-email-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

/* ==================== 클러스터 마커 ==================== */

/* ── 단일 타입 클러스터 (원형) ── */
.cluster-marker-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(10, 14, 24, 0.95);
    border: 3px solid var(--pin-color, #4ECDC4);
    box-shadow: 0 3px 12px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.15s;
}
.cluster-marker-icon:hover { transform: scale(1.12); }

/* ── 복합 타입 클러스터 (둥근 사각형, 최대 3종 이모지) ── */
.cluster-marker-icon.cluster-multi {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(12, 20, 38, 0.90) !important;
    padding: 5px;
    font-size: 14px;
    flex-direction: column;
    gap: 2px;
}

/* 이모지 그리드 (flex-wrap으로 2+1 배치) */
.cluster-emoji-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    line-height: 1;
}
.cluster-emoji-row span {
    display: block;
    line-height: 1;
}

.cluster-marker-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: #222;
    font-size: 10px;
    font-weight: 700;
    min-width: 19px;
    height: 19px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    line-height: 1;
}

/* ==================== 클러스터 패널 ==================== */

.cluster-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 55%;
    background: #1a1a2e;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px 16px 0 0;
    z-index: 800;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.cluster-panel.open { transform: translateY(0); }

.cluster-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.cluster-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.cluster-panel-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s;
}
.cluster-panel-close:hover { color: #fff; }

.cluster-panel-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.cluster-panel-tabs::-webkit-scrollbar { display: none; }

.cluster-panel-tab {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border: 1px solid transparent;
    transition: all 0.15s;
}
.cluster-panel-tab.active {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

.cluster-panel-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px 14px 16px;
}

.cluster-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    transition: background 0.15s;
    cursor: pointer;
}
.cluster-panel-item:hover { background: rgba(255,255,255,0.06); }

.cluster-panel-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    background: rgba(10, 14, 24, 0.92);
    border: 2px solid rgba(255,255,255,0.25);
}
.cluster-panel-item-info {
    flex: 1;
    min-width: 0;
}
.cluster-panel-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cluster-panel-item-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 1px;
}
.cluster-panel-pin-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cluster-panel-pin-btn.on {
    background: rgba(78,205,196,0.2);
    border-color: rgba(78,205,196,0.4);
    color: #4ECDC4;
}
.cluster-panel-pin-btn:hover { opacity: 0.8; }

/* ==================== 추천 장소 카테고리 카드 그리드 ==================== */

.rec-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 0 8px;
}

.rec-category-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px 12px 14px;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s, transform 0.15s, border-color 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    user-select: none;
}
.rec-category-card:hover {
    background: #fff;
    border-color: var(--cat-color, #4ECDC4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.rec-category-card:active {
    transform: translateY(0);
}
.rec-category-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0.06;
    pointer-events: none;
}
.rec-category-card-emoji {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-category-card-emoji .cat-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,0.25));
}
.rec-category-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}
.rec-category-card-count {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-weight: 500;
}
.rec-category-card.empty {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ==================== 카테고리 팝업 패널 ==================== */

.cat-popup {
    position: absolute;
    inset: 0;
    background: var(--color-bg-secondary);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.cat-popup.open {
    transform: translateX(0);
}

/* 헤더 */
.cat-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.cat-popup-back {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.cat-popup-back:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}
.cat-popup-back svg { width: 16px; height: 16px; }
.cat-popup-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.cat-popup-emoji .cat-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
    filter: invert(1) drop-shadow(0 0 1px rgba(0,0,0,0.25));
}
.cat-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-popup-count {
    font-size: 11px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    font-weight: 500;
}

/* 툴바: 서브탭 + 정렬 */
.cat-popup-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* 서브타입 탭 스크롤 영역 */
.cat-popup-subtabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px 8px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}
.cat-popup-subtabs::-webkit-scrollbar { display: none; }
.cat-popup-subtab {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.cat-popup-subtab.active {
    background: rgba(78,205,196,0.12);
    border-color: rgba(78,205,196,0.4);
    color: #2bb5ac;
    font-weight: 600;
}
.cat-popup-subtab:hover:not(.active) {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

/* ── 카테고리 팝업 지역 탭 ── */
.cat-popup-region-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cat-popup-region-tabs::-webkit-scrollbar { display: none; }
.cat-popup-region-tabs:empty { display: none; }

.cat-popup-region-tab {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 14px;
    font-size: 10px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    white-space: nowrap; flex-shrink: 0;
    transition: all 0.15s ease;
}
.cat-popup-region-tab:hover:not(.active) {
    background: var(--color-border-light);
}
.cat-popup-region-tab.active {
    background: color-mix(in srgb, var(--region-color, #4ECDC4) 15%, transparent);
    border-color: color-mix(in srgb, var(--region-color, #4ECDC4) 50%, transparent);
    color: var(--region-color, #2bb5ac);
    font-weight: 600;
}

/* ── 정렬 버튼 ── */
.cat-popup-sort-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 10px 12px 8px 0;
}
.cat-popup-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.cat-popup-sort-btn:hover {
    background: var(--color-border-light);
    border-color: rgba(78,205,196,0.4);
    color: var(--color-text-primary);
}
.cat-popup-sort-btn svg {
    flex-shrink: 0;
}

/* ── 정렬 드롭다운 ── */
.cat-popup-sort-dropdown {
    position: absolute;
    top: 100%;
    right: 12px;
    z-index: 100;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 4px;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.cat-popup-sort-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cat-popup-sort-option {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.cat-popup-sort-option:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}
.cat-popup-sort-option.active {
    color: #2bb5ac;
    font-weight: 600;
    background: rgba(78,205,196,0.1);
}

/* 장소 목록 스크롤 영역 */
.cat-popup-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.cat-popup-list::-webkit-scrollbar { width: 4px; }
.cat-popup-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

/* 팝업 안 더 보기 버튼 */
.cat-popup-more {
    text-align: center;
    padding: 10px 16px;
    font-size: 12px;
    color: #2bb5ac;
    cursor: pointer;
    font-weight: 500;
}
.cat-popup-more:hover { color: #4ECDC4; }

/* 팝업 안 빈 상태 */
.cat-popup-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 13px;
}

/* ==================== 접근성: 모션 감소 ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.08s !important;
        transition-duration: 0.08s !important;
    }
}