/* 모달 오버레이 */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,28,30,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-overlay.hidden{display:none;}

/* 모달 카드 */
.modal-card{
  position:relative;
  background:#fff;
  border:1px solid #dadada;
  width:calc(100% - 48px);
  max-width:420px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  transform:scale(0.94) translateY(12px);
  opacity:0;
  transition:transform .28s cubic-bezier(0.34,1.56,0.64,1),opacity .22s ease;
}
.modal-overlay.active .modal-card{
  transform:scale(1) translateY(0);
  opacity:1;
}

/* 모달 닫기 버튼 */
.modal-close{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;
  background:transparent;border:none;
  font-size:24px;line-height:1;color:#b4b4b4;
  cursor:pointer;transition:color .15s ease;
}
.modal-close:hover{color:#1c1c1e;}

/* 모달 콘텐츠 */
#modal-content{padding:28px 24px 32px;}
#modal-content h2{
  font-size:18px;font-weight:600;color:#1c1c1e;
  letter-spacing:-0.01em;margin-bottom:16px;
}
#modal-content h3{
  font-size:14px;font-weight:600;color:#1c1c1e;
  letter-spacing:-0.01em;margin-top:20px;margin-bottom:10px;
  padding-top:16px;border-top:1px solid #f1f1f1;
}
#modal-content h3:first-of-type{border-top:none;padding-top:0;margin-top:12px;}
#modal-content p{font-size:13px;line-height:1.75;color:#5c5c5c;margin-bottom:8px;}
#modal-content ul{font-size:13px;line-height:1.75;color:#5c5c5c;margin:8px 0;padding-left:20px;}
#modal-content li{margin-bottom:4px;}
#modal-content small{font-size:11px;color:#a4a4a4;}
#modal-content .detail-date{
  font-size:12px;letter-spacing:0.08em;color:#9a9a9a;
  margin-bottom:12px;font-weight:500;
}
#modal-content .item{
  border-top:1px solid #f1f1f1;
  padding-top:16px;margin-top:16px;
}
#modal-content .item:first-of-type{border-top:none;padding-top:0;margin-top:0;}
#modal-content .item-title{
  font-size:17px;font-weight:600;color:#1c1c1e;
  letter-spacing:-0.01em;margin-bottom:6px;
}
#modal-content .item-span{
  font-size:12px;color:#a4a4a4;letter-spacing:0.03em;margin-bottom:10px;
}
#modal-content .item-desc{
  font-size:13.5px;line-height:1.75;color:#5c5c5c;margin-bottom:14px;
}
#modal-content .item-link{
  display:inline-block;font-size:13px;font-weight:500;
  color:var(--accent);text-decoration:none;
  border:none;border-bottom:1px solid var(--accent);padding-bottom:2px;
  background:none;cursor:pointer;
}
#modal-content .item-lock{
  display:inline-block;font-size:13px;color:#c0c0c0;
  border-bottom:1px solid #e4e4e4;padding-bottom:2px;
}

@media(max-width:560px){
  .modal-card{width:calc(100% - 32px);}
  #modal-content{padding:24px 20px 28px;}
}