/* UXC_Flarumix Theme Demo Panel Styles */
/* 데모 패널 컨테이너 */
.theme-demo-panel {position:fixed; z-index:10000; top:20px; width:320px; border-radius:12px; box-shadow:0 10px 40px rgba(0, 0, 0, 0.15); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;}
/* 드래그 중일 때 트랜지션 제거 */
.theme-demo-panel.ui-draggable-dragging {opacity:0.95; transition:none !important;}
.theme-demo-panel.collapsed {width:60px;}
/* 패널 헤더 */
.demo-panel-header {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-radius:12px 12px 0 0; background:var(--color-prime, #6f48ff); color:#fff; cursor:move; user-select:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}
.demo-panel-title {display:flex; align-items:center; font-size:16px; font-weight:600; gap:10px;}
.demo-panel-title i {font-size:20px;}
.demo-panel-close {display:flex; justify-content:center; align-items:center; width:30px; height:30px; border:none; border-radius:6px; background:rgba(255, 255, 255, 0.2); color:#fff; cursor:pointer; }
.demo-panel-close:hover {background:rgba(255, 255, 255, 0.3);}
.demo-panel-close i {font-size:20px;}
/* 패널 바디 */
.demo-panel-body {max-height:500px; padding:20px; background:#fff; overflow-y:auto;}
.theme-demo-panel.collapsed .demo-panel-body {display:none;}
/* 패널 푸터 */
.demo-panel-footer {padding:15px 20px; border-top:1px solid #e1e4e8; background:#f8f9fa; border-radius:0 0 12px 12px;}
.theme-demo-panel.collapsed .demo-panel-footer {display:none;}
/* 데모 섹션 */
.demo-section {margin-bottom:25px;}
.demo-section:last-child {margin-bottom:0;}
.demo-section-title {display:flex; align-items:center; margin-bottom:12px; color:#333; font-size:14px; font-weight:600; gap:8px;}
.demo-section-title i {color:var(--color-prime, #6f48ff); font-size:18px;}
/* 입력 필드 */
.demo-input-group {display:flex; flex-direction:column; gap:8px;}
.demo-input {width:100%; padding:10px 12px; border:1px solid #e1e4e8; border-radius:8px; font-size:14px; }
.demo-input:focus {border-color:var(--color-prime, #6f48ff); outline:none; box-shadow:0 0 0 3px rgba(111, 72, 255, 0.1);}
/* 파일 업로드 */
.demo-file-upload {display:flex; align-items:center; position:relative; gap:10px;}
.demo-file-input {display:none;}
.demo-file-label {padding:10px 12px; border:1px solid #e1e4e8; border-radius:8px; background:#f6f8fa; font-size:14px; text-align:center; cursor:pointer; flex:1;}
.demo-file-label:hover {border-color:#d0d3d7; background:#f0f2f5;}
.demo-file-label i {margin-right:6px;}
.demo-preview {width:40px; height:40px; overflow:hidden; border:1px solid #e1e4e8; border-radius:8px;}
.demo-preview img {width:100%; height:100%; object-fit:contain;}
/* 색상 선택기 */
.demo-color-picker {display:grid; grid-template-columns:repeat(7, 1fr); gap:8px;}
.demo-color-option {position:relative; width:32px; height:32px; border:2px solid transparent; border-radius:50%; cursor:pointer; }
.demo-color-option:hover {transform:scale(1.1); box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);}
.demo-color-option.active {border-color:#333; box-shadow:0 0 0 3px rgba(0, 0, 0, 0.1);}
.demo-color-option.active::after {content:'\2713'; position:absolute; top:50%; left:50%; color:#fff; font-size:14px; font-weight:bold; text-shadow:0 1px 2px rgba(0, 0, 0, 0.3); transform:translate(-50%, -50%);}
/* 아이콘 선택기 */
.demo-icon-picker {display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; max-height:160px; overflow-y:auto; padding:4px;}
.demo-icon-option {display:flex; justify-content:center; align-items:center; width:44px; height:44px; border:2px solid #e1e4e8; border-radius:8px; background:#fff; cursor:pointer; }
.demo-icon-option:hover {border-color:var(--color-prime, #6f48ff); background:#f6f8fa;}
.demo-icon-option.active {border-color:var(--color-prime, #6f48ff); background:var(--color-prime, #6f48ff); color:#fff;}
.demo-icon-option i {font-size:20px; color:#000;}
.demo-icon-option.active i {color:#fff;}
/* 아이콘 선택기 스크롤바 */
.demo-icon-picker::-webkit-scrollbar {width:4px;}
.demo-icon-picker::-webkit-scrollbar-track {background:#f1f1f1; border-radius:2px;}
.demo-icon-picker::-webkit-scrollbar-thumb {background:#c1c1c1; border-radius:2px;}
.demo-icon-picker::-webkit-scrollbar-thumb:hover {background:#a8a8a8;}
/* 사이드메뉴 위치 선택 - opt 스타일 적용 */
.demo-radio-group {display:flex; gap:12px;}
.demo-radio-group .opt {display:flex; align-items:center; gap:10px;}
.demo-radio-group .opt label {gap:6px; color:#000;}
/* 리셋 버튼 */
.demo-reset-button {display:flex; justify-content:center; align-items:center; width:100%; padding:12px; border:none; border-radius:8px; background:#f85149; color:#fff; font-size:14px; font-weight:600; cursor:pointer; gap:8px;}
.demo-reset-button:hover {background:#da3633; box-shadow:0 4px 12px rgba(248, 81, 73, 0.3);}
.demo-reset-button i {font-size:16px;}
/* 스크롤바 스타일 */
.demo-panel-body::-webkit-scrollbar {width:6px;}
.demo-panel-body::-webkit-scrollbar-track {border-radius:3px; background:#f1f1f1;}
.demo-panel-body::-webkit-scrollbar-thumb {border-radius:3px; background:#c1c1c1;}
.demo-panel-body::-webkit-scrollbar-thumb:hover {background:#a8a8a8;}
/* 테마 데모 버튼 무지개 효과 - 아이콘만 */
@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btnTools.theme-demo-btn i {
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff7300,
        #2b00ff,
        #48ff00,
        #00ffd5,
        #002bff,
        #7a00ff,
        #ff00c8,
        #ff0000
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow 3s ease infinite;
}

.btnTools.theme-demo-btn:hover i {
    animation-duration: 1.5s;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
	.header .headerWrap .staWrap .tools .btnTools.theme-demo-btn {
        display: none; /* 태블릿에서는 숨김 */
    }

}

/* 반응형 */
@media (max-width:768px) {
    .theme-demo-panel {right:10px; width:280px;}
    .demo-panel-body {max-height:400px;}
}