/* ====== 공통: 레이어 팝오버 / 모달 ====== */

/* 오버레이 */
.layer-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .15s ease;
}

/* 공통 레이어 */
.layer-popover{
  position:fixed;
  z-index:1000;
  display:none;                  /* 실제 open 시 JS에서 flex로 변경 */
  visibility:hidden;
  opacity:0;
  height:auto;
  min-width:0;
  box-sizing:border-box;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  overflow:hidden;
  flex-direction:column;
  align-items:stretch;
  transition:opacity .12s ease;
}

/* 헤더 */
.layer-popover .layer-header{
  display:flex;
  flex:0 0 auto;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 10px;
  background:#f6f7f9;
  border-bottom:1px solid #e5e7eb;
  cursor:pointer;
  user-select:none;
}
.layer-popover .layer-title{
  min-width:0;
  font-weight:600;
  font-size:13px;
  line-height:1.15;
}
.layer-popover .layer-close{
  flex:0 0 auto;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}

/* 본문
 * flex:1 1 auto 로 두면 짧은 내용도 부모의 max-height 쪽으로 늘어날 수 있으므로
 * 기본은 내용 높이만 사용하고, 길어질 때만 shrink + overflow 처리한다.
 */
.layer-popover .layer-body{
  flex:0 1 auto;
  width:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px;
  word-break:break-word;
}
.layer-popover .layer-body img,
.layer-popover .layer-body table{
  max-width:100%;
  height:auto;
}

/* 트리거 기준 popover */
.layer-popover:not(.layer-centered){
  width:auto;
  min-width:min(220px,calc(100vw - 16px));
  max-width:min(var(--layer-max-w,420px),calc(100vw - 16px));
  max-height:var(--layer-max-h,60vh);
}

/* 팝오버 화살표 */
.layer-popover:not(.layer-centered)::after{
  content:"";
  position:absolute;
  left:24px;
  top:-6px;
  width:10px;
  height:10px;
  background:#fff;
  border-left:1px solid #e5e7eb;
  border-top:1px solid #e5e7eb;
  box-shadow:-2px -2px 2px rgba(0,0,0,.03);
  transform:rotate(45deg);
}

/* 화면 중앙 모달 */
.layer-popover.layer-centered{
  width:auto;
  min-width:50px;
  max-width:min(90vw,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  max-height:min(90vh,calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.layer-popover.layer-centered::after{ display:none; }

/* confirm */
.layer-popover .layer-body.has-confirm{ text-align:center; }
.layer-popover .layer-confirm-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:12px;
}