/* ══════════════════════════════════════════════════════════
   VPT — 거래처 포털 빌더 스타일
   ══════════════════════════════════════════════════════════ */

/* 포털 카드 그리드 */
.vpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.vpt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;}
.vpt-card-head{display:flex;align-items:center;gap:8px;}
.vpt-card-title{font-size:15px;font-weight:700;flex:1;}
.vpt-card-badges{display:flex;gap:4px;}
.vpt-card-sub{font-size:12px;color:var(--text3);}
.vpt-card-url{display:flex;align-items:center;gap:6px;background:var(--bg2);padding:6px 10px;border-radius:6px;font-size:12px;}
.vpt-card-url a{color:var(--accent);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vpt-card-meta{font-size:11px;color:var(--text3);display:flex;gap:8px;}
.vpt-card-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px;}
.vpt-card-actions button{flex:1;font-size:12px;}

.vpt-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;}
.vpt-badge-on{background:#dcfce7;color:#166534;}
.vpt-badge-off{background:#f3f4f6;color:#6b7280;}
.vpt-badge-warn{background:#fef3c7;color:#92400e;}
.vpt-badge-lock{background:#e0e7ff;color:#4338ca;}

.vpt-empty{text-align:center;color:var(--text3);font-size:13px;padding:50px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);}

/* 발행 가드 — 속성 미설정 시 카드 강조 */
.vpt-card-warn{border-color:#dc2626;background:#fef2f2;}

/* 템플릿 메뉴 항목 드래그 */
.vpt-tpl-drag:hover{color:#475569;}
.vpt-tpl-drag:active{cursor:grabbing;}
.vpt-drag-ghost{opacity:0.4;background:#dbeafe;}

/* 로고 업로더 — 클릭/드래그/Ctrl+V 통합 */
.vpt-logo-uploader{border:2px dashed #cbd5e1;border-radius:8px;padding:14px;text-align:center;cursor:pointer;background:#f8fafc;transition:border-color .15s, background .15s;outline:none;}
.vpt-logo-uploader:hover{border-color:#94a3b8;}
.vpt-logo-uploader:focus{border-color:var(--accent);background:#eff6ff;}
.vpt-logo-uploader.dragover{border-color:var(--accent);background:#eff6ff;}
.vpt-logo-uploader img{max-height:60px;max-width:200px;object-fit:contain;display:block;margin:0 auto 8px;}
.vpt-logo-uploader .vpt-logo-empty{color:#94a3b8;font-size:13px;padding:18px 0 10px;}
.vpt-logo-uploader .vpt-logo-hint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.5;}

/* 편집 모달 — 탭 */
.vpt-edit-modal .vpt-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:14px 0 12px;}
.vpt-tab{background:none;border:none;padding:8px 14px;font-size:13px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;}
.vpt-tab:hover{color:var(--text);}
.vpt-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}

.vpt-tab-body{max-height:55vh;overflow-y:auto;padding-right:8px;}

/* 속성 가시성 — 핵심 기능 */
.vpt-props-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;}
.vpt-prop-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px;}
.vpt-prop-row:hover{background:var(--bg2);}
.vpt-prop-row input[type="checkbox"]{margin:0;}
.vpt-prop-name{flex:1;font-weight:500;}
.vpt-prop-type{font-size:10px;color:var(--text3);background:var(--bg2);padding:1px 6px;border-radius:8px;}

/* 메뉴 항목 편집 — 그룹(선택) · 라벨 · URL · 삭제 */
.vpt-menu-row{display:grid;grid-template-columns:140px 1fr 2fr auto;gap:6px;align-items:center;margin-bottom:6px;}

/* 접속 로그 */
.vpt-stats-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.vpt-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;}
.vpt-stat-name{font-size:13px;font-weight:700;margin-bottom:6px;}
.vpt-stat-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);padding:2px 0;}

.vpt-visits-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px;}
.vpt-visits-table th,.vpt-visits-table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);}
.vpt-visits-table th{background:var(--bg2);font-weight:600;color:var(--text2);font-size:11px;}