.safe-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .safe-modal-box {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .safe-modal-header {
    flex-shrink: 0;
    padding: 12px 16px;
    font-weight: bold;
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
  }

  .safe-modal-close-btn {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border:none;
    background:none;
  }

  .safe-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    font-size: 14px;
    color: #333;
    font-size: 15px;
  }

  .no-select { user-select: none; }

  /* 공통 푸터 */
  .safe-modal-footer {
    flex-shrink: 0;
    padding: 0;
    background: #f9f9f9;
    display: flex;
    border-top: 1px solid #ddd;
  }
  .safe-modal-footer button {
    flex: 1;
    padding: 14px 0;
    border: none;
    border-radius: 0;
    background: white;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
    color: #000;
  }
  .safe-modal-footer button + button { border-left: 1px solid #ccc; }

  /* 모바일(iOS 느낌) */
  @media (max-width: 768px) {
    .safe-modal-footer {
      flex-direction: row;
      padding: 0;
      background: #f9f9f9;
      border-top: 1px solid #ddd;
    }
    .safe-modal-footer button {
      flex: 1;
      height: 50px;
      background: #fff;
      font-size: 17px;
      font-weight: 500;
      color: #007aff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .safe-modal-footer button + button { border-left: 1px solid #ddd; }
  }

  /* 데스크탑 */
  @media (min-width: 769px) {
    .safe-modal-footer {
      justify-content: flex-end;
      padding: 12px 16px;
      border-top: none;
    }
    .safe-modal-footer button {
      min-width: 100px;
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
    }
    .safe-modal-ok-btn   { background-color: #007bff; color: #fff; }
    .safe-modal-cancel-btn { background-color: #ccc; color: #333; }
    .safe-modal-footer button + button {
      border-left: none;
      margin-left: 8px;
    }
  }
  


  /* 전역 토스트 레이어 & 토스트 */
  #safe-toast-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 999999;
    display: grid; place-items: start end;
    padding: 16px;
  }
  .safe-toast {
    pointer-events: auto;
    margin: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }

  /* 모달 내부 토스트 슬롯 */
  .safe-modal-toast-slot {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    pointer-events: none;
  }
  .safe-modal-toast {
    pointer-events: auto;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 13px;
  }
  
   /* ── 위치 프리셋 ─────────────────────────────────────────── */
  .pos-top-right    { top:16px;   right:16px;   flex-direction: column;        align-items: flex-end; }
  .pos-top-left     { top:16px;   left:16px;    flex-direction: column;        align-items: flex-start; }
  .pos-bottom-right { bottom:16px;right:16px;   flex-direction: column-reverse;align-items: flex-end; }
  .pos-bottom-left  { bottom:16px;left:16px;    flex-direction: column-reverse;align-items: flex-start; }

  .pos-top-center   { top:16px;   left:50%; transform: translateX(-50%); flex-direction: column;        align-items: center; }
  .pos-bottom-center{ bottom:16px; left:50%; transform: translateX(-50%); flex-direction: column-reverse;align-items: center; }

  /*.pos-center       { top:50%; left:50%; transform: translate(-50%,-50%); flex-direction: column; align-items: center; }*/
  
  /* 토스트 레이어 위치 프리셋들 중 'center' 추가 */
#safe-toast-layer.pos-center{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* 화면 정중앙 */
  display: flex;
  gap: 8px;
  flex-direction: column;  /* 여러 개면 위→아래로 쌓기 */
  align-items: center;
  z-index: 1000000;        /* 모달보다 위로 (필요시 더 키우세요) */
}