:root {
  
  --text-color: #000000;
  --border-color: #808080;
  
  --link-color: #19c;
  --ruler-color: #e8e8e8;
  
  --icon-bg-color-hover: #2B3C45;
  --input-color: #B2B2B2;
  --global-se-spin-input-width: 82px;
}

#svgroot {
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
}


   .tabs {
      display: flex;
      border-bottom: 1px solid #ccc;
      margin-bottom: -1px !important;
      color: #091e42;
    }

    .tab {
      padding: 10px 20px;
      cursor: pointer;      
      margin-right: 5px;
      margin-bottom: -1px !important;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .tab.active {
      margin:-1px;
      border: 1px solid #ccc;      
      border-bottom: none;      
      border-width:1px 1px 0 1px;
      background: #ffffff;      
      
    }
    .two-col-flex {
        display: flex;
        align-items: center;     
        gap: 2px;      
        margin: 20px;         
    }

    .left {
      flex: 1;          
      text-align: right;
    }

    .right {
      width: 50%;   
      text-align: left;
            
    }


    /* 分頁內容 */
    .tab-content {      
      padding: 20px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }



@media (max-width: 720px) {
  #workarea {
    position:absolute;
    width:390px;
    height:700px;
    background-color: #C0C0C0;
    padding-top:5px;
    /* overflow: scroll; */
  
  }

  #svgcanvas1 {
    display:flex ;
    width:100%;  
    user-select: none;
    justify-content: center; 
  }

  #svgcanvas2 {
    display:flex;
    width:100%;  
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* 移除手機點擊高亮 */
    margin-left: 2px;
    justify-content: center; 
  }

  #svgcanvas3 {
    display:flex;
  
    width:100%;
    justify-content: center;   
    user-select: none;
    padding-top:15px;
  }


  #ad {
    width:320px;
    height:100px;
    background-color: rgba(255, 255, 255, 1);
  }

  #controlLabelDiv {
    position:absolute;
    top: 220px;
    left:260px;
    user-select: none;
    color:#f50e54
  }


 .button {    
      background-color: #fff;
      display: inline-block;   
      border: 0;
      border-radius: 5px;
      border-bottom: 4px solid #d9d9d9;
      font-size: 1rem;
      text-align: center;
      text-decoration: none;
      box-shadow: 0px 5px 10px #0057ab;
      transition: all 0.3s;
      padding: 5px 5px;
      margin-right: 10px;
  }
  .button:hover {
      box-shadow: 0px 15px 25px -5px #0057ab;
  }
  .buttondown {
      border: 2px solid #ab0000;
      box-shadow: 0px 5px 10px  #ab0000 !important;
  }

  .panel {
    position:absolute;
  /*position: fixed;*/
    top: 270px;
    left: -300px;  /* 初始在畫面左外側 */
    transform: translateX(-50%);
    width: 360px;
    user-select: none;
    height: 290px;  
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: center;
    border-radius: 10px;
    transition: left 1s ease;  /* 👈 控制滑入速度 */
    z-index: 999;
  }

  .Mainmenu {
    position:absolute;
  /*position: fixed;*/
    top: 0px;
    left: -180px;  /* 初始在畫面左外側 */
    transform: translateX(-50%);
    width: 360px;
    user-select: none;
    height: 100%;  
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);  
    border-radius: 10px;
    transition: left 1s ease;  /* 👈 控制滑入速度 */  
    z-index: 999;
  }

  .Mainmenu.open {
    left: 190px; /* 顯示時滑出來 */
  }
  .Mainmenu p {    
    margin: 10px;
    color:#0057ab;
  }

  .Mainmenu span {    
    text-align: left;
  }

  .panel.open {
    left: 195px; /* 顯示時滑出來 */
  }

  .tool {    
      text-align: center;
      display: inline-block;    
  }

  .logo1 {
      margin-top: 30px;
      font-family: 'cwTeXKai', serif;
      border-radius: .3rem;
      margin-left: 90px;
      background: #1abc9c;
      text-align: center;
      display: inline-block;
      color: #fff;
      font-size: 2.5rem;
      line-height: 1;
      width: 32px;
      height: 40px;
  }

  .logo2
  {
      font-family: 'cwTeXKai', serif;
      text-align: center;
      display: inline-block;
      color: #999;
      font-size: 2.5rem;
      line-height: 1;
      height: 26px;
  }
} 

@media (min-width:721px) {
  #workarea {
    position:absolute;
    width:720px;
    height:1200px;
    background-color: #C0C0C0;
    padding-top:5px;
    /* overflow: scroll; */
  
  }

  #svgcanvas1 {
    display:flex ;
    width:100%;  
    justify-content: center; 
    user-select: none;
  }

  #svgcanvas2 {
    display:flex;
    width:100%;  
    user-select: none;
    margin-left: 3px;
    justify-content: center; 
  }

  #svgcanvas3 {
    display:flex;
    
    width:100%;
    justify-content: center;   
    user-select: none;
    padding-top:15px;
  }

  #ad {
    width:320px;
    height:100px;
    background-color: rgba(255, 255, 255, 1);
  }

  #controlLabelDiv {
    position:absolute;
    top: 400px;
    left:468px;
    user-select: none;
    font-size: 30px;
    color:#f50e54
  }

 .button {    
      background-color: #fff;
      display: inline-block;   
      border: 0;
      border-radius: 5px;
      border-bottom: 4px solid #d9d9d9;
      font-size: 1rem;
      text-align: center;
      text-decoration: none;
      box-shadow: 0px 5px 10px #0057ab;
      transition: all 0.3s;
      padding: 5px 5px;
      margin-right: 10px;
  }
  .button:hover {
      box-shadow: 0px 15px 25px -5px #0057ab;
  }
  .buttondown {
      border: 2px solid #ab0000;
      box-shadow: 0px 5px 10px  #ab0000 !important;
  }

  .panel {
    position:absolute;
  /*position: fixed;*/
    top: 630px;
    left: -300px;  /* 初始在畫面左外側 */
    transform: translateX(-300px);
    width: 600px;
    user-select: none;
    height: 290px;  
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: center;
    border-radius: 10px;
    transition: left 1s ease;  /* 👈 控制滑入速度 */
    z-index: 999;
  }

  .Mainmenu {
    position:absolute;
  /*position: fixed;*/
    top: 0px;
    left: -180px;  /* 初始在畫面左外側 */
    transform: translateX(-50%);
    width: 360px;
    user-select: none;
    height: 100%;  
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);  
    border-radius: 10px;
    transition: left 1s ease;  /* 👈 控制滑入速度 */  
    z-index: 999;
  }

  .Mainmenu.open {
    left: 190px; /* 顯示時滑出來 */
  }
  .Mainmenu p {    
    margin: 10px;
    color:#0057ab;
  }

  .Mainmenu span {    
    text-align: left;
  }

  .panel.open {
    left: 360px; /* 顯示時滑出來 */
  }

  .tool {    
      text-align: center;
      display: inline-block;    
  }

  .logo1 {
      margin-top: 30px;
      font-family: 'cwTeXKai', serif;
      border-radius: .3rem;
      margin-left: 90px;
      background: #1abc9c;
      text-align: center;
      display: inline-block;
      color: #fff;
      font-size: 2.5rem;
      line-height: 1;
      width: 32px;
      height: 40px;
  }

  .logo2
  {
      font-family: 'cwTeXKai', serif;
      text-align: center;
      display: inline-block;
      color: #999;
      font-size: 2.5rem;
      line-height: 1;
      height: 26px;
  }  
    .two-col-flex {
        display: flex;
        align-items: center;     
        gap: 2px;        
        margin: 20px;       
    }

    .left {
      flex: 1;          
      text-align: right;
    }

    .right {
      width: 50%;   
      text-align: left;
            
    }




}