/* 中左側螢幕區 */
#panel{
    background: #796A4D;
    border: 3px solid #594A2D;
    border-radius: 40px;
    box-shadow: 2px 3px 9px #0b0b0a40 inset;
    position: absolute;
    padding: 0;
    z-index: 1;
    width: 1195px;
    height: 640px;
    top: 60px;
    left: 30px;
}
#screenArea,#screenMessage,#message {
    background: #191b22;
    color: #fff;
    position: absolute;
    padding: 0;
}
#screenArea{
    border: 3px solid #a78e52;
    border-radius: 10px;
    width: 540px;
    height: 270px;
    color: #fff;
    box-shadow: 2px 3px 9px #0b0b0a40 inset;
    z-index: 10;
    top: 40px;
    left: 46px;
}
#screenMessage{
    color: white;
    border-radius: 0 0 10px 10px;
    z-index: 11;
    width: 536px;
    height: 186px;
    top: 95px;
    left: 50px;
}
/* 上方品牌資訊 */
#message{
    vertical-align: bottom;
    color: yellow;
    font-size:14pt;
    text-align: right;
    display: flex;
    align-items: center;    /* 垂直靠下 */
    justify-content: space-between;/* 水平靠右 */
    padding:0 6px;
    z-index: 12;
    width: 516px;
    height: 26px;
    top: 284px;
    left: 54px;
}
#logo{
    width:520px;
    height:42px;
    position: absolute;
    z-index: 13;
    left: 58px;
    top: 50px;
    color:#c0c0a0;
}
#G{
    font-size:18pt;
    font-family:"Noto Sans JP Black";
    vertical-align:middle;
}
#hrLine {
    width: 15px;      /* 線條寬度 */
    height: 4px;      /* 線條高度 */
    border: none;     /* 移除預設邊框 */
    background: red;  /* 背景色設為紅色 */
    margin: 0 4px;    /* 適度間距 */
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    z-index: 14;
    top: 23px;
    left:19px;
}
#uW,#instek{
    font-size:18pt;
    font-family:"Nova Slim";
    vertical-align:middle;
}
#sfg2007{
    font-size:14pt;
    font-family:"BIZ UDGothic";
    vertical-align:middle;
}
#SFG{
    font-size:12pt;
    font-family:"Arial";
    vertical-align:middle;
}
#waveBtn {
  /* 顯示設定 */
  display: inline-block;
  padding: 6px 16px;            /* 上下 6px、左右 16px */
  font-size: 14px;
  font-family: "Segoe UI", sans-serif;
  color: #666;                  /* 文字顏色 */
  text-transform: uppercase;
  /* 邊框與圓角 */
  border: 1px solid #444;
  border-radius: 20px;          /* 高度一半左右，產生橢圓 */
  /* 漸層底色 */
  background: linear-gradient(
    to bottom,
    #f5f5f5 0%,
    #e0e0e0 50%,
    #ccc    100%
  );
  /* 內凹高光 + 外陰影 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),  /* 上方高光 */
    inset 0 -1px 0 rgba(0,0,0,0.1),       /* 下方輕微陰影 */
    0 2px 4px rgba(0,0,0,0.2);            /* 外部陰影 */
  cursor: pointer;
  transition: 
    background-color 0.5s ease, 
    box-shadow       0.5s ease;
  position: absolute;
  z-index: 15;
  left: 504px;
  top: 50px;
}
#waveBtn:active {
  /* 按下去時反轉漸層＋加深陰影 */
  background: linear-gradient(
    to bottom,
    #e0e0e0 0%,
    #ccc    100%
  );
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 1px 2px rgba(0,0,0,0.2);
}
/* 中右鍵盤 */
#rightPanel {
    background: #B99A7D;
    border: 3px solid #a78e52;
    border-radius: 10px;
    width: 540px;
    height: 270px;
    color: #fff;
    position: absolute;
    box-shadow: 2px 3px 9px #0b0b0a40 inset;
    z-index: 16;
    top: 40px;
    left: 600px;
}
/* 容器：4 欄 × 3 列 的 Grid 排版 */
#keypad {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(3, 30px);
  gap: 42px 32px;
  position: absolute;
  z-index: 17;
  left: 30px;
  top: 50px;
}
/* 通用按鍵樣式 */
.key {
  /* 大小 */
  width: 100%;
  height: 100%;
  /* 字型 */
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  color: #333;
  /* 邊框與圓角 */
  border: 1px solid #888;
  border-radius: 16px;
  /* 漸層底色 + 3D 內陰影 + 外投影 */
  background: linear-gradient(to bottom, #fdfdfd, #e8e8e8);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.8),  /* 上方高光 */
    inset 0 -2px 4px rgba(0,0,0,0.1),       /* 下方凹陷 */
    0 2px 3px rgba(0,0,0,0.2);              /* 外部陰影 */
  /* 文字垂直水平置中 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 按下去的效果 */
.key:active {
  background: linear-gradient(to bottom, #e0e0e0, #ccc);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 1px 2px rgba(0,0,0,0.2);
}
/* SHIFT 鍵專屬樣式 */
.keyShift {
  /* 圓角加大，接近橢圓 */
  background: linear-gradient(to bottom, #4a90e2, #3a78c2);
  border-color: #3366aa;
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
  width:70px;
  /* 水平置中 */
  justify-self: center;
}
#duty{
 position: absolute;
 z-index: 18;
 top: 32px;
 left: 116px;
 color: blue;
}
#dbB{
 position: absolute;
 z-index: 19;
 top: 32px;
 left: 198px;
 color: blue;
}
#ttl{
 position: absolute;
 z-index: 20;
 top: 32px;
 left: 284px;
 color: blue;
}
#store{
 position: absolute;
 z-index: 21;
 top: 104px;
 left: 278px;
 color: blue;
}
#default{
 position: absolute;
 z-index: 22;
 top: 176px;
 left: 184px;
 color: blue;
}
#recall{
 position: absolute;
 z-index: 23;
 top: 176px;
 left: 274px;
 color: blue;
}

/* 右上大旋鈕 */
.big-knob {
    background: radial-gradient(circle at 60% 40%, #ecd79b 75%, #d3b16a 100%);
    border: 3px solid #a99554;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin-left: 24px;
    margin-right: 10px;
    box-shadow: 0 5px 16px #d1bf9577 inset, 0 2px 8px #bca36955;
    position: absolute;
    z-index: 24;
    top: 30px;
    left:345px;
}
.big-knob::after {
    content: '';
    display: block;
    position: absolute;
    left: 29px; top: 30px;
    width: 16px; height: 16px;
    background: #c9ae7d;
    border-radius: 50%;
    box-shadow: 0 2px 4px #bfa566;
}
/* 右上左右方向按鈕 */
#arrow-block {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    margin-left: 18px;
    margin-top: 9px;
    position: absolute;
    z-index: 25;
    top: 180px;
    left:360px;
}
#Rarrow-btn,#Larrow-btn {
    background: #dedfd3;
    border: 2px solid #a7a995;
    border-radius: 7px;
    width: 54px;
    height: 27px;
    font-size: 16px;
    color: #4c4a39;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
    margin-bottom: 10px;
}
/* 下面控制面板 */
#lowerPanel{
  background: #BBBCB7;
  border: 3px solid #91918D;
  border-radius: 10px;
  width: 1090px;
  height: 270px;
  color: black;
  box-shadow: 2px 3px 9px #0b0b0a40 inset;
  position: absolute;
  z-index: 28;
  top: 320px;
  left:46px;
}
/* 左下 power */
#powerSw {
  background: radial-gradient(circle at 60% 30%, #ecd79b 70%, #bda15e 100%);
  border: 3px solid #a99554;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  box-shadow: 0 2px 8px #bda87b inset, 0 1px 2px #bca369bb;
  margin-bottom: 6px;
  position: absolute;
  z-index: 26;
  top: 120px;
  left:50px;
}
#powerLabel {
  font-size: 30px;
  color: black;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  z-index: 27;
  top: 70px;
  left:36px;
}
/* 下面控制旋鈕 */
/* TTL/CMOS 旋鈕 */
#TTLCMOS {
  font-size: 24px;
  margin-bottom: 8px;
  position: absolute;
  z-index: 29;
  top: 384px;
  left: 250px;
}
/* TTL/CMOS 旋鈕區 */
#TTLCMOSKnob {
  width: 80px;
  height: 80px;
  margin:0 auto;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ddd, #bbb);
  border: 2px solid #999;
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.6),
    inset 0 -4px 6px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 30;
  top: 420px;
  left: 264px;
}
/* 指示桿 */
#TTLCMOSKnob::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 4px;
  height: 30px;
  background: #060606;
  border-radius: 2px;
  transform: translateX(-50%);
}
/* 5V / 15V 標籤 */
#v5L,#v15R {
  top: 510px;
  font-size: 20px;
  white-space: nowrap;
}
#v5L {
  position: absolute;
  z-index: 41;
  left: 252px;
}
#v15R {
  position: absolute;
  z-index: 42;
  left: 330px;
}
/* 底部 CMOS ADJ 與 TTL */
#cmosAdj {
  font-size: 20px;
  text-align: center;
  color: #aa4400;
  position: absolute;
  z-index: 43;
  top: 540px;
  left: 258px;
}
/* OFFSET 旋鈕 */
#offset {
  font-size: 24px;
  margin-bottom: 8px;
  position: absolute;
  z-index: 44;
  top: 384px;
  left: 464px;
}
/* OFFSET 旋鈕區 */
#offsetKnob {
  width: 80px;
  height: 80px;
  margin:0 auto;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ddd, #bbb);
  border: 2px solid #999;
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.6),
    inset 0 -4px 6px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 45;
  top: 420px;
  left:464px;
}
/* 指示桿 */
#offsetKnob::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 4px;
  height: 30px;
  background: #060606;
  border-radius: 2px;
  transform: translateX(-50%);
}
/* - / + 標籤 */
#negative,#positive {
  color: #aa4400;
  font-family: "Noto Sans JP Black";
  font-weight: bold;
  top: 500px;
  font-size: 18pt;
  height:30px;
  white-space: nowrap;
}
#negative {
  position: absolute;
  z-index: 46;
  left: 456px;
}
#positive {
  position: absolute;
  z-index: 47;
  left: 536px;
}
/* 底部 ADJ 與 CAL */
#adj {
  font-size: 20px;
  text-align: center;
  color: #aa4400;
  position: absolute;
  z-index: 48;
  top: 540px;
  left: 486px;
}
/* AMPL 旋鈕 */
#ampl {
  font-size: 24px;
  margin-bottom: 8px;
  position: absolute;
  z-index: 49;
  top: 384px;
  left:674px;
}
/* ampl 旋鈕區 */
#amplKnob {
  width: 80px;
  height: 80px;
  margin:0 auto;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ddd, #bbb);
  border: 2px solid #999;
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.6),
    inset 0 -4px 6px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 50;
  top: 420px;
  left:664px;
}
/* 指示桿 */
#amplKnob::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 4px;
  height: 30px;
  background: #060606;
  border-radius: 2px;
  transform: translateX(-50%);
}
/* MIN / MAX 標籤 */
#labelMin,#labelMax {
  top: 510px;
  font-size: 20px;
  white-space: nowrap;
}
#labelMin {
  position: absolute;
  position: absolute;
  z-index: 51;
  left: 644px;
}
#labelMax {
  position: absolute;
  z-index: 52;
  left: 730px;
}
/* 底部 -20dB 與 ADJ */
#dbR {
  font-size: 20px;
  text-align: center;
  color: #aa4400;
  position: absolute;
  z-index: 53;
  top: 540px;
  left: 680px;
}
/* bnc 連接頭 */
#bncTTLCMOSLabel {
  color: #36342d;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  z-index: 54;
  top: 384px;
  left: 835px;
}
#bncTTLCMOSPort {
    width: 80px;
    height: 80px;
    border: 10px solid #666666;
    border-radius: 50%;
    background: #999999;
    margin-bottom: 2px;
    position: relative;
    box-shadow: 0 2px 8px #333333 inset;
    position: absolute;
    z-index: 55;
    top: 450px;
    left: 840px;
}
#bncTTLCMOSPort:after {
    content: '';
    position: absolute;
    top: 38%; left: 38%;
    width: 16px; height: 16px;
    background: #dddddd;
    border-radius: 50%;
    border: 2px solid black;
}
#bncOutputLabel {
  color: #36342d;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  z-index: 56;
  top: 384px;
  left: 984px;
}
#bncOutputPort {
    width: 80px;
    height: 80px;
    border: 10px solid #666666;
    border-radius: 50%;
    background: #999999;
    margin-bottom: 2px;
    position: relative;
    box-shadow: 0 2px 8px #333333 inset;
    position: absolute;
    z-index: 57;
    top: 450px;
    left: 980px;
}
#bncOutputPort:after {
    content: '';
    position: absolute;
    top: 38%; left: 38%;
    width: 16px; height: 16px;
    background: #dddddd;
    border-radius: 50%;
    border: 2px solid black;
}