/* public/expert_panel.css */
/* ▼▼▼ [명륜이표] 다크모드 전문가 패널 전용 스타일 (Apple Dark Style - 완결판) ▼▼▼ */

/* 1. 전체 레이아웃 (Flexbox 3분할) */
.expert-split-layout {
    display: flex;
    flex-direction: row; /* 가로 배치 명시 */
    width: 100%;
    height: 100%;
    gap: 12px; /* 간격 살짝 조정 */
    padding: 0 10px 20px 10px;
    box-sizing: border-box;
    overflow: hidden; /* 삐져나옴 방지 */
}

/* 2. 좌측: 미리보기 (50%) */
.expert-preview-container {
    flex: 5; /* 비율 5 */
    min-width: 0; /* Flex 오동작 방지 */
    
    background-color: #1c1c1e; /* 딥 다크 배경 */
    border: 1px solid #3a3a3c;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* 스크롤은 내부 콘텐츠가 담당 */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}


.expert-preview-container h4 {
    color: #f5f5f7;
    margin-top: 0;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 12px;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: -0.01em;
    flex-shrink: 0; /* 제목은 줄어들지 않음 */
}

/* 미리보기 내부 콘텐츠 (스크롤 영역) */
#expert-preview-content {
    position: relative !important;
    width: 100%;
    height: 100%;
    overflow: auto; /* 여기서 스크롤 */
    flex-grow: 1;
}


.expert-preview-container .empty-msg {
    color: #86868b;
    text-align: center;
    margin-top: 3rem;
    font-size: 0.95em;
}

/* 미리보기 이미지 아이템 스타일 */
.expert-preview-item {
    margin-bottom: 1rem;
    border: 1px solid #48484a; /* 은은한 테두리 */
    border-radius: 8px;
    overflow: hidden;
    background-color: #000; /* 이미지가 투명할 때 뒤가 검게 보이도록 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 이미지 자체 스타일 */
.expert-preview-item img {
    width: 100%;
    height: auto;
    display: block; /* 하단 여백 제거 */
}

/* 3. 중앙: 도구 바 (약 15~20%) */
.expert-toolbar {
    flex: 1.5; /* 비율 1.5 */
    min-width: 130px; /* 최소 너비 확보 */
    
    background-color: #2c2c2e; /* 사이드바 회색 */
    border: 1px solid #3a3a3c;
    border-radius: 16px;
    
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 20px;
    
    overflow-y: auto; /* 도구 많으면 스크롤 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}



/* 4. 도구 섹션 */
.tool-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 섹션 제목 (왼쪽 '업로드된 문제' 스타일과 통일) */
.tool-section-title {
    font-size: 12px;   /* 12px로 살짝 키워 가독성 확보 */
    color: #f5f5f7;    /* 밝은 흰색 (왼쪽 헤더와 색상 통일) */
    font-weight: 600;  /* 두께감 통일 */
    text-transform: uppercase; 
    letter-spacing: 0.5px;     
    padding-bottom: 6px;
    border-bottom: 1px solid #3a3a3c; 
    margin-bottom: 8px; 
}

/* 도구 버튼 그리드 (3열 배치!) */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개씩 나란히 */
    gap: 8px; /* 버튼 사이 간격 */
}

/* 개별 도구 버튼 (작고 귀엽게 유지) */
.expert-tool-btn {
    aspect-ratio: 1 / 1; 
    background-color: #3a3a3c; 
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; 
    transition: all 0.2s ease;
}

/* 버튼 호버 효과 */
.expert-tool-btn:hover {
    background-color: #48484a;
    border-color: #636366;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 버튼 클릭 효과 */
.expert-tool-btn:active {
    transform: translateY(0);
    background-color: #007aff; 
}

/* 내부 아이콘 이미지 */
.expert-tool-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* 텍스트 버튼 (XY 축) */
.expert-tool-btn span {
    font-size: 11px; 
    font-weight: 700;
    color: #fff;
}

/* 플레이스홀더 */
.expert-tool-placeholder {
    aspect-ratio: 1 / 1;
    background-color: #3a3a3c;
    border-radius: 6px;
    opacity: 0.3;
}

/* 패널 높이 설정 */
#expert-options-panel.open {
    height: auto;
    max-height: 85vh;
    background-color: #1c1c1e; 
    color: #fff;
    overflow: hidden; 
}

/* 스크롤바 디자인 (다크모드 최적화) */
.expert-preview-container::-webkit-scrollbar,
.expert-toolbar::-webkit-scrollbar {
    width: 4px;
}
.expert-preview-container::-webkit-scrollbar-thumb,
.expert-toolbar::-webkit-scrollbar-thumb {
    background-color: #48484a;
    border-radius: 10px;
}
.expert-preview-container::-webkit-scrollbar-track,
.expert-toolbar::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 1. 형광등 깜빡임 애니메이션 정의 (1초 간격) */
@keyframes vector-blink {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 10px #ff004c, 0 0 20px #ff004c; /* 밝게 빛남 */
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8); /* 살짝 작아지며 흐려짐 */
        box-shadow: 0 0 5px #ff004c, 0 0 10px #ff004c;
    }
}


/* 2. 붉은 형광 포인터 */
.vector-cursor-dot {
    position: fixed;
    width: 14px; /* 기존 12px보다 살짝 키워 존재감 Up */
    height: 14px;
    background-color: #ff004c;
    border-radius: 50%;
    
    /* 🚨 [핵심] 애니메이션 적용 (1초 동안 무한 반복) */
    animation: vector-blink 1s ease-in-out infinite;
    
    pointer-events: none; 
    z-index: 9999;
    
    /* transform은 애니메이션 안에서 제어하므로 여기선 제거하거나 초기값만 설정 */
    transform: translate(-50%, -50%);
    
    display: none; /* JS가 켜주기 전까진 숨김 */
}

/* 3. 안내 메시지 (기존 유지) */
.vector-guide-msg {
    position: fixed;
    background: rgba(0, 0, 0, 0.8); /* 가독성 위해 조금 더 진하게 */
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    display: none;
    backdrop-filter: blur(4px); /* 고급진 블러 효과 */
}

.expert-preview-container.drawing-mode {
    cursor: none; /* 그리기 모드일 때 기본 커서 숨김 */
}

.vector-arrow {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
}
.vector-arrow:hover path {
    stroke: #ff99aa; 
    fill: #ff99aa;
}


/* ▼▼▼ [신규] 모멘트(Moment) 그리기 도구 스타일 ▼▼▼ */

/* 1. 보라색 형광 깜빡임 애니메이션 */
@keyframes moment-blink {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 10px #af52de, 0 0 20px #af52de; /* 보라색 빛 */
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
        box-shadow: 0 0 5px #af52de, 0 0 10px #af52de;
    }
}

/* 2. 보라색 커서 점 */
.moment-cursor-dot {
    position: fixed;
    width: 14px; height: 14px;
    background-color: #af52de; /* 보라색 */
    border-radius: 50%;
    animation: moment-blink 1s ease-in-out infinite; /* 깜빡임 */
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: none; /* 평소엔 숨김 */
}

/* 3. 그려진 모멘트 화살표 (SVG) */
.moment-arrow {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
}
.moment-arrow:hover path {
    stroke: #d09df2; /* 호버 시 연한 보라색 */
    fill: none; /* 내부는 비움 */
}

/* ▼▼▼ [신규] 도구 버튼 활성화(ON) 스타일 ▼▼▼ */
.expert-tool-btn.active {
    background-color: #007aff !important; /* 파란색 고정 */
    border-color: #007aff !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3) !important; /* 눌린 느낌 */
    transform: translateY(1px); /* 살짝 들어간 위치 */
}

/* 활성화되면 아이콘을 흰색으로 변경 (가독성 UP) */
.expert-tool-btn.active img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* ▼▼▼ [신규] 벡터/모멘트 삭제 버튼 스타일 ▼▼▼ */
.vector-delete-btn {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #ff3b30; /* 빨간 테두리 */
    border-radius: 50%;
    color: #ff3b30;
    font-weight: bold;
    font-size: 14px;
    display: none; /* 평소엔 숨김 */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10001; /* 화살표보다 위 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.vector-delete-btn:hover {
    background-color: #ff3b30;
    color: #fff;
    transform: scale(1.1);
}


/* ▼▼▼ [신규] 거리(Distance) 측정 도구 스타일 ▼▼▼ */

/* 1. 회색 형광 깜빡임 */
@keyframes dist-blink {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px #888, 0 0 16px #888; }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 4px #888, 0 0 8px #888; }
}

/* 2. 회색 커서 점 */
.dist-cursor-dot {
    position: fixed;
    width: 12px; height: 12px;
    background-color: #888; /* 회색 */
    border-radius: 50%;
    animation: dist-blink 1s ease-in-out infinite;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    display: none;
}

/* 3. 거리 화살표 (SVG) */
.dist-arrow {
    position: absolute;
    pointer-events: auto; /* 선 클릭 허용 */
    cursor: pointer;
}
.dist-arrow line {
    stroke: #000; /* 검은색 선 */
    stroke-width: 2;
}
.dist-arrow:hover line {
    stroke: #ff3b30; /* 호버 시 빨간색 */
    stroke-width: 4;
}

/* 4. 좌표/값 입력창 (팝업 인풋) */
.dist-input-box {
    position: absolute;
    width: 60px;
    padding: 4px;
    font-size: 12px;
    text-align: center;
    border: 2px solid #333;
    background-color: #fff;
    color: #000;
    border-radius: 4px;
    z-index: 10000;
    transform: translate(-50%, -50%);
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.dist-input-box:focus {
    border-color: #007aff;
}

/* 5. 완성된 텍스트 라벨 */
.dist-label {
    font-size: 14px;
    font-weight: bold;
    fill: #000;
    text-anchor: middle; /* 가운데 정렬 */
    dominant-baseline: middle;
    user-select: none;
    pointer-events: none; /* 클릭 통과 */
}


/* ▼▼▼ [명륜이표] 커서 & 좌표축 스타일 (완전판) ▼▼▼ */

/* 1. 깜빡임 애니메이션 정의 (통합) */
@keyframes cursor-blink-red { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #ff004c; } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); } }
@keyframes cursor-blink-purple { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #af52de; } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); } }
@keyframes cursor-blink-grey { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #888; } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); } }
@keyframes cursor-blink-black { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #000; } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); } }

/* 2. 커서 점 스타일 (공통 속성) */
.cursor-dot-base {
    position: fixed; width: 14px; height: 14px; border-radius: 50%;
    pointer-events: none; z-index: 9999; display: none;
    transform: translate(-50%, -50%);
}

.vector-cursor-dot { background-color: #ff004c; animation: cursor-blink-red 1s infinite; }
.moment-cursor-dot { background-color: #af52de; animation: cursor-blink-purple 1s infinite; }
.dist-cursor-dot   { background-color: #888;    animation: cursor-blink-grey 1s infinite; }
.axis-cursor-dot   { background-color: #000;    animation: cursor-blink-black 1s infinite; border: 2px solid #fff; }

/* 3. 좌표축 화살표 (점선) */
.axis-arrow {
    position: absolute; pointer-events: auto; cursor: pointer;
}
.axis-arrow line {
    stroke: #000; 
    stroke-width: 3; 
    stroke-dasharray: 6, 4; /* 점선 효과 */
}
.axis-arrow:hover line {
    stroke-width: 5; /* 호버 시 두꺼워짐 */
}

/* 4. 텍스트 라벨 (공통) */
.svg-label {
    font-size: 16px; font-weight: bold; fill: #000;
    text-anchor: middle; dominant-baseline: middle;
    user-select: none; pointer-events: none;
    font-family: sans-serif;
}


/* ▼▼▼ [신규] 좌표축(Axis) 도구 스타일 ▼▼▼ */

/* 1. 검은색 형광 깜빡임 */
@keyframes axis-blink {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px #000, 0 0 16px #000; }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 4px #000, 0 0 8px #000; }
}

/* 2. 검은색 커서 점 */
.axis-cursor-dot {
    position: fixed;
    width: 12px; height: 12px;
    background-color: #000; /* 검은색 */
    border-radius: 50%;
    animation: axis-blink 1s ease-in-out infinite;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    display: none;
}

/* 3. 좌표축 화살표 (SVG) - 점선 */
.axis-arrow {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
}
.axis-arrow line {
    stroke: #000;
    stroke-width: 3;
    stroke-dasharray: 6, 4; /* 점선 효과 */
}
.axis-arrow:hover line {
    stroke: #ff3b30; /* 호버 시 빨간색 */
    stroke-width: 5;
    stroke-dasharray: none; /* 호버하면 실선으로 */
}

/* ▼▼▼ [신규] 각도(Angle) 측정 도구 스타일 ▼▼▼ */

/* 1. 파란색 형광 깜빡임 */
@keyframes angle-blink {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px #007aff, 0 0 16px #007aff; }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 4px #007aff, 0 0 8px #007aff; }
}

/* 2. 파란색 커서 점 */
.angle-cursor-dot {
    position: fixed;
    width: 12px; height: 12px;
    background-color: #007aff; /* 파란색 */
    border-radius: 50%;
    animation: angle-blink 1s ease-in-out infinite;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    display: none;
}

/* 3. 각도 표시기 (SVG) */
.angle-shape {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
}

/* 기준선 & 타겟선 */
.angle-line {
    stroke: #007aff; /* 파란색 */
    stroke-width: 3;
    stroke-linecap: round;
}

/* 각도 호 (Arc) */
.angle-arc {
    fill: none;
    stroke: #007aff;
    stroke-width: 2;
    stroke-dasharray: 4, 2; /* 점선 느낌 */
}

/* 호버 효과 */
.angle-shape:hover .angle-line,
.angle-shape:hover .angle-arc {
    stroke: #5ac8fa; /* 밝은 하늘색 */
    stroke-width: 4;
}


/* ▼▼▼ [명륜이표] 1:1 착붙 레이어 스타일 (Drawing Wrapper) ▼▼▼ */

/* 1. 포장지 (기준점) */
.drawing-wrapper {
    position: relative;
    display: inline-block; /* 이미지 크기에 딱 맞게 조여짐 */
    line-height: 0; /* 하단 여백 제거 */
}

/* 2. 바닥 이미지 */
.preview-image-layer {
    display: block;
    max-width: 100%; /* 컨테이너 안에서 반응형 */
    height: auto; 
    user-select: none;
    pointer-events: none; /* 이미지 자체는 클릭 통과 */
}

/* 3. 투명 그림판 (SVG) */
.drawing-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 이미지 위에 덮임 */
    cursor: crosshair; /* 조준점 커서 */
}


/* ▼▼▼ [신설] 우측: 리스트 컨테이너 (35%) ▼▼▼ */
.expert-list-container {
    flex: 3.5; /* 비율 3.5 */
    min-width: 200px;
    
    background-color: #2c2c2e; /* 도구창과 같은 톤 */
    border: 1px solid #3a3a3c;
    border-radius: 16px;
    padding: 1rem;
    
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.expert-list-container h4 {
    color: #f5f5f7;
    margin: 0 0 1rem 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #3a3a3c;
    font-size: 1.1em;
    font-weight: 600;
}

#expert-list-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px; /* 스크롤바 여백 */
}

/* 리스트 아이템 (주문서 카드) */
.expert-list-item {
    background-color: #3a3a3c; /* 카드 배경 */
    border: 1px solid #48484a;
    border-radius: 10px;
    padding: 12px;
    position: relative;
    transition: all 0.2s ease;
}

.expert-list-item:hover {
    background-color: #48484a; /* 호버 시 밝아짐 */
    transform: translateX(2px);
    border-color: #636366;
}

/* 리스트 아이템 제목 */
.list-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f5f5f7;
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 4px;
}

/* 리스트 아이콘 이미지 */
.list-item-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* 리스트 설명 텍스트 */
.list-item-desc {
    color: #aeaeb2; /* 연한 회색 */
    font-size: 0.85em;
    line-height: 1.4;
    padding-left: 24px; /* 아이콘 너비만큼 들여쓰기 */
}

/* 삭제 버튼 (X) */
.list-item-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    
    background-color: #636366;
    color: #fff;
    border: none;
    border-radius: 50%;
    
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0; /* 평소엔 숨김 */
    transition: all 0.2s;
}

/* 카드에 마우스 올렸을 때만 X 버튼 표시 */
.expert-list-item:hover .list-item-delete-btn {
    opacity: 1;
}

.list-item-delete-btn:hover {
    background-color: #ff453a; /* 애플 레드 */
    transform: scale(1.1);
}

/* 리스트가 비었을 때 메시지 */
.empty-list-msg {
    color: #636366;
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9em;
}

/* ▼▼▼ [명륜이표] 리셋 버튼 스타일 ▼▼▼ */
#mechanics-reset-btn img:hover {
    opacity: 1 !important;       /* 마우스 올리면 선명하게 */
    transform: rotate(180deg);   /* 뱅그르르 돌아가는 회전 효과 */
}