html {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body {
  overflow-x: clip;
  max-width: 100%;
}
@media (min-width: 768px) {
  html {
    scrollbar-gutter: stable;
  }
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-slow { animation: float-slow 4.5s ease-in-out infinite; }

.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

@media (max-width: 767px) {
  .header-bar {
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: 1.25rem;
    padding-left: max(1.5rem, calc(1.25rem + env(safe-area-inset-left)));
    padding-right: max(1.5rem, calc(1.25rem + env(safe-area-inset-right)));
  }
}

@media (min-width: 768px) {
  .header-bar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0;
    padding-right: 0;
  }
}

footer summary {
  list-style: none;
}
footer summary::-webkit-details-marker {
  display: none;
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 1.25rem;
  border: 1px solid #e8e2d8;
  background: #fff;
  cursor: pointer;
}
.pay-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pay-method.is-on {
  border-color: #6d28d9;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}
.pay-method-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
  background: #1a2744;
}
.pay-tosspay { background: #3182f6; }
.pay-kakaopay { background: #fee500; }
.pay-naverpay { background: #03c75a; }
.pay-payco { background: #fa2828; }
.pay-samsungpay { background: #1428a0; }
.pay-phone { background: #6d28d9; }
.pay-transfer, .pay-virtual, .pay-bank { background: #1a2744; }
.pay-card { background: #12141a; }

.pdp-tabs {
  position: sticky;
  top: 3.6rem;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin: 1.25rem -1rem 0;
  padding: 0 0.35rem;
  background: rgba(244, 240, 234, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #e8e2d8;
}
@media (min-width: 768px) {
  .pdp-tabs {
    top: 6.4rem;
    margin-left: 0;
    margin-right: 0;
  }
}
.pdp-tab {
  appearance: none;
  border: 0;
  background: transparent;
  height: 2.7rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(18, 20, 26, 0.42);
  cursor: pointer;
  position: relative;
}
.pdp-tab.is-on {
  color: #1a2744;
}
.pdp-tab.is-on::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #e8b84a;
}
.pdp-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
}
.pdp-fold > summary::-webkit-details-marker,
.pdp-fold > summary::marker {
  display: none;
  content: "";
}
.pdp-fold > summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.35rem;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
  transition: transform 0.15s ease;
}
.pdp-fold[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}
.pdp-refund-bar {
  background: #fff;
  overflow: hidden;
}
.pdp-refund {
  margin-top: 0.55rem;
  padding-top: 0.7rem;
  border-top: 1px solid #e8e2d8;
}
.pdp-refund h3 {
  margin: 0.85rem 0 0.28rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1a2744;
}
.pdp-refund h3:first-child {
  margin-top: 0;
}
.pdp-refund p {
  margin: 0 0 0.38rem;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(18, 20, 26, 0.58);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pdp-refund p span {
  display: inline-block;
  min-width: 1.15em;
  margin-right: 0.2em;
  font-weight: 800;
  color: #1a2744;
}
.pdp-desc,
.pdp-desc * {
  max-width: 100%;
}
.pdp-desc img {
  max-width: 100%;
  height: auto;
}