/* tensor.css - Tensor/CAD Module Styles */

/* 1. 애플 스타일 모눈종이 (Grid) */
/* 줌 확대 시 1px 선 두께는 유지하면서 간격만 커지도록 처리 */
.tensor-grid-bg {
    background-color: #1c1c1e;
    /* 큰 격자 (100px) & 작은 격자 (20px) */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: center center;
}

/* 2. Tensor 도구함 레이아웃 */
.tensor-toolbar-container {
    padding: 5px;
}

/* 섹션 헤더 스타일 */
.tensor-section-title {
    font-size: 12px;
    color: #98989d;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 5px;
    text-transform: capitalize; /* 첫 글자만 대문자 */
    letter-spacing: 0.5px;
    padding-left: 2px;
}

/* 1. 그리드 시스템 통일 (모두 3열) */
.tensor-tool-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3등분 */
    gap: 8px;
    margin-bottom: 10px;
}

/* 2열용 클래스 (3열과 동일하게 맞춤 - 왼쪽부터 채워짐) */
.tensor-tool-grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열로 설정하여 2개 배치 시 오른쪽 1칸 비움 */
    gap: 8px;
    margin-bottom: 5px;
}

/* 3. 버튼 기본 스타일 */
.tensor-btn {
    width: 100%;
    aspect-ratio: 1/1; /* 정사각형 유지 */
    background-color: #2c2c2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* 둥근 모서리 */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
}

.tensor-btn:hover {
    background-color: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.3);
}

.tensor-btn.active {
    background-color: #0a84ff; /* 활성화 시 파란색 */
    border-color: #0a84ff;
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.4);
}

/* 4. 아이콘 디자인 (CSS로 직접 그림 - SVG 불필요) */
.icon-draw { display: block; pointer-events: none; }

/* (1) Line */
.icon-line { 
    width: 20px; height: 2px; background: #fff; 
    transform: rotate(-45deg); border-radius: 1px; 
}

/* (2) Hollow Rect */
.icon-rect-stroke { width: 18px; height: 14px; border: 2px solid #fff; box-sizing: border-box; border-radius: 1px; }

/* (3) Hollow Circle */
.icon-circle-stroke { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; }

/* (4) Filled Rect */
.icon-rect-fill { width: 18px; height: 14px; background: #fff; border-radius: 1px; }

/* (5) Filled Circle */
.icon-circle-fill { width: 16px; height: 16px; background: #fff; border-radius: 50%; }

/* (6) Arc (호) */
.icon-arc { 
    width: 16px; height: 16px; 
    border-top: 2px solid #fff; 
    border-right: 2px solid #fff; 
    border-radius: 0 100% 0 0; 
}

/* (7) Round/Fillet (빨간 가이드 포함) */
.icon-fillet-box {
    width: 16px; height: 16px;
    border-top: 2px solid #fff; 
    border-right: 2px solid #fff;
    position: relative;
}
.icon-fillet-curve {
    position: absolute;
    top: -2px; right: -2px;
    width: 10px; height: 10px;
    border-top: 2px solid #ff3b30;
    border-right: 2px solid #ff3b30;
    border-top-right-radius: 10px;
}

/* (8) Ruler (자) */
.icon-ruler {
    width: 20px; height: 6px; 
    background-color: #ccc; 
    transform: rotate(-45deg);
    border-radius: 1px;
    background-image: linear-gradient(90deg, transparent 50%, #333 50%);
    background-size: 3px 100%;
    border: 1px solid #fff;
}

/* 5. 캔버스 드로잉 스타일 */
.tensor-temp-shape {
    fill: rgba(10, 132, 255, 0.2); /* 드래그 중인 도형 채움색 */
    stroke: #0a84ff; /* 드래그 중인 선 색상 */
    stroke-width: 2;
    stroke-dasharray: 4, 4; /* 점선 효과 */
}

/* 확정된 도형 스타일 */
.tensor-shape-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke; /* 줌 해도 선 두께 유지 */
    cursor: pointer;
}
.tensor-shape-stroke:hover { stroke: #0a84ff; }

.tensor-shape-fill {
    fill: #fff;
    stroke: none;
    cursor: pointer;
    opacity: 0.8;
}
.tensor-shape-fill:hover { fill: #0a84ff; opacity: 1; }

.tensor-line {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    cursor: pointer;
}