/* 텍스트 상자 (textarea) 스타일 */
    .memo-text {
    font-family: Noto Sans KR, Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.5; 
    color: #fff; 
    background-color: #fffbe6; 
    border: 1px solid #ccc; 
    padding: 10px; 
    width: 100%; 
    height: 100px; 
    box-sizing: border-box; 
    }
    
    /*스티커 메모 아이콘 크기 */
      .fa-clone {
      color: #9253EB;
      font-size: 20px; 
   }
   
    .memo-btn {
     position: fixed;
     bottom: 9px;
     left: 50%;  
     width: 45px;
     height: 45px;
     background: transparent;
     border-radius: 50%;
     border: none; 
     cursor: pointer;
     font-size: 14px;
     color: #333;
     box-shadow: none;
     transform: translateX(-50%);
     transition: transform 0.3s ease, filter 0.2s ease;
     z-index: 999;
    }
    
    @media (max-width: 768px) {
      .memo-btn {
       display: none;
       }
      }
      
    .memo-btn:hover {
     transform: translateX(-20px) rotate(7deg) scale(1.8);
     z-index: 999;
   }

    .memo-popup {
     display: none; 
     position: fixed; 
     bottom: 150px; 
     left: 0; 

     background: #fffbe6; 
     border-radius: 12px; 
     box-shadow: 2px 2px 6px rgba(0,0,0,0.1); 
     padding: 15px;
     width: 350px; 
     height: 205px;
     cursor: move; 
     overflow: auto; 
     max-height: 80vh; 
     z-index: 999; 
 }
    
    .memo-viewer {
      position: fixed;
      z-index: 999;
      display: none;
      background: #fffbe6;
      border-radius: 12px;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
      padding: 10px;
      width: 300px;
      cursor: move;
      overflow: auto;
      max-height: 80vh;
    }

    .memo-popup textarea {
      z-index: 999;
      width: 98%;
      height: 50px;
      border: none;
      padding: 5px;
      border-radius: 10px;
      resize: none;
      background: #fffbe6;
      font-size: 14px;
    }

    .memo-popup button {
     margin-top: 10px;
     padding: 8px 12px;
     background: #e0e0e0;
     border-radius: 8px;
     font-size: 14px;
     color: #333;
     cursor: pointer;
     border: none;
    }

    .memo-popup .close {
      margin-top: 10px;
      width: 50px;
      height: 50px;
      background: #e0e0e0;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: #333;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    }

    .memo {
      position: absolute;
      font-family: Noto Sans KR;
      font-size: 13px;
      background: #fffbe6;
      color: #000000 !important;
      padding: 10px;
      border: 1px solid transparent;
      border-radius: 6px;
      box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
      cursor: move;
      z-index: 99;
      max-width: 350px;
      word-wrap: break-word;
      overflow: auto;
      text-overflow: ellipsis;
      user-select: none;
      transition: left 0.01s ease, top 0.01s ease;
      }

    .memo:hover {
      transform: scale(1.05);
    }

    .memo-viewer-content {
      z-index: 1000;
      width: 98%;
      background: #fffbe6;
      color: #000000 !important;
      padding: 10px;
      border-radius: 10px;
      font-family: Noto Sans KR;
      font-size: 14px;
      overflow-y: auto;
      max-height: 300px;
    }
    
    .memo-viewer2-content {
     z-index: 1000;
     width: 98%;
     background: #fffbe6;
     color: #000000 !important;
     padding: 10px;
     border-radius: 10px;
     font-family: Noto Sans KR;
     font-size: 14px;
     overflow-y: auto;
     max-height: 300px;
     white-space: pre-wrap; /* 줄바꿈과 공백을 그대로 유지 */
   }

    .memo-buttons {
      margin-top: 10px;
      text-align: right;
    }

    .memo-buttons button {
      margin-left: 5px;
      padding: 6px 12px;
      border-radius: 8px;
      background: #e0e0e0;
      border: none;
      cursor: pointer;
    }
 
    @media (max-width: 600px) {
     .memo-btn {
       display: none !important;
     }
    }