/* public/truss_sim.css (또는 truss.css) - 트러스 모드 전용 통합 스타일 (V1.1 Fixed) */

/* ============================================================ */
/* 1. 패널 및 레이아웃 설정 (스크롤의 핵심) */
/* ============================================================ */

/* 패널 애니메이션 */
#expert-options-panel {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden; /* 패널 밖으로 튀어나오는 것 방지 */
    display: flex;
    flex-direction: column;
}

/* 패널이 열렸을 때 - 높이 강제 고정 */
#expert-options-panel.open {
    /* ▼▼▼ [핵심] 높이를 고정해야 내부 스크롤이 생깁니다. ▼▼▼ */
    height: 85vh !important; 
    max-height: 85vh !important;
    
    /* 기존 35vh 등 낮은 높이를 원하시면 이 값을 줄이세요 (예: 400px) */
    /* 하지만 스크롤을 위해서는 auto가 아닌 명시적 높이가 필수입니다. */
}

/* 전체 3분할 레이아웃 */
.expert-split-layout {
    display: flex;
    flex-direction: row; /* 가로 배치 */
    width: 100%;
    height: 100%;        /* 부모(패널) 높이 꽉 채움 */
    overflow: hidden;    /* 자식 요소 튀어나옴 방지 */
    padding-bottom: 20px;
    box-sizing: border-box;
    gap: 12px;           /* 패널 간 간격 */
}

/* ============================================================ */
/* 2. 우측: 리스트 컨테이너 (스크롤바 살리기) */
/* ============================================================ */

.expert-list-container {
    flex: 3.5;
    
    /* ▼▼▼ Flex Column & 스크롤 방지 설정 ▼▼▼ */
    display: flex;
    flex-direction: column;
    height: 100%;       /* 높이 100% 필수 */
    max-height: 100%;   /* 넘치지 않도록 제한 */
    overflow: hidden;   /* 내부 스크롤은 자식에게 위임 */
    
    background-color: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 16px;
    padding: 1rem;
    box-sizing: border-box;
}

/* 제목 (고정) */
.expert-list-container h4 {
    flex-shrink: 0; 
    margin: 0 0 10px 0;
    color: #f5f5f7;
    font-weight: 600;
}

/* 리스트 내용물 (여기가 스크롤 되어야 함) */
#expert-list-content-truss {
    flex: 1;          /* 남은 공간 모두 차지 */
    min-height: 0;    /* Flex 자식 스크롤 필수 속성 */
    overflow-y: auto; /* 내용 넘치면 세로 스크롤 */
    
    display: flex; 
    flex-direction: column;
    gap: 8px;
    padding-right: 5px; /* 스크롤바 공간 */
}

/* ============================================================ */
/* 3. 스크롤바 디자인 (Apple Style) */
/* ============================================================ */

/* 트랙 (배경) */
#expert-list-content-truss::-webkit-scrollbar,
#expert-preview-content::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

/* 핸들 (막대) */
#expert-list-content-truss::-webkit-scrollbar-thumb,
#expert-preview-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2); /* 평소엔 연하게 */
    border-radius: 10px;
    transition: background-color 0.3s;
}

/* 마우스 올렸을 때 진하게 */
#expert-list-content-truss:hover::-webkit-scrollbar-thumb,
#expert-preview-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================ */
/* 4. 리스트 아이템 디자인 */
/* ============================================================ */

.expert-list-item.truss-item {
    flex-shrink: 0; /* 찌그러짐 방지 */
    border-left-width: 4px;
    border-left-style: solid;
    background-color: #3a3a3c; 
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-size: 0.9em;
    position: relative;
    transition: all 0.2s ease;
}

.expert-list-item.truss-item:hover {
    background-color: #48484a;
    transform: translateX(2px);
}

/* 타입별 색상 라인 */
.expert-list-item.truss-item.type-joint { border-left-color: #30d158; }   /* 녹색 */
.expert-list-item.truss-item.type-support { border-left-color: #00bcd4; } /* 청록색 */
.expert-list-item.truss-item.type-member { border-left-color: #98989d; }  /* 회색 */

/* 섹션 타이틀 (구분선) */
.tool-section-title-truss {
    display: block;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 6px;
    margin-bottom: 12px;
    margin-top: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================================ */
/* 5. 트러스 시뮬레이션 커서 & 애니메이션 */
/* ============================================================ */

@keyframes truss-cursor-blink {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); background-color: #39ff14; box-shadow: 0 0 10px #39ff14; }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); background-color: #30d158; box-shadow: 0 0 5px #30d158; }
}

.truss-cursor-dot {
    position: fixed; width: 16px; height: 16px; border-radius: 50%;
    animation: truss-cursor-blink 1s ease-in-out infinite;
    pointer-events: none; z-index: 99999; display: none;
}

/* 절점(Node) 스타일 */
.truss-node {
    cursor: pointer;
    transition: all 0.2s;
    stroke: #30d158; stroke-width: 3px;
    filter: drop-shadow(0 0 5px rgba(48, 209, 88, 0.5));
}
.truss-node:hover {
    stroke: #39ff14 !important; fill: #fff; filter: drop-shadow(0 0 15px #39ff14);
}

/* 힌트 모드 (깜빡임) */
@keyframes truss-node-hint {
    0%, 100% { stroke: #30d158; stroke-width: 3px; filter: drop-shadow(0 0 2px rgba(48, 209, 88, 0.2)); }
    50% { stroke: #39ff14; stroke-width: 6px; filter: drop-shadow(0 0 12px rgba(57, 255, 20, 1.0)); }
}
.truss-node.hint-mode {
    animation: truss-node-hint 1s ease-in-out infinite; cursor: pointer;
}
.truss-node.selected {
    animation: none !important;
    fill: #30d158 !important; stroke: #fff !important; stroke-width: 4px !important;
    filter: drop-shadow(0 0 15px #30d158) !important; r: 26px !important;
}

/* 기준점(Fix) 스타일 */
.truss-node.fixed-node {
    fill: #00bcd4 !important;
    stroke: #fff !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px #00bcd4);
    transition: all 0.3s;
}
.truss-node.fix-mode-hover {
    cursor: pointer;
    stroke: #00bcd4 !important;
    stroke-width: 6px !important;
    filter: drop-shadow(0 0 5px #00bcd4);
}
.expert-preview-container.fix-mode { cursor: alias !important; }

/* 리스트 아이템 기준점(Ref) 강조 */
.expert-list-item.truss-item.is-reference {
    border-left-color: #00bcd4 !important;
    background-color: rgba(0, 188, 212, 0.1);
}
.expert-list-item.truss-item.is-reference .list-item-title::after {
    content: " (Ref)"; font-size: 0.8em; color: #00bcd4; margin-left: 5px;
}

/* ============================================================ */
/* 6. 팝업 및 UI 요소 */
/* ============================================================ */

/* 절점 이름 입력 팝업 */
.joint-naming-popup {
    position: fixed; z-index: 999999;
    background-color: rgba(28, 28, 30, 0.95);
    border: 1px solid #48484a; border-radius: 12px;
    padding: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px); display: none;
    flex-direction: column; gap: 8px; width: 190px;
    transform: translate(-50%, -110%);
}

.quick-name-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.quick-name-btn {
    aspect-ratio: 1/1; background-color: #1c1c1e; color: #fff;
    border: 1px solid #3a3a3c; border-radius: 6px; font-weight: bold; cursor: pointer;
}
.quick-name-btn:hover { background-color: #30d158; color: #000; border-color: #30d158; }
.quick-name-btn.disabled { opacity: 0.2; pointer-events: none; }

.origin-btn-small { width: 34px; color: #00bcd4; border-color: #00bcd4; }
.origin-btn-small:hover { background-color: #00bcd4; color: #fff; }

.manual-name-input-group { display: flex; gap: 5px; }
#joint-manual-input { flex: 1; border-radius: 4px; border: none; text-align: center; font-weight: bold; height: 34px; }
#joint-confirm-btn { background: #007aff; color: white; border: none; border-radius: 4px; width: 34px; cursor: pointer; }

/* 툴 아이콘 (Joint/Fix) */
.icon-circle { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #1c1c1e; transition: all 0.2s; }
.icon-circle.joint { background-color: #ffffff; }
.icon-circle.fix { background-color: #00bcd4; border: 2px solid #ffffff; box-shadow: 0 0 4px rgba(0, 188, 212, 0.4); }

.expert-tool-btn.active .icon-circle.joint { background-color: #30d158; border-color: #fff; }
.expert-tool-btn.active .icon-circle.fix { background-color: #fff; border-color: #00bcd4; }

/* 부재 길이 힌트 */
@keyframes member-dim-hint {
    0% { stroke: #007aff; stroke-width: 15px; opacity: 0.3; }
    50% { stroke: #00c6ff; stroke-width: 20px; opacity: 0.6; }
    100% { stroke: #007aff; stroke-width: 15px; opacity: 0.3; }
}
line.dim-mode-hint { animation: member-dim-hint 1s ease-in-out infinite; cursor: pointer; }
line.is-reference-member { stroke: #007aff !important; stroke-width: 15px !important; opacity: 0.8 !important; }
line.is-fixed-member { stroke: #4caf50 !important; stroke-width: 12px; opacity: 0.9; }

/* 텍스트 라벨 & 스케일 표시 */
.dim-text-label {
    font-size: 16px; font-weight: bold; fill: #ffffff;
    text-anchor: middle; dominant-baseline: central;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8)); pointer-events: none;
}
#truss-scale-indicator {
    position: absolute; top: 15px; left: 15px;
    background-color: rgba(0, 0, 0, 0.7); color: #00bcd4;
    padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
    pointer-events: none; z-index: 100; border: 1px solid rgba(0, 188, 212, 0.3);
    display: none;
}

/* public/truss_sim.css (또는 truss.css) 맨 아래 추가 */

/* 🔷 기준점(Fix) 선택 유도 애니메이션 (파란 형광 깜빡임) */
@keyframes node-fix-hint {
    0% { 
        stroke: #00bcd4; /* 청록색 */
        stroke-width: 3px; 
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.3)); 
    }
    50% { 
        stroke: #00e5ff; /* 밝은 청록색 */
        stroke-width: 6px; /* 두꺼워짐 */
        filter: drop-shadow(0 0 15px rgba(0, 229, 255, 1.0)); /* 강한 발광 */
    }
    100% { 
        stroke: #00bcd4; 
        stroke-width: 3px; 
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.3)); 
    }
}

/* Fix 모드일 때 노드에 붙을 클래스 */
.truss-node.fix-mode-hint {
    animation: node-fix-hint 1s ease-in-out infinite; /* 1초 간격 무한 반복 */
    cursor: pointer;
}


/* ============================================================ */
/* 7. [명륜이 추가] 지지대 설치 시 투시 모드 (Ghost Mode) */
/* ============================================================ */

/* 지지대(Support) 도구 선택 시 절점 스타일 */
.truss-node.support-mode-hint {
    /* 1. 내부를 반투명하게 (뒤가 비쳐 보임) */
    fill: rgba(255, 255, 255, 0.2) !important; 
    
    /* 2. 테두리는 파란 형광으로 강조 */
    stroke: #00bcd4 !important; 
    stroke-width: 3px !important;
    
    /* 3. 빛나는 효과 */
    filter: drop-shadow(0 0 5px rgba(0, 188, 212, 0.8));
    
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 마우스 올렸을 때 (더 잘 보이게) */
.truss-node.support-mode-hint:hover {
    fill: rgba(0, 188, 212, 0.1) !important; /* 아주 연한 파란색 틴트 */
    stroke-width: 5px !important;
    filter: drop-shadow(0 0 10px rgba(0, 188, 212, 1.0));
    transform: scale(1.1); /* 살짝 커짐 */
}

/* ============================================================ */
/* 7. [명륜이 업그레이드] 지지대 모드 - 투시 & 힌트 애니메이션 */
/* ============================================================ */

/* 1. 절점(Node) 힌트 애니메이션 (커졌다 작아졌다 + 반짝임) */
@keyframes node-pulse-hint {
    0% {
        transform: scale(1);
        stroke: #00bcd4;
        stroke-width: 3px;
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.5));
        fill: rgba(255, 255, 255, 0.3); /* 기본 반투명 */
    }
    50% {
        transform: scale(1.3); /* 커짐 */
        stroke: #00e5ff;       /* 더 밝은 청록색 */
        stroke-width: 5px;
        filter: drop-shadow(0 0 10px rgba(0, 229, 255, 1.0)); /* 강한 발광 */
        fill: rgba(255, 255, 255, 0.6); /* 좀 더 불투명 */
    }
    100% {
        transform: scale(1);
        stroke: #00bcd4;
        stroke-width: 3px;
        filter: drop-shadow(0 0 2px rgba(0, 188, 212, 0.5));
        fill: rgba(255, 255, 255, 0.3);
    }
}

/* 지지대 모드에서 절점에 적용될 클래스 */
.truss-node.support-mode-hint {
    /* 애니메이션 적용 (1.5초 간격, 무한 반복) */
    animation: node-pulse-hint 1.5s ease-in-out infinite;
    cursor: pointer;
    
    /* 애니메이션 기준점을 중앙으로 설정 (이게 없으면 이상하게 커짐) */
    transform-origin: center; 
    transform-box: fill-box;
}

/* 마우스 올렸을 때 (애니메이션 멈추고 강조) */
.truss-node.support-mode-hint:hover {
    animation: none; /* 멈춤 */
    transform: scale(1.4);
    stroke: #39ff14 !important; /* 선택 준비 (초록색) */
    stroke-width: 6px !important;
    fill: rgba(255, 255, 255, 0.9) !important;
    filter: drop-shadow(0 0 15px #39ff14);
}

/* 2. 부재(Member) 투명화 (Ghost Mode) */
/* 지지대 모드일 때 SVG 전체에 클래스를 주거나, JS로 제어 */
line.ghost-mode {
    opacity: 0.2; /* 아주 흐리게 (20%) */
    stroke: #888; /* 회색조 */
    pointer-events: none; /* 클릭 방지 (절점만 클릭하게) */
    transition: opacity 0.3s ease;
}

/* ============================================================ */
/* 8. [명륜이 긴급 패치] 기준 부재(Reference) 강제 투명화 */
/* ============================================================ */

/* 기준 부재(is-reference-member)가 고스트 모드(ghost-mode)가 되었을 때 */
line.is-reference-member.ghost-mode {
    /* 1. 기존의 강한 파란색을 덮어쓰고 회색으로 변경 */
    stroke: #888 !important; 
    
    /* 2. 기존의 opacity 0.8 !important를 이기기 위해 다시 !important 사용 */
    opacity: 0.1 !important; 
    
    /* 3. 빛나는 효과(필터) 제거 */
    filter: none !important;
}

/* ============================================================ */
/* 9. [명륜이 최종] 고스트 모드 완전 강제 적용 (Rigid 포함) */
/* ============================================================ */

/* 사용자 입력 치수가 있는 부재(Rigid)나 기준 부재(Reference)도 
   'ghost-mode' 클래스가 붙으면 무조건 투명하게 만듭니다.
*/
line[data-elem-id].ghost-mode {
    /* 1. 색상을 아주 연한 회색으로 강제 통일 */
    stroke: #cccccc !important; 
    
    /* 2. 투명도를 10%로 강제 낮춤 (아주 흐리게) */
    opacity: 0.1 !important; 
    
    /* 3. 파란색/초록색 형광 효과(Filter) 강제 제거 */
    filter: none !important;
    
    /* 4. 클릭 불가능하게 설정 */
    pointer-events: none !important;
}

/* 🟣 [명륜이 추가] 길이 복사 소스(기준) 부재 강조 */
line.copy-source {
    stroke: #af52de !important; /* 보라색 */
    stroke-width: 20px !important; /* 두껍게 */
    stroke-dasharray: 5, 5; /* 점선으로 구분 */
    filter: drop-shadow(0 0 8px #af52de);
    opacity: 1 !important;
    animation: pulse-purple-line 1.5s infinite;
}

@keyframes pulse-purple-line {
    0% { stroke-opacity: 1; stroke-width: 20px; }
    50% { stroke-opacity: 0.6; stroke-width: 22px; }
    100% { stroke-opacity: 1; stroke-width: 20px; }
}


/* truss.css 파일에 추가 */

/* 1. 대칭 복사 선택된 부재 (연한 파란색, 두껍게) */
line.symmetry-selected {
    stroke: #80d4ff !important; /* 연한 파란색 */
    stroke-width: 8px !important;
    stroke-dasharray: 5, 5; /* 선택된 느낌을 주는 점선 */
    filter: drop-shadow(0 0 5px #80d4ff);
    cursor: pointer;
}

/* 2. 대칭 복사 확정 버튼 (캔버스 왼쪽 상단) */
#symmetry-confirm-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #007aff;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

#symmetry-confirm-btn:hover {
    transform: scale(1.05);
    background-color: #fff;
}

#symmetry-confirm-btn img {
    width: 24px;
    height: 24px;
}

#symmetry-confirm-btn span {
    font-size: 12px;
    font-weight: bold;
    color: #007aff;
}

/* truss.css 파일에 추가 */

/* 기존 joint(흰색), fix(하늘색) 아래에 추가 */
.icon-circle.align {
    width: 20px;
    height: 20px;
    background-color: #30d158; /* 애플 스타일 초록색 */
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

/* 버튼 호버 시 효과 */
.expert-tool-btn:hover .icon-circle.align {
    transform: scale(1.1);
    background-color: #2eb04a;
}

/* 활성화 상태 (Active) */
.expert-tool-btn.active .icon-circle.align {
    background-color: #30d158;
    box-shadow: 0 0 8px #30d158;
    border-color: #fff;
}



/* 보라색 고정 모드 (Absolute Fix) 스타일 */
.expert-preview-container.fix-mode-purple .truss-node {
    opacity: 0.3; /* 일단 다 흐리게 */
    pointer-events: none;
}
.expert-preview-container.fix-mode-purple .truss-node.absolute-fix-hint {
    opacity: 1; /* 타겟만 선명하게 */
    pointer-events: all;
    fill: #fff !important;
    stroke: #d500f9 !important; /* 보라색 테두리 */
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px #d500f9); /* 보라색 형광 */
    cursor: pointer;
    animation: pulsePurple 1.5s infinite;
}
.expert-preview-container.fix-mode-purple .truss-node.fixed-node,
.expert-preview-container.fix-mode-purple .truss-node.absolute-fixed-node {
    opacity: 1; /* 이미 고정된 애들도 잘 보이게 */
    pointer-events: none; /* 하지만 클릭은 안 되게 (기준점 수정 방지) */
}

@keyframes pulsePurple {
    0% { stroke-width: 4px; filter: drop-shadow(0 0 5px #d500f9); }
    50% { stroke-width: 6px; filter: drop-shadow(0 0 12px #d500f9); }
    100% { stroke-width: 4px; filter: drop-shadow(0 0 5px #d500f9); }
}

/* 보라색 버튼 스타일 */
.truss-btn.mode-absolute {
    border: 2px solid #d500f9 !important;
    background-color: rgba(213, 0, 249, 0.1) !important;
}

/* ========================================= */
/* 🚫 [명륜이 특제] 텍스트 선택 방지 코팅 */
/* 드래그 시 글자가 파랗게 잡히는 현상 제거 */
/* ========================================= */

/* 1. 메인 프리뷰 영역 전체 */
.expert-preview-container, 
.drawing-wrapper,
#expert-preview-content {
    -webkit-user-select: none; /* 크롬, 사파리 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* 구형 IE/Edge */
    user-select: none;         /* 표준 */
}

/* 2. SVG 내부의 모든 텍스트 (좌표, 이름, 치수 등) */
.drawing-svg-layer text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none; /* 텍스트가 마우스 이벤트를 가로채지 않게 (선택/클릭 투과) */
}

/* 3. 리스트 아이템 내부 텍스트도 선택 방지 (원하시면) */
.expert-list-item {
    user-select: none;
}

/* 🚨 예외: 입력창(Input)은 글씨를 써야 하니까 선택 가능하게! */
.expert-preview-container input,
.expert-preview-container textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}