/* =========================================================
   HIOKI 3280-10F
   PCB 검사 시뮬레이터 전용 멀티미터
   ========================================================= */

.hioki-meter {
    position: relative;

    width: 287px;
    aspect-ratio: 815 / 1493;

    margin: 0 auto;

    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   본체 배경
   ========================================================= */

.hioki-meter-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;
}


/* =========================================================
   LCD

   배경 이미지 위에 실제 측정값을 표시
   ========================================================= */

.hioki-lcd {
    position: absolute;

    left: 11.9%;
    top: 11.85%;

    width: 76.2%;
    height: 15.8%;

    z-index: 20;

    color: #3f4946;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    pointer-events: none;

    /* LCD 특유의 연녹색 + 좌우 미세 음영 */
    background:
        linear-gradient(
            90deg,
            #a4b99b 0%,
            #b3c7a8 5%,
            #bccdaf 16%,
            #bfd0b3 50%,
            #bdceb0 84%,
            #aec2a3 96%,
            #9faf97 100%
        );

    /*
       LCD 가장자리 자체에 어두운 음영을 넣어
       배경 이미지의 베젤과 자연스럽게 연결
    */
    box-shadow:
        inset 3px 0 5px rgba(15, 22, 18, .32),
        inset -3px 0 5px rgba(15, 22, 18, .27),
        inset 0 3px 5px rgba(18, 25, 20, .23),
        inset 0 -4px 6px rgba(10, 16, 13, .30),

        inset 0 0 2px rgba(0, 0, 0, .45);

    /* 아주 미세한 어두운 경계 */
    border: 1px solid rgba(25, 32, 28, .38);

    overflow: hidden;
}

/* =========================================================
   LCD 내부 표시
   ========================================================= */

.hioki-lcd {
    overflow: hidden;
}


/* AUTO */

.hioki-lcd-auto {
    position: absolute;

    top: 8%;
    left: 50%;

    transform: translateX(-50%);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    color: #3f4946;
}


/* 메인 측정값 */

.hioki-lcd-value {
    position:absolute;
    left:10%;
    top:50%;
    transform:translateY(-43%);
    width:62%;
    text-align:center;

    font-family:"Consolas","Courier New",monospace;
    font-size:46px;
    font-weight:500;
    line-height:1;
    letter-spacing:-4px;

    color:#3f4946;
    white-space:pre;
}


/* 오른쪽 단위 */

.hioki-lcd-unit {
    position: absolute;

    right: 5.5%;
    top: 50%;

    width: 38px;

    transform: translateY(-45%);

    display: block;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;

    color: #3f4946;
}


/* =========================================================
   도통 표시

   LCD 오른쪽 세로 위치
   1/5 : 도통 아크 + 화살표
   2/5 : Ω
   ========================================================= */

.hioki-continuity-symbol {
    display: none;

    position: relative;

    width: 24px;
    height: 46px;
}

/* =========================================================
   도통 아크
   LCD 높이의 약 1/5 위치
   ========================================================= */

.hioki-buzzer {
    position: absolute;

    left: 20px;
    top: -10px;

    width: 20px;
    height: 15px;

    display: block;
}


/* 아크 공통 */

.hioki-buzzer i {
    position: absolute;

    left: 50%;

    border: 0;
    border-top: 2.3px solid #3f4946;

    border-radius: 50% 50% 0 0;

    transform: translateX(-50%);
}


/* 가장 위 : 가장 긴 아크 */

.hioki-buzzer i:nth-child(3) {
    top: 0;

    width: 20px;
    height: 9px;
}


/* 가운데 */

.hioki-buzzer i:nth-child(2) {
    top: 4px;

    width: 14px;
    height: 7px;
}


/* 가장 아래 : 가장 짧은 아크 */

.hioki-buzzer i:nth-child(1) {
    top: 8px;

    width: 8px;
    height: 5px;
}


/* =========================================================
   서로 마주보는 화살표
   ========================================================= */

.hioki-buzzer::after {
    content: "→←";

    position: absolute;

    left: 50%;
    top: 11px;

    transform: translateX(-50%);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    color: #3f4946;
}


/* =========================================================
   다이얼 전체 기준점

   크롭된 815 × 1493 이미지 기준
   ========================================================= */

.hioki-dial-wrap {
    position: absolute;

    left: 50.69%;
    top: 68.91%;

    width: 60.31%;
    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    z-index: 10;
}


/* =========================================================
   검은 음각 홈
   ========================================================= */

.hioki-dial-recess {
    position: absolute;

    inset: -4.5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 48%,
            #20272c 0%,
            #181e22 67%,
            #0b0f12 82%,
            #050708 100%
        );

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .65),
        inset 0 5px 8px rgba(0, 0, 0, .72),
        inset 0 -2px 3px rgba(255, 255, 255, .09),
        0 2px 3px rgba(0, 0, 0, .32);

    pointer-events: none;
}


/* =========================================================
   회전 다이얼
   ========================================================= */

.hioki-dial {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    cursor: pointer;

    transform: rotate(5deg);
    transform-origin: 50% 50%;

    transition: transform .16s ease-out;

    filter:
        drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}


/* =========================================================
   파란 다이얼 본체
   ========================================================= */

.hioki-dial-body {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 30%,
            #4b82ec 0%,
            #3471df 23%,
            #2863d4 48%,
            #1d51bd 76%,
            #17449f 100%
        );

    border: 2px solid #153b8a;

    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, .23),
        inset 0 -7px 10px rgba(0, 0, 0, .20),
        0 1px 2px rgba(0, 0, 0, .45);
}


/* =========================================================
   다이얼 테두리 홈
   ========================================================= */

.hioki-dial-ridges {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,

            rgba(13, 58, 145, .98) 0deg,
            rgba(13, 58, 145, .98) 2deg,

            rgba(86, 139, 245, .92) 2deg,
            rgba(86, 139, 245, .92) 4deg,

            transparent 4deg,
            transparent 8deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0%,
            transparent 77%,
            #000 78%,
            #000 100%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0%,
            transparent 77%,
            #000 78%,
            #000 100%
        );

    pointer-events: none;
}


/* =========================================================
   중앙 파란 면
   ========================================================= */

.hioki-dial-center {
    position: absolute;

    left: 10%;
    top: 10%;

    width: 80%;
    height: 80%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 36% 28%,
            #477fe9 0%,
            #3470dc 34%,
            #2860ce 66%,
            #1c4daf 100%
        );

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .10);

    pointer-events: none;
}


/* =========================================================
   다이얼 표시 돌기
   ========================================================= */

.hioki-dial-pointer {
    position: absolute;

    left: 76%;
    top: 27%;

    width: 13%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 27%,
            #83adff 0%,
            #4b86ef 18%,
            #3370dc 42%,
            #2055bd 72%,
            #153d93 100%
        );

    box-shadow:
        inset 1px 2px 3px rgba(255, 255, 255, .42),
        0 2px 4px rgba(0, 0, 0, .40);

    pointer-events: none;
}


.hioki-dial-pointer::after {
    content: "";

    position: absolute;

    left: 27%;
    top: 21%;

    width: 20%;
    height: 20%;

    border-radius: 50%;

    background: rgba(255, 255, 255, .72);
}


/* =========================================================
   실제 이미지의 파란 SELECT 버튼 위 클릭영역

   버튼 자체는 배경 이미지에 있으므로 투명
   ========================================================= */

.hioki-select-btn {
    position: absolute;

    left: 18.2%;
    top: 38.4%;

    width: 17%;
    height: 6.3%;

    z-index: 30;

    padding: 0;

    border: 0;
    border-radius: 45%;

    background: transparent;

    cursor: pointer;
}


/* =========================================================
   HOLD 버튼 클릭영역
   ========================================================= */

.hioki-hold-btn {
    position: absolute;

    left: 69.5%;
    top: 38.4%;

    width: 17%;
    height: 6.3%;

    z-index: 30;

    padding: 0;

    border: 0;
    border-radius: 45%;

    background: transparent;

    cursor: pointer;
}


/* 클릭 피드백 */

.hioki-select-btn:active,
.hioki-hold-btn:active {
    background: rgba(255, 255, 255, .10);
}

/* =========================================================
   HIOKI 저항 단위
   ========================================================= */

/* M 또는 k */

#hiokiUnitText {
    position: absolute;

    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    display: block;
}

/* Ω : 저항 / 도통 공통 고정 위치 */

#hiokiOhmUnit {
    position: absolute;

    right: 0;
    top: -10px;

    transform: none;

    display: block;

    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}

#hiokiUnitPrefix {
    display: block;
}

/* M */

#hiokiUnitPrefix.prefix-mega {
    transform: translateY(0);
}

/* k */

#hiokiUnitPrefix.prefix-kilo {
    transform: translateY(4px);
}

/* 도통 모드에서만 Ω 위치 미세조정 */
#hiokiOhmUnit.continuity-ohm {
    top: 11px;
}