/* =================== hc-modal.css =================== */
.hc-modal {
position: fixed; inset: 0; z-index: var(--hc-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--hc-sp-4); background: rgba(26, 23, 20, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--hc-dur-base)
}
.hc-modal.is-open {
opacity: 1; pointer-events: auto
}
.hc-modal__panel {
position: relative; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--hc-paper); border-radius: var(--hc-r-2xl); box-shadow: var(--hc-sh-4); transform: scale(0.94); transition: transform var(--hc-dur-base) var(--hc-ease-bounce)
}
.hc-modal.is-open .hc-modal__panel {
transform: scale(1)
}
.hc-modal__head {
position: sticky; top: 0; padding: var(--hc-sp-4) var(--hc-sp-5); background: var(--hc-paper); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-modal__title {
font-size: var(--hc-fs-xl)
}
.hc-modal__x {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--hc-ink-mid)
}
.hc-modal__x:hover {
background: var(--hc-paper-3); color: var(--hc-ink)
}
.hc-modal__body {
padding: var(--hc-sp-5)
}
.hc-modal__foot {
padding: var(--hc-sp-4) var(--hc-sp-5); border-top: 1px solid var(--hc-line); display: flex; justify-content: flex-end; gap: var(--hc-sp-2)
}

@media(max-width:1024px) {
  .hc-modal[x-show], .hc-dialog[x-show] {display: none}
  .hc-modal[x-show="true"]:not([x-cloak]), .hc-dialog[x-show="true"]:not([x-cloak]) {display: block}
}

.hc-modal {
position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--tr-base);
  animation: hcModalFadeIn var(--tr-base);
}
.hc-modal.is-active {
display: flex;
  opacity: 1;
}
.hc-modal__content {
background: var(--c-white);
  border-radius: var(--br-12);
  padding: var(--sp-32);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--sh-2xl);
  animation: hcModalSlideUp var(--tr-base);
}
.hc-modal__close {
position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
  width: 36px;
  height: 36px;
  border: none;
  background: var(--c-bg);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20);
  color: var(--c-primary);
  transition: all var(--tr-base);
}
.hc-modal__close:hover {
background: var(--c-border);
  transform: rotate(90deg) scale(1.15);
}

.hc-modal--wide .hc-modal__panel {
max-width: 960px
}