/* =================== hc-drawer.css =================== */
.hc-drawer {
position: fixed; inset: 0; z-index: var(--hc-z-drawer); pointer-events: none
}
.hc-drawer::before {
content: ""; position: absolute; inset: 0; background: rgba(26,23,20,.45); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--hc-dur-base)
}
.hc-drawer.is-open {
pointer-events: auto
}
.hc-drawer.is-open::before {
opacity: 1
}
.hc-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw; background: var(--hc-paper); box-shadow: var(--hc-sh-4); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--hc-dur-slow) var(--hc-ease-out)
}
.hc-drawer.is-open .hc-drawer__panel {
transform: translateX(0)
}


.hc-drawer__head {
padding: var(--hc-sp-4) var(--hc-sp-5); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-drawer__body {
flex: 1; overflow-y: auto; padding: var(--hc-sp-4) var(--hc-sp-5)
}
.hc-drawer__title {
font-family: var(--hc-serif); font-size: var(--hc-fs-xl)
}

.hc-drawer--left .hc-drawer__panel {
right: auto; left: 0; transform: translateX(-100%)
}

.hc-drawer--left.is-open .hc-drawer__panel {
transform: translateX(0)
}