/* ============================================================================
   글램팜 신규 딜러몰 — 디자인 시스템

   기준은 브랜드 자사몰(glampalm.co.kr)이다. 내가 지어낸 것이 아니라
   거기서 실제로 쓰는 값을 뽑아 왔다.

     서체    Pretendard          (자사몰이 Pretendard Variable 을 쓴다)
     강조    #F858C0 -> #6723D8  (자사몰 CTA 그라데이션 그대로)
     바탕    흰색, 큰 라운드, 알약 버튼

   ★ 폰트를 CDN 에서 불러오지 않는다. 직접 받아 우리가 서빙한다.
     카카오 우편번호 스크립트가 배포 주소 종료로 22개 화면을 한꺼번에
     죽였던 것과 같은 의존을 만들지 않는다.

   ★ 무게를 둘(400/700)만 싣는다. 셋이면 786KB 다.
     이 몰의 주 사용자는 매장에서 QR 을 찍은 손님의 휴대폰이고 매장
     와이파이는 대체로 나쁘다. font-display:swap 이라 폰트가 늦어도
     글자는 즉시 시스템 서체로 보인다.
   ========================================================================= */

@font-face {
  font-family: 'Pretendard';
  src: url('/font/pretendard-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/font/pretendard-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:      #0F0F11;
  --ink-2:    #5A5A62;
  --ink-3:    #97979F;
  --line:     #ECECEF;
  --line-2:   #E0E0E5;
  --plate:    #F5F5F7;
  --bg:       #FFFFFF;

  --brand-a:  #F858C0;
  --brand-b:  #6723D8;
  --brand:    linear-gradient(90deg, #F858C0, #6723D8);

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  --wrap: 1200px;
  --gut: 1.25rem;
  --dock: 0px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--dock);
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { max-width: 100%; }

/* ------------------------------------------------------------------ 상단 */
/* ★ 로고를 가운데 두지 않는다. 가운데 워드마크는 2010년대 쇼핑몰의 표시다.
   왼쪽 정렬 + 오른쪽 아이콘이 지금의 기본이고 폰에서 한 손으로 쓰기 좋다. */
.dm-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.dm-top .in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  height: 60px; display: flex; align-items: center; gap: 1rem;
}
.dm-top .logo img { height: 26px; width: auto; display: block; }
.dm-top .sp { flex: 1; }
.dm-top .acts { display: flex; align-items: center; gap: .1rem; }
.dm-top .acts a {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .5rem .6rem; border-radius: 999px;
  font-size: .82rem; color: var(--ink-2); white-space: nowrap;
}
.dm-top .acts a:hover { background: var(--plate); color: var(--ink); }
.dm-top .acts a.me { color: var(--ink); font-weight: 700; }
.dm-top .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: linear-gradient(90deg, #F858C0, #6723D8); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ------------------------------------------------------------ 분류 메뉴 */
/* 알약 모양으로 가로 스크롤한다. 줄바꿈으로 두 줄이 되면 폰 화면 위쪽을
   다 먹는다. 스크롤바는 숨기되 스크롤은 살린다. */
.dm-cat {
  position: sticky; top: 60px; z-index: 55;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.dm-cat ul {
  max-width: var(--wrap); margin: 0 auto; padding: .55rem var(--gut);
  list-style: none; display: flex; gap: .28rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dm-cat ul::-webkit-scrollbar { display: none; }
.dm-cat li { flex: 0 0 auto; }
.dm-cat a {
  display: block; padding: .42rem .85rem; border-radius: 999px;
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; transition: background .15s, color .15s;
}
.dm-cat a:hover { background: var(--plate); color: var(--ink); }
.dm-cat a.on { background: var(--ink); color: #fff; }
.dm-cat li.thin a { font-weight: 400; color: var(--ink-3); }
.dm-cat li.out:first-of-type {
  margin-left: .5rem; padding-left: .5rem; border-left: 1px solid var(--line-2);
}
.dm-cat li.out a { font-weight: 400; color: var(--ink-3); }

/* ------------------------------------------------------------------ 본문 */
.dm-wrap { max-width: var(--wrap); margin: 0 auto; padding: 1.75rem var(--gut) 4rem; }

.dm-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.dm-title-en { font-weight: 700; letter-spacing: .1em; font-size: 1.05rem; }
.dm-note { color: var(--ink-3); font-size: .82rem; }
.dm-warn { color: #C2185B; font-weight: 700; }

.dm-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; }
.dm-ref {
  border-radius: var(--r-md); padding: .8rem 1rem; font-size: .86rem;
  background: linear-gradient(90deg, rgba(248,88,192,.10), rgba(103,35,216,.10));
}

/* ------------------------------------------------------------- 상품 카드 */
/* 테두리를 두르지 않는다. 이미지 바탕판과 여백으로 나눈다 - 선이 많으면
   표처럼 보이고, 그것이 옛 쇼핑몰의 인상을 만든다. */
.dm-prod { display: block; }
.dm-prod .thumb {
  position: relative; border-radius: var(--r-md); background: var(--plate);
  aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dm-prod .thumb img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.dm-prod:hover .thumb img { transform: scale(1.045); }
.dm-prod .code { margin-top: .7rem; font-size: .7rem; color: var(--ink-3); letter-spacing: .02em; }
.dm-prod .name {
  margin-top: .15rem; font-size: .86rem; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-prod .price { margin-top: .35rem; font-size: 1rem; }

.price { font-weight: 700; letter-spacing: -.02em; }
.price-strike { color: var(--ink-3); text-decoration: line-through; font-weight: 400; font-size: .8rem; }

/* 품절 - 목록에서 지우지 않고 뒤로 민다. 매대에 실물이 있는데 화면에서
   사라지면 손님이 "없어졌나요" 를 묻게 된다. */
.dm-prod .thumb.out img { opacity: .28; }
.dm-prod .thumb .soldout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 999px; padding: .3rem .8rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap;
}

/* --------------------------------------------------------------- 버튼 */
.btn-dm {
  display: block; width: 100%; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #F858C0, #6723D8); color: #fff;
  padding: .95rem 1.2rem; font-size: .95rem; font-weight: 700;
  font-family: inherit; letter-spacing: -.01em; text-align: center; cursor: pointer;
  transition: filter .15s, transform .06s;
}
.btn-dm:hover { filter: brightness(1.06); color: #fff; }
.btn-dm:active { transform: translateY(1px); }
.btn-dm.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.btn-dm.ghost:hover { background: var(--plate); color: var(--ink); filter: none; }
.btn-dm.dis { background: var(--line-2); color: var(--ink-3); cursor: default; pointer-events: none; }

/* --------------------------------------------------------------- 입력 */
.dm-form .row2 { border-bottom: 1px solid var(--line); }
.dm-form .row2:last-child { border-bottom: 0; }
.dm-form .row2 label {
  display: block; padding: .9rem 0 .3rem; font-size: .78rem;
  font-weight: 700; color: var(--ink-2); letter-spacing: -.01em;
}
.dm-form .row2 .fld { padding: 0 0 .9rem; }
/* ★ 라디오·체크박스를 제외한다. 안 그러면 width:100% 가 걸려 동그라미가
   한 줄을 통째로 차지하고 글자와 따로 논다 (결제수단에서 실제로 그랬다). */
.dm-form input:not([type=radio]):not([type=checkbox]),
.dm-form select, .dm-form textarea,
input.form-control, select.form-select, textarea.form-control {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .7rem .85rem; font-size: .95rem; font-family: inherit; color: var(--ink);
  background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.dm-form input:not([type=radio]):not([type=checkbox]):focus, input.form-control:focus,
select.form-select:focus, textarea.form-control:focus {
  border-color: #6723D8; box-shadow: 0 0 0 3px rgba(103,35,216,.12);
}
.form-label { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; display: block; }

/* ------------------------------------------------- 폰 하단 고정 구매막대 */
/* ★ 이 몰의 손님은 매장에 서서 한 손으로 폰을 쓴다. 구매 버튼이 화면 밖에
   있으면 스크롤해서 찾아야 한다. 엄지가 닿는 자리에 붙여 둔다. */
.dm-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
}
.dm-dock .in { max-width: 34rem; margin: 0 auto; display: flex; align-items: center; gap: .9rem; }
.dm-dock .amt { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.dm-dock .btn-dm { width: auto; flex: 1; }

/* ----------------------------------------------------------------- 푸터 */
.dm-foot {
  border-top: 1px solid var(--line); margin-top: 3rem;
  padding: 2rem var(--gut) 2.5rem;
  color: var(--ink-3); font-size: .78rem;
}
.dm-foot .in { max-width: var(--wrap); margin: 0 auto; }

/* ------------------------------------------------------------------ 폰 */
@media (max-width: 767.98px) {
  :root { --gut: 1rem; }
  body { font-size: 14.5px; }
  .dm-top .in { height: 54px; }
  .dm-top .logo img { height: 22px; }
  .dm-cat { top: 54px; }
  .dm-top .acts a { padding: .45rem .42rem; font-size: .76rem; }
  .dm-wrap { padding-top: 1.2rem; }
  .dm-title { font-size: 1.15rem; }
}

/* --------------------------------------------------------------- 검색 */
.dm-search {
  display: flex; align-items: center; gap: .4rem;
  max-width: 24rem; margin: 0 0 1.8rem;
  background: var(--plate); border-radius: 999px; padding: .15rem .15rem .15rem 1rem;
}
.dm-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: .9rem; color: var(--ink); padding: .55rem 0;
}
.dm-search input::placeholder { color: var(--ink-3); }
.dm-search button {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: filter .15s;
}
.dm-search button:hover { filter: brightness(1.6); }

.dm-empty { text-align: center; padding: 4.5rem 1rem 5rem; }

/* 상품 격자. 폰 2열, 태블릿 3열, 데스크톱 4열 */
.dm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.7rem 1rem; }
@media (min-width: 768px)  { .dm-grid { grid-template-columns: repeat(3, 1fr); gap: 2.3rem 1.4rem; } }
@media (min-width: 1024px) { .dm-grid { grid-template-columns: repeat(4, 1fr); } }

/* 페이지 넘김 */
.dm-page { display: flex; justify-content: center; gap: .3rem; margin-top: 3.2rem; flex-wrap: wrap; }
.dm-page a {
  min-width: 34px; height: 34px; padding: 0 .5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; color: var(--ink-2);
}
.dm-page a:hover { background: var(--plate); color: var(--ink); }
.dm-page a.on { background: var(--ink); color: #fff; font-weight: 700; }

/* ---------------------------------------------------------- 상품 상세 */
.dm-pdp { display: grid; gap: 1.6rem; }
@media (min-width: 768px) {
  .dm-pdp { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .dm-pdp .info { position: sticky; top: 130px; }
}
.dm-pdp .thumb {
  position: relative; border-radius: var(--r-lg); background: var(--plate);
  aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dm-pdp .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.dm-pdp .thumb.out img { opacity: .28; }
.dm-pdp .thumb .soldout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(255,255,255,.94); color: var(--ink); border-radius: 999px;
  padding: .45rem 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
}

.pdp-name {
  font-size: 1.25rem; font-weight: 700; line-height: 1.45;
  letter-spacing: -.02em; margin: .35rem 0 1.1rem;
}
.pdp-price { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.pdp-price .won { font-size: .95rem; font-weight: 400; margin-left: .12rem; }
.pdp-price .price-strike { margin-left: .5rem; font-size: .9rem; }
.pdp-price .off {
  margin-left: .35rem; font-size: .82rem; font-weight: 700;
  background: linear-gradient(90deg, #F858C0, #6723D8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 수량 */
.qty { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; }
.qty .lb { font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-right: .4rem; }
.qty .st {
  width: 38px; height: 38px; border: 1px solid var(--line-2); background: #fff;
  border-radius: 999px; font-size: 1.05rem; color: var(--ink); cursor: pointer;
  line-height: 1; transition: background .15s;
}
.qty .st:hover { background: var(--plate); }
.qty input {
  width: 3.6rem; text-align: center; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .5rem 0; font-family: inherit;
  font-size: .95rem; font-weight: 700; color: var(--ink); outline: none;
}
/* 폰의 숫자 스피너를 지운다. +/- 단추가 그 역할을 한다 */
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input { -moz-appearance: textfield; }

.pdp-facts { list-style: none; padding: 1.2rem 0 0; margin: 1.6rem 0 0;
             border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); }
.pdp-facts li { display: flex; gap: .9rem; padding: .28rem 0; }
.pdp-facts li span { flex: 0 0 3.2rem; color: var(--ink-3); }

/* ★ 구매 버튼을 폰에서는 하단 고정, 데스크톱에서는 본문에 둔다.
   둘을 동시에 보이게 하면 같은 버튼이 두 번 나온다. */
.mobilebuy { display: block; }
.deskbuy { display: none; }
@media (min-width: 768px) {
  .mobilebuy { display: none; }
  .deskbuy { display: block; }
}
@media (max-width: 767.98px) {
  /* 하단 막대가 마지막 내용을 가리지 않게 자리를 비운다 */
  body:has(.dm-dock) { padding-bottom: 5.5rem; }
  .dm-pdp .thumb { border-radius: var(--r-md); }
  .pdp-name { font-size: 1.08rem; }
  .pdp-price { font-size: 1.5rem; }
}

/* ---------------------------------------------------------- 장바구니 */
.dm-cart { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.dm-cart li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.dm-cart .pic {
  flex: 0 0 84px; height: 84px; border-radius: var(--r-sm); background: var(--plate);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dm-cart .pic img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.dm-cart .body { flex: 1; min-width: 0; }
.dm-cart .nm {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .88rem; line-height: 1.45; margin-top: .1rem;
}
.dm-cart .price { margin-top: .35rem; font-size: 1.02rem; }
.dm-cart .price .won { font-size: .8rem; font-weight: 400; margin-left: .1rem; }
.dm-cart .ctrl { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; flex-wrap: wrap; }
.dm-cart .ctrl form { display: flex; align-items: center; gap: .3rem; }
.dm-cart .ctrl input {
  width: 3.4rem; text-align: center; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .35rem 0; font-family: inherit; font-size: .85rem; outline: none;
}
.dm-cart .ctrl button {
  border: 1px solid var(--line-2); background: #fff; border-radius: 999px;
  padding: .35rem .8rem; font-family: inherit; font-size: .78rem; color: var(--ink-2);
  cursor: pointer; transition: background .15s;
}
.dm-cart .ctrl button:hover { background: var(--plate); color: var(--ink); }
.dm-cart .ctrl button.del { border-color: transparent; color: var(--ink-3); }
.dm-cart .ctrl button.del:hover { color: #C2185B; }

.dm-sum {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.3rem 0 .2rem; font-size: .88rem; color: var(--ink-2);
}
.dm-sum .price { font-size: 1.5rem; color: var(--ink); }
.dm-sum .won { font-size: .9rem; font-weight: 400; margin-left: .1rem; }

/* 주문서 요약 */
.dm-lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
            padding: .3rem 0; margin-bottom: 1.6rem; }
.dm-lines .ln { display: flex; justify-content: space-between; gap: 1rem;
                padding: .55rem 0; font-size: .86rem; }
.dm-lines .ln.tot { border-top: 1px solid var(--line); font-weight: 700; font-size: 1rem; }

/* 결제수단 */
.dm-pays { display: grid; gap: .5rem; }
.dm-pay {
  display: block; border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.dm-pay:hover { background: var(--plate); }
.dm-pay input[type=radio] { width: auto; margin: 0 .5rem 0 0; accent-color: #6723D8;
                             vertical-align: -2px; }
.dm-pay .t { display: flex; align-items: center; font-size: .9rem; font-weight: 700; }
.dm-pay .d { font-size: .78rem; color: var(--ink-3); margin-top: .2rem; padding-left: 1.35rem; }
.dm-pay:has(input:checked) { border-color: #6723D8; background: rgba(103,35,216,.04); }

/* ------------------------------------------------------------- 로그인 */
.dm-auth { max-width: 24rem; margin: 2.5rem auto 0; }
@media (max-width: 767.98px) { .dm-auth { margin-top: 1.2rem; } }

/* ------------------------------------------------------------------ 각인 */
/* 현행 딜러몰의 주력 기능이다(월 1,300~3,600 라인). 눈에 띄되 결제를
   가로막지 않게, 담기 버튼 바로 위에 접힌 느낌으로 둔다. */
.dm-letter {
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: .9rem 1rem 1rem; margin-bottom: 1.2rem; background: #fff;
}
.dm-letter .hd { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.dm-letter .rows { display: grid; gap: .45rem; }
.dm-letter .r { display: flex; align-items: center; gap: .5rem; }
.dm-letter .r .no { flex: 0 0 3.6rem; font-size: .76rem; color: var(--ink-3); }
.dm-letter .r input {
  flex: 1; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .55rem .7rem; font-family: inherit; font-size: .92rem;
  letter-spacing: .06em; outline: none;
}
.dm-letter .r input:focus { border-color: #6723D8; box-shadow: 0 0 0 3px rgba(103,35,216,.12); }
.dm-letter .rule {
  list-style: none; padding: .8rem 0 0; margin: .8rem 0 0;
  border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-2); line-height: 1.7;
}
.dm-letter .rule li::before { content: '·'; margin-right: .4rem; color: var(--ink-3); }
.dm-letter .rule strong { color: #C2185B; }
.dm-letter .agree {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem;
  font-size: .8rem; line-height: 1.6; cursor: pointer;
}
.dm-letter .agree input { width: auto; margin: .2rem 0 0; accent-color: #6723D8; flex: 0 0 auto; }

/* 장바구니·주문서에 각인을 보여 준다 */
.dm-eng { margin-top: .35rem; font-size: .78rem; color: var(--ink-2); }
.dm-eng b { color: var(--ink); letter-spacing: .06em; }

/* ------------------------------------------------------- 주문 진행 단계 */
/* 글자만 있으면 손님이 "그래서 언제 오냐" 를 묻는다. 어디쯤인지 보여 준다. */
.dm-steps { list-style: none; display: flex; padding: 0; margin: 0; gap: .3rem; }
.dm-steps li {
  flex: 1; text-align: center; font-size: .68rem; color: var(--ink-3);
  padding-top: .8rem; position: relative; line-height: 1.3;
}
.dm-steps li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; border-radius: 999px; background: var(--line-2);
}
.dm-steps li.on { color: var(--ink); font-weight: 700; }
.dm-steps li.on::before { background: linear-gradient(90deg, #F858C0, #6723D8); }

/* ----------------------------------------------------------------- 사은품 */
/* 결제금액에 들어가지 않지만 함께 나간다. 무엇이 오는지 안 보이면
   「왜 이게 왔냐」 또는 「왜 안 왔냐」로 문의가 온다. */
.dm-free {
  margin-top: 1.2rem; padding: .9rem 1rem; border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(248,88,192,.08), rgba(103,35,216,.08));
}
.dm-free .hd { font-size: .86rem; font-weight: 700; margin-bottom: .45rem; }
.dm-free .hd .dm-note { font-weight: 400; margin-left: .35rem; }
.dm-free ul { list-style: none; padding: 0; margin: 0; }
.dm-free li { font-size: .84rem; padding: .12rem 0; }

/* ------------------------------------------------------------------ 옵션 */
/* 옵션이 실제 상품인 경우가 있다 (각인판매·보은판매). 가격도 옵션이 갖는다. */
.dm-opt { margin-bottom: 1.1rem; }
.dm-opt label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: .35rem; }
.dm-opt select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .7rem .85rem; font-family: inherit; font-size: .92rem; color: var(--ink);
  background: #fff; outline: none;
}
.dm-opt select:focus { border-color: #6723D8; box-shadow: 0 0 0 3px rgba(103,35,216,.12); }