/* ======================================================================
   공통 Modal / Confirm / Toast CSS (JS 생성 방식 최종본)
   ====================================================================== */

/* -------------------- Overlay -------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.modal-overlay.is-active {
  opacity: 1;display:block !important;
}
/* -------------------- Modal -------------------- */
/*.modal {
  position: fixed;
  background: #fff;
  min-width: 280px;
  max-width: 90%;
  padding: 20px;
  border-radius: 10px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;  
}

.modal {
  position: fixed;
  z-index: 1000;
}

.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.modal.use-animation {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}


.modal.anim-fade {
  transform: scale(0.98);
}
.modal.is-active.anim-fade {
  transform: scale(1);
}

.modal.anim-down {
  transform: translateY(-20px);
}
.modal.is-active.anim-down {
  transform: translateY(0);
}

.modal.anim-up {
  transform: translateY(20px);
}
.modal.is-active.anim-up {
  transform: translateY(0);
}
*/
/* ================= Modal Inner (UI + 애니메이션) ================= */
.modal {
  position: fixed;
  /*top: 50%;
  left: 50%;*/
  z-index: 1000;
   
}
.modal-inner {
  background: #fff;
  min-width: 280px;
  max-width: 90%;
  border-radius: 10px;

  opacity: 0;
  pointer-events: none;
   transform: translateY(0);   /* ← 이 줄 추가 */
 
}
.modal-inner svg{max-width: 100px;min-width: 50px;}

.modal-inner.is-active {
  opacity: 1;
  pointer-events: auto;
  display:block !important;
}

.modal-inner.is-leaving {
  opacity: 0;
  transform: translateY(20px);
}
.modal-inner.use-animation {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* animation types */
.modal-inner.anim-fade {
  transform: scale(0.98);
}
.modal-inner.is-active.anim-fade {
  transform: scale(1);
}

.modal-inner.anim-up {
  transform: translateY(20px);
}
.modal-inner.is-active.anim-up {
  transform: translateY(0);
}

.modal-inner.anim-down {
  transform: translateY(-20px);
}
.modal-inner.is-active.anim-down {
  transform: translateY(0);
}

/* 위치 */
.pos-top {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-bottom {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

/* -------------------- Header -------------------- */
.modal-header {
  text-align: center;
  margin-bottom: 10px;
}

.modal-icon {
  display: none;
  justify-content: center;
  padding:20px 20px 0 20px;
}

.modal-title {
  margin: 0;
  font-size: var(--fs2x);
  color:var(--color4);
  padding:30px 0 0 0
}
.modal-header:has(.modal-icon[style*="display: flex;"]) .modal-title{
  padding:20px 0 0 0
}

.modal-title.is-hidden {
  display: none;
}

/* -------------------- Body -------------------- */
/* 레이아웃 전용 영역 (JS에서 직접 조작하지 않음) */
.modal-body {
  margin-top: 10px;
}

.modal-message {
  padding: 0 20px 20px 20px;
  text-align: center;
  line-height: 1.4;
}

/* -------------------- Footer -------------------- */
.modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: var(--color12);
}
.modal-footer button{flex-grow: 1;min-width: 50%;padding:10px}

/* 닫기(X) 버튼 */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* -------------------- Toast -------------------- */
.toast {
  position: fixed;
  background: #c3f3d1;
  padding: 12px 1em;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 10000;
  box-shadow: var(--box-shadow1);
  width: 100vw;
  font-size: var(--fs2x);
  font-family: var(--strong1);
  border-top: var(--box-border5);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.pos-top    { top: 20px; left: 50%; transform: translateX(-50%); }
.toast.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.toast.pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
@container size1 (max-width: 600px) {
  .toast.pos-bottom { bottom:auto;top:calc(100svh - 150px);}
   /*html:has(.toast) #main{height: calc(100svh);overflow: auto;}
  html:has(.toast) .footer{display: none;}*/
}

.toast-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Toast Progress Bar */
.toast-progress {
  margin-top: 6px;
  height: 3px;
  background: rgba(255,255,255,0.3);
  overflow: hidden;
}

.toast-progress-bar {
  width: 100%;
  height: 100%;
  background: #cc9d02;
  transform: translateX(-100%);
  animation: toastProgress linear forwards;
}

@keyframes toastProgress {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

  
/*추가*/
.toast-icon svg{display:none}
.modal-header:has(.ticon_error) svg{display: none;}
/*.modal-header:has(.ticon_error)::before{content:"";display:block;width: 150px;aspect-ratio: 1;background:url('/year/111/img/error.gif') no-repeat 50% 50%;margin:10px auto;background-size: contain;}*/
.toast-icon .toest_icon{background-repeat: no-repeat;aspect-ratio: 0.73/1;max-height:90px;background-size: contain;background-position: 50% 50%;margin:0 auto;width:50%}
#typing .toast-icon .toest_icon{min-width: 120px;}
.ticon_info{background-image: url("/year/111/img/event/event_icon3.webp")}
.ticon_error{background-image: url("/year/111/img/error.gif");width: 150px;aspect-ratio: 1;background:url('/year/111/img/error.gif') no-repeat 50% 50%;margin:0 auto;background-size: contain;}
.ticon_success{background-image: url("/year/111/img/event/event_icon2.webp")}
.toast-body{display: block;text-align: center;}