:root {
  --cart-bg: #FFFFFF;
  --cart-ink: #2E2E2E;
  --cart-accent: #14352A;
  --cart-line: color-mix(in srgb, var(--cart-ink) 16%, var(--cart-bg));
  --cart-font: "Noto Sans KR", sans-serif;
  --cart-serif: "Gowun Batang", serif;
}

html.rdcart-locked,body.rdcart-locked { overflow: hidden; }
.rdcart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 40px; padding: 0 12px; border: 1px solid var(--cart-accent); background: var(--cart-bg); color: var(--cart-accent); font-family: var(--cart-font); font-size: .58rem; font-weight: 600; letter-spacing: .12em; cursor: pointer; }
.rdcart-btn--float { position: fixed; top: 88px; right: clamp(1.25rem,5vw,5rem); z-index: 39; box-shadow: 0 10px 32px color-mix(in srgb,var(--cart-ink) 14%,transparent); }
.rdcart-btn__count { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border-radius: 50%; background: var(--cart-accent); color: var(--cart-bg); font-size: 10px; letter-spacing: 0; transform: scale(0); transition: transform .25s ease; }
.rdcart-btn--has .rdcart-btn__count { transform: scale(1); }
.rdcart-btn:focus-visible,.rdcart button:focus-visible,.rdcart a:focus-visible { outline: 2px solid var(--cart-accent); outline-offset: 3px; }

.rdcart { position: fixed; inset: 0; z-index: 100; pointer-events: none; color: var(--cart-ink); font-family: var(--cart-font); }
.rdcart--open { pointer-events: auto; }
.rdcart__back { position: absolute; inset: 0; border: 0; background: color-mix(in srgb,var(--cart-ink) 52%,transparent); opacity: 0; transition: opacity .3s ease; cursor: default; }
.rdcart--open .rdcart__back { opacity: 1; }
.rdcart__panel { position: absolute; inset: 0 0 0 auto; width: min(440px,94vw); display: flex; flex-direction: column; background: var(--cart-bg); transform: translateX(100%); transition: transform .38s ease; box-shadow: -18px 0 50px color-mix(in srgb,var(--cart-ink) 18%,transparent); }
.rdcart--open .rdcart__panel { transform: none; }
.rdcart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 2rem; border-bottom: 1px solid var(--cart-line); }
.rdcart__head small { color: var(--cart-accent); font-size: .6rem; letter-spacing: .18em; }
.rdcart__head h2 { margin: .45rem 0 0; font-family: var(--cart-serif); font-size: 2rem; font-weight: 400; }
.rdcart__close { width: 40px; height: 40px; padding: 0; border: 1px solid var(--cart-line); background: none; color: var(--cart-ink); font-size: 1.5rem; cursor: pointer; }
.rdcart__body { flex: 1; overflow-y: auto; padding: 0 2rem; }
.rdcart__empty { margin: 0; padding: 4rem 0; color: color-mix(in srgb,var(--cart-ink) 62%,transparent); font-size: .86rem; }
.rdcart__line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--cart-line); }
.rdcart__copyline strong { display: block; font-family: var(--cart-serif); font-size: 1rem; font-weight: 400; line-height: 1.55; }
.rdcart__copyline small { display: block; margin-top: .45rem; color: color-mix(in srgb,var(--cart-ink) 65%,transparent); }
.rdcart__copyline a { display: inline-block; margin-top: .55rem; border-bottom: 1px solid var(--cart-accent); color: var(--cart-accent); font-size: .68rem; }
.rdcart__quantity { display: inline-flex; align-items: center; align-self: end; border: 1px solid var(--cart-line); }
.rdcart__quantity button { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--cart-ink); cursor: pointer; }
.rdcart__quantity span { min-width: 28px; text-align: center; font-size: .8rem; }
.rdcart__remove { grid-column: 2; justify-self: end; padding: 0; border: 0; background: none; color: color-mix(in srgb,var(--cart-ink) 58%,transparent); font-size: .68rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rdcart__foot { padding: 1.5rem 2rem calc(2rem + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--cart-line); background: var(--cart-bg); }
.rdcart__sum { display: flex; align-items: baseline; justify-content: space-between; }
.rdcart__sum span { font-size: .76rem; }
.rdcart__sum strong { font-family: var(--cart-serif); font-size: 1.8rem; font-weight: 400; }
.rdcart__foot p { margin: .8rem 0 1.2rem; color: color-mix(in srgb,var(--cart-ink) 62%,transparent); font-size: .72rem; }
.rdcart__copy,.rdcart__store { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cart-accent); font: inherit; font-size: .75rem; letter-spacing: .04em; cursor: pointer; }
.rdcart__copy { background: var(--cart-accent); color: var(--cart-bg); }
.rdcart__copy:disabled { opacity: .35; cursor: default; }
.rdcart__store { margin-top: .6rem; background: var(--cart-bg); color: var(--cart-accent); text-decoration: none; }

@media (max-width:480px) {
  .rdcart-btn--float { top: 78px; right: 1rem; }
  .rdcart__panel { width: 100%; }
  .rdcart__head,.rdcart__foot { padding-left: 1.25rem; padding-right: 1.25rem; }
  .rdcart__body { padding: 0 1.25rem; }
}

@media (prefers-reduced-motion:reduce) {
  .rdcart-btn__count,.rdcart__back,.rdcart__panel { transition: none!important; }
}