/* ------------------------------------------------------------
 * modals.css
 * - 공용 모달 스타일 전용
 * ------------------------------------------------------------ */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px 0;
  background:rgba(29,20,10,0.48);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .18s ease;
}

/* 상세 모달은 모바일에서 풀스크린 시트처럼, PC에서는 깔끔한 카드처럼 보이게 합니다. */
.modal-backdrop--sheet{
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
}
.modal-backdrop.is-visible{opacity:1}

.modal-card,
.modal-card-wide{
  position:relative;
  width:min(100%, 420px);
  max-height:min(88vh, 760px);
  overflow:auto;
  border-radius:28px;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.92) 0, rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(255,251,244,0.99), rgba(243,232,213,0.99));
  box-shadow:var(--shadow-floating);
  transform:translateX(22px);
  transition:transform .2s ease;
}
.modal-card-wide{width:min(100%, 430px)}
.modal-backdrop.is-visible .modal-card,
.modal-backdrop.is-visible .modal-card-wide{
  transform:translateX(0);
}

.modal-title{
  color:var(--text-strong);
  font-size:20px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-0.03em;
}
.modal-text{
  margin-top:12px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.7;
  font-weight:700;
}
.modal-close-x{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(74,49,23,0.08);
  color:var(--text);
  font-size:17px;
  font-weight:900;
}
.modal-close-x:active{transform:scale(.96)}

#alertModal .modal-btn{margin-top:16px;width:100%}

.app-settings-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,247,0.99));
}
.app-settings-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
.app-setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
  padding:12px 13px;
  border:1px solid rgba(208,216,210,0.9);
  border-radius:16px;
  background:rgba(255,255,255,0.9);
}
.app-setting-row--primary{
  border-color:rgba(37,178,143,0.3);
  background:linear-gradient(180deg, rgba(246,255,252,0.98), rgba(239,250,246,0.98));
}
.app-setting-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.app-setting-copy strong{
  color:var(--text-strong);
  font-size:15px;
  line-height:1.25;
  font-weight:900;
}
.app-setting-copy small{
  color:var(--text-soft);
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}
.app-setting-check{
  flex:0 0 auto;
  width:22px;
  height:22px;
  accent-color:#20b892;
}
.app-setting-subgroup{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:8px;
  border-left:3px solid rgba(37,178,143,0.18);
}
.app-setting-subgroup.is-disabled{
  opacity:.48;
}
.app-setting-subgroup.is-disabled .app-setting-row{
  background:rgba(247,247,244,0.86);
}



/* 알림/확인 모달은 다른 상세 모달 위에 항상 표시 */
#alertModal,
#deleteModal,
#nicknameModal,
#shareModal,
#sharedEditModal{
  z-index: 120;
}

#sharedPostModal,
#ticketDetailModal{
  z-index: 90;
}


/* ------------------------------------------------------------
 * 시트형 상세 모달 공용 골격
 * ------------------------------------------------------------ */
.sheet-modal-card{
  width:min(100%, 520px);
  max-width:520px;
  max-height:100dvh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  border-radius:0;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 44px rgba(38,24,8,0.18);
  transform:translateX(100%);
  transition:transform .24s cubic-bezier(.22,.8,.2,1);
}
.sheet-modal-header,
.sheet-modal-footer{
  position:relative;
  z-index:2;
  flex:0 0 auto;
}
.sheet-modal-header{
  padding:8px 10px 6px;
  border-bottom:1px solid rgba(190,149,80,0.12);
  background:linear-gradient(180deg, rgba(255,252,246,0.98), rgba(250,244,234,0.96));
  backdrop-filter:blur(14px);
}
.sheet-modal-body{
  flex:1 1 auto;
  overflow:auto;
  padding:8px 10px 10px;
  overscroll-behavior:contain;
}
.sheet-modal-footer{
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(190,149,80,0.12);
  background:linear-gradient(180deg, rgba(255,250,242,0.96), rgba(247,238,223,0.98));
  backdrop-filter:blur(16px);
}
.sheet-modal-title-wrap{
  min-width:0;
  padding-right:34px;
}
.sheet-modal-title-wrap .modal-title{
  font-size:17px;
}
.sheet-modal-meta{
  margin-top:6px;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.6;
  font-weight:700;
}
.sheet-modal-close{
  position:absolute;
  top:6px;
  right:8px;
}
.sheet-section{
  margin-bottom:8px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,251,244,0.82);
  border:1px solid rgba(190,149,80,0.14);
  box-shadow:0 10px 24px rgba(83,56,18,0.07);
}
.sheet-section:last-child{margin-bottom:0}
.sheet-section-title{
  margin-bottom:8px;
  color:var(--text-strong);
  font-size:13px;
  font-weight:900;
  letter-spacing:-0.02em;
}
@media (min-width: 768px){
  .modal-backdrop--sheet{
    align-items:center;
    justify-content:center;
    padding:18px;
  }
  .sheet-modal-card{
    min-height:auto;
    max-height:min(92vh, 900px);
    border-radius:22px;
    transform:translateX(40px);
  }
}
@media (max-width: 767px){
  .sheet-modal-card{
    width:100%;
    max-width:none;
  }
}