*{box-sizing:border-box}

body{
    margin:0;
    font-family:"Malgun Gothic",Arial,sans-serif;
}

.home{
    font-size:25px;
    text-decoration:none;
}

#pcbImage {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* PCB 공통 */
.pcb-stage>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#partsLayer{display:none}

/* SVG components */
.r1608 .body{fill:#1e1e1e}.r1005 .body{fill:#1e1e1e}
.term{fill:#d7d7d7}.mark{fill:white;font-family:Arial,sans-serif;text-anchor:middle}
.capbody{fill:#c5a172}
.icbody{fill:#202020}.icpin{fill:#d0d0d0}
.vrbody{fill:#075bdc}.vrknob{fill:#ffe000}

/* 범용 전자용 디지털 멀티미터 */
.generic-dmm{
  width:220px;
  height:420px;
  padding:0;
  margin:auto;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

/* =========================================================
   PCB 검사 시뮬레이션 - WORKBENCH LAYOUT
   PCB 크기 및 내부 기능은 변경하지 않음
   ========================================================= */

/* 전체 배경 */
body{
    background:#f3f5f7;
    color:#20252b;
}

/* 상단 */
header{
    height:64px;
    background:#ffffff;
    border-bottom:1px solid #e3e7eb;
    padding:0 28px;

    display:flex;
    align-items:center;
    position:relative;
}

header h1{
    position:absolute;
    left:50%;
    transform:translateX(-50%);

    margin:0;

    font-size:20px;
    font-weight:700;
    letter-spacing:-0.4px;
}

.home{
    font-size:25px;
    text-decoration:none;
    color:#59636e;
}


/* =========================================================
   메인 작업 영역
   ========================================================= */

.workspace{
    display:grid;

    /* 멀티미터 / PCB / 조작부 */
    grid-template-columns:280px 700px 210px;

    justify-content:center;
    align-items:start;

    column-gap:34px;
    row-gap:18px;

    max-width:1320px;
    margin:0 auto;
    padding:34px 24px 24px;

    min-height:calc(100vh - 64px);
}


/* =========================================================
   기존 카드 스타일 제거
   ========================================================= */

.panel{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
}


/* 영역 제목 */
.panel h2{
    height:30px;
    margin:0 0 14px;

    display:flex;
    align-items:center;

    font-size:14px;
    font-weight:700;
    color:#4d5863;

    letter-spacing:-0.2px;
}



/* =========================================================
   PCB 중앙 작업 영역
   ========================================================= */

.center{
    display:flex;
    align-items:flex-start;
    justify-content:center;

    min-height:0;
    padding:44px 0 0;

    overflow:visible;
}


/*
   중요:
   PCB는 기존 700px 절대 변경하지 않음
*/

.pcb-stage{
    position:relative;

    width:700px;
    max-width:700px;

    aspect-ratio:1125/845;

    flex:none;

    /* PCB가 작업대에서 살짝 떠 있는 느낌 */
    filter:drop-shadow(0 7px 12px rgba(26,34,42,.10));
}


/* =========================================================
   오른쪽 조작 패널
   ========================================================= */

.controls{
    padding-top:0;
}


/* 조작 제목 */
.controls h2{
    margin:0 0 12px;
}


/* 버튼 */
.controls button{
    width:100%;

    padding:9px 10px;
    margin:0 0 7px;

    border:1px solid #d2d8de;
    border-radius:7px;

    background:#ffffff;

    color:#3b444d;
    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .08s ease;
}


.controls button:hover:not(:disabled){
    background:#f8fafb;
    border-color:#b9c2cb;
}


.controls button:active:not(:disabled){
    transform:translateY(1px);
}


/* 주요 버튼 */
.controls button.primary{
    background:#1769d2;
    border-color:#1769d2;
    color:#ffffff;
}

.controls button.primary:hover:not(:disabled){
    background:#125fc3;
    border-color:#125fc3;
}


/* 비활성 버튼 */
.controls button:disabled{
    opacity:.38;
    cursor:not-allowed;
}


/* =========================================================
   검사 모드
   ========================================================= */

.mode{
    margin:12px 0 0;
    padding:12px 0;
    border-top:1px solid #e1e5e9;
    border-bottom:1px solid #e1e5e9;
}

.mode strong{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color:#4a545e;
}

.mode-row{
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:nowrap;
}

.mode .mode-row label{
    display:flex;
    align-items:center;
    gap:5px;
    margin:0;
    white-space:nowrap;
    font-size:12px;
}


/* =========================================================
   반응형
   ========================================================= */

@media(max-width:1250px){

    .workspace{
        grid-template-columns:250px minmax(600px,700px) 190px;
        column-gap:20px;
        padding-left:18px;
        padding-right:18px;
    }
}

/* =========================================================
   납땜 연습
   ========================================================= */

#solderLayer{
    pointer-events:none;
}

/* 납땜 모드에서만 마우스 입력 허용 */
#solderLayer.solder-active{
    pointer-events:auto;
}

/* 실제 클릭 영역 - 평소에는 보이지 않음 */
.solder-hit{
    fill:transparent;
    cursor:pointer;
}

/* 마우스를 올렸을 때 납땜 위치 안내 */
.solder-hit:hover{
    fill:rgba(255,255,255,.16);
    stroke:rgba(255,255,255,.55);
    stroke-width:2;
}

/* 납땜된 상태 */
.solder-joint{
    pointer-events:none;
}



/* =========================================================
   PCB 검사 AREA - 개발/좌표 검수용
   ========================================================= */

#testLayer{
    pointer-events:none;
}

/* 좌표 검수용 AREA */
.test-area-debug{
    fill:rgba(255, 40, 40, .28);
    stroke:#ff3030;
    stroke-width:2;
}

/* AREA 중심점 */
.test-center-debug{
    fill:#ffff00;
    stroke:#222;
    stroke-width:1;
    pointer-events:none;
}


/* =========================================================
   멀티미터 테스트 프로브
   ========================================================= */

.probe-layer{
    pointer-events:none;
    overflow:visible;
}

.test-probe{
    pointer-events:auto;
    cursor:grab;
    touch-action:none;
}

.test-probe:active{
    cursor:grabbing;
}


/* 금속 바늘 */
.probe-needle{
    stroke:#d9dde0;
    stroke-width:7;
    stroke-linecap:round;
}


/* 프로브 손잡이 */
.probe-handle{
    stroke:#151515;
    stroke-width:3;
}


/* 검정 프로브 */
.probe-black{
    fill:#24282b;
}


/* 빨강 프로브 */
.probe-red{
    fill:#d92128;
}


/* 실제 측정 판정점 */
.probe-tip{
    pointer-events:none;
}


/* 디버그용 tip 표시 */
.probe-tip-black{
    fill:#111;
    stroke:#fff;
    stroke-width:2;
}

.probe-tip-red{
    fill:#ff2028;
    stroke:#fff;
    stroke-width:2;
}


/* =========================================================
   프로브 선택 버튼
   ========================================================= */

.probe-controls{
    margin-top:12px;
    padding-top:12px;
    border-top:0;
}

.probe-controls strong{
    display:block;
    margin-bottom:10px;
    font-size:14px;
    color:#30363b;
}

.probe-select-btn{
    position:relative;
    width:100%;
    height:42px;
    margin-bottom:8px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;

    padding:0 13px;

    background:#fff;
    border:1px solid #d6dce2;
    border-radius:7px;

    font-size:13px;
    font-weight:600;
    color:#333;

    cursor:pointer;

    transition:
        border-color .15s,
        box-shadow .15s,
        background .15s;
}

.probe-select-btn:hover{
    background:#f8f9fa;
}


/* 선택된 프로브 */

.probe-select-btn.active{
    border-color:#2474d8;
    background:#f1f7ff;

    box-shadow:
        0 0 0 2px rgba(36,116,216,.12);
}


/* 색상 표시 */

.probe-color-dot{
    width:11px;
    height:11px;

    flex:0 0 11px;

    border-radius:50%;
}

.probe-select-btn.black .probe-color-dot{
    background:#24282b;
}

.probe-select-btn.red .probe-color-dot{
    background:#d92128;
}


/* 마우스를 따라다니는 상태 */

.test-probe.is-floating{
    cursor:none;
}

.pcb-stage.probe-placement-active{
    cursor:crosshair;
}


.probe-contact-effect{
    fill:none;
    stroke:#ffd43b;
    stroke-width:4;
    opacity:0;
    pointer-events:none;
}

.probe-contact-effect.fire{
    animation:probeContactPulse .28s ease-out;
}

@keyframes probeContactPulse{

    0%{
        r:5px;
        opacity:1;
        stroke-width:5;
    }

    100%{
        r:24px;
        opacity:0;
        stroke-width:1;
    }
}

.probe-help{
    margin-top:9px;
    padding:0;
    background:transparent;
    border-radius:0;
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    color:#7a838c;
}

.debug-option{
    display:flex;
    align-items:center;
    gap:5px;
    margin:0;
    font-size:12px;
    color:#8a9198;
    cursor:pointer;
    user-select:none;
}

.debug-option input{
    margin:0;
}

#testLayer{
    display:none;
}

#testLayer.show-test-areas{
    display:block;
}

.probe-control-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.probe-control-head strong{
    margin-bottom:0;
}

.probe-angle-control{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    color:#777;
}

.probe-angle-control input[type="range"]{
    width:72px;
    height:4px;
    cursor:pointer;
}

#probeAngleValue{
    width:46px;
    height:25px;

    padding:2px 3px;

    border:1px solid #cfd5db;
    border-radius:4px;

    background:#fff;

    text-align:center;

    font-size:11px;
    color:#555;

    font-variant-numeric:tabular-nums;
}

.component-remove-option{
    display:flex;
    align-items:center;
    gap:7px;

    margin:9px 0 12px;
    padding:7px 9px;

    font-size:12px;
    color:#666;

    background:#f7f8f9;
    border-radius:6px;

    cursor:pointer;
    user-select:none;
}

.component-remove-option input{
    margin:0;
}

.component-delete-button{
    position:absolute;
    z-index:20;

    width:22px;
    height:22px;

    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #c8cdd2;
    border-radius:50%;

    background:#fff;

    color:#555;
    font-size:17px;
    font-weight:700;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 2px 5px rgba(0,0,0,.18);
}

.component-delete-button:hover{
    background:#fff1f1;
    border-color:#e05b5b;
    color:#d32f2f;
}

/* =========================================================
   부품 제거 모드
   ========================================================= */

#partsLayer.component-remove-active{
    pointer-events:all !important;
}

#partsLayer.component-remove-active g[id]{
    pointer-events:all !important;
    cursor:pointer !important;
}

#partsLayer.component-remove-active g[id] *{
    pointer-events:all !important;
    cursor:pointer !important;
}

.pcb-side-control{
    display:flex;
    gap:6px;
    margin-bottom:12px;
}

.pcb-side-control button{
    flex:1;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    line-height:1;

    border:1px solid #d4d9df;
    border-radius:6px;

    background:#fff;
    color:#555;

    font-size:13px;
    font-weight:700;

    cursor:pointer;
}

.pcb-side-control button.active{
    background:#343a40;
    border-color:#343a40;
    color:#fff;
    font-weight:700;
}

.vr2-control {
    width: 126px;
    height: 26px;

    display: flex;
    align-items: center;
    gap: 6px;

    font-family: Arial, sans-serif;
}

.vr2-control input[type="range"] {
    width: 78px;
    margin: 0;
    cursor: pointer;
}

.vr2-control input[type="number"] {
    width: 34px;
    height: 22px;

    padding: 0 2px;

    border: 1px solid #bbb;
    border-radius: 4px;

    background: #fff;

    font-size: 11px;
    text-align: center;

    box-sizing: border-box;
}

.vr2-control,
.vr2-control input {
    pointer-events: auto !important;
}

/* =========================================================
   PCB 하단 작업 안내
   ========================================================= */

.pcb-center-wrap {
    width:700px;
}

.pcb-center-wrap .status {
    width:100%;

    margin-top:10px;
    padding:10px 4px 0;

    border-top:1px solid #dce1e6;

    background:transparent;

    color:#68727c;
    font-size:12px;
    line-height:1.65;
}

/* =========================================================
   오른쪽 조작부 - Compact Layout
   ========================================================= */

.component-section{
    margin-top:10px;
}

.component-remove-option{
    margin:3px 0 10px;
}

.solder-button-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.solder-button-row button{
    width:100%;
    margin-bottom:0;
}

.reset-compact{
    margin-top:7px !important;
}

.probe-control-head{
    margin-bottom:9px;
}

.probe-button-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.controls .probe-select-btn{
    width:100%;
    height:38px;
    margin:0;
    padding:0 10px;
    justify-content:center;
    gap:7px;
}


/* ==========================================
   PCB 상단 통합 툴바
   ========================================== */

.pcb-center-wrap {
    position: relative;
}

.pcb-toolbar {
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;

    height: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 0;
}

.pcb-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 다른 영역 제목과 동일 */

.pcb-toolbar h2 {
    margin: 0;
    height: 30px;

    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #4d5863;
}

/* 앞면 / 뒷면 : 제목 옆의 작은 선택 버튼 */

.pcb-toolbar .pcb-side-control {
    display: flex;
    gap: 4px;
    margin: 0;
}

.pcb-toolbar .pcb-side-control button {
    width: auto;
    height: 27px;
    min-width: 48px;
    padding: 0 10px;
    margin: 0;

    font-size: 11px;
    font-weight: 600;

    border: 1px solid #d4d9df;
    border-radius: 5px;

    background: transparent;
    color: #68727c;
}

.pcb-toolbar .pcb-side-control button.active {
    background: #343a40;
    border-color: #343a40;
    color: #fff;
}

/* 회로도 보기 */

.pcb-toolbar .circuit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    background: #fff;
    border: 1px solid #d2d8de;
    border-radius: 5px;

    color: #4d5863;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pcb-toolbar .circuit-btn:hover {
    color: #1769d2;
    border-color: #a9bfdc;
    background: #f1f6fc;
}